:root {
  --brand: #2255d8;
  --brand-strong: #163b9c;
  --brand-soft: #edf4ff;
  --ink: #14213d;
  --ink-soft: #4f5d78;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.86);
  --page: #f4f7fc;
  --line: #d9e2f0;
  --line-strong: #b9c7db;
  --success: #1f8f58;
  --success-soft: #edf9f2;
  --warning: #b37212;
  --warning-soft: #fff7e6;
  --shadow-sm: 0 12px 30px rgba(24, 49, 104, 0.08);
  --shadow-md: 0 22px 55px rgba(18, 43, 92, 0.12);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --content: 1120px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(34, 85, 216, 0.08), transparent 32%),
    radial-gradient(circle at left 20%, rgba(35, 195, 143, 0.08), transparent 28%),
    var(--page);
  font: 400 16px/1.75 "Aptos", "Segoe UI Variable", "Segoe UI", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-strong);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(34, 85, 216, 0.35);
  outline-offset: 3px;
}

::selection {
  background: rgba(34, 85, 216, 0.16);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 400;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 1rem;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 220;
  height: 4px;
  background: linear-gradient(90deg, #2c6df6 var(--progress, 0%), transparent 0);
  pointer-events: none;
}

.back-to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 120;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  padding: 0.8rem 1rem;
  font: inherit;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

header {
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(12px);
  background: linear-gradient(90deg, rgba(34, 85, 216, 0.96), rgba(23, 63, 160, 0.94));
  box-shadow: 0 8px 28px rgba(13, 37, 84, 0.16);
}

nav {
  max-width: 1240px;
  margin: 0 auto;
  min-height: 72px;
  padding: 0.75rem 1.1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.35rem;
}

nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.52rem 0.8rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

nav a:hover,
nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.16);
}

.nav-logo {
  margin-right: auto;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff !important;
}

.nav-sep {
  color: rgba(255, 255, 255, 0.45);
  padding: 0 0.2rem;
  user-select: none;
}

main {
  max-width: var(--content);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4rem;
}

.page-article main {
  max-width: 1240px;
}

.page-404 main {
  max-width: 1020px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.breadcrumb a {
  color: var(--brand);
}

.breadcrumb .sep {
  color: #94a3b8;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.04em;
  margin-bottom: 0.65rem;
}

h2 {
  margin-top: 2.4rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  border-bottom: 1px solid rgba(151, 169, 196, 0.4);
}

h3 {
  font-size: 1.05rem;
  color: var(--brand-strong);
  margin-bottom: 0.45rem;
}

h4 {
  font-size: 0.98rem;
  margin-bottom: 0.3rem;
}

p {
  margin: 0.7rem 0;
  color: var(--ink-soft);
}

strong {
  color: var(--ink);
}

ul, ol {
  padding-left: 1.35rem;
  margin: 0.75rem 0;
}

li {
  margin: 0.35rem 0;
}

pre {
  margin: 0.9rem 0 0;
  padding: 0.95rem 1rem;
  overflow-x: auto;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink);
  font: 600 0.92rem/1.65 "Consolas", "Cascadia Mono", monospace;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 3rem 2rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 36%),
    linear-gradient(135deg, rgba(236, 245, 255, 0.95), rgba(240, 255, 247, 0.98));
  border: 1px solid rgba(191, 208, 234, 0.8);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -35% auto;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: rgba(34, 85, 216, 0.08);
  filter: blur(8px);
}

.hero h1 {
  color: var(--brand-strong);
}

.hero .subtitle {
  max-width: 740px;
  margin: 0 auto;
  font-size: 1.06rem;
}

.lang-switcher {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(161, 180, 210, 0.55);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.93rem;
  box-shadow: 0 8px 22px rgba(24, 49, 104, 0.06);
}

.lang-btn:hover,
.lang-btn.current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.hero-stats,
.section-overview-grid,
.summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
}

.hero-stats {
  margin-top: 1.6rem;
}

.stat-card {
  display: grid;
  gap: 0.12rem;
  padding: 0.95rem 1rem;
  border-radius: 20px;
  background: var(--surface-soft);
  border: 1px solid rgba(196, 210, 230, 0.72);
  box-shadow: 0 14px 28px rgba(24, 49, 104, 0.05);
}

.stat-value {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.study-path,
.priority-note,
.section-overview,
.utility-card,
.concept-box,
.example,
.tip,
.subject-card,
.topic-card,
.article-meta,
.page-actions,
.error-panel {
  border-radius: var(--radius-md);
  border: 1px solid rgba(198, 211, 231, 0.76);
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
}

.study-path,
.priority-note,
.section-overview,
.utility-card,
.article-meta,
.page-actions,
.error-panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
}

.study-path strong,
.priority-note strong,
.section-overview strong,
.utility-title {
  display: inline-block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
}

.priority-note {
  display: inline-flex;
  justify-content: center;
  padding: 0.72rem 0.95rem;
  background: rgba(20, 33, 61, 0.04);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.article-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(34, 85, 216, 0.08);
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.page-action-button,
.page-action-link,
.utility-link,
.anchor-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(161, 180, 210, 0.7);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.page-action-button:hover,
.page-action-link:hover,
.utility-link:hover,
.anchor-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.subject-grid,
.topic-grid,
.continue-grid {
  display: grid;
  gap: 1rem;
}

.subject-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 1.5rem 0 0;
}

.topic-grid,
.continue-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 1.25rem 0 0;
}

.subject-card,
.topic-card,
.continue-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem;
  color: var(--ink);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.subject-card:hover,
.topic-card:hover,
.continue-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 85, 216, 0.5);
  box-shadow: 0 18px 34px rgba(24, 49, 104, 0.12);
}

.card-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(34, 85, 216, 0.12), rgba(35, 195, 143, 0.14));
  font-size: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(34, 85, 216, 0.08);
}

.card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(34, 85, 216, 0.12);
  color: var(--brand-strong);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.subject-card h2,
.topic-card h3,
.continue-card strong {
  margin: 0;
  padding: 0;
  border: 0;
}

.subject-card p,
.topic-card p,
.continue-card span {
  margin: 0;
  font-size: 0.93rem;
}

.section-overview {
  display: grid;
  gap: 0.9rem;
}

.section-overview-heading p {
  margin: 0.2rem 0 0;
}

.quick-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.quick-jump strong {
  margin-right: 0.15rem;
}

.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.2rem;
  align-items: start;
  margin-top: 1rem;
}

.article-main > *:first-child {
  margin-top: 0;
}

.article-sidebar {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 1rem;
}

.utility-card {
  display: grid;
  gap: 0.9rem;
}

.utility-title {
  font-size: 1rem;
}

.summary-list {
  grid-template-columns: 1fr;
}

.summary-list .stat-card {
  background: rgba(245, 248, 255, 0.92);
}

.toc-list {
  display: grid;
  gap: 0.55rem;
}

.toc-link {
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.toc-link:hover {
  color: var(--brand);
}

.concept-box,
.example,
.tip {
  padding: 1.1rem 1.2rem;
  margin: 1.15rem 0;
}

.concept-box {
  background: linear-gradient(180deg, rgba(237, 244, 255, 0.96), rgba(245, 249, 255, 0.92));
  border-left: 4px solid var(--brand);
}

.example {
  background: linear-gradient(180deg, rgba(238, 250, 244, 0.98), rgba(244, 253, 248, 0.94));
  border-left: 4px solid var(--success);
}

.tip {
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.98), rgba(255, 251, 241, 0.94));
  border-left: 4px solid var(--warning);
}

.formula {
  margin: 1rem 0;
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(198, 211, 231, 0.9);
  font: 600 1rem/1.6 "Consolas", "Cascadia Mono", monospace;
}

.table-wrap {
  overflow-x: auto;
  margin: 1rem 0 0;
  -webkit-overflow-scrolling: touch;
}

.table-wrap::-webkit-scrollbar,
.formula::-webkit-scrollbar,
pre::-webkit-scrollbar {
  height: 10px;
}

.table-wrap::-webkit-scrollbar-thumb,
.formula::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
  background: rgba(120, 142, 177, 0.6);
  border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-track,
.formula::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
  background: rgba(197, 211, 232, 0.22);
}

table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-size: 0.93rem;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 16px;
  overflow: hidden;
}

th,
td {
  padding: 0.75rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

td {
  border-bottom: 1px solid rgba(210, 220, 236, 0.8);
}

tr:nth-child(even) td {
  background: rgba(244, 247, 252, 0.9);
}

/* ── 첫인상 설득력 컴포넌트 ────────────────────────────────── */

/* 섹션 훅 — "왜 이 과목인가" 즉시 납득 한 문장 */
.section-hook {
  margin: 0.75rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--brand);
  background: linear-gradient(135deg, rgba(34, 85, 216, 0.06), rgba(34, 85, 216, 0.02));
  border: 1px solid rgba(34, 85, 216, 0.14);
  border-left: 4px solid var(--brand);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}
.section-hook strong { color: var(--brand-strong); }

/* 입문 가이드 — "처음이라면 여기서 시작" */
.entry-point {
  margin: 1.25rem 0;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(26, 127, 90, 0.07), rgba(26, 127, 90, 0.03));
  border: 1.5px solid rgba(26, 127, 90, 0.28);
}
.entry-point-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 0.55rem;
}
.entry-point-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}
.entry-point-path a {
  color: var(--brand-strong);
  font-weight: 700;
  text-decoration: none;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
  background: rgba(34, 85, 216, 0.08);
  border: 1px solid rgba(34, 85, 216, 0.2);
  white-space: nowrap;
}
.entry-point-path a:hover { background: rgba(34, 85, 216, 0.15); }
.entry-point-path .ep-arrow { color: var(--muted); font-weight: 400; }
.entry-point-path .ep-time {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 400;
}
.entry-point-path + .entry-point-path { margin-top: 0.42rem; }
.ep-row-label {
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .section-hook {
    background: linear-gradient(135deg, rgba(91, 143, 238, 0.1), rgba(91, 143, 238, 0.04));
    border-color: rgba(91, 143, 238, 0.2);
    border-left-color: var(--brand-strong);
  }
  .entry-point {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.09), rgba(52, 211, 153, 0.04));
    border-color: rgba(52, 211, 153, 0.25);
  }
}

/* ── 콘텐츠 깊이 강화 컴포넌트 ───────────────────────────── */

/* 왜 배우는가? 도입 박스 */
.why-box {
  padding: 1.1rem 1.2rem;
  margin: 1.15rem 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(198, 211, 231, 0.76);
  border-left: 4px solid #0d9d8e;
  background: linear-gradient(180deg, rgba(13, 157, 142, 0.08), rgba(13, 157, 142, 0.04));
  box-shadow: var(--shadow-sm);
}

.why-box .why-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d9d8e;
  margin-bottom: 0.5rem;
}

/* 흔한 오개념 박스 */
.misconception {
  padding: 1.1rem 1.2rem;
  margin: 1.15rem 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(198, 211, 231, 0.76);
  border-left: 4px solid #c0294a;
  background: linear-gradient(180deg, rgba(192, 41, 74, 0.07), rgba(192, 41, 74, 0.03));
  box-shadow: var(--shadow-sm);
}

.misconception .misc-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c0294a;
  margin-bottom: 0.5rem;
}

/* 핵심 30초 요약 (TL;DR) */
.tldr {
  padding: 1.2rem 1.4rem;
  margin: 1.2rem 0 1.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(34, 85, 216, 0.32);
  background: linear-gradient(135deg, rgba(34, 85, 216, 0.09), rgba(35, 195, 143, 0.07));
  box-shadow: var(--shadow-sm);
}

.tldr .tldr-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-strong);
  margin-bottom: 0.55rem;
}

.tldr ul,
.tldr ol {
  margin: 0.4rem 0 0;
}

/* 시험 출제 포인트 인라인 배지 */
.exam-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(179, 114, 18, 0.14);
  color: var(--warning);
  font-size: 0.75rem;
  font-weight: 800;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* ── 히어로 첫인상 강화 컴포넌트 ─────────────────────────── */

/* 히어로 상단 브랜드 킥커 */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: rgba(34, 85, 216, 0.1);
  color: var(--brand-strong);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
}

/* 신뢰 배지 3종 */
.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.85rem 0 0.25rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(31, 143, 88, 0.1);
  border: 1px solid rgba(31, 143, 88, 0.35);
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 핵심 개념 예고편 순환 텍스트 */
.hero-rotate-wrap {
  position: relative;
  height: 1.9em;
  overflow: hidden;
  margin: 0.55rem auto 0;
  max-width: 560px;
}

.hero-rotate-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  font-style: italic;
  animation: heroRotate 16s infinite;
  pointer-events: none;
  transform: translateY(6px);
}

.hero-rotate-item:nth-child(1) { animation-delay: 0s; }
.hero-rotate-item:nth-child(2) { animation-delay: 4s; }
.hero-rotate-item:nth-child(3) { animation-delay: 8s; }
.hero-rotate-item:nth-child(4) { animation-delay: 12s; }

@keyframes heroRotate {
  0%   { opacity: 0; transform: translateY(6px); }
  6%   { opacity: 1; transform: translateY(0); }
  19%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotate-item { animation: none; }
  .hero-rotate-item:first-child { opacity: 1; transform: none; }
}

@media (prefers-color-scheme: dark) {
  .hero-kicker {
    background: rgba(91, 143, 238, 0.15);
    color: var(--brand-strong);
  }
  .trust-badge {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--success);
  }
  .hero-rotate-item {
    color: var(--brand-strong);
  }
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  .why-box {
    background: linear-gradient(180deg, rgba(13, 157, 142, 0.15), rgba(13, 157, 142, 0.07));
    border-color: rgba(13, 157, 142, 0.3);
  }

  .misconception {
    background: linear-gradient(180deg, rgba(192, 41, 74, 0.16), rgba(192, 41, 74, 0.07));
    border-color: rgba(192, 41, 74, 0.3);
  }

  .tldr {
    background: linear-gradient(135deg, rgba(34, 85, 216, 0.18), rgba(35, 195, 143, 0.12));
    border-color: rgba(91, 143, 238, 0.35);
  }
}

/* ── 학습 효과 장치 컴포넌트 ────────────────────────────── */

/* 1. 인터리브드 미니 퀴즈 ✏️ */
.quiz-check {
  margin: 1.6rem 0;
  padding: 1.1rem 1.25rem 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.07), rgba(88, 101, 242, 0.02));
  border: 1.5px solid rgba(88, 101, 242, 0.25);
  border-left: 4px solid #5865f2;
}
.quiz-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5865f2;
  margin-bottom: 0.6rem;
}
.quiz-check > p { margin: 0 0 0.75rem; font-weight: 500; }
.quiz-check details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5865f2;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: rgba(88, 101, 242, 0.09);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.quiz-check details summary::-webkit-details-marker { display: none; }
.quiz-check details summary::before {
  content: "▶";
  font-size: 0.6rem;
  transition: transform 0.18s;
  display: inline-block;
}
.quiz-check details[open] summary::before { transform: rotate(90deg); }
.quiz-check .answer-reveal {
  margin-top: 0.55rem;
  padding: 0.7rem 0.9rem;
  background: rgba(88, 101, 242, 0.06);
  border-radius: 6px;
  font-size: 0.91rem;
}

/* memory-tip — 핵심 암기법 박스 */
.memory-tip {
  margin: 1.3rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(200, 112, 0, 0.07), rgba(200, 112, 0, 0.03));
  border: 1px solid rgba(200, 112, 0, 0.2);
  border-left: 4px solid var(--warning);
}
.memory-tip-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warning);
  margin-bottom: 0.5rem;
}
.memory-tip p, .memory-tip ul, .memory-tip ol {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
}
.memory-tip strong { color: var(--warning); }
.memory-tip code {
  background: rgba(200, 112, 0, 0.1);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-size: 0.88em;
  font-family: inherit;
  font-weight: 700;
  color: var(--warning);
}

@media (prefers-color-scheme: dark) {
  .memory-tip {
    background: linear-gradient(135deg, rgba(200, 112, 0, 0.12), rgba(200, 112, 0, 0.05));
    border-color: rgba(200, 112, 0, 0.3);
  }
}

/* ── 차별화 컴포넌트 (루프23) ── */

/* 개념의 탄생 — 인디고 보라 */
.concept-origin {
  margin: 1.3rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.07), rgba(109, 40, 217, 0.025));
  border: 1px solid rgba(109, 40, 217, 0.18);
  border-left: 4px solid #6d28d9;
}
.concept-origin-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6d28d9;
  margin-bottom: 0.5rem;
}
.concept-origin p, .concept-origin ul {
  margin: 0.25rem 0 0;
  font-size: 0.94rem;
  line-height: 1.65;
}

