/* 디자인 토큰 — 색·폰트·간격·이징은 이 파일에만 값을 적는다. base.css·components.css는 var()로만 읽는다.
   출처: _reference/genspark-handoff/README.md (site.css에서 값만 정리). 시안과 docs/design-notes.md가 다르면 design-notes.md를 따른다.
   규칙: 빨간색·주황색 계열 금지, 모서리 반경 0(원형 핀·슬라이더 손잡이만 예외), 그림자 없음. */

:root {
  /* 색 — 바탕과 포인트 */
  --navy: #13305C;      /* 청사진 블루: 어두운 섹션 */
  --paper: #F3F6FA;     /* 트레이싱지: 밝은 섹션 */
  --paper-2: #EBF1F8;   /* 시공사례 섹션의 약간 진한 종이 */
  --cyan: #38C8FF;      /* 어두운 섹션 포인트 (지도 핀 포함) */
  --blue: #1668D6;      /* 밝은 섹션 포인트 */
  --chrome: #0E2444;    /* 헤더(스크롤)·모바일 메뉴·하단 바·푸터 */
  --ph: #5C6571;        /* 이미지 플레이스홀더 회색 */
  --white: #FFFFFF;
  --glow: #FFEBC4;      /* 야간 사진의 창문 불빛 (약하게만) */
  --brand-green: #20563F; /* 로고 원색 초록(K·KANG) — _reference/logo/logo.png 면 중앙 (386,420). 새 색 예외(사용자 승인 2026-10-18) */
  --brand-beige: #BBB198; /* 로고 원색 베이지(S·SAN) — 같은 파일 (536,268). 글자색 금지(흰색 대비 2.1:1), 바탕·선·띠에만 */
  --hero3d-dusk: var(--ph); /* 히어로 3D 완공 뒤 회색 톤(흰색과 섞어 씀) */
  --window-lit: #FBF3E2; /* 히어로 3D 불 켜진 창 전용 — 새 색 예외 1건(사용자 승인 2026-10-18). 종이색보다 조금 따뜻한 흰빛, 채도 낮게 */

  /* 색 — 글자 (어두운 바탕 / 밝은 바탕) */
  --ink-on-dark: #F8FBFF;
  --ink-on-light: #0D2040;
  --ink-on-light-2: #31425C;
  --ink-on-light-3: #586880;

  /* 색 — 선·격자·플레이스홀더 (투명도 값) */
  --line-dark-1: rgba(255, 255, 255, .17);
  --line-dark-2: rgba(255, 255, 255, .33);
  --line-dark-3: rgba(255, 255, 255, .6);
  --line-light-1: rgba(11, 31, 58, .14);
  --line-light-2: rgba(11, 31, 58, .26);
  --line-light-3: rgba(11, 31, 58, .5);
  --ph-hatch: rgba(255, 255, 255, .06);
  --ph-label-bg: rgba(10, 20, 35, .45);

  /* 폰트 */
  --font-ko: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* 글자 크기 — 모바일 본문 16px 이상, 제목 배율 --ts */
  --ts: 1;
  --fs-body: 17px;
  --fs-lead: 19px;
  --fs-small: 15px;
  --fs-label: 12px;    /* 영문·숫자 모노 라벨 전용 */
  --fs-h1: calc(clamp(52px, 4.6vw, 66px) * var(--ts));
  --fs-h2: calc(60px * var(--ts));
  --fs-h3: calc(34px * var(--ts));
  --fs-h3-sm: calc(26px * var(--ts));
  --fs-btn: 17px;
  --lh-body: 1.75;

  /* 간격 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --wrap: 1312px;
  --gut: 64px;
  --sp: 112px;         /* 섹션 상하 패딩 (R4 [S] 160 → 112, 약 70%) */
  --header-h: 84px;

  /* 컨트롤 높이 */
  --btn-h: 60px;
  --btn-px: 30px;
  --bar-btn-h: 52px;   /* 모바일 하단 바 */
  --tab-h: 44px;
  --input-h: 52px;

  /* 모양 */
  --radius: 0;
  --bw: 1px;
  --crop: 18px;        /* 카드 크롭마크 한 변 */
  --crop-w: 2px;

  /* 움직임 */
  --ease: cubic-bezier(.22, .7, .18, 1);

  /* 겹침 순서 */
  --z-mnav: 49;
  --z-header: 50;
  --z-bar: 60;
}

/* 모바일 (390px 기준, 760px 이하) */
@media (max-width: 760px) {
  :root {
    --fs-body: 16px;
    --fs-lead: 16px;
    --fs-small: 16px;
    --fs-label: 11px;
    --fs-h1: calc(34px * var(--ts));
    --fs-h2: calc(31px * var(--ts));
    --fs-h3: calc(25px * var(--ts));
    --fs-h3-sm: calc(23px * var(--ts));
    --fs-btn: 16px;
    --lh-body: 1.7;
    --gut: 20px;
    --sp: 62px;          /* R4 [S] 88 → 62, 약 70% */
    --header-h: 64px;
    --btn-h: 54px;
    --btn-px: 20px;
  }
}

/* ───────── 섹션 테마 ───────── */
.s-dark,
.s-chrome {
  --bg: var(--navy);
  --ink: var(--ink-on-dark);
  --ink-2: rgba(248, 251, 255, .88);
  --ink-3: rgba(248, 251, 255, .64);
  --line: var(--line-dark-1);
  --line-2: var(--line-dark-2);
  --line-3: var(--line-dark-3);
  --grid-1: rgba(255, 255, 255, .085);
  --grid-2: rgba(255, 255, 255, .042);
  --accent: var(--cyan);
  --on-accent: var(--navy);                                    /* 포인트색 버튼 위 글자 */
  --acc-soft: color-mix(in oklab, var(--accent) 20%, transparent);
  --err: var(--ink);                                           /* 오류: 굵은 글씨 + 포인트색 선 (빨강 금지) */
}

.s-chrome { --bg: var(--chrome); --on-accent: var(--chrome); }

.s-light {
  --bg: var(--paper);
  --ink: var(--ink-on-light);
  --ink-2: var(--ink-on-light-2);
  --ink-3: var(--ink-on-light-3);
  --line: var(--line-light-1);
  --line-2: var(--line-light-2);
  --line-3: var(--line-light-3);
  --grid-1: rgba(11, 31, 58, .085);
  --grid-2: rgba(11, 31, 58, .035);
  --accent: var(--blue);
  --on-accent: var(--white);
  --acc-soft: color-mix(in oklab, var(--accent) 12%, transparent);
  --err: var(--ink);
}

.s-light-2 { --bg: var(--paper-2); }