@charset "UTF-8";

:root {
  --bg: #F6F5F2;
  --bg-2: #EDECEA;
  --text: #1c1c1e;
  --text-2: #787870;
  --accent: #3C6B57;
  --accent-light: #EBF0EE;
  --border: #E3E2DE;
  --danger: #B56B66;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);

  /* Home top bar: glass pill & menu button share the same footprint */
  --top-bar-glass-size: 40px;

  /* Filled life hearts (SVG uses currentColor) */
  --heart-pink: #e85d8e;

  /* Glassmorphism — crystal-clear, glossy, translucent */
  --glass-gradient: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.48) 46%,
    rgba(255, 255, 255, 0.34) 100%
  );
  --glass-gradient-chip: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.32) 100%
  );
  /* Top-edge gloss highlight used by ::before layers on glass cards */
  --glass-shine: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.55) 35%,
    rgba(255, 255, 255, 0) 70%
  );
  --glass-border: 1px solid rgba(255, 255, 255, 0.92);
  --glass-backdrop: blur(24px) saturate(1.7) brightness(1.04);
  --glass-shadow-bar:
    0 6px 22px rgba(42, 42, 42, 0.08),
    0 2px 6px rgba(42, 42, 42, 0.04),
    inset 0 1.2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.35);
  --glass-shadow-panel:
    0 16px 44px rgba(42, 42, 42, 0.1),
    0 4px 14px rgba(42, 42, 42, 0.05),
    inset 0 1.4px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(94, 122, 110, 0.06);
  --glass-radius-panel: 20px;

  /* Primary CTA on glass UI (result screen, etc.) */
  --glass-accent-gradient: linear-gradient(
    145deg,
    rgba(94, 122, 110, 0.82) 0%,
    rgba(94, 122, 110, 0.56) 100%
  );
  --glass-accent-gradient-active: linear-gradient(
    145deg,
    rgba(94, 122, 110, 0.9) 0%,
    rgba(94, 122, 110, 0.66) 100%
  );

  /* WKWebView: Latin 優先のスタックだと和字が □ になることがあるため、CJK 対応を先に置く */
  --font:
    -apple-system,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Kaku Gothic Pro",
    system-ui,
    "Segoe UI",
    "Helvetica Neue",
    "Yu Gothic UI",
    YuGothic,
    Meiryo,
    "Noto Sans JP",
    sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  /* 非常に控えめなアンビエントグロー。ガラス要素の背後で屈折を生み、
     透き通る感じを引き立てる。色はアプリ本来のアクセント（ピンク♡／グリーン）を反映 */
  background-image:
    radial-gradient(1100px 680px at 12% 6%, rgba(232, 93, 142, 0.08) 0%, transparent 60%),
    radial-gradient(900px 640px at 92% 22%, rgba(94, 122, 110, 0.08) 0%, transparent 62%),
    radial-gradient(900px 820px at 50% 108%, rgba(94, 122, 110, 0.06) 0%, transparent 65%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-size: 16px;
  line-height: 1.6;
}

button,
input,
textarea {
  font-family: inherit;
  color: inherit;
}