/* ==========================================================================
   EIP Study — 공통 스타일
   모바일 우선(Mobile-first). 라이트/다크 테마 지원.
   ========================================================================== */

/* 🚨 **`hidden` 을 지킨다 — 규칙 한 벌.**
   브라우저 기본 `[hidden] { display: none }` 은 **author 의 어떤 display 규칙에도 진다.**
   `.card { display: block }` 하나로 `hidden` 이 통째로 무시된다.

   실제로 **세 번** 밟았다 — 문항 메모 접힘 · 취약 단원 줄 · **홈의 기출 카드**.
   앞의 둘은 그 요소만 고쳤고(`.qmemo__body[hidden]`·`.weak__row[hidden]`),
   그래서 셋째가 또 났다. 🚨 **기출 카드는 남에게 보이면 안 되는 것이었다** —
   `pool/` 이 없어 자료는 안 나갔지만 카드가 보였다 (사용자가 잡음, 08-26).

   `hidden` 을 쓰는 자리가 23곳이다. **여기 한 줄로 전부 막는다.** */
[hidden] { display: none !important; }

/* ---------- 디자인 토큰 ---------- */
:root {
  --bg:          #f7f8fa;
  --bg-elev:     #ffffff;
  --bg-sunken:   #eef0f4;
  --fg:          #1c1f26;
  --fg-muted:    #5b6472;
  --fg-faint:    #8b93a1;
  --border:      #dfe3ea;
  --border-soft: #eaedf2;

  --accent:      #2f6df6;
  --accent-weak: #e8effe;
  --accent-fg:   #ffffff;

  --warn:        #d97706;
  --warn-weak:   #fef3c7;
  --good:        #059669;
  --good-weak:   #d1fae5;
  --star:        #e0a000;

  --radius:   12px;
  --radius-s: 8px;
  --shadow:   0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
  --shadow-lg:0 8px 32px rgba(16,24,40,.14);

  --sidebar-w: 300px;
  --header-h:  56px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard",
          "Malgun Gothic", "맑은 고딕", Roboto, sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, SFMono-Regular, Consolas,
               "D2Coding", monospace;
}

:root[data-theme="dark"] {
  --bg:          #14161a;
  --bg-elev:     #1c1f25;
  --bg-sunken:   #24272e;
  --fg:          #e6e9ef;
  --fg-muted:    #a4adbb;
  --fg-faint:    #79828f;
  --border:      #2f343d;
  --border-soft: #262a31;

  --accent:      #6f9bff;
  --accent-weak: #1e2a45;
  --accent-fg:   #0f1116;

  --warn:        #fbbf24;
  --warn-weak:   #3a2f10;
  --good:        #34d399;
  --good-weak:   #10312a;
  --star:        #ffc94d;

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* ---------- 리셋 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.72;
  font-size: 16px;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* 고정 헤더에 가려지지 않도록 앵커 오프셋 */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ==========================================================================
   헤더
   ========================================================================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.hdr__title {
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.hdr__title a { color: inherit; }
.hdr__title small {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--fg-faint); line-height: 1.3;
}

.iconbtn {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--radius-s);
  background: transparent; color: var(--fg-muted);
  font-size: 17px; line-height: 1;
}
.iconbtn:hover { background: var(--bg-sunken); color: var(--fg); }
.iconbtn:active { transform: scale(.94); }
.iconbtn[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); }

/* 읽기 진행 바 */
.progressbar {
  position: fixed; top: var(--header-h); left: 0; z-index: 61;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--good));
  transition: width .12s linear;
}

/* ==========================================================================
   레이아웃
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: var(--header-h);
}

.main { min-width: 0; padding: 20px 16px 96px; }
.wrap { max-width: 860px; margin: 0 auto; }

/* ---------- 사이드바 (모바일: 슬라이드 서랍) ---------- */
.sidebar {
  position: fixed; z-index: 70;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, var(--sidebar-w));
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  transform: translateX(-102%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.sidebar.is-open { transform: none; }

.sidebar__head {
  height: var(--header-h); flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 14px;
}
.sidebar__head span { flex: 1; }

.sidebar__body { overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px 40px; flex: 1; }

.scrim {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .24s;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.tocmeta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin: 2px 4px 12px; padding: 9px 12px;
  background: var(--bg-sunken); border-radius: var(--radius-s);
  font-size: 12.5px; color: var(--fg-muted);
}
.tocmeta strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- 목차 ---------- */
.toc { list-style: none; margin: 0; padding: 0; }
.toc__row { display: flex; align-items: stretch; gap: 2px; }

.toc a {
  flex: 1; min-width: 0;
  display: block; padding: 8px 10px;
  border-radius: var(--radius-s);
  color: var(--fg-muted); font-size: 14px; line-height: 1.45;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.toc a:hover { background: var(--bg-sunken); color: var(--fg); text-decoration: none; }
.toc a.is-active {
  background: var(--accent-weak); color: var(--accent);
  font-weight: 700; border-left-color: var(--accent);
}
.toc .num {
  display: inline-block; min-width: 2.4em;
  color: var(--fg-faint); font-variant-numeric: tabular-nums; font-weight: 600;
}
.toc a.is-active .num { color: var(--accent); }
.toc a.done .num::after { content: " ✓"; color: var(--good); }

.toc__sub { list-style: none; margin: 0 0 6px; padding: 0 0 0 14px; display: none; }
.toc__sub.is-open { display: block; }
.toc__sub a { font-size: 13px; padding: 5px 10px; color: var(--fg-faint); }

/* ==========================================================================
   본문 타이포그래피
   ========================================================================== */
.doc h1 {
  font-size: 26px; line-height: 1.35; margin: 8px 0 4px; letter-spacing: -.02em;
}
.doc h2 {
  font-size: 21px; line-height: 1.4; margin: 52px 0 14px;
  padding-top: 20px; border-top: 2px solid var(--border);
  letter-spacing: -.01em; scroll-margin-top: calc(var(--header-h) + 12px);
}
.doc h2:first-of-type { border-top: 0; margin-top: 24px; padding-top: 0; }
.doc h3 { font-size: 17.5px; margin: 32px 0 10px; color: var(--fg); }
.doc h4 { font-size: 15.5px; margin: 22px 0 8px; color: var(--fg-muted); }

.doc p  { margin: 12px 0; }
.doc ul, .doc ol { margin: 12px 0; padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc li::marker { color: var(--fg-faint); }
.doc hr { border: 0; border-top: 1px solid var(--border-soft); margin: 40px 0; }
.doc strong { font-weight: 700; }
.doc em { color: var(--fg-muted); }

/* 인용 / 팁 박스 */
.doc blockquote {
  margin: 16px 0; padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  color: var(--fg-muted);
}
.doc blockquote > :first-child { margin-top: 0; }
.doc blockquote > :last-child { margin-bottom: 0; }
.doc blockquote.is-warn { border-left-color: var(--warn); background: var(--warn-weak); }
.doc blockquote.is-tip  { border-left-color: var(--good); }

/* 인라인 코드 */
.doc code {
  font-family: var(--font-mono); font-size: .89em;
  background: var(--bg-sunken); color: var(--fg);
  padding: .12em .4em; border-radius: 5px;
  border: 1px solid var(--border-soft);
}

/* 코드/도해 블록 */
.doc pre {
  margin: 16px 0; padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.55;
}
.doc pre code {
  background: none; border: 0; padding: 0;
  font-size: 13px; white-space: pre;
}

/* ---------- 표 ---------- */
.tablewrap {
  margin: 16px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.doc table {
  border-collapse: collapse;
  width: 100%; min-width: 460px;
  font-size: 14.5px;
}
.doc th, .doc td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left; vertical-align: top;
}
.doc th {
  background: var(--bg-sunken);
  font-weight: 700; font-size: 13.5px;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.doc tbody tr:last-child td { border-bottom: 0; }
.doc tbody tr:hover td { background: color-mix(in srgb, var(--accent-weak) 45%, transparent); }
.doc td code { white-space: nowrap; }

.scrollhint {
  display: none;
  font-size: 12px; color: var(--fg-faint);
  margin: -8px 0 14px; padding-left: 2px;
}
.tablewrap.is-scrollable + .scrollhint { display: block; }

/* ---------- 수식 ---------- */
.formula {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  margin: 18px 0; padding: 18px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
}
.formula .lhs { font-weight: 700; }
.formula .frac {
  display: inline-flex; flex-direction: column;
  text-align: center; vertical-align: middle;
}
.formula .num { padding: 0 8px 3px; border-bottom: 2px solid currentColor; }
.formula .den { padding: 3px 8px 0; }
.formula .brk { font-size: 2.1em; font-weight: 300; line-height: .8; }
.formula .sup { align-self: flex-start; font-size: .78em; font-weight: 700; }
.formula .cond {
  flex-basis: 100%; text-align: center;
  font-size: 13px; color: var(--fg-muted);
}

/* ---------- Mermaid 다이어그램 ---------- */
.diagram {
  position: relative;
  margin: 18px 0;
  padding: 16px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}
.diagram svg { max-width: 100%; height: auto; }
/* 🔒 **넓은 그림도 상자 안에 줄여서 담는다.** 가로로 밀게 만들었다가 되돌렸다 —
   확대 버튼(⤢)과 하는 일이 겹치고 **본문 스크롤과 싸운다** (2026-08-12). */
.diagram__zoom {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg-elev); color: var(--fg-muted);
  font-size: 14px; line-height: 1;
  opacity: .55; transition: opacity .15s;
}
.diagram:hover .diagram__zoom { opacity: 1; }
.diagram--pending { min-height: 90px; display: grid; place-items: center; color: var(--fg-faint); font-size: 13px; }

/* 다이어그램 확대 뷰어 */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  background: rgba(0,0,0,.86); padding: 16px;
}
.lightbox.is-open { display: grid; }
.lightbox__inner {
  max-width: 100%; max-height: 92vh;
  overflow: auto; -webkit-overflow-scrolling: touch;
  /* 🚨 **`#fff` 로 박혀 있었다.** 다크 모드에서 mermaid 는 **밝은 글자**로 그리는데
     흰 바탕에 얹히니 글씨가 안 보였다 (2026-08-12).
     🔑 **본문의 다이어그램 상자와 같은 색**이어야 한다 — 확대해도 같은 그림이다. */
  background: var(--bg-elev); border-radius: var(--radius); padding: 20px;
}
.lightbox__inner svg { max-width: none; height: auto; }
.lightbox__close {
  position: absolute; top: 12px; right: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 20px;
}

/* ---------- 섹션 완료 체크 ---------- */
.sectiondone {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 0;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev); color: var(--fg-muted);
  font-size: 13px; font-weight: 600;
}
.sectiondone:hover { border-color: var(--accent); color: var(--accent); }
.sectiondone[aria-pressed="true"] {
  background: var(--good-weak); border-color: var(--good); color: var(--good);
}
.sectiondone .box {
  width: 17px; height: 17px; flex: none;
  border: 2px solid currentColor; border-radius: 5px;
  display: grid; place-items: center; font-size: 11px;
}
.sectiondone[aria-pressed="true"] .box::after { content: "✓"; }

/* ==========================================================================
   섹션 개념 퀴즈  (assets/quiz.js)
   ========================================================================== */
.quiz {
  margin: 34px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}

.quiz__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}
.quiz__title {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  border: 0; padding: 0;
}
.quiz__count { font-size: 12px; color: var(--fg-faint); flex: none; }

