:root {
    --color-night: #071526;
    --color-ocean: #0B3045;
    --color-deep: #04111F;
    --color-sand: #F3DFBF;
    --color-paper: #FFF8EA;
    --color-cream: #F9EEDB;
    --color-sunset: #FF2E92;
    --color-cyan: #2EE3F3;
    --color-violet: #8A2BE2;
    --color-orange: #FFA45B;
    --color-gold: #FFD23F;
    --color-ink: #10202F;
    --color-white: #FFFFFF;
    --color-guide: #5FF0A5;
    --color-matome: #FFE26B;
    /* 影トークン: 既定=ダーク値（暗地で見える黒影＋inset白ハイライトは弱める）。
       ライト値は html[data-theme="light"] で再定義（厚紙ハイライト復活）。
       theme: モード追従（コンテンツ領域の立体感の正本） */
    --shadow-ambient: 0 28px 80px rgba(0, 0, 0, 0.55);
    --shadow-card:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 12px 24px rgba(0, 0, 0, 0.45),
        0 28px 52px rgba(0, 0, 0, 0.35);
    --shadow-deck: 0 24px 0 -16px rgba(0, 0, 0, 0.45), 0 36px 78px rgba(0, 0, 0, 0.5);
    /* ネオンアクリル: 内側カラーリム + 外側グロー */
    --acrylic-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 1px 14px rgba(255, 255, 255, 0.24);
    /* 紙の繊維: 微細な縦線テクスチャ */
    --paper-fiber:
        repeating-linear-gradient(92deg, rgba(7, 21, 38, 0.018) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(0deg, rgba(7, 21, 38, 0.014) 0 1px, transparent 1px 4px);
    --radius-xl: 1.875rem;
    --radius-lg: 1.5rem;
    --radius-md: 1.125rem;
    --max-page: 1280px;
    /* 配信者PR枠の閉じるボタン: カウントダウン秒数（将来 customizer で可変化） */
    --cv-close-delay: 5s;
    /* ヒーローカルーセル ザッピング用 SVGノイズ（feTurbulence pre-render dataURI、軽量・ループ可） */
    --hc-noise: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    --font-display: "Anton", "Zen Kaku Gothic New", system-ui, sans-serif;
    --font-body: "Zen Kaku Gothic New", "Inter", system-ui, sans-serif;
    --font-en: "Inter", "Zen Kaku Gothic New", system-ui, sans-serif;
    --font-mono: "M PLUS 1 Code", ui-monospace, monospace;
    --font-num: "Anton", "Inter", system-ui, sans-serif;

    /* ===== セマンティックテーマトークン（既定=ダーク） =====
       コンテンツ領域はこのトークンだけを参照する。値を html[data-theme="light"] で差し替え2モード化。
       UIシェル/演出（ヘッダー/ドロワー/検索/ヒーローモニタ/記事ヘッダー帯/crew-vision）は
       常時ダーク＝モード非追従なので、これらは生色のまま据え置く。 */
    /* サーフェス（地・器・カード・入力） */
    /* 夜空グラデ + 遠景ネオン玉ボケテクスチャ（光には源がある: 遠景の発光を強ブラー+暗化トーン層で深く沈め「空気」化）。
       上=暗化トーン層（テクスチャを沈める半透明の夜空グラデ）→ 下=テクスチャ画像。fixed(body)でスクロール非追従＝高さ非依存 */
    --surface-page:
        linear-gradient(180deg, rgba(11, 29, 51, 0.90) 0%, rgba(7, 21, 38, 0.93) 55%, rgba(4, 17, 31, 0.95) 100%),
        url("../img/bg-neon-bokeh.webp");
    --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
    --surface-card: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.032));
    --surface-input: rgba(255, 255, 255, 0.06);
    --surface-hover: rgba(255, 255, 255, 0.10);
    /* テキスト（用途別） */
    --text-strong: #f4f9fc;
    --text-muted: rgba(232, 241, 248, 0.72);
    --text-faint: rgba(232, 241, 248, 0.5);
    --text-link: var(--color-cyan);
    --text-placeholder: rgba(232, 241, 248, 0.4);
    /* 線・フォーカス */
    --border-hair: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --focus-ring: var(--color-cyan);
    /* いいね/悪いね（枠+文字色・透明地）: 文字が乗る実地はカード半透明地。
       like=cyanはカード地で9.29でAA余裕。dislikeは生sunset #FF2E92 だとカード地で4.20とAA割れ → 明ピンク #FF5BA8(5.07)へ。ライトは濃色 override */
    --reaction-like: var(--color-cyan);
    --reaction-dislike: #FF5BA8;
}

/* ===== ライトモード: コンテンツ領域トークンを白パステル値に差し替え =====
   （UIシェル/演出は据え置きのためここでは扱わない＝常時ダーク） */
html[data-theme="light"] {
    /* 紙パステルグラデ + 昼の拡散光テクスチャ（光には源がある昼版: 太陽=拡散光源が紙に柔らかく乗る。紫は不使用）。
       上=白パステルのトーン層（テクスチャを沈める半透明グラデ）→ 下=暖色パステル紙テクスチャ。ダークと対称構造 */
    --surface-page:
        linear-gradient(180deg, rgba(255, 246, 228, 0.40) 0%, rgba(255, 248, 234, 0.44) 40%, rgba(247, 226, 204, 0.48) 100%),
        url("../img/bg-paper-warm.webp");
    --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 228, 0.6));
    --surface-card: linear-gradient(160deg, #ffffff, #fff6e4);
    --surface-input: var(--color-white);
    --surface-hover: rgba(16, 32, 47, 0.04);
    --text-strong: var(--color-ink);
    --text-muted: rgba(16, 32, 47, 0.66);
    --text-faint: rgba(16, 32, 47, 0.62);
    --text-link: var(--color-ocean);
    --text-placeholder: rgba(16, 32, 47, 0.4);
    --border-hair: rgba(16, 32, 47, 0.08);
    --border-strong: rgba(16, 32, 47, 0.16);
    /* いいね/悪いね: 白地で生のシアン/ピンクは1.57/3.47とAA未達 → 濃色へ（実測4.91/5.87でAA通過） */
    --reaction-like: #0E7C8B;
    --reaction-dislike: #C2185B;

    /* 影: ライトは厚紙ハイライト＋ネイビー細影を復活 */
    --shadow-ambient: 0 28px 80px rgba(7, 21, 38, 0.16);
    --shadow-card:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(7, 21, 38, 0.06),
        0 1px 2px rgba(7, 21, 38, 0.08),
        0 12px 22px rgba(7, 21, 38, 0.1),
        0 28px 52px rgba(7, 21, 38, 0.12);
    --shadow-deck: 0 24px 0 -16px rgba(7, 21, 38, 0.2), 0 36px 78px rgba(7, 21, 38, 0.22);
}

* {
    box-sizing: border-box;
}

