/* 테크로 노트 — 전문 기술·정책 매체형 공통 스타일
   브랜드 색상은 data/config.js에서 CSS 변수로 주입됩니다. */

:root {
  --ink: #10242c;
  --paper: #f4f7f7;
  --panel: #fff;
  --line: #dce5e6;
  --grid: #dce8e8;
  --muted: #607077;
  --accent: #006f66;
  --accent-soft: #e1f1ef;
  --mark: #a66f22;
  --deep: #0b2b34;
  --deep-soft: #143d47;
  --danger: #a43d3d;
  --danger-soft: #f8eaea;
  --shadow: rgba(16,36,44,.12);
  --maxw: 1180px;
  --reading: 760px;
  --sans: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.72;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--mark);
  outline-offset: 3px;
}
.wrap { width: min(100%, var(--maxw)); margin: 0 auto; padding: 0 26px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 999;
  padding: 10px 16px; border-radius: 8px; color: var(--panel); background: var(--deep);
}
.skip:focus { top: 12px; }
.reading-progress {
  position: fixed; left: 0; right: 0; top: 0; z-index: 1200; height: 3px; opacity: 0;
  background: transparent; pointer-events: none; transition: opacity .18s ease;
}
.reading-progress.active { opacity: 1; }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--mark)); }
.eyebrow, .kicker {
  margin: 0; color: var(--accent); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
}
.site-header .wrap {
  min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.brand { min-width: 0; display: flex; align-items: center; gap: 14px; }
.brand a { color: var(--ink); text-decoration: none; }
.brand .mark { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.brand .mark .en {
  padding: 3px 7px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.brand .tag {
  max-width: 440px; color: color-mix(in srgb, var(--ink) 82%, var(--accent));
  font-size: 12px; font-weight: 700; line-height: 1.35; white-space: normal;
}
.nav { display: flex; align-items: center; gap: 3px; }
.nav a {
  padding: 9px 11px; border-radius: 8px; color: var(--ink);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.nav a:hover, .nav a.active { color: var(--accent); background: var(--accent-soft); }
.nav-toggle {
  display: none; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); background: var(--panel); font-weight: 700; cursor: pointer;
}

/* Hero */
.hero-editorial {
  position: relative; overflow: hidden; padding: 68px 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-soft) 86%, transparent) 0 18%, transparent 32%),
    linear-gradient(135deg, var(--paper) 0%, color-mix(in srgb, var(--panel) 82%, var(--paper)) 58%, var(--accent-soft) 100%);
}
.hero-cinematic {
  display: flex; align-items: center; min-height: min(780px, calc(100svh - 68px));
  padding: clamp(74px, 10vw, 120px) 0;
}
.hero-editorial::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .16; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 34px 34px;
}
.hero-editorial::after {
  content: ""; position: absolute; inset: -18%; z-index: 1; pointer-events: none; opacity: .18;
  background:
    radial-gradient(circle at 18% 34%, color-mix(in srgb, var(--accent) 18%, transparent) 0 12%, transparent 24%),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--mark) 14%, transparent) 0 10%, transparent 22%),
    linear-gradient(120deg, transparent 0 22%, color-mix(in srgb, var(--accent) 12%, transparent) 22% 23%, transparent 23% 100%);
  filter: blur(1px);
  animation: heroDrift 18s ease-in-out infinite alternate;
}
.hero-video-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: 1; pointer-events: none;
  filter: saturate(1.04) contrast(1.08) brightness(.92);
}
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 44%, color-mix(in srgb, var(--paper) 74%, transparent) 0%, color-mix(in srgb, var(--paper) 52%, transparent) 38%, color-mix(in srgb, var(--paper) 18%, transparent) 70%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 16%, transparent) 0%, color-mix(in srgb, var(--paper) 4%, transparent) 68%, color-mix(in srgb, var(--deep) 18%, transparent) 100%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 58px; }
.hero-grid-single { grid-template-columns: minmax(0, 1fr); }
.hero-background-grid { width: 100%; place-items: center; text-align: center; }
.hero-background-grid .hero-copy { width: min(100%, 1120px); margin-inline: auto; }
.hero-background-grid .hero-copy > p:not(.eyebrow) { margin-inline: auto; }
.hero-background-grid .hero-links { justify-content: center; }
.hero-copy .eyebrow { color: var(--accent); }
.hero-copy h1 {
  margin: 18px 0 22px; max-width: 680px; font-size: clamp(38px, 5.6vw, 70px);
  line-height: 1.12; letter-spacing: -.065em; font-weight: 700;
}
.hero-copy h1 span { color: var(--accent); }
.hero-copy > p:not(.eyebrow) {
  max-width: 640px; margin: 0; color: color-mix(in srgb, var(--ink) 88%, var(--deep));
  font-size: 18px; font-weight: 800; line-height: 1.72;
}
.hero-copy-wide { max-width: 1120px; }
.hero-copy-wide h1 {
  max-width: none; font-size: clamp(38px, 4.8vw, 64px); white-space: nowrap;
}
.hero-copy-wide > p:not(.eyebrow) { max-width: 860px; }
.hero-background-grid .hero-copy h1 { max-width: none; font-size: clamp(40px, 4.5vw, 64px); }
.hero-background-grid .hero-search { max-width: 920px; margin-inline: auto; }
.hero-lede {
  display: inline-block; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 14px; background: color-mix(in srgb, var(--panel) 84%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow) 42%, transparent);
  backdrop-filter: blur(8px);
}
.hero-lede span { display: block; margin-top: 4px; color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.hero-visual { position: relative; margin: 0; }
.hero-visual::before {
  content: ""; position: absolute; inset: -12px 12px 12px -12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 20px;
}
.hero-visual img, .hero-panel-video { position: relative; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 60px var(--shadow); }
.hero-video-visual::after {
  content: "LIVE MOTION"; position: absolute; top: 18px; right: 18px; z-index: 2;
  padding: 6px 9px; border-radius: 999px; color: var(--panel); background: color-mix(in srgb, var(--accent) 92%, var(--deep));
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em;
}
.hero-visual figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 16px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  color: var(--deep); background: color-mix(in srgb, var(--panel) 90%, transparent); font-size: 11px; font-weight: 700;
}
.hero-search { display: flex; width: min(100%, 960px); max-width: none; margin-top: 28px; padding: 6px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--shadow) 54%, transparent); backdrop-filter: blur(8px); }
.hero-search input { min-width: 0; flex: 1; border: 0; padding: 15px 16px; color: var(--ink); background: transparent; outline: 0; font-weight: 700; }
.hero-search button { min-width: 126px; border: 0; border-radius: 9px; padding: 12px 24px; color: var(--panel); background: var(--accent); font-weight: 700; cursor: pointer; }
.hero-links { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.hero-links .text-link { color: var(--accent); }

.trust-strip { border-bottom: 1px solid var(--line); background: var(--panel); }
.trust-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-strip .wrap > * { display: flex; flex-direction: column; padding: 20px 22px; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.trust-strip .wrap > *:first-child { border-left: 1px solid var(--line); }
.trust-strip strong { font-size: 20px; line-height: 1.2; }
.trust-strip span { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }

/* Sections */
.section { padding: 72px 0; }
.section-tint { background: color-mix(in srgb, var(--accent-soft) 42%, var(--paper)); border-block: 1px solid var(--line); }
.section-deep { color: var(--panel); background: var(--deep); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-head h2 { margin: 5px 0 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.25; letter-spacing: -.045em; }
.section-head > a { font-size: 13px; font-weight: 700; }
.section-deep .section-head a, .section-deep .eyebrow { color: color-mix(in srgb, var(--accent-soft) 82%, var(--panel)); }
.section-intro { max-width: 700px; margin: -12px 0 30px; color: color-mix(in srgb, var(--panel) 68%, transparent); }
.page-heading { max-width: 760px; margin-bottom: 36px; }
.page-heading h1 { margin: 8px 0 12px; font-size: clamp(34px, 5vw, 54px); line-height: 1.18; letter-spacing: -.055em; }
.page-heading p:last-child { margin: 0; color: var(--muted); font-size: 17px; }

/* Smart tools */
.founder-tools { padding-top: 60px; }
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tool-card {
  display: grid; gap: 10px; align-content: start; min-height: 210px; padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 18px;
  color: var(--ink); background: color-mix(in srgb, var(--panel) 90%, var(--paper));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--shadow) 40%, transparent);
}
.tool-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.tool-card.primary { color: var(--panel); background: linear-gradient(135deg, var(--deep), var(--deep-soft)); }
.tool-card.primary p, .tool-card.primary .tool-icon { color: color-mix(in srgb, var(--panel) 72%, transparent); }
.tool-icon { color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.tool-card strong { font-size: 22px; line-height: 1.28; letter-spacing: -.045em; }
.tool-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.habit-list { display: grid; gap: 8px; margin-top: 4px; }
.habit-list a {
  display: block; padding: 10px 0; border-top: 1px solid var(--line);
  color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.45;
}
.habit-list span { color: var(--muted); font-size: 12px; }

/* Story cards */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.story-card {
  min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: 0 8px 30px color-mix(in srgb, var(--shadow) 48%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.story-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 18px 42px var(--shadow); }
.story-media { display: block; overflow: hidden; background: var(--deep); }
.story-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .35s ease; }
.story-card:hover .story-media img { transform: scale(1.025); }
.story-content { padding: 22px; }
.story-content h3 { margin: 9px 0 10px; font-size: 18px; line-height: 1.42; letter-spacing: -.025em; }
.story-content h3 a { color: var(--ink); text-decoration: none; }
.story-content h3 a:hover { color: var(--accent); }
.story-content p { margin: 0; color: var(--muted); font-size: 13px; }
.story-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }
.story-card.featured { display: grid; grid-template-columns: 1.2fr .8fr; border-radius: 20px; }
.story-card.featured .story-media img { height: 100%; aspect-ratio: 16/9; }
.story-card.featured .story-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 56px); }
.story-card.featured .story-content h3 { font-size: clamp(25px, 3.6vw, 40px); line-height: 1.25; }
.story-card.featured .story-content p { font-size: 15px; }
.section-deep .story-card { border-color: color-mix(in srgb, var(--panel) 15%, transparent); background: var(--deep-soft); box-shadow: none; }
.section-deep .story-content h3 a { color: var(--panel); }
.section-deep .story-content p, .section-deep .story-meta { color: color-mix(in srgb, var(--panel) 64%, transparent); }
.section-deep .story-meta { border-color: color-mix(in srgb, var(--panel) 14%, transparent); }
.story-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-grid.compact .story-content p { display: none; }

