/* ─────────────────────────────────────────────────────────────
   Manuscript — site styles
   Source of truth for design tokens is src/styles/tokens.css.
   This file mirrors the studio palette only (sites use a single
   palette; the extension itself supports all four).
   ───────────────────────────────────────────────────────────── */

:root {
  --ff-sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo',
             'Helvetica Neue', Arial, sans-serif;
  --ff-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --ff-serif: 'EB Garamond', 'Apple Garamond', Garamond, 'Times New Roman', serif;

  --fs-display: 56px;  --lh-display: 1.1;   --fw-display: 600;
  --fs-h1:      36px;  --lh-h1:      1.2;   --fw-h1:      600;
  --fs-h2:      24px;  --lh-h2:      1.3;   --fw-h2:      600;
  --fs-h3:      18px;  --lh-h3:      1.35;  --fw-h3:      600;
  --fs-body:    16px;  --lh-body:    1.6;   --fw-body:    400;
  --fs-strong:  16px;  --lh-strong:  1.6;   --fw-strong:  500;
  --fs-small:   13px;  --lh-small:   1.5;   --fw-small:   400;
  --fs-cap:     12px;  --lh-cap:     1.3;   --fw-cap:     600;
  --ls-cap:     0.08em;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.03);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.10), 0 4px 8px rgb(0 0 0 / 0.05);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04),
                 0 4px 10px rgb(0 0 0 / 0.05),
                 0 12px 24px rgb(0 0 0 / 0.06);

  /* studio palette */
  --c-bg:        oklch(0.985 0.005 240);
  --c-surface:   oklch(1     0     0);
  --c-surface-2: oklch(0.965 0.006 240);
  --c-text:      oklch(0.20  0.020 240);
  --c-text-mute: oklch(0.50  0.015 240);
  --c-text-soft: oklch(0.66  0.010 240);
  --c-border:    oklch(0.92  0.008 240);
  --c-border-strong: oklch(0.84 0.010 240);
  --c-primary:   oklch(0.48  0.085 245);
  --c-primary-h: oklch(0.40  0.090 245);
  --c-primary-fg: oklch(0.99  0.003 240);
  --c-tint:      oklch(0.94  0.025 245);
  --c-focus:     oklch(0.60  0.13  245);

  /* layout */
  --container: 1120px;
  --gutter: 24px;
  --section-pad: 96px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-h); text-decoration: underline; }

/* ───── Layout primitives ───── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section {
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--c-border);
}
section:last-of-type { border-bottom: none; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  font-size: var(--fs-cap);
  font-weight: var(--fw-cap);
  color: var(--c-text-soft);
  margin: 0 0 16px;
}
h1, h2, h3 { font-family: var(--ff-sans); margin: 0; color: var(--c-text); }
h2.section-title { font-size: var(--fs-h1); line-height: var(--lh-h1); margin: 0 0 12px; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 8px; }
p { margin: 0 0 16px; color: var(--c-text-mute); }
p.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-text);
  max-width: 720px;
}

/* ───── Header / nav ───── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklch, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}

/* Hamburger — visible only on mobile via the responsive block below. */
.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--c-text);
  padding: 8px;
  margin: -8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: var(--c-surface-2); }
