/* 리뉴얼 의견 이벤트 — 사장님 09-28 «토스처럼 한 화면 한 물음 · 셀렉트 말고 · 이용한 곳은 여러 개 · 접기 꺾쇠 · 창 밖 누르면 닫힘»
   + «이 컬러는 족보가 없다 · 누르면 가운데로 · 리뉴얼 어때요 — 잘 보이는 위치에 · 모바일도».
   색은 정본 토큰만: 주요 행동 = 차콜(.bj-primary-action) · 선택됨 = 잉크 경계 + 조용한 면(EDITOR.UI.STATE.SELECTED) · 혜택 = 정보 면.
   로즈(--bj-accent-rose)는 사이트 CSS 에 정의가 없고 정본도 «축하·혜택의 작은 표식»으로 제한 — 쓰지 않는다. */
/* Mounted on legacy pages whose element rules (*{font-size:12px}, div{margin:0 auto}, button{background:none}...) break inheritance.
   Revert author styles inside the mounted parts; specificity (0,0,2) beats those element rules but loses to every class rule here and in the design system.
   SVG shapes are left alone: their geometry (x, d, r...) is presentation attributes, which all:revert would erase. */
html body :where(.rs-topbar,.rs-dialog,.rs-entry),html body :where(.rs-topbar,.rs-dialog,.rs-entry) :where(:not(svg *)) { all:revert; }
/* 되돌리지 않은 SVG 도형은 같은 명시도로 색 · 선만 물려받게 — 옛 *{color:#333} 이 선 색(currentColor)을 바꾸지 못하게(/m/cs.php) */
html body :where(.rs-topbar,.rs-dialog,.rs-entry) :where(svg *) { color:inherit; fill:inherit; stroke:inherit; stroke-width:inherit; stroke-linecap:inherit; stroke-linejoin:inherit; }
.rs-topbar,.rs-dialog,.rs-entry,.rs-page { font-family:var(--bj-font-family); color:var(--bj-ink); box-sizing:border-box; }
.rs-topbar *,.rs-dialog *,.rs-dialog *::before,.rs-dialog *::after { box-sizing:border-box; }
.rs-topbar[hidden],.rs-dialog [hidden],.rs-entry[hidden],.rs-page [hidden] { display:none!important; }
.rs-dialog :is(label,legend,p,b,em,strong,small) { font-family:inherit; }
.rs-ico { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rs-ico-dot { stroke-width:2.6; }

/* ── 입구: 사이트 맨 위 안내 띠 — 정본 헤더의 띠 배너 자리(#menu_r1 첫 칸 · 높이 40 · body.has-header-top-banner).
   사장님 09-28 «까만색이어야만 할까? · 리뉴얼해서 신나질 않아» → 09-29 금빛은 «누렇다» → 사이트가 원래 쓰던 맨 위 띠 두 색
   (card/head-toppest-banner.php 샘플 무료 #c1a5dc · 금액권 #9fa6fa)을 잇는 연보라 흐름 · 진한 글자 · 차콜 알약 「의견 남기기」.
   처음 보일 때 한 번(과 마우스를 올릴 때) 반짝임이 지나가고 색종이가 흩날린다 — 계속 움직이지 않는다. 누르면 설문, 오른쪽 X 는 이 띠만 하루 접기 ── */
.rs-topbar { --rs-bar-from:#c1a5dc; --rs-bar-to:#9fa6fa; --rs-violet:#7166a9;   /* 옛 띠 두 색 · 웨딩 안내 강조 보라(wedding-fullset.css) */
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:40px; margin:0; padding:0 48px; overflow:hidden; background:linear-gradient(90deg,var(--rs-bar-from),var(--rs-bar-to)); color:var(--bj-ink); }
.rs-topbar .rs-topbar-open { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; height:40px; margin:0; padding:0 8px; border:0; background:transparent; color:inherit;
  font:500 14px/1 var(--bj-font-family); letter-spacing:-.01em; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.rs-topbar .rs-topbar-open > span { overflow:hidden; text-overflow:ellipsis; }
.rs-topbar .rs-topbar-open b { font-weight:700; }
.rs-topbar .rs-topbar-cta { flex:none; display:inline-flex; align-items:center; gap:2px; height:28px; margin-left:12px; padding:0 10px 0 14px; border-radius:999px; background:var(--bj-charcoal); color:var(--bj-paper); font-weight:700; }
.rs-topbar .rs-ico { width:18px; height:18px; }
.rs-topbar .rs-ico-next { width:14px; height:14px; }
.rs-topbar .rs-topbar-close { position:absolute; z-index:1; top:4px; right:8px; display:grid; place-items:center; width:32px; height:32px; margin:0; padding:0; border:0; border-radius:var(--bj-control-radius); background:transparent; color:inherit; opacity:.72; cursor:pointer; }
.rs-topbar .rs-topbar-close .rs-ico { width:16px; height:16px; }
.rs-topbar .rs-topbar-open:focus-visible,.rs-topbar .rs-topbar-close:focus-visible { outline:2px solid var(--bj-ink); outline-offset:-2px; }
@media (hover:hover) { .rs-topbar .rs-topbar-close:hover { opacity:1; } }
.rs-topbar .rs-topbar-short { display:none; }
/* 재미 — 처음 한 번 말풍선 속 점 셋이 차례로 통통(입력 중…) · 반짝임 한 줄 · 색종이 */
.rs-topbar .rs-dot { transform-box:fill-box; }
.rs-topbar.rs-greet .rs-dot { animation:rs-dot .5s ease-in-out .35s both; }
.rs-topbar.rs-greet .rs-dot:nth-of-type(3) { animation-delay:.5s; }
.rs-topbar.rs-greet .rs-dot:nth-of-type(4) { animation-delay:.65s; }
@keyframes rs-dot { 0%,100% { transform:none; } 40% { transform:translateY(-2.2px); } }
.rs-topbar::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%) no-repeat -60% 0/40% 100%; }
.rs-topbar.rs-greet::after { animation:rs-shine 1.1s ease-in-out .05s both; }
@keyframes rs-shine { to { background-position:160% 0; } }
.rs-topbar .rs-confetti { position:absolute; inset:0; pointer-events:none; }
.rs-topbar .rs-confetti i { position:absolute; top:-8px; display:block; width:8px; height:4px; border-radius:1px; opacity:0; background:var(--bj-paper); }
.rs-topbar .rs-confetti i:nth-child(3n+2) { width:6px; height:6px; border-radius:50%; background:var(--rs-violet); }
.rs-topbar .rs-confetti i:nth-child(3n) { background:var(--bj-nav-active); }
.rs-topbar .rs-confetti i:nth-child(1){left:6%;--d:.02s;--r:160deg} .rs-topbar .rs-confetti i:nth-child(2){left:13%;--d:.18s;--r:-120deg} .rs-topbar .rs-confetti i:nth-child(3){left:21%;--d:.08s;--r:200deg}
.rs-topbar .rs-confetti i:nth-child(4){left:30%;--d:.26s;--r:-180deg} .rs-topbar .rs-confetti i:nth-child(5){left:37%;--d:.04s;--r:140deg} .rs-topbar .rs-confetti i:nth-child(6){left:46%;--d:.22s;--r:-220deg}
.rs-topbar .rs-confetti i:nth-child(7){left:55%;--d:.12s;--r:180deg} .rs-topbar .rs-confetti i:nth-child(8){left:63%;--d:.3s;--r:-150deg} .rs-topbar .rs-confetti i:nth-child(9){left:71%;--d:.06s;--r:210deg}
.rs-topbar .rs-confetti i:nth-child(10){left:79%;--d:.2s;--r:-170deg} .rs-topbar .rs-confetti i:nth-child(11){left:87%;--d:.1s;--r:130deg} .rs-topbar .rs-confetti i:nth-child(12){left:94%;--d:.28s;--r:-200deg}
.rs-topbar.rs-greet .rs-confetti i { animation:rs-confetti .8s cubic-bezier(.2,.6,.4,1) var(--d) both; }
@media (hover:hover) { .rs-topbar:hover .rs-confetti i { animation:rs-confetti .8s cubic-bezier(.2,.6,.4,1) var(--d) both; } .rs-topbar:hover::after { animation:rs-shine 1.1s ease-in-out both; } }
@keyframes rs-confetti { 0% { opacity:0; transform:translateY(0) rotate(0); } 15% { opacity:1; } 100% { opacity:0; transform:translateY(48px) rotate(var(--r)); } }

