/* ─────────────────────────────────────────────
   물리전자 학습앱 v4 — Subtle Glass, Light/Dark
   ───────────────────────────────────────────── */
@import url('/_vendor/fonts/pretendard/pretendard.css');

/* ═══════════════════════════════════════════
   색 토큰 — 공통 팔레트 A안(다크)이 유일한 정의 지점.
   아래 --c-* 12개만이 실제 색값이고,
   기존 토큰 이름(--ink, --violet, --amber …)은 전부 별칭이다.
   색을 바꾸려면 --c-* 만 고치면 된다.
   ═══════════════════════════════════════════ */
:root {
  /* ── A안 다크 팔레트 (확정값) ── */
  --c-bg:#1b1712; --c-surface:#241f18; --c-sunk:#171410;
  --c-ink:#efe6d6; --c-ink-soft:#a99880;
  --c-accent:#e6a35c; --c-accent-soft:#3a2c1a;
  --c-line:#42392b; --c-line-strong:#766856;
  --c-success:#8fce9c; --c-warning:#e0b96a; --c-danger:#e39181;

  /* 반투명 합성용 채널값 — 위 hex와 같은 색 */
  --c-ink-rgb:239,230,214;
  --c-accent-rgb:230,163,92;
  --c-line-rgb:118,104,86;
  --c-success-rgb:143,206,156;
  --c-warning-rgb:224,185,106;
  --c-danger-rgb:227,145,129;

  /* 파생 롤 */
  --on-accent: var(--c-bg);                      /* accent 면 위 글자 */
  --accent-line: rgba(var(--c-accent-rgb),.45);  /* 강조 테두리·hover */
  --accent-tint: rgba(var(--c-accent-rgb),.10);  /* 아주 옅은 accent 면 */

  /* 유리 패널 (배경 블롭이 비쳐야 해서 반투명 유지) */
  --glass: rgba(var(--c-ink-rgb),.045);
  --glass-2: rgba(var(--c-ink-rgb),.07);
  --glass-hi: rgba(var(--c-ink-rgb),.14);

  --blob-a1: .16; --blob-a2: .12; --blob-a3: .10; --blob-a4: .10;
  --blob-blur: 92px; --blob-sat: 112%;

  /* ── 이하 전부 별칭 (기존 var(--…) 참조 호환) ── */
  --bg-body: var(--c-bg);
  --ink: var(--c-ink);
  --ink-2: rgba(var(--c-ink-rgb),.86);
  --muted: var(--c-ink-soft);
  --strong-ink: var(--c-ink);
  --line: var(--c-line);
  --line-soft: rgba(var(--c-line-rgb),.30);

  --violet: var(--c-accent);
  --cyan: var(--c-accent);
  --pink: var(--c-line-strong);      /* 수업 필기 = 중립 강조 */
  --accent: var(--c-accent);
  --accent-ink: var(--c-accent);
  --cyan-ink: var(--c-accent);
  --accent-bg: var(--c-accent-soft);
  --accent-grad: linear-gradient(135deg, var(--c-accent), var(--c-warning));

  --amber: var(--c-warning);
  --amber-ink: var(--c-warning);
  --amber-bg: rgba(var(--c-warning-rgb),.10);
  --amber-line: rgba(var(--c-warning-rgb),.30);
  --pink-ink: var(--c-ink-soft);
  --green: var(--c-success);
  --green-ink: var(--c-success);
  --red: var(--c-danger);
  --red-ink: var(--c-danger);
  --mark: linear-gradient(90deg, rgba(var(--c-accent-rgb),.30), rgba(var(--c-warning-rgb),.28));
  --mark-ink: var(--c-ink);

  --intuition-text: var(--c-ink);
  --exam-text: var(--c-ink);
  --note-text: var(--c-ink);
  --sol-text: var(--c-ink);
  --expl-text: var(--c-ink);
  --answer-text: var(--c-success);
  --correct-text: var(--c-success);
  --wrong-text: var(--c-danger);

  --radius: 16px;
  --sidebar-w: 260px;
  --content-w: 1240px;
}