/* Topic cards */
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.topic-card {
  position: relative; min-height: 220px; overflow: hidden; display: flex; flex-direction: column; justify-content: end;
  padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line)); border-radius: 18px;
  color: var(--ink); background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--accent-soft) 44%, var(--panel)));
  text-decoration: none; box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 36%, transparent);
}
.topic-card:hover { text-decoration: none; }
.topic-card img, .topic-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.topic-card img { opacity: .82; transition: transform .35s ease, opacity .35s ease; }
.topic-card:hover img { transform: scale(1.035); }
.topic-card:hover img { opacity: .92; }
.topic-overlay {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 10%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--panel) 93%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--panel) 88%, transparent), transparent 72%);
}
.topic-card > *:not(img):not(.topic-overlay) { position: relative; }
.topic-card strong { margin-top: 5px; font-size: 20px; letter-spacing: -.03em; }
.topic-card > span:last-child { margin-top: 4px; max-width: 78%; color: var(--muted); font-size: 12px; }
.topic-count { color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filter-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--panel); font-size: 12px; font-weight: 700; text-decoration: none; }
.filter-chip:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.category-hero { overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; margin-bottom: 36px; border-radius: 20px; color: var(--panel); background: var(--deep); }
.category-hero img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.category-hero div { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 56px); }
.category-hero h1 { margin: 8px 0 12px; font-size: clamp(34px, 5vw, 52px); line-height: 1.2; letter-spacing: -.05em; }
.category-hero p { margin: 0 0 20px; color: color-mix(in srgb, var(--panel) 72%, transparent); }
.category-hero strong { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }

