/* ========== Design Tokens ========== */
:root {
  --bg: #f5f7fb;
  --bg-elev: #ffffff;
  --text: #111111;
  --muted: #6b7280;
  --brand: #16a34a;
  --brand-2: #22c55e;
  --danger: #ef4444;
  --line: rgba(17, 17, 17, 0.08);
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  /* [P53] Legacy shadow alias（UI不変の橋渡し） */
  --shadow-soft: var(--shadow);
  --radius: 14px;
  --radius-lg: 18px;
  --dialog-radius: 16px;
  --dialog-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
  /* Forms のフィールド角丸（既存UIは 10px。見た目不変でトークン化） */
  --radius-field: 10px;
  /* P69: 統一フィールド高（PC/Touch） */
  --field-h: 40px;
  /* Desktop 基準（合意値） */
  --field-h-touch: 44px;
  /* タッチ基準（合意値） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* z-index scale */
  --z-boot: 10000;
  --z-overlay: 9000;
  --z-dialog: 8000;
  --z-fab: 60;
  --z-bottomnav: 50;
  --z-sidebar: 40;
  --z-header: 55;
  /* [N4-1] Scrollbar tokens (bridge) */
  --scrollbar-bg: color-mix(in srgb, var(--card) 80%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--text) 18%, transparent);
  /* [P54] Focus ring tokens (UI不変の橋渡し) */
  --focus-ring: 2px solid var(--color-primary-soft);
  /* 暗所でコントラストが必要な場面用（lightでは同値） */
  --focus-ring-contrast: 2px solid var(--color-primary-soft);
  /* [P55] Shadow tokens (UI不変の橋渡し) */
  --shadow-lift-1: 0 4px 10px rgba(15, 23, 42, 0.12);
  --shadow-lift-2: 0 6px 16px rgba(15, 23, 42, 0.12);
  --shadow-lift-3: 0 8px 22px rgba(15, 23, 42, 0.18);
  --shadow-card-hover: 0 10px 24px rgba(15, 23, 42, 0.1);
  /* [P58] Button-specific shadow tokens (UI不変の橋渡し) */
  --shadow-brand-btn-hover: 0 12px 30px rgba(34, 197, 94, 0.45);
  --shadow-brand-btn-active: 0 4px 12px rgba(34, 197, 94, 0.35);
  --shadow-press-1: 0 3px 8px rgba(15, 23, 42, 0.2);
  /* Calendar compat（Lightの既存色 #e5e7eb を保持） */
  --calendar-cell-border: #e5e7eb;
  /* ===== Desktop alias tokens (map mobile tokens to --color-*) ===== */

  /* surfaces & background */
  --color-bg: var(--bg);
  --color-surface: var(--card);
  --color-surface-soft: color-mix(in srgb, var(--card) 92%, black 8%);
  --color-surface-stronger: color-mix(in srgb, var(--card) 88%, black 12%);

  /* text */
  --color-text-main: var(--text);
  --color-text-muted: var(--muted);

  /* brand */
  --color-primary: var(--brand);
  --color-primary-soft: color-mix(in srgb, var(--brand) 15%, var(--card) 85%);
  --color-primary-strong: var(--brand-2);
  --color-text-on-primary: #fff;

  /* borders */
  --color-border-subtle: var(--line);
  --color-border-strong: color-mix(in srgb, var(--text) 14%, transparent);
  --calendar-sun: #ef4444;
  --calendar-sat: #3b82f6;
  /* controls (forms) */
  --ctl-h: 34px;
  --ctl-pad-x: 10px;
  --ctl-radius: 8px;
  --ctl-bg: var(--surface-2, #0f172a);
  --ctl-border: var(--border-subtle, #334155);
  --ctl-fg: var(--text-1, #e5e7eb);
  --ctl-ph: var(--text-3, #94a3b8);
  --ctl-focus: rgba(59, 130, 246, 0.35);
  /* 青系フォーカス影 */
  /* compat alias */
  --bg-secondary: var(--color-surface-soft);
  --border-color: var(--color-border-subtle);
  --card-bg: var(--color-surface);
  --text-primary: var(--color-text-main);
  --text-muted: var(--color-text-muted);
  /* 共通：時間/イージングを揃えて “ズレ” を減らす */
  --theme-fade-dur: 0.25s;
  --theme-fade-ease: ease;
}

/* [PATCH-BOOT-02] Dark boot fallback (no-JS, early paint)
+   JSで data-theme が付与される前でも OS ダークに追随して初期ペイントを暗色化。
+   値は既存の dark トークンと論理同等。UIは不変でフラッシュ低減のみ。 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1e1f22;
    --bg-elev: #2b2d31;
    --text: #dcddde;
    --muted: #949ba4;
    --line: rgba(255, 255, 255, 0.08);
    --card: #2b2d31;
  }
}

html,
body {
  background-color: var(--color-bg);
}

/* =================================================================
   [Global | Reset & Transitions]
   目的: 起動直後のチラつき抑止＆起動カーテンのフェード制御の保険。
   備考: index.html にも同趣旨のインラインCSSがあるが、二重定義で問題なし。
================================================================= */

/* 初期化中の背景を強制固定（白フラッシュ低減の最終保険） */
body.preload {
  background: var(--color-bg);
  color: var(--color-text-main);
  background-color: var(--color-bg);
}

/* [P61] merged into canonical `.preload *` rule (kept below with animation suppression) */

body.preload .layout {
  will-change: auto;
}

/* data-boot-hide を付けた要素は、preload 解除まで不可視（安全側） */
body.preload [data-boot-hide] {
  opacity: 0 !important;
}

/* 解除後は通常のフェードで出す（index.html 側と論理同値） */
body:not(.preload) [data-boot-hide] {
  transition: opacity 0.18s ease;
  opacity: 1;
}

/* [P60] Boot cleanup: hide motion-prone UI while preload is active */
body.preload .fab,
body.preload .bottom-nav {
  display: none !important;
}

/* [PATCH-BOOT-03] Mobile header も起動中は一旦隠す（UI不変/揺れ抑止） */
body.preload #mobile-app-header {
  display: none !important;
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --bg: #1e1f22;
  --bg-elev: #2b2d31;
  --text: #dcddde;
  --muted: #949ba4;
  --line: rgba(255, 255, 255, 0.08);
  --card: #2b2d31;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  /* ===== Desktop alias tokens for dark ===== */
  --color-bg: var(--bg);
  --color-surface: var(--card);
  --color-surface-soft: color-mix(in srgb, var(--card) 92%, white 8%);
  --color-surface-stronger: color-mix(in srgb, var(--card) 88%, white 12%);

  --color-text-main: var(--text);
  --color-text-muted: var(--muted);

  --color-primary: var(--brand);
  --color-primary-soft: color-mix(in srgb, var(--brand) 20%, var(--card) 80%);
  --color-primary-strong: var(--brand-2);
  --color-text-on-primary: #fff;

  --color-border-subtle: var(--line);
  --color-border-strong: color-mix(in srgb, #fff 18%, transparent);
  --calendar-sun: #ef4444;
  --calendar-sat: #3b82f6;

  /* ===== Compat alias tokens (dark) ===================================== */
  --bg-secondary: var(--color-surface-soft);
  --border-color: var(--color-border-subtle);
  --card-bg: var(--color-surface);
  --text-primary: var(--color-text-main);
  --text-muted: var(--color-text-muted);
  /* [N4-1] Scrollbar tokens (dark) */
  --scrollbar-bg: color-mix(in srgb, var(--card) 80%, black 20%);
  --scrollbar-thumb: color-mix(in srgb, #fff 24%, transparent);
  /* [P54] Focus ring tokens (dark override for contrast usage) */
  --focus-ring-contrast: 2px solid rgba(255, 255, 255, 0.35);
  /* [P53] Legacy shadow alias (dark) */
  --shadow-soft: var(--shadow);
  /* [P57] Dark-only shadow tokens (UI不変の橋渡し) */
  --shadow-dark-card-hover: 0 18px 40px rgba(0, 0, 0, 0.8);
  --shadow-dark-cal-hover: 0 18px 40px rgba(0, 0, 0, 0.75);
  --shadow-dark-pill: 0 4px 12px rgba(15, 23, 42, 0.4);
  /* [P58] Dark: button shadow tokens (UI不変) */
  --shadow-brand-btn-hover: 0 14px 32px rgba(0, 0, 0, 0.7);
  /* 現状のdark:hover値 */
  --shadow-brand-btn-active: 0 4px 12px rgba(34, 197, 94, 0.35);
  /* 現状のactiveは緑のまま */
  /* [Dark] Dialog shadow - より濃い影でコントラストを確保 */
  --dialog-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  /* Dark時は既存ボーダートークンに委譲（見た目不変） */
  --calendar-cell-border: var(--color-border-subtle);
  color-scheme: dark;
}

html[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-main);
}

/* iOS Safari theme-color 再評価用：透明dialog（体感に出さない） */
dialog.ios-theme-poke {
  border: 0;
  padding: 0;
  margin: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

dialog.ios-theme-poke::backdrop {
  background: transparent;
}

/* iOS Safari: theme-color 再評価のための ghost + 上下端ガード */
#safari-redraw-trigger {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  display: none;
  pointer-events: none;
  z-index: 2147483647;

  /* “何か描画が起きた” 扱いに寄せるが、重い効果は使わない */
  background: rgba(0, 0, 0, 0.001);
}

#safari-redraw-trigger.is-on {
  display: block;
}

/* 上下端に “背景色” を常に置いて、Safari が拾う色を安定させる */
body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2147483646;
  background-color: var(--color-bg);
  /* ←ここだけ置き換え */
  transform: translateZ(0);
}

body::before {
  top: 0;
  height: max(env(safe-area-inset-top), 1px);
}

body::after {
  bottom: 0;
  height: max(env(safe-area-inset-bottom), 1px);
}

/* ====================== A11y helpers ====================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* === [PATCH-UX-24] Media: default responsive images (safe) ============ */
/* 目的: 想定外に大きい画像がカードやフォームを突き抜けないようにする。 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ====================== Scrollbars (global) ====================== */

/* [N4-1] WebKit scrollbar minimal */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
  scrollbar-width: thin;

  /* [PATCH-UX-35] UA theming bridge */
  -webkit-tap-highlight-color: transparent;

  /* 既定は light。UAパーツ（スクロールバー/フォーム）をlightで描画 */
  color-scheme: light;
  /* UAの初期ペイントでhtml面が白抜けしないよう背景も同期 */
  background: var(--color-bg);
}

/* ====================== Header ====================== */

.app-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* Header offset for sticky header (safe)
   目的: .app-header が position:sticky で重なるケースを防ぐ。
   影響範囲: ヘッダー直下に .layout が来る通常構造のみ。UIは見た目不変。 */
.app-header + .layout {
  margin-top: 56px;
  /* ヘッダー高に一致 */
}

/* 左上ロゴ（ボタン扱い） */
.app-title {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.03em;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
}

/* [PATCH-A11Y-HEADER] KB操作時のみ可視化（統合版） */
.app-title:focus-visible,
.top-icon-btn:focus-visible,
.top-account-btn:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ヘッダー右側コンテナ（右寄せ＆右から アカウント→テーマ→設定 の順） */
.app-header-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
}

/* 共通：丸いアイコンボタン（設定 / テーマ） */
.top-icon-btn {
  border: none;
  background: var(--color-surface-soft);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.top-icon-btn:hover,
.top-account-btn:hover {
  background: var(--color-surface-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift-1);
}

.top-icon-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* アカウントボタン（アイコン + 名前） */
.top-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--color-surface-soft);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-main);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.top-account-btn:hover {
  background: var(--color-surface-stronger);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift-1);
}

.top-account-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* === [PATCH-A11Y-04] Header: touch target 44px (pointer:coarse 限定・UI不変) === */
@media (pointer: coarse) {
  /* 当たり判定を広げるため relative 基準にする（視覚変化なし） */
  .top-icon-btn,
  .top-account-btn,
  .app-title {
    position: relative;
  }

  /* 見た目は変えず、ヒットエリアだけ +6px ずつ拡張（合計 44px 目安） */
  .top-icon-btn::after,
  .top-account-btn::after,
  .app-title::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 12px;
  }
}

/* Googleアイコン部分（写真 or イニシャル） */
.top-account-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* アカウント名（長い場合は省略） */
.top-account-name {
  max-width: 160px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* テーマアイコン切り替え：ライト = 太陽 / ダーク = 月 */
.icon-theme-moon {
  display: none;
}

body[data-theme="dark"] .icon-theme-sun {
  display: none;
}

body[data-theme="dark"] .icon-theme-moon {
  display: inline;
}

/* 既存の右上バッジは非表示（新しいヘッダーに統合したため） */
#auth-badge {
  display: none;
}

/* Layout */
/* ========= 2. Layout / Sidebar index (P11, 2025-12-02) ==================
   このセクションの読み順・編集順を固定する。値は変更しない（見た目不変）。
   2-1. Sidebar base .............. `.sidebar { ... }`
   2-2. Sidebar nav/groups ........ `.nav`, `.nav-item`, `.account-*`（サイドバー内）
   2-3. Sidebar mini bar .......... `.sidebar-mini { ... }` と付随要素
   2-4. Collapse state ............ `body.sidebar-collapsed .sidebar / .main / .nav-*`
   2-5. Toggle handle ............. `.sidebar-toggle-pill { ... }`（表示条件は `.layout:hover` を正とする）
   2-6. Responsive note ........... PC(≥900px)で collapse 有効、SP では mini を殺して本体表示
   ※ 並べ替え時はこの順序に従い、値は触らない。削除は行わず、移設は1パッチ=1箇所で段階的に。
========================================================================= */

.layout {
  display: flex;
  /* [PATCH-P56-2] 動的ツールバーでの高さブレを抑止 */
  height: 100svh;
  overflow: hidden;
}

/* iOS/Android で dvh 対応ブラウザならこちらを採用 */
@supports (height: 100dvh) {
  .layout {
    height: 100dvh;
  }
}

.sidebar {
  position: relative;
  /* ハンドル用の基準にする */
  width: 240px;
  background: var(--color-surface);
  color: var(--color-text-main);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  overflow-y: auto;
  /* [SIDEBAR-SCROLLBAR-HIDE] 実体スクロールは維持しつつUI上は非表示 */
  border-right: 1px solid var(--color-border-subtle);
  transition: width 0.22s ease, padding 0.22s ease;
}

@media (pointer: fine) {
  .sidebar {
    scrollbar-width: none;
  }

  .sidebar::-webkit-scrollbar {
    display: none;
  }
}

/* 2-3. Sidebar Mini (Collapsed) [moved here by P13, 2025-12-02 — canonical] */
.sidebar-mini {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 64px;
  padding: 16px 10px;
  border-right: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: var(--z-sidebar);
}

/* [P-HIDE] Sidebar handle is out-of-scope for v1 */
.sidebar-toggle-pill {
  display: none;
}

body.sidebar-collapsed .sidebar-mini {
  display: flex;
}

body.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  width: 72px;
  padding: 16px 12px;
}

/* コンテンツの左寄せを維持（mini幅の差し引きを解除） */
body.sidebar-collapsed .main {
  margin-left: 0;
}

/* ＋ だけを表示させる */
body.sidebar-collapsed .fab-add::before {
  content: "＋";
  font-size: 26px;
  line-height: 44px;
}

/* [PATCH-UX-ADD-01] collapse時は丸アイコンボタン化（見た目最小化） */
body.sidebar-collapsed .fab-add {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 9999px;
  justify-content: center;
}

body.sidebar-collapsed .fab-add .fab-add-icon,
body.sidebar-collapsed .fab-add .fab-add-label {
  display: none;
}

body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding-inline: 0;
}

body.sidebar-collapsed .nav-icon {
  margin-right: 0;
  font-size: 20px;
}

body.sidebar-collapsed .nav-label {
  display: none;
}

body[data-theme="dark"] .sidebar-mini {
  background: var(--color-surface-soft);
  border-right: 1px solid var(--color-border-subtle);
}

/* ミニナビ中のアイコンボタン */
.sidebar-mini .mini-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.mini-nav-item {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}

/* === [PATCH-A11Y-02] Mini nav item focus-visible (safe) ================ */
.mini-nav-item:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
  border-radius: 999px;
}

.mini-nav-item:hover {
  background: var(--color-surface-soft);
  transform: translateY(-0.5px);
}

.mini-nav-item:active {
  transform: translateY(0);
}

/* ダークモード用の微調整 */
body[data-theme="dark"] .mini-nav-item:hover {
  background: #2f3136;
}

.logo {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
}

/* ==== Dark mode: サイドバーのコントラスト調整 ==== */
body[data-theme="dark"] .sidebar {
  background: var(--color-surface-soft);
  border-right: 1px solid var(--color-border-subtle);
}

/* サイドバー内ラベル（タスクビュー / ステータス / その他） */
body[data-theme="dark"] .nav-group-label {
  color: #6b7280;
}

/* アクティブ項目は少しだけ強めにハイライト */
body[data-theme="dark"] .sidebar .nav-item.is-active {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
}

/* Light時のみ、極薄の背景を与えて行のまとまりを出す（Darkは上のルールが優先） */
body:not([data-theme="dark"]) .sidebar .nav-item.is-active {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-text-main);
}

/* Gemini風：サイドバー上部の小さめボタン */
.sidebar-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border: none;
  border-radius: 9999px;
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-lift-1);
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease,
    transform 0.12s ease;
}

.sidebar-quick-btn-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted);
}

/* hover / active 時の軽いモーション */
.sidebar-quick-btn:hover {
  background: var(--color-surface-stronger);
  box-shadow: var(--shadow-lift-2);
  transform: translateY(-0.5px);
}

.sidebar-quick-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-press-1);
}

/* ダークテーマ時のトーン調整 */
body[data-theme="dark"] .sidebar-quick-btn {
  background: #2b2d31;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}

body[data-theme="dark"] .sidebar-quick-btn:hover {
  background: #34363b;
}

/* 追加ボタン（ナビとは別レイヤー） */
.fab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 9999px;
  border: none;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-strong)
  );
  color: var(--color-text-on-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.22);
  transition: box-shadow 0.15s ease, transform 0.12s ease;
  margin-bottom: 24px;
}

/* 支払い凍結中のときに「タスク追加」系ボタンをグレーアウト */
.fab-add.is-frozen,
#btn-quick-add-today.is-frozen,
#fab-add.is-frozen,
#mini-add-open.is-frozen {
  background: var(--color-border-subtle);
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: pointer;
}

.fab-add.is-frozen .fab-add-icon {
  color: var(--color-text-muted);
}

/* === [PATCH-A11Y-03] FAB & Add button focus/target (safe) ============== */
.fab:focus-visible,
.fab-add:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 4px;
  border-radius: 999px;
}

/* タッチ環境での当たり判定（見た目不変の不可視ヒットエリア） */
@media (pointer: coarse) {
  .fab,
  .fab-add {
    position: relative;
  }

  .fab::after,
  .fab-add::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
  }
}

.fab-add-icon {
  font-size: 20px;
  line-height: 1;
}

.fab-add-label {
  font-size: 14px;
}

.fab-add:hover {
  box-shadow: 0 14px 32px rgba(34, 197, 94, 0.35);
  transform: translateY(-1px);
}

.fab-add:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.26);
}

/* ナビゲーションのグルーピング */
#side-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2px;
  flex: 1 1 auto;
  min-height: 0;
  /* 内部スクロール時のはみ出し抑止（安全側） */
  overflow: auto;
  /* ← ナビだけスクロール。フッターは固定のまま */
  scrollbar-width: none;
}

/* WebKit: 視覚スクロールバーを隠す（スクロールは可能） */
#side-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.nav-group + .nav-group {
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 8px;
  padding-top: 8px;
}

.nav-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.55;
}

/* 個々のナビ項目（角丸・状態を統一） */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  width: 100%;
  padding: 10px 12px;
  margin-right: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.16s ease, color 0.16s ease;
}

/* 左側のアクセントライン（アクティブ時のみ色が付く） */
.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 9999px;
  background: transparent;
}

/* アイコンとラベル */
.nav-icon {
  width: 18px;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transform: translateY(1px);
}

.nav-label {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.nav-item:hover {
  background: var(--color-surface-soft);
  color: var(--color-text-main);
  transform: translateX(2px);
}

/* === [PATCH-P56-1] Collapsed時は横ズレを止めて中央を維持（UI不変） === */
body.sidebar-collapsed .nav-item:hover {
  transform: none;
}

.nav-item:hover .nav-icon {
  color: var(--color-text-main);
}

.nav-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  transform: none;
}

/* 選択中：左ライン＋背景色＋アイコン/テキストをメインカラーに */
.nav-item.is-active {
  background: rgba(34, 197, 94, 0.18);
  color: var(--color-primary-strong);
  font-weight: 600;
}

