/* ══ NUBI 에디토리얼 디자인 시스템 — 부품 (2026-10-10) ══════════════════════
   토큰(css/editorial.css)으로만 쓴다. 숫자를 직접 쓰는 것은 레이아웃 치수(기둥 폭, 상단바 높이)뿐이다.
   editorial_scale.css(자동 생성) 뒤에 온다 — 같은 힘이면 여기가 이긴다.
   주의: 여기서 media 없이 정한 값은 style.css 의 폰 규칙(눈금에 맞춰 scale 파일에 다시 찍힌 것)도 덮는다.
   폰에서 달라야 하는 값은 맨 아래 폰 블록에 다시 적는다. */

/* ── 제목·글꼴 자리 ─────────────────────────────────── */
/* 명조: 화면 제목 · 트랙/과정 이름 · 권 안내 한 줄 · 선생님 메시지. 명조는 굵기가 한 벌뿐이라 regular 로 둔다 */
html[data-skin="editorial"] h1.page,
html[data-skin="editorial"] .program-hero h1 {
  font-family: var(--ff-display); font-weight: var(--fw-regular); font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: -0.01em; margin-bottom: var(--sp-3);
}
html[data-skin="editorial"] .tk-head b,
html[data-skin="editorial"] .prog-head h2 { font-family: var(--ff-display); font-weight: var(--fw-regular); font-size: var(--fs-headline); letter-spacing: -0.01em; }
html[data-skin="editorial"] .vol-plan .vp-one { font-family: var(--ff-display); font-weight: var(--fw-regular); font-size: var(--fs-title); line-height: var(--lh-snug); }
html[data-skin="editorial"] .ment p { font-family: var(--ff-display); font-size: var(--fs-body-lg); line-height: var(--lh-read); }
/* 고딕 제목: 구역 제목(title) · 상자 제목(subtitle) · 이름표(label) */
html[data-skin="editorial"] .vp-steps { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: -0.01em; margin: var(--sp-8) 0 var(--sp-3); }
html[data-skin="editorial"] .card h2 { font-size: var(--fs-subtitle); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
html[data-skin="editorial"] .ment .who,
html[data-skin="editorial"] .rg-title,
html[data-skin="editorial"] .vol-plan .vp-k { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: 0; color: var(--c-ink-2); }
html[data-skin="editorial"] .ment .who { color: var(--c-ink); }
html[data-skin="editorial"] p.sub,
html[data-skin="editorial"] .stage-desc { color: var(--c-ink-2); }

/* ── 상단바 ─────────────────────────────────────────── */
html[data-skin="editorial"] .topbar { border-bottom-color: var(--c-line); backdrop-filter: blur(10px); }
html[data-skin="editorial"] .topbar nav a { border-radius: var(--r-md); opacity: 1; color: var(--c-ink-2); font-weight: var(--fw-medium); transition: background var(--m-fast), color var(--m-fast); }
html[data-skin="editorial"] .topbar nav a:hover { background: var(--c-tint); color: var(--c-ink); }
html[data-skin="editorial"] .topbar nav a.active { color: var(--c-ink); font-weight: var(--fw-bold); box-shadow: none; background: var(--c-tint); }
html[data-skin="editorial"] .topbar nav a.locked { opacity: 1; color: var(--c-ink-3); }
html[data-skin="editorial"] .theme-btn,
html[data-skin="editorial"] .mob-btn,
html[data-skin="editorial"] .exam-cur { border-radius: var(--r-md); border-color: var(--c-line); background: var(--c-surface); }
html[data-skin="editorial"] .exam-list { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-2); background: var(--c-surface); }
html[data-skin="editorial"] .nav-tracklabel { background: transparent; color: var(--c-brand); font-weight: var(--fw-bold); padding: var(--sp-1); }

/* 넓은 화면: 메뉴 두 줄 — 위 줄 사이트 메뉴, 아래 줄 이번 권 단계.
   nav 를 display:contents 로 풀어 링크를 상단바 칸으로 올리고, order 로 줄을 가른다 (마크업은 그대로). */
