@charset "utf-8";
/* ============================================================
   EdiNext — 画面デザイン

   方針(2026-08-27 亀田さん):
     ・現行の見た目を模倣しない。素直に今の見た目にする
     ・行の追加・削除や入力の反応に動きをつける
     ・ただし操作の振り付けは現行に寄せる
         F9 登録/実行 ・ F11 取消 ・ F12 終了
         Enter で次の入力欄へ / Shift+Enter で前へ
       (基幹 CSDU01F1.frm の Form_KeyDown / Form_KeyPress と同じ)

   クラス名は現行画面のものをそのまま受け継いでいる。
   (header / menu / joken / ichiran / meisai / c,l,r …)
   中身だけ入れ替えることで、14画面を一度に更新するため。

   ------------------------------------------------------------
   2026-08-27 改定「堅い」の直し
   実画面(1440px)を見て分かった原因と、その対処:

     1. 箱がぜんぶ画面幅いっぱいに伸びていた。2列しかない表まで
        1440pxに広がり、項目名と数字が画面の左端と右端に離れていた。
        → 表を「中身の量に合った幅」にする。
           .meisai(明細でない2列のもの) と .shimari は幅を絞る
     2. 文字の大きさが実質1種類しかなく、階層が無かった。
        h1 だけがブラウザ既定の32pxで、そこだけ浮いていた。
        → 見出し / 小見出し / 数値 / 補足 の4段に整理する
     3. caption(【入金】など)が表の外に浮いていた。
        → 表の上ぶたとして貼り付け、左に色の帯を付ける
     4. 色が構造を語っていなかった(白・薄グレー・紺だけ)。
        → 上部を濃紺の帯にして画面の天地を作る
           見出し帯・合計行・ホバーに紺の淡色を回す
           金額は 0=灰 / 負=赤 / 合計=濃、で読む前に差が分かるようにする
     5. 動きが「定義してあるだけ」で操作に応えていなかった。
        → F9/F11/F12 を押すと下のキーが実際に沈む
           行のホバーに左の帯、フォーカスに輪、行の増減に演出

   密度は下げていない。むしろ行高は 38px → 30px 前後に詰めた。
   読みやすさは余白ではなく、活字・色・整列・まとまりで上げている。
   ============================================================ */

:root {
    /* 面 */
    --bg:        #eceff5;
    --surface:   #ffffff;
    --surface-2: #f5f8fc;   /* 表の見出し・ラベルの地 */
    --surface-3: #e9eff7;   /* 帯・区切り */

    --line:      #e2e8f1;
    --line-2:    #c6d0e0;

    /* 文字 */
    --ink:       #0e1a2b;
    --ink-2:     #52607a;
    --ink-3:     #8b97ac;

    /* 紺(構造の色) */
    --brand:     #123a6b;
    --brand-2:   #1c5fae;
    --brand-3:   #4a8ad8;
    --brand-ink: #ffffff;
    --brand-bg:  #e9f1fc;
    --brand-bg2: #f4f8fe;

    /* 状態 */
    --ok:        #12683f;
    --ok-bg:     #e7f5ed;
    --warn:      #8f6110;
    --warn-bg:   #fdf4e3;
    --ng:        #a81f18;
    --ng-bg:     #fdeceb;

    --r:   8px;
    --r-s: 5px;
    --sh:   0 1px 2px rgba(13,26,45,.05), 0 1px 3px rgba(13,26,45,.05);
    --sh-2: 0 8px 24px rgba(13,26,45,.12), 0 2px 6px rgba(13,26,45,.06);
    --t:   150ms cubic-bezier(.4, 0, .2, 1);

    --head-h: 48px;
    --menu-h: 40px;
    /* 表の見出しが止まる高さ。
       検証モードの帯(.sandbox-obi)は .header と同じ top:0 に貼り付いて
       <b>重なる</b>(積み上がらない)ので、ここに足してはいけない。
       2026-08-31 に一度 --obi-h を足したが誤りだったので戻した。 */
    --stick: calc(var(--head-h) + var(--menu-h));

    /* 顧客照会のページ側 <style> が var(--th-bg, #f4f5f7) で参照している。
       ここで定義しておけば、.cshtml を触らずに他の表と同じ地色になる
       (#f4f5f7 は微妙に灰色寄りで、隣の表と並ぶと1枚だけ色が違って見えていた) */
    --th-bg: var(--surface-2);

    --font: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--stick) + 8px); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.6;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
}

/* 見出しの【】などは本文の palt で詰めず、括弧の前後の余白を保つ。
   配色によらず全画面に適用する。印刷では従来の文字組みを維持する。 */
@media screen {
    h1, h2, h3, h4, h5, h6, caption, legend, label, .cap {
        font-feature-settings: "palt" 0;
    }
}

/* 数字は等幅にする。金額と数量が縦に揃わないと読めない。
   打ち込む欄も同じ。inputmode で数字だと分かっているものを含める
   (雑収入・出金の入力は type を書いていないので type では拾えない) */
.meisai td, .ichiran td, .grid td, .shimari td, .r, .sum, .sumcol, .val,
input[type="number"], input[type="date"], input[type="month"],
input[inputmode="numeric"], input[inputmode="decimal"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

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

::selection { background: var(--skin-selection, #cfe1fa); }

/* ============================================================
   上部 — 濃紺の帯で画面の天を作る。
   白い画面に白いヘッダが乗っていたので、どこからが中身なのか
   分からなかった。ここを締めると下がぜんぶ落ち着く。
   ============================================================ */
.header {
    position: sticky; top: 0; z-index: 40;
    height: var(--head-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px;
    background: linear-gradient(180deg, #17457f 0%, #123a6b 100%);
    color: #dce7f6;
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

.logo {
    font-size: 16px; font-weight: 700; letter-spacing: .3px;
    color: #fff; display: flex; align-items: center; gap: 9px;
}
.logo::before {
    content: ""; width: 4px; height: 18px; border-radius: 2px;
    background: linear-gradient(180deg, #8fc0f5, #4a8ad8);
}
.logo span { color: #8fc0f5; }

.corp { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #a9c1de; }
.corp .who { color: #fff; font-weight: 600; }

.signout {
    color: #cfdff2; padding: 4px 11px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22); font-size: 11.5px; line-height: 1.5;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.signout:hover {
    text-decoration: none; background: rgba(255,255,255,.14);
    color: #fff; border-color: rgba(255,255,255,.45);
}

/* ---------- メニュー ---------- */
.menu {
    position: sticky; top: var(--head-h); z-index: 39;
    display: flex; align-items: stretch; gap: 0;
    padding: 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--line-2);
    /* auto にしないこと。開いた中身がメニューの帯に切り取られて見えなくなる */
    overflow: visible;
    /* <b>収まらないときは折り返す。</b>「項目は5つなので横スクロールは要らない」と
       書いてあったが、2026-09-07 に組を 7→10 へ増やしたら 768px で帯が収まらず、
       <b>全画面が横スクロールした</b>(ロボットが検知。scrollWidth 949 > clientWidth 753)。
       横スクロールにしないのは上の理由(中身が切れる)。畳んで隠すのも避ける ——
       メニューは見えていることが仕事なので、行が増えるほうを選ぶ。
       広い画面では1行に収まるので、min-height により見た目は変わらない */
    flex-wrap: wrap;
    min-height: var(--menu-h);
    box-shadow: 0 1px 2px rgba(13,26,45,.04);
}
.menu a {
    position: relative;
    display: flex; align-items: center; white-space: nowrap;
    padding: 0 13px; color: var(--ink-2); font-size: 12.5px; font-weight: 550;
    transition: color var(--t), background var(--t);
}
.menu a::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
    height: 2px; border-radius: 2px 2px 0 0;
    background: var(--brand-2);
    transform: scaleX(0); transform-origin: center;
    transition: transform 180ms cubic-bezier(.4,0,.2,1);
}
.menu a:hover { text-decoration: none; color: var(--ink); background: var(--surface-2); }
.menu a:hover::after { transform: scaleX(.5); }
.menu a.on { color: var(--brand); font-weight: 700; background: var(--brand-bg2); }
.menu a.on::after { transform: scaleX(1); }

/* ---------- メニューの組分け ----------
   19項目が一列に並んで探せなくなったので、業務の種類でまとめた(2026-08-28)。
   見出しに触れると中身が開く。触れるだけでなく押しても開く(:focus-within)ので、
   タッチでも使える。中身が空の組は Razor 側で出さない。 */
.menu-kumi { position: relative; display: flex; align-items: stretch; }
.menu-midashi {
    display: flex; align-items: center; gap: 5px; white-space: nowrap;
    height: 100%; padding: 0 13px; border: 0; background: none; cursor: pointer;
    color: var(--ink-2); font-size: 12.5px; font-weight: 550; font-family: inherit;
    transition: color var(--t), background var(--t);
}
.menu-midashi::after {
    content: ""; width: 0; height: 0; margin-left: 1px;
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor; opacity: .55;
}
.menu-kumi:hover .menu-midashi,
.menu-kumi:focus-within .menu-midashi { color: var(--ink); background: var(--surface-2); }

/* 開いている組は、いまいる画面を含むぶんだけ色を付ける。
   :has が無い環境では単に色が付かないだけで、動作は変わらない */
.menu-kumi:has(a.on) .menu-midashi { color: var(--brand); font-weight: 700; }

.menu-naka {
    position: absolute; top: 100%; left: 0; z-index: 40;
    display: none; flex-direction: column; min-width: 170px;
    padding: 5px; border: 1px solid var(--line-2); border-radius: 0 0 var(--r) var(--r);
    background: var(--surface); box-shadow: 0 6px 18px rgba(13,26,45,.13);
}
.menu-kumi:hover .menu-naka,
.menu-kumi:focus-within .menu-naka { display: flex; }
/* 組が10になって、いちばん右の見出しが帯の右端に近づいた(2026-09-07)。
   left:0 のままだと、狭い画面で吹き出しが画面の外へはみ出して読めない。
   最後の組だけ右端に合わせて開く */
.menu-kumi:last-child .menu-naka { left: auto; right: 0; }
.menu-naka a {
    height: 30px; padding: 0 10px; border-radius: var(--r-s);
}
.menu-naka a::after { display: none; }   /* 下線の印は横並びのとき用 */
.menu-naka a.on { background: var(--brand-bg); }

/* 組の中の小見出し(2026-09-03)。
   1組が6本を超えると、色も高さも同じ行がただ縦に積まれて
   「上から順に読む」以外の探し方ができなくなる。
   区切りと小さな見出しを入れると、目が塊で拾えるようになる。

   本数は減らしていない ―― 足したのは 1本あたり 22px の見出しだけで、
   リンクの行高(30px)はそのまま。 */
.menu-ku {
    padding: 7px 10px 2px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
    font-size: 10.5px; font-weight: 700; line-height: 1.4;
    letter-spacing: .08em;
    color: var(--ink-3);
    white-space: nowrap;
    -webkit-user-select: none; user-select: none;
}
/* 先頭の小見出しの上には区切り線を引かない(枠の線とぶつかる) */
.menu-ku:first-child { margin-top: 0; padding-top: 3px; border-top: 0; }

/* ホームだけは組に入れず、そのまま押せるようにしておく */
.menu-home { font-weight: 600; }

/* 押して出した明細に画面を送ったとき、一度だけ光らせる。
   「どこへ来たのか」が分からないまま画面が動くと、かえって迷う */
@keyframes meisaiKita {
    0%   { background: var(--brand-bg); }
    100% { background: transparent; }
}
.meisai-kita { animation: meisaiKita 1.6s ease-out; border-radius: var(--r-s); }

/* ---------- 表の並び替え ----------
   押せることが分かるように、矢印の場所を最初から空けておく。
   押したときだけ矢印を出す作りにすると、見出しの幅が動いて表が揺れる */
/* 【2026-09-03 修正】ここに position: relative があった。
   見出しは上の規則で position: sticky; top: var(--stick) になっているが、
   th.sortable(0,1,1)のほうが :where(...) > thead th(0,0,1)より強いので
   <b>position だけが relative に化け、top が「88px 下へずらす」に変わっていた</b>。
   .scroll-x の中の表は top:0 なのでずれが0で見えず(貼り付きが死んでいるだけ)、
   器に載せていない表では<b>見出しが2行目に重なって出ていた</b>。
   矢印(::after)は sticky も「位置指定済み要素」なので、relative が無くても収まる。
   ずらす指定(top)を持つ規則と position を別々の場所で書くと、片方だけ勝ったときに
   意図しない移動になる —— position はここで触らない */
th.sortable { cursor: pointer; user-select: none; padding-right: 16px; }
th.sortable:hover { background: var(--brand-bg2); }
th.sortable::after {
    content: "\2195";                      /* ↕ */
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    font-size: 9px; opacity: .3;
}
th.sortable[data-sort="asc"]::after  { content: "\2191"; opacity: 1; }  /* ↑ */
th.sortable[data-sort="desc"]::after { content: "\2193"; opacity: 1; }  /* ↓ */
th.sortable.sorted { color: var(--brand); background: var(--brand-bg); }

/* ---------- 画面内のタブ ---------- */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.subnav a {
    padding: 4px 13px; border-radius: 999px; font-size: 12px; line-height: 1.6;
    background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
    transition: background var(--t), border-color var(--t), color var(--t);
}
.subnav a:hover { text-decoration: none; border-color: var(--brand-3); color: var(--brand); background: var(--brand-bg2); }
.subnav a.on {
    background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600;
}

/* ============================================================
   本体
   ============================================================ */
.body { padding: 16px 20px 76px; }

/* 中身が縦に流れてくるとき、ほんの少しだけ遅れて上がってくる。
   速さを損なわない範囲(合計 240ms 以内)にとどめる */
.body > .joken, .body > .meisai, .body > .ichiran, .body > .scroll-x,
.body > .note, .body > .nodata, .body > .uri, .body > .shimari,
.body > .wrap > .card, .body > .gcard {
    animation: liftIn 220ms cubic-bezier(.2,.7,.3,1) backwards;
}
.body > *:nth-child(2)  { animation-delay: 20ms; }
.body > *:nth-child(3)  { animation-delay: 40ms; }
.body > *:nth-child(4)  { animation-delay: 60ms; }
.body > *:nth-child(n+5){ animation-delay: 80ms; }
@keyframes liftIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 画面の名前 ---------- */
.page-title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin: 0 0 12px; padding-left: 11px;
    font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .02em;
    position: relative; line-height: 1.4;
}
.page-title::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-3), var(--brand));
}
/* h1 はブラウザ既定の 2em(=32px)で一人だけ浮いていた。画面名は 17px に揃える */
.page-title h1, .page-title h2 {
    margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit;
}
/* 画面の途中に置く小見出し。
   .page-title で囲っている画面(顧客照会・給油履歴・残高・入金集計・在庫調査)と、
   素の <h2> のまま置いている画面(データ点検・確定待ち・単価変更の進捗)があり、
   同じ役割なのに片方だけ帯が無く、行間も違っていた。
   .cshtml を触らずにそろえるため、.body の直下の h2 にも同じ姿を与える。
   ただし class の付いた h2(エラー画面の .text-danger)と、ページ側で
   色を指定している h2(単価変更のデモ見出し)は対象外。
   赤い見出しの脇に紺の帯が付くと、かえって役割が読めなくなる */
.body > h2:not([class]):not([style*="color"]) {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin: 18px 0 12px; padding-left: 11px;
    font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4;
    position: relative;
}
.body > h2:not([class]):not([style*="color"])::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-3), var(--brand));
}

/* SS・処理日など、画面名の脇にぶら下がる条件は札にする */
.page-title .ss {
    padding: 2px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-2);
    font-size: 11.5px; font-weight: 600; color: var(--ink-2);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================
   検索条件
   ラベル・入力欄・ボタン・説明文が「横並びの兄弟」として置かれている。
   高さの違うものが混ざるので、**すべての直接の子を同じ高さの行にして中央で揃える**。
   ラベルを入力欄の上に置く前提で余白を付けると、その余白のぶんだけ文字がズレる
   (2026-08-27 亀田さん指摘。仕入単価ツールでも同じ直し方をした)

   加えて、ラベルと入力欄を「地続きのひと組」として繋いだ。
   VB6 のラベル＋テキストボックスの並びに近い読み方ができる。
   ============================================================ */
.joken {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh);
    padding: 11px 14px; margin-bottom: 14px;
    display: flex; flex-wrap: wrap; align-items: center;
    /* 横の隙間を gap ではなく各部品の margin-right で作る。
       gap で空けておいて、ラベルと入力欄を負のマージンで引き寄せると、
       折り返しでラベルと入力欄が別の行に分かれた瞬間、入力欄が箱の左端から
       11px はみ出して角が欠けて見えた(1024px以下で再現)。
       margin なら、行末に残るのは「消えた余白」だけで、位置は崩れない */
    gap: 8px 0;
}
.joken > * {
    display: inline-flex; align-items: center;
    min-height: 32px; margin: 0 12px 0 0;
}
.joken label, .joken .cap {
    font-size: 12px; color: var(--ink-2); white-space: nowrap; font-weight: 600;
    gap: 6px; letter-spacing: .02em;
}

/* ラベル ＋ 入力欄 を一枚の部品に見せる */
.joken > label:has(+ input), .joken > label:has(+ select) {
    height: 32px; padding: 0 9px;
    background: var(--surface-2);
    border: 1px solid var(--line-2); border-right: 0;
    border-radius: var(--r-s) 0 0 var(--r-s);
    color: var(--ink-2);
}
.joken > label:has(+ input),
.joken > label:has(+ select) { margin-right: 0; }   /* 次の欄と地続きにする */
.joken > label:has(+ input) + input,
.joken > label:has(+ select) + select {
    border-radius: 0 var(--r-s) var(--r-s) 0;
}
/* :has() が効かない環境では、ラベルと入力欄が離れて並ぶだけ。
   位置は崩れないので、負のマージンで寄せることはしない */

