/* kazuapps の 6 つのサイトの共通のデザイン。元は kazuapps/design/kz.css。各サイトへは scripts/sync-design.py で写す。
   設計：kazuapps/docs/superpowers/specs/2026-10-11-unified-sites-design.md
   AI使用状況のサイト（v1.0.76 の「計器盤」）の骨組みを受け継いだ：読む所は静かな紙の面、各サイトの一番上に 1 つだけアプリの色の夜の面。
   色の値はここに書かない。各サイトの kz-theme-<id>-<h>.css（family.json から作る）が変数を決める。
   写しの名前は中身から作る（kz-<h>.css）ので、中身を変えたら sync-design.py をかけるだけでよい（HTML の参照も直る）。
   上部の HTML の形は design/partials/header.html、全部の部品の見本は design/demo/index.html。 */

/* 色以外の決まり（6 つで同じ） */
:root {
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-num: ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 72.5rem;
  --measure: 42em;
  --header-height: 4.5rem;
}

/* ---- 土台 ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  line-break: strict;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.85 var(--font-sans);
  font-kerning: normal;
  /* 日本語は文節の途中で折り返さない。折り返す場所は <wbr>（scripts/tidy-site-text.py が入れる） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 途中で折り返さない語と、かっこを含む文節（tidy-site-text.py が囲む） */
.nw, .jw { white-space: nowrap; }
/* スマホの幅では、かっこを含む文節の囲みを外す（長い文節が横へはみ出した。最後のレビューの指摘）。
   それより広い幅では、長すぎる文節を点検（verify-app-site.py）で止めて、言い方を変える */
@media (max-width: 26.49rem) { .jw { white-space: normal; } }
/* 表の中も、列が細いので囲みを外す（囲んだ文節が列の最小の幅を押し広げ、表がはみ出した。AI使用状況の見た目の検査） */
.spec-table .jw { white-space: normal; }
/* かっこ・句読点と隣の 1 文字（tidy-site-text.py が jk で囲む）は、どの幅でも、表の中でも折らない。Safari は keep-all のときも
   「（」の直後や「）」「。」の直前で折った（2026-10-12 の Codex の点検。数文字なので、はみ出さない） */
.jk { white-space: nowrap; }
/* 英語のページ（Tonari）は、語の切れ目で普通に折る（keep-all のままだと、Safari が ’ やかっこの後ろで語を折った） */
html:lang(en) body { word-break: normal; }
img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem); line-height: 1.22; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); line-height: 1.3; font-weight: 800; }
h3 { font-size: 1.25rem; line-height: 1.45; font-weight: 700; }
p, li, dd { text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }
code { font-family: var(--font-code); font-size: 0.9em; overflow-wrap: anywhere; }
strong { font-weight: 700; }
/* 日付は途中で折らない（「2026 年 9 月／9 日」と折れた） */
time { white-space: nowrap; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 48rem) { .wrap { width: min(100% - 4rem, var(--wrap)); } }
.measure { max-width: var(--measure); }