@media (min-width: 901px) {
  html[data-skin="editorial"] .topbar { flex-wrap: wrap; padding: 0 var(--sp-6); column-gap: var(--sp-3); row-gap: 0; min-height: 60px; }
  html[data-skin="editorial"] .topbar > * { order: 5; }
  html[data-skin="editorial"] .topbar > .brand { order: 0; min-height: 60px; }
  html[data-skin="editorial"] .topbar > .exam-menu { order: 1; }
  html[data-skin="editorial"] .topbar > #nav { display: contents; }
  html[data-skin="editorial"] #nav > * { order: 3; }
  html[data-skin="editorial"] #nav > a:not(.nav-tracklabel ~ a) { font-size: var(--fs-body); padding: var(--sp-2) var(--sp-3); }
  html[data-skin="editorial"] .topbar > .theme-btn { margin-left: auto; }
  html[data-skin="editorial"] .topbar::after { content: ""; order: 6; flex-basis: calc(100% + 2 * var(--sp-6)); height: 1px; margin: 0 calc(-1 * var(--sp-6)); background: var(--c-line-soft); }
  html[data-skin="editorial"] .topbar:not(:has(.nav-tracklabel))::after { display: none; }
  html[data-skin="editorial"] #nav > .nav-tracklabel,
  html[data-skin="editorial"] #nav > .nav-tracklabel ~ * { order: 7; }
  html[data-skin="editorial"] #nav > .nav-tracklabel { font-size: var(--fs-label); margin: 0 var(--sp-2) 0 0; padding: 0 var(--sp-4) 0 0; border-right: 1px solid var(--c-line); border-radius: 0; line-height: var(--lh-tight); }
  html[data-skin="editorial"] #nav > .nav-tracklabel ~ a { font-size: var(--fs-label); padding: var(--sp-3) var(--sp-2); border-radius: 0; background: transparent; }
  html[data-skin="editorial"] #nav > .nav-tracklabel ~ a:hover { color: var(--c-ink); background: transparent; }
  html[data-skin="editorial"] #nav > .nav-tracklabel ~ a.active { box-shadow: inset 0 -2px 0 var(--c-gold); background: transparent; }
  html[data-skin="editorial"] #nav > .nav-div { margin: var(--sp-3) var(--sp-2); }
  html[data-skin="editorial"] .toc { top: 120px; max-height: calc(100vh - 140px); }
}

/* ── 상자 ───────────────────────────────────────────────
   상자 = 흰 종이 + 1px 테두리 + r-lg. 상자 안의 상자(예시·채점)는 r-md.
   '목표' 상자(권 안내·과제 목적)만 위 괘선 3px 브랜드색. */
