:root {
  --ink: #111827;
  --muted: #64748b;
  --line: #d7dee8;
  --paper: #ffffff;
  --page: #eef3f8;
  --navy: #312e81;
  --blue: #4f46e5;
  --green: #0f9f6e;
  --red: #d43f3a;
  --amber: #b7791f;
  --amber-bg: #fff7df;
  --shadow: 0 18px 45px rgba(15, 23, 42, .13);
}

* { box-sizing: border-box; }

/* 음성기호(IPA) 전용 글꼴 — 필요한 글자만 담아 12KB로 줄인 Noto Sans(OFL).
   왜 심었나 (2026-08-18 형 결정 "글자로 가자, 폰트 심어줘")
   - 기호를 원본에서 이미지로 잘라 넣으면, 교수님이 검수에서 바로잡은 표기가
     원본 조판 오류 상태로 되돌아간다(9회 61번 ③ [s̪ɛ]의 다리표 위치).
   - 글자로 두면 검수 결과가 유지되고, 형광펜·크기 통일도 그대로 된다.
   - 다만 기기마다 IPA 글꼴이 없거나 결합기호가 어긋나므로 글꼴을 함께 보낸다.
     결합기호 배치표(GPOS)를 남겨 s̪ · ã · ɛ̈ 가 제자리에 붙는다. */
@font-face {
  font-family: "IPA";
  src: url("fonts/ipa.woff2") format("woff2");
  font-display: swap;
  /* 한글은 건드리지 않는다. 라틴·IPA만 이 글꼴로 그려 전사 표기를 하나로 맞춘다. */
  /* 2026-08-18 형 지시 "빠진 IPA 기호 다 넣어줘" — IPA 관련 블록 전체를 담았다(1,551자).
     음성 확장 보충·결합기호 보충·라틴 확장 추가(ḁ ḙ ṳ 같은 무성음 표기)까지 포함해
     앞으로 13·14회에 새 기호가 나와도 글꼴이 튀지 않는다. */
  unicode-range: U+0020-007E, U+00A0-024F, U+0250-02FF, U+0300-036F,
                 U+1D00-1DBF, U+1DC0-1DFF, U+1E00-1EFF, U+2070-209F,
                 U+2C60-2C7F, U+A720-A7FF;   /* 2070-209F = F₀·G₂R₁B₁A₀S₂의 아래첨자 */
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "IPA", "Noto Sans KR", system-ui, sans-serif;
  background: var(--page);
  color: var(--ink);
}

