/* ==========================================================================
   ANH / Alert_K — minimal black/white brand system
   Fonts: Space Grotesk (display) · Manrope (body) · JetBrains Mono (technical)
          Playball (signature accent, used once per page max)
   ========================================================================== */

:root {
  --bg:         #050505;
  --bg-card:    #0a0a0a;

  --fg:         #f2f0ea;
  --fg-dim:     #c4c4bd;
  --fg-dim2:    #9a9a92;
  --fg-dim3:    #8a8a84;
  --fg-dim4:    #6f6f68;

  --line:       rgba(242,240,234,0.10);
  --line-hover: rgba(242,240,234,0.32);

  --green:  #7fd38e;
  --amber:  #d9a94e;
  --neutral:#9a9aa8;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-script:  'Playball', cursive;

  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  background-image:
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,0.045) 50%, transparent 62%),
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(255,255,255,0.035) 0%, transparent 70%);
  background-attachment: fixed;
}

::selection { background: var(--fg); color: var(--bg); }
a { color: inherit; text-decoration: none; }
code, .mono { font-family: var(--font-mono); }
.maxw { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* -------- Reveal-on-scroll (JS toggles .visible) -------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------- Site nav (identical markup on every page) -------- */
.site-nav {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 32px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { color: var(--fg); }
.brand-word {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.22em;
}
.nav-links { display: flex; gap: 34px; }
.nav-links a {
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--fg-dim);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.btn-outline {
  border: 1px solid rgba(242,240,234,0.35); color: var(--fg);
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; padding: 9px 18px; border-radius: 2px;
}
.btn-outline:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 720px) {
  /* Now a multi-page site — Research/Writeups/Arsenal/About are only reachable via this nav,
     so keep the links visible on mobile (wrap + shrink) instead of hiding them. */
  .nav-inner { flex-wrap: wrap; row-gap: 14px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 11px; }
}

/* -------- Page header (eyebrow + h1 + lede), used by every non-home page -------- */
.page-head { padding: 64px 32px 40px; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em;
  color: var(--fg-dim3); text-transform: uppercase; margin-bottom: 10px;
}
.page-head h1 { font-family: var(--font-display); font-weight: 600; font-size: 34px; }
.lede { font-size: 15px; color: var(--fg-dim); margin-top: 12px; max-width: 640px; }

/* -------- Status pill -------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 2px; width: fit-content;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.pill.disclosed { background: rgba(127,211,142,0.12); color: var(--green); }
.pill.disclosed .dot { background: var(--green); }
.pill.pending { background: rgba(217,169,78,0.12); color: var(--amber); }
.pill.pending .dot { background: var(--amber); }
.pill.reported { background: rgba(154,154,168,0.14); color: var(--neutral); }
.pill.reported .dot { background: var(--neutral); }

/* -------- Research/Writeups card -------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 3px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s;
  position: relative;
}
.card:hover { border-color: var(--line-hover); }
.card-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim2); display: flex; gap: 14px; }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.35; }
.card p { font-size: 13px; line-height: 1.6; color: var(--fg-dim); }
.card-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.card-tags span { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim2); background: rgba(242,240,234,0.06); padding: 3px 8px; border-radius: 2px; }
.card-link { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--fg); }
.card-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-dim4); }

/* -------- Whole-card click target (".card-link.stretched") --------
   .card-link stays position:static so its ::after's containing block is
   .card (the nearest *positioned* ancestor), not the link itself -- that's
   what makes inset:0 stretch to the whole card instead of just the link's
   own small box. Anything that must stay independently clickable inside
   the card (the external .card-ref link) gets z-index:2 to sit above the
   stretched overlay (z-index:1). */
.card-link.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-ref, .card-ref a { position: relative; z-index: 2; }
.card-ref { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim3); }
.card-ref a { color: var(--fg-dim); text-decoration: underline; }