/* 수능 출제 포인트 — 크림즌 레드 */
.exam-relevance {
  margin: 1.3rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.07), rgba(220, 38, 38, 0.025));
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-left: 4px solid #dc2626;
}
.exam-relevance-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #dc2626;
  margin-bottom: 0.5rem;
}
.exam-relevance p, .exam-relevance ul {
  margin: 0.25rem 0 0;
  font-size: 0.94rem;
  line-height: 1.6;
}
.exam-relevance ul { padding-left: 1.4rem; }
.exam-relevance li { margin-bottom: 0.3rem; }
.exam-relevance strong { color: #dc2626; }

/* 선행 학습 알림 — 사이안/틸 */
.prereq-box {
  margin: 1.3rem 0;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.07), rgba(8, 145, 178, 0.025));
  border: 1px solid rgba(8, 145, 178, 0.22);
  border-left: 4px solid #0891b2;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.prereq-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.prereq-content { flex: 1; min-width: 0; }
.prereq-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0891b2;
  margin-bottom: 0.4rem;
}
.prereq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  align-items: center;
  font-size: 0.9rem;
}
.prereq-links a {
  font-weight: 600;
  color: #0891b2;
  background: rgba(8, 145, 178, 0.09);
  border: 1px solid rgba(8, 145, 178, 0.25);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  text-decoration: none;
  transition: background 0.15s;
}
.prereq-links a:hover { background: rgba(8, 145, 178, 0.18); }
.prereq-links .prereq-sep { color: var(--muted); }
.prereq-text {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink);
}

/* 흔한 실수 분석 — 딥 로즈/마젠타 */
.wrong-way {
  margin: 1.3rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(190, 24, 93, 0.07), rgba(190, 24, 93, 0.025));
  border: 1px solid rgba(190, 24, 93, 0.18);
  border-left: 4px solid #be185d;
}
.wrong-way-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #be185d;
  margin-bottom: 0.5rem;
}
.wrong-way .ww-wrong {
  display: block;
  margin: 0.45rem 0 0.25rem;
  padding: 0.45rem 0.75rem;
  background: rgba(190, 24, 93, 0.06);
  border-radius: 5px;
  font-size: 0.91rem;
  line-height: 1.5;
  color: var(--ink);
}
.wrong-way .ww-wrong::before {
  content: '✗ ';
  color: #be185d;
  font-weight: 800;
}
.wrong-way .ww-correct {
  display: block;
  margin: 0.25rem 0;
  padding: 0.45rem 0.75rem;
  background: rgba(26, 127, 90, 0.07);
  border-radius: 5px;
  font-size: 0.91rem;
  line-height: 1.5;
  color: var(--ink);
}
.wrong-way .ww-correct::before {
  content: '✓ ';
  color: var(--success);
  font-weight: 800;
}
.wrong-way .ww-why {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}

@media (prefers-color-scheme: dark) {
  .concept-origin {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.13), rgba(109, 40, 217, 0.05));
    border-color: rgba(139, 92, 246, 0.28);
    border-left-color: #8b5cf6;
  }
  .concept-origin-label { color: #a78bfa; }

  .exam-relevance {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.13), rgba(220, 38, 38, 0.05));
    border-color: rgba(252, 165, 165, 0.22);
    border-left-color: #ef4444;
  }
  .exam-relevance-label { color: #f87171; }
  .exam-relevance strong { color: #f87171; }

  .prereq-box {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.11), rgba(8, 145, 178, 0.04));
    border-color: rgba(103, 232, 249, 0.2);
    border-left-color: #22d3ee;
  }
  .prereq-label { color: #67e8f9; }
  .prereq-links a {
    color: #67e8f9;
    background: rgba(8, 145, 178, 0.12);
    border-color: rgba(8, 145, 178, 0.3);
  }

  .wrong-way {
    background: linear-gradient(135deg, rgba(190, 24, 93, 0.13), rgba(190, 24, 93, 0.05));
    border-color: rgba(244, 114, 182, 0.22);
    border-left-color: #f472b6;
  }
  .wrong-way-label { color: #f472b6; }
  .wrong-way .ww-wrong::before { color: #f472b6; }
}

@media (max-width: 720px) {
  .prereq-box { flex-direction: column; gap: 0.4rem; }
}

/* ── 리텐션 훅 컴포넌트 (루프24) ── */

/* 개념 연결 다리 — 딥 틸/제이드 */
.concept-bridge {
  margin: 1.8rem 0 1.3rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.07), rgba(15, 118, 110, 0.02));
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-left: 4px solid #0f766e;
}
.concept-bridge-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0f766e;
  margin-bottom: 0.55rem;
}
.concept-bridge-q {
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 0.5rem;
}
.concept-bridge-hint {
  font-size: 0.91rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 0.9rem;
}
.concept-bridge-next {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.09);
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 8px;
  padding: 0.38rem 0.9rem;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.concept-bridge-next::after { content: ' →'; }
.concept-bridge-next:hover {
  background: rgba(15, 118, 110, 0.16);
  transform: translateX(3px);
}

/* 스킬 해금 카드 — 골드/앰버 */
.skill-unlock {
  margin: 1.5rem 0;
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.09), rgba(202, 138, 4, 0.03));
  border: 1px solid rgba(202, 138, 4, 0.22);
  border-left: 4px solid #ca8a04;
}
.skill-unlock-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 0.5rem;
}
.skill-unlock-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0.5rem;
}
.skill-unlock-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  background: rgba(202, 138, 4, 0.08);
  border: 1px solid rgba(202, 138, 4, 0.24);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.skill-unlock-item::before { content: '🔓'; font-size: 0.82rem; }
.skill-unlock-item a {
  color: #92400e;
  text-decoration: none;
  font-weight: 700;
}
.skill-unlock-item a:hover { text-decoration: underline; }
.skill-unlock-desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
  line-height: 1.58;
}

@media (prefers-color-scheme: dark) {
  .concept-bridge {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.13), rgba(15, 118, 110, 0.05));
    border-color: rgba(45, 212, 191, 0.22);
    border-left-color: #14b8a6;
  }
  .concept-bridge-label { color: #2dd4bf; }
  .concept-bridge-next {
    color: #2dd4bf;
    background: rgba(15, 118, 110, 0.12);
    border-color: rgba(45, 212, 191, 0.28);
  }
  .concept-bridge-next:hover { background: rgba(15, 118, 110, 0.2); }

  .skill-unlock {
    background: linear-gradient(135deg, rgba(202, 138, 4, 0.13), rgba(202, 138, 4, 0.05));
    border-color: rgba(251, 191, 36, 0.22);
    border-left-color: #fbbf24;
  }
  .skill-unlock-label { color: #fcd34d; }
  .skill-unlock-item {
    background: rgba(202, 138, 4, 0.11);
    border-color: rgba(251, 191, 36, 0.22);
  }
  .skill-unlock-item a { color: #fbbf24; }
}

@media (max-width: 720px) {
  .skill-unlock-items { gap: 0.35rem; }
  .concept-bridge-next { font-size: 0.86rem; }
}

/* 2. 난이도 레벨 배지 */
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
  margin-right: 0.35rem;
  white-space: nowrap;
}
.level-badge.level-1 {
  background: rgba(26, 127, 90, 0.11);
  color: var(--success);
  border: 1px solid rgba(26, 127, 90, 0.28);
}
.level-badge.level-2 {
  background: rgba(34, 85, 216, 0.09);
  color: var(--brand);
  border: 1px solid rgba(34, 85, 216, 0.22);
}
.level-badge.level-3 {
  background: rgba(200, 112, 0, 0.1);
  color: var(--warning);
  border: 1px solid rgba(200, 112, 0, 0.28);
}

/* 3. 단계별 풀이 — 4박자 플로우 */
.step-solution {
  margin: 1.4rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid rgba(34, 85, 216, 0.13);
}
.step-solution-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-strong);
  margin-bottom: 0.85rem;
}
.step-solution ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step-counter;
  position: relative;
}
.step-solution ol::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 24px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand) 60%, rgba(34, 85, 216, 0.0));
  border-radius: 2px;
}
.step-solution ol li {
  counter-increment: step-counter;
  padding: 0 0 1rem 2.5rem;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.55;
}
.step-solution ol li:last-child { padding-bottom: 0; }
.step-solution ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-solution ol li strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--brand-strong);
  margin-bottom: 0.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* 4. 운율·직관 암기팁 */
.memory-tip {
  margin: 1rem 0;
  padding: 0.7rem 1rem 0.7rem 0.95rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(200, 112, 0, 0.08), rgba(200, 112, 0, 0.03));
  border-left: 3px solid var(--warning);
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.memory-tip::before {
  content: "💡";
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  line-height: 1.5;
}
.memory-tip p,
.memory-tip span {
  margin: 0;
  font-size: 0.89rem;
  font-weight: 600;
  line-height: 1.55;
}
.memory-tip strong { color: var(--warning); }
.memory-tip-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warning);
  display: block;
  margin-bottom: 0.2rem;
}

/* 5. 학습 목표 체크리스트 */
.learning-goal {
  margin: 0 0 1.8rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid rgba(34, 85, 216, 0.16);
  border-top: 3px solid var(--brand);
  background: rgba(34, 85, 216, 0.03);
}
.learning-goal-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-strong);
  margin-bottom: 0.6rem;
}
.learning-goal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.learning-goal ul li {
  padding: 0.2rem 0 0.2rem 1.75rem;
  position: relative;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
}
.learning-goal ul li::before {
  content: "□";
  position: absolute;
  left: 0.1rem;
  top: 0.2rem;
  font-size: 0.95rem;
  color: var(--brand);
  line-height: 1.5;
  font-weight: 400;
}

/* Dark mode — 학습 효과 장치 */
@media (prefers-color-scheme: dark) {
  .quiz-check {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.13), rgba(88, 101, 242, 0.05));
    border-color: rgba(123, 137, 245, 0.3);
    border-left-color: #7b89f5;
  }
  .quiz-check-label { color: #7b89f5; }
  .quiz-check details summary { color: #7b89f5; background: rgba(88, 101, 242, 0.14); }
  .quiz-check .answer-reveal { background: rgba(88, 101, 242, 0.1); }
  .step-solution { border-color: rgba(91, 143, 238, 0.18); }
  .memory-tip {
    background: linear-gradient(135deg, rgba(200, 112, 0, 0.13), rgba(200, 112, 0, 0.05));
  }
  .learning-goal {
    background: rgba(91, 143, 238, 0.05);
    border-color: rgba(91, 143, 238, 0.22);
    border-top-color: var(--brand-strong);
  }
}

/* ── 신뢰 신호 컴포넌트 ─────────────────────────────────── */

/* 1. 성취기준 코드 배지 */
.curriculum-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.07rem 0.38rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  font-family: "Consolas", "SF Mono", "Fira Code", "Courier New", monospace;
  letter-spacing: 0.01em;
  background: rgba(79, 93, 120, 0.08);
  color: var(--ink-soft);
  border: 1px solid rgba(79, 93, 120, 0.18);
  vertical-align: middle;
  white-space: nowrap;
  margin-left: 0.38rem;
}

/* 2. 수능 출제 연도 배지 */
.exam-year-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.52rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(34, 85, 216, 0.09);
  color: var(--brand-strong);
  border: 1px solid rgba(34, 85, 216, 0.2);
  vertical-align: middle;
  white-space: nowrap;
}