/* Article */
.article { padding: 58px 0 30px; }
.article-head, .article-body, .article-footer { max-width: var(--reading); margin-inline: auto; }
.breadcrumb { margin: 0 0 22px; color: var(--muted); font-size: 12px; font-weight: 700; }
.breadcrumb a { color: var(--muted); }
.article-head .cat { display: inline-block; padding: 6px 10px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.article-head .column-cat { color: var(--mark); background: color-mix(in srgb, var(--mark) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--mark) 40%, var(--line)); }
.article-head h1 { margin: 18px 0 14px; font-size: clamp(34px, 5.8vw, 58px); line-height: 1.19; letter-spacing: -.065em; }
.article-deck { margin: 0 0 24px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.article-date { margin: 13px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.article-tools { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.article-tools span, .save-article {
  display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--muted); font-size: 12px; font-weight: 800;
}
.save-article { cursor: pointer; color: var(--accent); }
.save-article.saved { color: var(--panel); border-color: var(--accent); background: var(--accent); }
.series-box {
  margin-top: 22px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
}
.series-box strong { display: block; margin-top: 4px; font-size: 16px; letter-spacing: -.02em; }
.series-box ol { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.series-box a { display: flex; gap: 10px; align-items: baseline; color: var(--ink); font-size: 12px; font-weight: 700; }
.series-box a span { color: var(--accent); font-family: var(--mono); }
.series-box .current a { color: var(--accent); }
.series-box .series-all { display: inline-flex; margin-top: 12px; color: var(--accent); font-size: 12px; }
.series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.series-card {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 88%, var(--paper));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--shadow) 44%, transparent);
}
.series-cover { position: relative; display: block; min-height: 100%; background: var(--deep); }
.series-cover img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; opacity: .9; }
.series-cover span {
  position: absolute; left: 14px; top: 14px; padding: 7px 9px; border-radius: 999px;
  color: var(--panel); background: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 800;
}
.series-card-body { padding: 22px; }
.series-card h3 { margin: 5px 0 9px; font-size: 24px; line-height: 1.25; letter-spacing: -.045em; }
.series-card h3 a { color: var(--ink); }
.series-card p { margin: 0 0 15px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.series-card ol { list-style: none; display: grid; gap: 8px; margin: 0 0 16px; padding: 0; }
.series-card li a { display: flex; gap: 10px; color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.45; }
.series-card li span { color: var(--accent); font-family: var(--mono); }
.series-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.series-timeline { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.series-timeline li {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 22px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
}
.series-timeline > li > span {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--panel); background: var(--accent); font-family: var(--mono); font-weight: 800;
}
.series-timeline h2 { margin: 4px 0 8px; font-size: 24px; line-height: 1.32; letter-spacing: -.045em; }
.series-timeline h2 a { color: var(--ink); }
.series-timeline p { margin: 0 0 10px; color: var(--muted); line-height: 1.7; }
.series-timeline time { color: var(--muted); font-size: 11px; font-weight: 800; }
.series-note {
  position: sticky; top: 94px; padding: 24px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 18px; background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 45%, var(--panel)));
}
.series-note h2 { margin: 6px 0 10px; font-size: 23px; letter-spacing: -.04em; }
.series-note p { color: var(--muted); line-height: 1.75; }
.article-visual { max-width: 980px; margin: 38px auto 44px; }
.article-visual img { width: 100%; max-height: 620px; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 46px var(--shadow); }
.article-visual figcaption { margin-top: 9px; color: var(--muted); font-size: 11px; text-align: right; }
.reader-path {
  display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px;
  max-width: 800px; margin: -8px auto 36px;
}
.reader-toc, .reader-actions {
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 16px; background: color-mix(in srgb, var(--panel) 86%, var(--paper));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--shadow) 38%, transparent);
}
.reader-toc { padding: 18px 20px; }
.reader-toc strong { display: block; margin-top: 4px; font-size: 17px; letter-spacing: -.03em; }
.reader-toc ol { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.reader-toc a { color: color-mix(in srgb, var(--ink) 88%, var(--accent)); font-size: 13px; font-weight: 700; line-height: 1.45; }
.reader-toc a:hover { color: var(--accent); }
.reader-toc .toc-level-3 { padding-left: 16px; }
.reader-actions { display: grid; align-content: start; padding: 7px 14px; }
.reader-actions a {
  display: block; padding: 11px 0; border-top: 1px solid var(--line);
  color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: -.01em;
}
.reader-actions a:first-child { border-top: 0; }
.ad-slot {
  display: grid; place-items: center; min-height: 96px; margin: 24px auto;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 16px;
  color: var(--muted); background: color-mix(in srgb, var(--panel) 74%, var(--paper));
  font-size: 11px; font-weight: 800;
}
.byline-box { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.byline-box .avatar, .author-cta .avatar {
  flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--panel); background: var(--accent); font-weight: 700;
}
.byline-box .avatar { width: 42px; height: 42px; }
.byline-box .who { line-height: 1.45; }
.byline-box .name { font-size: 13px; font-weight: 700; }
.byline-box .name a { color: var(--ink); }
.byline-box .sub { color: var(--muted); font-size: 11px; }
.article-body {
  max-width: 800px; font-size: 17.5px; line-height: 2.02; letter-spacing: -.012em;
}
.article-body h2 {
  position: relative; margin: 62px 0 20px; padding: 20px 0 0 18px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  font-size: 27px; line-height: 1.35; letter-spacing: -.045em;
}
.article-body h2::before {
  content: ""; position: absolute; left: 0; top: 25px; width: 5px; height: 26px;
  border-radius: 999px; background: var(--accent);
}
.article-body h3 { margin: 34px 0 13px; color: color-mix(in srgb, var(--ink) 88%, var(--accent)); font-size: 20px; letter-spacing: -.03em; }
.article-body p { margin: 0 0 23px; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.article-body p:first-child {
  padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: 14px; background: color-mix(in srgb, var(--panel) 78%, var(--paper));
}
.article-body ul {
  margin: 0 0 27px; padding: 18px 22px 14px 40px; border: 1px solid var(--line);
  border-radius: 14px; background: color-mix(in srgb, var(--panel) 82%, var(--paper));
}
.article-body li { margin-bottom: 10px; color: color-mix(in srgb, var(--ink) 84%, var(--muted)); }
.article-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.disclaimer { margin-top: 12px; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--mark); border-radius: 10px; color: var(--muted); background: var(--panel); font-size: 12px; }
.author-cta { display: flex; gap: 17px; margin-top: 26px; padding: 23px; border-radius: 14px; background: var(--accent-soft); }
.author-cta .avatar { width: 48px; height: 48px; }
.author-cta .name { font-weight: 700; }
.author-cta p { margin: 5px 0 10px; color: var(--muted); font-size: 12px; }
.author-cta .more { font-size: 12px; font-weight: 700; }
.related-head { margin-top: 48px; }
.related-head h2 { font-size: 23px; }
.external-links {
  margin-top: 26px; padding: 22px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 36%, var(--panel)));
}
.external-links .section-head { margin: 0 0 12px; }
.external-links .related-head { margin-top: 0; }
.external-links ul { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.external-links li { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); }
.external-links li:first-child { border-top: 0; }
.external-links a { color: var(--ink); font-weight: 700; line-height: 1.5; }
.external-links a:hover { color: var(--accent); }
.external-links span { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.external-links .note { margin: 14px 0 0; }

/* Legacy lists used on editor page */
.entry-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.entry { display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.entry .num { color: var(--accent); font-family: var(--mono); font-size: 11px; }
.entry-title { margin: 0 0 5px; font-size: 17px; line-height: 1.4; }
.entry-title a { color: var(--ink); }
.entry .excerpt { margin: 0; color: var(--muted); font-size: 12px; }
.meta-cat { align-self: start; padding: 4px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 700; }

/* Generic pages / policy */
.page { padding: 68px 0; }
.page-inner { max-width: var(--reading); margin: 0 auto; }
.page-inner h1 { margin: 0 0 10px; font-size: clamp(34px, 5vw, 52px); line-height: 1.2; letter-spacing: -.055em; }
.page-inner .lede { margin: 0 0 34px; color: var(--muted); font-size: 17px; }
.page-inner h2 { margin: 38px 0 13px; font-size: 22px; letter-spacing: -.035em; }
.page-inner p { margin: 0 0 17px; }
.page-inner ul { margin: 0 0 18px; padding-left: 22px; }
.page-inner li { margin-bottom: 8px; }
.about-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.about-metrics div { display: flex; flex-direction: column; padding: 18px; border-right: 1px solid var(--line); }
.about-metrics div:last-child { border: 0; }
.about-metrics strong { font-size: 24px; }
.about-metrics span { color: var(--muted); font-size: 11px; font-weight: 700; }
.policy-page .page-inner { max-width: 900px; }
.policy-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 30px 0 46px; }
.policy-index a { display: flex; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--panel); font-size: 12px; font-weight: 700; }
.policy-index a span { color: var(--accent); font-family: var(--mono); }
.policy-sections section { scroll-margin-top: 100px; padding: 30px 0; border-top: 1px solid var(--line); }
.policy-sections h2 { margin-top: 0; }
.policy-date { margin-top: 30px; color: var(--muted); font-size: 12px; font-weight: 700; }

