/*!
 * toppage-f-base.css - Daily Picks トップページ F案「落書きスクラップブック」共通CSS（基盤）
 *
 * 担当ジョブ: ①子テーマ基盤・ヘッダー/フッター実装
 *
 * 値の出典
 *   reference/DirectionF.dc.html（F案の原本）の oklch 値・線・影・傾きをそのまま踏襲する。
 *   トークン名と可変レイアウトの組み方は toppage-f-prototype/static/assets/css/toppage-f.css に合わせ、
 *   同じ変数名で後続ジョブがセクションCSSを足せるようにしてある。色は1つも変えていない。
 *
 * このファイルに入れるもの（①の範囲）
 *   - デザイントークン（配色・カルーセルの基準値・左右余白）
 *   - 共通パーツ（カード／マスキングテープ／付箋／サムネイル枠）
 *   - ページ全体の骨格（.f-root / .f-content / .f-hero-row / .f-main-row / .f-main / .f-side）
 *   - 見出しの共通形（.f-section-head / .f-section-title / .f-underline）
 *   - ヘッダー・フッター
 *   - アクセシビリティ基盤（スキップリンク・フォーカス可視化・reduced motion）
 *   - 差し込み待ちセクションのプレースホルダー表示
 *   - ブレークポイント（768 / 1024）の土台
 *
 * このファイルに入れないもの（②〜⑤の範囲）
 *   ヒーロー／トレンド／カルーセル／記事カード／カテゴリーカード／
 *   べんりツールバナー／サイドバー中身の見た目。
 *   各ジョブは assets/css/ に自分のCSSを足すか、このファイルの末尾へ追記する。
 *
 * ブレークポイント
 *   〜768px    スマートフォン
 *   769〜1024  タブレット
 *   1025px〜   PC
 */

/* ------------------------------------------------------------------ *
 * デザイントークン（原本の oklch 値をそのまま変数化）
 * ------------------------------------------------------------------ */
:root {
  --f-paper:        oklch(97% 0.01 90);    /* 背景の紙色 */
  --f-ink:          oklch(22% 0.01 60);    /* 本文インク */
  --f-ink-line:     oklch(25% 0.01 60);    /* カードの枠線・区切り線 */
  --f-ink-sub:      oklch(45% 0.01 60);    /* 補足テキスト */
  --f-ink-muted:    oklch(50% 0.01 60);    /* さらに薄い注記 */
  --f-ink-footer:   oklch(40% 0.01 60);    /* フッター */
  --f-shadow:       oklch(85% 0.01 60);    /* カードのベタ影 */
  --f-hairline:     oklch(85% 0.02 60);    /* 破線・非アクティブドット */
  --f-red:          oklch(55% 0.19 25);    /* 手書きアクセント（赤ペン） */
  --f-red-soft:     oklch(50% 0.08 20);    /* カテゴリー名などの淡い赤 */
  --f-red-tag:      oklch(45% 0.08 20);    /* タグライン */
  --f-tape-pink:    oklch(80% 0.08 20);
  --f-tape-yellow:  oklch(78% 0.1 85);
  --f-tape-green:   oklch(80% 0.08 160);
  --f-thumb-bg:     oklch(94% 0.015 90);   /* サムネイル枠の下地 */
  --f-thumb-border: oklch(85% 0.01 90);
  --f-thumb-icon:   oklch(78% 0.01 90);
  --f-sticky-bg:    oklch(92% 0.06 95);
  --f-sticky-border:oklch(75% 0.06 95);
  --f-avatar-bg:    oklch(90% 0.06 160);

  /* カルーセルの基準値（原本JSの移動量 302px / 164px と一致）。
     カード幅はブレークポイントごとに差し替える。③④のJSは実寸を測って追随させる。 */
  --f-article-card-w:  280px;
  --f-article-gap:      22px;   /* step = 302px */
  --f-category-card-w: 150px;
  --f-category-gap:     14px;   /* step = 164px */

  /* 左右の余白。画面幅に応じて詰める */
  --f-gutter: 56px;

  /* 行間の縦の間隔 */
  --f-row-gap: 32px;
}

/* ------------------------------------------------------------------ *
 * ページ全体の骨格
 * ------------------------------------------------------------------ */

