/* KiT 案件管理システム — OS追従（prefers-color-scheme）/ 白ベース・カード・シアン */
:root{
  --bg:#f5f7fa; --sf:#fff; --sf2:#f7f9fb; --ink:#172033; --sub:#64748b; --faint:#94a3b8;
  --line:#e4e8ee; --line2:#cbd3dd;
  --br:#2563eb; --br2:#1d4ed8; --brs:#eff4ff;
  --ac:#fffbeb; --vio:#7c3aed; --viols:#f5f3ff;
  --neg:#dc2626; --negs:#fef2f2; --pos:#059669; --poss:#ecfdf5; --am:#b45309; --ams:#fef3c7;
  --dark:#152232; --darksub:#8fa3b8;
  --sh:0 1px 2px rgba(15,23,42,.04);
  /* 数字用。等幅をやめ、桁揃えは font-variant-numeric に任せる */
  --num:"Roboto Mono","Noto Sans JP","Hiragino Kaku Gothic ProN",monospace;
  /* 粗利=薄い青 / 粗利率=薄い緑。売上と原価は黒のまま */
  --gross:#60a5fa; --grossr:#34d399;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#090e15; --sf:#151d27; --sf2:#111922; --ink:#e6edf5; --sub:#9fb0c2; --faint:#6b7d92;
    --line:#22303f; --line2:#334559;
    --br:#6d9bff; --br2:#8db3ff; --brs:#131f38;
    --ac:#2a2413; --vio:#a78bfa; --viols:#1e1a33;
    --gross:#7fb4ff; --grossr:#6ee7b7;
    --neg:#ff8b80; --negs:#2a1614; --pos:#5fd39b; --poss:#0e2620; --am:#e0b45a; --ams:#2e2513;
    --dark:#0d1620; --darksub:#7d93a8;
    --sh:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
/* ★スクロールバーの幅を常に空けておく。中身が多いページ（発注書・支払通知書）にはスクロールバーが出て、
   少ないページ（見積書・請求書）には出ないため、切り替えると中身が7px左右にずれていた
   （2026-09-16 石井さん「DOCUMENTS の位置とかずれませんか？」）。古いブラウザは常時表示で代用 */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable) { html{overflow-y:scroll} }
body{margin:0;background:var(--bg);color:var(--ink);font-size:13.5px;line-height:1.7;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-feature-settings:"palt"}
a{color:var(--br);text-decoration:none} a:hover{text-decoration:underline}
main{max-width:1400px;margin:0 auto;padding:18px 18px 80px}

/* ---- ヘッダー（.top）は header.css（経理 keiri/ と共通。2026-09-25）。.brand と .logo はログイン画面・取引先ページも使うのでここに残す ---- */
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--br),var(--br2));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.brand b{font-size:15px;font-weight:800}

/* ---- 見出し・共通 ---- */
.head{margin-bottom:14px}
h1{font-size:20px;font-weight:800;margin:0 0 3px;display:flex;align-items:baseline;gap:11px}
h1.en{font-size:28px;letter-spacing:.03em;margin-bottom:5px}
h2{font-size:15px;font-weight:800;margin:0}
.sub{font-size:12px;color:var(--faint);font-weight:400}
.lead{font-size:12px;color:var(--sub);margin:0}
.editlead{margin:0}
/* ★書類ページ（タブの上）の説明文は必ず2行分の高さを取る。文が1行で収まる種類（見積書・請求書）でも
   タブの位置が変わらないようにするため（2026-09-16 石井さん「タブのところがズレるのが嫌」）。
   いちばん長い支払通知書が幅900〜1920pxで2行に収まることを実測して 3.4em＝2行分にした */
.editlead.tabslead{min-height:3.4em}
.crumb{font-size:12px;color:var(--faint);margin-bottom:6px}
.crumb.big{font-size:17px;font-weight:800;letter-spacing:.04em;margin-bottom:5px}
.crumb.big a{color:var(--br)} .crumb.big span{color:var(--faint);font-weight:400;font-size:14px}
.empty{padding:26px;text-align:center;color:var(--faint)}
.mono{font-family:var(--num);color:var(--faint)}
.n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
.c{text-align:center;white-space:nowrap}
.dt{white-space:nowrap;font-family:var(--num);color:var(--sub);font-size:12px}
.mu{color:var(--faint);font-size:11px}
.pos{color:var(--pos);font-weight:700} .neg{color:var(--neg);font-weight:700} .cost{color:var(--vio)}
.spacer{flex:1}
.alert{background:var(--ams);color:var(--am);border-left:3px solid var(--am);padding:10px 15px;
  border-radius:0 7px 7px 0;font-size:12.5px;margin-bottom:14px}

/* ---- ボタン・入力 ---- */
.btn{font:inherit;font-size:12.5px;font-weight:700;padding:7px 17px;border:none;border-radius:9px;
  background:var(--br);color:#fff;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.08)} .btn.sm{padding:5px 13px;font-size:11.5px}
.btn.ghost{background:var(--sf);color:var(--sub);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--br);color:var(--br);filter:none}
.btn.doc{background:linear-gradient(135deg,#2f9e6b,#1d7c52);color:#fff;
  box-shadow:0 4px 12px rgba(31,124,83,.22)}
.mini{font:inherit;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:99px;cursor:pointer;
  border:1px dashed var(--line2);background:transparent;color:var(--vio)}
.mini:hover{background:var(--viols);border-style:solid}
.mini.big{font-size:11.5px;padding:5px 15px;color:var(--br)}
.mini.big:hover{background:var(--brs)}
.x{font-family:"Noto Sans JP",sans-serif;font-weight:400;font-size:11px;border:none;background:none;
  color:var(--faint);cursor:pointer;
  padding:2px 5px;border-radius:5px;margin-left:5px}
.x:hover{background:var(--negs);color:var(--neg)}
.filter{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.filter input,.filter select{font:inherit;font-size:13px;padding:7px 11px;border:1px solid var(--line2);
  border-radius:9px;background:var(--sf);color:var(--ink)}
input.f,select.f{font:inherit;color:var(--ink);background:transparent;border:1px solid transparent;
  border-radius:6px;padding:3px 7px;width:100%;min-width:0}
input.f:hover,select.f:hover{border-color:var(--line2);background:var(--sf)}
input.f:focus,select.f:focus{outline:none;border-color:var(--br);background:var(--sf);
  box-shadow:0 0 0 3px rgba(0,150,199,.18)}
input.f.err{border-color:var(--neg);background:var(--negs)}
input.f.sm{font-size:11px;color:var(--sub)}
input.money{text-align:right;font-family:var(--num);font-size:12.5px;width:100px}
input[type=date].f{font-family:var(--num);font-size:11.5px;color:var(--sub);width:auto}
input[type=checkbox].f{width:auto;accent-color:var(--br)}

/* ---- テーブル ---- */
.panel{background:var(--sf);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);overflow:hidden}
.ph2{padding:12px 18px;font-weight:800;font-size:13.5px;border-bottom:1px solid var(--line);
  display:flex;gap:10px;align-items:baseline}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{text-align:left;font-size:11px;letter-spacing:.06em;color:var(--faint);font-weight:700;
  padding:10px 13px;border-bottom:1px solid var(--line2);white-space:nowrap;background:var(--sf2)}
table.data td{padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr:hover td{background:var(--sf2)}
table.data tr:last-child td{border-bottom:none}
table.data tr.total td{font-weight:600;background:var(--sf2);border-top:1px solid var(--line2)}
table.cl td{vertical-align:top}
/* 取引先のメモ。屋号・活動名・連絡先はここ。名前欄には入れない */
table.cl td:first-child{min-width:260px}
input.f.sm.note{font-size:10.5px;color:var(--sub);font-style:normal;opacity:.85}
input.f.sm.note:focus{opacity:1;font-size:11px}
table.cl input.f.sm.note::placeholder{opacity:.5}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot.ok{background:var(--pos)} .dot.warn{background:var(--am)} .dot.bad{background:var(--neg)}
.st{font-size:11px;font-weight:700;padding:2px 11px;border-radius:99px;white-space:nowrap}
.s見積中{background:var(--ams);color:var(--am)} .s受注{background:var(--brs);color:var(--br)}
.s進行中{background:var(--brs);color:var(--br)} .s完了{background:var(--viols);color:var(--vio)}

/* ---- 案件詳細: 全体サマリー ---- */
.total{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:16px 19px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;
  margin-bottom:13px;box-shadow:0 1px 1px rgba(15,23,42,.03)}
.total .tl{flex:1 1 380px;min-width:0}
.total input.f.big{font-size:19px;font-weight:800;color:var(--ink);padding:2px 7px;margin-left:-8px}
.total input.f.big:hover,.total input.f.big:focus{background:var(--sf2);border-color:var(--line2)}
.total .meta{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:5px;
  padding-left:16px;font-size:11px;color:var(--sub)}
.total .meta>select.f:first-child{margin-left:-8px}
.total .meta label{display:flex;align-items:center;gap:4px}
.total .meta input.f,.total .meta select.f{color:var(--ink);width:auto;font-size:11.5px}
.total .meta input.f:hover,.total .meta select.f:hover,
.total .meta input.f:focus,.total .meta select.f:focus{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.total .meta input.f.err{background:var(--negs);border-color:var(--neg)}
.total .tr{display:flex;gap:28px;text-align:right;flex-wrap:wrap;align-items:flex-start}
.total .tr>div{min-width:0}
.total .tr span{display:block;font-size:11px;color:var(--sub);text-align:left}
.total .tr b{font-size:20px;font-weight:500;font-family:var(--num);color:var(--ink);
  line-height:1.35;font-variant-numeric:tabular-nums}
.total .tr b.v{color:var(--vio)} .total .tr b.pos{color:var(--pos)}
.total .tr b.neg{color:var(--neg)}
.total .tr .rate b{color:var(--br)}
.bar{display:flex;gap:8px;align-items:center;margin:20px 0 16px;padding-left:20px;flex-wrap:wrap}
.bar .btn{height:32px;display:inline-flex;align-items:center}


/* ---- 請求先カード ---- */
.gcard{margin:0 0 12px;background:var(--sf);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--sh);overflow:hidden;position:relative}
.gcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--faint)}
.gcard.ok::before{background:var(--pos)} .gcard.warn::before{background:var(--am)} .gcard.bad::before{background:var(--neg)}
.gcard.unset::before{background:var(--neg)}
.gh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 17px 11px 19px;background:var(--brs);border-bottom:1px solid var(--line);cursor:pointer}
.gcard.unset .gh{background:var(--negs)}
.gl{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* 取引先・見積番号・請求予定日は、ラベル16px＋値26pxの同じ形にして高さを揃える */
.gf{display:flex;flex-direction:column;justify-content:flex-start;height:46px;padding:2px 0;
  border:none;background:none;text-align:left;font:inherit}
.gf>span{display:block;height:16px;line-height:16px;font-size:10.5px;font-weight:700;
  color:var(--sub);margin:0;padding:0}
.gf>input,.gf>b,.gf>.cbox{height:26px;line-height:26px;display:block;margin:0}
.gf>.cbox>input{height:26px;line-height:20px}

.cnum{margin-right:10px;font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--br);padding:2px 9px;border-radius:4px}
.gcard.unset .cnum{background:var(--neg)}
.gl h3{margin:0}
input.f.gname{font-size:16px;font-weight:800;width:100%;margin-left:0;padding-right:24px}
/* ---- 取引先ピッカー ---- */
.cbox{position:relative;display:block}
table.rows .cbox input.f{padding-right:23px}
.gf>.cbox{width:196px;margin-left:-8px}
.cbb{position:absolute;right:1px;top:1px;bottom:1px;width:21px;border:none;background:none;
  cursor:pointer;color:var(--faint);font-size:11px;line-height:1;padding:0;border-radius:0 5px 5px 0}
.cbb:hover{color:var(--br)}
.cbox.on .cbb{color:var(--br)}
.cbl{display:none;position:absolute;z-index:40;top:calc(100% + 3px);left:0;min-width:230px;
  max-height:280px;overflow:auto;background:var(--sf);border:1px solid var(--line2);
  border-radius:9px;box-shadow:0 12px 30px rgba(15,23,42,.16);padding:4px}
.cbox.on .cbl{display:block}
.cbo{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:none;background:none;text-align:left;font:inherit;font-size:12.5px;font-weight:500;
  color:var(--ink);padding:6px 9px;border-radius:6px;cursor:pointer}
.cbo:hover{background:var(--brs);color:var(--br2)}
.cbo i{font-style:normal;font-size:10.5px;color:var(--faint);flex:none}
.cbe{padding:8px 9px;font-size:11.5px;color:var(--faint)}
input[data-map]::-webkit-calendar-picker-indicator{display:none!important}
input.f.gtitle{font-size:12px;color:var(--ink);width:104px}
input.f.gdate{width:auto;margin-left:-8px;font-size:14px;font-weight:700;
  font-family:var(--num)}
.gr{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--sub);flex-wrap:wrap}
.gh .sg{margin-right:22px}
.gnums{display:flex;gap:28px;text-align:right;align-items:center;margin-right:26px}
.gnums>div{min-width:0}
.gnums span{white-space:nowrap;text-align:left}
.gnums span{display:block;font-size:10.5px;color:var(--sub);font-weight:700;letter-spacing:.02em}
.gnums b{display:block;font-family:var(--num);font-size:15px;font-weight:500;
  color:var(--ink);line-height:1.4;font-variant-numeric:tabular-nums}
.gnums b.v{color:var(--vio)} .gnums b.pos{color:var(--pos)}
.gnums b.neg{color:var(--neg)} .gnums b.rt{color:var(--br)}
.chev{color:var(--faint);font-size:11px;transition:transform .18s}
.gcard.fold .gbody{display:none} .gcard.fold .chev{transform:rotate(-90deg)}
table.rows tr.radd>td{padding:9px 11px 9px 52px;border-bottom:1px solid var(--line)}
tr.radd .mini{color:var(--sub)}
.gfoot{padding:9px 17px 13px 34px}
.addgroup{padding-left:20px;margin:14px 0 4px}