/* ── 라이트 테마: --c-* 만 뒤집는다 (별칭은 그대로 따라온다) ── */
:root[data-theme="light"] {
  --c-bg:#f4ede0; --c-surface:#fffdf8; --c-sunk:#ece2cf;
  --c-ink:#2b2117; --c-ink-soft:#6b5d4c;
  --c-accent:#9a4913; --c-accent-soft:#f3ddc4;
  --c-line:#ddd0b8; --c-line-strong:#968368;
  --c-success:#2f6b40; --c-warning:#8a5a12; --c-danger:#a13d2e;

  --c-ink-rgb:43,33,23;
  --c-accent-rgb:154,73,19;
  --c-line-rgb:150,131,104;
  --c-success-rgb:47,107,64;
  --c-warning-rgb:138,90,18;
  --c-danger-rgb:161,61,46;

  --glass: rgba(255,252,246,.62);
  --glass-2: rgba(255,252,246,.76);
  --glass-hi: rgba(255,252,246,.9);

  --blob-a1: .10; --blob-a2: .08; --blob-a3: .07; --blob-a4: .07;
  --blob-blur: 100px; --blob-sat: 105%;

  --line-soft: rgba(var(--c-line-rgb),.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 40px; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.85;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-body);
  min-height: 100vh;
  transition: background .25s ease, color .25s ease;
}
a { color: var(--accent-ink); text-decoration: none; }
mark { background: var(--mark); padding: 0 4px; border-radius: 4px; color: var(--mark-ink); }
b, strong { font-weight: 700; color: var(--strong-ink); }

/* ── 배경 블롭 (고정, 은은한 애니메이션) ── */
body::before {
  content: "";
  position: fixed; inset: -10%;
  z-index: -1;
  background:
    radial-gradient(36% 28% at 12% 15%, rgba(var(--c-accent-rgb),var(--blob-a1)), transparent 70%),
    radial-gradient(32% 26% at 88% 12%, rgba(var(--c-warning-rgb),var(--blob-a2)), transparent 70%),
    radial-gradient(38% 32% at 25% 92%, rgba(var(--c-line-rgb),var(--blob-a3)), transparent 70%),
    radial-gradient(42% 34% at 92% 88%, rgba(var(--c-accent-rgb),var(--blob-a4)), transparent 70%),
    var(--bg-body);
  filter: blur(var(--blob-blur)) saturate(var(--blob-sat));
  animation: blobdrift 40s ease-in-out infinite alternate;
  transition: background .25s ease;
}
@keyframes blobdrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(1.5%,-1.5%) scale(1.02); }
  100% { transform: translate(-1.5%,1.5%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* 읽기 진행 바 */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent-grad);
  z-index: 99; transition: width .1s linear;
}

