/* 디자인 토큰. enterprise-ui-design-guide 를 따르되 바탕은 흑백으로 두고 강조만 네이비로 한다. */
:root {
  --color-app-bg: #ffffff;
  --color-sidebar-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f7f7f7;
  --color-divider: #f0f0f0;
  --color-border: #e5e5e5;
  --color-border-strong: #d4d4d4;

  --color-primary-soft: #e8edf6;
  --color-primary-light: #94a3c4;
  --color-primary: #1b2a4e;
  --color-primary-dark: #14203d;

  --color-text-strong: #171717;
  --color-text: #404040;
  --color-text-muted: #737373;
  --color-text-disabled: #a3a3a3;

  --color-neutral-bg: #f4f4f4;
  --color-neutral-text: #525252;
  --color-warning-bg: #fdf0ee;
  --color-warning-text: #b3341c;

  --radius-control: 3px;
  --radius-navigation: 3px;
  --radius-panel: 4px;
  --radius-modal: 6px;

  --spacing-page: 24px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 56px;
  --topbar-height: 52px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-panel: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 16px 40px -12px rgba(0, 0, 0, 0.22);

  --font-sans: "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-app-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
}

.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 상단 전역 바 ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--topbar-height);
  padding: 0 var(--spacing-page);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
}

.topbar__mark {
  flex: none;
  width: 24px; height: 24px;
  display: block;
}

.topbar__nav { display: flex; gap: 4px; }

.topbar__link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-navigation);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.topbar__link:hover { background: var(--color-surface-subtle); color: var(--color-text); }

.topbar__link[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.topbar__spacer { flex: 1; }

.topbar__note { font-size: 11px; color: var(--color-text-disabled); }

.topbar .topbar__menu-btn { display: none; }

/* ---------- 앱 셸 ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: calc(100vh - var(--topbar-height));
  transition: grid-template-columns var(--transition-panel);
}

.shell--plain { grid-template-columns: minmax(0, 1fr); }

.sidebar {
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
}

.sidebar__inner {
  position: sticky;
  top: var(--topbar-height);
  padding: 12px 8px;
}

/* 접기 단추: 사이드바 오른쪽 경계에 걸친 작은 원 */
.sidebar__collapse {
  position: absolute;
  top: 14px;
  right: -12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sidebar__collapse:hover { color: var(--color-text-strong); border-color: var(--color-border-strong); }
.sidebar__collapse svg { transition: transform var(--transition-fast); }

.sidebar__abbr {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-control);
  font-size: 12.5px;
  font-weight: 600;
}

/* 접힌 상태: 56px, 글자 대신 머리글자만 */
@media (min-width: 901px) {
  html.sidebar-collapsed .shell { grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr); }
  html.sidebar-collapsed .sidebar__inner { padding: 12px 8px; }
  html.sidebar-collapsed .sidebar__collapse svg { transform: rotate(180deg); }
  html.sidebar-collapsed .sidebar__label,
  html.sidebar-collapsed .sidebar__text,
  html.sidebar-collapsed .sidebar__item .tag,
  html.sidebar-collapsed .sidebar__chevron,
  html.sidebar-collapsed .sidebar__sub { display: none; }
  html.sidebar-collapsed .sidebar__abbr { display: inline-flex; }
  html.sidebar-collapsed .sidebar__item {
    width: 40px; min-height: 40px;
    padding: 0;
    justify-content: center;
  }
  html.sidebar-collapsed .sidebar__item--toggle { width: 40px; }
  html.sidebar-collapsed .sidebar__group + .sidebar__group { margin-top: 8px; }
}

.sidebar__group + .sidebar__group { margin-top: 12px; }

