/* v2.css — Step 25 design system
   落ち着き / 余白 / 薄い罫線 / 角丸 / 控えめな影 / 1色アクセント
   参考: Notion / Linear / Stripe Dashboard
*/

/* ===== [Step 52-1] デザイントークン =====
   ★ 正は design/events-ui/assets/style.css。**値は design と 同じ**に する。
   ・design の 名前 (--accent / --border-strong / --text-faint …) を **主**に 置き、
     これまでの 名前 (--c-*) は **別名** (var 参照) に した。
     画面の markup は 触らずに 色だけ そろう。
   ・変えるときは design/events-ui/assets/style.css を 直してから ここに 反映する。 */
:root {
  /* 色 — 面 */
  --bg:#ffffff;
  --surface:#f8f9fb;
  --border:#e6e8ec;
  --border-strong:#d0d5dc;
  /* 色 — 文字 */
  --text:#1f2328;
  --text-muted:#59636e;
  --text-faint:#8b949e;
  /* 色 — アクセント */
  --accent:#2563eb;
  --accent-hover:#1d4ed8;
  --accent-weak:#eff6ff;
  --accent-border:#bfdbfe;
  /* 色 — 意味 */
  --danger:#dc2626;  --danger-weak:#fef2f2;  --danger-border:#fecaca;
  --success:#16a34a; --success-weak:#f0fdf4; --success-border:#bbf7d0;
  --warn:#d97706;    --warn-weak:#fffbeb;    --warn-border:#fde68a;
  /* 文字 */
  --font:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI',system-ui,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:38px;
  /* 余白 (4px きざみ) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* 角丸・影 */
  --radius:10px; --radius-sm:6px; --radius-full:999px;
  --shadow-1:0 1px 2px rgba(31,35,40,.06);
  --shadow-2:0 4px 16px rgba(31,35,40,.10);
  --shadow-3:0 12px 32px rgba(31,35,40,.16);

  /* ---- これまでの 名前 (別名。markup を 触らない ため 残す) ---- */
  --c-bg: var(--bg);
  --c-surface: var(--surface);
  --c-surface-hover: #f2f4f7;
  --c-border: var(--border);
  --c-border-strong: var(--border-strong);
  --c-text: var(--text);
  --c-mute: var(--text-muted);
  --c-mute-strong: #4b5563;
  --c-primary: var(--accent);
  --c-primary-hover: var(--accent-hover);
  --c-primary-soft: var(--accent-weak);
  --c-primary-border: var(--accent-border);
  --c-danger: var(--danger);
  --c-danger-hover: #b91c1c;
  --c-danger-soft: var(--danger-weak);
  --c-success: var(--success);
  --c-success-soft: var(--success-weak);
  --c-warn: var(--warn);
  --c-warn-soft: var(--warn-weak);
  --sh-1: var(--shadow-1);
  --sh-2: var(--shadow-2);
  --sh-modal: var(--shadow-3);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius);
  --r-lg: 14px;
  --r-full: var(--radius-full);
  --s-1: var(--sp-1); --s-2: var(--sp-2); --s-3: var(--sp-3); --s-4: var(--sp-4);
  --s-5: var(--sp-6); --s-6: var(--sp-8); --s-7: var(--sp-12);
  --fs-body: var(--fs-md);
  --fs-h1: 22px;
  --fs-h2: var(--fs-lg);
  --fs-h3: var(--fs-md);
  --lh: 1.6;

  /* Legacy compat (do not remove — used by existing markup) */
  --c-panel: #ffffff;
  --c-warn-bg: var(--warn-weak);
  --c-warn-border: var(--warn-border);
  --c-warn-text: #7b3f0c;
  --c-err: var(--danger);
  --c-ok: var(--success);
  --font-body: var(--fs-body);
  --font-table: var(--fs-sm);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  /* [Step 52-1] 自己ホストの Noto Sans JP (Google Fonts の <link> は 外した) */
  font: var(--fs-body)/var(--lh) var(--font);
  background: var(--c-surface);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}

/* Numerals — tabular for table alignment */
table, td, th, .v2-num, .v2-tabular {
  font-variant-numeric: tabular-nums;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Header === */
header.v2-header {
  background: var(--c-bg);
  color: var(--c-text);
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 100;
}
header.v2-header .brand {
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 15px; color: var(--c-text);
}
header.v2-header .brand:hover { text-decoration: none; color: var(--c-primary); }
header.v2-header .spacer { flex: 1; }
header.v2-header a { color: var(--c-mute); font-size: var(--fs-sm); }
header.v2-header a:hover { color: var(--c-text); text-decoration: none; }
header.v2-header select, header.v2-header .me {
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font: inherit; font-size: var(--fs-sm);
}

/* === Main === */
main.v2-main {
  padding: var(--s-5);
  max-width: 1200px;
  margin: 0 auto;
}

/* === Headings === */
h1.v2-h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-3);
  line-height: 1.3;
}
h2.v2-h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: var(--s-5) 0 var(--s-3);
  padding: 0;
  border: 0;
  letter-spacing: -0.005em;
}
h3.v2-h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: var(--s-4) 0 var(--s-2);
}

/* === Panel / Card === */
.v2-panel {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin: var(--s-3) 0;
  box-shadow: var(--sh-1);
}
.v2-panel + .v2-panel { margin-top: var(--s-4); }

/* === Frozen banner === */
.v2-frozen-banner {
  background: var(--c-warn-soft);
  border: 1px solid #f4c88a;
  color: #7b3f0c;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  margin: var(--s-3) 0;
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* === Buttons === */
button.v2-btn, .v2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-4);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid var(--c-primary);
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.v2-btn:hover:not(:disabled) { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.v2-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.v2-btn:disabled { opacity: .5; cursor: not-allowed; }

.v2-btn.secondary {
  background: var(--c-bg);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.v2-btn.secondary:hover:not(:disabled) {
  background: var(--c-surface-hover);
  border-color: var(--c-mute);
}
.v2-btn.ghost {
  background: transparent;
  color: var(--c-mute-strong);
  border-color: transparent;
}
.v2-btn.ghost:hover:not(:disabled) {
  background: var(--c-surface-hover);
  color: var(--c-text);
}
.v2-btn.danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
}
.v2-btn.danger:hover:not(:disabled) {
  background: var(--c-danger-hover);
  border-color: var(--c-danger-hover);
}
.v2-btn.small {
  height: 28px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  gap: 4px;
}
.v2-btn.large {
  height: 42px;
  padding: 0 var(--s-5);
  font-size: var(--fs-body);
}

/* === Form === */
label.v2-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-mute-strong);
  font-weight: 500;
  margin: var(--s-2) 0 6px;
  letter-spacing: 0;
}
input.v2-input, select.v2-select, textarea.v2-textarea {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm);
  background: var(--c-bg);
  color: var(--c-text);
  transition: border-color .12s, box-shadow .12s;
}
textarea.v2-textarea {
  height: auto;
  min-height: 88px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.55;
}
input.v2-input:focus, select.v2-select:focus, textarea.v2-textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
input.v2-input:disabled, select.v2-select:disabled, textarea.v2-textarea:disabled {
  background: var(--c-surface); color: var(--c-mute); cursor: not-allowed;
}

/* [Step 26-C-1] type=number のスピナー矢印を消し、5 桁見える最小幅を確保。
   元の原因: 表セル (60px) 内で input width:100% + 左右 padding 10px + Chrome/Firefox の
   ネイティブスピナー ~20px が値の表示幅を圧迫していた。 */
