/* ==========================================================================
   MissionToday - Smartphone Specialized Stylesheet (mobile.css)
   ========================================================================== */

/* This stylesheet is loaded ONLY on viewport widths of 768px or less.
   Write mobile-specific overrides, optimizations, and touch alignment here. */

@charset "UTF-8";

:root {
  /* =================================================================
     🔘 ボタンサイズ共通一括管理システム (Button Size System - Mobile)
     ================================================================= */
  /* [group1] ヘッダーボタングループ（モバイルサイズ: 46px最適化・Apple HIG準拠） */
  --header-btn-size-mobile: 46px;
  --header-btn-icon-size-mobile: 23px;
  --header-logo-size-mobile: 46px;
  --member-pill-btn-size-mobile: 30px;
  --member-pill-icon-size-mobile: 16px;

  /* [group2] カード・タスク内アクションボタングループ（モバイルサイズ） */
  --quadrant-btn-size-mobile: 34px;
  --quadrant-btn-icon-size-mobile: 18px;
  --task-action-btn-size-mobile: 30px;
  --task-action-btn-icon-size-mobile: 16px;

  /* [group3] ピル・チップ共通トークン（モバイル） */
  --pill-btn-padding-mobile: 0 14px;
}

/* --- 1. Base Layout & Scroll Optimization --- */
html, body {
  overscroll-behavior: auto !important; /* PC版のスクロールロックをモバイルでは完全解除 */
  -webkit-overflow-scrolling: touch !important; /* iOS等の慣性スクロールを強制有効化 */
}

body {
  font-size: 14px; /* Slight scale down for readability on small screens */
  overflow-x: hidden;
  background-color: var(--bg-color);
  -webkit-text-size-adjust: 100%;
}

/* Make sure container spacing is tight and neat */
.main-content-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important; /* カード群をスマホ画面幅いっぱいに引き伸ばす */
  padding: 0 8px 40px !important;  /* 左右の余白を16pxから8pxに半減して画面を広く */
  gap: 20px !important;
}

/* --- 2. Header Mobile Optimization (Grid 2-Row Layout) --- */
.top-bar {
  padding: 12px 14px !important;
  background: white;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.header-main {
  display: grid !important;
  grid-template-columns: 1fr auto auto auto; /* 4カラム（タイトルエリア + 3つの44pxボタン） */
  grid-template-rows: auto auto;
  gap: 12px 8px !important;
  align-items: center !important;
  width: 100%;
}

.header-title-area {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex !important;
  flex-direction: column !important; /* スマホでは見出しとサブ見出しを美しく縦並びに */
  align-items: flex-start !important; /* 左寄せ */
  gap: 2px !important; /* 上下の隙間を極小化してコンパクトに */
  min-width: 0 !important;
  width: auto !important; /* PC版の520px固定長をスマホでは完全に解除 */
  flex-shrink: 1 !important; /* スマホでは縮小を許可 */
}

h1#appMainTitle {
  font-size: 19px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  min-width: 0 !important;
  white-space: nowrap;
  letter-spacing: -0.02em;
  color: #2c593f !important; /* Nidoちゃんの色(深緑)で統一 */
}

#nidoAppsContainer {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

#nidoAppsLauncherBtn {
  position: relative !important;
  margin: 0 !important;
  width: var(--header-btn-size-mobile, 46px) !important;
  height: var(--header-btn-size-mobile, 46px) !important;
  min-width: var(--header-btn-size-mobile, 46px) !important;
  min-height: var(--header-btn-size-mobile, 46px) !important;
  background: #f1f5f9 !important;
  border-radius: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#forceHardReloadBtn {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  position: relative !important;
  margin: 0 !important;
  width: var(--header-btn-size-mobile, 46px) !important;
  height: var(--header-btn-size-mobile, 46px) !important;
  min-width: var(--header-btn-size-mobile, 46px) !important;
  min-height: var(--header-btn-size-mobile, 46px) !important;
  background: #f1f5f9 !important;
  border-radius: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#forceHardReloadBtn.has-update {
  background: #fef3c7 !important; /* 温かみのある極薄ゴールド */
  background-color: #fef3c7 !important;
  border: 1px solid #f59e0b !important;     /* 鮮やかなオレンジゴールド */
  color: #d97706 !important;            /* 深みのあるダークオレンジのアイコン */
  animation: updatePulse 2s infinite ease-in-out !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
}

#forceHardReloadBtn.has-update:hover {
  background: #fde68a !important;
  background-color: #fde68a !important;
  border-color: #d97706 !important;
  color: #b45309 !important;
}

#showAddMemberBtn {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  position: relative !important;
  margin: 0 !important; /* 余計なマージンを排除 */
  width: var(--header-btn-size-mobile, 46px) !important;
  height: var(--header-btn-size-mobile, 46px) !important;
  min-width: var(--header-btn-size-mobile, 46px) !important;
  min-height: var(--header-btn-size-mobile, 46px) !important;
  background: #f1f5f9 !important;
  border-radius: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#nidoScreenshotBtn {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  margin: 0 !important;
  width: var(--header-btn-size-mobile, 46px) !important;
  height: var(--header-btn-size-mobile, 46px) !important;
  min-width: var(--header-btn-size-mobile, 46px) !important;
  min-height: var(--header-btn-size-mobile, 46px) !important;
  background: #f1f5f9 !important;
  border-radius: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#nidoAiHighlightBtn {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  margin: 0 !important;
  width: var(--header-btn-size-mobile, 46px) !important;
  height: var(--header-btn-size-mobile, 46px) !important;
  min-width: var(--header-btn-size-mobile, 46px) !important;
  min-height: var(--header-btn-size-mobile, 46px) !important;
  background: #f1f5f9 !important;
  border-radius: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#globalExportLauncherBtn {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
  margin: 0 !important;
  width: var(--header-btn-size-mobile, 46px) !important;
  height: var(--header-btn-size-mobile, 46px) !important;
  min-width: var(--header-btn-size-mobile, 46px) !important;
  min-height: var(--header-btn-size-mobile, 46px) !important;
  background: #f1f5f9 !important;
  border-radius: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* モバイルヘッダーのアイコンボタン内 SVG サイズ統一 */