/* ---- 明細（2段構成） ---- */
table.rows{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
table.rows thead th{text-align:left;font-size:10px;letter-spacing:.07em;color:#667b87;font-weight:800;
  padding:9px 11px;background:var(--sf2);border-bottom:1px solid var(--line)}
table.rows thead th:first-child{padding-left:34px}
table.rows thead th:last-child{padding-right:42px}
table.rows thead th.n{text-align:right} table.rows thead th.c{text-align:center}
table.rows td{padding:4px 11px;vertical-align:middle}
table.rows td:first-child{padding-left:34px}
table.rows tr>td:last-child{padding-right:17px}
table.rows col.h1{width:26%} table.rows col.h3{width:90px}
table.rows col.h4,table.rows col.h5{width:128px}
table.rows col.h7{width:150px}
tr.r1 td{padding-top:7px} tr.r2 td{padding-bottom:7px;border-bottom:1px solid var(--line)}
tr.r1.sale td,tr.r2.sale td{background:var(--sf2)}
td.nm{font-weight:700;border-bottom:1px solid var(--line);vertical-align:middle}
tr.cost td.nm{font-weight:400;padding-left:52px;white-space:nowrap}
tr.cost td.nm>.br{display:inline-block;vertical-align:middle}
tr.cost td.nm>input.f{display:inline-block;vertical-align:middle;width:calc(100% - 24px)}
tr.cost td.nm input.f{color:var(--sub)}
/* 入力欄は内側に8px(padding 7＋border 1)持っていて、そのぶん文字が
   セルの余白より内側に入る。見出しと文字を揃えるために打ち消す */
tr.r1.sale td.nm>input.f{margin-left:-8px}
tr.r1 td:nth-child(2)>input.f{margin-left:-8px}
tr.r1 td.bg>input.f,tr.r1 td.ac>input.f{margin-right:-8px}
.br{color:var(--vio);margin-right:5px}
td.net{font-weight:500;color:var(--br);font-family:var(--num)}
td.act{white-space:nowrap}
td.wh{font-size:10.5px;color:var(--faint);font-family:var(--num)}
table.rows tr.r2>td.wh{padding-right:42px}
.roll{font-size:11px;color:var(--sub);white-space:nowrap;text-align:right}
.roll b{display:inline;font-family:var(--num);font-size:12px;font-weight:500;margin-left:4px}
.roll b.cost{color:var(--vio)} .roll b.pos{color:var(--pos)} .roll b.neg{color:var(--neg)}
.roll i{font-style:normal;font-family:var(--num);color:var(--faint);margin-left:5px}
.roll .mu{color:var(--faint)}
.ml{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--faint);margin-right:7px}
tr.r2 input.f{width:calc(100% - 44px);font-size:11.5px;color:var(--sub);display:inline-block}
select.f.pill-sel{font-size:10.5px;font-weight:700;border-radius:99px;text-align:center;padding:1px 6px;width:auto}
select.f.pill-sel.k{background:var(--ams);color:var(--am)}
select.f.pill-sel.hh{background:var(--bg);color:var(--sub)}
select.f.pill-sel.u{background:var(--neg);color:#fff}

/* ---- 支払カード ---- */
.pay{margin:22px 0 0;background:var(--sf);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--sh);overflow:hidden}
.ph{padding:15px 19px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;align-items:center}
.ph .tr{display:flex;gap:24px;text-align:right;flex-wrap:wrap}
.ph .tr span{display:block;font-size:11px;color:var(--sub)}
.ph .tr b{font-size:18px;font-weight:500;font-family:var(--num)}
.tabs{display:flex;gap:5px;margin-top:8px}
.tb{font:inherit;font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line2);background:var(--sf);color:var(--sub)}
.tb:hover{border-color:var(--vio);color:var(--vio)} .tb.on{background:var(--vio);border-color:var(--vio);color:#fff}
/* 支払カードの最小幅 360px（R7 ③：金額が切れないように。1280px の画面で3枚、狭ければ2枚→1枚）。★下の「支払カード」の2つ目の .cards も同じ値 */
.cards{padding:15px 19px;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
/* ★支払カードは予算と実行の2列。経費（立替）は実行だけに入れる */
/* ★table-layout:fixed にしないと、長い見出しでカードの外へはみ出す */
table.pt2{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:9px;font-size:11.5px}
table.pt2 th{text-align:left;font-weight:500;color:var(--sub);padding:4px 0;width:38%}
table.pt2 th i{display:block;font-style:normal;font-size:9.5px;color:var(--faint);font-weight:400}
table.pt2 thead th{font-size:10px;font-weight:700;color:var(--faint);text-align:right;
  padding-bottom:3px;border-bottom:1px solid var(--line)}
table.pt2 thead th:first-child{border-bottom:none}
/* 金額は1行のまま、省略（…）しない（R7 ③。¥1,450,0… と切れていた） */
table.pt2 td{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;
  padding:4px 0 4px 8px;white-space:nowrap;width:31%}
table.pt2 tr.wd td{color:var(--neg)}
table.pt2 tr.ex th{color:var(--am)}
table.pt2 tr.ex td{padding-top:2px;padding-bottom:2px}
table.pt2 tr.tt th,table.pt2 tr.tt td{border-top:1px solid var(--line2);padding-top:6px;
  font-weight:700;color:var(--ink);font-size:13px}
table.pt2 .mu{color:var(--faint)}
table.pt2 input.f.exp{width:100%;text-align:right;border:1px solid var(--line2);border-radius:6px;
  padding:3px 7px;font-size:12px;background:var(--sf)}
table.pt2 input.f.exp:hover{border-color:var(--am)}
table.pt2 input.f.exp:focus{border-color:var(--br);background:var(--sf)}
table.pt2 .tx{font-size:9.5px;margin-left:5px;padding:0 5px;border:1px solid var(--line2);
  border-radius:99px;background:var(--sf);color:var(--sub);cursor:pointer}
table.pt2 .tx:hover{border-color:var(--br);color:var(--br)}
.card{border:1px solid var(--line);border-radius:11px;padding:11px 15px}
.card:hover{border-color:var(--line2)}
.ch{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:6px}
.ch b{font-size:13px} .ch small{display:block;font-size:10px;color:var(--faint);font-weight:400}
/* 右上の区分（個人／法人）の選択欄は .pill と同じ位置。名前が長くても縮めない（R7 ②） */
.ch>select.f.pill-sel{flex:none}
.card dl{margin:0;font-family:var(--num);font-size:11.5px}
.card dl div{display:flex;justify-content:space-between;color:var(--sub);padding:1px 0}
.card dl dd{margin:0} .card dl .wd{color:var(--neg)} .card dl .mu{font-size:10px;color:var(--faint)}
.card dl .tt{border-top:1px solid var(--line2);margin-top:5px;padding-top:5px;font-weight:800;font-size:14px;color:var(--ink)}
.card dl .tt dd{color:var(--br)}
.pd{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);
  border-top:1px solid var(--line);margin-top:7px;padding-top:5px;font-family:var(--num)}
.pill{font-size:10.5px;font-weight:700;padding:1px 9px;border-radius:99px;white-space:nowrap}
.pill.k{background:var(--ams);color:var(--am)} .pill.hh{background:var(--bg);color:var(--sub);border:1px solid var(--line2)}
.pill.u{background:var(--neg);color:#fff}

/* ---- 工程表 ---- */
.gantt{overflow:hidden}
.gtools{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--sf2);font-size:11.5px}
.gtools .lb{font-weight:700;color:var(--sub);margin-right:3px}
.gtools .sc{padding:4px 13px;border:1px solid var(--line2);border-radius:99px;background:var(--sf);
  color:var(--sub);font-weight:700;font-size:11.5px}
.gtools .sc:hover{border-color:var(--br);color:var(--br);text-decoration:none}
.gtools .sc.on{background:var(--br);border-color:var(--br);color:#fff}
.gtools .hint{margin-left:auto;color:var(--faint);font-size:11px}

.gwrap{display:flex;align-items:stretch;max-height:560px;overflow-y:auto}
.gleft{flex:0 0 250px;border-right:1px solid var(--line2);background:var(--sf);position:sticky;left:0;z-index:6}
.gright{flex:1;min-width:0;overflow-x:auto}
.gleft .gh,.gright .ghead{height:44px;background:var(--sf2);border-bottom:1px solid var(--line2);
  position:sticky;top:0;z-index:5}
.gleft .gh{display:flex;align-items:center;padding:0 16px;font-size:10.5px;font-weight:700;
  color:var(--faint);letter-spacing:.06em}
.gright .ghead{display:flex}
.ghead .gc{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-left:1px solid var(--line);font-size:11px;color:var(--sub)}
.ghead .gc b{font-weight:700} .ghead .gc i{font-style:normal;font-size:9.5px;color:var(--faint)}
.ghead .gc.off{background:var(--sf2)}
.gl{height:46px;display:flex;align-items:center;gap:0;padding:0 14px;
  border-bottom:1px solid var(--line);font-size:12.5px}
.gl .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--ink)}
.gl .s{flex:none;font-size:10.5px;color:var(--faint);margin-left:7px}
.gl .tw{flex:none}
.gl.gsub{background:var(--sf2);font-size:11.5px;color:var(--sub)}
.gl.gsub b{font-size:12px;color:var(--ink)}
.gl.gsub em{font-style:normal;color:var(--faint);margin-left:6px;font-size:11px}
.gl.gsub.s1{padding-left:26px} .gl.gsub.s2{padding-left:44px}
.gl .br{color:var(--line2);margin-right:6px;font-family:var(--num);flex:none}
.gl.hide,.gtrack.hide{display:none}
.gtrack{height:46px;position:relative;border-bottom:1px solid var(--line)}
.gtrack.gsub{background:var(--sf2)}
.gtrack .cols{position:absolute;inset:0;display:flex}
.gtrack .cols i{flex:none;border-left:1px solid var(--line)}
.gtrack .cols i.off{background:rgba(15,23,42,.03)}
.track .bar,.gtrack .bar{position:absolute;top:12px;height:22px;border-radius:6px;display:flex;
  align-items:center;padding:0 9px;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;
  overflow:hidden;margin:0}
.b-担当{background:linear-gradient(90deg,#7c6bc4,#5b4fa3)}
.pt{position:absolute;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;border-radius:2px}
/* ★クラス名を pt-inv / pt-pay にしている。`pay` だと支払カードの .pay と当たって
   margin と border-radius を拾い、凡例の菱形だけ下にずれる（2026-09-05 修正） */
.pt.pt-inv{background:var(--pos)} .pt.pt-pay{background:var(--vio)}
.pt.st{position:static;transform:rotate(45deg);display:inline-block;margin-right:2px}
.ptlb{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;
  font-family:var(--num);color:var(--faint);white-space:nowrap}
.gtrack .todayline{position:absolute;top:0;bottom:0;width:2px;background:var(--neg);opacity:.55}
.glegend{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);
  font-size:11px;color:var(--sub);flex-wrap:wrap;align-items:center}
.glegend i.lb{display:inline-block;width:16px;height:9px;border-radius:3px;margin-right:5px;vertical-align:middle}
.glegend i.tri{display:inline-block;width:0;height:0;border-left:6px solid transparent;
  border-right:6px solid transparent;border-top:9px solid var(--neg);margin-right:5px;vertical-align:middle}
.mile{position:absolute;top:6px;width:0;height:0;border-left:7px solid transparent;
  border-right:7px solid transparent;border-top:10px solid var(--neg)}

/* ---- 支払カード ---- */
.pay{margin:22px 0 0;background:var(--sf);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--sh);overflow:hidden}
.ph{padding:15px 19px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;align-items:center}
.ph .tr{display:flex;gap:24px;text-align:right;flex-wrap:wrap}
.ph .tr span{display:block;font-size:11px;color:var(--sub)}
.ph .tr b{font-size:18px;font-weight:500;font-family:var(--num)}
.tabs{display:flex;gap:5px;margin-top:8px}
.tb{font:inherit;font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line2);background:var(--sf);color:var(--sub)}
.tb:hover{border-color:var(--vio);color:var(--vio)} .tb.on{background:var(--vio);border-color:var(--vio);color:#fff}
/* ★こちらが後に書いてあるので効いている。最小幅は上の .cards と同じ 360px（R7 ③。前は 248px で金額が切れていた） */
.cards{padding:15px 19px;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:11px}
.card{border:1px solid var(--line);border-radius:11px;padding:11px 15px}
.card:hover{border-color:var(--line2)}
.ch{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:6px}
.ch b{font-size:13px} .ch small{display:block;font-size:10px;color:var(--faint);font-weight:400}
.card dl{margin:0;font-family:var(--num);font-size:11.5px}
.card dl div{display:flex;justify-content:space-between;color:var(--sub);padding:1px 0}
.card dl dd{margin:0} .card dl .wd{color:var(--neg)} .card dl .mu{font-size:10px;color:var(--faint)}
.card dl .tt{border-top:1px solid var(--line2);margin-top:5px;padding-top:5px;font-weight:800;font-size:14px;color:var(--ink)}
.card dl .tt dd{color:var(--br)}
.pd{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);
  border-top:1px solid var(--line);margin-top:7px;padding-top:5px;font-family:var(--num)}