/* ── 창 — 화면 가운데 · 폰은 아래에서 올라오는 시트 ── */
.rs-dialog { position:fixed; inset:0; margin:auto; padding:0;
  width:420px; max-width:calc(100vw - 32px); height:min(480px,var(--rs-height,calc(100dvh - 48px))); max-height:min(480px,var(--rs-height,calc(100dvh - 48px)));   /* 한 높이 — 물음마다 창 높이가 바뀌지 않게 · 480 = 가장 긴 1단계(혜택 상자 + 물음 + 네 칸 · 약 464)가 스크롤 없이(09-29 물음 둘 · 숨기기 걷음 · 안내 두 줄) */
  border:0; border-radius:var(--bj-order-panel-radius); background:var(--bj-clean); color:var(--bj-ink);
  box-shadow:0 2px 6px rgba(24,24,23,.07),0 18px 48px rgba(24,24,23,.16); overflow:hidden; text-align:left; }
.rs-dialog[open] { display:flex; flex-direction:column; animation:rs-rise .22s ease-out; }
.rs-dialog::backdrop { background:color-mix(in srgb,var(--bj-charcoal) 32%,transparent); }
@keyframes rs-rise { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
.rs-dialog .rs-shell { display:flex; flex-direction:column; min-height:0; max-height:inherit; flex:1 1 auto; }
.rs-dialog button { font-family:inherit; }

/* 머리 줄: [이전] 리뉴얼 의견 이벤트 …… 1 / 3 [접기 ⌄] · 그 아래 진행 막대 */
.rs-dialog .rs-bar { flex:none; display:flex; align-items:center; gap:4px; height:56px; margin:0; padding:0 8px 0 20px; border:0; }
.rs-dialog .rs-back { margin-left:-12px; }
.rs-dialog .rs-kicker { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:600; line-height:24px; letter-spacing:-.01em; color:var(--bj-ink); }   /* 창 제목 — 사장님 09-29 «상단에 타이틀이 하나 있어야» · 물음(20)보다 한 단계 작은 본문 크기 굵게(13 회색 «코딱지» · 18 «싸움» 사이) */
.rs-dialog.rs-completed .rs-kicker { visibility:hidden; }   /* 완료 화면은 «고맙습니다»가 제목 */
.rs-dialog .rs-stepno { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }   /* 단계 수는 바로 아래 진행 막대가 보여 준다 — 읽기 도구에만 */
.rs-dialog .rs-icon-btn { display:inline-grid; place-items:center; flex:none; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:var(--bj-control-radius); background:transparent; color:var(--bj-ink); cursor:pointer; }
@media (hover:hover) { .rs-dialog .rs-icon-btn:hover { background:var(--bj-soft-surface); } }
.rs-dialog .rs-icon-btn:focus-visible { outline:2px solid var(--bj-nav-active); outline-offset:1px; }
.rs-dialog .rs-icon-btn .rs-ico { width:22px; height:22px; }
/* 접기 = 글 + 아래 꺾쇠 */
.rs-dialog .rs-fold { display:inline-flex; align-items:center; gap:2px; flex:none; height:40px; margin:0; padding:0 8px 0 12px; border:0; border-radius:var(--bj-control-radius); background:transparent; color:var(--bj-muted); font:500 14px/1 var(--bj-font-family); cursor:pointer; }
.rs-dialog .rs-fold .rs-ico { width:20px; height:20px; }
@media (hover:hover) { .rs-dialog .rs-fold:hover { background:var(--bj-soft-surface); color:var(--bj-ink); } }
.rs-dialog .rs-fold:focus-visible { outline:2px solid var(--bj-nav-active); outline-offset:1px; }
.rs-dialog .rs-progress { flex:none; height:4px; margin:0 20px; border-radius:999px; background:var(--bj-stone); overflow:hidden; }
.rs-dialog .rs-progress i { display:block; width:calc(var(--rs-progress,.3333) * 100%); height:100%; border-radius:inherit; background:var(--bj-charcoal); transition:width .25s ease; }

/* 몸: 물음 하나 */
.rs-dialog .rs-content { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:20px 20px 16px; }
.rs-dialog .rs-title { margin:0 0 16px; padding:0; font-size:22px; line-height:1.4; font-weight:700; letter-spacing:-.02em; color:var(--bj-ink); word-break:keep-all; overflow-wrap:break-word; text-align:left; }
.rs-dialog .rs-title:focus { outline:none; }
.rs-dialog .rs-benefit { display:flex; align-items:flex-start; gap:12px; margin:0 0 24px; padding:14px 16px; border:0; border-radius:var(--bj-order-panel-radius); background:var(--bj-information-surface); }
.rs-dialog .rs-benefit .rs-ico { width:24px; height:24px; margin-top:1px; color:var(--bj-ink); }
.rs-dialog .rs-benefit p { margin:0; }
.rs-dialog .rs-benefit b { display:block; font-size:15px; line-height:1.5; font-weight:600; color:var(--bj-ink); word-break:keep-all; }
.rs-dialog .rs-benefit em { font-style:normal; font-weight:700; color:var(--bj-ink); }
.rs-dialog .rs-benefit span { display:block; margin-top:2px; font-size:13px; line-height:1.5; color:var(--bj-muted); }
.rs-dialog form { margin:0; }
.rs-dialog .rs-step { min-width:0; margin:0; padding:0; border:0; }
.rs-dialog .rs-q { display:block!important; position:static!important; float:none; width:auto!important; height:auto!important; clip:auto!important; overflow:visible!important; visibility:visible!important;
  margin:0 0 16px; padding:0; font-size:20px!important; line-height:1.4!important; font-weight:700; letter-spacing:-.02em; color:var(--bj-ink); word-break:keep-all; text-align:left; }
.rs-dialog .rs-q:focus { outline:none; }

/* 고르기 — 칸 전체가 입력칸. 선택됨 = 잉크 경계 + 조용한 면 */
.rs-dialog .rs-options { display:grid; gap:8px; }
.rs-dialog .rs-option { position:relative; display:flex; align-items:center; gap:12px; min-height:48px; margin:0; padding:11px 16px;
  border:1px solid var(--bj-line); border-radius:12px; background:var(--bj-clean); color:var(--bj-ink);
  font-size:16px; line-height:1.4; font-weight:500; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease,background-color .15s ease,transform .1s ease; }
.rs-dialog .rs-option input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.rs-dialog .rs-option-text { flex:1 1 auto; font-size:16px; line-height:1.4; }
.rs-dialog .rs-option .rs-check { color:var(--bj-ink); opacity:0; transform:scale(.8); transition:opacity .15s ease,transform .15s ease; }
@media (hover:hover) { .rs-dialog .rs-option:hover { background:var(--bj-paper); } }
.rs-dialog .rs-option:active { transform:scale(.99); }
.rs-dialog .rs-option:has(input:checked) { border-color:var(--bj-ink); background:var(--bj-soft-surface); }
.rs-dialog .rs-option:has(input:checked) .rs-check { opacity:1; transform:none; }
.rs-dialog .rs-option:has(input:focus-visible) { outline:2px solid var(--bj-nav-active); outline-offset:2px; }

/* 마지막 물음: 의견 한 줄 — 누르는 칸은 옅은 면, 쓰는 동안만 잉크 경계 */
.rs-dialog .rs-step textarea { display:block; width:100%; min-height:112px; margin:0; padding:14px 16px; border:1px solid transparent; border-radius:12px;
  background:var(--bj-soft-surface); color:var(--bj-ink); font:400 16px/1.6 var(--bj-font-family); resize:vertical; }
.rs-dialog .rs-step textarea::placeholder { color:var(--bj-tertiary); }
.rs-dialog .rs-step textarea:focus { outline:none; border-color:var(--bj-ink); background:var(--bj-clean); }
.rs-dialog .rs-count { display:block; margin:6px 2px 0; text-align:right; font-size:13px; line-height:1.4; color:var(--bj-muted); font-variant-numeric:tabular-nums; }
.rs-dialog .rs-note { margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--bj-muted); word-break:keep-all; }
.rs-dialog .rs-terms { margin-top:6px; }

