/* =============================================================================
   UX enhance — 参加者×モバイル / 操作の分かりやすさ・信頼感
   A1 確認モーダル / A2 送信フィードバック / A3 タップ領域 / B1 タッチ補助
   ライト/ダーク両対応（既定はダーク値、html[data-theme="light"] で上書き）
   ============================================================================= */

/* ---------- A1: 確認モーダル ---------- */
.uxc-backdrop{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(6,10,18,.62);
}
html[data-theme="light"] .uxc-backdrop{ background:rgba(40,36,24,.45); }
.uxc-backdrop.is-open{ display:flex; }
.uxc-modal{
  width:100%; max-width:360px;
  background:#15171d; color:#e8edf7;
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:18px; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
html[data-theme="light"] .uxc-modal{
  background:#fdfbf4; color:#20222a; border-color:#d4c8a6;
  box-shadow:0 24px 60px rgba(40,36,24,.18);
}
.uxc-msg{ font-size:14px; line-height:1.7; margin-bottom:16px; white-space:pre-wrap; }
.uxc-actions{ display:flex; gap:10px; justify-content:flex-end; }
.uxc-btn{
  min-height:44px; padding:0 16px; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:transparent; color:inherit;
}
html[data-theme="light"] .uxc-btn{ border-color:#cabfa2; }
.uxc-cancel:hover{ background:rgba(125,125,125,.14); }
.uxc-ok{ background:#b23a2c; border-color:#8e2e22; color:#fff; }
.uxc-ok:hover{ background:#8e2e22; }

/* ---------- A2: 送信中フィードバック（二度押し防止＋スピナ） ---------- */
.is-uxc-submitting{ opacity:.75; pointer-events:none; position:relative; color:transparent !important; }
.is-uxc-submitting::after{
  content:""; position:absolute; top:50%; left:50%;
  width:15px; height:15px; margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.55); border-top-color:transparent;
  border-radius:50%; animation:uxcspin .6s linear infinite;
}
html[data-theme="light"] .is-uxc-submitting::after{ border-color:rgba(40,36,24,.45); border-top-color:transparent; }
@keyframes uxcspin{ to{ transform:rotate(360deg); } }

/* ---------- A3: モバイルのタップ領域（見た目は変えない＝アイコンは元のサイズのまま、
   当たり判定だけ透明に拡張する。.hint-icon「?」等を大きくしない） ---------- */
@media (max-width:640px){
  /* タブはわずかに高さ確保（見た目はほぼ不変） */
  .role-tab{ min-height:42px; }
  /* テキスト系の小ボタンのみ、見た目はそのままで透明な当たり判定を拡張（グリフ持ちアイコンは触らない） */
  .hint-icon, .num-btn, .todo-item-action{ position:relative; }
  .hint-icon::before, .num-btn::before, .todo-item-action::before{
    content:""; position:absolute; top:50%; left:50%;
    width:42px; height:42px; transform:translate(-50%,-50%);
  }
}

/* ---------- C3: 空状態の表現パターン（文字最小・アイコン優先・両テーマ対応） ---------- */
/* A: 操作同居型（点線の追加ゾーン。空エリア自体が「＋追加」ボタン） */
.ux-empty-add{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:16px; border:1px dashed var(--border-md, rgba(255,255,255,.18));
  border-radius:12px; background:transparent;
  color:var(--text-sub, rgba(160,180,220,.7)); font-size:14px; cursor:pointer;
  font-family:inherit; transition:border-color .15s, color .15s;
}
.ux-empty-add:hover{ border-color:var(--accent, #4a9eff); color:var(--text, #e8edf7); }
.ux-empty-add .bi{ font-size:16px; }

/* B: 一文＋主ボタン */
.ux-empty{ text-align:center; padding:18px 14px; color:var(--text-sub, rgba(160,180,220,.7)); font-size:13px; line-height:1.7; }
.ux-empty .ux-empty-icon{ font-size:22px; opacity:.5; display:block; margin-bottom:6px; }
.ux-empty .ux-empty-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:8px 16px;
  border-radius:10px; border:1px solid var(--accent-border, rgba(74,158,255,.4));
  background:var(--accent-bg, rgba(74,158,255,.12)); color:var(--accent, #4a9eff);
  font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; font-family:inherit;
}
.ux-empty .ux-empty-cta:hover{ filter:brightness(1.08); }

/* C: 前提への近道（押せるリンクチップ） */
.ux-jump{
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:8px;
  border:1px solid var(--border-md, rgba(255,255,255,.18)); color:var(--accent, #4a9eff);
  text-decoration:none; font-size:inherit; cursor:pointer; font-family:inherit; background:transparent;
}
.ux-jump:hover{ background:var(--accent-bg, rgba(74,158,255,.12)); }
.ux-jump .bi{ font-size:.9em; }

/* D: 静かな完了（CTAなし。良い空状態） */
.ux-done{ text-align:center; padding:16px 14px; color:var(--text-sub, rgba(160,180,220,.7)); font-size:13px; line-height:1.7; }
.ux-done .ux-done-icon{ font-size:22px; color:var(--success, #64c882); display:block; margin-bottom:6px; }

/* C3続き: 既存の空状態クラスも落ち着いた中央寄せ表現に統一（両テーマ／マークアップ変更なし） */
.accounting-empty-line,
.schedule-control-empty,
.admin-empty:not(.ux-empty),
.att-schedule-empty-body{
  text-align:center; padding:14px 12px; line-height:1.7;
}