/* ============ 既存トークン・レイアウトはそのまま（前回のCSS） ============ */
:root{
  --bg:#0b0d12;--panel:#12151c;--panel-2:#0f1218;--text:#e9edf1;--muted:#9aa3af;--brand:#36a3ff;--brand-2:#7cd8ff;--ok:#22c55e;--warn:#f59e0b;--danger:#ef4444;--ring:rgba(54,163,255,.25);
  --radius:14px;--radius-sm:10px;--shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  --maxw:1200px; --sp:14px; --sp2:22px; --sp3:32px; --sp4:48px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(54,163,255,.08),transparent 60%),
             linear-gradient(180deg, #0b0d12 0%, #0b0d12 60%, #0a0c11 100%);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Arial, sans-serif;
  letter-spacing:.2px
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp2)}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(11,13,18,.72);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.nav a{color:var(--text);opacity:.9}
.nav a.active{color: #2563eb !important;}
.grow{flex:1}
.lang-switch{display:flex;gap:8px}
.lang-switch a{padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08)}

/* Page header */
.pagehead{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp3);padding:var(--sp3) 0}
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px dashed rgba(255,255,255,.18);color:var(--muted);font-size:13px}
.badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px rgba(34,197,94,.15)}
h1{margin:.2rem 0 0;font-size:clamp(22px, 3.6vw, 36px);line-height:1.25}
.lead{color:#cdd6e1;margin:6px 0 0}

.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.meta .kpi{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.kpi b{font-size:18px}

.cta{display:flex;gap:10px;margin-top:var(--sp2)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));box-shadow:var(--shadow)}
.btn:hover{border-color:rgba(255,255,255,.18)}
.btn.primary{background:linear-gradient(180deg, rgba(54,163,255,.35), rgba(54,163,255,.12));border-color:rgba(54,163,255,.4)}