.top-bar .icon-button svg {
  width: var(--header-btn-icon-size-mobile, 23px) !important;
  height: var(--header-btn-icon-size-mobile, 23px) !important;
}

/* 🍏 Apple HIG 準拠: タップフィードバック（心地よいスプリング感） */
.top-bar .icon-button:active,
.mobile-timer-launcher:active {
  transform: scale(0.92) !important;
  transition: transform 0.1s ease !important;
}


.member-selector-area {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f1f5f9 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: fit-content;
  overflow: visible !important; /* ドロップダウンリストがはみ出して表示されるようにvisibleに */
}

/* メンバー選択ドロップダウンのモバイル最適化 */
.member-dropdown {
  width: auto !important;
  max-width: 130px !important;
  min-width: 0 !important;
}
.member-dropdown-toggle {
  padding: 3px 6px 3px 3px !important;
  font-size: 0.8rem !important;
  height: 30px !important;
  position: relative !important;
}
/* 🍏 Apple HIG 準拠: メンバー切替トグルの接触領域を最低44px×44pxに拡張 (30px + 7px + 7px = 44px) */
.member-dropdown-toggle::after {
  content: '';
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -4px;
  right: -4px;
}
.member-dd-avatar {
  width: 22px !important;
  height: 22px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.member-dd-avatar img,
.member-dd-avatar svg,
.member-dd-avatar div {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.member-dd-name {
  font-size: 0.8rem !important;
  max-width: 80px !important;
}
.member-dd-caret {
  width: 8px !important;
  height: 5px !important;
}
.member-dropdown-list {
  border-radius: 12px !important;
}
.member-dd-item {
  min-height: 44px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
.member-dd-item-avatar {
  width: 20px !important;
  height: 20px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.member-dd-item-avatar img,
.member-dd-item-avatar svg,
.member-dd-item-avatar div {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.member-dd-item-name {
  font-size: 0.78rem !important;
}

#showPersonalSettingsBtn {
  width: var(--member-pill-btn-size-mobile, 30px) !important;
  height: var(--member-pill-btn-size-mobile, 30px) !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
}

#showPersonalSettingsBtn svg {
  width: var(--member-pill-icon-size-mobile, 16px) !important;
  height: var(--member-pill-icon-size-mobile, 16px) !important;
}

/* 🍏 Apple HIG 準拠: ピル内ボタンの接触領域を最低44px×44pxに拡張 */
#showPersonalSettingsBtn::after {
  content: '';
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

/* モバイルでのアプリランチャーポップオーバー: 親ボタン右端に揃え、安全な幅で画面内に収める */
.nido-apps-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: auto !important;
  right: 0 !important;
  width: 240px !important;
  max-width: calc(100vw - 28px) !important;
  z-index: var(--z-dropdown-menu, 1000) !important;
}

.nido-apps-menu .nido-app-tile-btn {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  display: flex !important;
  padding: 10px 12px !important;
}

.nido-apps-menu .nido-app-tile-btn .app-tile-icon-box {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
}

.nido-apps-menu .nido-app-tile-btn svg {
  width: 20px !important;
  height: 20px !important;
}



.subtitle {
  font-size: 10px !important; /* スマホ向けに小さめで表示 */
  color: var(--text-muted);
  margin: 0 !important;
  text-align: left !important;
  min-width: 0 !important;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2 !important;
  /* 🚀 テキスト選択とテキストカーソル表示を完全に防ぐ */
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
}

/* --- 3. Mission Entry Card Mobile Vertical Custom Styling --- */
.mission-entry-card {
  padding: 16px !important;
  border-radius: 16px !important;
  /* 🚀 入力欄以外でテキスト選択やカーソルが表示されるのを完全に防ぐ */
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
}

/* 入力エリアのみテキスト選択・入力カーソルを許可 */
.mission-entry-card textarea,
.mission-entry-card input[type="text"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
}

/* プルダウン、ボタン、日付・時刻選択欄などはポインター（指マーク）を表示 */
.mission-entry-card select,
.mission-entry-card button,
.mission-entry-card input[type="date"],
.mission-entry-card input[type="time"] {
  cursor: pointer !important;
}

.task-entry-flow {
  display: flex !important; /* Gridから縦方向Flexboxに完全に上書き */
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important; /* すべての水色部分（フィールド間ギャップ）の縦幅を6pxで美しく統一 */
  width: 100% !important;
}

.entry-block {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important; /* 最低限の隙間でさらにコンパクトに */
}

.sometimes-bar-section {
  padding: 0 10px !important;
  margin-bottom: 8px !important;
}

.sometimes-bar-section .sometimes-pills-container,
#sometimesPillsContainer {
  margin-top: 0 !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 4px !important;
}

#sometimesPillsContainer:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sometimes-pill-btn,
.nido-pill-btn {
  height: 38px !important;
  padding: var(--pill-btn-padding-mobile, 0 14px) !important; /* スマホ画面の横幅に配慮したコンパクトパディング */
  font-size: 12px !important;
  position: relative !important;
}

/* 🍏 Apple HIG 準拠: ピルの接触領域を最低44px×44pxに拡張 (38px + 3px + 3px = 44px) */
.sometimes-pill-btn::after,
.nido-pill-btn::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  right: 0;
}

.task-entry-flow .entry-label {
  display: none !important; /* タスク入力フォームの見出しを不要にするため非表示化 */
}

.entry-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  display: block !important;
}

#taskTitleInput,
.title-block textarea,
.title-block input[type="text"] {
  width: 100% !important;
  height: 40px !important; /* スマホでよりコンパクトに高さを調整 */
  font-size: var(--font-size-base, 1rem) !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  padding: 8px 12px !important;
  resize: none !important; /* 折り返さないようリサイズ禁止 */
  font-family: inherit !important;
  outline: none !important;
}

.deadline-inputs {
  width: 100% !important;
  height: 40px !important; /* よりコンパクトに */
  border-radius: 10px !important;
  padding: 3px 8px !important;
}

.deadline-inputs select {
  flex: 1 !important;
  font-size: 0.9rem !important;
}

.category-block select {
  width: 100% !important;
  height: 40px !important; /* よりコンパクトに */
  border-radius: 10px !important;
  font-size: 0.9rem !important;
}

