/* 웹폰트 — @import 는 stylesheet 최상단 필수 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

/* ============================================================
 * 브랜딩 폰트 — 감탄로드 (로고·대제목·태그)
 * ============================================================ */
@font-face {
  font-family: 'GamtanRoad Gamtan';   /* 감탄체 — 로고 전용 */
  src: url('../fonts/GamtanRoadGamtan.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GamtanRoad Batang';   /* 바탕체 — 글 대제목 */
  src: url('../fonts/GamtanRoadBatang-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GamtanRoad Batang';
  src: url('../fonts/GamtanRoadBatang-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GamtanRoad Dotum';    /* 돋움체 — 카테고리 태그 */
  src: url('../fonts/GamtanRoadDotum-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GamtanRoad Dotum';
  src: url('../fonts/GamtanRoadDotum-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
 * 호미클럽 — 디자인 토큰 (단일 출처)
 * 모든 색·간격·radius·폰트는 var(--name) 으로만 사용. hex 하드코딩 ❌
 * ============================================================ */
:root {

  /* ── 색: 모노크롬 + 아이보리 ── */
  --ink-900: #1A1A1A;   /* 본문·강조 */
  --ink-700: #3F3F3F;   /* 보조 */
  --ink-500: #717171;   /* 메타·비활성 */
  --ink-300: #C9C9C9;   /* 외곽선 */
  --ink-200: #E5E5E5;
  --ink-100: #F4F4F4;
  --ink-50:  #FAFAFA;
  --ink-0:   #FFFFFF;   /* 반전 텍스트 — 어두운 배경 위 흰 글씨 */

  --bg-page:  #F8F8F6;  /* 페이지 배경 — 밝은 오프화이트 (누런기 제거) */
  --surface:  #FFFFFF;  /* 카드·패널 면 */
  --hairline: rgba(0,0,0,.12);

  /* 카테고리 점 전용색 (작은 dot 에만) */
  --dot-health:  #5AAA3E;  /* 건강 */
  --dot-season:  #8B6F47;  /* 제철 */
  --dot-cook:    #D87F2D;  /* 요리 */
  --dot-crop:    #C9A11B;  /* 작물 도감 */

  /* 광고 자리표시 (목업 전용) */
  --ad-bg:     #EFEFEC;
  --ad-line:   #DEDEDA;
  --ad-label:  #9A9A93;

  /* 소셜 로그인 브랜드색 (외부 규정 — 토큰으로 격리) */
  --kakao:     #FEE500;
  --kakao-ink: #191600;
  --naver:     #03C75A;
  --naver-ink: #FFFFFF;

  /* ── 타이포 ── */
  --font-body:    'Noto Serif KR', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
  --font-heading: 'Pretendard', 'Pretendard Variable', 'Apple SD Gothic Neo',
                  'Malgun Gothic', system-ui, -apple-system, sans-serif;

  /* 브랜딩 폰트 (감탄로드) */
  --font-logo:  'GamtanRoad Gamtan', 'Pretendard', system-ui, sans-serif;   /* 로고 */
  --font-title: 'GamtanRoad Batang', 'Noto Serif KR', serif;                /* 글 대제목 */
  --font-tag:   'GamtanRoad Dotum', 'Pretendard', system-ui, sans-serif;    /* 카테고리 태그 */

  --fs-caption: 12px;
  --fs-meta:    13px;
  --fs-body:    15px;
  --fs-read:    17px;   /* 글 상세 본문 읽기 크기 */
  --fs-title:   16px;
  --fs-h3:      18px;
  --fs-h2:      20px;
  --fs-hero:    23px;
  --fs-display: 34px;

  --lh-tight:   1.22;   /* 거대 단일행 */
  --lh-heading: 1.34;   /* 히어로·큰 제목 */
  --lh-snug:    1.4;
  --lh-title:   1.55;   /* 카드·글 대제목 (바탕체) — 넉넉한 행간 */
  --lh-body:    1.6;
  --lh-loose:   1.85;   /* 글 상세 본문 (긴 글 가독성) */

  --tracking-tight:  -0.02em;
  --tracking-title:  -0.01em;   /* 대제목 (바탕체) — 살짝만 */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ── 간격 (8px 기반) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── radius ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ── 그림자 (절제) ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 6px 20px rgba(0,0,0,.07);

  /* ── 레이아웃 폭 ── */
  --wrap-max:    1200px;   /* 전체 그리드 최대 폭 */
  --sidebar-w:   300px;    /* 우측 사이드바 (300×250 광고 기준) */
  --gap-col:     32px;     /* 본문 ↔ 사이드바 간격 */
  --header-h:    60px;

  /* ── z-index ── */
  --z-header:   100;
  --z-drawer:   1000;
  --z-backdrop: 900;

  /* ── 전환 ── */
  --t-fast: .15s;
  --t-base: .25s;
  --ease:   cubic-bezier(.3,.7,.4,1);

  /* ── 반응형 기준점 (참고용 주석) ──
   *  모바일 ~767  |  태블릿 768~1023  |  데스크톱 1024~  */
}

:focus-visible {
  outline: 2px solid var(--dot-health);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}