.nav-toggle svg path {
  transform-origin: center;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] .bar-1 { transform: translate(0, 5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar-2 { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar-3 { transform: translate(0, -5px) rotate(-45deg); }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px;
  height: 28px;
  display: block;
  /* SVG already contains its own black disc + white nib — no background or
     border-radius needed. */
}
.brand-word {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav a {
  color: var(--c-text-mute);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { color: var(--c-text); }
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  padding: 6px 26px 6px 10px;
  font-size: 13px;
  font-family: var(--ff-sans);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.lang-select:focus {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

/* ───── Hero ───── */
.hero {
  padding: 120px 0 96px;
  border-bottom: none;
  background:
    radial-gradient(ellipse 800px 420px at 50% -10%,
      color-mix(in oklch, var(--c-primary) 14%, transparent) 0%,
      transparent 70%),
    var(--c-bg);
}
.hero .container {
  display: grid;
  /* 텍스트 컬럼이 좁아 Korean 한 글자가 다음 줄로 떨어지는 케이스가
     있었다 — 좌우 비율을 1.05 : 0.95 로 살짝 텍스트 쪽으로 기울이고
     gap 도 줄였다. video 미리보기는 16:9 라 여유 폭이 약간 깎여도
     문제 없음. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
/* EB Garamond's tall ascenders + line-height 1.1 swallow the visible
   gap with whatever sits above the heading, so add explicit margin-top
   on the heading itself. */
.hero h1 {
  font-family: var(--ff-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 24px 0 16px;
  /* Korean 어절이 잘리지 않도록 단어 단위 줄바꿈만 허용 +
     라인 폭을 자동 균형. <br /> 로 강제 개행한 위치는 유지된다. */
  word-break: keep-all;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--c-primary);
}
/* Inline app icons reused in the guide — sized to match the surrounding
   text and colored via currentColor. The pill chrome around them mimics
   the small panel buttons so the reader recognises them at a glance. */
.iicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.18em;
  background: var(--c-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-primary);
  width: 1.6em;
  height: 1.6em;
  padding: 0.2em;
  margin: 0 0.1em;
}
.iicon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Record-themed pill — explicit vivid red dot (rather than the muted
   --c-error brand red) so the recording cue is unmistakable. */
.iicon.is-record {
  color: #ff0033;
  background: color-mix(in oklch, #ff0033, transparent 86%);
  border-color: color-mix(in oklch, #ff0033, transparent 60%);
}
.iicon.is-trash { color: var(--c-error); }

/* Hero keyword pill row — three short labels of what Manuscript makes. */
.hero-keywords {
  list-style: none;
  padding: 0;
  margin: 4px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-keywords li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.hero-keywords li .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  flex-shrink: 0;
}

.hero p.lead { margin-bottom: 28px; }
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--ff-sans);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, background-color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--c-primary);
  color: var(--c-primary-fg);
}
.btn-primary:hover { background: var(--c-primary-h); color: var(--c-primary-fg); }
.btn-ghost {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }

.hero-art {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--c-surface);
  display: block;
}
.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  /* Let the cropped panel-focused capture set its own natural height — no
     forced aspect-ratio so we don't crop the panel footer or pad with
     dead space. */
}
.hero-art .placeholder {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-text-soft);
  padding: 40px;
  text-align: center;
}

/* ───── Hero video — lite YouTube embed ─────
   Click target is the entire card; on activation the inline script swaps
   the thumbnail+button DOM for a YouTube iframe pointed at the same id.
   Pays zero YouTube JS until the viewer asks for the video. */
.hero-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #000;
  cursor: pointer;
  user-select: none;
  outline-offset: 3px;
  isolation: isolate;
}
.hero-video:focus-visible {
  outline: 3px solid var(--c-primary);
}
.hero-video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.hero-video:hover .hero-video-thumb,
.hero-video:focus-visible .hero-video-thumb {
  transform: scale(1.02);
  filter: brightness(0.88);
}
.hero-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.35));
  transition: transform 0.18s ease;
}
.hero-video:hover .hero-video-play,
.hero-video:focus-visible .hero-video-play {
  transform: scale(1.08);
}
.hero-video-play svg {
  width: 100%;
  height: 100%;
}
.hero-video-caption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
}
.hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ───── Record spotlight (headline feature) ───── */
.record-spotlight {
  background:
    radial-gradient(ellipse 700px 400px at 100% 0%,
      color-mix(in oklch, var(--c-primary) 18%, transparent) 0%,
      transparent 65%),
    var(--c-bg);
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--c-border);
}
.record-spotlight .section-title {
  font-family: var(--ff-serif);
  font-size: 44px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.record-spotlight .section-title em {
  font-style: italic;
  color: var(--c-primary);
}
.record-spotlight .eyebrow {
  color: var(--c-primary);
}
.record-spotlight p.lead {
  margin-bottom: 24px;
}
.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 8px;
}
.record-col { min-width: 0; }
.record-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.record-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-mute);
}
.record-bullets li::before {
  content: '●';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--c-primary);
  font-size: 10px;
}
.record-bullets li strong {
  color: var(--c-text);
  font-weight: 600;
}

