/* 高天原繪卷 — 表装された絵巻
 *
 * 材料邏輯：真正的繪卷是裝裱過的，最珍貴的寫經用「紺紙金泥」。
 * 介面外框＝表装（紺地金泥），族譜畫布＝本紙（楮紙墨書）。
 * 高對比一律留給畫布，因為那裡有九十餘個密集漢字標籤。
 */

:root {
  /* 表装 —— 紺地 */
  --kon:        #14203a;   /* 紺 */
  --ai-nezu:    #24334f;   /* 藍鼠 */
  --kon-edge:   #0d1628;

  /* 本紙 —— 楮紙 */
  --kozo:       #e9dfc7;   /* 楮紙 */
  --kozo-lit:   #f3ecda;   /* 料紙（節點・引文） */
  --kozo-deep:  #ddd0b2;

  /* 顏料 */
  --sumi:       #191510;   /* 墨 */
  --sumi-soft:  #574d3f;
  --sumi-faint: #8b8168;
  --kindei:     #c3a054;   /* 金泥 */
  --kindei-lit: #ddc07d;
  --shu:        #b23a2e;   /* 朱 */

  /* 誕生方式 */
  --mode-kougou: #4a4136;  /* 交合 —— 墨 */
  --mode-misogi: #2a6b92;  /* 禊祓 —— 群青 */
  --mode-ukehi:  #a8842b;  /* 誓約 —— 金泥 */
  --mode-shi:    #6e5a8e;  /* 屍化生 —— 藤 */
  --mode-chi:    #94303c;  /* 血化生 —— 臙脂 */

  /* 明朝承載內容，ゴシック只作標示 —— 日本書籍設計的分工 */
  --mincho: "Noto Serif CJK TC", "Noto Serif CJK JP", "Noto Serif TC",
            "Yu Mincho", "Hiragino Mincho ProN", "Songti TC", "PMingLiU", serif;
  --gothic: "Noto Sans CJK TC", "Noto Sans CJK JP", "Noto Sans TC",
            "Hiragino Sans", "Yu Gothic", "Microsoft JhengHei", sans-serif;

  --topbar-h: 3.6rem;
  --panel-w: 25.5rem;

  /* 標示體共用設定：小、極寬字距 */
  --label: 600 .72rem/1.6 var(--gothic);
  --label-track: .32em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kon:        #0b1122;
    --ai-nezu:    #16203a;
    --kon-edge:   #060a15;
    --kozo:       #2b2721;   /* 燈下的紙 */
    --kozo-lit:   #353028;
    --kozo-deep:  #201c17;
    --sumi:       #eee5d2;
    --sumi-soft:  #b7ab92;
    --sumi-faint: #7d735f;
    --kindei:     #cfae63;
    --shu:        #cf5a4c;
    --mode-kougou: #a1937c;
    --mode-misogi: #6aa8c9;
    --mode-ukehi:  #cfae63;
    --mode-shi:    #a48cc4;
    --mode-chi:    #cc6a72;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  font-family: var(--mincho);
  color: var(--sumi);
  background: var(--kon);
  -webkit-text-size-adjust: 100%;
}

/* ── 表装：頂欄 ─────────────────────────────── */
.topbar {
  position: relative; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .9rem;
  padding: 0 1.1rem;
  background: linear-gradient(180deg, var(--ai-nezu), var(--kon) 70%, var(--kon-edge));
  border-bottom: 1px solid var(--kindei);
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
/* 裱綾的織紋 */
.topbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(45deg,  rgba(195,160,84,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(195,160,84,.045) 0 1px, transparent 1px 9px);
}

/* 題簽 —— 貼在卷首的標題紙 */
.brand {
  position: relative; margin: 0; flex: none;
  display: flex; align-items: baseline; gap: .6rem;
  padding: .3rem .85rem;
  background: var(--kozo-lit);
  border: 1px solid var(--kindei);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.brand-main {
  font-size: 1.18rem; font-weight: 700; letter-spacing: .16em;
  color: var(--kon); white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .brand-main { color: var(--kindei); } }
.brand-sub {
  font: 600 .7rem/1.6 var(--gothic); letter-spacing: var(--label-track);
  color: var(--sumi-faint); white-space: nowrap;
}

.version-switch { display: flex; flex: none; border: 1px solid var(--kindei); }
.ver {
  font: 600 .86rem/1.5 var(--gothic); letter-spacing: .22em;
  padding: .5rem 1.05rem .5rem calc(1.05rem + .22em);
  border: 0; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--kindei-lit);
}
.ver + .ver { border-left: 1px solid rgba(195,160,84,.5); }
.ver.is-on { background: var(--kindei); color: var(--kon); }
.ver:hover:not(.is-on) { background: rgba(195,160,84,.18); }
.ver:focus-visible { outline: 2px solid var(--kozo-lit); outline-offset: 1px; }

/* 檢視切換：與版本切換同一套外觀，但用朱色標示當前檢視，避免兩組控制混淆 */
.view-switch { display: none; border: 1px solid var(--kindei); }
.vw {
  font: 600 .8rem/1.5 var(--gothic); letter-spacing: .16em;
  padding: .42rem .7rem .42rem calc(.7rem + .16em);
  border: 0; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--kindei-lit);
}
.vw + .vw { border-left: 1px solid rgba(195,160,84,.5); }
.vw.is-on { background: var(--shu); color: var(--kozo-lit); }
.vw:hover:not(.is-on) { background: rgba(195,160,84,.18); }
.vw:focus-visible { outline: 2px solid var(--kozo-lit); outline-offset: 1px; }

