/* 全画面共通レイアウトの土台。Task0時点は最小限のリセットのみ。
   画面ごとのスタイルはStep2以降、各画面実装時にmockup/を参照して追加する。 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #1e211d;
  background: #f7f6f2;
  /* [2026-08-27 UI改善(2)] イベント編集画面(#step-nav/.step-panel)で、
     JSがレイアウト高さ・表示要素を書き換えるたびにブラウザの「スクロール
     アンカリング」が働き、window.scrollTo(0,0)で戻したはずのスクロール
     位置が数十px分ズレて再表示されてしまう不具合があったため無効化した。
     このプロパティは可視範囲外のコンテンツサイズ変化に合わせてスクロール
     位置を自動調整するヒューリスティックのみを止めるもので、他画面の
     通常のスクロール動作には影響しない。 */
  overflow-anchor: none;
}

#app-main {
  min-height: 100vh;
  padding-bottom: 64px; /* footer分の余白 */
}

#app-footer {
  padding: 16px;
  text-align: center;
  font-size: 12px;
}

#app-footer a {
  color: #6c6a61;
  text-decoration: none;
}

#feedback-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
}

#feedback-fab-trigger {
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: #2f5496;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

/* Task1: 団体アカウント認証まわりの最小限のスタイル。
   画面デザインは作り込まない方針(開発プロセス表)のため機能確認レベル。 */
.auth-page {
  max-width: 420px;
  margin: 64px auto;
  padding: 32px;
  background: #fff;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
}

.auth-page h1 {
  font-size: 20px;
  margin: 0 0 16px;
}

.auth-note {
  font-size: 13px;
  color: #6c6a61;
}

.tagline {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
}

.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.form-row input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 14px;
}

/* 【第1回優先改修①②③・2026-09-08】参加時間帯・プログラム簡易登録の
   開始/終了時刻を、日付ピッカー+分割selectから単一の<select>へ統一した
   ことに伴うスタイル追加(.form-row inputと揃える)。 */
.form-row select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

/* 開催日程・参加時間帯:日付ピッカー + 10分刻みselectの分割ウィジェット
   (2026-08-22)。datetime-local単体のstep属性はスピナー操作しか
   10分刻みにできず手入力を防げないため、選べる値そのものを
   <select>で10分刻みに限定する方式へ変更した。 */
.split-datetime {
  display: flex;
  gap: 8px;
}

.split-datetime input[type="date"],
.split-datetime select {
  padding: 8px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.split-datetime input[type="date"] {
  flex: 1 1 60%;
  min-width: 0;
}

.split-datetime select {
  flex: 1 1 40%;
  min-width: 0;
}

.form-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical; /* 横方向のリサイズは禁止、縦方向のみ可 */
}

.form-row .field-help {
  font-size: 11.5px;
  color: #6c6a61;
  margin: 4px 0 0;
}

/* [Task4] プログラム簡易登録モーダルの開催日・エリア(読み取り専用表示)。
   誤操作防止を優先し、選択操作ではなく確認用のテキストとして表示する。 */
.field-static {
  margin: 0;
  padding: 8px 10px;
  background: #f7f6f2;
  border: 1px solid #ddd9cd;
  border-radius: 4px;
  font-size: 14px;
  color: #1e211d;
}

.errorlist {
  color: #a03434;
  font-size: 12.5px;
  padding-left: 0;
  list-style: none;
  margin: 4px 0 0;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 4px;
  border: 1px solid #bdb8a8;
  background: #fff;
  color: #1e211d;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.btn-primary {
  background: #2f5496;
  border-color: #2f5496;
  color: #fff;
}

.btn-danger {
  background: #a03434;
  border-color: #a03434;
  color: #fff;
}

.auth-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.auth-links {
  margin-top: 20px;
  font-size: 13px;
}

.callout-warn {
  background: #fbf0df;
  border-left: 4px solid #a1590a;
  padding: 12px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

.callout-warn form {
  margin-top: 8px;
}

/* [Phase1改修・2026-09-14 指示書2] 警告色(callout-warn)とは別の、操作説明用の
   ニュートラルな案内ボックス。 */
.callout-info {
  background: #eaf1f7;
  border-left: 4px solid #2f6fa8;
  padding: 12px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Task2: ご意見・ご要望モーダル */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 33, 29, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 8px 30px rgba(30, 33, 29, 0.25);
}

.modal h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.modal-note {
  font-size: 12.5px;
  color: #6c6a61;
  margin: 0 0 14px;
}

.modal textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.feedback-error {
  color: #a03434;
  font-size: 12.5px;
  margin: 8px 0 0;
}

/* 【第2回優先改修⑦-3・2026-09-08】django.contrib.messagesの汎用表示枠
   (templates/base.html参照)。メッセージが無い限り描画されないため、
   既存画面の見た目には影響しない。 */
.page-messages {
  max-width: 960px;
  margin: 16px auto 0;
  padding: 0 20px;
}

.page-message {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
  border: 1px solid transparent;
}

.page-message-error {
  background: #fbeaea;
  border-color: #e0b4b4;
  color: #a03434;
}

.page-message-success {
  background: #eaf6ea;
  border-color: #b7dcb7;
  color: #2d6a2d;
}

.page-message-info,
.page-message-warning {
  background: #f7f7f2;
  border-color: #ddd9cd;
  color: #555;
}

#feedback-success p {
  font-size: 14px;
}

/* Task3: イベント一覧・作成・編集・削除 */
.page {
  max-width: 640px;
  margin: 48px auto;
  padding: 0 20px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.page-header h1 {
  font-size: 20px;
  margin: 0;
}

.page > h1 {
  font-size: 20px;
  margin: 0 0 16px;
}

.page-note {
  font-size: 12.5px;
  color: #6c6a61;
  margin: 0 0 16px;
}

.balance-note {
  font-size: 13px;
  color: #6c6a61;
  margin: 0 0 20px;
}

.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.event-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #ddd9cd;
}

.event-list-info {
  min-width: 0;
}

.event-list-name {
  font-weight: 600;
}

.event-list-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.event-meta {
  color: #6c6a61;
  font-size: 13px;
}

.page-meta {
  margin-top: 16px;
  font-size: 13px;
  color: #6c6a61;
}

/* Task3b: 開催日程・エリア・活動枠・お知らせ・FAQセクション */
.page-wide {
  max-width: 720px;
}

/* [2026-08-27 UI改善] 縦1列(STEP一覧→各編集フォームが下に連なる)から、
   左ナビ(STEP一覧・約30%)+右パネル(選択中のSTEPの編集画面のみ・約70%)の
   2カラムへ変更。編集画面が増えてもスクロール量・目的の項目の探しにくさが
   増えないようにするため。左ナビでの選択に応じて右パネル側のSTEPセクション
   をJS(initStepLayout, app.js)で出し分ける。 */
.page-wide.has-step-layout {
  max-width: 960px;
}

/* [修正指示A-1・2026-09-10] 左ナビ・右パネルをそれぞれ内部スクロールさせる
   構成(高さをJSで測定してCSS変数--step-layout-heightへ反映し、
   .step-panel/.step-sidebarにoverflow-y:autoを効かせる方式)は廃止した。
   フレーム内スクロールが複数箇所にできてしまい分かりにくいという指摘のため、
   画面全体スクロールのみに統一する。左ナビ(.step-sidebar)は
   position: stickyのみ残す(スクロールコンテナを増やさずに画面内へ留める
   ための一般的な手法で、フレーム内スクロールには当たらない)。 */
.step-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 24px 0 32px;
}

/* [2026-08-27 UI改善(3)] STEP一覧カード(.step-nav)の直下に、操作メニュー
   カード(.step-actions:イベント全体図へ進む/イベント一覧へ戻る/削除)を
   追加。両カードを1つの左サイドバーとしてまとめ、常時固定表示
   (position: sticky)・右パネルとは独立したスクロール対象になるのは
   この.step-sidebar単位。カード間はgapの余白のみで視覚的に区切り、
   罫線などは追加していない(それぞれが独立した枠付きカードのため)。 */
.step-sidebar {
  flex: 0 0 30%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

.step-nav {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
}

.step-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
}

.step-actions-title {
  font-size: 13px;
  color: #6c6a61;
  margin: 0 0 4px;
}

.step-actions-btn {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.step-panel {
  flex: 1;
  min-width: 0;
}

.step-panel .form-section {
  margin: 0;
  padding-top: 0;
  border-top: none;
}

.form-section {
  margin: 32px 0;
  padding-top: 24px;
  border-top: 1px solid #ddd9cd;
}

.section-title {
  font-size: 16px;
  margin: 0 0 6px;
}

.form-row-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

.form-row-checkbox input[type="checkbox"] {
  width: auto;
}

.item-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.item-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #ddd9cd;
  font-size: 13.5px;
}

