/* =====================================================================
   tokens.css ── デザイントークン（デザイン統一パスの土台）
   ---------------------------------------------------------------------
   正典：01_UI設計原則.md F.2（文字サイズ下限）＋T.8.1(1)〜(9)＋R.8（色は状態）。
   見本：作業記録/2026-08-10_UI判断デモ.html。
   **全テンプレートはこのファイルの変数・基底クラスだけを使う。**
   画面側で font-size や色コードを直書きしない（直書きした瞬間、13px未達100箇所の
   再発が始まる——たたき台HTMLで実際に起きたこと）。
   ===================================================================== */
:root{
  /* 色（R.8：階層でなく状態で分ける。青ければ今ここ） */
  --blue:#1a5fa5; --blue-d:#134a82; --blue-l:#e8f1fa; --blue-ll:#f4f8fc;
  --ink:#1f2937; --sub:#5b6774; --line:#d7dee6; --bg:#f6f8fa;
  --state-current:var(--blue);      /* 選択中・現在地（濃青） */
  --state-done:var(--blue-l);       /* 選択済み・登録済み（淡青） */
  --state-none:#eef2f6;             /* 未選択・未登録（グレー） */
  --state-todo:#b45309;             /* 未完了・要対応（琥珀。評価の含意を持たせない） */
  --state-todo-bg:#fef3e2;
  --ok:#166534; --ok-bg:#e7f4ec;

  /* 文字サイズ（F.2の下限。これ未満の変数は存在させない） */
  --fs-body:16px;        /* 本文 */
  --fs-sub:13.5px;       /* 補助テキスト・ヒント・キャプション（下限13px） */
  --fs-h1:22px;          /* 画面題目 */
  --fs-h2:17px;          /* カード見出し（下限16px） */
  --fs-btn:15.5px;       /* ボタン・入力欄（下限15px） */
  --lh:1.7;              /* 行間 1.6〜1.8 */
  --tap:44px;            /* タップ・クリック領域の最小 */
}
html{font-size:var(--fs-body)}
body{margin:0;font-family:"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  font-size:var(--fs-body);line-height:var(--lh);color:var(--ink);background:var(--bg)}
h1{font-size:var(--fs-h1);font-weight:700;color:var(--blue-d)}
h2{font-size:var(--fs-h2);font-weight:700}
small,.sub{font-size:var(--fs-sub);color:var(--sub)}
button,.btn,input,select,textarea{font-size:var(--fs-btn);font-family:inherit}
.btn{display:inline-block;background:var(--blue);color:#fff;border:none;border-radius:9px;
  padding:11px 20px;font-weight:700;cursor:pointer;min-height:var(--tap)}
.btn:hover{background:var(--blue-d)}
.btn-ghost{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
input[type=text],input[type=month],input[type=number],select,textarea{
  padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;background:#fff;width:100%;box-sizing:border-box}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:1px}  /* T.8.1(8) 琥珀に見える既定リングを使わない */
/* 主要な自由記述欄（回答・返信・追記・本文）は全幅・最低4〜6行（UI判断7-1） */
textarea.main-input{min-height:120px;resize:vertical}
/* カードの3層構造（T.8.1(1)：バッジ小・見出し大・メタ淡） */
.card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 16px}
.card .badge{font-size:13px;font-weight:700;border-radius:6px;padding:2px 8px;
  background:var(--blue-l);color:var(--blue-d)}
.card .title{font-size:17px;font-weight:700}
.card .meta{font-size:var(--fs-sub);color:var(--sub)}
/* 一覧カードのメタ行で機場名だけ立てる（B-118案a）。誰の投稿かが最重要情報なのに
   会社名・日付と同じ淡い小文字に埋もれていた——3層構造（バッジ→見出し→メタ）は
   変えず、機場名スパンだけ本文色・太めにする。全一覧のメタ行に一括適用 */
.card .meta .mfac{color:var(--ink);font-weight:600}
/* 一覧のリンクのタップ目標を24px以上に（WCAG 2.2 SC 2.5.8。AIテスト3・指摘5：
   見出しリンク高22px・メタ内リンク18pxで基準に届いていなかった。inline-blockに
   しないとpaddingが当たり判定に効かない。見た目の行間はほぼ変わらない） */
.card .title a,.card .meta a{display:inline-block;padding:3px 0}
/* ── 上部固定バーの操作ボタン（B-104）─────────────────────────────
   topbar_actions（③この画面固有の操作）に置くボタン・リンクの寸法は
   この1クラスに集約する。従来は画面ごとのインライン指定で
   7px16px／8px18px／8px20px／9px18px の4種に割れ、画面を跨ぐと高さ・
   位置が微妙にずれていた（2026-08-22運営者指摘）。
   色は従来どおり .btn / .btn-ghost を併用し、寸法だけをここが握る */
.topAct{display:inline-flex;align-items:center;gap:4px;text-decoration:none;
        min-height:var(--tap);padding:8px 18px}

/* ── 設備台帳の2カラム（ツリー＋作業列）──────────────────────────
   B-99（固定幅ツリーの潰れ）→B-100（境界900px化）の到達点を、B-104で
   daicho_block.htmlのインライン<style>からここへ移設——台帳の全体ビュー
   （daicho_all＝閲覧側）でも同じツリーを使うため。中身は同一。
   ①901px以上：ツリーは縮める（flex:0 1 264px・下限184px）。主戦場は作業列
   ②900px以下：縦1列。ツリーは畳んだdetailsとして上に（既定は畳む=JS）。
     900px境界の根拠：768px（iPad縦）で作業列が全幅になる（B-100） */
.daichoCols{display:flex;gap:16px;align-items:flex-start}
.daichoTree{flex:0 1 264px;min-width:184px;position:sticky;top:10px}
/* 中間の幅（小型ノート）：作業列を優先してツリーの取り分を先に減らす。
   flexのshrinkは作業列(basis 0)に圧が掛からず自然には縮まらないため明示 */
@media (max-width:1100px) and (min-width:901px){
  .daichoTree{flex-basis:204px;min-width:170px}
}
@media (max-width:900px){
  .daichoCols{display:block}
  .daichoTree{position:static;min-width:0;margin-bottom:12px}
}

/* ── 災害への備え・水害リスクの①〜④（B-111⑦・案B）───────────────
   上段＝放流河川（読み取り）・下段＝①〜④が同じ段に横並び（運営者裁定）。
   広い画面は4列、狭くなったら2列（①②／③④）→1列。境界900pxは台帳と揃える */
.floodGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 16px;max-width:820px}
@media (max-width:900px){ .floodGrid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .floodGrid{grid-template-columns:1fr} }