/* ==========================================================================
   世界史 教材室 — 共通スタイル
   地図ビューア(mapview.js)と、今後追加するページで共有する。
   色や書体はここだけを直せば全ページに反映される。
   ========================================================================== */

:root{
  /* --- 配色 --- */
  --sea:#0D181E;        /* 背景・海 */
  --land:#283C45;       /* どこの領有でもない陸地 */
  --panel:#132029;      /* 右側の解説パネル */
  --edge:#24373F;       /* 区切り線 */
  --ink:#EDE7D9;        /* 本文 */
  --muted:#8FA3AD;      /* 補足文 */
  --brass:#C9A24A;      /* 差し色(年表の目盛り) */
  --brass-dim:#6E5B2E;

  /* --- 書体 --- */
  --serif:"Yu Mincho","YuMincho","游明朝","Hiragino Mincho ProN","MS PMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo","Noto Sans JP",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--sea);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden}
.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}

/* ---------- ヘッダー ---------- */
header{display:flex;align-items:baseline;gap:16px;padding:14px 30px 12px;
  border-bottom:1px solid var(--edge)}
.brand{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--brass);
  text-decoration:none;border-right:1px solid var(--edge);padding-right:16px;white-space:nowrap}
.brand:hover{color:var(--ink)}
header h1{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.22em}
header .sub{font-size:12px;color:var(--muted);letter-spacing:.12em;white-space:nowrap}
header .hint{margin-left:20px;font-size:11px;color:var(--muted);letter-spacing:.06em;
  white-space:nowrap}
.pagenav{margin-left:auto;display:flex;gap:16px;white-space:nowrap}
.pagenav a{font-size:11.5px;color:var(--muted);text-decoration:none;letter-spacing:.06em;
  border-bottom:1px solid transparent;padding-bottom:3px;transition:.2s}
.pagenav a:hover{color:var(--ink)}
.pagenav a[aria-current="page"]{color:var(--brass);border-bottom-color:var(--brass-dim)}
header .hint kbd{font-family:var(--sans);border:1px solid var(--edge);border-radius:3px;
  padding:1px 5px;margin:0 1px;color:var(--ink)}

/* ---------- 本体 ---------- */
main{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,400px);
  min-height:0;border-bottom:1px solid var(--edge)}
.mapcol{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;
  padding:10px 8px 4px 18px}
#map{flex:1;min-height:0;width:100%}
.caveat{font-size:11px;line-height:1.7;color:var(--muted);padding:4px 12px 6px 2px;max-width:78ch}

aside{border-left:1px solid var(--edge);background:var(--panel);padding:24px 28px;
  overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.yearline{display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--brass-dim);
  padding-bottom:8px}
.year{font-family:var(--serif);font-size:clamp(40px,4.4vw,62px);line-height:.9;
  letter-spacing:.02em;font-weight:400;font-variant-numeric:lining-nums}
.tag{font-size:12px;color:var(--brass);letter-spacing:.14em;padding-bottom:6px;white-space:nowrap}
.head{font-family:var(--serif);font-size:clamp(19px,2vw,25px);font-weight:400;letter-spacing:.09em;
  line-height:1.4}
.body{font-size:clamp(13px,1.05vw,15px);line-height:1.95;color:#D9D3C6}
.body b{color:var(--ink);font-weight:600;border-bottom:1px solid var(--brass-dim);padding-bottom:1px}
.note{font-size:12px;line-height:1.85;color:var(--muted);border-left:2px solid var(--brass-dim);
  padding-left:11px}
.note b{color:#B9AE93;font-weight:600}
.legend{margin-top:auto;padding-top:14px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:6px 16px}
.lg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#CFC9BC}
.sw{width:15px;height:15px;border-radius:2px;flex:none}
.credit{font-size:10px;color:#5E7079;letter-spacing:.04em;line-height:1.6}

/* ---------- 地図(SVG) ---------- */
#map .reg{opacity:0;fill-opacity:.74;stroke-opacity:.95;stroke-width:6;stroke-linejoin:round;
  transition:opacity .5s ease, fill .5s ease, stroke .5s ease}
#map .riv{fill:none;stroke:#7FC7E8;stroke-width:7;opacity:0;stroke-linejoin:round;
  stroke-linecap:round;transition:opacity .5s ease, stroke-width .5s ease, stroke .5s ease}
#map .riv.bold{stroke-width:15;stroke:#CFEBFA}
#map .dash{fill:none;stroke:#F0D08A;stroke-width:11;stroke-dasharray:34 26;opacity:0;
  stroke-linecap:round;transition:opacity .5s ease}
