/* ============================================================
   poiurity.com : shared design system
   Discipline: Sellii DESIGN_SPEC ("Bloomberg Terminal x Linear")
   3-tier surfaces, semantic status colors, zero decoration.
   Interaction language measured from linear.app (2026-07-10):
   fixed nav + blur(20px) + hairline border, pill nav links,
   0.1-0.16s cubic-bezier(0.25,0.46,0.45,0.94) everywhere,
   subtle ambient motion, prefers-reduced-motion respected.
   Color system rolled at random from a 6-candidate pool.
   ROLL 2026-07-10 -> #2 "Warm Gray + Forest" (active below).
   ============================================================ */

/* ---------- ACTIVE TOKENS : #2 Warm Gray + Forest ---------- */
:root {
  --bg: #f7f6f3;
  --surface-1: #fffefb;
  --surface-2: #efede7;
  --surface-3: #e6e3db;
  --text: #1c1b18;
  --text-2: #55524a;
  --text-3: #8b877b;
  --border: #e2dfd6;
  --border-strong: #c8c4b8;
  --accent: #2f6b4f;
  --accent-hover: #24543d;
  --on-accent: #f7f6f3;
  --positive: #2f6b4f;
  --negative: #b3261e;
  --warning: #9c6b0a;
  --table-head: #efede7;
  --diagram-node: #fffefb;
  --diagram-stroke: #55524a;
  --diagram-line: #8b877b;

  --sans: 'Inter', 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'JetBrains Mono', 'Pretendard Variable', ui-monospace, monospace;

  --page-max: 1080px;
  --nav-h: 64px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- CANDIDATE POOL (not selected in the roll) ----------
#1 Graphite/Chalk+Cobalt: bg #fafaf8; s1 #ffffff; s2 #f2f1ec; s3 #e9e8e2;
   text #17181a/#55585e/#85888f; border #e3e1da/#c9c7bf; accent #3b5bdb;
   positive #1b7f3f; negative #c22f2f; warning #a96a00
#3 Cool Slate/Ember: bg #f5f6f8; s1 #ffffff; s2 #eceef2; s3 #e2e5ea;
   text #12161b/#4e555e/#7e858f; border #dfe3e9/#c3c9d2; accent #d9480f;
   positive #14804a; negative #c92a2a; warning #ad6800
#4 Zinc/Indigo (dark): bg #0b0b0d; s1 #121216; s2 #1a1a20; s3 #22222a;
   text #ececef/#a2a3ad/#6c6d77; border #232329/#34343d; accent #7b87f8;
   positive #3dd68c; negative #f2555a; warning #f0b33e
#5 Ink/Phosphor (dark): bg #0a0c0b; s1 #101312; s2 #161a18; s3 #1d2220;
   text #e8edea/#9ba6a0/#67716b; border #1e2421/#2e3833; accent #3ddc97;
   positive #3ddc97; negative #f2635e; warning #e5b94e
#6 Charcoal/Amber (dark): bg #101010; s1 #171717; s2 #1f1f1f; s3 #282828;
   text #f2f2f0/#a8a8a3/#737370; border #242424/#383838; accent #f5a623;
   positive #4cc38a; negative #f16a5c; warning #f5a623
---------------------------------------------------------------- */

/* ---------- RESET / BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--nav-h);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

.container { max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }

/* ---------- LANGUAGE SWITCHING ---------- */
html[data-lang="en"] [lang="ko"] { display: none !important; }
html[data-lang="ko"] [lang="en"] { display: none !important; }
[lang="ko"] { word-break: keep-all; line-height: 1.72; }
h1 [lang="ko"], h2 [lang="ko"], h3 [lang="ko"] { line-height: inherit; }

/* ---------- MOTION: reveal on scroll (Linear-style fade-up) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--d, 0s);
}

/* ---------- FIXED NAV (blur + hairline, linear.app pattern) ---------- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.1s var(--ease), background 0.1s var(--ease);
}
.topnav.scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom-color: var(--border);
}
.topnav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.topnav .brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 8px;
}
.topnav .brand em { font-style: normal; color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9999px;
  transition: color 0.1s var(--ease), background 0.1s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.active { color: var(--text); background: var(--surface-2); }
@media (max-width: 760px) { .nav-links { display: none; } }

.topnav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11.5px;
}
.lang-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  padding: 5px 11px;
  cursor: pointer;
  transition: color 0.1s var(--ease), background 0.1s var(--ease);
}
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

/* ---------- BUTTONS (prominent contact actions) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 17px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
              color 0.16s var(--ease), transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn-sec {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-sec:hover {
  background: var(--surface-2);
  border-color: var(--text-3);
  transform: translateY(-1px);
}
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 9999px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- HERO ---------- */
.hero { padding: 88px 0 84px; }
.hero h1 {
  font-size: clamp(46px, 7.4vw, 86px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  max-width: 900px;
}
.hero .hero-tagline {
  margin-top: 18px;
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--text);
  max-width: 720px;
}
.hero .hero-sub {
  margin-top: 20px;
  font-size: 17px;
  color: var(--text-2);
  max-width: 620px;
}
.hero .hero-sub strong { color: var(--text); font-weight: 600; }
.hero .btn-row { margin-top: 28px; }
.hero .hero-status {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}

/* ---------- SECTIONS ---------- */
section { margin-bottom: 104px; }
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 32px;
}
.sec-head .idx { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.sec-head h2 { font-size: clamp(22px, 2.6vw, 27px); font-weight: 650; letter-spacing: -0.015em; }

/* ---------- PROFILE ---------- */
.facts { display: grid; gap: 0; margin-bottom: 28px; }
.fact {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.fact:last-child { border-bottom: 0; }
.fact dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 3px;
}
.fact dd { color: var(--text-2); }
.fact dd strong { color: var(--text); font-weight: 600; }

/* term gloss: inline info popover for opaque proper nouns (progressive disclosure) */
.gloss { position: relative; display: inline-block; }
.gloss-btn {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: var(--text); cursor: help; -webkit-tap-highlight-color: transparent;
}
.gloss-btn strong { border-bottom: 1px dotted var(--text-3); transition: border-color 0.1s var(--ease); }
.gloss-btn:hover strong, .gloss:focus-within .gloss-btn strong { border-bottom-color: var(--accent); }
.gloss-btn:focus { outline: none; }
.gloss-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.gloss-i { width: 11px; height: 11px; margin-left: 3px; color: var(--text-3); vertical-align: 0.5px; }
.gloss-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  width: max-content; max-width: min(300px, calc(100vw - 40px));
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1); color: var(--text-2);
  font-size: 12.5px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-align: left;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s var(--ease);
  pointer-events: none;
}
.gloss:hover .gloss-pop, .gloss:focus-within .gloss-pop, .gloss.open .gloss-pop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
@media (max-width: 560px) {
  .fact { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
}
.prose { color: var(--text-2); max-width: 680px; }
.prose p { margin-bottom: 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: border-color 0.1s var(--ease); }
.prose a:hover { border-color: var(--accent); }

/* ---------- FLAGSHIP PROJECTS ---------- */
.flagship { margin-bottom: 84px; }
.flagship:last-child { margin-bottom: 0; }
.flagship-head h3 {
  font-size: clamp(21px, 2.6vw, 25px);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.flagship-head .claim { color: var(--text-2); font-size: 16px; margin-top: 4px; max-width: 680px; }
.meta-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  margin: 12px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.meta-line .live { color: var(--positive); }
.meta-line a { color: var(--text-3); text-decoration: none; border-bottom: 1px solid var(--border); transition: color 0.1s var(--ease), border-color 0.1s var(--ease); }
.meta-line a:hover { color: var(--accent); border-color: var(--accent); }

.stack-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 18px;
}

/* split: prose left, evidence right (Linear big-claim/support) */
@media (min-width: 900px) {
  .flagship-cols {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
  }
}
.flagship-cols > * + * { margin-top: 20px; }
@media (min-width: 900px) { .flagship-cols > * + * { margin-top: 0; } }

/* ---------- DATA TABLES ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  transition: border-color 0.16s var(--ease);
}
.table-wrap:hover { border-color: var(--border-strong); }
table { border-collapse: collapse; width: 100%; }
.table-wrap table { min-width: 480px; }
caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 14px 2px;
}
th, td {
  text-align: left;
  font-size: 13.5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--table-head);
}
td.num { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
td .scope, .scope {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}
.good { color: var(--positive); font-weight: 600; }
.bad { color: var(--negative); font-weight: 600; }
.table-note {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 8px;
}
.table-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: border-color 0.1s var(--ease); }
.table-note a:hover { border-color: var(--accent); }

/* ---------- FIGURES ---------- */
figure {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  padding: 10px;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
figure:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 7%, transparent);
}
figure img {
  width: 100%;
  border-radius: 4px;
  object-fit: contain;
  cursor: zoom-in;
}
figcaption {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 8px 2px 0;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.gallery figure img { aspect-ratio: 9 / 16; }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } .gallery figure img { aspect-ratio: auto; } }

