/* Layout: one narrow column that swaps between three screens — intro, question card, result sheet */
:root{
  --bg:#F2F0F6; --surface:#FFFFFF; --ink:#221A2C; --muted:#6D6478; --line:#DDD8E5;
  --accent:#E0445A; --accent-ink:#FFFFFF; --soft:#FBE3E7; --teal:#23867C; --teal-soft:#DDF1EE;
  --display:"Do Hyeon","Noto Sans KR",system-ui,sans-serif;
  --body:"Noto Sans KR",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#17131D; --surface:#221C2A; --ink:#F1ECF6; --muted:#A79FB2; --line:#382F42;
  --accent:#F2657A; --accent-ink:#1A0F14; --soft:#3A1F28; --teal:#5CC4B8; --teal-soft:#1B3431; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#17131D; --surface:#221C2A; --ink:#F1ECF6; --muted:#A79FB2; --line:#382F42;
  --accent:#F2657A; --accent-ink:#1A0F14; --soft:#3A1F28; --teal:#5CC4B8; --teal-soft:#1B3431; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;padding-inline:16px;padding-block:24px 48px}
.wrap{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.2}
p{margin:0}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:500}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn{background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:16px;font-weight:700;font-size:17px;width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn:active{transform:scale(.98)}

/* intro */
.hero{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.hero h1{font-size:44px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{color:var(--muted);font-size:16px}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;padding:5px 11px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px;background:var(--surface);border-radius:20px;border:1px solid var(--line)}
.cast .mini{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--muted);text-align:center;line-height:1.3}

/* avatar */
.av{width:52px;height:52px;border-radius:50% 50% 46% 54%/55% 50% 50% 45%;display:grid;place-items:center;font-family:var(--display);font-size:22px;color:#fff;flex:none}
.av.big{width:112px;height:112px;font-size:48px}

/* quiz */
.top{display:flex;align-items:center;gap:12px}
.bar{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.count{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted);min-width:44px;text-align:right}
.back{font-size:14px;color:var(--muted);padding:6px 0}
.q{font-size:28px;padding:28px 4px 8px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px;font-size:16px;display:flex;gap:14px;align-items:flex-start;transition:border-color .15s,background .15s}
.opt b{font-family:var(--display);font-weight:400;color:var(--accent);font-size:20px;line-height:1.2}
.opt:hover{border-color:var(--accent)}
.opt.picked{border-color:var(--accent);background:var(--soft)}

/* result */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px 22px;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.sheet .code{font-size:13px;letter-spacing:.14em;color:var(--muted);font-weight:500}
.sheet h2{font-size:34px}
.sheet .one{color:var(--muted)}
.axes{width:100%;display:flex;flex-direction:column;gap:12px;text-align:left}
.axis .lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.axis .lbl span.on{color:var(--ink);font-weight:700}
.axis .track{height:10px;background:var(--line);border-radius:99px;position:relative;margin-top:4px}
.axis .track i{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:99px}
.block{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px}
.block h3{font-size:22px}
.block ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pairc{border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.pairc.good{background:var(--teal-soft)}
.pairc.bad{background:var(--soft)}
.pairc small{font-size:12px;font-weight:700;letter-spacing:.04em}
.pairc.good small{color:var(--teal)}
.pairc.bad small{color:var(--accent)}
.pairc strong{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.25}
.picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:12px;border:1.5px solid transparent;font-size:11px;color:var(--muted);line-height:1.25}
.pk .av{width:40px;height:40px;font-size:17px}
.pk.sel{border-color:var(--accent);background:var(--soft);color:var(--ink)}
.compat{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.score{display:flex;align-items:baseline;gap:6px}
.score b{font-family:var(--display);font-weight:400;font-size:48px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.score span{color:var(--muted)}
.note{font-size:14px;color:var(--muted)}
.ad{border:1.5px dashed var(--line);border-radius:14px;padding:18px;text-align:center;font-size:13px;color:var(--muted)}
.row{display:flex;gap:10px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.nav{display:flex;justify-content:space-between;align-items:center;max-width:460px;margin:0 auto 8px}
.logo{font-family:var(--display);font-size:22px;color:var(--ink);text-decoration:none}
.logo span{color:var(--accent)}
.nav a.sm{font-size:14px;color:var(--muted);text-decoration:none}
footer{max-width:460px;margin:40px auto 0;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{color:var(--muted)}
.doc h1{font-size:32px}
.doc h2{font-size:22px;margin-top:8px}
.doc p,.doc li{color:var(--ink)}
.doc .muted{color:var(--muted);font-size:14px}
.tlist{display:flex;flex-direction:column;gap:10px}
.trow{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;text-decoration:none;color:var(--ink)}
.trow div{min-width:0}
.trow strong{font-family:var(--display);font-weight:400;font-size:20px;display:block}
.trow small{color:var(--muted);font-size:13px}
a.btn{display:block;text-align:center;text-decoration:none}
.shot{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px;z-index:10}
.shot .box{background:var(--surface);border-radius:20px;padding:16px;max-width:380px;width:100%;display:flex;flex-direction:column;gap:12px;text-align:center}
.shot img{border-radius:12px;width:100%}

.hub h1{font-size:40px}
.hub h1 em{font-style:normal;color:var(--accent)}
.cards{display:flex;flex-direction:column;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--accent)}
.card h2{font-size:26px}
.card p{color:var(--muted)}
.faces{display:flex;gap:6px;flex-wrap:wrap}
.faces .av{width:30px;height:30px;font-size:14px}
.faces{gap:5px}
h1,h2,h3,p,li{word-break:keep-all}
.card .go{font-weight:700;color:var(--accent)}
.card.soon{opacity:.6;border-style:dashed}
.invite{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:16px;padding:14px}
.invite div{display:flex;flex-direction:column;min-width:0}
.invite small{color:var(--muted);font-size:13px}
.sharebox{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px}
.sharebox h3{font-size:22px}
.btn.kakao{background:#FEE500;color:#191600}
.btn.soft{background:var(--soft);color:var(--accent)}
.row .btn{flex:1}
.rklist{display:flex;flex-direction:column;gap:8px}
.rk{display:grid;grid-template-columns:18px 34px 1fr 70px 26px;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:14px}
.rk .n{color:var(--muted);font-variant-numeric:tabular-nums}
.rk .av{width:34px;height:34px;font-size:15px}
.rk .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .sbar{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.rk .sbar i{display:block;height:100%;background:var(--accent)}
.rk .sc{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.compat.hl{border-top:0;padding-top:0}
.link{color:var(--accent);font-weight:700;text-decoration:none}
a.mini{text-decoration:none}
a.pairc{text-decoration:none;color:inherit}