@import url("/static/fonts/pretendard/pretendardvariable-dynamic-subset.css");
/* 차똑 — 서비스 UI.
   구조는 토스: 한 화면에 한 가지 생각, 큰 제목, 면으로 구분(테두리 최소), 바닥 고정 CTA.

   ── 색은 여기가 전부다 ──────────────────────────────────────────
   예전에는 값이 파일 곳곳에 흩어져 64가지였다. 같은 일을 하는데 값만
   미세하게 다른 색이 대부분이었다(옅은 민트만 12가지). 25가지로 합쳤다.
   앞으로 색을 쓸 때는 반드시 아래 토큰을 쓴다. 새 값을 직접 적지 않는다.

   뜻을 가진 색은 셋뿐이다:
     민트  = 브랜드, 눌러야 할 것        (주버튼·체크·요금제 배지·로고)
     골드  = 진행과 시간                 (단계 표시·빠른 답장·체험 기간·온도)
     빨강  = 경고                        (못 받음·늦음·시간 초과·사고·해지)
   나머지는 흰색·민트빛 회색 다섯 단계다.
   (토스·카카오·네이버 결제 버튼만 예외 — 남의 브랜드색이라 못 바꾼다)
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;

  /* 바탕·면·선 */
  --white:#FFFFFF;
  --page:#EFF8F5;        /* 앱 바탕 */
  --surf:#E6F4EF;        /* 옅은 면 (칩·비활성 버튼·안쪽 구분) */
  --line:#D9EDE6;

  /* 글자 — 셋 다 흰 바탕·앱 바탕에서 AA 를 넘긴다 */
  --ink:#0E1A1B;         /* 본문 */
  --stone:#3E504C;       /* 보조 (7.8:1) */
  --stone2:#5C7570;      /* 더 옅은 보조·시각·단위 (4.6:1) */

  /* 민트 — 브랜드 */
  --mint-lt:#2ADCBF;     /* 볼록 버튼 윗면 */
  --mint:#00C8A8;        /* 기본 */
  --mint-dk:#00A98F;     /* 볼록 버튼 아랫면·눌림 */
  --mint-tx:#00806E;     /* 흰 바탕 위 글자·작은 점 (4.6:1) */
  --on-mint:#04302A;     /* 민트 위에 올리는 글자 (7.3:1) — 흰 글자는 안 보인다 */

  /* 어두운 면 */
  --dk:#05473E;          /* 완료·진행 막대 */
  --dk2:#032E28;         /* 히어로·보내기 버튼 */
  --on-dk:#EAFBF6;       /* 어두운 면 위 글자 */

  /* 빨강 — 경고 */
  --alert-lt:#D8543C; --alert:#C4321C; --alert-dk:#A62812;
  --alert-soft:#FBE7E1;  /* 경고 면 */
  --alert-hi:#FFD9CF;    /* 구슬 하이라이트 */

  /* 골드 — 진행과 시간 */
  --gold-lt:#F0BC55; --gold:#E3A93B; --gold-dk:#DE9F2E;
  --gold-soft:#FBF0D6; --gold-tx:#6B5320;

  /* ── 옛 이름. 값은 위 토큰을 가리킨다. 새로 쓰지 말 것 ── */
  --sand:var(--surf); --sand2:var(--surf); --cream:var(--white);
  --terra:var(--mint); --terra-deep:var(--mint-dk); --terra-soft:var(--surf);
  --on-brand:var(--on-mint); --brand-deep:var(--mint-tx); --alert-deep:var(--alert-dk);
  --forest:var(--dk); --forest-soft:var(--surf);
  --night:var(--dk2); --onDark:var(--on-dk); --onDarkDim:rgba(234,251,246,.72);
  --paper:var(--white); --bg:var(--white); --surface:var(--white);
  --text:var(--ink); --mute:var(--stone); --accent:var(--mint); --ok:var(--dk);
  --ivory:var(--surf);

  --kr:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
  --lat:"Jost",var(--kr);
  --mono:var(--lat);
  --ease:cubic-bezier(.16,1,.3,1);
  --r:14px; --r-lg:20px; --gut:20px;
  --t11:11px; --t12:12px; --t13:13px; --t14:14px; --t15:15px; --t16:16px; --t17:17px; --t20:20px; --t24:24px; --t26:26px; --t32:32px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 var(--t16)/1.6 var(--kr);
  word-break:keep-all;-webkit-font-smoothing:antialiased;min-height:100dvh}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mono{font-family:var(--lat);font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.num{font-family:var(--lat);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 앱 컨테이너 ── */
.wrap{width:100%;max-width:480px;margin-inline:auto;min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(8px + env(safe-area-inset-top)) var(--gut) 0;background:var(--cream)}
@media (min-width:768px){
  body:not(.admin){background:var(--sand)}
  body:not(.admin) .wrap{min-height:100dvh;box-shadow:0 0 0 1px var(--line)}
}

/* ── 로고 ── */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.logo-sym{flex:none;display:block}
.wm{position:relative;display:inline-flex;align-items:flex-start;font-family:var(--kr);font-weight:700;letter-spacing:-.03em;line-height:1}
.wm-t{display:block}
.wm-d{display:flex;gap:var(--gap);margin-left:calc(var(--gap) * 1.6);margin-top:var(--top)}
.wm-d i{width:var(--d);height:var(--d);background:var(--brand-deep);display:block;border-radius:50%}

/* ── 상단바 ── */
.top{display:flex;align-items:center;gap:12px;height:52px;flex:none}
.top .brand{text-decoration:none;display:inline-flex}
.top .sub{margin-left:auto;font:500 var(--t13)/1 var(--kr);color:var(--stone)}
.owner-top{gap:10px}
.status-badge{display:inline-flex;align-items:center;gap:6px;font:600 var(--t12)/1 var(--kr);color:var(--alert);
  background:var(--alert-soft);padding:7px 10px;border-radius:999px}
.status-badge i{width:6px;height:6px;background:var(--alert);border-radius:50%;flex:none;animation:blink 1.6s var(--ease) infinite}
.top-temp{margin-left:auto;font:500 var(--t12)/1 var(--kr);color:var(--stone);display:inline-flex;align-items:center;gap:5px}
.top-temp b{font:600 var(--t14)/1 var(--lat);color:var(--forest)}

/* ── 스텝(등록) ── */
.steps-bar{display:flex;gap:4px;margin-top:8px;flex:none}
.steps-bar i{height:3px;flex:1;background:var(--sand2);border-radius:2px;transition:background 400ms var(--ease)}
.steps-bar i.on{background:var(--ink)}

/* ── 화면 뼈대 ── */
.screen{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:24px}
h1{font:700 var(--t26)/1.35 var(--kr);letter-spacing:-.025em;margin:28px 0 0;text-wrap:pretty}
h2{font-family:var(--kr);font-weight:700;letter-spacing:-.02em}
.lead{font-size:var(--t16);color:var(--stone);line-height:1.65;margin:10px 0 0;text-wrap:pretty}
.lead b{color:var(--ink);font-weight:600}
.sec-label{font:600 var(--t14)/1 var(--kr);color:var(--stone);margin:32px 0 12px;letter-spacing:-.01em}
.hint{font-size:var(--t13);color:var(--stone);line-height:1.6;margin:12px 0 0}
.hint a{color:var(--stone)}
.hint b{color:var(--ink);font-weight:600}
.foot-note{font-size:var(--t12);color:var(--stone2);text-align:center;margin:0;line-height:1.6}
.foot-note a{color:var(--stone)}
.field-err{font-size:var(--t13);color:var(--terra);margin:10px 0 0;font-weight:500}
.link-terra{color:var(--terra);font-weight:600;text-decoration:none}
.cta-area{position:sticky;bottom:0;margin-top:auto;padding:20px 0 calc(16px + env(safe-area-inset-bottom));
  display:grid;gap:10px;background:linear-gradient(to top,var(--cream) 78%,rgba(234,251,246,0));z-index:5}

/* ── 버튼 ── */
.btn-primary,.btn-ghost,.btn-danger{width:100%;min-height:56px;border-radius:var(--r);cursor:pointer;border:0;
  font:700 var(--t17)/1 var(--kr);letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;
  text-align:center;text-decoration:none;padding:14px 18px;transition:background 180ms var(--ease),transform 120ms var(--ease),opacity 180ms}
.btn-primary{background:var(--terra);color:var(--on-brand)}
.btn-primary:hover{background:var(--terra-deep)}
.btn-primary:active{transform:scale(.985)}
.btn-primary:disabled{background:var(--sand2);color:var(--stone2);cursor:not-allowed;transform:none}
.btn-ghost{background:var(--sand);color:var(--ink);min-height:52px;font-size:var(--t16)}
.btn-ghost:hover{background:var(--sand2)}
.btn-ghost:active{transform:scale(.985)}
.btn-danger{background:transparent;color:var(--alert);min-height:48px;font-size:var(--t15);font-weight:600}
.btn-small{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;background:var(--sand);
  font:600 var(--t13)/1 var(--kr);color:var(--ink);text-decoration:none;margin-top:10px;border:0;cursor:pointer}
.btn-small:hover{background:var(--sand2)}
.d{width:8px;height:8px;flex:none;display:inline-block;border-radius:50%;background:var(--stone2)}
.d.gold{background:var(--gold)}.d.terra{background:var(--alert)}

/* ── 입력 ── */
.big-input{width:100%;height:64px;margin-top:28px;background:var(--sand);border:0;border-radius:var(--r);
  padding:0 18px;font:600 28px/1 var(--lat);letter-spacing:.02em;color:var(--ink);caret-color:var(--terra);
  transition:box-shadow 160ms var(--ease)}
.big-input::placeholder{color:var(--stone2);font-weight:400}
.big-input:focus{outline:none;box-shadow:0 0 0 2px var(--ink) inset}
.big-input.bad{box-shadow:0 0 0 2px var(--terra) inset}
.lbl{display:block;font:600 var(--t13)/1 var(--kr);color:var(--stone);margin:22px 0 0}
.lbl .opt{font-weight:400;color:var(--stone2);margin-left:4px}
input[type=text],input[type=tel],textarea{width:100%;background:var(--sand);border:0;border-radius:12px;
  padding:0 16px;height:54px;font:400 var(--t16)/1.4 var(--kr);color:var(--ink);margin-top:8px;transition:box-shadow 160ms var(--ease)}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px var(--ink) inset}
input::placeholder,textarea::placeholder{color:var(--stone2)}
textarea{min-height:104px;height:auto;padding:14px 16px;resize:none;margin-top:12px;line-height:1.6}
.count{text-align:right;font:500 var(--t12)/1 var(--lat);color:var(--stone2);margin-top:8px}

/* ── 인증 6칸 ── */
.otp-wrap{position:relative;margin-top:28px}
.otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.otp-cells i{height:60px;background:var(--sand);border-radius:12px;display:grid;place-items:center;
  font:600 26px/1 var(--lat);font-style:normal;color:var(--ink);transition:box-shadow 200ms var(--ease)}
.otp-cells i.filled{box-shadow:0 0 0 2px var(--ink) inset}
.otp-cells i.cur{box-shadow:0 0 0 2px var(--terra) inset}
.otp-cells.bad i{box-shadow:0 0 0 2px var(--terra) inset}
.otp-wrap input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;margin:0;padding:0;font-size:26px}
.otp-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font:500 var(--t13)/1 var(--kr);color:var(--stone)}
.otp-meta b{color:var(--ink);font-weight:600}
.otp-meta a{color:var(--terra);text-decoration:none;font-weight:600}
.otp-meta a.off{color:var(--stone2);pointer-events:none}