html {
    /* 等比拡縮エンジン スマホ世界: アンカー430で16px (16/430≈3.72vw)。
       下限11px(極小端末の安全弁)、上限30px(~806pxで到達=768帯内は純粋拡縮)。
       全要素remがこのrootに比例し、レイアウトを保ったまま画面幅で等比拡縮する。 */
    font-size: clamp(11px, 3.72vw, 30px);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--surface-page);
    /* グラデ暗化層=要素全体に1枚 / テクスチャ画像=720px四方タイルで縦に繰り返す（均質なので継ぎ目が溶ける）。
       fixedは使わない（スマホのアドレスバー伸縮で背景がカクつくため）。背景はコンテンツと一緒にスクロールする */
    background-repeat: no-repeat, repeat;
    background-size: auto, 720px 720px;
    color: var(--text-strong);
    font-family: "Zen Kaku Gothic New", "M PLUS 1 Code", system-ui, sans-serif;
    font-feature-settings: "palt" 1;
    /* UIはボタンとして扱う: タップ時に指が少し動いても文字が範囲選択されない。
       読ませる文章（記事本文・コメント本文）だけ下で user-select を戻す。 */
    -webkit-user-select: none;
    user-select: none;
    /* タップ時の青いフラッシュ（モバイル）も消す */
    -webkit-tap-highlight-color: transparent;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(16, 32, 47, 0.05) 0 1px, transparent 2px);
    background-size: 3px 3px;
    mask-image: linear-gradient(180deg, black, transparent 90%);
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible {
    outline: 2px solid var(--color-sunset);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

img {
    max-width: 100%;
}

/* === ヘッダー: ピアノブラック前面パネル（黒鏡面ガラス×黒ベゼル） === */
/* 構成: [≡メニュー] [VIブランド中央] [🔍検索] の3カラム */
/* 質感の肝: 上端=鏡面ハイライト1本、地=上が照り下が深黒の縦グラデ、縁=黒ベゼル＋冷たい照り一滴 */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 2.25rem 1fr 2.25rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background:
        linear-gradient(180deg, rgba(24, 28, 33, 0.82) 0%, rgba(10, 12, 15, 0.86) 46%, rgba(4, 5, 7, 0.92) 100%);
    color: var(--color-white);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 7px 16px rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 rgba(46, 227, 243, 0.1),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ≡ ハンバーガー: 36x36、艶ある黒キーキャップ、hoverでシアン発光 */
.site-header__menu {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 0.5625rem;
    background: linear-gradient(180deg, rgba(38, 42, 48, 0.9), rgba(12, 14, 17, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.site-header__menu:hover {
    border-color: rgba(46, 227, 243, 0.4);
    background: linear-gradient(180deg, rgba(44, 50, 57, 0.92), rgba(16, 19, 23, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(46, 227, 243, 0.22);
}

.site-header__menu-lines {
    position: relative;
    display: block;
    width: 1rem;
    height: 0.0875rem;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 1px;
    transition: background 180ms ease;
}

.site-header__menu-lines::before,
.site-header__menu-lines::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1rem;
    height: 0.0875rem;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 1px;
    transition: background 180ms ease;
}

.site-header__menu-lines::before { top: -0.375rem; }
.site-header__menu-lines::after  { top:  0.375rem; }

.site-header__menu:hover .site-header__menu-lines,
.site-header__menu:hover .site-header__menu-lines::before,
.site-header__menu:hover .site-header__menu-lines::after {
    background: var(--color-cyan);
}

/* VI ブランド: 中央寄せ、控えめ */
.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    justify-self: center;
    min-width: 0;
}

.site-header__name {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
}

/* 🔍 検索: ハンバーガーと同じ艶ある黒キーキャップ */
.site-header__search {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 0.5625rem;
    background: linear-gradient(180deg, rgba(38, 42, 48, 0.9), rgba(12, 14, 17, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.site-header__search svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header__search:hover {
    border-color: rgba(46, 227, 243, 0.4);
    background: linear-gradient(180deg, rgba(44, 50, 57, 0.92), rgba(16, 19, 23, 0.94));
    color: var(--color-cyan);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(46, 227, 243, 0.22);
}

.site-header__search:focus-visible,
.site-header__menu:focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 3px;
}

/* === 左ドロワー: ピアノブラック前面パネル、ヘッダーと同じ黒鏡面言語 === */
/* 隠しcheckbox: 画面外固定で focus 時のスクロール抑止 */
.site-drawer__toggle {
    position: fixed;
    top: 0;
    left: 0;
    width: 0.0625rem;
    height: 0.0625rem;
    opacity: 0;
    pointer-events: none;
}

/* バックドロップ: 開閉時に背景を暗くする */
.site-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(2, 3, 4, 0.66);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 240ms ease;
}

.site-drawer__toggle:checked ~ .site-drawer__backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ドロワー本体: 左から滑り出る。地=黒鏡面の縦グラデ、左端に鏡面ハイライト1本、右縁=黒ベゼル＋冷たい照り一滴 */
.site-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(14rem, 72vw);
    z-index: 200;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(20, 23, 27, 0.96) 0%, rgba(10, 12, 15, 0.96) 40%, rgba(4, 5, 7, 0.97) 100%);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    border-right: 1px solid rgba(0, 0, 0, 0.7);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        inset -1px 0 0 rgba(46, 227, 243, 0.08),
        16px 0 40px rgba(0, 0, 0, 0.6);
    transform: translateX(-102%);
    transition: transform 280ms cubic-bezier(0.4, 0.05, 0.25, 1);
}

.site-drawer__toggle:checked ~ .site-drawer {
    transform: translateX(0);
}

/* ドロワー上部: VIマーク mini + MENU タイトル + × */
.site-drawer__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.site-drawer__head-title {
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
}

.site-drawer__close {
    margin-left: auto;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 0.5625rem;
    background: linear-gradient(180deg, rgba(38, 42, 48, 0.9), rgba(12, 14, 17, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font-family: var(--font-en);
    font-size: 1rem;
    line-height: 1;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.site-drawer__close:hover {
    border-color: rgba(46, 227, 243, 0.4);
    background: linear-gradient(180deg, rgba(44, 50, 57, 0.92), rgba(16, 19, 23, 0.94));
    color: var(--color-white);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(46, 227, 243, 0.22);
}

/* メニューリスト */
.site-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0 1.5rem;
}

.site-drawer__item--feature {
    margin: 0 0 0.375rem;
    border-bottom: 1px solid rgba(46, 227, 243, 0.1);
    padding-bottom: 0.375rem;
}

.site-drawer__link {
    display: grid;
    grid-template-columns: 2.375rem 1fr 0.875rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6875rem 1rem;
    color: rgba(255, 255, 255, 0.78);
    transition: background 180ms ease, color 180ms ease;
}

.site-drawer__link:hover {
    background: linear-gradient(90deg, rgba(46, 227, 243, 0.1), transparent 70%);
    color: var(--color-white);
}

.site-drawer__link:focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: -2px;
}

.site-drawer__icon {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 0.5625rem;
    background: linear-gradient(180deg, rgba(34, 38, 43, 0.85), rgba(11, 13, 16, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.72);
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.site-drawer__icon svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-drawer__link:hover .site-drawer__icon {
    border-color: rgba(46, 227, 243, 0.42);
    background: rgba(46, 227, 243, 0.06);
    color: var(--color-cyan);
    box-shadow: 0 0 12px rgba(46, 227, 243, 0.18);
}

.site-drawer__text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.site-drawer__kicker {
    font-family: var(--font-en);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: rgba(46, 227, 243, 0.6);
    text-transform: uppercase;
}

.site-drawer__label {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
}

.site-drawer__desc {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.site-drawer__arrow {
    font-family: var(--font-en);
    font-size: 0.875rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.32);
    transition: transform 180ms ease, color 180ms ease;
}

.site-drawer__link:hover .site-drawer__arrow {
    color: var(--color-cyan);
    transform: translateX(3px);
}

/* HOME 強調: ピンク寄りのアクセント */
.site-drawer__item--feature .site-drawer__icon {
    border-color: rgba(255, 46, 146, 0.36);
    background: rgba(255, 46, 146, 0.06);
    color: rgba(255, 205, 225, 0.86);
}

.site-drawer__item--feature .site-drawer__kicker {
    color: rgba(255, 205, 225, 0.7);
}

.site-drawer__item--feature .site-drawer__link:hover .site-drawer__icon {
    border-color: rgba(255, 46, 146, 0.6);
    background: rgba(255, 46, 146, 0.12);
    color: #FFD3E5;
    box-shadow: 0 0 14px rgba(255, 46, 146, 0.28);
}

/* === 右検索パネル: 左ドロワーと対称、右から滑り出るピアノブラック === */
.site-search__toggle {
    position: fixed;
    top: 0;
    left: 0;
    width: 0.0625rem;
    height: 0.0625rem;
    opacity: 0;
    pointer-events: none;
}

.site-search__backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(2, 3, 4, 0.66);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 240ms ease;
}

.site-search__toggle:checked ~ .site-search__backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* 右から滑り出る。地=黒鏡面の縦グラデ、右端に鏡面ハイライト1本、左縁=黒ベゼル＋冷たい照り一滴 */
.site-search {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(14rem, 72vw);
    z-index: 200;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(20, 23, 27, 0.96) 0%, rgba(10, 12, 15, 0.96) 40%, rgba(4, 5, 7, 0.97) 100%);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    border-left: 1px solid rgba(0, 0, 0, 0.7);
    box-shadow:
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        inset 1px 0 0 rgba(46, 227, 243, 0.08),
        -16px 0 40px rgba(0, 0, 0, 0.6);
    transform: translateX(102%);
    transition: transform 280ms cubic-bezier(0.4, 0.05, 0.25, 1);
}

.site-search__toggle:checked ~ .site-search {
    transform: translateX(0);
}

.site-search__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.site-search__head-title {
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
}

.site-search__close {
    margin-left: auto;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 0.5625rem;
    background: linear-gradient(180deg, rgba(38, 42, 48, 0.9), rgba(12, 14, 17, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 2px 4px rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font-family: var(--font-en);
    font-size: 1rem;
    line-height: 1;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.site-search__close:hover {
    border-color: rgba(46, 227, 243, 0.4);
    background: linear-gradient(180deg, rgba(44, 50, 57, 0.92), rgba(16, 19, 23, 0.94));
    color: var(--color-white);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(46, 227, 243, 0.22);
}

/* Coming Soon 中身: アイコン＋ラベルを縦に置く控えめなプレースホルダ */
.site-search__body {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 3.5rem 1.25rem;
    text-align: center;
}

.site-search__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 0.875rem;
    background: linear-gradient(180deg, rgba(34, 38, 43, 0.85), rgba(11, 13, 16, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    color: rgba(46, 227, 243, 0.7);
}

.site-search__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-search__kicker {
    font-family: var(--font-en);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: rgba(46, 227, 243, 0.6);
    text-transform: uppercase;
}

.site-search__title {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
}

.site-search__desc {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

.site-footer {
    margin-top: 5rem;
    padding: 2rem 1.075rem;
    background: linear-gradient(180deg, var(--color-deep), var(--color-night));
    color: rgba(255, 255, 255, 0.62);
    border-top: 1px solid rgba(243, 223, 191, 0.12);
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.site-main,
.portal-home {
    min-height: 60vh;
}

.portal-home {
    display: grid;
    gap: 1.6875rem;
    width: min(100%, var(--max-page));
    margin: 0 auto;
    padding: 1.075rem;
    overflow: hidden;
}

.section-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-hair);
    border-radius: 999px;
    padding: 0.375rem 0.6875rem;
    background: var(--surface-panel);
    color: var(--text-strong);
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.section-kicker::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--color-sunset);
}

.recommended-list {
    display: grid;
    gap: 0.75rem;
}

.portal-section {
    display: grid;
    scroll-margin-top: 5.5rem;
    /* 見出しと中身の隙間は「あなたにおすすめ」(.recommended-feed) と同じ12pxに揃える */
    gap: 0.75rem;
}

/* セクションの囲い: 「あなたにおすすめ」(.recommended-feed) と同じカードで
   各セクションを1つの塊にグルーピングし、背景の上に浮かせる（レイヤー感） */
.recommended-feed,
.portal-section {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-hair);
    padding: 1rem;
    background: var(--surface-panel);
    box-shadow: var(--shadow-ambient);
}

.section-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.section-heading--stacked {
    align-items: start;
    justify-content: start;
    max-width: 51.25rem;
}

.section-heading h2 {
    margin: 0.625rem 0 0;
    color: var(--text-strong);
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.section-heading p,
.section-heading__note {
    max-width: 36.25rem;
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.8;
}

.section-link {
    border: 1px solid var(--border-hair);
    border-radius: 999px;
    padding: 0.5625rem 0.875rem;
    background: var(--surface-panel);
    color: var(--text-link);
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    box-shadow: var(--shadow-card);
    transform: rotate(-1.2deg);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.section-link:hover {
    transform: rotate(-0.4deg) translateY(-2px);
    box-shadow:
        0 0 0 1px var(--border-strong),
        var(--shadow-card);
}

.section-link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* 記事一覧への主導線（強度A）: 最新記事グリッド下の太いCTA。
   記事はサイト本体なので、視線の終点に「次の行動」を大きく置く。
   見た目は「サンセット台紙の上に置かれた白いマット書類」。
   ネオン色は聖域モニター専売。CTAは無彩色のまま、サイズ・余白・
   コントラスト・配置で視認性を上げる（見落とし防止）。 */
.section-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 1.5rem 1.75rem;
    /* 太いフチ＝重要導線の明示。カードの薄枠と一線を画す */
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-panel);
    color: var(--text-strong);
    font-family: var(--font-en);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-decoration: none;
    /* 台紙から浮く: 上端の紙厚ハイライト＋細線影＋やや強めの落ち影で存在感 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 1px rgba(7, 21, 38, 0.06),
        0 12px 26px rgba(7, 21, 38, 0.14),
        0 26px 46px rgba(7, 21, 38, 0.10);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

/* 内側のもう一本の細罫線＝書類の額縁（二重枠）。導線をカチッと囲う */
.section-cta::before {
    content: "";
    position: absolute;
    inset: 0.25rem;
    border: 1px solid var(--border-strong);
    border-radius: calc(var(--radius-lg) - 0.375rem);
    pointer-events: none;
    transition: border-color 180ms ease;
}

.section-cta__label {
    /* 日本語ラベルは本文フォント側で読みやすく。大きめ太めで主導線らしく */
    position: relative;
    font-family: var(--font-body);
    font-size: 1.0625rem;
}

/* 矢印: 紙に印刷された黒インクの線記号。色は足さず形で「進む」を示す */
.section-cta__arrow {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    transition: transform 180ms ease;
}

.section-cta__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* hover: インク面に反転＝「押せる」を最も強く示す。書類がひと押し沈む感 */
.section-cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #16202f, #0e1722);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 3px rgba(7, 21, 38, 0.1),
        0 18px 34px rgba(7, 21, 38, 0.26),
        0 36px 62px rgba(7, 21, 38, 0.18);
}

.section-cta:hover::before {
    border-color: rgba(255, 255, 255, 0.22);
}

.section-cta:hover .section-cta__arrow {
    transform: translateX(4px);
}

.section-cta:focus-visible {
    outline: 2px solid var(--color-sunset);
    outline-offset: 3px;
}

.article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
}

.article-card {
    position: relative;
    overflow: hidden;
    display: grid;
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-strong);
    box-shadow: var(--shadow-card);
    transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
}

.article-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-ambient);
    transform: translateY(-6px);
}

.article-card__media {
    position: relative;
    display: grid;
    min-height: 11rem;
    background: var(--surface-input);
    place-items: center;
}

.article-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 11rem;
    object-fit: cover;
}

.article-card__placeholder {
    /* サムネ無し時の透かし装飾。意図的に極薄＝WCAG例外（DESIGN_BRIEF 5節）。theme追従 */
    color: var(--text-placeholder);
    opacity: 0.25;
    font-family: var(--font-en);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.category-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    padding: 0.3125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    box-shadow: 0 1px 3px rgba(7, 21, 38, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
}

.category-badge--official { background: var(--color-cyan); color: #002A33; }
.category-badge--guide { background: #5FF0A5; color: #0E3A22; }
.category-badge--matome { background: #FFE26B; color: #5C3B00; }

.article-card__body {
    display: grid;
    gap: 0.3125rem;
    padding: 1.0625rem;
}

.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.article-card__date {
    color: var(--text-faint);
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.article-card__title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.9em;
    margin: 0;
    color: var(--text-strong);
    font-size: 1.0625rem;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.005em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* カード全体を1リンクに（stretched-link）。a の入れ子を作らず擬似要素で全面を覆う */
.article-card__link {
    color: inherit;
    text-decoration: none;
}

.article-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.article-card:focus-within {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.article-card__link:focus-visible {
    outline: none;
}

.article-card--rail {
    grid-template-columns: 4.75rem 1fr;
    min-height: 6.625rem;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.article-card--rail .article-card__media {
    min-height: 100%;
}

.article-card--rail .article-card__body {
    gap: 0.4375rem;
    padding: 0.8125rem;
}

.article-card--rail .article-card__title {
    min-height: auto;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.article-card--rail .article-card__meta {
    display: flex;
}

.article-card--rail .category-badge {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.4375rem;
    font-size: 0.625rem;
}

.article-card--compact .article-card__media {
    min-height: 8.875rem;
}

.article-card--compact .article-card__media img {
    min-height: 8.875rem;
}

.article-card--compact .article-card__title {
    font-size: 0.9375rem;
}

.empty-message {
    color: var(--text-muted);
    background: var(--surface-panel);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.65;
    box-shadow: var(--shadow-card);
}

.coming-soon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}

.coming-soon-card {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 10.875rem;
    align-content: end;
    gap: 0.625rem;
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-lg);
    padding: 1.125rem;
    background: var(--surface-card);
    color: var(--text-strong);
    box-shadow: var(--shadow-card);
}

.coming-soon-card__index {
    position: absolute;
    top: 0.625rem;
    left: 0.875rem;
    /* 連番透かし装飾。意図的に極薄＝WCAG例外。theme追従 */
    color: var(--text-placeholder);
    opacity: 0.2;
    font-family: var(--font-num);
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
}

.coming-soon-card__label {
    width: fit-content;
    border: 1.5px solid #C9216D;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5625rem;
    background: rgba(255, 246, 228, 0.92);
    color: #C9216D;
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.coming-soon-card strong {
    color: var(--text-strong);
    font-size: 1.1875rem;
    line-height: 1.35;
    text-wrap: balance;
}

.single-article-page,
.archive-page {
    display: grid;
    gap: 1.75rem;
    width: min(100%, var(--max-page));
    margin: 0 auto;
    padding: 1.125rem;
}

.single-article,
.archive-page__header {
    width: min(100%, 60rem);
    margin: 0 auto;
}

.single-article {
    display: grid;
    gap: 1.5rem;
    border-radius: 2.125rem;
    padding: 1.5rem;
    background: var(--surface-card);
    box-shadow: var(--shadow-ambient);
}

/* 記事ヘッダー: 囲いカードにせず素組み（小ピル→大タイトル→日付）。コンテンツ領域=2モード追従 */
.single-article__header {
    display: grid;
    gap: 0.875rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-hair);
}

.single-article__header h1,
.archive-page__header h1 {
    margin: 0;
    font-size: 2.125rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.single-article__header h1 {
    color: var(--text-strong);
}

.single-article__header .category-badge {
    position: static;
    width: fit-content;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 800;
}

.article-meta time {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.article-meta__icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
}

.article-meta__modified {
    color: var(--text-faint);
}

.single-article__thumbnail {
    overflow: hidden;
    border-radius: 1.625rem;
}

.single-article__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

.single-article__content {
    font-size: 1.0625rem;
    line-height: 1.9;
    /* 記事本文は読者がコピー・引用できるよう選択可に戻す（body の選択抑止を上書き） */
    -webkit-user-select: text;
    user-select: text;
}

/* コメント本文も読者が引用・コピーできるよう選択可に戻す（body の選択抑止を上書き） */
.comment-text {
    -webkit-user-select: text;
    user-select: text;
}

/* ===== 本文 見出し（派手な自動装飾はしない。サイズ差・太字・余白で区切りを示すだけ） ===== */
.single-article__content :is(h2, h3, h4) {
    color: var(--text-strong);
    font-weight: 900;
    line-height: 1.4;
}

.single-article__content :is(h2.wp-block-heading, h2:not([class])) {
    margin: 2em 0 0.7em;
    font-size: 1.375rem;
}

.single-article__content :is(h3.wp-block-heading, h3:not([class])) {
    margin: 1.7em 0 0.6em;
    font-size: 1.1875rem;
}

.single-article__content :is(h4.wp-block-heading, h4:not([class])) {
    margin: 1.4em 0 0.5em;
    font-size: 1.0625rem;
}

.single-article__content p {
    margin: 0 0 1.4em;
}

.single-article__content a {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-color: rgba(46, 227, 243, 0.5);
    text-underline-offset: 3px;
}

.single-article__content ul,
.single-article__content ol {
    margin: 0 0 1.4em;
    padding-left: 1.5em;
}

.single-article__content li {
    margin-bottom: 0.5em;
}

.single-article__content blockquote {
    margin: 1.6em 0;
    padding: 0.875rem 1.25rem;
    border-left: 4px solid var(--color-cyan);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(46, 227, 243, 0.08);
    color: var(--text-strong);
}

.single-article__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* ===== 本文に来うる全要素を「枠内に収める＋等比拡縮」する防波堤 =====
   思想: ライターは何も気にせず書く。埋め込み・テーブル・コード・長URL等を
   レイアウト内に収めて拡縮させるのはテーマ側の責務。font-sizeは全rem固定（vw無し）
   のためroot連動で両世界とも自動拡縮する（PC override不要）。 */

/* 長い語・URL・無分割文字列をはみ出させず折り返す。
   min-width:0 はグリッド/フレックス子の「内容で膨らむ」を止める（pre等の横スクロールを効かせる肝） */
.single-article__content {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 見出し h5/h6 も階層を補完（h2-h4 と地続きのサイズ感） */
.single-article__content :is(h5.wp-block-heading, h5:not([class])) {
    margin: 1.2em 0 0.5em;
    font-size: 1rem;
    color: var(--text-strong);
    font-weight: 900;
    line-height: 1.4;
}
.single-article__content :is(h6.wp-block-heading, h6:not([class])) {
    margin: 1.2em 0 0.5em;
    font-size: 0.9375rem;
    color: var(--text-muted);
    font-weight: 900;
    line-height: 1.4;
}

/* 埋め込み（YouTube/Twitter等のiframe・動画）: 幅100%＋16:9でレスポンシブ。
   width/height属性の固定px（560×315等）を打ち消し、枠内で拡縮させる */
.single-article__content :is(iframe, video, embed, object) {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md);
    margin: 1.6em 0;
}
/* WordPress埋め込みブロック（.wp-block-embed__wrapper 内の iframe）も同様に */
.single-article__content .wp-block-embed {
    margin: 1.6em 0;
}
.single-article__content .wp-block-embed iframe {
    margin: 0;
}

/* テーブル: 列が多くても枠内で横スクロール（本文全体ははみ出させない）。
   figure.wp-block-table のラッパーに加え、裸の <table>（旧エディタ/コピペ）も
   table 自体を display:block + overflow-x:auto にして単独で安全化する */
.single-article__content :is(figure.wp-block-table, .wp-block-table) {
    margin: 1.6em 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.single-article__content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.6;
}
.single-article__content :is(th, td) {
    padding: 0.5em 0.75em;
    border: 1px solid var(--border-strong);
    text-align: left;
    vertical-align: top;
}
.single-article__content th {
    background: var(--surface-hover);
    font-weight: 900;
    white-space: nowrap;
}

/* コードブロック: 長い行は枠内で横スクロール（本文全体ははみ出させない） */
.single-article__content pre {
    margin: 1.6em 0;
    padding: 1em 1.25em;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* コードブロックは両モード共通で常時ダーク（コードは暗地が読みやすい・GitHub等と同様）。theme非追従 */
    background: var(--color-ink);
    color: #E6F2F8;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
}
.single-article__content pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    white-space: pre;
}
/* インラインコード: 折り返し可能・控えめな下地 */
.single-article__content :not(pre) > code {
    padding: 0.1em 0.4em;
    background: var(--surface-input);
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.9em;
    overflow-wrap: break-word;
}

/* figure（画像キャプション・埋め込みの外枠）: はみ出させない */
.single-article__content figure {
    margin: 1.6em 0;
    max-width: 100%;
}
.single-article__content figcaption {
    margin-top: 0.6em;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}

/* 区切り線 hr */
.single-article__content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--border-hair);
}

.source-card {
    display: grid;
    gap: 0.25rem;
    border: 1px solid var(--border-hair);
    border-left: 4px solid var(--color-cyan);
    border-radius: var(--radius-md);
    padding: 0.875rem 1.125rem;
    background: rgba(46, 227, 243, 0.10);
    color: var(--text-strong);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.source-card:hover {
    transform: translateY(-2px);
    background: rgba(46, 227, 243, 0.12);
    box-shadow: 0 10px 24px rgba(7, 21, 38, 0.12);
}

.source-card__label {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--text-faint);
}

.source-card__url {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-link);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-page__header {
    display: grid;
    gap: 0.875rem;
}

.archive-page__description {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

.page-numbers {
    border-radius: 999px;
    padding: 0.5rem 0.8125rem;
    background: rgba(7, 21, 38, 0.08);
    font-weight: 900;
}

.page-numbers.current {
    background: var(--color-night);
    color: var(--color-white);
}

.app-home {
    gap: 1.125rem;
    padding: 0.875rem;
    /* ヘッダー(sticky)とヒーローモニタの隙間をわずかに広げる（上端のみ。左右下は据え置き） */
    padding-top: 1.25rem;
}


/* 隠しcheckbox: ハンドル位置に fixed 配置することで focus 時のページ上端スクロールを抑止 */
.crew-vision__toggle {
    position: fixed;
    right: 0;
    bottom: clamp(190px, 22vh, 240px);
    width: 0.0625rem;
    height: 0.0625rem;
    opacity: 0;
    pointer-events: none;
}

/* === 配信者PR 右下スライドモニタ === */
/* オーバーレイ: viewport 右下に固定（モニタ底をボトムから120px浮かせて下部CTA空間を確保） */
/* 開閉: 右端のドロワーハンドル（80sプラ + 垂直リブ）から多段キーフレームでスライドイン/アウト */

.crew-vision {
    position: fixed;
    right: 14px; /* ハンドルの幅分だけ左へ */
    bottom: 120px; /* モニタの底をボトムから120px浮かせる（下部CTA/モバイルナビ空間を確保） */
    z-index: 90;
    width: min(calc(100vw - 1.875rem), 26.25rem);
    transform-origin: 100% 100%;
    will-change: transform, opacity;
    animation: crew-vision-deploy 820ms cubic-bezier(0.5, 0.05, 0.3, 1.05) both;
    pointer-events: auto;
}

/* 展開: 機械的シーケンス（右外からの多段スライドイン）
   0%→26%   : 画面右外から第1段階の伸びでスライドイン
   26%→38%  : ガコンと一瞬停止
   38%→72%  : 第2段階で画面内へ
   72%→82%  : 定位置でガコッと固定
   82%→92%  : わずかにオーバーシュート
   92%→100% : 最終位置に戻る
*/
@keyframes crew-vision-deploy {
    0%   { transform: translateX(120%); opacity: 0; visibility: visible; }
    14%  { opacity: 1; }
    26%  { transform: translateX(54%); }
    38%  { transform: translateX(54%); }
    72%  { transform: translateX(0); }
    82%  { transform: translateX(-1.2%); }
    92%  { transform: translateX(0.4%); }
    100% { transform: translateX(0); opacity: 1; }
}

/* 収納: 機械的シーケンス（逆順、やや速め） */
@keyframes crew-vision-retract {
    0%   { transform: translateX(0); opacity: 1; visibility: visible; }
    14%  { transform: translateX(-1.4%); }
    48%  { transform: translateX(54%); opacity: 1; }
    58%  { transform: translateX(54%); }
    85%  { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; visibility: hidden; }
}

.crew-vision__screen {
    position: relative;
    overflow: hidden;
    /* モバイル基準のモニタ比率(16:9)を全幅で固定。中身は子のabsolute配置で重ねる(縦に積まない=比率維持) */
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(46, 227, 243, 0.38);
    border-radius: 1.375rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 14px),
        radial-gradient(circle at 16% 12%, rgba(255, 46, 146, 0.45), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(46, 227, 243, 0.32), transparent 34%),
        linear-gradient(135deg, rgba(7, 21, 38, 0.96), rgba(13, 47, 71, 0.94) 58%, rgba(76, 25, 118, 0.92));
    color: var(--color-white);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 -16px 40px rgba(7, 21, 38, 0.42),
        0 0 0 8px rgba(7, 21, 38, 0.18),
        0 24px 58px rgba(7, 21, 38, 0.34);
}

.crew-vision__screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
    opacity: 0.3;
    pointer-events: none;
}

.crew-vision__screen::after {
    content: "";
    position: absolute;
    inset: -40% -20% auto;
    height: 72%;
    background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.24) 42%, transparent 58%);
    transform: translateX(-28%) rotate(-8deg);
    pointer-events: none;
}

/* 広告リンク: 枠全体(画像＋オーバーレイ)を1つのクリック領域にする。飛び先は1クリエイティブ1つ */
.crew-vision__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    border-radius: 1.5rem;
}

/* サムネ(WPアイキャッチ)が主役。get_the_post_thumbnail が出す <img> にこのclassが付く */
.crew-vision__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像なし時のフォールバック。崩さずブランド色のグラデで埋める */
.crew-vision__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(7, 21, 38, 0.96), rgba(76, 25, 118, 0.92));
}

