:root{
    --bg:#F6F7F9; --card:#FFFFFF; --line:#E6E8EE; --line2:#D7DAE2;
    --text:#181B22; --muted:#5C6270; --faint:#767C89;
    --accent:#2563EB; --accent-2:#3B82F6; --good:#15803D; --bad:#DC2626; --amber:#B45309;
    --shadow:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  body{
    background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
    display:flex; justify-content:center; padding:0 12px 48px; user-select:none;
  }
  .num{font-variant-numeric:tabular-nums;}
  .wrap{width:100%; max-width:820px;}

  .site{display:flex; align-items:center; gap:9px; padding:16px 2px 14px;
    border-bottom:1px solid var(--line); margin-bottom:18px;}
  .site .mark{width:20px; height:20px; flex-shrink:0; display:block;}
  .site .brand{font-weight:800; font-size:15px; letter-spacing:.01em;}
  .site .sep{color:var(--line2);}
  .site .crumb{font-size:13px; color:var(--muted);}
  .site .right{margin-left:auto; font-size:12px; color:var(--faint);}

  .head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:12px; gap:12px;}
  h1{font-size:20px; font-weight:800;}
  h1 small{display:block; font-size:12px; font-weight:500; color:var(--muted); margin-top:3px;}
  .tier{text-align:right; min-width:150px;}
  .tier .tn{font-size:15px; font-weight:800;}
  .tier .rp{font-size:12px; color:var(--muted); margin-left:6px;}
  .tier .bar{height:5px; background:var(--line); border-radius:3px; margin-top:6px; overflow:hidden;}
  .tier .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:3px; width:0%; transition:width .3s ease;}
  .tier .nxt{font-size:10px; color:var(--muted); margin-top:4px;}

  .stage{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#151922; box-shadow:var(--shadow);}
  canvas{display:block; width:100%; height:auto; aspect-ratio:16/9; touch-action:manipulation;}

  .skills{display:flex; gap:8px; margin-top:10px;}
  .skill{position:relative; border-radius:12px; cursor:pointer; overflow:hidden;
    font-family:inherit; padding:12px 6px 11px; touch-action:manipulation;
    display:flex; flex-direction:column; align-items:center; gap:1px;
    transition:transform .04s ease, box-shadow .12s ease;}
  .skill .big{font-size:16px; font-weight:800;}
  .skill .big b{font-size:18px;}
  .skill .sub{font-size:10.5px; opacity:.7; font-weight:500;}
  #btnA{flex:1; background:var(--card); border:1px solid var(--line2); color:var(--text); box-shadow:var(--shadow);}
  #btnQ{flex:1; background:var(--card); border:1px solid var(--line2); color:var(--text); box-shadow:var(--shadow);}
  #btnX{flex:1.6; background:linear-gradient(180deg,#232936,var(--text)); border:1px solid var(--text); color:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.18);}
  .skill:disabled{opacity:.45; cursor:default;}
  .skill:not(:disabled):active{transform:translateY(1px);}
  .cd{position:absolute; inset:0; background:rgba(255,255,255,.88); color:var(--text);
    display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; visibility:hidden;}
  #btnX .cd{background:rgba(24,27,34,.88); color:#fff;}
  .keycap{position:absolute; top:7px; left:9px; font-size:10px; font-weight:700;
    border:1px solid currentColor; opacity:.55; padding:1px 6px; border-radius:5px;}
  .tip{margin-top:9px; font-size:11.5px; color:var(--muted); text-align:center; line-height:1.6;}

  .card{background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:16px; margin-top:12px; box-shadow:var(--shadow);}
  .card h3{font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.08em; margin-bottom:14px;}

  .replay{display:none;} .replay.show{display:block;}
  .tl{position:relative; height:76px; margin:0 8px;}
  .tl-axis{position:absolute; left:0; right:0; top:38px; height:2px; background:var(--line);}
  .tick{position:absolute; top:32px; width:1px; height:14px; background:var(--line2);}
  .tick span{position:absolute; top:16px; left:50%; transform:translateX(-50%); font-size:9px; color:var(--faint);}
  .mk{position:absolute; transform:translateX(-50%); text-align:center;}
  .mk .dot{width:12px; height:12px; border-radius:50%; margin:0 auto; border:2px solid #fff; box-shadow:0 0 0 1px var(--line2);}
  .mk .lb{font-size:10px; font-weight:700; margin-top:3px; white-space:nowrap;}
  .mk.zero{top:31px;} .mk.zero .dot{background:var(--amber);} .mk.zero .lb{color:var(--amber);}
  .mk.me{top:4px;} .mk.me .dot{background:var(--good);} .mk.me .lb{color:var(--good);}
  .mk.q{top:4px;} .mk.q .dot{background:var(--accent);} .mk.q .lb{color:var(--accent);}
  .mk.a{top:4px;} .mk.a .dot{background:#9CA3AF; width:9px; height:9px;} .mk.a .lb{color:#5C6270;}
  .mk.rv{top:52px;} .mk.rv .dot{background:var(--bad);} .mk.rv .lb{color:var(--bad);}
  .verdict{margin-top:26px; text-align:center; font-size:13px; color:var(--muted); line-height:1.75;}
  .verdict b{color:var(--text);}
  .verdict .grade{font-size:15px; font-weight:800; letter-spacing:.06em;}
  .combo-box{margin:14px auto 0; max-width:480px; text-align:left;
    border:1px solid var(--line); border-radius:10px; padding:12px 14px;}
  .combo-box h4{font-size:11px; color:var(--muted); letter-spacing:.06em; margin-bottom:10px;}
  .combo-box .seq{text-align:center; font-size:13.5px; font-weight:800; line-height:1.6;
    margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line);}
  .combo-box .seq b{color:var(--accent); font-weight:800;}
  .combo-box .row{display:flex; justify-content:space-between; font-size:12.5px; padding:3px 0;}
  .combo-box .insight{margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);
    font-size:12px; color:var(--text); line-height:1.65;}
  .promo{margin-top:12px; font-size:14px; font-weight:800; color:var(--accent);}

  .rec-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
  .rec-head h3{margin:0;}
  #btnReset{background:none; border:1px solid var(--line2); color:var(--muted);
    font-size:11px; padding:8px 12px; border-radius:8px; cursor:pointer; font-family:inherit;}
  .rec-sum{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px;}
  .rs{border:1px solid var(--line); border-radius:10px; padding:10px 5px; text-align:center;}
  .rs .n{font-size:10.5px; font-weight:700; color:var(--muted);}
  .rs .wr{font-size:16px; font-weight:800; margin-top:3px;}
  .rs .avg{font-size:10px; color:var(--faint); margin-top:3px;}
  #trend{width:100%; height:auto; aspect-ratio:640/110; display:block; border:1px solid var(--line); border-radius:10px;}
  .rec-note{font-size:11px; color:var(--muted); text-align:center; margin:7px 0 14px; line-height:1.6;}
  .rec-list{display:flex; flex-direction:column;}
  .rr{display:flex; align-items:center; gap:10px; padding:9px 4px; font-size:12.5px; border-top:1px solid var(--line);}
  .rr:first-child{border-top:none;}
  .rr .tm{color:var(--muted); font-size:10.5px; width:70px; flex-shrink:0;}
  .rr .ld{font-size:10.5px; font-weight:700; color:var(--muted); width:64px; flex-shrink:0;}
  .rr .res{font-weight:700; width:44px; flex-shrink:0; font-size:12px;}
  .rr .res.w{color:var(--good);} .rr .res.l{color:var(--bad);}
  .rr .hp{flex:1; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .rr .hp .qv{color:var(--accent);} .rr .hp .xv{color:var(--text);} .rr .hp .none{color:var(--faint); font-weight:500;}
  .rr .ex{color:var(--muted); font-size:11px; flex-shrink:0;}
  .rr .ex .up{color:var(--good); font-weight:700;} .rr .ex .dn{color:var(--bad); font-weight:700;}
  .rec-empty{text-align:center; color:var(--muted); font-size:12px; padding:18px 0;}

  footer{text-align:center; font-size:11px; color:var(--faint); margin-top:16px; line-height:1.7;}

  .promo.demo{color:var(--bad);}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
  .skill:focus-visible{outline-offset:-2px;}
  @media (max-width:380px){
    .rec-sum{grid-template-columns:repeat(2,1fr);}
  }
  @media (orientation:landscape) and (max-height:520px){
    .stage{width:max-content; max-width:100%; margin:0 auto;}
    canvas{max-height:56dvh; width:auto;}
  }
  @media (prefers-reduced-motion:reduce){
    .skill{transition:none;}
    .skill:not(:disabled):active{transform:none;}
    .tier .bar i{transition:none;}
  }