/* ==========================================================
   スタイルガイドページ自体の見た目（ドキュメント用）
   ※ サービスのUIには使わない。UIは styles.css のみ。
   ========================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--font-family); font-size: var(--font-size-14); line-height: var(--line-height-body); color: var(--color-text); background: var(--color-bg-secondary); -webkit-text-size-adjust: 100%; }
a { color: var(--color-link); }
code, .sg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
:not(pre) > code { padding: 1px 6px; background: var(--color-gray-lighter); border-radius: var(--round-4); word-break: break-all; }

/* ---------- top bar ---------- */
.sg-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--spacing-16); height: 60px; padding: 0 var(--spacing-24); background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.sg-brand { display: flex; align-items: center; gap: var(--spacing-8); text-decoration: none; color: var(--color-primary); font-weight: var(--font-weight-bold); }
.sg-brand img { height: 22px; display: block; }
.sg-brand__fallback { font-size: var(--font-size-16); }
.sg-topbar__title { padding-left: var(--spacing-16); border-left: 1px solid var(--color-border); font-weight: var(--font-weight-bold); white-space: nowrap; }
.sg-topbar__meta { margin-left: auto; font-size: var(--font-size-12); color: var(--color-text-secondary); white-space: nowrap; }
.sg-menu-btn { display: none; margin-left: auto; }

/* ---------- layout ---------- */
.sg-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
.sg-nav { position: sticky; top: 60px; align-self: start; height: calc(100vh - 60px); overflow-y: auto; padding: var(--spacing-24) var(--spacing-16) var(--spacing-40); border-right: 1px solid var(--color-border); background: var(--color-white); }
.sg-nav__group { margin-bottom: var(--spacing-16); }
.sg-nav__title { display: block; margin: 0 0 var(--spacing-4); padding: 0 var(--spacing-8); font-size: var(--font-size-10); font-weight: var(--font-weight-bold); letter-spacing: .12em; color: var(--color-text-secondary); text-transform: uppercase; }
.sg-nav ul { list-style: none; margin: 0; padding: 0; }
.sg-nav a { display: block; padding: 5px var(--spacing-8); font-size: 13px; color: var(--color-text); text-decoration: none; border-radius: var(--round-4); }
.sg-nav a:hover { background: var(--color-bg-secondary); }
.sg-nav a.is-current { color: var(--color-primary); background: var(--color-primary-lightest); font-weight: var(--font-weight-bold); }
.sg-nav__num { display: inline-block; width: 22px; color: var(--color-text-secondary); font-size: 11px; }

.sg-main { min-width: 0; padding: var(--spacing-40) var(--spacing-40) 120px; }

/* ---------- hero ---------- */
.sg-hero { padding: var(--spacing-40); margin-bottom: var(--spacing-40); background: var(--color-primary); color: var(--color-white); border-radius: var(--round-16); position: relative; overflow: hidden; }
.sg-hero::after { content: ""; position: absolute; right: -60px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; border: 48px solid rgba(255,255,255,.12); }
.sg-hero__eyebrow { font-size: var(--font-size-12); font-weight: var(--font-weight-bold); letter-spacing: .16em; opacity: .85; }
.sg-hero h1 { margin: var(--spacing-8) 0 var(--spacing-16); font-size: 32px; line-height: 1.3; }
.sg-hero p { max-width: 640px; margin: 0; opacity: .95; }
.sg-hero__facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-24); }
.sg-hero__facts span { padding: var(--spacing-4) var(--spacing-16); font-size: var(--font-size-12); background: rgba(255,255,255,.16); border-radius: var(--round-full); }

/* ---------- part / section ---------- */
.sg-part { margin: 72px 0 var(--spacing-24); padding-bottom: var(--spacing-16); border-bottom: 2px solid var(--color-text); }
.sg-part__label { font-size: var(--font-size-12); font-weight: var(--font-weight-bold); letter-spacing: .16em; color: var(--color-primary); }
.sg-part h2 { margin: var(--spacing-4) 0 var(--spacing-4); font-size: 28px; line-height: 1.3; }
.sg-part p { margin: 0; color: var(--color-text-secondary); }

