:root {
  --ink: #0c0e10;
  --ink-soft: #161b20;
  --paper: #f1eee8;
  --warm: #c99568;
  --muted: rgba(241, 238, 232, 0.68);
  --soft: rgba(241, 238, 232, 0.5);
  --line: rgba(241, 238, 232, 0.17);
  --display: "SUIT Variable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; font-synthesis: none; }
html { background: var(--ink); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--warm); outline-offset: 5px; }
.skip-link { position: fixed; top: 1rem; left: 50%; z-index: 20; padding: 0.65rem 1rem; background: var(--paper); color: var(--ink); transform: translate(-50%, -180%); transition: transform 0.25s var(--ease); }
.skip-link:focus { transform: translate(-50%, 0); }
.guide-shell { width: min(100% - 3rem, 1240px); margin: 0 auto; }
.guide-header { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--line); }
.guide-brand { display: inline-flex; min-height: 44px; align-items: center; gap: 0.75rem; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -0.07em; }
.guide-brand img { width: 28px; height: 28px; padding: 3px; border-radius: 8px; background: var(--paper); object-fit: contain; }
.guide-brand small { margin-left: 0.45rem; color: var(--soft); font-family: var(--mono); font-size: 0.55rem; font-weight: 400; letter-spacing: 0.08em; }
.guide-nav { display: flex; align-items: center; gap: 1.5rem; color: var(--soft); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; }
.guide-nav a { min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; transition: color 220ms ease, border-color 220ms ease; }
.guide-nav a:hover, .guide-nav a[aria-current="page"] { color: var(--paper); border-color: var(--warm); }
.guide-main { padding: 7rem 0 8rem; }
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.65fr); gap: clamp(2rem, 8vw, 9rem); align-items: end; padding-bottom: 7rem; }
.guide-eyebrow { color: var(--warm); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; }
.guide-hero h1 { max-width: 14ch; margin: 1.5rem 0 0; font-family: var(--display); font-size: clamp(3rem, 5.55vw, 5.8rem); font-weight: 570; letter-spacing: -0.115em; line-height: 1; }
.guide-hero h1 em { color: var(--warm); font-style: normal; }
.guide-hero__aside { padding-bottom: 0.35rem; }
.guide-hero__aside p { max-width: 30rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.9; }
.guide-hero__aside small { display: block; margin-top: 1.8rem; color: var(--soft); font-family: var(--mono); font-size: 0.62rem; line-height: 1.7; }
.keyword-finder { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1fr); gap: clamp(2rem, 8vw, 9rem); align-items: end; padding: 2.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.keyword-finder h2 { margin: 1.1rem 0 0; font-family: var(--display); font-size: clamp(2rem, 4.5vw, 4.4rem); font-weight: 600; letter-spacing: -0.11em; line-height: 0.96; }
.keyword-finder h2 em { color: var(--warm); font-style: normal; }
.keyword-finder p { max-width: 35rem; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.9; }
.keyword-finder__link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 1.3rem; color: var(--warm); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.04em; }
.guide-section { padding: 3rem 0 5rem; border-top: 1px solid var(--line); }
.guide-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.guide-section h2 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3.2vw, 3.1rem); font-weight: 600; letter-spacing: -0.09em; line-height: 1; }
.guide-section__head p { max-width: 29rem; margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.75; }
.guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 7vw, 7rem); }
.guide-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0 1.6rem; border-top: 1px solid var(--line); }
.guide-item:nth-child(-n + 2) { border-top-color: var(--line); }
.guide-item__index { color: var(--warm); font-family: var(--mono); font-size: 0.62rem; }
.guide-item h3 { margin: 0; font-family: var(--display); font-size: 1.16rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.35; }
.guide-item p { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.75; }
.guide-item__link { display: inline-flex; min-height: 38px; align-items: center; margin-top: 0.65rem; color: var(--warm); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; }
.guide-note { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 7rem); margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.guide-note h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
.guide-note p { max-width: 40rem; margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.9; }
.guide-note strong { color: var(--paper); font-weight: 500; }
.keyword-page .guide-hero { padding-bottom: 5rem; }
.keyword-intro { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1fr); gap: clamp(2rem, 8vw, 9rem); align-items: end; padding: 2.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.keyword-intro h2 { margin: 1.1rem 0 0; font-family: var(--display); font-size: clamp(2rem, 4.5vw, 4.4rem); font-weight: 600; letter-spacing: -0.11em; line-height: 0.96; }
.keyword-intro h2 em { color: var(--warm); font-style: normal; }
.keyword-intro > p { max-width: 38rem; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.9; }
.keyword-observed { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1fr); gap: clamp(2rem, 8vw, 9rem); align-items: end; margin-top: 1px; padding: 2.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.keyword-observed h2 { margin: 1.1rem 0 0; font-family: var(--display); font-size: clamp(2rem, 4.5vw, 4.4rem); font-weight: 600; letter-spacing: -0.11em; line-height: 0.96; }
.keyword-observed h2 em { color: var(--warm); font-style: normal; }
.keyword-observed__body > p { max-width: 38rem; margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.9; }
.keyword-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-top: 1.6rem; }
.keyword-source-card { display: flex; min-height: 7.4rem; flex-direction: column; justify-content: space-between; gap: 0.55rem; padding: 1rem 1rem 1rem 0; border: 0; border-top: 1px solid var(--line); background: transparent; transition: color 220ms ease; }
.keyword-source-card:hover { color: var(--warm); transform: none; }
.keyword-source-card strong { font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -0.04em; }
.keyword-source-card span { color: var(--muted); font-size: 0.76rem; line-height: 1.55; }
.keyword-source-card small { color: var(--warm); font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.05em; }
.keyword-groups { padding-top: 6rem; }
.keyword-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 1.4rem; }
.keyword-section-head h2 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3.2vw, 3.1rem); font-weight: 600; letter-spacing: -0.09em; line-height: 1; }
.keyword-section-head p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.7; }
.keyword-group { border-top: 1px solid var(--line); }
.keyword-group:last-child { border-bottom: 1px solid var(--line); }
.keyword-group summary { display: grid; grid-template-columns: 3rem minmax(0, 1fr); min-height: 5.6rem; align-items: center; padding: 0 0.5rem 0 0; color: var(--paper); cursor: pointer; list-style: none; }
.keyword-group summary::-webkit-details-marker { display: none; }
.keyword-group summary:focus-visible { outline-offset: -3px; }
.keyword-group summary > span:last-child { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.keyword-group summary strong { font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.06em; }
.keyword-group summary small { color: var(--soft); font-family: var(--mono); font-size: 0.58rem; }
.keyword-group__number { color: var(--warm); font-family: var(--mono); font-size: 0.62rem; }
.keyword-group__body { padding: 0 0 2.4rem 3rem; }
.keyword-group__body > p { max-width: 40rem; margin: 0 0 1.4rem; color: var(--muted); font-size: 0.88rem; line-height: 1.8; }
.keyword-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; padding: 0; list-style: none; }
.keyword-list li { min-width: 0; color: var(--soft); font-size: 0.78rem; line-height: 1.6; }
.keyword-list li::before { display: inline-block; width: 0.35rem; height: 0.35rem; margin: 0 0.55rem 0.1rem 0; border-radius: 50%; background: var(--warm); content: ""; opacity: 0.7; }
.keyword-group--observed .keyword-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.65rem; }
.keyword-group--observed .keyword-list li::before { flex: 0 0 auto; }
.keyword-group--observed .keyword-list li small { color: var(--warm); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.02em; opacity: 0.8; }
.keyword-group__link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 1.5rem; color: var(--warm); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; }
.keyword-note { margin-top: 6rem; }
.keyword-note a { color: var(--warm); }
.guide-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 2rem 0 3rem; border-top: 1px solid var(--line); color: var(--soft); font-family: var(--mono); font-size: 0.62rem; line-height: 1.7; }
.guide-footer a { color: var(--warm); }