/* 流れるテロップ帯: 配信画面下部を控えめに流れる煽り文(可変)。画像本体は隠さない。
   文言=sponsorタイトル。画像を作り直さずテロップだけ差し替えられる運用が肝 */
.crew-vision__ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    height: 1.625rem;
    display: flex;
    align-items: center;
    background: rgba(5, 6, 10, 0.62);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    border-top: 1px solid rgba(46, 227, 243, 0.32);
}

.crew-vision__ticker-track {
    display: inline-flex;
    flex: none;
    white-space: nowrap;
    will-change: transform;
    animation: cv-marquee 18s linear infinite;
}

.crew-vision__ticker-item {
    padding: 0 1.5em;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* 同一テキスト2連を-50%流して先頭に戻す=継ぎ目なしループ */
@keyframes cv-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 動きが苦手な人向け(酔い対策): アニメ停止し先頭固定 */
@media (prefers-reduced-motion: reduce) {
    .crew-vision__ticker-track {
        animation: none;
    }
}

/* 広告明示: 枠の上辺からわずかに生やす小タブ。画像(焼き込みのLIVE等)と絶対に被らず、
   PR表記が独立して見える。右端の縦書きSPONSOREDタブと同じ黒ガラス×ネオンで世界観統一 */
.crew-vision__sponsored-tab {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    padding: 0.1875rem 0.75rem 0.25rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(46, 227, 243, 0.34);
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 -3px 10px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.74);
    font-family: var(--font-en);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    pointer-events: none;
}