/* ── 레이아웃: 유리 패널 2장(사이드바 · 메인) ── */
.layout { display: flex; min-height: 100vh; gap: 20px; padding: 20px; align-items: flex-start; }
nav.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  color: var(--ink-2);
  padding: 22px 18px 26px;
  position: sticky; top: 20px; height: calc(100vh - 40px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent;
}
nav.sidebar .brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
nav.sidebar .brand .brand-txt h1 {
  font-size: 1.03rem; margin: 0; font-weight: 800; letter-spacing: -.01em;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
nav.sidebar .brand .sub { font-size: .7rem; color: var(--muted); letter-spacing: .13em; font-weight: 700; }
#theme-toggle-btn {
  flex-shrink: 0; border: 1px solid var(--line); background: var(--glass-2);
  border-radius: 9px; width: 32px; height: 32px; cursor: pointer; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
#theme-toggle-btn:hover { border-color: var(--violet); }
.master-link {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: var(--muted);
  padding: 8px 10px; margin: 12px 0 2px; border-radius: 9px;
  border: 1px dashed var(--line);
}
.master-link:hover { color: var(--accent-ink); border-color: var(--accent-line); background: var(--glass-2); }
nav.sidebar .navsec {
  margin: 22px 0 8px; font-size: .65rem; font-weight: 700;
  color: var(--muted); letter-spacing: .13em; text-transform: uppercase;
}
nav.sidebar ul { list-style: none; margin: 0; padding: 0; }
nav.sidebar li a {
  display: block; padding: 7px 11px; margin: 1px 0;
  border-radius: 9px; color: var(--ink-2); font-size: .84rem; line-height: 1.5;
  transition: background .15s, color .15s;
}
nav.sidebar li a:hover { background: var(--glass-2); color: var(--strong-ink); }
nav.sidebar li a.active { background: var(--accent-grad); color: var(--on-accent); font-weight: 700; }
nav.sidebar li a.dim { color: var(--muted); opacity: .55; }
nav.sidebar li a.dim:hover { background: none; opacity: .75; cursor: default; }

/* ── 메인: 큰 유리 패널 ── */
main {
  flex: 1; min-width: 0;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  overflow: hidden;
}
.container { max-width: var(--content-w); margin: 0 auto; padding: 0 56px 140px; }
@media (max-width: 980px) {
  /* column 전환 시 align-items:flex-start(144행)가 가로 정렬로 바뀌어
     main이 컨테이너 폭 대신 콘텐츠 폭을 갖게 된다 → stretch로 되돌린다 */
  .layout { flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; }
  nav.sidebar { position: static; width: 100%; height: auto; }
  .container { padding: 0 20px 100px; }
}

/* ── 챕터 히어로 ── */
header.hero {
  position: relative;
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(var(--c-accent-rgb),.16), transparent 55%),
    radial-gradient(90% 140% at -10% 110%, rgba(var(--c-warning-rgb),.10), transparent 55%),
    linear-gradient(135deg, var(--c-sunk) 0%, var(--c-surface) 55%, var(--c-sunk) 100%);
  color: var(--c-ink);
  padding: 64px 40px 52px;
}
header.hero .hero-in { max-width: var(--content-w); margin: 0 auto; padding: 0 16px; }
header.hero .eyebrow {
  font-size: .74rem; letter-spacing: .2em; font-weight: 700;
  color: var(--c-accent); text-transform: uppercase; margin-bottom: 14px;
}
header.hero .eyebrow .n { color: var(--c-warning); }
header.hero h1 {
  font-size: 2.5rem; margin: 0 0 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
  color: var(--c-ink);
}
header.hero p.lede { color: var(--c-ink-soft); font-size: 1.02rem; margin: 0 0 24px; max-width: 860px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-pdf {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-2); border: 1px solid var(--accent-line);
  color: var(--c-accent) !important; padding: 10px 20px; border-radius: 11px;
  font-size: .84rem; font-weight: 600;
  transition: background .15s;
}
.btn-pdf:hover { background: var(--c-accent-soft); }
.hero-meta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-meta .m {
  font-size: .82rem; color: var(--c-ink-soft);
  background: var(--glass); border: 1px solid var(--c-line);
  padding: 8px 16px; border-radius: 11px;
}
.hero-meta .m b { color: var(--c-ink); font-size: 1rem; font-weight: 800; margin-right: 5px; }

/* ── 섹션 구조 ── */
section.part { margin: 0 0 72px; }
.part-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.part-head .no {
  font-size: 2.4rem; font-weight: 800; color: transparent;
  -webkit-text-stroke: 1.4px var(--accent);
  line-height: 1; letter-spacing: -.03em; flex-shrink: 0;
}
.part-head h2 { font-size: 1.45rem; font-weight: 800; margin: 0; letter-spacing: -.015em; color: var(--strong-ink); }
.part-sub { color: var(--muted); font-size: .84rem; margin: 0 0 26px 0; padding-left: 2px; }
h3 { font-size: 1.1rem; font-weight: 800; margin: 38px 0 10px; letter-spacing: -.01em; color: var(--strong-ink); }
h3 .h3no { color: var(--cyan-ink); margin-right: 8px; font-size: .92rem; }
p { margin: 12px 0; color: var(--ink-2); }
li { color: var(--ink-2); }

/* 감 잡기 (직관 도입) */
.intuition {
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb),.12), rgba(var(--c-warning-rgb),.06));
  border: 1px solid rgba(var(--c-accent-rgb),.28);
  border-radius: var(--radius);
  padding: 18px 22px; margin: 20px 0 26px;
  font-size: .95rem;
}
.intuition .t { font-weight: 800; color: var(--accent-ink); font-size: .78rem; letter-spacing: .07em; margin-bottom: 6px; }
.intuition p { margin: 6px 0; color: var(--intuition-text); }