.btn-delete-item {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid #a03434;
  color: #a03434;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

/* [Phase5追加機能・2026-09-10 機能①] スタッフ特技カテゴリの↑/↓並び替え
   ボタン(ドラッグ&ドロップは使わない。改修4で判明した複雑さ・不具合
   リスクを避けるための単純な実装)。 */
.step-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-move-item {
  padding: 4px 8px;
  border: 1px solid #bdb8a8;
  color: #1e211d;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.btn-move-item:hover {
  background: #f7f6f2;
}

/* [修正指示A-2・2026-09-10] FAQ一覧の「編集」(<details>による開閉編集フォーム)。
   削除ボタンをdetails外に置くため、liはflex-start寄せに上書きする。 */
.item-list-editable {
  align-items: flex-start !important;
}

.item-edit-details {
  flex: 1;
  min-width: 0;
}

.item-edit-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.item-edit-details summary::-webkit-details-marker {
  display: none;
}

.btn-edit-item {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid #bdb8a8;
  color: #1e211d;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
}

.item-edit-details[open] summary {
  margin-bottom: 8px;
}

.inline-add-form {
  background: #f7f6f2;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
  padding: 14px 16px;
}

/* ---------------------------------------------------------------------
   【STEP3改修・2026-09-08】開催日程・参加可能枠の管理UI刷新。
   ・開催日登録フォームは画面最上部に固定(.day-register-card)。
   ・開催日はカード形式(.day-card)。折りたたみ可能、上部ボタンは
     「他の日程にコピー」「削除」のみ(編集ボタンは置かない。日時は
     カード内でその場編集→自動保存)。
   ・参加可能枠はテーブル形式(.slot-table)。最下部に追加行を常時表示し、
     編集も行内(モーダル不使用)。
   詳しくはtemplates/events/event_form.html STEP3セクションのコメント参照。
   --------------------------------------------------------------------- */

.day-register-card {
  background: #eef2fb;
  border: 1px solid #c7d3ee;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.day-register-title {
  font-weight: 700;
  font-size: 14px;
  color: #2f5496;
  margin-bottom: 10px;
}

.day-register-fields {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.day-register-fields .form-row {
  margin-bottom: 0;
}

.day-register-tilde {
  padding-bottom: 9px;
  color: #6c6a61;
}

.section-subtitle {
  font-size: 14px;
  font-weight: 700;
  margin: 4px 0 10px;
}

.day-card {
  border: 1px solid #ddd9cd;
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}

.day-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f7f6f2;
}

/* 【STEP3 UI最終修正・2026-09-09】アコーディオンを廃止したため、見出しは
   ボタンではなく常時展開の静的な行にした(旧.day-card-toggle/.day-card-
   chevronは廃止)。右端の削除ボタンを押し出すための余白要素のみ残す。 */
.day-card-spacer {
  flex: 1;
}

.day-card-badge {
  flex-shrink: 0;
  background: #2f5496;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 4px;
}

.day-card-date {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.day-card-time {
  color: #6c6a61;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.day-card-body {
  padding: 14px;
  border-top: 1px solid #eee;
}

.day-edit-form {
  margin-bottom: 16px;
}

/* 【STEP3 UI最終修正・2026-09-09】「スタッフ参加方法」の2択ラジオ。
   選択肢は横並び(タブ/ピル風)にして、どちらが選ばれているか一目で
   分かるようにする。説明文は置かず、ラベル文言だけで理解できるようにする
   (指示書「不要な説明文は極力排除する」方針)。 */
.participation-mode-radios {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.participation-mode-option {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ddd9cd;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  cursor: pointer;
}

.participation-mode-option:has(input:checked) {
  border-color: #2f5496;
  background: #eef2fb;
  color: #2f5496;
  font-weight: 700;
}

.slot-area-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.day-edit-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.day-edit-fields .form-row {
  margin-bottom: 6px;
}

.day-card-copy-panel {
  padding: 12px 14px;
  background: #fffaf0;
  border-top: 1px solid #f0e4c8;
}

.day-card-copy-panel[hidden] {
  display: none;
}

.day-card-copy-note {
  font-size: 13px;
  margin: 0 0 8px;
}

.day-card-copy-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
}

.day-card-copy-actions {
  display: flex;
  gap: 8px;
}

.slot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.slot-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #6c6a61;
  padding: 6px 8px;
  border-bottom: 1px solid #ddd9cd;
  white-space: nowrap;
}

.slot-table td {
  padding: 8px;
  border-bottom: 1px solid #f2f2f2;
  vertical-align: middle;
}

.slot-row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.slot-edit-row[hidden],
.slot-row[hidden] {
  display: none;
}

.slot-edit-row td {
  background: #fbf8ef;
}

.slot-edit-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.slot-edit-fields input[type="text"],
.slot-edit-fields select {
  padding: 6px 8px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}

.slot-name-input {
  width: 140px;
}

.slot-memo-input {
  flex: 1;
  min-width: 120px;
}

/* [2026-08-27 UI改善] STEP一覧(左ナビ)。以前は縦1列レイアウトの先頭に
   置く「設定状況サマリー(.step-overview)」だったが、2カラム化に伴い
   .step-navの中身として常時表示するナビゲーションへ役割を変更した。 */
.step-nav-title {
  font-size: 13px;
  color: #6c6a61;
  margin: 0 0 10px;
}

.step-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.step-nav-item {
  border-bottom: 1px dashed #ddd9cd;
}

.step-nav-item:last-child {
  border-bottom: none;
}

.step-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 4px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}

.step-nav-btn:hover {
  background: #f7f6f2;
}

.step-nav-btn.is-active {
  background: #eaf0fa;
}

.step-nav-marker {
  flex-shrink: 0;
  width: 10px;
  font-size: 11px;
  color: #2f5496;
  visibility: hidden;
}

.step-nav-btn.is-active .step-nav-marker {
  visibility: visible;
}

.step-badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2f5496;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-nav-body {
  flex: 1;
  min-width: 0;
}

.step-nav-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e211d;
}

.step-nav-btn.is-active .step-nav-name {
  color: #2f5496;
}

.step-nav-status {
  flex-shrink: 0;
  font-size: 12.5px;
  color: #6c6a61;
  white-space: nowrap;
}

/* 画面幅が狭い場合は左ナビ+右パネルの横並びをやめ、縦積みにフォールバックする */
@media (max-width: 720px) {
  /* 狭い画面では左右2ペインの固定高さレイアウトをやめ、通常の縦積み+
     ページ全体スクロールに戻す(左ナビだけを画面内固定にする意味が
     薄いスマホ幅のため)。 */
  .step-layout {
    flex-direction: column;
    height: auto;
  }

  .step-nav,
  .step-panel {
    max-width: none;
    width: 100%;
    overflow-y: visible;
  }
}

/* [2026-08-27 UI改善(3)] イベント全体図・イベント一覧・削除は、STEP一覧
   カード直下の「操作メニュー」カード(.step-actions)へ統合したため、
   ここにあった専用スタイル(.edit-footer-actions/.danger-zone/.link-danger)
   は廃止した。 */

.empty-note {
  font-size: 13px;
  color: #6c6a61;
  margin: 0 0 16px;
}

/* [Task4] ④全体進行表。mockup/02/mockup/screens/schedule-matrix.htmlの
   マトリクスデザインを移植。ページ全体の配色・余白等の基本トーンはEVENT
   BASE+共通のトークン(#ddd9cd/#6c6a61/#2f5496等)に合わせているが、
   マトリクス本体(エリアの配色・ブロックの絶対配置)はモックアップの
   js/app.js(ROW_H=32px/時、AREA_COLORS)をそのまま踏襲している。 */

/* [Task4 UI改善(2)] 「モックアップとの乖離が大きい」という指摘を受け、
   左サイドバー方式(.overview-nav等・前回実装)から、モックアップ本来の
   構造(ダーク背景のイベント名バー→横並びサブナビ→パンくず→ページ
   タイトル→Dayタブ→マトリクス、すべて縦1列)へ作り直した。
   イベント名バー・サブナビはcomponents/_event_topbar.htmlに切り出して
   おり、ここではそのスタイルを定義する
   (色・寸法はmockup/css/style.cssの.topbar/.subnavをそのまま踏襲)。 */
