:root{
    --bg:#2e4568; --panel:#121821; --ink:#e8eef9; --muted:#9fb0c8; --brand:#5aa0ff; --accent:#7cffcf;
    --apple:#ff5959; --peach:#ffb36b; --banana:#ffd24d; --strawberry:#ff5fab;
  }
  *{box-sizing:border-box}
  html, body { height: 100%; }
  body { min-height: 100dvh; }

  .wrap{
    min-height: 100svh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    display:flex; flex-direction:column;
  }

  .btn.fs { margin-left:8px; }

  html,body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Pretendard,Apple SD Gothic Neo,Malgun Gothic,sans-serif}
  .wrap{max-width:1000px;margin:0 auto;padding:20px 16px;display:flex;flex-direction:column;gap:16px}
  .card{background:var(--panel);border:1px solid #1e2633;border-radius:16px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .top{display:grid;grid-template-columns:1fr;gap:12px}
  .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  .row label{font-size:1.05rem;color:var(--ink);font-weight:800}
  .spacer{flex:1}
  video{width:100%; height:40px; background:#0f1420; border-radius:10px}
  .meters{display:grid;grid-template-columns:1fr;gap:12px}
  .progress{ position:relative; width:100%; height:12px; background:#0e1520; border-radius:999px; overflow:hidden; border:1px solid #1e2633; }
  .progress .bar{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--brand); transition:width .15s ease}
  .time{display:flex; justify-content:space-between; font-size:.95rem; color:var(--muted)}
  .eq{ height:140px; background:linear-gradient(180deg,#0e141f,#2e4568); border:1px solid #1e2633; border-radius:14px; display:flex; align-items:flex-end; gap:4px; padding:10px 12px; }
  .eq .bar{ position:relative; width:calc((100% - 31*4px)/32); min-width:4px; background:linear-gradient(180deg,#7ab6ff,#3f6dd8); height:10%;
    border-radius:6px 6px 2px 2px; opacity:.9; box-shadow:0 0 10px rgba(90,160,255,.25) inset; transition:height .08s linear; }

  .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#0e1520; border:1px solid #1e2633; color:var(--muted); font-size:.9rem; }
  .ratioDot{width:8px;height:8px;border-radius:999px;background:var(--muted)}
  .ratioVal{font-variant-numeric:tabular-nums}

  .userBadge{
    display:inline-flex; align-items:center; gap:10px;
    background:#0f1622; border:1px solid #223046; color:var(--ink);
    padding:6px 10px; border-radius:999px; font-weight:600;
  }
  .userBadge .name{max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .userBadge .edit{background:#0f1622;border:1px solid #223046;color:var(--ink);padding:4px 8px;border-radius:8px;cursor:pointer}
  .userBadge .edit:hover{border-color:#2b3b55}

  .questions{display:grid; gap:12px}
  .legend{font-size:.95rem;color:var(--muted)}

  .qgroup{ border:1px solid #223046; border-radius:12px; padding:12px; background:#0f1622; }
  .qtitle{ display:flex; align-items:center; gap:10px; font-weight:800; margin-bottom:10px; }
  .qtitle small{ color:var(--muted); font-weight:600; }
  .qopts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
  @media (max-width:720px){
     .qopts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
     .eq{ height:100px;}
  }

  .qbtn{
    position:relative; padding:16px 14px; border-radius:14px; border:1px solid #223046; background:#0f1622; color:var(--ink);
    font-size:1.02rem; font-weight:700; text-align:center; cursor:pointer; transition:transform .06s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
    user-select:none;
  }
  .qbtn:hover{transform:translateY(-1px)}
  .qbtn.correct{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%, transparent); }
  .qbtn.wrong{ border-color:var(--apple); box-shadow:0 0 0 2px color-mix(in srgb,var(--apple) 60%, transparent); }

  .foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
  .btn{ padding:10px 14px; border-radius:12px; background:#0f1622; color:#e8eef9; border:1px solid #233149; cursor:pointer; font-weight:600; }
  .btn.primary{background:linear-gradient(180deg,var(--brand),#3f6dd8); border-color:#3f6dd8}
  .btn:disabled{opacity:.5; cursor:not-allowed}

  /* modal & mask */
  body.blocked .wrap{ filter:grayscale(.15) brightness(.7); pointer-events:none; user-select:none }
  .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; display:none; }
  .backdrop.show{display:block}
  .modal{ position:fixed; inset:0; z-index:1001; display:none; align-items:center; justify-content:center; }
  .modal.show{display:flex}
  .modal .panel{
    width:min(520px, 92vw); background:var(--panel); color:var(--ink);
    border:1px solid #1e2633; border-radius:16px; padding:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .panel h3{margin:0 0 10px 0}
  .formRow{display:grid; gap:6px; margin:10px 0}
  .formRow label{color:var(--muted); font-size:.95rem}
  .formRow input{ padding:10px 12px; border-radius:10px; border:1px solid #223046; background:#0f1622; color:var(--ink); font-size:1rem; }
  .modal .actions{display:flex; gap:8px; justify-content:flex-end; margin-top:14px}
  .modal .actions .btn{min-width:88px}
  .errorText{color:var(--apple); font-size:.9rem; display:none; margin-top:4px}
  .errorText.show{display:block}

  .siteFooter{ margin-top: 1px; text-align:center; color: var(--muted); font-size:.9rem; }
  .siteFooter a{ color: var(--muted); text-decoration:none; border-bottom:1px dotted #2a384f; }
  .siteFooter a:hover{ color: var(--ink); border-bottom-color: var(--ink); }


.answer-hint{
  margin-left:8px;
  padding:2px 8px;
  font-size:12px;
  border-radius:12px;
  background:#2a3445;
  color:#9fb0c8;
}
.answer-hint.multi{
  background:#3a2f1f;
  color:#ffcc66;
}


  /* 문항 컨테이너 전환(페이드 인/아웃) */
  .qgroup.transition { will-change: opacity, transform; }
  @keyframes qFadeOut { 0% {opacity:1; transform:translateY(0)} 100% {opacity:0; transform:translateY(-6px)} }
  @keyframes qFadeIn  { 0% {opacity:0; transform:translateY(6px)} 100% {opacity:1; transform:translateY(0)} }
  .qgroup.fade-out { animation: qFadeOut .22s ease forwards; }
  .qgroup.fade-in  { animation: qFadeIn  .26s cubic-bezier(.2,.9,.25,1.0) forwards; }
  @media (prefers-reduced-motion: reduce){
    .qgroup.fade-out, .qgroup.fade-in { animation: none !important; }
  }
  .media-select{
  min-width: 220px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #223046;
  background:#0f1622;
  color: var(--ink);
  font-size: .95rem;
}