@charset "utf-8";

/* ==========================================================================
   base.css — 게시판 · 회원 스킨이 쓰는 디자인 토큰
   --------------------------------------------------------------------------
   화면 모양은 layout.css · style.css · modify.css 가 그립니다.
   이 파일은 layout.css 보다 *먼저* 읽히므로 같은 이름은 layout.css 값이 이깁니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
  /* --- 브랜드 컬러 ---
     주의: --primary-color 는 '진한 기본색' 입니다. 게시판 스킨·서브페이지에서
     흰 글씨를 얹는 버튼 배경 등으로 157곳에서 쓰이므로 밝은 색으로 바꾸지 마세요.
     포인트(강조) 색을 바꾸려면 --point-color 계열만 수정하면 됩니다.

     바탕은 검정(#070707) · 흰색 · 회색 세 단계로 가고, 강조에만 빨강을 씁니다.
     빨강은 라벨 · 버튼 · 링크처럼 '누르거나 눈에 먼저 들어와야 하는 것'에만 씁니다.
     사진 위를 덮는 층은 --dark-rgb 채널값을 rgba() 안에서 씁니다. */
  --primary-color: #070707; /* 진한 기본색 (버튼 배경 · 강조 라인) */
  --secondary-color: #353535; /* primary 의 hover 톤 */
  --tertiary-color: #f5f5f5; /* 옅은 면 */

  --point-color: #ea332b; /* ★ 포인트(레드) — 브랜드 색 변경 지점 */
  --point-dark: #c62a23; /* 포인트 hover / active */
  --point-soft: #fdecea; /* 포인트 옅은 배경 */
  --accent-warm: #dd7b22; /* 보조 강조(주황) — 맨 위로 버튼 그라데이션 */
  /* 포인트색을 배경으로 깔았을 때 그 위에 올릴 글자색.
     포인트를 밝은 색으로 바꾸면 이 값을 어두운 색으로 함께 바꿔야 합니다. */
  --point-on: #ffffff;

  /* --- 텍스트 --- */
  --headline-color: #070707; /* 제목 */
  --body-color: #474747; /* 본문 */
  --text-color: #474747; /* body 기본 색 */
  --muted-color: #6f6f6f; /* 보조 설명 · 캡션 (흰 배경에서 4.9:1) */
  --darkgray-color: #777777;

  /* --- 배경 · 면 --- */
  --white-color: #ffffff;
  --lightgray-color: #f5f5f5; /* 섹션 교차 배경 */
  --light-color: #fafafa; /* 아주 옅은 배경 */
  --background-color: #fafafa; /* .default.bg 배경 */
  --dark-color: #070707; /* 다크 패널 */
  --dark-rgb: 7, 7, 7;
  /* 사진 위에 덮는 막 (검정).
     ★ 사진 위 오버레이 색을 바꾸려면 여기만 고치면 됩니다. */
  --veil-rgb: 0, 0, 0; /* 사진 위 어둡게 덮는 층에 쓰는 채널값 */
  --footerbg-color: #070707; /* 푸터 배경 */
  --w-color: #ffffff; /* 흰 텍스트 별칭 */

  /* --- 선 --- */
  --line-color: #e6e9ec;
  --line-strong: #d6dade;

  /* --- 라운드 --- */
  /* 버튼은 6px 수준의 절제된 라운드를 쓴다 */
  --radius-xs: 0.6rem;
  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* --- 그림자 --- */
  --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.07);
  --shadow-lg: 0 20px 60px rgba(17, 17, 17, 0.1);
  --shadow-brand: 0 10px 30px rgba(7, 7, 7, 0.18);

  /* --- 타이포 스케일 ---
     H1 64/48/34/32 · H2 48/36/28/26 · H3 26/24/20 · 본문 16 (px)
     clamp(최소, 유동, 최대) 로 브레이크포인트 없이 위 값을 따라간다. */
  --fs-h1: clamp(3.2rem, 4.45vw, 6.4rem); /* 히어로 대제목 */
  --fs-h2: clamp(2.6rem, 3.34vw, 4.8rem); /* 섹션 제목 */
  --fs-h3: clamp(2.4rem, 2.6vw, 3.2rem); /* 소제목 */
  --fs-h4: clamp(1.8rem, 1.9vw, 2.4rem); /* 카드 제목 */
  --fs-lead: clamp(1.6rem, 1.25vw, 1.8rem); /* 리드 문단 */
  --fs-body: 1.6rem; /* 본문 (고정) */
  --fs-sm: 1.5rem; /* 보조 텍스트 · 푸터 */
  --fs-xs: 1.3rem; /* 캡션 */
  --fs-label: 1.5rem; /* 섹션 영문 라벨 */

  /* --- 레이아웃 ---
     고정폭 컨테이너가 아니라 좌우 7vw 여백의 유동 구조다.
     (1920px → 좌우 134px / 1440px → 좌우 100px)
     같은 방식을 쓰되 초광폭에서 과하게 벌어지지 않도록 상한만 둔다. */
  --gutter: clamp(1.6rem, 7vw, 14rem); /* 와이드 섹션 좌우 여백 */
  --gutter-sm: clamp(1.6rem, 4vw, 8rem); /* 본문 영역 좌우 여백 */
  --inner-size: 1600px; /* 본문 컨텐츠 최대 폭 */
  --w-inner-size: 1920px; /* 와이드 컨텐츠 최대 폭 */
  --header-height: 8.8rem; /* 헤더 높이 (JS/스크롤 오프셋과 공유) */
  --section-gap: 12rem; /* 섹션 상하 여백 */

  /* --- 모션 --- */
  --t-fast: 0.2s;
  --t-base: 0.3s;
  --t-slow: 0.6s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 버튼 전용 커브 */
  --t-btn: 0.2s;
  --ease-btn: cubic-bezier(0.68, 0.01, 0.58, 0.75);

  /* ★ 버튼 규격 — 이 세 값이 헤더 CTA · 메인 히어로 · 게시판 버튼을
     전부 동시에 결정합니다. 버튼 크기를 바꾸려면 여기만 고치세요. */
  --btn-pad-y: 1.3rem;
  --btn-pad-x: 2.4rem;
  --btn-fs: 1.6rem;
}

@media (max-width: 1024px) {
  :root {
    --header-height: 7.2rem;
    --section-gap: 9rem;
  }
}

@media (max-width: 768px) {
  :root {
    --section-gap: 7rem;
  }
}