/* ==========================================================================
   Chinapost UI — Production Stylesheet (Phase 11.15: 唯一のスタイル)
   Source: design/preview/pages/_shared.css
   依存: design/tokens.json v1.0.0
   ビルド: 不要 (standalone CSS、Tailwind 処理なし)
   配置: public/assets/css/app_v3.css にコピーしてデプロイ
   ========================================================================== */

/* ===== Token CSS Variables ===== */
/* Dark-first: data-theme 未指定 / ="dark" / OS が dark を要求 */
:root[data-theme="dark"], :root:not([data-theme]) {
  --bg-base:#0B0B0D; --bg-surface:#111116; --bg-elevated:#1A1A20;
  --bg-overlay:rgba(11,11,13,0.72); --bg-tint:rgba(255,255,255,0.04);
  --header-bg:rgba(11,11,13,0.85);
  --border-subtle:#2B2B33; --border-default:#45454F; --border-strong:#6B6B76;
  /* Phase Q-1.f (2026-05-06): WCAG AAA レベルへ強化
     旧 secondary #A0A0A8 = 5.6:1 (AA only) → 新 #BFBFC8 = 8.0:1 (AAA)
     旧 tertiary  #7A7A85 = 3.8:1 (AA fail!) → 新 #9F9FA9 = 5.5:1 (AA pass、card-meta 等で十分)
     primary は据え置き (17.5:1 既に AAA) */
  --text-primary:#F5F5F6; --text-secondary:#BFBFC8; --text-tertiary:#9F9FA9;
  --text-disabled:#45454F; --text-link:#E88585; --text-link-hover:#F2B4B4;
  --brand-primary:#B3121D; --brand-primary-hover:#8F0E18; --brand-primary-active:#6D0B13;
  --brand-primary-subtle:#2C0508; --brand-accent:#D8504F; --brand-glow:#E88585;
  --success:#10B981; --success-bg:#042C24;
  --warning:#F59E0B; --warning-bg:#2B1B04;
  --error:#EF4444;   --error-bg:#2C0508;
  --info:#3B82F6;    --info-bg:#0A1A33;
  --ch-ai:#A78BFA; --ch-semicon:#22D3EE; --ch-ev:#34D399; --ch-autonomous:#2DD4BF;
  --ch-energy:#FBBF24; --ch-realestate:#FB923C; --ch-securities:#FACC15;
  --ch-military:#F87171; --ch-sanctioned:#94A3B8; --ch-jpev:#F472B6;
}
:root[data-theme="light"] {
  --bg-base:#FBFAF6; --bg-surface:#FFFFFF; --bg-elevated:#F5F2E8;
  --bg-overlay:rgba(11,11,13,0.6); --bg-tint:rgba(0,0,0,0.03);
  --header-bg:rgba(251,250,246,0.85);
  --border-subtle:#E5E2D8; --border-default:#A39E8C; --border-strong:#6B6960;
  /* Phase Q-1.f (2026-05-06): WCAG AAA レベルへ強化
     旧 secondary #5A5A66 = 6.5:1 (AA pass、視覚的に薄い)
       → 新 #3F3F4A = 9.5:1 (AAA)
     旧 tertiary #6B6B75 = 4.9:1 (AA pass、薄い)
       → 新 #56565F = 7.0:1 (AAA) */
  --text-primary:#1A1A20; --text-secondary:#3F3F4A; --text-tertiary:#56565F;
  --text-disabled:#A39E8C; --text-link:#8F0E18; --text-link-hover:#6D0B13;
  --brand-primary:#B3121D; --brand-primary-hover:#8F0E18; --brand-primary-active:#6D0B13;
  --brand-primary-subtle:#FCE7E7; --brand-accent:#8F0E18; --brand-glow:#B3121D;
  --success:#047857; --success-bg:#D1FAE5;
  --warning:#B45309; --warning-bg:#FEF3C7;
  --error:#B91C1C;   --error-bg:#FEE2E2;
  --info:#1D4ED8;    --info-bg:#DBEAFE;
  --ch-ai:#6D28D9; --ch-semicon:#0E7490; --ch-ev:#047857; --ch-autonomous:#0F766E;
  --ch-energy:#B45309; --ch-realestate:#C2410C; --ch-securities:#A16207;
  --ch-military:#B91C1C; --ch-sanctioned:#475569; --ch-jpev:#BE185D;
}