.sidebar__label {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-navigation);
  font-size: 13px;
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.sidebar__item:hover { background: #efefef; }

.sidebar__item[aria-current="page"] {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* 현재 화면이 속한 상위 항목은 연한 강조로만 표시한다 */
.sidebar__item[data-state="group"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.sidebar__item--toggle {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
}

.sidebar__chevron {
  flex: none;
  color: currentColor;
  transition: transform var(--transition-fast);
}

.sidebar__item--toggle[aria-expanded="false"] .sidebar__chevron { transform: rotate(-90deg); }

.sidebar__sub[hidden] { display: none; }

.sidebar__sub { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--color-border); }

.sidebar__item--muted { color: var(--color-text-disabled); cursor: default; }
.sidebar__item--muted:hover { background: transparent; }

.main { min-width: 0; padding: var(--spacing-page); }

.main--reading { max-width: 880px; margin: 0 auto; }

/* ---------- 페이지 헤더 ---------- */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.page-header__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
}

.page-header__meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.page-header__meta strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-right: 2px;
}

/* ---------- 툴바 ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

/* 쪽머리 한 줄에 제목·고르개·집계를 나란히 둔다 */
.page-header .toolbar { flex: 1; justify-content: center; padding: 0; }
.page-header__title { white-space: nowrap; }
@media (max-width: 900px) {
  .page-header { flex-wrap: wrap; }
  .page-header .toolbar { flex: 1 0 100%; justify-content: flex-start; order: 3; }
}

