/* ═══════════════════════════════════════════════════════════════
   AVC v2 — design system (tokens · base · type · components)

   Voice: a deep navy field lit like the hero render — one cool key
   light, restrained DodgerBlue for emphasis, warm light only where the
   physical world is (the city) and in the set-point line. Surfaces are
   dark glass-metal panels with a lit top edge; no saturated fills behind
   text. Small text is a technical annotation, not a pill: labels are
   outlined data tags with a status dot, numbers are tabular.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hangul face: bundled subset of Noto Sans KR VF (SIL OFL 1.1, OFL.txt
   alongside). KS X 1001 2,350 syllables + jamo + CJK punctuation; Latin,
   digits and ASCII stay on the system face (Segoe UI Variable / SF Pro). */
@font-face{
  font-family:"AVC Hangul";
  src:url("../assets/fonts/avc-hangul-ksx.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; size-adjust:96%;
  unicode-range:U+1100-11FF, U+3000-303F, U+3131-318E, U+AC00-D7A3, U+FF08-FF09, U+FF0C, U+FF0E, U+FF1A, U+FF1F;
}

:root{
  /* surface — navy, hue ≈ 218° */
  --bg-0:#02050b;            /* hero / vision space */
  --bg:#040810;              /* page */
  --bg-1:#060c17;            /* band */
  --bg-2:#081120;
  --panel-a:#0b1524; --panel-b:#070e1a;      /* panel gradient (top → bottom) */
  --well:#040913;                            /* inset wells: plots, simulator stage */

  /* hairlines */
  --line-soft:rgba(140,175,225,.07);
  --line:rgba(140,175,225,.12);
  --line-hard:rgba(140,175,225,.20);
  --rim:rgba(175,205,245,.22);               /* lit top edge of panels */

  /* ink */
  --text:#eef3fa;            /* headings, key numbers */
  --body:#aebbcd;            /* reading text */
  --dim:#7b8aa0;             /* captions, labels, ticks */
  --dimmer:#55637a;          /* decorative, ≥ 18 px only */

  /* accent — DodgerBlue family */
  --acc-hi:#a8ceff;          /* highlights on dark, accent text on panels */
  --acc:#5aa5ff;             /* accent strokes, numbers, icons */
  --acc-glow:#1e90ff;        /* emissive accents (dots, rings, plot line) */
  --acc-deep:#1559c8;
  --acc-navy:#0c2350;
  --warm:#e3b46a;            /* scope notes only */

  /* data series (fixed by the user): set-point red dashed · existing PID grey · recommended DodgerBlue */
  --s-sp:#ff5d5d;
  --s-base:#9aa4b1;
  --s-rec:#1e90ff;
  --s-meas:#cfd6e1;          /* measured (BAS): light grey-white */
  --s-sim:#1e90ff;           /* simulated (DT): DodgerBlue */

  /* type */
  --sans:"AVC Hangul", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display:"AVC Hangul", "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --small:"AVC Hangul", "Segoe UI Variable Small", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;

  --fs-h2:clamp(30px, 2.85vw, 44px);
  --fs-h3:clamp(21px, 1.62vw, 25px);
  --fs-lead:clamp(17px, 1.24vw, 19.5px);
  --fs-body:16.5px;
  --fs-small:15px;
  --fs-caption:13.5px;
  --fs-label:12.5px;
  --fs-micro:12px;          /* chart ticks — the floor */

  --ls-h2:-.024em; --ls-h3:-.014em; --ls-label:.13em;
  --lh-h2:1.12;

  /* space */
  --pad:clamp(20px, 4.6vw, 72px);
  --rail:1240px;
  --measure:62ch;
  --sec-y:clamp(88px, 9.5vw, 136px);
  --head-gap:clamp(36px, 4.2vw, 56px);
  --bar-h:60px;

  /* shape */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px;

  /* elevation */
  --sh-panel:inset 0 1px 0 rgba(255,255,255,.045), 0 1px 0 rgba(0,0,0,.35), 0 28px 56px -32px rgba(0,2,8,.9);
  --sh-well:inset 0 1px 3px rgba(0,0,0,.55), inset 0 0 0 1px rgba(140,175,225,.06);
  --focus:0 0 0 2px var(--bg), 0 0 0 4px rgba(125,180,255,.9);

  /* weights (aliases used by the section styles) */
  --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:650;
  --lh-small:1.6; --card-pad:clamp(18px, 1.9vw, 26px);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-hover:.22s; --dur-state:.45s; --dur-reveal:.9s;
}

/* ── base ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--bar-h) + 8px); }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.66; font-weight:400; letter-spacing:-.002em;
  font-optical-sizing:auto; font-kerning:normal; font-feature-settings:"kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  word-break:keep-all; overflow-wrap:break-word;
}
html[data-lang="ko"]{ --measure:56ch; }
html[data-lang="ko"] body{ line-height:1.8; letter-spacing:-.006em; }
p, li, dd, figcaption{ text-wrap:pretty; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p, ul, ol, dl, dd, figure{ margin:0; }
ul, ol{ padding:0; list-style:none; }
img, svg, canvas, video{ display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
::selection{ background:rgba(30,144,255,.34); color:#fff; }
:focus-visible{ outline:2px solid #7db4ff; outline-offset:3px; }
sub{ font-size:.72em; line-height:0; vertical-align:-.22em; }
.nw{ white-space:nowrap; }
.sr-only{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
html[data-lang="en"] .ko, html[data-lang="ko"] .en{ display:none !important; }
.skip{ position:fixed; left:12px; top:-60px; z-index:300; padding:10px 14px; border-radius:var(--r-sm); background:#fff; color:#06122a; font-weight:600; text-decoration:none; }
.skip:focus{ top:12px; }

/* fine film grain over everything (≤ 2 %), as in the hero render */
body::after{ content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px; }
@supports (mix-blend-mode:overlay){ body::after{ opacity:.022; } }

/* ── layout shell ───────────────────────────────────────────────── */
.wrap{ width:100%; max-width:calc(var(--rail) + var(--pad) * 2); margin:0 auto; padding:0 var(--pad); }
.sec{ position:relative; padding:var(--sec-y) 0; background:var(--sec-bg, var(--bg)); isolation:isolate; }
.sec::before{ content:""; position:absolute; inset:0 0 auto; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(140,175,225,.12) 20%, rgba(140,175,225,.12) 80%, transparent); }
.sec::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(var(--light-size, 56% 46%) at var(--light-at, 82% 0%), rgba(30,110,230,var(--light, .075)), transparent 70%); }

