/* おでかけ横丁 のサイト側の見た目。テーマの style.css のあとに読まれる。
   画像の url() には必ず ?v= を付ける。外部の番地と、ほかの CSS の読み込みは書かない。 */
:root {
  --nav: #2b4a8b;
  --brand: #a35a00; --brand-end: #2b4a8b; --brand-soft: #fff1dc;
  --yellow: #ff9f1c; --yellow-soft: #fff1dc; --yellow-ink: #3a2a00;
  --paper: #f4f5f7; --surface: #ffffff; --ink: #18202b; --muted: #4b5563;
  --line: #d6dae1; --link: #164a8a; --focus: #164a8a; --hot: #b3261e;
}

/* ダークモード（テーマの暗い色の上に、このサイトの色を重ねる）。 */
:root[data-theme="dark"] {
  --paper: #0e131a; --surface: #171d27; --ink: #eef1f6; --muted: #aab2c0;
  --line: #303846; --nav: #1a2f5c;
  --brand-soft: #2c2410; --yellow-soft: #33290d;
  --link: #9cc0ff; --focus: #ffd874;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e131a; --surface: #171d27; --ink: #eef1f6; --muted: #aab2c0;
    --line: #303846; --nav: #1a2f5c;
    --brand-soft: #2c2410; --yellow-soft: #33290d;
    --link: #9cc0ff; --focus: #ffd874;
  }
}

/* ヘッダーとフッター：ちりばめ画像の上に、半透明のナビ色を重ねて、文字とロゴを読めるようにする。 */
.site-header {
  background:
    linear-gradient(110deg, rgba(43, 74, 139, .93) 0%, rgba(43, 74, 139, .86) 55%, rgba(26, 47, 92, .92) 100%),
    url("../img/header_collage.webp?v=20261114a") center center / auto 220px repeat-x,
    #2b4a8b;
  border-top-color: #ff9f1c;
  border-bottom: 4px solid #ff9f1c;
}
.site-footer {
  background-color: #1a2f5c;
  background-image:
    linear-gradient(rgba(26, 47, 92, .90), rgba(26, 47, 92, .90)),
    url("../img/footer_collage.webp?v=20261114a");
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
.header-note strong, .header-note span, .brand-caption { text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* カテゴリの色（白い文字が載る --cat は濃い色）。 */
.cat-plan { --cat: #2b4a8b; --cat-soft: #e8eef9; }
.cat-weekend { --cat: #1f5d3a; --cat-soft: #e6f4ec; }
.cat-norimono { --cat: #0b5a70; --cat-soft: #e2f3f7; }
.cat-yado { --cat: #8a3b2a; --cat-soft: #fbece8; }
.cat-miyage { --cat: #a35a00; --cat-soft: #fff1dc; }
.cat-tabibito { --cat: #4a3a8a; --cat-soft: #eeebf8; }

/* 「オリジナル」と「AI」の表記：うっすらと分かる、地味な見た目。
   灰色の文字だけ。背景色・枠・太字なし。文言と位置は変えない。隠さない。
   背景との明るさの差は 4.5:1 以上（ライト #6b656b／ダーク #a8a1a7）。 */
:root { --quiet-label: #6b656b; }
:root[data-theme="dark"] { --quiet-label: #a8a1a7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --quiet-label: #a8a1a7; } }
.badge.fiction, .ai-badge {
  color: var(--quiet-label); background: none; border: 0; border-radius: 0; padding: 0;
  font-size: .8rem; font-weight: 400; line-height: 1.6; opacity: 1;
}
.story-kicker .badge.fiction { color: #6b656b; }
.res-meta .ai-badge { margin-inline-start: 4px; }