/* moyoru.app の紹介ページ(/ と /ja …)の見た目。
   **ガワは白+墨で固定し、色はコンテンツ層にだけ出す** ―― アプリと同じ約束。
   このページで色が出るのはスクリーンショットの中だけ。

   **★ 暗い側は持たない**(2026-08-26。開発者の判断)。アプリが
   `preferredColorScheme(.light)` で明るい側に固定されていて、**スクショ12枚とも地が #faf9f7**
   ―― 暗い背景に置くと**白い板が6枚浮いて見える**うえ、OG画像も明るいので
   **SNSのプレビューと着地したページで印象が変わる**。
   `color-scheme: light` を宣言しているので、**スクロールバーや入力欄もOSに引きずられない**。

   **文書ページ(shortcut / support / privacy)もここを読む**(2026-08-28)。
   規則は末尾の `.doc` にまとめてある。 */

:root {
  color-scheme: light;   /* UAの部品(スクロールバー等)も明るい側に固定する */
  --ink: #1a1a1a;
  --deep: #4d4b48;       /* 導入文。--sub だと先頭で沈む */
  --sub: #6b6b6b;
  --faint: #9c9993;      /* 添え物(色の16進・カテゴリ名) */
  --line: #e2e0dc;
  --bg: #faf9f7;
  --card: #ffffff;
  --measure: 38rem;      /* 本文の一行の長さ */
  /* **帯の外枠**(2026-08-29に 64rem → 70rem)。1440pxの画面で左右に208pxずつ
     余っていて、版面が小さく見えていた。**本文の一行は --measure が持つ**ので、
     広げても行は長くならない */
  --page: 70rem;
}
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* 日本語は文節で折り返す(対応していないブラウザでは何も起きない) */
:lang(ja) h1, :lang(ja) h2, :lang(ja) .lead { word-break: auto-phrase; }
h1, h2, .lead { text-wrap: pretty; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* **外枠はどの帯も同じ**。中の文章だけを読みやすい幅に抑える ――
   枠ごと狭めると、見出しと本文で左端がずれて「中央寄せの島」が2つできる */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.25rem; }
footer .wrap > * { max-width: var(--measure); }
section > h2, section > p, section > ol, section > ul { max-width: var(--measure); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bg);
  padding: .5rem 1rem; border-radius: .5rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ── 上の帯 ───────────────────────────────── */

/* アイコンが入ったので**中央で揃える**(2026-08-29)。
   ベースライン揃えだと、絵のベースライン=下端に言語切替が引きずられる */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.75rem 0 0;
}
/* **印はアイコン + ワードマーク。全ページの同じ場所に出す** ――
   検索から模様辞典の1枚に着地した人に、ここが何のサイトなのかを一目で伝える役 */
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  /* **言語切替(.8125rem)より一段大きくする**(2026-08-29。開発者の指摘)――
     同じ大きさだと印が並びの中に埋もれる。18pxまで上げると見出しに見え始める */
  font-size: 1rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; text-decoration: none;
}
.brand img { width: 1.625rem; height: 1.625rem; border-radius: 28%; }
/* **14言語を横に並べない**(2026-09-03。開発者の指摘「ヘッダにズラーッと
   並ぶのはカッコ悪い」)。`<details>` で畳む ―― **JavaScript は持たない**。
   リンクは畳んでも DOM に居るので、クローラーからの見え方は変わらない */
.langs { font-size: .8125rem; letter-spacing: .06em; color: var(--sub); }
.langs details { position: relative; }
.langs summary {
  display: inline-flex; align-items: center; gap: .45rem;
  cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 600;
}
.langs summary::-webkit-details-marker { display: none; }
/* 三角ではなく山形。**畳んだ状態で下、開いた状態で上**を向く */
.langs summary::after {
  content: ""; width: .34rem; height: .34rem; margin-top: -.22em;
  border-right: 1.5px solid var(--sub); border-bottom: 1.5px solid var(--sub);
  transform: rotate(45deg);
}
.langs details[open] summary::after { margin-top: .12em; transform: rotate(225deg); }
/* **2列に組む**(2026-09-03)。14言語を1列に積むと画面の高さを超えて
   スクロールが出る ―― 7行×2列なら一目で全部見える。
   狭い画面では1列に落とす(2列だと右端がはみ出す) */
