/* 관 시리즈 웹테스트 공용 스타일 — 배포 전 각 모듈 폴더로 복사 (web/README.md) */

:root{
  --bg:#17181A; --surface:#212226; --tint:#26272B; --line:#2E2F33;
  --ink:#F4F2EF; --body:#C6C3BE; --muted:#8A8781;
  --rasp:#FE4365; --salmon:#FC9D9A; --champ:#F9CDAD; --green:#83AF9B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;line-height:1.6;min-height:100dvh}
.wrap{max-width:480px;margin:0 auto;padding:24px 20px 48px;min-height:100dvh;display:flex;flex-direction:column}
.brand{font-weight:800;letter-spacing:-.02em;font-size:20px;color:var(--rasp)}
.brand small{font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.04em;display:block;margin-top:2px}
h1{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.25;margin:28px 0 12px}
.sub{color:var(--body);font-size:15px}
.caption{color:var(--muted);font-size:12.5px;line-height:1.6}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border:0;border-radius:14px;background:var(--rasp);color:#fff;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .1s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--salmon);height:46px;font-size:14.5px}
.btn.line{background:transparent;border:1.5px solid var(--line);color:var(--ink);height:48px;font-size:14.5px}
.btn[disabled]{background:var(--line);color:var(--muted);cursor:default}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}
.tag{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;border:1.5px solid currentColor}
.progress{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin:20px 0 8px}
.progress i{display:block;height:100%;background:var(--rasp);border-radius:3px;transition:width .25s}
.qtext{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.45;margin:20px 0 30px;min-height:96px}
.slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--line);outline:none;margin:18px 0 10px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--rasp);border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--rasp);cursor:pointer}
.slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--rasp);border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--rasp);cursor:pointer}
.polar{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:16px}
.meaning{text-align:center;font-size:15.5px;font-weight:700;color:var(--ink);min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:20px}
.axisrow{margin-bottom:14px}
.axisrow .lab{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.axisrow .bar{height:8px;background:var(--line);border-radius:4px;position:relative}
.axisrow .bar i{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.axisrow.core .bar i{background:var(--rasp)}
.sec{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:26px 0 10px}
.li{display:flex;gap:10px;font-size:14.5px;color:var(--body);margin-bottom:8px}
.li b{color:var(--rasp);font-weight:800;flex:none}
footer{margin-top:auto;padding-top:32px;text-align:center}
.hidden{display:none}
.fade{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.typecode{font-size:52px;font-weight:800;letter-spacing:.02em;margin:14px 0 2px}
.typenick{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.figure{color:var(--muted);font-size:13px;margin-top:8px}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1}