/* ============================================================
   체크반 디자인 시스템 · 디자인 토큰
   교회 출석앱 톤 (테라코타 · 쿨 그레이 · Pretendard)
   드롭인용: 그대로 붙여넣고 var(--token)으로 사용하세요.
   ============================================================ */

/* 폰트: Pretendard (CDN) — 코드베이스에 이미 있으면 생략
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"> */

:root {
  /* ---------- 포인트 (테라코타) ---------- */
  --accent:             #E15B3C;   /* 주 CTA, 토글 ON, 활성 탭, 진행바, 체크 채움 */
  --accent-strong:      #C4482A;   /* hover/pressed, 강조 텍스트, 링크 */
  --accent-tint:        #FBECE5;   /* 선택된 배경, 정보 배너, 라이트 막대 */
  --accent-tint-border: #F3D9CD;   /* 틴트 위 보더 */
  --accent-tint-hover:  #F6E0D6;   /* 틴트 버튼 hover */

  /* ---------- 아바타 (반/조 번호 · 이니셜) ---------- */
  --avatar-bg:          #F6D9CD;   /* 피치 원 배경 */
  --avatar-fg:          #C4482A;   /* 피치 원 텍스트 */

  /* ---------- 중립 · 표면 ---------- */
  --bg:                 #F1F2F4;   /* 앱 캔버스 (항상 쿨 그레이) */
  --surface:            #FFFFFF;   /* 카드 · 시트 · 바 */
  --surface-alt:        #F7F8F9;   /* 보조 버튼 hover 등 */
  --border:             #EEF0F2;   /* 카드 보더 (그레이 위 거의 안 보임) */
  --border-strong:      #E4E7EB;   /* 인풋/보조버튼 보더 */
  --divider:            #F2F4F6;   /* 리스트 행 구분선 */

  /* ---------- 텍스트 ---------- */
  --text:               #171A21;   /* 제목 · 이름 */
  --text-secondary:     #5C636E;   /* 본문 보조 · 캔버스 위 캡션 (v6–v8 시안 · 흰 바탕 6.06:1 · 캔버스 5.12:1) */
  --text-muted:         #6E7682;   /* 카드 위 캡션 · 비활성 (흰 바탕 4.59:1) */
  --text-placeholder:   #B4BAC3;   /* placeholder · chevron */

  /* ---------- 상태 · 시맨틱 ---------- */
  --success-fg:         #3E9B63;   /* 완료 · 개근 */
  --success-bg:         #E7F2E8;
  --success-border:     #CFE7D6;

  --warning-fg:         #A6772C;   /* 지각 · 필수 · 임계 미달 텍스트 */
  --warning-bar:        #D69A34;   /* 임계 미달 진행바 · 점 */
  --warning-bg:         #F6E9CC;
  --warning-border:     #ECD8A6;

  --danger-fg:          #C4402E;   /* 결석 · 삭제 · 에러 */
  --danger-bg:          #FBE7E3;
  --danger-border:      #F3CFC7;

  --overlay:            rgba(23,28,40,.42);  /* 모달/시트 딤 */

  /* ---------- 라운드 ---------- */
  --r-card: 16px;   /* 카드 · 시트 · 리스트 컨테이너 */
  --r-lg:   14px;   /* 큰 버튼 */
  --r-md:   12px;   /* 인풋 · 중버튼 · 세그먼티드 */
  --r-sm:    8px;   /* 배지(사각) · 작은 요소 */
  --r-pill: 999px;  /* 칩 · 토글 · 아바타 · 알약 배지 */

  /* ---------- 그림자 ---------- */
  --shadow-card:   0 1px 3px rgba(23,28,40,.05);
  --shadow-raise:  0 4px 14px rgba(23,28,40,.08);
  --shadow-pop:    0 12px 34px rgba(23,28,40,.16);
  --shadow-accent: 0 8px 18px rgba(225,91,60,.28);

  /* ---------- 포커스 링 ---------- */
  --focus-ring:    0 0 0 3px rgba(225,91,60,.14);

  /* ---------- 폰트 ---------- */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  /* ---------- 타이포 스케일 (px / weight / letter-spacing) ---------- */
  /* Display  28 / 800 / -.02em   — 랜딩 헤드라인            */
  /* H1       23 / 800 / -.02em   — 화면 타이틀              */
  /* H2       17 / 800 /  0       — 카드 제목                */
  /* Title    15 / 700 /  0       — 리스트 항목 제목          */
  /* Body     14 / 500 / 1.6 lh   — 본문·안내                */
  /* Label    13 / 700 /  0       — 라벨·버튼                */
  /* Caption  12 / 600 /  0       — 보조 설명                */
  /* Micro  10.5 / 800 / .06em    — 오버라인·탭 라벨          */

  /* ---------- 스페이싱 (4px 그리드) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  /* 터치 타깃 최소 44px · 리스트 행 ≈ 60px */
}

/* 숫자는 항상 tabular */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* 한국어 줄바꿈 · 폰트 스무딩 (전역 권장) */
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* 접근성: 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}