/* トラックJP のサイト側の見た目。テーマの style.css のあとに読まれる。
   色：紺（ヘッダー・ナビ）・オレンジ（差し色）・黒（文字・フッター）。
   画像の url() には必ず ?v= を付ける。外部の番地と、ほかの CSS の読み込みは書かない。 */
:root {
  --nav: #14213d;
  --brand: #b84a00; --brand-end: #14213d; --brand-soft: #fff1e0;
  --yellow: #f77f00; --yellow-soft: #fff1e0; --yellow-ink: #3a1d00;
  --paper: #f3f4f6; --surface: #ffffff; --ink: #111827; --muted: #4b5563;
  --line: #d5d9e0; --link: #0f3d8a; --focus: #0f3d8a; --hot: #b3261e;
  --truk-navy: #14213d; --truk-orange: #f77f00; --truk-black: #111111;
}

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

/* ヘッダーとフッター：ちりばめ画像の上に、半透明の紺と黒を重ねて、文字とロゴを読めるようにする。 */
.site-header {
  background:
    linear-gradient(110deg, rgba(20, 33, 61, .93) 0%, rgba(20, 33, 61, .86) 55%, rgba(17, 17, 17, .90) 100%),
    url("../img/header_collage.webp?v=20261113a") center center / auto 220px repeat-x,
    #14213d;
  border-top-color: #f77f00;
  border-bottom: 4px solid #f77f00;
}
.site-footer {
  background-color: #111111;
  background-image:
    linear-gradient(rgba(17, 17, 17, .90), rgba(17, 17, 17, .90)),
    url("../img/footer_collage.webp?v=20261113a");
  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-bbs { --cat: #14213d; --cat-soft: #e8edf7; }
.cat-aruaru { --cat: #a34400; --cat-soft: #fff1e0; }
.cat-uwasa { --cat: #1f2937; --cat-soft: #eceff3; }
.cat-kiken { --cat: #8a1c1c; --cat-soft: #fbeaea; }
.cat-news { --cat: #4a3a8a; --cat-soft: #eeebf8; }
.cat-gyokaijin { --cat: #1f5d3a; --cat-soft: #e6f4ec; }
.cat-trouble { --cat: #7a4b00; --cat-soft: #fbf0dc; }
.cat-knowhow { --cat: #0b5a70; --cat-soft: #e2f3f7; }
.cat-sukatto { --cat: #b3540a; --cat-soft: #fff0e2; }
.cat-kyujin { --cat: #2f4f1f; --cat-soft: #eaf3e3; }

/* X の公式の埋め込み（X投稿まとめ・人気アカウント）。 */
.x-post { margin: 20px 0; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--truk-orange); border-radius: var(--radius); background: var(--surface); }
.x-post blockquote.twitter-tweet { margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--line); }
.x-gone { margin: 0 0 8px; padding: 12px; border: 1px dashed var(--control-line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.x-note { padding: 8px 12px; background: var(--brand-soft); border-radius: var(--radius); }
.x-note-label { display: block; font-size: .85rem; color: var(--muted); }
.x-note p { margin: 4px 0 0; }
.x-timeline { margin: 16px 0; min-height: 80px; }

/* 「オリジナル」と「AI」の表記：地味で目立たない見た目。
   灰色の文字だけ。背景色・枠・太字なし。大きさは本文の8割（.8rem）。文言と位置は変えない。隠さない。
   背景との明るさの差は 4.5:1 以上（ライト #6b656b：白 5.68・スレ見出し 5.22・カテゴリの帯 4.94 以上／ダーク #a8a1a7：面 6.95・スレ見出し 5.68）。 */
: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; }
/* コメント欄の「コメントを書く」「投稿する」：控えめな見た目。
   黒の塗りつぶしをやめ、細い枠線と濃い文字だけ。高さはスマホ幅 40px、マウスで使うパソコン幅 36px。
   文字と面の明るさの差：ライト #292129／白 15.6、ダーク #f0ebee／#1c181d 14.8。枠は文字と同じ色を薄めて使う。 */
.comment-form-box > summary, .comment-form-box .comment-form button[type="submit"] {
  min-width: 8em; min-height: 40px; padding: 4px 14px;
  color: var(--ink); background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 4px;
  font-size: .9375rem; font-weight: 700;
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .comment-form-box > summary, .comment-form-box .comment-form button[type="submit"] { min-height: 36px; padding-block: 2px; }
}


/* ===== 画面が広いときだけ出す、記事の外側の広告枠=====
   左右のレール（幅 160px。本文の外の余白に置き、スクロールに付いてくる＝ position: sticky）と、下の帯（画面の下に固定）。
   出す幅は 1760px 以上：本文の最大幅 1360px ＋ 左右に（レール 160 ＋ すき間 16 ＋ はしの余白）。それより狭い画面・スマホでは出さない
   （hugo.toml の outer_media と同じ数字。狭い画面では中身を取りにも行かない）。
   どの枠も本文の列の外・流れの外に置くので、出ても畳んでも本文は動かない。中身が無い枠は hidden のまま。 */
.ad-outer { display: none; }
@media screen and (min-width: 1760px) {
  .site-main { position: relative; }
  .ad-outer .ad-slot { color: var(--ad-ink, var(--ink)); background: var(--ad-surface, var(--surface)); border: 1px dashed var(--ad-line, var(--control-line)); }
  .ad-outer .ad-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; }
  .ad-outer .ad-label { margin: 0; padding: 0; font-size: .75rem; line-height: 1.4; }
  .ad-outer .ad-fold {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; font-size: .875rem; line-height: 1;
  }
  .ad-outer .ad-body { overflow: hidden; }
  .ad-outer .ad-body img { max-width: 100%; height: auto; }
  .ad-outer.is-folded .ad-body { display: none; }

  /* 左右のレール：main と同じ高さの、幅 160px の透明な柱（押せない）。その中で、枠だけが付いてくる。 */
  .ad-rail:not([hidden]) { display: block; position: absolute; top: 0; bottom: 0; width: 160px; pointer-events: none; }
  .ad-rail-left { left: calc(50% - var(--page-max, 1360px) / 2 - 176px); }
  .ad-rail-right { right: calc(50% - var(--page-max, 1360px) / 2 - 176px); }
  .ad-rail > .ad-slot { position: sticky; top: 12px; pointer-events: auto; max-height: calc(100vh - 24px - var(--ad-bottom-space, 0px)); overflow: hidden; }

  /* 下の帯：広告の高さは 90px まで。出ているあいだは、ページの一番下に同じだけ余白を足す（最後の行が隠れない）。
     余白は、畳んでも変えない（畳む操作でページの長さが変わらないように）。 */
  .ad-bottom:not([hidden]) { display: block; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; pointer-events: none; }
  .ad-bottom > .ad-slot { display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 4px 6px; pointer-events: auto; border-bottom: 0; box-shadow: 0 -2px 10px #00000026; }
  .ad-bottom .ad-head { flex-direction: column; padding: 0; }
  .ad-bottom .ad-body { max-height: 90px; }
  .ad-bottom.is-folded > .ad-slot { margin-right: 16px; }
  .has-ad-bottom-bar { --ad-bottom-space: 112px; }
  .has-ad-bottom-bar body { padding-bottom: 112px; }
}
@media print { .ad-outer { display: none !important; } }

/* 引用の記事の出典（元スレの URL）。管理機能で作った「実話まとめ（引用）」の記事だけに出る。 */
.story-source { margin: 0; padding: 8px 14px; color: var(--muted); font-size: .8125rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.story-source span { opacity: .85; }
.res-meta .ai-badge { margin-inline-start: 4px; }


/* 「業界人の新着」コーナー（トップの右カラム）。広告は置かない。 */
/* site.css の末尾へ追記。色は既存のライト／ダーク用変数を継承する。 */
.sidebar-left > .people-corner { grid-column: 1 / -1; }
.people-corner { min-width: 0; max-width: 100%; overflow-wrap: anywhere; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.people-corner *, .people-corner a { min-width: 0; }
.people-block { padding: 10px 12px; }
.people-block + .people-block { border-top: 1px solid var(--line); }
.people-sub { margin: 0 0 8px; padding: 4px 0; border-bottom: 2px solid var(--line); font-size: .875rem; font-weight: 700; }
.people-list { list-style: none; padding: 0; margin: 0; }
.people-list > li { padding: 8px 0; }
.people-list > li + li { border-top: 1px dashed var(--line); }
.people-corner a { color: var(--link); overflow-wrap: anywhere; }
.people-list > li > time, .people-meta { display: block; color: var(--muted); font-size: .75rem; }
.people-video > a { display: block; text-decoration: none; }
.people-video img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); }
.people-video-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 3.2em; overflow: hidden; line-height: 1.6; margin: 6px 0; }
.people-video a:hover .people-video-title { text-decoration: underline; }
.people-xpost blockquote { margin: 0 0 6px; padding: 6px 8px; border-left: 3px solid var(--line); }
.people-xpost iframe, .people-xpost .twitter-tweet { max-width: 100% !important; min-width: 0 !important; }
.people-meta { margin-top: 4px; }
.people-empty { margin: 8px 0; padding: 10px 0; color: var(--muted); text-align: center; }
@media (max-width: 767px) {
  .people-corner, .people-block, .people-list > li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .people-corner img { max-width: 100%; height: auto; }
}

/* タレコミ・著名人推薦のフォーム（画面と入力の確かめだけ。送信はしない）。 */
/* site.css の末尾へ追加する切れはし。
   .tips-* は、受付設定に関係なく head.html が読む共通 style.css にある。 */
.tk-group {
  display: grid;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--control-line);
  border-radius: 4px;
}
.tk-group legend { max-width: 100%; padding-inline: 8px; color: var(--tips); font-weight: 750; }
.tk-group[hidden] { display: none; }
.tk-check { color: var(--tips); background: var(--tips-soft); }
.tk-check:hover { text-decoration: underline; }
.tk-actions { display: grid; gap: 12px; min-width: 0; }
.tk-actions .tips-submit { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* 同意欄の checkbox は、通常のテキスト入力の幅指定から独立させる。 */
.tips-field .tips-consent input { width: 24px; min-height: 24px; padding: 0; }
@media (max-width: 767px) {
  .tk-group { padding: 12px; }
  .tips-page .tips-field input,
  .tips-page .tips-field select,
  .tips-page .tips-field textarea,
  .tk-actions .tips-submit { box-sizing: border-box; min-width: 0; max-width: 100%; }
  .tk-actions .tips-submit { padding-inline: 12px; }
}

/* 創作の札は出さない（記事の頭の1文で知らせる）。エンジンが札を空にできるようになったら、この2行は外す。 */
.badge.fiction { display: none !important; }