@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* =========================================================================
   ECAI LABO — 段ボール（クラフト紙 + 墨 + 送り状）  2026-08-07
   ロールバック: この区切りコメントから最終行までを削除すれば元に戻る。
   バックアップ: assets/backup-20260806/20260806_cocoon-child_style.css.bak

   ------------------------------------------------------------------------
   ★これは 2026-08-06 のネイビー版(P0/P1)の置き換えである
   ------------------------------------------------------------------------
   旧配色は ANA のブランドカラー参照で、ECとの関連が無かった。
   段ボールは EC実務者が毎日触る物質そのもので、`.ecai-barcode` が
   「送り状のバーコード」という本物の文脈を得る。
   P0/P1 で入れた構造（Cocoon見出し打ち消し・スコープ限定・詳細度）は
   そのまま生きている。差し替わったのは色と、面の塗り分けの範囲。

   ------------------------------------------------------------------------
   ★実測の前提（2026-08-07 / getComputedStyle。推測ではない）
   ------------------------------------------------------------------------
   記事ページで「実際に面を塗っている要素」は以下だけだった:
     body                        rgb(244,245,247)  ← 外周の薄グレー
     #header-container           rgb(255,255,255)  1268x117
     #main.main                  rgb(255,255,255)  860x3148
     #sidebar.sidebar            rgb(255,255,255)  376x3148
     #footer.footer              rgb(255,255,255)  1268x114
     #sidebar h2.wp-block-heading rgb(245,246,247) ← ウィジェット見出し
     コメント欄の input/textarea/button  白 / #f9f9f9 / #f5f8fa
   ★これが全部。ここを塗れば記事ページは段ボールになる。
     旧版は paper が #ffffff だったため Cocoon の白い chrome と同化していて、
     塗る必要が無かった。クラフト茶にした瞬間、塗らないと継ぎ目が出る。

   ホーム(page-id-7)は `content-only` 指定で Cocoon の header/footer が
   実質不可視。ホームは固定ページ本文の <style> が自前で全部塗る。
   ------------------------------------------------------------------------
   ★メタファー: 「板」と「伝票」
     body      = クラフトの板（フルートの縞が入る）
     #main.main= 板に貼られた伝票／出荷ラベル（paper-raised・縞なし）
     #sidebar  = 板そのまま（透過）
   ========================================================================= */


/* ---- [C-0] トークン ------------------------------------------------------
   ★全48組み合わせのコントラストを実測済み（FAIL 0 / WARN 0）。
     検証: node assets/contrast.mjs   仕様: references/design-tokens.md
     トークンを1つでも変えたら再実行すること。茶は明度が中間に寄り AA を割りやすい。
   ★宣言順: plain :root → @media dark → [data-theme]
     @media は詳細度を上げないため、この順序でないと切替が壊れる。
   ★実測: このサイトの DOM に data-theme 属性は無い（切替UIが無い）。
     現在効いているのは prefers-color-scheme のみ。将来の切替UIに備えて
     html / body どちらに付いても効くよう両方を列挙しておく。
--------------------------------------------------------------------------- */
:root {
  --ecai-paper: #E8DCC6;
  --ecai-paper-raised: #F4EDDF;
  --ecai-flute: #E4D7BD;
  --ecai-ink: #1C1815;
  --ecai-ink-soft: #4A4136;
  --ecai-ink-faint: #665C4E;
  --ecai-accent: #A32B21;
  --ecai-accent-ink: #FBF6EC;
  --ecai-accent-2: #1F5140;
  --ecai-accent-2-ink: #FBF6EC;
  --ecai-line: #B5A070;
  --ecai-line-strong: #8A7852;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ecai-paper: #17140F;
    --ecai-paper-raised: #221E17;
    /* ★ダークでは flute が paper より「明るい」。ライトと逆向きで正しい。
       暗い側に明度の余地が無く、縞を暗くすると 1.05:1 に潰れて存在しないのと
       同じになる（実測）。「夜の倉庫で庫内灯がフルートの山に当たる」と読み替える。 */
    --ecai-flute: #1D1914;
    --ecai-ink: #EFE4CE;
    --ecai-ink-soft: #BCAF95;
    --ecai-ink-faint: #968A73;
    --ecai-accent: #E8705B;
    --ecai-accent-ink: #17140F;
    --ecai-accent-2: #7FC0A2;
    --ecai-accent-2-ink: #17140F;
    --ecai-line: #4B4336;
    --ecai-line-strong: #736850;
  }
}