.article-main { max-width: 880px; margin: 0 auto; padding: 7rem 0 8rem; }
.article-head { padding-bottom: 4.5rem; border-bottom: 1px solid var(--line); }
.article-head h1 { max-width: 15ch; margin: 1.6rem 0 1.5rem; font-family: var(--display); font-size: clamp(3rem, 7vw, 6.8rem); font-weight: 650; letter-spacing: -0.12em; line-height: 0.92; }
.article-head h1 em { color: var(--warm); font-style: normal; }
.article-dek { max-width: 42rem; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.85; }
.article-updated { display: block; margin-top: 2rem; color: var(--soft); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; }
.article-prose { max-width: 720px; padding-top: 4rem; }
.article-prose h2 { margin: 3.6rem 0 1.1rem; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.08em; line-height: 1.05; }
.article-prose h2:first-child { margin-top: 0; }
.article-prose h3 { margin: 2.2rem 0 0.75rem; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.04em; }
.article-prose p, .article-prose li { color: var(--muted); font-size: 1rem; line-height: 1.95; }
.article-prose p { margin: 0 0 1.1rem; }
.article-prose ul, .article-prose ol { margin: 0 0 1.5rem; padding-left: 1.25rem; }
.article-prose li + li { margin-top: 0.55rem; }
.article-prose strong { color: var(--paper); font-weight: 550; }
.article-callout { margin: 2.5rem 0; padding: 1.25rem 1.35rem 1.35rem; border-left: 1px solid var(--warm); background: var(--ink-soft); }
.article-callout p { margin: 0; font-size: 0.9rem; }
.article-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.article-related a { display: block; min-height: 100%; padding: 1rem 0; border-top: 1px solid var(--line); transition: color 220ms ease; }
.article-related a:hover { color: var(--warm); }
.article-related small { color: var(--soft); font-family: var(--mono); font-size: 0.58rem; }
.article-related span { display: block; margin-top: 0.55rem; font-family: var(--display); font-size: 1.05rem; letter-spacing: -0.04em; }
.article-back { display: inline-flex; min-height: 44px; align-items: center; margin-top: 3rem; color: var(--warm); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; }