/* ADR-001: ユーザーが OS でライトを選好し、かつ data-theme を未指定の場合は light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-base:#FBFAF6; --bg-surface:#FFFFFF; --bg-elevated:#F5F2E8;
    --bg-overlay:rgba(11,11,13,0.6); --bg-tint:rgba(0,0,0,0.03);
    --header-bg:rgba(251,250,246,0.85);
    --border-subtle:#E5E2D8; --border-default:#A39E8C; --border-strong:#6B6960;
    /* Phase Q-1.f (2026-05-06): WCAG AAA レベルへ強化 (data-theme 未指定 + OS=light) */
    --text-primary:#1A1A20; --text-secondary:#3F3F4A; --text-tertiary:#56565F;
    --text-disabled:#A39E8C; --text-link:#8F0E18; --text-link-hover:#6D0B13;
    --brand-primary:#B3121D; --brand-primary-hover:#8F0E18; --brand-primary-active:#6D0B13;
    --brand-primary-subtle:#FCE7E7; --brand-accent:#8F0E18; --brand-glow:#B3121D;
    --success:#047857; --success-bg:#D1FAE5;
    --warning:#B45309; --warning-bg:#FEF3C7;
    --error:#B91C1C;   --error-bg:#FEE2E2;
    --info:#1D4ED8;    --info-bg:#DBEAFE;
    --ch-ai:#6D28D9; --ch-semicon:#0E7490; --ch-ev:#047857; --ch-autonomous:#0F766E;
    --ch-energy:#B45309; --ch-realestate:#C2410C; --ch-securities:#A16207;
    --ch-military:#B91C1C; --ch-sanctioned:#475569; --ch-jpev:#BE185D;
  }
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg-base); color:var(--text-primary);
  font-family:'Inter','Noto Sans JP','Hiragino Sans','Yu Gothic UI',system-ui,sans-serif;
  /* Phase R-123 (2026-05-17): シニア対応のため base 16px → 17px / line-height 1.6 → 1.7
     高齢者視認性 + WCAG AAA 推奨 (1.5 以上)
     html[data-fs="large"] でさらに +2px = 19px 化 (toggle ボタン経由) */
  font-size:17px;
  line-height:1.7;
  transition:background-color 200ms ease, color 200ms ease;
  min-height:100vh;
}
/* シニア向け文字サイズトグル (header の +A ボタンで切替、cookie 'cp_fs=large' で SSR にも反映) */
html[data-fs="large"] body { font-size:19px; line-height:1.75; }
html[data-fs="xlarge"] body { font-size:21px; line-height:1.8; }
/* base 強化後、card-title / kpi-value 等も追従するように rem ベースの拡張も用意 */
html[data-fs="large"] p, html[data-fs="large"] li { font-size:18px; }
html[data-fs="xlarge"] p, html[data-fs="xlarge"] li { font-size:20px; }

img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* Phase R-123: focus-visible を 4px に強化 (キーボード操作可視性、シニア対応) */
:focus-visible {
  outline:4px solid var(--focus-ring, #FBBF24);
  outline-offset:2px;
  border-radius:2px;
}
/* tap target 最低 48px (mobile) — WCAG 2.5.5 / シニア・運動機能配慮 */
@media (max-width: 768px) {
  .btn-md, .btn-sm, button:not(.no-min), [role="button"]:not(.no-min) { min-height:48px; }
  a.cp-nav-link, .pagination a, .pagination span { min-height:48px; min-width:48px; display:inline-flex; align-items:center; justify-content:center; }
}

/* ===== Type Utilities ===== */
.font-serif { font-family:'Source Serif Pro','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif; }
.font-sans  { font-family:'Inter','Noto Sans JP','Hiragino Sans',system-ui,sans-serif; }
.font-mono  { font-family:'JetBrains Mono','Source Code Pro','Menlo',monospace; }
.tabular { font-variant-numeric:tabular-nums; }
.uppercase { text-transform:uppercase; letter-spacing:0.05em; }

/* ===== Layout ===== */
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.container-prose { max-width:720px; margin:0 auto; padding:0 24px; }
.container-wide { max-width:1440px; margin:0 auto; padding:0 24px; }

/* ===== Header ===== */
.header {
  position:sticky; top:0; z-index:200;
  /* WCAG fix (2026-04-27): hardcoded だと prefers-color-scheme:light + data-theme 未指定の時に
     dark バナーのまま残り、text-secondary (light) との contrast が破綻していた */
  background:var(--header-bg); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
.header-inner {
  height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.header-logo {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:20px; font-weight:700;
  color:var(--text-primary); white-space:nowrap;
}
.header-logo-dot { color:var(--brand-primary); }
.header-nav { display:none; gap:4px; }
@media (min-width:880px) { .header-nav { display:flex; } }
.header-nav a {
  padding:8px 12px; font-size:14px; font-weight:500;
  color:var(--text-secondary); border-bottom:2px solid transparent;
  transition:color 120ms, border-color 120ms;
}
.header-nav a:hover { color:var(--text-primary); }
.header-nav a.active { color:var(--text-primary); border-bottom-color:var(--brand-primary); }
.header-actions { display:flex; gap:4px; align-items:center; }

/* Icon button */
.icon-btn {
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text-secondary);
  border-radius:4px; transition:background 120ms, color 120ms;
}
.icon-btn:hover { color:var(--text-primary); background:var(--bg-elevated); }
.icon-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(216,80,79,0.45); }
.hamburger { display:inline-flex; }
@media (min-width:880px) { .hamburger { display:none; } }

/* ===== Footer ===== */
.footer {
  margin-top:96px; border-top:1px solid var(--border-subtle);
  background:var(--bg-surface); padding:64px 0 32px;
}
.footer-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px;
}
.footer h4 {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  color:var(--text-primary); font-size:16px; font-weight:700; margin-bottom:12px;
}
.footer ul { list-style:none; }
.footer li { margin-bottom:8px; }
.footer a {
  color:var(--text-secondary); font-size:14px;
  transition:color 120ms;
}
.footer a:hover { color:var(--brand-accent); }
.footer-brand {
  margin-top:48px; padding-top:24px; border-top:1px solid var(--border-subtle);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center;
}
.footer-brand-text {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  color:var(--text-primary); font-size:16px;
}
.footer-copyright {
  font-family:'JetBrains Mono',monospace;
  font-size:13px; color:var(--text-secondary);
}

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; border:1px solid transparent;
  transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  text-decoration:none;
}
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(216,80,79,0.45); }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-sm { height:32px; padding:0 12px; font-size:12px; border-radius:4px; }
.btn-md { height:40px; padding:0 16px; font-size:14px; border-radius:4px; min-width:44px; }
.btn-lg { height:48px; padding:0 24px; font-size:16px; border-radius:4px; }
.btn-primary { background:var(--brand-primary); color:#FBFAF6; border-color:var(--brand-primary); }
.btn-primary:hover:not(:disabled) { background:var(--brand-primary-hover); border-color:var(--brand-primary-hover); }
.btn-secondary { background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-default); }
.btn-secondary:hover:not(:disabled) { border-color:var(--brand-accent); color:var(--brand-accent); }
.btn-ghost { background:transparent; color:var(--text-primary); }
.btn-ghost:hover:not(:disabled) { background:var(--bg-elevated); }
.btn-danger { background:transparent; color:var(--error); border-color:var(--error); }
.btn-danger:hover:not(:disabled) { background:var(--error); color:#FBFAF6; }

/* ===== Pills ===== */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:999px;
  font-size:11px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
  border:1px solid currentColor;
}
.pill-ai          { color:var(--ch-ai); }
.pill-semicon     { color:var(--ch-semicon); }
.pill-ev          { color:var(--ch-ev); }
.pill-autonomous  { color:var(--ch-autonomous); }
.pill-energy      { color:var(--ch-energy); }
.pill-realestate  { color:var(--ch-realestate); }
.pill-securities  { color:var(--ch-securities); }
.pill-military    { color:var(--ch-military); }
.pill-sanctioned  { color:var(--ch-sanctioned); }
.pill-jpev        { color:var(--ch-jpev); }
.pill-success     { color:var(--success); }
.pill-warning     { color:var(--warning); }
.pill-error       { color:var(--error); }
.pill-info        { color:var(--info); }