.pill{font-size:10.5px;font-weight:700;padding:1px 9px;border-radius:99px;white-space:nowrap}
.pill.k{background:var(--ams);color:var(--am)} .pill.hh{background:var(--bg);color:var(--sub);border:1px solid var(--line2)}
.pill.u{background:var(--neg);color:#fff}

/* ---- 工程表 ---- */
.gantt{overflow:hidden}
.gscroll{overflow-x:auto} .gtable{min-width:880px}
.gmonths,.growrow{display:grid;grid-template-columns:250px 1fr}
.gmonths{border-bottom:1px solid var(--line2);background:var(--sf2)}
.gmonths .lead2{padding:10px 16px;font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.06em}
.mrow{display:grid}
.mrow .m{text-align:center;font-size:11px;font-weight:700;color:var(--sub);padding:10px 0;border-left:1px solid var(--line)}
.growrow{border-bottom:1px solid var(--line)}
.growrow:hover{background:var(--sf2)}
.growrow .lead2{padding:9px 16px;min-width:0}
.growrow .lead2 .t{font-size:13px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.growrow .lead2 .s{font-size:11px;color:var(--faint)}
.track{position:relative;height:46px}
.track .cols{position:absolute;inset:0;display:grid}
.track .cols i{border-left:1px solid var(--line)}
.track .bar{position:absolute;top:17px;height:21px;border-radius:6px;display:flex;align-items:center;
  padding:0 9px;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;
  transition:left .25s ease,width .25s ease;margin:0}
.b-進行中{background:linear-gradient(90deg,#0096c7,#4cc4e8)}
.b-受注{background:linear-gradient(90deg,#0b7285,#0096c7)}
.b-見積中{background:linear-gradient(90deg,#94a3b8,#b6c2d1)}
.b-完了{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.mile{position:absolute;top:3px;width:0;height:0;z-index:2;border-left:7px solid transparent;
  border-right:7px solid transparent;border-bottom:11px solid var(--neg);transition:left .25s ease}
.todayline{position:absolute;top:0;bottom:0;width:2px;background:var(--neg);opacity:.45;z-index:1}
.glegend{display:flex;gap:15px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--sub)}
.glegend span{display:inline-flex;align-items:center;gap:6px}
.glegend i.lb{width:16px;height:9px;border-radius:3px;display:inline-block}
.glegend i.tri{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:9px solid var(--neg)}

/* ---- ダイアログ ---- */
.dlg{border:none;border-radius:14px;padding:0;background:var(--sf);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:520px;width:92vw}
.dlg::backdrop{background:rgba(15,23,42,.5)}
.dlg form{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px 15px}
.dlg h2{grid-column:1/-1}
.dlg label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--sub);font-weight:600}
.dlg label.wide{grid-column:1/-1}
.dlg label.chk{grid-column:1/-1;flex-direction:row;align-items:center;gap:7px;font-size:12.5px}
.dlg input,.dlg select{font:inherit;font-size:13.5px;padding:7px 10px;border:1px solid var(--line2);
  border-radius:9px;background:var(--sf);color:var(--ink)}
.dlg input[type=checkbox]{width:auto;accent-color:var(--br)}
.dlg .hint{grid-column:1/-1;font-size:11.5px;color:var(--faint);margin:0}
.dlgfoot{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;margin-top:4px}

@media(max-width:860px){
  table.rows thead{display:none}
  table.rows{table-layout:auto}
  .total{flex-direction:column;align-items:stretch}
}

/* ================= 追加: ログイン / KPI / ステータスタブ / 一覧の強調 ================= */
.loginbody{display:grid;place-items:center;min-height:100vh;background:var(--bg);margin:0}
.loginbox{background:var(--sf);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);
  padding:34px 32px;width:min(400px,92vw);display:flex;flex-direction:column;gap:14px}
.lgbrand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800}
.lgsub{margin:0;font-size:12.5px;color:var(--sub)}
.lgerr{margin:0;font-size:12.5px;color:var(--neg);background:var(--negs);padding:8px 12px;border-radius:8px}
.loginbox label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--sub)}
.loginbox input{font:inherit;font-size:14.5px;padding:10px 12px;border:1px solid var(--line2);
  border-radius:10px;background:var(--sf);color:var(--ink)}
.loginbox input:focus{outline:none;border-color:var(--br);box-shadow:0 0 0 3px rgba(0,150,199,.18)}
.loginbox .btn{margin-top:6px;padding:11px;font-size:14px}

/* 一覧の視認性 */
table.data.zebra tbody tr:nth-child(even) td{background:var(--sf2)}
table.pj tbody tr td{background:var(--sf)}
/* 1件おきの灰色（tr.alt）は 2026-09-15 にやめた（石井さん「白でお願いします」）。灰色は内訳の行だけ */
table.data.zebra tbody tr:hover td{background:var(--brs)}
table.data td.pjname{font-weight:700}
table.data td.pjname a{color:var(--ink)}
table.data td.pjname a:hover{color:var(--br)}
tr.warnrow td:first-child{box-shadow:inset 3px 0 0 var(--neg)}
tr.warnrow td.pjname{font-weight:800}

/* ===== KPIカード（大きく・余白たっぷり・上質なトーン） ===== */
:root{ --dull-vio:#6d5aa8; --dull-pos:#2f7d5c; }
@media (prefers-color-scheme: dark){ :root{ --dull-vio:#a394d8; --dull-pos:#6ac49a; } }
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;margin-bottom:22px}
.kpis .kpi{background:var(--sf);border:1px solid var(--line);border-radius:12px;
  padding:20px 24px 22px;box-shadow:0 1px 1px rgba(15,23,42,.03)}
.kpis .kpi .lb{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint);
  font-weight:500;letter-spacing:.02em;margin-bottom:2px}
.kpis .kpi .lb svg{width:14px;height:14px;opacity:.75;flex:none}
/* ★色は案件詳細の予実グリッド（.sg）と同じ規則にそろえる。
   売上=黒 / 原価=黒 / 粗利=薄い青 / 粗利率=薄い緑、マイナスだけ赤。
   ここだけ別の配色にすると、同じ4指標なのに画面ごとに意味が変わって見える（2026-09-05） */
.kpis .kpi b{display:block;font-size:31px;font-weight:500;line-height:1.25;letter-spacing:-.02em;
  font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.kpis .kpi b .cur{font-weight:500;letter-spacing:0}
.kpis .kpi b.cost{color:var(--ink)}
.kpis .kpi b.pos{color:var(--gross)}
.kpis .kpi b.rt{color:var(--grossr)}
.kpis .kpi b.neg{color:var(--neg)}
.kpis .kpi.k-cost .lb svg{color:var(--dull-vio);opacity:1}
.kpis .kpi.k-pos .lb svg{color:var(--dull-pos);opacity:1}
@media (prefers-color-scheme: dark){ .kpis .kpi{box-shadow:none} }

/* ===== ステータスタブ（サイズ・書体を統一） ===== */
.tabbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.stabs{display:flex;gap:6px;flex-wrap:wrap}
.stab{font-size:12.5px;font-weight:700;padding:7px 17px;border-radius:99px;border:1px solid var(--line2);
  background:var(--sf);color:var(--sub);white-space:nowrap;line-height:1.5}
.stab:hover{border-color:var(--br);color:var(--br);text-decoration:none}
.stab em{font-style:normal;font-family:var(--num);font-size:11px;opacity:.65;margin-left:5px}
.stab.on{background:var(--br);border-color:var(--br);color:#fff}
.stab.on em{opacity:.85}
.stab.warn{color:var(--am)} .stab.warn.on{background:var(--am);border-color:var(--am);color:#fff}
.srch{margin-left:auto}
.srch input{font:inherit;font-size:13px;padding:7px 14px;border:1px solid var(--line2);border-radius:99px;
  background:var(--sf);color:var(--ink);min-width:215px}
.srch input:focus{outline:none;border-color:var(--br);box-shadow:0 0 0 3px rgba(0,150,199,.18)}

/* ===== No列を細く・左寄せ ===== */
table.data th.no,table.data td.no{width:48px;text-align:left;padding-left:14px;padding-right:4px;
  font-family:var(--num);color:var(--faint);font-size:12px}

/* ===== ヘッダーの期セレクタ ===== */
.fysel{margin-left:auto;display:flex;align-items:center}
.fysel select{font:inherit;font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:99px;
  border:1px solid var(--line2);background:var(--brs);color:var(--br);cursor:pointer}
.fysel select:hover{border-color:var(--br)}
.fysel select:focus{outline:none;box-shadow:0 0 0 3px rgba(0,150,199,.18)}
.saved{margin-left:14px}
@media(max-width:860px){ .fysel{margin-left:0} .saved{display:none} }


/* ===== プロジェクト一覧: 1枚の白いシート ===== */
.sheet{background:var(--sf);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 1px 1px rgba(15,23,42,.03)}
.sheet thead th:first-child{border-top-left-radius:9px}
.sheet thead th:last-child{border-top-right-radius:9px}
.sheet tbody tr:last-child td:first-child{border-bottom-left-radius:9px}
.sheet tbody tr:last-child td:last-child{border-bottom-right-radius:9px}
table.pj{table-layout:fixed;width:100%}
table.pj col.c-no{width:52px}
table.pj col.c-mny{width:146px} table.pj col.c-rate{width:106px} table.pj col.c-dt{width:154px}
.sheet thead th{position:sticky;top:57px;z-index:8;background:var(--sf2);
  box-shadow:inset 0 -1px 0 var(--line2)}

/* 表の中の区切り見出し行 */
tr.grp td{background:var(--sf2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line);
  padding-top:11px;padding-bottom:11px;cursor:pointer;font-family:var(--num);
  font-weight:800;color:var(--sub);font-size:12.5px}
tr.grp:first-child td{border-top:none}
tr.grp:hover td{background:var(--brs)}
tr.grp td:first-child{font-family:inherit}
tr.grp .gl{display:flex;align-items:center;gap:10px}
/* グループの区切りは上の余白で作る（段落） */
tr.grp td{padding-top:20px}
tr.grp:first-child td{padding-top:11px}
/* 項目行はグループの子。└ を付けて一段下げる */
table.pj td.pjname{padding-left:0}
table.pj td.pjname .br,table.pj td.cli .br{color:var(--line2);
  font-family:var(--num);font-size:13px;margin-right:8px;font-weight:400}
/* ▼ 取引先ごとの内訳をひらく */
.tw{border:none;background:none;cursor:pointer;color:var(--faint);font-size:11px;line-height:1;
  padding:0;margin-right:3px;width:20px;height:20px;border-radius:5px;display:inline-block;
  vertical-align:middle;transform:rotate(-90deg);transition:transform .18s,background .15s,color .15s}
.tw:hover{color:var(--br);background:var(--brs)}
table.pj tr.openable{cursor:pointer}
table.pj tr.openable:hover .tw{color:var(--br)}
.tw.on{transform:rotate(0deg);color:var(--br)}
table.pj tr.subrow td{background:var(--sf2);font-size:12px;color:var(--sub);
  padding-top:6px;padding-bottom:6px}
table.pj tr.subrow td.cli{padding-left:34px;font-weight:700;color:var(--ink)}
table.pj tr.subrow td.cli em{font-style:normal;font-weight:400;color:var(--faint);font-size:11.5px;margin-left:7px}
table.pj tr.subrow td.cli .unset{font-style:normal;color:var(--neg);font-weight:700}
table.pj tr.subrow.hide{display:none}
table.pj tr.subrow:hover td{background:var(--brs)}
tr.grp .chev{color:var(--faint);font-size:11px;transition:transform .18s;display:inline-block}
tr.grp.fold .chev{transform:rotate(-90deg)}
tr.grp .gn{font-size:12px;color:var(--faint);font-family:var(--num);font-weight:500}
/* ★一覧の表も予実グリッドと同じ配色にそろえる（2026-09-05）。
   売上=黒 / 原価=黒 / 粗利=薄い青 / 粗利率=薄い緑、マイナスだけ赤。
   .pos .cost はほかの画面でも使っている共通クラスなので、ここは .sheet 内に限定して上書きする */
.sheet td.cost{color:var(--ink);font-weight:400}
.sheet td.pos{color:var(--gross);font-weight:500}
.sheet td.neg{color:var(--neg);font-weight:500}
.sheet td.rt{color:var(--grossr)}
tr.grp td.cost{color:var(--ink)} tr.grp td.pos{color:var(--gross)}
tr.grp td.neg{color:var(--neg)} tr.grp td.rt{color:var(--grossr)}
tr.pjrow.hide{display:none}

/* ===== No列 ===== */
table.data th.no,table.data td.no{text-align:left;padding-left:16px;padding-right:4px;
  font-family:var(--num);color:var(--faint);font-size:12px}


/* ================= 書類（見積・発注・支払通知・請求） ================= */
/* ★一覧とビューを1枚の枠に入れ、間は1本の境界線で分ける。
   .docwrap に overflow は付けない（付けると一覧の position:sticky の基準がここになり、
   固定が効かなくなる。`.sheet` で2回踏んだのと同じ罠）。角丸は端の子側で処理する */
.docwrap{display:grid;grid-template-columns:352px minmax(0,1fr);align-items:stretch;
  background:var(--sf);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 1px rgba(15,23,42,.03)}
/* ★境界線は一覧側ではなく右側（.docmain）に引く。
   一覧に引くと、件数が少ないときに線が一覧の高さで途切れて枠と繋がらない。
   一覧は align-self:start で伸ばさず、sticky を効かせたまま残す */
.doclist{background:transparent;border:none;border-radius:0;align-self:start;
  box-shadow:none;position:sticky;top:66px;
  display:flex;flex-direction:column;max-height:calc(100vh - 104px)}
.doclist .dh{padding:13px 18px;background:var(--sf2);border-bottom:1px solid var(--line);
  font-size:12px;font-weight:800;flex:none;border-top-left-radius:11px}
/* 左右に行の操作ボタンの居場所を空ける。紙はその内側で中央に置く */
.docmain{padding:18px 56px 26px 84px;min-width:0;border-left:1px solid var(--line)}
@media(max-width:1240px){ .docmain{padding-left:74px;padding-right:48px} }
.docmain>.empty{padding:60px 0;text-align:center;color:var(--faint)}
@media(max-width:1000px){
  .doclist{border-bottom:1px solid var(--line);position:static;max-height:none;display:block}
  .doclist .dscroll{overflow:visible}
  .doclist .dh{border-top-right-radius:11px}
  .docmain{padding:16px 48px 16px 74px;border-left:none}
}
.doclist .dscroll{overflow:auto;min-height:0}
.doclist .di{display:block;padding:12px 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.doclist .di:last-child{border-bottom:none}
.doclist .di:hover{background:var(--brs);text-decoration:none}
.doclist .di.on{background:var(--brs);box-shadow:inset 3px 0 0 var(--br)}
.doclist .d1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.doclist .d1 b{font-size:13px}
.doclist .dno{font-family:var(--num);font-size:10.5px;color:var(--faint)}
.doclist .d2{font-size:11px;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doclist .d3{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.doclist .d3 b{font-family:var(--num);font-size:12.5px}
.doclist .dmore{display:block;padding:12px 18px;font-size:11px;color:var(--br);
  border-top:1px solid var(--line);background:var(--sf2)}
.docedit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;
  background:var(--sf);border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  margin-bottom:14px;box-shadow:0 1px 1px rgba(15,23,42,.03)}
.docedit label{display:block}
.docedit label.wide{grid-column:1/-1}
.docedit label>span{display:block;font-size:10.5px;font-weight:700;color:var(--sub);margin-bottom:2px}
.docedit .f{border:1px solid var(--line2);border-radius:7px;padding:6px 9px}
.docedit .acts{grid-column:1/-1;display:flex;gap:9px;justify-content:flex-end}

/* --- 書類の上のバー --- */
/* ★高さを固定する。ボタンの数が種類ごとに違っても紙の始まる位置を同じにするため
   （2026-09-16 石井さん「枠の大きさ・題名の位置が揃っていないのが気になる」） */
.docbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:37px}
.docbar .dbst{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--sub)}
.docbar .dbst select.f{width:auto;border:1px solid var(--line2);background:var(--sf);border-radius:7px;padding:5px 9px}
.docbar .spacer{flex:1}

/* --- 紙の上で直接編集する ---
   ★入力欄は「下線だけ」。枠を出すと紙に見えなくなる。印刷では下線も消す */
.sheetA4 .qf{font:inherit;color:inherit;background:transparent;border:none;border-bottom:1px dashed transparent;
  border-radius:0;padding:1px 2px;margin:0;width:100%;min-width:0}
.sheetA4 .qf:hover{border-bottom-color:#cbd5e1;background:rgba(37,99,235,.03)}
.sheetA4 .qf:focus{outline:none;border-bottom-color:var(--br);background:rgba(37,99,235,.06);box-shadow:none}
.sheetA4 .qf::placeholder{color:#9aa7b6;opacity:1}
.sheetA4 textarea.w-note::placeholder{color:#9aa7b6;opacity:1}
.sheetA4 .w-no,.sheetA4 .w-date{font-family:var(--num);width:150px}
.sheetA4 .w-to{font-size:16px;font-weight:800;color:#1b2430;width:100%}
.sheetA4 .w-attn{font-size:16px;font-weight:800;width:100%}
/* 紙の上の 御中／様 の選択（法人だけ出る） */
.sheetA4 select.qf{cursor:pointer}
.sheetA4 .w-hon{width:auto;font-size:13px;font-weight:700;color:#1b2430;padding:0 2px}
.sheetA4 .w-sub{font-size:13px;font-weight:700;color:#334155}
.sheetA4 .w-item{width:calc(100% - 20px);display:inline-block}
.sheetA4 .w-head{font-weight:800;width:100%}
.sheetA4 .w-body{width:100%;font-size:12px}
.sheetA4 .w-qty{font-family:var(--num);text-align:right;width:34px;display:inline-block}
.sheetA4 .w-unit{width:34px;display:inline-block;text-align:left;margin-left:3px}
.sheetA4 .w-price{font-family:var(--num);text-align:right}
.sheetA4 textarea.w-note{width:100%;font:inherit;font-size:11.5px;line-height:1.7;color:#334155;
  resize:vertical;border-bottom:1px dashed #cbd5e1}
.qsetlink{display:inline-block;margin-top:6px;font-size:10.5px;color:var(--br)}

/* 行の操作は紙の余白へ逃がす。ホバーしたときだけ出る */
/* ★行の操作（並べ替え・種類・削除）。紙の左外側に置く。
   隙間を空けると、そこへマウスが入った瞬間に tr:hover が切れてボタンが消え、押せなくなる。
   隙間はボタン側の padding に含めて、行から地続きにすること */
/* ★行の操作。左に「掴んで並べ替え」と「下に足す」、右に「削除」。常に出しておく
   （ホバーで出す方式は、掴みに行く途中で消えて押せない） */
.qedit .qtable tr>td:first-child,.qedit .qtable tr>td:last-child{position:relative}
.qedit .rowctl{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:4px;white-space:nowrap}
.qedit .rc-l{right:100%;padding:5px 12px 5px 0}
.qedit .rc-r{left:100%;padding:5px 0 5px 12px}
.qedit .rowdrag,.qedit .rowadd,.qedit .rowx{width:28px;height:28px;border:1px solid var(--line2);
  background:var(--sf);border-radius:7px;color:var(--sub);padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center}
.qedit .rowdrag{cursor:grab}
.qedit .rowdrag:hover,.qedit .rowadd:hover{background:var(--brs);border-color:var(--br);color:var(--br)}
.qedit .rowadd{cursor:pointer;font-size:13px}
.qedit .rowx{cursor:pointer}
.qedit .rowx:hover{background:var(--negs);border-color:var(--neg);color:var(--neg)}
/* ドラッグ中 ---------------------------------------------------
   掴んだ行は「持ち上がった」見た目にして、落ちる位置は差し込み線で見せる */
body.rowdragging{user-select:none;cursor:grabbing}
body.rowdragging .rowdrag{cursor:grabbing}
.qedit .qtable tr.dragging td{background:#f4f9ff;position:relative;z-index:2;
  box-shadow:0 7px 18px rgba(15,23,42,.16),0 1px 0 rgba(15,23,42,.06)}
.qedit .qtable tr.dragging td:first-child{box-shadow:inset 3px 0 0 var(--qb-line),
  -6px 7px 18px rgba(15,23,42,.14)}
.qedit .qtable tr.dragging td:last-child{box-shadow:6px 7px 18px rgba(15,23,42,.14)}
.qedit .qtable tr.dragging .rowdrag{border-color:var(--br);color:var(--br);background:var(--brs)}
/* 落ちる場所を示す線 */
.qedit .qtable tr.drop-before td{box-shadow:inset 0 3px 0 var(--qb-line)}
.qedit .qtable tr.drop-after td{box-shadow:inset 0 -3px 0 var(--qb-line)}
.qadd{display:flex;gap:7px;margin:0 0 22px}
.qadd .btn.sm{font-size:11px;padding:4px 11px}

/* --- A4の紙 ---
   ★見本（ネクサス社の見積書）に合わせた組み。紺の帯 → 宛先/番号 → 挨拶と金額 →
     明細 → 備考と合計 → 発行元。紙の中では OS のダーク配色に引きずられないよう色を直書きする */
.docpaper{display:flex;justify-content:center}
.sheetA4{--qb-dark:#1e3f75;   /* 上の帯 */
  --qb:#2c5f9e;              /* 表ヘッダー・備考・お振込先・お見積金額（税込） */
  --qb-line:#4180d0;         /* 帯の下の細い帯 */
  width:100%;max-width:820px;background:#fff;color:#1b2430;border:1px solid var(--line);
  border-radius:6px;box-shadow:0 12px 32px rgba(15,23,42,.10);
  font-size:12.5px;line-height:1.7}
/* ★紙に overflow:hidden を付けてはいけない。紙の外に出している行の操作ボタンが
   切り取られて、見えているのに押せなくなる（2026-09-05 これで詰まった）。
   帯の角丸は帯自身で処理する */
.sheetA4 .ph{font-style:normal;color:#c0392b}
.sheetA4 .qbody{padding:34px 44px 30px}

/* 紺の帯 */
.qband{background:var(--qb-dark);border-bottom:5px solid var(--qb-line);border-radius:5px 5px 0 0;
  color:#fff;padding:20px 44px;display:flex;align-items:center;
  justify-content:space-between;gap:24px}
.qband .qbrand b{font-size:21px;font-weight:800;letter-spacing:.04em}
.qband h1{margin:0;font-size:29px;font-weight:800;letter-spacing:.16em;white-space:nowrap}

/* 宛先と見積番号 */
.qtop{display:flex;justify-content:space-between;gap:40px;margin-bottom:26px}
.qto{flex:1 1 auto;min-width:0;max-width:56%}
/* 宛名。★会社名とご担当者名は同じ大きさ（2026-09-23 石井さん）。敬称だけ小さく */
.qto .tocorp{font-size:16px;font-weight:800;color:#1b2430;max-width:400px}
/* ★会社名の行とご担当者名の行は同じ高さ（2026-09-23 石井さん）。余白・下線の太さ・最低の高さを両方同じにする
   （会社名の行の下線は透明） */
.qto .tocorp,.qto .toline{display:flex;align-items:baseline;gap:8px;min-height:32px;padding-bottom:4px;box-sizing:border-box}
.qto .tocorp{border-bottom:1px solid transparent}
.qto .tocorp .w-to{flex:1;width:auto;min-width:0}
.qto .tocorp em,.qto .toline em{font-style:normal;font-size:13px;font-weight:700;flex:none}
/* ★取引先ピッカーは .cbox が幅いっぱいに伸びるので、紙の上では宛名の幅に抑える。
   放っておくと ▾ だけが右にぽつんと離れて出る */
.qto .tocorp .cbox{max-width:270px}
.qto .tocorp .cbox input.f{padding-right:22px}
.qto .toline{border-bottom:1px solid #1b2430;margin-top:6px;max-width:400px}
.qto .toline .tosub{font-size:16px;font-weight:800;flex:1}
.qto .qsubject{margin:12px 0 0;font-size:13px;font-weight:700;color:#334155}
.qmeta{margin:0;flex:none;font-size:12px}
.qmeta>div{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.qmeta dt{color:#64748b;width:62px;flex:none}
.qmeta dt::after{content:"："}
.qmeta dd{margin:0;font-family:var(--num);min-width:150px}
.qmeta dd.plain{font-family:inherit}

/* 挨拶とお見積金額 */
.qmid{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:24px}
.qgreet{flex:1;min-width:0;font-size:12.5px}
.qgreet p{margin:0 0 7px}
.qamount{flex:none;width:288px;border:1px solid #bcd3f0;background:#eef5fd;border-radius:7px;
  padding:14px 18px 12px;text-align:center}
.qamount .lb{font-size:13px;font-weight:800;color:var(--qb);border-bottom:1px solid #bcd3f0;
  padding-bottom:8px;margin-bottom:8px}
.qamount b{display:block;font-family:var(--num);font-size:29px;font-weight:600;letter-spacing:-.01em}
.qamount .tax{font-size:11px;color:#475569;margin-top:2px}

/* 明細 */
table.qtable{width:100%;border-collapse:collapse;margin-bottom:20px;table-layout:fixed}
table.qtable col.c1{width:186px} table.qtable col.c3{width:92px}
table.qtable col.c4{width:104px} table.qtable col.c5{width:112px}
table.qtable th{background:var(--qb);color:#fff;border:1px solid var(--qb);padding:9px 10px;
  font-size:12px;font-weight:700;text-align:center}
table.qtable td{border:1px solid #d3dde9;padding:10px;vertical-align:middle}
table.qtable .qq{text-align:center;font-family:var(--num);white-space:nowrap}
table.qtable .qp,table.qtable .qa{text-align:right;font-family:var(--num);white-space:nowrap}
/* ★名称は折り返す（2026-09-28 石井さん「印刷すると文字が変になる」。nowrap だと長い名称が隣の欄に重なっていた）。
   紙の上で直す欄（.qin）は番号と入力欄を1行に保つため折り返さない（入力欄の中は折り返らない） */
table.qtable td.qitem{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
table.qtable td.qitem.qin{white-space:nowrap}
table.qtable td.qitem .no{color:#64748b;margin-right:3px}
table.qtable tr.qhead2 td{background:#f2f6fb;font-weight:800}
table.qtable tr.qblank td{height:26px}
/* 見積書の列の割合（名称34%・内容26%（残り）・数量12%・単価13%・金額15%）。印刷・PDF（pdf.php の PDF_COLS_QUOTE）も同じ。請求書の紙は今のまま */
.sheetA4 table.qtable col.c1{width:34%} .sheetA4 table.qtable col.c3{width:12%}
.sheetA4 table.qtable col.c4{width:13%} .sheetA4 table.qtable col.c5{width:15%}   /* 請求書（.invsheet）も同じ割合（2026-09-28） */
/* 中項目ごとの小計の行（見出しが2つ以上のとき・2026-09-28） */
table.qtable tr.qsubtotal td{color:var(--sub);font-weight:500;background:transparent;border-top:none}
table.qtable tr.qsubtotal td:first-child{text-align:right}
.qempty{text-align:center;color:#94a3b8}

/* 備考と合計 */
.qfoot{display:flex;gap:28px;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
.qnote{flex:1;min-width:0;font-size:11.5px}
.qnote .lbl{font-weight:800;color:var(--qb);border-left:3px solid var(--qb);padding-left:8px;
  margin:0 0 6px}
.qnote .lbl:not(:first-child){margin-top:14px}
.qnote ul{margin:0;padding-left:17px;color:#334155}
/* 備考は画面ではテキスト欄、紙では箇条書き。両方置いて印刷で入れ替える */
.qedit .qbullets{display:none}
.qnote li{margin-bottom:3px}
.qnote p.bank{margin:0;color:#334155}
.qsum{width:296px;flex:none;font-size:12px;border:1px solid #dbe3ec;border-radius:5px;overflow:hidden}
.qsum div{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;
  border-bottom:1px solid #dbe3ec}
.qsum b{font-family:var(--num);font-weight:500}
.qsum .gt{border-bottom:none;background:#eef5fd;color:var(--qb);font-weight:800;padding:10px 12px}
.qsum .gt b{font-size:16px;font-weight:600}

/* 発行元 */
.qissuer{border-top:2px solid var(--qb);padding-top:14px;font-size:11.5px;color:#334155}
.qissuer b{display:block;font-size:15px;color:#1b2430;margin-bottom:5px}
.qissuer p{margin:0 0 1px}

@media(max-width:1000px){ .docwrap{grid-template-columns:1fr} }
@media print{
  .top,.crumb,.head,.tabbar,.editlead,.bar,.doclist,.docedit,.qlines,.docbar,.qadd,.rowctl,.qsetlink,
  .fysel,.saved,.logout{display:none!important}
  /* 入力欄は中身だけ紙に出す。下線と背景を消す */
  .sheetA4 .qf{border:none!important;background:transparent!important;padding:0!important}
  body{background:#fff} main{padding:0;max-width:none}
  /* 画面では枠と2列。印刷では枠を外して紙だけを実寸で出す */
  .docwrap{display:block;border:none;box-shadow:none;background:none}
  .docmain{padding:0}
  .docpaper{padding:0;display:block}
  .sheetA4{zoom:1;border:none;box-shadow:none;max-width:none;border-radius:0}
  /* 帯と表ヘッダーの色を印刷でも残す */
  .qband,table.qtable th,.qamount,.qsum .gt,tr.qhead2 td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .qadd,.sheetA4 textarea.w-note{display:none!important}
  .qedit .qbullets{display:block}
  /* 行の途中・見出しの直後で改ページしない（2026-09-28） */
  table.qtable tr{page-break-inside:avoid}
  table.qtable tr.qhead2{page-break-after:avoid}
}

/* ---- 見積番号ボタン / ドロワー ---- */
.gf.qno{cursor:pointer;margin:0 30px 0 22px}
.gf.qno>b{font-family:var(--num);font-size:14px;font-weight:500;color:var(--br2);
  width:max-content}
.gf.qno:hover>b{color:var(--br)}
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.on{display:block}
.dmask{position:absolute;inset:0;background:rgba(15,23,42,.42)}
.dpanel{position:absolute;top:0;right:0;bottom:0;width:min(920px,94vw);background:var(--bg);
  box-shadow:-18px 0 44px rgba(15,23,42,.22);display:flex;flex-direction:column}
.dhead{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--sf);
  border-bottom:1px solid var(--line)}
.dhead b{font-size:14px}
.dbody{flex:1;overflow:auto;padding:20px}
.dbody .sheetA4{max-width:none}

/* ---- 中項目の行: 数量と単位（見積書がこの数字を使う） ---- */
/* 中項目は「担当先をまとめる帯」。名前と数量を1列目にまとめる */
td.itemcell{white-space:nowrap}
td.itemcell input.f.iname{display:inline-block;width:min(58%,210px);font-weight:700;margin-left:-8px}
td.itemcell .qty{display:inline-flex;align-items:center;gap:3px;margin-left:10px;
  font-size:11px;color:var(--faint);vertical-align:middle}
td.itemcell .qty em{font-style:normal;font-weight:700}
td.itemcell .qty input.f{width:46px;text-align:right;font-family:var(--num);font-size:11.5px}
td.itemcell .qty input.f.u{width:42px;text-align:left;font-family:inherit}
/* 中項目が持たない列は「—」で、空欄なのか未入力なのか分かるようにする */
tr.r1.sale td.dash{text-align:center;color:var(--line2)}

/* ================= 予算と実績（4指標 × 2段） ================= */
.sg{display:grid;grid-template-columns:auto repeat(4,minmax(0,max-content));
  column-gap:24px;row-gap:2px;align-items:baseline}
.sg .sgh,.sg .sgr{display:contents}
.sg .sgh>span{font-size:10px;font-weight:700;color:var(--faint);letter-spacing:.05em;text-align:right;
  padding-bottom:1px;border-bottom:1px solid var(--line)}
.sg .sgh>span:first-child{border-bottom:none}
/* ★数字に色を塗らない。縦（指標）にも横（予算/実行）にも色を振ると、
   赤字の赤が埋もれて危険信号にならない。色は「赤字」の1箇所だけに閉じ込め、
   予算と実行の区別は左端のバッジに持たせる。 */
.sg .lb{font-size:9.5px;font-weight:800;letter-spacing:.04em;white-space:nowrap;text-align:left;
  justify-self:start;padding:2px 9px;border-radius:99px;line-height:1.6}
.sg .r-b .lb{color:var(--sub);background:transparent;border:1px solid var(--line2)}
.sg .r-a .lb{color:var(--sf);background:var(--ink);border:1px solid var(--ink)}
.sg b{font-family:var(--num);font-weight:500;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px;color:var(--ink)}
.sg b.pos{color:var(--gross)}                 /* 粗利 */
.sg b.rt{color:var(--grossr)}                 /* 粗利率 */
.sg b.neg,.sg b.rt.neg{color:var(--neg)}      /* 赤字だけは赤。↑2行より後に置いて勝たせる */
/* 念のため桁を揃える（等幅でない書体に差し替えても崩れないように） */
.sg b,.sg .mi input.f,input.money,.gnums b,.roll b,td.net,.total .tr b,.ph .tr b,
tr.item td.cost b,.qtotal b,.qsum b,table.ql td.amt{font-variant-numeric:tabular-nums}
.sg .mi{display:block}
.sg .mi input.f{width:100%;min-width:96px;text-align:right;font-family:var(--num);
  font-weight:500;font-size:15px;padding:1px 6px;margin-right:-7px}

/* プロジェクトの帯は少し大きく */
.total .sg b,.total .sg .mi input.f{font-size:19px}
.total .sg{column-gap:28px}

/* 中項目の帯 */
tr.iband>td{padding:11px 17px 11px 34px;background:var(--sf2);border-bottom:1px solid var(--line);
  border-top:1px solid var(--line2)}
.ib{display:flex;align-items:flex-start;gap:22px}
.ibl{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:2px}
.ibtag{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#fff;
  background:var(--sub);padding:2px 8px;border-radius:4px}
input.f.iname{font-size:14px;font-weight:800;width:100%;margin-left:-8px}
.ibl .ml{display:none}
input.f.imemo{font-size:11.5px;color:var(--sub);width:100%;margin-left:-8px}
.ib .sg{flex:none}
.ib>.x{flex:none;margin-top:2px}
tr.iband+tr.r1.cost td{padding-top:9px}

/* ---- 中項目の行（見出し＋メモ＋予算/実績の2つだけ） ---- */
tr.item>td{background:var(--sf2);border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line);padding-top:9px;padding-bottom:9px}
td.icell{padding-left:34px!important}
.iname-row{display:flex;align-items:center;gap:9px}
.ibtag{flex:none;align-self:center;font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#fff;
  background:var(--sub);padding:2px 8px;border-radius:4px}
input.f.iname{font-size:14px;font-weight:800;flex:1;min-width:0;margin-left:-8px}
.imemo-row{display:flex;align-items:center;gap:0;margin-top:2px;padding-left:53px}
input.f.imemo{font-size:11.5px;color:var(--sub);flex:1;min-width:0;margin-left:-8px}
tr.item td.bg input.f,tr.item td.ac input.f{font-weight:500}

/* 中項目: 見出しとメモを1行に。メモは空なら目立たせない */
td.icell{padding-left:34px!important}
td.icell .ir{display:flex;align-items:center;gap:9px}
td.icell input.f.iname{font-size:14px;font-weight:800;flex:1 1 auto;min-width:0;margin-left:-8px}
td.icell input.f.imemo{font-size:11.5px;color:var(--sub);flex:0 0 26%;min-width:0;
  border-bottom:1px dotted var(--line2);border-radius:0}
td.icell input.f.imemo:hover,td.icell input.f.imemo:focus{border-radius:6px;border-bottom-style:solid}
tr.item td.net{color:var(--br);font-weight:500}

/* お振込額: 金額と✕の間隔をCSSで固定し、HTMLの改行に左右されないようにする */
td.net .amt{display:inline-block;font-weight:inherit;color:inherit}
td.net .x{margin-left:8px}

/* 工程表: ガントと「プロジェクトの日程」の間に余白 */
.panel.sched{margin-top:22px}


/* ---- 一覧に置く小さい工程表 ---- */
.minigantt{margin-bottom:16px}
.mgh{display:flex;align-items:baseline;gap:10px;margin-bottom:7px;font-size:12.5px;font-weight:800}
.mgh .sub{font-weight:400}
.mgh .mglink{margin-left:auto;font-size:11.5px;font-weight:700}

/* ---- 一覧に置く小さい工程表 ---- */
.panel.gantt.mini .gwrap{max-height:196px}
.panel.gantt.mini .gleft{flex:0 0 190px}
.panel.gantt.mini .gl,.panel.gantt.mini .gtrack{height:38px}
.panel.gantt.mini .gleft .gh,.panel.gantt.mini .gright .ghead{height:34px}
.panel.gantt.mini .gl{font-size:11.5px}
.b-中項目{background:linear-gradient(90deg,#3f8f6d,#2f7d5c)}
.gl.gsub.lv2{padding-left:28px} .gl.gsub.lv3{padding-left:50px}
.gl.gsub .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtrack .nodate{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  font-size:10.5px;color:var(--faint)}
.gtools .sep{color:var(--line2);margin:0 2px}
.gtools .sc.today{cursor:pointer;font-family:inherit}

/* ---- 日程の一覧（触れる） ---- */
h2.sech{font-size:14px;font-weight:800;margin:24px 0 10px}
.panel.dates{margin-top:14px}
.panel.dates .ph2{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:800}
.panel.dates .ph2 .sub{font-weight:400;margin-left:9px}
table.dt2{width:100%;table-layout:fixed}
table.dt2 col.c-d{width:190px}
table.dt2 th{font-size:10px;letter-spacing:.06em;color:#667b87;font-weight:800;padding:9px 12px;
  background:var(--sf2);border-bottom:1px solid var(--line)}
table.dt2 td{padding:5px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:12.5px}
table.dt2 td.nm{font-weight:700}
table.dt2 tr.dp td{background:var(--sf2)}
table.dt2 tr.dg td.nm{font-weight:700} table.dt2 tr.dg td.nm b{font-size:12.5px}
table.dt2 tr.di td.nm,table.dt2 tr.dc td.nm{font-weight:400}
table.dt2 td.nm em{font-style:normal;color:var(--faint);font-size:11.5px;margin-left:7px}
table.dt2 td.nm .st{margin-left:8px}
table.dt2 td.nm .br{color:var(--line2);margin-right:6px;font-family:var(--num)}
table.dt2 td.nm.lv1{padding-left:28px} table.dt2 td.nm.lv2{padding-left:50px}
table.dt2 td.mu{color:var(--line2);text-align:center}
table.dt2 .dl{font-size:9.5px;font-weight:700;color:var(--faint);margin-right:6px;letter-spacing:.05em}
table.dt2 input.f.gd{width:auto;font-family:var(--num);font-size:12px}
table.dt2 tr.dhide{display:none}
/* 中身が狭いときに右へ伸びるセル（白い余白を作らない） */
.ghead{min-width:100%} .gbody{min-width:100%}
.ghead .gc.fill{flex:1 0 0;border-left:1px solid var(--line)}
.gtrack .cols i.fill{flex:1 0 0;border-left:1px solid var(--line)}
/* バーをつかんで動かす */
.gtrack .bar[data-t]{cursor:grab}
.gtrack .bar[data-t]:hover{filter:brightness(1.06)}
.gtrack .bar.dragging{cursor:grabbing;opacity:.85;box-shadow:0 4px 14px rgba(15,23,42,.28)}
body.gdragging{cursor:grabbing;user-select:none}
.gtrack .bar[data-t]::before,.gtrack .bar[data-t]::after{content:"";position:absolute;top:0;bottom:0;
  width:9px;cursor:ew-resize}
.gtrack .bar[data-t]::before{left:0} .gtrack .bar[data-t]::after{right:0}
/* 日程が未入力の行は、空白をドラッグして引ける */
.gtrack:has(> .bar[data-t]:not([data-s])){cursor:crosshair}
.gtrack .nodate{pointer-events:none}
/* 支払カード: 消費税の切替（個人のみ・1行に収める） */
.card .tx{border:1px solid var(--line2);background:var(--sf);color:var(--faint);border-radius:99px;
  padding:0 7px;margin-left:6px;font:inherit;font-size:9.5px;font-weight:700;cursor:pointer;line-height:15px}
.card .tx:hover{border-color:var(--br);color:var(--br)}
.sched{margin-top:22px}
table.dt2 select.f.stsel{width:auto;font-size:11px;margin-left:8px}
/* 中項目の行は原価（担当先の合計）。入力欄ではなく数字 */
tr.item td.cost b{font-family:var(--num);font-weight:500;color:var(--ink)}
/* 請求先カード: 畳むのはピルと▾だけ */
.gh{cursor:default}
button.cnum{border:none;cursor:pointer;font:inherit;font-size:9.5px;font-weight:800;letter-spacing:.1em}
button.chev{border:none;background:none;cursor:pointer;padding:2px 4px}
button.chev:hover{color:var(--br)}

/* ---- 見積書の明細を組む ---- */
.qlines{background:var(--sf);border:1px solid var(--line);border-radius:11px;margin-bottom:14px;
  box-shadow:0 1px 1px rgba(15,23,42,.03);overflow:hidden}
.qlines .ph2{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:800}
.qlines .ph2 .sub{font-weight:400;margin-left:9px}
table.ql{width:100%;table-layout:fixed}
table.ql col.c-k{width:96px} table.ql col.c-u{width:76px} table.ql col.c-q{width:78px}
table.ql col.c-p{width:130px} table.ql col.c-a{width:130px} table.ql col.c-x{width:44px}
table.ql th{font-size:10px;letter-spacing:.06em;color:#667b87;font-weight:800;padding:9px 11px;
  background:var(--sf2);border-bottom:1px solid var(--line)}
table.ql td{padding:4px 11px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:12.5px}
table.ql tr.k-head td{background:var(--sf2)}
table.ql tr.k-head input.f{font-weight:800}
table.ql tr.k-blank td{opacity:.5}
table.ql td.amt{font-family:var(--num);font-weight:500}
table.ql input.f{width:100%}
table.ql td.n input.f{text-align:right;font-family:var(--num)}
table.ql td.c input.f{text-align:center}
.qfoot2{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--line);
  background:var(--sf2)}
.qfoot2 .qtot{font-size:12px;color:var(--sub)}
.qfoot2 .qtot b{font-family:var(--num);font-size:16px;color:var(--ink);margin-left:8px}
.sheetA4 tr.qhead2 td{font-weight:800;background:#f8fafc}
.sheetA4 tr.qblank td{height:14px}

/* ---- 設定ページ ---- */
.lead{color:var(--sub);font-size:12.5px;margin:0 0 18px}
.stcard{margin-bottom:16px;max-width:720px}
.stbody{padding:6px 18px 16px}
.strow{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line)}
.strow:last-child{border-bottom:none}
.strow.tall{align-items:start}
.strow .sl{font-size:12px;font-weight:700;color:var(--sub);padding-top:1px}
.strow .sl i{display:block;font-style:normal;font-size:10.5px;font-weight:400;color:var(--faint);margin-top:2px}
.strow input.f,.strow textarea.f{border:1px solid var(--line2);background:var(--sf);border-radius:8px;
  padding:7px 10px;font-size:13px}
.strow textarea.f{font:inherit;font-size:13px;line-height:1.7;resize:vertical;color:var(--ink)}
.strow input.f:focus,.strow textarea.f:focus{border-color:var(--br);background:var(--sf)}

/* ========== 取引先ご本人の入力画面（form.php・ログインの外） ========== */
.pubbody{margin:0;background:var(--bg);min-height:100vh;padding:28px 16px 60px}
.pubbox{max-width:560px;margin:0 auto;background:var(--sf);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh);padding:26px 26px 30px}
.pubhead{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.pubbox h1{font-size:19px;font-weight:800;margin:20px 0 8px;letter-spacing:.01em}
.pubbox h1.pubng{color:var(--neg)}
.publead{margin:0 0 20px;font-size:12.5px;line-height:1.85;color:var(--sub)}
.publead b{color:var(--ink)}
.puberr{margin:0 0 16px;font-size:12.5px;font-weight:700;color:var(--neg);
  background:var(--negs);padding:10px 13px;border-radius:8px}
.pubsec{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--sub);
  margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.pubsec:first-of-type{margin-top:4px}
.frow{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.frow .fl{font-size:11.5px;font-weight:700;color:var(--ink)}
.frow .fl i{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:var(--sub);margin-top:2px}
/* ★ラジオとチェックはこの見た目を当てない（幅100%になって枠から飛び出す） */
.frow input:not([type=radio]):not([type=checkbox]){font:inherit;font-size:15px;padding:10px 12px;
  border:1px solid var(--line2);border-radius:8px;background:var(--sf);color:var(--ink);
  width:100%;box-sizing:border-box}
.frow input:not([type=radio]):not([type=checkbox]):focus{outline:none;border-color:var(--br);box-shadow:0 0 0 3px var(--brs)}
.frow.bad input:not([type=radio]):not([type=checkbox]){border-color:var(--neg)}
.frow .fe{font-style:normal;font-size:11px;font-weight:700;color:var(--neg)}
.fradio{display:flex;gap:8px;flex-wrap:wrap}
.fradio label{flex:1 1 165px;display:flex;align-items:center;gap:9px;font-size:13.5px;white-space:nowrap;
  padding:12px 14px;border:1px solid var(--line2);border-radius:8px;cursor:pointer;background:var(--sf)}
.fradio input[type=radio],.fchk input[type=checkbox]{flex:none;width:17px;height:17px;margin:0;accent-color:var(--br)}
.fradio label:has(input:checked){border-color:var(--br);background:var(--brs);font-weight:700}
.fchk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sub);
  margin:-4px 0 14px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.fchk:has(input:checked){border-color:var(--br);background:var(--brs);color:var(--ink);font-weight:700}
.pubbtn{width:100%;margin-top:22px;padding:13px;font-size:14.5px}
.pubfoot{margin:16px 0 0;font-size:11px;line-height:1.8;color:var(--sub);text-align:center}
.pubsum{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13px}
.pubsum dt{font-size:11.5px;font-weight:700;color:var(--sub);white-space:nowrap}
.pubsum dd{margin:0;color:var(--ink)}

/* 取引先一覧の「本人に入力してもらう」列 */
.data th.lkcol{width:210px}
td.lkcol{white-space:nowrap}
.lk{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.lkst{font-size:10.5px;color:var(--sub)}
.lkst b{font-weight:700} .lkst b.ok{color:var(--pos)} .lkst b.mid{color:var(--am)}
.lkf{display:inline}
.lnk{border:none;background:none;font:inherit;font-size:10.5px;color:var(--sub);
  cursor:pointer;padding:0;text-decoration:underline}
.lnk:hover{color:var(--neg)}
.alert.ok{border-color:var(--pos);background:var(--poss)}
.alert.ok .sub{font-weight:400;color:var(--sub)}

/* ログインが切れたときの帯（app.js の loginLost） */
#lostbar{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;padding:13px 18px;font-size:12.5px;
  background:var(--negs);color:var(--ink);border-top:2px solid var(--neg);box-shadow:0 -6px 20px rgba(15,23,42,.12)}
#lostbar b{color:var(--neg)}
#lostbar a{font-weight:700;color:var(--br)}
#lostbar .lbsub{color:var(--sub);font-size:11.5px}

/* ========== 取引先ページ：一覧＋右の詳細パネル（2026-09-14） ========== */
table.cl2 td{padding:11px 14px;vertical-align:middle}
table.cl2 tbody tr{cursor:pointer}
table.cl2 tbody tr:focus{outline:2px solid var(--brs);outline-offset:-2px}
table.cl2 tbody tr.sel td{background:var(--brs)}
table.cl2 th.chev,table.cl2 td.chev{width:28px;text-align:right;color:var(--faint)}
.cdn{display:block;font-weight:700}
.cfn{display:block;font-size:11.5px;color:var(--sub);margin-top:1px}
.cpill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--sub);white-space:nowrap}
.cpill.cl{border-color:transparent;background:var(--brs);color:var(--br)}
.cpill.ind{border-color:transparent;background:var(--ams);color:var(--am)}
.cpill.none{border-style:dashed;color:var(--faint)}
.cinv{font-family:var(--num);font-size:12.5px}
.cinv.no{font-family:inherit;font-size:12px;color:var(--faint)}
.cbad{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;color:var(--neg);background:var(--negs);padding:1px 7px;border-radius:5px}
.cok{color:var(--pos);font-weight:800}.cdash{color:var(--faint)}

.cov{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.28);opacity:0;pointer-events:none;transition:opacity .18s}
.cov.on{opacity:1;pointer-events:auto}
.cdr{position:fixed;top:0;right:0;bottom:0;z-index:61;width:480px;max-width:100%;display:flex;flex-direction:column;
  background:var(--sf);border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(15,23,42,.14);
  transform:translateX(102%);transition:transform .22s ease;visibility:hidden}
.cdr.on{transform:none;visibility:visible}
.cdh{position:relative;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.cdh h2{margin:0;font-size:19px;padding-right:32px}
.cdh .cfn{font-size:12.5px;margin:2px 0 10px}
.cpills{display:flex;gap:6px}
.cx{position:absolute;right:14px;top:14px;border:0;background:none;font-size:22px;line-height:1;color:var(--sub);cursor:pointer;padding:4px 8px;border-radius:6px}
.cx:hover{background:var(--sf2);color:var(--ink)}
.cdb{flex:1;overflow:auto;padding:4px 22px 28px}
.csec{margin-top:18px}
.csec h3{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;color:var(--sub);font-weight:700}
.crow{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:center;margin-bottom:9px}
.crow>span{font-size:12px;color:var(--sub)}
.crow>span i{display:block;font-style:normal;font-size:10.5px;color:var(--faint)}
.cdr .f:not([type=radio]):not([type=checkbox]){font:inherit;font-size:13.5px;padding:7px 10px;width:100%;box-sizing:border-box;
  border:1px solid var(--line2);border-radius:7px;background:var(--sf);color:var(--ink)}
.cdr .f:not([type=radio]):not([type=checkbox]):focus{outline:none;border-color:var(--br);box-shadow:0 0 0 3px var(--brs)}
.cdr .f.mono{font-family:var(--num)}
.cdr textarea.f{resize:vertical;min-height:84px}
.cdr .f.err{border-color:var(--neg)!important}
.cseg{display:inline-flex;border:1px solid var(--line2);border-radius:7px;overflow:hidden;width:max-content}
.cseg label{position:relative;cursor:pointer}
.cseg label+label{border-left:1px solid var(--line2)}
.cseg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cseg b{display:block;font-weight:500;font-size:12.5px;padding:6px 14px;color:var(--sub);background:var(--sf)}
.cseg input:checked+b{background:var(--brs);color:var(--br);font-weight:700}
.cseg input:focus-visible+b{outline:2px solid var(--br);outline-offset:-2px}
.ctg{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.ctg input{width:17px;height:17px;margin:0;accent-color:var(--br)}
.cnta{margin-top:4px;font-size:11.5px;color:var(--sub)}
.cnta.okk{color:var(--pos)}.cnta.ng{color:var(--neg);font-weight:700}
.cinl{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sub)}
.cinl em{font-style:normal;font-size:11px;color:var(--faint)}
.cdr .f.cnum{width:70px!important}
.clk{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clkst{font-size:11.5px;color:var(--sub)}
.clkst b.okk{color:var(--pos)}.clkst b.mid{color:var(--am)}
.cdf{padding:12px 22px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}
@media (max-width:760px){
  .cdr{width:100%}
  table.cl2 th:nth-child(5),table.cl2 td:nth-child(5),table.cl2 th:nth-child(6),table.cl2 td:nth-child(6){display:none}
}

/* 取引先一覧：その場で変えられるチェックと本人入力リンク（2026-09-14） */
.ccb{width:17px;height:17px;margin:0;accent-color:var(--br);cursor:pointer;vertical-align:middle}
table.cl2 td.clkc{white-space:nowrap}
table.cl2 td.clkc form{display:inline;margin:0}
table.cl2 td.clkc .clkst{display:block;margin-top:3px;font-size:10.5px}
table.cl2 tbody tr.hl td{background:var(--ams)}
table.cl2 tbody tr td{transition:background .6s}
@media (max-width:760px){table.cl2 th:nth-child(7),table.cl2 td:nth-child(7){display:none}}

/* 取引先：区分（法人・個人）のタブ。種別のタブと縦線で区切る（2026-09-14） */
.stabs.cent{align-items:center;padding-left:12px;border-left:1px solid var(--line2)}
.stlbl{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin-right:2px}
.stab.dim{border-style:dashed}
@media (max-width:760px){.stabs.cent{padding-left:0;border-left:0}}

/* 見積書ヘッダーのロゴ（2026-09-14 石井さん支給の KiT ロゴを SVG に起こしたもの） */
.qbrand{display:flex;align-items:center;gap:12px}
.qlogo{display:inline-flex;color:#fff;line-height:0}
.qlogo svg{height:26px;width:auto}

/* ========== 支払通知書（兼 仕入明細書）・発注書の紙（2026-09-14）。紙の中は色を直書き ========== */
.qband h1 small{display:block;font-size:12px;letter-spacing:.3em;font-weight:700;text-align:right;opacity:.85;margin-top:2px}
.pdsheet{position:relative}
.pdsheet .pdto{font-size:18px;font-weight:800;color:#1b2430;border-bottom:1px solid #1b2430;padding-bottom:4px;
  max-width:420px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.pdsheet .pdto em{font-style:normal;font-size:13px;font-weight:700}
.pdsheet .pdreg{margin:6px 0 0;font-size:11.5px;color:#475569;font-family:var(--num)}
table.pdtable col.p1{width:210px} table.pdtable col.p3{width:96px} table.pdtable col.p4{width:118px}
table.pdtable td.c{text-align:center}
/* 見積書の品目は1行に収める(nowrap)が、こちらは案件名が長いので折り返す */
table.pdtable td.qitem{white-space:normal;overflow-wrap:anywhere}
.pdsheet .qmeta dt{width:74px}
.pdsheet .pdper{font-family:var(--num);font-size:11.5px;color:#475569}
.pdsheet .pdnt{font-style:normal;color:#c0392b;margin-left:2px}
.pdsheet .pdlist{margin:0 0 10px;padding-left:1.2em;font-size:11px;line-height:1.75;color:#334155}
.pdsheet .pdconf{margin:6px 0 0;font-size:11px;font-weight:700;color:#0f766e}
.pdstamp{position:absolute;right:56px;bottom:44px;transform:rotate(-8deg);border:3px solid #c0392b;color:#c0392b;
  border-radius:10px;padding:4px 14px;font-size:20px;font-weight:800;letter-spacing:.2em;text-align:center;line-height:1.2;opacity:.85}
.pdstamp small{display:block;font-size:10px;letter-spacing:0;font-family:var(--num)}
@media (max-width:640px){
  .sheetA4 .qbody{padding:20px 16px} .qband{padding:16px} .qband h1{font-size:22px}
  .qtop,.qmid,.qfoot{flex-direction:column;gap:14px} .qto{max-width:none} .qamount{width:auto}
  table.pdtable col.p1{width:120px} .pdstamp{right:16px;bottom:20px}
}

/* 書類ページの支払通知書・発注書の操作 */
.pdbar{flex-wrap:wrap} .pdbar form{margin:0}
.pds{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:99px;white-space:nowrap;
  background:var(--sf2);color:var(--sub);border:1px solid var(--line)}
.pds-未発行{background:var(--viols);color:var(--vio);border-color:transparent}
.pds-確認待ち{background:var(--ams);color:var(--am);border-color:transparent}
.pds-確認済{background:var(--poss);color:var(--pos);border-color:transparent}
.pds-変更あり{background:var(--negs);color:var(--neg);border-color:transparent}
.pds-請求書あり{background:var(--brs);color:var(--br);border-color:transparent}
/* 「送信しない」で済ませた書類（2026-09-28・4種とも） */
.pds-処理済み{background:var(--sf2);color:var(--sub);border:1px solid var(--line)}
/* 見積書の版のチップ（帯の状態の右・2026-09-28）。選んでいるものを青い枠に */
.verchips{display:inline-flex;gap:6px;margin-left:10px}
.verchip{display:inline-block;font-size:11px;font-weight:700;padding:3px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--sub);background:var(--sf);white-space:nowrap}
.verchip.on{border:1.5px solid var(--br);color:var(--br);background:var(--brs)}
.pdwarn{font-size:11.5px;color:var(--neg);font-weight:700}
.pdinfo{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11.5px;color:var(--sub);margin:-4px 0 14px}
.pdinfo i{font-style:normal;color:var(--faint)}
/* 請求書：freee の状態と取引先（2026-09-16） */
.pdinfo i.bad{color:var(--neg)}
.pdinfo .fpart{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.fpart .lk{border:none;background:none;color:var(--br);cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.fpart .fpbox{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.fpart .fpbox[hidden]{display:none}
.fpart .fpq{font:inherit;border:1px solid var(--line);border-radius:6px;padding:3px 8px;width:200px;background:var(--sf);color:var(--ink)}
.fpart .fpres{display:inline-flex;flex-wrap:wrap;gap:4px}
.fpart .fpone{border:1px solid var(--line);background:var(--sf);color:var(--ink);border-radius:6px;padding:3px 9px;cursor:pointer;font:inherit;font-size:12px}
.fpart .fpone:hover{border-color:var(--br);color:var(--br)}
form.inl{display:inline;margin:0}

/* ========== 外注一覧（2026-09-14） ========== */
.ostiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ostile{display:block;background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);box-shadow:var(--sh)}
a.ostile:hover{border-color:var(--br);text-decoration:none}
.ostile.on{outline:2px solid var(--br);outline-offset:-1px}
.ostile .lb{font-size:11.5px;color:var(--sub);font-weight:700}
.ostile b{display:block;font-family:var(--num);font-size:22px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.ostile small{font-size:11px;color:var(--faint)}
.ostile.todo b{color:var(--vio)} .ostile.late b{color:var(--neg)} .ostile.diff b{color:var(--am)}
.osbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.osbar select,.osbar input[type=search]{font:inherit;font-size:12.5px;padding:7px 10px;border:1px solid var(--line2);
  border-radius:8px;background:var(--sf);color:var(--ink)}
.osbar input[type=search]{min-width:230px}
.osseg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.osseg a{font-size:12.5px;padding:7px 13px;color:var(--sub);background:var(--sf)}
.osseg a+a{border-left:1px solid var(--line2)}
.osseg a:hover{text-decoration:none;color:var(--br)}
.osseg a.on{background:var(--brs);color:var(--br);font-weight:700}
.ospanel{overflow:hidden}
.ospanel>.empty{padding:40px;text-align:center;color:var(--faint);margin:0}
.osmon{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--sf2);
  border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700}
.osmon span{font-family:var(--num);font-weight:500;color:var(--sub)}
table.ostable{width:100%;border-collapse:collapse;table-layout:fixed}
table.ostable col.o1{width:200px} table.ostable col.o3{width:96px} table.ostable col.o4{width:150px}
table.ostable col.o5{width:120px} table.ostable col.o6{width:120px} table.ostable col.o7{width:150px}
table.ostable th{font-size:11px;color:var(--sub);text-align:left;padding:8px 14px;border-bottom:1px solid var(--line);font-weight:700}
table.ostable td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px}
table.ostable .n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
table.ostable td .sub{display:block;font-size:11.5px;color:var(--sub)}
table.ostable td .cpill{margin-left:6px}
table.ostable td.act{text-align:right;white-space:nowrap}
table.ostable tr.late td:first-child{box-shadow:inset 3px 0 var(--neg)}
table.ostable tr.todo td:first-child{box-shadow:inset 3px 0 var(--vio)}
.oshow{font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;white-space:nowrap}
.oshow.nt{background:var(--viols);color:var(--vio)} .oshow.iv{background:var(--sf2);color:var(--sub);border:1px solid var(--line)}
.osst{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.osst.todo{background:var(--viols);color:var(--vio)} .osst.wait{background:var(--ams);color:var(--am)}
.osst.ok{background:var(--poss);color:var(--pos)} .osst.late{background:var(--negs);color:var(--neg)} .osst.diff{background:var(--ams);color:var(--am)}
@media (max-width:900px){.ostiles{grid-template-columns:repeat(2,minmax(0,1fr))} table.ostable col.o1{width:140px}}
/* 外注一覧の作り直し（2026-09-25）：取引先×支払月の塊（details）。発注書 → 支払通知書／請求書の行 */
.osgrp{margin-bottom:12px} .osgrp>summary{list-style:none;cursor:pointer} .osgrp>summary::-webkit-details-marker{display:none}
.osgrp>summary::before{content:"▾";display:inline-block;width:14px;color:var(--faint);font-size:11px;margin-right:2px}
.osgrp:not([open])>summary::before{content:"▸"}
.osmon b{font-size:13.5px;color:var(--ink);margin-right:6px}
.osmon .cpill{margin-right:8px;font-family:inherit;font-weight:700}
.osmon .gnote{font-style:normal;color:var(--pos);font-size:11.5px;font-weight:700;margin-left:8px}
.osmon>span:last-child{margin-left:auto}
.osgrp.fin>summary b{color:var(--sub)}
table.ostable.os2 col.c1{width:110px} table.ostable.os2 col.c3{width:220px} table.ostable.os2 col.c4{width:120px}
table.ostable.os2 col.c5{width:110px} table.ostable.os2 col.c6{width:170px}
table.ostable td.c,table.ostable th.c{text-align:center;font-family:var(--num);font-variant-numeric:tabular-nums}
table.ostable td .dno{font-family:var(--num);font-size:11px;color:var(--sub);margin-left:6px}
/* 対象の欄のリンク（ボタン .btn は除く。含めると「発行する」の白い文字が黒くなる・2026-09-25 石井さん「見づらい」） */
table.ostable td>a:not(.btn){color:inherit} table.ostable td>a:not(.btn):hover b{color:var(--br)}
.stsub{display:block;font-size:10.5px;color:var(--faint);margin-top:3px}
.oshow.o{background:var(--brs);color:var(--br)}
.osst.none{background:var(--sf2);color:var(--faint);border:1px solid var(--line)}
table.ostable tr.diff td:first-child{box-shadow:inset 3px 0 var(--am)}
@media (max-width:900px){table.ostable.os2 col.c3{width:150px} table.ostable.os2 col.c6{width:120px}}

/* ========== ホーム・期別サマリー（2026-09-14） ========== */
.hmgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hmcard,.smcard{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;box-shadow:var(--sh)}
.hmcard h3,.smcard h3{margin:0;padding:12px 16px;font-size:12.5px;font-weight:800;border-bottom:1px solid var(--line);background:var(--sf2)}
.hmcard .empty{padding:18px 16px;margin:0;color:var(--faint);font-size:12.5px;text-align:left}
.hmrow{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--ink);font-size:12.5px}
.hmrow:last-child{border-bottom:none}
.hmrow:hover{background:var(--brs);text-decoration:none}
.hmrow b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.hmd{font-family:var(--num);font-size:12px;color:var(--sub);width:92px;flex:none}
.hmwhy{font-size:11.5px;color:var(--sub);white-space:nowrap}
.hmamt{font-family:var(--num);font-size:12.5px;white-space:nowrap}
table.smtable tr.on td{background:var(--brs)}
table.smtable td.neg,table.smmon td.neg{color:var(--neg)} table.smtable td.pos{color:var(--gross)}
.smgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-top:14px}
.smcard table.data{border:none}
.smbar{width:34%} .smbar i{display:block;height:6px;border-radius:3px;margin:2px 0;min-width:1px}
.smbar i.s,.smleg i.s{background:var(--br)} .smbar i.c,.smleg i.c{background:var(--line2)}
.smleg{padding:8px 16px;margin:0;font-size:11px;color:var(--sub)}
.smleg i{display:inline-block;width:12px;height:6px;border-radius:3px;margin:0 4px 1px 10px;vertical-align:middle}
@media (max-width:900px){.hmgrid,.smgrid{grid-template-columns:1fr}}

/* ========== 取引先ページ（form.php）の書類（2026-09-14） ========== */
.pubbox.pubwide{max-width:760px}
.pubtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 18px}
.pubtabs a{padding:9px 14px;font-size:13px;font-weight:700;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px}
.pubtabs a.on{color:var(--br);border-bottom-color:var(--br)}
.pubtabs a:hover{text-decoration:none;color:var(--br)}
.pubtabs em{font-style:normal;display:inline-block;min-width:18px;padding:0 6px;margin-left:6px;border-radius:99px;
  background:var(--neg);color:#fff;font-size:11px;text-align:center}
.pubempty{padding:30px 0;text-align:center;color:var(--sub);font-size:13px;line-height:1.9}
.puberr.pubinfo{background:var(--ams);color:var(--am)}
.pubdocs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pubdoc{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--line);color:var(--ink)}
.pubdoc:last-child{border-bottom:none}
.pubdoc:hover{background:var(--brs);text-decoration:none}
.pubdoc.need{box-shadow:inset 3px 0 var(--am)}
.pubdoc .pk{font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;white-space:nowrap}
.pubdoc .pk.n{background:var(--viols);color:var(--vio)} .pubdoc .pk.o{background:var(--brs);color:var(--br)}
.pubdoc .pdt b{display:block;font-size:13px}
.pubdoc .pdt small{font-size:11px;color:var(--sub);font-family:var(--num)}
.pubdoc .pa{font-family:var(--num);font-size:14px;font-weight:600}
.pubh2{font-size:17px;margin:6px 0 8px}
.pubview{padding:0 0 40px}
.pubdocbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;
  background:var(--sf);border-bottom:1px solid var(--line);box-shadow:var(--sh)}
.pubdocbar form{margin:0} .pubdocbar .spacer{flex:1}
.pubpaper{padding:24px 14px}
/* 書類タブの分け方（発注書／支払通知書／請求書）・行のボタン・Bill One の案内（2026-09-25） */
.pubsec2{font-size:12px;font-weight:800;color:var(--sub);letter-spacing:.06em;margin:18px 0 8px}
.pubdoc .pbtn{grid-column:1/-1;justify-self:start;margin-left:0}
.pbtn{display:inline-block;margin-left:10px;padding:6px 12px;border-radius:8px;background:#2563eb;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.billone{border:1px dashed var(--line2);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.8;background:var(--sf2)}
.billone b{display:block;font-size:13.5px;margin-bottom:2px}
.billone code{font-family:var(--num);font-size:13px}
.pubnote{font-size:12px;color:var(--sub);margin:6px 0 0}
@media (max-width:640px){.pubdoc{grid-template-columns:minmax(0,1fr) auto} .pubdoc .pk,.pubdoc .pds{grid-row:2}}
@media print{
  .pubdocbar,.pdinfo{display:none!important}
  .pubview{padding:0;background:#fff} .pubpaper{padding:0;display:block}
  .pdstamp{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}


/* ========== 支払通知書・発注書を紙の上で直す（2026-09-14）。印刷は入力欄(.ps)を隠して文字(.pp)を出す ========== */
.qedit .pp{display:none}
.pdsheet .w-meta{font-family:var(--num);width:150px}
.pdsheet .w-subj{width:230px}
.pdsheet .w-sub{font-weight:700}
.pdsheet .w-pend{font-family:var(--num);font-size:11px;text-align:center;width:100%}
.pdsheet .w-price{text-align:right;font-family:var(--num)}
.pdsheet tr.pdexp td{background:#f8fafc}
.qedit tr.pdexp0 td{color:#94a3b8}
.pdsheet .pdhint{display:block;font-size:10.5px;color:#94a3b8;font-weight:400;margin-top:2px}
/* 角印：発行元名の右端に重ねる。画像は透過PNG */
.pdsheet .pdissuer{position:relative}
.pdsheet .pdceo{position:relative;display:inline-block}
.pdseal{position:absolute;left:calc(100% - 9px);top:50%;transform:translateY(-62%);width:70px;height:auto;opacity:.92;pointer-events:none}
/* 期別サマリー：新しい2期だけ。残りは広げる */
.smtable .smold{display:none}
.smtable.open .smold{display:table-row}
.smtable .smmore td{text-align:center;padding:7px}
.smtable .o2,.smtable.open .o1{display:none}
.smtable.open .o2{display:inline}
@media print{
  .qedit .ps{display:none!important}
  .qedit .pp{display:inline!important}
  .qedit tr.pdexp0,.pdsheet .pdhint{display:none!important}
  .pdseal{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* 書類の一覧を状態で絞るボタン（2026-09-14） */
.doclist .dst{display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px;border-bottom:1px solid var(--line)}
.doclist .dst a{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;border:1px solid var(--line2);color:var(--sub);text-decoration:none;white-space:nowrap}
.doclist .dst a b{font-family:var(--num);font-weight:500;margin-left:5px}
.doclist .dst a.on{background:var(--br);border-color:var(--br);color:#fff}

/* ログイン（Slack DM・2026-09-14） */
.loginbox .lgok{background:var(--poss);color:var(--pos);border-radius:8px;padding:9px 12px;font-size:12.5px;font-weight:700;margin:0 0 12px}
.loginbox .lghint{font-size:11.5px;color:var(--sub);line-height:1.7;margin:8px 0 0}
.loginbox .lgslack select{width:100%}
.loginbox .lgpass{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.loginbox .lgpass summary{font-size:12px;color:var(--sub);cursor:pointer}
.loginbox .lgpass form{margin-top:10px}
/* ログイン画面：パスキーが正面、Slack のリンクとパスワードは予備（2026-09-22 keiri と同じ並び） */
.loginbox .lgpk{width:100%;padding:13px;font-size:15px}
.loginbox .lgpass+.lgpass{margin-top:10px}
/* 設定：自分のパスキー */
.pkadd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pkadd input{font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;
  background:var(--sf);color:var(--ink);flex:0 1 260px}
.pkmsg{font-size:11.5px;color:var(--sub)}
/* 設定：ログインできる人・履歴 */
.sth1{margin-top:34px}
.sttable{width:100%}
.sttable tr.off td{color:var(--faint)}
.sttable tr.ng td{color:var(--neg)}
.stadd{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.stadd select,.stadd input{border:1px solid var(--line2);border-radius:7px;padding:6px 9px;background:var(--sf);color:var(--ink);font:inherit;font-size:12.5px}

/* ===== ヘッダーは1段（2026-09-15 石井さん「タブのサイズで2段になるのやめれない？」）=====
   1258px の画面に 約1395px ぶん並んでいて折り返していた。★折り返させない。
   ①余白を詰める。それでも入らなければ app.js（ヘッダーを1段に保つ）が実際に測って、
   ②期の表記を短く（第9期・今期 → 9期） ③左上の文字を隠す（.nobrand） ④タブをアイコンだけ（.icons。名前はマウスを乗せると出る）
   の順に詰める（2026-09-15 石井さん「9期まで小さくしていい」）。それでも足りなければタブの列だけ横にスクロールする */
/* ↑この処理の CSS（.top・.nobrand・.icons）は header.css に移した（2026-09-25・経理と共通） */

/* ===== プロジェクト一覧：状態の見出し行に帯色（2026-09-15 石井さん「どこからが区切りかわからない」）=====
   状態ごとの色（バッジと同じ系統）を行いっぱいに敷く。バッジは白地にして帯に埋もれないようにする。
   ★1行おきの灰色（table.data.zebra … tr:nth-child(2n) td）の方が強く、偶数行目の見出しだけ帯が消えていた。
     表の名前（table.data.pj）まで書いて、それより強くしている */
:root{ --band-est:#fdf0c8; --band-run:#e2ebff; --band-done:#eee8fe;
       --band-est-h:#fbe6a6; --band-run-h:#d3e1ff; --band-done-h:#e3dafd; }
@media (prefers-color-scheme: dark){ :root{ --band-est:#2d2511; --band-run:#152342; --band-done:#231d3b;
       --band-est-h:#3a3016; --band-run-h:#1b2d54; --band-done-h:#2d2550; } }
table.data.pj tbody tr.grp[data-g="見積中"] td{background:var(--band-est)}
table.data.pj tbody tr.grp[data-g="進行中"] td{background:var(--band-run)}
table.data.pj tbody tr.grp[data-g="完了"] td{background:var(--band-done)}
table.data.pj tbody tr.grp[data-g="見積中"]:hover td{background:var(--band-est-h)}
table.data.pj tbody tr.grp[data-g="進行中"]:hover td{background:var(--band-run-h)}
table.data.pj tbody tr.grp[data-g="完了"]:hover td{background:var(--band-done-h)}
table.data.pj tbody tr.grp .st{background:var(--sf)}

/* ===== 工程表は外側（.gwrap）1つで縦横スクロール（2026-09-15 石井さん「上下二重スクロール」「ずれる」）=====
   経緯: 外側は max-height 付きの横並びで、左右の箱が外側の見える高さ（小さい表示で196px）に引き伸ばされていた。
   ・右（横スクロール付き）が自分で縦にもスクロール → 二重スクロール（元の不具合）
   ・右の縦スクロールだけ止めた → 196pxより下が切れ、左だけ動いてずれた（1回目の直し・失敗）
   ・左右を中身の高さにした → 行はそろったが、右は自分で横スクロールする箱なので月の見出しが上に残らず、
     左の見出しだけ残って1行ずれて見えた（2回目・不十分）
   ★外側1つで縦横ともスクロールする。左の列は横に貼り付け（.gleft は元から sticky left:0）、見出しは左右とも上に貼り付く。
     右は自分ではスクロールしない。今日へ寄せる処理も外側を動かす（app.js の centerOn / gotoToday） */
.gwrap{overflow:auto}
.gleft,.gright{align-self:flex-start}
.gright{flex:1 0 auto;min-width:0;overflow:visible}

/* プロジェクト一覧は縞模様をやめて白（2026-09-15 石井さん）。灰色は内訳の行だけ。
   縞（.zebra）が持っていた「マウスを乗せたら色」だけ残す */
table.pj tbody tr.pjrow:hover td{background:var(--brs)}

/* ===== 請求書（2026-09-15）。紙は見積書と同じ（.sheetA4 / .q*）。ここは請求書だけの差分 ===== */
.pds-発行済{background:var(--brs);color:var(--br);border-color:transparent}
.pds-入金済{background:var(--poss);color:var(--pos);border-color:transparent}
.invsheet{position:relative}
.invsheet .pdceo{position:relative;display:inline-block}
.invsheet .qmeta dt{width:74px}
.invsheet .w-meta{font-family:var(--num);width:150px}
.invsheet .invper{margin-top:10px}
.invsheet .w-period{width:260px}
.invsheet .invdue{margin:6px 0 12px;font-size:11.5px;color:#334155}
.invsheet .invdue b{font-family:var(--num)}
/* 請求書を紙の上で直すとき、宛名の入力欄が幅いっぱいになって「御中」が次の行に落ち、
   「件名：」のあとも折り返していた（2026-09-15）。入力欄と文字を1行に並べる */
.invsheet .qsubject{display:flex;align-items:baseline;gap:4px}
.invsheet .qsubject .w-sub{flex:1;width:auto;min-width:0}

/* ---- プロジェクト詳細：関連する書類（2026-09-23 石井さん。概要の下・すべて畳むの上） ---- */
/* 背景は白（R7 ⑧：画面の地と同じ色で見落としていた）。枠・角丸は .card（1px solid var(--line)・11px）のまま。.card に影は無いので付けない */
.prdocs{padding:12px 16px 14px;margin:0 0 14px;background:var(--sf)}
.prdocs .ph2{margin-bottom:2px}
/* 1行＝種類の名前（左の列 88px）＋チップ（右の列の div の中で折り返す）。チップが2行目に回っても種類の名前の下に潜らない。行の間に薄い線（R7 ⑨） */
.prdrow{display:grid;grid-template-columns:88px 1fr;align-items:baseline;padding:8px 0}
.prdrow+.prdrow{border-top:1px solid var(--line)}
.prdk{font-size:11px;font-weight:800;color:var(--sub)}
.prdrow>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0}
.prdc{display:inline-flex;align-items:baseline;gap:7px;font-size:12px;font-weight:700;color:var(--ink);
  border:1px solid var(--line2);border-radius:99px;padding:5px 12px;background:var(--sf)}
.prdc:hover{border-color:var(--br);color:var(--br);text-decoration:none}
/* 未発行・未採番は em（薄い字のまま）、発行済みの番号は b（濃い字）。承諾済・確認済・入金済（.done）は緑 */
.prdc em{font-style:normal;font-family:var(--num);font-size:11px;font-weight:500;color:var(--sub)}
.prdc b{font-family:var(--num);font-size:11px;font-weight:500;color:var(--ink)}
.prdc.done b{color:var(--pos)}
.prdnone{font-size:11.5px;color:var(--faint)}

/* 題名の PROJECTS は一覧へ戻るリンク（見た目は他のページの題名と同じ） */
h1.en a.h1back{color:inherit} h1.en a.h1back:hover{color:var(--br);text-decoration:none}
/* 設定：利用者ごとの経理の見え方（2026-09-24） */
.kscope{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kscope select{font:inherit;font-size:11.5px;border:1px solid var(--line2);border-radius:6px;padding:2px 6px;background:var(--sf);color:var(--ink)}
.kscope .kco{display:inline-flex;gap:3px;align-items:center;font-size:11px;color:var(--sub)}
/* プロジェクト画面：経費（経理から）2026-09-24 */
.kcost{margin-top:22px}
.kcost .ph2{align-items:center}
.kcost .ph2 .sub{font-weight:400}
.kcost .kcsum{font-size:12px;color:var(--sub);font-weight:400}
.kcost .kcsum b{font-family:var(--num);color:var(--ink);font-weight:600}

/* ---- 書類4種のボタンの決まり（2026-09-24 統一案 第3版）----
   左端＝状態／右端＝次にやること1つ（青）／その左＝PDF（白）／取り消す＝赤い文字で、PDF・青から離す */
.btn.ghost.danger{color:var(--neg)} .btn.ghost.danger:hover{border-color:var(--neg);color:var(--neg)}
.docbar .dgap{display:inline-block;width:12px;flex:none}
.pds-未送付{background:var(--ams);color:var(--am);border-color:transparent}
.pdinfo .dbst{display:inline-flex;align-items:center;gap:4px}
.pdinfo select.f.mini{width:auto;font-size:11px;padding:1px 6px;border:1px solid var(--line2);border-radius:6px;background:var(--sf);color:var(--ink)}
/* 発注書・支払通知書の件名は宛名の下（請求書と同じ・2026-09-24）。入力欄は行の残りいっぱい */
.pdsheet .qsubject{display:flex;align-items:baseline;gap:4px}
.pdsheet .qsubject .w-sub{flex:1;width:auto;min-width:0}
.pdsheet .pdreg{margin:4px 0 0}
/* 見積書の件名も「件名：」＋入力欄（請求書と同じ・2026-09-24） */
#qsheet .qsubject{display:flex;align-items:baseline;gap:4px}
#qsheet .qsubject .w-sub{flex:1;width:auto;min-width:0}
/* 英語の見積書・請求書（2026-09-29 R9。紙に .qen）。見出しの語（Quotation No.・Invoice date など）が長いので見出しの幅を広げ、区切りは半角の「:」 */
.sheetA4.qen .qmeta dt{width:90px}
.sheetA4.qen .qmeta dt::after{content:":"}
/* 送る画面（2026-09-24 第4段）。宛先・件名・本文を確かめてから1通ずつ送る */
.dlg.snd{max-width:680px}
.dlg.snd form{display:block;padding:0}
.dlg.snd .sndh{display:flex;align-items:baseline;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line)}
.dlg.snd .sndh b{font-size:15px}
.dlg.snd .sndh span{font-size:12px;color:var(--sub)}
.dlg.snd .sndwarn{margin:12px 22px 0;padding:8px 12px;border-radius:9px;background:var(--ams);color:var(--am);font-size:12px}
.dlg.snd .sndr{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;padding:10px 22px 0;
  flex-direction:row;font-size:12.5px;color:var(--ink);font-weight:400}
.dlg.snd .sndr .sl{font-size:11.5px;color:var(--sub);font-weight:700;padding-top:7px}
.dlg.snd .sndr > span:last-child{padding-top:6px}
.dlg.snd .sndr input{width:100%;box-sizing:border-box}
.dlg.snd .sndr small{display:block;margin-top:4px;font-size:11px;color:var(--faint)}
.dlg.snd .sndr .bad{color:var(--neg)}
.dlg.snd textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;line-height:1.65;padding:9px 11px;
  border:1px solid var(--line2);border-radius:9px;background:var(--sf);color:var(--ink);resize:vertical}
.dlg.snd .sndf{display:flex;align-items:center;gap:9px;padding:14px 22px 18px;margin-top:12px;border-top:1px solid var(--line)}
.dlg.snd .sndnote{flex:1;font-size:11px;color:var(--faint)}
.dlg.snd .sendgo:disabled{opacity:.55;cursor:default;filter:none}
.pdinfo .lnk.again{font-size:11px;text-decoration:underline;margin-left:4px} .pdinfo .lnk.again:hover{color:var(--br)}

/* 期別：月別・プロジェクト別（2026-09-24 石井さん「売上／外注費／粗利／経費／営業利益」） */
.smwide{margin-top:14px}
.smscroll{overflow-x:auto}
table.smmon td.pos,table.smproj td.pos,table.smtable td.pos{color:var(--gross);font-weight:500}
table.smmon td.neg,table.smproj td.neg,table.smtable td.neg{color:var(--neg);font-weight:500}
table.smmon tfoot td{border-top:1px solid var(--line2);font-weight:700;background:var(--sf2)}
table.smproj tr.smmh td{background:var(--sf2);border-top:1px solid var(--line2);font-weight:700;padding-top:12px}
table.smproj tr.smmh .gn{margin-left:10px;font-size:12px;color:var(--faint);font-weight:500}
table.smproj td:first-child{min-width:260px}
table.smproj tr:not(.smmh) td:first-child{padding-left:22px}
.smbar i.e,.smleg i.e{background:var(--vio)}
table.smproj tr.smmh{cursor:pointer}
table.smproj tr.smmh:hover td{background:var(--brs)}
table.smproj tr.smmh .chev{display:inline-block;width:16px;color:var(--faint);font-size:11px;transition:transform .18s}
table.smproj tr.smmh.fold .chev{transform:rotate(-90deg)}
.smcard h3 .small{margin-left:10px;font-size:11px;font-weight:500;color:var(--faint)}

/* ===== 書類の上の2段（2026-09-24 石井さん「区切りがわからない・請求書の上と送り先に何か必要」「取り消すの無駄な隙間」。案を承認）=====
   ボタンの段と情報の段を紙と同じ幅（820px）にそろえ、情報は薄い帯に入れて項目を縦線で区切る */
.docmain .docbar,.docmain .pdinfo{max-width:820px;margin-left:auto;margin-right:auto}
.docmain .docbar{margin-bottom:8px}
.pdinfo{align-items:center;gap:6px 0;margin:0 auto 14px;padding:8px 14px;background:var(--sf2);border:1px solid var(--line);border-radius:10px;font-size:11.5px;color:var(--ink)}
.pdinfo .pi{display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-left:1px solid var(--line2);line-height:1.5}
.pdinfo .pi:first-child{padding-left:0;border-left:none}
.pdinfo .pi > em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--faint)}
.pdinfo .pi small{font-size:10.5px;color:var(--sub)}
.pdinfo .pi a{color:var(--br);text-decoration:none;font-weight:600} .pdinfo .pi a:hover{text-decoration:underline}
.pdinfo i.warn{color:var(--am);font-weight:600}
.pdinfo .pj{margin-left:auto;border-left:none;padding-right:0;color:var(--br);font-weight:700;text-decoration:none}
/* 期別：今期と前期の月別を横に並べる（2026-09-24 石井さん・見本 mockup/期別_利益案.html 案3） */
.smgrid.smwide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:14px}
table.smmon td,table.smmon th{padding-left:7px;padding-right:7px}
table.smmon td.n{font-size:12px}
table.smmon td.smbar{width:16%;padding-right:2px}
table.smmon .smbar span{display:flex;height:9px;border-radius:3px;overflow:hidden}
table.smmon .smbar span i{display:block;height:100%;margin:0;border-radius:0;min-width:0}
table.smmon .smbar i.c{background:var(--line2)} table.smmon .smbar i.e{background:var(--vio)} table.smmon .smbar i.s{background:var(--gross)}
table.smmon td.rt{color:var(--grossr)}
table.smmon tr.smempty td{color:var(--faint)}
table.smmon tr.smm{cursor:pointer}
table.smmon tr.smm:hover td,table.smmon tr.smm.on td{background:var(--brs)}
table.smmon tr.smm.on td:first-child{box-shadow:inset 3px 0 0 var(--br)}
table.smmon tfoot .mu{font-size:11px;font-weight:500;color:var(--faint)}
.smprev h3{color:var(--sub)}
.smleg2{padding:8px 4px 0}
.smleg2 i.c{background:var(--line2)} .smleg2 i.e{background:var(--vio)} .smleg2 i.s{background:var(--gross)}
.smcard h3{display:flex;align-items:baseline}
.smcard h3 .spacer{flex:1}
.smcard h3 .lnk{font-size:11.5px;font-weight:500}
/* 失注（2026-09-24 石井さん「見積中→失注か受注か」）。灰色。数字には入れない */
.s失注{background:var(--sf2);color:var(--faint);border:1px solid var(--line2)}
.b-失注{background:linear-gradient(90deg,#cbd3dd,#e4e8ee)}
:root{ --band-lost:#eef1f4; --band-lost-h:#e4e8ee; }
@media (prefers-color-scheme: dark){ :root{ --band-lost:#1a222c; --band-lost-h:#222c38; } }
table.data.pj tbody tr.grp[data-g="失注"] td{background:var(--band-lost);color:var(--sub)}
table.data.pj tbody tr.grp[data-g="失注"]:hover td{background:var(--band-lost-h)}
/* 期別の見込み（見積中）。数字に入れないので薄く */
table.smtable .smmi,table.smmon .smmi{color:var(--am);border-left:1px dashed var(--line2)}
table.smproj tr.smmirow td{color:var(--faint)}
table.smproj tr.smmirow td a{opacity:.75}
table.smproj tr.smmirow .st{margin-left:6px}
table.smmon td:first-child{white-space:nowrap}
table.smmon td.smmi,table.smmon th.smmi{font-size:11px;padding-left:5px;padding-right:5px}
/* 見込み（見積中）は月の下の2段目（2026-09-24 石井さん「9月を2段にして下に見込み金額」） */
table.smmon tr.hasmi td,table.smmon tr.smempty.smm td{border-bottom:none}
table.smmon tr.smmisub td{padding-top:0;padding-bottom:5px;color:var(--am);font-size:11px;border-top:none}
table.smmon tr.smmisub td.n{font-size:11px}
table.smmon tr.smmisub td.mil{text-align:right;white-space:nowrap}
table.smmon tr.smmisub[onclick]{cursor:pointer}
table.smmon tfoot tr.smmisub td{background:var(--sf2);border-top:none}
table.smmon tr.smmisub.on td{background:var(--brs)}
table.smmon tfoot tr.smpad td{background:var(--sf2)}
/* 計の2段目：見込み込みの合計 */
table.smmon tfoot tr.smwithmi td{background:var(--sf2);border-top:1px dashed var(--line2);font-weight:500;vertical-align:top}
table.smmon tfoot tr.smwithmi td:first-child{color:var(--am);font-weight:700;white-space:nowrap}
table.smmon .smuchi{display:block;font-size:10.5px;color:var(--am);font-weight:500}
/* 日程の一覧：外注の期間の自動／個別、支払は表示だけ（2026-09-25 期間・支払予定日の自動化） */
.dt2 input.gd.auto{color:var(--faint)}
.dt2 input.gd.own{color:var(--ink);font-weight:700}
.dt2 .dclr{border:none;background:none;color:var(--am);font:inherit;font-weight:700;cursor:pointer;padding:0 4px;margin-left:2px}
.dt2 .payv{font-family:var(--num);font-size:12px;color:var(--ink)}
.dt2 .pmode{display:inline-flex;align-items:center;font-size:10px;font-weight:700;border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.dt2 .pmode.auto{background:var(--sf2);color:var(--faint);border:1px solid var(--line)}
.dt2 .pmode.lock{background:var(--ams);color:var(--am)}
.dates .sub .dauto{color:var(--faint)}
/* 発注書のご注意事項・添付（2026-09-25） */
.pdsheet .pdterms{margin:4px 0 0 18px;padding:0;font-size:11.5px;line-height:1.7;color:#334155}
.pdsheet .pdatt{margin-top:8px;font-size:11px;color:#64748b}
.pdinfo .ptog{display:inline-flex;align-items:center;gap:4px}
.pdinfo .ptog input{accent-color:var(--br)}
.stpanel[hidden]{display:none}
.stattach{font-size:12px;list-style:none;margin:0;padding:0} .stattach li{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--line)} .stattach small{color:var(--faint)}
/* 書類ページの左の一覧の検索（2026-09-28 R10）。見た目は外注一覧の検索欄（.osbar input[type=search]）と同じ。左右の余白は状態のボタン（.dst）と同じ 12px */
.doclist .dsearch{display:block;flex:none;width:calc(100% - 24px);margin:9px 12px 0;font-family:inherit;font-size:12.5px;
  padding:7px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--sf);color:var(--ink)}
/* 元に戻す（2026-09-28 R12・ヘッダーの「自動保存」の右）。header.css（経理と共通）は触らずここに置く。
   大きさは .saved と同じ 11.5px、色は薄い青（--brs の地に --br の字）。形は .mini と同じ（2px 9px・丸）。戻せるものが無いときは hidden */
.top .undo{flex:none;white-space:nowrap;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--br);background:var(--brs);
  border:none;border-radius:99px;padding:2px 9px;cursor:pointer}
/* 発注書・支払通知書の期間：未発行のうちは開始日と締日の2つの欄を縦に並べる（2026-09-28 親） */
.pdsheet td.pdper .w-pend{display:block;width:100%;margin:0 auto}
.pdsheet td.pdper .w-pstart{margin-bottom:2px}
.pdsheet td.pdper .pdtil{display:none}
.qedit table.pdtable col.p3{width:118px}
/* 英語の紙で直す欄（2026-10-04 R14）。取引先を選び直す行・回の名前を直す行（.toen）は画面だけ（印刷は .ps で消える） */
.qto .toen{display:flex;align-items:baseline;gap:8px;max-width:400px;margin-top:2px;font-size:11px;color:#64748b}
.qto .toen>span{flex:none}
.qto .toen .cbox{flex:1;max-width:270px}
.qto .toen>.f{flex:1;width:auto;min-width:0}
.qto .toen .w-toen{font-size:12px;font-weight:700;color:#334155}
.qto .toen .cbox input.f{padding-right:22px}
/* 英語の名称・内容・回の名前の欄は折り返す（textarea.qta。高さは app.js の qtaFit が中身に合わせる）。
   英語は長い文になり、1行の欄だと途中から見えないため（2026-10-04 R14 親） */
.sheetA4 textarea.qta{resize:none;overflow:hidden;display:inline-block;vertical-align:top;line-height:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
table.qtable td.qitem.qin .no{vertical-align:top}
.sheetA4 textarea.w-split{width:100%;display:block}
table.qtable td.qitem .dsuf{display:block}
/* 英語の件名の後ろの（回の名前）は長くなるので、入り切らなければ次の行へ（件名の欄がつぶれないよう最小の幅を決める） */
#qsheet.qen .qsubject{flex-wrap:wrap}
#qsheet.qen .qsubject .w-sub{min-width:180px}
/* 送る画面の「日本語版も添付する」（2026-10-04 R15） */
.dlg.snd .sndr .sndboth{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:6px;font-size:12px}   /* ダイアログの label は縦並びが既定なので、横並びを明示（親 R15b） */
.dlg.snd .sndr .sndboth input{width:auto}
/* 請求書の宛名の下の取引先の住所・右上の先方の番号（見出しなし＝「：」を出さない）（2026-10-20 R17） */
.qto .toaddr{font-size:11px;color:#475569;margin-top:2px;max-width:400px}
.qmeta .qref dt::after{content:none}
.sheetA4 .w-ref{width:220px}
/* 取り消した版を読むだけで開いたときの「取消（日時）」（2026-10-20 R17）。.pdstamp と同じ場所に灰色で小さく。画面だけ
   （読むだけの紙には .qedit が付かず、.ps が印刷で消えないので、ここで消す） */
.invsheet .pdstamp.ps{border-color:#94a3b8;color:#94a3b8;font-size:12px;letter-spacing:0}
@media print{.invsheet .pdstamp.ps{display:none!important}}
/* 設定の「連携の鍵」（Claude Code から pm を使う・2026-10-20 R18）。発行した鍵とつなぎ方のコマンドは1回だけ出すので、全部を選びやすく。失効した鍵の行は薄く */
.apikey{font-family:var(--num);font-size:13px;user-select:all;word-break:break-all}
.apicmd{white-space:pre-wrap;word-break:break-all;font-size:12px;background:var(--sf);border:1px solid var(--line);border-radius:8px;padding:8px 10px;user-select:all}
.stcard .apirev{opacity:.5}
.stcard.apicard{max-width:1100px}
.apicard td:first-child{min-width:14em}
.apicard td:nth-child(2),.apicard td:nth-child(3),.apicard td:nth-child(4){white-space:nowrap}   /* 4＝送信（2026-10-26 R23） */
/* 書類ページの一覧の「この日より前を処理済みに」（発注書・支払通知書・管理者だけ・2026-10-26 R22）。状態のボタン（.dst）の下に小さく */
.pdbulk{font-size:11px;display:flex;gap:6px;align-items:center;padding:6px 10px;color:var(--faint)}
.pdbulk input[type=date]{font-size:11px}