@import url("./tokens.css");
@import url("./components.css");

/* layers.css — 새 층(과목·단원·개념·공식·암기법) 페이지의 유일한 꾸밈 파일.
 *
 * docs/SPEC-SEO-STAGE0.md §3-4: 구조(HTML)와 꾸밈(CSS)을 완전히 나눈다.
 * HTML 에는 인라인 style·<style>·유틸리티 클래스가 없고 뜻 있는 훅 클래스만 있다.
 * 이 파일 하나를 갈아 끼우면 전체 디자인이 바뀐다. 단계 0 은 읽기 편한 최소 스타일만
 * 둔다(본문 폭·행간·표 선·details 표시·보기 번호). 빌더가 site-next/styles/ 로 복사한다.
 */

/* ── 바탕 ─────────────────────────────────────────────────────────── */
.page {
  color-scheme: var(--color-scheme);
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}
.page a { color: var(--primary-strong); }

/* ── 사이트 머리 ───────────────────────────────────────────────────── */
.site-head {
  max-width: 960px;    /* D-022 봉인(10-30) — 본문 틀과 같은 값 */
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.site-logo { font-weight: 700; font-size: var(--text-lg); text-decoration: none; color: var(--foreground); }
.site-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; font-size: var(--text-sm); }
.site-nav-link { text-decoration: none; color: var(--muted-foreground); }

/* ── 본문 틀 ───────────────────────────────────────────────────────── */
.page-main { max-width: 960px; margin: 0 auto; padding: 16px 16px 48px; } /* 960 = D-022 봉인 본문 틀(10-30) — 머리띠는 --cm-max 992, 본문은 960 */

.crumbs-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--muted-foreground); } /* align-items: 「홈」 링크는 누르는 높이 48px(components.css)라 글자만 있는 옆 칸보다 아래로 처졌다(10-15) — 가운데로 맞춘다 */
.crumbs-item + .crumbs-item::before { content: "/"; margin-right: 6px; color: var(--input); }
.crumbs-link { color: var(--muted-foreground); text-decoration: none; }

.page-title { font-size: var(--text-2xl); line-height: 1.35; margin: 0 0 12px; color: var(--foreground); }
.page-lead { font-size: var(--text-lg); color: var(--foreground); margin: 0 0 8px; }
.page-meta { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0 0 24px; }
.page-hero { margin: 0 0 24px; }
.page-hero-img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }

.section-title { font-size: var(--text-xl); margin: 36px 0 12px; color: var(--foreground); }
.nav-title { font-size: var(--text-base); margin: 28px 0 8px; color: var(--foreground); }

/* ── 출제기준 트리 ─────────────────────────────────────────────────── */
.standard-source { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0 0 8px; }
.standard-tree { margin: 0; padding-left: 1.4em; }
.standard-item--l2 { margin-top: 6px; font-weight: 600; }
.standard-item--l3 { font-weight: 400; color: var(--muted-foreground); }

/* ── 링크 목록 ─────────────────────────────────────────────────────── */
.link-list { margin: 0; padding-left: 1.2em; }
.link-item { margin: 4px 0; }
.link-count { font-size: var(--text-sm); color: var(--muted-foreground); margin-left: 6px; }