.event-topbar {
  background: #1b2436;
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* [修正指示C-9・2026-09-10] 出店者管理系画面(出店申込管理・料金備品
   マスター管理)専用のターコイズ配色。既存の--exh-primaryをそのまま使い、
   出店者管理内で色が割れないようにする。 */
.event-topbar--exhibitor {
  background: var(--exh-primary);
}

/* [修正指示C-9] アカウントメニューをヘッダー帯の右端へ埋め込む
   (base.htmlの白い帯に表示していたのをやめた)。帯が濃色のため、
   トリガー部分の文字色だけ白系に上書きする(ドロップダウン自体は
   読みやすさのため白背景のまま)。 */
.event-topbar-account {
  margin-left: auto;
}

.event-topbar-account .account-menu-trigger {
  color: #fff;
}

.event-topbar-account .account-menu-trigger:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.event-topbar-account .account-menu-caret {
  color: rgba(255, 255, 255, 0.75);
}

.event-topbar-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* [Task4 追加修正] 左上表示を「EVENT BASE+ {イベント名}」の形式へ変更。
   「EVENT BASE+」部分だけクリック可能(イベント一覧へ遷移)にし、
   イベント名は現在地確認用の非リンクテキストのまま。 */
.event-topbar-brand {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.event-topbar-brand:hover {
  text-decoration: underline;
}

.event-topbar-event-name {
  font-size: 17px;
  font-weight: bold;
}

.event-topbar-meta {
  font-size: 11px;
  color: #9aa5c0;
  text-align: right;
}

.event-subnav {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
  padding: 0 16px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.event-subnav a {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #888;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.event-subnav a:hover {
  color: #2f5496;
}

.event-subnav a.is-active {
  color: #2f5496;
  border-bottom-color: #2f5496;
  font-weight: 700;
}

/* ページ本体(パンくず〜マトリクス)。
   [2026-08-29 導線見直し・全体進行表を主役にする改修] 従来はmax-width:1240px
   (mockupのmain.page基準)にしていたが、フルHD(1920px)はもちろんノートPC
   (1366px)でもこの上限に達してしまい、EVENT BASE+の主役画面であるはずの
   全体進行表の左右に不必要な余白が残っていた。上限は「4K等の超ワイド画面で
   1行が間延びしすぎるのを防ぐための保険」という当初の意図はそのまま活かし、
   数値だけを実運用で想定する画面幅(フルHD以下)には効かない大きさへ引き上げる。
   .pageのmargin:48px auto/padding:0 20pxもここで上書きし、余白を切り詰める。 */
.page-overview {
  max-width: 2400px;
  margin: 28px auto;
  padding: 0 24px;
}

.breadcrumb {
  color: #6c6a61;
  font-size: 12.5px;
  margin: 20px 0 6px;
}

.overview-pagetitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.overview-pagetitle h1 {
  font-size: 21px;
  margin: 0;
}

.overview-pagetitle-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.overview-day-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

/* 【全体進行表UI修正・2026-09-09】現在選択中のDayの開催日時。イベント全体の
   開催期間一覧(旧.overview-period、廃止)ではなく、選択中の1件だけを
   タイムテーブル直上に表示する。指示書「文字が小さくならないように、
   視認性の高い文字サイズと太さで表示」に対応し、旧来より一回り大きく
   太いスタイルにした。 */
.overview-current-day {
  font-size: 15.5px;
  font-weight: 700;
  color: #1b2436;
  margin: 2px 0 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* [不具合修正・2026-09-09] .overview-current-dayがdisplay:flexを明示指定
   しているため、ブラウザ既定の[hidden]{display:none}より自分の指定が
   優先されてしまい、Dayタブを切り替えても非選択中のDayの開催日時が
   消えず、全Day分が縦に並んで表示され続ける不具合があった(このセッション
   で発見・修正。apps/core/staff_occupancy.pyの.occ-day-meta[hidden]と
   同じ既知の修正パターン)。ここで明示的に上書きする。 */
.overview-current-day[hidden] {
  display: none;
}

.overview-current-day-icon {
  font-size: 17px;
}

.overview-current-day-label {
  color: #2f5496;
}

.overview-current-day-value {
  font-variant-numeric: tabular-nums;
}

/* 【Phase3改修⑭・2026-09-08】Dayタブ自体に開催日・開催時間を表示するため
   2行構成にした(以前はDay番号+日付のみの1行)。 */
.overview-day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid #ddd9cd;
  background: #fff;
  color: #555;
  padding: 7px 18px 8px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.overview-day-tab.is-active {
  background: #2f5496;
  border-color: #2f5496;
  color: #fff;
}

.overview-day-tab-label {
  white-space: nowrap;
}

.overview-day-date {
  opacity: .7;
  margin-left: 6px;
  font-size: 11px;
}

.overview-day-tab-time {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  opacity: .8;
  white-space: nowrap;
}

.spec-note {
  font-size: 12px;
  color: #6c6a61;
  margin: 10px 0 0;
}

.matrix-wrap {
  background: #fff;
  border: 1px solid #ddd9cd;
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 8px;
}

.matrix {
  display: flex;
}

.matrix-time-col {
  width: 54px;
  flex-shrink: 0;
}

.matrix-time-col .matrix-head {
  height: 30px;
}

.matrix-marks {
  position: relative;
}

.matrix-mark {
  position: absolute;
  font-size: 10px;
  color: #999;
}

.matrix-area-col {
  flex: 1;
  min-width: 165px;
  border-left: 1px solid #eee;
}

.matrix-area-col .matrix-head {
  height: 30px;
  padding: 0 6px 0 10px;
  font-size: 12.5px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #f7f7f7;
  border-bottom: 1px solid #ddd9cd;
}

/* 【第2回優先改修⑥・2026-09-08】④全体進行表(.overview-matrix-page)限定で、
   タイムテーブル本体(.matrix-wrap)にページ全体とは独立した縦スクロール
   領域を持たせる。他画面(⑥必要人員計画・スタッフ稼働表)は同じ
   .matrix-wrap/.matrix-headクラスを使い回しているため、影響が及ばないよう
   .overview-matrix-pageの子孫セレクタとしてのみ定義する(見出し・Dayタブ・
   開催期間表示・操作説明は.matrix-wrapの外側にあるため、この変更だけで
   自然に固定表示のまま残る)。
   高さはstatic/js/app.jsのsyncOverviewMatrixHeight()がビューポート残り
   高さを実測してCSS変数--matrix-wrap-heightへ反映する(.step-sidebarの
   --step-layout-heightと同じ考え方。JS無効時はcalc()のフォールバック値を
   使うため、真っ白になったり操作不能になったりはしない)。 */
.overview-matrix-page .matrix-wrap {
  overflow: auto;
  max-height: var(--matrix-wrap-height, calc(100vh - 320px));
  overscroll-behavior: contain;
}

/* 時間軸ヘッダー(空欄スペーサー)・各エリアヘッダーを、.matrix-wrap内部の
   スクロールに対してsticky固定する。縦スクロール中も「今どのエリアを
   見ているか」が分かるようにするため(指示書の必須動作)。時間軸側は
   base色が指定されていない(透過)ため、スクロール中に背後のプログラム
   ブロックが透けて見えないよう明示的に白背景を敷く。 */
.overview-matrix-page .matrix-time-col .matrix-head,
.overview-matrix-page .matrix-area-col .matrix-head {
  position: sticky;
  top: 0;
  z-index: 2;
}

.overview-matrix-page .matrix-time-col .matrix-head {
  background: #fff;
}

.matrix-head-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [Task4 追加実装] エリア名横の「＋」ボタン。押すとそのエリア・表示中の
   Dayを引き継いだ簡易プログラム登録モーダルを開く(initProgramQuickCreate,
   app.js)。目立ちすぎないサイズの丸ボタンにしつつ、ホバー時に強調色へ
   変える(追加の入口であることが分かるように)。 */
/* 【Phase3改修⑯・2026-09-08】説明文(⑮で削除)が無くても「ここから追加する」
   と直感的に分かるよう、円形ボタンの存在感を大きく強化した(以前は
   18px・白背景+薄いグレー枠のみで見つけづらかった)。イベントメインカラー
   (#2f5496、全体進行表の強調色と統一)で常時塗り、影を付けて浮き上がらせ、
   ホバー時はさらに濃く+わずかに拡大する。 */
.matrix-add-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #2f5496;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(47, 84, 150, .45);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.matrix-add-btn:hover,
.matrix-add-btn:focus-visible {
  background: #24406f;
  box-shadow: 0 3px 8px rgba(47, 84, 150, .6);
  transform: scale(1.12);
}

.matrix-track {
  position: relative;
}

.matrix-hline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed #eee;
}

.matrix-prog-block {
  position: absolute;
  display: block;
  appearance: none;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  padding: 6px 7px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  text-align: left;
  text-decoration: none;
  border: none;
  line-height: 1.35;
  font-family: inherit;
}

.matrix-prog-block:hover {
  filter: brightness(1.08);
}

.matrix-prog-block .pname {
  font-weight: bold;
}

.matrix-prog-block .pname-late {
  display: block;
  font-size: 9.5px;
  opacity: .85;
}

.matrix-prog-block .pcount {
  opacity: .85;
  font-size: 10.5px;
  margin-top: 1px;
}

/* 【第1回優先改修④・2026-09-08】以前は<a href="...program_management...">
   (旧「プログラム管理」画面への遷移リンク)だったが、.matrix-add-btnと同じ
   その場モーダル方式に統一したため<button type="button">に変更した。
   見た目(全面塗り足しの薄いプレースホルダー枠)はそのまま維持するための
   リセット(border/background/font/cursor)を追加している。 */
.matrix-empty-cell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 12px;
  text-decoration: none;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.matrix-empty-cell:hover {
  color: #999;
  background: #fafafa;
}

/* ---------------------------------------------------------------------
   [Task5] 汎用ユーティリティ(このタスクで初めて必要になったもの)。
   --------------------------------------------------------------------- */
.btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

.btn-xs {
  padding: 3px 8px;
  font-size: 11.5px;
}

.btn-danger-outline {
  background: #fff;
  border-color: #a03434;
  color: #a03434;
}

.btn-danger-outline:hover {
  background: #fbeaea;
}

.tag {
  display: inline-block;
  border: 1px solid #ddd9cd;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
  color: #555;
  background: #f7f7f7;
}

.text-danger {
  color: #a03434;
  font-weight: bold;
}

/* ---------------------------------------------------------------------
   [Task5] ⑤プログラム編集パネル(全体進行表からの右スライドパネル)+
   スタッフ追加(候補選択)画面。

   全体進行表(.matrix-wrap等)はそのまま背面に残し、このパネルを重ねる
   オーバーレイとして実装している(画面遷移させない、という要件のため)。
   PCでは幅600〜700pxを目安に(clamp)、画面が狭い場合は縮小、スマホ幅では
   全画面表示に切り替える。
   --------------------------------------------------------------------- */
.side-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 33, 29, 0.35);
  z-index: 210;
}

.side-panel-backdrop[hidden] {
  display: none;
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(560px, 60vw, 700px);
  max-width: 100vw;
  background: #fff;
  box-shadow: -4px 0 24px rgba(30, 33, 29, 0.25);
  z-index: 220;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-panel[hidden] {
  display: none;
}

.side-panel-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-panel-view[hidden] {
  display: none;
}

.panel-loading {
  padding: 24px;
  color: #6c6a61;
  font-size: 13.5px;
}

.panel-head {
  padding: 18px 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

/* 【Phase3改修⑰・2026-09-08】以前は.panel-head自体がこの行だったが、
   割り当て解除ボタン一覧(.panel-head-staff-list)をpanel-head内の
   2段目として追加したため、1段目(プログラム名+閉じるボタン)をこの
   クラスへ切り出した。 */
.panel-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-head-name {
  font-size: 17px;
  font-weight: bold;
}

.panel-head-meta {
  font-size: 12.5px;
  color: #6c6a61;
  margin-top: 3px;
}

.panel-close-btn,
.panel-back-btn {
  border: none;
  background: none;
  font-size: 14px;
  color: #6c6a61;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}

.panel-close-btn:hover,
.panel-back-btn:hover {
  color: #1e211d;
}

.panel-tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
  overflow-x: auto;
}

.panel-tab {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #888;
  padding: 10px 12px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.panel-tab.is-active {
  color: #2f5496;
  border-bottom-color: #2f5496;
  font-weight: 700;
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
}

.panel-tab-content {
  display: none;
}

.panel-tab-content.is-active {
  display: block;
}

.panel-summary-list {
  margin: 0;
}

.panel-summary-list > div {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 13.5px;
}

.panel-summary-list dt {
  width: 130px;
  flex-shrink: 0;
  color: #6c6a61;
}

.panel-summary-list dd {
  margin: 0;
}

.panel-note {
  font-size: 12px;
  color: #6c6a61;
  margin: 10px 0 0;
}

.panel-section-title {
  font-size: 13.5px;
  font-weight: bold;
  margin: 18px 0 8px;
}

.panel-headcount {
  display: flex;
  gap: 8px;
}

.panel-headcount-item {
  flex: 1;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
  padding: 10px 12px;
  text-align: center;
}

.panel-headcount-label {
  display: block;
  font-size: 11.5px;
  color: #6c6a61;
}

.panel-headcount-value {
  display: block;
  font-size: 19px;
  font-weight: bold;
  margin-top: 2px;
}

.panel-staff-list,
.panel-plain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.panel-head-staff-list {
  margin: 10px 0 0;
  padding-top: 6px;
  border-top: 1px dashed #eee;
}

.panel-head-staff-list li {
  padding: 6px 0;
}

.panel-staff-list li,
.panel-plain-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 13.5px;
}

.panel-staff-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.panel-empty-note {
  color: #999;
  font-size: 13px;
  padding: 10px 0;
}

.panel-memo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.panel-memo-status {
  font-size: 12.5px;
  color: #548235;
}

#program-memo-form textarea {
  width: 100%;
  min-height: 140px;
}

/* ---- スタッフ追加(候補選択)画面 ---- */

.candidates-target {
  padding: 16px 20px 4px;
  flex-shrink: 0;
}

.candidates-target-name {
  font-size: 15px;
  font-weight: bold;
}

.candidates-target-meta {
  font-size: 12.5px;
  color: #6c6a61;
  margin-top: 3px;
}

.candidates-target-count {
  font-size: 13px;
  margin-top: 8px;
  background: #f7f6f2;
  border-radius: 6px;
  padding: 8px 10px;
}

.candidates-role-select-row {
  font-size: 12.5px;
  margin-top: 8px;
  color: #6c6a61;
}

/* [修正指示B-6・2026-09-10] 「対象の役割」表示の強調(以前の小さな
   プルダウンが見づらいという指摘への対応)。役割名を大きく表示し、
   複数役割があるときだけ変更用のselectを併記する。 */
.candidates-role-heading {
  font-size: 18px;
  font-weight: 800;
  margin-top: 10px;
}

.candidates-role-select {
  font-size: 14px;
  padding: 6px 8px;
  margin-top: 4px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  background: #fff;
}

/* [修正指示B-5・2026-09-10] ⑤プログラム編集パネル「スタッフ」タブの
   役割単位テーブル(必要人数/配置人数/過不足/操作)。 */
.panel-role-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 13px;
}

.panel-role-table th,
.panel-role-table td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid #f2f2f2;
}