/* Main grid */
main{display:grid;grid-template-columns:1fr 320px;gap:var(--sp3);padding-bottom:var(--sp4)}
section{background:var(--panel);border-radius:var(--radius);padding:var(--sp3);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
section + section{margin-top:var(--sp3)}
h2{margin:0 0 var(--sp);font-size:clamp(18px,2.6vw,26px)}
h3{margin:var(--sp2) 0 var(--sp);font-size:18px;color:#d7dee8}
h4 {
  margin-top: 0.4em;              /* h2直後で詰まりすぎを防ぐ（以前より少し空ける） */
  margin-bottom: 0.6em;           /* 下のグラフや本文との距離 */
  font-size: 17px;                /* h2より小さく、本文より大きく */
  font-weight: 600;               /* 少し軽い太字 */
  color: #334155;                 /* 落ち着いたグレー（ダーク/ライト両方に自然） */
  line-height: 1.4;
}
p{margin:.4rem 0}

/* Cards */
.cards{display:grid;grid-template-columns:1fr;gap:var(--sp2)}
.card{background:var(--panel-2);border-radius:var(--radius-sm);padding:var(--sp2);border:1px solid rgba(255,255,255,.06)}
.muted{color:var(--muted)}
.card-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}
/* Aside */
aside{position:sticky;top:78px;height:max-content;display:flex;flex-direction:column;gap:var(--sp2)}
.toc{background:var(--panel);border-radius:var(--radius);padding:var(--sp2);border:1px solid rgba(255,255,255,.06)}
.toc h4{margin:0 0 6px;font-size:14px;color:#cbd5e1}
.toc a{display:block;padding:6px 8px;border-radius:8px;color:#cbd5e1}
.toc a:hover{background:rgba(255,255,255,.05)}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .pagehead{grid-template-columns:1fr}
  main{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}


/* ============ 拡張: タイポ/要素標準 ============ */
figure{margin:0}
figcaption{font-size:13px;line-height:1.4;margin-bottom:8px}
ul,ol{margin:.4rem 0 .6rem 1.2rem}
.card ul{padding-left:1.1rem}
.card li{margin:.2rem 0}

/* ============ 拡張: アクティブ状態とフォーカス ============ */
:root{ --focus: 2px solid var(--brand); }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--ring);
  border-radius: 10px;
}

/* ナビ／目次のアクティブ表示 */
.nav a.active{color:var(--brand);text-shadow:0 0 12px rgba(54,163,255,.35)}
.toc a.active{
  background:rgba(54,163,255,.12);
  color:var(--text);
  border:1px solid rgba(54,163,255,.35);
}

/* 言語スイッチの選択強調（aria-current） */
.lang-switch a[aria-current="page"]{
  color:var(--brand);
  border-color:rgba(54,163,255,.45);
  background:linear-gradient(180deg, rgba(54,163,255,.18), rgba(54,163,255,.06));
}

/* ============ 拡張: ボタンのバリエーション ============ */
.btn.ghost{
  background:transparent;
  border-color:rgba(255,255,255,.16);
}
.btn.ok{ border-color:rgba(34,197,94,.35); background:linear-gradient(180deg, rgba(34,197,94,.28), rgba(34,197,94,.10)); }
.btn.warn{ border-color:rgba(245,158,11,.35); background:linear-gradient(180deg, rgba(245,158,11,.28), rgba(245,158,11,.10)); }
.btn.danger{ border-color:rgba(239,68,68,.35); background:linear-gradient(180deg, rgba(239,68,68,.28), rgba(239,68,68,.10)); }

/* ============ 拡張: KPI・カードのバリエーション ============ */
.kpi.small{ padding:6px 10px; }
.card.flat{ box-shadow:none; background:transparent; border-color:rgba(255,255,255,.08) }

/* ============ 拡張: Disclosure（details/summary） ============ */
.disclosure{
  background:var(--panel-2);
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.08);
  padding:0;
  overflow:hidden;
}
.disclosure summary{
  list-style:none;
  cursor:pointer;
  padding:12px 16px;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.disclosure summary::-webkit-details-marker{ display:none; }
.disclosure summary::before{
  content:"▸";
  transform:translateY(-1px);
  transition:transform .2s ease;
  opacity:.85;
}
.disclosure[open] summary::before{ content:"▾"; transform:none; }
.disclosure .disclosure-body{ padding:10px 16px 14px; border-top:1px solid rgba(255,255,255,.06); }

/* ============ 拡張: アクセシビリティ補助 ============ */
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============ 拡張: メディアクエリ ============ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============ 拡張: 印刷 ============ */
@media print{
  body{ background:#fff; color:#111; }
  header, .toc, .lang-switch, .btn, .cta{ display:none !important; }
  .wrap{ max-width:900px; padding:0; }
  section{ border-color:#ddd; box-shadow:none; background:#fff; }
  .card{ border-color:#e5e7eb; background:#fff; box-shadow:none; }
  a{ color:#111; text-decoration:underline; }
  img{ break-inside:avoid; }
}


/* ============ Light theme (colors only, no layout changes) ============ */
html[data-theme="light"]{
  /* カラートークンの置き換えのみ */
  --bg:#f7f8fa;
  --panel:#ffffff;
  --panel-2:#f9fafb;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#2563eb; --brand-2:#60a5fa;
  --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  --ring:rgba(37,99,235,.22);
}

/* 背景は色だけ変更（レイアウト無関係） */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(37,99,235,.06), transparent 60%),
    linear-gradient(180deg, #f7f8fa 0%, #f7f8fa 60%, #f3f4f6 100%);
  color:var(--text);
}

/* もとの罫線は白(=見えづらい)だったので、"色だけ"黒系に上書き */
html[data-theme="light"] header{
  background:rgba(255,255,255,.82);
  border-bottom-color: rgba(0,0,0,.08);
}

/* 枠線色のみ黒系に。padding/size/影は一切変更しない */
html[data-theme="light"] section,
html[data-theme="light"] .card,
html[data-theme="light"] .toc{
  border-color: rgba(0,0,0,.08);
  background: var(--panel); /* .cardは元の指定通りpanel-2があればそのまま */
}

/* テキスト色の対比だけ調整（リンクとTOC） */
html[data-theme="light"] .nav a{ color: var(--text); }
html[data-theme="light"] .toc h4{ color:#334155; }
html[data-theme="light"] .toc a{ color:#334155; }
html[data-theme="light"] .toc a:hover{ background: rgba(0,0,0,.04); }
html[data-theme="light"] p {
  color: var(--text); /* 通常本文は濃い文字色 */
}
/* muted系の段落（注釈や小文字など）を少し淡く */
html[data-theme="light"] p.muted,
html[data-theme="light"] .muted {
  color: var(--muted);
}
/* アクティブのハイライト色だけ（背景/枠） */
html[data-theme="light"] .toc a.active{
  background: rgba(37,99,235,.10);
  color: var(--text);
  border: 1px solid rgba(37,99,235,.35);
}

/* ボタンは枠線色のみ黒系に（サイズ/角/影は触らない） */
html[data-theme="light"] .btn{ border-color: rgba(0,0,0,.10); }
html[data-theme="light"] .btn:hover{ border-color: rgba(0,0,0,.18); }
html[data-theme="light"] .btn.primary{
  background: linear-gradient(180deg, rgba(37,99,235,.18), rgba(37,99,235,.08));
  border-color: rgba(37,99,235,.35);
}
html[data-theme="light"] .btn {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.00));
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  color: var(--text);
}

html[data-theme="light"] h3 {
  color: #1e293b;             /* 通常文字より少し濃いグレー */
  font-weight: 600;           /* 軽い太字で強調 */
  border-left: 3px solid var(--brand); /* 左に控えめな青ライン */
  padding-left: 10px;         /* ラインと文字の間隔 */
  margin-top: 0px;     /* ← 上部余白を約1/3に */
  margin-bottom: var(--sp); /* 下は維持 */
  font-size: 18px;
}

/* muted（補足見出し）っぽくしたい場合はクラス指定も可 */
html[data-theme="light"] h3.muted {
  color: var(--muted);
  border-left: 3px solid rgba(0,0,0,.1);
}

/* primaryボタンを少し白っぽく（淡い青） */
html[data-theme="light"] .btn.primary {
  background: linear-gradient(180deg, #f0f5ff, #e7efff);
  border-color: rgba(37,99,235,.3);
  box-shadow: 0 4px 10px rgba(37,99,235,.15);
  color: #1e3a8a; /* 濃いめの青文字 */
}
html[data-theme="light"] {
  --shadow: 0 10px 10px rgba(0,0,0,.08); /* ← 白背景向けに薄く */
}

/* 言語スイッチは枠色のみ */
html[data-theme="light"] .lang-switch a{ border-color: rgba(0,0,0,.10); }
html[data-theme="light"] .lang-switch a[aria-current="page"]{
  color: var(--brand);
  border-color: rgba(37,99,235,.45);
  background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.04));
}

/* フッター枠線の色だけ */
html[data-theme="light"] footer{ border-top-color: rgba(0,0,0,.08); }

html[data-theme="light"] ul li::marker {
  color: rgba(0,0,0,.5);
}

html[data-theme="light"] h4 {
  color: #1e293b;                 /* 濃いグレーで読みやすく */
}

/* ============ Light Theme: Disclosure（details/summary） ============ */
html[data-theme="light"] .disclosure {
  background: #f8fafc; /* 明るいグレー（カード背景） */
  border: 1px solid rgba(0,0,0,.08);
}

html[data-theme="light"] .disclosure summary {
  color: #1e293b;             /* 文字：濃いグレー */
  background: #ffffff;        /* バー背景：やや淡いグレー */
}

html[data-theme="light"] .disclosure summary::before {
  color: #475569;             /* アイコン：落ち着いたグレー */
  opacity: .7;
}

html[data-theme="light"] .disclosure[open] summary::before {
  color: #2563eb;             /* 開いたときの矢印：ブランド青 */
}

html[data-theme="light"] .disclosure .disclosure-body {
  background: #ffffff;         /* 本文背景：白 */
  color: #1e293b;              /* 本文テキスト：濃いグレー */
  border-top: 1px solid rgba(0,0,0,.06);
}



/* ============ Light Theme: KPI 色・トーンのみ上書き ============ */
html[data-theme="light"] .meta .kpi {
  background: #ffffff;                 /* 背景を白に */
  border: 1px solid rgba(0,0,0,.08);   /* 枠線を淡く */
  box-shadow: 0 4px 12px rgba(0,0,0,.06); /* 柔らかい影（浮かない程度） */
}

html[data-theme="light"] .meta .kpi .muted {
  color: #64748b;                      /* mutedトーン（灰青） */
}

html[data-theme="light"] .meta .kpi b {
  color: #1e293b;                      /* 濃いグレーで可読性維持 */
}

/* KPI 全体の背景をわずかに明るく（任意、前後と馴染ませたいとき） */
html[data-theme="light"] .meta {
  background: transparent;
}









/* サブナビ本体：ヒーロー直下で横並び。wrap内に置く前提 */
.subnav{
  display:flex; gap:8px; padding:10px 0 12px;
  /* stickyは必要なら使う。崩れるなら一旦コメントアウトしてOK */
  position: sticky; top: 64px;   /* 既存ヘッダーが64px想定 */
  z-index: 40;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow:auto; -webkit-overflow-scrolling:touch;
  margin-bottom: var(--sp2);
}

/* タブ（pill） */
.subnav .pill{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: var(--panel-2);
  color: var(--text);
  text-decoration:none;
  opacity:.95;
}
.subnav .pill:hover{ border-color: rgba(255,255,255,.18); }
.subnav .pill.active{
  background: linear-gradient(180deg, rgba(54,163,255,.28), rgba(54,163,255,.12));
  border-color: rgba(54,163,255,.45);
}

/* ライトテーマは色だけ上書き（レイアウト値はそのまま） */
html[data-theme="light"] .subnav{
  background: linear-gradient(180deg,#fff 0%, transparent 100%);
  border-bottom-color: rgba(0,0,0,.06);
}
html[data-theme="light"] .subnav .pill{
  border-color: rgba(0,0,0,.10);
  background: #f1f5f9;
}
html[data-theme="light"] .subnav .pill:hover{
  border-color: rgba(0,0,0,.18);
}
html[data-theme="light"] .subnav .pill.active{
  background: linear-gradient(180deg,#e8f0ff,#eaf2ff);
  border-color: rgba(37,99,235,.35);
}

/* モバイルでヘッダー高さが違う場合の保険 */
@media (max-width: 980px){
  .subnav{ top: 56px; }
}

/* Archiveセクション内だけに限定して上書き */
#archive-news .disclosure summary{
  padding: 6px 0.7;          /* 左右の余白を0に（外側リストと同じ幅に） */
}

/* 念のため、内側のリストも外側と同条件に統一 */
#archive-news .disclosure .archive-list{
  margin: 0;
  padding: 20;              /* ブラウザ既定のインデントを無効化 */
}