/* 歯の未来シミュレーター — 賞水準版のスタイル
   方針: 方向D「上質なあたたかさ」（2026-10-15、利用者が4つの比較版から選んだ。参考は Function Health の、生成りの地・明朝の見出し・丸いカード）。
   深い青緑の帯に明朝の題字、生成りの地に丸いカードと小さな影。色は意味のある3色（青=入力した値、青緑=保てた場合、赤茶=このまま推移）
   だけを目立たせ、それ以外は「かわせみ」の深い青緑と、生成りの濃淡で組む。
   文字は同梱の Noto Sans JP（OFL）。題字・順位の見出し・大きな数字・見通しの見出しだけ Noto Serif JP（OFL、使う字だけに絞る）。グラフは主役で、1単位＝1px で描く（app.js が幅を測って viewBox を決める）。 */

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-display: swap;
  src: url(fonts/NotoSansJP-400.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Serif JP Sub";
  font-weight: 600 700;
  font-display: swap;
  src: url(fonts/NotoSerifJP-600.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/NotoSansJP-700.woff2) format("woff2");
}

:root {
  --ink: #16242c;        /* 見出し・大きな数字。白地 15.7:1 */
  --text: #16242c;       /* 本文と見出しを共通の濃色にそろえる */
  --muted: #52626b;      /* 補足・目盛り。白地 6.3:1、紙 5.7:1（2026-10-03、#5a6b74 から濃くした） */
  --faint: #8b9aa3;      /* 飾りだけ（文字には使わない） */
  --line: #e4dccd;
  --line-soft: #efe8dc;
  --paper: #f7f3ec;      /* 生成りの紙（方向D、2026-10-15。以前は青みの #f6f8f9 で、事務的に見えた） */
  --card: #fffdf9;
  --brand: #0f4c5c;      /* 「かわせみ」の深い青緑。見出しの帯・フッター・選んでいる切り替えだけ（データの意味には使わない） */
  --on-brand: #d5e6e3;   /* 帯の上の文字。帯との対比 7.6:1 */
  --serif: "Noto Serif JP Sub", "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 12px 32px -8px rgba(60, 40, 10, .14);
  --blue: #2563eb;
  --teal: #0d9488;
  --teal-deep: #0f766e;  /* 文字用（白地 5.47:1）。「平均に並ぶ」の印 */
  --rust: #c2410c;
  /* 面は丸いカード（方向D、2026-10-15。以前は角4px・影なしで、見やすいが事務的と言われた） */
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  font-size: 18px;
  color: var(--text);
  background: var(--paper);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, system-ui, sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "kern";
}