.search { position: relative; margin-left: auto; flex: 0 1 17rem; min-width: 8rem; }
#search-input {
  width: 100%; font-family: var(--mincho); font-size: .95rem;
  padding: .46rem .8rem; color: var(--kozo-lit);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(195,160,84,.55);
}
#search-input::placeholder { color: rgba(233,223,199,.42); }
#search-input:focus { outline: none; border-color: var(--kindei); background: rgba(0,0,0,.4); }

.search-results {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0;
  margin: 0; padding: .2rem; list-style: none; z-index: 40;
  max-height: 62vh; overflow-y: auto;
  background: var(--kozo-lit);
  border: 1px solid var(--kindei);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.search-results li { padding: .38rem .55rem; cursor: pointer; display: flex; align-items: baseline; gap: .45rem; }
.search-results li:hover, .search-results li.is-active { background: rgba(195,160,84,.22); }
.search-results .r-name { font-size: .9rem; color: var(--sumi); }
.search-results .r-meta { font: var(--label); letter-spacing: .1em; color: var(--sumi-faint); }
.search-results .r-none { color: var(--sumi-faint); cursor: default; font-size: .82rem; }
@media (prefers-color-scheme: dark) {
  .search-results .r-name { color: var(--kozo); }
}

.icon-btn {
  flex: none; width: 2.05rem; height: 2.05rem; cursor: pointer;
  font-family: var(--gothic); font-size: .95rem; color: var(--kindei-lit);
  background: transparent; border: 1px solid rgba(195,160,84,.55);
}
.icon-btn:hover { background: rgba(195,160,84,.2); }

/* 一覽頁入口。爬蟲需要一條從首頁走到靜態神祇頁的路，讀者也用得上清單。 */
.text-btn {
  flex: none; padding: .42rem .7rem; text-decoration: none; white-space: nowrap;
  font: 600 .8rem/1.5 var(--gothic); letter-spacing: .16em;
  color: var(--kindei-lit); border: 1px solid rgba(195,160,84,.55);
}
.text-btn:hover { background: rgba(195,160,84,.2); }

/* ── 本紙：畫布 ─────────────────────────────── */
.stage { position: relative; z-index: 1; height: calc(100% - var(--topbar-h)); padding: .5rem; }
.graph-wrap {
  position: absolute; inset: .5rem; overflow: hidden;
  background: var(--kozo);
  border: 1px solid var(--kon-edge);
  box-shadow: inset 0 0 0 1px rgba(195,160,84,.35), 0 0 18px rgba(0,0,0,.35);

  /* 拖曳繪卷時，起點若落在節點標籤上，瀏覽器會當成選字而把標籤反白。
     選取起於此處，故在此關閉；user-select 會繼承，畫布內一律不可選。
     詳情面板是 .stage 的兄弟節點，不受影響，引文照樣可以複製。 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;   /* 行動裝置長按不跳出選取選單 */
}
#graph { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#graph.is-panning { cursor: grabbing; }

/* 節點 —— 高對比優先 */
.node { cursor: pointer; }
.node rect {
  fill: var(--kozo-lit);
  stroke: var(--sumi-soft); stroke-width: 1;
  transition: stroke .12s, stroke-width .12s;
}
.node .n-name {
  font-family: var(--mincho); font-size: 13px; letter-spacing: .04em;
  fill: var(--sumi); text-anchor: middle; dominant-baseline: middle;
}
.node .n-kana {
  font-family: var(--gothic); font-size: 8px; letter-spacing: .06em;
  fill: var(--sumi-faint); text-anchor: middle; dominant-baseline: middle;
}
.node:hover rect { stroke: var(--kindei); stroke-width: 2; }
.node:focus-visible { outline: none; }
.node:focus-visible rect { stroke: var(--shu); stroke-width: 2; }
.node.is-selected rect { fill: var(--kozo-lit); stroke: var(--shu); stroke-width: 2.5; }
.node.is-selected .n-name { font-weight: 700; }
.node.is-dim { opacity: .3; }
.node.is-isolated rect { stroke-dasharray: 3 2.5; }

/* 邊 */
.edge { fill: none; }
.edge-parent { stroke-width: 1.35; }
.edge-parent.m-交合   { stroke: var(--mode-kougou); }
.edge-parent.m-禊祓   { stroke: var(--mode-misogi); }
.edge-parent.m-誓約   { stroke: var(--mode-ukehi); stroke-width: 1.8; }
.edge-parent.m-屍化生 { stroke: var(--mode-shi); stroke-dasharray: 7 3; }
.edge-parent.m-血化生 { stroke: var(--mode-chi); stroke-dasharray: 7 3; }
.edge-parent.m-未詳   { stroke: var(--sumi-faint); stroke-dasharray: 2 3; }
.edge-spouse { stroke: var(--shu); stroke-width: 1.2; opacity: .8; }
.edge-spouse.is-crossgen { stroke-dasharray: 6 3; opacity: .65; }
.edge-succession { stroke: var(--sumi-faint); stroke-width: 1.2; stroke-dasharray: 1.5 3.5; }
.edge.is-dim { opacity: .09; }
.edge.is-lit { stroke-width: 2.6; opacity: 1; }

/* 勾玉 —— 家族結點。誓約段落裡，勾玉正是生出五男神的那個物件 */
.magatama { fill: var(--sumi-soft); }
.magatama.is-dim { opacity: .18; }

/* すやり霞 —— 繪卷處理「非場景之地」的雲霞；分界那一道另加重 */
.gasumi { fill: var(--kindei); opacity: .105; }
.gasumi-edge { fill: none; stroke: var(--kindei); stroke-width: .9; opacity: .5; }
/* 世代刻度：只出現在整代同層之處 */
.gen-mark {
  font-family: var(--gothic); font-size: 11px; font-weight: 700;
  fill: var(--kindei); text-anchor: end; dominant-baseline: middle;
  letter-spacing: .04em;
}
/* 詞書 —— 卷首的來源本文 */
.kotobagaki {
  font-family: var(--mincho); font-size: 13px;
  fill: var(--sumi-faint); text-anchor: middle; dominant-baseline: middle;
}
.kotobagaki-cite {
  font-family: var(--gothic); font-size: 8.5px; letter-spacing: .2em;
  fill: var(--sumi-faint); text-anchor: middle; dominant-baseline: middle; opacity: .8;
}

.zoom-controls { position: absolute; right: .7rem; bottom: .7rem; display: flex; flex-direction: column; }
.zoom-controls button {
  width: 2.25rem; height: 2.25rem; cursor: pointer;
  font-family: var(--gothic); font-size: .95rem; color: var(--kon);
  background: var(--kozo-lit); border: 1px solid var(--kon-edge);
}
.zoom-controls button + button { border-top: 0; }
.zoom-controls button:hover { background: var(--kindei); }
@media (prefers-color-scheme: dark) { .zoom-controls button { color: var(--kozo); } }

.legend {
  position: absolute; left: .7rem; bottom: .7rem;
  padding: .7rem .95rem;
  background: var(--kozo-lit);
  border: 1px solid var(--kon-edge);
  box-shadow: inset 0 0 0 1px rgba(195,160,84,.3);
  pointer-events: none;
}
.legend b {
  display: block; margin-bottom: .5rem;
  font: var(--label); letter-spacing: var(--label-track); color: var(--sumi-soft);
}
.legend .lg-row {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--gothic); font-size: .82rem; color: var(--sumi-soft); line-height: 2;
}
.legend .lg-line { width: 1.8rem; height: 0; border-top-width: 2px; border-top-style: solid; flex: none; }