.quiz__list { margin: 0; padding: 0; list-style: none; counter-reset: quiz; }

.quiz__item {
  counter-increment: quiz;
  padding: 16px;
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.quiz__item:first-child { border-top: 0; }

/* ★ 저장한 문제 — 생김새는 공용, 자리 잡는 방식만 화면마다 다르다.
   🔒 절대 위치·번호 매기기는 섹션 퀴즈에서만 맞는 규칙이라 .quiz__item / .quiz__list
      안으로 범위를 좁혀 둔다. 전역으로 두면 오답노트·모의 문제지처럼 같은 위젯을
      쓰는 다른 화면으로 새어 나가 덮어쓰기를 계속 늘려야 한다.
   크기를 고정하고 flex 로 가운데 정렬해 터치 영역을 확보한다. */
.quiz__fav {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 30px; height: 30px; padding: 0;
  background: none; border: 0;
  font-size: 15px; line-height: 1; cursor: pointer;
  color: var(--border);
  transition: color .15s, transform .1s;
}
.quiz__fav:hover { color: var(--fg-muted); }
.quiz__fav:active { transform: scale(.88); }
.quiz__fav[aria-pressed="true"] { color: var(--warn); }

/* 섹션 퀴즈에서만 지문 오른쪽 위에 겹쳐 놓는다.
   ⚠️ z-index 가 반드시 필요하다. 바로 다음 형제인 .quiz__list .quiz__q 도
      position: relative 라(번호를 ::before 로 절대 배치하기 때문) 위치 지정
      요소끼리는 DOM 순서가 늦은 쪽이 위에 그려진다.
      없으면 지문이 별을 덮어 위쪽 8px 만 눌린다. */
.quiz__item > .quiz__fav {
  position: absolute; top: 8px; right: 8px; z-index: 1;
}

.quiz__q {
  font-size: 14.5px; line-height: 1.65; margin: 0 0 11px;
}
.quiz__q b { font-weight: 700; }

/* 번호 매기기와 그에 따른 여백도 섹션 퀴즈 전용 */
.quiz__list .quiz__q {
  position: relative;
  padding-left: 25px; padding-right: 26px;
}
.quiz__list .quiz__q::before {
  content: counter(quiz) ".";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--fg-faint);
}

.quiz__code {
  margin: 0 0 11px; padding: 11px 13px;
  background: var(--bg-sunken); border: 1px solid var(--border-soft);
  border-radius: var(--radius-s);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* ---------- 오답노트 (wrong.html) ---------- */
.wtabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 10px;
}

/* 정렬·필터 줄 */
.wctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 18px;
}
.wctl__sel, .wctl__dir {
  padding: 6px 9px;
  background: var(--bg-elev); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.wctl__sel:hover, .wctl__dir:hover { border-color: var(--accent); color: var(--fg); }
.wctl__dir { font-variant-numeric: tabular-nums; }
.wtab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: var(--bg-elev); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.wtab:hover { border-color: var(--accent); color: var(--fg); }
.wtab[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent); font-weight: 700;
}
.wtab__n {
  min-width: 18px; padding: 0 5px;
  background: var(--bg-sunken); border-radius: 999px;
  font-size: 11.5px; text-align: center; color: var(--fg-faint);
}
.wtab[aria-pressed="true"] .wtab__n { color: var(--accent); }

.wempty {
  margin: 40px 0; text-align: center;
  color: var(--fg-faint); font-size: 14px;
}

.wlist { display: flex; flex-direction: column; gap: 14px; }

.wcard {
  position: relative;
  padding: 15px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.wcard.is-ok { border-color: var(--good); }
.wcard.is-no { border-color: var(--warn); }

.wcard__head {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 8px;
}
.wcard__loc {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; color: var(--fg-faint);
  text-decoration: none;
}
a.wcard__loc:hover { color: var(--accent); text-decoration: underline; }

.wcard__stat {
  margin: 0 0 11px;
  font-size: 11.5px; color: var(--fg-faint);
}
.wcard__stub { font-size: 13px; color: var(--fg-faint); }

/* 문항 본문은 섹션 퀴즈와 같은 스타일을 그대로 쓴다 (qcard.js 가 같은 클래스를 붙인다).
   번호·별 위치는 .quiz__list / .quiz__item 안에서만 걸리므로 여기서 덮어쓸 것이 없다. */

.wcard__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px;
}
.wcard__cat {
  padding: 6px 9px;
  background: var(--bg); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.wcard__note { font-size: 11.5px; color: var(--good); }

/* ---- O / X ---- */
.quiz__ox { display: flex; gap: 8px; }
.quiz__oxbtn {
  width: 58px; height: 38px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg); color: var(--fg-muted);
  font-size: 15px; font-weight: 700;
}
.quiz__oxbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.quiz__oxbtn[aria-pressed="true"] {
  background: var(--accent-weak); border-color: var(--accent); color: var(--accent);
}
.quiz__oxbtn:disabled { opacity: .55; }