/* ───── Remote library spotlight (v0.7.0) ───── */
.remote-spotlight {
  background:
    radial-gradient(ellipse 700px 400px at 0% 0%,
      color-mix(in oklch, var(--c-primary) 14%, transparent) 0%,
      transparent 65%),
    var(--c-surface);
  padding: var(--section-pad) 0;
  border-bottom: 1px solid var(--c-border);
}
.remote-spotlight .section-title {
  font-family: var(--ff-serif);
  font-size: 44px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.remote-spotlight .section-title em {
  font-style: italic;
  color: var(--c-primary);
}
.remote-spotlight .eyebrow { color: var(--c-primary); }
.remote-spotlight p.lead { margin-bottom: 40px; }
.remote-rows {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.remote-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 24px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
/* The "important" row that carries the "Edits won't be saved" message.
   Higher visual weight — primary tint background + thicker border.
   This is the single most safety-critical message in the Remote feature
   (users editing remote scenarios may otherwise expect persistence). */
.remote-row-highlight {
  background:
    linear-gradient(0deg,
      color-mix(in oklch, var(--c-primary) 6%, transparent),
      color-mix(in oklch, var(--c-primary) 6%, transparent)),
    var(--c-bg);
  border-color: color-mix(in oklch, var(--c-primary) 40%, var(--c-border));
}
.remote-row:nth-child(even) .remote-row-image { order: -1; }
/* Keep h3 as block (UA default) so the [data-en/ko] hide rule still
   wins — overriding display: here broke the language toggle for the
   highlight row. The chip floats inline via .remote-pin's own rules. */
.remote-row-copy h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px;
}
.remote-row-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-mute);
}
.remote-row-copy code {
  font-family: var(--ff-mono);
  font-size: 13px;
  padding: 2px 6px;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
}
.remote-row-image img {
  width: 100%;
  max-width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  background: var(--c-surface);
}
.remote-pin {
  display: inline-block;
  vertical-align: 0.18em;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary, #fff);
}

/* ───── Feature grid ───── */
.features {
  background: var(--c-surface-2);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.feature-card h3 {
  font-size: var(--fs-h3);
  margin: 0 0 8px;
}
.feature-card p {
  margin: 0;
  font-size: 14px;
  color: var(--c-text-mute);
}
.feature-card .icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-tint);
  color: var(--c-primary);
  margin-bottom: 14px;
}

/* ───── How it works (sequence) ───── */
.how .container { max-width: 980px; }
.sequence {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 40px;
}
.sequence-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
}
.sequence-step .num {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-primary-fg);
  font-family: var(--ff-serif);
  font-size: 20px;
  font-weight: 500;
}
.sequence-step .body {
  padding-top: 6px;
}
.sequence-step .body h3 { margin-bottom: 8px; }
.sequence-step img {
  margin-top: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}

