:root{
  /* v0.23 '밝은 낮'(GH 2026-10-25 16:03: 전체적으로 밝은 톤·가독성·깔끔함, 피클 참고). 밝은 톤이 기본, 금빛은 카드 소품에만, 강조는 연보라 한 가지. */
  --bg:#F3F1F7; --phone:#FCFBFE; --fg:#262238; --muted:#6F6A85; --line:#E6E2EE;
  --ink:#F3F2F6; --ink-fg:#262238; --gold:#B08A3A; --gold-2:#9A7730; --gold-3:#8A6A28; --gold-fg:#FFFFFF; --user:#EEE8FA; --user-fg:#262238;
  --warn-bg:#FBEEEA; --warn-fg:#8A3B2C; --quote:#F4F2F8; --face:#FFFFFF; --soft:#F4F2F8; --field:#FFFFFF;
  --gold-line:rgba(176,138,58,.32); --gold-glow:rgba(176,138,58,.10); --gold-tint:rgba(176,138,58,.10);
  --card:#FFFFFF; --track:#ECE9F2; --shadow:0 2px 10px rgba(31,27,51,.06),0 0 0 1px rgba(31,27,51,.04);
  --accent:#6E5BD6; --accent-2:#5A48C2; --accent-tint:#EEEAFF; --accent-fg:#FFFFFF;
  --rose:#D9507E; --rose-2:#B8395F; --rose-tint:rgba(217,80,126,.10); --rose-line:rgba(217,80,126,.35);
  --lilac:#6E5BD6; --lilac-tint:rgba(110,91,214,.10); --lilac-line:rgba(110,91,214,.35); --cream:#1F1B33;
  --back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Crect width='60' height='100' rx='4' fill='%231E1A42'/%3E%3Crect x='3' y='3' width='54' height='94' rx='3.5' fill='none' stroke='%23D4AF5E' stroke-width='1'/%3E%3Crect x='6.5' y='6.5' width='47' height='87' rx='2.5' fill='none' stroke='%23D4AF5E' stroke-width='.5' opacity='.6'/%3E%3Cg fill='%23F3E2B0'%3E%3Ccircle cx='14' cy='18' r='.8'/%3E%3Ccircle cx='46' cy='14' r='.6'/%3E%3Ccircle cx='22' cy='30' r='.5'/%3E%3Ccircle cx='40' cy='26' r='.7'/%3E%3Ccircle cx='12' cy='70' r='.6'/%3E%3Ccircle cx='48' cy='74' r='.8'/%3E%3Ccircle cx='20' cy='84' r='.5'/%3E%3Ccircle cx='44' cy='88' r='.6'/%3E%3Ccircle cx='30' cy='14' r='.5'/%3E%3Ccircle cx='30' cy='86' r='.5'/%3E%3Ccircle cx='11' cy='46' r='.5'/%3E%3Ccircle cx='49' cy='54' r='.5'/%3E%3C/g%3E%3Ccircle cx='30' cy='50' r='16' fill='none' stroke='%23D4AF5E' stroke-width='.6' opacity='.7'/%3E%3Ccircle cx='30' cy='50' r='20' fill='none' stroke='%23D4AF5E' stroke-width='.35' opacity='.4' stroke-dasharray='1 2'/%3E%3Cpath d='M30 34 L32.6 47.4 L46 50 L32.6 52.6 L30 66 L27.4 52.6 L14 50 L27.4 47.4 Z' fill='%23D4AF5E'/%3E%3Cpath d='M30 42 L31.4 48.6 L38 50 L31.4 51.4 L30 58 L28.6 51.4 L22 50 L28.6 48.6 Z' fill='%231E1A42'/%3E%3Ccircle cx='30' cy='50' r='2' fill='%23F3E2B0'/%3E%3Cpath d='M10 10 l2 2 -2 2 -2 -2z M50 10 l2 2 -2 2 -2 -2z M10 90 l2 2 -2 2 -2 -2z M50 90 l2 2 -2 2 -2 -2z' fill='%23D4AF5E'/%3E%3C/svg%3E");
  --stars:none;
  --font-card:"Nanum Myeongjo","Noto Serif KR","Apple SD Gothic Neo",Georgia,serif;
  --font-body:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-display:var(--font-body);
  color-scheme:light;
}
/* A안 '밤하늘 신비'(GH 확정 2026-10-24) — v0.23부터 보조 테마. <html data-theme="night">로 켠다(토글 노출은 GH 결정). */
:root[data-theme="night"]{
  --bg:#0F0D22; --phone:#15122E; --fg:#F0EAFF; --muted:#A39BD0; --line:#3A3466;
  --ink:#272250; --ink-fg:#F0EAFF; --gold:#D4AF5E; --gold-2:#E2C274; --gold-3:#C9A24E; --gold-fg:#1B1838; --user:#3D3250; --user-fg:#F6EFD8;
  --warn-bg:#4A2A24; --warn-fg:#FFD2C7; --quote:#1F1B42; --face:#1F1B42; --soft:#1F1B42; --field:#1A1738;
  --gold-line:rgba(212,175,94,.35); --gold-glow:rgba(212,175,94,.14); --gold-tint:rgba(212,175,94,.10);
  --card:rgba(255,255,255,.04); --track:rgba(255,255,255,.08); --shadow:none;
  --accent:#C5B3FF; --accent-2:#B09CFF; --accent-tint:rgba(197,179,255,.14); --accent-fg:#1B1838;
  --rose:#F4A7C3; --rose-2:#FFC6DA; --rose-tint:rgba(244,167,195,.12); --rose-line:rgba(244,167,195,.4);
  --lilac:#C5B3FF; --lilac-tint:rgba(197,179,255,.10); --lilac-line:rgba(197,179,255,.35); --cream:#FBF3E4;
  --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23F3E2B0'%3E%3Ccircle cx='12' cy='20' r='.9' opacity='.8'/%3E%3Ccircle cx='58' cy='8' r='.6' opacity='.6'/%3E%3Ccircle cx='104' cy='30' r='.8' opacity='.7'/%3E%3Ccircle cx='34' cy='66' r='.5' opacity='.6'/%3E%3Ccircle cx='126' cy='78' r='.7' opacity='.5'/%3E%3Ccircle cx='80' cy='96' r='.9' opacity='.8'/%3E%3Ccircle cx='20' cy='118' r='.6' opacity='.5'/%3E%3Ccircle cx='118' cy='124' r='.5' opacity='.6'/%3E%3Ccircle cx='70' cy='48' r='.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  --font-display:var(--font-card);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.6}