/* ── 詞書：詳情面板 ─────────────────────────── */
.panel {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: var(--panel-w);
  z-index: 30; overflow-y: auto;
  background: var(--kozo-lit);
  border-left: 5px solid var(--kon);
  box-shadow: -1px 0 0 var(--kindei), -10px 0 30px rgba(0,0,0,.35);
  animation: slide-in .18s ease-out;
}
@keyframes slide-in { from { transform: translateX(1.2rem); opacity: 0 } to { transform: none; opacity: 1 } }

.panel-close {
  position: absolute; top: .45rem; right: .55rem; z-index: 2;
  width: 1.7rem; height: 1.7rem; cursor: pointer;
  font-family: var(--gothic); font-size: 1rem; line-height: 1; color: var(--sumi-faint);
  background: transparent; border: 0;
}
.panel-close:hover { color: var(--shu); }
.panel-body { padding: 1.5rem 1.6rem 3rem; }

.k-name { margin: 0; font-size: 1.62rem; font-weight: 700; letter-spacing: .07em; line-height: 1.35; }
.k-reading {
  margin: .35rem 0 0; font-family: var(--gothic); font-size: .72rem;
  letter-spacing: .12em; color: var(--sumi-faint);
}
.k-othername {
  margin: .7rem 0 0; padding: .3rem .6rem; font-size: .78rem;
  color: var(--sumi-soft); border-left: 2px solid var(--kindei);
  background: rgba(195,160,84,.1);
}
.k-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .85rem 0 0; }
.k-tag {
  font: var(--label); letter-spacing: .14em; padding: .16rem .5rem;
  color: var(--sumi-soft); border: 1px solid var(--kozo-deep);
}
.k-tag.k-era { color: var(--kon); background: var(--kindei); border-color: var(--kindei); }
.k-tag.k-mode { color: var(--kozo-lit); background: var(--sumi-soft); border-color: var(--sumi-soft); }
@media (prefers-color-scheme: dark) { .k-tag.k-era { color: var(--kon-edge); } }

