[hidden] { display: none !important; }
/* 言語: <html lang> と違うほうの文言を伏せる（src/lang.js が描く前に決める） */
html[lang="ja"] [lang="en"], html[lang="en"] [lang="ja"] { display: none !important; }
:root {
  --bg: #0b1520;
  --panel: #111e2b;
  --panel2: #172838;
  --well: #0d1925; /* 開いた出来事の中 */
  --pop: #0f1c28; /* 探した結果の窓 */
  --glow: #1a2c40; /* 上のほうの明るみ */
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.35); /* 指を乗せたときの縁 */
  --dash: rgba(255, 255, 255, 0.25);
  --tint: rgba(255, 255, 255, 0.05);
  --tint2: rgba(255, 255, 255, 0.1);
  --text: #eef4f9;
  --text2: #d9e3ec; /* 本文（見出しより少し控えめ） */
  --sub: #a3b5c6;
  --accent: #ffd666; /* 塗り（選んだ帯・見かたの札・アプリで見る） */
  --accent-ink: #ffd666; /* 文字と線。白い見た目では黄色の文字は読めないので濃くする */
  --accent-wash: rgba(255, 214, 102, 0.14);
  --on-accent: #1d1503;
  --link: #8fd3ff;
  --bar-bg: rgba(11, 21, 32, 0.96);
  --shadow: rgba(0, 0, 0, 0.4);
  --bars: rgba(160, 190, 215, 0.38);
  --tip-bg: #f4f8fb;
  --tip-fg: #0b1520;
  --chip-all: #dfe8f0; /* 選んだ「すべて」 */
  --chip-all-fg: #0b1520;
  --on-sel: #fff; /* 選んだ色つきの札の文字 */
  --neutral: #9fb3c6;
  --badge-fg: #f1f6fa;
  --t-cause: #ffcf99;
  --t-heir: #a8e6ff;
  --t-rival: #ff9ba5;
  --t-tie: #d4c4ff;
  color-scheme: dark;
}
/* 白い見た目（src/theme.js が <html data-theme> を決める）。分野の 5 色は白い背景でも dataviz の validate_palette.js を通る（docs/design.md） */
:root[data-theme="light"] {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --panel2: #eef2f6;
  --well: #f7f9fb;
  --pop: #ffffff;
  --glow: #e3ebf4;
  --line: rgba(20, 40, 60, 0.14);
  --line-soft: rgba(20, 40, 60, 0.08);
  --line-strong: rgba(20, 40, 60, 0.4);
  --dash: rgba(20, 40, 60, 0.3);
  --tint: rgba(20, 40, 60, 0.04);
  --tint2: rgba(20, 40, 60, 0.08);
  --text: #121d28;
  --text2: #273441;
  --sub: #566679;
  --accent-ink: #8f6200;
  --accent-wash: rgba(214, 160, 0, 0.16);
  --link: #0b63a0;
  --bar-bg: rgba(255, 255, 255, 0.96);
  --shadow: rgba(20, 40, 60, 0.14);
  --bars: rgba(70, 95, 125, 0.32);
  --tip-bg: #121d28;
  --tip-fg: #ffffff;
  --chip-all: #121d28;
  --chip-all-fg: #ffffff;
  --on-sel: #121d28;
  --neutral: #6c7d90;
  --badge-fg: #121d28;
  --t-cause: #a55400;
  --t-heir: #0b63a0;
  --t-rival: #b8303e;
  --t-tie: #5f45c0;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif; }
body { background: radial-gradient(1200px 600px at 50% -200px, var(--glow) 0%, var(--bg) 70%) no-repeat, var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.4; }

#site-header { display: flex; align-items: center; gap: 12px; max-width: 1400px; margin: 0 auto; padding: 12px 16px; }
#site-header .apps-link { color: var(--sub); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
#site-header .name { font-weight: 800; font-size: 18px; margin: 0; }
#site-header .name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.header-sub { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--sub); }
.langsw { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.langsw button { font-size: 12px; padding: 0 12px; min-height: 44px; min-width: 44px; border: 0; background: none; color: var(--sub); }
.langsw button[aria-pressed="true"] { background: var(--tint2); color: var(--text); font-weight: 800; }
/* 見た目の切り替え（☀ 白い見た目へ・☾ 暗い見た目へ）。いまの見た目と逆の印を出す */
.themesw { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--sub); font-size: 18px; line-height: 1; }
.themesw:hover { color: var(--text); border-color: var(--line-strong); }
.langsw + .themesw, .yp-lang + .themesw { margin-left: 0; }
:root[data-theme="light"] .themesw .to-light, :root:not([data-theme="light"]) .themesw .to-dark { display: none; }
/* 英語の「1st」は丸に入らないので横長にする */
html[lang="en"] .first { width: auto; padding: 0 5px; border-radius: 9px; }
#ad-section { max-width: 1400px; margin: 24px auto 0; }

#app { padding: 0 16px; }
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.first { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 1.5px solid var(--accent-ink); color: var(--accent-ink); font-size: 11px; font-weight: 800; vertical-align: 1px; }

/* ── 年を選ぶ欄（上に残す） ── */
#yearbar { position: sticky; top: 0; z-index: 5; max-width: 1400px; margin: 0 auto; padding: 8px 12px 10px; background: var(--bar-bg); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 8px 20px var(--shadow); }
.yb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.step { min-width: 88px; min-height: 44px; padding: 0 14px; white-space: nowrap; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 15px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
.step:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.yb-title { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.yb-years { display: flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 800; }
.yb-year { display: inline-flex; align-items: baseline; gap: 2px; font-size: 22px; font-weight: 800; }
.yb-sub { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; }
#mode { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#mode button { min-height: 40px; padding: 0 14px; border: 0; background: none; color: var(--sub); font-size: 13px; font-weight: 700; }
#mode button + button { border-left: 1px solid var(--line); }
#mode button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
#year-input, #to-input { min-height: 40px; width: 3.3em; padding: 0; border: 0; border-bottom: 2px dashed var(--dash); background: none; color: var(--text); font: inherit; font-size: 34px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
#year-input::-webkit-outer-spin-button, #year-input::-webkit-inner-spin-button, #to-input::-webkit-outer-spin-button, #to-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#year-input:focus, #to-input:focus { outline: none; border-bottom-color: var(--accent-ink); }
#wareki { font-size: 14px; color: var(--sub); font-weight: 700; }
/* 1 年でない区切りの名前（押すと年を打てる） */
.bin-label { min-height: 40px; padding: 0 4px; border: 0; border-bottom: 2px dashed var(--dash); background: none; color: var(--text); font: inherit; font-size: 28px; font-weight: 900; white-space: nowrap; }
.bin-label:hover { border-bottom-color: var(--accent-ink); }
#yearbar.range .bin-label { font-size: 22px; }

/* 年の帯：全体（千年分）と、選んだ年の前後を拡大した帯 */
.strip { position: relative; height: 50px; margin-top: 8px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; border-radius: 8px; }
.strip.zoom { height: 44px; margin-top: 6px; }
.strip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.strip .bars { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: flex; align-items: flex-end; }
.strip.zoom .bars { height: 24px; }
.strip .bars i { flex: 1 1 0; min-width: 0; background: var(--bars); }
.strip.zoom .bars i { border-right: 1px solid var(--bg); }
.strip .bars i.on { background: var(--accent); }
.strip .labels { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; }
.strip .labels span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--text2); background: var(--tint2); border-right: 1px solid var(--bg); }
.strip .labels span:nth-child(even) { background: var(--tint); }
.strip.zoom .labels span { justify-content: flex-start; padding-left: 3px; font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; }
.strip .mark { position: absolute; top: -3px; height: 34px; min-width: 2px; border: 2px solid var(--accent-ink); border-radius: 3px; background: var(--accent-wash); pointer-events: none; transform: translateX(-2px); box-sizing: content-box; }
.strip.zoom .mark { height: 30px; }
.strip .tip { position: absolute; top: -2px; transform: translate(-50%, -100%); padding: 2px 8px; border-radius: 6px; background: var(--tip-bg); color: var(--tip-fg); font-size: 12px; font-weight: 800; pointer-events: none; white-space: nowrap; z-index: 1; }

/* ── 絞り込みと探す ── */
#toolbar { max-width: 1400px; margin: 12px auto 0; display: flex; flex-direction: column; gap: 8px; }
.frow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.flabel { flex: none; width: 2.6em; font-size: 12px; font-weight: 800; color: var(--sub); }
/* 英語の「Region」「Field」は 2.6em に入らない */
html[lang="en"] .flabel { width: 3.8em; }
.frow.tools { flex-wrap: wrap; padding-left: calc(2.6em + 10px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* flex: none：min-width を付けると中身より小さく縮むようになる（スマホの横に流す札が潰れた） */
.chips button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 44px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line); background: none; color: var(--sub); font-size: 13px; font-weight: 700; white-space: nowrap; }
.chips button:hover { border-color: var(--line-strong); color: var(--text); }
.chips button i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); }
.chips button .ck { display: none; font-size: 12px; }
/* 選んだ札：塗り・太い縁・✓。「すべて」は白 */
.chips button[aria-pressed="true"] { --sel: var(--c, var(--chip-all)); color: var(--on-sel); border: 2px solid var(--sel); background: color-mix(in srgb, var(--sel) 38%, var(--bg)); padding: 0 12px; }
.chips button[data-key="all"][aria-pressed="true"] { background: var(--chip-all); color: var(--chip-all-fg); }
.chips button[aria-pressed="true"] i { background: var(--c); border-color: #fff; }
.chips button[aria-pressed="true"] .ck { display: inline; }
.ghost, .toggle { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ghost:hover, .toggle:hover { border-color: var(--line-strong); }
.toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--sub); }
.toggle .first { margin: 0 4px 0 0; }
/* 地域・分野の札と同じく、選んだら塗り・太い縁・✓ */
.toggle .ck { display: none; margin-left: 4px; font-size: 12px; }
.toggle[aria-pressed="true"] { color: var(--on-sel); border: 2px solid var(--accent-ink); background: color-mix(in srgb, var(--accent) 30%, var(--bg)); padding: 0 13px; }
.toggle[aria-pressed="true"] .ck { display: inline; }
.search { position: relative; flex: 0 1 320px; margin-left: auto; }
#q { width: 100%; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
#q:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
#q-results { position: absolute; z-index: 6; top: calc(100% + 4px); right: 0; width: min(440px, 92vw); max-height: 60vh; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--pop); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px var(--shadow); }
#q-results button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13px; line-height: 1.5; }
#q-results button:hover { background: var(--panel2); }
#q-results b { flex: none; color: var(--sub); font-variant-numeric: tabular-nums; }
#q-results button span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#q-results .none { padding: 10px; font-size: 13px; color: var(--sub); }