/* ───── AI agent authoring ───── */
.agent .container { max-width: 980px; }
.agent-lead {
  margin: 20px 0 8px;
  font-size: var(--fs-lead, 18px);
  color: var(--c-text);
  max-width: 720px;
}
.agent-lead code,
.agent-prompt pre code {
  font-family: var(--ff-mono);
}
.agent-lead code {
  background: var(--c-surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}
.agent-sequence { margin-top: 28px; }
.agent-prompt {
  margin: 28px 0 8px;
  max-width: 720px;
}
.agent-prompt-label {
  font-size: var(--fs-small);
  color: var(--c-text-mute);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agent-prompt pre {
  background: oklch(0.20 0.020 240);
  color: oklch(0.97 0.003 240);
  padding: 16px 20px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  white-space: pre;
}
.agent-prompt pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.agent-note {
  margin: 20px 0 24px;
  max-width: 720px;
  font-size: var(--fs-small);
  color: var(--c-text-mute);
  border-left: 2px solid var(--c-border);
  padding-left: 14px;
}
.agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* ───── Install ───── */
.install .container { max-width: 880px; }
.install-cta {
  margin: 28px 0 8px;
  text-align: center;
}
.install-cta .btn { font-size: 16px; padding: 14px 24px; }

.install-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.install-list li {
  counter-increment: step;
  position: relative;
  padding: 18px 18px 18px 64px;
  margin-bottom: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.install-list li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-text);
  color: var(--c-bg);
  font-size: 13px;
  font-weight: 600;
}
.install-list code {
  font-family: var(--ff-mono);
  font-size: 13px;
  padding: 1px 6px;
  background: var(--c-surface-2);
  border-radius: var(--r-xs);
  border: 1px solid var(--c-border);
}
.callout {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--c-tint);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14px;
  color: var(--c-text);
}
.callout strong { color: var(--c-text); }

/* ───── NEW v0.3.0 inline badge ───── */
/* 인라인 신규 표시. 헤딩이나 bullet 첫머리에 붙여 신규 기능 명시.
   v0.X.Y 가 올라가면 (a) 신규 라벨 제거 또는 (b) 신규 버전으로 갱신. */
.new-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-bg);
  background: var(--c-primary);
  border-radius: 999px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
/* lead 본문에서는 약간 위로 띄워 둠 — 라인 높이가 크기 때문 */
.lead .new-badge { vertical-align: baseline; position: relative; top: -2px; }
/* nav 안에서는 더 작게 — 메뉴 폭이 좁아 NEW 칩이 시각 잡음이 되면 안 됨. */
.nav-new {
  font-size: 9px;
  padding: 1px 5px;
  margin-right: 4px;
  vertical-align: 1px;
  letter-spacing: 0.04em;
}

/* ───── Guide ───── */
.guide-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  margin-top: 40px;
}
.guide-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  font-size: 14px;
}
.guide-toc h4 {
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  font-size: var(--fs-cap);
  color: var(--c-text-soft);
  margin: 0 0 12px;
}
.guide-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.guide-toc li { margin-bottom: 8px; }
.guide-toc a {
  color: var(--c-text-mute);
  text-decoration: none;
}
.guide-toc a:hover, .guide-toc a.is-active {
  color: var(--c-primary);
}
.guide-body section {
  padding: 0 0 48px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 48px;
}
.guide-body section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.guide-body h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0 0 16px;
}
.guide-body h3 {
  font-size: 17px;
  margin: 28px 0 10px;
}
.guide-body ul, .guide-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--c-text-mute);
}
.guide-body li { margin-bottom: 6px; }
.guide-body figure {
  margin: 20px 0;
}
.guide-body figure img {
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}
.guide-body figcaption {
  font-size: 13px;
  color: var(--c-text-soft);
  margin-top: 8px;
  text-align: center;
}
.kbd {
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--c-surface);
  color: var(--c-text);
}