/* 閉じるボタン: ページロード時1回だけカウントダウンが起動。収納→再展開ではリセットしない */
.crew-vision__close {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 3;
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(7, 21, 38, 0.52);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    animation:
        cv-close-style var(--cv-close-delay) step-end forwards,
        cv-close-unlock var(--cv-close-delay) step-end forwards;
}

.crew-vision__close::before {
    content: "×";
    animation: cv-close-countdown var(--cv-close-delay) step-end forwards;
}

@keyframes cv-close-countdown {
    0%   { content: "5"; }
    20%  { content: "4"; }
    40%  { content: "3"; }
    60%  { content: "2"; }
    80%  { content: "1"; }
    100% { content: "×"; }
}

@keyframes cv-close-style {
    0% {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(7, 21, 38, 0.42);
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.875rem;
    }
    100% {
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(7, 21, 38, 0.52);
        color: rgba(255, 255, 255, 0.86);
        font-size: 1.125rem;
        cursor: pointer;
    }
}

@keyframes cv-close-unlock {
    0%, 99.99% { pointer-events: none; }
    100% { pointer-events: auto; }
}

/* ドロワーハンドル: 画面右端、モニタ中央あたりに常駐。引き出しの取手として機能。
   ロード時1回だけ --cv-close-delay 秒間ロック（半透明＋クリック不可）→ 満了で復帰 */
.crew-vision-tab {
    position: fixed;
    right: 0;
    bottom: clamp(160px, 24vh, 200px); /* モニタの中央右に揃える */
    z-index: 95;
    display: inline-flex;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    animation: cv-handle-unlock var(--cv-close-delay) step-end forwards;
}

@keyframes cv-handle-unlock {
    0%, 99.99% { pointer-events: none; cursor: default; }
    100% { pointer-events: auto; cursor: pointer; }
}

@keyframes cv-handle-plate-lock {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* 黒透明ガラスタブ × 縦書きSPONSORED — サイトと色被らない、高級感。
   ロード時1回だけ opacity 0.4 → 1.0 で「ロック中→解除」を視覚表示 */
.crew-vision-tab__plate {
    position: relative;
    overflow: hidden;
    width: 1.375rem;
    height: 8.75rem;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-right: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 1px 0 0 rgba(255, 255, 255, 0.08),
        -4px 6px 18px rgba(0, 0, 0, 0.42),
        -8px 0 22px rgba(0, 0, 0, 0.25);
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
    animation: cv-handle-plate-lock var(--cv-close-delay) step-end forwards;
}

.crew-vision-tab:hover .crew-vision-tab__plate,
.crew-vision-tab:focus-visible .crew-vision-tab__plate {
    transform: translateX(-2px);
    background: rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 1px 0 0 rgba(255, 255, 255, 0.1),
        -5px 7px 22px rgba(0, 0, 0, 0.5),
        -10px 0 28px rgba(0, 0, 0, 0.3);
}

/* 縦書きラベル: SPONSORED */
.crew-vision-tab__plate::before {
    content: "SPONSORED";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-en);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.62);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    pointer-events: none;
}

/* 引き出せそう感: 下端に小さなドラッグハンドル風ドット3つ */
.crew-vision-tab__plate::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 0.1875rem;
    height: 0.875rem;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 50% 1.5px, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.4px),
        radial-gradient(circle at 50% 7px, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.4px),
        radial-gradient(circle at 50% 12.5px, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.4px);
    pointer-events: none;
}

.crew-vision__toggle:checked ~ .crew-vision {
    animation: crew-vision-retract 620ms cubic-bezier(0.55, 0.05, 0.35, 1) both;
    pointer-events: none;
}

/* === ヒーロー: VHSチャンネル切替カルーセル (CONTRACT準拠) === */
/* 閾値: 768px の1本（CONTRACT.md レスポンシブの原則） / スマホ正本: 流体 / 768px以上: PCレイアウト */
/* 構造: フレーム筐体 + ステータス帯 + 画面エリア(暗灰、画像/本文が主役) + 装飾レイヤー(走査線/ビネット/ノイズ) */
/* 派手な色はフレーム外周・ステータス帯・ビネット4隅にだけ置く（画像の裏には塗らない） */

.hero-carousel {
    position: relative;
    display: grid;
    gap: 0.625rem;
}

.hero-carousel__radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.0625rem;
    height: 0.0625rem;
    opacity: 0;
    pointer-events: none;
}

/* フレーム筐体 = crew-vision と同じフローティングモニター。
   overflow:visible で上辺からタブを生やす（クリップは screen 側に移譲）。
   シアン縁・外周リング・浮遊影で「宙に浮いた1台のモニター」に */
.hero-carousel__frame {
    position: relative;
    overflow: visible;
    border-radius: 1.5rem;
    border: 1px solid rgba(46, 227, 243, 0.38);
    /* 暗背景: 角丸内側の隙間からサイト背景が透けるのを防ぐ（screen の角丸との段差を埋める） */
    background: #0a0c10;
    box-shadow:
        0 0 0 8px rgba(7, 21, 38, 0.18),
        0 24px 58px rgba(7, 21, 38, 0.34),
        0 0 40px rgba(255, 46, 146, 0.1),
        0 0 60px rgba(46, 227, 243, 0.08);
    animation: hc-flicker 3.7s steps(48) infinite;
}

@keyframes hc-flicker {
    0%, 92%, 100% { filter: brightness(1); }
    93% { filter: brightness(0.96); }
    94% { filter: brightness(1.02); }
    95% { filter: brightness(0.94); }
    96% { filter: brightness(1); }
}

/* ステータスタブ = crew-vision のタブと同じ生やし方。フレーム上辺から
   わずかに生やす黒ガラス×ネオン。画像エリア(screen)は一切隠さない。
   CH窓は左、ON AIR は右。これでヒーローも「浮いたモニター」言語に統一 */
/* ステータスタブ = crew-vision の SPONSORED タブと完全に同じトーン
   （黒ガラス・白74%・控えめ）。色で浮かせず世界観に統一 */
.hero-carousel__tab {
    /* screen(z-index:1) より背面に置く。上にはみ出た部分だけ見え、
       付け根（下部）は screen の裏に隠れて「画面の奥からタブが生えて見える」 */
    z-index: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.75rem 0.25rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(46, 227, 243, 0.34);
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 -3px 10px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.74);
    font-family: var(--font-en);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

/* CHタブのスタック: フレーム左上に固定。中の各CHタブは重ねて、アクティブだけ表示。
   z-index:0 で screen(z-index:1) の背面に置き、付け根を画面裏へ隠す（ON AIR と統一） */
.hero-carousel__chtabs {
    position: absolute;
    top: -0.875rem;
    left: 1rem;
    z-index: 0;
}

.hero-carousel__tab--ch {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 160ms ease;
}

.hero-carousel__tab--ch::before {
    content: "CH " attr(data-ch);
}

/* チャンネル切替に追従: K番目のラジオが選択されたら K番目のCHタブを表示 */
#hero-ch-1:checked ~ .dashboard-board__hero .hero-carousel__tab--ch:nth-child(1),
#hero-ch-2:checked ~ .dashboard-board__hero .hero-carousel__tab--ch:nth-child(2),
#hero-ch-3:checked ~ .dashboard-board__hero .hero-carousel__tab--ch:nth-child(3),
#hero-ch-4:checked ~ .dashboard-board__hero .hero-carousel__tab--ch:nth-child(4),
#hero-ch-5:checked ~ .dashboard-board__hero .hero-carousel__tab--ch:nth-child(5) {
    opacity: 1;
}

