/* ==========================================================================
   色の決まり
   部品には色を直接書かず、役割の変数を使う（テーマを変えても崩れないように）。
   テーマが決めるのは、上の「テーマが決める色」だけ。ほかはそこから作る。
   テーマの定義は、このファイルの末尾。
   ========================================================================== */
:root {
  /* --- テーマが決める色 --- */
  --bg-main: #f6f6f3;        /* コンテンツ全体の背景 */
  --bg-sidebar: #263241;     /* サイドメニューの背景 */
  --bg-card: #fcfcfb;        /* カードの背景 */
  --text-primary: #1b1f24;   /* 文字 */
  --color-accent: #2a78d6;   /* 主要なボタン・選択中のタブ */
  --on-accent: #fff;         /* アクセント色の上の文字 */
  --side-ink: #fff;          /* サイドメニューの文字 */
  --side-mark: #f2c14e;      /* サイドメニューの「今いる画面」の印、デモ版の札 */
  --link: #184f95;           /* リンクの文字 */
  --shadow: 0 1px 3px rgba(20, 26, 34, .07);

  /* --- そこから作る色 --- */
  --surface: var(--bg-main);
  --card: var(--bg-card);
  --ink: var(--text-primary);
  --ink-2: color-mix(in srgb, var(--text-primary) 72%, var(--bg-card));
  --ink-3: color-mix(in srgb, var(--text-primary) 50%, var(--bg-card));
  --line: color-mix(in srgb, var(--text-primary) 14%, var(--bg-card));
  --fill: color-mix(in srgb, var(--text-primary) 6%, var(--bg-card));      /* 表の見出し・薄い下地 */
  --fill-2: color-mix(in srgb, var(--text-primary) 11%, var(--bg-card));   /* 中項目の行など */
  --field: var(--bg-card);                                                  /* 入力欄・ボタンの下地 */
  --field-line: color-mix(in srgb, var(--text-primary) 28%, var(--bg-card));
  --accent: var(--color-accent);
  --accent-hover: color-mix(in srgb, var(--color-accent) 84%, var(--text-primary));
  --accent-soft: color-mix(in srgb, var(--color-accent) 10%, var(--bg-card));
  --accent-ink: var(--link);
  --bg-topbar: color-mix(in srgb, var(--bg-sidebar) 78%, #000);
  --side-ink-2: color-mix(in srgb, var(--side-ink) 78%, var(--bg-sidebar));
  --side-ink-3: color-mix(in srgb, var(--side-ink) 68%, var(--bg-sidebar));
  --side-hover: color-mix(in srgb, var(--side-ink) 9%, var(--bg-sidebar));
  --side-on: color-mix(in srgb, var(--side-ink) 17%, var(--bg-sidebar));
  --side-line: color-mix(in srgb, var(--side-ink) 14%, var(--bg-sidebar));

  /* --- 意味のある色（テーマが変わっても意味は同じ） --- */
  --ok: #1a7f4b;
  --info: #5b9bd5;      /* 確定 */
  --amber: #c99700;     /* 自動(未確認)・注意 */
  --pending: #eb6834;   /* 要確認 */
  --warn: #b4530a;
  --bad: #b3261e;
  --confirmed: #ddebf7;  /* Excel 版の「確定」＝薄ブルー */
  --auto: #fff2cc;       /* Excel 版の「自動(未確認)」＝薄黄 */

  /* --- グラフ（明るいテーマは不透明の単色。暗いテーマは半透明のグラデーションに差し替える） --- */
  --s1: #2a78d6;   /* AK単価／学習あり */
  --s2: #eb6834;   /* NET／学習なし */
  --s3: #1baf7a;   /* 業者発注 */
  --s1-fill: var(--s1);
  --s2-fill: var(--s2);
  --s3-fill: var(--s3);

  --side: 208px;
  --tabs-h: 0px;                                   /* 物件の中のタブ（上に貼り付く）の高さ。app.js が測って入れる */
  --stick: calc(var(--top) + var(--tabs-h));       /* 表の見出しなどが貼り付く位置（タブの下） */
  --top: 52px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { font-size: 14px; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif;
  line-height: 1.55; font-feature-settings: "palt";
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; letter-spacing: .01em; }
h2 { font-size: 1.05rem; margin: 0 0 .15rem; }
.sub { color: var(--ink-2); font-size: .9rem; margin: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* --- 枠 --- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--top); z-index: 21;
  background: var(--bg-topbar); color: var(--side-ink); display: flex; align-items: center; padding: 0 1.5rem;
  border-bottom: 1px solid var(--side-line);
}
.brand { color: var(--side-ink); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.demo-tag {
  font-size: .72rem; font-weight: 700; background: var(--side-mark); color: #1f1a05; border-radius: 3px;
  padding: .1rem .45rem; margin-left: .5rem; letter-spacing: .08em; vertical-align: 1px;
}
.sidebar {
  position: fixed; top: var(--top); left: 0; bottom: 0; width: var(--side); z-index: 20;
  background: var(--bg-sidebar); color: var(--side-ink); display: flex; flex-direction: column; overflow-y: auto;
  border-right: 1px solid var(--side-line);
}
.nav { display: flex; flex-direction: column; flex: 1; padding: .6rem 0 .8rem; }
.nav a {
  color: var(--side-ink-2); padding: .5rem 1.1rem; display: block; border-left: 3px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--side-ink); background: var(--side-hover); text-decoration: none; }
.nav a.on { color: var(--side-ink); background: var(--side-on); border-left-color: var(--side-mark); font-weight: 600; }
.nav-group { color: var(--side-ink-3); font-size: .76rem; letter-spacing: .08em; padding: 1rem 1.1rem .25rem; }
.nav-foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--side-line); }
.wrap { margin: var(--top) 0 0 var(--side); padding: 1.4rem 1.8rem 4rem; max-width: 2400px; }      /* 画面が広ければ、その分だけ広げる（上限 2400px） */
/* メニューは、どの幅でもタイトル行の「≡」で出し入れする。
   広い画面：出すと内容を右へ押す（html.menu-collapsed のとき、しまう）。狭い画面：内容の上に重ねて出す（body.menu-open）。 */
.menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px;
  padding: 0 10px; margin-right: .5rem; border: 0; border-radius: 6px; background: transparent; flex: none;
}
.menu-btn:hover { background: var(--side-hover); }
.menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--side-ink); }
.topbar { padding-left: .6rem; }
.side-bg { display: none; }
.sidebar { transition: transform .18s ease; }
.wrap { transition: margin-left .18s ease; }
@media (min-width: 901px) {
  html.menu-collapsed .sidebar { transform: translateX(-100%); }
  html.menu-collapsed .wrap { margin-left: 0; }
}
@media (max-width: 900px) {
  .topbar { padding: 0 .8rem 0 .4rem; gap: .3rem; }
  .menu-btn { margin-right: 0; }
  .sidebar { width: min(260px, 82vw); transform: translateX(-100%); z-index: 31; box-shadow: none; }
  .nav a { padding: .7rem 1.1rem; }
  body.menu-open .sidebar { transform: none; box-shadow: 8px 0 28px rgba(0, 0, 0, .3); }
  body.menu-open .side-bg { display: block; position: fixed; inset: var(--top) 0 0 0; z-index: 30; background: rgba(0, 0, 0, .45); }
  .wrap { margin: var(--top) 0 0 0; padding: 1rem .9rem 3rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .wrap { transition: none; } }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid; }
.flash.ok { background: color-mix(in srgb, var(--ok) 12%, var(--card)); border-color: color-mix(in srgb, var(--ok) 40%, var(--card)); color: color-mix(in srgb, var(--ok) 60%, var(--ink)); }
.flash.ng { background: color-mix(in srgb, var(--bad) 10%, var(--card)); border-color: color-mix(in srgb, var(--bad) 38%, var(--card)); color: var(--bad); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.grid2 > .card { margin-bottom: 0; }
.grid2 + .card, .grid2 + .grid2 { margin-top: 1.1rem; }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } }

/* --- 数値タイル --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; box-shadow: var(--shadow); }
.tile .k { color: var(--ink-2); font-size: .82rem; }
.tile .v { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.tile .v small { font-size: .85rem; font-weight: 500; color: var(--ink-2); margin-left: .15rem; }
.tile .n { color: var(--ink-3); font-size: .8rem; }

/* --- 横棒グラフ --- */
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); margin: .5rem 0 .7rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: baseline; }
.bars { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; column-gap: .8rem; row-gap: .55rem; align-items: center; }
.bars .lab { font-size: .86rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .lab small { color: var(--ink-3); margin-left: .3rem; }
.bars .grp { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: .45rem; height: 13px; }
.bar > span { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; transition: opacity .1s; }
.bar > em { font-style: normal; font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar:hover > span { opacity: .75; }
.bar.tall { height: 18px; }
.c1 { background: var(--s1-fill); } .c2 { background: var(--s2-fill); } .c3 { background: var(--s3-fill); }
.legend i.c1 { background: var(--s1); } .legend i.c2 { background: var(--s2); } .legend i.c3 { background: var(--s3); }
.cneg { background: repeating-linear-gradient(45deg, var(--bad), var(--bad) 3px, color-mix(in srgb, var(--bad) 40%, var(--card)) 3px, color-mix(in srgb, var(--bad) 40%, var(--card)) 6px); }
.stack { display: flex; height: 22px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--card); }
.stack > span { display: block; min-width: 2px; }
.st-confirmed { background: var(--info); } .st-auto { background: #e6b422; } .st-pending { background: var(--pending); }
.st-none { background: var(--ink-3); } .st-blank { background: var(--fill-2); }

/* --- 表 --- */
table { border-collapse: collapse; width: 100%; }
th, td { padding: .38rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
th { font-size: .8rem; color: var(--ink-2); font-weight: 600; background: var(--fill); white-space: nowrap; }
td.num, th.num { text-align: right; }
tr.major td { background: var(--bg-sidebar); color: var(--side-ink); font-weight: 700; }
tr.middle td { background: var(--fill-2); font-weight: 600; }
tr.note td, tr.ref td { color: var(--ink-3); }
tr.r-confirmed td { background: var(--confirmed); }
tr.r-auto td { background: var(--auto); }
/* 直前に操作した行：枠線で囲まず、上下の細い線と左の帯で示す */
tr:target td { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
tr:target td:first-child { box-shadow: inset 4px 0 0 var(--accent), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.matched { color: var(--ink-2); font-size: .85rem; }
.pid { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; }
.tablewrap { overflow-x: auto; }
.empty { color: var(--ink-3); padding: 1.5rem; text-align: center; }

/* --- 部品 --- */
.badge { display: inline-block; font-size: .76rem; font-weight: 600; border-radius: 10px; padding: .05rem .55rem; white-space: nowrap; border: 1px solid transparent; }
.b-confirmed { background: var(--card); border-color: var(--info); color: color-mix(in srgb, var(--info) 55%, var(--ink)); }
.b-auto { background: var(--card); border-color: var(--amber); color: color-mix(in srgb, var(--amber) 55%, var(--ink)); }
.b-pending { background: var(--pending); color: #fff; }
.b-none { background: var(--ink-2); color: var(--card); }
.b-learn { background: color-mix(in srgb, var(--ok) 12%, var(--card)); color: color-mix(in srgb, var(--ok) 60%, var(--ink)); border-color: color-mix(in srgb, var(--ok) 40%, var(--card)); }
.b-plain { background: var(--fill-2); color: var(--ink-2); }
button, .btn {
  font: inherit; border: 1px solid var(--field-line); background: var(--field); color: var(--ink); border-radius: 6px;
  padding: .38rem .8rem; cursor: pointer; white-space: nowrap; display: inline-block;
}
button:hover, .btn:hover { background: var(--fill); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover, .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.small, .btn.small { padding: .15rem .5rem; font-size: .82rem; }
button.danger { color: var(--bad); }
input[type=text], input[type=search], select, input[type=file] {
  font: inherit; border: 1px solid var(--field-line); border-radius: 6px; padding: .36rem .55rem; background: var(--field); color: var(--ink);
}
.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.toolbar form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .7rem; }
.tabs a { padding: .28rem .8rem; border-radius: 14px; border: 1px solid var(--line); background: var(--field); color: var(--ink-2); }
.tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.tabs a:hover { text-decoration: none; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; counter-reset: s; padding: 0; margin: .6rem 0 0; list-style: none; }
.steps li { counter-increment: s; background: var(--fill); border-radius: 6px; padding: .7rem .9rem .7rem 2.6rem; position: relative; font-size: .9rem; }
.steps li::before { content: counter(s); position: absolute; left: .8rem; top: .7rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.note-box { background: color-mix(in srgb, var(--amber) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--card)); border-radius: 6px; padding: .6rem .9rem; font-size: .88rem; color: color-mix(in srgb, var(--amber) 45%, var(--ink)); }

/* --- 候補の確認（右から出るパネル） --- */
.drawer-bg { position: fixed; inset: 0; background: rgba(20, 26, 34, .45); z-index: 40; display: none; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1500px, 97vw); background: var(--card); z-index: 41; display: none; flex-direction: column; box-shadow: -8px 0 28px rgba(0,0,0,.2); }
.drawer.open, .drawer-bg.open { display: flex; }
.drawer-head { padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.drawer-body { padding: 1rem 1.2rem 2rem; overflow: auto; }
.q-box { background: var(--fill); border-radius: 6px; padding: .7rem .9rem; margin-bottom: .9rem; display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; font-size: .9rem; }
.q-box dt { color: var(--ink-2); } .q-box dd { margin: 0; font-weight: 600; }
.feat { color: var(--ink-3); font-size: .76rem; white-space: nowrap; }
tr.top1 td { background: var(--accent-soft); }
td.unit { white-space: nowrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: .6rem 0 0; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.b-warn { background: color-mix(in srgb, var(--amber) 12%, var(--card)); color: color-mix(in srgb, var(--amber) 45%, var(--ink)); border-color: color-mix(in srgb, var(--amber) 45%, var(--card)); }
.b-bad { background: color-mix(in srgb, var(--bad) 10%, var(--card)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 38%, var(--card)); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* --- 衝突した6桁No の選択（単価帳取込の確認） --- */
table.choice tbody.choice-group { border-top: 2px solid var(--line); }
table.choice td[rowspan] { vertical-align: top; }
table.choice label.pick { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; white-space: nowrap; }
table.choice tr:has(input[type=radio]:checked) td:not([rowspan]) { background: var(--accent-soft); }
table.choice tr.skip-row td { color: var(--ink-2); }
table.choice tr.skip-row:has(input[type=radio]:checked) td { background: var(--fill); }

/* --- システムの再起動（comic-system の「本棚を再起動」と同じ見せ方） --- */
button.pill { border-radius: 999px; padding: .32rem 1rem; }
button.danger.pill { border-color: var(--bad); color: var(--bad); background: transparent; }
button.danger.pill:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 10%, var(--card)); }
#reboot { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: rgba(0, 0, 0, .72); }
#reboot .rb { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px; width: min(420px, 90vw); text-align: center; }
#reboot .rb b { display: block; font-size: 1.05rem; }
#reboot .note { color: var(--ink-2); font-size: .88rem; margin-top: .4rem; }
#reboot .spin { width: 38px; height: 38px; margin: 0 auto 14px; border: 4px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: reboot-spin 1s linear infinite; }
@keyframes reboot-spin { to { transform: rotate(360deg); } }

/* --- 単価帳の記載 → 取り込む内容（単価帳取込の確認） --- */
table.change tbody.change-group { border-top: 2px solid var(--line); }
table.change td { vertical-align: middle; }
table.change tr.other td { color: var(--ink-2); }
table.change tr td.differs { color: var(--warn); font-weight: 700; }
table.change td.name { min-width: 8.5rem; }
table.change th, table.change td { padding-left: .4rem; padding-right: .4rem; }
table.change td.status button { margin-top: .25rem; font-weight: 400; }
table.change td.kubun { white-space: nowrap; }
table.change tr td.status { min-width: 9rem; max-width: 14rem; font-size: .85rem; color: var(--warn); font-weight: 600; }
table.change th.after, table.change td.after { background: var(--accent-soft); }
table.change td.after { color: var(--ink); font-weight: 600; }
table.change td.after .matched { font-weight: 400; }
table.change .arrow-col { width: 3.2rem; text-align: center; background: transparent; border-bottom-color: transparent; padding: 0 .4rem; }
table.change .arrow { display: inline-block; width: 2rem; height: 1.5rem; background: var(--accent);
  clip-path: polygon(0 28%, 58% 28%, 58% 0, 100% 50%, 58% 100%, 58% 72%, 0 72%); vertical-align: middle; }

table.change td.fix input { width: 5.3rem; text-align: right; font-variant-numeric: tabular-nums; padding: .28rem .45rem; }
table.change td.after .reset { margin-top: .35rem; font-weight: 400; }
table.change td.fix input.fix-unit { width: 5rem; text-align: left; }
table.change td.fix .base { font-size: .74rem; font-weight: 400; color: var(--ink-3); margin-top: .15rem; white-space: nowrap; visibility: hidden; }
table.change td.fix.changed input { border-color: var(--warn); background: color-mix(in srgb, var(--amber) 14%, var(--field)); font-weight: 700; }
table.change td.fix.changed .base { visibility: visible; color: var(--warn); }
table.change td.fix input:invalid { border-color: var(--bad); }

table.change .warnline { color: var(--bad); font-size: .78rem; font-weight: 600; margin-top: .15rem; white-space: nowrap; }
table.change tbody.cancelled td.after { opacity: .45; text-decoration: line-through; }
table.change tbody.cancelled td.after input { pointer-events: none; }

/* --- 担当者（タイトル行の右） --- */
.topbar .who { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; color: var(--side-ink-2); font-size: .85rem; white-space: nowrap; }
.topbar .who select { max-width: 12rem; padding: .22rem .4rem; background: var(--side-hover); color: var(--side-ink); border-color: var(--side-line); }
.topbar .who select option { color: #1b1f24; background: #fff; }
.topbar .who select.unset { border-color: var(--side-mark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--side-mark) 45%, transparent); }
@media (max-width: 640px) { .topbar .who span { display: none; } .topbar .who select { max-width: 8.5rem; } .brand { overflow: hidden; text-overflow: ellipsis; } }

/* --- 単価帳（一覧と絞り込み） --- */
.b-sys { background: color-mix(in srgb, var(--amber) 14%, var(--card)); color: color-mix(in srgb, var(--amber) 50%, var(--ink)); border-color: color-mix(in srgb, var(--amber) 55%, var(--card)); cursor: help; }
.filters label { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); font-size: .88rem; white-space: nowrap; }
.filters label.grow { flex: 1 1 16rem; }
.filters label.grow input { flex: 1; min-width: 8rem; }
.filters select { max-width: 17rem; }
table.prices td.name { min-width: 12rem; }
table.prices td.spec { min-width: 12rem; color: var(--ink-2); font-size: .9rem; }
.card + .terms { margin-top: -.3rem; }
@media (max-width: 640px) { .filters label { width: 100%; } .filters label select, .filters label input { flex: 1; max-width: none; } }

/* --- 単価帳：単価帳の記載と DB の内容を上下に並べる --- */
table.compare tbody.pair { border-top: 2px solid var(--line); }
table.compare tr.book td { color: var(--ink-3); border-bottom-style: dashed; font-size: .9rem; }
table.compare tr.book td[rowspan] { color: var(--ink); font-size: 1rem; border-bottom-style: solid; vertical-align: top; }
table.compare td.cat { min-width: 7.5rem; font-size: .88rem; }
table.compare td.kubun { white-space: nowrap; font-size: .82rem; color: var(--ink-2); }
table.compare td.name, table.compare td.spec { min-width: 11rem; font-size: .92rem; color: inherit; }
table.compare tr.db td { color: var(--ink); }
table.compare td.was, .chip.was { background: var(--fill-2); color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 55%, transparent); }
table.compare td.chg-human, .chip.chg-human { background: color-mix(in srgb, var(--color-accent) 22%, var(--card)); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-accent); }
table.compare td.chg-system, .chip.chg-system { background: color-mix(in srgb, var(--amber) 24%, var(--card)); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--amber); }
.chip { display: inline-block; padding: 0 .45rem; border-radius: 4px; font-size: .8rem; }
.b-human { background: color-mix(in srgb, var(--color-accent) 16%, var(--card)); color: color-mix(in srgb, var(--color-accent) 55%, var(--ink)); border-color: color-mix(in srgb, var(--color-accent) 55%, var(--card)); }
table.compare td.who { white-space: nowrap; vertical-align: top; }
table.compare td.who .badge { margin-bottom: .2rem; }

/* --- 見積の単価入力：状態の印、判定理由、見出しの固定 --- */
.st { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-size: .82rem; font-weight: 700; line-height: 1; border: 1.5px solid transparent; cursor: help; }
.st-ok { background: var(--info); color: #fff; }
.st-au { background: var(--card); border-color: var(--amber); color: color-mix(in srgb, var(--amber) 55%, var(--ink)); }
.st-pe { background: var(--pending); color: #fff; }
.st-no { background: var(--ink-3); color: var(--card); }
.st-legend { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--ink-2); margin: 0 0 .6rem; }
.st-legend span { display: inline-flex; align-items: center; gap: .3rem; }
td.acts { white-space: nowrap; text-align: right; }
td.acts form { display: inline; }
.why { display: inline-block; position: relative; margin-top: .25rem; font-size: .8rem; color: var(--link); text-decoration: underline dotted; cursor: help; }
.why::after {
  content: attr(data-tip); white-space: pre-line; position: absolute; right: 0; top: calc(100% + 4px); z-index: 12; display: none;
  width: max-content; max-width: 22rem; text-align: left; padding: .5rem .7rem; border-radius: 6px; font-size: .82rem; line-height: 1.5;
  background: var(--ink); color: var(--card); box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.why:hover::after, .why:focus::after { display: block; }
table.est td.picked { color: var(--ink-2); font-size: .88rem; min-width: 12rem; }
table.est td.name { min-width: 9rem; }
/* 広い画面では、ページをスクロールしても、表の見出し → 大項目 → 中項目 の順に上へ貼り付く */
/* 表が枠に収まらない幅のときは貼り付けをやめて、表だけを横スクロールにする（no-stick は画面側の script が付ける） */
@media (min-width: 901px) {
  .card.sticky-host:not(.no-stick), .card.sticky-host:not(.no-stick) > .tablewrap { overflow: visible; }
  .sticky-host:not(.no-stick) table.est thead th { position: sticky; top: var(--stick); z-index: 6; box-shadow: 0 1px 0 var(--line); }
  .sticky-host:not(.no-stick) table.est tr.major td { position: sticky; top: calc(var(--stick) + var(--th-h, 2.2rem)); z-index: 5; }
  .sticky-host:not(.no-stick) table.est tr.middle td { position: sticky; top: calc(var(--stick) + var(--th-h, 2.2rem) + var(--mj-h, 2.2rem)); z-index: 4; box-shadow: 0 1px 0 var(--line); }
}

/* --- 単価帳：行の編集 --- */
.rowtools { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; margin-top: .4rem; font-family: inherit; }
.rowtools button[hidden] { display: none; }
table.compare tbody.editing tr.db td { background: var(--accent-soft); vertical-align: top; }
table.compare .cell-edit { width: 100%; min-width: 4.6rem; font: inherit; font-weight: 400; padding: .25rem .4rem; border: 1px solid var(--field-line); border-radius: 5px; background: var(--field); color: var(--ink); }
table.compare input.cell-edit.num { text-align: right; font-variant-numeric: tabular-nums; min-width: 5.8rem; }
table.compare textarea.cell-edit { min-width: 12rem; resize: vertical; line-height: 1.4; }
table.compare td.edited .cell-edit { border-color: var(--warn); background: color-mix(in srgb, var(--amber) 14%, var(--field)); font-weight: 700; }
table.compare .cell-edit:invalid { border-color: var(--bad); }

/* --- 枠の固定：見出し・検索条件・表の見出し行を常に出し、表の中だけをスクロールする（単価帳） --- */
details.notes { margin-top: .6rem; font-size: .85rem; color: var(--ink-2); }
details.notes summary { cursor: pointer; }
details.notes .terms { margin-top: .5rem; }
@media (min-width: 901px) and (min-height: 560px) {
  .frozen { height: calc(100vh - var(--top) - 2.4rem); display: flex; flex-direction: column; min-height: 0; }
  .wrap:has(> .frozen) { padding-bottom: 1rem; }
  .frozen > .pagehead { margin-bottom: .6rem; }
  .frozen > .card { flex: none; margin-bottom: .7rem; }
  .frozen > #price-rows { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; }
  .frozen > #price-rows > .tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .frozen thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--line); }
  .frozen table.compare td.pid, .frozen table.compare thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 1px 0 0 var(--line); }
  .frozen table.compare thead th:first-child { z-index: 4; background: var(--fill); }
}

/* --- 省略した呼び名の注意書き（※） --- */
.terms { list-style: none; margin: .8rem 0 0; padding: .55rem .8rem; background: var(--fill); border-radius: 6px; font-size: .85rem; color: var(--ink-2); }
.terms li + li { margin-top: .15rem; }
.terms b { color: var(--ink); }

/* --- 色味の選択（システム画面） --- */
.theme-pick { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
.theme-pick select { min-width: 22rem; }
.swatches { display: inline-flex; gap: 4px; vertical-align: middle; }
.swatches i { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line); display: inline-block; }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }

/* ==========================================================================
   テーマ（<html data-theme="…">）。決めるのは「テーマが決める色」だけ。
   --on-accent は、アクセント色の上で読めるほう（白か黒）を選んである。
   ========================================================================== */
/* 01. 金曜日の定時退社（TGIF Green） */
[data-theme="tgif-green"] { --bg-main: #F2F9F5; --bg-sidebar: #15803D; --bg-card: #FFFFFF; --text-primary: #166534; --color-accent: #22C55E;
  --on-accent: #06200f; --side-ink: #fff; --side-mark: #bbf7d0; --link: #166534; }
/* 03. 課長の熱血プレッシャー（Active Orange） */
[data-theme="active-orange"] { --bg-main: #FFF7ED; --bg-sidebar: #EA580C; --bg-card: #FFFFFF; --text-primary: #7C2D12; --color-accent: #F97316;
  --on-accent: #2b0f03; --side-ink: #fff; --side-mark: #fff; --link: #9a3412; }
/* 04. 徹夜明けのデバッグ（Hacker Matrix） */
[data-theme="hacker-matrix"] { --bg-main: #000000; --bg-sidebar: #050505; --bg-card: #0A0A0A; --text-primary: #39FF14; --color-accent: #00FF66;
  --on-accent: #001a09; --side-ink: #39FF14; --side-mark: #00FF66; --link: #00FF66; }
/* 05. 宇宙船のコックピット（Cyber Punk 2026） */
[data-theme="cyber-punk"] { --bg-main: #0B0F19; --bg-sidebar: #1E1B4B; --bg-card: #111827; --text-primary: #E0E7FF; --color-accent: #F43F5E;
  --on-accent: #fff; --side-ink: #E0E7FF; --side-mark: #F43F5E; --link: #fb7185; }
/* 07. 雨の日のサードプレイス（Cafe Mocha） */
[data-theme="cafe-mocha"] { --bg-main: #FAF7F2; --bg-sidebar: #4A2810; --bg-card: #FFFFFF; --text-primary: #27160C; --color-accent: #D97706;
  --on-accent: #1f1003; --side-ink: #fff; --side-mark: #fbbf24; --link: #92400e; }
/* 08. 終電間際のネオン街（Bar Midnight） */
[data-theme="bar-midnight"] { --bg-main: #121214; --bg-sidebar: #2E1065; --bg-card: #1C1917; --text-primary: #F5F5F7; --color-accent: #C084FC;
  --on-accent: #1e0a3c; --side-ink: #F5F5F7; --side-mark: #C084FC; --link: #d8b4fe; }
/* 09. ガッツリ二郎系（Garlic Yellow） */
[data-theme="garlic-yellow"] { --bg-main: #FEF9C3; --bg-sidebar: #78350F; --bg-card: #FFFFFF; --text-primary: #451A03; --color-accent: #EAB308;
  --on-accent: #2a1802; --side-ink: #fff; --side-mark: #fde047; --link: #854d0e; }
/* 11. 京都の紅葉狩り（Autumn Crimson） */
[data-theme="autumn-crimson"] { --bg-main: #FDFBF7; --bg-sidebar: #7F1D1D; --bg-card: #FFFFFF; --text-primary: #450A0A; --color-accent: #B91C1C;
  --on-accent: #fff; --side-ink: #fff; --side-mark: #fca5a5; --link: #991b1b; }
/* 12. 真夏のプールサイド（Resort Cyan） */
[data-theme="resort-cyan"] { --bg-main: #F0F9FF; --bg-sidebar: #0369A1; --bg-card: #FFFFFF; --text-primary: #0C4A6E; --color-accent: #0EA5E9;
  --on-accent: #03202e; --side-ink: #fff; --side-mark: #bae6fd; --link: #0369a1; }

/* 暗いテーマに共通：下地・意味のある色・グラフ（半透明のグラデーション） */
[data-theme="hacker-matrix"], [data-theme="cyber-punk"], [data-theme="bar-midnight"] {
  color-scheme: dark;
  --shadow: 0 1px 4px rgba(0, 0, 0, .6);
  --field: color-mix(in srgb, var(--text-primary) 7%, var(--bg-card));
  --bg-topbar: color-mix(in srgb, var(--bg-sidebar) 70%, #000);
  --ok: #34d399; --info: #6fb1ef; --amber: #f5c542; --pending: #ff8a4c; --warn: #ffb454; --bad: #ff6b6b;
  --confirmed: rgba(91, 155, 213, .26);
  --auto: rgba(230, 180, 34, .22);
  --s1: #4da3ff; --s2: #ff8a4c; --s3: #2fd39a;
  --s1-fill: linear-gradient(90deg, rgba(77, 163, 255, .30), rgba(77, 163, 255, .88));
  --s2-fill: linear-gradient(90deg, rgba(255, 138, 76, .30), rgba(255, 138, 76, .88));
  --s3-fill: linear-gradient(90deg, rgba(47, 211, 154, .30), rgba(47, 211, 154, .88));
}

/* ==========================================================================
   幅に合わせた並び替え（レスポンシブ）
   決まり：横にはみ出すものは、その枠の中で横スクロールさせる（ページ全体は横に動かさない）。
   ========================================================================== */
body { overflow-wrap: break-word; }
.kv dd, .q-box dd, .sub { overflow-wrap: anywhere; }      /* 長いパスなどは途中で折り返す */
.card { min-width: 0; overflow-x: auto; }      /* 枠で包んでいない表も、はみ出したら枠の中で横スクロール */
.grid2 > * { min-width: 0; }
.tablewrap { -webkit-overflow-scrolling: touch; }
input[type=text], input[type=search], select, input[type=file] { max-width: 100%; }
img, svg { max-width: 100%; }
.theme-pick select { min-width: min(22rem, 100%); }

@media (max-width: 900px) {
  .tablewrap table, .drawer-body table { min-width: 960px; }          /* 列がつぶれて読めなくなる前に、横スクロールにする */
  .drawer-body { overflow-x: auto; }
  table.choice { min-width: 760px; }
}
@media (max-width: 640px) {
  html { font-size: 13.5px; }
  h1 { font-size: 1.3rem; }
  .pagehead { align-items: flex-start; }
  .pagehead > * { max-width: 100%; }
  .card { padding: .9rem .85rem; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .6rem; }
  .tile .v { font-size: 1.4rem; }
  .bars { grid-template-columns: 1fr; row-gap: .15rem; }       /* ラベルを棒の上に置く */
  .bars .lab { margin-top: .45rem; white-space: normal; }
  .kv, .q-box { grid-template-columns: 1fr; gap: 0; }
  .kv dt, .q-box dt { font-size: .8rem; margin-top: .45rem; }
  .toolbar, .toolbar form { width: 100%; }
  .toolbar input[type=search], .toolbar input[type=text], .toolbar select { flex: 1 1 10rem; width: auto !important; min-width: 0; }
  .steps { grid-template-columns: 1fr; }
  .drawer { width: 100vw; }
  .drawer-head { padding: .7rem .85rem; }
  .drawer-body { padding: .8rem .85rem 2rem; }
  #reboot .rb { padding: 20px 18px; }
}

/* 言い換え：使わない行は薄く */
tr.off td { color: var(--ink-3); }
tr.off td b { font-weight: 400; text-decoration: line-through; }

/* 見積：使う学習データを選ぶ */
details.pick { position: relative; }
details.pick > summary { cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: 6px; padding: .3rem .7rem; background: var(--card); white-space: nowrap; }
details.pick > summary::-webkit-details-marker { display: none; }
details.pick > summary::after { content: " ▾"; color: var(--ink-3); }
details.pick .pick-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 17rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--text-primary) 18%, transparent); display: grid; gap: .35rem; }
details.pick .pick-panel label { display: block; white-space: nowrap; }
details.pick .pick-panel p { margin: .2rem 0 0; white-space: normal; }
@media (max-width: 700px) { details.pick .pick-panel { left: 0; right: auto; max-width: 90vw; } }

/* 候補の確認：上（見積の行）を固定し、下（候補の表）だけスクロール。表の見出しも固定 */
.drawer-body:has(> .cand-scroll) { padding: 0; overflow: hidden; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cand-fixed { flex: none; padding: 0 1.2rem .2rem; border-bottom: 1px solid var(--line); }
.cand-fixed .drawer-head { margin: 0 -1.2rem .7rem; }
.cand-fixed .q-box { margin-bottom: .7rem; }
.cand-fixed .note-box { margin-bottom: .7rem; }
.cand-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 1.2rem 2rem; }
.cand-scroll table.cand thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--line); }
table.cand td.pick { white-space: nowrap; }
table.cand td.pick form { display: flex; gap: .3rem; margin: 0; }
table.cand td.nm { min-width: 13rem; font-weight: 600; }
table.cand td.sp { min-width: 13rem; }
table.cand td.cat { color: var(--ink-2); font-size: .85rem; min-width: 8rem; }
table.cand td.old { color: var(--ink-2); }
table.cand tr.taken td { background: var(--confirmed); }
/* 見積の行：手で変えた単価と、その理由 */
table.est td.edited { font-weight: 700; color: var(--accent); }
table.est td.edited .was { font-weight: 400; font-size: .76rem; color: var(--ink-3); text-decoration: line-through; white-space: nowrap; }
table.est .pnote { margin-top: .25rem; padding: .2rem .45rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--auto) 70%, var(--card)); color: var(--ink); font-size: .84rem; }
table.est td.acts { white-space: normal; min-width: 11.5rem; }
table.est td.acts button { margin: 0 0 .2rem .15rem; }
/* 入力用の小さな窓 */
dialog.dlg { border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.3rem; width: min(40rem, 94vw); background: var(--card); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
dialog.dlg::backdrop { background: rgba(20, 26, 34, .45); }
dialog.dlg h2 { margin: 0 0 .3rem; }
.dlg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: .8rem 0; }
.dlg-grid label, .dlg-note { display: grid; gap: .2rem; font-size: .88rem; font-weight: 600; }
.dlg-grid input { text-align: right; width: 100%; }
.dlg-note textarea { width: 100%; font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
@media (max-width: 600px) { .dlg-grid { grid-template-columns: 1fr; } }
/* 操作した行へ戻ったとき、固定した見出し（表の見出し・大項目・中項目）の下に隠れないようにする */
table.est tr[id] { scroll-margin-top: calc(var(--top, 3.2rem) + var(--th-h, 2.2rem) + var(--mj-h, 2.2rem) + 3.2rem); }

/* 複数の単価に分かれる行：件数の丸と、一覧の窓 */
button .count { display: inline-block; min-width: 1.35rem; margin-left: .4rem; padding: 0 .35rem; border-radius: 999px; background: var(--pending); color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.35rem; text-align: center; }
dialog.dlg.wide { width: min(72rem, 96vw); max-height: 90vh; padding: 0; overflow: hidden; }
dialog.dlg.wide[open] { display: flex; flex-direction: column; }
.dlg-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 1rem 1.3rem .7rem; border-bottom: 1px solid var(--line); flex: none; }
.dlg-scroll { overflow: auto; padding: .9rem 1.3rem 1.2rem; min-height: 0; }
.split-item { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .9rem; background: var(--card); }
.split-item .split-q { margin-bottom: .5rem; }
.split-item table { margin-bottom: .6rem; }
.split-item tr.taken td { background: var(--confirmed); }

/* 「使う学習データ」の幅は固定（選び方で、右のボタンの位置がずれないように） */
details.pick > summary { width: 19rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
/* メニューの「≡」：ブラウザによってはボタンの中の線の幅が 0 になるため、線の幅・間隔を数値で決める */
.menu-btn { align-items: center; gap: 0; }
.menu-btn span { flex: none; width: 20px; height: 2px; min-height: 2px; margin: 2px 0; }

/* タブの行の右端に置くボタン */
.tabs { display: flex; flex-wrap: wrap; align-items: center; }
.tabs .tab-right { margin-left: auto; }

details.pick .pick-panel label.pick-all { font-weight: 600; padding-bottom: .35rem; margin-bottom: .1rem; border-bottom: 1px solid var(--line); }

/* 各画面共通：表の見出し行を固定（static/app.js が、固定できる表に印を付ける） */
.card.stick, .tablewrap.stick { overflow: visible; }
table.stick-head > thead th { position: sticky; top: var(--stick); z-index: 5; box-shadow: 0 1px 0 var(--line); }
.tablewrap.own-scroll > table > thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--line); }
.dlg-scroll table thead th { position: sticky; top: 0; z-index: 2; }
.tablewrap.tall { max-height: calc(100vh - var(--top) - 1rem); overflow: auto; }

/* 物件：登録の入力欄、業務の順に並んだタブ、進み具合 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem 1rem; }
.form-grid label { display: grid; gap: .25rem; font-size: .86rem; font-weight: 600; color: var(--ink-2); min-width: 0; }
.form-grid label.wide, .form-grid .wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; font: inherit; font-weight: 400; }
.form-grid textarea { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--ink); }
.flow-tabs { margin-bottom: 1rem; }
.flow-tabs .soon { padding: .28rem .8rem; border-radius: 14px; border: 1px dashed var(--line); color: var(--ink-3); cursor: default; }
.flow-steps { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; counter-reset: step; }
.flow-steps li { counter-increment: step; display: grid; grid-template-columns: 1.9rem 1fr; column-gap: .6rem; align-items: start; }
.flow-steps li::before { content: counter(step); grid-row: 1 / 3; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700; background: var(--fill); color: var(--ink-2); border: 1px solid var(--line); }
.flow-steps li b { grid-column: 2; }
.flow-steps li span { grid-column: 2; color: var(--ink-2); font-size: .86rem; }
.flow-steps li.done::before { content: "✓"; background: var(--ok); color: #fff; border-color: var(--ok); }
.flow-steps li.now::before { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.flow-steps li.soon b, .flow-steps li.soon span { color: var(--ink-3); }

/* 概算のパターン：上の合計の帯と、案ごとの列 */
@media (min-width: 901px) and (min-height: 560px) {
  .frozen > .frozen-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; overflow: hidden; padding-top: 0; }
  .frozen > .frozen-body > .tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .frozen table.pt tr.major td { position: sticky; top: var(--pt-th, 2.4rem); z-index: 2; }
}
/* 案の一覧：案ごとに 1 段。案を足すと下に増える */
.pt-sum { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .8rem; max-height: 42vh; overflow: auto; }
.pt-legend { margin: 0; font-size: .8rem; }
.pt-card { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(16rem, 1fr) minmax(15rem, 24rem); gap: .3rem 1rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; background: var(--field); }
.pt-card[data-p="0"] { background: var(--fill); }
.pt-name { display: flex; gap: .2rem .5rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.pt-name b { font-size: 1.02rem; white-space: nowrap; }
.pt-name form { flex: 1; margin: 0; min-width: 0; }
.pt-name input { width: 100%; padding: .12rem .35rem; font-size: .85rem; }
.pt-diff { margin: 0; font-size: .8rem; color: var(--ink-2); flex-basis: 100%; }
.pt-bars { display: grid; gap: .16rem; font-variant-numeric: tabular-nums; min-width: 0; }
.pt-bars > div { display: grid; grid-template-columns: 4.6rem 1fr 7.5rem 4.6rem; gap: .5rem; align-items: center; }
.pt-bars .k { color: var(--ink-2); font-size: .82rem; }
.pt-bars b { text-align: right; }
.pt-bars > div:not(:first-child) b { font-weight: 400; }
.pt-bars .pct { color: var(--ink-2); font-size: .78rem; }
.pt-track { display: block; height: .75rem; border-radius: 3px; background: var(--fill); border: 1px solid var(--line); overflow: hidden; }
.pt-card[data-p="0"] .pt-track { background: var(--field); }
.pt-track i { display: block; height: 100%; width: 0; transition: width .2s; }
.pt-side { min-width: 0; }
.pt-acts { display: flex; gap: .4rem; margin-top: .3rem; align-items: center; }
.pt-acts form { margin: 0; }
.pt-why { font-size: .78rem; flex-basis: 100%; }
@media (max-width: 1100px) { .pt-card { grid-template-columns: minmax(10rem, 14rem) 1fr; } .pt-side { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pt-card { grid-template-columns: 1fr; } .pt-bars > div { grid-template-columns: 4.2rem 1fr 6.5rem; } .pt-bars .pct { display: none; } .pt-sum { max-height: none; } }
.warn-text { color: var(--pending); font-weight: 600; }
table.pt td.pcol, table.pt th.pcol { white-space: nowrap; font-variant-numeric: tabular-nums; border-left: 1px solid var(--line); min-width: 8.5rem; }
table.pt td.pcol label { cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; justify-content: flex-end; }
table.pt td.pcol.off .amt { color: var(--ink-3); font-size: .82rem; }
table.pt tr.d:has(td.pcol.off) td.name { color: inherit; }
table.pt td.pcol.changed { background: color-mix(in srgb, var(--auto) 60%, var(--card)); }
table.pt .ovnote { font-size: .74rem; color: var(--ink-2); white-space: normal; text-align: right; }
table.pt button.ov { border: 0; background: transparent; color: var(--ink-3); padding: 0 .15rem; margin-left: .15rem; font-size: .85rem; cursor: pointer; }
table.pt button.ov:hover { color: var(--accent); background: transparent; }
table.pt tr.major td.pcol, table.pt tr.middle td.pcol { font-weight: 700; }
table.pt td.name { min-width: 10rem; }

/* 状態のアイコン：同じ大きさの丸に、同じ太さの線で描いた記号（文字の形に左右されないよう、記号は絵で描く） */
.st, .st-legend span.st { display: inline-block; position: relative; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; font-size: 0; line-height: 0; vertical-align: middle; flex: none; cursor: help; }
.st::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--st-icon) center / 64% no-repeat; mask: var(--st-icon) center / 64% no-repeat; }
.st-ok { background: var(--info); color: #fff; --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.st-au { background: var(--amber); color: #2b2200; --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 2.5L5 13.4h5.6L9.8 21.5 18.5 10.3h-5.9z' fill='black' stroke-width='1.2'/%3E%3C/svg%3E"); }
.st-pe { background: var(--pending); color: #fff; --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v8.2'/%3E%3Ccircle cx='12' cy='18.4' r='1.2' fill='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.st-no { background: var(--ink-3); color: var(--card); --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.st-legend span.st { width: 1.2rem; height: 1.2rem; }

.pt-appr { margin: 0; font-size: .82rem; }
.pt-acts { flex-wrap: wrap; }
table.vdiff td.k-add { color: var(--ok); font-weight: 700; } table.vdiff td.k-del { color: var(--bad); font-weight: 700; } table.vdiff td.k-chg { color: var(--warn); font-weight: 700; }
table.vdiff .from { color: var(--ink-3); text-decoration: line-through; }

/* 概算のパターン：「変更」ボタンは、ふつうの小さなボタンとして見せる */
table.pt button.ov { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: .12rem .5rem; margin-left: .4rem; font-size: .8rem; border-radius: 6px; }
table.pt button.ov:hover { background: var(--fill); color: var(--ink); border-color: var(--accent); }
table.pt td.pcol.changed button.ov { border-color: var(--accent); color: var(--accent); font-weight: 600; }
table.pt td.pcol.off button.ov { visibility: hidden; }

/* AK単価の調整％（概算のパターン）。自分で入れた値は濃く、上から引き継いだ値（placeholder）は薄く */
table.pt .rcol { width: 4.6rem; min-width: 4.6rem; white-space: nowrap; }
table.pt input.rate { width: 3.6rem; padding: .1rem .3rem; text-align: right; font-variant-numeric: tabular-nums; }
table.pt input.rate.set { font-weight: 700; border-color: var(--accent); }
table.pt input.rate::placeholder { color: var(--ink-3); }
table.pt tr.major input.rate, table.pt tr.middle input.rate { background: var(--card); color: var(--ink); }
table.pt .unitprice.adj { color: var(--accent); font-weight: 600; cursor: help; }

/* 概算のパターン：手数料・売上（色は役割変数だけ） */
.c4 { background: var(--ink-3); } .c5 { background: var(--ok); }
.legend i.c4 { background: var(--ink-3); } .legend i.c5 { background: var(--ok); }
.pt-fee { white-space: nowrap; }
.pt-fee input { width: 3rem; padding: .05rem .3rem; text-align: right; font-variant-numeric: tabular-nums; }
.pt-bars .k { white-space: nowrap; } .pt-bars .feelabel { font-size: .72rem; }
.pt-bars > div { grid-template-columns: 8.2rem 1fr 7.5rem 6.6rem; }
.pt-bars .pt-sales { border-top: 1px solid var(--line); padding-top: .16rem; }
.pt-bars > div.pt-sales b { font-weight: 700; }
.pt-bars .pt-sales.minus b { color: var(--bad); }
.pt-sum { max-height: 50vh; }
@media (max-width: 640px) { .pt-bars > div { grid-template-columns: 7.6rem 1fr 6.5rem; } .pt-bars .pt-sales .pct { display: block; grid-column: 1 / -1; text-align: right; } }

.pt-review { margin-bottom: .3rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.pt-review form { margin: 0; }

/* 鏡（総括） */
.sm-grid { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
table.sm tfoot th { border-top: 2px solid var(--line); background: var(--fill); }
table.sm td, table.sm th { white-space: nowrap; } table.sm td:first-child { white-space: normal; }
@media (max-width: 1000px) { .sm-grid { grid-template-columns: 1fr; } }

table.sm tfoot tr.mirror td { border-top: 0; padding-top: .25rem; padding-bottom: .25rem; }
table.sm tfoot tr.grand td { border-top: 2px solid var(--line); font-size: 1.05rem; }
.pt-bars .pct[data-k="sub"] { white-space: nowrap; font-size: .72rem; }

table.sm .sm-sub { font-size: .8rem; font-weight: 400; color: var(--ink-2); }
table.sm td.sm-diff.plus { color: var(--ok); }

/* 鏡：AK のかたまり（AK ％・AK金額・％による差額）と、大項目ごとのグラフ */
.tile .n.big { font-size: .95rem; color: var(--ink-2); margin-top: .15rem; } .tile .n.big b { color: var(--ink); }
table.sm th:first-child, table.sm td:first-child { width: 99%; }
table.sm th.num, table.sm td.num { padding-left: 1.4rem; }
table.sm .ak { background: color-mix(in srgb, var(--s1) 8%, transparent); }
table.sm thead .ak { background: color-mix(in srgb, var(--s1) 18%, var(--fill)); }
table.sm .ak-l { border-left: 2px solid var(--s1); } table.sm .ak-r { border-right: 2px solid var(--s1); }
table.sm thead tr.grp th.ak { text-align: center; border-top: 2px solid var(--s1); }
table.sm tfoot tr:first-child .ak { border-bottom: 2px solid var(--s1); }
table.sm td.ak-r, table.sm th.ak-r { padding-left: .9rem; }
.c1.lite { opacity: .45; } .legend i.c1.lite { opacity: .45; }
.sm-chart { display: grid; gap: .55rem; margin-top: .4rem; }
.sm-row { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 1rem; align-items: center; }
.sm-bars { display: grid; gap: .14rem; font-variant-numeric: tabular-nums; }
.sm-bars > div { display: grid; grid-template-columns: 1fr 7.5rem; gap: .6rem; align-items: center; }
.sm-bars > div > :last-child { text-align: right; }
.sm-bars .pt-track { display: flex; } .sm-bars .pt-track i { flex: none; }
@media (max-width: 640px) { .sm-row { grid-template-columns: 1fr; gap: .2rem; } }

/* 鏡：大項目の表とグラフを横に並べる（狭い画面では縦） */
.sm-two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.sm-two .sm-row { grid-template-columns: minmax(6rem, 9rem) 1fr; gap: .6rem; }
.sm-two .sm-bars > div { grid-template-columns: 1fr 6.4rem; }
.sm-two table.sm th.num, .sm-two table.sm td.num { padding-left: .8rem; }
@media (max-width: 1300px) { .sm-two { grid-template-columns: 1fr; } }
.flow-steps a.btn { margin-left: .3rem; }
/* 鏡：表とグラフの箱の高さをそろえ、グラフは箱いっぱいに広げる */
.sm-two { align-items: stretch; }
.sm-two > .card { display: flex; flex-direction: column; }
.sm-two .sm-chart { flex: 1; align-content: space-around; }
@media (max-width: 1300px) { .sm-two .sm-chart { flex: none; } }
/* 概算のパターン：案の一覧が縦に長いので、画面全体を縦に流す。明細の表は画面の高さいっぱいの箱にして、見出し行を箱のいちばん上に固定 */
.frozen.flow { height: auto; display: block; }
.frozen.flow > .pt-sum { max-height: none; overflow: visible; }
.frozen.flow > .frozen-body { display: block; overflow: visible; margin-bottom: 1rem; scroll-margin-top: calc(var(--stick) + .4rem); }
/* ふつうは画面全体のスクロール 1 本で、見出し行を画面のいちばん上（黒い帯のすぐ下）に固定する。
   表が横にはみ出すとき（.boxed。案が多い・画面が狭い）だけ、表を箱にして箱の中で固定する */
.frozen.flow > .frozen-body > .tablewrap { overflow: visible; max-height: none; }
.frozen.flow table.pt thead th { position: sticky; top: var(--stick); z-index: 4; box-shadow: 0 1px 0 var(--line); }
.frozen.flow table.pt tr.major td { position: sticky; top: calc(var(--stick) + var(--pt-th, 2.4rem) - 1px); z-index: 3; }
.frozen.flow > .frozen-body.boxed > .tablewrap { max-height: calc(100vh - var(--stick) - 1.6rem); overflow: auto; }
.frozen.flow > .frozen-body.boxed table.pt thead th { top: 0; }
.frozen.flow > .frozen-body.boxed table.pt tr.major td { top: calc(var(--pt-th, 2.4rem) - 1px); }

/* 概算のパターン：折りたたみ */
.pt-fold { margin: 0 0 .5rem; gap: .4rem; }
table.pt tr.fold-hide { display: none; }
table.pt td.fold-name { cursor: pointer; user-select: none; }
table.pt td.fold-name:hover { text-decoration: underline; }
table.pt .fold-mark::before { content: "▼"; display: inline-block; width: 1.1em; font-size: .75em; opacity: .8; }
table.pt tr.fold-closed .fold-mark::before { content: "▶"; }
.pt-print { padding: .55rem .8rem; }
.print-form { gap: .45rem; flex-wrap: wrap; }
label.chk { display: inline-flex; gap: .35rem; align-items: center; font-weight: 600; }
#manual-dlg input[type="text"] { width: 100%; }

.flow-steps .prog-print { display: inline-flex; gap: .3rem; align-items: center; margin-left: .8rem; flex-wrap: wrap; }
.flow-steps .prog-print a.btn { margin-left: 0; }
.pagehead .toolbar .print-form { padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
table.pt td.pcol.absent .amt { color: var(--ink-3); font-size: .78rem; }
table.pt tr.not-a td.name { box-shadow: inset 3px 0 0 var(--warn); }

fieldset.pick-pats { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
fieldset.pick-pats legend { font-weight: 600; padding: 0 .3rem; }
fieldset.pick-pats .sub { flex-basis: 100%; margin: .2rem 0 0; }

/* 確認・お知らせ・入力の小画面（app.js の UI） */
.ui-modal { padding: 0; border: 0; background: transparent; width: min(30rem, calc(100vw - 32px)); max-width: none; }
.ui-modal::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.ui-modal-panel { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--ink) 30%, transparent); padding: 1.1rem 1.2rem 1rem; }
.ui-modal-msg { white-space: pre-wrap; line-height: 1.6; font-size: 1.02rem; }
.ui-modal-input { display: block; width: 100%; box-sizing: border-box; margin-top: .7rem; }
.ui-modal-input[hidden] { display: none; }
.ui-modal-err { color: var(--bad); font-size: .9rem; margin-top: .3rem; }
.ui-modal-err[hidden] { display: none; }
.ui-modal-btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.ui-modal-btns button[hidden] { display: none; }
.ui-modal-btns .danger-fill { background: var(--bad); border-color: var(--bad); color: var(--card); }
html.ui-modal-on { overflow: hidden; }
.pick-base { border: 1px solid var(--line); border-radius: 8px; margin: .8rem 0 0; padding: .4rem .8rem .6rem; display: grid; gap: .35rem; }
.pick-base legend { font-weight: 700; padding: 0 .3rem; }
.pick-base .chk { display: block; }

/* 行を足す（表のいちばん左の列） */
th.addcol, td.addcol { width: 1.9rem; min-width: 1.9rem; padding-left: .3rem !important; padding-right: 0 !important; text-align: center; }
table.pt.formal .addcol { display: none; }
table.with-del th.addcol, table.with-del td.addcol { width: 3.6rem; min-width: 3.6rem; white-space: nowrap; }
button.row-del { width: 1.6rem; height: 1.6rem; padding: 0; margin-left: .2rem; border-radius: 50%; font-size: 1rem; line-height: 1; font-weight: 700;
  color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--card)); background: var(--card); cursor: pointer; }
button.row-del:hover, button.row-del:focus-visible { background: var(--bad); color: var(--card); }
button.row-add { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; font-weight: 700;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--card)); background: var(--card); cursor: pointer; }
button.row-add:hover, button.row-add:focus-visible { background: var(--accent); color: var(--card); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* メニューのたたみ */
.nav-sub > summary { list-style: none; cursor: pointer; color: var(--side-ink-2); padding: .5rem 1.1rem; display: flex; align-items: center; gap: .4rem; border-left: 3px solid transparent; }
.nav-sub > summary::-webkit-details-marker { display: none; }
.nav-sub > summary::before { content: "▸"; font-size: .8em; transition: transform .15s; color: var(--side-ink-3); }
.nav-sub[open] > summary::before { transform: rotate(90deg); }
.nav-sub > summary:hover { background: var(--side-hover); color: var(--side-ink); }
.nav-sub > a { padding-left: 2.1rem; font-size: .92rem; }
/* ボタンの並び（.toolbar）の中に置いた小画面は、並びの書式を受けない */
.toolbar dialog.dlg, .toolbar dialog.dlg form { display: block; }
.toolbar dialog.dlg:not([open]) { display: none; }
.toolbar dialog.dlg form > .toolbar { display: flex; }

/* 物件の中の画面の上（_project_tabs.html）：どの画面でも同じ位置・同じ並び */
/* 物件の中のタブ（_project_tabs.html）：見出しの山形のタブ。開いている所は下の画面とつながる。広い画面では上に貼り付く */
.pj-head { margin: -.4rem 0 1rem; padding-top: .4rem; background: var(--surface); z-index: 8; }
@media (min-width: 701px) { .pj-head { position: sticky; top: var(--top); } }
.pj-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: .88rem; margin-bottom: .35rem; }
.pj-title .pj-name { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.pj-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 .2rem; margin: 0; padding: 0 .2rem; border-bottom: 2px solid var(--accent); }
.pj-tabs a, .pj-tabs .soon { position: relative; display: block; padding: .45rem .95rem .4rem; margin-bottom: -2px;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--fill); color: var(--ink-2);
  font-size: .93rem; line-height: 1.3; white-space: nowrap; text-decoration: none; }
.pj-tabs a:hover { background: var(--card); color: var(--ink); }
.pj-tabs a.on { background: var(--card); color: var(--ink); font-weight: 700; border: 2px solid var(--accent); border-bottom: 2px solid var(--card);
  padding-top: .55rem; z-index: 1; }
.pj-tabs a.on::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 4px; border-radius: 9px 9px 0 0; background: var(--accent); }
.pj-tabs .soon { border-style: dashed; color: var(--ink-3); background: transparent; cursor: default; }
.pj-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .4rem .6rem; background: var(--card);
  border: 2px solid var(--accent); border-top: 0; border-radius: 0 0 10px 10px; }
