* {
  box-sizing: border-box;
}

:root {
  --shell-max: 1180px;
  --shell-padding: 40px;
  --shell-padding-mobile: 18px;
  --section-rhythm: 56px;
  --section-rhythm-compact: 56px;
  --card-gap: 18px;
  --card-padding-hero: 32px;
  --card-padding: 24px;
  --card-padding-compact: 18px;
  --card-child-gap: 16px;
  --card-child-gap-compact: 12px;
  --surface-padding: 28px;
  --nav-height: 76px;
  --button-height: 48px;
  --button-height-sm: 44px;
  --chip-height: 44px;
  --hero-title-max: 12.5em;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: 0;
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video,
audio {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
  letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--ink);
}

h1 {
  margin: 18px 0 16px;
  max-width: var(--hero-title-max);
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.12;
  font-weight: 800;
}

h2 {
  margin: 12px 0 10px;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 800;
}

h3 {
  margin: 10px 0 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
}

h4 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
}

p {
  margin: 0;
}

.markdown-table-wrap {
  width: 100%;
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface);
}

.markdown-table th,
.markdown-table td {
  padding: 12px 14px;
  border: 1px solid var(--line-soft, var(--line));
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
}

.markdown-table th {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 800;
}

.markdown-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

@media (max-width: 720px) {
  .markdown-table {
    min-width: 560px;
  }

  .markdown-table th,
  .markdown-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.shell {
  width: min(var(--shell-max), calc(100% - (var(--shell-padding) * 2)));
  margin: 0 auto;
}

.shell-narrow {
  max-width: var(--container-narrow);
}

.mono {
  font-family: var(--font-mono);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-7 {
  margin-top: var(--space-7);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-7 {
  margin-bottom: var(--space-7);
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.nav {
  min-height: var(--nav-height);
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, auto) minmax(180px, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: clamp(10px, 1.6vw, 24px);
}

.brand {
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: start;
  color: var(--ink);
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
}

.brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(14px, 1vw, 16px);
}

.brand-mark,
.mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 24, 32, 0.14);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 24, 32, 0.06);
}

.brand-mark {
  padding: 7px;
  object-fit: contain;
}

.mark {
  color: #ffffff;
  background: var(--ink);
  font-weight: 800;
}

.nav-links,
.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.nav-links {
  max-width: min(100%, 720px);
  justify-content: center;
  justify-self: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid transparent;
  padding: 0 clamp(6px, 0.7vw, var(--space-3));
  color: var(--text-soft);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 760;
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav-links a[aria-current="page"],
.nav-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--amber);
}

.nav-cta {
  justify-self: end;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.nav-cta .btn,
.nav-cta .btn.sm {
  white-space: nowrap;
}

.lang-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--bg-soft);
}

.lang-toggle a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.lang-toggle a[aria-current="true"] {
  color: var(--ink);
  background: var(--blue-soft);
}

.btn {
  min-height: var(--button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill); /* v2: pill CTA (discover grammar) */
  padding: 0 20px;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  font-weight: 800;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.btn:hover {
  border-color: rgba(15, 118, 110, 0.32);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.btn.primary {
  /* noleji-report: deep-navy primary CTA (was var(--accent)) */
  border-color: var(--ink);
  color: #ffffff;
  background: var(--ink);
}

.btn.secondary,
.btn.ghost {
  background: var(--bg-soft);
}

.btn.sm {
  min-height: var(--button-height-sm);
  padding: 0 14px;
  font-size: 13px;
}

.hero {
  padding: 88px 0 60px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.86fr);
  gap: 34px;
  align-items: stretch;
}

.hero-copy-stack,
.story-hero-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.hero-home {
  padding-bottom: 48px;
}

.eyebrow,
.kicker,
.section-kicker {
  /* v2: quiet editorial eyebrow — plain teal caption, no chip chrome.
     De-chips every page at once (design brief: 칩은 상태 정보에만). */
  min-height: 0;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.section-kicker {
  margin-bottom: var(--space-3);
}

.lede {
  max-width: 760px;
  color: var(--text-soft);
  font-size: 19px;
  line-height: 1.7;
  font-weight: 500;
}

.muted,
.mini span {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.68;
}

.hero-actions,
.actions,
.proof-row,
.format-ribbon,
.story-meta-row,
.pivot-row,
.audio-actions,
.video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.hero-actions,
.actions {
  margin-top: var(--space-4);
}

.proof-row {
  margin-top: var(--space-4);
}

.pivot-row a {
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-soft);
}

.chip,
.badge,
.format-chip {
  min-height: var(--chip-height);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  color: var(--text-soft);
  background: var(--bg-soft);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 760;
}

.badge.accent,
.badge.live,
.format-chip.has-content,
.card-status.ok {
  border-color: rgba(15, 118, 110, 0.2);
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.badge.beta,
.badge.watch,
.card-status.limited {
  border-color: rgba(15, 118, 110, 0.2);
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.badge.no-content,
.format-chip.no-content {
  color: var(--text-dim);
  background: var(--surface-2);
}

.format-chip.active {
  border-color: var(--accent);
  color: #ffffff;
  background: var(--accent);
}

.format-chip .meta,
.story-meta-row,
.card-meta,
.meta-row {
  color: var(--text-dim);
  font-size: 13px;
}

.panel,
.card,
.feature,
.mini,
.note,
.story-hub-card,
.core-brief-panel,
.brief-trust-rail,
.brief-decision-card,
.decision-card,
.support-format-block,
.premium-value-rail,
.audio-block,
.watch-recap,
.empty-pillar,
.pillar-card,
.cardnews-tile,
.source,
.path-card,
.hero-cover-card,
.story-cover-card,
.story-hero-note,
.brief-visual-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.panel,
.card,
.feature,
.mini,
.note,
.story-hub-card,
.core-brief-panel,
.brief-trust-rail,
.brief-decision-card,
.decision-card,
.support-format-block,
.premium-value-rail,
.audio-block,
.watch-recap,
.empty-pillar,
.pillar-card,
.path-card,
.hero-cover-card,
.story-cover-card,
.story-hero-note,
.brief-visual-card {
  padding: var(--surface-padding);
}

.panel {
  background: var(--bg-soft);
  box-shadow: none;
}

.mini-grid,
.grid-2,
.grid-3,
.grid-4,
.split,
.story-grid,
.brief-intel-grid,
.brief-decision-grid,
.pillar-grid,
.cardnews-swipe,
.sources-list,
.hero-paths,
.hero-brief-stats,
.today-brief-grid,
.story-hero-grid {
  display: grid;
  gap: var(--card-gap);
}

.mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-5);
}

.grid-2,
.story-grid,
.brief-decision-grid,
.pillar-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brief-intel-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.7fr);
}

.today-brief-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  align-items: stretch;
  gap: var(--card-child-gap);
}