.estimate-action-row {
  display: flex !important;
  flex-direction: row !important; /* 横並び（半々の幅）に設置 */
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.estimate-inline-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 1.1 !important; /* 横幅の約半分を割り当て */
  min-width: 0 !important;
  width: auto !important;
  height: 44px !important;
  border-radius: 10px !important;
}

.estimate-adjust-row {
  height: 44px !important; /* 🍏 Apple HIG 44px 基準に統一 */
}

.estimate-adjust-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important; /* 🍏 Apple HIG 44pxタップ領域コンテキスト */
}

/* 🍏 Apple HIG 44px タップ判定領域：スリムな36pxボタンを維持しながら透明疑似要素で44px×44px以上を保証 */
.estimate-adjust-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  pointer-events: auto !important;
}

#addTaskButton {
  background-color: var(--primary-btn-bg, var(--theme-color)) !important;
  color: var(--primary-btn-text, var(--theme-text-color)) !important;
  border: var(--primary-btn-border, 1px solid rgba(15, 23, 42, 0.15)) !important;
  box-shadow: var(--primary-btn-shadow, 0 2px 6px rgba(15, 23, 42, 0.12)) !important;
  height: 44px !important; /* 🍏 Apple HIG 44px タップターゲット基準に完全準拠 */
  min-height: 44px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  width: auto !important; /* 通常モード時は自動幅 */
  flex: 1 !important; /* 残り幅を埋める */
  margin: 0 !important;
}

/* 旅行（シンプル）モード時は見積エリア（.estimate-inline-wrapper）が非表示になるため、追加ボタンを100%幅に広げる */
body.simple-mode-active #addTaskButton {
  width: 100% !important;
  flex: none !important;
}

.estimate-value-label {
  font-size: 1.1rem !important;
}

.button-block {
  margin-top: 6px !important;
}

