/* ============================================================
   全ページ共通「本文の土台」エディトリアル（Phase 1）
   正本: docs/superpowers/specs/assets/2026-07-18-homepage-design-AUTHORITATIVE.html
   世界観: 和紙(#f7f5ef) + 墨(#15151c) + ネオンピンク(#ff2d6f)。
   フォント: Zen Antique(明朝見出し) / Zen Kaku Gothic New(本文) / Oswald(数字)。

   方針（重要）:
   - SWELL テーマ非改変。CSS のみ。土台レベル（地・タイポ・見出し・
     リンク・ボタン・面の色味）だけを乗せ、グリッド/フレックス構造は触らない。
   - SWELL は CSS カスタムプロパティ駆動なので、!important 合戦を避け
     `body:not(.home)` に SWELL 変数を再マップして色味を editorial に寄せる。
     （custom property は近い祖先＝body の値が :root より優先されるため
       読み込み順・詳細度に依存せず確実に効く）
   - トップページ (.cg-home / body.home) は homepage.css が完結して持つため
     本ファイルは一切適用しない（`body:not(.home)` で全面除外）。
   - archive/card プラグイン CSS (archive-rich.css 等) の複雑コンポーネントは
     Phase 2 の領域。ここでは紙地の土台がそっと乗るだけに留める。
   ============================================================ */

/* ===== 自己定義トークン（正本 :root と同値） ===== */
:root {
    --cg-sumi:    #15151c;
    --cg-sumi-70: rgba(21,21,28,.62);
    --cg-sumi-40: rgba(21,21,28,.38);
    --cg-paper:   #f7f5ef;
    --cg-white:   #ffffff;
    --cg-rule:    rgba(21,21,28,.14);
    --cg-neon:    #ff2d6f;
    --cg-kohaku:  #f0b429;
    --cg-indigo:  #23348c;
    --cg-mizu:    #1b8f9e;

    --cg-disp: "Zen Antique", "Yu Mincho", "YuMincho", serif;
    --cg-ui:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
    --cg-num:  "Oswald", "Zen Kaku Gothic New", sans-serif;
}

/* ============================================================
   1) SWELL 変数の editorial 再マップ（body スコープ・トップ除外）
   - body に定義することで :root の SWELL 既定値を確実に上書きする。
   - 墨(#15151c) を主色に、紙(#f7f5ef) を地に、本文フォントを角ゴに。
   ============================================================ */
body:not(.home) {
    /* 本文フォント（SWELL は body{font-family:var(--swl-font_family)}） */
    --swl-font_family: var(--cg-ui);

    /* 面・文字・見出し・リンク・主色を墨/紙へ */
    --color_bg:         var(--cg-paper);
    --color_content_bg: transparent;
    --color_text:       var(--cg-sumi);
    --color_htag:       var(--cg-sumi);   /* 見出し文字 & 塗り見出しバーの地 */
    --color_main:       var(--cg-sumi);   /* ボタン地・アクセント・focus 等 */
    --color_link:       var(--cg-sumi);   /* 本文リンク基調（hover でネオン） */

    color: var(--cg-sumi);
    font-family: var(--cg-ui);
}

/* ============================================================
   2) 地（和紙 + 罫線ドットのテクスチャ）
   - SWELL は body/#body_wrap に背景を塗っていない（＝既定の白は素の白地）。
     ここで紙地を敷いて素っ気ない白を解消する。
   - トップ (.cg-home::before) と同じ 22px ドット・同一原点(viewport固定)で
     統一。トップは自前のドット層を持つため body.home には塗らない
     （二重塗りでドットが濃くなるのを避ける）。
   ============================================================ */
