/* BABYLON — 디오라 톤(라이트 기본·베이지/골드·Noto Sans). 다크=텍스트 토글. */
:root{
  --bg:#faf8f2; --surf:#ffffff; --surf2:#fbf6ea; --ink:#1e1e1e; --ink2:#333333;
  --muted:#6a6355; --faint:#9a9284; --line:#e8e1d0; --gold:#b8901e; --goldH:#9c7a14;
  --goldL:#f2d478; --good:#2f8a56; --bad:#c0493f;
  --shadow:0 1px 3px rgba(60,45,10,.09); --shadow2:0 2px 10px rgba(60,45,10,.10);
}
:root[data-theme="dark"]{
  --bg:#1a1813; --surf:#24211a; --surf2:#2c2820; --ink:#f3efe4; --ink2:#e2dccd;
  --muted:#a89f8b; --faint:#847c6a; --line:#3a352a; --gold:#e6b655; --goldH:#f2d478;
  --goldL:#e6b655; --good:#5bbd84; --bad:#e2867c;
  --shadow:0 1px 3px rgba(0,0,0,.3); --shadow2:0 2px 12px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.5; -webkit-text-size-adjust:100%; word-break:keep-all;
}
#app{max-width:460px;margin:0 auto;padding:0 16px calc(36px + env(safe-area-inset-bottom))}
.ic{width:1.2em;height:1.2em;vertical-align:-.17em;display:inline-block}

/* 헤더 */
.hd{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 10px}
.bl{display:flex;align-items:center;gap:8px;color:var(--gold)}
.bl .mark{width:22px;height:22px}
.bn{font-size:17px;font-weight:800;letter-spacing:1.5px;color:var(--ink)}
.txtbtn{background:none;border:none;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:8px}
.txtbtn:hover{color:var(--goldH)}
.txtbtn.ctr{display:block;margin:10px auto 0}
.txtbtn.sm2{font-size:12px}

/* 히어로 */
.hero{text-align:center;margin:6px 0 16px}
.hero.sm{margin:4px 0 12px}
.htitle{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.hsub{font-size:13px;color:var(--muted);margin-top:4px}

/* 카드 */
.card{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:18px 16px;box-shadow:var(--shadow)}
.label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px}
.label .sub{font-size:11.5px;font-weight:500;color:var(--faint);margin-left:7px}
.mt{margin-top:17px}

/* 모드 */
.modes{display:flex;gap:9px}
.mode{flex:1;text-align:left;background:var(--surf2);border:1px solid var(--line);border-radius:12px;padding:13px;cursor:pointer;color:var(--ink);font-family:inherit;transition:.12s}
.mode.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.mt2{font-size:15px;font-weight:800}
.md{font-size:11.5px;color:var(--muted);margin-top:3px}