.nav-item.is-active::before {
  background: var(--color-primary-strong);
}

.nav-item.is-active .nav-icon {
  color: var(--color-primary-strong);
}

/* [P62] A11y: aria-current="page" を .is-active と同等に扱う（UI不変） */
.nav-item[aria-current="page"] {
  background: rgba(34, 197, 94, 0.18);
  color: var(--color-primary-strong);
  font-weight: 600;
}

.nav-item[aria-current="page"]::before {
  background: var(--color-primary-strong);
}

.nav-item[aria-current="page"] .nav-icon {
  color: var(--color-primary-strong);
}

/* 共通の hr スタイル（他の画面でも使える） */
hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 10px 0;
}

/* ====================== Main ====================== */
.main {
  flex: 1;
  overflow: auto;
  padding: 24px 40px;
  display: flow-root;
  /* margin-collapsing guard とセットでここに1回だけ定義 */
  background: var(--color-bg);
  transition: margin-left 0.22s ease;
  min-height: 100svh;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
}

/* Guard: prevent margin-collapsing at first child */
/* guard は .main 本体ブロック内の display: flow-root とペアで1回だけ定義 */
.main > :first-child {
  margin-block-start: 0 !important;
}

/* [P59] Stop auto-hiding in-content headers.
+   Rationale: This rule was hiding legitimate section headers in views.
+   If any page needs to suppress a duplicated header, opt-in via:
+   body.suppress-dup-header .main > .global-header { display:none; } */
/* (No default suppression) */
/* body.suppress-dup-header .main > .global-header { display: none; } */

.main-inner {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* === Payment Frozen Banner width fix (PC) ========================= */
/* PC幅で「バナーだけ全幅」になって .main-inner とズレるのを防ぐ */
.main > #payment-frozen-banner,
.main > .payment-frozen-banner,
.main > .freeze-banner,
.main > .frozen-banner {
  width: 100%;
  max-width: 960px; /* .main-inner と揃える */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Global page header (title + description) */
.global-header {
  /* 全体の配置 */
  display: flex;
  align-items: center;
  /* 上下中央ではなく、要素の配置による */
  justify-content: space-between;
  margin: 0 0 24px;
  /* 下のリストとの距離 */
  padding: 8px 0 0;
  /* 上に少し余白を持たせて、サイドバーのアイコンと高さを合わせる */
  border: none;
  min-height: 56px;
  /* サイドバーのロゴエリアなどの高さとリズムを合わせる */
  margin-bottom: 32px;
}

/* タイトルと説明文を包むコンテナ */
.global-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* タイトル */
.global-header-left h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-main);
  letter-spacing: 0.02em;
}

/* 説明文 */
/* 説明文を非表示にしてスッキリさせる */
.global-header-left p {
  display: none;
}

.view {
  margin-bottom: 32px;
}

.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-subtle);
}

#view-today {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 今日のタスクヘッダー用「＋ すぐ追加」ボタン */
#view-today #btn-quick-add-today {
  border-radius: 999px;
  padding: 4px 16px;
  font-size: 12px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-main);
  align-self: flex-end;
}

#view-today #btn-quick-add-today:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--color-border-strong);
}

h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

/* 一覧ページの大きい見出し（今日 / 今週） */
.view-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-title-icon {
  font-size: 22px;
}

.view-title-text {
  font-size: 22px;
  font-weight: 600;
}

/* 一覧ページのサブ説明文（今日 / 今週 / 進行中） */
.view-desc {
  margin: -6px 0 28px;
  font-size: 13px;
  color: #9ca3af;
}

/* ====================== Settings layout (設定画面) ====================== */
/* アカウント / カレンダー / データ / 課金 / スケジューラ / 表示 の各ブロック */
.card.setting-card {
  margin: 0 0 16px;
  padding: 10px 0 14px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0;
}

/* ダークモードではライトと同じく「境界線なし」にする */
body[data-theme="dark"] #view-settings .card.setting-card {
  background: transparent;
  border-top-color: transparent;
}

/* 一番上の「アカウント」だけ、上の線を消す */
#view-settings .card.setting-card:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* セクションタイトル（アカウント / カレンダー / データ / 課金 / 表示 など） */
.card.setting-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}

/* 設定カード内の小見出し */
.card.setting-card .setting-subtitle {
  margin: 10px 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* 行レイアウト（KURO / 週の開始 / コンパクト表示 / テーマ など） */
.card.setting-card .row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

/* 行と行の間隔（コンパクト表示の下にテーマ…など） */
.card.setting-card .row + .row {
  margin-top: 6px;
}

/* 左側のラベル部分（週の開始 / コンパクト表示 / テーマ など） */
.card.setting-card .row .grow {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-main);
}

/* アカウント名とメールの行間を少しだけ詰める */
.card.setting-card .grow .muted + .muted {
  margin-top: 2px;
}

/* 課金行：説明テキスト＋右側ボタン */
#view-settings .billing-row {
  align-items: center;
  gap: 12px;
}

#view-settings .billing-row .muted {
  margin-bottom: 2px;
}

#view-settings .billing-row p {
  margin: 0;
}

/* アカウント行：アイコン＋テキスト＋ログアウトボタン */
#view-settings .account-row {
  align-items: center;
}

/* アバターとテキストの横並び */
#view-settings .account-main {
  align-items: center;
  gap: 10px;
}

/* 丸いアバター本体 */
#view-settings .account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* [FIX-DARK-AVATAR] ダーク時の白背景をカード色に統一 */
body[data-theme="dark"] :is(#view-settings .account-avatar, .account-avatar) {
  background: var(--color-surface);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Google アカウント画像 */
#view-settings #acc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  /* JS で photoURL があるときだけ display:block にする */
}

/* 画像がないとき用のイニシャル文字 */
#view-settings #acc-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-main);
}

/* テキストブロックをアバターの縦中央に合わせる */
#view-settings .account-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Google アカウント風の丸アイコン */
.account-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.account-avatar .google-icon {
  font-size: 16px;
  font-weight: 700;
  color: #4285f4;
  /* Google を連想させる青系 */
}

/* ログアウト確認ダイアログ：アカウントの丸アイコン */
.confirm-account-avatar {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.confirm-acc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.confirm-acc-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #64748b;
}

/* 設定画面のトグルグループ（コンテナ） */
.setting-pill-group {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-subtle);
}

/* ダークモード時の背景色調整（既存の記述があれば上書きしてください） */
body[data-theme="dark"] .setting-pill-group {
  background: #111827;
  border-color: #374151;
}

.setting-pill {
  border: none;
  background: transparent;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  min-width: 70px;
  text-align: center;
  color: var(--color-text-muted);
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.setting-pill + .setting-pill {
  margin-left: 2px;
}

.setting-pill:hover {
  background: rgba(15, 23, 42, 0.02);
}

/* 非選択側は少し薄くして、選択状態とのコントラストを強める */
.setting-pill:not(.is-active) {
  opacity: 0.65;
}

/* 選択側ははっきり表示 */
.setting-pill.is-active {
  opacity: 1;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

/* === A11y: キーボード操作でのフォーカスリング === */
.setting-pill:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
}

/* 特例: 「オフ」ボタンが選ばれた時は緑にせずグレーにする */
#btn-compact-off.is-active {
  background: #e5e7eb;
  color: #374151;
  border-color: #d1d5db;
}

/* ダークモード時の「オフ」アクティブ */
body[data-theme="dark"] #btn-compact-off.is-active {
  background: #3f3f46;
  color: #e4e4e7;
  border-color: #52525b;
}

/* ==== Dark mode: トグルピルの見え方 ==== (duplicate disabled) */

/* 非アクティブ側は少し暗め＆薄め */
body[data-theme="dark"] .setting-pill {
  color: #9ca3af;
}

/* アクティブ側はハッキリ「こっち！」と分かるように */
body[data-theme="dark"] .setting-pill.is-active {
  background: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
}

.grow {
  flex: 1;
}

.small {
  font-size: 12px;
}

.muted {
  color: var(--muted);
}

.danger {
  border-color: #f2d6d6;
  color: #a40000;
  background: #fff5f5;
}

/* ======================
   Added: Legal Links in Settings
   ====================== */
/* 設定画面専用のフッターエリア */
.app-footer-info {
  margin-top: 60px;
  margin-bottom: 40px;
  text-align: center;
  border-top: none;
}

/* リンクの並び */
.legal-links-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 区切り線のスタイル */
.sep {
  color: var(--color-border-subtle);
  font-size: 11px;
}

/* リンク自体のスタイル（少し控えめに） */
.legal-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.7;
}

.legal-link:hover {
  text-decoration: underline;
  opacity: 1;
  color: var(--color-text-main);
}

/* バージョン表記 */
.app-version {
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.3;
  font-family: monospace;
}

/* ========== ANCHOR: [3. Common Components] Buttons consolidation ========== */

/* --- Shared Button Base --- */
/* ボタンの共通動作・形状定義（配置、カーソル、トランジション） */
:is(
    .btn-primary,
    .btn-ghost,
    .btn-outline,
    .btn-icon-soft,
    .btn-icon-ghost,
    .brand-btn
  ) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* [P43] Disabled states unification (Buttons)
   目的: 既存UIの見た目を維持したまま、disabled時の挙動
        （hover/transform/影/操作）を全ボタンで統一する。 */
:is(.btn-ghost, .btn-outline, .btn-icon-soft, .btn-icon-ghost):disabled {
  opacity: 0.6;
  /* 視覚トーンはPrimaryと同等の弱め */
  cursor: not-allowed;
  /* 操作不可を明示 */
  pointer-events: none;
  /* hover等の反応を無効化 */
  transform: none;
  /* ふわっと上がる挙動を停止 */
  box-shadow: none;
  /* 影を停止（主にicon-soft想定） */
  filter: grayscale(0.2);
  /* 強すぎない無効感（既存と同じ系統） */
}

/* [P43] Buttons: hover時の縦移動を単一点化 */
:is(
    .btn-primary,
    .btn-ghost,
    .btn-outline,
    .btn-icon-soft,
    .btn-icon-ghost
  ):hover {
  transform: translateY(-1px);
}

/* キーボード操作時のフォーカスリング（マウス時は出さない） */
:is(
    .btn-primary,
    .btn-ghost,
    .btn-outline,
    .btn-icon-soft,
    .btn-icon-ghost,
    .brand-btn
  ):focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
}

/* [PATCH-UX-32] Buttons: small variants consolidation (UI不変) */
/* 目的: 既存の .btn-sm を一箇所に集約。通常サイズの指定は変更しない。 */
:is(.btn-ghost, .btn-outline).btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-primary.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

:is(.btn-icon-soft, .btn-icon-ghost).btn-sm {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

/* --- 1. Primary Button (Main Action) --- */
/* 緑色のメインボタン（追加、保存、登録など） */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border: none;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-soft);
}

/* [P44] hoverの縦移動は共通ルールへ委譲 */
.btn-primary:hover {
  filter: brightness(0.96);
  box-shadow: var(--shadow-brand-btn-hover);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-brand-btn-active);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: grayscale(0.5);
}

/* Primary Danger（削除などの危険操作） */
.btn-primary.danger {
  background: var(--danger);
  color: #ffffff;
}

.btn-primary.danger:hover {
  filter: brightness(0.96);
}

.btn-primary.danger:active {
  transform: translateY(0);
}

#dlg-confirm #confirm-task-list .confirm-card .task-check-slot {
  display: none;
}

/* Dark mode overrides for Primary */
body[data-theme="dark"] .btn-primary {
  /* 黒背景でギラつきすぎないように影を調整 */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

body[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.7);
}

/* --- 2. Ghost & Outline Buttons (Secondary) --- */
/* 背景色なし、または薄い枠線のみのボタン */

/* Base Typography for text buttons */
:is(.btn-ghost, .btn-outline) {
  font-size: 13px;
  padding: 7px 12px;
  color: var(--color-text-main);
}

/* Ghost: 枠線あり（通常） */
.btn-ghost {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}

/* Outline: Ghostとほぼ同じだが、文脈によって使い分ける（明示的な枠線） */
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
}

/* Danger variant (Delete actions) */
:is(.btn-ghost, .btn-outline).danger,
.btn-ghost-danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

:is(.btn-ghost, .btn-outline).danger:hover,
.btn-ghost-danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

/* Dark mode for Danger */
body[data-theme="dark"] :is(.btn-ghost, .btn-outline).danger:hover,
body[data-theme="dark"] .btn-ghost-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

/* [PATCH-E] Buttons: active state normalization */
:is(.btn-ghost, .btn-outline):active {
  transform: translateY(0);
  box-shadow: none;
}

/* --- 3. Icon Buttons (Round) --- */
/* カレンダーの矢印や、リスト内の編集/削除ボタン */

:is(.btn-icon-soft, .btn-icon-ghost) {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
  flex-shrink: 0;
}

/* Soft: 枠線あり、背景あり（カレンダー矢印など） */
.btn-icon-soft {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-main);
}

/* Ghost: 枠線なし/薄い、背景透明（リスト内アクション） */
.btn-icon-ghost {
  background: transparent;
  border: 1px solid transparent;
  /* 配置ズレ防止のため透明ボーダー */
  color: var(--color-text-muted);
}

/* [P44] hoverの縦移動は共通ルールへ委譲 */
:is(.btn-icon-soft, .btn-icon-ghost):hover {
  background: var(--color-surface-soft);
  color: var(--color-text-main);
  border-color: var(--color-border-subtle);
}

:is(.btn-icon-soft, .btn-icon-ghost):active {
  transform: translateY(0);
}

/* Dark mode adjustments */

body[data-theme="dark"] :is(.btn-icon-soft, .btn-icon-ghost):hover {
  background: var(--color-surface-soft);
  color: var(--color-text-main);
}

/* カード内の右寄せボタン群 */
/* [P45] duplicate of .btn-row removed here. Canonical rule is at L1476–1482. */
/* 旧: display:flex; justify-content:flex-end; align-items:center; gap:8px; */
/* 現在有効: gap:16px（UI不変） */

/* 編集・削除ボタンを少し小さめにオーバーライド */
.btn-row .btn-icon-ghost {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

/* Danger icon（trash 等）: DOM の並び順依存をやめ、意味クラスで指定 */
.btn-icon-ghost.danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #ef4444;
}

body[data-theme="dark"] .btn-icon-ghost.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.btn-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.btn-row > :last-child {
  margin-left: 0;
}

@media (pointer: coarse) {
  .btn-icon-ghost,
  .btn-icon-soft {
    position: relative;
  }

  .btn-icon-ghost::after,
  .btn-icon-soft::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    /* 50% でも見た目は同じ。丸みの意図を固定化 */
  }
}

/* === [PATCH-UX-28] Buttons: hover/disabled の統一（UI不変） === */
/* 目的: .btn-ghost / .btn-outline の hover トーンをアイコン系と揃える */
:is(.btn-ghost, .btn-outline):hover {
  background: var(--color-surface-soft);
  color: var(--color-text-main);
  border-color: var(--color-border-subtle);
}

/* ====================== Forms ====================== */

/* [PATCH-UX-34] Forms: placeholder & focus-visible unification (safe) */
/* 目的: 既存トーンに合わせてプレースホルダの色を統一。focus-visible は限定箇所から網羅へ拡張 */
::placeholder {
  color: var(--muted);
  opacity: 0.9;
}

html[data-theme="dark"] ::placeholder {
  color: #9ca3af;
  opacity: 0.9;
}

/* 既に個別適用している箇所に加え、汎用フォーム要素も同じリング方針で統一 */
:where(input, select, textarea):focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
  border-radius: var(--radius-field);
}

/* 誤タップ/誤操作の視覚統一（既存ボタン方針に合わせる） */
:where(button, input, select, textarea):disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- [A11Y-FOCUS-06] Generic focus-visible ring for anchors & small tappables --- */
:where(a):focus-visible,
#view-calendar .pill:focus-visible,
#view-calendar .more:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
  border-radius: 8px;
}

/* [UX-03] Forms: focus ring & error state (safe) ------------- */
.add-form input:focus-visible,
.time-row input[type="time"]:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
}

/* [PATCH] Add/Edit dialog: 「時間」ラベルを他の項目ラベルと同じトーンにする */
.time-row > label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* input側の文字サイズも暴れないように固定（既に別パッチがあってもOK） */
.time-row > label > input[type="time"] {
  font-size: 13px;
}

/* 汎用：無効/読み取り専用の視覚統一（既存UIのトーンに揃える） */
input[disabled],
input[readonly] {
  filter: grayscale(0.1);
  opacity: 0.85;
  cursor: not-allowed;
}

/* 汎用：バリデーション用の軽いエラー態（必要時に .is-invalid を付与） */
.is-invalid {
  border-color: #fecaca !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* 補助テキスト（入力下の説明行に使う想定） */
.help-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.add-form {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

/* [Updated] 入力欄のデザイン：完全フラット（サイズ固定・クリックでグレー枠） */
/* ★修正: .field クラスを追加して優先度を上げ、確実に適用させる */
.light-form .field input:not([type="checkbox"]):not([type="radio"]),
.light-form .field select,
.light-form .field textarea {
  background-color: var(--color-surface-soft);
  color: var(--color-text-main);
  border: 1px solid transparent;
  border-radius: 12px;
  height: 48px;
  font-size: 15px;
  padding-left: 16px;
  box-sizing: border-box;
  box-shadow: none;
  transition: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* [PATCH] Time input: 少しだけ背を低くして省スペース化（他入力は触らない） */
.light-form .time-row input[type="time"] {
  height: 37px;
  padding-left: 17px;
  /* 高さを詰めた分、左右も少しだけ詰める */
}

/* [PATCH] Mobile: time入力を「金額の値」寄りに（色は落とさず、太さだけ調整） */
@media (max-width: 768px) {
  .light-form .time-row input[type="time"] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-main);
    -webkit-text-fill-color: var(--color-text-main);
    /* iOSで色が効かない時の保険 */
    height: 40px;
    padding-left: 12px;
  }
}

/* ダークモード時だけ薄すぎ防止（必要なら） */
@media (max-width: 768px) {
  body[data-theme="dark"] .light-form .time-row input[type="time"] {
    color: rgba(255, 255, 255, 0.75);
  }
}

/* フォーカス時：枠線だけ色をつける（光らせない・サイズ変えない） */
.light-form .field input:focus,
.light-form .field input:focus-visible,
.light-form .field select:focus,
.light-form .field select:focus-visible,
.light-form .field textarea:focus,
.light-form .field textarea:focus-visible,
.light-form .time-row input[type="time"]:focus,
.light-form .time-row input[type="time"]:focus-visible {
  background-color: var(--color-surface-soft);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: none;
  outline: none;
}

/* ダークモード対応（通常時） */
body[data-theme="dark"]
  .light-form
  .field
  input:not([type="checkbox"]):not([type="radio"]),
body[data-theme="dark"] .light-form .field select,
body[data-theme="dark"] .light-form .field textarea,
body[data-theme="dark"] .light-form .time-row input[type="time"] {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

/* ダークモードでのフォーカス時（白っぽいグレー枠） */
body[data-theme="dark"] .light-form .field input:focus,
body[data-theme="dark"] .light-form .field input:focus-visible,
body[data-theme="dark"] .light-form .field select:focus,
body[data-theme="dark"] .light-form .field select:focus-visible,
body[data-theme="dark"] .light-form .field textarea:focus,
body[data-theme="dark"] .light-form .field textarea:focus-visible,
body[data-theme="dark"] .light-form .time-row input[type="time"]:focus,
body[data-theme="dark"] .light-form .time-row input[type="time"]:focus-visible {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ついでに、編集ダイアログ内のラベル（タイトル、期限など）も少し詰める */
.field {
  margin-bottom: 12px;
}

/* [PATCH-N2-XX] Add/Editダイアログのタイトル入力欄のスタイル統一
   目的:
   - タスク追加ダイアログのタイトル欄が青く光るのをやめて、
     他の入力欄と同じ「グレー箱＋フォーカス時グレー枠」に揃える。
   - タスク編集ダイアログのタイトル欄クリック時にも、他欄と同じ
     灰色の枠線がはっきり出るようにする。 */
#dlg-form-add input[name="title"],
#dlg-form-edit input[name="title"] {
  background-color: var(--color-surface-soft);
  color: var(--color-text-main);
  border: 1px solid transparent;
  border-radius: 12px;
  height: 48px;
  font-size: 15px;
  padding: 0 16px;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
}

/* ライトテーマ時のフォーカス: 枠線だけ薄いグレーに */
#dlg-form-add input[name="title"]:focus,
#dlg-form-add input[name="title"]:focus-visible,
#dlg-form-edit input[name="title"]:focus,
#dlg-form-edit input[name="title"]:focus-visible {
  background-color: var(--color-surface-soft);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: none;
  outline: none;
}

/* ダークテーマ時の通常状態 */
body[data-theme="dark"] #dlg-form-add input[name="title"],
body[data-theme="dark"] #dlg-form-edit input[name="title"] {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

/* ダークテーマ時のフォーカス: 白っぽいグレー枠を出す */
body[data-theme="dark"] #dlg-form-add input[name="title"]:focus,
body[data-theme="dark"] #dlg-form-add input[name="title"]:focus-visible,
body[data-theme="dark"] #dlg-form-edit input[name="title"]:focus,
body[data-theme="dark"] #dlg-form-edit input[name="title"]:focus-visible {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
  outline: none;
}

