@font-face {
  font-family: "Pretendard Exition";
  src: url("/static/fonts/Pretendard-Regular.subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard Exition";
  src: url("/static/fonts/Pretendard-Medium.subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard Exition";
  src: url("/static/fonts/Pretendard-SemiBold.subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

:root {
  --bg: #f8fafc;
  --bg-2: #ffffff;
  --line: #dce3eb;
  --text: #172033;
  --dim: #5d6b7a;
  --gold: #2164e8;
  --gold-soft: rgba(33, 100, 232, .28);
  --accent-2: #0f8f8a;
  --good: #0f8f8a;
  --reader-blue-soft: #edf3ff;
  --reader-teal-soft: #e8f6f4;
  --reader-grid: #e6ebf1;
  --reader-font: "Pretendard Exition", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --reader-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--reader-font) !important;
}

body[data-reader-page="worldview"] {
  background-image: none !important;
  line-height: 1.8;
}

.skip-link {
  border-radius: 8px;
  background: var(--text);
  color: #fff;
}

.global-nav {
  min-height: 68px;
  padding: 10px clamp(16px, 4vw, 52px);
  border-bottom-color: rgba(220, 227, 235, .86);
  background: rgba(248, 250, 252, .94);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
}

.global-nav .nav-logo {
  gap: 10px;
  color: var(--text);
  font-family: var(--reader-font);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.global-nav .nav-mark {
  width: 28px;
  height: 28px;
}

.nav-menu-trigger,
.chapter-jump > summary,
.resume-reading {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: var(--reader-font);
  font-weight: 600;
}

.nav-menu-trigger:hover,
.global-nav .nav-menu[open] .nav-menu-trigger,
.chapter-jump[open] > summary,
.resume-reading:hover {
  border-color: #aebbc9;
  background: #f2f5f8;
  color: var(--text);
}

.global-nav .nav-menu .nav-menu-panel,
.chapter-jump-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(31, 49, 75, .13);
}

.nm-group + .nm-group { border-top-color: var(--line); }
.nm-group-title,
.chapter-jump-panel .jump-no { color: var(--gold); font-family: var(--reader-font); }
.global-nav .nav-menu-panel a,
.chapter-jump-panel a { color: var(--text); font-family: var(--reader-font); }
.global-nav .nav-menu-panel a:hover,
.chapter-jump-panel a:hover,
.chapter-jump-panel a[aria-current="location"] { background: #f2f5f8; color: var(--gold); }

.reading-bar {
  top: 68px;
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}

.reading-bar-inner { width: min(100% - 32px, 920px); }
.reading-position { color: var(--text); font-family: var(--reader-font); font-weight: 600; }
.reading-meter { background: var(--line); }
.reading-meter > span { background: var(--gold); }
.reading-percent { color: var(--dim); }

.container {
  width: min(100% - 40px, 860px);
  max-width: none;
  padding: 96px 0 144px;
}

.cover {
  margin-bottom: 96px;
  text-align: left;
}

.cover-mark {
  margin-bottom: 24px;
  color: var(--gold);
  font-family: var(--reader-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
}

.cover h1 {
  max-width: 8em;
  margin-bottom: 22px;
  color: var(--text);
  font-family: var(--reader-font);
  font-size: clamp(54px, 8vw, 82px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.cover .subtitle {
  margin-bottom: 44px;
  color: var(--dim);
  font-family: var(--reader-font);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.cover .meta {
  width: min(100%, 620px);
  padding: 20px 0;
  gap: 8px 24px;
  border-color: var(--line);
  color: var(--dim);
  font-size: 13px;
}

.cover .meta b { color: var(--text); font-weight: 600; }
.cover .meta .label {
  color: var(--dim);
  font-family: var(--reader-font);
  font-weight: 600;
  letter-spacing: .04em;
}

.quick,
.toc {
  border: 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.quick { margin-bottom: 28px; }
.quick > summary {
  padding: 18px 2px;
  color: var(--text);
  font-family: var(--reader-font);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}
.quick > summary:hover { color: var(--gold); }
.quick .q-body { padding: 8px 0 28px; }
.quick .q-thesis {
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 0;
  background: var(--reader-blue-soft);
  color: var(--text);
  font-family: var(--reader-font);
  font-size: 16px;
  font-weight: 600;
}
.quick .q-line { color: var(--text); }
.quick .q-line b { color: var(--text); }

.toc {
  margin-bottom: 112px;
  padding: 28px 0;
}
.toc .toc-title {
  margin-bottom: 18px;
  color: var(--dim);
  font-family: var(--reader-font);
  font-weight: 650;
  letter-spacing: .08em;
  text-align: left;
}
.toc a { color: var(--text); font-size: 14px; }
.toc a:hover { color: var(--gold); }
.toc a .no { color: var(--gold); font-family: var(--reader-mono); }

.section {
  margin-bottom: 112px;
  scroll-margin-top: 132px;
}

.section-mark {
  margin-bottom: 12px;
  color: var(--gold);
  font-family: var(--reader-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-align: left;
}

.section-title {
  max-width: 22em;
  margin: 0 0 34px;
  color: var(--text);
  font-family: var(--reader-font);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.025em;
  text-align: left;
  text-wrap: balance;
}

.section p {
  max-width: 72ch;
  margin-bottom: 22px;
  color: #28364a;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.92;
  word-break: keep-all;
}

.section p b,
.section blockquote b,
.card .c-body b { color: var(--text) !important; font-weight: 650; }

.section blockquote {
  margin: 38px 0;
  padding: 25px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 17px;
  line-height: 1.9;
}

.cards {
  gap: 0;
  margin: 34px 0;
  border-top: 1px solid var(--text);
}
.card,
.layer-map .card {
  min-height: 0;
  padding: 20px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.card .c-label { color: var(--gold); font-family: var(--reader-font); font-weight: 650; letter-spacing: 0; }
.card .c-body { color: #344255; font-size: 14.5px; }
.layer-map .card::before,
.layer-map .card::after { display: none; }

.epistemic-note {
  padding: 20px 22px;
  border: 0;
  border-radius: 0;
  background: var(--reader-teal-soft);
  color: #38545c !important;
  font-size: 14.5px !important;
}

.thesis {
  margin-bottom: 112px;
  padding: 44px 0;
  border: 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.thesis .t-label { color: var(--dim); font-family: var(--reader-font); font-weight: 650; letter-spacing: .06em; }
.thesis .t-body { color: var(--text); font-family: var(--reader-font); font-size: clamp(20px, 3vw, 27px); font-weight: 600; line-height: 1.75; }

.concept-finder {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.concept-finder h3 { color: var(--text); font-family: var(--reader-font); }
.concept-finder p { color: var(--dim); }
.finder-row input {
  border-color: var(--line);
  background: var(--bg);
  color: var(--text);
}
.finder-row input::placeholder { color: #7b8795; }
.finder-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(33, 100, 232, .12); }
.finder-clear { border-color: var(--line); background: #fff; color: var(--dim); }

.term-group-title { color: var(--gold); font-family: var(--reader-font); font-weight: 650; letter-spacing: .04em; }
.terms { gap: 0 24px; border-top: 1px solid var(--text); }
.term {
  padding: 17px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.term .w { color: var(--text); font-family: var(--reader-font); }
.term .d { color: var(--dim); }
.advanced-terms { border-top-color: var(--line); }
.advanced-terms > summary { color: var(--text); font-family: var(--reader-font); }

.paths,
.secondary-paths {
  display: block;
  margin-top: 30px;
  border-top: 1px solid var(--text);
}
.path,
.path.gold,
.path.cyan,
.path.primary-practical {
  min-height: 118px;
  padding: 24px 2px;
  display: grid;
  grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.path:hover,
.path.gold:hover,
.path.cyan:hover,
.path.primary-practical:hover { transform: none; background: #f2f5f8; }
.path .p-title { margin: 0; color: var(--text); font-family: var(--reader-font); }
.path .p-body { color: var(--dim); }
.path .p-go,
.path.gold .p-go,
.path.cyan .p-go,
.path.primary-practical .p-go { margin: 0; color: var(--gold); white-space: nowrap; }

.colophon {
  border-top-color: var(--line);
  color: var(--dim);
}
.colophon b { color: var(--text); }
.colophon a { border: 0; color: var(--gold); }

/* Canon-grounded diagrams */
.theory-figure {
  margin: 44px 0 50px;
  padding: 26px 0 22px;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
}

.theory-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mobile-diagram { display: none; }

.theory-figure figcaption {
  max-width: 690px;
  margin-top: 24px;
  color: var(--dim);
  font-size: 14.5px;
  line-height: 1.76;
}

.theory-figure figcaption strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.48;
  letter-spacing: -.015em;
}
.theory-figure figcaption > span { display: block; max-width: 64ch; }
.theory-figure .figure-limit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: #536476;
  font-size: 13.5px;
}
.theory-figure .figure-limit b {
  margin-right: 8px;
  color: var(--gold);
  font-weight: 650;
}

.theory-figure .grid { stroke: var(--reader-grid); stroke-width: 1; }
.theory-figure .axis { stroke: #aebbc9; stroke-width: 1.25; fill: none; }
.theory-figure .ink { stroke: var(--text); stroke-width: 2; fill: none; }
.theory-figure .blue { stroke: var(--gold); stroke-width: 2.6; fill: none; }
.theory-figure .teal { stroke: var(--accent-2); stroke-width: 2.6; fill: none; }
.theory-figure .soft-blue { fill: var(--reader-blue-soft); stroke: none; }
.theory-figure .soft-teal { fill: var(--reader-teal-soft); stroke: none; }
.theory-figure .white { fill: #fff; }
.theory-figure .dot { fill: var(--text); }
.theory-figure .blue-dot { fill: var(--gold); }
.theory-figure .teal-dot { fill: var(--accent-2); }
.theory-figure .dash { stroke-dasharray: 5 7; }
.theory-figure text { fill: var(--dim); font-family: var(--reader-font); font-size: 13px; }
.theory-figure .label { fill: var(--text); font-size: 14px; font-weight: 650; }
.theory-figure .small { font-size: 11px; }
.theory-figure .formula {
  fill: var(--text);
  font-family: "Cambria Math", "STIX Two Math", "Segoe UI Symbol", var(--reader-mono);
  font-size: 14px;
}
.theory-figure .formula-note { fill: var(--dim); font-family: var(--reader-font); font-size: 11px; }
.theory-figure .status { fill: var(--gold); font-size: 10px; font-weight: 650; letter-spacing: .05em; }

@media (max-width: 720px) {
  :root { --reader-sticky-offset: 116px; }
  .container { width: min(100% - 32px, 860px); padding: 70px 0 104px; }
  .global-nav { min-height: 64px; }
  .reading-bar { top: 64px; }
  .cover { margin-bottom: 76px; }
  .cover h1 { font-size: clamp(46px, 14vw, 64px); }
  .cover .subtitle { font-size: 16px; }
  .cover .meta { grid-template-columns: 72px 1fr; }
  .toc { margin-bottom: 88px; }
  .section { margin-bottom: 88px; }
  .section-title { font-size: clamp(28px, 8.5vw, 38px); }
  .section p { font-size: 16px; line-height: 1.88; }
  .theory-figure {
    margin: 36px 0 44px;
    padding: 20px 0 22px;
    overflow: visible;
  }
  .theory-figure svg { display: none; }
  .mobile-diagram {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
  }
  .mobile-diagram > div {
    position: relative;
    min-width: 0;
    padding: 16px 0 16px 32px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-diagram > div::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 5px;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
  }
  .mobile-diagram > div::after {
    content: "";
    position: absolute;
    top: 33px;
    bottom: -24px;
    left: 9px;
    width: 1px;
    background: var(--line);
  }
  .mobile-diagram > div:nth-child(even)::before { background: var(--accent-2); }
  .mobile-diagram > div:last-child::after { display: none; }
  .mobile-diagram dt {
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
  }
  .mobile-diagram dd {
    margin: 4px 0 0;
    color: #45566a;
    font-size: 14.5px;
    line-height: 1.65;
    word-break: keep-all;
  }
  .theory-figure figcaption { margin-top: 20px; }
  .theory-figure figcaption strong { font-size: 17px; }
  .theory-figure figcaption > span { font-size: 14px; }
  .theory-figure .figure-limit { font-size: 13px; }
  .path,
  .path.gold,
  .path.cyan,
  .path.primary-practical { grid-template-columns: 1fr; gap: 8px; padding: 22px 2px; }
  .path .p-go { white-space: normal; }
  .colophon a {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .global-nav .nav-logo { font-size: 17px; }
  .global-nav .nav-mark { width: 26px; height: 26px; }
  .cover h1 { font-size: 44px; }
  .cover .meta { font-size: 12px; gap: 8px 14px; }
  .section-title br { display: none; }
  .concept-finder { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .theory-figure * { animation: none !important; transition: none !important; }
}