.button-block button {
  width: 100% !important;
  height: 40px !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

/* --- 4. Matrix & Tasks List Mobile Layout --- */
.matrix-container {
  grid-template-columns: 1fr !important; /* 2列から1列にスタック */
  gap: 12px !important;
}

.matrix-quadrant {
  min-height: 200px !important;
}

/* --- 5. Touch Target Improvements (Larger tap areas for kids) --- */
/* ※.icon-itemと.color-swatchはゼロスクロール5x2グリッド（38px）を維持しつつ、透明疑似要素::afterによりApple HIG推奨の44px×44px物理接触領域を完全確保 */
button:not(.icon-item):not(.color-swatch), select, input {
  min-height: 40px; /* タッチしやすいサイズを保証 */
}

/* --- 6. Mobile Timer Launcher & Highlight Animation --- */
.mobile-timer-launcher {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: white !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  border-radius: 100% !important;
  width: 32px !important; /* 38pxから32pxにスリム化 */
  height: 32px !important;
  min-height: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  color: #475569 !important; /* グラファイトグレーを基本色に */
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.15s, color 0.15s !important;
}

.mobile-timer-launcher:active {
  transform: scale(0.88) !important;
  background: #f1f5f9 !important;
}

.mobile-timer-launcher:hover {
  color: var(--accent-blue) !important;
}

.mobile-timer-launcher svg {
  width: 16px !important;
  height: 16px !important;
}

/* 期限バッジまたは着手中バッジがある場合は、カード上部のパディングを広げてバッジ下部に美しいマージンを確保 */
.task-card:has(.task-deadline),
.task-card:has(.progress-badge) {
  padding-top: 30px !important; /* バッジがカード内に美しく収まる高さ */
  margin-top: 12px !important;  /* カード間の縦マージンを広げて重なりを完全に防ぐ */
  margin-bottom: 12px !important;
}

.task-card {
  display: flex !important;
  flex-direction: column !important; /* 上下2段レイアウト（上段:タイトル、下段:アクション） */
  align-items: stretch !important;
  position: relative !important;  /* バッジと削除ボタンの基準 */
  padding: 10px 12px !important;  /* カード内余白もモバイルに最適化 */
  margin: 10px 0 !important;      /* 均一で気持ちの良い明細間の余白 */
  background: white !important;
  border-radius: 14px !important; /* 少し角丸を優しくプレミアムに */
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important; /* 上品で軽いシャドウ */
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  overflow: visible !important;   /* バッジ等の配置の自由度のために */
  transition: all 0.2s ease !important;
  gap: 6px !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* 着手中タスクのアクティブな枠線とソフトな背景色 */
.task-card.in-progress {
  border: 1.5px solid #f59e0b !important;
  background: #fffbeb !important; /* 暖かいゴールド背景 */
}

/* 左端のグリップ */
.drag-grip {
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.task-card .drag-handle {
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
  color: #cbd5e1 !important;
}

.task-card .drag-handle::before {
  content: "≡" !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* 中央の文字やボタンが入るメインエリア（上段：編集ボタン ＋ タイトル） */
.task-main-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding-right: 22px !important; /* 右上のXマークと重ならない基本余白 */
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.task-card .edit-task-left-btn {
  width: var(--task-action-btn-size-mobile, 30px) !important;
  height: var(--task-action-btn-size-mobile, 30px) !important;
  min-width: var(--task-action-btn-size-mobile, 30px) !important;
  min-height: var(--task-action-btn-size-mobile, 30px) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 1px !important;
  cursor: pointer !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.task-card .edit-task-left-btn svg {
  width: var(--task-action-btn-icon-size-mobile, 16px) !important;
  height: var(--task-action-btn-icon-size-mobile, 16px) !important;
}

/* 📝 タスクカード内アクションボタン（モバイル用サイズ調整） */
.copy-task-text-btn {
  width: var(--task-action-btn-size-mobile, 30px) !important;
  height: var(--task-action-btn-size-mobile, 30px) !important;
  min-width: var(--task-action-btn-size-mobile, 30px) !important;
  min-height: var(--task-action-btn-size-mobile, 30px) !important;
  padding: 0 !important;
  position: relative !important;
}

.copy-task-text-btn svg {
  width: var(--task-action-btn-icon-size-mobile, 16px) !important;
  height: var(--task-action-btn-icon-size-mobile, 16px) !important;
}

/* 🍏 Apple HIG 準拠: タスクカード内アクションボタンの接触領域を最低44px×44pxに拡張 (30px + 7px + 7px = 44px) */
.copy-task-text-btn::after,
.task-card .edit-task-left-btn::after {
  content: '';
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -7px;
  right: -7px;
}

/* 📋 象限ヘッダーのアクションボタン（モバイル用サイズ調整） */
.copy-quadrant-btn,
.kachi-sort-quadrant-btn {
  width: var(--quadrant-btn-size-mobile, 34px) !important;
  height: var(--quadrant-btn-size-mobile, 34px) !important;
  min-width: var(--quadrant-btn-size-mobile, 34px) !important;
  min-height: var(--quadrant-btn-size-mobile, 34px) !important;
  padding: 0 !important;
  position: relative !important;
}

.copy-quadrant-btn svg,
.kachi-sort-quadrant-btn svg {
  width: var(--quadrant-btn-icon-size-mobile, 18px) !important;
  height: var(--quadrant-btn-icon-size-mobile, 18px) !important;
}

/* 🍏 Apple HIG 準拠: 象限ヘッダーアクションボタンの接触領域を最低44px×44pxに拡張 (34px + 5px + 5px = 44px) */
.copy-quadrant-btn::after,
.kachi-sort-quadrant-btn::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
}

/* 1行目：タスク名称 */
.task-title {
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: pre-wrap !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  margin: 0 !important;
  color: #1e293b !important;
}

/* 完了タスクのタイトル打ち消し線と色調調整 */
.task-card.completed {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.03) !important;
}
.task-card.completed .task-title {
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  opacity: 0.75 !important;
}

/* --- バッジのカード内 absolute 配置設計 --- */

/* 着手中バッジを左上に配置 */
.task-card .progress-badge {
  position: absolute !important;
  top: 8px !important;
  left: 36px !important; /* グリップ(24px)を避けた美しい左寄せ位置 */
  margin: 0 !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  z-index: 10 !important;
}

/* 左肩に寄せる期限バッジ */
.task-card .task-deadline {
  position: absolute !important;
  top: 8px !important;
  left: 36px !important;
  right: auto !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 0.7rem !important; /* モバイル用極小かつ太字で読みやすく */
  color: #ef4444 !important;
  background: #fef2f2 !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.05) !important;
}

/* 着手中バッジもある場合は、期限バッジを右にずらして綺麗に並べる */
.task-card:has(.progress-badge) .task-deadline {
  left: 105px !important; /* 着手中バッジの幅を考慮し自動配置 */
}

/* 最終行：見積、実績、編集、完了ボタンの横並び（桁ずれ防止のための横並びレイアウト） */
.task-meta-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 4px !important;
  width: 100% !important;
}

.task-card .task-estimate-container {
  display: flex !important;
  align-items: center !important;
  order: 1 !important;
}

.task-card .task-actual-container {
  display: flex !important;
  align-items: center !important;
  order: 2 !important;
}

.task-card .task-time-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.75rem !important; /* 視認性を確保（元のサイズをキープ） */
  font-weight: 600 !important;
  padding: 3px 6px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  height: 22px !important; /* 高さを22pxに統一 */
  border-width: 1px !important;
}

.task-card .task-time-pill.estimate {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

.task-card .task-time-pill.actual {
  background: rgba(16, 185, 129, 0.05) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

/* モバイルダークモード用ピル */
body.dark-mode .task-card .task-time-pill.estimate,
body.theme-universal-dark .task-card .task-time-pill.estimate {
  background: #334155 !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

body.dark-mode .task-card .task-time-pill.actual,
body.theme-universal-dark .task-card .task-time-pill.actual {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* 編集アイコンコンテナ (margin-left: auto で最も右側へ押し寄せる) */
.task-card .task-actions-r2 {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  order: 3 !important;
}

/* 編集ボタンのボタン化 (ピルとデザイン of 統一とタップ領域の確保) */
.task-card .edit-task-btn {
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  padding: 3px 6px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  width: 28px !important;
  height: 22px !important; /* ピルと高さを完全に揃える */
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 完了ボタンコンテナ */
.task-card .task-actions-r3 {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  order: 4 !important;
  margin-left: 0 !important;
}

/* 完了チェックボタンの高さ統一と角丸調整 */
.task-card .complete-check-btn {
  padding: 3px 10px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  height: 22px !important; /* ピル・編集ボタンと高さを22pxで完璧に揃える */
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 🕊️ Tier 1: アクションボタンのアクティブ時ソリッド沈み込み（scale縮小を全廃し44px判定を維持） */
.task-card .edit-task-btn:active,
.task-card .complete-check-btn:active {
  transform: translateY(1px) !important;
  box-shadow: var(--primary-btn-active-shadow, 0 1px 3px rgba(0, 0, 0, 0.08)) !important;
}

/* 左端のコントロールエリア（コピーと移動グリップを縦に配置） */
.task-card .task-left-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 48px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.task-card .task-left-controls .copy-task-text-btn {
  color: #cbd5e1 !important;
  padding: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.task-card .task-left-controls .drag-handle,
.task-card .task-left-controls .drag-grip {
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

/* 右上の正円で囲んだXマーク（通常時は枠なし・文字色のみ、見た目24px、×フォント16px、HIG44px） */
.task-card .task-delete-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;  /* 正円にする */
  background: transparent !important; /* 枠なし・透明背景 */
  color: #64748b !important; /* WCAG AA 4.6:1 準拠 */
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 15 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: color 0.18s ease, opacity 0.12s ease !important;
}

/* 🎯 モバイルでの当たり判定拡張（24pxボタンに対して上下左右10pxでHIG準拠44px × 44pxを確保） */
.task-card .task-delete-btn::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  bottom: -10px !important;
  left: -10px !important;
  right: -10px !important;
}

.task-card .task-delete-btn:hover {
  background: transparent !important;
  color: #dc2626 !important; /* WCAG AA 4.9:1 準拠 */
}

.task-card .task-delete-btn:active {
  opacity: 0.55 !important;
  transform: none !important;
}

/* Dark mode */
body.dark-mode .task-card .task-delete-btn,
body.theme-universal-dark .task-card .task-delete-btn {
  color: #94a3b8 !important; /* Dark背景に対して 5.3:1 (WCAG AA) */
}

body.dark-mode .task-card .task-delete-btn:hover,
body.theme-universal-dark .task-card .task-delete-btn:hover {
  color: #f87171 !important; /* Dark背景に対して 4.8:1 (WCAG AA) */
}


/* 今日のメモへの誘導ダブルパルス発光エフェクト (Amber Gold) */
@keyframes notesHighlightGlow {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    transform: scale(1) !important;
  }
  25% {
    /* 1回目：最大の輝き */
    box-shadow: 0 0 26px 8px rgba(245, 158, 11, 0.38) !important;
    border-color: rgba(245, 158, 11, 1) !important;
    transform: scale(1.025) !important;
  }
  50% {
    /* 中間：一時的に元に戻す */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    transform: scale(1) !important;
  }
  75% {
    /* 2回目：優しく控えめな輝き */
    box-shadow: 0 0 20px 6px rgba(245, 158, 11, 0.26) !important;
    border-color: rgba(245, 158, 11, 0.8) !important;
    transform: scale(1.016) !important;
  }
}

.day-detail.notes-highlight-flash,
.calendar-card.notes-highlight-flash {
  animation: notesHighlightGlow 2.2s ease-in-out 1 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  border-radius: 16px !important;
}

/* --- 14. スマホ版タイマーの超スリム・コンパクト化 --- */
.timer-card {
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: white !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.05) !important;
  margin-bottom: 4px !important;
}

.timer-card .card-header {
  display: flex !important; /* タスク名をモバイルでも表示 */
  padding: 4px 0 !important;
  margin-bottom: 6px !important;
  border-bottom: none !important;
}
.timer-card .card-header h2 {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* タイマーの全体表示を横一列のフレックスで超コンパクト化 */
.timer-card .shared-timer-display {
  font-size: 1.6rem !important; /* 文字サイズをぐっとコンパクトに */
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 0 !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.03) !important;
  height: 38px !important;
  align-items: center !important;
}

.timer-card .timer-digit-col {
  min-width: 14px !important;
  height: 28px !important;
}

.timer-card .timer-digit-col span {
  font-size: 1.4rem !important;
  line-height: 28px !important;
}

.timer-card .timer-separator {
  font-size: 1.2rem !important;
  line-height: 28px !important;
  margin: 0 1px !important;
}

/* ポモドーロトマトのコンパクト化 */
.timer-card .timer-presets {
  margin: 4px 0 !important;
  gap: 10px !important;
  justify-content: center !important;
}


/* 操作ボタンの超コンパクト化 */
.timer-card .timer-buttons {
  display: flex !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.timer-card .timer-buttons button {
  flex: 1 !important;
  height: 32px !important; /* ボタン高さを32pxにスリム化 */
  min-height: 0 !important; /* タッチターゲット制限を解除 */
  padding: 0 !important;
  font-size: 0.8rem !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

.complete-check-btn {
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

/* --- 16. モバイル版のみタイマーの位置をタスク表示の直前に移動 --- */
.left-content,
.side-content {
  display: contents !important;
}

#memberManagementSection {
  order: 1 !important;
}

#personalSettingsSection {
  order: 2 !important;
}

#mainTaskEntrySection {
  display: none !important;
  order: 3 !important;
}

.timer-card {
  order: 4 !important; /* タイマーカードをタスク入力欄の直後に配置！ */
  margin-top: 8px !important;
  margin-bottom: 4px !important;
}

/* 当該カードに .no-task クラスが付いている（＝着手タスクがない）時はモバイルではカードごと完全に非表示化 */
.timer-card.no-task {
  display: none !important;
}

.matrix-controls {
  order: 5 !important; /* 完了をたたむ/ひらくボタンをタイマーの直後に配置！ */
  margin: 10px 0 !important; /* 上下マージンを均等にして余白を美しく調整 */
}

.matrix-container {
  order: 6 !important;
}

.calendar-card {
  order: 8 !important;
}

/* --- 17. スマートフォン画面幅の最大有効化（画面いっぱい表示） --- */

.matrix-quadrant {
  border-width: 1px !important; /* ボーダー幅を2pxから1pxに縮小しスペース確保 */
}

.task-list {
  padding: 4px !important; /* リスト内パディングを8pxから4pxに半減 */
}

.task-card {
  margin: 6px 0 !important; /* カードの左右マージンを0にして、枠線いっぱいまで横幅を広げる！ */
  padding: 10px 12px !important; /* カード内余白もモバイルに最適化 */
}

/* --- 18. サブタイトルをモバイルで左寄せ2行目に綺麗に配置 --- */
.subtitle {
  display: block !important;
  align-self: flex-start !important;
  text-align: left !important;
  margin: 2px 0 0 0 !important; /* タイトルとの隙間を程よく調整 */
  font-size: 11px !important; /* 小さめサイズで上品に */
  opacity: 0.8;
  /* 🚀 テキスト選択とテキストカーソル表示を完全に防ぐ */
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
}

/* 📱 モバイル用トースト表示位置の最適化 (縦画面時に画面下部からふわっと表示) */
.toast-container {
  bottom: 80px !important;
  top: auto !important;
}

/* 📱 iOS/iPad Safari でのフォーカス時自動ズームを防ぐため、フォントサイズを16px以上に統一 */
/* ※ input[type="color"] は除外（サイズを変えると非表示の picker が表示領域を占有するバグが起きるため） */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  font-size: 16px !important;
}

/* 🎨 カスタムカラーピッカー（非表示の input[type=color]）をモバイルでも完全に不可視に固定 */
#customThemeColorPicker {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-size: 0 !important;
}

/* 📱 個人設定・ルーティン設定のスリム化＆余白詰め */
#routineDaysLabel {
  display: none !important; /* 「いつ：」を完全に非表示化 */
}

/* 個人設定モーダル内の余白とギャップを極限までコンパクトに */
#customPrefsModal .settings-layout-container {
  gap: 10px !important;
}

#customPrefsModal .settings-column {
  padding: 8px !important;
}

