/* ============================================================
   積算Studio 再構築プロジェクト — デザインシステム
   Dark "pro CAD tool" theme
   ============================================================ */

:root {
  /* Surfaces */
  --bg-0: #0b0f14;
  --bg-1: #11161d;
  --bg-2: #161c25;
  --bg-3: #1c232e;
  --bg-hover: #232b37;

  /* Borders */
  --border: #262d38;
  --border-strong: #333d4b;

  /* Text */
  --text-0: #e6edf3;
  --text-1: #9aa7b4;
  --text-2: #6b7785;

  /* Accents */
  --accent: #4dd0e1;
  --accent-dim: #1d5b63;
  --accent-2: #7c9cff;
  --warn: #f0a500;
  --danger: #f0616d;
  --ok: #3fb950;
  --purple: #bc8cff;

  /* Geometry */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

  --font-ui: "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

/* ---------------- [hidden] を最優先で有効にする（恒久対策） ----------------
   [hidden] は UA 既定の display:none だが、後続のクラス規則が display:flex/grid 等を
   指定すると打ち消されて「隠したつもりが表示されたまま」になる。
   これまで個別に .fld[hidden] / .fld-refrig[hidden] / .fld-duct[hidden] を足していたが、
   .duct-row（display:grid）や #cad-page-nav（インライン display:inline-flex）など
   個別対応から漏れる要素が繰り返し発生していた。!important で一括して優先させる。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Layout ---------------- */
.app-shell { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: hidden; }

.topbar {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0 12px;
  min-height: 46px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 90;
  flex: none;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #06181b;
  box-shadow: 0 0 18px rgba(77, 208, 225, 0.35);
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.2px; }
.brand-sub { font-size: 11px; color: var(--text-2); letter-spacing: 0.4px; }

.topbar-spacer { flex: 1; }
.pill {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-1);
  background: var(--bg-3); font-family: var(--font-mono);
}
.pill.warn { color: var(--warn); border-color: #4a3a12; background: #2a2110; }
.pill.ok { color: var(--ok); border-color: #1c3a22; background: #12251a; }

/* ---------------- Tabs ---------------- */
/* ---------------- Menu bar (desktop-app style) ---------------- */
.menubar { display: flex; align-items: stretch; gap: 1px; }
.menu { position: relative; display: flex; }
.menu-btn {
  appearance: none; border: none; background: transparent;
  color: var(--text-1); font-family: inherit; font-size: 12.5px;
  padding: 0 11px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .12s, background .12s;
}
.menu-btn:hover { color: var(--text-0); background: var(--bg-hover); }
.menu.open > .menu-btn { color: var(--accent); background: var(--bg-3); border-bottom-color: var(--accent); }
.menu-pop {
  position: absolute; top: 100%; left: 0; min-width: 264px;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: 0 0 10px 10px; box-shadow: var(--shadow);
  padding: 6px; display: none; z-index: 130;
}
.menu.open > .menu-pop { display: block; }
.menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; background: transparent; border: none;
  color: var(--text-0); padding: 6px 10px; border-radius: 6px;
  cursor: pointer; font-family: inherit; font-size: 12.5px; line-height: 1.35;
}
.menu-item:hover { background: var(--bg-hover); }
.menu-item .mi-d { font-size: 10.5px; color: var(--text-2); }
.menu-sep { display: block; height: 1px; background: var(--border); margin: 5px 6px; }

.content {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px; width: 100%; max-width: 1280px; margin: 0 auto;
}
.panel { display: none; }
.panel.active { display: block; animation: fade .18s ease; }

/* ---------------- Desktop workspace (拾い図が画面を占領) ---------------- */
body.cad-active .content { max-width: none; padding: 0; overflow: hidden; }
body.cad-active .footer { display: none; }
#panel-cad.active { display: flex; flex-direction: column; height: 100%; }

.cad-toolbar {
  flex: none; border-bottom: 1px solid var(--border);
  background: var(--bg-1); padding: 6px 10px;
}
.cad-toolbar .toolbar { gap: 6px; }
.cad-toolbar .btn { padding: 5px 10px; font-size: 12px; }
.cad-toolbar .btn.primary { padding: 5px 12px; }
/* 常時表示の右端グループ（元に戻す／やり直す＋ページ移動）。
   cad-right-group-start に margin-left:auto を与え、右端グループをまとめて右端へ寄せる。 */
.cad-toolbar .toolbar .cad-right-group-start { margin-left: auto; }
.cad-right-group { display: inline-flex; align-items: center; gap: 6px; }
/* 立上げ・立下げの方向／長さ（元アプリ Ver.0.1.53 準拠） */
.cad-vertical-opts { display: inline-flex; align-items: center; gap: 6px; }
.cad-vertical-opts select { height: 30px; }
#cad-vertical.active { background: var(--accent, #4dd0e1); color: #06181b; }
.cad-page-nav { display: inline-flex; align-items: center; gap: 4px; }
.cad-page-nav .readout { min-width: 52px; text-align: center; font-size: 12px; }
/* 狭い画面：ツールバーは折り返して全ボタンを残す。
   ★横スクロール（nowrap＋overflow-x）にすると後方の「個数物拾い」等が画面外へ隠れ、
     押せなくなる（実バグ）。sticky の右端グループも折り返し時は不要なので通常配置にする。 */
@media (max-width: 900px) {
  .cad-toolbar .toolbar { position: relative; }
  .cad-toolbar .toolbar .cad-right-group-start { display: none; }
  .cad-right-group {
    position: static; margin-left: auto; padding-left: 0;
    background: none; box-shadow: none;
  }
}

.cad-workspace { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 設定ドロワー（拾い図の上に開くオーバーレイ） */
.cad-drawer {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--bg-1); border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
  padding: 10px; display: flex; flex-direction: column; gap: 10px;
  max-height: 62%; overflow-y: auto;
}
.cad-drawer[hidden] { display: none; }
.cad-drawer .card.tight { padding: 10px 12px; }
/* ドロワー右下の「閉じる」バー（設定後すぐ閉じられるように） */
.cad-drawer-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  position: sticky; bottom: -10px; margin: 0 -10px -10px; padding: 8px 10px;
  background: linear-gradient(to top, var(--bg-1) 72%, transparent);
}
.cad-drawer-foot .hint { margin-right: auto; }
.cad-drawer-foot .btn.primary { flex: 0 0 auto; }

.cad-wrap {
  flex: 1; min-height: 0; border: none; border-radius: 0;
  grid-template-rows: minmax(0, 1fr);
}
.cad-stage { min-height: 0; height: 100%; }
.cad-stage canvas { height: 100%; }
.cad-side { max-height: none; }
.cad-side[hidden] { display: none; }
#cad-wrap.side-hidden { grid-template-columns: 1fr; }

