/* ═══════════════════════════════════════════════════
   통계 학습 노트 · 공통 스타일
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg: #fdfcf8;
  --ink: #1d1d1f;
  --muted: #585858;
  --accent: #c0392b;
  --accent-soft: #fbecea;
  --blue: #1e3a8a;
  --blue-soft: #e8eefc;
  --green: #2f6d4a;
  --green-soft: #e7f2eb;
  --yellow-soft: #fff6d6;
  --rule: #e6e1d4;
  --sidebar: #f6f2e8;
  --topbar-h: 56px;
  --bottom-nav-h: 60px;
  --sidebar-w: 280px;

  /* 타입 스케일 (8단계 모듈러) */
  --t-label: 12px;     /* 라벨·번호·mono chip */
  --t-caption: 14px;   /* 부제·캡션·메타 */
  --t-body: 17px;      /* 본문·리스트·표 */
  --t-lead: 19px;      /* 리드·강조 문장 */
  --t-h4: 18px;        /* h4 */
  --t-h3: 24px;        /* h3 */
  --t-h2: 32px;        /* h2 (챕터) */
  --t-h1: 44px;        /* h1 (히어로) */

  /* Line-heights 3단계 */
  --lh-tight: 1.3;     /* 제목·큰 숫자 */
  --lh-snug: 1.7;      /* 카드·콜아웃·정의 */
  --lh-read: 1.85;     /* 본문·리스트 (한글 읽기 최적, KaTeX 베이스라인까지 고려) */

  /* 문단 사이 여백 (가시성 강화) */
  --gap-p: 22px;
  --gap-li: 12px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS에서 가로 방향으로 텍스트가 임의 확대되지 않게 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  line-height: var(--lh-read);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
  /* 가로 스크롤 유출 방지 (SVG/수식/표가 튀어나오는 문제 예방) */
  overflow-x: hidden;
}

/* 링크 터치 하이라이트 투명화 (깔끔한 모바일 탭 느낌) */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* 인라인 이미지/SVG 오버플로 방어 */
img, svg { max-width: 100%; }

/* 긴 영문 단어·URL이 좁은 화면에서 가로 유출하지 않게 */
p, li, h1, h2, h3, h4, .definition, .callout, .card, .take-away, .hero .lead, .chap-sub {
  overflow-wrap: break-word;
  word-break: keep-all; /* 한글은 음절 단위로 유지 */
}
/* 단, 수식/데이터 스트립은 줄바꿈보다 스크롤이 자연스러움 */
.formula, .data-strip, pre, code {
  word-break: normal;
  overflow-wrap: normal;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════ 상단 앱바 ═══════════════ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Dynamic Island / 노치 아래에 안전하게 배치 */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-bottom: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  background: rgba(253, 252, 248, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 자동 숨김 트랜지션 */
  transition: transform 0.28s ease;
}
.topbar--hidden {
  transform: translateY(-100%);
}

/* ─── 읽기 진도 바 (뷰포트 최상단 고정 · 앱바 숨어도 항상 표시) ─── */
.reading-progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #e67e4b);
  z-index: 102; /* topbar(100) 보다 위, 모든 것 위에 */
  transition: width 0.12s linear;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

.topbar .hamburger {
  display: none;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.topbar .hamburger:hover { background: #efe9d9; }
.topbar .hamburger svg {
  width: 22px; height: 22px;
  stroke: var(--ink);
}

.topbar .brand {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--blue);
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: var(--lh-tight);
}
.topbar .brand .dot {
  color: var(--muted);
  margin: 0 8px;
  font-weight: 400;
}
.topbar .brand .current {
  color: var(--ink);
  font-weight: 700;
}

.topbar .spacer { flex: 1; }

.topbar .nav-lec {
  display: flex;
  gap: 12px;
}
.topbar .nav-lec a {
  min-width: 36px; height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--t-caption);
  font-weight: 700;
  white-space: nowrap;
  gap: 3px;
}
.topbar .nav-lec a:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}
.topbar .nav-lec a.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ═══════════════ 레이아웃 ═══════════════ */
.layout {
  /* 데스크톱: 사이드바는 fixed 로 별도 배치, main 에 padding 으로 공간 확보 */
  min-height: 100vh;
  min-height: 100dvh; /* iOS Safari URL바 변동 보정 */
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-left: var(--sidebar-w);
}

