/* =========================================================
   目薬タイマー  style.css
   目次
     01. リセット & 基本
     02. レイアウト / 画面切り替え
     03. カード / タイトル
     04. 設定画面（間隔・説明・色パレット・目薬リスト）
     05. タブナビ
     06. スケジュール設定
     07. タイマー画面
     08. 完了画面
     09. 点眼記録画面
     10. 更新通知バナー / バージョン表示
     11. カラーサポートモード
     12. レスポンシブ
     13. フッター
   ========================================================= */

/* ===== 01. リセット & 基本 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #eef3fb;
  --card: #ffffff;
  --shadow: 0 8px 32px rgba(100, 120, 200, 0.13);
  --radius: 20px;
  --accent: #6ec6a0;
  --accent2: #f47c7c;
  --accent-strong: #2a8560;       /* 白文字を載せるボタン用（コントラスト確保） */
  --accent-strong-hover: #216c4e;
  --danger: #c03030;
  --danger-bg: #c94a4a;           /* 白文字を載せる削除ボタン用 */
  --text: #2d3561;
  --sub: #4f5b8a;
  --muted: #67739c;
  --content-max: 600px;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

/* JS からは hidden 属性で表示を切り替える（display を指定したクラスより優先させる） */
[hidden] {
  display: none !important;
}

/* 説明文は文節で改行し、行の長さをそろえる（auto-phrase は対応ブラウザのみ。非対応でも通常どおり改行） */
.title,
.guide-text2,
.schedule-guide,
.schedule-guide-note,
.timer-msg {
  word-break: auto-phrase;
}

.title,
.guide-text2,
.schedule-guide,
.timer-msg {
  text-wrap: balance;
}

/* フォーム部品はページのフォントを引き継ぐ */
button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation; /* ダブルタップでの拡大を防ぐ */
}

/* ===== 02. レイアウト / 画面切り替え ===== */
/* body 直下の各ブロックは同じ幅にそろえる */
.tab-nav,
.tab-panel,
.site-footer {
  width: 100%;
  max-width: var(--content-max);
}

.screen {
  display: none;
}

.screen.active {
  display: block;
}

/* ===== 03. カード / タイトル ===== */
.card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.title {
  font-size: clamp(1.5rem, 6.6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
}

/* ===== 04. 設定画面 ===== */
/* --- くっきりさせる（カード右上） --- */
.color-support-label {
  align-self: flex-end;
  margin: -16px -16px -8px 0;
  font-size: 0.9rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.75);
  padding: 6px 10px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #222;
}

/* --- 間隔入力 --- */
.interval-row {
  display: flex;
  flex-wrap: wrap; /* 狭すぎる画面ではボタンを下の行へ */
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
}

.label-lg {
  font-size: 1.3rem;
  font-weight: 700;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--accent-strong);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.stepper-btn:disabled {
  background: #c5cde8;
  cursor: not-allowed;
}

.interval-input {
  width: 72px;
  -moz-appearance: textfield;
  appearance: textfield;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  border: 2.5px solid #d0d8f0;
  border-radius: 12px;
  padding: 6px 10px;
  outline: none;
  transition: border-color .2s;
}

/* －／＋ボタンがあるので、PC のスピンボタンは隠す */
.interval-input::-webkit-inner-spin-button,
.interval-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.interval-input:focus {
  border-color: var(--accent);
}

/* --- 音声設定 --- */
.speech-toggle-label {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.speech-toggle-label input {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* --- 説明文 --- */
.guide-text {
  font-size: 1.2rem;
  font-weight: 700;
  background: #f0f4ff;
  border-radius: 12px;
  padding: 10px 20px;
  text-align: center;
  width: 100%;
  letter-spacing: .02em;
}

.guide-text-sub {
  display: block;
  font-size: 0.8em;
  color: var(--sub);
}

.guide-text2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sub);
  padding: 0 20px;
  text-align: center;
  width: 100%;
  letter-spacing: .02em;
}

/* --- タイトル下の案内 --- */
.setup-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.is-warning {
  color: #d97706;
}

/* --- 色パレット --- */
.color-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  width: 100%;
}

/* 色ボタン・チップ・バッジの色は JS から CSS 変数（--c-bg / --c-fg / --c-border）で渡す */
.color-btn,
.drop-chip,
.drop-badge {
  background: var(--c-bg);
  color: var(--c-fg);
  border: 2px solid var(--c-border, transparent);
}

