/* ===== カラー定義 =====
   ベース色 : 水色 (#EAF6FB)
   サブカラー: 白色 (#FFFFFF)
   アクセント: 青色 (#2F7FB8)
   設定アイコン用アクセント(紫系): #8C96F0 / #EEEDFE
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  background: #EAF6FB;
  color: #1A3A52;
  min-height: 100vh;
  --fab-bottom-offset: 86px;
  /* 画面端からのスワイプで前後のページがプレビュー表示されるOS標準ジェスチャーを無効化
     (index.html⇔tutorial.htmlの行き来で意図せずチラ見えするのを防ぐ) */
  overscroll-behavior-x: none;
}
/* PWAとして起動時はナビバーがセーフエリア分だけ浮く分、FABもそれに合わせて押し上げる */
@media (display-mode: standalone) {
  body {
    --fab-bottom-offset: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

.app {
  --app-padding: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--app-padding);
  padding-bottom: 0;
  position: relative;
  min-height: 100vh;
}

.screens {
  padding-bottom: 84px;
}
/* PWAとして起動時、ナビバーがセーフエリア分だけ浮く分の余白を追加
   (元の84pxはWeb版・PWA版とも共通のまま維持) */
@media (display-mode: standalone) {
  .screens {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== 画面切り替え ===== */
.screen {
  display: none;
}
.screen.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 汎用カード ===== */
.card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

.label {
  font-size: 12px;
  color: #6B8A99;
  margin-bottom: 4px;
}

.sub-label {
  font-size: 12px;
  font-weight: 500;
  color: #5A8AA8;
  margin-bottom: 10px;
}

/* ===== 残高カード ===== */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.balance {
  font-size: 30px;
  font-weight: 500;
  color: #1A3A52;
}

.icon-buttons {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 0.5px solid #D8EAF2;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}

.icon-btn i {
  font-size: 18px;
  color: #5A8AA8;
}

.icon-btn:hover {
  background: #EAF6FB;
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn-accent {
  background: #EEEDFE;
  border: 1.5px solid #8C96F0;
}

.icon-btn-accent:hover {
  background: #E1DFFC;
}

.setting-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* ===== 目標行 ===== */
.goal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #EAF6FB;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.goal-row:hover {
  background: #DFF1F8;
}

.goal-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 0.5px solid #D8EAF2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.goal-icon i {
  font-size: 18px;
  color: #2F7FB8;
}

.goal-text {
  flex: 1;
  min-width: 0;
}

.goal-name {
  font-size: 14px;
  font-weight: 500;
  color: #1A3A52;
}

.chevron {
  font-size: 16px;
  color: #A9C7D6;
}

/* ===== 日課カード ===== */
.daily-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daily-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.daily-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EAF6FB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.daily-icon i {
  font-size: 18px;
  color: #2F7FB8;
}

.daily-text {
  min-width: 0;
}

.daily-name {
  font-size: 14px;
  font-weight: 500;
  color: #1A3A52;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-achieve {
  background: #2F7FB8;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}

.btn-achieve:active {
  transform: scale(0.95);
}

.btn-achieve.done {
  background: #B9D6E8;
  color: #FFFFFF;
}

/* ===== セクション見出し ===== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.section-title {
  font-size: 13px;
  font-weight: 500;
  color: #5A8AA8;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.card .section-title {
  margin-bottom: 10px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #2F7FB8;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.link-btn i {
  font-size: 14px;
}

/* ===== お気に入りグリッド ===== */
.favorites {
  margin-bottom: 14px;
}

.fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.fav-grid.cols-1 { grid-template-columns: 1fr; }
.fav-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.fav-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.fav-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.fav-card {
  background: #FFFFFF;
  border: 0.5px solid #E3F0F6;
  border-radius: 16px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}

.fav-card:hover {
  background: #EAF6FB;
}

.fav-card:active {
  transform: scale(0.95);
}

.fav-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EAF6FB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fav-icon-circle.fav-icon-done {
  background: #2F7FB8;
}

.fav-icon-circle.fav-icon-done i {
  color: #FFFFFF !important;
}

.fav-icon-circle i {
  font-size: 22px;
  color: #2F7FB8;
}

.fav-card span {
  font-size: 12px;
  font-weight: 500;
  color: #1A3A52;
  text-align: center;
}

.fav-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: #A9C7D6;
  padding: 20px 0;
}

/* ===== 金額入力 ===== */
.amount-row {
  display: flex;
  gap: 8px;
}

.amount-row input {
  flex: 1;
  border: 0.5px solid #D8EAF2;
  background: #EAF6FB;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1A3A52;
  outline: none;
  transition: box-shadow 0.15s;
}

.amount-row input:focus {
  box-shadow: 0 0 0 2px #B9D6E8;
}

.btn-primary {
  background: #2F7FB8;
  color: #FFFFFF;
  border: none;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-block {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  font-size: 14px;
}

/* ===== お気に入り編集画面 ===== */
.edit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* 画面上部に固定されるヘッダー(お気に入り編集画面など) */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #EAF6FB;
  padding: 12px 1rem 10px;
  margin: 0 -1rem 14px;
  box-shadow: 0 2px 8px rgba(47, 127, 184, 0.08);
}

.sticky-header .edit-title {
  flex: 1;
  /* タイトルが長くなっても1行で収まるよう省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-title {
  font-size: 16px;
  font-weight: 500;
  color: #1A3A52;
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* FABが最後の項目に重なって操作しづらくならないよう、
   FABのある一覧(タスク・Wish)だけ下に1項目分ほどの余白を確保する */
#taskListContainer,
#wishList {
  /* FABがナビバーとの間隔調整で位置が変わっても、最後の項目が
     隠れないよう「FABの下端位置 + FABの高さ + 余裕」から動的に計算する
     (固定値だとFABの位置とズレて最後の項目が隠れてしまうため)。 */
  padding-bottom: calc(var(--fab-bottom-offset) + 56px + 16px);
  /* ドラッグ並び替え中、ブラウザのscroll anchoringで意図せず
     大きくスクロールしてしまう挙動を防ぐ */
  overflow-anchor: none;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 10px 12px;
  transition: background 0.15s, opacity 0.15s;
}

.list-item.current {
  background: #EAF6FB;
  cursor: grab;
}

.list-item.current:active {
  cursor: grabbing;
}

.list-item.current.dragging {
  opacity: 0.4;
}

.list-item.pool {
  border: 0.5px solid #E3F0F6;
}

.list-item.pool.added {
  opacity: 0.4;
}

.grip {
  font-size: 16px;
  color: #A9C7D6;
  cursor: grab;
}

.item-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 0.5px solid #D8EAF2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.list-item.pool .item-icon-circle {
  background: #EAF6FB;
  border: none;
}

.item-icon-circle i {
  font-size: 16px;
  color: #2F7FB8;
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  color: #1A3A52;
  flex: 1;
}

.remove-btn,
.add-btn {
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.1s, background 0.15s;
}

.remove-btn i {
  font-size: 16px;
  color: #C97A7A;
}

.add-btn {
  background: #EAF6FB;
  width: 28px;
  height: 28px;
}

.add-btn i {
  font-size: 16px;
  color: #2F7FB8;
}

.remove-btn:active,
.add-btn:active {
  transform: scale(0.9);
}

.empty-msg {
  font-size: 13px;
  color: #A9C7D6;
  text-align: center;
  margin-top: 12px;
}

/* ===== レスポンシブ (PC向け) ===== */
@media (min-width: 600px) {
  .app {
    --app-padding: 24px;
    max-width: 520px;
    padding: var(--app-padding);
  }

  .card {
    padding: 22px 26px;
  }

  .fav-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .fav-grid.cols-1 { grid-template-columns: repeat(2, 1fr); }
  .fav-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .fav-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ===== ボトムナビゲーション =====
   ベース色を青にし、白をアクセント(アクティブタブ)として使用
*/
/* PWAとして起動時、ナビバーの水色をセーフエリア分だけ延長する帯。
   中央に細い線を1本入れて、意図的に伸ばしたデザインだと分かるようにする
   (iOSのホームインジケーターのような見た目を意識)。 */
.safe-area-patch {
  display: none;
}
@media (display-mode: standalone) {
  .safe-area-patch {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(135deg, #2F7FB8 0%, #4FA0D8 100%); /* ナビバーと同じ色 */
    z-index: 99;
  }
  body.dark-mode .safe-area-patch {
    background: linear-gradient(135deg, #1A5F8A 0%, #2F7FB8 100%); /* ダークモード時のナビバーと同じ色 */
  }
  .safe-area-patch::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
  }
  body.dark-mode .safe-area-patch::after {
    background: rgba(255, 255, 255, 0.5); /* ダークモードの暗い帯上では少し控えめに */
  }
}
.bottom-btn {
  position: fixed;
  bottom: 0; /* ブラウザ版(タブ表示)はセーフエリア分の余計な浮きを作らない */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 64px;
  display: flex;
  flex-direction: row;
  background: linear-gradient(135deg, #2F7FB8 0%, #4FA0D8 100%);
  border-radius: 20px 20px 0 0; /* 上のみ角丸(元の方針に戻す) */
  box-shadow: 0 -4px 16px rgba(47, 127, 184, 0.35);
  z-index: 100;
  padding: 6px 8px;
  gap: 6px;
}
/* ホーム画面に追加してアプリとして起動している時だけ、
   セーフエリア(ホームインジケーター)分だけバーごと押し上げる */
@media (display-mode: standalone) {
  .bottom-btn {
    bottom: env(safe-area-inset-bottom, 0px);
  }
}

.round-btn-nav {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: 14px;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.round-btn-nav i {
  font-size: 20px;
  transition: transform 0.15s;
}

.round-btn-nav:active {
  transform: scale(0.95);
}

.round-btn-nav.active {
  color: #2F7FB8;
  background: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.round-btn-nav.active i {
  transform: translateY(-1px);
}

/* PCサイズではナビ幅を中央寄せのapp幅に揃える */
@media (min-width: 600px) {
  .bottom-btn {
    max-width: 520px;
  }
}

/* ===== 設定アイコンボタン(ユーザー提供スタイル) ===== */
.round-btn {
  background-color: var(--button-color, #ecae9f);
  border: 1px solid rgb(65, 61, 61);
  font-size: 12px;
  border-radius: var(--border-radius, 120px);
  text-align: var(--text-align, center);
  justify-content: center;
  width: var(--width, 50px);
  height: var(--height, 50px);
  transition: 0.2s;
  align-self: center;
  cursor: pointer;
  padding: 0;
}

.round-btn:active {
  transform: scale(0.95);
}

.round-btn.set-icon {
  background-image: url("./setting_icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-color: transparent;
  border: 0px solid transparent;
}

/* 新設定ボタン: アプリのicon-btnスタイルに統一 */
.icon-btn-setting {
  background: #EEEDFE;
  border: 1.5px solid #8C96F0;
}

.icon-btn-setting svg {
  color: #6C63D4;
  stroke: #6C63D4;
}

/* タグがiのときもフィルターで色を統一 */
.icon-btn-setting i {
  filter: invert(35%) sepia(60%) saturate(600%) hue-rotate(225deg) brightness(90%);
}

.icon-btn-setting:hover { background: #E1DFFC; }

body.dark-mode .icon-btn-setting {
  background: #2A2A4A;
  border-color: #5A5AB0;
}

body.dark-mode .icon-btn-setting svg { stroke: #9A96E0; }
body.dark-mode .icon-btn-setting i {
  filter: invert(70%) sepia(30%) saturate(400%) hue-rotate(210deg);
}

/* ===== 棒グラフ(月別消費金額) ===== */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 110px;
  margin-bottom: 8px;
}

.bar-chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  height: 100%;
}

.bar-chart-val {
  font-size: 11px;
  color: #5A8AA8;
  margin-bottom: 4px;
}

.bar-chart-bar {
  width: 32px;
  border-radius: 6px 6px 0 0;
  background: #2F7FB8;
  transition: height 0.3s;
}

.bar-chart-labels {
  display: flex;
  justify-content: space-around;
}

.bar-chart-label {
  font-size: 11px;
  color: #A9C7D6;
}

.bar-chart-label.active {
  color: #2F7FB8;
  font-weight: 500;
}

/* ===== タブチップ(タスクグループ・カテゴリ選択) ===== */
.tab-chips-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

/* モーダル内のタブチップは overflow:hidden を解除して横スクロールを有効にする */
.modal-box .tab-chips-wrap {
  overflow: visible;
}
.modal-box .tab-chips {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 右端にフェード(スクロール可能を示す) */
.tab-chips-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--fade-bg, #FFFFFF));
  pointer-events: none;
  z-index: 1;
}

body.dark-mode .tab-chips-wrap { --fade-bg: #1E2A36; }

.tab-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 細いスクロールバーを表示(スクロール可能であることを示す) */
  scrollbar-width: thin;
  scrollbar-color: #B9D6E8 transparent;
  margin-bottom: 0;
  padding-bottom: 4px;
  padding-right: 32px; /* フェード分の余白 */
}

.tab-chips::-webkit-scrollbar {
  height: 3px;
}

.tab-chips::-webkit-scrollbar-track {
  background: transparent;
}

.tab-chips::-webkit-scrollbar-thumb {
  background: #B9D6E8;
  border-radius: 999px;
}

body.dark-mode .tab-chips::-webkit-scrollbar-thumb {
  background: #3A5A70;
}

.tab-chip {
  flex-shrink: 0;
  background: #FFFFFF;
  border: 0.5px solid #E3F0F6;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #5A8AA8;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab-chip.active {
  background: #2F7FB8;
  color: #FFFFFF;
  border-color: #2F7FB8;
}

/* カスタムグループのチップ(暖色系で区別) */
.tab-chip.custom-group {
  background: #FBEAE2;
  color: #C0703F;
  border-color: #F4D9CB;
}

.tab-chip.custom-group.active {
  background: #E07B4F;
  color: #FFFFFF;
  border-color: #E07B4F;
}

.tab-chip.add-chip {
  width: 34px;
  flex: 0 0 34px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2F7FB8;
}

/* ===== 検索行 ===== */
.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 0 10px;
  border: 0.5px solid #E3F0F6;
}

.search-box i {
  font-size: 15px;
  color: #A9C7D6;
}

.search-box input {
  border: none;
  background: transparent;
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  outline: none;
  color: #1A3A52;
}

.count-label {
  font-size: 11px;
  color: #A9C7D6;
  margin: 0 0 10px;
  text-align: right;
}

/* ===== タスク一覧行 ===== */
/* ===== タスク行のラッパー(スワイプ削除用) ===== */
.task-row-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.task-row-wrapper.delete-mode .task-row {
  transform: translateX(46px);
  pointer-events: none;
}

.task-row {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0.5px solid #E3F0F6;
  cursor: pointer;
  transition: background 0.15s, transform 0.2s ease;
}

.task-row:hover {
  background: #EAF6FB;
}

.task-row-wrapper.dragging {
  opacity: 0.4;
}

/* ドラッグ並び替え用ハンドル */
.task-grip {
  font-size: 16px;
  color: #C9DCE6;
  cursor: grab;
  touch-action: none;
  padding: 4px;
  flex-shrink: 0;
}

.task-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #B9D6E8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  transition: background 0.15s, border-color 0.15s;
}

.task-check.checked {
  background: #2F7FB8;
  border-color: #2F7FB8;
  color: #FFFFFF;
}

.task-check.checked i {
  font-size: 13px;
}

.task-check.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.task-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EAF6FB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.task-icon-circle i {
  font-size: 16px;
  color: #2F7FB8;
}

.task-row-info {
  flex: 1;
  min-width: 0;
}

.task-row-name {
  font-size: 13px;
  font-weight: 500;
  color: #1A3A52;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-row-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.task-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}

.badge-habit { background: #EAF6FB; color: #2F7FB8; }
.badge-task  { background: #EEEDFE; color: #7F77DD; }
.badge-daily { background: #FAEEDA; color: #BA7517; }
/* カスタムグループは暖色系(ユーザーが追加したものと一目で分かるように) */
.badge-custom { background: #FBEAE2; color: #C0703F; }

.task-row-reward {
  font-size: 12px;
  font-weight: 500;
  color: #2F7FB8;
  white-space: nowrap;
}

/* ===== Wishリスト行 ===== */
.wish-row {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0.5px solid #E3F0F6;
}

.wish-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wish-icon-circle i {
  font-size: 18px;
}

.wish-row-info {
  flex: 1;
  min-width: 0;
}

.wish-row-name {
  font-size: 13px;
  font-weight: 500;
  color: #1A3A52;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wish-row-sub {
  font-size: 11px;
  color: #A9C7D6;
  margin: 0;
}

.wish-row-cost {
  font-size: 13px;
  font-weight: 500;
  color: #1A3A52;
  white-space: nowrap;
}

.achieve-pill {
  background: #2F7FB8;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.1s;
}

.achieve-pill:active {
  transform: scale(0.95);
}

/* ===== 達成履歴行 ===== */
.history-row {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0.5px solid #E3F0F6;
}

.history-row-info {
  min-width: 0;
}

.history-row-name {
  font-size: 13px;
  font-weight: 500;
  color: #1A3A52;
  margin: 0 0 2px;
}

.history-row-date {
  font-size: 11px;
  color: #A9C7D6;
  margin: 0;
}

.history-row-cost {
  font-size: 13px;
  font-weight: 500;
  color: #C97A7A;
  white-space: nowrap;
}

/* ===== ボタン類追加 ===== */
.btn-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

/* 残高横などに置く、幅を持たせない小さめのボタン */
.btn-compact {
  margin-top: 0;
  padding: 0 18px;
  height: 38px;
  white-space: nowrap;
}

/* 履歴・削除などの小さなリンクを並べるグループ */
.mini-link-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 6px;
}

/* 削除など、注意を促すリンク */
.link-btn-danger {
  color: #D9685F;
}

/* 削除モード中の「完了」リンク */
.link-btn-active {
  color: #2F7FB8;
  font-weight: 700;
}

/* 並び替えボタン: 古い順=赤、新しい順=青、カスタム=紫 */
.link-btn-sort-oldest {
  color: #D9685F;
  font-weight: 700;
}
.link-btn-sort-newest {
  color: #2F7FB8;
  font-weight: 700;
}
.link-btn-sort-custom {
  color: #8C96F0;
  font-weight: 700;
}

/* セカンダリボタン(キャンセル・閉じるなど) */
.btn-secondary {
  background: #FFFFFF;
  color: #5A8AA8;
  border: 1px solid #E3F0F6;
  padding: 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}

.btn-secondary:active {
  transform: scale(0.97);
  background: #EAF6FB;
}

.btn-danger {
  background: #FFFFFF;
  color: #C97A7A;
  border: 1px solid #F0D5D5;
  padding: 14px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}

.btn-danger:active {
  transform: scale(0.97);
  background: #FBEFEF;
}

.edit-action-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== タスク編集画面の入力欄 ===== */
.text-input {
  width: 100%;
  border: 0.5px solid #D8EAF2;
  background: #EAF6FB;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1A3A52;
  outline: none;
  transition: box-shadow 0.15s;
}

.text-input:focus {
  box-shadow: 0 0 0 2px #B9D6E8;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 13px;
  color: #1A3A52;
  cursor: pointer;
}

.option-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2F7FB8;
  cursor: pointer;
}

/* ===== Wish画面の残高表示(小さめ) ===== */
#wishBalanceDisplay {
  font-size: 22px;
}

/* ===== Wish画面の小さな残高表示 ===== */
.balance-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
  width: fit-content;
  border: 0.5px solid #E3F0F6;
}

.balance-mini i {
  font-size: 14px;
  color: #2F7FB8;
}

.balance-mini-label {
  font-size: 11px;
  color: #6B8A99;
}

.balance-mini-value {
  font-size: 13px;
  font-weight: 500;
  color: #1A3A52;
}

/* ===== 数値専用入力欄 =====
   type="text" + inputmode="numeric" + JSでのフィルタリングと組み合わせて使用
*/
.numeric-input {
  font-variant-numeric: tabular-nums;
}

/* ===== 達成演出オーバーレイ =====
   テーマ別カラー:
     task  = 寒色(青系)
     wish  = 暖色(オレンジ系)
     daily = 緑系
     goal  = 黄系
*/
.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.celebration-overlay.show {
  display: flex;
}

.celebration-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 45, 0.45);
}

.celebration-box {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  border: 3px solid var(--celeb-color, #2F7FB8);
  animation: celebration-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes celebration-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.celebration-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* 背景をテーマカラー本体(薄色ではなくアクセントカラー)に */
  background: var(--celeb-color, #2F7FB8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: celebration-bounce 0.6s ease-in-out infinite alternate;
}

@keyframes celebration-bounce {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-7px) scale(1.05); }
}

.celebration-icon {
  font-size: 36px;
  width: 36px;
  height: 36px;
  /* アイコンは常に白で、濃い背景上で目立つ */
  filter: brightness(0) invert(1) !important;
}

.celebration-title {
  font-size: 18px;
  font-weight: 700;
  color: #1A3A52;
  margin: 0;
}

.celebration-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--celeb-color, #2F7FB8);
  margin: 0;
}

/* テーマカラー定義 */
.celebration-overlay.theme-task {
  --celeb-color: #2F7FB8;
  --celeb-bg: #E6F1FB;
}

.celebration-overlay.theme-wish {
  --celeb-color: #E07B4F;
  --celeb-bg: #FBEAE2;
}

.celebration-overlay.theme-daily {
  --celeb-color: #1D9E75;
  --celeb-bg: #E1F5EE;
}

.celebration-overlay.theme-goal {
  --celeb-color: #E0A800;
  --celeb-bg: #FBF2D5;
}

/* フラッシュ(達成時に中心から光が広がる効果) */
.celebration-flash-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.celebration-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--celeb-color, #2F7FB8);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.55;
  animation: celebration-flash 0.7s ease-out forwards;
}

@keyframes celebration-flash {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}

/* 紙吹雪(中心からバースト→落下) */
.confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  animation: confetti-burst ease-out forwards;
  will-change: transform, opacity;
}

.confetti-piece.shape-circle {
  border-radius: 50%;
}

.confetti-piece.shape-strip {
  border-radius: 2px;
}

@keyframes confetti-burst {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.4);
    opacity: 1;
  }
  18% {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot1)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(var(--rot2)) scale(0.8);
    opacity: 0;
  }
}

