/* SUMAI SOURCE — Entityページ共通スタイル
   外部依存なし。ビルド不要。site/ 直下の手書き資産として扱う。
   2026-08-13 視覚デザイン改善（20260813-entity-visual-refinement.md）:
   薄グレー地に白カードを浮かせる「柔らか・メリハリ」構成。ページ幅 66rem、
   デスクトップでは項目表を CSS グリッドでカード化（DOM は table のまま）。
   欧文・数字のみセルフホストの Inter を適用。視覚のみの変更で、
   内容・DOM順序・JSON-LD・index.md/llms.txt には影響しない。 */

/* 欧文・数字のみに適用するセルフホストフォント（site/assets/fonts/、SIL OFL 1.1）。
   unicode-range を欧文範囲に限定し、和文はシステムフォントへフォールスルーさせる */
@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2019, U+2026, U+2030, U+2212;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2019, U+2026, U+2030, U+2212;
}

:root {
  --ink: #1a1a1a;
  --ink-mid: #4a4a4a;
  --ink-weak: #6e6e6e;
  --rule: #dcdcd8;
  --rule-soft: #ececea;
  --bg: #ffffff;
  --bg-soft: #f7f7f5;
  --verified: #1f5c3d;
  --verified-bg: #eaf3ee;
  /* 比率バー（.meter）専用の派生トーン。確認済みの3段（外部記録・公式表明・内部記録）を
     順序量として表すためだけに用いる。バッジ（.mark）には使わない — 段ごとに色を振ると
     濃淡のランプになり、格付けとして読まれるため（ADR-0010 決定8）。
     3値とも白地に対し 3:1 以上（7.91 / 4.88 / 3.43）。隣接セグメント同士の差は小さいが、
     .meter の 4px gap が常に背景を覗かせるため、区切りは gap が担う */
  --verified-mid: #3f7d5c;
  --verified-light: #5f9678;
  /* .mark--source（出どころラベル）の枠線。--verified の白地ティント。3段すべてに同一の値を
     用いる — 段ごとに振ると濃淡のランプになり格付けとして読まれる（ADR-0010 決定8） */
  --verified-rule: #9dc4ae;
  --declared: #2f5f80;
  --declared-bg: #e9f1f7;
  --unverified: #5c5c5c;
  --unverified-bg: #eeeeec;
  /* 運営者（SUMAI SOURCE）のブランド色。確認状態の緑（--verified）とは別概念で、
     フレーム領域（基盤バー・フッター署名）専用。本文セクションには使わない。
     --brand-soft は --verified-bg (#eaf3ee) と紛れないよう一段薄い 6% ティント */
  --brand: #00704a;
  --brand-strong: #00543a;
  --brand-soft: #f0f6f4;
  --brand-rule: #b8d7cc;
  --brand-ink: #ffffff;
  /* --measure は読み物（サマリ・説明文）の行長。ページ全体の幅は --page-max が持つ */
  --measure: 46rem;
  --page-max: 66rem;
  /* 角丸・影（カードの区画に使う。色は無彩色のまま。柔らか路線として
     角丸は大きめ、影は低く広く） */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-1: 0 6px 24px rgba(26, 26, 26, 0.08);
  --shadow-2: 0 10px 32px rgba(26, 26, 26, 0.1);
  /* 追従する2段（基盤バー＋企業ブランド帯）の実高さ。--sticky-h がその合計で、
     アンカーの着地位置とメニューの上端はこの1箇所で合わせる。個々の帯の高さを
     変えたら実測して --band-h / --header-h を合わせ直すこと */
  --band-h: 1.875rem;
  --header-h: 4.3125rem;
  --sticky-h: calc(var(--band-h) + var(--header-h));
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-padding-top: calc(var(--sticky-h) + 0.75rem);
}

/* ページ地を薄グレーに敷き、内容を白いカードで浮かせる */
body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.8;
  font-feature-settings: "palt";
}

/* Inter は 400/600 の2ウェイトのみ同梱。合成ボールドを避けて 600 に寄せる */
b, strong { font-weight: 600; }

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* --- 掲載区分の注記（本人承認前のサンプルであることの明示） --- */