/* [PATCH-N2-02] time 入力の見た目定義（高さ統一に追随） */
.time-row input[type="time"] {
  background: var(--card);
  color: var(--color-text-main);
  padding: 0 10px;
}

/* [PATCH-N2-03] select の背景/文字色をトークン化（既存トーンに合わせる） */
.add-form select,
.light-form select {
  background: var(--card);
  color: var(--color-text-main);
  padding: 6px 10px;
}

/* P69: coarse pointer では 44px に底上げ（視覚差は最小） */
@media (pointer: coarse) {
  :where(input, select, textarea) {
    height: var(--field-h-touch);
  }

  /* 時刻入力も合わせる（heightで統一） */
  .time-row input[type="time"] {
    height: var(--field-h-touch);
  }
}

/* [PATCH] Mobile Add/Edit dialog: time input を大きくしすぎない（iPhone対策） */
@media (max-width: 768px) and (pointer: coarse) {
  #dlg-form-add .time-row input[type="time"],
  #dlg-form-edit .time-row input[type="time"] {
    height: 30px;
    min-height: 30px;

    font-size: 13px;
    padding: 0 6px;
  }
}

.add-form input {
  padding: 0 10px;
  background: var(--card);
}

/* [UX-04] Forms: light-form は [PATCH-N2-01] で shared chrome に統合 */
/* 高さはトークン（--field-h / --field-h-touch）の min-height で揃える */

/* Remove number spinners (WebKit) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* === History segmented control (旧デザイン移植) ======================= */

/* === Badges (History/Calendar) — Canonical set [2025-12-07] ================== */
/* 見た目の芯（共通） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
}

/* ステータスアイコンの土台 */
.status-icon-svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.icon-check-done {
  color: #22c55e;
}

/* 緑 */
.icon-x-charged {
  color: #ef4444;
}

/* 赤 */
.icon-clock-processing {
  color: #f59e0b;
}

/* オレンジ */
.icon-dot-active {
  color: #60a5fa;
}

/* 青 */

/* タスクリスト（今日/今週/進行中/履歴）共通 */
.list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* タスクが0件のときのメッセージ（シンプル版） */
.list .empty-message {
  padding: 24px 16px;
  border-radius: 12px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-subtle);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin-top: 6px;
}

/* ダークモード時のメッセージカード（暗く沈める） */
body[data-theme="dark"] .list .empty-message {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

/* li.item.card → タスク/履歴のカード本体（カード化＋コンパクト） */

/* タスク / 履歴カードのホバーリフト */
.list .item.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

/* [UX-03c] キーボード操作時の可視性：フォーカスを内包したカードをうっすら強調 */
.list .item.card:focus-within {
  outline: var(--focus-ring);
  outline-offset: 2px;
  box-shadow: var(--shadow-lift-2);
}

/* コンパクト表示では強調を控えめに（密度優先） */
body.compact .list .item.card:focus-within {
  outline-offset: 1px;
  box-shadow: var(--shadow-lift-1);
}

/* ダークモード時は影だけ黒寄りに */
body[data-theme="dark"] .list .item.card:hover {
  box-shadow: var(--shadow-dark-card-hover);
}

.list .item.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
}

/* ダークテーマ時：タスクカードは Discord のカード色に揃える */
body[data-theme="dark"] .list .item.card {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
}

/* 達成済みタスクの見た目 */
.item.task-done .title {
  text-decoration: none;
  color: var(--color-text-muted);
  opacity: 0.84;
}

/* P70: 完了時のチェックボタンの軽い強調（旧UIからのトーン更新） */
.item.task-done .check-btn {
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--card));
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}

.item.task-done .meta,
.item.task-done .task-meta-date,
.item.task-done .task-meta-penalty {
  color: var(--color-text-muted);
}

.item.task-done .task-meta-penalty {
  font-weight: 600;
  color: #22c55e;
}

/* [PATCH-FIX-DONE-BADGE] 完了タスク内でもバッジの色と透明度を維持する */
.item.task-done :is(.badge, [class*="badge-status-"], [class*="status-"]) {
  opacity: 1;
  /* 親の透明度を継承させない */
  text-decoration: none;
  /* 取り消し線を継承させない */
  filter: none;
  /* グレースケール等を解除 */
}

/* タスク行のヘッダー：空丸＋タイトル＋ステータスバッジ */
.task-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  transition: background 0.12s ease;
}

/* 空丸＋タイトル一帯にうっすらホバー */
.task-title-row:hover {
  background: rgba(15, 23, 42, 0.02);
}

/* 左端の達成ボタン用スロット（縦横センター） */
.task-check-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* タイトル＝主役情報（少し細め・モダン寄り） */
.task-title-row .title {
  font-size: 16px;
  font-weight: 500;
  /* 追加：右側(meta/badge)に押し潰されて消えないようにする */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ステータスバッジは右端＆控えめ */
.task-title-row .badge-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ステータス：進行中（#00bfff ベース） */
.badge-status-active {
  background: #00bfff1a;
  color: #00bfff;
  border: 1px solid rgba(0, 191, 255, 0.28);
  font-weight: 600;
  box-shadow: none;
}

/* 残り時間（24h以内）ミニバッジ：モバイルでも崩れにくい小さめサイズ */
.badge-remain-mini {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.6;                 /* ← 進行中バッジ等と“縦位置”を揃える */
  border-radius: 999px;
  background: rgba(0, 191, 255, 0.1);
  color: #00bfff;
  border: 1px solid rgba(0, 191, 255, 0.22);
  font-weight: 600;
  white-space: nowrap;

  display: inline-flex;             /* ← 念のため：縦センター安定 */
  align-items: center;
  font-variant-numeric: tabular-nums; /* ← 1/8/0 の幅ブレを抑える（余白固定はしない） */
}

/* JSで表示対象外になったら消す */
.badge-remain-mini.is-hidden {
  display: none;
}

/* 達成ボタン（空の丸） */
.check-btn {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 163, 184, 0.9);
  background: var(--card);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
  position: relative;
}

.check-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.check-btn:hover {
  background: rgba(34, 197, 94, 0.06);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.check-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Dark: check-btn コントラスト最適化 */
body[data-theme="dark"] .check-btn {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.65);
}

body[data-theme="dark"] .check-btn:hover {
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* P70: タッチ環境での操作性（視覚差は最小限） */
@media (pointer: coarse) {
  .check-btn {
    width: 24px;
    height: 24px;
  }

  .check-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
    /* 目に見えない“当たり判定”を拡げる */
    border-radius: 999px;
  }
}

/* ✔ ボタンの位置微調整 */
.task-check-slot .check-btn {
  margin-right: 4px;
}

/* 2行目：期限・金額などのメタ情報 */
.item-body .meta {
  grid-column: 1;
  grid-row: 2;
}

/* 追加情報（履歴のメモなど）は下にフル幅で並べる */
.item-body .meta.small {
  grid-column: 1 / -1;
}

/* 共通の文字スタイル */
.title {
  font-weight: 800;
}

/* === タスクカードの 日付＋金額 行（meta）をシンプルに統一 === */
.meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.45;
}

/* タイトル行の右側に並ぶ 日付＋金額 を少しだけ右に寄せる */
.task-title-row .meta {
  margin-left: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 左側：締切テキスト */
.meta-date {
  color: var(--muted);
  white-space: nowrap;
}

/* 右側：金額（赤で強調） */
.task-meta-penalty {
  margin-left: auto;
  color: #ed4245;
  font-weight: 600;
}

/* ===== Remaining time (meta right group) ===== */
.task-meta-date {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-meta-right {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 右グループ内では auto マージン不要 */
.task-meta-right .task-meta-penalty {
  margin-left: 0;
}

.task-meta-remain {
  color: #00bfff;
  font-weight: 600;
  white-space: nowrap;
}

/* 金額部分：ペナルティを目立たせる（赤太字） */
.meta-amount {
  font-weight: 800;
  color: #ed4245;
}

/* 将来 .task クラスを使ったとき用に一応残す */
.task.is-done {
  border-color: #b8ebc8;
}

/* ---- 履歴の統計 ---- */

/* 統計パネル内のヒントアイコン（?マーク）の見た目 */
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 50% !important;
  font-size: 8px;
  font-weight: 700;
  margin-left: 4px;
  opacity: 0.5;
  cursor: help;
  transform: translateY(-1px);
  transition: opacity 0.2s, background 0.2s;
  background-color: transparent;
}

.tooltip-icon:hover {
  opacity: 1;
  background: rgba(120, 120, 120, 0.15);
  border-radius: 50% !important;
}

/* [LEGACY NOTE] .stats-panel を grid(3cols / gap:8 / mb:24) にしていた旧仕様。
   ここは説明だけ残し、実装は無効化（実スタイルは下の .stats-panel.* を使用） */
/* [legacy note] Old mobile stats-panel block was removed on 2025-12-02 (lint fix). */
/* [/commented out legacy noop] */

/* 統計カード本体：白カード＋影 ＆ 中央寄せ */
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}

.stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
}

body[data-theme="dark"] .stat:hover {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.8);
}

/* ラベル：小さめの濃いめグレー（読みやすさ重視） */
.stat .label,
.stat .k {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* 数字：大きく・太くメイン情報として強調 */
.stat .value,
.stat .v {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-main);
}

/* 「回避額（累計）」の数字だけ緑にして損失回避コンセプトを強調 */
.stat--saved-total .value {
  color: #16a34a;
}

/* ====================== Light Dialog ====================== */

/* 基本フォームの統一（選択子は弱め・広め、既存の強い指定は尊重） */
:where(.add-form, form) :where(input, select, textarea) {
  font: inherit;
  color: var(--ctl-fg);
  background: var(--ctl-bg);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  height: var(--ctl-h);
  line-height: calc(var(--ctl-h) - 2px);
  padding: 0 var(--ctl-pad-x);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* placeholder色の統一 */
:where(.add-form, form) :where(input::placeholder, textarea::placeholder) {
  color: var(--ctl-ph);
  opacity: 1;
}

/* フォーカスの統一（outlineを箱影へ） */
:where(.add-form, form) :where(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--brand-500, #3b82f6);
  box-shadow: 0 0 0 2px var(--ctl-focus);
}

/* disabledの統一 */
:where(.add-form, form) :where(input, select, textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* time入力の見た目を正規化（縦センタ、アイコンの視認性） */
:where(.add-form, form) input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--ctl-pad-x) + 8px);
  /* アイコンぶんの余白 */
}

/* 数字エリアの縦位置と余白 */
:where(.add-form, form) input[type="time"]::-webkit-datetime-edit {
  padding: 0 2px;
}

/* アイコンの見た目（ライト/ダーク両対応） */
:where(.add-form, form) input[type="time"]::-webkit-calendar-picker-indicator {
  margin: 0 4px 0 2px;
  opacity: 0.85;
}

/* ダーク時は反転で視認性UP（既存data-theme準拠） */
/* [FIX-DARK-ICON-V2] ダークモード時の入力欄アイコン修正（決定版） */
body[data-theme="dark"] input[type="date"],
body[data-theme="dark"] input[type="time"],
body[data-theme="dark"] input[type="datetime-local"] {
  /* 強制的に「ダークモード用（白アイコン）」のUIパーツを使わせる */
  color-scheme: dark;
}

/* 念のため、反転フィルターなどが残っていたらリセットする */
body[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
body[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
body[data-theme="dark"]
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.9;
  cursor: pointer;
}

/* selectの矢印が巨大化する環境の保険（iOS/Safari等） */
:where(.add-form, form) select {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  /* 既存でカスタム矢印があればそちらが優先される */
}

.light-dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

/* =========================
   Dialog positioning fix
   ========================= */

/* dialog自体は「全面の土台」にして、中身(form)を中央に置く */
.light-dialog[open] {
  /* dialog を常に viewport 基準の“全面コンテナ”に固定
     （body/layout側の幅やスクロールバー補正の影響を受けない） */
  position: fixed;
  inset: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  /* fallback */
  height: 100svh;
  /* iOS Safariのアドレスバー変動でズレない“安定Viewport” */
  max-width: none;
  max-height: none;

  display: grid;
  place-items: center;
  overflow: visible;
  /* 欠け防止 */
}

/* 中身(form)はgridの中央に来るので margin:auto 依存をやめる */
/* 高さが足りない端末でも、ダイアログ内が欠けないようにする */
/* dialog[open] 配下のフォームにだけ適用 */
.light-dialog[open] .light-form,
.light-dialog[open] .day-dialog {
  margin: 0;
  max-width: calc(100vw - 48px);
  /* 既存の “左右24px” ルールをここで担保 */

  /* iOS Safari のアドレスバー変動で “開いた直後だけ” 高さが再計算されるのを避ける */
  max-height: calc(100svh - 38px);
  overflow: auto;
  -webkit-overflow-scrolling: auto;
  /* 通常時は auto（描画の揺れ防止） */

  animation: dialogIn 0.22s ease-out;
}

/* iOS Safari: 画面が低い端末だけ慣性スクロールを有効化 */
@media (max-height: 740px) and (max-width: 480px) {
  .light-dialog[open] .light-form,
  .light-dialog[open] .day-dialog {
    -webkit-overflow-scrolling: touch;
  }
}

/* iOS Safari の“微妙な1pxはみ出し”で横スワイプできるのを封じる */
#dlg-ui-confirm,
#dlg-ui-confirm .light-form,
#dlg-confirm,
#dlg-confirm .light-form {
  overflow-x: clip;
}

/* ダイアログを開くときのモーション（下からふわっと） */
@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ===============================
   Dialog Backdrop Motion Fix
   “黒い板が一瞬出る”のをフェードで解消
   =============================== */

/* backdrop用：ライト（通常） */
@keyframes dlgBackdropIn {
  from {
    background: rgba(0, 0, 0, 0);
  }

  to {
    background: rgba(0, 0, 0, 0.16);
  }
}

@keyframes dlgBackdropInDark {
  from {
    background: rgba(0, 0, 0, 0);
  }

  to {
    background: rgba(0, 0, 0, 0.45);
  }
}

.light-dialog::backdrop {
  background: rgba(0, 0, 0, 0.16);
  animation: dlgBackdropIn 0.22s ease-out;
}

/* 既存の “ダーク判定の ::backdrop 上書き” はこれに置換 */
html[data-theme="dark"] .light-dialog::backdrop,
:root[data-theme="dark"] .light-dialog::backdrop,
body[data-theme="dark"] .light-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  animation: dlgBackdropInDark 160ms ease-out both;

  /* これはあなたの現状方針を維持（黒が広がって見えるのを防ぐ） */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 共通フォーム（ダイアログ内） */
.light-form {
  background: var(--card);
  color: var(--color-text-main);
  padding: 32px 32px 24px;
  width: min(92vw, 480px);
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* iOS Safari: ダイアログ表示直後の一瞬の未描画（空白）対策 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.light-form > menu {
  border-top: none;
  border: 0;
  box-shadow: none;

  /* 追尾時に“灰色の板”が付いてくる問題を回避 */
  background: transparent;

  /* 余白は必要最小限（見た目が詰まりすぎない程度） */
  padding-top: 6px;
}

/* Dialog buttons: keep height, tighten horizontal padding */
.light-form > menu .btn-primary {
  padding-left: 14px;
  padding-right: 14px;
}

.light-form > menu :is(.btn-ghost, .btn-outline) {
  padding-left: 10px;
  padding-right: 10px;
}

/* uiConfirm（ログアウト/削除など）用の本文 */
.ui-confirm-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-sub);
  letter-spacing: 0.01em;
}

/* ========== UI Confirm（タスク削除/ログアウト共通） ========== */

#dlg-ui-confirm .light-form {
  /* 右端欠け対策：dialog側の左右余白（calc(100vw - 48px)）に必ず収める */
  width: 100%;
  max-width: min(640px, calc(100vw - 48px));
  box-sizing: border-box;
  padding-bottom: 24px;
}

#dlg-ui-confirm h3 {
  margin: 0;
  font-size: 18px;
}

.ui-confirm-detail-title {
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dlg-ui-confirm menu {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ダイアログ内のdangerボタン（ログアウトなど） */
#dlg-ui-confirm .btn-ghost.danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  background: transparent;
}

#dlg-ui-confirm .btn-ghost.danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

body[data-theme="dark"] #dlg-ui-confirm .btn-ghost.danger {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}

body[data-theme="dark"] #dlg-ui-confirm .btn-ghost.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(248, 113, 113, 0.6);
  color: #fca5a5;
}

/* 破壊的アクション（削除など） */
.btn-danger {
  background: #e14c4c;
  border-color: #e14c4c;
  color: #fff;
}

.btn-danger:hover {
  filter: brightness(0.96);
}

/* uiConfirm の詳細（削除対象など） */
.ui-confirm-detail {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  background: var(--color-surface-soft);
}

/* uiConfirm: メッセージが無い（hidden）時は詳細の上余白を詰める */
#dlg-ui-confirm #ui-confirm-message[hidden] + #ui-confirm-detail {
  margin-top: 8px;
}

/* [PATCH-UI-CONFIRM-CARD] uiConfirm(削除) のタスクカードを「達成確認ダイアログ」と同一にする */
#dlg-ui-confirm .ui-confirm-detail.ui-confirm-detail-card {
  margin: 16px 0 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.item.card {
  width: 100%;
  margin: 0;
  box-sizing: border-box;

  /* ✅ 直下の子が1個でも右に余白が残らないように block 固定 */
  display: block;

  /* PCは通常カードと同じ padding（達成確認と統一） */
  padding: 12px 20px;

  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);

  min-height: auto;
}

/* [PATCH-UI-CONFIRM-ACCOUNT] ログアウト確認：アカウントカードにアバターを表示 */
#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .task-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .task-main {
  flex: 1;
  min-width: 0;
}

/* [PATCH-UI-CONFIRM-ACCOUNT] 追加：名前/メールが長い時に右へ押し出さない */
#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .task-main
  .title,
#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .task-main
  .meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* taskカード用の .task-title-row .meta (margin-left:12px 等) の影響を無効化 */
#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .task-main
  .meta {
  margin-left: 0;
  display: block;
}

#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .badge-wrap {
  flex-shrink: 0;
}

/* 設定のアバター(40px)に寄せる */
#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .account-avatar {
  width: 40px;
  height: 40px;
}

/* 画像/フォールバック */
#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .confirm-acc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.confirm-card--account
  .confirm-acc-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-main);
}

/* モバイル時：既存の「confirm-card の task-title-row を grid 化」パッチの影響を避ける */
@media (max-width: 768px) {
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card.confirm-card--account
    .task-title-row {
    display: flex;
  }
}

/* モバイルだけ達成確認（モバイル）と同じ padding に落とす */
@media (max-width: 768px) {
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card.item.card {
    padding: 10px 12px;
  }
}

#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card.item.card
  .item-body {
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 確認カードは操作不可（誤タップ対策、達成確認と同じ） */
#dlg-ui-confirm .ui-confirm-detail.ui-confirm-detail-card .confirm-card {
  pointer-events: none;
}

/* 念のため：もし残ってもアイコン枠は消す（JSで remove してるが保険） */
#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card
  .task-title-row
  .task-check-slot {
  display: none !important;
}

/* PC幅は「達成確認」と同じ（通常の .task-title-row = flex）を使うため、ここでは上書きしない */

/* モバイル幅だけ、達成確認と同じ2段レイアウトにする */
@media (max-width: 768px) {
  /* タスク用 confirm-card だけ（アカウントカードは除外） */
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row {
    display: grid;
    grid-template:
      "title actions" auto
      "meta  actions" auto
      / minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
  }

  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .title {
    grid-area: title;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .meta {
    grid-area: meta;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
  }

  /* 金額が右に飛ぶ原因（margin-left:auto 等）を潰す：達成確認と同じ */
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .task-meta-penalty {
    margin-left: 0 !important;
  }

  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .btn-row {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  /* 確認画面では編集/削除ボタンは非表示（バッジだけ残す） */
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .btn-row
    button,
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .btn-row
    .btn-icon-ghost {
    display: none !important;
  }

  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .btn-row
    .badge-wrap {
    display: flex;
    align-items: center;
  }
}

/* ========== force-dark: 同意画面など黒背景上に表示されるダイアログ ========== */
#dlg-ui-confirm.force-dark .light-form {
  background: #2a2b2f;
  color: #f0f0f0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#dlg-ui-confirm.force-dark h3 {
  color: #ffffff;
}

#dlg-ui-confirm.force-dark .sub,
#dlg-ui-confirm.force-dark #ui-confirm-message {
  color: rgba(255, 255, 255, 0.75);
}

