/*
 * Exition world surfaces, Clear Current palette.
 * A light, product-native reading system: cool canvas, white working surfaces,
 * cobalt actions, and restrained teal state cues. No gold, black-stage, neon,
 * or decorative gradients. Loaded last on exition.co.kr.
 */

:root {
  color-scheme: light;

  --ex-canvas: #f6f8fb;
  --ex-surface: #ffffff;
  --ex-surface-soft: #eef3f8;
  --ex-surface-selected: #eaf1ff;
  --ex-text: #172033;
  --ex-text-soft: #5d6b7a;
  --ex-text-faint: #5f6d80;
  --ex-line: #dce4ed;
  --ex-line-strong: #c7d2df;
  --ex-action: #2164e8;
  --ex-action-hover: #1d56d8;
  --ex-action-soft: #dce8ff;
  --ex-signal: #0f8f8a;
  --ex-signal-soft: #dff4f1;
  --ex-success: #14805e;
  --ex-warning: #a85d00;
  --ex-danger: #c33f4b;
  --ex-shadow: 0 18px 48px rgba(28, 50, 82, 0.09);

  /* Legacy page variables are semantic aliases until old inline styles retire. */
  --bg: var(--ex-canvas);
  --bg-2: var(--ex-surface);
  --surface: var(--ex-surface);
  --line: var(--ex-line);
  --text: var(--ex-text);
  --dim: var(--ex-text-soft);
  --muted: var(--ex-text-soft);
  --gold: var(--ex-action);
  --gold-soft: rgba(33, 100, 232, 0.34);
  --accent: var(--ex-action);
  --accent-2: var(--ex-signal);
  --good: var(--ex-success);

  --home-bg: var(--ex-canvas);
  --home-surface: var(--ex-surface);
  --home-soft: var(--ex-surface-soft);
  --home-text: var(--ex-text);
  --home-muted: var(--ex-text-soft);
  --home-line: var(--ex-line);
  --home-accent: var(--ex-action);
  --ink-space: var(--ex-canvas);
  --ink-space-raised: var(--ex-surface-soft);
  --night-text: var(--ex-text);
  --night-dim: var(--ex-text-soft);
  --night-line: var(--ex-line);
  --gold-bright: var(--ex-action);
}

html {
  min-width: 320px;
  background: var(--ex-canvas) !important;
  color: var(--ex-text) !important;
}

body {
  min-height: 100vh;
  background: var(--ex-canvas) !important;
  background-image: none !important;
  color: var(--ex-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ex-action-soft);
  color: var(--ex-text);
}

:focus-visible {
  outline: 3px solid var(--ex-signal) !important;
  outline-offset: 3px !important;
}

h1,
h2,
h3,
h4,
.cover h1,
.section-title,
.note-title,
.article .a-title,
.editorial-heading,
.editorial-heading-dark,
.state-lab-heading h3,
.state-landscape-heading strong {
  color: var(--ex-text) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

p,
li,
dd,
.opening,
.closing,
.lead,
.lede,
.thesis,
.q-line,
.ap-body,
.li-body {
  color: var(--ex-text) !important;
}

.subtitle,
.meta,
.hint,
.q-tail,
.section-desc,
.series-meta,
.article .a-subtitle,
.article .a-foot,
.result-footer-note,
.result-biz-info,
.state-detail-meta,
.state-lab-heading > p,
.state-landscape-heading > span,
.landscape-labels,
.worldview-lead,
.worldview-boundary p,
.chapter-copy p,
.epistemic-heading p,
.epistemic-list dd,
.footer-bottom,
.site-footer p {
  color: var(--ex-text-soft) !important;
}

a,
.gold,
.cover-mark,
.section-mark,
.toc-title,
.toc .no,
.series-name,
.article .a-order,
.article .a-cta,
.note-mark,
.note-ref,
.ap-tag,
.sub-badge,
.c-label,
.h-label,
.sym,
.p-go,
.term,
.jump-no,
.worldview-eyebrow,
.section-label,
.worldview-structure-heading span,
.worldview-structure-list .structure-number,
.epistemic-list dt {
  color: var(--ex-action) !important;
}

em,
.standalone .series-name,
.finder-status,
.reading-percent {
  color: #0b746f !important;
}

#hero-title em {
  color: var(--ex-signal) !important;
}

strong,
b {
  color: inherit;
}