.panel-role-table th {
  color: #6c6a61;
  font-weight: 600;
  font-size: 12px;
}

.candidates-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  flex-shrink: 0;
}

.candidates-toolbar input[type="text"] {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13.5px;
}

.candidates-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0 20px 12px;
  font-size: 12.5px;
  flex-shrink: 0;
}

.candidates-filters[hidden] {
  display: none;
}

.candidates-filter-text input[type="text"] {
  padding: 4px 6px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 12.5px;
  width: 110px;
}

.candidates-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  border-top: 1px solid #eee;
}

.candidate-group-title {
  font-size: 12.5px;
  font-weight: bold;
  color: #6c6a61;
  margin: 16px 0 6px;
}

.candidate-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f2f2f2;
}

.candidate-row.is-warn {
  background: #fffaf2;
}

.candidate-checkbox {
  margin-top: 4px;
  flex-shrink: 0;
}

.candidate-main {
  flex: 1;
  min-width: 0;
}

.candidate-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.candidate-name {
  font-weight: bold;
  font-size: 13.5px;
}

.candidate-status-tag {
  font-size: 11px;
  color: #548235;
}

.candidate-status-tag.is-warn {
  color: #a1590a;
}

.candidate-detail,
.candidate-skills {
  font-size: 12px;
  color: #6c6a61;
  margin-top: 2px;
}

.candidates-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.candidates-selection-summary {
  flex: 1;
  font-size: 12.5px;
  color: #6c6a61;
}

/* スマホ幅では左右並びをやめ、パネル・候補選択画面とも全画面表示にする */
@media (max-width: 720px) {
  .side-panel {
    width: 100vw;
  }

  /* [Task5] 保存・追加ボタンは画面下部固定(点11)。横幅が足りないため
     選択人数の表示とボタン列を縦積みにする。 */
  .candidates-footer {
    flex-wrap: wrap;
  }

  .candidates-selection-summary {
    flex-basis: 100%;
  }

  .panel-memo-actions {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------
   [スタッフ管理機能・2026-08-29] 募集ページ・登録フォーム・完了画面
   (公開・合言葉不要)、および⑦スタッフ一覧・詳細(運営者)で使う。
   --------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid #ddd9cd;
  border-radius: 8px;
  padding: 28px;
}

.auth-page-wide {
  max-width: 560px;
  margin: 48px auto;
  padding: 0 20px;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

.radio-row {
  display: flex;
  gap: 16px;
}

.radio-row-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

.radio-row-item input[type="radio"] {
  width: auto;
}

.staff-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
  font-size: 13px;
}

.staff-filter-check input[type="checkbox"] {
  width: auto;
}

.staff-join-title {
  font-size: 20px;
  margin: 0 0 4px;
}

.staff-join-lead {
  font-size: 13px;
  color: #6c6a61;
  margin: 0 0 18px;
}

.staff-join-done-card {
  text-align: center;
}

/* 【Phase4-3・2026-09-10】スタッフ用マイページ(ポータル)。 */
.staff-mypage-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.staff-mypage-link-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-join-done-check {
  font-size: 34px;
  color: #548235;
}

.staff-join-passcode-box {
  border: 2px solid #2f5496;
  background: #eef1fb;
  border-radius: 8px;
  padding: 22px;
  text-align: center;
  margin: 20px auto 0;
  max-width: 340px;
}

.staff-join-passcode-label {
  font-size: 13px;
  color: #2f5496;
}

.staff-join-passcode-value {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #1b2436;
  margin: 6px 0;
}

.staff-join-passcode-note {
  font-size: 12.5px;
  color: #6c6a61;
}

/* 【緊急実装・2026-09-15 全スタッフ共通ログイン】STEP2氏名検索結果一覧。
   スマートフォンで押しやすいよう、1行の当たり判定を広く取る(指示書5-2節)。 */
.staff-search-result-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-search-result-item {
  display: block;
  padding: 14px 16px;
  border: 1px solid #ddd9cd;
  border-radius: 8px;
  background: #fafafa;
  color: #1e211d;
  text-decoration: none;
  font-size: 16px;
}

.staff-search-result-item:hover {
  border-color: #2f5496;
  background: #eef1fb;
}

/* 参加可能時間の3段階UI(_availability_fields.html)。 */
.avail-level1 {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ddd9cd;
  background: #fafafa;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: normal;
}

.avail-level1 input {
  width: auto;
}

.avail-level2 {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px;
  transition: opacity .15s;
}

.avail-level2.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.avail-sub-hint {
  font-size: 12px;
  color: #6c6a61;
  margin: 0 0 8px;
}

.avail-day-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 4px;
}

