/* 入校・売上管理 — 画面スタイル
 *
 * 事務所の PC で毎日使うので、装飾より「数字が読みやすいこと」を優先している。
 * 数字は等幅かつ tabular-nums で桁を揃える。
 */

:root {
  --bg: #f4f6f7;
  --panel: #ffffff;
  --border: #dfe5e9;
  --border-strong: #bcc8cf;
  --text: #17212a;
  --text-dim: #71808c;
  --accent: #e96d2f;
  --accent-soft: #fff1e9;
  --good: #24956a;
  --bad: #b02a37;
  /* 学校の色分け。グラフの色をそのまま薄くしたもの
   * （当校＝青／愛国＝ピンク／星ヶ浦＝ティール） */
  --mark-ours: rgba(26, 95, 180, .14);
  --mark-a: rgba(244, 114, 182, .20);
  --mark-h: rgba(45, 212, 191, .22);
  --warn: #9a6700;
  --warn-bg: #fff8e5;
  --row-alt: #fafbfc;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --panel-raised: #ffffff;
  --surface-subtle: #f7f9fa;
  --accent-strong: #d45b21;
  --accent-glow: rgba(233, 109, 47, .18);
  --on-accent: #ffffff;
  --focus-ring: rgba(233, 109, 47, .22);
  --navy: #132330;
  --navy-2: #1f3749;
  --navy-text: #f7fafb;
  --navy-muted: #aebdc6;
  --error-bg: #fdeaec;
  --dirty-bg: #fff6d9;
  --input-count: #4ade80;
  --input-amount: #38bdf8;
  --metric-yellow: #facc15;
  --metric-orange: #fb923c;
  --metric-violet: #a78bfa;
  --metric-neutral: #94a3b8;
  --hud-bg: #1c2330;
  --map-bg: #dfe8df;
  --map-school: #2563b0;
  --map-university: #e07020;
  --map-general: #3c9a4e;
  --map-total: #1c1c1c;
  --map-chip: #eef1f5;
  --map-chip-text: #1c2330;
  --map-chip-border: #8ea3b8;
  --map-overlay: rgba(255, 255, 255, .88);
  --shadow-raised: 0 12px 32px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-float: 0 18px 50px rgba(16, 24, 40, .16);
  /* 自動ログアウトの知らせの後ろに敷く幕 */
  --scrim: rgba(16, 24, 40, .38);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101820;
    --panel: #18232c;
    --border: #2b3a45;
    --border-strong: #465762;
    --text: #edf2f4;
    --text-dim: #9baab4;
    --accent: #f1844d;
    --accent-soft: #3a261d;
    --good: #5bc49a;
    --bad: #e5534b;
    --mark-ours: rgba(90, 160, 255, .22);
    --mark-a: rgba(244, 114, 182, .26);
    --mark-h: rgba(45, 212, 191, .26);
    --warn: #c69026;
    --warn-bg: #2b2416;
    --row-alt: #20262e;
    --shadow: none;
    --panel-raised: #1c2933;
    --surface-subtle: #14202a;
    --accent-strong: #ff9a66;
    --accent-glow: rgba(241, 132, 77, .24);
    --on-accent: #17212a;
    --focus-ring: rgba(241, 132, 77, .30);
    --navy: #0c171f;
    --navy-2: #162936;
    --navy-text: #f7fafb;
    --navy-muted: #aebdc6;
    --error-bg: #2b1a1c;
    --dirty-bg: #33290f;
    --input-count: #3fbf72;
    --input-amount: #38a9d8;
    --metric-yellow: #d6ad19;
    --metric-orange: #d77832;
    --metric-violet: #8f76dc;
    --metric-neutral: #778392;
    --hud-bg: #0d1117;
    --map-bg: #202a24;
    --map-school: #397cc8;
    --map-university: #c96928;
    --map-general: #398649;
    --map-total: #11151a;
    --map-chip: #dce3eb;
    --map-chip-text: #151b23;
    --map-chip-border: #718399;
    --map-overlay: rgba(28, 33, 40, .90);
    --shadow-raised: 0 14px 36px rgba(0, 0, 0, .26), 0 2px 8px rgba(0, 0, 0, .20);
    --shadow-float: 0 22px 60px rgba(0, 0, 0, .38);
    --scrim: rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.num, input[type="number"], input[inputmode="numeric"], td.num, th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* --- 全体レイアウト ------------------------------------------------------ */

header.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar .brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  white-space: nowrap;
}

nav.tabs { display: flex; gap: 2px; flex: 1; }

nav.tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}
nav.tabs button:hover { background: var(--bg); color: var(--text); }
nav.tabs button[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.topbar .who { color: var(--text-dim); font-size: 13px; white-space: nowrap; }

/* 幅が足りないとき、タブ名が縦に潰れて読めなくなるのを防ぐ。
 * 事務所の PC のほか iPad の Safari でも開くので、狭い幅で崩れないようにする。 */
@media (max-width: 900px) {
  header.topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 8px 12px;
  }
  nav.tabs {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav.tabs button { white-space: nowrap; }
  .topbar .who { font-size: 12px; }
  main { padding: 12px; }
  table.sheet thead th { top: 0; }
}

main { padding: 20px; max-width: 1500px; margin: 0 auto; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.panel > h2 {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel > h2 .sub { font-weight: 400; color: var(--text-dim); font-size: 12px; }
.panel .body { padding: 16px; }

/* --- 部品 ---------------------------------------------------------------- */

button, .btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover:not(:disabled) { filter: brightness(1.08); color: var(--on-accent); }
button.danger { color: var(--bad); border-color: var(--bad); }
button.small { padding: 3px 9px; font-size: 12px; }

.login-box input, input[type="text"], input[type="password"], input[type="date"], input[type="month"], input[type="number"], select, textarea {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); font-weight: 600; }
label.field > input, label.field > select { color: var(--text); font-weight: 400; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.toolbar .spacer { flex: 1; }

/* 人数 / 会計 の切り替え。押されている方がはっきり分かるようにする */
.modes { display: flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.modes button {
  border: 0;
  border-radius: 0;
  padding: 7px 18px;
  background: var(--panel);
  color: var(--text-dim);
}
.modes button + button { border-left: 1px solid var(--border-strong); }
.modes button:hover { background: var(--bg); }
.modes button[aria-current="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
.modes button[aria-current="true"]:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }

.notice { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
.notice.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid currentColor; }
.notice.error { background: var(--error-bg); color: var(--bad); border: 1px solid currentColor; }
.notice.ok { background: var(--accent-soft); color: var(--accent); border: 1px solid currentColor; }

.muted { color: var(--text-dim); }
.empty { padding: 40px 20px; text-align: center; color: var(--text-dim); }

/* --- 表 ------------------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; }
th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th { font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
td.num, th.num { text-align: right; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tfoot td { font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: 0; }

.scroll-x { overflow-x: auto; }

/* --- 日報の入力グリッド --------------------------------------------------- */

/* 縦にも横にもスクロールする枠。行数が多いので見出しは固定したい。
 * sticky の基準は body ではなくこの枠なので、top は 0 にする（52px にすると
 * 枠の内側で 52px 下がり、先頭行が見出しの裏に隠れる）。 */
.sheet-scroll {
  overflow: auto;
  max-height: calc(100vh - 260px);
  min-height: 240px;
}

table.sheet { min-width: 900px; }
table.sheet th:first-child, table.sheet td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
  border-right: 1px solid var(--border);
  min-width: 150px;
}
table.sheet tbody tr:nth-child(even) td:first-child { background: var(--row-alt); }
table.sheet thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
  /* sticky にすると border-bottom が一緒にスクロールしないので、影で代用する */
  box-shadow: inset 0 -1px 0 var(--border-strong);
}
table.sheet thead th:first-child { z-index: 3; }

/* 合計行は下に貼り付けて、長い表でも常に見えるようにする */
table.sheet tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--border-strong);
}
table.sheet tfoot td:first-child { z-index: 1; }

table.sheet th.group-head {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  position: sticky;
  left: 0;
  z-index: 1;
}