.color-btn {
  border-radius: 14px;
  padding: 8px 4px;
  font-size: min(0.95rem, 4vw);
  font-weight: 700;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.color-btn-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* --- リセットボタン --- */
.reset-wrap {
  width: 100%;
  text-align: right;
  margin-bottom: -8px;
}

.btn-text-reset {
  background: #fff;
  border: 1.5px solid var(--accent2);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 700;
}

/* --- 目薬リスト --- */
.drop-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 何も選択していないときのプレースホルダー */
.drop-list:empty {
  border: 2.5px dashed #c5cde8;
  border-radius: 16px;
  background: #f7f9ff;
  min-height: 90px;
  align-items: center;
  justify-content: center;
}

.drop-list:empty::before {
  content: '👆 色をタップしてここに入れる';
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
  text-align: center;
  padding: 8px 16px;
}

.drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f9ff;
  border-radius: 14px;
  padding: 10px 14px;
}

.drop-num {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sub);
  min-width: 1.4em;
}

.drop-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chip-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.drop-name-input {
  flex: 1;
  min-width: 0; /* flex 内で縮めるように */
  border: 2px solid #d0d8f0;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 1.1rem;
  outline: none;
}

.drop-name-input:focus {
  border-color: var(--accent);
}

.btn-delete {
  background: var(--danger-bg);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- スタートボタン --- */
.btn-start {
  width: 100%;
  padding: 20px;
  font-size: 1.6rem;
  font-weight: 900;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #a8edcb, #6ec6a0);
  color: var(--text);
  box-shadow: 0 4px 18px rgba(110, 198, 160, 0.4);
}

/* 目薬が選ばれている間は、画面下に貼り付いてすぐ押せるようにする */
.btn-start:not(:disabled) {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  box-shadow: 0 6px 24px rgba(42, 133, 96, 0.45);
}

.btn-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== 05. タブナビ ===== */
.tab-nav {
  display: flex;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(100, 120, 200, 0.12);
  overflow: hidden;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.tab-btn {
  flex: 1;
  padding: 14px 8px;
  font-size: 1rem;
  font-weight: bold;
  background: #f0faf5;
  color: var(--sub);
  border: none;
  border-bottom: 3px solid transparent;
  transition: background 0.2s, color 0.2s;
}

.tab-btn.active {
  background: #fff;
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ===== 06. スケジュール設定 ===== */
.schedule-section {
  width: 100%;
  background: #f0faf5;
  border-radius: 14px;
  overflow: hidden;
}

.accordion-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: none;
  border: none;
  font-size: 1.05rem;
  font-weight: bold;
  text-align: left;
}

.accordion-icon {
  font-size: 0.75rem;
  color: var(--accent);
  flex-shrink: 0;
}

.accordion-body {
  padding: 0 18px 16px;
}

.schedule-guide {
  font-size: 0.92rem;
  color: var(--sub);
  text-align: center;
  margin-bottom: 6px;
}

.schedule-guide-note {
  width: fit-content;
  margin: 0 auto 10px;
  padding: 4px 12px;
  border-radius: 10px;
  background: #fff4e0;
  color: #8a4b00;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.schedule-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 8px 0;
}

.schedule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #d4eedf;
}

.schedule-time-badge {
  font-size: 1.1rem;
  font-weight: bold;
}

.btn-schedule-del {
  background: none;
  border: 1.5px solid #c5cde8;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.85rem;
  color: var(--sub);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.schedule-add-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.schedule-input-group {
  flex: 1;
  min-width: 0;
  display: flex;
  background: #fff;
  border: 2px solid #b0e0cc;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.schedule-input-group:focus-within {
  border-color: var(--accent);
}

.schedule-time-input {
  flex: 1;
  min-width: 0; /* flex 内で縮めるように */
  font-size: 1.1rem;
  padding: 8px 10px;
  border: none;
  background: transparent;
  outline: none;
}

.schedule-time-select {
  flex-shrink: 0;
  width: 44px;
  background: #e8f5ee;
  border: none;
  border-left: 1px solid #b0e0cc;
  font-size: 1.2rem;
  cursor: pointer;
  outline: none;
  text-align: center;
  /* ドロップダウンの矢印を消してアイコンっぽく見せる */
  appearance: none;
  -webkit-appearance: none;
  padding-left: 8px;
}

.btn-add-schedule {
  flex-shrink: 0;
  background: var(--accent-strong);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
  transition: background 0.2s;
}

/* ===== 07. タイマー画面 ===== */
.progress-wrap {
  width: 100%;
  background: #eaecf8;
  border-radius: 99px;
  height: 14px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #6ec6a0, #5aabf5);
  transition: width .5s ease;
}

.step-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sub);
}

.timer-msg {
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 900;
  text-align: center;
  overflow-wrap: anywhere;
}