#customPrefsModal .settings-group {
  gap: 12px !important;
  padding: 4px !important;
}

#customPrefsModal .setting-item {
  margin-top: 2px !important;
  padding-top: 8px !important;
}

.routine-column {
  padding-left: 0 !important;
  border-left: none !important; /* スマホでは境界線を消してスッキリ */
  margin-top: 10px !important;
  border-top: 1px solid #eee !important;
}

.routine-add-compact {
  padding-top: 10px !important;
}

.routine-day-chip-container {
  gap: 4px !important; /* 曜日チップの隙間を狭めて1行に収まりやすくする */
}

/* ==========================================================================
   カチカチソート（Kachi-Kachi Sort）モード専用スタイル
   ========================================================================== */

/* モバイル版の象限個別スクロールバーを完全撤去 */
.task-list {
  max-height: none !important;
  overflow-y: visible !important;
}

/* カチカチモード時、カードの横幅を少し狭めて左右両端にタップ無反応のスクロール背景ゾーンを確保 */
body.kachi-sort-active .task-card {
  width: calc(100% - 56px) !important; /* 左右に合計56px（片側28px）の誤タップ防止セーフゾーン */
  margin-left: auto !important;
  margin-right: auto !important;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s ease !important;
}

/* モバイル版の Nido ヘッダーアイコンサイズ調整 */
.header-nido-logo {
  width: var(--header-logo-size-mobile, 46px) !important;
  height: var(--header-logo-size-mobile, 46px) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

/* 新設したPC用メタブロックをモバイル版では無効化して元の完璧なレイアウトを維持 */
.task-card .task-right-meta-block,
.task-card .task-meta-row {
  display: contents !important;
}


/* ==========================================================================
   📱 MOBILE OVERRIDES FOR PERSONAL SETTINGS & ROUTINE FLOW
   ========================================================================== */

/* Stack setting sections column-wise on mobile */
.settings-top-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.settings-top-left-half {
  width: 100%;
}

.settings-top-right-half {
  width: 100%;
  display: flex;
  flex-direction: column !important; /* スマホでは縦並びに自動スタック */
  gap: 16px !important;
  margin-top: 0 !important;
}

.settings-top-right-half .settings-top-col {
  flex: 1;
  min-width: 130px;
  width: auto;
}

.settings-top-col {
  width: 100% !important;
}

.settings-bottom-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

.settings-bottom-left,
.settings-bottom-right {
  width: 100% !important;
}

.routine-list-container {
  max-height: none !important;
  overflow-y: visible !important;
  padding-right: 0 !important;
}

.routine-section-header {
  margin-top: 10px !important;
}

.settings-divider {
  height: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 20px 0 12px 0 !important;
}

.settings-modal-inner {
  padding: 14px 16px !important; /* Slightly smaller padding on mobile */
  padding-bottom: 40px !important; /* モバイル下部見切れ防止の余白 */
  border-radius: var(--modal-radius-small, 20px) !important;
  -webkit-overflow-scrolling: touch !important; /* スマホでの操作をサラサラで快適にします */
}

#personalSettingsSection .setting-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-top: 10px !important;
}