.pj-sub a { padding: .18rem .7rem; border-radius: 12px; border: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }
.pj-sub a.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.pj-sub a:hover { text-decoration: none; }
table.pt thead input.rate-all { width: 3.6rem; margin-top: .2rem; font-weight: 700; }
.ui-choices { display: grid; gap: .5rem; margin-top: .9rem; }
.ui-choices .ui-choice { display: block; width: 100%; box-sizing: border-box; white-space: normal; text-align: left; padding: .6rem .8rem; line-height: 1.45; }
.ui-choices .ui-choice span { display: block; font-size: .85rem; font-weight: 400; opacity: .85; }

/* ダッシュボード */
.bd-filter { flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 .9rem; }
.seg { display: inline-flex; border: 1px solid var(--field-line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--line); background: var(--field); padding: .3rem .75rem; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.bd-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.meter { height: 8px; border-radius: 4px; background: var(--fill-2); margin-top: .45rem; display: flex; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--s1); }
.meter i.f { background: color-mix(in srgb, var(--s1) 38%, var(--card)); margin-left: 2px; }
.bd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--ink-2); }
.legend .lg { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.legend .lg.won { background: var(--s1); }
.legend .lg.fc { background: color-mix(in srgb, var(--s1) 38%, var(--card)); }
.legend .lg.tg { height: 0; border-top: 2px solid var(--ink); border-radius: 0; vertical-align: 3px; }
.bd-chart { position: relative; margin-top: .6rem; }
.bd-chart svg { width: 100%; height: auto; display: block; }
.bd-chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bd-chart .base { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bd-chart .ax { fill: var(--ink-3); font-size: 11px; }
.bd-chart .ax.cur { fill: var(--ink); font-weight: 700; }
.bd-chart .won { fill: var(--s1); }
.bd-chart .fc { fill: color-mix(in srgb, var(--s1) 38%, var(--card)); }
.bd-chart .tg { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bd-chart .band { fill: var(--accent-soft); }
.bd-chart .hit { fill: transparent; cursor: default; outline: none; }
.bd-chart g.hover .won, .bd-chart g.hover .fc { filter: brightness(.92); }
.bd-tip { position: absolute; pointer-events: none; white-space: pre-line; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: .45rem .65rem; font-size: .85rem; box-shadow: var(--shadow); z-index: 3; min-width: 13rem; }
.bd-table { margin-top: .6rem; }
.bd-table summary { cursor: pointer; color: var(--accent-ink); }
tr.sel td { background: var(--accent-soft); }
.bd-grid { align-items: start; }
.kpi-grid input { width: 5.2rem; text-align: right; }
.kpi-grid td.q, .kpi-grid th.q { background: var(--fill); font-weight: 700; white-space: nowrap; }
.kpi-grid tr.k-all td { background: var(--accent-soft); }
.bd-name { min-width: 11rem; }
.bd-grid table td, .bd-grid table th { white-space: nowrap; }
.bd-grid table td.bd-name, .bd-grid table td:nth-child(2) { white-space: normal; }
.kpi-grid td:first-child { white-space: nowrap; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .an-grid { grid-template-columns: 1fr; } }
.an-sec { margin: 0; }
.an-bars { display: grid; gap: .45rem; margin-top: .6rem; }
.an-row { display: grid; grid-template-columns: 9.5rem 1fr 7.5rem 6.5rem; align-items: center; gap: .6rem; font-size: .92rem; }
.an-track { height: 12px; background: var(--fill-2); border-radius: 4px; overflow: hidden; }
.an-track i { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }
.an-val { text-align: right; white-space: nowrap; }
.an-mg { white-space: nowrap; }
@media (max-width: 700px) { .an-row { grid-template-columns: 7rem 1fr 6rem; } .an-mg { grid-column: 2 / 4; } }
.sc-steps { display: flex; gap: .4rem; list-style: none; padding: 0; margin: .2rem 0 .9rem; flex-wrap: wrap; }
.sc-steps li { padding: .25rem .7rem; border-radius: 999px; background: var(--fill); color: var(--ink-3); font-size: .9rem; }
.sc-steps li.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sc-majors { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .3rem .8rem; margin: .5rem 0; }
.sc-table input.sc-pct { width: 5rem; text-align: right; }
.sc-table input.sc-pct.set { border-color: var(--warn); font-weight: 700; }
.sc-table tfoot th { border-top: 2px solid var(--line); }
#sc-form button[hidden], .sc-page[hidden] { display: none !important; }

/* 正式見積：大項目ごとの比較（a) を 100%） */
:root { --cat1: #2a78d6; --cat2: #eb6834; --cat3: #1baf7a; --cat4: #eda100; --cat5: #e87ba4; --cat6: #008300; }
.cat1 { background: var(--cat1); } .cat2 { background: var(--cat2); } .cat3 { background: var(--cat3); }
.cat4 { background: var(--cat4); } .cat5 { background: var(--cat5); } .cat6 { background: var(--cat6); }
.cmp-grid { position: relative; margin-top: .6rem; }
.cmp-axis, .cmp-row { display: grid; grid-template-columns: 12rem 1fr 3.5rem; align-items: center; gap: .6rem; }
.cmp-scale { position: relative; height: 1.2rem; }
.cmp-scale i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--ink-3); }
.cmp-row { padding: .3rem 0; border-top: 1px solid var(--line); }
.cmp-row.total { border-top: 0; border-bottom: 2px solid var(--line); padding-bottom: .5rem; margin-bottom: .2rem; }
.cmp-row.total .cmp-name { font-weight: 700; }
.cmp-name { font-size: .9rem; line-height: 1.3; }
.cmp-name .matched { display: block; font-size: .78rem; }
.cmp-plot { position: relative; display: grid; gap: 2px; padding: 2px 0; }
.cmp-plot .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.cmp-plot .gl.base { width: 2px; background: var(--ink); z-index: 1; }
.cmp-bar { position: relative; height: 12px; outline: none; }
.cmp-bar i { position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.cmp-bar em { position: absolute; top: -2px; font-style: normal; font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.cmp-bar:hover i, .cmp-bar:focus i { filter: brightness(.9); }
.cmp .legend .lg[class*="cat"] { height: 10px; }
@media (max-width: 700px) { .cmp-axis, .cmp-row { grid-template-columns: 7.5rem 1fr 2.5rem; } }
:root { --cat7: #6250d6; --cat8: #e34948; }
.cat7 { background: var(--cat7); } .cat8 { background: var(--cat8); }
.cat-f1 { fill: var(--cat1); } .cat-f2 { fill: var(--cat2); } .cat-f3 { fill: var(--cat3); } .cat-f4 { fill: var(--cat4); }
.cat-f5 { fill: var(--cat5); } .cat-f6 { fill: var(--cat6); } .cat-f7 { fill: var(--cat7); } .cat-f8 { fill: var(--cat8); }
.cmp .seg { outline: none; cursor: default; }
.cmp .seg:hover, .cmp .seg:focus { filter: brightness(.9); }
.cmp .cmp-top { fill: var(--ink); font-size: 12px; font-weight: 700; }

/* 正式見積：案の箱を横に並べる（a)・b)・c)…）。棒は出さない */
.pt-sum.horiz { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.pt-sum.horiz > .legend { grid-column: 1 / -1; }
.pt-sum.horiz > .legend > span:not(.pt-fee) { display: none; }
.pt-sum.horiz .pt-card { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.pt-sum.horiz .pt-track { display: none; }
.pt-sum.horiz .pt-bars > div { grid-template-columns: 4.6rem 1fr auto; gap: .4rem; }
.pt-sum.horiz .pt-bars .pct { font-size: .74rem; }
.pt-sum.horiz .pt-side { border-top: 1px solid var(--line); padding-top: .4rem; }
/* 横並びの案の箱：％・切捨後は金額の下の行に（箱の幅からはみ出さないように） */
.pt-sum.horiz .pt-bars > div { grid-template-columns: auto 1fr; gap: 0 .4rem; align-items: baseline; }
.pt-sum.horiz .pt-bars .pct { grid-column: 1 / -1; text-align: right; margin-top: -.15rem; white-space: nowrap; }
.pt-sum.horiz .pt-bars .pct:empty { display: none; }
.pt-sum.horiz .pt-card { min-width: 0; overflow: hidden; }
.pt-sum.horiz .pt-bars b { white-space: nowrap; }
.pt-cards { display: contents; }
.pt-sum.horiz { display: flex; flex-direction: column; }
.pt-sum.horiz > .pt-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: .4rem; overflow-x: auto; }
.pt-bars > div[hidden] { display: none; }
.pt-sum.horiz .pt-card { min-width: 0; }
.pt-sum.horiz .pt-bars > div { grid-template-columns: 4.4rem minmax(0, 1fr) auto; }
.pt-sum.horiz .pt-bars b { white-space: nowrap; }
.pt-sum.horiz .pt-bars .pct[data-k="sub"] { grid-column: 1 / -1; text-align: right; margin-top: -.2rem; }
.pt-sum.horiz .pt-bars .pct[data-k="sub"]:empty { display: none; }
.pt-sum.horiz .pt-name { min-width: 0; }
.pt-sum.horiz .pt-name input { min-width: 0; }
.pt-sum.horiz .pt-bars .pct:not([data-k="sub"]) { white-space: nowrap; }
.pt-sum.horiz > .pt-cards { grid-auto-columns: minmax(185px, 1fr); }

/* 比較表 */
.cmp-set summary { cursor: pointer; }
.cmp-table td { vertical-align: top; }
.cmp-table input.cmp-t, .cmp-table textarea.cmp-t { width: 100%; box-sizing: border-box; font-size: .88rem; text-align: left; }
.cmp-table textarea.cmp-t { min-width: 16rem; resize: vertical; }
.cmp-table td:nth-child(2) { width: 7.5rem; min-width: 7.5rem; } .cmp-table td:nth-child(3) { min-width: 11rem; }
.cmp-table td:nth-last-child(2) { min-width: 11rem; }
.cmp-table td.skip { background: var(--fill-2); color: var(--ink-3); text-align: center; }
.cmp-table tr.g-first td { border-top: 2px solid var(--line); }
.cmp-table .cmp-case { min-width: 7.5rem; }
.cmp-t.saved { border-color: var(--ok); }
.cmp-bar-tools { margin-bottom: .5rem; }

/* 進行中物件：見出しの横の登録ボタン／登録のウィザード */
.h1-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.h1-row h1 { margin: 0; }
#wz .wz-step h2 { font-size: 1.05rem; margin: .2rem 0 .5rem; }
#wz-steps li { user-select: none; }
#wz-sum { margin-top: .4rem; }
label.is-off { opacity: .45; }
.req-mark { color: var(--bad); font-weight: 700; margin-left: .15rem; }
.front-info { align-self: end; padding-bottom: .55rem; }
.wz-miss { margin: .4rem 0 0; padding-left: 1.2rem; }
tr.is-cur td { background: var(--accent-soft); }

/* hidden の付いた要素は、ボタン・ラベルの display より優先して隠す */
[hidden] { display: none !important; }