.k-summary { margin: 1.05rem 0 0; font-size: .89rem; line-height: 2; text-align: justify; }

.k-sec { margin: 1.5rem 0 0; }
.k-sec > h3 {
  margin: 0 0 .55rem; padding-bottom: .28rem;
  font: var(--label); letter-spacing: var(--label-track); color: var(--sumi-soft);
  border-bottom: 1px solid var(--kozo-deep);
}
.k-rel { margin: 0; font-size: .85rem; line-height: 1.95; }
.k-rel dt { margin-top: .55rem; font: var(--label); letter-spacing: .2em; color: var(--sumi-faint); }
.k-rel dd { margin: .12rem 0 0; }
.k-link {
  cursor: pointer; color: var(--kon); font: inherit; padding: 0;
  background: none; border: 0; border-bottom: 1px solid rgba(20,32,58,.3);
}
.k-link:hover { color: var(--shu); border-bottom-color: currentColor; }
@media (prefers-color-scheme: dark) {
  .k-link { color: var(--kindei); border-bottom-color: rgba(207,174,99,.35); }
}
.k-rel .rel-mode { font-family: var(--gothic); font-size: .66rem; color: var(--sumi-faint); margin-left: .25rem; }

/* 引文置於料紙上 —— 本紙嵌在表装裡的關係 */
.k-quote {
  margin: 0 0 .65rem; padding: .65rem .85rem;
  font-size: .85rem; line-height: 2.05; text-align: justify;
  background: var(--kozo); border-left: 2px solid var(--kindei);
}
.k-quote cite {
  display: block; margin-top: .4rem; font-style: normal;
  font: var(--label); letter-spacing: .16em; color: var(--sumi-faint);
}
.k-quote.is-variant { border-left-color: var(--mode-shi); }
.k-quote.is-note { background: transparent; border-left-style: dotted; }

.k-list { margin: 0; padding-left: 1.05rem; font-size: .84rem; line-height: 1.95; }
.k-empty { font-size: .8rem; color: var(--sumi-faint); }
.k-absent {
  margin: .7rem 0 0; padding: .55rem .8rem; font-size: .79rem; line-height: 1.8;
  color: var(--sumi-soft); border-left: 2px solid var(--shu);
  background: rgba(178,58,46,.09);
}