.hero-carousel__tab--air {
    position: absolute;
    top: -0.875rem;
    right: 1rem;
}

/* ON AIR のアナログな灯り（白熱球/ネオン管のように滲んで呼吸する光）。
   LEDの硬い点光源ではなく、輪郭がぼやけて空気ににじみ出る発光体。
   暖色(白熱の芯＋オレンジ寄りの赤)で、不規則に揺らぐ＝エモい。 */
.hero-carousel__tab--air::before {
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    /* 芯は小さく、外へ向けて急速に滲ませる（硬いエッジを作らない） */
    background:
        radial-gradient(circle at 50% 45%, #fff4ec 0 18%, #ff8a3d 42%, #f23410 72%, rgba(176, 20, 2, 0) 100%);
    /* 滲みを主役に: 大きめの多層グローで「ぼうっと光る空気」を作る */
    box-shadow:
        0 0 4px rgba(255, 120, 60, 0.85),
        0 0 9px rgba(242, 52, 16, 0.6),
        0 0 18px rgba(242, 40, 10, 0.35);
    /* わずかなblurで輪郭の硬さを溶かす＝アナログの曖昧さ */
    filter: blur(0.4px);
    animation: hc-onair-pulse 3.3s ease-in-out infinite;
    will-change: opacity, box-shadow, filter;
}

/* アナログの揺らぎ: 一定周期の機械的呼吸ではなく、白熱球のように
   大きくゆっくり明滅しつつ、不規則な微チラつきを混ぜる（非対称キー）。 */
@keyframes hc-onair-pulse {
    0% {
        opacity: 0.62;
        box-shadow: 0 0 3px rgba(255, 110, 55, 0.5), 0 0 6px rgba(242, 40, 10, 0.2);
        filter: blur(0.4px) brightness(0.8);
    }
    17% {
        opacity: 0.9;
        filter: blur(0.4px) brightness(1.05);
    }
    24% { /* 微チラつき（不規則） */
        opacity: 0.7;
        filter: blur(0.5px) brightness(0.92);
    }
    44% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(255, 130, 70, 0.95), 0 0 12px rgba(242, 52, 16, 0.6), 0 0 22px rgba(242, 40, 10, 0.34);
        filter: blur(0.3px) brightness(1.25);
    }
    63% {
        opacity: 0.84;
        filter: blur(0.45px) brightness(1.0);
    }
    71% { /* もう一段の揺れ戻し */
        opacity: 0.95;
        filter: blur(0.4px) brightness(1.1);
    }
    100% {
        opacity: 0.62;
        box-shadow: 0 0 3px rgba(255, 110, 55, 0.5), 0 0 6px rgba(242, 40, 10, 0.2);
        filter: blur(0.4px) brightness(0.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-carousel__tab--air::before { animation: none; }
}

/* 画面エリア: 主役の絵が出る場所。frame が overflow:visible になったので
   クリップは screen 側で担う（border-radius で角を丸め overflow:hidden で切る） */
.hero-carousel__screen {
    position: relative;
    overflow: hidden;
    /* タブ(z-index:0)より前面に出し、タブの付け根を screen 裏に隠す */
    z-index: 1;
    /* crew-vision と同じ 16:9 固定。高さ直指定をやめ流体な固定比率に統一 */
    aspect-ratio: 16 / 9;
    background: #0a0c10;
    border-radius: 1.4375rem;
}

.hero-carousel__track {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 480ms cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* チャンネル切替: ラジオ nth-of-type で track translateX */
#hero-ch-1:checked ~ .dashboard-board__hero .hero-carousel__track { transform: translateX(0%); }
#hero-ch-2:checked ~ .dashboard-board__hero .hero-carousel__track { transform: translateX(-100%); }
#hero-ch-3:checked ~ .dashboard-board__hero .hero-carousel__track { transform: translateX(-200%); }
#hero-ch-4:checked ~ .dashboard-board__hero .hero-carousel__track { transform: translateX(-300%); }
#hero-ch-5:checked ~ .dashboard-board__hero .hero-carousel__track { transform: translateX(-400%); }

/* スライド: スマホ正本 = 縦積み（上メディア200px / 下本文） */
.hero-carousel__slide {
    flex: 0 0 100%;
    height: 100%;
}

/* 記事0件プレースホルダ用スライド。通常スライドは .hero-carousel__slide-link が
   絶対配置(media/body)の基準だが、空スライドはリンクを持たないため slide 自身を基準にする */
.hero-carousel__slide--empty {
    position: relative;
}

/* スライド全体を1リンクに（crew-vision思想）。CTAボタンは廃止しスペース節約。
   矢印/ドット/ラジオは z-index で上に出るため競合しない */
/* 全面サムネ: 記事画像を枠いっぱいに敷き、タイトルは下部グラデに重ねる
   （crew-vision overlay 方式）。どんなサムネでもタイトルが読める */
.hero-carousel__slide-link {
    position: relative;
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.hero-carousel__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #050608;
}

.hero-carousel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-carousel__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.hero-carousel__media--placeholder {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 12px, transparent 12px 24px),
        linear-gradient(135deg, #0d1118, #060709);
    color: rgba(46, 227, 243, 0.4);
    font-family: var(--font-en);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

/* タイトル帯: 画像下部に重なるグラデオーバーレイ。縦に積まず画像の上に被せる */
.hero-carousel__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    gap: 0.5rem;
    padding: 3.225rem 1.125rem 1rem;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(5, 6, 10, 0.88));
}

.hero-carousel__title {
    font-size: 1.3975rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* タイトル可読性のためリンクhover時に微かに持ち上げる（CTAボタンは廃止） */
.hero-carousel__slide-link:hover .hero-carousel__title {
    color: #fff;
    text-shadow: 0 0 18px rgba(46, 227, 243, 0.4);
}

/* 走査線: 通常時は透明。常時ドリフトは廃止し、たまに一瞬だけロールして
   旧式モニターの映像の乱れを出す（__noiseの11.7sと互いにずらし不規則感を出す） */
.hero-carousel__scanlines {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.32) 0 1px,
        transparent 1px 3px
    );
    opacity: 0;
    animation: hc-glitch-roll 17.3s linear infinite;
}

@keyframes hc-glitch-roll {
    0%, 90%, 100% { opacity: 0; transform: translateY(0); }
    90.4% { opacity: 0.5;  transform: translateY(-2px); }
    91%   { opacity: 0.16; transform: translateY(3px); }
    91.6% { opacity: 0.42; transform: translateY(-1px); }
    92.2% { opacity: 0;    transform: translateY(0); }
}

/* ビネット: 4隅にピンク/シアンのコーナーグロー（CRT曲面感） */
.hero-carousel__vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(255, 46, 146, 0.28), transparent 65%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(46, 227, 243, 0.24), transparent 65%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(46, 227, 243, 0.18), transparent 65%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255, 46, 146, 0.2), transparent 65%),
        radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
    mix-blend-mode: screen;
    opacity: 0.65;
}

/* 砂嵐ノイズ層: 通常時は透明。常時砂嵐は廃止し、別周期(11.7s)で
   たまに一瞬だけ砂嵐＋横ずれフラッシュを出す（GPU軽量） */
.hero-carousel__noise {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: var(--hc-noise);
    background-size: 180px 180px;
    background-repeat: repeat;
    opacity: 0;
    mix-blend-mode: screen;
    animation: hc-glitch-flash 11.7s linear infinite;
}

@keyframes hc-glitch-flash {
    0%, 94%, 100% { opacity: 0;    transform: translateX(0);    background-position: 0 0; }
    94.4% { opacity: 0.24; transform: translateX(-4px); background-position: -30px 10px; }
    94.9% { opacity: 0.10; transform: translateX(5px);  background-position: 20px -20px; }
    95.4% { opacity: 0.26; transform: translateX(-2px); background-position: -15px 25px; }
    96%   { opacity: 0;    transform: translateX(0);    background-position: 0 0; }
}

/* 動きが苦手な人向け(酔い対策): ヒーローのグリッチを停止 */
@media (prefers-reduced-motion: reduce) {
    .hero-carousel__scanlines,
    .hero-carousel__noise {
        animation: none;
        opacity: 0;
    }
}

/* ザッピング オーバーレイ層: 通常時 opacity 0、切替時に CRT 電源OFF/ON 演出を画像とは独立に表現 */
.hero-carousel__zap {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(180deg, transparent 49.4%, rgba(255, 255, 255, 0.92) 49.6%, rgba(255, 255, 255, 0.92) 50.4%, transparent 50.6%),
        var(--hc-noise),
        #000;
    background-size: 100% 100%, 180px 180px, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat;
    background-blend-mode: screen, multiply, normal;
    transform-origin: center center;
}

@keyframes hc-noise-shift {
    0%   { background-position: 0 0; }
    16%  { background-position: -38px 12px; }
    32%  { background-position: 22px -28px; }
    48%  { background-position: -16px 40px; }
    64%  { background-position: 44px 18px; }
    82%  { background-position: -32px -22px; }
    100% { background-position: 12px 30px; }
}

/* VCR風 左右矢印ボタン: 画面内端、半透明黒×シアン極細縁 */
/* スマホ正本: 36×52、768px以上で 40×64 に拡大 */
.hero-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 3.25rem;
    border: 1px solid rgba(46, 227, 243, 0.42);
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.hero-carousel__arrow--prev { left: 0.5rem; }
.hero-carousel__arrow--next { right: 0.5rem; }

.hero-carousel__arrow svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-carousel__arrow:hover,
.hero-carousel__arrow:focus-visible {
    opacity: 0.95;
    background: rgba(7, 21, 38, 0.72);
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    box-shadow: 0 0 18px rgba(46, 227, 243, 0.38);
}

.hero-carousel__arrow:focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 2px;
}

.hero-carousel__arrow:active {
    transform: translateY(-50%) scale(0.92);
}

/* ナビ: Ch.NN ドット（フレーム外、下部） */
.hero-carousel__nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 0.5rem;
}

.hero-carousel__dot {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(7, 21, 38, 0.42);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.hero-carousel__dot:hover {
    border-color: rgba(46, 227, 243, 0.5);
    color: rgba(255, 255, 255, 0.78);
}

#hero-ch-1:checked ~ .dashboard-board__hero .hero-carousel__nav .hero-carousel__dot:nth-of-type(1),
#hero-ch-2:checked ~ .dashboard-board__hero .hero-carousel__nav .hero-carousel__dot:nth-of-type(2),
#hero-ch-3:checked ~ .dashboard-board__hero .hero-carousel__nav .hero-carousel__dot:nth-of-type(3),
#hero-ch-4:checked ~ .dashboard-board__hero .hero-carousel__nav .hero-carousel__dot:nth-of-type(4),
#hero-ch-5:checked ~ .dashboard-board__hero .hero-carousel__nav .hero-carousel__dot:nth-of-type(5) {
    border-color: rgba(46, 227, 243, 0.85);
    background: rgba(46, 227, 243, 0.14);
    color: var(--color-cyan);
    box-shadow: 0 0 14px rgba(46, 227, 243, 0.32);
}

/* === 切替時ザッピング（850ms、ブラウン管 電源OFF→無信号→電源ON） === */
/* screen 本体は揺れ＋skewのみ（画像は縮ませない）、zap オーバーレイで暗転・輝線・広がりを担う */
.hero-carousel__frame.glitching .hero-carousel__screen {
    animation: hc-screen-shake 850ms steps(24);
}

