/* ─────────────────────────────────────────────
   coten-map v2  トップ画面（地図 × 年号ダイヤル）
   参照：歴史図説の地図／トランジスタラジオのダイヤル面
   書体：BIZ UDPゴシック（和文）＋ Barlow Condensed（年号・目盛りのみ）
   配色：sepia（既定）／cobalt／cyber。末尾の [data-palette] で役割ごとに差し替える
   ───────────────────────────────────────────── */
:root{
  --sea:#D8E2E5;
  --sea-line:#C4D1D6;
  --land:#EFE8D8;
  --land-line:#B5AA93;
  --land-hit:#E6D6A6;
  --land-hit-line:#8E7B4B;
  --paper:#F8F4EB;
  --paper-2:#EFE9DC;
  --ink:#1E1B17;
  --ink-2:#615A4F;
  --ink-3:#958C7C;
  --rule:#CFC6B4;
  --needle:#C2321C;
  --tick:#2A2622;
  --tick-minor:#8F877A;
  --pin-off:#A79C86;

  --era-ancient:#C29B3F;
  --era-medieval:#7E8A4E;
  --era-early:#3E5E86;
  --era-modern:#A8452B;
  --era-contemporary:#6B6660;

  --font-jp:"BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;
  --font-num:"Barlow Condensed","BIZ UDPGothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{text-spacing-trim:trim-start;height:100%}
body{
  font-family:var(--font-jp);
  color:var(--ink);
  background:var(--paper);
  letter-spacing:.03em;
  line-height:1.7;
  line-break:strict;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  height:100%;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--needle);outline-offset:2px}
.num{font-family:var(--font-num);font-feature-settings:"tnum" 1}

/* ── 全体の骨格：地図（上）／ダイヤル盤（下） ── */
/* スマホ：地図は残りの高さを使い、最低でも 300px か画面の 45% の小さいほうを確保する。
   年号とダイヤルは地図のすぐ下に出し、「この年に重なる回」が長いときはページをスクロールして読む。
   地図と盤面は重ねない（年号が隠れないように） */
.app{
  min-height:100%;
  min-height:100dvh;
  display:grid;
  grid-template-rows:minmax(min(300px,45dvh),1fr) auto;
  max-width:100%;
}
@media (min-width:900px){
  .app{
    grid-template-columns:minmax(0,1.35fr) 440px;
    grid-template-rows:1fr;
    height:100vh;
    min-height:0;
  }
}

/* ── 地図 ── */
.map{
  position:relative;
  background:var(--sea);
  overflow:hidden;
  min-height:0;
}
.map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map .sphere{fill:var(--sea)}
.map .grat{fill:none;stroke:var(--sea-line);stroke-width:.6}
.map .grat.fine{opacity:0;transition:opacity .3s}
.map.z3 .grat.fine{opacity:1}
.map .borders{fill:none;stroke:var(--land-line);stroke-width:.5;opacity:0;transition:opacity .3s;stroke-linejoin:round}
.map.z2 .borders{opacity:.8}
.map .land{fill:var(--land);stroke:var(--land-line);stroke-width:.7;stroke-linejoin:round}
.map .country{fill:var(--land-hit);stroke:var(--land-hit-line);stroke-width:.9;opacity:0;transition:opacity .35s}
.map .country.on{opacity:1}
.pin{cursor:pointer}
.pin circle{fill:var(--pin-off);stroke:var(--paper);stroke-width:1.2;transition:fill .3s,r .3s}
.pin text{
  font-family:var(--font-jp);font-size:11.5px;font-weight:700;
  fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;
  opacity:0;transition:opacity .3s;letter-spacing:.02em;
}
.pin.on circle{fill:var(--needle)}
.pin.on text{opacity:1}
/* 点の濃さは年からの近さで index.html が style.opacity に入れる */
.map.z3 .pin.off text{opacity:.9}
.pin text .pl{font-weight:400;font-size:9.5px;fill:var(--ink-2);opacity:0;transition:opacity .3s}
.map.z3 .pin text .pl{opacity:1}
.map{cursor:grab}
.map:active{cursor:grabbing}
.zoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--paper)}
.zoom button{width:34px;height:34px;font-size:18px;line-height:1;color:var(--ink);font-family:var(--font-num)}
.zoom button+button{border-top:1px solid var(--rule)}
.zoom button:disabled{color:var(--rule)}