#dlg-ui-confirm.force-dark::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

#dlg-ui-confirm.force-dark .btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #f0f0f0;
  border-color: rgba(255, 255, 255, 0.2);
}

#dlg-ui-confirm.force-dark .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

#dlg-ui-confirm.force-dark .btn-ghost.danger {
  background: transparent;
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
}

#dlg-ui-confirm.force-dark .btn-ghost.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(248, 113, 113, 0.7);
  color: #fca5a5;
}

#dlg-ui-confirm.force-dark .btn-primary {
  background: var(--primary);
  color: #fff;
}

#dlg-ui-confirm
  .ui-confirm-detail.ui-confirm-detail-card
  .confirm-card:not(.confirm-card--account)
  .task-check-slot {
  display: none;
}

.day-dialog {
  background: var(--card);
  color: var(--color-text-main);
  padding: 24px 32px 20px;
  width: min(92vw, 640px);
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* iOS Safari: ダイアログ表示直後の一瞬の未描画（空白）対策 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  contain: paint;
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  /* .light-form に合わせる */
  overflow: hidden;
  /* 角丸を“見た目”で殺さないため */
}

/* dlg-day 内では meta を折り返させない */
#dlg-day .task-title-row .meta {
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  /* 日付/金額は縮まない */
}

/* 追加: タイトルが潰れて見えない問題を防ぐ */
#dlg-day .task-title-row .title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-dialog h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}

/* このダイアログ内のリストだけ、カード間の間隔を広めにする */
.day-dialog .list {
  gap: 6px;
}

/* 不要な説明文を隠す */
.edit-dialog-subtitle {
  display: none;
}

/* ダイアログ見出し */
.light-form h3 {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* フィールドラッパー */
.field,
.f-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

/* ラベルスタイル */
.field-label,
.f-block span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 4px;
}

/* Forms: WebKit autofill theming (safe) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-main);
  box-shadow: 0 0 0 1000px var(--card) inset;
  transition: background-color 5000s ease-in-out 0s;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-main);
  box-shadow: 0 0 0 1000px var(--card) inset;
}

/* ★追加: ラベル横の注釈テキスト（300〜50,000） */
.field-label .label-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  opacity: 0.8;
  margin-left: 8px;
}

/* 金額入力欄のラッパー */
.input-currency-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: var(--color-surface-soft);
  color: var(--color-text-main);
  border: 1px solid transparent;
  border-radius: 12px;
  height: 42px;
  overflow: hidden;
  box-shadow: none;
}

/* ¥マーク */
.input-currency-wrap::before {
  content: "¥";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 16px;
  z-index: 2;
  pointer-events: none;
}

/* 内部のinput */
.input-currency-wrap input {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100%;
  height: 100% !important;
  padding-left: 36px !important;
  font-size: 15px;
  border-radius: 0;
}

/* ★変更: フォーカス時に「灰色の枠」を表示 */
.input-currency-wrap:focus-within {
  background-color: var(--color-surface-soft);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: none;
}

/* ダークモード */
body[data-theme="dark"] .input-currency-wrap {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

/* ダークモードでのフォーカス時（白っぽいグレー枠） */
body[data-theme="dark"] .input-currency-wrap:focus-within {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

/* Dialog calendar field */
.calendar-field {
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 0 0 8px;
  background: var(--card);
  min-inline-size: 0;
  /* Safari legend バグ対策 */
  min-block-size: 0;
  /* 初期高さの暴走防止 */
  position: relative;
  padding-top: 14px;
  /* legend 分を自分で確保 */
}

.calendar-field legend {
  color: #6b7280;
  padding: 0 6px;
  position: absolute;
  top: -0.6em;
  left: 12px;
  line-height: 1;
  white-space: nowrap;
}

.dlg-cal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 6px;
}

.dlg-cal-title {
  flex: 1;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
}

.dlg-cal-head .icon {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  color: var(--color-text-main);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

/* [PATCH-D] A11y: calendar header icons focus ring */
.dlg-cal-head .icon:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
  border-radius: 8px;
}

.dlg-cal-head .icon:hover {
  background: var(--color-surface-soft);
}

.dlg-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin: 6px 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.dlg-dow span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  height: 24px;
}

.dlg-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dcell {
  background: transparent;
  border: none;
  color: var(--color-text-main);
  min-height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 13px;
  justify-content: center;
}

/* ホバー時だけ薄く枠や色を出す */
.dcell:hover {
  background: var(--color-surface-soft);
}

.dcell.other {
  opacity: 0.4;
}

.dcell.today {
  outline: 2px solid rgba(46, 204, 113, 0.35);
}

/* [UI-UPDATE] カレンダーの選択日：枠線ではなく「塗りつぶし」で強調 */
.dcell.selected {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

/* ダークモード時の影調整 */
body[data-theme="dark"] .dcell.selected {
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

.time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.picked-summary {
  color: #6b7280;
  font-size: 12px;
}

/* ダイアログ内ボタン（閉じる／達成） */
menu {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  margin: 10px 0 0;
  /* 14px → 10px（下側の余計なmarginも潰す） */
  border-top: none;
  box-shadow: none;
}

/* --- 達成確認ダイアログのUI改善（カードデザイン化） --- */

/* タスク情報を囲む「カード（枠）」を作る */
#confirm-task-title {
  display: block;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0 24px;
  text-align: left;
}

/* ダークモード時もカレンダー詳細ダイアログと同じソフトなカード色を使う */
body[data-theme="dark"] #confirm-task-title {
  background: var(--color-surface-soft);
  border-color: var(--color-border-subtle);
}

/* 1. タスク名：一番目立たせる */
.confirm-task-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* 2. 期限：補足情報 */
.confirm-task-deadline {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}

/* 3. 金額：重要情報なので区切って強調 */
.confirm-task-amount {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-main);

  /* 上に点線を入れて「レシート」っぽく区切る */
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border-subtle);
}

/* 達成確認ダイアログ用：タスク情報の見せ方 ＆ ボタン強調 */

/* タスク名＋期限（補足情報として1段階トーンダウン） */
#confirm-task-title,
.confirm-meta-text {
  display: block;
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* 「達成」ボタンを少しだけ大きめ＆太めにして主役感アップ */
#btn-confirm-done {
  min-width: 96px;
  padding: 9px 18px;
  font-weight: 700;
}

/* [PATCH-CONFIRM-LAYOUT] 達成確認画面のリストUI調整 */
#confirm-task-list {
  list-style: none;
  /* list class は ul を想定しているが、div に適用するため */
  padding: 0;
  margin: 20px 0 32px;
  width: 100%;
}

/* 確認画面のカードに対して、不要なホバーエフェクトを無効化 */
#confirm-task-list .item.card:hover,
#ui-confirm-task-list .item.card:hover {
  transform: none;
  box-shadow: none;
}

/* [PATCH-CONFIRM-WIDTH] 達成確認ダイアログの幅を拡張＆スクロールバー防止 */
#dlg-confirm .light-form {
  /* 右端欠け対策：dialog側の左右余白（calc(100vw - 48px)）に必ず収める */
  width: 100%;
  max-width: min(640px, calc(100vw - 48px));
  box-sizing: border-box;
}

/* カードの幅をダイアログいっぱいに広げる */
#confirm-task-list .item.card,
#ui-confirm-task-list .item.card {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

/* ✅ li marker（左の見えない点/余白）を confirm 用リストでも確実に殺す */
#confirm-task-list .item.card,
#confirm-task-list .item.card::marker {
  list-style: none !important;
}

#confirm-task-list .item.card::marker {
  content: "" !important;
}

/* クリック等を無効化（確認用の静的カード） */
#confirm-task-list .confirm-card,
#ui-confirm-task-list .confirm-card {
  pointer-events: none;
}

/* [PATCH-CONFIRM-UNIFY] 統一感の向上：ダイアログを標準に戻し、カードを「入力欄」のスタイルに合わせる */

/* 1. ダイアログの背景を、他のダイアログ（追加・編集）と同じ色に戻す */
body[data-theme="dark"] #dlg-confirm .light-form {
  background-color: var(--card) !important;
  border: none;
}

/* ====================== Main view calendar ====================== */

/* カレンダー上部ヘッダー（◀ タイトル ▶ 今日へ） */
/* カレンダー上部ヘッダー（タイトル＋ナビボタン） */
#view-calendar .cal-head {
  position: relative;
  display: flex;
  justify-content: flex-start;
  /* 左から並べる（▶＋今日へは右寄せを別で指定） */
  align-items: center;
  gap: 12px;

  /* タイトル用にしっかり高さを確保して、ボタン列と縦方向で分離する */
  padding-top: 24px;
  margin-bottom: 16px;
}

/* 月タイトルはコンテナの“ど真ん中”に固定 */
#view-calendar .cal-head h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* コンテナの上下左右の真ん中に配置する */
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
  /* 万が一ボタンとかぶってもクリックを邪魔しないように */
}

/* カレンダーのヘッダーで使う pill ボタン（◀ ▶ 今日へ） */
#view-calendar .cal-head .setting-pill {
  border-radius: 999px;
  padding: 4px 16px;
  /* 今日へ と同じ高さの角丸四角形 */
  font-size: 12px;
  min-width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ▶/◀ でも常に“容器”が見えるように背景＆枠線を付ける */
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-subtle);
}

@media (pointer: coarse) {
  #view-calendar .cal-head .setting-pill {
    position: relative;
  }

  #view-calendar .cal-head .setting-pill::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
  }
}

/* ◀ ▶ の左右ナビボタン：今日へに近い横幅を確保 */
#view-calendar .cal-nav-btn {
  min-width: 56px;
  /* 今日へと似た縦横比になるように少し広めに */
  padding-inline: 10px;
}

/* 右ナビボタン（▶）だけを右端に寄せ、その右に「今日へ」を並べる */
#view-calendar #cal-next {
  margin-left: auto;
}

/* hover 時は少しだけ濃くしてボタン感アップ */
#view-calendar .cal-head .setting-pill:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--color-border-strong);
}

/* 「今日へ」ボタン：ライト／ダーク pill と同じくらいのサイズ感 */
#view-calendar .cal-today-pill {
  padding-inline: 14px;
  font-weight: 500;
}

/* 曜日ヘッダー（日〜土） */
#view-calendar .cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
  color: #cbd5e1;
}

#view-calendar .cal-dow-label {
  text-align: center;
  font-weight: 500;
}

/* 日曜＝赤 / 土曜＝青（ラベル自体を色分け） */
#view-calendar .cal-dow-label.sun {
  color: #ef4444;
}

#view-calendar .cal-dow-label.sat {
  color: #3b82f6;
}

/* カレンダー本体グリッド */
#view-calendar .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

/* 1マス（1日分）のセル */
#view-calendar .cal-cell {
  background: var(--color-surface);
  border: 1px solid var(--calendar-cell-border);
  border-radius: 16px;
  min-height: 96px;
  padding: 20px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

/* カレンダー：今日のマスを強調表示 */
#view-calendar .cal-cell.is-today {
  border-color: var(--color-primary-strong);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}

/* ダークモード時の今日のマス（少しだけ強めに） */
body[data-theme="dark"] #view-calendar .cal-cell.is-today {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.75);
}

/* カレンダーの1日セル：ホバーでほんの少し浮く */
#view-calendar .cal-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

body[data-theme="dark"] #view-calendar .cal-cell:hover {
  box-shadow: var(--shadow-dark-cal-hover);
}

/* カレンダー pill：押したくなる程度に軽いスケール */
#view-calendar .cal-cell .pill:hover {
  transform: scale(1.02);
}

/* ダークテーマ時：カレンダーの1日セルもカードと同じ階層色に */
body[data-theme="dark"] #view-calendar .cal-cell {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
}

/* 日付表示：右上に固定配置 */
#view-calendar .cal-date {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* 今日の日付はブランドカラーで強調 */
#view-calendar .cal-date.today {
  color: var(--color-primary-strong);
  font-weight: 600;
}

/* 日曜・土曜の日付の色分け（今日以外） */
#view-calendar .cal-cell.is-sun .cal-date:not(.today),
#view-calendar .cal-date.sun:not(.today) {
  color: var(--calendar-sun);
}

#view-calendar .cal-cell.is-sat .cal-date:not(.today),
#view-calendar .cal-date.sat:not(.today) {
  color: var(--calendar-sat);
}

#view-calendar .pill {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  border-radius: 999px;
  padding: 2px 6px;
  margin-bottom: 2px;

  /* 文字が長すぎるときに「...」にする魔法の3行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: #fff !important;
  text-align: left;
  text-decoration: none;
  border: none !important;
  transform: none;
  cursor: pointer;
}

/* ホバー時に中身がわかるように */
#view-calendar .pill:hover {
  opacity: 0.8;
  z-index: 10;
  min-width: max-content;
}

/* [CAL-PILL-BRIDGE] 色分け: セル内のpillに多様なクラス/属性を橋渡し */
#view-calendar .pill:is(.is-done, .status-done, [data-status="done"]) {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

#view-calendar .pill:is(.is-active, .status-active, [data-status="active"]) {
  /* 進行中 = 青 */
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

#view-calendar
  .pill:is(.is-processing, .status-processing, [data-status="processing"]) {
  /* 処理中 = オレンジ */
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

#view-calendar .pill:is(.is-charged, .status-charged, [data-status="charged"]) {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

#view-calendar .cal-cell .pill.status-charged {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}

/* [PATCH-A11Y-CAL-01] タッチ環境: pill/legendの不可視ヒットエリア拡張 */
@media (pointer: coarse) {
  #view-calendar .pill,
  #view-calendar .legend-item {
    position: relative;
  }

  #view-calendar .pill::after,
  #view-calendar .legend-item::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 10px;
  }
}

/* [PATCH-STEP1-02] Define 4 status colors clearly (Normalized & Clean) */

/* 1. 進行中 (Active) : 青 */
.badge-status-active,
.status-active,
[data-status="active"] {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* 2. 達成 (Done) : 緑 */
.badge-status-done,
.badge.done,
.badge-done,
.status-done,
[data-status="done"],
/* [FIX] 完了タスク内でも確実に色を適用（詳細度を上げる） */
.item.task-done .badge-done {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  transform: none;
}

/* 3. 処理中 (Processing) : オレンジ */
.badge-status-processing,
.badge-processing,
.status-processing,
[data-status="processing"] {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.4);
}

/* 4. 徴収済み (Charged) : 赤 */
.badge-status-charged,
.badge-charged,
.status-charged,
[data-status="charged"] {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

#view-calendar .pill:is(.status-active, [data-status="active"]) {
  background: #3b82f6;
}

#view-calendar .pill:is(.status-done, [data-status="done"]) {
  background: #22c55e;
}

#view-calendar .pill:is(.status-processing, [data-status="processing"]) {
  background: #f97316;
}

#view-calendar .pill:is(.status-charged, [data-status="charged"]) {
  background: #ef4444;
}

/* 同じ日に複数タスクがあるときの間隔 */
#view-calendar .cal-cell .pill + .pill {
  margin-top: 4px;
}

/* 「＋2件」などの追加件数表示 */
#view-calendar .more {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* [PATCH-UX-33] Calendar more: モバイルのヒット領域拡張（見た目不変） */
@media (pointer: coarse) {
  #view-calendar .more {
    position: relative;
  }

  #view-calendar .more::after {
    content: "";
    position: absolute;
    inset: -6px;
    /* テキストの周囲に不可視の当たり判定を付与 */
    border-radius: 6px;
  }
}

/* カレンダーの凡例（色の説明） */
#view-calendar .cal-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

#view-calendar .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* 凡例用のドット */
#view-calendar .legend-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* 色定義（ドット用） */
#view-calendar .legend-item .status-active {
  background: #3b82f6;
}

/* 青 */
#view-calendar .legend-item .status-done {
  background: #22c55e;
}

/* 緑 */
#view-calendar .legend-item .status-processing {
  background: #f97316;
}

/* オレンジ */
#view-calendar .legend-item .status-charged {
  background: #ef4444;
}

/* 赤 */

.hidden {
  display: none !important;
}

.freeze-banner {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;

  background: rgba(255, 245, 245, 0.98); /* 不透明寄り */
  border: 1px solid rgba(239, 68, 68, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  isolation: isolate; /* 描画の混ざり防止 */
}

.freeze-banner__title {
  font-weight: 800;
  line-height: 1.2;
}

.freeze-banner__desc {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.4;
}

.freeze-banner__cta {
  white-space: nowrap;
}

/* ダークモード対応 */
body[data-theme="dark"] .freeze-banner {
  background: rgba(50, 30, 30, 0.98);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f5f5f5;
}

body[data-theme="dark"] .freeze-banner__title {
  color: #fca5a5;
}

body[data-theme="dark"] .freeze-banner__desc {
  color: #e5e5e5;
}

/* [P51] FAB の責務
   - PC：デフォルト非表示（.fab { display:none }）。
   - Mobile：≤720px では .fab を表示、≤900px では安全域(right/bottom)のみ上書き。
   - z-index：トークン（--z-fab / --z-bottomnav）で一元管理。各所で固定値を再定義しない。 */

/* ====================== FAB ====================== */

.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: var(--shadow);
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 24px;
  cursor: pointer;

  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-fab);
}

.fab:hover {
  filter: brightness(0.95);
}

/* [PATCH-BADGE-BRIDGE-02] Unify badge chips across all views (.badge-status-*) */
.opt-stamp
  :where(
    .badge-status-active,
    .badge-status-done,
    .badge-status-processing,
    .badge-status-charged
  ) {
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  border-width: 1px;
  border-style: solid;
}

/* =================================================================
   4. 【Views / Pages】 Special Pages (Login, Legal, Onboarding, Boot)
   ================================================================= */

/* --- 4-1. Boot Mask (起動ローディング) --- */
.boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.boot-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.boot-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #3cbc74;
  animation: boot-spin 0.8s linear infinite;
}

.boot-text {
  margin-top: 4px;
  font-size: 14px;
  color: #777;
}

/* --- 4-1. Boot Mask (起動ローディング) --- */
#boot-mask {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: var(--z-boot);
  transition: opacity 0.3s ease;
}

@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dark mode boot */
html[data-theme="dark"] .boot-text {
  color: #aaa;
}

html[data-theme="dark"] .boot-spinner {
  border-color: rgba(0, 0, 0, 0.35);
  border-top-color: #3cbc74;
}

/* --- 4-3. Legal Page (Cyber Aurora) --- */
body.legal-page {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: #e4e4e7 !important;
  background: radial-gradient(
    ellipse at top left,
    #0c1a14 0%,
    #000000 70%
  ) !important;
  line-height: 2;
  overflow-x: hidden;
  position: relative;
  min-height: 100svh;
}

@supports (height: 100dvh) {
  body.legal-page {
    min-height: 100dvh;
  }
}

body.legal-page::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -3;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #000000 0deg,
    rgba(16, 185, 129, 0.1) 60deg,
    #000000 120deg,
    rgba(34, 197, 94, 0.15) 180deg,
    #000000 240deg,
    rgba(6, 78, 59, 0.2) 300deg,
    #000000 360deg
  );
  filter: blur(80px);
  animation: auroraSpin 60s linear infinite;
  opacity: 1;
  pointer-events: none;
}

@keyframes auroraSpin {
  0% {
    transform: rotate(0deg) scale(1.5);
  }

  100% {
    transform: rotate(360deg) scale(1.5);
  }
}

.legal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 100px 24px 140px;
  position: relative;
  z-index: 1;
}

.legal-card {
  background: rgba(18, 18, 23, 0.75) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  padding: 80px 60px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  animation: cardEnter 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.legal-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0;
  color: #ffffff !important;
  text-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
  text-align: center;
}

.legal-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  margin-top: 24px;
  opacity: 0.7;
}

.legal-body h2 {
  font-size: 18px;
  font-weight: 700;
  color: #a7f3d0 !important;
  margin-top: 60px;
  border-left: 3px solid #22c55e;
  padding-left: 16px;
}

.legal-body p {
  margin-bottom: 24px;
  font-size: 15px;
  color: #d1d5db !important;
  text-align: justify;
}

.legal-body strong {
  color: #fff !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(34, 197, 94, 0.5);
}

.legal-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
}

.legal-dl dt {
  padding: 24px 0 10px;
  font-weight: 700;
  color: #4ade80 !important;
  font-size: 13px;
}