table.sheet td.cell { padding: 2px; }
table.sheet td.cell input {
  width: 100%;
  min-width: 76px;
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 8px;
  text-align: right;
  border-radius: 4px;
}
table.sheet td.cell input:hover { border-color: var(--border); }
table.sheet td.cell input:focus { background: var(--panel); border-color: var(--accent); }
table.sheet td.cell input.dirty { background: var(--dirty-bg); border-color: var(--warn); }
table.sheet td.na { background: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--border) 5px, var(--border) 6px); }

/* --- 実数と会計の突き合わせ表 --------------------------------------------- */

table.sheet.reconcile { font-size: 11px; min-width: 0; }
table.sheet.reconcile th,
table.sheet.reconcile td { border: 1px solid var(--border); padding: 2px 5px; white-space: nowrap; }
table.sheet.reconcile th:first-child,
table.sheet.reconcile td:first-child { position: static; min-width: 0; }
table.sheet.reconcile tbody tr:nth-child(even) { background: transparent; }

table.sheet.reconcile thead th {
  position: static;
  box-shadow: none;
  background: var(--bg);
  text-align: center;
  font-size: 11px;
}
/* 車種の見出しは太い区切りにして、どこからどこまでが同じ車種か分かるようにする */
table.sheet.reconcile th.veh {
  background: var(--row-alt);
  color: var(--text);
  font-size: 12px;
  border-left: 2px solid var(--border-strong);
}
table.sheet.reconcile th.rh-row {
  text-align: right;
  font-weight: 400;
  color: var(--text);
  background: var(--panel);
  min-width: 3.6em;
}
table.sheet.reconcile th.rh-row.sun { color: var(--bad); }
table.sheet.reconcile th.rh-row.sat { color: var(--accent); }

/* 実数＝緑、会計＝水色。FileMaker の表と同じ色分け */
table.sheet.reconcile td.num { background: color-mix(in srgb, var(--input-count) 12%, transparent); }
table.sheet.reconcile td.kaikei,
table.sheet.reconcile th.kaikei { background: color-mix(in srgb, var(--input-amount) 14%, transparent); }

/* 差があるマス。ここを見つけるための画面なので、はっきり目立たせる */
table.sheet.reconcile td.gap {
  background: color-mix(in srgb, var(--bad) 28%, transparent);
  color: var(--text);
  font-weight: 700;
}

table.sheet.reconcile tfoot td,
table.sheet.reconcile tfoot th {
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}

/* --- 会計の入力表 --------------------------------------------------------- */

/* 列が多いので、縦の罫線が無いとどの車種の欄か目で追えない */
table.sheet.account th,
table.sheet.account td { border: 1px solid var(--border); }
table.sheet.account { font-size: 12px; }
table.sheet.account th, table.sheet.account td { padding: 3px 6px; }

table.sheet.account th.rh-row {
  text-align: center;
  white-space: nowrap;
  font-weight: 400;
  color: var(--text);
  background: var(--panel);
}
/* ヘッダー行（費目・車種名・合計）を中央揃え。本文の数値は右揃えのまま */
table.sheet.account thead th { text-align: center; }
table.sheet.account tbody tr:nth-child(even) { background: transparent; }

/* 参考表示の行（人数画面から持ってきた入校数）。入力欄と見分けがつくようにする */
table.sheet.account tr.check th.rh-row,
table.sheet.account tr.check td { background: var(--bg); color: var(--text-dim); }

table.sheet.account tr.subtotal th.rh-row,
table.sheet.account tr.subtotal td {
  font-weight: 700;
  background: var(--accent-soft);
  border-top: 2px solid var(--border-strong);
}
table.sheet.account tr.unit th.rh-row,
table.sheet.account tr.unit td { background: var(--bg); color: var(--text-dim); }

