/*
Theme Name: Kurashimai Child
Template: cocoon-master
Version: 1.0.0
Description: くらしまい（kurashimai.com）用 Cocoon子テーマ。無印トーン（背景白〜アイボリー・文字チャコールグレー・アクセントくすみベージュ/グレージュ・ボタンのみ彩度高め）。スマホ1カラム前提・装飾過多禁止・速度優先（JSゼロ・画像追加なし）。
Author: kurashimai
Text Domain: kurashimai-child
*/

/* ============================================================
   出典（設計正本）:
   - サイト設計書_ペルソナと検品体制_2026-08-11.md
     （サイト①トンマナ: 無印トーン／ペルソナP1・P2／カード型グリッド＋カテゴリ導線4つ）
   - リサーチ_ブログデザイン戦略_2026-08-11.md
     （§2 共通デザインパターン／§5 着地記事: 3秒回収・反復構造・色5色以内）

   パレットは5色: 白 / アイボリー / チャコール / グレージュ / ボタン(テラコッタ)。
   同系トーンの明度違い（淡グレージュ・チャコール淡色）は各色の階調として扱い、
   すべてCSS変数経由で参照する（色調整は :root の1箇所で完結）。
   コントラスト実測（WCAG 2.x 相対輝度で再計算。2026-08-12検品反映）:
   - 本文 #3C3C3A on #FDFCF8 = 10.77:1
   - 補助文字 #66625C on #FFFFFF = 6.06:1 ／ on #EFEAE2 = 5.06:1
   - ボタン白文字 on #B4593B = 4.74:1
   - チャコール #3C3C3A on グレージュ #C9BBA8 = 5.87:1
   （本文・補助文字とも AA 4.5:1 以上を達成。
    グレージュ地 #C9BBA8 に白文字は 1.88:1 のため使用禁止 —
    ラベル・ページ送り・トップへ戻る等はチャコール文字で統一）
   ============================================================ */

:root {
  /* --- パレット（5色） --- */
  --km-white:   #FFFFFF; /* カード・ヘッダー面 */
  --km-ivory:   #FDFCF8; /* ページ背景（白〜アイボリー） */
  --km-text:    #3C3C3A; /* 文字チャコールグレー */
  --km-greige:  #C9BBA8; /* アクセント: くすみベージュ/グレージュ */
  --km-btn:     #B4593B; /* ボタンのみ彩度高め（テラコッタ） */

  /* --- 階調（上記5色の明度違い。独立色ではない） --- */
  --km-greige-light: #EFEAE2; /* グレージュ淡色: 面・帯用 */
  --km-text-muted:   #66625C; /* チャコール淡色: 日付・補助文字（検品#4: #EFEAE2上で5.06:1確保） */
  --km-line:         #E6E1D8; /* グレージュ極淡: 罫線 */
  --km-btn-hover:    #9C4B31; /* ボタン濃色: hover */

  /* --- 寸法 --- */
  --km-radius: 8px;
}

/* ============================================================
   1. ベース（タイポグラフィ・背景）
   Noto Sans系細めゴシック・行間広め・余白多め（設計書トンマナ）。
   速度優先のためWebフォントは読み込まず、端末内蔵のNoto Sans JP/
   ヒラギノ/メイリオ系にフォールバックする。
   ============================================================ */