/* Forms / buttons */
.field { margin-bottom: 16px; }
.field label, .search-form label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.field input, .field textarea, .field select, .search-form input {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 12px 13px; color: var(--ink); background: var(--panel);
}
.field textarea { min-height: 150px; resize: vertical; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 9px; padding: 11px 18px; color: var(--panel); background: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.04); text-decoration: none; }
.btn-ghost { color: var(--accent); background: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.text-link { font-size: 12px; font-weight: 700; }
.note, .form-status { color: var(--muted); font-size: 11px; }
.adminbox, .beta-notice { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.adminbox code { padding: 2px 5px; border-radius: 4px; background: var(--accent-soft); }

/* Search */
.search-form { max-width: 780px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 12px 34px color-mix(in srgb, var(--shadow) 40%, transparent); }
.search-form > div { display: flex; gap: 8px; }
.search-summary { margin: 28px 0 16px; color: var(--muted); font-size: 12px; font-weight: 700; }
.search-results { display: grid; gap: 14px; }
.search-result { display: grid; grid-template-columns: 190px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.search-result-image img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.search-result-content { padding: 20px; }
.search-result h2 { margin: 7px 0 7px; font-size: 19px; }
.search-result h2 a { color: var(--ink); }
.search-result p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.search-result time { color: var(--muted); font-size: 10px; font-weight: 700; }
.empty-state { padding: 30px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: var(--panel); }

/* Navigator / glossary */
.navigator-layout { display: grid; grid-template-columns: .9fr .72fr; gap: 18px; align-items: start; }
.navigator-panel, .navigator-results {
  padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow) 36%, transparent);
}
.navigator-results { grid-column: 1 / -1; }
.navigator-step { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 16px; }
.navigator-step h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.navigator-options, .navigator-chips { display: grid; gap: 10px; }
.navigator-option, .navigator-chip {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; color: var(--ink);
  background: color-mix(in srgb, var(--panel) 86%, var(--paper)); cursor: pointer; text-align: left;
}
.navigator-option { display: grid; grid-template-columns: 42px 1fr; gap: 6px 12px; padding: 15px; }
.navigator-option span {
  grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--accent); background: var(--accent-soft); font-family: var(--mono); font-size: 10px; font-weight: 800;
}
.navigator-option strong, .navigator-chip strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.navigator-option em, .navigator-chip span { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.55; }
.navigator-option.active, .navigator-chip.active {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 62%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent);
}
.navigator-chip { padding: 15px; }
.navigator-result-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 18px; }
.navigator-result-head h2 { margin: 4px 0 0; font-size: 25px; letter-spacing: -.04em; }
.navigator-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.navigator-checks span {
  padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 12px;
  color: var(--muted); background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel)); font-size: 12px; line-height: 1.6;
}
.navigator-result-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.navigator-result-card { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.navigator-result-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.navigator-result-card div { padding: 16px; }
.navigator-result-card h3 { margin: 6px 0 8px; font-size: 17px; line-height: 1.42; letter-spacing: -.03em; }
.navigator-result-card h3 a { color: var(--ink); }
.navigator-result-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.glossary-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: -14px 0 32px; }
.glossary-nav a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--panel); font-size: 12px; font-weight: 800; }
.glossary-group { margin-top: 36px; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.glossary-card {
  display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 88%, var(--paper)); box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 30%, transparent);
}
.glossary-card h2 { margin: 5px 0 8px; font-size: 24px; letter-spacing: -.045em; }
.glossary-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.glossary-card ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.glossary-card li a { color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.45; }

/* Technology and company regulation navigator */
.law-guide-page { padding-bottom: 76px; }
.law-guide-hero {
  padding: 76px 0 58px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--paper) 94%, transparent) 12%, color-mix(in srgb, var(--panel) 70%, transparent) 58%, color-mix(in srgb, var(--accent-soft) 82%, var(--panel))),
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}
.law-guide-hero .wrap { max-width: 1040px; }
.law-guide-hero h1 { max-width: 860px; margin: 10px 0 18px; font-size: clamp(43px, 6.2vw, 72px); line-height: 1.08; letter-spacing: -.07em; }
.law-guide-hero h1 span { color: var(--accent); }
.law-guide-hero > .wrap > p:not(.eyebrow) { max-width: 700px; margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.law-mode-switch { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.law-mode-switch button { min-width: 112px; border: 0; border-radius: 8px; padding: 10px 14px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 800; cursor: pointer; }
.law-mode-switch button.active { color: var(--panel); background: var(--accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 25%, transparent); }
.law-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 920px; padding: 7px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 15px; background: var(--panel); box-shadow: 0 18px 44px color-mix(in srgb, var(--shadow) 48%, transparent); }
.law-search-form input { min-width: 0; border: 0; padding: 11px 14px; color: var(--ink); background: transparent; font-size: 16px; font-weight: 700; outline: 0; }
.law-search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent), 0 18px 44px color-mix(in srgb, var(--shadow) 48%, transparent); }
.law-search-form .btn { min-width: 154px; font-size: 13px; }
.law-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.law-examples > span { margin-right: 3px; color: var(--muted); font-size: 11px; font-weight: 800; }
.law-example { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--ink); background: color-mix(in srgb, var(--panel) 82%, transparent); font-size: 11px; font-weight: 800; cursor: pointer; }
.law-example:hover { border-color: var(--accent); color: var(--accent); }
.law-guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; align-items: start; padding-top: 40px; }
.law-results-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 20px; }
.law-results-heading h2 { margin: 4px 0 0; font-size: 30px; letter-spacing: -.05em; }
.law-results-heading > p { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: right; }
.law-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; scroll-margin-top: 100px; }
.law-result-card { display: flex; flex-direction: column; min-width: 0; padding: 23px; border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--panel) 92%, var(--paper)); box-shadow: 0 14px 38px color-mix(in srgb, var(--shadow) 30%, transparent); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.law-result-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: 0 22px 46px color-mix(in srgb, var(--shadow) 44%, transparent); }
.law-result-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.law-relevance, .law-category { border-radius: 999px; padding: 6px 9px; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.law-relevance { color: var(--panel); background: var(--accent); }
.law-relevance.rank-2, .law-relevance.rank-3 { color: var(--accent); background: var(--accent-soft); }
.law-category { color: var(--muted); border: 1px solid var(--line); }
.law-result-card h2 { margin: 19px 0 5px; font-size: 24px; line-height: 1.32; letter-spacing: -.045em; }
.law-result-card h2 a { color: var(--ink); }
.law-full-name { min-height: 34px; margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.law-summary { margin: 0 0 16px; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); font-size: 14px; line-height: 1.72; }
.law-why { margin-bottom: 14px; padding: 14px; border-left: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 48%, var(--panel)); }
.law-why strong { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; }
.law-why p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.law-checkpoints { display: grid; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; }
.law-checkpoints li { position: relative; padding-left: 18px; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.55; }
.law-checkpoints li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border: 2px solid var(--accent); border-radius: 50%; }
.law-card-actions { display: flex; flex-wrap: wrap; gap: 10px 13px; align-items: center; margin-top: auto; }
.law-card-actions .btn { padding: 9px 12px; }
.law-related-links { display: flex; flex-wrap: wrap; gap: 7px 10px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 10px; }
.law-related-links span { color: var(--muted); font-weight: 800; }
.law-related-links a { color: var(--accent); font-weight: 800; }
.law-guide-aside { position: sticky; top: 92px; display: grid; gap: 14px; }
.law-aside-card { padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 26%, transparent); }
.law-aside-card.accent { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 55%, var(--panel)), var(--panel)); }
.law-aside-card h2 { margin: 5px 0 9px; font-size: 20px; line-height: 1.35; letter-spacing: -.035em; }
.law-aside-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.law-analysis-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.law-analysis-tags span { padding: 6px 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 800; }
.law-api-status { display: flex; gap: 7px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1.55; }
.law-api-status[hidden] { display: none; }
.law-api-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mark) 12%, transparent); }
.law-api-status.loading::before { background: var(--accent); animation: apiPulse 1s ease-in-out infinite alternate; }
.law-api-status.success::before { background: #2f7b62; }
.law-api-status.fallback::before { background: var(--mark); }
.law-api-disclosure { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--line); }
@keyframes apiPulse { to { opacity: .35; transform: scale(.75); } }
.law-aside-card ol { list-style: none; display: grid; gap: 12px; margin: 15px 0 0; padding: 0; }
.law-aside-card ol li { display: grid; gap: 3px; padding-top: 11px; border-top: 1px solid var(--line); }
.law-aside-card ol strong { font-size: 12px; }
.law-aside-card ol span, .law-aside-card.notice span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.law-aside-card.notice { border-left: 4px solid var(--mark); }
.law-aside-card.notice strong { display: block; margin-bottom: 7px; font-size: 12px; }
.law-aside-card.notice span { display: block; margin-top: 10px; font-weight: 800; }
.law-empty-state { grid-column: 1 / -1; padding: 42px; border: 1px dashed var(--line); border-radius: 18px; background: var(--panel); text-align: center; }
.law-empty-state p { color: var(--muted); }