/* ── 안내 줄 ── */
.note-box{margin-top:20px;padding:14px 16px;background:var(--sand);border-radius:var(--r);
  display:flex;gap:12px;align-items:center;font-size:var(--t14);color:var(--ink);line-height:1.6}
.note-box b{font-weight:600}
.note-av{width:32px;height:32px;flex:none}

/* ── 동의 ── */
.agree{display:grid;gap:12px;margin-top:24px}
.ck{display:flex;gap:10px;align-items:flex-start;font-size:var(--t14);line-height:1.6;cursor:pointer;color:var(--ink)}
.ck input{appearance:none;width:22px;height:22px;margin:1px 0 0;flex:none;border-radius:50%;background:var(--sand2);
  display:grid;place-items:center;cursor:pointer;transition:background 160ms var(--ease)}
.ck input::after{content:"";width:10px;height:6px;border:2px solid var(--on-brand);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.ck input:checked{background:var(--terra)}
.ck b{color:var(--alert);font-weight:600}
.ck a{color:var(--stone)}

/* ── 방문자 첫 화면 ── */
.greet{display:flex;align-items:flex-start;gap:12px;margin-top:20px}
.greet-av{width:52px;height:62px;flex:none}
.greet-bubble{background:var(--sand);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:var(--t14);line-height:1.6;color:var(--ink)}
.greet-bubble b{font-weight:700}
.temp-chip{margin:16px 0 0;font-size:var(--t13);color:var(--stone);display:inline-flex;align-items:center;gap:8px;
  background:var(--forest-soft);padding:8px 12px 8px 10px;border-radius:999px}
.temp-chip b{font:600 var(--t16)/1 var(--lat);color:var(--forest)}
.temp-chip span{font-size:var(--t12)}
.intents{display:grid;gap:8px}
.intent{min-height:72px;border:0;border-radius:var(--r-lg);padding:0 18px;background:var(--sand);width:100%;
  display:flex;align-items:center;gap:12px;font:700 var(--t17)/1.3 var(--kr);letter-spacing:-.02em;
  color:var(--ink);cursor:pointer;text-align:left;transition:background 180ms var(--ease),transform 120ms var(--ease)}
.intent::after{content:"";margin-left:auto;width:8px;height:8px;border:2px solid var(--stone2);border-left:0;border-bottom:0;transform:rotate(45deg);flex:none}
.intent .d{width:10px;height:10px}
.intent:active{transform:scale(.985)}
.intent.is-terra{color:var(--alert)}
.intent.on{background:var(--ink);color:var(--cream)}
.intent.on::after{border-color:rgba(234,251,246,.5)}
.intent:disabled{opacity:.55;cursor:default}
.intent-sub{font:400 var(--t12)/1.3 var(--kr);color:var(--stone);letter-spacing:0;display:block;margin-top:3px}
.intent.on .intent-sub{color:rgba(234,251,246,.62)}
.privacy-line{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t12);color:var(--stone2)}
.privacy-line i{width:4px;height:4px;border-radius:50%;background:var(--line)}

/* ── 사진 첨부 ── */
.photo-pick{display:flex;align-items:center;gap:12px;min-height:60px;border:1.5px dashed var(--line);border-radius:var(--r);
  padding:0 16px;margin-top:20px;cursor:pointer;background:transparent;font:600 var(--t14)/1.4 var(--kr)}
.photo-pick em{display:block;font-style:normal;font-weight:400;font-size:var(--t12);color:var(--stone);margin-top:2px}
.photo-prev{margin-top:20px;position:relative}
.photo-prev img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:var(--r)}
.photo-prev button{position:absolute;right:10px;top:10px;background:rgba(4,48,42,.85);color:var(--cream);border:0;border-radius:999px;padding:8px 12px;font:600 var(--t12)/1 var(--kr);cursor:pointer}
.req-photo{display:block;margin-top:4px}
.req-photo img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}
.w-photo{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin-top:10px}

/* ── 완료 화면 공통 ── */
.sent-art{width:140px;height:166px;margin:24px auto 0}
.sent-desc{font-size:var(--t16);color:var(--stone);text-align:center;margin:10px 0 0;text-wrap:pretty;line-height:1.65}
.sent-desc b{color:var(--ink);font-weight:600}

/* ── 손님 기다리는 화면 ── */
.wait{gap:0}
.w-hero{margin-top:12px;background:var(--night);color:var(--onDark);border-radius:var(--r-lg);padding:26px 22px 20px;
  text-align:center;position:relative;overflow:hidden;transition:background .6s var(--ease)}