.drop-badge {
  position: relative;
  width: 150px;
  height: 150px;
  border-width: 4px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.badge-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* 名前があるときは文字が円からはみ出さないよう、絵を少し小さくする */
.drop-badge.has-name .badge-img {
  width: 52px;
  height: 52px;
}

.badge-label {
  max-width: 82%;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.badge-label small {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.8;
}

/* 完了状態のバッジ：背景（円）をグレーにする */
.drop-badge.completed {
  animation: none;
  background: #d1d8e0;
  border-color: #b0b8c0;
  color: var(--sub);
}

/* 画像（イラスト）のみグレーアウト */
.drop-badge.completed img {
  filter: grayscale(1);
  opacity: 0.4;
}

/* チェックマークの重ね合わせ（ここはカラーのまま残る） */
.drop-badge.completed::after {
  content: '✅';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  z-index: 10;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- カウントダウン --- */
.countdown-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.countdown-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sub);
}

.countdown {
  font-size: 3.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.countdown-sub {
  font-size: 1.1rem;
  color: var(--sub);
  margin-bottom: 4px;
}

/* 中止ボタン */
.btn-cancel {
  margin-top: 4px;
  padding: 12px 36px;
  font-size: 1.1rem;
  font-weight: 700;
  border: 2.5px solid var(--accent2);
  border-radius: 12px;
  background: #fff0f0;
  color: var(--danger);
  transition: background .2s;
}

/* さした！ボタン */
.btn-done {
  width: 100%;
  padding: 22px;
  font-size: 1.7rem;
  font-weight: 900;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffd6a0, #ffad60);
  color: #5a3a00;
  box-shadow: 0 4px 18px rgba(255, 173, 96, 0.4);
}

/* ===== 08. 完了画面 ===== */
.done-card {
  text-align: center;
  padding: 56px 32px;
}

.done-card .step-label {
  margin: -8px 0 24px;
}

.done-emoji {
  font-size: 5rem;
}

.done-title {
  font-size: 2.8rem;
  font-weight: 900;
}

.done-msg {
  font-size: 1.4rem;
  color: var(--sub);
  margin-bottom: 20px;
}

.btn-restart {
  padding: 18px 52px;
  font-size: 1.4rem;
  font-weight: 900;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #b8e3ff, #5aabf5);
  color: var(--text);
}

/* ===== 09. 点眼記録画面 ===== */
.records-card {
  min-height: 55vh;
}

.records-title {
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
}

.records-list {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  max-height: 60vh;
}

.records-date-header {
  font-size: 1rem;
  font-weight: bold;
  margin: 20px 0 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid #b0e0cc;
}

.records-date-header:first-child {
  margin-top: 0;
}

.records-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 4px;
  border-bottom: 1px solid #f0f2f8;
}

.records-time {
  font-size: 0.95rem;
  color: var(--sub);
  min-width: 44px;
  flex-shrink: 0;
}

.records-drop {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.records-empty {
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  margin: 36px 0;
  line-height: 2;
}

.records-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.btn-export,
.btn-clear-records {
  border-radius: 20px;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.2s;
}

.btn-export {
  background: var(--accent-strong);
  color: #fff;
  border: none;
}

.btn-clear-records {
  background: #fff;
  color: var(--danger);
  border: 2px solid #ffaaaa;
}

/* ===== 10. 更新通知バナー / バージョン表示 ===== */
.update-banner {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px)); /* 下は追従するスタートボタンと重なるため上に出す */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px); /* 狭い画面ではみ出さないように */
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  font-size: 0.95rem;
}

.btn-update-app {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--accent-strong);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: bold;
  transition: background 0.2s;
}

.app-version {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* --- ホバー（マウス操作の端末のみ。スマホでタップ後に効果が残らないように） --- */
@media (hover: hover) {
  .color-btn:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  }

  .tab-btn:not(.active):hover {
    background: #e2f5ec;
    color: var(--text);
  }

  .btn-schedule-del:hover {
    background: #fff0f0;
    border-color: #ffaaaa;
    color: var(--danger);
  }

  .btn-add-schedule:hover,
  .btn-export:hover,
  .btn-update-app:hover {
    background: var(--accent-strong-hover);
  }

  .btn-cancel:hover {
    background: var(--accent2);
    color: #fff;
  }

  .btn-clear-records:hover {
    background: #fff0f0;
  }

  .footer-link:hover {
    color: var(--text);
  }
}

/* ===== 11. カラーサポートモード ===== */
body.color-support-mode {
  --bg: #ffffff;
  --card: #f4f6f8;
  --text: #000000;
  --sub: #222222;
}