body {
  background-color: var(--km-ivory);
  color: var(--km-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

a {
  color: var(--km-text);
  text-decoration: underline;
  text-decoration-color: var(--km-greige);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--km-btn);
}

/* ============================================================
   2. ヘッダー・グローバルメニュー
   ============================================================ */

.header {
  background-color: var(--km-white);
  border-bottom: 1px solid var(--km-line);
}

.site-name-text {
  color: var(--km-text);
  font-weight: 500;
  letter-spacing: 0.14em;
}

.tagline {
  color: var(--km-text-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* グローバルナビ（Cocoon: .navi / .navi-in） */
.navi {
  background-color: var(--km-white);
  border-bottom: 1px solid var(--km-line);
}

.navi-in > ul li {
  background-color: transparent;
}

.navi-in a {
  color: var(--km-text);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.navi-in a:hover {
  background-color: var(--km-greige-light);
  color: var(--km-text);
}

/* パンくず */
.breadcrumb {
  color: var(--km-text-muted);
  font-size: 12px;
}

.breadcrumb a {
  color: var(--km-text-muted);
  text-decoration: none;
}

/* ============================================================
   3. 記事一覧カード（カード型グリッド）
   Cocoon: .entry-card-wrap / .entry-card / .entry-card-title /
           .entry-card-snippet / .entry-card-thumb / .cat-label
   ※ 2列カードグリッド自体はCocoon設定「インデックス→カードタイプ:
     縦型カード2列」で実現（cocoon-settings-memo.md参照）。
     CSS側はカードの見た目のみ整える。
   ============================================================ */

.entry-card-wrap {
  background-color: var(--km-white);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  overflow: hidden;
  margin-bottom: 1.5em;
  transition: box-shadow 0.2s ease;
  text-decoration: none;
}

.entry-card-wrap:hover {
  box-shadow: 0 2px 10px rgba(60, 60, 58, 0.10);
}

.entry-card-title {
  color: var(--km-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.entry-card-snippet {
  color: var(--km-text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.entry-card-meta {
  color: var(--km-text-muted);
  font-size: 11px;
}

/* カテゴリラベル（サムネイル左上）
   検品#1: グレージュ地に白文字は1.88:1でNG → チャコール文字（5.87:1） */
.cat-label {
  background-color: var(--km-greige);
  color: var(--km-text);
  border: none;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* ============================================================
   4. 記事本文（.article / .entry-content）
   リスト記事の反復構造（H2＋画像＋短文＋商品カード）が主戦場。
   H2/H3は装飾控えめ・視認性優先。
   ============================================================ */

.entry-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.article h2 {
  background-color: var(--km-greige-light);
  color: var(--km-text);
  font-size: 19px;
  font-weight: 500;
  border: none;
  border-radius: var(--km-radius);
  padding: 0.7em 0.9em;
  margin-top: 2.5em;
  letter-spacing: 0.04em;
}

.article h3 {
  border-left: 4px solid var(--km-greige);
  border-top: none;
  border-bottom: none;
  border-right: none;
  background: none;
  color: var(--km-text);
  font-size: 17px;
  font-weight: 500;
  padding: 0.2em 0 0.2em 0.7em;
  margin-top: 2em;
}

.article p {
  margin-bottom: 1.6em;
}

.article img {
  border-radius: var(--km-radius);
}

/* 目次（Cocoon: .toc） — ジャンプ目次で「3秒で回収」導線 */
.toc {
  background-color: var(--km-white);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  padding: 1em 1.4em;
}

.toc-title {
  color: var(--km-text);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.toc a {
  color: var(--km-text);
  text-decoration: none;
}

/* 引用 */
.article blockquote {
  background-color: var(--km-greige-light);
  border-left: 4px solid var(--km-greige);
  border-radius: 0 var(--km-radius) var(--km-radius) 0;
  color: var(--km-text);
}

/* テーブル（記事内の簡易比較用） */
.article table {
  border-collapse: collapse;
  width: 100%;
}

.article th {
  background-color: var(--km-greige-light);
  color: var(--km-text);
  border: 1px solid var(--km-line);
  font-weight: 500;
}

.article td {
  border: 1px solid var(--km-line);
  background-color: var(--km-white);
}

/* ============================================================
   5. ボタン（唯一の高彩度要素・視線誘導）
   Cocoonボタン（.btn）とブロックボタン（.wp-block-button__link）両対応。
   ============================================================ */

.btn,
.wp-block-button__link {
  background-color: var(--km-btn);
  color: var(--km-white);
  border: none;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: none;
}

.btn:hover,
.wp-block-button__link:hover {
  background-color: var(--km-btn-hover);
  color: var(--km-white);
  opacity: 1;
}

/* ============================================================
   6. トップページ用パーツ（patterns-top.html が参照する独自クラス）
   検品#2: Cocoonは固定ページ本文も .article でラップするため、
   .article h2（詳細度0,1,1）が独自クラス単体（0,1,0）に勝つ。
   トップ用パーツはすべて .article 前置きの高詳細度セレクタを併記し、
   本文h2/h3のグレージュ箱・左罫線をリセットする。
   ============================================================ */

/* フロント固定ページのページタイトル（「トップ」等）を非表示（検品#5）。
   ホームページ表示を固定ページにした場合のみ効く */
.home.page .entry-title {
  display: none;
}

/* ヒーロー（キャッチコピー帯） */
.km-hero {
  background-color: var(--km-white);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  padding: 2.2em 1.4em;
  text-align: center;
  margin-bottom: 2em;
}

/* ヒーロー内h2は .article h2 の帯装飾をリセット */
.article .km-hero h2,
.km-hero h2 {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.6em;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.article .km-hero p,
.km-hero p {
  color: var(--km-text-muted);
  font-size: 14px;
}

/* カテゴリ導線カード（4つ: 部屋別収納/アイテム別/キッズ・行事/キッチン時短） */
.km-cat-card {
  background-color: var(--km-greige-light);
  border-radius: var(--km-radius);
  padding: 1.4em 1.2em;
  height: 100%;
}

.article .km-cat-card h3,
.km-cat-card h3 {
  border: none;
  background: none;
  padding: 0;
  margin: 0 0 0.4em;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.article .km-cat-card p,
.km-cat-card p {
  color: var(--km-text-muted);
  font-size: 13px;
  margin-bottom: 1em;
}

/* セクション見出し（トップの「カテゴリから探す」「新着記事」）
   .article h2 の帯装飾をリセットしてセンター見出しに */
.article .km-section-title,
.km-section-title {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.16em;
  border: none;
  background: none;
  padding: 0;
  margin: 2.5em 0 1.2em;
}

/* --- 新着記事グリッド（コアブロック wp:latest-posts）のカード化（検品#3）
   latest-postsは .entry-card 系でなく .wp-block-latest-posts__list で
   出力されるため、entry-card相当のカード見た目をここで与える。
   コア側が600px未満で1カラムに落とすため、スマホ1カラム前提とも整合 --- */

.wp-block-latest-posts.wp-block-latest-posts__list {
  padding-left: 0;
  list-style: none;
}

.wp-block-latest-posts > li {
  background-color: var(--km-white);
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  overflow: hidden;
  margin-bottom: 1.5em;
  transition: box-shadow 0.2s ease;
}

.wp-block-latest-posts > li:hover {
  box-shadow: 0 2px 10px rgba(60, 60, 58, 0.10);
}

.wp-block-latest-posts__featured-image {
  margin: 0;
}

.wp-block-latest-posts__featured-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* タイトルリンク（新しめのWPは a.wp-block-latest-posts__post-title、
   古い出力は li 直下の a。両方に当てる） */
.wp-block-latest-posts__post-title,
.wp-block-latest-posts > li > a {
  display: block;
  padding: 0.8em 1em 0.2em;
  color: var(--km-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
}

.wp-block-latest-posts__post-date {
  display: block;
  padding: 0 1.1em 0.9em;
  color: var(--km-text-muted);
  font-size: 11px;
}

/* ============================================================
   7. フッター・ページネーション・その他
   ============================================================ */

.footer {
  background-color: var(--km-greige-light);
  color: var(--km-text);
}

.footer a {
  color: var(--km-text);
  text-decoration: none;
}

.footer-bottom,
.copyright {
  color: var(--km-text-muted);
  font-size: 11px;
}

.pagination .page-numbers {
  color: var(--km-text);
  background-color: var(--km-white);
  border: 1px solid var(--km-line);
  border-radius: 4px;
}

/* 検品#1: グレージュ地に白文字は1.88:1でNG → チャコール文字（5.87:1） */
.pagination .current {
  background-color: var(--km-greige);
  color: var(--km-text);
  border-color: var(--km-greige);
}

/* トップへ戻るボタン
   検品#1: 白アイコン→チャコール。opacityも撤去（透過で実効コントラストが下がるため） */
.go-to-top-button {
  background-color: var(--km-greige);
  color: var(--km-text);
}

/* SNSシェアボタンはトーンを抑える（装飾過多禁止） */
.sns-share {
  opacity: 0.9;
}

/* ============================================================
   8. スマホ（1カラム前提の微調整）
   Cocoonは834px以下でサイドバーが下に落ちる既定挙動のため
   レイアウト変更は不要。余白と文字サイズのみ調整。
   ============================================================ */

@media screen and (max-width: 480px) {
  .entry-title {
    font-size: 19px;
  }

  .article h2 {
    font-size: 17px;
  }

  .article h3 {
    font-size: 15px;
  }

  .km-hero {
    padding: 1.6em 1em;
  }
}

/* ============================================================
   9. 要実機確認（Cocoon/プラグインの実DOM確認後に有効化・調整）
   ------------------------------------------------------------
   以下はクラス名の存在・構造に自信が持てないため、実機のDOMを
   確認してから調整すること。壊れても表示崩れしない安全な指定のみ
   先行して置いてある。

   [チェックリスト]
   - .navi-in a（検品#6）: Cocoon親CSS側が「#navi .navi-in > ul > li > a」等の
     高詳細度セレクタで色指定している場合、本ファイルの .navi-in a（0,1,1）が
     負ける。実機DevToolsで打ち消し状況を確認し、負けていたら親と同型の
     セレクタに引き上げること
   - .appeal / .author-box / .pochipp-box: クラス名自体が想定値
   - wp:latest-posts の実出力クラス（__post-title の有無はWPバージョン依存）
   ============================================================ */

/* 要実機確認: アピールエリア（Cocoon設定→アピールエリア使用時） */
.appeal {
  background-color: var(--km-greige-light);
}

/* 要実機確認: 著者ボックス（プロフィール表示時のクラス名） */
.author-box {
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
  background-color: var(--km-white);
}

/* 要実機確認: Pochipp無料版カードの外枠クラス（.pochipp-box想定）。
   ボタン3色（Amazon/楽天/Yahoo!）はPochipp側の既定色を尊重し、
   枠のみトーンを合わせる */
.pochipp-box {
  border: 1px solid var(--km-line);
  border-radius: var(--km-radius);
}


/* ============================================================
   記事冒頭の表記（PR＋AI開示・チップ型1行）
   正本: vault 設計_記事冒頭表記ブロック_2026-08-13
   ============================================================ */
.pr-disclosure {
  font-size: 0.75rem;
  color: #8a8680;
  line-height: 1.6;
  margin: 0 0 1.6em;
}
.pr-disclosure .pr-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #8a8680;
  border: 1px solid #d5d0c8;
  border-radius: 3px;
  padding: 0 0.45em;
  margin-right: 0.6em;
  vertical-align: 0.08em;
}