.sg-section { margin-bottom: var(--spacing-24); padding: var(--spacing-32); background: var(--color-white); border-radius: var(--round-16); box-shadow: var(--shadow-thin-clearly); }
.sg-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-8) var(--spacing-16); margin-bottom: var(--spacing-8); }
.sg-section__num { font-size: var(--font-size-12); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.sg-section h3 { margin: 0; font-size: var(--font-size-20); line-height: 1.4; }
.sg-section__class { margin-left: auto; }
.sg-desc { margin: 0 0 var(--spacing-24); color: var(--color-text-secondary); }
.sg-sub { margin: var(--spacing-32) 0 var(--spacing-8); font-size: var(--font-size-16); }
.sg-sub:first-of-type { margin-top: var(--spacing-8); }

/* preview + code */
.sg-demo { border: 1px solid var(--color-border); border-radius: var(--round-8); overflow: hidden; margin-bottom: var(--spacing-16); }
.sg-preview { padding: var(--spacing-24); background: var(--color-white); }
.sg-preview.is-gray { background: var(--color-bg-secondary); }
.sg-preview.is-sp { display: flex; justify-content: center; background: var(--color-bg-secondary); }
.sg-preview.is-sp > .sg-phone { width: 375px; max-width: 100%; background: var(--color-white); box-shadow: 0 0 0 1px var(--color-border); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16); }
.sg-row + .sg-row { margin-top: var(--spacing-16); }
.sg-stack { display: flex; flex-direction: column; gap: var(--spacing-16); }
.sg-code { position: relative; border-top: 1px solid var(--color-border); background: #1E2A33; }
.sg-code summary { display: flex; align-items: center; gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-16); font-size: var(--font-size-12); color: #C9D6DF; cursor: pointer; list-style: none; }
.sg-code summary::-webkit-details-marker { display: none; }
.sg-code summary .msi { font-size: 18px; transition: transform .15s; }
.sg-code[open] summary .msi { transform: rotate(90deg); }
.sg-code pre { margin: 0; padding: 0 var(--spacing-16) var(--spacing-16); overflow-x: auto; color: #E8F0F5; font-size: 12px; line-height: 1.6; white-space: pre; }
.sg-copy { margin-left: auto; padding: 2px 10px; font-family: inherit; font-size: 11px; color: #E8F0F5; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--round-4); cursor: pointer; }
.sg-copy.is-done { background: var(--color-green); border-color: var(--color-green); }

/* spec table */
.sg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sg-table th, .sg-table td { padding: 10px var(--spacing-8); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border-light); }
.sg-table th { font-size: var(--font-size-12); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); background: var(--color-bg-secondary); white-space: nowrap; }
.sg-table td:first-child code { white-space: nowrap; }
.sg-table td code { word-break: break-all; }
.sg-table-wrap { overflow-x: auto; }

/* live measure */
.sg-measure { display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-8); margin-top: var(--spacing-8); font-size: 11px; color: var(--color-text-secondary); }
.sg-measure span { padding: 0 6px; background: var(--color-bg-secondary); border-radius: var(--round-4); font-family: ui-monospace, Menlo, monospace; }
.sg-item { display: flex; flex-direction: column; align-items: flex-start; }
.sg-item .sg-measure { max-width: 240px; }
.sg-item__name { margin-top: var(--spacing-8); font-size: 11px; color: var(--color-text-secondary); font-family: ui-monospace, Menlo, monospace; }

/* color */
.sg-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--spacing-16); }
.sg-color { border: 1px solid var(--color-border-light); border-radius: var(--round-8); overflow: hidden; background: var(--color-white); }
.sg-color__chip { height: 88px; position: relative; }
.sg-color__aa { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; font-size: 10px; font-weight: var(--font-weight-bold); background: rgba(255,255,255,.9); color: var(--color-text); border-radius: var(--round-4); }
.sg-color__body { padding: var(--spacing-8) 12px 12px; }
.sg-color__name { font-weight: var(--font-weight-bold); font-size: 13px; }
.sg-color__hex { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.sg-color__var { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--color-text-secondary); word-break: break-all; }
.sg-color__use { margin-top: 4px; font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; }

/* type */
.sg-type-sample { font-weight: var(--font-weight-bold); line-height: 1.4; }

/* spacing / radius / shadow */
.sg-space-bar { height: 16px; background: var(--color-accent-light); border-left: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }
.sg-boxes { display: flex; flex-wrap: wrap; gap: var(--spacing-24); }
.sg-box { width: 112px; height: 80px; background: var(--color-primary-light); border: 1px solid var(--color-primary); }
.sg-box.is-shadow { width: 160px; height: 96px; background: var(--color-white); border: 0; border-radius: var(--round-8); }

