/* ===== 共有トークン(フラット/マテリアル。経済=暖色・宇宙=寒色で3層を符号化) ===== */
:root{
  --bg:#F3F4F7; --surface:#FFFFFF; --surface-2:#EDEFF3; --border:#E3E6EC;
  --ink:#1B1D24; --ink-dim:#5E6474; --primary:#4B5BD6; --on-primary:#FFFFFF;
  --econ:#CF5E39; --cosmic:#1B8A9A;
  --elev:0 1px 2px rgba(20,22,40,.06),0 2px 8px rgba(20,22,40,.05);
  --wrap:1000px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111318; --surface:#1B1E26; --surface-2:#232734; --border:#2F3340;
    --ink:#E6E8EE; --ink-dim:#9AA1B1; --primary:#96A2FF; --on-primary:#12141F;
    --econ:#ED8A6B; --cosmic:#5AC3D2; --elev:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"]{
  --bg:#F3F4F7; --surface:#FFFFFF; --surface-2:#EDEFF3; --border:#E3E6EC;
  --ink:#1B1D24; --ink-dim:#5E6474; --primary:#4B5BD6; --on-primary:#FFFFFF;
  --econ:#CF5E39; --cosmic:#1B8A9A; --elev:0 1px 2px rgba(20,22,40,.06),0 2px 8px rgba(20,22,40,.05);
}
:root[data-theme="dark"]{
  --bg:#111318; --surface:#1B1E26; --surface-2:#232734; --border:#2F3340;
  --ink:#E6E8EE; --ink-dim:#9AA1B1; --primary:#96A2FF; --on-primary:#12141F;
  --econ:#ED8A6B; --cosmic:#5AC3D2; --elev:0 1px 2px rgba(0,0,0,.4);
}

/* ===== ベース ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.75;
  font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','Noto Sans JP',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
      font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mincho{font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ===== 共通ヘッダー ===== */
header.top{border-bottom:1px solid var(--border);background:var(--surface);margin-bottom:1em}
.brandrow{display:flex;align-items:center;justify-content:space-between;
  gap:12px 20px;flex-wrap:wrap;padding:20px 0 0}
.brand{font-size:13px;letter-spacing:.24em;color:var(--primary);font-weight:700}
a.brand:hover{text-decoration:none;opacity:.85}
.navcluster{display:flex;align-items:center;gap:14px}
.nav{display:flex;gap:16px;font-size:14px}
.nav a{color:var(--ink-dim);font-weight:600}
.nav a:hover{color:var(--primary);text-decoration:none}
.nav a[aria-current="page"]{color:var(--primary)}
.themebtn{background:var(--surface-2);border:1px solid var(--border);color:var(--ink-dim);
  width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:17px;line-height:1;
  display:grid;place-items:center;transition:color .2s,border-color .2s,background .2s}
.themebtn:hover{color:var(--primary);border-color:var(--primary)}
.themebtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:560px){.wrap{padding:0 18px}}