.legal-dl dd {
  padding: 24px 0;
  color: #e4e4e7 !important;
  font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
}

/* --- 4-4. Onboarding Modal --- */

.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 16px
    max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at top left, #0c1a14 0%, #000000 70%);
  font-family: sans-serif;
  color: #fff;
}

/* カード本体 */
.onboard-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: auto;
  background: rgba(20, 20, 24, 0.85);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);

  display: flex;
  flex-direction: column;

  /* デフォルト値（JSでcompact-modeが付与されるまでの保険） */
  padding: 32px;
  gap: 24px;
}

.onboard-card.compact-mode {
  padding: 26px 28px;
  gap: 18px;
  max-width: 400px;
}

/* ヘッダーエリア */
.onboard-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* ▼ Compact Mode: 縦積み維持しつつ、余白を詰める ▼ */
.onboard-header.compact-header {
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}

/* ロゴ */
.onboard-logo {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ▼ Compact Mode: ロゴを少し小さくして圧迫感を消す ▼ */
.onboard-logo.compact-logo {
  width: 42px;
  height: 42px;
  margin-bottom: 0;
  border-radius: 10px;
}

/* タイトル */
.onboard-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 10px;
}

/* ▼ Compact Mode: タイトル調整 ▼ */
.compact-header .onboard-title {
  font-size: 22px;
  margin: 0;
  line-height: 1.35;
}

/* 説明文 */
.onboard-desc {
  display: none;
}

/* 警告ボックス */
.onboard-warning {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 16px;
  padding: 20px;
  margin-top: 4px;
}

/* ▼ Compact Mode: 警告ボックスの余白圧縮 ▼ */
.onboard-warning.compact-warning {
  padding: 14px 16px;
  border-radius: 12px;
}

.warning-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ef4444;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}

/* ▼ Compact Mode: 見出しマージン削減 ▼ */
.compact-warning .warning-head {
  margin-bottom: 8px;
  font-size: 14px;
}

.warning-list {
  margin: 0;
  padding-left: 20px;
  color: #e5e7eb;

  font-size: 14px;
  line-height: 1.7;

  /* 変な位置で折れやすい strict をやめる */
  line-break: normal;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}

/* ▼ Compact Mode: リスト行間圧縮 ▼ */
.compact-warning .warning-list {
  padding-left: 18px;
  line-height: 1.6;
}

.compact-warning .warning-list li + li {
  margin-top: 4px;
}

.warning-list b {
  color: #fca5a5;
  font-weight: 700;
  border-bottom: 1px solid rgba(252, 165, 165, 0.3);

  /* 強調語の途中で「ませ / ん」みたいに割れないようにする */
  white-space: nowrap;
}

/* リンクエリア */
.onboard-links {
  margin-top: 16px;
  font-size: 12px;
  color: #a1a1aa;
  text-align: center;
  line-height: 1.6;
}

/* ▼ Compact Mode: リンクエリアを警告ボックスに近づける ▼ */
.onboard-links.compact-links {
  margin-top: -4px;
  font-size: 11px;
}

.onboard-links a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.onboard-links a:hover {
  color: #00bfff;
}

/* チェックボックスエリア */
.onboard-checks {
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ▼ Compact Mode: チェックボックスエリア圧縮 ▼ */
.onboard-checks.compact-checks {
  padding: 6px;
  gap: 4px;
}

/* 1行（チェック＋文言） */
.custom-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;

  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
}

/* Compact時 */
.compact-checks .custom-check {
  padding: 6px 10px;
  gap: 8px;
}

.custom-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check-mark {
  width: 22px;
  height: 22px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.check-text {
  display: block;
  flex: 1;
  font-size: 12.5px;
  line-height: 1.45;
  color: #d4d4d8;

  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: normal;
  text-wrap: pretty;
}

/* ▼ Compact Mode: テキストサイズ調整 ▼ */
.compact-checks .check-text {
  font-size: 12px;
  line-height: 1.4;
}

.check-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.2s;
}

/* Compact時の微調整（少しだけ） */
.compact-checks .check-mark::after {
  left: 6px;
  top: 2px;
}

.custom-check input:checked ~ .check-mark {
  background-color: #22c55e;
  border-color: #22c55e;
}

.custom-check input:checked ~ .check-mark::after {
  transform: rotate(45deg) scale(1);
}

.onboard-checks .nowrap {
  white-space: nowrap;
}

/* ボタン周り */
.onboard-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

/* ▼ Compact Mode: ボタン上の余白削除 ▼ */
.onboard-card.compact-mode .onboard-actions {
  margin-top: 4px;
  gap: 8px;
}

#btn-agree {
  width: 92%;
  max-width: 380px;
  height: 52px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ▼ Compact Mode: 同意ボタンを少し細く ▼ */
.compact-mode #btn-agree {
  height: 44px;
  font-size: 15px;
}

#btn-agree:disabled {
  background: #3f3f46;
  color: #71717a;
  box-shadow: none;
  cursor: not-allowed;
}

#btn-agree:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

#btn-disagree {
  color: #a1a1aa;
  font-size: 12px;
  background: transparent;
  border: none;
  padding: 10px;
  text-decoration: none;
  cursor: pointer;
  width: auto;
  transition: color 0.2s ease;
}

#btn-disagree:hover {
  color: #e4e4e7;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* === Desktop: 初回同意モーダルが"デカく見える"ので、PC側は少し引き締める === */
@media (min-width: 900px) {
  /* カード幅を「広げすぎない」 */
  .onboard-card {
    max-width: 440px;
  }

  .onboard-card.compact-mode {
    max-width: 440px;
    padding: 30px 32px;
  }

  /* タイトルは少しだけ上げる（上げすぎない） */
  .onboard-title,
  .compact-header .onboard-title {
    font-size: 23px;
    line-height: 1.35;
  }

  /* 警告本文は据え置き */
  .warning-list {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* かなり横に広い画面では、少し余裕を持たせる */
@media (min-width: 960px) {
  .onboard-overlay {
    padding: 24px;
  }

  .onboard-card {
    max-height: min(680px, 90vh);
  }

  .onboard-card.compact-mode {
    max-width: 440px;
    padding: 32px 36px;
    gap: 18px;
    border-radius: 24px;
  }

  .onboard-header.compact-header {
    gap: 10px;
    margin-bottom: 4px;
  }

  .onboard-logo.compact-logo {
    width: 46px;
    height: 46px;
  }

  .onboard-title {
    font-size: 24px;
  }

  .onboard-warning {
    padding: 18px 20px;
    border-radius: 16px;
  }

  .warning-head {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .warning-list {
    font-size: 14px;
    line-height: 1.65;
    padding-left: 20px;
  }

  .onboard-links.compact-links {
    font-size: 11px;
    margin-top: 2px;
  }

  .onboard-checks.compact-checks {
    padding: 8px;
    gap: 6px;
    border-radius: 12px;
  }

  .compact-checks .custom-check {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .compact-checks .check-mark {
    width: 20px;
    height: 20px;
    border-radius: 6px;
  }

  .compact-checks .check-text {
    font-size: 13px;
    line-height: 1.45;
  }

  .onboard-card.compact-mode .onboard-actions {
    margin-top: 8px;
    gap: 8px;
    width: 100%;
  }

  .onboard-card.compact-mode #btn-agree {
    width: 100%;
    max-width: none;
    height: 48px;
    font-size: 16px;
  }

  .onboard-card.compact-mode #btn-disagree {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* === [Smart Responsive] 縦幅が狭い画面（ノートPC等）への対応 === */
/* ▼▼▼ 高さ760px以下なら自動で「キツキツモード」に戻す ▼▼▼ */
@media (max-height: 760px) {
  .onboard-card.compact-mode {
    padding: 20px 24px;
    gap: 16px;
  }

  .compact-logo {
    width: 32px;
    height: 32px;
  }

  .onboard-title {
    font-size: 18px;
  }

  .compact-warning {
    padding: 12px 16px;
  }

  .onboard-checks {
    gap: 8px;
  }

  /* チェックボックス間隔も詰める */
  #btn-agree {
    height: 44px;
  }
}

@media (max-width: 430px) {
  .onboard-card.compact-mode {
    padding: 20px 22px;
    gap: 16px;
  }

  .onboard-links.compact-links {
    margin-top: -6px;
  }

  .onboard-checks {
    gap: 6px;
  }
}

/* --- 4-5a. History Segmented Control (Tab Switcher) ---
   目的: 履歴画面の「処理中 | 達成済み | 徴収履歴」を切り替えるタブUI。
   構造: .segment-control (親) > .segment-btn (子)
*/
.segment-control {
  display: flex;
  background: var(--color-surface-soft);
  /* #e5e7eb 相当 */
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.segment-btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* アクティブ時のテキスト色のみ */
.segment-btn.active {
  color: var(--color-text-main);
}

/* スライドインジケーター */
.segment-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-lift-1);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* Dark mode adjustments */
body[data-theme="dark"] .segment-control {
  background: #2b2d31;
}

body[data-theme="dark"] .segment-btn.active {
  color: #ffffff;
}

body[data-theme="dark"] .segment-indicator {
  background: #404249;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- 4-5b. History View: Charges list (scoped; no !important) --- */
.history-charges-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

/* 1件分：タスクの .item.card と整合 */
.history-charges-list .item.card {
  padding: 10px 18px;
}

/* 本文の行レイアウト（タスクの .task-title-row と同等） */
.history-charges-list .item-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
}

/* 左：タイトル */
.history-charges-list .title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-main);
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 中央：日付・金額 */
.history-charges-list .meta {
  margin-left: 11px;
}

.history-charges-date {
  color: var(--color-text-muted, var(--muted));
  white-space: nowrap;
}

.history-charges-amount {
  color: #ed4245;
  font-weight: 600;
  white-space: nowrap;
}

/* 右端：バッジ包み（右寄せ） */
.history-charges-list .badge-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 右端の小アイコンボタンの体裁（詰めて並べる） */
.history-charges-list
  .badge-wrap
  :is(.btn-ghost, .btn-icon-ghost, .btn-icon-soft) {
  margin-left: 6px;
  padding: 6px;
  border-radius: 10px;
}

#view-history .stats-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

#view-history .stats-panel .stat {
  padding: 8px 2px;
}

/* 主役カード（2番目） */
/* 統計パネル（緑）の質感アップ：グラデーション調整 */
#view-history .stats-panel .stat:nth-child(2) {
  /* 少し濃いめからフェードアウトするグラデーション */
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.15) 0%,
    rgba(34, 197, 94, 0.02) 100%
  );
  border-color: rgba(34, 197, 94, 0.35);
  grid-column: 1 / -1;
  order: -1;
  min-height: 120px;
}

body[data-theme="dark"] #view-history .stats-panel .stat:nth-child(2) {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.25),
    rgba(34, 197, 94, 0.05)
  );
  border-color: rgba(34, 197, 94, 0.5);
}

#view-history .stats-panel .stat:nth-child(2) .value {
  font-size: 38px;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1.1;
  margin-top: 4px;
  letter-spacing: -0.02em;
}

/* 脇役カード（その他3つ） */
#view-history .stats-panel .stat:not(:nth-child(2)) {
  min-height: 72px;
  background: var(--color-surface);
}

body[data-theme="dark"] #view-history .stats-panel .stat:not(:nth-child(2)) {
  background: var(--color-surface-soft);
}

#view-history .stats-panel .stat:not(:nth-child(2)) .value {
  font-size: 18px;
  font-weight: 700;
}

#view-history .stats-panel .stat:not(:nth-child(2)) .label {
  font-size: 10px;
  white-space: nowrap;
  opacity: 0.7;
  transform: scale(0.95);
}

/* moved to section 6: Mobile Overrides */

/* =================================================================
   5. 【Utilities & PC Extras】 Transitions, Sidebar Mini, etc.
   ================================================================= */

/* === [PATCH-UX-23] Interaction: prevent accidental text selection (safe) === */
/* 目的: ボタン/タブ等でのテキスト選択や長押しメニューを抑止して操作ミスを減らす。 */
:where(
    .nav-item,
    .mini-nav-item,
    .btn-primary,
    .btn-ghost,
    .btn-outline,
    .btn-icon-soft,
    .btn-icon-ghost,
    .fab,
    .fab-add,
    .setting-pill,
    .check-btn,
    .b-nav-item
  ) {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- 5-1. Global Transitions (Performance optimized) --- */

/* ===== テーマ切替：フェード対象 ===== */

/* [FIX-v2] iOS Safari の継承遅延対策
   - body/親コンテナからは color transition を外す（継承による遅延を防ぐ）
   - テキスト要素には個別に color + transition を直接指定する（後述） */
body.enable-transitions {
  transition: background-color 0.25s ease;
}

body.enable-transitions :is(

  /* レイアウト骨格 */
  .layout,
  .app-header,
  .sidebar,
  .main,
  .main-inner,
  .global-header,
  #global-title,
  #global-desc,
  .view,

      /* モバイル：大きい面（ここが即時切替だと文字だけ遅く見える） */
    #mobile-app-header,
    #mobile-menu-backdrop,
    .bottom-nav,
    .b-nav-item,
    .b-nav-item svg,
    #fab-add,
    .mobile-logo,
    .mobile-logo svg,

  /* よく変わる面 */
  .card,
  .list,
  .stat,
  .cal-cell,

  /* 主要ボタン */
  .btn-primary,
  .btn-ghost,

  /* 設定UI */
  #view-settings,
  #view-settings h2,
  #view-settings h3,
  #view-settings .account-avatar,
  #view-settings #acc-avatar-img,
  #view-settings #acc-name,
  #view-settings #acc-mail,
  #view-settings .row > .grow,
  #view-settings .row .grow,
  #view-settings .muted,
  #view-settings .muted.small,
  .setting-pill,
  .setting-pill-group,

  /* サイドバー：ユーザーカード */
  .sb-user-card,
  .sb-user-card .sb-name,
  .sb-user-card .sb-mail,
  .sb-user-card .sb-avatar,
  .sb-user-card .sb-avatar-fallback,
  .sb-user-card .sb-logout-icon-btn,

  /* 設定：フッター */
  .app-footer-info,
  .legal-links-row,
  .legal-link,
  .sep,
  .app-version,

  /* モバイル下部ナビ（「設定」などの文字） */
  .bottom-nav,
  .b-nav-item,
  .b-nav-label,

  /* ダイアログ系 */
  dialog,
  .light-dialog,
  .light-form,
  .day-dialog,

  /* Settings：行ラベル（週の開始 / コンパクト表示 / テーマ） */
    .card.setting-card .row .grow,
    
    /* Sidebar：テーマ行（表示がある場合） */
    .sb-theme-row,

    /* Mobile bottom nav：ラベル */
    .b-nav-label

  /* サイドバー：ロゴ/区切り線 */
  .brand-btn,
  .sidebar-foot
) {
  /* [FIX-v2] 親コンテナからは color を外す（継承遅延防止） */
  transition: background-color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, fill 0.25s linear, stroke 0.25s linear;
}

/* [NOTE] 旧PATCH-IOS-THEME-01/02は削除
   - 新しいアプローチ（末尾のFIX-v2）で直接colorを指定するため不要
   - theme-switchingクラスによる transition: none は新アプローチと競合するため削除 */

/* No FOUC */
.preload * {
  transition: none !important;
  animation: none !important;
}

/* reduce-motion: 全体のモーション抑制（任意） */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }

  /* login overlay の擬似要素アニメ停止（* では pseudo-element は止まらないため） */
  #login-overlay::before {
    animation: none !important;
  }

  /* [A11Y-MOTION-01] hover起因の微小モーションを無効化（UI不変/環境依存） */
  :is(
      .nav-item,
      .mini-nav-item,
      .btn-primary,
      .btn-ghost,
      .btn-outline,
      .btn-icon-soft,
      .btn-icon-ghost,
      .fab,
      .fab-add,
      .top-icon-btn,
      .top-account-btn,
      .cal-cell,
      .stat,
      .pill,
      .check-btn
    ):hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* カード/カレンダーのリフトも停止 */
  .list .item.card:hover,
  .list .item.card:focus-within,
  #view-calendar .cal-cell:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* ダイアログの入場アニメーション停止 */
  .light-dialog[open] .light-form,
  .light-dialog[open] .day-dialog {
    animation: none !important;
  }

  /* 低モーション設定ではトランジション/スライドを無効化（A11y配慮） */
  .bottom-nav {
    transition: none;
  }

  .bottom-nav .b-nav-item {
    transition: none;
  }

  body.scroll-down .bottom-nav,
  body.scroll-up .bottom-nav {
    transform: none;
  }
}

.preload .boot-spinner {
  animation: boot-spin 0.8s linear infinite !important;
}

/* --- 5-2. Compact Mode Styles --- */
body.compact .list {
  gap: 6px;
}

body.compact .list .item.card {
  padding: 10px 12px;
  column-gap: 12px;
}

body.compact .item-body {
  row-gap: 2px;
}

body.compact .title {
  font-size: 14px;
}

body.compact .meta {
  font-size: 11px;
}

/* Mini Brand Button */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 16px;
}

/* ボタン（クリック領域）：アイコンはそのまま、余白だけ少し縮める */
.brand-btn {
  width: auto;
  height: 48px;
  padding: 8px 12px;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.12s ease;
}

/* ホバー時の挙動 */
.brand-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.02);
}

body[data-theme="dark"] .brand-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.brand-img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* 区切り線：今回は完全に非表示にする */
.brand-sep {
  display: none;
  height: 0;
  margin: 0;
  border: none;
  background: transparent;
}

/* 【重要】サイドバーを閉じた時（Collapsed）の崩れ防止 */
/* 閉じたときは幅が狭いので、元の小さいサイズに戻す */
body.sidebar-collapsed .brand-btn {
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 12px;
}

body.sidebar-collapsed .brand-img {
  height: 28px;
  width: auto;
}

body.sidebar-collapsed .brand-sep {
  display: none;
}

body[data-theme="dark"] .brand-sep {
  background: rgba(255, 255, 255, 0.08);
}

/* --- 5-4. Sidebar Footer (Dark mode toggle & User) --- */
.sidebar-foot {
  margin-top: auto;
  padding: 10px 8px 8px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-theme-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  width: 100%;
  padding: 0 12px;
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 13px;
}

.theme-switch-wrapper {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

/* [PATCH-A11Y-TS-01] タッチ環境: 当たり判定を+6px拡張（視覚変化なし） */
@media (pointer: coarse) {
  .theme-switch-wrapper::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
  }
}

.theme-switch-wrapper input {
  display: none;
}

.theme-switch-track {
  position: absolute;
  inset: 0;
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, background-color 0.25s ease,
    box-shadow 0.25s ease;
  z-index: 2;
}

.theme-switch-wrapper input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(24px);
  background-color: #3b82f6;
}

/* KB操作時のみアウトラインを可視化（通常は見た目不変） */
.theme-switch-wrapper:focus-visible .theme-switch-track,
.theme-switch-wrapper:has(input:focus-visible) .theme-switch-track {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 999px;
}

/* User Card */
.sb-user-card {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 8px 8px 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

body[data-theme="dark"] .sb-user-card {
  background: var(--color-surface-soft);
  border-color: var(--color-border-subtle);
}

.sb-user-info-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.sb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sb-avatar-fallback {
  font-size: 16px;
  font-weight: 700;
  color: #0ea5e9;
}

body[data-theme="dark"] .sb-avatar {
  background: var(--color-surface-soft);
  border-color: var(--color-border-subtle);
}

body[data-theme="dark"] .sb-avatar-fallback {
  color: var(--color-text-main);
}

.sb-user-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.sb-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-mail {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-logout-icon-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.sb-logout-icon-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Dark: Logout hover tone */
body[data-theme="dark"] .sb-logout-icon-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* ============================================================
   ========== Login Overlay (Split Screen / Dark Solid) ==========
   ============================================================ */

/* --- Overlay root -------------------------------------------------- */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: #000000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  font-family: "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  -webkit-overflow-scrolling: touch;
}

#login-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.login-card {
  display: flex !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Split Layout -------------------------------------------------- */
/* 左側：ビジュアルエリア (Deep Void) */
.login-visual-side {
  flex: 1.6;
  position: relative;
  background: #000000;
  /* 左側：完全な黒 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 右側：アクションエリア (Surface) */
.login-action-side {
  flex: 1;

  /* --- ★変更: 背景色とドットグリッド --- */
  background-color: #141416;
  /* 1pxの小さなドットを敷く */
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.12) 1px,
    transparent 1px
  );
  /* ドットの間隔 */
  background-size: 24px 24px;

  /* --- ★追加: 中央だけ見せて周りをボカすマスク --- */
  /* これにより、ドットが画面全体ではなく中央のコンテンツ周りだけ浮かび上がります */
  mask-image: radial-gradient(circle at center, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 30%,
    transparent 100%
  );

  /* 既存のプロパティ */
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.8);

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 60px;
  position: relative;
  z-index: 10;
}