/* ===== トースト通知 ===== */
.toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1A3A52;
  color: #FFFFFF;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1100;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== グループ管理モーダル =====
   タスク画面の「+」チップ・タスク編集画面の「グループを編集」から開く。
*/
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.show {
  display: flex;
}

.modal-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 45, 0.45);
}

.modal-box {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  animation: celebration-pop 0.25s ease-out;
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A3A52;
  margin: 0;
}

.modal-group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FBEAE2;
  border-radius: 8px;
  padding: 10px 12px;
}

.modal-group-item .item-name {
  color: #C0703F;
}

/* グループ名インライン編集 */
.modal-group-item .group-name-input {
  flex: 1;
  font-size: 16px; /* iOSのズーム防止(全テキスト入力共通の統一値) */
  font-weight: 600;
  color: #C0703F;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #E8A6A0;
  outline: none;
  padding: 2px 0;
  min-width: 0;
}

/* iOSのzoom防止: 全テキスト入力のfont-sizeを16px以上に */
.text-input,
.numeric-input {
  font-size: 16px !important;
}

/* 検索入力もzoom防止 */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  font-size: 16px;
}

/* グループ削除用の⊖ボタン(タスク行の削除ボタンと統一したデザイン) */
.modal-remove-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E8A6A0;
  color: #D9685F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s;
}

