/* hubline 2회차 — 벌마루(가상 양봉원) 디자인 시스템 정본 (복제 모드 · 레이아웃은 research.md §1~§3 실측 그대로)
 * 이름은 Tailwind 4 @theme 이름공간. 선언은 :root — 브라우저는 @theme 블록을 읽지 않는다(#73).
 * 2회차에서 바뀐 것은 색 블록뿐이다: 남색·인디고·코랄 → 밀랍·흙·꿀·잎. 레퍼런스·1회차와 같은 hex 0. 쓰는 곳 규칙은 DESIGN.md. */

:root {
  /* ── 색: 면 (밀랍) ── */
  --color-bg: #fffcf3;            /* 바탕 한 면 — 밀랍 흰 */
  --color-surface: #fcf7ea;       /* 홈 카테고리 카드 */
  --color-surface-2: #f8f1df;     /* GNB 보조 버튼 · 코드(라벨) 블록 */
  --color-surface-3: #f2e9d2;     /* 로트 등록(=서버 등록) 버튼 */
  --color-on-dark: #fffcf3;       /* 흙·잉크 면 위 글 */

  /* ── 색: 글 (흙) ── */
  --color-ink: #1f1810;           /* 제목·본문 · 광고 패널 면 */
  --color-ink-2: #6a5d48;         /* 생산자·보조 글·kicker (≥4.5) */

  /* ── 색: 선 (이 템플릿의 뼈대) ── */
  --color-line: #e0d5bd;          /* 격자선·카드 테두리·교차점 링 — 장식선 */
  --color-line-soft: #ece4d2;     /* 카드 안 구분선·표 행 */
  --color-field: #a08b62;         /* 입력·보조 버튼 테두리 (≥3:1, 개선②) */
  --color-toolbar: #d4c49f;       /* 툴바 버튼 테두리 — 글 라벨이 식별 */

  /* ── 색: 강조 = 짙은 메밀꿀 갈색 (면이 되지 않는다) ── */
  --color-primary: #7a4208;       /* 채운 주 버튼 · 링크 · 라벨 · 배지 글 */
  --color-primary-hover: #5c3105;
  --color-primary-muted: #9c7440; /* 칩·로트 등록 테두리 */
  --color-primary-soft: #d5bc8f;  /* 배지 테두리 · 꺼진 화살표 · 인용 선 · 꼬리 띠 위 고지 글 */
  --color-primary-wash: #f5ead1;  /* 배지 · "가상" 딱지 바탕 */
  --color-notice: #f7e0a0;        /* 공지 띠 채움 — 꿀빛, 명도 80%(qa-2 P2-2: #f4d27a 는 옅은 팔레트 속에서 홀로 짙었다) (3쪽만) */
  --color-notice-line: #dcbd66;
  --color-band: #3a2512;          /* letters 밴드 · 꼬리 띠 — 짙은 흙(밤꿀) */
  --color-band-line: #7d6040;     /* 밴드 위 벌집 선망 */

  /* ── 색: 일러스트 두 색 (잎 + 꿀) ── */
  --color-illus: #3d7236;         /* 잎 초록 선 — 일러스트 1색 (.il-a) */
  --color-honey: #c08000;         /* 꿀 금빛 선·점 · 라이브 점 (.il-b) — 글에는 쓰지 않는다 */
  --color-honey-ink: #8f5a00;     /* 꿀 계열 작은 글 (≥4.5) */

  /* ── 서체 ── */
  --font-display: "Hahmlet", "Noto Serif KR", serif;
  --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-label: "Archivo", "Pretendard Variable", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-weight-display: 800;
  --font-weight-display-sm: 700;
  --font-weight-band: 900;
  --font-weight-label: 700;

  /* ── 글자 크기 (한글 보정 7/8, 개선③ · 폭 표 wireframe §6) ── */
  --text-band: clamp(3.5rem, 1.5rem + 7vw, 7rem);                /* "POSTS" 56→112 */
  --text-band--line-height: 0.9;
  --text-display-2xl: clamp(2rem, 1.25rem + 3vw, 4rem);          /* posts H1 32→64 */
  --text-display-2xl--line-height: 1.15;
  --text-display-xl: clamp(1.75rem, 1.25rem + 2.6vw, 3.5rem);    /* 홈 H1·목록 H1·상세 H1 28→56 */
  --text-display-xl--line-height: 1.15;
  --text-display-lg: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem);  /* 구간 H2 26→42 */
  --text-display-lg--line-height: 1.2;
  --text-display-md: clamp(1.5rem, 0.75rem + 1.5vw, 2rem);       /* 홈 카드 제목 24→32 */
  --text-display-md--line-height: 1.25;
  --text-display-sm: 1.25rem;                                    /* 광고·조항·카드 제목(세리프) 20 */
  --text-display-sm--line-height: 1.35;
  --text-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);      /* 히어로 한 문장 17→22 */
  --text-lead--line-height: 1.55;
  --text-body-lg: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);         /* 홈 카드 설명 16→18 */
  --text-body-lg--line-height: 1.7;
  --text-card-title: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);    /* 서버 카드 이름(산세리프) 18→20 */
  --text-card-title--line-height: 1.4;
  --text-body: 1rem;
  --text-body--line-height: 1.6;
  --text-article: 1.0625rem;                                     /* 긴 글 17 */
  --text-article--line-height: 1.75;
  --text-body-sm: 0.9375rem;                                     /* 서버 카드 설명 15 */
  --text-body-sm--line-height: 1.65;
  --text-small: 0.875rem;                                        /* 제공자·공지·메타 값 14 */
  --text-small--line-height: 1.45;
  --text-caption: 0.8125rem;                                     /* 최신 호 캡션 13 */
  --text-caption--line-height: 1.5;
  --text-label: 0.9375rem;                                       /* TRENDING (Archivo 700) 15 */
  --text-label--letter-spacing: 0.04em;
  --text-meta-label: 0.75rem;                                    /* 분류·주간 방문 12 */
  --text-meta-label--letter-spacing: 0.02em;
  --text-kicker: 0.6875rem;                                      /* HUBLINE kicker 11 */
  --text-kicker--letter-spacing: 0.06em;
  --text-code: 0.875rem;
  --text-code--line-height: 1.6;

  /* ── 간격: 고정 부품 ── */
  --spacing: 0.25rem;             /* 4px 기본 단위 */
  --spacing-frame: 90rem;         /* 프레임 최대 1440 */
  --spacing-ring: 9px;            /* 교차점 링 지름 */
  --spacing-hairline: 1px;
  --spacing-touch: 2.75rem;       /* 44 — 입력·버튼·칩·닫기 */
  --spacing-badge: 1.875rem;      /* 30 */
  --spacing-ad: 14rem;            /* 광고 칸 224 */
  --spacing-ad-gap: 2rem;         /* 32 */
  --spacing-search: 48rem;        /* 검색 묶음 768 */
  --spacing-search-btn: 6.5rem;   /* 104 */
  --spacing-subscribe: 18.75rem;  /* 구독 입력 300 */
  --spacing-home-card: 15rem;     /* 홈 카드 높이 240 */
  --spacing-server-card: 18rem;   /* 서버 카드 높이 288 */
  --spacing-card-rule: 11.75rem;  /* 서버 카드 구분선 위치 188 */
  --spacing-measure: 45rem;       /* 긴 글 칼럼 720 */
  --spacing-issue-box: 21.75rem;  /* 지난 호 상자 348 */

  /* ── 간격: 폭 단계 (≥1280 값 · 아래 @media 가 덮는다, 테두리 상자 안쪽은 리터럴 #50) ── */
  --spacing-gutter: 1.5rem;       /* 프레임 바깥 24 (개선①) */
  --spacing-frame-pad: 6rem;      /* 프레임 안쪽 96 */
  --spacing-gnb: 4.5rem;          /* 72 */
  --spacing-notice: 4rem;         /* 64 */
  --spacing-hero-top: 6rem;       /* 96 */
  --spacing-hero-bottom: 5rem;    /* 80 */
  --spacing-hero-gap: 3rem;       /* 48 */
  --spacing-section: 5rem;        /* 선→H2 80 */
  --spacing-heading-gap: 3.5rem;  /* H2→카드 56 */
  --spacing-home-card-gap: 2.5rem;/* 40 */
  --spacing-grid-gap: 1.5rem;     /* 디렉터리 카드 24 */
  --spacing-card-pad: 1.5rem;     /* 서버 카드 안쪽 24 */
  --spacing-tile-pad: 1rem;       /* 홈 카드 안쪽 16 */
  --spacing-band: 15rem;          /* posts 밴드 240 */
  --spacing-band-inset: 2.5rem;   /* 밴드 글 왼 40 */

  /* ── 모서리 ── */
  --radius-sm: 4px;               /* 카드·입력·칩·버튼·배지 */
  --radius-md: 6px;               /* 숫자 타일 */
  --radius-lg: 8px;               /* 지난 호 상자 */
  --radius-full: 9999px;          /* 링·점 */

  /* ── 그림자: 없다 — 포커스 링만 ── */
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);

  /* ── 움직임 ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --default-transition-duration: 150ms;
  --animate-live: live-pulse 2s var(--ease-in-out) 3;
}

@media (max-width: 1279px) {
  :root {
    --spacing-frame-pad: 4rem;          /* 64 */
    --spacing-hero-top: 5rem;
    --spacing-hero-bottom: 4rem;
    --spacing-home-card-gap: 1.5rem;    /* 24 */
  }
}