/* 칩 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:var(--surf2);color:var(--muted);font-family:inherit;transition:.12s}
.chip.on{border-color:var(--gold);background:var(--surf);color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.cc{font-size:10.5px;font-weight:800;letter-spacing:.5px;color:var(--goldH);background:color-mix(in srgb,var(--gold) 16%,transparent);border-radius:5px;padding:1px 5px}
.chip.on .cc{color:var(--gold)}
.muted-x{font-size:10px;color:var(--bad);font-weight:700;margin-left:2px}

/* 버튼 */
.primary{width:100%;padding:15px;border:none;border-radius:12px;background:var(--gold);color:#241a04;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit}
.primary:hover{background:var(--goldH)}
.primary.sm{width:auto;padding:0 20px;font-size:15px}
.ghost{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surf);color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.note{margin-top:11px;font-size:12px;color:var(--ink2);background:var(--surf2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:9px 11px}
.life{text-align:center;font-size:12px;color:var(--muted);margin:14px 2px 0}
.tip{font-size:12px;color:var(--faint);line-height:1.6;margin:16px 4px 0;padding-top:14px;border-top:1px solid var(--line)}

/* 드릴 */
.topbar{display:flex;justify-content:space-between;margin-bottom:8px}
.sbar{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:12px;padding:0 2px}
.sbar b{color:var(--ink)} .sbar .g{color:var(--goldH)}
.drill{display:flex;flex-direction:column;align-items:stretch}
.badge{align-self:center;display:inline-flex;align-items:center;gap:7px;background:var(--surf2);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:700;padding:5px 14px;border-radius:14px;margin-bottom:14px}
.bigbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surf2);color:var(--ink);font-size:17px;font-weight:800;cursor:pointer;font-family:inherit}
.bigbtn .ic{width:23px;height:23px}
.bigbtn:hover{border-color:var(--gold)}
.bigbtn.live{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,var(--surf));animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.inrow{display:flex;gap:9px;margin-top:12px}
.inrow .ghost,.inrow .primary{flex:1;width:auto}
.inrow .bigbtn{flex:1;font-size:15px;padding:15px;gap:7px}
.inrow .bigbtn .ic{width:20px;height:20px}
.inrow .ghost[disabled]{opacity:.45;cursor:default}
.scount{font-size:12px;color:var(--muted);font-weight:600;align-self:center}
.heard .ok{color:var(--good);font-weight:700}
.heard .no{color:var(--bad);font-weight:700}
.inrow2{display:flex;justify-content:center;gap:14px;margin-top:11px;flex-wrap:wrap}
input{flex:1;min-width:0;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--surf);color:var(--ink);font-size:19px;text-align:center;font-weight:700;font-family:inherit}
input:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.bignum{text-align:center;font-size:76px;font-weight:800;color:var(--goldH);line-height:1.05;margin:4px 0 2px;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .bignum{color:var(--gold)}
.askmini{text-align:center;font-size:13.5px;color:var(--muted);margin-bottom:14px}
.askmini b{color:var(--ink)}
.heard{text-align:center;font-size:13px;color:var(--muted);margin-top:11px}
.heard b{color:var(--ink);font-weight:700}

/* 피드백 */
.fb{text-align:center;padding:14px;border-radius:12px;margin-top:4px;border:1px solid var(--line)}
.fb.good{background:color-mix(in srgb,var(--good) 10%,var(--surf));border-color:var(--good)}
.fb.bad{background:color-mix(in srgb,var(--bad) 10%,var(--surf));border-color:var(--bad)}
.fb.self{background:var(--surf2)}
.fbhead{display:flex;align-items:center;justify-content:center;gap:7px;font-size:15px;font-weight:800}
.fbhead .ic{width:20px;height:20px}
.fb.good .fbhead{color:var(--good)} .fb.bad .fbhead{color:var(--bad)} .fb.self .fbhead{color:var(--muted)}
.fbn{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:3px}
.reveal{margin-top:11px;display:flex;flex-direction:column;gap:6px;text-align:left}
.rv{display:flex;align-items:baseline;gap:10px;background:var(--surf);border:1px solid var(--line);border-radius:9px;padding:8px 11px}
.rvk{flex:0 0 40px;font-size:11px;font-weight:700;color:var(--muted)}
.rvv{font-size:15px;font-weight:600;color:var(--ink);word-break:break-word;flex:1}
.rvw{font-weight:700}
.fbrt{font-size:11.5px;color:var(--muted);margin-top:3px}
.ratebar{display:flex;justify-content:flex-end;margin-top:14px}

/* 결과 */
.result{text-align:center;font-size:14px;color:var(--ink);line-height:1.7}
.result b{color:var(--goldH)}
.prow{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--surf2);border:1px solid var(--line);border-radius:10px;margin-top:7px;font-size:13px}
.prow .cc{margin-right:6px}
.prow b{color:var(--ink)} .prow .muted{color:var(--muted)}

/* 스크롤바(디오라 골드) */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--goldH)}