/* v0.13(GH 2026-10-24 15:04): 페이지 세로 스크롤. 모바일 폭 기둥은 유지하되 길이는 끝까지 — 상단 헤더·하단 버튼은 sticky */
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--phone) var(--stars)}
@media (min-width:520px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.top{position:sticky;top:0;z-index:6;background:var(--phone);color:var(--fg);padding:calc(12px + env(safe-area-inset-top,0px)) 18px 12px;display:flex;align-items:center;gap:10px;flex:none;border-bottom:1px solid var(--gold-line)}
.brand{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--gold);letter-spacing:.02em}
.tag{margin-left:auto;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.screen{flex:1;display:none;flex-direction:column}
.screen.on{display:flex}
.body{flex:1;padding:20px max(18px,env(safe-area-inset-right,0px)) 20px max(18px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.foot{position:sticky;bottom:0;z-index:5;flex:none;border-top:1px solid var(--line);padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;background:var(--phone)}
body.has-tab .foot{bottom:var(--tab-h,58px)}
h1{font-family:var(--font-display);font-weight:800;margin:0;font-size:21px;line-height:1.35;text-wrap:balance}
p{margin:0}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:500;opacity:.9}
.muted{color:var(--muted);font-size:13px}
.notice{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px}
.warn{background:var(--warn-bg);color:var(--warn-fg);border-radius:14px;padding:12px 14px;font-size:13.5px}
.video{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.video img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.video .meta{padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.video .meta b{font-weight:500}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:13px 16px;font-weight:500;color:inherit;background:transparent}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-p{background:linear-gradient(180deg,var(--gold-2),var(--gold-3));color:var(--gold-fg);width:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn-p:disabled{opacity:.45;cursor:default}
.btn-s{border:1px solid var(--gold-line);color:var(--gold-2);width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--gold-line);border-radius:999px;padding:8px 14px;font-size:13.5px;background:var(--field)}
.chip.sel{background:var(--gold);color:var(--gold-fg);border-color:var(--gold)}
.piles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pile{aspect-ratio:3/4;border-radius:10px;border:1px solid var(--gold-line);background:var(--face);color:var(--gold-2);font-family:var(--font-display);font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0}
.pile.sel{outline:3px solid var(--gold);outline-offset:2px}
textarea{width:100%;min-height:150px;resize:vertical;font:inherit;line-height:1.55;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--fg)}
textarea:focus{outline:2px solid var(--gold);border-color:transparent}
.count{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.msg{max-width:90%;padding:12px 14px;border-radius:16px;font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.ai{background:var(--ink);color:var(--ink-fg);align-self:flex-start;border-bottom-left-radius:6px;border:1px solid var(--gold-line)}
.msg .lab{display:block;font-size:11px;letter-spacing:.1em;color:var(--gold);font-family:var(--font-display);font-weight:700;margin-bottom:4px}
.msg.user{background:var(--user);color:var(--user-fg);align-self:flex-end;border-bottom-right-radius:6px}
.msg.sys{align-self:center;font-size:12.5px;color:var(--muted);padding:4px 10px;text-align:center}
.msg.fail{background:var(--warn-bg);color:var(--warn-fg);align-self:flex-start;border-bottom-left-radius:6px;display:flex;flex-direction:column;gap:8px}
.msg.fail button{align-self:flex-start;background:var(--warn-fg);color:var(--warn-bg);padding:8px 12px;border-radius:10px;font-size:13px}
.typing{align-self:flex-start;background:var(--ink);border:1px solid var(--gold-line);border-radius:16px;border-bottom-left-radius:6px;padding:12px 16px;display:flex;gap:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-fg);opacity:.5;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.7}}
.inrow{display:flex;gap:8px;align-items:flex-end}
.inrow textarea{min-height:44px;max-height:120px;flex:1;padding:10px 14px;min-width:0}
.inrow button{flex:none;background:linear-gradient(180deg,var(--gold-2),var(--gold-3));color:var(--gold-fg);padding:11px 14px}
.inrow button:disabled{opacity:.5}
.summary{border:1px solid var(--gold-line);border-radius:14px;padding:16px;background:var(--face);box-shadow:0 0 28px var(--gold-glow)}
.summary dl{display:flex;flex-direction:column;gap:12px;margin:0}
.summary dt{font-size:11.5px;letter-spacing:.1em;color:var(--gold);font-weight:700;margin-bottom:3px}
.summary dd{margin:0;font-size:14.5px}

/* 카드 뽑기 */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot{aspect-ratio:3/5;border:1.5px dashed var(--gold);border-radius:10px;display:flex;align-items:flex-end;justify-content:center;padding:8px;text-align:center;background:var(--gold-tint);box-shadow:0 0 0 8px var(--gold-tint),0 0 36px var(--gold-glow)}
.slot span{font-size:12px;color:var(--muted)}
.slot.filled{border-style:solid;border-color:var(--gold);background:var(--back) center/100% 100% no-repeat}
.slot.filled span{color:#f6efe0}
.slot.open{background:var(--face);border-color:var(--gold);box-shadow:0 0 36px var(--gold-glow);animation:flip .45s ease}
@keyframes flip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
@media (prefers-reduced-motion:reduce){.slot.open{animation:none}}
.face{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;height:100%;width:100%}
.face em{font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--gold)}
.face b{font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1.3;word-break:keep-all}
.deck{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.back{aspect-ratio:3/5;padding:0;border-radius:6px;background:var(--back) center/100% 100% no-repeat;box-shadow:0 3px 8px rgba(0,0,0,.55);transition:transform .15s,opacity .2s}
.back:hover{transform:translateY(-3px)}
.back.gone{opacity:.15;transform:none;cursor:default}
/* 대화 상단 카드 띠 */
.strip{position:sticky;top:var(--top-h,56px);z-index:4;flex:none;display:flex;gap:8px;overflow-x:auto;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--phone)}
.mini{flex:none;border:1px solid var(--gold-line);border-radius:10px;padding:6px 10px;display:flex;flex-direction:column;background:var(--face);box-shadow:0 0 14px var(--gold-tint)}
.mini em{font-style:normal;font-size:10.5px;color:var(--gold)}
.mini b{font-size:13px;font-weight:500;white-space:nowrap}

/* v0.4 추가: 단계 표시, 한 장 슬롯, 설계 목록, 결제 자리, 중단 */
.top .step{font-size:11px;opacity:.75;margin-left:4px}
.slots.one{grid-template-columns:1fr;width:min(100%,150px);margin:0 auto}
.plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--face)}
.plan li input{margin-top:4px;accent-color:var(--gold)}
.plan li b{display:block;font-weight:500;font-size:15px}
.plan li span{font-size:12.5px;color:var(--muted)}
.plan li.off{opacity:.45}
.pay{border:1px dashed var(--gold);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;background:var(--face)}
.pay .price{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--gold-2);margin-top:4px}
.msg.q{align-self:center;font-size:12.5px;color:var(--gold);background:transparent;padding:4px 10px;text-align:center;font-weight:500;letter-spacing:.04em}

/* v0.5: 별명 입력, 무료 안내, 이어 보기(결제 자리), 예상 답 버튼 */
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:13px;color:var(--muted)}
.field span em{font-style:normal;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px}
.field input{font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--fg)}
.field input:focus{outline:2px solid var(--gold);border-color:transparent}
.hint{font-size:13px;color:var(--gold-2);background:var(--face);border:1px solid var(--gold-line);border-radius:12px;padding:10px 12px}
.plan.locked li{opacity:.75}
.plan.locked li::before{content:"🔒";font-size:14px;margin-top:2px}
.plan.locked li.done{opacity:1}
.plan.locked li.done::before{content:"✓";color:var(--gold);font-weight:700}
.chip.more{border-style:dashed;color:var(--muted)}
.chip.next{background:linear-gradient(180deg,var(--gold-2),var(--gold-3));color:var(--gold-fg);border-color:var(--gold)}
.legal{border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:12.5px;color:var(--muted);background:var(--field)}
.legal summary{cursor:pointer;color:var(--fg);font-size:13px}
.legal ul{margin:8px 0 2px;padding-left:16px;display:flex;flex-direction:column;gap:4px}

/* v0.6 QA 반영: 터치 크기 44px, 설계 행 전체 탭, 토스트, 글자 수 */
.chip{min-height:44px;padding:10px 14px}
.plan li{padding:0}
.plan li .row{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;cursor:pointer;width:100%}
.plan li .row input{margin-top:4px;accent-color:var(--gold);width:18px;height:18px;flex:none}
.plan li .txt{display:flex;flex-direction:column}
.plan.locked li{padding:12px 14px;display:flex;gap:10px}
.legal summary{min-height:44px;display:flex;align-items:center}
.notice a{color:inherit;font-weight:700;text-decoration:underline}
.count{min-height:0;padding:0 4px}
.count.over{color:var(--warn-fg)}
.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--ink-fg);border:1px solid var(--gold-line);padding:10px 16px;border-radius:999px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;max-width:88vw;text-align:center;z-index:9}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.plan li .txt{font-size:inherit;color:inherit}

/* v0.7: 문단 끊어 보기 */
.msg.ai.cont{margin-top:-6px;border-top-left-radius:6px}
.chip.read{background:var(--ink);color:var(--gold-2);border-color:var(--gold-line)}
[hidden]{display:none !important}

/* v0.8: 다중 서비스 홈 */
a.brand{color:var(--gold);text-decoration:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{text-align:left;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--face);display:flex;flex-direction:column;gap:4px;min-height:96px}
.tile b{font-size:16px;font-weight:800;font-family:var(--font-display)}
.tile span{font-size:12.5px;color:var(--muted);line-height:1.45}
.tile.soon{opacity:.55;cursor:default}
.tile.soon b::after{content:""}
.tiles .tile:first-child{grid-column:1 / -1;border-color:var(--gold-line);box-shadow:0 0 28px var(--gold-glow)}
.tiles .tile:first-child b{color:var(--gold-2)}
.vlist{display:flex;flex-direction:column;gap:8px}
.vitem{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--face);text-align:left}
.vitem img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none}
.vitem b{font-weight:500;font-size:14px;display:block}
.vitem span{font-size:12px;color:var(--muted)}
.homelink{display:block;text-align:center;font-size:13px;color:var(--muted);padding:6px}

