/* ============================================================
   販売管理システム 共通スタイル
   (ネイビータイトルバー + 淡青グレー背景 / 業務システム風)
   ============================================================ */
:root {
  --navy: #1a2a6c;
  --navy-dark: #101c4e;
  --panel: #d6d9e8;
  --panel-light: #e4e6f0;
  --btn-face: #f0f0f4;
  --btn-border: #8a8fa8;
  --accent: #2b4bb5;
  --yellow: #ffff99;
  --red: #cc0000;
  --green: #0a7a2a;
  --grid-line: #b8bcd0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic UI", "Meiryo UI", "MS UI Gothic", sans-serif;
  font-size: 13px;
  background: #c8ccdc;
  color: #111;
  height: 100%;
}

/* ---------- アプリ全体枠 ---------- */
.app-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  border: 2px solid #9aa0b8;
  background: var(--panel);
}

/* ---------- タイトルバー ---------- */
.title-bar {
  background: linear-gradient(to bottom, #3a4a8c, var(--navy));
  color: #fff;
  padding: 5px 12px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.title-bar .logo { color: #7ec8ff; font-size: 16px; }

/* ---------- ヘッダー (MEMO / DATE / USER / TERM) ---------- */
.app-header {
  display: flex;
  background: var(--panel-light);
  border-bottom: 2px solid #9aa0b8;
  padding: 6px 10px;
  gap: 10px;
  align-items: stretch;
}
.memo-box { flex: 1; display: flex; gap: 6px; }
.memo-label {
  background: var(--navy);
  color: #fff;
  padding: 8px 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.memo-rows { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.memo-row { display: flex; align-items: center; gap: 4px; flex: 1; }
.memo-tag {
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: bold;
  padding: 2px 6px;
  min-width: 34px;
  text-align: center;
}
.memo-tag.personal { background: #0a6a3a; }
.memo-input {
  flex: 1;
  border: 1px solid var(--btn-border);
  background: #fff;
  padding: 3px 8px;
  font-size: 12.5px;
  font-family: inherit;
}
.memo-input.dirty { background: #fff8dc; }
.memo-save {
  border: 1px solid var(--btn-border);
  background: linear-gradient(to bottom, #fff, #d8d8e0);
  border-radius: 3px;
  cursor: pointer;
  padding: 2px 7px;
  font-size: 12px;
  visibility: hidden;
}
.memo-row:hover .memo-save, .memo-save.show { visibility: visible; }
.info-box { min-width: 220px; }
.info-box table { border-collapse: collapse; width: 100%; }
.info-box td { border: 1px solid var(--btn-border); padding: 2px 8px; background: #fff; }
.info-box td.k {
  background: var(--navy);
  color: #fff;
  font-weight: bold;
  width: 52px;
  text-align: center;
}

/* ---------- 本体レイアウト ---------- */
.app-body { display: flex; flex: 1; overflow: hidden; }

/* 左メニュー */
.side-menu {
  width: 185px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  border-right: 2px solid #9aa0b8;
  overflow-y: auto;
}
.side-menu .m-btn {
  display: block;
  width: 100%;
  padding: 9px 6px;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff, var(--btn-face) 45%, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.25);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  color: #111;
  text-decoration: none;
}
.side-menu .m-btn:hover { background: #fdf6d8; }
.side-menu .m-btn.active {
  background: linear-gradient(to bottom, #dce8ff, #b8ccf5);
  border: 2px solid var(--accent);
}
.side-menu .m-btn.quit { margin-top: auto; }
.fiscal-badge {
  background: var(--yellow);
  border: 1px solid #b8a800;
  text-align: center;
  padding: 4px;
  font-weight: bold;
  margin-top: 6px;
}

/* 右コンテンツ */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-light);
}
.content-title {
  background: var(--navy);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
}
.content-title .ct-text { flex: 1; text-align: center; letter-spacing: .5em; }
.fs-btn {
  background: linear-gradient(to bottom, #4a5a9c, #2a3a7c);
  color: #fff;
  border: 1px solid #7a8ac0;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.fs-btn:hover { background: #5a6aac; color: #fff; }
/* ヘルプはリンク (<a>) でも同じ見た目にする */
a.fs-btn { display: inline-block; line-height: 1.35; }
a.fs-btn:visited { color: #fff; }

/* ---------- 全画面モード (メニュー・ヘッダーを隠して作業領域を最大化) ---------- */
body.fullscreen-mode .title-bar,
body.fullscreen-mode .app-header,
body.fullscreen-mode .side-menu { display: none; }
body.fullscreen-mode .app-frame { border: none; }
.content-inner { flex: 1; overflow: auto; padding: 14px; }

/* メニューボタン群 */
.menu-grid { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: flex; gap: 10px; flex-wrap: wrap; }
.menu-btn {
  min-width: 170px;
  padding: 9px 14px;
  background: linear-gradient(to bottom, #ffffff, var(--btn-face) 45%, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.3);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  color: #111;
  text-align: center;
}
.menu-btn:hover { background: #fdf6d8; }
.menu-btn:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,.3); }

/* ---------- フォーム部品 ---------- */
.form-section {
  background: var(--panel-light);
  border: 1px solid var(--grid-line);
  padding: 10px;
  margin-bottom: 10px;
}
.frm-row { display: flex; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; }
.fld { display: flex; align-items: center; gap: 4px; }
.fld > label {
  background: var(--navy);
  color: #fff;
  font-weight: bold;
  padding: 4px 8px;
  min-width: 74px;
  text-align: center;
  font-size: 12px;
}
.fld input[type=text], .fld input[type=date], .fld input[type=number],
.fld input[type=password], .fld input[type=month], .fld select, .fld textarea {
  border: 1px solid var(--btn-border);
  padding: 4px 6px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.fld input:read-only { background: #eef0f6; }
.fld textarea.mail-input { font-family: "Consolas", "Yu Gothic UI", monospace; font-size: 12.5px; line-height: 1.5; }

/* メール本文の入力欄 — 画面幅いっぱいに広く取る */
textarea.mail-body {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 460px;
  resize: vertical;              /* 足りなければ縦に伸ばせる */
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--btn-border);
  background: #fff;
  font-family: "Consolas", "Yu Gothic UI", monospace;
  font-size: 13.5px;
  line-height: 1.7;
}
/* 画面が高いときは、そのぶん本文欄も高くする */
@media (min-height: 900px) { textarea.mail-body { min-height: 620px; } }
@media (max-width: 768px)  { textarea.mail-body { min-height: 320px; font-size: 16px; } }

/* テンプレートの名前・件名も本文と同じ幅にそろえる */
input.tpl-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 5px 8px;
  border: 1px solid var(--btn-border);
  background: #fff;
  font-size: 13.5px;
  font-family: inherit;
}
.fld .mail-count { min-width: 60px; }
.mail-list { font-size: 11.5px; line-height: 1.5; }
.mail-list .cc { color: #555; }
.fld .code-input { width: 90px; }
.fld .name-display { min-width: 220px; background: #eef0f6; padding: 5px 6px; border: 1px solid var(--btn-border); min-height: 26px; }

/* 検索ボタン(虫眼鏡) */
.search-btn {
  padding: 3px 9px;
  background: linear-gradient(to bottom, #fff, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}
.search-btn:hover { background: #fdf6d8; }

/* 汎用ボタン */
.btn {
  padding: 6px 18px;
  background: linear-gradient(to bottom, #ffffff, var(--btn-face) 45%, #d8d8e0);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.25);
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  color: #111;
  display: inline-block;
}
.btn:hover { background: #fdf6d8; }
.btn.primary { background: linear-gradient(to bottom, #dce8ff, #9fbcf0); border-color: var(--accent); }
.btn.danger { background: linear-gradient(to bottom, #ffe0e0, #f0a8a8); border-color: #c06060; }
.btn.print { background: linear-gradient(to bottom, #e0ffe8, #a8e0b8); border-color: #4c9a60; }
.btn.gmail { background: linear-gradient(to bottom, #fde8e6, #f4b8b2); border-color: #c5372c; color: #7a1a12; }
.btn.gmail:hover { background: #fff3d8; }

/* ---------- 一覧テーブル (Excel風ソート対応) ---------- */
/* 一覧の枠。右下をつまんで縦に広げられる (広げた高さは画面ごとに覚える) */
.grid-wrap {
  overflow: auto;
  background: #fff;
  border: 1px solid var(--grid-line);
  resize: vertical;          /* つまみは右下に出る */
  min-height: 90px;
}
/* つまみはブラウザが右下に描く。
   目印を自前で足すと中身の幅・高さを押し広げてしまうので置かない。 */
.grid-wrap.resized { border-color: var(--accent); }
table.grid {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 12.5px;
}
table.grid th {
  background: linear-gradient(to bottom, #eef1fa, #cfd5ea);
  border: 1px solid var(--grid-line);
  padding: 5px 8px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.grid th:hover { background: #fdf6d8; }
table.grid th .sort-mark { color: var(--accent); font-size: 11px; margin-left: 3px; }
/* 並べ替えできる見出し — クリックできることが分かるようにする */
table.grid th.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.grid th.sortable-th:hover { background: #dde5f5; }
table.grid th.sortable-th::after {
  content: '⇅';
  color: #9aa6bd;
  font-size: 10px;
  margin-left: 3px;
}
/* 並べ替え中の列は矢印だけ出す */
table.grid th.sortable-th:has(.sort-mark:not(:empty))::after { content: ''; }
table.grid td {
  border: 1px solid var(--grid-line);
  padding: 4px 8px;
  white-space: nowrap;
  background: #fff;
}
table.grid tbody tr:nth-child(even) td { background: #eef1fa; }
table.grid tbody tr:hover td { background: #fdf6d8; }
table.grid tbody tr.selected td { background: #cce0ff; }
table.grid td.num { text-align: right; }
table.grid tfoot td { border: 1px solid var(--grid-line); padding: 5px 8px; background: #f5f5fa; font-weight: bold; white-space: nowrap; }
table.grid tfoot td.num { text-align: right; }

/* ---------- 検索モーダル ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-win {
  width: 760px;
  max-width: 94vw;
  max-height: 84vh;
  background: var(--panel-light);
  border: 2px solid var(--navy);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 16px rgba(0,0,0,.5);
}
.modal-title {
  background: linear-gradient(to bottom, #3a4a8c, var(--navy));
  color: #fff;
  font-weight: bold;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title .close-x { cursor: pointer; padding: 0 6px; font-size: 15px; }
.modal-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.modal-search-row { display: flex; gap: 6px; }
.modal-search-row input { flex: 1; border: 1px solid var(--btn-border); padding: 6px 8px; font-size: 14px; }
.modal-result { flex: 1; overflow: auto; border: 1px solid var(--grid-line); background: #fff; min-height: 260px; max-height: 55vh; }
.modal-hint { color: #555; font-size: 11.5px; }

/* ---------- 明細グリッド ---------- */
.detail-grid input, .detail-grid select {
  width: 100%;
  border: 1px solid #ccc;
  padding: 3px 4px;
  font-size: 12.5px;
  font-family: inherit;
}
.detail-grid input.num { text-align: right; }
.detail-grid td.rowno { text-align: center; background: #eef1fa; }
.detail-grid tr.linked td.rowno { background: #d8f0d8; }

/* ---------- ツールバー・ページャ ---------- */
.toolbar { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.pager { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.status-bar {
  background: var(--navy);
  color: #9fd0ff;
  padding: 3px 12px;
  font-size: 11.5px;
  text-align: right;
}
.total-box { background: #fff; border: 1px solid var(--btn-border); padding: 4px 12px; font-weight: bold; text-align: right; min-width: 120px; }
.err-msg { color: var(--red); font-weight: bold; }
.ok-msg { color: var(--green); font-weight: bold; }
/* ---------- クロス集計 ---------- */
table.grid.cross td.num { white-space: nowrap; }
table.grid.cross .plan { color: #c8760a; font-size: 11px; margin-left: 4px; }
/* 受注実績は予定の下に緑色で段を分けて出す (横に並べると桁が繋がって読めないため) */
table.grid.cross .act  { display: block; color: #1a7f37; font-size: 11px; }
table.grid.cross tbody td:first-child { position: sticky; left: 0; z-index: 1; }
table.grid.cross tfoot td:first-child { position: sticky; left: 0; }
table.grid.cross th.ym-now { background: #e8eefb; }
table.grid.cross td.ym-now { background: #f6f8fd; }
table.grid.cross tr.row-juchu td { background: #f2f8f3; }
.act-legend { color: #1a7f37; font-weight: bold; }
.chk-label { display: inline-flex; align-items: center; gap: 5px; background: #fff8dc;
             border: 1px solid #c8a020; padding: 5px 10px; border-radius: 3px; }

/* ---------- 重複整理 ---------- */
.dup-group { border-left: 4px solid var(--red); }
.dup-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dup-head .dup-amt { font-weight: bold; font-size: 15px; color: var(--navy); }
.dup-pick { display: flex; gap: 6px; align-items: center; }
.dup-pick .btn { padding: 3px 8px; font-size: 11px; }
.dup-pick .dup-stat { min-width: 210px; text-align: right; }

/* ---------- 通帳取込 ---------- */
table.grid tr.row-done td { background: #f2f7f2; color: #555; }
table.grid tr.row-skip td { background: #f2f2f2; color: #999; }
table.grid tr.row-done input, table.grid tr.row-skip input { background: transparent; border-color: #ddd; }

/* ---------- 経費精算 (レシート撮影) ---------- */
.keihi-capture { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.keihi-shot {
  flex: 1; min-width: 260px; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--btn-border); border-radius: 8px; background: #fff;
  padding: 26px 16px; cursor: pointer; text-align: center;
}
.keihi-shot:hover { background: #fbfbff; border-color: var(--accent); }
.keihi-shot-icon { font-size: 44px; line-height: 1; }
.keihi-shot-text { font-weight: bold; color: #333; }
.keihi-shot-text small { font-weight: normal; color: #777; }
.keihi-file {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--btn-border); border-radius: 6px; background: #fff;
  padding: 10px 16px; cursor: pointer; white-space: nowrap;
}
.keihi-file:hover { background: #f2f2f8; }
.keihi-preview { margin-top: 12px; }
.keihi-preview img { max-width: 320px; max-height: 320px; border: 1px solid var(--btn-border); }
.keihi-cols { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.keihi-shot-box { width: 320px; flex: 0 0 auto; }
.keihi-img { max-width: 280px; max-height: 420px; border: 1px solid var(--btn-border); }
.keihi-ocr {
  max-height: 260px; overflow: auto; background: #f7f7fa; border: 1px solid var(--btn-border);
  padding: 6px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; margin: 6px 0 0;
}
.keihi-sum { display: flex; gap: 24px; flex-wrap: wrap; }

/* スマホ・タブレットからの利用 (レシート撮影) */
@media (max-width: 820px) {
  .app-frame { min-width: 0; }
  .app-header, .side-menu, .memo-box, .info-box { display: none; }
  .app-body { display: block; }
  .content { width: 100%; }
  .content-inner { padding: 8px; }
  .keihi-cols { display: block; }
  .keihi-shot-box { width: auto; }
  .keihi-img, .keihi-preview img { max-width: 100%; }
  .frm-row { flex-wrap: wrap; }
  .fld { margin-bottom: 6px; }
  .fld input[type=text], .fld input[type=number], .fld select { font-size: 16px; }  /* iOSの自動ズーム防止 */
  .toolbar { flex-wrap: wrap; }
  .btn { padding: 10px 14px; }
  /* 画面の狭い端末ではつまみを出さない (指では操作できないため) */
  .grid-wrap { max-height: none; resize: none; }
}

/* ---------- 交通費 (経路・距離) ---------- */
.kt-result {
  margin-top: 8px; padding: 8px 10px; border: 1px solid var(--btn-border);
  background: #fff; border-radius: 4px; line-height: 1.7;
}
.kt-result.ok { background: #f2f8f2; border-color: #6aa86a; }
.kt-result.err { background: #fdf3f2; border-color: #c88a84; }
.kt-result .kt-leg { font-size: 11.5px; color: #555; margin-left: 8px; }

/* ---------- 会計 (仕訳・試算表・決算) ---------- */
table.grid th.jl-dr, table.grid td.jl-dr { background: #f4f7ff; }
table.grid th.jl-cr, table.grid td.jl-cr { background: #fff7f2; }
table.grid tr.tb-group td { background: #e4e6f0; font-weight: bold; }
table.grid tr.tb-sub td { background: #f2f4fa; font-weight: bold; border-top: 1px solid var(--grid-line); }
table.grid.fin td.fin-item { padding-left: 22px; }
table.grid.fin tr.fin-chu td { background: #f2f4fa; font-weight: bold; }
table.grid.fin tr.fin-total td { background: #e8ecf8; font-weight: bold;
  border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.kessan-cols { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.kaikei-auto { display: flex; flex-direction: column; gap: 5px; }
.kaikei-auto .fld > label { background: #4a5a9c; }
#jGrid input[type=text], #jGrid input[type=number], #jGrid input[type=date] { border: 1px solid #c0c4d8; }
#jGrid .j-name { display: inline-block; min-width: 130px; color: #333; font-size: 12px; }
#jGrid tbody tr:focus-within td { background: #fffbe6; }

.kg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.kg-head .btn { padding: 2px 8px; font-size: 11px; }
table.grid tr.row-sel td { background: #fff8dc; }

.ro-badge {
  background: #ffdf7f; color: #6a4b00; border: 1px solid #c8a020;
  border-radius: 3px; padding: 2px 10px; font-size: 11.5px; font-weight: bold;
  margin-right: 8px; white-space: nowrap;
}

/* ---------- 社印プレビュー ---------- */
.seal-preview {
  border: 1px solid var(--btn-border);
  background: repeating-conic-gradient(#f4f4f8 0% 25%, #fff 0% 50%) 50% / 12px 12px;
  padding: 8px;
  min-width: 120px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 添付ファイル ---------- */
.attach-drop {
  border: 2px dashed var(--btn-border);
  background: #fff;
  padding: 12px;
  text-align: center;
  border-radius: 4px;
  color: #555;
}
.attach-drop.over { border-color: var(--accent); background: #eef3ff; color: var(--accent); font-weight: bold; }
.attach-drop .btn { margin: 0 6px; }

/* ---------- エラーの対処ガイド ---------- */
.err-help { border: 2px solid var(--red); background: #fff; margin-bottom: 12px; }
.err-help .eh-title {
  background: linear-gradient(to bottom, #d94a3a, #b52d1e);
  color: #fff;
  font-weight: bold;
  padding: 6px 10px;
  font-size: 13.5px;
}
.err-help .eh-body { padding: 10px 12px; }
.err-help .eh-detail { line-height: 1.7; }

/* ---------- 一括処理 (チェックボックス選択) ---------- */
.bulk-bar {
  background: linear-gradient(to bottom, #eef1fa, #dce2f4);
  border: 1px solid var(--grid-line);
  padding: 6px 10px;
  margin-bottom: 8px;
}
.bulk-bar .bulk-count { font-weight: bold; }
.bulk-bar .bulk-count b { color: var(--accent); font-size: 15px; }
table.grid tbody tr.selected td { background: #cce0ff; }
.bulk-result {
  border: 2px solid var(--navy);
  background: var(--panel-light);
  margin-top: 10px;
  padding: 0 0 8px;
}
.bulk-result .bulk-head {
  background: linear-gradient(to bottom, #3a4a8c, var(--navy));
  color: #fff;
  padding: 6px 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.bulk-result .bulk-head span { font-size: 12.5px; }
.bulk-result .bulk-progress { height: 8px; background: #fff; border-bottom: 1px solid var(--grid-line); }
.bulk-result .bulk-progress > div { height: 100%; width: 0; background: linear-gradient(to right, #4a6ac0, #2b4bb5); transition: width .25s; }
.bulk-result .grid-wrap { border: none; }
.bulk-result .toolbar { padding: 0 10px; margin-bottom: 0; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: bold; border: 1px solid; }
.badge.open { background: #fff3d0; border-color: #c8a020; color: #7a5c00; }
.badge.done { background: #dff0df; border-color: #4c9a60; color: #14601f; }
.badge.part { background: #e0e8ff; border-color: #4a6ac0; color: #1a2a6c; }
.badge.cancel { background: #fde8e6; border-color: #c5372c; color: #7a1a12; }

/* ---------- 給与明細の入力 ---------- */
table.grid.kyuyo-tbl th { width: 46%; text-align: left; font-weight: normal; background: #eef1f7; }
table.grid.kyuyo-tbl td { padding: 2px 4px; }
table.grid.kyuyo-tbl input[readonly] { background: #eef4ff; font-weight: bold; }

/* ---------- 自社カレンダ ---------- */
.cal-wd { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.cal-year { display: flex; flex-wrap: wrap; gap: 10px; }
.cal-month { background: #fff; border: 1px solid var(--grid-line); padding: 6px; min-width: 232px; flex: 1 1 232px; }
.cal-mhead { font-weight: bold; text-align: center; background: var(--navy); color: #fff; padding: 3px; margin-bottom: 4px; }
table.cal-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.cal-tbl th { font-size: 11px; padding: 2px 0; background: #eef1f7; border: 1px solid #ccd;
                   cursor: pointer; user-select: none; }
table.cal-tbl th:hover { background: #fdf6d8; }
table.cal-tbl th.sun { color: #b52d1e; }
table.cal-tbl th.sat { color: #1a4fa0; }
td.cal-empty { border: 1px solid #e6e8f0; background: #fafafc; height: 30px; }
td.cal-day { border: 1px solid #ccd; height: 30px; vertical-align: top; cursor: pointer;
             padding: 1px 2px; user-select: none; line-height: 1.15; }
td.cal-day .d { font-size: 12px; font-weight: bold; }
td.cal-day .d.sun { color: #b52d1e; }
td.cal-day .d.sat { color: #1a4fa0; }
td.cal-day .nm { display: block; font-size: 8.5px; color: #555; overflow: hidden; white-space: nowrap; }
td.cal-day.k0 { background: #fff; }
td.cal-day.k1 { background: #ffe3e3; }
td.cal-day.k2 { background: #fff3d6; }
td.cal-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
td.cal-day:hover { filter: brightness(0.94); }
.cal-legend { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.cal-legend .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #ccd; }
.cal-legend .sw.k0 { background: #fff; }
.cal-legend .sw.k1 { background: #ffe3e3; }
.cal-legend .sw.k2 { background: #fff3d6; }
@media print { .cal-month { break-inside: avoid; } }