/* ================================================================================
quarter.css - 🧾 クォーターチェック（②突合 ＋ ③AIチェック） PitFlow v1.181.0
⚠ 色は変数から。ここで直の色を増やさない（棚卸しの「色 102」を太らせない）。
⚠ 幅の広い表は**中だけ横スクロール**させる。画面ごと横に伸ばさない。
================================================================================ */
/* ── 見出し ── */
.q-head{ margin:2px 0 10px; }
.q-title{ font-size:14px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:7px; }
.q-sub{ font-size:11.5px; color:var(--text3); line-height:1.8; margin-top:3px; }
/* ── 期間 ── */
.q-range{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; }
.q-l{ font-size:11.5px; color:var(--text3); }
.q-in{ background:var(--bg); border:1px solid var(--border); color:var(--text);
border-radius:8px; padding:5px 8px; font-size:12px; }
.q-tilde{ color:var(--text3); }
.q-quick{ display:inline-flex; gap:6px; flex-wrap:wrap; margin-left:4px; }
.q-qb{ border:1px solid var(--border); background:var(--bg3); color:var(--text2);
border-radius:8px; padding:4px 10px; font-size:11px; cursor:pointer; line-height:1.4; text-align:left; }
.q-qb span{ display:block; font-size:9.5px; color:var(--text3); }
.q-qb.on{ border-color:var(--brand,#1f7a4d); color:var(--text); font-weight:700; }
/* ── 🗄 その月の Q1〜Q4（ルーティン） ── */
.q-plan{ border:1px solid var(--border); border-radius:10px; background:var(--bg2); padding:9px 12px; margin:0 0 10px; }
.q-plan-b{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.q-plan-b > .q-pqwrap{ min-width:0; }
/* 🗓 v2.2.0 Q1〜Q4＝下の4つの箱と同じテイスト。左＝期間・実施日・金額／右＝残り件数を大きく */
.q-pqwrap{ position:relative; display:flex; }
.q-pq{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
border:1px solid var(--border); background:var(--bg1); border-radius:12px; padding:10px 13px; }
.q-pq:hover{ border-color:var(--text3); }
.q-pq.done{ border-color:rgba(245,158,11,.5); }
.q-pq.ok{ border-color:rgba(29,185,122,.5); }
.q-pq.ng{ border-color:rgba(239,68,68,.55); }
.q-pq-l{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.q-pq-t{ font-size:12.5px; font-weight:800; color:var(--text2); }
.q-pq-t i{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--text3); margin-left:6px; }
.q-pq-d{ font-size:10.5px; color:var(--text3); }
/* 📒 v2.105.0 Qの箱の「伝票の書き込み 37/39」 */
.q-pq-w{ font-size:10.5px; color:var(--text3); }
.q-pq-w.ng{ color:#f59e0b; font-weight:700; }
/* 🔢 v2.77.0 Qの箱の「+◯円」を消したので、その色づけも外した（ゆうた指定・全体は件数だけ） */
.q-pq-r{ flex:0 0 auto; font-size:13px; font-weight:800; color:var(--ins-c,#f59e0b); white-space:nowrap; }
.q-pq-r b{ font-size:26px; font-weight:800; margin:0 2px; font-variant-numeric:tabular-nums; }
.q-pq-r em{ font-style:normal; font-size:13px; font-weight:700; color:var(--text3); }
.q-pq.ok .q-pq-r{ color:var(--green); font-size:22px; }
.q-pq-x{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; line-height:1; font-size:12px; font-weight:800;
color:var(--text3); background:var(--bg1); border:1px solid var(--border2); border-radius:50%; cursor:pointer; padding:0; }
.q-pq-x:hover{ color:#fff; background:#ef4444; border-color:#ef4444; }
.q-plan-off{ font-size:11px; color:var(--text3); margin:8px 0 0; }
/* 残した／残してある結果 */
.q-saved{ font-size:11.5px; color:var(--text2); border:1px dashed var(--border); border-radius:9px;
padding:7px 11px; margin:0 0 10px; line-height:1.8; }
.q-saved span{ display:block; font-size:10.5px; color:var(--text3); }
.q-savedbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px;
border:1px solid var(--border); border-radius:9px; background:var(--bg2); padding:8px 12px; font-size:12px; color:var(--text); }
.q-savedbar span{ font-size:10.5px; color:var(--text3); }
.q-savedbar .q-open{ margin-left:auto; }
/* ── PDF を選ぶ／放り込む ── */
.q-pick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px;
border-radius:12px; padding:2px; transition:background .15s, box-shadow .15s; }
/* 🔴 ドラッグで持ってきている間は、受け取れることが分かるように光らせる */
.q-pick.over{ background:rgba(29,185,122,.10); box-shadow:0 0 0 2px rgba(29,185,122,.45) inset; }
.q-file small{ display:block; font-size:10px; font-weight:400; color:var(--text3); margin-top:1px; }
.q-file input{ display:none; }
.q-file span{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
border:1px dashed var(--border); background:var(--bg2); color:var(--text);
border-radius:10px; padding:9px 16px; font-size:12.5px; font-weight:700; }
.q-file span:hover{ border-color:var(--brand,#1f7a4d); }
.q-fname{ font-size:11.5px; color:var(--text2); }
.q-busy{ font-size:11.5px; color:var(--text3); }
.q-empty{ font-size:12px; color:var(--text2); line-height:1.9; border:1px solid var(--border);
border-radius:10px; background:var(--bg2); padding:14px 16px; }
.q-empty span{ font-size:11px; color:var(--text3); }
/* ── 🔴 読み取りに失敗した（数字を出さない） ── */
.q-ng{ border:1px solid rgba(239,68,68,.55); background:rgba(239,68,68,.08);
border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--text); line-height:1.8; }
.q-ng-why{ font-size:11.5px; color:var(--text2); margin-top:4px; }
.q-ng-note{ font-size:11px; color:var(--text3); margin-top:7px; line-height:1.8; }
/* ── 合計 ── */
.q-sum{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.q-card{ flex:1 1 150px; border:1px solid var(--border); border-radius:10px; background:var(--bg2);
padding:10px 13px; display:flex; align-items:baseline; gap:8px; }
.q-k{ font-size:10.5px; color:var(--text3); }
.q-card b{ font-size:19px; font-weight:800; color:var(--text); }
.q-y{ font-size:11.5px; color:var(--text2); margin-left:auto; }
.q-diff b{ color:var(--ins-c,#f59e0b); }
/* ── 検算 ── */
.q-audit{ border:1px solid var(--border); border-radius:10px; padding:10px 13px; margin:0 0 12px;
font-size:12px; color:var(--text); line-height:1.8; }
.q-audit.ok{ border-color:rgba(29,185,122,.45); background:rgba(29,185,122,.07); }
.q-audit.ng{ border-color:rgba(239,68,68,.55); background:rgba(239,68,68,.08); }
.q-audit span{ font-size:11px; color:var(--text3); margin-left:6px; }
.q-parts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
/* 🔔 v2.8.4 「直す先が無いQまたぎ」がどこへ行ったかの1行 */
.q-audit-note{ font-size:11.5px; color:#2563eb; background:rgba(37,99,235,.09);
border:1px solid rgba(37,99,235,.35); border-radius:8px; padding:6px 10px; margin-top:8px; line-height:1.8; }
.q-audit-note b{ color:#2563eb; }
.q-part{ border:1px solid var(--border); border-radius:8px; background:var(--bg); padding:6px 10px;
font-size:11px; color:var(--text3); display:flex; align-items:baseline; gap:7px; }
.q-part b{ font-size:12.5px; color:var(--text); }
.q-part i{ font-style:normal; font-size:10px; color:var(--text3); }
/* ── まとめて返車済みにした日（本命） ── */
.q-lump{ border:1px solid rgba(245,158,11,.55); background:rgba(245,158,11,.08);
border-radius:10px; padding:11px 14px; margin:0 0 12px; font-size:12.5px; color:var(--text); }
/* ⚠ 見出しだけを行にする。中の （台数・金額）まで行にすると、文が途中で折れる */
.q-lump > b:first-child{ display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.q-lump-r{ font-size:12px; color:var(--text2); margin-top:5px; }
.q-lump-n{ font-size:11px; color:var(--text3); line-height:1.8; margin-top:6px; }
/* ── タブ ── */
.q-tabs{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:0 0 8px; }
.q-tab{ border:1px solid var(--border); background:transparent; color:var(--text3);
border-radius:8px; padding:5px 11px; font-size:11.5px; cursor:pointer; white-space:nowrap; }
.q-tab span{ margin-left:6px; font-weight:800; color:var(--text2); }
.q-tab.on{ background:var(--bg3); color:var(--text); border-color:var(--brand,#1f7a4d); font-weight:700; }
.q-print{ margin-left:auto; border:1px solid var(--border); background:var(--bg3); color:var(--text);
border-radius:8px; padding:5px 13px; font-size:11.5px; cursor:pointer; }
/* ── 一覧 ── */
.q-body{ overflow-x:auto; }
.q-note{ font-size:11px; color:var(--text3); line-height:1.8; margin:0 0 6px; }
.q-none{ font-size:12px; color:var(--text3); padding:14px 4px; }
.q-t{ width:100%; border-collapse:collapse; font-size:11.5px; }
.q-t th{ text-align:left; font-weight:700; color:var(--text3); font-size:10.5px;
border-bottom:1px solid var(--border); padding:6px 8px; white-space:nowrap; }
.q-t td{ border-bottom:1px solid var(--border2,#232c34); padding:6px 8px; color:var(--text2); vertical-align:top; }
.q-t td.n, .q-t th.n{ text-align:right; font-variant-numeric:tabular-nums; }
/* 🔴 `q-s`＝**行の下に小さく添える字**（`` の中でだけ使う。`display:block` なので
マス（td）に直接付けると、そのマスが表の行から外れて**半行ズレる**。2026-08-23 に実際にズレていた）。 */
.q-s{ display:block; font-size:10px; color:var(--text3); }
/* マスそのものを小さい字にしたい時はこちら（表の並びを崩さない） */
.q-how{ font-size:10px; color:var(--text3); white-space:nowrap; }
.q-t td.ok{ color:#1db97a; }
.q-t td.warn{ color:#f59e0b; }
.q-t td.bad{ color:#ef4444; font-weight:700; }
/* 💴 v1.185.0 マスの下に添える小さい字も、ちがう時は赤くする（`td.bad` は| にしか効かないため） */
.q-t .q-s.bad{ color:#ef4444; font-weight:700; }
.q-open{ border:1px solid var(--border); background:var(--bg3); color:var(--text);
border-radius:7px; padding:2px 9px; font-size:10.5px; cursor:pointer; white-space:nowrap; }
/* ================================================================
🤖 ③ AIチェック
================================================================ */
.ai-sub{ font-size:11.5px; color:var(--text3); line-height:1.8; margin:2px 0 9px; }
.ai-mat{ border:1px solid var(--border); border-radius:10px; background:var(--bg2);
padding:10px 14px; font-size:11.5px; color:var(--text2); }
.ai-mat b{ color:var(--text); }
.ai-mat ul{ margin:6px 0 0; padding-left:18px; line-height:1.9; }
.ai-mat-n{ font-size:10.5px; color:var(--text3); margin-top:7px; display:flex; align-items:center; gap:10px; }
.ai-b2{ border:1px solid var(--border); background:var(--bg3); color:var(--text2);
border-radius:7px; padding:3px 10px; font-size:10.5px; cursor:pointer; }
.ai-run{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:11px 0 0; }
.ai-b{ border:1px solid var(--brand,#1f7a4d); background:var(--bg3); color:var(--text);
border-radius:10px; padding:9px 18px; font-size:12.5px; font-weight:700; cursor:pointer; }
.ai-b[disabled]{ opacity:.6; cursor:default; }
.ai-cost{ font-size:10.5px; color:var(--text3); }
.ai-note{ font-size:11.5px; color:var(--text3); line-height:1.8; margin-top:10px; }
.ai-note span{ display:block; font-size:10.5px; }
.ai-ng{ border:1px solid rgba(239,68,68,.55); background:rgba(239,68,68,.08); border-radius:10px;
padding:10px 13px; margin-top:10px; font-size:12px; color:var(--text); }
.ai-ng span{ display:block; font-size:11px; color:var(--text2); margin-top:3px; }
.ai-out{ border:1px solid var(--border); border-radius:10px; background:var(--bg2); margin-top:11px; overflow:hidden; }
.ai-out-h{ display:flex; align-items:baseline; gap:10px; padding:8px 13px; border-bottom:1px solid var(--border);
font-size:12px; font-weight:800; color:var(--text); }
.ai-out-h span{ font-size:10px; font-weight:400; color:var(--text3); margin-left:auto; }
.ai-out-b{ padding:11px 14px; font-size:12.5px; color:var(--text2); line-height:1.95; }
.ai-out-n{ padding:0 14px 10px; font-size:10.5px; color:var(--text3); }
.ai-prev{ border:1px dashed var(--border); border-radius:10px; padding:10px 13px; margin-top:11px;
font-size:11.5px; color:var(--text3); }
.ai-prev b{ color:var(--text2); }
/* ================================================================
🔎 v2.3.0 伝票の中身を見る（内容と原価）
⚠ 入り口は②と同じ形（4つの箱）。覚えることを増やさない。
================================================================ */
.ai-gr{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin:12px 0 10px; }
.ai-grb{ display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer; min-width:0;
border:1px solid var(--border); background:var(--bg2); border-radius:12px; padding:10px 13px; }
.ai-grb:hover{ border-color:var(--text3); }
.ai-grb.on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; background:var(--bg1); }
.ai-grb.hot .ai-grb-n{ color:var(--ins-c,#f59e0b); }
.ai-grb-t{ font-size:12px; font-weight:800; color:var(--text2); }
.ai-grb-n{ font-size:24px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.15; }
.ai-grb-s{ font-size:10px; color:var(--text3); line-height:1.5; }
.ai-list{ display:flex; flex-direction:column; gap:8px; }
.ai-c{ border:1px solid var(--border); border-left-width:4px; border-radius:11px;
background:var(--bg2); padding:10px 13px; }
.ai-c.hi{ border-left-color:#ef4444; }
.ai-c.md{ border-left-color:#f59e0b; }
.ai-c.lo{ border-left-color:var(--border2); }
.ai-c-h{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.ai-c-h b{ font-size:13px; color:var(--text); }
.ai-g{ font-size:10.5px; font-weight:800; border-radius:6px; padding:1px 7px; }
.ai-c.hi .ai-g{ color:#fff; background:#ef4444; }
.ai-c.md .ai-g{ color:#fff; background:#f59e0b; }
.ai-c.lo .ai-g{ color:var(--text3); background:var(--bg3); }
.ai-c-car{ font-size:11px; color:var(--text2); }
.ai-c-s{ font-size:10.5px; color:var(--text3); margin-left:auto; }
.ai-c-b{ display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; }
.ai-n{ display:flex; flex-direction:column; gap:0; min-width:0; }
.ai-n i{ font-style:normal; font-size:9.5px; color:var(--text3); }
.ai-n b{ font-size:12.5px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.ai-c-n{ font-size:10.5px; color:var(--text3); margin-top:6px; line-height:1.7; }
.ai-c-ai{ font-size:11.5px; color:var(--text2); margin-top:7px; line-height:1.75;
border-top:1px dashed var(--border); padding-top:6px; }
.ai-c-ai span{ font-size:9.5px; font-weight:800; color:var(--brand); margin-right:7px; }
/* 🖨 v2.4.0 元のPDFに刷り込んで出す */
.ai-pr{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 0;
border:1px dashed var(--border); border-radius:11px; padding:9px 13px; background:var(--bg2); }
.ai-b3{ border:1px solid var(--border2); background:var(--bg3); color:var(--text);
border-radius:9px; padding:7px 15px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ai-b3[disabled]{ opacity:.5; cursor:default; }
.ai-pr-n{ font-size:10.5px; color:var(--text3); line-height:1.7; }
.ai-pr-n b{ color:var(--text2); }
.ai-none{ font-size:12px; color:var(--text3); padding:16px 4px; }
.ai-foot{ font-size:10.5px; color:var(--text3); line-height:1.8; margin-top:10px; }
@media (max-width: 1100px){
.ai-gr{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px){
.ai-gr{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ai-c-s{ margin-left:0; width:100%; }
}
/* ── 器（②③を縦に並べる） ── */
.ins-q-steps.ins-q-wide{ display:block; }
.ins-q-step.ins-q-live{ border:1px solid var(--border); border-radius:12px; background:var(--bg);
padding:14px 16px; margin:0 0 14px; }
@media (max-width: 860px){
.q-sum{ flex-direction:column; }
.q-tabs{ gap:4px; }
.q-print{ margin-left:0; }
}
@media print{
.q-range, .q-pick, .q-tabs, .ai-run, .ai-mat-n{ display:none !important; }
.q-body{ overflow:visible; }
}
/* ================================================================
🛠 v2.0.0 一覧の右端「直す／済」（ゆうた指定＝答えは2つだけ）
----------------------------------------------------------------
🔴 `q-s` と同じ失敗をしない＝**マスに display を直に付けない**（v1.184.0 の半行ズレ）。
並べるのは | の**中**の箱（.q-fx）だけ。
⚠ ボタンは小さく、でも押しやすく。1行に「何を」「直す」「伝票を直した」の3つ。
================================================================ */
.q-t td.q-act{ white-space:nowrap; }
.q-fx{ display:flex; align-items:center; gap:5px; padding:2px 0; }
.q-fx + .q-fx{ border-top:1px dashed var(--border); }
.q-fx-k{ font-size:10px; font-weight:800; color:var(--text3); min-width:40px; }
.q-fx-go{ font-size:11px; font-weight:700; color:#fff; background:var(--brand); border:1px solid var(--brand);
border-radius:6px; padding:2px 8px; cursor:pointer; white-space:nowrap; }
.q-fx-go:hover{ filter:brightness(1.08); }
/* 🔴 重いもの（実績日・金額＝締めた月の数字が動く）は色を変える。押す前に「あ、これは重い」と分かるように */
.q-fx-go.is-heavy{ color:#ef4444; background:transparent; border-color:#ef4444; }
.q-fx-go.is-heavy:hover{ color:#fff; background:#ef4444; }
.q-fx-mk{ font-size:11px; font-weight:700; color:var(--text2); background:transparent; border:1px solid var(--border2);
border-radius:6px; padding:2px 8px; cursor:pointer; white-space:nowrap; }
.q-fx-mk:hover{ background:var(--bg3); }
/* 🗓 v2.2.0 実績日のふだんの答え「このままでよい」は、目立つ側に置く */
.q-fx-keep{ color:var(--text); border-color:var(--border2); background:var(--bg3); }
.q-fx-keep:hover{ border-color:var(--brand); }
.q-fx-lock{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700;
color:var(--text3); background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:1px 7px; }
.q-fx.is-done{ opacity:.62; }
.q-fx-done{ font-size:10.5px; font-weight:800; color:var(--green); background:rgba(29,185,122,.14);
border:1px solid rgba(29,185,122,.45); border-radius:6px; padding:1px 7px; }
.q-fx-done i{ font-style:normal; font-weight:600; color:var(--text3); margin-left:4px; }
.q-fx-un{ font-size:10.5px; color:var(--text3); background:transparent; border:none; text-decoration:underline; cursor:pointer; }
/* ⏳ v2.104.0 「伝票を直した」を押したのに、あとで読んだ伝票でも変わっていない */
.q-fx-stale{ display:block; width:100%; font-size:10.5px; font-weight:700; color:#f59e0b; margin:2px 0 4px; }
.q-act-ok{ font-size:11px; color:var(--text3); }
/* 一覧の頭に出す「2択の説明」 */
.q-2way{ font-size:11.5px; color:var(--text2); background:var(--bg3); border-radius:8px; padding:8px 11px; margin-bottom:8px; line-height:1.6; }
.q-2way b{ color:var(--text); }
/* 🔢 v2.0.0 1行ごとの番号（ゆうた指定）。
🔴 見た目はデータチェックの `.ins-no` をそのまま借りる（等幅・押すとコピー）。ここで作り直さない。 */
.q-t td.q-no{ white-space:nowrap; }
.q-t td.q-no .ins-no{ font-size:10.5px; }
/* ================================================================
🗓 v2.0.0 PDF の期間とクォーターの割り振り／🧹 片づけボタン
================================================================ */
.q-term{ background:var(--bg1); border:1px solid var(--border); border-radius:11px; padding:10px 13px; margin-bottom:10px; }
.q-term-h{ font-size:12.5px; color:var(--text2); }
.q-term-h b{ color:var(--text); }
/* ⚠ v2.2.0 ここに有った `.q-part{color:#f59e0b}` は消した。
上（検算の内訳）で使っている同じ名前の箱の字まで、オレンジに塗ってしまっていた。 */
/* 🗓 v2.2.0 クォーターの切り替えは **Qの BOX 1本**（上の切り替えボタン列は撤去した）。
・now …… いま入れたPDFに入っているQ
・on ……… そのうち、いま開いているQ
・part …… そのQの日が**ぜんぶは入っていない**（点線＝済にしない印） */
.q-pq.now{ background:var(--bg2); }
.q-pq.now.on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.q-pq.part{ border-style:dashed; }
.q-pq-part{ font-style:normal; font-size:10px; font-weight:700; color:#f59e0b; margin-left:6px; }
.q-plan-x{ margin-top:8px; }
/* 🗓 v2.97.0 PDF がほかの月にもまたがる時の1行（枠にはしない・その月へ動くボタン） */
.q-plan-more{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; padding:8px 12px;
border:1px dashed var(--border); border-radius:8px; font-size:12.5px; color:var(--text2); }
.q-plan-more b{ color:var(--text); }
.q-plan-go{ margin-left:auto; padding:4px 12px; border-radius:6px; border:1px solid var(--brand,#1f7a4d);
background:transparent; color:var(--brand,#1f7a4d); font-weight:700; cursor:pointer; font-size:12.5px; }
.q-plan-go:hover{ background:var(--brand-soft, rgba(31,122,77,.12)); }
/* 入れたPDFを片づける */
.q-clear{ font-size:11.5px; font-weight:700; color:var(--text2); background:transparent;
border:1px solid var(--border2); border-radius:7px; padding:3px 10px; margin-left:auto; cursor:pointer; }
.q-clear:hover{ background:var(--bg3); color:var(--text); }
/* Q1〜Q4 の「×」＝その結果を消して「まだ」に戻す */
.q-pqwrap{ position:relative; display:flex; }
.q-pq-x{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; line-height:1; font-size:12px; font-weight:800;
color:var(--text3); background:var(--bg1); border:1px solid var(--border2); border-radius:50%; cursor:pointer; padding:0; }
.q-pq-x:hover{ color:#fff; background:#ef4444; border-color:#ef4444; }
/* ================================================================
🧹 v2.1.0 箱を減らした（ゆうた「UIがかなりごちゃごちゃしてる」）
上＝PDFと期間とQ1〜Q4（q-top）／下＝合計と検算（q-nums）の2箱だけ
================================================================ */
.q-top{ background:var(--bg1); border:1px solid var(--border); border-radius:12px; padding:11px 13px; margin-bottom:10px; }
.q-top > .q-pick{ margin:0; }
.q-top > .q-term{ margin:10px 0 0; background:transparent; border:none; border-top:1px solid var(--border); border-radius:0; padding:10px 0 0; }
.q-top > .q-plan{ margin:10px 0 0; background:transparent; border:none; border-top:1px solid var(--border); border-radius:0; padding:10px 0 0; }
.q-pick.done{ padding:7px 11px; }
.q-pick.done .q-file span small{ display:none; }
.q-pick-n{ font-size:11.5px; color:var(--text3); line-height:1.6; }
.q-pick-n b{ color:var(--text2); }
.q-nums{ background:var(--bg1); border:1px solid var(--border); border-radius:12px; padding:11px 13px; margin-bottom:10px; }
.q-nums.bad{ border-color:rgba(239,68,68,.55); }
.q-nums > .q-sum{ margin:0; }
.q-nums > .q-audit{ margin:10px 0 0; border:none; border-top:1px solid var(--border); border-radius:0; padding:10px 0 0; background:transparent; }
.q-saved{ font-size:11.5px; color:var(--text3); margin:-4px 0 10px; padding:0 3px; }
.q-plan-h span{ font-size:11px; font-weight:600; color:var(--text3); margin-left:8px; }
/* ================================================================
🃏 v2.1.0 一覧を「表」から「カード」へ
（ゆうた「字がかなり小さい／ワイドはスクロールになると確認しずらい／
ハイト方向にひろげる／客名をはっきり／PitとソフトのZれは同一列で」）
🔴 横スクロールは1つも出さない。狭い端末では縦に積むだけ。
================================================================ */
.q-cards{ display:flex; flex-direction:column; gap:9px; }
.q-c{ background:var(--bg1); border:1px solid var(--border); border-left:3px solid var(--border2);
border-radius:11px; padding:11px 13px; }
.q-c.out{ border-left-color:#f59e0b; }
.q-c.note{ border-left-color:#2563eb; } /* 🔔 v2.8.3 直す先が無い＝お知らせ */
.q-c.is-done{ opacity:.55; }
.q-c-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
.q-c-how{ font-size:10.5px; font-weight:700; color:var(--text3); }
.q-c-out{ font-size:10.5px; font-weight:800; color:#f59e0b; background:rgba(245,158,11,.13);
border:1px solid rgba(245,158,11,.45); border-radius:6px; padding:1px 8px; }
/* 🔔 v2.8.3 直す先が無い「お知らせ」＝黄でも赤でもない青。ひと目で「見るだけ」と分かるように */
.q-c-note{ font-size:10.5px; font-weight:800; color:#2563eb; background:rgba(37,99,235,.13);
border:1px solid rgba(37,99,235,.45); border-radius:6px; padding:1px 8px; }
/* 🔴 お客様の名前がいちばん大きい */
.q-c-who{ font-size:16px; font-weight:800; color:var(--text); letter-spacing:-.01em; line-height:1.35; }
.q-c-plate{ display:block; font-size:12.5px; font-weight:600; color:var(--text2); margin-top:1px; }
/* 🔴 整備ソフトと PitFlow を上下に並べる＝日付も金額も同じ位置で見くらべる */
.q-c-cmp{ margin-top:8px; border-top:1px solid var(--border); padding-top:8px; }
.q-c-r{ display:grid; grid-template-columns:84px 132px 1fr auto; gap:8px; align-items:baseline; padding:3px 0; }
.q-c-src{ font-size:11px; font-weight:800; color:var(--text3); }
.q-c-d{ font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.q-c-d i{ font-style:normal; font-size:10px; font-weight:600; color:var(--text3); margin-left:5px; }
.q-c-a{ font-size:15px; font-weight:800; color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }
.q-c-a i{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--text3); margin-left:2px; }
.q-c-p{ font-size:11px; color:var(--text3); text-align:right; white-space:nowrap; }
.q-c-p em{ font-style:normal; display:block; }
.q-c-p em.bad{ color:#ef4444; font-weight:700; }
/* 差は、比べた2行のすぐ下（左右に目を振らない） */
.q-c-gap{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; padding-left:84px; }
.q-c-g{ font-size:12px; font-weight:700; color:var(--text2); background:var(--bg3);
border-radius:7px; padding:2px 9px; }
.q-c-g.ok{ color:var(--green); background:rgba(29,185,122,.12); }
.q-c-g.warn{ color:#f59e0b; background:rgba(245,158,11,.12); }
.q-c-g.bad{ color:#ef4444; background:rgba(239,68,68,.12); font-weight:800; }
/* 🔗 v2.8.0 Qの境目の車＝「無い」ではなく「別のQに在る」。青にして赤・黄と見分ける */
.q-c-g.cross{ color:#2563eb; background:rgba(37,99,235,.12); font-weight:800; }
.q-c-st{ font-size:12px; color:var(--text2); margin-top:7px; }
.q-c-st b{ color:var(--text); }
.q-c-st span{ color:var(--text3); margin:0 5px; }
.q-c-st.bad em{ font-style:normal; font-size:11px; font-weight:800; color:#ef4444; margin-left:7px; }
.q-c-act{ margin-top:8px; border-top:1px dashed var(--border); padding-top:7px; }
.q-c-act .q-fx{ padding:3px 0; }
.q-c-act .q-fx-k{ min-width:52px; font-size:11px; }
.q-c-act .q-fx-go, .q-c-act .q-fx-mk{ font-size:12px; padding:3px 11px; }
@media (max-width:700px){
.q-c-r{ grid-template-columns:70px 1fr; gap:2px 8px; }
.q-c-a, .q-c-p{ text-align:left; grid-column:2; }
.q-c-gap{ padding-left:0; }
}
/* ================================================================
🗂 v2.2.0 入り口は4つだけ（ゆうた 2026-08-24）
・データがちがう／金額がちがう／日付がちがう／OK
・1件は1か所にしか出ないので、4つを足すと全部になる
================================================================ */
.q-gr{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:0 0 12px; align-items:stretch; }
.q-grb{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; cursor:pointer;
border:1px solid var(--border); border-radius:12px; background:var(--bg1); padding:10px 13px; min-width:0; }
.q-grb:hover{ border-color:var(--text3); }
.q-grb.on{ border-color:var(--brand); background:var(--bg2); box-shadow:0 0 0 1px var(--brand) inset; }
.q-grb-l{ font-size:12.5px; font-weight:800; color:var(--text2); }
.q-grb.on .q-grb-l{ color:var(--text); }
.q-grb-n{ font-size:26px; font-weight:800; line-height:1.15; color:var(--text); font-variant-numeric:tabular-nums; }
/* 🔢 v2.77.0 グループの箱の「+◯円」を消したので、その行も外した */
.q-grb-t{ font-size:10.5px; color:var(--text3); line-height:1.5; margin-top:3px; }
.q-grb.is-ok .q-grb-n{ color:var(--green); }
.q-grb.is-ok.on{ border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }
.q-chk{ display:flex; align-items:center; gap:10px; }
.q-chk .q-print{ margin-left:auto; }
/* 検算＝合っている時は小さく1行、合わない時だけ大きく赤く */
.q-chk{ font-size:11px; margin-top:8px; }
.q-chk.ok{ color:var(--green); }
.q-chk.ng{ color:#ef4444; font-weight:700; font-size:12.5px; }
/* 🔴🔴 片方にしか無い1件＝赤いカード／カードは有る＝黄色に格下げ */
.q-c.gone{ border-color:rgba(239,68,68,.55); border-left-color:#ef4444; border-left-width:5px;
background:rgba(239,68,68,.06); }
.q-c-gone{ font-size:11.5px; font-weight:800; color:#ef4444; background:rgba(239,68,68,.14);
border:1px solid rgba(239,68,68,.5); border-radius:6px; padding:1px 9px; }
/* 🟢 v2.101.0 別のQで照合済みの PitFlowだけの行＝OK（緑）。直すボタンは置かない */
.q-c.okq{ border-color:rgba(29,185,122,.5); border-left-color:#1db97a; border-left-width:5px; }
.q-c-okq{ font-size:11.5px; font-weight:800; color:#1db97a; background:rgba(29,185,122,.13); padding:2px 9px; border-radius:6px; }
.q-c.gone-y{ border-color:rgba(245,158,11,.5); border-left-color:var(--ins-c,#f59e0b); border-left-width:5px;
background:rgba(245,158,11,.05); }
.q-c-gone-y{ font-size:11.5px; font-weight:800; color:var(--ins-c,#f59e0b); background:rgba(245,158,11,.13);
border:1px solid rgba(245,158,11,.45); border-radius:6px; padding:1px 9px; }
.q-c.mism{ border-left-color:#ef4444; }
.q-c-warn{ font-size:10.5px; font-weight:800; color:#ef4444; background:rgba(239,68,68,.12);
border:1px solid rgba(239,68,68,.5); border-radius:6px; padding:1px 8px; }
.q-fx-note{ font-size:10.5px; color:var(--text3); line-height:1.6; }
.q-fx-note b{ color:#ef4444; }
.q-act-ok b{ color:var(--text2); }
.q-act-ok em{ font-style:normal; font-size:10px; color:var(--text3); }
/* 🃏 v2.2.0 カードの中を2つに割る＝左は見くらべ、右は片づけ
🔴 1列のまま横に伸ばすと、金額だけが遠くへ飛んでいく（2026-08-23 ゆうた指摘） */
.q-c-body{ display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:14px; align-items:start; }
.q-c-main{ min-width:0; }
.q-c-plate em{ font-style:normal; color:var(--text3); font-weight:600; margin-left:9px; }
.q-c-plate em.bad{ color:#ef4444; font-weight:700; }
.q-c-plate em::before{ content:'／'; color:var(--border2); margin-right:9px; }
.q-c-cmp{ max-width:660px; }
.q-c-r{ display:grid; grid-template-columns:74px 100px 100px minmax(0,1fr) 78px 116px; gap:8px;
align-items:baseline; padding:3px 0; }
.q-c-hd{ padding:0 0 2px; }
.q-c-hd span{ font-size:9.5px; font-weight:700; color:var(--text3); }
.q-c-hd span:nth-child(4), .q-c-hd span:nth-child(5), .q-c-hd span:nth-child(6){ text-align:right; }
.q-c-r i{ display:none; } /* 広い時は上の見出し行だけ。狭い時に中で名乗る */
.q-c-d.none{ color:var(--text3); font-weight:600; }
.q-c-d.flat{ color:var(--text2); font-weight:600; } /* 実績日＝事実として出すだけ */
.q-c-d.miss{ font-size:12.5px; color:var(--ins-c,#f59e0b); }
.q-c-d.bad{ color:#ef4444; }
.q-c-a.bad{ color:#ef4444; }
.q-c-a.none{ color:var(--text3); font-weight:600; }
.q-c-p{ white-space:nowrap; }
/* 🚗 車体番号＝いちばん強い「同じ車」の証拠 */
.q-c-v{ font-size:10.5px; letter-spacing:-.02em; color:var(--text3); text-align:right;
font-family:Consolas,Menlo,"Courier New",monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-c-v.ok{ color:var(--green); font-weight:700; }
.q-c-v.bad{ color:#ef4444; font-weight:700; }
.q-c-v.none{ color:var(--border2); font-family:inherit; }
.q-c-gap{ padding-left:74px; }
/* 右の列＝片づけ。上下に積む */
.q-c-act{ border-left:1px dashed var(--border); border-top:none; padding:0 0 0 12px; margin-top:0; align-self:stretch; }
.q-c-act .q-fx{ padding:4px 0; display:flex; flex-wrap:wrap; gap:5px; }
.q-c-act .q-fx-k{ min-width:100%; font-size:10.5px; }
@media (max-width:960px){
.q-c-body{ grid-template-columns:1fr; gap:0; }
.q-c-act{ border-left:none; border-top:1px dashed var(--border); padding:7px 0 0; margin-top:8px; }
.q-c-act .q-fx-k{ min-width:52px; font-size:11px; }
.q-gr, .q-plan-b{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
.q-c-hd{ display:none; }
.q-c-r{ grid-template-columns:1fr; gap:1px; padding:5px 0; }
.q-c-r + .q-c-r{ border-top:1px solid var(--border); }
.q-c-a, .q-c-p, .q-c-v{ text-align:left; }
.q-c-r i{ display:inline-block; font-style:normal; font-size:10px; font-weight:700;
color:var(--text3); min-width:44px; margin-right:6px; }
.q-c-gap{ padding-left:0; }
}
/* ================================================================
✍ v2.2.0 書き込みの帯／書き込んだ内容の見え方
⚠ 顧客詳細（customers.js）からも同じ表を使う＝見た目を2つ持たない。
================================================================ */
.q-wr{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
border:1px solid var(--brand,#26a269); background:var(--brand-soft,rgba(38,162,105,.15));
border-radius:12px; padding:11px 14px; margin:0 0 12px; }
.q-wr.done{ border-color:var(--border); background:var(--bg1); }
/* 📒 v2.105.0 伝票がまだ書き込まれていない */
.q-wr.warn{ border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.08); }
.q-wr-l{ display:flex; flex-direction:column; gap:1px; }
.q-wr-l b{ font-size:13.5px; color:var(--text); }
.q-wr-l span{ font-size:11.5px; color:var(--text3); }
.q-wr-b{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--text2);
background:var(--bg3); border:1px solid var(--border); border-radius:9px; padding:7px 16px; cursor:pointer; }
.q-wr-b.go{ color:#fff; background:var(--brand); border-color:var(--brand); font-size:13.5px; padding:8px 22px; }
.q-wr-b:hover{ filter:brightness(1.1); }
.vw{ border:1px solid var(--border); border-radius:12px; background:var(--bg1); overflow:hidden; }
.vw-h{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); }
.vw-h b{ font-size:13.5px; }
.vw-x{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--text2);
background:var(--bg3); border:1px solid var(--border); border-radius:7px; padding:3px 12px; cursor:pointer; }
.vw-pick{ display:flex; gap:6px; flex-wrap:wrap; padding:11px 14px 0; }
.vw-p{ font-size:11.5px; color:var(--text3); background:transparent; border:1px solid var(--border);
border-radius:8px; padding:3px 11px; cursor:pointer; }
.vw-p.on{ color:var(--text); border-color:var(--brand); background:var(--bg3); font-weight:700; }
.vw-p i{ font-style:normal; font-size:9.5px; font-weight:800; color:var(--ins-c,#f59e0b);
background:rgba(245,158,11,.14); border-radius:5px; padding:0 5px; margin-left:5px; }
.vw-sec{ padding:13px 14px 2px; }
.vw-t{ font-size:11px; font-weight:800; color:var(--text3); margin-bottom:7px; }
.vw-car{ border:1px solid var(--border); border-radius:10px; padding:11px 13px; background:var(--bg2); }
.vw-cn{ font-size:16px; font-weight:800; color:var(--text); margin-bottom:7px; }
.vw-t2{ width:100%; border-collapse:collapse; font-size:12.5px; }
.vw-t2 th{ text-align:left; font-weight:600; color:var(--text3); width:92px; padding:3px 0; font-size:11.5px; }
.vw-t2 td{ color:var(--text); padding:3px 0; }
.vw-t2 tr.vw-new td{ color:var(--green); font-weight:700; font-family:Consolas,Menlo,monospace; }
.vw-badge{ font-size:10px; font-weight:800; color:var(--green); background:rgba(29,185,122,.14);
border:1px solid rgba(29,185,122,.45); border-radius:6px; padding:1px 7px; margin-left:8px; font-family:inherit; }
.vw-his{ display:flex; flex-direction:column; gap:7px; }
.vw-hr{ border:1px solid var(--border); border-radius:10px; padding:9px 12px; background:var(--bg2); }
.vw-hr.on{ border-color:rgba(29,185,122,.4); }
.vw-hr.old{ opacity:.55; }
.vw-hd{ font-size:12.5px; font-weight:800; color:var(--text); }
.vw-hm{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-top:2px; }
.vw-hm b{ font-size:17px; color:var(--text); font-variant-numeric:tabular-nums; }
.vw-hm span{ font-size:11.5px; color:var(--text3); }
.vw-hm em{ font-style:normal; font-size:12.5px; font-weight:800; color:var(--green); }
.vw-hn{ font-size:11px; color:var(--text3); margin-top:3px; }
/* ✂️ v2.12.2 .vw-hou-c は .den-hou に一本化 */
.vw-tw{ overflow-x:auto; padding-bottom:10px; }
.vw-t3{ width:100%; border-collapse:collapse; font-size:12px; min-width:600px; }
.vw-t3 th{ text-align:left; font-size:10.5px; font-weight:700; color:var(--text3);
border-bottom:1px solid var(--border); padding:6px 8px; white-space:nowrap; }
.vw-t3 td{ padding:5px 8px; color:var(--text2); border-bottom:1px solid var(--border2,#232c34); white-space:nowrap; }
.vw-t3 td:first-child{ white-space:normal; color:var(--text); }
.vw-t3 .n{ text-align:right; font-variant-numeric:tabular-nums; }
.vw-t3 .k{ font-size:10.5px; color:var(--text3); }
.vw-t3 .c{ color:var(--text3); }
.vw-t3 .g{ color:var(--green); font-weight:700; }
.vw-t3 tr.hd td{ background:var(--bg3); padding:6px 8px; border-bottom:1px solid var(--border); }
.vw-t3 tr.hd b{ font-size:12.5px; color:var(--text); }
.vw-t3 tr.hd span{ font-size:10.5px; color:var(--text3); margin-left:9px; }
.vw-t3 tr.mi td, .vw-t3 tr.mi .g{ color:var(--ins-c,#f59e0b); }
/* 🗒 v2.12.3 フロントマンのコメント行。
🔴 v2.12.4（ゆうた「└ とかは要らない そのまんまにしてほしい」）
**飾りを足さない。** 紙に打ってある字を、打ってある所にそのまま置く。
⚠ 金額の仲間に見えないよう、字の濃さだけ落とす（数字の列は空のまま）。 */
.vw-t3 tr.cm td{ color:var(--text2); font-size:11.5px; padding:4px 8px;
border-bottom:1px solid var(--border2,#232c34); white-space:normal; }
.vw-t3 tfoot th{ border-top:1px solid var(--border); border-bottom:none; font-size:12.5px; color:var(--text); padding-top:8px; }
.vw-t3 tfoot th.g{ color:var(--green); }
.vw-t3 tfoot th.c{ color:var(--text3); }
/* 💴 v2.12.2 税込の行。売上（税抜）より一段おとなしく＝どれが本体か迷わない */
.vw-t3 tfoot tr.ft2 th{ border-top:none; padding-top:2px; font-size:11.5px; color:var(--text2); font-weight:700; }
/* 💴 v2.12.2 伝票の見出し1行（`pitQDenHead`）。入れ物は .vw-hm と .ch-den-h の2つ */
.den-nuki{ font-size:11px !important; font-weight:700; color:var(--text3) !important; margin-left:3px; }
.den-hou{ color:var(--orange) !important; }
.vw-hou{ border:1px dashed var(--border2); border-radius:10px; padding:10px 12px; margin-top:11px; background:var(--bg2); }
.vw-hou-t{ font-size:12px; font-weight:800; color:var(--text2); }
.vw-hou-t span{ display:block; font-size:10.5px; font-weight:400; color:var(--text3); margin-top:2px; }
.vw-hou-t b{ color:var(--ins-c,#f59e0b); }
.vw-hou-b{ margin-top:7px; }
.vw-hou-r{ display:flex; align-items:baseline; gap:10px; font-size:12px; color:var(--text2); padding:2px 0; }
.vw-hou-r b{ margin-left:auto; color:var(--text); font-variant-numeric:tabular-nums; }
.vw-hou-r.sum{ border-top:1px solid var(--border); margin-top:4px; padding-top:5px; font-weight:700; }
.vw-hou-n{ font-size:11px; color:var(--text3); line-height:1.8; margin-top:8px; }
.vw-hou-n b{ color:var(--text2); }
.vw-go{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px 14px; }
.vw-go span{ font-size:11px; color:var(--text3); }
/* 🧹 v2.8.7 内訳は押した時だけ開く（ゆうた「ややこしいから出さないで」） */
.q-more{ margin:0 0 12px; }
.q-more > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
font-size:11px; color:var(--text3); border:1px solid var(--border); border-radius:8px; padding:4px 11px; }
.q-more > summary::-webkit-details-marker{ display:none; }
.q-more > summary::before{ content:'▸'; }
.q-more[open] > summary::before{ content:'▾'; }
.q-more > summary:hover{ color:var(--text2); border-color:var(--text3); }
.q-more[open] > summary{ margin-bottom:8px; }
/* 🎉 0件＝オールグリーン */
.q-diff.zero b{ color:var(--green,#1db97a); }
/* ================================================================
✅ v2.9.9 チェック済み（4つの箱の下・ふだんは閉じている）
ゆうた「チェック済みは**元のカード表示がいい。グレーアウトはした状態で**」
🔴 中身は走らせた直後と**同じカード**（`q-c`）。ここで別の見た目を作らない。
灰色は**包み（.q-done-i）に着せる**＝カードの中は1文字も変えない。
================================================================ */
.q-done{ margin:14px 0 4px; border:1px solid var(--border); border-radius:11px;
background:var(--bg2); overflow:hidden; }
.q-done > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
padding:9px 13px; font-size:12px; color:var(--text2); }
.q-done > summary::-webkit-details-marker{ display:none; }
.q-done > summary::after{ content:'▸'; margin-left:auto; color:var(--text3); font-size:11px; }
.q-done[open] > summary::after{ content:'▾'; }
.q-done > summary:hover{ background:var(--bg3); }
.q-done-h{ font-weight:700; }
.q-done-n{ font-size:11px; color:var(--text3); background:var(--bg3); border-radius:10px; padding:1px 9px; }
/* 🔢 v2.77.0 「✅チェック済み」の見出しの「+◯円」を消したので、その行も外した */
.q-done-t{ font-size:10.5px; color:var(--text3); }
.q-done-list{ border-top:1px solid var(--border); padding:10px; display:flex; flex-direction:column; gap:10px;
max-height:520px; overflow-y:auto; }
/* 🔴 灰色は包みに着せる。ホバーで濃くなる＝読みたい時はちゃんと読める */
.q-done-i{ opacity:.55; filter:grayscale(.85); transition:opacity .12s, filter .12s; }
.q-done-i:hover{ opacity:1; filter:none; }
/* すでに押した札が二重に薄くならないように、包みの中では素の濃さに戻す */
.q-done-i .q-c.is-done{ opacity:1; }
/* 何をしたか（カードのすぐ下・1つの記録＝1行） */
.q-done-what{ display:flex; flex-direction:column; gap:3px;
margin:-2px 0 0; padding:6px 12px 7px; border:1px solid var(--border); border-top:0;
border-radius:0 0 10px 10px; background:var(--bg); }
.q-done-w1{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.q-done-b{ font-size:10px; font-weight:800; border-radius:6px; padding:1px 7px; letter-spacing:.02em; }
.q-done-b.fixed{ background:rgba(29,185,122,.18); color:var(--green,#1db97a); }
.q-done-b.kept { background:var(--bg3); color:var(--text3); }
.q-done-d{ font-size:11px; color:var(--text2); }
.q-done-a{ font-size:10px; color:var(--text3); margin-left:auto; }
.q-done-note{ border-top:1px solid var(--border); padding:8px 13px; font-size:10.5px; color:var(--text3); line-height:1.8; }
.q-done-note b{ color:var(--text2); }
/* 🧾 v2.9.8 残してある伝票で組み直した時の断り書き */
.q-saved-n{ display:block; font-size:10px; color:var(--text3); margin-top:2px; }
/* 🧾 v2.9.8 残してある伝票で組み直した時、書き込みで出来ないことを断る1行 */
.q-wr-n{ display:block; font-size:10.5px; color:var(--text3); margin-top:3px; }
/* ================================================================
⏳ v2.10.0 読み込み中は「くるくる」だけ（古い数字を出さない）
ゆうた「ちゃんと読み込むまでくるくるとかにして違うよー って感じがいいかも」
================================================================ */
.q-load{ display:flex; flex-direction:column; align-items:center; gap:9px;
padding:44px 20px; border:1px dashed var(--border); border-radius:12px;
background:var(--bg2); margin:4px 0 12px; }
.q-load b{ font-size:13px; color:var(--text2); font-weight:700; }
.q-load span:last-child{ font-size:11px; color:var(--text3); }
.q-load-sp{ width:26px; height:26px; border-radius:50%;
border:3px solid var(--border); border-top-color:var(--green,#1db97a);
animation:q-spin .8s linear infinite; }
@keyframes q-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .q-load-sp{ animation-duration:2.4s; } }
/* 🗓 v2.10.0 保存から借りてきたQの箱は、いま読んだPDFの箱と見た目を分ける */
.q-pq.kept{ border-style:dashed; }
/* ⏳ v2.10.1 読み込み中の Q の箱（古い数字を出さない・押せない） */
.q-pq.is-load{ opacity:.5; cursor:default; }
.q-pq.is-load .q-pq-d{ color:var(--text3); }
.q-pq-sp{ display:inline-block; width:13px; height:13px; border-radius:50%;
border:2px solid var(--border); border-top-color:var(--text3);
animation:q-spin .8s linear infinite; }
|