:root {
  --paper: #ececeb;
  --surface: #ffffff;
  --ink: #171717;
  --muted: #5f6266;
  --line: #c9cacc;
  --accent: #b51d16;
  --accent-soft: #f8e9e7;
  --display: #17191c;
  --display-muted: #b9bec5;
  --action: #00647d;
  --action-hover: #004b5f;
  --action-active: #003b4b;
  --safe: #146c43;
  --warn: #8a4700;
  --stop: #9f1631;
  --radius: 2px;
  --reading: 70rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  line-height: 1.7;
}
a { color: var(--action); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 50; padding: .75rem 1rem; background: #fff; border: 3px solid var(--ink); }

.site-header { background: var(--display); border-bottom: 4px solid var(--accent); }
.nav {
  max-width: var(--reading);
  margin: auto;
  padding: .85rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.brand { color: #fff; text-decoration: none; font-weight: 900; letter-spacing: -.02em; }
.brand::before { content: "▶"; color: #ef382f; margin-right: .55rem; font-size: .78em; }
.nav-links { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .88rem; }
.nav-links a { color: var(--display-muted); }

main { max-width: var(--reading); margin: 0 auto; background: var(--surface); border-inline: 1px solid var(--line); }
.hero { position: relative; padding: clamp(2.4rem, 6vw, 5.25rem) clamp(1.15rem, 5vw, 4.5rem) 2rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .55rem; background: var(--accent); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.hero-tag { display: inline-block; padding: .3rem .5rem; border: 1px solid var(--ink); font-size: .75rem; font-weight: 850; letter-spacing: .04em; }
.eyebrow { margin: .75rem 0 .4rem; color: var(--accent); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
h1 { max-width: 17ch; margin: .45rem 0 1rem; font-size: clamp(2rem, 5.7vw, 4rem); line-height: 1.06; letter-spacing: -.05em; }
h2 { margin: 0 0 1rem; font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.22; letter-spacing: -.035em; }
h3 { margin: .2rem 0 .65rem; line-height: 1.35; }
.lead { max-width: 64ch; color: #35373a; font-size: clamp(1.03rem, 2vw, 1.24rem); }
.hero-answer { background: var(--display); color: #fff; padding: 1.2rem; border-left: 5px solid #ef382f; }
.hero-answer strong { display: block; color: #ff9c95; margin-bottom: .45rem; letter-spacing: .03em; }
.hero-answer p { margin: 0; }
.state { margin: 1.4rem 0 0; padding: .85rem 1rem; border-left: 5px solid var(--safe); background: #eef8f2; color: #154d33; font-weight: 750; }
.disclosure { margin: .8rem 0 0; }

.section { padding: clamp(2.4rem, 5vw, 4.25rem) clamp(1.15rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); }
.section:nth-of-type(even) { background: #f8f8f7; }
.section-heading { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1.2rem; }
.section-number { grid-column: 1; grid-row: 1; font: 900 1.35rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); border-top: 3px solid var(--accent); padding-top: .45rem; }
.section-heading > div { grid-column: 2; }
.section-heading .eyebrow { margin-top: 0; }
.section-intro { max-width: 68ch; color: var(--muted); }

.route-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.route { position: relative; padding: 1.25rem; border-right: 1px solid var(--ink); }
.route:last-child { border-right: 0; }
.route-code { display: block; margin-bottom: .75rem; font: 800 .78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); }
.route p { margin: .45rem 0; }
.route .risk { color: var(--muted); font-size: .92rem; }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.scenario-card { padding: 1.2rem; border: 1px solid var(--line); border-top: 5px solid var(--display); background: var(--surface); }
.scenario-label { color: var(--accent); font: 850 .72rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }

.control-ledger { border-top: 3px solid var(--ink); }
.ledger-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(10rem, .65fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.ledger-row > strong { font-size: .92rem; }
.ledger-status { justify-self: start; padding: .16rem .4rem; border: 1px solid currentColor; color: var(--warn); font-size: .78rem; font-weight: 850; }
.ledger-status.stop { color: var(--stop); }
.ledger-status.safe { color: var(--safe); }

.decision-grid, .card-grid, .operator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card { padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card strong { display: block; margin-bottom: .4rem; }
.yes { border-left: 5px solid var(--safe); }
.no { border-left: 5px solid var(--stop); }
.criteria { list-style: none; counter-reset: item; display: grid; gap: 0; padding: 0; border-top: 3px solid var(--ink); }
.criteria li { counter-increment: item; position: relative; padding: 1rem 0 1rem 3.2rem; border-bottom: 1px solid var(--line); }
.criteria li::before { content: counter(item, decimal-leading-zero); position: absolute; left: .2rem; color: var(--accent); font: 900 .85rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }

.table-wrap { overflow: auto; border: 1px solid var(--line); }
table { width: 100%; min-width: 45rem; border-collapse: collapse; }
th, td { padding: .9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { background: var(--display); color: #fff; }
tbody th { background: #f1f1ef; }
.note { padding: 1rem; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.evidence-list { display: grid; gap: 0; border-top: 3px solid var(--ink); }
.evidence { display: grid; grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.evidence p { max-width: 70ch; margin: 0; }

.decision-tool { padding: clamp(1.25rem, 4vw, 2rem); color: #fff; background: var(--display); border-top: 6px solid #ef382f; }
.decision-tool .eyebrow { color: #ff9c95; }
.decision-rule { max-width: 68ch; color: var(--display-muted); }
.checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; padding: 0; }
.checklist li { position: relative; padding: .85rem .25rem .85rem 2rem; border-bottom: 1px solid #3a3e44; }
.checklist li::before { content: "□"; position: absolute; left: .15rem; color: #ff9c95; font-size: 1.15rem; }
.decision-output { margin: 1.2rem 0 0; padding: .9rem 1rem; border: 1px solid #636871; color: #fff; }

.cta-zone { margin-top: 1.5rem; padding: 1.25rem; border: 2px solid var(--ink); background: #fff; }
.cta-button { position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%; min-height: 52px; padding: 1rem 1.25rem; color: #fff !important; background: var(--action); border: 2px solid var(--action); border-radius: var(--radius); text-align: center; text-decoration: none; font-weight: 900; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.cta-button::after { content: ""; position: absolute; inset: 0 auto 0 -18%; width: 8%; z-index: -1; background: #fff; opacity: 0; transform: skewX(-18deg); animation: cta-runner 5.4s ease-in-out infinite; }
.cta-button:hover { background: var(--action-hover); border-color: var(--action-hover); transform: translateY(-2px); }
.cta-button:active { background: var(--action-active); border-color: var(--action-active); transform: translateY(0); }
.cta-button:focus-visible { outline: 3px solid #f5a000; outline-offset: 3px; }
.cta-caption { margin: .75rem 0 0; color: var(--muted); font-size: .88rem; }
@keyframes cta-runner { 0%, 20% { left: -18%; opacity: 0; } 28% { opacity: .22; } 58% { left: 110%; opacity: .16; } 64%, 100% { left: 110%; opacity: 0; } }

.faq details { padding: 1.05rem 0; border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 850; }
.faq p { max-width: 70ch; }
.source-mini { color: var(--muted); font-size: .92rem; }
.subpage { min-height: 60vh; padding: clamp(2.1rem, 5vw, 4.5rem) clamp(1.15rem, 5vw, 4.5rem); }
.subpage h1 { max-width: 23ch; font-size: clamp(2rem, 5vw, 3.45rem); }
.subpage > h2 { margin-top: 2.5rem; padding-top: .65rem; border-top: 3px solid var(--ink); }
.operator-grid dt { font-weight: 850; }
.operator-grid dd { margin: 0; color: var(--muted); word-break: break-word; }
.source-list li { margin-bottom: 1rem; word-break: break-word; }
footer { max-width: var(--reading); margin: auto; padding: 2rem 1.25rem; color: var(--muted); font-size: .88rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1rem; }

@media (max-width: 820px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .hero-grid, .decision-grid, .card-grid, .operator-grid, .checklist, .scenario-grid { grid-template-columns: 1fr; }
  .route-board { grid-template-columns: 1fr; }
  .route { border-right: 0; border-bottom: 1px solid var(--ink); }
  .route:last-child { border-bottom: 0; }
  .ledger-row { grid-template-columns: 1fr; gap: .4rem; }
  .evidence { grid-template-columns: 1fr; gap: .35rem; }
  main { border-inline: 0; }
  h1 { max-width: none; }
  table { min-width: 40rem; }
}

@media (max-width: 430px) {
  .hero, .section, .subpage { padding-inline: 1rem; }
  .hero-answer { max-height: min(46svh, 20rem); overflow: auto; }
  .section-heading { grid-template-columns: 2.6rem minmax(0, 1fr); gap: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}