/* ======================================================
   BabyApp PWA — base.css
   전역 CSS 변수 & 공통 리셋
   모든 페이지에서 첫 번째로 로드
   ====================================================== */

/* ── CSS 변수 ───────────────────────────────────────── */
:root {
  /* ── 브랜드 컬러 ── */
  --color-primary: #FF8C42;
  --color-primary-light: #FFA966;
  --color-primary-dark: #e67a30;
  --color-coral: #FF6B6B;
  --color-teal: #4ECDC4;
  --color-teal-dark: #45B7AA;
  --color-green: #66BB6A;
  --color-green-dark: #43A047;
  --color-green-check: #4caf50;
  --color-green-check-dark: #388e3c;
  --color-red: #ff4444;
  --color-male: #42A5F5;
  --color-male-dark: #1976D2;
  --color-female: #EC407A;
  --color-female-dark: #C2185B;

  /* ── 배경 ── */
  --color-bg-warm: #FFF9F0;
  --color-bg-cool: #f5f5fa;
  --color-bg-gray: #f5f5f5;
  --color-bg-dark: #000;
  --color-bg-input: #FAFAFA;

  /* ── 표면 (카드, 버튼 배경 등) ── */
  --color-surface: #fff;
  --color-surface-dim: #f0f0f0;
  --color-surface-hover: #e0e0e0;
  --color-surface-warm: #f0ebe3;
  --color-surface-warm-hover: #e0dbd3;
  --color-surface-warm-alt: #e8e3dc;
  --color-surface-warm-img: #f5ede0;

  /* ── 텍스트 ── */
  --color-text: #333;
  --color-text-dark: #222;
  --color-text-secondary: #555;
  --color-text-tertiary: #666;
  --color-text-muted: #888;
  --color-text-hint: #999;
  --color-text-placeholder: #aaa;
  --color-text-disabled: #bbb;
  --color-text-faint: #ccc;
  --color-text-en: #444;

  /* ── 테두리 ── */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;

  /* ── 그라디언트 (카드 배경) ── */
  --gradient-primary: linear-gradient(145deg, #FF8C42, #FF6B6B);
  --gradient-teal: linear-gradient(145deg, #4ECDC4, #45B7AA);
  --gradient-green: linear-gradient(145deg, #66BB6A, #43A047);
  --gradient-card-growth: linear-gradient(145deg, #E8F5E9, #C8E6C9);
  --gradient-card-album: linear-gradient(145deg, #FFF3E0, #FFE0B2);
  --gradient-card-vaccine: linear-gradient(145deg, #E3F2FD, #BBDEFB);
  --gradient-card-diary: linear-gradient(145deg, #FCE4EC, #F8BBD0);
  --gradient-card-daily: linear-gradient(145deg, #F3E5F5, #E1BEE7);
  --gradient-card-hospital: linear-gradient(145deg, #E0F7FA, #B2EBF2);
  --gradient-card-children: linear-gradient(145deg, #FFF8E1, #FFE082);
  --gradient-card-settings: linear-gradient(145deg, #F5F5F5, #E0E0E0);

  /* ── 뱃지/태그 배경 ── */
  --color-tag-primary-bg: #FFF3E0;
  --color-tag-male-bg: #E3F2FD;
  --color-tag-female-bg: #FCE4EC;
  --color-tag-easy-bg: #E8F5E9;
  --color-tag-easy-text: #2E7D32;
  --color-tag-normal-bg: #FFF3E0;
  --color-tag-normal-text: #E65100;
  --color-tag-hard-bg: #FFEBEE;
  --color-tag-hard-text: #C62828;
  --color-tag-done-bg: #f1f8e9;

  /* ── 그림자 ── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.10);

  /* ── 오버레이 ── */
  --overlay-light: rgba(0, 0, 0, 0.5);
  --overlay-medium: rgba(0, 0, 0, 0.65);
  --overlay-heavy: rgba(0, 0, 0, 0.8);
  --overlay-extra: rgba(0, 0, 0, 0.82);

  /* ── 상태 ── */
  --color-error: #e53935;
  --color-editing-bg: #FFF8F0;

  /* ── 스피너 ── */
  --color-spinner-track: #f0d5bf;

  /* ── 터치 피드백 ── */
  --touch-scale: 0.96;
  --touch-duration: 0.12s;

  /* ── border-radius ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 50%;

  /* ── 레이아웃 ── */
  --max-width: 480px;

  /* ── 폰트 ── */
  --font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

/* ── 공통 리셋 ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  font-family: var(--font-family);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── 포커스 접근성 ───────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── 공통 토스트 ────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--overlay-heavy);
  color: var(--color-surface);
  padding: 12px 24px;
  border-radius: var(--radius-2xl);
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 모션 감소 접근성 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}