/* Adjust mobile mode tab container margins */
.mode-tab-group {
  margin-top: 4px !important;
}

/* Responsive grids for mobile (Apple HIG 44pxタップ領域担保・38px黄金サイズ・5列×2行) */
#themeColorPalette {
  display: grid !important;
  grid-template-columns: repeat(5, var(--personal-picker-size, 38px)) !important;
  gap: 6px !important;
  justify-content: start !important;
}

#themeColorPalette .color-swatch {
  width: var(--personal-picker-size, 38px) !important;
  height: var(--personal-picker-size, 38px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

#iconPalette {
  display: grid !important;
  grid-template-columns: repeat(5, var(--personal-picker-size, 38px)) !important;
  gap: 6px !important;
  justify-content: start !important;
}

#iconPalette .icon-item {
  width: var(--personal-picker-size, 38px) !important;
  height: var(--personal-picker-size, 38px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  font-size: 1.25rem !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.custom-avatar-wrapper {
  position: relative !important;
  width: var(--personal-picker-size, 38px) !important;
  height: var(--personal-picker-size, 38px) !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#avatarDoodleBtn, #avatarUploadBtn, .custom-avatar-item {
  width: var(--personal-picker-size, 38px) !important;
  height: var(--personal-picker-size, 38px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.custom-avatar-item img,
.custom-avatar-item svg {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* 🌟 Apple HIG 44px × 44px タップ領域担保 (モバイル最適化)
   視覚的サイズは黄金比38px（5列x2行ゼロスクロール）を維持しつつ、
   透明疑似要素::afterにより上下左右3px拡張し、HIG推奨の44px × 44px物理接触領域を完全確保（Gap 6pxを二等分して隙間ゼロ化） */
#themeColorPalette .color-swatch::after,
#iconPalette .icon-item::after,
#avatarDoodleBtn::after,
#avatarUploadBtn::after,
.custom-avatar-item::after,
#themeColorPalette .color-swatch::before,
#iconPalette .icon-item::before,
#avatarDoodleBtn::before,
#avatarUploadBtn::before,
.custom-avatar-item::before {
  content: '' !important;
  position: absolute !important;
  top: -3px !important;
  bottom: -3px !important;
  left: -3px !important;
  right: -3px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
}

/* モバイルでのオプションピル タッチ領域44px担保 */
.personal-option-pill::after {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  bottom: -6px !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 44px !important;
  pointer-events: auto !important;
}

/* Routine task 4-row layout on mobile */
.routine-add-compact {
  padding: 10px !important;
  border-radius: 14px !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.routine-add-row {
  gap: 4px !important;
}

.routine-input-label {
  font-size: 0.75rem !important;
  margin-bottom: 2px !important;
}

/* Title Input */
#newRoutineTitleInput {
  height: 40px !important;
  padding: 6px 12px !important;
  font-size: 16px !important; /* Prevent iOS automatic zoom */
}

/* Quadrant Chips Grid on Mobile */
.quadrant-chip-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 2x2 grid on mobile for high touch readability */
  gap: 6px !important;
}

.quadrant-chip {
  height: 36px !important;
  font-size: 0.8rem !important;
  border-radius: 8px !important;
}

/* Days Shortcuts and Chips */
.routine-shortcuts-bar {
  gap: 6px !important;
  margin-bottom: 4px !important;
}

.routine-shortcut-btn {
  padding: 5px 12px !important;
  font-size: 0.75rem !important;
}

.routine-day-chip-container {
  gap: 5px !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 4px !important;
}

.routine-day-pill span {
  min-width: 32px !important;
  height: 32px !important;
  font-size: 0.8rem !important;
  padding: 0 4px !important;
}

/* Row 4: Half-and-half */
.routine-add-row.row-actions {
  flex-direction: row !important;
  gap: 10px !important;
}

#routineEstimateAdjustRow {
  height: 40px !important;
}

#routineEstimateAdjustRow .estimate-adjust-btn {
  width: 30px !important;
  height: 30px !important;
}

#routineEstimateAdjustRow .estimate-value-label {
  font-size: 0.85rem !important;
}