/* Cocoon 本体のCSSも読み込まれた状態で重ねるため、影響範囲は .f-root 配下に限る。
   body への指定だけは背景色を紙色に合わせる用途で必要。 */
body.dp-f-front { margin: 0; background: var(--f-paper); }

.f-root,
.f-root *,
.f-root *::before,
.f-root *::after { box-sizing: border-box; }

.f-root {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--f-paper);
  font-family: 'Kosugi Maru', sans-serif;
  color: var(--f-ink);
  position: relative;
  overflow-x: hidden; /* テープ・傾きのはみ出しで横スクロールを出さない */
}

/* 見出し・段落は要素の既定値を打ち消し、各パーツの指定だけを効かせる。
   （意味づけのため h1 / h2 / p を使うが、見た目は原本のままにする）

   :where() で包んで詳細度を 0 にしてある。
   これが無いと「.f-root h1」(0,1,1) が「.f-header__logo」(0,1,0) に勝ってしまい、
   パーツ側の font-size がすべて無効になる。 */
:where(.f-root) :where(h1, h2, h3, h4, p, ul, ol, figure) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
:where(.f-root) :where(ul, ol) { list-style: none; }

.f-hand { font-family: 'Yomogi', cursive; }

/* リンクの既定も詳細度 0 にして、各パーツのクラス指定が必ず勝つようにする。 */
:where(.f-root) a { color: var(--f-ink); text-decoration: none; }

/* カードのリンク先が分かるよう、カード全体にホバーしたら見出しへ下線を出す。
   README の「共通パーツ」に相当する扱いだが定義が抜けていたため②が追記した。
   カード見出しには .f-card-title を付ける（②〜⑤共通）。 */
.f-root a:hover .f-card-title,
.f-root a.f-card:hover .f-card-title { text-decoration: underline; }

/* 本文の行（ヒーロー行・メイン行）。中身は②〜⑤が差し込む。 */
.f-hero-row {
  display: flex;
  gap: var(--f-row-gap);
  align-items: flex-start;
  padding: 44px var(--f-gutter) 10px;
}
.f-main-row {
  display: flex;
  gap: var(--f-row-gap);
  align-items: flex-start;
  padding: 26px var(--f-gutter) 44px;
}
.f-main { flex: 2.3; min-width: 0; }   /* min-width:0 が無いとカルーセルが親を押し広げる */
.f-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* セクション同士の縦の間隔。メインカラム内の並び順は front-page.php が固定する。 */
.f-main > .f-block + .f-block { margin-top: 26px; }

/* ------------------------------------------------------------------ *
 * 共通パーツ（カード・テープ・付箋・サムネイル枠）
 * ------------------------------------------------------------------ */
.f-card {
  background: white;
  border: 2px solid var(--f-ink-line);
  border-radius: 3px;
  box-shadow: 5px 5px 0 var(--f-shadow);
  position: relative;
  display: block;
}