.brand{
  position:absolute;left:14px;top:12px;
  display:flex;align-items:baseline;gap:10px;
  font-size:14px;font-weight:700;letter-spacing:.08em;
}
.brand small{
  font-weight:400;font-size:10.5px;letter-spacing:.06em;color:var(--ink-2);
  border:1px solid var(--rule);padding:0 5px;line-height:1.5;
}
/* 名前の下の一言（宣伝文句ではなく、何のサイトかの説明。小さく1行） */
.brand{flex-wrap:wrap;row-gap:2px;max-width:calc(100% - 70px)}
.brand .sub{flex-basis:100%;font-weight:400;font-size:11px;letter-spacing:.02em;color:var(--ink-2)}
.legend{
  position:absolute;right:12px;bottom:10px;
  font-size:10.5px;color:var(--ink-2);display:flex;gap:12px;align-items:center;
}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.legend .a i{background:var(--needle)}
.legend .b i{background:var(--pin-off)}

/* ── ダイヤル盤 ── */
.panel{
  position:relative;z-index:1;   /* 地図が盤面に重なって年号を隠さないように */
  background:var(--paper);
  border-top:1px solid var(--rule);
  display:flex;flex-direction:column;
}
@media (min-width:900px){
  .panel{border-top:0;border-left:1px solid var(--rule)}
}

.yearrow{
  display:flex;align-items:baseline;gap:10px;
  padding:10px 16px 0;
}
.year{
  font-family:var(--font-num);font-weight:600;font-size:76px;line-height:1;
  letter-spacing:-.01em;font-feature-settings:"tnum" 1;
  min-width:3.2ch;
}
.year .bc{font-size:.36em;font-weight:500;letter-spacing:.06em;margin-right:.15em;vertical-align:.1em}
.unit{font-size:15px;font-weight:700;color:var(--ink-2)}
.eraname{margin-left:auto;text-align:right;font-size:12px;color:var(--ink-2);line-height:1.5}
.eraname b{display:block;font-size:14px;color:var(--ink)}

/* 目盛り帯 */
.dial{position:relative;margin-top:2px;height:92px;user-select:none;-webkit-user-select:none}
.strip{
  position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;cursor:grab;touch-action:pan-x;
}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing}
.strip svg{display:block;height:92px}
.tick{stroke:var(--tick);stroke-width:1}
.tick.minor{stroke:var(--tick-minor);stroke-width:.8}
.tick.major{stroke-width:1.2}
.lbl{font-family:var(--font-num);font-weight:500;font-size:13px;fill:var(--ink-2);text-anchor:middle;font-feature-settings:"tnum" 1}
.eraband{opacity:.85}
.window{fill:var(--needle);opacity:.10}
/* 針（固定） */
.needle{
  position:absolute;left:50%;top:0;bottom:0;width:0;pointer-events:none;
}
.needle::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--needle);
}
.needle::after{
  content:"";position:absolute;left:-6px;top:-1px;
  border:6px solid transparent;border-top:8px solid var(--needle);border-bottom:0;
}
/* 盤面の端を紙色でぼかす（つまみの窓） */
.dial::before,.dial::after{
  content:"";position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:1;
}
.dial::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.dial::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}

/* 時代の帯（押すと移動） */
.eras{
  display:flex;margin:4px 16px 0;border-top:1px solid var(--rule);
}
.eras button{
  flex:1;padding:8px 0 6px;font-size:12px;color:var(--ink-2);position:relative;
  border-bottom:3px solid transparent;
}
.eras button i{
  position:absolute;left:0;right:0;top:-1px;height:3px;display:block;
}
.eras button[data-era=ancient] i{background:var(--era-ancient)}
.eras button[data-era=medieval] i{background:var(--era-medieval)}
.eras button[data-era=early] i{background:var(--era-early)}
.eras button[data-era=modern] i{background:var(--era-modern)}
.eras button[data-era=contemporary] i{background:var(--era-contemporary)}
.eras button.on{color:var(--ink);font-weight:700}