/* ═══════════════ 사이드바 ═══════════════ */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--rule);
  padding: 24px 20px 40px;
  /* fixed 로 전환 — body 의 overflow-x:hidden 이 sticky 를 깨뜨리는 문제 회피 */
  position: fixed;
  top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px));
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 15px;
  z-index: 50;
  /* topbar 이 숨/표시될 때 함께 이동 */
  transition: top 0.28s ease, height 0.28s ease;
}
/* topbar 이 숨었을 때 사이드바도 맨 위까지 확장 (상단 공백 제거) */
.sidebar.sidebar--top-extended {
  top: env(safe-area-inset-top, 0px);
  height: calc(100vh - env(safe-area-inset-top, 0px));
  height: calc(100dvh - env(safe-area-inset-top, 0px));
}

/* ─── 홈으로 가기 링크 (사이드바 상단) ─── */
.sidebar .home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 500;
  border-radius: 7px;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar .home-link:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

.sidebar .side-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 18px 0 10px;
  font-weight: 600;
}
.sidebar .side-title:first-child { margin-top: 4px; }

.sidebar .lec-list,
.sidebar .chap-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.sidebar .lec-list li { margin: 0; }
.sidebar .lec-list a {
  display: block;
  padding: 10px 12px 10px 34px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
  position: relative;
  transition: background 0.15s;
  line-height: 1.5;
}
.sidebar .lec-list a::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--muted);
}
.sidebar .lec-list a.active::before {
  background: var(--accent);
  border-color: var(--accent);
}
.sidebar .lec-list a.active {
  background: #fff;
  color: var(--accent);
  font-weight: 700;
}
.sidebar .lec-list a:hover {
  background: #fff;
}
.sidebar .lec-list .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  color: var(--muted);
  margin-right: 6px;
  font-weight: 600;
}
.sidebar .lec-list a.active .num { color: var(--accent); }

.sidebar .chap-list { counter-reset: chap; }
.sidebar .chap-list li { counter-increment: chap; }
.sidebar .chap-list a {
  display: block;
  padding: 7px 12px 7px 36px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
  position: relative;
  font-size: var(--t-caption);
  line-height: 1.5;
}
.sidebar .chap-list a::before {
  content: counter(chap, decimal-leading-zero);
  position: absolute;
  left: 10px; top: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
}
.sidebar .chap-list a:hover {
  background: #fff;
  color: var(--accent);
}
.sidebar .chap-list a.active {
  background: #fff;
  color: var(--accent);
  font-weight: 700;
}

.sidebar .divider {
  height: 1px;
  background: var(--rule);
  margin: 16px 0;
  border: none;
}

.sidebar .side-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-size: var(--t-label);
  color: var(--muted);
  line-height: var(--lh-snug);
}

/* ═══════════════ 드로어 백드롭 ═══════════════ */
.drawer-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(29, 29, 31, 0.45);
  z-index: 98;
  opacity: 0;
  transition: opacity 0.25s;
}
.drawer-backdrop.open {
  display: block;
  opacity: 1;
}

/* ═══════════════ 본문 ═══════════════ */
main {
  padding: 56px 56px 140px;
  max-width: 820px;
  width: 100%;
}

/* ─── Hero ─── */
.hero {
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--ink);
}
.hero .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  color: var(--accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 700;
  /* 좁은 화면에서 텍스트가 가로 밖으로 밀려나지 않게 */
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.6;
}
.hero h1 {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.hero h1 .small {
  display: block;
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}
.hero .lead {
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: 620px;
  line-height: var(--lh-snug);
}

/* ─── 챕터 ─── */
section.chapter {
  margin-bottom: 88px;
  /* 노치 안전 영역까지 고려해서 앵커 점프 위치 보정 */
  scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 16px);
  /* 등장 애니메이션 제거 — 처음부터 항상 보이게 */
}