/* split layout: text left, a cluster of photos on the right */
.hero { overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 24px; align-items: stretch; }
.hero-text { align-self: center; min-width: 0; }
.hero-role { font-family: var(--mono); font-size: clamp(16px, 1.9vw, 21px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr); gap: 28px; align-items: stretch; }
.profile-text { min-width: 0; }
.hero-photos, .profile-photos { position: relative; min-height: 380px; }
.ph { position: absolute; margin: 0; overflow: hidden; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); box-shadow: 0 12px 36px color-mix(in srgb, var(--text) 13%, transparent); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-a { left: 0; top: 8%; width: 64%; height: 82%; z-index: 2; }
.ph-b { right: 0; top: 0; width: 50%; height: 44%; z-index: 3; }
/* profile: one main photo (facade) with two overlapping accents */
.pp-b { left: 4%; top: 9%; width: 60%; height: 80%; z-index: 2; }
.pp-a { right: 0; top: 0; width: 48%; height: 39%; z-index: 3; }
.pp-c { right: 2%; bottom: 2%; width: 52%; height: 40%; z-index: 3; }
@media (max-width: 880px) {
  .hero-grid, .profile-grid { grid-template-columns: 1fr; }
  .hero-photos, .profile-photos { position: static; min-height: 0; display: flex; gap: 22px; overflow-x: auto; margin-top: 4px; padding: 10px 6px 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .hero-photos .ph, .profile-photos .ph { position: static; flex: 0 0 auto; width: 66%; max-width: 250px; height: auto; aspect-ratio: 3 / 4; z-index: auto; scroll-snap-align: center; }
}


/* diagram figure (SVG) + ambient dash flow (nod to linear.app ambient motion) */
.diagram { padding: 18px 14px; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .flow { animation: dashflow 1.4s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset: -14; } }

/* ---------- WORK: sort + filter controls ---------- */
.work-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.ctl-group { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ctl-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  min-width: 36px;
}
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills button {
  appearance: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.1s var(--ease), background 0.1s var(--ease), border-color 0.1s var(--ease);
}
.pills button:hover { color: var(--text); border-color: var(--border-strong); }
.pills button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.sort-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.card.hide { display: none; }

/* ---------- WORK: project card grid (thumbnail + name + summary) ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .cards { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 8%, transparent);
}
.card-thumb {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s var(--ease);
}
.card:hover .card-thumb img { transform: scale(1.03); }
.card-thumb svg { width: 100%; height: 100%; display: block; }
.card-body { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-body h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; transition: color 0.1s var(--ease); }
.card:hover .card-body h3 { color: var(--accent); }
.card-sum { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.card-meta {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--text-3);
}
.card-meta .flag { color: var(--accent); }
.card-meta .live { color: var(--positive); }

/* ---------- PROJECT DETAIL MODAL ---------- */
.js .project-details { display: none; }
.project-details > .flagship { margin-top: 64px; }

.pmodal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  background: color-mix(in srgb, var(--text) 42%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 5vh 16px;
}
.pmodal.open { display: block; }
.pmodal-panel {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 30px clamp(18px, 4vw, 38px) 38px;
  animation: modalIn 0.22s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.pmodal .flagship { margin-bottom: 0; }
.pmodal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.1s var(--ease), border-color 0.1s var(--ease), background 0.1s var(--ease);
}
.pmodal-close:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
@media (max-width: 600px) {
  .pmodal { padding: 0; }
  .pmodal-panel { border-radius: 0; border: 0; min-height: 100vh; padding-top: 56px; }
  .pmodal-close { position: fixed; top: 12px; right: 12px; }
}

/* ---------- WRITING ---------- */
.notes { border-top: 1px solid var(--border); }
.note-row {
  display: block;
  text-decoration: none;
  padding: 16px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.16s var(--ease);
}
.note-row:hover { background: var(--surface-1); }
.note-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.note-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; transition: color 0.1s var(--ease); }
.note-row:hover .note-head h3 { color: var(--accent); }
.note-head .note-meta { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.note-row p { color: var(--text-2); font-size: 13.5px; margin-top: 4px; max-width: 680px; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--border); }
.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 44px 24px 56px;
}
.footer .ask { font-size: 17px; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
.footer .btn-row { margin-top: 18px; }
.footer .fine {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
}

/* ---------- REPORT COMPONENTS (sellii-validation) ---------- */
.report { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; }
.report-head h1 {
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin-bottom: 12px;
}
.report-head .lede { color: var(--text-2); max-width: 640px; }
.report-head .lede strong { color: var(--text); font-weight: 600; }
.kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.scope-banner {
  margin-top: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-2);
}
.scope-banner strong { color: var(--text); font-weight: 600; }
.report section { margin: 60px 0 0; }
.report .sec-q { font-size: 15px; color: var(--text-3); font-style: italic; margin-bottom: 16px; }
.report h3 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 24px 0 10px;
}
.report p { font-size: 15px; color: var(--text-2); margin-bottom: 12px; }
.report p strong, .report li strong { color: var(--text); font-weight: 600; }
.report ul.plain { font-size: 15px; color: var(--text-2); padding-left: 20px; display: grid; gap: 8px; margin-bottom: 12px; }
.report .table-wrap { margin: 12px 0 6px; }
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 3px 11px;
  white-space: nowrap;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.tag:hover { border-color: var(--border-strong); color: var(--text); }
.callout {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text);
  border-radius: 8px;
  padding: 13px 17px;
  font-size: 14px;
  color: var(--text-2);
  margin: 12px 0;
}
.callout strong { color: var(--text); }
.limits {
  font-size: 13.5px;
  color: var(--text-3);
  border-top: 1px dashed var(--border-strong);
  padding-top: 13px;
  margin-top: 20px;
}
.limits ul { padding-left: 18px; display: grid; gap: 6px; }
.report .foot {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  font-size: 14px;
  color: var(--text-3);
}
.report .foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: color 0.1s var(--ease); }
.report .foot a:hover { color: var(--accent); }

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--text) 88%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 4vmin;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; animation: lightboxIn 0.22s var(--ease); }
@keyframes lightboxIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .diagram .flow { animation: none; }
  .lightbox img, .pmodal-panel { animation: none; }
  .btn, figure, .card, .card-thumb img { transition: none; }
  .btn-primary:hover, .btn-sec:hover, figure:hover, .card:hover { transform: none; }
  .card:hover .card-thumb img { transform: none; }
}