:root[data-theme="light"],
body[data-theme="light"] {
  --ecai-paper: #E8DCC6;
  --ecai-paper-raised: #F4EDDF;
  --ecai-flute: #E4D7BD;
  --ecai-ink: #1C1815;
  --ecai-ink-soft: #4A4136;
  --ecai-ink-faint: #665C4E;
  --ecai-accent: #A32B21;
  --ecai-accent-ink: #FBF6EC;
  --ecai-accent-2: #1F5140;
  --ecai-accent-2-ink: #FBF6EC;
  --ecai-line: #B5A070;
  --ecai-line-strong: #8A7852;
}

:root[data-theme="dark"],
body[data-theme="dark"] {
  --ecai-paper: #17140F;
  --ecai-paper-raised: #221E17;
  --ecai-flute: #1D1914;
  --ecai-ink: #EFE4CE;
  --ecai-ink-soft: #BCAF95;
  --ecai-ink-faint: #968A73;
  --ecai-accent: #E8705B;
  --ecai-accent-ink: #17140F;
  --ecai-accent-2: #7FC0A2;
  --ecai-accent-2-ink: #17140F;
  --ecai-line: #4B4336;
  --ecai-line-strong: #736850;
}


/* ---- [C-0b] テクスチャ（画像を使わない）----------------------------------
   ★段ボールのテクスチャは必ず repeating-linear-gradient で作る。
     画像は LCP を悪化させ、かつ「AI生成の質感」に寄る。
   ★15px周期 は物理的な根拠がある: Bフルートのピッチが約4mm、
     96dpi で 4mm ≒ 15px。目分量ではなく実寸から決めている。

   ★★フルートは「ハードストップにしない」。ここだけ他のテクスチャと逆。
     最初はハードストップ（0 4px / 4px 15px）で実装したが、本番DOMに当てて
     目視したところ「段ボール」ではなく**縞の壁紙／すだれ**に見えた。
     振幅を 1.16:1 → 1.06:1 まで落としても直らない。
     大面積どうしの境界にはエッジ検出が強く効くため、
     **コントラスト比では「縞の見えすぎ」を検査できない**（比は 1.06 でも縞は出る）。
     → paper → flute → paper のなだらかなランプにする。これが波の陰影の実体で、
       輪郭が消えるので繊維の質感として読める。
     ★戻すときは必ず実機で見ること。数値だけ見て「AA通ってるから」で
       ハードストップに戻すと、また壁紙になる。

   ★transparent を混ぜないこと（補間で灰色のフリンジが出る）。実色で書く。
   ★カスタムプロパティに gradient を入れると、使用側の要素の var() で
     解決されるためダーク切替に自動追従する。
--------------------------------------------------------------------------- */
:root {
  --ecai-tex-flute: repeating-linear-gradient(
    90deg,
    var(--ecai-paper) 0,
    var(--ecai-flute) 7px,
    var(--ecai-paper) 15px
  );
  /* 板の切り口（フルートの断面）。セクションの区切りに敷く帯 */
  --ecai-tex-edge: repeating-linear-gradient(
    90deg,
    var(--ecai-line-strong) 0 1px,
    var(--ecai-paper) 1px 5px
  );
}


/* ---- [C-1] Cocoon chrome を持つページはライト値に pin（意図的）-----------
   ★条件は `body.content-only` の**有無**で判定する。ページIDでもURLでもない。

   `content-only` は Cocoon のページ設定「本文のみ(フルワイド)」が付けるクラスで、
   **「このページは Cocoon の header/footer/sidebar を出さない」そのもの**を意味する。
   実測（2026-08-07）:
     ホーム   body class に content-only / content-only-full-wide あり
     記事      content-only なし
   ダークが危険なのは「chromeのハードコード色が残るから」なので、
   chromeの有無こそが因果。`page-id-7` は同じ結果になる代理指標にすぎず、
   - ホームの固定ページIDが変わったら壊れる
   - 将来ホーム以外に「本文のみ」ページを作ったら手当てが要る
   - 逆にホームの設定を「本文のみ」から戻したら、chromeが出たままダークになる
   という3つのズレがある。`content-only` ならこの3つとも自動的に正しくなる。

   なぜ pin するのか（「壊れているから消した」ではない）:
     chrome の「面」はこの [C-2] でトークン化したので、以前より一歩近づいた。
     残っているのは chrome の「文字と部品」で、Cocoon 側にハードコードがある:
       - 本文既定色 #333、パンくず #999
       - SNSシェアボタンのブランド色（X=黒 / LINE=緑 / Pinterest=赤）
       - フォーム部品の枠色
     これらを監査せずにダークを開けると「暗い板に暗い文字」を再発させる。
   ★解除する条件: 上記のハードコード色を全て洗い出してトークン化したとき。
     そのときこのブロックだけ削除すればサイト全面でダークが効く。
--------------------------------------------------------------------------- */
body:not(.content-only) {
  color-scheme: light;
  --ecai-paper: #E8DCC6;
  --ecai-paper-raised: #F4EDDF;
  --ecai-flute: #E4D7BD;
  --ecai-ink: #1C1815;
  --ecai-ink-soft: #4A4136;
  --ecai-ink-faint: #665C4E;
  --ecai-accent: #A32B21;
  --ecai-accent-ink: #FBF6EC;
  --ecai-accent-2: #1F5140;
  --ecai-accent-2-ink: #FBF6EC;
  --ecai-line: #B5A070;
  --ecai-line-strong: #8A7852;
}