/* ── 手機聚焦模式 ───────────────────────────── */
.focus-view { position: absolute; inset: .5rem; overflow-y: auto; padding: 1rem .9rem 4rem;
  background: var(--kozo); border: 1px solid var(--kon-edge); }
.f-group { margin: 0 0 1.15rem; }
.f-group > h2 { margin: 0 0 .5rem; font: var(--label); letter-spacing: var(--label-track); color: var(--sumi-soft); }
.f-cards { display: flex; flex-wrap: wrap; gap: .4rem; }
.f-card {
  font-family: var(--mincho); text-align: left; cursor: pointer;
  padding: .45rem .7rem; min-width: 6.5rem;
  background: var(--kozo-lit); color: var(--sumi);
  border: 1px solid var(--sumi-faint);
}
.f-card:hover, .f-card:focus-visible { border-color: var(--kindei); outline: none; }
.f-card .fc-name { display: block; font-size: .93rem; line-height: 1.4; }
.f-card .fc-kana { display: block; font-family: var(--gothic); font-size: .6rem; color: var(--sumi-faint); margin-top: .1rem; }
.f-card .fc-mode { display: block; font-family: var(--gothic); font-size: .6rem; color: var(--kindei); margin-top: .12rem; }

.f-center {
  margin: .2rem 0 1.25rem; padding: 1rem 1.05rem;
  background: var(--kozo-lit);
  border: 1px solid var(--kon); border-left-width: 4px;
}
.f-center > span { display: block; }
.f-center .fc-name { font-size: 1.4rem; font-weight: 700; letter-spacing: .06em; line-height: 1.35; }
.f-center .fc-kana { font-family: var(--gothic); font-size: .7rem; letter-spacing: .1em; color: var(--sumi-faint); margin-top: .28rem; }
.f-center .fc-mode { font: var(--label); letter-spacing: .18em; color: var(--kindei); margin-top: .4rem; }
.f-center .fc-summary { margin: .65rem 0 0; font-size: .82rem; line-height: 1.9; color: var(--sumi-soft); text-align: justify; }
.f-center .fc-more {
  margin-top: .8rem; font: var(--label); letter-spacing: .2em; cursor: pointer;
  padding: .4rem .9rem; color: var(--kon);
  background: var(--kindei); border: 0;
}
.f-empty { font-family: var(--gothic); font-size: .74rem; color: var(--sumi-faint); }

/* ── 說明 ───────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(6,10,21,.66);
}
.modal-box {
  position: relative; max-width: 33rem; max-height: 86vh; overflow-y: auto;
  padding: 1.7rem 1.9rem;
  background: var(--kozo-lit);
  border: 1px solid var(--kindei); border-left: 5px solid var(--kon);
  box-shadow: 0 14px 44px rgba(0,0,0,.5);
}
.modal-box h2 { margin: 0 0 .9rem; font-size: 1.2rem; font-weight: 700; letter-spacing: .12em; }
.modal-box h3 { margin: 1.35rem 0 .45rem; font: var(--label); letter-spacing: var(--label-track); color: var(--sumi-soft); }
.modal-box p { margin: 0; font-size: .85rem; line-height: 2; text-align: justify; }
.legend-list { margin: 0; padding: 0; list-style: none; font-size: .85rem; line-height: 2.15; }
.legend-list .swatch { display: inline-block; width: 1.7rem; margin-right: .55rem; vertical-align: middle; border-top-width: 2px; border-top-style: solid; }
.swatch.line-parent { border-color: var(--mode-kougou); }
.swatch.line-spouse { border-color: var(--shu); }
.swatch.line-succession { border-color: var(--sumi-faint); border-top-style: dotted; border-top-width: 3px; }

/* ── 靜態神祇頁（tools/build-pages.js 產生）───── */
body.is-page { height: auto; overflow-y: auto; }
body.is-page .topbar { height: auto; padding: .55rem 1.1rem; }
.brand-link { text-decoration: none; display: flex; align-items: baseline; gap: .6rem; }

.p-wrap { max-width: 46rem; margin: 0 auto; padding: 1.6rem 1rem 3rem; }
.p-crumb {
  margin: 0 0 1rem; font: var(--label); letter-spacing: .18em; color: var(--kindei-lit);
}
.p-crumb a { color: var(--kindei-lit); }