.langs-menu {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 20;
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, auto); grid-auto-columns: max-content;
  gap: .05rem .25rem; padding: .45rem;
  /* **画面から食み出させない**。狭い画面では1列に落ちるが、
     落ち切らない幅でも横スクロールを作らないための止め */
  max-width: calc(100vw - 2rem); max-height: 72vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: .5rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
}
@media (max-width: 30rem) {
  .langs-menu { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; }
}
.langs-menu a {
  color: var(--sub); text-decoration: none; white-space: nowrap;
  padding: .38rem .6rem; border-radius: .3rem; margin: 0;
}
.langs-menu a:hover { background: var(--bg); color: var(--ink); }
.langs-menu [aria-current] { color: var(--ink); font-weight: 600; }

/* ── 見出しと入手ボタン ───────────────────── */

/* 見出し・説明・入手 と、主役のスクショ1枚。**広い画面では横に並べる**。

   **見出しは版面に対して大きく取る**(2026-08-29。開発者の指摘「インパクトが弱い」)。
   42px・行間1.35・字送り0 では、1120pxの版面に対して
   **「本文がたまたま大きいだけ」**に見えていた ―― 64pxまで上げ、行間と字送りを締める。
   **★ 日本語は詰めない・行間を落とさない。** 仮名と漢字は字面が四角いので、
   欧文と同じ -.035em / 1.05 では行がぶつかる */
.hero { padding: 3.5rem 0 0; }
.hero-shot { margin: 2.75rem 0 0; }
.hero-shot img { width: min(19rem, 74%); margin-inline: auto; }

/* **一行目は罫を引いて始める。** 色を持たない紙面なので、
   ここが上の帯ではなく本文の始まりだ、という印が要る */
.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  color: var(--ink); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; margin: 0 0 1.25rem;
}
.eyebrow::before {
  content: ""; flex: none; width: 1.75rem; height: 1px; background: var(--ink);
}

.hero h1 {
  font-size: clamp(2.375rem, 5.6vw, 4rem);
  line-height: 1.05; letter-spacing: -.035em; font-weight: 700;
  margin: 0 0 1.5rem;
}
:lang(ja) .hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.32; letter-spacing: -.01em;
}

.lead {
  color: var(--deep); font-size: 1.125rem; line-height: 1.75;
  margin: 0 0 2rem; max-width: 34rem;
}

/* **写真から拾った2色**(2026-08-29)。hero の絵の中で
   **虫めがねが指しているのと同じ色**なので、説明の文字を足さずに意味が通る
   ―― 色見本は見れば分かるし、言語ごとの訳も増えない。
   **★ 絵を差し替えたら測り直すこと**(正は build_landing.py の HERO_SWATCHES) */