.hero-carousel__frame.glitching .hero-carousel__zap {
    animation: hc-zap 850ms steps(24) forwards;
}

.hero-carousel__frame.glitching .hero-carousel__noise {
    animation: hc-noise-burst 850ms steps(24), hc-noise-shift 0.18s steps(6) infinite;
}

.hero-carousel__frame.glitching .hero-carousel__scanlines {
    animation: hc-scanline-burst 850ms steps(24);
}

/* screen の揺れ＋水平歪み（CRTのロール） */
@keyframes hc-screen-shake {
    0%   { transform: translateX(0) skewX(0); }
    5%   { transform: translateX(-10px) skewX(2deg); }
    10%  { transform: translateX(12px) skewX(-3deg); }
    14%  { transform: translateX(-6px) skewX(1.4deg); }
    18%  { transform: translateX(8px) skewX(-1deg); }
    24%  { transform: translateX(-2px) skewX(0.4deg); }
    100% { transform: translateX(0) skewX(0); }
}

/* zap オーバーレイ本体: 黒overlay → 真っ黒 → 中央輝線残し → 広がって消える */
@keyframes hc-zap {
    0%   { opacity: 0; transform: scaleY(1); }
    6%   { opacity: 0.35; transform: scaleY(0.85); }
    14%  { opacity: 0.8; transform: scaleY(0.55); }
    22%  { opacity: 1; transform: scaleY(0.25); }
    34%  { opacity: 1; transform: scaleY(0.08); }
    44%  { opacity: 1; transform: scaleY(0.02); } /* 中央に細い輝線だけ残る */
    52%  { opacity: 1; transform: scaleY(0.02); }
    60%  { opacity: 0.92; transform: scaleY(0.12); } /* 広がり始め */
    72%  { opacity: 0.6; transform: scaleY(0.5); }
    84%  { opacity: 0.28; transform: scaleY(0.85); }
    100% { opacity: 0; transform: scaleY(1); }
}

/* 常時うっすら→切替時に砂嵐ピーク */
@keyframes hc-noise-burst {
    0%   { opacity: 0.16; }
    10%  { opacity: 0.55; }
    22%  { opacity: 0.95; }
    44%  { opacity: 1; }
    60%  { opacity: 0.75; }
    72%  { opacity: 0.45; }
    100% { opacity: 0.16; }
}

/* 走査線: 切替時は激しい縦ロール（rolling distortion） */
@keyframes hc-scanline-burst {
    0%   { opacity: 0.5; background-position: 0 0; }
    14%  { opacity: 0.95; background-position: 0 -24px; }
    24%  { opacity: 0.7; background-position: 0 16px; }
    44%  { opacity: 0.85; background-position: 0 -18px; }
    60%  { opacity: 0.6; background-position: 0 10px; }
    100% { opacity: 0.5; background-position: 0 24px; }
}

.recommended-feed {
    display: grid;
    gap: 0.75rem;
}

.app-section-label {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
}

/* kicker ピル + 見出しを1行にまとめる軽量ヘッド（全セクション共通） */
.app-section-label__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.app-section-label span {
    flex: none;
    width: fit-content;
    border-radius: 999px;
    padding: 0.25rem 0.5625rem;
    background: var(--surface-hover);
    color: var(--text-muted);
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.app-section-label strong {
    color: var(--text-strong);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.dashboard-board {
    scroll-margin-top: 5.5rem;
}

/* ===== ダッシュボード盤面（hero + 目的別メニューを1枚のベントーに統合） =====
   モバイル正本: hero フル幅 → 目的別カードを2列bento（旧 quick-deck モバイルを踏襲）
   ※ .dashboard-board の grid 宣言は上部（ヒーロー定義の前）に集約済み。ここは grid-area 割付のみ */
.dashboard-board {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "hero    hero"
        "article article"
        "youtube youtube"
        "board   recruit"
        "twitch  pr"
        "wiki    discord";
}

.dashboard-board__hero { grid-area: hero; }

.quick-deck-card--article { grid-area: article; }
.quick-deck-card--youtube { grid-area: youtube; }
.quick-deck-card--board { grid-area: board; }
.quick-deck-card--recruit { grid-area: recruit; }
.quick-deck-card--twitch { grid-area: twitch; }
.quick-deck-card--pr { grid-area: pr; }
.quick-deck-card--wiki { grid-area: wiki; }
.quick-deck-card--discord { grid-area: discord; }

/* カード共通体 — 紙質感ベース、統一の角丸・余白・タイポ・影 */
.quick-deck-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.375rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border-hair);
    border-radius: 1.375rem;
    padding: 0.875rem;
    min-height: 6.625rem;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    transition:
        transform 220ms cubic-bezier(.2,.8,.2,1.08),
        box-shadow 220ms ease,
        border-color 180ms ease,
        filter 220ms ease;
}

.quick-deck-card:hover {
    transform: translateY(-2px);
    border-color: currentColor;
    box-shadow: var(--shadow-deck);
}

.quick-deck-card:active {
    transform: translateY(1px) scale(0.995);
    filter: brightness(0.97) saturate(1.05);
    transition-duration: 34ms;
}

/* タイポ — 統一 */
.quick-deck-card__kicker {
    position: relative;
    z-index: 2;
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: currentColor;
}