.f-tape {
  position: absolute;
  height: 34px;
  opacity: 0.85;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.f-tape--pink   { background: var(--f-tape-pink); }
.f-tape--yellow { background: var(--f-tape-yellow); }
.f-tape--green  { background: var(--f-tape-green); }

/* テープの左右位置。README の「共通パーツ」表に載っているが定義が抜けていたため
   ②が追記した（③④のカード上端に貼るテープが同じ指定を使う）。
   カード側で専用の left/top を持たせたいときは、この pos クラスを付けずに
   セクション側のクラス（例: .f-trend__tape）だけで位置を決める。 */
.f-tape--pos-left   { left: 12px; }
.f-tape--pos-right  { right: 12px; }
.f-tape--pos-center { left: 50%; margin-left: -28px; }

.f-sticky {
  background: var(--f-sticky-bg);
  border: 1px solid var(--f-sticky-border);
  box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
  font-family: 'Yomogi', cursive;
}

.f-thumb {
  background: var(--f-thumb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.f-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ *
 * セクション見出しの共通形（③④⑤が使う）
 * ------------------------------------------------------------------ */
.f-section-head { display: flex; align-items: baseline; gap: 10px; }
.f-section-title { font-size: 24px; margin-bottom: 6px; transform: rotate(-1deg); display: inline-block; }
.f-section-title--sm { font-size: 22px; }
.f-section-note { font-size: 12px; color: var(--f-ink-muted); }
.f-underline { height: 2px; width: 220px; background: var(--f-tape-yellow); margin-bottom: 22px; }
.f-underline--pink { width: 200px; background: var(--f-tape-pink); }

/* ------------------------------------------------------------------ *
 * ヘッダー（破った紙のギザギザ）
 * ------------------------------------------------------------------ */
.f-header {
  position: relative;
  padding: 34px var(--f-gutter) 26px;
  background: white;
  border-bottom: 2px solid var(--f-ink-line);
  clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 97% 100%, 94% 90%, 91% 100%, 88% 90%, 85% 100%,
    82% 90%, 79% 100%, 76% 90%, 73% 100%, 70% 90%, 67% 100%, 64% 90%, 61% 100%, 58% 90%,
    55% 100%, 52% 90%, 49% 100%, 46% 90%, 43% 100%, 40% 90%, 37% 100%, 34% 90%, 31% 100%,
    28% 90%, 25% 100%, 22% 90%, 19% 100%, 16% 90%, 13% 100%, 10% 90%, 7% 100%, 4% 90%,
    1% 100%, 0% 92%);
}
.f-header__inner { display: flex; align-items: center; gap: 16px; }
.f-header__tape { width: 70px; left: 36px; top: -10px; transform: rotate(-8deg); }
.f-header__logo {
  font-size: 34px;
  font-weight: 700;
  color: var(--f-ink);
  transform: rotate(-2deg);
}
.f-header__logo a { color: inherit; display: inline-block; }
.f-header__tagline {
  font-size: 14px;
  color: var(--f-red-tag);
  transform: rotate(-3deg);
  margin-top: 14px;
}

/* 2026-08-30追加: ヘッダー右側の記事検索ボックス（.f-header__inner の flex + margin-left:auto で右寄せ） */
.f-header__search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.f-header__search-input {
  width: 180px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--f-ink-line);
  border-radius: 999px;
  font-size: 13px;
  background: var(--f-paper);
  color: var(--f-ink);
}
.f-header__search-input:focus {
  outline: 2px solid var(--f-red-tag);
  outline-offset: 1px;
}
.f-header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--f-ink-line);
  border-radius: 50%;
  background: var(--f-paper);
  color: var(--f-ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.f-header__search-btn:hover { background: white; }

/* clip-path のギザギザは装飾なので、ヘッダー直下に隙間が出ないよう次の行を詰める */
.f-header + .f-content > .f-hero-row { padding-top: 40px; }

/* ------------------------------------------------------------------ *
 * フッター
 * ------------------------------------------------------------------ */
.f-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px var(--f-gutter);
  border-top: 2px solid var(--f-ink-line);
}
.f-footer__copy { font-size: 13px; color: var(--f-ink-footer); }
.f-footer__links { display: flex; gap: 18px; font-size: 12px; color: var(--f-ink-sub); }
.f-footer__links a { color: var(--f-ink-sub); }
.f-footer__links a:hover { text-decoration: underline; }
/* 実在しないページはリンクにせず、テキストのまま出す（front footer.php 側の分岐と対で使う） */
.f-footer__links span { color: var(--f-ink-sub); }

/* ------------------------------------------------------------------ *
 * アクセシビリティ基盤
 * ------------------------------------------------------------------ */

/* キーボード操作の現在地を必ず見せる（マウス操作時には出さない）。
   赤ペン色は紙・白のどちらの上でも 5.35:1 以上あり、非テキストの 3:1 を満たす。 */
.f-root a:focus-visible,
.f-root button:focus-visible,
.f-root [tabindex]:focus-visible,
.f-skiplink:focus-visible {
  outline: 3px solid var(--f-red);
  outline-offset: 3px;
}

/* focus-visible 未対応ブラウザでも見えなくならないようにする（対応ブラウザでは打ち消す） */
.f-root a:focus,
.f-root button:focus { outline: 3px solid var(--f-red); outline-offset: 3px; }
.f-root a:focus:not(:focus-visible),
.f-root button:focus:not(:focus-visible) { outline: none; }

/* 本文へスキップ。フォーカスが当たるまでは画面外へ逃がす。 */
.f-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: white;
  color: var(--f-ink);
  border: 2px solid var(--f-ink-line);
  box-shadow: 3px 3px 0 var(--f-shadow);
  font-family: 'Kosugi Maru', sans-serif;
  font-size: 14px;
}
.f-skiplink:focus { left: 8px; top: 8px; }

