/* ── ブランド（Brandguidelines_yah.pdf・docs/brand/brand-reference.md）に揃える（2026-08-31）──
   本体サイト（yah.homes）と同じ National 2 を自ホストし、和文は游ゴシックを先頭に置く。
   フォントファイルは yah.homes-v2/public/fonts からの複製——**片方だけ差し替えない** */
@font-face { font-family: "National2"; src: url("/fonts/national-2-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "National2"; src: url("/fonts/national-2-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
/* 読込前の代替に寸法補正をかけ、切替時のガタつきを抑える（本体サイトと同じ値） */
@font-face { font-family: "National2-fallback"; src: local("Arial");
  size-adjust: 103%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

/* yah.OS 共通スタイル — 全ページの正本（P5・2026-08-24）。
   ここを直せば全ページに効く。ページ固有の差分だけを各ページの<style>に残す。 */

  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* 地色はブランドの Black var(--bg)（旧 var(--bg)）。書体は本体サイトと同一の並び */
  body { background: var(--bg); color: var(--ink);
    font-family: "National2", "National2-fallback", "Yu Gothic Medium", "YuGothic", "Yu Gothic",
      "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased; }
  .topbar { position: sticky; top: 0; z-index: 10; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-1); }
  /* トップバーも他の帯と同じ高さにする（2026-09-01 発注者指示）。
     padding で決めると中身の文字サイズで高さが動き、下のパネルの線と揃わなくなる */
  .topbar-in { height: var(--head-h); padding: 0 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
  .crumb { font-size: 0.85rem; color: var(--ink-2); }
  .crumb a { color: var(--ink-2); text-decoration: none; }
  .crumb b { color: var(--ink); font-weight: 600; }

  /* ── 3ペイン（OSデザインの根幹を踏襲） ──
     2026-09-01 発注者指示で骨格を更新:
       ・左ナビの右に項目パネル（.panel2 を置く場所）を設ける
       ・中央の上部にタブを置く帯（.main-tabs）を常設する
       ・右パネルの既定幅 600px → 500px（2026-09-01 発注者指示） */
  .layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 5px var(--panel-w, 500px); min-height: calc(100vh - var(--top-h)); }
  /* 左ナビの右に置く項目パネル。使うページだけ .layout に has-aside を付ける */
  .layout.has-aside { grid-template-columns: 210px var(--aside-w, 260px) minmax(0, 1fr) 5px var(--panel-w, 500px); }
  .aside { border-right: 1px solid var(--line-1); padding: 1.1rem 0.9rem; overflow-y: auto;
    position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); }
  .aside > .panel2 + .panel2 { margin-top: 0.9rem; }
  /* 右パネルは中身があるときだけ開く（2026-09-02 発注者指示）。
     閉じているあいだ、中央の表がその幅を使えるようにする */
  .layout.panel-closed { grid-template-columns: 210px minmax(0, 1fr) 0 0; }
  .layout.has-aside.panel-closed { grid-template-columns: 210px var(--aside-w, 260px) minmax(0, 1fr) 0 0; }
  .panel-closed .panel, .panel-closed .panel-resizer { display: none; }
  .panel-close { margin-left: auto; background: transparent; border: 0; color: var(--ink-2);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 4px; font-family: inherit; }
  .panel-close:hover { background: var(--line-1); color: var(--ink); }
  .panel-resizer { cursor: col-resize; background: transparent; position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); }
  .panel-resizer:hover, .panel-resizer.dragging { background: #2f6bd8; }
  body.resizing { cursor: col-resize; user-select: none; }
  .side { border-right: 1px solid var(--line-1); padding: 1.25rem 0.75rem; }
  .side-link { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink-2); font-size: 0.85rem; letter-spacing: 0.06em; cursor: pointer; padding: 0.55rem 0.85rem; border-radius: 6px; font-family: inherit; text-decoration: none; }
  .side-link:hover { background: #161616; color: var(--ink); }
  .side-link.is-active { background: var(--line-1); color: var(--ink); }
  /* 項目パネルの縦リストが .tab を兼ねているページ（maintenance ほか）。
     下線式タブの見た目（inline-flex・下線・詰めたpadding）を拾わせない——
     ここは「帯に並ぶタブ」ではなく「縦に積む項目」なので、side-link の見た目が正しい */
  .side-link.tab { display: flex; width: 100%; justify-content: space-between; align-items: center;
    border-bottom: 0; margin-bottom: 0; padding: 0.55rem 0.85rem; white-space: normal; }
  .side-link.tab.is-active { border-bottom-color: transparent; }
  .side-sep { border: 0; border-top: 1px solid var(--line-1); margin: 0.9rem 0.4rem; }
  .side-cap { font-size: 0.72rem; color: var(--th); letter-spacing: 0.25em; padding: 0.3rem 0.85rem 0.5rem; }
  .main { padding: 1.75rem 1.75rem 4rem; min-width: 0; }
  .panel { border-left: 1px solid var(--line-1); position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; }
  /* 右パネルは自分の中でスクロールするので、見出しも貼り付ける（top: 0 はパネルの中での0）。
     中央のタブ帯が固定で残るのに右だけ流れると、下線の高さが揃わなくなる（2026-09-01 発注者指摘） */
  .panel-head { height: var(--head-h); min-height: var(--head-h); display: flex; align-items: center;
    gap: 0.5rem; padding: 0 1.5rem; border-bottom: 1px solid var(--line-1); font-size: 0.95rem; font-weight: 600;
    position: sticky; top: 0; z-index: 8; background: var(--bg); }
  .panel-body { padding: 1.25rem 1.5rem; }
  /* 画面末尾に畳む注記（仕様: spec_note_discipline_20260901.md）。
     出典と前提はここへ集約する。**警告（人の対応が要るもの）は畳まない**——
     気づけなければ意味がないので、行・値の隣にバッジで残す */
  .note-foot { margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-1); }
  .note-foot summary { color: #7d7d7d; font-size: 0.78rem; cursor: pointer;
    list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; }
  .note-foot summary::-webkit-details-marker { display: none; }
  .note-foot summary::before { content: "＋"; color: #5c5c5c; font-size: 0.72rem; }
  .note-foot details[open] summary::before { content: "−"; }
  .note-foot summary:hover { color: #cfcfcf; }
  .note-foot ul { margin: 0.8rem 0 0; padding-left: 1.1rem; }
  .note-foot li { color: var(--th); font-size: 0.78rem; line-height: 1.8; margin: 0.25rem 0; }
  .panel-empty { padding: 3rem 1rem; color: #555; font-size: 0.82rem; text-align: center; letter-spacing: 0.05em; }
  .panel-sec { margin-bottom: 1.6rem; }
  .panel-sec h3 { font-size: 0.72rem; color: #777; letter-spacing: 0.25em; margin-bottom: 0.7rem; font-weight: 500; }
  .panel-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--sunken-2); font-size: 0.8rem; }
  .panel-row .k { color: var(--ink-2); }
  /* ジョブ詳細パネル */
  .tl { list-style: none; }
  .tl li { position: relative; padding: 0 0 1rem 1.4rem; font-size: 0.76rem; color: #ddd; }
  .tl li::before { content: ""; position: absolute; left: 0.28rem; top: 0.5rem; bottom: -0.1rem; width: 1px; background: var(--line-2); }
  .tl li:last-child::before { display: none; }
  .tl li::after { content: ""; position: absolute; left: 0; top: 0.28rem; width: 8px; height: 8px; border-radius: 50%; background: #2a2a2a; border: 1px solid #3a3a3a; }
  .tl li.on::after { background: var(--ok); border-color: #1f4a33; }
  .tl li.ng::after { background: var(--warn); border-color: #6f2424; }
  .tl .t { color: #777; font-size: 0.72rem; margin-left: 0.4rem; }
  .thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
  .thumb { aspect-ratio: 4/3; background: #161616; border: 1px solid var(--line-2); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; color: #555; font-size: 0.72rem; }
  .verdict { font-size: 0.74rem; line-height: 1.9; background: #12291d; border: 1px solid #1f4a33;
    color: #a8dfc2; border-radius: 7px; padding: 0.6rem 0.8rem; }
  .verdict.bad { background: #3a1414; border-color: #6f2424; color: #ffb3b3; }
  .pbar { display: flex; flex-direction: column; gap: 0.5rem; }
  .pbtn { border: 1px solid #333; background: transparent; color: #ddd; border-radius: 6px;
    padding: 0.55rem 1rem; font-family: inherit; font-size: 0.78rem; cursor: pointer; text-align: center; text-decoration: none; }
  .pbtn:hover { border-color: #666; }
  .pbtn.danger { color: var(--warn-text); border-color: #4a2020; }
  .msg { font-size: 0.76rem; line-height: 1.8; padding: 0.6rem 0.8rem; border-radius: 7px; margin-bottom: 0.5rem; }
  .m-ai { background: #14243d; color: #cfe1ff; }
  .m-vendor { background: var(--sunken-2); color: #ccc; }

  /* 中央の上部に常設するタブの帯。中身が無くても高さを持たせ、
     ページ間でタブの位置が上下しないようにする（2026-09-01） */
  /* タブ帯も貼り付ける（2026-09-01 発注者指示）。長い表を縦にスクロールしても
     いまどのタブを見ているかが消えない。トップバー(var(--top-h))の直下に固定する。
     背景を敷かないと本文が透けるので、地色で塗る */
  /* 帯の高さは中央と右パネルで共通（--head-h）。ここが揃っていないと、
     中央のタブ下線と右パネルの見出し下線が段違いに見える（2026-09-01 発注者指摘） */
  .main-tabs { height: var(--head-h); min-height: var(--head-h); display: flex; align-items: flex-end;
    border-bottom: 1px solid var(--line-2); margin-bottom: 1.4rem;
    position: sticky; top: var(--top-h); z-index: 9; background: var(--bg);
    /* .main の上左右padding分だけ外へ広げ、右パネルの見出しと同じ高さから始める */
    margin-top: -1.75rem; margin-left: -1.75rem; margin-right: -1.75rem; padding: 0 1.75rem; }
  @media (max-width: 700px) { .main-tabs { margin-top: -1rem; margin-left: -0.9rem; margin-right: -0.9rem; padding: 0 0.9rem; } }
  .main-tabs .tabs { border-bottom: 0; margin-bottom: 0; }
  .main-tabs[hidden] { display: none; }
  /* 囲み面の正本（新しいカードはこれを使う。var(--sunken) の独自定義を増やさない） */
  .panel2 { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 10px; padding: 1rem 1.2rem; }
  .panel2 h3 { font-size: 0.82rem; color: #cfe1ff; margin: 0 0 0.2rem; }
  .panel2 .sub { color: var(--ink-3); font-size: 0.72rem; margin-bottom: 0.8rem; }
  /* タブは下線式（2026-09-01 発注者決定・ガイドライン v1.4.0）。
     タブ帯を固定表示にしたので、常に見えるものは軽くする——箱を描くと表の罫線と競合する。
     **折り返さない**: 固定帯で折り返すと帯の高さが変わり、本文が上下に動く。
     入りきらないときは横スクロール（スクロールバーは隠す） */
  .tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--line-2); margin-bottom: 1.5rem;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .tabs::-webkit-scrollbar { display: none; }
  /* hidden属性はUAの display:none だが、クラスの display:flex に詳細度で負ける。
     display を持つクラスには必ず [hidden] の逃げ道を対で置く（2026-08-25 光熱費担当の申し送り） */
  .tabs[hidden] { display: none; }
  .bigkpi[hidden], .subnav[hidden], .subnav-row[hidden] { display: none; }
  .tab {
    background: transparent; border: 0; color: var(--ink-2);
    font-family: inherit; font-size: 0.85rem; padding: 0.5rem 0.9rem; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.45rem;
  }
  .tab:hover { color: #cfcfcf; }
  .tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
  .tab[disabled] { opacity: 0.35; cursor: not-allowed; }
  /* 件数バッジ。**数が意味を持つタブだけ**に付ける（全部に付けると無意味な0が並ぶ）。
     要対応の数は機能色の黄で（.tab-n.warn） */
  .tab-n { font-size: 0.72rem; color: var(--ink-3); background: var(--sunken); border-radius: 999px;
    padding: 0.02rem 0.42rem; font-variant-numeric: tabular-nums; }
  .tab.is-active .tab-n { color: #cfe1ff; background: #16202e; }
  .tab-n.warn { color: var(--hold); background: #2a2418; }
  /* 棟の切替タブ（properties / reports / maintenance の上段）。
     3枚が同じものを別々に定義し、青い下線のまま取り残されていた（2026-09-01 発注者指摘）。
     見た目は上の .tab と同じ——タブの形は1つだけにする。ここが正本、カード側で再定義しない */
  .prop-head { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: nowrap;
    height: var(--head-h); min-height: var(--head-h);
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    border-bottom: 1px solid var(--line-2);
    margin: -1.75rem -1.75rem 1.4rem; padding: 0 1.75rem;
    position: sticky; top: var(--top-h); z-index: 9; background: var(--bg); }
  @media (max-width: 700px) { .prop-head { margin: -1rem -0.9rem 1.4rem; padding: 0 0.9rem; } }
  /* 棟名の横に置く注記（監査バッジなど）は下端に揃えず、中央に置く */
  .prop-head > :not(.prop-tab) { align-self: center; }
  .prop-head::-webkit-scrollbar { display: none; }
  .prop-head[hidden] { display: none; }
  .prop-tab { background: transparent; border: 0; color: var(--ink-2);
    font-family: inherit; font-size: 0.85rem; padding: 0.5rem 0.9rem; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .prop-tab:hover { color: #cfcfcf; }
  .prop-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
  table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  th, td { text-align: left; padding: 0.85rem 0.7rem; border-bottom: 1px solid #1e1e1e; vertical-align: top; line-height: 1.6; }
  thead th { font-size: 0.72rem; color: var(--th); letter-spacing: 0.15em; font-weight: 500; }
  td { color: #ddd; }
  .dim { color: var(--ink-2); }
  .pill { display: inline-block; font-size: 0.72rem; padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid #333; color: #bbb; }
  .warn { color: #f0b429; border-color: #4a3a1a; }

  .cal-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
  .yr { background: var(--sunken); border: 1px solid #2a2a2a; color: var(--ink); border-radius: 6px; padding: 0.3rem 0.75rem; cursor: pointer; font-family: inherit; }
  .yr-label { font-size: 1rem; font-weight: 600; min-width: 4rem; text-align: center; }
  .legend { display: flex; gap: 1rem; margin-left: auto; font-size: 0.72rem; color: var(--ink-2); flex-wrap: wrap; }
  .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.3rem; }
  .cal { table-layout: fixed; }
  .cal th:first-child, .cal td:first-child { width: 3.6rem; color: var(--ink-2); }
  .cal td { padding: 0.4rem 0.4rem; height: 2.6rem; }
  .job { display: block; font-size: 0.72rem; border-radius: 5px; padding: 0.28rem 0.5rem; margin-bottom: 0.22rem; border: 1px solid transparent; cursor: pointer; }
  .j-plan { background: var(--sunken-2); color: var(--ink-2); border-color: #2a2a2a; }
  .j-conf { background: #14243d; color: #7fb2ff; border-color: #24436f; }
  .j-done { background: #12291d; color: var(--ok); border-color: #1f4a33; }
  .job.spot { border-style: dashed; }
  .j-late { background: #3a1414; color: var(--warn-text); border-color: #6f2424; box-shadow: 0 0 8px rgba(239,68,68,0.25); }
  .note { margin-top: 1.1rem; font-size: 0.78rem; color: var(--ink-2); line-height: 1.9; }
  .row-click { cursor: pointer; }
  /* キーボードで辿ったとき、どの行にいるか分かるようにする（os-core が tabindex を付ける） */
  .row-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .row-click:hover td { background: #121212; }
  /* 選択中の行（§6.6・P1-2）。左の縦線2px＝選んでいる印。色は既存トークンのみ */
  .row-click.is-sel td { background: var(--panel-head); }
  .row-click.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
  tr.is-selected td { background: #17202e; }
  .inp {
    background: transparent; border: 0; border-bottom: 1px dashed #333; color: #ddd;
    font: inherit; padding: 0.1rem 0.15rem; width: 100%; min-width: 5rem;
  }
  .inp:focus { outline: none; border-bottom-color: #7fb2ff; background: #10151d; }
  .bar { display: flex; gap: 0.6rem; margin-top: 1.1rem; align-items: center; }
  .btn-sub {
    background: transparent; border: 1px solid #333; color: #ddd; border-radius: 6px;
    padding: 0.5rem 1rem; font-family: inherit; font-size: 0.78rem; cursor: pointer;
  }
  .btn-sub:hover { border-color: #666; }
  .btn-main {
    background: var(--ink); border: 0; color: var(--bg); border-radius: 6px; font-weight: 600;
    padding: 0.5rem 1.2rem; font-family: inherit; font-size: 0.78rem; cursor: pointer;
  }
  .saved { font-size: 0.74rem; color: var(--ok); }
  @media (max-width: 1400px) { .layout.has-aside { grid-template-columns: 210px minmax(0,1fr) 5px var(--panel-w, 500px); } .aside { display: none; } }
@media (max-width: 1100px) { .layout, .layout.has-aside { grid-template-columns: 210px minmax(0,1fr); } .panel, .panel-resizer, .aside { display: none; } }
  @media (max-width: 900px) { .layout, .layout.has-aside { grid-template-columns: 1fr; } .side, .panel-resizer, .aside { display: none; } }

  .bigkpi {
    display: flex; border-bottom: 1px solid var(--line-1); background: #0c0c0c;
  }
  .bk {
    flex: 1; display: flex; align-items: baseline; gap: 0.8rem;
    padding: 0.85rem 1.75rem; border-left: 1px solid var(--line-1);
  }
  .bk:first-child { border-left: 0; }
  .bk-label { font-size: 0.72rem; color: #7a7a7a; letter-spacing: 0.09em; }
  .bk-value { font-size: 1.35rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .bk-value small { font-size: 0.8rem; font-weight: 500; color: #bbbbbb; margin-left: 0.1rem; }
  @media (max-width: 900px) { .bigkpi { flex-direction: column; } .bk { border-left: 0; border-top: 1px solid var(--line-1); } }
  .bk-s { display:block; font-size: 0.72rem; color:var(--th); margin-top:0.2rem; }

  .nav-right { display: flex; align-items: center; gap: 0.4rem; }
  .nav-ic {
    background: transparent; border: 0; padding: 0.45rem; cursor: pointer;
    color: var(--ink); border-radius: 6px; display: flex;
  }
  .nav-ic:hover { background: var(--sunken-2); }
  .nav-ic svg { width: 21px; height: 21px; }

  .dot {
    width: 6px; height: 6px; border-radius: 50%;
    border: 0; padding: 0; cursor: pointer; appearance: none;
  }
  .dot::after {   /* 6pxでは押しにくいので、見た目を変えずに当たり判定だけ広げる */
    content: ""; position: absolute; inset: -9px;
  }
  .d-ok { background: #3b82f6; }
  .d-warn { background: var(--warn); box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
  .bk { position: relative; }
  /* 状態ドットは各KPIの右上に固定する（位置がバラつくと一覧で拾えないため） */
  .bk > .dot { position: absolute; top: 0.6rem; right: 0.7rem; }
  /* 年数は左MENUの項目の中で選ぶ（別の場所に置くと、どの表の話か分かりにくい） */
  .yr-sel {
    background: var(--line-2); color: var(--ink); border: 1px solid #3a3a3a; border-radius: 4px;
    font-family: inherit; font-size: 0.78rem; padding: 0.1rem 0.2rem; margin: 0 0.15rem; cursor: pointer;
  }

  /* MPA化（2026-08-26 spec_no_iframe）: 埋め込みモードは廃止。全体ナビは os-nav.js が描く。
     「← カード一覧へ」は全体ナビが常に見えるので不要（DOMには残し、見た目だけ消す） */
  .side > a[href="index.html"], .side > a[href="index.html"] + .side-sep { display: none; }

/* モバイル最小対応（P7・2026-08-25）。表は横スクロール・棟切替はチップ行 */
@media (max-width: 700px) {
  .main { padding: 1rem 0.9rem 3rem; }
  .main table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .bigkpi { flex-wrap: wrap; }
  .bk { flex: 1 1 45%; padding: 0.7rem 0.9rem; border-top: 1px solid var(--line-1); }
  .subnav-cap { display: none; }
}

/* ── 全体ナビ（os-nav.js が全ページに描く左カラム・2026-08-26 MPA化）──
   ページ本体は margin-left で右へ寄せる。ナビは fixed なので各ページのレイアウトに干渉しない */
:root { --osnav-w: 200px; }
html.has-osnav body { margin-left: var(--osnav-w); }
.osnav {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--osnav-w);
  background: var(--bg); border-right: 1px solid var(--line-1);
  overflow-y: auto; z-index: 40; padding: 0.6rem 0 2rem;
}
/* 「最近」＝直近10日に開いたカードを新しい順に並べる（2026-09-01 発注者指示）。
   DOMを組み替えず flex の order だけで並べ替える——状態ドットの塗り直しを壊さないため */
.osnav.is-recent { display: flex; flex-direction: column; }
.osnav.is-recent .osnav-home { order: -20; }
.osnav.is-recent .nav-filter { order: -10; }
.osnav.is-recent .side-sep, .osnav.is-recent .side-dim { order: 1000; }
.osnav-home { display: block; padding: 0.8rem 1rem 0.5rem; color: var(--ink); text-decoration: none; }
.osnav-logo { width: 92px; height: auto; display: block; }
.osnav .nav-filter { display: flex; gap: 0.3rem; padding: 0.4rem 0.7rem 0.7rem; }
.osnav .nav-f {
  flex: 1; background: var(--sunken-2); border: 1px solid var(--line-2); color: var(--ink-2);
  font-family: inherit; font-size: 0.72rem; padding: 0.3rem 0; border-radius: 5px; cursor: pointer;
}
.osnav .nav-f.is-active { background: #2b2b2b; color: var(--ink); border-color: #3a3a3a; }
.osnav .nav-cap { font-size: 0.72rem; color: #6a6a6a; letter-spacing: 0.12em; padding: 0.9rem 0.9rem 0.35rem; margin: 0; }
.osnav .nav-item {
  font-size: 0.8rem;
  position: relative; display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.42rem 1.6rem 0.42rem 0.9rem;
  background: transparent; border: 0; color: #b8b8b8; cursor: pointer;
  font-family: inherit; font-size: 0.78rem; text-align: left; text-decoration: none;
}
.osnav .nav-item[hidden] { display: none; }
.osnav .nav-item:hover { background: var(--sunken); color: var(--ink); }
.osnav .nav-item.is-active { background: #1e1e1e; color: var(--ink); box-shadow: inset 2px 0 0 #2f6bd8; }
.osnav .nav-item svg.i { width: 15px; height: 15px; flex: 0 0 15px; }
.osnav .nav-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osnav .dot-nav { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); display: block; }
.osnav .side-dim .nav-t, .osnav .nav-item.side-dim { color: #5a5a5a; }
.d-na { background: #333; box-shadow: none; }
/* ハンバーガー＝モバイル専用のナビ入口。デスクトップは全部見えているので出さない */
.osnav-menu { display: none; }
@media (max-width: 700px) {
  html.has-osnav body { margin-left: 0; }
  .osnav { width: 78%; max-width: 300px; transform: translateX(-105%); transition: transform 0.22s ease; }
  html.osnav-open .osnav { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.6); }
  .osnav-menu { display: flex; }
  .osnav-menu.osnav-fab { position: fixed; left: 0.9rem; bottom: 0.9rem; z-index: 50;
    width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--line-1); border: 1px solid #333; }
  /* カード自身の旧メニューボタン（自分の側パネル用）はモバイルでは側パネルごと消えるため隠す——
     ハンバーガーを1つに保つ */
  .topbar #menu-btn { display: none; }
}
/* ページ遷移をクロスフェードに（対応ブラウザのみ。非対応は普通の遷移＝無害） */
@view-transition { navigation: auto; }

/* ── 可読性の底上げ（2026-08-27）は基底へ畳み込み済み（P2 #7・2026-08-28）。
   最小フォント床 0.72rem はCI（check-hardcoded.mjs）が機械検査。
   基底に同名宣言のない残りだけをここに置く */
.subnav-cap { color: var(--th); }
.bk-label { color: #8f8f8f; font-size: 0.72rem; }

/* 全体を一段大きく（2026-08-27 発注者「もう若干大きくて良い」）。
   ルート基準の引き上げ＝全rem指定が比率を保って拡大する。微調整はこの1行だけ触る */
html { font-size: 17px; }
/* 中央のタブ帯と右パネルの見出しの高さ。両方の下線を同じ高さに揃えるための共通値 */
:root { --head-h: 3.4rem; }
/* トップバーの高さ。帯と同じ値にして、左ナビ・パネルの開始位置を1本に揃える */
:root { --top-h: var(--head-h); }
/* 中央のタブ帯の下端＝表の見出しなどを貼り付けてよい高さ。
   帯の高さを変えたら追随するので、カード側に数字を焼き込まないこと */
:root { --stick-top: calc(var(--top-h) + var(--head-h)); }

/* モバイル用トップバーロゴ（os-navが差す）。デスクトップは左ナビにロゴがあるので出さない */
.osnav-toplogo { display: none; color: var(--ink); }
.osnav-toplogo .osnav-logo { width: 68px; height: auto; display: block; }
@media (max-width: 700px) {
  .osnav-toplogo { display: block; margin-right: .6rem; flex: none; }
}

/* モバイルのトップバー: 状態文言は隠す（ロゴ＋パンくず＋アイコンで幅が尽きる。状態はアイコン色で分かる） */
@media (max-width: 700px) {
  .topbar #live-state { display: none; }
}

/* カテゴリーの開閉（os-nav）。キャレットは状態を示すだけ・行全体がクリック対象 */
.osnav .nav-cap[data-cat] { cursor: pointer; user-select: none; }
.osnav .nav-cap[data-cat]:hover { color: #cfcfcf; }
.osnav .nav-cap .caret { display: inline-block; width: 1em; transition: transform 0.15s ease; }
.osnav .nav-cap.is-collapsed .caret { transform: rotate(-90deg); }

/* ---- a11y最低限＋準備中バッジ（P2 #5/#4・2026-08-28） ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.osnav .nav-soon { font-size: 0.72rem; color: var(--hold); border: 1px solid #6a5522; border-radius: 4px;
  padding: 0 0.3rem; margin-left: auto; }

/* ログイン導線のバナー（os-core が注入・見た目はここが正本） */
.os-login-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem; z-index: 98;
  background: #161a20; border: 1px solid #2c3a4e; border-radius: 10px; padding: 0.7rem 1rem;
  display: flex; gap: 0.8rem; align-items: center; font-size: 0.78rem; color: #cfe1ff;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.os-login-banner button { background: var(--ink); color: var(--bg); border: 0; border-radius: 7px;
  font: inherit; font-weight: 600; padding: 0.4rem 0.9rem; cursor: pointer; white-space: nowrap; }

/* ---- モバイルは「AIに聞く1画面」（spec_mobile_ai_lp_20260829・2026-08-29 発注者承認） ----
   PC（701px以上）には一切効かせない。同じHTMLを配り、見せ方だけを変える。
   URLはPCと同一——別ドメインも /m/ も作らない */
@media (max-width: 700px) {
  /* 今日ボードの表は出さない。数字は「AIに聞いて文章で受け取る」 */
  .home #home-title, .home #home-list { display: none; }
  .home { display: flex; flex-direction: column; min-height: calc(100dvh - var(--top-h));
    padding: 0.9rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom)); }
  /* 未ログインのバナーはトップバー直下に固定で出る。その分だけ本文を下げる */
  /* 中央寄せに変えたので上の余白は不要。バナーは固定配置で本文に重ならない */
  html.os-anon .home { padding-top: 0.9rem; }
  /* AI窓は画面の中央に置く（2026-08-29 発注者指示）。回答が増えたら
     ログの中でスクロールし、窓そのものは中央に留まる＝入力欄を探さなくてよい */
  .home { justify-content: center; }
  .home .ask { display: flex; flex-direction: column; min-height: 0; margin: 0; }
  .home .ask-log { max-height: 58dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin-bottom: 0.6rem; scroll-padding-top: 0.5rem; }
  .home .ask-log:empty { margin-bottom: 0; }
  /* iOSは入力欄のフォントが16px未満だとタップで自動ズームし、画面から枠がはみ出て見える。
     16pxを下回らせない（実機で発生・2026-08-29） */
  .home .ask-bar input { font-size: 16px; }
  .home .ask-bar button { font-size: 0.86rem; padding: 0 0.9rem; }
  /* ホームではハンバーガーを出さない（2026-08-29 発注者「ハンバーガーMENU不要」）。
     カードを直接開いたときは従来どおり出る＝行き止まりを作らない */
  body.page-home .osnav-menu { display: none; }
  .home .ask-a, .home .ask-q { max-width: 100%; }
  /* ログイン導線は入力欄と重なるので、上（トップバー直下）の帯へ回す */
  .os-login-banner { top: 3.4rem; bottom: auto; left: 0.9rem; right: 0.9rem; transform: none;
    justify-content: space-between; }
}

/* 認証の結果を画面に残す帯（2026-08-30）。実機で何が起きたか追えるようにするため */
.os-auth-note { position: fixed; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; z-index: 99;
  background: #2a1a1a; border: 1px solid #6f2424; color: #ffd7d7; border-radius: 9px;
  padding: 0.7rem 0.9rem; font-size: 0.78rem; line-height: 1.7; }

/* ログイン中メニュー（右上アイコンから） */
.os-user-menu { position: fixed; top: 3.2rem; right: 0.9rem; z-index: 99; background: #161616;
  border: 1px solid #2e2e2e; border-radius: 10px; padding: 0.8rem 0.95rem; min-width: 14rem;
  box-shadow: 0 6px 22px rgba(0,0,0,.55); }
.os-user-menu .ou-mail { color: var(--ink-2); font-size: 0.74rem; margin-bottom: 0.65rem;
  overflow-wrap: anywhere; }
.os-user-menu button { width: 100%; background: transparent; border: 1px solid #4a2020;
  color: var(--warn-text); border-radius: 7px; font: inherit; font-size: 0.8rem; padding: 0.45rem 0.8rem;
  cursor: pointer; }

/* ===== 共通部品（os-core が描く操作部・ガイドライン§5.5・2026-09-04） =====
   比較スイッチ: 実在の数字と案の数字の切替。主体スイッチの青と見分けるため琥珀 */
.scenario-sw { display: inline-flex; gap: .3rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.scenario-sw button { font: inherit; font-size: .78rem; letter-spacing: .06em;
  padding: .42rem 1rem; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: #9aa5b0; border: 1px solid #3a2f1e; }
.scenario-sw button:hover { color: #e0c68a; }
.scenario-sw button.on { background: #6b5320; color: #f3e2b8; font-weight: 600; }
.scenario-sw.is-off { opacity: .35; }
.scenario-sw.is-off button { cursor: not-allowed; }
/* 用語ツールチップ: terms に載っている見出し。点線＝カーソルで定義が出る */
th.has-term { border-bottom: 1px dotted #4a5866; }

/* ===== デザイントークン（ガイドライン§4・1.10.0）。値の正本はここ。
   カードは var() で参照だけする——生hexはラチェット検査（designcheck） ===== */
:root {
  --bg: #000; --line-1: #1c1c1c; --line-2: #262626; --row-line: #1a212a;
  --panel: #101418; --panel-line: #1e2630; --panel-head: #161b21;
  --ink: #fff; --ink-2: #9a9a9a; --ink-3: #7d8894;
  --ok: #63d297; --warn: #ef4444; --hold: #e0b050; --accent: #6ea8fe;
  --th: #8a8a8a;                              /* 表見出し（§3） */
  --sunken: #141414; --sunken-2: #1a1a1a;     /* 沈んだ面（§4） */
  --warn-text: #ff8080;                       /* 文中の警告（§4） */
  --r-s: 6px; --r-m: 10px;
  --row-h: 2.75rem;
  --t: background .12s ease, color .12s ease, border-color .12s ease;
}
/* ===== 状態と動き（§6.6） ===== */
button, .row-click, .tab, .side-link { transition: var(--t); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
button:focus-visible, .tab:focus-visible, .has-note:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
/* ===== 説明のホバー（§5.5・.has-note）。title は使わない（表示まで1秒かかる） ===== */
/* カーソルは変えない（？マークは不要・2026-09-06 発注者指示）。説明がある印は点線だけ */
.has-note { border-bottom: 1px dotted #4a5866; position: relative; }
.has-note::after {
  content: attr(data-note);
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
  background: #1a212c; color: #dfe7f0; border: 1px solid #2c3a4a;
  border-radius: var(--r-s); padding: .5rem .7rem;
  font-size: .74rem; font-weight: 400; line-height: 1.6; letter-spacing: .02em;
  width: max-content; max-width: 300px; white-space: normal;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease; pointer-events: none;
  text-decoration: none; }
.has-note:hover::after, .has-note:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateY(0); }
/* ===== スケルトン（§6.6） ===== */
.skel { border-radius: var(--r-s); background: linear-gradient(90deg,var(--panel) 25%,var(--panel-head) 45%,var(--panel) 65%);
  background-size: 200% 100%; animation: skel 1.2s linear infinite; height: .9rem; margin: .55rem 0; }
@keyframes skel { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ===== KPI帯（§6.6 数字の階層・P0-1 で4カードの重複定義を一本化） =====
   主数値＝その画面の結論。1.35rem・太字で読み順を作る。ラベルは小さく静かに */
.kpis { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 0 0 1rem; align-items: baseline; }
.kpi small { display: block; color: var(--ink-2); font-size: .72rem; }
.kpi b { font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: .01em; }

/* ===== ユーティリティ（P1-1・2026-09-06）。頻出インラインstyleの受け皿。
   .t-xs 補足の級数／.ta-r 右寄せ／.t-warn 文中警告／.x-scroll 横スクロール包み */
.t-xs { font-size: .72rem; }
/* 金額・数値セルは折り返さない（2026-09-07 発注者指摘「3,320／万 で改行して見づらい」）。
   狭いときはセル内で折るのではなく、表ごと横スクロール（§6・.x-scroll）に任せる */
td.num, th.num { white-space: nowrap; }
.ta-r { text-align: right; }
.t-warn { color: var(--warn-text); }
.x-scroll { overflow-x: auto; }