@media (max-width: 1023px) {
  :root {
    --spacing-gutter: 1rem;             /* 16 */
    --spacing-frame-pad: 2.5rem;        /* 40 */
    --spacing-gnb: 3.5rem;              /* 56 */
    --spacing-hero-top: 4rem;
    --spacing-hero-bottom: 3.5rem;
    --spacing-section: 4rem;
    --spacing-heading-gap: 2.5rem;
    --spacing-band: 12.5rem;            /* 200 */
  }
}

@media (max-width: 719px) {
  :root {
    --spacing-gutter: 0.75rem;          /* 12 — 390 에서도 세로선이 보인다 */
    --spacing-frame-pad: 1.25rem;       /* 20 */
    --spacing-notice: 4.75rem;          /* 2줄 76 */
    --spacing-hero-top: 2.5rem;         /* 40 */
    --spacing-hero-bottom: 2.5rem;
    --spacing-hero-gap: 2rem;
    --spacing-section: 3rem;            /* 48 */
    --spacing-heading-gap: 2rem;
    --spacing-home-card-gap: 1rem;      /* 16 */
    --spacing-home-card: 12.5rem;       /* 200 */
    --spacing-grid-gap: 1rem;
    --spacing-card-pad: 1.25rem;        /* 20 */
    --spacing-band: 10rem;              /* 160 */
    --spacing-band-inset: 1.25rem;
  }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --default-transition-duration: 0ms;
    --animate-live: none;
  }
}