.joken .radio {
    gap: 6px; font-size: 12.5px; color: var(--ink); font-weight: 500;
    padding: 0 10px 0 8px; height: 32px;
    border: 1px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.joken .radio:hover { border-color: var(--brand-3); background: var(--brand-bg2); }
.joken .radio:has(input:checked) {
    border-color: var(--brand-2); background: var(--brand-bg); color: var(--brand); font-weight: 650;
}
.joken .radio input { margin: 0; accent-color: var(--brand-2); }

.joken .hint, .joken .note {
    font-size: 11.5px; color: var(--ink-3); background: none;
    border: 0; padding: 0; line-height: 1.4;
}
.joken .hint::before, .joken .note::before { content: none; }

/* ---------- 入力部品 ----------
   type を書いていない <input> も入れる。HTMLの既定は type="text" だが、
   属性が無いと [type="text"] に当たらない。そのせいで
   サインインの利用者ID、雑収入・出金の入力(数量・金額・消費税・備考・コメント)、
   仕入単価の仕入先欄が、隣の select やボタン(32px)に対して
   ブラウザ既定のまま(21px・灰色2px枠・角なし・focusの輪も無し)で並んでいた */
input:not([type]),
input[type="text"], input[type="date"], input[type="month"], input[type="number"],
input[type="password"], input[type="search"], input[type="tel"], select, textarea {
    height: 32px; padding: 0 9px;
    border: 1px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface); color: var(--ink);
    font-size: 13px; font-family: inherit;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
select { padding-right: 26px; cursor: pointer; }
textarea { height: auto; padding: 7px 9px; line-height: 1.7; }
input::placeholder { color: var(--skin-muted, #b4bdcc); }

input:hover, select:hover, textarea:hover { border-color: var(--skin-edge, #a9b8cd); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-2); background: var(--skin-surface, #fff);
    box-shadow: 0 0 0 3px rgba(28,95,174,.15);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-2); color: var(--ink-3); border-color: var(--line); cursor: default;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-2); }

/* ボタンとリンクボタンは高さを揃え、文字を上下中央に置く。
   リンク(a)は行の高さで文字位置が決まってしまうので inline-flex で中央に固定する */
button, .btn, .btn-print, input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 15px;
    border: 1px solid var(--brand); border-radius: var(--r-s);
    background: linear-gradient(180deg, var(--skin-action-top, #1d548f), var(--brand));
    color: var(--brand-ink);
    font-size: 12.5px; font-weight: 600; font-family: inherit; line-height: 1;
    cursor: pointer; white-space: nowrap; text-decoration: none;
    box-shadow: 0 1px 1px rgba(13,26,45,.14);
    transition: filter var(--t), transform var(--t), box-shadow var(--t),
                background var(--t), border-color var(--t), color var(--t);
}
button:hover, .btn:hover, .btn-print:hover, input[type="submit"]:hover {
    filter: brightness(1.12); text-decoration: none;
    box-shadow: 0 2px 6px rgba(18,58,107,.28);
}
button:active, .btn:active, .btn-print:active, input[type="submit"]:active {
    transform: translateY(1px); box-shadow: none; filter: brightness(.96);
}
button:focus-visible, .btn:focus-visible, .btn-print:focus-visible, a:focus-visible,
.fnkey:focus-visible, .subnav a:focus-visible {
    outline: 2px solid var(--brand-3); outline-offset: 2px;
}
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* 副ボタン(印刷・戻る・補助操作) */
.btn-print, .btn-sub {
    background: var(--surface); color: var(--brand); border-color: var(--line-2);
    box-shadow: none; font-weight: 600;
}
.btn-print:hover, .btn-sub:hover {
    background: var(--brand-bg); border-color: var(--brand-3); filter: none;
    box-shadow: 0 1px 3px rgba(13,26,45,.10);
}
.btn-sm { height: 26px; padding: 0 10px; font-size: 11.5px; }

/* 売上日報の入力画面へ移るリンク。GETの画面遷移のままボタンとして目立たせる */
a.nippou-entry-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 6px 16px; margin-left: 8px;
    border: 1px solid var(--brand); border-radius: var(--r-s);
    background: var(--brand); color: var(--brand-ink);
    font-size: 14px; font-weight: 700; line-height: 1.4;
    text-decoration: none; white-space: nowrap; vertical-align: middle;
}
a.nippou-entry-link:hover {
    background: var(--brand-2); color: var(--brand-ink); text-decoration: none;
}
a.nippou-entry-link:focus-visible {
    outline: 3px solid var(--brand-2); outline-offset: 3px;
}

/* ============================================================
   一覧・明細
   ============================================================ */
.scroll-x {
    overflow-x: auto; border-radius: var(--r);
    border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh);
    scrollbar-width: thin;
    /* 表そのものは 14px の下余白を持っているが、器に入れた瞬間に 0 になる
       (.scroll-x > table で margin を消しているため)。
       そのせいで「器に入っている表」と「素の表」で下の空きが違い、
       画面ごとに margin-top を書いて帳尻を合わせることになっていた */
    margin-bottom: 14px;
}
.scroll-x > table { border: 0; box-shadow: none; border-radius: 0; margin: 0; }
.scroll-x > table > thead th:first-child, .scroll-x > table > thead th:last-child { border-radius: 0; }
/* 横スクロールの器の中では、見出しが止まる基準はこの器の上端。
   ここで上部の帯のぶん(--stick)を足すと、見出しが表の途中に降りてきてしまう */
.scroll-x > table > thead th { top: 0; }

.ichiran, .meisai, .grid {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh);
    font-size: 13px; margin: 0 0 14px;
}

/* 見出し行。上部の帯に隠れないよう、止まる位置を帯のぶん下げる */
/* :where() で詰め物をして、この規則の強さを下げてある。
   こうしないと、あとで出てくる th.c / th.l / th.r の寄せが効かない */
:where(.ichiran, .meisai, .grid) > thead th {
    position: sticky; top: var(--stick); z-index: 2;
    background: linear-gradient(180deg, var(--skin-raised, #fbfcfe), var(--surface-2));
    color: var(--ink-2);
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-align: left; white-space: nowrap;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-2);
    box-shadow: inset 0 -1px 0 var(--line-2);
}
.ichiran > thead th:first-child, .meisai > thead th:first-child, .grid > thead th:first-child {
    border-top-left-radius: var(--r);
}
.ichiran > thead th:last-child, .meisai > thead th:last-child, .grid > thead th:last-child {
    border-top-right-radius: var(--r);
}

:where(.ichiran, .meisai, .grid) td {
    padding: 5px 10px; border-bottom: 1px solid var(--line);
    text-align: right; white-space: nowrap; line-height: 1.55;
}
.ichiran tbody tr:last-child td, .meisai tbody tr:last-child td, .grid tbody tr:last-child td {
    border-bottom: 0;
}

/* 行に触れたら、左に帯が出る。1440px を目で追うときの手すり */
.ichiran tbody tr, .meisai tbody tr, .grid tbody tr {
    transition: background 120ms linear, box-shadow 120ms linear;
}
.ichiran tbody tr:hover, .meisai tbody tr:hover, .grid tbody tr:hover {
    background: var(--brand-bg2);
    box-shadow: inset 3px 0 0 var(--brand-3);
}
/* 行をクリックすると、そこに印が残る(横に長い一覧で自分の行を見失わないため) */
.ichiran tbody tr.is-picked, .meisai tbody tr.is-picked, .grid tbody tr.is-picked {
    background: var(--brand-bg);
    box-shadow: inset 3px 0 0 var(--brand-2);
}

/* 合計行のラベル(<tfoot> の th、表の途中に挟む小見出し)。
   ここだけ規則が無く、ブラウザ既定の padding:1px・中央寄せのまま出ていた。
   隣の td は 5px 10px なので、「合 計」だけが枠に貼り付いて見えていた。
   2列組の「合計」行(見出し1つ＋値1つ)はここに含めない。
   あの行は上の行と見出し列の幅がそろっている必要があるので、
   左右の余白を変えると合計だけ字が横にずれる */
:where(.ichiran, .meisai, .grid) > tfoot th,
:where(.ichiran, .meisai, .grid) > tbody > tr > th[colspan] {
    text-align: left; white-space: nowrap;
    padding: 5px 10px;
    font-size: 12.5px;
}

/* 何列かをまとめる見出し(売上日報一覧の「入　金」など)。
   左寄せのままだと、まとめている列の左端にだけ寄って、
   どこからどこまでを指しているのか読み取れない */
:where(.ichiran, .meisai, .grid) > thead th[colspan] { text-align: center; }

td.c, th.c { text-align: center; }
td.l, th.l { text-align: left; }
td.r, th.r { text-align: right; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-3); }

/* 説明文・理由を入れるセル。
   一覧の td は既定が nowrap(数字と短い名前を1行に並べる表なので、それでよい)。
   そこへ「なぜこの行が引っかかったか」のような文を入れると、表ごと横に伸びて
   ページ全体に横スクロールが出る。器を押し広げないよう、折り返して幅の上限を持たせる。
   上限が無いと、1行に収まる長さのぶんだけ表が伸びてしまう */
:where(.ichiran, .meisai, .grid) td.setsumei {
    white-space: normal; max-width: 44em; overflow-wrap: anywhere; line-height: 1.6;
}

/* 「いまは効いていない」入力欄。使えなくするのではなく、効いていないことを見せる。
   入金集計の作業月と期間のように、片方を入れるともう片方が無視される組で使う */
.joken label.muted { opacity: .55; }
.joken input.muted {
    opacity: .55; background: var(--surface-3); border-style: dashed;
}
.joken input.muted:focus { opacity: 1; background: var(--surface); border-style: solid; }

/* 金額は、読む前に差が分かるようにする。
   0 は沈め、負は赤、合計は濃く。クラスは edinext.js が付ける */
.ichiran td.is-zero, .meisai td.is-zero, .grid td.is-zero, .shimari td.is-zero { color: var(--skin-muted, #aab4c4); }
.ichiran td.is-neg,  .meisai td.is-neg,  .grid td.is-neg,  .shimari td.is-neg  { color: var(--ng); }

/* 合計行 */
tr.total td, tr.total th, tr.sum td, tr.sum th, .sum, .sumcol {
    background: var(--brand-bg); font-weight: 700; color: var(--ink);
    border-top: 1px solid var(--brand-3);
}
tr.total td.is-zero, tr.sum td.is-zero { color: var(--ink-2); }
tr.total, tr.sum { font-variant-numeric: tabular-nums; }

tr.dropped td {
    color: var(--ink-3);
    background: repeating-linear-gradient(-45deg, transparent, transparent 6px,
                rgba(13,26,45,.035) 6px, rgba(13,26,45,.035) 12px);
    text-decoration: line-through; text-decoration-color: rgba(13,26,45,.25);
}

/* ---------- 表の上ぶた(【入金】など) ----------
   caption が表と切り離されて中央に浮いていたので、上ぶたとして貼り付ける */
.ichiran > caption, .meisai > caption, .grid > caption {
    caption-side: top; text-align: left;
    padding: 7px 12px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    color: var(--brand);
    background: linear-gradient(180deg, var(--brand-bg2), var(--brand-bg));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--r) var(--r) 0 0;
    /* 左の帯は inset の影ではなく border で引く。
       影は padding の内側に描かれるので、ページ側が padding を詰めると
       見出しの1文字目に被って切れて見えた(入金照会で実際に起きた)。
       border なら文字の外側に出るので、padding をいくら詰められても被らない */
    border-left: 3px solid var(--brand-2);
}
/* ページ側にインラインstyleが付いている上ぶただけ、余白と色を引き戻す。
   上ぶたは「表の一部」で、見た目は app.css が決める役割のもの。
   ページごとに padding を詰められると文字が縁に貼り付き、色を変えられると
   同じ役割の見出しが画面ごとに違う色になる(入金照会だけ茶色だった) */
.ichiran > caption[style], .meisai > caption[style], .grid > caption[style] {
    padding: 7px 12px !important;
    color: var(--brand) !important;
}
/* 横スクロールの器に入っている表では、上ぶたの枠は器の枠と二重になる。
   器がもう枠と角丸を持っているので、こちらは地色と左帯だけにする */
.scroll-x > table > caption {
    border-top: 0; border-right: 0; border-radius: 0;
}
.ichiran:has(> caption), .meisai:has(> caption), .grid:has(> caption) {
    border-top-left-radius: 0; border-top-right-radius: 0;
}
.ichiran:has(> caption) > thead th, .meisai:has(> caption) > thead th,
.grid:has(> caption) > thead th { border-radius: 0; }

/* ---------- 2列の表(項目名 ＋ 数値)は幅を絞る ----------
   ここが「堅い」の最大の原因だった。
   「現金 … 0」しか無いのに 1440px 使い、目が左右に往復していた。
   見出し行(thead)を持たない＝「項目名と値」の2列組、と見分けている。
   列の多い明細表を巻き込まないための条件 */
.meisai:not(.meisai-w):not(:has(> thead)) {
    width: auto; min-width: 320px; max-width: 460px;
    /* さらに、幅の狭い部品どうしは横に流して並べる。
       細長い箱が1本だけ立って右が 1000px 空く、という間の抜けた画面を避ける。
       明細の広い表(.meisai-w など)はブロックなので、そこで自然に行が変わる */
    display: inline-table; vertical-align: top; margin: 0 10px 14px 0;
}
.shimari { vertical-align: top; }

/* tbody の中の th は「行の名前」。見出し行と同じ扱いをしてはいけない
   (以前は position:sticky まで掛かっていた) */
:where(.meisai, .ichiran) > tbody > tr > th {
    position: static;
    text-align: left; white-space: nowrap;
    padding: 5px 12px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
/* 見出し列に 46% を配れるのは、その行が「見出し＋値」1組のときだけ。
   見出しと値が横に2組並ぶ表(請求明細照会の上部・伝票詳細・入金照会)や、
   何列もまたぐ小見出し(データ点検の組見出し・合計行のラベル)にまで配ると、
   値の列がそのぶん潰れて、桁の多い金額が読めなくなる */
/* 条件は :where() で包んで強さを上げない。上げると、顧客照会が
   ページ側で指定している見出し列の幅(9em)を追い越してしまう */
:where(.meisai, .ichiran) > tbody > tr:where(:not(:has(> th:nth-of-type(2)))) > th:where(:not([colspan])) {
    width: 46%;
}
.meisai > tbody > tr:last-child > th, .ichiran > tbody > tr:last-child > th { border-bottom: 0; }
.meisai > tbody > tr:hover > th, .ichiran > tbody > tr:hover > th { color: var(--ink); }
.meisai > tbody > tr.sum > th, .meisai > tbody > tr.total > th {
    color: var(--brand); font-weight: 700; background: var(--brand-bg);
}
/* 2列の表の数値はひとまわり大きく。この画面の主役なので */
.meisai:not(.meisai-w) > tbody > tr > td { font-size: 13.5px; font-weight: 600; padding-right: 14px; }
.meisai:not(.meisai-w) > tbody > tr.sum > td,
.meisai:not(.meisai-w) > tbody > tr.total > td { font-size: 15px; }

.meisai-w { width: 100%; max-width: none; }

/* ---------- 締めの数字(夜間金庫・送金・差額) ---------- */
.shimari {
    width: auto; min-width: 300px; max-width: 400px;
    display: inline-table; vertical-align: top;
    border-collapse: separate; border-spacing: 0;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh);
    color: var(--ink); font-size: 12.5px; margin: 0 10px 14px 0;
}
.shimari th {
    text-align: left; font-weight: 500; color: var(--ink-2);
    padding: 6px 12px; background: var(--surface-2);
    border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
    white-space: nowrap; width: 50%;
}
.shimari td {
    text-align: right; padding: 6px 14px; font-weight: 650;
    border-bottom: 1px solid var(--line);
}
.shimari tr:last-child th, .shimari tr:last-child td {
    border-bottom: 0; background: var(--brand-bg); color: var(--brand); font-weight: 700;
}
.shimari tr:last-child td { font-size: 14px; color: var(--ink); }

/* ---------- 見出し数値(【SS現金売上】など) ----------
   一番見たい数字が地の文と同じ扱いで流れていたので、独立した札にする */
.uri {
    display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
    vertical-align: top;
    margin: 0 10px 14px 0; padding: 8px 16px 8px 14px; min-height: 44px;
    background: linear-gradient(90deg, var(--brand-bg2), var(--surface) 60%);
    border: 1px solid var(--line); border-left: 3px solid var(--brand-2);
    border-radius: 0 var(--r) var(--r) 0;
    box-shadow: var(--sh);
    font-weight: 400;
}
.uri .cap {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-2);
}
.uri .val {
    font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.uri .val.is-zero { color: var(--ink-3); }
.uri .val.is-neg  { color: var(--ng); }
/* 札の中の補足は、青い箱ではなく地の文の小さい注釈として置く */
.uri .note, .uri .hint {
    background: none; border: 0; padding: 0; margin: 0; border-radius: 0;
    font-size: 11.5px; color: var(--ink-3); line-height: 1.4;
}
.uri .note::before, .uri .hint::before { content: none; }

/* ---------- データが無いとき ---------- */
.nodata {
    padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 12.5px;
    background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r);
}
.nodata::before {
    content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 10px;
    border-radius: 50%; border: 2px dashed var(--line-2);
}
/* 表の中の「データなし」。既定の右寄せのままだと画面の右端に飛んでいた */
td.empty, td.nodata {
    text-align: center !important; color: var(--ink-3);
    padding: 18px 12px; font-size: 12.5px; letter-spacing: .06em;
    background: var(--surface-2);
}
/* .nodata を td に付けている画面(単価変更の進捗など)では、
   上の「箱」の見た目まで一緒に付いてきて、表のセルの中に
   破線の枠と○の飾りが出ていた。セルの中では地の色と字だけでよい */
td.nodata { border: 0; border-radius: 0; }
td.nodata::before { content: none; }

/* ============================================================
   説明・注意・結果のメッセージ
   ============================================================ */
.hint, .note, .comment, .lead {
    font-size: 12px; color: var(--ink-2); line-height: 1.8;
}
.hint { margin: 8px 0; color: var(--ink-3); }

/* 日報のコメント欄。地の文に置き去りにされていたので、器を与える */
.comment {
    display: block; max-width: 720px; margin: 2px 0 0; padding: 9px 13px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh);
}
.comment > label {
    display: block; margin-bottom: 1px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-2);
}
.comment > span { display: block; min-height: 20px; color: var(--ink); }
.comment > span:empty::before { content: "(なし)"; color: var(--ink-3); font-size: 12px; }
.note, .err, .text-danger, .ok-msg, .keikoku {
    padding: 9px 13px; margin: 10px 0;
    border-radius: var(--r-s);
    border: 1px solid transparent; border-left-width: 3px;
    font-size: 12.5px; line-height: 1.8;
}
/* 印は流れの中に置く。絶対配置にすると、画面側で padding を上書きしている
   ところ(サインイン画面など)で文字と重なってしまう */
.note::before, .err::before, .text-danger::before, .ok-msg::before, .keikoku::before {
    display: inline-block; width: 15px; margin-right: 5px; text-align: center;
    font-size: 12px; font-weight: 700;
}
.note {
    background: var(--brand-bg2); border-color: var(--line); border-left-color: var(--brand-2);
    color: var(--ink-2);
}
.note::before { content: "i"; color: var(--brand-2); font-style: italic; font-family: Georgia, serif; }
.note strong { color: var(--brand); }