/* ── その年 ── */
#year { max-width: 1400px; margin: 14px auto 0; }
#year-sum { margin: 0 0 12px; font-size: 13px; color: var(--sub); }
#year-sum b { font-size: 18px; color: var(--text); }
.fnote { display: inline-block; margin-left: 10px; padding: 1px 10px; border-radius: 99px; background: var(--accent-wash); color: var(--accent-ink); font-weight: 700; }
#loading { color: var(--sub); }
#highlights h3, .region h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 16px; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; margin-bottom: 18px; }
.hl { display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 5px solid var(--c); background: var(--panel); text-align: left; }
.hl:hover { background: var(--panel2); border-color: var(--line-strong); border-left-color: var(--c); }
.hl-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sub); font-weight: 700; }
.hl-t { font-size: 15px; font-weight: 800; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

#regions-out.by-region { columns: 3 380px; column-gap: 12px; }
/* 期間は年を上から順に 1 年ずつ全幅で並べ、年の中の出来事を段組みにする（段組みで年を流すと 2000・2006・2008 と飛んで見える） */
#regions-out.by-year { display: flex; flex-direction: column; gap: 12px; }
#regions-out.by-year .region { margin: 0; }
#regions-out.by-year ul { columns: 2 440px; column-gap: 24px; }
#regions-out.by-year .ev { break-inside: avoid; }
#regions-out.by-year .ev.big .ev-t { font-weight: 400; color: var(--text2); }
.yb-years { white-space: nowrap; }
.yr-open { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 0 4px; border: 0; background: none; font-size: 17px; font-weight: 800; color: var(--text); }
.yr-open small { font-size: 12px; font-weight: 600; color: var(--sub); }
.yr-open:hover { color: var(--accent-ink); }
.rg { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--tint2); color: var(--sub); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.region { break-inside: avoid; margin: 0 0 12px; padding: 12px 12px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.region h3 small { font-size: 11px; font-weight: 600; color: var(--sub); }
.region h3 .n { margin-left: auto; padding: 0 8px; border-radius: 99px; background: var(--panel2); font-size: 12px; color: var(--sub); }
.region ul { margin: 0; padding: 0; list-style: none; }
.ev { border-top: 1px solid var(--line-soft); }
.ev:first-child { border-top: 0; }
.ev-btn { display: grid; grid-template-columns: 4.6em 12px 1fr; align-items: baseline; gap: 8px; width: 100%; min-height: 40px; padding: 8px 4px; border: 0; background: none; text-align: left; border-radius: 8px; }
.ev-btn:hover { background: var(--tint); }
.ev-d { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 古い時代は左に年・年代が入るので広く（「前2334年頃」「5億3880万年前」は折り返す） */
.wide .ev-btn { grid-template-columns: 6.4em 12px 1fr; }
.wide .ev-d { white-space: normal; line-height: 1.4; }
/* 長い文は 3 行で「…」。押して開くと全文 */
.ev-t { font-size: 14px; line-height: 1.6; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev.open .ev-t { display: block; overflow: visible; }
.thin { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--dash); font-size: 13px; line-height: 1.7; color: var(--sub); }
.thin a { color: var(--link); }
.ev.big .ev-t { color: var(--text); font-weight: 700; }
.ev.open .ev-btn { background: var(--tint2); }
.has-links { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; border: 1px solid var(--accent-ink); color: var(--accent-ink); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.ev-more { margin: 4px 0 10px calc(4.6em + 24px); padding: 10px 12px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11px; line-height: 1.5; font-weight: 800; background: color-mix(in srgb, var(--c, var(--neutral)) 24%, transparent); color: var(--badge-fg); }
.badge.region { --c: var(--neutral); }
.ev-s { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--text2); }
.en-src { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--sub); }
.en-src span { display: block; font-weight: 700; }
.ev-more h4 { margin: 12px 0 6px; font-size: 12px; color: var(--sub); }
.jumps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.jump { display: flex; flex-direction: column; gap: 3px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); text-align: left; }
.jump:hover { border-color: var(--line-strong); }
.j-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }
.j-top b { color: var(--sub); font-variant-numeric: tabular-nums; }
.j-t { font-weight: 800; }
.arw { color: var(--accent-ink); font-weight: 800; }
.j-note { font-size: 12px; line-height: 1.6; color: var(--text2); }
.type { padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 800; border: 1px solid var(--dash); color: var(--sub); white-space: nowrap; }
.t-cause { color: var(--t-cause); border-color: color-mix(in srgb, var(--t-cause) 50%, transparent); }
.t-heir { color: var(--t-heir); border-color: color-mix(in srgb, var(--t-heir) 45%, transparent); }
.t-rival { color: var(--t-rival); border-color: color-mix(in srgb, var(--t-rival) 50%, transparent); border-style: dashed; }
.t-tie { color: var(--t-tie); border-color: color-mix(in srgb, var(--t-tie) 45%, transparent); border-style: dotted; }
.wp { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; color: var(--link); font-size: 13px; font-weight: 700; text-decoration: none; }
.wp:hover { text-decoration: underline; }
.more { width: 100%; min-height: 40px; margin-top: 4px; border-radius: 10px; border: 1px dashed var(--line); background: none; color: var(--sub); font-size: 13px; font-weight: 700; }
.more:hover { color: var(--text); border-color: var(--line-strong); }
.empty { padding: 16px; border-radius: 12px; border: 1px dashed var(--line); color: var(--sub); }

