/* ============================================================================
 * moai-docs-layout.css — round3 docs layout geometry (M3a, SPEC-DESIGN-DOCSV2-001)
 * ----------------------------------------------------------------------------
 * Ported from the round3 prototype inline <style> blocks:
 *   - 05-docs-index.html  → docs-index (hero, sticky filters, featured, grid, cards)
 *   - 06-docs-detail.html → docs-detail (read-progress, hero, 3-col layout, TOC, rail,
 *                           pattern, compare, next-cta, news-inline)
 *
 * Token bridge: these classes use FLAT token names (--bg, --primary, --gradient,
 * --muted, --border, --shadow-lg, --danger, --success, --font-mono, --tracking-*).
 * The flat aliases are defined in moai-brand.css :root (M3a alias block) and map
 * 1:1 onto the v2 tokens (--color-*, --gradient-signature, --shadow-*, …).
 *
 * Scope: LAYOUT GEOMETRY ONLY.
 *   - Frame (nav/footer/btn/card/chip) lives in moai-design.css  → deferred to M3b.
 *   - prose-kr typography                                      → M3c.
 *   - code-mac                                                 → M3d.
 * The global `body { background: var(--bg); }` rule from the round3 prototypes is
 * intentionally EXCLUDED so this stylesheet remains INERT (no site-wide visual
 * change) until M3b/M3c layouts reference these classes.
 *
 * Collision-driven renames (see collision-check evidence in progress.md §E.2):
 *   .toc       → .docs-toc       (bare .toc already defined in moai-design.css)
 *   .pill      → .docs-pill      (descendant .nav-brand/.md-section-head .pill bleed)
 *   .featured  → .docs-featured  (.cw-card.featured compound bleed)
 *   … plus their tightly-coupled variants (.docs-toc-h, .docs-toc-list,
 *   .docs-pill-row). All other selectors are byte-for-byte from round3
 *   (same names, same hardcoded px, same @media rules — round3 has no
 *   --space-*/--radius-* tokens).
 * ========================================================================== */

/* ════════════════════════ docs-index (05) ════════════════════════ */

.docs-hero { padding: 64px 40px 40px; }
.docs-hero-inner { max-width: 1280px; margin: 0 auto; }
.docs-eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--primary); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.docs-h1 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 900; letter-spacing: var(--tracking-display); line-height: 1.05; max-width: 880px; margin-bottom: 16px; }
.docs-sub { font-size: 18px; color: var(--muted-fg); max-width: 640px; line-height: 1.6; margin-bottom: 28px; }
.docs-stats { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 24px; }
.docs-stat-num { font-family: var(--font-mono); font-size: 28px; font-weight: 800; letter-spacing: var(--tracking-display); }
.docs-stat-lbl { font-size: 11px; color: var(--muted-fg); font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

/* Sticky filters */
.docs-filters {
  position: sticky; top: 64px; z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 16px 40px;
}
.docs-filters-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.docs-pill-row { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; overflow-x: auto; }
.docs-pill { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--surface); white-space: nowrap; transition: all 150ms; }
.docs-pill:hover { border-color: var(--ink); }
.docs-pill.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.docs-pill .count { font-family: var(--font-mono); font-size: 11px; opacity: 0.6; margin-left: 6px; }
.docs-pill.active .count { opacity: 0.7; }
.filter-divider { width: 1px; height: 24px; background: var(--border); }
.sort-select { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 700; }

/* Featured */
.docs-featured { max-width: 1280px; margin: 32px auto; padding: 0 40px; }
.featured-card {
  background: var(--gradient); color: #fff;
  border-radius: 24px; padding: 48px 56px;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
.featured-card::after {
  content: "";
  position: absolute; top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: transparent;
  pointer-events: none;
}
.featured-eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; opacity: 0.85; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; }
.featured-eye .dot { width: 6px; height: 6px; border-radius: 999px; background: #fff; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.featured-card h2 { font-size: 36px; font-weight: 900; letter-spacing: var(--tracking-display); line-height: 1.15; margin-bottom: 16px; }
.featured-card p { font-size: 16px; opacity: 0.92; line-height: 1.6; margin-bottom: 24px; max-width: 480px; }
.featured-meta { display: flex; gap: 16px; font-size: 12px; opacity: 0.8; font-family: var(--font-mono); margin-bottom: 24px; }
.featured-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: #fff; color: var(--primary); border-radius: 999px; font-weight: 800; font-size: 15px; }
.featured-illu { aspect-ratio: 1; border-radius: 16px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; padding: 40px; backdrop-filter: blur(8px); position: relative; z-index: 2; }

/* Grid */
.docs-grid-section { max-width: 1280px; margin: 0 auto; padding: 16px 40px 80px; }
.grid-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 20px; }
.grid-section-head h3 { font-size: 22px; font-weight: 800; letter-spacing: var(--tracking-heading); }
.grid-section-head .count { font-family: var(--font-mono); font-size: 12px; color: var(--muted-fg); }

.docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.doc-card {
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);   /* v2 surface card 정지 elevation (M6) */
  transition: all 200ms;
}
.doc-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.doc-thumb { aspect-ratio: 4/5; position: relative; overflow: hidden; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.doc-thumb-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.06); color: var(--ink); align-self: flex-start; }
.doc-thumb-num { position: absolute; bottom: 16px; right: 20px; font-family: var(--font-mono); font-size: 64px; font-weight: 900; opacity: 0.2; line-height: 1; letter-spacing: var(--tracking-display); }
.doc-thumb-icon { width: 56px; height: 56px; border-radius: 12px; background: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.doc-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.doc-tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.doc-tag { font-size: 10px; font-family: var(--font-mono); padding: 2px 8px; background: var(--muted); border-radius: 4px; color: var(--muted-fg); letter-spacing: 0.04em; }
.doc-card h4 { font-size: 16px; font-weight: 800; line-height: 1.35; margin-bottom: 8px; min-height: 42px; }
.doc-excerpt { font-size: 13px; color: var(--muted-fg); line-height: 1.55; flex: 1; margin-bottom: 14px; }
.doc-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted-fg); font-family: var(--font-mono); padding-top: 12px; border-top: 1px solid var(--border); }
.doc-meta .read-time { display: flex; align-items: center; gap: 4px; }
.doc-meta .views { margin-left: auto; }