/* ---- 4지선다 ---- */
.quiz__choices { display: flex; flex-direction: column; gap: 6px; }
.quiz__choice {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg);
  font-size: 13.5px; line-height: 1.55;
  cursor: pointer;
}
.quiz__choice:hover { border-color: var(--accent); }
.quiz__choice input { margin: 3px 0 0; flex: none; accent-color: var(--accent); }

/* ---- 단답형 ---- */
.quiz__input {
  width: 100%; max-width: 420px;
  padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg); color: var(--fg);
  font-family: inherit; font-size: 14px;
}
.quiz__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.quiz__input:disabled { opacity: .7; }

/* ---- 여러 칸짜리 문항 (parts) ----
   🔒 실기는 한 문항에서 ㉠㉡ 처럼 여러 답을 묻는다. 칸마다 입력이 하나씩 붙고
      여기에만 부분점수가 생긴다. 배점 규칙은 qcard.js 한 벌이다. */
.quiz__pool {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 11px; padding: 9px 11px;
  background: var(--bg-sunken); border-radius: var(--radius-s);
}
.quiz__poollabel { flex: none; font-size: 11.5px; font-weight: 700; color: var(--fg-faint); }
.quiz__poolitems { display: flex; flex-wrap: wrap; gap: 5px; }
.quiz__poolitem {
  padding: 2px 9px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px;
}

.quiz__parts { display: flex; flex-direction: column; gap: 7px; }
.quiz__part { display: flex; align-items: center; gap: 8px; }
/* ㉠㉡ 는 본문 글자다 — 강조색을 쓰면 누를 수 있는 것처럼 보인다 */
.quiz__plabel {
  flex: none; min-width: 26px;
  font-weight: 700; color: var(--fg); font-size: 13.5px;
}
.quiz__pinput, .quiz__pselect {
  flex: 1; min-width: 0;
  padding: 8px 11px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 14px;
}
.quiz__pinput:focus, .quiz__pselect:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.quiz__pinput:disabled, .quiz__pselect:disabled { opacity: .7; }

/* 채점 뒤 칸마다 내 답과 정답을 나란히 */
.quiz__pans { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; }
.quiz__pansrow { display: flex; align-items: baseline; gap: 8px; color: var(--fg-muted); }
.quiz__pansrow.is-ok .quiz__plabel { color: var(--good); }
.quiz__pansrow.is-no .quiz__plabel { color: var(--warn); }
.quiz__pansrow b { color: var(--fg); font-weight: 700; }

/* ---- 채점 결과 ---- */
.quiz__item.is-ok { background: var(--good-weak); }
.quiz__item.is-no { background: var(--warn-weak); }
/* 부분 정답 — 오답과 같은 색으로 두면 두 칸 중 하나를 맞힌 것이 묻힌다 */
.quiz__item.is-part { background: color-mix(in srgb, var(--warn-weak) 55%, transparent); }

.quiz__fb {
  margin: 11px 0 0; padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft); border-radius: var(--radius-s);
  font-size: 13px; line-height: 1.65;
}
.quiz__mark {
  display: inline-block; margin-right: 8px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.is-ok .quiz__mark { background: var(--good-weak); color: var(--good); }
.is-no .quiz__mark { background: var(--warn-weak); color: var(--warn); }
.is-part .quiz__mark { background: var(--accent-weak); color: var(--accent); }
.quiz__ans { color: var(--fg-muted); }
.quiz__ans b { color: var(--fg); font-weight: 700; }
.quiz__why { margin: 7px 0 0; color: var(--fg-muted); }
.quiz__why b { color: var(--fg); font-weight: 700; }

/* ---- 하단 ---- */
.quiz__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}
.quiz__grade {
  padding: 9px 20px;
  border: 1px solid var(--accent); border-radius: var(--radius-s);
  background: var(--accent); color: var(--accent-fg);
  font-size: 13.5px; font-weight: 700;
}
.quiz__grade:hover { filter: brightness(1.07); }
.quiz__score { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.quiz__score.is-perfect { color: var(--good); }

@media (max-width: 520px) {
  .quiz__item { padding: 14px 13px; }
  .quiz__input { max-width: 100%; }
}

/* ==========================================================================
   검색 오버레이
   ========================================================================== */
.search {
  position: fixed; inset: 0; z-index: 95;
  display: none;
  background: rgba(0,0,0,.5);
  padding: max(8vh, 20px) 16px 20px;
}
.search.is-open { display: block; }
.search__panel {
  max-width: 640px; margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 78vh;
}
.search__inputrow {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  flex: none;
}
.search__input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--fg); font-size: 16px; /* iOS 자동 확대 방지 */
}
.search__results { overflow-y: auto; padding: 6px; }
.search__item {
  display: block; padding: 10px 12px;
  border-radius: var(--radius-s); color: inherit; text-decoration: none;
}
.search__item:hover, .search__item.is-cursor { background: var(--accent-weak); text-decoration: none; }
.search__item b { color: var(--accent); }
.search__sec { font-size: 12px; color: var(--fg-faint); margin-bottom: 2px; }
.search__txt { font-size: 14px; line-height: 1.5; }
.search__empty { padding: 28px; text-align: center; color: var(--fg-faint); font-size: 14px; }
.search__hint { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-faint); flex: none; }

mark, .hl {
  background: var(--warn-weak); color: inherit;
  padding: 1px 2px; border-radius: 3px;
}
@keyframes flashTarget {
  0%, 100% { background: transparent; }
  20%, 60% { background: var(--warn-weak); }
}
.flash { animation: flashTarget 1.6s ease; border-radius: var(--radius-s); }

/* ==========================================================================
   맨 위로 / 맨 아래로
   ========================================================================== */
/* app.js 가 빌드 산출물의 ↑ 버튼을 이 상자 안으로 옮기고 ↓ 를 하나 더 붙인다.
   iOS 홈 인디케이터에 가리지 않도록 안전영역만큼 띄운다. */
.scrollnav {
  position: fixed; right: 14px; z-index: 55;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px;
}

.totop {
  /* JS 가 돌기 전에도 엉뚱한 자리에 뜨지 않도록 기본값은 고정 위치 */
  position: fixed; right: 14px; bottom: 14px; z-index: 55;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--fg-muted);
  box-shadow: var(--shadow); font-size: 17px; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s, color .15s, border-color .15s;
}
.scrollnav .totop { position: static; }
.totop:hover { color: var(--accent); border-color: var(--accent); }
.totop.is-show { opacity: 1; pointer-events: auto; transform: none; }

/* 화면이 좁으면 본문을 덜 가리도록 조금 줄인다 */
@media (max-width: 480px) {
  .scrollnav { right: 10px; gap: 6px; }
  .totop { width: 40px; height: 40px; font-size: 15px; }
}

/* ==========================================================================
   홈 화면
   ========================================================================== */
.hero {
  padding: 30px 0 8px;
}
.hero h1 { font-size: 27px; margin: 0 0 6px; letter-spacing: -.02em; }
.hero p  { color: var(--fg-muted); margin: 0; font-size: 15px; }

.overall {
  margin: 22px 0 8px; padding: 16px 18px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.overall__top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; margin-bottom: 10px;
}
.overall__pct { font-size: 22px; font-weight: 800; color: var(--accent); }
.bar { height: 8px; border-radius: 99px; background: var(--bg-sunken); overflow: hidden; }
.bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--good));
  border-radius: 99px; transition: width .5s cubic-bezier(.4,0,.2,1);
}