/* ---- [C-2] 面の塗り分け（実測した7面だけを塗る）--------------------------
   ★ここはサイト全面に効く。旧版が `body.single-post` に限定していたのは
     「記事だけ暗くすると白い chrome が残る」ためで、chrome を塗らない前提の
     制約だった。今回は chrome ごと塗るので限定する理由が無い。
     カテゴリ・アーカイブ・検索結果も同じ板の上に乗る。
   ★ロールバックはこのファイル末尾までの一括削除で足りる（区切りコメント参照）。
   ★#container / #content には当てない（塗り重ねになり、面の階層が壊れる）。
--------------------------------------------------------------------------- */

/* 板。ページ全体の地。 */
body {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  color: var(--ecai-ink);
}

/* 板に貼られた伝票。記事本文カラム。縞は入れない（貼り紙なので平ら）。 */
#main.main {
  background-color: var(--ecai-paper-raised);
  border-top: 1px solid var(--ecai-line);
  border-bottom: 1px solid var(--ecai-line);
}

/* サイドバーは板そのまま。白い箱を浮かせない。 */
#sidebar.sidebar {
  background-color: transparent;
}

/* ヘッダ／フッタも板。伝票との境目に罫を一本入れて「貼ってある」ことを示す。 */
#header-container {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  border-bottom: 1px solid var(--ecai-line-strong);
}
#footer.footer {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  border-top: 1px solid var(--ecai-line-strong);
}

/* ---- モバイル専用のCocoon chrome（★SPで実測して初めて見つかった）---------
   PC幅の実測だけでは出てこない白面が3つある。SP390で必ず確認すること。
     ul.mobile-footer-menu-buttons.mobile-menu-buttons  375x50  fixed 下部  白
     div#sidebar-menu-content.menu-content              315x844 fixed 横    白
     div#search-menu-content                                    fixed      透過
   これを塗り忘れると、板の上に白い帯が1本だけ残る。 */
.mobile-menu-buttons,
.mobile-footer-menu-buttons {
  background-color: var(--ecai-paper);
  border-top: 1px solid var(--ecai-line-strong);
  color: var(--ecai-ink);
}
.mobile-menu-buttons a,
.mobile-menu-buttons .menu-button,
.mobile-footer-menu-buttons a {
  color: var(--ecai-ink);
}
/* ★`.menu-content` 単独では当てない。Cocoonの汎用クラス名で、
   スライドメニュー以外を巻き込むと「予期しない面がクラフトになる」＝間違って光る。
   実測した要素は .sidebar-menu-content も持っているので、そちらで足りる。 */
.sidebar-menu-content {
  background-color: var(--ecai-paper);
  background-image: var(--ecai-tex-flute);
  color: var(--ecai-ink);
}
.menu-close-button {
  color: var(--ecai-ink);
}

/* サイドバーのウィジェット見出し = 検品票の項目欄 */
#sidebar h2,
#sidebar h2.wp-block-heading {
  background: none;
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-line);
  border-left: 3px solid var(--ecai-accent);
  border-radius: 0;
  color: var(--ecai-ink);
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  font-size: 15px;
  padding: 10px 14px;
}

/* パンくず。Cocoon既定の #999 はクラフト地で 2.3:1 しか出ない（AA未達）。
   ★これは刷新による新規劣化ではなく、白地でも 2.85:1 で元から未達だった。
     ついでに直している。 */
#breadcrumb,
#breadcrumb a,
#breadcrumb .fa {
  color: var(--ecai-ink-faint);
}

/* 目次の枠（Cocoon既定 #ccc）を罫に寄せる */
.toc {
  border-color: var(--ecai-line);
  border-radius: 0;
  background-color: var(--ecai-paper);
}