.p-card {
  padding: 2rem 2.2rem 2.4rem;
  background: var(--kozo-lit);
  border: 1px solid var(--kindei); border-left: 5px solid var(--kon);
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.p-name { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: .07em; line-height: 1.35; }
.p-reading {
  margin: .4rem 0 0; font-family: var(--gothic); font-size: .78rem;
  letter-spacing: .12em; color: var(--sumi-faint);
}
.p-alt {
  margin: .8rem 0 0; padding: .35rem .7rem; font-size: .82rem;
  color: var(--sumi-soft); background: rgba(195,160,84,.12); border-left: 2px solid var(--kindei);
}
.p-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0 0; }
.p-tag {
  font: var(--label); letter-spacing: .12em; padding: .16rem .5rem;
  color: var(--sumi-soft); border: 1px solid var(--kozo-deep);
}
.p-tag.p-era { color: var(--kon); background: var(--kindei); border-color: var(--kindei); }
.p-tag.p-mode-tag { color: var(--kozo-lit); background: var(--sumi-soft); border-color: var(--sumi-soft); }
@media (prefers-color-scheme: dark) { .p-tag.p-era { color: var(--kon-edge); } }

.p-summary { margin: 1.2rem 0 0; font-size: .95rem; line-height: 2.05; text-align: justify; }
.p-summary a { color: var(--kon); }
@media (prefers-color-scheme: dark) { .p-summary a { color: var(--kindei); } }

.p-sec { margin: 1.9rem 0 0; }
.p-sec > h3 {
  margin: 0 0 .6rem; padding-bottom: .3rem;
  font: var(--label); letter-spacing: var(--label-track); color: var(--sumi-soft);
  border-bottom: 1px solid var(--kozo-deep);
}
.p-rel { margin: 0; font-size: .92rem; line-height: 2.05; }
.p-rel dt { margin-top: .7rem; font: var(--label); letter-spacing: .2em; color: var(--sumi-faint); }
.p-rel dd { margin: .15rem 0 0; }
.p-rel a, .p-list a { color: var(--kon); text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { .p-rel a, .p-list a, .p-crumb a { color: var(--kindei); } }
.p-src, .p-mode {
  font-family: var(--gothic); font-size: .68rem; color: var(--sumi-faint); margin-left: .35rem;
}
.p-empty { margin: 0; font-size: .86rem; color: var(--sumi-faint); }

.p-quote {
  margin: 0 0 .7rem; padding: .7rem .9rem;
  font-size: .9rem; line-height: 2.1; text-align: justify;
  background: var(--kozo); border-left: 2px solid var(--kindei);
}
.p-quote.is-variant { border-left-color: var(--mode-shi); }
.p-quote cite {
  display: block; margin-top: .4rem; font-style: normal;
  font: var(--label); letter-spacing: .16em; color: var(--sumi-faint);
}
.p-list { margin: 0; padding-left: 1.1rem; font-size: .9rem; line-height: 2; }

.p-graph { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--kozo-deep); }
.p-graph a { font: var(--label); letter-spacing: .16em; color: var(--kon); text-decoration: none; }
.p-graph a:hover { color: var(--shu); }
@media (prefers-color-scheme: dark) { .p-graph a { color: var(--kindei); } }

.i-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem; }
.i-grid a {
  display: block; padding: .5rem .7rem; text-decoration: none;
  background: var(--kozo); border: 1px solid var(--kozo-deep);
}
.i-grid a:hover { border-color: var(--kindei); }
.i-name { display: block; font-size: .95rem; color: var(--sumi); }
.i-kana { display: block; font-family: var(--gothic); font-size: .64rem; color: var(--sumi-faint); margin-top: .1rem; }

.p-foot {
  max-width: 46rem; margin: 0 auto; padding: 0 1rem 2.5rem;
  font-family: var(--gothic); font-size: .7rem; line-height: 1.9; color: var(--kindei-lit); opacity: .75;
}

@media (max-width: 640px) {
  .p-card { padding: 1.4rem 1.2rem 1.8rem; }
  .p-name { font-size: 1.55rem; }
}

