/* しごと横丁 のサイト側の見た目。テーマの style.css のあとに読まれる。
   色：紺（ヘッダー・ナビ）・からし色（差し色）。
   画像の url() には必ず ?v= を付ける。外部の番地と、ほかの CSS の読み込みは書かない。 */
:root {
  --nav: #1f3a5f;
  --brand: #7a5200; --brand-end: #1f3a5f; --brand-soft: #fdf3d7;
  --yellow: #f2b632; --yellow-soft: #fdf3d7; --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: #152841;
  --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: #152841;
    --brand-soft: #2c2410; --yellow-soft: #33290d;
    --link: #9cc0ff; --focus: #ffd874;
  }
}

/* ヘッダーとフッター：ちりばめ画像の上に、半透明の紺を重ねて、文字とロゴを読めるようにする。 */
.site-header {
  background:
    linear-gradient(110deg, rgba(31, 58, 95, .93) 0%, rgba(31, 58, 95, .86) 55%, rgba(20, 36, 58, .92) 100%),
    url("../img/header_collage.webp?v=20261114a") center center / auto 220px repeat-x,
    #1f3a5f;
  border-top-color: #f2b632;
  border-bottom: 4px solid #f2b632;
}
.site-footer {
  background-color: #14243a;
  background-image:
    linear-gradient(rgba(20, 36, 58, .90), rgba(20, 36, 58, .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-boss { --cat: #1f3a5f; --cat-soft: #e8eef7; }
.cat-team { --cat: #1f5d3a; --cat-soft: #e6f4ec; }
.cat-career { --cat: #7a4b00; --cat-soft: #fbf0dc; }
.cat-rookie { --cat: #0b5a70; --cat-soft: #e2f3f7; }
.cat-remote { --cat: #4a3a8a; --cat-soft: #eeebf8; }
.cat-break { --cat: #8a3b2a; --cat-soft: #fbece8; }

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