#guide-section { max-width: 1400px; margin: 28px auto; padding: 0 4px; line-height: 1.8; color: var(--text2); font-size: 14px; }
#guide-section h2 { font-size: 18px; color: var(--text); }
.related-apps { max-width: 1400px; margin: 28px auto 0; padding: 0 4px; }
.related-apps-title { font-size: 18px; margin: 0 0 10px; }
.related-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, calc(50% - 5px)), 1fr)); gap: 10px; }
.related-app-link.ra-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; transition: transform 0.15s, border-color 0.15s; }
.related-app-link.ra-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.ra-card .ra-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ra-card .ra-name { display: block; padding: 8px 12px 10px; font-size: 13px; font-weight: 700; line-height: 1.4; }
#site-footer { max-width: 1400px; margin: 0 auto; padding: 24px 16px 40px; color: var(--sub); font-size: 13px; text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 10px; align-items: center; }
.footer-link { color: var(--sub); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.footer-refs { max-width: 760px; margin: 8px auto 0; font-size: 12px; line-height: 1.7; }
.footer-refs a { color: var(--sub); }
.footer-copy { margin: 6px 0 0; }

@media (max-width: 600px) {
  #app { padding: 0 10px; }
  .header-sub { display: block; margin: 0; }
  #site-header .name { font-size: 16px; line-height: 1.3; }
  /* 題名に 14 字ぶん取れないときは、言語と見た目の釦を次の行へ回す（題名が「歴史的瞬／間」と語の途中で折れた） */
  #site-header { flex-wrap: wrap; row-gap: 4px; }
  #site-header .name { flex: 1 1 14em; }
  #yearbar { margin: 0 -10px; border-radius: 0; border-left: 0; border-right: 0; padding: 6px 10px 8px; }
  .step { min-width: 64px; padding: 0 8px; font-size: 13px; }
  #year-input { font-size: 28px; }
  .yb-title { gap: 2px; }
  .yb-years, .yb-year { font-size: 18px; }
  #to-input { font-size: 28px; }
  #wareki { font-size: 11px; }
  #mode button { min-height: 40px; padding: 0 12px; }
  /* 期間のときは前後のボタンを ‹ › だけにして、年 2 つを 1 行に収める */
  #yearbar.range .step { min-width: 44px; padding: 0; font-size: 20px; }
  #yearbar.range .step .lbl { display: none; }
  #yearbar.range #year-input, #yearbar.range #to-input { font-size: 24px; }
  .yb-years { gap: 2px; }
  .strip { height: 46px; }
  .strip.zoom { height: 42px; }
  /* 地域・分野の札は 1 行で横にすべらせる */
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -10px; padding-right: 10px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { padding: 0 11px; font-size: 12px; }
  .chips button[aria-pressed="true"] { padding: 0 10px; }
  .frow.tools { padding-left: 0; }
  .search { flex: 1 1 100%; margin-left: 0; }
  #q-results { left: 0; right: auto; width: 100%; }
  .ev-btn { grid-template-columns: 3.9em 10px 1fr; gap: 6px; }
  .wide .ev-btn { grid-template-columns: 5.4em 10px 1fr; }
  .bin-label { font-size: 22px; }
  #yearbar.range .bin-label { font-size: 17px; }
  .ev-more { margin-left: 0; }
  /* 主な出来事は短くして、地域ごとの一覧を近くに */
  .hl-grid { gap: 8px; }
  .hl { min-height: 0; padding: 10px 12px; gap: 4px; }
  .hl-t { font-size: 14px; -webkit-line-clamp: 2; }
}

/* ── 区切りごとの静的なページ（scripts/make-pages.mjs が作る y/…/index.html） ── */
.yp #site-header .name { font-size: 16px; }
/* スマホで言語の切り替えが画面の外へ押し出されないよう、折り返す */
.yp #site-header { flex-wrap: wrap; row-gap: 0; }
.yp-lang { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); text-decoration: none; font-size: 13px; }
.yp-main { max-width: 1100px; margin: 0 auto; padding: 0 16px 24px; line-height: 1.7; }
.yp-crumbs { font-size: 13px; color: var(--sub); margin: 8px 0 4px; }
/* パンくずのリンクは押せる高さにする（文字だけだと 19px） */
.yp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.yp-crumbs a, .yp-more a, .yp-pager a, .yp-links a { color: var(--accent-ink); }
.yp-h1 { font-size: 28px; margin: 8px 0 0; }
.yp-sub { color: var(--sub); margin: 4px 0 0; font-size: 14px; }
.yp-sum { margin: 10px 0 0; font-size: 14px; color: var(--sub); }
.yp-sum b { color: var(--text); font-size: 18px; }
.yp-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin: 8px 0 4px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; }
.yp-hlh { font-size: 18px; margin: 20px 0 6px; }
.yp ul.yp-hl, .yp-region ul { list-style: none; margin: 0; padding: 0; }
.yp-hl li, .yp-region li { display: grid; grid-template-columns: 5.6em 10px 1fr; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.yp-hl li { padding: 10px 0; }
.yp-hl .yp-t { font-weight: 700; }
.yp-d { color: var(--sub); font-size: 13px; font-variant-numeric: tabular-nums; }
.yp-r { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 700; color: var(--sub); }
.yp-s { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--text2); }
.yp-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 20px; }
.yp-region { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.yp-region h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 4px 0 6px; }
.yp-region h2 .n, .yp-links .n { margin-left: auto; font-size: 12px; color: var(--sub); }
.yp-more { margin: 8px 0 0; font-size: 13px; }
.yp-pager { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.yp-pager a { display: inline-flex; align-items: center; min-height: 44px; }
.yp-tier h2 { font-size: 18px; margin: 20px 0 8px; }
.yp-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.yp-links li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 600px) {
  .yp-h1 { font-size: 22px; }
  .yp-hl li, .yp-region li { grid-template-columns: 4.6em 10px 1fr; gap: 6px; }
  .yp-regions { grid-template-columns: 1fr; }
}
.yp-index a { color: var(--accent-ink); }