html[data-skin="editorial"] .card,
html[data-skin="editorial"] .ment,
html[data-skin="editorial"] .read-guide,
html[data-skin="editorial"] .chapter-note,
html[data-skin="editorial"] .mark-hint,
html[data-skin="editorial"] .guide-toc,
html[data-skin="editorial"] .track-card,
html[data-skin="editorial"] .prog-card,
html[data-skin="editorial"] .program-hero,
html[data-skin="editorial"] .rd-meter,
html[data-skin="editorial"] .rd-guide,
html[data-skin="editorial"] .review-band,
html[data-skin="editorial"] .home-goon,
html[data-skin="editorial"] .toc { border-radius: var(--r-lg); border-color: var(--c-line); background-color: var(--c-surface); }
html[data-skin="editorial"] .guide-eg,
html[data-skin="editorial"] .grade,
html[data-skin="editorial"] .commentary .model,
html[data-skin="editorial"] .commentary .demo,
@media (min-width: 601px) { html[data-skin="editorial"] .gtile { border-radius: var(--r-md); } }   /* 폰 조각상 줄은 예전 누비 그대로(10-10) */
html[data-skin="editorial"] .guide-eg { background: var(--c-surface); }
html[data-skin="editorial"] .read-guide.primary,
html[data-skin="editorial"] .card.primary,
html[data-skin="editorial"] .ment { background-image: none !important; }
html[data-skin="editorial"] .vol-plan,
html[data-skin="editorial"] .read-guide { border-top: 3px solid var(--c-brand); }
html[data-skin="editorial"] .read-guide { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
html[data-skin="editorial"] .read-guide p { color: var(--c-ink); }
/* 미시독해 생애 장 머리 한 줄 (2026-10-15) — 옆 상자들과 같은 모서리·바탕, 윗선만 브랜드색 */
html[data-skin="editorial"] .life-note { border-radius: var(--r-lg); border: 1px solid var(--c-line); border-top: 2px solid var(--c-brand); background-color: var(--c-surface); color: var(--c-ink); }

/* ── 할 일 줄 — 상태 다섯: 평소 · 머무름 · 지금(next) · 마침(done) · 잠김(locked) ── */
html[data-skin="editorial"] .stage-list { gap: var(--sp-3); }
html[data-skin="editorial"] .stage { border-radius: var(--r-lg); border-color: var(--c-line); padding: var(--sp-5); gap: var(--sp-4);
  transition: border-color var(--m-fast), box-shadow var(--m-fast); }
html[data-skin="editorial"] .stage:hover { border-color: var(--c-line-strong); }
html[data-skin="editorial"] .stage .num { border: 0; background: var(--c-sunk); color: var(--c-ink-2); font-weight: var(--fw-semibold); }
html[data-skin="editorial"] .stage .t b { font-size: var(--fs-subtitle); font-weight: var(--fw-semibold); }
html[data-skin="editorial"] .stage .t span { color: var(--c-ink-2); line-height: var(--lh-body); }
html[data-skin="editorial"] .stage .t .unit-time { margin-top: var(--sp-2); color: var(--c-ink-3); }
html[data-skin="editorial"] .stage .badge { color: var(--c-ink-3); }
html[data-skin="editorial"] .stage .badge .btn { font-size: var(--fs-label); padding: var(--sp-2) var(--sp-4); }
html[data-skin="editorial"] .stage.next { border-color: var(--c-brand); box-shadow: var(--e-1); }
html[data-skin="editorial"] .stage.next .num { background: var(--c-brand); color: var(--c-on-brand); }
html[data-skin="editorial"] .stage.done .num { background: var(--c-brand-soft); color: var(--c-brand-ink); }
html[data-skin="editorial"] .stage.done .badge { color: var(--c-brand-ink); }
html[data-skin="editorial"] .stage.locked { opacity: 1; background: var(--c-sunk); border-color: var(--c-line-soft); }
html[data-skin="editorial"] .stage.locked .t b { color: var(--c-ink-2); }

/* ── 단추 — 채움(누를 것 하나) · 고스트(그 밖) · 작은 단추 ── */
html[data-skin="editorial"] .btn { border-radius: var(--r-md); font-weight: var(--fw-semibold); letter-spacing: 0; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-label); line-height: var(--lh-tight); }
html[data-skin="editorial"] .btn.small { padding: var(--sp-2) var(--sp-3); }
html[data-skin="editorial"] .btn.ghost { background: var(--c-surface); border-color: var(--c-field-line); }
html[data-skin="editorial"] .btn.ghost:hover { border-color: var(--c-brand); }
html[data-skin="editorial"] .btn:disabled { background: var(--c-sunk); color: var(--c-ink-3); }
html[data-skin="editorial"] .gt-btn { border-radius: var(--r-md); border-width: 1px; font-size: var(--fs-label); }
html[data-skin="editorial"] .read-size button { border-radius: var(--r-md); }

/* ── 입력칸 ─────────────────────────────────────────── */
html[data-skin="editorial"] textarea,
html[data-skin="editorial"] input[type="text"],
html[data-skin="editorial"] input[type="number"],
html[data-skin="editorial"] select { border-radius: var(--r-md); border-color: var(--c-field-line); background: var(--c-surface); font-size: var(--fs-body); }
html[data-skin="editorial"] textarea:focus,
html[data-skin="editorial"] input:focus,
html[data-skin="editorial"] select:focus { outline: 2px solid var(--c-brand); outline-offset: 0; border-color: transparent; }
html[data-skin="editorial"] .field > label { font-size: var(--fs-label); font-weight: var(--fw-semibold); }
html[data-skin="editorial"] .field .hint,
html[data-skin="editorial"] .field label.field-sub { color: var(--c-ink-3); }

/* ── 홈 ─────────────────────────────────────────────── */
html[data-skin="editorial"] .fp-rule { display: none; }
html[data-skin="editorial"] .fp-sub { font-size: var(--fs-body); color: var(--c-ink-2); line-height: var(--lh-body); }
html[data-skin="editorial"] .fp-title-en { color: var(--c-ink-2); }
html[data-skin="editorial"] .track-card::before { opacity: .07; }
html[data-skin="editorial"] .tk-head { border-bottom-color: var(--c-line-soft); }
html[data-skin="editorial"] .tk-tagline { color: var(--c-ink-2); font-weight: var(--fw-semibold); }
html[data-skin="editorial"] .tk-sec > b { font-size: var(--fs-body); }
@media (min-width: 601px) { html[data-skin="editorial"] .gl-stat .gtile { border-color: var(--c-line); box-shadow: 0 1px 0 var(--c-line-soft); } }   /* 폰 조각상 줄은 예전 누비 그대로(10-10) */
html[data-skin="editorial"] .prog-card.open { box-shadow: none; }