/* ───── Limits table ───── */
.limits-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.limits-table th, .limits-table td {
  text-align: left;
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--c-border);
}
.limits-table th {
  background: var(--c-surface-2);
  font-weight: 600;
  font-size: 13px;
  color: var(--c-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
}
.limits-table tr:last-child td { border-bottom: none; }
.limits-table td:first-child { color: var(--c-text); font-weight: 500; }

/* ───── Footer ───── */
.site-footer {
  padding: 40px 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  text-align: center;
  color: var(--c-text-soft);
  font-size: 13px;
}
.site-footer .links {
  display: inline-flex;
  gap: 16px;
  margin-bottom: 10px;
}
.site-footer a { color: var(--c-text-mute); text-decoration: none; }
.site-footer a:hover { color: var(--c-text); }

/* GitHub-style Sponsor pill — self-styled, no external widget.
   Lives in its own row in the footer so its taller padded box doesn't
   force the plain text links to wrap. */
.site-footer .sponsor-row {
  display: flex;
  justify-content: center;
  margin: 4px 0 10px;
}
.btn-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface-2, var(--c-surface));
  color: var(--c-text) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  transition: border-color 120ms ease, background 120ms ease;
}
.btn-sponsor:hover { border-color: #db61a2; background: var(--c-surface); }
.btn-sponsor svg { color: #db61a2; flex: 0 0 14px; }
/* The i18n visibility rule below (body[lang="..."] [data-en/ko])
   has higher specificity and would otherwise revert this pill back
   to an anchor's default `display: inline`, which collapses the
   flex layout and stacks the heart above the label. Re-apply
   `inline-flex` under the matching lang to win specificity. */
body[lang="en"] .btn-sponsor[data-en],
body[lang="ko"] .btn-sponsor[data-ko] {
  display: inline-flex;
}


/* ───── Responsive ───── */
@media (max-width: 880px) {
  :root { --section-pad: 64px; }
  .hero { padding: 80px 0 64px; }
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 40px; }
  .record-spotlight .section-title { font-size: 32px; }
  .record-grid { grid-template-columns: 1fr; gap: 24px; }
  .remote-spotlight .section-title { font-size: 32px; }
  .remote-row { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .remote-row:nth-child(even) .remote-row-image { order: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; gap: 24px; }
  .guide-toc { position: static; }
}

/* Collapse the header nav into a hamburger panel below 1080px. The
   previous 720px threshold left ~720–1080px viewports with menu items
   wrapping to two awkward lines (NEW badge on Remote + KO labels push
   the row past the available width). Switch to hamburger early so the
   header stays a single line at every desktop width. */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-header .inner { gap: 12px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px var(--gutter) 16px;
    background: color-mix(in oklch, var(--c-bg) 96%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
    /* Default: closed. .is-open toggles via JS. */
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 12px 4px;
    font-size: 15px;
    border-bottom: 1px solid var(--c-border);
  }
  .nav a:last-of-type { border-bottom: 0; }
  .lang-select {
    width: 100%;
    margin-top: 8px;
    padding: 10px 26px 10px 12px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 32px; }
  .container { padding: 0 16px; }
  .sequence-step { grid-template-columns: 1fr; gap: 12px; }
  .brand-word { font-size: 18px; }
}

/* Footer links collapse to a vertical list on mobile so long anchors
   (mail address, SKILL.md, "사용설명서", …) don't wrap mid-link. */
@media (max-width: 560px) {
  .site-footer .links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }
  .site-footer .links a {
    padding: 4px 0;
    font-size: 15px;
  }
}

/* lang visibility — JS toggles [lang] on body */
[data-en], [data-ko] { display: none; }
body[lang="en"] [data-en] { display: revert; }
body[lang="ko"] [data-ko] { display: revert; }

/* ───── Runtime bridge section + tour launcher ───── */
.bridge {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(37, 83, 184, 0.06), transparent),
    var(--c-bg);
}
.bridge .lead { max-width: 720px; }
.bridge-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.bridge-cards .card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.bridge-cards .card h3 {
  font-size: var(--fs-h3);
  margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.bridge-cards .card p { margin: 0 0 10px; font-size: var(--fs-small); color: var(--c-text-mute); }
.bridge-cards .card a.dl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-text);
  color: var(--c-surface);
  transition: opacity 0.15s;
}
.bridge-cards .card a.dl:hover { opacity: 0.85; text-decoration: none; }
.bridge-cards .card .dl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.bridge-cards .card h3 small {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text-soft);
  margin-left: 4px;
}

/* Code blocks intentionally stay dark in BOTH light and dark mode —
   the syntax-highlight palette (blue/amber/dimmed) only reads on a
   dark surface. Using var(--c-text) as a background broke this in
   dark mode (where --c-text flips near-white and the amber strings
   landed on a white bg). */