/* 3. 신뢰 신호 바 */
.trust-signal-bar {
  margin: 1.8rem 0 0;
  padding: 0.7rem 1.1rem;
  border-radius: 9px;
  background: rgba(34, 85, 216, 0.03);
  border: 1px solid rgba(34, 85, 216, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.trust-signal-bar .ts-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.trust-signal-bar .ts-item a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust-signal-bar .ts-div {
  width: 1px;
  height: 13px;
  background: var(--line-strong);
  flex-shrink: 0;
}
.trust-signal-bar .ts-curriculum {
  font-weight: 700;
  color: var(--brand-strong);
  letter-spacing: 0.01em;
}

/* Dark mode — 신뢰 신호 */
@media (prefers-color-scheme: dark) {
  .curriculum-badge {
    background: rgba(140, 155, 185, 0.1);
    border-color: rgba(140, 155, 185, 0.2);
    color: rgba(175, 190, 215, 0.75);
  }
  .exam-year-badge {
    background: rgba(91, 143, 238, 0.13);
    border-color: rgba(91, 143, 238, 0.24);
  }
  .trust-signal-bar {
    background: rgba(91, 143, 238, 0.04);
    border-color: rgba(91, 143, 238, 0.12);
  }
  .trust-signal-bar .ts-div { background: rgba(91, 143, 238, 0.25); }
}

/* ── 차별화 가치 컴포넌트 ─────────────────────────────────── */

/* 1. 개념 여정 바 — 지식 연결 네비게이션 */
.concept-journey {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 1.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  background: rgba(51, 65, 85, 0.04);
  border: 1px solid rgba(51, 65, 85, 0.11);
  font-size: 0.75rem;
  overflow: hidden;
}
.cj-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-right: 0.7rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.cj-node {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}
.cj-node.cj-current {
  background: rgba(34, 85, 216, 0.1);
  color: var(--brand-strong);
  font-weight: 800;
  border: 1px solid rgba(34, 85, 216, 0.17);
}
.cj-node a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cj-arrow {
  color: #cbd5e1;
  font-size: 0.6rem;
  margin: 0 0.05rem;
  flex-shrink: 0;
}

/* 2. 시험 함정 경고 박스 */
.exam-trap {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: rgba(185, 28, 28, 0.05);
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-left: 4px solid #b91c1c;
}
.exam-trap-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b91c1c;
  margin-bottom: 0.55rem;
}
.exam-trap ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.exam-trap ul li {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem 0.3rem 1.5rem;
  position: relative;
  line-height: 1.5;
  background: rgba(185, 28, 28, 0.04);
  border-radius: 5px;
}
.exam-trap ul li::before {
  content: "✗";
  position: absolute;
  left: 0.45rem;
  top: 0.3rem;
  color: #b91c1c;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.5;
}
.exam-trap ul li strong { color: #b91c1c; }

/* 3. 풀이법 비교 박스 */
.compare-method {
  margin: 1.5rem 0;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.compare-method-header {
  padding: 0.5rem 1rem;
  background: rgba(34, 85, 216, 0.04);
  border-bottom: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-strong);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.compare-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cm-col {
  padding: 0.85rem 1rem;
}
.cm-col + .cm-col { border-left: 1px solid var(--line); }
.cm-col-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  padding-bottom: 0.38rem;
  border-bottom: 2px solid currentColor;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.cm-col:first-child .cm-col-label { color: var(--brand); border-bottom-color: var(--brand); }
.cm-col:last-child .cm-col-label { color: var(--success); border-bottom-color: var(--success); }
.cm-col p { margin: 0; font-size: 0.86rem; line-height: 1.55; }
.cm-col ul { list-style: none; padding: 0; margin: 0; font-size: 0.86rem; }
.cm-col ul li { padding: 0.18rem 0 0.18rem 1rem; position: relative; line-height: 1.5; }
.cm-col ul li::before { content: "·"; position: absolute; left: 0.15rem; font-weight: 800; color: var(--ink-soft); }
.compare-when {
  padding: 0.55rem 1rem;
  background: rgba(34, 85, 216, 0.03);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.5;
}
.compare-when strong { color: var(--brand-strong); }

/* 4. 직관 설명 박스 (기호 없이) */
.intuition-box {
  margin: 1.2rem 0;
  padding: 0.85rem 1.1rem;
  border-radius: 9px;
  background: rgba(109, 40, 217, 0.04);
  border: 1px solid rgba(109, 40, 217, 0.13);
  border-left: 3px solid #7c3aed;
}
.intuition-box-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7c3aed;
  margin-bottom: 0.4rem;
}
.intuition-box p, .intuition-box span {
  margin: 0;
  font-size: 0.89rem;
  font-weight: 500;
  line-height: 1.62;
  color: var(--ink);
}
.intuition-box strong { color: #6d28d9; }

/* 5. 흔한 실수 패턴 박스 */
.common-mistake {
  margin: 1.4rem 0;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: rgba(194, 65, 12, 0.05);
  border: 1px solid rgba(194, 65, 12, 0.17);
  border-left: 4px solid #c2410c;
}
.common-mistake-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c2410c;
  margin-bottom: 0.55rem;
}
.common-mistake ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: mistake-counter;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.common-mistake ol li {
  counter-increment: mistake-counter;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.38rem 0.75rem 0.38rem 2rem;
  position: relative;
  line-height: 1.5;
  background: rgba(194, 65, 12, 0.04);
  border-radius: 5px;
}
.common-mistake ol li::before {
  content: counter(mistake-counter);
  position: absolute;
  left: 0.45rem;
  top: 0.38rem;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #c2410c;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.common-mistake .mistake-fix {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.77rem;
  color: var(--success);
  font-weight: 600;
}
.common-mistake .mistake-fix::before { content: "→ "; }

/* 6. 비유 이해 박스 */
.analogy-box {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: rgba(202, 138, 4, 0.05);
  border: 1px solid rgba(202, 138, 4, 0.18);
  border-left: 4px solid #d97706;
}
.analogy-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 0.55rem;
}
.analogy-title {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.analogy-body {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.65;
  color: var(--ink);
}
.analogy-body strong { color: #b45309; }

/* 7. 원리 발견 경로 박스 */
.insight-path {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: rgba(14, 116, 144, 0.04);
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-left: 4px solid #0e7490;
}
.insight-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0e7490;
  margin-bottom: 0.5rem;
}
.insight-title {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.insight-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: insight-counter;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.insight-steps li {
  counter-increment: insight-counter;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.38rem 0.75rem 0.38rem 2.1rem;
  position: relative;
  line-height: 1.55;
  background: rgba(14, 116, 144, 0.04);
  border-radius: 5px;
}
.insight-steps li::before {
  content: counter(insight-counter);
  position: absolute;
  left: 0.45rem;
  top: 0.38rem;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #0e7490;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.insight-steps li strong { color: #0e7490; }

/* 모바일 — 비교 박스 세로 정렬 */
@media (max-width: 720px) {
  .compare-method-grid { grid-template-columns: 1fr; }
  .cm-col + .cm-col { border-left: none; border-top: 1px solid var(--line); }
}

/* Dark mode — 차별화 가치 컴포넌트 */
@media (prefers-color-scheme: dark) {
  .concept-journey {
    background: rgba(51, 65, 85, 0.12);
    border-color: rgba(100, 116, 139, 0.18);
  }
  .cj-node.cj-current {
    background: rgba(91, 143, 238, 0.14);
    border-color: rgba(91, 143, 238, 0.22);
  }
  .exam-trap {
    background: rgba(185, 28, 28, 0.1);
    border-color: rgba(239, 68, 68, 0.22);
    border-left-color: #ef4444;
  }
  .exam-trap-label { color: #f87171; }
  .exam-trap ul li { background: rgba(185, 28, 28, 0.08); }
  .exam-trap ul li::before, .exam-trap ul li strong { color: #f87171; }
  .compare-method { border-color: rgba(91, 143, 238, 0.18); }
  .compare-method-header { background: rgba(91, 143, 238, 0.07); border-bottom-color: rgba(91, 143, 238, 0.14); }
  .cm-col + .cm-col { border-left-color: rgba(91, 143, 238, 0.14); }
  .compare-when { background: rgba(91, 143, 238, 0.04); border-top-color: rgba(91, 143, 238, 0.14); }
  .intuition-box {
    background: rgba(109, 40, 217, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    border-left-color: #8b5cf6;
  }
  .intuition-box-label { color: #a78bfa; }
  .intuition-box strong { color: #c4b5fd; }
  .common-mistake {
    background: rgba(194, 65, 12, 0.1);
    border-color: rgba(234, 88, 12, 0.2);
    border-left-color: #ea580c;
  }
  .common-mistake-label { color: #fb923c; }
  .common-mistake ol li { background: rgba(194, 65, 12, 0.08); }
  .common-mistake ol li::before { background: #ea580c; }
  .analogy-box {
    background: rgba(202, 138, 4, 0.09);
    border-color: rgba(251, 191, 36, 0.22);
    border-left-color: #f59e0b;
  }
  .analogy-label { color: #fbbf24; }
  .analogy-body strong { color: #fcd34d; }
  .insight-path {
    background: rgba(14, 116, 144, 0.09);
    border-color: rgba(6, 182, 212, 0.2);
    border-left-color: #06b6d4;
  }
  .insight-label { color: #22d3ee; }
  .insight-steps li { background: rgba(14, 116, 144, 0.08); }
  .insight-steps li::before { background: #0891b2; }
  .insight-steps li strong { color: #22d3ee; }
  @media (max-width: 720px) {
    .cm-col + .cm-col { border-top-color: rgba(91, 143, 238, 0.14); }
  }
}

/* ── 리텐션 훅 컴포넌트 ──────────────────────────────────── */

/* 1. 단원 완료 섹션 */
.unit-complete {
  margin: 2rem 0 0;
  padding: 1.2rem 1.35rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(26, 127, 90, 0.07), rgba(26, 127, 90, 0.03));
  border: 1px solid rgba(26, 127, 90, 0.18);
  border-left: 4px solid var(--success);
  position: relative;
  overflow: hidden;
}
.unit-complete::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(26, 127, 90, 0.09), transparent 70%);
  pointer-events: none;
}
.uc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.uc-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uc-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--success);
  letter-spacing: 0.01em;
}
.uc-bridge {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.62;
  margin: 0 0 0.85rem;
}
.uc-bridge strong { color: var(--success); }
.uc-next-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--success);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.18s, transform 0.15s;
}
.uc-next-link:hover {
  filter: brightness(0.88);
  transform: translateX(2px);
  color: #fff;
}
.uc-next-link .uc-arrow { transition: transform 0.18s; }
.uc-next-link:hover .uc-arrow { transform: translateX(3px); }

/* 2. 다음 단원 강조 카드 */
.next-unit-card {
  display: block;
  margin: 1.2rem 0 0;
  padding: 1.05rem 1.25rem;
  border-radius: 11px;
  background: var(--surface);
  border: 1.5px solid rgba(34, 85, 216, 0.16);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}
.next-unit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--brand) 60%, rgba(34, 85, 216, 0.25));
}
.next-unit-card:hover {
  border-color: rgba(34, 85, 216, 0.38);
  box-shadow: 0 6px 20px rgba(34, 85, 216, 0.09);
  transform: translateY(-1px);
  color: inherit;
}
.nuc-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.nuc-body { flex: 1; min-width: 0; }
.nuc-kicker {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.28rem;
}
.nuc-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.28rem;
  line-height: 1.3;
}
.nuc-preview {
  font-size: 0.81rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.nuc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.nuc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 0.09rem 0.4rem;
  border-radius: 999px;
  background: rgba(34, 85, 216, 0.07);
  color: var(--brand-strong);
  border: 1px solid rgba(34, 85, 216, 0.14);
}
.nuc-arrow-box {
  display: flex;
  align-items: center;
  align-self: center;
  font-size: 1.05rem;
  color: var(--brand);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.next-unit-card:hover .nuc-arrow-box { transform: translateX(4px); }

/* 3. 시리즈 진행도 바 */
.series-progress {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 0 0;
}
.sp-label {
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.sp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), rgba(34, 85, 216, 0.55));
  width: var(--sp-w, 100%);
  transform-origin: left;
  animation: spFill 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) 0.4s both;
}
@keyframes spFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.sp-count {
  font-size: 0.67rem;
  font-weight: 800;
  color: var(--brand-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dark mode — 리텐션 훅 */
@media (prefers-color-scheme: dark) {
  .unit-complete {
    background: linear-gradient(135deg, rgba(26, 127, 90, 0.13), rgba(26, 127, 90, 0.05));
    border-color: rgba(52, 211, 153, 0.2);
    border-left-color: #34d399;
  }
  .uc-title { color: #34d399; }
  .uc-bridge strong { color: #34d399; }
  .uc-check { background: #15803d; }
  .uc-next-link { background: #15803d; }
  .next-unit-card { border-color: rgba(91, 143, 238, 0.2); }
  .next-unit-card:hover {
    border-color: rgba(91, 143, 238, 0.42);
    box-shadow: 0 6px 20px rgba(34, 85, 216, 0.14);
  }
  .nuc-tag { background: rgba(91, 143, 238, 0.11); border-color: rgba(91, 143, 238, 0.2); }
  .sp-track { background: rgba(91, 143, 238, 0.14); }
}

/* ── 루프40: 리텐션 훅 강화 컴포넌트 ──────────────────────── */

/* 1. 개념 연결 브리지 */
.concept-bridge {
  margin: 2rem 0 1.25rem;
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #152040 0%, #1c3060 100%);
  position: relative;
  overflow: hidden;
}
.concept-bridge::after {
  content: "";
  position: absolute;
  top: -20px; right: -20px;
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(34,85,216,0.3), transparent 65%);
  pointer-events: none;
}
.cb-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.7rem;
}
.cb-flow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.cb-from {
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.1);
}
.cb-to {
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  background: rgba(34,85,216,0.4);
  color: #fff;
  border: 1px solid rgba(91,143,238,0.5);
}
.cb-arrow {
  font-size: 1rem;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.cb-reason {
  margin: 0 0 0.9rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
}
.cb-reason strong { color: rgba(255,255,255,0.9); }
.cb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.42rem 1rem;
  background: var(--brand);
  color: #fff;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
}
.cb-link::after { content: " →"; }
.cb-link:hover { background: #1a44b8; transform: translateX(2px); }

/* 2. 3경로 하단 네비게이션 */
.three-path-nav {
  margin: 1.25rem 0 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: stretch;
}
.tpn-back, .tpn-next, .tpn-related {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: 9px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
  transition: background 0.14s, transform 0.1s, box-shadow 0.14s;
  white-space: nowrap;
}
.tpn-back {
  font-size: 0.78rem;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tpn-back::before { content: "← "; }
.tpn-back:hover { background: var(--page); color: var(--ink); }
.tpn-next {
  font-size: 0.88rem;
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(34,85,216,0.22);
}
.tpn-next::after { content: " →"; }
.tpn-next:hover {
  background: #1a44b8;
  box-shadow: 0 4px 14px rgba(34,85,216,0.32);
  transform: translateY(-1px);
}
.tpn-related {
  font-size: 0.78rem;
  background: transparent;
  color: var(--success);
  border: 1px solid rgba(26,127,90,0.28);
}
.tpn-related:hover { background: rgba(26,127,90,0.06); border-color: rgba(26,127,90,0.48); }

@media (max-width: 560px) {
  .three-path-nav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "next next" "back related";
  }
  .tpn-next { grid-area: next; }
  .tpn-back { grid-area: back; }
  .tpn-related { grid-area: related; }
}

/* Dark mode — 루프40 */
@media (prefers-color-scheme: dark) {
  .concept-bridge { background: linear-gradient(135deg, #0d1929 0%, #112244 100%); }
  .concept-bridge::after { background: radial-gradient(circle, rgba(91,143,238,0.25), transparent 65%); }
  .cb-to { background: rgba(91,143,238,0.3); border-color: rgba(91,143,238,0.45); }
  .tpn-back { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--ink-soft); }
  .tpn-back:hover { background: rgba(255,255,255,0.07); }
  .tpn-next { background: #2d5ce8; box-shadow: 0 2px 8px rgba(34,85,216,0.35); }
  .tpn-next:hover { background: #3566f5; box-shadow: 0 4px 14px rgba(34,85,216,0.5); }
  .tpn-related { color: #34c792; border-color: rgba(52,199,146,0.24); }
  .tpn-related:hover { background: rgba(52,199,146,0.07); border-color: rgba(52,199,146,0.42); }
}

.continue-section {
  margin-top: 2rem;
}

/* ===========================
   정보 구조 컴포넌트 (Loop 17)
   breadcrumb-current · page-overview · unit-diff badges
   =========================== */

/* 1. 브레드크럼 현재 위치 강조 */
.breadcrumb-current {
  font-weight: 700;
  color: var(--ink);
}

/* h2 앵커 스크롤 여백 + 호버 § 인디케이터 (루프25) */
h2[id] {
  scroll-margin-top: 3.5rem;
}
h2[id]:hover::after {
  content: ' §';
  font-size: 0.72em;
  font-weight: 400;
  color: var(--brand);
  opacity: 0.55;
  margin-left: 0.3em;
}

/* 2. "이 페이지에서" 요약 박스 */
.page-overview {
  margin: 0 0 1.8rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--brand);
  background: rgba(34, 85, 216, 0.04);
  border-radius: 0 8px 8px 0;
}
.page-overview-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.52rem;
}
.page-overview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  counter-reset: po-counter;
}
.page-overview-list li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  counter-increment: po-counter;
}
.page-overview-list li::before {
  content: counter(po-counter, decimal-leading-zero);
  font-size: 0.57rem;
  font-weight: 800;
  color: var(--brand);
  opacity: 0.42;
  min-width: 1.5rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
}
.page-overview-list a {
  font-size: 0.8rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.45;
  transition: color 0.15s;
}
.page-overview-list a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 3. 단원 난이도 배지 */
.unit-card-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}
.unit-diff {
  display: inline-flex;
  align-items: center;
  font-size: 0.61rem;
  font-weight: 700;
  padding: 0.06rem 0.38rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  line-height: 1.7;
}
.unit-diff-easy {
  background: rgba(26, 127, 90, 0.1);
  color: var(--success);
}
.unit-diff-mid {
  background: rgba(200, 112, 0, 0.1);
  color: var(--warning);
}
.unit-diff-hard {
  background: rgba(34, 85, 216, 0.1);
  color: var(--brand-strong);
}
.unit-time {
  font-size: 0.61rem;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Dark mode — 정보 구조 */
@media (prefers-color-scheme: dark) {
  .page-overview { background: rgba(34, 85, 216, 0.09); }
  .unit-diff-easy { background: rgba(26, 127, 90, 0.16); }
  .unit-diff-mid { background: rgba(200, 112, 0, 0.16); }
  .unit-diff-hard { background: rgba(34, 85, 216, 0.16); }
}

.continue-label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

.error-panel {
  padding: 2rem;
  text-align: center;
}

.error-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(34, 85, 216, 0.12);
  color: var(--brand-strong);
  font-weight: 800;
  margin-bottom: 1rem;
}

.empty-state-note {
  margin-top: 1rem;
  text-align: center;
}

footer {
  margin-top: 3rem;
  padding: 2.2rem 1.2rem 2.8rem;
  text-align: center;
  color: rgba(225, 232, 244, 0.78);
  background: linear-gradient(180deg, #16233f, #111a30);
}

footer p {
  margin: 0.3rem 0;
  color: inherit;
}

footer a {
  color: #95c0ff;
}

@media (max-width: 980px) {
  .article-shell {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 15px;
  }

  nav {
    padding: 0.7rem 0.8rem 0.9rem;
  }

  .nav-logo {
    width: 100%;
    margin-right: 0;
    justify-content: center;
    margin-bottom: 0.1rem;
  }

  .nav-sep {
    display: none;
  }

  nav a:not(.nav-logo) {
    flex: 1 1 calc(25% - 0.35rem);
    min-width: 72px;
    padding: 0.58rem 0.55rem;
    font-size: 0.82rem;
  }

  main {
    padding: 1.35rem 1rem 3rem;
  }

  .hero {
    padding: 2rem 1rem;
  }

  .hero-stats,
  .section-overview-grid {
    grid-template-columns: 1fr;
  }

  .subject-grid,
  .topic-grid,
  .continue-grid {
    grid-template-columns: 1fr;
  }

  .page-actions,
  .quick-jump {
    flex-direction: column;
    align-items: stretch;
  }

  .page-action-button,
  .page-action-link,
  .utility-link,
  .anchor-chip {
    width: 100%;
  }

  .back-to-top {
    right: 0.9rem;
    bottom: 0.9rem;
  }
}

@media print {
  header,
  footer,
  .back-to-top,
  .scroll-progress,
  .lang-switcher,
  .page-actions,
  .article-sidebar,
  .priority-note,
  .study-path {
    display: none !important;
  }

  body {
    background: #fff;
  }

  main {
    max-width: none;
    padding: 0;
  }

  .hero,
  .concept-box,
  .example,
  .tip,
  .subject-card,
  .topic-card {
    box-shadow: none;
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #5b8fee;
    --brand-strong: #93baff;
    --brand-soft: #1a2d4f;
    --ink: #e2e8f4;
    --ink-soft: #94a3b8;
    --surface: #141e30;
    --surface-soft: rgba(22, 32, 54, 0.92);
    --page: #0d1524;
    --line: #1e2f4a;
    --line-strong: #2d4266;
    --success: #34d399;
    --success-soft: #0a2e1e;
    --warning: #fbbf24;
    --warning-soft: #2d1f06;
    --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 22px 55px rgba(0, 0, 0, 0.48);
  }

  body {
    background:
      radial-gradient(circle at top right, rgba(59, 100, 220, 0.12), transparent 32%),
      radial-gradient(circle at left 20%, rgba(20, 160, 110, 0.08), transparent 28%),
      var(--page);
  }

  header {
    background: linear-gradient(90deg, rgba(26, 50, 130, 0.97), rgba(14, 30, 80, 0.96));
  }

  .hero {
    background:
      radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 36%),
      linear-gradient(135deg, rgba(20, 36, 72, 0.97), rgba(16, 28, 56, 0.98));
    border-color: rgba(40, 65, 110, 0.8);
  }

  .hero h1 {
    color: var(--brand-strong);
  }

  .lang-btn {
    background: rgba(22, 34, 62, 0.9);
    border-color: rgba(50, 75, 120, 0.6);
    color: var(--ink);
  }

  .lang-btn:hover,
  .lang-btn.current {
    background: var(--brand);
    color: #fff;
  }

  .subject-card,
  .topic-card,
  .continue-card,
  .study-path,
  .priority-note,
  .section-overview,
  .utility-card,
  .concept-box,
  .example,
  .tip,
  .article-meta,
  .page-actions,
  .error-panel {
    background: var(--surface-soft);
    border-color: rgba(35, 58, 100, 0.8);
  }

  .concept-box {
    background: linear-gradient(180deg, rgba(18, 32, 70, 0.96), rgba(14, 26, 58, 0.92));
    border-left-color: var(--brand);
  }

  .example {
    background: linear-gradient(180deg, rgba(8, 32, 22, 0.98), rgba(6, 26, 18, 0.94));
    border-left-color: var(--success);
  }

  .tip {
    background: linear-gradient(180deg, rgba(30, 20, 4, 0.98), rgba(24, 16, 4, 0.94));
    border-left-color: var(--warning);
  }

  .formula,
  pre {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(35, 58, 100, 0.9);
    color: var(--ink);
  }

  table {
    background: rgba(14, 22, 42, 0.86);
  }

  th {
    background: rgba(34, 75, 180, 0.7);
  }

  td {
    border-bottom-color: rgba(30, 50, 90, 0.8);
  }

  tr:nth-child(even) td {
    background: rgba(16, 26, 50, 0.9);
  }

  .page-action-button,
  .page-action-link,
  .utility-link,
  .anchor-chip {
    background: rgba(20, 32, 58, 0.9);
    border-color: rgba(45, 72, 120, 0.7);
    color: var(--ink);
  }

  .page-action-button:hover,
  .page-action-link:hover,
  .utility-link:hover,
  .anchor-chip:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
  }

  .stat-card {
    background: rgba(18, 28, 52, 0.9);
    border-color: rgba(35, 58, 100, 0.7);
  }

  .card-badge {
    background: rgba(59, 100, 220, 0.22);
    color: var(--brand-strong);
  }

  .back-to-top {
    background: var(--brand);
    color: #fff;
  }

  .error-kicker {
    background: rgba(59, 100, 220, 0.22);
    color: var(--brand-strong);
  }

  footer {
    background: linear-gradient(180deg, #080e1c, #050a14);
    color: rgba(180, 200, 235, 0.72);
  }

  footer a {
    color: #7eb3ff;
  }
}

/* ===========================
   모바일 UX 최적화 (Loop 18)
   table-wrap · MathJax · concept-journey · article-meta
   =========================== */

/* MathJax 수식 overflow 방지 — 모든 화면 크기 */
mjx-container,
.MathJax,
.MathJax_Display,
.mjx-container {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* 수식 블록 레벨($$) overflow */
.MathJax_Display {
  margin: 0.6rem 0;
}

/* pre/code 모바일 touch 스크롤 */
pre {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 720px) {
  /* 1. concept-journey 가로 스크롤 (overflow: hidden 오버라이드) */
  .concept-journey {
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 1.2rem; /* 마지막 노드 여백 */
  }
  .concept-journey::-webkit-scrollbar { display: none; }

  /* 2. article-meta 소형화 */
  .article-meta { gap: 0.38rem; }
  .article-meta span {
    font-size: 0.76rem;
    min-height: 26px;
    padding: 0.22rem 0.55rem;
  }

  /* 3. pre 모바일 */
  pre {
    font-size: 0.8rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
  }

  /* 4. 컴포넌트 모바일 패딩 최적화 */
  .unit-complete,
  .next-unit-card,
  .page-overview {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  .exam-trap,
  .intuition-box,
  .compare-method,
  .common-mistake {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .exam-trap { border-left-width: 3px; }
  .intuition-box { border-left-width: 2px; }

  /* 5. 수식 블록 모바일 */
  mjx-container,
  .MathJax_Display {
    font-size: 0.92em;
  }
}

/* ===========================
   모바일 UX 보완 (루프26)
   테이블·컴포넌트 모바일 최적화
   =========================== */

/* 1. 테이블 직접 overflow 처리 (.table-wrap 없는 파일 포함) */
@media (max-width: 720px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* 2. 박스 컴포넌트 모바일 패딩 최적화 — 좁은 화면 콘텐츠 공간 확보 */
  .concept-box,
  .example,
  .tip {
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius-sm);
  }

  .formula {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
  }

  /* 3. 기타 박스류 좌우 패딩 최적화 */
  .why-box,
  .misconception,
  .tldr,
  .step-solution,
  .concept-bridge,
  .skill-unlock,
  .analogy-box,
  .insight-path,
  .exam-trap,
  .intuition-box,
  .practice-set,
  .recall-prompt,
  .next-teaser-body {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  /* 4. article-meta 뱃지 높이 축소 */
  .article-meta span {
    min-height: 28px;
    padding: 0.18rem 0.6rem;
  }

  /* 5. h2 모바일 상단 마진 축소 */
  h2 {
    margin-top: 1.8rem;
  }

  /* 6. insight-steps 들여쓰기 축소 */
  .insight-steps li {
    padding-left: 1.85rem;
  }
  .insight-steps li::before {
    left: 0.38rem;
  }

  /* 7. formula 폰트 반응형 */
  .formula {
    font-size: clamp(0.82rem, 2.8vw, 1rem);
    padding: 0.75rem 0.85rem;
  }

  /* 8. concept-bridge 내부 요소 */
  .cb-from, .cb-to {
    font-size: 0.82rem;
  }
  .cb-reason {
    font-size: 0.83rem;
  }

  /* 9. three-path-nav 터치 타겟 보장 */
  .tpn-back, .tpn-next, .tpn-related {
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  /* 10. analogy-box 제목 줄바꿈 허용 */
  .analogy-title {
    font-size: 0.92rem;
    line-height: 1.4;
  }
}

/* ===========================
   리텐션 훅 컴포넌트 (루프32)
   다음 단원 예고·복습 안내
   =========================== */

/* ── 다음 단원 예고 카드 (.next-teaser) ─────────────────────── */
.next-teaser {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1.5rem;
  border: 1.5px solid rgba(34, 85, 216, 0.22);
  background: var(--surface);
}
.next-teaser-label {
  display: block;
  background: var(--brand, #2255d8);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
}
.next-teaser-body {
  padding: 0.9rem 1rem 1rem;
}
.next-teaser-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand, #2255d8);
  margin-bottom: 0.35rem;
}
.next-teaser-text {
  font-size: 0.87rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 0.75rem;
}
.next-teaser-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--brand, #2255d8);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.83rem;
  font-weight: 700;
  padding: 0.42rem 0.9rem;
  border-radius: 6px;
  transition: background 0.15s, transform 0.12s;
}
.next-teaser-btn::after { content: " →"; }
.next-teaser-btn:hover {
  background: #1a44b8;
  transform: translateX(3px);
}
/* 섹션 완료 변형 */
.next-teaser.is-complete { border-color: rgba(26,127,90,0.4); }
.next-teaser.is-complete .next-teaser-label { background: var(--success, #1a7f5a); }
.next-teaser.is-complete .next-teaser-title { color: var(--success, #1a7f5a); }
.next-teaser.is-complete .next-teaser-btn { background: var(--success, #1a7f5a); }
.next-teaser.is-complete .next-teaser-btn:hover { background: #15694c; }
.next-teaser.is-complete .next-teaser-btn::after { content: " ✓"; }

/* ── 에빙하우스 복습 안내 (.recall-prompt) ──────────────────── */
.recall-prompt {
  border-left: 4px solid var(--success, #1a7f5a);
  background: linear-gradient(to right, rgba(26,127,90,0.07), transparent);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem;
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.recall-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.5; }
.recall-body { flex: 1; }
.recall-label {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--success, #1a7f5a);
  margin-bottom: 0.2rem;
}
.recall-text {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 0.42rem;
}
.recall-chips { display: flex; flex-wrap: wrap; gap: 0.32rem; }
.recall-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12em 0.5em;
  border-radius: 20px;
  background: rgba(26, 127, 90, 0.11);
  color: var(--success, #1a7f5a);
  border: 1px solid rgba(26, 127, 90, 0.28);
}

@media (prefers-color-scheme: dark) {
  .next-teaser { border-color: rgba(34,85,216,0.38); }
  .recall-prompt { background: linear-gradient(to right, rgba(26,127,90,0.12), transparent); }
}
@media (max-width: 720px) {
  .next-teaser-body { padding: 0.8rem 0.85rem 0.9rem; }
  .recall-prompt { padding: 0.75rem 0.85rem; }
}

/* ===========================
   차별화 컴포넌트 (루프31)
   선행지식·수능기출·체크리스트
   =========================== */

/* ── 선행지식 박스 (.prerequisite-box) ──────────────────────── */
.prerequisite-box {
  position: relative;
  border-left: 4px solid #0891b2;
  background: linear-gradient(135deg, rgba(8,145,178,0.07) 0%, rgba(8,145,178,0.02) 100%);
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
}
.prerequisite-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0891b2;
  margin-bottom: 0.5rem;
}
.prerequisite-label::before {
  content: "⚡";
  font-size: 0.7rem;
}
.prerequisite-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.prerequisite-box li {
  font-size: 0.9rem;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.prerequisite-box li::before {
  content: "→";
  color: #0891b2;
  font-weight: 700;
  flex-shrink: 0;
}
.prerequisite-box a {
  color: #0891b2;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(8,145,178,0.35);
  transition: border-color 0.15s;
}
.prerequisite-box a:hover { border-color: #0891b2; }

/* ── 수능 기출 배지 (.csat-tag) ──────────────────────────────── */
.csat-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15em 0.55em 0.15em 0.45em;
  border-radius: 4px;
  background: rgba(200, 112, 0, 0.1);
  color: var(--warning, #c87000);
  border: 1px solid rgba(200, 112, 0, 0.3);
  vertical-align: middle;
  margin-left: 0.35rem;
  white-space: nowrap;
  line-height: 1.6;
  cursor: default;
}
.csat-tag::before {
  content: "★";
  font-size: 0.6em;
}

/* ── 시험 직전 체크리스트 (.exam-checklist) ─────────────────── */
.exam-checklist {
  border: 1.5px solid var(--brand, #2255d8);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1.8rem;
}
.exam-checklist-header {
  background: var(--brand, #2255d8);
  color: #fff;
  padding: 0.58rem 1rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.exam-checklist-header::before {
  content: "✓";
  font-size: 0.9rem;
  font-weight: 900;
  opacity: 0.85;
}
.exam-checklist ul {
  margin: 0;
  padding: 0.5rem 1rem 0.7rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.exam-checklist li {
  font-size: 0.88rem;
  color: var(--ink);
  padding: 0.42rem 0;
  border-bottom: 1px solid rgba(34, 85, 216, 0.08);
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: 0.55rem;
  align-items: baseline;
}
.exam-checklist li:last-child { border-bottom: none; }
.exam-checklist li::before {
  content: "□";
  font-size: 1rem;
  color: var(--brand, #2255d8);
  line-height: 1;
  margin-top: 0.05em;
}
.exam-checklist strong { color: var(--brand, #2255d8); }

/* 다크모드 보완 */
@media (prefers-color-scheme: dark) {
  .prerequisite-box {
    background: linear-gradient(135deg, rgba(8,145,178,0.12) 0%, rgba(8,145,178,0.04) 100%);
  }
  .csat-tag {
    background: rgba(200, 112, 0, 0.16);
    border-color: rgba(200, 112, 0, 0.45);
  }
  .exam-checklist { border-color: rgba(34,85,216,0.55); }
  .exam-checklist li { border-color: rgba(34,85,216,0.13); }
}

/* 모바일 최적화 */
@media (max-width: 720px) {
  .prerequisite-box { padding: 0.75rem 0.85rem; }
  .exam-checklist ul { padding: 0.4rem 0.85rem 0.6rem; }
  .exam-checklist-header { padding: 0.5rem 0.85rem; }
}

/* ===========================
   정보 구조 개선 (루프33)
   과목별 색상 와이파인딩 시스템
   =========================== */

/* ── 1. 과목별 섹션 컬러 변수 ── */
:root {
  --section-math:    #2255d8;   /* 수학 — 브랜드 블루   */
  --section-science: #1a7f5a;   /* 과학 — 서세스 그린   */
  --section-lang:    #7c3aed;   /* 모국어 — 인디고 퍼플 */
  --section-efl:     #c87000;   /* 외국어 EFL — 앰버    */
  --section-color:   var(--brand, #2255d8); /* 현재 섹션 컬러 기본값 */
}

/* ── 2. :has() 기반 섹션 컬러 자동 감지 ── */
body:has(nav a[href*="math"].active)     { --section-color: var(--section-math);    }
body:has(nav a[href*="science"].active)  { --section-color: var(--section-science); }
body:has(nav a[href*="korean"].active),
body:has(nav a[href*="japanese"].active),
body:has(nav a[href*="chinese"].active)  { --section-color: var(--section-lang);    }
body:has(nav a[href*="english"].active)  { --section-color: var(--section-efl);     }

/* ── 3. nav 활성 항목 — 흰 pill + 섹션 컬러 텍스트 ── */
nav a.active {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--section-color) !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14);
  transform: none !important;
}

/* ── 4. 브레드크럼 섹션 컬러 악센트 ── */
.breadcrumb a[href*="/math/"]     { color: var(--section-math); }
.breadcrumb a[href*="/science/"]  { color: var(--section-science); }
.breadcrumb a[href*="/korean/"],
.breadcrumb a[href*="/japanese/"],
.breadcrumb a[href*="/chinese/"]  { color: var(--section-lang); }
.breadcrumb a[href*="/english/"]  { color: var(--section-efl); }
.breadcrumb span:not(.sep),
.breadcrumb .breadcrumb-current   { color: var(--section-color); font-weight: 700; }

/* ── 5. h1 섹션 컬러 악센트 언더라인 ── */
.page-article h1,
.page-section-index h1 {
  padding-bottom: 0.55rem;
}
.page-article h1::after,
.page-section-index h1::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  background: var(--section-color);
  border-radius: 2px;
  margin-top: 0.45rem;
  transition: background 0.3s;
}

/* ── 6. entry-point / section-hook 섹션 컬러 연동 ── */
.entry-point {
  border-color: color-mix(in srgb, var(--section-color) 32%, transparent);
  background: color-mix(in srgb, var(--section-color) 4%, var(--surface));
}
.entry-point-label { color: var(--section-color); }
.entry-point-path a {
  color: var(--section-color);
  background: color-mix(in srgb, var(--section-color) 8%, transparent);
  border-color: color-mix(in srgb, var(--section-color) 22%, transparent);
}
.entry-point-path a:hover {
  background: color-mix(in srgb, var(--section-color) 16%, transparent);
}
.section-hook { border-color: color-mix(in srgb, var(--section-color) 35%, transparent); }
.section-hook strong { color: var(--section-color); }

/* ── 7. nav 스크롤 축소 전환 (.nav-scrolled) ── */
header { transition: box-shadow 0.22s; }
header.nav-scrolled {
  box-shadow: 0 2px 18px rgba(13, 37, 84, 0.28);
}
header.nav-scrolled nav {
  min-height: 56px;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  transition: min-height 0.22s, padding 0.22s;
}

/* ── 8. 모바일 하단 탭 바 ── */
@media (max-width: 720px) {
  header {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
  }
  header nav {
    min-height: 0 !important;
    padding: 0.28rem 0.5rem calc(0.28rem + env(safe-area-inset-bottom, 0px)) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.18rem !important;
    justify-content: flex-start !important;
  }
  header nav::-webkit-scrollbar { display: none; }
  .nav-logo {
    width: auto !important;
    margin-right: 0.4rem !important;
    font-size: 0.82rem !important;
    flex-shrink: 0;
  }
  nav a:not(.nav-logo) {
    flex: 0 0 auto !important;
    padding: 0.3rem 0.65rem !important;
    font-size: 0.78rem !important;
    min-width: 0 !important;
  }
  main {
    padding-top: 1.35rem !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  footer {
    margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* 다크모드 보완 */
@media (prefers-color-scheme: dark) {
  :root {
    --section-lang: #9d5cf5;   /* 다크모드 퍼플 — 명도 보정 */
  }
  nav a.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }
}

/* ===========================
   모바일 UX 강화 (루프34)
   표·수식 반응형 최적화
   =========================== */

/* ── 1. 텍스트 넘침 방지 전역 ── */
p, li, dd, dt, figcaption, blockquote, caption {
  overflow-wrap: anywhere;
}
th, td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── 2. .table-wrap — 스크롤 마스크 + 스크롤바 세련화 ── */
/* mask-image로 우측 "더 있음" fade — position 불필요, 스크롤과 무관 */
.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 85, 216, 0.28) transparent;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.4rem), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 2.4rem), transparent 100%);
}
.table-wrap::-webkit-scrollbar { height: 4px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(34, 85, 216, 0.3);
  border-radius: 2px;
}
.table-wrap::-webkit-scrollbar-track { background: transparent; }
/* JS가 scrolled-end 추가하면 마스크 제거 */
.table-wrap.scrolled-end {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ── 3. 가로 스크롤 힌트 배너 (JS로 .times-table 앞에 주입) ── */
.table-scroll-hint {
  display: none;
}
@media (max-width: 720px) {
  .table-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand, #2255d8);
    background: rgba(34, 85, 216, 0.06);
    border: 1px solid rgba(34, 85, 216, 0.15);
    border-radius: 6px;
    padding: 0.28rem 0.62rem;
    margin-bottom: 0.28rem;
  }
  .table-scroll-hint::before {
    content: "↔";
    font-size: 0.9rem;
  }
}

/* ── 4. 반응형 테이블 카드 변환 (.times-table · .no-card 제외) ── */
/* JS가 thead th 텍스트로 td[data-label]을 자동 주입 → ::before 레이블 표시 */
@media (max-width: 720px) {
  .table-wrap table:not(.times-table):not(.no-card) {
    min-width: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  .table-wrap table:not(.times-table):not(.no-card) thead {
    display: none;
  }
  .table-wrap table:not(.times-table):not(.no-card) tbody {
    display: block;
  }
  .table-wrap table:not(.times-table):not(.no-card) tr {
    display: block;
    margin-bottom: 0.7rem;
    border: 1.5px solid rgba(34, 85, 216, 0.15);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface, #fff);
    box-shadow: 0 1px 6px rgba(13, 37, 84, 0.06);
  }
  .table-wrap table:not(.times-table):not(.no-card) td {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.52rem 0.85rem;
    font-size: max(0.85rem, 14px);
    border-bottom: 1px solid rgba(34, 85, 216, 0.07);
    min-height: 44px;
  }
  .table-wrap table:not(.times-table):not(.no-card) td:last-child {
    border-bottom: none;
  }
  /* thead th 텍스트에서 자동 추출된 레이블 */
  .table-wrap table:not(.times-table):not(.no-card) td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    width: 4.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand, #2255d8);
    opacity: 0.82;
    padding-top: 0.14rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── 5. code 인라인 box화 ── */
/* .memory-tip code의 기존 스타일(warning 색상)은 높은 specificity로 자연 보존됨 */
article code,
.concept-box code,
.tip code,
.example code,
.why-box code,
.misconception code,
.tldr code,
.step-solution code,
.concept-bridge code,
.skill-unlock code {
  background: rgba(34, 85, 216, 0.08);
  color: var(--brand, #2255d8);
  padding: 0.12em 0.38em;
  border-radius: 4px;
  font-size: 0.91em;
  font-family: 'SFMono-Regular', 'Consolas', 'Menlo', monospace;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── 루프34 다크모드 ── */
@media (prefers-color-scheme: dark) {
  .table-wrap table:not(.times-table):not(.no-card) tr {
    border-color: rgba(100, 140, 255, 0.18);
    background: var(--surface, #141e30);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  }
  .table-wrap table:not(.times-table):not(.no-card) td {
    border-bottom-color: rgba(100, 140, 255, 0.1);
  }
  .table-wrap table:not(.times-table):not(.no-card) td[data-label]::before {
    color: var(--brand-strong, #93baff);
  }
  article code,
  .concept-box code,
  .tip code,
  .example code,
  .why-box code,
  .misconception code,
  .tldr code,
  .step-solution code,
  .concept-bridge code,
  .skill-unlock code {
    background: rgba(91, 143, 238, 0.18);
    color: var(--brand-strong, #93baff);
  }
  .table-scroll-hint {
    background: rgba(34, 85, 216, 0.12);
    border-color: rgba(34, 85, 216, 0.3);
    color: var(--brand-strong, #93baff);
  }
}

/* ===========================
   첫인상 설득력 강화 (루프36)
   hero 대형 타이포 · 수식 배경
   today-concept · card-preview
   =========================== */

/* 1. Hero h1 초대형 + letter-spacing */
.hero h1 {
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 900;
}

/* 수식 기호 부유 배경 */
.hero::before {
  content: "∑  ∫  π  △  α  ∂  √  ∞  θ  λ  ≡  φ";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 2.8rem;
  font-family: 'Georgia', 'Times New Roman', 'Noto Serif', serif;
  color: var(--brand, #2255d8);
  opacity: 0.045;
  letter-spacing: 0.9rem;
  line-height: 2.2;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  overflow: hidden;
}

/* 사회적 증명 배지 */
.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.9rem;
  padding: 0.34rem 0.88rem;
  border-radius: 999px;
  background: rgba(26, 127, 90, 0.09);
  border: 1px solid rgba(26, 127, 90, 0.25);
  color: var(--success, #1a7f5a);
  font-size: 0.78rem;
  font-weight: 700;
}

.hero-social-proof::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--success, #1a7f5a);
  animation: spPulse 2.2s ease-in-out infinite;
}

@keyframes spPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.68); }
}

/* 재방문 계속하기 CTA */
.hero-resume-cta {
  display: none;
  align-items: center;
  gap: 0.48rem;
  margin: 0.6rem auto 0;
  padding: 0.58rem 1.25rem;
  border-radius: 999px;
  background: var(--brand, #2255d8);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.88rem;
  max-width: max-content;
  transition: background 0.15s, transform 0.15s;
}

.hero-resume-cta:hover {
  background: #1a44b8;
  transform: translateY(-1px);
}

/* 2. 오늘의 개념 배너 */
.today-concept {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 1.05rem;
  border-radius: 10px;
  background: rgba(34, 85, 216, 0.04);
  border: 1px solid rgba(34, 85, 216, 0.13);
  border-left: 3.5px solid var(--brand, #2255d8);
  margin: 0 0 1.2rem;
  flex-wrap: wrap;
  row-gap: 0.28rem;
}

.today-concept-date {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand, #2255d8);
  opacity: 0.75;
  white-space: nowrap;
  background: rgba(34, 85, 216, 0.09);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.today-concept-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b7a96);
  white-space: nowrap;
}

.today-concept-name {
  flex: 1;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink, #14213d);
  min-width: 120px;
}

.today-concept-link {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand, #2255d8);
  white-space: nowrap;
  padding: 0.26rem 0.62rem;
  border-radius: 6px;
  background: rgba(34, 85, 216, 0.09);
  transition: background 0.14s;
}

.today-concept-link:hover { background: rgba(34, 85, 216, 0.18); }

/* 3. subject-card hover 컬러 + card-preview 슬라이드업 */
.subject-card { overflow: hidden; }

.card-preview {
  display: block;
  font-size: 0.77rem;
  color: var(--brand, #2255d8);
  font-weight: 600;
  font-style: italic;
  margin-top: 0.32rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease;
  line-height: 1.45;
}

.subject-card:hover .card-preview,
.topic-card:hover .card-preview {
  opacity: 1;
  max-height: 3em;
  transform: translateY(0);
}

/* 과목별 hover 컬러 accent */
.subject-card[data-subject="math"]:hover    { border-color: rgba(34, 85, 216, 0.55); border-left: 3px solid var(--brand, #2255d8); }
.subject-card[data-subject="korean"]:hover  { border-color: rgba(200, 112, 0, 0.45); border-left: 3px solid var(--warning, #c87000); }
.subject-card[data-subject="english"]:hover { border-color: rgba(26, 127, 90, 0.45); border-left: 3px solid var(--success, #1a7f5a); }
.subject-card[data-subject="science"]:hover { border-color: rgba(14, 165, 160, 0.5); border-left: 3px solid #0ea5a0; }

/* dark mode */
@media (prefers-color-scheme: dark) {
  .hero::before { color: rgba(130, 170, 255, 1); opacity: 0.06; }
  .today-concept {
    background: rgba(34, 85, 216, 0.09);
    border-color: rgba(34, 85, 216, 0.28);
  }
  .hero-social-proof {
    background: rgba(35, 195, 143, 0.12);
    border-color: rgba(35, 195, 143, 0.32);
  }
}

/* ===========================
   학습 효과 장치 (루프37)
   practice-set · diff 뱃지
   =========================== */

/* 연습문제 세트 컨테이너 */
.practice-set {
  margin: 1.6rem 0;
  padding: 1.1rem 1.25rem 0.9rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(34, 85, 216, 0.04), rgba(34, 85, 216, 0.01));
  border: 1px solid rgba(34, 85, 216, 0.15);
}

.practice-set-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand, #2255d8);
  margin-bottom: 0.75rem;
}

.practice-set-label::before {
  content: "✏";
  font-size: 0.85rem;
}

/* 난이도 뱃지 */
.practice-diff {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.practice-diff-1 {
  background: rgba(26, 127, 90, 0.12);
  color: var(--success, #1a7f5a);
}

.practice-diff-2 {
  background: rgba(200, 112, 0, 0.12);
  color: var(--warning, #c87000);
}

.practice-diff-3 {
  background: rgba(180, 30, 30, 0.1);
  color: #b41e1e;
}

/* practice-set 안의 quiz-check 간격 */
.practice-set .quiz-check {
  margin: 0.65rem 0 0;
  border-left-color: var(--brand, #2255d8);
  background: linear-gradient(135deg, rgba(34, 85, 216, 0.05), rgba(34, 85, 216, 0.02));
  border-color: rgba(34, 85, 216, 0.2);
}

.practice-set .quiz-check:first-of-type { margin-top: 0; }

@media (prefers-color-scheme: dark) {
  .practice-set {
    background: rgba(34, 85, 216, 0.07);
    border-color: rgba(34, 85, 216, 0.22);
  }
}

/* ===========================
   첫인상 설득력 강화 (루프44)
   start-path · card-question · tc-key
   =========================== */

/* ── start-path: 학습 진입 경로 3선택 ── */
.start-path {
  margin: 1.6rem 0;
  background: var(--surface, #fff);
  border: 1.5px solid var(--line, #d9e2f0);
  border-radius: var(--radius-md, 22px);
  padding: 1.3rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-sm, 0 12px 30px rgba(24,49,104,0.08));
}

.start-path-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand, #2255d8);
  margin-bottom: 0.85rem;
}

.start-path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.sp-card {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  border: 1.5px solid var(--line, #d9e2f0);
  border-radius: var(--radius-sm, 14px);
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.13s;
  background: var(--page, #f4f7fc);
}

.sp-card:hover {
  border-color: var(--brand, #2255d8);
  box-shadow: 0 4px 18px rgba(34,85,216,0.11);
  transform: translateY(-2px);
  color: inherit;
}

.sp-level {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.12em 0.5em;
  margin-bottom: 0.28rem;
  width: fit-content;
}

.sp-card--elem .sp-level { background: rgba(31,143,88,0.12); color: var(--success,#1f8f58); }
.sp-card--mid  .sp-level { background: rgba(179,114,18,0.12); color: var(--warning,#b37212); }
.sp-card--high .sp-level { background: rgba(34,85,216,0.1);   color: var(--brand,#2255d8); }

.sp-title {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink, #14213d);
  line-height: 1.3;
  margin: 0;
}

.sp-hint {
  font-size: 0.75rem;
  color: var(--ink-soft, #4f5d78);
  line-height: 1.5;
  margin: 0.15rem 0 0;
}

.sp-arrow {
  font-size: 0.8rem;
  color: var(--brand, #2255d8);
  font-weight: 600;
  margin-top: 0.48rem;
}

/* ── card-question: 과목 카드 호기심 질문 ── */
.card-question {
  font-size: 0.77rem;
  color: var(--brand, #2255d8);
  font-style: italic;
  margin: 0.28rem 0 0;
  line-height: 1.45;
  opacity: 0.82;
}

.card-question::before {
  content: "Q. ";
  font-style: normal;
  font-weight: 700;
  opacity: 1;
}

/* ── tc-key: topic-card 핵심 한 줄 ── */
.tc-key {
  font-size: 0.74rem;
  color: var(--ink-soft, #4f5d78);
  margin: 0.2rem 0 0;
  line-height: 1.5;
  font-style: italic;
}

.tc-key::before {
  content: "핵심: ";
  font-style: normal;
  font-weight: 600;
  color: var(--brand, #2255d8);
}

/* 다크모드 */
@media (prefers-color-scheme: dark) {
  .start-path { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
  .sp-card { background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.07); }
  .sp-card:hover { border-color: rgba(34,85,216,0.55); box-shadow: 0 4px 18px rgba(34,85,216,0.2); }
  .sp-card--elem .sp-level { background: rgba(52,199,146,0.14); color: #34c792; }
  .sp-card--mid  .sp-level { background: rgba(234,179,8,0.14); color: #d4a800; }
  .sp-card--high .sp-level { background: rgba(34,85,216,0.22); color: #7baeff; }
  .sp-title { color: rgba(232,240,255,0.9); }
  .sp-hint  { color: rgba(180,200,230,0.65); }
  .sp-arrow { color: #7baeff; }
  .card-question { color: #7baeff; opacity: 1; }
  .tc-key { color: rgba(180,200,230,0.65); }
  .tc-key::before { color: #7baeff; }
}

/* 모바일 */
@media (max-width: 600px) {
  .start-path-grid { grid-template-columns: 1fr; gap: 0.44rem; }
  .sp-card { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.28rem 0.7rem; padding: 0.62rem 0.85rem; }
  .sp-level { margin-bottom: 0; }
  .sp-title { flex: 1 0 auto; }
  .sp-hint  { flex: 0 0 100%; margin: 0; font-size: 0.72rem; }
  .sp-arrow { margin-top: 0; margin-left: auto; }
}

/* ===========================
   콘텐츠 깊이 강화 (루프43)
   student-question — 학습자 선제 질문 대응
   =========================== */

.student-question {
  background: rgba(15, 118, 110, 0.05);
  border: 1.5px solid rgba(15, 118, 110, 0.22);
  border-left: 4px solid #0f766e;
  border-radius: var(--radius-sm, 14px);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
}

.sq-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
  border-radius: 4px;
  padding: 0.15em 0.55em;
  margin-bottom: 0.55rem;
}

.sq-question {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink, #14213d);
  margin: 0 0 0.6rem;
  line-height: 1.45;
}

.sq-question::before {
  content: "Q. ";
  color: #0f766e;
}

.sq-answer {
  font-size: 0.93rem;
  color: var(--ink-soft, #4f5d78);
  line-height: 1.7;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .student-question {
    background: rgba(20, 184, 166, 0.06);
    border-color: rgba(20, 184, 166, 0.18);
    border-left-color: #14b8a6;
  }
  .sq-label {
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.12);
  }
  .sq-question { color: #e8f4f2; }
  .sq-answer { color: rgba(200, 230, 225, 0.82); }
}

@media (max-width: 720px) {
  .student-question {
    padding: 0.9rem 0.9rem;
  }
  .sq-question { font-size: 0.95rem; }
}

/* ===========================
   모바일 UX 강화 (루프42)
   신규 컴포넌트 반응형 보완
   =========================== */

/* 480px 이하 — 초소형 스마트폰 전용 */
@media (max-width: 480px) {
  /* concept-bridge 다크 박스 내부 폰트 축소 */
  .concept-bridge {
    padding: 1rem 0.9rem;
  }
  .cb-label {
    font-size: 0.58rem;
  }
  .cb-link {
    font-size: 0.79rem;
    padding: 0.38rem 0.85rem;
  }

  /* analogy-box */
  .analogy-box {
    padding: 0.85rem 0.9rem;
  }
  .analogy-label {
    font-size: 0.62rem;
  }
  .analogy-body {
    font-size: 0.85rem;
  }

  /* insight-path */
  .insight-path {
    padding: 0.85rem 0.9rem;
  }
  .insight-steps li {
    padding-left: 1.75rem;
    font-size: 0.84rem;
  }
  .insight-steps li::before {
    width: 17px;
    height: 17px;
    font-size: 0.58rem;
  }

  /* exam-trap */
  .exam-trap ul li {
    font-size: 0.84rem;
    padding-left: 1.4rem;
  }

  /* practice-set */
  .practice-set {
    padding: 0.9rem 0.9rem;
  }

  /* page-overview — 좁은 화면 padding */
  .page-overview {
    padding: 0.7rem 0.9rem;
  }

  /* three-path-nav 글자 축소 */
  .tpn-back, .tpn-related {
    font-size: 0.74rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
  .tpn-next {
    font-size: 0.84rem;
  }
}

/* ===========================
   학습효과 장치 강화 (루프45)
   mnemonic — 암기법 박스
   self-check — 자가진단 체크리스트
   =========================== */

/* ── .mnemonic — 암기법 박스 (violet #7c3aed) ── */
.mnemonic {
  background: rgba(124, 58, 237, 0.04);
  border: 1.5px solid rgba(124, 58, 237, 0.18);
  border-left: 4px solid #7c3aed;
  border-radius: var(--radius-sm, 14px);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
  position: relative;
}

.mn-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.mn-label {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
  padding: 0.13em 0.55em;
}

.mn-type {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.13em 0.55em;
  letter-spacing: 0.04em;
}

.mn-type--acronym  { background: rgba(124,58,237,0.08); color: #6d28d9; }
.mn-type--image    { background: rgba(236,72,153,0.09); color: #be185d; }
.mn-type--story    { background: rgba(245,158,11,0.1);  color: #b45309; }

.mn-content {
  font-size: 0.97rem;
  color: var(--ink, #14213d);
  line-height: 1.65;
  margin: 0;
}

.mn-content strong {
  color: #7c3aed;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .mnemonic {
    background: rgba(167, 139, 250, 0.05);
    border-color: rgba(167, 139, 250, 0.16);
    border-left-color: #a78bfa;
  }
  .mn-label { color: #a78bfa; background: rgba(167,139,250,0.12); }
  .mn-type--acronym { background: rgba(167,139,250,0.1); color: #c4b5fd; }
  .mn-type--image   { background: rgba(244,114,182,0.1); color: #f9a8d4; }
  .mn-type--story   { background: rgba(251,191,36,0.1);  color: #fcd34d; }
  .mn-content { color: rgba(232,224,255,0.9); }
  .mn-content strong { color: #c4b5fd; }
}

@media (max-width: 720px) {
  .mnemonic { padding: 0.9rem 1rem; }
  .mn-content { font-size: 0.91rem; }
}

/* ── .self-check — 자가진단 체크리스트 (mint #0ea5e9 → #10b981) ── */
.self-check {
  background: rgba(14, 165, 233, 0.04);
  border: 1.5px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-sm, 14px);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
}

.sc-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #0284c7;
  background: rgba(14, 165, 233, 0.1);
  border-radius: 4px;
  padding: 0.15em 0.6em;
  width: fit-content;
  margin-bottom: 0.75rem;
}

.sc-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
}

.sc-items li {
  display: flex;
  align-items: flex-start;
  gap: 0.62rem;
}

/* 커스텀 체크박스 */
.sc-items input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  border: 1.5px solid rgba(14, 165, 233, 0.45);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  margin-top: 0.1rem;
  position: relative;
  transition: background 0.18s, border-color 0.18s;
}

.sc-items input[type="checkbox"]:checked {
  background: #10b981;
  border-color: #10b981;
}

.sc-items input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.05rem;
  width: 0.38rem;
  height: 0.6rem;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.sc-items label {
  font-size: 0.9rem;
  color: var(--ink-soft, #4f5d78);
  line-height: 1.55;
  cursor: pointer;
  transition: color 0.2s, text-decoration 0.2s;
}

.sc-items input[type="checkbox"]:checked + label {
  color: #059669;
  text-decoration: line-through;
  text-decoration-color: rgba(5, 150, 105, 0.45);
  text-decoration-thickness: 1.5px;
}

@media (prefers-color-scheme: dark) {
  .self-check {
    background: rgba(14, 165, 233, 0.05);
    border-color: rgba(56, 189, 248, 0.18);
  }
  .sc-label { color: #38bdf8; background: rgba(56,189,248,0.1); }
  .sc-items input[type="checkbox"] { border-color: rgba(56,189,248,0.35); }
  .sc-items input[type="checkbox"]:checked { background: #34d399; border-color: #34d399; }
  .sc-items label { color: rgba(186,230,253,0.75); }
  .sc-items input[type="checkbox"]:checked + label { color: #34d399; }
}

@media (max-width: 720px) {
  .self-check { padding: 0.9rem 1rem; }
  .sc-items label { font-size: 0.85rem; }
}

/* ===========================
   신뢰 신호 강화 (루프46)
   curriculum-tag — 교육과정 배지
   article-meta   — 아티클 메타 footer
   mc-wrong/mc-right — 오개념 팩트체크 강화
   =========================== */

/* ── .curriculum-tag — 교육과정 공식 배지 ── */
.curriculum-tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.4rem;
  padding: 0;
}

.ct-prefix {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-right: 0.1rem;
}

.ct-year,
.ct-grade,
.ct-subject {
  display: inline-flex;
  align-items: center;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 0.18em 0.58em;
  line-height: 1.4;
  white-space: nowrap;
}

.ct-year {
  background: rgba(71, 85, 105, 0.09);
  color: #334155;
  border: 1px solid rgba(71, 85, 105, 0.18);
}

.ct-grade {
  background: rgba(71, 85, 105, 0.06);
  color: #475569;
  border: 1px solid rgba(71, 85, 105, 0.14);
}

.ct-subject {
  background: rgba(34, 85, 216, 0.07);
  color: #1e40af;
  border: 1px solid rgba(34, 85, 216, 0.14);
}

.ct-year::before  { content: "📋 "; font-size: 0.7em; }
.ct-grade::before { content: "🎓 "; font-size: 0.7em; }

@media (prefers-color-scheme: dark) {
  .ct-prefix { color: rgba(148, 163, 184, 0.7); }
  .ct-year {
    background: rgba(148, 163, 184, 0.08);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.15);
  }
  .ct-grade {
    background: rgba(148, 163, 184, 0.06);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.12);
  }
  .ct-subject {
    background: rgba(96, 165, 250, 0.08);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.16);
  }
}

/* ── .article-meta — 아티클 하단 메타 정보 ── */
.article-meta {
  margin: 2rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line, rgba(20,33,61,0.1));
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  align-items: center;
}

.am-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--ink-soft, #4f5d78);
  opacity: 0.72;
  white-space: nowrap;
}

.am-item::before {
  font-size: 0.72em;
  opacity: 0.65;
}

.am-curriculum::before { content: "📋"; }
.am-grade::before      { content: "🎓"; }
.am-updated::before    { content: "🗓"; }
.am-level::before      { content: "📊"; }

.am-label {
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-right: 0.1rem;
}

@media (prefers-color-scheme: dark) {
  .article-meta { border-top-color: rgba(255,255,255,0.07); }
  .am-item { color: rgba(180, 200, 230, 0.55); }
  .am-label { color: rgba(148, 163, 184, 0.55); }
}

@media (max-width: 600px) {
  .article-meta { gap: 0.35rem 0.8rem; }
  .am-item { font-size: 0.66rem; }
}

/* ── .misconception 팩트체크 강화 — mc-wrong / mc-right ── */
.mc-wrong {
  display: inline;
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  text-decoration: line-through;
  text-decoration-color: rgba(185, 28, 28, 0.55);
  text-decoration-thickness: 1.5px;
  border-radius: 3px;
  padding: 0.05em 0.25em;
}

.mc-right {
  display: inline;
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
  font-weight: 700;
  border-radius: 3px;
  padding: 0.05em 0.25em;
}

/* 팩트체크 레이블 태그 */
.mc-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 0.1em 0.45em;
  vertical-align: middle;
  margin: 0 0.2em;
}

.mc-tag--wrong {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.2);
}

.mc-tag--right {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border: 1px solid rgba(21, 128, 61, 0.2);
}

@media (prefers-color-scheme: dark) {
  .mc-wrong { background: rgba(239,68,68,0.1); color: #fca5a5; }
  .mc-right { background: rgba(22,163,74,0.1); color: #86efac; }
  .mc-tag--wrong { background: rgba(239,68,68,0.12); color: #fca5a5; border-color: rgba(252,165,165,0.18); }
  .mc-tag--right { background: rgba(22,163,74,0.12); color: #86efac; border-color: rgba(134,239,172,0.18); }
}

/* ===========================
   차별화 가치 강화 (루프47)
   real-world  — 실생활 연결 박스
   prereq-path — 선행학습 경로
   exam-tip    — 시험 실전 팁
   =========================== */

/* ── .real-world — 실생활 연결 (amber #d97706) ── */
.real-world {
  background: rgba(217, 119, 6, 0.04);
  border: 1.5px solid rgba(217, 119, 6, 0.2);
  border-left: 4px solid #d97706;
  border-radius: var(--radius-sm, 14px);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
}

.rw-label {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(217, 119, 6, 0.1);
  border-radius: 4px;
  padding: 0.13em 0.55em;
  margin-bottom: 0.65rem;
}

.rw-label::before {
  content: "🌍 ";
  font-style: normal;
}

.rw-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rw-items li {
  font-size: 0.9rem;
  color: var(--ink, #14213d);
  line-height: 1.55;
  padding-left: 1.3rem;
  position: relative;
}

.rw-items li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #d97706;
  font-size: 0.8em;
  top: 0.18em;
}

.rw-items strong {
  color: #b45309;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .real-world {
    background: rgba(251, 191, 36, 0.04);
    border-color: rgba(251, 191, 36, 0.15);
    border-left-color: #fbbf24;
  }
  .rw-label { color: #fcd34d; background: rgba(251,191,36,0.1); }
  .rw-items li { color: rgba(255,240,200,0.85); }
  .rw-items li::before { color: #fbbf24; }
  .rw-items strong { color: #fcd34d; }
}

@media (max-width: 720px) {
  .real-world { padding: 0.9rem 1rem; }
  .rw-items li { font-size: 0.85rem; }
}

/* ── .prereq-path — 선행학습 경로 (slate-blue flow) ── */
.prereq-path {
  background: rgba(71, 85, 105, 0.04);
  border: 1.5px solid rgba(71, 85, 105, 0.16);
  border-radius: var(--radius-sm, 14px);
  padding: 1rem 1.4rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.pp-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.pp-before,
.pp-current,
.pp-after {
  flex: 1;
  padding: 0.5rem 0.75rem;
  position: relative;
}

.pp-before {
  border-right: 1px solid rgba(71, 85, 105, 0.14);
}

.pp-current {
  background: rgba(34, 85, 216, 0.06);
  border-radius: 8px;
  border-right: 1px solid rgba(71, 85, 105, 0.14);
}

.pp-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink, #14213d);
  line-height: 1.4;
}

.pp-before .pp-text { color: var(--ink-soft, #4f5d78); font-weight: 500; }
.pp-after  .pp-text { color: var(--brand, #2255d8); }
.pp-current .pp-text { color: var(--ink, #14213d); }

.pp-current .pp-label { color: var(--brand, #2255d8); }

.pp-sub {
  font-size: 0.72rem;
  color: var(--ink-soft, #4f5d78);
  margin-top: 0.18rem;
  opacity: 0.75;
}

/* 화살표 구분선 */
.pp-before::after,
.pp-current::after {
  content: "›";
  position: absolute;
  right: -0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: rgba(71, 85, 105, 0.35);
  z-index: 1;
  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  .prereq-path {
    background: rgba(148, 163, 184, 0.04);
    border-color: rgba(148, 163, 184, 0.12);
  }
  .pp-label { color: rgba(148, 163, 184, 0.6); }
  .pp-before { border-right-color: rgba(148,163,184,0.1); }
  .pp-current { background: rgba(96, 165, 250, 0.07); border-right-color: rgba(148,163,184,0.1); }
  .pp-before .pp-text { color: rgba(180,200,230,0.55); }
  .pp-current .pp-text { color: rgba(232,240,255,0.9); }
  .pp-after .pp-text { color: #93c5fd; }
  .pp-current .pp-label { color: #93c5fd; }
  .pp-sub { color: rgba(148,163,184,0.5); }
  .pp-before::after, .pp-current::after { color: rgba(148,163,184,0.25); }
}

@media (max-width: 600px) {
  .prereq-path {
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 1rem;
  }
  .pp-before { border-right: none; border-bottom: 1px solid rgba(71,85,105,0.12); padding-bottom: 0.5rem; }
  .pp-current { border-right: none; border-bottom: 1px solid rgba(71,85,105,0.12); padding-bottom: 0.5rem; }
  .pp-before::after, .pp-current::after { display: none; }
}

/* ── .exam-tip — 시험 실전 팁 (indigo #4338ca) ── */
.exam-tip {
  background: rgba(67, 56, 202, 0.04);
  border: 1.5px solid rgba(67, 56, 202, 0.18);
  border-left: 4px solid #4338ca;
  border-radius: var(--radius-sm, 14px);
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
}

.et-label {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #4338ca;
  background: rgba(67, 56, 202, 0.09);
  border-radius: 4px;
  padding: 0.13em 0.55em;
  margin-bottom: 0.65rem;
}

.et-label::before {
  content: "✏️ ";
  font-style: normal;
}

.et-content {
  font-size: 0.93rem;
  color: var(--ink, #14213d);
  line-height: 1.7;
  margin: 0;
}

.et-content strong {
  color: #4338ca;
  font-weight: 700;
}

/* 팁 항목 리스트 형태일 때 */
.et-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.et-list li {
  font-size: 0.9rem;
  color: var(--ink, #14213d);
  line-height: 1.6;
  padding-left: 1.3rem;
  position: relative;
}

.et-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: #4338ca;
  font-size: 0.6em;
  top: 0.3em;
}

@media (prefers-color-scheme: dark) {
  .exam-tip {
    background: rgba(129, 120, 245, 0.05);
    border-color: rgba(129, 120, 245, 0.15);
    border-left-color: #818cf8;
  }
  .et-label { color: #a5b4fc; background: rgba(129,120,245,0.1); }
  .et-content { color: rgba(225, 225, 255, 0.88); }
  .et-content strong { color: #a5b4fc; }
  .et-list li { color: rgba(225, 225, 255, 0.82); }
  .et-list li::before { color: #818cf8; }
}

@media (max-width: 720px) {
  .exam-tip { padding: 0.9rem 1rem; }
  .et-content, .et-list li { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Loop 48 — 리텐션 훅
   .next-concept · .cross-link · .unit-progress
   ═══════════════════════════════════════════════════════════════ */

/* ─── .next-concept ──────────────────────────────────────────── */
.next-concept {
  position: relative;
  background: var(--surface, #f8faff);
  border: 1px solid rgba(34,85,216,0.14);
  border-radius: var(--radius-md, 20px);
  padding: 1.4rem 1.5rem 1.4rem 1.9rem;
  margin: 2rem 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.next-concept::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2255d8 0%, #4f7ff5 55%, #a5b9ff 100%);
  border-radius: 3px 0 0 3px;
}
.next-concept:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34,85,216,0.11);
}
.next-concept::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(34,85,216,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.nc-header {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.nc-label {
  font-size: 0.61rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #2255d8;
  background: rgba(34,85,216,0.09);
  border: 1px solid rgba(34,85,216,0.15);
  padding: 0.15rem 0.6rem; border-radius: 99px;
}
.nc-label::before { content: "→ "; }
.nc-reason {
  font-size: 1.04rem; font-weight: 700;
  color: var(--ink, #1a2540); line-height: 1.4;
  margin: 0 0 0.55rem;
}
.nc-preview {
  font-size: 0.87rem; color: rgba(26,37,64,0.6);
  line-height: 1.6; margin: 0 0 0.9rem;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(34,85,216,0.2);
  font-style: italic;
}
.nc-preview::after { content: " …"; color: rgba(34,85,216,0.45); }
.nc-footer {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.nc-meta {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.74rem; color: rgba(26,37,64,0.5);
}
.nc-diff { display: inline-flex; align-items: center; gap: 0.05rem; }
.nc-diff .star-on  { color: #f59e0b; }
.nc-diff .star-off { color: rgba(26,37,64,0.18); }
.nc-time::before { content: "⏱ "; }
.nc-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.84rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #2255d8 0%, #4f7ff5 100%);
  padding: 0.44rem 1.1rem; border-radius: 99px;
  text-decoration: none;
  transition: opacity 0.14s, transform 0.14s;
  white-space: nowrap;
}
.nc-link:hover { opacity: 0.88; transform: translateX(3px); }
.nc-link::after { content: " →"; }

@media (prefers-color-scheme: dark) {
  .next-concept { background: rgba(34,85,216,0.06); border-color: rgba(34,85,216,0.2); }
  .nc-reason { color: #e8eeff; }
  .nc-preview { color: rgba(232,238,255,0.55); border-left-color: rgba(79,127,245,0.3); }
  .nc-meta { color: rgba(232,238,255,0.45); }
  .nc-diff .star-off { color: rgba(232,238,255,0.18); }
}
@media (max-width: 720px) {
  .nc-reason { font-size: 0.96rem; }
  .nc-footer { flex-direction: column; align-items: flex-start; }
}

/* ─── .cross-link ────────────────────────────────────────────── */
.cross-link {
  margin: 1.5rem 0;
  padding: 0.85rem 1.15rem;
  background: rgba(13,148,136,0.04);
  border: 1.5px solid rgba(13,148,136,0.18);
  border-radius: var(--radius-sm, 14px);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.cl-label {
  font-size: 0.63rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #0d9488; white-space: nowrap; flex-shrink: 0;
}
.cl-label::before { content: "↗ "; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.cl-chip {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.77rem; font-weight: 600; color: #0f766e;
  background: rgba(13,148,136,0.08);
  border: 1px solid rgba(13,148,136,0.2);
  padding: 0.2rem 0.65rem; border-radius: 99px;
  text-decoration: none;
  transition: background 0.14s, color 0.14s, transform 0.12s;
}
.cl-chip:hover { background: rgba(13,148,136,0.14); color: #065f5a; transform: translateY(-1px); }

@media (prefers-color-scheme: dark) {
  .cross-link { background: rgba(13,148,136,0.06); border-color: rgba(13,148,136,0.22); }
  .cl-label { color: #2dd4bf; }
  .cl-chip { color: #2dd4bf; background: rgba(13,148,136,0.12); border-color: rgba(45,212,191,0.2); }
  .cl-chip:hover { color: #99f6e4; background: rgba(13,148,136,0.2); }
}

/* ─── .unit-progress ─────────────────────────────────────────── */
.unit-progress {
  margin: 1.5rem 0 2rem;
  padding: 0.85rem 1.15rem;
  background: var(--surface, #f8faff);
  border: 1px solid var(--line, rgba(0,0,0,0.1));
  border-radius: var(--radius-sm, 14px);
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
}
.up-label {
  font-size: 0.77rem; font-weight: 700;
  color: var(--ink, #1a2540); white-space: nowrap; flex-shrink: 0;
}
.up-track {
  flex: 1; min-width: 80px; height: 6px;
  background: rgba(34,85,216,0.1); border-radius: 99px;
  overflow: hidden; position: relative;
}
.up-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--up-pct, 33%);
  background: linear-gradient(90deg, #2255d8 0%, #4f7ff5 100%);
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.up-count {
  font-size: 0.72rem; font-weight: 700;
  color: #2255d8; white-space: nowrap; flex-shrink: 0;
}
.up-count::after { content: " 완료"; font-weight: 400; color: var(--ink, #1a2540); opacity: 0.52; }

@media (prefers-color-scheme: dark) {
  .unit-progress { background: rgba(34,85,216,0.05); border-color: rgba(34,85,216,0.15); }
  .up-label { color: #e8eeff; }
  .up-track { background: rgba(34,85,216,0.15); }
  .up-count { color: #7ba0ff; }
  .up-count::after { color: #e8eeff; }
}
@media (max-width: 720px) {
  .unit-progress { gap: 0.6rem; }
  .up-track { min-width: 60px; }
}

/* ═══════════════════════════════════════════════════════════════
   Loop 49 — 정보 구조
   .mobile-nav-bar
   ═══════════════════════════════════════════════════════════════ */

/* ─── .mobile-nav-bar ────────────────────────────────────────── */
/* 모바일 전용 하단 fixed 과목 탐색 바 */
.mobile-nav-bar {
  display: none; /* desktop: hidden */
}

@media (max-width: 720px) {
  .mobile-nav-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(255,255,255,0.92);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 0.28rem 0 max(0.28rem, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 18px rgba(0,0,0,0.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .mnb-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.14rem;
    padding: 0.28rem 0.15rem;
    text-decoration: none;
    color: rgba(26,37,64,0.38);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: color 0.13s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mnb-icon {
    font-size: 1.18rem;
    line-height: 1;
    transition: transform 0.13s;
    display: block;
  }
  .mnb-label { display: block; }

  .mnb-item:active .mnb-icon { transform: scale(0.86); }

  /* 홈 active */
  .mnb-item.mnb-home.active    { color: var(--brand, #2255d8); }
  /* 과목별 active 색상 코드 */
  .mnb-item.mnb-math.active    { color: #2255d8; }
  .mnb-item.mnb-korean.active  { color: #1f8f58; }
  .mnb-item.mnb-english.active { color: #7c3aed; }
  .mnb-item.mnb-science.active { color: #0d9488; }

  .mnb-item.active .mnb-icon {
    filter: drop-shadow(0 1px 3px currentColor);
    opacity: 0.85;
  }

  /* 하단 nav bar 높이만큼 body 패딩 확보 */
  body.page-article { padding-bottom: 4.2rem; }
}

@media (prefers-color-scheme: dark) and (max-width: 720px) {
  .mobile-nav-bar {
    background: rgba(14,20,36,0.93);
    border-top-color: rgba(255,255,255,0.07);
    box-shadow: 0 -2px 24px rgba(0,0,0,0.35);
  }
  .mnb-item { color: rgba(200,215,255,0.32); }
}

/* ═══════════════════════════════════════════════════════════════
   Loop 51 — 콘텐츠 깊이
   .history-note · .limit-note
   ═══════════════════════════════════════════════════════════════ */

/* ─── .history-note ──────────────────────────────────────────── */
/* 탄생 배경 박스: amber/sepia 고서 마진 노트 스타일 */
.history-note {
  position: relative;
  background: rgba(254,243,199,0.32);
  border-left: 4px solid #d97706;
  border-radius: 0 var(--radius-sm,14px) var(--radius-sm,14px) 0;
  padding: 1.05rem 1.35rem 1.05rem 1.6rem;
  margin: 1.5rem 0;
  overflow: hidden;
}
.history-note::before {
  content: "\201C";
  position: absolute;
  top: -0.55rem;
  left: 0.5rem;
  font-size: 3rem;
  color: #d97706;
  opacity: 0.18;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  pointer-events: none;
}
.hn-label {
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #92400e;
  background: rgba(146,64,14,0.09);
  border: 1px solid rgba(146,64,14,0.15);
  padding: 0.13rem 0.55rem;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 0.52rem;
}
.hn-label::before { content: "📜 "; }
.hn-content {
  font-size: 0.9rem;
  color: var(--ink, #1a2540);
  line-height: 1.68;
  font-style: italic;
}
.hn-content strong {
  font-style: normal;
  color: #92400e;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .history-note { background: rgba(120,53,15,0.09); border-left-color: #f59e0b; }
  .history-note::before { color: #f59e0b; }
  .hn-label { color: #fbbf24; background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.2); }
  .hn-content { color: rgba(254,243,199,0.8); }
  .hn-content strong { color: #fbbf24; }
}
@media (max-width: 720px) {
  .history-note { padding: 0.9rem 1rem 0.9rem 1.3rem; }
  .hn-content { font-size: 0.86rem; }
}

/* ─── .limit-note ────────────────────────────────────────────── */
/* 예외·한계 박스: slate 점선 상단 경계 */
.limit-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: rgba(71,85,105,0.04);
  border: 1px solid rgba(71,85,105,0.16);
  border-top: none;
  border-radius: 0 0 var(--radius-sm,14px) var(--radius-sm,14px);
  position: relative;
}
.limit-note::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #64748b 0px, #64748b 7px,
    transparent 7px, transparent 12px
  );
  border-radius: 99px 99px 0 0;
}
.ln-label {
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
  background: rgba(71,85,105,0.08);
  border: 1px solid rgba(71,85,105,0.16);
  padding: 0.13rem 0.55rem;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 0.52rem;
}
.ln-label::before { content: "⚠ "; }
.ln-items {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.ln-items li {
  font-size: 0.87rem;
  color: var(--ink, #1a2540);
  line-height: 1.55;
  padding-left: 1.1rem;
  position: relative;
}
.ln-items li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #64748b;
  font-weight: 700;
}
.ln-items li strong { color: #475569; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .limit-note { background: rgba(71,85,105,0.07); border-color: rgba(71,85,105,0.2); }
  .limit-note::before {
    background: repeating-linear-gradient(
      90deg,
      #94a3b8 0px, #94a3b8 7px,
      transparent 7px, transparent 12px
    );
  }
  .ln-label { color: #94a3b8; background: rgba(100,116,139,0.12); border-color: rgba(100,116,139,0.2); }
  .ln-items li { color: rgba(203,213,225,0.82); }
  .ln-items li::before { color: #94a3b8; }
  .ln-items li strong { color: #cbd5e1; }
}
@media (max-width: 720px) {
  .limit-note { padding: 0.85rem 1rem; }
  .ln-items li { font-size: 0.84rem; }
}

/* ====================================================
   Loop 52 — 첫인상 설득력
   .subject-stats-bar · .hero-concepts · .cm-prereq
   ==================================================== */

/* --- Subject Stats Bar --- */
.subject-stats-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.15rem;
}
.ssb-item {
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--ink, #1a2540);
  background: var(--surface, #f4f6fb);
  border: 1px solid var(--line, #e5e8f0);
  padding: 0.21rem 0.65rem;
  border-radius: 99px;
  white-space: nowrap;
  opacity: 0.82;
}
.ssb-item:first-child {
  background: rgba(34,85,216,0.07);
  border-color: rgba(34,85,216,0.16);
  color: var(--brand, #2255d8);
  font-weight: 700;
  opacity: 1;
}

/* --- Hero Concepts --- */
.hero-concepts {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--surface, #f4f6fb);
  border: 1px solid var(--line, #e5e8f0);
  border-radius: var(--radius-md, 20px);
  position: relative;
  overflow: hidden;
}
.hero-concepts::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand,#2255d8) 0%, rgba(34,85,216,0.25) 100%);
}
.hc-label {
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand, #2255d8);
  opacity: 0.75;
  display: block;
  margin-bottom: 0.75rem;
}
.hc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.hc-card {
  background: var(--page, #fff);
  border: 1px solid var(--line, #e5e8f0);
  border-radius: var(--radius-sm, 14px);
  padding: 0.85rem 0.95rem 0.9rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(34,85,216,0.09);
  border-color: rgba(34,85,216,0.26);
  text-decoration: none;
}
.hc-icon {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 0.22rem;
}
.hc-name {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--ink, #1a2540);
  line-height: 1.3;
}
.hc-desc {
  font-size: 0.71rem;
  color: #64748b;
  line-height: 1.48;
}

/* --- Card Prereq Pill --- */
.cm-prereq {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand, #2255d8);
  background: rgba(34,85,216,0.06);
  border: 1px solid rgba(34,85,216,0.13);
  padding: 0.11rem 0.42rem;
  border-radius: 99px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
}
.cm-prereq::before {
  content: "←";
  font-weight: 800;
  font-size: 0.63rem;
  opacity: 0.65;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .ssb-item { color: rgba(203,213,225,0.68); }
  .ssb-item:first-child {
    color: rgba(100,149,237,0.88);
    background: rgba(34,85,216,0.1);
    border-color: rgba(34,85,216,0.2);
  }
  .hero-concepts {
    background: rgba(34,85,216,0.04);
    border-color: rgba(34,85,216,0.1);
  }
  .hc-card {
    background: rgba(255,255,255,0.025);
    border-color: rgba(255,255,255,0.07);
  }
  .hc-card:hover {
    border-color: rgba(34,85,216,0.3);
    background: rgba(34,85,216,0.06);
  }
  .hc-name { color: rgba(226,232,240,0.88); }
  .hc-desc { color: rgba(148,163,184,0.75); }
  .cm-prereq {
    color: rgba(100,149,237,0.82);
    background: rgba(34,85,216,0.08);
    border-color: rgba(34,85,216,0.16);
  }
}
@media (max-width: 720px) {
  .hc-grid { grid-template-columns: 1fr; gap: 0.42rem; }
  .hc-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
  }
  .hc-icon { margin-bottom: 0; flex-shrink: 0; margin-top: 0.05rem; }
  .subject-stats-bar { gap: 0.35rem; }
  .ssb-item { font-size: 0.67rem; padding: 0.18rem 0.55rem; }
}

/* ====================================================
   Loop 53 — 학습 효과 장치
   .key-practice · .step-solution
   ==================================================== */

/* --- Key Practice (연습 진입 각성 박스) --- */
.key-practice {
  position: relative;
  margin: 1.8rem 0 0.6rem;
  padding: 0.88rem 3rem 0.88rem 1.5rem;
  background: linear-gradient(135deg,
    rgba(34,85,216,0.07) 0%,
    rgba(34,85,216,0.02) 100%);
  border-left: 4px solid var(--brand, #2255d8);
  border-radius: 0 var(--radius-sm,14px) var(--radius-sm,14px) 0;
  overflow: hidden;
}
.key-practice::after {
  content: "✎";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: var(--brand, #2255d8);
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.kp-label {
  display: inline-block;
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand, #2255d8);
  background: rgba(34,85,216,0.09);
  border: 1px solid rgba(34,85,216,0.18);
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  margin-bottom: 0.3rem;
}
.kp-desc {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink, #1a2540);
  line-height: 1.55;
  margin: 0;
}
.kp-desc strong { color: var(--brand, #2255d8); }

/* --- Step Solution (단계별 접힘 풀이) --- */
.step-solution {
  margin: 1.4rem 0;
  border: 1px solid var(--line, #e5e8f0);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
}
.ss-header {
  padding: 0.82rem 1.2rem;
  background: var(--surface, #f4f6fb);
  border-bottom: 1px solid var(--line, #e5e8f0);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink, #1a2540);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ss-header::before {
  content: "∫";
  font-size: 1.05rem;
  color: var(--brand, #2255d8);
  font-weight: 900;
  line-height: 1;
}
.ss-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step-counter;
}
.ss-step {
  counter-increment: step-counter;
  border-bottom: 1px solid var(--line, #e5e8f0);
}
.ss-step:last-child { border-bottom: none; }
.ss-step details { width: 100%; }
.ss-step summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.68rem 1.2rem;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink, #1a2540);
  list-style: none;
  transition: background 0.13s ease;
  user-select: none;
}
.ss-step summary::-webkit-details-marker { display: none; }
.ss-step summary::before {
  content: counter(step-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(34,85,216,0.09);
  color: var(--brand, #2255d8);
  font-size: 0.71rem;
  font-weight: 800;
  flex-shrink: 0;
  border: 1.5px solid rgba(34,85,216,0.2);
  transition: background 0.13s, border-color 0.13s;
}
.ss-step summary::after {
  content: "▸";
  margin-left: auto;
  font-size: 0.72rem;
  color: #94a3b8;
  transition: transform 0.13s ease, color 0.13s;
}
.ss-step details[open] summary::after {
  transform: rotate(90deg);
  color: var(--brand, #2255d8);
}
.ss-step details[open] summary::before {
  background: rgba(34,85,216,0.16);
  border-color: rgba(34,85,216,0.38);
}
.ss-step summary:hover { background: rgba(34,85,216,0.03); }
.ss-step details[open] summary {
  border-bottom: 1px solid var(--line, #e5e8f0);
}
.ss-step-content {
  padding: 0.85rem 1.2rem 0.88rem 3.4rem;
  font-size: 0.875rem;
  line-height: 1.64;
  color: var(--ink, #1a2540);
  background: rgba(34,85,216,0.015);
}
.ss-step-content .formula { margin: 0.45rem 0; }

/* dark mode */
@media (prefers-color-scheme: dark) {
  .key-practice {
    background: linear-gradient(135deg,
      rgba(34,85,216,0.1) 0%,
      rgba(34,85,216,0.04) 100%);
    border-left-color: rgba(34,85,216,0.65);
  }
  .kp-label {
    color: rgba(100,149,237,0.88);
    background: rgba(34,85,216,0.12);
    border-color: rgba(34,85,216,0.24);
  }
  .kp-desc { color: rgba(226,232,240,0.86); }
  .step-solution { border-color: rgba(255,255,255,0.08); }
  .ss-header {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    color: rgba(226,232,240,0.88);
  }
  .ss-step { border-color: rgba(255,255,255,0.06); }
  .ss-step summary { color: rgba(226,232,240,0.86); }
  .ss-step summary::before {
    background: rgba(34,85,216,0.14);
    border-color: rgba(34,85,216,0.28);
    color: rgba(100,149,237,0.82);
  }
  .ss-step details[open] summary::before {
    background: rgba(34,85,216,0.22);
    border-color: rgba(34,85,216,0.45);
  }
  .ss-step summary:hover { background: rgba(255,255,255,0.03); }
  .ss-step details[open] summary { border-color: rgba(255,255,255,0.06); }
  .ss-step-content {
    background: rgba(34,85,216,0.04);
    color: rgba(203,213,225,0.84);
  }
}
@media (max-width: 720px) {
  .key-practice { padding: 0.78rem 2.5rem 0.78rem 1.2rem; }
  .kp-desc { font-size: 0.84rem; }
  .ss-step-content { padding-left: 2.8rem; }
  .ss-step summary { padding: 0.6rem 1rem; }
}

/* ── Loop 54 — .verify-bar ──────────────────────────────────── */
.verify-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.46rem 0 0.44rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.verify-bar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2.4rem;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
}
.vb-curriculum {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.19rem 0.52rem;
  background: rgba(34,85,216,0.065);
  border: 1px solid rgba(34,85,216,0.17);
  border-radius: 3px;
  color: var(--brand);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.vb-curriculum::before {
  content: "▪";
  font-size: 0.44rem;
  opacity: 0.6;
}
.vb-sep {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0, var(--line) 3px,
    transparent 3px, transparent 8px
  );
  margin: 0 0.8rem;
  opacity: 0.65;
}
.vb-reviewed {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.635rem;
  font-weight: 500;
  color: rgba(30,30,30,0.48);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.vb-reviewed::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px rgba(31,143,88,0.14);
}
.vb-report {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.65rem;
  padding: 0.16rem 0.42rem;
  font-size: 0.615rem;
  font-weight: 500;
  color: rgba(30,30,30,0.34);
  border-radius: 2px;
  text-decoration: none;
  transition: color 0.14s, background 0.14s;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.vb-report::before {
  content: "⚑";
  font-size: 0.57rem;
}
.vb-report:hover {
  color: #b91c1c;
  background: rgba(185,28,28,0.07);
}
@media (prefers-color-scheme: dark) {
  .vb-curriculum {
    background: rgba(34,85,216,0.1);
    border-color: rgba(34,85,216,0.22);
    color: rgba(100,149,237,0.9);
  }
  .vb-reviewed { color: rgba(203,213,225,0.42); }
  .vb-report { color: rgba(203,213,225,0.28); }
  .vb-report:hover { color: #f87171; background: rgba(248,113,113,0.06); }
}
@media (max-width: 720px) {
  .vb-sep { display: none; }
  .vb-reviewed { display: none; }
  .verify-bar { padding: 0.4rem 0 0.38rem; margin-bottom: 1.2rem; }
}

/* ── Loop 55 — .exam-pattern ────────────────────────────────── */
.exam-pattern {
  position: relative;
  margin: 2rem 0;
  border: 1px solid rgba(217,119,6,0.2);
  border-left: 4px solid #d97706;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(217,119,6,0.03);
  overflow: hidden;
}
.exam-pattern::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d97706 0%, rgba(217,119,6,0.18) 70%, transparent 100%);
}
.ep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 1.25rem 0.6rem 1.45rem;
  border-bottom: 1px solid rgba(217,119,6,0.12);
  gap: 0.8rem;
  flex-wrap: wrap;
}
.ep-label {
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #92400e;
}
.ep-label::before {
  content: "◆ ";
  font-size: 0.44rem;
  vertical-align: 0.12em;
  opacity: 0.7;
}
.ep-freq {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.72rem;
  color: #d97706;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ep-freq::before {
  content: "출제빈도";
  font-size: 0.57rem;
  font-weight: 700;
  color: #92400e;
  margin-right: 0.28rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ep-body {
  padding: 0.8rem 1.25rem 0.9rem 1.45rem;
}
.ep-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.78rem;
  list-style: none;
  padding: 0;
}
.ep-type-item {
  padding: 0.19rem 0.56rem;
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.18);
  border-radius: 99px;
  font-size: 0.71rem;
  color: #78350f;
  font-weight: 600;
}
.ep-trap {
  position: relative;
  padding: 0.55rem 0.95rem 0.6rem 1.1rem;
  background: rgba(220,38,38,0.04);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.ep-trap::before {
  content: "⚠ 함정 포인트";
  display: block;
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #dc2626;
  margin-bottom: 0.28rem;
}
.ep-trap p { margin: 0; line-height: 1.55; }
@media (prefers-color-scheme: dark) {
  .exam-pattern {
    background: rgba(217,119,6,0.05);
    border-color: rgba(217,119,6,0.22);
    border-left-color: #d97706;
  }
  .ep-label { color: #fcd34d; }
  .ep-freq { color: #fbbf24; }
  .ep-freq::before { color: #fcd34d; }
  .ep-header { border-color: rgba(217,119,6,0.14); }
  .ep-type-item {
    background: rgba(217,119,6,0.1);
    border-color: rgba(217,119,6,0.22);
    color: #fde68a;
  }
  .ep-trap {
    background: rgba(220,38,38,0.07);
    border-color: rgba(220,38,38,0.2);
  }
  .ep-trap::before { color: #f87171; }
  .ep-trap p { color: rgba(203,213,225,0.8); }
}
@media (max-width: 720px) {
  .ep-header { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .ep-body { padding: 0.7rem 1rem 0.8rem 1.15rem; }
}

/* ── Loop 55 — .real-world ──────────────────────────────────── */
.real-world {
  margin: 1.8rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.rw-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.68rem 1.25rem;
  background: linear-gradient(90deg, rgba(31,143,88,0.07) 0%, transparent 75%);
  border-bottom: 1px solid var(--line);
}
.rw-label {
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--success);
}
.rw-label::before {
  content: "◎ ";
  font-size: 0.46rem;
  vertical-align: 0.12em;
}
.rw-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rw-item {
  padding: 0.88rem 1.05rem 0.95rem;
  border-right: 1px solid var(--line);
  transition: background 0.12s;
}
.rw-item:last-child { border-right: none; }
.rw-item:hover { background: rgba(34,85,216,0.025); }
.rw-icon {
  font-size: 1.45rem;
  display: block;
  margin-bottom: 0.38rem;
  line-height: 1;
}
.rw-field {
  display: block;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.2rem;
}
.rw-desc {
  font-size: 0.79rem;
  color: rgba(30,30,30,0.7);
  line-height: 1.46;
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  .real-world { border-color: rgba(255,255,255,0.08); }
  .rw-header {
    background: linear-gradient(90deg, rgba(31,143,88,0.1) 0%, transparent 75%);
    border-color: rgba(255,255,255,0.08);
  }
  .rw-item { border-color: rgba(255,255,255,0.08); }
  .rw-item:hover { background: rgba(34,85,216,0.06); }
  .rw-desc { color: rgba(203,213,225,0.68); }
}
@media (max-width: 720px) {
  .rw-items { grid-template-columns: 1fr; }
  .rw-item { border-right: none; border-bottom: 1px solid var(--line); }
  .rw-item:last-child { border-bottom: none; }
}

/* ── Loop 56 — .next-hook ───────────────────────────────────── */
.next-hook {
  position: relative;
  margin: 2.8rem 0 0.5rem;
  padding: 1.35rem 1rem 1.2rem 1.5rem;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.next-hook::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
}
.next-hook::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(34,85,216,0.018) 55%,
    rgba(34,85,216,0.038) 100%
  );
  pointer-events: none;
}
.nh-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.52;
  margin-bottom: 0.52rem;
}
.nh-question {
  font-size: 0.97rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(30,30,30,0.62);
  line-height: 1.52;
  margin: 0 0 0.88rem;
  letter-spacing: -0.01em;
}
.nh-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.91rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(34,85,216,0.22);
  padding-bottom: 0.04rem;
  transition: gap 0.16s ease, border-color 0.16s ease;
}
.nh-link-arrow {
  display: inline-block;
  transition: transform 0.16s ease;
}
.nh-link:hover { gap: 0.62rem; border-color: rgba(34,85,216,0.5); }
.nh-link:hover .nh-link-arrow { transform: translateX(4px); }
@media (prefers-color-scheme: dark) {
  .next-hook::after {
    background: linear-gradient(105deg, transparent 0%, rgba(34,85,216,0.04) 100%);
  }
  .nh-question { color: rgba(203,213,225,0.55); }
  .nh-label { color: rgba(100,149,237,0.6); opacity: 1; }
  .nh-link { border-color: rgba(100,149,237,0.28); }
  .nh-link:hover { border-color: rgba(100,149,237,0.55); }
}
@media (max-width: 720px) {
  .next-hook { padding: 1.1rem 0.9rem 1rem 1.15rem; }
  .nh-question { font-size: 0.9rem; }
}

/* ===========================
   모바일 UX 강화 (루프58)
   한국어 줄바꿈 · 터치 최적화 · 터치 타깃
   =========================== */

/* ── 1. 한국어 단어 중간 줄바꿈 방지 ──────────────────────────────
   keep-all: CJK 계열은 어절 단위로만 줄바꿈 (기대→\n방정식 방지)
   overflow-wrap: anywhere: 컨테이너 초과 시 폴백 줄바꿈 허용       */
p, li, dt, dd, h1, h2, h3, h4, h5, h6,
th, td, caption, figcaption, blockquote {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 2. iOS 탭 하이라이트 · 300ms 딜레이 제거 ─────────────────── */
a, button, [role="button"], summary, label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 3. 내부 스크롤 영역의 부모 스크롤 전파 방지 ────────────────── */
.table-wrap,
pre,
.concept-journey {
  overscroll-behavior: contain;
}

/* ── 4. 모바일 터치 타깃 · 레이아웃 강화 ─────────────────────── */
@media (max-width: 720px) {
  /* entry-point 경로 링크 — 44px 터치 타깃 */
  .entry-point-path a {
    padding: 0.48rem 0.65rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* page-overview 목차 링크 — 여유 있는 터치 영역 */
  .page-overview-list li {
    padding-block: 0.25rem;
  }
  .page-overview-list a {
    display: inline-block;
    padding-block: 0.15rem;
  }

  /* ep-row-label — 소형 폰(320px)에서 줄바꿈 허용 */
  .ep-row-label {
    white-space: normal;
  }

  /* entry-point-path 전체 — 소형 폰 폰트 조정 */
  .entry-point-path {
    font-size: 0.875rem;
  }

  /* next-hook 링크 — 터치 타깃 확보 */
  .nh-link {
    padding-block: 0.4rem;
    margin-block: -0.4rem;
  }
}

/* ===========================
   콘텐츠 깊이 강화 (루프59)
   principle-line — 섹션별 핵심 원리 한 줄
   =========================== */

/* 각 h2 섹션 바로 아래 — 공식이 아닌 원리를 언어로 */
.principle-line {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: -0.4rem 0 1.4rem;
  padding: 0.56rem 0.9rem 0.56rem 0;
  border-bottom: 1px solid rgba(34, 85, 216, 0.09);
  position: relative;
}
.principle-line::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, var(--brand) 0%, rgba(34,85,216,0.18) 100%);
  border-radius: 2px;
}
.pl-tag {
  flex-shrink: 0;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.62;
  padding-top: 0.22rem;
  white-space: nowrap;
  padding-left: 0.65rem;
}
.pl-text {
  font-size: 0.93rem;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.72;
  line-height: 1.55;
  margin: 0;
  letter-spacing: -0.008em;
}
.pl-text strong {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  .principle-line { border-bottom-color: rgba(91,143,238,0.12); }
  .pl-tag { color: var(--brand-strong, #93baff); }
  .pl-text { color: var(--ink, #e2e8f4); opacity: 0.65; }
  .pl-text strong { color: var(--ink, #e2e8f4); opacity: 0.9; }
}
@media (max-width: 720px) {
  .principle-line { margin-bottom: 1.1rem; gap: 0.5rem; }
  .pl-text { font-size: 0.87rem; }
}

/* ── 루프61: .quick-check — 인라인 즉시확인 컴포넌트 ── */
.quick-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgba(34, 85, 216, 0.04);
  border: 1px solid rgba(34, 85, 216, 0.13);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm, 14px) var(--radius-sm, 14px) 0;
  padding: 0.7rem 0.9rem 0.7rem 0.75rem;
  margin: 0.6rem 0 1.1rem;
}
.qc-icon {
  flex-shrink: 0;
  font-size: 0.95rem;
  margin-top: 0.05rem;
}
.qc-text {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.qc-text strong {
  color: var(--brand);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .quick-check {
    background: rgba(91, 143, 238, 0.07);
    border-color: rgba(91, 143, 238, 0.2);
    border-left-color: var(--brand-strong, #93baff);
  }
  .qc-text strong { color: var(--brand-strong, #93baff); }
}
@media (max-width: 720px) {
  .quick-check { padding: 0.6rem 0.75rem 0.6rem 0.65rem; gap: 0.45rem; }
  .qc-text { font-size: 0.85rem; }
}

/* ── 루프62: 신뢰 신호 강화 ── */

/* 1. curriculum-badge 호버 tooltip */
.curriculum-badge {
  position: relative;
  cursor: default;
}
.curriculum-badge[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #1a1f2e);
  color: #fff;
  font-size: 0.62rem;
  font-family: -apple-system, "Noto Sans KR", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 0.28rem 0.55rem;
  border-radius: 5px;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  opacity: 1;
}
.curriculum-badge[title]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink, #1a1f2e);
  pointer-events: none;
  z-index: 101;
}

/* 2. vb-reviewed 모바일에서 표시 (기존 display:none 오버라이드) */
@media (max-width: 720px) {
  .vb-reviewed {
    display: inline-flex;
    font-size: 0.58rem;
    opacity: 0.7;
  }
}

/* 3. vb-report 강화 — 더 눈에 띄는 버튼 스타일 */
.vb-report {
  border: 1px solid rgba(100,100,100,0.15);
}
.vb-report:hover {
  border-color: rgba(185,28,28,0.25);
}
@media (prefers-color-scheme: dark) {
  .curriculum-badge[title]:hover::after {
    background: #e2e8f4;
    color: #1a1f2e;
  }
  .curriculum-badge[title]:hover::before {
    border-top-color: #e2e8f4;
  }
  .vb-report { border-color: rgba(180,190,210,0.1); }
}

/* ── 루프63: 차별화 — .alt-compare 비교 컴포넌트 ── */
.alt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 14px);
  overflow: hidden;
  margin: 0.8rem 0 1.4rem;
  font-size: 0.9rem;
}
.ac-col {
  padding: 0.75rem 0.9rem;
}
.ac-col--other {
  background: rgba(100,100,100,0.04);
  border-right: 1px solid var(--line);
}
.ac-col--here {
  background: rgba(34,85,216,0.04);
}
.ac-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  opacity: 0.5;
}
.ac-col--other .ac-label { color: var(--ink); }
.ac-col--here .ac-label { color: var(--brand); opacity: 0.8; }
.ac-col p {
  margin: 0;
  line-height: 1.52;
  font-size: 0.88rem;
  color: var(--ink);
  opacity: 0.82;
}
.ac-col--here p { opacity: 0.95; }
.ac-col--here p strong { color: var(--brand); }
@media (prefers-color-scheme: dark) {
  .ac-col--other { background: rgba(255,255,255,0.03); }
  .ac-col--here { background: rgba(34,85,216,0.08); }
}
@media (max-width: 600px) {
  .alt-compare { grid-template-columns: 1fr; }
  .ac-col--other { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ── 루프63: .fit-for 타겟 사용자 2열 카드 ── */
.fit-for {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 0.8rem 0 1.4rem;
}
.fit-col {
  border-radius: var(--radius-sm, 14px);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
}
.fit-col--yes {
  background: rgba(31,143,88,0.05);
  border-color: rgba(31,143,88,0.18);
}
.fit-col--no {
  background: rgba(100,100,100,0.04);
  border-color: rgba(100,100,100,0.14);
}
.fit-col-label {
  display: block;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.fit-col--yes .fit-col-label { color: var(--success, #1f8f58); }
.fit-col--no .fit-col-label { color: var(--ink); opacity: 0.45; }
.fit-col ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.865rem;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.82;
}
@media (max-width: 600px) {
  .fit-for { grid-template-columns: 1fr; }
}

/* ── 루프64: next-hook 리텐션 강화 ── */

/* nh-question 강조: 이탤릭 제거 + 살짝 더 선명하게 */
.nh-question {
  font-style: normal;
  color: rgba(30,30,30,0.72);
  font-weight: 500;
}
.nh-question em {
  font-style: italic;
  color: var(--brand);
  font-weight: 600;
}
/* next-hook 배경 강화 — 더 눈에 띄게 */
.next-hook {
  background: linear-gradient(
    to right,
    rgba(34,85,216,0.04) 0%,
    rgba(34,85,216,0.015) 60%,
    transparent 100%
  );
  border-radius: 0 var(--radius-sm, 14px) var(--radius-sm, 14px) 0;
}
/* nh-link 강화 — 더 버튼스럽게 */
.nh-link {
  margin-top: 0.1rem;
  background: rgba(34,85,216,0.06);
  padding: 0.32rem 0.72rem 0.32rem 0.58rem;
  border-radius: 99px;
  border: 1.5px solid rgba(34,85,216,0.22);
  font-size: 0.88rem;
}
.nh-link:hover {
  background: rgba(34,85,216,0.11);
}
@media (prefers-color-scheme: dark) {
  .next-hook {
    background: linear-gradient(to right, rgba(34,85,216,0.08) 0%, transparent 100%);
  }
  .nh-question { color: rgba(203,213,225,0.68); }
  .nh-link {
    background: rgba(34,85,216,0.1);
    border-color: rgba(91,143,238,0.3);
  }
  .nh-link:hover { background: rgba(34,85,216,0.18); }
}
@media (max-width: 720px) {
  .nh-link {
    padding: 0.38rem 0.68rem 0.38rem 0.52rem;
    font-size: 0.85rem;
  }
}

/* ── 루프65: 정보 구조 — TOC 활성 하이라이트 ── */

/* page-overview 현재 섹션 active */
.page-overview-list a.active {
  color: var(--brand);
  font-weight: 700;
}
.page-overview-list li:has(a.active)::before {
  opacity: 1;
  color: var(--brand);
}

/* sidebar toc-link 현재 섹션 active */
.toc-link.active {
  color: var(--brand);
  font-weight: 700;
  border-left: 2px solid var(--brand);
  padding-left: 0.45rem;
  margin-left: -0.45rem;
}
.toc-link {
  padding-left: 0;
  margin-left: 0;
  transition: color 0.15s, padding-left 0.15s, border-left 0.15s;
  border-left: 2px solid transparent;
}

@media (prefers-color-scheme: dark) {
  .page-overview-list a.active { color: var(--brand-strong, #93baff); }
  .toc-link.active { color: var(--brand-strong, #93baff); border-left-color: var(--brand-strong, #93baff); }
}