/* ==========================================================================
   SHL 디자인 토큰
   색과 글자 크기는 전부 여기서만 정한다. 컴포넌트는 값을 직접 쓰지 않는다.

   출처: 기존 버디케인 랜딩(buddycane.shl.ltd)과 브랜드 사이트 shl.ltd.
   네이비가 브랜드 기둥이고, 청록은 '누르는 것' 하나에만 쓴다.
   ========================================================================== */

:root {
  /* ---- 브랜드 색 ---- */
  --shl-navy:        #192a48;   /* 브랜드 메인. 상단바·PC 플로팅바 */
  --shl-navy-deep:   #0d1b2a;   /* 가격 등 가장 진한 글자 */
  --shl-teal:        #5fb2bc;   /* 포인트. 구매 버튼에만 */
  --shl-teal-light:  #8ed1d4;   /* 버튼 그라디언트 밝은 쪽 */
  --shl-teal-dark:   #4a9da7;   /* 버튼 hover */

  /* ---- 바탕과 글자 ---- */
  --shl-paper:       #ffffff;   /* 본문 바탕 */
  --shl-paper-2:     #f9f9f9;   /* 살짝 눌린 구역 */
  --shl-ground:      #f5f5f5;   /* 페이지 바깥 바탕 */
  --shl-ink:         #111111;   /* 본문 글자 */
  --shl-ink-2:       #333333;
  --shl-ink-mute:    #666666;   /* 보조 설명 */
  --shl-ink-dim:     #88939e;   /* 라벨, 캡션 */
  --shl-line:        #e0e0e0;
  --shl-line-soft:   #f0f0f0;

  /* 어두운 바탕 위에서 쓰는 글자 */
  --shl-on-navy:     #ffffff;
  --shl-on-navy-dim: #a0aec0;

  /* ---- 글자 크기 ----
     360px 에서 1024px 사이를 선형으로 잇는다. 미디어쿼리로 끊지 않는다.
     시니어 대상이라 루딕스보다 한 단계씩 크게 잡았다. */
  --shl-fs-hero: clamp(30px, 17.15px + 3.57vw, 64px);
  --shl-fs-h1:   clamp(26px, 17.19px + 2.45vw, 46px);
  --shl-fs-h2:   clamp(22px, 15.46px + 1.82vw, 39px);
  --shl-fs-h3:   clamp(19px, 14.87px + 1.15vw, 30px);
  --shl-fs-lead: clamp(17px, 14.36px + 0.73vw, 24px);
  --shl-fs-body: clamp(16px, 14.12px + 0.52vw, 21px);
  --shl-fs-sm:   clamp(14px, 12.87px + 0.31vw, 17px);
  --shl-fs-xs:   clamp(12px, 11.25px + 0.21vw, 14px);

  --shl-lh-snug: 1.3;
  --shl-lh-body: 1.6;
  --shl-ls-tight: -0.5px;

  /* ---- 간격 ---- */
  --shl-gap-sm:  clamp(10px, 2vw, 16px);
  --shl-gap:     clamp(16px, 3vw, 26px);
  --shl-gap-lg:  clamp(28px, 5vw, 46px);
  --shl-section: clamp(44px, 8vw, 100px);
  --shl-gutter:  clamp(16px, 4vw, 40px);

  /* ---- 치수 ---- */
  --shl-col:      860px;   /* 상세 이미지 원본 폭. 이보다 넓히면 흐려진다 */
  --shl-col-text: 720px;
  --shl-radius:   14px;
  --shl-radius-pill: 30px;

  --shl-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --shl-dur:  .3s;

  --shl-z-sticky: 50;
  --shl-z-float:  1000;

  --shl-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
              'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

/* 이 사이트는 밝은 화면 하나로 간다.
   시니어 대상이라 대비를 최대로 잡는 편이 읽기 쉽고, 인쇄물처럼 보이는 것이
   브랜드 톤에 맞는다. 다크 모드에서도 같은 색으로 고정한다. */
:root { color-scheme: light; }