.avail-day-row input {
  width: auto;
}

.avail-expand-btn {
  border: none;
  background: none;
  color: #2f5496;
  font-size: 12px;
  cursor: pointer;
  margin-left: 4px;
  font-family: inherit;
  padding: 0;
}

.avail-level3 {
  display: none;
  margin: 6px 0 10px 26px;
  padding: 10px 12px;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

.avail-level3.is-open {
  display: block;
}

.avail-slot-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 6px;
  font-weight: normal;
}

.avail-slot-label input {
  width: auto;
}

.avail-slot-time {
  color: #6c6a61;
}

/* ⑦スタッフ一覧・詳細 */
.staff-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 16px;
}

.staff-filter-form input[type="text"],
.staff-filter-form select {
  padding: 7px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13px;
}

.staff-filter-search {
  width: 200px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  font-size: 13.5px;
}

.data-table th {
  text-align: left;
  background: #f7f7f7;
  border-bottom: 1px solid #ddd9cd;
  padding: 8px 10px;
  font-size: 12.5px;
  color: #555;
}

.data-table td {
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 10px;
  vertical-align: middle;
}

/* [Phase1改修・2026-09-14 指示書4] スタッフ一覧「特技(自由記述)」列。
   長文(truncatecharsで省略済みだが念のため)でテーブルが崩れないよう
   折り返しを許可する。 */
.skill-detail-cell {
  max-width: 180px;
  word-break: break-word;
}

.skill-detail-text {
  display: block;
  margin-bottom: 2px;
}

/* [2026-08-29 追加修正] ⑦スタッフ一覧の権限チェックボックス列。
   フォーム自体は表示上ただのチェックボックス1個に見せる。 */
.js-permission-form {
  margin: 0;
  text-align: center;
}

.js-permission-checkbox {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  white-space: nowrap;
}

.status-pill-unassigned {
  background: #fbf0df;
  color: #a1590a;
}

.status-pill-partially_assigned {
  background: #eef1fb;
  color: #2f5496;
}

.status-pill-assigned {
  background: #eaf3e6;
  color: #548235;
}

@media (max-width: 720px) {
  .staff-filter-search {
    width: 100%;
  }
}

/* [2026-08-29 追加修正] 募集リンク(コピー・共有)モーダル。 */
.recruit-link-row {
  display: flex;
  gap: 8px;
}

.recruit-link-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13px;
  color: #1e211d;
  background: #f7f6f2;
}

.recruit-link-status {
  font-size: 12.5px;
  color: #548235;
  margin: 6px 0 0;
}

/* [2026-08-29 追加修正] staff-join-sent-box:募集ページStep1で認証メール
   送信後に表示する案内ボックス。 */
.staff-join-sent-box {
  border: 1px solid #ddd9cd;
  background: #f7f6f2;
  border-radius: 6px;
  padding: 16px;
  margin-top: 8px;
}

.staff-join-sent-box p:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   [スタッフ管理⇔プログラム管理 接続機能・2026-08-29]
   ⑤プログラム編集パネル 概要(役割)・タスク・備品タブの追加・編集・削除
   共通UI(.panel-crud-*)。
   --------------------------------------------------------------------- */
.panel-crud-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.panel-crud-row {
  border-bottom: 1px solid #f2f2f2;
}

.panel-crud-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}

.panel-crud-view[hidden] {
  display: none;
}

.panel-crud-main {
  font-size: 13.5px;
}

.panel-crud-main.is-done {
  text-decoration: line-through;
  color: #999;
}

.panel-crud-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  min-width: 0;
}

.panel-crud-checkbox-label input {
  width: auto;
  flex-shrink: 0;
}

.panel-crud-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.panel-crud-edit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 0;
}

/* [hidden]属性は本来UAスタイルでdisplay:noneになるが、直前の
   `display: flex` (author stylesheet)がUAスタイルより優先されて
   打ち消してしまうため、明示的に上書きする。 */
.panel-crud-edit-form[hidden] {
  display: none;
}

.panel-crud-edit-form input[type="text"],
.panel-crud-edit-form input[type="number"] {
  padding: 6px 8px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13px;
}

.panel-crud-count-input {
  width: 70px;
}

#role-create-form,
#task-create-form,
#equipment-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

#role-create-form input[type="text"],
#task-create-form input[type="text"],
#equipment-create-form input[type="text"] {
  flex: 1;
  min-width: 120px;
  padding: 7px 9px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13px;
}

#role-create-form input[type="number"],
#equipment-create-form input[type="number"] {
  padding: 7px 9px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   [スタッフ管理⇔プログラム管理 接続機能・2026-08-29] ⑥必要人員計画。
   mockup/02/mockup/screens/required-headcount.htmlの配色・寸法を踏襲。
   --------------------------------------------------------------------- */
.headcount-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.headcount-summary-box {
  border: 1px solid #2f5496;
  background: #eef1fb;
  border-radius: 6px;
  padding: 12px 18px;
}

.headcount-summary-label {
  font-size: 12px;
  color: #1b2436;
}

.headcount-summary-value {
  font-size: 21px;
  font-weight: bold;
  color: #1b2436;
}

.headcount-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  border-bottom: 1px solid #999;
  margin-bottom: 4px;
  padding: 0 4px;
  overflow-x: auto;
}

