/* ============================================
   易経占い - Custom Styles (Mobile First)
/* カラーテーマ: ディープネイビーブルー × ゴールド × 朱赤
   ============================================ */

/* --- Design Tokens ---
   背景:     #060e1c (base), #0a1628 (sub), #0f1e38 (card), #142444 (inset)
   ブルー:   #1a4a8a (deep), #1e5caa (main), #2a74cc (mid), #4a98e8 (lite), #80c0ff (pale)
   ゴールド: #8a5c00 (dark), #b87800 (main), #d4a020 (mid), #f0c040 (lite)
   朱赤:     #8a1800 (deep), #c03000 (main), #e84818 (mid), #ff5a2a (lite)
/* テキスト: #f0f8ff (primary), #b8d8f8 (secondary), #6898c8 (muted), #3a6090 (faint)
   ============================================ */

@font-face {
  font-family: 'AppJaSerif';
  src: local('Hiragino Mincho ProN'), local('Hiragino Mincho Pro'),
       local('Yu Mincho'), local('YuMincho'), local('MS Mincho'), local('MS 明朝');
  font-weight: 400 700;
  unicode-range: U+3000-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

:root {
  --bg-base:    #060e1c;
  --bg-sub:     #0c1830;
  --bg-card:    #132040;
  --bg-inset:   #1a2e54;

  --green-deep: #1a4a8a;
  --green-main: #1e5caa;
  --green-mid:  #2a74cc;
  --green-lite: #4a98e8;
  --green-pale: #80c0ff;
  --green-tint: rgba(42,116,204,0.18);
  --green-tint2: rgba(42,116,204,0.32);

  --org-deep:   #8a1800;
  --org-main:   #c03000;
  --org-mid:    #e84818;
  --org-lite:   #ff5a2a;
  --org-pale:   #ff9070;
  --org-tint:   rgba(232,72,24,0.18);

  --tx-primary:   #f0f8ff;
  --tx-secondary: #ede4d0;
  --tx-muted:     #d8c8a0;
  --tx-faint:     #c0aa80;

  --gold:      #f0c040;
  --gold-dark: #b87800;

  --gray-deep:  #060e1c;
  --gray-main:  #0f1e38;
  --gray-mid:   #1e3458;
  --gray-lite:  #2e5080;
  --gray-pale:  #4a78a8;

  --red-main:  #d42020;
  --red-dark:  #9a0a0a;
  --blue-main: #2a74cc;
}

body {
  font-family: 'Noto Serif JP','Hiragino Mincho ProN','Hiragino Mincho Pro',
    'Yu Mincho','YuMincho','ＭＳ 明朝','MS Mincho',Georgia,serif;
  font-language-override: 'JAN';
  background-color: var(--bg-base);
  color: var(--tx-primary);
  overscroll-behavior-y: none;
}

.ja-text {
  font-family: 'Noto Serif JP','Hiragino Mincho ProN','Hiragino Mincho Pro',
    'Yu Mincho','YuMincho','ＭＳ 明朝','MS Mincho',Georgia,serif;
  font-language-override: 'JAN';
}

* { -webkit-tap-highlight-color: transparent; }
button,[onclick],.hexagram-card,.five-tab { touch-action: manipulation; }
button:active { opacity: 0.82; }

/* 背景テクスチャ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(42,116,204,0.28) 0%, transparent 52%),
    radial-gradient(ellipse at 85% 10%, rgba(192,120,0,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 92%, rgba(26,74,138,0.22) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ヘッダー */
header {
  position: sticky !important;  /* body > * { position: relative } の上書きを防ぐ */
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(6,14,28,0.97) !important;
  border-bottom: 1.5px solid rgba(42,116,204,0.50) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(0,10,40,0.60) !important;
}

/* ボトムナビ */
#bottom-nav {
  position: fixed !important;  /* body > * { position: relative } の上書きを防ぐ */
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
  background: rgba(6,14,28,0.98) !important;
  border-top: 1.5px solid rgba(42,116,204,0.45) !important;
  box-shadow: 0 -2px 20px rgba(0,10,40,0.55) !important;
}
.bottom-nav-btn {
  color: var(--tx-muted);
  font-size: 0.7rem;
  min-height: 56px;
  position: relative;
}
.bottom-nav-btn i { font-size: 1.2rem; transition: transform 0.15s ease, color 0.15s; }
.bottom-nav-btn span { transition: color 0.15s; }
.bottom-nav-btn.bottom-nav-active { color: var(--gold); }
.bottom-nav-btn.bottom-nav-active i { transform: scale(1.12); color: var(--gold); }
.bottom-nav-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2.5px;
  background: transparent;
  border-radius: 0 0 3px 3px;
  transition: background 0.2s;
}
.bottom-nav-btn.bottom-nav-active::before { background: var(--gold); }

/* カード */
.result-card {
  background: var(--bg-card);
  border-color: rgba(42,116,204,0.60) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 2px 20px rgba(0,10,40,0.45), 0 0 0 1px rgba(42,116,204,0.25) inset;
}
.result-card:hover {
  box-shadow: 0 4px 28px rgba(0,10,40,0.65), 0 0 0 1px rgba(74,152,232,0.35) inset;
}

/* 一覧グリッドカード */
.hexagram-card {
  background: var(--bg-card);
  border: 1px solid rgba(42,116,204,0.42);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.hexagram-card:hover {
  background: var(--bg-inset);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,10,40,0.60);
  border-color: rgba(74,152,232,0.60);
}
.hexagram-card:active { transform: translateY(0); box-shadow: none; }

/* 爻ライン */
.yao-yang {
  width: 52px; height: 8px;
  background: linear-gradient(90deg, #c83000, #ff5a2a 40%, #ff7a4a 50%, #ff5a2a 60%, #c83000);
  border-radius: 4px;
  box-shadow: 0 1px 10px rgba(255,90,42,0.65);
  flex-shrink: 0;
}
.yao-yin-wrap { display: flex; width: 52px; flex-shrink: 0; justify-content: space-between; }
.yao-yin {
  width: 21px; height: 8px; flex-shrink: 0;
  background: linear-gradient(90deg, #0f3a7a, #1e5caa 40%, #2a6cc0 50%, #1e5caa 60%, #0f3a7a);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(30,92,170,0.45);
}
.yao-yang-mini {
  width: 32px; height: 5px;
  background: linear-gradient(90deg, #c83000, #ff5a2a 40%, #ff7a4a 50%, #ff5a2a 60%, #c83000);
  border-radius: 3px; flex-shrink: 0;
}
.yao-yin-mini-wrap { display: flex; gap: 5px; width: 32px; flex-shrink: 0; }
.yao-yin-mini {
  flex: 1; height: 5px;
  background: linear-gradient(90deg, #0f3a7a, #1e5caa 40%, #2a6cc0 50%, #1e5caa 60%, #0f3a7a);
  border-radius: 3px;
}
.lines-display { min-width: 66px; }
.lines-mini    { min-width: 38px; }
#lines-building .yao-yang     { width: 60px; height: 10px; border-radius: 5px; }
#lines-building .yao-yin-wrap { width: 60px; gap: 8px; }
#lines-building .yao-yin      { height: 10px; border-radius: 5px; }

/* 進捗ドット */
.prog-dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--gray-lite);
  background: var(--bg-sub);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; color: var(--tx-muted);
  transition: all 0.3s ease; flex-shrink: 0;
}
.prog-dot.prog-done {
  border-color: var(--org-mid);
  background: rgba(232,72,24,0.18);
  color: var(--org-lite);
  box-shadow: 0 0 10px rgba(232,72,24,0.38);
}
.prog-dot.prog-active {
  border-color: var(--org-lite);
  background: rgba(232,72,24,0.22);
  color: var(--org-lite);
  box-shadow: 0 0 14px rgba(232,72,24,0.55);
  animation: progPulse 1.2s ease-in-out infinite;
}
@keyframes progPulse {
  0%,100% { box-shadow: 0 0 8px rgba(232,72,24,0.40); }
  50%     { box-shadow: 0 0 20px rgba(232,72,24,0.75); }
}

/* 筮竹フィールド */
#stalk-field { user-select: none; -webkit-user-select: none; cursor: default; }
.stalk-bundle {
  background: rgba(15,30,56,0.90);
  border: 1px solid rgba(42,116,204,0.40);
  border-radius: 14px;
  padding: 10px 14px 8px;
  box-shadow: 0 2px 20px rgba(0,10,40,0.50);
}
#lines-building {
  min-height: 100px; display: flex; flex-direction: column;
  gap: 6px; align-items: flex-start; padding: 0 4px;
}

/* 筮竹ボタン */
.stalk-btn-main {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.6rem; border-radius: 14px;
  background: linear-gradient(135deg, #1a4a8a, #1e5caa, #2a74cc);
  border: 1px solid rgba(74,152,232,0.55);
  color: #f0f8ff; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 3px 22px rgba(0,20,80,0.60), 0 0 0 1px rgba(74,152,232,0.22) inset;
  min-width: 220px; touch-action: manipulation;
  text-shadow: 0 1px 3px rgba(0,10,40,0.80);
}
.stalk-btn-main:active { transform: scale(0.97); box-shadow: 0 1px 8px rgba(0,20,80,0.35); }

.stalk-btn-confirm {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.8rem 1.6rem; border-radius: 14px;
  background: linear-gradient(135deg, #8a1800, #c03000, #e84818);
  border: 1px solid rgba(255,90,42,0.45);
  color: #fff0e8; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 3px 18px rgba(180,48,0,0.45), 0 0 0 1px rgba(255,90,42,0.18) inset;
  min-width: 220px; touch-action: manipulation;
  text-shadow: 0 1px 3px rgba(0,0,0,0.50);
}
.stalk-btn-confirm:active { transform: scale(0.97); box-shadow: 0 1px 8px rgba(180,48,0,0.30); }

.stalk-icon {
  display: inline-block; letter-spacing: -0.05em;
  filter: drop-shadow(0 0 6px rgba(74,152,232,0.70));
}

/* モーダル */
.modal-sheet { animation: slideUp 0.28s cubic-bezier(0.32,0.72,0,1); }
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);   opacity: 1; }
}
#detail-modal .rounded-t-3xl {
  background: var(--bg-sub) !important;
  border-color: rgba(42,116,204,0.45) !important;
}