.notice {
  background: #fdf6e3;
  border-bottom: 1px solid #e6d9ae;
  color: #6b5410;
  font-size: 0.8125rem;
  line-height: 1.6;
  padding: 0.75rem 1.25rem;
}

.notice p { margin: 0 auto; max-width: var(--page-max); }

/* --- ヘッダー --- */

/* 運営者（SUMAI SOURCE）の名乗りはこの帯だけが担い、企業ブランド帯には持ち込まない。
   追従させることで、スクロール中も運営者の表示が画面から消えないようにする。
   運営者色（--brand）はこの帯とフッター署名だけが持ち、企業帯・本文には敷かない。
   高さは padding の積み上げでは端数になり .entity-header の top と噛み合わないため、
   --band-h で直接指定する（box-sizing: border-box なので border 込み） */
.site-id {
  align-items: center;
  background: var(--brand);
  border-bottom: 1px solid var(--brand-strong);
  color: var(--brand-ink);
  display: flex;
  font-size: 0.6875rem;
  height: var(--band-h);
  letter-spacing: 0.08em;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 11;
}

.site-id > span {
  margin: 0 auto;
  max-width: var(--page-max);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* --- 企業ブランド帯＋グローバルナビ（追従ヘッダー） --- */

/* 掲載企業のロゴと社名だけを置く。運営者の表示は基盤バーが担う（ADR-0003 決定5）。
   薄グレー地の上に浮くよう、ごく薄い影を常時つける */
.entity-header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.04);
  padding: 0.75rem 1.25rem;
  position: sticky;
  top: var(--band-h);
  z-index: 10;
}

/* メニューを開いたとき、スクリムの下に沈めずヘッダーを保つ */
.entity-header-inner {
  align-items: center;
  display: flex;
  gap: 1.25rem;
  margin: 0 auto;
  max-width: var(--page-max);
  position: relative;
  z-index: 1;
}

.entity-brand-logo { display: block; height: 2.5rem; width: auto; }

/* min-width: 0 — 極端に狭い画面で社名が溢れず折り返すようにする */
.entity-brand-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

.entity-brand-name { font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; }

/* --- ハンバーガー（JSなし。#nav:target で開閉する） --- */

.nav-toggle {
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: flex;
  flex: none;
  height: 2.75rem;
  justify-content: center;
  margin-left: auto;
  text-decoration: none;
  width: 2.75rem;
}

.nav-toggle:hover { border-color: var(--ink-mid); }

.nav-bars, .nav-bars::before, .nav-bars::after {
  background: var(--ink-mid);
  border-radius: 1px;
  display: block;
  height: 1px;
  width: 1.125rem;
}

.nav-bars { position: relative; }

.nav-bars::before, .nav-bars::after {
  content: "";
  left: 0;
  position: absolute;
}

.nav-bars::before { top: -0.375rem; }
.nav-bars::after { top: 0.375rem; }

/* パネルは position: fixed。静的配置のままだと #nav へのジャンプでページ先頭まで
   スクロールしてしまう。閉じる導線は存在しない id (#nav-close) を指すことで、
   スクロールを起こさずに :target だけを外している。#nav-close の id を持つ要素を
   ページ内に追加しないこと */
.nav-panel {
  display: none;
  inset: 0;
  position: fixed;
}

.nav-panel:target { display: block; }

.nav-backdrop {
  background: rgba(26, 26, 26, 0.18);
  display: block;
  inset: 0;
  position: absolute;
}

.nav-menu {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  max-height: calc(100vh - var(--sticky-h) - 1rem);
  overflow-y: auto;
  padding: 0.75rem 0;
  position: absolute;
  right: max(1.25rem, calc((100vw - var(--page-max)) / 2));
  top: var(--sticky-h);
  width: min(20rem, calc(100vw - 2.5rem));
}

.nav-menu a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.5rem 1.125rem;
  text-decoration: none;
}

.nav-menu a:hover { background: var(--brand-soft); }

.nav-group {
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-weak);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin: 0.5rem 0 0.25rem;
  padding: 0.75rem 1.125rem 0;
}

.nav-group:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.nav-close {
  color: var(--ink-weak);
  font-size: 0.75rem;
  text-align: right;
}

/* --- ページ見出し（表紙にあたる領域。薄グレー地の上に開いて置く） --- */

