/* ============================================================
   デザイン規約v2（2026-09-03・ユーザー指摘「フォントとかすげーAIっぽいし安っぽい」対応。
   2026-09-01全面リスキンの上に追改訂）。参照する空気は日本のB2Bデータメディア
   （日経・帝国データバンク・建設通信新聞のような「硬くて信頼できる」情報製品）。
   可愛さ・スタートアップ風グラデーション・絵文字・角丸カード乱用・汎用ブルー基調は禁止。
   - 色・サイズは必ずこの:root変数を参照する。テンプレート側・このファイルの他の場所を含め、
     16進の生値を直書きしない（例外: このトークン定義そのもの）。それ以外は全部var()参照にする
   - パレット: 本文は墨(--ink)・ブランドとリンクは濃紺1色(--primaryと--linkを同値に統一。
     「クリック可能」の記号はリンクの色そのものではなく、hoverの下線で示す＝色数を絞る)。
     --accent(朱)は「有料」「締切」等の強調表示など限定用途のみに使い、通常のリンクhover・
     タブhover等の汎用インタラクションには使わない（focus-visibleのアウトリングのみ、
     キーボード操作可視化という別目的の慣習として例外的に維持する）
   - 非活性要素（例: 未実装のタブ）は--faint色+cursor:default+「準備中」バッジで、
     クリックできるように見える見た目を絶対に与えない（hrefも付けない）
   - 間隔（margin/padding/gap）は4pxの倍数のみ。唯一の例外は主要/副次ボタンのpadding
     （9px 16pxに統一。ボタン角丸カ所は別途デザイン規約で固定値として明記）
   - 行間: 本文(.lead/.about-list/.gap-list/.side-box等)は1.7、表・高密度リスト
     (.data-table/.cat-card__subs/.pref-detail__list)は1.5
   - 見出しの序列: h1(--fs-h1)=ページ名のみ・1ページに1個(トップのみ例外でヒーロー
     タグラインをh1として使う)。h2(--fs-h2)=節の見出し。2026-09-04デザインv3で見出しの書体を
     本文と分離した: 見出し(.h1/.h2/.hero-tagline)は明朝(--font-serif=Noto Serif JP)+
     太さ700+letter-spacing .01em、本文は游ゴシック優先(--font-sans)。書体差そのものが
     「本文と違う特別な要素」の記号になる（2026-09-01〜2026-09-03は書体を変えず太さだけで
     差をつけていたが、公開後もユーザーから丸さの指摘が続いたため書体を変える判断に切替）。
     タイルの数字(--fs-num)は見出しではなくデータなのでh1/h2は使わずただの大きい文字として
     扱う（書体は本文の游ゴシックのまま・letter-spacingも付けない）。数値を表示する要素は
     必ずfont-variant-numeric: tabular-numsにする
   - 面と線: カード類（.tile/.region-card/.filter-block/.side-box/.ladder-step等）は
     角丸4px以下・影は原則使わない（水平罫線+余白で区切る「表組み中心」の見た目を基本形とする。
     ピル/バッジ(border-radius:999px)はカードではないため対象外）
   - 案件ページ(/case/)のロック表示: 予算・見通し段は課金者のみ表示（SPEC「予算・見通し層の
     行は課金者のみ表示」）。.ladder-step--lockedは--bg-soft地に--faint文字+鍵アイコン、
     中身は見せない
   ============================================================ */
