/* =========================================================================
   mapshift.dev — 共通スタイル
   v1.1.0 (2026-09-18)
   全ページで読み込む唯一の CSS。
   配色はダークを基準に設計し、ライトは同じトークンを置き換えて実現する。
   既定は auto（OS 設定に従う）。html[data-theme] で上書きできる。
   ★地図の図版は暗い海で焼いてあるので、ライトでは図版だけ暗い台に載せる
     （--plate / --plate-line）。
   ========================================================================= */

:root{
  --ink:#e8edf2;
  --muted:#8b98a8;
  --sea:#0a1622;
  --sea2:#0e1e30;
  --line:#1d3348;
  --cool:#3aa0ff;
  --warm:#ff7a3d;
  --maxw:1120px;
  --maxw-text:960px;

  /* 地図の図版を載せる台。ダークでは紙面と同色＝台が見えない */
  --plate:#0a1622;
  --plate-line:#1d3348;
  --plate-pad:0px;
}

/* --- ライト（auto = OS 設定に従う） ------------------------------------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:#2a3644;
    --muted:#6b6a62;
    --sea:#eee9df;
    --sea2:#e3ddd0;
    --line:#cfc7b8;
    --cool:#1667c8;
    --warm:#c2410c;

    /* 図版は暗いまま。周囲に台を敷いて「そういう図版」として見せる */
    --plate:#0d1b2a;
    --plate-line:#0d1b2a;
    --plate-pad:12px;
  }
}

/* --- ライト（明示指定） -------------------------------------------------- */
:root[data-theme="light"]{
  --ink:#2a3644;
  --muted:#6b6a62;
  --sea:#eee9df;
  --sea2:#e3ddd0;
  --line:#cfc7b8;
  --cool:#1667c8;
  --warm:#c2410c;
  --plate:#0d1b2a;
  --plate-line:#0d1b2a;
  --plate-pad:12px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--sea);
  color:var(--ink);
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap.text{max-width:var(--maxw-text)}

a{color:var(--cool); text-decoration:none}
a:hover{text-decoration:underline}
strong{color:var(--ink); font-weight:600}
.accent{color:var(--warm)}
:focus-visible{outline:2px solid var(--cool); outline-offset:3px}

/* --- ナビ ---------------------------------------------------------------- */
.topbar{border-bottom:1px solid var(--line); padding:18px 0}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between;
              gap:16px; flex-wrap:wrap}
.brand{font-size:.82rem; letter-spacing:.16em; color:var(--muted)}
.brand a{color:var(--muted)}
.brand a:hover{text-decoration:none}
.brand strong{color:var(--ink); font-weight:600; letter-spacing:.04em}
.nav a{font-size:.82rem; color:var(--muted); margin-left:20px}
.nav a:first-child{margin-left:0}
.nav a:hover{color:var(--ink); text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a.lang{border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:.74rem}

/* テーマ切替ボタン */
#theme-toggle{
  margin-left:20px; padding:4px 11px;
  font:inherit; font-size:.76rem; letter-spacing:.02em;
  color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  cursor:pointer;
}
#theme-toggle:hover{color:var(--ink); border-color:var(--muted)}
@media (max-width:560px){ #theme-toggle{margin-left:0} }
@media (max-width:560px){
  .topbar .wrap{gap:10px}
  .nav a{margin-left:0; margin-right:16px}
}

/* --- ページ見出し -------------------------------------------------------- */
header.page{padding:88px 0 8px}
h1{font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.4; margin:0;
   max-width:18em; font-weight:600}
.lead{font-size:clamp(.95rem,1.6vw,1.05rem); color:var(--muted);
      max-width:38em; margin-top:22px}

/* --- 節 ------------------------------------------------------------------ */
section{padding:64px 0; position:relative}
section.tight{padding:56px 0 0}
h2{font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.5; margin:0 0 6px;
   font-weight:600}
h2 .num{color:var(--muted); font-weight:400; margin-right:.6em; font-size:.8em}
h2 .count{color:var(--muted); font-weight:400; font-size:.8em; margin-left:.7em}
h3{font-size:1rem; margin:0 0 4px; font-weight:600}
.sub{font-size:clamp(.9rem,1.5vw,1rem); color:var(--muted);
     max-width:40em; margin-top:10px}
p{max-width:38em}
.divider{border-top:1px solid var(--line)}

/* --- 表 ------------------------------------------------------------------ */
table{border-collapse:collapse; width:100%; margin-top:26px; font-size:.9rem}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
      vertical-align:top}
th{color:var(--muted); font-weight:500; font-size:.82rem; letter-spacing:.04em;
   white-space:nowrap}
