/* Redesign v3 (exploration): white ground, navy as the accent. Owner feedback 2026-09-24: the dark navy ground made the page
   feel dated; try white with navy points. Logo on white: assets/logo-black.png (navy tile, white mark, navy wordmark).
   Faces: Pretendard (Korean + UI), JetBrains Mono (Latin labels, IDs, numbers only — never Korean),
   no serif (one family; owner 2026-09-25).
   The faces are self-hosted: fonts/fonts.css, linked from each page's <head> before this file (no external font domains). */
:root {
  --bg: #FFFFFF; --bg-2: #F5F7FA; --bg-3: #EEF2F7;
  --ink: #0F1B33; --ink-2: #4A5670; --ink-3: #7A859B;
  --navy: #1B263B; --navy-2: #2B3A57; --blue: #6699FF; --blue-ink: #2F5FD0; --blue-soft: #EAF0FF;
  --rule: #E4E8F0; --rule-2: #CDD4E0;
  --gut: clamp(20px, 4.2vw, 64px); --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1200px;
  color-scheme: light;
}
/* content width (owner 2026-10-06): sections (.wrap), the menu and the footer stay within --maxw, centred; --side is the
   space on either side (at least the gutter), so screens narrower than --maxw plus two gutters look as before. The home
   page runs wider (body.wide); its scenes still fill the screen. */
:root, .wide { --side: max(var(--gut), calc((100% - var(--maxw)) / 2)); }
.wide { --maxw: 1440px; }
/* the menu bar uses the home page's 1440px on every page (owner 2026-10-07), so it stays in the same place when moving
   between pages; sections and the footer keep their own --maxw */
:root { --navmaxw: 1440px; --navside: max(var(--gut), calc((100% - var(--navmaxw)) / 2)); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
canvas { display: block; }
.wrap { padding-left: var(--side); padding-right: var(--side); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* nav: white pill */
.nav { position: fixed; z-index: 50; top: 16px; left: var(--navside); right: var(--navside); height: 60px; display: flex; align-items: center; gap: 30px; padding: 0 10px 0 20px; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--rule); box-shadow: 0 8px 30px -18px rgba(15,27,51,.25); }
.nav img { width: 112px; display: block; }
.nav .links { display: flex; gap: 28px; margin-left: 24px; font-size: 15px; color: var(--ink-2); }
.nav .links .on { color: var(--ink); font-weight: 600; }
.nav .links .dd::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.nav .lang { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .1em; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pill-navy { background: var(--navy); color: #fff; }
.pill-line { border: 1px solid var(--rule-2); color: var(--ink); background: #fff; }
.pill .ar { font-family: var(--mono); font-weight: 500; }

/* type */
.h1 { font-size: clamp(46px, 6.6vw, 108px); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.h2 { font-size: clamp(30px, 3.6vw, 54px); font-weight: 700; letter-spacing: -.035em; line-height: 1.18; }
.h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* exhibit frame */
.ex { border: 1px solid var(--rule); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 1px 0 rgba(15,27,51,.02), 0 18px 40px -30px rgba(15,27,51,.25); }
.ex-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.ex-head .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3); }
.ex-head .ttl { font-size: 14.5px; font-weight: 600; }
.ex-head .ctl { margin-left: auto; display: flex; gap: 6px; }
.ex-head .ctl span { font-size: 12.5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--ink-2); }
.ex-head .ctl span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ex-body { padding: 22px 20px; }
.ex-foot { padding: 11px 18px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* equation strip */
.eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.eq > span { padding: 9px 13px; border-radius: 10px; border: 1px solid var(--rule-2); background: #fff; }
.eq > span small { display: block; margin-top: 4px; font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--ink-3); letter-spacing: .1em; }
.eq > span.p { background: var(--blue-soft); border-color: #C9D8FF; color: var(--blue-ink); }
.eq > span.o { background: var(--navy); border-color: var(--navy); color: #fff; }
.eq > span.o small { color: rgba(255,255,255,.7); }
.eq i { font-style: normal; font-family: var(--mono); color: var(--ink-3); }

.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--ink-3); }
.legend b { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--navy); }
.legend b.bl { background: var(--blue); }
.legend b.rg { background: none; border: 1px solid var(--navy); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* a phrase kept on one line (Korean line breaks fall between phrases, not inside them) */
.nw { white-space: nowrap; }
.todo { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; color: #9A6200; border: 1px dashed #E0B45C; background: #FFF8E8; }

/* demo band + form */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form .f { min-height: 52px; border-radius: 12px; border: 1px solid var(--rule-2); background: #fff; display: flex; align-items: center; padding: 0 16px; font-size: 15px; color: var(--ink-3); }
.form .w { grid-column: 1 / -1; }
.form .pill { grid-column: 1 / -1; justify-content: center; height: 52px; }
.form .note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }

.ftr { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 36px var(--side) 44px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.ftr img { width: 96px; }
.ftr .r { margin-left: auto; font-family: var(--mono); letter-spacing: .06em; }

@media (max-width: 760px) {
  .nav { top: 10px; height: 54px; left: 12px; right: 12px; gap: 12px; padding: 0 8px 0 14px; }
  .nav img { width: 94px; }
  .nav .links { display: none; }
  .nav .pill { height: 38px; padding: 0 14px; font-size: 14px; }
  .demo, .form { grid-template-columns: minmax(0, 1fr); }
  .ex-head .ctl { margin-left: 0; width: 100%; }
  .ex-head .ctl span { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 14px; }
}

/* Korean line breaks: no lone word on the last line; wide chapter leads balanced (owner 2026-09-25, "줄바꿈이 이상한 것") */
:root:lang(ko) body { text-wrap: pretty; }
@media (min-width: 1001px) { :root:lang(ko) .chap .lead { text-wrap: balance; } }