.story-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.72fr);
  align-items: start;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.split {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.78fr);
}

.hero-paths {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.hero-brief-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-5);
}

section.block,
.block {
  padding: var(--section-rhythm) 0;
  border-top: 1px solid var(--line-soft);
}

.home-bridge {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-warm);
}

.home-bridge__inner {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
}

.home-bridge__copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.home-bridge__kicker,
.home-today-card__issue {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: uppercase;
}

.home-bridge__copy strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.home-bridge__steps {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.home-bridge__steps span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 800;
}

.home-hero-latest,
.archive-feature,
.pillar-latest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.home-hero-latest {
  border-color: var(--line-soft);
  border-left-color: var(--accent);
  background: rgba(255, 253, 248, 0.72);
  box-shadow: none;
}

.home-hero-latest__copy,
.topic-latest-card,
.pillar-latest-card > div,
.archive-feature > div {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.home-hero-latest__meta,
.topic-latest-card__meta,
.pillar-latest-card__meta,
.archive-feature__meta {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}

.home-hero-latest strong,
.topic-latest-card strong,
.pillar-latest-card strong,
.archive-feature strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-hero-latest__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.topic-latest-section,
.pillar-latest-section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.topic-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}

.topic-latest-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--surface);
  box-shadow: none;
}

.topic-latest-card__cta,
.pillar-latest-card__cta,
.archive-feature__cta {
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 900;
}

.pillar-latest-card {
  margin-top: 0;
}

.pillar-latest-card p,
.archive-feature p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.68;
}

.home-today-section {
  border-top: 0;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.home-today-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-left: 4px solid var(--accent);
}

.home-today-card__header,
.home-today-card__footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.home-today-card__meta,
.home-today-card__formats {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.home-today-card__body {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}

.home-today-card__body h3 {
  max-width: 880px;
  margin: 0;
  font-size: 26px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.home-today-card__body .muted {
  max-width: 780px;
}

.home-today-card__formats .chip {
  line-height: 1.4;
}

.home-today-card__footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}

.home-today-card__note {
  min-width: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.home-day-summary,
.home-day-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.home-day-summary {
  margin-bottom: var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--surface);
  box-shadow: none;
}

.home-day-summary strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink);
  font-size: 22px;
  line-height: 1.35;
}

.home-day-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}

.home-day-card {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--surface);
  box-shadow: none;
}

.home-day-card:hover {
  border-color: rgba(15, 118, 110, 0.24);
  background: var(--surface-warm);
}

.home-day-card__meta,
.home-day-card__cta {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}

.home-day-card strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.home-day-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.64;
}

.home-day-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.topic-coming-soon {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-4);
}

.topic-coming-soon__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.topic-coming-soon__list span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  color: var(--text-dim);
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 760;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.section-head > div {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.section-head h2 {
  margin-bottom: 0;
}

.section-head p {
  max-width: 620px;
  color: var(--text-soft);
}

#newsletter.block {
  padding-top: var(--section-rhythm-compact);
}

.story-list {
  display: grid;
  gap: var(--space-3);
}

.story-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 44px;
  gap: var(--space-4);
  align-items: center;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
  background: var(--surface);
  box-shadow: none;
}

.story-row:hover {
  border-color: rgba(15, 118, 110, 0.28);
  background: var(--surface-warm);
}

.date-cell {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
}

.date-cell .weekday {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
}

.story-row .body strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.38;
}

.story-row .body p {
  margin-top: var(--space-2);
}

.story-row .arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--blue);
  background: var(--blue-soft);
  font-weight: 800;
}

.path-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  transition: transform 180ms ease, border-color 180ms ease;
}

.hero .path-card {
  border-color: var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.58);
  box-shadow: none;
}

.path-card:hover,
.hero-cover-card:hover,
.story-cover-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.28);
}

.path-eyebrow,
.hero-cover-label,
.story-cover-label {
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
}

.path-title {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.26;
  font-weight: 800;
}

.path-desc {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
}

.hero-editorial-rail,
.story-hero-visual {
  display: grid;
  gap: var(--card-gap);
  align-content: start;
}

.hero-cover-frame,
.story-cover-frame,
.brief-visual-frame {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg-soft);
}

.hero-cover-frame {
  aspect-ratio: 4 / 5;
  margin-top: var(--space-4);
}

.story-cover-frame,
.brief-visual-frame {
  aspect-ratio: 4 / 5;
}

.hero-cover-frame img,
.story-cover-frame img,
.brief-visual-frame img,
.cardnews-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* R8 adj: representative is IG 4:5 (1080x1350). Frame 4/5 + object-fit:contain
   = zero crop in both states (square source letterboxes, 4:5 source fills). */
.cardnews-tile img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: contain;
  background: var(--bg-soft);
}

/* R7-C: in-body inline cardnews preview — square, column-fit, no overflow. */
.cards-inline-embed {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.cards-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.cards-inline-counter {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cards-inline-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.cards-inline-row img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  display: block;
}
.cards-inline-cta {
  display: inline-flex;
  margin-top: var(--space-3);
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 600px) {
  .cards-inline-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero-cover-meta,
.story-cover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero-month-note,
.story-cover-caption {
  margin-top: var(--space-3);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.66;
}

.hero-brief-stat,
.story-hero-note {
  display: grid;
  gap: var(--space-2);
}

.hero-brief-stat span,
.story-hero-note span {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
}

.hero-brief-stat strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.38;
}

.hero-brief-stat p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.card-meta,
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.story-hub-header {
  padding: var(--section-rhythm) 0 var(--section-rhythm-compact);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}

.breadcrumb a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.story-hub-card,
.story-hub-header .brief-intel-grid,
.story-hub-header .brief-decision-grid {
  margin-top: var(--space-5);
}

.story-hub-card {
  display: grid;
  gap: var(--card-child-gap);
  padding: var(--card-padding-hero);
}

.story-hub-card > * {
  margin-top: 0;
}

.story-hub-card h2,
.story-hub-card h3,
.core-brief-panel h2,
.brief-decision-card h3,
.decision-card h3,
.support-format-block h3,
.premium-value-rail h3,
.audio-block h3,
.watch-recap h3 {
  margin-top: 0;
}

.story-hub-card h2 {
  margin-bottom: 0;
  font-size: 42px;
  line-height: 1.12;
}

.today-brief-main,
.core-brief-panel {
  display: grid;
  gap: var(--card-child-gap);
  min-height: 100%;
}

.core-brief-list,
.brief-trust-rail,
.decision-list,
.support-format-list,
.watch-list {
  display: grid;
  gap: var(--space-3);
}

.core-brief-list {
  margin: 0;
  padding-left: 22px;
}

.core-brief-list li {
  padding: 0;
  border-top: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.72;
}

.brief-trust-item,
.decision-list li,
.support-format-list li,
.watch-list li {
  padding: var(--card-child-gap-compact) 0;
  border-top: 1px solid var(--line-soft);
}

.brief-trust-item:first-child,
.decision-list li:first-child,
.support-format-list li:first-child,
.watch-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.brief-trust-item span,
.decision-row strong {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
}

.brief-trust-item strong,
.decision-row p,
.brief-decision-card p,
.story-hero-note strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
}