table.sheet.account td.cell { padding: 1px 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
table.sheet.account td.cell input {
  width: 100%;
  min-width: 62px;
  padding: 2px 4px;
  text-align: right;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 3px;
}
table.sheet.account td.cell input:hover { border-color: var(--border-strong); }
table.sheet.account td.cell input:focus { border-color: var(--accent); background: var(--panel); }

/* 教材と総合計の小さい表。画面と同じく右下に置く */
.kyozai-wrap { display: flex; justify-content: flex-end; padding: 0 16px 16px; }
table.sheet.kyozai { width: auto; min-width: 0; }
table.sheet.kyozai tr.grand th,
table.sheet.kyozai tr.grand td {
  font-weight: 700;
  font-size: 14px;
  background: var(--accent-soft);
  border-top: 2px solid var(--border-strong);
}

/* --- 日報の表（FileMaker の日別データ入力画面に合わせた形） ----------------- */

.report-columns { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.report-col { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* 列が多いので、幅が足りないときは表ごとに横スクロールさせる。
 * はみ出しを切り落とすと年集計が見えなくなってしまう。 */
.report-block { overflow-x: auto; }

/* 日報の表は入力グリッド（.sheet）の指定を引き継ぐが、
 * 先頭列 150px 固定や sticky は要らないので打ち消す。
 * これを外さないと区分名の列が広がりすぎて、年集計が画面からはみ出す。 */
table.sheet.report th:first-child,
table.sheet.report td:first-child {
  position: static;
  min-width: 0;
  border-right: 1px solid var(--border);
}
table.sheet.report tbody tr:nth-child(even) td:first-child { background: transparent; }

table.sheet.report { min-width: 0; width: 100%; font-size: 12px; }
table.sheet.report th,
table.sheet.report td { padding: 2px 4px; border: 1px solid var(--border); }

table.sheet.report thead th {
  position: static;                 /* 小さい表が縦に並ぶので、固定は不要 */
  box-shadow: none;
  background: var(--bg);
  font-size: 11px;
  text-align: center;
  padding: 3px 4px;
}
table.sheet.report thead th.grp { background: var(--accent-soft); color: var(--accent); }

/* 左端の区分名。縦に長いので中央に置く */
table.sheet.report th.rh-cat {
  width: 30px;
  background: var(--row-alt);
  vertical-align: middle;
  text-align: center;
  font-size: 12px;
  color: var(--text);
  padding: 2px;
}
table.sheet.report th.rh-cat span {
  writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: .08em;
}
table.sheet.report th.rh-row {
  text-align: right;
  white-space: nowrap;
  font-weight: 400;
  color: var(--text);
  width: 1%;
  font-size: 11px;
}

table.sheet.report tbody tr:nth-child(even) { background: transparent; }
table.sheet.report td.num,
table.sheet.report thead th.num { min-width: 34px; }
table.sheet.report td.dim { color: var(--text-dim); }
table.sheet.report td.strong { font-weight: 700; }
/* 値が入らない欄。空白だと表がスカスカに見えるので、ごく薄く塗る */
table.sheet.report td.na-soft { background: var(--bg); }

table.sheet.report td.diff { font-weight: 700; }
table.sheet.report td.diff.up { color: var(--good); }
table.sheet.report td.diff.down { color: var(--bad); }
table.sheet.report td.diff.flat { color: var(--text-dim); font-weight: 400; }

table.sheet.report td.cell { padding: 1px; }
/* 入力欄。他の列と同じ幅に揃える（広いと表が横に伸びて年集計が見切れる） */
table.sheet.report td.cell {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  min-width: 34px;
  width: 1%;
  padding: 1px 2px;
}
table.sheet.report td.cell input {
  width: 100%;
  min-width: 0;
  padding: 2px 3px;
  font-weight: 700;
  color: var(--text);
  border-color: transparent;
  background: transparent;
}
table.sheet.report td.cell input:hover { border-color: var(--border-strong); }
table.sheet.report td.cell input:focus { border-color: var(--accent); }

/* 行の色分け。FileMaker の表と同じ色味を、明暗どちらでも成り立つ濃さで置く */
.tint-tsugaku    { background: color-mix(in srgb, var(--input-count) 16%, transparent); }
.tint-stay       { background: color-mix(in srgb, var(--input-amount) 16%, transparent); }
.tint-sotsugyo   { background: color-mix(in srgb, var(--metric-yellow) 18%, transparent); }
.tint-zaiseki    { background: color-mix(in srgb, var(--metric-orange) 18%, transparent); }
.tint-moushikomi { background: color-mix(in srgb, var(--metric-yellow) 20%, transparent); }
.tint-karimen    { background: color-mix(in srgb, var(--metric-violet) 18%, transparent); }
.tint-koshu      { background: color-mix(in srgb, var(--metric-neutral) 18%, transparent); }
.tint-total      { background: color-mix(in srgb, var(--metric-violet) 18%, transparent); }
/* 入校の行は行ごと色を敷く（通学＝薄緑・ステイ＝薄水色）。
 * ラベルだけの色より、どの行に打っているかが横目で追いやすい。
 * 入力欄の中まで薄く染める。ただし未保存の黄色（.dirty）はそれより優先 */
table.sheet.report tr.row-tsugaku > td,
table.sheet.report tr.row-tsugaku > th.rh-row { background: color-mix(in srgb, var(--input-count) 13%, transparent); }
table.sheet.report tr.row-stay > td,
table.sheet.report tr.row-stay > th.rh-row { background: color-mix(in srgb, var(--input-amount) 13%, transparent); }
table.sheet.report tr.row-tsugaku td.cell input { background: color-mix(in srgb, var(--input-count) 8%, var(--panel)); }
table.sheet.report tr.row-stay td.cell input { background: color-mix(in srgb, var(--input-amount) 8%, var(--panel)); }

@media (max-width: 1100px) {
  .report-columns { flex-direction: column; }
  .report-col { flex: 1 1 auto; width: 100%; }
}

/* 打っているマスの十字案内。
 * 背景「画像」で重ねるので、行の薄緑・薄水色（background-color）と共存する */
table.sheet tr.xh-row > td,
table.sheet tr.xh-row > th.rh-row,
table.sheet td.xh-col {
  background-image: linear-gradient(
    color-mix(in srgb, var(--accent) 11%, transparent),
    color-mix(in srgb, var(--accent) 11%, transparent));
}
/* 左見出しと上見出しは濃く。色分け（tint-*）より必ず勝たせる */
table.sheet th.xh-head {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}
table.sheet td.cell input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
/* マスの真上に浮かべる「車種 / 費目」の札 */
.cell-hud {
  position: fixed;
  z-index: 60;
  background: var(--hud-bg);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: none;
  white-space: nowrap;
}

/* --- 集計カード ----------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.card .label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.card .value { font-size: 26px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 桁数に応じて縮める。億（14 字）でもカード内寸 178px に収まる大きさ */
.card .value.size-m { font-size: 21px; }
.card .value.size-s { font-size: 17px; }
.card .value .unit { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-left: 2px; }
.card .delta { font-size: 12px; font-variant-numeric: tabular-nums; }
.card .delta.up { color: var(--good); }
.card .delta.down { color: var(--bad); }
.card .delta.flat { color: var(--text-dim); }
/* 「◯月◯日分までの集計」。見落とすと売上を読み違えるので、金額のすぐ下に赤字で置く */
.card .as-of { font-size: 11px; font-weight: 700; color: var(--bad); line-height: 1.4; }

/* --- グラフ --------------------------------------------------------------- */

.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; }
.chart .axis-line { stroke: var(--border-strong); stroke-width: 1; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .tick { fill: var(--text-dim); font-size: 11px; }
.chart .bar-current { fill: var(--accent); }
.chart .bar-previous { fill: var(--border-strong); }
.chart .bar:hover { opacity: .8; }
/* 他校が未入力で棒を描けない月。空白だと「0%」と読めてしまうので薄く枠を引く */
.chart .bar-none { fill: var(--bg); stroke: var(--border); stroke-dasharray: 2 3; }
/* 月の下に添える前年差（ポイント） */
.chart .tick.value { font-size: 10px; font-weight: 700; fill: var(--text); }
.chart .tick.diff { font-size: 10px; font-weight: 700; }
.chart .tick.diff.up { fill: var(--good); }
.chart .tick.diff.down { fill: var(--bad); }
.chart .tick.diff.flat { fill: var(--text-dim); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-dim); padding: 8px 0 0; }
.legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* 合格率のバー */
.rate-bar { position: relative; height: 16px; background: var(--border); border-radius: 3px; overflow: hidden; min-width: 90px; }
.rate-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }

/* --- ログイン ------------------------------------------------------------- */

.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-box { width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 28px; box-shadow: var(--shadow); }
.login-box h1 { font-size: 17px; margin: 0 0 4px; }
.login-box p.lead { margin: 0 0 20px; color: var(--text-dim); font-size: 13px; }
.login-box label.field { margin-bottom: 14px; }
.login-box input { width: 100%; }
.login-box button { width: 100%; margin-top: 6px; }
.login-box #login-build { margin-top: 14px; font-size: 11px; text-align: center; }

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

/* 印刷。開いている画面がそのまま会議資料になるように整える。
 * 表が横に長いので A4 横で刷る前提。色（地図のバッジや赤字）はそのまま出す */
@page { size: A4 landscape; margin: 10mm; }
@media print {
  header.topbar, .toolbar, button, input[type="file"], .notice.ok { display: none !important; }
  body { background: #fff; }
  .panel { break-inside: avoid; box-shadow: none; border: none; margin: 0 0 8mm; }
  .scroll-x { overflow: visible !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* 地図はページの幅いっぱいに */
  .bunrui-map { margin: 0; break-inside: avoid; }
  /* 貼り付け列の影や固定は紙では不要 */
  table.sheet th, table.sheet td { position: static !important; }
}

/* --- 月次入校状況報告 ------------------------------------------------------ */

table.sheet.monthly { font-size: 12px; min-width: 0; }
table.sheet.monthly th,
table.sheet.monthly td { border: 1px solid var(--border); padding: 3px 6px; white-space: nowrap; }
table.sheet.monthly th:first-child,
table.sheet.monthly td:first-child { position: static; min-width: 0; }
table.sheet.monthly tbody tr:nth-child(even) { background: transparent; }

table.sheet.monthly thead th {
  position: static;
  box-shadow: none;
  background: var(--bg);
  text-align: center;
  font-size: 11px;
}
/* 入校数 / 売上 / 客単価 の区切りを分かりやすくする */
table.sheet.monthly thead th.grp {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  border-left: 2px solid var(--border-strong);
}
table.sheet.monthly th.rh-row {
  text-align: right;
  font-weight: 400;
  color: var(--text);
  background: var(--panel);
}

table.sheet.monthly td.strong { font-weight: 700; }
table.sheet.monthly td.dim { color: var(--text-dim); }

/* 達成率。100% 以上は緑、90% 未満は赤。ひと目で届いているか分かるように */
table.sheet.monthly td.rate { font-weight: 700; }
table.sheet.monthly td.rate.up { color: var(--good); }
table.sheet.monthly td.rate.flat { color: var(--warn); }
table.sheet.monthly td.rate.down { color: var(--bad); }

table.sheet.monthly td.diff.up { color: var(--good); }
table.sheet.monthly td.diff.down { color: var(--bad); }
table.sheet.monthly td.diff.flat { color: var(--text-dim); }

table.sheet.monthly tr.grand th,
table.sheet.monthly tr.grand td {
  font-weight: 700;
  background: var(--accent-soft);
  border-top: 2px solid var(--border-strong);
}

/* 目標・他校の入力欄 */
table.sheet.monthly td.cell { padding: 1px 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
table.sheet.monthly td.cell input {
  width: 100%;
  min-width: 70px;
  padding: 3px 6px;
  text-align: right;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 3px;
  color: var(--text);
  font-weight: 700;
}
table.sheet.monthly td.cell input:hover { border-color: var(--border-strong); }
table.sheet.monthly td.cell input:focus { border-color: var(--accent); background: var(--panel); }
table.sheet.monthly td.cell input.dirty { background: var(--dirty-bg); border-color: var(--warn); }

/* ダッシュボードの内訳表。列が多いので縦罫線を入れて追いやすくする */
.panel .scroll-x > table th,
.panel .scroll-x > table td { border-right: 1px solid var(--border); }
.panel .scroll-x > table th:last-child,
.panel .scroll-x > table td:last-child { border-right: 0; }
.panel .scroll-x > table thead th { background: var(--bg); }
.panel .scroll-x > table tfoot td { background: var(--accent-soft); }

/* 区分の列。
 * 何もしないと、見出しの「区分」だけの幅（50px 弱）まで潰れて
 * 「普通車（審査）」が 4 行に折り返してしまう。表はもともと横スクロールするので、
 * ここは折り返さずに車種名ぶんの幅を確保する。
 * ついでに左に貼り付けて、右へスクロールしてもどの車種の行か見失わないようにする。 */
.panel .scroll-x > table th:first-child,
.panel .scroll-x > table td:first-child {
  white-space: nowrap;
  /* 列の少ない表（講習別）だと、余った幅をこの列が全部吸って 800px 近くなる。
   * 1% にしておくと内容ぶんだけになり、余りは数字の列に回る */
  width: 1%;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
  border-right: 1px solid var(--border-strong);
}
.panel .scroll-x > table tbody tr:nth-child(even) td:first-child { background: var(--row-alt); }
.panel .scroll-x > table thead th:first-child { background: var(--bg); z-index: 2; }
.panel .scroll-x > table tfoot td:first-child { background: var(--accent-soft); }

/* 期間選択。「← 今月 →」を 1 かたまりに見せる。
 * 隣の期間の矢印とくっついて見えると押し間違えるので、かたまりの間を空ける */
.period-picks { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.period { display: inline-flex; gap: 0; }
.period button { border-radius: 0; margin-left: -1px; }
.period button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.period button:last-child { border-radius: 0 6px 6px 0; }
.period button.step { padding-left: 8px; padding-right: 8px; color: var(--text-dim); }
.period button.step:disabled { opacity: .4; cursor: default; }
.period button.pick { font-weight: 700; }
.period button:hover:not(:disabled) { position: relative; z-index: 1; }

/* グラフの上に置く小見出し。パネルの h2 より一段小さく */
.chart-title {
  margin: 14px 16px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
/* 表の列に合わせて幅を測るので、余白は付けない（表と左右の端をそろえる） */
.panel > .chart { padding: 0 0 8px; }
.panel > .chart .legend { padding: 8px 16px 4px; }

/* 社外アクセスの切り替え。表の中に置くので小さく */
.switch { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
.switch input { margin: 0; }

/* グループウェアに配る項目のチェック一覧 */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 16px;
}

/* 自動で入る欄。触れないことが見て分かるようにする */
table.sheet td.cell input.auto {
  background: var(--bg);
  color: var(--text-dim);
  cursor: default;
}

/* --- 道内報告 --------------------------------------------------------- */

/* 配布ファイルと同じ形の表。列が多いので詰めて出す */
table.sheet.hk { min-width: 0; font-size: 12px; }
table.sheet.hk th,
table.sheet.hk td { padding: 3px 6px; border: 1px solid var(--border); white-space: nowrap; }
table.sheet.hk thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); font-size: 11px; text-align: center;
}
table.sheet.hk thead th.sub { font-weight: 400; color: var(--text-dim); }
table.sheet.hk th:first-child,
table.sheet.hk td:first-child {
  position: sticky; left: 0; z-index: 1;
  width: 1%; background: var(--panel);
  border-right: 1px solid var(--border-strong);
  text-align: left; font-weight: 600; color: var(--text);
}
table.sheet.hk thead th:first-child { z-index: 3; background: var(--bg); }
table.sheet.hk tbody tr:nth-child(even) { background: transparent; }
table.sheet.hk td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 当年の列を少しだけ濃く。左右どちらの年か目で追えるように */
table.sheet.hk td.now { background: color-mix(in srgb, var(--accent) 5%, transparent); }
table.sheet.hk td.strong { font-weight: 700; }
/* AT 割合。人数の列と読み違えないよう、色を落として細めに */
table.sheet.hk td.pct { color: var(--text-dim); font-size: 11px; }
table.sheet.hk th.grp.strong { color: var(--accent); }
/* 方面の見出し・小計・合計 */
table.sheet.hk tr.area th {
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; text-align: left;
}
table.sheet.hk tr.subtotal td,
table.sheet.hk tr.subtotal th:first-child { font-weight: 700; background: var(--row-alt); }
table.sheet.hk tr.grand td,
table.sheet.hk tr.grand th:first-child { font-weight: 700; background: var(--accent-soft); }
/*
 * 当校と、比べている他校に色を付ける。
 * グラフ（月次報告のシェア推移・年次報告のシェア）と同じ色にそろえてある。
 * 表とグラフで色が違うと、どの帯がどの学校か毎回考え直すことになる。
 *   当校（釧路）… 青   愛国 … ピンク   星ヶ浦 … ティール
 */
/* 第一列を塗る汎用ルール（tr:nth-child(even) td:first-child）より詳しく書かないと、
 * 偶数行だけ色が乗らない */
table.sheet.hk tbody tr.mark-ours > td,
table.sheet.hk tbody tr.mark-ours > th { background: var(--mark-ours); font-weight: 700; }
table.sheet.hk tbody tr.mark-A > td,
table.sheet.hk tbody tr.mark-A > th { background: var(--mark-a); font-weight: 700; }
table.sheet.hk tbody tr.mark-H > td,
table.sheet.hk tbody tr.mark-H > th { background: var(--mark-h); font-weight: 700; }

/* 全道ランキング。普通車と全車種を横に並べる（紙の一覧と同じ並び） */
.rank-pair {
  display: grid;
  /* min() を挟まないと、画面が 420px より狭いとき列が 420px のまま残り、
   * ページごと横にはみ出して表が切れる（iPhone で起きていた） */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 20px;
  padding: 14px 16px 16px;
}
.rank-head { margin-bottom: 6px; }
/* ステイを抜いて見ているときの印。実際の順位と取り違えないように */
.rank-title .stay-off {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 4px; background: var(--warn-bg); color: var(--warn);
  font-size: 11px; font-weight: 700;
}
.rank-title { font-size: 14px; font-weight: 700; }
.rank-hist { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
table.sheet.rank { min-width: 0; width: 100%; font-size: 12px; }
/* 汎用の table.sheet が第一列に min-width:150px を掛けてくる。
 * 順位は 2〜3 桁でいいので外す（外さないと AT 割合の列が枠からはみ出す） */
table.sheet.rank thead th:first-child,
table.sheet.rank tbody td:first-child,
table.sheet.rank tfoot td:first-child { min-width: 0; width: 1%; }
table.sheet.rank th,
table.sheet.rank td { padding: 2px 8px; border: 1px solid var(--border); white-space: nowrap; }
table.sheet.rank thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); font-size: 11px; }
table.sheet.rank th.rh-row {
  position: static; text-align: left; font-weight: 400;
  color: var(--text); background: transparent; min-width: 0;
  /* 余った幅はここが吸う。auto のままだと順位の列が 150px まで太り、
   * AT 割合の列が枠からはみ出してしまう */
  width: 100%;
}
table.sheet.rank tbody tr:nth-child(even) { background: var(--row-alt); }
table.sheet.rank td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet.rank td.now { font-weight: 700; }
table.sheet.rank td.up { color: var(--good); }
table.sheet.rank td.down { color: var(--bad); }
table.sheet.rank tbody tr.mark-ours > td,
table.sheet.rank tbody tr.mark-ours > th { background: var(--mark-ours); font-weight: 700; }
table.sheet.rank tbody tr.mark-A > td,
table.sheet.rank tbody tr.mark-A > th { background: var(--mark-a); font-weight: 700; }
table.sheet.rank tbody tr.mark-H > td,
table.sheet.rank tbody tr.mark-H > th { background: var(--mark-h); font-weight: 700; }
/* 順位の列（第一列）は、汎用の td:first-child と詳細度が並ぶので明示する */
table.sheet.rank tbody tr.mark-ours > td:first-child { background: var(--mark-ours); }
table.sheet.rank tbody tr.mark-A > td:first-child { background: var(--mark-a); }
table.sheet.rank tbody tr.mark-H > td:first-child { background: var(--mark-h); }
/* 全道平均の位置に引く赤い線（紙の一覧と同じ） */
table.sheet.rank tr.avg-line td {
  padding: 0;
  border: 0;
  border-top: 2px solid var(--bad);
  font-size: 10px;
  font-weight: 700;
  color: var(--bad);
  text-align: right;
  line-height: 1.5;
  background: transparent;
}
/* 順位の上下 */
/* AT 割合。人数の列と読み違えないよう、色を落として細めに */
table.sheet.rank td.at { color: var(--text-dim); font-size: 11px; }
table.sheet.rank td.move { font-size: 11px; font-weight: 700; }
table.sheet.rank td.move.up { color: var(--good); }
table.sheet.rank td.move.down { color: var(--bad); }
table.sheet.rank td.move.flat { color: var(--text-dim); font-weight: 400; }

table.sheet.rank tfoot td,
table.sheet.rank tfoot th { font-weight: 700; background: var(--accent-soft); }
table.sheet.rank tfoot tr.avg td,
table.sheet.rank tfoot tr.avg th { background: var(--row-alt); }

/* スマホ（iPhone）で見るとき。横 375px しかないので、
 * 順位と校名を左に貼り付けて、数字の列だけ横スクロールさせる。
 * 貼り付ける列は下の行が透けないよう、色を必ず不透明にしておく
 * （3 校の色分けは半透明なので、白／グレーを下に敷いて重ねる）。 */
@media (max-width: 560px) {
  .rank-pair { padding: 12px 10px 14px; gap: 18px; }
  table.sheet.rank { font-size: 11px; }
  table.sheet.rank th,
  table.sheet.rank td { padding: 2px 5px; }
  table.sheet.rank thead th:first-child,
  table.sheet.rank tbody td:first-child,
  table.sheet.rank tfoot td:first-child { width: 32px; min-width: 32px; }
  table.sheet.rank th.rh-row {
    /* 横に流して読む画面なので、校名の列も中身ぶんでいい */
    width: 1%;
    position: sticky;
    left: 32px;
    z-index: 1;
    background: var(--panel);
    border-right: 1px solid var(--border-strong);
  }
  table.sheet.rank thead th:first-child { z-index: 3; }
  /* 見出しの「校　所」には rh-row が付いていないので、位置で指すしかない。
   * 上（top: 0）と左（left: 32px）の両方に貼り付ける */
  table.sheet.rank thead th:nth-child(2) {
    position: sticky;
    top: 0;
    left: 32px;
    z-index: 3;
    background: var(--bg);
    border-right: 1px solid var(--border-strong);
  }
  table.sheet.rank tbody tr:nth-child(even) > th.rh-row { background: var(--row-alt); }
  table.sheet.rank tfoot th.rh-row { background: var(--accent-soft); }
  table.sheet.rank tfoot tr.avg th.rh-row { background: var(--row-alt); }
  table.sheet.rank tbody tr.mark-ours > th.rh-row,
  table.sheet.rank tbody tr.mark-ours > td:first-child {
    background: linear-gradient(var(--mark-ours), var(--mark-ours)), var(--panel);
  }
  table.sheet.rank tbody tr.mark-A > th.rh-row,
  table.sheet.rank tbody tr.mark-A > td:first-child {
    background: linear-gradient(var(--mark-a), var(--mark-a)), var(--panel);
  }
  table.sheet.rank tbody tr.mark-H > th.rh-row,
  table.sheet.rank tbody tr.mark-H > td:first-child {
    background: linear-gradient(var(--mark-h), var(--mark-h)), var(--panel);
  }
}

/* ファイルの置き場 */
/* ファイルの取り込み。iPad では掴んで落とせないので、ボタンを主役にする。
 * 掴んで落とすほうは、パソコンでまとめて入れるときの近道として残してある */
.import-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-row button { padding: 9px 22px; font-size: 15px; }
.import-row .muted { font-size: 12px; }
/* 掴んだファイルがパネルの上に来たとき */
#hk-drop.over { outline: 2px dashed var(--accent); outline-offset: -6px; background: var(--accent-soft); }

/* --- 権限の種類 ------------------------------------------------------------ */

table.roles td { vertical-align: middle; }
table.roles td.tabs { white-space: normal; min-width: 320px; }
/* タブの選択。狭い画面では折り返す */
.pick {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 2px 10px 2px 0; font-size: 12px; white-space: nowrap;
}
.pick input { margin: 0; }
/* その「できること」では選べないタブ。消すのではなく薄くして、理由を想像できるようにする */
.pick.off { opacity: .4; }

/* --- 分類別分析 ----------------------------------------------------------- */

table.sheet.bunrui,
table.sheet.bunrui-check,
table.sheet.bunrui-input { min-width: 0; width: 100%; font-size: 12px; }
table.sheet.bunrui th, table.sheet.bunrui td,
table.sheet.bunrui-check th, table.sheet.bunrui-check td,
table.sheet.bunrui-input th, table.sheet.bunrui-input td {
  padding: 3px 8px; border: 1px solid var(--border); white-space: nowrap;
}
table.sheet.bunrui td.num,
table.sheet.bunrui-check td.num,
table.sheet.bunrui-input td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet.bunrui td.strong { font-weight: 700; }
table.sheet.bunrui td.up { color: var(--good); }
table.sheet.bunrui td.down { color: var(--bad); }
table.sheet.bunrui tr.area th,
table.sheet.bunrui-input tr.area th {
  background: var(--accent-soft); color: var(--accent); font-size: 11px; text-align: left;
}
table.sheet.bunrui tr.subtotal td,
table.sheet.bunrui tr.subtotal th:first-child { font-weight: 700; background: var(--row-alt); }
table.sheet.bunrui tr.grand td,
table.sheet.bunrui tr.grand th:first-child { font-weight: 700; background: var(--accent-soft); }
/* 突き合わせの判定 */
table.sheet.bunrui-check .ok-mark { color: var(--good); font-weight: 700; }
table.sheet.bunrui-check .ng-mark { color: var(--bad); font-weight: 700; }
table.sheet.bunrui-check tr.row-ng td { background: color-mix(in srgb, var(--bad) 8%, transparent); }
/* 入力欄。一覧と同じ表のまま、月のセルだけ入力欄になる */
table.sheet.bunrui.editing td.cell { padding: 1px 2px; }
table.sheet.bunrui.editing td.cell input {
  width: 3.4em; text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 4px;
  font-size: 12px;
}
table.sheet.bunrui.editing td.cell input:focus { border-color: var(--accent); outline: none; }

/* 分布図 */
.bunrui-map {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 16px 8px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--map-bg);
}
.bm-base, .bm-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.bm-badge {
  position: absolute;
  transform: translate(-50%, 0) scale(var(--bm-scale, 1));
  transform-origin: top center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  z-index: 2;
}
.bm-name {
  background: var(--map-school); color: var(--on-accent); font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 4px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.bm-name.univ { background: var(--map-university); }
.bm-val {
  background: var(--map-chip); color: var(--map-chip-text); font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 4px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.bm-diff {
  background: var(--map-chip); color: var(--map-chip-text); font-size: 11px; font-weight: 700;
  min-width: 34px; text-align: center;
  padding: 1px 8px; border-radius: 50%;
  border: 1px solid var(--map-chip-border);
  font-variant-numeric: tabular-nums;
}
.bm-diff.down { color: var(--bad); }
/* 集計期間。地図の右上に固定で出す */
.bm-range {
  position: absolute; right: 1.5%; top: 2%;
  background: var(--map-overlay); color: var(--text);
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  z-index: 4;
}
/* 左下の合計欄 */
.bm-summary {
  position: absolute;
  transform: scale(var(--bm-scale, 1));
  transform-origin: top left;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 3;
}
/* アイコンの調整中。掴めることが分かるように */
.bunrui-map.adjusting .bm-badge,
.bunrui-map.adjusting .bm-summary {
  cursor: grab;
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.bunrui-map.adjusting { user-select: none; touch-action: none; }
.bm-sum { display: flex; align-items: center; gap: 8px; }
.bm-sum-label {
  color: var(--on-accent); font-weight: 700; font-size: 15px;
  padding: 4px 14px; border-radius: 7px; min-width: 7em; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.bm-sum-label.koko { background: var(--map-school); }
.bm-sum-label.daigaku { background: var(--map-university); }
.bm-sum-label.ippan { background: var(--map-general); }
.bm-sum-label.goukei { background: var(--map-total); }
.bm-sum-val {
  background: var(--map-chip); color: var(--map-chip-text); font-weight: 700; font-size: 15px;
  padding: 4px 12px; border-radius: 7px; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.bm-sum .bm-diff { font-size: 14px; min-width: 46px; padding: 3px 10px; }

/* --- 年次報告 ------------------------------------------------------------ */

/* 年を列にした表。年が増えると横に伸びるので、項目名の列は左に貼り付ける */
table.sheet.annual { min-width: 0; width: 100%; font-size: 13px; }
table.sheet.annual th,
table.sheet.annual td { padding: 5px 10px; border: 1px solid var(--border); }
table.sheet.annual thead th {
  background: var(--bg);
  white-space: nowrap;
  font-size: 12px;
}
table.sheet.annual th:first-child,
table.sheet.annual td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 1%;
  white-space: nowrap;
  background: var(--panel);
  border-right: 1px solid var(--border-strong);
  text-align: left;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}
table.sheet.annual thead th:first-child { background: var(--bg); z-index: 2; }
table.sheet.annual tbody tr:nth-child(even) { background: transparent; }
table.sheet.annual tbody tr:nth-child(even) td:first-child { background: var(--panel); }
table.sheet.annual th.rh-row .sub {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 6px;
}
/* 途中集計の年は見出しに小さく印を付ける。列の数字だけ見て年ぶんと誤解しないように */
table.sheet.annual thead th .part {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 10px;
  font-weight: 700;
}
table.sheet.annual td .v { font-variant-numeric: tabular-nums; }
table.sheet.annual td .yoy { font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.3; }
table.sheet.annual td .yoy.up { color: var(--good); }
table.sheet.annual td .yoy.down { color: var(--bad); }
table.sheet.annual td .yoy.flat { color: var(--text-dim); }
table.sheet.annual tr.strong td,
table.sheet.annual tr.strong th:first-child { font-weight: 700; background: var(--accent-soft); }
table.sheet.annual tr.strong td .v { font-size: 14px; }

/* --- 2026 visual refinement ---------------------------------------------
 * 情報量の多い業務画面を、静かな面・明確な階層・一貫した操作感でまとめる。
 * 既存の DOM と機能クラスには手を入れず、共通部品の見た目だけを上書きする。 */

html { background: var(--bg); }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% -12%, var(--accent-glow), transparent 32rem),
    var(--bg);
  letter-spacing: .005em;
}

::selection { background: var(--accent-soft); color: var(--text); }

header.topbar {
  min-height: 64px;
  height: auto;
  padding: 8px clamp(16px, 2vw, 32px);
  gap: clamp(14px, 2vw, 28px);
  background: color-mix(in srgb, var(--panel) 91%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--panel) 70%, transparent), var(--shadow);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.topbar .brand { font-size: 16px; font-weight: 800; letter-spacing: .025em; color: var(--text); }

nav.tabs { align-items: center; gap: 4px; padding: 3px; border-radius: 10px; }
nav.tabs button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
nav.tabs button:hover { background: var(--surface-subtle); transform: translateY(-1px); }
nav.tabs button[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.topbar .who {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

main { max-width: 1560px; padding: clamp(18px, 2.5vw, 36px); }

.panel {
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel-raised) 97%, var(--accent-soft));
  box-shadow: var(--shadow-raised);
  margin-bottom: 20px;
  overflow: clip;
}
.panel > h2 {
  min-height: 54px;
  padding: 14px 20px;
  font-size: 15px;
  letter-spacing: .015em;
  border-bottom-color: var(--border);
  background: linear-gradient(180deg, var(--panel-raised), color-mix(in srgb, var(--panel-raised) 92%, var(--surface-subtle)));
}
.panel > h2 .sub { margin-left: auto; font-size: 12px; }
.panel .body { padding: clamp(16px, 2vw, 24px); }

button, .btn {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 7%, transparent);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 4px 12px var(--accent-glow);
  transform: translateY(-1px);
}
button:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
button.primary {
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  box-shadow: 0 5px 14px var(--accent-glow);
}
button.primary:hover:not(:disabled) { color: var(--on-accent); filter: none; box-shadow: 0 8px 20px var(--accent-glow); }
button.small { min-height: 30px; padding: 4px 10px; }

.login-box input, input[type="text"], input[type="password"], input[type="date"], input[type="month"], input[type="number"], select, textarea {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring), inset 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}
label.field { gap: 6px; letter-spacing: .02em; }

.toolbar {
  gap: 10px;
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: var(--shadow);
}

/* 多くの画面では toolbar 自体が panel の body。
 * ここをもう一枚のカードとして装飾すると下に空の帯ができるため、外側の panel に統合する。 */
.panel > .body.toolbar {
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.modes, .period { border-radius: 9px; box-shadow: inset 0 0 0 1px var(--border); }
.modes button[aria-current="true"] { color: var(--on-accent); }
.period button:first-child { border-radius: 9px 0 0 9px; }
.period button:last-child { border-radius: 0 9px 9px 0; }

.notice { padding: 12px 15px; border-radius: 9px; border-width: 1px; box-shadow: inset 3px 0 0 currentColor; }
.notice.error { background: color-mix(in srgb, var(--bad) 10%, var(--panel)); }

.cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card {
  position: relative;
  min-height: 126px;
  padding: 17px 18px;
  border-radius: var(--radius-lg);
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  background: linear-gradient(145deg, var(--panel-raised), color-mix(in srgb, var(--panel) 93%, var(--accent-soft)));
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: .7; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.card .label { font-size: 12px; letter-spacing: .035em; }
.card .value { margin: 4px 0 2px; font-size: 28px; letter-spacing: -.025em; }

/* ダッシュボード: 予測値は表として読みやすく、KPI は数字を主役にする。 */
table.sheet.pace { min-width: 680px; }
table.sheet.pace th,
table.sheet.pace td { padding: 12px 16px; }
table.sheet.pace thead th {
  background: var(--surface-subtle);
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-strong);
}
table.sheet.pace tbody th { color: var(--text); font-size: 13px; }
table.sheet.pace tbody td { font-size: 15px; }
table.sheet.pace tbody td:nth-child(3) { color: var(--accent-strong); font-weight: 800; }

.cards .card .delta { margin-top: 3px; font-weight: 700; }
.cards .card .prev { color: var(--text-dim); }
.cards .card .as-of {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
}

@media (max-width: 520px) {
  table.sheet.pace th,
  table.sheet.pace td { padding: 10px 12px; }
}

/* 日報入力: 高密度の表は装飾を抑え、入力位置と業務上の色分けを優先する。 */
.report-block,
.sheet-scroll {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.report-block { scrollbar-gutter: stable; }
.sheet-scroll { box-shadow: inset 0 1px 0 var(--border); }

table.sheet.report tbody tr:hover { background: transparent; }
table.sheet.report tbody tr:hover > td:not(.cell),
table.sheet.report tbody tr:hover > th.rh-row {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 28%, transparent),
              inset 0 -1px 0 color-mix(in srgb, var(--accent) 28%, transparent);
}
table.sheet.report td.cell input {
  min-height: 30px;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
table.sheet.report td.cell input:focus {
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.kyozai-wrap { padding-top: 12px; }
.kyozai-wrap table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }

@media (max-width: 900px) {
  .report-columns { gap: 12px; }
  .report-col { gap: 8px; }
  .report-block { width: 100%; }
}

/* 帳票: 月次・年次・道内・分類別で見出し、合計、固定列の表現を統一する。 */
table.sheet.monthly,
table.sheet.annual,
table.sheet.hk,
table.sheet.rank,
table.sheet.bunrui,
table.sheet.bunrui-check {
  border: 1px solid var(--border);
  background: var(--panel);
}
table.sheet.monthly thead th,
table.sheet.annual thead th,
table.sheet.hk thead th,
table.sheet.rank thead th,
table.sheet.bunrui thead th,
table.sheet.bunrui-check thead th {
  background: var(--surface-subtle);
  color: var(--text-dim);
  border-bottom-color: var(--border-strong);
}
table.sheet.monthly tbody tr:hover,
table.sheet.annual tbody tr:hover,
table.sheet.hk tbody tr:hover,
table.sheet.rank tbody tr:hover,
table.sheet.bunrui tbody tr:hover { background: var(--accent-soft); }

table.sheet.annual td .v { font-size: 14px; font-weight: 700; }
table.sheet.annual td .yoy { margin-top: 2px; }
table.sheet.hk tr.mark-ours,
table.sheet.rank tr.mark-ours { box-shadow: inset 3px 0 0 var(--accent); }

.bunrui-map {
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel) 42%, transparent), var(--shadow-raised);
}
.bm-range { border: 1px solid var(--border); backdrop-filter: blur(8px); }

@media (max-width: 520px) {
  .bunrui-map { margin: 0 10px 8px; border-radius: 8px; }
  .bm-range { font-size: 10px; padding: 2px 7px; }
}

/* 管理: 選択中の管理領域と、設定フォームのまとまりを明確にする。 */
#admin-sec {
  min-width: min(360px, 78vw);
  font-weight: 700;
  background-color: var(--panel-raised);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

.feed-grid {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
}
.feed-grid .pick,
table.roles .pick {
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 7px;
}
.feed-grid .pick:hover,
table.roles .pick:hover { background: var(--accent-soft); }

.import-row {
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface-subtle);
}
.import-row button { box-shadow: 0 5px 14px var(--accent-glow); }

#mail-probe-out {
  max-height: 340px;
  overflow: auto;
  background: var(--surface-subtle) !important;
  color: var(--text) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 520px) {
  #admin-sec { width: 100%; min-width: 0; }
  .feed-grid { grid-template-columns: 1fr; }
  table.roles td.tabs { min-width: 240px; }
  .import-row button { width: 100%; }
}

