/* =========================================================================
   이거사자 v2 디자인 토큰 — "가격표" (A 가격표 + B 성분표 요소)

   - 라이트 테마: :root 기본값
   - 다크 테마: 시스템 다크(명시적 라이트 선택 제외) + [data-theme="dark"]
   - 컴포넌트는 반드시 이 변수만 참조한다 (색 리터럴 금지)
   ========================================================================= */

:root {
  color-scheme: light;

  /* 바탕 */
  --ig-ground: #F2F1EC;          /* 페이지 바탕 */
  --ig-paper: #FCFBF8;           /* 카드·패널 */
  --ig-fill: #E9E7E0;            /* 이미지 자리, 막대 트랙, 중립 태그 */
  --ig-plate: #FCFBF8;           /* 실제 상품 사진 뒤 판 — 사진 바탕이 흰색이라 다크에서도 밝게 둔다 */
  --ig-shimmer: #FCFBF8;         /* 스켈레톤 반짝임 */

  /* 글자 */
  --ig-ink: #1B1A17;             /* 본문·제목 (바탕 대비 14:1 이상) */
  --ig-sub: #5F5C55;             /* 보조 글자 (paper 6.4:1, fill 5.4:1) */
  --ig-muted: #8E8A81;           /* 글자 금지 — 기준선·점선·비활성 테두리 전용 */

  /* 선 */
  --ig-line: #CFCBC2;            /* 카드 테두리, 점선 리더 */
  --ig-line-soft: #E4E1DA;       /* 표 행 구분선, 차트 격자 */
  --ig-line-strong: #1B1A17;     /* 강한 구분 2px, 막대 테두리 */

  /* 신호 */
  --ig-signal: #FFD43B;          /* 노란 가격표 = 좋은 가격 · 강조 */
  --ig-on-signal: #1B1A17;       /* 노랑 위 글자 (12:1) */
  --ig-ship: #1E5EDB;            /* 쿠팡 로켓 물류 (paper 5.6:1) */
  --ig-ship-fresh: #0F7A4A;      /* 로켓프레시 — 신선식품 (paper 5.3:1) */
  --ig-ship-direct: #6A3AB2;     /* 로켓직구 — 해외 (paper 7.0:1) */
  --ig-up: #B3261E;              /* 가격 오름 · 오류 (paper 6.3:1) */

  /* 반전 패널 · 주요 버튼 */
  --ig-inverse: #1B1A17;
  --ig-on-inverse: #FCFBF8;
  --ig-on-inverse-sub: #D9D6CE;  /* 반전 패널 보조 글자 (12:1) */
  --ig-cta: #1B1A17;
  --ig-on-cta: #FFD43B;

  /* 오버레이 */
  --ig-scrim: rgba(27, 26, 23, 0.48);
  --ig-shadow-pop: 0 18px 40px rgba(27, 26, 23, 0.14);
  --ig-shadow-receipt: drop-shadow(0 0 1px rgba(27, 26, 23, 0.45)) drop-shadow(0 6px 10px rgba(27, 26, 23, 0.08));

  /* 글꼴 */
  --ig-font-sans: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --ig-font-mono: "Nanum Gothic Coding", "D2Coding", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 글자 크기 */
  --ig-text-2xs: 0.6875rem;
  --ig-text-xs: 0.75rem;
  --ig-text-sm: 0.8125rem;
  --ig-text-md: 0.875rem;
  --ig-text-base: 0.9375rem;
  --ig-text-lg: 1rem;
  --ig-text-xl: 1.125rem;
  --ig-text-2xl: 1.25rem;
  --ig-text-3xl: 1.5rem;
  --ig-text-4xl: 1.75rem;
  --ig-text-5xl: 2rem;
  --ig-text-6xl: 2.25rem;
  --ig-text-7xl: 3rem;

  /* 굵기 */
  --ig-weight-regular: 400;
  --ig-weight-medium: 500;
  --ig-weight-bold: 700;
  --ig-weight-heavy: 800;

  /* 줄 간격 */
  --ig-leading-tight: 1.2;
  --ig-leading-snug: 1.4;
  --ig-leading-normal: 1.6;
  --ig-leading-relaxed: 1.75;

  /* 간격 (4px 단위) */
  --ig-space-1: 0.25rem;
  --ig-space-2: 0.5rem;
  --ig-space-3: 0.75rem;
  --ig-space-4: 1rem;
  --ig-space-5: 1.25rem;
  --ig-space-6: 1.5rem;
  --ig-space-8: 2rem;
  --ig-space-10: 2.5rem;
  --ig-space-12: 3rem;
  --ig-space-14: 3.5rem;
  --ig-space-16: 4rem;

  /* 선 두께 */
  --ig-border: 1px;
  --ig-border-strong: 2px;

  /* 크기 */
  --ig-tap: 2.75rem;                /* 누를 수 있는 요소 최소 높이 */
  --ig-container: 75rem;
  --ig-gutter: 1rem;
  --ig-header-height: calc(4.5rem + 2px);      /* PC 헤더 72px + 선 2px */

  /* 모션 */
  --ig-duration: 160ms;
  --ig-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* 레이어 */
  --ig-z-dropdown: 30;
  --ig-z-header: 40;
  --ig-z-bar: 50;
  --ig-z-scrim: 79;
  --ig-z-overlay: 80;
  --ig-z-toast: 100;
}