@media (max-width: 760px) {
  .guide-shell { width: min(calc(100% - 2.5rem), 1240px); }
  .guide-header { min-height: 72px; }
  .guide-brand small { display: none; }
  .guide-nav { gap: 0.85rem; font-size: 0.55rem; }
  .guide-main, .article-main { padding-top: 4.8rem; }
  .guide-hero { display: block; padding-bottom: 5rem; }
  .guide-hero h1 { max-width: none; font-size: clamp(2.7rem, 10.4vw, 4.25rem); }
  .guide-hero__aside { margin-top: 2.5rem; }
  .guide-hero__aside p { font-size: 0.92rem; }
  .keyword-finder, .keyword-intro, .keyword-observed { display: block; }
  .keyword-finder > div + div, .keyword-intro > p, .keyword-observed__body { margin-top: 1.5rem; }
  .keyword-finder p, .keyword-intro > p { font-size: 0.9rem; }
  .keyword-observed__body > p { font-size: 0.9rem; }
  .keyword-sources { grid-template-columns: 1fr; }
  .guide-section { padding: 2.25rem 0 3.8rem; }
  .guide-section__head { display: block; margin-bottom: 1.5rem; }
  .guide-section__head p { margin-top: 1rem; }
  .guide-list, .article-related { grid-template-columns: 1fr; }
  .guide-item:nth-child(2) { border-top-color: var(--line); }
  .guide-note { display: block; margin-top: 0; }
  .guide-note p { margin-top: 1rem; font-size: 0.88rem; }
  .keyword-groups { padding-top: 4rem; }
  .keyword-section-head { display: block; }
  .keyword-section-head p { margin-top: 0.8rem; }
  .keyword-group summary { grid-template-columns: 2.5rem minmax(0, 1fr); min-height: 5rem; }
  .keyword-group summary > span:last-child { display: block; }
  .keyword-group summary small { display: block; margin-top: 0.35rem; }
  .keyword-group__body { padding: 0 0 2rem; }
  .keyword-list { grid-template-columns: 1fr; gap: 0.35rem; }
  .keyword-list li { font-size: 0.82rem; }
  .keyword-note { margin-top: 4rem; }
  .guide-footer { display: block; }
  .guide-footer p { margin: 0.8rem 0 0; }
  .article-head { padding-bottom: 3.5rem; }
  .article-head h1 { font-size: clamp(2.8rem, 13vw, 5rem); }
  .article-dek { font-size: 0.95rem; }
  .article-prose { padding-top: 3.2rem; }
  .article-prose p, .article-prose li { font-size: 0.92rem; line-height: 1.85; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link, .guide-nav a, .article-related a { transition-duration: 0.001ms; }
}

/* --------------------------------------------------------------------------
   2026-09-05 screenshot QA pass
   Make the keyword guide useful to people first: quiet hierarchy, collapsed
   groups by default, and no copper/serif treatment competing with the text.
---------------------------------------------------------------------------- */

:root {
  --ink: #0d0f11;
  --ink-soft: #15191d;
  --paper: #f2f1ed;
  --warm: #bcc3ca;
  --muted: #aeb2b6;
  --soft: #7d8389;
  --line: rgba(242, 241, 237, 0.14);
}

html,
body {
  background: var(--ink);
  color: var(--paper);
}

html {
  overflow-x: clip;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

.guide-shell {
  width: min(calc(100% - 2.5rem), 80rem);
}

.guide-header {
  min-height: 68px;
}

.guide-brand {
  gap: 0;
  font-family: var(--display);
  font-weight: 650;
}

.guide-brand img {
  display: none;
}

.guide-brand small,
.guide-nav {
  color: var(--muted);
}

.guide-nav {
  gap: 1.2rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0;
}

.guide-main {
  padding: clamp(4rem, 6.5vw, 6rem) 0 5rem;
}

.guide-hero {
  gap: clamp(2rem, 7vw, 7rem);
  padding-bottom: 4rem;
}

.guide-eyebrow,
.guide-item__index,
.keyword-group__number,
.keyword-source-card small,
.keyword-group__link,
.guide-footer a,
.keyword-note a,
.keyword-finder__link {
  color: var(--warm);
}

.guide-hero h1,
.keyword-finder h2,
.keyword-intro h2,
.keyword-observed h2,
.article-head h1 {
  color: var(--paper);
  font-family: var(--display);
  font-weight: 610;
  letter-spacing: -0.1em;
  line-height: 1.03;
}

.guide-hero h1 em,
.keyword-finder h2 em,
.keyword-intro h2 em,
.keyword-observed h2 em,
.article-head h1 em {
  color: inherit;
}

.guide-hero__aside p,
.keyword-finder p,
.keyword-intro > p,
.keyword-observed__body > p {
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.85;
}

.keyword-finder,
.keyword-intro,
.keyword-observed {
  gap: clamp(2rem, 7vw, 7rem);
  padding: 1.7rem 0;
  border-color: var(--line);
}

.keyword-finder h2,
.keyword-intro h2,
.keyword-observed h2 {
  font-size: clamp(2rem, 3.3vw, 3.4rem);
}

.keyword-sources {
  gap: 0.6rem;
}

.keyword-source-card {
  border-color: var(--line);
  background: var(--ink-soft);
}

.keyword-groups {
  padding-top: 3.5rem;
}

.keyword-section-head {
  margin-bottom: 1rem;
}

.keyword-section-head h2,
.guide-section h2 {
  font-family: var(--display);
  letter-spacing: -0.08em;
}

.keyword-group {
  border-color: var(--line);
}

.keyword-group:last-child {
  border-bottom-color: var(--line);
}

.keyword-group summary {
  min-height: 4.5rem;
}

.keyword-group summary strong {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
}

.keyword-group__body {
  padding-bottom: 1.8rem;
}

.keyword-list li {
  color: var(--muted);
}

.keyword-list li::before {
  background: var(--warm);
}

.keyword-note {
  margin-top: 3.5rem;
}

.guide-footer {
  border-top-color: var(--line);
}

.article-main {
  padding-top: 4.5rem;
}

.article-head {
  padding-bottom: 3.5rem;
  border-bottom-color: var(--line);
}

.article-head h1 {
  font-size: clamp(2.8rem, 5.5vw, 5.2rem);
}

.article-prose h2 {
  font-family: var(--display);
}

.article-callout {
  border-left-color: var(--warm);
  background: var(--ink-soft);
}

@media (max-width: 760px) {
  .guide-shell {
    width: min(calc(100% - 2.5rem), 80rem);
  }

  .guide-header {
    min-height: 62px;
  }

  .guide-main,
  .article-main {
    padding-top: 3.8rem;
  }

  .guide-hero {
    padding-bottom: 3.5rem;
  }

  .guide-hero h1 {
    max-width: 11ch;
    font-size: clamp(2.55rem, 11vw, 4rem);
  }

  .keyword-finder,
  .keyword-intro,
  .keyword-observed {
    padding: 1.45rem 0;
  }

  .keyword-finder h2,
  .keyword-intro h2,
  .keyword-observed h2 {
    font-size: clamp(2rem, 9vw, 3.2rem);
  }

  .keyword-groups {
    padding-top: 3rem;
  }

  .keyword-group summary {
    min-height: 4.4rem;
  }

  .article-head {
    padding-bottom: 3rem;
  }

  .article-head h1 {
    font-size: clamp(2.5rem, 12vw, 4.6rem);
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 captured review: the keyword page is a reference index, not a
   dashboard. Compress repeated split-title rows and keep source links flat.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .keyword-page .keyword-intro,
  .keyword-page .keyword-observed {
    grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    padding: 1.65rem 0;
  }

  .keyword-page .keyword-observed {
    margin-top: 0;
    border-top: 0;
  }

  .keyword-page .keyword-intro h2,
  .keyword-page .keyword-observed h2 {
    max-width: 18ch;
    margin-top: 0.75rem;
    font-size: clamp(1.8rem, 2.45vw, 2.55rem);
    line-height: 1.04;
  }

  .keyword-page .keyword-intro > p,
  .keyword-page .keyword-observed__body > p {
    max-width: 44rem;
    margin-top: 0.35rem;
  }

  .keyword-page .keyword-sources {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 1.25rem;
    border-top: 1px solid var(--line);
  }

  .keyword-page .keyword-source-card {
    min-height: 0;
    padding: 0.85rem 0.9rem 0.85rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }

  .keyword-page .keyword-source-card + .keyword-source-card {
    padding-left: 0.9rem;
    border-left: 1px solid var(--line);
  }

  .keyword-page .keyword-groups {
    padding-top: 3.8rem;
  }

  .keyword-page .keyword-group summary {
    min-height: 4.7rem;
  }

  .keyword-page .keyword-note {
    margin-top: 3.8rem;
  }
}

@media (max-width: 760px) {
  .keyword-page .keyword-source-card {
    min-height: 0;
    background: transparent;
  }

  .keyword-page .keyword-source-card + .keyword-source-card {
    padding-left: 0;
    border-left: 0;
  }
}

/* 2026-09-05 narrow-screen QA: the guide is a document, so every heading,
   source line, and collapsed index row must remain readable at 320px. */
@media (max-width: 760px) {
  .guide-hero h1,
  .keyword-intro h2,
  .keyword-observed h2,
  .keyword-section-head h2,
  .keyword-note h2,
  .guide-section h2,
  .guide-hero__aside p,
  .guide-hero__aside small,
  .keyword-intro > p,
  .keyword-observed__body > p,
  .keyword-section-head p,
  .keyword-note p,
  .keyword-group summary strong,
  .keyword-group summary small,
  .keyword-group__body p,
  .keyword-list li,
  .keyword-source-card,
  .guide-footer {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .keyword-group summary > span:last-child,
  .keyword-source-card,
  .guide-footer {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .guide-hero h1 {
    font-size: clamp(2.35rem, 10.4vw, 3.5rem);
  }

  .keyword-intro h2,
  .keyword-observed h2,
  .keyword-section-head h2,
  .keyword-note h2 {
    font-size: clamp(1.8rem, 8.7vw, 2.7rem);
  }

  .guide-hero h1,
  .keyword-intro h2,
  .keyword-observed h2,
  .keyword-section-head h2,
  .keyword-note h2,
  .guide-hero__aside p,
  .keyword-intro > p,
  .keyword-observed__body > p,
  .keyword-section-head p,
  .keyword-note p,
  .keyword-group summary strong,
  .keyword-list li {
    word-break: normal;
  }
}

/* 2026-09-05 browser review v2: the guide is a reading surface. Keep its
   navigation and long search phrases inside the phone gutter. */
@media (max-width: 760px) {
  .guide-shell,
  .guide-main,
  .guide-footer,
  .article-main {
    width: calc(100% - 2rem);
    max-width: 80rem;
  }

  .guide-header {
    width: 100%;
    min-width: 0;
    gap: 0.5rem;
  }

  .guide-brand {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
  }

  .guide-nav {
    flex: 0 0 auto;
    gap: 0.65rem;
    color: var(--paper);
    font-size: 0.58rem;
  }

  .guide-nav a {
    min-height: 44px;
    white-space: nowrap;
  }

  .guide-nav a:nth-child(3),
  .guide-nav a:nth-child(4) {
    display: none;
  }

  .guide-hero,
  .keyword-finder,
  .keyword-intro,
  .keyword-observed,
  .keyword-groups,
  .keyword-note,
  .guide-footer,
  .article-head,
  .article-prose {
    width: 100%;
    max-width: 100%;
  }

  .guide-hero h1,
  .article-head h1 {
    max-width: 100%;
    font-size: clamp(2.25rem, 8.8vw, 3.2rem);
    line-height: 1.07;
    letter-spacing: -0.075em;
    word-break: keep-all;
  }

  .guide-hero__aside p,
  .guide-hero__aside small,
  .keyword-finder p,
  .keyword-intro > p,
  .keyword-observed__body > p,
  .keyword-section-head p,
  .keyword-note p,
  .article-dek,
  .article-prose p,
  .article-prose li {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .keyword-intro h2,
  .keyword-observed h2,
  .keyword-finder h2,
  .keyword-section-head h2,
  .keyword-note h2 {
    max-width: 15ch;
    font-size: clamp(1.8rem, 7.7vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.075em;
  }

  .keyword-group,
  .keyword-group summary,
  .keyword-group__body,
  .keyword-list,
  .keyword-list li,
  .keyword-source-card {
    min-width: 0;
    max-width: 100%;
  }

  .keyword-group summary {
    overflow: hidden;
  }
}

@media (max-width: 360px) {
  .guide-shell,
  .guide-main,
  .guide-footer,
  .article-main {
    width: calc(100% - 1.5rem);
  }

  .guide-nav {
    gap: 0.5rem;
    font-size: 0.54rem;
  }
}

/* 2026-09-05 browser review v3: secondary-page navigation gets a visible
   row of its own on phones instead of being pushed beyond the brand. */
@media (max-width: 760px) {
  .guide-header {
    flex-wrap: wrap;
    row-gap: 0;
    padding-block: 0.65rem;
  }

  .guide-nav {
    flex: 1 0 100%;
    order: 2;
    justify-content: flex-start;
    gap: 1rem;
  }

  .guide-nav a {
    min-height: 34px;
  }
}

/* 2026-09-05 browser review v4: the guide should feel like a useful note,
   not a second landing page. Reduce display type and bring the actual answer
   closer to the top. */
@media (min-width: 761px) {
  .guide-hero h1,
  .article-head h1 {
    max-width: 15ch;
    font-size: clamp(3rem, 4.1vw, 4.6rem);
    line-height: 1.06;
    letter-spacing: -0.075em;
  }

  .guide-hero {
    padding-bottom: 3.2rem;
  }

  .keyword-groups,
  .keyword-note {
    padding-top: 3.5rem;
  }
}

@media (max-width: 760px) {
  .guide-shell,
  .guide-main,
  .guide-footer,
  .article-main {
    width: calc(100% - 2.25rem);
  }

  .guide-main,
  .article-main {
    padding-top: 3rem;
  }

  .guide-hero,
  .article-head {
    padding-bottom: 2.8rem;
  }

  .guide-hero h1,
  .article-head h1 {
    max-width: 15ch;
    font-size: clamp(2.25rem, 9vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.07em;
  }

  .guide-hero__aside p,
  .keyword-finder p,
  .keyword-intro > p,
  .keyword-observed__body > p,
  .article-dek {
    font-size: 0.84rem;
    line-height: 1.78;
  }

  .keyword-intro h2,
  .keyword-observed h2,
  .keyword-finder h2,
  .keyword-section-head h2,
  .keyword-note h2 {
    max-width: 16ch;
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.065em;
  }

  .keyword-groups,
  .keyword-note {
    padding-top: 2.8rem;
  }
}

/* 2026-09-05 final width correction (last rule wins): guide content is
   nested in guide-shell, so the inner surfaces must not subtract the gutter
   a second time. */
@media (max-width: 760px) {
  .guide-shell {
    width: calc(100% - 2.25rem);
  }

  .guide-main,
  .guide-footer,
  .article-main {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .guide-shell {
    width: calc(100% - 1.5rem);
  }
}

/* 2026-09-05 final visual pass: guides are reference notes, not hero
   landing pages. Put the answer closer to the reader and reserve display
   type for the page title only. */
@media (min-width: 761px) {
  .guide-main {
    padding-top: clamp(3.5rem, 5vw, 4.75rem);
  }

  .guide-hero,
  .article-head {
    padding-bottom: 3rem;
  }

  .guide-hero h1,
  .article-head h1 {
    max-width: 16ch;
    font-size: clamp(2.75rem, 3.35vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.07em;
  }

  .keyword-intro,
  .keyword-observed {
    padding-block: 1.8rem;
  }

  .keyword-intro h2,
  .keyword-observed h2,
  .keyword-finder h2 {
    font-size: clamp(1.9rem, 2.5vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -0.07em;
  }

  .keyword-groups {
    padding-top: 2.8rem;
  }

  .article-prose {
    padding-top: 3rem;
  }
}

/* 2026-09-05 final phone frame: keep the guide header readable and quiet.
   The current page is already the guide; expose only the action that takes
   the reader to a conversation. */
@media (max-width: 760px) {
  body {
    min-width: 0;
  }

  .guide-header {
    flex-wrap: nowrap;
    gap: 0.7rem;
  }

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

  .guide-nav {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
    gap: 0.7rem;
  }

  .guide-nav a {
    display: none;
  }

  .guide-nav a:last-child {
    display: inline-flex;
  }
}

/* 2026-09-05 screen review v5: guides are useful notes. Remove the repeated
   split-hero rhythm and keep the reader's answer in a narrower column. */
@media (min-width: 761px) {
  .guide-main {
    padding-top: clamp(3rem, 4vw, 4rem);
  }

  .keyword-page .guide-hero {
    display: block;
    max-width: 800px;
    padding-bottom: 2.75rem;
  }

  .keyword-page .guide-hero__aside {
    max-width: 46rem;
    margin-top: 1.4rem;
  }

  .guide-hero h1,
  .article-head h1 {
    max-width: 16ch;
    font-size: clamp(2.35rem, 3vw, 3.1rem);
    line-height: 1.08;
  }

  .keyword-page .keyword-finder,
  .keyword-page .keyword-intro,
  .keyword-page .keyword-observed {
    display: block;
    max-width: 800px;
    padding-block: 1.75rem;
  }

  .keyword-page .keyword-finder > div + div,
  .keyword-page .keyword-intro > p,
  .keyword-page .keyword-observed__body {
    margin-top: 1.2rem;
  }

  .keyword-page .keyword-finder h2,
  .keyword-page .keyword-intro h2,
  .keyword-page .keyword-observed h2,
  .keyword-page .keyword-section-head h2,
  .keyword-page .keyword-note h2 {
    font-size: clamp(1.5rem, 2.2vw, 1.95rem);
    line-height: 1.15;
  }

  .keyword-page .keyword-groups {
    max-width: 800px;
    padding-top: 2.8rem;
  }

  .keyword-page .keyword-section-head {
    display: block;
  }

  .keyword-page .keyword-section-head p {
    max-width: 40rem;
    margin-top: 0.75rem;
  }

  .keyword-page .keyword-sources {
    display: block;
    margin-top: 1.2rem;
  }

  .keyword-page .keyword-source-card {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr) auto;
    align-items: baseline;
    min-height: 0;
    padding: 0.8rem 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
  }

  .article-main {
    max-width: 800px;
    padding-top: 3.25rem;
    padding-bottom: 6rem;
  }

  .article-head {
    padding-bottom: 2.75rem;
  }

  .article-head h1 {
    font-size: clamp(2.35rem, 3.1vw, 3.2rem);
    margin-top: 1.1rem;
    margin-bottom: 1.1rem;
  }

  .article-dek {
    max-width: 700px;
    font-size: 1rem;
    line-height: 1.8;
  }

  .article-prose {
    max-width: 760px;
    padding-top: 2.75rem;
  }

  .article-prose h2 {
    margin-top: 2.8rem;
    font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  }
}

@media (max-width: 760px) {
  .guide-main,
  .article-main {
    padding-top: 2.65rem;
  }

  .keyword-page .guide-hero,
  .article-head {
    padding-bottom: 2.5rem;
  }

  .keyword-page .guide-hero {
    display: block;
  }

  .keyword-page .guide-hero__aside {
    margin-top: 1.25rem;
  }

  .guide-hero h1,
  .article-head h1 {
    max-width: 15ch;
    font-size: clamp(2rem, 8.4vw, 2.4rem);
    line-height: 1.1;
  }

  .keyword-page .keyword-finder,
  .keyword-page .keyword-intro,
  .keyword-page .keyword-observed {
    display: block;
    padding-block: 1.55rem;
  }

  .keyword-page .keyword-finder h2,
  .keyword-page .keyword-intro h2,
  .keyword-page .keyword-observed h2,
  .keyword-page .keyword-section-head h2,
  .keyword-page .keyword-note h2 {
    font-size: clamp(1.45rem, 6.8vw, 1.85rem);
    line-height: 1.15;
  }

  .keyword-page .keyword-sources {
    display: block;
  }

  .keyword-page .keyword-source-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.75rem;
    padding: 0.75rem 0;
  }

  .keyword-page .keyword-source-card strong {
    grid-column: 1 / -1;
  }

  .keyword-page .keyword-source-card span {
    grid-column: 1;
  }

  .keyword-page .keyword-source-card small {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

  .article-prose {
    padding-top: 2.4rem;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 browser visual repair v6
   The keyword index is a real reference page. Give its explanatory copy a
   visible reading rail at desktop widths and use the available canvas for
   the source list and topic index instead of leaving a false empty column.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .guide-main {
    padding-top: clamp(4.25rem, 6.5vw, 6rem);
  }

  .keyword-page .guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(19rem, 0.74fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    max-width: none;
    padding: 1.7rem 0 4.35rem;
    border-bottom: 1px solid var(--line);
  }

  .keyword-page .guide-hero__aside {
    max-width: none;
    margin: 0;
    padding: 0.25rem 0 0 clamp(1.5rem, 3vw, 3rem);
    border-left: 1px solid var(--line);
  }

  .keyword-page .guide-hero__aside p {
    max-width: 31rem;
    font-size: 0.94rem;
    line-height: 1.86;
  }

  .keyword-page .keyword-finder,
  .keyword-page .keyword-intro,
  .keyword-page .keyword-observed {
    display: grid;
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    max-width: none;
  }

  .keyword-page .keyword-finder > div + div,
  .keyword-page .keyword-intro > p,
  .keyword-page .keyword-observed__body {
    margin-top: 0.25rem;
  }

  .keyword-page .keyword-finder h2,
  .keyword-page .keyword-intro h2,
  .keyword-page .keyword-observed h2 {
    max-width: 16ch;
  }

  .keyword-page .keyword-sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    margin-top: 1.4rem;
  }

  .keyword-page .keyword-source-card {
    display: flex;
    min-height: 6.6rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--line);
    background: transparent;
  }

  .keyword-page .keyword-groups {
    max-width: none;
    padding-top: 4.5rem;
  }

  .keyword-page .keyword-section-head {
    display: flex;
  }

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

@media (max-width: 760px) {
  .keyword-page .guide-hero {
    padding-bottom: 3.35rem;
  }

  .keyword-page .guide-hero__aside {
    margin-top: 1.8rem;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .keyword-page .keyword-sources {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 browser review v7
   A guide is a reference page, not a repeated landing-page poster. Let the
   headings wrap by measure and bring the index into view a little sooner.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .keyword-page .guide-hero {
    gap: clamp(2rem, 5vw, 4.75rem);
    padding-bottom: 3.35rem;
  }

  .keyword-page .guide-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.65rem, 4.05vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.08em;
  }

  .keyword-page .keyword-intro,
  .keyword-page .keyword-observed {
    gap: clamp(2rem, 5vw, 4.75rem);
  }

  .keyword-page .keyword-intro h2,
  .keyword-page .keyword-observed h2,
  .keyword-page .keyword-note h2 {
    max-width: 15ch;
    font-size: clamp(1.75rem, 2.65vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.075em;
  }

  .keyword-page .keyword-intro h2 br,
  .keyword-page .keyword-observed h2 br,
  .keyword-page .keyword-note h2 br {
    display: none;
  }

  .keyword-page .keyword-groups {
    padding-top: 3.65rem;
  }
}

@media (max-width: 760px) {
  .keyword-page .keyword-intro h2 br,
  .keyword-page .keyword-observed h2 br,
  .keyword-page .keyword-note h2 br {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2026-09-05 browser review v9
   Keep Korean guide headings readable at phrase boundaries rather than
   allowing a long word to be split by the browser line breaker.
---------------------------------------------------------------------------- */

.keyword-page .guide-hero h1,
.keyword-page .keyword-intro h2,
.keyword-page .keyword-observed h2,
.keyword-page .keyword-note h2,
.keyword-page .keyword-section-head h2 {
  word-break: keep-all;
  overflow-wrap: normal;
}

/* --------------------------------------------------------------------------
   2026-09-05 editorial rhythm v10
   The keyword page is a reference document. Let its lead and explanatory
   sections read top-to-bottom; reserve columns for the source index itself.
---------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .keyword-page .guide-hero {
    display: block;
    width: min(100%, 1040px);
    max-width: none;
  }

  .keyword-page .guide-hero > div:first-child,
  .keyword-page .guide-hero h1 {
    max-width: 900px;
  }

  .keyword-page .guide-hero__aside {
    max-width: 840px;
    margin-top: 2.1rem;
    padding: 1.45rem 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .keyword-page .keyword-intro,
  .keyword-page .keyword-observed {
    display: block;
    max-width: 1040px;
  }

  .keyword-page .keyword-intro > p,
  .keyword-page .keyword-observed__body {
    max-width: 840px;
    margin-top: 1.35rem;
  }

  .keyword-page .keyword-intro h2,
  .keyword-page .keyword-observed h2 {
    max-width: 800px;
  }
}