input.v2-input[type="number"] { min-width: 88px; -moz-appearance: textfield; }
input.v2-input[type="number"]::-webkit-inner-spin-button,
input.v2-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

.v2-field-err {
  color: var(--c-danger);
  font-size: var(--fs-xs);
  margin: 4px 0 6px;
}
.v2-field.error input,
.v2-field.error select,
.v2-field.error textarea {
  border-color: var(--c-danger);
}
.v2-field.error input:focus,
.v2-field.error select:focus,
.v2-field.error textarea:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}
.v2-field-help {
  font-size: var(--fs-xs);
  color: var(--c-mute);
  margin: 4px 0 0;
}

/* Checkbox / radio */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--c-primary);
  width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: middle;
}

/* === Table === */
table.v2-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.v2-table th, .v2-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.4;
}
.v2-table thead th {
  background: var(--c-surface);
  color: var(--c-mute-strong);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0;
  white-space: nowrap;
}
.v2-table tbody td {
  border-bottom: 1px solid var(--c-border);
}
.v2-table tbody tr:last-child td { border-bottom: 0; }
.v2-table tbody tr:hover td { background: var(--c-surface-hover); }
.v2-table .actions button { margin-right: 4px; }
.v2-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* === Tabs === */
.v2-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  margin-bottom: var(--s-4);
}
.v2-tabs button {
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit; font-size: var(--fs-sm);
  color: var(--c-mute);
  white-space: nowrap;
  transition: color .12s, border-color .12s;
  position: relative;
  top: 1px;
}
.v2-tabs button:hover { color: var(--c-text); }
.v2-tabs button.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
  font-weight: 600;
  background: transparent;
}
.v2-tab-body { padding: var(--s-3) 0; }