/* 용어 정의 */
.term { font-weight: 700; color: var(--strong-ink); }
.en { color: var(--muted); font-size: .88em; font-weight: 400; }

/* 그림 */
figure.shot { margin: 24px 0; }
figure.shot .imgwrap {
  /* 교재 스캔 그림이 흰 배경 래스터라 받침판은 의도적으로 흰색 유지 (토큰화 금지) */
  background: #fdfdfd; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: center;
  box-shadow: 0 6px 24px -14px rgba(0,0,0,.4);
}
figure.shot img { max-width: 100%; height: auto; border-radius: 6px; }
figure.shot img.w60 { max-width: 60%; }
figure.shot img.w45 { max-width: 45%; }
figure.shot figcaption {
  margin-top: 10px; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.6;
}
figure.shot figcaption b { color: var(--accent-ink); font-weight: 700; }

/* 수식 */
.formula {
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 20px; margin: 16px 0; overflow-x: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.formula .eqno { color: var(--muted); font-size: .82rem; flex-shrink: 0; }

/* 기호 설명 — .formula 바로 아래에 붙는 정의 목록 */
.symlist {
  display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px;
  margin: -8px 0 18px 10px; padding: 8px 14px;
  font-size: .82rem; color: var(--muted); border-left: 2px solid var(--line);
}
.symlist dt { font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.symlist dd { margin: 0; }
.symlist .u { font-size: .76rem; color: var(--muted); }
.symlist .warn { color: var(--amber-ink); font-weight: 700; }
@media (max-width: 640px) { .symlist { grid-template-columns: 1fr; } .symlist dd { margin: 0 0 5px 12px; } }

/* 표 */
table.tbl {
  border-collapse: collapse; width: 100%; margin: 18px 0; font-size: .9rem;
  background: var(--glass-2); border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line);
}
table.tbl caption { caption-side: top; text-align: left; font-size: .8rem; color: var(--accent-ink); font-weight: 700; margin-bottom: 8px; }
table.tbl th { background: var(--accent-tint); padding: 9px 12px; border: 1px solid var(--line-soft); font-size: .84rem; color: var(--strong-ink); }
table.tbl td { padding: 8px 12px; border: 1px solid var(--line-soft); color: var(--ink-2); }

/* 예제 */
.example {
  background: var(--glass-2); border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: var(--radius); margin: 24px 0;
}
.example .ex-head { padding: 14px 22px 0; }
.example .ex-tag { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--cyan-ink); }
.example .ex-title { font-weight: 800; font-size: 1.02rem; margin: 2px 0 0; color: var(--strong-ink); }
.example .ex-body { padding: 8px 22px 18px; font-size: .95rem; }
.steps { list-style: none; margin: 12px 0; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 14px 40px; margin: 0; color: var(--ink-2);
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 3px;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent-grad); color: var(--on-accent);
  font-weight: 800; font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
}
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 12px; top: 30px; bottom: 2px;
  width: 1px; background: var(--line);
}
.answer {
  font-size: .86rem; background: rgba(var(--c-success-rgb),.12); border: 1px solid rgba(var(--c-success-rgb),.34);
  color: var(--answer-text); border-radius: 8px; padding: 7px 14px; margin-top: 10px; display: inline-block;
}

/* 이해도 평가 */
.tyu { background: var(--glass-2); border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px 22px; margin: 22px 0; font-size: .92rem; }
.tyu h4 { margin: 0 0 10px; font-size: .84rem; letter-spacing: .06em; color: var(--cyan-ink); }
.tyu ol { margin: 0; padding-left: 18px; }
.tyu li { margin: 10px 0; }