/* Legal and reference tables stay inside the reading column on phones. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

th,
td {
  overflow-wrap: anywhere;
}

/* Persistent navigation uses one quiet material and no dark stage. */
.global-nav,
.site-header {
  color: var(--ex-text) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--ex-line) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(135%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(135%) blur(18px) !important;
}

.global-nav .nav-logo,
.site-header .brand,
.brand-name,
.brand-section {
  color: var(--ex-text) !important;
}

.surface-role-badge,
.brand-section {
  color: var(--ex-text-soft) !important;
  background: var(--ex-surface-soft) !important;
  border-color: var(--ex-line) !important;
}

.global-nav .nav-menu-trigger,
.mobile-nav,
.primary-nav a {
  color: var(--ex-text-soft) !important;
  background: transparent !important;
  border-color: transparent !important;
}

.global-nav .nav-menu-trigger:hover,
.global-nav .nav-menu[open] .nav-menu-trigger,
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--ex-text) !important;
  background: var(--ex-surface-soft) !important;
  border-color: var(--ex-line) !important;
}

.global-nav .nav-menu-panel,
.chapter-jump-panel {
  color: var(--ex-text) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--ex-line) !important;
  box-shadow: var(--ex-shadow) !important;
}

.global-nav .nav-menu-panel a,
.chapter-jump-panel a {
  color: var(--ex-text) !important;
}

.global-nav .nav-menu-panel a:hover,
.global-nav .nav-menu-panel a[aria-current="page"],
.chapter-jump-panel a:hover,
.chapter-jump-panel a[aria-current="location"] {
  color: var(--ex-action) !important;
  background: var(--ex-action-soft) !important;
}

.nm-group + .nm-group {
  border-color: var(--ex-line) !important;
}

.nm-group-title {
  color: var(--ex-text-faint) !important;
}

/* Reading controls stay visible without becoming a second header. */
.reading-bar {
  background: rgba(246, 248, 251, 0.96) !important;
  border-color: var(--ex-line) !important;
}

.reading-position {
  color: var(--ex-text) !important;
}

.reading-meter {
  background: var(--ex-line) !important;
}

.reading-meter > span {
  background: var(--ex-signal) !important;
}

.resume-reading,
.chapter-jump > summary,
.finder-clear,
.secondary,
.retry-tool-btn {
  color: var(--ex-text) !important;
  background: var(--ex-surface) !important;
  border-color: var(--ex-line-strong) !important;
}

.resume-reading:hover,
.chapter-jump > summary:hover,
.chapter-jump[open] > summary,
.finder-clear:hover,
.secondary:hover,
.retry-tool-btn:hover {
  color: var(--ex-action) !important;
  background: var(--ex-action-soft) !important;
  border-color: var(--ex-action) !important;
}

/* Home: retain the one-message hierarchy while replacing ink and gold. */
.worldview-hero,
.epistemic-strip,
.chapter-section,
.paper-section,
.archive-section,
.dark-section,
.site-footer {
  background: var(--ex-canvas) !important;
  background-image: none !important;
  color: var(--ex-text) !important;
}

.worldview-primary-action,
.primary,
.cta-row .primary,
.paywall .primary,
.btn-primary {
  color: #ffffff !important;
  background: var(--ex-action) !important;
  border-color: var(--ex-action) !important;
  box-shadow: 0 8px 18px rgba(28, 50, 82, 0.12) !important;
}

.worldview-primary-action:hover,
.primary:hover,
.cta-row .primary:hover,
.paywall .primary:hover,
.btn-primary:hover {
  color: #ffffff !important;
  background: var(--ex-action-hover) !important;
  border-color: var(--ex-action-hover) !important;
}

.worldview-structure-panel {
  color: var(--ex-text) !important;
  background: var(--ex-surface) !important;
  border-color: transparent !important;
  box-shadow: var(--ex-shadow) !important;
}

.worldview-structure-heading,
.worldview-structure-conclusion {
  border-color: var(--ex-line) !important;
}

.worldview-structure-list li,
.epistemic-list > div,
.epistemic-list > div:nth-child(even) {
  color: var(--ex-text) !important;
  background: var(--ex-surface-soft) !important;
  border-color: transparent !important;
}

.worldview-structure-list .structure-number {
  background: var(--ex-surface) !important;
  border-color: var(--ex-line) !important;
}

.worldview-boundary,
.epistemic-note {
  background: var(--ex-surface) !important;
  border-color: var(--ex-line) !important;
}

.epistemic-note a {
  color: var(--ex-action) !important;
}