/* === Toast === */
.v2-toast-wrap {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.v2-toast {
  background: var(--c-text); color: #fff;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  min-width: 220px; max-width: 420px;
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: v2-toast-in .18s ease-out;
}
@keyframes v2-toast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.v2-toast.err { background: var(--c-danger); }
.v2-toast.ok { background: var(--c-success); }
/* [Step 37] 注意 (警告)。保存は 通っているが 気づいて ほしい 知らせ */
.v2-toast.warn { background: #b26a00; }

/* === Modal === */
/* [ttdur] hidden が display:flex に 負けない ように (静的 modal は hidden で 開閉する) */
.v2-modal-mask[hidden] { display: none; }
.v2-modal-mask {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.42);
  z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 12px 20px;
  overflow-y: auto;
  animation: v2-fade-in .12s ease-out;
}
@keyframes v2-fade-in { from { opacity: 0; } to { opacity: 1; } }
.v2-modal {
  background: var(--c-bg);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  width: 100%;
  max-width: 640px;
  box-shadow: var(--sh-modal);
  animation: v2-slide-in .18s ease-out;
}
@keyframes v2-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.v2-modal h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.v2-modal .actions { margin-top: var(--s-4); text-align: right; display: flex; gap: 8px; justify-content: flex-end; }
.v2-modal .actions button { margin-left: 0; }
.v2-modal .close { float: right; cursor: pointer; color: var(--c-mute); font-size: 20px; line-height: 1; }
.v2-modal .close:hover { color: var(--c-text); }

/* === Grid columns === */
.v2-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.v2-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
.v2-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.v2-5col { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.v2-field { min-width: 0; }

@media (max-width: 640px) {
  .v2-2col, .v2-3col, .v2-4col, .v2-5col { grid-template-columns: 1fr; }
  main.v2-main { padding: var(--s-3); }
  .v2-panel { padding: var(--s-4); }
  .v2-modal { padding: var(--s-4); }
  h1.v2-h1 { font-size: 19px; }
  h2.v2-h2 { font-size: 16px; }
  .v2-table th, .v2-table td { padding: 10px 10px; }
}

/* === Drawer === */
.v2-drawer-mask {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 8500;
  animation: v2-fade-in .12s ease-out;
}
.v2-drawer {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: 100%; max-width: 480px;
  background: var(--c-bg);
  box-shadow: -8px 0 24px rgba(15,23,42,.14);
  overflow-y: auto;
  padding: var(--s-5);
  z-index: 8600;
  animation: v2-drawer-in .18s ease-out;
}
@keyframes v2-drawer-in { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.v2-drawer h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-h2);
  font-weight: 600;
}
.v2-drawer .close { float: right; cursor: pointer; color: var(--c-mute); font-size: 20px; line-height: 1; }
.v2-drawer .close:hover { color: var(--c-text); }
.v2-child-row td { color: var(--c-mute); font-size: var(--fs-xs); }

/* === Chip / Status === */
.v2-chip {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  background: var(--c-surface);
  color: var(--c-mute-strong);
  border: 1px solid var(--c-border);
}
.v2-chip.blue    { background: var(--c-primary-soft); color: var(--c-primary-hover); border-color: var(--c-primary-border); }
.v2-chip.green   { background: var(--c-success-soft); color: #15803d; border-color: #bbf7d0; }
.v2-chip.orange  { background: var(--c-warn-soft); color: #9a3412; border-color: #fed7aa; }
.v2-chip.red     { background: var(--c-danger-soft); color: #991b1b; border-color: #fecaca; }
.v2-chip.gray    { background: #f1f3f5; color: var(--c-mute-strong); border-color: var(--c-border); }

.v2-status-chip {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  background: var(--c-surface); color: var(--c-mute-strong);
  border: 1px solid var(--c-border);
}
.v2-status-chip.draft     { background: #f1f3f5; color: #4b5563; border-color: #e2e5e9; }
.v2-status-chip.open      { background: var(--c-success-soft); color: #15803d; border-color: #bbf7d0; }
.v2-status-chip.closed    { background: var(--c-warn-soft); color: #9a3412; border-color: #fed7aa; }
.v2-status-chip.finalized { background: var(--c-primary-soft); color: var(--c-primary-hover); border-color: var(--c-primary-border); }
.v2-status-chip.completed { background: #f3f4f6; color: #4b5563; border-color: #e2e5e9; }
.v2-status-chip.archived  { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }

.v2-frozen-chip {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-xs);
  background: var(--c-warn-soft); color: #9a3412;
  border: 1px solid #fed7aa;
  margin-left: 6px;
}
.v2-listed-yes { color: var(--c-success); font-weight: 500; }
.v2-listed-no { color: var(--c-mute); }

/* === Banners === */
.v2-banner {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  margin: var(--s-2) 0;
}
.v2-banner.info { background: var(--c-primary-soft); border-color: var(--c-primary-border); color: #1e3a8a; }
.v2-banner.warn { background: var(--c-warn-soft); border-color: #fed7aa; color: #9a3412; }
.v2-banner.error { background: var(--c-danger-soft); border-color: #fecaca; color: #991b1b; }
.v2-banner.success { background: var(--c-success-soft); border-color: #bbf7d0; color: #15803d; }

/* === Empty state === */
.v2-empty {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--c-mute);
  font-size: var(--fs-sm);
}
.v2-empty .icon { font-size: 32px; margin-bottom: var(--s-2); opacity: 0.5; }
.v2-empty .msg { margin-bottom: var(--s-3); }

/* === Utility === */
.v2-mute { color: var(--c-mute); font-size: var(--fs-xs); }
.v2-mute-2 { color: var(--c-mute-strong); font-size: var(--fs-sm); }
hr.v2-hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-4) 0; }
.v2-mono { font-family: "SF Mono", "JetBrains Mono", "Consolas", "Menlo", monospace; font-size: 13px; }
.v2-slug-url { font-family: "SF Mono", "JetBrains Mono", "Consolas", "Menlo", monospace; color: var(--c-mute-strong); font-size: var(--fs-sm); }

/* SVG icons (v2/icons.js output) */
.v2-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v2-icon.lg { width: 20px; height: 20px; vertical-align: -4px; }
.v2-icon.sm { width: 14px; height: 14px; vertical-align: -2px; }

/* === Grouped horizontal tabs (Step 25 §2 — grouping via inline labels) === */
.v2-tabs-grouped {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--s-2);
  margin: var(--s-3) 0 var(--s-4);
  align-items: center;
}
.v2-tabs-group {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 var(--s-2) 0 0;
  border-right: 1px solid var(--c-border);
  padding-right: var(--s-3);
  margin-right: var(--s-2);
}
.v2-tabs-group:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.v2-tabs-group-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--s-2);
}
.v2-tabs-grouped button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm);
  color: var(--c-text);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.v2-tabs-grouped button:hover { background: var(--c-surface-hover); }
.v2-tabs-grouped button.active {
  background: var(--c-primary-soft);
  color: var(--c-primary-hover);
  font-weight: 600;
}
.v2-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-mute-strong);
  margin-left: auto;
}
.v2-nav-badge:empty { display: none; }
.v2-nav-badge.warn {
  background: var(--c-warn-soft);
  border-color: #fed7aa;
  color: #9a3412;
}
.v2-tabs-grouped button.active .v2-nav-badge {
  background: var(--c-bg);
  border-color: var(--c-primary-border);
  color: var(--c-primary-hover);
}

@media (max-width: 640px) {
  .v2-tabs-grouped { overflow-x: auto; flex-wrap: nowrap; }
  .v2-tabs-group { flex-shrink: 0; }
}

/* === Divisions / Events school-group accordion (Step 25 §3-1 / §3-2) === */
.v2-accordion { margin: 0; }
.v2-accordion-group {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  background: var(--c-bg);
  overflow: hidden;
}
.v2-accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--c-surface);
  border: 0; width: 100%;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  text-align: left;
  transition: background .12s;
}
.v2-accordion-header:hover { background: var(--c-surface-hover); }
.v2-accordion-header .v2-chev {
  transition: transform .18s;
  color: var(--c-mute);
}
.v2-accordion-group.open .v2-accordion-header .v2-chev {
  transform: rotate(90deg);
}
.v2-accordion-body {
  padding: 0;
  border-top: 1px solid var(--c-border);
  display: none;
}
.v2-accordion-group.open .v2-accordion-body {
  display: block;
}
.v2-accordion-header .v2-count {
  color: var(--c-mute);
  font-weight: 400;
  margin-left: 8px;
}

/* Search / filter bar for divisions/events tabs */
.v2-filter-bar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.v2-filter-bar .v2-input,
.v2-filter-bar .v2-select {
  height: 34px;
  padding: 0 10px;
}
.v2-filter-bar .v2-input { min-width: 200px; max-width: 320px; }
.v2-filter-bar .v2-select { min-width: 120px; }

/* Round chip visualization for events */
.v2-round-chain { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.v2-round-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: var(--c-primary-soft);
  color: var(--c-primary-hover);
  border: 1px solid var(--c-primary-border);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.v2-round-chip.final { background: var(--c-success-soft); color: #15803d; border-color: #bbf7d0; }
.v2-round-arrow { color: var(--c-mute); font-size: 11px; }

/* [Step 24c] Rich editor (contenteditable) */
.v2-editor-wrap { border: 1px solid var(--c-border-strong); border-radius: 6px; background: #fff; }
.v2-editor-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--c-border); background: #f8fafc; border-radius: 6px 6px 0 0; }
.v2-editor-toolbar button { background: #fff; border: 1px solid var(--c-border-strong); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; min-width: 32px; height: 28px; color: var(--c-text); }
.v2-editor-toolbar button:hover { background: var(--c-primary-soft); }
.v2-editor-toolbar button:active { background: var(--c-primary); color: #fff; }
.v2-editor-sep { display: inline-block; width: 1px; background: var(--c-border); margin: 2px 4px; }
.v2-editor-body { min-height: 200px; padding: 12px 14px; font-size: 14px; line-height: 1.7; outline: none; color: var(--c-text); }
.v2-editor-body:focus { background: #fff; }
.v2-editor-body h2 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--c-border); }
.v2-editor-body h3 { font-size: 15px; font-weight: 700; margin: 10px 0 4px; color: #334155; }
.v2-editor-body h4 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; color: #475569; }
.v2-editor-body p { margin: 4px 0 8px; }
.v2-editor-body ul, .v2-editor-body ol { margin: 4px 0 8px; padding-left: 24px; }
.v2-editor-body li { margin: 2px 0; }
.v2-editor-body a { color: var(--c-primary); text-decoration: underline; }
.v2-editor-body table { border-collapse: collapse; margin: 8px 0; }
.v2-editor-body th, .v2-editor-body td { border: 1px solid var(--c-border-strong); padding: 4px 8px; min-width: 60px; }
.v2-editor-body th { background: #f1f5f9; font-weight: 600; text-align: left; }
.v2-editor-body strong { font-weight: 700; }
.v2-editor-body em { font-style: italic; }
.v2-editor-body:empty::before { content: attr(data-placeholder); color: var(--c-mute); pointer-events: none; }

/* ------------------------------------------------------------------
   [Step 36 §1] 一覧セルの その場編集 (部門の 名称・略称)
   実測 (2026-09-04): 機能は 動いていたが cursor:auto・枠なし・背景なしで
   「編集できる」と 気づけなかった。手がかりを 足す。
   ------------------------------------------------------------------ */
.v2-inline-cell,
.v2-table td.v2-inline-cell,
.v2-table tbody tr:last-child td.v2-inline-cell {
  cursor: text;
  position: relative;
  /* 「編集できる」手がかり。表の 罫線 (.v2-table tbody tr:last-child td { border-bottom:0 })
     に 負けない よう、下線では なく **点線の 内側枠** で 出す。 */
  box-shadow: inset 0 -1px 0 0 var(--c-border-strong, #94a3b8);
  text-decoration: underline dotted var(--c-border-strong, #94a3b8);
  text-underline-offset: 3px;
}
.v2-inline-cell:hover {
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #93c5fd;
}
.v2-inline-cell:hover::after {
  content: '✎';
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #2563eb;
  pointer-events: none;
}
/* 編集中: 枠と 背景で はっきり 分かるように */
.v2-inline-cell.editing {
  background: #fff9db;
  box-shadow: inset 0 0 0 2px #2563eb;
}
.v2-inline-cell.editing::after { content: none; }
.v2-inline-cell input {
  width: 100%;
  padding: 2px 6px;
  font-size: inherit;
  font-family: inherit;
  background: #fff;
  border: 1px solid #2563eb;
  border-radius: 3px;
}
/* [Step 36 §2] 自動生成の 部門に つく 小さな 印 */
.v2-auto-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 15px;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-radius: 8px;
  vertical-align: 1px;
}

/* Print */
@media print {
  header.v2-header, .v2-tabs, .v2-tabs-grouped, button, .v2-btn { display: none !important; }
  main.v2-main { padding: 0; max-width: 100%; }
  .v2-panel { border: 1px solid #ccc; box-shadow: none; }
}

/* [Step 38-K] 経理 (単独ページ /v2/keiri と 大会画面の 「経理」タブ で 共有) */
.st-chip { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.st-unpaid   { background:#fef3c7; color:#78350F; }
.st-partial  { background:#fed7aa; color:#9A3412; }
.st-paid     { background:#dcfce7; color:#14532D; }
.st-overpaid { background:#e0e7ff; color:#3730a3; }
.card { background:#fff; border-radius:8px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(520px, 100%); background:#fff;
          box-shadow:-4px 0 20px rgba(0,0,0,0.15); overflow-y:auto; padding:20px; z-index:1000; }
.drawer-mask { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.35); z-index:999; }
@media (max-width: 640px) {
  .drawer { width: 100%; }
  .k-tbl th, .k-tbl td { font-size: 12px; padding: 6px; }
}

/* ============ [Step 44] 空状態 と 折りたたみ ============ */
.v2-empty {
  padding: 18px 16px;
  text-align: center;
  border: 1px dashed var(--c-border);
  border-radius: 8px;
  background: #fbfcfd;
}
.v2-empty-text { font-size: 13px; color: var(--c-mute-strong); }
.v2-empty-hint { font-size: 11px; color: var(--c-mute); margin-top: 3px; }
.v2-empty .v2-btn { margin-top: 10px; }

.v2-collapsible > .v2-collapse-head {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.v2-collapsible > .v2-collapse-head:hover { color: var(--c-primary-hover); }
.v2-collapse-mark {
  display: inline-block;
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .12s ease;
  flex: none;
}
.v2-collapsible.is-open > .v2-collapse-head > .v2-collapse-mark { transform: rotate(90deg); }
.v2-collapse-badge {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-mute);
  margin-left: 4px;
}
.v2-collapse-body { display: none; margin-top: 10px; }
.v2-collapsible.is-open > .v2-collapse-body { display: block; }

/* ── [Step 49] 文書エディタ: 左＝編集 / 右＝プレビュー ───────────── */
.doc-ed-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.doc-ed-left, .doc-ed-right { min-width: 0; }
.doc-ed-right { border-left: 1px solid #e2e8f0; padding-left: 12px; }
.doc-ed-prev-head { font-size: 11px; color: #64748b; margin-bottom: 6px; }
/* 紙に 見える 枠。A4 の 比率で 中身を 縮めて 見せる */
.doc-ed-paper {
  background: #fff; border: 1px solid #cbd5e1; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  padding: 12mm 12mm; max-height: 62vh; overflow: auto;
}
.doc-prev { font-size: 10.5pt; }
.doc-prev :first-child { margin-top: 0; }
/* タブは 広い 画面では 出さない */
.doc-ed-tabs { display: none; gap: 6px; margin-bottom: 8px; }
.doc-ed-tab {
  border: 1px solid #cbd5e1; background: #f8fafc; color: #334155;
  border-radius: 4px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.doc-ed-tab.on { background: #0F4C9A; border-color: #0F4C9A; color: #fff; }

/* 幅が 足りない 画面: 1 段に して タブで 切り替える */
@media (max-width: 900px) {
  .doc-ed-tabs { display: flex; }
  .doc-ed-split { grid-template-columns: 1fr; }
  .doc-ed-right { border-left: 0; padding-left: 0; }
  .doc-ed-split[data-show="edit"] .doc-ed-right { display: none; }
  .doc-ed-split[data-show="prev"] .doc-ed-left { display: none; }
}

/* ── [Step 50-TT] タイムテーブルの 表: 1 行を 意図した 2 段に ─────────
   ・どのセルも **折り返さない・省略しない** (… を 出さない)
   ・列幅は 中身に 合わせて 固定。狭ければ 表ごと 横スクロール       */
#t-timetable { table-layout: fixed; width: max-content; min-width: 100%; }
#t-timetable th, #t-timetable td {
  white-space: nowrap; overflow: visible; text-overflow: clip;
}
#t-timetable thead th { vertical-align: top; line-height: 1.3; }
#t-timetable .tt-sub {
  font-weight: 400; font-size: 11px; color: #64748b; margin-top: 2px;
}
#t-timetable .tt-c-day  { width: 96px; }
#t-timetable .tt-c-grip { width: 84px; text-align: left; }
#t-timetable .tt-c-time { width: 118px; }
#t-timetable .tt-c-end  { width: 132px; }
#t-timetable .tt-c-ev   { width: auto; background: #fff; }   /* 白無地 */
#t-timetable .tt-c-act  { width: 148px; }

/* 1 段目と 2 段目を 1 かたまりに 見せる */
#t-timetable tbody tr:not(.tt-row2) > td { border-bottom: 0; padding-bottom: 2px; }
#t-timetable tbody tr.tt-row2 > td { padding-top: 0; }
#t-timetable tbody tr.tt-row2 { border-bottom: 1px solid #e2e8f0; }

/* 開始時刻: 太字・大きめ・幅固定 */
#t-timetable .tt-start { width: 88px; font-size: 15px; font-weight: 700; text-align: center; }
#t-timetable .tt-call { font-size: 12px; color: #475569; }
#t-timetable .tt-venue { font-size: 12px; }
#t-timetable .tt-dur { font-size: 11px; color: #64748b; margin-left: 4px; }

/* 部門・種目・ラウンドを 1 セルに */
#t-timetable .tt-div   { font-size: 13px; color: #334155; }
#t-timetable .tt-ev    { font-size: 14px; font-weight: 700; margin-left: 6px; }
#t-timetable .tt-spec  { font-size: 11px; color: #64748b; margin-left: 4px; }
#t-timetable .tt-round { font-size: 12px; margin-left: 6px; color: #0F4C9A; }
#t-timetable .tt-pit {
  font-size: 10px; margin-left: 6px; padding: 1px 5px; border-radius: 8px;
  background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
}
#t-timetable .tt-cnt { font-size: 12px; color: #475569; }
#t-timetable .tt-cnt b { color: #111; }
#t-timetable .tt-dot { color: #94a3b8; margin: 0 2px; }
#t-timetable .tt-grip {
  cursor: grab; user-select: none; touch-action: none; padding: 0 4px; color: #94a3b8;
}

/* ── [Step 51] 文書の ページ数 ───────────────────────── */
.doc-ed-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doc-ed-pages { font-size: 11px; color: #475569; display: flex; align-items: center; gap: 4px; }
.doc-ed-pages select { font-size: 12px; padding: 2px 6px; width: auto; }
.doc-ed-fit { font-size: 11px; color: #475569; margin: 2px 0 6px; min-height: 1.2em; }
.doc-ed-fit.warn { color: #b45309; font-weight: 600; }

/* [Step 51c] PDF が 古い 印 */
.doc-stale {
  font-size: 11px; color: #b45309; font-weight: 600; white-space: nowrap;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; padding: 1px 5px;
}

/* ── [Step 51d] 「削除」は 常に 右端で 他の ボタンから 離す ─────────
   誤って 押す のを 防ぐ。表の 操作列の 削除 (danger) に 左の 余白を 取る。
   ・実測: これまで 部門 4px / 料金・受付期間 3.5px / 文書 **0px** だった
   ・flex の セル (文書の .actions) では auto で 右端へ 押しやる          */
.v2-table td .v2-btn.danger,
.v2-table td .v2-btn[data-act="del"] { margin-left: 12px; }
.v2-table td .actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.v2-table td .actions .v2-btn.danger { margin-left: auto; padding-left: 10px; }

/* ===== [Step 50] 組編成の 手動編集 (組 × レーン) ===== */
.hg-note { font-size: 12px; margin-bottom: 6px; }
.hg-err {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px;
}
table.hg-table { table-layout: fixed; width: max-content; min-width: 100%; }
table.hg-table th.hg-hh { width: 96px; text-align: left; vertical-align: middle; }
table.hg-table th.hg-lh { width: 120px; text-align: center; font-size: 12px; }
table.hg-table td.hg-cell {
  width: 120px; height: 44px; padding: 2px; vertical-align: middle;
  background: #fafafa; border: 1px dashed #d4d4d8;
}
table.hg-table td.hg-cell.hg-over-cell { background: #dbeafe; border-color: #3b82f6; }
.hg-hn { font-weight: 700; font-size: 13px; }
.hg-cnt { font-size: 11px; color: #64748b; }
.hg-lock {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 5px; margin-top: 2px;
}
.hg-lock:disabled { opacity: .45; cursor: default; }
tr.hg-locked th.hg-hh { background: #fef9c3; }
tr.hg-over td.hg-cell, tr.hg-over th.hg-hh { background: #fee2e2; border-color: #ef4444; }
.hg-chip {
  background: #fff; border: 1px solid #94a3b8; border-radius: 4px;
  padding: 3px 5px; cursor: grab; user-select: none; overflow: hidden;
}
.hg-chip:active { cursor: grabbing; }
.hg-chip .hg-n {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hg-chip .hg-t {
  font-size: 11px; color: #64748b; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hg-chip.hg-drag { opacity: .4; }
.hg-chip.hg-pick { outline: 2px solid #2563eb; outline-offset: 1px; }
/* 同じ クラブ (つかんだ ときに 光る) */
.hg-chip.hg-same { background: #fef3c7; border-color: #f59e0b; }
.hg-un { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; }
.hg-un .hg-chip { width: 150px; }
@media (max-width: 700px) {
  /* 375px は 閲覧のみ (編集は デスクトップ) */
  #heats-edit-bar #heats-add-heat,
  #heats-edit-bar #heats-del-heat,
  #heats-edit-bar #heats-revert,
  #heats-edit-bar #heats-save { display: none; }
  .hg-chip { cursor: default; }
}


/* ==========================================================================
   [Step 52-1] design/events-ui の 共通部品
   ★ 正は design/events-ui/assets/style.css。**この節は そこからの 写し**。
     直すときは design を 先に 直し、同じ 内容を ここへ 持ってくる。
   ・`.v2-*` の 既存部品は そのまま 残す (§0)。新しい 画面から 順に
     `.btn` / `.tbl` / `.chip` … に 寄せる。
   ・`.small` などは 既存の `.v2-btn.small` (詳細度 0,2,0) の 方が 強い ので
     ボタンの 見た目は 変わらない。
   ・`svg.icn` は design が 使う 線アイコン。既存の 絵文字は そのまま。
   ========================================================================== */
svg.icn{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.muted{color:var(--text-muted)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.num{font-variant-numeric:tabular-nums}

/* ── ボタン ── */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:9px 16px;border-radius:var(--radius);border:1px solid transparent;font-family:var(--font);font-size:var(--fs-md);font-weight:600;line-height:1.4;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-secondary{background:var(--bg);color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface);color:var(--text)}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:var(--accent-weak)}
.btn-danger{background:var(--bg);color:var(--danger);border-color:var(--danger-border)}
.btn-danger:hover{background:var(--danger-weak);color:var(--danger)}
.btn-lg{padding:13px 24px;font-size:var(--fs-lg);border-radius:var(--radius)}
.btn-sm{padding:5px 10px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── 入力 ── */
.input,.select,.textarea{font-family:var(--font);font-size:var(--fs-md);color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 12px;line-height:1.5;width:100%}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--accent-border);border-color:var(--accent)}
.input::placeholder{color:var(--text-faint)}
.field{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.field>label{font-size:var(--fs-sm);font-weight:600}
.field .help{font-size:var(--fs-xs);color:var(--text-muted)}
.field.is-error .input{border-color:var(--danger)}
.field.is-error .help{color:var(--danger)}
.req{color:var(--danger);font-size:var(--fs-xs);font-weight:600;margin-left:4px}

/* ── 表（高密度） ── */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.table-scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);white-space:nowrap}
table.tbl th{background:var(--surface);color:var(--text-muted);font-weight:600;text-align:left;padding:7px 12px;border-bottom:1px solid var(--border);position:sticky;top:0}
table.tbl td{padding:6px 12px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--surface)}
table.tbl .ta-r{text-align:right}
table.tbl .ta-c{text-align:center}
.tbl-toolbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap}
.tbl-toolbar .spacer{flex:1}
.tbl-count{font-size:var(--fs-sm);color:var(--text-muted)}

/* ── チップ（状態） ── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:600;line-height:1.7;border:1px solid var(--border);background:var(--surface);color:var(--text-muted)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-faint)}
.chip-blue{background:var(--accent-weak);border-color:var(--accent-border);color:var(--accent)}
.chip-blue::before{background:var(--accent)}
.chip-green{background:var(--success-weak);border-color:var(--success-border);color:var(--success)}
.chip-green::before{background:var(--success)}
.chip-amber{background:var(--warn-weak);border-color:var(--warn-border);color:var(--warn)}
.chip-amber::before{background:var(--warn)}
.chip-red{background:var(--danger-weak);border-color:var(--danger-border);color:var(--danger)}
.chip-red::before{background:var(--danger)}

/* ── バナー ── */
.banner{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);font-size:var(--fs-sm)}
.banner svg.icn{margin-top:3px}
.banner-info{background:var(--accent-weak);border-color:var(--accent-border)}
.banner-info svg.icn{color:var(--accent)}
.banner-warn{background:var(--warn-weak);border-color:var(--warn-border)}
.banner-warn svg.icn{color:var(--warn)}
.banner-success{background:var(--success-weak);border-color:var(--success-border)}
.banner-success svg.icn{color:var(--success)}
.banner-danger{background:var(--danger-weak);border-color:var(--danger-border)}
.banner-danger svg.icn{color:var(--danger)}
.banner b{display:block}

/* ── 案内ブロック（この画面でやること） ── */
.guide{border:1px solid var(--accent-border);background:var(--accent-weak);border-radius:var(--radius);padding:var(--sp-4) var(--sp-5);display:flex;gap:var(--sp-4)}
.guide .g-icn{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none}
.guide h3{font-size:var(--fs-md);margin-bottom:2px}
.guide p{font-size:var(--fs-sm);color:var(--text-muted)}
.guide ol{margin:var(--sp-2) 0 0;padding-left:20px;font-size:var(--fs-sm);color:var(--text)}
.guide ol li{margin:2px 0}

/* ── カード・空状態 ── */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5)}
.card h3{font-size:var(--fs-md)}
.empty{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:var(--sp-10) var(--sp-6);text-align:center;color:var(--text-muted)}
.empty svg.icn{width:28px;height:28px;color:var(--text-faint);stroke-width:1.5}
.empty h3{font-size:var(--fs-md);color:var(--text);margin:var(--sp-2) 0 var(--sp-1)}
.empty p{font-size:var(--fs-sm);margin-bottom:var(--sp-4)}

/* ── モーダル ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(31,35,40,.45);display:flex;align-items:center;justify-content:center;padding:var(--sp-6);z-index:50}
.modal{background:var(--bg);border-radius:var(--radius);box-shadow:var(--shadow-3);width:100%;max-width:480px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.modal-head h3{font-size:var(--fs-md)}
.modal-body{padding:var(--sp-5)}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);background:var(--surface);border-radius:0 0 var(--radius) var(--radius)}
.modal-x{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px}

/* ── アプリ共通シェル ── */
/* [Step 52-4] design/events-ui/assets/style.css の `.container` (52-1 で 漏れて いた)。
   既存の 画面 (v2/index.html・v2/tournament.html) は inline の max-width で 上書きする。 */
.container{max-width:1120px;margin:0 auto;padding:0 var(--sp-6)}
/* ⚠⚠ [Step 52-4] `hidden` は `display` を 決める class に 負ける。
   `.btn{display:inline-flex}` `.chip{display:inline-flex}` は ブラウザ既定の
   `[hidden]{display:none}` (UA スタイル) より 強い ため、`hidden` を 付けても
   **消えない**。実際に 公開大会ページで 参加申請ボタンが 2 つ 出て いた。
   spec が `:not([hidden])` で 数えて いた ため 通って しまって いた ので、
   数える ときは 実際の 見え方 (isVisible) で 見る こと。 */
[hidden]{display:none!important}
.topbar{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.topbar-in{display:flex;align-items:center;gap:var(--sp-5);height:56px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-md);color:var(--text);letter-spacing:.01em}
.logo:hover{text-decoration:none;color:var(--text)}
.logo-mark{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.topbar-nav{display:flex;gap:var(--sp-1)}
.topbar-nav a{color:var(--text-muted);font-size:var(--fs-sm);font-weight:600;padding:6px 10px;border-radius:var(--radius-sm)}
.topbar-nav a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.topbar-nav a.is-active{color:var(--accent);background:var(--accent-weak)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-weak);color:var(--accent);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700}
.crumbs{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text-muted);flex-wrap:wrap}
.crumbs a{color:var(--text-muted)}

/* ── タブ（上部） ── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto}
.tabs a{padding:9px 14px;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-group-label{font-size:var(--fs-xs);color:var(--text-faint);font-weight:600;align-self:center;padding:0 6px 0 12px;border-left:1px solid var(--border);white-space:nowrap}

/* ── サイドバー ── */
.side{width:220px;flex:none;padding:var(--sp-5) var(--sp-3)}
.side .s-group{font-size:var(--fs-xs);font-weight:700;color:var(--text-faint);letter-spacing:.04em;padding:var(--sp-4) var(--sp-3) var(--sp-1)}
.side a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}
.side a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.side a.is-active{background:var(--accent-weak);color:var(--accent)}
.side .s-badge{margin-left:auto;font-size:11px;font-weight:700;background:var(--danger);color:#fff;border-radius:var(--radius-full);padding:0 7px;line-height:18px}
.side .s-done{margin-left:auto;color:var(--success)}

/* ── ステップ・統計 ── */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .v{font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.stat .l{font-size:var(--fs-xs);color:var(--text-muted)}

/* ── 画像プレースホルダー ── */
.ph{background:repeating-linear-gradient(-45deg,var(--surface),var(--surface) 10px,#eef0f4 10px,#eef0f4 20px);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);text-align:center;padding:var(--sp-4)}

/* ── ユーティリティ ── */
.row{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap}
.row .spacer{flex:1}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}

@media (max-width:720px){
  .container{padding:0 var(--sp-4)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .topbar-nav{display:none}
  .side{width:100%;display:flex;overflow-x:auto;padding:var(--sp-2) var(--sp-3);gap:2px;border-bottom:1px solid var(--border)}
  .side .s-group{display:none}
  .side a{white-space:nowrap;flex:none}
  table.tbl{min-width:840px}
}

/* [Step 52-1] modal の 見出しは `.modal-head`(div) + `h3`。
   これまでの `.v2-modal h3` の 余白は 包む div が 持つ ので 中の h3 は 詰める。 */
.v2-modal .modal-head { margin: 0; }
.v2-modal .modal-head > h3 { margin: 0; padding: 0; border: none; font-size: var(--fs-md); }
.v2-modal .modal-head .modal-x { cursor: pointer; font-size: 18px; line-height: 1; }

/* [Step 52-1] ⚠ design の `.modal-backdrop` は **上下中央**だが、
   この アプリの modal は 中身を あとから 読む もの (表紙の 設定 等) が あり、
   中央だと 読み込みの たびに 箱が 上下に 動く
   (Playwright が 「element is not stable」で 落ちる。実測で 検出)。
   これまでどおり **上ぞろえ + スクロール**に 戻す。背景色・重なりは design に そろえる。 */
.v2-modal-mask.modal-backdrop {
  align-items: flex-start;
  padding: 60px 12px 20px;
  overflow-y: auto;
  background: rgba(31,35,40,.45);
  /* ⚠⚠ [Step 53] z-index を ここで そろえる。`.modal-backdrop`(z-index:50) は
     `.v2-modal-mask`(9000) と 同じ 強さで **後ろに ある ぶん 勝つ** ため、
     V2.modal が 作る modal は 実効 50 に なって いた。経理の `.drawer`(1000) の
     下に 潜り、調整行の 保存ボタンが 押せなかった (step-keiri-b が 240 秒 timeout)。
     この 2 class の 規則 (強さ 2) で 9000 に 戻す。 */
  z-index: 9000;
}

/* [Step 52-2] ヘッダーは design の `.topbar`。`.v2-header` は
   V2.loadHeader が 探す ため 残して あるので、外側の 余白・並びは 中の
   `.container.topbar-in` に 任せる。 */
header.v2-header.topbar { padding: 0; display: block; }
header.v2-header.topbar .brand,
header.v2-header.topbar a.logo { color: var(--text); font-size: var(--fs-md); }
header.v2-header.topbar a.logo:hover { color: var(--text); text-decoration: none; }
header.v2-header.topbar .topbar-nav a { color: var(--text-muted); }
header.v2-header.topbar .topbar-nav a.is-active { color: var(--accent); background: var(--accent-weak); }
header.v2-header.topbar select.org { padding: 5px 10px; font-size: var(--fs-sm); }
header.v2-header.topbar .me { background: none; border: none; padding: 0; }
/* 一覧が 0 件の ときの 案内 */
main.v2-main.container { padding-left: var(--sp-6); padding-right: var(--sp-6); }

/* ==========================================================================
   [Step 52-3] 大会編集 — design/events-ui/event-edit.html の 左サイドバー構造
   ・`.subhead` … 大会名・状態チップ・期日/会場・公開ページ
   ・`.wrap` … 左 `.side` (13 項目を 3 群) + 右 `.main`
   ・375px は **ドロワー** (☰ で 出す。design の 横スクロールでは なく 覆いつき)
   ========================================================================== */
.subhead { background: var(--bg); border-bottom: 1px solid var(--border); padding: var(--sp-4) 0; }
.wrap { display: flex; max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-6);
        gap: var(--sp-6); align-items: flex-start; }
.wrap > .side { position: sticky; top: 56px; border-right: 1px solid var(--border);
                min-height: calc(100vh - 130px); background: var(--bg); }
/* ⚠⚠ [2026-09-14] `max-width: none` だと **375px で ページごと 横に はみ出す**。
   `flex:1` ＋ `min-width:0` だけでは 足りず、中の 表 (`.v2-scroll-x` の 中で 流す 前提) の
   幅が そのまま main を 押し広げて いた。
   実測 (chare15 の TT・viewport 375): main **747px** / body.scrollWidth **763px**
   → `max-width:100%` に すると main **343px** / body **375px** で、
   表は `.v2-scroll-x` の 中で 横スクロールする (§53-7 の tt_shots S4)。
   ★ desktop では main は 1100px 前後で 上限に 当たらない ので 見た目は 変わらない。 */
.wrap > .main { flex: 1; min-width: 0; padding: var(--sp-6) 0 var(--sp-16); max-width: 100%; }
/* サイドバーの 項目は button (spec が #tabs button[data-tab] を 使う ため) */
.side button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; background: none; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-muted); cursor: pointer; text-align: left;
}
.side button:hover { background: var(--surface); color: var(--text); }
.side button.active, .side button.is-active { background: var(--accent-weak); color: var(--accent); }
/* [Step 53] 「大会後」は 結果が 入るまで 薄く 出す (押せる が、まだ 何も 無い ことを 見せる) */
.side button.is-dim { color: var(--text-faint); }
.side button.is-dim:hover { color: var(--text-muted); }
.side button.is-dim.is-active, .side button.is-dim.active { color: var(--accent); }
.side .s-done { margin-left: auto; color: var(--success); display: flex; }
.side .s-badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--danger);
                 color: #fff; border-radius: var(--radius-full); padding: 0 7px; line-height: 18px; }
.side .s-done + .s-badge { margin-left: 4px; }
.side .s-badge.is-count { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
/* [Step 52-3 小修正] 群ラベル (準備 / 受付 / 締切後) は 淡い 帯に して 境界を 見せる。
   ⚠ design/event-edit.html は 帯を 持たない (文字だけ)。意図して 外して いる。
   `.side` の 左右の 余白 (--sp-3) を 打ち消して サイドバーの 端まで 伸ばす。 */
.side .s-group {
  display: block;
  background: var(--surface); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  margin: var(--sp-4) calc(var(--sp-3) * -1) var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.side .s-group:first-child { margin-top: calc(var(--sp-2) * -1); }
#side-toggle { display: none; }
.side-mask { display: none; }

@media (max-width: 720px) {
  .wrap { flex-direction: column; padding: 0 var(--sp-4); }
  /* ドロワー: 既定は 画面外。☰ で 出す */
  .wrap > .side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 60;
    border-right: 1px solid var(--border); min-height: 0; overflow-y: auto;
    padding: var(--sp-4) var(--sp-3); box-shadow: var(--shadow-3);
    transform: translateX(-100%); transition: transform .18s ease-out; display: block;
  }
  .wrap > .side.is-open { transform: none; }
  .side-mask[hidden] { display: none; }
  .side-mask { display: block; position: fixed; inset: 0; background: rgba(31,35,40,.45); z-index: 55; }
  #side-toggle { display: inline-flex; }
  /* ドロワーでも 群ラベルは 出す (横スクロール型の 既定は `display:none`) */
  .wrap > .side .s-group { display: block; }
  .wrap > .main { padding-top: var(--sp-4); }
}

/* [Step 52-3] design の 表は **560px で 中を スクロール** (event-edit.html の
   `.table-scroll{max-height:560px;overflow-y:auto}`)。
   これが 無いと エントリー 975 行で ページが 32,000px に なる。
   ⚠ modal の 中には 効かせない (タブ本体の 表だけ)。 */
.v2-tab-body > section .v2-scroll-x,
.v2-tab-body > section .table-scroll { max-height: 560px; overflow-y: auto; }

/* [Step 55-B] 複製直後の 「仮の日付」— 基本情報の 開催日欄を 目立たせる。
   日付を 聞かずに 複製する 経路 (取込の 結果画面) が あり、
   共有 validator が `dates` を 必須に して いる ため 複製元 +364 日 が 入る。 */
.v2-field.is-provisional{background:var(--warn-weak);border:1px solid var(--warn-border);
  border-radius:var(--radius-sm);padding:var(--sp-3);margin:calc(var(--sp-2) * -1) 0 var(--sp-3)}
.v2-field.is-provisional .provisional-note{color:var(--warn);font-weight:700;
  font-size:var(--fs-sm);margin-bottom:var(--sp-2)}

/* ==========================================================================
   [Step 56 B] なりすましの 赤い帯
   ・画面の いちばん 上に **固定**。どの 画面でも 常に 見える
   ・帯のぶん 本文を 押し下げる (has-imp-bar)。ヘッダーに かぶせない
   ・375px では 2 段に 折り返す
   ========================================================================== */
.v2-imp-bar{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 14px;
  background:#b3261e; color:#fff;
  font-size:13px; line-height:1.5;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
}
.v2-imp-bar .imp-mark{ font-size:10px; opacity:.9 }
.v2-imp-bar .imp-text{ font-weight:700 }
.v2-imp-bar .imp-sub{ opacity:.92; font-size:12px }
.v2-imp-bar .imp-end{
  margin-left:auto;
  padding:4px 12px; border:1px solid #fff; border-radius:6px;
  background:transparent; color:#fff; font-size:12px; font-weight:700; cursor:pointer;
}
.v2-imp-bar .imp-end:hover{ background:#fff; color:#b3261e }
/* 帯のぶん 本文を 下げる。ヘッダーが sticky でも かぶらない。
   ⚠ 高さは **JS が 実測して** --imp-bar-h に 入れる。
      breakpoint ごとの 決め打ちだと 折り返した ときに ヘッダーが 隠れる。
      44px は JS が 走る 前の 保険。 */
html.has-imp-bar body{ padding-top:var(--imp-bar-h, 44px) }
html.has-imp-bar header.v2-header,
html.has-imp-bar .topbar{ top:var(--imp-bar-h, 44px) }
@media (max-width:640px){
  .v2-imp-bar{ font-size:12px; padding:7px 10px; gap:6px }
  .v2-imp-bar .imp-sub{ flex-basis:100%; font-size:11px }
  .v2-imp-bar .imp-end{ margin-left:auto; padding:3px 10px }
}
   [ヘッダー 2 段] ロゴ・ナビ・団体・ユーザー・操作ボタンが 1 行に 収まらず
   1878px でも 文字が **縦に 折れて いた** (本番で 実測)。2 段に 分ける。

     上段 (.hdr-r1) … ロゴ / 団体セレクト (最大 280px) / 右端に ユーザーメニュー
     下段 (.hdr-r2) … ナビ (nowrap) / 右に ＋新しい団体・＋大会を作る・?

   ⚠ markup は `v2.js` の `buildHeaderShell()` が 1 か所で 組む (26 画面 × 3 世代)。
   ⚠ 高さ・余白・角丸は design の トークン (--fs-* / --sp-* / --radius) だけを 使う。
   ========================================================================== */
header.v2-header.hdr2 { padding: 0; display: block; }
header.v2-header.hdr2 .hdr-r1 { border-bottom: 1px solid var(--border); }
header.v2-header.hdr2 .hdr-in {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 1360px; min-height: 52px;
}
header.v2-header.hdr2 .hdr-r2 .hdr-in { min-height: 46px; }
header.v2-header.hdr2 .hdr-sp { flex: 1 1 auto; min-width: var(--sp-2); }

/* ロゴ */
header.v2-header.hdr2 .logo,
header.v2-header.hdr2 .brand {
  color: var(--text); font-size: var(--fs-md); font-weight: 700;
  white-space: nowrap; flex: none; text-decoration: none;
}
header.v2-header.hdr2 .logo:hover,
header.v2-header.hdr2 .brand:hover { color: var(--text); text-decoration: none; }

/* 団体セレクト — 幅は 団体名に 合わせ **最大 280px** */
header.v2-header.hdr2 .hdr-org { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
header.v2-header.hdr2 select.org {
  width: auto; max-width: 280px; padding: 5px 10px;
  font-size: var(--fs-sm); border-radius: var(--radius-sm);
  text-overflow: ellipsis;
}
header.v2-header.hdr2 .org-note {
  flex: none; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--accent-weak); color: var(--accent);
  border: 1px solid var(--accent-border);
}

/* ユーザーメニュー (メールアドレスは 直接 出さない) */
header.v2-header.hdr2 .hdr-user { position: relative; flex: none; }
header.v2-header.hdr2 .user-btn {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; border-radius: var(--radius-full);
}
header.v2-header.hdr2 .user-btn:hover { text-decoration: none; }
header.v2-header.hdr2 .user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-weak); color: var(--accent);
  border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1;
}
header.v2-header.hdr2 .user-btn:hover .user-avatar { background: var(--accent); color: #fff; }
header.v2-header.hdr2 .user-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 900; min-width: 240px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 0 0 var(--sp-1);
}
header.v2-header.hdr2 .user-menu[hidden] { display: none; }
header.v2-header.hdr2 .user-menu-head {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}
header.v2-header.hdr2 .user-menu-head .user-name {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
  word-break: break-all;
}
header.v2-header.hdr2 .user-menu-head .me {
  display: block; background: none; border: none; padding: 0;
  font-size: var(--fs-xs); color: var(--text-muted); word-break: break-all;
}
header.v2-header.hdr2 .user-menu-item {
  display: block; padding: var(--sp-2) var(--sp-4); text-decoration: none;
  color: var(--text); font-size: var(--fs-sm); white-space: nowrap;
}
header.v2-header.hdr2 .user-menu-item:hover { background: var(--accent-weak); text-decoration: none; }
header.v2-header.hdr2 .user-menu-item .hint {
  display: block; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap;
}
header.v2-header.hdr2 .user-menu-item.is-danger { color: var(--danger); }
header.v2-header.hdr2 .user-menu-item.is-danger:hover { background: var(--danger-weak); }

/* ナビ — 文字は 折り返さない */
header.v2-header.hdr2 nav.topbar-nav {
  display: flex; gap: var(--sp-1); min-width: 0; align-items: center;
}
header.v2-header.hdr2 nav.topbar-nav a {
  white-space: nowrap; flex: none;
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
  padding: 6px 10px; border-radius: var(--radius-sm);
}
header.v2-header.hdr2 nav.topbar-nav a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
header.v2-header.hdr2 nav.topbar-nav a.is-active { color: var(--accent); background: var(--accent-weak); }

/* 操作ボタン — 高さ・余白・角丸を そろえる */
header.v2-header.hdr2 .hdr-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
header.v2-header.hdr2 .hdr-actions .btn,
header.v2-header.hdr2 .hdr-actions button {
  white-space: nowrap; flex: none;
  min-height: 32px; padding: 0 var(--sp-3);
  font-size: var(--fs-sm); border-radius: var(--radius-sm);
}

/* ☰ は 375px でだけ 出す */
header.v2-header.hdr2 .hdr-burger {
  display: none; flex: none; cursor: pointer;
  min-height: 32px; padding: 0 var(--sp-3);
  font-size: var(--fs-md); line-height: 1;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.hdr-mask { display: none; }

/* 〜900px: ナビを 横スクロール (文字は 折らない) */
@media (max-width: 900px) {
  header.v2-header.hdr2 nav.topbar-nav {
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header.v2-header.hdr2 nav.topbar-nav::-webkit-scrollbar { display: none; }
  header.v2-header.hdr2 .hdr-r2 .hdr-sp { flex: 0 0 var(--sp-2); }
  header.v2-header.hdr2 .hdr-actions .btn,
  header.v2-header.hdr2 .hdr-actions button { padding: 0 var(--sp-2); }
}

/* 〜560px (375 を 含む): ナビは ☰ ドロワー (§48 の 作りに そろえる) */
@media (max-width: 560px) {
  header.v2-header.hdr2 .hdr-in { gap: var(--sp-2); }
  header.v2-header.hdr2 .hdr-burger { display: inline-flex; align-items: center; }
  header.v2-header.hdr2 nav.topbar-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 2px; overflow-y: auto;
    background: var(--bg); border-right: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-3); box-shadow: var(--shadow-3);
    transform: translateX(-100%); transition: transform .18s ease-out;
  }
  header.v2-header.hdr2 nav.topbar-nav.is-open { transform: none; }
  .hdr-mask[hidden] { display: none; }
  .hdr-mask { display: block; position: fixed; inset: 0; background: rgba(31,35,40,.45); z-index: 55; }
  header.v2-header.hdr2 select.org { max-width: 150px; }
  header.v2-header.hdr2 .logo .logo-mark { margin-right: 0; }
}
/* 375px では ロゴの 文字を 畳んで A の 印だけに する (団体名を 優先) */
@media (max-width: 420px) {
  /* ⚠ `header.v2-header.topbar a.logo{font-size:var(--fs-md)}` (0,3,2) が 上に ある。
     `.logo` (0,3,1) では **詳細度で 負けて 効かない** (実測: 15px の まま)。
     `a.logo` に して 勝たせる。 */
  header.v2-header.hdr2 a.logo { font-size: 0; gap: 0; }
  header.v2-header.hdr2 a.logo .logo-mark { font-size: 13px; }
  header.v2-header.hdr2 select.org { max-width: 170px; }
}
header.v2-header.hdr2 .user-menu-wait {
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted);
}

/* 取込履歴 — 日時〜実行者を 1 画面に 収める (cid では なく 名前を 出す。cid は title) */
#t-res-jobs .res-file { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
#t-res-jobs .res-actor { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* ⚠ 既存の `@media (max-width:720px){ .topbar-nav{display:none} }` (§52-3) に
   負けない ように、ナビの `display` は **詳細度で 勝つ 書き方**で 上書きして ある
   (`header.v2-header.hdr2 nav.topbar-nav{display:flex}` = 0,3,2 ＞ `.topbar-nav` = 0,1,0)。
   これが 無いと 561〜720px で ナビが 丸ごと 消え、375 の ドロワーも 開かない。 */

/* [Step 41] 「この大会は ○○ の大会です」の 案内は セレクトの 横。
   長い 団体名で 上段が はみ出さない ように 縮める。 */
header.v2-header.hdr2 .org-context-note {
  min-width: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 560px) {
  header.v2-header.hdr2 .hdr-org { flex-wrap: wrap; }
  header.v2-header.hdr2 .org-context-note { max-width: 100%; }
}

/* [Step 56-I] 主催者が 読取で 見て いる ときの 「押せない」表示。
   ⚠ 見えなく しない — 「責任者には ここに ボタンが ある」ことが 伝わらなく なる。
   ⚠ 画面を 止めるのは 案内の ため。本当の 錠は サーバー (GET しか 通さない)。 */
.ro-off {
  opacity: .45;
  pointer-events: none;
  cursor: default;
  filter: grayscale(1);
}

/* [Step 56-K] 大会設定で **要項どおりに 入れないと 受付が 止まる** 区画の 見出し。
   ⚠ 畳んで いても 目に 入る ように 見出し そのものに 帯を 付ける。 */
h2.v2-h2.v2-h2-key,
.v2-h2-key {
  border-left: 4px solid var(--accent, #1463E0);
  background: var(--accent-weak, #eff6ff);
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
}
.v2-key-tag {
  display: inline-block;
  background: var(--accent, #1463E0);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 6px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: 2px;
}
/* [Step 56-K] 採番方式に 合わない ビブス採番オプションは 灰色 (見えるが 触れない) */
.bo-na-body .v2-collapse-body,
.bo-na-body .v2-field,
.bo-na-body .v2-4col {
  opacity: .5;
  filter: grayscale(1);
}