/* Themed thumb backgrounds */
.thumb-1 { background: #3d7d5f; color: #fff; }
.thumb-1 .doc-thumb-cat { background: rgba(255,255,255,0.18); color: #fff; }
.thumb-2 { background: #f5e6d3; }
.thumb-3 { background: #d4ddd9; }
.thumb-4 { background: #2a8a8c; color: #fff; }
.thumb-4 .doc-thumb-cat { background: rgba(255,255,255,0.18); color: #fff; }
.thumb-5 { background: #ffe8d6; }
.thumb-6 { background: #e9eef0; }
.thumb-7 { background: #1a1f1d; color: #fff; }
.thumb-7 .doc-thumb-cat { background: rgba(255,255,255,0.18); color: #fff; }
.thumb-8 { background: #fdf3e7; }

@media (max-width: 1023px) {
  .docs-grid { grid-template-columns: 1fr 1fr; }
  .featured-card { grid-template-columns: 1fr; padding: 32px; }
  .featured-illu { aspect-ratio: 16/9; }
  .docs-hero { padding: 40px 20px 24px; }
  .docs-filters { padding: 12px 20px; top: 64px; }
  .docs-featured, .docs-grid-section { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .docs-grid { grid-template-columns: 1fr; }
  .docs-stats { gap: 16px; }
}

/* ════════════════════════ docs-detail (06) ════════════════════════ */

/* Reading progress bar */
.read-progress { position: fixed; top: 64px; left: 0; right: 0; height: 3px; background: var(--muted); z-index: 49; }
.read-progress > div { height: 100%; width: 0%; background: var(--gradient); transition: width 80ms; }

/* Hero strip */
.doc-hero {
  background: var(--gradient); color: #fff;
  padding: 56px 40px 64px;
  border-bottom: 1px solid var(--border);
}
.doc-hero-inner { max-width: 1280px; margin: 0 auto; }
.crumb { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; letter-spacing: 0.1em; margin-bottom: 16px; }
.crumb a { opacity: 0.85; }
.crumb .sep { margin: 0 8px; opacity: 0.5; }
.doc-cat { display: inline-block; padding: 4px 12px; background: rgba(255,255,255,0.16); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; font-family: var(--font-mono); margin-bottom: 16px; }
.doc-h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 900; letter-spacing: var(--tracking-display); line-height: 1.1; max-width: 900px; margin-bottom: 16px; }
.doc-deck { font-size: 18px; line-height: 1.5; opacity: 0.92; max-width: 720px; margin-bottom: 28px; }
.doc-byline { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 13px; }
.doc-author { display: flex; align-items: center; gap: 10px; }
.doc-author-avatar { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.doc-author strong { font-weight: 700; }
.doc-author-sub { font-size: 11px; opacity: 0.75; font-family: var(--font-mono); }
.doc-meta-strip { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 12px; opacity: 0.85; margin-left: auto; }

/* 3-column layout */
.doc-layout {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 40px 80px;
  display: grid; grid-template-columns: 220px 1fr 280px; gap: 48px;
}

/* TOC sticky (renamed .toc → .docs-toc — bare .toc exists in moai-design.css) */
.docs-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.docs-toc-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.docs-toc-list { list-style: none; }
.docs-toc-list li { margin-bottom: 4px; }
.docs-toc-list a { display: block; padding: 8px 12px; border-left: 2px solid transparent; font-size: 13px; color: var(--muted-fg); line-height: 1.5; transition: all 150ms; }
.docs-toc-list a:hover { color: var(--ink); background: var(--muted); border-radius: 0 8px 8px 0; }
.docs-toc-list a.active { color: var(--primary); border-left-color: var(--primary); font-weight: 700; }
.docs-toc-list .sub { padding-left: 24px; font-size: 12px; opacity: 0.85; }

/* Body — 720px */
.doc-body { max-width: 720px; }

/* Right rail */
.rail { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.rail-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.rail-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 12px; }
.rail-related { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
.rail-related:last-child { border-bottom: none; }
.rail-related h5 { font-size: 13px; font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
.rail-related .m { font-family: var(--font-mono); font-size: 11px; color: var(--muted-fg); }
.rail-actions { display: flex; flex-direction: column; gap: 8px; }
.rail-action { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; transition: all 150ms; }
.rail-action:hover { border-color: var(--ink); background: var(--muted); }
.rail-action .ic { font-size: 16px; }

/* Inline code-mac sizing tweak inside prose */
.doc-body .code-mac { margin: 20px 0; }

/* Pattern card */
.pattern { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin: 24px 0; display: grid; grid-template-columns: 32px 1fr; gap: 16px; }
.pattern-num { width: 32px; height: 32px; border-radius: 999px; background: var(--gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 800; font-size: 13px; }
.pattern h4 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.pattern p { font-size: 14px; color: var(--muted-fg); line-height: 1.6; margin: 0; }

/* Comparison box */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.compare-cell { padding: 16px 20px; border-radius: 10px; }
.compare-cell.bad { background: rgba(196,74,58,0.06); border: 1px solid rgba(196,74,58,0.2); }
.compare-cell.good { background: rgba(28,124,112,0.08); border: 1px solid rgba(28,124,112,0.25); }
.compare-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; margin-bottom: 8px; font-weight: 700; }
.compare-cell.bad .compare-h { color: var(--danger); }
.compare-cell.good .compare-h { color: var(--success); }
.compare-text { font-size: 14px; line-height: 1.6; }

/* Next CTA */
.next-cta { background: var(--gradient); color: #fff; border-radius: 16px; padding: 32px; margin: 64px 0 32px; display: flex; align-items: center; gap: 24px; max-width: 720px; }
.next-cta-eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; opacity: 0.85; margin-bottom: 8px; }
.next-cta h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; line-height: 1.3; }
.next-cta p { font-size: 13px; opacity: 0.85; font-family: var(--font-mono); }
.next-cta-arrow { font-size: 32px; opacity: 0.6; }

/* Newsletter inline */
.news-inline { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin: 40px 0; max-width: 720px; }
.news-inline h4 { font-size: 18px; font-weight: 800; margin-bottom: 6px; letter-spacing: var(--tracking-heading); }
.news-inline p { font-size: 13px; color: var(--muted-fg); margin-bottom: 16px; }
.news-form { display: flex; gap: 8px; }
.news-form input { flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 14px; }
.news-form button { padding: 12px 20px; }

@media (max-width: 1199px) {
  .doc-layout { grid-template-columns: 200px 1fr; }
  .rail { display: none; }
}
@media (max-width: 1023px) {
  .doc-layout { grid-template-columns: 1fr; padding: 32px 20px 60px; gap: 24px; }
  .docs-toc { display: none; }
  .doc-hero { padding: 40px 20px 48px; }
  .compare { grid-template-columns: 1fr; }
}

/* ============================================================================
 * Frame (M3b — round3 NavBar / Footer / MobileNav / Buttons / Cards / Chips /
 *        Eyebrow / Page wrapper)
 * ----------------------------------------------------------------------------
 * Ported verbatim from .moai/state/ai-design-system/project/round3/styles.css
 * lines 98-352. Flat token refs (--bg, --primary, --gradient, --muted, --ink,
 * --border, --surface, --muted-fg, --border-strong, --warning, --gradient-soft,
 * --shadow-sig, --font-mono, --tracking-heading, --tracking-body) resolve via
 * the M3a alias block in moai-brand.css :root (lines 149-168). Hardcoded px/radii
 * preserved byte-for-byte from round3.
 *
 * moai-docs-layout.css loads LAST (head/custom.html), so same-specificity rules
 * here win over moai-brand/design/theme. Existing !important rules in
 * moai-docs-theme.css (.gdoc-header/.cw-footer green-tint backgrounds) still
 * override non-!important round3 backgrounds — that is a known cascade reality
 * (green-tint stays as the design-system primary tint); the round3 STRUCTURE
 * (sticky/height/flex/grid) applies cleanly. M3c may reconcile the !important
 * layer if a full cream-canvas pass is required.
 *
 * Collision-driven renames (M3a convention — namespace on collision, port rest
 * byte-for-byte; see collision-rename table in progress.md §E.2 M3b):
 *   .nav       → .docs-nav        (bare .nav @ moai-design.css:17 — dead CSS, but
 *                                  namespaced per spec example + base primitive)
 *   .footer    → .docs-footer     (no bare collision, but namespaced per spec
 *                                  example — conservative on prominent primitive)
 *   .btn       → .docs-btn        (bare .btn @ moai-design.css:647 + brand:1552)
 *   .card      → .docs-card       (no bare collision; spec example — conservative)
 *   .main      → .docs-main       (bare .main @ moai-design.css:228 — dead CSS)
 *   .container → .docs-container  (LIVE collision: geekdoc main.css .container is
 *                                  used by baseof <main class="container ...">;
 *                                  MUST namespace to avoid clobbering 82rem)
 *
 * PORTED BARE (byte-for-byte, includes dead-collision overrides — zero regression
 * because moai-design.css .nav/.nav-inner/.nav-search/.main are unreferenced in
 * any docs-site markup; verified via grep over layouts/ content/ data/):
 *   .nav-inner, .nav-logo, .nav-logo-mark, .nav-menu, .nav-link, .nav-link.active,
 *   .nav-utility, .nav-search, .nav-search-key, .nav-icon-btn, .nav-login,
 *   .footer-inner, .footer-grid, .footer-brand-tag, .footer-col, .footer-bottom,
 *   .mobile-nav, .mobile-nav-inner, .mobile-nav-item,
 *   .btn-primary, .btn-secondary, .btn-ghost, .btn-lg,
 *   .chip, .chip-soft, .chip-solid, .chip-line, .chip-amber,
 *   .eyebrow, .eyebrow-on-grad, .page
 * ========================================================================== */

/* ───── NavBar ───── */
.docs-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: var(--tracking-heading);
}
.nav-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}
.nav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-body);
  color: var(--muted-fg);
  transition: all 150ms;
}
.nav-link:hover { background: var(--muted); color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-utility {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted-fg);
  background: var(--surface);
  min-width: 180px;
}
.nav-search-key {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--muted);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.nav-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-fg);
  transition: all 150ms;
}
.nav-icon-btn:hover { background: var(--muted); color: var(--ink); }
.nav-login {
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

/* ───── Footer ───── */
.docs-footer {
  margin-top: 80px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 40px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-brand-tag {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted-fg);
  max-width: 320px;
  letter-spacing: var(--tracking-body);
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 16px;
  font-family: var(--font-mono);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--ink); }
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted-fg);
  font-family: var(--font-mono);
}

/* ───── Mobile Bottom Nav ───── */
.mobile-nav {
  display: none;
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: 40;
}
.mobile-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0;
  font-size: 10px;
  color: var(--muted-fg);
  font-weight: 600;
}
.mobile-nav-item.active { color: var(--primary); }

/* ───── Buttons ───── */
.docs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--tracking-body);
  transition: all 150ms;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gradient);
  color: #fff;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sig); }
.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
}
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--muted); }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ───── Cards ───── */
.docs-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);   /* v2 surface card 정지 elevation (M6) */
  overflow: hidden;
}