.chap-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  color: var(--accent);
  letter-spacing: 0.2em;
  margin-bottom: 10px;
  font-weight: 700;
}
section.chapter h2 {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.chap-sub {
  font-size: var(--t-caption);
  color: var(--muted);
  margin-bottom: 28px;
  line-height: var(--lh-snug);
}

h3 {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
  font-size: var(--t-h3);
  margin: 48px 0 18px;
  line-height: var(--lh-tight);
}
h3::before {
  content: "§ ";
  color: var(--accent);
  font-weight: 400;
}
h4 {
  font-size: var(--t-h4);
  font-weight: 700;
  margin: 32px 0 14px;
  color: var(--blue);
  line-height: var(--lh-tight);
}

p { margin: 0 0 var(--gap-p); line-height: var(--lh-read); }
p.story {
  font-family: 'Nanum Myeongjo', serif;
  font-size: var(--t-lead);
  line-height: var(--lh-read);
}

strong { color: var(--accent); font-weight: 700; }
em {
  /* 기울임 대신 굵게 — 아이폰에서 기울임이 애매해 보이는 문제 해결 */
  font-style: normal;
  font-weight: 700;
  color: var(--blue);
}

/* ─── 어두운 배경 위 강조 색 보정 ─── */
/* take-away (검정 bg), epilogue (검정 bg), table th (검정 bg) 에선
   파란 em / 빨간 strong 이 어두워서 잘 안 보이므로 밝은 톤으로 */
.take-away em,
.epilogue em,
table th em {
  color: #a8c3ff; /* 밝은 파랑 */
}
.take-away strong,
.epilogue strong,
table th strong {
  color: #ffb4a8; /* 밝은 산호 */
}

ul, ol { padding-left: 24px; margin-bottom: var(--gap-p); }
ul li, ol li { margin-bottom: var(--gap-li); line-height: var(--lh-read); }
ul li:last-child, ol li:last-child { margin-bottom: 0; }

/* ─── 콜아웃 ─── */
.callout {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: 20px 24px;
  margin: 28px 0;
  border-radius: 0 8px 8px 0;
  line-height: var(--lh-snug);
}
.callout p { margin-bottom: 12px; }
.callout ul, .callout ol { margin-bottom: 12px; }
.callout .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.callout.blue { border-color: var(--blue); background: var(--blue-soft); }
.callout.blue .label { color: var(--blue); }
.callout.green { border-color: var(--green); background: var(--green-soft); }
.callout.green .label { color: var(--green); }
.callout.yellow { border-color: #d6a800; background: var(--yellow-soft); }
.callout.yellow .label { color: #8a6d00; }
.callout p:last-child { margin-bottom: 0; }

/* ─── 학습 지도 / 흐름 카드 ─── */
.study-map {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 24px 0;
}
.study-map .label,
.mini-flow .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}
.study-map .map-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.study-map .map-row div {
  border-left: 3px solid var(--rule);
  padding-left: 12px;
}
.study-map strong,
.study-map span {
  display: block;
}
.study-map span {
  color: var(--muted);
  font-size: var(--t-caption);
  line-height: var(--lh-snug);
  margin-top: 4px;
}
.mini-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 24px 0;
}
.mini-flow > div:not(.arrow) {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px;
}
.mini-flow strong {
  display: block;
  margin: 8px 0 4px;
  font-size: var(--t-lead);
  line-height: var(--lh-tight);
}
.mini-flow p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-caption);
  line-height: var(--lh-snug);
}
.mini-flow .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 900;
  font-size: 24px;
}

/* ─── 정규분포 감각 눈금 ─── */
.normal-ruler {
  display: grid;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  gap: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow-x: auto;
  margin: 20px 0;
}
.normal-ruler .tick {
  min-width: 84px;
  padding: 14px 10px;
  text-align: center;
  border-right: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-caption);
  line-height: 1.4;
}
.normal-ruler .tick:last-child { border-right: none; }
.normal-ruler .tick span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.normal-ruler .tick.center {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 700;
}
.normal-ruler .tick.hi {
  background: var(--yellow-soft);
  color: var(--accent);
  font-weight: 700;
}
.normal-ruler .tick.muted { color: var(--muted); }

/* ─── 비유 박스 ─── */
.analogy {
  background: #fff;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 22px 0;
  position: relative;
  line-height: var(--lh-snug);
}
.analogy::before {
  content: "비유로 배우기";
  position: absolute;
  top: -10px; left: 18px;
  background: var(--bg);
  padding: 0 10px;
  font-size: var(--t-label);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-weight: 700;
}

/* ─── 용어 정의 박스 ─── */
.definition {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 22px 24px;
  margin: 24px 0;
  line-height: var(--lh-snug);
}
.definition .term {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 800;
  font-size: var(--t-h3);
  color: var(--accent);
  margin-bottom: 4px;
  line-height: var(--lh-tight);
}
.definition .kor {
  font-size: var(--t-label);
  color: var(--muted);
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}