.quick-deck-card__label {
    position: relative;
    z-index: 2;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.quick-deck-card__desc {
    position: relative;
    z-index: 2;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ワンポイント SVG — 統一規範 */
.quick-deck-card__art {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 1;
    width: 3.5rem;
    height: 3.5rem;
    color: currentColor;
    opacity: 0.62;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1.08), opacity 220ms ease;
}

.quick-deck-card__art svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.quick-deck-card:hover .quick-deck-card__art {
    transform: translateY(-2px) rotate(-2deg);
    opacity: 0.9;
}

/* アクセントカラー — kicker文字＋SVGアートの currentColor。
   既定=ダーク地で読める明色。ライト地用の濃色は html[data-theme="light"] で上書き。
   theme追従（暗地で沈む濃色を避けつつカテゴリ識別色を保つ） */
.quick-deck-card--article  { color: #FF5FA3; }
.quick-deck-card--youtube  { color: #FF6B6B; }
.quick-deck-card--board    { color: #6FA8DC; }
.quick-deck-card--recruit  { color: #F0A93B; }
.quick-deck-card--twitch   { color: #B388FF; }
.quick-deck-card--pr       { color: #E0A060; }
.quick-deck-card--wiki     { color: #6E92E8; }
.quick-deck-card--discord  { color: #8A95F5; }

html[data-theme="light"] .quick-deck-card--article  { color: #C9216D; }
html[data-theme="light"] .quick-deck-card--youtube  { color: #D62D2D; }
html[data-theme="light"] .quick-deck-card--board    { color: #2A4F7A; }
html[data-theme="light"] .quick-deck-card--recruit  { color: #B86A00; }
html[data-theme="light"] .quick-deck-card--twitch   { color: #7B3FF2; }
html[data-theme="light"] .quick-deck-card--pr       { color: #B36B2A; }
html[data-theme="light"] .quick-deck-card--wiki     { color: #1B3A8A; }
html[data-theme="light"] .quick-deck-card--discord  { color: #4451C9; }

/* ===== ヒーロー級 / 小役のサイズ階層 — スマホ正本 ===== */
/* 記事カードはスマホでは YouTube と同格（高さ・ラベル・アート）。
   主役扱いの特大階層は PC（@media 768）側だけで復元する */
.quick-deck-card--article {
    min-height: 8rem;
    padding: 1rem;
}

.quick-deck-card--youtube {
    min-height: 8rem;
    padding: 1rem;
}

/* 記事・YouTube はフル幅カードでスカスカに見えるため、中身(文字・アイコン)を
   一回り大きくして間を持たせる。小カード(2列bento)には波及させない=この2枚限定 */
.quick-deck-card--article .quick-deck-card__label,
.quick-deck-card--youtube .quick-deck-card__label {
    font-size: 2.15rem;
}
.quick-deck-card--article .quick-deck-card__kicker,
.quick-deck-card--youtube .quick-deck-card__kicker {
    font-size: 0.8125rem;
}
.quick-deck-card--article .quick-deck-card__desc,
.quick-deck-card--youtube .quick-deck-card__desc {
    font-size: 0.875rem;
}
.quick-deck-card--article .quick-deck-card__art,
.quick-deck-card--youtube .quick-deck-card__art {
    width: 4.5rem;
    height: 4.5rem;
}

/* ===== 枠意匠 — カード毎に1つだけ、控えめに ===== */

/* 記事 — 内側二重罫線（額縁風） */
.quick-deck-card--article::before {
    content: "";
    position: absolute;
    inset: 0.5rem;
    border: 1px solid currentColor;
    border-radius: 1rem;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

/* YouTube更新 — 下端の細い帯 */
.quick-deck-card--youtube::before {
    content: "";
    position: absolute;
    left: 1.125rem;
    right: 1.125rem;
    bottom: 0;
    height: 0.1875rem;
    background: currentColor;
    opacity: 0.78;
    border-radius: 999px 999px 0 0;
    pointer-events: none;
    z-index: 1;
}

/* 掲示板 — 左上角の小さい折れ */
.quick-deck-card--board::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.375rem;
    height: 1.375rem;
    background: linear-gradient(135deg, currentColor 0 50%, transparent 50%);
    opacity: 0.16;
    pointer-events: none;
    z-index: 1;
}

/* 募集 — 切手のミシン目 */
.quick-deck-card--recruit {
    border-style: dashed;
    border-color: rgba(184, 106, 0, 0.42);
}
.quick-deck-card--recruit::before {
    content: "";
    position: absolute;
    inset: 0.375rem;
    border: 1px dashed currentColor;
    border-radius: 1.125rem;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

/* Twitch紹介 — ベゼル外枠 */
.quick-deck-card--twitch::before {
    content: "";
    position: absolute;
    inset: 0.3125rem;
    border: 1.5px solid currentColor;
    border-radius: 1.125rem;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

/* 配信者PR — 下に小さな支柱 */
.quick-deck-card--pr::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.5rem;
    width: 0.1875rem;
    height: 0.75rem;
    background: currentColor;
    opacity: 0.38;
    transform: translateX(-50%);
    border-radius: 0 0 2px 2px;
    pointer-events: none;
    z-index: 0;
}

/* Wiki/DB — 左端に本のリブ */
.quick-deck-card--wiki::before {
    content: "";
    position: absolute;
    top: 0.875rem;
    bottom: 0.875rem;
    left: 0;
    width: 0.375rem;
    background:
        linear-gradient(180deg,
            currentColor 0 4%,
            transparent 4% 6%,
            currentColor 6% 48%,
            transparent 48% 52%,
            currentColor 52% 94%,
            transparent 94% 96%,
            currentColor 96% 100%);
    opacity: 0.22;
    pointer-events: none;
    z-index: 1;
}

/* Discord — 右下の小さな吹き出し尻尾 */
.quick-deck-card--discord::before {
    content: "";
    position: absolute;
    right: 1.375rem;
    bottom: -0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    background: currentColor;
    opacity: 0.28;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
    z-index: 1;
}

/* .recommended-feed の囲いは .portal-section と共通化済み（上部にまとめた）。
   ここでは recommended 固有の調整のみ残す（現状なし） */

.recommended-feed .article-card--rail {
    min-height: 6.75rem;
}

/* ===== Article Feed（記事一覧：雑誌フィード型） ===== */

/* カテゴリ絞り込みチップ */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5625rem;
    width: min(100%, 60rem);
    margin: 0 auto;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.5625rem 1.0625rem;
    background: var(--surface-panel);
    color: var(--text-strong);
    font-weight: 900;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.category-chip:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}

/* アクティブ＝黒インク反転（ネオングラデは使わない。CTAと同じインク思想） */
.category-chip.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, #16202f, #0e1722);
    color: var(--color-white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 22px rgba(7, 21, 38, 0.22);
}

/* フィード本体（縦1列。front-page の .article-grid とは別物） */
.article-feed {
    display: grid;
    gap: 1rem;
    width: min(100%, 60rem);
    margin: 0 auto;
}

/* default カードを横並び（サムネ左・本文右）にしてフィードらしく */
.article-feed .article-card--default {
    grid-template-columns: 8.25rem 1fr;
}

.article-feed .article-card--default .article-card__media {
    min-height: 100%;
}

.article-feed .article-card--default .article-card__media img {
    min-height: 100%;
}

/* 横並び一覧のサムネは狭い(実寸120×72px)ため、バッジをさらに小さく圧縮（rail相当でも横長サムネ高に対し大きすぎた）。padding/字間を詰めてサムネ高に対する占有を下げる。PC世界はサムネ 17.5rem と広いので @media 内でフルサイズへ戻す */
.article-feed .article-card--default .category-badge {
    top: 0.375rem;
    left: 0.375rem;
    padding: 0.0625rem 0.25rem;
    font-size: 0.5625rem;
    letter-spacing: 0.04em;
}

.article-feed .article-card--default .article-card__title {
    min-height: auto;
    font-size: 1rem;
}

/* ページネーション（数字、世界観） */
.archive-page .nav-links,
.archive-page .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    width: min(100%, 60rem);
    margin: 0.5rem auto 0;
}

/* ページ送り＝カテゴリチップ(.category-chip)と同じインク質感に統一。
   非選択=白チップ＋インク縁、選択(current)=黒インク反転。ネオングラデは使わない */
.archive-page .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.5625rem 1.0625rem;
    background: var(--surface-panel);
    color: var(--text-strong);
    font-family: var(--font-en);
    font-weight: 900;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.archive-page .page-numbers:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}

.archive-page .page-numbers.current {
    border-color: transparent;
    background: linear-gradient(180deg, #16202f, #0e1722);
    color: var(--color-white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 22px rgba(7, 21, 38, 0.22);
}

/* prev/next の線画シェブロン（WP絵文字▶◀を廃し、検索/ドロワーと同じ線画言語に統一） */
.page-numbers__chevron {
    display: block;
    width: 0.9375rem;
    height: 0.9375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Single Article（記事ページ：没入リーダー型） ===== */

/* パンくず */
.article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: min(100%, 60rem);
    margin: 0 auto;
    font-size: 0.8125rem;
    font-weight: 700;
}

.article-breadcrumb a {
    color: var(--text-link);
    border-bottom: 1px solid rgba(46, 227, 243, 0.5);
    padding-bottom: 0.0625rem;
    transition: color 160ms ease, border-color 160ms ease;
}

.article-breadcrumb a:hover {
    color: var(--color-sunset);
    border-color: var(--color-sunset);
}

.article-breadcrumb__sep {
    color: var(--text-faint);
}

.article-breadcrumb__current {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Twitterシェアタブ（記事ページ左上・crew-vision-tab左右反転版・常時ダーク基調）
   theme: 常時ダーク扱い（UIシェル・A2方針）。トークン非参照・生色直書き。
   配色: Twitterブルー #1DA1F2 はプラットフォーム識別信号（DESIGN_BRIEF 0節の紫禁止例外）。
   板はフラット＝色付きglowなし、影は黒のみ（光には源がある）。色とサイズで主張させる。
   位置/サイズの px は「画面端固定演出位置」「outline」としてpx維持例外（CLAUDE.md CSS単位方針） */
.article-share-tab {
    position: fixed;
    left: 0;
    top: 45%; /* 中心を縦45%＝真ん中よりわずかに上に置く（translateY -50% と合わせる） */
    transform: translateY(-50%);
    z-index: 95;
    display: inline-flex;
    padding: 0;
    background: transparent;
    border: 0;
    text-decoration: none;
}

/* crew-vision-tab__plate の左右反転版（左端に貼り付く）。Twitterブルーの透明ガラス＝クリア感・高級感。
   border-left:0 / 角丸を右側 / 半透明＋backdrop-filterでガラス化 / inset光沢で高級感 / 影は黒のみ（板＝フラット） */
.article-share-tab__plate {
    position: relative;
    overflow: hidden;
    width: 2.25rem;
    height: 10.5rem;
    background: rgba(29, 161, 242, 0.68);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-left: 0;
    border-radius: 0 0.625rem 0.625rem 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset -1px 0 0 rgba(255, 255, 255, 0.18),
        4px 6px 18px rgba(0, 0, 0, 0.42),
        8px 0 22px rgba(0, 0, 0, 0.25);
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.article-share-tab:hover .article-share-tab__plate,
.article-share-tab:focus-visible .article-share-tab__plate {
    transform: translateX(3px);
    background: rgba(20, 140, 220, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset -1px 0 0 rgba(255, 255, 255, 0.22),
        5px 7px 22px rgba(0, 0, 0, 0.5),
        10px 0 28px rgba(0, 0, 0, 0.3);
}

/* キーボードfocus時の明示（crew-vision-tabには無いがアクセシビリティ強化） */
.article-share-tab:focus-visible .article-share-tab__plate {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* 縦書きラベル: SHARE。鳥マークと干渉しないよう中心をやや上に。白でくっきり */
.article-share-tab__plate::before {
    content: "SHARE";
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.32em;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
}

/* 青い鳥マークをplate下部に配置（上にSHARE縦書き、下に鳥）。白塗りで青地に映える */
.article-share-tab__icon {
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: 1.125rem;
    height: 1.125rem;
    transform: translateX(-50%);
    fill: #FFFFFF;
    pointer-events: none;
}

/* スポンサー枠プレースホルダ：空のときは出さない（浮かせない） */
.single-sponsor-slot:empty {
    display: none;
}

/* コメント欄 */
.article-comments {
    width: min(100%, 60rem);
    margin: 0 auto;
    display: grid;
    gap: 1.25rem;
}

.article-comments__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 900;
}

.article-comments__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.article-comments__list .children {
    list-style: none;
    margin: 0.75rem 0 0;
    padding-left: 1.075rem;
    display: grid;
    gap: 0.75rem;
}

.article-comments .comment-body {
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-md);
    padding: 1rem 1.125rem;
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.article-comments .comment-meta {
    font-size: 0.75rem;
    color: var(--text-faint);
    font-weight: 700;
}

.article-comments .comment-meta a {
    color: var(--text-muted);
}

.article-comments .reply {
    margin-top: 0.5rem;
    font-weight: 900;
    font-size: 0.8125rem;
}

.article-comments .reply a {
    color: var(--color-sunset);
}

.article-comments__closed {
    color: var(--text-muted);
    font-weight: 700;
}

/* コメントフォーム */
.article-comments .comment-respond {
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-lg);
    padding: 1.125rem;
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
}

.article-comments .comment-reply-title {
    margin: 0 0 0.875rem;
    font-size: 1.125rem;
    font-weight: 900;
}

.article-comments .comment-form-comment textarea,
.article-comments input[type="text"],
.article-comments input[type="email"],
.article-comments input[type="url"] {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    background: var(--surface-input);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: 0.9375rem;
}

.article-comments .comment-form-comment textarea::placeholder,
.article-comments input::placeholder {
    color: var(--text-placeholder);
}

.article-comments .comment-form > p {
    margin: 0 0 0.875rem;
}

.article-comments .comment-form label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 800;
    font-size: 0.875rem;
}

.article-comments .form-submit .submit {
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.625rem;
    background: var(--color-sunset);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: transform 140ms ease;
}

.article-comments .form-submit .submit:hover {
    transform: translateY(-2px);
}

/* コメントページネーション（記事ページ内、archive-page セレクタ外なので個別指定） */
.article-comments .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
}

.article-comments .page-numbers {
    border-radius: 999px;
    padding: 0.5rem 0.8125rem;
    background: var(--surface-input);
    color: var(--text-strong);
    font-weight: 900;
}

/* コメントのいいね/悪いね・返信 */
.comment-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.625rem;
}

.comment-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.3125rem 0.75rem;
    background: var(--surface-input);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, color 120ms ease;
}

.comment-reaction svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.comment-reaction--like:hover {
    color: var(--reaction-like);
    border-color: var(--reaction-like);
    transform: translateY(-1px);
}

.comment-reaction--dislike:hover {
    color: var(--reaction-dislike);
    border-color: var(--reaction-dislike);
    transform: translateY(-1px);
}

/* 相手の票でロック中・送信中 → 物理的に押せない（pointer-events で貫通防止） */
.comment-reaction:disabled,
.comment-reaction.is-locked {
    cursor: default;
    opacity: 0.5;
    transform: none;
    pointer-events: none;
}

/* 自分の票 → 枠＋文字色（ベタ塗り廃止）。押せる（再クリックで取消）。色はreactionトークン（ライトは濃色でAA担保） */
.comment-reaction.is-active {
    background: transparent;
    cursor: pointer;
}

.comment-reaction.is-active.comment-reaction--like {
    border-color: var(--reaction-like);
    color: var(--reaction-like);
}

.comment-reaction.is-active.comment-reaction--dislike {
    border-color: var(--reaction-dislike);
    color: var(--reaction-dislike);
}

/* アクティブのホバーは取消を示唆（少し沈める）。枠+文字色は維持。 */
.comment-reaction.is-active:hover {
    transform: translateY(1px);
    opacity: 0.85;
}

/* 送信失敗（連打スロットル・nonce失効・通信エラー）を無言にしない最小フィードバック。
   一瞬だけ揺らして「反応はした、でも今は通らなかった」を伝える。prefers-reduced-motion で停止。 */
.comment-reactions.is-error {
    animation: comment-react-shake 600ms ease;
}

@keyframes comment-react-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .comment-reactions.is-error {
        animation: none;
    }
}

.comment-reply-toggle {
    margin-top: 0.625rem;
    border: none;
    background: none;
    padding: 0;
    color: var(--color-sunset);
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 0.8125rem;
    cursor: pointer;
}

.comment-reply-form {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.625rem;
}

.comment-reply-form[hidden] {
    display: none;
}

.comment-reply-form textarea {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    background: var(--surface-input);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: 0.9375rem;
}
.comment-reply-form textarea::placeholder {
    color: var(--text-placeholder);
}

.comment-reply-submit {
    justify-self: start;
    border: none;
    border-radius: 999px;
    padding: 0.625rem 1.375rem;
    background: var(--color-sunset);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 0.875rem;
    cursor: pointer;
    transition: transform 140ms ease;
}

.comment-reply-submit:hover {
    transform: translateY(-2px);
}

/* =================================================================
   PCレイアウト（≥768px）— 2マス設計のPC側。スマホ正本（@media外のベース）
   に対するPC上書きをここに集約する。構造を切り替える唯一の境界。
   このブロックは必ずファイル末尾に置く（全ベース宣言より後＝後勝ちで成立）。
   ================================================================= */
@media (min-width: 768px) {
    /* 等比拡縮エンジン PC世界: アンカー1024で16px (16/1024=1.5625vw)。
       768pxで12px(下端=基準リセット)、1024pxで16px、1280pxで20px(上限=頭打ち)。
       1280px超は20px固定。PCレイアウトを保ったまま画面幅で等比拡縮する。 */
    html { font-size: clamp(12px, 1.5625vw, 20px); }

    /* 骨格PC復元（M3: 768→base反転の対。各 base が768値=スマホ正本になったので PC値をここで戻す） */
    .site-header {
        grid-template-columns: 2.5rem 1fr 2.5rem;
        gap: 1.28rem;
        /* 背景帯は全幅のまま、中身だけ --max-page(1280px) 内に収め .portal-home と縦ラインを揃える。
           +1.075rem は .portal-home の内側 padding と一致させる分。超ワイドで中身が散らばるのを防ぐ */
        padding: 0.625rem max(1.92rem, calc((100vw - var(--max-page)) / 2 + 1.075rem));
    }
    .site-header__menu,
    .site-header__search { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; }
    .site-header__menu-lines,
    .site-header__menu-lines::before,
    .site-header__menu-lines::after { width: 1.125rem; }
    .site-header__search svg { width: 1.125rem; height: 1.125rem; }
    .site-header__name { font-size: 0.896rem; letter-spacing: 0.04em; }
    /* PC展開幅: スマホ流用(min(14rem,72vw))を脱却し純remで広げる（vw禁止・等比拡縮）。
       72vwの安全上限はPC幅では常に効かないため不要 */
    .site-drawer,
    .site-search { width: 18rem; }
    .site-drawer__head { padding: 1.125rem 1.25rem 0.875rem; }
    .site-drawer__link { padding: 0.6875rem 1.25rem; }
    .crew-vision { width: min(35.25rem, calc(100vw - 2.25rem)); right: 1.25rem; }
    .crew-vision__screen { border-radius: 1.5rem; }
    .crew-vision__ticker { height: 1.875rem; }
    .crew-vision__ticker-item { font-size: 0.75rem; }
    .crew-vision-tab { bottom: clamp(190px, 22vh, 240px); }
    .crew-vision-tab__plate { width: 1.625rem; height: 13.125rem; }
    .crew-vision-tab__plate::before { font-size: 0.5625rem; letter-spacing: 0.36em; }
    /* Twitterシェアタブ PC拡大（base=スマホ正本は 2.25rem/10.5rem） */
    .article-share-tab__plate { width: 2.625rem; height: 11.5rem; }
    /* おすすめ欄(rail)PC: サムネとタイトルを拡大（最新記事カード相当の存在感に） */
    .article-card--rail { grid-template-columns: 7.5rem 1fr; min-height: 9rem; }
    .article-card--rail .article-card__title { font-size: 1.0625rem; }
    .section-heading { flex-direction: row; align-items: end; }
    .coming-soon-card { min-height: 11.125rem; }

    /* ページ外周: PC はゆとりを持たせる（盤面は dashboard-board が内部で持つ） */
    .app-home {
        gap: 1.375rem;
        padding: 2.56rem;
    }

    /* ===== ダッシュボード盤面 PC（768+）=====
       視線誘導: hero特大(左) → 記事(右上) → YouTube・Wiki(その下左右) → 最下段に弱導線5枚
       重い要素を上流へ。下段に最重要を置かない。 */
    .dashboard-board {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        /* 行: hero は16:9で自然高さを取り、右カラムはそれに追従。
           下段(YT/Wiki)を内容高さ(auto)で固定し、上段(記事)が残りを取る=記事が間延びしない */
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "hero hero hero article article"
            "hero hero hero youtube wiki"
            "board recruit twitch pr discord";
        gap: 1rem;
        /* 器(受け皿): 他セクション(.recommended-feed/.portal-section)と同じトンマナで
           盤面を1枚のトレイに乗せ、暗い背景から浮かせる。PC世界のみ（スマホは2列bento正本を維持）。
           トークンは追加利用のみ（:root 不変・共有セレクタ不変） */
        border-radius: var(--radius-xl);
        border: 1px solid var(--border-hair);
        padding: 1.25rem;
        background: var(--surface-panel);
        box-shadow: var(--shadow-ambient);
    }

    /* hero は2行ぶち抜き。16:9 を維持し、その高さが右カラム2行の合計を決める基準になる */
    .dashboard-board__hero.hero-carousel {
        grid-template-rows: 1fr auto;
    }
    .dashboard-board__hero .hero-carousel__frame { height: 100%; }
    /* 盤面の hero だけ 16:9 → 16:10 にわずかに縦長化。
       crew-vision（広告クリエイティブ 16:9 固定）とのアスペクト差でメリハリを出す。
       crew-vision 側は不変。 */
    .dashboard-board__hero .hero-carousel__screen { aspect-ratio: 16 / 10; }

    /* 記事カード（右上・強度A）: 盤面で主役級に見せる。
       スマホ正本の min-height(280) は盤面内で解除し、行高さは hero に追従させる
       （記事だけ縦間延びするのを防ぐ） */
    .quick-deck-card--article { padding: 1.5rem; min-height: 0; }

    /* 下段(YouTube/Wiki)を少し低めに固定し、余りを上段(記事)へ配分。
       YT/Wiki が出すぎないようにし、記事に高さを振る */
    .quick-deck-card--youtube { min-height: 10.5rem; }

    /* スマホ用に記事/YouTubeの中身を拡大した分が PC にも波及するため、PCは従来値に復元。
       記事の label/art は別途PC個別指定で上書き済み（下記）。ここは kicker/desc/YouTube を戻す */
    .quick-deck-card--article .quick-deck-card__kicker,
    .quick-deck-card--youtube .quick-deck-card__kicker { font-size: 0.6875rem; }
    .quick-deck-card--article .quick-deck-card__desc,
    .quick-deck-card--youtube .quick-deck-card__desc { font-size: 0.75rem; }
    .quick-deck-card--youtube .quick-deck-card__label { font-size: 1.875rem; }
    .quick-deck-card--youtube .quick-deck-card__art {
        width: 5.25rem;
        height: 5.25rem;
    }
    .quick-deck-card--article .quick-deck-card__label {
        font-size: 2.176rem;
        letter-spacing: -0.03em;
    }
    .quick-deck-card--article .quick-deck-card__art {
        width: 7.04rem;
        height: 7.04rem;
    }

    /* 記事グリッド多列 */
    .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .article-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .coming-soon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* 記事一覧カード（Diver list layout 寄せ）: PCはサムネ280px・61.8%比率の横帯。
       色・世界観はgta6のまま、寸法だけDiver値へ。 */
    .article-feed .article-card--default { grid-template-columns: 17.5rem 1fr; }
    .article-feed .article-card--default .article-card__media {
        min-height: 0;
        aspect-ratio: 1.618 / 1;
    }
    .article-feed .article-card--default .article-card__media img {
        min-height: 0;
        height: 100%;
    }
    /* PCはサムネが大きくbodyがカード全高にstretchするため、base の grid 既定だと中身が
       天井に貼りつき下にスカスカの死に空白ができる。align-content:center で縦中央へ寄せ
       上下に余白を分散。gap も拡大タイトルに合わせ広げる */
    .article-feed .article-card--default .article-card__body {
        padding: 0.75rem 1.125rem;
        align-content: center;
        gap: 0.5rem;
    }
    /* PCはサムネが大きい(17.5rem)ため、base 1rem のままだとタイトルが小さく見える。一覧主役として拡大 */
    .article-feed .article-card--default .article-card__title { font-size: 1.25rem; }
    /* PCはサムネが広い(17.5rem)ためバッジをフルサイズへ戻す（スマホ縮小の打ち消し） */
    .article-feed .article-card--default .category-badge {
        top: 0.75rem;
        left: 0.75rem;
        padding: 0.3125rem 0.625rem;
        font-size: 0.6875rem;
    }

    /* front-page ヒーロー PC拡大 */
    .hero-carousel__body { gap: 0.75rem; padding: 4.5rem 2rem 1.375rem; }
    .hero-carousel__title { font-size: 1.664rem; }
    .hero-carousel__arrow { width: 2.5rem; height: 4rem; opacity: 0.35; }
    .hero-carousel__arrow--prev { left: 0.75rem; }
    .hero-carousel__arrow--next { right: 0.75rem; }
    .hero-carousel__arrow svg { width: 1.25rem; height: 1.25rem; }

    /* === 等比拡縮: base層スマホ≠PCのPC世界override（1024評価rem） === */
    .site-footer {
        padding: 2rem 2.56rem;
    }
    .portal-home {
        gap: 2.24rem;
        padding: 2.56rem;
    }
    .portal-section {
        padding: 1.408rem;
    }
    .section-heading h2 {
        font-size: 2.304rem;
    }
    .section-cta__label {
        font-size: 1.216rem;
    }
    .article-card__placeholder {
        font-size: 2.176rem;
    }
    .archive-page {
        gap: 3.2rem;
        padding: 2.56rem;
    }
    .single-article {
        padding: 3.2rem;
    }
    .single-article__header {
        padding-bottom: 2.5rem;
    }
    .archive-page__header h1 {
        font-size: 3.84rem;
    }
    .single-article__content :is(h2.wp-block-heading, h2:not([class])) {
        font-size: 1.75rem;
    }
    .single-article__content :is(h3.wp-block-heading, h3:not([class])) {
        font-size: 1.375rem;
    }
    .single-article__content :is(h4.wp-block-heading, h4:not([class])) {
        font-size: 1.1875rem;
    }
    .article-comments__title {
        font-size: 1.625rem;
    }
    .article-comments__list .children {
        padding-left: 2rem;
    }
    .article-comments .comment-respond {
        padding: 1.75rem;
    }
    .article-comments .comment-reply-title {
        font-size: 1.375rem;
    }
}

/* ===== テーマ切替トグル — GTA6ミニマル（サンセット⇄ナイトのグラデ帯＋滑る円） ===== */
.site-drawer__theme {
    margin-top: auto;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: 2.75rem;
    border: 0;
    padding: 0.375rem 0;
    background: none;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle__track {
    position: relative;
    flex: none;
    width: 3.75rem;
    height: 1.75rem;
    border-radius: 999px;
    /* ダーク既定: ナイト（深ネイビー。紫は使わない＝原則4） */
    background: linear-gradient(105deg, var(--color-ocean), var(--color-night));
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: background 460ms ease, box-shadow 460ms ease;
}

.theme-toggle__orb {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    /* ダーク: クールな白＋ティールの薄グロー */
    background: #eef4f8;
    box-shadow: 0 0 8px rgba(46, 227, 243, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 460ms cubic-bezier(.34, 1.35, .5, 1), background 460ms ease, box-shadow 460ms ease;
}

/* ライト（aria-pressed=false）: サンセット帯＋円が右へ＋ゴールド発光 */
.theme-toggle[aria-pressed="false"] .theme-toggle__track {
    background: linear-gradient(105deg, var(--color-orange), var(--color-sunset));
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}
.theme-toggle[aria-pressed="false"] .theme-toggle__orb {
    transform: translateX(2rem);
    background: #fff4d6;
    box-shadow: 0 0 10px rgba(255, 210, 63, 0.7), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.theme-toggle__label {
    flex: 1;
    text-align: left;
}

.theme-toggle:active .theme-toggle__orb {
    transform: scale(0.9);
    transition: transform 60ms ease;
}
.theme-toggle[aria-pressed="false"]:active .theme-toggle__orb {
    transform: translateX(2rem) scale(0.9);
    transition: transform 60ms ease;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 0.625rem;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle__track,
    .theme-toggle__orb { transition-duration: 1ms; }
}