/* ===== Card ===== */
.card {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:8px; overflow:hidden;
  transition:border-color 120ms ease, transform 120ms ease, box-shadow 200ms ease;
}
.card:hover { border-color:var(--brand-primary); }

/* Phase R-201 (2026-05-20): Deep Dive プレミアム化 — 一覧でゴールド枠 + シャドウ */
.cp-card--deep-dive {
  position:relative;
  border:2px solid transparent;
  background:
    linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
    linear-gradient(135deg, #b8860b 0%, #d4af37 30%, #fff4c2 50%, #d4af37 70%, #b8860b 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.5),
    0 6px 18px rgba(184,134,11,0.25),
    0 2px 6px rgba(0,0,0,0.08);
  animation:cp-deepdive-pulse 3.5s ease-in-out infinite;
}
.cp-card--deep-dive:hover {
  box-shadow:
    0 0 0 2px rgba(212,175,55,0.7),
    0 14px 36px rgba(184,134,11,0.45),
    0 3px 8px rgba(0,0,0,0.10);
  transform:translateY(-3px);
  animation:none;
}
.cp-card--deep-dive .card-title { font-weight:800; }
@keyframes cp-deepdive-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212,175,55,0.5),
      0 6px 18px rgba(184,134,11,0.25),
      0 2px 6px rgba(0,0,0,0.08);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(212,175,55,0.7),
      0 8px 24px rgba(184,134,11,0.40),
      0 2px 6px rgba(0,0,0,0.10);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-card--deep-dive { animation:none; }
}
@media print {
  .cp-deep-dive-badge { display:none !important; }
  .cp-card--deep-dive { border:1px solid #888 !important; box-shadow:none !important; animation:none; }
}
.card-img {
  aspect-ratio:16/9; background:var(--bg-base);
  background-image:linear-gradient(135deg,var(--bg-elevated),var(--bg-base));
  position:relative; overflow:hidden;
}
.card-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(11,11,13,0.6) 100%);
}
.card-body { padding:20px; }
.card-title {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:18px; font-weight:700; line-height:1.3;
  margin:12px 0 8px; color:var(--text-primary);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card-meta { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-secondary); }

/* KPI Card */
.kpi-card {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:8px; padding:24px;
}
.kpi-label {
  font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.08em;
}
.kpi-value {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:32px; font-weight:700; margin-top:8px;
  font-variant-numeric:tabular-nums; color:var(--text-primary);
}
.kpi-trend { font-family:'JetBrains Mono',monospace; font-size:13px; margin-top:4px; display:flex; align-items:center; gap:6px; }
.kpi-trend-up { color:var(--success); }
.kpi-trend-down { color:var(--error); }