/* v0.9: 고지 묶음(①-2) — 처리방침 링크·문의, AI 생성 표시, 입력창 위 전송 안내 */
.site{margin-top:auto;padding-top:10px;font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
.site a{color:inherit}
.ainote{flex:none;margin:0;padding:6px 14px 0;font-size:11.5px;color:var(--muted);text-align:center}
.tiny{font-size:11.5px;color:var(--muted);text-align:center;margin:-4px 0 0}
.legal li a{color:inherit}
.helpful{border:1px dashed var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.helpful .muted{color:var(--fg);font-size:14px}

/* v0.9d A안 보강: 금선 구분선·단계 표시·접근성(어두운 바탕에서 긴 글 피로 줄이기) */
.top .step{color:var(--muted);opacity:1}
.strip{border-bottom:1px solid var(--gold-line)}
.msg.q{color:var(--gold-2);font-family:var(--font-display);font-weight:700}
.msg.sys{color:var(--muted)}
.summary dt{color:var(--gold)}
.plan.locked li.done::before{color:var(--gold-2)}
.plan li .row input{accent-color:var(--gold)}
.msg.fail button{background:var(--warn-fg);color:var(--warn-bg)}
.foot{border-top-color:var(--gold-line)}
.ainote,.tiny,.site{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.back:hover{transform:none}}

/* v0.10 (GH 2026-10-24 피드백): 홈 인사, 고민 먼저, 멈춤·나가기, 연출 1차, 입력 우선, 카드 그림 */
.screen.on{animation:screenIn .32s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.top .more{margin-left:auto;width:40px;height:40px;padding:0;border-radius:50%;font-size:20px;line-height:1;color:var(--muted);border:1px solid transparent;letter-spacing:.05em}
.top .more:hover{border-color:var(--gold-line);color:var(--gold-2)}
.top .tag+.more,.top .step+.more{margin-left:auto}
.top .tag:not([hidden])~.more{margin-left:6px}
/* 홈 */
.body.home{gap:16px;padding-top:12px}
.hero{position:relative;margin:0 -6px}
.hero .sky{display:block;width:100%;height:auto}
.avatar{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;background:var(--ink);border:1.5px solid var(--gold);box-shadow:0 0 0 6px var(--gold-tint),0 0 28px var(--gold-glow);display:flex;align-items:center;justify-content:center}
.avatar svg{width:30px;height:30px}
.greet{text-align:center;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.greet h1{font-size:22px}
.greet .muted{font-size:14px;line-height:1.7}
.btn-p.big{padding:16px;font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 28px var(--gold-tint)}
.recent{display:flex;flex-direction:column;gap:6px}
.vcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--face);text-align:left;width:100%}
.vcard img{width:110px;aspect-ratio:16/9;object-fit:cover;border-radius:9px;flex:none;background:var(--ink)}
.vcard .vmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.vcard em{font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--gold)}
.vcard b{font-weight:500;font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard .muted{font-size:12px}
.linkbtn{align-self:center;font-size:13px;color:var(--muted);padding:6px 10px;text-decoration:underline;text-underline-offset:3px}
.soonline{font-size:12px;color:var(--muted);text-align:center;letter-spacing:.04em;opacity:.8}
/* 진입: 자유 입력이 위 */
.field .lead{color:var(--gold-2);font-size:13.5px}
#concern{min-height:112px;font-size:15px}
/* 사전 대화·리딩: 입력창 위, 버튼은 아래 '글로 쓰기 어려울 때' */
.chipbox{display:flex;flex-direction:column;gap:6px}
.chiplab{font-size:11.5px;color:var(--muted);letter-spacing:.04em;padding:0 2px}
.chiplab:empty{display:none}
.strip[hidden]{display:none !important}
.status{text-align:center;min-height:1.6em;transition:opacity .3s}
/* 연출: 카드 섞기(펼쳐지며 등장), 고른 카드 강조, 뒤집기 */
.deck.dealing{pointer-events:none}
.deck.dealing .back{animation:deal .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes deal{from{opacity:0;transform:translate(0,22px) rotate(-6deg) scale(.9)}60%{opacity:1}to{opacity:1;transform:none}}
.back.picked{transform:translateY(-6px) scale(1.08);box-shadow:0 0 0 2px var(--gold),0 10px 24px rgba(0,0,0,.5),0 0 30px var(--gold-glow);transition:transform .35s,box-shadow .35s}
.back.gone{transition:opacity .5s,transform .5s}
.slot.open{animation:flip .7s cubic-bezier(.2,.7,.2,1)}
.face{position:relative;overflow:hidden;border-radius:8px}
.face .art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.face .art~em{display:none}
.face .art~b{position:relative;z-index:1;margin-top:auto;background:rgba(15,13,34,.82);padding:3px 10px;border-radius:999px;font-size:13px;color:#F6EFD8;border:1px solid var(--gold-line)}
.face:has(.art){justify-content:flex-end;padding:0 0 5px}
.slot.open:has(.art){background:#100E24}
.mini .art{display:none}
/* 연출: 문장 단위 등장, 대기 문구 */
.msg .sent{opacity:0;transition:opacity .45s ease}
.msg .sent.in{opacity:1}
.typing{align-items:center}
.typing .tlabel{font-size:12.5px;color:var(--muted);margin-left:4px;opacity:0;transition:opacity .4s}
.typing.labeled .tlabel{opacity:1}
.typing .tlabel:empty{margin:0}
/* 설계 목록: 차례로 등장 */
.plan li{animation:rowIn .4s ease both;animation-delay:calc(var(--i, 0) * 90ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 멈춤·나가기 시트 */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(8,6,20,.55);opacity:0;transition:opacity .22s}
.sheet-box{position:relative;width:100%;max-width:480px;background:var(--phone);border:1px solid var(--gold-line);border-bottom:0;border-radius:20px 20px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;transform:translateY(24px);opacity:0;transition:transform .22s,opacity .22s}
.sheet.on .sheet-bg{opacity:1}
.sheet.on .sheet-box{transform:none;opacity:1}
.sheet-box b{font-family:var(--font-display);font-size:17px;font-weight:800}
.sheet-box .muted{margin-bottom:4px}
@media (prefers-reduced-motion:reduce){
  .screen.on,.deck.dealing .back,.plan li,.slot.open{animation:none}
  .msg .sent,.back.picked,.back.gone,.sheet-bg,.sheet-box,.typing .tlabel{transition:none}
  .msg .sent{opacity:1}
}

/* v0.11 (GH 2026-10-24 13:54): 마음 카드 제거, 카드 공개 화면, 대화 속 카드 타일, 질문 바꾸기, 이미지 공유, 홈 달빛 호흡 */
.msg.sys.note{align-self:stretch;max-width:100%;text-align:left;background:var(--face);border:1px dashed var(--gold-line);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--muted);line-height:1.6}
.slots.one.big{width:min(80%,300px)}
.slots.one.big .slot{box-shadow:0 0 0 10px var(--gold-tint),0 0 60px var(--gold-glow)}
.revealed{text-align:center;display:flex;flex-direction:column;gap:4px;animation:rowIn .5s ease both}
.revealed b{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--gold-2)}
.qcard{align-self:stretch;display:flex;gap:12px;align-items:center;border:1px solid var(--gold-line);border-radius:14px;padding:10px 12px;background:var(--face);box-shadow:0 0 24px var(--gold-glow)}
.qcard img{width:56px;aspect-ratio:557/975;object-fit:cover;border-radius:6px;border:1px solid var(--gold-line);flex:none}
.qcard em{font-style:normal;font-size:11.5px;letter-spacing:.06em;color:var(--gold);display:block;margin-bottom:3px}
.qcard b{font-weight:500;font-size:14.5px;line-height:1.45}
.mini{flex-direction:row;align-items:center;gap:8px}
.mini img{width:22px;aspect-ratio:557/975;object-fit:cover;border-radius:3px;flex:none}
.mini>div{display:flex;flex-direction:column}
.row2{display:flex;gap:8px}
.row2 .btn-s{flex:1}
.hero .moon{transform-origin:258px 46px;animation:moonbreath 6s ease-in-out infinite}
.hero .moonglow{animation:glowbreath 6s ease-in-out infinite}
@keyframes moonbreath{0%,100%{opacity:.92}50%{opacity:1}}
@keyframes glowbreath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.hero .moonglow{transform-origin:248px 46px}
.hero .twinkle circle{animation:twinkle 3.2s ease-in-out infinite}
.hero .twinkle circle:nth-child(2n){animation-delay:1.1s}.hero .twinkle circle:nth-child(3n){animation-delay:2.2s}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.95}}
@media (prefers-reduced-motion:reduce){.hero .moon,.hero .moonglow,.hero .twinkle circle,.revealed{animation:none}}

/* v0.12 (GH 2026-10-24 14:56): 고민 필수, 단계 표시·사전 상담 안내 부각, 설계 화면 간결, 리딩 ainote 제거 */
.field .req{font-style:normal;font-size:11px;border:1px solid var(--gold);color:var(--gold-2);border-radius:999px;padding:1px 7px;margin-left:4px}
.field .opt,#topicPick .opt{font-style:normal;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px}
.muted.small{font-size:12px}
.steps{list-style:none;margin:0;padding:10px 14px 0;display:flex;gap:6px;counter-reset:st;flex:none}
.steps li{flex:1;font-size:11px;color:var(--muted);text-align:center;padding:6px 2px 8px;border-bottom:2px solid var(--line);white-space:nowrap;counter-increment:st}
.steps li::before{content:counter(st);opacity:.7;margin-right:4px}
.steps li.cur{color:var(--gold-2);border-bottom-color:var(--gold);font-weight:500}
.steps li.done{color:var(--muted);border-bottom-color:var(--gold-line)}
.steps li.done::before{content:"✓ "}
.body>.steps{padding:0 0 4px;margin:-6px 0 0}
.stagebar{flex:none;margin:10px 14px 0;padding:12px 14px;border:1px solid var(--gold);border-radius:14px;background:linear-gradient(180deg,var(--gold-tint),var(--gold-tint));display:flex;flex-direction:column;gap:4px;box-shadow:0 0 24px var(--gold-glow)}
.stagebar b{font-family:var(--font-display);font-size:15px;color:var(--gold-2)}
.stagebar span{font-size:13px;line-height:1.55;color:var(--fg)}
.plan li .txt>span:empty{display:none}
.plan li .txt b{font-size:15.5px;line-height:1.45}
.plan li .txt>span{display:none}
#planNote{text-align:center}
.hint{text-align:center}

/* v0.13: 하단 탭바, 종합 페이지, 페이지 스크롤 보조 */
.tabbar{position:sticky;bottom:0;z-index:5;display:none;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:var(--phone);border-top:1px solid var(--gold-line);margin-top:auto}
body.has-tab .tabbar{display:flex}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:10px;font-size:11px;color:var(--muted);text-decoration:none;background:transparent;border:0;min-height:44px}
.tab svg{width:22px;height:22px}
.tab.cur{color:var(--gold-2)}
.tab.soon{opacity:.5;cursor:default}
.tab span{display:flex;align-items:center;gap:3px}
.tab em{font-style:normal;font-size:9px;border:1px solid var(--line);border-radius:999px;padding:0 4px}
.stagebar{position:sticky;top:var(--top-h,56px);z-index:4;background:var(--phone)}
.stagebar+.body{padding-top:14px}
.fan{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.fan figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(30%,124px);animation:rowIn .5s ease both;animation-delay:calc(var(--i,0) * 120ms)}
.fan img{width:100%;aspect-ratio:557/975;object-fit:cover;border-radius:8px;border:1px solid var(--gold);box-shadow:0 0 28px var(--gold-glow),0 8px 20px rgba(0,0,0,.45)}
.fan figcaption{text-align:center;display:flex;flex-direction:column;gap:1px}
.fan em{font-style:normal;font-size:10.5px;letter-spacing:.06em;color:var(--gold)}
.fan b{font-size:13px;font-weight:500}
.loading{display:flex;align-items:center;justify-content:center;gap:6px;padding:18px;color:var(--muted);font-size:13.5px}
.loading i{width:6px;height:6px;border-radius:50%;background:var(--gold-2);opacity:.5;animation:blink 1.2s infinite}
.loading i:nth-child(2){animation-delay:.2s}.loading i:nth-child(3){animation-delay:.4s}
.loading span{margin-left:6px}
.fail{display:flex;flex-direction:column;gap:10px;background:var(--warn-bg);color:var(--warn-fg);border-radius:14px;padding:12px 14px;font-size:13.5px}
.fail .btn-s{color:var(--warn-fg);border-color:var(--warn-fg)}
.article{display:flex;flex-direction:column;gap:14px;font-size:15.5px;line-height:1.75;padding:4px 2px}
.article p{margin:0;animation:rowIn .6s ease both;animation-delay:calc(var(--i,0) * 160ms)}
.article p:first-child::first-letter{font-family:var(--font-display);font-size:1.6em;color:var(--gold-2);font-weight:800;float:left;line-height:1;margin:4px 6px 0 0}
.article .lab{font-size:11px;letter-spacing:.1em;color:var(--gold);font-family:var(--font-display);font-weight:700;margin-bottom:-6px}
#sumBox .eyebrow{margin-bottom:10px}
@media (prefers-reduced-motion:reduce){.fan figure,.article p,.loading i{animation:none}}

/* v0.14 (GH 2026-10-24 15:28): 홈 서비스 카드, 토스식 스텝 입력, 오늘의 카드, 대화 탭, 페르소나 줄, 고지 축소 */
.body.home{gap:18px}
.hero{margin:0 -6px -8px}
.greet h1{font-size:21px}
.services{display:flex;flex-direction:column;gap:10px}
.svc{display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:16px 16px;background:var(--face);width:100%;color:inherit}
.svc .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--gold-tint);display:flex;align-items:center;justify-content:center;color:var(--gold-2)}
.svc .ic svg{width:24px;height:24px}
.svc .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.svc .tx b{font-size:16px;font-weight:700;font-family:var(--font-display)}
.svc .tx span{font-size:12.5px;color:var(--muted)}
.svc .arr{color:var(--muted);font-size:20px;flex:none}
.svc.main{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-tint),var(--gold-tint));box-shadow:0 0 30px var(--gold-glow)}
.svc.main .ic{background:var(--gold);color:var(--gold-fg)}
.svc.main .tx b{color:var(--gold-2);font-size:18px}
.svc-row{display:flex;gap:10px}
.svc.soon{opacity:.5;cursor:default;padding:12px 14px}
.svc.soon .tx b{font-size:14px}
/* 상담 시작: 스텝 카드 */
.body.entry{gap:14px}
.stepcard{border:1px solid var(--line);border-radius:16px;background:var(--face);padding:16px;display:flex;flex-direction:column;gap:12px}
.stepcard.done{border-color:var(--gold-line)}
.stephead{display:flex;align-items:center;gap:10px}
.stephead .num{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--gold-fg);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--font-display)}
.stephead b{font-size:15.5px;font-weight:700}
.stephead .opt{margin-left:auto;font-style:normal;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;color:var(--muted)}
.cats{display:flex;flex-direction:column;gap:10px}
.catg{display:flex;flex-direction:column;gap:6px}
.catg>em{font-style:normal;font-size:12px;color:var(--gold);letter-spacing:.06em}
.catg .chips{gap:6px}
.catg .chip{font-size:13px;padding:8px 12px;min-height:40px}
.stepcard textarea{min-height:120px;font-size:15px}
.stepcard input{font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--fg);width:100%}
.stepcard input:focus{outline:2px solid var(--gold);border-color:transparent}
.foot .tiny{margin:0}
.foot .tiny a{color:inherit}
/* 페르소나 줄 */
.persona{flex:none;display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.persona b{display:block;font-size:13px;color:var(--fg);font-weight:500}
.pavatar{width:30px;height:30px;border-radius:50%;background:var(--ink) center/16px no-repeat;border:1px solid var(--gold);flex:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M24 7a14 14 0 1 0 8 25 11 11 0 1 1-8-25z' fill='%23F3E2B0'/%3E%3C/svg%3E")}
#s-talk .persona{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.talkacts{display:flex;flex-direction:column;gap:10px}
#talkGreet{align-self:stretch;max-width:100%}
/* 오늘의 카드 */
.dailywrap{display:flex;justify-content:center;padding:6px 0}
.slot.dailyslot{width:min(60%,210px);cursor:pointer;align-items:center;background:var(--back) center/100% 100% no-repeat;border-style:solid;border-color:var(--gold);transition:transform .2s}
.slot.dailyslot span{background:rgba(15,13,34,.7);padding:4px 10px;border-radius:999px;color:#F6EFD8}
.slot.dailyslot:hover{transform:translateY(-3px)}
.slot.dailyslot.open{cursor:default}
.dailyres{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;animation:rowIn .5s ease both}
.dailyres b{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--gold-2)}
.chips.center{justify-content:center}
.dailyres .chip{pointer-events:none;background:var(--gold-tint)}
.dailyline{font-size:15.5px;line-height:1.7;max-width:32ch}
a.btn-s.center{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* v0.15 (GH 2026-10-24 16:14): 정리 확인 카드, 카드 공개 크게, 오늘의 운세 틀 */
.msg.ai.sumcard{align-self:stretch;max-width:100%;border:1px solid var(--gold);background:linear-gradient(180deg,var(--gold-tint),var(--gold-tint));box-shadow:0 0 24px var(--gold-glow)}
.sumcard dl{margin:4px 0 0;display:flex;flex-direction:column;gap:10px}
.sumcard dt{font-size:11.5px;letter-spacing:.1em;color:var(--gold);font-weight:700;margin-bottom:2px}
.sumcard dd{margin:0;font-size:14.5px;line-height:1.6}
.slots.one.big{width:min(80%,300px)}
.face .art~b{display:none}
.revealed{margin-top:16px;gap:6px}
.revealed b{font-size:26px}
.slot.dailyslot{width:min(78%,290px)}
.dailyres{margin-top:6px}
.fortune{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;text-align:left}
.fortune div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--face)}
.fortune em{display:block;font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--gold);margin-bottom:3px}
.fortune b{font-weight:500;font-size:14px}
.fortune .wide{grid-column:1 / -1}
.svc .ic.yt{background:rgba(255,0,0,.12);color:#FF4D4D}
.svc .ic.yt svg{width:26px;height:26px}

/* v0.15: 후기, 홈 후기 띠, 2라운드 */
.review{border:1px solid var(--gold-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--face)}
.review>b{font-family:var(--font-display);font-size:15px}
.review .chip.sel{background:var(--gold);color:var(--gold-fg)}
.review textarea{min-height:64px;font-size:14px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted)}
.check input{accent-color:var(--gold);width:16px;height:16px;margin-top:2px;flex:none}
.voices{display:flex;flex-direction:column;gap:10px}
.vscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scroll-snap-type:x mandatory}
.voice{flex:none;width:min(78%,280px);scroll-snap-align:start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--face);display:flex;flex-direction:column;gap:6px}
.voice p{margin:0;font-size:13.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.voice .tags{display:flex;gap:4px;flex-wrap:wrap}
.voice .tags span{font-size:10.5px;color:var(--gold-2);border:1px solid var(--gold-line);border-radius:999px;padding:1px 7px}
.voice .cards{font-size:11px;color:var(--muted)}

/* v0.15: 소울카드 */
.dob{display:flex;align-items:center;gap:6px}
.dob input{width:0;flex:1;text-align:center;font-size:17px;padding:12px 6px}
.dob input:first-child{flex:1.6}
.dob span{font-size:13px;color:var(--muted)}
.soulres{display:flex;flex-direction:column;gap:14px;animation:rowIn .5s ease both}
.soulhead{display:flex;gap:14px;align-items:center}
.slot.soulslot{width:34%;max-width:130px;flex:none;animation:none}
.soulname{display:flex;flex-direction:column;gap:4px;min-width:0}
.soulname em{font-style:normal;font-size:12px;color:var(--gold);letter-spacing:.06em}
.soulname b{font-family:var(--font-display);font-size:21px;font-weight:800;line-height:1.3}
.soulname span{font-size:13px;color:var(--muted)}
.sbox{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--face);display:flex;flex-direction:column;gap:8px}
.sbox h3{margin:0;font-family:var(--font-display);font-size:14px;color:var(--gold-2);font-weight:700}
.sbox p{font-size:14.5px;line-height:1.65}
.sbox ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.6}
.moments{list-style:none;padding:0}
.moments li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;display:flex;gap:8px;align-items:flex-start}
.moments li::before{content:"○";color:var(--muted);flex:none}
.moments li.yes{border-color:var(--gold);background:var(--gold-tint)}
.moments li.yes::before{content:"●";color:var(--gold)}