.brief-visual-card {
  padding: var(--space-3);
}

.brief-decision-card,
.decision-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.decision-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.decision-row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.story-meta-row {
  margin-top: var(--space-3);
}

.story-action-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.story-action-rail a {
  min-width: 0;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.story-action-rail span {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.story-action-rail strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.story-hub-header .story-snap,
.story-hub-header .story-fmtbar {
  margin-top: var(--space-5);
}

.snap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.snap-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.snap-tab,
.media-tab {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  padding: 0 var(--space-3);
  color: var(--accent-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}

.snap-tab:last-child {
  border-right: 0;
}

.snap-tab[aria-selected="true"],
.media-tab[aria-selected="true"] {
  color: #ffffff;
  background: var(--accent);
}

.snap-panel {
  min-height: 190px;
  padding: var(--space-5);
}

.snap-panel[hidden],
.media-body[hidden] {
  display: none;
}

.snap-panel ol {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 1.35em;
}

.snap-panel li,
.snap-panel p,
.snap-decide dd {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.72;
}

.snap-decide {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.snap-decide div,
.snap-trust-grid > div {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.snap-decide div:first-child,
.snap-trust-grid > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.snap-decide dt,
.snap-trust-grid span {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.snap-decide dd {
  margin: 0;
}

.snap-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.snap-trust-grid strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}

.snap-trust-note {
  margin-top: var(--space-4);
  border-left: 3px solid var(--accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
}

.fmtbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--surface-2);
}

.story-fmtbar .format-chip {
  min-height: 40px;
}

.format-chip.active .meta {
  color: rgba(255, 255, 255, 0.84);
}

.support-format-block,
.premium-value-rail,
.audio-block,
.watch-recap {
  margin-top: var(--space-5);
}

.story-hub-card .support-format-block {
  margin-top: 0;
  padding: var(--card-padding-compact);
}

.story-hub-card .actions {
  margin-top: 0;
  padding-top: var(--card-child-gap-compact);
  border-top: 1px solid var(--line-soft);
}

.support-format-label,
.format-label {
  display: inline-flex;
  margin-bottom: var(--card-child-gap-compact);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.disclosure-note {
  margin-top: var(--space-4);
  border-left: 4px solid var(--accent);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.story-section {
  padding: var(--section-rhythm) 0;
  border-top: 1px solid var(--line-soft);
}

.story-body {
  max-width: 820px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.78;
}

.story-body h2,
.story-body h3 {
  margin-top: var(--space-7);
}

.story-body p + p,
.story-body ul + p,
.story-body ol + p {
  margin-top: var(--space-4);
}

.story-body ul,
.story-body ol {
  padding-left: 1.4em;
}

.story-body li + li {
  margin-top: var(--space-2);
}

.story-body a,
.site-footer a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.story-lang-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.audio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.audio-block audio {
  width: 100%;
}

.media-collection {
  padding-top: var(--section-rhythm-compact);
}

.media-collection-head,
.media-panel-head {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.media-collection-head h2,
.media-panel-head h3 {
  margin: 0;
}

.media-collection-head p,
.media-panel-head p {
  max-width: 560px;
  color: var(--text-soft);
  text-align: right;
}

.media-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.media-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
}

.media-tab span {
  color: currentColor;
  opacity: 0.72;
  font-family: var(--font-mono);
  font-size: 12px;
}

.media-body {
  margin-top: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--surface);
}

.media-body .sources-list,
.media-body .story-watch-shell {
  margin-top: var(--space-4);
}

.media-body .story-watch-shell {
  padding: var(--space-4);
  background: var(--surface-2);
}

.media-body .story-watch-frame {
  margin-top: 0;
}

.watch-recap {
  background: var(--surface-2);
  box-shadow: none;
}

.story-watch-shell {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface);
}

.story-watch-context {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.story-watch-context .section-kicker {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.story-watch-context p {
  max-width: 560px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
  text-align: right;
}

.story-watch-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2);
  background: var(--ink);
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: var(--ink);
}

/* Loading affordance behind the (lazy) player — covered once it paints. */
.video-frame .video-loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: var(--ink);
}

.story-watch-caption {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.watch-affordance {
  min-width: 0;
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.story-watch-caption .video-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.story-pivot-row {
  margin: var(--section-rhythm-compact) 0 calc(var(--section-rhythm-compact) + var(--space-4));
}

@media (max-width: 720px) {
  .snap-tabs,
  .media-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .snap-tabs::-webkit-scrollbar,
  .media-tabs::-webkit-scrollbar {
    display: none;
  }

  .snap-tab,
  .media-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .snap-tab {
    border-right: 1px solid var(--line-soft);
  }

  .snap-panel,
  .media-body {
    padding: var(--space-4);
  }

  .snap-panel {
    min-height: 0;
  }

  .snap-trust-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .media-collection-head,
  .media-panel-head,
  .story-watch-caption {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-collection-head p,
  .media-panel-head p {
    max-width: none;
    text-align: left;
  }

  .story-watch-caption .video-actions {
    width: 100%;
  }
}

/* R8-C: site cardnews as an SNS swipe carousel — one card at a time
   (scroll-snap mandatory + prev/next + dot indicators + mobile swipe). */
.cardnews-carousel { position: relative; margin-top: var(--space-4); }
.cardnews-swipe {
  grid-auto-flow: column;
  grid-auto-columns: min(360px, 80%);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}
.cardnews-swipe::-webkit-scrollbar { display: none; }
.cardnews-tile { scroll-snap-align: center; min-width: 0; }
.cardnews-nav {
  position: absolute;
  top: calc(50% - var(--space-5));
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow-card);
}
.cardnews-nav.prev { left: calc(-1 * var(--space-2)); }
.cardnews-nav.next { right: calc(-1 * var(--space-2)); }
.cardnews-nav[disabled] { opacity: 0.35; cursor: default; }
.cardnews-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.cardnews-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  cursor: pointer;
}
.cardnews-dot[aria-current="true"] { background: var(--accent); }
@media (max-width: 600px) {
  .cardnews-swipe { grid-auto-columns: 84%; }
  .cardnews-nav { display: none; }
}

.cardnews-tile,
.source {
  padding: var(--space-4);
}

.cardnews-tile figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}

.cardnews-counter {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.sources-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.source {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  gap: var(--space-3);
  align-items: start;
}

.source .num {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.source strong,
.source-title {
  display: block;
  color: var(--ink);
}

.source-domain,
.source .domain {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-dim);
  font-size: 13px;
}

.source .arrow {
  color: var(--blue);
  font-weight: 800;
}

.pillar-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text);
}

.pillar-card.empty {
  opacity: 0.72;
}

.pillar-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--blue-soft);
  font-size: 20px;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 52px 0 34px;
  color: #e3e9e7;
  background: var(--ink);
}