.chips { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 2rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem; letter-spacing: .08em; color: var(--faint);
}
.chip i {
  width: 1.125rem; height: 1.125rem; border-radius: 2px;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* **入手は罫で囲った1つの帯**(2026-08-29。開発者の指摘「バランスが悪い」)。
   それまで囲いが無く、**52pxのバッジと128pxのQR**が高さも輪郭も揃わないまま
   並んでいたので、**2つの浮き物**に見えていた。上下に罫を引くと
   **帯そのものが1つの形**になり、中身の高さ違いが効かなくなる。
   **★ QRが消える狭い画面でも帯は残る** ―― バッジが1つで浮かない。
   **紹介ページと模様辞典で同じものを使う**(あちらは配色サンプルの下) */
.get {
  display: flex; align-items: center; gap: 1.25rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.25rem 0; margin: 0; max-width: 34rem;
}
/* 但し書きは**品質表示のラベル**の組み方(小さく・字間を開けて)。
   **★ 幅で折らない** ―― `max-width` で2行に割ると、言語ごとに
   「iOS 18.0」の途中で切れる(日本語で実際に切れた)。入る幅では1行 */
.get .meta {
  color: var(--sub); font-size: .75rem; line-height: 1.6;
  letter-spacing: .04em; margin: 0;
}

/* **Apple公式のバッジをそのまま置く**(描き起こさない・加工しない。→ tools/site/) */
.badge { display: inline-block; line-height: 0; flex: none; }
.badge img { height: 3rem; width: auto; }   /* 規約の下限は40px */
.badge:hover { opacity: .85; }

/* QRは**広い画面だけ**。手元のiPhoneで自分の画面は読めないので、
   狭い画面では場所を取るだけになる。
   **説明は付けない**(2026-08-29。開発者の指摘)―― QRは見れば分かるもので、
   「iPhoneのカメラで読み取る」の2行が塊の輪郭を崩していた。
   **★ 小さくしない**(帯に収めるために縮めたくなる)―― いまの大きさで
   読めることを確かめてある(→ tools/site/scanqr.swift)。
   **読めないQRは、無いQRより悪い** */
.qr {
  display: none; flex: none; margin: 0 0 0 auto;
  padding-left: 1.25rem; border-left: 1px solid var(--line);
}
.qr img { width: 8rem; border-radius: .375rem; }   /* 計測を足して型8まで密になった */

/* ── 本文 ─────────────────────────────────── */

main section {
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 4.5vw, 3.75rem) 0 .5rem;
}
/* **最初の節にも線を引く** ―― 見出しの塊と本文の境目になる(2026-08-26) */
/* **節の見出しも版面に合わせて可変にする**(2026-08-29)。
   20px固定では、大きくしたh1と本文16pxのあいだで段が足りない */
h2 {
  font-size: clamp(1.375rem, 2.1vw, 1.6875rem);
  line-height: 1.45; font-weight: 600; letter-spacing: -.015em; margin: 0 0 1rem;
}
p { margin: 0 0 1.25rem; }
section p { color: var(--sub); }
section p:last-child { margin-bottom: 0; }

ol, ul.plain { color: var(--sub); margin: 0 0 1.25rem; padding-left: 1.35rem; }
ol li, ul.plain li { margin-bottom: .35rem; }
ol li::marker { color: var(--ink); font-weight: 600; }

.more {
  display: inline-block; margin-top: .25rem; font-weight: 600;
  text-decoration-thickness: 1px;
}

/* 図を持つ節は、広い画面で本文の右に置く */
.figure { margin: 2rem 0 0; }
/* **枠線は引かない** ―― 絵の中にすでにiPhoneの枠があり、
   地の色もページと同じ。線を足すと枠が二重になる。
   **★ 1段組では中央に置く**(2026-08-29。開発者の指摘「左寄せがカッコ悪い」)――
   `width:232px` に `margin:auto` が無く、狭い画面で左に寄っていた */
.figure img { width: min(15.5rem, 62%); margin-inline: auto; }
/* **1段組のときは版面いっぱいに伸ばす**(2026-08-29。開発者の指摘)。
   2段組を解いたのに `.hero-text` を 38rem で止めていたので、
   **820px幅で右に200px空いていた** */
@media (max-width: 47.99rem) {
  .lead, .get { max-width: 44rem; }
  /* QRが消えたあと、**左にバッジ・右に但し書き**で帯の両端が留まる ――
     中途半端な位置で終わると、罫だけが余って見える */
  .get .meta { margin-left: auto; text-align: right; }
}

