@charset "UTF-8";
/* ============================================================
   NEWNEEK 클론 — globals.css
   전역 폰트 / 디자인 토큰 / 리셋 / 베이스
   WordPress Elementor 변환 시 → Elementor Settings > Global Styles(Colors, Typography)
   상세 매핑: BRICKS-GUIDE.md
   ============================================================ */

/* ---------- 폰트: Pretendard Variable (SIL OFL, 셀프호스팅) ---------- */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/pretendard/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

/* ---------- 디자인 토큰 ---------- */
:root {
  /* 컬러 — Elementor Site Settings Colors 등록값 */
  --color-primary: #ff6b00;          /* 브랜드 오렌지: 링크 hover, 활성 탭, 포인트 */
  --color-primary-50: #fff4ea;       /* 칩 배경(연한 오렌지) */
  --color-primary-100: #fae5c7;      /* 로그인 버튼 배경 */
  --color-primary-hover: #e05f00;

  --text-strong: #111213;            /* 제목/본문 (gray-900) */
  --text-body: #454749;              /* 요약/라벨 (gray-700) */
  --text-muted: #5d5f61;             /* 푸터 텍스트 (gray-600) */
  --text-subtle: #838587;            /* 날짜/보조 (gray-500) */
  --text-icon: #9ea0a2;              /* 아이콘 stroke (gray-450) */
  --text-inverse: #ffffff;

  --bg-page: #ffffff;
  --bg-subtle: #f7f7f8;              /* 칩/hover 배경 (gray-50) */
  --bg-soft: #eeeeee;                /* 푸터·AD 카드 배경 (gray-100) */
  --bg-skeleton: #e3e4e5;            /* 스켈레톤/아바타 배경 (gray-200) */

  --border-light: #eeeeee;           /* 카드 썸네일 보더 (gray-100) */
  --border-default: #e3e4e5;         /* 태그 칩 보더 (gray-200) */

  --ad-grad-from: #2bc0be;           /* 인라인 AD 그라데이션 */
  --ad-grad-to: #4e8fe5;

  /* 타이포 — Elementor Site Settings Typography 등록값 (폰트: Pretendard Variable) */
  --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", system-ui, sans-serif;

  --fs-2xs: 10px;
  --fs-xs: 12px;                     /* 카드 메타, 칩 */
  --fs-sm: 14px;                     /* 보조 텍스트, 태그 칩 */
  --fs-base: 16px;                   /* 기본 본문 */
  --fs-lg: 18px;                     /* 카드 제목, 기사 본문 */
  --fs-xl: 20px;                     /* 카테고리 피처드 제목 */
  --fs-2xl: 24px;                    /* 아카이브 H1, 메인 피처드 제목 */
  --fs-3xl: 30px;                    /* 아카이브 H1 (lg) */
  --fs-4xl: 36px;                    /* 싱글 포스트 H1 (md) */

  --lh-tight: 1.3;                   /* 제목용 */
  --lh-snug: 1.45;                   /* 요약용 */
  --lh-body: 1.65;                   /* 기사 본문용 (29.7/18) */
  --ls-tight: -0.025em;              /* 본문 자간 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* 간격 — 4px 기반 스케일 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* 섹션 세로 리듬 */
  --section-gap: 32px;               /* 메인 섹션 사이 (sm: 60px) */
  --section-gap-lg: 60px;
  --page-pt: 20px;                   /* 아카이브 상단 여백 (md: 32px) */
  --page-pt-md: 32px;
  --page-pb: 80px;                   /* 메인 하단 (md: 100px) */
  --page-pb-md: 100px;

  /* 레이아웃 상수 */
  --container: 1280px;               /* max-w-screen-xl */
  --container-pad: 16px;             /* 모바일 좌우 패딩 */
  --article-col: 640px;              /* 싱글 포스트 본문 열 (max-w-screen-sm) */
  --sidebar-w: 262px;                /* 싱글 포스트 사이드바 */
  --header-h: 64px;                  /* 모바일 헤더 */
  --header-gnb-h: 48px;              /* 데스크톱 GNB 행 */
  --header-logo-h: 66px;             /* 데스크톱 로고 행 */
  --header-util-h: 44px;             /* 데스크톱 유틸바 */
  --thumb-ratio: 16 / 9;             /* 썸네일 비율 */
  --radius-sm: 6px;
  --radius-md: 8px;                  /* 카드·버튼·칩 */
  --radius-full: 9999px;             /* pill 칩 */

  /* 브레이크포인트 (참고용 주석 — CSS에서는 미디어쿼리 리터럴 사용)
     sm 640px / md 768px / lg 1024px / xl 1280px */
}

/* ---------- 리셋 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, p, ul, ol, li, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

address {
  font-style: normal;
}

/* ---------- 베이스 ---------- */
body {
  font-family: var(--font-family);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  background-color: var(--bg-page);
  word-break: keep-all;
}

.container {
  width: 100%;
  max-width: 1312px;               /* 1280px 콘텐츠 + 좌우 패딩 16px */
  margin-inline: auto;
  padding-inline: var(--container-pad);
}