.site-footer .brand,
.site-footer h4,
.site-footer strong {
  color: #ffffff;
}

.site-footer .mark,
.site-footer .brand-mark {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.18fr) minmax(180px, 0.82fr) minmax(160px, 0.74fr) minmax(180px, 0.78fr);
  gap: clamp(var(--space-4), 3vw, var(--space-7));
  align-items: start;
}

.footer-grid > div,
.footer-col {
  min-width: 0;
}

/* Grouped footer columns — collapsible accordion on mobile, static on desktop. */
.footer-col > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  list-style: none;
  cursor: pointer;
}

.footer-col > summary::-webkit-details-marker {
  display: none;
}

.footer-col > summary h4 {
  margin: 0;
}

.footer-col-links {
  display: flex;
  flex-direction: column;
}

.footer-brand-col {
  max-width: 390px;
}

.footer-col-primary .footer-col-links {
  column-gap: var(--space-2);
}

@media (min-width: 641px) {
  /* Desktop: columns stay open and are not toggleable. */
  .footer-col > summary {
    pointer-events: none;
  }
}

.footer-grid h4 {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  line-height: 1.35;
}

.footer-grid p,
.footer-grid span {
  color: rgba(255, 255, 255, 0.72);
}

.footer-grid p {
  max-width: 340px;
  font-size: 14px;
  line-height: 1.62;
}

.footer-grid a {
  min-height: 40px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  margin-top: 2px;
  padding: 0 var(--space-2);
  color: rgba(255, 255, 255, 0.78);
}