/* 태블릿 이상은 좌우 여백을 넓힌다 */
@media (min-width: 48em) {
  :root {
    --ig-gutter: 1.5rem;
  }
}

/* 다크 — 시스템 설정 (사용자가 라이트를 고르지 않은 경우) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ig-ground: #12110E;
    --ig-paper: #1C1B17;
    --ig-fill: #2A2823;
    --ig-plate: #F2F1EC;
    --ig-shimmer: #3A3832;
    --ig-ink: #F2F1EC;
    --ig-sub: #A8A49A;
    --ig-muted: #7A766D;
    --ig-line: #3A3832;
    --ig-line-soft: #2C2A25;
    --ig-line-strong: #F2F1EC;
    --ig-signal: #FFD43B;
    --ig-on-signal: #1B1A17;
    --ig-ship: #7FB0FF;
    --ig-ship-fresh: #63D6A0;
  --ig-ship-direct: #C8A9FF;
    --ig-up: #FF8A7A;
    --ig-inverse: #2A2823;
    --ig-on-inverse: #F2F1EC;
    --ig-on-inverse-sub: #C9C5BB;
    --ig-cta: #F2F1EC;
    --ig-on-cta: #1B1A17;
    --ig-scrim: rgba(0, 0, 0, 0.6);
    --ig-shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.5);
    --ig-shadow-receipt: drop-shadow(0 0 1px rgba(242, 241, 236, 0.35)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
  }
}

/* 다크 — 사용자가 직접 선택한 경우 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ig-ground: #12110E;
  --ig-paper: #1C1B17;
  --ig-fill: #2A2823;
  --ig-plate: #F2F1EC;
  --ig-shimmer: #3A3832;
  --ig-ink: #F2F1EC;
  --ig-sub: #A8A49A;
  --ig-muted: #7A766D;
  --ig-line: #3A3832;
  --ig-line-soft: #2C2A25;
  --ig-line-strong: #F2F1EC;
  --ig-signal: #FFD43B;
  --ig-on-signal: #1B1A17;
  --ig-ship: #7FB0FF;
  --ig-ship-fresh: #63D6A0;
  --ig-ship-direct: #C8A9FF;
  --ig-up: #FF8A7A;
  --ig-inverse: #2A2823;
  --ig-on-inverse: #F2F1EC;
  --ig-on-inverse-sub: #C9C5BB;
  --ig-cta: #F2F1EC;
  --ig-on-cta: #1B1A17;
  --ig-scrim: rgba(0, 0, 0, 0.6);
  --ig-shadow-pop: 0 18px 40px rgba(0, 0, 0, 0.5);
  --ig-shadow-receipt: drop-shadow(0 0 1px rgba(242, 241, 236, 0.35)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}