/* ── この年の回 ── */
.hits{
  padding:8px 16px 4px;
  min-height:120px;
}
.hits h2{
  font-size:12px;font-weight:400;color:var(--ink-2);
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:4px;
}
.hits h2 a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.hits ol{list-style:none}
.hits li{
  display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--rule);
}
.hits li:first-child{border-top-color:var(--ink)}
.hits .name{font-weight:700;font-size:15px;line-height:1.4}
.hits .place{font-size:12px;color:var(--ink-2);margin-left:.6em;font-weight:400}
.hits .span{font-size:14px;color:var(--ink-2);white-space:nowrap}
.hits .span b{color:var(--ink);font-weight:500}
.hits .empty{padding:14px 0;color:var(--ink-2);font-size:13px;border-top:1px solid var(--ink)}
.hits .empty button{color:var(--needle);border-bottom:1px solid currentColor;margin-left:.4em}

/* ── 下部ナビ：どの画面でも画面の一番下に固定する ── */
:root{--tabs-h:41px}
.tabs{
  display:flex;border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--paper);
  position:fixed;left:0;right:0;bottom:0;z-index:15;
}
/* 固定したメニューの下に内容が隠れないよう、その高さぶん余白を取る */
.page{padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom))}
@media (max-width:899px){
  .panel{padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom))}
}
/* PC のトップは盤面の中の一番下に置く（地図の上に全幅で重ねない） */
@media (min-width:900px){
  .panel .tabs{position:static}
}
/* 設定ボタン（配色）：メニューの右端の小さなつまみ */
.tabs .set{
  flex:none;width:44px;display:flex;align-items:center;justify-content:center;
  border-left:1px solid var(--rule);color:var(--ink-3);
}
.tabs .set svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.tabs .set.on,.tabs .set:hover{color:var(--ink)}
.tabs .set.float{position:fixed;right:8px;bottom:8px;background:var(--paper);border:1px solid var(--rule);height:40px}
.tabs a{
  flex:1;text-align:center;padding:10px 0 9px;font-size:12px;color:var(--ink-2);
  text-decoration:none;position:relative;letter-spacing:.08em;
}
.tabs a.on{color:var(--ink);font-weight:700}
.tabs a.on::before{
  content:"";position:absolute;left:50%;top:-1px;margin-left:-5px;
  border:5px solid transparent;border-top:6px solid var(--needle);border-bottom:0;
}
@media (min-width:900px){
  .hits{flex:1;overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ═══════════ 一覧・詳細 共通 ═══════════ */
.page{
  min-height:100%;display:flex;flex-direction:column;background:var(--paper);
}
.page .body{flex:1;width:100%;max-width:640px;margin:0 auto;padding:0 16px 24px}
.bar{
  display:flex;align-items:center;gap:12px;height:44px;
  border-bottom:1px solid var(--rule);padding:0 16px;
  max-width:640px;margin:0 auto;width:100%;
}
.bar .back{color:var(--ink-2);text-decoration:none;font-size:13px;white-space:nowrap}
.bar .back::before{content:"←";margin-right:.4em}
.bar h1{font-size:14px;font-weight:700;letter-spacing:.08em}
.bar .tag{margin-left:auto;font-size:10.5px;color:var(--ink-2);border:1px solid var(--rule);padding:0 5px;line-height:1.5}
.bar .count{margin-left:auto;font-size:14px;color:var(--ink-2)}
.bar .count b{font-weight:500;color:var(--ink);font-size:18px;margin-right:.1em}

/* 絞り込み：チップではなく、罫線の上の文字列 */
.filters{padding:10px 0 2px}
.frow{display:flex;gap:2px 14px;flex-wrap:wrap;align-items:baseline;padding:4px 0;font-size:13px}
.frow .k{color:var(--ink-3);font-size:11px;min-width:2.5em;letter-spacing:.1em}
.frow a{color:var(--ink-2);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.frow a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.frow a.on[data-era=ancient]{border-bottom-color:var(--era-ancient)}
.frow a.on[data-era=medieval]{border-bottom-color:var(--era-medieval)}
.frow a.on[data-era=early]{border-bottom-color:var(--era-early)}
.frow a.on[data-era=modern]{border-bottom-color:var(--era-modern)}
.frow a.on[data-era=contemporary]{border-bottom-color:var(--era-contemporary)}
.view{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0 6px;font-size:13px}
.view .sw a{color:var(--ink-2);text-decoration:none;padding:0 .2em}
.view .sw a.on{color:var(--ink);font-weight:700}
.view .sw i{color:var(--rule);font-style:normal;margin:0 .3em}

/* 行 */
.rows{list-style:none}
.rows li{border-top:1px solid var(--rule)}
.rows li:first-child{border-top:1px solid var(--ink)}
.rows a{display:grid;grid-template-columns:72px 1fr auto;column-gap:12px;align-items:baseline;padding:9px 0;color:inherit;text-decoration:none}
.rows .yr{font-family:var(--font-num);font-weight:500;font-size:20px;white-space:nowrap;color:var(--ink);font-feature-settings:"tnum" 1;border-left:3px solid var(--rule);padding-left:8px;line-height:1.2}
.rows .yr[data-era=ancient]{border-color:var(--era-ancient)}
.rows .yr[data-era=medieval]{border-color:var(--era-medieval)}
.rows .yr[data-era=early]{border-color:var(--era-early)}
.rows .yr[data-era=modern]{border-color:var(--era-modern)}
.rows .yr[data-era=contemporary]{border-color:var(--era-contemporary)}
.rows .t{font-weight:700;font-size:15px;line-height:1.45}
.rows .s{display:block;font-weight:400;font-size:12px;color:var(--ink-2);margin-top:1px}
.rows .m{font-size:13px;color:var(--ink-2);white-space:nowrap}
.rows .m .num{font-size:14px;color:var(--ink)}
.rows li.heard .t::after{content:"聴いた";font-size:10.5px;font-weight:400;color:var(--ink-2);border:1px solid var(--rule);padding:0 4px;margin-left:8px;vertical-align:.15em}
.sec{margin-top:26px;font-size:12px;color:var(--ink-2);padding-bottom:4px;display:flex;justify-content:space-between;align-items:baseline}
.sec a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.none{padding:18px 0;border-top:1px solid var(--ink);color:var(--ink-2);font-size:13px}
.none a{color:var(--needle);text-decoration:none;border-bottom:1px solid currentColor}

/* 詳細 */
.ep-head{padding:18px 0 8px}
.ep-head .yr{font-family:var(--font-num);font-weight:600;font-size:56px;line-height:1;font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.ep-head .yr .bc{font-size:.4em;font-weight:500;letter-spacing:.06em;margin-right:.15em}
.ep-head .ctx{font-size:13px;color:var(--ink-2);margin-top:2px}
.ep-head h1{font-size:26px;font-weight:700;line-height:1.35;margin-top:12px;font-feature-settings:"palt" 1;letter-spacing:.02em;word-break:auto-phrase;text-wrap:balance}
.ep-head .meta{font-size:13px;color:var(--ink-2);margin-top:6px}
.ep-head .meta .num{font-size:14px}
.heard-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;
  border:1.5px solid var(--ink);font-size:15px;font-weight:700;letter-spacing:.1em;margin:14px 0 6px;
  transition:background .15s,color .15s;
}
.heard-btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.heard-btn[aria-pressed=true]::before{content:"✓";font-weight:400}
.ep h2{font-size:12px;font-weight:400;color:var(--ink-2);margin-top:26px;padding-bottom:4px;border-bottom:1px solid var(--ink)}
.points{list-style:none}
.points li{padding:9px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.6}
.points li:first-child{border-top:0}
.links-official{list-style:none}
.links-official li{border-top:1px solid var(--rule)}
.links-official li:first-child{border-top:0}
.links-official a{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;color:inherit;text-decoration:none;font-size:15px}
.links-official small{font-size:12px;color:var(--ink-2)}
.links-official .ext{color:var(--ink-3);font-size:12px}
.tags{display:flex;flex-wrap:wrap;gap:4px 0;padding-top:8px;font-size:13px}
.tags a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.tags i{font-style:normal;color:var(--ink-3);margin:0 .5em}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;border-top:1px solid var(--ink);padding-top:10px;font-size:13px}
.prevnext a{color:inherit;text-decoration:none;display:block}
.prevnext small{display:block;color:var(--ink-2);font-size:11px}
.prevnext b{font-size:14px}
.prevnext .n{text-align:right}
.prevnext .dis{color:var(--ink-3)}
.foot{margin-top:32px;font-size:11.5px;color:var(--ink-2);line-height:1.8}
.foot a{color:var(--ink-2)}

.rows .yr .bc,.yr .bc{font-size:.6em;font-weight:500;margin-right:.1em}

/* ═══════════ つながり ═══════════ */
.arc-wrap{position:relative;padding-left:44px}
.arc-wrap svg.arcs{position:absolute;left:0;top:0;width:44px;height:100%;overflow:visible;pointer-events:none}
.arcs path{fill:none;stroke:var(--ink-3);stroke-width:1.2;opacity:.45;transition:opacity .2s,stroke .2s}
.arcs path.on{stroke:var(--ink);stroke-width:1.6;opacity:1}
.arcs path.dim{opacity:.12}
.arcs circle{fill:var(--paper);stroke:var(--ink-3);stroke-width:1.2}
.arcs circle.on{fill:var(--ink);stroke:var(--ink)}
.arc-wrap .rows li.dim{opacity:.35}
/* 選んだシリーズのすぐ下に出す、つながりの説明 */
.arc-wrap .rows li.why-row{border-top:0;padding:2px 0 12px 84px;background:var(--paper-2);margin-left:-4px;padding-right:8px}
.arc-wrap .rows li.why-row .why-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-2);padding:8px 0 2px}
.arc-wrap .rows li.why-row .why-head a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.arc-wrap .rows li.why-row .why{margin-top:0}
/* 一覧の行（.rows a の3列の並び）を説明の中のリンクには使わない */
.arc-wrap .rows li.why-row a{display:inline;padding:0;grid-template-columns:none}
.arc-wrap .rows li.why-row .why li{border-top:1px solid var(--rule)}
.arc-wrap .rows li.why-row .why li:first-child{border-top:0}
@media (max-width:420px){ .arc-wrap .rows li.why-row{padding-left:12px} }
.arc-wrap .rows li.focus .yr{border-left-color:var(--ink);border-left-width:5px;padding-left:6px}
.why{list-style:none;margin-top:6px}
.why li{padding:8px 0;border-top:1px solid var(--rule);font-size:14px;line-height:1.6;display:grid;grid-template-columns:1fr;gap:2px}
.why li b{font-weight:700}
.why li span{color:var(--ink-2);font-size:13px}
.why li:first-child{border-top:0}