/* コメント欄の部品。白い矩形が伝票の上に残るのを防ぐ。
   ★実測した id をそのまま使う（#comment / #author / #email / #url / #submit）。 */
#comment-area textarea,
#comment-area input[type="text"],
#comment-area input[type="email"],
#comment-area input[type="url"],
#comment,
#author,
#email,
#url {
  background-color: var(--ecai-paper);
  border: 1px solid var(--ecai-line);
  border-radius: 0;
  color: var(--ecai-ink);
}
#submit,
#comment-reply-btn {
  background-color: var(--ecai-paper);
  border: 1px solid var(--ecai-ink);
  border-radius: 0;
  color: var(--ecai-ink);
}
#submit:hover,
#comment-reply-btn:hover {
  background-color: var(--ecai-accent);
  border-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
}


/* ---- [C-2b] 残っていた寒色面（★機械的に洗い出して潰した）-----------------
   段ボールCSSを当てた状態で「まだ白/灰/寒色のまま塗られている要素」を
   DOM全走査で検出した結果（2026-08-07 / 記事ページ）:
     input.wp-block-search__input    rgb(255,255,255)  256x51
     button.wp-block-search__button  rgb(50,55,60)     71x51
     button.go-to-top-button         rgb(238,238,238)  40x40
     a.cat-link                      rgb(51,51,51)     41x26
     a.sns-button (シェア/フォロー)   ブランド色       ← 意図的に残す（下記）
   ★この「洗い出し」は目視より確実。トークンを触ったら同じ走査をやり直すこと。

   ★SNSシェアボタンは [C-2c] で「枠は墨・アイコンはブランド色」にした（運営者判断）。
--------------------------------------------------------------------------- */
.wp-block-search__input,
#sidebar input[type="search"],
#sidebar input[type="text"] {
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-line);
  border-radius: 0;
  color: var(--ecai-ink);
}
.wp-block-search__button {
  background-color: var(--ecai-ink);
  border: 1px solid var(--ecai-ink);
  border-radius: 0;
  color: var(--ecai-paper-raised);
}
.wp-block-search__button:hover {
  background-color: var(--ecai-accent);
  border-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
}
.go-to-top-button,
.go-to-top-common {
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-line-strong);
  border-radius: 0;
  color: var(--ecai-ink);
}
/* カテゴリの札。黒塗りをやめて押印にする。 */
.cat-link {
  background-color: transparent;
  border: 1px solid var(--ecai-accent);
  border-radius: 0;
  color: var(--ecai-accent);
}
.cat-link:hover {
  background-color: var(--ecai-accent);
  color: var(--ecai-accent-ink);
}


/* ---- [C-2c] SNSシェア／フォローボタン（運営者判断: 2026-08-07）-----------
   「枠は墨、アイコンだけブランド色」。
   ベタ塗りのブランド色6個が並ぶのがクラフト地で最も強い不一致だったため、
   面と枠を伝票側に寄せ、識別はアイコンの色と形に持たせる。

   ★サービスごとの色を直書きしない。
     Cocoon は各ボタンに `--cocoon-sns-color` を持たせており
     （実測: `.sns-buttons a { background-color: var(--cocoon-sns-color) }` だけで
     ボタンごとに違う色が出ている）、それをそのまま流用する。
     直書きすると Cocoon 側がブランド色を更新したとき追従できない。

   ★アイコン色のコントラスト実測（貼り紙 #F4EDDF 上）:
       X #000000        18.03:1     Facebook #3b5998  5.87:1
       はてブ #2c6ebd    4.43:1     Pinterest #bd081c 5.61:1
       コピー #333333    10.85:1
       LINE #00c300      2.05:1  ▲   feedly #2bb24c   2.38:1  ▲
       RSS  #f26522      2.71:1  ▲
   ★3:1 を割る3つの扱いを分けている理由:
     - LINE は **シェアボタンでキャプション「LINE」が墨で入る**。
       アイコンは同じ情報の重複＝装飾なので、色が沈んでも識別は失われない。
     - feedly / RSS は **フォローボタンでキャプションが無く、アイコンが唯一の識別子**。
       ここを薄い緑・橙にすると「形が見えない」＝情報が落ちる。
       → フォローボタンのアイコンだけ墨にする。
--------------------------------------------------------------------------- */
.sns-share a.sns-button,
.sns-follow a.sns-button {
  background-color: var(--ecai-paper-raised);
  border: 1px solid var(--ecai-ink);
  border-radius: 0;
  color: var(--ecai-ink);
}