/* ── 문항 블록 ─────────────────────────────────────────────────────── */
.question-list { list-style: none; margin: 0; padding: 0; }
.question-item { margin: 0 0 20px; }
.cbt-question-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; }
.q-header { display: flex; gap: 10px; font-size: var(--text-sm); color: var(--muted-foreground); margin-bottom: 8px; }
.q-number { font-weight: 700; color: var(--primary-strong); }
.q-stem { margin: 0 0 12px; white-space: normal; }
.q-figure { margin: 8px 0 12px; }
.q-figure-img { max-width: 100%; height: auto; }
.q-options { list-style: none; counter-reset: opt; margin: 0 0 12px; padding: 0; }
.opt-item { counter-increment: opt; padding: 8px 12px; margin: 6px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.opt-item::before { content: counter(opt) ". "; font-weight: 700; color: var(--muted-foreground); }
.cbt-explanation { border-top: 1px dashed var(--border); padding-top: 8px; }
.exp-toggle { cursor: pointer; font-weight: 600; color: var(--primary-strong); }
.exp-answer { margin: 10px 0 6px; }
.exp-answer-num { color: var(--correct-strong); }
.exp-summary { font-weight: 600; margin: 6px 0; }
.exp-heading { font-size: var(--text-sm); margin: 12px 0 4px; color: var(--foreground); }
.exp-links { margin: 10px 0 0; padding-left: 1.2em; font-size: var(--text-sm); }
.questions-more { font-size: var(--text-sm); color: var(--muted-foreground); }

/* ── 개념·공식·암기법 ─────────────────────────────────────────────── */
.concept-summary { font-weight: 600; }
.formula { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
/* Fixed cert header: keep linked formula titles visible (two touch targets). */
.formula[id] { scroll-margin-top: calc(var(--touch-min) * 2); }
.formula-name { font-size: var(--text-base); margin: 0 0 6px; }
.formula-latex { display: block; overflow-x: auto; background: var(--muted); padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.formula-vars { border-collapse: collapse; margin: 8px 0; font-size: var(--text-sm); }
.formula-vars th, .formula-vars td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.formula-desc, .formula-concepts { margin: 6px 0 0; font-size: var(--text-sm); }
/* 과목 공식 쪽 목차 — 이름 50~60개를 한 화면에(좁은 폭은 한 단) */
.formula-toc { margin: 0 0 16px; }
.formula-toc-count, .formula-toc-n { font-size: var(--text-sm); font-weight: 400; color: var(--muted-foreground); }
.formula-toc-list { columns: 3 13em; column-gap: 24px; font-size: var(--text-sm); }
.formula-toc-list .link-item { break-inside: avoid; margin: 0 0 4px; }
.mnemonic { border-left: 3px solid var(--primary); background: var(--card); padding: 10px 14px; margin: 12px 0; }
.mnemonic-text { font-weight: 700; margin: 0; }
.mnemonic-technique { font-size: var(--text-xs); color: var(--primary-strong); border: 1px solid var(--ring); border-radius: var(--radius-full); padding: 0 8px; margin-right: 6px; }
.mnemonic-expansion, .mnemonic-target, .mnemonic-concepts { margin: 4px 0 0; font-size: var(--text-sm); }

/* ── 표(과목 대단원 표 등) ─────────────────────────────────────────── */
.count-table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.count-table th, .count-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }

/* ── CTA · 바닥 ────────────────────────────────────────────────────── */
.cta { margin: 32px 0 0; padding: 14px 16px; background: var(--primary-soft); border-radius: var(--radius); }
.cta-text { margin: 0; }
.cta-link { font-weight: 700; }

/* ── 풀기 단추(ORDER-NV-01) — 개념·단원·계산기·가이드에서 엔진 범위 풀이로 잇는다 ── */
/* 작은 단추: 본문 첫 구획 아래 한 줄 — 머리글·공식보다 위에 오지 않는 자리에만 단다 */
.solve-inline { margin: 16px 0 0; }
.solve-inline-link { font-weight: 700; }
/* 주 단추: 글 끝 cta 안 — cert-home .ch-action--primary 와 같은 토큰 구성 */
.solve-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary);
  background: var(--primary);
  font-weight: 700;
  text-decoration: none;
  margin: 0 0 10px;
}
/* `.page a`(무게 0,1,1)가 주조 면 위 글자색을 이겨 쓰지 못 하게 다시 못 박는다(cert-home 과 같은 사유) */
.page .solve-btn { color: var(--primary-foreground); }
.solve-btn + .cta-text { margin: 8px 0 0; }
/* 풀기 단추 안 이용 조건 표식 — 2026-11-08 캐리 B32. 문구는 build_layers.cond_badge 가 만들고
   모양은 cert-home.css 의 .ch-cond 와 같다(currentColor 알약 — solve-inline-link 본문 링크·
   solve-btn 주조 면 어디서든 글자색을 따라 읽힌다). */