/* --- Visual Area (Left) Styling ------------------------------------ */

/* 背景のグロー効果（ぼんやり光る緑） */
.visual-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.15) 0%,
    transparent 60%
  );
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

/* アプリ画面のモックアップコンテナ */
/* --- 修正版: シンプルかつ堅牢なスタイルに戻す --- */

/* アプリ画面のモックアップコンテナ */
.mock-app-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  /* 3D変形の設定 */
  transform: perspective(1000px) rotateY(-12deg) rotateX(4deg) scale(0.9)
    translateX(-40px);
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;

  /* 影と背景 */
  box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #1e1f22;

  /* 数字が枠外に飛び出せるようにする */
  overflow: visible;

  opacity: 0;
  animation: mockFloatIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;
}

/* 統計カード（金額部分） */
.mock-stat-card {
  /* 背景：緑のグラデーション */
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.15) 0%,
    rgba(34, 197, 94, 0.02) 100%
  );
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  margin-bottom: 0;

  /* レイアウト固定 */
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;

  /* インタラクション設定 */
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;

  /* ★重要: 子要素（文字など）の判定を消して、親の判定を優先させる */
  /* これで「文字の上だと反応しない」を防ぎます */
  pointer-events: auto;
}

/* 中身の文字は判定を消す（念押し） */
.mock-stat-card * {
  pointer-events: none !important;
}

/* ホバー時の見た目（JSでクラス制御するためCSSホバーは補助的） */
.mock-stat-card.is-hovered,
.mock-stat-card:hover {
  border-color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.15);
}

/* フォントスタイル（変更なし） */
.mock-stat-label {
  font-size: 11px;
  color: #949ba4;
  margin-bottom: 4px;
}

.mock-stat-value {
  font-size: 32px;
  font-weight: 900;
  color: #22c55e;
  line-height: 1.1;

  /* 数字のガタつき防止（後段の重複を統合） */
  font-variant-numeric: tabular-nums;
  transition: color 0.2s, text-shadow 0.2s;
}

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

/* モックアップ内のタスクカード */
.mock-item {
  display: flex;
  align-items: center;
  background: #2b2d31;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 16px;
  gap: 12px;
}

.mock-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #585b62;
  flex-shrink: 0;
}

.mock-item.done .mock-check {
  background: #22c55e;
  border-color: #22c55e;
  position: relative;
}

.mock-item.done .mock-check::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.mock-content {
  flex: 1;
  min-width: 0;
}

.mock-title {
  font-size: 14px;
  font-weight: 600;
  color: #dcddde;
  margin-bottom: 2px;
}

.mock-meta {
  font-size: 11px;
  color: #949ba4;
}

.mock-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 600;
  white-space: nowrap;
}

.mock-item.done .mock-title {
  text-decoration: line-through;
  opacity: 0.6;
}

.badge-active {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.badge-done {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

/* --- Action Area (Right) Styling ----------------------------------- */

.login-content-wrap {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
}

.login-brand {
  margin-bottom: 24px;
}

.login-brand img {
  height: 48px;
  width: auto;
}

.login-heading h1 {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.login-heading p {
  font-size: 15px;
  color: #a1a1aa;
  line-height: 1.6;
  margin: 0;
}

.login-actions {
  margin-top: 48px;
}

.login-google-btn-solid {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  color: #171717;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
}

.login-google-btn-solid:hover {
  background: #f5f5f5;
  transform: translateY(-1px);
}

.login-google-btn-solid:active {
  transform: translateY(0);
}

.login-footer-text {
  margin-top: 24px;
  font-size: 12px;
  color: #52525b;
  text-align: center;
}

/* --- Live Counter Effects --- */

/* 限界突破時のスタイル：枠を無視して巨大化・浮遊 */
.mock-stat-value.limit-break {
  position: absolute;
  left: 50%;
  top: 50%;
  /* JS側で scale() を動的に変えるので、CSSでは基準位置だけ指定 */
  transform: translate(-50%, -50%) scale(1);

  /* 文字列が長くなっても折り返さない */
  white-space: nowrap;

  /* 最前面に表示 */
  z-index: 9999;

  /* 少し透けさせて背景と馴染ませる */
  opacity: 0.9;

  /* ベースのフォントサイズ */
  font-size: 40px !important;

  /* アニメーションを滑らかにする設定 */
  will-change: transform, content;
  pointer-events: none;
}

/* =========================================
   Spotlight & 3D Tilt Effects (強化版)
   ========================================= */

/* 光の描画レイヤー */
#login-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;

  /* ★変更: 光を強くしました (0.08 -> 0.15) */
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.15),
    transparent 40%
  );

  mix-blend-mode: screen;
  /* スクリーンモードは黒背景でも光ります */
  transition: opacity 0.3s;
}

/* =========================================
   3. Noise Texture (Grit) (修正版)
   ========================================= */

#login-overlay::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: normal;

  animation: grain 0.5s steps(5) infinite;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-5%, -10%);
  }

  20% {
    transform: translate(-15%, 5%);
  }

  30% {
    transform: translate(7%, -25%);
  }

  40% {
    transform: translate(-5%, 25%);
  }

  50% {
    transform: translate(-15%, 10%);
  }

  60% {
    transform: translate(15%, 0%);
  }

  70% {
    transform: translate(0%, 15%);
  }

  80% {
    transform: translate(3%, 35%);
  }

  90% {
    transform: translate(-10%, 10%);
  }
}

/* =================================================================
   6. Mobile Overrides & Patches (≤900px baseline)
   目的: PC基準スタイルを壊さず、スマホ幅での上書きだけを集約する。
   構成:
   M1. Global & Layout
   M2. Header & Mobile App Header
   M3. Sidebar / Main / FAB / Bottom Nav
   M4. Views (global-header, list, settings, stats…)
   M5. Calendar (main view / dialog)
   M6. History
   M7. Legal / Onboarding / Others
   M8. Global Patches & Boot/Theme
================================================================= */

/* ========== [M1] Global & Layout (≤900px) ========== */

/* [PATCH-UX-26] Mobile: prevent iOS input zoom (safe) */
@media (max-width: 480px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* === [PATCH-UX-17] Narrow phones: main padding tighten (safe) === */
@media (max-width: 420px) {
  .main {
    padding: 20px 16px;
    /* 24px 40px → 20px 16px（モバイルのみ） */
  }

  .main-inner {
    padding-bottom: 40px;
  }

  /* 既定を維持しつつ余白の過不足を抑制 */
}

/* Mobile: アプリっぽく、上下バー固定＋中央だけスクロールにする */
@media (max-width: 900px) {
  /* ビューポート全体のスクロールを止める（ヘッダーを固定するため） */
  body {
    height: 100%;
    overflow: hidden;
    font-family: "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* [LEGAL FIX] legalページは単体HTMLで .main のスクロール領域が無いので、全体スクロールを許可 */
  html.legal-page,
  body.legal-page {
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .layout {
    /* モバイルでは header / bottom-nav の間だけをレイアウト領域にする */
    position: fixed;
    inset: calc(52px + env(safe-area-inset-top)) 0
      calc(56px + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  /* dvh 対応ブラウザでも top/bottom で管理（高さはブラウザに任せる） */
  @supports (height: 100dvh) {
    .layout {
      top: calc(52px + env(safe-area-inset-top));
      bottom: calc(56px + env(safe-area-inset-bottom));
    }
  }

  .main {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    margin-left: 0;

    /* nav 56px + 余白 + safe-area をまとめて確保（末尾上書きを統合） */
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* 下端がボトムナビの裏に隠れないように余白を増やす（全ビュー共通） */
  .main-inner {
    padding-bottom: 132px;
  }

  /* 内容が縦に長くなりやすいビューは少しだけ自前の下パディングも追加 */
  #view-today,
  #view-calendar,
  #view-history,
  #view-settings {
    padding-bottom: 16px;
  }
}

/* タップ遅延の抑制（既に付与済みの箇所もあるが網羅的に） */
:where(button, [role="button"], a.btn-primary, .nav-item, .b-nav-item) {
  touch-action: manipulation;
}

/* ========== [M2] Header & Mobile App Header (≤900px) ========== */

@media (max-width: 480px) {
  .top-account-name {
    max-width: 110px;
  }
}

@media (min-width: 901px) {
  #mobile-app-header,
  .bottom-nav,
  #mobile-menu-backdrop {
    display: none !important;
  }
}

@media (max-width: 900px) {
  #mobile-app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: calc(env(safe-area-inset-top)) 12px 0;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  #mobile-app-header .mobile-app-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.02em;
  }

  #mobile-app-header .m-top-btn {
    border: none;
    background: var(--color-surface-soft);
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #mobile-app-header .m-top-btn:focus-visible {
    outline: var(--focus-ring-contrast);
    outline-offset: 2px;
    border-radius: 999px;
  }
}

/* ========== [M3] Sidebar / Main / FAB / Bottom Nav ========== */

@media (max-width: 900px) {
  /* BottomNavを持つページだけ、最後の要素が少し上に来る程度の余白を付ける */
  body:has(.bottom-nav) .main {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* :has 非対応ブラウザ向けフォールバック */
  body:not(:has(.bottom-nav)) .main {
    padding-bottom: 40px;
  }

  /* === Bottom Nav 本体 ===================================== */
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bottomnav);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    height: calc(56px + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-subtle);
    backdrop-filter: saturate(140%) blur(8px);
  }

  .bottom-nav .b-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: var(--color-text-muted);
    border-radius: 12px;
    padding: 6px 8px;
    text-decoration: none;
  }

  /* アクティブ状態 */
  .bottom-nav .b-nav-item.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-weight: 600;
  }

  .bottom-nav .b-nav-item svg {
    opacity: 0.7;
    transition: opacity 0.16s ease, stroke-width 0.16s ease;
  }

  .bottom-nav .b-nav-item.is-active svg {
    opacity: 1;
    stroke-width: 2.5px;
  }

  /* キーボード操作時のみ枠線を表示 */
  .bottom-nav .b-nav-item:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -1px;
    border-radius: 8px;
  }

  .bottom-nav .b-nav-item:active {
    transform: translateY(1px);
  }

  /* FABの位置調整（BottomNav と被らないように） */
  .fab {
    display: inline-flex;
    bottom: calc(24px + 56px + env(safe-area-inset-bottom));
  }

  /* === [PATCH-MOB-35] BottomNav: scroll-aware show/hide (UI不変/JS連動) === */
  body.scroll-down .bottom-nav,
  body.scrolling-down .bottom-nav {
    transform: translateY(100%);
  }

  body.scroll-up .bottom-nav,
  body.scrolling-up .bottom-nav {
    transform: translateY(0);
  }

  /* ログインオーバーレイ表示中は被りを防ぐため BottomNav を引っ込める */
  body:has(#login-overlay.open) .bottom-nav {
    transform: translateY(100%);
  }
}

@media (max-width: 900px) {
  .b-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    border-radius: 12px;
    padding: 6px 8px;
    text-decoration: none;
    /* 予防的に追加しておく */
  }

  .b-nav-item.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-weight: 600;
  }

  @media (pointer: coarse) {
    .b-nav-item {
      position: relative;
    }

    .b-nav-item::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 14px;
    }
  }
}

/* === [PATCH-UX-09] Mobile: PCサイドバーを完全に隠す（≤900px） ============ */
@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

/* === [HOTFIX-FAB-01] Mobile: ensure FAB visible only when bottom-nav exists === */
/* 目的: .hidden {display:none !important;} を後勝ちで打ち消して、FABを確実に表示。
   範囲: ≤900px かつ .bottom-nav がある画面のみ（ログイン等では無効） */
@media (max-width: 900px) {
  body:has(.bottom-nav) .fab {
    display: flex !important;
  }
}

/* === [PATCH-UX-11] タッチ環境のヒット領域を微拡張（操作性↑／見た目差分なし） === */
@media (pointer: coarse) {
  .nav-item {
    padding-block: 12px;
  }

  /* 既存 +2px 程度の体感 */
  .bottom-nav .b-nav-item {
    height: 60px;
  }
}

/* ========== [M4] Views / Forms / Settings / Stats ========== */

@media (max-width: 900px) {
  /* PC版のタイトル（二番目のタイトル）をモバイルでは隠す */
  .global-header {
    display: none !important;
  }

  /* 以下はそのまま残す */
  .global-header-left h1 {
    font-size: 20px;
  }

  .global-header-left p {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .btn-row {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
}

@media (max-width: 360px) {
  .btn-row {
    gap: 6px 10px;
  }
}

@media (max-width: 720px) {
  /* --- 履歴パネル: 上段ヒーロー + 下段3列 --- */
  #view-history .stats-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* 1. 上段: 回避額（累計） [JS生成順序: 2番目] */
  #view-history .stats-panel .stat:nth-child(2) {
    order: 1;
    grid-column: 1 / -1;
    min-height: 90px;
    /* 高さを少し抑える (PCは120px) */
    margin-bottom: 4px;
    background: linear-gradient(
      135deg,
      rgba(34, 197, 94, 0.15) 0%,
      rgba(34, 197, 94, 0.02) 100%
    );
    border-color: rgba(34, 197, 94, 0.35);
  }

  /* 値のサイズ調整 */
  #view-history .stats-panel .stat:nth-child(2) .value {
    font-size: 32px;
  }

  /* 2. 下段左: 回避額（今月） [JS生成順序: 4番目] */
  #view-history .stats-panel .stat:nth-child(4) {
    order: 2;
  }

  /* 3. 下段中: 達成数 [JS生成順序: 1番目] */
  #view-history .stats-panel .stat:nth-child(1) {
    order: 3;
  }

  /* 4. 下段右: コンボ [JS生成順序: 3番目] */
  #view-history .stats-panel .stat:nth-child(3) {
    order: 4;
  }

  /* 下段（小さいカード）共通スタイル */
  #view-history .stats-panel .stat:not(:nth-child(2)) {
    min-height: 80px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #view-history .stats-panel .stat:not(:nth-child(2)) .value {
    font-size: 18px;
    margin-top: 2px;
  }

  #view-history .stats-panel .stat:not(:nth-child(2)) .label {
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
    /* 狭いので折り返しを許可 */
  }
}

@media (max-width: 480px) {
  .view-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  #view-today .view-head {
    align-items: center;
  }

  /* 右端の「＋ すぐ追加」を折返し時も右へ寄せる */
  #view-today #btn-quick-add-today {
    margin-left: auto;
  }
}

/* === [PATCH-UX-14] Small-width overflow guards (safe) === */
@media (max-width: 360px) {
  .task-title-row .title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* === [PATCH-UX-18] Task row: resilient wrapping guards (safe) === */
@media (max-width: 380px) {
  .task-title-row {
    gap: 6px;
    padding: 4px 10px 4px 6px;
  }

  .task-title-row .badge-wrap {
    gap: 4px;
    font-size: 10px;
  }

  .task-title-row .meta {
    margin-left: 8px;
  }
}

/* [M4c] Add/Edit dialog: mobile viewport-safe height (≤900px) */
@media (max-width: 900px) {
  /* dialog = 画面全体の“中央寄せコンテナ”（UAに頼らず強制センター） */
  .light-dialog[open] {
    position: fixed;
    inset: 0;
    /* top/right/bottom/left を明示 */
    margin: 0;
    padding: 12px;
    box-sizing: border-box;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100vh;
    height: 100svh;
    /* Chromeエミュでも上下センターさせる鍵 */
    max-height: 100dvh;
    max-height: 100svh;

    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    overscroll-behavior: contain;
  }

  /* 中身（箱）側でサイズとスクロールを持つ */
  .light-dialog[open] .light-form,
  .light-dialog[open] .day-dialog {
    width: min(480px, 100%);
    max-height: calc(100vh - 24px);
    /* fallback */
    max-height: calc(100svh - 24px);
    /* iOS Safariの“開いた直後”を安定させる */
    /* dialog padding(12*2) を引く */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ui-confirm だけ id 指定が強いので、モバイルは確実に 100% に戻す */
  #dlg-ui-confirm .light-form {
    width: 100%;
    max-width: 100%;
  }

  /* フォーム側も「1画面寄せ」に軽く詰める */
  .light-dialog[open] .light-form {
    padding: 18px 16px 14px;
    gap: 14px;
  }

  /* day-dialog も同じノリで詰める（空日の時に1画面で収める） */
  .light-dialog[open] .day-dialog {
    padding: 18px 16px 14px;
  }

  /* ボタン行の線・影を完全に消す */
  .light-dialog[open] .light-form > menu {
    border-top: none;
    border: 0;
    box-shadow: none;

    /* ボタン横に出る帯(背景)を消す：menu自体を必要最小幅にする */
    background: transparent;
    width: fit-content;
    padding: 0;
    margin: 12px 0 0 auto;
  }

  /* ボタンが横にはみ出さないように */
  .light-dialog[open] .light-form > menu button {
    min-width: 0;
  }

  /* 中身は dialog 幅に追従（中身側の max-height は外す） */
  .light-dialog .light-form,
  .light-dialog .day-dialog {
    width: 100%;
    max-height: none;
  }
}

/* [PATCH-DIALOG-HEIGHT-01] Low-height desktop: dialog fits in viewport (safe) */
/* 低い高さのPC/小型ノート等で、ダイアログが画面外にはみ出すのを防ぐ */
@media (min-width: 481px) and (max-height: 760px) and (hover: hover) and (pointer: fine) {
  .light-dialog[open] {
    max-height: calc(100dvh - 24px);
    margin: auto;
  }

  /* 中身をスクロール可能にして、下のボタン行は見失いにくくする */
  .light-dialog[open] .light-form,
  .light-dialog[open] .day-dialog {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* 低い高さの時だけ：フォーム内の縦余白を詰める（スクロール抑止） */
  .light-dialog[open] .light-form {
    padding: 28px 32px 18px;
    gap: 16px;
  }

  /* ボタン行を下に残す（スクロールしても操作できる） */
  .light-dialog[open] .light-form > menu,
  .light-dialog[open] .day-dialog > menu {
    position: sticky;
    bottom: 0;

    /* “行全体の背景”を作らない（灰色帯の原因） */
    background: transparent;

    /* menu をボタン分の幅だけにして、右下に寄せる */
    width: fit-content;
    margin: 6px 0 0 auto;

    /* 既存の余白は最小限だけ維持 */
    padding-top: 6px;
  }
}

/* dvh 未対応の古い環境向けフォールバック */
@supports not (height: 100dvh) {
  @media (min-width: 481px) and (max-height: 760px) and (hover: hover) and (pointer: fine) {
    .light-dialog[open] {
      max-height: calc(100vh - 24px);
    }

    .light-dialog[open] .light-form,
    .light-dialog[open] .day-dialog {
      max-height: calc(100vh - 24px);
    }
  }
}

/* [PATCH-DLG-ADD-LANDSCAPE-01] iPhone横向きなど低い高さ：タスク追加ダイアログを圧縮して収める */
@media (orientation: landscape) and (max-height: 700px) and (hover: none) and (pointer: coarse) {
  /* 「タスク追加」だけを対象にする（他ダイアログへ影響させない） */
  #dlg-add.light-dialog[open] .light-form {
    padding: 18px 16px 14px;
    width: min(560px, calc(100vw - 24px));
    /* iOSのアドレスバー変動に強い */
    max-height: calc(100dvh - 24px);
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* フォーム全体がスクロール可能（カレンダーは潰さない） */
    display: block;
  }

  /* 見出し */
  #dlg-add .light-form > h3 {
    margin: 0 0 12px;
    font-size: 18px;
  }

  /* タイトル入力欄 */
  #dlg-add .light-form > .f-block {
    margin-bottom: 14px;
  }

  /* カレンダーフィールド：フル表示（潰さない） */
  #dlg-add .calendar-field {
    padding: 8px 4px;
    margin-bottom: 14px;
  }

  #dlg-add .dlg-cal-head {
    margin: 0 0 4px;
    height: 28px;
  }

  #dlg-add .dlg-cal-title {
    font-size: 13px;
    font-weight: 700;
  }

  #dlg-add .dlg-cal-head .icon {
    height: 28px;
    padding: 0 8px;
    font-size: 15px;
  }

  #dlg-add .dlg-dow {
    margin: 0 0 4px;
    font-size: 10px;
    opacity: 0.7;
  }

  #dlg-add .dlg-grid {
    gap: 2px;
  }

  #dlg-add .dcell {
    min-height: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 6px;
  }

  #dlg-add .time-row {
    margin-top: 6px;
    gap: 8px;
  }

  #dlg-add .time-row input[type="time"] {
    height: 34px;
    font-size: 14px;
    padding: 0 6px;
  }

  /* 金額フィールド */
  #dlg-add .light-form > .field {
    margin-bottom: 14px;
  }

  #dlg-add .light-form > menu {
    margin: 12px 0 0 auto;
  }

  /* iPhone横向きは [PATCH-DIALOG-HEIGHT-01] の sticky が当たって重なるので解除 */
  #dlg-add.light-dialog[open] .light-form > menu {
    position: static;
    bottom: auto;
  }
}