/* ── section header: index · title | lead ───────────────────────── */
.sec-head{ margin-bottom:var(--head-gap); }
.sec-head--split{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:20px clamp(32px, 5vw, 88px); align-items:end; }
.sec-index{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font-family:var(--small);
  font-size:var(--fs-label); line-height:1; font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:#8d9cb3; }
.sec-index b{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.06em; color:var(--acc); font-variant-numeric:tabular-nums; }
.sec-index i{ width:30px; height:1px; background:linear-gradient(90deg, var(--acc), rgba(90,165,255,0)); }
html[data-lang="ko"] .sec-index{ font-size:13.5px; letter-spacing:.02em; text-transform:none; }
.sec-title{ font-family:var(--display); font-size:var(--fs-h2); line-height:1.1; letter-spacing:var(--ls-h2); font-weight:600; color:var(--text); }
html[data-lang="ko"] .sec-title{ line-height:1.28; letter-spacing:-.02em; }
.sec-lead{ max-width:var(--measure); font-size:var(--fs-lead); line-height:1.6; color:var(--body); }
.sec-head--split .sec-lead{ padding-bottom:.28em; }
html[data-lang="ko"] .sec-lead{ line-height:1.78; }

/* sub-section header: a lettered marker + title + lead */
.sub-index{ display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px;
  font-family:var(--display); font-size:14px; font-weight:600; color:var(--acc-hi);
  background:linear-gradient(180deg, rgba(30,144,255,.16), rgba(30,144,255,.05)); box-shadow:inset 0 0 0 1px rgba(90,165,255,.34), inset 0 1px 0 rgba(255,255,255,.08); }
.sub-head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.sub-title{ font-family:var(--display); font-size:var(--fs-h3); line-height:1.25; letter-spacing:var(--ls-h3); font-weight:600; color:var(--text); }
html[data-lang="ko"] .sub-title{ line-height:1.42; letter-spacing:-.014em; }
.sub-lead{ margin-top:8px; max-width:78ch; font-size:var(--fs-small); line-height:1.62; color:var(--body); }
html[data-lang="ko"] .sub-lead{ line-height:1.76; }

/* ── kicker (eyebrow) ───────────────────────────────────────────── */
.kicker{ display:flex; align-items:center; gap:10px; font-family:var(--small);
  font-size:var(--fs-label); line-height:1.2; font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:#93b8e6; }
.kicker::before{ content:""; width:18px; height:1px; background:currentColor; opacity:.7; }
html[data-lang="ko"] .kicker:not([lang="en"]){ font-size:13.5px; letter-spacing:.02em; text-transform:none; }

/* ── data label: an outlined technical tag with a status dot ───── */
.lbl{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px 0 7px; border-radius:var(--r-xs);
  font-family:var(--small); font-size:11.5px; line-height:1; font-weight:600; letter-spacing:.04em; white-space:nowrap; vertical-align:middle;
  color:#c3cfdf; background:rgba(140,175,225,.035); box-shadow:inset 0 0 0 1px rgba(140,175,225,.22); }
.lbl::before{ content:""; width:5px; height:5px; border-radius:50%; background:#7b8aa0; flex:none; }
html[data-lang="ko"] .lbl{ font-size:12px; letter-spacing:.01em; }
.lbl--bas::before{ background:var(--s-meas); }
.lbl--dt{ color:#cfe3ff; box-shadow:inset 0 0 0 1px rgba(80,155,255,.38); }
.lbl--dt::before{ background:var(--acc-glow); box-shadow:0 0 6px 1px rgba(30,144,255,.7); }
.lbl--rec{ color:#d9e9ff; box-shadow:inset 0 0 0 1px rgba(120,180,255,.42); background:rgba(30,144,255,.06); }
.lbl--rec::before{ background:#bfe0ff; box-shadow:0 0 6px rgba(140,200,255,.8); }
.lbl--xs{ height:19px; padding:0 6px 0 5px; font-size:11px; gap:5px; }
html[data-lang="ko"] .lbl--xs{ font-size:11.5px; }

/* agent code (A1–A4): a keycap */
.ag-code{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:21px; padding:0 6px; border-radius:var(--r-xs);
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums; color:#bcdaff;
  background:linear-gradient(180deg, rgba(30,144,255,.20), rgba(30,144,255,.08)); box-shadow:inset 0 0 0 1px rgba(90,165,255,.40), inset 0 1px 0 rgba(255,255,255,.10); }

/* chip: a token inside diagrams (tools, conditions) */
.chip{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:500; line-height:1; color:var(--body); white-space:nowrap;
  background:rgba(140,175,225,.05); box-shadow:inset 0 0 0 1px var(--line); }
html[data-lang="ko"] .chip{ font-size:13px; }
.chip.is-on{ color:var(--text); background:rgba(30,144,255,.12); box-shadow:inset 0 0 0 1px rgba(90,165,255,.5); }

/* ── icons: 24 grid, 1.5 px stroke ──────────────────────────────── */
.ic{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.ic path, .ic circle, .ic rect, .ic line, .ic ellipse{ vector-effect:non-scaling-stroke; }
.ic--24{ width:24px; height:24px; }
.ic--play{ fill:currentColor; stroke:none; }

/* ── buttons ────────────────────────────────────────────────────── */
.btn{
  --h:46px; --px:20px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:var(--h); padding:0 var(--px); border-radius:var(--r-md); border:1px solid transparent;
  font-family:var(--sans); font-size:15px; font-weight:600; line-height:1; letter-spacing:-.004em; white-space:nowrap;
  text-decoration:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; isolation:isolate;
  transition:transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease),
             border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
html[data-lang="ko"] .btn{ letter-spacing:-.012em; }
.btn--lg{ --h:56px; --px:24px; font-size:16px; border-radius:13px; }
.btn--sm{ --h:36px; --px:14px; font-size:13.5px; gap:8px; border-radius:9px; }
.btn--sm .ic{ width:14px; height:14px; }
.btn--icon{ --h:40px; --px:0; width:40px; }
.btn--icon .ic{ width:18px; height:18px; }
.btn:focus-visible{ outline:none; box-shadow:var(--focus); }

/* primary — deep navy body, a luminous rim and one glowing disc: the light sits in the icon, not the slab */
.btn--primary{
  --px:10px; padding-right:22px; color:#f1f6ff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 46%) padding-box,
    linear-gradient(180deg, #11295a 0%, #0a1b3e 100%) padding-box,
    linear-gradient(180deg, rgba(150,200,255,.62) 0%, rgba(70,140,240,.30) 45%, rgba(40,100,210,.22) 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(170,210,255,.14), inset 0 -1px 0 rgba(0,4,16,.4), 0 1px 1px rgba(0,3,12,.6),
             0 14px 34px -14px rgba(20,110,255,.55), 0 0 0 1px rgba(2,8,22,.5);
}
.btn--primary::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(120% 140% at 12% 50%, rgba(60,150,255,.28), transparent 60%); transition:opacity var(--dur-state) var(--ease); }
.btn--primary:hover{ transform:translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 46%) padding-box,
    linear-gradient(180deg, #14306a 0%, #0c2048 100%) padding-box,
    linear-gradient(180deg, rgba(175,215,255,.8) 0%, rgba(90,160,250,.42) 45%, rgba(50,115,225,.3) 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(170,210,255,.18), inset 0 -1px 0 rgba(0,4,16,.4), 0 1px 1px rgba(0,3,12,.6),
             0 18px 40px -14px rgba(20,120,255,.75), 0 0 0 1px rgba(2,8,22,.5); }
.btn--primary:hover::after{ opacity:1; }
.btn--primary:active{ transform:translateY(0); box-shadow:inset 0 1px 3px rgba(0,4,16,.6), 0 1px 1px rgba(0,3,12,.6); }
.btn--primary:focus-visible{ box-shadow:var(--focus), 0 14px 34px -14px rgba(20,110,255,.55); }
.btn__disc{ position:relative; display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%;
  background:radial-gradient(75% 75% at 35% 28%, #5c9ef0 0%, #2a64c6 46%, #123476 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 4px rgba(2,14,46,.5), 0 0 0 1px rgba(140,190,255,.32), 0 0 10px rgba(40,120,240,.30); }
.btn--lg .btn__disc{ width:38px; height:38px; }
.btn__disc svg{ width:20px; height:20px; fill:#fff; filter:drop-shadow(0 1px 1px rgba(0,20,70,.45)); }
.btn--lg .btn__disc svg{ width:21px; height:21px; }
.btn--primary:hover .btn__disc{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(2,14,46,.5), 0 0 0 1px rgba(160,205,255,.45), 0 0 14px rgba(60,140,250,.45); }
.btn__label{ display:inline-flex; }
.btn__meta{ display:inline-flex; align-items:center; gap:9px; margin-left:4px; padding-left:14px; border-left:1px solid rgba(160,200,255,.22);
  font-size:13.5px; font-weight:500; letter-spacing:.01em; color:#a9c8ef; font-variant-numeric:tabular-nums; }
/* audio mark: four bars (the demo has background music); they move only on hover / focus */
.eq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.eq i{ width:2px; border-radius:1px; background:currentColor; opacity:.85; height:40%; transform-origin:50% 100%; }
.eq i:nth-child(2){ height:85%; } .eq i:nth-child(3){ height:60%; } .eq i:nth-child(4){ height:100%; }
@media (prefers-reduced-motion:no-preference){
  .btn:hover .eq i, .btn:focus-visible .eq i{ animation:eq 1.1s ease-in-out infinite alternate; }
  .btn:hover .eq i:nth-child(2), .btn:focus-visible .eq i:nth-child(2){ animation-delay:-.4s; }
  .btn:hover .eq i:nth-child(3), .btn:focus-visible .eq i:nth-child(3){ animation-delay:-.8s; }
  .btn:hover .eq i:nth-child(4), .btn:focus-visible .eq i:nth-child(4){ animation-delay:-.2s; }
}
@keyframes eq{ 0%{ transform:scaleY(.35); } 100%{ transform:scaleY(1); } }

/* ghost — hairline on glass */
.btn--ghost{ color:#dbe6f5;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)) padding-box,
    linear-gradient(180deg, rgba(12,26,52,.62), rgba(12,26,52,.62)) padding-box,
    linear-gradient(180deg, rgba(140,180,240,.32), rgba(140,180,240,.14)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 1px rgba(0,3,12,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.btn--ghost .ic{ color:#8fb2df; transition:transform var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.btn--ghost:hover{ color:#fff; transform:translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)) padding-box,
    linear-gradient(180deg, rgba(14,28,52,.6), rgba(14,28,52,.6)) padding-box,
    linear-gradient(180deg, rgba(190,218,252,.45), rgba(190,218,252,.18)) border-box; }
.btn--ghost:hover .ic{ color:#cfe3ff; }
a.btn--ghost[href^="#"]:hover .ic{ transform:translateY(2px); }
.btn--ghost:active{ transform:translateY(0); }

/* segmented control */
.seg{ display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--well); box-shadow:var(--sh-well); }
.seg button{ height:28px; padding:0 12px; border:0; border-radius:7px; background:none; cursor:pointer;
  font-family:var(--small); font-size:12.5px; font-weight:600; line-height:1; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.seg button:hover{ color:var(--text); }
.seg button[aria-pressed="true"]{ color:var(--text); background:linear-gradient(180deg, #172b49, #10203a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(110,165,240,.22), 0 1px 2px rgba(0,0,0,.45); }

/* in-the-demo link: small transport control next to a method / chapter */
.demo-link{ display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 12px 0 5px; border-radius:10px; border:0; cursor:pointer;
  font-family:var(--small); font-size:13px; font-weight:500; color:#b9c8dc; white-space:nowrap;
  background:rgba(140,175,225,.04); box-shadow:inset 0 0 0 1px rgba(140,175,225,.16);
  transition:background-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.demo-link svg{ width:24px; height:24px; padding:5px; border-radius:50%; fill:#fff;
  background:radial-gradient(75% 75% at 35% 28%, #5c9ef0, #2a64c6 50%, #123476); box-shadow:0 0 0 1px rgba(140,190,255,.28), 0 0 8px rgba(40,120,240,.28); }
.demo-link b{ font-weight:600; color:var(--acc-hi); font-variant-numeric:tabular-nums; }
.demo-link:hover{ color:#fff; background:rgba(30,144,255,.08); box-shadow:inset 0 0 0 1px rgba(110,170,255,.38); }

/* ── panels ─────────────────────────────────────────────────────── */
.panel{ position:relative; border-radius:var(--r-xl); border:1px solid transparent;
  background:
    radial-gradient(80% 60% at 16% 0%, rgba(40,120,240,.06), transparent 64%) padding-box,
    linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box,
    linear-gradient(180deg, var(--rim), rgba(175,205,245,.07) 34%, rgba(175,205,245,.05)) border-box;
  box-shadow:var(--sh-panel); }
.panel--inset{ border-radius:var(--r-lg); border:0;
  background:radial-gradient(70% 60% at 50% 0%, rgba(30,110,230,.05), transparent 70%), var(--well); box-shadow:var(--sh-well); }

/* ── notes (scope) ──────────────────────────────────────────────── */
.note{ position:relative; max-width:920px; padding:16px 20px 17px 22px; border-radius:var(--r-md);
  background:linear-gradient(100deg, rgba(227,180,106,.055), rgba(227,180,106,0) 70%), rgba(8,14,26,.6);
  box-shadow:inset 0 0 0 1px rgba(227,180,106,.12); }
.note::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; border-radius:2px; background:linear-gradient(180deg, rgba(227,180,106,.85), rgba(227,180,106,.35)); }
.note p{ font-size:var(--fs-small); line-height:1.6; color:var(--body); }
.note .note__label{ margin:0 0 5px; font-family:var(--small); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--warm); }
html[data-lang="ko"] .note .note__label{ font-size:13px; letter-spacing:.02em; text-transform:none; }
html[data-lang="ko"] .note p{ line-height:1.74; }

/* ── legend ─────────────────────────────────────────────────────── */
.legend{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.legend__item{ display:inline-flex; align-items:center; gap:9px; font-size:13px; line-height:1.3; font-weight:500; color:var(--body); }
.legend__meta{ font-size:12.5px; font-weight:400; color:var(--dim); font-variant-numeric:tabular-nums; }
.sw{ flex:none; display:inline-block; width:20px; height:2px; border-radius:1px; background:currentColor; }
.sw--sp{ color:var(--s-sp); background:repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px); }
.sw--base{ color:var(--s-base); }
.sw--meas{ color:var(--s-meas); height:1.75px; }
.sw--rec, .sw--sim{ color:var(--s-rec); height:2.5px; box-shadow:0 0 6px rgba(30,144,255,.6); }

/* ── caption ────────────────────────────────────────────────────── */
.caption{ font-size:var(--fs-caption); line-height:1.55; color:var(--dim); max-width:84ch; }
html[data-lang="ko"] .caption{ line-height:1.68; }

/* ── reveal ─────────────────────────────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay:var(--d, 0s); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ── responsive shell ───────────────────────────────────────────── */
@media (max-width:1023px){
  .sec-head--split{ grid-template-columns:1fr; gap:18px; }
  .sec-head--split .sec-lead{ padding-bottom:0; }
}
@media (max-width:600px){
  :root{ --fs-body:16px; --fs-small:14.5px; }
  .sub-head{ gap:12px; }
  .sub-index{ width:30px; height:30px; font-size:13px; }
}
@media (pointer:coarse){
  .seg button{ height:40px; padding:0 14px; }
  .btn--sm{ --h:40px; }
  .demo-link{ height:40px; }
}