/* ============================================================
   style.css — 마음풀 디자인 시스템
   Cloudflare Pages + React 18 + Tailwind
   ============================================================ */

/* 한국어 폰트 로드 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* CSS 변수 */
:root {
  --primary:       #2D6A4F;
  --primary-light: #52B788;
  --primary-pale:  #D8F3DC;
  --primary-dark:  #1B5138;
  --accent:        #F4A261;
  --accent-dark:   #E76F51;
  --purple:        #7C3AED;
  --purple-light:  #EEF0FF;
  --bg:            #FAFAF8;
  --bg2:           #F5F5F0;
  --text:          #1A1A1A;
  --text-sub:      #5A5A5A;
  --text-muted:    #9A9A9A;
  --border:        rgba(0,0,0,0.08);
  --white:         #FFFFFF;
  --shadow:        0 2px 16px rgba(0,0,0,0.07);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.10);
  --r:             12px;
  --r-sm:          8px;
  --r-lg:          20px;
}

/* 전역 리셋 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* 애니메이션 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 네비게이션 반응형 ─────────────────────────────── */
.nav-mobile-btn { display: none !important; }

@media (max-width: 768px) {
  .nav-desktop-links { display: none !important; }
  .nav-mobile-btn    { display: flex !important; }
}

/* ─── 히어로 그리드 반응형 ─────────────────────────── */
@media (max-width: 900px) {
  .hero-grid  { grid-template-columns: 1fr !important; gap: 48px !important; }
  .hero-visual { display: none; }
}

/* ─── 검사 카드 그리드 반응형 ────────────────────────── */
@media (max-width: 1080px) {
  .tests-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .tests-grid { grid-template-columns: 1fr !important; }
}

/* ─── 특징 3열 반응형 ───────────────────────────────── */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: 1fr !important; }
  .ai-grid       { grid-template-columns: 1fr !important; gap: 40px !important; }
  .steps-grid    { grid-template-columns: 1fr !important; }
}

/* ─── 통계 4열 반응형 ───────────────────────────────── */
@media (max-width: 700px) {
  .stats-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ─── 검사 소개 페이지 반응형 ────────────────────────── */
@media (max-width: 820px) {
  .intro-grid { grid-template-columns: 1fr !important; }
}

/* ─── 공통 유틸리티 ─────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ─── 기존 앱 (로그인/대시보드) 에 폰트 적용 ──────── */
.font-sans, input, button, select, textarea {
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
}

/* ─── 스크롤바 ────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #CCCCCC; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #AAAAAA; }

/* ─── 포커스 링 접근성 ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── 상담센터 페이지 반응형 ────────────────────────── */
@media (max-width: 900px) {
  .centers-grid    { grid-template-columns: 1fr !important; }
  .counselor-grid  { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .centers-grid    { grid-template-columns: 1fr !important; }
}