/* gaiaseek — v5（2026-09-02）。正本: docs/DESIGN.md v5。手で書く数少ないファイルのひとつ。
   規則: 紙の地に墨の濃淡で階層を作る。彩度はアクセント1色（選択・フォーカス・検印）と状態の点だけ。影はレイアウトに使わない。角丸は 6 / 9999 / 2 の3つ。 */

:root {
  --paper: #F7F5F0; --card: #FFFFFF; --well: #EFECE4; --well-2: #E6E2D8;
  --line: #E3DFD5; --line-2: #C9C3B6;
  --ink: #15140F; --ink-2: #454239; --ink-3: #6F6A5F; --ink-4: #A39E92;
  --accent: #C8401A; --accent-ink: #A33413; --accent-soft: #FBE9E2;
  --m0: #ECE9E1; --m1: #D9D5CB; --m2: #B1ACA0; --m3: #7B766B; --m4: #34322C;
  --s-live: #1F7A3F; --s-degraded: #A66A00; --s-gated: #3B5BA5; --s-hijacked: #B3261E; --s-dead: #8A857A;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-pop: 0 12px 32px -16px rgba(21, 20, 15, .35);
  --r: 6px;
  --pad: 32px; --max: 1280px;
  --text-caption: 12px; --text-small: 13.5px; --text-body: 15px; --text-body-lg: 17px;
}
@media (max-width: 720px) { :root { --pad: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: var(--text-body); line-height: 1.8;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
html[lang="en"] body { line-height: 1.6; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: 600; color: var(--ink); }
code { font-family: var(--mono); font-size: .92em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp { flex-grow: 1; }
[hidden] { display: none !important; }

/* ---- 書体の役割 ---- */
.serif { font-family: var(--serif); }
.h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; font-feature-settings: "palt"; }
.h1.page { font-size: clamp(28px, 2.6vw, 34px); line-height: 1.25; }
.h2 { font-size: 24px; line-height: 1.3; font-feature-settings: "palt"; }
.h3 { font-size: 18px; line-height: 1.4; }
html[lang="en"] .h1, html[lang="en"] .h2 { font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 600; letter-spacing: -0.015em; font-feature-settings: normal; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lab { font-size: var(--text-caption); line-height: 1.5; color: var(--ink-3); }
.lab a { color: inherit; }
.lede { font-size: var(--text-body-lg); line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.small { font-size: var(--text-small); line-height: 1.7; color: var(--ink-2); }
.measure { max-width: 68ch; }
.ink { color: var(--ink); }

/* ---- 検印（日付札・1ページに2つまで） ---- */
.stamp { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent); color: var(--accent-ink); border-radius: 2px;
  padding: 4px 8px; font-size: var(--text-caption); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--card); }

/* ---- 状態 ---- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 6px; flex-shrink: 0; }
.dot.live { background: var(--s-live); }
.dot.degraded { background: var(--s-degraded); }
.dot.gated { background: linear-gradient(90deg, var(--s-gated) 50%, transparent 50%); border: 1px solid var(--s-gated); }
.dot.hijacked { border-radius: 0; background: var(--s-hijacked); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 9px; height: 9px; }
.dot.dead { background: transparent; border: 1.5px solid var(--s-dead); }
.st { font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; white-space: nowrap; color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend .st { font-weight: 400; }

/* ---- ヘッダー ---- */
.hdr { height: 56px; display: flex; align-items: center; gap: 28px; padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: var(--paper); }
.wordmark { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 500; font-size: 22px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1; }
.wordmark:hover { color: var(--ink); }
.nav { display: flex; gap: 22px; font-size: 14px; }
.nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 6px 0; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 8px; text-decoration-color: var(--ink); }
.hdr .tools { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9999px; background: var(--card);
  color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1; white-space: nowrap; transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out; }
.chip:hover { background: var(--well); border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip b { font-weight: 500; color: var(--ink-3); }
.chip.on b { color: var(--accent-ink); }
.menu { display: none; }
@media (max-width: 960px) {
  .hdr { gap: 16px; }
  .hdr > .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; width: 44px; height: 44px; justify-content: center; margin-right: -12px; border-radius: var(--r); color: var(--ink); }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { background: var(--well); }
  .menu .nav { position: absolute; right: 0; top: 48px; z-index: 6; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); display: flex; flex-direction: column; gap: 0; min-width: 240px; padding: 6px 0; box-shadow: var(--shadow-pop); }
  .menu .nav a { padding: 11px 18px; display: block; font-size: 15px; }
  .menu .nav a[aria-current="page"] { text-decoration: none; background: var(--well); }
}