.skip {
  position: absolute; z-index: 30; left: 1rem; top: 0.75rem;
  padding: 0.6rem 1rem; border-radius: 999px;
  background: var(--primary-fill); color: var(--primary-ink);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---- 上部 ---- */
.masthead { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead > .wrap { position: relative; }
.masthead-row { display: flex; align-items: center; gap: 1rem; min-height: var(--header-height); }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; min-width: 0;
  color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap;
}
/* 名前を隠したとき（幅 424px 以下）も、押せる幅を 44px 以上に保つ */
.masthead .wordmark { min-width: 2.75rem; }
/* 名前が入りきらないときは「…」で切る（ボタンの下に潜らせない） */
.masthead .wordmark span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wordmark img { flex: none; }
.wordmark img { width: 2rem; height: 2rem; border-radius: 0.5rem; }
.primary-nav { display: none; margin-left: auto; gap: 0.25rem; }
.primary-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem;
  border-radius: 999px; color: var(--ink); font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
}
.primary-nav a:hover { background: var(--surface); }
.primary-nav a[aria-current="page"] {
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.5em;
}
.get-button {
  display: inline-flex; flex: none; align-items: center; min-height: 2.75rem; margin-left: auto; padding: 0 1.1rem;
  border-radius: 999px; background: var(--primary-fill); color: var(--primary-ink);
  font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.menu-sheet { position: static; flex: none; }
/* メニューを開いている間は上部を画面に固定しない。開いたまま、ページの中の行き先（#faq など）へ移ったとき、
   シートが行き先の見出しを覆わないように（スクリプトを使わないので、選んでもシートは閉じない） */
.masthead:has(.menu-sheet[open]) { position: relative; }
.menu-sheet > summary {
  display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.9rem;
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.9375rem;
  list-style: none; white-space: nowrap;
}
.menu-sheet > summary::-webkit-details-marker { display: none; }
.menu-sheet[open] > summary { background: var(--surface); }
.menu-sheet nav {
  position: absolute; left: 0; right: 0; top: 100%; padding: 0.5rem 1rem 1.25rem;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
/* 目次とメニューのリンクは flex にしない（文の中の改行の印 <wbr> や名前の囲みごとに別の列になる。2026-10-12 の点検の
   ブラウザの確かめ。Tonari が自分の CSS で直していた形を共通にした）。押せる高さは min-height で保つ */
.menu-sheet nav a {
  display: block; min-height: 3rem; padding-block: 0.7rem; line-height: 1.5; border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 600; text-decoration: none;
}
/* ボタンもメニューも無いサイト（アプリ一覧）では、名前だけを置く */
.masthead-row > .wordmark:only-child { margin-right: auto; }
@media (max-width: 44.99rem) {
  .masthead-row { gap: 0.5rem; }
  .get-button, .menu-sheet > summary { padding: 0 0.75rem; font-size: 0.875rem; }
  .masthead .wordmark span { font-size: 1rem; }
}
/* 幅 423px 以下で、ボタンかメニューがあるときは名前を隠す（アイコンは残る）。390px の iPhone で、
   「推し活ノート」と「App Store で見る」と「メニュー」が 1 行に入らなかった */
@media (max-width: 26.49rem) {
  .masthead .wordmark:not(:only-child) span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
/* ページの切り替えは、PC の幅から横に並べる（タブレットの縦の幅では、4〜5 個の言葉が入らず途中で折れた） */
@media (min-width: 60rem) {
  .primary-nav { display: flex; }
  .primary-nav + .get-button { margin-left: 0.5rem; }
  .menu-sheet { display: none; }
}

/* ---- 章 ---- */
main { display: block; }
.chapter { padding-block: clamp(3rem, 7vw, 5.5rem); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter-head { display: grid; gap: 0.75rem 3rem; margin-bottom: 2rem; }
.chapter-head > p { color: var(--muted); max-width: var(--measure); }
@media (min-width: 60rem) {
  .chapter-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
/* 法的なページなどの見出しは長い 1 語になりやすい（「プライバシーポリシー」は 10 字）。幅 320 でも語の途中で折れない大きさにする */
.page-head h1 { max-width: 18em; font-size: clamp(1.75rem, 0.9rem + 4vw, 3.75rem); }
.lead { margin-top: 1rem; max-width: var(--measure); color: var(--muted); font-size: 1.1875rem; }
.prose > * + * { margin-top: 1rem; }
.prose p, .prose li { max-width: var(--measure); }
/* 文章の中の決まりは、クラスの無い箇条書きと、直下の見出しだけに当てる（一覧の部品や法的ページの要点を崩さない） */
.prose :where(ul, ol):not([class]) { padding-left: 1.4em; }
.prose :where(ul, ol):not([class]) > li + li { margin-top: 0.35rem; }
.prose > h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.prose > h3 { margin-top: 2rem; }

/* 見出しのすぐ下の部品との間 */
h2 + :is(.faq, .procedure, .route-list, .release-log, .spec-table, .abilities, .app-rows) { margin-top: 1.5rem; }

/* ---- ボタン ---- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem;
  border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.action-primary { background: var(--primary-fill); color: var(--primary-ink); }
.action-secondary { border: 1.5px solid var(--ink); color: var(--ink); }
.action:hover { text-decoration: underline; }

/* ---- 一番上 ---- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero-grid { display: grid; gap: 1.5rem 3rem; }
.hero h1 + .hero-text { margin-top: 1rem; }
.hero-text { color: var(--muted); font-size: 1.1875rem; max-width: 30em; }
.hero-requirements { margin-top: 0.9rem; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.3fr 1fr; align-items: end; } }

/* 夜の面：各サイトに 1 つだけ。アプリらしさをいちばん表すもの（リング、ルート、ゲームの画面など）を置く */
.night-panel {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 28px;
  background: var(--night);
  color: var(--night-ink);
  border: 1px solid var(--night-edge);
}
.night-panel :focus-visible { outline-color: var(--accent); }
.night-note {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--night-line);
  color: var(--night-muted); font-size: 0.875rem;
}

/* ---- 手順（順番があるものだけ） ---- */
.procedure { list-style: none; padding: 0; border-top: 2px solid var(--ink); }
.procedure > li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.25rem 1rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.procedure-numeral {
  grid-row: span 2; color: var(--ink); font-family: var(--font-num); font-size: 2rem; font-weight: 700; line-height: 1.1;
}
.procedure > li > :not(.procedure-numeral) { grid-column: 2; }
.procedure h3 { font-size: 1.125rem; }
.procedure p { color: var(--muted); max-width: var(--measure); }
@media (min-width: 60rem) {
  .procedure.across { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); }
  .procedure.across > li { grid-template-columns: 1fr; padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 0; }
  .procedure.across > li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }
  .procedure.across > li > :not(.procedure-numeral) { grid-column: 1; }
  .procedure.across .procedure-numeral { grid-row: auto; }
}

/* ---- 1 行がそのままリンクの一覧 ---- */
.route-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.route-list > li { border-bottom: 1px solid var(--line); }
.route {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem;
  padding: 0.75rem 0; color: var(--ink); font-weight: 600; text-decoration: none;
}
.route::after { content: "›"; flex: none; color: var(--link); font-size: 1.5rem; line-height: 1; }
.route:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.route small { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.875rem; font-weight: 400; line-height: 1.6; }
@media (min-width: 60rem) {
  .route-list.two-up { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 0; }
  .route-list.two-up > li:nth-child(-n + 2) { border-top: 1px solid var(--line); }
}

/* ---- よくある質問（開いて読む） ---- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
/* 題は flex にしない（題の中にかっこの印などの要素があると、要素ごとに別の列に分かれた：2026-10-12 の Codex の点検の
   LF-005）。＋と−の印は右の真ん中に置く */
.faq summary {
  display: block; position: relative; min-height: 3.5rem;
  padding: 0.75rem 2rem 0.75rem 0; cursor: pointer; font-weight: 700; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--link); font-weight: 400;
}
.faq details[open] > summary::after { content: "−"; }
.faq details > :not(summary) { max-width: var(--measure); padding-bottom: 1.25rem; color: var(--ink); }
.faq details > p + p, .faq details > p + ul { margin-top: -0.75rem; }
.faq details ul { padding-left: 1.4em; }
.faq-group + .faq-group { margin-top: 2.5rem; }
.faq-group > h3 { margin-bottom: 0.75rem; }

/* ---- 事実の表 ---- */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.spec-table caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; }
.spec-table th, .spec-table td {
  padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.spec-table thead th { border-bottom: 2px solid var(--ink); }
/* 表の本文のセルは、はみ出すときだけ折る（anywhere だと列の幅の計算でも 1 字ずつ折れるとみなされ、本文の列が細くなり、
   見出しの列が語の途中で折れた）。見出しのセル（th）は anywhere のまま（両方 break-word にすると表がはみ出した）。
   AI使用状況の前の版（v1.0.77）と同じ組み合わせ。見た目の検査で確かめた */
/* 表の本文のセルも文節で折る（普通の折り返しでは「入｜手」「ヘル｜プ」のように語の途中で折れた：2026-10-12 の Codex の
   点検）。最後の行に 1〜2 字だけ残らないように pretty。列が 4 つ以上の表（AI使用状況の同期の表）は、見出しの列が細くなる
   ので、サイトの CSS で狭い幅から縦に積む */
.spec-table td { overflow-wrap: break-word; word-break: keep-all; text-wrap: pretty; }
.spec-table tbody th { width: 11.5em; color: var(--muted); font-weight: 600; text-wrap: pretty; }
@media (max-width: 40rem) {
  .spec-table thead { display: none; }
  .spec-table tr { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .spec-table th, .spec-table td { display: block; padding: 0.15rem 0; border: 0; }
  .spec-table tbody th { width: auto; }
  .spec-table td[data-label]::before { content: attr(data-label) "："; color: var(--muted); font-weight: 600; }
  /* 英語のページは半角のコロンと空白（Tonari の比べの表。TN-017） */
  :lang(en) .spec-table td[data-label]::before { content: attr(data-label) ": "; }
}

/* ---- 注意書き ---- */
.caution {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; max-width: 46rem;
  padding: 1rem 1.25rem; border-radius: 12px;
  background: var(--surface);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  color: var(--ink); font-size: 0.9375rem; line-height: 1.75;
}
.caution::before {
  content: "!"; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--warn); color: #12212B; font: 800 0.875rem/1.5rem var(--font-num); text-align: center;
}
.caution > * + * { margin-top: 0.4rem; }

/* ---- できること（線で分けた 2 列。箱にしない） ---- */
.abilities { display: grid; gap: 0 3rem; margin-top: 1.5rem; }
.abilities > div { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.abilities h3 { margin-bottom: 0.4rem; }
.abilities p { color: var(--muted); max-width: var(--measure); }
.abilities p + p { margin-top: 0.5rem; }
@media (min-width: 48rem) { .abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 文と画面の 2 列 ---- */
.split { display: grid; gap: 2rem; align-items: center; }
.split h3 { margin-bottom: 0.6rem; }
.split p { color: var(--muted); max-width: var(--measure); }
.split + .split { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .split.screen-first > figure { order: -1; }
}
.checklist { list-style: none; padding: 0; margin-top: 1.25rem; border-top: 1px solid var(--line); }
.checklist > li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-weight: 600; }

/* ---- 画面の写真 ---- */
.shot img { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.shot.is-phone { max-width: 18rem; }
.shot.is-phone img { border-radius: 2rem; }
.shot a { display: block; }
.shot figcaption {
  margin-top: 0.75rem; color: var(--muted); font-size: 0.875rem; line-height: 1.6; max-width: var(--measure);
}
.night-panel .shot img { border-color: var(--night-line); background: var(--night-raised); }
.night-panel .shot figcaption { color: var(--night-muted); }

/* ---- 番号付きの画面の説明 ---- */
.annotated { display: grid; gap: 1.5rem; }
.annotated-shot { position: relative; max-width: 18rem; margin-right: 2.25rem; }
.annotated-shot img { border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); }
.annotated-shot.is-wide { max-width: 34rem; }
.marker {
  position: absolute; right: -2.1rem; width: 1.75rem; height: 1.75rem; margin-top: -0.875rem; border-radius: 50%;
  background: var(--marker-fill); color: var(--marker-ink); font: 700 0.875rem/1.75rem var(--font-num); text-align: center;
}
.marker-key { list-style: none; padding: 0; counter-reset: marker; }
.marker-key > li {
  counter-increment: marker; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.65;
}
.marker-key > li::before {
  content: counter(marker); width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--marker-fill); color: var(--marker-ink); font: 700 0.875rem/1.75rem var(--font-num); text-align: center;
}
.marker-key strong { display: block; }
.annotated figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
@media (min-width: 48rem) { .annotated { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2.5rem; } }

/* ---- 手引き（左に目次） ---- */
.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1rem clamp(3rem, 7vw, 5rem); }
.guide-index { font-size: 0.9375rem; }
.guide-index p { margin-bottom: 0.25rem; color: var(--muted); font-weight: 700; }
.guide-index ol { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.guide-index ol + p { margin-top: 1.25rem; }
.guide-index a {
  display: block; min-height: 2.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; line-height: 1.5;
}
.guide-index a:hover { color: var(--link); }
.guide-body > section { padding-top: 2.5rem; }
.guide-body > section:first-child { padding-top: 0; }
.guide-body h2 { margin-bottom: 1rem; }
.guide-body h3 { margin: 2rem 0 0.75rem; }
.guide-body p, .guide-body li { max-width: var(--measure); }
.guide-body p + p, .guide-body p + ul, .guide-body ul + p, .guide-body p + ol { margin-top: 0.85rem; }
.guide-body :where(ul, ol):not([class]) { padding-left: 1.4em; }
.guide-body :where(ul, ol):not([class]) > li + li { margin-top: 0.3rem; }
.guide-body .caution, .guide-body .annotated, .guide-body .shot, .guide-body .spec-table,
.guide-body .procedure, .guide-body .route-list { margin-top: 1.5rem; }
.guide-body .shot.is-phone { max-width: 16rem; }
.guide-body .shot:not(.is-phone) { max-width: 28rem; }
@media (min-width: 64rem) {
  .guide { grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; }
  .guide-index {
    position: sticky; top: calc(var(--header-height) + 1.5rem); align-self: start;
    max-height: calc(100vh - var(--header-height) - 3rem); overflow: auto;
  }
  /* 広い画面でも押せる高さは 44px のまま（2026-10-12 の Codex の点検の AI-019） */
}

/* ---- 更新履歴 ---- */
.release-log { list-style: none; padding: 0; border-top: 2px solid var(--ink); }
.release { display: grid; gap: 0.5rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.release time { color: var(--muted); font-family: var(--font-num); font-size: 0.9375rem; }
.release-number { font-family: var(--font-num); font-weight: 700; }
.release ul { list-style: disc; padding-left: 1.4em; }
.release li { max-width: var(--measure); }
.release li + li { margin-top: 0.35rem; }
@media (min-width: 60rem) {
  .release { grid-template-columns: 11rem minmax(0, 1fr); }
  .release > :not(.release-when) { grid-column: 2; }
  .release-when { grid-row: span 3; }
}
.release-older { margin-top: 1.5rem; }
.release-older > summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  cursor: pointer; color: var(--link); font-weight: 600;
}

/* ---- 法的なページ ---- */
.key-points { max-width: 48rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.key-points h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.key-points ul { padding-left: 1.4em; }
.key-points li + li { margin-top: 0.4rem; }
.dates { margin-top: 0.75rem; max-width: var(--measure); color: var(--muted); font-size: 0.9375rem; }

/* ---- ページが見つからないとき ---- */
.lost { display: grid; gap: 1.5rem; padding-block: clamp(3rem, 8vw, 6rem) 0; max-width: 40rem; }

/* ---- アイコンの棚（夜の面の中。押すとそのアプリの行へ） ---- */
/* アイコンの後ろの光を、夜の面の外へはみ出させない */
.icon-shelf { overflow: hidden; }
.icon-shelf ul { display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.icon-shelf a {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; width: 5.5rem;
  color: var(--night-ink); font-size: 0.8125rem; line-height: 1.4; text-align: center; text-decoration: none;
  border-radius: 18px;
}
.icon-shelf img {
  width: 4.5rem; height: 4.5rem; border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 2.75rem -0.25rem var(--app-accent, transparent);
}
.icon-shelf a:hover span { text-decoration: underline; text-underline-offset: 0.22em; }
@media (prefers-reduced-motion: no-preference) {
  .icon-shelf li { animation: kz-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .icon-shelf li:nth-child(2) { animation-delay: 0.04s; }
  .icon-shelf li:nth-child(3) { animation-delay: 0.08s; }
  .icon-shelf li:nth-child(4) { animation-delay: 0.12s; }
  .icon-shelf li:nth-child(5) { animation-delay: 0.16s; }
}
@keyframes kz-rise { from { opacity: 0; transform: translateY(14px); } }
/* PC の幅では、夜の面いっぱいに均等に並べ、アイコンを大きくする */
@media (min-width: 48rem) {
  .icon-shelf { padding-block: clamp(2rem, 4vw, 3rem); }
  .icon-shelf ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); justify-items: center; }
  .icon-shelf a { width: auto; font-size: 0.9375rem; }
  .icon-shelf img { width: 6rem; height: 6rem; }
}

/* ---- アプリの行（アプリ一覧） ---- */
.app-rows { list-style: none; padding: 0; border-top: 2px solid var(--ink); }
.app-rows > li {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0 1rem; align-items: center;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + 1rem);
}
.app-rows .app-icon { width: 4rem; height: 4rem; border-radius: 22%; box-shadow: 0 0 0 1px var(--line); }
.app-rows h2 { font-size: 1.5rem; line-height: 1.35; }
.app-rows .app-body { display: contents; }
.app-rows .app-lead, .app-rows .platforms, .app-rows .app-note, .app-rows .actions { grid-column: 1 / -1; }
.app-rows .app-lead { margin-top: 1rem; max-width: var(--measure); }
.app-rows .app-note { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; max-width: var(--measure); }
.app-rows .actions { margin-top: 1.25rem; }
.platforms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; padding: 0; list-style: none; }
.platforms li {
  padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 0.8125rem; line-height: 1.75rem;
}
@media (min-width: 60rem) {
  .app-rows > li { grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 0 2rem; padding: 2rem 0; }
  .app-rows .app-icon { width: 5.5rem; height: 5.5rem; align-self: start; }
  .app-rows .app-body { display: block; min-width: 0; }
  .app-rows .app-lead, .app-rows .platforms, .app-rows .app-note, .app-rows .actions { grid-column: auto; }
  .app-rows .app-lead { margin-top: 0.4rem; }
  .app-rows .actions { flex-direction: column; align-items: stretch; width: 13rem; margin-top: 0; }
}

