/* 明るい版: アプリアイコンの色（水色 #8ED6FF → 淡い紫 #F4F1FF → ピンク #FFB6D5、差し色 #FF6FA8・#5BB8F0）に合わせる。
   style.css のあとに読み込み、色まわりだけを上書きする */
:root {
  color-scheme: light;
  --bg: #f8f7ff;
  --bg-raise: #ffffff;
  --card: rgba(255, 255, 255, 0.72);
  --card-strong: rgba(255, 255, 255, 0.92);
  --line: rgba(60, 70, 120, 0.11);
  --line-strong: rgba(60, 70, 120, 0.2);
  --text: #1c1e2b;
  --muted: #555b6e;
  --dim: #868b9c;
  --blue: #3fa9e8;
  --blue-soft: #2f9ad9;
  --pink: #ff5f9e;
  --pink-soft: #e8508f;
  --link: #2b8fd0;
}
body {
  background:
    radial-gradient(1200px 700px at 0% -10%, rgba(142, 214, 255, 0.45), transparent 60%),
    radial-gradient(1100px 700px at 100% 0%, rgba(255, 182, 213, 0.45), transparent 60%),
    linear-gradient(180deg, #f6fbff 0%, #f8f7ff 40%, #fff7fb 100%);
  background-attachment: fixed;
}

header.site .bar { background: rgba(255, 255, 255, 0.72); box-shadow: 0 6px 24px rgba(60, 70, 120, 0.06); }
header.site nav a:hover { background: rgba(60, 70, 120, 0.06); }

.hero::before {
  background:
    radial-gradient(closest-side, rgba(255, 143, 192, 0.55), transparent 70%) 62% 46% / 46% 40% no-repeat,
    radial-gradient(closest-side, rgba(142, 214, 255, 0.7), transparent 70%) 34% 56% / 50% 44% no-repeat,
    linear-gradient(90deg, transparent 18%, rgba(142, 214, 255, 0.35) 42%, rgba(255, 182, 213, 0.4) 58%, transparent 82%) center / 100% 22% no-repeat;
}
.hero .icon { filter: drop-shadow(0 18px 40px rgba(255, 111, 168, 0.3)); }
.hero h1 .grad { background: linear-gradient(100deg, #36a3e3, #7d7cf0 48%, #ff5f9e); -webkit-background-clip: text; background-clip: text; }

.btn { background: rgba(255, 255, 255, 0.8); }
.btn:hover { background: #fff; }
.btn.primary { background: linear-gradient(135deg, #ff8fc0, #ff6fa8); color: #fff; box-shadow: 0 10px 26px rgba(255, 111, 168, 0.32); }
.btn.primary:hover { background: linear-gradient(135deg, #ff9ac7, #ff5f9e); }

.showcase::before {
  background: radial-gradient(closest-side, rgba(142, 214, 255, 0.55), transparent), radial-gradient(closest-side at 70% 60%, rgba(255, 182, 213, 0.6), transparent);
}
.frame { box-shadow: 0 30px 70px rgba(60, 70, 120, 0.18); }
.feature .shot { box-shadow: 0 24px 60px rgba(60, 70, 120, 0.16); }
.feature .text p { color: var(--dim); }

.card { box-shadow: 0 4px 18px rgba(60, 70, 120, 0.05); }
.plan { background: rgba(255, 255, 255, 0.75); }
.plan.pro { border-color: rgba(255, 111, 168, 0.45); background: linear-gradient(160deg, rgba(255, 182, 213, 0.45), rgba(142, 214, 255, 0.3)); }

.band {
  background: radial-gradient(120% 140% at 0% 0%, rgba(142, 214, 255, 0.45), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(255, 182, 213, 0.5), transparent 55%), #ffffff;
}

.page-head::before {
  background: radial-gradient(closest-side at 30% 50%, rgba(142, 214, 255, 0.5), transparent), radial-gradient(closest-side at 70% 40%, rgba(255, 182, 213, 0.5), transparent);
}
.prose p, .prose li, td, .faq details > div { color: #3b4052; }
th { background: rgba(142, 214, 255, 0.16); }
footer.site { border-top-color: rgba(60, 70, 120, 0.1); }