.field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.select, .input {
  height: 32px;
  padding: 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 12px;
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.select:hover, .input:hover { border-color: var(--color-border-strong); }
.select:focus, .input:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.input { min-width: 180px; }

.toolbar__spacer { flex: 1; }

.toolbar__count { font-size: 12px; color: var(--color-text-muted); }
.toolbar__count strong { color: var(--color-text-strong); font-weight: 600; }

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.btn--secondary { border-color: var(--color-border); }
.btn--secondary:hover { background: var(--color-surface-subtle); border-color: var(--color-border-strong); }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--soft { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.btn--soft:hover { background: #d9e0ee; }

.btn--ghost { color: var(--color-text-muted); }
.btn--ghost:hover { background: var(--color-surface-subtle); color: var(--color-text); }

.btn--icon { width: 32px; padding: 0; }
.btn[hidden] { display: none; }

.btn[aria-pressed="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ---------- 태그와 배지 ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-control);
  background: var(--color-neutral-bg);
  color: var(--color-neutral-text);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.tag--primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.tag--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* ---------- 테이블 ---------- */

.table-wrap {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* 직계 자식이 표인 목록만 남은 높이를 채운다. 본문 안의 표는 페이지와 함께 스크롤한다. */
.main:has(> .table-wrap) {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.table { width: 100%; border-collapse: separate; border-spacing: 0; }

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.table td {
  border-bottom: 1px solid var(--color-divider);
  padding: 7px 12px;
  font-size: 12.5px;
  vertical-align: middle;
}

.table tbody tr { cursor: pointer; transition: background var(--transition-fast); }
.table tbody tr:hover td { background: var(--color-surface-subtle); }
.table tbody tr:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: -2px; }
.table tbody tr:last-child td { border-bottom: none; }

.table td.is-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
/* 시험 이름은 `수능 B형`처럼 짧아도 줄이 바뀌면 읽기 나쁘다 */
.table .col-exam { white-space: nowrap; }
.table th.is-center, .table td.is-center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.table td.is-center { color: var(--color-text-muted); }
.table td.is-year { color: var(--color-text); font-weight: 500; }
.table td.is-topic { color: var(--color-text-strong); font-weight: 500; }
.table td.is-topic .tag { margin-left: 4px; vertical-align: 1px; }

.empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.empty__title { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }

/* ---------- 모달 ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-panel);
}

.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.modal {
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  transform: translateY(8px);
  transition: transform var(--transition-panel);
}

.modal-backdrop.is-open .modal { transform: none; }

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--color-border);
}

.modal__title { font-size: 16px; font-weight: 600; color: var(--color-text-strong); }

.modal__sub {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.modal__body { padding: 20px; overflow-y: auto; }

.modal__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
}

.modal__foot-spacer { flex: 1; }

/* ---------- 지문과 문항 ---------- */

.passage {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-strong);
  max-width: 42em;          /* 한글은 한 줄 40자 안팎이 읽기 편하다 */
}

.passage p { margin: 0 0 16px; text-indent: 1em; }
/* 원문이 공백으로 그려 둔 빈칸 */
.keep { white-space: pre; }
.passage p:last-child { margin-bottom: 0; }

.passage__label { font-weight: 700; margin: 16px 0 6px; text-indent: 0; }

.passage-rule { border: none; border-top: 1px solid var(--color-border); margin: 20px 0; }

.license {
  margin: 16px 2px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.question + .question { margin-top: 22px; }

.question__stem {
  display: flex;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-strong);
  line-height: 1.7;
}

.question__no { flex: none; min-width: 24px; font-variant-numeric: tabular-nums; }

.question__points { font-weight: 500; color: var(--color-text-muted); font-size: 12px; }

.question__extra {
  margin: 10px 0 0 32px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.9;
  max-width: 42em;
}

/* 화자나 항목이 바뀌는 줄은 위 여백을 줘서 붙어 보이지 않게 한다 */
.question__extra .line + .line { margin-top: 6px; }
.question__extra .line + .line.is-marked { margin-top: 12px; }
.question__extra .line { white-space: pre-wrap; }
.question__extra .gap { height: 8px; }

.question__extra::before {
  content: "< 보 기 >";
  display: block;
  text-align: center;
  letter-spacing: 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.choices { margin: 8px 0 0 32px; }

.choice {
  display: flex;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-control);
  font-size: 14px;
  line-height: 1.75;
  max-width: 44em;
}

.choice__mark { flex: none; width: 18px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* 머리글 아래 칸으로 나뉜 선택지. 머리글 밑줄만 긋고 양옆 테두리는 두지 않는다 */
.choice-table { margin: 8px 0 0 32px; border-collapse: collapse; font-size: 14px; line-height: 1.75; }
.choice-table th { font-weight: 500; text-align: left; padding: 2px 20px 2px 6px; border-bottom: 1px solid var(--color-border); }
.choice-table td { padding: 4px 20px 4px 6px; vertical-align: top; }
.choice-table td.choice__mark { padding-right: 8px; }
.show-answers .choice-row.is-answer td { background: var(--color-primary-soft); color: var(--color-primary-dark); font-weight: 500; }

/* 정답은 '정답 보기'를 눌렀을 때만 드러난다 */
.show-answers .choice.is-answer { background: var(--color-primary-soft); }
.show-answers .choice.is-answer .choice__mark { color: var(--color-primary-dark); font-weight: 700; }
.show-answers .choice.is-answer .choice__text { color: var(--color-primary-dark); font-weight: 500; }

.modal__loading, .modal__error { padding: 40px 0; text-align: center; color: var(--color-text-muted); }
.modal__error { color: var(--color-warning-text); }

/* ---------- 시험지 모드 (A4 2단 조판) ---------- */

.segment {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
}

.segment__btn {
  height: 26px;
  padding: 0 10px;
  border: none;
  border-radius: 3px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.segment__btn:hover { color: var(--color-text); }

.segment__btn[aria-pressed="true"] {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-strong);
  font-weight: 600;
}

.modal.is-paper { width: min(1020px, 100%); }

.sheets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 4px 0;
}

.sheet {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 210mm;
  height: 297mm;
  padding: 15mm 13mm 12mm;
  background: #fff;
  border: 1px solid var(--color-border);
  color: #111;
  font-family: var(--font-serif);
  font-size: 10.2pt;
  line-height: 1.72;
  text-align: justify;
  position: relative;
}

.sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 5pt;
  font-family: var(--font-sans);
  font-size: 9pt;
  color: #333;
}

.sheet__head b { font-size: 11pt; color: #111; }

.sheet__rule { border: 0; border-top: 1px solid #111; margin: 0 0 8pt; }

.sheet__cols { flex: 1; min-height: 0; display: flex; gap: 9mm; }

.sheet__col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.sheet__col > * { flex-shrink: 0; }

.sheet__pageno {
  position: absolute;
  left: 0; right: 0; bottom: 6mm;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 8pt;
  color: #555;
}

.sheet .guide { font-weight: 700; margin: 0 0 9pt; text-indent: 0; }
.sheet .plabel { font-weight: 700; margin: 9pt 0 4pt; text-indent: 0; }
.sheet p { margin: 0 0 7pt; text-indent: 1em; }
.sheet p.cont { text-indent: 0; }

.sheet .eq { margin: 0 0 20pt; }
/* 지문이 끝나고 첫 문항이 이어질 때만 위를 띄운다 */
.sheet__col > p + .eq { margin-top: 18pt; }
.sheet .eq.cont { margin-top: 0; }
.sheet .st { margin: 0 0 7pt; text-indent: -1.15em; padding-left: 1.15em; font-weight: 700; }
.sheet .op { margin: 0 0 4.5pt; text-indent: -1.25em; padding-left: 1.25em; }
.sheet .op .cn { font-weight: 600; }
.sheet .optable table { border-collapse: collapse; margin: 0 0 4.5pt 1.25em; }
.sheet .optable th { font-weight: 400; text-align: left; padding: 0 12pt 1pt 0; border-bottom: 0.5pt solid #000; }
.sheet .optable td { padding: 1pt 12pt 1pt 0; vertical-align: top; }
.show-answers .sheet .optable .op-row.correct td { background: #ffeeb8; font-weight: 600; }
.sheet .ebox { border: 1px solid #111; padding: 2.4mm 3mm; margin: 7pt 0 8pt; }
.sheet .ebox .bt { text-align: center; font-weight: 700; margin: 0 0 3pt; text-indent: 0; letter-spacing: 2px; }
.sheet .ebox p { margin: 0; text-indent: 0; }
.sheet .ebox .line { text-indent: 0; white-space: pre-wrap; }
.sheet .ebox .line + .line { margin-top: 4pt; }
.sheet .ebox .line + .line.is-marked { margin-top: 7pt; }
.sheet .ebox .gap { height: 5pt; }

.show-answers .sheet .op.correct { background: #ffeeb8; font-weight: 600; }

@media print {
  body > .topbar, body > .shell { display: none !important; }
  .modal-backdrop { position: static; padding: 0; background: none; opacity: 1; }
  .modal { border: none; box-shadow: none; width: auto; max-height: none; border-radius: 0; }
  .modal__head, .modal__foot { display: none !important; }
  .modal__body { padding: 0; overflow: visible; }
  .sheets { gap: 0; }
  .sheet { border: none; page-break-after: always; break-after: page; }
  .sheet:last-child { page-break-after: auto; break-after: auto; }
}

@page { size: A4; margin: 0; }

/* ---------- 글 목록 ---------- */

.post-list { border-top: 1px solid var(--color-border); }

.post {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-divider);
}

.post__meta { display: flex; gap: 8px; font-size: 11px; color: var(--color-text-muted); }
.post__title { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--color-text-strong); }
.post__excerpt { margin-top: 4px; font-size: 13px; color: var(--color-text-muted); }

/* ---------- 안내 패널 ---------- */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: 16px;
}

.panel + .panel { margin-top: 12px; }

.panel__title { font-size: 14px; font-weight: 600; color: var(--color-text-strong); }
.panel__body { margin-top: 6px; font-size: 12.5px; color: var(--color-text-muted); }
.panel__body li { position: relative; padding-left: 12px; margin-top: 4px; }
.panel__body li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-disabled); }

.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }

.subject {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: 16px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

a.subject:hover { border-color: var(--color-primary-light); background: var(--color-primary-soft); }

.subject__name { font-size: 14px; font-weight: 600; color: var(--color-text-strong); }
.subject__desc { margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }
.subject__stat { margin-top: 10px; font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.subject--pending { color: var(--color-text-disabled); }
.subject--pending .subject__name { color: var(--color-text-disabled); }

/* ---------- 반응형 ---------- */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, select, input, label, [tabindex] { touch-action: manipulation; }

/* 좁은 화면에서 사이드바를 열 때 뒤에 깔리는 막 (app.js 가 만든다) */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-panel);
}
.sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* 태블릿 이하: 사이드바는 서랍, 손가락으로 누르기 좋은 크기 */
@media (max-width: 900px) {
  :root { --spacing-page: 16px; }

  body { font-size: 15px; }
  body.is-locked { overflow: hidden; }

  .topbar { gap: 8px; padding: 0 12px 0 6px; }
  .topbar:not(:has(.topbar__menu-btn)) { padding-left: 16px; }
  .topbar__note { display: none; }
  .topbar .topbar__menu-btn { display: inline-flex; width: 44px; height: 44px; color: var(--color-text); }
  .topbar__brand { flex: none; min-height: 44px; font-size: 15px; }

  /* 좁은 화면에서 메뉴 글자가 세로로 쪼개지지 않게 한다 */
  .topbar__nav { flex: 0 1 auto; min-width: 0; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__link { height: 40px; padding: 0 10px; font-size: 14px; white-space: nowrap; }

  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--transition-panel), visibility 0s linear 220ms;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: none; visibility: visible; transition: transform var(--transition-panel); }

  .sidebar__inner { position: static; padding: 14px 10px calc(24px + env(safe-area-inset-bottom)); }
  .sidebar__collapse { display: none; }
  .sidebar__label { padding: 8px 10px; font-size: 12px; }
  .sidebar__item { min-height: 46px; padding: 0 12px; font-size: 15px; }
  .sidebar__sub { margin-left: 14px; }
  .sidebar__group + .sidebar__group { margin-top: 16px; }

  /* 쪽머리: 제목, 집계, 고르개를 세로로 쌓는다 */
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 14px; }
  .page-header__title { font-size: 21px; white-space: normal; }
  .page-header__meta { order: 2; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; white-space: normal; }
  .page-header__meta strong { font-size: 15px; }
  .page-header .toolbar { order: 3; flex: none; width: 100%; justify-content: flex-start; gap: 8px; }
  .toolbar .select { flex: 1 1 100px; min-width: 0; }
  .toolbar .input { order: -2; flex: 1 1 0; min-width: 0; }
  .toolbar .input + .btn, .toolbar #filter-reset { order: -1; flex: none; }
  /* 검색 줄 다음에 고르개가 새 줄에서 시작하게 한다 */
  .page-header .toolbar::before { content: ""; order: 0; flex: 1 0 100%; height: 0; margin-top: -8px; }
  .page-header .toolbar:not(:has(.select))::before { display: none; }
  .field { font-size: 13px; }

  /* 입력칸 글씨가 16px 보다 작으면 아이폰이 화면을 확대한다 */
  .select, .input { height: 44px; padding: 0 10px; font-size: 16px; }
  .input { min-width: 0; }

  .btn { height: 42px; padding: 0 14px; font-size: 14px; }
  .btn--icon { width: 44px; height: 44px; padding: 0; }
  .segment__btn { height: 38px; padding: 0 12px; font-size: 14px; }
  .tag { height: 22px; padding: 0 7px; font-size: 12px; }
  .toolbar__count { font-size: 12.5px; }

  .main:has(> .table-wrap) { height: auto; overflow: visible; display: block; }
  .table-wrap { flex: none; -webkit-overflow-scrolling: touch; }
  .table th { font-size: 12px; padding: 9px 10px; }
  .table td { font-size: 14px; padding: 11px 10px; }
  .col-optional { display: none; }
  .empty { padding: 40px 16px; font-size: 14px; }
  .license { font-size: 12.5px; }

  /* 모달은 화면 전체를 쓴다 */
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal, .modal.is-paper {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .modal__head { align-items: center; gap: 8px; padding: 8px 6px 8px 16px; }
  .modal__title { font-size: 17px; line-height: 1.4; }
  .modal__sub { font-size: 13px; }
  .modal__body { flex: 1; min-height: 0; padding: 18px 16px 24px; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .modal__foot { flex-wrap: wrap; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  /* 첫 줄: 보기 방식 + 정답 보기, 둘째 줄: 이전·다음 */
  .modal__foot .segment { display: flex; flex: 1 1 auto; min-width: 0; }
  .modal__foot .segment__btn { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
  .modal__foot-spacer { display: none; }
  .modal__foot #answer-toggle { order: 1; flex: 1 0 auto; }
  .modal__foot #paper-print { order: 2; flex: 0 0 auto; }
  .modal__foot #prev-question, .modal__foot #next-question { order: 3; flex: 1 1 40%; border-color: var(--color-border); }
  .modal__foot .toolbar__count { display: none; }

  .passage { font-size: 16.5px; line-height: 1.9; max-width: none; }
  .question__stem { font-size: 16px; }
  .question__points { font-size: 13px; }
  .question__extra { margin-left: 0; padding: 12px; font-size: 15.5px; max-width: none; }
  .question__extra::before { font-size: 12px; }
  .choices, .choice-table { margin-left: 0; }
  .choice { padding: 8px 6px; font-size: 15.5px; max-width: none; }
  .choice__mark { width: 20px; }
  .choice-table { font-size: 15px; }
  .choice-table th, .choice-table td { padding-right: 12px; }
  .solution { font-size: 15.5px; }
  .solution__h, .solution__q { font-size: 15.5px; }
  .solution__table { font-size: 14.5px; min-width: 0; width: 100%; }

  /* 시험지는 A4 그대로 그린 뒤 화면 폭에 맞춰 줄여 보여 준다 (--sheet-zoom 은 app.js 가 계산) */
  .sheets { align-items: flex-start; gap: 12px; padding: 0; }
  .modal__body:has(.sheets) { padding: 10px; overflow-x: auto; background: var(--color-neutral-bg); }
  .sheets > .sheet { zoom: var(--sheet-zoom, 1); }

  .figure img { max-height: none; }
  /* 지문 속 표가 화면보다 넓으면 표만 옆으로 민다 */
  .etable { display: block; width: max-content; max-width: 100%; overflow-x: auto; font-size: 0.9em; }
  .etable th, .etable td { padding: 2px 7px; }
  .subject-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 휴대폰: 머리를 두 줄로, 목록은 표 대신 한 건씩 쌓는다 */
@media (max-width: 640px) {
  :root { --topbar-row: 48px; --topbar-tabs: 44px; --topbar-height: 44px; }

  /* 스크롤하면 첫 줄(이름)은 올라가고 메뉴 줄만 위에 붙어 남는다 */
  .topbar { flex-wrap: wrap; height: auto; gap: 0; padding: 0; top: calc(-1 * var(--topbar-row)); }
  .topbar:not(:has(.topbar__menu-btn)) { padding-left: 0; }
  .topbar .topbar__menu-btn { margin-left: 4px; height: var(--topbar-row); }
  .topbar__brand { height: var(--topbar-row); padding: 0 4px; }
  .topbar:not(:has(.topbar__menu-btn)) .topbar__brand { padding-left: 16px; }
  .topbar__nav {
    flex: 1 0 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: var(--topbar-tabs);
    overflow: visible;
    border-top: 1px solid var(--color-divider);
  }
  /* 메뉴가 여섯 개여도 한 줄에 들어가게 폭에 따라 글씨를 조금 줄인다 */
  .topbar__link { justify-content: center; height: 100%; padding: 0 2px; border-radius: 0; font-size: clamp(12px, 3.6vw, 14px); letter-spacing: -0.02em; }
  .topbar__link:hover { background: transparent; }
  .topbar__link[aria-current="page"] { background: transparent; box-shadow: inset 0 -2px 0 var(--color-primary); }

  /* 목록: 머리글 줄을 없애고 한 건을 [곁정보 한 줄] + [제목] 으로 */
  .main > .table-wrap { overflow: visible; }
  .main > .table-wrap > .table,
  .main > .table-wrap > .table > tbody { display: block; }
  .main > .table-wrap > .table > thead { display: none; }
  .main > .table-wrap > .table > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--color-divider);
  }
  .main > .table-wrap > .table > tbody > tr:last-child { border-bottom: none; }
  .main > .table-wrap > .table > tbody > tr:active { background: var(--color-surface-subtle); }
  .main > .table-wrap > .table > tbody > tr > td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    color: var(--color-text-muted);
  }
  .main > .table-wrap > .table > tbody > tr > td.col-optional { display: none; }
  .main > .table-wrap > .table > tbody > tr > td.is-topic {
    order: 5;
    flex: 1 0 100%;
    min-width: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--color-text-strong);
    overflow-wrap: anywhere;
  }
  .main > .table-wrap > .table > tbody > tr > td[colspan] { flex: 1 0 100%; }
  .main > .table-wrap > .table > tbody > tr > td.is-year { font-weight: 600; color: var(--color-text); }
  /* 머리글이 없어지므로 숫자에 단위를 붙인다. 표마다 --year-suffix, --num-suffix 로 바꿀 수 있다 */
  .main > .table-wrap > .table > tbody > tr > td.is-year::after { content: var(--year-suffix, "학년도"); font-weight: 400; }
  .main > .table-wrap > .table > tbody > tr > td.is-center:not(.is-year):not(:empty)::after { content: var(--num-suffix, "번"); }
  .main > .table-wrap > .table > tbody > tr > td.is-date { margin-left: auto; }
  .table td.is-topic .tag { margin-left: 0; margin-right: 4px; }
  .table td.is-math { overflow: hidden; }
  .table tbody tr:hover td { background: transparent; }

  .modal__foot .btn { padding: 0 10px; }
}

/* display 를 지정한 요소도 hidden 이면 숨긴다 */
.tag--check {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-color: transparent;
}

[hidden] { display: none !important; }

.figure { margin: 18px 0; text-align: center; }
.figure-caption { text-align: center; }
.etable { border-collapse: collapse; margin: 8px auto; font-size: 0.95em; }
.etable th, .etable td { border: 1px solid var(--color-border-strong); padding: 2px 10px; text-align: center; font-weight: 400; }
.figure img { max-width: 100%; max-height: 60vh; }
.sheet .figure { margin: 10px 0; }
.sheet .figure img { max-height: none; }
.choice__text .figure { margin: 0; text-align: left; }
.ohg { font-family: "OldHangulSerif", var(--font-serif); }

/* ---------- 해설 ---------- */

.solution { max-width: 720px; margin: 0 auto; font-size: 14px; line-height: 1.8; color: var(--color-text); }

.solution__h {
  margin: 26px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-strong);
}

.solution__h:first-child { margin-top: 0; }

.solution__table { width: auto; min-width: 280px; border-collapse: collapse; font-size: 13px; }
.solution__table th, .solution__table td { padding: 6px 14px 6px 0; text-align: left; border-bottom: 1px solid var(--color-divider); }
.solution__table th { font-weight: 600; color: var(--color-text-muted); }
.solution__table td:first-child, .solution__table th:first-child { padding-right: 20px; font-variant-numeric: tabular-nums; }

.solution__flow { margin: 0; font-family: var(--font-serif); color: var(--color-text-strong); }

.solution__item + .solution__item { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-divider); }
.solution__q { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--color-text-strong); }
.solution__q span { margin-left: 8px; font-weight: 500; color: var(--color-primary-dark); }
.solution__item p { margin: 0 0 8px; font-family: var(--font-serif); word-break: keep-all; }
.solution__item p:last-child { margin-bottom: 0; }