.w-art{width:104px;height:124px;margin:0 auto;position:relative}
.w-art svg{position:relative;z-index:1;width:100%;height:100%;display:block}
.w-art.ring::before,.w-art.ring::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1.5px solid rgba(227,169,59,.55);animation:w-ring 2.4s var(--ease) infinite}
.w-art.ring::after{animation-delay:1.2s}
@keyframes w-ring{0%{transform:scale(.72);opacity:0}25%{opacity:1}100%{transform:scale(1.4);opacity:0}}
.w-lab{font:600 var(--t12)/1 var(--kr);color:var(--gold);margin:18px 0 0;letter-spacing:0}
.w-title{font:700 clamp(22px,6.4vw,26px)/1.3 var(--kr);letter-spacing:-.03em;margin:8px 0 0;text-wrap:balance}
.w-sub{font-size:var(--t14);color:var(--onDarkDim);margin:8px 0 0;line-height:1.6;text-wrap:pretty}
.w-temp{margin:14px 0 0;font:500 var(--t12)/1 var(--kr);color:var(--onDarkDim);display:inline-flex;align-items:center;gap:6px;
  background:rgba(234,251,246,.08);padding:7px 11px;border-radius:999px}
.w-temp b{font:600 var(--t13)/1 var(--lat);color:var(--gold)}
.w-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:22px 0 0}
.w-steps span{display:block;font:500 var(--t11)/1 var(--kr);color:var(--onDarkDim);padding-top:8px;
  border-top:3px solid rgba(234,251,246,.16);transition:border-color .5s var(--ease),color .5s var(--ease)}
.w-steps span.on{border-top-color:var(--gold);color:var(--onDark)}
.w-steps span.now{animation:blink 1.6s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
.w-hero.eta,.w-hero.replied,.w-hero.done{background:var(--forest)}
/* 나쁜 상태라고 카드를 통째로 빨갛게 칠하지 않는다. 기다리다 지친 사람에게
   화면까지 소리치는 꼴이 된다. 바탕은 그대로 두고 라벨만 빨간 칩으로 알린다. */
.w-hero.no,.w-hero.missed,.w-hero.late{background:var(--night)}
.w-hero.no .w-lab,.w-hero.missed .w-lab,.w-hero.late .w-lab{color:#fff;background:var(--alert);
  display:inline-block;padding:5px 11px;border-radius:999px;font-weight:700}
.w-hero.no .w-steps span.on,.w-hero.missed .w-steps span.on,.w-hero.late .w-steps span.on{border-top-color:var(--alert)}
.w-hero.stopped{background:var(--ink)}

.w-eta{margin-top:8px;background:var(--sand);border-radius:var(--r-lg);padding:20px}
.w-eta-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.w-eta-lab{font:600 var(--t13)/1 var(--kr);color:var(--stone)}
.w-eta-top b{font:600 48px/1 var(--lat);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.w-bar{height:6px;background:var(--sand2);border-radius:999px;margin-top:14px;overflow:hidden}
.w-bar i{display:block;height:100%;background:var(--forest);border-radius:999px;transition:width 1s linear}
.w-eta-sub{margin:10px 0 0;font-size:var(--t13);color:var(--stone);line-height:1.5}
.w-eta.over .w-eta-top b{color:var(--alert)}
.w-eta.over .w-bar i{background:var(--alert)}

.w-feed{display:grid;gap:10px;margin-top:20px}
.w-msg{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:end}
.w-av{width:28px;height:28px}.w-av svg{width:100%;height:100%;display:block}
.w-bub{background:var(--sand);border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:var(--t14);line-height:1.55;color:var(--ink);min-width:0}
.w-msg.reply .w-bub{background:var(--gold);font-weight:700;font-size:var(--t16);letter-spacing:-.01em;color:var(--ink)}
.w-msg.reply.old .w-bub{background:var(--gold-soft);color:var(--stone);font-weight:500;font-size:var(--t14)}
.w-msg time{font:500 var(--t11)/1 var(--lat);color:var(--stone2);padding-bottom:12px;font-variant-numeric:tabular-nums}
.w-msg.me{grid-template-columns:1fr auto}
.w-msg.me .w-av{display:none}
.w-msg.me .w-bub{background:var(--ink);color:var(--cream);justify-self:end;border-radius:16px 16px 4px 16px}
.w-msg.owner .w-bub{background:var(--cream);box-shadow:0 0 0 1px var(--line) inset}
.w-msg.owner .w-bub::before{content:"차주";display:block;font:600 var(--t11)/1 var(--kr);color:var(--terra);margin-bottom:5px}
.w-act{margin-top:16px;display:grid;gap:8px}
.w-chat,.chat-row{display:flex;gap:8px;margin-top:16px}
.w-chat input,.chat-row input{flex:1;min-width:0;height:50px;margin:0;border-radius:999px;padding:0 18px;font-size:var(--t15)}
.w-chat button,.chat-row button{flex:none;height:50px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:var(--cream);font:700 var(--t14)/1 var(--kr);cursor:pointer}
.w-chat button:disabled,.chat-row button:disabled{opacity:.5;cursor:default}

.w-rate{margin-top:20px;padding:18px;background:var(--sand);border-radius:var(--r-lg);text-align:center}
.w-rate-q{margin:0;font:700 var(--t16)/1.4 var(--kr);letter-spacing:-.02em}
.w-rate-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.w-rate-btns button{min-height:64px;border:0;border-radius:12px;background:var(--cream);font:600 var(--t13)/1.3 var(--kr);color:var(--ink);cursor:pointer;padding:6px 4px;display:grid;gap:4px;place-items:center}
.w-rate-btns button i{font-style:normal;font-size:22px;line-height:1}
.w-rate-btns button:hover{background:var(--surf)}
.w-rate-btns button:disabled{opacity:.5}
.w-rate .hint{margin-top:10px;font-size:var(--t12)}
.w-rate.done{font-size:var(--t14);color:var(--stone);background:var(--forest-soft)}
.w-rate.done b{color:var(--forest)}

.w-promo{display:flex;align-items:center;gap:12px;margin-top:20px;padding:16px;background:var(--cream);
  box-shadow:0 0 0 1px var(--line) inset;border-radius:var(--r-lg);text-decoration:none;color:var(--ink)}
.w-promo-art{width:40px;height:48px;flex:none}.w-promo-art svg{width:100%;height:100%;display:block}
.w-promo-txt{flex:1;min-width:0}
.w-promo-tag{display:inline-block;font:600 var(--t11)/1 var(--kr);color:var(--stone);background:var(--sand);padding:4px 7px;border-radius:6px;margin-bottom:6px}
.w-promo-txt b{display:block;font:700 var(--t15)/1.35 var(--kr);letter-spacing:-.02em}
.w-promo-txt em{font-style:normal;display:block;font-size:var(--t12);color:var(--stone);line-height:1.5;margin-top:3px}
.w-promo-cta{flex:none;font:700 var(--t12)/1 var(--kr);background:var(--ink);color:var(--cream);padding:10px 12px;border-radius:999px;white-space:nowrap}

/* ── 차주 답장 ── */
.thread{display:flex;flex-direction:column;gap:12px;margin-top:20px;flex:1;padding-bottom:16px}
.time-chip{align-self:center;font:500 var(--t12)/1 var(--kr);color:var(--stone2);background:var(--sand);padding:6px 10px;border-radius:999px}
.msg{display:flex;gap:8px;align-items:flex-end}
.msg.me{justify-content:flex-end}
.msg-av{width:28px;height:28px;flex:none}
.msg-bubble{background:var(--sand);border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:var(--t14);line-height:1.55;max-width:290px;color:var(--ink)}
.msg.me .msg-bubble{background:var(--ink);color:var(--cream);border-radius:16px 16px 4px 16px}
.msg.me .msg-bubble.gold{background:var(--gold);color:var(--ink);font-weight:700;font-size:var(--t15)}
.req-card{background:var(--cream);box-shadow:0 0 0 1px var(--line) inset;border-radius:16px 16px 16px 4px;padding:16px;max-width:300px;display:flex;flex-direction:column;gap:10px}
.req-t{font:700 var(--t17)/1.3 var(--kr);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.req-tags{display:flex;gap:6px;flex-wrap:wrap}
.req-tags em{font:500 var(--t12)/1 var(--kr);font-style:normal;color:var(--stone);background:var(--sand);padding:5px 8px;border-radius:6px}
.req-q{font-size:var(--t14);line-height:1.6;color:var(--ink)}
.reply-dock{position:sticky;bottom:0;background:var(--cream);padding:12px 0 max(12px,env(safe-area-inset-bottom));
  display:grid;gap:10px;margin-top:auto}
.reply-dock::before{content:"";position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:0;height:1px;background:var(--line)}
.reply-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.reply-btn{min-height:56px;border-radius:12px;background:var(--sand);border:0;
  font:600 var(--t14)/1.35 var(--kr);letter-spacing:-.01em;color:var(--ink);cursor:pointer;padding:8px 10px;transition:background 180ms var(--ease),transform 120ms var(--ease)}
.reply-btn:hover{background:var(--sand2)}
.reply-btn:active{transform:scale(.98)}
.reply-btn.gold{background:var(--gold);font-weight:700}
.reply-btn.terra{color:var(--alert);background:var(--alert-soft)}
.reply-btn:disabled{opacity:.5;cursor:default}
.chat-row{margin:0}
.reply-dock .foot-note{font-size:var(--t12)}

/* ── 내 스티커 ── */
.my-head{display:flex;gap:14px;align-items:flex-start;margin-top:20px}
.my-art{width:56px;height:66px;flex:none}
.my-info{min-width:0;flex:1}
.my-title{font:700 var(--t24)/1.3 var(--kr);letter-spacing:-.025em;margin:2px 0 0}
.my-meta{font-size:var(--t13);color:var(--stone);margin:6px 0 0}
.panel{background:var(--sand);border-radius:var(--r-lg);padding:20px;margin-top:16px}
.panel .sec-label{margin-top:0}
.panel .hint{margin-top:8px}
.panel input[type=text],.panel input[type=tel]{background:var(--cream)}
.panel .btn-ghost{background:var(--cream)}
.panel .btn-primary{margin-top:12px}
.list{list-style:none;padding:0;margin:0}
.list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--sand2);font-size:var(--t14);text-decoration:none;color:inherit}
.list li:last-child{border-bottom:0}
.list li .l-t{font:700 var(--t15)/1.3 var(--kr);letter-spacing:-.01em;display:flex;gap:8px;align-items:center}
.list li .l-m{font-size:var(--t12);color:var(--stone);grid-column:1}
.list li .l-s{grid-row:1/3;grid-column:2;font:600 var(--t13)/1.3 var(--kr);color:var(--forest);text-align:right;display:flex;align-items:center;gap:8px}
.list li .l-s.wait{color:var(--stone2)}
.list li .l-s::after{content:"";width:7px;height:7px;border:1.5px solid var(--stone2);border-left:0;border-bottom:0;transform:rotate(45deg);flex:none}
.danger-zone{margin-top:36px;padding-top:16px;border-top:1px solid var(--sand2);text-align:center}
.danger-zone .hint{margin-top:4px;font-size:var(--t12)}
.vcard-row{margin-top:14px;padding:14px 16px;background:var(--sand);border-radius:var(--r);font-size:var(--t13);color:var(--stone);line-height:1.6}
.vcard-row b{color:var(--ink);font-weight:600}
.vcard-row .btn-small{background:var(--cream);margin-top:8px}

/* 온도 */
.temp-panel{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center}
.temp-big{font:600 46px/1 var(--lat);letter-spacing:-.03em;color:var(--forest);grid-row:1/3}
.temp-panel .sec-label{margin:0;color:var(--ink)}
.temp-panel .temp-desc{font-size:var(--t13);color:var(--stone);line-height:1.5;margin:0}
.temp-log{list-style:none;margin:14px 0 0;padding:0;grid-column:1/-1;display:grid;font-size:var(--t13)}
.temp-log li{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--sand2)}
.temp-log li span:first-child{font:500 var(--t12)/1 var(--lat);color:var(--stone2)}
.temp-log li span:nth-child(2){flex:1;color:var(--ink)}
.temp-log b{font-family:var(--lat);font-weight:600}
.temp-log b.up{color:var(--forest)}.temp-log b.down{color:var(--alert)}
.temp-panel > .hint{grid-column:1/-1;margin-top:8px}