/* -------- Timeline (Operations / Training) -------- */
.timeline { list-style: none; display: flex; flex-direction: column; }
.tl-item { padding: 26px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 140px 1fr; gap: 24px; }
.tl-item:last-child { border-bottom: none; }
.tl-date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim3); letter-spacing: 0.04em; }
.tl-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.tl-desc { font-size: 14px; color: var(--fg-dim); line-height: 1.7; }
.tl-link { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-dim); text-decoration: underline; }
.tl-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tl-tags span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-dim3); border: 1px solid var(--line); padding: 3px 8px; border-radius: 2px; }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: 6px; } }

/* -------- Generic section rhythm -------- */
.section { padding: 64px 32px; border-bottom: 1px solid var(--line); }
.section:last-of-type { border-bottom: none; }
.section h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin-bottom: 28px; }

/* -------- Footer (identical markup on every page) -------- */
.site-foot { border-top: 1px solid var(--line); padding: 30px 32px; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; }
.sig { font-family: var(--font-script); font-size: 26px; color: #d7d7d0; }
.foot-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--fg-dim4); text-transform: uppercase; }
.foot-copy { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim4); text-align: center; margin-top: 18px; }

/* -------- Hero (home only) -------- */
.hero {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px; text-align: center; min-height: 640px;
  padding: 90px 32px; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, transparent 38%, rgba(255,255,255,0.055) 50%, transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.32em; color: var(--fg-dim3); text-transform: uppercase; }
.hero-mark-row { display: flex; align-items: center; gap: 22px; }
.hero-mark-row svg { color: var(--fg); }
.agent-name { font-family: var(--font-display); font-weight: 600; font-size: 88px; letter-spacing: 0.01em; line-height: 1; }
.agent-name .dim { color: var(--fg-dim3); }
.hero-tagline { font-family: var(--font-body); font-size: 16px; color: var(--fg-dim); max-width: 620px; line-height: 1.6; }
.hero-stats { display: flex; align-items: center; gap: 28px; margin-top: 8px; }
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-stat .n { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.hero-stat .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--fg-dim3); text-transform: uppercase; }
.hero-stat-div { width: 1px; height: 34px; background: var(--line-hover); }
@media (max-width: 640px) {
  .agent-name { font-size: 52px; }
  .hero-stats { flex-wrap: wrap; justify-content: center; }
}

/* -------- Arsenal grid (class names kept from the old dossier CSS — shape unchanged) -------- */
.arsenal-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.arsenal-block { display: flex; flex-direction: column; gap: 12px; }
.arsenal-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--fg-dim3); text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.arsenal-block ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.arsenal-block li { font-size: 14px; color: var(--fg-dim); }
@media (max-width: 900px) { .arsenal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .arsenal-grid { grid-template-columns: 1fr; } }

/* -------- Profile / bio (class names kept from the old dossier CSS — shape unchanged) -------- */
.profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; }
.portrait-frame { aspect-ratio: 3/4; border: 1px solid var(--line); border-radius: 3px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); }
.portrait-placeholder { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-dim4); text-transform: uppercase; }
.portrait-caption { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-dim3); display: flex; flex-direction: column; gap: 4px; }
.field { display: flex; gap: 10px; font-size: 13.5px; color: var(--fg-dim); padding: 8px 0; border-bottom: 1px solid var(--line); }
.field span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--fg-dim3); text-transform: uppercase; width: 120px; flex-shrink: 0; }
.field b { color: var(--fg); font-weight: 600; }
.field .live { color: var(--green); }
.bio-text { font-size: 14.5px; line-height: 1.8; color: var(--fg-dim); margin-top: 18px; }
@media (max-width: 720px) { .profile-grid { grid-template-columns: 1fr; } }

/* -------- Contact card — deliberately NOT named .card (that class is the research/project
   grid item defined above; reusing it here would collide) -------- */
.contact-card { border: 1px solid var(--line); border-radius: 3px; padding: 40px; display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
.contact-card-head { display: flex; align-items: center; gap: 12px; }
.contact-card-head svg { color: var(--fg); }
.contact-card-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.contact-card-role { font-size: 13px; color: var(--fg-dim2); }
.contact-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.contact-lines a { font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); display: flex; align-items: center; gap: 10px; }
.contact-lines a:hover { color: var(--fg); }
.contact-lines svg { width: 16px; height: 16px; flex-shrink: 0; }
.contact-note { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim4); margin-top: 8px; }