/* シェアボタンのアイコンだけブランド色。キャプションは墨のまま。 */
.sns-share a.share-button .social-icon {
  color: var(--cocoon-sns-color, var(--ecai-ink));
}

/* フォローボタンはキャプションが無いのでアイコンを墨に（上のコメント参照）。 */
.sns-follow a.follow-button [class^="icon-"],
.sns-follow a.follow-button [class*=" icon-"] {
  color: var(--ecai-ink);
}

/* hover でブランド色に塗りつぶす。押せる場所であることの手応えを残す。
   アイコンは面と同色になってしまうので inherit に戻す。 */
.sns-share a.sns-button:hover,
.sns-follow a.sns-button:hover {
  background-color: var(--cocoon-sns-color, var(--ecai-accent));
  border-color: var(--cocoon-sns-color, var(--ecai-accent));
  color: #ffffff;
}
.sns-share a.sns-button:hover .social-icon,
.sns-follow a.sns-button:hover [class^="icon-"],
.sns-follow a.sns-button:hover [class*=" icon-"] {
  color: inherit;
}


/* ---- [C-3] 記事ページのブランド接続 --------------------------------------
   P0/P1 から構造はそのまま。色だけ段ボールに差し替わっている。
   実測(P0適用前): 本文 Hiragino Kaku Gothic ProN / #333 /
                   h1 20px lh1.25（h2 20px と同寸で階層が無い）
--------------------------------------------------------------------------- */
body.single-post .article .entry-title,
body.single-post .article .entry-content {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--ecai-ink);
}

body.single-post .article .entry-title {
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 700;
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
}

/* Cocoon親の見出し装飾（h2の灰色帯 / h3の#888縦棒）を打ち消して置き換える。
   ★子セレクタ「> h2」「> h3」に限定する。
     子孫セレクタだと吹き出し(.speech-balloon)・各種ボックス・目次(.toc)・
     ブログカード・再利用ブロック内の h2/h3 まで巻き込んで崩す。
   ※制約: Gutenbergのグループ/カラムブロックで囲まれた見出しは
     .entry-content の直下でなくなるため適用されず、Cocoon既定の装飾が残る。
     執筆規約側で「本文の見出しはブロックで囲まない」を担保する。
   ※詳細度 (0,3,2)。打ち消し対象は全て Cocoon 親 style.css 側にあり、
     !important は付いていないことを実測で確認済み（2026-08-06）。
   ★段ボールでの意味: h2 の下罫 = 伝票の記入欄の罫、h3 の朱の縦棒 = 押印。 */
body.single-post .article .entry-content > h2 {
  background: none;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--ecai-ink);
  border-radius: 0;
  padding: 0 0 10px;
  margin: 3em 0 1.2em;
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.5;
  color: var(--ecai-ink);
}

body.single-post .article .entry-content > h3 {
  background: none;
  background-color: transparent;
  border: 0;
  border-left: 3px solid var(--ecai-accent);
  border-radius: 0;
  padding: 0 0 0 14px;
  margin: 2.4em 0 1em;
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.6;
  color: var(--ecai-ink);
}

/* ★ p も子セレクタ限定。子孫だと吹き出し・キャプション・ブログカード内の
   <p> を巻き込む。級数は現状維持(16px)、行送りのみ調整。 */
body.single-post .article .entry-content > p {
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 1.6em;
  color: var(--ecai-ink);
}

/* 記事タイトルの下に送り状のバーコードを一本。
   ★装飾ではなく「この伝票の識別子」という位置づけ。ホームの .ecai-barcode と同じ語彙。
   ★aria 上は意味が無いので content は空。読み上げに影響しない。 */
body.single-post .article .entry-title::after {
  content: "";
  display: block;
  height: 14px;
  margin-top: 16px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ecai-line-strong) 0 2px,
    var(--ecai-paper-raised) 2px 5px,
    var(--ecai-line-strong) 5px 6px,
    var(--ecai-paper-raised) 6px 10px,
    var(--ecai-line-strong) 10px 13px,
    var(--ecai-paper-raised) 13px 15px
  );
  opacity: 0.55;
}

/* 日付・カテゴリなどの欧文/数字はモノスペースに寄せる（段ボール刷新で比重を上げた）。
   ★日本語グリフを持たない書体なので、日本語が混ざる要素には当てない。
     .post-date / .post-update は日付のみ。 */
body.single-post .article .post-date,
body.single-post .article .post-update {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ecai-ink-faint);
}

/* フォーカスリング。板の上でも見えるように accent。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ecai-accent);
  outline-offset: 2px;
}

/* ===== ECAI 段ボール ここまで ===== */