:root{
  --bg:#0a0d12; --panel:#11161e; --frame:#2c3642; --green:#3ee87a; --amber:#f2c05c;
  --red:#ff5a52; --white:#e4e9ee; --muted:#8794a0; --purple:#b388ff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  --ui:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;background:#05070a;color:var(--white);font-family:var(--ui);}
body{min-height:100dvh;}
.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);position:relative;}
.bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#0e131b;border-bottom:1px solid var(--frame);flex:0 0 auto;}
.dot{width:11px;height:11px;border-radius:50%;}
.dot.r{background:#ff5f56;}.dot.y{background:#ffbd2e;}.dot.g{background:#27c93f;}
.bartitle{color:var(--muted);font-size:12px;font-family:var(--mono);margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.counter{margin-left:auto;color:var(--green);font-size:12px;font-family:var(--mono);}

.game{flex:1;display:flex;flex-direction:column;min-height:0;}
.hidden{display:none!important;}

/* ===== 퀴즈 ===== */
.quiz{flex:1;display:flex;flex-direction:column;min-height:0;padding:20px 18px;gap:18px;}
.qtop{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.qnum{color:var(--amber);font-family:var(--mono);font-size:13px;font-weight:700;white-space:nowrap;}
.qbarwrap{flex:1;height:8px;background:#0a0f16;border:1px solid var(--frame);border-radius:6px;overflow:hidden;}
.qbar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--amber));transition:width .35s ease;}
.qtext{font-size:24px;font-weight:800;line-height:1.4;word-break:keep-all;margin-top:6px;flex:0 0 auto;}
.opts{display:flex;flex-direction:column;gap:11px;flex:1;justify-content:center;}
.opt{font-family:var(--ui);font-size:17px;text-align:left;background:var(--panel);color:var(--white);
  border:1px solid var(--frame);border-radius:14px;padding:17px 18px;cursor:pointer;transition:transform .08s,border-color .15s,background .15s;}
.opt:hover{border-color:var(--green);}
.opt:active{transform:scale(.98);}
.opt.sel{border-color:var(--green);background:#16361f;color:#d6ffe4;}
.opt:disabled{opacity:.55;}
.opt.sel:disabled{opacity:1;}
.qhint{color:var(--muted);font-size:12px;font-family:var(--mono);text-align:center;flex:0 0 auto;}
.qin .qtext{animation:slidein .3s ease;}
.qin .opt{animation:slidein .3s ease backwards;}
.qin .opt:nth-child(2){animation-delay:.04s;}.qin .opt:nth-child(3){animation-delay:.08s;}.qin .opt:nth-child(4){animation-delay:.12s;}
@keyframes slidein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ===== 오버레이 ===== */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,10,.94);z-index:10;padding:22px;text-align:center;overflow-y:auto;}
.overlay.hidden{display:none;}
.ov-card{max-width:430px;width:100%;display:flex;flex-direction:column;gap:14px;margin:auto;}
.logo{font-size:48px;}
.logo.spin{animation:spin 1.4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.bigtitle{font-size:32px;font-weight:900;color:var(--amber);}
.tagline{color:var(--white);font-size:17px;line-height:1.6;}
.tagline b{color:var(--green);}
.howto{color:var(--muted);font-size:13px;}
.reveal{color:var(--muted);font-size:12px;font-family:var(--mono);margin-top:6px;}
.reveal b{color:var(--green);}.reveal.small{margin-top:16px;}
.anlines{margin-top:8px;min-height:120px;text-align:left;max-width:280px;margin-left:auto;margin-right:auto;}
.anl{color:var(--green);font-family:var(--mono);font-size:14px;margin:7px 0;animation:slidein .3s ease;}

.btn{font-family:var(--ui);font-size:15px;cursor:pointer;background:transparent;color:var(--white);
  border:1px solid var(--frame);border-radius:12px;padding:14px 18px;text-decoration:none;display:inline-block;text-align:center;}
.btn.key{border-color:var(--green);color:var(--green);}
.btn.big{font-size:17px;padding:15px 24px;width:100%;}

/* ===== 결과 카드 ===== */
.result{gap:10px;}
.result .rh{color:var(--green);font-family:var(--mono);font-size:14px;}
.rtitle{font-size:28px;font-weight:900;color:var(--amber);line-height:1.3;}
.agebox{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:6px 0;}
.agelbl{color:var(--muted);font-size:14px;}
.agenum{font-size:60px;font-weight:900;color:var(--green);font-family:var(--mono);line-height:1;}
.ageunit{font-size:24px;color:var(--green);}
.mbti{color:var(--purple);font-size:16px;font-weight:700;}
.inslist{display:flex;flex-direction:column;gap:7px;text-align:left;background:var(--panel);border:1px solid var(--frame);border-radius:14px;padding:14px 16px;margin-top:6px;}
.ins{font-size:15px;line-height:1.45;}
.rverdict{color:var(--muted);font-size:14px;line-height:1.6;margin-top:8px;}
.hit{color:var(--amber);font-size:13px;margin-top:10px;}

/* ===== 공유 페이지 ===== */
.sharepage{align-items:center;justify-content:flex-start;gap:16px;padding:20px;}
.sharecard{background:var(--panel);border:1px solid var(--frame);border-radius:18px;padding:24px;width:100%;max-width:460px;}
.sc-h{color:var(--green);font-family:var(--mono);font-size:14px;}
.sc-title{font-size:28px;font-weight:900;color:var(--amber);margin:8px 0 10px;line-height:1.3;}
.sc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.sc-meta .age{color:var(--green);font-weight:700;font-size:15px;}
.sc-meta .mbti{color:var(--purple);font-size:15px;}
.sc-ins{display:flex;flex-direction:column;gap:8px;}
.sc-ins .ins{font-size:15px;line-height:1.45;}
.sc-verdict{color:var(--muted);font-size:15px;line-height:1.6;margin-top:14px;}