/* ============================================================
   토닥 — 통합 디자인 시스템 (v1)
   기준: index.html · medication.html · dashboard.html
   포함 위치: 각 HTML 의 </head> 직전, 인라인 <style> 뒤
   (cascade 상 동일 특이도일 경우 이 파일이 우선 적용됨)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');

:root {
  /* ── 색상 ── */
  --color-primary:        #008F8C;   /* 메인 (청록) */
  --color-primary-dark:   #007A78;
  --color-primary-soft:   #e8f5f5;
  --color-accent:         #0D2B55;   /* 강조 (네이비) */
  --color-bg:             #FFFFFF;   /* 본문 배경 */
  --color-card:           #F0FAFA;   /* 카드 배경 (연한 민트) */
  --color-card-elev:      #FFFFFF;   /* 한 단계 더 띄우는 카드(모달 등) */
  --color-danger:         #C62828;   /* 위험·응급 */
  --color-warn:           #f57f17;
  --color-success:        #2e7d32;
  --color-text:           #1a1a1a;            /* 본문 (17.4:1) AAA */
  --color-text-strong:    #333;                /* 강조 (12.6:1) AAA */
  --color-text-muted:     #555;                /* 보조 (7.5:1)  AAA */
  --color-text-soft:      #6b7280;             /* 옅은 보조 (5.7:1) AA — 회색 일괄 토큰 */
  --color-text-soft-2:    #9ca3af;             /* 더 옅은 보조 (3.5:1) — 큰 글자/장식만 */
  --color-border:         #d0e8e8;
  --color-border-soft:    #e5e7eb;

  /* ── 모양 ── */
  --radius-card:  16px;
  --radius-btn:   12px;
  --radius-pill: 100px;
  --shadow-card:  0 2px 12px rgba(0,0,0,.08);
  --shadow-elev:  0 4px 18px rgba(0,143,140,.12);

  /* ── 타이포 ── */
  --font-base: 'Noto Sans KR','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif;
}

/* ──────────────── 1. 폰트 + 본문 ──────────────── */
html, body {
  font-family: var(--font-base);
}
body {
  background: var(--color-bg);
  color: var(--color-text);
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.2px; }

/* ──────────────── 2. 헤더 (앱 상단) ──────────────── */
header {
  background: var(--color-primary);
  color: #fff;
}
/* 임산부 모드 등 그라디언트 헤더도 단색으로 통일 */
header[style*="gradient"], header.gradient { background: var(--color-primary) !important; }
/* 상단 safe-area 보정 — 상단 헤더가 상태바(시계·배터리·노치)에 안 가리도록.
   [감지 비의존 / 첫 페인트 / 구 WebView 호환]
   기본값은 '순수 고정 px'(floor=base+34). 이 앱이 도는 일부 안드로이드 System WebView 는
   Chromium 79 미만이라 max()(CSS Values L4)를 지원하지 않는데, CSS 는 값 하나가 invalid 면
   그 '선언 전체'를 폐기한다 → max()를 쓰면 padding-top 이 통째로 사라져 헤더가 천장에 붙는다.
   그래서 기본은 함수 없는 고정 px 로 무조건 먹게 하고, max() 를 지원하는 환경(iOS WKWebView·
   신형 WebView)에서만 @supports 로 'base+노치 inset' 정밀값을 추가 적용한다.
   app-styles.css 는 정적 <link>(인라인 <style> 뒤)라 JS·콜드스타트와 무관하게 첫 페인트 적용.
   좌/우/하단 패딩은 각 페이지 인라인 값을 유지. */
/* !important — 페이지 인라인 .top-header{padding:…}/header{padding:…}(동률 0,1,0/0,0,1)를
   구버전 WebView가 소스순서로 안 넘겨주고 인라인을 남기는 비표준 동작 대응. 86f4243의
   먹혔던 조건(!important)을 cap-android 게이트 없이 적용 → 깜빡임 없이 무조건 승. */