#addRoutineConfirmBtn {
  height: 40px !important;
  font-size: 0.85rem !important;
  border-radius: 10px !important;
}

#cancelRoutineEditBtn {
  height: 40px !important;
  line-height: 40px !important;
}

/* モバイル・iPad等での実績時間・タスク編集モーダルのソフトキーボード重複回避 */
.custom-prompt-modal-overlay {
  align-items: flex-start !important;
  padding-top: 4vh !important; /* キーボード表示時も見切れにくいよう位置調整 */
  padding-bottom: 40px !important; /* スクロール時の下部余白 */
  overflow-y: auto !important; /* モバイル・iPad等でのスクロール対応 */
  -webkit-overflow-scrolling: touch !important;
}

/* 記録しない (-）ボタンのホバー/アクティブ色調 */
.no-record-shortcut-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #475569 !important;
}

.no-record-shortcut-btn:active {
  transform: scale(0.95) !important;
}


/* ==========================================================================
   📮 ご要望ポスト（Community Support）スマートフォン最適化
   ========================================================================== */
.comm-inputs-row {
  display: flex !important;
  flex-direction: column !important; /* スマホでは1列に縦並びにする */
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}

.comm-nickname-input {
  display: block !important;       /* 確実に表示させる */
  width: 100% !important;          /* 横幅いっぱいに広げる */
  box-sizing: border-box !important;
  flex-shrink: 1 !important;       /* 画面幅に応じて縮むのを許可（潰れ防止） */
}

/* 実績時間等のカスタムプロンプト内容のモバイル見切れ防止 ＆ 超コンパクト化 */
.custom-prompt-content {
  max-height: 96vh !important;
  max-height: 96dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 18px !important; /* 内側余白をコンパクト化 */
  gap: 10px !important; /* 要素の間隔を縮小 */
}

/* モバイルでのテンキーキーボード高さ・サイズ圧縮 */
.custom-prompt-keyboard-helper {
  gap: 8px !important;
  margin-top: 4px !important;
}

.custom-prompt-tenkey-grid .helper-key-btn {
  height: 38px !important; /* 44px から 38px に圧縮 */
  font-size: 1.05rem !important;
  border-radius: 8px !important;
}

.helper-key-btn.preset {
  padding: 5px 0 !important; /* プリセットボタンもスリムに */
  font-size: 0.8rem !important;
}

.custom-prompt-input-wrapper {
  padding: 4px 10px !important;
}

#customPromptInput {
  font-size: 1.1rem !important;
}

.custom-prompt-body {
  gap: 8px !important;
}

.custom-prompt-body p {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

.custom-prompt-sub {
  font-size: 0.7rem !important;
}

#commPriorityRow {
  width: 100% !important;
}

#commPriority {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  font-size: 16px !important;      /* iOSでの入力時画面ガタつき（自動ズーム）を防ぐ */
}

/* ==========================================================================
   📱 旅行（シンプル）モード有効時のモバイルレイアウト最適化
   ========================================================================== */

body.simple-mode-active #documentViewerCard {
  order: 9 !important;
}
body.simple-mode-active #simpleLinkPanel {
  order: 10 !important;
}

/* ==========================================================================
   🧹 シンプルモード：添付資料がないときの1行スリム化
   ========================================================================== */
#documentViewerCard.empty-attachment {
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
}

#documentViewerCard.empty-attachment #docViewerContent {
  margin: 0 !important;
}

#documentViewerCard.empty-attachment #docDropZone {
  min-height: 40px !important;
  padding: 4px 12px !important;
  display: flex !important;
  flex-direction: row !important; /* 横並び */
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-style: dashed !important;
  border-width: 1px !important;
  border-radius: 8px !important;
  background: transparent !important;
}

#documentViewerCard.empty-attachment #docDropZone svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* シンプルモード時：モバイル画面での縦カード間マージンを一貫して8pxに美しく統一 */
body.simple-mode-active #mainTaskEntrySection,
body.simple-mode-active .matrix-container,
body.simple-mode-active #documentViewerCard,
body.simple-mode-active #simpleLinkPanel {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

/* ==========================================================================
   📱 超小型モバイル（390px以下）向け追加補正
   機種によって文字・ボタンが極端に小さくなる問題を解消
   ========================================================================== */