/* **2段組は 48rem(768px)から**(2026-08-29に 52rem から下げた)。
   52rem だと **768〜832px の帯で「絵だけ下に回り、本文の右が空く」**
   いちばん間延びした状態が出る。**絵の列は clamp で伸び縮みさせて**、その帯を作らない */
@media (min-width: 48rem) {
  /* 左に言葉、右に主役のスクショ */
  .hero {
    display: grid; align-items: center;
    /* **絵は 34%。** 36%まで広げると、1440pxで日本語の見出しが
       「色に。」だけの3行目を作る(左の列が 640px を切るところで折れる) */
    grid-template-columns: minmax(0, 1fr) clamp(14rem, 34%, 26rem);
    gap: 0 clamp(2rem, 5vw, 4.5rem);
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 5rem);
  }
  .hero-shot { margin: 0; }
  .hero-shot img { width: 100%; }
  .qr { display: block; }

  /* **左の列は 1fr。** `--measure` で止めると、帯の右端まで100px以上余って
     **絵が中途半端な位置に浮く**(2026-08-29。開発者の指摘)――
     hero は最初から `1fr` で右端に付いていたので、下の節だけ揃っていなかった。
     **本文の幅は `section > p` 側の `max-width` が持っている**ので、
     列を伸ばしても行が長くなることはない */
  section.has-figure {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(11rem, 22%, 17rem);
    gap: 0 clamp(2rem, 4vw, 3.5rem); align-items: start;
  }
  section.has-figure .figure { margin: 0; grid-column: 2; grid-row: 1 / span 99; }
  section.has-figure .figure img { width: 100%; }
}

/* ── 下の帯 ───────────────────────────────── */

footer {
  border-top: 1px solid var(--line); margin-top: 3.5rem;
  padding: 2rem 0 4rem; font-size: .9375rem;
}
footer nav a { display: inline-block; margin: 0 1.25rem .5rem 0; }
footer .fine { color: var(--sub); font-size: .8125rem; margin: 1rem 0 0; }

/* ── 文書ページ(shortcut / support / privacy) ───────────────
   **紹介ページと同じ帯を上下に持つ**(2026-08-28)。それまでは3枚とも
   インラインCSSの独立した島で、**ヘッダもフッタも無く、どこへも行けなかった**。
   帯・head・この下の規則を台(`build_landing.py` の `doc_page`)が付ける。

   **言語ぶん出す**(`/support` と `/ja/support`)ので、上の帯の言語切替も
   紹介ページとまったく同じ `.top` / `.langs` がそのまま効く。
   ここに足すのは**本文の組み方だけ**。 */