/* ステータスバー（拾い図下端のオーバーレイ） */
.hud { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- 狭い画面（タブレット・スマホ） ---------------- */
@media (max-width: 900px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 13px; white-space: nowrap; }
  /* ★狭い画面でもメニューのドロップダウンが切れないようにする。
     overflow-x:auto だと絶対配置の .menu-pop がクリップされ、
     ファイル／編集／ヘルプ等が開いてもクリックできない（実バグ）。
     折り返し（wrap）で全ボタンを残し、はみ出しは visible にする。 */
  .menubar { flex-wrap: wrap; overflow: visible; flex: 1 1 auto; min-width: 0; }
  .topbar { flex-wrap: wrap; }
  .menu-btn { padding: 0 9px; }
  .topbar { gap: 8px; }
  .topbar-spacer { display: none; }
  /* ★右パネル（拾い属性）はここでは下段へ回さない。中幅（タブレット〜小型ノート）でも
     右側に残す。下段化は本当に狭い画面用の @media (max-width: 640px) で行う。 */
  .cad-toolbar .toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .cad-toolbar .toolbar > * { flex: 0 0 auto; }
  .cad-toolbar .toolbar::-webkit-scrollbar { height: 4px; }
  .cad-toolbar .hint { display: none; }
  .cad-drawer { max-height: 78%; }
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------- Typography ---------------- */
h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 650; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
h2::before { content: ""; width: 3px; height: 15px; background: var(--accent); border-radius: 2px; }
h3 { font-size: 13px; font-weight: 600; margin: 16px 0 8px; color: var(--text-1); }
.lead { color: var(--text-1); margin: 0 0 18px; max-width: 80ch; }
.muted { color: var(--text-2); }
.mono { font-family: var(--font-mono); }

/* ---------------- Cards ---------------- */
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.card.tight { padding: 13px; }

.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .label { font-size: 11px; color: var(--text-2); letter-spacing: 0.3px; text-transform: uppercase; }
.kpi .value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1.15; }
.kpi .value.sm { font-size: 19px; }
.kpi .sub { font-size: 11px; color: var(--text-2); }
.kpi.accent .value { color: var(--accent); }
.kpi.warn .value { color: var(--warn); }
.kpi.danger .value { color: var(--danger); }

/* ---------------- Bars ---------------- */
.bar-row { display: grid; grid-template-columns: 190px 1fr 72px; align-items: center; gap: 12px; margin: 7px 0; }
.bar-row .name { font-size: 12px; color: var(--text-1); text-align: right; }
.bar-track { height: 9px; background: var(--bg-3); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.bar-fill.warn { background: linear-gradient(90deg, #5a420f, var(--warn)); }
.bar-fill.danger { background: linear-gradient(90deg, #5a1f26, var(--danger)); }
.bar-fill.purple { background: linear-gradient(90deg, #3a2b5c, var(--purple)); }
.bar-row .val { font-family: var(--font-mono); font-size: 12px; color: var(--text-0); text-align: right; }

/* ---------------- Tables ---------------- */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-2); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr:hover { background: var(--bg-3); }
td.mono, th.mono { font-family: var(--font-mono); }

/* ---------------- Badges ---------------- */
.badge {
  display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono); border: 1px solid transparent;
}
.badge.yes { color: var(--ok); background: #12251a; border-color: #1c3a22; }
.badge.no  { color: var(--danger); background: #2a1215; border-color: #3a1c20; }
.badge.partial { color: var(--warn); background: #2a2110; border-color: #4a3a12; }
.badge.info { color: var(--accent); background: #0f2427; border-color: #1d5b63; }

/* ---------------- Buttons ---------------- */
.btn {
  appearance: none; font-family: inherit; font-size: 12.5px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-3); color: var(--text-0);
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent-dim), #1a6b74); border-color: #2a8b95; color: #eaffff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }
/* ★選択中のボタンは「文字と背景色を反転」させる（どれが選ばれているか一目で分かるように）。
   背景＝アクセント色／文字＝暗色。zone・計測・帳票モードなど .active を使う全ボタンに一貫適用。 */
.btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: var(--accent);
  color: #06181b;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--accent) inset, 0 1px 6px rgba(77, 208, 225, 0.28);
}
.btn.active:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); filter: brightness(1.08); }
/* 元に戻す／やり直すなど、いま操作できないボタンは文字を薄くして状態を示す。
   ホバー・押下の反応も止め、押せないことを分かりやすくする。 */
.btn:disabled, .btn[disabled] {
  opacity: .38;
  color: var(--text-2);
  cursor: default;
  filter: grayscale(.4);
}
.btn:disabled:hover, .btn[disabled]:hover { background: var(--bg-3); }
.btn:disabled:active, .btn[disabled]:active { transform: none; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.toolbar .hint { font-size: 11px; color: var(--text-2); }

/* ---------------- CAD canvas ---------------- */
.cad-wrap {
  display: grid; grid-template-columns: 1fr 268px; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-1);
}
.cad-stage { position: relative; background:
  repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.025) 39px, rgba(255,255,255,0.025) 40px),
  repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.025) 39px, rgba(255,255,255,0.025) 40px),
  var(--bg-1);
  min-height: 460px; }
.cad-stage canvas { display: block; width: 100%; height: 460px; cursor: crosshair; }
.cad-side { border-left: 1px solid var(--border); background: var(--bg-2); padding: 14px; }
.cad-side .group { margin-bottom: 16px; }
.cad-side .group .gt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-2); margin-bottom: 7px; }
.cad-side .legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 5px 0; }
.swatch { width: 14px; height: 4px; border-radius: 2px; }
.readout { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-1); }
.readout b { color: var(--accent); }

/* 拾い属性フォーム（コンボボックス・レイヤー一覧） */
.cad-side .fld { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.cad-side .fld > span { font-size: 10px; color: var(--text-2); letter-spacing: 0.3px; }
.cad-side .fld input, .cad-side .fld select {
  width: 100%; background: var(--bg-3); color: var(--text-0);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 5px 7px; font-family: var(--font-mono); font-size: 11.5px;
}
.cad-side .fld input:focus, .cad-side .fld select:focus { outline: none; border-color: var(--accent); }
.cad-side .attr-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cad-side .lyr {
  display: flex; align-items: center; gap: 7px; font-size: 12px;
  margin: 3px 0; cursor: pointer; color: var(--text-1);
}
.cad-side .lyr input { accent-color: var(--accent); }
.cad-side .lyr .swatch { width: 12px; height: 3px; }
.cad-side .lyr .lyr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-side .lyr .lyr-n {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2);
  background: var(--bg-3); border-radius: 999px; padding: 1px 7px;
}
.cad-side { max-height: 620px; overflow-y: auto; }

/* 据付カスケード（右パネル常設の折りたたみ） */
.cad-side details.inst { margin: 6px 0 2px; }
.cad-side details.inst > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: 11px; color: var(--text-1); padding: 6px 8px;
  background: var(--bg-3); border: 1px solid var(--border-strong);
  border-radius: 6px; display: flex; align-items: center; gap: 6px;
}
.cad-side details.inst > summary::-webkit-details-marker { display: none; }
.cad-side details.inst > summary::before { content: '▸'; font-size: 10px; color: var(--text-2); }
.cad-side details.inst[open] > summary::before { content: '▾'; }
.cad-side details.inst[open] > summary { border-color: var(--accent); color: var(--text-0); }
.cad-side details.inst .inst-info {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  color: var(--text-1); background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px;
}
.cad-side details.inst .inst-info:empty { display: none; }

/* スナップ設定のチェック行（マーカー形状の凡例付き） */
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; color: var(--text-1); }
.chk input { accent-color: var(--accent); }
.mk { width: 12px; height: 12px; display: inline-block; position: relative; flex: none; }
.mk.sq { border: 2px solid #ffd166; border-radius: 1px; }
.mk.tri {
  width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid #7c9cff;
}
.mk.cir { border: 2px solid #3fb950; border-radius: 50%; }
.mk.xs::before, .mk.xs::after {
  content: ''; position: absolute; left: 5px; top: -1px; width: 2px; height: 14px;
  background: #ff6b6b;
}
.mk.xs::before { transform: rotate(45deg); }
.mk.xs::after { transform: rotate(-45deg); }
.mk.pl::before, .mk.pl::after {
  content: ''; position: absolute; background: #90a4ae;
}
.mk.pl::before { left: 5px; top: -1px; width: 2px; height: 14px; }
.mk.pl::after { left: -1px; top: 5px; width: 14px; height: 2px; }

/* 背景図面ツールバーの入力欄 */
#cad-pdf-url { font-family: var(--font-mono); font-size: 11.5px; padding: 5px 8px;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); }
#cad-snap-gridstep { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 6px;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); }

.hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-1);
  background: rgba(11,15,20,0.92); border-top: 1px solid var(--border);
  padding: 4px 10px; pointer-events: none;
}
.hud b { color: var(--accent); }

