:root {
  --red: #e4002b;
  --red-dark: #b8001f;
  --red-soft: #fdecef;
  --bg: #eef0f3;
  --panel: #ffffff;
  --line: #dfe2e7;
  --line-strong: #c7ccd4;
  --text: #1d2129;
  --muted: #6b7280;
  --key: #f3f4f6;
  --key-op: #e7e9ee;
  --ok: #138a4f;
  --ok-soft: #e6f5ec;
  --bad: #d92d20;
  --bad-soft: #fdecea;
  --warn: #ffd84d;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- 화면 전환 ---------- */
.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }
#screen-exam.active { height: 100vh; overflow: hidden; }

/* ---------- 공통 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; font-weight: 500; font-size: 14px;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #f6f7f9; }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn.primary:disabled { background: #e5a3ae; border-color: #e5a3ae; cursor: not-allowed; }
.btn.lg { height: 52px; padding: 0 32px; font-size: 16px; }
.btn.pill { border-radius: 999px; }
.btn.ghost { border-color: transparent; background: transparent; }

/* ---------- 상단바 (시험장) ---------- */
.topbar {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 64px; padding: 0 20px;
  background: var(--red); color: #fff;
  flex-shrink: 0;
}
.tb-left { font-size: 20px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tb-sub { font-size: 13px; font-weight: 400; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-center { display: flex; align-items: baseline; gap: 10px; }
.tl-label { font-size: 15px; font-weight: 500; opacity: .95; }
.tl-time { font-size: 32px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; min-width: 96px; }
.tl-time.warn { color: var(--warn); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { opacity: .45; } }
.tb-right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.tb-btn {
  height: 32px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.7); border-radius: 6px;
  background: transparent; color: #fff; font-size: 13px;
}
.tb-btn:hover { background: rgba(255,255,255,.14); }
.tb-chip {
  height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.18); font-size: 13px; line-height: 28px; font-weight: 500;
}