/* ---- 下の帯 ---- */
.colophon {
  margin-top: clamp(3rem, 8vw, 6rem); background: var(--night); color: var(--night-ink);
  border-top: 1px solid var(--night-edge);
}
.colophon a { color: var(--night-ink); }
.colophon :focus-visible { outline-color: var(--accent); }
.colophon-grid { display: grid; gap: 2rem; padding-block: 3rem 2.5rem; }
.colophon .wordmark { color: var(--night-ink); }
.colophon-tagline { margin-top: 0.5rem; color: var(--night-muted); font-size: 0.9375rem; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.colophon nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem;
  color: var(--night-ink); font-size: 0.9375rem; text-decoration: none;
}
.colophon nav a:hover { text-decoration: underline; }
.colophon-contact { margin-top: 0.75rem; color: var(--night-muted); font-size: 0.9375rem; }
.colophon-contact a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.colophon-legal {
  padding-top: 1.5rem; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: 0.875rem;
}
@media (min-width: 60rem) {
  .colophon-grid { grid-template-columns: 1fr 2fr; }
  .colophon-legal, .colophon-grid > .family { grid-column: 1 / -1; }
}

/* 「kazuapps のアプリ」の列（sync-design.py が family.json から書く） */
.family { padding-top: 1.75rem; border-top: 1px solid var(--night-line); }
.family h2 { color: var(--night-ink); font-size: 1.125rem; line-height: 1.4; }
.family-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 0.75rem; padding: 0; list-style: none; }
.family-list a {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem;
  color: var(--night-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none;
}
.family-list a:hover span { text-decoration: underline; text-underline-offset: 0.22em; }
.family-list img { width: 2.5rem; height: 2.5rem; border-radius: 22%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.family-all {
  display: inline-flex; align-items: center; min-height: 3rem; margin-top: 1rem; padding: 0 1.4rem;
  border: 1.5px solid var(--night-ink); border-radius: 999px;
  color: var(--night-ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.colophon .family-all { color: var(--night-ink); }
.family-all:hover { text-decoration: underline; }