/* v0.16 디자인 패스(GH 2026-10-24 16:49: 눈에 띄게, 진부하지 않게, 20~30대 여성). 원칙: 금빛은 구조·브랜드, 블러시(rose)는 '나·감정'의 강조 한 곳, 라일락은 정보. 한 화면에 눈에 띄는 요소는 하나. */
.kicker{font-size:12.5px;color:var(--rose);font-weight:500;letter-spacing:.02em;margin:0}
/* 오늘의 카드: 라벨은 작고 흐리게, 값은 크고 밝게 — 라벨/값 같은 색·크기 문제 해결 */
.dailyres{gap:14px}
.dailyres b{font-size:28px}
.dailyres .chip{font-size:12.5px;border-color:transparent;background:var(--lilac-tint);color:var(--lilac);min-height:34px;padding:6px 12px}
.dailyline{font-family:var(--font-display);font-size:18px;line-height:1.65;color:var(--cream);max-width:26ch;margin:2px 0 4px}
.fortune{gap:10px}
.fortune div{border:0;background:var(--card);border-radius:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:5px}
.fortune em{font-size:11.5px;letter-spacing:0;color:var(--muted);margin:0}
.fortune b{font-size:16.5px;font-weight:600;color:var(--cream);line-height:1.4}
.fortune .wide{background:linear-gradient(135deg,var(--rose-tint),var(--lilac-tint))}
.fortune .wide:first-child b{color:var(--rose-2)}
.fortune .energy .bar{height:8px;border-radius:999px;background:var(--track);overflow:hidden;margin:4px 0 2px}
.fortune .energy .bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--rose),var(--gold-2));transition:width .9s cubic-bezier(.2,.7,.2,1)}
.fortune .energy b{font-size:15px;font-weight:500}
/* 소울카드 v2 */
.soulintro{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.soulintro h1{font-size:24px;line-height:1.35}
.dobcard{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.dob input{background:var(--card);border-color:transparent;border-bottom:2px solid var(--gold-line);border-radius:12px 12px 4px 4px;font-family:var(--font-display);font-weight:700}
.dob input:focus{outline:none;border-bottom-color:var(--rose)}
.soulres{gap:16px}
.soulhero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:8px 0 4px}
.halo{position:relative;padding:14px}
.halo::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--rose-line),var(--gold-tint) 60%,transparent)}
.slot.soulslot{position:relative;width:min(46vw,170px);max-width:none;animation:none}
.soulhero .kicker{margin-top:6px}
.soulhero h1{font-size:27px;line-height:1.3;max-width:14ch}
.soulintro-line{font-size:15px;line-height:1.7;color:var(--cream);max-width:30ch;margin:0}
.sbox{border:0;background:var(--card);padding:18px 16px;gap:10px;border-radius:18px}
.sbox h3{font-size:16px;color:var(--rose);font-weight:800;display:flex;align-items:center;gap:8px}
.sbox h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose)}
.sbox p{font-size:15px;line-height:1.8;color:var(--fg)}
.familiar{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.familiar li{border-radius:14px;padding:12px 14px;background:var(--card);display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.65}
.familiar .seg{display:flex;gap:6px}
.familiar .seg button{flex:1;min-height:36px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--muted);padding:6px 8px}
.familiar .seg button.on{border-color:var(--rose);color:var(--rose-2);background:var(--rose-tint)}
.familiar li.yes{background:linear-gradient(135deg,var(--rose-tint),var(--card))}
.hitline{font-size:13px;color:var(--muted)}
.hitline.hot{color:var(--rose-2);font-weight:500}
.sbox.manual ul{list-style:none;padding:0;gap:10px}
.sbox.manual li{padding:12px 14px;border-radius:14px;background:var(--lilac-tint);font-size:14.5px;line-height:1.65}
.sbox.match{border:1px solid var(--rose-line);background:linear-gradient(160deg,var(--rose-tint),rgba(21,18,46,0) 70%)}
.sbox.match .tiny{text-align:center;color:var(--muted);margin-top:-2px}
.pair{display:flex;align-items:center;justify-content:center;gap:12px}
.pair figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:38%}
.pair img{width:100%;aspect-ratio:557/975;object-fit:cover;border-radius:10px;border:1px solid var(--gold);box-shadow:0 0 28px var(--gold-glow)}
.pair figcaption{text-align:center;font-size:13px;line-height:1.4}
.pair figcaption b{display:block;font-family:var(--font-display);font-size:14px;color:var(--cream)}
.pair .amp{font-family:var(--font-display);font-size:24px;color:var(--rose)}
/* 홈 서비스 카드: 톤 통일 */
.svc.main{background:linear-gradient(135deg,var(--gold-tint),var(--rose-tint));border-color:var(--gold)}