/* フォーム — 全テーマ共通 */
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  background: rgba(15,30,56,0.95) !important;
  color: #ffffff !important;
  border-color: rgba(42,116,204,0.50) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  letter-spacing: .03em !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.55) !important;
  font-size: .95rem !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--green-lite) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,116,204,0.32);
}

/* ===== 入出力テキスト 視認性最適化 ===== */

/* 問い入力欄 */
#question-input {
  font-size: 1.05rem !important;
  color: #ffffff !important;
  line-height: 1.75 !important;
  letter-spacing: .03em !important;
}

/* 結果カード — 本文系（最重要：大きく・明るく） */
#res-one-line {
  font-size: 1.05rem !important;
  color: var(--tx-primary) !important;
  line-height: 1.85 !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
}
#res-meaning {
  font-size: 1rem !important;
  color: var(--tx-primary) !important;
  line-height: 1.9 !important;
  letter-spacing: .03em !important;
}
#res-keyword {
  font-size: .95rem !important;
  color: var(--tx-primary) !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
}
#res-reading {
  font-size: 1.25rem !important;
  color: var(--tx-primary) !important;
  font-weight: 600 !important;
}
#res-number {
  font-size: .95rem !important;
  color: var(--tx-secondary) !important;
  font-weight: 600 !important;
}

/* 古典テキスト（卦辞・象伝） */
#res-judgment, #res-image {
  font-size: 1rem !important;
  color: var(--tx-primary) !important;
  line-height: 1.95 !important;
  letter-spacing: .04em !important;
}
#res-judgment-interp, #res-image-interp {
  font-size: .9rem !important;
  color: var(--tx-secondary) !important;
  line-height: 1.85 !important;
  letter-spacing: .02em !important;
}

/* 総合運・アドバイス */
#res-fortune, #res-advice {
  font-size: 1rem !important;
  color: var(--tx-primary) !important;
  line-height: 1.95 !important;
  letter-spacing: .03em !important;
}

/* 六爻テキスト：フォントサイズのみ全テーマ共通で指定（色はテーマ別に分離） */
#res-line-texts .text-sm,
#res-line-texts p {
  font-size: .95rem !important;
  line-height: 1.85 !important;
}

/* セクションラベル（小見出し） */
.result-card .text-xs.font-semibold,
.result-card p.text-xs {
  font-size: .8rem !important;
  color: var(--tx-secondary) !important;
}

/* ライトテーマ：出力本文は濃い色で可読性確保 */
[data-theme="karekusa"] #res-one-line,
[data-theme="karekusa"] #res-meaning,
[data-theme="karekusa"] #res-judgment,
[data-theme="karekusa"] #res-image,
[data-theme="karekusa"] #res-fortune,
[data-theme="karekusa"] #res-advice,
[data-theme="karekusa"] #res-judgment-interp,
[data-theme="karekusa"] #res-image-interp {
  color: var(--tx-primary) !important;
}

/* ライトテーマ：読み仮名・キーワードの視認性確保 */
[data-theme="karekusa"] #res-reading {
  color: #5a3a00 !important;
}
[data-theme="karekusa"] #res-keyword {
  color: #3a2800 !important;
}