/* ── 권 칸 · 말풍선 ─────────────────────────────────── */
html[data-skin="editorial"] .vol-cell { border-radius: var(--r-sm); border-color: var(--c-line-soft); background: var(--c-sunk); }
html[data-skin="editorial"] .vol-cell.current { background: var(--c-brand); border-color: var(--c-brand); }
html[data-skin="editorial"] .vol-cell.current .vol-book,
html[data-skin="editorial"] .vol-cell.current .vol-eng,
html[data-skin="editorial"] .vol-cell.current .vol-auth,
html[data-skin="editorial"] .vol-cell.current > b,
html[data-skin="editorial"] .vol-cell.current .frac { color: var(--c-on-brand); }
html[data-skin="editorial"] .vol-cell.complete { background: var(--c-brand-soft); border-color: var(--c-brand-soft); color: var(--c-brand-ink); }
html[data-skin="editorial"] body[data-route="course"] .course-top::before { display: none; }
html[data-skin="editorial"] .status-line { border-width: 1px; box-shadow: none; }

/* ── 읽기 화면 ──────────────────────────────────────── */
html[data-skin="editorial"] .toc a { border-radius: var(--r-sm); color: var(--c-ink-2); }
html[data-skin="editorial"] .toc a.active { color: var(--c-ink); background: var(--c-tint); }
html[data-skin="editorial"] .toc .part { letter-spacing: .02em; color: var(--c-ink-2); opacity: 1; }
/* 읽는 면은 원래 조판 그대로 — 바탕 글자 간격을 물려받지 않게 */
html[data-skin="editorial"] .book,
html[data-skin="editorial"] .exam-sheet,
html[data-skin="editorial"] .passage,
html[data-skin="editorial"] .sentence-card { letter-spacing: normal; }

/* ── 이번 권 할 일 두 기둥 (editorial.js 가 .ed-main / .ed-side 로 나눈다, 1100px 이상) ── */
html[data-skin="editorial"] .wrap.ed-2col { max-width: var(--w-wide); display: grid; grid-template-columns: minmax(0, 1fr) var(--w-side); gap: 0 var(--sp-10); align-items: start; }
html[data-skin="editorial"] .ed-side { position: sticky; top: 132px; display: flex; flex-direction: column; gap: var(--sp-5); padding-top: var(--sp-2); }
html[data-skin="editorial"] .ed-side > * { margin-bottom: 0 !important; }
html[data-skin="editorial"] .ed-side .course-top { padding: var(--sp-5); }
html[data-skin="editorial"] .ed-side .vol-row { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
html[data-skin="editorial"] .ed-side .vol-label { width: auto; }
html[data-skin="editorial"] .ed-side .vol-grid { gap: var(--sp-2); }
html[data-skin="editorial"] .ed-side .vol-wrap.compact .vol-cell { min-height: 44px; padding: var(--sp-1); font-size: var(--fs-micro); }
/* 기둥이 좁다 — 원제·저자는 빼고 권 번호와 책 이름만 */
html[data-skin="editorial"] .ed-side .vol-eng,
html[data-skin="editorial"] .ed-side .vol-auth { display: none; }
html[data-skin="editorial"] .ed-side .ment { padding: var(--sp-5); max-height: calc(100vh - 420px); min-height: 220px; overflow: auto; }
html[data-skin="editorial"] .ed-main .course-subrow { margin-bottom: var(--sp-6); }

/* ── 폰(480px 이하) ─────────────────────────────────────
   style.css 폰 블록은 열린 줄마다 브랜드 테두리·브랜드 번호를 준다. 여기서는 지금 할 줄(.next) 하나만.
   위에서 media 없이 정한 여백은 폰 값으로 다시 적는다. */
@media (max-width: 480px) {
  html[data-skin="editorial"] .stage { padding: var(--sp-4); gap: var(--sp-3); }
  html[data-skin="editorial"] .stage:not(.locked):not(.done):not(.next) { border-color: var(--c-line); }
  html[data-skin="editorial"] .stage:not(.locked):not(.done):not(.next) .num { background: var(--c-sunk); color: var(--c-ink-2); }
  html[data-skin="editorial"] .stage .badge,
  html[data-skin="editorial"] .stage:not(.locked):not(.done) .badge { border: 0; padding: 0; color: var(--c-ink-3); }
  html[data-skin="editorial"] .stage .t b { font-size: var(--fs-body-lg); }
  html[data-skin="editorial"] .read-guide { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  html[data-skin="editorial"] .btn { padding: var(--sp-3) var(--sp-4); }
}