:root {
  /* このサイトはライトテーマのみ（ダーク切替の実装は無い＝既存規約）。ブラウザの
     フォーム部品等がOS側のダークモード設定に引きずられて配色崩れを起こさないよう
     明示しておく（2026-09-01・日本地図UI追加時に気付いた既存の抜け漏れの最小補修）。 */
  color-scheme: light;
  /* 色（デザインv2トークン。最小限に絞る。--primaryと--linkはブランド/リンクを単一の
     濃紺に統一するため同値。役割の異なるCSS変数として残しているのは、将来どちらかだけを
     独立して調整する必要が生じた場合の分離点を保つため） */
  --ink: #1a1a1a;
  --muted: #5a5854;
  --faint: #98948c;
  --line: #e6e4e0;
  --line-soft: #eeece7;
  --primary: #17315c;
  --primary-soft: #3d5982;
  --link: #17315c;
  --accent: #b0392e;
  --accent-line: #efd7d5;
  --bg: #fcfcfa;
  --bg-soft: #f5f3ef;
  /* ステータス専用の補助色（--linkはリンク専用のためステータス表示には使わない） */
  --ok: #166534;
  --ok-line: #c8e2d2;
  --ok-bg: #eaf5ee;
  --warn: #8a3b3b;
  --warn-line: #e3c7c7;
  --warn-bg: #f8ecec;
  /* 日本地図UI専用（2026-09-01・自治体5段階の彩色。紺系グラデーション濃→中→薄→白で統一。
     daily/noneは既存の--primary/--map-none-fillを再利用し、この5トークン以外の色を新設しない。
     hard(斜線)の配色はこの改訂でも変えない=既存の意味を保つ） */
  --map-daily: var(--primary);
  --map-partial: #5b7ba6;
  --map-forecast: #c7d3e3;
  --map-none-fill: #f1f4f8;
  --map-hard-base: #eef1f4;
  --map-hard-line: #a7b1ba;
  /* フォントサイズ（この8段階だけを使う。中間サイズを新設しない） */
  --fs-hero: 32px;
  --fs-h1: 28px;
  --fs-h2: 18px;
  --fs-num: 28px;
  --fs-body: 14px;
  --fs-meta: 13px;
  --fs-caption: 11px;
  --fs-pill: 12px;
  /* 書体（2026-09-04デザインv3・ユーザー実指摘「フォント・デザインが丸っぽくて安っぽい」対応。
     本文=游ゴシック優先(OS標準搭載・Webフォント読み込み不要)、見出し=明朝(Noto Serif JP・
     FONT_LINK経由で読み込む唯一のWebフォント)。硬い書体を見出しに当てることで、
     日本のB2Bデータメディア（日経・帝国データバンク・建設通信新聞）に近い空気を作る）。 */
  --font-sans: "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7; /* 本文の行間は1.7 */
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums; /* 数値は等幅（データ製品の要。全要素の既定にする） */
}
/* リンク=--linkを独占させる（クリック可能の記号は色そのもの）。--accentは「有料」「締切」等の
   限定用途に予約するため、hoverは色を変えず下線だけを足す（色数を絞るデザインv2方針） */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* フォーカス可視（キーボード操作）。ここだけはキーボード操作の可視化という別目的の慣習として
   --accentを維持する（コンテンツの強調用途ではないため「限定用途のみ」の対象外とする） */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
table { border-collapse: collapse; width: 100%; }
.page-wrap { max-width: 1080px; margin: 0 auto; padding: 24px 24px 48px 24px; }

/* ヘッダー: 白地+下罫線(1px)。ロゴは紺700・字間わずかに詰め。ナビは右寄せ・現在地は下線。
   モバイル(640px以下)では2行に折り返さず1行に収める（下の@mediaでtagline/バッジを隠し、
   .navを横スクロール化する。2026-09-03デザインv2・ユーザー実指摘「ヘッダが2行に折り返して
   間延びする」対応） */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner {
  max-width: 1080px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.logo {
  font-size: var(--fs-h1); font-weight: 700; color: var(--primary); letter-spacing: -.02em;
}
/* ロゴ（ブランドマーク）はコンテンツ内リンクの色規約から意図的に除外する常設の例外:
   通常の文中リンクと同じ挙動（hoverで下線化）にすると、ヘッダーが毎回ページの
   一部のように点滅して見えるため、ブランド表示は常に--primaryで固定する */
.logo:hover { color: var(--primary); text-decoration: none; }
.tagline { font-size: var(--fs-meta); color: var(--muted); }
.spacer { flex-grow: 1; }
.nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: var(--fs-body); font-weight: 500; }
/* white-space:nowrapで日本語見出しが文字の途中で折り返さないようにする（狭い画面では
   .navのflex-wrapで項目単位ごと次の行へ送る） */