table { font-variant-numeric: tabular-nums; }
th, td { padding: 8px 11px; }
th { letter-spacing: .025em; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: var(--accent-soft); }
.scroll-x, .report-block { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

.chart { padding-top: 4px; }
.chart svg { filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--text) 6%, transparent)); }
.rate-bar { height: 18px; border-radius: 999px; background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border); }
.rate-bar > span { border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }

.login-wrap { background: radial-gradient(circle at 50% 15%, var(--accent-glow), transparent 28rem), var(--bg); }
.login-box {
  width: min(390px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel-raised) 96%, var(--accent-soft));
  box-shadow: var(--shadow-float);
}
.login-box h1 { font-size: 21px; letter-spacing: -.015em; }
.login-box p.lead { margin-bottom: 26px; }
.empty { min-height: 180px; display: grid; place-items: center; }

/* タブ数が多いため、一般的なノートPC幅では無理に1行へ詰めず、
 * ブランド／利用者操作とナビゲーションを明確な2段に分ける。 */
@media (max-width: 1500px) {
  header.topbar { flex-wrap: wrap; gap: 7px 12px; padding-bottom: 0; }
  .topbar .who { margin-left: auto; }
  nav.tabs {
    order: 3;
    flex-basis: calc(100% + clamp(32px, 4vw, 64px));
    margin: 0 clamp(-32px, -2vw, -16px);
    padding: 5px clamp(16px, 2vw, 32px) 8px;
    border-top: 1px solid var(--border);
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav.tabs button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 900px) {
  header.topbar { padding: 10px 12px 8px; gap: 8px 12px; }
  nav.tabs { margin: 0 -12px -8px; padding: 5px 12px 9px; border-top: 1px solid var(--border); border-radius: 0; }
  nav.tabs button { min-height: 36px; padding: 7px 12px; }
  .topbar .who { margin-left: auto; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  main { padding: 14px 12px 28px; }
  .toolbar { padding: 12px; border-radius: 11px; }
  .panel > .body.toolbar { padding: 12px; }
  .panel { border-radius: 12px; }
  .panel > h2 { min-height: 48px; padding: 12px 14px; align-items: flex-start; flex-direction: column; gap: 2px; }
  .panel > h2 .sub { margin-left: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { min-height: 112px; padding: 14px; }
  .card .value { font-size: clamp(20px, 6vw, 26px); }
}

@media (max-width: 520px) {
  body { font-size: 13px; }
  .topbar .brand { font-size: 14px; }
  .topbar > button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
  .toolbar { align-items: stretch; gap: 8px; }
  .toolbar > label.field { flex: 1 1 130px; }
  .toolbar .spacer { display: none; }
  .period-picks { gap: 8px; }
  .period { max-width: 100%; }
  .period button { min-height: 36px; padding: 7px 10px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .card { min-height: 104px; }
  .card .label { font-size: 11px; }
  .card .value.size-m { font-size: 18px; }
  .card .value.size-s { font-size: 15px; }
  .login-wrap { padding: 14px; }
  .login-box { padding: 28px 22px; border-radius: 16px; }
  .notice { font-size: 12px; }
  .panel .body { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* カードの前年は別行にする。1 行に詰めると金額のときに折り返して読みにくい */
.card .delta { display: block; }
.card .prev { font-size: 12px; line-height: 1.5; }
/* 内訳の行に混ぜる増減。カード直下の .delta は block なので、ここだけ横に並べる */
.card .prev .delta { display: inline; font-size: 11px; font-weight: 700; }
/* 当校の位置のカード。前年との差が主役なので、前年の値そのものより目立たせる */
.card .delta.lead { font-size: 13px; font-weight: 700; margin-top: 1px; }

/* --- KDS 共通ブランドテーマ --------------------------------------------
 * KDS STEP / KDS Creative と同じ濃紺・オレンジ・白を基準にする。
 * 入力表の用途色は維持し、ナビゲーションと主要操作だけにブランド色を使う。 */

header.topbar {
  color: var(--navy-text);
  background: color-mix(in srgb, var(--navy) 96%, transparent);
  border-bottom-color: color-mix(in srgb, var(--navy-text) 7%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--navy) 22%, transparent);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-text);
}
.topbar .brand-copy { display: flex; flex-direction: column; line-height: 1.08; }
.topbar .brand-copy strong { font-size: 15px; letter-spacing: .01em; }
.topbar .brand-copy small { margin-top: 5px; color: var(--navy-muted); font-size: 9px; font-weight: 500; letter-spacing: .08em; }
.kds-product-mark {
  width: 34px;
  height: 38px;
  flex: 0 0 34px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px color-mix(in srgb, var(--navy) 20%, transparent));
}

nav.tabs button { color: var(--navy-muted); background: transparent; box-shadow: none; }
nav.tabs button:hover {
  color: var(--navy-text);
  background: color-mix(in srgb, var(--navy-text) 6%, transparent);
  box-shadow: none;
}
nav.tabs button[aria-current="page"] {
  color: var(--navy-text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  box-shadow: inset 3px 0 var(--accent);
}
.topbar .who {
  color: var(--navy-text);
  background: color-mix(in srgb, var(--navy-text) 6%, transparent);
  border-color: color-mix(in srgb, var(--navy-text) 10%, transparent);
}
.topbar > button {
  color: var(--navy-muted);
  background: transparent;
  border-color: color-mix(in srgb, var(--navy-text) 14%, transparent);
  box-shadow: none;
}
.topbar > button:hover:not(:disabled) {
  color: var(--navy-text);
  background: color-mix(in srgb, var(--navy-text) 6%, transparent);
  border-color: color-mix(in srgb, var(--navy-text) 25%, transparent);
  box-shadow: none;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
}

/* KDS STEP / Creative と同じ左右分割のログイン。DOM と認証処理は変更しない。 */
.login-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  align-items: stretch;
  min-height: 100vh;
  padding: 0;
  background: var(--panel);
}
.login-visual {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(54px, 9vw, 150px);
  overflow: hidden;
  color: var(--navy-text);
  background: var(--navy);
}
.login-visual-grid {
  display: none;
}
.login-visual-copy { position: relative; z-index: 2; }
.login-eyebrow {
  margin: 0;
  color: #f79561;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.login-visual-copy h2 {
  margin: 22px 0 24px;
  color: #fff;
  font-size: clamp(38px, 4.2vw, 66px);
  line-height: 1.27;
  letter-spacing: -.055em;
}
.login-visual-copy > p:not(.login-eyebrow) {
  margin: 0;
  color: var(--navy-muted);
  font-size: 15px;
  line-height: 2;
}
.login-pills { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 9px; }
.login-pills span {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--navy-text) 12%, transparent);
  border-radius: 20px;
  color: #c7d1d7;
  background: color-mix(in srgb, var(--navy-text) 4%, transparent);
  font-size: 13px;
}
.login-orb { display: none; }
.login-orb-one {
  width: 430px;
  height: 430px;
  right: -250px;
  bottom: -170px;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 68%);
}
.login-orb-two {
  width: 180px;
  height: 180px;
  right: 10%;
  top: 9%;
  border: 1px solid color-mix(in srgb, var(--navy-text) 8%, transparent);
  box-shadow: 0 0 90px color-mix(in srgb, var(--accent) 9%, transparent);
}
.login-box {
  align-self: center;
  justify-self: center;
  width: min(420px, calc(100% - 50px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-box h1 {
  margin: 0 0 58px;
  padding: 0;
  color: var(--text);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  min-height: 40px;
  font-size: 17px;
  line-height: 1.08;
}
.login-box h1 > span:last-child { display: flex; flex-direction: column; }
.login-box h1 small { margin-top: 7px; color: var(--text-dim); font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.login-box h1 .kds-product-mark { width: 40px; height: 40px; flex-basis: 40px; }
.login-heading { margin: 0 0 29px; }
.login-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--good);
  font-size: 13px;
  font-weight: 700;
}
.login-secure::before { content: "✓"; width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.login-heading h2 { margin: 13px 0 7px; font-size: 28px; line-height: 1.55; }
.login-heading p { margin: 0; color: var(--text-dim); font-size: 15px; }
.login-box label.field {
  margin-bottom: 20px;
  gap: 8px;
  color: color-mix(in srgb, var(--text) 82%, var(--text-dim));
  font-size: 14px;
}
.login-box input {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  border-color: var(--border);
  border-radius: 10px;
}
.login-box button.primary {
  width: 100%;
  height: 50px;
  margin-top: 0;
  border-radius: 10px;
  box-shadow: 0 10px 25px var(--accent-glow);
}
.login-box #login-build {
  margin-top: 26px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
  font-size: 12px;
}

@media (max-width: 820px) {
  .login-wrap { display: flex; min-height: 100vh; padding: 35px 25px; background: var(--panel); }
  .login-visual { display: none; }
  .login-box { width: min(420px, 100%); margin: auto; padding: 0; border-radius: 0; }
}

@media (max-width: 520px) {
  .login-wrap { padding: 30px 22px; }
  .login-box { padding: 0; }
  .login-box h1 { margin-bottom: 44px; font-size: 16px; }
  .login-heading h2 { font-size: 24px; }
}

@media (max-width: 1500px) {
  nav.tabs { border-top-color: color-mix(in srgb, var(--navy-text) 8%, transparent); }
}

/* --- 自動ログアウトの知らせ（1 分前）と、書きかけの復元 ----------------------- */

.autologout-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim);
}
.autologout-dialog {
  width: min(440px, 100%);
  margin: 0;
  box-shadow: var(--shadow-float);
}
.autologout-dialog p { margin: 0 0 16px; line-height: 1.7; }
.autologout-dialog .autologout-left { color: var(--accent); font-variant-numeric: tabular-nums; }
.autologout-actions { display: flex; justify-content: flex-end; gap: 8px; }
.autologout-actions button { min-width: 120px; }