.regulation-detail { padding: 60px 0 84px; }
.regulation-detail-grid { display: grid; grid-template-columns: minmax(0, 820px) 300px; gap: 42px; justify-content: center; align-items: start; }
.regulation-head { padding: 34px 0 42px; border-bottom: 1px solid var(--line); }
.regulation-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.regulation-labels span { padding: 6px 9px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-family: var(--mono); font-size: 9px; font-weight: 800; }
.regulation-head h1 { margin: 18px 0 5px; font-size: clamp(42px, 6vw, 64px); line-height: 1.15; letter-spacing: -.065em; }
.regulation-official-name { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.regulation-deck { max-width: 700px; margin: 0 0 22px; font-size: 18px; line-height: 1.75; }
.regulation-section { padding: 46px 0; border-bottom: 1px solid var(--line); }
.regulation-section h2 { margin: 6px 0 18px; font-size: 29px; letter-spacing: -.045em; }
.regulation-section > p:not(.eyebrow) { color: color-mix(in srgb, var(--ink) 86%, var(--muted)); font-size: 17px; line-height: 1.9; }
.regulation-check-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.regulation-check-list li { display: grid; grid-template-columns: 42px 1fr; gap: 3px 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.regulation-check-list li > span { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--panel); background: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 800; }
.regulation-check-list strong { font-size: 15px; }
.regulation-check-list p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.regulation-keywords { display: flex; flex-wrap: wrap; gap: 8px; }
.regulation-keywords a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--panel); font-size: 11px; font-weight: 800; }
.regulation-keywords a:hover { border-color: var(--accent); color: var(--accent); }
.regulation-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.regulation-side dl { display: grid; gap: 10px; margin: 18px 0 0; }
.regulation-side dl div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.regulation-side dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.regulation-side dd { margin: 0; font-size: 11px; font-weight: 800; }
.regulation-side .btn { width: 100%; margin-top: 16px; }
.article-related-laws { margin: 0 0 28px; padding: 24px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 18px; background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 35%, var(--panel))); }
.article-related-laws .section-head { margin-bottom: 14px; }
.article-related-laws h2 { margin: 3px 0 0; font-size: 22px; }
.article-law-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.article-law-grid > a { display: grid; align-content: start; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--panel); }
.article-law-grid span { color: var(--accent); font-family: var(--mono); font-size: 9px; font-weight: 800; }
.article-law-grid strong { margin: 6px 0; font-size: 14px; line-height: 1.4; }
.article-law-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