/* ---------- 진행 막대 ---------- */
.progress { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 8px; flex-shrink: 0; }
.progress-count { font-size: 13px; font-weight: 700; }
.progress-track { width: 360px; max-width: 70vw; height: 6px; border-radius: 99px; background: #d6d9df; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--red); transition: width .25s; }

/* ---------- 시험 본문 ---------- */
.exam-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px;
  padding: 0 16px 16px;
}
.exam-main { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.q-area {
  flex: 1; min-height: 0; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px;
}
.q-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.q-no { font-size: 22px; font-weight: 800; color: var(--red); }
.q-stem { font-size: 17px; font-weight: 700; line-height: 1.6; }
.q-passage {
  border: 1px solid var(--line); border-radius: 8px; background: #fafbfc;
  padding: 18px 20px; margin-bottom: 20px; font-size: 15.5px; line-height: 1.85;
  white-space: pre-wrap;
}
.q-passage.html { white-space: normal; }
.q-passage p { margin: 0 0 .6em; }
.q-passage p:last-child { margin-bottom: 0; }
.q-img { display: block; max-width: 100%; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 6px; }
.q-sheet {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
}
.q-sheet .big { font-size: 64px; font-weight: 800; color: var(--red); line-height: 1.1; }
.q-sheet p { margin: 0; }

/* 문항 안 표 */
.q-area table { border-collapse: collapse; margin: 6px 0; width: 100%; font-size: 14.5px; background: #fff; }
.q-area caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 6px; }
.q-area th, .q-area td { border: 1px solid var(--line-strong); padding: 7px 10px; text-align: center; }
.q-area th { background: #f1f3f6; font-weight: 700; }
.q-area .unit { display: block; text-align: right; font-size: 13px; color: var(--muted); margin-top: -2px; }
.q-area .boxed { border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 16px; margin: 0 0 16px; background: #fff; }

/* 교재 쪽 이미지 문항 */
.q-area:has(.q-book) { padding: 0 20px 24px; }
.zoom-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin: 0 -20px 12px; padding: 8px 12px;
  background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line);
}
.zoom-bar button { height: 28px; min-width: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-size: 13px; }
.zoom-bar button:hover { background: #f4f5f7; }
.zoom-bar span { min-width: 46px; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-book { width: calc(min(100%, 900px) * var(--z, 1)); margin: 0 auto; }
.crop { overflow: hidden; background: #fff; }
.crop + .crop { margin-top: 12px; padding-top: 0; border-top: 1px dashed var(--line-strong); }
.crop img { display: block; max-width: none; user-select: none; }

/* ---------- 답 선택 ---------- */
.answer-bar {
  display: flex; align-items: flex-end; gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; flex-shrink: 0;
  max-height: 46vh;
}
.choices { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: auto; max-height: calc(46vh - 24px); }
.choice {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  border: 0; border-radius: 6px; background: transparent;
  padding: 6px 10px; text-align: left; font-size: 15px; line-height: 1.55;
}
.choice:hover { background: #f4f5f7; }
.choice .cn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-top: 0; border-radius: 50%;
  border: 1.5px solid #3a3f47; font-size: 13px; font-weight: 700;
}
.choice.sel { background: #e8eaee; }
.choice.sel .cn { background: #1d2129; border-color: #1d2129; color: #fff; }
.choice .ct { padding-top: 0; }
.choices.compact { flex-direction: row; justify-content: center; gap: 18px; align-self: center; }
.choices.compact .choice { width: auto; padding: 6px; border-radius: 50%; }
.choices.compact .choice.sel { background: transparent; }
.choices.compact .cn { width: 48px; height: 48px; font-size: 20px; border-width: 2px; }
.btn.next { width: 140px; height: 52px; font-size: 16px; flex-shrink: 0; }

/* ---------- 도구 (메모장 / 그림판 / 계산기) ---------- */
.tools { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pad { flex: 1; min-height: 160px; display: flex; flex-direction: column; }
.tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tabs button {
  flex: 1; height: 42px; border: 0; background: #fafbfc; font-weight: 500; font-size: 14px;
  border-bottom: 2px solid transparent; color: var(--muted);
}
.tabs button.on { background: #fff; color: var(--text); font-weight: 700; border-bottom-color: var(--red); }
#memo, .memo {
  flex: 1; width: 100%; border: 0; resize: none; outline: none;
  padding: 14px 16px; font-size: 14.5px; line-height: 1.7;
}
.draw-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.draw-tools { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.draw-tools button {
  height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-size: 12.5px;
}
.draw-tools button.on { background: #1d2129; border-color: #1d2129; color: #fff; }
.draw-tools button[data-tool="clear"] { margin-left: auto; }
.draw-box { flex: 1; min-height: 0; position: relative; }
.draw-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.draw-wrap.eraser canvas { cursor: cell; }

.calc { flex-shrink: 0; padding: 10px; outline: none; }
.calc:focus-visible { box-shadow: 0 0 0 2px var(--red) inset; }
.calc-display {
  background: #f1f3f6; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px 8px; margin-bottom: 8px; text-align: right; overflow: hidden;
}
.calc-expr { min-height: 20px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.calc-val { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.calc-val.err { color: var(--bad); font-size: 18px; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-keys button {
  height: 38px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 16px; font-weight: 500;
}
.calc-keys button:hover { filter: brightness(.96); }
.calc-keys button:active { transform: translateY(1px); }
.calc-keys .op { background: var(--key-op); }
.calc-keys .clr { color: var(--red); font-weight: 700; }
.calc-keys .eq { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }

/* ---------- 시험 목록 (홈) ---------- */
.home-head { background: #fff; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.home-head-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; background: var(--red); color: #fff; font-size: 17px;
}
.home { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
.home-title { margin-bottom: 18px; }
.home-title h1 { margin: 0 0 4px; font-size: 26px; }
.home-title h2 { margin: 0; font-size: 19px; }
.home-title p { margin: 0; }
.home-title.sub { margin-top: 44px; }

.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.exam-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.exam-card:hover { border-color: var(--red); box-shadow: 0 6px 20px rgba(228,0,43,.10); transform: translateY(-2px); }
.exam-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ec-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ec-title { font-size: 17px; font-weight: 700; line-height: 1.4; }
.ec-badge { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--red); background: var(--red-soft); border-radius: 999px; padding: 2px 10px; }
.ec-badge.gray { color: var(--muted); background: #f1f3f6; }
.ec-desc { font-size: 13.5px; color: var(--muted); margin: -4px 0 0; }
.ec-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-parts span { font-size: 12.5px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; background: #fafbfc; }
.ec-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.ec-meta { font-size: 13px; color: var(--muted); }
.ec-meta b { color: var(--text); }
.ec-enter { font-size: 14px; font-weight: 700; color: var(--red); white-space: nowrap; }
.link-card { color: inherit; text-decoration: none; }

.empty { background: #fff; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 28px; text-align: center; color: var(--muted); }
.load-errors { background: var(--bad-soft); color: var(--bad); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }

.history { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.history table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history th, .history td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.history th { background: #fafbfc; font-weight: 700; font-size: 13px; color: var(--muted); }
.history tr:last-child td { border-bottom: 0; }
.history tbody tr { cursor: pointer; }
.history tbody tr:hover { background: #fafbfc; }
.history .num { text-align: right; font-variant-numeric: tabular-nums; }
.history .empty { border: 0; border-radius: 0; }

/* ---------- 입실 대기 ---------- */
.lobby, .gate, .end { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.lobby-card { width: 100%; max-width: 720px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px 40px; }
.lobby-card h1 { margin: 0 0 4px; font-size: 24px; }
.lobby-card > p { margin: 0 0 24px; }
.plan-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 14.5px; }
.plan-table th, .plan-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: center; }
.plan-table th { background: #f6f7f9; font-weight: 700; }
.plan-table tfoot td { font-weight: 700; background: #fafbfc; }
.notice { margin: 0 0 24px; padding: 18px 20px 18px 38px; background: #fff8e6; border: 1px solid #f3dfa6; border-radius: 10px; font-size: 14.5px; }
.notice li { margin: 4px 0; }
.agree { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 500; cursor: pointer; }
.agree input { width: 18px; height: 18px; accent-color: var(--red); }
.lobby-card .btn.lg { width: 100%; }

/* ---------- 영역 안내 ---------- */
.gate { flex-direction: column; text-align: center; gap: 6px; }
.gate-done { margin: 0 0 18px; padding: 8px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.gate-step { font-size: 15px; font-weight: 700; color: var(--red); }
.gate h1 { margin: 0; font-size: 40px; }
.gate-meta { margin: 0 0 24px; color: var(--muted); font-size: 16px; }
.part-steps { list-style: none; display: flex; gap: 6px; margin: 0 0 32px; padding: 0; flex-wrap: wrap; justify-content: center; }
.part-steps li { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.part-steps li.done { background: #e4e7ec; border-color: #e4e7ec; color: #8b919b; text-decoration: line-through; }
.part-steps li.now { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }

/* ---------- 종료 ---------- */
.end { flex-direction: column; text-align: center; }
.end h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.45; }
.end p { margin: 0 0 32px; }

/* ---------- 결과 ---------- */
.result-actions { display: flex; gap: 8px; }
.result { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
.r-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.r-head h1 { margin: 0 0 2px; font-size: 24px; }
.r-head p { margin: 0; }
.r-total { text-align: right; }
.r-total .score { font-size: 40px; font-weight: 800; line-height: 1.1; }
.r-total .score small { font-size: 18px; color: var(--muted); font-weight: 500; }
.r-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 28px; }
.r-part { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.r-part .nm { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.r-part .sc { font-size: 24px; font-weight: 800; margin: 2px 0 8px; }
.r-part .sc small { font-size: 14px; color: var(--muted); font-weight: 500; }
.r-part .bar { height: 6px; background: #eceef2; border-radius: 99px; overflow: hidden; }
.r-part .bar i { display: block; height: 100%; background: var(--red); }
.r-part .tm { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

.r-section { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.r-section > h2 { margin: 0; padding: 14px 18px; font-size: 16px; border-bottom: 1px solid var(--line); background: #fafbfc; display: flex; justify-content: space-between; }
.r-section > h2 span { font-weight: 500; color: var(--muted); font-size: 14px; }
.r-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.r-table th, .r-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.r-table th { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.r-table tr:last-child td { border-bottom: 0; }
.r-table td.l { text-align: left; }
.r-table .tag { display: inline-block; min-width: 28px; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.r-table .tag.o { color: var(--ok); background: var(--ok-soft); }
.r-table .tag.x { color: var(--bad); background: var(--bad-soft); }
.r-table .tag.n { color: var(--muted); background: #f1f3f6; }
.r-table tr.wrong td:first-child { box-shadow: 3px 0 0 var(--bad) inset; }
.r-table details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.r-table details p { margin: 6px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.r-table .stem { font-size: 13.5px; color: var(--text); max-width: 420px; }

.link-btn { border: 0; background: none; padding: 0; color: var(--red); font-weight: 700; font-size: 13px; }
.link-btn:hover { text-decoration: underline; }

/* ---------- 문제 · 해설 보기 ---------- */
.viewer { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; background: rgba(15, 18, 24, .55); padding: 24px 16px; }
.viewer-box { width: 100%; max-width: 1360px; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.viewer-head h3 { margin: 0; font-size: 18px; }
.viewer-head b { color: var(--text); }
.viewer-nav { display: flex; gap: 6px; }
.viewer-nav .btn { height: 36px; padding: 0 12px; }
.viewer-nav .btn:disabled { opacity: .4; cursor: default; }
.viewer-hide { display: flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 13.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.viewer-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.viewer-body { min-height: 0; overflow: auto; padding: 8px 24px 28px; }
.viewer-tools { padding: 14px; border-left: 1px solid var(--line); background: var(--bg); }
.viewer-tools .pad { min-height: 220px; }
.viewer-reveal { width: 100%; height: 48px; }
.viewer-body h4 { margin: 18px 0 8px; font-size: 14px; color: var(--red); }
.viewer-body .q-book { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.exp-page { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.exp-page + .exp-page { margin-top: 12px; }
.exp-page img { display: block; width: 100%; }
.exp-mark {
  position: absolute; width: 39%; height: 3.2%; margin: -0.8% 0 0 -1.2%;
  border: 2.5px solid var(--red); border-radius: 6px; background: rgba(228, 0, 43, .06); pointer-events: none;
}
#viewer-more { margin-top: 12px; width: 100%; }

/* ---------- 시험 목록 묶음 ---------- */
.exam-group + .exam-group { margin-top: 28px; }
.group-title { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.group-title span { font-size: 12px; font-weight: 700; color: var(--muted); background: #e4e7ec; border-radius: 999px; padding: 1px 8px; }

/* ---------- 팝업 ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(15, 18, 24, .5); padding: 16px; }
.modal-box { width: 100%; max-width: 420px; background: #fff; border-radius: 14px; padding: 26px 26px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-box h3 { margin: 0 0 8px; font-size: 18px; }
.modal-body { color: #3b414b; font-size: 14.5px; margin-bottom: 22px; }
.modal-body p { margin: 0 0 6px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1100px) {
  .exam-body { grid-template-columns: minmax(0, 1fr) 340px; }
  .tl-time { font-size: 26px; }
}
@media (max-width: 820px) {
  #screen-exam.active { height: auto; overflow: visible; }
  .exam-body { grid-template-columns: 1fr; }
  .q-area { min-height: 50vh; padding: 20px; }
  .pad { height: 260px; flex: none; }
  .topbar { grid-template-columns: 1fr auto; height: auto; min-height: 56px; padding: 8px 16px; row-gap: 4px; }
  .tb-left { font-size: 16px; }
  .tb-sub, .tb-chip { display: none; }
  .tb-center { grid-row: 1; grid-column: 2; }
  .tb-right { grid-column: 1 / -1; justify-content: flex-start; }
  .tl-label { display: none; }
  .answer-bar { flex-direction: column; align-items: stretch; max-height: none; }
  .choices { max-height: none; }
  .btn.next { width: 100%; }
  .lobby-card { padding: 24px 20px; }
  .home, .result { padding: 24px 16px 48px; }
  .home-head-inner { padding: 0 16px; }
  .exam-grid { grid-template-columns: 1fr; }
  .r-table .stem { display: none; }
  .viewer { padding: 0; }
  .viewer-box { border-radius: 0; }
  .viewer-head { flex-wrap: wrap; }
  .viewer-main { display: block; overflow: auto; }
  .viewer-body { overflow: visible; padding: 8px 16px 20px; }
  .viewer-tools { border-left: 0; border-top: 1px solid var(--line); }
  .viewer-tools .pad { height: 300px; flex: none; }
}