.ch-cond {
  display: inline-block;
  margin-left: 2px;
  padding: 0 .5em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .72em;
  font-weight: 600;
  line-height: 1.6;
  opacity: .9;
}

/* ── 자주 묻는 물음 자리(ORDER-NV-01 3) — 콘텐츠가 채운 쪽만 그린다 ── */
[data-faq]:empty { display: none; }
.faq-list { margin: 0; }
.faq-q { font-weight: 700; margin: 14px 0 0; }
.faq-a { margin: 4px 0 0; }
.site-foot { max-width: 960px;    /* D-022 — 본문 틀과 같은 값 */ margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); }
.foot-nav-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.foot-nav-link { color: var(--muted-foreground); }
.foot-copy { margin: 0; }
/* AI 고지 — 모든 페이지 바닥, 작은 11px · 불투명 보조 글자색 */
.ai-notice { font-size: 11px; color: var(--muted-foreground);  margin: 12px 0 0; }
.ai-notice a, a.ai-link { color: inherit; }   /* 8673ea9 인라인 색 대신 클래스(ORDER-24) */

/* ── 수식 (빌드 때 KaTeX 가 만든 MathML — 글꼴·스크립트 없이 브라우저가 그린다) ── */
.katex math[display="block"] { display: block; margin: 8px 0; overflow-x: auto; }
/* KaTeX 가 못 읽은 식은 원문 LaTeX 를 코드로 남긴다 */
.math-fallback { font-size: var(--text-sm); background: var(--muted); padding: 0 4px; border-radius: var(--radius-xs); }

/* ── 광고 단위 (--enable-ads = 승인 뒤에만 HTML 에 생긴다. 심사 전 페이지에는 요소가 없다) ── */
.ad-item { list-style: none; margin: 0 0 20px; }
.ad-slot { margin: 48px 0; min-height: var(--ad-h-rect); }
.ad-slot[data-variant="band"] { min-height: var(--ad-h-band); }
.ad-slot .adsbygoogle { display: block; }

/* ── 관련 개념 글자 목록 (--no-concept-links: 개념 층을 아직 안 올린 배포) ── */
.concept-names { margin: 0; padding-left: 1.2em; }
.concept-name { margin: 4px 0; }