.headcount-bar-wrap {
  flex: 1;
  min-width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.headcount-bar-value {
  font-size: 10.5px;
  color: #555;
  margin-bottom: 2px;
}

.headcount-bar {
  width: 65%;
  background: #2f5496;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.headcount-bar.is-peak {
  background: #a1590a;
}

.headcount-chart-labels {
  display: flex;
  gap: 4px;
  padding: 0 4px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.headcount-chart-labels div {
  flex: 1;
  min-width: 18px;
  text-align: center;
  font-size: 10px;
  color: #777;
}

.headcount-row-peak {
  background: #fbf0df;
}

/* ---------------------------------------------------------------------
   [2026-09-03] スタッフ稼働表。
   .matrix-wrap(白背景・枠線・横スクロール)はそのまま流用し、中身だけ
   このセクションのクラスで組む。配色は既存の.status-pill / .candidate-*
   /.text-danger等で使っている色をそのまま踏襲している(新色は増やさない):
   通常=紺(#2f5496)、重複=赤(#a03434)、参加可能時間外=オレンジ(#a1590a)、
   参加可能時間ゲージ=緑(#548235)。
   --------------------------------------------------------------------- */
/* [2026-09-03 UI改善①] Dayタブの横に、そのDayの実際の開催時間を表示する。 */
.occ-tabs-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.occ-day-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* [不具合修正] displayを明示指定した要素は、ブラウザ既定の[hidden]{display:none}
   より自分の指定(display:flex)が優先されてしまい、Dayを切り替えても
   非選択中の開催日メタ情報が消えなかった(.matrix-wrapはdisplayを指定して
   いないため既定のhidden挙動で問題なかった)。ここで明示的に上書きする。 */
.occ-day-meta[hidden] {
  display: none;
}

.occ-meta-item + .occ-meta-item {
  padding-left: 20px;
  border-left: 1px solid #ddd9cd;
}

.occ-meta-label {
  font-size: 11.5px;
  color: #6c6a61;
  margin-bottom: 2px;
}

.occ-meta-value {
  font-size: 15px;
  font-weight: bold;
  color: #1e211d;
}

.occ-meta-sub {
  font-size: 12px;
  font-weight: normal;
  color: #6c6a61;
  margin-left: 4px;
}

.occ-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.occ-chip {
  border: 1px solid #ddd9cd;
  background: #fff;
  color: #555;
  padding: 6px 14px;
  font-size: 12.5px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.occ-chip.is-active {
  border-color: #2f5496;
  color: #2f5496;
  background: #eef1fb;
}

.occ-area-select {
  appearance: auto;
}

.occ-row-item[data-area-match="0"] {
  display: none;
}

/* [2026-09-03 不具合修正:名前列固定] position:stickyだと横スクロール時に
   子要素(.occ-bar)のz-indexが素通りして名前へ重なる不具合が起きたため、
   「スクロールしない名前列」(.occ-name-list)と「横スクロールする
   タイムライン列」(.occ-timeline-scroll)を最初から別要素として左右に
   並べる構成に変更した(overflow-xは.occ-timeline-scrollだけに付ける。
   .matrix-wrap自体は④・⑥と共通のためoverflow設定はそのまま)。各行の
   高さはapps/core/staff_occupancy.pyのrow_height_pxで両列に同じ値を
   明示し、縦のズレを防いでいる。 */
.occ-body {
  display: flex;
  align-items: flex-start;
}

.occ-name-list {
  width: 156px;
  flex-shrink: 0;
}

.occ-name-list-head {
  height: 26px; /* .occ-axisの高さ(20px)+margin-bottom(6px)と揃える */
}

.occ-name-cell {
  padding: 8px 0;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}

.occ-name-link {
  font-size: 13px;
  font-weight: bold;
  color: #1e211d;
  text-decoration: none;
}

.occ-name-link:hover {
  text-decoration: underline;
}

.occ-gender-m,
.occ-gender-f {
  color: #6c6a61;
  font-weight: normal;
  font-size: 12px;
}

.occ-timeline-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.occ-axis {
  display: flex;
  position: relative;
  height: 20px;
  border-bottom: 1px solid #999;
  margin-bottom: 6px;
}

.occ-axis-mark {
  position: absolute;
  top: 0;
  font-size: 10.5px;
  color: #777;
  transform: translateX(-2px);
}

.occ-track-row {
  padding: 8px 0;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}

.occ-conflict-only .occ-row-item[data-has-conflict="0"] {
  display: none;
}

.occ-unassigned-only .occ-row-item[data-unassigned="0"] {
  display: none;
}

.occ-track {
  position: relative;
}

/* [2026-09-03 UI改善③] 参加可能時間は行の高さいっぱいの薄い緑帯で示す
   (旧:上端の細い線)。割当帯(.occ-bar)より背面に置き、通常状態では
   「空いている時間」がひと目で分かる程度の目立たなさに留める
   (色は.status-pill-assignedと同じ薄緑を再利用。新色は増やさない)。 */
.occ-avail-gauge {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.occ-avail-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #eaf3e6;
}

.occ-bar {
  position: absolute;
  z-index: 2;
  appearance: none;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 10.5px;
  line-height: 1.3;
  padding: 2px 6px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.occ-bar:hover {
  filter: brightness(1.08);
}

.occ-bar.busy {
  background: #2f5496;
}

.occ-bar.conflict {
  background: #a03434;
}

.occ-bar.warn {
  background: #a1590a;
}

@media (max-width: 720px) {
  .occ-name-list {
    width: 108px;
  }
}

/* ---------------------------------------------------------------------
   [出店者管理 Phase3-1・2026-09-07] ①出店申込フォーム(公開・スマホ最優先)
   ②申込管理(審査画面、運営者向け)。

   指示書どおり「出店者管理専用」の配色を使い、既存の「イベント管理」画面の
   紺(#2f5496)とは意図的に区別する。クラス名は他画面と衝突しないよう
   .exh- プレフィックスで統一している。

   【料金・備品マスター再設計・2026-09-08 指示書1節】発注者から改めて
   「イベント管理=紺、出店者管理=ターコイズ/グリーン/白」という配色方針が
   示されたため、このセクション配下の全画面(apps.exhibitors全体)で共有
   している --exh-primary 等の変数をターコイズ/グリーン系へ更新した
   (CSS変数のみの変更のため、出店申込フォーム・申込管理・出店者マイページ
   等、この指示の対象外の既存画面にも同じ配色が及ぶが、いずれも
   「出店者管理」区分内の画面であるため、意図どおりの反映となる)。
   9項目の左メニュー(ダッシュボード/出店者一覧/出店申込管理/出店ブース管理/
   備品申込管理/料金・備品マスター/出店者マイページ設定/共有リンク管理/
   集計・分析)全体の新設は今回のスコープ外(指示書1節。既存2画面
   ―申込管理・料金備品マスター―以外は未実装のため、実装した完了報告に
   明記する)。
   --------------------------------------------------------------------- */
:root {
  --exh-primary: #0D9488;
  --exh-bg: #EAFBF6;
  /* [Phase3-2・2026-09-08] 出店者マイページ用に追加(指示書32節)。 */
  --exh-secondary: #22C55E;
  --exh-border: #CFEFE6;
  --exh-text: #1F2937;
  --exh-subtext: #6B7280;
}

/* [UI統一計画Ver2.0 Priority B・2026-09-10]
   出店者管理の正式デザイン体系はexd(ライトブルー、exhibitor_dashboard.css)
   に決定した(UI統一計画Ver2.0 0節)。:root側の--exh-*既定値(ターコイズ系)
   は出店者本人向け公開画面(出店申込フォーム・マイページ等、Ver1.0の
   「システム構成」対象外)専用として変更せずに残す。
   出店申込管理(application_list.html)・各種設定=料金備品マスター
   (charge_item_master_list.html)の2画面だけは、ルート要素に付けた
   `.exd-color-scope`の配下で--exh-*をexdの値へ差し替える(CSS変数の
   再定義はこの要素の子孫にのみカスケードするため、公開画面には影響しない)。
   .exh-*で組まれた一覧・詳細パネル・カテゴリ/行編集UIのHTML構造・
   クラス名は一切変更していない(参照する変数の値だけが変わる)。
   exhibitor_dashboard.cssの読込(--exd-*の定義元)は両テンプレートの
   block extra_headで追加済み(Priority A)。 */
.exd-color-scope {
  --exh-primary: var(--exd-primary);
  --exh-bg: var(--exd-bg);
  --exh-secondary: var(--exd-secondary);
  --exh-border: var(--exd-border);
}

.exh-shell {
  background: var(--exh-bg);
  min-height: 100vh;
  padding: 32px 16px 56px;
}

.exh-card {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 28px 22px;
  box-shadow: 0 2px 14px rgba(47, 128, 237, 0.1);
}

.exh-title {
  font-size: 19px;
  margin: 0;
  color: #1b2436;
}

.exh-lead {
  font-size: 13px;
  color: #52627a;
  margin: 0 0 22px;
}

/* [2026-09-07 承認済みモック反映] ヘッダー(アイコン+タイトル+サブタイトル)、
   必須/任意タグ、「種類」のアイコンカード選択、「その他の内容」欄の
   有効/無効表示。 */
.exh-form-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}

.exh-form-icon {
  font-size: 30px;
  line-height: 1.1;
}

.exh-subtitle {
  font-size: 12.5px;
  color: #52627a;
  margin: 3px 0 0;
}

.exh-tag-required {
  color: #c0392b;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

.exh-tag-optional {
  color: var(--exh-primary);
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

.exh-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.exh-category-card {
  position: relative;
  display: block;
  border: 1px solid var(--exh-border);
  border-radius: 8px;
  padding: 10px 2px;
  text-align: center;
  cursor: pointer;
  font-weight: normal;
}

.exh-category-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.exh-category-card:has(input:checked) {
  border-color: var(--exh-primary);
  background: #EAFBF6;
}

.exh-category-icon {
  display: block;
  font-size: 19px;
  margin-bottom: 4px;
}

.exh-category-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #1e211d;
}

.exh-category-card:has(input:checked) .exh-category-label {
  color: var(--exh-primary);
}

.exh-other-field input:disabled {
  background: #f3f6fb;
  color: #9aa8bd;
  cursor: not-allowed;
}

@media (max-width: 380px) {
  .exh-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.exh-btn-primary {
  background: var(--exh-primary);
  border-color: var(--exh-primary);
  color: #fff;
}

.exh-btn-primary:hover {
  filter: brightness(1.05);
}

.exh-done-card {
  text-align: center;
}

.exh-done-check {
  font-size: 36px;
  color: var(--exh-primary);
}

.exh-done-note {
  font-size: 13px;
  color: #52627a;
  margin-top: 6px;
}

/* ② 申込管理(審査画面)。左:出店者管理メニュー(今回は「申込管理」のみ
   実装)/ 一覧+詳細の2ペイン構成。 */
.exh-review-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.exh-sidebar {
  flex: 0 0 180px;
  background: #fff;
  border: 1px solid var(--exh-border);
  border-radius: 8px;
  padding: 10px 0;
}

.exh-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  color: #9aa8bd;
  text-decoration: none;
  cursor: default;
}

.exh-sidebar-item.is-active {
  color: var(--exh-primary);
  font-weight: 700;
  background: var(--exh-bg);
}

.exh-sidebar-rule {
  border: none;
  border-top: 1px dashed var(--exh-border);
  margin: 6px 12px;
}

.exh-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #a03434;
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.exh-main {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.exh-list-panel {
  flex: 0 0 320px;
  background: #fff;
  border: 1px solid var(--exh-border);
  border-radius: 8px;
  overflow: hidden;
}

/* [Phase4-2・2026-09-10] 出店申請承認の見出し+出店者募集URL共有ボタン(画面右上)。 */
.exh-list-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.exh-list-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--exh-text);
  margin: 0;
}

.exh-list-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid #DCF5EE;
  text-decoration: none;
  color: #1e211d;
}

.exh-list-item:last-child {
  border-bottom: none;
}

.exh-list-item:hover {
  background: #F1FCF9;
}

.exh-list-item.is-active {
  background: var(--exh-bg);
  border-left: 3px solid var(--exh-primary);
}

.exh-list-item-name {
  font-weight: 700;
  font-size: 14px;
}

.exh-list-item-meta {
  font-size: 12px;
  color: #6c6a61;
  margin-top: 3px;
}

.exh-detail-panel {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--exh-border);
  border-radius: 8px;
  padding: 20px 22px;
}

.exh-detail-dl {
  margin: 0 0 18px;
}

.exh-detail-dl > div {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 13.5px;
}

.exh-detail-dl dt {
  width: 110px;
  flex-shrink: 0;
  color: #6c6a61;
}

.exh-detail-dl dd {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.exh-detail-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 860px) {
  .exh-review-layout,
  .exh-main {
    flex-direction: column;
  }

  .exh-sidebar,
  .exh-list-panel {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   [出店者管理 Phase3-2・2026-09-08] 出店者本人確認(合言葉・検索)・
   出店者マイページ兼カルテ。指示書32節のデザインルールどおり、横タブ・
   アコーディオンは使わず、見出し・余白・薄い仕切り線(.exh-mypage-rule)で
   セクションを区切る。スマホ優先(縦スクロール)、PCでも同じ順序で表示する。
   --------------------------------------------------------------------- */
.exh-portal-card {
  max-width: 420px;
  margin: 0 auto;
}

.exh-portal-brand {
  color: var(--exh-primary);
  font-weight: 700;
  margin: 0 0 4px;
}

.exh-search-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid var(--exh-border);
  border-radius: 8px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
}

.exh-search-results li {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--exh-border);
}

.exh-search-results li:last-child {
  border-bottom: none;
}

.exh-search-results li:hover,
.exh-search-results li:focus {
  background: var(--exh-bg);
}

.exh-search-selected {
  margin: 6px 0 0;
  font-size: 0.9em;
  color: var(--exh-primary);
}

.exh-mypage {
  max-width: 480px;
  margin: 0 auto;
}

.exh-mypage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.exh-mypage-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.exh-mypage-booth-number {
  color: var(--exh-subtext);
  font-size: 0.85em;
  margin: 0 0 4px;
}

.exh-mypage-rule {
  border: none;
  border-top: 1px solid var(--exh-border);
  margin: 20px 0;
}

.exh-mypage-section-title {
  font-size: 1.05em;
  margin: 0 0 12px;
  color: var(--exh-text);
}

.exh-mypage-subsection-title {
  font-size: 0.95em;
  margin: 16px 0 8px;
  color: var(--exh-text);
}

.exh-subtext {
  color: var(--exh-subtext);
  font-size: 0.85em;
}

.exh-note {
  color: var(--exh-primary);
  font-size: 0.9em;
}

.exh-deadline-passed {
  color: #c0392b;
}

.exh-day-checkbox {
  display: block;
  padding: 6px 0;
}

.exh-qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exh-qty-btn {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.1em;
  padding: 0;
}

.exh-qty-input,
#id_booth_count {
  width: 64px;
  text-align: center;
}

