/* 앱 화면 스타일 — 디자이너 시안 v0.1 (design/GUIDE.md, design/src/screens.css) 기준.
   색·간격·타입은 tokens.css 변수만 사용 */

html { background: var(--bg); -webkit-text-size-adjust: 100%; }
:root { --app-w: 480px; --bar-w: var(--app-w); }
body { min-height: 100vh; min-height: 100dvh; }
#app { position: relative; max-width: var(--app-w); min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--bg); }
/* 데스크톱: 가운데 420px 앱 기둥 + 양옆 1px 선 + 부드러운 그림자, 바깥 배경 #F3EEE6 */
@media (min-width: 600px) {
  :root { --app-w: 420px; --bar-w: calc(var(--app-w) - 2px); }
  html, body { background: #F3EEE6; }
  #app { border-left: 1px solid #EFE9E0; border-right: 1px solid #EFE9E0; box-shadow: 0 0 40px rgba(27,35,64,.06), 0 12px 32px rgba(27,35,64,.05); }
}
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
img { max-width: 100%; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 앱바 / 진행률 (screens.css) ---------- */
.appbar { position: sticky; top: 0; z-index: 10; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; padding-top: env(safe-area-inset-top); background: var(--bg); }
.appbar__title { font: 650 16px/1 var(--font); }
.appbar__spacer { width: 44px; }
.appbar__step { font: 600 13px/1 var(--font); color: var(--ink-3); padding: 0 12px; min-height: 44px; }
.appbar--start { padding: 0 var(--gutter); }
.appbar__right { display: flex; align-items: center; gap: 4px; }
.logo-inline { height: 22px; width: auto; display: block; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 12px; color: var(--ink); }
.icon-btn:active { background: var(--bg-sunken); }
.text-btn { border: 0; background: none; min-height: 44px; padding: 0 8px; font: 600 13.5px/1 var(--font); color: var(--ink-2); border-radius: var(--r-sm); }
.text-btn:active { background: var(--bg-sunken); }
.progress-wrap { padding-top: 2px; }

.content { padding: 0 var(--gutter); }
.q-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px/1 var(--font); color: var(--primary-strong); margin: 26px 0 10px; }
.q-title { margin: 0; }
.q-desc { margin: 8px 0 0; font: var(--t-body-s); color: var(--ink-2); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack--tight { gap: 8px; }

/* ---------- 하단 고정 바 (tokens .bottom-bar 를 화면 고정으로) ---------- */
.bottom-bar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; max-width: var(--bar-w); margin: 0 auto; padding: 22px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
.bottom-bar > * + * { margin-top: 8px; }
.bottom-bar--row { display: flex; gap: 8px; align-items: stretch; background: var(--bg); padding-top: 12px; border-top: 1px solid var(--line); }
.bottom-bar--row > * + * { margin-top: 0; }
.bottom-bar--row .cta { flex: 1; }
.bottom-bar--row .cta-line { flex: 0 0 auto; min-width: 108px; }
.bottom-bar--row .cta-line + .cta-line { flex: 1; }
.bottom-bar--solid { background: var(--bg); padding-top: 14px; border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(27,35,64,.04); }
.cta-line { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; padding: 0 16px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: #fff; font: 700 15px/1 var(--font); color: var(--ink); }
.cta-line:active { transform: scale(.98); background: var(--bg-sunken); }
.cta--ghost { width: 100%; }
.legal { text-align: center; font: var(--t-caption); color: var(--ink-3); margin: 2px 0 0; }

/* ---------- 고지 ---------- */
.disclaimer { margin: 32px 0 0; padding: 16px 0 8px; border-top: 1px solid var(--line); font: var(--t-caption); color: var(--ink-3); }
.disclaimer p { margin: 0 0 6px; }
.disclaimer b { color: var(--ink-2); }
.ref-hint { margin: 10px 0 0; font: var(--t-caption); color: var(--ink-3); }
.ref-hint b { color: var(--ink); }
.ref-hint--center { text-align: center; }

/* ---------- 01 시작 ---------- */
.content--start { padding: 0; }
.hero { position: relative; height: 262px; margin: 8px var(--gutter) 0; }
.hero__paper { position: absolute; left: 14px; top: 40px; width: 190px; height: 220px; background: #fff; border: 1px solid var(--line); border-radius: 16px; transform: rotate(-6deg); box-shadow: var(--sh-2); padding: 18px 16px; }
.hero__paper i { display: block; height: 8px; border-radius: 4px; background: var(--bg-sunken); margin-bottom: 12px; }
.hero__paper b { display: block; margin-top: 62px; font: 700 13px/1 var(--font); color: var(--ink-3); margin-bottom: 16px; }
.hero__card { position: absolute; right: 8px; top: 0; width: 212px; background: #fff; border-radius: 22px; box-shadow: var(--sh-3); padding: 18px 16px 16px; border: 1px solid var(--line); }
.hero__card svg { display: block; margin: 0 auto; }
.hero__card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font: 700 13px/1 var(--font); }
.hero__verdict { text-align: center; margin-top: -6px; font: 750 20px/1.2 var(--font); color: var(--ok-text); display: flex; justify-content: center; align-items: center; gap: 6px; }
.hero__verdict span { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.hero__mini { font: var(--t-caption); color: var(--ink-3); text-align: center; margin-top: 4px; }
.hero__rows { margin-top: 12px; border-top: 1px dashed var(--line-strong); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.hero__rows div { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--font); color: var(--ink-2); }
.hero__sticker { position: absolute; left: 0; top: 4px; max-width: 132px; z-index: 3; background: var(--ink); color: #fff; border-radius: 14px; padding: 10px 14px; font: 650 13.5px/1.35 var(--font); box-shadow: var(--sh-2); transform: rotate(-2deg); }
.hero__sticker em { font-style: normal; color: #FFC9D2; }
.start-title { margin: 22px var(--gutter) 0; font: 750 30px/1.36 var(--font); letter-spacing: -0.035em; }
.start-title .hl { color: var(--primary-strong); }
.lead { margin: 12px var(--gutter) 0; font: 500 16px/1.55 var(--font); color: var(--ink-2); }
.trust { display: flex; gap: 8px; margin: 18px var(--gutter) 0; flex-wrap: wrap; }
.trust span { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font: 650 13px/1 var(--font); color: var(--ink-2); }
.trust span svg { color: var(--primary-strong); }
.resume-note { margin: 14px var(--gutter) 0; font: var(--t-caption); color: var(--ink-3); }
.bottom-bar--start .cta--ghost { margin-top: 4px; }
.bottom-bar--start { background: linear-gradient(180deg, rgba(251,248,243,0) 0, var(--bg) 22px); }
.bottom-bar--start > * + * { margin-top: 4px; }

/* ---------- 선택 화면 ---------- */
.choice-stack { margin-top: 24px; }
.card-btn__desc { display: block; }
.card-btn--compact { min-height: 64px; margin-top: 18px; padding: 12px 16px; }
.card-btn--compact .card-btn__icon { width: 36px; height: 36px; border-radius: 12px; }
.card-btn--compact .card-btn__title { font-size: 15.5px; }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.tile { min-height: 64px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); text-align: center; transition: transform var(--dur) var(--ease); }
.tile:active { transform: scale(.98); background: var(--bg-sunken); box-shadow: none; }
.tile__label { font: 700 16px/1.25 var(--font); }
.tile__sub { font: 500 12px/1.3 var(--font); color: var(--ink-3); }
.tile--muted { background: var(--bg-sunken); box-shadow: none; }
.tile.is-selected { border: 2px solid var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(210,56,82,.08); }
.tile.is-selected .tile__label { color: var(--primary-strong); }
.note { display: flex; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); font: 500 13.5px/1.5 var(--font); }
.note svg { flex: none; margin-top: 1px; }
.note--info { background: var(--info-soft); color: #28427F; }
.note--info svg { color: var(--info); }
.note--ok { background: var(--ok-soft); color: var(--ok-text); margin-top: 0; }
.note small { font: var(--t-caption); }

/* ---------- 키패드 화면 (02) ---------- */
.answered { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.answered .chip--sm { background: #fff; color: var(--ink-2); gap: 4px; min-height: 28px; }
.answered .chip--sm svg { color: var(--ink-3); }
.numwrap { margin-top: 22px; text-align: center; }
.numbig { display: inline-flex; align-items: baseline; gap: 6px; font: var(--t-num-xl); letter-spacing: -0.03em; }
.numbig__v.is-empty { color: var(--ink-disabled); }
.numbig .caret { width: 2.5px; height: 40px; background: var(--primary); align-self: center; border-radius: 2px; margin-left: -4px; animation: blink 1.1s steps(1) infinite; }
.numbig small { font: 700 24px/1 var(--font); color: var(--ink-2); }
@keyframes blink { 50% { opacity: 0; } }
.numline { width: 180px; height: 2px; background: var(--ink); margin: 10px auto 0; border-radius: 2px; }
.numhint { margin: 10px 0 0; font: var(--t-caption); color: var(--ink-3); }
.numhint--state b { color: var(--primary-strong); }
.numwrap .ref-hint { margin-top: 8px; }
.quick { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.quick .chip { height: 36px; padding: 0 13px; font-size: 14px; }
.quick .chip.is-selected { border-color: var(--ink); background: var(--ink); color: #fff; }
.pad { background: var(--bg-sunken); padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); }
.pad .cta { margin-bottom: 10px; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.key { height: 52px; border: 0; background: none; border-radius: 12px; font: 600 24px/1 var(--font); color: var(--ink); display: grid; place-items: center; }
.key:active, .key.is-pressed { background: #E9E2D6; }
.content--keypad .disclaimer { margin-top: 40px; }

/* ---------- 04 추가금 ---------- */
.addon-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.check-row { align-items: center; padding: 0; overflow: hidden; }
.check-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 6px 12px 16px; border: 0; background: none; text-align: left; }
label.check-row { padding: 12px 16px; cursor: pointer; }
label.check-row:has(input:focus-visible) { outline: 3px solid var(--info); outline-offset: 2px; }
.check-row__hint { display: block; }
.check-row__hint .tag { height: 18px; padding: 0 5px; font-size: 10.5px; vertical-align: 1px; }
.amt { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; margin-right: 12px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-sm); background: var(--bg-sunken); font: 750 16px/1 var(--font); color: var(--ink); }
.amt small { font: 600 13px/1 var(--font); color: var(--ink-2); margin-right: 2px; }
.amt svg { color: var(--ink-3); }
.amt--empty small { color: var(--primary-strong); }
.add-row { display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: none; font: 650 15px/1 var(--font); color: var(--ink-2); }
.sum { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; }
.sum__l { font: 600 14px/1.3 var(--font); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.sum__r { font: 750 22px/1 var(--font); }
.sum__r small { font: 650 15px/1 var(--font); }
.name-field { display: flex; flex-direction: column; gap: 6px; font: 600 13px/1 var(--font); color: var(--ink-2); }
.name-field input { height: 44px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; font: 500 16px/1 var(--font); color: var(--ink); }

/* ---------- 견적서 업로드(준비 중) ---------- */
.upload { margin-top: 24px; padding: 24px 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); text-align: center; }
.upload__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--bg-sunken); color: var(--ink-2); }
.upload__title { margin: 12px 0 0; font: 700 17px/1.4 var(--font); display: flex; justify-content: center; align-items: center; gap: 6px; }
.upload__text { margin: 6px 0 16px; font: var(--t-body-s); color: var(--ink-2); }
.upload .cta-line { width: 100%; height: 48px; color: var(--ink-2); }
.notes { margin: 16px 0 0; padding: 0 0 0 18px; font: var(--t-body-s); color: var(--ink-2); }
.notes li + li { margin-top: 6px; }

/* ---------- 05 리포트 ---------- */
.meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.meta > span:first-child { font: 600 13px/1.3 var(--font); color: var(--ink-3); }
.meta__tags { display: flex; gap: 4px; flex: none; }
.report-title { margin: 12px 0 0; font: 750 26px/1.38 var(--font); letter-spacing: -0.035em; }
.tone-ok { color: var(--ok-text); } .tone-warn { color: var(--warn-text); } .tone-bad { color: var(--bad-text); } .tone-none { color: var(--ink-3); }
.gcard { margin-top: 18px; padding: 16px 16px 18px; text-align: center; }
.gcard svg { display: block; margin: 4px auto 0; max-width: 100%; height: auto; overflow: visible; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--bg-sunken); border-radius: 12px; }
.seg__btn { flex: 1; height: 36px; border: 0; background: none; border-radius: 9px; font: 650 14px/1 var(--font); color: var(--ink-2); }
.seg__btn.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.gv { display: inline-flex; align-items: center; gap: 8px; margin-top: -2px; padding: 8px 14px 8px 12px; border-radius: var(--r-pill); font: 750 19px/1 var(--font); }
.gv--ok { background: var(--ok-soft); color: var(--ok-text); } .gv--ok svg { color: var(--ok); }
.gv--warn { background: var(--warn-soft); color: var(--warn-text); } .gv--warn svg { color: var(--warn); }
.gv--bad { background: var(--bad-soft); color: var(--bad-text); } .gv--bad svg { color: var(--bad); }
.gv--none { background: var(--bg-sunken); color: var(--ink-3); }
.gsub { margin: 8px 0 0; font: 600 14.5px/1.45 var(--font); color: var(--ink-2); }
.gsub b { color: var(--ink); }
.gcap { margin: 4px 0 0; font: var(--t-caption); color: var(--ink-3); }
.gnote { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg-sunken); font: var(--t-caption); color: var(--ink-2); }
.legend { display: flex; justify-content: center; gap: 14px; margin-top: 12px; font: 600 12.5px/1 var(--font); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .gpanel:not([hidden]) .gauge-needle { transform-box: view-box; animation: needle 480ms var(--ease); }
}
@keyframes needle { from { transform: rotate(-40deg); } to { transform: none; } }
.total { margin-top: 10px; }
.total__grid { display: grid; grid-template-columns: 1fr 1fr; }
.total__grid > div { padding: 16px; }
.total__grid > div + div { border-left: 1px solid var(--line); }
.total .k { font: 600 13px/1.3 var(--font); color: var(--ink-3); }
.total .v { margin-top: 8px; font: 750 22px/1 var(--font); }
.total .v small { font: 650 14px/1 var(--font); }
.total .d { margin-top: 6px; font: 700 13px/1.35 var(--font); }
.total .d--muted { color: var(--ink-3); font-weight: 600; }
.total .is-over { color: var(--bad-text); } .total .is-under { color: var(--ok-text); }
.total__bar { padding: 0 16px 14px; }
.stackbar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; }
.stackbar__seg--0 { background: var(--primary); } .stackbar__seg--1 { background: var(--ink); } .stackbar__seg--2 { background: #8C93A8; } .stackbar__seg--3 { background: var(--warn); }
.stacklegend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; padding: 0; list-style: none; font: var(--t-caption); color: var(--ink-2); }
.stacklegend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.sec { margin: 32px 0 10px; display: flex; justify-content: space-between; align-items: center; font: 700 18px/1.3 var(--font); }
.sec small { font: 600 12.5px/1 var(--font); color: var(--ink-3); }
.blist { padding: 4px 16px; }
.brow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; }
.brow + .brow { border-top: 1px solid var(--line); }
.brow__l { min-width: 0; }
.brow__n { font: 650 16px/1.3 var(--font); }
.brow__s { font: var(--t-caption); color: var(--ink-3); margin-top: 3px; }
.brow__s .tag { height: 18px; padding: 0 5px; font-size: 10.5px; vertical-align: 1px; }
.brow__r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.brow__a { font: 750 16px/1 var(--font); white-space: nowrap; }
.brow__a small { font: 600 13px/1 var(--font); color: var(--ink-2); margin-left: 1px; }
.brow--sub { padding-left: 14px; }
.brow--sub .brow__n { font-size: 14.5px; color: var(--ink-2); }
.brow--sub .brow__a { font-size: 14.5px; }
.brow--strong .brow__n { font-weight: 750; }
.status--none { background: var(--bg-sunken); color: var(--ink-3); }
.status--none::before { border-radius: 1px; width: 8px; height: 2.5px; }
.status-ref { height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12.5px; }
.risk { padding: 16px; background: var(--bad-soft); border: 1px solid #F6CACA; border-radius: var(--r-lg); }
.risk__h { display: flex; align-items: center; gap: 6px; font: 750 15.5px/1.3 var(--font); color: var(--bad-text); }
.risk__h svg { color: var(--bad); }
.risk ul, .softlist ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.risk li { font: 500 14.5px/1.5 var(--font); color: var(--ink); padding-left: 14px; position: relative; }
.risk li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--bad-text); }
.softlist { margin-top: 10px; padding: 16px; }
.softlist__h { display: flex; align-items: center; gap: 6px; font: 700 15px/1.3 var(--font); }
.softlist li { display: flex; flex-direction: column; gap: 2px; font: 500 13.5px/1.5 var(--font); color: var(--ink-2); }
.softlist li b { color: var(--ink); font-weight: 650; }
.softlist li .tag { align-self: flex-start; }
.tips { padding: 16px; }
.tip { display: flex; gap: 10px; font: 500 14.5px/1.5 var(--font); color: var(--ink-2); }
.tip + .tip { margin-top: 12px; }
.tip > b { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--primary-soft); color: var(--primary-strong); display: grid; place-items: center; font: 750 12px/1 var(--font); margin-top: 1px; }
.tip strong { display: block; color: var(--ink); font-weight: 700; }
.src { margin-top: 18px; line-height: 1.6; }

/* ---------- 06 비교 ---------- */
.compare-title { margin: 6px 0 0; font: 750 24px/1.4 var(--font); letter-spacing: -0.035em; }
.seg--compare { margin-top: 14px; }
.banner { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.banner p { margin: 0; font: 600 15px/1.45 var(--font); }
.banner p b { color: #FFC9D2; }
.banner .caveat { margin-top: 6px; font: 500 12.5px/1.45 var(--font); color: #D9DCE6; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; position: relative; }
.vcard { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 14px 14px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); min-width: 0; }
.vcard.is-best { border: 2px solid var(--primary); padding: 15.5px 13.5px 13.5px; box-shadow: 0 0 0 4px rgba(210,56,82,.08); }
.vcard__badge { position: absolute; top: -11px; left: 12px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--primary); color: #fff; font: 750 12px/22px var(--font); }
.vcard__id { display: flex; align-items: center; gap: 8px; }
.vcard__id b { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 750 14px/1 var(--font); flex: none; }
.vcard.is-best .vcard__id b { background: var(--primary); }
.vcard__id span { font: 650 14.5px/1.3 var(--font); }
.vcard__id small { display: block; font: 500 12px/1.3 var(--font); color: var(--ink-3); }
.vfield { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin-top: 12px; padding: 4px 0; border: 0; background: none; text-align: left; border-radius: var(--r-xs); min-height: 44px; }
.vfield .k, .vcard .tot .k { font: 600 12.5px/1 var(--font); color: var(--ink-3); }
.vfield .v { font: 750 20px/1 var(--font); }
.vfield .v small { font: 650 13px/1 var(--font); }
.vfield--sm { margin-top: 8px; gap: 4px; }
.vfield--sm .v { font-size: 17px; }
.vfield .muted { font: 650 15px/1 var(--font); color: var(--primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.vplus { margin-top: 2px; padding: 4px 0; min-height: 32px; border: 0; background: none; text-align: left; font: 600 13px/1.3 var(--font); color: var(--bad-text); }
.vplus u { text-underline-offset: 3px; }
.vcard .tot { width: 100%; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.vcard .tot .v { margin-top: 6px; font: 750 22px/1 var(--font); }
.vcard__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vpill { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--font); color: var(--ink-3); }
.vsdot { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line); display: grid; place-items: center; font: 800 11px/1 var(--font); color: var(--ink-3); z-index: 2; }
.ctable { margin-top: 12px; padding: 2px 14px; }
.tr { display: grid; grid-template-columns: 92px 1fr 1fr; align-items: center; gap: 8px; min-height: 48px; }
.tr + .tr { border-top: 1px solid var(--line); }
.tr--head { min-height: 36px; font: 700 12.5px/1 var(--font); color: var(--ink-3); }
.tr .th { font: 600 13.5px/1.35 var(--font); color: var(--ink-2); }
.yn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; border: 0; background: none; padding: 0; font: 650 13.5px/1.3 var(--font); text-align: left; }
.yn svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; }
.yn--y { color: var(--ink); } .yn--y svg { background: var(--ok-soft); color: var(--ok-text); }
.yn--n { color: var(--bad-text); } .yn--n svg { background: var(--bad-soft); color: var(--bad-text); }
.row-btns { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }

/* ---------- 저장 / 체크리스트 ---------- */
.cl-head { margin-top: 20px; padding: 16px; }
.cl-head__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 14px/1.3 var(--font); }
.cl-head__row b { font: 750 22px/1 var(--font); }
.cl-head__row .muted { font: var(--t-caption); text-align: right; }
.cl-bar { height: 6px; margin-top: 12px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--primary); border-radius: inherit; transition: width var(--dur) var(--ease); }
.cl-group { margin-top: 22px; }
.cl-group__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; font: 700 16px/1.3 var(--font); }
.cl-d { color: var(--primary-strong); }
.cl-when { font: 600 12.5px/1 var(--font); color: var(--ink-3); }
.prereg { margin-top: 26px; padding: 18px 16px; }
.prereg__title { margin: 10px 0 0; font: var(--t-h3); }
.prereg__text { margin: 6px 0 14px; font: var(--t-body-s); color: var(--ink-2); }
.prereg__note { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--primary-soft); font: 500 13.5px/1.5 var(--font); color: var(--ink); }