.bridge pre.code {
  background: oklch(0.20 0.020 240);
  color: oklch(0.97 0.003 240);
  padding: 18px 20px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--ff-mono);
  font-size: 13px;
  line-height: 1.55;
  margin: 16px 0;
}
.bridge pre.code .tok-key { color: #82b3ff; }
.bridge pre.code .tok-str { color: #ffd47a; }
.bridge pre.code .tok-cmt { color: rgba(255, 255, 255, 0.55); }

/* Floating tour pill — appears in the bottom-right when the extension is
   detected. Mirrors the extension's controls pill design tone. */
#mn-tour {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  appearance: none;
  border: 0;
  background: var(--c-text);
  color: var(--c-surface);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 16px 10px 14px;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.10);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
  transition: opacity 0.15s, transform 0.15s;
}
#mn-tour:hover:not([disabled]) { opacity: 1; transform: translateY(-1px); }
#mn-tour[hidden] { display: none; }
#mn-tour[disabled] { opacity: 0.5; cursor: not-allowed; }
#mn-tour svg { display: block; }
#mn-tour .label { letter-spacing: 0.01em; }

@media (max-width: 720px) {
  .bridge-cards { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Palette toggle (nav button) — sun shown in dark mode, moon in light.
   Same sun/moon SVG swap pattern as popup + floating panel.
   ───────────────────────────────────────────────────────────── */
.palette-toggle {
  appearance: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-text-mute);
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.palette-toggle:hover { color: var(--c-text); border-color: var(--c-text-mute); }
.palette-toggle:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.palette-toggle .palette-sun { display: none; }
.palette-toggle .palette-moon { display: inline-block; }
.palette-toggle[aria-pressed="true"] .palette-sun { display: inline-block; }
.palette-toggle[aria-pressed="true"] .palette-moon { display: none; }

/* ─────────────────────────────────────────────────────────────
   Dark palette — mirrors src/styles/tokens.css [data-palette="studio-dark"].
   Shadow opacity bumped ~4× because black-on-black shadow is weak.
   Mirrors docs/design/dark-mode-design.md §4.1 + §5.
   ───────────────────────────────────────────────────────────── */
body[data-palette="studio-dark"] {
  --c-bg:        oklch(0.16  0.012 245);
  --c-surface:   oklch(0.22  0.014 245);
  --c-surface-2: oklch(0.19  0.012 245);
  --c-text:      oklch(0.97  0.003 245);
  --c-text-mute: oklch(0.78  0.006 245);
  --c-text-soft: oklch(0.62  0.008 245);
  --c-border:    oklch(0.32  0.012 245);
  --c-border-strong: oklch(0.42 0.014 245);
  --c-primary:   oklch(0.70  0.09  245);
  --c-primary-h: oklch(0.78  0.09  245);
  --c-primary-fg: oklch(0.14  0.020 245);
  --c-tint:      oklch(0.32  0.045 245);
  --c-focus:     oklch(0.74  0.13  245);

  --shadow-sm:   0 1px 2px  rgb(0 0 0 / 0.40);
  --shadow-md:   0 2px 6px  rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-lg:   0 12px 28px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.40);
  --shadow-card: 0 1px 2px  rgb(0 0 0 / 0.35),
                 0 4px 10px rgb(0 0 0 / 0.40),
                 0 12px 24px rgb(0 0 0 / 0.50);
}

/* The lang-select dropdown chevron is a data URI SVG with a fixed grey
   stroke; replace it with a brighter chevron in dark mode so the arrow
   stays visible on the dark surface. */
body[data-palette="studio-dark"] .lang-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23bdc7d6' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
}

/* Floating "Take the tour" pill — keep its brand dark colors in light
   mode (already dark-on-light by design), but in dark mode flip to a
   surface tone so it doesn't blend into the background. */
body[data-palette="studio-dark"] #mn-tour {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--shadow-md);
}