/* 吉凶バッジ */
.fortune-daikichi { color: #f0c040; font-weight: 700; }
.fortune-kichi    { color: #4a98e8; font-weight: 700; }
.fortune-chukichi { color: #2a74cc; font-weight: 700; }
.fortune-shokichi { color: #80c0ff; }
.fortune-tyui     { color: #ff5a2a; font-weight: 700; }

/* スクロールバー */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-sub); }
::-webkit-scrollbar-thumb { background: rgba(42,116,204,0.45); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-mid); }

details summary::-webkit-details-marker { display: none; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.45s ease forwards; }

@keyframes stalkSway {
  0%,100% { transform: rotate(-0.4deg); }
  50%     { transform: rotate(0.4deg); }
}
.stalk-sway { animation: stalkSway 1.2s ease-in-out infinite; transform-origin: bottom center; }

.changing-line { position: relative; }
.changing-line::after {
  content: '○'; position: absolute; right: -16px; top: 50%;
  transform: translateY(-50%); color: var(--org-mid); font-size: 0.6rem;
}

button:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ヒーローセクション */
.hero-section {
  background: linear-gradient(160deg, #0a1628 0%, #060e1c 55%, #080e20 100%);
  border: 1px solid rgba(42,116,204,0.32);
  border-radius: 20px;
  box-shadow: 0 4px 36px rgba(0,10,40,0.60);
}

.cta-main {
  background: linear-gradient(135deg, #8a1800, #c03000, #e84818);
  color: #fff0e8;
  border: 1px solid rgba(232,72,24,0.50);
  box-shadow: 0 4px 22px rgba(180,48,0,0.50), 0 0 0 1px rgba(255,90,42,0.18) inset;
  font-weight: 700; border-radius: 14px; padding: 0.85rem 1.8rem;
  transition: all 0.2s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.cta-main:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(180,48,0,0.40); }

.cta-ghost {
  background: rgba(42,116,204,0.18);
  color: var(--green-lite);
  border: 1.5px solid rgba(42,116,204,0.50);
  box-shadow: 0 2px 14px rgba(0,10,40,0.30);
  font-weight: 600; border-radius: 14px; padding: 0.85rem 1.8rem;
  transition: all 0.2s ease;
}
.cta-ghost:active { transform: scale(0.97); background: rgba(42,116,204,0.32); }

@media (max-width: 640px) {
  .yao-yang, .yao-yin-wrap { width: 40px; }
  .lines-display { min-width: 50px; }
  .stalk-btn-main, .stalk-btn-confirm { min-width: 100%; padding: 0.9rem 1.5rem; }
}

.cta-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; width: 100%;
  background: linear-gradient(135deg, #8a1800 0%, #c03000 45%, #e84818 100%);
  color: #fff0e8;
  border: 1px solid rgba(232,72,24,0.55);
  box-shadow: 0 4px 22px rgba(180,48,0,0.48), 0 1px 0 rgba(255,90,42,0.22) inset;
  font-weight: 700; font-family: inherit; cursor: pointer;
  transition: all 0.2s ease; letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.cta-primary:active { transform: scale(0.97); box-shadow: 0 2px 10px rgba(180,48,0,0.42); }

.cta-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(135deg, #1a4a8a 0%, #1e5caa 55%, #2a74cc 100%);
  color: #f0f8ff;
  border: 1px solid rgba(74,152,232,0.55);
  box-shadow: 0 3px 18px rgba(0,20,80,0.55), 0 1px 0 rgba(74,152,232,0.20) inset;
  font-weight: 700; font-family: inherit; cursor: pointer;
  transition: all 0.2s ease; text-shadow: 0 1px 3px rgba(0,10,40,0.75);
}
.cta-secondary:active { transform: scale(0.97); box-shadow: 0 1px 8px rgba(0,20,80,0.35); }

.five-gua-header { border-color: rgba(42,116,204,0.40) !important; }
.five-gua-header:hover { background: rgba(42,116,204,0.12) !important; }

@media print {
  header,#bottom-nav,#btn-stalks,#btn-random { display: none !important; }
  body { background: white; color: #060e1c; }
  .result-card { border: 1px solid #ccc; box-shadow: none; background: white; }
}

/* =====================================================
   テーマシステム — 7テーマ切り替え
/* theme属性を <html data-theme="..."> に付与して切り替え
   ===================================================== */

/* ── ダーク①: 現行（ディープネイビー）デフォルト ── */
/* :root に定義済み、上書き不要 */

/* ── ライト①: 砂金（さきん）── */
[data-theme="karekusa"] {
  --bg-base:    #ede8dc;
  --bg-sub:     #e8e2d4;
  --bg-card:    #f5f2ea;
  --bg-inset:   #faf8f2;
  --tx-primary:   #100e08;
  --tx-secondary: #1a1608;
  --tx-muted:     #3a3018;
  --tx-faint:     #504830;
  --gold:      #8a5c00;
  --gold-dark: #5a3a00;
  --green-deep: #5a3a00;
  --green-main: #7a5000;
  --green-mid:  #8a5c00;
  --green-lite: #b07800;
  --green-pale: #d4a020;
  --green-tint: rgba(140,100,0,0.12);
  --green-tint2: rgba(140,100,0,0.22);
  --org-mid:    #8a5c00;
  --org-lite:   #b07800;
  --blue-main:  #8a5c00;
  --input-bg:   #fdfaf4;
  --method-sel-bg: rgba(180,130,0,0.12);
}
[data-theme="karekusa"] body {
  background-color: var(--bg-base);
  color: var(--tx-primary);
}
[data-theme="karekusa"] body::before {
  background-image:
    radial-gradient(ellipse at 15% 20%, rgba(140,100,0,0.1) 0%, transparent 52%),
    radial-gradient(ellipse at 85% 10%, rgba(180,130,0,0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 92%, rgba(120,80,0,0.08) 0%, transparent 55%);
}
[data-theme="karekusa"] header {
  background: rgba(237,232,220,0.97) !important;
  border-bottom-color: rgba(140,100,0,0.22) !important;
  box-shadow: 0 2px 20px rgba(100,70,0,0.12) !important;
}
[data-theme="karekusa"] #bottom-nav {
  background: rgba(237,232,220,0.98) !important;
  border-top-color: rgba(140,100,0,0.18) !important;
  box-shadow: 0 -2px 20px rgba(100,70,0,0.10) !important;
}
[data-theme="karekusa"] .bottom-nav-btn { color: #504828; }
[data-theme="karekusa"] .bottom-nav-btn.bottom-nav-active { color: #6a3c00; }
[data-theme="karekusa"] .bottom-nav-btn.bottom-nav-active i { color: #6a3c00; }
[data-theme="karekusa"] .bottom-nav-btn.bottom-nav-active::before { background: #6a3c00; }
[data-theme="karekusa"] .cta-primary {
  background: linear-gradient(135deg,#7a4c00,#c48a08 40%,#d4900a);
  color: #fff8e0;
  border-color: rgba(120,80,0,0.5);
  box-shadow: 0 4px 20px rgba(120,70,0,0.35);
}
[data-theme="karekusa"] .result-card {
  background: var(--bg-card);
  border-color: rgba(140,100,0,0.2);
}
[data-theme="karekusa"] input[type="text"],
[data-theme="karekusa"] input[type="email"],
[data-theme="karekusa"] input[type="password"],
[data-theme="karekusa"] select,
[data-theme="karekusa"] textarea {
  background: #fdfaf4 !important;
  color: #1a1208 !important;
  border-color: rgba(140,100,0,0.40) !important;
}
[data-theme="karekusa"] input::placeholder,
[data-theme="karekusa"] textarea::placeholder { color: rgba(80,60,20,0.55) !important; }
[data-theme="karekusa"] input:focus,
[data-theme="karekusa"] select:focus,
[data-theme="karekusa"] textarea:focus {
  border-color: #d4a020 !important;
  box-shadow: 0 0 0 3px rgba(140,100,0,0.35) !important;
}

/* テーマモーダル — カード hover & active
   ===================================================== */
.theme-card {
  transition: transform .15s, box-shadow .15s, outline .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.theme-card:active {
  transform: scale(0.98);
}
.theme-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* =====================================================
/* 視認性改善 — 全画面共通フォントサイズ底上げ
   ===================================================== */

/* Tailwind text-xs (.75rem = 12px) → .95rem に全体底上げ */
.text-xs {
  font-size: .95rem !important;
  line-height: 1.7 !important;
}

/* ボトムナビのラベルは小さめを維持 */
.bottom-nav-btn .text-xs {
  font-size: .72rem !important;
  line-height: 1.2 !important;
}

/* アイコン用text-xsは継承させない */
i.text-xs,
.fas.text-xs,
.far.text-xs {
  font-size: .85rem !important;
  line-height: inherit !important;
}

/* =====================================================
/* 視認性改善 ① フォントサイズ底上げ ② コントラスト強化
   ===================================================== */

/* ── ① フォントサイズ底上げ ──────────────────────── */

/* ヘッダーテーマボタン */
header button { font-size: .8rem !important; }

/* トップ画面：ラベル・キャッチ */
.hero-section p { font-size: .82rem !important; }

/* 心に秘める問い ラベル */
#view-divination label { font-size: .85rem !important; }

/* 占法選択ボタン */
.method-btn-new { font-size: .82rem !important; }

/* 一事不再問アコーディオン */
#ichiji-accordion summary span { font-size: .85rem !important; }
#ichiji-accordion > div       { font-size: .83rem !important; }
#ichiji-accordion blockquote  { font-size: .83rem !important; }

/* ペルソナ名・説明 */
#persona-select-area .persona-icon-ring ~ div:first-of-type { font-size: .78rem !important; }
#persona-select-area div[style*=".55rem"]  { font-size: .72rem !important; }
#persona-select-area div[style*=".62rem"]  { font-size: .78rem !important; }

/* 一覧タブ：八卦・五行テキスト */
.hexagram-card p,
.hexagram-card span { font-size: .8rem !important; }
.hexagram-card .text-xs { font-size: .78rem !important; }

/* 結果画面：セクション見出し・補足 */
#res-trigrams p,
#res-trigrams span { font-size: .82rem !important; }

/* 爻詳細：summary行 */
#res-line-texts details summary { font-size: .85rem !important; }
#res-line-texts details p       { font-size: .88rem !important; }

/* 朱熹占断ルール注記 */
#res-line-texts > div:first-child p { font-size: .83rem !important; }

/* 五卦アコーディオン */
.five-gua-header span { font-size: .82rem !important; }

/* 学習タブ：本文 */
#view-learn p,
#view-learn li { font-size: .85rem !important; }
#view-learn h3 { font-size: .95rem !important; }

/* 履歴タブ */
#view-history p,
#view-history span { font-size: .82rem !important; }


/* ── ② コントラスト強化 ────────────────────────── */

/* ヘッダーサブテキスト（「六十四卦・I・CHING」等）の透明度を上げる */
header p[style*="opacity"],
header span[style*="opacity"] {
  opacity: 0.80 !important;
}

/* ヒーローセクション装飾テキスト（.45 → .85） */
.hero-section p[style*="rgba(240,192,64,0.45)"],
.hero-section span[style*="rgba(240,192,64,0.45)"] {
  color: rgba(240,192,64,0.85) !important;
}

/* 占法ボタン 非選択時のボーダーを濃く */
.method-btn-new {
  border-color: rgba(240,192,64,0.55) !important;
  color: var(--tx-secondary) !important;
}

/* 入力欄ボーダーを濃く */
#question-input {
  border-color: rgba(240,192,64,0.55) !important;
}

/* 一覧カードボーダーを濃く */
.hexagram-card {
  border-color: rgba(42,116,204,0.60) !important;
}

/* モーダルボーダーを濃く */
#detail-modal .rounded-t-3xl {
  border-color: rgba(42,116,204,0.65) !important;
}

/* 結果画面：小見出しラベルの視認性 */
.result-card .text-xs.font-semibold,
.result-card p.text-xs.font-semibold {
  font-size: .82rem !important;
  color: var(--tx-secondary) !important;
  opacity: 1 !important;
}

/* =====================================================
/* 視認性改善③ C・D・E — 残課題修正
   ===================================================== */

/* ── C: ペルソナ説明文（極小サブテキスト）強化 ── */
/* .55rem → .73rem、opacity削除、文字色を明示 */
#persona-select-area div[style*=".55rem"] {
  font-size: .73rem !important;
  opacity: 1 !important;
  color: var(--tx-secondary) !important;
}

/* ── D: 上部装飾テキスト・六爻図ラベル 透明度強化 ── */
/* 「六十四卦 · I · C H I N G」（rgba opacity 0.45→0.85） */
/* インラインstyleはCSSで上書きできないため、色クラスで近似して上書き */
/* ヒーローエリア内の全小見出し文字を強制表示 */
#view-divination [style*="rgba(240,192,64,0.45)"] {
  color: rgba(240,192,64,0.88) !important;
}
#view-divination [style*="rgba(240,192,64,0.45)"] {
  color: var(--gold) !important;
  opacity: 0.88 !important;
}
/* ライトテーマでも同様に強化 */
[data-theme="karekusa"] #view-divination [style*="rgba(240,192,64,0.45)"],

/* ── E: 補助説明文・下部カードサブテキスト強化 ── */
/* 「偶然ではない…」opacity .85 → 1、文字色強化 */
#view-divination p[style*="opacity:.85"] {
  opacity: 1 !important;
  color: var(--tx-secondary) !important;
}

/* 下部カードのサブ説明文（.65rem → .78rem、文字色強化） */
#guide-links-bottom p[style*=".65rem"] {
  font-size: .78rem !important;
  color: var(--tx-secondary) !important;
  opacity: 1 !important;
}

/* ライトテーマ：下部カードサブテキスト（背景が明るいので濃い色で） */
[data-theme="karekusa"] #guide-links-bottom p[style*=".65rem"],

/* CTA下注記「※ 一事不再問…」 */
#view-divination p[style*=".68rem"] {
  font-size: .78rem !important;
  color: var(--tx-secondary) !important;
  opacity: 1 !important;
}

/* =====================================================
   卦カード文字色 — ライトテーマでも白を維持
/* #d0d4dd / #d6d9e2 のインライン色を強制上書き
   ===================================================== */
#res-reading {
  color: #ffffff !important;
}
#res-keyword {
  color: #e8e8e8 !important;
}
#res-english {
  color: #f1f4ff !important;
}
/* ライトテーマ3種でも卦カード内は白文字維持 */
[data-theme="karekusa"] #res-reading,
[data-theme="karekusa"] #res-keyword,
[data-theme="karekusa"] #res-english,

/* =====================================================
   ライトテーマ対応 — question-echo / res-hex-detail
/* 「もっと深く読む」アコーディオン内の視認性修正
   ===================================================== */

/* ── question-echo エリア（問いの表示欄） ── */
[data-theme="karekusa"] #question-echo .bg-\[\#0a1628\],
[data-theme="karekusa"] #question-echo p,
[data-theme="karekusa"] #question-echo .text-\[\#4a98e8\],
[data-theme="karekusa"] #question-echo .text-\[\#2a74cc\],

/* ── res-hex-detail（この卦について：意味・総合運・アドバイス）── */
/* 見出しラベルの文字色強化 */
[data-theme="karekusa"] #res-hex-detail p[style*="tx-muted"],
/* divider 線の色（ライトテーマで薄白を濃くする） */
[data-theme="karekusa"] #res-hex-detail .divide-y > div,

/* ── アコーディオン内 古典テキスト・総合運・アドバイス 見出しバー ── */
/* ライトテーマ時は背景を明るいゴールドトーンに */
[data-theme="karekusa"] #res-hex-detail .px-4.pt-3.pb-2,
[data-theme="karekusa"] .result-paid-zone-inner .px-4.pt-3.pb-2, {
  background: rgba(180,140,20,0.10) !important;
}

/* ── 古典テキスト本文（卦辞・象伝の解釈文） ── */
/* var(--tx-secondary) がライトテーマで薄い場合の補強 */
[data-theme="karekusa"] #res-judgment-interp,
[data-theme="karekusa"] #res-image-interp, {
  color: #2a2010 !important;
  font-size: .9rem !important;
  opacity: 1 !important;
}

/* ── 古典テキスト原文（卦辞・象伝 イタリック） ── */
[data-theme="karekusa"] #res-judgment,
[data-theme="karekusa"] #res-image, {
  color: #1a1408 !important;
  border-left-color: rgba(160,120,0,0.5) !important;
}

