/* 차트가 먼저, 질문 바가 바로 아래, 점수는 헤더에. 트레이딩 터미널 느낌의 단일 다크 테마.
   글꼴: 본문·제목은 self-host Pretendard(메인 사이트와 통일), 숫자·라벨은 시스템 고정폭.
   외부 글꼴 요청이 없어야 CSP를 'self'로 유지할 수 있다. */
:root{
  --bg:#0e1116; --panel:#151a21; --line:#242b35; --fg:#e7eaef; --muted:#8b95a4;
  --accent:#f2b84b; --up:#26a69a; --down:#ef5350; --flat:#7f8ea3;
  --display:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 48px}
.wrap{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(24px,4vw,34px);margin:2px 0 0;line-height:1.2;text-wrap:balance}
.score{display:flex;gap:18px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.score div{display:flex;flex-direction:column;align-items:flex-end}
.score span{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.score b{font-size:22px;font-weight:500}
.chartbox{position:relative;height:440px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--bg)}
#chart{position:absolute;inset:0}
.meta{position:absolute;left:12px;top:10px;z-index:3;font-family:var(--mono);font-size:12px;color:var(--muted);pointer-events:none}
.meta b{color:var(--fg);font-weight:500;margin-right:8px}
.question{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px}
.q{margin:0;font-weight:600}
.q small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.answers{display:flex;flex-wrap:wrap;gap:10px}
button{font-family:var(--body);font-size:15px;color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:10px 18px;border-radius:4px;cursor:pointer;min-width:96px}
button:hover:not(:disabled){border-color:var(--muted)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.45;cursor:default}
.a-up{border-color:color-mix(in srgb,var(--up) 55%,var(--line))}
.a-down{border-color:color-mix(in srgb,var(--down) 55%,var(--line))}
.picked{outline:2px solid var(--fg);outline-offset:2px;opacity:1!important}
.primary{background:var(--accent);color:#16120a;border-color:var(--accent);font-weight:600}
.result{margin:0;min-height:1.6em;font-variant-numeric:tabular-nums}
.ok{color:var(--up)} .no{color:var(--down)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px;color:var(--muted)}
.tools label{display:flex;gap:6px;align-items:center;cursor:pointer}
@media (max-width:560px){.chartbox{height:340px}}