/* Community */
.community-page > .wrap { width: min(100%, 1440px); }
.beta-notice { border-left: 4px solid var(--mark); }
.beta-notice p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.community-dashboard {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 16px; margin: 24px 0;
}
.community-live-card, .community-hot-card, .community-side-card {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius: 16px;
  background: var(--panel); box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow) 32%, transparent);
}
.community-live-card {
  min-height: 210px; padding: 26px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 18%, transparent) 0 18%, transparent 36%),
    linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 48%, var(--panel)));
}
.community-live-card h2 { max-width: 720px; margin: 8px 0 10px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.25; letter-spacing: -.055em; }
.community-live-card p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; }
.community-live-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.community-live-stats span {
  display: inline-flex; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: color-mix(in srgb, var(--panel) 78%, transparent); font-size: 11px;
}
.community-live-stats strong { color: var(--accent); }
.community-hot-card { padding: 18px; }
.community-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.community-side-head .kicker { margin: 0; color: var(--accent); }
.community-side-head strong { font-size: 17px; letter-spacing: -.03em; }
.community-hot-card ol { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.community-hot-card li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; }
.community-hot-card li > span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--panel);
  background: var(--accent); font-family: var(--mono); font-size: 10px;
}
.community-hot-card a { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.community-hot-card em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700; }
.community-board-layout {
  display: grid; grid-template-columns: 248px minmax(660px, 1fr) 280px; gap: 18px; align-items: start; margin-top: 26px;
}
.community-account-sidebar, .community-sidebar { display: grid; gap: 14px; position: sticky; top: 88px; }
.community-side-card { padding: 18px; }
.community-side-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.community-side-card a { display: block; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; }
.community-side-card a:first-of-type { margin-top: 4px; }
.community-side-card.muted { background: color-mix(in srgb, var(--paper) 66%, var(--panel)); }
.community-account-card {
  padding: 19px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 16px;
  background: var(--panel); box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow) 34%, transparent);
}
.account-note { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.account-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; }
.account-tabs button {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 5px; color: var(--muted);
  background: var(--panel); font-size: 11px; font-weight: 800; cursor: pointer;
}
.account-tabs button.active { color: var(--panel); border-color: var(--accent); background: var(--accent); }
.account-panel[hidden], .community-account-member[hidden] { display: none; }
.account-panel form { display: grid; gap: 10px; }
.account-panel label { display: grid; gap: 5px; color: var(--ink); font-size: 11px; font-weight: 800; }
.account-panel input {
  min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 11px;
  color: var(--ink); background: color-mix(in srgb, var(--panel) 88%, var(--paper)); font-size: 13px;
}
.account-panel .btn { width: 100%; }
.account-agree { grid-template-columns: auto 1fr; align-items: start; font-weight: 600 !important; line-height: 1.5; }
.account-agree input { width: auto; margin-top: 3px; }
.account-status { min-height: 34px; margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.account-status.error { color: var(--danger); }
.community-account-member { display: grid; justify-items: center; gap: 9px; padding: 12px 0 4px; text-align: center; }
.account-avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--panel); background: var(--accent); font-size: 20px; font-weight: 800; }
.community-account-member > strong { font-size: 18px; letter-spacing: -.03em; }
.community-account-member > span { color: var(--muted); font-size: 11px; word-break: break-all; }
.community-account-member p { margin: 2px 0 5px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.account-safety p { font-size: 11px; }
.community-board-shell {
  overflow: hidden; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow) 38%, transparent);
}
.community-board-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 34%, var(--panel)));
}
.community-board-top h2 { margin: 5px 0 3px; font-size: 30px; letter-spacing: -.045em; }
.community-board-top span { color: var(--muted); font-size: 14px; }
.community-controlbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 42%, var(--panel));
}
.community-search { display: flex; min-width: 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.community-search input { min-width: 0; flex: 1; border: 0; padding: 11px 12px; color: var(--ink); background: transparent; outline: 0; font-size: 15px; font-weight: 700; }
.community-search button { border: 0; border-radius: 7px; padding: 9px 15px; color: var(--panel); background: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; }
.community-sort-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.community-sort-label select { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--ink); background: var(--panel); font-size: 14px; font-weight: 700; }
.community-board-head, .board-row {
  display: grid; grid-template-columns: 94px minmax(0, 1fr) 60px 60px 60px 108px; align-items: center;
}
.community-board-head {
  padding: 12px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink) 68%, var(--muted)); background: color-mix(in srgb, var(--paper) 62%, var(--panel)); font-size: 12px; font-weight: 800; letter-spacing: -.01em; text-align: center;
}
.community-board-head span:nth-child(2) { text-align: left; }
.community-board-note { padding: 14px 18px; color: var(--muted); background: color-mix(in srgb, var(--paper) 64%, var(--panel)); font-size: 11px; }
.community-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; margin-top: 30px; }
.community-compose, .community-rules { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.community-compose h2, .community-rules h2 { margin: 0 0 20px; font-size: 22px; }
.community-rules { align-self: start; color: var(--panel); background: var(--deep); }
.community-rules h2 { margin-top: 8px; }
.community-rules ul { padding-left: 18px; color: color-mix(in srgb, var(--panel) 72%, transparent); font-size: 12px; }
.community-rules .text-link, .community-rules .kicker { color: color-mix(in srgb, var(--accent-soft) 82%, var(--panel)); }
.community-rules .text-link { display: block; margin-top: 12px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 18px; color: var(--muted); font-size: 11px; }
.check-row input { margin-top: 4px; }
.community-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 28px;
}
.community-stats > * {
  display: flex; min-height: 96px; flex-direction: column; justify-content: center; padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 14px;
  color: var(--ink); background: color-mix(in srgb, var(--panel) 92%, var(--accent-soft)); text-decoration: none;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 28%, transparent);
}
.community-stats strong { color: var(--accent); font-size: 19px; letter-spacing: -.03em; }
.community-stats span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.community-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; }
.community-filter {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px;
  color: var(--muted); background: var(--panel); font-size: 13px; font-weight: 700; cursor: pointer;
}
.community-filter.active, .community-filter:hover {
  color: var(--panel); border-color: var(--accent); background: var(--accent);
}
.community-posts { display: grid; }
.community-post {
  min-height: 86px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
  cursor: pointer; transition: background .16s ease, box-shadow .16s ease;
}
.community-post:hover { background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel)); }
.community-post:focus-visible {
  position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--accent) 46%, transparent);
  outline-offset: -3px; background: color-mix(in srgb, var(--accent-soft) 36%, var(--panel));
}
.community-post.local-post { border-left: 4px solid var(--accent); }
.community-post.seed-post { background: color-mix(in srgb, var(--panel) 88%, var(--accent-soft)); }
.community-post.hot-post .board-title strong::after {
  content: "HOT"; display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 999px;
  color: var(--panel); background: var(--danger); font-family: var(--mono); font-size: 8px; vertical-align: 2px;
}
.community-post.notice-post .board-tag { color: var(--panel); background: var(--deep); }
.board-tag {
  justify-self: start; padding: 6px 10px; border-radius: 999px; color: var(--accent);
  background: var(--accent-soft); font-size: 12px; font-weight: 700;
}
.board-title { min-width: 0; padding: 0 14px 0 4px; }
.board-title strong { display: block; overflow: hidden; color: var(--ink); font-size: 17px; line-height: 1.5; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.board-title p {
  display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 13.5px; font-weight: 600; line-height: 1.58; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.board-comments, .board-stat, .board-writer {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink)); font-family: var(--sans); font-size: 12px; font-weight: 800; text-align: center;
}
.board-comments { color: var(--accent); }
.board-writer { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--sans); }
.post-delete { margin-left: auto; border: 0; color: var(--danger); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.compose-author { margin: -12px 0 18px; color: var(--muted); font-size: 12px; }
.compose-author.logged-in { color: var(--accent); font-weight: 800; }
.community-detail[hidden], #community-list-view[hidden] { display: none; }
.community-detail { max-width: none; margin: 0 auto; }
.community-back { display: inline-flex; margin-bottom: 18px; font-weight: 700; }
.community-detail-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start;
}
.community-detail-main { min-width: 0; }
.community-detail-sidebar { display: grid; gap: 14px; position: sticky; top: 88px; }
.community-detail-card, .community-comments {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 18px;
  background: var(--panel); box-shadow: 0 16px 42px color-mix(in srgb, var(--shadow) 36%, transparent);
}
.community-detail-card { padding: clamp(24px, 4vw, 38px); }
.community-detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  color: var(--muted); font-size: 12px; font-weight: 700;
}
.community-detail-card h1 {
  margin: 18px 0 18px; font-size: clamp(28px, 5vw, 44px); line-height: 1.25; letter-spacing: -.055em;
}
.community-detail-card p {
  margin: 0; color: color-mix(in srgb, var(--ink) 78%, var(--muted)); font-size: 16px; line-height: 1.9;
  white-space: pre-wrap;
}
.community-detail-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
}
.community-detail-actions > span, .community-detail-actions .btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 8px 12px;
  border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--accent-soft) 32%, var(--panel));
  font-size: 12px; font-weight: 700;
}
.community-detail-actions strong { color: var(--accent); }
.community-detail-actions .btn.voted, .community-detail-actions .btn:disabled { opacity: .62; cursor: default; }
.community-side-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.community-side-list li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 11px 0;
  border-top: 1px solid var(--line);
}
.community-side-list li:first-child { border-top: 0; }
.community-side-list li.current a strong { color: var(--accent); }
.community-side-list .side-rank {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  color: var(--panel); background: var(--accent); font-size: 11px; font-weight: 700;
}
.community-side-list a { min-width: 0; color: var(--ink); text-decoration: none; }
.community-side-list a strong, .community-side-list a span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.community-side-list a strong { font-size: 13px; line-height: 1.45; letter-spacing: -.02em; }
.community-side-list a span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.community-side-list em {
  grid-column: 2; color: var(--accent); font-size: 11px; font-style: normal; font-weight: 700;
}
.community-comments { margin-top: 22px; padding: clamp(20px, 4vw, 30px); }
.community-comments h2 { margin: 0 0 16px; font-size: 22px; letter-spacing: -.035em; }
.community-comment-list { display: grid; gap: 10px; }
.community-comment {
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 54%, var(--panel));
}
.community-comment-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.community-comment-meta strong { color: var(--accent); }
.community-comment p { margin: 7px 0 0; color: var(--ink); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.community-comment-form { display: grid; gap: 10px; margin-top: 18px; }
.community-comment-form textarea {
  min-height: 110px; resize: vertical; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; color: var(--ink); background: color-mix(in srgb, var(--panel) 88%, var(--paper));
}
.community-clear-row { display: flex; justify-content: flex-end; margin-top: 14px; }
.community-teaser { padding-block: 55px; }
.community-teaser-inner { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 30px; padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 18px 44px color-mix(in srgb, var(--shadow) 50%, transparent); }
.community-teaser h2 { margin: 8px 0; font-size: 27px; letter-spacing: -.04em; }
.community-teaser p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: 13px; }
.community-mini-board { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 20%, var(--panel)); }
.community-mini-board ol { list-style: none; margin: 0; padding: 0; }
.community-mini-board li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.community-mini-board span { color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.community-mini-board strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.community-mini-board em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700; }
.community-mini-board .btn { margin: 14px; }
.tip-form {
  margin-top: 22px; padding: 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: 0 14px 36px color-mix(in srgb, var(--shadow) 34%, transparent);
}
.report-page .adminbox { border-left: 4px solid var(--accent); }
.alert-section { padding-block: 54px; background: color-mix(in srgb, var(--accent-soft) 34%, var(--paper)); border-block: 1px solid var(--line); }
.alert-panel {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center;
  padding-block: 0;
}
.alert-copy h2 { margin: 8px 0 10px; font-size: clamp(25px, 3vw, 36px); line-height: 1.25; letter-spacing: -.045em; }
.alert-copy p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.alert-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.alert-card {
  display: flex; min-height: 130px; flex-direction: column; justify-content: space-between; padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 16px;
  color: var(--ink); background: var(--panel); text-decoration: none; box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 28%, transparent);
  transition: transform .18s ease, border-color .18s ease;
}
.alert-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; }
.alert-card strong { font-size: 17px; letter-spacing: -.03em; }
.alert-card span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.subscribe-form {
  margin-top: 22px; padding: 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: 0 14px 36px color-mix(in srgb, var(--shadow) 34%, transparent);
}
.subscribe-form h2 { margin-top: 0; }
.channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.channel-card {
  display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel)); cursor: pointer;
}
.channel-card input { margin-top: 5px; }
.channel-card span { display: grid; gap: 4px; }
.channel-card strong { color: var(--accent); }
.channel-card em { color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.55; }
.topic-checks > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.topic-checks > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.topic-checks label { margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--panel); font-size: 12px; }

