/* [REF] HTML: login/header/admin/modal、board.jsのgroup-heading/data-group-accentと行状態;
   JS: services/appearance.jsのhtml[data-appearance]; STATE: 表/カード/各テーマ;
   SPLIT: LAST。画面専用で旧CSSの順序と印刷・行事の業務色を維持する。 */
:root {
  --ui-canvas: #eef5f5; --ui-surface: #ffffff; --ui-soft: #e4f1ee;
  --ui-ink: #193831; --ui-muted: #4d6862; --ui-line: #bccfc9;
  --ui-accent: #166c5c; --ui-accent-hover: #105346; --ui-heading-font: system-ui, sans-serif;
  --ui-button-face: linear-gradient(#ffffff, #f1f8f5);
  --ui-header-face: linear-gradient(110deg, #ffffff, #eaf6f1);
  --ui-shadow: 0 12px 32px rgb(28 59 49 / 10%); --ui-radius: 14px;
  --ui-danger: #a72836; --ui-danger-soft: #fff1f2;
  --ui-menu-surface: #f8fcfa; --ui-section-surface: #ffffff;
  --row-line-width: 4px; --row-radius: 10px; --row-elevation: 0 0 0 transparent;
  --status-here-bg: #e3f4e9; --status-here-line: #23724b;
  --status-out-bg: #fff0d6; --status-out-line: #a35b0b;
  --status-meeting-bg: #e4edff; --status-meeting-line: #365ca9;
  --status-remote-bg: #ede8fc; --status-remote-line: #7154a3;
  --status-trip-bg: #def3ed; --status-trip-line: #167568;
  --status-training-bg: #f8f2d5; --status-training-line: #79691a;
  --status-health-bg: #ddf2f7; --status-health-line: #236d85;
  --status-coadoc-bg: #f9e4ef; --status-coadoc-line: #995075;
  --status-home-bg: #e8edf0; --status-home-line: #536375;
  --status-off-bg: #fbe6e6; --status-off-line: #a13f46;
  --group-0: #237564; --group-1: #386aab; --group-2: #8751a4;
  --group-3: #a05e28; --group-4: #a14768; --group-5: #577525;
  --line: var(--ui-line); --bg: var(--ui-surface); --color-border: var(--ui-line);
  --color-text-muted: var(--ui-muted); --color-header-bg: var(--ui-surface);
}
:root[data-appearance="classic"] {
  --ui-canvas: #eeeae1; --ui-surface: #fffdf7; --ui-soft: #e8e7dd;
  --ui-ink: #253249; --ui-muted: #566071; --ui-line: #bcb9ac;
  --ui-accent: #304a6a; --ui-accent-hover: #243951;
  --ui-heading-font: Georgia, 'Yu Mincho', serif;
  --ui-button-face: linear-gradient(#fffdf7, #eeece3);
  --ui-header-face: linear-gradient(110deg, #fffdf7, #ece8dc);
  --ui-shadow: 0 12px 32px rgb(54 49 32 / 12%); --ui-radius: 8px;
  --status-here-bg: #e7eedf; --status-out-bg: #f7ebd2; --status-meeting-bg: #e3e9f1;
  --status-remote-bg: #ece5ef; --status-trip-bg: #e1eee5; --status-training-bg: #f3edd8;
  --status-health-bg: #e1eced; --status-coadoc-bg: #f0e1e7; --status-home-bg: #e6e6e1; --status-off-bg: #f2e0dd;
  --ui-menu-surface: #f8f4e9; --ui-section-surface: #fffdf7; --row-line-width: 3px; --row-radius: 5px;
  --status-here-line: #4f6741; --status-out-line: #89622a; --status-meeting-line: #435e80;
  --status-remote-line: #715d83; --status-trip-line: #3c6d59; --status-training-line: #7c702d;
  --status-health-line: #3e6874; --status-coadoc-line: #89546c; --status-home-line: #5d615d; --status-off-line: #8b4843;
  --group-0: #40583f; --group-1: #425b7a; --group-2: #715b7f; --group-3: #805b30; --group-4: #875468; --group-5: #64632c;
}
:root[data-appearance="metallic"] {
  --ui-canvas: #e3e9ef; --ui-surface: #f9fbfd; --ui-soft: #dfe7ef;
  --ui-ink: #263849; --ui-muted: #506478; --ui-line: #afbecb;
  --ui-accent: #365e7c; --ui-accent-hover: #284a64;
  --ui-button-face: linear-gradient(180deg, #ffffff, #dce4eb);
  --ui-header-face: linear-gradient(115deg, #fefefe, #d2dce6 65%, #eef2f6);
  --ui-shadow: 0 12px 32px rgb(28 45 62 / 15%); --ui-radius: 10px;
  --status-here-bg: #deeee6; --status-out-bg: #f3e9d9; --status-meeting-bg: #dce7f4;
  --status-remote-bg: #e7e2f1; --status-trip-bg: #dcece9; --status-training-bg: #eeeacf;
  --status-health-bg: #dcedf1; --status-coadoc-bg: #efdfeb; --status-home-bg: #dce3ea; --status-off-bg: #f0dfe3;
  --ui-menu-surface: #eaf0f5; --ui-section-surface: #f7fafc; --row-line-width: 3px; --row-radius: 7px;
  --row-elevation: 0 2px 3px rgb(36 58 79 / 12%);
  --status-here-line: #356756; --status-out-line: #876440; --status-meeting-line: #45678a;
  --status-remote-line: #685b88; --status-trip-line: #3d6c69; --status-training-line: #727035;
  --status-health-line: #3d6e80; --status-coadoc-line: #865d7b; --status-home-line: #526479; --status-off-line: #8e5667;
  --group-0: #356756; --group-1: #45678a; --group-2: #685b88; --group-3: #876440; --group-4: #865d7b; --group-5: #727035;
}
/* 新しい3種もメニューの面・状態の面/ライン・グループ色を一組で定義する。 */
:root[data-appearance="forest"] {
  --ui-canvas: #e9eee4; --ui-surface: #fbfcf6; --ui-soft: #dee8d5; --ui-ink: #283e2c; --ui-muted: #506451; --ui-line: #b5c4ad;
  --ui-accent: #355e3b; --ui-accent-hover: #26472c; --ui-menu-surface: #edf2e5; --ui-section-surface: #f8faef;
  --ui-button-face: linear-gradient(#fafcf4, #e2ebda); --ui-header-face: linear-gradient(110deg, #f8faef, #d4e1c8);
  --ui-shadow: 0 10px 28px rgb(42 68 33 / 12%); --ui-radius: 12px; --row-radius: 12px;
  --status-here-bg: #dcebd7; --status-here-line: #416b37; --status-out-bg: #f4e5c7; --status-out-line: #8b632e;
  --status-meeting-bg: #e0e8ef; --status-meeting-line: #466880; --status-remote-bg: #e8e2ee; --status-remote-line: #746080;
  --status-trip-bg: #d9ebe2; --status-trip-line: #396e58; --status-training-bg: #edebcf; --status-training-line: #737039;
  --status-health-bg: #deeceb; --status-health-line: #426f70; --status-coadoc-bg: #eee0e7; --status-coadoc-line: #825b6e;
  --status-home-bg: #e1e6dc; --status-home-line: #56634e; --status-off-bg: #efdfd6; --status-off-line: #8a5542;
  --group-0: #416b37; --group-1: #466880; --group-2: #746080; --group-3: #8b632e; --group-4: #825b6e; --group-5: #737039;
}
:root[data-appearance="sakura"] {
  --ui-canvas: #f6edf1; --ui-surface: #fffcfd; --ui-soft: #f4e0e9; --ui-ink: #4c3143; --ui-muted: #795769; --ui-line: #d7b9c9;
  --ui-accent: #964467; --ui-accent-hover: #78334f; --ui-menu-surface: #fcf2f6; --ui-section-surface: #fffafb;
  --ui-button-face: linear-gradient(#fffafb, #f5e4ec); --ui-header-face: linear-gradient(110deg, #fffafb, #f2dbe7);
  --ui-shadow: 0 10px 30px rgb(123 48 81 / 10%); --ui-radius: 18px; --row-radius: 16px; --row-line-width: 3px;
  --status-here-bg: #e6f0e6; --status-here-line: #4e7854; --status-out-bg: #fbe7d7; --status-out-line: #a56539;
  --status-meeting-bg: #e8ecfa; --status-meeting-line: #666daa; --status-remote-bg: #f0e5f6; --status-remote-line: #9368a9;
  --status-trip-bg: #e0f0eb; --status-trip-line: #477e71; --status-training-bg: #f8efdb; --status-training-line: #8e7439;
  --status-health-bg: #e4f0f6; --status-health-line: #5d8195; --status-coadoc-bg: #f9dfed; --status-coadoc-line: #a95882;
  --status-home-bg: #eee7ed; --status-home-line: #7a6579; --status-off-bg: #f9e0e2; --status-off-line: #a85965;
  --group-0: #964467; --group-1: #596da0; --group-2: #82549c; --group-3: #956039; --group-4: #9e4d73; --group-5: #537651;
}
:root[data-appearance="monochrome"] {
  --ui-canvas: #ededed; --ui-surface: #ffffff; --ui-soft: #e5e5e5; --ui-ink: #222222; --ui-muted: #555555; --ui-line: #aaaaaa;
  --ui-accent: #333333; --ui-accent-hover: #171717; --ui-menu-surface: #f2f2f2; --ui-section-surface: #ffffff;
  --ui-button-face: #ffffff; --ui-header-face: #f5f5f5; --ui-shadow: 0 0 0 transparent; --ui-radius: 4px; --row-radius: 3px; --row-line-width: 3px;
  --ui-danger: #333333; --ui-danger-soft: #e5e5e5;
  --status-here-bg: #fafafa; --status-here-line: #404040; --status-out-bg: #e8e8e8; --status-out-line: #515151;
  --status-meeting-bg: #e1e1e1; --status-meeting-line: #424242; --status-remote-bg: #f0f0f0; --status-remote-line: #626262;
  --status-trip-bg: #ededed; --status-trip-line: #484848; --status-training-bg: #e5e5e5; --status-training-line: #5b5b5b;
  --status-health-bg: #f5f5f5; --status-health-line: #686868; --status-coadoc-bg: #dddddd; --status-coadoc-line: #3b3b3b;
  --status-home-bg: #d8d8d8; --status-home-line: #565656; --status-off-bg: #d3d3d3; --status-off-line: #303030;
  --group-0: #303030; --group-1: #484848; --group-2: #5b5b5b; --group-3: #393939; --group-4: #515151; --group-5: #626262;
}
body { background: var(--ui-canvas); color: var(--ui-ink); font-family: system-ui, 'Yu Gothic', sans-serif; }
body > header {
  background: var(--ui-header-face); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  padding: 12px; gap: 8px; box-shadow: var(--ui-shadow); margin-bottom: 20px;
}
body > header button[class], .appearance-dialog button, body .admin-card button.btn-pill,
body .admin-row button, body .admin-subsection button, body .btn-pill,
body #toolsModalClose, body #manualClose, body #eventClose {
  border-radius: 8px; border: 1px solid var(--ui-line); background: var(--ui-button-face);
  color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 650; padding: 9px 14px; min-height: 44px;
}
body > header button:hover, .appearance-dialog button:hover, body .btn-pill:hover {
  background: var(--ui-soft); border-color: var(--ui-accent); transform: none;
}
body > header button.title-btn { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); text-align: left; overflow-wrap: anywhere; max-width: 100%; }
body > header button.title-btn:hover { background: var(--ui-accent-hover); }
body > header button.logout-btn { color: var(--ui-danger); background: var(--ui-danger-soft); }
body > header #nameFilter, body > header #statusFilter {
  min-height: 44px; border-radius: 8px; background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink);
}
body .grp-menu {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow); max-width: min(420px, calc(100vw - 48px));
}
body .grp-menu button.grp-item { background: var(--ui-button-face); border-left: 5px solid var(--group-accent, var(--ui-accent)); border-radius: 8px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
body .grp-menu button.grp-item:hover { background: var(--ui-soft); }
body .admin-card, body .manual-card, body .member-edit-card, body .contact-dialog {
  background: var(--ui-menu-surface); color: var(--ui-ink); border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius); box-shadow: var(--ui-shadow);
}
body .admin-card-header, body .admin-tabs, body .notice-modal-header, body .tools-modal-header {
  background: var(--ui-header-face); border-color: var(--ui-line);
}
body .manual-card > div:first-child { background: var(--ui-header-face); border-color: var(--ui-line); }
body .admin-box, body .tools-item, body .notice-item, body .admin-subsection { background: var(--ui-section-surface); border-color: var(--ui-line); border-radius: var(--ui-radius); }
body .admin-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
body .tab-btn, body .manual-tab-btn { color: var(--ui-ink); background: var(--ui-button-face); border-color: var(--ui-line); border-radius: 8px; min-height: 44px; }
body .tab-btn.active, body .manual-tab-btn.active { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); }
body .admin-row button.btn-primary, body .admin-subsection button.btn-primary,
body .admin-row button.btn-success, body .admin-subsection button.btn-success {
  background: var(--ui-accent); color: #fff; border-color: var(--ui-accent);
}
body #btnImport, body #btnRenameOffice, body #btnSetPw { background: var(--ui-soft); color: var(--ui-accent); border-color: var(--ui-line); }
body .admin-row button.btn-danger, body .admin-subsection button.btn-danger { color: var(--ui-danger); background: var(--ui-danger-soft); }
body .admin-modal { background: rgb(22 35 45 / 42%); }
body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body select, body textarea {
  color: var(--ui-ink); background-color: var(--ui-surface); border-color: var(--ui-line);
}
body .admin-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border: 1px solid var(--ui-line); border-radius: 8px; min-height: 40px; padding: 8px; box-sizing: border-box;
}
body a { color: var(--ui-accent); }
body .login {
  background: radial-gradient(ellipse at 20% 15%, var(--ui-soft), transparent 60%), var(--ui-canvas);
  backdrop-filter: none; padding: 20px; overflow-y: auto; align-items: safe center;
}
#loginForm.card {
  box-sizing: border-box; background: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-line);
  border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); gap: 16px; max-width: 440px;
}
#loginForm.card h2, body .admin-card h3 { color: var(--ui-ink); font-family: var(--ui-heading-font); }
#loginForm.card p { color: var(--ui-muted); }
.app-eyebrow { color: var(--ui-accent); text-align: center; font-size: 12px; font-weight: 750; letter-spacing: .16em; }
.login-field { display: block; font-size: 13px; font-weight: 650; margin: 14px 0 6px; }
#loginForm.card input { min-height: 44px; border: 1px solid var(--ui-line); border-radius: 8px; width: 100%; padding: 10px 12px; font: inherit; box-sizing: border-box; }
#loginForm.card a { color: var(--ui-accent); }
#loginMsg:empty { display: none; }
#loginForm.card #btnSimpleLogin, #loginForm.card #btnAuthSignup, #loginForm.card #btnCreateOffice {
  width: 100%; min-height: 44px; background: var(--ui-accent); color: #fff; border-color: var(--ui-accent);
}
#loginForm.card #btnSimpleLogin:hover { background: var(--ui-accent-hover); transform: none; }
.appearance-dialog {
  box-sizing: border-box; color: var(--ui-ink); background: var(--ui-surface); border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 24px); overflow: auto; padding: 24px;
}
.appearance-dialog::backdrop { background: rgb(22 35 45 / 42%); }
.appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appearance-heading h2 { font: 700 22px var(--ui-heading-font); margin: 0; }
.appearance-help { color: var(--ui-muted); font-size: 14px; line-height: 1.7; }
.appearance-options { border: 0; padding: 0; margin: 20px 0; min-width: 0; }
.appearance-options legend { margin-bottom: 8px; font-weight: 650; }
#appearanceChoices { display: grid; gap: 10px; }
.appearance-choice {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px;
  border: 1px solid var(--ui-line); border-radius: 10px; cursor: pointer; background: var(--ui-surface);
}
.appearance-choice:has(:checked) { border: 2px solid var(--ui-accent); padding: 11px; background: var(--ui-soft); }
.appearance-choice input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--ui-accent); }
.appearance-choice strong, .appearance-choice small { display: block; }
.appearance-choice small { color: var(--ui-muted); line-height: 1.6; }
.appearance-swatch { flex: 0 0 44px; height: 44px; border-radius: 8px; margin-left: auto; border: 1px solid var(--ui-line); }
[data-preset="pastel"] .appearance-swatch { background: linear-gradient(135deg, #e4f1ee 60%, #166c5c 60%); }
[data-preset="classic"] .appearance-swatch { background: linear-gradient(135deg, #eeeae1 60%, #304a6a 60%); }
[data-preset="metallic"] .appearance-swatch { background: linear-gradient(135deg, #ffffff, #b8c6d3 60%, #365e7c 60%); }
[data-preset="forest"] .appearance-swatch { background: linear-gradient(135deg, #dee8d5 60%, #355e3b 60%); }
[data-preset="sakura"] .appearance-swatch { background: linear-gradient(135deg, #f4e0e9 60%, #964467 60%); }
[data-preset="monochrome"] .appearance-swatch { background: linear-gradient(135deg, #ededed 60%, #333333 60%); }
[data-appearance-message] { font-size: 13px; line-height: 1.6; color: var(--ui-muted); overflow-wrap: anywhere; }
[data-appearance-message]:empty { display: none; }
/* グループは帯と番号、状態はカード/行の背景と左線。双方の色を独立させる。 */
[data-group-accent="0"] { --group-accent: var(--group-0); }
[data-group-accent="1"] { --group-accent: var(--group-1); }
[data-group-accent="2"] { --group-accent: var(--group-2); }
[data-group-accent="3"] { --group-accent: var(--group-3); }
[data-group-accent="4"] { --group-accent: var(--group-4); }
[data-group-accent="5"] { --group-accent: var(--group-5); }
#board .panel { background: var(--ui-surface); border-radius: var(--ui-radius); border-color: var(--ui-line); padding: 8px; }
#board .group-heading {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 12px;
  background: var(--ui-soft); border-left: 5px solid var(--group-accent); border-radius: 8px; font: 700 17px var(--ui-heading-font);
}
.group-marker { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 6px; background: var(--group-accent); color: #fff; font: 700 13px system-ui; }
.group-name { min-width: 0; overflow-wrap: anywhere; }
.group-count { margin-left: auto; font: 500 13px system-ui; color: var(--ui-muted); white-space: nowrap; }
#board tbody tr { --row-bg: var(--ui-surface); --row-line: var(--ui-line); }
#board tbody tr.st-here { --row-bg: var(--status-here-bg); --row-line: var(--status-here-line); }
#board tbody tr.st-out { --row-bg: var(--status-out-bg); --row-line: var(--status-out-line); }
#board tbody tr.st-meeting { --row-bg: var(--status-meeting-bg); --row-line: var(--status-meeting-line); }
#board tbody tr.st-remote { --row-bg: var(--status-remote-bg); --row-line: var(--status-remote-line); }
#board tbody tr.st-trip { --row-bg: var(--status-trip-bg); --row-line: var(--status-trip-line); }
#board tbody tr.st-training { --row-bg: var(--status-training-bg); --row-line: var(--status-training-line); }
#board tbody tr.st-health { --row-bg: var(--status-health-bg); --row-line: var(--status-health-line); }
#board tbody tr.st-coadoc { --row-bg: var(--status-coadoc-bg); --row-line: var(--status-coadoc-line); }
#board tbody tr.st-home { --row-bg: var(--status-home-bg); --row-line: var(--status-home-line); }
#board tbody tr.st-off { --row-bg: var(--status-off-bg); --row-line: var(--status-off-line); }
#board tbody tr, #board.force-cards tbody tr {
  background: var(--row-bg) !important; box-shadow: inset var(--row-line-width) 0 0 var(--row-line), var(--row-elevation); color: var(--ui-ink);
}
#board.force-cards tbody tr { border-radius: var(--row-radius) !important; }
#board tbody td { background-color: transparent; }
#board tbody td.status select { border-color: var(--row-line); font-weight: 650; }
#board thead th { background: var(--ui-soft); color: var(--ui-ink); }
@media (max-width: 600px) {
  body > header { padding: 8px; gap: 6px; }
  body > header button { padding: 9px 10px; }
  #loginForm.card { padding: 24px; }
  .appearance-dialog { padding: 18px; }
  .appearance-swatch { flex-basis: 32px; height: 36px; }
  #board .panel { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* [REF] HTML: adminModal全作業領域; JS: admin.jsのナビ/動的編集DOM; STATE: active/hidden;
   LAYER: 既存管理dialog内; SPLIT: LAST。旧固定色を各外観の共通トークンに統合する。 */
#adminModal {
  --bg-secondary: var(--ui-soft); --bg-white: var(--ui-surface); --border: var(--ui-line); --accent: var(--ui-accent);
}
#adminModal .admin-card-body { background: var(--ui-menu-surface); overflow-y: auto; }
#adminModal .tab-panel.active { flex: 0 0 auto; min-height: 0; overflow: visible; }
#adminModal .admin-card-header h3 { margin: 0; }
#adminModal .admin-tabs { padding: 0; margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.admin-areas, #adminModal .tab-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-areas { margin: 0; grid-column: 1 / -1; }
#adminModal .tab-buttons { margin: 0; }
#adminModal .admin-reload { margin: 0; padding: 6px 10px; font-size: 12px; }
#adminModal .admin-area-btn { background: var(--ui-button-face); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 10px 14px; min-height: 44px; font: 650 14px var(--ui-heading-font); }
#adminModal .admin-area-btn.active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
#adminModal .tab-btn { padding: 6px 12px; min-height: 40px; font-size: 13px; }
#adminModal .tab-btn.active { color: var(--ui-accent); background: var(--ui-soft); border-color: var(--ui-accent); }
#adminModal h4, #adminModal h5, #adminModal label { color: var(--ui-ink); }
#adminModal .admin-note, #adminModal .vacation-helper, #adminModal .member-edit-mode, #adminModal .u-text-gray { color: var(--ui-muted); }
#adminModal .u-text-red { color: var(--ui-danger); }
#adminModal .notices-manager-toolbar, #adminModal .tools-manager-toolbar { background: transparent; }
#adminModal .notices-manager-scroll, #adminModal .tools-manager-scroll { overflow: visible; }
#adminModal .notices-manager-info, #adminModal .tools-manager-info, #adminModal .auto-clear-fields-container,
#adminModal .csv-file-selection, #adminModal .member-filter-row { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-ink); }
#adminModal .csv-file-selection[data-selected="true"] { color: var(--ui-accent); border-color: var(--ui-accent); }
#adminModal .notice-edit-item, #adminModal .tool-edit-item, #adminModal .group-order-item,
#adminModal .notice-visibility-toggle, #adminModal .tool-visibility-toggle {
  background: var(--ui-section-surface); color: var(--ui-ink); border-color: var(--ui-line); border-radius: var(--ui-radius);
}
#adminModal .notice-edit-item.hidden-notice, #adminModal .tool-edit-item.hidden-tool { background: var(--ui-soft); border-style: dashed; }
#adminModal .notice-edit-item.dragging, #adminModal .tool-edit-item.dragging { background: var(--ui-soft); border-color: var(--ui-accent); }
#adminModal .notice-edit-item.drag-over, #adminModal .tool-edit-item.drag-over { border-top-color: var(--ui-accent); }
#adminModal .notice-edit-item:hover, #adminModal .tool-edit-item:hover { border-color: var(--ui-accent); box-shadow: var(--ui-shadow); }
#adminModal .notice-edit-handle, #adminModal .tool-edit-handle { color: var(--ui-muted); }
#adminModal .unified-column-item, #adminModal .column-order-item { background: var(--ui-section-surface) !important; border-color: var(--ui-line); }
#adminModal .column-order-label, #adminModal .column-width-label, #adminModal .column-toggle-label { color: var(--ui-ink); }
#adminModal .column-order-badge { background: var(--ui-soft); color: var(--ui-accent); border-color: var(--ui-line); }
#adminModal .group-order-label, #adminModal .member-order-num { color: var(--ui-ink); }
#adminModal .group-header-row td { background: var(--ui-soft); color: var(--ui-ink); }
#adminModal .member-table, #adminModal .admin-table { color: var(--ui-ink); background: var(--ui-section-surface); }
#adminModal .member-table-wrap { background: var(--ui-section-surface); }
#adminModal :is(.member-table, .admin-table) th { background: var(--ui-soft); color: var(--ui-ink); border-color: var(--ui-line); }
#adminModal :is(.member-table, .admin-table) td { border-color: var(--ui-line); }
#adminModal :is(.member-table, .admin-table) tr:hover { background: var(--ui-soft); }
#adminModal button { font-family: inherit; border-radius: 8px; min-height: 40px; }
#adminModal button:not(.admin-area-btn):not(.tab-btn) { background: var(--ui-button-face); color: var(--ui-ink); border: 1px solid var(--ui-line); }
#adminModal button.btn-primary, #adminModal button.btn-success { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); }
#adminModal button.btn-danger, #adminModal button.btn-remove-notice, #adminModal button.btn-remove-tool,
#adminModal button.btn-group-del { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-danger); }
#adminModal button:hover:not(:disabled):not(.active) { border-color: var(--ui-accent); box-shadow: none; transform: none; }
#adminModal button:disabled { opacity: .45; cursor: default; }
#adminModal input[type="checkbox"], #adminModal input[type="radio"] { accent-color: var(--ui-accent); flex: 0 0 auto; }
#adminModal select, #adminModal textarea { min-width: 0; max-width: 100%; border-radius: 8px; }
#adminModal textarea { box-sizing: border-box; }
#adminModal .admin-row { flex-wrap: wrap; }
#adminModal .admin-toolbar { flex-wrap: wrap; border-color: var(--ui-line); }
#adminModal .admin-toolbar-actions { flex-wrap: wrap; }
#adminModal .admin-row input { min-width: 0; }
#adminModal .notice-edit-controls, #adminModal .tool-edit-controls { flex-wrap: wrap; gap: 6px; }
#adminModal .notice-edit-row, #adminModal .tool-edit-row { min-width: 0; margin-left: 0; }
#adminModal .notice-edit-row input, #adminModal .tool-edit-row input { min-width: 0; max-width: 100%; }
#adminModal .btn-move-up, #adminModal .btn-move-down { min-width: 36px; width: 36px; height: 40px; }

/* [REF] HTML: tabEvents; JS: renderVacationRowsと既存保存/並び替え; SPLIT: LAST。
   項目名を各カードに置き、横幅が不足する9列の表を廃止する。 */
#adminModal .vacation-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#adminModal .vacation-grid > .admin-box { min-width: 0; }
.event-admin-list { display: grid; gap: 12px; }
.event-admin-card { padding: 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-section-surface); min-width: 0; }
.event-admin-card-heading { display: flex; align-items: center; gap: 10px; }
.event-admin-card-heading h5 { font-size: 16px; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.event-admin-card-heading button { flex: 0 0 auto; }
.event-admin-details { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 14px 0; }
.event-admin-details > div { min-width: 0; }
.event-admin-details > div:last-child { grid-column: 1 / -1; }
.event-admin-details dt { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.event-admin-details dd { margin: 4px 0 0; color: var(--ui-ink); font-size: 14px; overflow-wrap: anywhere; }
.event-admin-card-controls { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; border-top: 1px solid var(--ui-line); padding-top: 10px; }
.event-admin-card-controls label { display: flex; gap: 6px; align-items: center; min-height: 40px; font-size: 13px; white-space: nowrap; }
.event-order-actions { display: flex; gap: 4px; margin-left: auto; }
.event-order-actions button { min-width: 36px; padding: 6px; }
.event-admin-card.vacation-dragging { opacity: .5; border-color: var(--ui-accent); }
.event-form-flags { border: 1px solid var(--ui-line); border-radius: 8px; margin: 0; padding: 10px; min-width: 0; }
#adminModal .event-form-flags label { display: flex; flex-direction: row; gap: 8px; align-items: center; margin: 8px 0; }
.event-form-flags legend { font-size: 13px; color: var(--ui-muted); }
#adminModal .vacation-form label { min-width: 0; }
#adminModal .vacation-row-two-cols:has(.event-form-flags) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#adminModal .vacation-form input, #adminModal .vacation-form select { box-sizing: border-box; width: 100%; }
#adminModal .vacation-form input[type="checkbox"] { width: 18px; height: 18px; }
#adminModal .vacation-actions { flex-wrap: wrap; gap: 8px; }
.event-selection-empty { padding: 24px; border: 1px dashed var(--ui-line); background: var(--ui-soft); color: var(--ui-muted); border-radius: var(--ui-radius); }
body .event-select-toolbar, body .event-legend-item { background: var(--ui-soft); border-color: var(--ui-line); }
body .event-select-label, body .event-legend-text { color: var(--ui-ink); }
body .event-toolbar__hint, body .vacation-gantt-touch-hint, body .event-legend-type, body .event-legend-empty { color: var(--ui-muted); }
body .vacation-gantt-sticky-header, body .vac-color-palette { background: var(--ui-menu-surface); border-color: var(--ui-line); color: var(--ui-ink); }
body #eventModal button.btn-primary { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); }
body #eventModal button.btn-secondary { background: var(--ui-button-face); color: var(--ui-ink); border: 1px solid var(--ui-line); }
body #eventSelectDropdown { min-width: 0; max-width: 100%; }
body #eventModal .event-modal-header { padding: 12px 24px; margin: 0; background: var(--ui-header-face); border-bottom: 1px solid var(--ui-line); }

/* [REF] HTML: イベント日付表; JS: vacations.jsのvac-axis-*とon; STATE: hover/focus;
   日付カテゴリーの背景とON/OFFを保持し、行列を線、交点を枠で強調する。 */
body .vacation-gantt table { width: max-content; min-width: 0; }
body .vacation-gantt .vac-cell, body .vacation-gantt .vac-day-header { box-sizing: border-box; min-width: 32px; width: 32px; padding: 3px 2px; }
body .vacation-gantt .vac-cell { height: 32px; }
body .vacation-gantt .vac-month-text { position: absolute; inset: 6px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .vacation-gantt .vac-month-header { height: 32px; }
body .vacation-gantt th.member-name { background: var(--ui-surface); color: var(--ui-ink); }
body .vacation-gantt th.group-name { background: var(--ui-soft); color: var(--ui-ink); }
body .vacation-gantt .member-name.member-has-bit { background: var(--ui-soft); color: var(--ui-accent); }
body .vacation-gantt .vac-cell.on,
body .vacation-gantt .vac-cell.on:is(.weekend-sat, .weekend-sun, .holiday) { background: var(--ui-accent); color: #fff; }
body .vacation-gantt .vac-cell.on::after { content: '✓'; font-size: 15px; }
body .vacation-gantt .vac-axis-row { box-shadow: inset 0 1px var(--ui-accent), inset 0 -1px var(--ui-accent); }
body .vacation-gantt .vac-axis-column { box-shadow: inset 1px 0 var(--ui-accent), inset -1px 0 var(--ui-accent); }
body .vacation-gantt th.vac-axis-row, body .vacation-gantt th.vac-axis-column { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
body .vacation-gantt .vac-axis-cell { box-shadow: inset 0 0 0 2px var(--ui-accent), inset 0 0 0 3px var(--ui-surface); }
body .vacation-gantt .vac-cell:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: -3px; }
@media (pointer: coarse) { body .vacation-gantt .vac-cell { height: 44px; } }
@media (max-width: 960px) {
  #adminModal .vacation-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #adminModal .admin-card-header { padding: 12px; }
  #adminModal .admin-tabs { grid-template-columns: minmax(0, 1fr); }
  #adminModal .tab-panel { padding: 12px; }
  #adminModal .admin-box { padding: 12px; }
  .admin-areas { display: grid; grid-template-columns: 1fr 1fr; }
  #adminModal .admin-area-btn { padding: 8px; font-size: 12px; }
  #adminModal .tab-buttons { gap: 4px; }
  #adminModal .tab-btn { padding: 6px 8px; }
  #adminModal .vacation-row-two-cols, #adminModal .vacation-row-inline { grid-template-columns: minmax(0, 1fr); flex-direction: column; align-items: stretch; }
  #adminModal .layout-config-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #adminModal .unified-column-item > div { flex-wrap: wrap; gap: 8px !important; }
  #adminModal .column-toggle-grp, #adminModal .column-width-group { flex-wrap: wrap; min-width: 0; margin-left: 0; }
  #adminModal .unified-column-item > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  #adminModal .notice-edit-row, #adminModal .tool-edit-row { display: grid; grid-template-columns: minmax(0, 1fr); padding-left: 24px; box-sizing: border-box; }
  #adminModal .notice-edit-controls, #adminModal .tool-edit-controls { width: auto; margin-left: 0; white-space: normal; }
  #adminModal .notice-edit-item input[type="text"], #adminModal .tool-edit-item input[type="text"], #adminModal .tool-edit-item input[type="url"] { width: 100%; margin-left: 0; }
  #adminModal .office-add-form .u-grid-2-cols { grid-template-columns: minmax(0, 1fr); }
  /* メンバーの表を項目名付きカードへ。セルのクリック編集とID/並び順は保持する。 */
  #adminModal table.member-table { display: block; min-width: 0; }
  #adminModal .member-table thead { display: none; }
  #adminModal .member-table tbody { display: grid; gap: 10px; }
  #adminModal .member-table tr[data-member-id] { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-section-surface); }
  #adminModal .member-table tr[data-member-id] td { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; width: auto; max-width: none; box-sizing: border-box; white-space: normal; overflow: visible; text-align: left; overflow-wrap: anywhere; min-height: 40px; }
  #adminModal .member-table tr[data-member-id] td::before { content: attr(data-label); font-size: 12px; color: var(--ui-muted); }
  #adminModal .member-table tr[data-member-id] td:nth-child(3) { font-weight: 700; }
  #adminModal .member-table tr[data-member-id] td:last-child { border-bottom: 0; }
  #adminModal .member-table .group-header-row { display: block; }
  #adminModal .member-table .group-header-row td { display: block; min-width: 0; width: auto; padding: 12px !important; border-radius: 8px; }
  #adminModal .member-order-cell { justify-content: flex-start; }
  #adminModal .member-inline-input { min-width: 0; width: 100%; }
}