.err, .text-danger {
    background: var(--ng-bg); border-color: var(--skin-error-edge, #f3d3d1); border-left-color: var(--ng); color: var(--ng);
}
.err::before, .text-danger::before { content: "!"; }

.ok-msg {
    background: var(--ok-bg); border-color: var(--skin-ok-edge, #cfe7da); border-left-color: var(--ok); color: var(--ok);
}
.ok-msg::before { content: "\2713"; }

/* データがおかしいことの断り。エラー(.err)ではない ——
   操作が失敗したのではなく、出している数字の前提を先に伝えるためのもの */
.keikoku {
    background: var(--warn-bg); border-color: var(--skin-warn-edge, #ecdcb8); border-left-color: var(--warn);
    color: var(--ink);
}
.keikoku::before { content: "!"; color: var(--warn); }
.keikoku b { color: var(--warn); }

/* 打ち間違いから割り出した「本来の値」。元の値を消さずに添える。
   直したわけではないので、本体より弱く出す */
.honrai {
    display: inline-block; margin-top: 2px; padding: 0 5px; border-radius: 3px;
    background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 600;
    white-space: nowrap;
}

/* EdiNext側で付けた印。基幹のデータは変わっていないので、
   「消した」ように見せない。薄くするだけで、金額は読めるままにする */
.shirushi {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.shirushi.muko    { background: var(--ng-bg);   color: var(--ng); }
.shirushi.kakunin { background: var(--ok-bg);   color: var(--ok); }
.ichiran tbody tr.muko td { background: var(--surface-2); color: var(--ink-3); }
.ichiran tbody tr.muko td.is-neg { color: var(--ink-3); }

/* 取消・赤伝の行(現金明細照会)。EdiNext側で付けた印(.muko)とは別もので、
   基幹がそう記録している行。数量・金額の符号が反転していて、合計にも効いている。
   だから .muko のように薄くしてはいけない ―― 地の色だけ変えて位置を示す */
.ichiran tbody tr.torikeshi td { background: var(--ng-bg); }
.shirushi.torikeshi { background: var(--ng-bg); color: var(--ng); }

/* 扱いの選択。選択肢に説明を並べて、何をする操作なのかを読めるようにする */
/* 検証モードの帯。斜線を入れて、通常の画面と地の見た目から変える */
.sandbox-obi {
    position: sticky; top: 0; z-index: 50;
    padding: 7px 16px; font-size: 12.5px; line-height: 1.7;
    color: #4a3200; border-bottom: 2px solid #d99b00;
    background: repeating-linear-gradient(135deg,
        #ffe9b0 0 14px, #ffdf90 14px 28px);
}
.sandbox-obi b { margin-right: 8px; padding: 1px 9px; border-radius: 999px;
                 background: #4a3200; color: #ffe9b0; font-size: 11.5px; }
.sandbox-obi button {
    margin-left: 10px; padding: 2px 12px; font-size: 11.5px; cursor: pointer;
    border: 1px solid #a97a00; border-radius: var(--r-s);
    background: var(--skin-surface, #fff); color: #4a3200;
}
.sandbox-obi button:hover { background: #fff6e0; }

/* 本番へ書き込む画面の帯。検証モードの帯(.sandbox-obi)と<b>対</b>にしてある ——
   同じ斜線・同じ角丸の見出し札で、色だけが黄(練習)と赤(本番)。
   「地の見た目が違う」ことで、どちらにいるかを読まずに気づけるようにする。

   検証の帯と違って画面上部に貼り付かない(position:sticky にしない)。
   これは<b>その操作の帯</b>で、画面全体の状態ではないため。
   実行ボタンと同じ流れの中に置き、帯を見ずに押せる位置にボタンを置かない。 */
.honban-obi {
    padding: 9px 16px; margin: 10px 0; font-size: 12.5px; line-height: 1.8;
    color: #4a0f0c; border: 1px solid #e0a9a4; border-left: 3px solid var(--ng);
    border-radius: var(--r-s);
    background: repeating-linear-gradient(135deg,
        #fbdedb 0 14px, #f7cdc9 14px 28px);
}
.honban-obi b:first-child { margin-right: 8px; padding: 1px 9px; border-radius: 999px;
                            background: #6d1712; color: #fbdedb; font-size: 11.5px; }
/* 紙には出さない。ただしここで @media print を書かず、使う側で .gamen-dake を
   併記する(印刷の振り付けはその1クラスに集めてある) */

/* 扱いを決める欄を載せる器。
   雑収入・出金の一覧と、データ点検の明細で使っているのに定義が無く、
   画面の地の上に選択肢がそのまま浮いていて、どこまでがこの操作の範囲なのか
   分からなかった。押した行から続いている、と読めるように枠を与える */
.edit-row {
    background: var(--brand-bg2);
    border: 1px solid var(--line-2); border-left: 3px solid var(--brand-2);
    border-radius: var(--r);
}
/* 表のセルの中で使うとき(データ点検)は、行の続きなので角と枠は要らない */
td.edit-row {
    border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0;
    padding: 4px 14px;
}

/* 扱いを決めるフォーム。
   検索用の .joken(横並び・折り返し)を使い回していたら、選択肢の縦位置が
   バラバラになった。専用の組み方を与える(2026-08-28) */
.atsukai-form {
    display: flex; flex-direction: column; gap: 10px;
    margin: 0; padding: 10px 2px; background: none; border: 0; box-shadow: none;
}
.atsukai { display: flex; flex-direction: column; gap: 5px; }
.atsukai label.radio {
    display: flex; align-items: baseline; gap: 7px;
    margin: 0; padding: 0; font-size: 12px; line-height: 1.7; cursor: pointer;
}
.atsukai label.radio input { margin: 0; flex: none; position: relative; top: 1px; }
.atsukai label.radio b { font-weight: 600; white-space: nowrap; }
.atsukai-shita { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atsukai-shita label { font-size: 12px; color: var(--ink-2); margin: 0; }
.atsukai-midashi { font-size: 12px; color: var(--ink-3); }

/* ---------- 札 ---------- */
.chip {
    display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px;
    background: var(--brand-bg); color: var(--brand); font-size: 11px; font-weight: 600;
    line-height: 1.7; white-space: nowrap;
}
.badge {
    display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1.7; white-space: nowrap;
    background: var(--surface-3); color: var(--ink-2);
}
.badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.ng   { background: var(--ng-bg);   color: var(--ng); }

/* 表のセルや文中で「ここを見てほしい」を示す。
   .warn を単独で使っている画面(売上日報の差額など)に定義が無く、
   ただの黒字で出ていたので入れる */
.warn { color: var(--warn); font-weight: 600; }
td.warn, th.warn { color: var(--warn); font-weight: 700; }
.page-title .ss.warn {
    background: var(--warn-bg); border-color: var(--skin-warn-edge, #e8d3a8); color: var(--warn);
}
p.hint .warn, .hint.warn { font-weight: 600; }

/* 「この段は済んでいる」を示すセル。.warn の対で、こちらも定義が無く
   ただの黒字で出ていた(単価変更の進捗・単価変更の本社確定で使っている) */
td.ok, th.ok { color: var(--ok); font-weight: 700; }

/* ---------- ホーム(最初の画面) ---------- */
.home {
    display: grid; gap: 14px; margin-bottom: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.home-card {
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
    padding: 16px 18px 14px; display: flex; flex-direction: column;
}
.home-card.is-warn { border-color: var(--skin-warn-edge, #e8d3a8); background: var(--warn-bg); }
.home-card h2 {
    margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    letter-spacing: .04em;
}
.home-card h2 small { font-weight: 600; color: var(--ink-3, var(--ink-2)); margin-left: 6px; }
.home-big {
    margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.home-big small { font-size: 13px; font-weight: 600; margin-left: 3px; color: var(--ink-2); }
.home-sub { margin: 3px 0 0; font-size: 12px; color: var(--ink-2); }
.home-note { margin: 8px 0 0; font-size: 12px; }
.home-list { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; }
.home-list li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 3px 0; border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.home-list li > span:first-child { color: var(--ink-2); }
.home-go {
    margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 600;
    align-self: flex-start;
}

/* ---------- ホーム:日報の届き具合 ---------- */

/* 未報告の店が並ぶ日だけ全幅にする。.home は minmax(240px,1fr) なので、
   何もしないと店名が240px幅に押し込まれて折り返す。
   静かな日は普通の幅に戻り、場所を占領しない */
.home-card.is-wide { grid-column: 1 / -1; }

/* カードの中の店名。押せることが分かるように、下線ではなく色と重みで出す */
.home-list a { color: var(--brand-2); font-weight: 600; }
.home-list a:hover { text-decoration: underline; }

/* 店ごとの点。数十店を1〜2行に収める。
   点は「情報を減らす」のではなく一覧の代わりなので、title に店名を必ず入れる */
.mise-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 0; }
.mise-dot {
    width: 11px; height: 11px; border-radius: 3px;
    background: var(--surface-3); border: 1px solid var(--line-2);
    /* 左から順に立ち上がる。合計 300ms を超えない(業務の速さを損なわない) */
    animation: miseIn 180ms cubic-bezier(.2,.7,.3,1) backwards;
    animation-delay: calc(var(--i, 0) * 9ms);
}
@keyframes miseIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.mise-dot.kita  { background: var(--brand-3); border-color: var(--brand-2); } /* 届いた */
.mise-dot.machi { background: var(--surface-3); }                            /* まだ(受付中) */
.mise-dot.osoi  { background: var(--warn-bg); border-color: var(--warn); }   /* 一昨日以前が未着 */

a.mise-dot:hover { outline: 2px solid var(--brand-3); outline-offset: 1px; }

/* 日数の強調。色は増やさず、字の重みだけで段を作る
   (赤は入力エラー用に取ってあるので、ここでは使わない) */
.mise-hi { font-variant-numeric: tabular-nums; }
.mise-hi.osoi { color: var(--warn); font-weight: 700; }

/* ---------- 全店の今(/Zenten)の提出マス ----------

   店 × 日 のマス。ホームの .mise-dot は「点」で数を見るためのものだが、
   こちらは<b>差額の金額をマスの中に書く</b>ので、幅のある札にしてある。

   色は3つだけ。緑=出した / 黄=出したが差額が大きい / 灰=まだ。
   <b>赤は使わない。</b>--ng(赤)は入力エラーとありえない値に取ってある ――
   日報が出ていないのはデータの誤りではなく業務の遅れで、
   データ点検と同じ重さに見えてはいけない(ホーム画面と同じ決め)。 */
.zenten-masu {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 62px; padding: 2px 9px; border-radius: var(--r-s);
    font-size: 12px; font-weight: 700; line-height: 1.7;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: var(--surface-3); color: var(--ink-3);
}
.zenten-masu.ok     { background: var(--ok-bg);   color: var(--ok); }
.zenten-masu.sagaku { background: var(--warn-bg); color: var(--warn); }
/* 行はあるが金額が入っていない。「まだ」とは別の状態なので別の地色にする */
.zenten-masu.tochu  { background: var(--surface-2); color: var(--ink-2); }
.zenten-masu.mada   { background: var(--surface-3); color: var(--ink-3); }
a.zenten-masu:hover { outline: 2px solid var(--brand-3); outline-offset: 1px;
                      text-decoration: none; }

/* 画面名の脇に付ける小さな注記(「現行に無い画面」など) */
.tag {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 4px;
    background: var(--brand-bg); color: var(--brand);
    font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap;
}

/* ============================================================
   カード(仕入単価の画面など、手順のある画面で使う)
   app.css に定義が無く、素のHTMLのまま出ていたので入れる
   ============================================================ */
.wrap { display: flex; flex-direction: column; gap: 14px; }

.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh);
    padding: 15px 17px;
}
.card-accent { border-left: 3px solid var(--brand-2); }
.card > h2, .card > summary {
    margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; gap: 9px; letter-spacing: .01em;
}
details.card > summary {
    cursor: pointer; list-style: none; margin: 0; user-select: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
    content: "\25B8"; color: var(--brand-2); font-size: 12px;
    transition: transform var(--t); display: inline-block;
}
details.card[open] > summary::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: 4px; }

.step {
    flex: none;
    width: 21px; height: 21px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-3); color: var(--ink-2);
    font-size: 11.5px; font-weight: 700;
}
.step-accent { background: linear-gradient(180deg, var(--skin-action-top, #1d548f), var(--brand)); color: #fff; }

.lead { margin: 0 0 13px; max-width: 88ch; }
.lead strong { color: var(--ink); }

/* 入力欄のまとまり。ラベルは欄の上、行は下端で揃える */
.fields { display: flex; flex-wrap: wrap; gap: 11px 16px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label {
    font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: .04em;
    white-space: nowrap;
}
.control { display: flex; align-items: center; gap: 7px; }
.unit { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.delta-input {
    width: 108px; text-align: right; font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.delta-input:focus { background: var(--skin-warn-surface, #fffdf5); }

.table-wrap {
    overflow: auto; max-height: 420px; scrollbar-width: thin;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.table-wrap > .grid { border: 0; box-shadow: none; border-radius: 0; margin: 0; }
.table-wrap > .grid > thead th { top: 0; }     /* 枠の中で止まるので帯の分は要らない */

.up { color: var(--brand); font-weight: 700; }

/* ============================================================
   ファンクションキー
   現行の操作をそのまま持ってくる。画面の下に固定して、
   いま何のキーが効くのかを常に見せる。
   物理キーを押したときに、ここのキーが実際に沈む(edinext.js が .hit を付ける)
   ============================================================ */
.fnbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 16px;
    background: linear-gradient(180deg, var(--skin-bar-top, rgba(255,255,255,.94)), var(--skin-bar-bottom, rgba(240,244,250,.96)));
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -2px 12px rgba(13,26,45,.07);
}
.fnbar .spacer { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
/* 操作の振り付けは覚えてもらうものなので、常に出しておく */
.fnbar .spacer::after {
    content: "Enter で次の欄へ　／　Shift+Enter で前の欄へ";
    font-size: 11px; color: var(--ink-3); letter-spacing: .03em; white-space: nowrap;
}

.fnkey {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 13px;
    border: 1px solid var(--line-2); border-radius: var(--r-s);
    background: linear-gradient(180deg, var(--skin-surface, #fff), var(--skin-raised, #f4f7fb)); color: var(--ink);
    font-size: 12.5px; font-weight: 650; cursor: pointer; letter-spacing: .04em;
    box-shadow: 0 1px 0 var(--line-2), 0 1px 2px rgba(13,26,45,.06);
    transition: transform 90ms ease, box-shadow 90ms ease, border-color var(--t), color var(--t);
}
.fnkey kbd {
    font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: var(--ink-3); background: var(--surface-2);
    border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 3px;
    padding: 0 5px; line-height: 1.5;
}
.fnkey:hover { border-color: var(--brand-3); color: var(--brand); }
.fnkey:hover kbd { color: var(--brand); border-color: var(--brand-3); }
.fnkey.primary {
    background: linear-gradient(180deg, var(--skin-action-top, #1d548f), var(--brand));
    border-color: var(--brand); color: var(--brand-ink);
    box-shadow: 0 1px 0 var(--skin-action-edge, #0c2b51), 0 2px 5px rgba(18,58,107,.28);
}
.fnkey.primary kbd { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; }
.fnkey.primary:hover { filter: brightness(1.12); color: #fff; }
/* 押された感じ。マウスでも、物理キーでも同じように沈む */
.fnkey:active, .fnkey.hit { transform: translateY(2px); box-shadow: none; }
.fnkey.hit { border-color: var(--brand-2); }
.fnkey:disabled, .fnkey[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ============================================================
   行の追加・削除
   ============================================================ */
@keyframes rowIn {
    0%   { opacity: 0; transform: translateY(-8px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes rowFlash {
    from { background: var(--brand-bg); box-shadow: inset 3px 0 0 var(--brand-2); }
    to   { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
@keyframes rowOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(18px); }
}
tr.row-in  { animation: rowIn 200ms cubic-bezier(.2,.7,.3,1), rowFlash 700ms ease-out 120ms; }
tr.row-out { animation: rowOut 170ms cubic-bezier(.4,0,1,1) forwards; }

.row-del {
    width: 24px; height: 24px; padding: 0; line-height: 1;
    border-radius: var(--r-s); border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink-3); font-size: 14px; font-weight: 700;
    box-shadow: none;
}
.row-del:hover {
    background: var(--ng-bg); border-color: var(--ng); color: var(--ng);
    filter: none; box-shadow: none;
}

/* ============================================================
   通知(MsgBox の置き換え)
   ============================================================ */
.toasts {
    position: fixed; right: 16px; bottom: 60px; z-index: 60;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
    pointer-events: auto;
    min-width: 240px; max-width: 380px;
    padding: 10px 14px; border-radius: var(--r);
    background: var(--surface); box-shadow: var(--sh-2);
    border: 1px solid var(--line); border-left: 3px solid var(--brand-2);
    font-size: 12.5px; color: var(--ink); line-height: 1.7;
    animation: toastIn 220ms cubic-bezier(.2,.7,.3,1);
}
.toast.ok   { border-left-color: var(--ok); }
.toast.ng   { border-left-color: var(--ng); }
.toast.warn { border-left-color: var(--warn); }
.toast.hide { animation: toastOut 170ms cubic-bezier(.4,0,1,1) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ---------- 読み込み中 ---------- */
.is-busy { position: relative; pointer-events: none; }
.is-busy::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--r);
    background: var(--skin-overlay, rgba(255,255,255,.55));
    animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: .75; } }

#nprogress {
    position: fixed; top: 0; left: 0; height: 2px; z-index: 70;
    background: linear-gradient(90deg, var(--brand-2), #6fb0f2);
    box-shadow: 0 0 8px rgba(28,95,174,.6);
    width: 0; opacity: 0; transition: width 200ms ease, opacity 200ms ease;
}

/* ---------- 下部 ---------- */
.footer {
    padding: 20px 18px 70px; color: var(--ink-3); font-size: 11px; text-align: center;
    letter-spacing: .02em;
}

/* ---------- 手引き(/Tebiki) ---------- */

/* 読みものの画面。ほかの画面は表が主役なので見出しは h2 までで足りていたが、
   手引きは段落と手順が主役で、h3・箇条書き・段落の地の文に定義が無かった。
   <b>手引き専用の器を作らない</b> —— 中身は .card / .note / .hint / .ichiran の
   ままで、ここで足すのは「読みものとしての字組み」だけにする。 */
.tebiki { max-width: 108ch; }
.tebiki h3 {
    margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink);
    letter-spacing: .01em;
}
.tebiki .card > h2 + .lead, .tebiki h3:first-child { margin-top: 0; }
.tebiki p { margin: 8px 0; line-height: 1.85; }
.tebiki ul, .tebiki ol { margin: 8px 0; padding-left: 1.5em; line-height: 1.85; }
.tebiki li { margin: 3px 0; }
.tebiki li + li { margin-top: 5px; }
/* 表の中に画面名を並べる欄。リンクどうしが地続きに見えないよう、行間を空ける */
.tebiki .ichiran td a { line-height: 2.1; }

/* ---------- 印刷 ---------- */

/* 画面だけに出すもの / 紙だけに出すもの。
   紙と突き合わせる画面(取込前チェックなど)は、条件欄やボタンを落として
   一覧だけを刷る。既定は「画面に出す・紙には出さない」 */
.print-dake { display: none; }

/* 束の切れ目で改ページする(地区ごと・伝票ごと)。先頭では改ページしない */
.kaipeji { break-before: auto; page-break-before: auto; }

@media print {
    .header, .menu, .subnav, .fnbar, .toasts, .footer, .btn-print, button { display: none !important; }
    body { background: #fff; }
    .body { padding: 0; }
    /* 入場アニメは「直下」だけでなく wrap の中のカードにも当たっている。
       打ち消しが .body > * だけだと、読み込み直後に印刷したとき
       backwards(開始前=透明)のまま紙に写り、本文がまっ白になる(2026-09-03 実測) */
    .body > *, .body * { animation: none !important; }
    .ichiran, .meisai, .grid, .scroll-x, .card, .shimari, .uri { box-shadow: none; border-radius: 0; }
    .ichiran > thead th, .meisai > thead th, .grid > thead th { position: static; background: #eee; }
    /* 紙では並び替えられないので、矢印も出さない
       (見出しが static になるため、行き場を失った矢印が別の場所に出る) */
    th.sortable::after { display: none; }
    .meisai:not(.meisai-w), .shimari { max-width: 360px; }

    .gamen-dake { display: none !important; }
    .print-dake { display: block; }

    /* 列の多い一覧を紙の幅に収める。<b>付けた表だけ</b>縮める ——
       共通の一覧すべてに掛けると、既にある帳票(納品明細書など)の見た目が変わる。
       画面では効かない(紙のときだけ小さくする) */
    .chijimi, .chijimi td, .chijimi th { font-size: 10px; }
    :where(.ichiran, .meisai, .grid).chijimi td { padding: 3px 5px; }
    :where(.ichiran, .meisai, .grid).chijimi > thead th { padding: 4px 5px; }
    :where(.ichiran, .meisai, .grid).chijimi td.setsumei { max-width: 16em; }
    /* 横スクロールの枠は紙では邪魔(はみ出したぶんが消える) */
    .scroll-x { overflow: visible; }
    /* 2つ目以降の束の前で改ページする。:first-of-type は「同じタグの最初」を指すので
       (先に別の div があると外れる)、兄弟に kaipeji があるものだけを対象にする */
    .kaipeji ~ .kaipeji { break-before: page; page-break-before: always; }
    tr { page-break-inside: avoid; }

    /* 手引きは配って渡す紙。A4に収め、章(.card)の途中で紙が変わらないようにする。
       章ごとに改ページはしない —— 6章あるので、そのつど改ページすると
       白いところだらけの6枚になる。切れてほしくないのは章の中である */
    .tebiki { max-width: none; }
    .tebiki > .card {
        border: 0; box-shadow: none; padding: 0; margin-bottom: 6mm;
        break-inside: avoid; page-break-inside: avoid;
    }
    .tebiki > .card > h2 {
        border-bottom: 1px solid #999; padding-bottom: 2px; margin-bottom: 6px;
    }
    .tebiki p, .tebiki li { line-height: 1.6; }
    /* 紙ではリンクの青が読みにくいだけで、押せもしない。字の色は地に戻す */
    .tebiki a { color: inherit; text-decoration: none; font-weight: 600; }
    .tebiki .ichiran td a { line-height: 1.8; }
}

/* ---------- 動きを減らす設定に従う ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important; animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* ---------- 狭い画面 ---------- */
@media (max-width: 900px) {
    .fnbar .spacer::after { content: none; }
}
@media (max-width: 720px) {
    .body { padding: 12px 12px 76px; }
    .joken { padding: 10px 12px; gap: 8px 10px; }
    .fnbar { gap: 6px; padding: 0 10px; }
    .fnkey { padding: 0 10px; font-size: 12px; }
    .meisai:not(.meisai-w), .shimari { max-width: 100%; width: 100%; }
    .corp { font-size: 11px; gap: 8px; }
}

/* ------------------------------------------------------------
   コード入力欄(仕入先・商品など)
   番号を覚えている人はそのまま打て、覚えていない人は名前で絞れる。
   選んだものの名前を欄の横に出して、取り違えを防ぐ。
   ------------------------------------------------------------ */
input.pick { min-width: 150px; }
.pick-name {
    display: inline-block; margin-left: 8px;
    font-size: 12px; color: var(--ink-2); white-space: nowrap;
    max-width: 22em; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.pick-name.ng { color: var(--ng); }

/* ============================================================
   画面ごとの見た目
   もともと各 .cshtml の末尾の <style> に書かれていたもの。
   同じ規則が2つの画面に重複していたり(input.nagasugi)、
   app.css の値と少しずれた色を持っていたり(見出し列の地色)したので、
   ここに集めた。**.cshtml 側の <style> は消してよい**(指揮側で削除)
   ============================================================ */

/* サインイン / パスワード変更 / 権限がありません。
   この3画面だけ、独自の色と角丸を .cshtml の <style> に持っていた
   (#1f5fa8・#b9c2cc・#555・角丸4px・入力欄36px)。本体の画面と数値がどれも違い、
   同じ製品の画面に見えなかった。ここでは共通の面・枠・活字に合わせている。
   **効くのはページ側の <style> を消してから**(いまはページ側が勝つ) */
.signin, .chpw, .denied {
    max-width: 380px; margin: 48px auto; padding: 26px 28px 28px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh);
}
.denied { max-width: 620px; }
.signin h1, .chpw h1, .denied h1 {
    margin: 0 0 18px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: .02em;
}
.signin label, .chpw label {
    display: block; margin: 14px 0 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
}
/* 高さ・枠・focus の輪は入力部品の共通規則に任せる。ここで決めるのは幅だけ */
.signin input, .chpw input { width: 100%; }
.signin button, .chpw button { width: 100%; margin-top: 22px; }
/* 断りの文は、本体の画面と同じ形の箱で出す(.keikoku / .ok-msg と同じ姿) */
.chpw > p.warn, .chpw > p.ok {
    padding: 9px 13px; margin: 0 0 12px; font-size: 12.5px; font-weight: 400; line-height: 1.8;
    border: 1px solid transparent; border-left-width: 3px; border-radius: var(--r-s);
}
.chpw > p.warn { background: var(--warn-bg); border-color: var(--skin-warn-edge, #ecdcb8); border-left-color: var(--warn); color: var(--ink); }
.chpw > p.ok   { background: var(--ok-bg);   border-color: var(--skin-ok-edge, #cfe7da); border-left-color: var(--ok);   color: var(--ok); }
.denied p { font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }
.denied code {
    background: var(--surface-2); border: 1px solid var(--line);
    padding: 1px 5px; border-radius: 3px; font-size: 12px;
}

/* 顧客照会「項目の内訳」。見出しと値が交互に並ぶ横長の表。
   見出し列を字数で固定しないと、値の短い行に引きずられて列幅が暴れる */
.ichiran.koumoku > tbody > tr > th { width: 9em; white-space: nowrap; background: var(--th-bg); }
.ichiran.koumoku > tbody > tr > td { min-width: 8em; }

/* 動いた記録の末尾を、そのままの形で出すところ(データ点検の「通知の設定」)。
   時刻とメッセージが桁でそろっていないと、いつ何が起きたかを目で追えない */
.kiroku-sue {
    margin: 6px 0 0; padding: 8px 11px; max-height: 15em; overflow: auto;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s);
    font-family: Consolas, "MS Gothic", monospace; font-size: 11.5px; line-height: 1.7;
    color: var(--ink-2); white-space: pre-wrap; word-break: break-all;
}

/* 相手先へ渡すレコードを、そのままの桁で出すところ(請求データ外部送信の確認)。
   .kiroku-sue と似ているが、こちらは **折り返してはいけない** ——
   CANDY-A は254バイトの固定長で、桁位置がずれると「どの項目がどこか」が読めなくなる。
   折り返さずに横スクロールさせる */
.soshin-rec {
    margin: 6px 0 0; padding: 8px 11px; max-height: 24em; overflow: auto;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s);
    font-family: Consolas, "MS Gothic", monospace; font-size: 11.5px; line-height: 1.6;
    color: var(--ink-2); white-space: pre; tab-size: 4;
}

/* 給油履歴の給油量。運行記録に書き写す用途があるので、ここだけ大きく出す */
.ichiran td.ryo {
    font-size: 14px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.ichiran tr.total td.ryo { font-size: 14px; }

/* 残高照会。計算が合わない行は、表を眺めただけで気づけるように行ごと敷く */
.ichiran tbody tr.zure td { background: var(--ng-bg); }
.ichiran tbody tr.zure td.sumcol { font-weight: 700; }

/* Shift_JIS のバイト数を超えた入力。送る前に、打っている最中に見せる
   (雑収入・出金の入力と、取引区分の保守で同じものを使っている) */
input.nagasugi { border-color: var(--ng); background: var(--ng-bg); }

/* 取引区分の保守。表のセルの中に置く「名称を変える」欄 */
.inline-henkou { display: flex; gap: 6px; align-items: center; margin: 0; }
.inline-henkou input { height: 26px; }

/* 一覧の行に付ける「直す・消す」。form は既定で block なので、
   囲まずに並べると縦に落ちる(雑収入・出金の入力で使っている) */
.gyo-sousa { display: flex; gap: 6px; align-items: center; }
.gyo-sousa form { margin: 0; display: inline; }

/* いま入力欄に読み込んでいる行。表のどれを直しているのかが分からないと、
   打ち直したものが別の行に入ったように見える */
.ichiran tbody tr.erabi td { background: var(--brand-bg); }

/* 消したものを戻す誘い。押す前の確認を置かない代わりに、押したあとに出す。
   ok-msg の下に続けて置くので、同じ幅・同じ間合いにそろえる */
.modosu {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin: 0 0 14px; padding: 9px 13px; font-size: 13px;
    background: var(--surface); border: 1px solid var(--line-2);
    border-left: 3px solid var(--brand-3); border-radius: var(--r-s);
}

/* 登録前の確認モーダル(入金・雑収入/出金で共用)。金額を大きく、責めない見た目。
   「間違っていますよ」ではなく「毎回ここで一度だけ立ち止まる」場所 */
.kakunin-ob {
    position: fixed; inset: 0; z-index: 300; display: flex;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(13,26,45,.45); backdrop-filter: blur(1px);
}
/* hidden の詳細度は .kakunin-ob と同じで、後に書いた display:flex が勝ってしまう。
   属性+クラスで詳細度を上げて、hidden のときは必ず隠す(開くまで出さない・戻るで閉じる) */
.kakunin-ob[hidden] { display: none; }
.kakunin-box {
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r); box-shadow: var(--sh-2);
    width: min(460px, 100%); max-height: 90vh; overflow: auto; padding: 20px 22px;
}
.kakunin-box h3 { margin: 0 0 6px; font-size: 17px; }
.kakunin-lead { margin: 0 0 14px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.kakunin-gaku {
    display: flex; align-items: baseline; gap: 12px; justify-content: center;
    background: var(--brand-bg); border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 14px;
}
.kakunin-gaku .ra { font-size: 12.5px; color: var(--brand-2); }
.kakunin-gaku .kin {
    font-size: 34px; font-weight: 800; letter-spacing: .5px; line-height: 1.1;
    color: var(--brand); font-variant-numeric: tabular-nums;
}
.kakunin-gaku .kin.is-neg { color: var(--ng); }   /* 赤伝(マイナス)は赤 */
.kakunin-hyo { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; }
.kakunin-hyo dt { color: var(--ink-3); }
.kakunin-hyo dd { margin: 0; font-weight: 600; }
.kakunin-hyo dd.warn { color: var(--ng); }
.kakunin-meisai { border-top: 1px dashed var(--line-2); padding-top: 10px; margin-bottom: 8px; }
.kakunin-meisai .ra { font-size: 11.5px; color: var(--ink-3); margin-bottom: 5px; }
.kakunin-meisai ul { list-style: none; margin: 0; padding: 0; }
.kakunin-meisai li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 3px 0; font-size: 13px; border-bottom: 1px solid var(--line);
}
.kakunin-meisai li:last-child { border-bottom: 0; }
.kakunin-meisai .ki { font-weight: 700; font-variant-numeric: tabular-nums; }
.kakunin-chui { font-size: 12px; margin: 6px 0 2px; }
.kakunin-btn { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.kakunin-btn .go { font-size: 14px; padding: 9px 20px; }

/* 候補リスト(番号でも名前でも絞れる) */
.pick-list {
    position: absolute; z-index: 200; max-height: 320px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s);
    box-shadow: var(--sh-2); font-size: 13px;
}
.pick-row { display: flex; align-items: baseline; gap: 10px;
            padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.pick-row:hover, .pick-row.on { background: var(--brand-bg); }
.pick-cd  { font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 7.5em; }
.pick-nm  { flex: 1; color: var(--ink); }
.pick-sub { color: var(--ink-3); font-size: 11.5px; }
.pick-none { padding: 10px 12px; color: var(--ink-3); font-size: 12px; }

/* 横に長いクロス表の左端を止める(ＳＳ速報照会。行=ＳＳ21店 × 列=分類が最大40)。
   左端が流れると、いま見ているのがどの店の行なのか分からなくなる。
   .scroll-x の中でだけ効かせる ―― 器の無い素の表に付けても止まる相手がいない。
   背景を必ず塗るのも要る。透けると、下を流れていく列の数字と重なって読めなくなる */
.scroll-x > table > thead th.kotei,
.scroll-x > table > tbody th.kotei,
.scroll-x > table > tbody td.kotei {
    position: sticky; left: 0; z-index: 3;
    background: var(--surface);
    box-shadow: inset -1px 0 0 var(--line-2);
}
/* 見出しは縦にも横にも止まるので、他のセルより上に置く */
.scroll-x > table > thead th.kotei { z-index: 4; background: var(--surface-2); }
/* 合計行と、触れている行の色を、止めた列にも掛ける
   (背景を塗ってあるぶん、放っておくとこの列だけ色が乗らない) */
.scroll-x > table > tbody tr.sum > th.kotei,
.scroll-x > table > tbody tr.sum > td.kotei { background: var(--brand-bg); }
.scroll-x > table > tbody tr:hover > th.kotei,
.scroll-x > table > tbody tr:hover > td.kotei { background: var(--brand-bg2); }

/* ============================================================
   領収書(/Ryoshusho)
   紙になる唯一の画面なので、画面の色は借りずに「黒い線と黒い字」で組む。
   SSのプリンタは白黒が多く、地色は既定では刷られない ――
   色に意味を持たせると、刷った紙から意味が消える。
   寸法は mm。A5(148mm幅)に収まるようにしてあり、A4に刷ると上半分に出る。
   ============================================================ */
.ryoshu-ban { display: flex; justify-content: center; margin: 16px 0 24px; }
.ryoshu {
    width: 148mm; box-sizing: border-box; padding: 12mm 12mm 8mm;
    background: var(--skin-surface, #fff); color: var(--skin-ink, #111); font-size: 13px; line-height: 1.6;
    border: 1px solid var(--line-2); border-radius: var(--r-s); box-shadow: var(--sh-2);
}
/* 「再発行」「未発行(プレビュー)」「検証(練習)」の印。
   地色ではなく枠と字の色で出す(白黒でも必ず出る) */
.ryoshu-sukashi {
    width: fit-content; margin: 0 auto 5mm; padding: 2px 14px;
    border: 2px solid var(--skin-red, #b0272d); border-radius: 3px;
    color: var(--skin-red, #b0272d); font-size: 15px; font-weight: 700; letter-spacing: .3em;
}
.ryoshu-atama { display: flex; align-items: flex-start; justify-content: space-between; gap: 8mm; }
.ryoshu-midashi {
    font-size: 24px; font-weight: 700; letter-spacing: .4em;
    border-bottom: 2px solid var(--skin-ink, #111); padding: 0 4px 3px;
}
.ryoshu-no { font-size: 11px; line-height: 1.7; text-align: right; color: var(--skin-ink-2, #333);
             font-variant-numeric: tabular-nums; }
.ryoshu-atena {
    margin-top: 8mm; max-width: 80%; font-size: 16px;
    border-bottom: 1px solid var(--skin-ink, #111); padding-bottom: 3px;
}
.ryoshu-atena .keisho { margin-left: 10px; font-size: 13px; }
.ryoshu-kin {
    margin-top: 6mm; padding-bottom: 4px; text-align: center;
    font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
    border-bottom: 2px solid var(--skin-ink, #111);
}
.ryoshu-kin .mark { font-size: 19px; margin: 0 6px; }
.ryoshu-kin .zei  { font-size: 12px; font-weight: 400; margin-left: 10px; }
.ryoshu-tada { margin-top: 5mm; }
.ryoshu-tada .but {
    display: inline-block; margin-right: 8px; padding: 0 5px;
    border: 1px solid var(--skin-ink, #111); font-size: 11px;
}
.ryoshu-ryoshu { margin-top: 2mm; }
.ryoshu-shita { display: flex; justify-content: space-between; gap: 8mm; margin-top: 6mm; }
.ryoshu-uchiwake { font-size: 11px; color: var(--skin-ink-2, #333); }
.ryoshu-uchiwake .meisai { font-size: 11px; margin: 0; }
.ryoshu-kbn { color: var(--skin-ink-2, #333); }
.ryoshu-inshi { margin-top: 3mm; color: var(--skin-ink-2, #555); }
/* 収入印紙の貼付枠(5万円以上)。紙になる部分なので色は使わず黒い実線で組む。
   枠は実物の印紙(およそ18×22mm)が収まる大きさ+余白 */
.ryoshu-inshiwaku { display: flex; align-items: center; gap: 3mm; margin-top: 3mm; }
.ryoshu-inshiwaku .waku {
    width: 24mm; height: 28mm; border: 1.5px solid var(--skin-ink, #000);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1.5; text-align: center; color: var(--skin-ink, #000);
}
.ryoshu-inshiwaku .soeta { font-size: 10px; color: var(--skin-ink-2, #333); line-height: 1.6; }
.ryoshu-hakkosha { min-width: 62mm; font-size: 12px; line-height: 1.7; }
.ryoshu-hakkosha .kaisya { font-size: 14px; font-weight: 700; }
.ryoshu-hakkosha .toroku { margin-top: 2px; font-variant-numeric: tabular-nums; }
/* 受け取ったSS。会社の表記とは段を分ける(どちらが発行者かを取り違えない) */
.ryoshu-hakkosha .ssmei {
    margin-top: 3mm; padding-top: 2mm; border-top: 1px solid var(--skin-edge, #ccc); font-size: 11px;
}
.ryoshu-ashi {
    margin-top: 5mm; padding-top: 2mm; border-top: 1px dotted var(--skin-muted, #999);
    font-size: 10px; color: var(--skin-ink-2, #555);
}

@media print {
    /* 紙では器を外す。A5の紙にもA4にも、同じ内容がそのまま乗る */
    .ryoshu-ban { display: block; margin: 0; }
    .ryoshu {
        width: auto; padding: 6mm 4mm; border: 0; border-radius: 0; box-shadow: none;
    }
    /* 領収書は1枚で切れないこと(金額と発行者が別の紙に分かれない) */
    .ryoshu { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================
   グラフ(店の売上グラフ /SsGraph で使っている)

   方針:
     ・**外部ライブラリを入れない。** 円は SVG の stroke-dashoffset、
       棒は高さ、折れ線は SVG の polyline で、どれもCSSだけで動かす。
       描画ライブラリを1つ入れると、その版と将来のブラウザの相性を
       ずっと見続けることになる(現行の ActiveReports で経験している)
     ・**値はHTMLのインライン変数(--len / --h)で渡し、規則はここに置く。**
       画面ごとに <style> を書かない、という app.css の決まりに従う
     ・動きは「入場」だけ。ずっと動き続けるものは作らない ――
       毎日見る画面で光り続けるものは3日で邪魔になる
     ・prefers-reduced-motion はファイル末尾の共通規則で効く。
       どのアニメも<b>静止状態が完成形</b>になるように書いてあるので、
       動きを止めても絵は正しく出る(印刷も同じ)
   ============================================================ */

/* ---------- 色 ---------- */
/* 油種は<b>給油ノズルの色</b>に合わせてある(ハイオク=黄・レギュラー=赤・
   軽油=緑・灯油=青)。店の人が毎日見ている色と同じなら凡例を読まなくてよい。
   5以降はそれ以外の分類に順に回す色 */
.g1  { --iro: #e0a015; }
.g2  { --iro: #c8453f; }
.g3  { --iro: #2f9e6b; }
.g4  { --iro: #1c5fae; }
.g5  { --iro: #7a5ac9; }
.g6  { --iro: #0f9bb5; }
.g7  { --iro: #e0762b; }
.g8  { --iro: #b3689a; }
.g9  { --iro: #6b7a8f; }
.g10 { --iro: #8a9b1f; }

/* ---------- でっかい数字 ---------- */
.kpi-ban {
    display: grid; gap: 14px; margin: 0 0 16px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.kpi {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--brand-3); border-radius: var(--r);
    padding: 13px 16px 14px; box-shadow: var(--sh);
}
.kpi > h2 {
    margin: 0 0 4px; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; color: var(--ink-2);
}
.kpi > h2 small { margin-left: 6px; font-weight: 400; color: var(--ink-3); }
.kpi-atai { margin: 0; line-height: 1.05; white-space: nowrap; }
.kpi-sei {
    font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* 小数は小さく添える。桁の頭を大きく見せたいだけで、値は削らない */
.kpi-sho { font-size: 19px; font-weight: 600; color: var(--ink-2);
           font-variant-numeric: tabular-nums; }
.kpi-tani { margin-left: 6px; font-size: 14px; color: var(--ink-2); }

.kpi-kurabe { list-style: none; margin: 12px 0 0; padding: 0; }
.kpi-kurabe li {
    display: flex; align-items: baseline; gap: 8px;
    padding: 3px 0; font-size: 12px; border-top: 1px solid var(--line);
}
.kpi-mi { color: var(--ink-2); min-width: 6em; }
/* 増減は<b>色と向きだけで読ませない</b>。必ず数字を添える(色の見えにくい人がいる) */
.kpi-ya { font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-ya.ue    { color: var(--ok); }
.kpi-ya.shita { color: var(--ng); }
.kpi-ya.yoko  { color: var(--ink-2); }
.kpi-ya.nashi { color: var(--ink-3); font-weight: 400; }
.kpi-moto { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kpi-tebiki p { margin: 0 0 7px; font-size: 12px; line-height: 1.75; color: var(--ink-2); }
.kpi-tebiki p:last-child { margin-bottom: 0; }

/* 数字がせり上がって出る。<b>最終値はHTMLに書いてある</b>ので、
   JSが動かなくても数字は正しく出る(動くのは見た目だけ) */
.kpi-atai { animation: kpiAgaru 420ms cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes kpiAgaru { from { opacity: 0; transform: translateY(8px); } }

/* ---------- グラフの器 ---------- */
.graf-ban {
    display: grid; gap: 14px; margin: 0 0 16px;
    grid-template-columns: minmax(280px, 360px) minmax(320px, 1fr);
    /* 高さをそろえない。そろえると、凡例の長い円グラフに引っ張られて
       棒グラフの下に大きな空白ができる */
    align-items: start;
}
@media (max-width: 900px) { .graf-ban { grid-template-columns: 1fr; } }

.graf {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 13px 16px 15px; box-shadow: var(--sh);
    margin: 0 0 16px;
}
.graf-ban > .graf { margin: 0; }
.graf > h2 {
    margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink);
    border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.graf > h2 small { margin-left: 8px; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }

/* ---------- 円グラフ(ドーナツ) ---------- */
.en-ban { position: relative; width: 100%; max-width: 260px; margin: 4px auto 10px; }
.enguraf { display: block; width: 100%; height: auto; }
.en-ji { fill: none; stroke: var(--surface-3); stroke-width: 40; }
/* 1切れ = 円周の一部だけを描いた円。時計回りに開くのは
   stroke-dashoffset を「長さ→0」へ動かしているため。
   始まりの角度ぶん回してあるので、切れが順につながって1本の針のように見える */
.en-kire {
    fill: none; stroke: var(--iro); stroke-width: 40;
    stroke-dasharray: var(--len) 9999;
    stroke-dashoffset: 0;                       /* 静止状態が完成形 */
    transform: rotate(calc(-90deg + var(--kaishi) * 1deg));
    transform-origin: 100px 100px;
    animation: enSweep var(--dur) linear var(--dly) backwards;
}
@keyframes enSweep { from { stroke-dashoffset: var(--len); } }
.en-kire:hover { filter: brightness(1.12); }
.en-naka {
    position: absolute; inset: 0; display: flex;
    flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none; line-height: 1.25;
}
.en-naka b {
    font-size: 19px; font-weight: 700; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.en-naka span { font-size: 11px; color: var(--ink-3); }

.en-hanrei { list-style: none; margin: 0; padding: 0; }
.en-hanrei li {
    display: flex; align-items: baseline; gap: 7px;
    padding: 3px 0; font-size: 12px; border-top: 1px solid var(--line);
}
.en-iro {
    width: 10px; height: 10px; border-radius: 2px;
    background: var(--iro); flex: none; position: relative; top: 1px;
}
.en-mei { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-wari { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.en-atai { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }

/* ---------- 棒グラフ ---------- */
.bou-graf { display: flex; align-items: flex-end; gap: 10px; padding: 6px 0 0; }
.bou-retsu { flex: 1 1 0; min-width: 0; text-align: center; }
.bou-suji {
    font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bou-hi { display: block; font-size: 10.5px; font-weight: 700; }
.bou-hi.ue    { color: var(--ok); }
.bou-hi.shita { color: var(--ng); }
.bou-mizo {
    position: relative; height: 190px; margin: 4px 0 5px;
    border-bottom: 1px solid var(--line-2);
}
/* 前年同月。<b>後ろに薄く敷く</b>ので、比べるのに目を動かさなくてよい */
.bou-zen {
    position: absolute; left: 4%; right: 4%; bottom: 0; height: var(--h);
    background: var(--brand-bg); border: 1px solid var(--skin-edge, #d7e4f5); border-bottom: 0;
    border-radius: 3px 3px 0 0;
    animation: bouNobiru 620ms cubic-bezier(.2,.7,.3,1) calc(var(--i) * 60ms) backwards;
}
.bou-ima {
    position: absolute; left: 24%; right: 24%; bottom: 0; height: var(--h);
    background: linear-gradient(180deg, var(--brand-3), var(--brand-2));
    border-radius: 3px 3px 0 0;
    box-shadow: 0 1px 2px rgba(13,26,45,.18);
    animation: bouNobiru 620ms cubic-bezier(.2,.7,.3,1) calc(var(--i) * 60ms + 90ms) backwards;
}
@keyframes bouNobiru { from { height: 0; } }
.bou-retsu:hover .bou-ima { filter: brightness(1.1); }
/* 途中の月。<b>色ではなく斜線</b>で示す ―― 印刷しても残る */
.bou-retsu.is-tochu .bou-ima {
    background: repeating-linear-gradient(135deg,
        var(--brand-2) 0 6px, var(--brand-3) 6px 12px);
}
.bou-fuda { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.bou-fuda .badge { margin-left: 4px; }

/* ---------- 折れ線 ---------- */
/* 【2026-09-04 改め】ここには max-width:1000px があった。
   viewBox(600×160)のまま伸ばすと高さも一緒に伸びるので、幅で頭を止めて
   中央に置いていた —— その結果、1920px の画面では<b>器が1880px、中身が1000px</b>で、
   左右に440pxずつ余白が出た(亀田さん「日次グラフがレイアウト枠に対して中身が小さい」)。
   止めるのをやめ、<b>器いっぱいに広げる</b>。代わりに、拡大率と一緒に太っていた
   線と点の太さを下げる —— 器の幅で見え方が変わるのは、そこだけだったので。 */
.ori-ban { padding: 4px 0 0; }
.ori { display: block; width: 100%; height: auto; }
/* 目盛と縦線は<b>拡大しても1pxのまま</b>にする(vector-effect)。
   引く動きのある線(.ori-ima / .ori-zen)には掛けない ――
   あれは pathLength="100" と dasharray で描いているので、
   線の長さの基準が変わると<b>実線が破線になる</b> */
.ori-me { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ori-nuri { fill: var(--brand-bg2); opacity: 0; animation: oriNuri 500ms ease-out 620ms forwards; }
@keyframes oriNuri { to { opacity: 1; } }
/* pathLength="100" を付けてあるので、実際の長さに関係なく 100 で引き切れる */
.ori-ima, .ori-zen {
    fill: none; stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 100; stroke-dashoffset: 0;
    animation: oriHiku 900ms ease-out backwards;
}
@keyframes oriHiku { from { stroke-dashoffset: 100; } }
/* 太さは<b>viewBox の単位</b>。器の幅600に対する比なので、器が広がると
   そのぶん太る。器いっぱいに広げた(max-width を外した)ぶん、値を下げてある
   —— 1280px で約2.2px、1920px で約3.4px に出る */
.ori-ima { stroke: var(--brand-2); stroke-width: 1.1; }
.ori-zen { stroke: var(--ink-3); stroke-width: .8; stroke-dasharray: 100; opacity: .45;
           animation-delay: 120ms; }
/* 点は<b>拡大率で大きさが変わってはいけない</b>(器が広いほど団子になる)。
   半径は小さめに取り、縁の線は拡大しない指定にする */
.ori-ten {
    fill: var(--surface); stroke: var(--brand-2); stroke-width: 1.4; r: 1.9;
    vector-effect: non-scaling-stroke;
    opacity: 0; animation: oriTen 300ms ease-out 900ms forwards;
}
.ori-ten:hover { fill: var(--brand-2); r: 2.9; }
@keyframes oriTen { to { opacity: 1; } }
/* 日付の目盛。棒と同じ幅で割り付けるので、線の下にそのまま並ぶ */
.ori-jiku {
    display: flex; justify-content: space-between;
    padding: 2px 4% 0; font-size: 10px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.ori-jiku .nichi { color: var(--ng); }
.ori-jiku .doyo  { color: var(--brand-2); }

/* ---------- 天気(折れ線に重ねる気温と、雨・雪の印) ----------
   気温は<b>売上とは別の軸</b>なので、色も線の太さも売上の線と変える。
   売上の線より細く・目立たなくする —— 主役は売上のほうである */
.kion-ima {
    fill: none; stroke: var(--skin-red, #c8453f); stroke-width: .6; stroke-linejoin: round;
    opacity: .85; animation: oriHiku 900ms ease-out 300ms backwards;
}
.kion-zen {
    fill: none; stroke: var(--skin-red, #c8453f); stroke-width: .5; stroke-linejoin: round;
    opacity: .3; stroke-dasharray: 3 3;
}
.kion-hanrei { color: var(--skin-red, #c8453f); font-weight: 600; }

/* 図の器。右軸の文字をSVGの上に重ねるための基準 */
.ori-zu { position: relative; }
/* 右軸(気温)の目盛。SVGの &lt;text&gt; はRazorが横取りするのでHTMLで重ねる */
.kion-me {
    position: absolute; right: 0; transform: translateY(-50%);
    font-size: 10px; color: var(--skin-red, #c8453f); opacity: .85;
    background: var(--surface); padding: 0 1px;
    font-variant-numeric: tabular-nums; pointer-events: none;
}

/* 天気の印(晴・曇・雨・雪)。折れ線の上に、日付の目盛と同じ割り付けで並べる。
   <b>絵文字を使わない。</b>端末のフォント任せになり、白黒印刷で潰れる。
   自前のSVGなら、色が出なくても<b>形</b>で見分けられる(色覚への配慮でもある) */
.tenki-kata { position: absolute; width: 0; height: 0; overflow: hidden; }
.tenki-obi {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 4% 1px; line-height: 1;
}
.tenki-obi > span { display: block; width: 13px; height: 13px; }
.tenki-ji { width: 13px; height: 13px; display: block; }
/* 色は形の補助。無くても読めるが、あると一目で分かる */
.tenki-obi .hare, .tenki-fu.hare     { color: #e0a015; }
.tenki-obi .kumori, .tenki-fu.kumori { color: var(--skin-muted, #97a3b5); }
.tenki-obi .ame, .tenki-fu.ame       { color: var(--brand-2); }
.tenki-obi .yuki, .tenki-fu.yuki     { color: #0f9bb5; }
/* 前年(364日前)の段。薄くして、当月の印と取り違えないようにする */
.tenki-obi.is-zen { opacity: .4; }
.tenki-obi.is-zen > span { width: 11px; height: 11px; }
.tenki-obi.is-zen .tenki-ji { width: 11px; height: 11px; }
/* 推定でしか出せない観測所。印そのものを弱くして「観測ではない」ことを示す */
.tenki-obi.is-suitei > span { opacity: .75; }

/* 本文の中で印の意味を説明するときに使う(凡例) */
.tenki-fu { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.tenki-fu .tenki-ji { width: 12px; height: 12px; }

/* ---------- 予報のしっぽ ----------
   <b>実績と同じ顔をさせない。</b>地を敷き、境目に点線を立て、札を出す。
   ここを実績と見分けられなくしたら、この区画は害になる */
.yohou-ji { fill: var(--brand); opacity: .05; }
.yohou-sakai {
    stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5;
    vector-effect: non-scaling-stroke;
}
/* 月の変わり目。予報より濃く、目盛より薄い */
.tsuki-sakai { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; opacity: .55;
               vector-effect: non-scaling-stroke; }
/* 予報の気温は「その日の最低〜最高」の帯。線にしない(平均気温の実績と混ざる) */
.yohou-kion { fill: var(--skin-red, #c8453f); opacity: .3; }
.yohou-kion:hover { opacity: .5; }

/* 「ここから先は予報」の札。図の上に重ねる(SVGの文字はRazorが使わせてくれない) */
.yohou-fuda {
    position: absolute; top: 0; transform: translateX(4px);
    font-size: 10px; color: var(--brand); opacity: .8; white-space: nowrap;
    pointer-events: none;
}
.yohou-fuda.is-furui { color: var(--ng); opacity: 1; font-weight: 700; }
.tsuki-fuda {
    position: absolute; bottom: 0; transform: translateX(3px);
    font-size: 10px; color: var(--ink-2); font-weight: 700; white-space: nowrap;
    pointer-events: none;
}
/* 予報の列は、日付の目盛も印も薄くする */
.ori-jiku .is-yohou { opacity: .5; }
.tenki-obi .is-yohou { opacity: .55; }

/* 気温の一言。でっかい数字の隣に置くので、字は本文と同じ大きさにする */
.kion-hitokoto { margin: 0 0 7px; font-size: 12px; line-height: 1.75; color: var(--ink-2); }
.kion-hitokoto b { color: var(--ink); }

/* 出典。<b>消してはいけない行</b>(気象庁 公共データ利用規約 第1.0版) */
.shutten { font-size: 11px; color: var(--ink-3); }

/* ---------- 増減の要因分解(売上 = 客数 × 客単価) ---------- */
/* 器の中で2列ぶんの幅を取る。掛け算の式が折り返すと読めない */
.kpi-hiro { grid-column: 1 / -1; }
@media (max-width: 900px) { .kpi-hiro { grid-column: auto; } }

.youin { list-style: none; margin: 6px 0 0; padding: 0; }
.youin > li {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 9px 0; border-top: 1px solid var(--line);
}
.youin-mi { min-width: 9em; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.youin-mi small { display: block; font-weight: 400; color: var(--ink-3); }
.youin-shiki { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 式の1項。数字を大きく、意味を小さく下に添える */
.youin-koma { display: inline-flex; flex-direction: column; line-height: 1.25; min-width: 5.5em; }
.youin-koma b { font-size: 20px; font-variant-numeric: tabular-nums; }
.youin-koma small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.youin-eq, .youin-x { font-size: 15px; color: var(--ink-3); font-weight: 700; }
/* 「=」の左(売上)だけ地を敷いて、答えと内訳を見分ける */
.youin-koma:first-child { padding: 2px 10px 3px; background: var(--surface-2); border-radius: var(--r-s); }

/* ---------- 積み上げの帯(店の売上グラフ「売り方の構成」) ----------
   <b>クラス名を .obi-* にしない。</b>月報(/Geppo)が同じ app.css の下のほうで
   .obi-graf を「1本の横帯」として定義していて、後勝ちで
   flex-direction:column が潰され、6ヶ月ぶんの行が1行に重なった
   (2026-09-04。画面を撮って初めて分かった。DOMは6行あるので数字の検査では出ない)。
   共有のCSSに置く以上、名前は画面をまたいでも衝突しないものにする */
.tsumi-hanrei {
    list-style: none; display: flex; flex-wrap: wrap; gap: 14px;
    margin: 0 0 8px; padding: 0; font-size: 12px; color: var(--ink-2);
}
.tsumi-hanrei li { display: flex; align-items: center; gap: 5px; }
.tsumi-hanrei small { color: var(--ink-3); }

.tsumi-graf { display: flex; flex-direction: column; gap: 5px; }
.tsumi-gyo { display: flex; align-items: center; gap: 10px; }
.tsumi-fuda { min-width: 6em; font-size: 12px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.tsumi-migi { min-width: 11em; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tsumi-ban {
    flex: 1; display: flex; height: 26px; overflow: hidden;
    border-radius: var(--r-s); background: var(--surface-2);
}
/* 幅は割合、伸びるのは横方向。棒と同じく順に開く */
.tsumi-koma {
    width: var(--w); background: var(--iro); position: relative;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-variant-numeric: tabular-nums;
    animation: tsumiHiraku 620ms cubic-bezier(.2,.7,.3,1) calc(var(--i) * 60ms) backwards;
    overflow: hidden; white-space: nowrap;
}
@keyframes tsumiHiraku { from { width: 0; } }
.tsumi-koma:hover { filter: brightness(1.1); }
/* 狭い区画では数字を出さない(はみ出して読めない字が並ぶより、何も出ないほうがよい)。
   細いかどうかは<b>割合で決める</b>ので、画面の幅にはよらない(Razor 側で .is-hosoi を付ける) */
.tsumi-koma span { padding: 0 4px; }
.tsumi-koma.is-hosoi span { display: none; }
/* 区画の境目。細い区画どうしが隣り合うと、色が変わっただけの1本の帯に見える */
.tsumi-koma + .tsumi-koma { box-shadow: inset 1px 0 0 rgba(255,255,255,.75); }
.tsumi-nashi {
    flex: 1; display: flex; align-items: center; padding: 0 8px;
    font-size: 11px; color: var(--ink-3);
}

/* 曜日の札。日曜と土曜だけ色を変える(折れ線の目盛と同じ色使い) */
.bou-fuda.nichi { color: var(--ng); font-weight: 700; }
.bou-fuda.doyo  { color: var(--brand-2); font-weight: 700; }

/* ---------- 合計する店を選ぶ(/SsGraph の「選んだ店の合計」) ----------

   条件欄の中の<b>1行まるごと</b>を使う。店は20を超えるので、
   ラベルと同じ行に押し込むと折り返しで高さが崩れる(条件欄の他の部品は
   「ラベルと入力欄が横並びの兄弟」のままで、ここだけが行を占める)。

   <b>効いていないときは消さずに沈める。</b>チェックの欄ごと消すと、
   「選んだ店の合計」を選ぶまで何を選べるのか分からない画面になる
   (.joken input.muted と同じ考え方) */
.kei-erabi { display: inline-flex; gap: 10px; align-items: center; }
.ss-erabi {
    flex-basis: 100%; display: flex !important; align-items: flex-start !important;
    gap: 10px; margin: 6px 0 0 0 !important; padding-top: 8px;
    border-top: 1px dashed var(--line-2);
}
.ss-erabi-mi {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--ink-2);
    white-space: nowrap; min-height: 26px;
}
.ss-erabi-mi .okuri-btn { height: 24px; padding: 0 7px; font-size: 11px; }
.ss-erabi-hako {
    display: flex; flex-wrap: wrap; gap: 2px 14px; flex: 1;
}
.ss-erabi-hako label.radio {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--ink-1); white-space: nowrap; min-height: 24px;
}
.ss-erabi-hako label.radio input { margin: 0; flex: none; }
.ss-erabi.is-off { opacity: .5; }
.ss-erabi.is-off .ss-erabi-hako label.radio { color: var(--ink-3); }

/* ---------- 前へ / 次へ ---------- */
.okuri { display: inline-flex; gap: 4px; }
.okuri-btn {
    display: inline-flex; align-items: center; height: 28px; padding: 0 9px;
    border: 1px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface); color: var(--brand-2);
    font-size: 12px; white-space: nowrap; transition: background var(--t), border-color var(--t);
}
.okuri-btn:hover { background: var(--brand-bg); border-color: var(--brand-3); }
.okuri-btn.is-off { color: var(--ink-3); background: var(--surface-2); cursor: default; }

/* ============================================================
   月報(/Geppo)

   この画面は<b>紙が本体</b>。月初の全体朝礼とＳＳマネージャー会議で配る資料で、
   画面で読む時間より、刷って配ったあとに読まれる時間のほうが長い。
   だから寸法は<b>A4の1枚に収まること</b>から決めてある(下の @media print)。

   色は借りるだけで、新しい色は足していない ―― 帯の色は油種の色(.g1〜.g10)、
   凡例は円グラフのもの(.en-hanrei)をそのまま使う。
   ============================================================ */

/* ---------- 増えた・減ったの色 ---------- */
/* <b>色だけで読ませない。</b>数字(103.2%)は必ず横に出ているので、
   色は「どちらを向いているか」を先に伝えるためだけのもの。

   <b>しきい値を置かない(±0.1%でも色を付ける)。</b>他の画面(日報の差額・速報の
   取り込み途中)では「毎日色が付くと色の意味が消える」ので閾値を置いたが、
   ここは逆である ―― 整備・洗車の前月比は<b>担当者を動かすための数字</b>で、
   小さな下がりを丸めて隠すと、気づいてほしい相手に届かない
   (2026-09-04 亀田さん)。 */
.hi-up   { color: var(--ok); font-weight: 700; }
.hi-down { color: var(--ng); font-weight: 700; }

/* ---------- 分類の組の見出し行 ---------- */
/* 「ＳＳ商材(油外)」「その他事業」「油種」。表の中に挟む小見出しなので、
   合計行(.sum)より弱く、明細より強い。並びの意味はここで初めて読める */
.geppo-kumi > th {
    background: var(--surface-3); color: var(--brand);
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    padding-top: 5px; padding-bottom: 5px;
}

/* ---------- 横に積む帯 ---------- */
/* 現金フリー / 現金固定 / 掛・カード他 の構成比。
   幅は HTML 側のインライン変数(--w)で渡す。規則はここに置く */
.obi-graf {
    display: flex; width: 100%; height: 26px; margin: 2px 0 12px;
    border-radius: var(--r-s); overflow: hidden;
    background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line);
}
.obi-kire {
    flex: 0 0 var(--w); background: var(--iro);
    animation: obiHirogaru 620ms cubic-bezier(.2,.7,.3,1) backwards;
}
/* 静止状態が完成形。動きを止めても、印刷しても、帯は正しい幅で出る */
@keyframes obiHirogaru { from { flex-basis: 0; } }
.obi-kire:hover { filter: brightness(1.1); }

/* ---------- 表 ---------- */
/* 数字の列は等幅・右寄せ(共通規則)。ここで決めるのは<b>行の意味</b>だけ */
.geppo-hyo > tbody > tr > th,
.geppo-hyo > tfoot > tr > th { text-align: left; white-space: nowrap; }
/* 合計に入らない行(雑収入の「前日繰越」)。
   <b>薄くして消さない</b> ―― 数字は読めるまま、合計の外にあることだけを示す。
   前日繰越を足すと同じ現金を何度も数えることになるので合計から外しているが、
   除いたのではなく別枠である、と読めなければならない */
.geppo-soto > th:first-child { color: var(--ink-2); }
.geppo-soto > th:first-child::before {
    content: "└"; margin-right: 4px; color: var(--ink-3); font-weight: 400;
}
.geppo-hoshi { margin-left: 3px; color: var(--warn); cursor: help; }
.geppo-komakai { font-size: 12px; }
.geppo-zei { margin-top: 8px; }
.geppo-nashi { margin-bottom: 0; }

/* 下半分の4区画(雑収入・取引区分の比率・現金の客数・出どころ)を2列2段に組む。
   縦に積むとA4の1枚に収まらない。狭い画面では素直に1列へ落ちる */
.geppo-dan {
    display: grid; gap: 14px; margin: 0 0 16px;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    align-items: start;
}
.geppo-dan > .graf { margin: 0; }

.geppo-list { margin: 0; padding-left: 1.3em; font-size: 12px; line-height: 1.85; color: var(--ink-2); }
.geppo-list code { font-size: 11.5px; }

@media print {
    /* ---- A4 1枚に収める ----
       ＳＳを1店選んだときの1枚が基準。画面では見やすさのために取ってある余白を
       ここで全部落とす。字を小さくするのは最後の手段で、まず余白から削る */
    @page { size: A4 portrait; margin: 9mm 9mm 7mm; }

    /* 行の高さがこの1枚の枚数を決める。実測(2026-09-04、ＳＳ178・ヘッドレスChrome):
       行間1.6・上下2pxのままだと 1,371px = A4 2枚。1.3・1px にすると 1行 20px→15px、
       表が20行あるので約100px 縮む。字の大きさ(10px)は下げていない ―― 配る紙なので */
    .geppo-hyo, .geppo-hyo th, .geppo-hyo td { font-size: 10px; line-height: 1.25; }
    .geppo-hyo > thead th { padding: 1px 4px; }
    .geppo-hyo > tbody td, .geppo-hyo > tbody th,
    .geppo-hyo > tfoot td, .geppo-hyo > tfoot th { padding: 0 4px; }
    .geppo-kumi > th { font-size: 9.5px; padding-top: 2px; padding-bottom: 2px; }
    .geppo-soto > th:first-child::before { margin-right: 2px; }

    /* 区画の器は紙では線1本にする。影と角丸は紙に出ないうえ場所を取る */
    .graf {
        margin: 0 0 2mm; padding: 0; border: 0; box-shadow: none;
        break-inside: avoid; page-break-inside: avoid;
    }
    .graf > h2 { margin: 0 0 1mm; padding-bottom: .5mm; font-size: 10.5px; }
    .graf > h2 small { font-size: 8.5px; }
    .page-title { margin: 0 0 2mm; padding: 0; }

    /* 横並びは紙でも維持する。縦に落ちると1枚に入らない */
    .geppo-dan { gap: 3mm 5mm; margin: 0; grid-template-columns: 1fr 1fr; }

    .obi-graf { height: 12px; margin: .5mm 0 1mm; }
    .en-hanrei li { padding: 0; font-size: 9px; }

    .geppo-hyo .chip { font-size: 8px; padding: 0 4px; }
    /* 説明の類は紙では小さく。ただし<b>消さない</b> ――
       配った先で「この数字はどこから」と聞かれるのがこの1枚の宿命である */
    .graf .hint, .graf .note, .geppo-list {
        font-size: 8px; line-height: 1.4; margin: .5mm 0 0;
    }
    .geppo-list { padding-left: 1.1em; }
    /* 出どころの7項目は縦に長い。紙では2段に流して高さを半分にする ――
       消せば楽だが、配った先で「この数字はどこから」と聞かれるのがこの紙の宿命 */
    .geppo-deto .geppo-list { column-count: 2; column-gap: 6mm; }
    .geppo-deto .geppo-list li { break-inside: avoid; page-break-inside: avoid; }
    .geppo-zei { margin-top: .5mm; }
}

/* ============================================================
   升目(.dash-grid / .masu-*)——  ダッシュボードの3画面の骨組み

   2026-09-04 亀田さん:
     「部品ごとの配置が悪い。決まった定型サイズで1マス分、2マス分、
       縦横4マス分みたいな、きっちり収まるレイアウトにできると見やすい」

   それまでは画面ごとに repeat(auto-fit, minmax(240px〜420px, 1fr)) を
   書いていた。auto-fit は<b>画面幅で列の本数が勝手に変わる</b>ので、
   1280pxでは4列・1920pxでは6列…と、同じ画面が幅ごとに別の配置になり、
   端に「1マスぶんの部品＋1400pxの空白」が残ることがあった。

   考え方:
     ・横は<b>12列固定</b>。1マス = 3列(画面の1/4)。部品は
       1x1 / 2x1 / 2x2 / 3x1 / 3x2 / 4x1 / 4x2 のどれかに<b>必ず</b>収まる。
       幅が変わっても列の本数は変わらないので、配置は動かない。
     ・縦は 1マス = --masu-h。中身が越えたら<b>行のほうが伸びる</b>
       (伸びても列は動かないので、隣どうしの頭とお尻はそろったまま)。
     ・図の高さは升から --naka-h で受け取る。<b>グラフごとに px を書かない。</b>

   <b>この節はファイルの最後に置く。</b>.kpi-ban / .graf-ban / .home /
   .geppo-dan が先に自前の grid-template-columns を持っていて、同じ強さの
   規則は後に書いたほうが勝つため。月報の印刷(A4 1枚)の打ち消しも、
   月報の @media print より後に来る必要があるので、ここに置いてある。
   ============================================================ */

.dash-grid {
    --masu-h: 172px;                       /* 1マスの高さ */
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--masu-h), auto);
    gap: 14px;
    margin: 0 0 16px;
    align-items: stretch;                  /* 同じ行の部品は高さをそろえる */
}

/* 幅(1マス=3列) */
.masu-1x1, .masu-1x2           { grid-column: span 3; }
.masu-2x1, .masu-2x2           { grid-column: span 6; }
.masu-3x1, .masu-3x2           { grid-column: span 9; }
.masu-4, .masu-4x1, .masu-4x2  { grid-column: 1 / -1; }

/* 高さ(1マス / 2マス)と、その中に入る図の高さ */
.masu-1x1, .masu-2x1, .masu-3x1, .masu-4x1 { grid-row: span 1; --naka-h: 84px; }
.masu-1x2, .masu-2x2, .masu-3x2, .masu-4x2 { grid-row: span 2; --naka-h: 212px; }
/* .masu-4 は「幅は4マス・高さは中身なり」。図の高さだけは2マス相当にする */
.masu-4 { --naka-h: 212px; }

/* ---- 升に入った部品の器 ----
   .graf(グラフの区画) / .kpi(でっかい数字) / .home-card(状態の札) /
   .card は、もともと別々に余白と枠を持っていた。升に入れるときだけ、
   同じ器として振る舞わせる(枠と角丸は各自のまま。<b>色は変えない</b>) */
.dash-grid > .graf,
.dash-grid > .kpi,
.dash-grid > .home-card,
.dash-grid > .card {
    margin: 0; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    padding: 12px 15px 13px;
}
/* 中身のいちばん下の説明が、升の底に貼り付かないように */
.dash-grid > * > :last-child { margin-bottom: 0; }

/* 升の見出しは1つの様式にそろえる。
   .graf は下線つき・.kpi と .home-card は下線なしで、同じ役割の見出しが
   3種類の顔をしていた */
.dash-grid > * > h2 {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 1px 7px;
    margin: 0 0 9px; padding: 0 0 6px;
    border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
    line-height: 1.5;
}
.dash-grid > * > h2 small {
    margin: 0; font-weight: 400; font-size: 11px; color: var(--ink-3);
}

/* 升が順に立ち上がる。合計240msを超えない(業務の速さを損なわない) */
.dash-grid > * { animation: masuIn 240ms cubic-bezier(.2,.7,.3,1) backwards; }
.dash-grid > :nth-child(2)   { animation-delay: 45ms; }
.dash-grid > :nth-child(3)   { animation-delay: 90ms; }
.dash-grid > :nth-child(n+4) { animation-delay: 130ms; }
@keyframes masuIn { from { opacity: 0; transform: translateY(7px); } }

/* ---- 升の中の図は、升の高さに追随する ----
   棒の溝は 190px の決め打ちだった。1マスの升でも2マスの升でも同じ高さで、
   升に対して図が大きすぎたり、下が空いたりしていた */
.dash-grid .bou-mizo { height: var(--naka-h); }
.dash-grid .bou-graf { padding-top: 4px; }
/* 6ヶ月・曜日の棒は、升が狭いと札が折り返す。折り返す前に字を詰める */
@media (max-width: 1500px) {
    .dash-grid .bou-suji { font-size: 11px; }
    .dash-grid .bou-fuda { font-size: 11px; }
}

/* 円グラフは<b>縦に積まない</b>。2マス幅の升では、輪を左・凡例を右に置くと
   升の高さ(2マス)にちょうど収まる。積むと輪だけで升が埋まってしまう */
.en-yoko { display: flex; align-items: flex-start; gap: 18px; }
.en-yoko > .en-ban { flex: none; width: clamp(150px, 40%, 260px); margin: 0; }
/* 凡例は「名前 … 割合 値」の3つ組。器の幅ぶん引き伸ばすと
   名前と数字が離れて、どの行のものか目で追えなくなる */
.en-yoko > .en-hanrei { flex: 1; min-width: 0; max-width: 560px; }
@media (max-width: 799px) {
    .en-yoko { display: block; }
    .en-yoko > .en-ban { width: 100%; max-width: 220px; margin: 0 auto 8px; }
}

/* 説明の1行が長くなりすぎないようにする。器を広げたぶん、
   何も言わないと1行が1800pxになって目が戻れなくなる。
   <b>紙では効かせない</b>(月報のA4 1枚は行数で決まっている) */
.graf > .hint, .graf > .note, .dash-grid > * > .hint { max-width: 104ch; }

/* ---- 狭い画面 ---- */
/* 1200px を割ったら6列にする。1マスは画面の半分、2マス以上は全幅。
   <b>マスの意味は変えない</b>(1マスは1マスのまま、器のほうが狭くなる) */
@media (max-width: 1199px) {
    .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .masu-2x1, .masu-2x2, .masu-3x1, .masu-3x2 { grid-column: span 6; }
}
/* 800px を割ったら1列。高さの決め打ちもやめる(縦に積むので要らない) */
@media (max-width: 799px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .dash-grid > * { grid-column: 1 / -1; grid-row: auto; }
}

/* ---- 全店の今(/Zenten) ---- */
/* 「POSが届いていない店」は、店が並ぶ日だけ全幅にしていた(.is-wide)。
   升目では2マス(=画面の半分)あれば店名は折り返さないので、
   全幅にはしない —— 行の途中に2マスぶんの穴が空くため */
.dash-grid > .home-card.is-wide { grid-column: span 6; }

/* 日報の提出マップ。5列しかない表を1900pxまで引き伸ばすと、
   店名とマスが画面の端どうしに離れる。<b>中身の量に合った幅</b>で止める
   (2列の表を絞ってあるのと同じ考え。行数は1行も減らしていない) */
.zenten-hyo { max-width: 1040px; }

/* ---- 月報(/Geppo) ---- */
/* 売上の表。分類の列だけが余った幅をぜんぶ吸って、名前と数字が
   離れていた。値の列に幅を配る。<b>字が入らない列はこれより縮まない</b>
   (table-layout は auto のままなので、指定は「希望」として効く) */
.geppo-hyo > thead > tr > th.r { width: 12.5%; }

/* 取引区分の比率。掛が9割を占めるので、積んだ帯の中では現金の2区分が
   糸のように細くなって<b>読めない</b>(2026-09-04 亀田さん)。
   帯は「全体のかたち」だけを見せ、区分ごとの比は<b>行ごとの棒</b>で出す。
   ラベルと数字は棒の外に立ててあるので、0.1%の区分でも必ず読める */
.obi-graf { height: 22px; }
.obi-kire {
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.obi-hanrei li { gap: 9px; padding: 4px 0; }
.obi-hanrei .en-iro  { order: 1; }
.obi-hanrei .en-mei  { order: 2; flex: none; min-width: 6.5em; }
.obi-hanrei .en-bar  { order: 3; flex: 1 1 60px; min-width: 46px; align-self: center; }
.obi-hanrei .en-wari { order: 4; margin-left: 0; min-width: 4.4em; text-align: right; }
.obi-hanrei .en-atai { order: 5; }
.en-bar {
    position: relative; height: 8px; border-radius: 999px;
    background: var(--surface-3); overflow: hidden;
}
.en-bar::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--w); min-width: 2px; border-radius: inherit;
    background: var(--iro);
    animation: obiHirogaru 620ms cubic-bezier(.2,.7,.3,1) backwards;
}

/* ---- 紙 ---- */
@media print {
    /* 月報のA4 1枚は<b>紙のための組み</b>。画面の升目は持ち込まない。
       2列2段(.geppo-dan)に戻し、マスの指定を全部打ち消す */
    .geppo-dan.dash-grid {
        grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 3mm 5mm; margin: 0;
    }
    .geppo-dan.dash-grid > * {
        grid-column: auto !important; grid-row: auto !important;
        animation: none !important; padding: 0;
    }
    .dash-grid { grid-auto-rows: auto; gap: 3mm 5mm; }
    .dash-grid > * { animation: none !important; }
    /* この節はファイルの最後にあるので、上の @media print の指定より<b>後</b>に来る。
       同じ強さなら後が勝つので、紙のために決めてある寸法をここで書き直しておく
       —— 書き忘れると、画面用の余白と字の大きさが紙に出て1枚に収まらなくなる */
    .dash-grid > * > h2 { margin: 0 0 1mm; padding-bottom: .5mm; font-size: 10.5px; }
    .dash-grid > * > h2 small { font-size: 8.5px; }
    .graf > .hint, .graf > .note, .dash-grid > * > .hint { max-width: none; }
    .obi-graf { height: 12px; margin: .5mm 0 1mm; }
    .obi-kire { font-size: 8px; }
    .obi-hanrei li { padding: 0; gap: 6px; }
    /* 紙では棒の1本ぶんの幅が足りない。比は右の数字で読める */
    .obi-hanrei .en-bar { display: none; }
}

/* ============================================================
   売上日報照会(/Nippou)—— 「POSの中の現金」と「POSの外の現金」の2区画

   2026-09-04 亀田さん:
     「画面のレイアウトが見づらい。もともとのEDIを引き継いでるからね」

   直す前は、小さい表が縦に10段だらだら積んであった ――
   現金管理 → 保有場所 → SS現金売上 → 入金 → SS入金額 → 雑収入 →
   出金 → 締め → コメント。旧EDIの画面をそのまま1枚に写した形で、
   <b>どこまでがPOSの話で、どこからが日報の話か</b>が読み取れなかった。
   数字はぜんぶ出ているのに、意味の切れ目が画面に無かった。

   考え方:
     ・画面を<b>2区画</b>に割る。区画は帯つきの見出しと、地色の違う器で分ける。
         上=【POSの中の現金】サイトレポート(日次精算)。POSが管理している現金
         下=【POSの外の現金】日報(人が入力)。POSの外で動く現金
     ・区画の中は升目(.dash-grid)に載せる。他のダッシュボードと同じ12列。
       ただし<b>高さは中身なり</b>にする ―― 明細の行数が日によって0〜数十行
       動くので、2マス固定にすると「空の箱」か「はみ出し」のどちらかになる。
       .masu-*x1 は<b>幅の指定としてだけ</b>使う。
     ・双子の表(雑収入・出金)は<b>横に並べる</b>。縦に積むと、
       どちらを見ているのか見出しまで目を戻すことになる。

   <b>行は1行も減らしていない。</b>減らしたのは縦に積んだ段の数で、
   10段 → 上1段・下3段になった。
   ============================================================ */

/* ---- 区画の器 ---- */
.nippou-ku {
    margin: 0 0 16px; padding: 12px 15px 15px;
    border: 1px solid var(--line); border-radius: 10px;
}
/* 上は紺寄り(POSが持っている数字)、下は無彩色寄り(人が入れた数字)。
   同じ地色で並べると、2区画に割った意味が目に届かない。
   濃さは<b>器の地だけ</b>で付ける ―― 中身の表は白のまま、
   字と数字の読みやすさは1ミリも落とさない */
.nippou-ku.ku-pos {
    background: linear-gradient(180deg, var(--brand-bg), var(--skin-raised, #f7fafe) 60%, var(--surface-2));
}
.nippou-ku.ku-nippou {
    background: linear-gradient(180deg, var(--skin-raised, #eceef3), var(--skin-surface, #f6f7f9) 60%, var(--skin-surface, #f7f8fa));
    border-color: var(--skin-edge, #dcdfe6);
}
.nippou-ku.ku-nippou > h2 { border-bottom-color: var(--skin-edge, #cfd4de); }
/* 人が入れた数字のほう。札まで紺にすると、上下どちらの区画か目印にならない */
.nippou-ku.ku-nippou > h2 .tag { background: var(--surface-3); color: var(--ink-2); }
.nippou-ku.ku-nippou > h2::before {
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
}

.nippou-ku > h2 {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px;
    position: relative;
    margin: 0 0 12px; padding: 0 0 8px 12px;
    border-bottom: 1px solid var(--line-2);
    font-size: 14.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink);
    line-height: 1.5;
}
.nippou-ku > h2::before {
    content: ""; position: absolute; left: 0; top: 3px; bottom: 11px;
    width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-3), var(--brand));
}
/* 見出しの脇の一文。<b>残りの幅をぜんぶ取って折り返す</b> ――
   何も言わないと見出しの後ろにぶら下がって、2区画の名前が読めなくなる */
.nippou-ku > h2 small {
    flex: 1 1 24em; min-width: 0; max-width: 88ch;
    font-size: 11.5px; font-weight: 400; color: var(--ink-2); line-height: 1.6;
}
.nippou-ku > h2 .tag { margin-left: 0; }
/* 区画の下に置く出どころ・断りの文。1行が器いっぱいに伸びると目が戻れない */
.nippou-ku > .hint, .nippou-ku > .note { max-width: 104ch; margin: 10px 0 0; }
.nippou-ku > .nodata { margin: 0; }
.body > .nippou-ku { animation: liftIn 220ms cubic-bezier(.2,.7,.3,1) backwards; }

/* ---- 区画の中の升目 ---- */
.dash-grid.nippou-dan {
    grid-auto-rows: auto;      /* 高さは中身なり(行数が日によって動くので) */
    align-items: start;        /* そろえない。そろえると短い表が空箱になる */
    gap: 12px; margin: 0;
}
.dash-grid.nippou-dan > * { grid-row: auto; margin: 0; min-width: 0; }
.dash-grid.nippou-dan > .scroll-x { margin-bottom: 0; }

/* 升に入れた2列の表は、升の幅いっぱいに使う。
   ふだんの2列の .meisai / .shimari は inline-table で 400〜460px に絞ってあるが、
   ここでは<b>升のほうがもう「中身の量に合った幅」を決めている</b>
   (1マス = 画面の1/4)。絞りが二重に効くと、器の中でだけ表が左に寄る */
.nippou-ku .scroll-x > table.meisai,
.nippou-ku .scroll-x > table.shimari,
.nippou-ku .card > table.meisai {
    display: table; width: 100%; max-width: none; min-width: 0; margin: 0;
}
.dash-grid.nippou-dan > .uri { display: flex; }
.dash-grid.nippou-dan > .comment { max-width: none; }
/* 升の中の説明文。段落の間だけ空ける(見出しのすぐ下に余分な空きを作らない) */
.nippou-ku .card > .hint { margin: 0 0 7px; }

/* 締めの数字にも上ぶたを付ける。【入金】【雑収入】と同じ顔にそろえないと、
   ここだけ見出しの無い表が浮く(.meisai > caption と同じ組み) */
.shimari > caption {
    caption-side: top; text-align: left;
    padding: 7px 12px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--brand);
    background: linear-gradient(180deg, var(--brand-bg2), var(--brand-bg));
    border: 1px solid var(--line); border-bottom: 0;
    border-left: 3px solid var(--brand-2);
    border-radius: var(--r) var(--r) 0 0;
}
.shimari:has(> caption) { border-top-left-radius: 0; border-top-right-radius: 0; }

/* 差額が0でない日は、<b>器ごと色を持つ</b>。
   細い字1行の色替えでは、締めの3行の中に埋もれて気づかれない
   (赤は使わない ―― 入力の誤りではなく、業務上そろえるべき差なので。
    /Zenten の提出マスと同じ決め) */
.nippou-ku .scroll-x:has(> .shimari.is-warn) { border-color: var(--skin-warn-edge, #e8d3a8); }
.shimari.is-warn { border-color: var(--skin-warn-edge, #e8d3a8); }
.shimari.is-warn > caption {
    color: var(--warn); background: var(--warn-bg);
    border-color: var(--skin-warn-edge, #e8d3a8); border-left-color: var(--warn);
}
.shimari.is-warn tr:last-child th,
.shimari.is-warn tr:last-child td { background: var(--warn-bg); color: var(--warn); }

/* 備考は自由入力。td の既定(nowrap)のままだと、長い1件で明細表が
   升からはみ出して横スクロールになる。折り返して受ける(字は削らない) */
td.nippou-biko {
    white-space: normal; max-width: 22em; overflow-wrap: anywhere; line-height: 1.5;
}

/* ---- 紙 ---- */
@media print {
    .nippou-ku { background: none; border: 0; padding: 0; margin: 0 0 4mm; }
    .nippou-ku > h2 { font-size: 11px; margin: 0 0 2mm; padding-bottom: 1mm; }
    .nippou-ku > h2 small { font-size: 8.5px; }
    .dash-grid.nippou-dan { gap: 3mm 4mm; }
    .nippou-ku > .hint, .nippou-ku > .note { max-width: none; }
}

/* ============================================================
   レジ入金(/Regi)
   タブレットを指で押す前提。既定のボタン(32px)・入力欄では小さすぎるので、
   この画面の中だけ 48px 以上に上げる。<b>ここより上の定義は変えない</b>
   (後勝ちで、この画面にだけ効かせる)
   ============================================================ */
.regi-form > .regi-dan { margin-bottom: 12px; }
.regi-form > .regi-dan:last-child { margin-bottom: 0; }

/* 押せるものは指の幅で。高さ48pxは触りやすさの下限(Appleの44pt/Googleの48dpに合わせた)。
   <b>inline-flexで中央寄せ</b>にする ―― <a>(別のお客様・領収書を印刷)は素だと
   インラインで、heightだけ与えると文字が上に張り付く(2026-09-05 亀田さん指摘の文字ズレ) */
.regi-ookii {
    height: 48px; padding: 0 18px; font-size: 14px; border-radius: var(--r-s);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ① いくら ―― 数字は離れていても読める大きさで出す */
.regi-kin-hako { display: flex; align-items: center; gap: 10px; }
.regi-kin {
    flex: 1; min-width: 0; height: 68px; padding: 0 16px;
    font-size: 40px; font-weight: 700; text-align: right;
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.regi-kin:focus { background: var(--skin-warn-surface, #fffdf5); }
.regi-en { font-size: 20px; font-weight: 700; color: var(--ink-2); }
.regi-tasu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ② なにを ―― 区分は札(タイル)で選ぶ。selectは指では開きにくい */
.regi-midashi {
    margin: 14px 0 6px; font-size: 11px; font-weight: 700;
    color: var(--ink-2); letter-spacing: .04em;
}
.regi-dan > .regi-midashi:first-of-type { margin-top: 0; }
.regi-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.regi-tile {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 15px;
    border: 1px solid var(--line-2); border-radius: var(--r-s);
    background: var(--surface); color: var(--ink);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.regi-tile:hover { background: var(--brand-bg); border-color: var(--brand-3); }
.regi-tile.on {
    background: var(--brand-bg); border-color: var(--brand-2); color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand-2);
}

.regi-nyuryoku { height: 48px; font-size: 15px; }
.regi-toku { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* コード欄は狭く、名前が主役(2026-09-05 亀田さん指摘「バランスおかしい」)。
   探す欄は番号7桁+名前検索が打てれば足り、確かめたいのは「誰に切るか」のほう */
.regi-toku > .regi-toku-cd { flex: 0 1 13em; min-width: 11em; }
.regi-toku > .regi-toku-nm {
    flex: 1 1 auto; min-width: 0;
    font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink);
    padding: 6px 14px; border-radius: var(--r-s);
    background: var(--brand-bg); border: 1px solid var(--brand-3);
}
/* まだ選んでいないときは札を出さない(空の枠だけ残ると壊れて見える) */
.regi-toku > .regi-toku-nm:empty { display: none; }

/* よく使うお客様。名前が長い相手が多いので、札の幅は詰めて字を省く */
.regi-yoku { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
/* 長い顧客名は<b>省略せず折り返す</b>(2026-09-05)。「…」で切ると
   「札幌市障害者等自動車燃料助成券」と似た長い名前が見分けられず、
   レジでいちばん怖い押し間違いの元になる。高さは伸びてよい(48px以上を保つ) */
.regi-yoku-botan {
    max-width: 19em; display: inline-block;
    white-space: normal; overflow-wrap: anywhere; text-align: left;
    line-height: 1.35; height: auto; min-height: 48px; padding-top: 7px; padding-bottom: 7px;
}

/* ③ 登録 ―― この画面でいちばん大きいものが「登録」であること */
.regi-toroku {
    width: 100%; height: 64px; font-size: 19px; font-weight: 700; letter-spacing: .04em;
}

/* 登録した直後。伝票番号と金額を大きく出し、領収書を最前面に置く */
.regi-kekka {
    margin: 0 0 14px; padding: 15px 17px;
    background: var(--ok-bg); border: 1px solid var(--skin-ok-edge, #cfe7da);
    border-left: 3px solid var(--ok); border-radius: var(--r);
}
.regi-kekka-atama {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.regi-denno { font-size: 26px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.regi-gaku  { font-size: 30px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.regi-aite  { font-size: 15px; color: var(--ink-2); }
.regi-botan { display: flex; flex-wrap: wrap; gap: 10px; }
.regi-botan > .btn { padding: 0 26px; font-size: 15px; }

.regi-kirikae { margin-top: 12px; }

/* 画面が狭いとき(タブレット縦・スマホ)は、押すものを縦に積んで幅いっぱいにする */
@media (max-width: 640px) {
    .regi-kin { font-size: 34px; height: 60px; }
    .regi-tasu > .regi-ookii { flex: 1 1 30%; }
    .regi-botan > * { flex: 1 1 100%; }
    .regi-yoku-botan { max-width: 100%; flex: 1 1 100%; }
}


/* ============================================================
   ホーム(/Index)の器 —— 2段の規律

   <b>この節はファイルの最後に置く。</b>.home が先に自前の
   grid-template-columns / 余白を持っていて、同じ強さの規則は
   後に書いたほうが勝つため(.dash-grid の節と同じ理由)。

   考え方:
     ・ホームは<b>2段</b>。1段目=今日の手当て(全幅の帯 .todoki)、
       2段目=見ておく数字(等幅の札 .home-card)。
       段の意味が違うので器の形も違う。<b>同じ段の中は必ず同じ形</b>。
     ・帯の中は<b>3本の柱</b>。数(かなめ)/ 相手の名前 / 前日の進み。
       縦に積むのをやめたのは、積むと説明の文が数字と同じ強さで並び、
       文のほうが場所を取るため(文6行 : 数字1つ だった)。
     ・札は骨格をそろえる。見出し / 数 / 一行の補足 / 内訳最大3行 / 底のリンク。
       骨格がそろえば中身の量が違っても高さがそろい、はみ出しも起きない。
     ・<b>手当てのいるものだけ左に線を引く</b>。全部が同じ強さなら、どれも読まれない。
   ============================================================ */

/* ---------- 1段目:今日の手当て(日報の届き具合) ---------- */

.todoki {
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
    margin: 0 0 14px; padding: 0;
    animation: todokiIn 220ms cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes todokiIn { from { opacity: 0; transform: translateY(7px); } }

/* 手当てのいる日。<b>帯ぜんぶを黄色く塗らない</b> ——
   全幅が色付くと、その下の札まで警告に見える。
   左の線と、かなめの柱だけを色づける */
.todoki.is-te { border-color: var(--skin-warn-edge, #e8d3a8); box-shadow: inset 3px 0 0 var(--warn); }

/* 見出しの行。左に名前、右に行き先。<b>行き先は必ずここ</b>(札は底、帯は頭)。
   帯は横長なので、底に置くと左端の数字から遠くなって見つからない */
.todoki-atama {
    display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap;
    padding: 11px 18px 9px; border-bottom: 1px solid var(--line);
}
.todoki-atama h2 {
    margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--ink-2); line-height: 1.5;
}
.todoki-atama h2 small { margin-left: 6px; font-weight: 400; font-size: 11px; color: var(--ink-3); }
.todoki-go { margin-left: auto; font-size: 12px; font-weight: 600; }

/* 柱。境は縦の細い線だけ(枠を増やすと箱の中に箱ができて、規律が消える) */
.todoki-hon { display: flex; flex-wrap: wrap; align-items: stretch; }
.todoki-hashira { padding: 13px 18px 14px; min-width: 0; }
.todoki-hashira + .todoki-hashira { border-left: 1px solid var(--line); }

/* 柱1:かなめ。この画面でいちばん大きい字はここ1箇所だけにする */
.todoki-kaname { flex: 0 0 auto; width: 224px; }
.todoki-suji {
    margin: 0; font-size: 42px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink);
}
.todoki-suji small { margin-left: 3px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.todoki-mi { margin: 5px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.todoki-cho { margin: 7px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--ink-2); }
.todoki-cho .badge { margin-right: 5px; }

.todoki.is-te .todoki-kaname { background: var(--warn-bg); }
.todoki.is-te .todoki-suji { color: var(--warn); }
/* 静かな日の 0 は黒くしない。「見るところが無い」は色でも言う */
.todoki.is-sizuka .todoki-suji { color: var(--ink-3); }
.todoki.is-fumei .todoki-suji { color: var(--ink-3); }

/* 柱2:相手の名前。この帯で唯一「使う」部分なので、いちばん広く取る */
.todoki-namae { flex: 1 1 320px; }
.todoki-namae .home-list { margin: 0; }
.todoki-namae .home-list li:first-child { border-top: 0; padding-top: 0; }

/* 柱3:前日の進み。見るだけ。数は柱1より一段小さくする(主役はひとつ) */
.todoki-shinchoku { flex: 0 1 430px; min-width: 268px; }
.todoki-wari {
    margin: 0; font-size: 25px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.todoki-bo { color: var(--ink-3); font-size: 18px; font-weight: 600; }
.todoki-wari small { margin-left: 3px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.todoki-shinchoku .mise-dots { margin-top: 9px; }

/* 柱の小見出し。柱の名前が無いと、数字だけが3つ並んで見える */
.todoki-fuda {
    margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    color: var(--ink-3);
}
.todoki-fuda .muted { font-weight: 400; letter-spacing: 0; }

/* 点の読み方。文にすると3行になるので、色見本1行で済ませる */
.todoki-hanrei {
    display: flex; align-items: center; flex-wrap: wrap; gap: 3px 12px;
    margin: 9px 0 0; font-size: 11px; color: var(--ink-3);
}
/* 色見本と語は1組ずつ包む。包まないと flex の隙間が語と見本のあいだにも
   入って、どの色がどの語の説明なのか読めなくなる */
.todoki-hanrei > span { display: inline-flex; align-items: center; }
.todoki-hanrei .mise-dot { margin-right: 4px; flex: none; animation: none; }

/* 続き(6店目から)。開くまでは1行 */
.todoki-motto { margin: 8px 0 0; font-size: 11.5px; }
.todoki-motto > summary { cursor: pointer; color: var(--brand-2); font-weight: 600; }
.todoki-motto[open] > summary { margin-bottom: 4px; }

/* 断り書き。<b>捨てずに畳む。</b>毎日読むものではないが、必要な日には全部ある */
.todoki-hosoku { border-top: 1px solid var(--line); font-size: 11.5px; }
.todoki-hosoku > summary {
    padding: 8px 18px; cursor: pointer; color: var(--ink-3);
    list-style-position: inside;
}
.todoki-hosoku > summary:hover { color: var(--brand-2); }
.todoki-hosoku-naka { padding: 0 18px 12px; }
.todoki-hosoku-naka p { margin: 0 0 6px; line-height: 1.7; color: var(--ink-2); }
.todoki-hosoku-naka p:last-child { margin-bottom: 0; }

/* 柱が縦に積まれる幅では、境の線も縦から横に変える */
@media (max-width: 1099px) {
    .todoki-shinchoku { flex: 1 1 100%; }
}
@media (max-width: 819px) {
    .todoki-hon { display: block; }
    .todoki-kaname { width: auto; }
    .todoki-hashira + .todoki-hashira { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- 2段目:見ておく数字 ---------- */

/* 札の高さの下限をそろえる。中身が越えたら<b>行のほうが伸びる</b>
   (伸びても同じ行の札は同時に伸びるので、頭とお尻はそろったまま。
   .dash-grid の升と同じ考え方)。

   <b>:not(.dash-grid) で外している</b>のは、/Zenten が同じ .home を
   .dash-grid と一緒に使っていて、あちらは升の規則(--masu-h・狭い画面での
   打ち消し)を持っているため。ホームの都合であちらの規則を上書きしない */
.home:not(.dash-grid) { grid-auto-rows: minmax(172px, auto); align-items: stretch; }
.home-card { min-width: 0; }

/* 見出しは .dash-grid の升に入れたときと同じ姿にする。
   同じ役割の見出しが、置き場所によって2種類の顔をしていた */
.home-card > h2 {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 1px 7px;
    margin: 0 0 9px; padding: 0 0 6px; border-bottom: 1px solid var(--line);
}
.home-card > h2 small { margin: 0; font-weight: 400; font-size: 11px; color: var(--ink-3); }

/* 手当てのいる札だけ左に線。地色(--warn-bg)だけだと、
   隣に並んだときの差が弱くて<b>目が止まらない</b> */
.home-card.is-warn { box-shadow: inset 3px 0 0 var(--warn); }

/* 内訳の続き。札は入口であって一覧ではないので、3行で止めて残りは数だけ言う */
.home-hoka { color: var(--ink-3); }
.home-hoka > span:first-child { color: var(--ink-3); }

/* 数字に付ける註。文が数字より場所を取らないよう、いちばん小さい字にする */
.home-chu { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: var(--ink-3); }

/* 札が順に立ち上がる。合計240msを超えない(業務の速さを損なわない) */
.home:not(.dash-grid) > .home-card { animation: masuIn 240ms cubic-bezier(.2,.7,.3,1) backwards; }
.home:not(.dash-grid) > :nth-child(2)   { animation-delay: 45ms; }
.home:not(.dash-grid) > :nth-child(3)   { animation-delay: 90ms; }
.home:not(.dash-grid) > :nth-child(n+4) { animation-delay: 130ms; }

@media (prefers-reduced-motion: reduce) {
    .todoki, .home > .home-card { animation: none; }
}

/* ---------- チェック・ラジオの札(置き場所によらず1回だけ決める) ---------- */
/* これまで .joken / .atsukai / .ss-erabi-hako の<b>中にだけ</b>書いてあった。
   そのため新しく作った欄(/SsGraph の「見方」)には何も当たらず、
   丸に対して文字が上に寄った(2026-09-07 指摘)。
   欄を増やすたびに書き足す形をやめ、ここで基準を決める。
   細かい見た目(色・大きさ・枠)は、これまでどおり置き場所ごとの規則が上書きする */
label.radio, label.check {
    display: inline-flex;
    align-items: center;      /* ← 文字と丸を縦中央でそろえる */
    gap: 5px;
    line-height: 1.25;
}
label.radio > input, label.check > input { margin: 0; flex: none; }

/* ---------- 締めの進み具合(/ShimeShinchoku)で足りなかった1色 ---------- */
/* .mise-dot は「届いた(kita)/まだ(machi)/遅い(osoi)」の3色しかなく、
   締めの60本には<b>落ちた</b>を表す色が要る。
   .osoi(黄)を流用すると「終了の記録が無い(落ちたとは限らない)」と
   区別が付かなくなる —— 判定基準が2段あるのに色が1つでは、画面が嘘をつく。
   画面ごとの新しい規則にしないため、ここ(.mise-dot の仲間)に置く */
.mise-dot.koketa { background: var(--ng-bg); border-color: var(--ng); }

/* ---------- 目で見えない読み上げ用の文字(.sr) ---------- */
/* ジャーナル傾向(/JournalDash)のます目は、色の濃さで差の大きさを、
   赤と青で不足と超過を表している。<b>色だけで意味を伝えると、
   色の見分けがつかない人には空のます目と同じに見える。</b>
   title 属性は読み上げに乗るとは限らないので、
   ます目の中に「不足」「超過」の文字を置き、目には見せない形にする。
   画面ごとの規則にしないため、ここに置く(他の画面でも同じ用が出る) */
.sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%);
}

/* ---------- ジャーナル傾向のます目 ---------- */
/* 90日ぶんを横に並べるので、1ますを詰める。
   詰めても押せる大きさは要らない —— 押す操作が無く、hover で説明が出るだけ */
.journal-masu td { padding: 2px 0; min-width: 9px; }
.journal-masu th.kotei { white-space: nowrap; }

/* ます目そのものを押せるようにする。<a> を升いっぱいに広げないと、
   9px の升の中の1点しか押せず「押せない表」になる */
.journal-masu td a.masu-link { display: block; width: 100%; height: 100%; min-height: 14px; }

/* ---------- 締めレポート: 「合いました」を目立たせる ---------- */
/* 銀行の窓口では勘定が合うと拍子木を鳴らして全員が拍手して帰った、という話から。
   <b>締めは「合った」が言えて初めて終わる。</b>
   合ったことを他の注意書きと同じ見た目にすると、終わったことが伝わらない */
.ok-box {
    border-left: 4px solid var(--ok, #2e7d32);
    background: color-mix(in srgb, var(--ok, #2e7d32) 8%, transparent);
    padding: 10px 12px;
    border-radius: 6px;
}
/* 視点のタブ。選んでいるものをはっきりさせる */
.joken > a.btn-sub.on { background: var(--brand); color: #fff; font-weight: 700; }

/* 配色の切り替え。印刷ではこのブロックが適用されず、元の値/fallbackを使う。 */
@media screen {
    :root { color-scheme: light; }
    :root[data-theme="dark"] {
        color-scheme: dark;
        --bg: #101722;
        --surface: #182231;
        --surface-2: #202e40;
        --surface-3: #2a3b50;
        --line: #334359;
        --line-2: #51637b;
        --ink: #edf3fc;
        --ink-2: #bfcee2;
        --ink-3: #a1b2ca;
        --brand: #8fc0ff;
        --brand-2: #a2cdff;
        --brand-3: #77b0f5;
        --brand-ink: #102238;
        --brand-bg: #233c59;
        --brand-bg2: #1d3048;
        --ok: #8ae0b1;
        --ok-bg: #173c2d;
        --warn: #ffd17c;
        --warn-bg: #42331c;
        --ng: #ffaaa5;
        --ng-bg: #462829;
        --sh: 0 1px 3px rgba(0,0,0,.25);
        --sh-2: 0 8px 24px rgba(0,0,0,.4);
        --skin-surface: var(--surface);
        --skin-raised: var(--surface-2);
        --skin-edge: var(--line-2);
        --skin-ink: var(--ink);
        --skin-ink-2: var(--ink-2);
        --skin-muted: var(--ink-3);
        --skin-blue: #a2cdff;
        --skin-red: #ffaaa5;
        --skin-amber: #ffd17c;
        --skin-selection: #355d88;
        --skin-error-edge: #8b5357;
        --skin-ok-edge: #42775e;
        --skin-warn-edge: #876b3c;
        --skin-warn-surface: #42331c;
        --skin-action-top: #acd2ff;
        --skin-action-edge: #50779f;
        --skin-bar-top: rgba(24,34,49,.97);
        --skin-bar-bottom: rgba(32,46,64,.97);
        --skin-overlay: rgba(16,23,34,.65);
    }

    /* 既存C#が返す色名はそのまま。状態の赤/緑/橙/青を明るくする。 */
    :root[data-theme="dark"] [style*="color:red" i] { color: var(--ng) !important; }
    :root[data-theme="dark"] [style*="color:green" i] { color: var(--ok) !important; }
    :root[data-theme="dark"] [style*="color:orange" i] { color: var(--warn) !important; }
    :root[data-theme="dark"] [style*="color:blue" i] { color: var(--skin-blue) !important; }
    :root[data-theme="dark"] [style*="color:black" i] { color: var(--ink) !important; }
    :root[data-theme="dark"] .step-accent,
    :root[data-theme="dark"] .fnkey.primary kbd,
    :root[data-theme="dark"] .fnkey.primary:hover,
    :root[data-theme="dark"] .joken > a.btn-sub.on { color: var(--brand-ink); }
    /* グラフの分類色は保ち、明るい棒の上でも数字を読めるようにする。 */
    :root[data-theme="dark"] .tsumi-koma span {
        background: rgba(16,23,34,.85); border-radius: 3px;
    }

    /* 斜線と黄/赤を維持し、検証と本番を見分ける。 */
    :root[data-theme="dark"] .sandbox-obi {
        color: #ffe1a6; border-color: #d99b00;
        background: repeating-linear-gradient(135deg, #493819 0 14px, #584320 14px 28px);
    }
    :root[data-theme="dark"] .sandbox-obi b { background: #ffd17c; color: #30210c; }
    :root[data-theme="dark"] .sandbox-obi button { background: #302619; color: #ffe1a6; }
    :root[data-theme="dark"] .sandbox-obi button:hover { background: #584320; }
    :root[data-theme="dark"] .honban-obi {
        color: #ffd0ca; border-color: #8b5357;
        background: repeating-linear-gradient(135deg, #462829 0 14px, #543031 14px 28px);
    }
    :root[data-theme="dark"] .honban-obi b:first-child { background: #ffaaa5; color: #3a1919; }

    .theme-toggle {
        height: 28px; padding: 0 10px; gap: 7px;
        border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
        background: rgba(255,255,255,.08); color: #fff;
        font-size: 11.5px; box-shadow: none; flex-shrink: 0;
    }
    .theme-toggle[hidden] { display: none; }
    .theme-toggle:hover { background: rgba(255,255,255,.18); filter: none; }
    .theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .theme-state { padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.15); }
    .theme-toggle[aria-pressed="true"] .theme-state { background: #a2cdff; color: #102238; }
    /* ヘッダーを折り返しても、メニュー/表の貼り付く位置を維持する。 */
    @media (max-width: 900px) {
        :root { --head-h: 88px; }
        .header { flex-wrap: wrap; align-content: center; gap: 5px; padding: 6px 12px; }
        .corp { flex-basis: 100%; flex-wrap: wrap; gap: 5px 8px; font-size: 11px; }
        .corp .signout { padding: 2px 7px; font-size: 11px; }
    }
}
@media print {
    .theme-toggle { display: none !important; }
}

/* 和柄は画面だけ。状態色(--ok/--warn/--ng)と印刷の規則は上書きしない。
   明暗とは独立した装飾で、表・入力欄・確認の面には柄を置かない。 */
@media screen {
    :root[data-skin="seigaiha"],
    :root[data-skin="seigaiha"] body,
    :root[data-skin="seigaiha"] .header {
        --wagara-size: 80px 40px;
        --wagara-head-size: 80px 40px, 100% 100%;
        --wagara: radial-gradient(circle at 50% 100%,
            transparent 9px, var(--wagara-line) 9px 10px,
            transparent 10px 19px, var(--wagara-line) 19px 20px,
            transparent 20px 29px, var(--wagara-line) 29px 30px,
            transparent 30px 39px, var(--wagara-line) 39px 40px, transparent 40px);
        --wagara-head: #163e53;
        --wagara-head-top: #21566c;
    }
    :root[data-skin="shippo"],
    :root[data-skin="shippo"] body,
    :root[data-skin="shippo"] .header {
        --wagara-size: 48px 48px;
        --wagara-head-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, 100% 100%;
        --wagara: radial-gradient(circle at 0 50%, transparent 23px, var(--wagara-line) 23px 24px, transparent 24px),
            radial-gradient(circle at 100% 50%, transparent 23px, var(--wagara-line) 23px 24px, transparent 24px),
            radial-gradient(circle at 50% 0, transparent 23px, var(--wagara-line) 23px 24px, transparent 24px),
            radial-gradient(circle at 50% 100%, transparent 23px, var(--wagara-line) 23px 24px, transparent 24px);
        --wagara-head: #183f38;
        --wagara-head-top: #28584c;
    }
    :root[data-skin="ichimatsu"],
    :root[data-skin="ichimatsu"] body,
    :root[data-skin="ichimatsu"] .header {
        --wagara-size: 40px 40px;
        --wagara-head-size: 40px 40px, 100% 100%;
        --wagara: conic-gradient(var(--wagara-line) 25%, transparent 0 50%, var(--wagara-line) 0 75%, transparent 0);
        --wagara-head: #303c46;
        --wagara-head-top: #485562;
    }

    :root:is([data-skin="seigaiha"], [data-skin="shippo"], [data-skin="ichimatsu"]) {
        --wagara-line: rgba(46, 68, 82, .045);
    }
    :root[data-theme="dark"]:is([data-skin="seigaiha"], [data-skin="shippo"], [data-skin="ichimatsu"]) {
        --wagara-line: rgba(203, 221, 234, .035);
    }
    :root:is([data-skin="seigaiha"], [data-skin="shippo"], [data-skin="ichimatsu"]) body {
        background-image: var(--wagara);
        background-size: var(--wagara-size);
    }
    :root:is([data-skin="seigaiha"], [data-skin="shippo"], [data-skin="ichimatsu"]) .header {
        --wagara-line: rgba(255, 255, 255, .10);
        background-image: var(--wagara), linear-gradient(180deg, var(--wagara-head-top), var(--wagara-head));
        background-size: var(--wagara-head-size);
    }

    /* 明るい和紙の面。スキン専用の変数も合わせ、入力とボタンの色を統一する。 */
    :root[data-theme="light"]:is([data-skin="seigaiha"], [data-skin="shippo"], [data-skin="ichimatsu"]) {
        --bg: #f0eee7;
        --surface: #fffefa;
        --surface-2: #f7f5ef;
        --surface-3: #eae7de;
        --line: #e2dfd5;
        --line-2: #c9c7bd;
        --ink: #202e36;
        --ink-2: #526068;
        --ink-3: #68747a;
        --skin-surface: var(--surface);
        --skin-raised: var(--surface-2);
        --skin-edge: var(--line-2);
        --skin-muted: var(--ink-3);
        --skin-action-top: var(--brand-2);
    }
    :root[data-theme="light"][data-skin="seigaiha"] {
        --brand: #16475f; --brand-2: #215e7a; --brand-3: #477f96;
        --brand-bg: #e5eff2; --brand-bg2: #f1f6f7;
        --skin-selection: #d1e6ee;
    }
    :root[data-theme="light"][data-skin="shippo"] {
        --brand: #205448; --brand-2: #286956; --brand-3: #568674;
        --brand-bg: #e6efea; --brand-bg2: #f1f6f3;
        --skin-selection: #cde5d9;
    }
    :root[data-theme="light"][data-skin="ichimatsu"] {
        --brand: #354550; --brand-2: #475e6b; --brand-3: #6a808e;
        --brand-bg: #e7edef; --brand-bg2: #f2f5f6;
        --skin-selection: #d4e1e6;
    }
    /* 暗い面と状態色は既存ダークモードを使い、構造の色だけを柄に合わせる。 */
    :root[data-theme="dark"][data-skin="seigaiha"] {
        --brand: #93cde3; --brand-2: #aedced; --brand-3: #80b9ce;
        --brand-bg: #223e4d; --brand-bg2: #1d313e;
        --skin-action-top: #aedced;
    }
    :root[data-theme="dark"][data-skin="shippo"] {
        --brand: #99d5bd; --brand-2: #b1e3ce; --brand-3: #83bda5;
        --brand-bg: #243e36; --brand-bg2: #1d312c;
        --skin-action-top: #b1e3ce;
    }
    :root[data-theme="dark"][data-skin="ichimatsu"] {
        --brand: #bbcfdd; --brand-2: #d0e0ea; --brand-3: #9db7c8;
        --brand-bg: #303e4c; --brand-bg2: #24313e;
        --skin-action-top: #d0e0ea;
    }

    .skin-picker {
        display: inline-flex; align-items: center; gap: 6px;
        color: #fff; font-size: 11.5px; white-space: nowrap;
    }
    .skin-picker[hidden] { display: none; }
    .skin-picker select {
        width: auto; min-width: 116px; height: 28px; padding: 2px 7px;
        font-size: 11.5px; color: var(--ink); background: var(--surface);
        border: 1px solid var(--line-2); border-radius: 5px;
    }
    .skin-picker select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

    /* 右上の操作が増えても、固定ヘッダー内に収める。 */
    @media (min-width: 901px) and (max-width: 1199px) {
        .corp { gap: 7px; }
        .corp .signout { padding: 4px 7px; }
    }
    @media (max-width: 600px) {
        :root { --head-h: 120px; }
    }
}