/* v0.17 — 직접 묻고 싶은 질문(설계 화면 아래 입력칸) */
.customq{margin-top:14px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--lilac) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--lilac) 6%,transparent)}
.customq label{display:block;font-size:13px;color:var(--lilac);margin-bottom:8px;font-weight:500}
.customq .inrow input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--face);color:inherit;font:inherit;font-size:14px}
.customq .inrow button{height:42px;padding:0 16px;border-radius:12px;flex:none;width:auto;font-size:14px}
.customq .tiny{margin:8px 0 0;color:var(--muted);text-align:left}

/* v0.17 — 소울카드 무료 6구간 / 심층 분석(GPT 원고) */
.soulintro-line.quote{font-style:normal;color:var(--rose-2);font-size:15.5px}
.soulintro-p{margin:10px 2px 0;font-size:14.5px;line-height:1.75;color:var(--cream);opacity:.9}
.traits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:tr}
.traits li{position:relative;border-radius:16px;padding:14px 14px 12px 44px;background:var(--card);display:flex;flex-direction:column;gap:8px;counter-increment:tr}
.traits li::before{content:counter(tr);position:absolute;left:14px;top:13px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--gold-fg);background:linear-gradient(180deg,var(--gold-2),var(--gold-3))}
.traits li b{font-size:15px;line-height:1.5;font-weight:600;color:var(--cream)}
.traits li p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.traits .seg{display:flex;gap:6px;margin-top:2px}
.traits .seg button{flex:1;min-height:34px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--muted);padding:6px 8px;background:transparent}
.traits .seg button.on{border-color:var(--rose);color:var(--rose-2);background:var(--rose-tint)}
.traits li.yes{background:linear-gradient(135deg,var(--rose-tint),var(--card))}
.meters-box .kw{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.meters-box .kw .lab{font-size:12px;color:var(--muted)}
.meters-box .kw b{font-size:18px;color:var(--rose-2);font-weight:600}
.meters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.meters li{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"k v" "bar bar";row-gap:5px;align-items:center}
.meters .k{grid-area:k;font-size:13px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meters b{grid-area:v;text-align:right;font-size:13.5px;color:var(--lilac);font-variant-numeric:tabular-nums}
.meters .bar{grid-area:bar;height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.meters .bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--lilac),var(--rose));transition:width .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*90ms)}
.meters.go .bar i{width:var(--v)}
.meters-box .tiny{text-align:left;margin-top:10px}
.sbox.needed blockquote{margin:0;padding:14px 16px;border-left:3px solid var(--rose);background:var(--rose-tint);border-radius:0 14px 14px 0;font-size:15px;line-height:1.8;color:var(--cream)}
.sbox.prem{background:linear-gradient(160deg,var(--lilac-tint),var(--rose-tint) 70%,transparent);border:1px solid var(--lilac-line)}
.sbox.prem .kicker{margin:0 0 4px;color:var(--lilac)}
.sbox.prem h3{margin-top:0}
.hookqs{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.hookqs li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--cream)}
.hookqs li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--rose)}
.sbox.prem .muted{font-size:13.5px;line-height:1.7;margin:0 0 12px}
.sbox.prem .tiny{margin-top:8px}
.premart{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.premart>.kicker{color:var(--lilac);margin:0}
.psec{border-radius:18px;padding:18px 16px 16px;background:var(--card);border:1px solid var(--line);animation:fadeup .5s both;animation-delay:calc(var(--i)*60ms)}
.psec .num{margin:0;font-size:11px;letter-spacing:.14em;color:var(--lilac)}
.psec h3{margin:4px 0 10px;font-size:16.5px;line-height:1.45;color:var(--cream)}
.psec p{margin:0 0 10px;font-size:14.5px;line-height:1.8;color:var(--cream);opacity:.92}
.psec p:last-child{margin-bottom:0}
.psec p b{color:var(--rose-2);font-weight:600}
.psec ul{margin:0 0 10px;padding-left:18px;font-size:14.5px;line-height:1.75}
.psec ul.check{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.psec ul.check li{display:block;width:100%}
.psec .chk{width:100%;box-sizing:border-box;text-align:left;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--cream);font:inherit;font-size:14px;line-height:1.6}
.psec .chk::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:6px;border:1.5px solid var(--muted)}
.psec .chk.on{border-color:var(--rose);background:var(--rose-tint)}
.psec .chk.on::before{border-color:var(--rose);background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231a1230' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.psec .hitline{margin:8px 0 0}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chkhead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:4px 0 10px;padding-bottom:10px;position:relative}
.chkhead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:999px;background:var(--track)}
.chkhead::before{content:"";position:absolute;left:0;bottom:0;height:4px;width:var(--p,0%);border-radius:999px;background:linear-gradient(90deg,var(--lilac),var(--rose));transition:width .4s;z-index:1}
.chkhead span{display:flex;flex-direction:column;gap:2px}
.chkhead b{font-size:15px;color:var(--cream)}
.chkhead small{font-size:11.5px;color:var(--muted)}
.chkhead .cnt{align-items:flex-end}
.chkhead .cnt b{font-size:18px;color:var(--rose-2);font-variant-numeric:tabular-nums}
.chkfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.chkfoot .hitline{margin:0}
.btn-s.small{padding:6px 12px;font-size:12.5px;min-height:0;border-radius:999px}
.soulhero h1{max-width:22ch;word-break:keep-all;overflow-wrap:anywhere;font-size:24px}
.plan li .rm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;margin-left:auto;margin-top:2px}
.plan li .rm:active{color:var(--rose-2);border-color:var(--rose)}