.entity-head { padding: 3.5rem 0 2.25rem; }

.entity-head h1 {
  font-size: 2.5rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.entity-head .name-en {
  color: var(--ink-weak);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  margin: 0 0 1.375rem;
}

.entity-head .summary {
  color: var(--ink-mid);
  font-size: 1.125rem;
  line-height: 2;
  margin: 0;
  max-width: var(--measure);
}

/* サマリの2行目（住まいソースが整理した情報であることの帰属ラベル）。無彩色のタグにする。
   確認状態のラベル（.mark）と読み違えないよう、緑を使わず、角もピル型にしない */
.entity-head .summary-attribution {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-mid);
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-top: 0.5rem;
  padding: 0.125rem 0.625rem;
}

/* --- 情報の状態＋AI向けの提供データ（デスクトップで左右に並ぶカード列） --- */

.panel-row { display: grid; gap: 1rem; }

.status-panel {
  background: var(--bg);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 1.5rem 1.625rem;
}

.status-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.status-title {
  border-bottom: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 0;
}

.status-total { color: var(--ink-weak); font-size: 0.75rem; }

/* 情報の状態パネルは数え方の異なる2集計を、見出し付きの .status-block 2つに分けて表示する。
   前段=項目ごとの内訳（最上段による排他な分類・合計33）、後段=情報源ごとの確認件数（重複あり）。
   見出しに「確認済み」をグルーピング名として使わない（ADR-0011 決定8）。
   パネル内の小ブロックのため「1セクション=1枚の白カード」の全体規則は打ち消し、区切り線で分ける */
.status-block {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 1rem;
  padding: 0;
}
.status-block--counts {
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.875rem;
}

