/* Docs chrome v4 — sidebar · centered header nav · cover cards · rail TOC.
   Loaded after docs-reorg.css. Specimens and live demos keep their own styles. */
:root { --hh: 76px; --side-w: 256px; --toc-w: 232px; --docs-content: 900px; --pill: color-mix(in srgb, var(--ink) 6%, transparent); --pill-strong: color-mix(in srgb, var(--ink) 9%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pill: rgba(255,255,255,.07); --pill-strong: rgba(255,255,255,.11); } }
:root[data-theme="dark"] { --pill: rgba(255,255,255,.07); --pill-strong: rgba(255,255,255,.11); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Header: the shared top bar lives in docs-bar.css (one component for every guide page). ── */

/* ── Shell: sidebar · content · TOC ── */
.shell { grid-template-columns: var(--side-w) minmax(0,1fr) var(--toc-w); max-width: none; }
.shell main { padding: 56px 48px 40px; }
.shell .page, .shell .page.content-max { max-width: var(--docs-content); margin: 0 auto; }
.shell[data-page="overview"] { grid-template-columns: minmax(0,1fr); }
.shell[data-page="overview"] .docs-side { display: none; }
.shell[data-page="overview"] .page { max-width: 1180px; }

.docs-side { position: sticky; top: var(--hh); height: calc(100dvh - var(--hh)); overflow-y: auto; padding: 20px 12px 40px; scrollbar-width: thin; }
.docs-side-group { display: grid; gap: 2px; }
.docs-side-group[hidden] { display: none; }
.docs-side-title { display: none; }
.docs-side a { display: flex; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.docs-side a:hover { background: var(--pill); }
.docs-side a.active { background: var(--pill); font-weight: 600; }

/* ── Rail TOC ── */
.toc { margin-top: 0; padding: 72px 16px 24px 0; border-left: 0; top: var(--hh); height: calc(100dvh - var(--hh)); }
.toc-t { font-size: 11px; font-weight: 500; color: var(--ink-soft); margin: 0 0 12px; }
.toc ul { border-left: 1px solid var(--hairline); }
.toc li { margin: 0; }
.toc li a { padding: 6px 0 6px 12px; margin-left: -1px; border-left: 2px solid transparent; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.toc li a:hover { color: var(--ink); }
.toc li a.active { color: var(--ink); font-weight: 500; border-left-color: var(--ink); }

/* ── Page heading ── */
.page .docs-back, .page > .crumb { display: inline-flex; min-height: 0; margin: 0 0 20px; font-size: 14px; font-weight: 400; color: var(--ink); text-decoration: none; }
.page .docs-back:hover { text-decoration: underline; }
.page h1 { font-size: clamp(36px, 4.2vw, 56px); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 20px; }
.page .desc { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 720px; margin-bottom: 48px; }
.page h2 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; margin: 72px 0 16px; }
.page h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.page > p, .page > ul, .page > ol { font-size: 16px; line-height: 1.8; }

/* ── Cover cards (index pages + home directory) ── */
.page .docs-index-list, .page .docs-topic-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px 24px; border-top: 0; margin-top: 40px; }
.page .docs-index-list a, .page .docs-topic-list a { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; border-bottom: 0; color: var(--ink); text-decoration: none; }
.page .docs-index-list .index-number, .page .docs-topic-list .index-number, .page .docs-index-list a > b, .page .docs-topic-list a > b { display: none; }
.docs-cover { display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; margin-bottom: 18px; background: var(--cv-bg); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.docs-cover svg { display: block; width: 100%; height: 100%; }
.page .docs-index-list a:hover .docs-cover, .page .docs-topic-list a:hover .docs-cover { transform: translateY(-3px); }
.page .docs-index-list a:hover strong, .page .docs-topic-list a:hover strong { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.page .docs-index-list strong, .page .docs-topic-list strong { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.page .docs-index-list small, .page .docs-topic-list small { font-size: 13.5px; margin-top: 6px; }

/* Home: centered hero, then the directory as cards. */
.page.docs-home { display: block; max-width: 1180px; }
.shell .page[hidden] { display: none !important; }
.docs-home .docs-home-intro { text-align: center; padding: 72px 0 64px; }
.docs-home .docs-home-intro .crumb { display: none; }
.docs-home h1 { font-family: "LINE Seed Sans App", "Pretendard Variable", Pretendard, sans-serif; font-size: clamp(48px, 8vw, 104px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; white-space: normal; max-width: none; margin: 0 0 24px; }
.docs-home .desc { margin: 0 auto 36px; font-size: 17px; max-width: 560px; }
.docs-home .docs-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.docs-home .docs-shortcuts h2 { display: none; }
.docs-home .docs-shortcuts a { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--pill); font-size: 14px; font-weight: 500; text-decoration: none; }
.docs-home .docs-shortcuts a:hover { background: var(--pill-strong); color: var(--ink); text-decoration: none; }
.docs-home .docs-home-directory h2 { font-size: 26px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.025em; }
.docs-home .docs-topic-list { margin-top: 28px; }

/* ── Responsive ── */
@media (max-width: 1279px) {
  .shell { grid-template-columns: var(--side-w) minmax(0,1fr); }
  .toc { display: none; }
  .docs-mobile-toc:not([hidden]) { display: block; margin: 0 0 32px; padding: 0 0 16px; border-bottom: 1px solid var(--hairline); font-size: 13px; }
}
@media (max-width: 1080px) {
  .page .docs-index-list, .page .docs-topic-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0,1fr); }
  .docs-side { position: static; height: auto; padding: 12px 16px 0; overflow: hidden; min-width: 0; }
  .shell > main { min-width: 0; }
  .docs-side-group { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .docs-side-group::-webkit-scrollbar { display: none; }
  .docs-side a { flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--pill); font-size: 13.5px; white-space: nowrap; }
  .docs-side a.active { background: var(--ink); color: var(--bg); }
  .shell main { padding: 32px 16px 32px; }
}
@media (max-width: 640px) {
  .page .docs-index-list, .page .docs-topic-list { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .page h1 { font-size: 34px; }
  .page h2 { font-size: 22px; margin-top: 52px; }
  .docs-home .docs-home-intro { padding: 32px 0 40px; }
  .docs-home h1 { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { .docs-cover, .docs-side a { transition: none; } .page a:hover .docs-cover { transform: none; } }
@media (forced-colors: active) { .docs-side a.active { outline: 2px solid Highlight; } .toc li a.active { border-left-color: Highlight; } }

/* ── Touch 44: the guide's own controls (the floor itself is in docs-bar.css) ── */
.docs-home .docs-shortcuts a, .docs-side a, .docs-mobile-toc a, .toc li a { min-height: 44px; display: flex; align-items: center; }
.docs-mobile-toc li a { display: inline-flex; }
.page .docs-back, .page > .crumb { min-height: 44px; min-width: 44px; align-items: center; margin-bottom: 12px; }
@media (max-width: 900px) { .docs-side a { min-height: 44px; } }
/* Token-name copy buttons stay compact in their table cells; the press area is 44 tall. */
.cg-copy { position: relative; }
.cg-copy::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* Palette swatches wrap to keep 44 columns instead of shrinking below it. */
.dc-palette-row { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
.dc-option { flex-basis: 44px; width: 44px; height: 44px; }
.dc-palette-row .dc-option { width: 100%; }
/* Profile color chips keep the app token (42 wide + 8 gap); the radio reaches 44 into the gap. */
.profile-color-option input { inset: 0 -1px; width: calc(100% + 2px); }

/* ── No horizontal scroll down to 280 ── */
.page :is(p, li, dd, td, figcaption) { overflow-wrap: break-word; }
@media (max-width: 480px) { .page .ph-state-card { padding: 12px; } }
@media (max-width: 320px) { .page .ph-state-card { padding: 8px; } .ph-state-card .profile-handle { gap: 4px; } }
.sw-music-video-cases, .sw-service-preview { max-width: 100%; overflow-x: auto; }