/* ───── Chips ───── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-body);
}
.chip-soft { background: var(--gradient-soft); color: var(--primary); }
.chip-solid { background: var(--gradient); color: #fff; }
.chip-line { border: 1px solid var(--border-strong); color: var(--ink); }
.chip-amber { background: rgba(196,123,42,0.12); color: var(--warning); }

/* ───── Eyebrow ───── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow-on-grad { color: rgba(255,255,255,0.9); }

/* ───── Page wrapper ───── */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.docs-main {
  flex: 1;
}
.docs-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ───── Mascot (v2 6-pose) — SPEC-DESIGN-DOCSV2-001 M5 ───── */
/* base contract shared by partials/mascot.html + shortcodes/mascot.html.
   width is set inline via the img width attr; height:auto keeps aspect. */
.mascot {
  display: inline-block;
  height: auto;
  max-width: 100%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mascot:hover { animation: mascot-wiggle 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mascot-wiggle {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-4deg); }
  75%     { transform: rotate(4deg); }
}

/* ───── Empty section state (doc-empty partial) ───── */
.doc-empty {
  padding: 64px 24px;
  text-align: center;
}
.doc-empty-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.doc-empty-mascot { width: 140px; }
.doc-empty-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: var(--tracking-heading, -0.05em);
  color: var(--ink);
  margin: 0;
}
.doc-empty-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-fg, var(--fg-2));
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mascot { transition-duration: 1ms; }
  .mascot:hover { animation-duration: 1ms; }
}