/* ── 404 ────────────────────────────────────── */
.notfound {
  min-height: calc(100vh - var(--topbar-h));
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.nf-card {
  max-width: 30rem; padding: 2.2rem 2.4rem;
  background: var(--kozo-lit);
  border: 1px solid var(--kindei); border-left: 5px solid var(--kon);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.nf-code { margin: 0; font: var(--label); letter-spacing: .4em; color: var(--kindei); }
.nf-title { margin: .5rem 0 0; font-size: 1.6rem; font-weight: 700; letter-spacing: .1em; }
.nf-body { margin: 1rem 0 0; font-size: .9rem; line-height: 2; text-align: justify; }
.nf-quote {
  margin: 1.5rem 0 0; padding: .7rem .9rem;
  font-size: .86rem; line-height: 2.05;
  background: var(--kozo); border-left: 2px solid var(--kindei);
}
.nf-quote cite {
  display: block; margin-top: .4rem; font-style: normal;
  font: var(--label); letter-spacing: .16em; color: var(--sumi-faint);
}
.nf-back {
  display: inline-block; margin-top: 1.6rem; padding: .5rem 1.2rem;
  font: var(--label); letter-spacing: .2em; text-decoration: none;
  color: var(--kon); background: var(--kindei);
}
.nf-back:hover { background: var(--kindei-lit); }
.nf-links { display: flex; gap: .6rem; margin: 0; }
.nf-back.is-alt { color: var(--kindei); background: transparent; border: 1px solid var(--kindei); }
.nf-back.is-alt:hover { background: rgba(195,160,84,.16); }
@media (prefers-color-scheme: dark) { .nf-back { color: var(--kon-edge); } }

.loading {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  font: var(--label); letter-spacing: .5em; color: var(--kindei);
  background: var(--kon);
}
.loading.is-error {
  color: var(--kozo); letter-spacing: .04em; text-align: center;
  padding: 2rem; line-height: 2.1; font-size: .82rem; white-space: pre-line;
}

/* ── 響應式 ─────────────────────────────────── */
@media (max-width: 900px) {
  :root { --topbar-h: auto; }
  .topbar { flex-wrap: wrap; padding: .5rem .7rem; gap: .45rem .6rem; }
  /* 題簽與檢視切換共用第一列：題簽靠左，切換靠右 */
  .brand { flex: 1 1 auto; justify-content: flex-start; }
  .view-switch { display: flex; order: 1; flex: none; }
  /* flex-basis 若留 auto，輸入框會以內容寬度起算而把說明鈕擠到第三列，
     白白吃掉畫布高度。給定可收縮的基準寬度。 */
  .search { margin-left: 0; flex: 1 1 6rem; min-width: 5rem; order: 3; }
  .version-switch { order: 2; }
  .icon-btn { order: 4; }

  .stage { height: auto; min-height: 60vh; position: static; padding: .4rem; }
  .focus-view { position: static; }

  /* 全圖模式：以 flex 讓畫布吃滿剩餘高度。--topbar-h 在窄螢幕是 auto，
     算不出固定值，交給 flex 處理最穩。 */
  body[data-mobile-view="graph"] {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; overflow: hidden;
  }
  body[data-mobile-view="graph"] .topbar { flex: none; }
  body[data-mobile-view="graph"] .stage { flex: 1 1 auto; min-height: 0; position: relative; }
  body[data-mobile-view="graph"] .graph-wrap { position: absolute; inset: .4rem; }
  /* 觸控螢幕沒有 hover，縮放鈕與圖例得再大一點、也別擋住畫面 */
  body[data-mobile-view="graph"] .zoom-controls button { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
  body[data-mobile-view="graph"] .legend { font-size: .9em; padding: .5rem .65rem; max-width: 8.5rem; }

  .panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 84vh;
  }
  /* 全圖模式下抽屜矮一些，讓上方還看得到族譜的脈絡 */
  body[data-mobile-view="graph"] .panel { max-height: 62vh;
    border-left: 0; border-top: 5px solid var(--kon);
    box-shadow: 0 -1px 0 var(--kindei), 0 -8px 30px rgba(0,0,0,.4);
    animation: sheet-up .2s ease-out;
  }
  @keyframes sheet-up { from { transform: translateY(1.6rem); opacity: 0 } to { transform: none; opacity: 1 } }
  .panel-body { padding: 1.5rem 1.1rem 3rem; }
}

@media (min-width: 901px) {
  .focus-view { display: none !important; }
  .view-switch { display: none; }   /* 寬螢幕直接用全圖，不需切換 */
}

@media (prefers-reduced-motion: reduce) {
  .panel, .modal-box { animation: none; }
  * { transition: none !important; }
}