/* 아래 행동 줄 — 단추는 정본 주요 행동(.bj-primary-action, 차콜). 여기선 폭·높이만 */
.rs-dialog .rs-actions { flex:none; margin:0; padding:12px 20px max(16px,env(safe-area-inset-bottom)); border:0; background:var(--bj-clean); }
.rs-dialog .rs-primary, .rs-page .rs-primary { display:flex; width:100%; min-height:52px; margin:0; text-align:center; }
.rs-dialog .rs-primary:disabled { opacity:.4; cursor:wait; }
.rs-dialog .rs-error { margin:0 0 10px; font-size:14px; line-height:1.5; color:var(--bj-danger); }

/* 다 보낸 뒤 */
.rs-dialog .rs-done-ico { display:grid; place-items:center; width:56px; height:56px; margin:8px auto 16px; border-radius:50%; background:var(--bj-soft-surface); color:var(--bj-ink); }
.rs-dialog .rs-done-ico .rs-ico { width:28px; height:28px; stroke-width:2.2; }
.rs-dialog.rs-completed .rs-title { text-align:center; margin-bottom:8px; }
.rs-dialog.rs-completed .rs-content { display:flex; flex-direction:column; justify-content:center; }
.rs-dialog .rs-done-block { text-align:center; }
.rs-dialog .rs-result { margin:0 0 8px; font-size:15px; line-height:1.6; color:var(--bj-ink); word-break:keep-all; }
.rs-dialog .rs-done-block .rs-login { margin-top:16px; }
.rs-dialog .rs-actions .rs-done:not([hidden]) { margin-top:0; }