/* -------- Small spacing utilities (avoid inline style="" — CSP blocks it) -------- */
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 28px; }

/* -------- Empty state (Writeups) -------- */
.empty-state { text-align: center; padding: 80px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty-state svg { color: var(--fg-dim3); }
.empty-state p { color: var(--fg-dim3); font-size: 13px; }

/* -------- Detail-page header (breadcrumb + pill + title), shared by Research/Writeups articles -------- */
.detail-breadcrumb { padding: 22px 32px; }
.detail-breadcrumb .maxw { padding: 0; }
.detail-breadcrumb a { color: var(--fg-dim3); font-size: 11.5px; }
.detail-header { padding-top: 0; }
.detail-header h1 { margin-top: 14px; }
.detail-idline { margin-top: 10px; color: var(--fg-dim2); font-size: 12.5px; }

/* -------- Article body (blog-style long-form writeup) -------- */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.article-tldr { background: var(--bg-card); border: 1px solid var(--line); border-radius: 3px; padding: 26px 28px; margin: 28px 0 8px; }
.article-tldr .eyebrow { margin-bottom: 16px; }
.article-summary { list-style: none; counter-reset: tldr; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.article-summary li { counter-increment: tldr; position: relative; padding-left: 32px; font-size: 15px; color: var(--fg-dim); line-height: 1.65; }
.article-summary li::before {
  content: counter(tldr);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(242,240,234,0.08); color: var(--fg-dim2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.article-callout { border-left: 2px solid var(--line-hover); padding: 2px 0 2px 16px; margin: 28px 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-dim3); line-height: 1.8; }
.article-section { margin-top: 40px; }
.article-section h2 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin-bottom: 14px; }
.article-section p { font-size: 15px; line-height: 1.85; color: var(--fg-dim); margin-bottom: 14px; }
.article-section ul, .article-section ol { margin: 0 0 14px 22px; color: var(--fg-dim); font-size: 15px; line-height: 1.9; }
.article-section li { margin-bottom: 4px; }
.article-code { display: block; background: var(--bg-card); border: 1px solid var(--line); border-radius: 3px; padding: 18px 20px; margin: 4px 0 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre; overflow: auto; color: var(--fg-dim); }
.article-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim3); display: flex; flex-direction: column; gap: 6px; }
.article-footer a { color: var(--fg-dim); text-decoration: underline; }

/* -------- Reading progress bar (long articles only; script.js no-ops elsewhere) -------- */
.read-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--fg-dim2); width: 0%; z-index: 500; }

/* -------- Table of contents -------- */
.article-toc { background: var(--bg-card); border: 1px solid var(--line); border-radius: 3px; padding: 22px 26px; margin: 20px 0 8px; }
.article-toc .eyebrow { margin-bottom: 14px; }
.article-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.article-toc li { counter-increment: toc; }
.article-toc a { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--fg-dim); }
.article-toc a:hover { color: var(--fg); }
.article-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim3); flex-shrink: 0; }
.article-toc a.is-active { color: var(--fg); }
.article-toc a.is-active::before { color: var(--fg); }

/* On wide monitors the centered 760px article column leaves the gutters
   empty ("허전"); pin the TOC into the left gutter instead of stacking it
   inline. IMPORTANT: the page header above the article (.site-nav,
   .detail-breadcrumb, .page-head) uses the *wider* .maxw container
   (1180px, centered), not .article-wrap (760px) -- offsetting from the
   760px column alone made the fixed sidebar overlap the h1/breadcrumb
   text, which both sit further left than the 760px column's edge. Offset
   from .maxw's 590px half-width instead so it clears every element on
   the page, and only turn this on once the viewport is wide enough that
   doing so still leaves the sidebar comfortable room (not jammed against
   the screen edge). */
@media (min-width: 1900px) {
  .article-toc {
    position: fixed; top: 130px;
    left: calc(50vw - 590px - 256px);
    width: 220px; margin: 0;
    max-height: calc(100vh - 170px); overflow-y: auto;
  }
}

