:root {
  --bg: #17181a; --panel: #212226; --panel2: #2a2c31; --border: #3a3d44;
  --fg: #ececee; --fg2: #c9ccd3; --dim: #a1a5ad; --accent: #4f8cff; --accent-fg: #fff; --sel: #f0b43c;
  --gutter: 16px; --hdr: 46px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; }
[hidden] { display: none !important; }
header { position: sticky; top: 0; z-index: 5; height: var(--hdr); display: flex; align-items: center; gap: 12px;
  justify-content: space-between; padding: 0 var(--gutter); background: var(--panel);
  border-bottom: 1px solid var(--border); }
header h1 { font-size: 15px; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-right { display: flex; align-items: center; gap: 12px; flex: none; }
#lang { padding: 5px 12px; }
#progress { color: var(--dim); font-variant-numeric: tabular-nums; }
main { padding: 10px var(--gutter); max-width: 2400px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; }
.narrow { max-width: 760px; margin: 24px auto; }
h2 { font-size: 20px; margin: 0 0 10px; }
.small { font-size: 13px; }
.dim { color: var(--dim); }
button { font: inherit; cursor: pointer; border-radius: 8px; padding: 8px 16px; border: 1px solid var(--border);
  touch-action: manipulation; }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.ghost { background: var(--panel2); color: var(--fg); }
.row-end { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 14px; }
.consent { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; }
.code { font-size: 18px; } .code b { letter-spacing: .06em; color: var(--sel); }
.lbl { font-size: 12px; color: var(--dim); letter-spacing: .04em; }

/* ---------- 평가 화면 (넓은 화면) ----------
   위 줄: 문장(+ 등수 매기는 법) | 레퍼런스 5장. 가운데: 영상 A | B | C 와 전체 조작 막대.
   아래: 질문마다 영상별 등수 (영상 칸에 맞춰), 이전/다음.
   한 화면에 다 들어가게, 영상 칸 폭 = min(폭을 n 등분, 남는 높이로 낼 수 있는 폭). 다만 폭의 75% 보다 작게는
   줄이지 않는다 (낮은 화면은 영상을 아주 작게 만드는 대신 조금 스크롤한다).
   세로 = 머리글 + 169px(여백·레퍼런스 제목·영상 막대·조작 막대) + 레퍼런스 + 영상 + 질문 묶음(--qblock). */
#trial {
  --n: 3; --gap: 10px;
  --ref: clamp(72px, 13vh, 170px);
  --qblock: 220px;
  --vbudget: calc(100vh - var(--hdr) - 169px - var(--ref) - var(--qblock));
  --wfull: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  --tile-w: max(200px, calc(var(--wfull) * .75), min(var(--wfull), calc(var(--vbudget) * 832 / 480 + 2px)));
  --row-w: calc(var(--n) * var(--tile-w) + (var(--n) - 1) * var(--gap));
}
/* 시청 조건이 있으면 조작 막대 아래 띠(6px)와 안내 한 줄이 늘 있다 */
#trial.has-rule { --qblock: 246px; }
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: stretch;
  max-width: var(--row-w); margin: 0 auto 10px; }
.prompt { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.45; }
#prompt-text { margin-bottom: 8px; }
#rank-help { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg2); }
.refs-block { display: grid; gap: 4px; align-content: start; }
.refs-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#refs { display: flex; gap: 8px; }
#refs img { width: var(--ref); height: var(--ref); object-fit: contain; background: #000;
  border: 1px solid var(--border); border-radius: 8px; cursor: zoom-in; }
#lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .88); display: flex;
  align-items: center; justify-content: center; cursor: zoom-out; padding: 2vh 2vw; }
#lightbox img { max-width: 96vw; max-height: 94vh; object-fit: contain; border-radius: 6px; }

.stage { max-width: var(--row-w); margin: 0 auto; }
.grid-wrap { position: relative; }
.grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
figure { margin: 0; background: #000; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-width: 0; }
.vbox { position: relative; }
video { display: block; width: 100%; aspect-ratio: 832 / 480; object-fit: contain; background: #000; }
/* A / B / C 표시: 영상 왼쪽 위에 겹쳐서 */
.badge { position: absolute; top: 6px; left: 6px; min-width: 32px; height: 32px; padding: 0 8px; display: grid;
  place-items: center; font-size: 19px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .62);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 7px; pointer-events: none; }
/* 영상마다 작은 막대: 이 영상만 재생/멈춤 · 이동 · 시각 */
.vbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 34px;
  padding: 0 8px; background: var(--panel); border-top: 1px solid var(--border); }