.footer-grid a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.footer-brand-link {
  width: fit-content;
  margin: 0 0 var(--space-2);
  padding-left: 0;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

.footer-bottom span {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-bottom a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.footer-bottom a:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 1080px) {
  h1 {
    font-size: 48px;
  }

  .hero-grid,
  .story-hero-grid,
  .today-brief-grid,
  .brief-intel-grid,
  .split {
    grid-template-columns: 1fr;
  }

  .hero-editorial-rail,
  .story-hero-visual {
    max-width: 620px;
  }
}

@media (max-width: 920px) {
  .nav {
    grid-template-columns: minmax(112px, 0.75fr) minmax(0, auto) minmax(168px, auto);
    align-items: center;
    padding: var(--space-3) 0;
    gap: var(--space-2);
  }

  .nav-links {
    max-width: min(100%, 520px);
    justify-content: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }

  .nav-links a {
    padding: 0 9px;
  }

  .hero-paths,
  .hero-brief-stats,
  .topic-latest-grid,
  .home-day-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .mini-grid,
  .brief-decision-grid,
  .pillar-grid,
  .sources-list {
    grid-template-columns: 1fr;
  }

  .story-action-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .home-bridge__inner {
    align-items: flex-start;
  }

  .home-bridge__steps {
    justify-content: flex-start;
  }

  .story-watch-context {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .story-watch-context p {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 640px) {
  :root {
    --card-padding-hero: 22px;
    --card-padding: 20px;
    --card-padding-compact: 16px;
    --card-child-gap: 14px;
    --card-child-gap-compact: 10px;
  }

  body {
    line-height: 1.72;
  }

  .shell {
    width: min(var(--shell-max), calc(100% - (var(--shell-padding-mobile) * 2)));
  }

  .home-bridge__inner {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
  }

  .home-bridge__copy strong {
    font-size: 16px;
  }

  .home-bridge__steps {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .home-bridge__steps::-webkit-scrollbar {
    display: none;
  }

  .home-bridge__steps span {
    flex: 0 0 auto;
  }

  .home-hero-latest,
  .archive-feature,
  .pillar-latest-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .home-hero-latest__actions {
    justify-content: stretch;
  }

  .home-hero-latest__actions .btn,
  .archive-feature__cta,
  .pillar-latest-card__cta {
    width: 100%;
  }

  .archive-feature__cta,
  .pillar-latest-card__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-soft);
  }

  .topic-latest-card {
    padding: var(--space-4);
  }

  .hero,
  .story-hub-header,
  section.block,
  .block,
  .story-section {
    padding-top: var(--section-rhythm-compact);
    padding-bottom: var(--section-rhythm-compact);
  }

  .site-footer {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }

  .home-today-section {
    padding-top: var(--space-6);
  }

  .home-today-card {
    gap: var(--space-4);
    padding: var(--space-4);
    border-left-width: 3px;
  }

  .home-today-card__header,
  .home-today-card__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .home-day-summary,
  .home-day-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-today-card__body h3 {
    font-size: 22px;
  }

  .home-today-card__note {
    text-align: left;
  }

  .story-action-rail {
    gap: var(--space-2);
  }

  .story-action-rail a {
    min-height: 68px;
    padding: var(--space-3);
  }

  .story-watch-shell {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .story-watch-frame {
    padding: var(--space-1);
  }

  .story-watch-caption {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .story-watch-caption .video-actions {
    width: 100%;
    justify-content: stretch;
  }

  h1 {
    font-size: 36px;
    line-height: 1.14;
  }

  h2 {
    font-size: 26px;
  }

  .story-hub-card h2 {
    font-size: 32px;
  }

  .story-hub-card {
    padding: var(--card-padding);
    gap: var(--card-child-gap);
  }

  .story-hub-card .support-format-block {
    padding: var(--card-padding-compact);
  }

  .today-brief-grid {
    gap: var(--card-child-gap);
  }

  .lede {
    font-size: 16px;
    line-height: 1.75;
  }

  .nav {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand cta"
      "links links";
    justify-content: stretch;
    gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  .brand {
    grid-area: brand;
    min-width: 0;
    flex: 1 1 auto;
  }

  .nav-cta,
  .hero-actions,
  .actions,
  .proof-row,
  .format-ribbon,
  .story-meta-row,
  .pivot-row,
  .audio-actions,
  .video-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .btn,
  .btn.sm {
    width: 100%;
  }

  .nav-links {
    grid-area: links;
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-1);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    width: auto;
    flex: 0 0 auto;
    padding: 0 var(--space-3);
    white-space: nowrap;
    font-size: 13px;
  }

  .nav-cta {
    grid-area: cta;
    order: 2;
    width: auto;
    flex: 0 0 auto;
    align-items: center;
    flex-direction: row;
    gap: var(--space-2);
  }

  .lang-toggle {
    width: auto;
    flex: 0 1 128px;
    max-width: 140px;
  }

  .lang-toggle a {
    width: auto;
    flex: 1 1 0;
    padding: 0 var(--space-2);
  }

  .nav-cta .btn,
  .nav-cta .btn.sm {
    width: auto;
    flex: 0 0 auto;
  }

  .story-row,
  .source,
  .decision-row {
    grid-template-columns: 1fr;
  }

  .story-row {
    gap: var(--space-3);
  }

  .story-row .arrow {
    width: 100%;
  }

  .section-head,
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .footer-grid p {
    max-width: none;
    font-size: 13px;
    line-height: 1.58;
  }

  .footer-grid h4 {
    margin-bottom: var(--space-1);
    font-size: 13px;
  }

  /* Mobile: each group collapses; brand block stays open and marker-free. */
  .footer-col {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: var(--space-2);
  }

  .footer-col > summary {
    margin-bottom: 0;
    padding: var(--space-2) 0;
  }

  .footer-col > summary::after {
    content: "+";
    margin-left: auto;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
  }

  .footer-col[open] > summary::after {
    content: "\2212";
  }

  .footer-col[open] > summary {
    margin-bottom: var(--space-1);
  }

  .footer-grid a {
    min-height: 44px;
    margin-top: 0;
    padding: 0 var(--space-2);
    font-size: 13px;
  }

  .footer-bottom {
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
  }

  .footer-bottom span {
    gap: var(--space-1);
  }
}

@media (max-width: 360px) {
  .home-today-card,
  .story-watch-shell {
    padding: var(--space-3);
  }

  .home-today-card__body h3 {
    font-size: 21px;
  }

  .home-bridge__steps span {
    min-height: 34px;
    padding: 0 var(--space-2);
    font-size: 12px;
  }
}

/* noleji-report publish hardening: keep computed palette and mobile width stable. */
html,
body {
  max-width: 100%;
  background-color: var(--bg);
}

.nav,
.nav-links,
.nav-cta,
.card,
.panel {
  min-width: 0;
}

.topbar {
  overflow-x: clip;
}

.topbar .nav {
  max-width: var(--shell-max);
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) minmax(0, auto) minmax(180px, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(10px, 1.6vw, 24px) !important;
}

.topbar .brand {
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.topbar .brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar .nav-links {
  max-width: min(100%, 720px) !important;
  justify-self: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.topbar .nav-links::-webkit-scrollbar {
  display: none;
}

.topbar .nav-links a {
  flex: 0 0 auto !important;
  min-width: 44px;
  max-width: none !important;
  padding-right: clamp(6px, 0.7vw, var(--space-3)) !important;
  padding-left: clamp(6px, 0.7vw, var(--space-3)) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.topbar .nav-cta {
  justify-self: end !important;
  width: auto !important;
  flex: 0 0 auto !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.topbar .nav-cta .btn,
.topbar .nav-cta .btn.sm {
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

@media (max-width: 920px) {
  .topbar .nav {
    grid-template-columns: minmax(112px, 0.75fr) minmax(0, auto) minmax(168px, auto) !important;
    gap: var(--space-2) !important;
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }

  .topbar .nav-links {
    max-width: min(100%, 520px) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }

  .topbar .nav-links a {
    padding-right: 9px !important;
    padding-left: 9px !important;
  }
}

@media (max-width: 640px) {
  .topbar .nav {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand cta"
      "links links";
    gap: var(--space-2) !important;
  }

  .topbar .brand {
    grid-area: brand;
  }

  .nav-links {
    max-width: 100%;
  }

  .topbar .nav-links {
    grid-area: links;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }

  .nav-links a {
    max-width: calc(100vw - (var(--shell-padding-mobile) * 2));
  }

  .topbar .nav-cta {
    grid-area: cta;
  }

  .topbar .lang-toggle {
    width: auto !important;
    max-width: 140px !important;
    flex: 0 1 132px !important;
  }

  li[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  li[style*="grid-template-columns"] > * {
    min-width: 0;
  }
}

/* R17 public A-type consistency: keep legacy and generated public pages on
   the same navy report-card rhythm as /today and story pages. */
.hero .panel,
.hero .card,
.hero .feature,
.home-today-card,
.archive-stat,
.archive-row,
.pillar-card,
.ccard,
.sub #subscribe-methods {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.kicker,
.sub .eyebrow,
.pc .eyebrow {
  min-height: 32px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

.archive-summary,
.pillar-grid,
.cgrid,
.methods,
.benefits,
.grid-2,
.grid-3,
.grid-4 {
  gap: var(--card-gap);
}

.sub {
  width: min(var(--container-narrow), calc(100% - (var(--shell-padding) * 2)));
  padding: var(--section-rhythm) 0 var(--section-rhythm);
}

.sub #subscribe-methods {
  padding: var(--space-5);
}

.sub .benefits {
  margin: var(--space-5) 0 0;
}

.sub .benefit,
.format-icons span,
.week-strip a {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text-soft);
}

.oauth-btn,
.email-form input {
  border-radius: var(--radius);
  background: var(--surface);
}

.archive-row,
.story-row {
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.archive-row:hover,
.story-row:hover,
.pillar-card:hover,
.ccard:hover {
  border-color: rgba(15, 118, 110, 0.28);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .sub {
    width: min(var(--shell-max), calc(100% - (var(--shell-padding-mobile) * 2)));
  }

  .sub #subscribe-methods {
    padding: var(--space-4);
  }
}

/* Dark accent panel — system component. Pages use `.panel.dark` with on-dark content;
   without this rule the panel inherits the light surface and white text disappears.
   Tokenized so every page that uses it stays readable. (2026-06-18 DS audit) */
.panel.dark {
  background: var(--bg-dark, var(--ink));
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-on-dark, rgba(255, 255, 255, 0.84));
}
.panel.dark h2,
.panel.dark h3,
.panel.dark h4 {
  color: #ffffff;
}
.panel.dark p,
.panel.dark li,
.panel.dark ul,
.panel.dark ol {
  color: rgba(255, 255, 255, 0.82);
}
.panel.dark a:not(.btn) {
  color: #ffffff;
}
.panel.dark .eyebrow,
.panel.dark .kicker {
  color: var(--accent-on-dark, #e6edf0);
  background: transparent;
  border: 0;
}
.panel.dark hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: var(--space-6) 0;
}

/* Customer-facing mobile fit layer.
   Keeps long Korean headings, pills, buttons, and card copy inside the design-system shell. */
main,
section,
.shell,
.panel,
.card,
.feature,
.note,
.btn,
.badge,
.kicker,
.eyebrow {
  min-width: 0;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
.lede,
.muted,
.btn,
.badge,
.kicker,
.eyebrow {
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
.lede {
  text-wrap: pretty;
}

.btn,
.badge,
.kicker,
.eyebrow {
  white-space: normal;
}

@media (max-width: 640px) {
  :root {
    --shell-padding-mobile: 16px;
    --section-rhythm-compact: 40px;
    --card-gap: 16px;
  }

  .shell {
    width: min(var(--shell-max), calc(100% - (var(--shell-padding-mobile) * 2)));
  }

  h1 {
    max-width: 100%;
    margin: var(--space-4) 0 var(--space-3);
    font-size: clamp(31px, 9.5vw, 39px);
    line-height: 1.12;
  }

  h2 {
    font-size: clamp(24px, 7.4vw, 30px);
    line-height: 1.22;
  }

  h3 {
    font-size: clamp(19px, 5.9vw, 22px);
  }

  .lede {
    font-size: 17px;
    line-height: 1.76;
  }

  .panel,
  .card,
  .feature,
  .note {
    padding: var(--space-4);
  }

  .btn {
    width: 100%;
    min-height: 50px;
    padding: var(--space-2) var(--space-4);
    line-height: 1.35;
    text-align: center;
  }

  .editorial-proof {
    align-items: center;
    flex-direction: row;
    gap: var(--space-2);
  }

  .editorial-proof .chip {
    min-height: 36px;
    padding: 0 var(--space-3);
  }

  .badge,
  .kicker,
  .eyebrow {
    min-height: 30px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.25;
  }
}

@media (max-width: 430px) {
  h1 {
    font-size: clamp(29px, 9vw, 35px);
  }

  .panel,
  .card,
  .feature,
  .note {
    padding: 18px;
  }
}

/* Public audit: keep the sticky header usable on narrow screens. */
@media (max-width: 640px) {
  .topbar .nav-subscribe,
  .topbar [data-noleji-login] {
    display: none !important;
  }

  .topbar .nav-links {
    gap: 4px !important;
  }

  .topbar .nav-links a {
    min-height: 36px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
}

@media (max-width: 390px) {
  .topbar .brand span {
    display: none !important;
  }

  .topbar .nav-links a {
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 12px !important;
  }
}

/* noleji-report mobile all-nav: show every primary nav item on phones. */
@media (max-width: 640px) {
  .topbar .nav-link-secondary {
    display: inline-flex !important;
  }

  .topbar .nav-subscribe,
  .topbar [data-noleji-login] {
    display: none !important;
  }

  .topbar .nav-links {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .topbar .nav-links a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
    overflow: hidden !important;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 4px);
    font-size: 12px !important;
    line-height: 1.1;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .topbar .nav-links a[aria-current="page"] {
    border-color: rgba(15, 118, 110, 0.16);
    background: rgba(15, 118, 110, 0.10);
  }
}

@media (max-width: 360px) {
  .topbar .nav-links {
    gap: 4px !important;
  }

  .topbar .nav-links a {
    font-size: 11.5px !important;
  }
}

/* ============================================================
   noleji v2 "Paper-Teal Editorial" component layer (2026-07-05)
   Additive only — new page structures use these; legacy markup
   keeps rendering through the shared tokens above.
   Surfaces: discover(home) · digest+brew(daily) · library(archive)
   · studio(dark visual showcase panels only).
   ============================================================ */

/* --- editorial type --- */
.serif-display {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--space-3);
}

.masthead .masthead-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
}

.masthead .masthead-date {
  color: var(--text-dim);
  font-size: 13px;
}

/* --- discover home: today-first hero (cardless, paper) --- */
.hero-quiet {
  padding: 64px 0 40px;
}

.hero-quiet h1 {
  margin: 10px 0 12px;
  max-width: 15em;
}

.hero-quiet .lede {
  font-size: 17px;
}

.today-lead {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.today-lead .today-lead-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  font-weight: 700;
}

.today-lead .why-read {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--text-soft);
}

.feed-list {
  display: grid;
  gap: 0;
}

.feed-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: var(--space-4) 0;
}

.feed-item:last-child {
  border-bottom: 1px solid var(--line);
}

.feed-item h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.feed-item .feed-meta {
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
}

.feed-item p {
  grid-column: 1 / -1;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

.feed-item:hover h3 {
  color: var(--accent-ink);
}

.action-rail {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  border-left: 1px solid var(--line);
  padding-left: var(--space-5);
}

.action-rail .rail-title {
  margin: 0;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 850;
}

.action-rail a {
  display: block;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
}

.action-rail a:hover {
  color: var(--accent-ink);
}

.action-rail .rail-note {
  color: var(--text-dim);
  font-size: 13px;
}

/* --- digest/brew daily surfaces --- */
.issue-header {
  display: grid;
  gap: var(--space-2);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: var(--space-4) 0;
}

.issue-header .issue-no {
  color: var(--amber);
  font-size: 12.5px;
  font-weight: 850;
}

.issue-header h1,
.issue-header .issue-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
}

.read-scale {
  color: var(--text-dim);
  font-size: 13px;
}

/* pillar identity tints (brew pastels, used sparingly as left-edge accents) */
.pillar-tint-ai { border-left: 3px solid #2fbf71; }
.pillar-tint-business { border-left: 3px solid #f0a202; }
.pillar-tint-science { border-left: 3px solid #4098d7; }
.pillar-tint-health { border-left: 3px solid #e2795d; }
.pillar-tint-future { border-left: 3px solid #8d6fd1; }
.pillar-tint-services { border-left: 3px solid var(--accent); }

/* --- library archive shelves --- */
.shelf {
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}

.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.shelf-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
}

.shelf-head a {
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 750;
}

.reading-order {
  counter-reset: reading;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reading-order li {
  counter-increment: reading;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}

.reading-order li::before {
  content: counter(reading, decimal-leading-zero);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

/* --- studio dark showcase (cardnews / visual output) --- */
.studio-showcase {
  border-radius: var(--radius);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

.studio-showcase h2,
.studio-showcase h3 {
  color: #ffffff;
  margin: 0;
}

.studio-showcase .eyebrow {
  color: var(--accent-on-dark);
  background: transparent;
  border: 0;
}

.studio-showcase p {
  color: var(--text-on-dark-soft);
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.studio-tile {
  border-radius: var(--radius-sm);
  min-height: 150px;
  padding: var(--space-4);
  display: grid;
  align-content: end;
  gap: var(--space-1);
  color: #101216;
  font-weight: 800;
  background: linear-gradient(145deg, #ffcf5a, #ff6b6b);
}

.studio-tile.cool { background: linear-gradient(145deg, #2563eb, #21c2a2); color: #ffffff; }
.studio-tile.soft { background: linear-gradient(145deg, #c084fc, #7dd3fc); }

.studio-tile small {
  font-weight: 600;
  opacity: 0.82;
}

/* --- app/service intro: status split + fact sheet --- */
.status-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.status-split .status-col {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.status-split .status-col.now { border-top-color: var(--accent); }
.status-split .status-col.prep { border-top-color: var(--amber); }
.status-split .status-col.pay { border-top-color: var(--text-dim); }

.status-split .status-col h3 {
  margin: 0;
  font-size: 15px;
}

.status-split .status-col ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 5px;
  color: var(--text-soft);
  font-size: 14.5px;
}

.fact-sheet {
  display: grid;
  gap: 0;
  margin: 0;
}

.fact-sheet div {
  display: grid;
  grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
  gap: var(--space-3);
  border-top: 1px solid var(--line);
  padding: var(--space-3) 0;
}

.fact-sheet dt {
  margin: 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 850;
}

.fact-sheet dd {
  margin: 0;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- pricing (Toss-safe: informational, no live checkout claims) --- */
.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.pricing-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.pricing-card.featured {
  border-color: var(--brand-deep);
  background: var(--surface-warm);
}

.pricing-card .price {
  font-size: 30px;
  font-weight: 850;
  color: var(--ink);
}

.pricing-card .price small {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}

.pricing-card ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  font-size: 14.5px;
}

/* --- quiet helpers --- */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

.note-quiet {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.6;
}

.two-col-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--space-7);
  align-items: start;
}

@media (max-width: 900px) {
  .two-col-rail {
    grid-template-columns: 1fr;
  }

  .action-rail {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: var(--space-4);
  }

  .studio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-quiet {
    padding: 40px 0 28px;
  }

  .today-lead {
    padding: var(--space-4);
  }

  .feed-item {
    grid-template-columns: 1fr;
  }

  .feed-item .feed-meta {
    white-space: normal;
  }
}

/* ------------------------------------------------------------
   v2 additions — library / topics / daily-issue list surfaces
   (2026-07-05 template restyle pass). Additive only; nothing
   above may be renamed or removed.
   ------------------------------------------------------------ */

/* shelf headline used as a link (archive date groups) */
.shelf-head h2 a {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.shelf-head h2 a:hover {
  color: var(--accent-ink);
}

/* quiet week/date index — text links instead of pill chips */
.shelf-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) 0;
}

.shelf-index a {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.9;
}

.shelf-index a:hover {
  color: var(--accent-ink);
}

.shelf-index a[aria-current="page"] {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* quiet one-line format availability inside feed rows */
.feed-formats {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* feed rows carrying a pillar identity tint need breathing room */
.feed-list .feed-item[class*="pillar-tint-"] {
  padding-left: var(--space-4);
}

/* reading-order rows as links (topics hub latest) */
.reading-order a {
  display: grid;
  gap: 3px;
  color: var(--text);
}

.reading-order h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.4;
}

.reading-order .feed-meta {
  color: var(--text-dim);
  font-size: 13px;
}

.reading-order a:hover h3 {
  color: var(--accent-ink);
}

/* ============================================================
   noleji v2.1 layer (2026-07-05) — drawer nav · feed thumbs ·
   pillar chips · accordions · nv illustrations · slim footer.
   Drawer styles are scoped to .topbar[data-nav-drawer] so legacy
   pages (old archive stories, static EN) keep the horizontal nav.
   ============================================================ */

/* --- drawer nav --- */
.topbar[data-nav-drawer] .nav {
  grid-template-columns: minmax(140px, 1fr) auto;
}

.topbar[data-nav-drawer] .nav-cta {
  gap: var(--space-3);
}

.nav-menu-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 16px;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.nav-menu-btn:hover {
  border-color: rgba(15, 118, 110, 0.32);
  background: var(--bg-soft);
}

.nav-menu-btn .nav-menu-icon {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--ink);
  position: relative;
}

.nav-menu-btn .nav-menu-icon::before,
.nav-menu-btn .nav-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--ink);
}

.nav-menu-btn .nav-menu-icon::before { top: -5px; }
.nav-menu-btn .nav-menu-icon::after { top: 5px; }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(16, 24, 32, 0.42);
  cursor: pointer;
}

.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  overflow-y: auto;
  display: grid;
  gap: var(--space-4);
  align-content: start;
  border-left: 1px solid var(--line);
  background: var(--bg);
  padding: var(--space-5);
  box-shadow: rgba(16, 24, 32, 0.18) -16px 0 40px -28px;
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--space-3);
}

.nav-drawer-head strong {
  font-family: var(--font-serif);
  font-size: 18px;
}

.nav-drawer-close {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.topbar[data-nav-drawer] .nav-drawer .nav-links {
  max-width: none;
  display: grid;
  gap: 2px;
  justify-content: stretch;
  justify-self: stretch;
  overflow: visible;
  flex-wrap: wrap;
}

.topbar[data-nav-drawer] .nav-drawer .nav-links a {
  min-height: 46px;
  justify-content: flex-start;
  border-bottom: 0;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 750;
}

.topbar[data-nav-drawer] .nav-drawer .nav-links a:hover,
.topbar[data-nav-drawer] .nav-drawer .nav-links a[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.nav-drawer-group {
  margin-top: var(--space-3);
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.nav-drawer-group:first-child {
  margin-top: 0;
}

.nav-drawer-foot {
  display: grid;
  gap: var(--space-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

/* --- feed thumbnails --- */
.feed-item-thumbed {
  grid-template-columns: 76px minmax(0, 1fr) auto;
}

.feed-item-thumbed p {
  grid-column: 2 / -1;
}

.feed-thumb {
  width: 76px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  grid-row: 1 / span 1;
}

.feed-thumb-wide {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

span.feed-thumb {
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  padding: 4px;
}

.feed-thumb-ph { background: linear-gradient(150deg, #0f766e, #213826); border: 0; }
.feed-thumb-ph.ph-ai { background: linear-gradient(150deg, #1f8a5f, #2fbf71); }
.feed-thumb-ph.ph-business { background: linear-gradient(150deg, #b57a12, #f0a202); }
.feed-thumb-ph.ph-science { background: linear-gradient(150deg, #2d6f9e, #4098d7); }
.feed-thumb-ph.ph-health { background: linear-gradient(150deg, #b0563c, #e2795d); }
.feed-thumb-ph.ph-future { background: linear-gradient(150deg, #61489e, #8d6fd1); }
.feed-thumb-ph.ph-services { background: linear-gradient(150deg, #0c5f59, #0f766e); }

/* --- archive pillar chips --- */
.pillar-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.pillar-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 14px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 750;
}

.pillar-chip:hover {
  color: var(--accent-ink);
  border-color: rgba(15, 118, 110, 0.32);
  background: var(--accent-soft);
}

/* --- accordion (progressive disclosure) --- */
details.accordion {
  border-top: 1px solid var(--line);
}

details.accordion:last-of-type {
  border-bottom: 1px solid var(--line);
}

details.accordion > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

details.accordion > summary::-webkit-details-marker { display: none; }

details.accordion > summary::after {
  content: "+";
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  flex: 0 0 auto;
}

details.accordion[open] > summary::after {
  content: "−";
}

details.accordion > .accordion-body {
  padding: 0 0 var(--space-4);
  color: var(--text-soft);
}

/* --- noleji-view editorial illustrations --- */
.nv-illustration {
  margin: var(--space-5) 0;
  display: grid;
  gap: var(--space-2);
}

.nv-illustration img {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  justify-self: center;
}

.nv-illustration figcaption {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

/* --- slim footer --- */
.site-footer .footer-slim {
  display: grid;
  gap: var(--space-4);
}

.footer-slim-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.footer-slim-brand p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
}

.footer-slim-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--space-4);
}

.footer-slim-links a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  font-weight: 700;
}

.footer-slim-links a:hover {
  color: #ffffff;
}

@media (max-width: 600px) {
  .feed-item-thumbed {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .feed-thumb {
    width: 60px;
  }

  .nav-drawer-panel {
    width: 100vw;
    border-left: 0;
  }
}

/* Drawer nav hard override — legacy .nav-links rules (width clamp, overflow
   scroll, nowrap, centered justify) fight the drawer layout at desktop
   widths; the ID selector settles it without touching legacy pages. */
#site-drawer .nav-links {
  display: grid;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  gap: 2px;
  justify-content: stretch;
  justify-self: stretch;
  align-items: stretch;
  overflow: visible;
  flex-wrap: wrap;
  mask-image: none;
  -webkit-mask-image: none;
}

#site-drawer .nav-links a {
  min-height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 0;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 750;
  white-space: normal;
}

#site-drawer .nav-links a:hover,
#site-drawer .nav-links a[aria-current="page"] {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

/* ============================================================
   noleji v2.2 layer (2026-07-07)
   ============================================================ */

/* topbar right-alignment: the legacy 3-column .topbar .nav !important rule
   auto-places .nav-cta into the CENTER column (only 2 children exist on
   drawer pages) — pin the drawer topbar to 2 columns so the button group
   (오늘 브리프·메뉴·로그인 chip) sits at the right edge. */
.topbar[data-nav-drawer] .nav {
  grid-template-columns: minmax(140px, 1fr) auto !important;
}

.topbar[data-nav-drawer] .nav-cta {
  justify-self: end !important;
}

/* illustration ratio slots (App Intro System) */
.nv-illustration--wide img {
  max-width: 960px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.nv-illustration--square img {
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* style-variant strip: horizontal swipe of reader theme thumbnails */
.nv-style-strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.nv-style-strip figure {
  margin: 0;
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  display: grid;
  gap: 4px;
}

.nv-style-strip img {
  width: 240px;
  aspect-ratio: 9 / 7;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.nv-style-strip figcaption {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}

/* launched-app showcase on /apps/ hub */
.app-showcase {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.app-showcase .app-showcase-badge {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 0 12px;
  color: #ffffff;
  background: var(--accent);
  font-size: 12.5px;
  font-weight: 850;
}

.app-showcase img.app-showcase-shot {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.app-showcase h2 {
  margin: 0;
  font-family: var(--font-serif);
}

/* scene blocks: large capture + situational caption */
.scene-block {
  display: grid;
  gap: var(--space-3);
}

.scene-block img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.scene-block .scene-caption {
  display: grid;
  gap: 4px;
}

.scene-block .scene-caption strong {
  font-size: 16.5px;
}

.scene-block .scene-caption span {
  color: var(--text-soft);
  font-size: 14.5px;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* numbered usage steps with captures */
.step-flow {
  display: grid;
  gap: var(--space-5);
}

.step-flow .step-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.step-flow .step-no {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}

.step-flow .step-body {
  display: grid;
  gap: var(--space-2);
}

.step-flow .step-body img {
  width: 100%;
  max-width: 640px;
  /* Cap height so a tall source capture can never blow the section open;
     show the top of the panel cleanly. */
  max-height: 380px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.step-flow--compact {
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.step-flow--compact .step-body strong {
  font-size: 16px;
}

.app-showcase-figure {
  margin: 0 0 var(--space-2);
}

.app-showcase-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.app-showcase-figure figcaption {
  margin-top: var(--space-2);
  text-align: center;
}

@media (max-width: 600px) {
  .nv-style-strip figure { width: 190px; }
  .nv-style-strip img { width: 190px; }
}

/* ============================================================
   v2.3 layer (2026-07-10) — noleji-view 표면 개선
   · .nv-style-grid: 리더 템플릿 7종을 3열 대형 그리드로(클릭 확대)
   · .step-flow--shots .step-shot: 사용법 스텝별 실제 패널 캡처(세로 클립)
   · [data-screen-lightbox]: 확대 가능한 이미지 공통 어포던스
   ============================================================ */
[data-screen-lightbox] { cursor: zoom-in; }
.nv-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.nv-style-grid figure { margin: 0; }
.nv-style-grid img {
  width: 100%;
  aspect-ratio: 9 / 7; /* 원본 1800×1400 native */
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: block;
}
.nv-style-grid figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-ink);
}
@media (max-width: 760px) {
  .nv-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.step-flow--shots .step-body { display: grid; gap: var(--space-2); }
.step-flow--shots .step-shot {
  max-height: 300px;
  width: auto;
  max-width: 100%;
  justify-self: start;
  object-fit: contain;
  aspect-ratio: auto; /* 세로 패널 클립 — v22b의 16/10 크롭 규칙을 상속하지 않음 */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* feed card default view (2026-07-13 W6): 전 리스트 표면 카드 그리드 디폴트 +
   html[data-feed-view="list"]에서 기존 행 목록으로 복귀(토글 JS가 세팅).
   빌더 마크업(.feed-list>.feed-item[.feed-item-thumbed]>.feed-thumb)은
   그대로 두고 CSS만 재배치 — 재렌더 불가한 과거 아카이브에도 적용된다. */
html:not([data-feed-view="list"]) .feed-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html:not([data-feed-view="list"]) .feed-list > .feed-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-width: 0;
  padding: 0 0 16px !important;
  overflow: hidden;
  border: 1px solid rgba(31, 41, 51, 0.09);
  border-radius: 14px;
  background: var(--surface, #fff);
}

html:not([data-feed-view="list"]) .feed-list .feed-thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  object-fit: cover;
}

html:not([data-feed-view="list"]) .feed-list span.feed-thumb-ph {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  letter-spacing: 0.04em;
}

html:not([data-feed-view="list"]) .feed-list .feed-item > *:not(.feed-thumb):not(.feed-thumb-ph) {
  min-width: 0;
  padding: 0 16px;
}

@media (max-width: 640px) {
  html:not([data-feed-view="list"]) .feed-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

.feed-view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 10px;
}

.feed-view-toggle button {
  padding: 4px 12px;
  border: 1px solid rgba(31, 41, 51, 0.16);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: inherit;
  cursor: pointer;
}

.feed-view-toggle button[aria-pressed="true"] {
  border-color: rgba(54, 96, 127, 0.4);
  background: rgba(54, 96, 127, 0.12);
}