@charset "utf-8";

/* 형태·질감(라운드/그림자/버튼/타이포)은 톤 파일이 담당한다.
   @import 는 규칙보다 앞에 와야 하므로 :root 위에 둔다.
   ★ ttbox_tone.css 를 수정하면 아래 ver 를 반드시 올릴 것.
     이 URL 이 그대로면 브라우저가 구 톤 파일을 계속 쓴다(실제로 겪음). */
@import url('ttbox_tone.css?ver=20260808b');

/* ============================================================
   디자인 토큰 (티티박스)
   ------------------------------------------------------------
   ★ 원래 reset.css 의 :root 에 있었는데, 마이페이지(mallMypageHead.php)와
     공급자 템플릿8(Suppliervendorhead8.php)은 reset.css 를 로드하지 않는다.
     그 화면들에서 var(--c-primary) 가 전부 무효값이 되어 버튼 배경이
     투명해지는 등 색이 통째로 죽어 있었다(2026-08-07 발견, 143곳).
     그래서 토큰만 이 파일로 떼어내고 모든 헤드가 이 파일을 먼저 링크한다.
     ※ 팔레트를 바꿀 때는 여기만 고치면 된다.

   ★ 2026-08-08 — TT BOX 소개페이지(딥그린)로 브랜드색 통일.
     b2b 와 같은 팔레트를 쓴다. 할인·세일 강조는 핑크 → 레드로 옮겼다
     (그린 옆에서 핑크는 브랜드가 둘로 보인다).
   ============================================================ */

:root {
  /* --- Brand & Colors (티티박스 / TT BOX 소개페이지 팔레트) ---
     주색은 딥그린, 세일·할인 강조는 레드. 뉴트럴도 그린빛으로 맞춘다. */
  --c-primary: #006b4f;
  --c-primary-deep: #00563f;
  --c-primary-light: #eff8f4; /* 연한 그린 배경 */
  --c-point: #cc4d50;         /* 포인트/할인율 (레드) */
  --c-point-light: #fdeeee;
  --c-mint: #00b56a;          /* 성공·재고 등 보조 (주색과 명도로 구분) */
  --c-lime: #92d20a;          /* 소개페이지 액센트 — 진행·강조 */

  --c-black: #132b23;
  --c-dark: #3a4a43;
  --c-gray: #63746d;
  --c-light: #8fa39a;
  --c-border: #dce9e3;
  --c-bg: #f8fbfa;
  --c-white: #ffffff;

  /* --- Elevation (그린빛 그림자) --- */
  --sh-sm: 0 2px 10px rgba(19, 43, 35, .05);
  --sh-md: 0 10px 28px rgba(19, 43, 35, .07);
  --sh-lg: 0 18px 48px rgba(18, 55, 43, .09);

  /* --- Dimensions ---
     --w-container 는 콘텐츠 실폭. 소개페이지 .wrap(1440) 과 같은 정렬선. */
  --w-container: 1440px;
  --h-header-top: 32px;
  --h-header-main: 90px;
  --h-nav: 50px;

  /* --- Common Radius (소개페이지: 카드 24 / 버튼 15) --- */
  --r-base: 12px;
  --r-card: 24px;
  --r-btn: 15px;
}