/* 시험 포인트 */
.exam-point {
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  border-radius: var(--radius); padding: 16px 22px; margin: 22px 0;
  font-size: .95rem;
}
.exam-point .t {
  font-weight: 800; color: var(--amber-ink); font-size: .78rem;
  letter-spacing: .06em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.exam-point p, .exam-point li { color: var(--exam-text); margin: 6px 0; }
.exam-point table.tbl td, .exam-point table.tbl th { color: var(--exam-text); }

/* 수업 필기 */
.note {
  border-left: 3px solid var(--pink); background: var(--c-sunk);
  padding: 10px 18px; margin: 16px 0; font-size: .9rem; color: var(--note-text);
  border-radius: 0 11px 11px 0; border-top: 1px solid var(--c-line); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.note .t { font-weight: 800; font-size: .74rem; color: var(--pink-ink); letter-spacing: .08em; }

/* ── 요약 시트 ── */
.cheat { margin: 0 0 72px; }
.cheat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 1100px) { .cheat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .cheat-grid { grid-template-columns: 1fr; } }
.cheat-card {
  background: var(--glass-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; font-size: .88rem;
  transition: border-color .15s;
}
.cheat-card:hover { border-color: var(--accent-line); }
.cheat-card .ct { font-weight: 800; font-size: .8rem; color: var(--cyan-ink); letter-spacing: .04em; margin-bottom: 8px; }
.cheat-card ul { margin: 0; padding-left: 16px; }
.cheat-card li { margin: 5px 0; color: var(--ink-2); }
.cheat-card.wide { grid-column: 1 / -1; }

/* ── 퀴즈 ── */
.quiz { margin: 0 0 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.quiz .part-head, .quiz .part-sub, .quiz .quiz-score { grid-column: 1 / -1; }
@media (max-width: 1100px) { .quiz { grid-template-columns: 1fr; } }
.q {
  background: var(--glass-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin: 14px 0;
}
.q .qno { font-size: .72rem; font-weight: 800; color: var(--cyan-ink); letter-spacing: .1em; }
.q .qt { font-weight: 700; margin: 4px 0 14px; line-height: 1.6; color: var(--strong-ink); }
.q label {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  margin: 8px 0; cursor: pointer; font-size: .92rem; transition: all .12s;
  color: var(--ink-2);
}
.q label:hover { border-color: var(--accent-line); background: rgba(var(--c-accent-rgb),.07); }
.q label.correct { background: rgba(var(--c-success-rgb),.13); border-color: var(--green); color: var(--correct-text); }
.q label.wrong { background: rgba(var(--c-danger-rgb),.13); border-color: var(--red); color: var(--wrong-text); }
.q input[type="radio"] { margin-top: 4px; accent-color: var(--accent); }
.q .expl {
  display: none; margin-top: 12px; font-size: .88rem;
  background: var(--accent-bg); border-radius: 10px; padding: 12px 16px; color: var(--expl-text);
}
.q .expl.show { display: block; }
.quiz-score {
  font-weight: 800; margin-top: 18px; font-size: .95rem;
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px 18px;
  color: var(--strong-ink);
}
.quiz-score:empty { display: none; }

/* ── 문제/복습 ── */
details.fold {
  background: var(--glass-2); border: 1px solid var(--line); border-radius: var(--radius);
  margin: 12px 0; overflow: hidden;
}
details.fold summary {
  cursor: pointer; font-weight: 700; padding: 13px 20px; font-size: .93rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  color: var(--strong-ink);
}
details.fold summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.2rem; }
details.fold[open] summary::after { content: "−"; }
details.fold summary:hover { background: rgba(var(--c-ink-rgb),.05); }
details.fold .fold-body { padding: 2px 22px 18px; font-size: .93rem; border-top: 1px solid var(--line-soft); }
ol.problist { padding-left: 20px; margin: 10px 0; }
ol.problist li { margin: 12px 0; }
.sol { background: var(--glass); border-radius: 10px; padding: 12px 18px; margin: 8px 0 4px; font-size: .9rem; color: var(--sol-text); }
.sol .t { font-weight: 800; font-size: .74rem; color: var(--cyan-ink); letter-spacing: .08em; }

/* ── 챕터 내비 ── */
.chnav { display: flex; gap: 14px; margin-top: 56px; }
.chnav a {
  flex: 1; background: var(--glass-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; color: var(--ink);
  transition: border-color .15s;
}
.chnav a:hover { border-color: var(--accent-line); }
.chnav .dir { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.chnav .ttl { font-weight: 700; font-size: .95rem; margin-top: 2px; color: var(--strong-ink); }
.chnav a.next { text-align: right; }
.chnav a.off { opacity: .4; pointer-events: none; }

/* ── 인덱스(대시보드) ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
a.card {
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 17px;
  padding: 22px 24px; color: var(--ink); position: relative;
  transition: transform .15s, border-color .15s;
}
a.card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
a.card.coming { opacity: .42; pointer-events: none; }
a.card .cno { font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: var(--cyan-ink); }
a.card h3 { margin: 6px 0 8px; font-size: 1.08rem; color: var(--strong-ink); }
a.card p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.65; }
a.card .badge {
  position: absolute; top: 20px; right: 20px;
  font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 20px;
  background: rgba(var(--c-success-rgb),.15); color: var(--green-ink); border: 1px solid rgba(var(--c-success-rgb),.32);
}
a.card.coming .badge { background: var(--glass); color: var(--muted); border-color: var(--line); }
.pdf-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 20px; }
.pdf-list li a {
  display: flex; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: .88rem; color: var(--ink-2);
}
.pdf-list li a:hover { background: var(--glass-2); color: var(--strong-ink); }

/* ═══════════════════════════════════════════
   탭 구조 (학습모드 / 시험모드 / 퀴즈 / 3D / 원문)
   ═══════════════════════════════════════════ */
.tabbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 4px; background: var(--glass-2); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 14px 0; margin-bottom: 36px; overflow-x: auto;
}
.tab-btn {
  flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 700; color: var(--muted);
  padding: 9px 18px; border-radius: 10px; transition: all .15s;
}
.tab-btn:hover { background: var(--glass); color: var(--strong-ink); }
.tab-btn.active { background: var(--accent-grad); color: var(--on-accent); }
.tabpanel { display: none; }
.tabpanel.active { display: block; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* 절 이동 pill nav (학습모드 상단) */
.pillnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 30px; }
.pillnav a {
  font-size: .82rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-bg); border: 1px solid rgba(var(--c-accent-rgb),.24); padding: 7px 15px; border-radius: 20px;
}
.pillnav a:hover { background: rgba(var(--c-accent-rgb),.20); }

/* PDF 딥링크 배지 */
.pdf-jump {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 700; color: var(--cyan-ink);
  background: var(--accent-tint); border: 1px solid rgba(var(--c-accent-rgb),.26);
  padding: 4px 11px; border-radius: 8px; margin: 4px 0 16px;
}
.pdf-jump:hover { background: rgba(var(--c-accent-rgb),.18); }

/* 학습모드 섹션 헤더 */
.study-sec { margin-bottom: 50px; scroll-margin-top: 90px; }
.study-sec .part-head { margin-bottom: 4px; }
.study-sec .part-head .no { font-size: 1.85rem; }
.study-sec .part-head h2 { font-size: 1.26rem; }

/* 시험모드 상단 빈출 포인트 리스트 */
.examlist { background: var(--glass-2); border: 1px solid var(--amber-line); border-radius: var(--radius); padding: 8px 26px; margin: 20px 0 38px; }
.examlist li { margin: 14px 0; color: var(--exam-text); font-size: .95rem; }
.examlist li b { color: var(--amber-ink); }

/* ── 플래시카드 ── */
.flashzone { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 20px 0 52px; }
.flashcard {
  width: 100%; max-width: 560px; min-height: 190px;
  background: linear-gradient(135deg, rgba(var(--c-accent-rgb),.14), rgba(var(--c-warning-rgb),.06));
  border: 1px solid rgba(var(--c-accent-rgb),.28); border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px 34px; cursor: pointer;
  user-select: none;
}
.flashcard .fc-idx { font-size: .74rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; margin-bottom: 12px; }
.flashcard .fc-term { font-size: 1.55rem; font-weight: 800; color: var(--strong-ink); }
.flashcard .fc-en { font-size: .9rem; color: var(--accent-ink); margin-top: 6px; }
.flashcard .fc-def {
  display: none; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line);
  font-size: .95rem; color: var(--ink-2); text-align: left;
}
.flashcard.flipped .fc-def { display: block; }
.flashcard .fc-hint { margin-top: 16px; font-size: .78rem; color: var(--muted); }
.flash-controls { display: flex; gap: 10px; align-items: center; }
.flash-controls button {
  font-family: inherit; border: 1px solid var(--line); background: var(--glass-2); cursor: pointer;
  padding: 9px 18px; border-radius: 10px; font-size: .86rem; font-weight: 700; color: var(--ink-2);
}
.flash-controls button:hover { border-color: var(--accent-line); color: var(--strong-ink); }
.flash-controls button.primary { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; }

/* 퀴즈 도구모음 */
.quiz-toolbar { grid-column: 1/-1; display: flex; gap: 10px; align-items: center; margin: -8px 0 6px; }
.quiz-toolbar button {
  font-family: inherit; border: 1px solid var(--line); background: var(--glass-2); cursor: pointer;
  padding: 8px 16px; border-radius: 10px; font-size: .82rem; font-weight: 700; color: var(--ink-2);
}
.quiz-toolbar button:hover { border-color: var(--accent-line); color: var(--strong-ink); }
.q.was-wrong .qno::after { content: "· 이전에 틀림"; color: var(--red-ink); font-weight: 700; margin-left: 6px; }
.q.hidden-by-filter { display: none; }

/* ── 3D 결정구조 뷰어 ── */
.viewer3d-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin: 20px 0 40px; }
@media (max-width: 900px) { .viewer3d-wrap { grid-template-columns: 1fr; } }
.viewer3d-panel { background: var(--glass-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; font-size: .88rem; height: fit-content; }
.viewer3d-panel h4 { margin: 0 0 12px; font-size: .82rem; letter-spacing: .05em; color: var(--cyan-ink); }
.viewer3d-panel label.opt { display: flex; align-items: center; gap: 8px; margin: 9px 0; cursor: pointer; color: var(--ink-2); }
.viewer3d-panel select {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  font-family: inherit; font-size: .88rem; margin-bottom: 4px; background: var(--glass); color: var(--ink);
}
.viewer3d-panel select option { background: var(--c-surface); color: var(--c-ink); }
.viewer3d-panel .plane-sw { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--ink-2); }
.viewer3d-panel .sw-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.viewer3d-info { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); line-height: 1.7; }
.viewer3d-stage {
  background: var(--c-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius); position: relative;
  min-height: 520px; overflow: hidden;
}
.viewer3d-stage canvas { display: block; width: 100%; height: 100%; }
.viewer3d-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-soft); font-size: .85rem;
}

