/* Everysundae 디자인 토큰 — 2026-11-05 리뉴얼: 인프런 커뮤니티 룩(촘촘한 목록·얇은 선·작은 모서리). 2026-11-06 흰 바탕 + 로고 체리 핑크 포인트로 변경.
   모든 화면은 이 값만 쓴다. 새 색·모양이 필요하면 먼저 여기에 추가한다. */
:root {
  /* 색 — 흰 페이지 바탕에 얇은 선으로 카드·목록을 나누고, 브랜드 포인트는 로고 체리 핑크(#c92b50) 한 계열 */
  --c-page: #ffffff;        /* 페이지 바탕(흰색) */
  --c-bg: #ffffff;          /* 흰 면(카드·입력) */
  --c-milk: #f8f9fa;        /* 연회색 면(흰 카드 안의 칸·입력 비활성) */
  --c-milk-2: #fdecef;      /* 포인트 옅은 면(선택·배지) — 베리 글자 5.4:1 */
  --c-surface-2: #f8f9fa;   /* 더 옅은 면(호버) */
  --c-chip: #eff3fa;        /* 태그 칩 면 */
  --c-chip-ink: #3e4042;    /* 태그 칩 글자 (9.4:1) */
  --c-banner: #3e4042;      /* 페이지 제목 띠 배너 */
  --c-banner-ink: #e9ecef;  /* 띠 배너 보조 글자 (8.8:1) */
  --c-plum: #191f28;        /* 제목·진한 면 */
  --c-plum-2: #333d4b;
  --c-ink: #191f28;         /* 본문 글자 */
  --c-muted: #4e5968;       /* 보조 글자 (흰 7.1:1, 회색 면 6.5:1) */
  --c-line: #e9ecef;        /* 얇은 구분선 */
  --c-line-2: #dee2e6;      /* 카드·입력 테두리 */
  --c-pink: #f2647f;        /* 포인트 면(진한 글자와 5.4:1) */
  --c-pink-2: #f5809a;      /* 포인트 면 hover */
  --c-accent: #c92b50;      /* 주 버튼 면·흰 글자 (5.3:1) — 로고 색과 같다 */
  --c-accent-2: #b02344;    /* 주 버튼 hover (6.6:1) */
  --c-berry: #b8264a;       /* 포인트 글자 — 흰 바탕 6.2:1, 옅은 포인트 면 5.4:1 */
  --c-success: #1f7a4d;
  --c-success-bg: #e3f5ea;
  --c-warn: #8a5a00;
  --c-warn-bg: #fff3d6;
  --c-danger: #c0262d;
  --c-danger-bg: #ffe5e6;
  --c-info-bg: #eef1f5;

  /* 글꼴 — Pretendard(무료·상업 이용 가능) 한 가족. 로고만 Fredoka(SIL OFL) */
  --f-logo: Fredoka, Pretendard, sans-serif;
  --c-logo: #c92b50;        /* 로고 글자·심볼 체리 핑크(시안 29) */
  --f-display: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --f-body: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;

  /* 글자 크기 */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 28px;
  --t-3xl: 40px;
  --t-4xl: 54px;

  /* 간격 (4px 단위) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* 모서리 */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-btn: 6px;
  --r-pill: 999px;

  /* 테두리·그림자 — 굵은 선·각진 그림자 대신 얇은 선과 아주 옅은 그림자 */
  --border: 1px solid var(--c-line-2);
  --border-soft: 1px solid var(--c-line);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 4px 14px rgba(0, 0, 0, .08);

  /* 모션 */
  --m-fast: 150ms;
  --m-base: 300ms;
  --m-slow: 700ms;
  --ease: cubic-bezier(.2, .9, .25, 1);
  --ease-press: cubic-bezier(.34, 1.56, .64, 1); /* 누름에서 돌아올 때 살짝 튕김 */

  /* 배치 */
  --w-max: 1248px;
  --gutter: 24px;
  --header-h: 64px;
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --header-h: 60px;
    --t-3xl: 30px;
    --t-4xl: 38px;
  }
}