/* v0.18 — 내 기록 */
.minelist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.minelist li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--face);cursor:pointer}
.minelist img{width:44px;height:74px;object-fit:cover;border-radius:8px;flex:none}
.minelist .tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.minelist .tx b{font-size:15px;color:var(--cream);font-weight:600}
.minelist .tx span{font-size:12.5px;color:var(--muted)}
.minelist .arr{color:var(--muted);font-size:20px}
#soulFoot .tiny{text-align:center;margin:0 0 8px;color:var(--lilac)}

/* v0.19 — 심층 별도 화면 */
.premdivider{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.premdivider span{font-size:12px;letter-spacing:.14em;color:var(--lilac);font-weight:600}
.premdivider em{font-style:normal;font-size:13px;color:var(--muted)}
.traits.ro li{padding-bottom:14px}
#soulFoot .btn-s{margin-top:8px}

/* v0.20 — 나랑 얼마나 맞아요? */
.sbox.fit .muted{font-size:13.5px;margin:0 0 12px}
.fitscale{display:flex;gap:8px}
.fitscale button{flex:1;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:16px;font-weight:600}
.fitscale button.on{border-color:var(--rose);color:var(--rose-2);background:var(--rose-tint)}
.fitlabels{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin:6px 2px 10px}
.sbox.fit textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--face);color:inherit;font:inherit;font-size:14px;padding:10px 12px;resize:none}
.sbox.fit .row2{align-items:center;margin-top:10px}
.sbox.fit .row2 .tiny{margin:0;text-align:left;color:var(--lilac)}
/* v0.21 — 지난 상담 다시 보기: 질문별 리딩 */
.qalist{margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.qalist .eyebrow{margin-bottom:2px}
details.qa{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 14px}
details.qa summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:12px 0}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary em{font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--lilac)}
details.qa summary b{font-size:14.5px;font-weight:600;color:var(--cream)}
details.qa summary span{font-size:12px;color:var(--muted)}
details.qa[open] summary{border-bottom:1px solid var(--line)}
details.qa p{font-size:14px;line-height:1.75;margin:10px 0}