/* ───── prose-kr — 한국어 본문 가독성 보강 레이어 (SPEC-DESIGN-DOCSV2-001 M7) ─────
   single.html 본문 래퍼가 `.gdoc-markdown prose-kr` 로 항상 붙인다. gdoc-markdown 이
   기본 타이포그래피(폰트/수직리듬/코드블록 = render-codeblock.html .code-card)를 소유;
   prose-kr 은 그 위에 한국어 어절 단위 줄바꿈만 얇게 덧입힌다(헤딩/코드/리듬 재정의 없음
   → 충돌·리그레션 방지). word-break: keep-all 은 CJK(ja/zh) 폭 오버플로를 피하려
   한국어에만 스코프(<html lang="ko">). round3 styles.css §.prose-kr 의 핵심만 이식. */
.prose-kr { overflow-wrap: break-word; }
:lang(ko) .prose-kr,
html[lang="ko"] .prose-kr { word-break: keep-all; }

/* ============================================================================
 * Hotfix (2026-07-21) — single 문서 상세 레이아웃 붕괴 3건
 * (1) .doc-hero 텍스트가 theme heading/link 색에 오버라이드되어 초록 배경 위
 *     검정 h1 + 비가시 초록 링크로 렌더 → hero 내부는 흰색 강제.
 * (2) geekdoc flex 프레임 안에서 .gdoc-page가 좁게 잡혀 1280px 그리드가
 *     656px로 압축 → cw-toc 제거(baseof)와 함께 페이지 컨테이너를 flex:1로.
 * ==========================================================================*/
.doc-hero h1.doc-h1,
.doc-hero .crumb,
.doc-hero .crumb a,
.doc-hero .crumb span,
.doc-hero .doc-cat,
.doc-hero .doc-deck,
.doc-hero .doc-byline,
.doc-hero .doc-author strong { color: #fff !important; }
main.docs-main > .gdoc-page { flex: 1 1 auto; min-width: 0; max-width: none; }
/* (3) grid 1fr 트랙 min-width:auto 수축 불가 → 컨테이너보다 넓어져 rail이
 *     뷰포트 밖으로 overflow. minmax(0,1fr) + 자식 min-width:0으로 교정. */
.doc-layout { grid-template-columns: 220px minmax(0, 1fr) 280px; }
.doc-layout > * { min-width: 0; }
@media (max-width: 1199px) {
  .doc-layout { grid-template-columns: 200px minmax(0, 1fr); }
}
/* (4) geekdoc .container 1312px 제한이 3-컬럼(고정 596px)과 충돌해 본문이
 *     ~244px로 압축 → 문서 상세가 있는 main 프레임 폭을 확장. */
main.docs-main { max-width: 1720px; }
@media (max-width: 1500px) {
  .doc-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; }
  .doc-layout .rail { display: none; }
}

/* ============================================================================
 * Redesign (2026-07-21) — doc-hero 컴팩트 밴드 + 마스코트, 2-단 본문
 * (구 3-컬럼: 좌 TOC | 본문 | rail → 2단: 본문 | 우측 TOC. rail 카드 삭제) */