/* Error / footer */
.error-page { padding: 110px 0; text-align: center; }
.error-page .code { color: var(--accent); font-family: var(--mono); font-size: 80px; font-weight: 700; }
.error-page h1 { margin: 10px 0; font-size: 28px; }
.error-page p { margin-bottom: 24px; color: var(--muted); }
.site-footer { margin-top: 70px; padding: 52px 0 30px; color: var(--panel); background: var(--deep); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 50px; }
.footer-grid h4 { margin: 0 0 13px; color: color-mix(in srgb, var(--panel) 58%, transparent); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: color-mix(in srgb, var(--panel) 80%, transparent); font-size: 12px; }
.footer-brand .mark { font-size: 19px; font-weight: 700; }
.footer-brand .mark .en { margin-left: 7px; color: color-mix(in srgb, var(--accent-soft) 82%, var(--panel)); font-family: var(--mono); font-size: 10px; }
.footer-brand p { max-width: 430px; color: color-mix(in srgb, var(--panel) 62%, transparent); font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--panel) 14%, transparent); color: color-mix(in srgb, var(--panel) 52%, transparent); font-size: 10px; }

@keyframes heroDrift {
  from { transform: translate3d(-1.4%, -.8%, 0) rotate(-.6deg); }
  to { transform: translate3d(1.8%, 1.2%, 0) rotate(.6deg); }
}
@media (max-width: 1260px) {
  .community-board-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .community-account-sidebar { grid-column: 1 / -1; position: static; grid-template-columns: minmax(0, 1fr) minmax(240px, .45fr); }
}