.doc h1 { font-size: 1.5rem; line-height: 1.5; font-weight: 600; margin: 3rem 0 1.25rem; }
.doc h2 { font-size: 1.0625rem; margin: 2.5rem 0 .75rem; }
.doc h3 { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
.doc p, .doc li { margin: 0 0 1rem; }
.doc ol, .doc ul { color: inherit; padding-left: 1.35rem; }
.doc li { margin-bottom: .5rem; }
.doc .sub, .doc .updated { color: var(--sub); }
.doc .updated { font-size: .875rem; margin-top: 3rem; }
.doc code {
  background: var(--card); border: 1px solid var(--line);
  padding: .1rem .4rem; border-radius: .25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
}

.doc h1, .doc h2, .doc h3, .doc p, .doc ol, .doc ul { max-width: var(--measure); }

/* **ロック画面の書体**(2026-08-29。開発者の指示で「太くて丸っこい」方向へ)。
   **M PLUS Rounded 1c 700** ―― iOSのロック画面で選べる SF Pro Rounded に近い。
   候補(Nunito / Quicksand / Baloo 2 / Varela Round)の中でこれにしたのは、
   **いちばん太くて丸い**うえに**日本語を持っている**から ――
   欧文だけの家族だと「8月29日 土曜日」の日付だけ別の書体になる。

   **ロック画面に出る字だけのサブセットで7.6KB**(数字・記号・年月日曜と七曜・欧文の月名曜日名)。
   `moyoru.app` から配る(Googleは読まない)。ライセンスは `MPLUSRounded1c-OFL.txt`。

   **★ 言語を足すときは、この字の集合も足すこと**(fr の `février` の é など)――
   入っていない字は次の家族に落ちるので、**日付の途中で書体が変わる**。
   作り直しは Google Fonts の `text=` パラメータで(→ tools/site/README.md)。 */
@font-face {
  font-family: "Clock Rounded";
  src: url(/fonts/rounded-700-clock.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── 模様辞典(/patterns と /patterns/<柄id>) ─────────────────
   **絵は素の壁紙**で、iPhoneの枠・ダイナミックアイランド・時計はここが描く
   (2026-08-29。開発者の判断)―― **焼き込むと、枠を直すたびに400枚を描き直す**。

   配色の切り替えは**ラジオ+CSSだけ**。4枚とも markup に実体があるので、
   **切り替えても索引される絵が減らない**(JSで差し込むと1枚しか拾われない)。 */

.dict main { padding-bottom: 1rem; }

.crumbs { color: var(--sub); font-size: .875rem; padding: 1.75rem 0 0; }
.crumbs a { color: var(--sub); }

/* ── 柄1本のページ ───────────────────────── */

.leaf { padding: 2rem 0 0; }
/* **柄の名前はこのページの主役**なので大きく出す(2026-08-29。開発者の指示)。
   左の列は縦中央に置いてあり、文が2〜3行しかないぶんの余白がここで埋まる */
.leaf h1 {
  font-size: clamp(2rem, 6vw, 3rem); line-height: 1.3;
  font-weight: 600; letter-spacing: -.015em; margin: 0 0 1.25rem;
}
.leaf-text p { color: var(--sub); font-size: 1.0625rem; max-width: var(--measure); }

.facts {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem;
  margin: 1.75rem 0 0; font-size: .9375rem;
}
.facts dt { color: var(--sub); }
.facts dd { margin: 0; }

/* ── iPhoneの枠と配色の切り替え ───────────── */

.swatchbox { margin: 2.75rem 0 0; }
/* ラジオは隠すが**フォーカスは取れる形**で残す(キーボードで切り替えられる) */
.cw-radio {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.phone {
  width: min(16rem, 70%); margin: 0 auto;
  border-radius: 2.75rem; padding: .5rem;
  background: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 18px 40px -18px rgba(0,0,0,.45);
}
.screen {
  position: relative; aspect-ratio: 600 / 1300;
  border-radius: 2.25rem; overflow: hidden; background: var(--card);
}
.screen .cw {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .28s ease;
}
/* 先頭(白黒)を既定で出す。**:checked が付くのはラジオのほうなので兄弟で当てる** */
#cw-mono:checked  ~ .phone .cw-mono,
#cw-duo:checked   ~ .phone .cw-duo,
#cw-trio:checked  ~ .phone .cw-trio,
#cw-five:checked  ~ .phone .cw-five { opacity: 1; }

.chrome { position: absolute; inset: 0; pointer-events: none; }
/* **上端をわずかに沈める。** 白い時計は、市松の生成りの升や
   テラコッタの明るい面の上では影だけでは読めない(2026-08-29に実測)。
   iOS自身も同じことをしている ―― **柄の色は変えず、暗い側へ寄せるだけ** */
.chrome::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  /* **段が見えないよう、落ち方をなだらかにする** ―― 2点の線形だと
     市松の升をまたぐところに帯の縁が出る(2026-08-29に見た) */
  background: linear-gradient(to bottom,
    rgba(0,0,0,.40) 0%, rgba(0,0,0,.33) 16%, rgba(0,0,0,.19) 38%,
    rgba(0,0,0,.07) 68%, rgba(0,0,0,0) 100%);
}
.island {
  position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%);
  width: 33%; height: 3.1%; border-radius: 999px; background: #0b0b0b;
}
/* **いまのiPhoneのロック画面に寄せる**(2026-08-29。開発者の指示)――
   日付が小さく上、時刻が大きく下。**大きさは画面の幅に対する比で持つ**
   (`cqw` = `.screen` の幅の1%)ので、枠をどの大きさで出しても崩れない。
   **柄の上に乗るので影は二段** ―― 細字+淡い影だと、青海波のような
   細かい白黒の柄の上で完全に消える(2026-08-29に実測) */
.lock {
  position: absolute; top: 9%; left: 0; right: 0; text-align: center;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 2px 20px rgba(0,0,0,.45);
  /* **日付も時刻も同じ書体**(iOSと同じ)。落ち先の SF Pro / Hiragino も丸くはないが、
     7.6KBが来なかった回に字が消えるよりよい */
  font-family: "Clock Rounded", -apple-system, BlinkMacSystemFont,
               "Hiragino Sans", sans-serif;
  font-weight: 700;
}
.lock-date {
  display: block; font-size: 4.4cqw; letter-spacing: .01em; margin-bottom: .6cqw;
}
.lock-time {
  display: block; font-size: 19cqw; line-height: 1.04;
  /* 丸ゴシックの太字なので、詰めは締めすぎない(細字のときの -.025em は潰れる) */
  letter-spacing: -.005em;
  /* **等幅の数字にしない。** iOSのロック画面は字送りが可変で、
     「1」がはっきり細い ―― 揃えるとiPhoneに見えなくなる */
  font-variant-numeric: normal;
}
.screen { container-type: inline-size; }

/* 配色のチップ。**「サンプルだ」と分かる見せ方**にする ――
   ここで「自由な色にできないのか」と思ってもらうのが、この節の役 */
.swatches {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin: 1.5rem 0 0;
}
/* **4つが1行に収まる幅で組む**(2026-08-29。英語で折り返していた)。
   **効くのは広い画面のほう** ―― あちらは枠が 20rem の列に入るので、
   スマホの幅(393px)より狭い。`Mono / 2 colors / 3 colors / 5 colors` が
   320px に収まるところまで、字と詰めを落としてある */
.swatches { gap: .375rem; }
.swatches label {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: .3rem .65rem; white-space: nowrap;
  font-size: .8125rem; color: var(--sub); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.swatches label:hover { border-color: var(--sub); }
#cw-mono:checked ~ .swatches label[for="cw-mono"],
#cw-duo:checked  ~ .swatches label[for="cw-duo"],
#cw-trio:checked ~ .swatches label[for="cw-trio"],
#cw-five:checked ~ .swatches label[for="cw-five"] {
  border-color: var(--ink); color: var(--ink); font-weight: 600;
}
.cw-radio:focus-visible ~ .swatches label { outline: none; }
#cw-mono:focus-visible ~ .swatches label[for="cw-mono"],
#cw-duo:focus-visible  ~ .swatches label[for="cw-duo"],
#cw-trio:focus-visible ~ .swatches label[for="cw-trio"],
#cw-five:focus-visible ~ .swatches label[for="cw-five"] {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

.swatch-note {
  text-align: center; color: var(--sub); font-size: .8125rem;
  margin: .875rem 0 0;
}

@media (min-width: 52rem) {
  /* **左の列は縦の中央に置く。** 説明文が2〜3行しかないので、
     上に張り付けるとiPhoneの高さぶんの穴が下に空く(2026-08-29に見た) */
  .leaf {
    display: grid; grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 0 4rem; align-items: center; padding: 3rem 0 1rem;
  }
  .swatchbox { margin: 0; }
  .phone { width: 100%; }
}

/* ── アプリへの導線 ───────────────────────── */

.cta { border-top: 1px solid var(--line); padding: 2.75rem 0 .5rem; }
.cta h2 { font-size: 1.375rem; }
.cta-text p { color: var(--sub); max-width: var(--measure); }
.cta-shot { margin: 2rem 0 0; }
.cta-shot img { width: min(15rem, 62%); margin: 0 auto; }

@media (min-width: 52rem) {
  .cta {
    display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 0 4rem; align-items: center;
  }
  .cta-shot { margin: 0; }
  .cta-shot img { width: 100%; }
}

/* ── 一覧(ほかの模様 / 模様辞典トップ) ───────── */

.related, .group { border-top: 1px solid var(--line); padding: 2.75rem 0 .5rem; }
.group h2 { display: flex; align-items: baseline; gap: .625rem; }
.group h2 small { color: var(--sub); font-size: .8125rem; font-weight: 400; }

.grid {
  display: grid; gap: 1.25rem .875rem;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  margin: 0 0 1.5rem;
}
.card { text-decoration: none; display: block; }
.card img {
  width: 100%; border-radius: .625rem; border: 1px solid var(--line);
  background: var(--card);
}
.card span {
  display: block; margin: .5rem 0 0; font-size: .8125rem; line-height: 1.5;
  color: var(--sub);
}
.card:hover span { color: var(--ink); }
:lang(ja) .card span { word-break: auto-phrase; }

.hub-head { padding: 2rem 0 .5rem; }
.hub-head h1 {
  font-size: clamp(1.75rem, 5.2vw, 2.5rem); line-height: 1.35;
  font-weight: 600; margin: 0 0 1.25rem;
}
.hub-head p { max-width: var(--measure); color: var(--sub); }
.hub-head .lead { margin-bottom: 1rem; }

/* ── ほかのカテゴリから ─────────────────────
   **5つの島にしないための節**。カードにはカテゴリ名を添える
   (跨いだ並びなので、どこの柄なのかが分からないと選べない)。 */

.across { border-top: 1px solid var(--line); padding: 2.75rem 0 .5rem; }
.card small {
  display: block; margin-top: .125rem; font-size: .75rem; color: var(--faint);
}
.card:hover small { color: var(--sub); }

.catnav {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.125rem;
  margin: 0 0 1.25rem; font-size: .9375rem;
}
.catnav span { color: var(--sub); font-size: .8125rem; }

/* 一覧の見出しへ飛んだとき、上の帯に潜り込ませない */
.group h2 { scroll-margin-top: 1.5rem; }

/* ── 紹介ページに置く模様辞典の帯 ─────────────
   **一覧のサムネイルは白黒だが、こちらは色つき**(トップは売り場)。
   1枚が大きめなので、狭い画面では2列、広い画面で4列に落ち着く。 */

/* **色見本の札として組む**(2026-08-29)―― hero に置いた2色のチップと同じ言葉づかい。
   角は4px、隙間は詰める、名前は小さく字間を開ける。
   **隙間を詰めるのは「8種類の集合」に見せるため** ―― .875rem 空いていたときは
   **8枚が独立した8個のカード**に見えていた。ここで見せたいのは1枚ずつの柄ではなく、
   **こういう札が100枚ある**ということ。
   **枠線は残す** ―― 白黒の市松や麻の葉は地が紙とほぼ同じ色で、線が無いと札の輪郭が消える。

   **★ 列は数で決める。** `auto-fill` は幅から列数を割り出すので、
   版面を 70rem に広げた時点で **9列になり、8枚目の右に空の列が余った**
   (帯が右端に届かない)。**出すのは常に8枚**と決まっているので、幅に判断させない */
.grid.strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem .5rem;
  max-width: var(--page); margin: 1.75rem 0 1.5rem;
}
.grid.strip .card img { border-radius: .25rem; }
.grid.strip .card span { font-size: .75rem; letter-spacing: .04em; }
@media (min-width: 48rem) {
  .grid.strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}