/* 디자인 핸드오프(피부 근거표 v2) 토큰 + broadsheet 디자인 시스템에서 쓰는 컴포넌트만 옮김 */
[data-theme]{--font-heading:Pretendard,"Noto Sans KR",system-ui,sans-serif;--font-body:Pretendard,"Noto Sans KR",system-ui,sans-serif;--font-heading-weight:700;font-family:var(--font-body);word-break:keep-all;letter-spacing:-0.01em;
--color-bg:#F4F6F9;--color-surface:#FFFFFF;--color-text:#1F2A38;--color-heading:#002858;--color-accent:#1850B0;--color-accent-2:#D6141D;--color-divider:#E1E6EE;
--color-neutral-100:#F4F6F9;--color-neutral-200:#EDF1F6;--color-neutral-300:#E1E6EE;--color-neutral-400:#C9D3E0;--color-neutral-500:#A3AEBD;--color-neutral-600:#7C8797;--color-neutral-700:#5A6472;--color-neutral-800:#3A4655;--color-neutral-900:#1F2A38;
--color-accent-100:#EDF3FB;--color-accent-200:#D9E5F7;--color-accent-300:#B5CBEE;--color-accent-400:#7FA2DE;--color-accent-500:#4A78CC;--color-accent-600:#2A5FBF;--color-accent-700:#1850B0;--color-accent-800:#002858;--color-accent-900:#001A3B;
--color-accent-2-100:#FDECEC;--color-accent-2-700:#B0101A;--color-accent-2-800:#8A0C14;
--warn-100:#FDF3E6;--warn-600:#E8912A;--warn-800:#975608;
--radius-sm:6px;--radius-md:10px;--radius-lg:12px;--space-1:5px;--space-2:10px;--space-3:15px;
--shadow-md:0 1px 3px rgba(0,40,88,.06),0 6px 24px rgba(0,40,88,.06);--shadow-lg:0 -4px 32px rgba(0,40,88,.14)}
[data-theme="dark"]{--color-bg:#0E141D;--color-surface:#172030;--color-text:#E4E9F0;--color-heading:#F1F4F8;--color-accent:#5B8DEF;--color-accent-2:#FF6B6B;--color-divider:#263246;
--color-neutral-100:#121A26;--color-neutral-200:#1E2938;--color-neutral-300:#2B3748;--color-neutral-400:#3E4B5E;--color-neutral-500:#5E6B7E;--color-neutral-600:#8994A4;--color-neutral-700:#A9B3C1;--color-neutral-800:#CBD2DC;--color-neutral-900:#E4E9F0;
--color-accent-100:#15233A;--color-accent-200:#1C3256;--color-accent-300:#27467A;--color-accent-400:#3A62A8;--color-accent-500:#4B78CF;--color-accent-600:#7AA3F3;--color-accent-700:#8FB2F5;--color-accent-800:#C9DAFB;--color-accent-900:#E7EFFE;
--color-accent-2-100:#3A1518;--color-accent-2-700:#FF9C9C;--color-accent-2-800:#FFC9C9;
--warn-100:#33240F;--warn-600:#F0A24A;--warn-800:#F7C98F;
--shadow-md:0 0 0 1px #1E2938;--shadow-lg:0 -4px 32px rgba(0,0,0,.6)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--color-neutral-200,#EDF1F6);-webkit-font-smoothing:antialiased}
body:has([data-theme="dark"]){background:#1E2938}
a{color:var(--color-accent);text-decoration:none}
[data-theme] h1,[data-theme] h2,[data-theme] h3{color:var(--color-heading);letter-spacing:-0.02em;font-family:var(--font-heading)}
[data-theme] h1{font-weight:800}
@keyframes dcLoad{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes dcUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:14px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:var(--space-2) calc(var(--space-3)*1.2);border-radius:var(--radius-md)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--color-accent);color:var(--color-bg)}
.btn-primary:hover{background:var(--color-accent-600)}
.btn-secondary{border-color:var(--color-divider)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn-ghost{color:var(--color-accent);padding-inline:var(--space-1)}
.btn-ghost:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.input{width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;color:var(--color-text);caret-color:var(--color-accent);background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.input::placeholder{color:color-mix(in srgb,var(--color-text) 65%,transparent);opacity:1}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--color-surface)}
.card-kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:calc(var(--radius-md)*.75)}
.tag-accent{background:var(--color-accent-100);color:var(--color-accent-800)}
.tag-neutral{background:var(--color-neutral-100);color:var(--color-neutral-800)}
.seg{display:inline-flex;overflow:hidden;border:1px solid var(--color-divider);border-radius:var(--radius-md)}