@media (max-width: 980px) {
  .brand .tag { display: none; }
  .story-grid, .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { gap: 30px; }
  .hero-background-grid .hero-copy h1 { white-space: normal; }
  .story-card.featured { grid-template-columns: 1fr; }
  .story-card.featured .story-media img { max-height: 440px; }
  .tool-grid, .law-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .law-guide-layout, .regulation-detail-grid { grid-template-columns: 1fr; }
  .law-guide-aside, .regulation-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .law-guide-aside .notice { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 15px; word-break: normal; }
  .wrap { padding-inline: 17px; }
  .site-header .wrap { min-height: 66px; }
  .brand .mark { font-size: 18px; }
  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0; padding: 10px 17px 16px;
    flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--panel); box-shadow: 0 16px 30px var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .hero-editorial { padding: 42px 0; }
  .hero-cinematic { min-height: 620px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: clamp(36px, 12vw, 54px); }
  .hero-copy-wide h1 { white-space: normal; }
  .hero-video-bg { object-position: 67% center; }
  .hero-video-overlay {
    background:
      radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--paper) 84%, transparent) 0%, color-mix(in srgb, var(--paper) 68%, transparent) 58%, color-mix(in srgb, var(--paper) 28%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--panel) 14%, transparent), color-mix(in srgb, var(--paper) 18%, transparent));
  }
  .hero-visual { margin-top: 10px; }
  .hero-visual img, .hero-panel-video { aspect-ratio: 16/11; }
  .hero-search { margin-top: 22px; }
  .hero-search button { min-width: 88px; padding-inline: 14px; }
  .hero-links { align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero-background-grid .hero-links { align-items: center; }
  .trust-strip .wrap { grid-template-columns: repeat(2, 1fr); padding-inline: 0; }
  .trust-strip .wrap > * { border-bottom: 1px solid var(--line); }
  .section { padding: 54px 0; }
  .section-head { align-items: flex-start; }
  .story-grid, .story-grid.compact, .topic-grid, .series-grid, .tool-grid, .navigator-layout, .navigator-result-list, .navigator-checks, .glossary-grid { grid-template-columns: 1fr; }
  .story-card.featured { display: block; }
  .tool-card { min-height: 0; }
  .navigator-results { grid-column: auto; }
  .navigator-result-head { align-items: flex-start; flex-direction: column; }
  .series-card { grid-template-columns: 1fr; }
  .series-cover img { min-height: 220px; }
  .series-detail-grid { grid-template-columns: 1fr; }
  .series-note { position: static; }
  .series-timeline li { grid-template-columns: 1fr; }
  .category-hero { grid-template-columns: 1fr; }
  .category-hero img { min-height: 220px; }
  .article { padding-top: 36px; }
  .article-head h1 { font-size: clamp(32px, 10vw, 46px); }
  .article-visual { margin: 28px -17px 34px; }
  .article-visual img { border-radius: 0; }
  .reader-path { grid-template-columns: 1fr; margin: 0 auto 30px; }
  .reader-toc, .reader-actions { border-radius: 14px; }
  .article-body { font-size: 16px; line-height: 1.9; }
  .article-body h2 { font-size: 23px; }
  .author-cta { flex-direction: column; }
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry .num { display: none; }
  .meta-cat { justify-self: start; }
  .policy-index { grid-template-columns: 1fr; }
  .alert-panel, .alert-actions, .channel-grid, .topic-checks > div { grid-template-columns: 1fr; }
  .alert-card { min-height: 104px; }
  .community-dashboard, .community-board-layout { grid-template-columns: 1fr; }
  .community-account-sidebar, .community-sidebar { position: static; grid-template-columns: 1fr; }
  .community-detail-layout { grid-template-columns: 1fr; }
  .community-detail-sidebar { position: static; }
  .community-controlbar { grid-template-columns: 1fr; }
  .community-sort-label { justify-content: space-between; }
  .community-layout { grid-template-columns: 1fr; }
  .community-stats { grid-template-columns: repeat(2, 1fr); }
  .community-board-top { align-items: flex-start; flex-direction: column; padding: 19px; }
  .community-board-head { display: none; }
  .board-row { grid-template-columns: auto 1fr auto; gap: 9px; align-items: start; padding: 14px; }
  .board-title { grid-column: 2 / 4; padding-right: 0; }
  .board-title strong, .board-title p { white-space: normal; }
  .board-title strong { font-size: 15px; }
  .board-title p { font-size: 12px; }
  .board-comments { justify-self: end; }
  .board-stat { display: none; }
  .board-writer { grid-column: 2 / 4; justify-content: flex-start; text-align: left; }
  .community-detail-card, .community-comments { border-radius: 16px; }
  .community-detail-actions { align-items: stretch; flex-direction: column; }
  .community-detail-actions > span, .community-detail-actions .btn { justify-content: center; width: 100%; }
  .community-teaser-inner { grid-template-columns: 1fr; align-items: flex-start; padding: 25px; }
  .search-result { grid-template-columns: 110px 1fr; }
  .search-result-content { padding: 14px; }
  .search-result h2 { font-size: 15px; }
  .search-result p { display: none; }
  .search-form > div { align-items: stretch; flex-direction: column; }
  .law-guide-hero { padding: 52px 0 42px; }
  .law-guide-hero h1 { font-size: clamp(38px, 12vw, 52px); }
  .law-mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .law-mode-switch button { min-width: 0; }
  .law-search-form { grid-template-columns: 1fr; }
  .law-search-form .btn { width: 100%; }
  .law-guide-layout { padding-top: 30px; }
  .law-results-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .law-results-heading > p { max-width: none; text-align: left; }
  .law-results, .law-guide-aside, .regulation-side, .article-law-grid { grid-template-columns: 1fr; }
  .law-guide-aside .notice { grid-column: auto; }
  .law-result-card { padding: 19px; }
  .law-full-name { min-height: 0; }
  .regulation-detail { padding-top: 38px; }
  .regulation-head h1 { font-size: clamp(36px, 11vw, 50px); }
  .regulation-section { padding: 36px 0; }
  .regulation-section h2 { font-size: 25px; }
  .article-related-laws { padding: 19px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .hero-editorial::after { animation: none !important; }
  .hero-video-bg { opacity: 1; }
}

/* ===== 글쓰기 스튜디오 (studio.html) ===== */
.studio-page .page-inner { max-width: none; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-top: 22px; align-items: start; }
.studio-form { display: flex; flex-direction: column; gap: 14px; }
.studio-load { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.studio-load label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.studio-load select { font: inherit; font-weight: 400; color: var(--ink); padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.studio-mode { white-space: nowrap; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 20px; background: var(--line); color: var(--muted); }
.studio-mode.editing { background: var(--mark); color: #fff; }
.studio-form input[readonly] { background: color-mix(in srgb, var(--line) 30%, var(--panel)); color: var(--muted); cursor: not-allowed; }
.studio-typeswitch { display: inline-flex; gap: 6px; background: var(--accent-soft); padding: 5px; border-radius: 12px; width: max-content; }
.studio-typeswitch button { border: 0; background: transparent; padding: 8px 20px; border-radius: 9px; font-weight: 700; color: var(--muted); cursor: pointer; }
.studio-typeswitch button.active { background: var(--panel); color: var(--accent); box-shadow: 0 1px 4px var(--shadow); }
.studio-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.studio-field input, .studio-field select, .studio-field textarea {
  font: inherit; font-weight: 400; color: var(--ink); padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); width: 100%; box-sizing: border-box;
}
.studio-field textarea { resize: vertical; line-height: 1.6; }
.studio-field input:focus, .studio-field select:focus, .studio-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.studio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.studio-counter { font-size: 12px; color: var(--muted); }
.studio-counter #s-count { font-weight: 700; color: var(--ink); }
.studio-counter .ok { color: #2f7a3f; font-weight: 700; font-style: normal; }
.studio-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.studio-validation { font-size: 13px; margin: 4px 0 0; min-height: 18px; }
.studio-validation.err { color: var(--danger); }
.studio-validation.ok { color: #2f7a3f; }
.studio-validation.warn { color: var(--mark); }
.studio-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; }
.studio-preview-card, .studio-output-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 18px; }
.studio-preview-card .kicker { margin: 0 0 12px; }
.studio-preview { border: 1px dashed var(--line); border-radius: 10px; padding: 18px; max-height: 60vh; overflow: auto; }
.studio-preview .cat { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.studio-preview h1 { font-size: 24px; line-height: 1.3; margin: 4px 0 10px; }
.studio-preview .article-deck { font-size: 15px; color: var(--muted); margin: 0 0 14px; }
.studio-output-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.studio-output-card pre { margin: 0; background: var(--ink); color: #e7f0fb; border-radius: 10px; padding: 14px; overflow: auto; max-height: 40vh; }
.studio-output-card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; white-space: pre; }
.studio-output-card .note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.studio-publish { border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 12px; padding: 14px 16px; background: var(--accent-soft); }
.studio-publish-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.studio-publish-head strong { font-size: 14px; }
.studio-publish-head span { font-size: 12px; color: var(--muted); }
.studio-publish-row { display: flex; gap: 8px; }
.studio-publish-row input { flex: 1; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.studio-publish-row .btn { white-space: nowrap; }
.studio-publish-status { font-size: 13px; margin: 10px 0 0; min-height: 16px; }
.studio-publish-status.ok { color: #2f7a3f; }
.studio-publish-status.err { color: var(--danger); }
.studio-publish-status a { color: var(--accent); font-weight: 700; }
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; }
  .studio-side { position: static; }
}