body:not(.home) {
    background-color: var(--cg-paper);
    background-image: radial-gradient(rgba(21,21,28,.045) 1px, transparent 1px);
    background-size: 22px 22px;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* SWELL コンテンツラッパを透過させ、紙地を見せる（構造は不変） */
body:not(.home) #body_wrap,
body:not(.home) .l-mainArea,
body:not(.home) .l-mainContent,
body:not(.home) .l-mainContent__inner,
body:not(.home) .l-content,
body:not(.home) .l-container {
    background-color: transparent;
}

/* ============================================================
   3) タイポグラフィ（本文＝角ゴ / 見出し＝明朝）
   ============================================================ */
body:not(.home) .post_content,
body:not(.home) .l-mainContent__inner {
    font-family: var(--cg-ui);
    line-height: 1.85;
    letter-spacing: .01em;
    color: var(--cg-sumi);
}

/* 見出しは明朝（Zen Antique）。記事タイトル・セクションタイトルも統一 */
body:not(.home) .post_content :where(h1, h2, h3, h4, h5, h6),
body:not(.home) .c-postTitle__ttl,
body:not(.home) .c-secTitle,
body:not(.home) .p-postList__title {
    font-family: var(--cg-disp);
    font-weight: 400;
    letter-spacing: .03em;
    /* 文字色は SWELL の --color_htag(=墨) に委ねる。塗り見出しバーは
       SWELL 自身が白文字を当てるため、ここで color を固定すると
       「墨バーに墨文字」で消える。故に color は指定しない。 */
}

/* 記事タイトル（H1）：明朝・墨・ネオンの細い前置きライン */
body:not(.home) .c-postTitle__ttl {
    line-height: 1.5;
}

/* ============================================================
   4) 見出しの editorial アクセント
   - SWELL の塗り h2 バーは --color_htag が墨になり自動で墨バー化。
     そこへネオンの縦アクセントを足して正本の作法に寄せる（控えめ）。
   - 塗りでない見出しスタイルでも、左のネオン罫は editorial の記号として機能。
   ============================================================ */
body:not(.home) .post_content > h2 {
    border-left: 5px solid var(--cg-neon);
}

/* h3：墨の下罫 + ネオンの短い先頭アクセント（下線系スタイルとも両立） */
body:not(.home) .post_content > h3 {
    border-bottom-color: var(--cg-rule);
}

/* ============================================================
   5) 本文リンク：墨基調 → hover でネオン下線が伸びる
   （ボタンは除外） */
body:not(.home) .post_content a:not([class*="btn"]):not([class*="button"]):not([class*="Btn"]):not(.p-postList__link) {
    color: var(--cg-sumi);
    text-decoration: none;
    background-image: linear-gradient(var(--cg-neon), var(--cg-neon));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size .22s ease, color .15s ease;
}
body:not(.home) .post_content a:not([class*="btn"]):not([class*="button"]):not([class*="Btn"]):not(.p-postList__link):hover {
    color: var(--cg-neon);
    background-size: 100% 1.5px;
}

/* ============================================================
   6) ボタン（SWELL 既定 / ブロックボタン / CTA）
   - 地は --color_main=墨で editorial 化済み。角を締めて hover でネオンへ。
   ============================================================ */
body:not(.home) .wp-block-button__link,
body:not(.home) .swell-block-button__link,
body:not(.home) .swell-block-button a,
body:not(.home) .c-btn,
body:not(.home) .p-postList__readMore {
    font-family: var(--cg-ui);
    letter-spacing: .04em;
    border-radius: 3px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
body:not(.home) .wp-block-button__link:hover,
body:not(.home) .swell-block-button__link:hover,
body:not(.home) .swell-block-button a:hover,
body:not(.home) .c-btn:hover {
    background-color: var(--cg-neon) !important;
    border-color: var(--cg-neon) !important;
    color: #fff !important;
}

/* ============================================================
   7) 面（表・ボックス）を editorial トークンへ（構造は不変）
   - 本文中のテーブル・ボックスの罫線/角/淡色を墨・紙・ネオンに寄せる。
   ============================================================ */
body:not(.home) .post_content table:not([class*="swell-block"]) {
    border-color: var(--cg-rule);
}
body:not(.home) .post_content table th,
body:not(.home) .post_content table thead td {
    background-color: var(--cg-paper);
    border-color: var(--cg-rule);
    color: var(--cg-sumi);
    font-family: var(--cg-ui);
}
body:not(.home) .post_content table td {
    border-color: var(--cg-rule);
    background-color: var(--cg-white);
}

/* SWELL の汎用ボックス（キャプション付きボックス等）の罫・角を editorial に */
body:not(.home) .swell-block-box,
body:not(.home) .is-style-bordered,
body:not(.home) .wp-block-group.is-style-swell-bordered {
    border-color: var(--cg-rule) !important;
    border-radius: 4px;
    background-color: var(--cg-white);
}

/* パンくず：墨70、hover でネオン（構造は不変） */
body:not(.home) .p-breadcrumb a {
    color: var(--cg-sumi-70);
    transition: color .15s ease;
}
body:not(.home) .p-breadcrumb a:hover {
    color: var(--cg-neon);
}

/* focus は正本と同じ藍のリング（アクセシビリティ維持） */
body:not(.home) :focus-visible {
    outline: 3px solid var(--cg-indigo);
    outline-offset: 2px;
}