/*
  멘토원 홈페이지

  ── 설계 근거 ────────────────────────────────────────────────
  우리는 합격률·후기·수강생 수를 쓸 수 없다 (금지선 + 데이터 미확보).
  그래서 전문성이 "사회적 증거"가 아니라 **데이터 밀도와 방법론 공개**에서
  나와야 한다. 마케팅 랜딩이 아니라 레퍼런스 지면처럼 생겨야 한다는 뜻이다.

    · 제목은 세리프  — 교재·논문의 시각 언어
    · 저자·날짜를 제목 바로 아래 1급 요소로 (Our World in Data 식)
    · 핵심 숫자를 본문보다 먼저 보여준다
    · 표의 숫자에 막대를 붙인다 — 숫자만 있는 표는 읽히지 않는다
    · 「이 자료 인용하기」 블록 — 데이터를 공개하는 쪽의 자세

  ── 타이포 ───────────────────────────────────────────────────
  독자 다수가 35세 이상, 45세 이상만 절반. 본문 최소 18px, 행간 1.9.
  근거: 27/channels/02-홈페이지/00-기획.md 5-2절
*/

:root {
  --ink:        #14181f;
  --ink-soft:   #454d59;
  --ink-faint:  #6d7684;
  --paper:      #ffffff;
  --surface:    #f5f6f4;
  --surface-2:  #eceee9;
  --rule:       #dfe2dc;
  --rule-soft:  #ebeee9;
  /* 포인트 컬러 — 02 데이터 리포트 시안에서 확정 (2026-08-26).
     남색은 권위감이 가장 강하지만 08 시안처럼 면적을 넓게 쓰면 강조력을 잃는다.
     이 값은 파랑을 데이터·링크·강조에만 좁게 쓰는 02 의 절제된 사용량을 그대로 가져온 것.
     대비 실측: 라이트 7.59:1 / 다크 7.99:1 (WCAG AA 4.5:1 기준 여유 확보) */
  --accent:     #0f47c9;
  --accent-ink: #0b3494;
  --accent-bg:  #e8edfb;
  --bar:        #b9d6c6;

  --measure: 42rem;      /* 본문 단 폭 */
  --wide:    72rem;      /* 헤더·푸터 폭 */

  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif;
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo",
           "Batang", "바탕", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e8eaec;
    --ink-soft:   #b4bac2;
    --ink-faint:  #868e99;
    --paper:      #12151a;
    --surface:    #1a1e25;
    --surface-2:  #222831;
    --rule:       #2e343d;
    --rule-soft:  #232830;
    --accent:     #84aaff;
    --accent-ink: #a8c4ff;
    --accent-bg:  #14203b;
    --bar:        #2c5a44;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.125rem, 0.95rem + 0.45vw, 1.28rem);
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.skip { position: absolute; left: -9999px;
        padding: .75rem 1.25rem; background: var(--accent); color: #fff; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; }

/* ══ 헤더 ═══════════════════════════════════════════════════ */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header__inner { max-width: var(--wide); margin: 0 auto;
                      padding: 1.35rem 1.5rem .9rem; }

.site-title { display: inline-flex; align-items: baseline; gap: .6rem;
              text-decoration: none; color: var(--ink);
              font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
              letter-spacing: -.01em; }
.site-title span { font-family: var(--sans); font-size: .82rem; font-weight: 400;
                   color: var(--ink-faint); letter-spacing: 0; }

.nav { margin-top: .9rem; }
.nav ul { list-style: none; margin: 0; padding: 0;
          display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; }
.nav a { display: inline-block; color: var(--ink-soft); text-decoration: none;
         font-size: .95rem; padding: .3rem 0 .5rem;
         border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 700;
                              border-bottom-color: var(--accent); }

/* ══ 본문 ═══════════════════════════════════════════════════ */
main { max-width: var(--measure); margin: 0 auto; padding: 2.75rem 1.5rem 5rem; }

.breadcrumb { font-size: .88rem; color: var(--ink-faint); margin: 0 0 1.75rem;
              letter-spacing: .01em; }
.breadcrumb a { color: var(--ink-faint); text-decoration-color: var(--rule); }

h1 { font-family: var(--serif); font-weight: 700;
     font-size: clamp(1.95rem, 1.25rem + 2.3vw, 2.85rem);
     line-height: 1.32; letter-spacing: -.02em; margin: 0 0 1.1rem; }

h2 { font-family: var(--serif); font-weight: 700;
     font-size: clamp(1.4rem, 1.1rem + 1vw, 1.72rem);
     line-height: 1.45; margin: 3.5rem 0 1rem;
     padding-top: 1.6rem; border-top: 1px solid var(--rule); }

h3 { font-size: 1.14rem; font-weight: 700; line-height: 1.55;
     margin: 2.25rem 0 .7rem; color: var(--ink); }

p { margin: 0 0 1.45rem; }
ul, ol { margin: 0 0 1.45rem; padding-left: 1.4rem; }
li { margin-bottom: .6rem; }
li > ul, li > ol { margin-top: .6rem; }
strong { font-weight: 700; }

a { color: var(--accent); text-underline-offset: .22em;
    text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

blockquote { margin: 2rem 0; padding: 1.1rem 1.35rem;
             background: var(--surface); border-left: 3px solid var(--accent);
             color: var(--ink-soft); }
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* ══ 저자 바이라인 — 제목 바로 아래 ═════════════════════════ */
.byline { margin: 0 0 2rem; padding-bottom: 1.25rem;
          border-bottom: 1px solid var(--rule);
          font-size: .92rem; line-height: 1.75; color: var(--ink-faint); }
.byline__name { color: var(--ink); font-weight: 700; }
.byline__cred { color: var(--ink-soft); }
.byline time { font-variant-numeric: tabular-nums; }
.byline__book { margin-top: .25rem; color: var(--ink-soft); font-size: .88rem; }
.byline__tags { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }

.tag { display: inline-block; padding: .12rem .55rem; border-radius: 2rem;
       background: var(--surface-2); color: var(--ink-soft);
       font-size: .78rem; line-height: 1.7; letter-spacing: .01em; }

/* ══ 핵심 숫자 카드 ═════════════════════════════════════════ */
.figures { display: grid; gap: .75rem; margin: 0 0 2.75rem;
           grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
/* min-width:0 이 없으면 word-break:keep-all 때문에 min-content 가 커져서
   카드가 한 줄에 하나씩만 놓인다 */
.figure { min-width: 0; background: var(--surface); border: 1px solid var(--rule);
          border-left: 3px solid var(--accent);
          padding: 1rem 1.1rem 1.1rem; }
.figure__note { word-break: normal; }
.figure__num { font-family: var(--serif); font-weight: 700;
               font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.15; color: var(--accent);
               margin: 0 0 .35rem; font-variant-numeric: tabular-nums; }
.figure__label { font-size: .92rem; font-weight: 700; line-height: 1.5;
                 margin: 0 0 .2rem; color: var(--ink); }
.figure__note { font-size: .82rem; line-height: 1.6; margin: 0;
                color: var(--ink-faint); }

/* ══ 목차 ═══════════════════════════════════════════════════ */
.toc { margin: 0 0 2.75rem; padding: 1.1rem 1.35rem 1.2rem;
       border: 1px solid var(--rule); background: var(--surface);
       font-size: .95rem; }
.toc__title { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700;
              letter-spacing: .08em; color: var(--ink-faint); }
.toc ul { margin: 0; padding-left: 1.1rem; }
.toc ul ul { display: none; }          /* H3 까지 펼치면 소음이다 */
.toc li { margin-bottom: .3rem; line-height: 1.65; }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* ══ 표 ── 출제 분포의 핵심 지면 ═════════════════════════════ */
/* 표는 본문 단(42rem)보다 넓게 뺀다.
   출제 분포 표가 8열이라 본문 폭에 가두면 정작 중요한 합계 열이 잘린다.
   글은 좁게 읽고 데이터는 넓게 보는 편집 지면의 기본 배치다. */
.table-scroll { overflow-x: auto; margin: 2.25rem 0 2.75rem;
                border: 1px solid var(--rule);
                width: min(58rem, calc(100vw - 3rem));
                margin-left: 50%; transform: translateX(-50%); }
/* ★아래는 전부 「출제 분포」 같은 본문 숫자 표 전용이다 (우측정렬·tabular-nums·min-width).
   ★선택자를 .table-scroll 안으로 한정한다 — 전역 table/th/td 로 두면
     CBT 기출 표(.cbt-q__table)까지 숫자표 규칙을 뒤집어쓴다.
     본문 표는 build.py 가 전부 .table-scroll 로 감싸므로 범위가 정확히 일치한다. */
.table-scroll table { border-collapse: collapse; width: 100%;
        font-size: .93rem; line-height: 1.7; }
.table-scroll th, .table-scroll td {
         padding: .62rem .85rem .78rem; text-align: left;
         vertical-align: middle; border-bottom: 1px solid var(--rule-soft);
         white-space: nowrap; }
.table-scroll tbody td:first-child { white-space: normal; }
.table-scroll thead th { background: var(--surface-2); font-weight: 700;
           font-size: .82rem; letter-spacing: .03em; white-space: nowrap;
           border-bottom: 1px solid var(--rule); }
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll tbody tr:hover { background: var(--surface); }

/* 첫 열 — 라벨 칸. min-width 는 긴 단원명("04 한국 근·현대")이 잘리지 않게 하는
   바닥값이다. 그런데 width 를 안 주면 auto 레이아웃이 남는 폭까지 이 칸에
   몰아준다. 연도("2017")처럼 짧은 라벨일 때 칸이 화면 절반을 먹는 이유다.
   width:1px = "내용만큼만". 바닥값은 min-width 가 지킨다. */
.table-scroll tbody td:first-child,
.table-scroll thead th:first-child { width: 1px; min-width: 8em; }
.table-scroll tbody td:not(:first-child),
.table-scroll thead th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums; }

/* ══ 텍스트 표 — 절차·설명처럼 문장이 들어가는 표 ═══════════════
   위 규칙(우측정렬·줄바꿈 금지·min-width)은 숫자표 전용이다. 문장이 들어간
   칸에 그대로 씌우면 줄바꿈 없이 오른쪽으로 밀려 칸만 쓸데없이 넓어진다.
   build.py 의 is_numeric_table() 이 칸 내용을 보고 이 클래스를 붙인다 —
   본문에서 표를 손으로 구분해 표시할 필요는 없다. */
.table-scroll.table-scroll--text {
  width: 100%; margin-left: 0; transform: none;   /* 본문 단 밖으로 안 뺀다 — 짧은 표라 필요 없다 */
}
.table-scroll.table-scroll--text th,
.table-scroll.table-scroll--text td { white-space: normal; vertical-align: top; }
.table-scroll.table-scroll--text tbody td:not(:first-child),
.table-scroll.table-scroll--text thead th:not(:first-child) {
  text-align: left; font-variant-numeric: normal; }
.table-scroll.table-scroll--text tbody td:first-child,
.table-scroll.table-scroll--text thead th:first-child { width: auto; min-width: 0; }

/* ══ 휴대폰 폭 — 표를 스크롤이 아니라 세로 카드로 바꾼다 ══════
   가로 스크롤은 8열 표를 "편하게" 만들지 못한다. 스와이프해야 하는 건
   그 자체로 불편하다. 그래서 이 폭에서는 표 구조를 통째로 버리고
   단원 하나 = 카드 하나, 그 안에 "연도: 문항수" 줄을 세로로 쌓는다.
   라벨은 build.py 의 add_mobile_labels() 가 각 셀에 data-label 로 심어둔다. */
/* ★선택자를 .table-scroll 안으로 한정한다.
   전역 table/thead/tbody 로 두면 CBT 기출 표(.cbt-q__table)까지 카드로 바꿔버린다 —
   기출 표는 시험지와 같은 격자로 보여야 하므로 이 변환에서 제외해야 한다. */
@media (max-width: 36rem) {
  .table-scroll:not(.table-scroll--text) { overflow-x: visible; width: 100%;
                  margin-left: 0; transform: none; border: 0; }
  .table-scroll:not(.table-scroll--text) table { border: 0; }
  .table-scroll:not(.table-scroll--text) thead {         /* 화면엔 안 보이지만 스크린리더는 읽는다 */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap;
  }
  .table-scroll:not(.table-scroll--text) tbody { display: block; }
  .table-scroll:not(.table-scroll--text) tbody tr {
    display: block; margin: 0 0 1rem;
    border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  }
  .table-scroll:not(.table-scroll--text) tbody tr:last-child {   /* 합계 행 — 카드로도 요약임이 보이게 */
    margin-bottom: 0; background: var(--surface-2);
    border: 1px solid var(--ink-faint);
  }
  .table-scroll:not(.table-scroll--text) tbody td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: .65rem .9rem;
    border-bottom: 1px solid var(--rule-soft);
    position: static; box-shadow: none;      /* 표 버전의 sticky 해제 */
  }
  .table-scroll:not(.table-scroll--text) tbody td:last-child { border-bottom: 0; }
  .table-scroll:not(.table-scroll--text) tbody td:first-child {       /* 단원명 = 카드 제목 */
    display: block; text-align: left; font-weight: 700;
    font-size: 1.02rem; background: var(--surface-2);
    border-bottom: 1px solid var(--rule); white-space: normal;
  }
  .table-scroll:not(.table-scroll--text) tbody tr:last-child td:first-child { background: transparent; }
  .table-scroll:not(.table-scroll--text) tbody td:not(:first-child)::before {
    content: attr(data-label); color: var(--ink-faint);
    font-weight: 400; font-variant-numeric: normal;
  }
  /* 막대는 표의 가로 폭 기준으로 위치를 잡아둔 것이라 카드 레이아웃과 안 맞는다.
     숫자만으로도 카드 안에서는 충분히 읽힌다. */
  .bar { display: none; }

  /* 텍스트 표는 카드로 바꾸지 않는다 — 대개 2~3열이라 좁은 화면에서도
     표 그대로가 카드보다 잘 읽힌다(테두리가 행 경계를 잡아준다). 칸만 좁힌다. */
  .table-scroll.table-scroll--text th,
  .table-scroll.table-scroll--text td { padding: .55rem .6rem; font-size: .89rem; }
}

/* 합계 열의 막대 — 숫자만 있는 표는 읽히지 않는다 */
tbody td { position: relative; }
.bar { position: absolute; left: .85rem; right: auto; bottom: .3rem;
       height: 4px; background: var(--bar); border-radius: 2px;
       max-width: calc(100% - 1.7rem); }

code { background: var(--surface-2); padding: .1em .38em; border-radius: 3px;
       font-size: .88em; }
pre { background: var(--surface); padding: 1rem; overflow-x: auto;
      border: 1px solid var(--rule); }
pre code { background: none; padding: 0; }

/* ══ 인용 블록 ══════════════════════════════════════════════ */
.share { margin: 3.5rem 0 0; padding: 1.15rem 1.35rem 1.25rem;
         border: 1px solid var(--rule); background: var(--surface);
         font-size: .9rem; line-height: 1.75; }
.share__title { margin: 0 0 .7rem; font-size: .78rem; font-weight: 700;
                letter-spacing: .08em; color: var(--ink-faint); }
.share__row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.share__btn { min-height: 44px; padding: 0 1.1rem; border-radius: 4px;
              border: 1px solid var(--accent); background: var(--accent);
              color: #fff; font: inherit; font-weight: 700; font-size: .88rem;
              cursor: pointer; }
.share__btn:hover { filter: brightness(1.08); }
.share__url { color: var(--ink-faint); font-size: .82rem;
              overflow-wrap: anywhere; }

/* ══ 관련 글 ════════════════════════════════════════════════ */
.related { margin: 2.5rem 0 0; padding-top: 1.5rem;
           border-top: 1px solid var(--rule); }
.related__title { margin: 0 0 .75rem; font-size: .78rem; font-weight: 700;
                  letter-spacing: .08em; color: var(--ink-faint); }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin-bottom: .5rem; line-height: 1.7; }

/* ══ 목록 페이지 ════════════════════════════════════════════ */
.lead { font-size: 1.08em; color: var(--ink-soft); margin: 0 0 2.5rem;
        line-height: 1.8; }
.empty { color: var(--ink-faint); padding: 2rem 0; }

.card-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.card-list li { margin: 0; border-top: 1px solid var(--rule); }
.card-list li:last-child { border-bottom: 1px solid var(--rule); }
.card { display: block; padding: 1.5rem 0; text-decoration: none;
        color: var(--ink); }
.card:hover { background: var(--surface); }
.card__meta { margin: 0 0 .5rem; font-size: .82rem; color: var(--ink-faint);
              display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.card__meta time { font-variant-numeric: tabular-nums; }
.card__title { font-family: var(--serif); font-size: 1.28rem; font-weight: 700;
               line-height: 1.45; margin: 0 0 .45rem; letter-spacing: -.01em; }
.card:hover .card__title { color: var(--accent); }
.card__desc { font-size: .98rem; color: var(--ink-soft); line-height: 1.75;
              margin: 0; }

/* 홈의 섹션 묶음 */
main > h2:first-of-type { margin-top: 3rem; }

.page-meta { margin-top: 2.5rem; padding-top: 1.25rem;
             border-top: 1px solid var(--rule-soft);
             font-size: .85rem; color: var(--ink-faint); line-height: 1.8; }

/* ══ 푸터 ═══════════════════════════════════════════════════ */
.site-footer { border-top: 1px solid var(--rule); background: var(--surface);
               padding: 2.75rem 1.5rem 4rem; margin-top: 4rem; }
.site-footer__inner { max-width: var(--wide); margin: 0 auto;
                      font-size: .9rem; color: var(--ink-faint);
                      line-height: 1.9; }
.site-footer a { color: var(--ink-soft); }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 1.5rem;
                  display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media print {
  .site-header, .site-footer, .breadcrumb, .toc, .related { display: none; }
  body { font-size: 11pt; }
}

/* ══ 홈 ═════════════════════════════════════════════════════
   홈은 본문 단보다 넓게 쓴다. 목록만 쌓으면 목차지 사이트가 아니다. */
body.home main { max-width: var(--wide); padding-top: 3.5rem; }

.hero { max-width: 40rem; margin: 0 0 2.75rem; }
.hero__eyebrow { margin: 0 0 .9rem; font-size: .8rem; font-weight: 700;
                 letter-spacing: .12em; color: var(--accent); }
body.home .hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.2rem);
                     line-height: 1.28; margin: 0 0 1.35rem; }
