[hidden] { display: none !important; }
/* 리드백 CBT — 실제 EPTA CBT 화면 구성을 따른 시험 화면 */
:root {
  --t-top: #2e4459;
  --t-top2: #3b556e;
  --t-sub: #24516e;
  --t-tab: #7e9ab1;
  --t-side: #d5dde4;
  --t-side-2: #c3cdd6;
  --t-part: #95a8b8;
  --t-task: #f0a316;
  --t-cur: #1f9fdc;
  --t-done: #a9d8f2;
  --t-ink: #1e2a36;
  --t-ink-2: #51606f;
  --t-line: #b7c3ce;
  --t-ctrl: #dfe5ea;
  --t-listen: #d3ecfa;
  --t-resp: #fde6c4;
  --t-study: #dff1df;
  --t-btn: #4a6782;
  --t-btn-2: #3a5670;
  --t-emerg: #ee5b2b;
  --t-ok: #1f8a4c;
  --t-warn: #c0560f;
  --sans: 'Pretendard Variable', Pretendard, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.cbt-body { margin: 0; background: #9aa9b6; font-family: var(--sans); color: var(--t-ink); font-size: 15px; line-height: 1.55; word-break: keep-all; }
button { font: inherit; }
:focus-visible { outline: 3px solid #ffb81c; outline-offset: 2px; }

.cbt { display: grid; grid-template-rows: auto auto 1fr; height: 100vh; height: 100dvh; max-width: 1400px; margin: 0 auto; background: #fff; box-shadow: 0 0 0 1px #6f8394; }

/* 상단 제목 줄 */
.cbt-title { display: flex; align-items: center; gap: 14px; padding: 0 16px; min-height: 40px; background: linear-gradient(#3e5770, var(--t-top)); color: #fff; }
.cbt-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.cbt-logo { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; background: #fff; color: var(--t-top); border-radius: 3px; padding: 1px 6px; }
.cbt-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbt-name small { font-weight: 400; font-size: 12px; opacity: 0.8; margin-left: 4px; }
.cbt-mode { font-size: 12px; background: rgba(255, 255, 255, 0.16); padding: 1px 8px; border-radius: 10px; }
.cbt-cand { margin-left: auto; font-size: 13px; white-space: nowrap; }

/* 두 번째 줄: Part · Task · 남은 시간 */
.cbt-sub { display: grid; grid-template-columns: 96px 1fr auto; align-items: stretch; min-height: 34px; background: var(--t-sub); color: #fff; font-size: 14px; }
.cbt-part { background: var(--t-tab); color: #fff; border: 0; font-weight: 700; font-size: 13px; cursor: default; }
.cbt-task { display: flex; gap: 14px; align-items: center; padding: 0 16px; white-space: nowrap; overflow: hidden; }
.cbt-task b { font-weight: 700; }
.task-q { margin-left: 8px; opacity: 0.75; font-size: 13px; }
.cbt-remain { display: flex; align-items: center; gap: 6px; padding: 0 16px; white-space: nowrap; }
.cbt-remain b { font-size: 16px; font-variant-numeric: tabular-nums; }
.cbt-remain.is-low b { color: #ff5a4f; animation: cbt-blink 1s steps(2, start) infinite; }
@keyframes cbt-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .cbt-remain.is-low b { animation: none; } }

.cbt-main { display: grid; grid-template-columns: 96px minmax(0, 1fr) 210px; min-height: 0; }

/* 왼쪽 문항 진행 표 */
.cbt-nav { background: var(--t-side); border-right: 1px solid var(--t-line); overflow-y: auto; padding-bottom: 12px; }
.nav-part { background: var(--t-part); color: #fff; font-weight: 700; font-size: 12px; padding: 5px 10px; margin-top: 8px; }
.nav-part:first-child { margin-top: 0; }
.nav-task { padding: 6px 8px 0; }
.nav-task-name { background: var(--t-task); color: #fff; font-weight: 700; font-size: 11px; text-align: center; padding: 2px 0; }
.nav-grid { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--t-line); border-top: 1px solid var(--t-line); }
.nav-num { height: 24px; border: 0; border-right: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); background: #fff; font-size: 12px; font-weight: 600; color: var(--t-ink); padding: 0; cursor: pointer; }
.nav-num:disabled { cursor: default; }
.nav-num[data-state='answered'] { background: var(--t-done); }
.nav-num[data-state='done'] { background: var(--t-done); color: #0b4e73; }
.nav-num[data-state='error'] { background: #f7c9b9; }
.nav-num.is-cur { background: var(--t-cur); color: #fff; }

/* 가운데 */
.cbt-center { overflow-y: auto; background: #fff; position: relative; outline: none; }
.cbt-item { padding: 28px clamp(16px, 4vw, 48px) 40px; max-width: 980px; }
.cbt-panels { display: flex; gap: clamp(16px, 3.5vw, 40px); justify-content: center; margin: 40px auto 20px; }
.cbt-p1 { padding-top: clamp(8px, 11vh, 120px); }
.panel { width: min(320px, 44%); aspect-ratio: 1 / 1; border: 1px solid #c9d0d6; background: #f3f5f7; display: grid; grid-template-rows: 1fr auto; padding: 0; transition: border-color 0.15s; }
button.panel { cursor: pointer; font: inherit; }
.panel-icon { display: grid; place-items: center; }
.panel-icon svg { width: 52%; height: auto; opacity: 0.32; transition: opacity 0.15s; }
.panel-foot { background: #d9dfe4; color: #f4f6f8; font-size: clamp(12px, 1.3vw, 16px); padding: 10px 8px; text-align: center; }
.panel.is-on { border: 2px solid #3d4c5b; background: #fff; }
.panel.is-on .panel-icon svg { opacity: 1; }
.panel.is-on .panel-foot { background: #34465a; color: #fff; }
.panel-level { display: block; height: 7px; background: #c6d0d8; border-radius: 4px; overflow: hidden; margin: 3px 14%; }
.panel.is-on .panel-level { background: #8796a5; }
.panel-level span { display: block; height: 100%; width: 0; background: #f39a1d; transition: width 60ms linear; }
.cbt-panels.small { margin: 26px 0 0; justify-content: flex-start; gap: 14px; }
.cbt-panels.small .panel { width: 150px; aspect-ratio: 1 / 0.8; }
.cbt-panels.small .panel-foot { font-size: 11px; padding: 6px; }
.cbt-reveal { margin: 10px auto 0; max-width: 520px; font-size: 14px; color: var(--t-ink-2); }
.cbt-reveal summary { cursor: pointer; }

.cbt-p2 .sit { font-size: 16px; margin: 0 0 12px; line-height: 1.6; }
.cbt-p2 .sit b { color: #b12a1e; }
.cbt-p2 .sit-old { color: #6b7a87; font-size: 14px; }
.cbt-p2 .sit-old b { color: #6b7a87; }
.cbt-p2 .sit-paths { background: #eef4f9; border-left: 4px solid #2c5d84; padding: 8px 12px; font-size: 15px; }
.cbt-p2 .sit-paths b { color: #2c5d84; }
.cbt-p2 .sit-tag { display: inline-block; margin: 0 0 8px; font-weight: 700; font-size: 13px; color: #2c5d84; letter-spacing: .02em; }
.cbt-p2 .q { font-size: 16px; font-weight: 600; margin: 18px 0 10px; }
/* 질문만 있는 문항 (Follow-up·Task C): 위쪽 질문 상자 + 큰 칸 — 안내서 20쪽 */
.q-box { margin: 0 0 8px; background: #eaf4fb; border: 1px solid #b7cfe2; box-shadow: 3px 3px 0 #a9bccb; padding: 12px 16px; font-size: 16px; font-weight: 600; color: #20262c; }
.cbt-mono .cbt-panels { margin-top: clamp(28px, 9vh, 90px); }
.q-mark { color: #b12a1e; }
.clues { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }
.clues li { border: 1.5px solid #2c3e50; padding: 2px 10px; font-weight: 700; font-size: 14px; background: #fffbe6; }
.cbt-figure { display: block; position: relative; padding: 0; border: 1px solid #c9d2da; background: #f4f6f8; cursor: zoom-in; max-width: 760px; width: 100%; }
.cbt-figure img { width: 100%; height: auto; display: block; }
.zoom-hint { position: absolute; right: 8px; bottom: 8px; background: rgba(30, 42, 54, 0.75); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 3px; }

/* 오른쪽 도구 */
/* 안내서 13·15·16쪽 화면: 회색 바탕, 위쪽 Volume(스피커 버튼 + 막대 표시), 칸 전체가 색으로 켜지는 Listening/Response */
.cbt-ctrl { background: #e4e6e8; border-left: 1px solid #c9ced3; display: flex; flex-direction: column; padding: 0; overflow-y: auto; }
.ctrl-vol { padding: 10px 12px 12px; border-bottom: 1px solid #cfd4d9; position: relative; }
.ctrl-vol-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #3a3f45; margin-bottom: 6px; }
.ctrl-spk { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #b9bfc5; background: radial-gradient(circle at 50% 35%, #fff, #d9dde1); color: #3a3f45; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.ctrl-spk.small { width: 22px; height: 22px; display: inline-grid; vertical-align: middle; }
.ctrl-spk svg { width: 15px; height: 15px; }
.ctrl-vol-pop { position: absolute; left: 8px; right: 8px; top: 42px; z-index: 5; background: #fff; border: 1px solid #b9bfc5; border-radius: 4px; padding: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); display: grid; gap: 8px; }
.vol-row { display: flex; align-items: center; gap: 6px; }
.vol-row input { flex: 1; }
.ctrl-eq { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; height: 50px; background: #5b5f63; border: 2px solid #cfd2d5; padding: 5px 7px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.eq-col { display: grid; grid-template-rows: repeat(6, 1fr); gap: 2px; }
.eq-col i { display: block; background: #6a6f74; border-radius: 1px; }
.eq-col i.on { background: #8fdc4c; }
.ctrl-eq.is-rec .eq-col i { background: #7a6266; }
.ctrl-eq.is-rec .eq-col i.on { background: #ff6f73; }
.ctrl-box { padding: 10px 12px 4px; color: #a7adb3; }
.ctrl-label { font-size: 13px; font-weight: 700; }
.ctrl-bar { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ctrl-track { flex: 1; height: 9px; background: #c8ccd0; border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
.ctrl-track span { display: block; height: 100%; width: 0; background: #f08c1e; }
.ctrl-num { min-width: 30px; height: 20px; display: grid; place-items: center; background: #c8ccd0; color: #fff; font-size: 13px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.ctrl-box.is-on, .ctrl-group.is-on .ctrl-box { color: #2c3238; }
.ctrl-box.is-on .ctrl-num, .ctrl-group.is-on .ctrl-num { background: #2f3842; }
.box-study { margin: 0; border-bottom: 1px solid #cfd4d9; padding-bottom: 12px; }
.box-study.is-blank { visibility: hidden; border-bottom-color: transparent; }
.box-study.is-on { background: #cfe8bf; box-shadow: inset 0 0 0 1px #8fc274; }
.box-study.is-on .ctrl-track span { background: #3c9a35; }
.ctrl-group { display: grid; gap: 8px; padding: 0 0 12px; border-bottom: 1px solid #cfd4d9; }
.ctrl-group .ctrl-box { padding-bottom: 0; }
.ctrl-group > button { margin: 0 12px; }
.grp-listen.is-on { background: #bfe3f6; box-shadow: inset 0 0 0 2px #2d8fd0; }
.grp-resp.is-on { background: #fbd9b4; box-shadow: inset 0 0 0 2px #f29a3a; }
.ctrl-say { display: grid; gap: 0; text-align: center; background: linear-gradient(#4b6a8b, #2f4d6d); color: #fff; border: 1px solid #233c57; padding: 6px 4px 5px; cursor: pointer; border-radius: 3px; }
.ctrl-say span { font-weight: 700; font-size: 15px; }
.ctrl-say small { font-size: 10px; opacity: 0.9; }
.ctrl-say:disabled { background: #d9dcdf; color: #b8bdc2; border-color: #cfd3d7; cursor: default; }
.ctrl-ready { display: grid; gap: 0; background: linear-gradient(#5e6872, #444d56); color: #fff; border: 1px solid #333b43; border-radius: 3px; padding: 7px 4px; font-size: 14px; cursor: pointer; }
.ctrl-ready .rd-main { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ctrl-ready i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #cfd4d8, #7f878e); }
.ctrl-ready:disabled { background: linear-gradient(#c9cdd1, #b7bcc1); color: #eef0f2; border-color: #b0b5ba; cursor: default; }
.ctrl-ready.is-rec { background: #2a3138; color: #fff; border-color: #1a1f24; cursor: default; }
.ctrl-ready.is-rec i { background: radial-gradient(circle at 40% 35%, #ff9b8f, #e2342b); animation: blink 1s steps(2) infinite; }
.ctrl-ready .rd-sub { display: block; background: #12171c; color: #f7d34a; font-size: 11px; margin: 6px -4px -7px; padding: 2px 0; border-radius: 0 0 3px 3px; }
.ctrl-next { background: linear-gradient(#4b6a8b, #2f4d6d); color: #fff; border: 1px solid #233c57; padding: 9px; font-weight: 700; font-size: 15px; cursor: pointer; border-radius: 3px; }
.ctrl-next:disabled { background: #d9dcdf; color: #b8bdc2; border-color: #cfd3d7; cursor: default; }
.ctrl-next.is-confirm, .ctrl-emergency.is-confirm { background: #1a8cff; color: #ffe94d; }
.ctrl-warn { padding: 12px 10px 0; }
.ctrl-novoice { background: #1d3a57; color: #ffd84a; font-weight: 800; font-size: 17px; text-align: center; padding: 16px 6px; border: 2px solid #c4282b; }
.ctrl-spacer { flex: 1; }
.ctrl-foot { padding: 10px; border-top: 1px solid #cfd4d9; }
.ctrl-emergency { width: 100%; background: linear-gradient(#f26a4a, #df4425); color: #fff; border: 1px solid #c2361b; padding: 9px; font-weight: 700; cursor: pointer; border-radius: 3px; }
@keyframes blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .ctrl-ready.is-rec i { animation: none; } }

/* 전체 화면 (안내·확인 화면) */
.cbt.is-full .cbt-main { grid-template-columns: 1fr; }
.cbt.is-full .cbt-nav, .cbt.is-full .cbt-ctrl { display: none; }
.cbt-full { min-height: 100%; display: grid; place-items: center; padding: 28px 16px; background: linear-gradient(#f4f6f8, #e9eef2); }
.cbt-card { background: #fff; border: 1px solid #cfd7de; border-radius: 4px; padding: clamp(20px, 4vw, 36px); width: min(720px, 100%); box-shadow: 0 1px 2px rgba(30, 42, 54, 0.08); }
.cbt-card-wide { width: min(980px, 100%); }
.cbt-card h2 { margin: 0 0 12px; font-size: 20px; }
.cbt-pill { display: block; width: fit-content; margin: 0 auto 20px; background: #4b6176; color: #fff; font-weight: 700; padding: 8px 48px; border-radius: 4px; font-size: 17px; }
.cbt-small { font-size: 13px; color: var(--t-ink-2); }
.cbt-big { font-size: 18px; font-weight: 700; text-align: center; }
.cbt-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.cbt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 20px; background: #535d66; color: #fff; border: 1px solid #535d66; border-radius: 3px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; }
.cbt-btn:hover { background: #3f474e; }
.cbt-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cbt-btn-ghost { background: #fff; color: #3f474e; }
.cbt-btn-ghost:hover { background: #eef1f4; }
.cbt-btn-small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.cbt-input { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid #b7c3ce; border-radius: 3px; }
.cbt-info { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.cbt-info th, .cbt-info td { border: 1px solid #cfd7de; padding: 10px 12px; text-align: left; }
.cbt-info th { background: #eef2f5; width: 130px; font-weight: 600; font-size: 14px; }
.cbt-check { border: 1px solid #cfd7de; border-radius: 4px; padding: 14px 16px; margin-top: 14px; }
.cbt-check-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cbt-step { width: 24px; height: 24px; border-radius: 50%; background: #4b6176; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.cbt-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cbt-check-state { margin: 10px 0 0; font-size: 14px; color: var(--t-ink-2); min-height: 1.4em; }
.cbt-check-state.ok { color: var(--t-ok); font-weight: 600; }
.cbt-check-state.warn { color: var(--t-warn); font-weight: 600; }
.cbt-vol { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t-ink-2); }
.cbt-vol input { width: 120px; }
.cbt-mini-meter { width: 160px; height: 10px; background: #dbe2e8; border-radius: 5px; overflow: hidden; }
.cbt-mini-meter span { display: block; height: 100%; width: 0; background: #2e9b57; transition: width 60ms linear; }
.cbt-help { margin-top: 10px; background: #fff7e8; border: 1px solid #f2cf8f; padding: 10px 14px; font-size: 14px; }
.cbt-help ul { margin: 6px 0 10px; padding-left: 1.2em; }
.cbt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cbt-notice { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 14px; }
.cbt-en { color: var(--t-ink-2); font-size: 13.5px; }
.cbt-agree { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding: 12px 14px; background: #f1f4f7; border-radius: 3px; font-size: 14px; cursor: pointer; }
.cbt-agree input { width: 18px; height: 18px; accent-color: #4b6176; }
.cbt-next { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.cbt-next > span { color: #1b6fb5; font-weight: 700; font-size: 18px; }
.cbt-count { color: #e2342b; }
.cbt-dir .dir-label { font-weight: 800; margin: 0; }
.cbt-dir .dir-en { margin: 4px 0 14px; font-size: 16px; line-height: 1.65; }
.cbt-dir .dir-note { font-style: italic; margin: 0 0 6px; }
.cbt-dir .dir-alert { color: #d0021b; margin: 10px 0 8px; }
.cbt-qtype { width: 100%; border-collapse: collapse; font-size: 14px; }
.cbt-qtype th, .cbt-qtype td { border: 1px solid #cfd7de; padding: 8px 10px; text-align: left; vertical-align: top; }
.cbt-qtype thead th { background: #eef2f5; }
.cbt-dir .dir-role { font-weight: 700; color: #1b6fb5; margin: 0 0 8px; }
.cbt-dir .dir-ko { font-size: 14px; color: var(--t-ink-2); border-top: 1px dashed #cfd7de; padding-top: 10px; }
.cbt-spinner { width: 34px; height: 34px; margin: 16px auto 0; border: 3px solid #d5dde4; border-top-color: var(--t-cur); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 프로그램 사용법: 실제 화면 캡처 + 양쪽 설명 (안내서 13쪽) */
.howto { display: grid; grid-template-columns: 150px minmax(0, 640px) 150px; grid-template-rows: repeat(6, auto); gap: 8px 12px; align-items: center; justify-content: center; }
.howto-shot { grid-column: 2; grid-row: 1 / span 6; width: 100%; height: auto; border: 1px solid #9fb0be; display: block; }
.howto-call { font-size: 12.5px; background: #fff; border: 1px solid #9fb0be; padding: 6px 8px; border-radius: 3px; text-align: center; line-height: 1.35; }
.howto-call.c1 { grid-column: 1; grid-row: 1; }
.howto-call.c2 { grid-column: 1; grid-row: 2; }
.howto-call.c7 { grid-column: 1; grid-row: 5; }
.howto-call.c0 { grid-column: 3; grid-row: 1; }
.howto-call.c-time { grid-column: 3; grid-row: 2; }
.howto-call.c3 { grid-column: 3; grid-row: 3; }
.howto-call.c4 { grid-column: 3; grid-row: 4; }
.howto-call.c5 { grid-column: 3; grid-row: 5; }
.howto-call.c6 { grid-column: 3; grid-row: 6; }
.howto-call.c8 { grid-column: 1; grid-row: 6; }

/* 훈련 모드 채점 패널 */
.cbt-feedback-slot:not(.is-open) { display: none; }
.cbt-feedback-slot.is-open { margin-top: 26px; border-top: 3px solid #4b6176; padding-top: 20px; }
.fb-loading, .fb-error { text-align: center; padding: 20px; color: var(--t-ink-2); }
.fb-transcript h3 { margin: 0 0 4px; font-size: 17px; }
.fb-edit { width: 100%; font: 15px/1.6 var(--sans); padding: 10px 12px; border: 1px solid #b7c3ce; border-radius: 3px; resize: vertical; }
.fb { display: grid; gap: 18px; }
.fb-top { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.fb-level { display: grid; justify-items: center; padding: 8px 18px; border-radius: 4px; color: #fff; min-width: 100px; }
.fb-level b { font-size: 34px; line-height: 1.1; }
.fb-level span { font-size: 11px; opacity: 0.9; }
.lvbox1, .lvbox2 { background: #c0392b; }
.lvbox3 { background: #d97f0e; }
.lvbox4 { background: #1f86c4; }
.lvbox5 { background: #1f8a4c; }
.fb-summary { margin: 0; font-size: 15.5px; font-weight: 500; }
.fb-mock { margin: 6px 0 0; font-size: 13px; color: var(--t-warn); }
.fb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
.fb h4 { margin: 0 0 8px; font-size: 13px; color: #4d5c69; }
.fb-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fb-bars li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 1.4em; gap: 2px 10px; align-items: center; font-size: 14px; }
.fb-bar-track { height: 10px; background: #e7ecf0; border-radius: 5px; overflow: hidden; }
.fb-bar-fill { display: block; height: 100%; border-radius: 5px; }
.fb-bar-fill.lv1, .fb-bar-fill.lv2 { background: #c0392b; }
.fb-bar-fill.lv3 { background: #e08a12; }
.fb-bar-fill.lv4 { background: #1f86c4; }
.fb-bar-fill.lv5 { background: #1f8a4c; }
.fb-bar-val { font-weight: 800; text-align: right; }
.fb-bar-note { grid-column: 2 / -1; font-size: 12.5px; color: var(--t-ink-2); }
.fb-points ul { margin: 0 0 12px; padding-left: 1.1em; font-size: 14px; }
.fb-points.miss h4 { color: #c0392b; }
.fb-points.hit h4 { color: #1f8a4c; }
.fb-block { display: grid; gap: 6px; justify-items: start; }
.fb-block h4 { margin: 0; }
.fb-text { margin: 0; font-size: 14px; color: var(--t-ink-2); }
.fb-tx { margin: 0; width: 100%; padding: 10px 14px; background: #f4f6f8; border-left: 4px solid #9fb0be; font-size: 15px; line-height: 1.6; }
.fb-tx.atc { border-left-color: #1f9fdc; }
.fb-tx.mine { border-left-color: #f0a316; }
.fb-tx.better { border-left-color: #1f8a4c; background: #eef8f1; }
.fb-tx.model { border-left-color: #4b6176; }
.fb-play { background: none; border: 1px solid #b7c3ce; border-radius: 3px; padding: 3px 10px; font-size: 13px; cursor: pointer; color: #3a5670; }
.fb-play:hover { background: #eef2f5; }
.fb-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.fb-fixes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px dashed var(--line, #e3e6ea); font-size: 15px; }
.fb-fixes s { color: #c0392b; }
.fb-fixes b { color: #1f8a4c; }
.fb-fixes s { grid-column: 1 / -1; overflow-wrap: anywhere; }
.fb-fixes b { overflow-wrap: anywhere; }
.fb-fixes small { grid-column: 1 / -1; color: var(--t-ink-2); font-size: 13px; }
.fb-tip { margin: 0; padding: 12px 14px; background: #fffbe6; border: 1px solid #f2dc8f; font-size: 14px; }
.fb-nav { border-top: 1px solid #e1e7ec; padding-top: 16px; }

/* 대화상자 */
.cbt-modal, .cbt-zoom { border: 0; border-radius: 4px; padding: 24px; max-width: min(520px, calc(100% - 32px)); }
.cbt-modal::backdrop, .cbt-zoom::backdrop { background: rgba(20, 30, 40, 0.6); }
.cbt-modal h2 { margin: 0 0 8px; color: var(--t-emerg); }
.cbt-zoom { max-width: min(1200px, calc(100% - 24px)); padding: 12px; text-align: right; }
.cbt-zoom img { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(480px, calc(100% - 32px)); }
.toast { background: #1e2a36; color: #fff; padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.toast-error { background: #c0392b; }

/* 태블릿·모바일 */
@media (max-width: 900px) {
  .cbt { height: auto; min-height: 100dvh; grid-template-rows: auto auto 1fr; }
  .cbt-name small, .cbt-mode { display: none; }
  .cbt-sub { grid-template-columns: auto 1fr auto; }
  .cbt-part { cursor: pointer; padding: 0 12px; }
  .cbt-part::after { content: ' ▾'; }
  .cbt-task { gap: 8px; padding: 0 10px; font-size: 13px; }
  .cbt-task span { display: none; }
  .cbt-remain { padding: 0 10px; font-size: 12px; }
  .cbt-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; position: relative; }
  .cbt-nav { display: none; position: absolute; z-index: 20; top: 0; left: 0; bottom: 0; width: 130px; box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2); }
  .cbt.nav-open .cbt-nav { display: block; }
  .cbt-ctrl { position: sticky; bottom: 0; z-index: 10; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 0; border-left: 0; border-top: 1px solid var(--t-line); overflow: visible; }
  .cbt-ctrl > .ctrl-vol, .ctrl-spacer { display: none; }
  .ctrl-box.box-study { flex: 1 1 100%; padding: 4px 10px 6px; }
  .box-study.is-blank { display: none; }
  .cbt-p1 { padding-top: 8px; }
  .panel { width: min(200px, 44%); }
  .ctrl-group { flex: 1 1 50%; padding-bottom: 8px; }
  .ctrl-warn { flex: 1 1 100%; padding: 6px 10px 0; }
  .ctrl-novoice { padding: 6px; font-size: 14px; }
  .ctrl-foot { flex: 1 1 100%; padding: 6px 10px; }
  .ctrl-emergency { padding: 6px; font-size: 13px; }
  .cbt-panels { margin: 16px auto; gap: 12px; }
  .cbt-item { padding: 18px 16px 24px; }
  .cbt-two { grid-template-columns: 1fr; }
  .howto { grid-template-columns: 1fr; }
  .fb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cbt-cand { display: none; }
  .fb-top { grid-template-columns: 1fr; }
  .fb-level { justify-self: start; }
  .cbt-pill { padding: 8px 20px; }
}

.fb-codes { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fb-codes li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: #f6f8fb; border: 1px solid #dde4ec; border-radius: 4px; font-size: 14px; }
.fb-codes .fb-code { flex: none; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 3px; background: #2c5d84; color: #fff; font-size: 13px; }
.fb-codes span { display: grid; gap: 2px; }
.fb-codes small { color: #5b6b79; }

/* ── 피드백 중심 (등급 숫자 없음) ── */
.fb-top { grid-template-columns: 1fr; background: #fff6d6; border-radius: 6px; padding: 12px 16px; }
.fb-eyebrow { margin: 0 0 2px; font-size: 12.5px; font-weight: 800; color: #a87400; }
.fb-summary { font-weight: 600; }
.fb-habits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fb-habits li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 14px; }
.fb-habits li small { display: block; color: var(--t-ink-2); font-size: 13px; margin-top: 2px; }
.fb-habit-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 800; margin-top: 2px; }
.fb-habits li.ok .fb-habit-mark { background: #e6f6ec; color: #1f8a4c; }
.fb-habits li.warn .fb-habit-mark { background: #fdecec; color: #c0392b; }
.fb-habit-val { color: var(--t-ink-2); }
.fb-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fb-compare li { display: grid; grid-template-columns: 7em auto 1fr; gap: 10px; font-size: 14px; align-items: baseline; }
.fb-compare small { font-weight: 700; }
.fb-compare small.up { color: #1f8a4c; }
.fb-compare small.down { color: #c0392b; }
.fb-compare small.same { color: #8b95a1; }
.fb-notes { display: block; width: 100%; justify-self: stretch; }
.fb-notes summary { display: list-item; }
.fb-notes summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #4d5c69; }
.fb-notes ul { margin: 8px 0 0; padding-left: 1.1em; font-size: 14px; display: grid; gap: 4px; }
.fb .small { font-size: 12.5px; color: var(--t-ink-2); margin: 0; }

/* ── 시작 전 화면 (안내서 9~14쪽) ── */
.cbt-full { align-content: center; }
/* 안내서 9~14쪽: 회색 바탕, 오른쪽 위 Volume, 제목 띠가 있는 흰 카드, 카드 아래에 “Next page in N Seconds” + 버튼 */
.cbt-full:has(> .cbt-guide-wrap) { align-content: start; background: #e3e4e5; padding-top: 0; }
.cbt-guide-wrap { position: relative; width: 100%; display: grid; justify-items: center; gap: 22px; padding-top: clamp(64px, 11vh, 120px); }
.vol-corner { position: absolute; top: 18px; right: 4px; font-size: 15px; color: #3a3f45; display: flex; align-items: center; gap: 8px; }
.vol-corner .ctrl-spk.small { width: 28px; height: 28px; }
.gcard { width: min(920px, 100%); background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); overflow: hidden; }
.gcard-head { position: relative; display: flex; justify-content: center; align-items: center; padding: 14px 120px; border-bottom: 1px solid #d9dadb; }
.gcard-head h2 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); color: #3a4048; font-weight: 700; text-align: center; }
.gcard-extra { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.gcard-body { background: #f6f6f6; padding: 22px clamp(16px, 3.5vw, 40px) 24px; }
.cbt-guide-wrap > .cbt-next { margin-top: 6px; }
.cbt-guide-wrap > .cbt-next > span { font-size: clamp(17px, 1.8vw, 21px); }
.cbt-demo { border: 1px solid #c3c8cd; background: linear-gradient(#fff, #e6e8ea); border-radius: 3px; padding: 5px 14px; font-size: 13px; font-weight: 700; color: #555d66; cursor: pointer; }
.cbt-demo:disabled { opacity: 0.6; cursor: default; }
.corner-pop { position: absolute; top: 28px; right: 0; background: #fff; border: 1px solid #b9bfc5; border-radius: 4px; padding: 8px 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); z-index: 3; }
.cbt-btn-dark { background: linear-gradient(#5b6168, #3c4248); border-color: #2e3338; min-width: 130px; }
.cbt-btn-blue { background: linear-gradient(#2f8fd8, #1c6db3); border-color: #165c99; min-width: 110px; }
.cbt-btn-blue:hover { background: #1c6db3; }
.cbt-skip { background: none; border: 0; color: #6b7a87; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.cbt-seat { width: min(640px, 100%); display: grid; justify-items: center; gap: 6px; text-align: center; }
.seat-type { margin: 0; font-size: 16px; color: #4d5762; }
.seat-type b { color: #1c6db3; font-weight: 500; }
.seat-card { display: grid; grid-template-columns: 170px 1fr; width: 100%; margin: 22px 0 10px; background: #fff; border: 1px solid #d6dbe0; border-radius: 6px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); padding: 26px 0; }
.seat-no { display: grid; justify-items: center; align-content: center; gap: 4px; border-right: 1px solid #e1e5e9; }
.seat-no b { font-size: 64px; line-height: 1; font-weight: 500; color: #2b3138; }
.seat-pill { background: #4b5560; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 14px; border-radius: 10px; }
.seat-who { display: grid; align-content: center; gap: 4px; }
.seat-dob { font-size: 20px; color: #3a3f45; }
.seat-name { font-size: 40px; color: #2b3138; font-weight: 500; }
.seat-edit { font-size: 13px; color: #6b7a87; margin-bottom: 10px; }
.seat-edit summary { cursor: pointer; }
.seat-edit-row { display: flex; gap: 8px; margin-top: 8px; }
.ident { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; max-width: 560px; margin: 0 auto; }
.ident .seat-no { border: 0; }
.ident-table { border-collapse: separate; border-spacing: 0 5px; font-size: 14px; }
.ident-table th { background: #e9ecef; color: #555d66; font-weight: 600; text-align: right; padding: 3px 12px; border-radius: 3px; width: 140px; }
.ident-table td { padding: 3px 12px; font-weight: 700; color: #2b3138; }
.vt-steps { margin: 0 0 14px; padding-left: 1.2em; font-size: 13.5px; color: #3a3f45; display: grid; gap: 4px; }
.vt-steps small { color: #7a838c; }
.vt-row { display: flex; align-items: center; justify-content: center; gap: 12px; background: #eef0f2; border-radius: 6px; padding: 14px 18px; flex-wrap: wrap; }
.vt-headset { display: grid; }
.vt-spk { color: #3a3f45; display: grid; }
.vt-step { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #b9bfc5; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.vt-range { width: 160px; }
.vt-eq { width: 120px; height: 40px; }
.vt-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 6px; }
.vt-secs { color: #1c6db3; font-weight: 800; font-size: 18px; min-width: 120px; text-align: right; }
.vt-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c3c8cd; background: linear-gradient(#fff, #e9ecef); border-radius: 16px; padding: 5px 18px; font-size: 14px; cursor: pointer; color: #3a3f45; }
.vt-btn:disabled { opacity: 0.5; cursor: default; }
.vt-rec i { width: 9px; height: 9px; border-radius: 50%; background: #e2342b; }
.vt-rec.is-stop { background: #2a3138; color: #fff; border-color: #1a1f24; }
.vt-rec.is-stop i { border-radius: 1px; background: #ff6f73; }
.vt-state { text-align: center; font-size: 14px; color: #4d5762; min-height: 1.4em; margin: 6px 0; }
.vt-state.ok { color: var(--t-ok); font-weight: 600; }
.vt-state.warn { color: var(--t-warn); font-weight: 600; }
.vt-warn { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.vt-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f5b51b; color: #fff; display: grid; place-items: center; font-weight: 900; }
.vt-warn p { margin: 0; font-size: 14px; }
.vt-warn .ko { font-size: 12.5px; color: #6b7a87; }
.vt-warn .red { color: #d0021b; font-size: 13px; margin-top: 4px; }
.vt-link { background: none; border: 0; color: #1c6db3; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0; }
.cbt-lang { border: 1px solid #c3c8cd; background: linear-gradient(#fff, #e9ecef); border-radius: 3px; padding: 3px 14px; font-size: 13px; cursor: pointer; }
.notice-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13.5px; }
.notice-cols h4 { margin: 0 0 6px; font-size: 13.5px; }
.notice-cols ul { margin: 0 0 14px; padding-left: 1.1em; display: grid; gap: 3px; }
.notice-ban { background: #c8102e; color: #fff; text-align: center; padding: 8px; border-radius: 3px; display: grid; gap: 2px; }
.notice-ban span { font-size: 12.5px; }
.prep { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; max-width: 700px; }
.prep li { display: grid; padding-left: 26px; position: relative; font-size: 14.5px; }
.prep li::before { content: '✔'; position: absolute; left: 0; color: #d0021b; font-weight: 900; }
.prep small { color: #6b7a87; font-size: 12.5px; }
/* Task 안내 (안내서 14쪽): 큰 제목 띠, 큰 글씨, 아래쪽에 남은 초 */
.cbt-dir { width: min(820px, 100%); padding: 10px 0; }
.cbt-dir .cbt-pill { width: min(460px, 86%); text-align: center; padding: 12px 16px; margin-bottom: 34px; border-radius: 4px; font-size: clamp(19px, 2vw, 25px); background: linear-gradient(#5a6c7f, #3e4f61); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.cbt-dir .dir-label { font-size: clamp(16px, 1.6vw, 20px); }
.cbt-dir .dir-en { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; margin-bottom: 20px; }
.cbt-dir .dir-note { font-size: clamp(14px, 1.4vw, 18px); color: #555c63; }
.dir-next { margin-top: clamp(36px, 12vh, 130px); }
.dir-next > span { font-size: clamp(17px, 1.8vw, 21px); }
@media (max-width: 760px) {
  .notice-cols, .ident { grid-template-columns: 1fr; }
  .howto { grid-template-columns: 1fr; }
  .howto-shot { grid-column: 1; grid-row: auto; }
  .howto-call { display: none; }
  .seat-card { grid-template-columns: 110px 1fr; }
  .gcard-head { padding: 12px 96px 12px 14px; justify-content: flex-start; }
  .vol-corner { top: 12px; }
  .seat-name { font-size: 28px; }
}

.dir-skip { font-size: 15px; padding: 8px 18px; }