* { box-sizing: border-box; }
/* フッターを画面の下端に置く（広い画面で内容が短いとき、下に空白が浮いていた。2026-10-03、見直しの指摘） */
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--paper); }
body > header, body > main, body > footer { width: 100%; }
body > main { flex: 1 0 auto; }
/* 冒頭の説明の3文目は、読点で分けた2つのまとまりの途中で折り返さない（「予測する／ものではなく」と割れていた） */
.phrase { display: inline-block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .rank-result, .forecast-block h3, .folded-title, summary { font-feature-settings: "palt", "kern"; }
/* 「上位／5%以内」「令／和」のような変な折れを避ける。対応ブラウザでは文節で折る */
/* 句の途中で折らない（Chrome。Safari では効かない）。以前は見出しなどだけで、欄の補足・Q&A・凡例は語の途中で折れた（2026-10-05、デザイン改良サイクルの評価） */
body { word-break: auto-phrase; overflow-wrap: anywhere; }  /* 句が欄より長いときだけ句の中で折る（320幅でQ&Aが横にはみ出した） */
.nowrap, .forecast-value, .forecast-sub, .forecast-age, label { white-space: nowrap; }
::selection { background: #d5e6fb; color: var(--ink); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

/* ===== ヘッダー ===== */
.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: .25rem 1rem;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.2rem 1.5rem .5rem;
}
.clinic-name { flex-basis: 100%; margin: 0 0 .1rem; color: var(--muted); font-size: .86rem; font-weight: 700; letter-spacing: .14em; }
.site-title { display: flex; flex-wrap: wrap; gap: .3rem .35em; align-items: center; font-size: clamp(1.4rem, 7.2vw, 2rem); }
.app-icon { display: block; }
/* タイトル横の「令和6年版」。使っている統計の年の版（2026-10-03、利用者の指示）。意味の3色とぶつからないよう無彩色 */
.edition { flex: none; padding: .05rem .6rem; color: var(--text); background: var(--line-soft); border-radius: 3px; font-size: .86rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
h1 { margin: 0; color: var(--ink); font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; line-height: 1.3; white-space: nowrap; }
.site-meta { display: flex; gap: .75rem; align-items: baseline; order: 1; }
.app-version { color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ===== 方向D: 見出しの帯（2026-10-15） =====
   波紋の半径は中身の箱を基準に測り、全幅の帯へ切らずに描く。 */
.site-header {
  position: relative; color: #fff; padding-bottom: 1.4rem;
}
.header-band {
  margin-bottom: 1.3rem;
  background:
    radial-gradient(circle var(--ripple-radius) at var(--ripple-x) 135%, rgba(143, 211, 201, .30) 0 16%, transparent 16.3%),
    radial-gradient(circle var(--ripple-radius) at var(--ripple-x) 135%, transparent 0 24%, rgba(255, 255, 255, .09) 24.2% 24.7%, transparent 24.9%),
    radial-gradient(circle var(--ripple-radius) at var(--ripple-x) 135%, transparent 0 32%, rgba(255, 255, 255, .06) 32.2% 32.7%, transparent 32.9%),
    var(--brand);
}
.site-header .clinic-name { color: #bfe3dc; letter-spacing: .2em; }
@media (max-width: 38.75em) { .site-header .clinic-name { letter-spacing: .1em; } }  /* スマホでは右上の「令和6年版」に重なった（2026-10-15） */
.site-header h1 { color: #ffffff; font-family: var(--serif); font-weight: 600; font-size: 1em; letter-spacing: .03em; }  /* スマホは1行に収まる大きさまで縮める */
.site-header .app-icon { flex: none; width: .9em; height: .9em; border-radius: 0; }
/* 320pxでも題字の大きさと帯の高さを保つ。 */
@media (max-width: 20em) {
  .site-title { column-gap: 0; }
  .site-header .app-icon { width: .75em; height: .75em; }
}
.site-header .edition { color: #ffffff; background: transparent; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; }
.site-header .page-intro, .site-header .app-version { color: var(--on-brand); }
.site-header :focus-visible { outline-color: #ffffff; }
/* 明朝は4か所だけ: 題字・順位の見出し・大きな数字・見通しの見出し */
.rank-lead, #forecast-title { font-family: var(--serif); font-weight: 600; }
#rank-count { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; }
#forecast-title { color: var(--ink); letter-spacing: .06em; }

main { max-width: 1160px; margin: 0 auto; padding: .3rem 1.5rem 4rem; }
/* 前文はヘッダーの中に置く（1200px以上ではタイトルの右）。それより狭い画面ではタイトルの下に全幅で */
.page-intro { flex-basis: 100%; order: 2; max-width: 36em; margin: .35rem 0 .2rem; color: var(--muted); font-size: .88rem; line-height: 1.7; }
section { margin-bottom: 1.25rem; }
h2 { margin-bottom: .8rem; color: var(--muted); font-size: .86rem; font-weight: 700; letter-spacing: .12em; }
/* 見出しの文字は隠すが、支援技術には残す（入力欄と大きな数字が見出しの役目を果たすため） */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== 入力（ラベル左・＋−と数字右の3段。621〜999px だけ横3列） ===== */
/* 歯の本数の入れ方の切り替え（2026-10-04、利用者の決定）。2つの押しボタンを1本の帯に並べ、選んでいる方を濃く。
   抜けた歯で数える: 年齢・抜けた歯・残っている親知らず。今ある歯の本数を入れる: 年齢・現在歯数 */
.count-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: .5rem 0 .2rem; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.count-mode button { min-height: 2.2rem; padding: .3rem .5rem; color: var(--muted); font-size: .86rem; background: var(--card); border: 0; border-radius: 0 !important; }
.count-mode button + button { border-left: 1px solid var(--line); }
.count-mode button[aria-checked="true"] { color: #ffffff; background: var(--brand); }  /* 帯と同じ青緑（方向D） */
.count-mode button:active { transform: none; }
#input-form[data-mode="lost"] .field-count, #input-form[data-mode="count"] .field-lost, #input-form[data-mode="count"] .field-wisdom { display: none; }
/* 「残っている親知らず」は狭い欄で切れたので、見出しだけ2行に折り返してよい */
.field-wisdom label, .field-lost label { white-space: normal; line-height: 1.3; word-break: auto-phrase; }
/* 「抜けた歯」の下の「（親知らず以外）」は1段小さく（2026-10-04 利用者の指示） */
.label-sub { font-size: .86rem; font-weight: 700; white-space: nowrap; letter-spacing: -.02em; font-feature-settings: "palt"; margin-left: -.15em; }
#input-form {
  padding: calc(.5rem + 1px) calc(1.25rem + 1px) calc(.6rem + 1px);
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.input-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
.input-grid > div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label stepper" "hint hint" "error error";
  align-items: center;
  padding: .6rem 0;
  border-top: 1px solid var(--line-soft);
}
.input-grid > div:first-child { border-top: 0; }
label { grid-area: label; display: block; margin: 0; color: var(--ink); font-size: .95rem; font-weight: 700; }
.stepper { grid-area: stepper; display: grid; gap: .4rem; grid-template-columns: 2.7rem 5.2rem 2.7rem; align-items: center; }
input {
  width: 100%;
  min-height: 2.8rem;
  padding: .25rem .4rem;
  color: var(--ink);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input::placeholder { color: var(--faint); }
input:hover { border-color: #b9c7ce; }
input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); outline: 0; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { appearance: none; margin: 0; }
button {
  min-height: 2.7rem;
  padding: .45rem .8rem;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  background: var(--card);
  border: 1.5px solid #b9c7ce;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), color .18s var(--ease);
}
.stepper button { padding: 0; font-size: 1.3rem; line-height: 1; border-radius: 50%; aspect-ratio: 1; min-height: 2.7rem; }
/* 押しっぱなしで増減するので、長押しで文字選択・メニュー・拡大が出ないようにする */
.stepper button { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button:hover { background: var(--paper); border-color: var(--muted); }
button:active { transform: scale(.94); }
button:disabled { color: var(--faint); background: var(--paper); border-color: var(--line); cursor: not-allowed; transform: none; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
#chart:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.hint { grid-area: hint; margin: .3rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.field-error { grid-area: error; }
.field-error:not(:empty) { margin: .3rem 0 0; color: #b91c1c; font-size: .86rem; font-weight: 700; }
/* 空のエラー欄は段落の下余白だけが残り、行が間延びしていた（2026-10-03。以前は1200px以上だけ消していた） */
.field-error:empty { margin: 0; }
input.is-error { color: #b91c1c; border-color: #b91c1c; background: #fef2f2; }

/* ソフトウェアテンキー。マウスで欄を押したとき浮かんで出る（下の内容を押し下げず、ほかの入力欄にも被せない）。
   ふつうは欄の右横（2列のときはグラフの余白の上）、621〜999px は欄の下、620px以下は画面下の帯 */
.keypad {
  position: absolute; z-index: 5; top: -.35rem; left: calc(100% + .6rem);
  display: grid; gap: .35rem; grid-template-columns: repeat(4, 2.6rem);
  padding: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: .9rem;
  box-shadow: 0 12px 28px -12px rgba(22, 36, 44, .35);
}
.keypad[hidden] { display: none; }
.keypad-key { min-height: 2.5rem; padding: 0; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.keypad-edit { color: var(--muted); background: var(--paper); }
.keypad-key:disabled { color: #c3cfd5; background: var(--card); border-color: var(--line-soft); }

/* ===== メインの結果（カード。右端に100人の点） ===== */
.headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text people" "median people" "echo people" "note people";
  gap: 0 1.25rem;
  align-items: center;
  margin: 0 0 1.25rem;
  padding: calc(1.1rem + 1px) calc(1.25rem + 1px) calc(1rem + 1px);
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.headline .rank-result { grid-area: text; }
.headline .average-echo { grid-area: echo; }
.headline .median-result { grid-area: median; }
.headline .result-note { grid-area: note; }
.rank-result {
  margin-bottom: .4rem;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .005em;
}
#rank-count {
  display: inline-block;
  margin: 0 .05em;
  font-size: 4.4em;  /* 主役の人数は大きく（A2。利用者が雑誌風の見本の大きな数字を評価） */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  vertical-align: -.1em;
}
#rank-share { font-weight: 700; }
/* 大きな数字の上に、何の数かを言い切る見出しを1行（比較作品の「見出し＋大きな数字」に倣う。2026-10-04、利用者の決定） */
.rank-lead { display: block; margin-bottom: .15rem; font-size: .82em; letter-spacing: .02em; }
/* 「◯歳ごろに平均に並びます」（見通しの文と同じ）を大きな数字のすぐ下にも */
.average-echo:empty { display: none; }
.average-echo { margin: .1rem 0 .5rem; color: var(--teal-deep); font-size: .98rem; font-weight: 700; line-height: 1.5; }
/* 中央値と自分との差（2026-10-07、利用者の指示。以前はグラフの下の内訳の枠） */
.median-result { margin: 0 0 .45rem; color: var(--ink); font-size: .98rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.median-result .blank { min-width: 2.6em; margin-left: .2em; }
.result-note { margin: 0; color: var(--muted); font-size: .86rem; }
/* 位置の区分（上位・まん中・下位）は語で伝える。数字の色は分けず、意味の3色・エラーの赤と衝突させない */
.is-upper, .is-middle, .is-lower { color: var(--ink); }
/* 入力がそろうまでの空欄。点線の枠で「ここに入る」を示す */
.blank { display: inline-block; min-width: 3.2em; height: .95em; border: 1.5px dashed #b9c7ce; border-radius: .3em; vertical-align: middle; }
#rank-count.blank { min-width: 1.6em; height: .8em; }
/* 同年代100人を10×10の点で。結果が出たら、自分より歯が多い人を灰色、次の1つ（自分の位置）を青、残り（自分より少ない人＝文の人数）を濃い色にする。
   （以下の経緯の時点では、文の人数は多い人だった）。
   残り（自分より少ない人）を濃い色にする。多い人を濃く塗ると進み具合の棒のように見えたため入れ替えた（2026-10-02、利用者の指摘）。
   数え上げ（350ms）と同じ速さで順に塗る */
.people { grid-area: people; justify-self: end; display: grid; grid-template-columns: repeat(10, .58rem); gap: .28rem; }
.people i {
  display: block; width: .58rem; height: .58rem; border-radius: 50%;
  background: var(--line);
  transition: background-color .12s linear, transform .12s linear;
  transition-delay: calc((99 - var(--i)) * 3.5ms);
}
.people i.is-on { transition-delay: calc(var(--i) * 3.5ms); }
.people.has-result i { background: var(--ink); }
.people.has-result i.is-on { background: var(--line); }
.people.has-result i.is-me { background: var(--blue); transform: scale(1.35); }
.people.has-result i:hover { transform: scale(1.6); transition-delay: 0s; }
/* 点の色の意味を点の下に小さく添える（色だけで優劣を匂わせないため。2026-10-03、見直しの指摘） */
/* 「人」の1字だけが次の行へ落ちた（点の格子は約150〜220px）ので、「あなたより」の後で行を変える（2026-10-04、利用者の実機） */
.people.has-result[data-caption]::after { content: attr(data-caption) "\A青＝あなた"; color: var(--ink); font-weight: 700; }
.people.has-result[data-peer]::after { content: attr(data-peer) "\A濃い点＝あなたより\200B歯が少ない人"; color: var(--ink); font-weight: 700; }
/* 次に埋める欄。動きを減らす設定でも青い縁だけは出す */
input.is-next:not(:focus) { border-color: var(--blue); }
/* スマホで保存できないとき、画像を出して長押しで保存してもらう */
.saved-image { width: min(92vw, 40rem); padding: 1rem; border: 0; border-radius: 12px; }
.saved-image::backdrop { background: rgba(15, 23, 42, .55); }
.saved-image p { margin: 0 0 .6rem; font-weight: 700; }
.saved-image img { display: block; width: 100%; height: auto; margin-bottom: .8rem; -webkit-touch-callout: default; }
.saved-close { min-height: 2.75rem; width: 100%; }
.people.has-result::after {
  content: "濃い点＝あなたより\200B歯が少ない人\A青＝あなた";
  grid-column: 1 / -1; margin-top: .35rem;
  color: var(--muted); font-size: .86rem; line-height: 1.5; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere;  /* 点の格子が狭い幅（768〜1199）でも枠の中で折り返す（2026-10-04、独立採点の指摘） */
}

/* 内訳は結果のすぐ下に、横一列で（2026-09-03、利用者の指示） */
/* 内訳とグラフの補足を1枚の枠に（2026-10-01、利用者の指示。以前は内訳が枠なしの1行、補足はグラフの下） */
#result-section { margin-bottom: 1.2rem; padding: .8rem 1.1rem .85rem; background: var(--card); border: 1px solid transparent; border-radius: 22px; box-shadow: var(--shadow); }
#result-section[hidden] { display: none; }

#result-section:not(:has(.chart-note:not([hidden]):not(:empty))) { display: none; }  /* 中央値の行を大きな数字の下へ移し、注記だけの枠になった（2026-10-07） */

/* ===== グラフ（主役） ===== */
.chart-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title button" "gap gap" "chart chart" "dropped dropped" "legend legend";
  align-content: start;  /* 欄が周りに合わせて伸びたときの余りは下へ（言い切りの行に配られ、図が状態で上下した。2026-10-05） */
  align-items: center;
  padding: calc(1rem + 1px) calc(1.25rem + 1px) calc(1.1rem + 1px);
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.chart-section h2 { grid-area: title; margin: 0; position: relative; }
.save-image { grid-area: button; margin: 0; padding: .4rem .9rem; font-size: .86rem; min-height: 2.5rem; border-radius: 14px; }
.save-image:not(:disabled) { color: #fff; background: linear-gradient(#1a6477, #0f4c5c); border: 1px solid var(--brand); box-shadow: 0 6px 14px -4px rgba(15, 76, 92, .55); }
.save-image:not(:disabled):hover { box-shadow: 0 10px 18px -4px rgba(15, 76, 92, .55); }
@media (prefers-reduced-motion: no-preference) {
  .save-image:not(:disabled):hover { transform: translateY(-1px); }
}
.chart-wrap { grid-area: chart; margin-top: .6rem; overflow-x: auto; }
#chart { display: block; width: 100%; height: auto; margin: 0 auto; background: var(--card); }  /* カードと同じ生成り（方向D） */
.grid-line { stroke: #e9eff2; stroke-width: 1; }
.axis-line { stroke: #c3cfd5; stroke-width: 1.25; }
/* 目盛りと線の名前は本文と同じ 4.5:1 以上（#52626b は白地で 6.3:1）。実寸13px */
/* 図の中の字は実寸15px以上（高齢者向けの目安。以前は13px。2026-10-04、デザイン改良サイクルの評価） */
.axis-label, .curve-label { fill: #52626b; font-size: 16px; }  /* 高齢者の基準（図の主要な字16px） */
/* 28本と20本（8020）の目安線。統計の線より控えめな破線で、目盛りの数字だけ太くする */
.ref-line { stroke: #a9b8c0; stroke-width: 1.25; stroke-dasharray: 3 4; }
.ref-label { fill: #3f515b; font-weight: 700; }
/* 8020の交点（80歳・20本）。統計の線や見通しの点より控えめな、白抜きの◇ */
.ref-mark { fill: #ffffff; stroke: #3f515b; stroke-width: 1.5; }
.ref-mark-label { fill: #3f515b; font-size: 16px; font-weight: 700; paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
/* 100人の点にふれたときの印。統計の線とも見通しの3色とも分かれるよう、濃い札に白抜きの字 */
.peer { pointer-events: none; }
.peer-point { fill: #ffffff; stroke: #16242c; stroke-width: 2.5; }
.peer-bg { fill: #16242c; }
.peer-label { fill: #ffffff; font-size: 16px; font-weight: 700; }
/* グラフをなぞったときの、保てた場合の線の上の印（指は横になぞる。縦はページのスクロールに残す） */
#chart { touch-action: pan-y; }
main:not(.is-empty) #chart { cursor: ew-resize; }
.scrub-line { stroke: #0d9488; stroke-width: 1; stroke-dasharray: 2 3; }
.scrub-point { fill: #ffffff; stroke: #0d9488; stroke-width: 3; }
.people.is-scrubbing i, .people.is-scrubbing i.is-on { transition-delay: 0s; }
.chart-dropped { grid-area: dropped; display: block; flex-wrap: wrap; gap: .1rem 1rem; margin: .3rem 0 0; font-size: .92rem; font-weight: 700; }
.chart-dropped:not([hidden]):not(:empty) { display: flex; }
.chart-dropped[hidden] { display: none; }  /* display:flex に負けて空の行が残っていた（2026-10-07、共通の網羅検査） */
.dropped-current-label { color: #2563eb; }
.dropped-trajectory-label { color: #c2410c; }
.dropped-average-label { color: var(--teal-deep); }
.dropped-gap-label { color: #9a3412; }
.chart-hint, .key-hint-copy { margin-left: .6em; color: var(--muted); font-size: .86rem; font-weight: 400; letter-spacing: 0; }
.chart-key-hint { display: none; position: absolute; inset: 0; font: inherit; color: inherit; letter-spacing: inherit; pointer-events: none; }
/* 元の題と案内を場所取りに残し、同じ行分けで重ねる。 */
.chart-key-hint::before { content: "グラフ"; visibility: hidden; }
.chart-section:has(#chart:focus-visible) .chart-hint { visibility: hidden; }
.chart-section:has(#chart:focus-visible) .chart-key-hint { display: block; }
.is-empty .chart-hint { display: none; }
/* 25〜75パーセンタイルの帯。同年代の「まん中の半分」がどこかを面で見せる */
.band { fill: #e2eaee; stroke: none; }
/* 統計の線は白地と3:1以上（図形の基準）にし、細くして見通しの色の線より控えめに保つ（以前は #b9c7ce で1.7:1。2026-10-04、独立採点の指摘） */
.curve { fill: none; stroke: #86959e; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.curve-outer { stroke: #86959e; stroke-width: .9; }
.median-curve { stroke: #3f515b; stroke-width: 3; }
.is-drawing .curve-leader { animation: curve-leader-in .15s linear 2s both; }
@keyframes curve-leader-in { from { opacity: 0; } to { opacity: 1; } }
.goal-line { fill: none; stroke: #0d9488; stroke-width: 2.25; stroke-dasharray: 6 5; stroke-linecap: round; }
/* path で描くので fill: none が要る。付け忘れると内側が黒く塗られる */
/* 2つの計算の違いの面（推移の赤茶を薄く）と、その札（白地 7:1 以上の濃い赤茶） */
.gap-area { fill: url(#gap-hatch); stroke: none; transition: d .35s var(--ease); }  /* 線と同じ速さで形を変える（面だけ先に跳んだ） */
.gap-bracket { fill: none; stroke: #9a3412; stroke-width: 1.75; }
.gap-count { paint-order: stroke; stroke: #ffffff; stroke-width: 5px; stroke-linejoin: round; }
/* 決め所の言い切り。図の題のすぐ下の決まった場所に、いつも同じ形で大きく（2026-10-05、利用者の決定） */
.gap-headline { grid-area: gap; display: grid; margin: .45rem 0 .15rem; }  /* いつもラベル1行＋値1行（状態で1行・2行が変わり、図が上下した） */
.gap-headline[hidden] { display: none; }
@media (min-width: 62.5em) and (min-height: 41.3125em) {
  /* 言い切りの有無で図が82px上下した（本数を±1変えたとき）。場所はいつも取り、無いときは見せないだけ（2026-10-05、デザイン改良サイクルの評価） */
  .gap-headline[hidden] { display: grid; visibility: hidden; }
  .gap-headline { min-height: 4.75rem; align-content: start; }  /* 短い文（1〜3行）と言い切り（2行）で図が上下した（1440幅で42px、1280×800で21px。2026-10-06） */
}
/* 最後の欄の Enter で結果の文へ移したフォーカスは、カード全体の枠で見せる（文の枠が大きな数字を横切った。2026-10-05、デザイン改良サイクルの評価） */
#rank-result:focus { outline: none; }
.headline:has(#rank-result:focus-visible) { box-shadow: 0 0 0 3px var(--blue); }  /* 薄い色では1.9:1で3:1に届かなかった */
.gap-headline-label { color: var(--muted); font-size: .92rem; font-weight: 700; }
.gap-headline-label .is-goal { color: var(--teal-deep); }
.gap-headline-label .is-drift { color: #9a3412; }
.gap-headline-note { color: var(--muted); font-size: .92rem; font-weight: 700; }
.gap-headline-note .nowrap { white-space: nowrap; }  /* 「面）」だけが最後の行に落ちた（2026-10-06） */
.gap-headline-value .nowrap { white-space: nowrap; }
.gap-headline-label { word-break: keep-all; }
.gap-headline-value { color: #9a3412; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.gap-label { fill: #9a3412; font-size: 16px; font-weight: 700; }
.depleted-point { fill: #c2410c; stroke: #ffffff; stroke-width: 1.5; }
.trajectory-halo { fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; stroke-opacity: .9; }
.trajectory-line { fill: none; stroke: #c2410c; stroke-width: 2.25; stroke-dasharray: 2 5; stroke-linecap: round; }
.current-point { fill: #2563eb; stroke: #ffffff; stroke-width: 2.5; }
.traveler { fill: #2563eb; stroke: #ffffff; stroke-width: 2.5; }
.average-point { fill: #ffffff; stroke: #0f766e; stroke-width: 3; }
.current-leader { stroke: #16242c; stroke-width: 1.25; }
.average-label { fill: #0f766e; font-size: 16px; font-weight: 700; paint-order: stroke; stroke: #ffffff; stroke-width: 5px; stroke-linejoin: round; }
.current-label { fill: #16242c; font-size: 16px; font-weight: 700; paint-order: stroke; stroke: #ffffff; stroke-width: 6px; stroke-linejoin: round; }
/* 次の赤い点の札。線と同じ赤茶で、行と同じ言い方（2026-10-03、利用者の指示） */
.trajectory-label { fill: #c2410c; font-size: 16px; font-weight: 700; }
.goal-point { fill: #ffffff; stroke: #0d9488; stroke-width: 3; }
.trajectory-point { fill: #ffffff; stroke: #c2410c; stroke-width: 3; }
.focus-ring { fill: none; stroke-width: 2; stroke-dasharray: 3 3; }
/* 丸と点線は、値が変わると350msで形を補間する。「自分の点」は見通しの丸まで600msで動く */
.current-point, .average-point, .goal-point, .trajectory-point { transition: cx .35s var(--ease), cy .35s var(--ease), r .35s var(--ease); }
.traveler, .focus-ring { transition: cx .6s var(--ease), cy .6s var(--ease); }
.goal-line, .trajectory-line, .trajectory-halo { transition: d .35s var(--ease); }

/* 操作の案内は欄外に残し、凡例の8項目を1つの「図の見方」にまとめる */
.legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: .7rem 0 .2rem; color: var(--muted); font-size: .86rem; position: relative; }
/* 凡例は丸い札にせず、枠のない並びにする（A2） */
.legend span { display: inline-flex; gap: .45rem; align-items: center; padding: .15rem .6rem .15rem 0; }
/* 開閉は標準のdetailsに任せ、見出しはどの幅でも操作できる高さを取る */
.legend-more { display: block; flex-basis: 100%; }
.legend-more > summary { display: flex; align-items: center; min-height: 2rem; position: relative; padding-left: 1.3rem; color: var(--ink); font-weight: 700; }
.legend-more > summary::before { content: "▶"; position: absolute; left: 0; width: 1rem; text-align: center; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1; }
.legend-more[open] > summary::before { transform: rotate(90deg); }
.legend-more > span:nth-last-child(-n+3) { display: flex; }
/* 細い線記号が inline-flex の基準線になる分だけ補正し、既存の行送りを保つ。 */
@media (min-width: 38.8125em) {
  .legend-more > span:has(.goal-dot), .legend-more > span:has(.trajectory-dot) { transform: translateY(-.37em); }
}
#hint-age.is-first { font-weight: 700; color: var(--brand); }
@media (min-width: 40.0625em) and (max-width: 43.75em) {
  #hint-age.is-first { white-space: nowrap; }
}
@media (min-width: 43.8125em) and (max-width: 44.99em) {
  #hint-age.is-first { white-space: nowrap; font-size: 15.4px; letter-spacing: -.03em; text-indent: -.5px; }
}
.dot { display: inline-block; flex: none; width: .75rem; height: .75rem; border-radius: 50%; }
.current-dot { background: #2563eb; }
.goal-dot { width: 1.2rem; height: 0; border-radius: 0; border-top: 2.5px dashed #0d9488; }
.trajectory-dot { width: 1.2rem; height: 0; border-radius: 0; border-top: 2.5px dotted #c2410c; }
/* ◇は図の◇と同じ色。28本の線の印（薄い点線）は見えにくいので外し、説明の字だけにした（2026-10-05、利用者の実機） */
/* 灰色の帯（図の .band と同じ色）。白地で見えるよう縁を付ける（2026-10-05、利用者の指示で凡例の1項目に） */
.legend .legend-hint { display: none; }
.legend .legend-key-hint { display: none; }
.no-scrub .chart-hint { visibility: hidden; }
@media (max-width: 38.75em) { .no-scrub .chart-hint { display: none; } }  /* スマホでは空白の帯に見えた（2026-10-06） */  /* 消すと題の高さが変わり、1280×800で図が8px動いた（2026-10-06） */  /* .legend span の inline-flex に負けて全幅に出ていた */
.gap-dot { width: 1.2rem; height: .75rem; border-radius: 2px; background: repeating-linear-gradient(45deg, rgba(194, 65, 12, .45) 0 1.5px, rgba(194, 65, 12, .05) 1.5px 4.2px); box-shadow: inset 0 0 0 1px rgba(194, 65, 12, .45); }
.band-dot { width: 1.2rem; height: .75rem; border-radius: 2px; background: #e2eaee; box-shadow: inset 0 0 0 1px #c5d2d9; }
.mark-dot { width: auto; height: auto; border-radius: 0; color: #3f515b; font-weight: 700; line-height: 1; }

.chart-notes { margin: 0; }
.chart-note { margin: 0 0 .2rem; font-size: .88rem; line-height: 1.6; }
.chart-note:last-child { margin-bottom: 0; }
.chart-note-fixed { color: var(--muted); font-size: .86rem; }
.note-8020[hidden], .forecast-block[hidden] { display: none; }

/* ===== 見通し（推測）。2枚横並び ===== */
/* 「推測」の見出しは、緑の帯より弱く見えないよう本文の濃さと大きさにする（2026-10-03、見直しの指摘） */
.forecast-title { margin: 0 0 .6rem; color: var(--ink); font-size: .92rem; letter-spacing: .06em; }
.forecast-columns { display: grid; gap: .9rem; }
@media (min-width: 47.5em) { .forecast-columns { grid-template-columns: 1fr 1fr; align-items: start; } }
.forecast-block {
  position: relative;
  height: auto;  /* 高さをそろえると2列表示で100〜130px空いた（2026-10-05） */
  padding: 1rem 1.15rem 1.1rem;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: var(--shadow);
  transition: opacity .3s var(--ease);
}
@media (max-width: 32.5em) {
  #input-form, .headline, #result-section, .chart-section, .forecast-block { border-radius: 18px; }
}
.forecast-block::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 0;
  background: #c3cfd5;
}
.forecast-keep::before { background: #0d9488; }
.forecast-drift::before { background: #c2410c; }
/* 入力前は空の箱を並べず、案内を1枚だけ出す（2026-10-03、見直しの指摘） */
.forecast-empty { display: none; margin: 0; padding: 1.1rem 1.2rem; color: var(--muted); font-size: .9rem; line-height: 1.6; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }
.is-empty .forecast-empty { display: block; }
.is-empty .forecast-columns { display: none; }
.chart-note:empty { display: none; }
.forecast-block h3 { display: flex; gap: .5rem; align-items: center; margin: 0 0 .3rem; color: var(--ink); font-size: .98rem; font-weight: 700; }
.forecast-block h3 .goal-dot, .forecast-block h3 .trajectory-dot { width: 1rem; }
/* 行の人数が何の数かを、見出しの下に1行で（物差しを大きな数字とそろえた。2026-10-04） */
.forecast-unit { margin: 0 0 .2rem; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.future-results p { margin: .4rem 0 0; }
/* 行はボタン。押すとその年齢の丸と順位が強調され、「自分の点」がそこまで動く */
.forecast-row {
  display: flex; flex-wrap: wrap; gap: 0 .7rem; align-items: baseline;
  width: 100%; min-height: 0; margin: 0; padding: .45rem .5rem .45rem .6rem;
  color: inherit; font: inherit; font-weight: 400; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0;
}
.forecast-row:first-child { border-top: 0; }
button.forecast-row { cursor: pointer; border-radius: .5rem; transition: background-color .18s var(--ease), box-shadow .18s var(--ease); }
button.forecast-row:hover { background: var(--paper); border-color: var(--line-soft); }
button.forecast-row:active { transform: none; }
button.forecast-row[aria-pressed="true"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--ink); }
.forecast-age { min-width: 3.8rem; color: var(--muted); font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.forecast-value { color: var(--ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.forecast-note { color: var(--muted); font-size: .86rem; }
.forecast-sub { color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; }
.forecast-out-of-range { margin: .6rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
/* 「何歳で平均に並ぶか」。このアプリでいちばん伝えたい行なので、少し強く見せる */
.average-age:empty { display: none; }
.average-age:not(:empty) {
  margin: .8rem 0 0; padding: .6rem .8rem;
  color: var(--teal-deep); font-size: .95rem; font-weight: 700; line-height: 1.55;
  background: none; border-radius: 0; border-left: 3px solid var(--teal);  /* 左の線だけで示す（A2。地の色の箱は枠の中の枠に見えた。2026-10-04、独立採点の指摘） */
}
.inline-note { color: var(--muted); font-size: .86rem; }
/* 2つの見通しの比べ（横棒2本）。色は意味の色、文字は本文の色 */

/* 下の補足情報は同じ位置で切り替える。Q&Aの問いだけ折りたたむ。 */
details { padding-top: 0; }
summary { color: var(--ink); cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
ul { margin-bottom: 0; padding-left: 1.25rem; }
.folded-row { margin-top: 1.25rem; }
.tab-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tab-list button { min-width: 0; min-height: 52px; padding: .65rem .5rem; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink); font: 700 1rem/1.4 "Noto Sans JP", sans-serif; cursor: pointer; word-break: keep-all; }
.tab-list button:hover { color: var(--brand); background: #f3eee4; }
.tab-list button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tab-list button:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.tab-panel[hidden] { display: none; }
.tab-panel .folded-body { padding: 1rem 0 1.2rem; }
.tab-panel .folded-body > details { padding: .1rem 0; border-top: 1px dashed var(--line); }
.tab-panel .folded-body > details > summary { position: relative; padding: .55rem 2rem .55rem 0; font-size: .93rem; }
.tab-panel .folded-body > details > summary:hover { background: #f3eee4; border-radius: 10px; color: var(--brand); }
.tab-panel .folded-body > details > summary::after { content: ""; position: absolute; right: .7rem; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.tab-panel .folded-body > details[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.tab-panel .folded-body > details > p { margin: 0 0 .7rem; padding-left: 1.2em; font-size: .92rem; line-height: 1.75; }
.tab-panel .folded-body > details ol { margin: 0 0 .7rem; padding-left: calc(1.2em + 1.4rem); font-size: .92rem; line-height: 1.75; }
.folded p, .folded ol, .folded ul { font-size: .92rem; line-height: 1.75; }
.folded ol { padding-left: 1.4rem; }
.folded a { color: var(--brand); text-underline-offset: .2em; }
@media (max-width: 38em) { .tab-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 参考文献 */
.reference-title { margin: 1.2rem 0 .3rem; color: var(--ink); font-size: .92rem; letter-spacing: 0; }
.reference-note { margin-bottom: .5rem; color: var(--muted); font-size: .86rem; }
.reference-list { margin: 0; padding-left: 1.4rem; color: var(--text); font-size: .86rem; line-height: 1.7; }
.reference-list li { margin-bottom: .4rem; }
/* 年齢別の歯の本数の表（統計の値をそのまま。検索で「60歳 歯 何本」などに当たるよう、本文に置く。2026-10-04 利用者の決定） */
.age-table { width: 100%; max-width: 34rem; border-collapse: collapse; color: var(--text); font-size: .86rem; font-variant-numeric: tabular-nums; }
.age-table th, .age-table td { padding: .3rem .6rem; text-align: center; border-bottom: 1px solid var(--line-soft); }
.age-table th:first-child, .age-table td:first-child { text-align: left; white-space: nowrap; }
.age-table thead th { color: var(--muted); font-size: .86rem; font-weight: 700; }
.age-table td.median { color: var(--ink); font-weight: 700; }
.age-table-note { margin: .6rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }

footer { max-width: 1160px; margin: 0 auto; padding: 1rem 1.5rem 2rem; color: var(--on-brand); font-size: .86rem; letter-spacing: .06em; background: var(--brand); box-shadow: 0 0 0 100vmax var(--brand); clip-path: inset(0 -100vmax); }

/* ===== 広い画面（1000px以上）: 左に入力＋結果、右にグラフ。結果とグラフが最初の画面に入る ===== */
@media (min-width: 62.5em) {
  main {
    display: grid;
    grid-template-columns: minmax(340px, 2fr) minmax(0, 3fr);
    /* 内訳の帯はグラフの下（左の列が長くなりスクロールが増えた。2026-10-05、利用者の指示） */
    grid-template-areas: "input chart" "headline chart" "headline median" "forecast forecast" "folded folded";
    grid-template-rows: auto auto 1fr auto auto;  /* 順位のカードの高さの余りは3行目に回し、グラフと内訳の帯のあいだを空けない */
    gap: 0 1.5rem;
    align-items: start;
  }
  /* 下の入力のカードと同じ幅で折る（2026-10-07、利用者の指摘）。max-width で縮めると題と同じ行へ上がるので、行は全幅のまま右を空ける */
  .page-intro { max-width: none; padding-right: calc(100% - max(340px, (100% - 1.5rem) * 2 / 5)); }
  .input-section { grid-area: input; margin-bottom: 1rem; }
  .headline { grid-area: headline; }
  #result-section { grid-area: median; }
  .lower-layout { display: contents; }
  .chart-section { grid-area: chart; }
  .forecast { grid-area: forecast; margin-top: .25rem; }
  .folded-row { grid-area: folded; }
  h1 { font-size: 2.1rem; }
  #rank-count { font-size: 4em; letter-spacing: -.07em; }
  #input-form { padding: calc(.4rem + 1px) calc(1.25rem + 1px) calc(.5rem + 1px); }
  /* 左の列は狭いので、100人の点は文の下・カードの右端に */
  .headline { grid-template-columns: 1fr; grid-template-areas: "text" "median" "echo" "note" "people"; }
  .people { justify-self: start; margin-top: .9rem; grid-template-columns: repeat(20, .42rem); gap: .2rem; }  /* 右に寄って左下が空いた。10×10では左の列が伸びたので20×5に（2026-10-05） */
  .people i { width: .42rem; height: .42rem; }
}
.left-column { display: contents; }
@media (min-width: 62.5em), (max-width: 38.75em) {
  .headline { container-type: inline-size; }
  .people.has-result::after { justify-self: start; width: max-content; max-width: 100cqw; }
}

/* ===== 1200px以上: 左に入力と順位、中央にグラフ、右に見通し。HD画面（1280×720 で Chrome を最大化すると
   表示域は高さ約585px）でも、順位・グラフ・見通しの結果まで、スクロールせずに最初の画面に入る（2026-10-01、利用者の依頼） ===== */
@media (min-width: 75em) {
  .site-header, main, footer { max-width: 1440px; }
  /* ヘッダーは左に医院名とタイトルの2行、中央に前文、右に版。前文の段をなくして縦を空ける */
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "clinic intro meta" "title intro meta";
    gap: 0 2rem;
    align-items: center;
    padding: .6rem 1rem .5rem;
  }
  .clinic-name { grid-area: clinic; }
  .site-title { grid-area: title; }
  .site-meta { grid-area: meta; align-self: start; }
  .page-intro { grid-area: intro; max-width: 52em; margin: 0; padding-right: 0; font-size: .86rem; line-height: 1.6; }
  h1 { font-size: 1.6rem; }
  /* 内訳と補足の枠は、高さのそろう中央と右の列の下にまたがって置き、3列の下端をそろえる。
     左の列が長いときの余りは最後の 1fr の段が受ける（内訳の枠が押し下げられないように） */
  main {
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "left lower" "left median" "left ." "folded folded";
    gap: 0 1rem;
  }
  #result-section { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1.4rem; margin: .7rem 0 0; padding: .65rem 1.1rem .7rem; }
  .chart-notes { display: contents; }
  .chart-note { margin: 0; }
  .chart-note-fixed { flex-basis: 100%; }
  .left-column { display: block; grid-area: left; }
  /* 見通しの列はグラフのカードの下端までのばし、2枚目の枠で余りを受ける（列の下端をそろえる） */
  .lower-layout { display: grid; grid-area: lower; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 1rem; align-items: stretch; }
  .forecast { display: flex; flex-direction: column; }
  /* 見通しの2枚は中身の高さで止める（下の枠をグラフの高さまで伸ばすと、広い画面で中が空いた。2026-10-04、独立採点の指摘） */
  .forecast-columns { align-content: start; }
  .forecast-block { height: auto; }
  .chart-section, .forecast { grid-area: auto; margin: 0; }
  /* 左右の余白を詰めてグラフの幅を稼ぐ（グラフは幅×0.55の高さで描くので、幅があるほど横長に保てる） */
  main { padding-left: 1rem; padding-right: 1rem; }
  footer { padding-left: 1rem; padding-right: 1rem; }
  .chart-section { padding: calc(.9rem + 1px) calc(1rem + 1px) calc(1rem + 1px); }
  .is-empty .chart-hint { display: inline; visibility: hidden; }
  /* 凡例は文字を小さくして段数を減らし、中央の列だけが長くならないようにする */
  .legend { gap: .2rem .4rem; margin-top: .45rem; font-size: .86rem; }
  .legend span { gap: .35rem; padding: 0 .5rem 0 .4rem; }
  /* 入力は＋−を小さめにし、行の上下を詰める（押しやすさはマウス前提の広い画面なので保てる） */
  .input-section { margin-bottom: .4rem; }
  #input-form { padding: calc(.25rem + 1px) calc(1.1rem + 1px) calc(.35rem + 1px); }
  .input-grid > div { padding: .15rem 0; }
  /* 入れ方の切り替えは3列では細く（欄が3つになる「抜けた歯で数える」でも、HD画面に結果まで収めるため） */
  .count-mode { margin: .3rem 0 .1rem; }
  .count-mode button { min-height: 1.8rem; padding: .15rem .4rem; font-size: .86rem; }
  .stepper { grid-template-columns: 2.4rem 4.4rem 2.4rem; gap: .3rem; }
  .stepper button { min-height: 2.25rem; font-size: 1.15rem; }
  input { min-height: 2.25rem; font-size: 1.3rem; line-height: 1.45; padding-block: .1rem; }
  .hint { margin-top: 0; font-size: .86rem; line-height: 1.3; }
  /* 結果。平均に並ぶ年齢は右の見通しに同じ文が並んで見えるので、ここでは繰り返さない */
  .headline { margin-bottom: .7rem; padding: calc(.65rem + 1px) calc(1.1rem + 1px) calc(.6rem + 1px); }
  .rank-result { margin-bottom: .2rem; font-size: 1.1rem; }
  #rank-count { font-size: 3.2em; letter-spacing: -.06em; }
  /* 「5人以下（下位5%以内）」「95人以上（上位5%以内）」も1行に収める（HDで2行になり結果が1画面からはみ出した。2026-10-04、独立採点の指摘） */
  #rank-share { font-size: .82em; }
  .rank-result.is-long #rank-count { font-size: 2.6em; }
  .average-echo { display: none; }
  .median-result { margin-bottom: .3rem; font-size: .9rem; line-height: 1.45; }  /* 左の列は狭いので2行に収める */
  .result-note { font-size: .86rem; line-height: 1.35; }
  /* 100人は10×10でなく20×5で、高さを抑える */
  .people { justify-self: start; margin-top: .55rem; grid-template-columns: repeat(20, .42rem); gap: .2rem; }
  .people i { width: .42rem; height: .42rem; }
  /* 見通しは2枚を縦に重ね、行を詰める */
  .forecast-title { margin-bottom: .3rem; }
  .forecast-columns { grid-template-columns: 1fr; gap: .45rem; }
  .forecast-block { padding: .6rem .9rem .6rem; }
  .forecast-block h3 { margin-bottom: .1rem; font-size: .92rem; }
  .forecast-row { gap: 0 .5rem; padding: .18rem .4rem .18rem .5rem; line-height: 1.4; }
  .forecast-age { min-width: 3.3rem; }
  .forecast-value { font-size: 1.05rem; }
  .forecast-sub { font-size: .86rem; }
  .forecast-out-of-range { margin-top: .4rem; font-size: .86rem; line-height: 1.45; }
  .average-age:not(:empty) { margin-top: .45rem; padding: .45rem .7rem; font-size: .86rem; line-height: 1.5; }
  .rank-lead { margin-bottom: 0; font-size: .8em; letter-spacing: 0; }
  .headline { margin-bottom: .45rem; padding-bottom: calc(.45rem + 1px); }
}

/* 低い画面（高さ660px未満。HD画面で Chrome を最大化した約585px、1366×768 の約633px）では、100人の点を省いて順位の文と注記を最初の画面に収める。
   点は数字と同じことを絵で示す飾り（読み上げでは隠している）なので、省いても伝わる内容は変わらない */
@media (min-width: 75em) and (max-height: 41.25em) {
  .people { display: none; }
  /* 言い切りは題と同じ行に（行を足すと結果まで1画面に収まらない）。なぞる案内はこの画面では省く */
  /* 言い切り（2行）を保存ボタンの左に。「グラフ」の題は読み上げにだけ残す（行を足すと結果まで1画面に収まらない） */
  .chart-section { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "gap button" "chart chart" "dropped dropped" "legend legend"; }
  .chart-section h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chart-hint, .is-empty .chart-hint { display: none; }
  .legend .legend-hint { display: inline-flex; flex-basis: 100%; }  /* 題の横の案内を隠したので、開閉欄の直前に */
  .legend .legend-key-hint { display: none; }
  .chart-section:has(#chart:focus-visible) .legend-hint:not(.legend-key-hint) { visibility: hidden; }
  .chart-section:has(#chart:focus-visible) .legend .legend-key-hint { display: inline-flex; position: absolute; inset: 0 0 auto; }
  .no-scrub .legend .legend-hint { display: none; }
  .gap-headline { margin: 0; }
  .gap-headline-label { font-size: .86rem; line-height: 1.3; }
  /* 言い切り・短い文・無しで図と保存ボタンが最大26px上下した。行の高さを決めて上にそろえる（2026-10-05） */
  .gap-headline { height: 2.8rem; align-content: start; }
  .gap-headline[hidden] { display: grid; visibility: hidden; }
  .gap-headline-note { font-size: .86rem; line-height: 1.3; }
  .chart-section .save-image { align-self: start; }
  .gap-headline-value { font-size: 1.15rem; }
  /* 補足の字を0.86remに上げても結果まで1画面に収まるよう、低い画面だけ行間と部品の高さを詰める（2026-10-04） */
  .site-header { padding-top: .25rem; padding-bottom: .25rem; }
  .headline { margin-bottom: .3rem; }
  .page-intro { line-height: 1.45; }
  .hint { line-height: 1.2; }
  .input-grid > div { padding: .08rem 0; }
  .stepper button, input { min-height: 2.1rem; }
  .count-mode { margin: .2rem 0 .05rem; }
  .headline { padding-top: calc(.5rem + 1px); padding-bottom: calc(.35rem + 1px); }
  #rank-count { font-size: 3em; }
  .result-note { line-height: 1.25; }
  .chart-section { padding-top: calc(.6rem + 1px); padding-bottom: calc(.6rem + 1px); }
  .legend { margin-top: .3rem; gap: .1rem .4rem; line-height: 1.3; }
  .forecast-block { padding-top: .45rem; padding-bottom: .45rem; }
  .forecast-row { padding-top: .12rem; padding-bottom: .12rem; }
  .average-age:not(:empty) { margin-top: .3rem; padding-top: .3rem; padding-bottom: .3rem; line-height: 1.4; }
}

/* ===== 1列の画面（999px以下）: 結果カードの直後にグラフ、その後に見通し、内訳と補足の枠は最後
   （内訳の枠が結果とグラフのあいだにあると、グラフが4枚目になって遠かった。2026-10-03、見直しの指摘） ===== */
@media (max-width: 62.4375em) {
  main { display: flex; flex-direction: column; }
  .lower-layout { display: contents; }
  #result-section { order: 1; }
  .folded-row { order: 2; }
}

/* ===== 中くらいの画面（621〜999px）: 入力を横3列に ===== */
@media (min-width: 38.8125em) and (max-width: 62.4375em) {
  #input-form { padding: calc(1.1rem + 1px) calc(1.5rem + 1px) calc(1rem + 1px); }
  .input-grid { gap: 1rem 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .input-grid > div { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "stepper" "hint" "error"; align-content: start; padding: 0; border-top: 0; }
  /* 見出しは2行ぶんの高さにそろえ、下に寄せる（「年齢」だけ1行で、3つの＋−の高さがずれた。2026-10-04、デザイン改良サイクルの評価） */
  label { display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.7em; margin-bottom: .45rem; }
  .stepper { grid-template-columns: 2.6rem minmax(0, 6rem) 2.6rem; }
  /* 数値の欄は既定の幅より縮める（621〜640幅で3つ目の欄の＋が画面の外へ出て、横スクロールが1px出た。2026-10-04、独立採点の指摘） */
  .stepper input { min-width: 0; }
  /* 欄が3つ横に並ぶ幅では、補足の折り返さない区切りもほどく（「わからなければ空欄（0本）のまま」が640幅で枠の外へ出た） */
  .hint .nowrap { white-space: normal; }
  .keypad { top: calc(100% + .2rem); left: 0; }
}

/* ===== 狭い画面 ===== */
@media (max-width: 38.75em) {
  /* 結果を最初の画面に近づけるため、上を詰める（「令和6年版」は医院名の行の右へ。2026-10-05、利用者の決定） */
  .site-header { display: block; position: relative; padding: .8rem 1rem .4rem; }
  .edition { position: absolute; top: .75rem; right: 1rem; }
  /* 札と重ならないよう字間を詰める。360px未満は札の幅を空け、「かわせみ／デンタルクリニック」の句で折る
     （右を全部の幅で空けたら375幅でも「ク」1字が折れた。2026-10-05、デザイン改良サイクルの評価） */
  .clinic-name { letter-spacing: .06em; word-break: keep-all; }
  .site-meta { margin-top: .2rem; }
  h1 { font-size: 1.3rem; }
  main { padding: .3rem 1rem 3rem; }
  .page-intro { margin: .35rem 0 .1rem; font-size: .86rem; line-height: 1.6; }
  .count-mode button { min-height: 2.45rem; }
  /* 凡例と見通しの行を詰める（グラフと見通しを近づける） */
  /* 凡例は1項目1行にし、印の列（1.2rem）をそろえて字の頭を同じ位置にする（以前は横に詰めて折り返し、行ごとに頭がずれた。2026-10-05、利用者の実機） */
  .legend { flex-direction: column; gap: .3rem; margin-top: .5rem; font-size: .86rem; word-break: auto-phrase; }
  .legend span { display: flex; align-items: baseline; gap: .5rem; padding: 0; }
  .legend .dot { width: 1.2rem; transform: translateY(-.2em); }
  .legend .goal-dot, .legend .trajectory-dot { transform: translateY(-.39em); }
  .legend .current-dot { width: .75rem; margin: 0 .225rem; transform: translateY(-.018em); }
  .legend .mark-dot { text-align: center; transform: translateY(-.054em); }
  .legend .band-dot, .legend .gap-dot { transform: translateY(-.024em); }
  .legend .legend-note, .legend-more > span:last-child { padding-left: 1.7rem; }
  .legend-more > span { margin-top: .3rem; }
  /* 印の列（1.7rem）に矢印を置き、ほかの項目と字の頭をそろえる */
  .legend-more > summary { min-height: 2.75rem; padding-left: 1.7rem; }
  .legend-more > summary::before { left: .1rem; width: 1.2rem; font-size: .9rem; }

  .forecast-columns { gap: .6rem; }
  .forecast-block { padding: .65rem .9rem .7rem; }
  .forecast-row { padding: .28rem .4rem .28rem .5rem; }
  .forecast-value { font-size: 1.1rem; }
  .forecast-sub { font-size: .86rem; }
  .average-age:not(:empty) { margin-top: .55rem; padding: .5rem .7rem; font-size: .9rem; }
  #input-form { padding: calc(.4rem + 1px) calc(1rem + 1px) calc(.5rem + 1px); }
  label { font-size: .9rem; }
  /* 「残っている親知らず」は2行。少し小さくして見出しの幅（375幅で108px）に収める */
  .field-wisdom label { font-size: .86rem; }
  .stepper { grid-template-columns: 2.6rem 4.8rem 2.6rem; gap: .35rem; }
  .stepper button { min-height: 2.6rem; }
  input { min-height: 2.6rem; font-size: 1.3rem; }
  .keypad { position: fixed; top: auto; left: 0; right: 0; bottom: 0; grid-template-columns: repeat(6, 1fr); border-radius: .9rem .9rem 0 0; padding: .6rem .8rem .8rem; }
  .headline { grid-template-columns: 1fr; grid-template-areas: "text" "median" "echo" "note" "people"; padding: calc(1rem + 1px) calc(1rem + 1px) calc(.9rem + 1px); }
  /* 100人の点はスマホでも20×5にして高さを抑える（グラフを近づけるため。2026-10-03） */
  .people { justify-self: start; margin-top: .7rem; grid-template-columns: repeat(20, .42rem); gap: .2rem; }
  .people i { width: .42rem; height: .42rem; }
  /* 「95人以上」が320px幅でもカードから出ないよう、幅に応じて抑える */
  #rank-count { font-size: clamp(1.5em, 14vw, 3.2em); }
  .result-note { font-size: .86rem; }
  section { margin-bottom: 1.2rem; }
  .chart-section { padding: calc(.9rem + 1px) calc(.75rem + 1px) calc(1rem + 1px); }
}
@media (max-width: 38.75em) { button.forecast-row { min-height: 2.5rem; } }
/* スマホでは保存ボタンを題の下の行へ（案内が保存ボタンの横で3行に折れた。以前は320幅だけ。2026-10-05） */
@media (max-width: 38.75em) {
  .chart-section { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "button" "gap" "chart" "dropped" "legend"; }
  .chart-section .save-image { justify-self: start; margin-top: .4rem; }
  .chart-hint, .key-hint-copy { display: block; margin: .2rem 0 0; }
}

/* ===== とても狭い幅（23.4em＝374px以下。文字200%なら749px以下）: 入力欄の見出しの段と＋−の段を分ける。
   375px以上は同じ段に収まるので分けない（2026-10-03、26em から下げた。スマホで入力欄が縦に長く、グラフが遠かった。360pxは見出しが欠けた） ===== */
/* 大きな数字のすぐ下に同じ文がある（.average-echo）ので、1199px以下では見通しのカードで繰り返さない（641〜1199pxで2か所に出ていた。2026-10-05） */
@media (max-width: 74.9375em) { .forecast-block .average-age:not(:empty) { display: none; } }
@media (min-width: 75em) and (min-height: 41.3125em) { .rank-lead { font-size: max(.8em, 17px); } }  /* 15.8pxで主役の文として小さかった（2026-10-06） */
@media (max-width: 22.4375em) {
  .clinic-name { padding-right: 6.6rem; }
  .gap-headline-value { font-size: 1.15rem; white-space: nowrap; }  /* いちばん長い「XX歳ごろに XX本の違い」でも1行（2行に固定したら4行・142pxに伸びた） */
}
@media (max-width: 23.4em) {
  .input-grid > div { grid-template-columns: 1fr; grid-template-areas: "label" "stepper" "hint" "error"; padding: .7rem 0; }
  label { margin-bottom: .4rem; white-space: normal; }
  .stepper { grid-template-columns: 2.6rem minmax(4.8rem, 1fr) 2.6rem; max-width: 14rem; }
  /* 320幅で切り替えの字が「数え／る」と1字だけ折り返し、タイトルがアイコンと別の行に落ちた（2026-10-04、独立採点の指摘） */
  /* 補足の字を0.86remにしたら1行に入らないので、句の切れ目（<wbr>）だけで2行にする（2026-10-04、共通の網羅検査） */
  .count-mode button { padding: .3rem .2rem; font-size: .86rem; line-height: 1.25; word-break: keep-all; }
  /* 案内が保存ボタンの左に3行で押し込まれた（2026-10-05、デザイン改良サイクルの評価）。ボタンを題の下の行へ */

  /* 図はカードの内側の余白まで広げ、280px未満に縮めない（縮めると図の字が実寸15px未満になる） */
  .chart-wrap { margin-inline: -.75rem; }
  h1 { font-size: 1.18rem; }
}

/* ===== 動き。「視差効果を減らす」設定では止める ===== */
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { width: 0; } }
@keyframes ask { 0%, 100% { border-color: var(--line); box-shadow: none; } 50% { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); } }
@media (prefers-reduced-motion: no-preference) {
  /* 読み込んだとき、統計の線が左から右へ引かれる（path に pathLength="1" が付いている） */
  .is-drawing .curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(.6, 0, .3, 1) forwards; }
  .is-drawing .curve:nth-of-type(2) { animation-delay: .06s; }
  .is-drawing .curve:nth-of-type(3) { animation-delay: .12s; }
  .is-drawing .curve:nth-of-type(4) { animation-delay: .18s; }
  .is-drawing .curve:nth-of-type(5) { animation-delay: .24s; }
  .is-drawing .curve:nth-of-type(6) { animation-delay: .30s; }
  .is-drawing .curve:nth-of-type(7) { animation-delay: .36s; }
  .is-drawing .band { animation: reveal 1s .8s var(--ease) both; }
  /* 空欄から結果が出た最初の1回だけ（main.is-fresh は app.js が付ける）。見通しの線は入力した点から右へ描き出す */
  .is-fresh .forecast-row, .is-fresh .average-age:not(:empty), .is-fresh .forecast-out-of-range { animation: reveal .4s var(--ease) both; }
  .is-fresh .forecast-row:nth-child(2) { animation-delay: .06s; }
  .is-fresh .forecast-row:nth-child(3) { animation-delay: .12s; }
  .is-fresh .forecast-row:nth-child(4) { animation-delay: .18s; }
  .is-fresh .average-age:not(:empty) { animation-delay: .24s; }
  .is-fresh .reveal-rect { animation: grow .9s .1s cubic-bezier(.6, 0, .3, 1) both; }
  /* 統計 → 2本の線と面 → あなたの点と札、の順に出す（点と札が線より先に浮いて出た。2026-10-05、デザイン改良サイクルの評価） */
  .is-fresh .chart-labels, .is-fresh .chart-points { animation: reveal .35s .8s both; }
  /* 未入力のとき、年齢欄が一度ゆっくり明滅して「ここから」と示す（自動フォーカスはしない） */
  .is-next:not(:focus) { animation: ask 2s ease-in-out 3; }  /* 3回で止め、青い枠だけ残す（2026-10-05、利用者の決定。止まらない動きを避ける） */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== 院内用の表示（配布物の属性があるときだけ） ===== */
.chairside-source { display: none; }
html[data-audience="chairside"] .header-band .edition,
html[data-audience="chairside"] .header-band .page-intro,
html[data-audience="chairside"] .chart-hint,
html[data-audience="chairside"] .chart-key-hint,
html[data-audience="chairside"] .legend-hint,
html[data-audience="chairside"] .national-goal { display: none !important; }
html[data-audience="chairside"] .site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "clinic meta" "title title";
  align-items: center;
  row-gap: 0;
}
html[data-audience="chairside"] .clinic-name { grid-area: clinic; padding-right: 0; }
html[data-audience="chairside"] .site-title { grid-area: title; }
html[data-audience="chairside"] .site-meta { grid-area: meta; align-self: center; margin: 0; }
html[data-audience="chairside"] .app-version { color: #fff; }
html[data-audience="chairside"] .chairside-source {
  display: block;
  flex-basis: 100%;
  margin: 0;
  font-size: 15.5px;
  letter-spacing: -.04em;
  line-height: 1.2;
  text-wrap: balance;
  word-break: normal;
}
@media (min-width: 75em) and (min-height: 41.3125em) {
  html[data-audience="chairside"] .chairside-source {
    margin-top: -.45rem;
    margin-bottom: -.2rem;
    line-height: 1;
  }
}

/* 見出しはカード内の上端へそろえ、図の位置を保つ。 */
.input-section, #input-form, .headline, .forecast { position: relative; }
.step-label { position: absolute; left: 1.25rem; top: 4px; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; white-space: normal; font-size: .92rem; line-height: 1; }

.step-label, #chart-title, #forecast-title { color: var(--ink); font-family: "Noto Sans JP", sans-serif; font-size: .92rem; font-weight: 700; letter-spacing: 0; }
/* 見出しの行高を保ち、図を動かさない。 */
#chart-title { line-height: 1.462rem; letter-spacing: 0; }
#chart-title .chart-hint, #chart-title .key-hint-copy { margin-left: .4em; font-size: .86rem; vertical-align: top; }
#chart-title .chart-key-hint::before { content: none; }
.chart-key-title { visibility: hidden; }
#forecast-title { position: relative; padding: 0; margin: 0 0 .6rem; line-height: 1; letter-spacing: 0; }
.forecast { padding: calc(4px + 1px) calc(1.25rem + 1px) calc(1.1rem + 1px); background: var(--card); border: 1px solid transparent; border-radius: 22px; box-shadow: var(--shadow); }
.forecast-block { padding: .6rem 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.forecast-block::before { left: -.5rem; }
.forecast-empty { padding: 0; border: 0; border-radius: 0; background: transparent; }
.chart-section h2 { align-self: start; top: calc(4px - 1rem); }
#input-form, .headline { padding-top: calc(1.4rem + 1px); }
/* 広い画面の1・2はカード内の上端へ置く。 */
@media (min-width: 1000px) {
  .step-label { top: 4px; background: var(--card); }
  #input-form, .headline { padding-top: calc(1.4rem + 1px); }
  .input-grid > div { padding-block: 0; }
  .count-mode { margin-top: .1rem; }
  /* 版の桁が増えても、前文の幅と帯の高さを保つ。文字は省略しない。 */
  .site-meta { max-width: 8.8rem; justify-content: flex-end; }
  .app-version { white-space: nowrap; flex-shrink: 0; }
}
@media (min-width: 1200px) {
  .step-label { left: 1.1rem; }
  .forecast { padding-inline: calc(1rem + 1px); }
  .forecast-row { padding-inline: 0; }
  .chart-section { align-self: start; }
  .chart-section h2 { top: calc(4px - .9rem); }
}
@media (min-width: 1200px) and (max-height: 660px) {
  .count-mode { margin-block: 0; }
  .rank-result { margin-bottom: 0; line-height: 1.35; }
  .median-result { margin-bottom: .1rem; }
  .result-note { line-height: 1.15; }
  #input-form { padding-bottom: 1px; }
  .input-section { margin-bottom: .2rem; }
}
@media (max-width: 999px) {
  .forecast-block { padding-left: 0; }
}
@media (min-width: 1200px) and (max-height: 660px) {
  .chart-section { position: relative; }
  #chart-title { position: absolute; left: 1rem; top: 4px; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; font-size: .92rem; line-height: 1; }
  .chart-section { padding-top: calc(1.4rem + 1px); }
  .chart-wrap { margin-top: -.2rem; }
}
@media (max-width: 62.4375em) {
  /* 数え方を替えても、補足と誤りのための行を残す。 */
  .input-grid > div:first-child { grid-area: 1 / 1; }
  .input-grid > .field-lost, .input-grid > .field-count { grid-area: 2 / 1; }
  .input-grid > .field-wisdom { grid-area: 3 / 1; }
  #input-form[data-mode="lost"] .field-count,
  #input-form[data-mode="count"] .field-lost,
  #input-form[data-mode="count"] .field-wisdom { display: grid; visibility: hidden; }
  .field-error, .field-error:empty, .field-error:not(:empty) { min-height: 2.408rem; margin: .3rem 0 0; line-height: 1.4; }
  /* 結果の高さは入力前にも確保して図の位置を保つ。 */
  .headline { top: 5px; min-height: var(--result-space, 0px); }
  .gap-headline { min-height: var(--gap-space, 0px); align-content: start; }
  .gap-headline[hidden] { display: grid; visibility: hidden; }
  .is-empty .chart-hint, .no-scrub .chart-hint { display: inline; visibility: hidden; }
}
@media (max-width: 620px) {
  .is-empty .chart-hint, .no-scrub .chart-hint { display: block; visibility: hidden; }
}
@media (max-width: 619px) {
  /* スマホでは補足の場所で誤りを伝え、空の誤り専用行を増やさない。 */
  .input-grid .hint { min-height: 2lh; }
  .input-grid .field-error { grid-area: hint; align-self: start; background: var(--card); min-height: 0; }
  .input-grid .field-error:empty { visibility: hidden; }
  .input-grid > div:has(.field-error:not(:empty)) .hint { visibility: hidden; }
}
/* 620〜999pxだけ入力を帯にする。 */
@media (min-width: 620px) and (max-width: 999px) {
  #input-form { padding: calc(1.4rem + 1px) calc(1.25rem + 1px) calc(.4rem + 1px); }
  .count-mode { width: 29rem; max-width: 100%; margin: 0; }
  .count-mode button { min-height: 2rem; padding: .1rem .4rem; }
  .input-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 .8rem; }
  .input-grid > div { grid-template-columns: minmax(0,1fr); grid-template-areas: "label" "stepper" "hint" "error"; grid-template-rows: 2.3rem 2.8rem 3.65rem 2.4rem; padding: 0; border: 0; align-items: center; }
  .input-grid > div:first-child { grid-area: 1 / 1; }
  .input-grid > .field-lost, .input-grid > .field-count { grid-area: 1 / 2; }
  .input-grid > .field-wisdom { grid-area: 1 / 3; }
  .input-grid label { display: block; min-height: 0; margin: 0; line-height: 1.3; }
  .input-grid label br { display: none; }
  .input-grid label .label-sub { display: inline-block; }
  .stepper { grid-template-columns: 2.6rem minmax(0,1fr) 2.6rem; gap: .3rem; }
  .stepper input { min-width: 0; }
  .hint, .field-error, .field-error:empty, .field-error:not(:empty) { min-height: 0; margin: 0; line-height: 1.4; }
  .hint .nowrap { white-space: normal; }
}
@media (min-width: 960px) and (max-width: 999px) {
  .input-grid > div { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "label stepper" "hint hint" "error error"; grid-template-rows: 3rem 2.4rem 1.5rem; }
  .stepper { grid-template-columns: 2.6rem 3.4rem 2.6rem; }
}
@media (max-width: 620px) {
  /* 図の幅を保ち、ほかの段も図の内側の余白にそろえる。 */
  .step-label { left: .75rem; }
  #input-form, .headline { padding-left: calc(.75rem + 1px); }
  .forecast { padding-inline: calc(.75rem + 1px); }
}
@media (max-width: 520px) {
  .forecast { border-radius: 18px; }
}

#open-maintenance { width: 100%; min-height: 44px; margin-top: .6rem; color: var(--brand); border-color: var(--brand); }
#open-maintenance[hidden] { display: none; }

/* v1.1.11: 共通デザイン8章。画面用の700は画像の600と分ける。 */
.clinic-name, html[data-audience="chairside"] .clinic-name { line-height: 1.4; min-height: 26.316px; }
.app-version, html[data-audience="chairside"] .app-version, .page-intro { font-family: "Noto Sans JP", sans-serif; font-size: .86rem; font-weight: 400; line-height: 1.6; color: var(--on-brand); font-variant-numeric: tabular-nums; }
h2:not(.sr-only), .step-label, #chart-title, #forecast-title { font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); }
h3, .forecast-block h3 { font-family: "Noto Sans JP", sans-serif; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.tab-panel .folded-body > details > p, .qa-answer > p { font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--ink); }
.hint, .legend-hint { font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }
#rank-count { font-family: var(--serif); font-weight: 700; }
#input-form, .headline, .chart-section, .forecast { border: 0; border-radius: 22px; background-color: var(--card); box-shadow: var(--shadow); }
.count-mode button, html[data-audience="chairside"] .chairside-input-ready .count-mode button { font-family: "Noto Sans JP", sans-serif; font-size: 15.5px; font-weight: 700; line-height: 1.3; min-height: 44px; }
.count-mode button[aria-checked="true"] { color: #fff; background: var(--brand); }
.count-mode button[aria-checked="false"] { color: var(--muted); background: var(--card); }
.save-image { font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; min-height: 48px; }
summary, .legend-more > summary { font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.5; min-height: 52px; }
html[data-audience="chairside"] #save-image, html[data-audience="chairside"] #saved-image { display: none !important; }
@media (max-width: 520px) {
 h2:not(.sr-only), .step-label, #chart-title, #forecast-title { font-size: 20px; }
 h3, .forecast-block h3 { font-size: 18px; }
 #input-form, .headline, .chart-section, .forecast { border-radius: 18px; }
 #input-form, .headline { padding-top: 36px; }
}

/* 22pxの試作でHDの見通しが押し出されたため、3-1に従い18pxにする。 */

.app-icon { background-color: var(--brand); border-radius: 8px; }
@media (min-width: 1000px) {
 .chart-section { grid-template-rows: minmax(45px,auto); }
 .chart-section .save-image { margin-block: -1.5px; }
 .legend { margin-top: 0; }
 #chart-title { line-height: 1.462rem; }
 #input-form, .headline { padding-top: calc(1.4rem + 4px); }
}
@media (min-width: 1200px) and (max-height: 660px) {
 #chart-title { line-height: 1; }
}

/* 開いたQ&Aと表にも同じ役割の文字を使う。 */
.tab-panel .folded-body > details > p, .folded .qa-answer > p { font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.7; color: var(--ink); }
.tab-panel .folded-body > details > summary { font-size: 18px; line-height: 1.5; min-height: 52px; }
.age-table thead th { font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.5; color: #fff; background-color: var(--brand); }
.age-table tbody th { font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ink); background-color: #f3eee4; }
.site-header { background-color: var(--brand); background-image: inherit; background-size: 100vw 100%; background-position: center; }
.site-header .app-icon { border-radius: 8px; }
@media (min-width: 1200px) and (max-height: 660px) {
 .forecast-block { padding-block: .45rem; }
}

#chart-title .chart-hint, #chart-title .key-hint-copy { font-family: "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.6; }

/* 帯の前文は従来の段を残し、図を動かさない。 */
@media (min-width: 1000px) and (max-width: 1199px) {
 .page-intro { font-size: .88rem; line-height: 1.7; }
}
@media (min-width: 1200px) and (max-height: 660px) {
 .page-intro { line-height: 1.45; }
}
@media (min-width: 1000px) {
 .chart-section .save-image { padding-inline: 8px; }
}
@media (min-width: 621px) and (max-width: 999px) {
 .page-intro { font-size: .88rem; }
}
@media (min-width: 75em) and (min-height: 41.3125em) {
 html[data-audience="chairside"] .chairside-source { margin-top: 0; }
}
/* 中間幅の段見出しを入力切替・順位の文から離す。 */
@media (min-width: 521px) and (max-width: 999px) {
 #input-form, .headline { padding-top: 36px; }
}
/* 低い画面は補助文の従来の行間を使い、字を縮めず注記まで収める。 */
@media (min-width: 1200px) and (max-height: 660px) {
 .hint { line-height: 1.2; }
 .median-result { line-height: 1.2; margin-bottom: 0; }
 .rank-lead { line-height: 1.2; }
 .count-mode { margin-top: 0; }
 .input-section { margin-bottom: .1rem; }
}

/* ===== v1.1.12: 院内用は、院長が口頭で説明しながら見せる画面（共通デザイン 8-8、院長の指示 2026-10-21） =====
   出す物: 帯・入力・結果の数字・同年代100人の点・グラフ・最小の札（軸・単位・凡例の線の名前）・出典1行。
   出さない物: 前文・説明文・注記・断り書き・Q&A・参考文献・免責・図の見方・フッター。
   幅900px以上は、1920×1040・1620×1040・1280×800・980×800 のどれでも、縦にスクロールせず入力・結果・グラフ・見通しが1画面に入る。
   公開版（HP用）には当たらない（data-audience="chairside" の下だけ）。古い Chrome（84）で効くよう、aspect-ratio・:has・flex の gap・dvh は使わない。 */
html[data-audience="chairside"] { --cs-left: clamp(330px, 28vw, 520px); }
html[data-audience="chairside"] .result-note,
html[data-audience="chairside"] .average-echo,
html[data-audience="chairside"] #result-section,
html[data-audience="chairside"] .folded-row,
html[data-audience="chairside"] footer,
html[data-audience="chairside"] .legend-more,
html[data-audience="chairside"] .hint,
html[data-audience="chairside"] .forecast-empty,
html[data-audience="chairside"] .forecast-block .forecast-out-of-range:not(:only-child) { display: none !important; }
.chairside-range, .input-style-toggle { display: none; }
html[data-audience="chairside"] .input-style-toggle { display: block; }

/* 帯。共通デザイン 1-1「院内用の帯」: 幅600px以上で高さ104px固定・左右28px・左寄せ。版は右上。 */
@media (min-width: 600px) {
  html[data-audience="chairside"] .header-band { margin-bottom: 0; }
  html[data-audience="chairside"] .site-header { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 104px; max-width: none; margin: 0; padding: 0 28px; }
  html[data-audience="chairside"] .clinic-name { flex: none; margin: 0; padding: 0; font-size: 15.5px; font-weight: 700; letter-spacing: .2em; line-height: 1.4; color: #bfe3dc; }
  html[data-audience="chairside"] .site-title { flex-wrap: nowrap; align-items: center; margin: 4px 0 0; font-size: 32px; }
  html[data-audience="chairside"] .site-header .app-icon { flex: none; width: 32px; height: 32px; margin: 0 12px 0 0; }
  html[data-audience="chairside"] .site-header h1 { font-size: 32px; line-height: 1.3; letter-spacing: .03em; white-space: nowrap; }
  html[data-audience="chairside"] .site-meta { position: absolute; top: 16px; right: 28px; max-width: none; margin: 0; }
  html[data-audience="chairside"] .app-version { font-size: 14px; line-height: 1.2; color: #d5e6e3; }
}

/* 入力（どの幅でも同じ作り）。見出しと数字の行の下に、つまみ（または＋−）。 */
html[data-audience="chairside"] #input-form { height: auto; padding-bottom: 8px; }
html[data-audience="chairside"] .mode-row { display: flex; align-items: stretch; margin: 0 0 4px; }
html[data-audience="chairside"] .mode-row .count-mode { flex: 1 1 auto; width: auto; min-width: 0; height: auto; margin: 0; }
html[data-audience="chairside"] .count-mode button { min-width: 0; min-height: 44px; padding: 2px 6px; font-size: 15.5px; line-height: 1.3; }
html[data-audience="chairside"] .input-style-toggle { flex: none; width: 92px; min-height: 44px; margin: 0 0 0 8px; padding: 2px; font-size: 15.5px; line-height: 1.25; word-break: keep-all; color: var(--muted); border-color: var(--line); border-radius: 8px; }
html[data-audience="chairside"] .input-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(62px, 1fr); gap: 0; min-height: 186px; align-content: stretch; }
html[data-audience="chairside"] .input-grid > div,
html[data-audience="chairside"] .input-grid > .field-lost,
html[data-audience="chairside"] .input-grid > .field-count,
html[data-audience="chairside"] .input-grid > .field-wisdom {
  grid-area: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; align-items: center;
  min-height: 62px; margin: 0; padding: 2px 0; border-top: 1px solid var(--line-soft); visibility: visible;
}
html[data-audience="chairside"] .input-grid > div:first-child { border-top: 0; }
html[data-audience="chairside"] #input-form[data-mode="lost"] .field-count,
html[data-audience="chairside"] #input-form[data-mode="count"] .field-lost,
html[data-audience="chairside"] #input-form[data-mode="count"] .field-wisdom { display: none; }
html[data-audience="chairside"] .input-grid label { grid-area: 1 / 1; display: block; min-height: 0; margin: 0; font-size: 17px; line-height: 1.3; white-space: normal; }
html[data-audience="chairside"] .input-grid .label-sub { margin: 0; font-size: 15.5px; letter-spacing: 0; }
html[data-audience="chairside"] .input-grid .field-error { grid-area: 2 / 1 / 3 / 3; min-height: 0; margin: 0; font-size: 18px; line-height: 1.3; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] label br { display: none; }
/* ＋−の形 */
html[data-audience="chairside"] #input-form .stepper { grid-area: 1 / 2 / 3 / 3; grid-template-columns: 40px 76px 40px; gap: 6px; justify-self: end; }
html[data-audience="chairside"] #input-form .stepper button { min-height: 40px; }
html[data-audience="chairside"] #input-form .stepper input { min-height: 40px; min-width: 0; }
html[data-audience="chairside"] #input-form[data-input-style="stepper"] .input-grid .field-error:not(:empty) { grid-area: 2 / 1 / 3 / 3; }
@media (min-width: 620px) and (max-width: 899px) {
  /* 620〜899px の入力は、欄を横に並べた帯（v1.1.9、院長の選択）。見える欄の数だけ列にし、見出しは2行ぶん、つまみ・＋−は44pxの行にそろえて、入力方式・入れ方で高さを変えない */
  html[data-audience="chairside"] #input-form { padding-bottom: 12px; }
  html[data-audience="chairside"] .input-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0 24px; min-height: 0; align-content: start; }
  html[data-audience="chairside"] .input-grid > div,
  html[data-audience="chairside"] .input-grid > .field-lost,
  html[data-audience="chairside"] .input-grid > .field-count,
  html[data-audience="chairside"] .input-grid > .field-wisdom { grid-template-rows: auto 44px auto; align-content: start; min-height: 0; padding: 0; border-top: 0; }
  html[data-audience="chairside"] .input-grid label { min-height: 45px; }
  html[data-audience="chairside"] #input-form .stepper { grid-area: 2 / 1 / 3 / 3; justify-self: start; }
}
@media (min-width: 620px) and (max-width: 699px) {
  /* 620〜699px は列が約166pxなので、真ん中の欄を細くして＋−が列からはみ出さないようにする */
  html[data-audience="chairside"] #input-form .stepper { grid-template-columns: 40px 62px 40px; gap: 6px; }
}
@media (min-width: 620px) and (max-width: 899px) {
  /* 入力の誤りの文は2行ぶんの場所を、出ていない間も取り、出ても図を動かさない */
  html[data-audience="chairside"] .input-grid .field-error,
  html[data-audience="chairside"] #input-form[data-input-style="stepper"] .input-grid .field-error:not(:empty) { grid-area: 3 / 1 / 4 / 3; min-height: 47px; }
}
@media (max-width: 349px) {
  /* 320px では＋−が幅を取って見出しが3行になり、スライダーの形より行が高くなる。真ん中の欄を細くして2行に収める */
  html[data-audience="chairside"] #input-form .stepper { grid-template-columns: 40px 52px 40px; gap: 4px; }
}
/* スライダーの形。数字（output）は見出しの右、つまみは下の行。 */
html[data-audience="chairside"] #input-form[data-input-style="slider"] .stepper { display: none; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range { display: contents; }
html[data-audience="chairside"] .chairside-range output { grid-area: 1 / 2; align-self: end; color: var(--brand); font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
html[data-audience="chairside"] .chairside-range.is-unset output { color: var(--muted); }
html[data-audience="chairside"] .chairside-range input[type="range"] {
  --range-rest: #dddddd; grid-area: 2 / 1 / 3 / 3; -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 44px; margin: -8px 0; padding: 0; border: 0; border-radius: 0;
  background: linear-gradient(to right, var(--brand) 0, var(--brand) calc(14px + (100% - 28px) * var(--range-ratio, 0)), var(--range-rest) calc(14px + (100% - 28px) * var(--range-ratio, 0)), var(--range-rest) 100%) center / 100% 10px no-repeat;
  cursor: pointer;
}
html[data-audience="chairside"] .chairside-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; background: #fff; border: 3px solid var(--brand); border-radius: 50%; box-shadow: 0 2px 6px rgba(60, 40, 10, .28); }
html[data-audience="chairside"] .chairside-range input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: #fff; border: 3px solid var(--brand); border-radius: 50%; box-shadow: 0 2px 6px rgba(60, 40, 10, .28); }
/* 未入力のつまみは灰色の輪にして「まだ値が入っていない」と見せる（押す・動かすと値が入る） */
html[data-audience="chairside"] .chairside-range.is-unset input[type="range"] { background: linear-gradient(var(--range-rest), var(--range-rest)) center / 100% 10px no-repeat; }
html[data-audience="chairside"] .chairside-range.is-unset input[type="range"]::-webkit-slider-thumb { border-color: #9fb0b8; box-shadow: none; }
html[data-audience="chairside"] .chairside-range.is-unset input[type="range"]::-moz-range-thumb { border-color: #9fb0b8; box-shadow: none; }
html[data-audience="chairside"] .input-style-toggle:focus-visible, html[data-audience="chairside"] .chairside-range input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* HP用の入力スライダー（v1.1.13、2026-10-29 院長の選択。定期メンテと同じ形）。数字は見出しの右、つまみは下の行。
   app.js の HP_INPUT_STYLE を 'stepper' にすると data-input-style が付かず、以前の＋−の形に戻る */
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .stepper,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] label br { display: none; }
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range { display: contents; }
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid { grid-template-rows: none; grid-auto-rows: auto; min-height: 0; }
/* 幅ごとの＋−の並び（grid-template-areas）を使わず、見出しと数字・つまみ・補足・誤りの4行に置き直す */
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid > div { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; grid-template-rows: auto auto auto auto; align-content: start; align-items: end; min-height: 0; height: auto; }
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid label { grid-area: 1 / 1; margin: 0; }
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid .hint { grid-area: 3 / 1 / 4 / 3; min-height: 0; margin-top: 0; }
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid .field-error { grid-area: 4 / 1 / 5 / 3; }
@media (min-width: 620px) and (max-width: 999px) {
  /* 欄を横に並べる帯では、見出しが2行になる欄があっても、つまみの高さを3つの欄でそろえる */
  html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid > div { grid-template-rows: minmax(2.9rem, auto) auto auto auto; }
}
@media (max-width: 619px) {
  /* スマホは補足の場所で誤りを伝える（＋−の形と同じ） */
  html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid .field-error { grid-area: 3 / 1 / 4 / 3; }
}
html:not([data-audience="chairside"]) .chairside-range output { grid-area: 1 / 2; color: var(--brand); font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
html:not([data-audience="chairside"]) .chairside-range.is-unset output { color: var(--muted); }
html:not([data-audience="chairside"]) .chairside-range input[type="range"] {
  --range-rest: #c9c9c9; grid-area: 2 / 1 / 3 / 3; -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: linear-gradient(to right, var(--brand) 0, var(--brand) calc(14px + (100% - 28px) * var(--range-ratio, 0)), var(--range-rest) calc(14px + (100% - 28px) * var(--range-ratio, 0)), var(--range-rest) 100%) center / 100% 10px no-repeat;
  cursor: pointer;
}
html:not([data-audience="chairside"]) .chairside-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; background: #fff; border: 3px solid var(--brand); border-radius: 50%; box-shadow: 0 2px 6px rgba(60, 40, 10, .28); }
html:not([data-audience="chairside"]) .chairside-range input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: #fff; border: 3px solid var(--brand); border-radius: 50%; box-shadow: 0 2px 6px rgba(60, 40, 10, .28); }
html:not([data-audience="chairside"]) .chairside-range.is-unset input[type="range"] { background: linear-gradient(var(--range-rest), var(--range-rest)) center / 100% 10px no-repeat; }
html:not([data-audience="chairside"]) .chairside-range.is-unset input[type="range"]::-webkit-slider-thumb { border-color: #9fb0b8; box-shadow: none; }
html:not([data-audience="chairside"]) .chairside-range.is-unset input[type="range"]::-moz-range-thumb { border-color: #9fb0b8; box-shadow: none; }
html:not([data-audience="chairside"]) .chairside-range input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* 入力スライダーは定期メンテナンスの軌道・つまみ・文字に合わせる。 */
html[data-audience="chairside"] #input-form[data-input-style="slider"] .input-grid label,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .input-grid label { color: #16242c; font-size: 16px; font-weight: 700; line-height: 27.2px; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range output,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range output { color: #16242c; font-size: 24px; font-weight: 700; line-height: 40.8px; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range input[type="range"],
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range input[type="range"] {
  --bar: #0f4c5c; --rest: #6b6b6b; --p: var(--range-ratio, 0); --x: calc(14px + (100% - 28px) * var(--p));
  height: 44px; min-height: 44px; margin: 0; border: 0; border-radius: 0; background: transparent;
  color: #101010; font-size: 18px; font-weight: 400; line-height: 30.6px;
}
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-webkit-slider-runnable-track,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px; background: #6b6b6b; background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 78%, white), var(--bar) var(--x), var(--rest) var(--x));
}
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-moz-range-track,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--rest); }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-moz-range-progress,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 78%, white), var(--bar)); }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-webkit-slider-thumb,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-webkit-slider-thumb { margin-top: -9px; border-color: #0f4c5c; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-moz-range-thumb,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range input[type="range"]::-moz-range-thumb { border-color: #0f4c5c; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range.is-unset input[type="range"]::-webkit-slider-runnable-track,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range.is-unset input[type="range"]::-webkit-slider-runnable-track { background: #6b6b6b; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range.is-unset input[type="range"]::-webkit-slider-thumb,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range.is-unset input[type="range"]::-webkit-slider-thumb { border-color: #9fb0b8; box-shadow: none; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range.is-unset input[type="range"]::-moz-range-thumb,
html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range.is-unset input[type="range"]::-moz-range-thumb { border-color: #9fb0b8; box-shadow: none; }

@media (min-width: 1000px) {
  html:not([data-audience="chairside"]) #result-section { display: flex !important; visibility: hidden; }
  html:not([data-audience="chairside"]) #result-section:not([hidden]) { visibility: visible; }
}
@media (min-width: 900px) {
  html[data-audience="chairside"] #input-form[data-input-style="slider"] .input-grid > div { grid-template-rows: auto 20px; padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 520px) {
  html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range output,
  html:not([data-audience="chairside"]) #input-form[data-input-style="slider"] .chairside-range output { font-size: 22px; line-height: 37.4px; }
}

/* 院内用は既存カードの行高を保ち、軌道とつまみだけ手本に合わせる。 */
html[data-audience="chairside"] #input-form[data-input-style="slider"] .input-grid label { font-size: 17px; line-height: 1.3; }
html[data-audience="chairside"] #input-form[data-input-style="slider"] .chairside-range output { line-height: 1.2; }

/* 結果・グラフ・見通しの院内用の作りは、幅900px以上（1画面に収める配置）だけ。900px未満は元の1列の作りのまま（説明文・フッターを出さないことだけが共通）。 */
@media (min-width: 900px) {
  /* 結果。説明文は出さず、人数と同年代100人の点を大きく。 */
  html[data-audience="chairside"] .headline { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; min-height: 0; margin: 0; padding: 34px 20px 12px; }
  html[data-audience="chairside"] .rank-result { margin: 0; line-height: 1.4; }
  html[data-audience="chairside"] .rank-lead { display: block; margin: 0 0 4px; font-size: 18px; line-height: 1.45; letter-spacing: 0; }
  html[data-audience="chairside"] #rank-count { margin: 0 4px 0 0; font-size: clamp(56px, 9.5vh, 120px); line-height: 1.05; letter-spacing: -.02em; }
  html[data-audience="chairside"] .rank-result.is-long #rank-count { font-size: clamp(40px, 6.2vh, 74px); }
  html[data-audience="chairside"] #rank-share { font-size: 22px; }
  html[data-audience="chairside"] .median-result { margin: 4px 0 0; font-size: 17.64px; line-height: 1.5; }
  html[data-audience="chairside"] .people { justify-self: auto; align-self: flex-start; width: min(100%, 300px); margin: 10px 0 0; grid-template-columns: repeat(20, 1fr); gap: 3px; }
  html[data-audience="chairside"] .people i { width: 100%; height: 0; padding-bottom: 100%; }
  html[data-audience="chairside"] .people.has-result::after { margin-top: 6px; font-size: 15.5px; line-height: 1.35; }

  /* グラフ。図は JS が箱に合わせて描く（横:縦 16:9〜2:1）。 */
  html[data-audience="chairside"] .chart-section { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "title gap" "chart chart" "dropped dropped" "legend legend"; align-content: stretch; align-items: center; min-height: 0; margin: 0; padding: 4px 20px 12px; }
  html[data-audience="chairside"] .chart-section h2 { grid-area: title; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0; padding-right: 16px; }
  html[data-audience="chairside"] #chart-title { position: static; left: auto; top: auto; line-height: 1.4; }
  /* 言い切りは「何と何の違いか」の行と値の行の2行にそろえ、短い文のときも同じ高さ（状態で図の箱が上下しない） */
  html[data-audience="chairside"] .gap-headline { grid-area: gap; display: block; min-height: 50px; height: auto; margin: 0; text-align: right; }
  html[data-audience="chairside"] .gap-headline[hidden] { display: block; visibility: hidden; }
  html[data-audience="chairside"] .gap-headline-label { display: block; font-size: 15.5px; line-height: 1.35; }
  html[data-audience="chairside"] .gap-headline-value { display: block; margin: 0; font-size: 24px; line-height: 1.25; }
  html[data-audience="chairside"] .gap-headline-note { display: block; font-size: 15.5px; line-height: 1.35; }
  html[data-audience="chairside"] .chart-wrap { grid-area: chart; position: relative; align-self: stretch; margin: 4px 0 0; overflow: visible; }
  html[data-audience="chairside"] .legend { grid-area: legend; display: block; margin: 4px 0 0; }
  html[data-audience="chairside"] .chairside-source { margin: 0; font-size: 15.5px; letter-spacing: 0; line-height: 1.4; }

  /* 見通し。 */
  html[data-audience="chairside"] .forecast { display: flex; flex-direction: column; margin: 0; padding: 4px 20px 12px; }
  html[data-audience="chairside"] .step-label { left: 1.1rem; }
  html[data-audience="chairside"] #forecast-title { margin: 0 0 4px; line-height: 1.4; }
  html[data-audience="chairside"] .forecast-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-content: start; align-items: start; }
  html[data-audience="chairside"] .is-empty .forecast-columns { display: grid; visibility: hidden; }
  html[data-audience="chairside"] .forecast-block { padding: 4px 4px 4px 14px; }
  html[data-audience="chairside"] .forecast-block h3 { margin: 0; }
  html[data-audience="chairside"] .forecast-unit { margin: 0; font-size: 15.5px; line-height: 1.4; }
  html[data-audience="chairside"] .forecast-row { gap: 0 8px; padding: 2px 6px 2px 8px; line-height: 1.4; }
  html[data-audience="chairside"] .forecast-age { min-width: 3.4em; font-size: 15.5px; }
  html[data-audience="chairside"] .forecast-value { font-size: 20px; }
  html[data-audience="chairside"] .forecast-note, html[data-audience="chairside"] .forecast-sub { font-size: 15.5px; }
  html[data-audience="chairside"] .average-age:not(:empty) { margin: 6px 0 0; padding: 4px 10px; font-size: 15.5px; line-height: 1.4; }
  html[data-audience="chairside"] #open-maintenance { position: absolute; top: 6px; right: 20px; width: auto; min-height: 44px; margin: 0; padding: 0 16px; font-size: 15.5px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* 左の列が330〜358pxのあいだ（幅1279px以下）は、数字と文を少し詰めて、高さ800でも結果の点まで入れる */
  html[data-audience="chairside"] #rank-count { font-size: clamp(56px, 8.4vh, 100px); }
  html[data-audience="chairside"] .median-result { font-size: 17.64px; line-height: 1.4; }
}
@media (min-width: 900px) and (max-height: 799px) {
  /* 高さ800px未満は、100人の点（数字と同じことを絵で示す飾り）を出さない。出すと左の列に入りきらず、カードの下へはみ出した */
  html[data-audience="chairside"] .people { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* 狭い幅では、1行が長い「このまま推移」の側を広げて、行が2行に折れないようにする */
  html[data-audience="chairside"] .forecast-columns { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* 幅900px以上: 左に入力と結果、右にグラフと見通し。窓の高さにぴったり合わせ、縦にスクロールしない。 */
@media (min-width: 900px) {
  html[data-audience="chairside"] body { display: block; min-height: 0; }
  html[data-audience="chairside"] main {
    display: grid; grid-template-columns: var(--cs-left) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: none; gap: 0 16px; align-items: stretch;
    max-width: none; height: calc(100vh - 104px); min-height: 640px; margin: 0; padding: 14px 28px 16px;
  }
  html[data-audience="chairside"] .left-column { display: flex; flex-direction: column; grid-area: auto; min-height: 0; }
  html[data-audience="chairside"] .input-section { flex: none; margin: 0 0 14px; }
  html[data-audience="chairside"] #input-form { padding: 36px 20px 8px; }
  html[data-audience="chairside"] .headline { flex: 1 1 auto; }
  html[data-audience="chairside"] .lower-layout { display: flex; flex-direction: column; grid-area: auto; min-height: 0; }
  html[data-audience="chairside"] .chart-section { flex: 1 1 0; grid-area: auto; align-self: stretch; }
  html[data-audience="chairside"] .forecast { flex: none; grid-area: auto; margin-top: 14px; }
}
/* 見通しのカードの高さは、状態（入力の値）で変わっても図の箱が上下しないよう、幅の帯ごとに、よくある状態（走査した462状態の約80%）の高さに固定する
   （2026-10-21 v1.1.12、字15.5pxで測った値。検査が使う「60歳・抜けた歯4本」の高さ以上にする。それを超える少数の状態だけ、カードが伸びて図が縮む。幅900〜939の全体の最大は339px、940〜1019は317px） */
@media (min-width: 900px) { html[data-audience="chairside"] .forecast { min-height: 317px; } }
@media (min-width: 940px) { html[data-audience="chairside"] .forecast { min-height: 295px; } }
@media (min-width: 1020px) { html[data-audience="chairside"] .forecast { min-height: 274px; } }
@media (min-width: 1050px) { html[data-audience="chairside"] .forecast { min-height: 224px; } }
@media (min-width: 1200px) { html[data-audience="chairside"] .forecast { min-height: 281px; } }
@media (min-width: 1400px) { html[data-audience="chairside"] .forecast { min-height: 260px; } }
/* 10×10の点（300px角・高さ約350px）は、左の列が広く（幅1500px以上）高さ1030px以上のときだけ。ほかは20×5（幅は最大300px） */
@media (min-width: 1500px) and (min-height: 1030px) {
  html[data-audience="chairside"] .people { grid-template-columns: repeat(10, 1fr); width: min(100%, 300px); gap: 5px; }
}
@media (min-width: 900px) {
  /* 「まん中の歳」の1行は、図を描いたあとに出るので、出ていない間も場所を取り、図の枠が描いたあとに縮まないようにする（枠が縮むと図が枠からはみ出した） */
  html[data-audience="chairside"] .chart-dropped { min-height: 28px; }
  html[data-audience="chairside"] .chart-dropped:not([hidden]):not(:empty) { display: flex; }
  html[data-audience="chairside"] .chart-dropped[hidden], html[data-audience="chairside"] .chart-dropped:empty { display: block; visibility: hidden; }
  html[data-audience="chairside"] .chart-wrap { min-height: 150px; }
  html[data-audience="chairside"] #chart { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; }
}

/* 医院サイトの同一ページに埋めたときだけ、サイト側の頭と足との重複を消す。 */
html[data-embed="site"] .site-header .clinic-name,
html[data-embed="site"] .site-title,
html[data-embed="site"] .site-meta,
html[data-embed="site"] body > footer { display: none; }
html[data-embed="site"] .site-header { display: block; padding: .5rem 1rem; }
html[data-embed="site"] .page-intro { margin: 0; }
html[data-embed="hp"], html[data-embed="hp"] body { overflow: hidden; min-height: 0; }
html[data-embed="hp"] .site-header .clinic-name,
html[data-embed="hp"] .site-title,
html[data-embed="hp"] .site-meta,
html[data-embed="hp"] body > footer { display: none; }
html[data-embed="hp"] .site-header { display: block; padding: .45rem 1rem .5rem; }
html[data-embed="hp"] .header-band { margin-bottom: .35rem; }
html[data-embed="hp"] .hp-embed-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 3px; color: #fff; font-size: 20px;
  font-weight: 700; line-height: 1.3; word-break: auto-phrase; text-wrap: pretty;
}
html[data-embed="hp"] .hp-sim-mark { display: inline-flex; flex: none; flex-direction: column; align-items: center; line-height: 1; }
html[data-embed="hp"] .site-header .hp-sim-mark .app-icon { display: block; width: 28px; height: 28px; margin: 0; }
html[data-embed="hp"] .hp-sim-label { margin-top: 2px; color: #e2f0ee; font: 700 10px/1 "Noto Sans JP", sans-serif; letter-spacing: .08em; }
html[data-embed="hp"] .page-intro {
  max-width: none; padding-right: 0; word-break: auto-phrase;
  overflow-wrap: normal; text-wrap: pretty; margin:0; line-height:1.45;
}
.hp-embed-title { display: none; }
html[data-embed="hp"] .folded-row { display: none; }
/* HPでは角丸を小さく、直角寄りに（院長 2026-10-31） */
html[data-embed="hp"] { --radius: 8px; }
html[data-embed="hp"] :is(#input-form, .headline, #result-section, .chart-section, .forecast, .forecast-block, .forecast-empty, .card) { border-radius: 8px; }
/* HPの枠では内訳の枠をなくし、グラフの下に見通しを置いて4つの枠にする（院長 2026-10-31） */
html[data-embed="hp"] #result-section { display: none !important; }
html[data-embed="hp"] .legend-more > span:nth-last-child(4) { display: flex; }  /* 最後に箇条書きを足したので、もとの最後の3行の並びを保つ */
html[data-embed="hp"] .legend-list { margin: .5rem 0 0; padding-left: 1.2em; list-style: "・"; }
html[data-embed="hp"] .legend-list li { margin-top: .3rem; line-height: 1.6; }
html[data-embed="hp"] .legend-list li[hidden] { display: none; }
/* HPの枠ではサイトの本文が下に続くので、アプリの下の4remは要らない（最後のカードの影の分だけ残す） */
html[data-embed="hp"] main { padding-bottom: 8px; }
/* 点の枠が結果の行をまたいで縦に伸び、点の間が空いて潰れて見えた（院長 2026-10-31） */
html[data-embed="hp"] .headline .people { align-self: start; align-content: start; }
/* 点はどの幅でも10×10の正方形に並べる（2列の画面は20×5だった。院長 2026-10-31） */
html[data-embed="hp"] .headline .people { grid-template-columns: repeat(10, .58rem) !important; gap: .28rem !important; }
html[data-embed="hp"] .headline .people i { width: .58rem !important; height: .58rem !important; }
html[data-embed="hp"] .headline .chart-note:empty { display: none; }
html[data-embed="hp"] .headline { grid-template-areas: "text people" "median people" "wisdom people" "echo people" "note people"; }
html[data-embed="hp"] .headline #wisdom-result { grid-area: wisdom; margin: .2rem 0 0; }
/* 各カードの上下の空き（端から中身まで）をそろえる（院長 2026-10-31「下が広い」） */
html[data-embed="hp"] { --card-gap: 12px; }
html[data-embed="hp"] .step-label { top: var(--card-gap); }
html[data-embed="hp"] #input-form, html[data-embed="hp"] .headline { padding-top: calc(var(--card-gap) + 1.6rem) !important; padding-bottom: var(--card-gap) !important; }
html[data-embed="hp"] .chart-section { height: auto !important; padding-top: var(--card-gap) !important; padding-bottom: var(--card-gap) !important; }
html[data-embed="hp"] .chart-section .legend { margin-bottom: 0; height: auto !important; }  /* 図の見方を開いたときの高さを取っておくと、閉じた状態で右の列が伸び、結果のカードに約370pxの空きが出た */
html[data-embed="hp"] .forecast { padding-top: var(--card-gap) !important; padding-bottom: var(--card-gap) !important; }
/* 「グラフ」の題を上へずらす分（-1rem）が上の空き 12px より大きく、題がカードの上端に貼り付いた（院長 2026-11-04「余白がおかしい」） */
html[data-embed="hp"] .chart-section h2 { top: 0; }
/* 入れる前の空の違いの文の高さを取っておくと、題と図の間に約96pxの空白が出た。入れた後の文の間だけ高さをそろえる */
html[data-embed="hp"] .gap-headline[hidden] { display: none; }
/* 狭い幅のHPの枠では、隠した入れ方の欄・最悪の結果・最悪の違いの文の高さを取っておかない。枠は中身に合わせて伸び縮みし、
   取っておいた分がそのまま無駄な縦スクロールになった（院長 2026-10-31「無駄な縦スクロールをなくす」） */
@media (max-width: 62.4375em) {
  html[data-embed="hp"] #input-form[data-mode="lost"] .field-count,
  html[data-embed="hp"] #input-form[data-mode="count"] .field-lost,
  html[data-embed="hp"] #input-form[data-mode="count"] .field-wisdom { display: none; }
  html[data-embed="hp"] .headline, html[data-embed="hp"] .gap-headline { min-height: 0; }
}
/* 点の10×10を文の横に並べると、狭い幅で右へはみ出した。文の下へ置く */
@media (max-width: 40em) {
  html[data-embed="hp"] .headline { grid-template-columns: 1fr; grid-template-areas: "text" "median" "wisdom" "echo" "note" "people"; }
}
/* HPの枠（約1145px）は1000〜1199pxの段組みになる。左の結果と右の見通しの下端をそろえる */
@media (min-width: 62.5em) and (max-width: 74.99em) {
  /* 左は入力と結果、右はグラフと見通しを、それぞれ縦に積む。見通しを2列にまたがせると、長い左の列の下から始まり、
     グラフの真下が空いた（院長 2026-11-04「なんでグラフの真下にないの？」） */
  html[data-embed="hp"] main { grid-template-areas: "left lower" "folded folded"; grid-template-rows: auto auto; }
  /* 結果のカードは中身の高さのまま。右の列に下端をそろえて伸ばすと、カードの中ほどが約110px空いた */
  html[data-embed="hp"] .left-column { display: flex; flex-direction: column; grid-area: left; }
  /* 幅は列いっぱい。下の「図の見方を開いたとき」の align-self:start が、縦に積んだ列では幅を47pxまで縮めた（院長 2026-11-04「図の見方押すと結果がバグる」） */
  html[data-embed="hp"] .left-column > * { width: 100%; }
  html[data-embed="hp"] .lower-layout { display: flex; flex-direction: column; grid-area: lower; }
  html[data-embed="hp"] :is(.chart-section, .forecast) { grid-area: auto; width: 100%; }  /* 下の align-self:start で列の幅まで広がらなかった */
  /* 最悪の入力の高さ（--result-space）は取っておかない。枠は中身に合わせて伸び縮みし、どの入力でも結果のカードに空きが出た（院長 2026-10-31「無駄な縦スクロールをなくす」） */
  html[data-embed="hp"] .headline { height: auto !important; min-height: 0; align-self: stretch; margin-bottom: 1.2rem; }
  html[data-embed="hp"] .forecast { height: auto !important; align-self: start; margin: 0 0 1.2rem; display: flex; flex-direction: column; }
  /* 下端をそろえて余った高さは、カードの下でなく中ほどへ回す */
  html[data-embed="hp"] .headline { grid-template-areas: "text" "median" "wisdom" "echo" "note" "people"; grid-template-rows: auto auto auto 1fr auto auto; align-content: stretch; }
  html[data-embed="hp"] .headline .average-echo { align-self: start; }
  html[data-embed="hp"] .forecast-columns { align-items: start; }
  /* 余った高さは各ブロックの行に均等に分ける。中身の下に溜めると、色の線の下とカードの下に大きな空きが出た（院長 2026-10-31） */
  /* hidden（0本では「保てた場合」を出さない）には効かせない。効かせると隠した欄が109px場所を取り、枠の下に73pxの空きが出た */
  html[data-embed="hp"] .forecast-block:not([hidden]) { display: flex; flex-direction: column; }
  html[data-embed="hp"] .forecast-block .future-results { display: flex; flex-direction: column; }
  html[data-embed="hp"] .forecast-block .forecast-row { flex: none; align-content: center; }
  /* 図の見方を開いている間は右の列だけが伸びる。結果のカードは伸ばさず、中身の高さのままにする */
  html[data-embed="hp"] main:has(.legend-more[open]) .headline { align-self: start; min-height: 0; }
  /* 入れる前の見通しは案内の1行だけ。下端をそろえて伸ばすと、約160pxの空のカードになった */
  html[data-embed="hp"] main.is-empty .forecast { align-self: start; }
  /* 左右の列を同じ高さに伸ばし、短い側の最後のカードで下端をそろえる。中身の高さのままだと、結果の下が見通しの下より約70px上で終わった（院長 2026-11-05「結果と見通しの下のラインあってない」） */
  html[data-embed="hp"] main:not(.is-empty):not(:has(.legend-more[open])) :is(.left-column, .lower-layout) { align-self: stretch; }
  html[data-embed="hp"] main:not(.is-empty):not(:has(.legend-more[open])) :is(.headline, .forecast) { flex: 1 0 auto; }
}
/* HPの見出し階層を本文とそろえる。 */
html[data-embed="hp"] :is(h2:not(.sr-only), .step-label, #chart-title, #forecast-title) { font-family: var(--serif); font-size: 18px; font-weight: 700; }
html[data-embed="hp"] .forecast-block h3 { font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-weight: 700; }
@media (max-width: 400px) {
  /* 右の固定タグと値を重ねない。入力カード全体の右余白は増やさない。 */
  html[data-embed="hp"] .chairside-range output { margin-right: 48px; }
}
/* 2列の見通しは、左右の「現在」「73歳」…を同じ段に置く。行の数は app.js の countForecastRows が --forecast-rows に入れる
   （左だけ見出しの下に物差しの1行があり、右は行の下に「（10年後、7本減）」があって、同じ年齢の行が上下にずれた。院長 2026-10-31） */
@media (min-width: 47.5em) {
  /* 余った高さは見出しの2段（見出し・物差し）でなく、行の段にだけ分ける */
  html[data-embed="hp"] .forecast-columns { grid-template-columns: 1fr 1fr; grid-template-rows: min-content min-content; grid-auto-rows: auto; align-items: stretch; }
  html[data-embed="hp"] .forecast-block:not([hidden]) { display: grid; grid-row: span var(--forecast-rows, 1); grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  html[data-embed="hp"] .forecast-block .future-results { display: contents; }
  html[data-embed="hp"] .forecast-drift h3 { grid-row: span 2; align-self: start; }
  html[data-embed="hp"] .forecast-block .forecast-row { align-content: center; }
}
/* 「（10年後…）」は、どの幅でも左右とも2行目の頭に置く（左は値の横、右は2行目で、年の見せ方が違った） */
html[data-embed="hp"] .forecast-block .forecast-note { order: 1; }
html[data-embed="hp"] .forecast-block .forecast-sub { order: 2; flex-basis: 100%; }

/* なぞる案内とキー案内は、どの幅でも「図の見方」の直前へ置く。 */
.chart-section #chart-title .chart-hint,
.chart-section #chart-title .chart-key-hint { display: none; }
.legend { align-content: flex-start; }
.legend .legend-hint { display: inline-flex; flex-basis: 100%; }
.legend .legend-key-hint { display: none; }
.chart-section:has(#chart:focus-visible) .legend-hint:not(.legend-key-hint) { display: none; }
.chart-section:has(#chart:focus-visible) .legend .legend-key-hint { display: inline-flex; }
.no-scrub .legend .legend-hint { display: none; }
html[data-embed="hp"] .no-scrub .legend .legend-hint:not(.legend-key-hint) { display: inline-flex; }
html[data-embed="hp"] .no-scrub .chart-section:has(#chart:focus-visible) .legend-hint:not(.legend-key-hint) { display: none; }
/* 最後のカードの下の外の空き（section の 1.25rem）を枠の下に足さない。カードは display:contents の箱の中にあり、
   どれが最後かが幅と状態で変わるので main で打ち消す（枠の下に73px 余った。網羅検査 2026-11-04） */
html[data-embed="hp"] body > main { margin-bottom: -1.25rem; }