.hero__lead { font-size: 1.06em; line-height: 1.85; color: var(--ink-soft);
              margin: 0 0 1.6rem; }
.hero__author { margin: 0; font-size: .92rem; color: var(--ink-faint);
                padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.hero__author span { color: var(--ink); font-weight: 700; margin-right: .5rem; }

.figures--hero { margin-bottom: 4rem;
                 grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.figures--hero .figure__num { font-size: clamp(1.4rem, 1rem + 1.1vw, 1.8rem); }

.home-sec { margin: 0 0 4rem; }
.home-sec__head { display: flex; align-items: baseline;
                  justify-content: space-between; gap: 1rem;
                  padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.home-sec__head h2 { margin: 0; padding: 0; border: 0;
                     font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); }
.home-sec__head a { font-size: .88rem; white-space: nowrap;
                    text-decoration: none; color: var(--ink-faint); }
.home-sec__head a:hover { color: var(--accent); text-decoration: underline; }
.home-sec .card-list { margin-top: 0; }
.home-sec .card-list li:first-child { border-top: 0; }

/* 홈에서는 카드를 2열로 */
@media (min-width: 56rem) {
  body.home .card-list { display: grid; grid-template-columns: 1fr 1fr;
                         column-gap: 2.5rem; }
  body.home .card-list li:nth-child(2) { border-top: 0; }
}

/* ══ 초안 배너 — --drafts 로컬 미리보기 전용 ═════════════════ */
.draft-banner {
  margin: 0 0 2rem; padding: .85rem 1.1rem;
  background: #fff3cd; color: #664400; border: 1px solid #f0d787;
  font-size: .9rem; font-weight: 700; border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
  .draft-banner { background: #3a2e0a; color: #f0d787; border-color: #5a4816; }
}

/* ─────────────────────────────────────────────────────────────
   CBT — 기출 온라인 풀이
   독자 다수가 45세 이상이다. 선택지 버튼은 손가락으로 눌러야 하므로
   최소 높이를 넉넉히 잡고, 문항 본문도 본문 기준(18px/1.9)을 그대로 쓴다.
   ───────────────────────────────────────────────────────────── */
.cbt { margin: 2.5rem 0 0; }
.cbt-lead { font-size: 1.02em; color: var(--ink-soft); line-height: 1.85;
            margin: 0 0 1.1rem; }
.cbt-lead--sub { font-size: .96em; }
.cbt-note { font-size: .86rem; color: var(--ink-faint); margin: .85rem 0 0; }

.cbt-btn { min-height: 52px; padding: 0 1.5rem; border-radius: 4px;
           border: 1px solid var(--rule); background: var(--paper);
           color: var(--ink); font-family: var(--sans); font-size: 1rem;
           font-weight: 700; cursor: pointer; }
.cbt-btn:hover:not(:disabled) { border-color: var(--ink-faint); }
.cbt-btn:disabled { opacity: .4; cursor: not-allowed; }
.cbt-btn--primary { background: var(--accent); border-color: var(--accent);
                    color: #fff; }
.cbt-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }

/* 진행 표시 */
.cbt-bar { margin: 0 0 2rem; }
.cbt-bar__count { margin: 0 0 .5rem; font-size: .95rem; font-weight: 400;
                  color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cbt-bar__count strong { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.cbt-bar__count span { color: var(--ink-faint); }
.cbt-bar__track { height: 4px; background: var(--surface-2); border-radius: 2px; }
.cbt-bar__fill { height: 100%; width: 0; background: var(--accent);
                 border-radius: 2px; transition: width .2s ease; }

/* 문항 */
.cbt-q__text { font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
               line-height: 1.7; margin: 0 0 1.25rem; }
.cbt-q__box { background: var(--surface); border: 1px solid var(--rule);
              border-left: 3px solid var(--accent);
              padding: 1rem 1.25rem; margin: 0 0 1.75rem; border-radius: 3px; }
.cbt-q__box p { margin: 0 0 .55rem; line-height: 1.8; font-size: .97em; }
.cbt-q__box p:last-child { margin-bottom: 0; }
.cbt-q__box-label { font-size: .76rem !important; font-weight: 700;
                    letter-spacing: .06em; color: var(--ink-faint);
                    margin-bottom: .7rem !important; }
/* 보기가 여러 줄(항목이 나뉨)일 때만 점을 찍는다. 서술형 지문 한 줄엔 안 찍는다 */
.cbt-q__box-item { position: relative; padding-left: 1.15em; }
.cbt-q__box-item::before { content: "•"; position: absolute; left: 0;
                           color: var(--ink-faint); }
.cbt-q__box u { text-decoration-thickness: .08em; text-underline-offset: .15em; }
/* 도식(그림)이 있는 보기만 본문 단(42rem)보다 넓게 뺀다 — 표(.table-scroll)와 같은 기법.
   흐름도·도해는 안에 든 글자가 작아서 좁은 폭에 가두면 안 그래도 작은 라벨이 더 작아진다.
   텍스트만 있는 보기는 넓히지 않는다 — 줄 길이가 너무 길어지면 오히려 읽기 불편해진다.
   cbt.js 가 그림이 있는 문항에만 이 클래스를 붙인다. */
.cbt-q__box--wide { width: min(50rem, calc(100vw - 3rem));
                    margin-left: 50%; transform: translateX(-50%); }

/* 선택지 */
.cbt-opts { list-style: none; margin: 0 0 2rem; padding: 0; }
.cbt-opts li { margin-bottom: .6rem; }
.cbt-opt { display: flex; align-items: flex-start; gap: .85rem; width: 100%;
           min-height: 56px; padding: .9rem 1.1rem; text-align: left;
           border: 1px solid var(--rule); border-radius: 4px;
           background: var(--paper); color: var(--ink);
           font-family: var(--sans); font-size: 1rem; line-height: 1.7;
           cursor: pointer; }
.cbt-opt:hover { border-color: var(--ink-faint); background: var(--surface); }
.cbt-opt.is-picked { border-color: var(--accent); background: var(--accent-bg);
                     box-shadow: inset 0 0 0 1px var(--accent); }
.cbt-opt__num { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; margin-top: .1rem;
                display: inline-flex; align-items: center; justify-content: center;
                border-radius: 50%; background: var(--surface-2);
                font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.cbt-opt.is-picked .cbt-opt__num { background: var(--accent); color: #fff; }
.cbt-opt__text { flex: 1 1 auto; min-width: 0; }

/* 확신도 */
/* 확신도 — 선택 항목이라 선택지보다 한 단계 약하게 두되,
   「눌러도 되는 것」으로는 보여야 한다. 실선 배경 + 48px 높이. */
.cbt-conf { border: 0; padding: 0; margin: 0 0 2rem; }
.cbt-conf legend { padding: 0; margin-bottom: .65rem; font-size: .95rem;
                   font-weight: 700; color: var(--ink); }
.cbt-conf legend span { display: block; margin-top: .15rem; font-size: .82rem;
                        font-weight: 400; color: var(--ink-faint); }
/* 3열 고정 — flex-wrap 으로 두면 375px 에서 2줄로 깨진다 */
.cbt-conf__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cbt-conf__btn { min-height: 48px; padding: 0 .5rem; border-radius: 4px;
                 border: 1px solid var(--rule); background: var(--surface);
                 color: var(--ink-soft); font-family: var(--sans);
                 font-size: .97rem; font-weight: 500; cursor: pointer; }
.cbt-conf__btn:hover { border-color: var(--ink-faint); background: var(--surface-2);
                       color: var(--ink); }
.cbt-conf__btn.is-picked { border-color: var(--accent); background: var(--accent-bg);
                           color: var(--accent-ink); font-weight: 700;
                           box-shadow: inset 0 0 0 1px var(--accent); }

.cbt-nav { display: flex; gap: .75rem; justify-content: space-between;
           padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); }

/* 결과 */
.cbt-review__title { font-family: var(--serif); font-size: 1.4rem;
                     margin: 2.5rem 0 1.25rem; }
.cbt-row { border: 1px solid var(--rule); border-left: 3px solid var(--rule);
           border-radius: 3px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.cbt-row.is-ok { border-left-color: var(--bar); }
.cbt-row.is-no { border-left-color: var(--accent); background: var(--surface); }
.cbt-row__head { display: flex; align-items: center; gap: .5rem;
                 flex-wrap: wrap; margin: 0 0 .5rem; }
.cbt-row__no { font-size: .78rem; font-weight: 700; letter-spacing: .04em;
               color: var(--ink-faint); }
.cbt-row__mark { font-size: .8rem; font-weight: 700; }
.is-ok .cbt-row__mark { color: var(--ink-faint); }
.is-no .cbt-row__mark { color: var(--accent-ink); }
.cbt-row__q { margin: 0 0 .5rem; font-size: .97em; line-height: 1.75; }
.cbt-row__meta { margin: 0; font-size: .86rem; color: var(--ink-soft);
                 font-variant-numeric: tabular-nums; }
.cbt-row__note { margin: .5rem 0 0; font-size: .82rem; color: var(--ink-faint); }
.tag--warn { background: var(--accent-bg); color: var(--accent-ink);
             font-weight: 700; }

@media (max-width: 34rem) {
  .cbt-q__text { font-size: 1.16rem; }
  .cbt-nav .cbt-btn { flex: 1 1 auto; padding: 0 1rem; }
}

/* 도식 — 원본 시험지에서 잘라낸 그림. 폭을 넘지 않게만 잡는다 */
.cbt-q__img { display: block; max-width: 100%; height: auto; margin: 1rem auto 0;
              background: #fff; border: 1px solid var(--rule); border-radius: 3px;
              padding: .5rem; }

/* 채점 직후 가입 제안 — 「한 번 보기」와 「쌓이기」의 경계 */
.cbt-signup { margin: 2.5rem 0 0; padding: 1.35rem 1.5rem 1.5rem;
              background: var(--accent-bg); border: 1px solid var(--accent);
              border-radius: 4px; }
.cbt-signup__title { margin: 0 0 .6rem; font-family: var(--serif);
                     font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.cbt-signup__body { margin: 0 0 1.1rem; font-size: .97em; line-height: 1.8;
                    color: var(--ink-soft); }
.cbt-signup .cbt-soon { margin: 0; }
.cbt-soon { display: inline-block; color: var(--ink-faint); font-size: .88rem; }

/* 표 — 시험지 지면에 최대한 가깝게 그린다.
   ★수험생은 실제 시험지와 다른 형태를 보면 혼란스러워한다.
     그래서 전체 격자선 + 머리글 음영으로 시험지 표의 인상을 그대로 맞춘다.
   ★이미지로 넣지 않는 이유: 독자 다수가 45세 이상이고 대부분 휴대폰이다.
     1300px 표 이미지를 360px 화면에 넣으면 확대해야 읽힌다. */
.cbt-q__table { overflow-x: auto; margin: 1rem 0 .25rem;
                -webkit-overflow-scrolling: touch; }
.cbt-q__table table { border-collapse: collapse; width: 100%;
                      background: var(--paper); font-size: .95rem; }
.cbt-q__table caption { caption-side: top; text-align: left;
                        padding: 0 0 .5rem; font-size: .88rem;
                        color: var(--ink-soft); font-weight: 700; }
.cbt-q__table th,
.cbt-q__table td { border: 1px solid var(--ink-faint);
                   padding: .6rem .7rem; line-height: 1.6;
                   text-align: center; vertical-align: middle; }
.cbt-q__table thead th { background: var(--surface-2); font-weight: 700;
                         white-space: nowrap; }
.cbt-q__table tbody th { background: var(--surface); font-weight: 700;
                         text-align: left; }
.cbt-q__table td { text-align: left; }

/* /cbt/ 목록 — 연도별 묶음 + 과목 칩
   ★시험이 한 회차에 7과목을 같이 치른다. 시험지도 연도별 한 권이다.
     그래서 연도가 1차 축이고 과목이 그 안이다.
     근거: 기획-기출-CBT.md 2절 「연도별 기출」 */
.cbt-year { padding: 1.5rem 0; border-top: 1px solid var(--rule-soft); }
.cbt-year:first-of-type { border-top: 1px solid var(--rule); }
.cbt-year__name { display: flex; align-items: baseline; gap: .6rem;
                  flex-wrap: wrap; font-family: var(--serif);
                  font-size: 1.45rem; font-weight: 700; margin: 0 0 .9rem;
                  font-variant-numeric: tabular-nums; }
.cbt-year__count { font-family: var(--sans); font-size: .8rem;
                   font-weight: 400; color: var(--ink-faint); }

.subjchips { list-style: none; margin: 0; padding: 0;
             display: grid; gap: .5rem;
             grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.subjchip { display: flex; flex-direction: column; gap: .15rem;
            min-height: 58px; padding: .65rem .9rem;
            border: 1px solid var(--rule); border-radius: 4px;
            background: var(--paper); text-decoration: none; }
.subjchip:hover { border-color: var(--accent); background: var(--accent-bg); }
.subjchip__s { font-size: 1rem; font-weight: 700; color: var(--ink);
               line-height: 1.4; }
.subjchip:hover .subjchip__s { color: var(--accent-ink); }
.subjchip__n { font-size: .76rem; color: var(--ink-faint); }
.subjchip--soon { background: var(--surface); border-style: dashed;
                  cursor: default; }
.subjchip--soon .subjchip__s { color: var(--ink-faint); font-weight: 400; }

/* 연도 통합 PDF 다운로드 — 문제지·정답. 7과목이 한 권이라 연도 페이지에 한 번만 놓인다 */
.cbt-pdfs { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.75rem; }
.cbt-pdf { display: inline-flex; align-items: center; gap: .4rem;
           min-height: 44px; padding: 0 1rem; border-radius: 4px;
           border: 1px solid var(--rule); background: var(--surface);
           color: var(--ink); font-size: .92rem; font-weight: 700;
           text-decoration: none; }
.cbt-pdf:hover { border-color: var(--accent); background: var(--accent-bg);
                 color: var(--accent-ink); }

.cbt-year__name a { color: inherit; text-decoration: none; }
.cbt-year__name a:hover { color: var(--accent-ink); text-decoration: underline; }

/* PDF 다운/CBT 상호 연결 — 기능은 분리하되 한 줄로만 오간다 */
.cbt-crosslink { margin: 0 0 1.75rem; padding: .75rem 1rem;
                 background: var(--surface); border-left: 3px solid var(--rule);
                 border-radius: 3px; font-size: .92rem; color: var(--ink-soft); }
.cbt-crosslink a { color: var(--accent-ink); font-weight: 700; }

/* /exam-pdf/ 목록 — 연도 카드. subjchip 과 같은 톤이지만 대상이 「연도」라 이름을 분리한다 */
.yearchips { list-style: none; margin: 0; padding: 0;
             display: grid; gap: .5rem;
             grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.yearchip { display: flex; flex-direction: column; gap: .15rem;
            min-height: 58px; padding: .65rem .9rem;
            border: 1px solid var(--rule); border-radius: 4px;
            background: var(--paper); text-decoration: none; }
.yearchip:hover { border-color: var(--accent); background: var(--accent-bg); }
.yearchip__y { font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
               color: var(--ink); font-variant-numeric: tabular-nums; }
.yearchip:hover .yearchip__y { color: var(--accent-ink); }
.yearchip__n { font-size: .76rem; color: var(--ink-faint); }

/* /pastpapers/ 허브 — PDF 다운로드 / 바로 풀기, 두 갈래로 크게 가른다 */
.pp-cards { list-style: none; margin: 2rem 0 0; padding: 0;
            display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.pp-card { display: flex; flex-direction: column; gap: .5rem;
           padding: 1.75rem 1.5rem; min-height: 9rem;
           border: 1px solid var(--rule); border-radius: 6px;
           background: var(--surface); text-decoration: none; }
.pp-card:hover { border-color: var(--accent); background: var(--accent-bg); }
.pp-card__num { width: 2rem; height: 2rem; display: inline-flex;
                align-items: center; justify-content: center;
                border-radius: 50%; background: var(--surface-2);
                color: var(--ink-soft); font-weight: 700; font-size: .95rem; }
.pp-card:hover .pp-card__num { background: var(--accent); color: #fff; }
.pp-card__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
                   color: var(--ink); }
.pp-card:hover .pp-card__title { color: var(--accent-ink); }
.pp-card__desc { font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 34rem) {
  .pp-cards { grid-template-columns: 1fr; }
}

/* 검수 모드(?review=1) — 개발용. 내비·링크 어디에도 안 걸린다 */
.cbt-review-badge { position: sticky; top: .5rem; z-index: 20;
                    display: inline-block; margin: 0 0 1.25rem;
                    padding: .4rem .9rem; border-radius: 2rem;
                    background: #7c2d12; color: #fff;
                    font-size: .82rem; font-weight: 700;
                    font-variant-numeric: tabular-nums; }
.cbt-opt.is-answer { border-color: #2f7a4f; }
.cbt-opt.is-answer .cbt-opt__num { background: #2f7a4f; color: #fff; }
.cbt-opt__answer-tag { flex: 0 0 auto; align-self: center;
                       padding: .1rem .55rem; border-radius: 2rem;
                       background: #eaf6ee; color: #216b41;
                       font-size: .76rem; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .cbt-opt__answer-tag { background: #16341f; color: #7fd9a0; }
}