.draft-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.draft-offer span { flex: 1 1 260px; }

@media print {
  .autologout-scrim, .draft-offer { display: none !important; }
}

/* 全社共通ログイン（2026-09-26）：顔・指紋・暗証番号でログイン／2段目／初期パスワードの変更 */
.login-box button.login-passkey {
  width: 100%;
  height: 46px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
.login-box.login-step button.primary { margin-top: 4px; }
.login-wrap.single { grid-template-columns: minmax(0, 1fr); padding: 40px 20px; }

/*
 * ログインのキャッチコピー（2026-09-26 所有者の依頼「印象付けたい」）。
 * ログイン画面を開くたびに、キャッチコピーの面を全画面（.lv-splash。app.js の playLoginSplash が写しを作る）で
 * 流してから、ログイン画面に切り替える。流れ方:
 *   上の小見出し → 見出しが 1 行ずつ下からせり上がる → 「次の一手へ。」に下線が引かれ、光が 1 回走る
 *   → 説明文 → タグが順に出る → 約 3 秒で消えてログイン画面（押す・キーを打つと飛ばせる）
 * 画面の中（PC の左の面）のキャッチコピーは、止まった完成形で出す（同じ動きを二度見せない）。
 * スマホは左の面を出さない作りのままで、全画面のときだけキャッチコピーが見える。
 * 動きを減らす設定の端末では全画面を出さない（app.js）。
 */
.lv-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.lv-line > span { display: inline-block; }
.lv-accent { position: relative; }
.lv-accent::after {
  content: "";
  position: absolute;
  left: .02em;
  right: .5em;
  bottom: .02em;
  height: .08em;
  border-radius: 2px;
  background: #f79561;
}

/* 全画面。左の面の写しなので見た目の指定はそのまま使い、画面いっぱいに広げて真ん中に置く */
.login-visual.lv-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex !important;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px clamp(28px, 9vw, 150px);
  cursor: pointer;
  animation: lv-leave .5s ease 3.1s forwards;
}
.login-visual.lv-splash.lv-leave-now { animation: lv-leave-now .35s ease forwards; }
.lv-splash .login-visual-copy { width: min(760px, 100%); }
.lv-splash .login-visual-copy h2 { font-size: clamp(32px, 9vw, 72px); }