/* [M4d] Dialog compact fix for mobile (≤480px) v2 */
/* スマホ向け: ダイアログの徹底的な小型化と余白削減 */
@media (max-width: 480px) {
  /* 1. dialog = 画面全体の“中央寄せコンテナ” */
  .light-dialog[open] {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100svh;
    max-height: 100svh;

    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    overscroll-behavior: contain;
  }

  /* 2. 中身（箱）側でサイズとスクロール */
  .light-dialog[open] .light-form,
  .light-dialog[open] .day-dialog {
    width: min(360px, 100%);
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 2. フォーム内部: パディングと間隔を限界まで詰める */
  .light-form {
    padding: 16px 12px;
    gap: 8px;
    width: 100%;
  }

  /* 見出し: 控えめに */
  .light-form h3 {
    font-size: 16px;
    margin-bottom: 2px;
  }

  /* 個別フィールドの余白削除 */
  .light-form .field {
    margin-bottom: 0;
  }

  /* ラベル: 小さく、隙間なく */
  .field-label,
  .f-block span {
    font-size: 11px;
    margin-left: 2px;
    margin-bottom: 1px;
    display: block;
  }

  /* ラベルの注釈（金額範囲など）を小さく */
  .field-label .label-note {
    font-size: 10px;
  }

  /* 3. 入力欄: 高さ40px（指で押せる下限かつコンパクト） */
  .light-form .field input:not([type="checkbox"]):not([type="radio"]),
  .light-form .field select,
  .input-currency-wrap,
  #dlg-form-add input[name="title"],
  #dlg-form-edit input[name="title"] {
    height: 36px;
    font-size: 13px;
    border-radius: 8px;
    padding-left: 10px;
  }

  /* 通貨記号の位置調整 */
  .input-currency-wrap::before {
    font-size: 14px;
    left: 10px;
  }

  .input-currency-wrap input {
    padding-left: 24px !important;
  }

  /* 4. カレンダー: 縦幅を一番食うので強力に圧縮 */
  .calendar-field {
    padding: 6px 2px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid var(--color-border-subtle);
    background: rgba(127, 127, 127, 0.02);
  }

  /* カレンダー凡例（締切） */
  .calendar-field legend {
    font-size: 11px;
    padding: 0 4px;
    margin-bottom: 0;
  }

  /* 4. カレンダー: さらに圧縮 */
  .dlg-cal-head {
    margin: 0 0 2px;
    height: 24px;
  }

  .dlg-cal-title {
    font-size: 12px;
    font-weight: 700;
  }

  .dlg-cal-head .icon {
    padding: 0 8px;
    height: 24px;
    font-size: 14px;
  }

  .dlg-dow {
    margin: 0 0 2px;
    font-size: 8px;
    gap: 0;
    opacity: 0.7;
  }

  .dlg-grid {
    gap: 1px;
  }

  .dcell {
    min-height: 24px;
    height: 24px;
    font-size: 11px;
    border-radius: 4px;
  }

  .time-row {
    margin-top: 2px;
    gap: 6px;
  }

  .time-row input[type="time"] {
    height: 32px;
    font-size: 13px;
    padding: 0 4px;
  }

  /* iOS Safari: 初回ペイントで空白フラッシュすることがあるので contain / will-change は使わない */
  .calendar-field,
  .dlg-grid,
  .time-row {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .picked-summary {
    font-size: 9px;
  }

  .light-form menu button {
    height: 38px;
    font-size: 13px;
    font-weight: 700;
  }
}

/* [M4e] Dialog ultra-compact for short screens (≤480px & low height) */
/* NOTE: iOS Safari はダイアログ表示直後に viewport height が一瞬変動し、
   max-height 条件の media query が瞬間的に ON/OFF してレイアウトが跳ねることがある。
   → 「締切の下部」や「金額の下」に一瞬だけ空白が出て閉じる現象の原因になるため無効化。 */

/* === [PATCH-BADGE-CENTER] PC版: バッジの中心位置を固定 === */
#view-today .task-title-row .btn-row .badge-wrap,
#view-active .task-title-row .btn-row .badge-wrap,
#view-inprogress .task-title-row .btn-row .badge-wrap,
#view-week .task-title-row .btn-row .badge-wrap,
#dlg-day .task-title-row .btn-row .badge-wrap {
  flex: 0 0 auto;
  min-width: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === [PATCH-UX-30] Mobile Task Card: Final Fix === */
@media (max-width: 768px) {
  :is(
      #view-today,
      #view-active,
      #view-inprogress,
      #view-week,
      #view-history,
      #dlg-day
    )
    .list
    .item.card {
    min-height: auto;
    align-items: center;
  }

  :is(#view-today, #view-active, #view-inprogress, #view-week, #dlg-day)
    .list
    .item.card {
    padding: 8px 10px;
  }

  /* カード内部：左パディングを小さくしてチェックを端に寄せる */
  :is(#view-today, #view-active, #view-inprogress, #view-week, #dlg-day)
    .list
    .item.card
    .item-body {
    padding: 4px 10px 4px 4px;
    width: 100%;
  }

  /* [PATCH-UX-30 FIX] 今日/進行中/今週/期限あり：子の grid-area を成立させるため親を grid 化 */
:is(#view-today, #view-active, #view-inprogress, #view-week)
  .list
  .item.card
  .item-body {
  display: grid;
  /* 右カラム(actions)に“バッジ用の余白”を確保して、
     バッジが「金額」と「編集/ゴミ箱」の間でバランス良く見えるようにする */
  grid-template-columns: 28px 1fr minmax(104px, 140px);
  grid-template-areas:
    "check title actions"
    "check meta  actions";
  gap: 2px 8px;
  align-items: center;
}

  /* task-title-row を“箱”にせず、子要素を item-body のグリッドに参加させる */
  :is(#view-today, #view-active, #view-inprogress, #view-week) .task-title-row {
    display: contents;
  }

  /* 履歴 */
  #view-history .list .item.card .item-body {
    padding: 0;
    width: 100%;
  }

  /* --- Area: Check (左端) --- */
  #view-today .task-title-row .task-check-slot,
  #view-active .task-title-row .task-check-slot,
  #view-inprogress .task-title-row .task-check-slot,
  #view-week .task-title-row .task-check-slot,
  #dlg-day .task-title-row .task-check-slot {
    grid-area: check;
    align-self: center;
    margin: 0;
    padding: 0 0 0 2px;
    /* 左端ギリギリに */
    width: 28px;
    /* 幅を固定して位置を安定させる */
    display: flex;
    justify-content: center;
  }

  /* --- Area: Title (中央上) --- */
  #view-today .task-title-row .title,
  #view-active .task-title-row .title,
  #view-inprogress .task-title-row .title,
  #view-week .task-title-row .title,
  #dlg-day .task-title-row .title {
    grid-area: title;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- Area: Actions (右端) --- */
#view-today .task-title-row .btn-row,
#view-active .task-title-row .btn-row,
#view-inprogress .task-title-row .btn-row,
#view-week .task-title-row .btn-row,
#dlg-day .task-title-row .btn-row {
  grid-area: actions;
  place-self: center end;
  margin: 0;
  gap: 8px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
}

/* 残り時間ミニバッジ：右カラム内で中央寄せして、
   「金額」と「編集/ゴミ箱」の“中間”に常に見えるようにする */
#view-today .task-title-row .btn-row .badge-wrap,
#view-active .task-title-row .btn-row .badge-wrap,
#view-inprogress .task-title-row .btn-row .badge-wrap,
#view-week .task-title-row .btn-row .badge-wrap,
#dlg-day .task-title-row .btn-row .badge-wrap {
  flex: 0 0 auto;
  min-width: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* バッジ無しカードは余白を作らない */
#view-today .task-title-row .btn-row .badge-wrap:empty,
#view-active .task-title-row .btn-row .badge-wrap:empty,
#view-inprogress .task-title-row .btn-row .badge-wrap:empty,
#view-week .task-title-row .btn-row .badge-wrap:empty,
#dlg-day .task-title-row .btn-row .badge-wrap:empty {
  display: none;
}

  /* アイコンボタン調整 */
  #view-today .task-title-row .btn-row .btn-icon-ghost,
  #view-active .task-title-row .btn-row .btn-icon-ghost,
  #view-inprogress .task-title-row .btn-row .btn-icon-ghost,
  #view-week .task-title-row .btn-row .btn-icon-ghost,
  #dlg-day .task-title-row .btn-row .btn-icon-ghost {
    width: 32px;
    height: 32px;
    padding: 6px;
    color: var(--muted);
  }

  /* --- Area: Meta (中央下 - 日付と金額) --- */
  #view-today .task-title-row .meta,
  #view-active .task-title-row .meta,
  #view-inprogress .task-title-row .meta,
  #view-week .task-title-row .meta,
  #dlg-day .task-title-row .meta {
    grid-area: meta;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    /* 左寄せ */
    flex-wrap: nowrap;
    gap: 6px;
    /* 日付と金額の間隔 */
    margin: 0;
    /* PC版のmarginを消す */
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  /* 日付 */
  #view-today .task-title-row .task-meta-date,
  #view-active .task-title-row .task-meta-date,
  #view-inprogress .task-title-row .task-meta-date,
  #view-week .task-title-row .task-meta-date,
  #dlg-day .task-title-row .task-meta-date {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
    line-height: 1.2;
    flex: 0 1 auto; /* ← flex:1 を殺す */
    min-width: 0; /* ← 省略が必要な時だけ効く */
  }

  /* 金額 (赤字) */
  #view-today .task-title-row .task-meta-penalty,
  #view-active .task-title-row .task-meta-penalty,
  #view-inprogress .task-title-row .task-meta-penalty,
  #view-week .task-title-row .task-meta-penalty,
  #dlg-day .task-title-row .task-meta-penalty,
  #view-history .task-title-row .task-meta-penalty {
    margin: 0 !important;
    /* ★PC版の margin-left: auto を強制解除 */
    font-size: 12px;
    font-weight: 600;
    color: #ed4245;
  }

  /* 右側メタ（赤い金額 + 残り時間）を “右寄せ” で固定してカード形状を揃える */
  #view-today .task-title-row .task-meta-right,
  #view-active .task-title-row .task-meta-right,
  #view-inprogress .task-title-row .task-meta-right,
  #view-week .task-title-row .task-meta-right,
  #dlg-day .task-title-row .task-meta-right,
  #view-history .task-title-row .task-meta-right {
    margin-left: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }

  /* 残り時間：折り返しさせない（カード高さブレ防止） */
  #view-today .task-title-row .task-meta-remain,
  #view-active .task-title-row .task-meta-remain,
  #view-inprogress .task-title-row .task-meta-remain,
  #view-week .task-title-row .task-meta-remain,
  #dlg-day .task-title-row .task-meta-remain {
    font-size: 12px;
    font-weight: 600;
    color: var(--calendar-sat);
    white-space: nowrap;
  }

  /* 不要なバッジ非表示 */
  #view-today .badge-status-active,
  #view-active .badge-status-active,
  #view-week .badge-status-active {
    display: none !important;
  }

  /* チェック/右側アクションが “真ん中に浮く” 感を減らす */
  #dlg-day .task-title-row .task-check-slot,
  #dlg-day .task-title-row .btn-row {
    align-self: center;
    padding-top: 0;
  }

  /* day-dialog（#dlg-day）内のタスクカード：履歴カードの密度に寄せる */
  #dlg-day .list .item.card {
    min-height: auto;
    align-items: center;
    padding: 10px 12px;
  }

  /* 余白はカード側に寄せる（.item-body の縦パディングで太らせない） */
  #dlg-day .list .item.card .item-body {
    padding: 0;
    width: 100%;

    /* ここでレイアウトの基準を作る（titleRow と badge を同じグリッドに乗せる） */
    display: grid;
    grid-template:
      "check title actions" auto
      "check meta  actions" auto
      / 24px 1fr auto;
    gap: 4px 12px;
    align-items: center;
  }

  /* titleRow 自体は箱をやめて、中の要素を .item-body のグリッドに参加させる */
  #dlg-day .task-title-row {
    display: contents;
  }

  /* 左アイコン（チェック/鍵） */
  #dlg-day .task-check-slot {
    grid-area: check;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    padding: 0;
    margin: 0;
  }

  /* SVG のベースライン由来のズレを潰す */
  #dlg-day .task-check-slot .status-icon-svg {
    display: block;
  }

  /* 右バッジ */
  #dlg-day .task-title-row .btn-row {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  #dlg-day .task-title-row .btn-row .badge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
  }

  /* === [PATCH-UX-30a] Mobile: Calendar dialog + History meta align (date + amount) === */
  :is(#dlg-day, #view-history) .task-title-row .meta {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  /* 金額が右に飛ぶ原因（margin-left:auto 等）を潰す */
  :is(#dlg-day, #view-history) .task-title-row .task-meta-penalty {
    margin-left: 0 !important;
  }

  /* バッジと左アイコンの縦ズレを抑える */
  :is(#dlg-day, #view-history) .task-title-row {
    align-items: center;
  }

  :is(#dlg-day, #view-history) .task-title-row .task-check-slot {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #view-history .task-title-row .badge-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* === [PATCH-UX-32] Mobile: Confirm dialog task card compact (match History) === */
  #dlg-confirm #confirm-task-list {
    margin: 12px 0 18px;
  }

  /* カード本体（余白はカード側に寄せる） */
  #dlg-confirm #confirm-task-list .confirm-card.item.card {
    display: block;
    min-height: auto;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
  }

  #dlg-confirm #confirm-task-list .confirm-card.item.card .item-body {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* check列を使わない（左の空欄を消す） */
  #dlg-confirm #confirm-task-list .confirm-card .task-title-row {
    display: grid;
    grid-template:
      "title actions" auto
      "meta  actions" auto
      / minmax(0, 1fr) auto;

    gap: 2px 12px;
    align-items: center;
    width: 100%;

    /* ベース(.task-title-row)の左右paddingを殺して左右余白を揃える */
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  /* ネイティブ confirm でも横はみ出し対策 */
  #dlg-confirm #confirm-task-list .task-title-row .title,
  #dlg-confirm #confirm-task-list .task-title-row .meta {
    min-width: 0;
  }

  #dlg-confirm #confirm-task-list .task-title-row .task-meta-date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #dlg-confirm #confirm-task-list .confirm-card .task-title-row:hover {
    background: transparent;
  }

  /* 念のため：もし残ってもアイコン枠は消す */
  #dlg-confirm
    #confirm-task-list
    .confirm-card
    .task-title-row
    .task-check-slot {
    display: none !important;
  }

  #dlg-confirm #confirm-task-list .confirm-card .task-title-row .title {
    grid-area: title;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #dlg-confirm #confirm-task-list .confirm-card .task-title-row .meta {
    grid-area: meta;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
  }

  #dlg-confirm #confirm-task-list .confirm-card .task-title-row .btn-row {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  /* 確認画面では編集/削除ボタンは非表示（バッジだけ残す） */
  #dlg-confirm #confirm-task-list .confirm-card .task-title-row .btn-row button,
  #dlg-confirm
    #confirm-task-list
    .confirm-card
    .task-title-row
    .btn-row
    .btn-icon-ghost {
    display: none !important;
  }

  #dlg-confirm
    #confirm-task-list
    .confirm-card
    .task-title-row
    .btn-row
    .badge-wrap {
    display: flex;
    align-items: center;
  }

  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row {
    display: grid;

    /* check列を使わない（左の空欄を消す） */
    grid-template:
      "title actions" auto
      "meta  actions" auto
      / minmax(0, 1fr) auto;

    gap: 2px 12px;
    align-items: center;
    width: 100%;

    /* ベース(.task-title-row)の左右paddingを殺して左右余白を揃える */
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  /* ダイアログ内カードの横はみ出し（iOSの左右スワイプ）対策 */
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .title,
  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .meta {
    min-width: 0;
  }

  #dlg-ui-confirm
    .ui-confirm-detail.ui-confirm-detail-card
    .confirm-card:not(.confirm-card--account)
    .task-title-row
    .task-meta-date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* === [PATCH-UX-20] 狭幅端末で meta 行が潰れないように改行制御（Today/History 共通） === */
@media (max-width: 420px) {
  /* 重要: .meta を全体に当てない（タスクカードのメタ行だけに限定） */
  :is(#view-today, #view-active, #view-inprogress, #view-week, #view-history)
    .task-title-row
    .meta {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  :is(#view-today, #view-active, #view-inprogress, #view-week)
    .task-title-row
    .task-meta-penalty {
    width: 100%;
    text-align: right;
    margin-left: 0;
    margin-top: 2px;
  }

  /* --- calendar dialog / history: 「日付 + 金額」を同一行で維持 --- */
  #dlg-day .task-title-row .meta,
  #view-history .task-title-row .meta {
    flex-wrap: nowrap;
  }

  #dlg-day .task-title-row .task-meta-penalty,
  #view-history .task-title-row .task-meta-penalty {
    width: auto;
    text-align: left;
    margin-top: 0;
    margin-left: 0 !important;
    /* PC側の auto を潰す保険 */
  }

  /* ▼今日/進行中は「日付 + 金額」を同一行で維持する */
  #view-today .task-title-row .meta,
  #view-active .task-title-row .meta,
  #view-inprogress .task-title-row .meta {
    flex-wrap: nowrap;
  }

  #view-today .task-title-row .task-meta-penalty,
  #view-active .task-title-row .task-meta-penalty,
  #view-inprogress .task-title-row .task-meta-penalty {
    width: auto;
    text-align: left;
    margin-top: 0;
    margin-left: 0 !important;
    /* PC側の auto を潰す保険 */
  }

  /* --- history: 「日付 + 金額」を同一行で維持 --- */
  #view-history .task-title-row .meta {
    flex-wrap: nowrap;
  }
}

/* ========== [M5] Calendar (main / dialog) ========== */

/* iOS Style Dot Indicators for Mobile (≤900px) */
@media (max-width: 900px) {
  /* === 0. 全体の位置調整: ゆとりを持たせる === */
  #view-calendar {
    margin-top: 0;
    /* マイナスマージンを撤廃して自然な位置へ */
    padding-bottom: 88px;
    /* ★重要: FABと被ってもスクロールで逃げられるよう余白確保 */
  }

  /* === 1. ヘッダー調整 === */
  #view-calendar .cal-head {
    justify-content: space-between;
    gap: 4px;

    /* 上の余白を少し戻して圧迫感をなくす */
    padding-top: 16px;
    padding-bottom: 12px;
    margin-bottom: 0;
  }

  /* 年月タイトル */
  #view-calendar .cal-head h2 {
    position: static;
    transform: none;

    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    margin: 0;

    flex: 1;
    order: 2;
  }

  /* 左右矢印ボタン */
  #view-calendar .cal-nav-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    order: 1;
  }

  /* Nextボタン */
  #view-calendar #cal-next {
    order: 3;
    margin-left: 0;
  }

  /* 「今日へ」ボタン */
  #view-calendar .cal-today-pill {
    order: 4;
    font-size: 11px;
    padding: 0 10px;
    height: 32px;
    min-width: auto;
  }

  /* === 1.5 凡例と曜日 === */
  #view-calendar .cal-legend {
    margin-bottom: 8px;
    gap: 12px;
    padding-top: 0;
  }

  #view-calendar .legend-item {
    font-size: 10px;
  }

  #view-calendar .cal-dow {
    margin-bottom: 4px;
    font-size: 11px;
  }

  /* === 2. カレンダーグリッド調整 === */
  #view-calendar .cal-grid {
    gap: 2px;
  }

  #view-calendar .cal-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;

    /* ★セルを少し縦長に戻してタップしやすく、スカスカ感を解消 */
    min-height: 62px;
    padding: 6px 0;
    position: relative;
  }

  /* === 3. 日付数字 (Today緑塗りつぶし・枠線なし) === */
  #view-calendar .cal-date {
    position: static;
    margin: 0;

    width: 30px;
    height: 30px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 500;
  }

  /* Today強調 */
  #view-calendar .cal-cell.is-today .cal-date {
    background: var(--color-primary);
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
  }

  /* 枠線消し */
  #view-calendar .cal-cell.is-today {
    border-color: var(--color-border-subtle);
    box-shadow: none;
  }

  /* === 4. ドット表示 (タスク) === */
  #view-calendar .cal-dots {
    display: flex;
    flex-wrap: wrap;
    place-content: flex-start center;
    gap: 3px;

    width: 100%;
    height: 12px;
    overflow: hidden;
  }

  /* タスク（ピル） → ドット化 */
  #view-calendar .pill {
    color: transparent !important;
    font-size: 0;
    line-height: 0;

    width: 6px;
    height: 6px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    border: none !important;

    min-width: 0;
    display: block;
    transform: none !important;
  }

  /* 「…ほかN件」 → グレー小ドット */
  #view-calendar .more {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.5;

    font-size: 0;
    color: transparent;
    margin: 0;
    align-self: center;
  }
}

