/* ==========================================================================
   design tokens — ref/ANALYSIS.md 의 computed style 집계에서 도출
   ========================================================================== */

:root {
  /* ---- color ---- */
  --brand:          #a8853f;  /* 화백 금색(텍스트용, 대비 3.6:1) */  /* 로고·포인트. 사용빈도 3위(43회) */
  --brand-line:     #d5ae70;  /* 화백 심볼 금색 평균값 */
  --navy:           #1a1f26;  /* 신규영입 섹션 바탕 */
  --navy-hi:        #242a33;  /* 신규영입 카드 hover */
  --footer-bg:      #f4f1ea;  /* 푸터 — 흰 섹션보다 한 톤 낮은 오프화이트(2026-09-26 박변: 검정 푸터가 이질적) */
  --charcoal:       #1C1C1C;  /* 플로팅 버튼·상담바 */

  --ink:            #222222;  /* 기본 텍스트(428회) */
  --ink-900:        #121212;
  --ink-850:        #171A1F;
  --ink-800:        #070707;
  --ink-700:        #3A3A3A;
  --ink-650:        #3B4455;
  --ink-600:        #646464;
  --ink-500:        #808080;
  --ink-400:        #989898;
  --ink-350:        #A8A8A8;

  --line:           #E2E2E2;
  --line-soft:      #D6D6D6;
  --line-faint:     #DADADA;
  --line-input:     #D9D9D9;

  --tint:           #f4efe4;  /* GNB active */
  --tint-pale:      #faf6ed;  /* 워터마크 텍스트 */
  --paper:          #faf8f3;  /* 상담센터 섹션 */
  --paper-2:        #F9F9F9;  /* 인사이트 섹션 */
  --white:          #ffffff;

  --cta-blue:       #a8853f;  /* 상담 선택 버튼 */
  --cta-blue-hi:    #8f6f32;
  --cta-green:      #16a34a;
  --cta-green-hi:   #15803d;
  --danger:         #f44336;

  /* ---- type ---- */
  --font:      'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-disp: 'Playfair Display', 'Pretendard Variable', Pretendard, serif;

  --fs-hero:    40px;   /* 히어로 슬로건(모바일 라인) */
  --fs-display: 100px;  /* Who's Next? */
  --fs-h3:      54px;   /* 섹션 제목 */
  --fs-h4:      40px;
  --fs-h5:      34px;
  --fs-h6:      30px;
  --fs-lg:      24px;
  --fs-md:      20px;
  --fs-base:    17px;
  --fs-sm:      16px;
  --fs-xs:      15px;
  --fs-2xs:     14px;

  /* ---- layout ---- */
  --shell:     1500px;  /* .container max-width */
  --shell-pad: 0px;     /* ≥1500 에서는 좌우 여백 없음 */
  --header-h:  110px;
  /* 로고 박스 폭 — .gnb-drop .spacer 와 반드시 같아야 드롭다운 컬럼이 상위 메뉴와 정렬된다.
     헤더는 logo|gnb|util, 드롭다운은 spacer|sub-gnb|spacer 로 각각 space-between 이므로
     logo 폭 ≠ spacer 폭이면 그 차이의 절반만큼 컬럼이 밀린다(실측: 200 vs 220 → +10px). */
  --logo-w:    220px;

  /* ---- motion ---- */
  --ease:  ease;
  --dur:   .3s;
  --dur-s: .2s;

  /* ---- elevation ---- */
  --shadow-header: rgba(149, 157, 165, .2) 0 8px 24px;
  --shadow-card:   rgba(149, 157, 165, .2) 0 8px 24px;
  --shadow-panel:  0 0 21px 0 rgba(214, 196, 160, .5);
  --shadow-float:  0 5px 5px rgba(0, 0, 0, .25);
}

@media (max-width: 1500px) {
  :root { --shell: 100%; --shell-pad: 50px; --fs-h3: 40px; }
}

@media (max-width: 1024px) {
  :root {
    --shell-pad: 20px;
    --header-h: 60px;
    --fs-hero: 32px;
    --fs-h3: 24px;
  }
}

@media (max-width: 768px) {
  :root { --fs-hero: 30px; --fs-h3: 20px; --fs-display: 34px; }
}