/* ── 総合運・アドバイス 本文 ── */
[data-theme="karekusa"] #res-fortune,
[data-theme="karekusa"] #res-advice, {
  color: #1a1408 !important;
}

/* ── 見出しラベル（卦辞・象伝等のsmall uppercase） ── */
[data-theme="karekusa"] .px-4.pt-4.pb-3 p.text-xs.font-semibold,
[data-theme="karekusa"] .px-4.pt-4.pb-4 p.text-xs.font-semibold, {
  color: #3a2e18 !important;
  font-size: .8rem !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   六爻セクション ライトテーマ強制上書き
   JS側のinline styleよりCSSが優先されてしまう問題を解決
   ═══════════════════════════════════════════════════════════════ */

/* ── コンテナ背景：透過が親の濃紺に透けるのを防ぐ ── */
[data-theme="karekusa"] #res-hex-detail,

[data-theme="karekusa"] #res-line-texts,

/* ── テキスト色：var(--tx-primary)のdark値を上書き ── */
[data-theme="karekusa"] #res-line-texts p,

[data-theme="karekusa"] #res-line-texts .text-sm,

/* ════════════════════════════════════════════════════════
   六爻パネル ライトテーマ強制スタイル
      一切影響しない。`[data-theme="karekusa"]` 等を
      必ず先頭に置くことで安全に分離する。
   ════════════════════════════════════════════════════════ */

/* ── パネル本体（border付きdiv） ── */
[data-theme="karekusa"] #res-line-texts > div, {
  background: #ffffff !important;
  border-color: rgba(160,130,60,0.28) !important;
}

/* ── 爻辞テキスト p（インラインスタイルの暗色を上書き） ── */
[data-theme="karekusa"] #res-line-texts p,

/* ── text-sm クラスのテキスト ── */
[data-theme="karekusa"] #res-line-texts .text-sm,

/* ── 読み方ガイド / 各爻 details 要素 ── */
[data-theme="karekusa"] #res-line-texts details,

/* ── 爻辞カード summary（インライン背景・文字色を優先させる） ── */
/* NOTE: summary背景・文字はJSのインラインstyleで設定済みのため
         ここでは !important を使わず、読み方ガイド summaryのみ適用 */
[data-theme="karekusa"] #res-line-texts > details > summary,

/* ── 読み方ガイドの展開エリア ── */
[data-theme="karekusa"] #res-line-texts > details > div,

/* ── 爻辞テキストエリア div p（inline styleを上書き） ── */
[data-theme="karekusa"] #res-line-texts details > div p,

/* ── 朱熹占断ルール注記ボックス（.mb-3クラス） ── */
[data-theme="karekusa"] #res-line-texts > .mb-3,

/* ────────────────────────────────────────────────────────
   ダークテーマ保護ルール
   CSS詳細度を上げてライトテーマルールの意図しない漏れを防ぐ
   ──────────────────────────────────────────────────────── */

/* ダークテーマ（data-theme属性なし、またはdark系）では
   #res-line-texts のp/spanはインラインスタイルに従わせる */
:root:not([data-theme="karekusa"])
  #res-line-texts p {
  color: inherit;
}

:root:not([data-theme="karekusa"])
  #res-line-texts details summary {
  background: unset;
  color: unset;
}

:root:not([data-theme="karekusa"])
  #res-line-texts details > div {
  background: unset;
}