.lv-splash .lv-line > span {
  transform: translateY(110%);
  animation: lv-rise .95s cubic-bezier(.2, .8, .2, 1) .25s forwards;
}
/* せり上がる span そのものなので、上の .lv-line > span より強い書き方にして光の動きも足す */
.lv-splash .lv-line > span.lv-accent {
  /* 光が走るぶんの帯。文字の色（白）は帯の両端と同じにしてあるので、止まっていれば白のまま */
  background: linear-gradient(100deg, #fff 38%, #ffc2a1 46%, #f79561 50%, #ffc2a1 54%, #fff 62%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lv-rise .95s cubic-bezier(.2, .8, .2, 1) .43s forwards, lv-shine 1.3s ease-in-out 1.75s forwards;
}
.lv-splash .lv-accent::after {
  transform: scaleX(0);
  transform-origin: left center;
  animation: lv-draw .75s cubic-bezier(.65, 0, .25, 1) 1.2s forwards;
}
.lv-splash .login-eyebrow { animation: lv-fade .7s ease .05s both; }
.lv-splash .login-visual-copy > p:not(.login-eyebrow) { animation: lv-fade .8s ease 1.0s both; }
.lv-splash .login-pills span { animation: lv-fade .6s ease both; }
.lv-splash .login-pills span:nth-child(1) { animation-delay: 1.25s; }
.lv-splash .login-pills span:nth-child(2) { animation-delay: 1.35s; }
.lv-splash .login-pills span:nth-child(3) { animation-delay: 1.45s; }
.lv-splash .login-pills span:nth-child(4) { animation-delay: 1.55s; }

@keyframes lv-rise { to { transform: translateY(0); } }
@keyframes lv-draw { to { transform: scaleX(1); } }
@keyframes lv-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes lv-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes lv-leave { to { opacity: 0; visibility: hidden; } }
/* 押して飛ばすとき。名前を分けて、途中からでも必ず新しく始まるようにする */
@keyframes lv-leave-now { to { opacity: 0; visibility: hidden; } }