.state-lab {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.state-step-controls button {
  color: var(--ex-text-soft) !important;
  background: var(--ex-surface-soft) !important;
  border-color: var(--ex-line) !important;
}

.state-step-controls button:hover,
.state-step-controls button.is-active,
.state-step-controls button[aria-pressed="true"] {
  color: var(--ex-action) !important;
  background: var(--ex-action-soft) !important;
  border-color: rgba(33, 100, 232, 0.42) !important;
}

.state-reader {
  overflow: hidden;
  color: var(--ex-text) !important;
  background: var(--ex-surface-soft) !important;
  border: 1px solid var(--ex-line) !important;
  border-radius: 16px !important;
}

.state-step-controls {
  border: 0 !important;
  border-bottom: 1px solid var(--ex-line) !important;
  border-radius: 0 !important;
}

.state-detail {
  color: var(--ex-text) !important;
  background: var(--ex-surface-soft) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.state-landscape,
.state-equations {
  color: var(--ex-text) !important;
  background: var(--ex-surface-soft) !important;
  border: 1px solid var(--ex-line) !important;
  border-radius: 16px !important;
}

.state-equation-boundary {
  color: var(--ex-text) !important;
  background: var(--ex-surface-soft) !important;
  border-top: 0 !important;
}

.landscape-grid path,
.landscape-reference,
.trajectory-axis {
  stroke: var(--ex-line-strong) !important;
}

.landscape-curve,
.trajectory-path {
  stroke: var(--ex-action) !important;
}

.landscape-marker,
.trajectory-node.current {
  color: var(--ex-signal) !important;
  fill: var(--ex-signal) !important;
}

.site-footer {
  border-color: var(--ex-line) !important;
}

.footer-surfaces a {
  color: var(--ex-text) !important;
  background: var(--ex-surface) !important;
  border-color: var(--ex-line) !important;
}

.footer-surfaces a:hover {
  color: var(--ex-action) !important;
  border-color: var(--ex-action) !important;
}

/* Reading and archive surfaces share one calm paper system. */
:is(
  .quick,
  .toc,
  .card,
  .note,
  .paywall,
  .locked-list,
  .notes-finder,
  .concept-finder,
  .article,
  .error-card,
  .equation,
  .diagram,
  .prop,
  .hedge,
  .next,
  .next-upcoming,
  .colophon,
  .meta-list,
  .applied,
  .result-help-card,
  .result-share-card,
  .result-glossary
) {
  color: var(--ex-text) !important;
  background: var(--ex-surface) !important;
  background-image: none !important;
  border-color: var(--ex-line) !important;
  box-shadow: none !important;
}

.article:hover {
  border-color: rgba(33, 100, 232, 0.42) !important;
  box-shadow: 0 12px 32px rgba(28, 50, 82, 0.08) !important;
}

.quick .q-thesis,
blockquote,
.cta-box,
.important,
.note.lead,
.epistemic-note,
.preview-fade {
  color: var(--ex-text) !important;
  background: var(--ex-surface-soft) !important;
  background-image: none !important;
  border-color: var(--ex-line-strong) !important;
}

blockquote {
  border: 0 !important;
  border-radius: 14px !important;
}

body[data-reader-page="worldview_home"] .chapter-copy blockquote {
  padding: 28px 30px !important;
}

.quick > summary,
.result-glossary > summary,
details > summary {
  color: var(--ex-text) !important;
}

.quick > summary:hover,
.result-glossary > summary:hover,
details > summary:hover {
  color: var(--ex-action) !important;
}

.toc,
.terms,
.note-index,
.locked-list,
.paths,
.cards,
.layer-map {
  border-color: var(--ex-line) !important;
}

.toc a,
.note-index-item,
.locked-item,
.path,
.p-title,
.t-label,
.c-label {
  color: var(--ex-text) !important;
}

.toc a:hover,
.note-index-item:hover,
.locked-item:hover,
.path:hover {
  color: var(--ex-action) !important;
  background: var(--ex-action-soft) !important;
}

.layer-map .card,
.trace-step {
  background: transparent !important;
  border-color: var(--ex-line) !important;
}

.layer-map .card::before {
  color: var(--ex-action) !important;
  background: var(--ex-surface) !important;
  border-color: rgba(33, 100, 232, 0.42) !important;
}

.layer-map .card:not(:last-child)::after,
.trace-model::before,
.title-rule {
  background: var(--ex-line-strong) !important;
}

.finder-row input,
input,
select,
textarea {
  color: var(--ex-text) !important;
  background: var(--ex-surface) !important;
  border-color: var(--ex-line-strong) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ex-text-faint) !important;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ex-signal) !important;
  box-shadow: 0 0 0 3px rgba(15, 143, 138, 0.14) !important;
}