/* ---------- 바텀시트 / 토스트 ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(27,35,64,.38); opacity: 0; transition: opacity var(--dur); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--bar-w); margin: 0 auto; padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom)); background: var(--bg); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-3); transform: translateY(100%); transition: transform 220ms var(--ease); max-height: 92vh; overflow: auto; }
.sheet-wrap.is-open .sheet { transform: none; }
.sheet-wrap.is-open .sheet-backdrop { opacity: 1; }
.sheet__grip { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--line-strong); }
.sheet__title { margin: 0 0 8px; font: var(--t-h3); }
.sheet__body .keys { margin: 12px -8px 0; padding: 8px; background: var(--bg-sunken); border-radius: var(--r-lg); }
.sheet-num { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 8px; font: 750 36px/1.1 var(--font); }
.sheet-num small { font: 700 18px/1 var(--font); color: var(--ink-2); }
.sheet__actions { display: flex; gap: 8px; margin-top: 12px; }
.sheet__actions .cta { flex: 1; }
.sheet__actions .cta-line { flex: 0 0 108px; }
.toast { position: fixed; left: 50%; bottom: 120px; z-index: 60; max-width: 360px; width: max-content; padding: 12px 16px; border-radius: var(--r-md); background: var(--ink); color: #fff; font: 600 14px/1.4 var(--font); box-shadow: var(--sh-3); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur) var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 디자이너 리뷰 반영 ---------- */
.reset-wrap { display: flex; justify-content: center; margin-top: 8px; }
.reset-link { min-height: 44px; padding: 0 12px; border: 0; background: none; font: 600 14px/1 var(--font); color: #5F6578; text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-sm); }
.reset-link:active { background: var(--bg-sunken); }
.more-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: 650 14px/1 var(--font); color: var(--ink-2); }
.risk li[hidden], .softlist[hidden], .softlist li[hidden] { display: none; }