.exh-equipment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.exh-equipment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--exh-border);
}

.exh-equipment-row:last-child {
  border-bottom: none;
}

.exh-equipment-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exh-equipment-qty-view {
  font-weight: 600;
}

.exh-payment-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exh-payment-history li {
  padding: 6px 0;
  border-bottom: 1px solid var(--exh-border);
}

.exh-payment-history li:last-child {
  border-bottom: none;
}

.exh-deadline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ---------------------------------------------------------------------
   [料金・備品マスター再設計・2026-09-08] `/events/<event_id>/exhibitor-
   charge-items/` カテゴリ縦並び+行内編集(Excel感覚)画面。
   「マスター管理画面」ではなく「出店者に見せる料金表そのものを編集する
   画面」という位置づけのため、DB管理画面的な罫線びっしりのテーブルでは
   なく、カテゴリごとのカード+行内編集フィールドで構成する(指示書冒頭の
   「イベント担当者が直感的に使えるUI」を最優先する方針)。
   --------------------------------------------------------------------- */
.exh-master-shell {
  max-width: 900px;
}

.exh-master-category {
  background: #fff;
  border: 1px solid var(--exh-border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.exh-master-category.is-dragover {
  border-color: var(--exh-primary);
  box-shadow: 0 0 0 2px var(--exh-bg) inset;
}

/* [追加改修5項目・2026-09-10 改修4] ドラッグ&ドロップの視覚フィードバック
   (4-4節:移動中の行・挿入予定位置・ドロップ可能なカテゴリが最低限分かる
   ようにする)。過剰な色分けは避け、既存のis-dragover(カテゴリ)と同じ
   トーンに揃えた。 */
.exh-master-category.is-dragging {
  opacity: 0.5;
}

.exh-master-row.is-dragging {
  opacity: 0.5;
}

.exh-master-row.is-dragover {
  outline: 2px solid var(--exh-primary);
  outline-offset: -1px;
}

.exh-master-items.is-dragover {
  background: var(--exh-bg);
}

.exh-master-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--exh-bg);
  border-bottom: 1px solid var(--exh-border);
}

.exh-master-drag-handle {
  cursor: grab;
  color: var(--exh-subtext);
  font-size: 15px;
  line-height: 1;
  padding: 4px;
  user-select: none;
  touch-action: none;
}

.exh-master-drag-handle:active {
  cursor: grabbing;
}

.exh-master-category-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--exh-text);
  /* [追加改修5項目・2026-09-10 改修3] 以前は背景透明+ホバー/フォーカス時
     のみ白背景にしていたため、カテゴリ見出し(薄い色の背景)に溶け込み、
     選択するまで入力可能な場所と分からなかった。編集可能な間は常に白背景+
     薄い枠線にする(行のハイライト自体は維持。変更禁止のModel/View/Form/
     保存処理・JS・入力項目構成・D&Dはこの改修で一切触っていない)。 */
  border: 1px solid var(--exh-border);
  background: #fff;
  padding: 4px 6px;
  border-radius: 6px;
  flex: 0 1 auto;
  min-width: 4em;
}

.exh-master-category-name:not(:disabled):focus {
  border-color: var(--exh-primary);
  outline: none;
}

.exh-master-category-name:disabled {
  color: var(--exh-text);
  cursor: default;
  /* 固定カテゴリ(編集不可)は、あえて非入力欄に見えるよう背景・枠線を
     透明に戻す(編集可能な項目との視覚的な区別のため)。 */
  border-color: transparent;
  background: transparent;
}

.exh-master-agg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--exh-border);
  color: var(--exh-subtext);
  white-space: nowrap;
}

.exh-master-agg-badge.is-on {
  /* [UI統一計画Ver2.0 Priority B・2026-09-10] Status Labelの色を
     exd-success(出店者管理の正式な状態色)へ統一した。charge_item_master_list.html
     専用クラスのため、.exd-color-scope経由ではなく直接var(--exd-success)を
     参照する(exhibitor_dashboard.cssの読込はPriority Aで追加済み)。 */
  color: var(--exd-success);
  border-color: #b8ecd0;
  background: #EAFBF6;
}

.exh-master-agg-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.exh-master-lock-note {
  font-size: 11.5px;
  color: var(--exh-subtext);
}

.exh-master-category-spacer {
  flex: 1;
}

.exh-master-items {
  display: flex;
  flex-direction: column;
}

.exh-master-row {
  display: grid;
  /* [修正指示C-8・2026-09-10] 備考列(最後から2番目)が最も広くなるよう
     項目名(2fr→1.1fr)と入れ替えた。操作列(最後)も、新しい「＋項目追加」
     ボタン(以前は「＋」アイコンのみ)が入るよう32px→110pxへ広げた。 */
  grid-template-columns: 24px 1.1fr 90px 110px 130px 90px 2fr 110px;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--exh-border);
}