/* ===== Form ===== */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:14px; font-weight:500; color:var(--text-primary); margin-bottom:6px; }
.form-required { color:var(--error); margin-left:4px; }
.form-input, .form-textarea, .form-select {
  width:100%; min-height:44px; padding:10px 12px;
  background:var(--bg-base);
  border:1px solid var(--border-default);
  border-radius:4px;
  color:var(--text-primary); font-family:inherit; font-size:16px;
  transition:border-color 120ms ease, box-shadow 120ms ease;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline:none; border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(216,80,79,0.25);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-tertiary); }
.form-textarea { min-height:120px; padding:10px 12px; resize:vertical; line-height:1.6; }
.form-input.is-invalid { border-color:var(--error); }
.form-help { font-size:13px; color:var(--text-tertiary); margin-top:6px; }
.form-error { font-size:13px; color:var(--error); margin-top:6px; }
.form-select {
  appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

/* ===== Hero ===== */
.hero {
  padding:64px 0 48px;
  border-bottom:1px solid var(--border-subtle);
}
.hero-eyebrow {
  font-family:'JetBrains Mono',monospace; font-size:13px;
  color:var(--brand-accent); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px;
}
.hero-title {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:clamp(36px, 5vw, 56px); font-weight:700;
  line-height:1.1; letter-spacing:-0.02em; color:var(--text-primary);
  max-width:900px;
}
.hero-lead {
  margin-top:20px; max-width:720px;
  font-size:18px; line-height:1.7; color:var(--text-secondary);
  border-left:3px solid var(--brand-primary); padding-left:16px;
}
.hero-meta {
  margin-top:24px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-secondary);
}

/* ===== Section ===== */
.section { padding:48px 0; }
.section-header {
  display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px;
  flex-wrap:wrap; gap:16px;
}
.section-title {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:30px; font-weight:700; color:var(--text-primary);
}
.section-link {
  font-size:14px; color:var(--text-link);
  transition:color 120ms;
}
.section-link:hover { color:var(--text-link-hover); }