/* ════════════════════════════════════════════════════════════════
   マイページ・履歴・メモ・カレンダー・プライバシーポリシー
   ライトテーマ（karekusa）上書きルール
   ════════════════════════════════════════════════════════════════ */

/* ── 共通変数（ライトテーマ用アクセント色） ──────────────────────
   ダーク: #4a98e8（明るい青）→ ライト: #1a4a8a（濃い紺）
   ダーク: #80c0ff（薄い水色）→ ライト: #0a2a5a（極濃紺）
   ダーク: #6898c8（中間青）  → ライト: #2a5080（中紺）
   ダーク: #142444（暗紺背景）→ ライト: #ffffff（白）
   ダーク: #1a4a8a（濃紺背景）→ ライト: #eef4ff（薄青白）
   ダーク: #0f1e38（最深背景）→ ライト: #f8faff（ほぼ白）
   ─────────────────────────────────────────────────────────────── */

/* ══ #view-mypage ══════════════════════════════════════════════ */

/* アバター・ユーザー名・バッジ */
[data-theme="karekusa"] #mypage-username, {
  color: #1a3a6a !important;
}
[data-theme="karekusa"] #mypage-email,
[data-theme="karekusa"] #mypage-provider-badge,

/* ログアウトボタン */
[data-theme="karekusa"] #view-mypage button[onclick="logoutUser()"],

/* ダッシュボードグリッドボタン全般（border-[#4a98e8]系）*/
[data-theme="karekusa"] #view-mypage .grid button,
/* ダッシュボードボタン内アイコン（text-[#4a98e8]） */
[data-theme="karekusa"] #view-mypage .grid button i,
/* ダッシュボードボタン内テキスト（text-[#80c0ff]） */
[data-theme="karekusa"] #view-mypage .grid button span,

/* 占うボタン（グラデーション）内テキスト - 白で維持 */
[data-theme="karekusa"] #view-mypage .grid button.col-span-2 span,

/* 占い履歴ボックス（rounded-xl border border-[#4a98e8]） */
[data-theme="karekusa"] #view-mypage > div > div.rounded-xl,
/* 履歴見出し（text-[#ff5a2a]は維持、アイコンのみ色変更） */
[data-theme="karekusa"] #view-mypage h3 i.fas.fa-history,
[data-theme="karekusa"] #history-count-badge,

/* プロフィール編集フォーム */
[data-theme="karekusa"] #profile-edit-form,

/* ══ ゲスト登録フォーム（mypage-guest内） ══════════════════════ */
[data-theme="karekusa"] #mypage-guest p,
[data-theme="karekusa"] #mypage-guest .rounded-xl,
[data-theme="karekusa"] #mypage-guest strong,

/* ══ #view-privacy ══════════════════════════════════════════════ */

/* セクションタイトル */
[data-theme="karekusa"] #view-privacy h2,
[data-theme="karekusa"] #view-privacy h2 i,

/* 最終更新日テキスト */
[data-theme="karekusa"] #view-privacy p.text-\[10px\],

/* プライバシー概要バナー背景 */
[data-theme="karekusa"] #view-privacy .mb-5,
[data-theme="karekusa"] #view-privacy .mb-5 p,
[data-theme="karekusa"] #view-privacy .mb-5 span,
/* プライバシー概要バナー内グリッドアイテム */
[data-theme="karekusa"] #view-privacy .grid > div,

/* details アコーディオン（条項各項） */
[data-theme="karekusa"] #view-privacy details,
[data-theme="karekusa"] #view-privacy details summary span,
[data-theme="karekusa"] #view-privacy details summary i,
/* details 展開エリア本文 */
[data-theme="karekusa"] #view-privacy details > div,
[data-theme="karekusa"] #view-privacy details > div p,
[data-theme="karekusa"] #view-privacy details > div span,
/* details内ボックス（保存される情報等） */
[data-theme="karekusa"] #view-privacy details .rounded-lg,
/* ボックス内見出し（font-semibold） */
[data-theme="karekusa"] #view-privacy details .rounded-lg p.font-semibold,
[data-theme="karekusa"] #view-privacy details .rounded-lg i,
/* リンク */
[data-theme="karekusa"] #view-privacy a,

/* ══ #view-calendar ══════════════════════════════════════════════ */

/* 見出し */
[data-theme="karekusa"] #view-calendar h2,
[data-theme="karekusa"] #view-calendar h2 i,
/* 月送りボタン・タイトル */
[data-theme="karekusa"] #view-calendar button,
[data-theme="karekusa"] #cal-title,
/* 曜日ヘッダー */
[data-theme="karekusa"] #cal-dow-header > div,
/* 日・土の色はそのまま維持（#d44000/#4a98e8も読めるが念のため調整） */
[data-theme="karekusa"] #cal-dow-header > div:first-child,
/* カレンダー詳細ポップアップ */
[data-theme="karekusa"] #cal-detail,
[data-theme="karekusa"] #cal-detail-date,
/* カレンダー下部テキスト */
[data-theme="karekusa"] #view-calendar > p,

/* ══ #view-memo ══════════════════════════════════════════════════ */

/* 見出し */
[data-theme="karekusa"] #view-memo h2,
[data-theme="karekusa"] #view-memo h2 i,
/* 戻るボタン */
[data-theme="karekusa"] #view-memo button[onclick="showView('mypage')"],
/* メモカウントバッジ */
[data-theme="karekusa"] #memo-count-badge,
/* 新規追加ボックス */
[data-theme="karekusa"] #view-memo .rounded-xl,
[data-theme="karekusa"] #view-memo .rounded-xl p.font-semibold,
/* 文字数カウント */
[data-theme="karekusa"] #memo-body-count,
/* 保存ボタン */
[data-theme="karekusa"] #view-memo button[onclick="addMemo()"],
/* メモリスト空状態テキスト */
[data-theme="karekusa"] #memo-list > p,
/* メモカード（JSで生成）— renderMemoListで bg-[#0f1e38] border-[#4a98e8]/30 */
[data-theme="karekusa"] #memo-list .rounded-xl,
/* メモカードタイトル（text-[#4a98e8]） */
[data-theme="karekusa"] #memo-list .rounded-xl p,
[data-theme="karekusa"] #memo-list .rounded-xl span,

/* ══ #view-history ══════════════════════════════════════════════ */

/* 見出し */
[data-theme="karekusa"] #view-history h2,
[data-theme="karekusa"] #view-history h2 i,
/* 戻るボタン */
[data-theme="karekusa"] #view-history button[onclick="showView('mypage')"],
/* 履歴合計バッジ */
[data-theme="karekusa"] #history-total-badge,
/* 空状態テキスト */
[data-theme="karekusa"] #history-full-list > p,
/* 履歴カード（JSで生成）*/
[data-theme="karekusa"] #history-full-list .rounded-xl,
[data-theme="karekusa"] #history-full-list p,
[data-theme="karekusa"] #history-full-list span,

/* ══ ヘッダー・ボトムナビ内ライトテーマ微調整 ══════════════════ */