/* Individual articles are served from separate files; this layer normalizes them. */
body > .container {
  color: var(--ex-text) !important;
}

body > .container > p,
.opening,
.opening p,
.closing,
.closing p {
  color: var(--ex-text) !important;
}

.author,
.article-meta,
.divider,
.final-line {
  color: var(--ex-text-soft) !important;
}

.divider::before,
.divider::after {
  background: var(--ex-line-strong) !important;
}

.cta-box {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ex-surface-soft) !important;
  box-shadow: none !important;
}

.cta-box a,
.final-line,
.article-nav .anv-link:hover .anv-title {
  color: var(--ex-action) !important;
}

.article-nav .anv-cell {
  color: var(--ex-text) !important;
  background: var(--ex-surface) !important;
  border-color: var(--ex-line) !important;
}

.article-nav .anv-link:hover {
  background: var(--ex-action-soft) !important;
  border-color: rgba(33, 100, 232, 0.42) !important;
}

.article-nav .anv-empty,
.article-nav .anv-label {
  color: var(--ex-text-faint) !important;
}

/*
 * Impeccable topology pass: one boundary for an interactive group, no nested
 * card wall for reading material, and no decorative callout rails.
 */
.quick {
  overflow: hidden !important;
  background: var(--ex-surface) !important;
  border: 1px solid var(--ex-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.quick .q-thesis {
  background: var(--ex-surface-soft) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.cards {
  gap: 0 !important;
  overflow: hidden !important;
  background: var(--ex-surface) !important;
  border: 1px solid var(--ex-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.cards > .card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.cards > .card + .card {
  border-top: 1px solid var(--ex-line) !important;
}

:is(.prop, .hedge) {
  background: var(--ex-surface-soft) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.closing {
  padding-inline: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ex-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.eq {
  padding: 22px clamp(16px, 4vw, 34px) !important;
  background: var(--ex-surface-soft) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.surface-skip-link {
  position: fixed !important;
  left: 14px !important;
  top: 10px !important;
  z-index: 1000 !important;
  padding: 11px 16px !important;
  color: #ffffff !important;
  background: var(--ex-action) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transform: translateY(-160%) !important;
}

.surface-skip-link:focus {
  transform: translateY(0) !important;
}

/* Legal, error, and footer states. */
.footer-info,
.result-biz-info {
  color: var(--ex-text-soft) !important;
  border-color: var(--ex-line) !important;
}

/* A section is separated by space; one interactive group gets one perimeter. */
.footer-surfaces nav {
  overflow: hidden;
  border: 0 !important;
  border-radius: 16px;
  background: var(--ex-surface) !important;
}

.footer-surfaces a,
.footer-surfaces a:first-child {
  padding: 24px 28px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-right: 1px solid var(--ex-line) !important;
}

.footer-surfaces a:last-child {
  border-right: 0 !important;
}

.footer-surfaces a[aria-current="page"] {
  background: var(--ex-action-soft) !important;
}

.actions a,
.error-card a {
  color: #ffffff !important;
  background: var(--ex-action) !important;
  border-color: var(--ex-action) !important;
}

#error,
.err {
  color: var(--ex-danger) !important;
  background: #fff1f2 !important;
  border-color: #efb7be !important;
}

@media (max-width: 720px) {
  .global-nav,
  .site-header {
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .worldview-structure-panel {
    box-shadow: 0 14px 34px rgba(28, 50, 82, 0.08) !important;
  }

  .state-lab {
    border-radius: 0 !important;
  }

  .state-reader,
  .state-landscape,
  .state-equations,
  .footer-surfaces nav {
    border-radius: 14px !important;
  }

  body[data-reader-page="worldview_home"] .chapter-copy blockquote {
    padding: 24px 22px !important;
  }

  .footer-surfaces a,
  .footer-surfaces a:first-child {
    padding: 19px 20px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ex-line) !important;
  }

  .footer-surfaces a:last-child {
    border-bottom: 0 !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .global-nav,
  .site-header,
  .reading-bar,
  .global-nav .nav-menu-panel,
  .chapter-jump-panel {
    background: var(--ex-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media print {
  html,
  body,
  .worldview-hero,
  .chapter-section,
  .paper-section,
  .dark-section {
    background: #ffffff !important;
    color: var(--ex-text) !important;
  }
}