/* ───── Hero install hint ─────
   The small manual-install nudge under the hero CTAs. Hidden by default;
   the version script unhides it ONLY when the dev .zip is ahead of the
   live Web Store build (review weeks). */
.hero-install-hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--c-text-soft);
}
.hero-install-hint[hidden] { display: none; }
/* The language-toggle rule `body[lang="ko"] [data-ko] { display: revert }`
   has higher specificity (0,2,1) than `.hero-install-hint[hidden]` (0,2,0),
   and Chrome's revert resolves to display:block for <p> instead of honoring
   the UA-level [hidden] rule. Result: in KO mode the hint paints even with
   the hidden attribute set. Out-rank the lang rule when hidden is present. */
body[lang="en"] [data-en].hero-install-hint[hidden],
body[lang="ko"] [data-ko].hero-install-hint[hidden] { display: none; }
.hero-install-hint a { color: var(--c-text-mute); text-decoration: underline; }
.hero-install-hint a:hover { color: var(--c-primary); }
.hero-zip-link { font-variant-numeric: tabular-nums; }

/* ───── Install — version chips + tabs ───── */
.install-intro {
  margin: 0 0 20px;
  color: var(--c-text);
}

.install-versions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  margin: 0 0 24px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14px;
}
.ver-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.ver-chip-label {
  font-size: 11px;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.ver-chip-value {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.ver-chip-sep { color: var(--c-border-strong); }
/* Mirror the secondary-path treatment from .install-tab — the .zip chip
   reads as a quieter sibling of the Web Store chip. */
.ver-chip-zip { opacity: 0.7; }
.ver-chip-zip:hover { opacity: 1; }
.ver-chip-hint {
  font-size: 12px;
  color: var(--c-text-soft);
  font-style: italic;
}

.install-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 0;
  border-bottom: 1px solid var(--c-border);
}
.install-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-mute);
  cursor: pointer;
  position: relative;
  bottom: -1px;
}
.install-tab small {
  font-weight: 400;
  font-size: 11px;
  margin-left: 4px;
  color: var(--c-text-soft);
}
.install-tab:hover { color: var(--c-text); }
.install-tab.is-active {
  background: var(--c-surface);
  border-color: var(--c-border);
  border-bottom-color: var(--c-surface);
  color: var(--c-text);
}
/* Secondary path: Web Store is the recommended default, so the manual
   .zip tab carries lower visual weight when inactive. Activates back to
   full weight on hover or selection so the cohort can still find it. */
.install-tab[data-target="zip"]:not(.is-active) {
  opacity: 0.7;
  font-weight: 400;
}
.install-tab[data-target="zip"]:not(.is-active):hover { opacity: 1; }
.install-tab:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.install-panel {
  padding: 28px 0 0;
}
.install-panel[hidden] { display: none; }

.install-sha {
  margin: 14px 0 8px;
  font-size: 12px;
  color: var(--c-text-soft);
  text-align: center;
}
.install-sha-label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  padding: 2px 6px;
  margin-right: 6px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  color: var(--c-text-mute);
}
.install-sha code {
  font-family: var(--ff-mono);
  font-size: 11px;
  word-break: break-all;
  color: var(--c-text);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}
.install-sha a {
  color: var(--c-text-mute);
  text-decoration: underline;
}
.install-sha-size { font-variant-numeric: tabular-nums; }

.callout-warn {
  border-left-color: oklch(0.62 0.16 50);
  background: oklch(0.96 0.04 70);
}
body[data-palette="studio-dark"] .callout-warn {
  background: oklch(0.30 0.05 65);
}

.install-changelog-link {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--c-text-soft);
}
.install-changelog-link a { font-weight: 500; }

/* ───── Schema compatibility table ───── */
.schema-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 8px;
  font-size: 13px;
}
.schema-table th,
.schema-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.schema-table thead th {
  background: var(--c-surface-2);
  font-size: 11px;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.schema-table code {
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 1px 5px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
}
.schema-table em {
  font-style: normal;
  font-size: 11px;
  color: var(--c-primary);
  margin-left: 4px;
}
.schema-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--c-text-mute);
}

