/* ひとり暮らし横丁 のサイト側の見た目。テーマの style.css のあとに読まれる。
   画像の url() には必ず ?v= を付ける。外部の番地と、ほかの CSS の読み込みは書かない。 */
:root {
  --nav: #5a3e36;
  --brand: #1f5f7a; --brand-end: #5a3e36; --brand-soft: #e7f4fa;
  --yellow: #8ecae6; --yellow-soft: #e7f4fa; --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: #3a2722;
  --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: #3a2722;
    --brand-soft: #2c2410; --yellow-soft: #33290d;
    --link: #9cc0ff; --focus: #ffd874;
  }
}

/* ヘッダーとフッター：ちりばめ画像の上に、半透明のナビ色を重ねて、文字とロゴを読めるようにする。 */
.site-header {
  background:
    linear-gradient(110deg, rgba(90, 62, 54, .93) 0%, rgba(90, 62, 54, .86) 55%, rgba(58, 39, 34, .92) 100%),
    url("../img/header_collage.webp?v=20261114a") center center / auto 220px repeat-x,
    #5a3e36;
  border-top-color: #8ecae6;
  border-bottom: 4px solid #8ecae6;
}
.site-footer {
  background-color: #3a2722;
  background-image:
    linear-gradient(rgba(58, 39, 34, .90), rgba(58, 39, 34, .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-aruaru { --cat: #5a3e36; --cat-soft: #f3ebe8; }
.cat-jisui { --cat: #8a4b00; --cat-soft: #fbf0dc; }
.cat-heya { --cat: #1f5d3a; --cat-soft: #e6f4ec; }
.cat-kaden { --cat: #1f5f7a; --cat-soft: #e7f4fa; }
.cat-hikkoshi { --cat: #4a3a8a; --cat-soft: #eeebf8; }
.cat-kyujitsu { --cat: #8a2f55; --cat-soft: #fbe9f1; }

/* 「オリジナル」と「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; }