.modal-remove-btn:active {
  transform: scale(0.9);
}

.modal-add-row {
  display: flex;
  gap: 8px;
}

.modal-add-row .text-input {
  flex: 1;
}

.modal-add-row .btn-primary {
  padding: 0 18px;
  white-space: nowrap;
}

/* ===== Phase 3 追加スタイル ===== */

/* 目標行チェック(達成ボタン) */
.goal-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #D4B800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.goal-check.checked {
  background: #E0A800;
  border-color: #E0A800;
  color: #FFFFFF;
}

.goal-check.checked::after {
  content: "✓";
  font-size: 12px;
  color: #FFFFFF;
}

/* 目標の必要金額(小さく薄く) */
.goal-amount {
  font-size: 11px;
  color: #A9C7D6;
  margin: 2px 0 0;
}

/* 日課カードの右側アクション群 */
.daily-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 小さいアイコンボタン(鉛筆など) */
.icon-btn-small {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.icon-btn-small i {
  font-size: 14px;
}

/* 保存ボタンを画面下部に固定(お気に入り編集画面) */
/* モーダルの補足テキスト */
.modal-desc {
  font-size: 13px;
  color: #5A8AA8;
  margin: -6px 0 8px;
}

/* 日課モーダル: タイトル行（タイトル＋ヒントボタン） */
.modal-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}
.modal-title-row .modal-title {
  margin-bottom: 0;
}

/* ヒントボタン */
.hint-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #5A8AA8;
  background: transparent;
  color: #5A8AA8;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.hint-btn:hover {
  background: #5A8AA8;
  color: #fff;
}

/* ヒントパネル */
.hint-panel {
  display: none;
  background: #F0F8FF;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 4px;
}
.hint-panel.open {
  display: block;
}
.hint-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: #2B6CB0;
  margin: 0 0 10px;
}
.hint-panel-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.hint-panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hint-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  min-width: 56px;
  text-align: center;
}
.hint-badge-orange {
  background: #FEF0E0;
  color: #B7650A;
}
.hint-badge-red {
  background: #FDE8E8;
  color: #C53030;
}
.hint-panel-text {
  font-size: 13px;
  color: #2D4A6A;
}
.hint-panel-note {
  font-size: 11px;
  color: #7A9BB0;
  margin: 0;
}

