/* ============================================================================
 * 공동구매몰(ponyong.co.kr) — 디자인 토큰
 *   출처 : Figma "[v1.0] 공구몰 사이트 기획 및 디자인" > 공구몰 시안
 *          01_Color / 02_Typography / 03_Spacing & Radius
 *   A안 기준. 모바일 전용(디자인 폭 678px).
 *
 *   ※ 값은 전부 Figma 스펙 그대로다. 임의로 바꾸지 말고 Figma 를 먼저 고칠 것.
 * ========================================================================= */

:root {
  /* ---- Primary : Coral ------------------------------------------------- */
  --c-coral-600: #E85F3D;   /* Pressed · Hover */
  --c-coral-500: #FF7A59;   /* 메인 브랜드 컬러 (CTA · 활성탭 · 포인트) */
  --c-coral-300: #FFB499;   /* 보조 포인트 */
  --c-coral-100: #FFF1EC;   /* 태그 칩 배경 */
  --c-coral-50:  #FFF6F3;   /* 아이콘 배경 · 연한 강조 */

  /* ---- Semantic -------------------------------------------------------- */
  --c-sale-red:   #FF3B30;  /* 할인율 표기 전용 */
  --c-timer-dark: #1F1F1F;  /* 타이머 뱃지 배경 (opacity 75%) */

  /* ---- Grayscale ------------------------------------------------------- */
  --c-black-900: #1A1A1A;   /* 본문 텍스트 · 상품명 */
  --c-gray-600:  #8A8A8A;   /* 보조 텍스트 · 설명문구 */
  --c-gray-400:  #B8B8B8;   /* 정가 취소선 · 비활성 */
  --c-gray-200:  #EDEDED;   /* 구분선 · 아웃라인 */
  --c-gray-100:  #F5F5F5;   /* 비활성 칩 배경 */
  --c-white:     #FFFFFF;   /* 기본 배경 */

  /* ---- Warm BG --------------------------------------------------------- */
  --c-cream: #FDF7F2;       /* 섹션 교차 배경 */
  --c-beige: #F3EDE7;       /* 상품 이미지 플레이스홀더 */

  /* ---- Typography ------------------------------------------------------
   * Font Family : Pretendard / Line Height 150% / Letter Spacing -2%
   * ※ Pretendard 미설치 시 Noto Sans KR 로 임시 렌더 (SemiBold→Bold 대응)
   * -------------------------------------------------------------------- */
  --font-sans: "Pretendard", "Pretendard Variable", "Noto Sans KR",
               -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", sans-serif;

  --lh-base: 1.5;           /* 전 스타일 공통 150% */
  --ls-base: -0.02em;       /* 전 스타일 공통 -2% */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --fs-display:  30px;      /* Display/Banner   · SemiBold · 메인 배너 타이틀 */
  --fs-h2:       22px;      /* Heading/H2       · SemiBold · 섹션 타이틀 */
  --fs-h3:       16px;      /* Heading/H3       · SemiBold · 상품명(브랜드+상품명) */
  --fs-price-lg: 18px;      /* Price/Price Lg   · SemiBold · 판매가 · 할인율 */
  --fs-body1:    15px;      /* Body/Body1       · Medium   · 탭 · 버튼 · 본문 강조 */
  --fs-body2:    13px;      /* Body/Body2       · Regular  · 설명문구 · 보조 본문 */
  --fs-caption:  12px;      /* Caption/Caption  · Medium   · 구매중 · 더보기 · 타이머 */
  --fs-tag:      11px;      /* Caption/Tag      · Medium   · 키워드 태그 */

  /* ---- Spacing Scale (4px 기반) ---------------------------------------- */
  --sp-xs:  4px;            /* 태그 간격 */
  --sp-sm:  8px;            /* 칩 간격 · 텍스트 행간 */
  --sp-md:  12px;           /* 카드 내부 요소 */
  --sp-lg:  16px;           /* 그리드 거터 · 카드 간 */
  --sp-xl:  20px;           /* 섹션 내부 */
  --sp-2xl: 28px;           /* 화면 좌우 마진 · 카드 리스트 간격 */
  --sp-3xl: 32px;           /* 섹션 상하 패딩 */

  /* ---- Corner Radius --------------------------------------------------- */
  --r-6:    6px;            /* 태그 칩 */
  --r-8:    8px;            /* 타이머 뱃지 */
  --r-12:  12px;            /* 버튼 · 콤팩트 이미지 */
  --r-16:  16px;            /* 상품 이미지 · 서브배너 */
  --r-22:  22px;            /* 서브카테고리 칩 (Pill) */
  --r-full: 9999px;         /* 원형 아이콘 · 장바구니 버튼 */

  /* ---- Layout ----------------------------------------------------------
   * 시안 폭 678px. 실제 기기는 그보다 좁으므로 최대폭으로만 쓴다.
   * -------------------------------------------------------------------- */
  --layout-max:  800px;   /* 시안은 678px 기준이나 실제 적용은 800px (2026-08-20 사용자 지정) */
  --layout-pad:  15px;    /* 화면 좌우 마진. 시안은 28px(--sp-2xl) 이지만 여백이 넓다는
                             사용자 판단으로 상단바(15px)에 맞춰 통일 (2026-08-25).
                             시안대로 되돌리려면 var(--sp-2xl) 로. */
  --gnb-h:        64px;
  --tabs-h:       52px;
  --bottomnav-h:  72px;
  --buybar-h:     88px;
}

/* ============================================================================
 * 타이포그래피 유틸 — Figma 스타일명과 1:1 대응
 * ========================================================================= */
.t-display,
.t-h2,
.t-h3,
.t-price-lg,
.t-body1,
.t-body2,
.t-caption,
.t-tag {
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

.t-display  { font-size: var(--fs-display);  font-weight: var(--fw-semibold); }
.t-h2       { font-size: var(--fs-h2);       font-weight: var(--fw-semibold); }
.t-h3       { font-size: var(--fs-h3);       font-weight: var(--fw-semibold); }
.t-price-lg { font-size: var(--fs-price-lg); font-weight: var(--fw-semibold); }
.t-body1    { font-size: var(--fs-body1);    font-weight: var(--fw-medium); }
.t-body2    { font-size: var(--fs-body2);    font-weight: var(--fw-regular); }
.t-caption  { font-size: var(--fs-caption);  font-weight: var(--fw-medium); }
.t-tag      { font-size: var(--fs-tag);      font-weight: var(--fw-medium); }