.status-subhead {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

/* 各ブロックの見出し直下に置く「どう数えたか」の説明。何を数えたかを常に添える（ADR-0011 決定8） */
.status-caption {
  color: var(--ink-weak);
  font-size: 0.6875rem;
  line-height: 1.6;
  margin: 0 0 0.625rem;
}

/* 確認状態5区分の比率バー。値は Entity ごとに inline の flex 値で与える。
   合算した「確認済み計」のセグメントを作らない（ADR-0010 決定9）。
   件数は直下の .meter-legend が可視テキストで担うため、バー自体は aria-hidden */
.meter {
  border-radius: 999px;
  display: flex;
  gap: 4px;
  height: 0.875rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.meter-seg { display: block; }
.meter-seg--external { background: var(--verified); }
.meter-seg--statement { background: var(--verified-mid); }
.meter-seg--internal { background: var(--verified-light); }
.meter-seg--declared { background: var(--declared); }
.meter-seg--unverified { background: #c9c9c5; }

/* バーの凡例。色ドットはバーのセグメント色と同一変数を参照する。
   段ごとの色分け禁止（ADR-0010 決定8）はバッジ（.mark）が対象で、バー専用トーンの凡例はバーの一部 */
.meter-legend {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.meter-legend li { align-items: baseline; display: flex; gap: 0.25rem; }
.meter-legend b { font-variant-numeric: tabular-nums; }

.meter-key {
  align-self: center;
  border-radius: 50%;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
}
.meter-key--external { background: var(--verified); }
.meter-key--statement { background: var(--verified-mid); }
.meter-key--internal { background: var(--verified-light); }
.meter-key--declared { background: var(--declared); }
.meter-key--unverified { background: #c9c9c5; }

/* 内訳と確認件数で数字が異なる理由の説明。件数は書かない（ADR-0011 決定8:「うち複数情報源で確認 ○件」を出さない） */
.status-note {
  color: var(--ink-weak);
  font-size: 0.6875rem;
  line-height: 1.6;
  margin: 0.625rem 0 0;
}

.status-counts {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 0.375rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-counts li { align-items: baseline; display: flex; gap: 0.125rem; }
.status-counts .mark { margin-left: 0; margin-right: 0.5rem; }
.status-counts .mark--verified { margin-right: 0; }
.status-counts .mark--source { margin-left: 0.25rem; }
.status-counts b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.status-meta {
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
  line-height: 1.7;
  margin: 0;
  padding-top: 0.875rem;
}

.status-meta dt {
  color: var(--ink-weak);
  float: left;
  width: 7em;
}

.status-meta dd { margin: 0 0 0.125rem 7em; }
.status-meta dd:last-child { margin-bottom: 0; }

.status-foot {
  color: var(--ink-weak);
  font-size: 0.75rem;
  line-height: 1.7;
  margin: 0.875rem 0 0;
}

/* --- AI向けの提供データ --- */

/* 影付きカードの掲載情報と手触りを変えるため、破線の白カードにする */
.ai-panel {
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
  margin-top: 0;
  padding: 1.5rem 1.625rem;
}

.ai-title {
  border-bottom: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.25rem;
  padding: 0;
}

.ai-lead {
  color: var(--ink-weak);
  font-size: 0.75rem;
  margin: 0 0 0.875rem;
}

.ai-row-label {
  align-self: center;
  color: var(--ink-weak);
  font-size: 0.8125rem;
}

.ai-primary {
  font-size: 0.8125rem;
  margin: 0 0 0.5rem;
}

.ai-primary .ai-row-label { margin-right: 0.5rem; }

.ai-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ai-files a {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mid);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
}

.ai-files a:hover { border-color: var(--ink-mid); color: var(--ink); }

.ai-fields {
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.7;
  margin: 0;
  padding-top: 0.75rem;
}

.ai-fields dt {
  color: var(--ink-weak);
  float: left;
  width: 9em;
}

.ai-fields dd { margin: 0 0 0.25rem 9em; }
.ai-fields dd:last-child { margin-bottom: 0; }

code {
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  font-size: 0.9em;
  padding: 0.0625rem 0.25rem;
}

/* --- セクション（1セクション=1枚の白カード） --- */

section {
  background: var(--bg);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  margin-top: 1.25rem;
  padding: 2rem 2rem 2.25rem;
}

/* 罫線は引かず、短い太下線だけで見出しにアクセントをつける（色は墨のまま） */
h2 {
  border-bottom: 0;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  margin: 0 0 1.5rem;
  padding-bottom: 0.625rem;
  position: relative;
}

h2::after {
  border-radius: 2px;
  background: var(--ink);
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 2.5rem;
}

/* 情報の状態・AI向けデータの見出しはパネル内の小見出しなのでアクセントを付けない */
.status-title::after,
.ai-title::after { content: none; }

h3 {
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  margin: 2rem 0 0.75rem;
}

p { margin: 0 0 1rem; }

.lead { color: var(--ink-mid); font-size: 0.9375rem; max-width: var(--measure); }

/* 読み物の本文は行長を --measure に保つ（ページ幅の拡張に引きずられない） */
#description p { max-width: var(--measure); }

/* --- 情報テーブル --- */

table.facts {
  border-collapse: collapse;
  font-size: 0.875rem;
  width: 100%;
}

table.facts th,
table.facts td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.75rem 0.5rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
}

/* 項目名は列幅 12em に収まれば1行のまま。長い項目名（来場施設の名称・検討条件との相性の
   「並行して検討されることのある企業」・よくある質問の質問文など）は列の中で折り返す。
   折り返さないと列が伸び、狭い画面ではページ全体が横にずれる */
table.facts th {
  color: var(--ink-mid);
  font-weight: 600;
  width: 12em;
}

/* 数値は等幅数字で桁を揃える（和文には影響しない） */
table.facts td,
table.attrs td,
.status-meta dd,
.ai-fields dd { font-variant-numeric: tabular-nums; }

table.facts td .val { display: block; }

table.facts td .val + .val { margin-top: 0.375rem; }

.unset { color: var(--ink-weak); }

/* --- 確認状態ラベル --- */

/* 値とラベルの間には HTML 上で空白文字を1つ置く（CSS を外してテキスト抽出したときに
   値とラベルが連結しないため）。その空白ぶん margin-left を 0.5rem から詰めて、見た目の
   間隔は従来と同等に保つ */
.mark {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-left: 0.25rem;
  padding: 0.125rem 0.625rem;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.mark--verified { background: var(--verified-bg); color: var(--verified); }
.mark--declared { background: var(--declared-bg); color: var(--declared); }
.mark--unverified { background: var(--unverified-bg); color: var(--unverified); }

/* 出どころラベル（外部記録 / 公式表明 / 内部記録）。「確認済み」の直後に並べ、
   何を見て確認したかを示す。3段すべてに同一の緑アウトラインを与え、段による色分けは
   しない — 濃淡のランプは格付けとして読まれるため、段の区別は語だけが担う
   （ADR-0010 決定8）。緑は「確認済み」と同じカテゴリカル色であり、色相を増やさずに
   2つ目のピルが1つ目に従属して見える効果を兼ねる */
.mark--source {
  background: var(--bg);
  border: 1px solid var(--verified-rule);
  color: var(--verified);
  margin-left: 0;
}

.mark-note {
  color: var(--ink-weak);
  display: block;
  font-size: 0.75rem;
  line-height: 1.6;
  margin-top: 0.1875rem;
}

/* よくある質問の回答に添える、確認済みの項目への参照。回答本文（申告）と確認済みの事実の
   間を機械にも人にもたどれるようにする */
.faq-ref {
  color: var(--ink-weak);
  display: block;
  font-size: 0.75rem;
  line-height: 1.6;
  margin-top: 0.1875rem;
}

/* --- 確認状況セクション --- */

.verif-legend {
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  line-height: 1.7;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
}

.verif-legend li + li { margin-top: 0.4375rem; }
.verif-legend .mark:first-child { margin-left: 0; }

/* 確認の履歴の2表は列が多く、出所のURLは折り返さないため、画面より広くなることがある。
   表を枠で包んで枠の中だけ横にスクロールさせ、ページ全体が横にずれないようにする。
   列見出しは1文字ずつに潰れないよう折り返さない */
.verif-scroll { overflow-x: auto; }

table.verif { border-collapse: collapse; font-size: 0.8125rem; width: 100%; }
table.verif time { white-space: nowrap; }
table.verif thead th { white-space: nowrap; }

table.verif caption {
  color: var(--ink-mid);
  font-size: 0.875rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  text-align: left;
}

table.verif th,
table.verif td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.5625rem 0.75rem 0.5625rem 0;
  text-align: left;
  vertical-align: top;
}

table.verif thead th {
  border-bottom: 1px solid var(--rule);
  color: var(--ink-weak);
  font-size: 0.75rem;
  font-weight: 600;
}

/* --- 検討時の指標（旧: 比較軸） --- */

table.attrs { border-collapse: collapse; font-size: 0.875rem; width: 100%; }

table.attrs th,
table.attrs td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.75rem 0.5rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
}

table.attrs th {
  color: var(--ink-mid);
  font-weight: 600;
  width: 12em;
}

/* --- 更新履歴 --- */

.changelog { font-size: 0.875rem; list-style: none; margin: 0; padding: 0; }

.changelog li {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.625rem 0;
}

.changelog time {
  color: var(--ink-weak);
  font-variant-numeric: tabular-nums;
  margin-right: 0.875rem;
}

/* --- フッター --- */

/* フッター全体を運営者ゾーンの薄緑パネルとして区画する（D案） */
footer {
  background: var(--brand-soft);
  border: 1px solid var(--brand-rule);
  border-top: 2px solid var(--brand);
  border-radius: var(--r-lg);
  color: var(--ink-weak);
  font-size: 0.75rem;
  line-height: 1.8;
  margin-top: 3rem;
  padding: 1.75rem 2rem 2rem;
}

footer p { margin: 0 0 0.5rem; }

.footer-brand {
  align-items: center;
  border-bottom: 1px solid var(--brand-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
}

.footer-brand-logo { display: block; height: 2rem; width: auto; }

.footer-brand-name { color: var(--ink-mid); font-size: 0.875rem; font-weight: 600; }

.footer-brand-site {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mid);
  line-height: 1.5;
  margin-left: auto;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
}

.footer-brand-site:hover { border-color: var(--brand); color: var(--brand-strong); }

.footer-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.footer-links-label { color: var(--ink-weak); }

.footer-links a {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mid);
  line-height: 1.5;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
}

.footer-links a:hover { border-color: var(--brand); color: var(--brand-strong); }

/* 運営者の署名（A案: 細罫・右下表記・ロゴ6.5rem）。カードは使わず、細罫の下の左に
   ロゴを大きく直置きし、運営表記は小さく右下に沈める */
.footer-operator {
  align-items: flex-end;
  border-top: 1px solid var(--brand-rule);
  color: var(--brand-strong);
  display: flex;
  font-size: 0.6875rem;
  font-weight: 600;
  gap: 1.25rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
}

.footer-operator-logo { display: block; flex: none; height: 6.5rem; width: auto; }

/* 狭い画面で運営者表記が社名の途中（「SWODA株式／会社」）で切れないよう、空白の位置でだけ折り返す */
.footer-operator span { word-break: keep-all; }

a { color: inherit; }

/* --- 広い画面（レイアウト専用。--band-h / --header-h には触れない） --- */

@media (min-width: 56rem) {
  /* 情報の状態とAI向けデータを左右に並べる。高さは揃えず各カードの自然高に任せる */
  .panel-row { align-items: start; grid-template-columns: 3fr 2fr; }

  /* 項目型データは DOM を <table> のまま、見た目だけ2列のカードに組み替える。
     表の意味論はソースHTML（AI読取）に残る。崩れた場合はこのブロックを外せば
     行レイアウトに縮退する */
  table.facts,
  table.attrs { display: block; }

  table.facts tbody,
  table.attrs tbody {
    display: grid;
    gap: 0.875rem;
    grid-template-columns: 1fr 1fr;
  }

  /* 枠線を引かず、薄グレーのベタ面だけで柔らかく区画する */
  table.facts tr,
  table.attrs tr {
    background: var(--bg-soft);
    border: 0;
    border-radius: var(--r-md);
    display: block;
    padding: 1rem 1.25rem 1.125rem;
  }

  table.facts th,
  table.facts td,
  table.attrs th,
  table.attrs td {
    border-bottom: 0;
    display: block;
    padding: 0;
    width: auto;
  }

  table.facts th,
  table.attrs th {
    color: var(--ink-weak);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
    white-space: normal;
  }

  /* 文章量の多い3セクションは1列のまま（カード化のみ） */
  #categories table.facts tbody,
  #context table.facts tbody,
  #faq table.facts tbody { grid-template-columns: 1fr; }

  /* 質問文は項目ラベルではなく本文と同じ墨色・級数で読ませる */
  #faq table.facts th { color: var(--ink); font-size: 0.875rem; letter-spacing: 0; margin-bottom: 0.5rem; }
}

/* --- 狭い画面 --- */

@media (max-width: 34rem) {
  /* 追従するヘッダーなので縦積みにはせず、1行のまま各要素を縮める */
  :root { --band-h: 1.75rem; --header-h: 3.8125rem; }

  /* 帯は1行固定なので、狭い画面では運営表記を落とす。運営者は本文・JSON-LD・
     フッターにも出ており、ここで落としても情報は失われない */
  .site-id-operator { display: none; }

  /* 高さは .nav-toggle の 2.75rem（タップ領域）が下限。padding で 3.8125rem に合わせる */
  .entity-header { padding: 0.5rem 1.25rem; }
  .entity-header-inner { gap: 0.75rem; }
  .entity-brand-logo { height: 2rem; }
  .entity-brand-name { font-size: 0.9375rem; }

  .nav-menu { left: 1.25rem; right: 1.25rem; width: auto; }

  .wrap { padding: 0 0.875rem 4rem; }

  .entity-head { padding: 2.5rem 0.375rem 1.625rem; }
  .entity-head h1 { font-size: 1.75rem; }
  .entity-head .summary { font-size: 1rem; line-height: 1.9; }

  section { margin-top: 1rem; padding: 1.25rem 1rem 1.375rem; }

  .status-panel,
  .ai-panel { padding: 1.25rem 1rem; }

  .footer-brand-site { margin-left: 0; }

  footer { padding: 1.25rem 1rem 1.5rem; }

  .status-meta dt,
  .ai-fields dt { float: none; width: auto; }

  .status-meta dd,
  .ai-fields dd { margin-left: 0; margin-bottom: 0.5rem; }

  table.facts th,
  table.facts td,
  table.attrs th,
  table.attrs td {
    display: block;
    width: auto;
  }

  table.facts th,
  table.attrs th { border-bottom: 0; padding-bottom: 0; }
}