/* B타입 디자인 토큰 — 20260818 외주 시안 실측값
 *
 * 원칙: 시안 충실 + 접근성만 보정.
 * 원본 색은 --*-raw 로 보존하고, 텍스트를 올리는 자리에만 -aa 값을 쓴다.
 * 대비 수치는 tools/contrast.py 가 판정한다. 손으로 고치지 말 것.
 */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: block;
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  /* ---- 구조색 ------------------------------------------------------- */
  --bar-navy: #36496B;              /* 상단바 · 카운트 배지 · 흰 텍스트 9.04:1 */
  --bar-navy-hover: #2E3F5D;

  /* ---- 조작색 -------------------------------------------------------
   * 시안 원본 #4080F6 은 흰 텍스트 3.73:1 로 AA 미달.
   * 비텍스트(progress fill · 아이콘 · 큰 숫자)에는 원본을 그대로 쓰고,
   * 텍스트를 올리는 fill 에만 -aa 를 쓴다. */
  --blue-raw: #4080F6;              /* 비텍스트 전용 */
  --blue-raw-2: #6197FB;            /* progress · 유휴 CTA */
  --blue: #2D67D4;                  /* 텍스트 위 fill · 흰 텍스트 5.25:1 */
  --blue-pressed: #2557B4;
  --blue-soft: #E5EEFF;             /* soft 버튼 배경 */
  --blue-soft-ink: #2B62CB;         /* soft 위 텍스트 4.85:1 */

  /* ---- surface ------------------------------------------------------ */
  --canvas: #F5F7FA;
  --surface: #FFFFFF;
  --surface-muted: #EDEFF3;
  --rail: #F3F4F4;
  --border: #E0E2E5;
  --border-strong: #D6DDE8;
  --dim: rgba(0, 0, 0, .40);

  /* ---- 텍스트 -------------------------------------------------------- */
  --ink: #16202E;                   /* 캔버스 위 15.28:1 */
  --ink-2: #5A6676;
  --ink-3: #8A95A3;
  --ink-on-dark: #FFFFFF;

  /* ---- 가격 ---------------------------------------------------------- */
  --price-raw: #F84914;             /* 시안 원본 · 3.53:1 */
  --price: #D93A0B;                 /* 흰 배경 위 4.60:1 */
  --price-strike: #9AA3AE;

  /* ---- CTA ----------------------------------------------------------
   * 시안 #F26B4A 는 흰 텍스트 3.01:1.
   * #DD3810 은 같은 색상(11.8도)·채도를 유지하고 명도만 낮춘 최소 보정 4.52:1 */
  --cta-raw: #F26B4A;
  --cta: #DD3810;
  --cta-pressed: #C43009;

  /* ---- 보조 버튼 ------------------------------------------------------ */
  --mint: #E5F3EF;
  --mint-ink: #1F705C;              /* 5.21:1 */
  --mint-border: #BFDDD4;

  /* ---- 배지 ---------------------------------------------------------- */
  --badge-info: #7579F1;            /* 당일출고 · 주문 횟수 · 큰 글씨 3.64:1 */
  --badge-count: #36496B;
  --badge-discount: #DE550B;        /* 3.88:1 */
  --sticker-warm: #E70012;          /* 전구색 4.77:1 */
  --sticker-cool: #1623C1;          /* 주광색 10.27:1 */

  /* ---- 등급 ---------------------------------------------------------- */
  --tier-bg: #FFEFD3;
  --tier-ink: #806000;              /* 시안 #D28A06 은 2.51:1 미달.
                                       #806000 은 브랜드보드 v0.3 status.warning 5.16:1 */

  /* ---- 상태 ---------------------------------------------------------- */
  --success: #1F6337;
  --warning: #806000;
  --error: #B3301B;
  --disabled-bg: #EDEDED;
  --disabled-ink: #8A8A8A;

  /* ---- 유휴화면 ------------------------------------------------------- */
  --idle-bg: #2A3039;

  /* ---- 포커스 --------------------------------------------------------
   * 가이드 §7: visible focus 필수. 3px ring, 2px offset. */
  --focus: #1B4FA8;
  --focus-ring: 3px solid var(--focus);
  --focus-offset: 2px;

  /* ---- 형태 ---------------------------------------------------------- */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 12px;
  --r-pill: 999px;
  --touch: 48px;                    /* 가이드: 최소 터치영역 48dp */

  /* ---- 셸 치수 (시안 실측) --------------------------------------------- */
  --stage-w: 1194px;
  --stage-h: 834px;
  --bar-h: 78px;
  --rail-w: 99px;                   /* 퀵레일 패널 폭 (시안 02: x1101..1199) */
  --rail-h: 568px;                  /* 부유 패널 높이 (시안 02: y172..739) */
  --rail-gap: 53px;                 /* 본문 우측 끝 ~ 레일 사이 */
  --rail-tab-w: 32px;               /* 접힘 탭 (시안 01: x1162..1194) */
  --rail-tab-h: 202px;              /* 시안 01: y333..534 */
  --tab-bg: #E0E2E5;                /* 시안 01 실측: 단색, 테두리·그림자 없음 */
  --tab-bg-hover: #D3D6DA;
  --tab-ink: #606B7C;               /* 시안 셰브런 색 */
  --subrail-w: 155px;               /* 상품목록 좌측 서브레일 */
  --cart-w: 340px;
  --drawer-w: 505px;
  --gutter: 107px;                  /* 레일 접힘 시 본문 좌우 여백 */
  --gutter-open: 73px;              /* 레일 펼침 시 좌측 (시안 02) */

  /* ---- 모션 ---------------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .28s;
  --dur-fast: .16s;
}

/* 세로 모드 — 05/07 시안 실측 기준 */
[data-orientation="portrait"] {
  --stage-w: 834px;
  --stage-h: 1194px;
  --gutter: 41px;
  --gutter-open: 41px;              /* 세로에서 퀵레일은 오버레이라 본문 폭을 차감하지 않는다 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; --dur-fast: .001s; }
}