.nav a { color: var(--muted); padding-bottom: 4px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.nav a.active { color: var(--primary); border-bottom-color: var(--primary); text-decoration: none; }
.last-crawl-badge {
  font-size: var(--fs-caption); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; background: var(--bg-soft);
}

/* 見出し（2026-09-04デザインv3・明朝(--font-serif)。本文の游ゴシックと書体そのものを変えて
   「特別な要素」の記号にする。太さ700+letter-spacingは従来どおり併用） */
.h1 { font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 700; letter-spacing: .01em; margin: 8px 0 4px 0; }
/* h2は単独でも(.section-titleでラップされていなくても)節見出しとして下線が付く。
   .section-title内で使う場合は下線を親のflex行全幅の罫線に譲る(下のオーバーライド参照) */
.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2); font-weight: 700; letter-spacing: .01em; margin: 0;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.breadcrumb { font-size: var(--fs-meta); color: var(--muted); margin-top: 4px; }
.breadcrumb a { color: var(--link); }

/* パンくず〜見出しの下線 */
.org-header {
  display: flex; align-items: flex-end; gap: 20px; margin-top: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 16px;
}
.org-header__meta { font-size: var(--fs-meta); color: var(--muted); margin-top: 8px; }

.lead { font-size: var(--fs-body); color: var(--ink); line-height: 1.7; max-width: 900px; }
.lead--warn { color: var(--warn); }

.section-title {
  display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-top: 48px;
}
.section-title .h2 { border-bottom: none; padding-bottom: 0; } /* 下線は.section-title側が全幅で引く */
.section-title--lg-gap { margin-top: 64px; } /* 表など内容量の多い節の直後に使う広め間隔 */
.section-title__note { font-size: var(--fs-meta); color: var(--muted); }

/* ヒーロー（トップページ）: タグラインを大きく、直下に検索窓を主役サイズで */
.hero-search { margin-top: 20px; }
.hero-tagline {
  font-family: var(--font-serif); font-size: var(--fs-hero); font-weight: 700;
  letter-spacing: .01em; color: var(--ink); margin: 8px 0 24px 0;
} /* トップページのh1代わり（見出し扱い＝明朝） */
/* エンティティタブ（2026-08-31 指摘1で実体化。案件=活性表示／団体・商材=実リンク／
   企業=非活性。非活性の見た目規約は下の.is-disabled/.badge-wipを参照）。下線タブ形式 */
.search-tabs {
  display: flex; gap: 24px; max-width: 820px; font-size: var(--fs-body); font-weight: 700;
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
/* white-space:nowrapで狭い画面でもタブの文字が途中で折り返さないようにする
   （収まらない分は.search-tabsのoverflow-x:autoで横スクロール） */
.search-tab { color: var(--muted); padding: 8px 4px; display: inline-block; border-bottom: 2px solid transparent; white-space: nowrap; }
/* タブはリンクでも下線を付けない。hoverは--accentではなく活性色(--primary)を先取りして見せる
   （--accentは「有料」「締切」等の限定用途に予約するデザインv2方針） */
a.search-tab:hover { color: var(--primary); text-decoration: none; }
.search-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.search-tab.is-disabled {
  color: var(--faint); cursor: default; display: inline-flex; align-items: center; gap: 8px;
}
.badge-wip {
  font-size: var(--fs-pill); color: var(--faint); border: 1px solid var(--line);
  background: var(--bg-soft); border-radius: 999px; padding: 0 8px; line-height: 1.6;
}
/* 検索窓（主役サイズ・高さ48px・角丸4px・紺の検索ボタン。影は使わず罫線だけで縁取る） */
.search-box {
  display: flex; align-items: stretch; max-width: 820px; height: 48px; margin-top: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.search-input {
  flex-grow: 1; border: none; border-right: 1px solid var(--line);
  background: var(--bg); padding: 0 16px; font-size: var(--fs-body);
}
.search-select {
  border: none; border-right: 1px solid var(--line);
  background: var(--bg); padding: 0 16px; font-size: var(--fs-body); color: var(--ink);
}
.search-submit { border-radius: 0; } /* 色・文字サイズは.btn/.btn-primaryが供給、角は親のoverflow:hiddenで丸まる */
.stats-line { display: flex; gap: 24px; margin-top: 16px; font-size: var(--fs-meta); color: var(--muted); flex-wrap: wrap; }
.stats-line strong { color: var(--ink); }
/* 「全行に出典リンクつき」はリンクではない強調テキストなので--accent（--linkは使わない） */
.stats-line .accent { color: var(--accent); }

/* ボタン（主要/副次）。padding: 9px 16pxに統一（規約上の唯一の4px例外）。角丸4px */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 4px; font-weight: 700; font-size: var(--fs-body);
  cursor: pointer; border: none;
}
.btn-primary { background: var(--primary); color: var(--bg); }
.btn-primary:hover { background: var(--primary-soft); color: var(--bg); text-decoration: none; }
.btn-secondary { background: var(--bg); color: var(--primary); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--bg-soft); text-decoration: none; }

