/* ══════════════════════════════════════════════════════════════════
   THE STEPPER 디자인 공통 값 (2026-11-10)
   기준: 첫 화면(.tg-hero) 확정본. 값마다 근거와 위치는 docs/renewal/design-rules.md 에 있다.
   지금은 메인(index.html) 첫 화면 아래 구역(css/stepper-main.css)만 이 파일을 쓴다.
   첫 화면(.tg-hero) 자체는 이 변수를 쓰지 않는다(첫 화면 코드는 그대로 둔다). 예외: 휴대폰 첫 화면 버튼 폭이 --float-zone-m 을 쓴다(2026-11-11).
   ══════════════════════════════════════════════════════════════════ */
/* 휴대폰 배치 기준 폭(단일 기준): 899px 이하 = 휴대폰, 900px 이상 = PC.
   JS 는 js/stepper-layout.js 의 MOBILE_MAX(899) 를 쓰고, CSS 미디어 쿼리는 변수를 못 써 899/900 숫자를 적되 이 주석을 출처로 단다.
   첫 화면(.tg-hero) 전환 기준 min-width:900px(index.html) 과 같다. */
:root {
  /* 색 */
  --c-blue: #005BAB;        /* 버튼·링크·강조 */
  --c-blue-hover: #004A8C;  /* 신규 — 첫 화면 버튼은 hover 때 바탕색이 바뀌지 않음 */
  --c-navy: #13294B;        /* 제목·본문 글자 */
  --c-sub: #4A5D78;         /* 보조 글자 */
  --c-red: #9D080C;         /* 구역 라벨·작은 강조만. 버튼 바탕 금지 */
  --c-yellow: #FFEF00;      /* 파랑·남색 바탕 위 강조, 배지 숫자만. 흰·연한 바탕 위 글자 금지 */
  --c-bg: #F2F6FB;          /* 페이지 바탕 */
  --c-surface: #FFFFFF;     /* 카드 바탕 */
  --c-line: rgba(19, 41, 75, .12); /* 신규 — 첫 화면에 구분선 색이 없음 */

  /* 글꼴 */
  --f-serif: 'Noto Serif KR', serif;                       /* 한글 큰 제목(900) */
  --f-sans: 'Noto Sans KR', system-ui, sans-serif;         /* 본문·버튼 */
  --f-display: 'Barlow Condensed', 'Noto Sans KR', sans-serif; /* 영문 브랜드명·숫자·라벨 번호(기울임) */

  /* 글자 크기 — 이 열 단계만 쓴다. 공개 페이지 최소 12px */
  --fs-hero: 54px;      /* 큰 제목 PC */
  --fs-section: 40px;   /* 구역 제목 PC (신규) */
  --fs-hero-m: 32px;    /* 큰 제목 휴대폰 */
  --fs-section-m: 28px; /* 구역 제목 휴대폰 */
  --fs-card: 24px;      /* 카드 제목 PC */
  --fs-card-m: 20px;    /* 카드 제목 휴대폰 */
  --fs-lead: 18px;      /* 큰 본문 */
  --fs-body: 16px;      /* 본문·버튼 */
  --fs-small: 14px;     /* 보조 글자·라벨 */
  --fs-caption: 12px;   /* 캡션 */

  /* 모서리 */
  --r-pill: 999px;   /* 버튼·배지 */
  --r-card: 30px;    /* 카드(휴대폰은 --r-card-m) */
  --r-card-m: 24px;
  --r-sm: 16px;      /* 사진·영상 틀·입력창 (신규) */

  /* 그림자 — 첫 화면 카드와 같은 두 값만 */
  --sh-card: 0 18px 44px rgba(0, 91, 171, .10);
  --sh-card-m: 0 14px 34px rgba(0, 91, 171, .10);

  /* 버튼 */
  --btn-h: 56px;
  --btn-h-m: 52px;
  --btn-px: 24px;
  --btn-line: inset 0 0 0 1.5px var(--c-blue);

  /* 구역 — 내용 폭·좌우 여백은 첫 화면 무대(1440px, 좌우 56px / 휴대폰 390px, 좌우 20px)와 같게 */
  --sec-py: 120px;
  --sec-py-m: 80px;
  --wrap: 1328px;      /* 1440 - 56 × 2 */
  --gutter: 56px;
  --gutter-m: 20px;

  /* 공통 헤더·바닥글(css/stepper-chrome.css) — 첫 화면 헤더(index.html .tg-hero) 값을 그대로 옮김. 행 번호는 design-rules.md 9절 */
  --hd-h: 90px;            /* .tg-head-pc 높이 */
  --hd-h-m: 64px;          /* .tg-head-m 높이 */
  --hd-pad-l-m: 16px;      /* .tg-head-m 왼쪽 여백 (PC 좌우는 --gutter 56px) */
  --hd-pad-r-m: 12px;      /* .tg-head-m 오른쪽 여백 */
  --hd-logo: 54px;         /* 팔각 로고 PC */
  --hd-logo-m: 40px;       /* 팔각 로고 휴대폰 */
  --hd-brand-gap: 14px;    /* 로고–글자 간격 PC */
  --hd-brand-gap-m: 10px;  /* 로고–글자 간격 휴대폰 */
  --hd-brand-fs: 28px;     /* THE STEPPER PC */
  --hd-brand-fs-m: 21px;   /* THE STEPPER 휴대폰 */
  --hd-sub-fs: 12px;       /* 「태권도 겨루기 전문 교육」 (첫 화면 휴대폰은 11px — 공개 페이지 최소 12px 규칙으로 12px) */
  --hd-nav-fs: 15px;       /* 메뉴 글자 */
  --hd-nav-gap: 34px;      /* 메뉴 간격 */
  --hd-cta-h: 44px;        /* 파랑 알약 CTA 높이 */
  --hd-cta-px: 22px;       /* CTA 좌우 여백 */
  --hd-burger: 44px;       /* 메뉴 버튼 크기 */
  --stripe-h: 6px;         /* 삼색 줄무늬 두께 PC */
  --stripe-h-m: 5px;       /* 삼색 줄무늬 두께 휴대폰 */
  --brand-weight: 800;     /* 헤더·바닥글 로고 글자 THE STEPPER 굵기 — 첫 화면 헤더 .tg-brand-name(index.html:75)과 같은 800. 큰 제목은 900 */
  --c-on-dark-sub: rgba(255, 255, 255, .72);   /* 신규 — 남색 바탕 위 보조 글자 */
  --c-on-dark-line: rgba(255, 255, 255, .16);  /* 신규 — 남색 바탕 위 구분선 */
  --c-overlay: rgba(19, 41, 75, .94);          /* 신규 — 사진 크게 보기 등 전체 화면 덮개(남색 94%) */

  /* 휴대폰(899px 이하) 떠 있는 채널 버튼(js/stepper-layout.js FLOAT_CSS) — 2026-11-11 */
  --float-size-m: 46px;    /* 채널 버튼 지름 */
  --float-right-m: 16px;   /* 화면 오른쪽 끝과의 여백 */
  /* 채널 버튼 묶음이 차지하는 폭(버튼 + 오른쪽 여백). 첫 화면 휴대폰 버튼 2개(index.html .tg-mctas)도
     이 폭 + 8px 만큼 오른쪽을 비우는 데 같은 변수를 쓴다 */
  --float-zone-m: calc(var(--float-size-m) + var(--float-right-m));
}