/* Grid */
.grid-3 { display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.grid-4 { display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid-2 { display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:880px) { .grid-2 { grid-template-columns:2fr 1fr; } }

/* ===== Article body (Reading Mode) ===== */
.article-body {
  font-size:17px; line-height:1.8; color:var(--text-primary);
  max-width:720px; margin:0 auto;
}
.article-body h2 {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:30px; font-weight:700; line-height:1.3;
  margin:48px 0 16px; color:var(--text-primary);
  letter-spacing:-0.01em;
}
.article-body h3 {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:24px; font-weight:600; line-height:1.4;
  margin:36px 0 12px; color:var(--text-primary);
}
.article-body p { margin-bottom:24px; }
.article-body a {
  color:var(--text-link); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.article-body a:hover { color:var(--text-link-hover); }
.article-body blockquote {
  margin:32px 0; padding:16px 24px;
  background:var(--bg-surface); border-left:4px solid var(--brand-primary);
  font-style:italic; color:var(--text-secondary);
}
.article-body ul, .article-body ol { margin:24px 0 24px 32px; }
.article-body li { margin-bottom:8px; }
.article-body img { margin:32px 0; border-radius:8px; }
.article-body code {
  background:var(--bg-elevated); padding:2px 8px; border-radius:4px;
  font-family:'JetBrains Mono',monospace; font-size:0.9em; color:var(--brand-accent);
}

/* ===== Breadcrumb (legacy) ===== */
.breadcrumb {
  display:flex; gap:8px; align-items:center;
  font-size:13px; color:var(--text-tertiary); flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;
}
.breadcrumb a { color:var(--text-secondary); transition:color 120ms; }
.breadcrumb a:hover { color:var(--text-primary); }
.breadcrumb-sep { color:var(--text-tertiary); }

/* ===== Breadcrumb v3 (Phase R-42 統一) ===== */
.cp-breadcrumb{
  width:100%;
  margin:0; padding:0;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13px; color:var(--text-tertiary);
  /* モバイル横スクロール: 4-5 階層でも overflow せず 1 行で完結 */
  overflow-x:auto;
  scrollbar-width:none;     /* Firefox */
  -ms-overflow-style:none;  /* IE */
}
.cp-breadcrumb::-webkit-scrollbar{ display:none; }
.cp-breadcrumb-list{
  list-style:none; margin:0; padding:0;
  display:inline-flex; align-items:center;
  gap:8px;
  white-space:nowrap;
  min-width:max-content;
}
.cp-breadcrumb-item{
  display:inline-flex; align-items:center;
  flex:0 0 auto;
  min-height:24px;
}
.cp-breadcrumb-link{
  color:var(--text-secondary);
  text-decoration:none;
  transition:color 120ms ease, text-decoration-color 120ms ease;
  text-decoration-line:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  padding:2px 0;
}
.cp-breadcrumb-link:hover,
.cp-breadcrumb-link:focus-visible{
  color:var(--text-primary);
  text-decoration-color:var(--brand-accent, #E88585);
}
.cp-breadcrumb-current{
  color:var(--text-primary);
  font-weight:600;
  /* 最後の項目だけは折り返し許容 (デスクトップで横長タイトル時) */
  white-space:normal;
  /* ただし overflow-x:auto コンテナ内なので flex shrink で nowrap 維持 */
  max-width:100%;
}
.cp-breadcrumb-sep{
  color:var(--text-tertiary);
  user-select:none;
  font-size:14px; line-height:1;
  flex:0 0 auto;
}

/* タッチデバイス向けタッチターゲット */
@media (hover: none) and (pointer: coarse){
  .cp-breadcrumb-link{ min-height:32px; padding:6px 0; display:inline-flex; align-items:center; }
}

/* スマホ (≤640px) — 横スクロール + 末尾フェード */
@media (max-width: 640px){
  .cp-breadcrumb{
    font-size:12px;
    padding-bottom:4px;          /* スクロール時の影空間 */
    /* 右端に淡い fade を出してスクロール可能なことを示唆 */
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  .cp-breadcrumb-list{ gap:6px; padding-right:18px; }
  .cp-breadcrumb-current{ font-weight:700; }
}

/* 印刷時はパンくず非表示 (静的 PDF 化対応) */
@media print{
  .cp-breadcrumb{ display:none; }
}

/* ===== Citation ===== */
.citation-list {
  margin-top:48px; padding:24px;
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:8px;
}
.citation-list h3 {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:18px; font-weight:700; margin-bottom:16px;
  color:var(--text-primary);
}
.citation-list ol { list-style:decimal; padding-left:24px; }
.citation-list li {
  margin-bottom:12px; font-size:14px; color:var(--text-secondary);
}
.citation-list a { color:var(--text-link); }
.citation-list a:hover { color:var(--text-link-hover); }

/* ===== Tabs ===== */
.tablist { display:flex; gap:0; border-bottom:1px solid var(--border-subtle); overflow-x:auto; }
.tab {
  padding:12px 16px; font-size:14px; font-weight:500;
  color:var(--text-secondary); background:transparent; border:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color 120ms, border-color 120ms;
}
.tab:hover { color:var(--text-primary); }
.tab[aria-selected="true"] { color:var(--text-primary); border-bottom-color:var(--brand-primary); }
.tab:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--brand-glow); border-radius:4px; }

/* ===== Pagination ===== */
.pagination { display:flex; align-items:center; justify-content:center; gap:4px; margin:48px 0; }
.pagination a, .pagination span {
  min-width:40px; height:40px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px; font-size:14px;
  color:var(--text-secondary);
  transition:background 120ms, color 120ms;
}
.pagination a:hover { background:var(--bg-surface); color:var(--text-primary); }
.pagination .current { background:var(--brand-primary); color:#FBFAF6; font-weight:700; }
.pagination .ellipsis { color:var(--text-tertiary); }

/* ===== DB Table ===== */
.db-table-wrapper {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:8px; overflow:hidden; overflow-x:auto;
}
.db-table { width:100%; border-collapse:collapse; min-width:720px; }
.db-table thead { background:var(--bg-elevated); }
.db-table th, .db-table td { padding:12px 16px; text-align:left; }
.db-table th {
  font-size:12px; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.05em; font-weight:600;
  position:sticky; top:0; background:var(--bg-elevated);
}
.db-table tr { border-top:1px solid var(--border-subtle); }
.db-table tbody tr:hover { background:var(--bg-elevated); }
.db-table .num { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.db-row-link { color:var(--text-primary); }
.db-row-link:hover { color:var(--brand-accent); }

/* ===== Filter panel ===== */
.filter-panel {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:8px; padding:20px; margin-bottom:24px;
}
.filter-row {
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  align-items:end;
}

/* ===== Theme toggle ===== */
.theme-toggle-btn {
  background:transparent; border:none; color:inherit;
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px; cursor:pointer;
}
.theme-toggle-btn:hover { background:var(--bg-elevated); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    transition-duration:0.001ms !important;
  }
  html { scroll-behavior:auto; }
}

/* ===== Focus visible ===== */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline:none; box-shadow:0 0 0 3px rgba(216,80,79,0.45);
  border-radius:4px;
}

/* ===== Skip link (a11y) ===== */
.skip-link {
  position:absolute; top:-40px; left:8px; z-index:300;
  background:var(--brand-primary); color:#FBFAF6;
  padding:8px 16px; border-radius:4px; font-weight:600; font-size:14px;
}
.skip-link:focus { top:8px; }

/* ===== Lead text styling =====
   Phase Q-1.f (2026-05-06): contrast 改善 — text-secondary (#A0A0A8/dark, #5A5A66/light) は
   薄すぎて lead 文として視認性低下。text-primary (#F5F5F6/dark = 13.6:1, #1A1A20/light = 16:1)
   に変更し WCAG AAA レベルの可読性を確保。 */
.lead {
  font-size:18px; line-height:1.7; color:var(--text-primary);
  border-left:3px solid var(--brand-primary); padding-left:16px;
  margin:24px 0;
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-weight:500;
}

/* ==========================================================================
   Phase 4-C: Reading Mode 強化 (記事詳細 v3 専用)
   ========================================================================== */

/* Article share strip — Web Share API + コピー + SNS */
.cp-share {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin:24px 0;
  padding:16px;
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:8px;
}
.cp-share-label {
  font-family:'JetBrains Mono', monospace;
  font-size:12px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.08em;
  margin-right:8px;
}
.cp-share-btn {
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px; border:1px solid var(--border-subtle);
  background:var(--bg-base); color:var(--text-secondary);
  transition:background 120ms, color 120ms, border-color 120ms;
}
.cp-share-btn:hover { color:var(--brand-accent); border-color:var(--brand-accent); }
.cp-share-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(216,80,79,0.45); }

/* Floating TOC (desktop right-side) */
.cp-toc-floating {
  display:none;
}
@media (min-width:1280px) {
  .cp-toc-floating {
    display:block;
    position:sticky; top:96px;
    width:240px;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    padding:16px;
    background:var(--bg-surface);
    border:1px solid var(--border-subtle);
    border-radius:8px;
    font-size:13px;
  }
  /* 1280px+ では Floating TOC が右側に出るのでインライン目次は隠す */
  .cp-toc-inline {
    display:none;
  }
}
.cp-toc-floating ol {
  list-style:none;
  padding:0; margin:8px 0 0;
}
.cp-toc-floating li { margin-bottom:6px; }
.cp-toc-floating a {
  color:var(--text-secondary);
  display:block;
  padding:4px 8px;
  border-left:2px solid transparent;
  transition:color 120ms, border-color 120ms;
}
.cp-toc-floating a:hover { color:var(--text-primary); border-left-color:var(--brand-accent); }
.cp-toc-floating a.is-active { color:var(--brand-accent); border-left-color:var(--brand-primary); }

.cp-article-grid {
  display:grid; gap:24px;
  grid-template-columns:1fr;
  justify-content:center;
}
@media (min-width:1280px) {
  .cp-article-grid {
    /* 本文 720px + 余白 48px + Floating TOC 240px = 1008px、container 1280px 内に center 配置 */
    grid-template-columns:720px 240px;
    gap:48px;
    justify-content:center;
  }
}

/* Reading progress bar (top of viewport) */
.cp-reading-progress {
  position:fixed; top:0; left:0;
  height:3px; width:0%;
  background:var(--brand-primary);
  z-index:300;
  transition:width 80ms linear;
  pointer-events:none;
}

/* mark (検索ヒット用、search_v3 でも再利用) */
mark.cp-mark {
  background:rgba(216,80,79,0.3);
  color:inherit;
  padding:0 2px;
  border-radius:2px;
}

/* ==========================================================================
   Phase 4-B: 追加コンポーネント (Modal / Drawer / Alert / Toast / Skeleton)
   ========================================================================== */

/* ===== Modal / Dialog (ADR-019) ===== */
.cp-modal-backdrop {
  position:fixed; inset:0; z-index:400;
  background:var(--bg-overlay); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:none;
}
.cp-modal-backdrop.is-open { display:block; }
.cp-modal {
  position:fixed; inset:0; z-index:500;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.cp-modal.is-open { display:flex; }
.cp-modal-dialog {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:12px; padding:24px;
  width:100%; max-width:480px;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.8), 0 8px 10px -6px rgba(0,0,0,0.6);
}
.cp-modal-title {
  font-family:'Source Serif Pro','Noto Serif JP',serif;
  font-size:20px; font-weight:700; color:var(--text-primary);
  margin-bottom:12px;
}
.cp-modal-body { color:var(--text-secondary); font-size:15px; line-height:1.6; margin-bottom:24px; }
.cp-modal-actions { display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
@media (prefers-reduced-motion: no-preference) {
  .cp-modal.is-open .cp-modal-dialog {
    animation:cp-modal-in 200ms cubic-bezier(0.16,1,0.3,1);
  }
  @keyframes cp-modal-in {
    from { opacity:0; transform:translateY(8px) scale(0.97); }
    to   { opacity:1; transform:translateY(0)    scale(1); }
  }
}

/* ===== Drawer (mobile sidebar) (ADR-020) ===== */
.cp-drawer {
  position:fixed; inset-block:0; left:0; z-index:500;
  width:320px; max-width:85vw;
  background:var(--bg-surface); border-right:1px solid var(--border-subtle);
  transform:translateX(-100%);
  transition:transform 200ms cubic-bezier(0.16,1,0.3,1);
  display:flex; flex-direction:column;
}
.cp-drawer.is-open { transform:translateX(0); }
.cp-drawer-header {
  padding:16px; border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between;
}
.cp-drawer-title { font-family:'Source Serif Pro','Noto Serif JP',serif; font-weight:700; color:var(--text-primary); }
.cp-drawer-body { padding:8px; overflow-y:auto; flex:1; }
.cp-drawer-link {
  display:block; padding:12px 16px; border-radius:4px;
  color:var(--text-primary); font-size:15px; min-height:44px;
  display:flex; align-items:center;
  transition:background 120ms;
}
.cp-drawer-link:hover, .cp-drawer-link[aria-current="page"] {
  background:var(--bg-elevated); color:var(--brand-accent);
}

/* ===== Alert (inline page-level) (ADR-023) ===== */
.cp-alert {
  display:flex; gap:12px; padding:16px;
  border-radius:8px; border:1px solid;
  align-items:flex-start;
}
.cp-alert-icon { flex-shrink:0; margin-top:2px; }
.cp-alert-body { flex:1; min-width:0; }
.cp-alert-title { font-weight:600; font-size:15px; }
.cp-alert-message { color:var(--text-secondary); font-size:14px; margin-top:4px; line-height:1.5; }
.cp-alert-dismiss { background:transparent; border:none; color:var(--text-secondary); cursor:pointer; padding:4px; }
.cp-alert-dismiss:hover { color:var(--text-primary); }
.cp-alert-success { background:var(--success-bg); border-color:var(--success); color:var(--success); }
.cp-alert-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
.cp-alert-error   { background:var(--error-bg);   border-color:var(--error);   color:var(--error); }
.cp-alert-info    { background:var(--info-bg);    border-color:var(--info);    color:var(--info); }

/* ===== Toast (transient, top-right) ===== */
.cp-toast-region {
  position:fixed; top:16px; right:16px; z-index:700;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none; max-width:calc(100% - 32px);
}
.cp-toast {
  pointer-events:auto;
  padding:12px 16px; border-radius:8px; border:1px solid;
  box-shadow:0 10px 15px -3px rgba(0,0,0,0.7);
  font-size:14px; max-width:380px;
}
.cp-toast-success { background:var(--success-bg); border-color:var(--success); color:var(--success); }
.cp-toast-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
.cp-toast-error   { background:var(--error-bg);   border-color:var(--error);   color:var(--error); }
.cp-toast-info    { background:var(--info-bg);    border-color:var(--info);    color:var(--info); }
@media (prefers-reduced-motion: no-preference) {
  .cp-toast { animation:cp-toast-in 200ms cubic-bezier(0.16,1,0.3,1); }
  @keyframes cp-toast-in {
    from { opacity:0; transform:translateX(16px); }
    to   { opacity:1; transform:translateX(0); }
  }
}

/* ===== Button loading spinner ===== */
@keyframes cp-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* spinner はアニメ無効化 (静止) */
  .btn svg[style*="cp-spin"] { animation:none !important; }
}

/* ===== Compare FAB + Drawer (Phase 4-E) ===== */
.cp-compare-fab {
  position:fixed; bottom:24px; right:24px; z-index:600;
  width:56px; height:56px; border-radius:9999px;
  background:var(--brand-primary); color:#FBFAF6;
  border:1px solid var(--brand-primary-hover);
  display:none; align-items:center; justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.4);
  cursor:pointer;
  transition:transform 200ms cubic-bezier(0.16,1,0.3,1), background 120ms;
}
.cp-compare-fab.is-visible { display:inline-flex; }
.cp-compare-fab:hover { transform:scale(1.05); background:var(--brand-primary-hover); }
.cp-compare-fab:focus-visible { outline:none; box-shadow:0 10px 25px rgba(0,0,0,0.4), 0 0 0 4px var(--brand-glow); }
.cp-compare-fab-badge {
  position:absolute; top:-4px; right:-4px;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:9999px;
  background:var(--bg-base); color:var(--brand-primary);
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--brand-primary);
}