/* 사이트 아래 글 입구 · 따로 연 설문 쪽 */
.rs-entry { padding:16px 24px; text-align:center; font-size:14px; }
.rs-entry a { color:var(--bj-muted); text-decoration:underline; text-underline-offset:3px; }
.rs-page { max-width:var(--bj-content-max); margin:64px auto; padding:0 var(--bj-page-gutter); line-height:1.7; }
.rs-page h1 { font-size:var(--bj-type-page); line-height:1.4; word-break:keep-all; }
.rs-page .bj-primary-action { display:inline-flex; padding:12px 24px; }
.rs-page a:not(.bj-primary-action) { color:var(--bj-muted); text-decoration:underline; text-underline-offset:3px; }

/* 폰: 띠는 짧은 글만(알약 단추 숨김 — 글이 잘리지 않게) · 창은 아래에서 올라오는 시트 */
@media (max-width:767px) {
  .rs-topbar { justify-content:center; padding:0 40px; }   /* 사장님 09-29 «모바일은 센터 정렬이 맞지 않을까» — X 자리(40)만큼 왼쪽도 비워 좌우 같게 */
  .rs-topbar .rs-topbar-open { font-size:13px; gap:6px; }
  .rs-topbar .rs-topbar-long,.rs-topbar .rs-topbar-cta { display:none; }
  .rs-topbar .rs-topbar-short { display:inline; }
  .rs-dialog { inset:auto 0 0 0; margin:0; width:100%; max-width:100%; height:min(480px,88dvh,var(--rs-height,88dvh)); max-height:min(480px,88dvh,var(--rs-height,88dvh)); border-radius:16px 16px 0 0; }
  .rs-dialog[open] { animation:rs-sheet .26s ease-out; }
  .rs-dialog .rs-content { padding:16px 20px 12px; }
  .rs-dialog .rs-title { font-size:20px; }
}
@keyframes rs-sheet { from { opacity:.6; transform:translateY(28px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .rs-dialog[open], .rs-dialog .rs-option, .rs-dialog .rs-progress i, .rs-topbar .rs-dot, .rs-topbar .rs-confetti i, .rs-topbar::after { animation:none!important; transition:none!important; } }