header      { padding-top: 54px !important; }   /* 20 + 34 */
.top-header { padding-top: 52px !important; }   /* 18 + 34 */
@supports (top: max(1px, 2px)) {
  header      { padding-top: max(calc(20px + env(safe-area-inset-top)), 54px) !important; }
  .top-header { padding-top: max(calc(18px + env(safe-area-inset-top)), 52px) !important; }
}
/* 인쇄에는 safe-area(상태바) 보정 불필요 — .print-header 등에 +34px 상단 공백이 생기지 않게 리셋 */
@media print { header, .top-header { padding-top: 0 !important; } }

/* iOS WKWebView 자동 줌 방지 — 폼 요소 font-size 16px 미만이면 focus 시 줌인 후 원복 안 됨.
   명시 크기 없는 입력요소의 최소 16px 보장(개별 페이지의 16px 미만 규칙은 각 페이지에서 직접 상향함). */
input, textarea, select { font-size: 16px; }

/* ──────────────── 3. 카드 ──────────────── */
.card,
.summary-card,
.feature-card,
.med-card,
.supp-card,
.week-card,
.fetal-info,
.kick-display,
.advice-card,
.history-card,
.history-section,
.schedule-item,
.modal-sheet,
.quick-add-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card,
.med-card,
.supp-card,
.summary-card,
.fetal-info,
.feature-card,
.week-card,
.advice-card,
.schedule-item {
  background: var(--color-card);
}

/* 모달 시트는 완전 흰색이 가독성 좋음 */
.modal-sheet { background: var(--color-card-elev); }

