/*
 * 렌탈마켓 공개 디자인 토큰
 * 승인된 디자인 시스템 기준안(rentalmarket-design-system.html)의 값을 그대로 옮긴다.
 *
 * 강조 위계
 *   L1 월 렌탈료 숫자      L2 상담 CTA      L3 상품명·섹션 제목
 *   L4 제휴카드 할인가(마젠타) · 혜택 배지(바이올렛)      L5 그 외 보조 정보
 *
 * 마젠타 = 가격·행동, 바이올렛 = 혜택. 두 색이 겹치는 자리는 없다.
 */
:root{
  /* surface */
  --pub-bg:#FFFFFF;
  --pub-bg-2:#F9FAFB;          /* 푸터 전용. 본문 배경은 흰색으로 통일한다 */
  --pub-bg-3:#EFF1F5;          /* 이미지 바탕 · 칩 · 배지 */

  /* line */
  --pub-line:#E4E7ED;
  --pub-line-2:#C6CAD6;

  /* ink — 쿨 뉴트럴
     메인이 파랑(H230)이라 중립도 같은 축(H225)으로 맞춘다.
     기존 웜(H270 보라 기운)을 그대로 두면 파랑 옆에서 탁해 보인다.
     명도는 유지했다. 대비 등급은 그대로다. */
  --pub-ink:#171A23;           /* 17.5:1  제목·가격·본문 */
  --pub-ink-2:#41475B;         /*  9.5:1  보조 본문 */
  --pub-ink-3:#6F7588;         /*  4.6:1  라벨·캡션 (AA 하한) */
  --pub-ink-4:#A2A8B8;         /*  선·아이콘 전용. 텍스트 금지 */
  --pub-on-accent:#FFFFFF;

  /* accent — 가격과 행동에만 */
  --pub-accent:#3253FF;        /*  5.5:1  제휴카드 할인가 · CTA 배경 */
  --pub-accent-press:#2743E0;  /*  7.1:1 */

  /* CTA 그라데이션 시작점.
     단독 대비는 4.3 으로 AA 에 조금 못 미치지만
     버튼 글자가 놓이는 영역(30~70%)은 최저 4.68 이라 읽힌다.
     밝은 끝 구간에 글자를 얹지 않는다. */
  --pub-accent-grad:#6D63FF;

  --pub-accent-brand:#6D63FF;  /*  4.3:1  비텍스트 전용(포커스 링) */
  --pub-accent-bg:#F1F3FF;

  /* benefit — 혜택 전용.
     accent 가 파랑(230도)이므로 혜택은 청록(190도)으로 벌린다.
     같은 파랑 계열로 두면 "행동"과 "혜택"이 구분되지 않는다.
     보라는 accent 그라데이션(244도)과 겹쳐 쓰지 않는다. */
  --pub-benefit:#0E7490;       /*  5.3:1  흰 글자 배지 */
  --pub-benefit-soft:#ECF7FA;
  --pub-benefit-ink:#155E75;   /*  6.6:1 */

  /* 상태 안내 전용. 강조 수단이 아니다 */
  --pub-warn:#A15C00;
  --pub-err:#B42318;

  --pub-font:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;

  /* 타이포 — 최소 13 / 라벨 15 / 본문 16 */
  /*
   * 섹션 제목이 카드 가격(21px)보다 작아 위계가 뒤집혀 있었다.
   * HOME 은 섹션이 7개라 제목이 목차 역할을 한다. 한 단계 올린다.
   *   section  20 → 24  (카드 가격 21px 를 확실히 넘긴다)
   *   title    25 → 28  (상담 CTA 같은 큰 제목)
   * 모바일 하한도 함께 올린다.
   *   카드 가격(--fs-price)은 21px 고정이라 화면이 좁아져도 줄지 않는다.
   *   섹션 제목만 줄이면 모바일에서 위계가 다시 뒤집힌다(실측 19 < 21).
   *   섹션 제목은 한 줄짜리 짧은 문구라 22px 로 올려도 줄바꿈이 생기지 않는다.
   */
  --fs-display:clamp(1.6875rem,1.4rem + 1.4vw,2.1875rem);  /* 27 → 35 */
  --fs-title:clamp(1.5rem,1.25rem + 1vw,1.75rem);          /* 24 → 28 */
  --fs-section:clamp(1.375rem,1.2rem + 0.6vw,1.5rem);      /* 22 → 24 */
  --fs-subtitle:1rem;                                      /* 16 */
  --fs-body:1rem;                                          /* 16 */
  --fs-label:0.9375rem;                                    /* 15 */
  --fs-caption:0.8125rem;                                  /* 13 — 최소 */
  --fs-control:1rem;                                       /* 16 (iOS 확대 방지) */
  --fs-price-hero:clamp(1.75rem,1.4rem + 1.6vw,2.25rem);   /* 28 → 36 */
  --fs-price:1.3125rem;                                    /* 21 */
  --fs-price-sub:1rem;                                     /* 16 */

  --lh-tight:1.25;  --lh-snug:1.45;  --lh-body:1.65;
  --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700; --fw-eb:800;
  --tr-1:-0.01em; --tr-2:-0.02em; --tr-3:-0.03em;

  /* 간격 — 컴포넌트 내부 4~16 / 블록 24~32 / 섹션 48~72 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s18:72px;

  --r1:8px; --r2:14px; --r-pill:999px;
  --h-sm:36px; --h-md:44px; --h-lg:52px;

  --sh:0 -6px 20px rgba(30,23,35,.07);

  /*
   * PC 기본 콘텐츠 폭 (PATCH-005).
   *
   * 1200 → 1280px. 00 ARCHITECTURE 결정(2026-08-19).
   * 1440 뷰포트에서 좌우 여백이 (1440-1280)/2 = 80px 이 된다.
   *
   * .container 가 max-width 로 쓰므로 1280 이하에서는 화면 폭을 따른다.
   * padding-inline: var(--gutter) 가 좌우 여백을 만들어 넘치지 않는다.
   *
   * header · HOME · catalog · product detail 이 모두 이 토큰 하나를 쓴다.
   * 개별 화면에 1280 을 하드코딩하지 않는다.
   */
  --container:1280px;
  --gutter:16px;
  --detail-panel:420px;
  --content-max:860px;

  --z-header:100; --z-sticky:200; --z-overlay:300; --z-modal:400;
}
@media (min-width:768px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --gutter:32px; } }