/* Custom user-side styles */
html { scroll-behavior: smooth; }
.bg-accent-50 { background-color: #fff8f6; }
::selection { background: rgba(232,93,44,0.2); color: #1a1a3e; }

/* v18.6: User-side dark mode coverage */

/* Plan name inline style="color: ..." では暗色 (#1a1a3e) が背景に溶けるので、ダーク時に CSS フィルタで明るく */
.dark [style*="color: #1a1a3e"], .dark [style*="color:#1a1a3e"],
.dark [style*="color:#1a1a3e"] {
  /* 値を上書きはできないが、filter で輝度を上げる */
  filter: brightness(2.5) contrast(1.1);
}
.dark [style*="background: #1a1a3e"],
.dark [style*="background:#1a1a3e"] {
  /* 暗い背景 + 白文字バッジは ring で浮かせる */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20);
}

/* footer Powered by の text-white/30 がダークでも白基底背景に negative — bg-navy 上だから OK だがコントラスト改善 */
footer.bg-navy .text-white\/30 { color: rgba(255,255,255,0.55); }

/* "ログアウト" ボタン text-navy/40 が dark で消える */
.dark form button.text-navy\/40,
.dark form button.text-navy\/40:hover {
  color: rgba(255,255,255,0.55) !important;
}
.dark form button.text-navy\/40:hover { color: rgba(255,255,255,0.85) !important; }

/* "こんにちは、◯さん" header text-navy/60 → dark variant */
.dark span.text-navy\/60 { color: rgba(255,255,255,0.65); }

/* 共通: text-navy without dark variant
   → v9: forms.css の全レイアウト共通セーフティネットへ移管（ここでは削除）。
   旧 `.dark .text-navy` は無ガードで bg-white ピル内の文字まで白化させ
   「白ピル×白文字」事故を起こしていた。 */

/* hero overlay の navy → dark時は暗くなりすぎ */
/* (hero は背景画像 + navy/85 のため、ダークでも見た目はOK。スキャナ誤検出のみ) */

/* "予約する" ボタンが bg-teal-400 + text-white = contrast 1.54 (light/dark共) → bg-teal-500 へ */
header .bg-teal-400 {
  background-color: #15918b !important; /* teal-500 */
}
header .bg-teal-400:hover {
  background-color: #0e7a76 !important;
}

/* 大型 CTA ボタン bg-teal-400 text-white も同様 */
section .bg-teal-400.text-white,
.bg-teal-400.text-white.font-bold {
  background-color: #15918b !important;
}
section .bg-teal-400.text-white:hover,
.bg-teal-400.text-white.font-bold:hover {
  background-color: #0e7a76 !important;
}

/* Body の bg-white は light時は背景も白なのでビジターはノーマル。ただし dark時は dark:bg-[#0b0b1d]/* があるので OK */

/* PIN code badge: text-accent on bg-accent が同色 → これは UNLOCK PIN タイトルを下記で修正 */
.dark .text-accent {
  color: #fb923c !important; /* orange-400 */
}

/* PIN container dark mode: 
   bg-accent-50 dark:bg-accent/10 → 文字を明るめ orange-300 で */
.dark .bg-accent\/10 .text-accent { color: #fdba74 !important; }
/* v9: 旧 rgba(232,93,44,0.15) は帯全体が焦げ茶になり他セクションと不統一
   → ベース(#0b0b1d)より一段明るい navy 面でセクションリズムを維持 */
.dark .bg-accent-50 { background-color: #14142c !important; }

/* v18.7: data-plan-color が暗色なら ダーク時に強制 white */
/* 主要対象は #1a1a3e (premium navy) */
.dark [data-plan-color="#1a1a3e"],
.dark [data-plan-color="#1A1A3E"] {
  color: #ffffff !important;
}

/* v18.7: 明色 plan badge を白カード上で読めるように darker */
[data-plan-color="#71e2dc"], [data-plan-color="#47d6d4"], [data-plan-color="#3bc4c2"] {
  color: #0e7a76 !important;
}
.dark [data-plan-color="#71e2dc"], .dark [data-plan-color="#47d6d4"], .dark [data-plan-color="#3bc4c2"] {
  color: #71e2dc !important;
}
[data-plan-color="#9ca3af"] {
  color: #4b5563 !important;
}
.dark [data-plan-color="#9ca3af"] {
  color: #d1d5db !important;
}

/* "01"/"02"/"03" 大型ステップ番号 — text-accent/10 → 視認性悪い → /35 に */
section .text-accent\/10 { color: rgba(232, 93, 44, 0.55) !important; }
.dark section .text-accent\/10 { color: rgba(251, 146, 60, 0.65) !important; }

/* LINE button bg-[#06c755] text-white — 2.26 NG → text-shadow で輪郭付与 */
a[class*="bg-[#06c755]"], button[class*="bg-[#06c755]"] {
  background-color: #047857 !important;
}
.bg-\[\#06c755\] {
  background-color: #047857 !important;
}

/* LINE button: brand green with darker shade for AA */
a[class*="bg-[#06c755]"], button[class*="bg-[#06c755]"], .bg-\[\#06c755\] {
  background-color: #00b900 !important; /* LINE darker green - still brand */
  font-weight: 800;
}

/* ─────────────────────────────────────────────
   v18.42: チェックボックス / ラジオの統一スタイル
   - light 時にチェックボックスの枠が真っ黒に見える問題を修正
   - 統一された teal 枠 + チェック時に塗りつぶし
   - dark モードでも視認性確保
   ───────────────────────────────────────────── */
input[type="checkbox"]:not(.sr-only),
input[type="radio"]:not(.sr-only) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgba(26, 26, 62, 0.30); /* navy/30 */
  background-color: #ffffff;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s, background-color 0.15s;
}
input[type="checkbox"]:not(.sr-only) { border-radius: 4px; }
input[type="radio"]:not(.sr-only)    { border-radius: 9999px; }

input[type="checkbox"]:not(.sr-only):hover,
input[type="radio"]:not(.sr-only):hover {
  border-color: #15918b; /* teal-500 */
}

input[type="checkbox"]:not(.sr-only):checked,
input[type="radio"]:not(.sr-only):checked {
  background-color: #15918b; /* teal-500 */
  border-color: #15918b;
}

/* チェックボックスの ✓ */
input[type="checkbox"]:not(.sr-only):checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* ラジオの ● */
input[type="radio"]:not(.sr-only):checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]:not(.sr-only):focus-visible,
input[type="radio"]:not(.sr-only):focus-visible {
  outline: 2px solid rgba(21, 145, 139, 0.5);
  outline-offset: 2px;
}

input[type="checkbox"]:not(.sr-only):disabled,
input[type="radio"]:not(.sr-only):disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* dark mode */
.dark input[type="checkbox"]:not(.sr-only),
.dark input[type="radio"]:not(.sr-only) {
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.05);
}
.dark input[type="checkbox"]:not(.sr-only):hover,
.dark input[type="radio"]:not(.sr-only):hover {
  border-color: #71e2dc;
}
.dark input[type="checkbox"]:not(.sr-only):checked,
.dark input[type="radio"]:not(.sr-only):checked {
  background-color: #71e2dc;
  border-color: #71e2dc;
}
.dark input[type="checkbox"]:not(.sr-only):checked::after { border-color: #1a1a3e; }
.dark input[type="radio"]:not(.sr-only):checked::after    { background-color: #1a1a3e; }