/* icons */
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--spacing-8); }
.sg-icon { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4); padding: var(--spacing-16) var(--spacing-4); border: 1px solid var(--color-border-light); border-radius: var(--round-8); background: var(--color-white); cursor: pointer; font-family: inherit; color: var(--color-text); }
.sg-icon:hover { border-color: var(--color-primary); }
.sg-icon .msi { font-size: 28px; }
.sg-icon span:last-child { font-size: 10px; color: var(--color-text-secondary); font-family: ui-monospace, Menlo, monospace; }

/* callouts / rules */
.sg-note { display: flex; gap: var(--spacing-8); padding: 12px var(--spacing-16); margin: var(--spacing-16) 0; font-size: 13px; background: var(--color-primary-lightest); border-left: 4px solid var(--color-primary); border-radius: var(--round-4); }
.sg-note.is-warn { background: #FFFBE0; border-color: #E0B800; }
.sg-note .msi { flex-shrink: 0; font-size: 20px; }
.sg-note p { margin: 0; }
.sg-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
.sg-do, .sg-dont { border-radius: var(--round-8); overflow: hidden; border: 1px solid var(--color-border); }
.sg-do__label, .sg-dont__label { display: flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: var(--font-size-12); font-weight: var(--font-weight-bold); color: var(--color-white); background: var(--color-success); }
.sg-dont__label { background: var(--color-error); }
.sg-do__body, .sg-dont__body { padding: var(--spacing-16); }
.sg-do__body p, .sg-dont__body p { margin: var(--spacing-8) 0 0; font-size: 12px; color: var(--color-text-secondary); }
.sg-checklist { list-style: none; margin: 0; padding: 0; }
.sg-checklist li { display: flex; gap: var(--spacing-8); padding: 8px 0; border-bottom: 1px dashed var(--color-border); }
.sg-checklist .msi { color: var(--color-primary); font-size: 20px; }
.sg-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-8); counter-reset: flow; }
.sg-flow li { list-style: none; position: relative; padding: var(--spacing-16); background: var(--color-primary-lightest); border-radius: var(--round-8); font-size: 13px; }
.sg-flow li strong { display: block; margin-bottom: 4px; color: var(--color-primary); }
.sg-flow li::before { counter-increment: flow; content: "STEP " counter(flow); display: block; font-size: 10px; font-weight: var(--font-weight-bold); letter-spacing: .1em; color: var(--color-text-secondary); }
.sg-diff td:nth-child(2) { color: var(--color-text-secondary); }
.sg-diff td:nth-child(3) { font-weight: var(--font-weight-bold); }
.sg-footer { margin-top: 80px; font-size: var(--font-size-12); color: var(--color-text-secondary); text-align: center; }

/* ---------- SP ---------- */
@media (max-width: 960px) {
  .sg-layout { grid-template-columns: 1fr; }
  .sg-nav { position: fixed; top: 60px; left: 0; z-index: 30; width: 280px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-thin); }
  .sg-nav.is-open { transform: none; }
  .sg-menu-btn { display: inline-flex; }
  .sg-topbar__meta { display: none; }
  .sg-main { padding: var(--spacing-24) var(--spacing-16) 80px; }
}
@media (max-width: 767px) {
  .sg-topbar { padding: 0 var(--spacing-16); gap: var(--spacing-8); }
  .sg-topbar__title { padding-left: var(--spacing-8); font-size: 13px; }
  .sg-hero { padding: var(--spacing-24); }
  .sg-hero h1 { font-size: 24px; }
  .sg-part h2 { font-size: 22px; }
  .sg-section { padding: var(--spacing-16); }
  .sg-preview { padding: var(--spacing-16); }
  .sg-dodont { grid-template-columns: 1fr; }
  .sg-flow { grid-template-columns: 1fr 1fr; }
  .sg-section__class { margin-left: 0; }
  .sg-table { font-size: 12px; }
  .sg-table th, .sg-table td { padding: 8px 4px; }
  .sg-table td:first-child code, .sg-table td code { white-space: normal; word-break: normal; overflow-wrap: anywhere; font-size: 11px; }
}