/* 응급/경고 카드는 색상 유지 */
.emergency-card { background: #fce4ec; border-left: 4px solid var(--color-danger); }

/* feature-card 진입 효과 보존 */
.feature-card { transition: transform .15s, box-shadow .15s; }
.feature-card.sos { background: #fff9f9; border: 1.5px solid #ffcdd2; }

/* ──────────────── 4. 버튼 ──────────────── */
.btn,
.api-save-btn,
.modal-btn.primary,
.add-vital-btn,
.save-btn,
.scan-link,
.contact-call:not(.emergency) {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-family: var(--font-base);
  cursor: pointer;
}
.btn:hover,
.api-save-btn:hover,
.modal-btn.primary:hover { background: var(--color-primary-dark); }

.btn-outline,
.modal-btn.ghost,
.reset-btn {
  background: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-family: var(--font-base);
  cursor: pointer;
}

.btn-danger,
.contact-call.emergency,
.sos-link-card,
.btn-stop {
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-weight: 700;
}

.btn-warn { background: var(--color-warn); color: #fff; border-radius: var(--radius-btn); }

/* ──────────────── 5. 입력 ──────────────── */
input[type=text],
input[type=date],
input[type=time],
input[type=number],
input[type=tel],
input[type=password],
select,
textarea,
.form-input,
.form-textarea {
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  font-family: var(--font-base);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ──────────────── 6. 하단 네비게이션 ──────────────── */
nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-around;
  padding: 8px 0 12px;
  z-index: 100;
}
nav .nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #6b7280;
  text-decoration: none;
  flex: 1;
  transition: color .2s;
  font-family: var(--font-base);
}
nav .nav-item.active { color: var(--color-primary); }
nav .nav-item svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ──────────────── 7. 강조 색 (네이비) ──────────────── */
.app-name,
.section-title,
.page-title-accent,
.score-info h1 {
  color: var(--color-accent);
}
header .app-name,
header h1 { color: #fff; }

/* ──────────────── 8. 토스트/도구바 호환 ──────────────── */
.app-toolbar { background: rgba(255,255,255,.96); }
.app-tts-btn.active,
.app-font-btn.active { background: var(--color-primary); color: #fff; }

/* ──────────────── 9. 작은 일관성 보정 ──────────────── */
.med-name:hover { color: var(--color-primary); }
.specialty-chip,
.med-time-badge,
.supp-time-badge,
.quick-chip:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* 진행 바 색상 통일 */
.progress-bar-fill,
.water-bar-fill { background: var(--color-primary); }

/* placeholder 색 일관 */
::placeholder { color: #6b7280; opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   10. 접근성 — 글로벌 키보드 포커스 (WCAG 2.1 AA Success 2.4.7)
   ══════════════════════════════════════════════════════════════
   - 마우스 사용자에게는 outline 노출 X (`:focus`)
   - 키보드 사용자에게만 청록 outline 표시 (`:focus-visible`)
   - 모든 인터랙티브 요소에 일관 적용
*/
:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2.5px solid var(--color-primary, #008F8C) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* 시니어 친화 — 최소 터치 영역 권장 (44x44px, WCAG 2.5.5 AAA) */
.app-toolbar button,
.tab-item,
.bottom-tabbar a,
.ob-btn,
.feature-tile,
.quick-chip {
  min-height: 44px;
}

/* prefers-reduced-motion — 사용자가 모션 감소 선호 시 애니메이션 단축 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 스크린리더 전용 텍스트 헬퍼 */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════
   11. 시니어 모드 (body.senior-mode)
   ══════════════════════════════════════════════════════════════
   app-common.js 의 applySeniorMode() 가 localStorage 'senior_mode' 값에
   따라 <body>·<html> 에 .senior-mode 클래스를 토글한다.
   - 기본 폰트 17px → 22px        - 줄간격 1.4 → 1.7
   - 버튼 최소 높이 → 72px        - 아이콘 +25%
   - 색상 대비 강화 (WCAG AAA)
   px 단위 인라인 스타일(글꼴 도구바)보다 우선하도록 !important 사용 */
body.senior-mode {
  font-size: 22px !important;
  line-height: 1.7 !important;
  /* 옅은 보조 텍스트 토큰을 더 진하게 — 대비 강화 (AAA) */
  --color-text-soft:   #3f4651;   /* 9.0:1 수준 */
  --color-text-soft-2: #3f4651;
  --color-text-muted:  #2a2f37;
}
body.senior-mode p,
body.senior-mode li,
body.senior-mode label,
body.senior-mode .toggle-desc,
body.senior-mode .header-sub { line-height: 1.7 !important; }

/* 본문 텍스트 확대 (상대값 — 페이지별 px 글씨가 함께 커지도록) */
body.senior-mode p,
body.senior-mode label,
body.senior-mode li,
body.senior-mode input,
body.senior-mode select,
body.senior-mode textarea { font-size: 1.05em; }

/* 버튼·터치 타깃 최소 높이 72px + 글씨 확대 */
body.senior-mode button,
body.senior-mode .btn,
body.senior-mode .btn-outline,
body.senior-mode .btn-danger,
body.senior-mode .btn-warn,
body.senior-mode .ob-btn,
body.senior-mode .modal-btn,
body.senior-mode input[type=submit],
body.senior-mode input[type=button],
body.senior-mode [role="button"] {
  min-height: 72px;
  font-size: 1.05em;
}
/* 작은 아이콘 버튼·하단 탭은 과확대 방지 — 64px */
body.senior-mode .app-toolbar button,
body.senior-mode .app-theme-fab,
body.senior-mode .header-icon-btn,
body.senior-mode .back-btn,
body.senior-mode .avatar { min-height: 0; }
body.senior-mode nav .nav-item,
body.senior-mode .tab-item,
body.senior-mode .bottom-tabbar a { min-height: 66px; }

/* 아이콘 +25% — 이모지 글리프는 font-size, SVG 는 width/height */
body.senior-mode .feature-icon,
body.senior-mode .ft-icon-wrap,
body.senior-mode .tile-icon,
body.senior-mode .qc-icon,
body.senior-mode .category-emoji,
body.senior-mode .today-hero-icon,
body.senior-mode .ct-icon,
body.senior-mode .aa-icon { font-size: 1.25em; }
body.senior-mode nav .nav-item svg,
body.senior-mode .tab-item svg { width: 28px; height: 28px; }

/* 대비 강화 — 옅은 회색 보조 텍스트를 진하게 (WCAG AAA 7:1+) */
body.senior-mode .ft-sub,
body.senior-mode .tile-desc,
body.senior-mode .greeting-time,
body.senior-mode .aa-sub,
body.senior-mode .completion-hint,
body.senior-mode .section-link,
body.senior-mode small { color: #2a2f37 !important; }