/* 京都丹波ナビ 共通トークン＋サイトヘッダー。
   2026-08-07 全面リニューアル（P6「表紙と誌面」を採用）。
   このファイルが配色・書体の唯一の正。静的ページ・掲載案内・申込フォームが読み込み、
   scripts/prerender.mjs は生成ページに inline する。アプリ本体は src/styles/main.css の
   最終 :root で同じ値を持つ（Vite バンドルのため別管理・値は必ず一致させること）。 */

:root {
  /* 誌面（P5由来） */
  --ktn-bg: #f5f5f2;
  --ktn-paper: #fff;
  --ktn-ink: #101010;
  --ktn-ink-mid: #444;
  --ktn-ink-pale: #5f6368;
  --ktn-navy: #1c3560;
  --ktn-gold: #b98a2e;
  --ktn-rule: rgba(16, 16, 16, .16);

  /* 市町 */
  --ktn-kameoka: #a5573a;
  --ktn-nantan: #5b7d4b;
  --ktn-kyotamba: #3a6a8c;

  /* 書体（OS内蔵のみ・Webフォント読み込みなし） */
  --ktn-min: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "HGS明朝E", Georgia, serif;
  --ktn-san: -apple-system, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif;
  --ktn-mon: "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

/* ── サイトヘッダー（誌面のヘッダ罫）──
   トップは画面下端の固定ナビだが、下層ページは上部ヘッダー。
   どちらも同じ書体・同じ罫線で「同じ誌面」に見せる。 */
/* **自分の箱の数え方は自分で持つ。** ページ側の reset に頼っていたため、
   box-sizing の無い入口（/bousai/ など Vite の HTML）だけ padding が外へ出て、
   同じ CSS で高さが 165px と 215px に割れていた（2026-08-27 実測）。 */
.ktn-header, .ktn-header * { box-sizing: border-box; }
footer.site, footer.site * { box-sizing: border-box; }

.ktn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 11px 20px;
  background: color-mix(in srgb, var(--ktn-bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ktn-ink);
  font-family: var(--ktn-san);
}
/* 店の紹介ページ（public/shops/*）は各店で作った固有のヘッダーを持っている。
   そこへ sticky を重ねると二段に貼りつくので、これらのページでは流す。
   下層ページの生成物は従来どおり sticky のまま。 */
.ktn-header--static { position: static; }

.ktn-header .ktn-in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ktn-header .ktn-brand {
  display: flex;
  /* 文字の高さは19px。押せる範囲だけ広げる（見た目の並びは baseline のまま）。 */
  padding-block: 10px;
  align-items: baseline;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: var(--ktn-ink);
}
.ktn-header .ktn-brand img { display: none; }
.ktn-header .ktn-brand b {
  font-family: var(--ktn-min);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
}
.ktn-header .ktn-brand::after {
  content: "KYOTO TAMBA NAVI";
  font-family: var(--ktn-mon);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ktn-ink-pale);
}
.ktn-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.ktn-header nav a {
  /* ナビは本文より下限を上げる。13px・タップ34px では、老眼の人が
     「読む前に押せない」で終わる。16px・タップ44px を確保する。 */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ktn-ink);
  text-decoration: none;
  padding: 11px 0;
  min-height: 44px;
  /* **行間も自分で持つ。** ページ側の body{line-height} を継承していたため、
     生成ページ 53px / Vite 入口 44px と、同じ CSS でリンクの高さが割れていた
     （2026-08-27 実測。box-sizing と同じ種類の取りこぼし）。 */
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}
.ktn-header nav a:hover,
.ktn-header nav a:focus-visible { border-bottom-color: var(--ktn-ink); outline: none; }
.ktn-header nav a.ktn-cta {
  color: #fff;
  background: var(--ktn-navy);
  padding: 7px 15px;
  border-bottom: 0;
  letter-spacing: .08em;
}
.ktn-header nav a.ktn-cta:hover,
.ktn-header nav a.ktn-cta:focus-visible { background: var(--ktn-ink); color: #fff; }

@media (max-width: 560px) {
  .ktn-header { padding: 9px 14px; }
  .ktn-header .ktn-brand b { font-size: 16px; }
  .ktn-header .ktn-brand::after { display: none; }
  /* もとは1行に並べて横へ流していた（2行=155pxを避けるため）。だが
     **横に流れることが誰にも分からず、ただ見切れて見える。** 実測 390px で
     10本中3本が画面外、しかも常に隠れるのが「掲載のご案内」＝申込の入口だった。
     隠れる導線は無いのと同じなので、折り返して全部見せる方を採る。
     そのぶん字と余白を詰めて、2行でも 130px 前後に収める（2026-08-27）。 */
  .ktn-header nav {
    flex-wrap: wrap; gap: 2px 15px; width: 100%;
  }
  /* タップ域は 44px を割らない。上の但し書きに書いたとおりの理由で、
     折り返しの高さを節約するために 38px まで下げたのは筋が違った（2026-08-27）。 */
  .ktn-header nav a { font-size: 15px; padding: 7px 0; min-height: 44px; white-space: nowrap; }
  .ktn-header nav a.ktn-cta { padding: 8px 11px; min-height: 40px; margin-left: auto; }
  .ktn-header .ktn-brand { min-height: 44px; align-items: center; }
}

/* 360px 級（iPhone SE / Android の小型）では2行に収まらず3行=184pxになり、
   表紙の文字の上が21pxしか残らなかった。字と間隔だけ詰めて2行に戻す。
   14px はナビの下限（16px を基本、老眼でも押せる44pxのタップ域は維持）。 */
@media (max-width: 400px) {
  .ktn-header { padding: 8px 12px; }
  .ktn-header nav { gap: 2px 12px; }
  .ktn-header nav a { font-size: 14px; }
  .ktn-header nav a.ktn-cta { padding: 6px 9px; }
}

/* 320px 級（iPhone SE 第1世代）。**字は14pxのまま**（13pxはナビの下限を割る）、
   間隔だけ詰めて2段に収める。3段=176px だと表紙のボタンが折り目の下に出る。 */
@media (max-width: 340px) {
  .ktn-header { padding: 7px 10px; }
  .ktn-header nav { gap: 1px 8px; }
}

/* ── 記事エントリー（誌面の行）──
   トップの「まもなく開催」と、/week/ の一覧で使う共通の行。
   アプリ側は src/styles/cover-spread.css に同じ定義がある（Viteバンドルのため別管理）。
   値を変えるときは両方直すこと。 */
.ktn-art {
  display: block;
  padding: 17px 0;
  border-bottom: 1px solid rgba(16, 16, 16, .16);
  text-decoration: none;
  color: var(--ktn-ink, #101010);
}
.ktn-art:last-child { border-bottom: 0; }
.ktn-art:hover .ka-h,
.ktn-art:focus-visible .ka-h { text-decoration: underline; text-underline-offset: 4px; }
.ktn-art .ka-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ktn-art .ka-tag {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: #fff; padding: 2px 8px; text-decoration: none;
}
.ka-tag.kameoka { background: var(--ktn-kameoka, #a5573a); }
.ka-tag.nantan { background: var(--ktn-nantan, #5b7d4b); }
.ka-tag.kyotamba { background: var(--ktn-kyotamba, #3a6a8c); }
.ktn-art .ka-d {
  font-family: var(--ktn-mon, monospace); font-size: 13px; letter-spacing: .08em;
  color: rgba(16, 16, 16, .86); font-variant-numeric: tabular-nums; text-decoration: none;
}
.ktn-art .ka-h {
  margin: 7px 0 0; font-family: var(--ktn-min, serif); font-size: 16px; font-weight: 500;
  line-height: 1.62; letter-spacing: .04em; color: var(--ktn-ink, #101010);
}
.ktn-art .ka-v { margin: 5px 0 0; font-size: 13px; color: rgba(16, 16, 16, .86); }