/* 絞り込みブロック（地域ナビ・カテゴリナビ＝カードグリッドで整列。角丸4px・影なし） */
.filter-row { display: flex; gap: 24px; margin-top: 48px; flex-wrap: wrap; }
.filter-block {
  flex: 1 1 360px; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 4px; padding: 24px;
}
.filter-block__title { font-size: var(--fs-meta); font-weight: 700; color: var(--ink); }
/* 地域カード（関東1都6県の固定7枚。2026-08-31 SYSTEM_BLUEPRINT「表示ポリシー」対応）。
   影は使わず、hoverは罫線の色替えだけで示す */
.region-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.region-card {
  flex: 1 1 140px; display: block; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 16px; text-decoration: none;
}
.region-card:hover { border-color: var(--primary); text-decoration: none; }
.region-card__pref {
  font-size: var(--fs-h2); font-weight: 700; color: var(--link);
}
.region-card__count { font-size: var(--fs-meta); color: var(--muted); margin-top: 8px; }
/* 稼働ゼロの県: 非活性規約(--faint+cursor:default)。hrefを持たない<div>で描画する */
.region-card--pending { cursor: default; border-style: dashed; }
.region-card--pending .region-card__pref { color: var(--faint); }
.region-card--pending .region-card__count { color: var(--faint); }
/* 商材カテゴリのカードグリッド（2026-09-04デザインv3・ユーザー実指摘4「／区切りリンク羅列」
   対応。site_templates.render_category_card_grid()参照。以前の.cat-grid/.cat-col__parent/
   .cat-col__childrenは' ／ '.join()の1本のキャプション文字列を並べる方式でしかなく、
   カード化に伴い構造ごと置き換えたため削除した）。大分類7枚を想定した自動折返しグリッド。 */
.cat-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 12px; }
.cat-card { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.cat-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 8px;
}
.cat-card__title { font-weight: 700; color: var(--link); }
.cat-card__count { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; }
.cat-card__subs {
  list-style: none; margin: 8px 0 0 0; padding: 0; display: flex; flex-direction: column;
  gap: 4px; font-size: var(--fs-meta); line-height: 1.5;
}
.cat-card__subcount { color: var(--faint); font-size: var(--fs-caption); }

/* 本文2カラム */
.content-columns { display: flex; gap: 36px; margin-top: 48px; flex-wrap: wrap; }
.col-main { flex-grow: 1; min-width: 0; flex-basis: 640px; }
.col-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.side-box {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 24px;
  font-size: var(--fs-meta); color: var(--muted); line-height: 1.7;
}
.side-box strong { color: var(--ink); }
.side-box--dashed { border: 1px dashed var(--faint); }

/* テーブル（ヘッダ行=薄グレー地+600・行=下罫線のみ・hoverで淡い背景・行間1.5）。
   モバイルはoverflow-x:autoの包み＝<table>自身をdisplay:blockのスクロールコンテナにし、
   子要素だけ明示的にtable役割へ戻す(HTML側にラップ用divを追加せずCSSだけで実現) */