/* Guide TOC version chip — tiny "v0.4" badge next to new entries. */
.guide-toc .toc-new {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c-primary) 16%, transparent);
  color: var(--c-primary);
  letter-spacing: 0.02em;
}

/* Validation-status dots inside the guide's color legend. */
#g-validate .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
}
#g-validate .dot-green  { background: oklch(0.74 0.18 145); }
#g-validate .dot-yellow { background: oklch(0.86 0.16 95);  }
#g-validate .dot-red    { background: oklch(0.65 0.21 28);  }
#g-validate .dot-gray   { background: oklch(0.78 0.01 240); }

/* ───── What's-new toast ───── */
.whatsnew-toast {
  position: fixed;
  right: 20px;
  bottom: 76px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 40px);
  padding: 10px 14px 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  color: var(--c-text);
  transform: translateY(8px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.whatsnew-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.whatsnew-toast[hidden] { display: none; }
.whatsnew-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  flex-shrink: 0;
  animation: whatsnew-pulse 1.6s ease-in-out infinite;
}
@keyframes whatsnew-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.5; }
}
.whatsnew-text strong { font-weight: 600; }
.whatsnew-link {
  margin-left: 6px;
  font-weight: 500;
  color: var(--c-primary);
}
.whatsnew-close {
  appearance: none;
  background: transparent;
  border: 0;
  margin-left: 2px;
  padding: 2px 6px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--c-text-mute);
  cursor: pointer;
  border-radius: var(--r-xs);
}
.whatsnew-close:hover { color: var(--c-text); background: var(--c-surface-2); }

@media (max-width: 640px) {
  .whatsnew-toast {
    right: 10px;
    left: 10px;
    bottom: 12px;
    justify-content: space-between;
  }
  .install-tabs {
    flex-wrap: wrap;
  }
  .install-versions {
    flex-direction: column;
    align-items: flex-start;
  }
  .ver-chip-sep { display: none; }
}

/* ───── Changelog page ───── */
.changelog-hero {
  padding: 72px 0 32px;
  border-bottom: 1px solid var(--c-border);
}
.changelog-hero .lead {
  max-width: 720px;
  margin: 16px 0 0;
}
.changelog {
  padding: 56px 0 96px;
}
.changelog .container { max-width: 880px; }

.changelog-entry {
  padding: 32px 0;
  border-bottom: 1px solid var(--c-border);
}
.changelog-entry:last-of-type { border-bottom: none; }
.changelog-entry-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.changelog-entry-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.changelog-entry-head time {
  font-size: 13px;
  color: var(--c-text-soft);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.changelog-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--c-tint);
  color: var(--c-primary);
}
.changelog-tag-current {
  background: var(--c-primary);
  color: var(--c-primary-fg);
}
/* .changelog-tag 가 display:inline-block 를 지정하면 전역 lang-visibility
   규칙 [data-en],[data-ko]{display:none} 의 specificity 와 동률이라
   선언 순서상 hide 가 무시된다. 같은 specificity 라도 더 뒤에 와서
   override 되도록 명시. */
.changelog-tag[data-en],
.changelog-tag[data-ko] { display: none; }
body[lang="en"] .changelog-tag[data-en],
body[lang="ko"] .changelog-tag[data-ko] { display: inline-block; }
.changelog-summary {
  margin: 6px 0 18px;
  color: var(--c-text-mute);
  max-width: 720px;
}
.changelog-entry h3 {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  color: var(--c-text-soft);
}
.changelog-entry ul {
  margin: 0 0 12px;
  padding: 0 0 0 22px;
}
.changelog-entry li {
  margin: 6px 0;
  line-height: 1.55;
}
.changelog-entry code {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  padding: 1px 5px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xs);
}

/* Active nav link on the changelog page */
.nav a.is-current {
  color: var(--c-text);
  font-weight: 500;
}