/* ---- レイアウトの器 ---- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule.strong { background: var(--line-2); }
.sec { padding: 56px var(--pad); max-width: var(--max); margin: 0 auto; }
.sec.tight { padding-top: 32px; padding-bottom: 24px; }
.sec-h { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sec-h .more { margin-left: auto; font-size: var(--text-small); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; gap: 32px; } .sec { padding: 40px var(--pad); } }
.note { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 20px 22px; }
.note p + p { margin-top: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 14px; height: 40px; font-size: var(--text-small); text-decoration: none; color: var(--ink); background: var(--card); }
.btn:hover { background: var(--well); color: var(--ink); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.morelinks { display: flex; gap: 18px; margin-top: 14px; font-size: var(--text-small); flex-wrap: wrap; }

/* ---- ヒーロー（v5: 左に文と検索窓、右に地図。PC 2カラム） ---- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 40px; align-items: start; padding: 40px var(--pad) 28px; max-width: var(--max); margin: 0 auto; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero .lede { max-width: 44ch; font-size: 16px; }
.hero .h1 { font-size: clamp(30px, 3vw, 42px); word-break: keep-all; overflow-wrap: normal; }
html[lang="en"] .hero .h1 { max-width: 16ch; font-size: clamp(32px, 3.2vw, 46px); }
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .hero .h1 br.pc { display: none; }
}
@media (max-width: 720px) { .hero { padding-top: 24px; gap: 18px; } .hero-copy { gap: 14px; } .hero .lede { font-size: 15px; } }

/* 国の選択: JS 無しは <select>、JS ありは検索窓（両方は見せない） */
.ccsel { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-small); color: var(--ink-2); }
.ccsel select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 15px; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); height: 48px;
  padding: 0 40px 0 14px; width: 100%; min-width: 0; cursor: pointer;
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2315140F' stroke-width='1.5'/></svg>") no-repeat right 14px center; }
.js .ccsel { display: none; }
/* JS 無しの国一覧（<details>）。JS ありでは CSS が隠し、検索窓が出る */
.ccsel summary { list-style: none; cursor: pointer; display: flex; align-items: center; height: 48px; padding: 0 14px 0 44px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 15px; color: var(--ink);
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%236F6A5F' stroke-width='1.6'><circle cx='8' cy='8' r='5.5'/><path d='M12.2 12.2L16 16'/></svg>") no-repeat 14px center; }
.ccsel summary::-webkit-details-marker { display: none; }
.ccsel[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cclist { border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--r) var(--r); background: var(--card); padding: 12px 14px; max-height: 420px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 20px; }
.ccg { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ccg b { font-size: var(--text-caption); color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.ccg a { color: var(--ink-2); text-decoration: none; display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.ccg a:hover { color: var(--accent-ink); }
.ccg .n { color: var(--ink-3); font-size: var(--text-caption); }

.csearch { display: none; position: relative; }
.js .csearch { display: block; }
.csearch input { width: 100%; height: 48px; padding: 0 14px 0 44px; border: 1px solid var(--line-2); border-radius: var(--r); font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%236F6A5F' stroke-width='1.6'><circle cx='8' cy='8' r='5.5'/><path d='M12.2 12.2L16 16'/></svg>") no-repeat 14px center; }
.csearch input::placeholder { color: var(--ink-3); }
.csearch input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.csearch .cands { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-pop); max-height: 380px; overflow-y: auto; padding: 4px 0; margin: 0; }
.csearch .cand { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; cursor: pointer; font-size: 15px; color: var(--ink); }
.csearch .cand .rg { color: var(--ink-3); font-size: var(--text-caption); }
.csearch .cand .n { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.csearch .cand[aria-selected="true"], .csearch .cand:hover { background: var(--accent-soft); }
.csearch .cand.none { color: var(--ink-3); cursor: default; }
.csearch .cand.none:hover { background: transparent; }
@media (max-width: 720px) { .ccsel select, .csearch input { height: 44px; } }

.eg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eg > .lab { margin-right: 2px; flex: 0 0 auto; white-space: nowrap; }
.eg .chip .arr { color: var(--ink-3); }

/* 地図。国境はビルド時に SVG 化（pipeline/map/）。色の濃さ = 件数（墨の4段）。選択中はアクセントで塗る。 */
.map { margin: 0; position: relative; border: 1px solid var(--line); background: var(--card); padding: 12px 12px 8px; border-radius: var(--r); min-width: 0; }
.map svg { display: block; width: 100%; height: auto; max-height: 400px; margin: 0 auto; }
.map .sphere { fill: var(--paper); stroke: var(--line-2); stroke-width: .6; }
.map .grat { fill: none; stroke: rgba(21, 20, 15, .07); stroke-width: .5; }
.map .gl { font-family: var(--sans); font-size: 8px; fill: var(--ink-4); }
.map .land path { fill: var(--m0); stroke: var(--paper); stroke-width: .5; stroke-linejoin: round; }
.map a.c path, .map a.c circle { stroke: var(--paper); stroke-width: .5; stroke-linejoin: round; cursor: pointer; transition: fill 140ms ease-out; }
.map a.n1 path, .map a.n1 circle { fill: var(--m1); }
.map a.n2 path, .map a.n2 circle { fill: var(--m2); }
.map a.n3 path, .map a.n3 circle { fill: var(--m3); }
.map a.n4 path, .map a.n4 circle { fill: var(--m4); }
.map a.c:hover path, .map a.c:hover circle { fill: var(--accent-ink); }
.map a.c:focus { outline: none; }
.map a.c:focus-visible path, .map a.c:focus-visible circle { stroke: var(--accent); stroke-width: 1.5; }
.map a.c.on path, .map a.c.on circle { fill: var(--accent); stroke: var(--paper); stroke-width: .8; }
.map .dots a circle { stroke: var(--paper); stroke-width: 1; }
.map .dots a:hover circle, .map .dots a.on circle { r: 6; }
.tip { position: absolute; pointer-events: none; z-index: 2; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.3; padding: 6px 10px; border-radius: 4px;
  transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; box-shadow: var(--shadow-pop); }
.tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.map figcaption { padding: 8px 2px 0; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: var(--text-caption); color: var(--ink-3); }
.map .key { display: inline-flex; align-items: center; gap: 5px; }
.map .sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.map .sw.n1 { background: var(--m1); } .map .sw.n2 { background: var(--m2); } .map .sw.n3 { background: var(--m3); } .map .sw.n4 { background: var(--m4); }
.map .sw.none { background: var(--m0); } .map .sw.sel { background: var(--accent); }
.map .ramp { display: inline-flex; gap: 2px; }
@media (max-width: 1100px) { .map svg { max-height: 340px; } }
@media (max-width: 720px) {
  .map { padding: 6px 6px 4px; } .map .gl { display: none; } .map svg { max-height: 170px; } .map figcaption { gap: 4px 10px; }
  .eg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad); }
  .eg::-webkit-scrollbar { display: none; }
}

/* ---- 国別パネル（トップは既定の国を静的に。map.js が差し替える。/c/{cc}/ の本文も同じ部品） ---- */
.panel { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 8px; }
.panel .box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px 20px; scroll-margin-top: 72px; }
.ph { display: flex; align-items: baseline; gap: 14px 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ph .h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; }
.ph .sum { font-size: var(--text-caption); color: var(--ink-3); }
.ph .more { margin-left: auto; font-size: var(--text-small); white-space: nowrap; }
.ph .en-note { flex-basis: 100%; font-size: var(--text-caption); color: var(--ink-3); }
.grp-h { font-size: 15px; font-weight: 700; color: var(--ink); padding: 18px 0 4px; display: flex; align-items: baseline; gap: 10px; }
.grp-h .n { font-size: var(--text-caption); font-weight: 400; color: var(--ink-3); }
.prows { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 40px; }
.prow, .row { padding: 12px 0 13px; border-bottom: 1px solid var(--line); min-width: 0; }
.prow:hover, .row:hover { background: var(--well); box-shadow: 0 0 0 8px var(--well); border-radius: 2px; }
.l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.l1 .stw { font-size: var(--text-caption); color: var(--ink-3); }
.l1 .stw.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 稼働は点だけ。語は読み上げ用に残す */
.pick { display: flex; flex-direction: column; gap: 6px; }
.pick > .lab { color: var(--ink-2); font-weight: 600; }
.nm { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
a.nm:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.loc { font-size: var(--text-small); color: var(--ink-2); }
.host { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.why { margin-top: 4px; font-size: var(--text-small); line-height: 1.65; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.why .now { color: var(--ink); font-weight: 600; }
.why .warn { color: var(--s-degraded); }
.meta { margin-top: 5px; font-size: var(--text-caption); color: var(--ink-3); line-height: 1.5; }
.meta a { color: inherit; }
.former .nm { color: var(--ink-2); font-weight: 600; }
.formerbox { margin-top: 12px; }
.formerbox summary { cursor: pointer; font-size: var(--text-small); color: var(--ink-2); padding: 10px 0; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.formerbox summary::-webkit-details-marker { display: none; }
.formerbox summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform 140ms ease-out; }
.formerbox[open] summary::before { transform: rotate(45deg); }
.formerbox summary:hover { color: var(--ink); }
.panel-hint { font-size: var(--text-small); color: var(--ink-3); padding: 8px 0 0; }
.panel-fail { font-size: var(--text-small); color: var(--ink-2); padding: 16px 0; }
@media (max-width: 720px) {
  .panel .box { padding: 16px 16px 12px; }
  .prows { grid-template-columns: 1fr; }
  .ph .more { margin-left: 0; }
  .prow:hover, .row:hover { box-shadow: none; background: transparent; }
}

/* ---- 国別ページ ---- */
.chead { padding: 36px var(--pad) 20px; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 20px 40px; align-items: end; }
.chead .h1.page { margin-bottom: 6px; }
@media (max-width: 960px) { .chead { grid-template-columns: 1fr; align-items: start; } }
.neighbors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.neighbors .lab { margin-right: 4px; }

/* ---- リンク集のかたち（カード） ---- */
.kinds3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .kinds3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kinds3 { grid-template-columns: 1fr; } }
.kind { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none; color: var(--ink); min-width: 0; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.kind:hover { background: var(--well); border-color: var(--line-2); color: var(--ink); }
.kind .word { font-size: 28px; line-height: 1.15; min-height: 34px; }
.kind .sphere { font-size: 15px; font-weight: 600; color: var(--ink); }
.kind .sum { font-size: var(--text-small); color: var(--ink-2); line-height: 1.6; }
.kind .cnt { margin-top: auto; padding-top: 8px; font-size: var(--text-caption); color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; }
.kind .cnt::after { content: "→"; color: var(--ink-3); }
.kind:hover .cnt::after { color: var(--accent-ink); }
.kind.gone { background: var(--well); }
.kind.gone .word { color: var(--ink-2); font-size: 22px; }

/* ---- どう確かめているか ---- */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
@media (max-width: 800px) { .trust { grid-template-columns: 1fr; gap: 20px; } }
.trust h3 { font-size: 16px; margin-bottom: 6px; }
.trust p { font-size: var(--text-small); line-height: 1.7; color: var(--ink-2); }

/* ---- 見本の壁（/forms/） ---- */
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 var(--pad); max-width: var(--max); margin: 0 auto; }
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 420px) { .wall { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; text-decoration: none; color: var(--ink); min-height: 190px; transition: background-color 140ms ease-out; }
.card:hover { background: var(--well); color: var(--ink); }
.card.gone { background: var(--well); }
.card.gone:hover { background: var(--well-2); }
.word { line-height: 1.1; font-weight: 600; color: var(--ink); font-size: clamp(26px, 2.4vw, 34px); overflow-wrap: anywhere; }
.word.latin { font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 500; overflow-wrap: normal; hyphens: manual; letter-spacing: -0.01em; }
.word.latin.long { font-size: clamp(22px, 1.95vw, 28px); }
.word.zh { font-family: 'Noto Serif SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', serif; }
.word.th { font-family: 'Noto Serif Thai', 'Thonburi', 'Leelawadee UI', serif; }
.word.ar { font-family: 'Amiri', 'Geeza Pro', 'Traditional Arabic', serif; direction: rtl; text-align: right; font-weight: 700; }
.word.ja { font-family: var(--sans); font-weight: 700; }
.word.big { font-size: clamp(40px, 5.4vw, 72px); }
.card.gone .word { color: var(--ink-2); font-size: clamp(22px, 2vw, 28px); }
.rom { font-size: var(--text-caption); color: var(--ink-3); line-height: 1.3; min-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sphere { font-size: var(--text-small); color: var(--ink); font-weight: 600; line-height: 1.4; }
.sum { font-size: var(--text-small); color: var(--ink-2); line-height: 1.6; }
.cnt { font-size: var(--text-caption); color: var(--ink-3); margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; }
.cnt::after { content: "→"; color: var(--ink-3); }
.card:hover .cnt::after { color: var(--accent-ink); }
@media (max-width: 720px) { .card { min-height: 150px; padding: 16px 14px 12px; } .card .sum { display: none; } }

/* ---- 種類（Tier の横帯・/strata/ とトップ以外） ---- */
.strata { display: flex; flex-direction: column; gap: 10px; }
.stratum { display: grid; grid-template-columns: 72px 1fr 150px; gap: 16px; align-items: center; text-decoration: none; color: var(--ink); }
.stratum:hover .bar span { background: var(--ink); }
.stratum .tier { font-size: 13px; font-weight: 600; color: var(--ink); }
.bar { height: 10px; background: var(--well-2); position: relative; border-radius: 2px; overflow: hidden; }
.bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); }
@media (max-width: 720px) { .stratum { grid-template-columns: 60px 1fr; } .stratum .lab.n { grid-column: 2; text-align: left !important; } }

/* ---- 地域索引（未使用のページ向けに残す） ---- */
.regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; }
@media (max-width: 1000px) { .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .regions { grid-template-columns: 1fr; } }
.region h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline; }
.region .cc { font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.region .cc a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.region .cc a:hover { color: var(--accent-ink); text-decoration: underline; }
.region .cc b { font-family: var(--mono); font-weight: 500; color: var(--ink); font-size: 12px; }
.region .cc .n { font-size: 12px; color: var(--ink-3); }

/* ---- 2枚組 ---- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair > a { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.pair > a:hover { background: var(--well); color: var(--ink); }
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } }

/* ---- 台帳の行（/atlas/ /forms/{id}/ /annex/：静的・全幅） ---- */
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 24px; align-items: start; scroll-margin-top: 72px; }
.row:target { background: var(--accent-soft); box-shadow: 0 0 0 8px var(--accent-soft); border-radius: 2px; }
.row .l1 { grid-column: 1; }
.row .why { grid-column: 1; max-width: 78ch; -webkit-line-clamp: unset; display: block; }
.row .meta { grid-column: 1; }
.row .tail { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; white-space: nowrap; padding-top: 3px; font-size: var(--text-caption); color: var(--ink-3); }
.row .dom { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.row a.dom { color: var(--ink); text-decoration-color: var(--line-2); }
.row a.dom:hover { color: var(--accent-ink); }
.row .warn { font-size: 11.5px; color: var(--s-degraded); }
@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; gap: 4px 0; }
  .row .tail { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; padding-top: 4px; white-space: normal; }
}
.grp { display: flex; align-items: baseline; gap: 14px; padding: 32px 0 6px; scroll-margin-top: 72px; }
.grp .h2 { font-size: 22px; }
.sub { display: flex; align-items: baseline; gap: 10px; padding: 16px 0 2px; scroll-margin-top: 72px; }
.sub b { font-size: 15px; font-weight: 700; color: var(--ink); }
.sub .cc { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sub .more { margin-left: auto; font-size: var(--text-caption); }

/* ---- 全一覧ページ ---- */
.atlas { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 40px; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
@media (max-width: 1000px) { .atlas { grid-template-columns: 1fr; gap: 0; } .atlas .side { order: -1; } }
.facets { display: flex; flex-direction: column; gap: 10px; padding: 20px var(--pad) 0; max-width: var(--max); margin: 0 auto; }
.facet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.facet label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.facet select, .facet input { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; height: 40px; }
.facet select { max-width: 300px; padding-right: 28px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F6A5F' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.facet input { min-width: 280px; }
.facet button { font: inherit; font-size: 13px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 12px; color: var(--ink-2); cursor: pointer; height: 40px; }
.facet button:hover { background: var(--well); }
@media (max-width: 720px) {
  .facet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .facet label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 12px; min-width: 0; }
  .facet select { width: 100%; min-width: 0; max-width: 100%; }
  .facet input { min-width: 0; width: 100%; grid-column: 1 / -1; }
  .facet .full { grid-column: 1 / -1; }
}
.showline { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; font-size: var(--text-small); color: var(--ink-3); }
.showline a { color: var(--ink-2); }
.showline .on { color: var(--ink); font-weight: 600; text-decoration-color: var(--ink); }
.side { padding-top: 24px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stat .v { font-size: 26px; line-height: 1; color: var(--ink); font-weight: 600; }
.stat .m { height: 4px; background: var(--well-2); position: relative; border-radius: 2px; overflow: hidden; }
.stat .m span { position: absolute; left: 0; top: 0; bottom: 0; }
@media (max-width: 1000px) { .side { display: flex; gap: 0 20px; flex-wrap: wrap; padding-top: 12px; } .side .stat { flex: 1 1 100px; border: 0; } .side .lab.hint { flex-basis: 100%; } }
.row.hide { display: none; }
.grp.hide, .sub.hide { display: none; }
.noresult { padding: 32px 0; color: var(--ink-2); display: none; }
.noresult.on { display: block; }

/* ---- 表 ---- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; font-size: var(--text-caption); color: var(--ink-3); font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-2); }
table.tbl td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl td.mono, table.tbl th.mono { font-family: var(--mono); font-size: 12.5px; }
.tblwrap { overflow-x: auto; }

/* ---- かたちのページ ---- */
.formhead { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 48px; padding: 40px var(--pad) 24px; max-width: var(--max); margin: 0 auto; }
@media (max-width: 960px) { .formhead { grid-template-columns: 1fr; gap: 20px; } }
.formhead .essay { font-size: 16px; line-height: 1.95; max-width: 60ch; color: var(--ink-2); }
html[lang="en"] .formhead .essay { line-height: 1.65; }
.prevnext { display: flex; justify-content: space-between; gap: 16px; padding: 24px 0 8px; font-size: var(--text-small); }

/* ---- 本文ページ ---- */
.prose { max-width: 68ch; }
.sec.prose { max-width: var(--max); }              /* 本文ページ: 器は他のセクションと同じ幅に置き、中身だけ 68ch に絞る（中央に寄せない） */
.sec.prose > :not(.tblwrap) { max-width: 68ch; }
.prose h2 { margin: 36px 0 12px; }
.prose h3 { margin: 24px 0 8px; font-weight: 600; font-size: 16px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 4px 0; }
.prose table { margin: 8px 0 18px; }

/* ---- フッター ---- */
.ft { border-top: 1px solid var(--line-2); margin-top: 24px; }
.ft .in { max-width: var(--max); margin: 0 auto; padding: 32px var(--pad) 48px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; font-size: 13px; color: var(--ink-2); line-height: 1.75; }
.ft .in a { color: var(--ink-2); }
.ft .in a:hover { color: var(--accent-ink); }
.ft .links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ft .links a { text-decoration: none; }
.ft .links a:hover { text-decoration: underline; }
@media (max-width: 820px) { .ft .in { grid-template-columns: 1fr; gap: 18px; } }

/* ---- 動き ---- */
a, .card, .kind, .btn, .chip, .stratum .bar span, .prow, .row { transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---- 印刷 ---- */
@media print { .hdr .tools, .menu, .facets, .side, .csearch, .ccsel { display: none; } a { color: var(--ink); } .row, .prow { break-inside: avoid; } }