/* ==========================================================================
   그로스잇 멤버스 — 디자인 토큰
   색·간격·타이포 스케일만 여기 둔다. 컴포넌트 규칙은 style.css 가 var() 로 참조한다.

   반응형은 clamp()/vw 유동 스케일을 쓰지 않는다.
   브레이크포인트마다 :root 에서 고정값으로 다시 선언해 계단식으로 줄인다.
   데스크톱 퍼스트라 넓은 블록이 좁은 화면에도 상속되므로,
   좁은 블록엔 그 폭에서 달라지는 값만 덮어쓴다.
     ① 노트북      max-width: 1439px
     ② 태블릿      max-width: 1024px
     ③ 모바일 가로  max-width:  768px
     ④ 모바일 세로  max-width:  400px
   ========================================================================== */

:root {
  /* ---------- 색 ---------- */
  --black:        #0d0d0d;
  --dark:         #0d0d0f;
  --dark-2:       #17171b;
  --card-dark:    #1e1e22;

  /* 그로스잇 보라.
     ⚠ 지어낸 값이 아니다. growthit.co.kr 워드마크의 'it' 자에서 뽑았다
       (logo-growthit-black.png · 3,654픽셀로 가장 많이 쓰인 색 #6c3b8f).
     ⚠ 이 넷은 **도구 자체의 색**이다. 고객사가 자기 앱에 고르는 색과 다르다.
       그쪽 기본값은 options.js·store.js 에 따로 있다(#6a50f0). 섞지 말 것. */
  /* 포인트 색 (2026-09-16 · 사용자 결정).
     ⚠ 전에는 `#6c3b8f` 였다 — 채도 42% · 명도 40% 의 **탁한 자주**라,
       사용자가 "묵직하고 촌스럽다" 고 했다(실측으로 값을 재서 확인했다).
     ⚠ 채도를 **58%** 로 둔다. 인디고 600(`#4F46E5`, 채도 75%)은 더 선명하지만,
       이 화면의 주인공은 사이트가 아니라 **오른쪽 폰 미리보기**(채도 84%)다.
       사이트가 그만큼 선명하면 둘이 싸운다 — 한 단계 물러선 자리가 맞다.
     ⚠ 흰 글자 대비 **7.90** 이다(옛 색과 같다). 인디고 600 은 6.29 로 떨어진다.
     ⚠ **개수를 안 줄이고 색만 바꾸지 말 것.** 채도가 올라가므로 여기저기 뿌린
       작은 보라가 지금보다 더 튄다(그래서 아래에서 회색으로 내렸다). */
  --brand:        #4338ca;   /* 포인트 — H245 S58 L51 · 흰 글자 대비 7.90 */
  --brand-hover:  #3730a3;
  --brand-soft:   #a5b4fc;   /* 다크 위 텍스트용 밝은 인디고 */
  --brand-tint:   #eef2ff;   /* 라이트 배경 위 아주 옅은 인디고 */
  --brand-ring:   rgba(67, 56, 202, .18);   /* 고른 카드 둘레(바깥 그림자) */

  --text:         #16161a;
  --text-2:       #4b5563;
  --text-3:       #8b909a;
  /* 표의 라벨처럼 '값보다 한 단 뒤로 물러나야 하는 글자' 용 쿨그레이.
     ⚠ 정의 안 된 var() 는 오류 없이 무시되고 상속색으로 떨어진다 —
        --gray-2 를 쓰다가 라벨이 값과 같은 색이 됐다(2026-09-10). */
  --label:        #6b7280;
  --line:         #e5e7eb;
  --line-2:       #f0f1f4;
  --bg:           #ffffff;
  --bg-2:         #f7f7fa;

  --ok:           #12a150;
  --warn:         #f0a020;
  --danger:       #e5484d;

  /* ---------- 글꼴 ----------
     Paperlogy woff2 를 assets/fonts/ 에 넣으면 이 한 줄만 바꾸면 된다.
     변수 폰트 판의 @font-face 이름이 "Pretendard Variable" 이므로 맨 앞에 둔다.
     빼면 오류 없이 시스템 sans 로 조용히 떨어져 알아채기 어렵다. */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  /* ---------- 레이아웃 ---------- */
  /* --content-max 는 좌우 패딩을 포함한 전체 폭이다(box-sizing:border-box).
     1280 - 40*2 = 글자폭 1200px.
     ⚠ --side-pad 에 50vw 계산을 넣지 말 것. .wrap 과 max-width 를 같이 쓰는
     요소에서 패딩이 콘텐츠를 통째로 먹는다(히어로 글자폭이 100px 이 됐다). */
  --content-max: 1280px;
  --side-pad:    40px;
  /* ⚠ 68px 이었다. 로고 20px + 단추 43px 이라 56px 에 다 든다(실측).
     머리가 낮을수록 본문이 먼저 보인다. */
  --nav-h:       56px;
  /* ⚠ 120px 이었다. 실측(1440px): 구역 위아래 여백 합계가 **903px** 로 문서
     3,407px 의 26.5% 였다. 3단계 카드 줄은 241px(7.1%) 뿐이라, 줄일 자리는
     카드가 아니라 여기다(사용자 지적 2026-09-14). */
  --section-y:   72px;
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 1px 2px rgba(16, 16, 24, .04), 0 8px 24px rgba(16, 16, 24, .06);
  --shadow-lg:   0 4px 12px rgba(16, 16, 24, .08), 0 24px 60px rgba(16, 16, 24, .12);
  --ease:        cubic-bezier(.22, 1, .36, 1);

  /* ---------- 타이포 ---------- */
  --fs-display: 60px;
  --fs-h1:      44px;
  --fs-h2:      30px;
  --fs-h3:      21px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;
}

/* ① 노트북 */
@media (max-width: 1439px) {
  :root {
    --section-y: 60px;
    --fs-display: 52px;
    --fs-h1:      38px;
    --fs-h2:      27px;
  }
}

/* ② 태블릿 */
@media (max-width: 1024px) {
  :root {
    --side-pad:  32px;
    --section-y: 48px;
    --fs-display: 42px;
    --fs-h1:      32px;
    --fs-h2:      24px;
    --fs-h3:      19px;
    --fs-lead:    18px;
  }
}

/* ③ 모바일 가로 */
@media (max-width: 768px) {
  :root {
    --nav-h:     58px;
    --side-pad:  20px;
    --section-y: 40px;
    --fs-display: 32px;
    --fs-h1:      26px;
    --fs-h2:      21px;
    --fs-h3:      17px;
    --fs-lead:    16px;
    --fs-body:    15px;
  }
}

/* ④ 모바일 세로 */
@media (max-width: 400px) {
  :root {
    --side-pad:   16px;
    --fs-display: 28px;
  }
}