#map text{font-family:var(--sans);paint-order:stroke;stroke:#0D181E;stroke-width:9;
  stroke-linejoin:round}
#map .rlab{font-family:var(--serif);font-size:62px;fill:#F2EADA;letter-spacing:.14em;opacity:.94}
#map .clab{font-size:48px;fill:#DCE6EA}
#map .cdot{fill:#FFF3D6;stroke:#0D181E;stroke-width:6}
#map .lnlab{font-size:44px;fill:#CFEBFA;letter-spacing:.1em}
#map .lnlab.pl{fill:#F0D08A}
.fade{transition:opacity .4s ease}

/* ---------- 年表つまみ(下部の目盛り) ---------- */
.rulewrap{padding:6px 26px 12px;display:flex;align-items:center;gap:16px}
.nav{background:none;border:1px solid var(--edge);color:var(--muted);border-radius:50%;
  width:34px;height:34px;font-size:12px;cursor:pointer;flex:none;transition:.2s}
.nav:hover:not(:disabled){border-color:var(--brass);color:var(--brass)}
.nav:disabled{opacity:.25;cursor:default}
.rule{position:relative;flex:1;height:104px}
.bar{position:absolute;left:0;right:0;top:28px;height:1px;background:var(--brass-dim)}
.grad{position:absolute;width:1px;background:var(--brass-dim);opacity:.55}
.tmark{position:absolute;top:25px;width:7px;height:7px;border-radius:50%;background:var(--sea);
  border:1px solid var(--brass-dim);transform:translateX(-50%);transition:.25s}
.tmark.on{background:var(--brass);border-color:var(--brass)}
.leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.leaders line{stroke:var(--brass-dim);stroke-width:1;opacity:.65;transition:stroke .25s,opacity .25s}
.leaders line.on{stroke:var(--brass);opacity:1}
.stop{position:absolute;top:52px;height:52px;transform:translateX(-50%);background:none;border:0;
  padding:0;cursor:pointer;font-family:var(--serif);color:var(--muted);transition:color .25s}
.stop .dot{position:absolute;left:50%;top:0;width:11px;height:11px;transform:translateX(-50%);
  border:1px solid var(--brass-dim);background:var(--sea);transition:.25s}
.stop.treaty .dot{transform:translateX(-50%) rotate(45deg)}
.stop .yr{position:absolute;left:50%;top:18px;transform:translateX(-50%);font-size:15px;
  letter-spacing:.08em;white-space:nowrap;font-variant-numeric:lining-nums}
.stop .ev{display:block;font-size:10px;letter-spacing:.16em;font-family:var(--sans);opacity:.75;
  margin-top:1px}
.stop:hover{color:var(--ink)}
.stop:hover .dot{border-color:var(--brass)}
.stop[aria-current="true"]{color:var(--brass)}
.stop[aria-current="true"] .dot{background:var(--brass);border-color:var(--brass);
  box-shadow:0 0 0 4px rgba(201,162,74,.16)}
.stop:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ---------- 読み込み失敗時 ---------- */
.err{padding:40px;font-size:14px;line-height:2;color:var(--muted)}
.err b{color:var(--ink)}

/* ---------- 画面が狭いとき ---------- */
@media (max-width:900px){
  body{overflow:auto}
  header{padding-left:26px; padding-right:26px}
  aside{padding-left:26px; padding-right:26px}

  /* 縦に積み、年表を地図のすぐ上へ持ち上げる。
     スマホでは年表がページ末尾にあると、動かすたびに地図が画面外へ出てしまうため。
     grid のままだと行の割り当てが固定されるので、flex に切り替えて順番で並べる。 */
  .app{height:auto; display:flex; flex-direction:column}
  header{order:1}
  footer.rulewrap{order:2; border-bottom:1px solid var(--edge); padding:4px 26px 10px}
  main{order:3; border-bottom:0}

  main{grid-template-columns:1fr}
  aside{border-left:0;border-top:1px solid var(--edge)}
  #map{height:56vh}
  @supports (height:56svh){ #map{height:56svh} }
  header .hint{display:none}
  .pagenav{margin-left:0;gap:12px}
  header{flex-wrap:wrap;gap:8px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}