/* 極小画面（iPhone SE等）向けの微調整 */
@media (max-width: 360px) {
  #view-calendar .cal-head h2 {
    font-size: 14px;
  }

  #view-calendar .cal-nav-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
  }

  #view-calendar .cal-cell {
    min-height: 52px;
    /* 小画面でも少しだけ余裕を */
  }

  #view-calendar .cal-date {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}

/* ========== [M6] History View (Mobile) ========== */
@media (max-width: 768px) {
  /* --- 1. 統計パネル: 上段ヒーロー + 下段3列 --- */
  #view-history .stats-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* 下段共通スタイル */
  #view-history .stats-panel .stat:not(:nth-child(2)) {
    min-height: 80px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #view-history .stats-panel .stat:not(:nth-child(2)) .value {
    font-size: 18px;
    margin-top: 2px;
  }

  #view-history .stats-panel .stat:not(:nth-child(2)) .label {
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }

  /* --- 2. リストカード: 編集・ゴミ箱削除 ＆ レイアウト修正 --- */

  /* カード本体 */
  #view-history .list .item.card {
    min-height: auto;
    align-items: center;
    padding: 10px 12px;
  }

  /* グリッドレイアウト定義 */
  #view-history .task-title-row {
    display: grid;
    /* rows/cols/areas をまとめて同じ意味にする */
    grid-template:
      "icon title badge" auto
      "icon meta  badge" auto
      / auto 1fr auto;
    gap: 2px 12px;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
  }

  /* アイコンエリア (左) */
  #view-history .task-title-row .task-check-slot {
    grid-area: icon;
    grid-row: 1 / -1;
    align-self: center;
    justify-content: center;
    width: 24px;
    margin: 0;
    display: flex;
  }

  /* タイトルエリア (中央上) */
  #view-history .task-title-row .title {
    grid-area: title;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* メタ情報エリア (中央下: 日付と金額) */
  #view-history .task-title-row .meta {
    grid-area: meta;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    /* 日付と金額の間隔 */
    margin: 0;
    width: 100%;
  }

  /* 日付 */
  #view-history .task-title-row .task-meta-date {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.2;
    margin: 0;
  }

  /* 金額 (赤字) - 強制的に左寄せ */
  #view-history .task-title-row .task-meta-penalty {
    font-size: 12px;
    font-weight: 600;
    color: #ed4245;
    margin-left: 0 !important;
    /* 右寄せ解除 */
  }

  /* バッジエリア (右端) */
  #view-history .task-title-row .btn-row {
    grid-area: badge;
    grid-row: 1 / -1;
    place-self: center end;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* ★重要: 履歴では「編集」「削除」ボタンを非表示にする */
  #view-history .task-title-row .btn-row .btn-icon-ghost {
    display: none !important;
  }

  /* バッジ表示調整 */
  #view-history .task-title-row .btn-row .badge-wrap {
    display: flex;
    margin: 0;
  }

  #view-history .task-title-row .badge {
    font-size: 10px;
    padding: 2px 8px;
    white-space: nowrap;
  }
}

/* ========== [M7] Legal / Onboarding / Misc ========== */

/* --- Responsive (Mobile) ------------------------------------------- */

@media (max-width: 900px) {
  /* スマホのときは .login-card を縦並びに戻す */
  .login-card {
    flex-direction: column !important;
  }

  /* 左側（ビジュアル）を隠す */
  .login-visual-side {
    display: none;
  }

  /* モバイルでは重いので無効化（login overlay の擬似要素） */
  #login-overlay::after {
    display: none;
  }

  #login-overlay::before {
    display: none;
  }

  /* ノイズも消す */
  .mock-app-window {
    transform: none !important;
  }

  .login-action-side {
    padding: 24px;
    align-items: center;
    text-align: center;

    /* モバイル: 暗さを少し緩和しつつ、ドットは残す */
    background-color: #0f1115;

    /* うっすらグロー + ドット（2レイヤー） */
    background-image: radial-gradient(
        600px circle at 50% 28%,
        rgba(34, 197, 94, 0.1),
        transparent 55%
      ),
      radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: auto, 22px 22px;
    background-position: center, center;
    background-repeat: no-repeat, repeat;

    /* ドットが“中央付近に出る”感じは維持しつつ、見える範囲を少し広げる */
    mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(
      circle at center,
      black 55%,
      transparent 100%
    );

    border-left: none;
    box-shadow: none;
  }

  .login-brand img {
    margin: 0 auto 16px;
  }
}

@media (max-width: 560px) {
  .legal-dl {
    grid-template-columns: 1fr;
  }

  .legal-dl dt {
    padding-bottom: 0;
  }

  .legal-dl dd {
    padding-top: 8px;
  }
}

/* ========== 8. Global Patches & Boot/Theme ========== */

:root[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  background: var(--color-bg);
}

/* 初回描画で data-theme 未設定でも、OSがdarkなら暗色で保険描画 */
html:not([data-theme]) {
  /* 変数解決前でも安全な既定の薄い背景で塗る */
  background: #f5f7fb;
  /* = :root --bg と同値 */
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    /* var(--bg) と同値。初期paintの一瞬を暗色で張る保険 */
    background: #1e1f22;
  }
}

/* === [PATCH-UX-04] Focus visible for calendar/pill/check (safe) ========= */
#view-calendar .cal-cell:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
}

#view-calendar .pill:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
}

.check-btn:focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
}

/* === [PATCH-UX-06] Overlayオープン時の背景スクロール抑止 (safe) ========== */
/* Login Overlay / Dialog / Onboarding 表示中に背面のページがスクロールしないようにする */
body:has(#login-overlay.open),
body:has(dialog[open].light-dialog),
body:has(.onboard-overlay) {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* === [PATCH-ONBOARD-01] 同意モーダルのレイアウト調整 === */
@media (max-width: 900px) {
  /* カード本体：高さを抑えて1画面に収める */
  .onboard-overlay .onboard-card {
    width: min(520px, 100%);
    padding: 24px 28px 20px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 18px;

    /* カード内にスクロールバーを作らない（外側 .onboard-overlay でスクロール） */
    max-height: none;
    overflow: visible;
  }

  /* ヘッダー：時計アイコンをセンターに（.onboard-header は上で定義済み） */

  /* 時計アイコン（ロゴ）をきっちり中央に */
  .onboard-overlay .onboard-logo {
    display: block;
    margin: 0 auto;
    width: 64px;
    height: 64px;
  }

  /* タイトル・説明文の余白を少しだけ詰める */
  .onboard-overlay .onboard-title {
    margin: 0;
    font-size: 20px;
  }

  /* 説明文は読みやすさを残しつつ、横幅をしぼる */
  .onboard-overlay .onboard-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    max-width: 440px;
    text-align: left;
    align-self: stretch;
  }
}

/* === [PATCH-UX-07] A11y: 追加の focus-visible 適用面を拡張 (safe) ========= */
/* 既存のリング方針に合わせ、未カバー要素にも統一のフォーカスリングを付与 */
:where(.mini-nav-item, .sb-logout-icon-btn, .fab, .fab-add):focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
  border-radius: 8px;
}

/* === [PATCH-UX-08] Compact密度の微調整（見た目ほぼ不変） (safe) ========= */
body.compact .task-title-row {
  padding: 2px 10px 2px 6px;
}

body.compact .task-title-row .badge-wrap {
  gap: 4px;
  font-size: 10px;
}

/* === [PATCH-UX-15] A11y: focus-visible coverage extension (safe) === */
:where(
    .sb-user-info-link,
    .login-google-btn,
    #btn-confirm-done,
    .cal-nav-btn,
    .cal-today-pill,
    #btn-quick-add-today
  ):focus-visible {
  outline: var(--focus-ring-contrast);
  outline-offset: 2px;
  border-radius: 8px;
}

/* === [PATCH-UX-19] Dark: フォーカスはキーボード操作時のみ可視化（ノイズ低減・安全） === */
/* 既存の body[data-theme="dark"] *:focus の“常時アウトライン”を抑えて、:focus-visible に一本化 */
body[data-theme="dark"] *:focus {
  outline: none;
}

body[data-theme="dark"] *:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.15);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  /* ボタン/ナビ類のフォーカスリング（強制配色でも視認性を担保） */
  :where(
      .nav-item,
      .mini-nav-item,
      .btn-primary,
      .btn-ghost,
      .btn-outline,
      .btn-icon-soft,
      .btn-icon-ghost,
      .setting-pill,
      .check-btn,
      .b-nav-item,
      .top-icon-btn,
      .top-account-btn,
      .sb-logout-icon-btn
    ):focus-visible {
    outline: 1px solid CanvasText;
    outline-offset: 2px;
    forced-color-adjust: auto;
  }

  /* 入力系は少し強めのリング */
  :where(input, select, textarea):focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
    forced-color-adjust: auto;
  }
}

/* iOS Safari のバー再描画を軽く促すための一瞬クラス（JSで付け外しする） */
body.ios-repaint {
  opacity: 0.9999;
  transform: translateZ(0);
}

/* ===== [FIX-v2] iOS Safari: 継承を断ち切り、直接colorを指定してフェード =====
   問題: 親の color transition を子が継承すると iOS Safari で遅延する
   解決: テキスト要素に直接 color を指定し、自分自身の transition にする
   
   ポイント:
   1. color: var(--color-text-main) で明示的に色を指定（継承ではなく直接）
   2. transition: color 0.25s ease を個別に付与
   3. will-change + translateZ(0) でGPUレイヤー化を促す
*/

/* 設定画面のテキスト */
body.enable-transitions #view-settings h2,
body.enable-transitions #view-settings h3 {
  color: var(--color-text-main);
  transition: color 0.25s ease, background-color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

body.enable-transitions #view-settings #acc-name {
  color: var(--color-text-main);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

body.enable-transitions #view-settings #acc-mail {
  color: var(--color-text-muted);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

body.enable-transitions #view-settings .row .grow,
body.enable-transitions .card.setting-card .row .grow {
  color: var(--color-text-main);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

body.enable-transitions #view-settings .muted,
body.enable-transitions #view-settings .muted.small {
  color: var(--color-text-muted);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

/* サイドバーのユーザーカード */
body.enable-transitions .sb-user-card .sb-name {
  color: var(--color-text-main);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

body.enable-transitions .sb-user-card .sb-mail {
  color: var(--color-text-muted);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

/* モバイル下部ナビのラベル */
body.enable-transitions .b-nav-label {
  color: var(--color-text-muted);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

body.enable-transitions .b-nav-item.is-active .b-nav-label {
  color: var(--color-primary);
  transition: color 0.25s ease;
  will-change: color;
  transform: translateZ(0);
}

body.safari-tint-pulse::before,
body.safari-tint-pulse::after {
  opacity: 0.003;
}

/* ===== iOS Safari: repaint/tint guards (final override) ===== */
@supports (-webkit-touch-callout: none) {
  /* JS が is-on / display をトグルする前提で固定 */
  #safari-redraw-trigger {
    position: fixed;
    inset: 0;
    width: 1px;
    height: 1px;
    z-index: 2147483647;
    pointer-events: none;
    display: none;
    opacity: 0;
    background: transparent;
  }

  #safari-redraw-trigger.is-on {
    display: block;
    opacity: 0.001;
    background: rgba(0, 0, 0, 0.001);
  }

  /* 上下端に“ほぼ見えない”ストリップを置いてUIバーの再評価を誘発 */
  body::before,
  body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 28px;
    pointer-events: none;
    z-index: 2147483646;
    background: var(--color-bg);
    opacity: 0.001;
  }

  body::before {
    top: 0;
  }

  body::after {
    bottom: 0;
  }

  /* iOS Safari のバー再描画を軽く促すための一瞬クラス（JSで付け外しする） */
  body.ios-repaint {
    opacity: 0.9999;
    transform: translateZ(0);
  }

  body.safari-tint-pulse::before,
  body.safari-tint-pulse::after {
    opacity: 0.003;
  }
}

/* === Toast (mobile-friendly) ======================================= */
.todue-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  /* PCは今まで通り */
  z-index: 9999;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  max-width: min(92vw, 520px);

  /* クリック邪魔しない（設定トグルの上に乗っても操作できる） */
  pointer-events: none;
}

@media (max-width: 900px) {
  .todue-toast {
    /* ボトムナビ(56px) + safe-area + 少し余白 の上に逃がす */
    bottom: calc(12px + 56px + env(safe-area-inset-bottom));
  }
}

/* ===== Mobile: show remaining time text next to amount ===== */
@media (max-width: 760px) {
  .task-meta-remain {
    display: inline;
  }
}

/* ========== Account Deletion Styles ========== */

/* 削除カードの危険表示 */
.setting-card-danger {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.setting-card-danger h3 {
  color: var(--danger);
}

/* 削除行 */
.deletion-row {
  align-items: center;
}

/* 削除予約バナー */
.deletion-scheduled-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--danger) 10%, var(--card));
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}

.deletion-scheduled-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 50%;
}

.deletion-scheduled-text {
  flex: 1;
}

.deletion-scheduled-title {
  font-weight: 600;
  color: var(--danger);
  margin-bottom: 4px;
}

.deletion-scheduled-date {
  font-size: 14px;
  color: var(--text);
}

.deletion-scheduled-note {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--color-surface-soft);
  border-radius: var(--radius-field);
}

/* ====================================
   アカウント削除ダイアログ
   ==================================== */

/* Step 2: 注意事項モーダル */
.deletion-warning-wrap {
  display: grid;
  gap: 10px;
}

.deletion-warning-detail {
  text-align: left;
  margin-top: 8px;
  padding: 16px 18px;
  background: color-mix(
    in srgb,
    var(--color-surface) 92%,
    var(--color-surface-soft)
  );
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  display: grid;
  gap: 10px;
}

/* 情報ブロック：中央配置 */
.deletion-info-block {
  padding: 0;
  display: inline-block;
  text-align: left;
}

/* 2カラム構造の情報行 */
.deletion-info-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 12px;
  padding: 3px 0;
  line-height: 1.25;
}

/* リズム：重要な行は密、補足は空ける */
.deletion-info-row:nth-child(3) {
  margin-top: 4px;
}

.deletion-info-row--sub {
  margin-top: 0;
}

/* ラベル：読みやすい濃さに */
.deletion-info-label {
  flex-shrink: 0;
  width: auto;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  text-align: left;
  letter-spacing: 0.02em;
}

/* 値：主役 */
.deletion-info-value {
  min-width: 120px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* 補足行：少しだけ弱く（読める程度） */
.deletion-info-row--sub .deletion-info-value {
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 92%, transparent);
}

/* 警告文：中央配置 */
.deletion-warning-alert {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  color: color-mix(in srgb, var(--danger) 80%, var(--muted));
  font-weight: 500;
  text-align: center;
  background: color-mix(in srgb, var(--danger) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: 10px;
}

/* Google再認証：フッター */
.deletion-reauth-notice {
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.01em;
  text-align: center;
}

.deletion-reauth-notice svg {
  flex-shrink: 0;
  opacity: 0.7;
  width: 12px;
  height: 12px;
}

/* ダークモード対応 */
[data-theme="dark"] .setting-card-danger {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

[data-theme="dark"] .deletion-scheduled-banner {
  background: color-mix(in srgb, var(--danger) 15%, var(--card));
}

/* Step 4: 最終確認モーダル */
.deletion-final-confirm {
  text-align: left;
  margin-top: 16px;
}

.deletion-final-input-section {
  margin-top: 0;
}

.deletion-final-input-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.deletion-final-input-label strong {
  color: var(--danger);
  font-weight: 600;
}

.deletion-final-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.deletion-final-input::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

.deletion-final-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.deletion-final-input.is-valid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
}

.deletion-final-input.is-invalid {
  border-color: var(--border);
}

.deletion-final-note {
  margin: 14px 0 0;
  font-size: 11px;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  text-align: center;
}

/* OKボタン disabled 状態 */
#ui-confirm-ok:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* アカウント削除ダイアログ専用スタイル */
#dlg-ui-confirm:has(.deletion-warning-detail) .light-form,
#dlg-ui-confirm:has(.deletion-final-confirm) .light-form {
  max-width: min(440px, calc(100vw - 48px));
  padding: 28px 32px 24px;
  gap: 12px;
}

/* タイトル：中央、大きめ */
#dlg-ui-confirm:has(.deletion-warning-detail) h3,
#dlg-ui-confirm:has(.deletion-final-confirm) h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none;
  text-align: center;
}

/* 質問文：中央、タイトルより弱く */
#dlg-ui-confirm:has(.deletion-warning-detail) #ui-confirm-message,
#dlg-ui-confirm:has(.deletion-final-confirm) #ui-confirm-message {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 2px;
  text-align: center;
}

/* グレーボックスを完全に消す */
#dlg-ui-confirm:has(.deletion-warning-detail) .ui-confirm-detail,
#dlg-ui-confirm:has(.deletion-final-confirm) .ui-confirm-detail {
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ボタンエリア：決断フェーズの切り替え */
#dlg-ui-confirm:has(.deletion-warning-detail) menu,
#dlg-ui-confirm:has(.deletion-final-confirm) menu {
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

/* アカウント削除完了ダイアログ */
#dlg-deletion-complete .light-form {
  width: 100%;
  max-width: min(520px, calc(100vw - 48px)); /* ← 広げる */
  padding: 26px 32px 22px;
  gap: 12px;
  text-align: center;
}

#dlg-deletion-complete .deletion-complete-icon {
  margin: 0 auto 6px; /* ← タイトルへ寄せて“塊感” */
  font-size: 30px;    /* ← 少しだけ大きく */
  line-height: 1;
}

#dlg-deletion-complete h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

#dlg-deletion-complete .deletion-date-block {
  display: flex;
  flex-direction: column;
  gap: 4px; /* ラベル↔日付は近づける */
  margin-top: 2px;
}

#dlg-deletion-complete .deletion-complete-date-label {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

#dlg-deletion-complete .deletion-date {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.2px;
}

#dlg-deletion-complete .deletion-complete-note {
  margin: 8px auto 0; /* 日付↔本文は少し離す */
  max-width: 38ch;    /* ← 窮屈さ解消（2行に収まりやすい） */
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  /* text-wrap: balance; は外す（日本語の変な改行を誘発しやすい） */
}

.deletion-countdown-text {
  margin: 6px auto 0;
  font-size: 12px;
  line-height: 1.42;
  text-align: center;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  white-space: nowrap; /* フェードイン中の改行を防ぐ */
}

.deletion-countdown-strong {
  font-weight: 800;
  color: var(--text);
}

#dlg-deletion-complete menu {
  justify-content: center;
}

#dlg-deletion-complete .light-form > menu {
  width: 100%;
  margin: 10px 0 0;
  padding-top: 0;
}

#dlg-deletion-complete #btn-deletion-logout {
  min-width: 200px;
}

/* ダークモード対応 */
[data-theme="dark"] .deletion-reauth-notice {
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
}

/* ========== Deletion Pending Page (ログイン時の削除予約確認) ========== */

.deletion-pending-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 16px
    max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at top left, #0c1a14 0%, #000000 70%);
  font-family: sans-serif;
  color: #fff;
}

.deletion-pending-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: auto;
  background: rgba(20, 20, 24, 0.85);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.deletion-pending-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.deletion-pending-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.15);
  border-radius: 50%;
  color: #fbbf24;
}

.deletion-pending-icon svg {
  width: 36px;
  height: 36px;
}

.deletion-pending-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.deletion-pending-info {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
}

.deletion-pending-date-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.deletion-pending-date {
  font-size: 24px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 12px;
}

.deletion-pending-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.6;
}

.deletion-pending-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deletion-pending-actions .btn-primary {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.deletion-pending-actions .btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.deletion-pending-actions .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.deletion-pending-actions .btn-text {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  padding: 10px;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.deletion-pending-actions .btn-text:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* モバイル対応 */
@media (max-width: 480px) {
  .deletion-pending-card {
    padding: 24px 20px;
    gap: 20px;
    border-radius: 20px;
  }

  .deletion-pending-icon {
    width: 56px;
    height: 56px;
  }

  .deletion-pending-icon svg {
    width: 32px;
    height: 32px;
  }

  .deletion-pending-title {
    font-size: 18px;
  }

  .deletion-pending-date {
    font-size: 22px;
  }

  .deletion-pending-info {
    padding: 16px;
  }
}