/* ==========================================================================
   binderhr 클론 — 글로벌 디자인 토큰 (globals.css)
   원본 실측값: _original/analysis.md
   Bricks Builder 적용: 아래 변수는 BRICKS-GUIDE.md의 Global Colors / Global
   Typography 등록표와 1:1 대응. Bricks에 등록한 뒤 이 파일은 세부 스타일
   유지용으로 enqueue 하거나, 값을 등록 후 삭제해도 동작하도록 변수 우선 참조.
   ========================================================================== */

@font-face {
  font-family: "Pretendard Variable";
  src: url("/wp-content/themes/bricks-child/assets/binder/fonts/pretendard/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 컬러: 브랜드 (Bricks Global Colors "Primary" 그룹) ---- */
  --color-primary-500: #426ADF; /* 프라이머리: 버튼·링크·eyebrow */
  --color-primary-600: #224ECC; /* 버튼 hover */
  --color-primary-700: #1B3DA0; /* 진한 블루 */
  --color-primary-300: #99AFEE; /* 보더 강조, 별 */
  --color-primary-100: #DBE2F9; /* 칩 배경 */
  --color-primary-50:  #F0F4FD; /* 카드 그라디언트 끝 */
  --color-primary-25:  #F5F7FE; /* 표 줄무늬, 카드 그라디언트 시작 */

  /* ---- 컬러: 뉴트럴 (Bricks Global Colors "Neutral" 그룹) ---- */
  --color-ink:        #1F1F21; /* 제목·강조 텍스트, 푸터 배경 */
  --color-gray-700:   #505255; /* 진한 본문 */
  --color-gray-600:   #696B6F; /* 카드 본문 */
  --color-gray-500:   #8F9195; /* 보조 텍스트 */
  --color-gray-400:   #A9ABAE; /* 메타(날짜 등) */
  --color-gray-200:   #E3E4E5; /* 보더 */
  --color-gray-100:   #EEEEF0; /* 헤더 하단 보더, 카드 보더 */
  --color-gray-50:    #F8F8F9; /* 연회색 배경 */
  --color-surface:    #F6F8FC; /* 섹션 배경 */
  --color-white:      #FFFFFF;

  /* ---- 컬러: 특수 (Bricks Global Colors "Special" 그룹) ---- */
  --color-navy-900:   #0C1330; /* 다크 섹션 배경 */
  --color-navy-800:   #142C74; /* CTA 그라디언트 시작점 */
  --color-cyan:       #1CF4E7; /* 그라디언트 텍스트·장식 글로우 */
  --color-red:        #E40014; /* 경고 */

  /* ---- 그라디언트 ---- */
  --gradient-cta:     linear-gradient(135deg, var(--color-navy-800) 0%, var(--color-primary-600) 55%, var(--color-primary-500) 100%);
  --gradient-text:    linear-gradient(102deg, var(--color-cyan) -37%, var(--color-primary-500) 111%);
  --gradient-card:    linear-gradient(135deg, var(--color-primary-25), var(--color-primary-50));
  --gradient-hero:    linear-gradient(to bottom, #fff 0%, #fff 55%, var(--color-primary-25) 100%);

  /* ---- 타이포 스케일 (Bricks Global Typography, desktop / mobile) ---- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", sans-serif;

  --fs-h1:        56px;  --fs-h1-m:      38px;  /* 히어로, 700, 1.18 */
  --fs-h2:        44px;  --fs-h2-m:      30px;  /* 섹션 제목, 700, 1.25 */
  --fs-h2-xl:     52px;  --fs-h2-xl-m:   30px;  /* 그라디언트 H2, 700, 1.3 */
  --fs-h2-cta:    48px;  --fs-h2-cta-m:  28px;  /* CTA 배너 H2, 700, 1.25 */
  --fs-h3:        22px;  --fs-h3-m:      20px;  /* 카드 제목, 700, 1.45 */
  --fs-h4:        18px;  --fs-h4-m:      17px;  /* 소제목, 700, 1.45 */
  --fs-lead:      20px;  --fs-lead-m:    17px;  /* 히어로 sub, 400, 1.6 */
  --fs-body-lg:   18px;  --fs-body-lg-m: 16px;  /* 섹션 sub, 400, 1.6 */
  --fs-body:      16px;  --fs-body-m:    15px;  /* 본문, 400, 1.7 */
  --fs-body-sm:   15px;  --fs-body-sm-m: 14px;  /* 카드 본문, 400, 1.6 */
  --fs-meta:      14px;  --fs-meta-m:    13px;  /* 메타, 400, 1.5 */
  --fs-eyebrow:   13px;                         /* eyebrow, 700, ls .14em, uppercase */
  --fs-small:     13px;                         /* 캡션, 400, 1.5 */

  /* ---- 간격 스케일 (4px 기반 — Bricks gap/padding 값) ---- */
  --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; --sp-28: 112px;

  /* ---- 레이아웃 ---- */
  --container:        1200px;  /* 콘텐츠 폭 — 좌우 패딩은 별도(--container-pad) */
  --container-pad:    24px;
  --content-post:     720px;   /* 블로그 본문 열 */
  --header-h:         80px;    /* 모바일 64px */
  --header-h-m:       64px;
  --section-py:       80px;    /* md 이상 112px */
  --section-py-md:    112px;

  /* ---- 라운드 ---- */
  --radius-sm: 16px;  --radius-md: 20px;  --radius-lg: 24px;  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ---- 그림자 ---- */
  --shadow-card:  0 1px 2px rgba(12, 19, 48, 0.04), 0 8px 24px rgba(12, 19, 48, 0.06);
  --shadow-hover: 0 2px 4px rgba(12, 19, 48, 0.06), 0 16px 40px rgba(12, 19, 48, 0.10);
  --shadow-btn:   0 8px 20px rgba(66, 106, 223, 0.35);

  /* ---- 브레이크포인트 (Bricks 설정 참조용) ---- */
  --bp-sm: 640px;  --bp-md: 768px;  --bp-lg: 1024px;
}

/* ---- 리셋 & 베이스 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
/* 원본 비율 유지 리셋 — width/height 속성 있어도 비율 유지 */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---- 공용 레이아웃 헬퍼 ---- */
.container { max-width: calc(var(--container) + var(--container-pad) * 2); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }

/* ---- 공용 타이포 클래스 (Bricks 등록 후 매핑 대상) ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary-500);
}
.h1 { font-size: var(--fs-h1-m); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--color-ink); }
.h2 { font-size: var(--fs-h2-m); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-ink); }
.h3 { font-size: var(--fs-h3-m); font-weight: 700; line-height: 1.45; color: var(--color-ink); }
.lead { font-size: var(--fs-lead-m); line-height: 1.6; color: var(--color-gray-500); }
.section-sub { font-size: var(--fs-body-lg-m); line-height: 1.6; color: var(--color-gray-500); }
.meta { font-size: var(--fs-meta-m); line-height: 1.5; color: var(--color-gray-400); }
.gradient-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (min-width: 768px) {
  .h1 { font-size: var(--fs-h1); }
  .h2 { font-size: var(--fs-h2); }
  .h3 { font-size: var(--fs-h3); }
  .lead { font-size: var(--fs-lead); }
  .section-sub { font-size: var(--fs-body-lg); }
  .meta { font-size: var(--fs-meta); }
}

/* 스크롤 리빌은 Bracks 콘텐츠 가시성 보장을 위해 제거 (2026-09-08) */