/* v0.22 — 이전 상담 이어가기 */
.stepcard.thread{border-color:var(--lilac-line);background:linear-gradient(160deg,var(--lilac-tint),transparent)}
.stepcard.thread .row2{margin-top:4px}
.threadlist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.threadlist li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--face);cursor:pointer}
.threadlist .cards{display:flex;gap:3px;flex:none}
.threadlist .cards img{width:22px;height:36px;object-fit:cover;border-radius:4px}
.threadlist .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.threadlist .tx b{font-size:14px;color:var(--cream);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.threadlist .tx span{font-size:12px;color:var(--muted)}
.stepcard.thread .tiny{text-align:left;color:var(--lilac);margin-top:8px}

/* v0.23 — 밝은 낮 테마 + 피클 참고 대화 연출 (GH 2026-10-25 16:03: 밝은 톤·가독성·깔끔함, 캐릭터 상단 중앙, 상태 호흡, 점 3개, 메뉴 보이게, 풍선 부드럽게) */
body{font-size:16px;line-height:1.65;background:var(--bg)}
.app{background:var(--phone) var(--stars)}
@media (min-width:520px){.app{border-color:var(--line);box-shadow:0 0 40px rgba(31,27,51,.06)}}
/* 상단: 흰색→투명 페이드. 내용이 뒤로 스며 사라진다. 왼쪽 ≡ 둥근 버튼, 가운데 이름, 오른쪽 ⋯(상담 중) */
.top{background:linear-gradient(180deg,var(--phone) 0%,var(--phone) 55%,color-mix(in srgb,var(--phone) 0%,transparent) 100%);border-bottom:0;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 16px;gap:8px;pointer-events:none}
.top>*{pointer-events:auto}
.top .brand{font-family:var(--font-card);font-size:17px;color:var(--fg);letter-spacing:.04em;position:absolute;left:50%;transform:translateX(-50%);top:calc(16px + env(safe-area-inset-top,0px))}
.top .step{display:none}
.top .tag{margin-left:auto;background:var(--face);box-shadow:var(--shadow);border-color:transparent}
body.has-dock .top .brand{display:none}
body.has-dock .top{padding-bottom:14px}
body.has-dock .screen.on>:first-child:not(.body){margin-top:48px}
body.has-dock .screen.on>.body:first-child{padding-top:64px}
.rbtn{width:44px;height:44px;padding:0;border-radius:50%;background:var(--face);box-shadow:var(--shadow);color:var(--fg);display:flex;align-items:center;justify-content:center;flex:none}
.rbtn svg{width:20px;height:20px}
.rbtn:active{transform:scale(.96)}
.top .more,.top .tag:not([hidden])~.more{margin-left:auto;width:44px;height:44px;background:var(--face);box-shadow:var(--shadow);color:var(--fg);border:0;font-size:22px}
.top .tag:not([hidden])~.more{margin-left:6px}
.top .more:hover{border-color:transparent;color:var(--accent)}
/* 캐릭터 독: 대화 화면 상단 중앙. 흰 원 + 이름/상태 알약. 상태 글은 숨 쉬듯 투명도 호흡, 캐릭터는 깜빡임·살짝 떠오름 */
.chardock{flex:none;display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none}
.charwrap{width:72px;height:72px;border-radius:50%;background:var(--face);box-shadow:0 6px 18px rgba(31,27,51,.10),0 0 0 1px rgba(31,27,51,.04);display:flex;align-items:center;justify-content:center;position:relative;animation:charfloat 3.2s ease-in-out infinite}
.charwrap img,.charwrap svg{width:48px;height:48px;display:block}
.charwrap .eye{transform-origin:center;transform-box:fill-box;animation:eyeblink 4.2s ease-in-out infinite}
@keyframes eyeblink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes charfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.charpill{margin-top:-10px;background:color-mix(in srgb,var(--face) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow);border-radius:14px;padding:6px 12px 5px;display:flex;flex-direction:column;align-items:center;gap:0;min-width:84px;pointer-events:auto}
.charpill b{font-size:13px;font-weight:700;line-height:1.3}
.charpill .charstate{font-size:11.5px;color:var(--muted);line-height:1.4;animation:breathe 2.6s ease-in-out infinite;font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity .12s}
.charpill .charstate.idle{animation:none}
@keyframes breathe{0%,100%{opacity:.62}50%{opacity:1}}
.chardock[hidden]{display:none}
/* 말풍선: 테두리 없음, 크게 둥글게, 아래서 올라오며 등장 */
.msg{max-width:min(92%,360px);padding:14px 16px;border-radius:20px;font-size:16px;line-height:1.65;animation:msgIn .24s cubic-bezier(.2,0,0,1) both}
.msg.ai{background:var(--ink);color:var(--ink-fg);border:0;border-bottom-left-radius:20px;box-shadow:none}
.msg.ai.cont{border-top-left-radius:20px;margin-top:-6px}
.msg.user{background:var(--user);color:var(--user-fg);border-bottom-right-radius:20px;animation:msgInR .12s ease both}
.msg .lab{color:var(--accent);font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.06em}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes msgInR{from{opacity:0}to{opacity:1}}
.msg.sys.note{background:var(--card);border:1px dashed var(--line);box-shadow:none}
.msg.ai.sumcard{border:1px solid var(--accent-tint);background:linear-gradient(180deg,var(--accent-tint),var(--face));box-shadow:var(--shadow)}
.sumcard dt{color:var(--accent)}
.msg.q{color:var(--accent);font-family:var(--font-body);font-weight:600}
.msg.sys{font-size:12.5px}
/* 점 3개: 작은 풍선, 점이 순서대로 커졌다 작아짐. 다음 풍선이 올 때까지 머문다 */
.typing{background:var(--ink);border:0;border-radius:20px;border-bottom-left-radius:20px;padding:13px 16px;gap:5px;animation:msgIn .3s cubic-bezier(.2,.7,.2,1) both}
.typing i{width:7px;height:7px;background:var(--muted);opacity:.55;animation:dot 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:scale(.8);opacity:.4}30%{transform:scale(1.15);opacity:1}}
.typing .tlabel{font-size:12.5px;color:var(--muted)}
/* 입력: 떠 있는 흰 알약, 오른쪽 둥근 보내기 버튼 */
.foot{border-top:0;background:linear-gradient(180deg,color-mix(in srgb,var(--phone) 0%,transparent),var(--phone) 28%);padding-top:14px}
.inrow{background:var(--face);border-radius:26px;box-shadow:var(--shadow);padding:6px 6px 6px 16px;align-items:flex-end;gap:6px}
.inrow textarea{background:transparent;border:0;padding:9px 0;min-height:40px;font-size:15.5px}
.inrow textarea:focus{outline:none}
.inrow button{width:40px;height:40px;padding:0;border-radius:50%;background:var(--fg);color:var(--phone);font-size:0;flex:none;display:flex;align-items:center;justify-content:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");background-size:20px;background-repeat:no-repeat;background-position:center}
.inrow button:disabled{opacity:.3}
:root[data-theme="night"] .inrow button{background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1838' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E")}
.customq .inrow{padding:4px 4px 4px 14px;border-radius:16px}
.customq .inrow button{width:auto;height:38px;border-radius:12px;font-size:14px;background-image:none;padding:0 14px;color:var(--accent-fg);background:var(--accent)}
.count{padding:0 10px}
.chip{background:var(--face);border-color:var(--line);box-shadow:var(--shadow);border-radius:999px}
.chip.sel,.chip.next{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.chip.read{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.chip.more{box-shadow:none;background:transparent}
/* 하단 탭바: 떠 있는 알약. 키보드가 올라오면(body.kb) 숨김 */
.tabbar{background:transparent;border-top:0;padding:6px 14px calc(10px + env(safe-area-inset-bottom,0px))}
.tabbar::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--phone) 60%);pointer-events:none;z-index:-1}
body.has-tab .tabbar{display:flex;position:sticky}
.tabbar{position:sticky;bottom:0}
.tabpill{display:flex;flex:1;gap:2px;background:var(--face);border-radius:999px;box-shadow:0 6px 22px rgba(31,27,51,.12),0 0 0 1px rgba(31,27,51,.04);padding:5px}
.tab{color:var(--muted);border-radius:999px;padding:6px 4px;gap:2px;font-size:10.5px;min-height:46px}
.tab.cur{background:var(--track);color:var(--fg)}
.tab svg{width:21px;height:21px}
body.kb .tabbar{display:none}
body.kb.has-tab .foot{bottom:0}
/* 메뉴 시트(≡) */
.menu{position:fixed;inset:0;z-index:21;display:flex;align-items:flex-start;justify-content:flex-start}
.menu .sheet-bg{position:absolute;inset:0;background:rgba(31,27,51,.35);opacity:0;transition:opacity .22s}
.menu-box{position:relative;width:min(78%,300px);height:100%;background:var(--phone);padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;transform:translateX(-24px);opacity:0;transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .22s;box-shadow:0 0 40px rgba(31,27,51,.14)}
.menu.on .sheet-bg{opacity:1}
.menu.on .menu-box{transform:none;opacity:1}
.menu-box .mhead{display:flex;align-items:center;gap:10px;padding:4px 6px 14px}
.menu-box .mhead b{font-family:var(--font-card);font-size:17px}
.menu-box .mhead .rbtn{margin-left:auto;width:36px;height:36px}
.mitem{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:14px;font-size:15px;color:var(--fg);text-decoration:none;background:transparent;text-align:left;width:100%}
.mitem svg{width:20px;height:20px;color:var(--muted);flex:none}
.mitem:hover,.mitem:active{background:var(--track)}
.mitem.danger{color:var(--warn-fg)}
.mitem.danger svg{color:var(--warn-fg)}
.msep{height:1px;background:var(--line);margin:8px 6px}
.menu-box .mfoot{margin-top:auto;font-size:11.5px;color:var(--muted);padding:0 6px;line-height:1.6}
/* 홈·공통 카드 면: 밝은 톤에서는 흰 카드 + 그림자, 금빛 글로우 제거 */
.svc,.tile,.stepcard,.vcard,.vitem,.plan li,.pay,.summary,.review,.voice,.minelist li,.threadlist li,.qcard,.mini,.sbox,.psec,details.qa,.fortune div,.traits li,.familiar li,.legal,.notice{box-shadow:var(--shadow);border-color:transparent}
.svc.main{border:1px solid var(--accent-tint);background:linear-gradient(135deg,var(--accent-tint),var(--face) 70%);box-shadow:var(--shadow)}
.svc.main .ic{background:var(--accent);color:var(--accent-fg)}
.svc.main .tx b{color:var(--accent-2)}
.svc .ic{background:var(--accent-tint);color:var(--accent)}
.svc .tx b,.tile b,.sheet-box b,.stephead b,.review>b,h1{font-family:var(--font-display)}
.stephead .num{background:var(--accent);color:var(--accent-fg);font-family:var(--font-body)}
.stepcard.done{border-color:transparent}
.btn-p{background:var(--fg);color:var(--phone);box-shadow:none;border-radius:999px;padding:15px 16px}
:root[data-theme="night"] .btn-p{background:linear-gradient(180deg,var(--gold-2),var(--gold-3));color:var(--gold-fg)}
.btn-p.big{box-shadow:0 8px 24px rgba(31,27,51,.14)}
.btn-s{border-color:var(--line);color:var(--fg);background:var(--face);border-radius:999px;box-shadow:var(--shadow)}
.linkbtn{color:var(--accent)}
.eyebrow,.kicker,.field .lead,.hint,.catg>em,.vcard em,.qcard em,.mini em,.face em,.fan em,.soulname em,.steps li.cur,.msg .lab{color:var(--accent)}
.steps li.cur{border-bottom-color:var(--accent)}
.steps li.done{border-bottom-color:var(--accent-tint)}
.hint{background:var(--accent-tint);border-color:transparent;color:var(--accent-2)}
.stagebar{border:0;background:var(--accent-tint);box-shadow:none}
.stagebar b{color:var(--accent-2);font-family:var(--font-body)}
.strip{border-bottom:1px solid var(--line);background:var(--phone)}
.toast{background:var(--fg);color:var(--phone);border:0;box-shadow:0 8px 24px rgba(31,27,51,.2)}
.avatar{background:var(--face);border:0;box-shadow:0 6px 18px rgba(31,27,51,.12)}
.avatar svg{width:36px;height:36px}
textarea,.field input,.stepcard input{border-color:var(--line)}
textarea:focus,.field input:focus,.stepcard input:focus{outline:2px solid var(--accent)}
.plan li .row input,.check input,.review .chip.sel{accent-color:var(--accent)}
.review .chip.sel{background:var(--accent);color:var(--accent-fg)}
.fitscale button.on,.traits .seg button.on,.familiar .seg button.on,.psec .chk.on,.moments li.yes{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-2)}
.psec .chk.on::before{border-color:var(--accent);background-color:var(--accent)}
.traits li::before{background:var(--accent);color:var(--accent-fg)}
.meters .bar i,.chkhead::before,.fortune .energy .bar i{background:linear-gradient(90deg,var(--accent),var(--rose))}
.meters-box .kw b,.chkhead .cnt b,.soulintro-line.quote,.psec p b,.fortune .wide:first-child b{color:var(--rose-2)}
.sbox h3::before,.hookqs li::before{background:var(--accent)}
.sbox h3{color:var(--accent-2)}
.sbox.needed blockquote{border-left-color:var(--accent);background:var(--accent-tint)}
.sbox.prem{border-color:var(--lilac-line)}
.dailyline,.soulname b,.soulhero h1,.revealed b,.dailyres b,.face b,.fan b,.pair figcaption b{font-family:var(--font-card)}
.dailyline{color:var(--fg)}
.fortune b{color:var(--fg)}
.fortune .wide{background:linear-gradient(135deg,var(--rose-tint),var(--accent-tint))}
/* 홈 히어로: 밝은 하늘 */
.hero .sky{opacity:.9}
.greet h1{font-size:22px;font-weight:700}
.greet .muted{font-size:14.5px}
/* 시트 */
.sheet-box{border:0;box-shadow:0 -10px 40px rgba(31,27,51,.14);border-radius:24px 24px 0 0}
.sheet-bg{background:rgba(31,27,51,.35)}
/* 대화 중 '진행 단계' 줄은 캐릭터 독 아래 작은 글로 */
.steps{padding-top:6px}
.steps li{border-bottom-width:2px}
@media (prefers-reduced-motion:reduce){.msg,.typing,.charwrap,.charpill .charstate,.charwrap .eye{animation:none}}
.avatar .charwrap{width:100%;height:100%;box-shadow:none;animation:none}
.avatar .charwrap svg{width:38px;height:38px}
.menu-box .charwrap svg{width:28px;height:28px}