.cp-compare-toggle {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; min-height:32px;
  background:transparent; border:1px solid var(--border-default);
  border-radius:4px; color:var(--text-secondary);
  font-size:12px; font-weight:500;
  transition:all 120ms;
  cursor:pointer;
}
.cp-compare-toggle:hover { color:var(--text-primary); border-color:var(--brand-accent); }
.cp-compare-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-glow); }
.cp-compare-toggle.is-active {
  background:var(--brand-primary-subtle); color:var(--brand-primary);
  border-color:var(--brand-primary);
}
.cp-compare-toggle.is-active::before { content:'✓ '; }

/* T4.4: お気に入りトグル / 既読 link */
.cp-fav-toggle {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; min-height:28px;
  background:transparent; border:1px solid var(--border-default);
  border-radius:9999px; color:var(--text-secondary);
  font-size:12px;
  transition:all 120ms;
  cursor:pointer;
}
.cp-fav-toggle:hover { color:var(--brand-primary); border-color:var(--brand-primary); }
.cp-fav-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-glow); }
.cp-fav-toggle.is-active {
  background:var(--brand-primary-subtle); color:var(--brand-primary);
  border-color:var(--brand-primary);
}
a.cp-read .card-title, a.cp-read.db-row-link {
  color:var(--text-tertiary) !important;
}
a.cp-read .card-meta::after {
  content:' · 既読';
  color:var(--text-tertiary);
  font-size:11px;
}