/* ヘッダーのロゴアイコン（☯）・アバター */
[data-theme="karekusa"] header .text-\[#4a98e8\],
[data-theme="karekusa"] header .text-\[#80c0ff\],

/* ══ カレンダーナビボタン hover ライトテーマ上書き ══════════════
   ダーク: hover:bg-[#1a4a8a]/25（濃紺）は暗背景でOK
   ライト: 白/クリーム背景に濃紺hoverは唐突 → 薄青白に変更       */
[data-theme="karekusa"] #view-calendar button:hover {
  background-color: rgba(220, 238, 255, 0.65) !important;
}

/* ── ダークテーマ保護（ライトルールの漏れ防止） ─────────────────
   上記ライトテーマルールは [data-theme="karekusa"]
   セレクタが必ず先頭にあるため、ダークテーマへの影響はゼロ。
   念のため意図確認コメントのみ記載。
   ─────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   ライトテーマ（karekusa）包括的視認性修正
   ── 水色テキストを全て濃色に強制上書き ──
   JS動的生成コンテンツのTailwindクラス（text-[#80c0ff]等）は
   テーマ切り替え後に再レンダリングされないため、CSSで一括上書きする
   ══════════════════════════════════════════════════════════════════ */

/* ── 水色テキストクラスを全て暗色に ── */
[data-theme="karekusa"] .text-\[\#80c0ff\],
[data-theme="karekusa"] .text-\[\#4a98e8\],
[data-theme="karekusa"] .text-\[\#6898c8\],
[data-theme="karekusa"] .text-\[\#c8e0f8\],
[data-theme="karekusa"] .text-\[\#a0c8e8\],
[data-theme="karekusa"] .text-\[\#90c0ff\],
[data-theme="karekusa"] .text-\[\#2a74cc\],
[data-theme="karekusa"] .text-\[\#1e5caa\] {
  color: #1a2a4a !important;
}

/* ── 水色テキストでも濃紺は許容（十分なコントラスト） ── */
[data-theme="karekusa"] .text-\[\#1a4a8a\],
[data-theme="karekusa"] .text-\[\#1a3a6a\],
[data-theme="karekusa"] .text-\[\#1a3a7a\],
[data-theme="karekusa"] .text-\[\#0a1e40\],
[data-theme="karekusa"] .text-\[\#1e4a7a\],
[data-theme="karekusa"] .text-\[\#3a5a8a\],
[data-theme="karekusa"] .text-\[\#2a5080\] {
  color: #0a1e40 !important;
}

/* ── 水色背景（bg-[#dceeff]等）内のテキストを強制的に暗色に ── */
[data-theme="karekusa"] .bg-\[\#dceeff\] *,
[data-theme="karekusa"] .bg-\[\#dceeff\]\/60 *,
[data-theme="karekusa"] [class*="bg-[#dceeff]"] * {
  color: #0a1e40 !important;
}

/* ── 背景: 水色・薄青系を白/クリームに置換 ── */
[data-theme="karekusa"] .bg-\[\#dceeff\] {
  background-color: #eef4ff !important;
}
[data-theme="karekusa"] .bg-\[\#f0f4ff\],
[data-theme="karekusa"] .bg-\[\#f0f8ff\] {
  background-color: #f5f8ff !important;
}

/* ── 結果画面本文：JS生成コンテンツの水色を暗色に一括上書き ── */
[data-theme="karekusa"] #res-question-answer,
[data-theme="karekusa"] #res-question-answer * {
  color: #0a1e40 !important;
}
/* ただしアイコン色（吉凶・変爻）は個別維持 */
[data-theme="karekusa"] #res-question-answer .text-yellow-700 { color: #7a5000 !important; }
[data-theme="karekusa"] #res-question-answer .text-yellow-800 { color: #5a3800 !important; }
[data-theme="karekusa"] #res-question-answer .text-green-700  { color: #1a5a20 !important; }
[data-theme="karekusa"] #res-question-answer .text-green-800  { color: #0a4010 !important; }
[data-theme="karekusa"] #res-question-answer .text-\[\#b02000\] { color: #8a1000 !important; }
[data-theme="karekusa"] #res-question-answer .text-\[\#d44000\] { color: #a02800 !important; }

/* ── 五卦エリア（renderFiveHexagrams）本文 ── */
[data-theme="karekusa"] #five-hexagrams-area {
  color: #0a1e40 !important;
}
[data-theme="karekusa"] #five-hexagrams-area p,
[data-theme="karekusa"] #five-hexagrams-area span,
[data-theme="karekusa"] #five-hexagrams-area div {
  color: inherit;
}
/* 水色テキストを確実に上書き */
[data-theme="karekusa"] #five-hexagrams-area .text-\[\#80c0ff\],
[data-theme="karekusa"] #five-hexagrams-area .text-\[\#4a98e8\],
[data-theme="karekusa"] #five-hexagrams-area .text-\[\#6898c8\],
[data-theme="karekusa"] #five-hexagrams-area .text-\[\#c8e0f8\],
[data-theme="karekusa"] #five-hexagrams-area .text-\[\#a0c8e8\] {
  color: #1a2a4a !important;
}

/* ── Deep Readingセクション ── */
[data-theme="karekusa"] #deep-reading-section,
[data-theme="karekusa"] #deep-reading-section p,
[data-theme="karekusa"] #deep-reading-section span {
  color: #0a1e40 !important;
}

/* ── 履歴カード（renderHistoryCard）水色テキスト ── */
[data-theme="karekusa"] #history-full-list .text-\[\#80c0ff\],
[data-theme="karekusa"] #history-full-list .text-\[\#4a98e8\] {
  color: #1a2a4a !important;
}
[data-theme="karekusa"] #view-history .text-\[\#80c0ff\],
[data-theme="karekusa"] #view-history .text-\[\#4a98e8\] {
  color: #1a2a4a !important;
}

/* ── マイページ・プロフィール ── */
[data-theme="karekusa"] #view-mypage .text-\[\#80c0ff\],
[data-theme="karekusa"] #view-mypage .text-\[\#4a98e8\],
[data-theme="karekusa"] #view-mypage .text-\[\#6898c8\] {
  color: #1a2a4a !important;
}

/* ── 一覧画面（hexagram list） ── */
[data-theme="karekusa"] #view-list .text-\[\#80c0ff\],
[data-theme="karekusa"] #view-list .text-\[\#4a98e8\],
[data-theme="karekusa"] #view-list .text-\[\#6898c8\] {
  color: #1a2a4a !important;
}

/* ── 投資画面等の水色テキスト全般 ── */
[data-theme="karekusa"] .text-\[\#80c0ff\] { color: #1a2a4a !important; }
[data-theme="karekusa"] .text-\[\#4a98e8\] { color: #1a4a8a !important; }
[data-theme="karekusa"] .text-\[\#6898c8\] { color: #2a4a8a !important; }

/* ── インラインスタイルの水色も上書き（フォールバック） ── */
/* JSで color:#80c0ff / color:#4a98e8 などを直接付与している要素 */
[data-theme="karekusa"] #view-divination *[style*="color:#80c0ff"],
[data-theme="karekusa"] #view-divination *[style*="color: #80c0ff"],
[data-theme="karekusa"] #view-divination *[style*="color:#4a98e8"],
[data-theme="karekusa"] #view-divination *[style*="color: #4a98e8"],
[data-theme="karekusa"] #res-line-texts *[style*="color:#80c0ff"],
[data-theme="karekusa"] #res-line-texts *[style*="color: #80c0ff"],
[data-theme="karekusa"] #res-line-texts *[style*="color:#4a98e8"],
[data-theme="karekusa"] #res-line-texts *[style*="color: #4a98e8"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#80c0ff"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color: #80c0ff"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#4a98e8"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color: #4a98e8"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#c8e0f8"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#6898c8"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#a0c8e8"] {
  color: #1a2a4a !important;
}

/* ── 六爻詳細エリアのインライン水色 ── */
[data-theme="karekusa"] #res-line-texts *[style*="color:#1a4a8a"],
[data-theme="karekusa"] #res-line-texts *[style*="color: #1a4a8a"] {
  color: #0a1e40 !important;
}

/* ── 白・明灰テキスト（ダーク用）をライトでは暗色に ── */
[data-theme="karekusa"] *[style*="color:#f0f8ff"],
[data-theme="karekusa"] *[style*="color: #f0f8ff"],
[data-theme="karekusa"] *[style*="color:#d0e8ff"],
[data-theme="karekusa"] *[style*="color: #d0e8ff"],
[data-theme="karekusa"] *[style*="color:#e8f2ff"],
[data-theme="karekusa"] *[style*="color: #e8f2ff"],
[data-theme="karekusa"] *[style*="color:#b8d8f8"],
[data-theme="karekusa"] *[style*="color: #b8d8f8"] {
  color: #1a1e28 !important;
}

/* ── 暗い背景色（ダーク用）をライトでは白/クリームに ── */
[data-theme="karekusa"] *[style*="background:rgba(10,22,44"],
[data-theme="karekusa"] *[style*="background: rgba(10,22,44"],
[data-theme="karekusa"] *[style*="background:rgba(14,28,60"],
[data-theme="karekusa"] *[style*="background: rgba(14,28,60"],
[data-theme="karekusa"] *[style*="background:rgba(10,18,44"],
[data-theme="karekusa"] *[style*="background: rgba(10,18,44"],
[data-theme="karekusa"] *[style*="background:#f8faff"] {
  background: #f5f8ff !important;
}
[data-theme="karekusa"] *[style*="background:rgba(10,22,44"] p,
[data-theme="karekusa"] *[style*="background: rgba(10,22,44"] p,
[data-theme="karekusa"] *[style*="background:rgba(14,28,60"] p,
[data-theme="karekusa"] *[style*="background: rgba(14,28,60"] p {
  color: #1a2a4a !important;
}

/* ── 五卦カードの白背景 → 視認性良好なため維持、テキストは暗色強制 ── */
[data-theme="karekusa"] #five-hexagrams-area [style*="background:#f8faff"],
[data-theme="karekusa"] #five-hexagrams-area [style*="background:#ffffff"],
[data-theme="karekusa"] #five-hexagrams-area [style*="background:#f0f8ff"] {
  background: #faf8f4 !important;
  border-color: rgba(140,100,0,0.18) !important;
}

/* ── 入力欄テキスト（ライトモード用上書き） ── */
[data-theme="karekusa"] #question-input {
  color: #1a1208 !important;
  background: #fdfaf4 !important;
}

/* ── 結果カードヘッダー内の白テキスト ── */
[data-theme="karekusa"] .result-card [style*="color:#ffffff"],
[data-theme="karekusa"] .result-card [style*="color: #ffffff"] {
  color: #1a1208 !important;
}

/* ── 吉凶バッジ ライトテーマ ── */
[data-theme="karekusa"] .fortune-daikichi { color: #5a3800 !important; }
[data-theme="karekusa"] .fortune-kichi    { color: #1a4a8a !important; }
[data-theme="karekusa"] .fortune-chukichi { color: #2a5a8a !important; }
[data-theme="karekusa"] .fortune-shokichi { color: #3a5a8a !important; }
[data-theme="karekusa"] .fortune-tyui     { color: #a02000 !important; }

/* ══════════════════════════════════════════════════════════════
   ライトモード（karekusa）追加視認性修正 vol.2
   ══════════════════════════════════════════════════════════════ */

/* ── 結果カード：英名・読み・キーワードの薄色テキスト修正 ── */
/* res-english: #f1f4ff（白）→ 濃紺 */
[data-theme="karekusa"] #res-english {
  color: #2a3a5a !important;
}
/* res-reading: #d0d4dd（薄グレー）→ 濃紺 */
[data-theme="karekusa"] #res-reading {
  color: #2a3a5a !important;
  opacity: 1 !important;
}
/* res-keyword: #d6d9e2（薄グレー）→ 濃紺 */
[data-theme="karekusa"] #res-keyword {
  color: #1a2a4a !important;
}

/* ── 結果カード本体背景（濃紺→薄ベージュ白） ── */
[data-theme="karekusa"] .result-card {
  background: #f5f0e8 !important;
  border-color: rgba(106,90,44,0.45) !important;
}

/* ── 筮竹法：stalk-bundle 背景（濃紺→薄クリーム） ── */
[data-theme="karekusa"] .stalk-bundle {
  background: #f0ebe0 !important;
  border-color: rgba(106,90,44,0.35) !important;
  box-shadow: 0 2px 12px rgba(80,60,20,0.15) !important;
}

/* ── 筮竹法：stalk-msg ボックス（背景・テキスト） ── */
[data-theme="karekusa"] #stalk-msg {
  background: #fdfaf4 !important;
  border-color: rgba(106,90,44,0.30) !important;
  color: #1a1208 !important;
}

/* ── 筮竹法：「1本を選んでタップ」text-amber-200 → 濃橙 ── */
[data-theme="karekusa"] .text-amber-200 {
  color: #8a4a00 !important;
}

/* ── 筮竹法：区切りダッシュ text-stone-400/500 → 中間グレー ── */
[data-theme="karekusa"] .text-stone-400 {
  color: #6b5a3e !important;
}
[data-theme="karekusa"] .text-stone-500 {
  color: #5a4a30 !important;
}

/* ── 筮竹法：「引いた爻: X / 6」カウンター text-amber-300 → 濃橙 ── */
[data-theme="karekusa"] .text-amber-300 {
  color: #7a3a00 !important;
}

/* ── 筮竹法：太極フェーズ インラインstyle color:#f0c040 → 濃茶金 ── */
[data-theme="karekusa"] *[style*="color:#f0c040"],
[data-theme="karekusa"] *[style*="color: #f0c040"] {
  color: #7a4a00 !important;
}

/* ── 結果カード：res-chinese（漢字大）金色→濃金 ライトでも維持 ── */
[data-theme="karekusa"] #res-chinese {
  color: #8a5a00 !important;
}

/* ── 結果カード：res-fortune-badge（吉凶ピル）ライト調整 ── */
[data-theme="karekusa"] #res-fortune-badge {
  background: rgba(240,224,190,0.8) !important;
  border-color: rgba(140,100,30,0.6) !important;
  color: #5a3800 !important;
}

/* ── 爻ライン番号バッジ（筮竹・コイン共通）インライン color:#1e5caa ── */
/* ダークモード用の水色なのでライトでは暗色に（十分なコントラスト確保済み） */

/* ── 結果カード内 薄いインラインスタイル色の追加上書き ── */
[data-theme="karekusa"] .result-card *[style*="color:#d0d4dd"],
[data-theme="karekusa"] .result-card *[style*="color: #d0d4dd"],
[data-theme="karekusa"] .result-card *[style*="color:#d6d9e2"],
[data-theme="karekusa"] .result-card *[style*="color: #d6d9e2"],
[data-theme="karekusa"] .result-card *[style*="color:#f1f4ff"],
[data-theme="karekusa"] .result-card *[style*="color: #f1f4ff"],
[data-theme="karekusa"] .result-card *[style*="color:#f2f4f8"],
[data-theme="karekusa"] .result-card *[style*="color: #f2f4f8"] {
  color: #1a2a4a !important;
}

/* ── 五卦エリア内の薄色テキスト ── */
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#d0d4dd"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#d6d9e2"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#f1f4ff"],
[data-theme="karekusa"] #five-hexagrams-area *[style*="color:#c0c8d4"] {
  color: #1a2a4a !important;
}

/* ── 一覧・モーダル内の薄色テキスト ── */
[data-theme="karekusa"] #list-view *[style*="color:#d0d4dd"],
[data-theme="karekusa"] #list-view *[style*="color:#d6d9e2"],
[data-theme="karekusa"] #modal-sheet *[style*="color:#d0d4dd"],
[data-theme="karekusa"] #modal-sheet *[style*="color:#d6d9e2"] {
  color: #1a2a4a !important;
}

/* ── コイン法：コイン面 text-yellow-300 → ダーク背景なので維持
      ただし stalk-msg / stalk-bundle 内では不要なので対象外 ── */

/* ── 老陽（変爻）シンボル text-yellow-300 → ライトでは暗橙に ── */
[data-theme="karekusa"] .text-yellow-300 {
  color: #7a4a00 !important;
}

/* ── 「六爻 揃いました」text-amber-300 → 濃橙 ── */
/* （updateCounter の text-amber-300 も同様に対象） */

/* ── 解説・ガイド内の金色インラインスタイル：color:#f0c040 → 濃茶金 ── */
/* ガイドモーダル（#guide-modal など）内の #f0c040 */
[data-theme="karekusa"] *[style*="color:#f0c040"],
[data-theme="karekusa"] *[style*="color: #f0c040"] {
  color: #7a4a00 !important;
}

/* ── 解説テキスト内の color:#f2bb36（漢字大文字と同色） → 濃金 ── */
[data-theme="karekusa"] *[style*="color:#f2bb36"],
[data-theme="karekusa"] *[style*="color: #f2bb36"] {
  color: #8a5a00 !important;
}

/* ── 吉凶バッジ：dab24e（薄金）→ 濃紺テキスト ── */
[data-theme="karekusa"] *[style*="color:#dab24e"],
[data-theme="karekusa"] *[style*="color: #dab24e"] {
  color: #5a3800 !important;
}

/* ── 結果カード：bg-card 強制上書き（インライン background:#172240 対策） ── */
[data-theme="karekusa"] *[style*="background:#172240"],
[data-theme="karekusa"] *[style*="background: #172240"],
[data-theme="karekusa"] *[style*="background:var(--bg-card,#172240)"],
[data-theme="karekusa"] *[style*="background:var(--bg-card, #172240)"] {
  background: #f5f0e8 !important;
}

/* ── 筮竹法：stalk-bundle 内コイン背景（bg-yellow-950/60）はダーク専用
      ライトモードでは stalk-bundle 全体を薄くしているので十分 ── */

/* ══════════════════════════════════════════════════════════════
   ライトモード（karekusa）追加視認性修正 vol.3 ― 完全網羅版
   ══════════════════════════════════════════════════════════════ */

/* ── SVGアイコン（アコーディオン矢印）stroke:#f0c060 → 濃茶金 ── */
[data-theme="karekusa"] svg.deep-arrow,
[data-theme="karekusa"] svg[stroke="#f0c060"] {
  stroke: #7a4a00 !important;
}

/* ── コイン法「卦を見る」ボタン インラインstyle上書き ── */
/* background:#1a2540;color:#f0c060 → ライトに合わせる */
[data-theme="karekusa"] #coin-throw-btn[style*="background:#1a2540"],
[data-theme="karekusa"] *[style*="background:#1a2540"] {
  background: #1a4a8a !important;
  color: #ffffff !important;
  border-color: rgba(74,152,232,0.6) !important;
}

/* ── 「もっと深く読む」アコーディオンsummary（background:#1a2540 改行含みで上記セレクタ非マッチ）── */
/* IDとdivで直接ターゲット */
[data-theme="karekusa"] #res-deep-accordion > summary {
  background: #2a5a9a !important;
  color: #ffffff !important;
}
[data-theme="karekusa"] #res-deep-accordion > summary svg {
  stroke: #f0e8c0 !important;
}
/* 7628行目のdiv（展開状態復元版） */
[data-theme="karekusa"] details.group > summary > div[style*="background:#1a2540"],
[data-theme="karekusa"] details > summary > div[style*="background:#1a2540"] {
  background: #2a5a9a !important;
  color: #ffffff !important;
}

/* ── コイン法：フリップ中のコイン（bg-yellow-950/60 text-yellow-300）── */
[data-theme="karekusa"] .coin-face.border-yellow-500 {
  background: rgba(255,240,180,0.9) !important;
  border-color: #b07800 !important;
  color: #7a4a00 !important;
}
[data-theme="karekusa"] .coin-face.bg-yellow-950\/60 {
  background: rgba(255,240,180,0.9) !important;
}
[data-theme="karekusa"] .coin-face.text-yellow-300 {
  color: #7a4a00 !important;
}

/* ── コイン法：陰フリップ後（bg-slate-900/60 text-slate-300）── */
[data-theme="karekusa"] .coin-face.bg-slate-900\/60 {
  background: rgba(220,225,235,0.9) !important;
  border-color: #6b7280 !important;
}
[data-theme="karekusa"] .coin-face.text-slate-300 {
  color: #374151 !important;
}

/* ── コイン法：爻ライン表示 border-[#1e5caa] → ライト調整 ── */
[data-theme="karekusa"] .coin-face.border-\[\#1e5caa\] {
  border-color: #2a74cc !important;
}

/* ── 結果詳細アコーディオン（summary内）ライトモード ── */
[data-theme="karekusa"] details > summary {
  color: var(--tx-primary) !important;
}

/* ── d4a020（薄金）インラインstyle → 濃茶金 ── */
[data-theme="karekusa"] *[style*="color:#d4a020"],
[data-theme="karekusa"] *[style*="color: #d4a020"] {
  color: #7a4a00 !important;
}

/* ── text-[#6898c8]（薄水色）→ 濃紺 ── */
[data-theme="karekusa"] .text-\[\#6898c8\] {
  color: #1a2a4a !important;
}

/* ── text-[#2a74cc]（水色）→ 濃紺 ── */
[data-theme="karekusa"] .text-\[\#2a74cc\] {
  color: #1a3a6a !important;
}

/* ── bg-[#0a1628]（濃紺背景）→ 薄クリーム ── */
[data-theme="karekusa"] .bg-\[\#0a1628\] {
  background-color: #f5f0e8 !important;
}
[data-theme="karekusa"] .bg-\[\#0a1628\]\/60 {
  background-color: rgba(245,240,232,0.9) !important;
}

/* ── bg-[#142444]（濃紺背景）→ 薄クリーム（ライトモード分岐なしの箇所）── */
[data-theme="karekusa"] .bg-\[\#142444\]\/80 {
  background-color: rgba(220,230,245,0.9) !important;
}

/* ── bg-gradient from-[#142444]（モーダルヘッダー帯）→ 薄紺グラデ ── */
[data-theme="karekusa"] .from-\[\#142444\] {
  --tw-gradient-from: #dce8f8 !important;
}
[data-theme="karekusa"] .via-\[\#0f1e38\] {
  --tw-gradient-via: #e8f0fa !important;
}
[data-theme="karekusa"] .to-\[\#142444\] {
  --tw-gradient-to: #dce8f8 !important;
}

/* ── text-[#f0c040]（薄黄金）Tailwindクラス → 濃茶金 ── */
[data-theme="karekusa"] .text-\[\#f0c040\] {
  color: #7a4a00 !important;
}

/* ── text-[#f2bb36]（薄金）Tailwindクラス → 濃茶金 ── */
[data-theme="karekusa"] .text-\[\#f2bb36\] {
  color: #8a5a00 !important;
}

/* ── インラインstyle color:#ffffff / #fff ──
   【廃止】全体セレクタで白→暗色は副作用大きすぎるため削除。
   白文字が必要な要素（ボタン・バッジ）まで暗くしてしまうため
   個別IDセレクタで必要な箇所だけ対処する方針に変更。 ── */

/* ── text-[#0a1e40] / text-[#1a3a6a]（極濃紺テキスト）はライトでも十分可読 ── */
/* 対処不要 */

/* ── bg-[#f0f8ff]（薄水色背景）はライトモードで問題なし ── */
/* 対処不要 */

/* ══════════════════════════════════════════════════════════════
   ライトモード（karekusa）追加視認性修正 vol.4
   ─ 白テキスト全体上書き廃止 → 個別修正に切り替え
   ══════════════════════════════════════════════════════════════ */

/* ── 第N卦バッジ（#res-number）background:#2b57b8 白文字は維持 ── */
/* 廃止した全体セレクタの影響で白文字が消えていたため明示的に復元 */
[data-theme="karekusa"] #res-number {
  background: #1e5aaa !important;
  color: #ffffff !important;
}

/* ── Xでシェアボタン background:#000 白文字を明示的に維持 ── */
[data-theme="karekusa"] button[style*="background:#000"] {
  background: #111111 !important;
  color: #ffffff !important;
}

/* ── LINEボタン background:#06C755 白文字維持 ── */
[data-theme="karekusa"] button[style*="background:#06C755"] {
  background: #06C755 !important;
  color: #ffffff !important;
}

/* ── background:#2b57b8 要素（バッジ全般）白文字維持 ── */
[data-theme="karekusa"] *[style*="background:#2b57b8"] {
  background: #1e5aaa !important;
  color: #ffffff !important;
}

/* ── 「もっと深く読む」summary 白文字維持（vol.3対処に加えて明示補強）── */
[data-theme="karekusa"] #res-deep-accordion > summary,
[data-theme="karekusa"] details > summary > div[style*="background:#1a2540"] {
  color: #ffffff !important;
}

/* =====================================================
   一事不再問モーダル — ライトモード (karekusa) 対応
   ===================================================== */
[data-theme="karekusa"] #ichiji-modal > div {
  background: linear-gradient(160deg, #fff4ee, #fde8dc) !important;
  border-color: rgba(180, 60, 20, 0.45) !important;
}

[data-theme="karekusa"] #ichiji-modal h3 {
  color: #8a2010 !important;
}

[data-theme="karekusa"] #ichiji-modal p,
[data-theme="karekusa"] #ichiji-modal div {
  color: #3a1008;
}

[data-theme="karekusa"] #ichiji-prev-info {
  background: rgba(180, 60, 20, 0.08) !important;
  border-color: rgba(180, 60, 20, 0.25) !important;
}

[data-theme="karekusa"] #ichiji-prev-info p:first-child {
  color: rgba(120, 40, 10, 0.7) !important;
}

[data-theme="karekusa"] #ichiji-prev-info p:nth-child(2) {
  color: #5a1a08 !important;
}

[data-theme="karekusa"] #ichiji-modal blockquote {
  color: rgba(100, 30, 10, 0.85) !important;
  border-left-color: rgba(180, 60, 20, 0.5) !important;
}

[data-theme="karekusa"] #ichiji-modal details summary {
  color: rgba(150, 40, 10, 0.85) !important;
}

[data-theme="karekusa"] #ichiji-btn-read {
  background: linear-gradient(135deg, #6a1808, #a02818) !important;
}