/* ボタンやバッジの境界線を強調 */
body.color-support-mode .color-btn,
body.color-support-mode .drop-chip,
body.color-support-mode .drop-badge {
  border: 4px solid #000000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 枠が太くなる分、色ボタンの内側の余白を詰める */
body.color-support-mode .color-btn {
  padding-inline: 0;
  font-size: min(0.9rem, 3.8vw);
}

/* サポートモード時のバッジは文字はみ出しを防ぐために円形ではなく角丸四角にし、縦に伸びるようにする */
body.color-support-mode .drop-badge {
  height: auto;
  min-height: 150px;
  border-radius: 24px;
  padding: 16px 8px;
}

/* ユーザーが入力する名前の入力欄を強調 */
body.color-support-mode .drop-name-input {
  border: 3px solid #000000;
  font-weight: 900;
  font-size: 1.2rem;
  color: #000000;
  background: #ffffff;
}

/* バッジのラベル（ユーザー入力の名前）を極大化して目立たせる */
body.color-support-mode .badge-label {
  max-width: 100%;
  font-size: 1.3rem;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.95);
  color: #000000;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid #000000;
  position: relative;
  z-index: 20; /* 完了時の ✅ より文字を上に表示 */
  margin-top: 4px;
}

/* 元の色名（small 要素）は目立たせない */
body.color-support-mode .badge-label small {
  font-size: 0.9rem;
  font-weight: normal;
  opacity: 0.7;
  display: block;
  margin-top: 4px;
}

/* 画像をくっきりさせる */
body.color-support-mode .chip-img,
body.color-support-mode .badge-img,
body.color-support-mode .color-btn-img {
  filter: contrast(1.4) drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}

/* 待機中の ✅ マークの位置を少し上にずらして、絵の上に重ねる */
body.color-support-mode .drop-badge.completed::after {
  top: 30%;
  z-index: 30;
}

/* ===== 12. レスポンシブ ===== */
/* 縦が短い画面（横向き・小型端末）では余白と大きさを詰める */
@media (max-height: 700px) {
  .card {
    padding: 18px 18px 22px;
    gap: 14px;
  }

  .drop-badge {
    width: 110px;
    height: 110px;
  }

  .badge-img,
  .drop-badge.has-name .badge-img {
    width: 40px;
    height: 40px;
  }

  .badge-label {
    font-size: 0.95rem;
  }

  .countdown {
    font-size: 2.8rem;
  }
}

/* スマホ幅 */
@media (max-width: 480px) {
  body {
    padding: 12px;
  }

  .card {
    padding: 20px 16px 28px;
    gap: 18px;
  }

  .color-support-label {
    margin: -8px -8px 0 0;
  }

  .label-lg {
    font-size: 1.15rem;
  }

  .stepper-btn {
    width: 44px;
    height: 44px;
  }

  .interval-input {
    width: 64px;
  }

  .guide-text {
    font-size: 1.1rem;
    padding: 10px 12px;
  }

  .guide-text2 {
    padding: 0;
    font-size: 0.85rem;
  }

  .accordion-toggle {
    padding: 14px 12px;
  }

  .accordion-body {
    padding: 0 12px 14px;
  }

  .drop-item {
    gap: 8px;
    padding: 8px 10px;
  }

  .btn-delete {
    padding: 8px 10px;
  }

  .done-card {
    padding: 40px 16px;
  }

  .btn-restart {
    padding: 18px 40px;
  }
}

@media (max-width: 400px) {
  .tab-btn {
    font-size: 0.88rem;
    padding: 12px 4px;
  }
}

/* ===== 12.5 使い方・よくある質問 ===== */
.about {
  width: 100%;
  max-width: var(--content-max);
  margin-top: 32px;
  padding: 0 8px;
  color: var(--sub);
  line-height: 1.8;
}

.about-title {
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 12px;
}

.about-subtitle {
  font-size: 1rem;
  color: var(--text);
  margin: 24px 0 8px;
}

.about-lead,
.about-steps {
  font-size: 0.92rem;
}

.about-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.about-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.88rem;
  line-height: 1.6;
}

.about-features strong {
  color: var(--text);
  font-size: 0.95rem;
}

.about-feature-icon {
  font-size: 1.5rem;
  line-height: 1.2;
}

.about-steps {
  padding-left: 1.4em;
}

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

.faq-item {
  background: var(--card);
  border-radius: 12px;
  font-size: 0.92rem;
}

.faq-item summary {
  padding: 12px 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.faq-item p {
  padding: 0 16px 14px;
}

/* ===== 13. フッター ===== */
.site-footer {
  margin-top: auto;
  padding: 40px 16px 20px;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}

.footer-copy {
  margin-top: 1.6em;
}

.footer-link {
  color: var(--sub);
  text-decoration: underline;
  font-size: 0.8rem;
  font-weight: 700;
  transition: color 0.2s;
}