/* ═══════════ 記録 ═══════════ */
.mymap{position:relative;background:var(--sea);height:200px;overflow:hidden}
.mymap svg{position:absolute;inset:0;width:100%;height:100%}
.mymap .sphere{fill:var(--sea)} .mymap .grat{fill:none;stroke:var(--sea-line);stroke-width:.6}
.mymap .land{fill:var(--land);stroke:var(--land-line);stroke-width:.7}
.mymap .country{fill:var(--land-hit);stroke:var(--land-hit-line);stroke-width:.9}
.mymap .brand{top:10px;left:14px}
.stats{list-style:none;margin-top:6px}
.stats li{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--rule)}
.stats li:first-child{border-top:1px solid var(--ink)}
.stats .n{font-family:var(--font-num);font-weight:600;font-size:40px;line-height:1;min-width:2.4ch;text-align:right;font-feature-settings:"tnum" 1}
.stats .n small{font-family:var(--font-jp);font-size:13px;font-weight:400;color:var(--ink-2);margin-left:4px}
.stats .l{font-size:14px}
.stats .l span{display:block;font-size:12px;color:var(--ink-2)}
.eraprog{list-style:none;margin-top:4px}
.eraprog li{display:grid;grid-template-columns:3.2em 1fr 5.5em;gap:10px;align-items:center;padding:6px 0;font-size:13px}
.eraprog .bar{height:6px;background:var(--paper-2);position:relative}
.eraprog .bar i{position:absolute;left:0;top:0;bottom:0;display:block}
.eraprog .v{text-align:right;color:var(--ink-2)} .eraprog .v b{color:var(--ink);font-weight:500}
.actions{list-style:none;margin-top:8px}
.actions li{border-top:1px solid var(--rule)}
.actions li:first-child{border-top:0}
.actions a,.actions button{display:flex;justify-content:space-between;width:100%;padding:11px 0;font-size:15px;color:inherit;text-decoration:none;text-align:left}
.actions small{font-size:12px;color:var(--ink-2)}
.primary-row{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border:1.5px solid var(--ink);font-size:15px;font-weight:700;letter-spacing:.1em;margin-top:16px;color:inherit;text-decoration:none}
.note{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.7}