.sectitle {
  margin: 34px 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint);
}

.cards { display: grid; gap: 12px; grid-template-columns: 1fr; }

.card {
  display: block; padding: 16px 18px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); color: inherit; text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .14s, border-color .14s;
}
.card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.card__badge {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 99px;
  background: var(--accent-weak); color: var(--accent);
}
.card__title { font-size: 16.5px; font-weight: 700; flex: 1; min-width: 0; }
.card__desc { color: var(--fg-muted); font-size: 13.5px; margin: 0 0 12px; }
.card__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-faint); margin-top: 8px; }

.card.is-soon { opacity: .62; cursor: default; box-shadow: none; }
.card.is-soon:hover { transform: none; border-color: var(--border); }
.card.is-soon .card__badge { background: var(--bg-sunken); color: var(--fg-faint); }

.footer {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px; color: var(--fg-faint); text-align: center;
}
.footer a { color: var(--fg-muted); }

.dangerlink {
  background: none; border: 0; padding: 0;
  color: var(--fg-faint); font-size: 12.5px; text-decoration: underline;
  cursor: pointer;
}
/* 초기화 버튼이 둘 나란히 놓인다 — 공백만으로는 한 문장처럼 읽혀 구분선을 넣는다 */
.dangerlink + .dangerlink {
  margin-left: 11px; padding-left: 12px;
  border-left: 1px solid var(--border);
}
.dangerlink:hover { color: var(--warn); }

/* ==========================================================================
   태블릿 이상
   ========================================================================== */
@media (min-width: 700px) {
  body { font-size: 16.5px; }
  .main { padding: 28px 32px 120px; }
  .hero h1 { font-size: 32px; }
  .doc h1 { font-size: 31px; }
  .doc h2 { font-size: 23px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   데스크톱 — 사이드바 상시 노출
   ========================================================================== */
@media (min-width: 1060px) {
  :root { --header-h: 60px; }

  .layout { grid-template-columns: var(--sidebar-w) 1fr; }

  .sidebar {
    position: sticky; top: var(--header-h);
    height: calc(100vh - var(--header-h));
    transform: none; box-shadow: none;
    grid-row: 1; grid-column: 1;
  }
  .sidebar__head { display: none; }
  .sidebar__body { padding-top: 18px; }

  .main { grid-column: 2; padding: 32px 44px 140px; }
  .scrim { display: none !important; }
  .js-menu { display: none; }
}

/* ==========================================================================
   인쇄
   ========================================================================== */
@media print {
  .hdr, .sidebar, .totop, .scrollnav, .backnav, .progressbar, .sectiondone,
  .diagram__zoom, .scrim, .search, .quiz { display: none !important; }
  .layout { grid-template-columns: 1fr; padding-top: 0; }
  .main { padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc h2 { break-after: avoid; page-break-after: avoid; }
  .tablewrap, .diagram, .doc pre { break-inside: avoid; page-break-inside: avoid; }
}

/* ==========================================================================
   챕터 목차 페이지 (chNN.html)
   ========================================================================== */
.doc--index { padding-top: 4px; }

.chapterhead { margin: 0 0 26px; }
.chapterhead__title {
  font-size: 27px; letter-spacing: -.02em; margin: 0 0 14px;
}
.chapterhead__bar { margin: 0 0 8px; }
.chapterhead__meta {
  margin: 0; font-size: 13px; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.intro { color: var(--fg-muted); font-size: 14.5px; margin: 0 0 26px; }
.intro blockquote { margin: 0; }

.seclist { display: grid; gap: 8px; }

.seclist__item {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.seclist__item:hover { border-color: var(--accent); transform: translateY(-1px); }
.seclist__item.is-done { background: var(--bg-sunken); }

.seclist__link {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px 4px 14px 16px; color: var(--fg); min-width: 0;
}
.seclist__link:hover { text-decoration: none; }

.seclist__num {
  flex: none; width: 30px; text-align: center;
  font-size: 13px; font-weight: 800; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.seclist__item.is-done .seclist__num { color: var(--good); }

.seclist__title {
  font-size: 15px; font-weight: 600; line-height: 1.45;
  overflow-wrap: anywhere;
}
.seclist__item.is-done .seclist__title { color: var(--fg-muted); }

.seclist__check {
  flex: none; width: 54px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-left: 1px solid var(--border-soft);
  color: var(--fg-faint); cursor: pointer;
}
.seclist__check:hover { background: var(--bg-sunken); }
.seclist__check .box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
.seclist__check[aria-pressed="true"] .box {
  background: var(--good); border-color: var(--good); color: #fff;
}
.seclist__check[aria-pressed="true"] .box::after { content: "✓"; }

/* ==========================================================================
   섹션 페이지 하단 이동
   ========================================================================== */
.pagenav {
  max-width: 860px; margin: 30px auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 8px;
}

.pagenav__btn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
}
.pagenav__btn:hover { text-decoration: none; border-color: var(--accent); }
.pagenav__btn--next { text-align: right; }

.pagenav__dir { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.pagenav__title {
  font-size: 13.5px; color: var(--fg-muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pagenav__up {
  display: flex; align-items: center; padding: 0 16px;
  font-size: 13px; font-weight: 700; color: var(--fg-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pagenav__up:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }

.pagenav__spacer { display: block; }

@media (max-width: 560px) {
  .pagenav__title { display: none; }
  .pagenav { grid-template-columns: 1fr auto 1fr; }
}

@media print {
  .pagenav, .seclist__check { display: none !important; }
}

/* ==========================================================================
   모의 문제지 (exam.html · assets/exam.js)
   문항 카드 자체는 .quiz__* 를 그대로 쓴다 — 여기서 다시 만들지 말 것
   ========================================================================== */
.exam__loading { color: var(--fg-faint); font-size: 14px; padding: 20px 0; }

.exam__form {
  margin: 22px 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}
.exam__row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--border-soft);
}
.exam__row:first-child { border-top: 0; }
.exam__label {
  flex: none; width: 58px; padding-top: 7px;
  font-size: 13px; font-weight: 700; color: var(--fg-muted);
}
.exam__ctrl { flex: 1; min-width: 0; }

.exam__sel {
  width: 100%; max-width: 460px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg); color: var(--fg);
  font-family: inherit; font-size: 13.5px;
}
.exam__sel:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.exam__radios { display: flex; flex-wrap: wrap; gap: 6px; }
.exam__radio, .exam__check {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg);
  font-size: 13px; cursor: pointer;
}
.exam__radio:hover, .exam__check:hover { border-color: var(--accent); }
.exam__radio input, .exam__check input { margin: 0; accent-color: var(--accent); }

.exam__go { margin: 0 0 6px; }
.exam__note { margin: 0; font-size: 12.5px; color: var(--fg-faint); }

/* ---- 시험지 ---- */
.exam__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 22px 0 4px; padding: 13px 16px;
  background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.exam__headmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exam__headmain strong { font-size: 15px; }
.exam__headsub { font-size: 12.5px; color: var(--fg-faint); }
.exam__timer {
  flex: none;
  font-family: var(--font-mono); font-size: 19px; font-weight: 700;
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.exam__timer.is-urgent { color: var(--warn); }

.exam__list {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev); overflow: hidden;
  margin: 12px 0 0;
}
.exam__list .quiz__item { border-top: 1px solid var(--border-soft); }
.exam__list .quiz__item:first-child { border-top: 0; }

.exam__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 0;
}
.exam__ghost {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg-elev); color: var(--fg-muted);
  font-size: 13px; font-weight: 600;
}
.exam__ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* 「방금 문제지로」 — 설정 화면 맨 위. 히스토리를 안 쌓는 대신 둔 길이라
   눈에 띄어야 한다. 시험지가 살아 있을 때만 뜬다. */
.exam__resume {
  display: block; width: 100%;
  margin: 0 0 16px; padding: 11px 16px;
  background: var(--accent-weak); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-s);
  font-size: 13.5px; font-weight: 700; text-align: left;
}
.exam__resume:hover { background: var(--accent); color: var(--accent-fg); }

/* ---- 결과 ---- */
.exam__result {
  margin: 22px 0 8px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev);
}
.exam__score {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 4px;
}
.exam__score strong { font-size: 28px; letter-spacing: -.02em; }
.exam__score span { font-size: 15px; color: var(--fg-muted); font-weight: 600; }
.exam__timeout { margin: 6px 0 0; font-size: 13px; color: var(--warn); }

/* 합격선 60점 — 실기와 같은 배점이다 */
.exam__pass {
  margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--fg-muted);
}
.exam__pass.is-pass { color: var(--good); }
/* 🚨 부분점수는 공개된 채점기준이 아니라 추정이라고 밝히는 각주 */
.exam__note { margin: 8px 0 0; font-size: 12px; color: var(--fg-faint); line-height: 1.6; }

