/* Focus モード: 赤系トマトグラデーション（デフォルト） */
.tomato-gradient {
  background: radial-gradient(circle at 30% 30%, #c0524f, #a83a38 70%, #7d2422);
  box-shadow: 0 20px 50px rgba(168, 58, 56, 0.3), inset 0 -10px 20px rgba(0,0,0,0.15);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* Short Break モード: 青緑系グラデーション */
.timer-short {
  background: radial-gradient(circle at 30% 30%, #4a7fa5, #2d6a8f 70%, #1a4f70);
  box-shadow: 0 20px 50px rgba(45, 106, 143, 0.35), inset 0 -10px 20px rgba(0,0,0,0.15);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* Long Break モード: 青・紫系グラデーション */
.timer-long {
  background: radial-gradient(circle at 30% 30%, #6b5a9e, #4e3d7a 70%, #342660);
  box-shadow: 0 20px 50px rgba(78, 61, 122, 0.35), inset 0 -10px 20px rgba(0,0,0,0.15);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

.glass-card {
  background: rgba(26, 42, 107, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.text-glow {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* タイマー数値の文字幅を等幅にして左右の揺れを防ぐ */
#timer-display {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}

.mode-tab {
  transition: color 0.25s ease, border-color 0.25s ease;
  border-bottom: 2px solid transparent;
}

.active-tab {
  color: #c0524f !important;
  border-bottom-color: #c0524f;
}

.active-tab-short {
  color: #4a7fa5 !important;
  border-bottom-color: #4a7fa5;
}

.active-tab-long {
  color: #6b5a9e !important;
  border-bottom-color: #6b5a9e;
}

.subtab-btn.active {
  color: #c0524f;
  border-color: #c0524f;
}

/* サイクルドット */
.cycle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease, transform 0.3s ease;
}
.cycle-dot-sep {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.cycle-dot.dot-focus {
  background: #c0524f;
  box-shadow: 0 0 6px rgba(192, 82, 79, 0.7);
}
.cycle-dot.dot-short {
  background: #2d6a8f;
  box-shadow: 0 0 6px rgba(45, 106, 143, 0.7);
}
.cycle-dot.dot-long {
  background: #4e3d7a;
  box-shadow: 0 0 6px rgba(78, 61, 122, 0.7);
}
.cycle-dot.dot-active {
  opacity: 0.55;
  animation: dot-pulse 1.5s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.35); }
}

.task-completed p.task-name {
  text-decoration: line-through;
  color: #64748b;
}

/* ===========================
   記事ページの可読性向上
   /articles/ 配下の <main> 内テキストに適用
   =========================== */

/* 日本語フォントを優先的に当てる（Inter は欧文用） */
.articles-page,
.articles-page body,
body:has(article.prose) {
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

/* 記事本文（article 配下）の段落・リスト */
main article p,
main article li {
  color: #1e293b; /* slate-800：黒に近い濃い色 */
  line-height: 1.95; /* 日本語向けに広めの行間 */
  letter-spacing: 0.02em;
}

/* 強調テキスト */
main article strong {
  color: #0f172a; /* slate-900：ほぼ黒 */
  font-weight: 700;
}

/* 記事h1のtext-glowを無効化（白背景では不要） */
main article h1.text-glow,
main h1.text-glow {
  text-shadow: none;
  letter-spacing: 0.01em;
}

main article h2,
main article h3 {
  color: #0f172a; /* slate-900 */
  letter-spacing: 0.01em;
}

/* 記事一覧ページのカード説明文 */
main a p,
main a.block p {
  color: #475569; /* slate-600 */
  line-height: 1.7;
}

/* 記事一覧ページのリード文 / 日付・読了時間などのメタ情報 */
main > p.text-slate-400,
main header .text-slate-500 {
  color: #475569; /* slate-600 */
}

/* リード・カード内ヘッダ文字 */
main article header .text-slate-500 {
  color: #64748b; /* slate-500：日付・分数は控えめに */
}

/* 強調ボックス内の説明文 */
main article .bg-slate-50 p,
main article .bg-slate-50 p.text-slate-400,
main article .bg-slate-50 p.text-slate-600 {
  color: #475569; /* slate-600 */
  line-height: 1.85;
}

/* CTA セクションの説明文 */
main section p.text-slate-400,
main section p.text-slate-600 {
  color: #475569; /* slate-600 */
  line-height: 1.8;
}

/* リンクの下線を常時表示して可読性を上げる */
main article a.text-accent-red {
  text-decoration: underline;
  text-decoration-color: rgba(192, 82, 79, 0.45);
  text-underline-offset: 3px;
}
main article a.text-accent-red:hover {
  text-decoration-color: #c0524f;
}

/* フッターのコピーライト */
footer p {
  color: #64748b; /* slate-500 */
}

/* accent-red カスタムカラー（tailwind.config が CDN に届かない場合の保険） */
.text-accent-red { color: #c0524f; }
.bg-accent-red { background-color: #c0524f; }
.border-accent-red { border-color: #c0524f; }
.hover\:text-accent-red:hover { color: #c0524f; }
.hover\:bg-accent-red:hover { background-color: #c0524f; }
.font-display { font-family: "Inter", sans-serif; }