@charset "UTF-8";
/* =====================================================================
   kumashacho-blog 共通トークン
   色はすべてここのCSS変数経由で参照する（各画面のCSSに実色を直書きしない）。

   テーマ（2026-08 ビジュアル調査を受けて刷新）:
     「生成りの紙に、茶色のインク」。色の出どころはすべてロゴ（くま）。
     ロゴの実測比率は 茶系43% / キャラメル23% / クリーム8% / 青緑8% で、
     青緑は「帽子とネクタイの色」＝差し色。旧テーマはこれを反転させて
     青緑をベースに使っていたため、ロゴが浮き、量産テンプレートに見えていた。

     地色      #F7F1E4（生成り）        … 画面の約58%
     記事面    #FFFDF8（紙白）          … 約22%
     墨        #2A1810（茶寄りの黒）    … 約13%
     青緑      #00767C                  … 約5%。機能色に降格。
                                          リンクと現在地表示にだけ使う。
     レンガ    #B4402C                  … 約2%。行動を促すもの専用（CTA・いいね）。
     キャラメル#E8A857                  … 線と点だけ。塗り・文字色には使わない
                                          （生成り地でのコントラストが1.7:1しかない）。

   青緑を外した箇所（箇条書きの点・目次番号・h3の文字色・フッタ地色・区切りバー）は、
   墨／キャラメルの線／余白に置き換えている。色を足して解決しないこと。
   ===================================================================== */