/* ─── 핵심 한 줄 박스 ─── */
.take-away {
  background: var(--ink);
  color: #f5f1e4;
  padding: 22px 26px;
  border-radius: 8px;
  margin: 32px 0 24px;
  font-family: 'Nanum Myeongjo', serif;
  font-size: var(--t-body);
  line-height: var(--lh-snug);
}
.take-away .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: #b7a870;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* ─── 다음 장 링크 ─── */
.next-chap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 18px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}
.next-chap:hover {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

/* ─── 표 ─── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: var(--t-caption);
  line-height: var(--lh-snug);
}
table th {
  background: var(--ink);
  color: #fff;
  padding: 13px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
}
table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--rule);
}
table tr:nth-child(even) td { background: #faf8f1; }
table.green-head th { background: var(--green); }
table.blue-head th { background: var(--blue); }
table.center td, table.center th { text-align: center; }
table.center td:first-child { text-align: left; font-weight: 600; }
table td.hi { background: var(--yellow-soft) !important; font-weight: 700; }
table caption {
  caption-side: top;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  text-align: left;
  font-style: italic;
}

/* 모바일에서 표 가로 스크롤 (큰 비교표 전용) */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 20px 0;
}
.table-scroll table { margin: 0; min-width: 520px; }

/* ─── 컴팩트 표 (모바일 폭 안에 들어오게) ─── */
table.compact { font-size: 13.5px; }
table.compact th, table.compact td { padding: 8px 6px; }

/* ─── 두 열 요약 표 (라벨 | 값) — 매우 좁게 ─── */
table.kv { font-size: var(--t-caption); }
table.kv th, table.kv td { padding: 10px 12px; }
table.kv td:first-child, table.kv th:first-child {
  font-weight: 600;
  color: var(--ink);
  background: #faf8f1;
  width: 40%;
}

/* ─── 수식 ─── */
.formula {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 16px 20px;
  margin: 20px 0;
  text-align: center;
  font-size: var(--t-body);
  border-radius: 6px;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.6;
}
/* KaTeX 디스플레이 수식이 들어있을 때 박스의 위·아래 여백을 KaTeX 기본 마진과 충돌하지 않게 정리 */
.formula .katex-display {
  margin: 0;
  padding: 4px 0;
}
.formula .katex-display > .katex {
  white-space: normal;
}
/* KaTeX 폰트 사이즈 — 디스플레이 수식은 살짝 키우고, 인라인은 본문에 자연스럽게 */
.formula .katex { font-size: 1.1em; }
.katex { font-size: 1.05em; }
/* 인라인 KaTeX 가 1.85 line-height 본문에서 위로 솟아 보이지 않게 살짝 내림 */
p .katex, li .katex, td .katex, th .katex, .callout .katex,
.definition .katex, .study-map .katex, h2 .katex, h3 .katex, h4 .katex,
strong .katex {
  vertical-align: -0.02em;
}

/* 진짜 긴 유도용 — 이 클래스를 추가로 붙이면 가로 스크롤 허용 */
.formula.wide,
.formula.scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.formula.wide .katex-display,
.formula.scroll .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
}

/* 인라인 KaTeX 가 줄 안에서 베이스라인 맞게 */
.katex { vertical-align: baseline; }
.frac {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0 4px;
}
.frac .num {
  display: block;
  border-bottom: 1.5px solid var(--ink);
  padding: 2px 8px;
}
.frac .den {
  display: block;
  padding: 2px 8px;
}

/* ─── 차트 래퍼 ─── */
.chart-wrap {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px;
  margin: 24px 0;
}
.chart-wrap .chart-title {
  text-align: center;
  font-weight: 700;
  font-size: var(--t-caption);
  margin-bottom: 12px;
  color: var(--blue);
  line-height: var(--lh-snug);
}
.chart-wrap svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.chart-caption {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  font-style: italic;
  line-height: var(--lh-snug);
}

/* ─── 단계 카드 ─── */
ol.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
ol.steps > li {
  counter-increment: step;
  padding: 14px 16px 14px 58px;
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: var(--t-body);
  line-height: var(--lh-snug);
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}