/* ---------------- Code ---------------- */
pre {
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px; overflow: auto; font-family: var(--font-mono); font-size: 11.5px;
  color: #c9d4de; line-height: 1.55; max-height: 340px;
}
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-3); padding: 1px 5px; border-radius: 4px; }
pre code { background: none; padding: 0; }

/* ---------------- Misc ---------------- */
.callout {
  border-left: 3px solid var(--accent); background: var(--bg-2);
  padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 12px 0;
}
.callout.warn { border-left-color: var(--warn); }
.callout.danger { border-left-color: var(--danger); }
.callout .t { font-weight: 650; font-size: 12.5px; margin-bottom: 3px; }
.callout p { margin: 0; color: var(--text-1); font-size: 12.5px; }

.roadmap { position: relative; padding-left: 26px; }
.roadmap::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border-strong); }
.rm-item { position: relative; margin-bottom: 18px; }
.rm-item::before {
  content: ""; position: absolute; left: -22px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bg-1); border: 2px solid var(--accent);
}
.rm-item.done::before { background: var(--ok); border-color: var(--ok); }
.rm-item .rm-title { font-weight: 650; font-size: 13.5px; }
.rm-item .rm-desc { color: var(--text-1); font-size: 12.5px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text-1); }

.footer { padding: 18px 22px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 11.5px; text-align: center; }

/* Toast */
#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--text-0);
  padding: 10px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 12.5px; z-index: 200;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   帳票出力（拾い表 / 集計表 / 内訳書 / 別紙明細）
   ============================================================ */
.rp-area { display: flex; flex-direction: column; gap: 16px; }

/* 帳票ビューア：工事名称（ヘッダの案件名）入力欄 */
.rp-job { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 280px; }
.rp-job > span { font-size: 11px; color: var(--text-2); letter-spacing: 0.3px; }
.rp-job input {
  width: 100%; background: var(--bg-3); color: var(--text-0);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 6px 9px; font-size: 12.5px;
}
.rp-job input:focus { outline: none; border-color: var(--accent); }

/* 帳票ヘッダ（タイトル欄） */
.rp-head { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); }
.rp-head-t { width: 100%; border-collapse: collapse; }
.rp-head-t th {
  width: 130px; text-align: left; font-weight: 600; font-size: 12px; color: var(--text-1);
  background: var(--bg-3); border: 1px solid var(--border); padding: 6px 10px; white-space: nowrap;
}
.rp-head-t td { border: 1px solid var(--border); padding: 6px 10px; font-size: 12.5px; color: var(--text-0); }

/* 帳票本体（用紙を模したシート） */
.rp-sheet {
  background: #ffffff; color: #14181d; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 14px 16px 10px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 480px;
}
/* ★帳票の用紙の向き（原本書式）：拾い表・集計表は A4横。名前付きページ rp-land へ割り当てる。
   ブラウザは「向きが変わる境界」で自動的に改ページする（実測済み）ので、ここで
   break-before は付けない（付けると横シートごとに改ページしてしまう）。同向きのシートは連続して流れる。 */