.doc-hero--compact { padding: 28px 40px 32px; }
.doc-hero--compact .doc-hero-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.doc-hero--compact .doc-hero-text { min-width: 0; }
.doc-hero--compact .crumb { margin-bottom: 10px; }
.doc-hero--compact .doc-cat { margin-bottom: 10px; }
.doc-hero--compact .doc-h1 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.doc-hero--compact .doc-meta-strip { margin-left: 0; opacity: 0.85; color: #fff; }
.doc-hero-mascot {
  flex: 0 0 auto; width: 110px; height: 110px; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
}
@media (max-width: 1023px) {
  .doc-hero--compact { padding: 20px 20px 24px; }
  .doc-hero-mascot { width: 80px; height: 80px; }
}
/* 2-단: 본문 | TOC(260px). 이전 핫픽스의 3-컬럼/2-컬럼 트랙 정의를 덮는다. */
.doc-layout.doc-layout--2col,
main.docs-main .doc-layout--2col { grid-template-columns: minmax(0, 1fr) 260px; }
@media (max-width: 1500px) {
  .doc-layout.doc-layout--2col { grid-template-columns: minmax(0, 1fr) 240px; gap: 36px; }
}
@media (max-width: 1023px) {
  .doc-layout.doc-layout--2col { grid-template-columns: 1fr; }
  .doc-layout--2col .docs-toc { display: none; }
}

/* ============================================================================
 * v3 — Claude Design handoff ("01 Docs Home" header + "03 Doc Detail" shell)
 * ----------------------------------------------------------------------------
 * Milestone 1: common shell (header / left sidebar / right TOC rail) and the
 * document-detail page. Recreated from the handoff HTML prototypes as CLASSES
 * (the prototypes ship inline styles + DC bindings; none of that is copied).
 *
 * Load order: this file is last in head/custom.html, so same-specificity rules
 * here beat moai-brand / moai-design / moai-docs-theme. Where those files use
 * !important (header background, code-card chrome) the rules below match with a
 * higher-specificity selector plus !important.
 *
 * LIGHT THEME ONLY — the handoff's dark-mode tokens and its dark-mode toggle
 * button are intentionally NOT ported. No dark-theme attribute selector belongs
 * in this stylesheet.
 *
 * Mono discipline: --cw-mono (JetBrains Mono) dresses UI mono surfaces only —
 * header chips, kbd, eyebrows, meta lines, code-card labels. Code BODIES keep
 * var(--font-code) (Goorm Sans Code) because the docs carry Korean comments
 * inside code blocks and JetBrains Mono has no Hangul coverage.
 * ========================================================================== */

:root {
  --cw-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ───────────────────────── Header (sticky 64px) ───────────────────────── */

.gdoc-header.cw-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: #265240 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: #ffffff;
}
.cw-hdr-inner {
  max-width: 1440px;
  height: 64px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* brand lockup — mascot logo + wordmark + DOCS chip */
.cw-hdr-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.cw-hdr-brand,
.cw-hdr-brand:hover,
.cw-hdr-brand:focus { text-decoration: none !important; }
.cw-hdr-logo { height: 26px; width: auto; display: block; }
.cw-hdr-wordmark { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: #ffffff; line-height: 1; }
.cw-hdr-name { font-size: 15px; font-weight: 800; letter-spacing: -0.05em; color: #060606; }
.cw-hdr-chip {
  font-family: var(--cw-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
}

/* centred search trigger */
.cw-hdr-searchwrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
.cw-hdr-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #d1d1d1;
  border-radius: 8px;
  background: #ffffff;
  color: #757575;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: -0.025em;
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-hdr-search:hover { border-color: #9fa0a0; color: #565656; }
.cw-hdr-search-txt { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-hdr-kbd {
  font-family: var(--cw-mono);
  font-size: 11px;
  color: #757575;
  background: #f4f4f4;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 1px 6px;
}

/* right cluster — version pill + language menu + GitHub */
.cw-hdr-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.cw-hdr-ver {
  font-family: var(--cw-mono);
  font-size: 11px;
  font-weight: 600;
  color: #3a3a3a;
  border: 1px solid #d1d1d1;
  background: #ffffff;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.cw-hdr-ver:hover { background: #ffffff; border-color: #9fa0a0; text-decoration: none; }

.cw-hdr-lang { position: relative; }
.cw-hdr-langbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d1d1d1;
  border-radius: 8px;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  color: #3a3a3a;
  cursor: pointer;
  list-style: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-hdr-langbtn::-webkit-details-marker { display: none; }
.cw-hdr-langbtn::marker { content: ""; }
.cw-hdr-langbtn:hover { border-color: #9fa0a0; }
.cw-hdr-langchev { transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.cw-hdr-lang[open] .cw-hdr-langchev { transform: rotate(180deg); }
.cw-hdr-langpop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 156px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #d1d1d1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(6, 6, 6, 0.10);
}
.cw-hdr-langitem {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #3a3a3a;
  white-space: nowrap;
}
.cw-hdr-langitem:hover { background: #f4f4f4; color: #060606; text-decoration: none; }
.cw-hdr-langitem.active { color: #3d7d5f; background: rgba(61, 125, 95, 0.08); font-weight: 700; }

.cw-hdr-gh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d1d1d1;
  border-radius: 8px;
  background: #ffffff;
  color: #3a3a3a;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-hdr-stars { white-space: nowrap; font-size: 13px; font-weight: 700; color: #060606; }
.cw-hdr-gh:hover { border-color: #9fa0a0; color: #060606; text-decoration: none; }

/* ─────────────── Shell — 260px | body | 220px, hairline separators ───────────────
   baseof.html renders `main.docs-main > (aside.gdoc-nav, div.gdoc-page[, aside.cw-toc])`.
   The third track is `auto` so it collapses to 0 on document-detail pages, where
   the rail is rendered inside .gdoc-page by single.html instead. */

main.container.docs-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  gap: 0;
  align-items: start;
}
main.docs-main > .gdoc-nav {
  width: auto;
  flex: none;
  min-width: 0;
  position: sticky;
  top: 64px;
  align-self: start;
  min-height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 28px 20px 40px 0;
  border-right: 1px solid #e6e6e6;
}
main.docs-main > .gdoc-page {
  flex: none;
  min-width: 0;
  max-width: none;
  padding: 36px 48px 96px;
}
main.docs-main > .cw-toc {
  width: 220px;
  flex: none;
  position: sticky;
  top: 64px;
  align-self: start;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin-left: 0;
  padding: 36px 0 40px 20px;
  border-left: 1px solid #e6e6e6;
}
/* document detail supplies its own right rail → drop the page's right gutter so
   the rail's hairline lands on the container edge. Progressive enhancement: a
   browser without :has() simply keeps the 48px gutter. */
main.docs-main > .gdoc-page:has(> .doc-single) { padding-right: 0; }

/* ───────────────────────── Left sidebar (menu.html) ───────────────────────── */

.cw-side--v3 { display: flex; flex-direction: column; gap: 0; }
.cw-side--v3 .cw-side-section { border-radius: 0; margin-bottom: 24px; }
.cw-side--v3 .cw-side-head {
  padding: 0 0 8px 12px;
  border-radius: 0;
  background: none;
  font-family: var(--cw-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #060606;
}
.cw-side--v3 .cw-side-head:hover { background: none; color: #565656; }
.cw-side--v3 .cw-side-head:hover .cw-side-title { color: #565656; }
.cw-side--v3 .cw-side-title { gap: 6px; color: inherit; }
.cw-side--v3 .cw-side-ico,
.cw-side--v3 .cw-side-section[open] .cw-side-ico { width: 12px; height: 12px; color: inherit; }
.cw-side--v3 .cw-side-chev { width: 11px; height: 11px; color: #b5b5b5; }
.cw-side--v3 .cw-side-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
}
.cw-side--v3 .cw-side-list li { margin: 0; }
.cw-side--v3 .cw-side-link {
  display: block;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.5;
  color: #565656;
  background: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-side--v3 .cw-side-link::before { display: none; }
.cw-side--v3 .cw-side-link:hover { color: #060606; background: #ffffff; text-decoration: none; }
.cw-side--v3 .cw-side-link.active { color: #060606; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); font-weight: 700; border-left: 2px solid #3d7d5f; }
.cw-side--v3 .cw-side-count { color: #9fa0a0; font-family: var(--cw-mono); font-size: 10.5px; }
.cw-side--v3 .cw-side-badge,
.cw-side--v3 .cw-side-new {
  font-family: var(--cw-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #3d7d5f;
  background: rgba(61, 125, 95, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
}

/* ───────────────────── Right rail — ON THIS PAGE (doc-rail.html) ───────────────────── */

.doc-single .docs-toc.doc-rail {
  position: sticky;
  top: 64px;
  align-self: start;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 0 0 40px 20px;
  border-left: 1px solid #e6e6e6;
}
.doc-rail .docs-toc-h {
  font-family: var(--cw-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fa0a0;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}
.doc-rail .docs-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.doc-rail .docs-toc-list li { margin: 0; }
.doc-rail .docs-toc-list a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid #e6e6e6;
  border-radius: 0;
  background: none;
  font-size: 12.5px;
  letter-spacing: -0.025em;
  line-height: 1.5;
  color: #757575;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.doc-rail .docs-toc-list a:hover { color: #060606; background: none; border-radius: 0; text-decoration: none; }
.doc-rail .docs-toc-list a.active { color: #3d7d5f; border-left-color: #3d7d5f; font-weight: 700; }
.doc-rail-links {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-rail-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #757575;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.doc-rail-link:hover { color: #3d7d5f; text-decoration: none; }
.doc-rail-link svg { flex: none; }

/* ─────────────────── Document detail — article chrome (single.html) ─────────────────── */

main.docs-main .doc-layout--2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 0;
  align-items: start;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* reset the docs-index card `.doc-body` skin that also matches this article */
.doc-single .doc-body {
  display: block;
  min-width: 0;
  max-width: 720px;
  padding: 0;
  flex: none;
}

.doc-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #757575;
  margin-bottom: 20px;
}
.doc-crumb a { color: #757575; }
.doc-crumb a:hover { color: #060606; text-decoration: none; }
.doc-crumb .sep { color: #b5b5b5; }
.doc-crumb .cur { color: #060606; font-weight: 600; }

.doc-single .doc-h1 {
  margin: 0 0 14px;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.12;
  color: #060606;
  max-width: none;
}
.doc-lede {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.025em;
  color: #565656;
  text-wrap: pretty;
}
.doc-metaline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--cw-mono);
  font-size: 11.5px;
  color: #9fa0a0;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 20px;
  margin-bottom: 32px;
}
.doc-metaline .dot { color: #b5b5b5; }
.doc-metaline a { color: #757575; }
.doc-metaline a:hover { color: #3d7d5f; text-decoration: none; }

.doc-single .gdoc-markdown h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.3;
  color: #060606;
  margin: 40px 0 14px;
  scroll-margin-top: 88px;
}
.doc-single .gdoc-markdown h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #060606;
  margin: 28px 0 10px;
  scroll-margin-top: 88px;
}
.doc-single .gdoc-markdown p,
.doc-single .gdoc-markdown li {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -0.025em;
  color: #3a3a3a;
}

/* PREV / NEXT — baseof.html renders .cw-pg-nav (menu-order traversal); this is
   the handoff card skin for it, constrained to the article column. */
.doc-single ~ .cw-pg-nav {
  max-width: 720px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 48px 0 0;
  border-top: 1px solid #e6e6e6;
  padding-top: 24px;
}
.doc-single ~ .cw-pg-nav .cw-pg-card {
  gap: 4px;
  min-height: 0;
  padding: 14px 18px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.doc-single ~ .cw-pg-nav .cw-pg-card:hover {
  border-color: #3d7d5f;
  transform: none;
  box-shadow: none;
}
.doc-single ~ .cw-pg-nav .cw-pg-card .lbl {
  font-family: var(--cw-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #9fa0a0;
}
.doc-single ~ .cw-pg-nav .cw-pg-card .ttl {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #060606;
}

/* ───────────────────── Code block (render-codeblock.html) ─────────────────────
   `.code-card` is kept for the copy handler + Chroma rules; `--v3` raises
   specificity over the legacy macOS traffic-light skin in moai-docs-theme.css.
   Re-pointing the --term-* customs also re-colours every inherited !important
   rule that reads them. */

.gdoc-markdown .code-card.code-card--v3 {
  --term-bg: #141414;
  --term-head: #242424;
  --term-fg: #e6e6e6;
  --term-dim: #9fa0a0;
  --term-divider: rgba(255, 255, 255, 0.07);
  position: relative;
  margin: 24px 0;
  border: 0 !important;
  border-radius: 12px !important;
  background: #141414 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.gdoc-markdown .code-card.code-card--v3 .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #242424;
  padding: 8px 14px;
  border-bottom: 0;
}
.gdoc-markdown .code-card.code-card--v3 .code-head-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gdoc-markdown .code-card.code-card--v3 .code-traffic { display: inline-flex; gap: 6px; flex: none; }
.gdoc-markdown .code-card.code-card--v3 .code-traffic i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.gdoc-markdown .code-card.code-card--v3 .code-traffic i:nth-child(1) { background: #ff5f57; }
.gdoc-markdown .code-card.code-card--v3 .code-traffic i:nth-child(2) { background: #febc2e; }
.gdoc-markdown .code-card.code-card--v3 .code-traffic i:nth-child(3) { background: #28c840; }
.gdoc-markdown .code-card.code-card--v3 .code-head-lang {
  font-family: var(--cw-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #9fa0a0;
}
.gdoc-markdown .code-card.code-card--v3 .copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #9fa0a0 !important;
  font-family: var(--cw-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.gdoc-markdown .code-card.code-card--v3 .copy-btn:hover {
  color: #e6e6e6 !important;
  background: transparent !important;
  border: none !important;
}
.gdoc-markdown .code-card.code-card--v3 .copy-btn.copied {
  color: #3d7d5f !important;
  background: transparent !important;
  border: none !important;
}
.gdoc-markdown .code-card.code-card--v3 .copy-btn svg { width: 12px; height: 12px; flex: none; }
.gdoc-markdown .code-card.code-card--v3 pre {
  margin: 0;
  padding: 16px 18px !important;
  background: #141414 !important;
  color: #e6e6e6 !important;
  font-family: var(--font-code) !important;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}
.gdoc-markdown .code-card.code-card--v3 .chroma code,
.gdoc-markdown .code-card.code-card--v3 .chroma .line,
.gdoc-markdown .code-card.code-card--v3 .chroma .cl,
.gdoc-markdown .code-card.code-card--v3 pre code {
  color: #e6e6e6 !important;
  font-weight: 500 !important;
  font-family: var(--font-code) !important;
  background: transparent !important;
}
.gdoc-markdown .code-card.code-card--v3 ::-webkit-scrollbar { height: 10px; width: 10px; background: #141414; }
.gdoc-markdown .code-card.code-card--v3 ::-webkit-scrollbar-thumb { background: rgba(230, 230, 230, 0.20); border-radius: 5px; }
.gdoc-markdown .code-card.code-card--v3 ::-webkit-scrollbar-track { background: #141414; }

/* ───────────────────────────── Responsive ─────────────────────────────
   Mirrors the pre-existing intent: drop the right rail on tablet, collapse to a
   single column on mobile. (Below geekdoc's 41rem breakpoint the sidebar was
   already pushed off-canvas with no toggle; here it is hidden outright so the
   grid track does not squeeze the body.) */

@media (max-width: 1200px) {
  main.container.docs-main { grid-template-columns: 260px minmax(0, 1fr); }
  main.docs-main > .cw-toc { display: none; }
  main.docs-main .doc-layout--2col { grid-template-columns: minmax(0, 1fr); }
  .doc-single .docs-toc.doc-rail { display: none; }
  main.docs-main > .gdoc-page:has(> .doc-single) { padding-right: 48px; }
}
@media (max-width: 900px) {
  main.container.docs-main { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
  main.docs-main > .gdoc-nav { display: none; }
  main.docs-main > .gdoc-page,
  main.docs-main > .gdoc-page:has(> .doc-single) { padding: 28px 0 64px; }
  .cw-hdr-inner { padding: 0 16px; gap: 10px; }
  .cw-hdr-name,
  .cw-hdr-search-txt,
  .cw-hdr-kbd,
  .cw-hdr-langname { display: none; }
  .cw-hdr-search { max-width: 36px; padding: 0; justify-content: center; }
  .doc-single .doc-h1 { font-size: 30px; }
  .doc-single ~ .cw-pg-nav { grid-template-columns: 1fr; }
}

/* ============================================================================
 * v3 — Claude Design handoff — Milestone 2
 * ("01 Docs Home" landing · "02 Getting Started" section index · "05 Search"
 *  empty-state polish · "06 Not Found" 404)
 * ----------------------------------------------------------------------------
 * Recreated from the handoff HTML prototypes as CLASSES. The prototypes ship
 * inline styles + DC bindings + `style-hover` attributes; none of that markup
 * is copied — the visual output is reproduced here and `style-hover` is
 * converted to real `:hover` rules.
 *
 * This file loads LAST in head/custom.html, so same-specificity rules here beat
 * moai-brand / moai-design / moai-docs-theme.
 *
 * LIGHT THEME ONLY — no dark-theme attribute selector belongs here. Ink is
 * #060606 (never pure black). Motion 150ms cubic-bezier(0.4,0,0.2,1); mascots
 * may use the bounce easing; prefers-reduced-motion respected.
 * ========================================================================== */

/* ───────────────────────── Home landing (standalone) ───────────────────────── */

.cw-home { min-height: 100vh; background: #f4f4f4; }
.cw-home-main { max-width: 1024px; margin: 0 auto; padding: 0 24px 96px; }

/* Hero — text column + 300px mascot column */
.cw-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: center;
  padding: 72px 0 56px;
}
.cw-home-eyebrow {
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #3d7d5f;
  margin-bottom: 18px;
}
.cw-home-h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.6vw, 48px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.1;
  color: #060606;
}
.cw-home-h1 .clay,
.cw-home-h1 .accent { color: #3d7d5f; display: inline; }
.cw-home-lede {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.025em;
  color: #565656;
  max-width: 520px;
  text-wrap: pretty;
}
.cw-home-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cw-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-home-btn svg { width: 18px; height: 18px; flex: none; }
.cw-home-btn--primary { background: #3d7d5f; color: #ffffff; }
.cw-home-btn--primary:hover {
  color: #ffffff;
  box-shadow: 0 4px 32px rgba(61, 125, 95, 0.35);
  text-decoration: none;
}
.cw-home-btn--ghost {
  background: #ffffff;
  border-color: #d1d1d1;
  color: #060606;
  font-weight: 600;
}
.cw-home-btn--ghost:hover {
  background: #3d7d5f;
  border-color: #3d7d5f;
  color: #ffffff;
  text-decoration: none;
}
.cw-home-install {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  max-width: 520px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: #141414;
  box-shadow: none;
  outline: none;
  color: #e6e6e6;
  font-family: var(--cw-mono);
  font-size: 13px;
}
.cw-footer { background: #265240 !important; color: #ffffff; border-top: 0; }
.cw-footer-inner { max-width: 1440px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; gap: 18px; }
.cw-footer-main { flex: 1; min-width: 0; }
.cw-footer-title { font-weight: 700; font-size: 13px; letter-spacing: -0.02em; color: #ffffff; }
.cw-footer-links { font-size: 11px; line-height: 1.6; color: rgba(255,255,255,0.75); margin-top: 3px; }
.cw-footer-links a { color: rgba(255,255,255,0.9); }
.cw-footer-links a:hover { color: #ffffff; }
.cw-footer-tag { font-size: 10px; line-height: 1.5; color: rgba(255,255,255,0.6); text-align: right; white-space: nowrap; }
.cw-footer-mono { font-family: var(--cw-mono); }
.cw-footer-dash { color: rgba(255,255,255,0.5); }
.cw-footer-logo img { height: 34px; width: auto; display: block; }
.cw-home-install .dollar { color: #3d7d5f; }
.cw-home-install code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  color: #e6e6e6;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  /* The global `code` rule in moai-brand.css (FROZEN) paints a 1px border and
     a radius, which renders as a pill drawn around the install command inside
     the dark chip. background and padding were already reset here; the border
     was not. moai-docs-layout.css loads after moai-brand.css, so clearing it
     here leaves the frozen file untouched. */
  border: 0;
  border-radius: 0;
}
.cw-home-install svg { flex: none; }
.cw-home-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: #9fa0a0; cursor: pointer; padding: 2px; border-radius: 4px; transition: color 150ms; }
.cw-home-copy:hover { color: #e6e6e6; }
.cw-home-copy.copied { color: #28c840; }
.cw-home-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cw-home-hero-aside .mascot { width: 260px; }
.cw-home-cap {
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #9fa0a0;
  text-align: center;
}

/* Feature cards — 3-up */
.cw-home-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 8px 0 48px;
}
.cw-feat-card {
  background: #ffffff;
  border: 1px solid #d1d1d1;
  border-radius: 16px;
  padding: 24px;
}
.cw-feat-idx {
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #3d7d5f;
  margin-bottom: 10px;
}
.cw-feat-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #060606;
}
.cw-feat-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: -0.025em;
  color: #565656;
}
.cw-feat-tags { margin-top: 14px; font-size: 13px; color: #9fa0a0; }
.cw-feat-tags a { color: #3d7d5f; }
.cw-feat-tags a:hover { color: #316750; text-decoration: none; }

/* v3.1 release banner — Kanban Mode. Full-width card between hero and feats.
   Reuses the .cw-feat-card visual language (white / 1px #d1d1d1 / radius 16)
   so no new design token is introduced. LIGHT theme only, per §17.1. */
.cw-home-kanban {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d1d1;
  border-radius: 16px;
  padding: 24px;
  margin: 8px 0 24px;
}
.cw-home-kanban-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cw-home-kanban-eyebrow .cw-feat-idx { margin-bottom: 0; }
.cw-home-kanban h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #060606;
}
.cw-home-kanban p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: -0.025em;
  color: #565656;
}
.cw-home-kanban-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
}
@media (max-width: 860px) {
  .cw-home-kanban { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Section grid — real menu-driven doc structure */
.cw-home-sections { padding: 16px 0 0; }
.cw-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.cw-sec-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #060606;
}
.cw-sec-meta { font-family: var(--cw-mono); font-size: 12px; color: #757575; white-space: nowrap; }
.cw-sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cw-sec-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 18px 20px;
  color: #060606;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-sec-card:hover {
  transform: translateY(-2px);
  border-color: #3d7d5f;
  box-shadow: 0 12px 24px rgba(9, 17, 15, 0.06);
  color: #060606;
  text-decoration: none;
}
.cw-sec-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cw-sec-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.05em; color: #060606; }
.cw-sec-card-en { font-family: var(--cw-mono); font-size: 10px; letter-spacing: 0.08em; color: #9fa0a0; text-transform: uppercase; white-space: nowrap; }
.cw-sec-card-desc { font-size: 12.5px; line-height: 1.55; letter-spacing: -0.025em; color: #565656; }

/* Book CTA band */
.cw-home-book {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 32px;
  background: #ffffff;
  border: 1px solid #d1d1d1;
  border-radius: 24px;
  padding: 36px 40px;
}
.cw-home-book .mascot { width: 120px; flex: none; }
.cw-book-text { flex: 1; min-width: 0; }
.cw-book-eyebrow {
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #3d7d5f;
  margin-bottom: 8px;
}
.cw-home-book h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #060606;
}
.cw-home-book p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.025em;
  color: #565656;
}
.cw-book-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1.5px solid #060606;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #060606;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-book-cta:hover { background: #060606; color: #ffffff; text-decoration: none; }

@media (max-width: 860px) {
  .cw-home-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px 0 40px; }
  .cw-home-hero-aside { order: -1; flex-direction: row; justify-content: flex-start; gap: 16px; }
  .cw-home-hero-aside .mascot { width: 132px; }
  .cw-home-feats { grid-template-columns: 1fr; }
  .cw-sec-grid { grid-template-columns: 1fr 1fr; }
  .cw-home-book { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
}
@media (max-width: 560px) {
  .cw-sec-grid { grid-template-columns: 1fr; }
  .cw-sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ───────────────────── Section index (list.html, in shell) ───────────────────── */

.cw-sec-intro { margin-bottom: 32px; }
.cw-sec-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #757575;
  margin-bottom: 20px;
}
.cw-sec-crumb a { color: #757575; }
.cw-sec-crumb a:hover { color: #060606; text-decoration: none; }
.cw-sec-crumb .sep { color: #b5b5b5; }
.cw-sec-crumb .cur { color: #060606; font-weight: 600; }
.cw-sec-intro-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.cw-sec-eyebrow {
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #3d7d5f;
  margin-bottom: 12px;
}
.cw-sec-h1 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.1;
  color: #060606;
}
.cw-sec-intro .mascot { width: 120px; flex: none; margin-bottom: -8px; }
.cw-sec-card-chev { flex: none; color: #9fa0a0; }
.cw-sec-lede {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.025em;
  color: #565656;
  max-width: 640px;
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .cw-sec-intro .mascot { display: none; }
}

/* ───────────────────────── 404 (standalone) ───────────────────────── */

.cw-404 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px 96px;
}
.cw-404-num {
  font-family: var(--cw-mono);
  font-size: clamp(80px, 14vw, 150px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #e6e6e6;
  user-select: none;
}
.cw-404-num .mid { color: #3d7d5f; }
.cw-404 .mascot {
  width: 200px;
  margin: -36px 0 20px;
  animation: cw-404-drop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cw-404-drop {
  0%   { transform: translateY(-14px); opacity: 0; }
  60%  { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(0); }
}
.cw-404-title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #060606;
}
.cw-404-text {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.025em;
  color: #565656;
  max-width: 440px;
  text-wrap: pretty;
}
.cw-404-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cw-404-cta .cw-home-btn--ghost:hover {
  background: #ffffff;
  border-color: #060606;
  color: #060606;
}
.cw-404-cta .cw-home-btn--ghost .cw-hdr-kbd { pointer-events: none; }
.cw-404-links { display: flex; gap: 20px; margin-top: 36px; font-size: 13px; }
.cw-404-links a { color: #3d7d5f; }
.cw-404-links a:hover { color: #316750; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .cw-404 .mascot { animation-duration: 1ms; }
}

/* ───────────────── Search modal — design polish (over FROZEN brand base) ─────────────────
   The modal chrome, panel, input, result rows + green hover already live in
   moai-brand.css (.cw-search-modal*). These rules only nudge it toward the
   handoff "05 Search" screen: green magnifier, 16px radius, and a mascot-bearing
   empty state. The modal markup + JS in site-header.html are NOT touched. */
.cw-search-modal__panel { border-radius: 16px; }
.cw-search-modal__head svg { color: #3d7d5f; }
.cw-search-modal__hint {
  background-image: url("mascots/MoAI-Mascot-Searching.png");
  background-repeat: no-repeat;
  background-position: center 24px;
  background-size: 96px auto;
  padding-top: 128px;
  font-family: var(--cw-mono);
  letter-spacing: 0.02em;
  color: #9fa0a0;
}
.cw-search-modal__panel::after {
  content: "↑↓ · ↵ · esc · KO / EN / JA / ZH";
  flex: none;
  padding: 10px 20px;
  border-top: 1px solid #e6e6e6;
  background: #f4f4f4;
  font-family: var(--cw-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #9fa0a0;
}