/* ═══════════ シェア画像 ═══════════ */
.share-prev{margin-top:14px;border:1px solid var(--rule);background:var(--paper-2)}
.share-prev canvas{display:block;width:100%;height:auto}

/* ═══════════ 配色の切り替え ═══════════
   色の役割は共通：紙（paper）・罫（rule）・墨（ink）・海と陸・針（needle＝選んだ年と重なる回にだけ使う強い色）・時代の区分
   書体と骨格は変えない */

/* 明るいコバルト：白い紙に、海図のような青。針はコバルトブルー一色 */
[data-palette=cobalt]{
  --sea:#DDE8F6;
  --sea-line:#C3D4EC;
  --land:#FFFFFF;
  --land-line:#9FB3CF;
  --land-hit:#C9DAF8;
  --land-hit-line:#1F4FB8;
  --paper:#FBFCFE;
  --paper-2:#EDF2F9;
  --ink:#0F1B2E;
  --ink-2:#4B5B73;
  --ink-3:#8796AC;
  --rule:#D5DEEA;
  --needle:#0A4FD6;
  --tick:#15223A;
  --tick-minor:#8C9AB0;
  --pin-off:#A7B4C8;
  --era-ancient:#C2952A;
  --era-medieval:#3F9273;
  --era-early:#7A96D8;
  --era-modern:#D0533F;
  --era-contemporary:#6E7889;
}