/* 대표 문제 카드 (원문·문제 탭) */
.probgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 14px; margin: 18px 0 36px; }
.probcard { background: var(--glass-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.probcard .pn { font-size: .74rem; font-weight: 800; color: var(--cyan-ink); letter-spacing: .06em; }
.probcard p { font-size: .9rem; margin: 6px 0; }
.problink-table { width: 100%; font-size: .85rem; }
.problink-table td { padding: 5px 8px; }
.problink-table td.pnum { font-weight: 700; color: var(--accent-ink); width: 46px; }

/* ── 2장 인터랙티브 시각화 (무한우물·터널링) ── */
.viewer3d-panel input[type="range"] { width: 100%; accent-color: var(--violet); margin: 6px 0 4px; }
.viewer3d-panel .range-val { font-size: .82rem; color: var(--accent-ink); font-weight: 700; }
.viewer3d-panel input[type="number"] {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  font-family: inherit; font-size: .88rem; margin-bottom: 10px; background: var(--glass); color: var(--ink);
}
.viewer3d-panel .field-label { font-size: .78rem; color: var(--muted); margin: 10px 0 4px; display: block; }
.well-modes { display: flex; gap: 14px; margin: 10px 0 4px; }
.well-modes label { display: flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); cursor: pointer; }
.tunnel-bar-track { height: 10px; border-radius: 6px; background: var(--glass-2); overflow: hidden; margin-top: 12px; }
.tunnel-bar-track .fill { height: 100%; width: 0; transition: width .2s; border-radius: 6px; }
.tunnel-out { margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.well-canvas-wrap { padding: 16px; }
canvas#well-canvas { width: 100%; height: 300px; display: block; }