.exh-master-row:last-child {
  border-bottom: none;
}

/* [修正指示C-6・2026-09-10] 新規追加行の視認性改善。以前(#FAFFFE)は
   登録済み行とほぼ同色で見分けがつかなかったため、はっきりした薄緑+
   左端の色付きボーダーで「ここが新規追加エリア」と分かるようにした。 */
.exh-master-row.is-new-row {
  background: #E8F9EE;
  border-left: 3px solid var(--exh-secondary, #22C55E);
}

.exh-master-row input[type="text"],
.exh-master-row input[type="number"],
.exh-master-row select {
  width: 100%;
  /* [追加改修5項目・2026-09-10 改修3] 項目名/単位/単価/課金単位/備考の
     入力欄。以前は背景透明+ホバー/フォーカス時のみ白背景にしていたため、
     行のハイライト背景(新規追加行=薄緑、保存フラッシュ等)と同化し、
     選択するまで入力可能な場所が判別できなかった。常に白背景+薄い枠線に
     する(行のハイライト自体は維持。Model/View/Form/保存処理/JS/
     入力項目構成/D&Dはこの改修で一切触っていない)。 */
  border: 1px solid var(--exh-border);
  background: #fff;
  padding: 6px 6px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--exh-text);
  min-width: 0;
}

.exh-master-row input:focus,
.exh-master-row select:focus {
  border-color: var(--exh-primary);
  outline: none;
}

.exh-master-row-header {
  display: grid;
  /* [修正指示C-8・2026-09-10] 備考列(最後から2番目)が最も広くなるよう
     項目名(2fr→1.1fr)と入れ替えた。操作列(最後)も、新しい「＋項目追加」
     ボタン(以前は「＋」アイコンのみ)が入るよう32px→110pxへ広げた。 */
  grid-template-columns: 24px 1.1fr 90px 110px 130px 90px 2fr 110px;
  gap: 8px;
  padding: 6px 16px 4px;
  font-size: 11.5px;
  color: var(--exh-subtext);
}

.exh-master-lot-cell {
  display: flex;
  justify-content: center;
}

.exh-master-row-delete {
  background: none;
  border: none;
  color: var(--exh-subtext);
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  border-radius: 6px;
}

.exh-master-row-delete:hover {
  color: #c0392b;
  background: #fdecea;
}

.exh-master-add-item-btn {
  margin: 10px 16px 14px;
  align-self: flex-start;
}

.exh-master-add-category-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 24px;
}

.exh-master-field-error {
  grid-column: 1 / -1;
  color: #c0392b;
  font-size: 12px;
  padding: 0 16px 6px;
}

.exh-master-save-flash {
  outline: 2px solid var(--exh-secondary);
  outline-offset: -1px;
}

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

@media (max-width: 720px) {
  .exh-master-row,
  .exh-master-row-header {
    min-width: 640px;
  }
}

/* ---------------------------------------------------------------------
   [Phase3-3・2026-09-10] 団体情報管理・帳票発行情報管理・合言葉管理追加。
   ①画面右上「団体名▼」共通アカウントメニュー(全画面共通、base.html)。
   ②STEP1基本情報:合言葉設定(スタッフ用/出店者用)・帳票発行情報の追加区画。
   --------------------------------------------------------------------- */

.global-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 24px;
  background: #fff;
  border-bottom: 1px solid #ddd9cd;
}

.account-menu {
  position: relative;
}

.account-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  background: none;
  border-radius: 4px;
  font-size: 13.5px;
  color: #1e211d;
  cursor: pointer;
}

.account-menu-trigger:hover {
  border-color: #bdb8a8;
}

.account-menu-caret {
  font-size: 9px;
  color: #6c6a61;
}

.account-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: #fff;
  border: 1px solid #bdb8a8;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(30, 33, 29, 0.12);
  overflow: hidden;
  z-index: 20;
}

.account-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13.5px;
  color: #1e211d;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-item:hover {
  background: #f7f6f2;
}

.account-menu-item-form {
  margin: 0;
}

.account-menu-item-button {
  font-family: inherit;
}

.required-badge {
  color: #a03434;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

/* STEP1「合言葉設定」区画。ラベル+入力(幅約20文字)+コピー+通知を1行で並べる。 */
.keyword-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.keyword-row label {
  min-width: 8em;
  font-weight: 600;
  font-size: 13.5px;
}

.keyword-row input[type="text"] {
  width: 20ch;
  padding: 8px 10px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13.5px;
}

.keyword-copy-status {
  font-size: 12.5px;
  color: #548235;
}

.keyword-copy-status[hidden] {
  display: none;
}

/* STEP1「帳票発行情報」区画。2カラムグリッド+ロゴアップロード枠。 */
.invoice-info-section {
  margin-top: 24px;
}

.invoice-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.invoice-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.invoice-info-grid .form-row {
  grid-column: span 1;
}

.invoice-logo-row {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .invoice-info-grid {
    grid-template-columns: 1fr;
  }
}

/* [修正指示A-3・2026-09-10] 会場マップアップロード後のプレビュー。 */
.venue-map-preview {
  margin-bottom: 10px;
}

.venue-map-preview-img {
  max-width: 100%;
  max-height: 320px;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
  display: block;
}

.venue-map-preview-pdf {
  width: 100%;
  height: 360px;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
}

/* [修正指示B-2・2026-09-10] スタッフ一覧「特技」列のタグ表示。 */
.skill-tag {
  margin: 1px 4px 1px 0;
  background: #eef3fb;
  border-color: #cddcf0;
  color: #2f5496;
}

/* [修正指示C-5・2026-09-10] チェックボックス→トグルスイッチ(見た目のみ、
   input自体は従来どおりcheckbox)。「集計する」チェックボックスに適用。 */
.exh-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.exh-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.exh-toggle-slider {
  position: absolute;
  inset: 0;
  background: #d6d9dd;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.exh-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.exh-toggle-switch input:checked + .exh-toggle-slider {
  background: var(--exh-primary);
}

.exh-toggle-switch input:checked + .exh-toggle-slider::before {
  transform: translateX(16px);
}

.exh-toggle-switch input:focus-visible + .exh-toggle-slider {
  outline: 2px solid var(--exh-primary);
  outline-offset: 2px;
}

/* [修正指示C-7・2026-09-10] 新規追加行の「＋項目追加」ボタン
   (以前は「＋」アイコンのみ)。 */
.exh-master-row-add-btn {
  padding: 6px 10px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* [Phase4-2・2026-09-10] 出店者募集ページ共有(URLコピー・共有モーダル)。 */
.xshare-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.xshare-closed-label {
  font-size: 12px;
  color: #a03434;
  font-weight: 700;
  margin-right: 2px;
}

.xshare-url-input {
  width: 100%;
  padding: 8px 10px;
  margin: 4px 0 14px;
  border: 1px solid #bdb8a8;
  border-radius: 4px;
  font-size: 13px;
  color: #1e211d;
  background: #f7f6f2;
}

.xshare-modal-label {
  display: block;
  font-size: 12.5px;
  color: #6c6a61;
}

.xshare-qr-img {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 14px;
  border: 1px solid #ddd9cd;
  border-radius: 4px;
}

.xshare-modal-actions {
  justify-content: center;
  flex-wrap: wrap;
}

.xshare-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e211d;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 300;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* [Phase4-2・2026-09-10] STEP1「出店者募集ページ」欄の見出し+受付ON/OFFチェック。 */
.section-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.section-subtitle-row .section-subtitle {
  margin: 0;
}

.form-row-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

/* [Phase2改修・2026-09-14 1] 共有リンク確認:QRコードモーダル。 */
.share-qr-img {
  display: block;
  width: 200px;
  height: 200px;
  margin: 12px auto 0;
  border: 1px solid #ddd9cd;
  border-radius: 4px;
}

/* 一部のモーダル(タスクカテゴリー管理等)は既定の.modal(max-width:420px)
   より少し広い方が収まりが良いための拡張クラス。 */
.modal-wide {
  max-width: 520px;
}

/* [Phase2改修・2026-09-14 2] タスク管理。備品一覧・staff_listと同じ
   .data-tableを使い、完了行のみ専用スタイルを足す。 */
.task-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  background: #f7f6f2;
  border: 1px solid #ddd9cd;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.task-add-row .form-row {
  margin: 0;
  min-width: 140px;
  flex: 1;
}

.task-add-row .form-row label {
  display: block;
  font-size: 12px;
  color: #6c6a61;
  margin-bottom: 4px;
}

.task-row.is-task-done {
  color: #9a9890;
  background: #f7f6f2;
}

.task-row.is-task-done .task-title-text {
  text-decoration: line-through;
}

.task-toggle-form {
  margin: 0;
  display: inline-flex;
}

.task-toggle-form input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.task-edit-row td {
  background: #f7f6f2;
}

.task-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.task-filter-form label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
}

.task-filter-form input[type="checkbox"] {
  width: auto;
}