/* -------- Pull quote — one per section max, for the single load-bearing line -------- */
.article-pullquote {
  font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.55;
  color: var(--fg); border-left: 2px solid var(--fg-dim2); padding: 2px 0 2px 24px; margin: 30px 0;
}

/* -------- Labeled code block: small mono tab above an .article-code -------- */
.code-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim3); margin: 16px 0 -8px; }

/* -------- Inline diagram frame -------- */
.article-diagram { background: var(--bg-card); border: 1px solid var(--line); border-radius: 3px; padding: 24px; margin: 20px 0; overflow-x: auto; }
.article-diagram svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.article-diagram figcaption { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim3); text-align: center; margin-top: 14px; }


/* ==========================================================================
   배경 — 별 + 블랙홀 (Gargantua 스타일: 옆으로 치우친 구체 + 사선 강착원반)
   .sky 마크업이 있는 페이지에만 적용된다. 글을 직접 읽는 페이지(research 본문
   등)에는 마크업을 넣지 않거나 .sky--still 을 붙여 애니메이션을 끈다.
   ========================================================================== */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* ── 별 ── */
.sky__stars {
  position: absolute; inset: -12%;
  background-image:
    radial-gradient(1px 1px at 24px 36px,       rgba(242,240,234,0.32), transparent 60%),
    radial-gradient(1px 1px at 148px 92px,      rgba(242,240,234,0.18), transparent 60%),
    radial-gradient(1.4px 1.4px at 212px 168px, rgba(242,240,234,0.26), transparent 60%),
    radial-gradient(1px 1px at 76px 214px,      rgba(242,240,234,0.14), transparent 60%),
    radial-gradient(1px 1px at 268px 44px,      rgba(242,240,234,0.20), transparent 60%);
  background-size: 300px 260px;
  opacity: .55;
}
.sky__stars--far {
  background-image:
    radial-gradient(1px 1px at 60px 120px,  rgba(242,240,234,0.12), transparent 60%),
    radial-gradient(1px 1px at 330px 260px, rgba(242,240,234,0.10), transparent 60%),
    radial-gradient(1px 1px at 190px 330px, rgba(242,240,234,0.14), transparent 60%);
  background-size: 460px 420px;
  opacity: .4;
}

/* ── 블랙홀 — WebGL2 캔버스(blackhole.js). 미지원/실패 시 자동 숨김 ── */
.sky__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: .82;
  -webkit-mask-image: linear-gradient(103deg, transparent 0%, transparent 22%, rgba(0,0,0,.30) 42%, #000 72%);
  mask-image: linear-gradient(103deg, transparent 0%, transparent 22%, rgba(0,0,0,.30) 42%, #000 72%);
}

/* 가장자리 암전 */
.sky__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 130% 115% at 46% 30%, transparent 44%, rgba(0,0,0,0.66) 100%);
}

/* ── 움직임 ──
   원반은 회전이 아니라 '물질이 흐르는' 느낌으로 밝기 띠만 아주 느리게 돈다. */
@keyframes skyDrift  { from { transform: translate3d(0,0,0); } to { transform: translate3d(-300px,-260px,0); } }
@keyframes skyDrift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(460px,-420px,0); } }
@keyframes bhFlow    { from { opacity: .85; } 50% { opacity: 1; } to { opacity: .85; } }
@keyframes bhSway    { from { transform: translateY(-50%) rotate(-16deg); }
                       50%  { transform: translateY(-50%) rotate(-14.4deg); }
                       to   { transform: translateY(-50%) rotate(-16deg); } }
.sky:not(.sky--still) .sky__stars      { animation: skyDrift 420s linear infinite; }
.sky:not(.sky--still) .sky__stars--far { animation: skyDrift2 760s linear infinite; }
.sky:not(.sky--still) .bh__disk        { animation: bhFlow 26s ease-in-out infinite; }
.sky:not(.sky--still) .sky__bh         { animation: bhSway 220s ease-in-out infinite; }

@media (max-width: 860px) {
  .sky__bh { right: -46vw; top: 70vh; width: 120vh; }
  .sky { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .sky__stars, .sky__stars--far, .bh__disk, .sky__bh { animation: none; }
}