/* ─── 카드 그리드 ─── */
.cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px 0;
}
.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px 22px;
  line-height: var(--lh-snug);
}
.card h5 {
  font-family: 'Nanum Myeongjo', serif;
  font-size: var(--t-h4);
  margin: 0 0 4px;
  color: var(--accent);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.card .kor-sub {
  font-size: var(--t-label);
  color: var(--muted);
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
}
.card p {
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: var(--lh-snug);
}
.card ul {
  padding-left: 18px;
  margin: 10px 0 0;
  font-size: 14.5px;
}
.card li { margin-bottom: 6px; line-height: var(--lh-snug); }

/* ─── Pull quote ─── */
blockquote.pull {
  border: none;
  padding: 20px 0;
  margin: 32px 0;
  text-align: center;
  font-family: 'Nanum Myeongjo', serif;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  color: var(--accent);
  font-weight: 700;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

/* ─── 데이터 스트립 ─── */
.data-strip {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-caption);
  background: #fff;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  border-radius: 6px;
  margin: 12px 0;
  word-spacing: 3px;
  letter-spacing: 0.02em;
  overflow-x: auto;
  line-height: 1.6;
}
.arrow-note {
  color: var(--accent);
  font-weight: 700;
  margin: 12px 0;
  font-size: var(--t-caption);
}

/* ─── 다음 강의 링크 (각 강의 맨 끝) ─── */
.next-lecture {
  margin: 56px 0 20px;
}
.next-lecture a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.next-lecture a:hover {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.next-lecture .lec-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  color: var(--muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.next-lecture a:hover .lec-hint { color: #cfc8b0; }
.next-lecture .lec-title {
  font-family: 'Nanum Myeongjo', serif;
  font-size: var(--t-h4);
  font-weight: 800;
  display: block;
  line-height: 1.3;
}
.next-lecture .lec-arrow {
  font-size: 26px;
  font-weight: 700;
  flex-shrink: 0;
}
/* 마지막 강의(7강) 완주 버전 */
.next-lecture.final a {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.next-lecture.final a:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.next-lecture.final .lec-hint { color: #fbecea; }

/* ─── 에필로그 ─── */
.epilogue {
  margin-top: 80px;
  padding: 32px;
  background: var(--ink);
  color: #f5f1e4;
  border-radius: 12px;
  text-align: center;
}
.epilogue h2 {
  font-family: 'Nanum Myeongjo', serif;
  color: #fff;
  font-size: var(--t-h3);
  margin: 0 0 14px;
  line-height: var(--lh-tight);
}
.epilogue p {
  color: #cfc8b0;
  max-width: 540px;
  margin: 0 auto 12px;
  line-height: var(--lh-read);
}

/* ═══════════════ 하단 모바일 네비 ═══════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: rgba(253, 252, 248, 0.95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--rule);
  z-index: 95;
  align-items: center;
  justify-content: space-between;
}
.bottom-nav button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  border-radius: 8px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
}
.bottom-nav button:hover { background: var(--accent-soft); color: var(--accent); }
.bottom-nav button:disabled { opacity: 0.3; cursor: default; }
.bottom-nav .dots {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.12em;
}

/* ═══════════════ index.html (허브) ═══════════════ */
.hub-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 32px 100px;
}
.hub-hero {
  text-align: center;
  padding: 40px 0 60px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 52px;
}
.hub-hero .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.hub-hero h1 {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 800;
  font-size: 48px;
  line-height: var(--lh-tight);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.hub-hero .sub {
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: var(--lh-snug);
}
.hub-hero .progress-wrap {
  max-width: 420px;
  margin: 0 auto;
}
.hub-hero .progress-label {
  font-size: var(--t-label);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.hub-hero .progress-bar {
  height: 8px;
  background: #eee7d4;
  border-radius: 4px;
  overflow: hidden;
}
.hub-hero .progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #e67e4b);
  border-radius: 4px;
}

.lec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.lec-card {
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 26px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}
.lec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.07);
  border-color: var(--accent);
  text-decoration: none;
}
/* 모바일 터치 피드백 */
.lec-card:active {
  transform: translateY(0);
  background: #fafaf5;
}
@media (hover: none) {
  /* 터치 디바이스에서는 hover 효과가 stuck 되지 않도록 */
  .lec-card:hover { transform: none; box-shadow: none; border-color: var(--rule); }
}
.lec-card .lec-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 42px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}
.lec-card h3 {
  font-family: 'Nanum Myeongjo', serif;
  font-size: var(--t-h3);
  font-weight: 800;
  margin: 10px 0 4px;
  color: var(--ink);
  line-height: var(--lh-tight);
}
.lec-card h3::before { content: none; }
.lec-card .en-title {
  font-size: 13px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
  line-height: 1.55;
}
.lec-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.lec-card .tag {
  font-size: var(--t-label);
  padding: 4px 11px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 12px;
  font-weight: 600;
}
.lec-card .pdf-link {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--t-label);
  color: var(--muted);
  border-top: 1px dashed var(--rule);
  padding-top: 10px;
  width: 100%;
}
.lec-card .pdf-link:hover { color: var(--accent); text-decoration: underline; }

.hub-footer {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--muted);
}
.hub-footer .ft-block {
  margin: 22px 0;
}
.hub-footer .ft-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-label);
  letter-spacing: 0.25em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}