:root {
  /* ---- 地と面（反転構造：地色が生成り、記事やパネルが載る面が紙白）---- */
  --color-base:          #F7F1E4; /* ページ地色＝生成り */
  --color-surface:       #FFFDF8; /* 記事本文・パネルが載る面 */
  --color-section:       #FFFDF8; /* セクション背景（旧テーマとは明暗が逆） */
  --color-base-warm:     #F7F1E4; /* スタジオ地色 */
  --color-white:         #FFFDF8; /* 純白は使わない。紙白で統一する */

  /* ---- 墨（すべて茶寄り。青みグレーはこのテーマに存在しない）---- */
  --color-ink-heading:   #2A1810;
  --color-ink-body:      #3F2C20;
  --color-ink-body-light:#5C4638;
  /* 12〜13pxの注記にも使うので、生成り地で4.5:1を確保できる濃さにしてある（4.65:1） */
  --color-muted:         #7E6858;
  --color-muted-2:       #8E7A6A; /* 無効状態など、読ませなくてよいものだけ */

  /* ---- 罫 ---- */
  --color-border:        #E0D3BC; /* 通常の1px罫 */
  --color-border-strong: #CDBB9E; /* アウトラインボタン・ページャの枠 */
  --color-rule-heavy:    #2A1810; /* 節目の太罫（2〜3px）。通常罫とはっきり別物にする */

  /* ---- 青緑＝機能色。リンクと現在地表示だけ ---- */
  --color-primary:       #00767C; /* 生成り地で4.8:1 */
  --color-primary-deep:  #005F64; /* hover・訪問済み */
  --color-primary-tint:  #DCE9E7; /* 現在地のごく薄い背景。多用しない */

  /* ---- キャラメル＝線と点だけ（文字色に使わないこと）---- */
  --color-line-accent:   #E8A857;

  /* ---- レンガ＝差し色。行動を促すもの専用 ---- */
  --color-spot:          #B4402C; /* 生成り地で5.1:1 */
  --color-spot-deep:     #97331F;
  --color-spot-tint:     #F4E7DC;
  --color-spot-border:   #E0C3B0;
  /* 旧テーマのコーラル #E8734A（--color-cta 系）は廃止し、CTAはレンガに一本化した。
     生成り地ではコーラルは地色と色相が近く彩度だけ高い＝浮く色になるうえ、
     「いちばん目立つ色」が2つあると互いを弱めるため。
     別名は残していない（同じ色に2つの名前があると、いずれ片方だけズレる）。 */

  /* ---- フッタ（濃ティール → 墨）---- */
  --color-footer-deep:   #2A1810;
  --color-on-dark:       #E7DCC8;
  --color-on-dark-dim:   #CBB9A0;
  --color-on-dark-faint: #A08D77;

  /* ---- 状態色（すべて暖色側に寄せる）---- */
  --color-attention:        #8A5A12; /* 承認待ち・注意喚起 */
  --color-attention-tint:   #F5E7CE;
  --color-attention-border: #E3CFA6;
  --color-danger:           #A83A28; /* 削除・エラー */
  --color-danger-deep:      #8A2C1D;
  --color-danger-tint:      #F5E0DA;
  --color-danger-border:    #E0BCB0;
  --color-success:          #4C6B2F;
  --color-success-tint:     #E7EDDC;
  --color-neutral-tint:     #EDE4D3;

  /* ---- 画像の上に重ねる暗幕・ポップオーバー地色（墨ベース）---- */
  --color-overlay-dark:   #2A1810;
  --color-overlay-scrim:  rgba(42, 24, 16, 0.45);
  --color-scrim-soft:     rgba(42, 24, 16, 0.60);
  --color-surface-veil:   rgba(255, 253, 248, 0.97); /* 固定ツールバーの半透明地色 */
  --color-tool-solid:     rgba(42, 24, 16, 0.92);
  --color-tool-solid-on:  rgba(42, 24, 16, 1);
  --color-danger-solid:   rgba(168, 58, 40, 0.95);

  /* ---- 影は「浮かせたいもの」だけ。面の区切りは罫線か余白で行う ---- */
  --shadow-inline: 0 6px 20px rgba(42, 24, 16, 0.22);
  --shadow-pop:    0 8px 26px rgba(42, 24, 16, 0.22);
  --shadow-modal:  0 12px 40px rgba(42, 24, 16, 0.24);

  /* ---- 記事カテゴリ4色 ----------------------------------------------
     色相を離しつつ明度・彩度を揃える（並んだとき同じ「重さ」に見せるため）。
     旧テーマは3色がティールの濃淡で、隣り合うと区別できなかった。
     バッジは枠線＋文字色だけで描き、塗りつぶさない（4色の塗りが並ぶと騒がしい）。
     -tint はサムネ未設定時のプレースホルダ地色に使う（「こここ」方式の識別）。
     カテゴリの定義そのものは src/lib/categories.js が唯一の定義元。 */
  --color-cat-news:          #1F6E78;
  --color-cat-news-tint:     #DCE8EA;
  --color-cat-seido:         #8A5A12;
  --color-cat-seido-tint:    #F0E4CE;
  --color-cat-hattatsu:      #4C6B2F;
  --color-cat-hattatsu-tint: #E4EADA;
  --color-cat-ai:            #8C3F63;
  --color-cat-ai-tint:       #EFE0E7;

  /* sticky の積み上げ高さ（ヘッダー＋カテゴリタブ）。目次アンカーのオフセットにも使う */
  --h-header: 56px;
  --h-tabs:   48px; /* タブ44px＋上余白2px＋帯下のキャラメル罫2px */

  /* 本文カラーパレット（記事本文の文字色。キー名で保存→ここで実色定義）
     生成り地に合わせて彩度を1段落としている。
     ※ public/js/editor.js の COLOR_HEX と必ず同じ値にすること */
  --blog-color-default: var(--color-ink-body);
  --blog-color-blue:    #1F6E78;
  --blog-color-red:     #B4402C;
  --blog-color-orange:  #B5722A;
  --blog-color-green:   #4C6B2F;
  --blog-color-gray:    #7E6858;
  --blog-color-swatch-default: #E4D9C4; /* エディタのスウォッチ「いろなし」表示用 */

  /* ---- 書体 ----------------------------------------------------------
     丸ゴシックは「サイト名」と「記事タイトル」だけに使う。
     ボタン・バッジ・タブ・カード見出し・ページャ・目次まで丸ゴにすると
     画面の8割が丸ゴになり、子ども向けアプリの表情に振れる。
     本文はWebフォントを足さず、游ゴシック等のシステムフォントで組む
     （調査した日本語メディアはいずれもシステムフォントだった）。 */
  --font-heading: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-body:    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic Medium',
                  YuGothic, 'Yu Gothic', 'Noto Sans JP', Meiryo, system-ui, sans-serif;
  /* 日付・件数・注記など「数字が並ぶもの」用。編集部らしい表情になる */
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- 角丸は用途ごとに変える（全部同じ丸みだとリズムが生まれない）----
     写真だけロゴのくま（丸い頭＋角ばった体）に由来する非対称の丸みを持たせる。 */
  --radius-photo:    2px 2px 2px 18px;
  --radius-photo-sm: 2px 2px 2px 12px;
  --radius-btn:      4px;
  --radius-card:     0;   /* 箱は角丸を持たない。罫線と余白で区切る */
  --radius-card-lg:  0;
  --radius-pill:     999px; /* アバターといいねボタンだけ */

  --maxw: 1120px;
  --gutter: 22px;

  /* セクション間の余白は大小をつける（同じ間隔で並べると読み物にならない） */
  --space-sec:    56px;
  --space-sec-lg: 88px;

  /* アイキャッチが無いときの地色（サムネが小さく文字を置けない場合のみ使う）。
     斜線のプレースホルダは廃止した。「画像が無い」ではなく「そういうデザイン」に見せる。 */
  --color-thumb-empty: var(--color-neutral-tint);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-ink-body);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-deep); }