/* ダークモード対応 */
body.dark-mode .hint-btn {
  border-color: #5A8AA8;
  color: #5A8AA8;
}
body.dark-mode .hint-btn:hover {
  background: #5A8AA8;
  color: #1A2A3A;
}
body.dark-mode .hint-panel {
  background: #1A2E40;
}
body.dark-mode .hint-panel-title { color: #7ABFDF; }
body.dark-mode .hint-panel-text  { color: #A8CCDF; }
body.dark-mode .hint-panel-note  { color: #5A7A8A; }
body.dark-mode .hint-badge-orange { background: #3A2510; color: #F0A855; }
body.dark-mode .hint-badge-red    { background: #3A1515; color: #F08080; }

/* ご褒美: 当日達成済み */
.wish-treat-done {
  opacity: 0.55;
}
.wish-treat-done .task-row-name {
  text-decoration: line-through;
}

/* 月内再設定コスト注記 */
.modal-cost-note {
  font-size: 12px;
  color: #C0703F;
  background: #FBEAE2;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.6;
  margin-top: 4px;
}

/* 目標選択モーダルのリスト項目 */
.goal-wish-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 0.5px solid #E3F0F6;
  cursor: pointer;
  transition: background 0.15s;
}

.goal-wish-item:hover {
  background: #EAF6FB;
}

.goal-wish-item.selected {
  border-color: #E0A800;
  background: #FBF2D5;
}

.goal-wish-item-info {
  flex: 1;
  min-width: 0;
}

.goal-wish-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #1A3A52;
  margin: 0 0 2px;
}

.goal-wish-item-cost {
  font-size: 11px;
  color: #A9C7D6;
  margin: 0;
}

/* お気に入り編集のグループチップ */
#favGroupChips {
  margin-bottom: 8px;
}

/* ===== アイコン選択UI ===== */
.icon-preview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.icon-preview-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #EAF6FB;
  border: 1.5px solid #D8EAF2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
}

.icon-preview-circle i {
  font-size: 24px;
  width: 24px;
  height: 24px;
  filter: invert(39%) sepia(73%) saturate(500%) hue-rotate(175deg);
}

/* アイコンピッカーグリッド */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.icon-picker-item {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid #E3F0F6;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-size: 20px;
}

.icon-picker-item i {
  width: 20px;
  height: 20px;
  font-size: 20px;
  filter: invert(39%) sepia(73%) saturate(500%) hue-rotate(175deg);
}

.icon-picker-item:hover {
  background: #EAF6FB;
  border-color: #B9D6E8;
}

.icon-picker-item.selected {
  background: #2F7FB8;
  border-color: #2F7FB8;
}

.icon-picker-item.selected i {
  filter: brightness(0) invert(1);
}

.icon-picker-item:active {
  transform: scale(0.9);
}

/* ===== Phase 4 / UI修正 ===== */

/* 行右端の編集ボタン */
.row-edit-btn {
  background: none;
  border: none;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.row-edit-btn i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  filter: invert(55%) sepia(20%) saturate(400%) hue-rotate(175deg);
}

.row-edit-btn:hover { background: #EAF6FB; }
.row-edit-btn:active { transform: scale(0.9); }

.row-timer-btn {
  background: none;
  border: none;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.row-timer-btn i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  filter: invert(55%) sepia(60%) saturate(500%) hue-rotate(345deg);
}
.row-timer-btn:hover { background: #FBEFEA; }
.row-timer-btn:active { transform: scale(0.9); }

/* --- 達成チェックの視認性改善 --- */

/* 1日1回 達成済み: 白チェックマーク on 濃い青 */
.task-check.checked {
  background: #1A5F8A;
  border-color: #1A5F8A;
}

.task-check.checked i {
  font-size: 14px;
  width: 14px;
  height: 14px;
  /* 白 */
  filter: brightness(0) invert(1);
}

/* Task達成(removeOnDone=true だが一瞬表示): 水色チェック on 薄い水色 */
.task-check.done-task {
  background: #B9D6E8;
  border-color: #7FBCD8;
}

.task-check.done-task i {
  font-size: 14px;
  width: 14px;
  height: 14px;
  /* 白 */
  filter: brightness(0) invert(1);
}

/* ドラッグハンドルを細めに(editボタンと干渉しない) */
.task-grip {
  padding: 4px 2px;
}

/* Wish グラフをコンパクト */
.bar-chart-sm {
  height: 70px !important;
}

/* wish-graph-card のpaddingを少し詰める */
.wish-graph-card {
  padding: 12px 16px;
  margin-bottom: 10px;
}

/* 目標達成チェックの強調 */
.goal-check {
  cursor: pointer;
  transition: transform 0.1s;
}

.goal-check:active { transform: scale(0.88); }

/* お気に入り達成済みアイコン: もっと濃い青で強調 */
.fav-icon-circle.fav-icon-done {
  background: #1A5F8A;
  box-shadow: 0 2px 6px rgba(26,95,138,0.35);
}


/* 習慣・Task達成済みのお気に入りアイコン(水色) */
.fav-icon-circle.fav-icon-soft {
  background: #B9D6E8;
  border: 1.5px solid #7FBCD8;
}
.fav-icon-circle.fav-icon-soft i {
  filter: brightness(0) invert(1);
}

/* ===== Wish行のアイコン =====
   タスクアイコンより少し小さめでWishテーマ色(暖色系) */
.wish-icon-circle {
  background: #FBEAE2 !important;
}
.wish-icon-circle i {
  filter: invert(45%) sepia(60%) saturate(500%) hue-rotate(340deg) brightness(95%) !important;
}

/* Wish金額(消費=暖色、無料=薄グレー) */
.wish-cost { color: #C0703F !important; }

/* Wishグループバッジ(デフォルトグループは薄い暖色) */
.badge-wish-group {
  background: #FBF2D5;
  color: #9A7214;
}

/* Wishカテゴリ表示 */
.badge-wish-goal  { background: #EEEDFE; color: #7F77DD; }

/* ===== 設定画面 ===== */
.setting-desc {
  font-size: 11px;
  color: #A9C7D6;
  margin: 2px 0 10px;
}

.drive-sync-status {
  font-size: 11px;
  margin: -4px 0 10px;
  min-height: 14px;
  transition: color .2s ease;
  color: #A9C7D6;
}
.drive-sync-status.is-saving { color: #A9C7D6; }
.drive-sync-status.is-saved  { color: #1D9E75; }
.drive-sync-status.is-error  { color: #D9685F; }

.setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid #F0F7FC;
}

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

.setting-label {
  font-size: 13px;
  color: #1A3A52;
  flex: 1;
}

.setting-value {
  font-size: 12px;
  color: #5A8AA8;
  min-width: 32px;
  text-align: right;
}

/* トグルスイッチ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input { display: none; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #D8EAF2;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.toggle-switch input:checked + .toggle-slider {
  background: #2F7FB8;
}

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

/* 音量スライダー */
.volume-slider {
  flex: 1;
  accent-color: #2F7FB8;
  height: 4px;
}

/* 危険ゾーンカード */
.card-danger {
  border: 1px solid #FBDDD9;
}

/* ===== 履歴画面 ===== */
.history-tabs {
  display: flex;
  gap: 0;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
  border: 0.5px solid #E3F0F6;
}

.history-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: #A9C7D6;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.history-tab.active {
  background: #2F7FB8;
  color: #FFFFFF;
}

.hist-tab-content { display: none; }
.hist-tab-content.active { display: block; }

/* LocalStorage保存ステータス表示 */
.save-status {
  font-size: 11px;
  color: #A9C7D6;
  text-align: right;
  padding: 4px 0 8px;
}

/* ===== ダークモード ===== */
body.dark-mode {
  background: #121820;
  color: #D0E4EF;
}

body.dark-mode .app { background: #121820; }

body.dark-mode .card,
body.dark-mode .modal-box,
body.dark-mode .history-tabs,
body.dark-mode .task-row,
body.dark-mode .wish-row,
body.dark-mode .list-item.current,
body.dark-mode .goal-row,
body.dark-mode .daily-card,
body.dark-mode .fav-card {
  background: #1E2A36;
  border-color: #2D3D4E;
}

body.dark-mode .balance-mini,
body.dark-mode .icon-btn,
body.dark-mode .search-box,
body.dark-mode .tab-chip {
  background: #1E2A36;
  border-color: #2D3D4E;
  color: #A9C7D6;
}

body.dark-mode .tab-chip.active { background: #2F7FB8; color: #FFFFFF; border-color: #2F7FB8; }

/* フォルダ・自作タグ(暖色系)はダークモードでも青にせず、暖色のまま保つ */
body.dark-mode .tab-chip.custom-group {
  background: #3A2A1E;
  color: #E0956B;
  border-color: #4A3527;
}
body.dark-mode .tab-chip.custom-group.active {
  background: #C77B48;
  color: #FFFFFF;
  border-color: #C77B48;
}
body.dark-mode .tab-chip.folder-chip i:not(.folder-caret) {
  background-color: #E0956B;
}

body.dark-mode .balance,
body.dark-mode .goal-name,
body.dark-mode .goal-amount,
body.dark-mode .goal-text .label,
body.dark-mode .daily-name,
body.dark-mode .task-row-name,
body.dark-mode .item-name,
body.dark-mode .edit-title,
body.dark-mode .modal-title,
body.dark-mode .balance-mini-value,
body.dark-mode .history-tab,
body.dark-mode .setting-label,
body.dark-mode .option-row span,
body.dark-mode .fav-card span,
body.dark-mode .goal-wish-item-name { color: #D0E4EF; }

body.dark-mode .label,
body.dark-mode .sub-label,
body.dark-mode .section-title,
body.dark-mode .count-label,
body.dark-mode .bar-chart-val,
body.dark-mode .bar-chart-label { color: #7A9BB0; }

body.dark-mode .task-icon-circle,
body.dark-mode .fav-icon-circle,
body.dark-mode .goal-icon,
body.dark-mode .daily-icon,
body.dark-mode .icon-preview-circle { background: #243140; }

body.dark-mode .goal-row { background: #243140; }
body.dark-mode .bar-chart-bar { filter: brightness(0.85); }

body.dark-mode .text-input,
body.dark-mode .search-box input { background: #243140; border-color: #2D3D4E; color: #D0E4EF; }
body.dark-mode .text-input::placeholder { color: #4A6A80; }

body.dark-mode .bottom-btn { background: linear-gradient(135deg, #1A5F8A 0%, #2F7FB8 100%); }

body.dark-mode .sticky-header { background: #121820; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }

body.dark-mode .modal-overlay::before { background: rgba(0,10,20,0.65); }

body.dark-mode .setting-row { border-bottom-color: #2D3D4E; }
body.dark-mode .card-danger { border-color: #4A2A2A; }

body.dark-mode .history-tab { color: #7A9BB0; }
body.dark-mode .history-tab.active { background: #2F7FB8; color: #FFFFFF; }

/* ダークモード: add-chip(+)を白に */
body.dark-mode .tab-chip.add-chip { color: #FFFFFF; }
body.dark-mode .tab-chip.add-chip i { filter: brightness(0) invert(1); }

/* 通常モード: 追加ボタン(+追加)のアイコンも白に */
.btn-primary .ti,
.btn-primary i { filter: brightness(0) invert(1) !important; }

/* 設定・履歴画面: .appのpaddingを上側だけ無効化してsticky-headerが最上部に */
#settings.screen.active,
#historyScreen.screen.active {
  margin-top: calc(-1 * var(--app-padding));
  padding-top: 0;
}

/* sticky-headerは.appのpadding分だけ左右の計算がずれるので補正 */
#settings .sticky-header,
#historyScreen .sticky-header {
  margin-left: calc(-1 * var(--app-padding));
  margin-right: calc(-1 * var(--app-padding));
  padding-left: var(--app-padding);
  padding-right: var(--app-padding);
  width: calc(100% + var(--app-padding) * 2);
  box-sizing: border-box;
}

/* ===== ログイン画面 ===== */
#loginScreen.screen.active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin-top: 0;
}

.login-wrap {
  width: 100%;
  max-width: 360px;
  padding: 24px 0;
}

.login-logo {
  text-align: center;
  margin-bottom: 24px;
}

.login-logo-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2F7FB8, #4FA0D8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 32px;
  box-shadow: 0 6px 20px rgba(47,127,184,0.35);
}

.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-logo-icon i {
  width: 32px;
  height: 32px;
  font-size: 32px;
  filter: brightness(0) invert(1);
}

.login-app-name {
  font-size: 26px;
  font-weight: 700;
  color: #1A3A52;
  margin: 0 0 4px;
}

.login-app-sub {
  font-size: 13px;
  color: #6B8A99;
  margin: 0;
}

.login-tabs {
  display: flex;
  gap: 0;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
  border: 0.5px solid #E3F0F6;
}

.login-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 500;
  color: #A9C7D6;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.login-tab.active {
  background: #2F7FB8;
  color: #FFFFFF;
}

.login-error {
  font-size: 12px;
  color: #D9685F;
  background: #FBEFEF;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: #A9C7D6;
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E3F0F6;
}

/* ログイン画面のチュートリアル案内(小さく・でも目に留まりやすい位置) */
.login-tutorial-hint {
  margin-top: 16px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: #6B7C8C;
}
.login-tutorial-hint a {
  color: #2F7FB8;
  font-weight: 700;
  text-decoration: none;
}
body.dark-mode .login-tutorial-hint { color: #7A9BB0; }
body.dark-mode .login-tutorial-hint a { color: #6FB5E0; }

/* 設定画面のチュートリアル導線カード */
.settings-tutorial-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.settings-tutorial-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2F7FB8, #4FA0D8);
  font-size: 18px;
  flex-shrink: 0;
}
.settings-tutorial-link-icon i { filter: brightness(0) invert(1); } /* SVGアイコンはcurrentColor非対応のため反転で白にする */
.settings-tutorial-link-title { font-size: 14px; font-weight: 700; color: #1A3A52; }
.settings-tutorial-link-sub { font-size: 11.5px; color: #6B7C8C; margin-top: 2px; }
.settings-tutorial-link-arrow { color: #B9D6E6; font-size: 16px; margin-left: auto; flex-shrink: 0; }
body.dark-mode .settings-tutorial-link-title { color: #EAF6FB; }
body.dark-mode .settings-tutorial-link-sub { color: #7A9BB0; }

.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px;
  border: 1.5px solid #E3F0F6;
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  color: #1A3A52;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn-google:hover { background: #F5F9FC; }
.btn-google:active { transform: scale(0.98); }

.btn-skip {
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  font-size: 12px;
  color: #A9C7D6;
  cursor: pointer;
  margin-top: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ダークモード対応 */
body.dark-mode .login-app-name  { color: #D0E4EF; }
body.dark-mode .login-app-sub   { color: #7A9BB0; }
body.dark-mode .btn-google      { background: #1E2A36; border-color: #2D3D4E; color: #D0E4EF; }
body.dark-mode .login-tabs      { background: #1E2A36; border-color: #2D3D4E; }
body.dark-mode .login-tab       { color: #7A9BB0; }

/* ===== ダークモード追加修正 ===== */

/* 目標選択: 選択中の項目テキストを暗めに(黄背景上で読めるよう) */
body.dark-mode .goal-wish-item.selected {
  background: #3A3000;
  border-color: #C8940A;
}
body.dark-mode .goal-wish-item.selected .goal-wish-item-name {
  color: #E8C840 !important;
}
body.dark-mode .goal-wish-item.selected .goal-wish-item-cost {
  color: #A88E30;
}

/* グループ管理モーダルの項目テキスト(暖色背景上で読めるよう) */
body.dark-mode .modal-group-item {
  background: #3A1E10;
  border: 0.5px solid #6A3820;
}
body.dark-mode .modal-group-item .item-name {
  color: #E8A070 !important;
}

/* タスク/Wishの追加・編集モーダルのラベル */
body.dark-mode .modal-box .sub-label,
body.dark-mode .modal-box .modal-desc { color: #7A9BB0; }

/* ===== 履歴取り消しボタン ===== */
.history-undo-btn {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}

.history-undo-btn i {
  font-size: 18px;
  width: 18px;
  height: 18px;
  filter: invert(55%) sepia(20%) saturate(400%) hue-rotate(175deg);
}

.history-undo-btn:hover { background: #EAF6FB; }
.history-undo-btn:active { transform: scale(0.9); }

body.dark-mode .history-undo-btn:hover { background: #243140; }

/* ===== グループタブのドラッグ並び替え ===== */
.tab-chip.dragging-chip { opacity: 0.4; }
.tab-chip.chip-armed {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(23, 56, 74, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* ===== グループの「フォルダ」機能 ===== */

/* タブバー上のフォルダチップ */
.tab-chip.folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-chip.folder-chip i:not(.folder-caret) {
  background-image: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l3%203h7a1%201%200%200%201%201%201v8a1%201%200%200%201-1%201h-14a1%201%200%200%201-1-1v-11a1%201%200%200%201%201-1%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l3%203h7a1%201%200%200%201%201%201v8a1%201%200%200%201-1%201h-14a1%201%200%200%201-1-1v-11a1%201%200%200%201%201-1%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #C0703F; /* フォルダタイトル(未選択)と同じ橙色 */
}
.tab-chip.folder-chip.active i:not(.folder-caret) {
  background-color: #FFFFFF; /* フォルダタイトル(選択時)と同じ白色 */
}
.tab-chip.folder-chip .folder-chip-name {
  white-space: nowrap;
}
.tab-chip.folder-chip .folder-caret {
  font-size: 12px;
  opacity: 0.7;
}

/* フォルダ展開時に出てくる2段目のサブグループ行 */
.folder-sub-wrap {
  margin-top: -6px;
}
.tab-chips.folder-sub-chips {
  padding-left: 8px;
  border-left: 2px solid #F4D9CB;
}
.tab-chip.sub-chip {
  font-size: 11px;
  padding: 6px 12px;
}
.folder-empty-hint {
  font-size: 11px;
  color: #9BB6C4;
  white-space: normal;
  padding: 6px 4px;
  line-height: 1.5;
}

/* タスク/Wish行をドラッグしてグループタブの上に来た時のハイライト */
.tab-chip.chip-drop-target {
  background: #2F7FB8 !important;
  color: #FFFFFF !important;
  border-color: #2F7FB8 !important;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(47, 127, 184, 0.4);
}
.tab-chip.custom-group.chip-drop-target,
.tab-chip.folder-chip.chip-drop-target {
  background: #E07B4F !important;
  border-color: #E07B4F !important;
  box-shadow: 0 2px 8px rgba(224, 123, 79, 0.4);
}

/* グループ編集モーダル: フォルダのヘッダー行 */
.modal-folder-header {
  background: #FFF3EC;
  border: 1px solid #F4D9CB;
  margin-bottom: 4px;
}
.modal-folder-header.dragging { opacity: 0.4; }

/* グループ編集モーダル: フォルダの中身ボックス(インデント表示) */
.modal-folder-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px 20px;
  padding: 8px;
  border-left: 2px dashed #E8C4B0;
  min-height: 12px;
}
.modal-folder-body.modal-root-list {
  margin-left: 0;
  border-left: none;
  padding: 0;
}
.modal-folder-body .modal-group-item { margin: 0; }
.modal-folder-body .folder-empty-hint {
  color: #B49B8C;
  font-size: 12px;
  padding: 4px 2px;
}
.modal-root-label {
  margin: 4px 0 4px 2px !important;
}

body.dark-mode .modal-folder-header {
  background: #3A1E10;
  border-color: #6A3820;
}
body.dark-mode .modal-folder-body {
  border-left-color: #6A3820;
}
body.dark-mode .folder-sub-chips {
  border-left-color: #6A3820;
}

/* ===== ドラッグ中に指/カーソルへ追従する「浮くゴースト」 ===== */
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -130%) rotate(-3deg);
  pointer-events: none;
  z-index: 9999;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(20, 60, 90, 0.25);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2F7FB8;
  border: 1.5px solid #2F7FB8;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.08s ease-out;
}
.drag-ghost i { font-size: 16px; flex-shrink: 0; }
.drag-ghost.ghost-drop-ready {
  transform: translate(-50%, -130%) rotate(-3deg) scale(1.12);
  background: #2F7FB8;
  color: #FFFFFF;
}
.drag-ghost.ghost-folder,
.drag-ghost.ghost-group {
  color: #C0703F;
  border-color: #E8A6A0;
}

body.dark-mode .drag-ghost {
  background: #1E2A36;
  color: #7FC4EE;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
body.dark-mode .drag-ghost.ghost-folder,
body.dark-mode .drag-ghost.ghost-group {
  color: #E8A070;
}

/* グループ管理モーダル: ドラッグ中に重なっているフォルダの中身エリアを強調 */
.modal-folder-body.folder-body-target {
  border-left-color: #2F7FB8;
  background: #EAF6FB;
}
body.dark-mode .modal-folder-body.folder-body-target {
  background: #1E2A36;
  border-left-color: #7FC4EE;
}

/* ===== 右下固定の追加ボタン(FAB) ===== */
.fab-add-btn {
  position: fixed;
  right: max(20px, calc(50vw - 240px + 20px));
  bottom: var(--fab-bottom-offset);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2F7FB8 0%, #4FA0D8 100%);
  color: #FFFFFF;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(47, 127, 184, 0.45);
  cursor: pointer;
  z-index: 90;
  transition: transform 0.1s;
}
.fab-add-btn:active { transform: scale(0.92); }
.fab-add-btn .ti-plus {
  /* アイコンはbackground-image(SVG)方式なのでcolorでは効かない。
     filterで常に白にする(ダークモードでも白のまま)。 */
  filter: brightness(0) invert(1);
}

/* ===== 一括削除ボタン(FABの左隣に固定、削除モード中のみ表示) ===== */
.bulk-delete-btn {
  position: fixed;
  right: max(20px, calc(50vw - 240px + 20px));
  transform: translateX(-72px);
  bottom: var(--fab-bottom-offset);
  height: 56px;
  padding: 0 18px;
  border-radius: 28px;
  border: none;
  background: #D9685F;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(217, 104, 95, 0.45);
  cursor: pointer;
  z-index: 90;
  transition: transform 0.1s;
}
.bulk-delete-btn:active { transform: translateX(-72px) scale(0.94); }

body.dark-mode .fab-add-btn {
  background: linear-gradient(135deg, #1A5F8A 0%, #2F7FB8 100%);
}

/* ===== 連続入力(クイック追加)行 ===== */
.quick-add-row-wrapper { display: flex; align-items: center; }
.quick-add-row {
  flex: 1;
  border: 1.5px dashed #B9D6E8;
  background: #F5FBFD;
}
body.dark-mode .quick-add-row {
  border-color: #3A5A70;
  background: #16232E;
}
.quick-add-info { flex: 1; min-width: 0; }
.quick-add-name-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 16px; /* iOSのズーム防止 */
  font-weight: 600;
  color: #17384A;
  padding: 4px 0;
}
.quick-add-name-input:focus { outline: none; }
body.dark-mode .quick-add-name-input { color: #DCEEF7; }

.quick-add-reward-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  background: #EAF6FB;
  border-radius: 8px;
  padding: 4px 8px;
}
body.dark-mode .quick-add-reward-wrap { background: #1E2A36; }
.quick-add-yen { font-size: 13px; color: #6E96A8; }
.quick-add-reward-input {
  width: 64px;
  border: none;
  background: transparent;
  font-size: 16px; /* iOSのズーム防止 */
  font-weight: 600;
  color: #2F7FB8;
  text-align: right;
  padding: 2px 0;
}
.quick-add-reward-input:focus { outline: none; }

/* ===== 「ファイル」機能(タグごとに項目を直接まとめる入れ物、リマインダー風の縦並びリスト) ===== */
.file-strip-wrap {
  position: relative;
  margin-bottom: 12px;
}
/* 非表示ファイルがあるときだけ、右上バッジ分の余白を確保する(JS側でクラス付与) */
.file-strip-wrap.has-hidden-files {
  padding-top: 24px;
}

.file-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.file-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #EAF6FB;
  border: 1px solid #D2E9F3;
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #17384A;
  cursor: pointer;
  user-select: none;
  text-align: left;
  width: 100%;
  min-width: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.file-row-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2F7FB8;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-row-icon i { font-size: 14px; filter: brightness(0) invert(1); }
.file-row-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-row-count {
  flex-shrink: 0;
  font-size: 12px;
  color: #6E96A8;
}
.file-row-chevron {
  flex-shrink: 0;
  font-size: 14px;
  color: #A9C7D6;
}
.file-row.active {
  background: #2F7FB8;
  border-color: #2F7FB8;
  color: #FFFFFF;
}
.file-row.active .file-row-icon { background: #FFFFFF; }
.file-row.active .file-row-icon i { filter: none; }
.file-row.active .file-row-count,
.file-row.active .file-row-chevron { color: #EAF6FB; }
.file-row-chevron { transition: transform 0.15s; }
.file-row.active .file-row-chevron { transform: rotate(90deg); }

.file-row.edit-mode {
  grid-column: 1 / -1;
  cursor: default;
  background: #FFFFFF;
  border-color: #E3F0F6;
}
.file-row .file-name-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  border-bottom: 1px solid #B9D6E8;
  background: transparent;
  font-size: 16px; /* iOSのズーム防止(全テキスト入力共通の統一値) */
  color: #17384A;
  padding: 4px 0;
}
.file-row .file-name-input:focus { outline: none; border-bottom-color: #2F7FB8; }
.file-row .file-remove-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.file-row .file-remove-btn i { filter: invert(30%) sepia(80%) saturate(600%) hue-rotate(320deg); }
body.dark-mode .file-row .file-remove-btn i { filter: brightness(0) invert(1); }

/* ファイルの表示/非表示トグル(編集モード中のみ表示。⊖削除ボタンの隣) */
.file-row .file-hide-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.file-row .file-hide-btn i { font-size: 15px; filter: invert(45%) sepia(15%) saturate(500%) hue-rotate(160deg); }
body.dark-mode .file-row .file-hide-btn i { filter: brightness(0) invert(1); opacity: 0.75; }

/* 非表示に設定されているファイル(編集モード中は薄く表示して区別する) */
.file-row.file-hidden { opacity: 0.5; }

/* 非表示ファイルがあることを知らせるバッジ(タップでファイル編集モードに入る)
   フル幅の1行を占有せず、ファイル一覧の右上に小さく重ねて表示する */
.file-hidden-hint {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  background: #EAF6FB;
  border: 1px solid #D2E9F3;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 11px;
  color: #6E96A8;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.file-hidden-hint i { font-size: 12px; }
body.dark-mode .file-hidden-hint {
  color: #6E96A8;
  background: #1E2A36;
  border-color: #2A3B48;
}

.file-add-row {
  grid-column: 1 / -1;
  color: #2F7FB8;
  background: #FFFFFF;
  border: 1.5px dashed #B9D6E8;
}
.file-add-icon {
  background: #2F7FB8;
  color: #FFFFFF;
}

.file-row.chip-drop-target {
  background: #2F7FB8 !important;
  color: #FFFFFF !important;
  border-color: #2F7FB8 !important;
  transform: scale(1.02);
}

/* 長押しで出すファイルの色選択ポップオーバー */
.file-color-picker {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 132px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid #D2E9F3;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(23, 56, 74, 0.18);
  top: calc(100% + 4px);
  left: 0;
}
.file-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}
.file-color-swatch.selected {
  border-color: #17384A;
}
body.dark-mode .file-color-picker {
  background: #16232E;
  border-color: #2B4256;
}
body.dark-mode .file-color-swatch.selected { border-color: #DCEEF7; }

body.dark-mode .file-row {
  background: #16232E;
  border-color: #2B4256;
  color: #DCEEF7;
}
body.dark-mode .file-row-count { color: #6E96A8; }
body.dark-mode .file-row-chevron { color: #3A5A70; }
body.dark-mode .file-row.active {
  background: #2F7FB8;
  color: #FFFFFF;
}
body.dark-mode .file-row.edit-mode {
  background: #1E2A36;
  border-color: #2B4256;
}
body.dark-mode .file-row .file-name-input {
  color: #DCEEF7;
  border-bottom-color: #3A5A70;
}
body.dark-mode .file-add-row {
  background: #16232E;
  border-color: #3A5A70;
  color: #7FC4EE;
}

/* タスク/Wish行: ファイル編集モード中のチェックボックス
   (削除モードの⊖ボタンと同じスライド式の見せ方を踏襲する) */
.task-file-checkbox {
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  z-index: 1;
  transition: left 0.2s ease;
  accent-color: #2F7FB8;
  cursor: pointer;
}
.task-row-wrapper.file-edit-mode .task-file-checkbox { left: 6px; }
.task-row-wrapper.file-edit-mode .task-row {
  transform: translateX(46px);
  /* 達成・編集・タイマーはJS側で無効化した上で、行全体をドラッグの起点にできるようにする */
  cursor: grab;
}

/* タスク/Wish行: 削除モード中のチェックボックス(一括削除用)
   ファイル編集モードのチェックボックスと同じスライド式の見せ方だが、
   誤操作防止のため即削除ではなくチェック→まとめて削除の方式にする */
.task-delete-checkbox {
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  z-index: 1;
  transition: left 0.2s ease;
  accent-color: #D9685F;
  cursor: pointer;
}
.task-row-wrapper.delete-mode .task-delete-checkbox { left: 6px; }


/* =========================================================
   通知設定UI (notification.js)
   ========================================================= */

/* 通知カード */
.notif-card {
  margin-top: 0;
}

/* 通知ヘッダー行（ラベル + トグル） */
.notif-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 展開ボディ */
.notif-body {
  padding-top: 2px;
}

/* 日付・時刻 input 共通ベース
   .text-input を継承せず独自定義（はみ出し防止）
   width:100% + box-sizing:border-box でカード内に収める */
.notif-date-input,
.notif-time-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  padding: 10px 12px;
  border: 1.5px solid #D8EAF2;
  border-radius: 10px;
  background: #F5FBFE;
  color: #1A3A52;
  outline: none;
  color-scheme: light;
  /* iOS のデフォルト装飾をリセット */
  -webkit-appearance: none;
  appearance: none;
}

.notif-date-input:focus,
.notif-time-input:focus {
  border-color: #2F7FB8;
}

/* 複数日程リスト(繰り返し「なし」のとき) */
.notif-dates-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.notif-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-date-row .notif-date-input { flex: 1; }
.notif-date-remove-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E8A6A0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
}
.notif-date-remove-btn i { filter: invert(30%) sepia(80%) saturate(600%) hue-rotate(320deg); }
body.dark-mode .notif-date-remove-btn {
  background: #1E2A36;
  border-color: #5A3B3B;
}

/* 設定画面のデフォルト時刻 inputは幅を auto に */
#settingDefaultReminderTime {
  display: inline-block;
  width: auto;
  min-width: 130px;
}

/* カレンダー追加行 */
.notif-calendar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.notif-divider {
  height: 0.5px;
  background: #F0F7FC;
  margin: 14px 0;
}
body.dark-mode .notif-divider { background: #2D3D4E; }

.notif-memo-input {
  width: 100%;
  border: 0.5px solid #D8EAF2;
  background: #EAF6FB;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px; /* iOSのズーム防止 */
  color: #17384A;
  resize: vertical;
  font-family: inherit;
}
.notif-memo-input:focus { outline: none; border-color: #2F7FB8; }
body.dark-mode .notif-memo-input {
  background: #1A2A38;
  border-color: #2D3D4E;
  color: #C8DFE8;
}

.notif-calendar-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0; /* flex子要素のテキスト折り返し保証 */
}

.notif-calendar-hint {
  font-size: 11px;
  color: #A9C7D6;
  line-height: 1.4;
}

/* ダークモード対応 */
body.dark-mode .notif-date-input,
body.dark-mode .notif-time-input {
  background: #1A2A38;
  border-color: #2D3D4E;
  color: #C8DFE8;
  color-scheme: dark;
}

body.dark-mode .notif-date-input:focus,
body.dark-mode .notif-time-input:focus {
  border-color: #5BA3D0;
}

body.dark-mode .notif-calendar-hint {
  color: #4D6B80;
}

/* =========================================================
   集中モード / タイマーモード
   ========================================================= */

/* ホーム画面: 起動ボタン(2列) */
.mode-launch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.mode-launch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.1s;
}
.mode-launch-btn:active { transform: scale(0.97); }
.mode-launch-btn i { font-size: 26px; }
.mode-launch-btn i { filter: brightness(0) invert(1); }
.mode-launch-focus {
  background: linear-gradient(135deg, #E07B4F 0%, #F2A65A 100%);
}
.mode-launch-timer {
  background: linear-gradient(135deg, #2F7FB8 0%, #4FA0D8 100%);
}
.mode-launch-btn.disabled,
.mode-launch-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ===== キャラクターナビ =====
   ホーム画面最下部に常駐するミニキャラのセリフ表示。
   .screens の padding-bottom(84px、ナビバーとの隙間確保用)は
   一切変更しないことで、このバー自体の高さ分だけ自然に
   ホーム画面が伸びる形にしている(ナビバーとの余白は保たれる)。 */
.character-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #FFFFFF;
  border: none;
  border-radius: 18px;
  padding: 10px 14px 10px 10px;
  margin-top: 4px;
  box-shadow: 0 2px 10px rgba(47, 127, 184, 0.12);
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s;
}
.character-bar:active { transform: scale(0.98); }
body.dark-mode .character-bar { background: #16232D; }

.character-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}

.character-bubble {
  position: relative;
  flex: 1;
  background: #EAF6FB;
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 20px;
}
.character-bubble::before {
  /* 吹き出しの三角(左向き) */
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 7px 6px 0;
  border-style: solid;
  border-color: transparent #EAF6FB transparent transparent;
}
body.dark-mode .character-bubble { background: #1E2A36; }
body.dark-mode .character-bubble::before { border-color: transparent #1E2A36 transparent transparent; }

.character-bubble-text {
  font-size: 13px;
  line-height: 1.5;
  color: #1A3A52;
}
body.dark-mode .character-bubble-text { color: #EAF6FB; }

/* クールタイム中の表示(集中モード確認画面) */
.mode-cooldown-countdown {
  font-size: 40px;
  font-weight: 800;
  text-align: center;
  color: #E07B4F;
  margin: 10px 0 4px;
  letter-spacing: 1px;
}

/* タイマー形式: 時/分 入力 */


/* 設定画面: 「細かい設定」折りたたみ */
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.collapsible-header i {
  transition: transform 0.2s;
}
.collapsible-header.open i {
  transform: rotate(180deg);
}

/* =====  実行中画面(集中モード/タイマーモード共通) ===== */
.mode-active-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 24px;
}

.mode-active-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary, #6B7C8C);
  letter-spacing: 1px;
}

.mode-timer-ring-wrap {
  position: relative;
  width: 240px;
  height: 240px;
}
.mode-timer-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.mode-timer-ring-bg {
  fill: none;
  stroke: rgba(120, 140, 160, 0.18);
  stroke-width: 14;
}
.mode-timer-ring-fg {
  fill: none;
  stroke: #2F7FB8;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 628.3;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.2s linear;
}
.mode-timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mode-timer-time {
  font-size: 40px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.mode-timer-reward {
  font-size: 15px;
  font-weight: 700;
  color: #E0A800;
}

.mode-active-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
.mode-pause-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 28px;
  border: none;
  background: #EDF3F7;
  color: #2F7FB8;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.mode-pause-btn i { filter: invert(45%) sepia(30%) saturate(700%) hue-rotate(175deg); }
.mode-pause-btn:active { transform: scale(0.96); }

.mode-paused-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mode-resume-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 28px;
  border: none;
  background: linear-gradient(135deg, #2F7FB8 0%, #4FA0D8 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.mode-resume-btn i { filter: brightness(0) invert(1); }
.mode-abort-btn {
  padding: 14px 24px;
  border-radius: 28px;
  border: 1.5px solid #E8A6A0;
  background: #FFFFFF;
  color: #D9685F;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

body.dark-mode .mode-active-wrap { background: #0F1B24; }
body.dark-mode .mode-pause-btn { background: #16232E; color: #7FB8DA; }
body.dark-mode .mode-abort-btn { background: #16232E; border-color: #4A2E2C; color: #E8968C; }
body.dark-mode .mode-timer-ring-bg { stroke: rgba(120, 140, 160, 0.28); }

/* ===== Wish画面: 使用金額の固定ボタン+ポップアップパネル ===== */
:root {
  --amount-fab-left: max(20px, calc(50vw - 240px + 20px));
  --amount-fab-right-margin: max(20px, calc(50vw - 240px + 20px));
}
.fab-amount-btn {
  position: fixed;
  left: var(--amount-fab-left);
  bottom: var(--fab-bottom-offset);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #E07B4F 0%, #F2A65A 100%);
  color: #FFFFFF;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(224, 123, 79, 0.45);
  cursor: pointer;
  z-index: 90;
  transition: transform 0.1s;
}
.fab-amount-btn:active { transform: scale(0.92); }
.fab-amount-btn i { filter: brightness(0) invert(1); }

/* ボタンの右側に開く。left/rightの両方を指定して幅を画面に自動フィットさせる
   (別途widthを指定しないことで、はみ出し・入りきらない問題を防ぐ) */
.amount-fab-panel {
  position: fixed;
  left: calc(var(--amount-fab-left) + 56px + 10px);
  right: var(--amount-fab-right-margin);
  bottom: var(--fab-bottom-offset);
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  z-index: 91;
}
.amount-fab-panel .amount-row { gap: 6px; }
.amount-fab-panel .amount-row input { min-width: 0; }
.amount-fab-title {
  font-size: 12px;
  font-weight: 700;
  color: #6B7C8C;
  margin: 0 0 6px;
}

body.dark-mode .amount-fab-panel {
  background: #16232E;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
body.dark-mode .amount-fab-title { color: #7FA0B8; }


/* =========================================================
   チュートリアル画面(tutorial.html)専用スタイル
   ---------------------------------------------------------
   tutorial.html だけで使うクラス群。本体の画面では使わない。
   ========================================================= */
.tutorial-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

/* ヘッダー: 本体アプリのボトムナビと同系の配色で統一感を出す */
.tutorial-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #2F7FB8 0%, #4FA0D8 100%);
  color: #fff;
  margin-bottom: 18px;
}
.tutorial-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.tutorial-back-btn i { filter: brightness(0) invert(1); }
.tutorial-header-title { font-size: 17px; font-weight: 700; }
.tutorial-header-sub   { font-size: 12px; opacity: 0.85; }

/* セクションへのジャンプチップ */
.tutorial-jump-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 16px 16px;
  margin: 0 -16px 18px;
}
.tutorial-jump-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: #2F7FB8;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(47,127,184,0.15);
}
.tutorial-jump-chip i { font-size: 14px; }

/* セクションカード */
.tutorial-section {
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 6px rgba(47,127,184,0.08);
  scroll-margin-top: 70px;
}
.tutorial-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tutorial-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 18px;
  flex-shrink: 0;
  color: #fff;
}
.tutorial-section-icon i { filter: brightness(0) invert(1); } /* SVGアイコンはcurrentColor非対応のため反転で白にする */
.tutorial-section-title { font-size: 15.5px; font-weight: 700; }
.tutorial-section-body p { font-size: 13.5px; line-height: 1.75; color: #3C5A6E; margin-bottom: 8px; }
.tutorial-section-body p:last-child { margin-bottom: 0; }

/* アイコン背景色バリエーション(セクションごとに変えて単調にしない) */
.tone-blue   { background: linear-gradient(135deg, #2F7FB8, #4FA0D8); }
.tone-orange { background: linear-gradient(135deg, #E07B4F, #F2A65A); }
.tone-purple { background: linear-gradient(135deg, #8C96F0, #B3A9F5); }
.tone-green  { background: linear-gradient(135deg, #4FAE7E, #7FCB9F); }
.tone-pink   { background: linear-gradient(135deg, #E37FA0, #F2A6BE); }

/* OS切り替えタブ(iOS/Android) */
.tutorial-os-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
}
.tutorial-os-tab {
  flex: 1;
  padding: 9px 0;
  text-align: center;
  border-radius: 10px;
  background: #F0F6FA;
  color: #6B7C8C;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.tutorial-os-tab.active {
  background: #2F7FB8;
  color: #fff;
}

/* 手順ステップ */
.tutorial-steps { display: none; flex-direction: column; gap: 10px; }
.tutorial-steps.active { display: flex; }
.tutorial-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tutorial-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2F7FB8;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.tutorial-step-text { font-size: 13.5px; line-height: 1.6; color: #1A3A52; padding-top: 2px; }
.tutorial-step-note {
  font-size: 12px;
  color: #6B7C8C;
  margin-top: 6px;
}

/* コールアウトボックス(ヒント/注意) */
.tutorial-callout {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.6;
}
.tutorial-callout i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.tutorial-callout-tip {
  background: #FFF6E9;
  color: #8A5A1E;
}
.tutorial-callout-warn {
  background: #FDEDEE;
  color: #9A3B42;
}
.tutorial-callout-info {
  background: #EAF6FB;
  color: #2A5A78;
}

/* 用語のミニ比較カード(フォルダ/ファイルなど) */
.tutorial-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0;
}
.tutorial-compare-card {
  background: #F5FBFE;
  border: 1.5px solid #D8EAF2;
  border-radius: 12px;
  padding: 12px;
}
.tutorial-compare-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2F7FB8;
  margin-bottom: 4px;
}
.tutorial-compare-card p { font-size: 12px; color: #4A6B80; line-height: 1.55; }

/* スクリーンショット差し込み用プレースホルダー
   (実際の画像が用意でき次第、data-src相当を<img>に差し替える想定) */
.tutorial-screenshot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed #B9D6E6;
  border-radius: 12px;
  padding: 28px 12px;
  margin: 10px 0;
  color: #8FADC2;
  font-size: 12px;
  background: #F5FBFE;
}
.tutorial-screenshot i { font-size: 22px; }
.tutorial-screenshot img { width: 100%; border-radius: 10px; display: block; }

/* 目次内の小見出し(箇条書きより一段強調したい時) */
.tutorial-subhead {
  font-size: 13px;
  font-weight: 700;
  color: #2F7FB8;
  margin: 14px 0 6px;
}
.tutorial-subhead:first-child { margin-top: 0; }

.tutorial-list { padding-left: 18px; margin-bottom: 8px; }
.tutorial-list li { font-size: 13.5px; line-height: 1.75; color: #3C5A6E; margin-bottom: 2px; }

.tutorial-footer-note {
  text-align: center;
  font-size: 11.5px;
  color: #8FADC2;
  margin-top: 8px;
}