.hub-footer .ft-value {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
}
.hub-footer .ft-value-sm {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
}
.hub-footer .ft-value-sm a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.hub-footer .ft-value-sm a:hover {
  text-decoration: underline;
}
.hub-footer .ft-disclaimer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--rule);
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  /* 고아 단어 방지 (지원 브라우저에서) */
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.hub-footer .ft-disclaimer em {
  /* 고지 박스 안 em 은 너무 굵지 않게 — 전체 밸런스 */
  font-weight: 600;
}

/* ═══════════════ 반응형 · 태블릿 이하 ═══════════════ */
@media (max-width: 960px) {
  :root {
    /* 타입 스케일 · 태블릿 오버라이드 */
    --t-lead: 18px;
    --t-h3: 22px;
    --t-h2: 28px;
    --t-h1: 36px;
  }

  .layout {
    /* 모바일: 사이드바는 드로어로 숨김, main 이 전체 폭 사용 */
    padding-left: 0;
  }

  .topbar .hamburger { display: inline-flex; }

  .sidebar {
    /* fixed 유지, 드로어 모드 */
    width: 86%;
    max-width: 340px;
    transform: translateX(-100%);
    transition: transform 0.28s ease-out;
    z-index: 99;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 24px rgba(0,0,0,0.12);
  }

  main {
    padding: 36px 20px calc(60px + env(safe-area-inset-bottom, 0px));
    min-width: 0;
  }

  /* 구조적 간격만 조정 (폰트 사이즈는 변수가 처리) */
  .hero { margin-bottom: 44px; padding-bottom: 28px; }
  .hero h1 .small { font-size: 17px; }
  .hero .kicker { letter-spacing: 0.1em; margin-bottom: 12px; }

  section.chapter { margin-bottom: 64px; }
  .chap-sub { margin-bottom: 24px; }
  h3 { margin-top: 36px; margin-bottom: 12px; }
  h4 { margin-top: 26px; }

  .cards-2 { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 18px 20px; }

  .study-map .map-row { grid-template-columns: 1fr; }
  .mini-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mini-flow .arrow {
    min-height: 20px;
    transform: rotate(90deg);
  }
  .mini-flow .arrow.no-rotate {
    transform: none;
    font-size: 13px;
  }

  .callout { padding: 16px 20px; margin: 20px 0; }
  .analogy { padding: 18px 20px; margin: 20px 0; }
  .definition { padding: 18px 20px; margin: 22px 0; }

  ol.steps > li { padding: 13px 15px 13px 54px; }
  ol.steps > li::before { width: 30px; height: 30px; left: 11px; }

  .take-away { padding: 16px 20px; }

  .chart-wrap { padding: 16px 12px; margin: 22px 0; }

  .formula {
    padding: 14px 16px;
    font-size: 15.5px; /* 좁은 화면에서 약간 축소 */
    line-height: 1.65;
  }
  .formula.wide,
  .formula.scroll {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-strip { padding: 12px 14px; -webkit-overflow-scrolling: touch; }

  /* 표 — 모바일에서는 항상 가로 스크롤 가능 */
  table th { padding: 9px 10px; }
  table td { padding: 9px 10px; }
  .table-scroll { -webkit-overflow-scrolling: touch; }

  blockquote.pull { padding: 16px 0; margin: 28px 0; }

  .epilogue { padding: 26px 20px; margin-top: 56px; }

  /* ─── 메인 허브 ─── */
  .hub-main { padding: 36px 20px calc(60px + env(safe-area-inset-bottom, 0px)); }
  .hub-hero { padding: 24px 0 40px; margin-bottom: 36px; }
  .hub-hero h1 { font-size: 34px; }
  .hub-hero .progress-wrap { max-width: 100%; padding: 0 16px; }

  .lec-grid { grid-template-columns: 1fr; gap: 14px; }
  .lec-card { padding: 22px 20px 18px; border-radius: 12px; }
  .lec-card .lec-num { font-size: 34px; }

  .hub-footer { margin-top: 56px; padding-top: 28px; }
  .hub-footer .ft-value { font-size: 16px; }
  .hub-footer .ft-value-sm { font-size: 13px; }
  .hub-footer .ft-disclaimer {
    font-size: 12.5px;
    line-height: 1.85;
    padding: 22px 12px 0;
    margin-top: 24px;
  }
}

/* ═══════════════ 반응형 · iPhone급 소형 ═══════════════ */
/* iPhone 15 Pro는 393px, iPhone 15 Pro Max는 430px */
@media (max-width: 440px) {
  :root {
    --topbar-h: 52px;
    /* 타입 스케일 · 아이폰 오버라이드 */
    --t-h4: 19px;
    --t-h3: 22px;
    --t-h2: 26px;
    --t-h1: 32px;
  }

  .topbar {
    gap: 6px;
  }
  .topbar .brand {
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 좁은 화면에서는 사이트 이름 숨기고 강의 제목만 */
  .topbar .brand .dot,
  .topbar .brand .site-name { display: none; }
  .topbar .brand .current {
    font-size: 15px;
  }
  .topbar .hamburger { width: 36px; height: 36px; }
  .topbar .hamburger svg { width: 20px; height: 20px; }
  .topbar .nav-lec { gap: 10px; }
  .topbar .nav-lec a { min-width: 34px; height: 34px; padding: 0 8px; font-size: 13.5px; }

  main { padding: 28px 16px calc(48px + env(safe-area-inset-bottom, 0px)); }

  .hero { margin-bottom: 36px; padding-bottom: 24px; }
  .hero h1 .small { font-size: 16px; }

  section.chapter { margin-bottom: 56px; }

  .chart-wrap { padding: 14px 10px; }
  .callout { padding: 14px 16px; }
  .analogy { padding: 16px 16px; }
  .analogy::before { left: 14px; font-size: var(--t-label); }
  .definition { padding: 16px 18px; }

  blockquote.pull { padding: 14px 0; margin: 24px 0; }

  .epilogue { padding: 22px 18px; }

  /* 허브 */
  .hub-main { padding: 28px 16px calc(60px + env(safe-area-inset-bottom, 0px)); }
  .hub-hero h1 { font-size: 32px; }
  .lec-card { padding: 20px 18px 16px; }
  .lec-card .lec-num { font-size: 32px; }
}

/* ═══════════════ 초소형 (iPhone SE 등) ═══════════════ */
@media (max-width: 360px) {
  :root {
    /* 타입 스케일 · SE 오버라이드 */
    --t-caption: 13px;
    --t-body: 16px;
    --t-lead: 17px;
    --t-h4: 18px;
    --t-h3: 20px;
    --t-h2: 24px;
    --t-h1: 28px;
  }

  main { padding: 24px 14px calc(44px + env(safe-area-inset-bottom, 0px)); }
  .topbar .nav-lec { gap: 8px; }
  .topbar .nav-lec a { min-width: 32px; padding: 0 6px; font-size: 13px; }
  .hub-hero h1 { font-size: 28px; }
  .lec-card .lec-num { font-size: 30px; }
}

/* ═══════════════ 가로 모드 낮은 높이 대응 ═══════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar { padding-top: 12px; padding-bottom: 80px; }
  .hero { margin-bottom: 32px; padding-bottom: 20px; }
  section.chapter { margin-bottom: 40px; }
}

/* ═══════════════ 인쇄용 ═══════════════ */
@media print {
  .topbar, .sidebar, .reading-progress, .drawer-backdrop, .next-lecture { display: none !important; }
  .layout { display: block; padding-top: 0; padding-left: 0; }
  main { max-width: none; padding: 0; }
  section.chapter { page-break-inside: avoid; }
}