h1,h2,h3,p,ul,ol { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 器 */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }

/* ボタン（本文書体。丸ゴシックは使わない）
   角丸4px＝「押せるもの」の形。写真やパネルとは別の丸みにして役割を区別する。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700;
  border-radius: var(--radius-btn); text-decoration: none; cursor: pointer;
  border: none; line-height: 1.4; text-align: center;
  min-height: 44px; /* タップ領域44px以上 */
}
/* CTA＝レンガ。影で浮かせない（塗りと文字の強さだけで十分に立つ） */
.btn-cta {
  background: var(--color-spot); color: var(--color-white); font-size: 16px; padding: 15px 32px;
}
.btn-cta:hover { color: var(--color-white); background: var(--color-spot-deep); }
.btn-cta--block { width: 100%; }
.btn-outline {
  background: transparent; border: 1.5px solid var(--color-border-strong); color: var(--color-primary-deep);
  font-size: 14px; padding: 12px 22px;
}
.btn-outline:hover { color: var(--color-primary-deep); background: var(--color-primary-tint); }
.btn-outline--block { width: 100%; }
.btn-primary {
  background: var(--color-primary); color: var(--color-white); font-size: 15px; padding: 13px 26px;
}
.btn-primary:hover { color: var(--color-white); background: var(--color-primary-deep); }
.btn-ghost {
  background: transparent; color: var(--color-primary); font-size: 14px; padding: 10px 16px;
}
.btn-danger {
  background: var(--color-surface); border: 1.5px solid var(--color-danger-border); color: var(--color-danger);
  font-size: 14px; padding: 12px 20px;
}
.btn-danger:hover { background: var(--color-danger-tint); color: var(--color-danger); }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 18px;
}

/* お知らせカテゴリ・状態バッジ。塗りつぶさず枠線で描く */
.badge {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: 11px; padding: 2px 9px; border-radius: 0;
  background: transparent; border: 1.5px solid var(--color-border-strong); color: var(--color-ink-body-light);
}
.badge--important { border-color: var(--color-danger); color: var(--color-danger); }
.badge--pinned    { border-color: var(--color-attention); color: var(--color-attention); }
.badge--draft     { border-color: var(--color-border-strong); color: var(--color-muted); }
.badge--pending   { border-color: var(--color-attention); color: var(--color-attention); }
.badge--approved  { border-color: var(--color-success); color: var(--color-success); }
.badge--published { border-color: var(--color-primary); color: var(--color-primary-deep); }
.badge--archived  { border-color: var(--color-border); color: var(--color-muted-2); }

/* アバター丸 */
.avatar {
  width: 34px; height: 34px; border-radius: var(--radius-pill); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-white); font-family: var(--font-body); font-weight: 700; font-size: 15px;
}