/* デジタルサイバー：夜の管制画面。暗い盤面に細い線、針はミントの一色。光彩（グロー）は使わない */
[data-palette=cyber]{
  --sea:#070B12;
  --sea-line:#172232;
  --land:#111A26;
  --land-line:#2B3B52;
  --land-hit:#0E3236;
  --land-hit-line:#34E0C2;
  --paper:#0B1119;
  --paper-2:#152030;
  --ink:#E4ECF5;
  --ink-2:#97A6BA;
  --ink-3:#5D6B80;
  --rule:#223042;
  --needle:#34E0C2;
  --tick:#C3CEDC;
  --tick-minor:#4A5970;
  --pin-off:#3B485B;
  --era-ancient:#D9AE45;
  --era-medieval:#5BBF7E;
  --era-early:#5AA2F0;
  --era-modern:#EE6A5C;
  --era-contemporary:#9AA4B2;
}
[data-palette=cyber] body{color-scheme:dark}
/* サイバーでは経緯線を常に見せ、方眼の画面にする */
[data-palette=cyber] .map .grat.fine{opacity:.55}
[data-palette=cyber] .map .borders{opacity:.6}
[data-palette=cyber] .year{letter-spacing:.02em}
[data-palette=cyber] .pin.on text{fill:var(--ink)}
[data-palette=cyber] .heard-btn[aria-pressed=true]{color:var(--paper)}