.vbar button { width: 30px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 6px; }
.vbar svg { width: 11px; height: 11px; }
.vbar input { width: 100%; margin: 0; accent-color: var(--fg2); cursor: pointer; }
.vtime { min-width: 3.6em; text-align: right; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
#loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 16px;
  background: rgba(23, 24, 26, .78); border-radius: 8px; }

/* 전체 조작 막대: 모든 영상을 함께 재생/멈춤 · 이동 · 속도 · 처음부터 */
.scrub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 6px 12px; align-items: center;
  grid-template-areas: "play seek clock speeds restart" "watch watch watch watch watch";
  margin-top: 8px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.scrub button { padding: 6px 14px; }
#play { grid-area: play; } #seekwrap { grid-area: seek; display: grid; gap: 3px; min-width: 0; } #clock { grid-area: clock; }
/* 재생한 구간 띠 (2분 판의 시청 조건): 노랑 = 꼭 재생할 곳, 파랑 = 모든 영상이 재생한 곳 */
#cov { display: block; width: 100%; height: 6px; border-radius: 3px; }
#speeds { grid-area: speeds; } #restart { grid-area: restart; }
#seek { width: 100%; height: 26px; accent-color: var(--accent); cursor: pointer; }
#clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.speeds { display: flex; gap: 4px; }
.scrub .speeds button { padding: 6px 10px; font-variant-numeric: tabular-nums; }
.speeds button.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 700; }
.scrub .watch { grid-area: watch; font-size: 13px; }
.scrub .watch:empty { display: none; }
.scrub .watch.unmet { color: #e9c46a; }

/* 질문: 질문마다 한 줄 = 영상 칸마다 [A] [1등] [2등] [3등] */
.answer { max-width: var(--row-w); margin: 10px auto 0; }
/* 좌우 안쪽 여백 0: 등수 칸이 바로 위 영상 칸과 같은 폭·같은 자리에 오게 */
.q { padding: 6px 0 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.qhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; padding: 0 10px; }
.qno { flex: none; min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 11px;
  background: var(--panel2); font-size: 12px; font-weight: 700; align-self: center; }
.qt { flex: 1 1 auto; font-size: 14px; line-height: 1.35; }
.qsum { flex: none; font-weight: 700; color: var(--sel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranks { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
.rk { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; align-items: center; padding-right: 6px; }
.rk-l { font-weight: 800; font-size: 17px; text-align: center; }
.rk-b { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.rk-b button { padding: 6px 0; font-size: 14px; font-weight: 700; background: var(--panel2); color: var(--fg); }
.rk-b button.on { background: var(--sel); color: #111; border-color: var(--sel); }
.navrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#next-hint { min-height: 1.3em; }
.nav { display: flex; justify-content: space-between; gap: 10px; margin-left: auto; }

/* 좁은 화면 (영상 3개는 1000px 이하, 2개는 700px 이하; app.js 가 body.stacked 를 붙인다):
   문장 → 레퍼런스 → 영상(위아래로) → 질문(영상마다 한 줄) 순서로 스크롤. 조작 막대는 화면 아래에 고정 */
body.stacked #trial { --ref: calc((100vw - 2 * var(--gutter) - 32px) / 5); }
body.stacked .top { grid-template-columns: minmax(0, 1fr); max-width: none; }
body.stacked .stage, body.stacked .answer { max-width: none; }
body.stacked .grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.stacked .ranks { grid-template-columns: minmax(0, 1fr); gap: 6px; }
body.stacked .rk-b button { padding: 9px 0; }
body.stacked #refs { gap: 6px; }
body.stacked main { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
body.stacked .scrub { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; border-radius: 0;
  border-width: 1px 0 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "play seek clock" "speeds speeds restart" "watch watch watch"; }
@media (max-width: 700px) {
  :root { --gutter: 10px; }
  header h1 { font-size: 14px; }
  .prompt { font-size: 13px; }
  .card { padding: 16px; }
}