/* 앱 골격 */
.root{min-height:100vh;color:var(--color-text);font-size:15px;line-height:1.6}
.frame{width:100%;max-width:440px;margin:0 auto;min-height:100vh;background:var(--color-bg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;position:relative}
.top{display:flex;align-items:center;gap:8px;padding:8px 12px 0 8px;min-height:56px}
.top .title{font-family:var(--font-heading);font-weight:700;color:var(--color-heading);font-size:15px;flex:1}
.top .step{white-space:nowrap;font-size:12px;color:var(--color-neutral-700);padding-right:8px}
main{flex:1;display:flex;flex-direction:column;padding:16px 20px 24px}
.dock{position:sticky;bottom:0;background:var(--color-bg);padding:12px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.disclaimer{position:sticky;bottom:0;background:var(--color-surface);padding:12px 20px calc(16px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--color-neutral-800)}
.muted{color:var(--color-neutral-700)}
.small{font-size:13px}
.xs{font-size:12px}
.col{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{display:flex;flex-wrap:wrap}
.h1{font-size:27px;line-height:1.3;margin:0;text-wrap:pretty}
.h2{font-size:19px;margin:0}
.h2b{font-size:21px;margin:0}
.big{min-height:52px;font-size:16px;width:100%}
.chip{font:inherit;font-size:15px;min-height:44px;padding:0 14px;cursor:pointer;border-radius:var(--radius-md);border:1.5px solid var(--color-divider);background:var(--color-surface);color:var(--color-text);display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{border-color:var(--color-accent);background:var(--color-accent-100)}
.choice{font:inherit;font-size:15px;min-height:44px;cursor:pointer;border-radius:var(--radius-md);border:1px solid var(--color-divider);background:transparent;color:var(--color-text);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.choice[aria-checked="true"],.choice[aria-pressed="true"],.choice[aria-selected="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.concern{display:inline-flex;align-items:center;min-height:44px;border-radius:var(--radius-md);border:1.5px solid var(--color-divider);background:var(--color-surface)}
.concern.ranked{border-color:var(--color-accent);background:var(--color-accent-100)}
.concern button{font:inherit;color:var(--color-text);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.rank{width:22px;height:22px;border-radius:50%;background:var(--color-accent-800);color:var(--color-bg);font-size:12px;font-weight:600;display:inline-grid;place-items:center}
.addbtn{width:44px;height:44px;cursor:pointer;border-radius:var(--radius-md);border:1.5px dashed var(--color-neutral-500);background:none;color:var(--color-accent-700);display:grid;place-items:center}
.qcard{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:18px;gap:12px}
.qtitle{font-family:var(--font-heading);font-weight:700;color:var(--color-heading);font-size:17px;line-height:1.4}
.grade{flex:none;white-space:nowrap;font:inherit;font-size:12px;font-weight:600;min-height:32px;min-width:44px;padding:0 9px;cursor:pointer;border-radius:var(--radius-md);display:inline-flex;align-items:center;gap:4px;border:1.5px solid}
.grade-A{background:var(--color-accent-800);color:var(--color-bg);border-color:var(--color-accent-800)}
.grade-B{background:var(--color-accent-200);color:var(--color-accent-900);border-color:var(--color-accent-500)}
.grade-C{background:transparent;color:var(--color-neutral-800);border-color:var(--color-neutral-500)}
.warnchip{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:4px 10px;border-radius:var(--radius-sm);background:var(--warn-100);color:var(--warn-800)}
.note-warn{display:flex;gap:12px;padding:16px;border-radius:var(--radius-lg);background:var(--warn-100);border:1px solid var(--warn-600)}
.note{display:flex;gap:12px;padding:16px;border-radius:var(--radius-lg);background:var(--color-surface)}
.kicker{font-size:12px;font-weight:600;letter-spacing:.04em}
.linkbtn{font:inherit;font-size:14px;font-weight:600;background:none;border:0;padding:0;min-height:36px;cursor:pointer;text-align:left;display:inline-flex;align-items:center;gap:4px;align-self:flex-start}
.day{width:22px;height:22px;font-size:11px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--color-neutral-200);color:var(--color-neutral-700)}
.day.on{background:var(--color-accent-700);color:var(--color-bg)}
.icard{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:18px;gap:12px}
.iname{font-family:var(--font-heading);font-weight:700;color:var(--color-heading);font-size:19px;line-height:1.3}
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:var(--color-text);color:var(--color-bg);font-size:14px;padding:10px 16px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:30;white-space:nowrap}
.scrim{position:fixed;inset:0;background:color-mix(in srgb,#000 45%,transparent);z-index:20}
.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;max-height:86vh;overflow-y:auto;background:var(--color-bg);border-radius:12px 12px 0 0;box-shadow:var(--shadow-lg);z-index:21;animation:dcUp .22s ease-out}
.ptype{font-size:11px;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--color-neutral-500);color:var(--color-neutral-800)}
.ptype.strong{background:var(--color-accent-800);color:var(--color-bg);border-color:var(--color-accent-800)}
.ptype.mid{background:var(--color-accent-100);color:var(--color-accent-800);border-color:var(--color-accent-400)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}