/* 配色の切り替え部品（モック用） */
.palette{
  display:flex;align-items:center;gap:0;font-size:11px;color:var(--ink-2);
  border:1px solid var(--rule);background:var(--paper);
}
.palette .k{padding:0 8px;letter-spacing:.08em;color:var(--ink-3)}
.palette button{
  display:flex;align-items:center;gap:5px;padding:5px 9px;font-size:11px;color:var(--ink-2);
  border-left:1px solid var(--rule);white-space:nowrap;
}
.palette button[aria-pressed=true]{color:var(--ink);font-weight:700;background:var(--paper-2)}
.palette .sw{display:inline-block;width:10px;height:10px;border:1px solid var(--rule)}
.palette .sw-sepia{background:linear-gradient(135deg,#EFE8D8 50%,#C2321C 50%)}
.palette .sw-cobalt{background:linear-gradient(135deg,#FFFFFF 50%,#0A4FD6 50%)}
.palette .sw-cyber{background:linear-gradient(135deg,#111A26 50%,#34E0C2 50%)}
/* 設定パネル：メニューの右端の上に出す */
.palette-pop{
  position:fixed;right:8px;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + 6px);z-index:30;
  background:var(--paper);border:1px solid var(--ink);padding:10px 12px 12px;
}
.palette-pop .k{font-size:11px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:6px}
.palette-pop .palette{display:flex}
.palette-pop .palette button:first-child{border-left:0}


/* ═══════════ 探す（書き起こし検索） ═══════════
   署名の「目盛りと針」を、回の長さの線と時刻の針に使う。針の色は --needle（この用途だけ） */
.sq{padding:14px 0 4px}
.sq-k{display:block;font-size:11px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:4px}
.sq-row{display:flex;border-bottom:1.5px solid var(--ink)}
.sq-row input{
  flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:18px;color:var(--ink);
  padding:6px 0;outline:none;letter-spacing:.04em;
}
.sq-row input::placeholder{color:var(--ink-3)}
.sq-row button{font-size:14px;font-weight:700;padding:0 4px 0 14px;letter-spacing:.1em}
.sq-scope{display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;font-size:12px;color:var(--ink-2);margin-top:6px}
.sq-scope:empty{display:none}
.sq-scope a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.sq-cov{font-size:13px;color:var(--ink-3);margin-top:4px}
.sq-recent{list-style:none;display:flex;flex-wrap:wrap;gap:0 18px;border-top:1px solid var(--ink);padding-top:6px}
.sq-recent a{display:inline-block;padding:6px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);font-size:15px}
.sec b.num{font-size:15px;color:var(--ink);font-weight:500}

.sq-hits{list-style:none}
.sq-ep{
  display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;
  padding:12px 0 14px;border-top:1px solid var(--rule);
}
.sq-hits .sq-ep:first-child{border-top:1px solid var(--ink)}
.sq-title{color:inherit;text-decoration:none;font-weight:700;font-size:15px;line-height:1.45}
.sq-title .s{display:block;font-weight:400;font-size:12px;color:var(--ink-2)}
.sq-len{font-size:16px;color:var(--ink-2);white-space:nowrap}
.sq-len small{font-family:var(--font-jp);font-size:11px;margin-left:2px}

/* 回の長さの線と目盛り。針は押せる */
.sq-track{
  grid-column:1/-1;position:relative;height:44px;margin:10px 14px 0 2px;
}
.sq-track::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--tick)}
.sq-track .tk{position:absolute;top:18px;width:0;height:5px;border-left:1px solid var(--tick-minor);font-style:normal}
.sq-track .tk.l{top:15px;height:8px;border-left-color:var(--tick)}
.sq-track .tk span,.sq-track .end{
  position:absolute;top:10px;transform:translateX(-50%);font-size:11px;color:var(--ink-3);white-space:nowrap;
}
.sq-track .end{left:100%;top:25px;transform:translateX(-50%)}
.sq-track .tk span{top:11px}
.nd{
  position:absolute;top:0;width:24px;height:30px;margin-left:-12px;   /* 押しやすい幅を確保し、線は中央の2px */
}
.nd::before{content:"";position:absolute;left:11px;top:6px;bottom:0;border-left:2px solid var(--needle);opacity:.55}
.nd::after{content:"";position:absolute;left:7px;top:0;border:5px solid transparent;border-top:7px solid var(--needle);border-bottom:0;opacity:.55}
.nd.est::before{border-left-style:dashed}
.nd.on::before,.nd.on::after{opacity:1}
.nd.on::before{top:4px;bottom:-4px}
.nd:focus-visible{outline-offset:-2px}

.sq-pick{grid-column:1/-1;margin-top:6px}
.sq-time{display:flex;align-items:baseline;gap:10px}
.sq-time .num{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.sq-time small{font-size:12px;color:var(--ink-3)}
.sq-snip{font-size:14px;line-height:1.7;color:var(--ink-2);margin-top:2px}
.sq-snip b{color:var(--ink);font-weight:700}
.sq-go{list-style:none;margin-top:8px}
.sq-go li{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.sq-go li+li{margin-top:6px}
.sq-go a{font-size:13px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.sq-go a.primary{
  display:flex;align-items:center;justify-content:center;width:100%;height:42px;
  border:1.5px solid var(--ink);color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.06em;
}
@media (min-width:640px){
  .sq-go a.primary{width:auto;padding:0 18px}
}

/* 一覧の見出しの検索欄（探す画面への入口） */
.sq-entry{display:flex;border-bottom:1px solid var(--ink);margin-top:10px}
.sq-entry input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);padding:6px 0;outline:none}
.sq-entry input::placeholder{color:var(--ink-3)}
.sq-entry button{font-size:13px;font-weight:700;padding:0 2px 0 12px;letter-spacing:.08em}
.sq-hint{font-size:12px;color:var(--ink-3);line-height:1.6}

/* ═══════════ 再生バー（非公開版。公式の配信元の音声をそのまま流す） ═══════════ */
.player{
  display:none;position:fixed;left:0;right:0;bottom:calc(41px + env(safe-area-inset-bottom));z-index:20;
  background:var(--paper);border-top:1.5px solid var(--ink);padding:8px 16px 6px;
}
.player.on{display:block}
.player .pl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px}
.player .pl-lbl{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .pl-x{font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--rule);flex:none}
.player audio{display:block;width:100%;height:36px;margin-top:4px}
.player .pl-note{font-size:10.5px;color:var(--ink-3);margin-top:2px}
body.has-player .page .body,body.has-player .hits{padding-bottom:110px}
@media (min-width:900px){
  .player{left:auto;right:0;width:440px;bottom:41px}
}
.sq-go button.primary{
  display:flex;align-items:center;justify-content:center;width:100%;height:42px;
  border:1.5px solid var(--ink);color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.06em;
}
@media (min-width:640px){ .sq-go button.primary{width:auto;padding:0 18px} }
.links-official button.pl-start{display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:10px 0;font-size:15px;text-align:left}
.links-official button.pl-start small{font-size:12px;color:var(--ink-2);margin-left:.8em}
.links-official button.pl-start .ext{color:var(--ink-3);font-size:12px;margin-left:auto}

/* つながりの候補で、まだ人が確かめていないもの */
.unv{display:inline-block;font-size:10.5px;color:var(--ink-3);border:1px solid var(--rule);padding:0 4px;margin-left:.6em;line-height:1.5;vertical-align:.1em}

/* 地図を手で動かして固定しているときの表示と、一覧の地域の区切り */
.follow{
  position:absolute;left:12px;top:52px;z-index:2;
  display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);padding:4px 8px;
}
.follow[hidden]{display:none}
.follow .k{color:var(--ink-3);font-size:10.5px}
.hits li.grp{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--ink-2);padding:10px 0 2px;border-top:0}
.hits li.grp .num{font-size:13px;color:var(--ink)}
.hits li.grp-none{font-size:13px;color:var(--ink-3);padding:8px 0;border-top:1px solid var(--rule)}