.data-table {
  font-size: var(--fs-body); line-height: 1.5; margin-top: 8px;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.data-table thead { display: table-header-group; }
.data-table tbody { display: table-row-group; }
.data-table tr { display: table-row; }
.data-table th, .data-table td { display: table-cell; }
.data-table th {
  /* デザイン指定書は上下10px・左右12pxだが、4pxグリッド規約(唯一の例外は.btn)を優先し
     最も近い4の倍数(12px/12px)に丸める（規則の緩和はしない） */
  text-align: left; padding: 12px 12px 12px 4px; font-size: var(--fs-caption); color: var(--muted);
  font-weight: 600; background: var(--bg-soft); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table th.num { text-align: right; }
/* セル内改行を禁止し、はみ出た分は.data-table自身のoverflow-x:autoで横スクロールさせる
   （改行させると狭い画面で1文字だけの縦積み表示になり、日本語では特に読めなくなるため） */
.data-table td { padding: 12px 12px 12px 4px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover td { background: var(--bg-soft); }
.data-table .c-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.data-table .c-amount { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .c-source { font-size: var(--fs-caption); }
/* 団体一覧（/org/・/area/共通。2026-09-04デザインv3・ユーザー実指摘2「団体一覧（36団体）が
   縦長すぎる」対応）: <table>の縦1列から、CSS columnsで横方向にも流し込む多段組へ変更した
   （render_pref_org_table()参照。<table>はcolumn-countに対応しないため構造自体をdivへ変えた）。
   column-widthとcolumn-countを併用し、画面幅に応じて自然に3〜4段・2段・1段へ収束させる
   （@mediaでの明示的な段数指定はしない＝column-widthの下限で自動的に決まる）。
   1団体=1.org-tile。break-inside:avoidで段の境目に団体が分断されるのを防ぐ。 */
.org-columns { column-width: 240px; column-count: 4; column-gap: 24px; margin-top: 12px; }
.org-tile {
  break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.org-tile__name { color: var(--link); font-weight: 500; display: block; }
.org-tile__depth {
  display: block; font-size: var(--fs-caption); color: var(--muted); margin-top: 4px;
}
.w-date { width: 92px; } .w-org { width: 100px; } .w-cat { width: 110px; }
.w-src { width: 80px; } .w-status { width: 90px; } .w-vendor { width: 220px; } .w-amount { width: 130px; }

/* 修正1「全行クリック可能化」(2026-09-01・ユーザー実指摘「案件名クリックできないよ」対応):
   公告・落札一覧の件名は常に<details><summary>にし、クリックでその場に展開する(JSなし)。
   .pref-detail summary/.quote-details summaryと同じ規約(マーカーはブラウザ既定のまま・
   cursor:pointerだけで「開閉できる」ことを示す。--linkは実際に別ページへ遷移するリンク専用の
   ため、展開トリガーである件名自体には使わない)。案件ページがある行はsummary内の
   「案件」ピル(実際の<a>・--link色)で/case/{public_id}/への直リンクを別途持つ。 */
.row-expand summary { cursor: pointer; }
.row-expand__title { color: var(--ink); font-weight: 500; }
.case-pill {
  display: inline-flex; align-items: center; font-size: var(--fs-pill); color: var(--link);
  border: 1px solid var(--link); border-radius: 999px; padding: 0 8px; line-height: 1.8;
  margin-left: 8px; font-weight: 500;
}
/* hoverは--accentを使わず地色を薄く敷くだけにする（--accentは「有料」「締切」等の限定用途に予約） */
.case-pill:hover { background: var(--bg-soft); text-decoration: none; }
.row-expand__body {
  margin-top: 8px; padding: 12px 16px; background: var(--bg-soft); border-radius: 4px;
  font-size: var(--fs-caption); color: var(--muted); line-height: 1.5; white-space: normal;
}
.row-expand__meta { color: var(--muted); }
/* ラベル:値の整列表（2026-09-03デザインv2追改訂・ユーザー実指摘「詳細ページの文字が
   読みにくい」対応）: 行展開(.row-expand__meta)・時間の梯子(.ladder-step__meta)の付帯情報
   （方式・工種・締切・落札金額・落札者など）は、以前は「方式: 一般競争入札 ／ 工種: 工事」の
   ように"／"区切りの1本のキャプション文字列だった。折り返された行が任意の位置で切れて
   読みにくいため、ラベル列を揃えた2列の表(render_meta_table())へ組み替えた。ラベルは--muted・
   値は本文と同じ--ink（墨）にしてコントラストを確保する（数値項目はtabular-nums）。
   widthは全称の`table`規則(width:100%)を打ち消し、内容ぶんだけの幅に留める。 */
.meta-table { width: auto; border-collapse: collapse; margin-top: 4px; }
.meta-table th, .meta-table td { text-align: left; padding: 0 12px 4px 0; font-size: var(--fs-meta); font-weight: 400; vertical-align: top; }
.meta-table th { color: var(--muted); white-space: nowrap; }
.meta-table td { color: var(--ink); font-variant-numeric: tabular-nums; }
.row-expand__sources { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.case-history-link { display: inline-block; margin-top: 8px; font-weight: 500; }

/* タイル（数字は見出しではなくデータ。h1/h2の書体・letter-spacing・下線を持たせない。統計カード:
   数値28px/700・ラベル13px・桁区切りはfmt_count/fmt_yen(呼び出し側)が付与。tabular-numsは
   body既定で継承済みだが、データ表示要素であることを明示するためここでも明示指定する。
   auto-fitで3枚(団体ページ等)・4枚(トップの実績カード)双方に対応。角丸4px・影なし） */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 16px; }
.tile { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 24px; }
.tile__label { font-size: var(--fs-meta); color: var(--muted); }
.tile__value {
  font-family: inherit; font-size: var(--fs-num); font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tile-note { font-size: var(--fs-caption); color: var(--faint); margin-top: 8px; }

/* バッジ・ステータスタグ（小さめピル: 12px・角丸999px・薄地+濃文字。
   padding縦は0にしline-heightで高さを作る=4pxグリッド順守） */
.badge {
  font-size: var(--fs-pill); border-radius: 999px; padding: 0 8px; line-height: 1.8;
  border: none; font-weight: 500;
}
.badge-ok { color: var(--ok); background: var(--ok-bg); }
.badge-warn { color: var(--warn); background: var(--warn-bg); }

/* coverage表・ステータスタグ */
.coverage-table td, .coverage-table th { padding: 8px; }
.footnote { font-size: var(--fs-caption); color: var(--faint); margin-top: 12px; line-height: 1.7; }
.gap-list { font-size: var(--fs-body); line-height: 1.7; }
.pref-detail { margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 12px 16px; }
.pref-detail summary { cursor: pointer; font-weight: 700; font-size: var(--fs-meta); }
.pref-detail__list { margin: 12px 0 0 0; padding-left: 20px; font-size: var(--fs-meta); line-height: 1.5; }
.status-tag {
  font-size: var(--fs-pill); border-radius: 999px; padding: 0 8px; line-height: 1.8;
  border: none; font-weight: 500; margin-left: 4px;
}
.status-tag--live { color: var(--ok); background: var(--ok-bg); }
/* 実装待ち/未実査は「クリック不能な中立ステータス」であり、--linkはリンク専用のため使わない */
.status-tag--planned { color: var(--muted); background: var(--bg-soft); }
.status-tag--survey { color: var(--muted); background: var(--bg-soft); }
.status-tag--gap { color: var(--warn); background: var(--warn-bg); }

/* 日本地図UI（2026-09-01新設。BACKLOG「日本地図UI」節の確定仕様。タイルグリッド型
   インラインSVG・依存ゼロ。色は全て:root変数参照＝生の16進色をここに書かない。
   紺系グラデーション濃→中→薄→白で統一・タイルに1px罫線+2px角丸・hoverは影ではなく
   罫線の色替え+太さで示す（デザインv2「影は原則なし」方針） */
.map-lead { font-size: var(--fs-body); line-height: 1.7; max-width: 900px; margin-top: 16px; }
.pref-map-wrap { max-width: 680px; margin-top: 16px; }
.pref-map { width: 100%; height: auto; display: block; }
.pref-tile { cursor: pointer; }
.pref-tile:hover .pref-tile__rect { stroke: var(--primary); stroke-width: 2; }
.pref-tile__rect { stroke: var(--line); stroke-width: 1; }
.pref-tile__label { font-size: var(--fs-caption); font-weight: 700; text-anchor: middle; fill: var(--ink); }
.pref-tile__ratio { font-size: var(--fs-caption); text-anchor: middle; fill: var(--muted); }
.pref-tile--daily .pref-tile__rect { fill: var(--map-daily); }
.pref-tile--daily .pref-tile__label, .pref-tile--daily .pref-tile__ratio { fill: var(--bg); }
.pref-tile--partial .pref-tile__rect { fill: var(--map-partial); }
.pref-tile--partial .pref-tile__label, .pref-tile--partial .pref-tile__ratio { fill: var(--bg); }
.pref-tile--forecast .pref-tile__rect { fill: var(--map-forecast); }
.pref-tile--none .pref-tile__rect { fill: var(--map-none-fill); }
.pref-tile--hard .pref-tile__rect { fill: url(#pref-hatch); }
.pref-hatch__bg { fill: var(--map-hard-base); }
.pref-hatch__line { stroke: var(--map-hard-line); stroke-width: 2; }
.map-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: var(--fs-meta); color: var(--muted); }
.map-legend__item { display: flex; align-items: center; gap: 8px; }
.map-legend__swatch { width: 16px; height: 16px; flex-shrink: 0; }
.map-legend__swatch .pref-tile__rect { stroke: var(--line); }
.corp-lead { font-size: var(--fs-meta); color: var(--muted); margin-top: 24px; }
.corp-table { margin-top: 16px; }
.master-table { margin-top: 16px; }
.master-table td, .master-table th { padding: 8px; }
.stage-badge {
  font-size: var(--fs-pill); border-radius: 999px; padding: 0 8px; line-height: 1.8;
  border: none; font-weight: 500; margin-left: 4px;
}
.stage-badge--daily { color: var(--ok); background: var(--ok-bg); }
.stage-badge--partial { color: var(--muted); background: var(--bg-soft); }
.stage-badge--forecast { color: var(--muted); background: var(--bg-soft); }
.stage-badge--hard { color: var(--warn); background: var(--warn-bg); }
.stage-badge--none { color: var(--faint); background: var(--bg-soft); }
.pref-breakdown__meta { font-size: var(--fs-caption); color: var(--faint); }

.about-list { font-size: var(--fs-body); line-height: 1.7; padding-left: 20px; max-width: 900px; }

/* 案件ページ(/case/)の時間の梯子: タイムライン風（左に縦線+段丸ポチ）。
   段の色: 予算・見通し=グレー(.ladder-step--locked＝既存の錠前色をそのまま流用)・
   公告=紺(既定)・落札=緑系(.ladder-step--award)。縦線・丸ポチはどちらも新規のHTML要素を
   増やさず::beforeの疑似要素だけで作る（2026-08-31実装順2の構造・課金壁ロジックは不変）。 */
.ladder { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; position: relative; padding-left: 28px; }
.ladder::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line);
}
.ladder-step {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 16px;
}
.ladder-step::before {
  content: ""; position: absolute; left: -23px; top: 20px; width: 10px; height: 10px;
  border-radius: 999px; background: var(--primary); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.ladder-step--award::before { background: var(--ok); }
.ladder-step__stage { font-size: var(--fs-meta); font-weight: 700; color: var(--primary); }
.ladder-step--award .ladder-step__stage { color: var(--ok); }
.ladder-step__title { font-size: var(--fs-body); font-weight: 500; margin-top: 4px; }
.ladder-step__meta { font-size: var(--fs-caption); color: var(--muted); margin-top: 8px; }
.ladder-step__source { font-size: var(--fs-caption); margin-top: 8px; }
/* 引用文の折りたたみ（2026-09-01決定「引用文・詳細メタの展開表示」・JSなしのdetails要素）。
   薄地ボックス+引用らしい左ボーダー */
.quote-details { margin-top: 8px; font-size: var(--fs-caption); }
.quote-details summary { cursor: pointer; font-weight: 700; } /* .pref-detail summaryと同じ規約(--linkはリンク専用) */
/* 引用文(最大2000字・QUOTE_DISPLAY_LIMIT)は行が伸びると読みにくくなるため、行長を
   42em程度の可読な範囲に収める（2026-09-03デザインv2追改訂・ユーザー実指摘「詳細ページの
   文字が読みにくい」対応）。 */
.quote-text {
  margin: 8px 0 0 0; padding: 12px 16px; background: var(--bg-soft); border-left: 4px solid var(--primary-soft);
  border-radius: 0 4px 4px 0; font-size: var(--fs-meta); color: var(--ink); line-height: 1.7; white-space: pre-wrap;
  max-width: 42em;
}
/* 原本と添付（2026-09-02実装「原本と添付をサイトへ配線」）: 公告詳細ページの保存版・
   スクリーンショット・添付ファイル一覧。quote-textと同じ薄地ボックスの流儀に揃える。
   スクリーンショットは404時にプレースホルダを出さず要素自体を作らない設計
   （site_queries.screenshot_path_forがディスク上の実在を確認してから渡す）ので、
   ここでは「表示された場合」の見た目だけを定義すればよい。 */
.case-documents {
  margin-top: 8px; padding: 12px 16px; background: var(--bg-soft); border-radius: 4px;
  font-size: var(--fs-caption);
}
.case-documents__title { font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.case-documents__shot {
  display: block; max-width: 240px; width: 100%; border: 1px solid var(--line); border-radius: 4px;
  margin-bottom: 8px;
}
.case-documents__detail { margin-bottom: 4px; }
.case-documents__attachments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* 課金ロック段: 錠前アイコン(🔒)+「有料プラン会員のみ表示」の落ち着いた表示。グレーの丸ポチ */
.ladder-step--locked { border-color: var(--line); background: var(--bg-soft); }
.ladder-step--locked::before { background: var(--faint); }
.ladder-step--locked .ladder-step__stage { color: var(--faint); }
.ladder-step--locked .ladder-step__title { color: var(--faint); }
.lock-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-pill);
  color: var(--faint); background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 8px; line-height: 1.8;
}
/* 「予算・見通しを確認してからN日で公告」の強調（2026-09-03デザインv2・ユーザー実指摘
   「巨大な数字演出」対応）: 以前はここのstrongをタイル数値と同じ28pxまで拡大していたが、
   本文中の一語だけが極端に肥大化する演出は「安っぽい」印象の一因だったため落ち着かせた。
   文中の太字+朱（--accent。締切系の強調という限定用途に該当）だけでNを目立たせる */
.days-highlight {
  background: var(--bg); border: 1px solid var(--accent-line); border-radius: 4px;
  padding: 16px; margin-top: 16px; font-size: var(--fs-body);
}
.days-highlight strong { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 公告単独ページ(/notice/<id>/。2026-09-04実装「公告単独ページ」サンプル・基盤タスク)専用:
   案件へ昇格済みの案内バナー・出典（複数観測）一覧。days-highlight/case-documentsと同じ
   薄地ボックスの流儀に揃える。 */
.notice-promoted-banner {
  background: var(--bg-soft); border: 1px solid var(--accent-line); border-radius: 4px;
  padding: 12px 16px; margin-top: 12px; font-size: var(--fs-meta); color: var(--ink);
}
.notice-promoted-banner a { color: var(--link); font-weight: 700; }
.notice-sources { margin-top: 16px; }
.notice-sources__title { font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: var(--fs-caption); }

/* フッター（3列: サービス／データについて／運営情報。薄グレー地・リンク集約） */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); margin-top: 48px; }
.site-footer__inner {
  max-width: 1080px; margin: 0 auto; padding: 32px 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  font-size: var(--fs-meta); color: var(--muted);
}
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__heading { font-size: var(--fs-caption); font-weight: 700; color: var(--ink); }
.site-footer__inner a { color: var(--link); }

/* ユーティリティ（他のコンポーネント色より必ず勝たせるため、意図的にファイル末尾に置く） */
.c-muted { color: var(--muted) !important; }
.c-faint { color: var(--faint) !important; }

@media (max-width: 900px) {
  .content-columns { flex-direction: column; }
  .col-side { width: 100%; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-row { flex-direction: column; }
  .site-footer__inner { grid-template-columns: 1fr; }
}
/* ヘッダーのモバイル1行化（2026-09-03デザインv2・ユーザー実指摘「ヘッダが2行に折り返して
   間延びする」対応）。原因は.site-header__inner/.navの両方がflex-wrap:wrapで、狭い画面では
   ロゴ+タグライン+バッジ+ナビ4項目が入り切らず2行に割れていたこと。ここではタグラインと
   最終巡回バッジ（副次情報）を隠し、ナビは折り返さず横スクロールの1行に固定する
   （文言は変えず、表示するかどうかだけを切り替える）。 */
@media (max-width: 640px) {
  .tagline, .last-crawl-badge { display: none; }
  .site-header__inner { flex-wrap: nowrap; }
  .nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}