/* ==========================================================================
   T2.10: 印刷スタイル (Phase 5b 完成版)
   ========================================================================== */
@media print {
  /* バッジ・装飾系の非表示 */
  .header, .footer, .cp-share, .cp-toc-floating, .cp-toc-inline,
  .cp-compare-fab, .cp-compare-toggle, .cp-fav-toggle, .cp-toast-region,
  .cp-modal, .cp-modal-backdrop, .cp-drawer, .cp-reading-progress,
  .skip-link, .icon-btn, .hamburger {
    display:none !important;
  }

  /* 紙への最適化: 背景は白、文字は黒、リンクは下線のみ */
  body { background:#fff !important; color:#000 !important; }
  .container, .container-prose, .container-wide { max-width:100% !important; padding:0 !important; }
  a { color:#000 !important; text-decoration:underline; }
  a[href]::after { content:" (" attr(href) ")"; font-size:11px; color:#666; word-break:break-all; }
  a[href^="#"]::after, a[href^="javascript:"]::after { content:""; }

  .article-body { font-size:11pt; line-height:1.6; max-width:100% !important; }
  .article-body h2 { page-break-after:avoid; }
  img { max-width:100% !important; page-break-inside:avoid; }
  .pill { border:1px solid #000; color:#000 !important; }
  .card { border:1px solid #ccc; box-shadow:none !important; page-break-inside:avoid; }
  .citation-list { border:1px solid #999; page-break-inside:avoid; }

  /* breadcrumb は要らない */
  .breadcrumb { display:none !important; }
}

.cp-compare-table {
  display:flex; gap:16px; overflow-x:auto;
  padding:8px 0; margin:-8px 0;
  scroll-snap-type:x mandatory;
}
.cp-compare-col {
  flex:0 0 240px;
  background:var(--bg-base);
  border:1px solid var(--border-subtle);
  border-radius:8px;
  padding:16px;
  display:flex; flex-direction:column; gap:8px;
  scroll-snap-align:start;
}
.cp-compare-col-actions { margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:8px; }

/* ===== Skeleton (loading) (ADR-024) ===== */
.cp-skeleton {
  background:var(--bg-elevated);
  border-radius:4px;
  position:relative; overflow:hidden;
}
.cp-skeleton-text  { height:16px; }
.cp-skeleton-title { height:24px; }
.cp-skeleton-card  { aspect-ratio:16/9; }
.cp-skeleton-avatar{ width:40px; height:40px; border-radius:9999px; }
.cp-skeleton-button{ height:40px; width:128px; }
@media (prefers-reduced-motion: no-preference) {
  .cp-skeleton::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, var(--bg-tint), transparent);
    transform:translateX(-100%);
    animation:cp-skeleton-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes cp-skeleton-shimmer {
    100% { transform:translateX(100%); }
  }
}

/* ============================================================
   #3853 (2026-05-18): markdown テーブル (GitHub-flavored)
   news_detail_v3.php の renderProse で生成される `<div class="cp-md-table-wrap"><table class="cp-md-table">`
   - 横幅オーバー時は横 scroll
   - dark / light 両 mode 対応 (CSS variables 経由)
   ============================================================ */
.cp-md-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}
.cp-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.6;
  background: var(--v3-surface, #1A1A21);
  /* #3853-b (2026-05-18): td の color が親継承 (v3-text-secondary 系で薄) でコントラスト不足だった
     ため、テーブル全体に明示的高コントラスト色を設定。背景 #1A1A21 に対し約 15:1 (WCAG AAA) */
  color: #F0F0F4;
}
.cp-md-table th,
.cp-md-table td {
  border: 1px solid var(--v3-border, #2B2B33);
  padding: 0.65rem 0.9rem;
  text-align: left;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
  color: inherit; /* .cp-md-table の高コントラスト color を継承 */
}
.cp-md-table th {
  background: var(--v3-elevated, #23232C);
  font-weight: 600;
  color: #FFFFFF; /* header は最大コントラスト (#FFF on #23232C = 16:1) */
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.cp-md-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}
.cp-md-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF; /* hover で完全白に */
}
.cp-md-table strong,
.cp-md-table b {
  color: #FFFFFF; /* 強調文字は絶対白 (max コントラスト、AAA) */
  font-weight: 700;
}
.cp-md-table em {
  color: inherit;
  font-style: italic;
}
.cp-md-table a {
  color: #9CC8FF; /* link は元 #7BB8FF より明度 +5%、視認性向上 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.cp-md-table a:hover {
  color: #C2DDFF;
}
@media (prefers-color-scheme: light) {
  .cp-md-table { background: #FFFFFF; color: #1A1A21; }
  .cp-md-table th { background: #F0F0F5; color: #000000; }
  .cp-md-table th, .cp-md-table td { border-color: #D8D8E0; }
  .cp-md-table tbody tr:nth-child(even) { background: #F8F8FB; }
  .cp-md-table tbody tr:hover { background: #ECECF1; color: #000000; }
  .cp-md-table strong, .cp-md-table b { color: #000000; }
  .cp-md-table a { color: #1A4FB8; }
  .cp-md-table a:hover { color: #0D2E80; }
}
@media (max-width: 640px) {
  .cp-md-table { font-size: 0.85rem; }
  .cp-md-table th, .cp-md-table td { padding: 0.5rem 0.65rem; }
}