.exam__bars { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.exam__barrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.exam__barname {
  flex: none; width: 168px; color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exam__barrow .bar { flex: 1; min-width: 0; }
.exam__barnum {
  flex: none; width: 44px; text-align: right;
  color: var(--fg-faint); font-variant-numeric: tabular-nums;
}

.exam__acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }

@media (max-width: 560px) {
  .exam__row { flex-direction: column; gap: 8px; }
  .exam__label { width: auto; padding-top: 0; }
  .exam__barname { width: 96px; }
}

@media print {
  .exam__form, .exam__foot, .exam__acts, .exam__timer { display: none !important; }
}

/* ---------- 섹션 메모 (memo.js) ---------- */
.memo {
  margin: 26px 0 0;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.memo.has-memo { border-color: var(--accent); }

.memo__head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 15px;
  background: none; border: 0;
  font-family: inherit; font-size: 14px; color: var(--fg);
  text-align: left; cursor: pointer;
}
.memo__head:hover { background: var(--bg-sunken); }
.memo__title { font-weight: 700; }
.memo__state {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; color: var(--fg-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.memo__caret {
  flex: none; color: var(--fg-faint); font-size: 12px;
  transition: transform .15s;
}
.memo__head[aria-expanded="true"] .memo__caret { transform: rotate(180deg); }

.memo__body { padding: 0 15px 14px; }
.memo__ta {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 132px; padding: 11px 12px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 14px; line-height: 1.7;
  resize: vertical;
}
.memo__ta:focus { outline: none; border-color: var(--accent); }
.memo__ta::placeholder { color: var(--fg-faint); }

.memo__foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 9px;
}
.memo__saved { flex: 1 1 auto; font-size: 11.5px; color: var(--good); }
.memo__clear {
  padding: 5px 9px;
  background: none; color: var(--fg-faint);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.memo__clear:hover { border-color: var(--warn); color: var(--warn); }

/* ---------- 문항 메모 (섹션 퀴즈 · 모의 문제지 · 오답노트) ----------
   섹션 메모(.memo)보다 작고 조용하다. 문항마다 하나씩 붙으므로
   같은 무게로 그리면 목록이 메모 카드 더미로 보인다. */
.qmemo {
  margin: 10px 0 0;
  border: 1px dashed var(--border); border-radius: var(--radius-s);
  overflow: hidden;
}
.qmemo.has-memo { border-style: solid; border-color: var(--accent); }

.qmemo__head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  background: none; border: 0;
  font-family: inherit; font-size: 12.5px; color: var(--fg-muted);
  text-align: left; cursor: pointer;
}
.qmemo__head:hover { background: var(--bg-sunken); color: var(--fg); }
.qmemo__title { flex: none; font-weight: 600; }
.qmemo__state {
  flex: 1 1 auto; min-width: 0;
  font-size: 11.5px; color: var(--fg-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qmemo__caret { flex: none; color: var(--fg-faint); font-size: 11px; transition: transform .15s; }
.qmemo__head[aria-expanded="true"] .qmemo__caret { transform: rotate(180deg); }

.qmemo__body { padding: 0 10px 10px; }
/* 📌 접힘은 맨 위 `[hidden]` 한 줄이 지킨다 — 여기서 다시 안 적는다 */
.qmemo__ta {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 64px; padding: 8px 10px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 13px; line-height: 1.65;
  resize: vertical;
}
.qmemo__ta:focus { outline: none; border-color: var(--accent); }
.qmemo__ta::placeholder { color: var(--fg-faint); }

.qmemo__foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.qmemo__saved { flex: 1 1 auto; font-size: 11px; color: var(--good); }
.qmemo__clear {
  padding: 4px 8px;
  background: none; color: var(--fg-faint);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 11.5px; cursor: pointer;
}
.qmemo__clear:hover { border-color: var(--warn); color: var(--warn); }

/* 문항 목록 위의 「메모 보기」 */
.qmemo__toggle {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin: 0 0 12px;
}
.qmemo__tbtn {
  padding: 6px 11px;
  background: var(--bg-elev); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px;
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.qmemo__tbtn:hover { border-color: var(--accent); color: var(--fg); }
.qmemo__tbtn[aria-pressed="true"] {
  background: var(--accent-weak); border-color: var(--accent); color: var(--accent);
  font-weight: 600;
}
.qmemo__tnote { font-size: 11.5px; color: var(--fg-faint); }
/* 켜져 있을 때의 안내는 경고에 가깝다 — 답이 샐 수 있다는 뜻이다 */
.qmemo__tbtn[aria-pressed="true"] + .qmemo__tnote { color: var(--warn); }

/* ---------- 메모 모아보기 (notes.html) ---------- */
.nctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 18px;
}
.nctl__search {
  flex: 1 1 220px; min-width: 0; padding: 7px 11px;
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 13px;
}
.nctl__search:focus { outline: none; border-color: var(--accent); }
.nctl__copy {
  padding: 7px 11px;
  background: var(--bg-elev); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.nctl__copy:hover { border-color: var(--accent); color: var(--fg); }
.nctl__stat { font-size: 12px; color: var(--fg-faint); }

.nlist { display: flex; flex-direction: column; gap: 26px; }

.ngroup__title {
  margin: 0 0 10px; padding: 0 0 7px;
  border-bottom: 1px solid var(--border);
  font-size: 15px; letter-spacing: -.01em;
}

.ncard {
  padding: 13px 15px; margin: 0 0 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ncard:last-child { margin-bottom: 0; }
.ncard__loc {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--fg-muted); text-decoration: none;
}
.ncard__loc:hover { color: var(--accent); text-decoration: underline; }
.ncard__at { display: block; margin: 2px 0 0; font-size: 11px; color: var(--fg-faint); }
.ncard__body {
  margin: 9px 0 0;
  font-size: 14px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- 문항 메모 (T41) ---------- */
/* 🔑 **묶음 제목은 양쪽이 다 있을 때만** 나온다 — 하나뿐이면 화면만 길어진다 */
.nkind {
  margin: 0; font-size: 12px; font-weight: 700;
  color: var(--fg-faint); letter-spacing: .04em;
}
.nkind + .ngroup { margin-top: -14px; }   /* 제목과 첫 묶음이 벌어지지 않게 */

/* 🚨 문항 본문은 **메모가 아니다.** 인용처럼 들여 두어 눈이 안 헷갈리게 한다 —
   메모(내가 쓴 글)와 문항(주어진 글)이 같은 모양이면 뭐가 뭔지 모른다. */
.ncard__q {
  margin: 8px 0 0; padding: 7px 11px;
  border-left: 3px solid var(--border);
  background: var(--bg-sunken);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--fg-muted); font-size: 13px; line-height: 1.7;
  word-break: break-word;
}
.ncard__q b { color: var(--fg); }
.ncard__q code {
  padding: 1px 4px; border-radius: 4px;
  background: var(--bg); font-size: 12.5px;
}
.ncard--q .ncard__body { border-top: 1px dashed var(--border-soft); padding-top: 9px; }

/* ---------- 기록 내보내기·가져오기 (backup.js) ---------- */
/* 푸터가 세 줄이 됐다 — 줄 사이가 붙어 보이지 않게 */
.footer p + p { margin-top: 7px; }

.bkdlg {
  position: fixed; z-index: 70;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 32px); max-width: 400px;
  max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.bkdlg__title { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.bkdlg__file { margin: 5px 0 0; font-size: 12px; color: var(--fg-faint); }

/* 지금 · 파일 · 합친 뒤 를 나란히 */
.bkdlg__stats {
  width: 100%; border-collapse: collapse;
  margin: 15px 0 18px;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.bkdlg__stats th, .bkdlg__stats td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  text-align: right; font-weight: 400; color: var(--fg-muted);
}
.bkdlg__stats thead th {
  padding-top: 0;
  font-size: 11px; color: var(--fg-faint);
}
.bkdlg__stats tbody th { text-align: left; }
.bkdlg__stats tbody td { color: var(--fg); }
/* 합친 결과가 이 화면의 요점이라 눈에 먼저 들어와야 한다 */
.bkdlg__stats .is-after { color: var(--accent); font-weight: 700; }
.bkdlg__stats tr:last-child th, .bkdlg__stats tr:last-child td { border-bottom: 0; }

.bkdlg__warn {
  margin: 14px 0 0; padding: 11px 12px;
  background: var(--bg-sunken); border-radius: var(--radius-s);
  font-size: 13px; line-height: 1.65; color: var(--warn);
}

.bkdlg__go {
  display: block; width: 100%; padding: 11px 14px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: var(--radius-s);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.bkdlg__go:hover { filter: brightness(1.08); }
.bkdlg__go--danger {
  margin-top: 14px;
  background: none; color: var(--warn);
  border: 1px solid var(--border);
}
.bkdlg__go--danger:hover { border-color: var(--warn); filter: none; }

.bkdlg__hint {
  margin: 7px 2px 0;
  font-size: 11.5px; line-height: 1.6; color: var(--fg-faint);
}

.bkdlg__cancel {
  display: block; width: 100%; margin-top: 16px; padding: 8px;
  background: none; color: var(--fg-faint);
  border: 0; font-family: inherit; font-size: 13px; cursor: pointer;
}
.bkdlg__cancel:hover { color: var(--fg); }

/* ---------- 응시 이력 · 복기 (exam.js) ---------- */
.exam__hist { margin: 34px 0 0; }

.exam__histhead {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 0 12px; padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.exam__histtitle { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.exam__histn { flex: 1 1 auto; font-size: 12px; color: var(--fg-faint); }
.exam__histclear {
  flex: none; padding: 0;
  background: none; border: 0;
  color: var(--fg-faint); font-family: inherit; font-size: 12px;
  text-decoration: underline; cursor: pointer;
}
.exam__histclear:hover { color: var(--warn); }

.exam__histlist { list-style: none; margin: 0; padding: 0; }
.exam__histrow {
  padding: 13px 15px; margin: 0 0 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.exam__histrow:last-child { margin-bottom: 0; }

.exam__histtop {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px;
  margin: 0 0 8px;
  font-size: 12.5px; color: var(--fg-faint);
}
.exam__histseed { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.exam__histscore {
  flex: none; font-size: 15px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.exam__histpct { flex: none; color: var(--accent); font-weight: 700; }

.exam__histch {
  margin: 8px 0 0;
  font-size: 11.5px; line-height: 1.7; color: var(--fg-faint);
  word-break: keep-all;
}

.exam__histacts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 11px 0 0;
}
.exam__histbtn {
  padding: 6px 11px;
  background: var(--bg); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.exam__histbtn:hover { border-color: var(--accent); color: var(--fg); }
.exam__histnone { font-size: 11.5px; color: var(--fg-faint); }

/* ---------- 빠른 이동 (app.js initToolNav) ---------- */
/* 🔒 고정 하단 탭바가 아니라 푸터 안의 블록이다 — 이유는 app.js TOOLS 주석 참고 */
.toolnav { margin: 18px 0 0; }
/* 🚨 제목을 칩과 같은 줄에 두었더니 칩 하나로 읽혔다.
   줄을 나누고 크기·자간·색을 달리해 「이름표」로 보이게 한다. */
.toolnav__title {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  color: var(--fg-faint); text-align: center;
}
.toolnav__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.toolnav__item {
  padding: 7px 14px;
  background: var(--bg-elev); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; line-height: 1.25; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.toolnav__item:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-weak);
}

@media print { .toolnav { display: none; } }

/* 이력 한 건 삭제 — 그 자리에서 다시 묻는다 (confirm 을 안 쓰는 이유는 exam.js 참고) */
.exam__histdel {
  margin-left: auto;
  padding: 6px 10px;
  background: none; color: var(--fg-faint);
  border: 1px solid transparent; border-radius: var(--radius-s);
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.exam__histdel:hover { border-color: var(--warn); color: var(--warn); }
.exam__histdel--go {
  margin-left: 0;
  border-color: var(--warn); color: var(--warn); font-weight: 700;
}
.exam__histask { flex: 1 1 auto; font-size: 12.5px; color: var(--warn); }
.exam__histrow.is-asking { border-color: var(--warn); }

/* 헤더 오른쪽 브랜드 — 도구 이름이 제목 자리로 가면서 「정보처리기사 실기」가
   갈 데가 없어졌다. 비어 있던 가운데를 채운다. 좁은 화면에서는 접는다. */
.hdr__brand {
  flex: none; margin-right: 4px;
  font-size: 11.5px; color: var(--fg-faint); white-space: nowrap;
}
@media (max-width: 520px) { .hdr__brand { display: none; } }

/* 오답노트 페이지 넘김 — 목록 위아래에 같은 것을 둔다.
   아래에만 두면 위에서 넘기려고 끝까지 내려가야 한다. */
.wpager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 3px;
  padding: 6px 0;
}
.wpager__btn {
  padding: 6px 12px;
  background: var(--bg-elev); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: var(--radius-s);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.wpager__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--fg); }
.wpager__btn:disabled { opacity: .35; cursor: default; }

/* 페이지 번호 — 특정 페이지로 바로 간다. 많으면 현재 둘레만 보이고 사이는 … */
.wpager__no {
  min-width: 30px; padding: 6px 8px;
  background: none; color: var(--fg-faint);
  border: 1px solid transparent; border-radius: var(--radius-s);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.wpager__no:hover { color: var(--fg); border-color: var(--border); }
.wpager__no.is-now {
  color: var(--accent); font-weight: 700;
  border-color: var(--accent); background: var(--accent-weak);
}
.wpager__gap { color: var(--fg-faint); font-size: 12px; padding: 0 2px; }
.wpager__btn { min-width: 38px; }

/* ---------- 개념 겹쳐 보기 (concept.js) ---------- */
/* 🔒 페이지를 떠나지 않고 본문을 본다 — 시험 중이면 답안이, 목록에서는
   스크롤 위치와 필터가 그대로 남는다. 이유는 concept.js 머리글 참고. */
.concept {
  position: fixed; z-index: 70;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 28px); max-width: 760px;
  height: calc(100dvh - 72px);
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 20px 56px rgba(0,0,0,.32);
  overflow: hidden;
}

.concept__head {
  flex: none;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.concept__titles { flex: 1 1 auto; min-width: 0; }
.concept__sec {
  display: block; font-size: 15px; letter-spacing: -.01em;
  word-break: keep-all;
}
.concept__ch { display: block; margin-top: 2px; font-size: 11.5px; color: var(--fg-faint); }
.concept__close {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; color: var(--fg-faint);
  border: 1px solid transparent; border-radius: var(--radius-s);
  font-size: 15px; cursor: pointer;
}
.concept__close:hover { border-color: var(--border); color: var(--fg); }

.concept__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  /* 🚨 창 전체가 좌우로 밀리면 안 된다. 넓은 것은 자기 상자 안에서만 스크롤한다 */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 4px 16px 18px;
}
.concept__body pre, .concept__body .tablewrap { max-width: 100%; overflow-x: auto; }
.concept__body img, .concept__body table { max-width: 100%; }
.concept__loading { margin: 28px 0; text-align: center; color: var(--fg-faint); font-size: 13.5px; }
.concept__raw {
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
}
/* 본문은 섹션 페이지와 같은 .doc 규칙을 그대로 쓴다 — 두 벌로 만들지 않는다 */
.concept__doc { max-width: none; }
.concept__doc > :first-child { margin-top: 12px; }

.concept__foot {
  flex: none;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  text-align: right;
}
.concept__go {
  display: inline-block; padding: 7px 14px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.concept__go:hover { filter: brightness(1.08); }

/* 채점 결과 안의 「개념 보기」 */
.quiz__concept {
  display: inline-flex; align-items: center;
  margin: 10px 0 0; padding: 6px 12px;
  background: var(--bg-elev); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.quiz__concept:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-weak);
}

@media print { .concept, .quiz__concept { display: none !important; } }

/* ── 공부 전략 띠 (T49) — 홈에만 나온다 ─────────────────────────────
   근거는 EIPStudy-notes/exam-archive/chapters.md · 데이터는 assets/strategy.js */
.strat {
  margin: 0 0 16px;
  padding: 16px 18px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* 눈썹 — 맥락만 얹는다 */
.strat__eyebrow {
  margin: 0 0 6px; color: var(--fg-faint);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}

/* 🔑 결론 — 이 카드에서 가장 큰 글자.
   🔒 칩은 단원 번호에만 씌운다. 줄 전체를 칠하면 띠가 무거워진다 (되돌림) */
.strat__must {
  margin: 0; font-size: 19px; line-height: 1.5; letter-spacing: -.02em;
  color: var(--fg);
}
.strat__must-k {
  display: inline-block; margin-right: 6px;
  padding: 2px 11px; border-radius: var(--radius-s);
  background: var(--accent); color: var(--accent-fg);
  font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.strat__must-sub {
  margin: 7px 0 0; color: var(--fg); font-size: 14px; font-weight: 700;
}

.strat__plus {
  margin: 12px 0 0; color: var(--fg-muted); font-size: 13px; line-height: 1.65;
}
.strat__plus-k {
  display: inline-block; margin-right: 4px;
  padding: 2px 8px; border-radius: var(--radius-s);
  background: var(--accent-weak); color: var(--accent);
  font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 각주 — 강조하지 않는다. 결론보다 커 보이면 안 된다 */
.strat__note {
  margin: 8px 0 0; color: var(--fg-faint); font-size: 12px; line-height: 1.55;
}

/* 접기 */
.strat__toggle {
  display: flex; align-items: center; gap: 5px;
  margin: 12px 0 0; padding: 6px 12px;
  background: var(--bg-sunken); color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.strat__toggle:hover { border-color: var(--accent); color: var(--accent); }
.strat__caret { font-size: 10px; transition: transform .15s; }
.strat__toggle[aria-expanded="true"] .strat__caret { transform: rotate(180deg); }
.strat__body { margin: 12px 0 0; }

.strat__list { list-style: none; margin: 0; padding: 0; }

/* 한 줄 = [번호+이름] [막대] [퍼센트] / 아래에 힌트 · 오른쪽에 꼬리표 */
.strat__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5em) 1fr 3.2em 3.4em;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--border-soft);
}
.strat__row:first-child { border-top: 0; }

.strat__name {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; text-decoration: none; color: var(--fg);
  font-size: 13px;
}
.strat__name:hover .strat__t { color: var(--accent); text-decoration: underline; }
.strat__no {
  flex: none; width: 1.6em; height: 1.6em;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); color: var(--fg-muted);
  border-radius: var(--radius-s);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.strat__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.strat__bar {
  height: 8px; background: var(--bg-sunken);
  border-radius: 999px; overflow: hidden;
}
.strat__fill { display: block; height: 100%; background: var(--border); border-radius: 999px; }

.strat__pct {
  text-align: right; font-size: 12px; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.strat__tag {
  justify-self: end;
  padding: 2px 7px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--fg-faint);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* 힌트는 이름 칸 아래로 흘려보낸다 (막대 열을 침범하지 않게) */
.strat__hint {
  grid-column: 2 / -1;
  margin: -2px 0 2px; color: var(--fg-faint); font-size: 12px;
}

/* 먼저 볼 여섯 장 — 막대와 꼬리표를 강조 */
.strat__row.is-pick .strat__no  { background: var(--accent-weak); color: var(--accent); }
.strat__row.is-pick .strat__fill { background: var(--accent); }
.strat__row.is-pick .strat__pct { color: var(--fg); font-weight: 700; }
.strat__row.is-pick .strat__tag { background: var(--accent-weak); color: var(--accent); }
/* 나중에 볼 장 — 흐리게. 🚨 「버려라」가 아니므로 감추지는 않는다 */
.strat__row.is-late .strat__name,
.strat__row.is-late .strat__pct { color: var(--fg-faint); }

.strat__foot { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-soft); }
.strat__tip  { margin: 0 0 7px; color: var(--fg-muted); font-size: 12.5px; line-height: 1.6; }
.strat__tip b { color: var(--fg); }
.strat__src  { margin: 10px 0 0; color: var(--fg-faint); font-size: 11.5px; }

/* 좁은 화면 — 막대를 줄이고 힌트를 왼쪽 끝으로 */
@media (max-width: 520px) {
  .strat { padding: 14px 14px 12px; }
  .strat__row { grid-template-columns: minmax(0, 1fr) 2.6em 3.2em; }
  .strat__bar { display: none; }
  .strat__hint { grid-column: 1 / -1; margin: 0 0 2px; }
}

/* ══════════════════════════════════════════════════════════════
   취약 단원 (T23) — 정리본 목록(chapters.html) 에만 나온다
   🔑 막대는 **남은 손실**이다 = 출제 비중 × (1 − 숙련도). 길수록 급하다.
      🚨 전략 띠(`.strat`)와 **한 줄 짜임을 맞춘다** — 같은 데이터의 다른 얼굴이라
         칸이 어긋나면 두 화면을 오갈 때 눈이 다시 적응해야 한다
   ══════════════════════════════════════════════════════════════ */
.weak {
  margin: 0 0 16px;
  padding: 14px 18px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.weak__eyebrow { margin: 0 0 8px; color: var(--fg-faint); font-size: 12px; }

/* ── 🔑 한 줄 결론 — 누르면 바로 그 섹션으로 간다 ───────────────── */
.weak__lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 12px;
  background: var(--accent-weak);
  border-radius: var(--radius-s);
  text-decoration: none; color: var(--fg);
}
.weak__lead:hover { outline: 1px solid var(--accent); }
.weak__lead-k {
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
/* 🚨 섹션 제목이 길다 — `min-width: 0` 만으로는 **긴 영문 토큰**을 못 접는다.
   (`UML(Unified Modeling Language)의 개요` 같은 것) 좁은 화면에서 가로 스크롤이 난다. */
.weak__lead-t {
  min-width: 0; font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere; word-break: keep-all;
}
.weak__lead-t b { font-weight: 700; }
.weak__lead-why {
  grid-column: 2; margin: 0;
  color: var(--fg-muted); font-size: 12px;
}

.weak__list { list-style: none; margin: 12px 0 0; padding: 0; }

/* 한 줄 = [번호+이름] [막대] [비중] / 아래에 상태 한 마디 */
.weak__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5em) 1fr 3.2em;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--border-soft);
}
.weak__row:first-child { border-top: 0; }

.weak__name {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; text-decoration: none; color: var(--fg);
  font-size: 13px;
}
.weak__name:hover .weak__t { color: var(--accent); text-decoration: underline; }
.weak__no {
  flex: none; width: 1.6em; height: 1.6em;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); color: var(--fg-muted);
  border-radius: var(--radius-s);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.weak__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.weak__bar { height: 8px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; }
.weak__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.weak__pct {
  text-align: right; font-size: 12px; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* 상태는 이름 칸 아래로 흘려보낸다 (막대 열을 침범하지 않게) */
.weak__meta {
  grid-column: 2 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  min-width: 0;                 /* 🚨 flex 자식은 기본이 min-width:auto — 안 주면 안 줄어든다 */
  margin: -2px 0 2px; color: var(--fg-faint); font-size: 12px;
}
.weak__tag {
  padding: 1px 7px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--fg-muted);
  font-weight: 700; font-size: 11px; white-space: nowrap;
}
.weak__tag.is-new { background: var(--accent-weak); color: var(--accent); }
.weak__wrong { color: var(--warn); font-weight: 700; }
.weak__at { margin-left: auto; font-variant-numeric: tabular-nums; }

.weak__more {
  margin: 10px 0 0; padding: 5px 12px;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--fg-muted); font-size: 12px; cursor: pointer;
}
.weak__more:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 520px) {
  .weak { padding: 12px 14px 10px; }
  .weak__row { grid-template-columns: minmax(0, 1fr) 3.2em; }
  .weak__bar { display: none; }
  .weak__meta { grid-column: 1 / -1; margin: 0 0 2px; }
  .weak__at { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   섹션별 출제 빈도 (T50) — assets/secrank.js 가 붙인다
   🔑 별은 **제목을 밀어내지 않는다.** 목록에서 줄이 밀리면 훑기가 나빠진다
   ══════════════════════════════════════════════════════════════ */
/* 🔒 **노란 별 = 기출 빈도.** 문제 저장(즐겨찾기)과 같은 `--star` 다 — 눈에 익은 색이다.
   본문 중요도(`.imp`)는 **파랑**. 모양은 같아도 색이 다르면 갈린다.
   🚨 **등급별로 흐리게 하지 않는다** (사용자 요청) — ★ 하나짜리를 흐리게 했더니
      「있는데 없는 것처럼」 보였다. **개수가 이미 등급이다.** */
.srank {
  margin-left: 6px; color: var(--star);
  font-size: 11px; letter-spacing: -.5px; white-space: nowrap;
  vertical-align: 1px;
}

/* 사이드바는 더 좁다 — 한 단계 작게 */
.toc__row .srank { font-size: 9.5px; margin-left: 4px; }

/* 섹션 페이지 머리 한 줄 */
.srankline {
  margin: -4px 0 18px;
  color: var(--fg-muted); font-size: 12.5px; line-height: 1.5;
}
.srankline b { margin-right: 5px; color: var(--star); letter-spacing: -.5px; }

/* 본문 중요도 ★ — app.js 의 paintStars() 가 감싼다.
   🔑 즐겨찾기 ★(--star, 호박색)와 **색으로** 갈린다. 글자는 같아도 뜻이 다르다 */
.imp {
  color: var(--accent);
  letter-spacing: -.5px;
  font-size: .92em;
  vertical-align: 1px;
}

/* ══════════════════════════════════════════════════════════════
   왼쪽 아래 뒤로가기 (2026-08-12) — app.js 의 initBackNav()
   🔒 왼쪽 위는 「상위로」(늘 같은 곳), 여기는 「뒤로」(직전 화면).
      둘을 한 버튼이 겸하면 누르기 전에는 어디로 갈지 알 수 없다.
   🚨 **`.totop` 을 같이 걸었다가 오른쪽 아래로 갔다.** `.totop` 이 `right`·`bottom` 을
      고정으로 들고 있어서다. **제 클래스를 따로 둔다** — 상하 스크롤은 오른쪽,
      뒤로가기는 왼쪽. 겹치면 안 된다
   ══════════════════════════════════════════════════════════════ */
.backnav {
  position: fixed; left: 14px; z-index: 55;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.backbtn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--fg-muted);
  box-shadow: var(--shadow); font-size: 17px; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s, color .15s, border-color .15s;
}
.backbtn:hover { color: var(--accent); border-color: var(--accent); }
.backbtn.is-show { opacity: 1; pointer-events: auto; transform: none; }

@media (max-width: 480px) {
  .backnav { left: 10px; }
  .backbtn { width: 40px; height: 40px; font-size: 15px; }
}

/* 🚨 넓은 화면에서는 사이드바가 왼쪽 `--sidebar-w` 를 먹는다. **그 아래 깔렸다.**
   사이드바가 있는 페이지(챕터·섹션)에서만 민다 — 홈·도구에는 사이드바가 없다.
   📌 분기점은 사이드바가 고정 열이 되는 1060px 과 **같아야 한다.** */
@media (min-width: 1060px) {
  .backnav--aside { left: calc(var(--sidebar-w) + 14px); }
}

/* ---------- 기출문제집 회차 고르기 (past.js) ---------- */
/* 🔒 자료가 없으면 이 화면 자체가 안 그려진다 — 안내 한 줄만 남는다 */
.past__rounds {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 14px 0 0;
}
.past__round {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 14px; text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--fg); cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.past__round strong { font-size: 15px; letter-spacing: -.01em; }
.past__round span { font-size: 12px; color: var(--fg-faint); }
.past__round:hover { border-color: var(--accent); }
.past__round:active { transform: translateY(1px); }

/* 목록·저장함 비우기 (T32) — 되돌릴 수 없는 것이라 **오른쪽 끝으로 밀어 두고**
   평소엔 흐리게 둔다. 정렬·필터 옆에 나란히 서면 실수로 눌린다. */
.wctl__wipe, .cctl__btn--wipe {
  margin-left: auto;
  padding: 6px 9px;
  background: transparent; color: var(--fg-faint);
  border: 1px solid transparent; border-radius: var(--radius-s);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.wctl__wipe:hover, .cctl__btn--wipe:hover { color: var(--warn); border-color: var(--warn); }

/* 홈 푸터 — 초기화 앞의 안내 (T32). 지우기 전에 내보내기가 있다는 것을 알린다. */
.footer__warn {
  margin: 10px 0 0;
  font-size: 12px; line-height: 1.7; color: var(--fg-faint);
  word-break: keep-all;
}
.footer__warn a { color: var(--fg-muted); text-decoration: underline; }
.footer__warn a:hover { color: var(--accent); }

/* 지운 메모 한 번 되살리기 (T32) */
.memo__undo { color: var(--accent); }

/* ---------- 본문 약어 툴팁 (T21) ---------- */
/* 🚨 밑줄만 아주 옅게 — 본문에 DFD·UML 이 자주 나와서 눈에 띄게 하면 글이 얼룩진다.
   그래서 abbr.js 도 한 섹션에서 같은 약어를 3번까지만 표시한다. */
abbr.gl {
  text-decoration: none;
  border-bottom: 1px dotted var(--fg-faint);
  cursor: help;
}
abbr.gl:hover, abbr.gl:focus-visible {
  border-bottom-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.gltip {
  position: absolute; z-index: 60;
  display: none; flex-direction: column; gap: 3px;
  max-width: min(290px, calc(100vw - 24px));
  padding: 11px 13px;
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: 13px; line-height: 1.6; word-break: keep-all;
}
.gltip.is-open { display: flex; }
.gltip__a { font-size: 14px; letter-spacing: -.01em; }
.gltip__k { color: var(--fg); font-weight: 600; }
.gltip__f { color: var(--fg-faint); font-size: 12px; }
.gltip__more {
  margin-top: 5px; font-size: 12px;
  color: var(--accent); text-decoration: none;
}
.gltip__more:hover { text-decoration: underline; }