/* 결제 */
.pay{display:grid;gap:14px}
.payhead{display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 var(--t17)/1 var(--kr);letter-spacing:-.02em}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.plan{font:inherit;text-align:left;background:var(--cream);border:0;border-radius:var(--r);
  padding:14px;cursor:pointer;display:grid;gap:4px;transition:box-shadow 160ms var(--ease);position:relative}
.plan.on{box-shadow:0 0 0 2px var(--ink) inset}
.plan .pl-top{display:flex;align-items:center;gap:6px;font:600 var(--t13)/1 var(--kr);color:var(--stone)}
.plan .pl-top b{color:var(--ink);font-weight:700;font-size:var(--t14)}
.plan .pl-top em{font-style:normal;font-size:var(--t11);color:var(--on-brand);background:var(--terra);padding:3px 6px;border-radius:5px;font-weight:600}
.plan .pl-amt{font:600 var(--t24)/1.1 var(--lat);letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:var(--ink);margin-top:4px}
.plan .pl-amt s{font-size:var(--t13);font-weight:400;color:var(--stone2)}
.plan .pl-sub{font:500 var(--t12)/1.4 var(--kr);color:var(--forest)}
.paybtn{display:grid;gap:8px}
.badge{display:inline-block;font:600 var(--t12)/1 var(--kr);color:var(--stone);background:var(--cream);padding:6px 9px;border-radius:7px}
.badge.ok{background:var(--dk);color:var(--on-dk)}
.pay-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;
  border:0;border-radius:var(--r);text-decoration:none;text-align:left;cursor:pointer;font-family:var(--kr)}