/* 同じ場所にまとめた点：2つ目からは点を描かず名前だけ縦に並べる。場所名の行は出さない */
.pin.stk circle{display:none}
.pin.mul text .pl{display:none}
/* 名前が重なって、年から遠い方として隠したもの（点は残す） */
.pin.lh text{opacity:0!important}

/* シリーズのつながり・シリーズの中で探すへの入口（詳細とシリーズの一覧） */
.series-go{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 2px;font-size:13px}
.series-go a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}

/* ═══════════ 非公式の表示（全ページ。palette.js が下のメニューのすぐ上に入れる） ═══════════ */
.unofficial{max-width:640px;margin:0 auto;padding:10px 16px 12px;font-size:11px;line-height:1.7;color:var(--ink-3);line-break:strict}
.unofficial a{color:var(--ink-2);margin-left:.5em;text-decoration:none;border-bottom:1px solid var(--rule)}
.panel .unofficial{padding:10px 0 12px;max-width:none}

/* ═══════════ このサイトについて ═══════════ */
.about{line-height:1.8;line-break:strict;text-spacing-trim:trim-start}
.about .lead{font-size:15px;margin-top:14px}
.about h2{font-size:12px;font-weight:400;color:var(--ink-2);margin-top:28px;padding-bottom:4px;border-bottom:1px solid var(--ink);font-feature-settings:"palt" 1}
.about p{font-size:14px;margin-top:8px}
.about a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.about .dots{list-style:none;margin-top:4px}
.about .dots li{font-size:14px;padding:8px 0 8px 1em;text-indent:-1em;border-top:1px solid var(--rule)}
.about .dots li:first-child{border-top:0}
.about .dots li::before{content:"・"}

/* 問い合わせフォーム：入力欄は検索欄と同じ下線だけ。枠や角丸は使わない */
.contact{margin-top:10px}
.contact label{display:block;font-size:12px;color:var(--ink-2);margin-top:14px}
.contact label small{color:var(--ink-3);font-size:11px;margin-left:.5em}
.contact input,.contact select,.contact textarea{
  display:block;width:100%;margin-top:4px;font:inherit;font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:6px 0;
}
.contact textarea{border:1.5px solid var(--ink);padding:8px;line-height:1.7;resize:vertical}
.contact select{appearance:none;-webkit-appearance:none}
.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact button{
  display:flex;align-items:center;justify-content:center;width:100%;height:46px;margin-top:18px;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font-size:15px;font-weight:700;letter-spacing:.08em;
}
.contact button:disabled{opacity:.5}
.contact-msg{font-size:13px;color:var(--ink-2);min-height:1.7em;margin-top:8px}
.contact-msg.bad{color:var(--ink);font-weight:700}
/* ロボットよけの確認（必要なときだけ出る） */
.ts{margin-top:10px}
.ts:empty{display:none}