/* Bonfire 共通スタイル — 全ページの正本。
   ここを直せば全ページに効く。ページ固有の差分だけを各ページの<style>に残す。
   出自: yah.OS の os.css（デザインのみ流用・データとロジックは無関係） */

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a0a; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
  .topbar { position: sticky; top: 0; z-index: 10; background: rgba(10,10,10,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid #1c1c1c; }
  .topbar-in { padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
  .crumb { font-size: 0.85rem; color: #9a9a9a; }
  .crumb a { color: #9a9a9a; text-decoration: none; }
  .crumb b { color: #fff; font-weight: 600; }

  /* ── 3ペイン（OSデザインの根幹を踏襲） ── */
  .layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 5px var(--panel-w, 400px); min-height: calc(100vh - 49px); }
  .panel-resizer { cursor: col-resize; background: transparent; position: sticky; top: 49px; height: calc(100vh - 49px); }
  .panel-resizer:hover, .panel-resizer.dragging { background: #2f6bd8; }
  body.resizing { cursor: col-resize; user-select: none; }
  .side { border-right: 1px solid #1c1c1c; padding: 1.25rem 0.75rem; }
  .side-link { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: #9a9a9a; font-size: 0.82rem; 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: #fff; }
  .side-link.is-active { background: #1c1c1c; color: #fff; }
  .side-sep { border: 0; border-top: 1px solid #1c1c1c; margin: 0.9rem 0.4rem; }
  .side-cap { font-size: 0.64rem; color: #666; 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 #1c1c1c; position: sticky; top: 49px; height: calc(100vh - 49px); overflow-y: auto; }
  .panel-head { padding: 1.25rem 1.5rem; border-bottom: 1px solid #1c1c1c; font-size: 0.95rem; font-weight: 600; }
  .panel-body { padding: 1.25rem 1.5rem; }
  .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.68rem; 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 #1a1a1a; font-size: 0.8rem; }
  .panel-row .k { color: #9a9a9a; }
  /* ジョブ詳細パネル */
  .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: #262626; }
  .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: #63d297; border-color: #1f4a33; }
  .tl li.ng::after { background: #ef4444; border-color: #6f2424; }
  .tl .t { color: #777; font-size: 0.68rem; 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 #262626; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; color: #555; font-size: 0.65rem; }
  .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: #ff8080; 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: #1a1a1a; color: #ccc; }

  .tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid #262626; margin-bottom: 1.5rem; flex-wrap: wrap; }
  /* 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: #1a1a1a; border: 1px solid #262626; color: #9a9a9a;
    font-family: inherit; font-size: 0.85rem; padding: 0.55rem 1.1rem; cursor: pointer;
    border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .tab:hover { background: #222222; color: #cfcfcf; }
  .tab.is-active { background: #2b2b2b; color: #ffffff; border-color: #3a3a3a; border-bottom-color: #ffffff; }
  table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
  th, td { text-align: left; padding: 0.75rem 0.7rem; border-bottom: 1px solid #1e1e1e; vertical-align: top; }
  thead th { font-size: 0.68rem; color: #777; letter-spacing: 0.15em; font-weight: 500; }
  td { color: #ddd; }
  .dim { color: #777; }
  .pill { display: inline-block; font-size: 0.66rem; 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: #141414; border: 1px solid #2a2a2a; color: #fff; 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.7rem; color: #9a9a9a; 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: #9a9a9a; }
  .cal td { padding: 0.4rem 0.4rem; height: 2.6rem; }
  .job { display: block; font-size: 0.68rem; border-radius: 5px; padding: 0.28rem 0.5rem; margin-bottom: 0.22rem; border: 1px solid transparent; cursor: pointer; }
  .j-plan { background: #1a1a1a; color: #9a9a9a; border-color: #2a2a2a; }
  .j-conf { background: #14243d; color: #7fb2ff; border-color: #24436f; }
  .j-done { background: #12291d; color: #63d297; border-color: #1f4a33; }
  .job.spot { border-style: dashed; }
  .j-late { background: #3a1414; color: #ff8080; border-color: #6f2424; box-shadow: 0 0 8px rgba(239,68,68,0.25); }
  .note { margin-top: 1.1rem; font-size: 0.73rem; color: #777; line-height: 1.9; }
  .row-click { cursor: pointer; }
  .row-click:hover td { background: #121212; }
  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: #fff; border: 0; color: #0a0a0a; 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: #63d297; }
  @media (max-width: 1100px) { .layout { grid-template-columns: 210px minmax(0,1fr); } .panel, .panel-resizer { display: none; } }
  @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .side, .panel-resizer { display: none; } }

  .bigkpi {
    display: flex; border-bottom: 1px solid #1c1c1c; background: #0c0c0c;
  }
  .bk {
    flex: 1; display: flex; align-items: baseline; gap: 0.8rem;
    padding: 0.85rem 1.75rem; border-left: 1px solid #1c1c1c;
  }
  .bk:first-child { border-left: 0; }
  .bk-label { font-size: 0.66rem; color: #7a7a7a; letter-spacing: 0.09em; }
  .bk-value { font-size: 1.35rem; font-weight: 600; color: #ffffff; 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 #1c1c1c; } }
  .bk-s { display:block; font-size:0.66rem; color:#8a8a8a; 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: #ffffff; border-radius: 6px; display: flex;
  }
  .nav-ic:hover { background: #1a1a1a; }
  .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: #ef4444; 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: #262626; color: #fff; 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 #1c1c1c; }
  .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: #0a0a0a; border-right: 1px solid #1c1c1c;
  overflow-y: auto; z-index: 40; padding: 0.6rem 0 2rem;
}
.osnav-home { display: block; padding: 0.8rem 1rem 0.5rem; color: #fff; 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: #1a1a1a; border: 1px solid #262626; color: #9a9a9a;
  font-family: inherit; font-size: 0.7rem; padding: 0.3rem 0; border-radius: 5px; cursor: pointer;
}
.osnav .nav-f.is-active { background: #2b2b2b; color: #fff; border-color: #3a3a3a; }
.osnav .nav-cap { font-size: 0.62rem; color: #6a6a6a; letter-spacing: 0.12em; padding: 0.9rem 0.9rem 0.35rem; margin: 0; }
.osnav .nav-item {
  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: #141414; color: #fff; }
.osnav .nav-item.is-active { background: #1e1e1e; color: #fff; 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: #1c1c1c; border: 1px solid #333; }
  /* カード自身の旧メニューボタン（自分の側パネル用）はモバイルでは側パネルごと消えるため隠す——
     ハンバーガーを1つに保つ */
  .topbar #menu-btn { display: none; }
}
/* ページ遷移をクロスフェードに（対応ブラウザのみ。非対応は普通の遷移＝無害） */
@view-transition { navigation: auto; }

/* ── 可読性の底上げ（2026-08-27 提案・プレビュー検証中）──
   最小フォント床 0.72rem・薄グレーのコントラスト引き上げ・表の余白。
   個別指定より後に読ませる必要があるため末尾に置く（後勝ち） */
table { font-size: 0.85rem; }
th, td { padding: 0.85rem 0.7rem; line-height: 1.6; }
.dim, .note { color: #9a9a9a; }
.side-cap, .nav-cap, .subnav-cap { color: #8a8a8a; }
.bk-label { color: #8f8f8f; font-size: 0.7rem; }
thead th { color: #8a8a8a; font-size: 0.72rem; }
/* 0.6rem台の極小をまとめて床上げ（インライン指定は勝てないため主要クラスのみ） */
.pill { font-size: 0.7rem; }
.note { font-size: 0.78rem; line-height: 1.9; }
.side-link { font-size: 0.85rem; }
.osnav .nav-item { font-size: 0.8rem; }
.osnav .nav-cap { font-size: 0.66rem; }

/* 全体を一段大きく（2026-08-27 発注者「もう若干大きくて良い」）。
   ルート基準の引き上げ＝全rem指定が比率を保って拡大する。微調整はこの1行だけ触る */
html { font-size: 17px; }

/* ── ブランドマーク（yah.OS のロゴSVGの置き換え） ── */
/* ロゴ。logo.svg 自体を白（#fff）で書き出してあるのでそのまま置く */
.brandmark { display: block; width: 140px; height: auto; opacity: .92; }
.osnav-home:hover .brandmark { opacity: 1; }


/* ── panel4: 一番右にポップアップで出る詳細ドロワー ──
   panel1=左ナビ / panel2=一覧 / panel3=詳細（.main） / panel4=ここ
   行やカードをクリックしたときに開く。app-core.js の openDrawer() が出し入れする */
:root { --drawer-w: 440px; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: var(--drawer-w); max-width: 92vw;
  background: #0f0f0f; border-left: 1px solid #262626; z-index: 40;
  box-shadow: -12px 0 32px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .18s ease-out;
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid #1c1c1c; flex: none;
}
.drawer-title { font-size: .9rem; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-close {
  background: transparent; border: 0; color: #9a9a9a; font-family: inherit;
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; border-radius: 5px;
}
.drawer-close:hover { background: #1c1c1c; color: #fff; }
.drawer-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 39;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ── panel2 + panel3: 項目一覧と詳細の2カラム ──
   .split の中に .p2（項目リスト）と .p3（詳細）を置く */
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; align-items: start; }
.p2 { border-right: 1px solid #1c1c1c; min-height: calc(100vh - 49px); padding: 1.25rem 0.9rem; }
.p2-cap { font-size: 0.62rem; color: #6a6a6a; letter-spacing: 0.12em; padding: 0 0.5rem 0.5rem; }
.p2-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: #bdbdbd; font-family: inherit; font-size: 0.8rem; line-height: 1.5;
  padding: 0.6rem 0.7rem; border-radius: 6px; cursor: pointer;
}
.p2-item:hover { background: #161616; color: #fff; }
.p2-item.is-active { background: #1e1e1e; color: #fff; box-shadow: inset 2px 0 0 #2f6bd8; }
.p2-item .st { display: block; font-size: 0.66rem; color: #777; margin-top: 0.2rem; }
.p3 { padding: 1.5rem 1.75rem 4rem; min-width: 0; }
/* panel2 の中に置く小さな明細ブロック（表を組むには狭いので縦並びにする） */
.p2-block { margin-top: 1.6rem; padding: 0 0.5rem; }
.p2-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.5rem 0; border-bottom: 1px solid #1a1a1a; font-size: 0.76rem; }
.p2-row .k { color: #9a9a9a; }
.p2-row .v { font-variant-numeric: tabular-nums; color: #ddd; white-space: nowrap; }
.p2-row.total { border-top: 1px solid #333; border-bottom: 0; margin-top: 0.2rem; font-weight: 600; }
.p2-row.total .k, .p2-row.total .v { color: #fff; }
.p2-note { font-size: 0.66rem; color: #666; line-height: 1.7; padding: 0.6rem 0 0; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .p2 { border-right: 0; border-bottom: 1px solid #1c1c1c; min-height: 0; }
}

/* panel2 の子項目（案件の下にぶら下がるセクション名） */
.p2-sub {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: #9a9a9a; font-family: inherit; font-size: 0.76rem;
  padding: 0.45rem 0.7rem 0.45rem 1.6rem; border-radius: 6px; cursor: pointer;
}
.p2-sub:hover { background: #161616; color: #fff; }
.p2-sub.is-active { background: #1e1e1e; color: #fff; box-shadow: inset 2px 0 0 #2f6bd8; }