/* ── 본문 슬롯 (content/{층}/{slug}.md → build_layers.md_to_html) ─────── */
.body-heading { font-size: var(--text-xl); margin: 32px 0 10px; color: var(--foreground); }
.body-subheading { font-size: var(--text-lg); margin: 24px 0 8px; color: var(--foreground); }
.body-minor-heading { font-size: var(--text-base); margin: 20px 0 6px; color: var(--foreground); }
.body-para { margin: 0 0 12px; }
.body-list { margin: 0 0 12px; padding-left: 1.4em; }
.body-list-item { margin: 4px 0; }
/* 파이프 표 — 좁은 화면에서는 표만 옆으로 민다(쪽 전체가 가로로 밀리지 않게) */
.data-table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 8px 0 16px; font-size: var(--text-sm); }
/* 넓은 표(4열 이상)는 종목명 열을 지키고, 작은 화면에서 가로 이동을 안내한다. */
.data-table[data-cols]:not([data-cols="1"]):not([data-cols="2"]):not([data-cols="3"]) td:first-child,
.data-table[data-cols]:not([data-cols="1"]):not([data-cols="2"]):not([data-cols="3"]) th:first-child { min-width: 6.5em; }
@media (max-width: 640px) {
  .data-table[data-cols]:not([data-cols="1"]):not([data-cols="2"]):not([data-cols="3"])::before {
    content: "표를 옆으로 밀어 보세요";
    display: block; padding: 4px 0 8px; color: var(--muted-foreground);
    font-size: var(--text-xs);
  }
}
/* ── 표 가독성(주인님 10-31 2차 지시 3): 셀 여백·행 구분선·숫자 정렬 ── */
.data-table th, .data-table td { padding: 10px 12px; text-align: left; vertical-align: top; border: none; border-bottom: 1px solid var(--border); }
.data-table thead th { border-bottom: 2px solid var(--border-strong, var(--border)); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table-head th { background: var(--background); white-space: nowrap; }
.data-table [data-align="center"] { text-align: center; }
.data-table [data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
/* Two-column mobile cards can contain long explanations; preserve their wrapping. */
.data-table:not([data-cols="2"]) td[data-align="right"] { white-space: nowrap; overflow-wrap: normal; }
/* 폰(<640): 두 칸(항목|값) 표는 카드형 — 설명이 쪼개지지 않게(2차 지시 3).
   3열 대단원 표(count-table)도 같은 카드형 — 머리 행을 감춘 만큼 값 앞에 뜻 이름표를 붙인다(클로너 시험 10-31). */
@media (max-width: 639.98px) {
  .data-table[data-cols="2"] { display: block; border: 0; overflow: visible; }
  .data-table[data-cols="2"] thead { display: none; }
  .data-table[data-cols="2"] tbody, .data-table[data-cols="2"] tr { display: block; }
  .data-table[data-cols="2"] tbody { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .data-table[data-cols="2"] tr { border-bottom: 1px solid var(--border); }
  .data-table[data-cols="2"] tr:last-child { border-bottom: none; }
  .data-table[data-cols="2"] td { display: block; border: 0; padding: 5px 14px; }
  .data-table[data-cols="2"] td:first-child { font-weight: 700; padding-top: 10px; }
  .data-table[data-cols="2"] td:last-child { padding-bottom: 10px; }
  .data-table[data-cols="2"] td[data-align="right"] { text-align: left; }
  .count-table { display: block; border: 0; overflow: visible; }
  .count-table thead { display: none; }
  .count-table tbody, .count-table tr { display: block; }
  .count-table tbody { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .count-table tr { border-bottom: 1px solid var(--border); }
  .count-table tr:last-child { border-bottom: none; }
  .count-table td { display: block; border: 0; padding: 5px 14px; }
  .count-table td:first-child { font-weight: 700; padding-top: 10px; }
  .count-table td:last-child { padding-bottom: 10px; }
  .count-table td[data-verified]::before { content: "문항 수 "; color: var(--muted-foreground); font-weight: 400; }
  .count-table td[data-public]::before { content: "공개 문항 "; color: var(--muted-foreground); font-weight: 400; }
  .page .link-item { margin: 0 0 8px; }
  .page .link { display: inline-block; padding: 2px 0; }
}
.data-table--schedule td { white-space: nowrap; }

/* ── 정보 페이지 (/info/ — 명세 §11-B) ─────────────────────────────── */
.page-date, .schedule-date { font-variant-numeric: tabular-nums; }
.schedule-meta { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0 0 8px; }
.sources { font-size: var(--text-sm); }
.info-list { margin: 0; padding-left: 1.4em; }
.info-item { margin: 0 0 14px; }
.info-link { font-weight: 700; }
.info-desc { margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
/* 과목·대단원 CTA 옆 「시험 정보」 한 줄 */
.info-entry { margin: 10px 0 0; padding: 10px 16px; background: var(--background); border-radius: var(--radius); }
.info-entry-text { margin: 0; font-size: var(--text-sm); }
.info-entry-link { font-weight: 700; }

/* ── 계산기 (/calc/ — docs/SPEC-CALC-LAYER.md §4. 훅은 calc- 접두만) ──────────
 * 위젯 움직임은 /calc/calc.js. 좁은 화면에서도 칸이 쪽 폭을 넘지 않게 min-width:0·줄바꿈. */
.calc { margin: 8px 0 20px; }
.calc-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; }
.calc-widget [hidden] { display: none; }
.calc-modes { border: 0; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.calc-modes-title { font-size: var(--text-sm); font-weight: 700; color: var(--muted-foreground); padding: 0; margin-right: 4px; }
.calc-mode { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.calc-guide { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0 0 12px; }
.calc-fields, .calc-members { display: flex; flex-direction: column; gap: 12px; }
.calc-field { min-width: 0; }
.calc-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--foreground); margin-bottom: 4px; }
.calc-symbol { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: var(--text-sm); font-weight: 400; color: var(--primary-strong); }
.calc-control { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.calc-input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; font: inherit; font-size: var(--text-base); padding: 8px 10px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--card); color: var(--foreground); font-variant-numeric: tabular-nums; }
.calc-input:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); }
.calc-input[aria-invalid="true"] { border-color: var(--wrong-strong); }
.calc-prefix { flex: 0 0 auto; font: inherit; font-size: var(--text-base); padding: 7px 6px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--background); color: var(--foreground); }
.calc-unit { flex: 0 0 auto; font-size: var(--text-base); color: var(--muted-foreground); min-width: 2.5em; }
.calc-hint { font-size: var(--text-xs); color: var(--muted-foreground); margin: 4px 0 0; }
.calc-row-actions, .calc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.calc-submit, .calc-reset, .calc-row-add, .calc-row-remove { font: inherit; font-size: var(--text-base); padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--ring); background: var(--primary-soft); color: var(--primary-strong); cursor: pointer; }
.calc-submit { background: var(--primary-strong); border-color: var(--primary-strong); color: var(--primary-foreground); font-weight: 700; }
.calc-submit:hover { background: var(--primary-strong); }
.calc-row-add:disabled, .calc-row-remove:disabled { opacity: .45; cursor: default; }
.calc-result { display: block; margin: 12px 0 0; }
.calc-result:empty { display: none; }
.calc-result-line { display: block; margin: 6px 0 0; padding: 10px 12px; background: var(--correct-soft); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.calc-result-label { font-size: var(--text-xs); font-weight: 700; color: var(--correct-strong); margin-right: 6px; }
.calc-result-value { font-size: var(--text-xl); color: var(--correct-strong); font-variant-numeric: tabular-nums; }
.calc-msg { display: block; margin: 6px 0 0; font-size: var(--text-sm); }
.calc-msg--error { color: var(--wrong-strong); }
.calc-msg--warn { color: var(--warning-foreground); }
.calc-noscript { font-size: var(--text-sm); color: var(--warning-foreground); margin: 10px 0 0; }
.calc-formula-math { overflow-x: auto; margin: 0 0 8px; font-size: var(--text-lg); }
.calc-example-answer { margin: 6px 0 0; font-weight: 600; }
.calc-example-label { font-size: var(--text-sm); color: var(--correct-strong); margin-right: 6px; }
.calc-example-mode { font-size: var(--text-sm); color: var(--muted-foreground); margin: 4px 0 0; }
/* 허브 — 과목별 카드 */
.calc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.calc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.calc-card-link { font-weight: 700; }
.calc-card-formula { overflow-x: auto; margin: 6px 0; }
.calc-card-def { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
/* ── S6(2026-10-31) 읽기 폭 — 개념(tp)·안내(guide) 문서의 산문 문단 ──
   주인님 지시(10-31): 개념 설명 본문 폭이 넓어 읽기용 여백 규칙이 필요.
   문단(p)·목록 줄(li)에만 max-width(토큰 --reading-max · tokens.css §0)을 건다 — 표·코드·그림·수식
   묶음(div·table·pre·figure)은 틀 폭(--content-max 960 · D-022) 그대로라 G-3 과 충돌하지 않는다.
   736px보다 좁은 화면(폰)에서는 뷰포트가 먼저 좁아 아무 효과 없다.
   types.css(72rem 틀)·guides.css(960 틀) 두 문서 족이 모두 layers.css 를 부르므로 규칙은 여기 한 곳에. */
.tp-main :is(p, li),
.guide-body :is(p, li) { max-width: var(--reading-max); }

/* 암기장 풀이·외울 대상 칸의 긴 수식은 칸 안에서 옆으로 민다 — 좁은 화면 문서 넘침 막기(캐리 recheck4 · 11-02) */
.mnemonic-expansion, .mnemonic-target { overflow-x: auto; overflow-y: hidden; max-width: 100%; }