@media screen and (max-width: 390px) {
  html {
    font-size: 15px !important; /* ベースフォントを少し大きく */
  }

  body {
    font-size: 15px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* ヘッダーボタン類のタッチターゲットを最低44pxに */
  .top-bar button,
  .top-bar select,
  .top-bar .member-tab {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 0.9rem !important;
  }

  /* タスクカード内ボタンを少し大きく */
  .task-card .complete-check-btn,
  .task-card .edit-task-btn {
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 0.85rem !important;
  }

  /* タスクタイトルを読みやすく */
  .task-card .task-title {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  /* メンバータブを少し大きく */
  .member-tab {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
  }

  /* フッターボタン */
  #addTaskButton {
    font-size: 1rem !important;
    min-height: 48px !important;
  }
}

/* ==========================================================================
   📱 モバイルでの象限タイトルインライン編集最適化
   編集中は右側ボタン群を退避して全幅を活用し、375px画面でも美しく余裕をもって操作可能
   ========================================================================== */
.quadrant-header.is-editing-title .quadrant-header-actions {
  display: none !important;
}

.quadrant-header.is-editing-title [id$="_header"] {
  width: 100% !important;
  flex: 1 1 100% !important;
}

.quadrant-title-clickable {
  min-height: 38px; /* 🍏 Apple HIG 基準の快適なタッチターゲット確保 */
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.quadrant-title-edit-box {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 100% !important;
}

.quadrant-title-inline-input {
  width: 100% !important;
  min-width: 0 !important; /* flexボックス内での縮小オーバーフロー完全防止 */
  max-width: none !important;
  flex: 1 1 auto !important;
  height: 44px; /* Apple HIG推奨 44pxタップターゲット基準 */
  font-size: var(--font-size-base, 1rem) !important; /* 🍏 iOS Safari 自動ズーム防止基準（16px以上確保） */
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  padding: 6px 10px;
  box-sizing: border-box;
}

/* ==========================================================================
   🌸 モバイルでの達成フレーム非表示・設定スリム化
   タスクカードへの被りを物理的に解消し、設定モーダルも不要項目を非表示化
   ========================================================================== */
.achievement-frame {
  display: none !important;
  pointer-events: none !important;
}

#achievementFrameContainer {
  display: none !important;
  pointer-events: none !important;
}

/* ==========================================================================
   📱 モバイル専用フローティングアクションボタン (FAB) ＆ クイックタスク追加バー
   親指最短の44pxタッチターゲット、スクロール連動象限判定、時系列末尾連続登録
   ========================================================================== */
#mobileTaskFabBtn {
  display: flex !important;
  position: fixed !important;
  bottom: 22px;
  right: 18px;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50% !important;
  background: var(--q3-accent, #2c593f) !important;
  color: #ffffff !important;
  border: none !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(44, 89, 63, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer;
  z-index: 500 !important;
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease, bottom 0.2s ease !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#mobileTaskFabBtn:active {
  transform: scale(0.92) !important;
}

/* 📅 過去日付閲覧フロートバー表示時はFABを上に持ち上げて被りを防止 */
body.has-past-date-floating-bar #mobileTaskFabBtn {
  bottom: 74px !important;
}

/* 📱 クイックタスク追加バー (ボトムシート) */
#mobileQuickTaskBar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500 !important;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

#mobileQuickTaskBar.open {
  display: flex !important;
  pointer-events: auto !important;
}

.mobile-quick-task-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: quickBackdropFade 0.2s ease forwards;
}

.mobile-quick-task-sheet {
  position: relative;
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 12px)) 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: quickSheetSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mobile-quick-task-pills-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mobile-quick-quadrant-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 0;
  margin: -6px 0;
}

.mobile-quick-quadrant-pills::-webkit-scrollbar {
  display: none;
}

.mobile-quadrant-pill {
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative; /* 🍏 Apple HIG 44px疑似要素用 */
}

/* 🍏 Apple HIG 準拠: 象限ピルのタップ判定領域を最低44pxに拡張 (32px + 6px*2 = 44px) */
.mobile-quadrant-pill::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  right: 0;
}

.mobile-quadrant-pill .pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.mobile-quadrant-pill .pill-dot.q1 { background: #ef4444; }
.mobile-quadrant-pill .pill-dot.q2 { background: #f59e0b; }
.mobile-quadrant-pill .pill-dot.q3 { background: #10b981; }
.mobile-quadrant-pill .pill-dot.q4 { background: #0ea5e9; }

.mobile-quadrant-pill[data-quadrant="q1"].active {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
  font-weight: 700;
}

.mobile-quadrant-pill[data-quadrant="q2"].active {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #b45309;
  font-weight: 700;
}

.mobile-quadrant-pill[data-quadrant="q3"].active {
  background: #dcfce7;
  border-color: #4ade80;
  color: #15803d;
  font-weight: 700;
}

.mobile-quadrant-pill[data-quadrant="q4"].active {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #0369a1;
  font-weight: 700;
}

.mobile-priority-insert-pill {
  height: 32px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative; /* 🍏 Apple HIG 44px疑似要素用 */
}

/* 🍏 Apple HIG 準拠: 最優先ピルのタップ判定領域を最低44pxに拡張 (32px + 6px*2 = 44px) */
.mobile-priority-insert-pill::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  right: 0;
}

.mobile-priority-insert-pill.active {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3) !important;
}

.mobile-quick-task-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.mobile-quick-task-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px; /* 🍏 Apple HIG 44px基準 */
  font-size: 16px !important; /* 🍏 iOS Safari 自動ズーム防止（16px以上確保） */
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #1e293b;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mobile-quick-task-input:focus {
  border-color: var(--q3-accent, #2c593f);
  background: #ffffff;
}

.mobile-quick-task-submit-btn {
  height: 44px; /* 🍏 Apple HIG 44px基準 */
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: var(--q3-accent, #2c593f);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.1s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-quick-task-submit-btn:active {
  opacity: 0.92;
  transform: translateY(1px);
}

.mobile-quick-task-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative; /* 🍏 Apple HIG 44px疑似要素用 */
  flex-shrink: 0;
}

/* 🍏 Apple HIG 準拠: 閉じるボタンの接触領域を最低44px×44pxに拡張 (36px + 4px*2 = 44px) */
.mobile-quick-task-close-btn::before {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
  border-radius: 50%;
}

.mobile-quick-task-close-btn:active {
  background: #e2e8f0;
}

/* ダークモードでのスタイル適応 */
body.dark-mode .mobile-quick-task-sheet,
body.theme-universal-dark .mobile-quick-task-sheet {
  background: #1e293b;
  color: #f1f5f9;
}

body.dark-mode .mobile-quick-task-input,
body.theme-universal-dark .mobile-quick-task-input {
  background: #0f172a;
  color: #f8fafc;
  border-color: #334155;
}

body.dark-mode .mobile-quadrant-pill,
body.theme-universal-dark .mobile-quadrant-pill {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}

body.dark-mode .mobile-priority-insert-pill,
body.theme-universal-dark .mobile-priority-insert-pill {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}

body.dark-mode .mobile-quick-task-close-btn,
body.theme-universal-dark .mobile-quick-task-close-btn {
  background: #334155;
  color: #cbd5e1;
}

@keyframes quickBackdropFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes quickSheetSlideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}