.rp-sheet.rp-land { page: rp-land; }
/* 先頭が A4横シートのときは帳票ヘッダも横ページへ載せる（縦の空ページを防ぐ）。 */
.rp-head.rp-head-land { page: rp-land; }
.rp-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 700; font-size: 13px; color: #0b0f14;
  border-bottom: 2px solid #14181d; padding-bottom: 6px; margin-bottom: 8px;
}
.rp-caption .rp-count { font-weight: 500; font-size: 11px; color: #5b6572; }

/* 帳票テーブル（罫線・明朝寄りの帳票フォント） */
.rp-t { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rp-t thead th {
  background: #eef1f4; color: #14181d; font-weight: 650; text-align: left;
  border: 1px solid #9aa4b0; padding: 5px 6px; position: sticky; top: 0; z-index: 2;
  /* ★帳票の見出しは原本表記のまま出す。全体ルール th{text-transform:uppercase} が
     効くと 風量(m³/h)→風量(M³/H)、静圧(Pa)→静圧(PA) と化けるため打ち消す（実測で確認）。 */
  text-transform: none;
}
.rp-t td { border: 1px solid #9aa4b0; padding: 4px 6px; vertical-align: top; color: #14181d; }
.rp-t tbody tr:nth-child(even) td { background: #f7f9fb; }
.rp-t tbody tr:hover td { background: #eef6f8; }
.rp-t .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-t .strong { font-weight: 700; }
.rp-t .mono { font-family: var(--font-mono); }
.rp-t .ref { font-size: 10.5px; color: #3a4756; max-width: 260px; }
/* 単価根拠（国交省 積算基準の標準歩掛り表・単価種別） */
.rp-t .basis { font-size: 10.5px; color: #3a4756; white-space: nowrap; }
.basis-tag {
  display: inline-block; padding: 1px 5px; margin-right: 5px; border-radius: 3px;
  font-size: 10px; font-weight: 650; letter-spacing: .02em;
  background: #dcecf5; color: #14536e; border: 1px solid #a8cade;
}
.basis-tag.market { background: #d8f0dc; color: #17603a; border-color: #a3d3b3; }
.basis-tag.estimate { background: #f3e6cc; color: #6b4b12; border-color: #dcc79a; }

/* ============================================================
   内訳書 ④細目別内訳（国交省 公共建築工事内訳書標準書式・設備工事編）
   ・列順＝ 名称 / 摘要 / 数量 / 単位 / 単価 / 金額 / 備考（＋単価根拠は最右端）
   ・摘要から名称と重なる語を除いたぶんを 単価・金額 の幅へ回し、金額が入るようにする。
   ・「単価根拠（積算基準）」は右端に置き、帳票では印刷しない（.no-print）。
   ============================================================ */
/* 画面：単価・金額にも十分な幅を持たせ、摘要は折り返して収める。
   単価根拠（積算基準）は最右端に置き、画面では確認できる（紙には出さない）。 */
.rp-t .c-name { white-space: normal; }
.rp-t .c-sum  { white-space: normal; }
.rp-t .c-qty  { white-space: nowrap; }
.rp-t .c-unit { white-space: nowrap; text-align: center; }
.rp-t .c-tanka, .rp-t .c-kingaku { white-space: nowrap; text-align: right; }
.rp-t .c-basis { white-space: nowrap; }
/* 階層見出し（科目＝設備／中科目）。種目「作図データ」の行は出さない。 */
.rp-t tr.rp-lv1 td { background: #cfd9e6 !important; font-size: 12.5px; }
.rp-t tr.rp-lv2 td { background: #e6ebf2 !important; font-weight: 650; }
/* 代価表「率を乗ずる歩掛りの区分」（労／労以外） */
.rp-t td.k-labor { color: #14536e; }
.rp-t td.k-labor-other { color: #6b4b12; }

/* 内訳書の階層見出し行 */
.rp-t tr.rp-group td {
  background: #dfe6ee; font-weight: 700; color: #0b0f14; font-size: 12px;
  letter-spacing: .02em;
}
/* 合計行
   ★上の太罫線は「box-shadow（内側）」で描く。border-top だと罫線の分だけ
     行高が 2px 高くなり、拾い表（全行 27.4px）と合計行（27.9〜28.4px）で
     行高が揃わず、帳票ごとに見た目のリズムが崩れる（実バグ）。
     box-shadow はレイアウト高さに影響しないので、罫線の見た目を保ったまま
     全行の高さを拾い表と一致させられる。 */
.rp-t tr.rp-total td {
  background: #e6edf3; font-weight: 700;
  box-shadow: inset 0 2px 0 0 #14181d;
}
@media print {
  .rp-t tr.rp-total td { box-shadow: inset 0 2px 0 0 #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   原本書式（積算Studio 実出力）：拾い表（種類別）／集計表（引用元別）
   ・拾い表 … 左＝属性 / 右＝拾い（最大12列）＋行計＋小計＋備考。種類ごとに1シート。
   ・集計表 … 引用元（系統／図番）ラベル行 ＋ その直下に拾い値行 の2段組み。
   ============================================================ */
/* 拾い表：拾い列は細い等幅、行計・小計は右寄せ。列が多くても潰れないよう小さめ。 */
.rp-t.rp-pick { font-size: 10.5px; }
.rp-t.rp-pick td, .rp-t.rp-pick th { padding: 3px 4px; white-space: nowrap; }
.rp-t.rp-pick thead th { text-align: center; }
.rp-t.rp-pick td { text-align: left; }
.rp-t.rp-pick td.num { text-align: right; }
/* ★拾いマス（拾いグリッド／集計表の引用元・金額）は内容に依らず同一幅にする。
   基準幅は「99.9」（十の位＋小数1位）が縮小なしで入る幅＝40px。
   それより長い値（105.5 等）はセル内の文字を縮小して表示する（hk-s）。 */
.rp-t.rp-pick td.hk, .rp-t.rp-sum td.hk { width: 40px; }
.rp-t.rp-pick td.hk.hk-s, .rp-t.rp-sum td.hk.hk-s { font-size: 8.5px; }
/* ★集計表 引用元マス（文字）：「（未設定）」等の長い語をセル内で縮小して1行に収める
   （Excel の「縮小して全体を表示」相当）。長さに応じ 3段階で文字を小さくする。
   数字マス(hk)とは別クラス。折返しを禁止し、はみ出しは縮小で吸収する。 */
.rp-t.rp-sum td.pfit, .rp-t.rp-pick td.pfit { white-space: nowrap; }
.rp-t.rp-sum td.pfit.fit1, .rp-t.rp-pick td.pfit.fit1 { font-size: 8.5px; }
.rp-t.rp-sum td.pfit.fit2, .rp-t.rp-pick td.pfit.fit2 { font-size: 7px; }
.rp-t.rp-sum td.pfit.fit3, .rp-t.rp-pick td.pfit.fit3 { font-size: 5.5px; }
/* ★行ごとの横線は実線（拾い数字マスが破線状に見えないよう明示）。横線のみ。 */
.rp-t.rp-pick td, .rp-t.rp-sum td { border-bottom-style: solid; }
/* ★空き行（データの下に罫線だけ引く枠組みの空欄マス）にも罫線を出す。 */
.rp-t tr.rp-blank td { height: 20px; background: #fff; }
/* 集計表：引用元ラベル行（グレー）＋ 拾い値行（白・淡い枠）。 */
.rp-t.rp-sum { font-size: 10.5px; }
.rp-t.rp-sum thead th { text-align: center; }
.rp-t.rp-sum tr.rp-src-amt td { background: #ffffff; color: #3a4756; }
.rp-t.rp-sum tbody tr:nth-child(4n+3) td { background: #eef1f4; }
.rp-t.rp-sum tbody tr:nth-child(4n+4) td { background: #ffffff; }
.rp-t.rp-sum td.mono.num { text-align: right; }

/* 出典リンク（拾い表へジャンプ） */
.ref-link { color: #146a78; text-decoration: none; border-bottom: 1px dotted #146a78; cursor: pointer; }
.ref-link:hover { color: #0b3f47; background: #d6eef2; }
.rp-flash { animation: rp-flash 1.4s ease; }
@keyframes rp-flash {
  0%, 100% { background: transparent; }
  25% { background: #ffe08a; }
  60% { background: #fff3c4; }
}

/* 注記 */
.rp-note {
  font-size: 11.5px; color: var(--text-1); background: var(--bg-2);
  border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rp-note.warn { border-left-color: var(--warn); }

/* ============================================================
   帳票の印刷 — 帳票のみを紙面に出す
   ・罫線を紙面下端まで延ばす
   ・別紙明細は改ページ先頭から開始（break-before: page）
   ・表の途中で切れないよう行の分割を制御
   ★帳票は「種類」で用紙の向きが決まっている（原本書式）：
       ・内訳書系（①種目別〜⑦代価表）・工事費構成 … A4縦
       ・拾い書（拾い表）・集計表            … A4横
     1つのPDF内で縦横を混在させるため名前付きページを使う
     （unnamed＝A4縦／rp-land＝A4横）。向きの根拠＝原本書式
     （tools/make_pickup_templates.py の fit_page(landscape=True)＝A4横）。
   ============================================================ */
/* ★余白は縦横で統一する（拾い表・集計表＝A4横／内訳書系＝A4縦）。
   以前は 縦 12mm/10mm・横 10mm/12mm とバラバラで、印刷の版面が帳票ごとにズレていた。 */
@page { size: A4 portrait; margin: 12mm; }
@page rp-land { size: A4 landscape; margin: 12mm; }

@media print {
  :root { --bg-0: #fff; }
  body { background: #fff; }
  /* ★帳票が1ページにクリップされる不具合の修正：
     画面レイアウトの「高さ100vh＋overflow:hidden（.app-shell）」「overflow-y:auto（.content）」を
     印刷時は必ず解除する。解除しないと、長い帳票（拾い表913行や全帳票①〜⑦）が
     ビューポート1画面分で切られ、複数ページに分割されない（＝紙面で内容が欠落する）。
     ※ 印刷は「紙の高さ」で改ページさせる必要があるため、高さ制約は auto にする。 */
  html, body { height: auto !important; overflow: visible !important; }
  .app-shell { height: auto !important; min-height: 0 !important; overflow: visible !important; display: block !important; }
  /* ★padding も必ず 0 にする。画面用 .content は padding:22px（上下計44px）を持ち、
     上の「.wrap, main { padding:0 }」は要素セレクタ（特異度0,0,1）のため
     クラスセレクタ .content（0,1,0）に負けて効かない。
     そのままだと head(53mm)+sheet(212mm)+余白(11.6mm)=276.8mm となり、
     印刷可能高 273mm を約3.8mm超過して、短い帳票でもフッターだけが次ページへ押し出される。
     !important で確実に消す。 */
  .content { overflow: visible !important; height: auto !important; min-height: 0 !important; padding: 0 !important; }
  #panel-report, .panel { padding: 0 !important; }
  .topbar, .menubar, .footer, #toast, .toolbar, .rp-note, #rp-meta,
  .callout, .lead, h1, h2, .card, .cad-drawer { display: none !important; }
  .wrap, main { max-width: none; padding: 0; margin: 0; }
  .panel { display: none !important; }
  #panel-report { display: block !important; }
  .rp-area { gap: 0; }

  .rp-sheet {
    box-shadow: none; border: none; border-radius: 0; padding: 0;
    /* 罫線を紙面下端まで延ばす：シートを「ヘッダの下・紙面下端まで」伸ばす。
       ★印刷可能高は 273mm（A4 297mm − 上下余白12mm×2）。ヘッダ(.rp-head ≈ 53mm)が
         同じ用紙の先頭に載るため、シートの min-height は 273−53 ≒ 220mm 未満にする。
         以前は 265mm で、ヘッダと合計 318mm となり 45mm 超過して、
         短い帳票でもフッターだけが次ページへ押し出される不具合になっていた。 */
    min-height: 212mm;
  }
  /* ★A4横シート（拾い表・集計表）：余白12mm統一に合わせ、固定の min-height は
     付けない（付けると最後のシートの後に空ページが出る＝実測で4→3ページ）。
     枠組み（罫線の空欄マス）は空き行（.rp-blank）で担保する。 */
  .rp-sheet.rp-land { min-height: auto; }
  /* ★複数シートを連結したときだけ、最後のシートの min-height を外す。
     1シート＝1ページの紙面で罫線を下端まで伸ばすため .rp-sheet には min-height を
     付けているが、全帳票（①〜⑦）のように複数シートを続けて流すと、最後のシートの
     min-height(212mm) が紙面の残りを越えた瞬間に「本文の無い空ページ」が1枚増える
     （実測：212mm固定だと6ページ+空1枚／境界ぎりぎりで発生し不安定＝フレーク）。
     最後のシートだけ min-height を外すと、空ページ0・6ページで安定する
     （実測3回連続 6ページ/空0。既存6ページの内容は完全一致＝帳票は欠落しない）。
     単一シート表示（⑦代価表・⑤別紙明細）では min-height はそのまま効くので、
     罫線を紙面下端まで伸ばす従来の体裁は保たれる。
     ※:has() は Chromium 105+ で対応（実測 CSS.supports('selector(:has(*))')=true）。
       非対応ブラウザでは本ルールが無視され従来挙動（空ページが出得る）に留まるだけ。 */
  #rp-area:has(.rp-sheet ~ .rp-sheet) .rp-sheet:last-child { min-height: auto; }
  .rp-head { border: 1px solid #000; background: #fff; }
  .rp-head-t th, .rp-head-t td { border: 1px solid #000; }

  .rp-t { font-size: 10pt; }
  .rp-t thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-t thead { display: table-header-group; } /* ページ跨ぎ時に見出しを繰り返す */
  .rp-t tfoot { display: table-footer-group; }
  .rp-t tr, .rp-t td, .rp-t th { page-break-inside: avoid; break-inside: avoid; }
  .rp-t tr.rp-group td { background: #e8e8e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* ★内訳書「単価根拠（積算基準）」は印刷しない（ユーザー指示：右端の印刷範囲外）。
     画面では確認できるよう残し、帳票（紙）には出さない。 */
  .no-print, .rp-t .no-print, .rp-t th.no-print, .rp-t td.no-print { display: none !important; }
  /* ★帳票シートの幅を「紙の内寸」に固定する（ユーザー指摘の紙幅はみ出しの根本修正）。
     .rp-area は display:flex のため、既定（align-items:stretch）だと全シートが
     「その中で一番広い子＝A4横の集計表」の幅へ引き伸ばされ、
     A4縦の内訳書が紙（186mm）を越えて右端が切れていた（実測：688.6pt > 内寸561.3pt）。
     向きごとに幅を明示し、伸縮も止める。
       A4縦：210 − 12×2 = 186mm ／ A4横：297 − 12×2 = 273mm */
  .rp-area { align-items: flex-start; }
  .rp-sheet { width: 186mm; max-width: 186mm; box-sizing: border-box; }
  .rp-sheet.rp-land { width: 273mm; max-width: 273mm; box-sizing: border-box; }
  /* ★内訳書の単価・金額は、摘要の重複除去で浮いた幅を回して「金額が入る」幅にする。
     固定レイアウトで列幅を確定し、数字は右寄せ・折返し禁止で桁が崩れないようにする。
     （単価根拠 .c-basis は display:none なので幅配分に含めない＝合計 100%。） */
  .rp-sheet.rp-saimoku table.rp-t { table-layout: fixed; width: 100%; }
  .rp-sheet.rp-saimoku th.c-name, .rp-sheet.rp-saimoku td.c-name { width: 20%; }
  .rp-sheet.rp-saimoku th.c-sum,  .rp-sheet.rp-saimoku td.c-sum  { width: 27%; }
  .rp-sheet.rp-saimoku th.c-qty,  .rp-sheet.rp-saimoku td.c-qty  { width: 6%; }
  .rp-sheet.rp-saimoku th.c-unit, .rp-sheet.rp-saimoku td.c-unit { width: 5%; }
  .rp-sheet.rp-saimoku th.c-tanka,    .rp-sheet.rp-saimoku td.c-tanka    { width: 9%; }
  .rp-sheet.rp-saimoku th.c-kingaku,  .rp-sheet.rp-saimoku td.c-kingaku  { width: 12%; }
  .rp-sheet.rp-saimoku th.c-ref,  .rp-sheet.rp-saimoku td.c-ref  { width: 21%; }
  /* 内訳書の階層見出しは列数が変わるので colspan に合わせる（8→7 列相当で出す）。 */
  .rp-sheet.rp-saimoku tr.rp-lv1 td { font-size: 11pt; }
  /* ★内訳書は行数が多く1ページに収めたい。行パディングを詰めて
     「ヘッダ53.2mm＋シート」が印刷可能高 273mm を超えないようにする
     （実測：既定 padding 4px 6px だとシート224.1mm で合計277.3mm＝4.3mm超過し、
      フッターだけが2ページ目へ落ちていた）。 */
  .rp-sheet.rp-saimoku .rp-t td, .rp-sheet.rp-saimoku .rp-t th { padding: 2px 5px; }
  .rp-sheet.rp-saimoku .rp-t { line-height: 1.25; }

  /* 別紙明細は必ず新しいページの先頭から */
  .rp-sheet.rp-meisai { break-before: page; page-break-before: always; }
  .rp-sheet.rp-meisai .rp-note { display: none !important; }

  .ref-link { color: #000; border: none; }
}

/* ============================================================
   デスクトップワークスペース 最終上書き
   （既存の .cad-stage / .cad-wrap ルールより後に置いて確実に効かせる）
   ============================================================ */
.cad-workspace .cad-wrap { grid-template-columns: 1fr 268px; border: none; border-radius: 0; }
.cad-workspace .cad-stage { min-height: 0; height: 100%; }
.cad-workspace .cad-stage canvas { height: 100%; }
.cad-workspace .cad-side { max-height: none; }
.cad-workspace #cad-wrap.side-hidden { grid-template-columns: 1fr; }

@media (max-width: 600px) {
  /* ★右パネル（拾い属性・操作モード）を下段へ回すのは「本当に狭いとき」だけにする。
     900px 以下で下段に回していたため、タブレット／小型ノートや
     プレビュー枠（〜900px）でも右パネルが下に落ちて画面が崩れて見えた（実バグ）。
     中幅では右側に残し、狭幅（≤600px）でのみ下段化する。 */
  .cad-workspace .cad-wrap { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .cad-workspace .cad-side { max-height: 46vh; overflow-y: auto; }
}
/* 縮尺校正バー（キャンバス直上・インフロー：クリックを遮らない） */
.cad-calib-bar {
  flex: none;
  /* 設定ドロワー（#cad-drawer, z-index:40）は .cad-workspace 内の絶対配置で
     後続のインフロー要素に重なる。校正バーが覆われて操作できなくなるのを
     防ぐため、ドロワーより上に置く。 */
  position: relative; z-index: 45;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px;
  background: #14212a;
  border-bottom: 1px solid var(--accent-dim);
  box-shadow: inset 0 0 0 1px rgba(77,208,225,.12);
}
.cad-calib-bar[hidden] { display: none; }
.cad-calib-bar .cb-title { font-weight: 700; font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.cad-calib-bar .hint { white-space: nowrap; }
.cad-calib-bar .sep { width: 1px; height: 20px; background: var(--border); }
.cad-calib-bar .readout b { color: var(--accent); }

/* ============================================================
   拾い前設定ウィザード（① 縮尺校正 → ② ゾーン → ③ 拾い方）
   キャンバスの「上端」にドッキングするインフロー型なので、
   2点クリックの校正操作を遮らない。
   ============================================================ */
.cad-wizard {
  flex: none;
  display: flex; flex-direction: column;
  /* 設定ドロワー（#cad-drawer, z-index:40）は .cad-workspace 内の絶対配置で
     後続兄弟のウィザードに重なる。ウィザードのフッター（次へ／戻る／閉じる）が
     覆われてクリックできなくなるのを防ぐため、ウィザードを必ず上に置く。 */
  position: relative; z-index: 45;
  background: #0f1a22;
  border-bottom: 1px solid var(--accent-dim);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(77,208,225,.14);
}
.cad-wizard[hidden] { display: none; }

.cw-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 10px;
  background: #14212a;
  border-bottom: 1px solid var(--border);
}
.cw-brand { font-weight: 700; font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.cw-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cw-step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px 3px 4px; white-space: nowrap;
}
.cw-step .cw-n {
  width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-family: var(--font-mono);
  background: var(--bg-3); color: var(--text-2); border: 1px solid var(--border-strong);
}
.cw-step.done { color: var(--ok); border-color: #1c3a22; }
.cw-step.done .cw-n { background: #12251a; color: var(--ok); border-color: #1c3a22; }
.cw-step.active { color: var(--accent); border-color: var(--accent-dim); background: #0f2427; }
.cw-step.active .cw-n { background: var(--accent-dim); color: #eaffff; border-color: #2a8b95; }
.cw-progress { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.cw-head #cw-close { margin-left: auto; }

.cw-body { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.cw-body[hidden] { display: none; }
.cw-lead { margin: 0; font-size: 12px; color: var(--text-1); line-height: 1.7; }
.cw-lead b { color: var(--text-0); }
.cw-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* ② ゾーン：左に「ゾーン名・図面ページ」、右に「囲ってゾーンを作る」を並べる。
   横幅の余りを右カラムへ回して、図面（キャンバス）の縦幅を稼ぐ。 */
.cw-zone-2col {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 8px 20px; width: 100%;
}
.cw-zone-2col > .cw-col { display: flex; flex-direction: column; gap: 8px; }
.cw-zone-2col > .cw-col:last-child { margin-left: auto; align-items: flex-end; }
.cw-zone-2col > .cw-col:last-child .cw-chips { justify-content: flex-end; }
.cw-zone-2col > .cw-col:last-child .cw-fld > span:first-child { text-align: right; }
.cw-fld { display: flex; flex-direction: column; gap: 3px; }
.cw-fld > span { font-size: 10px; color: var(--text-2); letter-spacing: 0.3px; }
.cw-fld input, .cw-fld select {
  background: var(--bg-3); color: var(--text-0);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 5px 8px; font-family: var(--font-mono); font-size: 12px; min-width: 150px;
}
.cw-fld input:focus, .cw-fld select:focus { outline: none; border-color: var(--accent); }
.cw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-chip {
  appearance: none; cursor: pointer; font-family: inherit; font-size: 11px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-3); color: var(--text-1);
}
.cw-chip:hover { background: var(--bg-hover); color: var(--text-0); }
.cw-chip.on { border-color: var(--accent); color: var(--accent); }
.cw-msg { margin: 0; font-size: 11.5px; color: var(--text-2); }
.cw-msg.ok { color: var(--ok); }
.cw-msg.warn { color: var(--warn); }
.cw-host { display: contents; }

/* ウィザードの各ステップへ「本物の設定UI」をそのまま移設するための場所。
   ホスト（.cw-host）は display:contents なので、移した要素は
   元の見た目（.card / .cad-calib-bar）のまま自然に流れ込む。 */
.cad-wizard .card.tight { margin: 0; }
.cad-wizard .cad-calib-bar {
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  background: #14212a;
  box-shadow: none;
}

.cw-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px;
  border-top: 1px solid var(--border);
  background: #121c25;
}
.cw-spacer { flex: 1 1 auto; }
#cw-back[hidden], #cw-next[hidden], #cw-start[hidden] { display: none; }

@media (max-width: 900px) {
  .cw-head { gap: 8px; }
  .cw-steps { overflow-x: auto; scrollbar-width: none; }
  .cw-body { padding: 8px 10px; }
  .cw-fld input, .cw-fld select { min-width: 118px; }
}

/* ---------- 拾い属性：施工条件欄（ダクト時は非表示）----------
   .cad-side .fld は display:flex を指定しているため、[hidden] を明示的に
   打ち消す必要がある（ダクト本体は施工条件を持たない＝元アプリ Ver.0.1.276）。 */
.cad-side .fld[hidden] { display: none; }

/* ---------- 冷媒専用：液管／ガス管（中圧管）／高圧管 ---------- */
.cad-side .fld-refrig {
  margin: 6px 0; padding: 7px 8px 8px;
  border: 1px solid var(--line, #2a3340); border-radius: 8px;
  background: rgba(77, 208, 225, 0.05);
}
.cad-side .fld-refrig[hidden] { display: none; }
.cad-side .fld-refrig .refrig-ttl {
  font-size: 10px; color: var(--accent, #4dd0e1); letter-spacing: 0.3px; font-weight: 600;
}
.cad-side .fld-refrig .refrig-row { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 5px 0 3px; }
.cad-side .fld-refrig .refrig-row .fld { margin: 0; }
.cad-side .fld-refrig .refrig-note { font-size: 9.5px; line-height: 1.45; color: var(--text-2, #8b97a6); }

/* ---------- 個数物拾い：防火区画貫通処理（冷媒配管用）の自動判定 ---------- */
.cad-side .fld-firestop {
  margin: 6px 0; padding: 7px 8px 8px;
  border: 1px solid var(--line, #2a3340); border-radius: 8px;
  background: rgba(255, 138, 101, 0.06);
}
.cad-side .fld-firestop[hidden] { display: none; }
.cad-side .fld-firestop .firestop-ttl {
  font-size: 10px; color: #ff8a65; letter-spacing: 0.3px; font-weight: 600;
}
.cad-side .fld-firestop .refrig-note { font-size: 9.5px; line-height: 1.45; color: var(--text-2, #8b97a6); }

/* ---------- 個数物拾い：チャンバー／ボックスの W×H×D と板厚自動選定 ---------- */
.cad-side .fld-wdh {
  margin: 6px 0; padding: 7px 8px 8px;
  border: 1px solid var(--line, #2a3340); border-radius: 8px;
  background: rgba(188, 140, 255, 0.06);
}
.cad-side .fld-wdh[hidden] { display: none; }
.cad-side .fld-wdh .wdh-ttl {
  font-size: 10px; color: #bc8cff; letter-spacing: 0.3px; font-weight: 600;
}
.cad-side .fld-wdh .refrig-note { font-size: 9.5px; line-height: 1.45; color: var(--text-2, #8b97a6); }

/* ---------- 個数物拾い：保温の内訳（内貼／外貼 × GW／RW × 25t／50t） ---------- */
.cad-side .fld-lining {
  margin: 6px 0; padding: 7px 8px 8px;
  border: 1px solid var(--line, #2a3340); border-radius: 8px;
  background: rgba(255, 213, 79, 0.06);
}
.cad-side .fld-lining[hidden] { display: none; }
.cad-side .fld-lining .lining-ttl {
  font-size: 10px; color: #ffd54f; letter-spacing: 0.3px; font-weight: 600;
}
.cad-side .fld-firestop .readout, .cad-side .fld-wdh .readout, .cad-side .fld-lining .readout {
  font-size: 11px; color: var(--text-1, #e6ebf2);
}

/* ---------- 拾い線のプロパティ（ダイアログ）：冷媒管の明細 ---------- */
.modal-body .fld.dlg-sp-refrig {
  margin: 8px 0 10px; padding: 8px 9px 9px;
  border: 1px solid var(--line, #2a3340); border-radius: 8px;
  background: rgba(77, 208, 225, 0.06);
}
.modal-body .fld.dlg-sp-refrig[hidden] { display: none; }
.modal-body .fld.dlg-sp-refrig .dlg-sp-refrig-ttl {
  display: block; font-size: 10.5px; color: var(--accent, #4dd0e1);
  letter-spacing: 0.3px; font-weight: 600; margin-bottom: 6px;
}
.modal-body .fld.dlg-sp-refrig .fld { margin: 0 0 6px; }
.modal-body .fld.dlg-sp-refrig .fld:last-child { margin-bottom: 0; }

/* ---------- ダクト専用：形状→材質→圧力区分→工法→寸法→板厚 ----------
   積算研究会 参考歩掛り準拠。まず「形状（長方形／スパイラル）」を選び、
   形状で寸法欄（幅・高さ／口径）・工法候補・保温仕様候補・板厚が変わる。 */
.cad-side .fld-duct {
  margin: 6px 0; padding: 7px 8px 8px;
  border: 1px solid var(--line, #2a3340); border-radius: 8px;
  background: rgba(188, 140, 255, 0.05);
}
.cad-side .fld-duct[hidden] { display: none; }
.cad-side .fld-duct .duct-ttl {
  font-size: 10px; color: #bc8cff; letter-spacing: 0.3px; font-weight: 600;
}
.cad-side .fld-duct .duct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 5px 0 3px; }
.cad-side .fld-duct .duct-row .fld { margin: 0; }
.cad-side .fld-duct .fld[hidden] { display: none; }
.cad-side .fld-duct .readout { font-size: 11px; color: var(--text-1, #e8edf3); font-weight: 600; }

/* ---------- 汎用モーダル（ダイアログ）----------
   文字サイズ（F2）／冷媒管 組合せ設定／機器表読取 などのダイアログ共通の器。 */
/* 右クリックのコンテキストメニュー（拾い線のプロパティ）。 */
.ctx-menu {
  position: fixed; z-index: 400; min-width: 180px;
  background: var(--bg-1, #141a21); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px; padding: 4px; box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
.ctx-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: transparent; border: 0; color: var(--fg-1, #e6edf3);
  font-size: 13px; border-radius: 6px; cursor: pointer;
}
.ctx-item:hover { background: rgba(77,208,225,0.18); }
.modal-host { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.modal-host[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(4, 7, 11, 0.42); }
.modal-card {
  position: relative; z-index: 1; width: min(680px, 92vw); max-height: 86vh; overflow: auto;
  background: var(--bg-1, #141a22); border: 1px solid var(--line, #2a3340); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line, #2a3340);
}
.modal-title { font-size: 14px; font-weight: 700; color: var(--text-0, #e6edf3); flex: 1; }
.modal-body { padding: 14px; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--line, #2a3340);
}
.modal-body .fld { display: block; margin: 0 0 8px; }
.modal-body .fld > span { display: block; font-size: 11px; color: var(--text-2, #8b97a6); margin-bottom: 3px; }
.modal-body .fld input, .modal-body .fld select { width: 100%; }
.modal-body table { width: 100%; border-collapse: collapse; }
.modal-body table th, .modal-body table td { padding: 5px 7px; border-bottom: 1px solid var(--line, #2a3340); font-size: 12px; }

/* ============================================================
   ★ドラッグ移動できるダイアログ（機器登録＝拾い図を見ながら書く窓）。
   ・マスクをほぼ透明にして、背後の拾い図（キャンバス）を見えるようにする。
   ・中央寄せをやめ、モーダル自身が left/top で動く（ヘッダを掴んでドラッグ）。
   ・狭い窓でも操作できるよう、リサイズも許可する（右下）。
   ============================================================ */
.modal-host.dlg-framed { align-items: flex-start; justify-content: flex-start; pointer-events: none; }
/* ★マスクは pointer-events:none にする（＝背後の拾い図へポインタ/ホイールを通す）。
   窓を開いたまま、図面のドラッグ（パン）・ホイールズーム・中ボタンドラッグを使えるようにする。
   framed 窓は ✕ 閉じる／Esc で閉じるので、マスクのクリックで閉じる必要はない
   （＝マスククリックの close は framed では実質無効。誤爆で閉じない利点もある）。 */
.modal-host.dlg-framed .modal-mask { background: rgba(4, 7, 11, 0.10); pointer-events: none; }
.modal-host.dlg-framed .modal-card {
  pointer-events: auto; margin: 0; width: min(560px, 96vw); max-height: 88vh;
  resize: both; overflow: auto; min-width: 360px; min-height: 220px;
}
/* メッセージ（ドラッグ中の残留 iframe/選択を防ぐ） */
body.dlg-dragging, body.dlg-dragging * { user-select: none !important; }
.modal-host.dlg-framed .modal-head { cursor: move; touch-action: none; }
.modal-head .dlg-grip { font-size: 12px; color: var(--text-3, #6b7c8c); letter-spacing: 2px; }
.dlg-reg-steps { margin: 0 0 10px; font-size: 11px; color: var(--text-2, #8b97a6); }
.dlg-reg-sec { border: 1px solid var(--line, #2a3340); border-radius: 8px; padding: 10px; margin: 0 0 10px; }
.dlg-reg-sec > .dlg-reg-ttl { display: block; font-size: 11px; font-weight: 700; color: var(--accent, #4dd0e1); margin-bottom: 8px; }
.dlg-reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dlg-reg-grid .fld { margin: 0; }
.dlg-reg-list { max-height: 320px; overflow: auto; border: 1px solid var(--line, #2a3340); border-radius: 8px; }
.dlg-reg-list table { font-size: 12px; }
.dlg-reg-list tr.sel { background: rgba(77, 208, 225, 0.16); }
.dlg-reg-list td, .dlg-reg-list th { white-space: nowrap; }
.dlg-reg-list td.wrap { white-space: normal; }
.dlg-reg-empty { padding: 14px; text-align: center; color: var(--text-3, #6b7c8c); font-size: 12px; }
/* ★登録直後の最新行を一瞬ハイライトする（一覧がスクロールで隠れていても「増えた」と分かる）。 */
@keyframes regRowFlash { from { background: rgba(77, 208, 225, 0.42); } to { background: transparent; } }
.dlg-reg-list tbody tr.just-added { animation: regRowFlash 1.8s ease-out 1; }
.dlg-reg-list tbody tr.just-added td { box-shadow: inset 0 0 0 1px rgba(77, 208, 225, 0.55); }

/* ============================================================
   ★機器登録の2カラム化：左＝入力フォーム／右＝登録済み一覧（科目で絞り込み・
   選択・編集・削除）。一覧が下部にあると縦に長くなり過ぎるため、右へ出す。
   ============================================================ */
.dmr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 12px; align-items: start; }
.dmr-form { min-width: 0; }
.dmr-list-col { min-width: 0; position: sticky; top: 0; }
.dmr-list-sec { display: flex; flex-direction: column; }
.dmr-list-tools { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dmr-filter-fld { flex: 1 1 150px; margin: 0; }
.dmr-list-btns { display: flex; gap: 6px; }
.dmr-bulkbar { display: flex; align-items: center; gap: 10px; padding: 5px 8px; margin-bottom: 8px;
  border: 1px solid var(--line, #2a3340); border-radius: 6px; background: rgba(77, 208, 225, 0.06); }
.dmr-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-1, #9aa7b4); cursor: pointer; }
.dmr-bulk-count { font-size: 11.5px; color: var(--accent, #4dd0e1); font-weight: 700; margin-left: auto; }
.dlg-reg-list th.dmr-chk-col, .dlg-reg-list td.dmr-chk-col { width: 22px; padding-left: 6px; padding-right: 2px; }
.dlg-reg-list td.dmr-chk-col input { width: 14px; height: 14px; cursor: pointer; }
.dlg-reg-list tbody tr { cursor: pointer; }
.dmr-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 10px;
  background: rgba(255, 193, 7, 0.18); color: #ffca28; border: 1px solid rgba(255, 193, 7, 0.35); vertical-align: middle; }
.dmr-edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dmr-edit-fields .fld { margin: 0; }
.dmr-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn.danger { background: rgba(198, 40, 40, 0.16); border-color: #7a2b2b; color: #ff8a80; }
.btn.danger:hover { background: rgba(198, 40, 40, 0.28); }
/* 機器登録（framed）は2カラムを収めるため広めに。ユーザーが右下でリサイズもできる。 */
.modal-host.dlg-framed .modal-card { width: min(1000px, 96vw); }

/* ============================================================
   機器登録の「常に最前面の別窓」（Document Picture-in-Picture）
   ----------------------------------------------------------------------------
   PiP は body 直下に内容を置くため .cad-side スコープの入力スタイルが効かない。
   PiP 窓（同一生成元）へ style.css を複製しているので、ここで .dlg-pip 配下に
   入力・ボタン・セクションの見た目を与える（＝アプリ内モーダルと同じ体裁）。
   ============================================================ */
html.pip-root, body.pip-body { background: var(--bg-0, #0b0f14); color: var(--text-0, #e6edf3); }
.dlg-pip { padding: 12px 14px 18px; font-family: var(--font-sans, system-ui, sans-serif); }
.dlg-pip .dlg-reg-steps { margin: 0 0 10px; font-size: 11px; line-height: 1.7; color: var(--text-2, #8b97a6); }
.dlg-pip .dlg-reg-sec { border: 1px solid var(--line, #2a3340); border-radius: 8px; padding: 10px; margin: 0 0 10px; }
.dlg-pip .dlg-reg-sec > .dlg-reg-ttl { display: block; font-size: 11px; font-weight: 700; color: var(--accent, #4dd0e1); margin-bottom: 8px; }
.dlg-pip .dlg-reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dlg-pip .fld { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; }
/* ★2列グリッド（.dlg-reg-grid）内の .fld は margin を 0 にする。
   以前は .fld:first-child だけ margin-top:0 にしていたため、2列のうち左列1個目だけ上に詰まり、
   右列（台数/単位・幅/奥行 など）が 6px 下がって「行がずれて」見えていた。
   アプリ内モーダル側（.dlg-reg-grid .fld { margin:0 }）と揃える。 */
.dlg-pip .dlg-reg-grid .fld { margin: 0; }
.dlg-pip .fld > span { font-size: 10px; color: var(--text-2, #6b7785); letter-spacing: 0.3px; }
.dlg-pip .fld input, .dlg-pip .fld select {
  width: 100%; box-sizing: border-box; background: var(--bg-3, #1c232e); color: var(--text-0, #e6edf3);
  border: 1px solid var(--border-strong, #333d4b); border-radius: 6px;
  padding: 5px 7px; font-family: var(--font-mono, monospace); font-size: 11.5px;
}
.dlg-pip .fld input:focus, .dlg-pip .fld select:focus { outline: none; border-color: var(--accent, #4dd0e1); }
.dlg-pip .readout { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-1, #9aa7b4); }
.dlg-pip .readout b { color: var(--accent, #4dd0e1); }
.dlg-pip .attr-actions { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.dlg-pip .btn {
  appearance: none; font-family: inherit; font-size: 12px; cursor: pointer;
  padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--border-strong, #333d4b); background: var(--bg-3, #1c232e); color: var(--text-0, #e6edf3);
}
.dlg-pip .btn:hover { background: var(--bg-hover, #232b37); }
.dlg-pip .btn.primary { background: linear-gradient(135deg, var(--accent-dim, #1d5b63), #1a6b74); border-color: #2a8b95; color: #eaffff; }
.dlg-pip .dlg-reg-list { max-height: 200px; overflow: auto; border: 1px solid var(--line, #2a3340); border-radius: 8px; }
/* ★別窓(PiP)の2カラム（左＝フォーム／右＝登録済み一覧）＋選択・編集・削除の見た目。
   .cad-side スコープが効かない PiP では、ここで .dlg-pip 配下に一式を与える。 */
.dlg-pip .dmr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 1fr); gap: 12px; align-items: start; }
.dlg-pip .dmr-form { min-width: 0; }
.dlg-pip .dmr-list-col { min-width: 0; position: sticky; top: 0; }
.dlg-pip .dmr-list-sec { display: flex; flex-direction: column; }
.dlg-pip .dmr-list-tools { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dlg-pip .dmr-filter-fld { flex: 1 1 140px; margin: 0; }
.dlg-pip .dmr-list-btns { display: flex; gap: 6px; }
.dlg-pip .dmr-bulkbar { display: flex; align-items: center; gap: 10px; padding: 5px 8px; margin-bottom: 8px;
  border: 1px solid var(--line, #2a3340); border-radius: 6px; background: rgba(77, 208, 225, 0.06); }
.dlg-pip .dmr-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-1, #9aa7b4); cursor: pointer; }
.dlg-pip .dmr-chk input { width: 14px; height: 14px; }
.dlg-pip .dmr-bulk-count { font-size: 11.5px; color: var(--accent, #4dd0e1); font-weight: 700; margin-left: auto; }
.dlg-pip .dlg-reg-list th.dmr-chk-col, .dlg-pip .dlg-reg-list td.dmr-chk-col { width: 22px; padding-left: 6px; padding-right: 2px; }
.dlg-pip .dlg-reg-list td.dmr-chk-col input { width: 14px; height: 14px; cursor: pointer; }
.dlg-pip .dlg-reg-list tbody tr { cursor: pointer; }
.dlg-pip .dlg-reg-list tbody tr.sel { background: rgba(77, 208, 225, 0.16); }
.dlg-pip .dmr-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 10px;
  background: rgba(255, 193, 7, 0.18); color: #ffca28; border: 1px solid rgba(255, 193, 7, 0.35); vertical-align: middle; }
.dlg-pip .dmr-edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dlg-pip .dmr-edit-fields .fld { margin: 0; }
.dlg-pip .dmr-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.dlg-pip .btn.danger { background: rgba(198, 40, 40, 0.16); border-color: #7a2b2b; color: #ff8a80; }
.dlg-pip .btn.danger:hover { background: rgba(198, 40, 40, 0.28); }
.dlg-pip .btn:disabled { opacity: .38; cursor: default; }
.dlg-pip .dlg-reg-list table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dlg-pip .dlg-reg-list th, .dlg-pip .dlg-reg-list td { border-bottom: 1px solid var(--line, #2a3340); padding: 4px 6px; text-align: left; }
.dlg-pip .dlg-reg-list th { color: var(--text-2, #6b7785); font-weight: 600; }
.dlg-pip .dlg-reg-list td.wrap { white-space: normal; }
.dlg-pip .dlg-reg-empty { padding: 14px; text-align: center; color: var(--text-3, #6b7c8c); font-size: 12px; }
/* ★別窓(PiP)内のトースト。本窓の #toast は“別ドキュメント”なので別窓からは届かない
   （＝警告・登録結果が別窓では見えず「無反応」に見える）。.dlg-pip の中にも同じ見た目で出す。 */
.dlg-pip .pip-toast {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(14px);
  max-width: calc(100% - 24px); background: var(--bg-3, #1c232e); color: var(--text-0, #e6edf3);
  border: 1px solid var(--border-strong, #333d4b); border-radius: 8px; padding: 8px 14px;
  font-size: 12px; line-height: 1.5; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; z-index: 300; text-align: center;
}
.dlg-pip .pip-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* レイヤー一覧：まだ線が無いレイヤーは薄く出す（元アプリの全レイヤー表示に合わせる） */
.cad-side .lyr.lyr-empty { opacity: .5; }
.cad-side .lyr.lyr-empty .lyr-n { color: var(--text-3, #6b7c8c); }