:root {
    --ground: #f2f4f3;
    --surface: #fbfcfb;
    --sunk: #e7ebe9;
    --ink: #13201c;
    --ink-2: #3c4b46;
    --ink-3: #6b7a75;
    --rule: #cbd4d0;
    --accent: #0b7a75;
    --accent-ink: #075955;
    --accent-wash: #dcefed;
    --stamp: #c8372d;
    --stamp-wash: #f7e1de;
    --amber: #a86b0c;
    --amber-wash: #f5ead6;
    --ok: #2f7a3e;
    --code-bg: #14211d;
    --code-ink: #d7e4df;
    --code-dim: #7f948d;
    --code-key: #7fd3cb;
    --code-str: #e8c27a;
    --shadow: 0 1px 0 rgba(19, 32, 28, .04), 0 12px 32px -18px rgba(19, 32, 28, .28);

    --f-display: "Gowun Batang", "Nanum Myeongjo", "AppleMyungjo", Georgia, serif;
    --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --s-xs: .8125rem;
    --s-sm: .9375rem;
    --s-md: 1.0625rem;
    --s-lg: 1.375rem;
    --s-xl: 2rem;
    --s-2xl: clamp(2.1rem, 1rem + 2.8vw, 3.25rem);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #0b1210;
      --surface: #111b18;
      --sunk: #0f1715;
      --ink: #dde7e3;
      --ink-2: #aebdb7;
      --ink-3: #7d8e88;
      --rule: #25332f;
      --accent: #3fc1b8;
      --accent-ink: #7fd8d1;
      --accent-wash: #12302d;
      --stamp: #ff6a5c;
      --stamp-wash: #3a1916;
      --amber: #e3a948;
      --amber-wash: #33260f;
      --ok: #6cc47f;
      --code-bg: #070d0b;
      --code-ink: #d7e4df;
      --code-dim: #6f837c;
      --code-key: #7fd3cb;
      --code-str: #e8c27a;
      --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -20px rgba(0, 0, 0, .7);
    }
  }
  :root[data-theme="dark"] {
    --ground: #0b1210;
    --surface: #111b18;
    --sunk: #0f1715;
    --ink: #dde7e3;
    --ink-2: #aebdb7;
    --ink-3: #7d8e88;
    --rule: #25332f;
    --accent: #3fc1b8;
    --accent-ink: #7fd8d1;
    --accent-wash: #12302d;
    --stamp: #ff6a5c;
    --stamp-wash: #3a1916;
    --amber: #e3a948;
    --amber-wash: #33260f;
    --ok: #6cc47f;
    --code-bg: #070d0b;
    --code-ink: #d7e4df;
    --code-dim: #6f837c;
    --code-key: #7fd3cb;
    --code-str: #e8c27a;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -20px rgba(0, 0, 0, .7);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: var(--s-md);
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
  a { color: var(--accent-ink); text-underline-offset: 3px; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  code, .mono { font-family: var(--f-mono); font-size: .9em; }
  h1, h2, h3 { text-wrap: balance; margin: 0; }
  p { margin: 0; }

  /* ── header ─────────────────────────────────────────── */
  /* 헤더는 세 덩어리다: 브랜드 · 목차(nav) · 기능(actions).
     목차와 기능을 섞어 두면 "English" 가 페이지 안 어딘가로 가는 링크처럼 보인다. */
  .top {
    position: sticky; top: 0; z-index: 10;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }
  /* 배경 투명도를 지원하지 않는 브라우저에서는 불투명하게 — 글씨가 겹쳐 보이는 것보다 낫다. */
  @supports not (backdrop-filter: blur(4px)) { .top { background: var(--ground); } }
  .top .wrap { display: flex; align-items: center; gap: 28px; padding-block: 12px; }

  .mark { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; }
  .mark .glyph {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none;
    color: var(--ground); background: var(--ink);
    transition: background .15s ease;
  }
  .mark:hover .glyph { background: var(--accent-ink); }
  .mark .glyph svg { width: 16px; height: 16px; display: block; }
  .mark .name { display: flex; flex-direction: column; line-height: 1.15; }
  .mark b { font-family: var(--f-display); font-size: 1.25rem; letter-spacing: -.01em; }
  .mark .sub { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--ink-3); }

  .nav { display: flex; align-items: center; gap: 22px; font-size: var(--s-sm); }
  .nav a { position: relative; color: var(--ink-2); text-decoration: none; padding-block: 6px; white-space: nowrap; }
  /* 밑줄은 글자 폭만큼만 자라게 — 링크가 움직이지 않는다. */
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .16s ease;
  }
  .nav a:hover { color: var(--accent-ink); }
  .nav a:hover::after { transform: scaleX(1); }

  .actions { display: flex; align-items: center; gap: 14px; }
  /* 목차와 기능 사이의 경계. 선 하나로 "여기부터는 이동이 아니라 동작"이라고 말한다. */
  .actions::before { content: ""; width: 1px; height: 22px; background: var(--rule); margin-right: 2px; }

  /* 언어 전환은 고른 값이 보이는 세그먼트 컨트롤이다. 한쪽만 링크로 두면 지금 무엇을 보고
     있는지, 무엇으로 갈 수 있는지가 둘 다 흐려진다. */
  .langsel {
    display: inline-flex; align-items: stretch; border: 1px solid var(--rule); border-radius: 999px;
    overflow: hidden; background: var(--surface);
  }
  .langsel a {
    font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-decoration: none;
    color: var(--ink-3); padding: 5px 11px; line-height: 1.5; transition: color .15s ease, background .15s ease;
  }
  .langsel a:hover { color: var(--ink); background: var(--sunk); }
  .langsel a.on { color: var(--ground); background: var(--ink); }
  .langsel a.on:hover { background: var(--ink); }

  .console {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 8px 15px; border-radius: 999px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--ground);
    font-size: var(--s-xs); font-weight: 600; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .console:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
  .console .arrow { transition: transform .15s ease; }
  .console:hover .arrow { transform: translateX(2px); }
  @media (prefers-reduced-motion: reduce) {
    .nav a::after, .console, .console .arrow { transition: none; }
  }

  /* 목차(.nav)는 브랜드·언어 전환·콘솔 로그인과 한 줄에 다 들어갈 만큼 넓을 때만 보인다.
     예전엔 860px 에서 접었는데, 목차가 있는 헤더는 ~984px 가 필요해서 861~983px 구간에서
     콘솔 로그인 버튼이 화면 밖으로 잘렸다(실측). 목차가 확실히 들어가는 1024px 이상에서만 펼친다.
     언어 전환과 콘솔 로그인은 목차가 아니라 기능이라 좁은 화면에서도 남는다(모바일에서 영문판으로
     갈 방법이 사라지면 안 된다). */
  @media (max-width: 1023px) {
    .top .wrap { gap: 14px; }
    .nav { display: none; }
    .actions::before { display: none; }
    .mark .sub { display: none; }
  }
  /* 영문 목차는 링크 글자가 더 넓어 ~1160px 가 필요하다(실측). 같은 CSS 를 쓰므로 영문 페이지에서만
     1024~1159px 구간을 한 번 더 접는다 — 이 구간에서 콘솔 로그인 버튼이 잘리던 문제. */
  @media (min-width: 1024px) and (max-width: 1159px) {
    html[lang="en"] .nav { display: none; }
    html[lang="en"] .actions::before { display: none; }
    html[lang="en"] .mark .sub { display: none; }
  }
  @media (max-width: 360px) {
    .console { padding: 7px 11px; }
    .console .label { display: none; }   /* 더는 안 들어갈 때만 화살표만 남긴다(aria-label 로 이름은 유지) */
  }

  /* ── who built it ───────────────────────────────────── */
  .credo { margin-top: 28px; display: grid; gap: 18px; }
  .credo .line { font-family: var(--f-display); font-size: var(--s-lg); line-height: 1.5; color: var(--ink); max-width: 30em; word-break: keep-all; }
  .credo .line b { color: var(--accent-ink); font-weight: 700; }
  .domains { display: flex; flex-wrap: wrap; gap: 10px; }
  .domains span {
    font-family: var(--f-mono); font-size: var(--s-xs); letter-spacing: .02em;
    border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; color: var(--ink-2); background: var(--surface);
  }
  /* 마지막 둘은 이 제품이 서 있는 분야다. 나열이 아니라 도착점으로 읽히게 강조한다. */
  .domains span:nth-last-child(-n+2) { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
  /* 왼쪽부터 차례로 놓인다 — 경력이 쌓여 온 순서 그대로. */
  .js .domains span { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .34s ease, transform .34s cubic-bezier(.22,.7,.3,1); }
  .js .reveal.in .domains span, .js .domains.in span { opacity: 1; transform: none; }
  .js .domains span:nth-child(1) { transition-delay: .04s; }
  .js .domains span:nth-child(2) { transition-delay: .12s; }
  .js .domains span:nth-child(3) { transition-delay: .20s; }
  .js .domains span:nth-child(4) { transition-delay: .28s; }
  .js .domains span:nth-child(5) { transition-delay: .36s; }
  @media (prefers-reduced-motion: reduce) {
    .js .domains span { opacity: 1; transform: none; transition: none; }
  }


  /* ── 스크롤 등장 ─────────────────────────────────────── */
  /* 숨기는 일은 .js 아래에서만 한다. 스크립트가 없으면 처음부터 다 보인다. */
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: .06s; }
  .js .reveal.d2 { transition-delay: .12s; }
  .js .reveal.d3 { transition-delay: .18s; }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ── 실행 직전 데모 (호출 스택이 쌓이고 점수가 차오른다) ── */
  .stackdemo { margin-top: 34px; display: grid; gap: 18px; }
  .detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  @media (max-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr); } }

  .ask {
    border: 1px solid var(--rule); border-radius: 10px; background: var(--surface);
    padding: 14px 16px; display: grid; gap: 6px;
  }
  .ask .who { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-3); letter-spacing: .04em; }
  .ask .q { font-size: var(--s-md); color: var(--ink); word-break: keep-all; }
  .think {
    margin: 10px 0 0; padding: 9px 14px; border-radius: 8px; border: 1px dashed var(--rule);
    color: var(--ink-3); font-size: var(--s-xs); display: flex; align-items: center; gap: 10px; background: transparent;
  }
  .think::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: .5; }

  /* 연결선은 호출이 "이어서" 일어났다는 사실을 그린다. 프레임이 늘어난 만큼만 자란다. */
  .stack { margin-top: 14px; display: grid; gap: 8px; position: relative; }
  .js .stack::before {
    content: ""; position: absolute; left: 1.05rem; top: 6px; bottom: 6px; width: 1.5px;
    background: linear-gradient(var(--ok), var(--amber) 48%, var(--stamp));
    transform: scaleY(var(--spine, 0)); transform-origin: top; transition: transform .42s cubic-bezier(.22,.7,.3,1);
    opacity: .5; pointer-events: none;
  }
  @media (max-width: 520px) { .js .stack::before { display: none; } }
  @media (prefers-reduced-motion: reduce) { .js .stack::before { transition: none; } }
  .frame {
    display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: 12px; align-items: center;
    border: 1px solid var(--rule); border-left: 3px solid var(--ink-3); border-radius: 9px;
    background: var(--surface); padding: 11px 14px; box-shadow: var(--shadow);
  }
  .js .frame { opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .34s ease, transform .34s cubic-bezier(.22,.7,.3,1); }
  .js .frame.on { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js .frame { opacity: 1; transform: none; transition: none; } }
  .frame .n { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-3); }
  .frame .what { min-width: 0; display: grid; gap: 3px; }
  .frame .tool { font-family: var(--f-mono); font-size: var(--s-sm); color: var(--ink); }
  .frame .arg { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .frame .sig { font-size: var(--s-xs); color: var(--ink-2); }
  .frame .res { font-family: var(--f-mono); font-size: var(--s-xs); white-space: nowrap; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--rule); }
  .frame[data-verdict="allow"] { border-left-color: var(--ok); }
  .frame[data-verdict="allow"] .res { color: var(--ok); }
  .frame[data-verdict="warn"] { border-left-color: var(--amber); }
  .frame[data-verdict="warn"] .res { color: var(--amber); background: var(--amber-wash); border-color: transparent; }
  .frame[data-verdict="block"] { border-left-color: var(--stamp); background: color-mix(in srgb, var(--stamp-wash) 55%, var(--surface)); }
  .frame[data-verdict="block"] .res { color: var(--stamp); background: var(--stamp-wash); border-color: transparent; font-weight: 700; }
  /* 차단 프레임은 한 번만 맥동한다 — 계속 깜빡이면 읽을 수 없다. */
  .js .frame[data-verdict="block"].on { animation: gt-halt .5s ease-out 1; }
  @keyframes gt-halt {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stamp) 45%, transparent); }
    100% { box-shadow: 0 0 0 14px transparent; }
  }
  @media (prefers-reduced-motion: reduce) { .js .frame[data-verdict="block"].on { animation: none; } }

  .meter {
    border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 16px; display: grid; gap: 12px;
  }
  .meter .lbl { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-3); letter-spacing: .05em; text-transform: uppercase; }
  .meter .num { display: flex; align-items: baseline; gap: 8px; }
  .meter .score { font-family: var(--f-display); font-size: 2.6rem; min-width: 2.2ch; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
  .meter .of { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-3); }
  .meter .track { height: 7px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
  .meter .track i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ok); transition: width .45s cubic-bezier(.22,.7,.3,1), background .3s ease; }
  .stackdemo[data-state="warn"] .meter .track i { background: var(--amber); }
  .stackdemo[data-state="block"] .meter .track i { background: var(--stamp); }
  .meter .verdict-label { font-size: var(--s-sm); color: var(--ink-2); }
  .stackdemo[data-state="block"] .meter .verdict-label { color: var(--stamp); font-weight: 600; }
  .meter .note { font-size: var(--s-xs); color: var(--ink-3); line-height: 1.6; word-break: keep-all; }
  .replay {
    justify-self: start; font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-2);
    background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 13px; cursor: pointer;
  }
  .replay:hover { color: var(--ink); border-color: var(--ink-3); }


  /* ── 실행 직전 장면 (제품의 위협 맵을 랜딩에 옮긴 그림) ── */
  /* 이 패널은 페이지 테마와 무관하게 늘 어둡다. 제품 콘솔의 관제 화면을 그대로 옮긴 장면이라
     밝은 배경에서 보여도 "화면을 보고 있다"는 감각이 유지되어야 한다. */
  .scene-wrap {
    --s-line: #2a3b37; --s-dim: #6f837c; --s-ink: #d7e4df;
    --s-ok: #3fc1b8; --s-warn: #e3a948; --s-stop: #ff6a5c;
    border: 1px solid #1d2b27; border-radius: 12px; background: #0a110f;
    padding: 14px 10px 10px; overflow: hidden; box-shadow: var(--shadow);
  }
  .scene { display: block; width: 100%; height: auto; }
  .scene text { font-family: var(--f-mono); fill: var(--s-ink); font-size: 13px; }
  .scene .lane-lbl { font-size: 11px; fill: var(--s-dim); letter-spacing: .08em; text-transform: uppercase; }
  .scene .lane-lbl.gt { fill: var(--s-ok); }

  .scene .edge { fill: none; stroke: var(--s-line); stroke-width: 1.6; }
  .scene .edge.lit { stroke: var(--s-ok); opacity: .55; }
  .scene .edge.lit.warn { stroke: var(--s-warn); }
  /* 차단된 호출은 도구에 도달하지 않았다. 실선으로 이으면 그림이 제품 규칙과 어긋난다. */
  .scene .edge.lit.stop { stroke: var(--s-stop); stroke-dasharray: 5 4; opacity: .45; }

  .scene .node rect, .scene .node circle, .scene .node path { fill: #111d1a; stroke: var(--s-line); stroke-width: 1.4; }
  .scene .node text { fill: var(--s-dim); font-size: 12px; }
  .scene .person .figure circle, .scene .person .figure path { fill: none; stroke: var(--s-ok); stroke-width: 2; }
  .scene .agent text { fill: var(--s-ink); }
  .scene .agent .think { fill: var(--s-dim); font-size: 10.5px; }
  .scene .node.on rect, .scene .node.on circle { stroke: var(--s-ok); fill: #10221f; }
  .scene .node.on text { fill: var(--s-ink); }
  .scene .node.warn rect { stroke: var(--s-warn); fill: #221c11; }
  .scene .node.refused rect { stroke: var(--s-stop); fill: #21110f; stroke-dasharray: 4 3; }
  .scene .node.refused text { fill: var(--s-stop); }

  .scene .bubble rect { fill: #101c19; stroke: var(--s-line); }
  .scene .bubble path { fill: #101c19; stroke: none; }
  .scene .bubble text { fill: var(--s-ink); font-size: 13px; }
  .scene .bubble .qsub { fill: var(--s-dim); font-size: 11px; }
  .js .scene .bubble { opacity: 0; transition: opacity .4s ease; }
  .js .scene.s1 .bubble, .js .scene.done .bubble { opacity: 1; }

  .scene .gate .wall { fill: url(#gt-wall); stroke: none; }
  .scene .gate .wall { fill: #123531; stroke: var(--s-ok); stroke-width: 1.2; }
  .scene.hit .gate .wall { stroke: var(--s-stop); }
  .scene .verdict-flash { font-size: 12px; font-weight: 700; fill: transparent; letter-spacing: .06em; }

  .scene .burst circle { fill: none; stroke: var(--s-stop); stroke-width: 2; opacity: 0; }
  .js .scene .burst.go .r1 { animation: gt-ring .75s ease-out 1; }
  .js .scene .burst.go .r2 { animation: gt-ring .75s ease-out .12s 1; }
  @keyframes gt-ring { from { r: 4; opacity: .9; } to { r: 46; opacity: 0; } }

  .scene .dot { stroke: none; }
  .scene .dot.ok { fill: var(--s-ok); }
  .scene .dot.warn { fill: var(--s-warn); }
  .scene .dot.stop { fill: var(--s-stop); }

  /* 에이전트가 판단하는 동안: 육각형이 밝아지고, 판단이 파동으로 퍼지고, 안에서 점이 깜박인다.
     이전에는 여기서 아무 일도 일어나지 않아 입자가 사라졌다가 나오는 것처럼 보였다. */
  .scene .agent.thinking path { stroke: var(--s-ok); fill: #13302c; }
  .scene .agent .pulse circle { fill: none; stroke: var(--s-ok); stroke-width: 1.5; opacity: 0; }
  .js .scene .agent.thinking .pulse .p1 { animation: gt-think 1.5s ease-out infinite; }
  .js .scene .agent.thinking .pulse .p2 { animation: gt-think 1.5s ease-out .5s infinite; }
  .js .scene .agent.thinking .pulse .p3 { animation: gt-think 1.5s ease-out 1s infinite; }
  @keyframes gt-think { from { r: 15; opacity: .5; } to { r: 52; opacity: 0; } }
  .scene .agent .dots circle { fill: var(--s-ok); opacity: 0; }
  .js .scene .agent.thinking .dots circle { animation: gt-blink 1.15s ease-in-out infinite; }
  .js .scene .agent.thinking .dots circle:nth-child(2) { animation-delay: .18s; }
  .js .scene .agent.thinking .dots circle:nth-child(3) { animation-delay: .36s; }
  @keyframes gt-blink { 0%, 100% { opacity: .15; } 45% { opacity: 1; } }
  .scene .agent.thinking .think { fill: var(--s-ok); }

  @media (prefers-reduced-motion: reduce) {
    .js .scene .burst.go .r1, .js .scene .burst.go .r2, .js .scene .agent.thinking path { animation: none; }
    .js .scene .bubble { opacity: 1; }
  }
  /* 좁은 화면에서는 글씨가 읽히지 않는다. 아래 판정 목록이 같은 내용을 전부 담고 있으므로 접는다. */
  @media (max-width: 720px) { .scene-wrap { display: none; } }

  /* ── hero ───────────────────────────────────────────── */
  .hero { padding-block: 64px 56px; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  @media (max-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
  .eyebrow {
    font-family: var(--f-mono); font-size: var(--s-xs); letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-ink); display: inline-flex; gap: 10px; align-items: center;
  }
  .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
  .hero h1 {
    font-family: var(--f-display); font-weight: 700; font-size: var(--s-2xl); line-height: 1.22;
    letter-spacing: -.02em; margin-top: 18px;
  }
  .hero h1 em { font-style: normal; color: var(--accent-ink); box-shadow: inset 0 -.32em 0 var(--accent-wash); }
  .lede { margin-top: 22px; color: var(--ink-2); max-width: 36em; font-size: 1.125rem; }
  .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 8px;
    font-weight: 600; font-size: var(--s-sm); text-decoration: none; border: 1px solid var(--ink);
  }
  .btn.primary { background: var(--ink); color: var(--ground); }
  .btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
  .btn.ghost { color: var(--ink); background: transparent; }
  .btn.ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
  .facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-size: var(--s-xs); color: var(--ink-3); }
  .facts b { color: var(--ink); font-weight: 600; font-family: var(--f-mono); }

  /* intercepted call specimen */
  .specimen {
    background: var(--code-bg); color: var(--code-ink); border-radius: 12px; box-shadow: var(--shadow);
    font-family: var(--f-mono); font-size: .8125rem; line-height: 1.65; overflow: hidden; position: relative;
  }
  .specimen .bar {
    display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.07);
    color: var(--code-dim); font-size: .75rem;
  }
  .specimen .bar b { color: var(--code-key); font-weight: 500; }
  .specimen pre { margin: 0; padding: 14px 16px; overflow-x: auto; white-space: pre; }
  .k { color: var(--code-key); } .s { color: var(--code-str); } .d { color: var(--code-dim); }
  .verdict { border-top: 1px dashed rgba(255,255,255,.12); padding: 14px 16px 18px; position: relative; }
  .verdict .row { padding-right: 150px; }
  .verdict .row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .verdict .pts { color: var(--code-str); text-align: right; font-variant-numeric: tabular-nums; }
  .verdict .code { color: var(--code-ink); }
  .verdict .why { color: var(--code-dim); }
  .verdict .sum { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: 8px 14px; align-items: center; }
  .verdict .sum b { white-space: nowrap; }
  .verdict .sum .d { min-width: 0; }
  .verdict .sum b { color: #fff; font-size: 1rem; }
  .stamp {
    position: absolute; right: 26px; top: 26px; transform: rotate(-9deg);
    border: 3px solid #ff6a5c; color: #ff6a5c; padding: 4px 14px 2px; border-radius: 6px;
    font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; letter-spacing: .12em;
    background: rgba(255, 106, 92, .06); animation: press .5s cubic-bezier(.2, .9, .3, 1.3) .5s both;
  }
  .stamp small { display: block; font-family: var(--f-mono); font-size: .56rem; letter-spacing: .06em; font-weight: 500; text-align: center; margin-top: -2px; }
  @keyframes press { from { transform: rotate(-9deg) scale(1.35); opacity: .35; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }
  @media (max-width: 520px) { .verdict .row { padding-right: 0; } .verdict .sum { flex-wrap: wrap; } .stamp { position: static; display: inline-block; margin: 14px 0 4px 4px; font-size: 1.15rem; padding: 2px 10px 1px; } .verdict .row .why { display: none; } }
  .caption { margin-top: 12px; font-size: var(--s-xs); color: var(--ink-3); }

  /* ── dossier sections ───────────────────────────────── */
  section.band { border-top: 1px solid var(--rule); padding-block: 72px; }
  section.band.sunk { background: var(--sunk); }
  .grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  @media (max-width: 860px) { .grid { grid-template-columns: 1fr; gap: 18px; } }
  .margin { font-size: var(--s-xs); line-height: 1.6; color: var(--ink-3); display: grid; gap: 6px; align-content: start; }
  .margin .tag { color: var(--accent-ink); font-weight: 600; letter-spacing: .02em; }
  .margin .ref { border-left: 2px solid var(--rule); padding-left: 10px; }
  h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--s-xl); line-height: 1.3; letter-spacing: -.01em; }
  .intro { margin-top: 14px; color: var(--ink-2); max-width: 44em; }
  h3 { font-size: var(--s-md); font-weight: 600; }

  /* measured coverage */
  .measure { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); overflow: hidden; }
  @media (max-width: 760px) { .measure { grid-template-columns: 1fr; } }
  .measure > div { padding: 22px 22px 20px; border-right: 1px solid var(--rule); }
  .measure > div:last-child { border-right: 0; }
  @media (max-width: 760px) { .measure > div { border-right: 0; border-bottom: 1px solid var(--rule); } .measure > div:last-child { border-bottom: 0; } }
  .measure .n { font-family: var(--f-mono); font-size: 2rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .measure .n small { font-size: .95rem; color: var(--ink-3); margin-left: 2px; }
  .measure p { color: var(--ink-2); font-size: var(--s-sm); margin-top: 6px; }
  .bar100 { height: 6px; background: var(--rule); border-radius: 3px; margin-top: 12px; overflow: hidden; }
  .bar100 i { display: block; height: 100%; background: var(--accent); }
  .source { margin-top: 12px; font-size: var(--s-xs); color: var(--ink-3); }

  .chain { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: var(--s-xs); }
  .chain span { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); }
  .chain span.hot { border-color: var(--stamp); color: var(--stamp); background: var(--stamp-wash); }
  .chain i { color: var(--ink-3); font-style: normal; font-family: var(--f-body); }

  /* position diagram */
  .lanes { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
  @media (max-width: 900px) { .lanes { grid-template-columns: 1fr; } }
  .lane { border: 1px solid var(--rule); border-radius: 10px; padding: 18px; background: var(--surface); display: grid; gap: 10px; align-content: start; }
  .lane.gt { border: 1.5px solid var(--accent); background: linear-gradient(var(--accent-wash), var(--accent-wash)) top/100% 4px no-repeat, var(--surface); }
  .lane .lbl { font-size: var(--s-xs); font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
  .lane.gt .lbl { color: var(--accent-ink); }
  .node { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; background: var(--ground); font-size: var(--s-sm); }
  .node small { display: block; color: var(--ink-3); font-size: var(--s-xs); }
  .node.dim { border-style: dashed; color: var(--ink-3); background: transparent; }
  .node.block { border-color: var(--stamp); background: var(--stamp-wash); color: var(--stamp); }
  .node.pass { border-color: var(--ok); color: var(--ok); }
  .entries { display: grid; gap: 8px; }
  .entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: var(--s-sm); padding: 9px 12px; border-radius: 8px; background: var(--ground); border: 1px solid var(--rule); }
  .entry b { font-family: var(--f-mono); font-size: var(--s-xs); font-weight: 500; color: var(--accent-ink); padding-top: 2px; }
  .entry span { color: var(--ink-2); }

  /* pipeline */
  .pipe { margin-top: 36px; display: grid; gap: 0; border-left: 2px solid var(--rule); }
  .stage { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 22px 0 22px 22px; position: relative; border-bottom: 1px solid var(--rule); }
  .stage:last-child { border-bottom: 0; }
  @media (max-width: 860px) { .stage { grid-template-columns: 2.6rem minmax(0, 1fr); } .stage .ex { grid-column: 2; } }
  .stage::before { content: ""; position: absolute; left: -7px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--ground); border: 2px solid var(--accent); }
  .stage .no { font-family: var(--f-mono); font-size: 1.4rem; color: var(--accent-ink); line-height: 1.2; }
  .stage h3 { margin-bottom: 6px; }
  .stage p { color: var(--ink-2); font-size: var(--s-sm); }
  .ex { align-self: start; font-family: var(--f-mono); font-size: .78rem; line-height: 1.6; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
  .ex .x { color: var(--stamp); } .ex .o { color: var(--ok); } .ex .c { color: var(--ink-3); }
  .ex div { white-space: pre; }

  /* ATR */
  .atr { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  @media (max-width: 900px) { .atr { grid-template-columns: 1fr; } }
  .ledger { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); overflow: hidden; }
  .ledger .head { padding: 14px 18px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
  .ledger .head b { font-family: var(--f-mono); font-weight: 500; }
  .pill { font-family: var(--f-mono); font-size: var(--s-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
  .pill.crit { color: var(--stamp); background: var(--stamp-wash); }
  .ledger table { width: 100%; border-collapse: collapse; font-size: var(--s-sm); }
  .ledger td { padding: 10px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .ledger tr:last-child td { border-bottom: 0; }
  .ledger td.p { width: 4.6rem; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
  .ledger td.p i { display: block; height: 4px; border-radius: 2px; background: var(--amber); margin-top: 6px; }
  .ledger code { font-size: .74rem; color: var(--ink-3); display: block; }
  .ledger tfoot td { background: var(--sunk); }
  .ledger tfoot td.p { font-family: var(--f-mono); }
  .factors { display: grid; gap: 8px; }
  .factor { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem; gap: 12px; align-items: center; font-size: var(--s-sm); }
  .factor .track { grid-column: 1 / -1; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; margin-top: -2px; }
  .factor .track i { display: block; height: 100%; background: var(--accent); }
  .factor .track i.off { background: repeating-linear-gradient(135deg, var(--rule), var(--rule) 3px, transparent 3px, transparent 6px); }
  .factor b { font-family: var(--f-mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .note { margin-top: 16px; font-size: var(--s-sm); color: var(--ink-2); border-left: 2px solid var(--amber); padding-left: 12px; }

  /* session story */
  .story { margin-top: 32px; display: grid; gap: 10px; max-width: 860px; }
  .turn { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 18px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
  @media (max-width: 700px) { .turn { grid-template-columns: 1fr; gap: 6px; } }
  .turn .who { font-size: var(--s-xs); font-weight: 600; color: var(--ink-3); padding-top: 3px; }
  .turn.ask { background: var(--accent-wash); border-color: transparent; }
  .turn.ask .what { font-family: var(--f-display); font-size: 1.15rem; }
  .turn .what code { font-size: .8rem; word-break: break-all; }
  .turn .what small { display: block; color: var(--ink-3); font-size: var(--s-xs); margin-top: 3px; }
  .turn .res { font-size: var(--s-xs); font-weight: 600; white-space: nowrap; padding-top: 3px; }
  .turn .res.allow { color: var(--ok); }
  .turn .res.block { color: var(--stamp); font-weight: 700; }
  .turn.hidden { border-style: dashed; background: transparent; color: var(--ink-3); }

  /* adversarial table */
  .adv { margin-top: 34px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
  .adv table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--s-sm); }
  .adv th { text-align: left; font-size: var(--s-xs); font-weight: 600; letter-spacing: .02em; color: var(--ink-3); padding: 12px 16px; border-bottom: 1px solid var(--rule); }
  .adv td { padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .adv tr:last-child td { border-bottom: 0; }
  .adv td code { font-size: .78rem; background: var(--sunk); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
  .adv td.cls { font-weight: 600; width: 10rem; }
  @media (max-width: 640px) {
    .adv { overflow: visible; }
    .adv table { min-width: 0; }
    .adv thead { display: none; }
    .adv tr { display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
    .adv tr:last-child { border-bottom: 0; }
    .adv td { display: block; padding: 0; border: 0; }
    .adv td.cls { width: auto; }
    .adv td code { white-space: normal; overflow-wrap: anywhere; }
    .ex { font-size: .72rem; }
    .ex div { white-space: pre-wrap; overflow-wrap: anywhere; }
  }
  .fixed { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ok); white-space: nowrap; }
  .gap { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--amber); white-space: nowrap; }
  .suite { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: var(--s-sm); color: var(--ink-2); }
  .suite b { color: var(--ink); font-weight: 600; font-family: var(--f-mono); margin-right: 4px; }

  /* principles */
  .cols { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
  @media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
  .principle { padding-block: 18px; border-top: 1px solid var(--rule); }
  .principle h3 { display: flex; gap: 10px; align-items: baseline; }
  .principle h3 code { font-size: var(--s-xs); color: var(--accent-ink); font-weight: 400; }
  .principle p { color: var(--ink-2); font-size: var(--s-sm); margin-top: 6px; }

  /* numbers */
  .perf { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  @media (max-width: 900px) { .perf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 480px) { .perf { grid-template-columns: 1fr; } }
  .perf > div { padding: 18px; border-top: 2px solid var(--ink); }
  .perf .n { font-family: var(--f-mono); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .perf .was { font-family: var(--f-mono); font-size: var(--s-xs); color: var(--ink-3); text-decoration: line-through; margin-left: 6px; }
  .perf p { font-size: var(--s-sm); color: var(--ink-2); margin-top: 4px; }

  /* rollout */
  .rollout { margin-top: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; }
  @media (max-width: 860px) { .rollout { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .rollout { grid-template-columns: 1fr; } }
  .step { padding: 22px 20px 20px 0; border-top: 1px solid var(--rule); position: relative; }
  .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--s-xs); color: var(--accent-ink); display: block; margin-bottom: 8px; }
  .step .when { font-size: var(--s-xs); color: var(--ink-3); }
  .step h3 { margin-top: 2px; }
  .step p { color: var(--ink-2); font-size: var(--s-sm); margin-top: 6px; }
  .step .mode { display: inline-block; margin-top: 10px; font-family: var(--f-mono); font-size: var(--s-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); }

  /* status */
  /* 위협 조사 화면 캡처 */
  .shot { margin: 28px 0 0; }
  .shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); box-shadow: var(--shadow); background: #05080f; }
  .shot figcaption { margin-top: 10px; font-size: var(--s-xs); line-height: 1.65; color: var(--ink-3); max-width: 60em; word-break: keep-all; }
  .shot figcaption b { color: var(--ink); font-weight: 600; margin-right: .5em; }
  .investigate-points { margin-top: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  @media (max-width: 860px) { .investigate-points { grid-template-columns: 1fr; } }
  .status { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  @media (max-width: 760px) { .status { grid-template-columns: 1fr; } }
  .status ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: var(--s-sm); }
  .status li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 6px; color: var(--ink-2); }
  .status li::before { font-family: var(--f-mono); }
  .status .done li::before { content: "✓"; color: var(--ok); }
  .status .next li::before { content: "→"; color: var(--amber); }

  footer { border-top: 1px solid var(--rule); padding-block: 34px 48px; color: var(--ink-3); font-size: var(--s-xs); }
  footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  footer .legal { flex-basis: 100%; font-size: .75rem; }
  footer b { font-family: var(--f-display); color: var(--ink); font-size: 1rem; }
  footer .policies a { color: var(--ink-2); text-decoration: none; }
  footer .policies a:hover { text-decoration: underline; }
  /* 처리방침은 법이 눈에 띄게 요구한다 — 굵게, 그러나 로고 글꼴은 아니다 */
  footer .policies .policy-strong { font-family: inherit; font-size: inherit; color: var(--ink-2); font-weight: 600; }
  /* 목차가 아니라 제품으로 들어가는 링크 — 나머지 항목과 구분한다. */
  .nav a.console { border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; color: var(--ink); }
  .nav a.console:hover { background: var(--ink); color: #fff; }