td.k{color:var(--ink); white-space:nowrap; width:11em}
td.k .en{display:block; color:var(--muted); font-size:.78rem; font-weight:400;
         margin-top:2px}
@media (max-width:620px){
  td.k{white-space:normal; width:auto}
  th,td{padding:10px 8px}
}

/* --- 補足ブロック -------------------------------------------------------- */
.aside{border-left:2px solid var(--line); padding:4px 0 4px 18px; margin-top:28px;
       color:var(--muted); font-size:.9rem; max-width:38em}
.trade{background:var(--sea2); border:1px solid var(--line); border-radius:10px;
       padding:22px 24px; margin-top:28px; max-width:44em}
.trade .t{color:var(--ink); font-weight:600}
.trade p{margin:8px 0 0; color:var(--muted); font-size:.92rem}

/* --- 図版（単体） -------------------------------------------------------- */
figure{margin:0}
figure.wide{margin-top:30px}
figure.wide img{width:100%; height:auto; display:block;
                background:var(--plate); border:var(--plate-pad) solid var(--plate);
                outline:1px solid var(--plate-line); border-radius:8px}
figcaption{color:var(--muted); font-size:.85rem; margin-top:12px; max-width:44em}
.credit{display:block; color:var(--muted); font-size:.76rem; margin-top:6px}

/* --- 図版グリッド -------------------------------------------------------- */
.grid{display:grid; gap:28px 24px; margin-top:30px}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){ .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .grid.g3, .grid.g2{grid-template-columns:1fr; gap:34px}
}

figure.map img{width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; display:block;
               background:var(--plate); border:var(--plate-pad) solid var(--plate);
               outline:1px solid var(--plate-line); border-radius:8px}
figure.map figcaption{margin-top:12px; color:inherit}
.jp{font-size:.98rem; font-weight:600}
.en{display:block; color:var(--muted); font-size:.78rem; margin-top:1px}
.note{color:var(--muted); font-size:.88rem; margin:7px 0 0; line-height:1.65}

/* 未生成の枠 */
.pending .slot{aspect-ratio:1/1; display:flex; align-items:center;
  justify-content:center; background:var(--sea2);
  border:1px dashed var(--line); border-radius:8px;
  color:var(--muted); font-size:.85rem; text-align:center; padding:0 24px}

/* --- 2 枚並べて比較 ------------------------------------------------------ */
.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:20px; margin-top:30px}
.pair img{width:100%; height:auto; display:block;
          background:var(--plate); border:var(--plate-pad) solid var(--plate);
          outline:1px solid var(--plate-line); border-radius:8px}
@media (max-width:620px){ .pair{grid-template-columns:1fr} }

/* --- 画像と本文を並べる ------------------------------------------------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
       gap:36px; align-items:center; margin-top:30px}
.split img{width:100%; height:auto; display:block;
           background:var(--plate); border:var(--plate-pad) solid var(--plate);
           outline:1px solid var(--plate-line); border-radius:8px}
.split p{margin:0 0 14px; max-width:34em; color:var(--muted); font-size:.95rem}
.split p:last-child{margin-bottom:0}
@media (max-width:760px){ .split{grid-template-columns:1fr; gap:22px} }

/* --- トップの導線 -------------------------------------------------------- */
.hero{padding:28px 0 0}
.hero .hero-pair{margin-top:0}
.hero .hero-pair figure.map img{max-height:60vh}
.paths{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
       gap:20px; margin-top:34px}
.path{background:var(--sea2); border:1px solid var(--line); border-radius:10px;
      padding:22px 24px; display:block}
.path:hover{border-color:var(--cool); text-decoration:none}
.path .t{color:var(--ink); font-weight:600; font-size:1rem}
.path p{color:var(--muted); font-size:.9rem; margin:8px 0 0; max-width:none}
@media (max-width:820px){ .paths{grid-template-columns:1fr} }

/* --- 経路図（SVG） ------------------------------------------------------- */
.diagram{margin-top:32px; overflow-x:auto}
.diagram svg{display:block; width:100%; height:auto; min-width:520px}

/* --- フッタ -------------------------------------------------------------- */
footer{margin-top:40px; padding:56px 0; color:var(--muted); font-size:.85rem;
       border-top:1px solid var(--line)}
footer a{color:var(--muted)}
footer p{max-width:44em; margin:0 0 10px}
footer p:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* --- 埋め込み動画（YouTube） ------------------------------------------ */
.video{position:relative; aspect-ratio:16/9; background:var(--plate);
       border:var(--plate-pad) solid var(--plate); outline:1px solid var(--plate-line); border-radius:8px}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:6px}