/* 홈 히어로 — 밝은 하늘 색 보정(SVG 색은 CSS로 덮는다) */
:root:not([data-theme="night"]) .hero .moon{fill:#F2D16B}
:root:not([data-theme="night"]) .hero .twinkle{fill:#C9A24E}
:root:not([data-theme="night"]) .hero #cardg stop:first-child{stop-color:#FFFFFF}
:root:not([data-theme="night"]) .hero #cardg stop:last-child{stop-color:#F3EFFA}
:root:not([data-theme="night"]) .hero #glow stop:first-child{stop-color:#F2D16B;stop-opacity:.35}
/* 캐릭터 독은 헤더 가운데에 겹쳐 떠 있고(피클), 단계 띠·카드 띠는 흘러간다 */
.top .chardock{display:none;position:absolute;left:50%;transform:translateX(-50%);top:calc(2px + env(safe-area-inset-top,0px));margin:0;padding:0;z-index:7}
body.has-dock .top .chardock{display:flex}
body.has-dock .stagebar,body.has-dock .strip{position:static}
body.has-dock .strip{border-bottom:0;padding-top:4px}
body.has-dock .steps{padding-top:0}
body.has-dock .top .tag{display:none}

/* v0.23.1 — 두 번째 대화 건너뛰기 칩 */
.chip.skip{background:transparent;border-style:dashed;color:var(--accent);box-shadow:none}

/* v0.26.2 — 상담 시작 화면 사전 질문(필수 2칸 + 접힌 선택 3칸 + 짧게 모드 + 기본 별명). 기존 stepcard·chip·linkbtn 토큰 재사용 */
.intakenote{margin:2px 2px -4px;line-height:1.55}
.stephead .opt.req{color:var(--accent);border-color:var(--lilac-line)}
.quickrow{display:flex;flex-direction:column;align-items:flex-end;gap:0;margin:-6px -4px -4px 0}
.quickrow .linkbtn{align-self:flex-end;padding:4px 4px;min-height:32px}
.quickrow .tiny{text-align:right;margin:-4px 4px 0}
.stepcard.iq input{font-size:15px}
.stepcard.iq textarea{min-height:84px}
#stepText textarea{min-height:120px}
details.guide{font-size:13px;color:var(--muted)}
details.guide summary{cursor:pointer;color:var(--accent);min-height:32px;display:flex;align-items:center}
details.guide p{margin:4px 0 0;line-height:1.6}
.moretoggle{border-style:dashed;color:var(--accent);border-color:var(--lilac-line);background:transparent;min-height:46px}
.moregroup{display:flex;flex-direction:column;gap:14px}
.chip.skip.sel{background:var(--accent-tint);color:var(--accent);border-style:solid;border-color:var(--lilac-line)}
.nickrow{display:flex;gap:8px;align-items:center}
.nickrow input{flex:1;min-width:0}
.nickrow .btn-s.small{width:auto;flex:none;min-height:40px;padding:0 14px}
.stepcard .nicknote{text-align:left;margin:-4px 0 0}
.nickbox .nickrow input{font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--fg)}
.nickbox .tiny{text-align:left;margin-top:8px}