/* スクリーンリーダー専用テキスト（見出しの補完などに使う） */
.f-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 動きを減らす設定。自動スライドの停止は③④のJS側で行う。 */
@media (prefers-reduced-motion: reduce) {
  .f-root *,
  .f-root *::before,
  .f-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 * 差し込み待ちセクションのプレースホルダー
 *   wp-config.php か functions.php で define( 'DP_F_PLACEHOLDERS', true ) にしたときだけ出る。
 *   既定は非表示。本番では HTML コメントだけが残る。
 * ------------------------------------------------------------------ */
.f-placeholder {
  margin: 0 var(--f-gutter) 20px;
  padding: 22px 20px;
  border: 2px dashed var(--f-ink-line);
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg,
    white, white 10px,
    var(--f-thumb-bg) 10px, var(--f-thumb-bg) 20px
  );
  color: var(--f-ink-sub);
  font-size: 12.5px;
  line-height: 1.8;
  /* ファイルパスは途中に折り返し位置が無いため、狭い画面でどこでも折り返させる */
  overflow-wrap: anywhere;
}
.f-main .f-placeholder,
.f-side .f-placeholder { margin-left: 0; margin-right: 0; }
.f-placeholder__title { font-family: 'Yomogi', cursive; font-size: 15px; color: var(--f-ink); }
.f-placeholder__job { color: var(--f-red); }

/* ================================================================== *
 * レスポンシブ
 *   1025px〜   PC        : 上の定義がそのまま効く
 *   769〜1024  タブレット: サイドバーをメインカラムの下へ。記事2枚／カテゴリー4枚
 *   〜768px    スマホ    : 1カラム。記事1枚（次のカードが少し覗く）／カテゴリー2枚
 * ================================================================== */

/* --- タブレット（769〜1024px） ------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --f-gutter: 32px;
    --f-row-gap: 28px;
    /* 2枚見せ: (表示幅 - gap) / 2 */
    --f-article-card-w: calc((100% - var(--f-article-gap)) / 2);
    /* 4枚見せ */
    --f-category-card-w: calc((100% - var(--f-category-gap) * 3) / 4);
  }

  /* サイドバーはメインカラムの下へ（横並びをやめる） */
  .f-hero-row,
  .f-main-row { flex-direction: column; }
  .f-main,
  .f-side { flex: 1 1 auto; width: 100%; }
  .f-side { flex-direction: row; flex-wrap: wrap; }

  .f-section-title { font-size: 22px; }
  .f-section-title--sm { font-size: 20px; }
}

/* --- スマートフォン（〜768px） ------------------------------------- */
@media (max-width: 768px) {
  :root {
    --f-gutter: 18px;
    --f-row-gap: 24px;
    /* 1枚見せ。右端に次のカードを 26px だけ覗かせて、横に続くことを示す */
    --f-article-card-w: calc(100% - 26px);
    /* 2枚見せ */
    --f-category-card-w: calc((100% - var(--f-category-gap)) / 2);
  }

  .f-header { padding: 24px var(--f-gutter) 20px; }
  .f-header__inner { flex-wrap: wrap; gap: 8px; }
  .f-header__logo { font-size: 26px; }
  .f-header__tagline { margin-top: 0; }
  .f-header__tape { left: 20px; }
  .f-header__search { flex: 1 1 100%; margin-left: 0; }
  .f-header__search-input { width: 100%; }

  .f-hero-row { padding: 28px var(--f-gutter) 8px; }
  .f-header + .f-content > .f-hero-row { padding-top: 26px; }
  .f-main-row { padding: 20px var(--f-gutter) 32px; }

  .f-side { flex-direction: column; }

  .f-section-title { font-size: 20px; }
  .f-section-title--sm { font-size: 18px; }
  .f-section-head { flex-wrap: wrap; gap: 6px; }
  .f-underline { width: 150px; margin-bottom: 16px; }
  .f-underline--pink { width: 140px; }

  .f-footer { flex-direction: column; align-items: flex-start; padding: 18px var(--f-gutter) 26px; }
  .f-footer__links { flex-wrap: wrap; gap: 12px 18px; }
}