button {
  font: inherit;
  border: 0;
  cursor: pointer;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  /* ★내용이 화면보다 길면 스크롤되게 (2026-08-17 형 보고: 문제 선택이 안 됨).
     fixed+inset:0이라 높이가 화면에 고정된다. overflow가 없으면 넘친 부분이 잘리고
     스크롤할 대상 자체가 없다. 세트 카드가 늘면서 실제로 잘렸다.
     safe center = 짧으면 가운데, 길면 위부터(가운데 정렬이면 위쪽이 잘려 못 올라간다). */
  place-items: safe center;
  overflow-y: auto;
  padding: 28px;
  background:
    linear-gradient(rgba(13, 31, 56, .72), rgba(13, 31, 56, .62)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Crect width='1400' height='900' fill='%23dfe8f1'/%3E%3Cg fill='none' stroke='%2394a3b8' stroke-width='1' opacity='.55'%3E%3Cpath d='M70 120h1260M70 220h1260M70 320h1260M70 420h1260M70 520h1260M70 620h1260M70 720h1260M140 80v720M280 80v720M420 80v720M560 80v720M700 80v720M840 80v720M980 80v720M1120 80v720M1260 80v720'/%3E%3C/g%3E%3Cg opacity='.22'%3E%3Crect x='110' y='110' width='340' height='200' rx='8' fill='%23fff'/%3E%3Crect x='500' y='155' width='300' height='120' rx='8' fill='%23fff'/%3E%3Crect x='860' y='110' width='390' height='250' rx='8' fill='%23fff'/%3E%3Crect x='190' y='450' width='480' height='230' rx='8' fill='%23fff'/%3E%3Crect x='760' y='500' width='420' height='180' rx='8' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") center/cover;
}

.intro.hidden { display: none; }

.intro-shell {
  width: min(1060px, 100%);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 420px;
  align-items: center;
  gap: 30px;
}

.intro-copy {
  color: #fff;
}

.eyebrow {
  margin: 0 0 14px;
  font-weight: 800;
  color: #bfdbfe;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intro h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  letter-spacing: 0;
}

.intro-text {
  max-width: 600px;
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.75;
  color: #e2e8f0;
}

.intro-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.exam-picker {
  width: min(700px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.exam-choice {
  min-height: 104px;
  padding: 15px;
  border-radius: 10px;
  text-align: left;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
}

.exam-choice.active {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.exam-choice.disabled {
  opacity: .68;
  cursor: not-allowed;
}

.exam-choice span {
  display: inline-flex;
  height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .14);
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.exam-choice b {
  display: block;
  margin-top: 9px;
  font-size: 17px;
}

.exam-choice small {
  display: block;
  margin-top: 5px;
  color: inherit;
  opacity: .76;
  line-height: 1.45;
}

.exam-picker-hint {
  margin: 10px 0 0;
  color: #dbeafe;
  font-size: 13px;
  font-weight: 700;
}

.visitor-form {
  width: min(620px, 100%);
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.visitor-form label {
  display: grid;
  gap: 7px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 800;
}

.visitor-form input {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font: inherit;
}

.visitor-form p {
  grid-column: 1 / -1;
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
}

.primary-btn, .ghost-btn, .danger-btn, .mini-btn, .tool-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 800;
}

.primary-btn { background: #fff; color: var(--navy); }
.ghost-btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.danger-btn { background: var(--red); color: #fff; }
.mini-btn { height: 34px; background: #e8eef7; color: var(--navy); }
.mini-btn.active { background: var(--navy); color: #fff; }
.tool-btn {
  height: 40px;
  background: #eef4fb;
  color: var(--navy);
  border: 1px solid var(--line);
}

.pause-btn {
  background: #fff7df;
  color: #8a5a12;
  border-color: #f4d58d;
}

.status-panel {
  background: rgba(255,255,255,.96);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.status-top span { color: var(--muted); font-weight: 700; }
.status-top strong { font-size: 30px; color: var(--navy); }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.stat-grid div {
  min-height: 80px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.stat-grid b { display: block; margin-bottom: 8px; }
.stat-grid span { color: var(--muted); font-size: 13px; }

.review-callout {
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  background: var(--amber-bg);
  border: 1px solid #f4d58d;
}

.review-callout b { display: block; color: var(--amber); margin-bottom: 4px; }
.review-callout span { font-size: 13px; color: #7a5b18; line-height: 1.55; }

.topbar {
  height: 88px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid #0f2a54;
}

.top-left { display: flex; align-items: center; gap: 14px; }

.exam-badge {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.top-kicker {
  margin: 0 0 3px;
  font-size: 13px;
  color: #bfdbfe;
  font-weight: 700;
}

.topbar h2 { margin: 0; font-size: 22px; color: #fff; }

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
}

.ctrl-label {
  font-size: 11px;
  line-height: 1.15;
  font-weight: 800;
  color: #cbd5e1;
  text-align: center;
}

.fs-btn, .lo-btn {
  min-width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  gap: 1px;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  border: 2px solid transparent;
  font-weight: 800;
  line-height: 1.05;
}

.fs-btn small { font-size: 10px; color: var(--muted); font-weight: 700; }
.lo-btn { font-size: 12px; }
.fs-btn.active, .lo-btn.active {
  border-color: #ffd54a;
  background: #fff7df;
}

.timer-card {
  min-width: 128px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.timer-card span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}

.timer-card strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--navy);
  font-size: 18px;
}

.workspace {
  height: calc(100vh - 88px - 62px); /* 상단 헤더 88 + 하단 툴바 62 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-rows: minmax(0, 1fr); /* ★행을 뷰높이로 고정 — 없으면 행이 내용만큼 늘어나 내부 overflow:auto 무력화(하단 선택지 잘림) */
  overflow: hidden;
}

.side-panel {
  background: #f8fafc;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

.side-head {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.side-head p { margin: 0 0 4px; color: var(--muted); font-weight: 800; font-size: 12px; }
.side-head h3 { margin: 0; font-size: 20px; }

.side-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.omr-list {
  overflow: auto;
  padding: 12px;
}

.omr-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
  border-radius: 8px;
}

.omr-row:hover, .omr-row.active { background: #e8eef7; }

.omr-num {
  display: flex;
  gap: 4px;
  align-items: center;
  font-weight: 800;
}

.review-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.star-dot {
  color: var(--amber);
  font-size: 13px;
  line-height: 1;
}

.bubbles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.bubble {
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid #b8c4d3;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.bubble.marked { background: var(--navy); color: #fff; border-color: var(--navy); }

.question-stage {
  --qfs: 1; /* 글자 크기 배율(80/100/125 → 0.8/1/1.25). applyViewSettings가 갱신 */
  min-width: 0;
  min-height: 0; /* ★그리드 아이템 스크롤 복구 — 없으면 내용만큼 늘어나 overflow:auto 무력화(하단 선택지 잘림 버그) */
  padding: 24px;
  overflow-y: auto;
  grid-column: 1;
  grid-row: 1;
}

.subject-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto 16px;
}

#subject-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 800;
}

.subject-strip small { color: var(--muted); font-weight: 700; }

.question-card {
  max-width: 980px;
  min-height: 650px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
  padding: 22px;
}

.q-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.q-number { font-size: 15px; font-weight: 800; color: var(--muted); }
.q-title { font-size: calc(22px * var(--qfs, 1)); line-height: 1.65; margin: 0; white-space: pre-wrap; }

.study-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}

.star-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--navy);
  border: 1px solid var(--line);
  font-weight: 800;
}

.star-btn span {
  color: var(--amber);
  font-size: 18px;
  line-height: 1;
}

.star-btn.active {
  background: var(--amber-bg);
  border-color: #f4d58d;
}

.note-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
}

/* ── 형광펜 툴 ── */
.hl-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid var(--line);
}
.hl-label { font-size: 12px; font-weight: 800; color: var(--muted); }
.hl-pen {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.hl-pen.active { box-shadow: 0 0 0 2px var(--navy); transform: scale(1.08); }
.hl-btn-yellow { background: #fde047; }
.hl-btn-green { background: #86efac; }
.hl-btn-pink { background: #f9a8d4; }
.hl-eraser {
  width: auto;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.hl-eraser.active { background: var(--navy); color: #fff; border-color: var(--navy); transform: none; }

/* 형광펜 모드일 때 지문 커서 = 텍스트 선택 유도 */
.q-title.hl-active { cursor: text; }
/* 지문에 입혀진 형광펜 색 */
.hl { border-radius: 3px; padding: 0 1px; }
.hl-yellow { background: #fde047; }
.hl-green { background: #86efac; }
.hl-pink { background: #f9a8d4; }

.review-box {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--amber-bg);
  border: 1px solid #f4d58d;
  color: #704f00;
  line-height: 1.6;
  font-size: 14px;
}

.q-image-wrap {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdff;
  text-align: center;
  /* 1em = 선택지 글자 크기. imageWidthEm이 이 기준으로 계산돼 있다(원본 11pt 대비) */
  font-size: calc(19px * var(--qfs, 1));
}

/* 2026-08-18 형 결정: 자료상자·표는 본문 글자와 같은 배율로 그린다(높이 상한 폐지).
   폭은 app.js가 q.imageWidthEm(원본 pt 폭 ÷ 11pt)으로 지정한다. */
.q-image-wrap img { max-width: 100%; height: auto; }
/* 2026-08-20 교수님 요청: 발문 그림이 화면을 다 먹어 선택지가 안 보였다.
   화면 높이에 맞춰 줄인다. 자료상자·표(imageWidthEm 지정)는 본문 배율 그대로 둔다.
   ★2026-09-01 형 지시 「그림을 너무 줄여서 작게 보인다」 — 22vh → 38vh.
     실측(1366x768): 204x169 → 353x292 (1.7배). 폰 390 은 카드 폭 상한에 걸려 298x246.
     교수님이 지적하신 「화면을 다 먹는」 상태는 제한을 없앤 912x754 였다. 38vh 는 그 절반이 안 된다.
     선택지가 밀리는 정도는 22vh 와 거의 같다(실측: 마지막 선택지 바닥 1080 → 1203, 어차피 스크롤 구간). */
.q-image-wrap.figure { font-size: inherit; }
.q-image-wrap.figure img { max-height: 38vh; width: auto; }
/* 액자는 그림 크기에 맞춘다. block 그대로 두면 카드 폭을 다 먹어 좌우가 텅 빈다(2026-08-20). */
.q-image-wrap.figure { padding: 10px; margin: 12px auto; width: fit-content; max-width: 100%; }
.q-image-caption { margin: 8px 0 0; font-size: 12px; color: #6b7280; font-style: italic; }
/* 그림 출처(mediaSource) — 논문에서 가져온 도판은 출처를 표기해야 한다.
   2026-09-04: 변환기가 이 칸을 버려서 논문 출처가 화면에서 사라져 있었다. */
.q-image-source { margin: 4px 0 0; font-size: 11.5px; color: #94a3b8; word-break: break-all; }

/* 문항 표(q.table) */
.q-table-wrap { margin: 18px 0; overflow-x: auto; }
.q-table-cap { margin: 0 0 8px; font-weight: 800; color: var(--navy); font-size: calc(15px * var(--qfs, 1)); }
.q-table {
  border-collapse: collapse;
  width: auto;
  min-width: 60%;
  font-size: calc(16px * var(--qfs, 1));
  background: #fff;
}
.q-table th, .q-table td {
  border: 1px solid #b8c4d3;
  padding: 9px 14px;
  text-align: center;
  line-height: 1.5;
}
.q-table thead th { background: #eef4fb; color: var(--navy); font-weight: 800; }
.q-table tbody td:first-child { text-align: left; }

.options {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;      /* 2026-08-20 교수님: 한 문제가 한 화면에 들어오게 */
  display: grid;
  gap: 8px;
}

.options.cols-2 {
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 54px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  font-size: calc(19px * var(--qfs, 1));
  line-height: 1.6;
}

.option-body {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.option:hover { border-color: #9fb1c7; background: #f1f5f9; }
.option.selected { border-color: var(--blue); background: #eff6ff; }
.option.cursor { outline: 2px dashed var(--blue); outline-offset: 2px; }

/* 오답 소거된 보기: 흐리게 + 취소선, '오답' 버튼은 빨강 활성 */
.option.eliminated { opacity: .55; background: #fbfbfc; }
.option.eliminated .option-body span:not(.option-num),
.option.eliminated .option-body img { text-decoration: line-through; }
.option.eliminated .option-num { text-decoration: line-through; }

.option-x {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.option-x:hover { border-color: var(--red); color: var(--red); }
.option.eliminated .option-x { background: var(--red); color: #fff; border-color: var(--red); }

.option-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #b8c4d3;
  font-weight: 800;
}

.option.selected .option-num { background: var(--blue); border-color: var(--blue); color: #fff; }

.option img {
  max-width: 100%;
  max-height: 130px;
}

.q-nav {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.nav-btn {
  height: 44px;
  border-radius: 8px;
  background: #e8eef7;
  color: var(--navy);
  font-weight: 800;
}

.nav-btn.next { background: var(--navy); color: #fff; }
.nav-btn.finish { background: var(--red); color: #fff; }
.nav-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── 하단 고정 툴바(국시원 표준) ── */
.bottombar {
  height: 62px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f1f5f9;
  border-top: 1px solid var(--line);
}

.bb-left, .bb-center, .bb-right { display: flex; align-items: center; gap: 8px; }
.bb-center { gap: 12px; }

.bb-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  font-weight: 800;
}
.bb-btn:hover { border-color: #9fb1c7; }

.bb-nav {
  height: 42px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.bb-nav:disabled { opacity: .4; cursor: not-allowed; }

.bb-progress {
  min-width: 82px;
  text-align: center;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bb-stat {
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: 13px;
}
.bb-stat b { margin-left: 6px; color: var(--navy); font-size: 15px; }
.bb-stat:hover { border-color: var(--blue); color: var(--navy); }

.bb-finish {
  height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
}

.bottombar .pause-btn { background: #fff7df; color: #8a5a12; border-color: #f4d58d; }

/* ★2026-09-02 형 「시원하게」 — 하단 버튼 13개가 빡빡해 글자가 쪼개져 보였다.
   글자는 절대 안 쪼개지게(nowrap) 하고, 세 묶음 사이 간격을 넉넉히 준다. */
.bb-btn, .bb-nav, .bb-stat, .bb-finish { white-space: nowrap; }
.bottombar { gap: 18px; }
.bb-left, .bb-right { gap: 10px; }
/* 화면이 좁아 한 줄에 다 안 들어가면 — 글자를 쪼개지 말고 줄을 바꾼다 */
@media (max-width: 1240px) and (min-width: 861px) {
  .bottombar { height: auto; min-height: 62px; flex-wrap: wrap; padding: 11px 16px; row-gap: 9px; justify-content: center; }
}

/* ── 그림판 ── */
.draw-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 12px;
}
.draw-tool {
  height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: #eef4fb;
  color: var(--navy);
  border: 1px solid var(--line);
  font-weight: 800;
}
.draw-tool.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.draw-tool.draw-clear { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.draw-label { font-size: 13px; font-weight: 800; color: var(--muted); margin-left: 6px; }
.draw-colors { display: flex; gap: 6px; }
.draw-color {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.draw-color.active { box-shadow: 0 0 0 2px var(--navy); }
.draw-width { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 700; }
.draw-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 820 / 440;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
.draw-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(15, 23, 42, .58);
  padding: 24px;
}

.modal.show {
  display: grid;
  place-items: center;
}

.modal-card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(840px, 92vh);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--shadow);
}

.modal-card.modal-portrait {
  width: min(440px, calc(100vw - 32px));
  min-height: min(650px, 86vh);
}

.modal-card.modal-calculator {
  width: min(390px, calc(100vw - 32px));
}

.modal-drag-handle {
  margin-top: 0;
  padding-right: 42px;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.modal-draggable .modal-drag-handle::after {
  content: "드래그해서 이동";
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  font-size: 24px;
}

.modal-actions .modal-primary {
  background: var(--navy);
  color: #fff;
}

.modal-actions .modal-ghost {
  color: var(--navy);
  border-color: var(--line);
  background: #f8fafc;
}

.memo-text {
  width: 100%;
  min-height: 440px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  font: inherit;
  line-height: 1.7;
}

.calculator {
  display: grid;
  gap: 12px;
}

.calc-display {
  width: 100%;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  font: 700 29px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.calc-number-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.calc-operators {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.calc-key {
  height: 62px;
  border-radius: 10px;
  background: #eef4fb;
  color: var(--navy);
  font-size: 24px;
  font-weight: 800;
  border: 1px solid var(--line);
}

.calc-number { background: #fff; }
.calc-clear { background: #fee2e2; color: #991b1b; }
.calc-operator { background: #e8eef7; font-size: 28px; }
.calc-equals { width: 100%; height: 64px; font-size: 30px; }

.calc-key.primary {
  background: var(--navy);
  color: #fff;
}

.calc-result {
  min-height: 42px;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--navy);
  font-weight: 800;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.result-card b { display: block; margin-bottom: 6px; }
.pass { color: var(--green); font-weight: 800; }
.fail { color: var(--red); font-weight: 800; }

.wrong-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 20px;
}

.wrong-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.wrong-card p {
  margin: 10px 0;
  line-height: 1.6;
}

.wrong-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.wrong-head span {
  color: var(--red);
  font-weight: 800;
}

.wrong-pick {
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

.explanation-box {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  line-height: 1.65;
  font-size: 14px;
}

.all-correct {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.analysis-text {
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}

@media (max-width: 860px) {
  .intro { place-items: start center; overflow-y: auto; }
  .intro-shell { grid-template-columns: 1fr; }
  .exam-picker { grid-template-columns: 1fr; }
  .visitor-form { grid-template-columns: 1fr; }
  .status-panel { display: none; }
  .topbar { height: auto; min-height: 88px; align-items: flex-start; padding: 14px; gap: 12px; flex-wrap: wrap; }
  /* ★2026-09-02 폰 검수 — 오른쪽 버튼들에 밀려 제목이 「신경언 / 어장애」로 쪼개졌다.
     제목(top-left)을 한 줄 전체로 올리고, 컨트롤은 그 아래 줄로 내린다. */
  .top-left { flex: 1 1 100%; }
  .topbar h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
  .workspace { height: auto; min-height: 0; overflow: visible; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .side-panel { max-height: 300px; border-left: 0; border-bottom: 1px solid var(--line); grid-column: 1; grid-row: 2; }
  .question-stage { padding: 16px; grid-column: 1; grid-row: 1; overflow: visible; }
  .question-card { min-height: 560px; padding: 18px; }
  .q-title { font-size: calc(22px * var(--qfs, 1)); }
  .option { font-size: calc(20px * var(--qfs, 1)); }
  .q-image-wrap { font-size: calc(18px * var(--qfs, 1)); }
  .options.cols-2 { grid-template-columns: 1fr; } /* 모바일은 항상 1열 */
  .memo-text { min-height: 50vh; }
  /* 하단 툴바 모바일: 화면 하단 고정 + 줄바꿈 허용 */
  .bottombar { height: auto; flex-wrap: wrap; padding: 10px; gap: 8px; position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -4px 12px rgba(15,23,42,.08); }
  .bb-left, .bb-center, .bb-right { flex-wrap: wrap; }
  .draw-canvas { aspect-ratio: 4 / 3; }
}

/* ── 회원/로그인/오답노트 게이트/관리자 (cbtauth.js) ── */
.auth-area { margin: 4px 0 16px; }
.auth-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc;
}
.auth-card.in { background: #eff6ff; border-color: #bfdbfe; }
.auth-hello { font-size: 15px; color: #173b73; }
.auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.admin-link {
  margin-top: 12px; background: none; border: 0; color: #94a3b8; font-size: 13px;
  cursor: pointer; text-decoration: underline; padding: 4px;
}
/* 2026-08-26: 교수님 문제은행 올리기 입구. 관리자 링크와 한 줄에 둔다. */
.admin-row { display: flex; gap: 16px; justify-content: center; align-items: center; }
a.admin-link { display: inline-block; }
.plan-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.plan-free { background: #e2e8f0; color: #475569; }
.plan-pending { background: #fef3c7; color: #92400e; }
.plan-paid { background: #dcfce7; color: #166534; }
.plan-suspended { background: #fee2e2; color: #991b1b; }

.auth-form { display: grid; gap: 12px; margin: 16px 0; }
.auth-form label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; color: #334155; }
.auth-form input {
  padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 16px; font-family: inherit;
}
.auth-form .req { color: #dc2626; }
.auth-msg { color: #dc2626; font-size: 14px; min-height: 18px; margin: 0; }
.loading { color: #64748b; text-align: center; padding: 20px; }

.gate-lock {
  text-align: center; padding: 28px 20px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;
}
.gate-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px; background: #fef3c7; color: #92400e;
  font-weight: 800; font-size: 15px; margin-bottom: 12px;
}
.gate-lock p { font-size: 16px; color: #334155; margin: 8px 0 16px; }
.gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate-login { max-width: 340px; margin: 4px auto 14px; text-align: left; }
.gate-login input { width: 100%; }
.gate-login .auth-msg { text-align: left; }

.wrong-copy-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 14px; padding: 12px 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  font-size: 14px; color: #1e40af; font-weight: 600;
}
.wrong-note {
  margin-top: 10px; padding: 12px; background: #eff6ff; border-left: 4px solid var(--blue);
  border-radius: 6px; font-size: 15px; line-height: 1.6; color: #1e293b;
}
.wrong-note.muted { background: #f1f5f9; border-left-color: #cbd5e1; color: #64748b; }
.ai-prompt { margin-top: 10px; }
.ai-prompt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 700; font-size: 14px; color: #475569; margin-bottom: 6px;
}
.ai-prompt-text {
  width: 100%; min-height: 84px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; background: #fff; box-sizing: border-box;
}

.admin-scroll { overflow-x: auto; margin: 12px 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.admin-table th { background: #f8fafc; font-weight: 700; color: #475569; }
.admin-date { color: #94a3b8; font-size: 13px; }

/* 채점 결과 과목 카드 = 클릭 시 그 과목 첫 문제로 */
.result-card { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.result-card:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(37,99,235,.15); }

/* 짧은 팝업(일시정지·제출확인) = 좁게 + 중앙정렬 */
.modal-card.modal-narrow { width: min(440px, 100%); text-align: center; }
.modal-card.modal-narrow h2 { text-align: center; }
.modal-card.modal-narrow .intro-actions { justify-content: center; }

/* 큰 화면에서 문제칸·텍스트를 화면 비율에 맞게 키움 (글자크기 배율 --qfs와 곱) */
@media (min-width: 1500px) {
  .question-card, .subject-strip { max-width: 1240px; }
  .q-title { font-size: calc(23px * var(--qfs, 1)); }
  .option { font-size: calc(21px * var(--qfs, 1)); min-height: 46px; }
  .q-image-wrap { font-size: calc(21px * var(--qfs, 1)); }
}
@media (min-width: 1900px) {
  .question-card, .subject-strip { max-width: 1440px; }
  .q-title { font-size: calc(24px * var(--qfs, 1)); }
  .option { font-size: calc(22px * var(--qfs, 1)); }
  .q-image-wrap { font-size: calc(22px * var(--qfs, 1)); }
}

/* ── 홈 3단계 마법사(회원가입 → 급수 → 모의고사) ── */
.wiz-shell { max-width: 720px; margin: 0 auto; width: 100%; }
.wiz-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; color: #fff; flex-wrap: wrap; }
/* 대문 제목 — 화면 폭이 어떻든 어절 한가운데서 갈리지 않게 한다.
   한글은 기본값이면 글자 단위로 끊겨 「모의/고사」 가 된다(2026-08-26 형 지적). */
.wiz-brand { min-width: 0; }
.wiz-brand h1 {
  margin: 3px 0 0;
  font-size: clamp(21px, 3.6vw, 31px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
  word-spacing: .08em;           /* 「언어재활사」와 「CBT」가 붙어 보이던 것(형 지적) */
  word-break: keep-all;          /* 어절 보존 */
  text-wrap: balance;            /* 두 줄이 되면 길이를 고르게 */
}
.wiz-brand h1 span { white-space: nowrap; }   /* 「언어재활사 CBT」·「모의고사」는 통으로 */
.eyebrow { word-break: keep-all; }
.wiz-header .auth-area { margin: 0; display: flex; justify-content: flex-end; }
.wiz-steps { display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.wstep { display: flex; align-items: center; gap: 8px; color: #8ea8cf; font-weight: 700; font-size: 13.5px; }
.wstep .wnum { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #9fb6d6; border: 1px solid rgba(255,255,255,.25); font-size: 14px; }
.wstep.on { color: #fff; }
.wstep.on .wnum { background: #fff; color: var(--navy); border-color: #fff; }
.wstep.done .wnum { background: var(--green); color: #fff; border-color: var(--green); }
.wbar { width: 38px; height: 2px; background: rgba(255,255,255,.2); margin: 0 10px; }
.wiz-panel { background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 26px 24px; color: var(--ink); }
.wiz-panel h2 { margin: 0 0 4px; font-size: 21px; font-weight: 800; color: var(--navy); }
.wsub { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.wiz-actions { display: flex; gap: 10px; margin-top: 20px; }
.wbtn { flex: 1; height: 46px; border-radius: 12px; font-weight: 800; font-size: 15px; }
.wlink { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--blue); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.wiz-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wopt { border: 1.5px solid var(--line); border-radius: 14px; padding: 18px; background: #f8fafc; cursor: pointer; text-align: center; }
.wopt.on { border-color: var(--blue); background: #f0f6ff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.wopt b { display: block; font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 3px; }
.wopt small { font-size: 12.5px; color: var(--muted); }
.wtier { font-size: 12.5px; font-weight: 800; color: var(--muted); margin: 0 0 10px; }
.wdiv { border: 0; border-top: 1px solid var(--line); margin: 18px 0 14px; }
.wrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; margin-bottom: 10px; cursor: pointer; transition: .15s; }
.wrow:hover { border-color: #a9c2e8; background: #f8fbff; }
.wrow.soon, .wrow.lock { cursor: not-allowed; background: #f6f8fb; border-style: dashed; opacity: .9; }
.wmeta { flex: 1; }
.wmeta b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.wmeta small { font-size: 12.5px; color: var(--muted); }
.wbadge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.wbadge.free { background: #e7f6ef; color: #0b7a52; border: 1px solid #b6e2ce; }
.wbadge.sub { background: #fff3d6; color: #96650f; border: 1px solid #f2d492; }
.wbadge.uni { background: #eaf1ff; color: #1d4ed8; border: 1px solid #c3d6f7; }
.wgo { font-size: 13px; font-weight: 800; color: var(--blue); white-space: nowrap; }
.wgo.soon, .wgo.lock { color: var(--amber); }
.wempty { color: var(--muted); font-size: 14px; padding: 16px 0; }
/* 마법사 패널(흰 배경) 안에서는 버튼 색을 반전 — navy 배경용 기본색이 흰 패널에 묻히는 것 방지 */
.wiz-panel .primary-btn { background: var(--navy); color: #fff; }
.wiz-panel .ghost-btn { background: #eef4fb; color: var(--navy); border: 1px solid var(--line); }
@media (max-width: 560px) { .wiz-header { flex-direction: column; } .wstep b { font-size: 12px; } .wbar { width: 24px; } }

/* ── 관리자 콘솔: 대학·기출 관리 ── */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.admin-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.admin-tab.active { color: var(--navy); border-bottom-color: var(--navy); }
.uni-create { display: flex; gap: 8px; margin: 12px 0 16px; }
.uni-create input { flex: 1; height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; font: inherit; font-size: 14px; background: #f8fafc; }
.uni-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: #fff; }
.uni-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.uni-head b { font-size: 15px; font-weight: 800; color: var(--ink); }
.uni-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; color: var(--muted); white-space: nowrap; }
.uni-badge.on { background: #e7f6ef; color: #0b7a52; }
/* 좌석 — 형이 판 인원. 다 차면 빨갛게 보여야 '추가로 받을 기회'를 놓치지 않는다 (2026-08-28) */
.seat-pill { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap; }
.seat-pill.full { background: #fee2e2; color: #b91c1c; }
.seat-pill.none { background: #f1f5f9; color: #64748b; }
.uni-exams { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.exam-chip { font-size: 12px; font-weight: 700; background: #e7f6ef; color: #0b7a52; border-radius: 999px; padding: 4px 10px; }
.exam-chip a { color: #0b7a52; text-decoration: none; font-weight: 900; margin-left: 2px; opacity: .55; }
.exam-chip a:hover { opacity: 1; }
.exam-none { font-size: 12.5px; color: #b45309; background: #fff7ed; border-radius: 8px; padding: 4px 10px; }
.uni-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.uni-empty { color: var(--muted); font-size: 13.5px; padding: 10px 0; }
.member-head { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.member-head b { font-size: 14px; font-weight: 800; }
.pending-pill { font-size: 12px; font-weight: 800; background: #fff3d6; color: #96650f; border: 1px solid #f2d492; padding: 3px 9px; border-radius: 999px; }
.plan-badge.plan-pending { background: #fff3d6; color: #96650f; }

/* 채점 결과 전체 정답표 (2026-08-17) — 맞힌 문항 정답도 확인 */
.answer-table { margin: 6px 0 18px; }
.ans-period { margin-bottom: 14px; }
.ans-period > b { color: var(--navy); font-size: 15px; }
.ans-legend { font-size: 11px; color: #64748b; margin: 2px 0 6px; }
.ans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; }
.ans-cell {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "no mark" "mine right";
  align-items: center; gap: 0 5px; border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 7px; font-size: 12px; background: #fff;
}
.ans-cell .ans-no { grid-area: no; font-weight: 800; color: var(--navy); }
.ans-cell .ans-mark { grid-area: mark; text-align: right; font-weight: 800; }
.ans-cell .ans-mine { grid-area: mine; color: #64748b; }
.ans-cell .ans-right { grid-area: right; text-align: right; font-weight: 800; color: var(--blue); }
.ans-cell.hit { background: #f0fdf4; border-color: #86efac; }
.ans-cell.hit .ans-mark { color: #16a34a; }
.ans-cell.miss { background: #fef2f2; border-color: #fecaca; }
.ans-cell.miss .ans-mark { color: #dc2626; }
.ans-cell.skip { background: #f8fafc; }
.ans-cell.skip .ans-mark { color: #94a3b8; font-size: 10px; }

/* 자료 상자(q.boxes) — 원본 문제지의 네모를 화면에도 (2026-08-17) */
.q-box {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1.5px solid #4b5563;
  border-radius: 6px;
  background: #fff;
  white-space: pre-wrap;
}
.q-box:first-child { margin-top: 8px; }
@media (max-width: 860px) { .q-box { padding: 12px; } }

/* 원본에서 여러 열로 벌려 조판된 자료 상자 — 열을 맞춰 세운다.
   max-content로 잡아야 각 열이 제 내용만큼만 차지하고 둘째 열이 한 줄로 정렬된다. */
.q-box.cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), max-content);
  gap: 6px 34px;
  justify-items: start;
}
/* 좁은 화면에서는 열을 풀어 한 줄씩 내린다. 가로 스크롤은 만들지 않는다. */
@media (max-width: 560px) {
  .q-box.cols { grid-template-columns: 1fr; gap: 4px; }
}

/* 발문을 이미지로 대체하는 경우(IPA·특수기호) — 2026-08-18 형 지시 */
.q-title-img { margin: 0 0 14px; }
.q-title-img img { max-width: 100%; height: auto; }
/* 선택지 이미지도 원본 크기를 넘지 않게 */
/* 선택지가 그림인 문항(13회 1교시 1번 등)은 그림 5개가 세로로 쌓여 화면을 넘긴다.
   높이 상한을 준다. 음성기호 이미지는 height를 em으로 받아 이미 작으므로 영향 없다. */
.option img { max-width: 100%; height: auto; vertical-align: middle; max-height: 120px; }


/* ── 형 지적 반영 (2026-08-18) ───────────────────────────────
   · 밑줄이 텍스트를 밀어 올리지 않게: 글자는 흐름 그대로 두고 라벨만 아래에 띄운다
   · 기호 이미지는 본문 글자 크기에 맞춘다(height를 em으로 받음)
   · 보기 사이를 넓혀 구분이 되게                                        */
/* 라벨이 아래에 들어갈 자리. ★밑줄 라벨(.ulg)이 있는 문항에만 준다 —
   전역으로 주면 밑줄 없는 발문까지 두 배로 높아져 선택지가 화면 밖으로 밀린다(2026-08-20). */
.q-title:has(.ulg) { line-height: 2.1; }
.ulg { position: relative; }                /* inline-block 아님 — baseline 유지 */
.ulg > u { text-underline-offset: 3px; }
/* 밑줄은 한 줄로 이어져야 한다 (2026-08-18 형 지적: 11회 2교시 51번).
   한글은 Noto Sans KR, [s:] 같은 기호는 IPA 글꼴로 그려지는데 글꼴마다 밑줄 두께·위치가
   달라 이음매가 끊겨 보였다. 두께·위치를 고정하고 글자를 피해 가는 동작(skip-ink)을 끈다. */
.q-title u, .option u {
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.ulg > i {
  position: absolute;                        /* 흐름에서 빼내 아래에 띄운다 */
  left: 0; right: 0; top: 1.15em;
  font-style: normal; font-size: .78em; color: #374151;
  text-align: center; white-space: nowrap; pointer-events: none;
}
/* 기호 이미지 — 글자 사이에 자연스럽게 앉게 */
img.sym {
  vertical-align: -0.18em;
  margin: 0 1px;
  max-width: 100%;
}
/* 보기 간격 넓히기 */
.options { gap: 12px; }
.option { padding: 12px 14px; }

/* 비밀번호 찾기·내 정보 (2026-08-18) */
.auth-help { margin: 14px 0 0; text-align: center; }
.link-btn {
  background: none; border: 0; padding: 4px 6px;
  color: var(--blue); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.link-btn:hover { color: var(--navy); }
.modal-lead { margin: 0 0 16px; color: var(--muted); line-height: 1.7; }
.mp-line { margin: 26px 0 20px; border: 0; border-top: 1px solid var(--line); }
/* 관리자 콘솔 — 비밀번호 재설정 요청 */
.reset-box {
  margin: 0 0 16px; padding: 14px 16px; border-radius: 10px;
  background: var(--amber-bg); border: 1px solid #f4d58d;
}
.reset-box b { display: block; margin-bottom: 8px; color: var(--amber); }
.reset-box ul { margin: 0; padding-left: 18px; }
.reset-box li { margin: 6px 0; line-height: 1.9; }

/* 문항 영상 자료 — 2026-08-26. 발문 그림(.figure)과 같은 크기 감각으로 둔다.
   자동재생 없음: 시험 중에 소리가 갑자기 나면 곤란하다. */
.q-video-wrap { margin: 14px 0; text-align: center; }
.q-video-wrap video {
  max-width: 100%; width: 30em; max-height: 46vh; border: 1px solid #cbd5e1;
  border-radius: 8px; background: #000;
}
/* 영상과 출처를 한 폭으로 묶는다 — 출처가 영상 오른쪽 끝에 맞아야 하기 때문 (2026-08-28 형 지시) */
.q-video-box { display: inline-block; max-width: 100%; }
.q-video-source {
  margin: 4px 2px 0; font-size: 11px; line-height: 1.4; color: #94a3b8;
  text-align: right; word-break: break-all;   /* 주소가 길어 좁은 화면에서 넘친다 */
}
@media (max-width: 640px) { .q-video-wrap video { width: 100%; } .q-video-box { display: block; } }

/* ── 맛보기 영역 박스 (2026-08-27) ─────────────────────────────────────
   형 결정으로 무료 미끼를 "많이 준다"에서 "네 약한 영역을 알려준다"로 바꿨다.
   그래서 박스마다 점수 막대가 있고, 60% 미만이면 약한 영역으로 색이 바뀐다. */
.areagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.abox { border: 1px solid var(--line); border-radius: 14px; padding: 14px 13px; background: #fff;
  cursor: pointer; transition: .15s; text-align: left; font: inherit; color: inherit; }
.abox:hover { border-color: #a9c2e8; background: #f8fbff; }
.abox .an { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 5px; }
.abox .ad { display: block; font-size: 11.5px; color: var(--muted); }
.abox .abar { display: block; height: 5px; border-radius: 99px; background: #eef2f7; margin-top: 9px; overflow: hidden; }
.abox .abar i { display: block; height: 100%; background: var(--blue); }
.abox.done .ad { color: var(--green); font-weight: 700; }
.abox.weak .ad { color: var(--red); }
.abox.weak .abar i { background: var(--red); }
.allbtn { width: 100%; padding: 14px; border-radius: 13px; border: 1px dashed #c3d6f7; background: #f6f9ff;
  color: var(--blue); font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit; }
.allbtn:hover { background: #eef4ff; }

/* ★모의고사 구매 배너 (형 지시 2026-09-02 「하단에 크게 · 대학생에게도」) —
   상단 작은 버튼 대신 맛보기 바로 아래에 눈에 띄게 둔다. */
.buy-mock{
  width:100%; margin:16px 0 4px; display:flex; align-items:center; gap:14px;
  padding:18px 20px; border:0; border-radius:16px; cursor:pointer; text-align:left;
  background:linear-gradient(135deg,#4f46e5 0%,#6d28d9 55%,#7c3aed 100%);
  color:#fff; box-shadow:0 8px 24px rgba(79,70,229,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.buy-mock:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(79,70,229,.45); }
.buy-mock:active{ transform:translateY(0); }

/* ── 환영 가이드 (회원가입 직후 사용법, 2026-09-03) ── */
.g-wrap{ position:relative; padding:6px 2px 2px; }
.g-skip{ position:absolute; top:-6px; right:-2px; background:none; border:0; color:#94a3b8;
  font-size:13px; cursor:pointer; padding:6px; font-family:inherit; }
.g-slides{ min-height:230px; display:flex; align-items:center; }
.g-slide{ display:none; width:100%; text-align:center; padding:8px 6px; }
.g-slide.on{ display:block; animation:gfade .25s ease; }
@keyframes gfade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.g-ic{ font-size:52px; line-height:1; margin:6px 0 14px; }
.g-h{ font-size:23px; font-weight:800; color:#0b2e6f; margin:0 0 12px; letter-spacing:-.01em; }
.g-p{ font-size:16px; line-height:1.65; color:#334155; margin:0; }
.g-p b{ color:#4338ca; }
.g-dots{ display:flex; justify-content:center; gap:7px; margin:16px 0 14px; }
.g-dot{ width:8px; height:8px; border-radius:50%; background:#dbe2ec; transition:all .2s; }
.g-dot.on{ background:#4f46e5; width:22px; border-radius:5px; }
.g-actions{ display:flex; gap:10px; }
.g-actions .ghost-btn, .g-actions .primary-btn{ flex:1; min-height:50px; font-size:16px; }
.guide-again{ width:100%; margin:0 0 14px; padding:13px; border-radius:11px; cursor:pointer;
  border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; font-size:15px; font-weight:800;
  font-family:inherit; }
.guide-again:hover{ background:#e0e7ff; }

/* ── 채점 결과: 정답표·AI 는 접어 둔다 (2026-09-03) ── */
.result-fold{ margin:14px 0 4px; border:1px solid var(--line,#e2e8f0); border-radius:11px; background:#f8fafc; }
.result-fold > summary{ cursor:pointer; padding:13px 15px; font-size:15px; font-weight:800; color:#334155;
  list-style:none; display:flex; align-items:center; }
.result-fold > summary::-webkit-details-marker{ display:none; }
.result-fold > summary::after{ content:'▾'; margin-left:auto; color:#94a3b8; }
.result-fold[open] > summary::after{ content:'▴'; }
.result-fold > *:not(summary){ margin:0 14px 14px; }
.result-fold .analysis-text{ width:calc(100% - 28px); }

/* ── 학습 방향 (형 지시 2026-09-03) ── */
.study-guide{ margin:14px 0 6px; padding:16px 18px; border-radius:13px;
  background:linear-gradient(135deg,#eef2ff,#faf5ff); border:1px solid #ddd6fe; }
.sg-h{ margin:0 0 12px; font-size:16px; font-weight:800; color:#4338ca; }
.sg-item{ margin:0 0 12px; }
.sg-item:last-child{ margin-bottom:0; }
.sg-name{ display:inline-block; font-size:15px; font-weight:800; color:#5b21b6;
  background:#fff; border-radius:7px; padding:3px 10px; margin-bottom:5px; }
.sg-p{ margin:4px 0 0; font-size:14px; line-height:1.65; color:#334155; }
.sg-p b{ color:#6d28d9; }

/* ── 코치마크 튜토리얼 (형 지시 2026-09-03) ── */
.bb-help{ color:#4338ca; border-color:#c7d2fe; background:#eef2ff; }
.tutor-btn{ width:100%; margin:14px 0 4px; padding:14px; border-radius:13px; cursor:pointer;
  border:1px dashed #c7d2fe; background:#f5f3ff; color:#5b21b6; font-size:15px; font-weight:800;
  font-family:inherit; }
.tutor-btn:hover{ background:#ede9fe; }

/* ── 사용법 둘러보기 팝업 (형 지시 2026-09-03 「설명서처럼 팝업으로」) ── */
.tut-wrap{ position:relative; }
.tut-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.tut-head b{ font-size:17px; color:#5b21b6; }
.tut-step{ font-size:13px; font-weight:800; color:#94a3b8; font-variant-numeric:tabular-nums; }
.tut-slides{ min-height:290px; display:flex; align-items:center; }
.tut-slide{ display:none; width:100%; text-align:center; }
.tut-slide.on{ display:block; animation:tutfade .25s ease; }
@keyframes tutfade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.tut-mock{ background:#0b1e40; border-radius:14px; padding:22px 18px; margin:4px 0 16px;
  min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.tut-title{ margin:0 0 8px; font-size:20px; font-weight:800; color:#0b2e6f; }
.tut-text{ margin:0; font-size:15px; line-height:1.65; color:#334155; }
.tut-text b{ color:#5b21b6; }
.tut-dots{ display:flex; justify-content:center; gap:7px; margin:16px 0 14px; }
.tut-dot{ width:8px; height:8px; border-radius:50%; background:#dbe2ec; transition:all .2s; }
.tut-dot.on{ background:#7c3aed; width:22px; border-radius:5px; }
.tut-nav{ display:flex; gap:10px; }
.tut-nav .ghost-btn, .tut-nav .primary-btn{ flex:1; min-height:50px; font-size:16px; }

/* 미니 화면 재현(mock) — 실제 앱 느낌으로 */
.tm-grid2{ display:flex; gap:10px; }
.tm-card{ flex:1; background:#16294d; border:1.5px solid #274264; border-radius:11px; padding:14px 8px; color:#cbd5e1; }
.tm-card.tm-on{ border-color:#7c3aed; background:#1e2a54; color:#fff; box-shadow:0 0 0 2px rgba(124,58,237,.4); }
.tm-card b{ display:block; font-size:18px; } .tm-card span{ font-size:12px; opacity:.7; }
.tm-list{ width:100%; max-width:320px; display:flex; flex-direction:column; gap:8px; }
.tm-row{ display:flex; justify-content:space-between; align-items:center; background:#16294d; border-radius:10px;
  padding:11px 14px; color:#e2e8f0; font-size:14px; font-weight:700; }
.tm-row em{ font-style:normal; font-size:12.5px; color:#93c5fd; }
.tm-row.tm-buy{ background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.tm-row.tm-buy em{ color:#fde047; }
.tm-ready{ background:linear-gradient(135deg,#4f46e5,#6d28d9); color:#fff; border:0; border-radius:12px;
  padding:15px 44px; font-size:20px; font-weight:800; letter-spacing:.05em; }
.tm-sub{ margin:8px 0 0; font-size:12.5px; color:#93a3c0; }
.tm-omr{ display:flex; align-items:center; gap:7px; }
.tm-omr .tm-qn{ width:22px; color:#cbd5e1; font-weight:800; font-size:14px; text-align:right; }
.tm-omr i{ width:34px; height:30px; display:grid; place-items:center; font-style:normal; font-size:13px;
  border-radius:999px; background:#16294d; color:#93a3c0; border:1px solid #274264; }
.tm-omr i.tm-on{ background:#7c3aed; color:#fff; border-color:#7c3aed; font-weight:800; }
.tm-tools{ display:flex; gap:8px; } .tm-tools span{ background:#16294d; color:#cbd5e1; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; }
.tm-fs{ display:flex; gap:6px; margin-top:4px; }
.tm-fs b{ width:34px; height:30px; display:grid; place-items:center; background:#16294d; color:#93a3c0; border-radius:8px; font-size:15px; }
.tm-fs b.tm-on{ background:#fff; color:#0b2e6f; }
.tm-result{ width:100%; max-width:300px; }
.tm-score{ font-size:24px; font-weight:800; color:#fff; margin-bottom:12px; } .tm-score small{ font-size:15px; color:#93a3c0; }
.tm-bars{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.tm-bar{ height:12px; border-radius:6px; background:#1e2a54; overflow:hidden; }
.tm-bar i{ display:block; height:100%; background:#7c3aed; border-radius:6px; }
.tm-bar.tm-low i{ background:#ef4444; }
.tm-tags{ font-size:12.5px; color:#93c5fd; font-weight:700; }
@media(max-width:430px){ .tut-title{font-size:18px} .tut-text{font-size:14px} }
/* ★2026-09-03 — 딤을 대상 요소의 box-shadow 로 그리면 **조상이 스택 문맥을 만들 때 통째로 가려진다.**
   실제로 `.auth-card` 의 조상 `#intro{position:fixed;z-index:30}` 때문에 z-index 10001 을 줘도
   딤(10000) 아래로 깔려 짚은 곳이 안 보였다. → 딤을 **구멍 뚫린 가림막 4장**으로 바깥에만 깐다.
   대상 위에는 아무것도 안 덮이므로 조상이 무엇이든 항상 보이고, 그대로 눌린다. */
.tour-spot{ position:relative; z-index:10001; border-radius:12px; }
.tour-mask{ position:fixed; background:rgba(15,23,42,.72); z-index:10000; }
/* 둘러보기 말풍선 안의 예시 성장 그래프 */
.tour-chart-cap{ display:block; margin:14px 0 4px; font-size:13px; font-weight:700; color:#64748b; }
.tour-chart-cap b{ color:#b45309; }
.tour-pop .cbt-chart{ width:100%; height:auto; display:block;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:4px; }
/* 말풍선 안의 예시 과목별 막대 — 결과 화면과 같은 부품을 쓰되 좁은 폭에 맞춘다 */
.tour-weak{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; }
.tour-weak .weak-row{ display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:8px; margin:6px 0; font-size:12px; }
.tour-weak .weak-name{ font-weight:800; color:#334155; white-space:nowrap; }
.tour-weak .weak-bar{ height:9px; border-radius:5px; background:#e2e8f0; overflow:hidden; }
.tour-weak .weak-bar i{ display:block; height:100%; background:#4f46e5; border-radius:5px; }
.tour-weak .weak-low .weak-bar i, .tour-weak .weak-row.weak-low .weak-bar i{ background:#ef4444; }
.tour-weak .weak-num{ color:#64748b; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tour-weak .weak-low .weak-num{ color:#b91c1c; font-weight:800; }
.tour-ring{ position:fixed; border:4px solid #4f46e5; border-radius:12px; pointer-events:none;
  z-index:10001; box-shadow:0 0 0 2px rgba(255,255,255,.22); }
.tour-pop{ position:fixed; z-index:10002; width:380px; max-width:calc(100vw - 24px);
  /* ★나단 검수 2026-09-03 — 말풍선이 화면보다 크면 어디에 놓아도 잘린다.
     세로도 화면 안으로 가두고, 넘치면 말풍선 안에서 스크롤한다(밖으로 흐르지 않게). */
  max-height:calc(100vh - 24px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border-radius:16px; padding:22px 24px; box-shadow:0 18px 44px rgba(15,23,42,.4); }
.tp-title{ display:block; font-size:19px; font-weight:800; color:#0b2e6f; letter-spacing:-.01em; }
.tp-text{ margin:10px 0 16px; font-size:15.5px; line-height:1.65; color:#334155; }
.tp-nav{ display:flex; align-items:center; gap:8px; }
.tp-dot{ font-size:12.5px; color:#94a3b8; font-weight:800; margin-right:auto; font-variant-numeric:tabular-nums; }
.tp-skip{ background:none; border:0; color:#94a3b8; font-size:13px; font-weight:700; cursor:pointer; padding:6px 8px; font-family:inherit; }
.tp-next{ background:#4f46e5; color:#fff; border:0; border-radius:10px; padding:11px 20px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; }
.tp-next:hover{ background:#4338ca; }
@media(max-width:430px){ .tour-pop{ width:calc(100vw - 24px); } }
@media(max-width:430px){ .g-h{font-size:21px} .g-p{font-size:15px} .g-ic{font-size:46px} }
.bm-star{ flex:none; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.18);
  display:grid; place-items:center; font-size:22px; color:#fde047; }
.bm-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.bm-tx b{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.bm-tx span{ font-size:13px; color:#e9e5ff; line-height:1.4; }
.bm-arw{ flex:none; font-size:26px; color:#fff; opacity:.85; }
@media(max-width:430px){ .buy-mock{ padding:15px 16px; gap:11px } .bm-tx b{ font-size:16.5px } .bm-tx span{ font-size:12.5px } }
.whint { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.6; }

/* ══ 가입·로그인 — 랜딩과 같은 옷 (2026-08-29) ══
   랜딩에서 넘어온 흐름이라 여기서 톤이 끊기면 다른 사이트로 온 것처럼 느껴진다.
   .modal-auth 가 붙은 모달에만 적용한다(다른 모달은 흰 카드 그대로). */
.modal-card.modal-auth {
  width: min(860px, 100%);
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #0B0D13;
  color: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.modal-card.modal-auth .modal-close { color: #9AA3B2; z-index: 5; }
.modal-card.modal-auth .modal-close:hover { color: #fff; }

.authwrap { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 520px; }
.authwrap.one { grid-template-columns: 1fr; }

/* 왼쪽 — 왜 가입하나 (랜딩 히어로와 같은 기법: 블롭 + 그레인) */
.authside {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 42px 34px; display: flex; flex-direction: column; justify-content: center;
  background: #08090D;
}
.authside::before, .authside::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -2;
}
.authside::before { width: 420px; height: 420px; background: rgba(43,107,255,.42); top: -140px; left: -120px; }
.authside::after  { width: 320px; height: 320px; background: rgba(112,49,220,.34); bottom: -120px; right: -110px; }
.authside .grain,
.authside::marker { display: none; }
.authtag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 12.5px; font-weight: 700; color: #00E0C6;
  border: 1px solid rgba(0,224,198,.34); background: rgba(0,224,198,.07);
  border-radius: 999px; padding: 6px 13px; margin-bottom: 20px;
}
.authbig {
  font-size: 27px; font-weight: 800; letter-spacing: -.035em; line-height: 1.28;
  margin: 0; color: #fff; word-break: keep-all;
}
.authbig em {
  font-style: normal;
  background: linear-gradient(96deg, #00E0C6, #2B6BFF 55%, #9C7BFF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.authlead { margin: 16px 0 0; font-size: 15px; color: #9AA3B2; line-height: 1.75; word-break: keep-all; }
.authlead b { color: #fff; font-weight: 700; }
.authpoints { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.authpoints li {
  position: relative; padding-left: 24px; font-size: 14.5px; color: #C9D0DC;
  line-height: 1.6; word-break: keep-all;
}
.authpoints li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 13px; height: 8px;
  border-left: 2px solid #00E0C6; border-bottom: 2px solid #00E0C6; transform: rotate(-45deg);
}
.authpoints b { color: #fff; font-weight: 750; }
.authnote { margin: 24px 0 0; font-size: 13px; color: #6D778A; }

/* 오른쪽 — 폼 */
.authmain { padding: 40px 36px; background: #0B0D13; display: flex; flex-direction: column; justify-content: center; }
.authh { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.authsub { margin: 8px 0 0; font-size: 14.5px; color: #9AA3B2; line-height: 1.75; word-break: keep-all; }
.authsub b { color: #fff; font-weight: 700; }

.modal-auth .auth-form { display: grid; gap: 13px; margin: 20px 0 0; }
.modal-auth .auth-form label {
  /* ★grid 로 두면 「이름」과 빨간 * 가 세로로 쌓여 별표만 아랫줄에 남는다(2026-08-29 실측).
     라벨 글자와 표시는 한 줄에, 입력칸만 아래로 내려간다. */
  display: block; font-size: 13.5px; font-weight: 650; color: #C9D0DC;
}
.modal-auth .auth-form label > input { margin-top: 7px; }
.modal-auth .auth-form input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05); color: #fff;
  border: 1px solid rgba(255,255,255,.13); border-radius: 11px;
  padding: 14px 15px; font-size: 15px; font-family: inherit;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.modal-auth .auth-form input::placeholder { color: #5A6478; }
.modal-auth .auth-form input:focus {
  outline: 0; background: rgba(255,255,255,.08);
  border-color: #2B6BFF; box-shadow: 0 0 0 3px rgba(43,107,255,.22);
}
.modal-auth .auth-form .req { color: #FF8A8A; font-weight: 700; }
.modal-auth .auth-form .opt { color: #6D778A; font-weight: 500; font-size: 12.5px; }
.modal-auth .auth-msg { color: #FF9B9B; font-size: 13.5px; min-height: 18px; margin: 2px 0 0; }

.authbtns { display: grid; gap: 9px; margin-top: 20px; }
.authbtn {
  width: 100%; border: 1px solid transparent; border-radius: 999px; padding: 15px 20px;
  font-size: 15.5px; font-weight: 750; font-family: inherit; cursor: pointer; transition: .16s;
}
.authbtn.primary {
  background: linear-gradient(96deg, #2B6BFF, #1B21C9); color: #fff;
  box-shadow: 0 10px 26px rgba(43,107,255,.36);
}
.authbtn.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(43,107,255,.48); }
.authbtn.ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.13); }
.authbtn.ghost:hover { background: rgba(255,255,255,.12); }

.modal-auth .auth-help {
  margin: 18px 0 0; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.modal-auth .auth-help .link-btn {
  background: none; border: 0; color: #8B93A3; font-size: 13.5px; cursor: pointer;
  font-family: inherit; padding: 4px 2px; text-decoration: underline; text-underline-offset: 3px;
}
.modal-auth .auth-help .link-btn:hover { color: #fff; }

@media (max-width: 760px) {
  .modal-card.modal-auth { width: min(460px, calc(100vw - 24px)); }
  .authwrap { grid-template-columns: 1fr; min-height: 0; }
  /* 폰에서는 설명을 위에 짧게만 — 폼이 먼저 보여야 한다 */
  .authside { padding: 26px 24px 22px; }
  .authbig { font-size: 21px; }
  .authpoints { gap: 8px; margin-top: 16px; }
  .authpoints li { font-size: 13.5px; }
  .authnote { display: none; }
  .authmain { padding: 26px 24px 30px; }
  .modal-auth .auth-form input { padding: 15px; font-size: 16px; }  /* 16px 미만이면 iOS 가 화면을 확대한다 */
}

/* ── 회차 이용권 (형 확정 2026-08-29) ── */
.wcredit { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.65;
  padding: 11px 13px; border-radius: 10px; background: #f6f8fb; border: 1px solid #e6eaf0; }
.wcredit.on { color: #123a8a; background: #eef3ff; border-color: #cfdcff; }
.wcredit b { color: #1b3bd8; font-weight: 800; }
.wcredit em { font-style: normal; color: #b45309; font-weight: 700; }
.wrow.pick { cursor: pointer; border-style: solid; border-color: #cfdcff; background: #f7faff; }
.wrow.pick:hover { background: #eef3ff; }
.wgo.pick { color: #1b3bd8; font-weight: 800; }
@media (max-width: 400px) { .areagrid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   2026-08-27 · 결과 화면: 더 공부할 영역 · 그래프 · 학교 비교 · 인쇄(PDF)
   ══════════════════════════════════════════════════════════ */
.weak-focus,
.chart-msg { margin: 6px 0 10px; color: #312e81; font-weight: 600; }
.chart-legend { margin: 4px 0 0; color: #64748b; font-size: 13px; }

.weak-list { display: flex; flex-direction: column; gap: 8px; }
.weak-row { display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: 10px; }
.weak-name { font-weight: 600; color: #1e293b; }
.weak-bar { background: #eef2ff; border-radius: 999px; height: 12px; overflow: hidden; }
.weak-bar > i { display: block; height: 100%; background: #4f46e5; border-radius: 999px; }
.weak-num { color: #475569; font-size: 14px; white-space: nowrap; }
/* 과락은 색만으로 알리지 않는다 — 글자로도 '과락'이라고 적는다(app.js) */
.weak-row.weak-low .weak-bar > i { background: #dc2626; }
.weak-row.weak-low .weak-num { color: #b91c1c; font-weight: 700; }

.cbt-chart { width: 100%; height: auto; max-width: 560px; display: block; margin: 4px 0 2px; }

.cmp-row { display: grid; grid-template-columns: 5.5em 1fr auto; align-items: center; gap: 10px; margin: 6px 0; }
.cmp-name { font-weight: 600; color: #1e293b; }
.cmp-bar { background: #eef2ff; border-radius: 999px; height: 14px; overflow: hidden; }
.cmp-bar > i { display: block; height: 100%; border-radius: 999px; }
.cmp-bar.cmp-mine > i { background: #4f46e5; }
.cmp-bar.cmp-avg > i { background: #94a3b8; }
.cmp-num { color: #475569; font-size: 14px; white-space: nowrap; }

@media (max-width: 480px) {
  .weak-row { grid-template-columns: 7em 1fr; }
  .weak-num { grid-column: 2; text-align: right; }
  .cmp-row { grid-template-columns: 4.5em 1fr; }
  .cmp-num { grid-column: 2; text-align: right; }
}

/* ── 인쇄(PDF로 저장) ──
   별도 라이브러리를 쓰지 않는다. 결과 카드만 남기고 나머지를 숨겨 그대로 저장하게 한다.
   한글 폰트를 따로 심을 필요가 없어 글자가 깨지지 않는다. */
@media print {
  body.printing-result > *:not(#modal) { display: none !important; }
  /* 화면용 모달은 '가운데 정렬 + 여백'이라 종이에서는 빈 페이지를 하나 더 만든다(실측). 전부 푼다. */
  html, body.printing-result { margin: 0 !important; padding: 0 !important; height: auto !important; }
  body.printing-result #modal {
    position: static !important; display: block !important; background: none !important;
    opacity: 1 !important; visibility: visible !important;
    inset: auto !important; padding: 0 !important; margin: 0 !important;
    place-items: normal !important; min-height: 0 !important; height: auto !important; overflow: visible !important;
  }
  body.printing-result #modal-body > *:last-child { margin-bottom: 0 !important; }
  body.printing-result .modal-card {
    position: static !important; max-height: none !important; height: auto !important;
    overflow: visible !important; box-shadow: none !important; border: 0 !important;
    max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
    transform: none !important;
  }
  body.printing-result #modal-body { max-height: none !important; overflow: visible !important; }
  /* 눌러야 하는 것들은 종이에서 쓸모가 없다 */
  body.printing-result .modal-close,
  body.printing-result .modal-actions,
  body.printing-result .intro-actions,
  body.printing-result #ai-summary,
  body.printing-result .analysis-text,
  body.printing-result .no-print { display: none !important; }
  body.printing-result h2 { page-break-after: avoid; }
  body.printing-result h3 { page-break-after: avoid; margin-top: 14px; }
  body.printing-result .weak-row,
  body.printing-result .cmp-row,
  body.printing-result .cbt-chart { page-break-inside: avoid; }
  /* 막대·그래프 색이 종이에서도 나오게 */
  body.printing-result * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 관리자 · 문항 분석 (2026-08-27) */
.muted-cell { color: #94a3b8; }
.item-table td { vertical-align: top; }
.item-table tr.item-suspect { background: #fff7ed; }
.choice-cell { white-space: nowrap; }
.choice-chip {
  display: inline-block; padding: 1px 6px; margin: 1px 0; border-radius: 999px;
  background: #f1f5f9; color: #475569; font-size: 12px;
}
.choice-chip.is-answer { background: #dcfce7; color: #166534; font-weight: 700; }
.flag-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.flag-badge.flag-warn { background: #fee2e2; color: #b91c1c; }
.flag-badge.flag-short { background: #f1f5f9; color: #64748b; }
.flag-why { color: #64748b; font-size: 12px; margin-top: 3px; max-width: 26em; white-space: normal; }

/* ══════════════════════════════════════════════════════════════
   앱 홈(첫 화면)을 랜딩과 같은 옷으로 — 형 지시 2026-08-29
   랜딩(/)이 검정인데 앱 홈만 밝은 보라라 톤이 끊겼다.
   ★기존 규칙은 그대로 두고 여기서 덮어쓴다(되돌리기 쉽고 다른 화면에 영향 없음).
   ══════════════════════════════════════════════════════════════ */
.intro {
  background: #08090D;
  isolation: isolate;
}
/* 랜딩 히어로와 같은 기법: 블롭 + 비네트 + 그레인 */
.intro::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(620px 620px at 12% 8%, rgba(43,107,255,.34), transparent 62%),
    radial-gradient(520px 520px at 88% 18%, rgba(112,49,220,.28), transparent 62%),
    radial-gradient(420px 420px at 50% 96%, rgba(0,224,198,.13), transparent 62%);
}
.intro::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.28'/></svg>");
}

/* 대문 */
.intro .eyebrow { color: #00E0C6; font-weight: 700; }
.wiz-brand h1 { color: #fff; }

/* 단계 표시 */
.wstep { color: #6D778A; }
.wstep .wnum { background: rgba(255,255,255,.07); color: #8B93A3; border-color: rgba(255,255,255,.14); }
.wstep.on { color: #fff; }
.wstep.on .wnum { background: linear-gradient(96deg,#2B6BFF,#1B21C9); color: #fff; border-color: transparent; }
.wstep.done .wnum { background: #00C9A7; color: #05231D; border-color: transparent; }
.wbar { background: rgba(255,255,255,.12); }

/* 본문 카드 */
.wiz-panel {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  color: #E7EAF0;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.wiz-panel h2 { color: #fff; }
.wsub, .wempty, .whint { color: #8B93A3; }
.wtier { color: #9AA3B2; }
.wdiv { border-top-color: rgba(255,255,255,.10); }
.wlink { color: #6FA0FF; }
.wlink:hover { color: #9BC0FF; }

/* 급수 고르기 */
.wopt { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.wopt:hover { background: rgba(255,255,255,.07); }
.wopt b { color: #fff; }
.wopt small { color: #8B93A3; }
.wopt.on { border-color: #2B6BFF; background: rgba(43,107,255,.14); box-shadow: 0 0 0 3px rgba(43,107,255,.20); }

/* 세트 줄 */
.wrow { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.10); }
.wrow:hover { background: rgba(255,255,255,.075); border-color: rgba(43,107,255,.45); }
.wrow.soon, .wrow.lock { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); opacity: .72; }
.wmeta b { color: #fff; }
.wmeta small { color: #8B93A3; }
.wgo { color: #6FA0FF; }
.wgo.soon, .wgo.lock { color: #B08A4A; }

/* 배지 */
.wbadge.free { background: rgba(0,224,198,.12); color: #5FE3D0; border-color: rgba(0,224,198,.30); }
.wbadge.sub  { background: rgba(255,193,84,.12); color: #FFCC77; border-color: rgba(255,193,84,.30); }
.wbadge.uni  { background: rgba(43,107,255,.14); color: #8FB6FF; border-color: rgba(43,107,255,.35); }

/* 맛보기 영역 박스 */
.abox { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.10); }
.abox:hover { background: rgba(255,255,255,.075); border-color: rgba(43,107,255,.45); }
.abox .an { color: #fff; }
.abox .ad { color: #8B93A3; }
.abox .abar { background: rgba(255,255,255,.09); }
.abox .abar i { background: linear-gradient(90deg,#2B6BFF,#00E0C6); }
.abox.done .ad { color: #5FE3D0; }
.allbtn {
  background: rgba(43,107,255,.12); border: 1px solid rgba(43,107,255,.35);
  color: #9BC0FF; font-weight: 800;
}
.allbtn:hover { background: rgba(43,107,255,.20); }

/* 회차 이용권 안내 (다크 판) */
.wcredit { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: #9AA3B2; }
.wcredit.on { background: rgba(43,107,255,.12); border-color: rgba(43,107,255,.34); color: #C9DBFF; }
.wcredit b { color: #6FA0FF; }
.wcredit em { color: #FFC077; }
.wrow.pick { background: rgba(43,107,255,.10); border-color: rgba(43,107,255,.40); }
.wrow.pick:hover { background: rgba(43,107,255,.18); }
.wgo.pick { color: #8FB6FF; }

/* 버튼 */
.intro .primary-btn, .wiz-panel .primary-btn {
  background: linear-gradient(96deg,#2B6BFF,#1B21C9); border: 0; color: #fff;
  box-shadow: 0 10px 26px rgba(43,107,255,.34);
}
.intro .primary-btn:hover, .wiz-panel .primary-btn:hover { filter: brightness(1.08); }
.intro .ghost-btn, .wiz-panel .ghost-btn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #E7EAF0;
}
.intro .ghost-btn:hover, .wiz-panel .ghost-btn:hover { background: rgba(255,255,255,.12); }

/* 로그인 안내 줄 · 아래 관리자 링크 */
.intro .auth-area { color: #C9D0DC; }
.admin-link { color: #6D778A; }
.admin-link:hover { color: #C9D0DC; }

/* 관리자 콘솔 안에서 다른 화면으로 (2026-08-29 형 지시: "어디로 나가지도 못하고") */
.admin-nav{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px;font-size:13.5px}
.admin-nav a{color:#4b5563;text-decoration:none;font-weight:700;
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:#f8fafc}
.admin-nav a:hover{background:#eef2f7;color:#111827}
/* 앱 홈의 관리자 버튼줄 — a 태그도 버튼처럼 보이게 */
.auth-actions a.mini-btn{display:inline-flex;align-items:center;text-decoration:none}

/* ══ 관리자 콘솔을 화면 꽉 채워 쓴다 (형 지시 2026-08-29)
   "박스를 작게 만들어 스크롤하고 좌우로 이동하게 하지 마라. 최대한 다 보이게."
   전에는 980px 박스라 화면이 넓어도 오른쪽 열이 잘렸다. ══ */
.modal:has(.modal-wide) { padding: 16px; }
.modal-card.modal-wide {
  width: calc(100vw - 32px);
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 22px 24px;
}
.modal-card.modal-wide .admin-scroll { overflow-x: visible; margin: 10px 0 0; }
.modal-card.modal-wide .admin-table { width: 100%; table-layout: auto; }
.modal-card.modal-wide .admin-table th,
.modal-card.modal-wide .admin-table td { white-space: nowrap; }
/* 이메일처럼 긴 칸만 줄바꿈 허용 — 나머지는 한 줄로 붙여 폭을 아낀다 */
.modal-card.modal-wide .admin-table td.wrap { white-space: normal; }

/* 승인 대기를 눈에 띄게 (형 지시: 기다리는 사람이 묻히면 안 된다) */
.wait-box {
  margin: 0 0 12px; padding: 12px 15px; border-radius: 10px;
  background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12;
  font-size: 14px; font-weight: 650;
}
.wait-box b { color: #C2410C; font-weight: 800; }
tr.row-waiting > td { background: #FFFBF5; }
tr.row-waiting > td:first-child { box-shadow: inset 3px 0 0 #F59E0B; }

/* 접어 둔 상세 */
.user-detail > td { background: #F8FAFC; padding: 12px 14px !important; }
.ud-grid { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13.5px; color: #334155; }
.ud-grid span { display: inline-flex; align-items: center; gap: 8px; }
.ud-grid i { font-style: normal; color: #94A3B8; font-weight: 700; font-size: 12.5px; }
.ghost-mini { background: #fff; border: 1px solid var(--line); color: #64748B; }

/* ══ 폰에서는 표를 카드로 (형 지시 2026-08-29: "좌우로 이동하게 하지 마라")
   6열짜리 표는 폰 폭(390px)에 절대 안 들어간다. 억지로 넣으면 글자가 뭉개지고
   가로로 밀어야 한다. 그래서 한 사람을 한 장의 카드로 세워 놓는다. ══ */
@media (max-width: 640px) {
  .modal-card.modal-wide { width: calc(100vw - 16px); max-height: calc(100vh - 16px); padding: 18px 14px; }
  .modal-card.modal-wide .admin-scroll { overflow-x: visible; }
  .modal-card.modal-wide .admin-table,
  .modal-card.modal-wide .admin-table tbody { display: block; width: 100%; }
  .modal-card.modal-wide .admin-table thead { display: none; }
  .modal-card.modal-wide .admin-table tbody tr:not(.user-detail) {
    display: block; border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  .modal-card.modal-wide .admin-table tbody tr.row-waiting {
    border-color: #F59E0B; background: #FFFBF5;
  }
  .modal-card.modal-wide .admin-table td {
    display: flex; align-items: center; gap: 10px; white-space: normal;
    border: 0; padding: 5px 0; font-size: 14px;
  }
  /* 무슨 값인지 왼쪽에 이름을 붙인다 — 표 머리글이 사라지므로 */
  .modal-card.modal-wide .admin-table td::before {
    content: attr(data-l); flex: none; width: 82px;
    color: #94A3B8; font-size: 12.5px; font-weight: 700;
  }
  .modal-card.modal-wide .admin-table td[data-l="이름"] { font-size: 16px; padding-bottom: 8px; }
  .modal-card.modal-wide .admin-table td[data-l="이름"]::before { display: none; }
  .modal-card.modal-wide .user-detail { display: block; }
  .modal-card.modal-wide .user-detail > td { display: block; padding: 10px 12px !important; }
  .modal-card.modal-wide .user-detail > td::before { display: none; }
  .ud-grid { flex-direction: column; gap: 8px; }
  /* 버튼이 여러 개인 칸은 줄바꿈 허용 */
  .modal-card.modal-wide .admin-table td[data-l="회차 이용권"],
  .modal-card.modal-wide .admin-table td[data-l="해설 승인"] { flex-wrap: wrap; }
}


/* 승인함 (2026-09-01 개편) — 종류마다 방을 나눈다. 배지 하나로 구분시키지 않는다. */
.ib-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:19px}
.ib-hd .ib-sub{font-size:14px;color:#64748b;font-weight:400}
.ib-rooms{display:flex;flex-direction:column;gap:10px}
.ib-room{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;
  padding:16px;border-radius:14px;border:2px solid var(--line,#e2e8f0);background:#fff;
  cursor:pointer;min-height:78px}
.ib-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-size:23px;background:#f1f5f9}
.ib-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ib-tx b{font-size:19px;line-height:1.25}
.ib-tx span{font-size:14px;color:#64748b;margin-top:2px}
.ib-cnt{flex:none;font-size:25px;font-weight:800}
.ib-arw{flex:none;color:#cbd5e1;font-size:20px}
.ib-room.zero{opacity:.45;cursor:default}
.ib-room.zero .ib-cnt{color:#94a3b8;font-size:16px}
.ib-money{border-color:#ddd6fe} .ib-money .ib-ic{background:#f5f3ff} .ib-money .ib-cnt{color:#7c3aed}
.ib-school{border-color:#bfdbfe} .ib-school .ib-ic{background:#eff6ff} .ib-school .ib-cnt{color:#0369a1}
.ib-prof{border-color:#bbf7d0} .ib-prof .ib-ic{background:#f0fdf4} .ib-prof .ib-cnt{color:#166534}
.ib-refund{border-color:#fed7aa} .ib-refund .ib-ic{background:#fff7ed} .ib-refund .ib-cnt{color:#c2410c}
.ib-unknown{border-color:#fca5a5} .ib-unknown .ib-ic{background:#fef2f2} .ib-unknown .ib-cnt{color:#b91c1c}
.ib-back{font:inherit;font-size:16px;background:none;border:none;color:var(--brand,#4f46e5);
  padding:9px 6px 9px 0;cursor:pointer;font-weight:800;min-height:44px}
.ib-note{font-size:15px;color:#64748b;margin:2px 0 10px;line-height:1.5}
.ib-note b{color:#0f172a}
.ib-red{color:#b91c1c;font-weight:700}
.ib-item{border:2px solid var(--line,#e2e8f0);border-radius:14px;padding:15px;margin-bottom:11px}
.ib-item.ib-money{background:#f5f3ff} .ib-item.ib-school{background:#eff6ff}
.ib-item.ib-prof{background:#f0fdf4} .ib-item.ib-unknown{background:#fef2f2}
.ib-item.ib-refund{background:#fff7ed}
.ib-nm{font-size:21px;font-weight:800;line-height:1.3}
.ib-uni{font-size:15px;color:#0369a1;font-weight:700}
.ib-sub2{font-size:15px;color:#64748b;margin-top:3px;word-break:break-all}
.ib-chk{margin:12px 0 0;padding:12px 13px;background:#fff;border:1px dashed #cbd5e1;
  border-radius:10px;font-size:15px;line-height:1.65}
.ib-chk b{font-size:17px}
.ib-warn{background:#fff7ed;border-color:#fed7aa}
.ib-acts{display:flex;gap:9px;margin-top:13px}
.ib-acts button{flex:1;font:inherit;font-size:17px;font-weight:800;padding:15px 8px;
  border-radius:12px;border:none;cursor:pointer;min-height:56px}
.ib-yes{color:#fff;background:#4f46e5}
.ib-money .ib-yes{background:#7c3aed} .ib-school .ib-yes{background:#0369a1} .ib-prof .ib-yes{background:#166534}
.ib-refund .ib-yes{background:#c2410c}
.ib-no{background:#f1f5f9;color:#475569;flex:0 0 33%!important}
.ib-bulk{width:100%;font:inherit;font-size:17px;font-weight:800;padding:15px;border:none;
  border-radius:12px;min-height:56px;color:#fff;background:#0369a1;cursor:pointer}
.ib-foot{display:flex;gap:8px;border-top:1px solid var(--line,#e2e8f0);padding:12px 0 0;margin-top:14px}
.ib-foot button{flex:1;font:inherit;font-size:15px;font-weight:800;padding:11px 4px;border-radius:11px;
  border:1px solid var(--line,#e2e8f0);background:#fff;cursor:pointer;min-height:50px;color:#64748b}
.ib-foot button.on{border-width:2px}
.ib-foot button.ib-money.on{border-color:#7c3aed;color:#7c3aed;background:#f5f3ff}
.ib-foot button.ib-school.on{border-color:#0369a1;color:#0369a1;background:#eff6ff}
.ib-foot button.ib-prof.on{border-color:#166534;color:#166534;background:#f0fdf4}
/* 환불 요청 (2026-09-02) — 돈이 나가는 일이라 다른 종류와 색을 확실히 가른다 */
.ib-foot button.ib-refund.on{border-color:#c2410c;color:#c2410c;background:#fff7ed}
.ib-foot button:disabled{opacity:.4;cursor:default}
#inbox-badge{display:inline-block;margin-left:6px;font-size:12px;font-weight:800;color:#b91c1c}
@media (max-width:640px){
  .ib-nm{font-size:19px} .ib-tx b{font-size:18px}
  .ib-acts{flex-wrap:wrap} .ib-no{flex:1 1 100%!important}
}


/* 문항 음성 자료 (형 지시 2026-09-01) */
.q-audio-wrap{margin:14px 0;padding:14px 16px;background:#f8fafc;
  border:1px solid var(--line,#e2e8f0);border-radius:10px}
.q-audio-head{font-size:15px;font-weight:700;color:#334155;margin-bottom:10px}
.q-audio-wrap audio{width:100%;min-height:44px}
@media (max-width:480px){ .q-audio-head{font-size:14px} }


/* 스위치 두 줄 · 교수님 칸 (형 지시 2026-09-01 — 두 갈래 경로) */
.sw-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:10px;margin-bottom:9px;font-size:15px;
  background:#eff6ff;border:1px solid #bfdbfe}
.sw-bar.off{background:#fef2f2;border-color:#fecaca}
.sw-bar.emg{background:#fff7ed;border-color:#fed7aa}
.sw-bar.emg.stopped{background:#fef2f2;border-color:#fca5a5}
.sw-note{font-size:13px;color:#64748b;font-weight:400}
.mini-btn.danger{background:#fff1f2;border-color:#fecdd3;color:#9f1239;font-weight:700}
.uni-profs{margin:7px 0 2px;display:flex;flex-wrap:wrap;gap:6px}
.prof-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;padding:4px 11px}
.prof-chip.wait{background:#fffbeb;border-color:#fde68a}
.prof-chip a{color:#94a3b8;text-decoration:none;font-weight:800;padding:0 2px}
.prof-chip a:hover{color:#dc2626}
.prof-mail{color:#64748b}
.prof-wait{color:#92400e;font-size:12px}
.prof-none{font-size:13px;color:#94a3b8}
@media (max-width:640px){
  .sw-bar{flex-direction:column;align-items:stretch}
  .sw-bar .mini-btn{min-height:44px}
  .prof-chip{font-size:12px}
}


/* 회차 체크해서 한 번에 팔기 (형 지시 2026-09-01) */
.xp-quick{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.xp-quick .mini-btn{min-height:44px;font-size:15px;padding:9px 14px}
.xp-list{max-height:46vh;overflow-y:auto;padding-right:4px}
.xp-grp{font-size:15px;font-weight:800;color:#64748b;margin:14px 0 8px}
.xp{display:flex;align-items:center;gap:13px;padding:13px 15px;border:2px solid var(--line,#e2e8f0);
  border-radius:12px;margin-bottom:8px;cursor:pointer;background:#fff;min-height:60px}
.xp.on{border-color:#4f46e5;background:#eef2ff}
.xp.sold{opacity:.55;cursor:default;background:#f1f5f9}
.xp-bx{flex:none;width:28px;height:28px;border-radius:8px;border:2px solid #cbd5e1;background:#fff;
  display:grid;place-items:center;font-size:18px;color:#fff;font-weight:800}
.xp.on .xp-bx{background:#4f46e5;border-color:#4f46e5}
.xp.sold .xp-bx{background:#94a3b8;border-color:#94a3b8}
.xp-nm{flex:1 1 auto;min-width:0;font-size:18px;font-weight:700}
.xp-tag{flex:none;font-size:13px;font-weight:800;padding:4px 11px;border-radius:999px;
  background:#e2e8f0;color:#475569}
.xp-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:2px solid #4f46e5;border-radius:13px;padding:13px 16px;margin-top:14px}
.xp-n{font-size:17px;font-weight:800} .xp-n b{color:#4f46e5;font-size:22px}
.xp-names{font-size:14px;color:#64748b;flex:1 1 100%;order:3}
.xp-bar .primary-btn{margin-left:auto;min-height:54px;font-size:17px;padding:14px 22px}
.xp-bar .primary-btn:disabled{background:#cbd5e1;cursor:default}
@media (max-width:640px){ .xp-nm{font-size:17px} .xp-bar .primary-btn{flex:1 1 100%;margin-left:0} }


/* 학교 줄 정리 (2026-09-01 최종 검수 — 버튼 8개를 3개로, × 를 크게) */
.uni-more{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:11px;
  border-top:1px dashed var(--line,#e2e8f0)}
.uni-more.hidden{display:none}
.uni-more .mini-btn{min-height:48px;font-size:15px;padding:11px 15px}
.mini-btn.more-btn{background:#f8fafc;color:#64748b}
.mini-btn.danger{color:#b91c1c;border-color:#fecaca;background:#fff5f5;font-weight:700}
/* ★노안·굵은 엄지로도 눌리게 — 전에는 글자 옆 작은 × 였다(갈렙 지적) */
.chip-x{width:34px;height:34px;min-width:34px;border-radius:50%;border:none;background:#fff;
  color:#64748b;font-size:18px;font-weight:800;cursor:pointer;line-height:1;padding:0;
  display:inline-grid;place-items:center;margin-left:6px}
.chip-x:hover{background:#fee2e2;color:#b91c1c}
.exam-chip,.prof-chip{display:inline-flex;align-items:center;padding:6px 6px 6px 14px}


/* 입금 안내 팝업 (형 지시 2026-09-01) */
.pay-box{border:2px solid #c7d2fe;background:#eef2ff;border-radius:13px;padding:16px;margin:0 0 14px}
.pay-box.wait{border-color:#fde68a;background:#fffbeb;font-size:16px;line-height:1.7}
.pay-line{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px dashed #c7d2fe}
.pay-line:last-of-type{border-bottom:none}
.pay-line span{flex:none;width:88px;font-size:15px;color:#64748b}
.pay-line b{font-size:19px;font-weight:800;word-break:break-all}
.pay-line.big b{font-size:24px;color:#4338ca}
.pay-acc{letter-spacing:.02em}
.pay-copy{width:100%;margin-top:12px;min-height:56px;font-size:17px;font-weight:800}
.pay-note{font-size:15px;color:#475569;line-height:1.8;background:#f8fafc;
  border-radius:10px;padding:13px 15px;margin:0 0 4px}
@media (max-width:480px){ .pay-line{flex-direction:column;gap:2px} .pay-line span{width:auto} }


/* READY 앞단 · 홈 · 대학 입장 (형 지시 2026-09-01) */
#ready-gate{position:fixed;inset:0;z-index:10000;background:#0f172a;
  display:grid;place-items:center;padding:24px;animation:rgIn .18s ease-out}
@keyframes rgIn{from{opacity:0}to{opacity:1}}
.rg-in{max-width:440px;width:100%;text-align:center;color:#fff}
.rg-name{font-size:26px;font-weight:800;margin:0 0 6px;line-height:1.35}
.rg-sub{font-size:17px;color:#94a3b8;margin:0 0 26px}
.rg-tips{text-align:left;background:rgba(255,255,255,.06);border-radius:14px;
  padding:16px 18px;margin:0 0 28px;font-size:16px;line-height:1.9;color:#cbd5e1}
.rg-tips p{margin:0}
.rg-tips b{color:#fff}
.rg-btn{width:100%;font:inherit;font-size:26px;font-weight:800;letter-spacing:.08em;
  padding:22px;border:none;border-radius:16px;background:#4f46e5;color:#fff;cursor:pointer;
  min-height:76px;box-shadow:0 6px 22px rgba(79,70,229,.45)}
.rg-btn:hover{background:#4338ca}
.rg-hint{font-size:15px;color:#94a3b8;margin:12px 0 0}
.rg-back{margin-top:26px;background:none;border:none;color:#94a3b8;font:inherit;font-size:15px;
  cursor:pointer;padding:10px;min-height:44px}
.rg-back:hover{color:#e2e8f0}

/* 쉬는 시간 화면 (형 지시 2026-09-04 「1교시와 2교시 사이」) — READY 화면과 같은 미감 */
#break-gate{position:fixed;inset:0;z-index:10000;background:#0f172a;
  display:grid;place-items:center;padding:24px;animation:rgIn .18s ease-out}
.bg-eyebrow{font-size:15px;font-weight:800;letter-spacing:.22em;color:#818cf8;margin:0 0 10px}
.bg-clock{font-size:76px;font-weight:800;line-height:1;margin:8px 0 26px;color:#fff;
  font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em}
/* 마지막 10초 — 국시원도 시작 10초 전 카운트다운을 띄운다 */
#break-gate.bg-soon .bg-clock{color:#fca5a5;animation:bgPulse 1s ease-in-out infinite}
@keyframes bgPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (max-width:480px){ .bg-clock{font-size:58px} }

/* 답안 제출 (형 지시 2026-09-04 「국시원처럼 다 만들자」)
   ⛔모달은 흰 배경이다. 이 앱의 전역 글자색은 밝은 회색이라 색을 안 주면 안 보인다
   (2026-09-04 국시원 안내 표에서 실제로 당했다 — 밝기 차이 16). 아래는 전부 색을 적는다. */
.sb-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 14px}
.sb-sum>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;
  padding:14px 10px;text-align:center;color:#334155}
.sb-sum b{display:block;font-size:30px;font-weight:800;line-height:1.1;color:#0f172a}
.sb-sum span{font-size:13px;color:#64748b}
.sb-sum .ok b{color:#16a34a}
.sb-sum .warn{background:#fff7ed;border-color:#fed7aa}
.sb-sum .warn b{color:#ea580c}
.sb-nums{font-size:14px;color:#64748b;background:#f8fafc;border-radius:9px;
  padding:10px 13px;margin:0 0 14px;line-height:1.7;word-break:keep-all}
.sb-warn{font-size:16px;color:#7f1d1d;background:#fef2f2;border:1px solid #fecaca;
  border-radius:10px;padding:12px 14px;margin:0 0 18px}
.sb-warn b{color:#b91c1c}
.sb-done{text-align:center;padding:8px 0 4px;color:#1e293b}
.sb-eyebrow{font-size:14px;font-weight:800;letter-spacing:.18em;color:#2563eb;margin:0 0 8px}
.sb-done h2{font-size:25px;color:#0f172a;margin:0 0 12px}
.sb-note{font-size:16px;color:#475569;line-height:1.75;margin:0 0 14px}
.sb-note b{color:#0f172a}
.sb-left{font-size:15px;color:#64748b;background:#f8fafc;border-radius:9px;
  padding:10px 14px;margin:0 0 20px;display:inline-block}
.sb-left b{font-family:ui-monospace,Menlo,monospace;font-size:18px;color:#0f172a}
@media (max-width:560px){ .sb-sum{grid-template-columns:repeat(2,1fr)} .sb-sum b{font-size:26px} }

/* 실제 국가시험 안내 (형 지시 2026-09-04) — 급수 선택 아래, 기본은 접힘 */
.ksw{margin:18px 0 4px;border:1px solid #dbe3ee;border-radius:13px;background:#f8fafc;overflow:hidden}
.ksw>summary{cursor:pointer;list-style:none;padding:16px 18px;font-size:17px;font-weight:800;
  color:#0b2e6f;display:flex;align-items:center;min-height:56px}
.ksw>summary::-webkit-details-marker{display:none}
.ksw>summary::after{content:'▾';margin-left:auto;color:#94a3b8;font-weight:400}
.ksw[open]>summary::after{content:'▴'}
.ksw>summary:hover{background:#eef4ff}
.ksw-in{padding:4px 18px 20px;border-top:1px solid #e6ecf5;color:#1e293b}
.ksw-lead{font-size:16px;line-height:1.7;margin:14px 0 12px;color:#1e293b}
.ksw-tb{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 12px}
.ksw-tb th{background:#eef2f8;color:#475569;font-size:13px;padding:8px 10px;text-align:left}
/* ⛔글자색을 반드시 적는다. 이 앱은 어두운 테마라 색을 안 주면 밝은 회색을 물려받아
   흰 배경 위에서 «흰 글씨»가 된다 — 2026-09-04 형이 「텍스트 너무 안 보여」로 잡았다.
   실측: 글자 밝기 234 / 배경 250 = 차이 16 이었다(사람이 읽으려면 90 이상은 되어야 한다). */
.ksw-tb td{border-top:1px solid #e6ecf5;padding:10px;vertical-align:top;line-height:1.55;
  color:#1e293b}
.ksw-tb td span{color:#64748b;font-size:13px}
.ksw-tb tbody tr td:first-child{font-weight:800;color:#0b2e6f}
.ksw-note{font-size:15px;line-height:1.7;background:#fffbeb;border:1px solid #fde68a;
  border-radius:10px;padding:11px 13px;margin:0 0 14px;color:#78350f}
.ksw-ul{margin:0 0 18px;padding-left:20px;font-size:15px;line-height:1.85;color:#334155}
.ksw-h{font-size:15px;font-weight:800;color:#0b2e6f;margin:18px 0 8px}
.ksw-video{border-radius:12px;overflow:hidden;background:#0f172a;aspect-ratio:16/9}
.ksw-video iframe{width:100%;height:100%;border:0;display:block}
.ksw-play{width:100%;height:100%;border:0;background:#0f172a;color:#fff;font:inherit;
  font-size:18px;font-weight:800;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;min-height:150px}
.ksw-play span{font-size:14px;font-weight:400;color:#94a3b8}
.ksw-play:hover{background:#1e293b}
.ksw-links{display:grid;gap:9px}
.ksw-links a{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:11px;
  border:1px solid #dbe3ee;background:#fff;text-decoration:none;color:#0b2e6f;
  font-size:16px;font-weight:700;min-height:56px;justify-content:center}
.ksw-links a span{font-size:13px;font-weight:400;color:#64748b}
.ksw-links a:hover{background:#eef4ff;border-color:#bcd0ee}
.ksw-src{font-size:13px;color:#64748b;line-height:1.6;margin:16px 0 0}
@media (max-width:480px){ .ksw-tb{font-size:14px} .ksw-in{padding:4px 13px 18px} }
.home-h1{cursor:pointer}
.wiz-steps .wstep{cursor:pointer}
/* 대학 가입자 입장 버튼 */
.uni-enter{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  padding:18px;border-radius:15px;border:2px solid #bbf7d0;background:#f0fdf4;cursor:pointer;
  min-height:84px;margin:4px 0 2px}
.uni-enter:hover{background:#dcfce7}
.ue-ic{flex:none;width:50px;height:50px;border-radius:14px;background:#fff;
  display:grid;place-items:center;font-size:25px}
.ue-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ue-tx b{font-size:20px;color:#166534;line-height:1.3}
.ue-tx span{font-size:14px;color:#15803d;margin-top:2px}
.ue-arw{flex:none;color:#86efac;font-size:24px}
@media (max-width:480px){ .rg-name{font-size:22px} .rg-btn{font-size:23px;padding:19px} }

.wtier.uni-tier{display:flex;align-items:center;gap:9px;color:#166534;font-size:17px}
.uni-cnt{font-size:14px;font-weight:800;background:#dcfce7;color:#166534;
  padding:3px 11px;border-radius:999px}

/* 학교 줄의 지금 코드 (형 지시 2026-09-01 「학교별 하나의 코드로」) */
.uni-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:9px 0 2px;
  font-size:15px;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:10px 13px}
.uni-code b{font-size:19px;letter-spacing:.06em;font-family:ui-monospace,Menlo,monospace}
.uni-code.none{background:#f8fafc;border-color:#e2e8f0;color:#94a3b8;font-size:14px}
.uc-use{font-size:13px;color:#92400e}
.uni-code .mini-btn{margin-left:auto;min-height:44px}

/* 「내 정보」 접기 (형 지적 2026-09-01 — 코드 넣기 버튼이 화면 밖에 있었다) */
.mp-fold{border:1px solid var(--line,#e2e8f0);border-radius:11px;margin:10px 0;background:#f8fafc}
.mp-fold > summary{cursor:pointer;padding:15px 16px;font-size:16px;font-weight:700;
  list-style:none;min-height:52px;display:flex;align-items:center}
.mp-fold > summary::-webkit-details-marker{display:none}
.mp-fold > summary::after{content:'▾';margin-left:auto;color:#94a3b8;font-weight:400}
.mp-fold[open] > summary::after{content:'▴'}
.mp-fold > summary:hover{background:#f1f5f9;border-radius:11px}
.mp-fold .auth-form{padding:0 14px}
.mp-fold .modal-actions{padding:0 14px 14px}

/* ── 내 성적 · 성장 그래프 · 오답 해설 (마이페이지, 2026-09-02) ── */
.mp-fold #mp-scores{padding:4px 14px 14px}
.ms-graph{background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:12px 14px;margin:6px 0 12px}
.ms-h{margin:0 0 8px;font-size:15px;font-weight:800;color:#0b2e6f}
.ms-lead{margin:0;font-size:14px;color:#475569;line-height:1.5}
.ms-sum{margin:8px 0 0;font-size:13.5px;font-weight:700;color:#334155}
.ms-scroll{overflow-x:auto}
.ms-table{width:100%;border-collapse:collapse;font-size:14px}
.ms-table th,.ms-table td{border-bottom:1px solid var(--line,#e2e8f0);padding:9px 8px;text-align:left;white-space:nowrap}
.ms-table th{font-size:12.5px;color:#64748b;font-weight:700}
.ms-num{font-weight:800;color:#0b2e6f}
.ms-mut{color:#94a3b8;font-weight:400;font-size:12.5px}
.ms-pass{color:#0f7a44;font-weight:800;font-size:13px}
.ms-fail{color:#b3261e;font-weight:800;font-size:13px}
.ms-wrong{background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:11px 13px;margin:8px 0}
.ms-wq{font-size:14px;font-weight:800;color:#0b2e6f}
.ms-wa{font-size:13.5px;margin-top:4px;color:#475569}
.ms-x{color:#b3261e} .ms-o{color:#0f7a44}
.ms-wn{margin-top:7px;font-size:13.5px;line-height:1.55;color:#334155;background:#f8fafc;border-radius:8px;padding:8px 10px}
/* 회원 탈퇴 (2026-09-02) — 되돌릴 수 없는 자리다.
   ★일부러 '눈에 띄는 빨간 버튼'을 만들지 않는다. 그러면 눌러 보고 싶어진다.
   테두리로만 알리고, 실행 버튼은 흐리게 둔다(확인 절차가 진짜 브레이크다). */
.mp-fold.mp-danger{border-color:#fecaca;background:#fff7f7}
.mp-fold.mp-danger > summary{color:#b91c1c}
.mp-fold.mp-danger > summary:hover{background:#fef2f2}
.wd-go{border-color:#fca5a5;color:#b91c1c}

/* 앱 → 성적 화면 건너가기 (교수님만) */
.go-teacher{display:flex;align-items:center;gap:13px;margin-top:18px;padding:15px 16px;
  border:2px solid #bfdbfe;border-radius:13px;background:#eff6ff;text-decoration:none;
  color:inherit;min-height:76px}
.go-teacher:hover{background:#dbeafe}
.gt-ic{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;
  display:grid;place-items:center;font-size:22px}
.gt-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.gt-tx b{font-size:18px;color:#0369a1;line-height:1.3}
.gt-tx span{font-size:14px;color:#0284c7;margin-top:2px}
.gt-arw{flex:none;color:#93c5fd;font-size:23px}

/* ── 지금 열려 있는 사람 (형 지시 2026-09-01 「승인 했으면 기간도 보여줘야」) ── */
.ib-room.ib-open{background:#f0f9ff;border-color:#bae6fd}
.ib-room.ib-open.ib-alert{background:#fff7ed;border-color:#fdba74}
.ib-item.ib-over{background:#fff7ed;border-color:#fdba74}
.ib-hd2{margin:12px 0 10px;font-size:15px}
.ib-hd2 .ib-sub{margin-left:8px;color:#c2410c;font-weight:600;font-size:13px}
.pd-line{margin-top:7px;font-size:15px;color:#334155}
.pd-line .pd-ok{color:#0369a1}
.pd-line .pd-over{color:#c2410c}
.pd-line .pd-free{color:#475569}
.pd-cred{margin-top:3px;font-size:13px;color:#64748b}
.ib-btns{margin-top:11px;display:flex;flex-wrap:wrap;gap:7px}
/* 버튼이 서로 붙어 잘못 눌리지 않게 — 갈렙 지적(2026-09-01 「한 행에 버튼 밀집」) */
.ib-btns .mini-btn{min-height:38px;padding:0 13px}
.ib-btns .mini-btn:last-child{margin-left:auto}
@media(max-width:430px){
  .ib-btns{gap:6px}
  .ib-btns .mini-btn{flex:1 1 auto;min-width:82px}
  .ib-btns .mini-btn:last-child{margin-left:0;flex-basis:100%}
}
.ib-foot .ib-open{background:#f0f9ff;border-color:#bae6fd}
.ib-foot .ib-open.ib-alert{background:#fff7ed;border-color:#fdba74}

/* ── 학생 화면 미리보기 띠 (형 지시 2026-09-01 「각 대학 들어가서 볼 수 있게」) ── */
/*   ★항상 보이게 고정한다 — 스크롤해서 사라지면 「내 화면인 줄 알고」 조작하게 된다. */
#peek-bar{position:fixed;left:0;right:0;top:0;z-index:9999;display:flex;align-items:center;gap:10px;
  padding:9px 14px;background:#78350f;color:#fff;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#peek-bar .pk-ic{font-size:18px;flex:0 0 auto}
#peek-bar .pk-tx{flex:1 1 auto;line-height:1.35}
#peek-bar .pk-tx b{color:#fde68a}
#peek-bar .pk-sub{display:block;font-size:12px;color:#fcd34d;margin-top:1px}
#peek-bar .pk-out{flex:0 0 auto;min-height:38px;padding:0 14px;border:0;border-radius:9px;
  background:#fff;color:#78350f;font-weight:700;font-size:14px;cursor:pointer}
body.peeking{padding-top:62px}
@media(max-width:430px){
  #peek-bar{flex-wrap:wrap;gap:7px;padding:8px 11px}
  #peek-bar .pk-tx{flex:1 1 100%;font-size:13px}
  #peek-bar .pk-out{flex:1 1 100%}
  body.peeking{padding-top:104px}
}
/* 열어 준 회차가 0개일 때 — 눈에 띄게 (형 지시 2026-09-01) */
#peek-bar.none{background:#7f1d1d}
#peek-bar.none .pk-sub{color:#fecaca;font-weight:600}

/* 학과 한 번에 열기 (형 지시 2026-09-02 — 승인 한 번으로) */
.uni-setup{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;background:#fbfcfe}
.uni-setup summary{cursor:pointer;font-weight:800;font-size:15px;color:var(--navy)}
.us-help{margin:8px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.6}
.us-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.us-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.us-grid input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.uni-setup>button{margin-top:12px}
.us-wait{margin-top:10px;font-size:13px;color:var(--muted)}
.us-done{margin-top:14px;background:#eef7f1;border:1px solid #bfe0cc;border-radius:10px;padding:14px}
.us-done>b{display:block;font-size:15px;color:#0f7a44}
.us-done ul{margin:8px 0 0 18px;padding:0;font-size:13px;color:#33465c;line-height:1.75}
.us-code{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.us-code span{font-size:12.5px;color:var(--muted)}
.us-code input{flex:1;min-width:220px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff}
.us-note{margin-top:10px;font-size:13px;color:#33465c;line-height:1.7}

/* 학과 도입 신청 (형 지시 2026-09-02) */
.sg-school{margin-top:16px;padding:14px 16px;background:#f4f7fd;border:1px solid #dce4f5;border-radius:10px}
.sg-school b{display:block;font-size:14px;color:#1b2b52}
.sg-school span{display:block;margin-top:5px;font-size:12.5px;line-height:1.6;color:#5b6478}
.link-btn.strong{margin-top:8px;font-weight:800;color:#1B3BD8}
.sr-price{margin-top:6px;padding:12px 14px;background:#f7f8fb;border-radius:9px;font-size:13.5px;color:#3c4351;line-height:1.7}
.sr-amt{font-size:18px;color:#0b2e6f}
.sr-sub{display:block;margin-top:4px;font-size:12.5px;color:#7b8496}
.sr-wait{margin-top:14px;background:#eef7f1;border:1px solid #bfe0cc;border-radius:10px;padding:16px}
.sr-wait p{margin:0 0 8px;font-size:14px;line-height:1.7;color:#22402f}
.sr-wait p:last-child{margin-bottom:0}

/* 학교 코드 넣기 안내 (형 지시 2026-09-02) */
.joinbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px;
  padding:14px 16px;background:#eef3ff;border:1px solid #cfdcff;border-radius:12px}
.joinbar b{font-size:15px;color:#12234d}
.joinbar span{flex:1;min-width:200px;font-size:13px;line-height:1.6;color:#4a5570}
.joinbar.wait{background:#fff7e8;border-color:#f0dcb4}
.joinbar.wait b{color:#7a5210}
.joinbtn{background:#1B3BD8;color:#fff;border:0;border-radius:9px;padding:10px 18px;
  font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.joinbtn:hover{background:#152fa8}
.ce-keep{margin-top:14px;background:#eef7f1;border:1px solid #bfe0cc;border-radius:10px;padding:14px}
.ce-keep b{display:block;font-size:14px;color:#166534}
.ce-keep span{display:block;margin-top:6px;font-size:13px;line-height:1.7;color:#22402f}

/* ══ 관리자 쿠폰 탭 (2026-09-03) ══════════════════════════════════════════
   말놀이터 판매 쿠폰 발급·현황·정지. 형이 직접 쓰는 화면이라 숫자를 크게. */
.cp-sum{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px }
.cp-sum span{ flex:1 1 120px; background:#f1f5f9; border-radius:10px; padding:10px 12px;
  font-size:13px; color:#475569; font-weight:700; text-align:center }
.cp-sum b{ display:block; font-size:22px; color:#0b2e6f; font-variant-numeric:tabular-nums; margin-top:2px }
/* 청구 = 보낸 수 − 회수 − 환불. 형이 말놀이터에 청구할 금액이라 눈에 띄게. */
.cp-sum .cp-bill{ background:#eef2ff; border:2px solid #c7d2fe }
.cp-sum .cp-bill b{ color:#4338ca }
.cp-sum .cp-bill i{ display:block; font-style:normal; font-size:13px; font-weight:800; color:#4338ca; margin-top:1px }
.cp-billn{ color:#4338ca; font-weight:800 }
.cp-row select{ padding:9px 11px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px;
  font-family:inherit; background:#fff }
.cp-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:0 0 16px }
.cp-table th{ text-align:left; background:#f8fafc; color:#64748b; font-weight:800;
  padding:8px 10px; border-bottom:2px solid #e2e8f0; white-space:nowrap }
.cp-table td{ padding:9px 10px; border-bottom:1px solid #eef2f7; vertical-align:middle }
.cp-n{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700 }
.cp-used{ color:#166534; font-weight:800 }
.cp-stop{ color:#b91c1c; font-weight:800 }
.cp-partner{ font-size:11.5px; color:#94a3b8; font-weight:700 }
.cp-when{ color:#64748b; font-size:12.5px; white-space:nowrap }
.cp-empty{ color:#94a3b8; text-align:center; padding:22px 0 }
.cp-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; letter-spacing:.02em }
.cp-make, .cp-stopbox{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
  padding:14px 16px; margin:0 0 12px }
.cp-make > b, .cp-stopbox > b, .cp-list > b{ display:block; font-size:15px; color:#0b2e6f; margin-bottom:10px }
.cp-row{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap }
.cp-row label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:#475569; font-weight:700 }
.cp-row input{ padding:9px 11px; border:1px solid #cbd5e1; border-radius:8px; font-size:14px;
  font-family:inherit; min-width:130px }
.cp-list{ margin-top:16px; border-top:2px solid #e2e8f0; padding-top:14px }
.cp-list .mini-btn{ margin-bottom:10px; display:inline-block }
.cp-codes{ max-height:340px; overflow-y:auto; display:block }
@media(max-width:560px){ .cp-row{ flex-direction:column; align-items:stretch }
  .cp-row input{ width:100% } .cp-sum span{ flex:1 1 46% } }

/* ★2026-09-03 형 결정 — 둘러보기를 갑자기 시작하지 않고 「먼저 묻는다」.
   딤도 화면 잠금도 없다. 이 카드를 누른 뒤에야 둘러보기가 시작된다. */
.tour-invite{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:10003; width:min(420px, calc(100vw - 32px));
  background:#fff; border-radius:16px; padding:20px 22px;
  box-shadow:0 18px 44px rgba(15,23,42,.34); text-align:center;
  animation:tourInviteUp .28s ease-out both; }
@keyframes tourInviteUp{ from{ opacity:0; transform:translate(-50%, 14px);} to{ opacity:1; transform:translate(-50%, 0);} }
.tour-invite b{ display:block; font-size:19px; font-weight:800; color:#0b2e6f; margin-bottom:6px; }
.tour-invite p{ margin:0 0 16px; font-size:15px; line-height:1.5; color:#334155; }
.tour-invite .ti-row{ display:flex; gap:10px; }
.tour-invite button{ flex:1; padding:13px 10px; border-radius:11px; font-size:15px; font-weight:700;
  border:1px solid #cbd5e1; background:#f8fafc; color:#334155; cursor:pointer; }
.tour-invite button.ti-go{ border-color:transparent; background:#4f46e5; color:#fff; }
.tour-invite button:hover{ filter:brightness(.97); }

/* ★2026-09-04 — 오답풀이(왜 틀렸나). 교수님 승인으로 켰다.
   [해설]과 색을 갈라 학생이 두 가지를 구분해 읽게 한다. */
.wrong-note.why{margin-top:8px;border-left:3px solid #f59e0b;background:rgba(245,158,11,.08)}
.wrong-note.why b{color:#b45309}
@media (prefers-color-scheme: dark){
  .wrong-note.why{background:rgba(245,158,11,.12)}
  .wrong-note.why b{color:#fbbf24}
}

/* 오답풀이(왜 틀렸나) — 응시 이력 → 해설 보기 쪽 */
.ms-wn.why{margin-top:6px;border-left:3px solid #f59e0b;background:rgba(245,158,11,.08);padding-left:9px}
.ms-wn.why b{color:#b45309;margin-right:4px}
@media (prefers-color-scheme: dark){ .ms-wn.why b{color:#fbbf24} }

/* 오답풀이 — 다른 선택지 접기 */
.why-more{margin-top:6px}
.why-more summary{cursor:pointer;font-size:.92em;opacity:.75}
.why-more ul{margin:6px 0 0;padding-left:18px}
.why-more li{margin:4px 0;font-size:.94em;line-height:1.6}

/* 회원표 순번 — 가입 순. 숫자가 눈에 안 띄게 조용히, 그러나 폭은 고정해 줄이 흔들리지 않게. */
.admin-table th:first-child, .admin-table td.row-no { width: 46px; text-align: right; }
.admin-table td.row-no { color: #8b93a7; font-variant-numeric: tabular-nums; font-size: 13px; }
@media (max-width: 760px) { .admin-table td.row-no::before { content: '번호 '; } }