.pay-btn i{width:30px;height:30px;border-radius:8px;flex:none;background:rgba(0,0,0,.12)}
.pay-btn span{min-width:0}
.pay-btn b{display:block;font:700 var(--t15)/1.3 var(--kr);letter-spacing:-.02em}
.pay-btn em{display:block;font-style:normal;font-size:var(--t12);line-height:1.4;margin-top:2px;opacity:.75}
.pay-btn.toss{background:#0064FF;color:#fff}
.pay-btn.toss i{background:#fff;-webkit-mask:center/60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h7a5 5 0 010 10H8v4H4V5zm4 3v4h3a2 2 0 000-4H8z' fill='%23000'/%3E%3C/svg%3E");mask:center/60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h7a5 5 0 010 10H8v4H4V5zm4 3v4h3a2 2 0 000-4H8z' fill='%23000'/%3E%3C/svg%3E")}
.pay-btn.kakao{background:#FEE500;color:#191600}
.pay-btn.naver{background:#03C75A;color:#fff}
.pay-btn.bank{background:var(--cream);color:var(--ink)}
.pay-btn.bank.copied{color:var(--forest)}
.pay-btn.none{background:transparent;color:var(--stone);border:1.5px dashed var(--line);cursor:default}
.pay .btn-ghost{background:var(--cream)}

/* 같이 쓰는 분 */
.d2-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.d2-row b{font:600 var(--t16)/1 var(--lat)}
.d2-row .btn-ghost{width:auto;min-height:40px;padding:0 14px;font-size:var(--t13);margin-left:auto}

/* 선물 유도 */
.gift-cta{display:flex;align-items:center;gap:14px;margin-top:16px;padding:18px;background:var(--gold);border-radius:var(--r-lg);
  text-decoration:none;color:var(--ink)}
.gift-art{width:42px;height:50px;flex:none}
.gift-txt{flex:1;min-width:0}
.gift-txt b{display:block;font:700 var(--t16)/1.35 var(--kr);letter-spacing:-.02em}
.gift-txt em{font-style:normal;font-size:var(--t12);color:var(--gold-tx);line-height:1.5;display:block;margin-top:3px}
.gift-arrow{width:9px;height:9px;border:2px solid var(--ink);border-left:0;border-bottom:0;transform:rotate(45deg);flex:none;margin-right:4px}

/* ── 런칭 차수 ── */
.launch{margin:16px 0 0;padding:16px 18px;background:var(--gold-soft);border-radius:var(--r-lg)}
.launch-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.launch-tag{font:600 var(--t13)/1.3 var(--kr);color:var(--stone)}
.launch-left{font:700 var(--t17)/1 var(--kr);letter-spacing:-.02em;color:var(--terra)}
.launch-bar{height:6px;background:rgba(4,48,42,.08);border-radius:999px;margin-top:12px;overflow:hidden}
.launch-bar i{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .6s var(--ease)}
.launch-sub{margin:10px 0 0;font-size:var(--t12);line-height:1.55;color:var(--stone)}
.launch-sub b{color:var(--ink)}
.launch-social{color:var(--forest);font-weight:600}
.launch.done{background:var(--sand);display:flex;gap:10px;align-items:baseline}
.launch.done b{font:700 var(--t15)/1 var(--kr)}
.launch.done span{font-size:var(--t12);color:var(--stone)}
.launch.locked{background:var(--forest-soft)}
.launch.locked .launch-left{color:var(--forest)}
.launch.locked .launch-sub s{color:var(--stone2)}

/* ── 할인 창 카운트다운 ── */
/* 창이 열려 있을 땐 금색, 5분 남으면 붉게, 닫히면 조용한 모래색으로 내려앉는다. */
.offer{margin:16px 0 0;padding:16px 18px;background:var(--gold-soft);border-radius:var(--r-lg)}
.offer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.offer-tag{font:600 var(--t13)/1.3 var(--kr);color:var(--stone)}
.offer-big{font:700 var(--t17)/1 var(--kr);letter-spacing:-.02em;color:var(--terra)}
.offer-count{margin:12px 0 0;font:600 var(--t13)/1 var(--kr);color:var(--stone);
  display:flex;align-items:baseline;gap:8px}
.offer-count b{font:700 var(--t22,22px)/1 var(--lat);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.offer-sub{margin:10px 0 0;font-size:var(--t12);line-height:1.55;color:var(--stone)}
.offer-sub b{color:var(--ink)}
.offer.hot{background:var(--alert-soft,var(--alert-soft))}
.offer.hot .offer-count b{color:var(--alert)}
.offer.late{background:var(--sand)}
.offer.late .offer-big{color:var(--stone)}
.offer.done{background:var(--forest-soft)}
.offer.done .offer-big{color:var(--forest)}
.offer-mini{margin:8px 0 0;font-size:var(--t12);color:var(--stone)}
.offer-mini b{color:var(--terra);font-family:var(--lat);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .offer.hot .offer-count b{animation:offer-pulse 1s steps(2,end) infinite}
}
@keyframes offer-pulse{50%{opacity:.55}}

/* ── 주문 ── */
.qtys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.qty{border:0;border-radius:var(--r);background:var(--sand);padding:16px 12px;cursor:pointer;
  display:grid;gap:4px;text-align:left;color:var(--ink);transition:box-shadow 160ms var(--ease)}
.qty.on{box-shadow:0 0 0 2px var(--ink) inset}
.qty .q-n{font:600 var(--t13)/1 var(--kr);color:var(--stone)}
.qty .q-p{font:600 var(--t17)/1 var(--lat);letter-spacing:-.02em;margin-top:4px}
.qty .q-s{font-size:var(--t11);color:var(--stone);line-height:1.4}
.qty-more{margin-top:8px}
.qty-more .lbl{margin-top:8px}
.qty-more input{height:48px}
.total-box{margin-top:24px;background:var(--sand);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:10px}
.total-box div{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t14);color:var(--stone)}
.total-box div b{color:var(--ink);font-weight:600;font-family:var(--lat)}
.total-box .sum{border-top:1px solid var(--sand2);padding-top:12px;color:var(--ink);font-weight:600}
.total-box .sum b{font:600 var(--t26)/1 var(--lat);letter-spacing:-.02em;color:var(--ink)}
.gift-ck{margin-top:24px;padding:16px;background:var(--gold-soft);border-radius:var(--r)}
.gift-ck .gift-b{color:var(--ink);display:block;margin-bottom:2px;font-weight:700}
#o-giftmsg{margin-top:10px}

/* ── 모달(바텀시트) ── */
.modal{position:fixed;inset:0;background:rgba(4,48,42,.5);display:grid;align-items:end;z-index:20}
.modal-box{background:var(--cream);border-radius:24px 24px 0 0;padding:28px 24px calc(24px + env(safe-area-inset-bottom));max-width:480px;width:100%;margin-inline:auto;
  animation:sheet 320ms var(--ease)}
@keyframes sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.modal-box h2{margin:0 0 8px;font-size:var(--t20)}
.modal-box p{margin:0 0 20px;font-size:var(--t14);color:var(--stone);line-height:1.6}

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--cream);
  padding:12px 18px;border-radius:999px;font:600 var(--t14)/1 var(--kr);z-index:30;animation:sheet 240ms var(--ease);white-space:nowrap}

/* ── 문서 ── */
.doc{padding-bottom:40px}
.doc h1{margin:24px 0 4px}
.doc h2{font-size:var(--t17);margin:32px 0 10px}
.doc p{font-size:var(--t15);line-height:1.75;color:var(--ink);margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:18px}
.doc li{font-size:var(--t15);line-height:1.75;color:var(--ink);margin-bottom:8px}
.doc b{color:var(--ink);font-weight:600}
.doc-t{border-collapse:collapse;width:100%;font-size:var(--t13);margin-bottom:16px}
.doc-t th,.doc-t td{border-bottom:1px solid var(--sand2);padding:10px 8px 10px 0;text-align:left;vertical-align:top;line-height:1.6;white-space:normal}
.doc-t th{font-weight:600;color:var(--stone)}
.calc{background:var(--sand);border-radius:var(--r);padding:16px;font:700 var(--t16)/1.5 var(--kr);color:var(--ink)}

/* ── 푸터 ── */
.biz{margin-top:auto;padding:28px 0 calc(28px + env(safe-area-inset-bottom));color:var(--stone2);
  font:400 var(--t12)/1.8 var(--kr);flex:none}
.policy{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px;font-weight:500}
.policy a{color:var(--stone);text-decoration:none}

/* ── 관리자 ── */
.admin .wrap{max-width:1280px;display:block;padding-bottom:40px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:24px}
.tile{background:var(--sand);border-radius:var(--r);padding:16px}
.tile b{display:block;font:600 var(--t26)/1 var(--lat);letter-spacing:-.02em}
.tile span{font:500 var(--t12)/1.4 var(--kr);color:var(--stone);margin-top:6px;display:block}
.card{background:var(--sand);border-radius:var(--r-lg);padding:20px;margin-bottom:12px}
.card h2{font-size:var(--t17);margin:0 0 14px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row input,.row select{margin-top:0;width:auto;background:var(--cream)}
select{background:var(--cream);color:var(--ink);border:0;border-radius:10px;padding:12px;font:400 var(--t14) var(--kr)}
.btn{display:inline-block;padding:11px 16px;border-radius:10px;border:0;background:var(--cream);
  font:600 var(--t14)/1 var(--kr);color:var(--ink);cursor:pointer;text-decoration:none}
.btn.primary{background:var(--ink);color:var(--cream)}
.btn.small{padding:7px 10px;font-size:var(--t12)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--t13)}
th,td{border-bottom:1px solid var(--sand2);padding:10px 12px 10px 0;text-align:left;vertical-align:top;white-space:nowrap}
th{font-weight:600;color:var(--stone)}
td.pre{white-space:pre-wrap;min-width:280px}

/* ── 전화 거는 중: 딱따구리가 부리로 두드린다 ── */
/* 머리만 목을 축으로 까딱. 두 번 쪼고 쉬는 리듬(실제 딱따구리처럼). */
.w-art.tap svg .dd-head{transform-origin:118px 140px;animation:dd-tap 1.5s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes dd-tap{
  0%{transform:rotate(0deg)}
  8%{transform:rotate(15deg)}
  16%{transform:rotate(0deg)}
  24%{transform:rotate(15deg)}
  32%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
/* 쫄 때마다 부리 끝에서 나무 부스러기처럼 튀는 점 */
.w-art.tap{position:relative}
.w-art.tap::before,.w-art.tap::after{content:"";position:absolute;left:78%;top:44%;width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:0;animation:dd-chip 1.5s ease-out infinite}
.w-art.tap::after{animation-delay:.12s;width:4px;height:4px}
@keyframes dd-chip{
  0%,10%{opacity:0;transform:translate(0,0) scale(.6)}
  14%{opacity:.9;transform:translate(6px,-4px) scale(1)}
  30%{opacity:0;transform:translate(16px,6px) scale(.5)}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .w-art.tap svg .dd-head{animation:none}
  .w-art.tap::before,.w-art.tap::after{animation:none}
}

/* ── 등록 완료: 앞으로 전화가 오는 번호 ── */
.from-card{margin-top:26px;padding:22px;background:var(--night);color:var(--onDark);border-radius:var(--r);text-align:center}
.from-lab{margin:0;font:500 var(--t12)/1 var(--lat);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.from-tel{margin:10px 0 0;font:700 clamp(26px,7.4vw,32px)/1 var(--lat);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.from-sub{margin:12px 0 18px;font-size:var(--t14);line-height:1.7;color:var(--onDarkDim)}
.from-sub b{color:var(--onDark)}
.from-card .btn-primary{min-height:54px;display:flex;align-items:center;justify-content:center;text-decoration:none}

/* -- 카드·간편결제 화면 -- */
.pay-head2{text-align:center;padding:26px 0 22px;border-bottom:1px solid var(--line)}
.pay-item{margin:0;font-size:var(--t14);color:var(--stone)}
.pay-item .mono{color:var(--stone2)}
.pay-amt{margin:10px 0 0;font:700 clamp(32px,9vw,44px)/1 var(--kr);letter-spacing:-.04em}
#pm,#ag{margin-top:6px}
/* 아래 결제 버튼이 떠 있으므로 약관이 그 뒤로 가려지지 않게 자리를 비워둔다 */
#ag{padding-bottom:18px}
.pay-btn.card{background:var(--ink);color:var(--onDark);border-color:var(--ink)}
.pay-btn.card em{color:var(--onDarkDim)}
.pay-btn.card i{background:var(--gold)}

/* ══════════════════════════════════════════════════════════════
   3D 레이어 (v6.1) — 토스처럼 면이 떠 있다.
   바탕은 한 톤 어둡게, 면은 밝게 띄우고 층 그림자 + 윗면 하이라이트.
   버튼은 볼록, 아이콘은 구슬. 카드 안에 카드는 여전히 없다(안쪽은 바탕색 톤).
   ══════════════════════════════════════════════════════════════ */
:root{
  --page:var(--page); --surface:var(--white); --inset:var(--surf);
  /* 그림자도 청록을 섞는다. 갈색 그림자를 민트 위에 얹으면 때가 탄 것처럼 보인다 */
  --sh-1:0 1px 1px rgba(4,48,42,.04),0 2px 6px rgba(4,48,42,.05),0 16px 32px -20px rgba(4,48,42,.26);
  --sh-2:0 1px 1px rgba(4,48,42,.05),0 6px 14px -4px rgba(4,48,42,.10),0 28px 48px -24px rgba(4,48,42,.32);
  --hi:inset 0 1px 0 rgba(255,255,255,.85);
}
html,body,.wrap{background:var(--page)}
@media (min-width:768px){body:not(.admin){background:var(--line)}body:not(.admin) .wrap{box-shadow:0 0 0 1px rgba(4,48,42,.05),0 40px 80px -40px rgba(4,48,42,.32)}}
.cta-area{background:linear-gradient(to top,var(--page) 78%,rgba(239,248,245,0))}
.reply-dock{background:var(--page)}
.modal-box{background:var(--surface);box-shadow:0 -20px 60px -20px rgba(4,48,42,.38)}

/* 떠 있는 면 */
.panel,.intent,.note-box,.greet-bubble,.w-eta,.w-rate,.w-promo,.launch,.total-box,.gift-ck,.vcard-row,.req-card,.qty,.plan,
.time-chip,.temp-chip,.status-badge,.w-bub,.msg-bubble,.card,.tile{
  background:var(--surface);box-shadow:var(--sh-1),var(--hi);border-radius:var(--r-lg)}
.list{background:var(--surface);box-shadow:var(--sh-1),var(--hi);border-radius:var(--r-lg);padding:4px 16px}
.list li{border-bottom:1px solid var(--inset)}
.list li:last-child{border-bottom:0}
.w-bub,.msg-bubble,.greet-bubble{border-radius:18px 18px 18px 6px}
.msg.me .msg-bubble,.w-msg.me .w-bub{border-radius:18px 18px 6px 18px;background:linear-gradient(180deg,var(--dk),var(--dk2));color:var(--cream);
  box-shadow:0 8px 18px -8px rgba(3,46,40,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.msg.me .msg-bubble.gold,.w-msg.reply .w-bub{background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));color:var(--ink);
  box-shadow:0 10px 20px -10px rgba(227,169,59,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.w-msg.reply.old .w-bub{background:var(--gold-soft);box-shadow:var(--sh-1);color:var(--stone)}
.w-msg.owner .w-bub{box-shadow:var(--sh-1),var(--hi),inset 0 0 0 1px var(--line)}
.time-chip,.temp-chip,.status-badge{border-radius:999px}
.temp-chip{background:linear-gradient(180deg,var(--white),var(--surf));color:var(--forest)}
.status-badge{background:linear-gradient(180deg,var(--alert-soft),var(--alert-soft))}
.launch{background:linear-gradient(180deg,var(--gold-soft),var(--gold-soft))}
.launch.locked{background:linear-gradient(180deg,var(--page),var(--surf))}
.launch.done{background:var(--surface)}
.offer{background:linear-gradient(180deg,var(--gold-soft),var(--gold-soft))}
.offer.hot{background:linear-gradient(180deg,var(--alert-soft),var(--alert-soft))}
.offer.late{background:var(--surface)}
.offer.done{background:linear-gradient(180deg,var(--page),var(--surf))}
.gift-ck{background:linear-gradient(180deg,var(--gold-soft),var(--gold-soft))}
.gift-cta{background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));box-shadow:0 18px 30px -16px rgba(227,169,59,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.w-rate.done{background:linear-gradient(180deg,var(--surf),var(--surf))}

/* 면 안의 요소는 바탕 톤 */
.panel input[type=text],.panel input[type=tel],.pay-btn.bank,.w-rate-btns button,.plan,.qty,.reply-btn,.paybtn .btn,.panel .btn-ghost,.pay .btn-ghost,.d2-row .btn-ghost{background:var(--inset)}
.plan,.qty{box-shadow:var(--hi);border-radius:var(--r)}
.plan.on,.qty.on{background:var(--surface);box-shadow:0 0 0 2px var(--ink) inset,var(--sh-1)}
.w-rate-btns button{box-shadow:var(--hi),0 1px 2px rgba(4,48,42,.05)}
.w-rate-btns button:hover{background:var(--surf)}
.pay-btn.bank{box-shadow:var(--hi),0 1px 2px rgba(4,48,42,.05)}

/* 입력: 파인 면 */
input[type=text],input[type=tel],textarea,.big-input,.w-chat input,.chat-row input{
  background:var(--surface);box-shadow:inset 0 2px 4px rgba(4,48,42,.06),inset 0 0 0 1px rgba(4,48,42,.06)}
input:focus,textarea:focus,.big-input:focus,.w-chat input:focus,.chat-row input:focus{box-shadow:inset 0 2px 4px rgba(4,48,42,.04),inset 0 0 0 2px var(--ink)}
.otp-cells i{background:var(--surface);box-shadow:inset 0 2px 4px rgba(4,48,42,.06),inset 0 0 0 1px rgba(4,48,42,.06)}
.otp-cells i.filled{box-shadow:inset 0 0 0 2px var(--ink)}
.otp-cells i.cur{box-shadow:inset 0 0 0 2px var(--terra)}
.photo-pick{background:var(--surface);border-color:rgba(4,48,42,.18)}

/* 볼록 버튼 */
.btn-primary{background:linear-gradient(180deg,var(--mint-lt) 0%,var(--mint) 55%,var(--mint-dk) 100%);
  box-shadow:0 14px 24px -12px rgba(0,180,150,.55),0 2px 4px rgba(4,48,42,.08),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.14)}
.btn-primary:hover{background:linear-gradient(180deg,var(--mint-lt),var(--mint-lt) 55%,var(--mint-dk))}
.btn-primary:active{transform:translateY(1px) scale(.99);box-shadow:0 6px 12px -8px rgba(0,180,150,.5),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.14)}
.btn-primary:disabled{background:var(--sand2);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{background:var(--surface);box-shadow:var(--sh-1),var(--hi),inset 0 -2px 0 rgba(4,48,42,.05)}
.btn-ghost:hover{background:var(--surf)}
.btn-ghost:active{transform:translateY(1px);box-shadow:var(--hi)}
.reply-btn{box-shadow:var(--hi),inset 0 -2px 0 rgba(4,48,42,.05),0 1px 2px rgba(4,48,42,.05)}
.reply-btn:hover{background:var(--surface)}
.reply-btn.gold{background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));box-shadow:0 10px 18px -10px rgba(227,169,59,.75),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.08)}
.reply-btn.terra{background:linear-gradient(180deg,var(--alert-soft),var(--alert-soft));box-shadow:var(--hi),inset 0 -2px 0 rgba(215,69,46,.12)}
.w-chat button,.chat-row button,.w-promo-cta{background:linear-gradient(180deg,var(--dk),var(--dk2));box-shadow:0 8px 16px -8px rgba(3,46,40,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-small{background:var(--surface);box-shadow:var(--sh-1),var(--hi)}
.pay-btn.toss{background:linear-gradient(180deg,#2F7FFF,#0064FF);box-shadow:0 12px 22px -12px rgba(0,100,255,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.pay-btn.kakao{background:linear-gradient(180deg,#FFEC4D,#FEE500);box-shadow:0 12px 22px -12px rgba(254,229,0,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.pay-btn.naver{background:linear-gradient(180deg,#1ED36F,#03C75A);box-shadow:0 12px 22px -12px rgba(3,199,90,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.ck input{background:linear-gradient(180deg,var(--surf),var(--surf));box-shadow:inset 0 1px 2px rgba(4,48,42,.12)}
.ck input:checked{background:linear-gradient(180deg,var(--mint-lt),var(--mint-dk));box-shadow:0 4px 8px -4px rgba(0,180,150,.6),inset 0 1px 0 rgba(255,255,255,.3)}

/* 구슬 아이콘 */
.d{width:12px;height:12px;background:radial-gradient(circle at 35% 30%,var(--white) 0,var(--line) 40%,var(--stone2) 100%);box-shadow:0 3px 6px -2px rgba(4,48,42,.45)}
.d.gold{background:radial-gradient(circle at 35% 30%,var(--gold-soft) 0,var(--gold) 45%,var(--gold-tx) 100%);box-shadow:0 3px 6px -2px rgba(168,115,27,.7)}
.d.terra{background:radial-gradient(circle at 35% 30%,var(--alert-hi) 0,var(--alert) 45%,var(--alert-dk) 100%);box-shadow:0 3px 6px -2px rgba(125,32,16,.7)}
.intent .d{width:34px;height:34px;flex:none}
.intent.on .d{box-shadow:0 4px 10px -2px rgba(0,0,0,.6)}
.intent::after{border-color:rgba(4,48,42,.28)}
.intent:hover{transform:translateY(-1px);box-shadow:var(--sh-2),var(--hi)}
.intent.on{background:linear-gradient(180deg,var(--dk),var(--dk2));box-shadow:0 18px 30px -16px rgba(3,46,40,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.list li .d{width:14px;height:14px}

/* 상태 히어로: 깊이 + 안쪽 빛 + 똑이가 떠 있다 */
.w-hero{box-shadow:0 30px 60px -28px rgba(26,27,30,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.w-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 12%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%)}
.w-hero > *{position:relative}
.w-art svg{filter:drop-shadow(0 18px 18px rgba(0,0,0,.45));animation:float 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.w-temp{background:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.w-steps span.on{text-shadow:0 1px 0 rgba(0,0,0,.4)}
.w-eta-top b{text-shadow:0 1px 0 var(--white)}
.w-bar{box-shadow:inset 0 1px 2px rgba(4,48,42,.12)}
.w-bar i{background:linear-gradient(180deg,var(--mint-dk),var(--dk));box-shadow:0 1px 0 rgba(255,255,255,.2) inset}
.w-eta.over .w-bar i{background:linear-gradient(180deg,var(--alert-lt),var(--alert-dk))}
.launch-bar{box-shadow:inset 0 1px 2px rgba(4,48,42,.12)}
.launch-bar i{background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk))}
.steps-bar i{background:var(--sand2);box-shadow:inset 0 1px 1px rgba(4,48,42,.08)}
.steps-bar i.on{background:linear-gradient(180deg,var(--dk),var(--dk2))}

/* 똑이·큰 숫자에 살짝 그림자 */
.greet-av svg,.my-art svg,.sent-art svg,.gift-art svg{filter:drop-shadow(0 10px 10px rgba(4,48,42,.22))}
.sent-art svg{animation:float 4.5s ease-in-out infinite}
.temp-big{text-shadow:0 1px 0 var(--white),0 6px 14px rgba(5,71,62,.25)}
.total-box .sum b{text-shadow:0 1px 0 var(--white)}
.wm-d i{box-shadow:0 1px 2px rgba(193,70,47,.5)}

/* ══════════════════════════════════════════════════════════════
   폰트·요소 손질 (v6.2)
   - 서체: Pretendard Variable 셀프호스트(동적 서브셋: 화면에 실제 쓰인 글자 묶음만 받는다). 숫자도 Pretendard(tabular).
   - 아이콘: 이모지·CSS 꺾쇠 대신 24px 선 아이콘(mask). 꺾쇠·시계·방패·온도계.
   - 타이포: 자간 -1~-3%, 제목 굵게, 보조 글자 한 단계 진하게(대비 AA).
   ══════════════════════════════════════════════════════════════ */
:root{
  --kr:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
  --lat:"Pretendard Variable",Pretendard,"Jost",var(--kr);
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --i-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --i-temp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4a2 2 0 014 0v9.5a4 4 0 11-4 0z'/%3E%3Cpath d='M12 9v6'/%3E%3C/svg%3E");
  --i-cam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  --i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z'/%3E%3C/svg%3E");
}
body{letter-spacing:-.01em;font-weight:400}
h1{font-weight:700;letter-spacing:-.03em;line-height:1.32}
h2,.w-title,.my-title,.req-t,.payhead,.w-rate-q,.gift-txt b,.w-promo-txt b,.list li .l-t,.intent{letter-spacing:-.025em}
.lead{font-weight:400;color:var(--stone);letter-spacing:-.01em}
.sec-label{font:700 var(--t15)/1 var(--kr);color:var(--ink);letter-spacing:-.02em;opacity:.82}
.hint{color:var(--stone)}
.foot-note{color:var(--stone2)}
.mono,.num,.w-eta-top b,.temp-big,.plan .pl-amt,.total-box .sum b,.qty .q-p,.temp-chip b,.top-temp b,.w-temp b,.d2-row b,.otp-cells i,.big-input,.tile b,.launch-left{
  font-family:var(--lat);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.w-eta-top b{font-weight:800;letter-spacing:-.04em}
.temp-big{font-weight:800;letter-spacing:-.04em}
.plan .pl-amt,.total-box .sum b{font-weight:800}
.big-input{font-weight:700;letter-spacing:0}
.otp-cells i{font-weight:700}
.w-msg time,.list li .l-m .mono,.temp-log li span:first-child,.my-meta .mono{font-weight:500;letter-spacing:0}
.btn-primary,.btn-ghost,.reply-btn,.w-rate-btns button,.pay-btn b{letter-spacing:-.02em}
.btn-primary{font-weight:700}
.intent{font-weight:700;font-size:var(--t17)}
.intent-sub{font-weight:400;letter-spacing:-.01em}
.w-title{font-weight:800}
.w-lab{font-weight:600;letter-spacing:0}
.w-steps span{font-weight:600;letter-spacing:0;font-size:var(--t12)}

/* 아이콘: 꺾쇠 */
.ico,.intent::after,.list li .l-s::after,.gift-arrow{
  border:0;transform:none;width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat}
.intent::after{opacity:.32;margin-left:auto}
.intent.on::after{opacity:.6}
.list li .l-s::after{width:16px;height:16px;opacity:.4}
.gift-arrow{width:18px;height:18px;margin-right:0;opacity:.7}
/* 아이콘: 뜻 */
.temp-chip::before,.top-temp::before{content:"";width:16px;height:16px;flex:none;background:var(--forest);-webkit-mask:var(--i-temp) center/contain no-repeat;mask:var(--i-temp) center/contain no-repeat}
.temp-chip{padding-left:12px;gap:6px}
.temp-chip b{margin-right:2px}
.w-temp::before{content:"";width:13px;height:13px;flex:none;background:currentColor;opacity:.8;-webkit-mask:var(--i-temp) center/contain no-repeat;mask:var(--i-temp) center/contain no-repeat}
.w-eta-lab{display:inline-flex;align-items:center;gap:6px}
.w-eta-lab::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--i-clock) center/contain no-repeat;mask:var(--i-clock) center/contain no-repeat}
.w-eta.over .w-eta-lab{color:var(--alert)}
.privacy-line::before{content:"";width:14px;height:14px;background:var(--forest);opacity:.8;-webkit-mask:var(--i-shield) center/contain no-repeat;mask:var(--i-shield) center/contain no-repeat}
.privacy-line{color:var(--stone)}
.status-badge i{width:8px;height:8px;background:radial-gradient(circle at 35% 30%,var(--alert-hi) 0,var(--alert) 50%,var(--alert-dk) 100%)}
/* 사진 첨부: 이모지 대신 카메라 아이콘 */
.photo-pick{border:0;background:var(--surface);box-shadow:var(--sh-1),var(--hi);border-radius:var(--r);padding:0 16px 0 14px;gap:12px}
.photo-pick::before{content:"";width:36px;height:36px;flex:none;border-radius:12px;background:var(--inset);
  -webkit-mask:none;mask:none;position:relative}
.photo-pick #photo-lab{position:relative}
.photo-pick #photo-lab::before{content:"";position:absolute;left:-40px;top:50%;width:20px;height:20px;transform:translate(0,-50%);background:var(--ink);opacity:.75;
  -webkit-mask:var(--i-cam) center/contain no-repeat;mask:var(--i-cam) center/contain no-repeat}
/* 구슬은 조금 작게, 안쪽 링 */
.intent .d{width:30px;height:30px;box-shadow:0 6px 10px -4px rgba(4,48,42,.45),inset 0 -2px 3px rgba(0,0,0,.18)}
.d.gold{box-shadow:0 6px 10px -4px rgba(168,115,27,.7),inset 0 -2px 3px rgba(120,80,10,.25)}
.d.terra{box-shadow:0 6px 10px -4px rgba(125,42,27,.7),inset 0 -2px 3px rgba(90,20,10,.3)}
/* 체크박스: 조금 크게 */
.ck input{width:24px;height:24px}
.ck input::after{width:11px;height:6px}
/* 문서 페이지 타이포 */
.doc h2{font-weight:700;letter-spacing:-.02em}
.doc p,.doc li{letter-spacing:-.01em;color:var(--ink)}

/* -- 그로블로 나가기 전 안내 -- */
.pay-note{margin-top:12px;padding:12px 14px;background:var(--sand);border-radius:12px;line-height:1.6;text-align:left}
.pay-note .mono{font-weight:700;color:var(--ink);letter-spacing:.04em}

/* -- 관리자 결제 대조 -- */
#find-phone{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:500 var(--t15)/1 var(--lat)}
#find-out{margin-top:14px}

/* 등록 필수 표시 */
.lbl .req{font:700 var(--t11)/1 var(--kr);color:var(--alert);background:var(--alert-soft);padding:3px 6px;border-radius:5px;margin-left:6px;letter-spacing:0}

/* 내 스티커 — 차량 정보 */
#car-panel .lbl{display:block;margin-top:12px}
#car-panel input{width:100%;box-sizing:border-box;margin-top:6px;padding:13px 14px;border:1px solid var(--line);
  border-radius:12px;font:500 var(--t16)/1.2 var(--kr);background:var(--white);color:var(--ink)}
#car-panel .btn-ghost{margin-top:14px}
.warn-panel{border:1.5px solid var(--terra)}
.warn-line{margin:0 0 4px;padding:12px 14px;background:var(--alert-soft);border-radius:12px;
  font:500 var(--t13)/1.6 var(--kr);color:var(--alert-dk)}
.warn-line b{font-weight:800}

/* ── 똑이 3D 렌더 (2026-09-18, 옛 인라인 SVG 대체) ──
   그림마다 가로세로 비가 다르다. 칸 높이에 맞추고 가로는 알아서 가게 둔다. */
img.ddoki{display:block;height:100%;width:auto;max-width:100%;margin-inline:auto;object-fit:contain;
  user-select:none;-webkit-user-drag:none}
.ddoki-wrap{position:relative;display:block;height:100%;width:100%}
.ddoki-wrap img.ddoki{position:relative;z-index:1}
/* 말풍선은 그림 위에 얹는다. "10분!" 처럼 글자가 바뀐다. */
.ddoki-say{position:absolute;left:0;top:0;z-index:2;background:var(--cream);color:var(--ink);
  font:700 var(--t14)/1 var(--kr);letter-spacing:-.03em;padding:8px 10px;border-radius:12px 12px 12px 3px;
  box-shadow:0 8px 14px -8px rgba(0,0,0,.55);white-space:nowrap}
/* 예전에 svg 로만 걸어둔 그림자·부유 효과를 img 에도 준다 */
.w-art img.ddoki{filter:drop-shadow(0 16px 16px rgba(0,0,0,.45));animation:float 4.5s ease-in-out infinite}
.w-art .ddoki-wrap{animation:float 4.5s ease-in-out infinite}
.w-art .ddoki-wrap img.ddoki{animation:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.45))}
.greet-av img.ddoki,.my-art img.ddoki,.sent-art img.ddoki,.gift-art img.ddoki,.w-promo-art img.ddoki{
  filter:drop-shadow(0 8px 8px rgba(4,48,42,.22))}
.sent-art img.ddoki{animation:float 4.5s ease-in-out infinite}
/* 작은 칸(로고·대화 아바타·안내)은 효과 없이 또렷하게 */
.logo-sym img.ddoki,.w-av img.ddoki,.msg-av img.ddoki,.note-av img.ddoki{filter:none;animation:none}
.logo-sym img.ddoki{transform:scale(1.18)}

/* ── 카카오로 시작 ── */
.k-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:56px;
  background:#FEE500;color:#191600;border-radius:var(--r);text-decoration:none;
  font:700 var(--t17)/1 var(--kr);letter-spacing:-.02em;margin-bottom:4px}
.k-btn:active{filter:brightness(.96)}
.k-ico{width:22px;height:22px;flex:none}
.k-ico svg{width:100%;height:100%;display:block}
.k-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:var(--stone2)}
.k-or::before,.k-or::after{content:"";flex:1;height:1px;background:var(--line)}
.k-or span{font:500 var(--t12)/1 var(--kr)}
.k-tel{text-align:center;margin:18px 0 6px;font:700 clamp(28px,8vw,36px)/1 var(--lat);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── 등록 첫 화면: 카카오 / 문자 두 갈래 ── */
.start-pick{display:grid;gap:10px}
.k-btn.alt{background:var(--surface,var(--white));color:var(--ink);border:1.5px solid var(--line);
  font:700 var(--t17)/1 var(--kr);cursor:pointer;width:100%;min-height:56px}
.k-btn.alt .k-ico{color:var(--stone)}
.k-btn.alt:active{background:var(--inset,var(--surf))}

/* 무료 기간 안내 — 가격표 맨 위 */
.pay-trial{margin:0 0 12px;padding:11px 13px;background:var(--inset,var(--surf));border-radius:12px;
  font:500 var(--t13)/1.6 var(--kr);color:var(--stone)}
.pay-trial b{color:var(--ink);font-weight:700}
.pay-trial.over{background:var(--gold-soft);color:var(--gold-tx)}
.pay-trial.over b{color:var(--gold-tx)}

/* 번호 남기기 — 늘 펼쳐 두면 대기 화면이 또 길어진다. 접어두고 누를 때만 연다 */
.w-ask{margin-top:10px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1),var(--hi);overflow:hidden}
.w-ask > summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:10px;
  font:600 var(--t14)/1.4 var(--kr);color:var(--ink)}
.w-ask > summary::-webkit-details-marker{display:none}
.w-ask > summary::after{content:"";margin-left:auto;width:7px;height:7px;flex:none;
  border:2px solid var(--stone2);border-left:0;border-top:0;transform:rotate(45deg);transition:transform .2s}
.w-ask[open] > summary::after{transform:rotate(-135deg)}
.w-ask-body{padding:0 18px 18px}

/* 스티커 예약 대기 화면의 '예정 이용료' 상자. 돈을 받는 화면이 아니라는 게 먼저 읽혀야 한다 */
.rsv-price{margin:18px 0 6px;text-align:center}
.rsv-p-lab{margin:0;font:600 var(--t12)/1 var(--kr);color:var(--stone)}
.rsv-p-big{margin:8px 0 10px;font:700 var(--t26)/1.2 var(--kr);letter-spacing:-.03em;color:var(--ink)}
.rsv-p-big small{display:block;margin-top:4px;font:500 var(--t13)/1 var(--kr);color:var(--stone)}