/* ==========================================================================
   디자인 토큰 — 실제 스팀 상점(2026-07 기준) CSS에서 추출한 값
   ========================================================================== */
:root {
  /* 레이아웃 */
  --store-page-width: 1200px; /* 최신 스팀 앱 페이지(widestore). 구형은 940px */
  --hero-rightcol-width: 375px;
  --middle-rightcol-width: 33%;

  /* 배경/표면 */
  --color-bg: #1b2838;
  --color-bg-darkest: #000f18;
  --color-section: #2a475e;
  --color-store-grey: #4e697d;
  --color-header: #171d25;
  --color-footer: #171a21;

  /* 텍스트 */
  --color-text: #c6d4df;
  --color-text-secondary: #acb2b8;
  --color-text-muted: #8f98a0;
  --color-text-dim-label: #798a95;
  --color-breadcrumb: #56707f;
  --color-tag-label: #556772;
  --color-header-menu-text: #dcdedf;

  /* 액센트/링크 */
  --color-link: #67c1f5;
  --color-accent-alt: #66c0f4;
  --color-accent-dark: #417a9b;
  --bg-accent-translucent: rgba(103, 193, 245, 0.2);

  /* 평가 요약 */
  --color-review-positive: #66c0f4;
  --color-review-mixed: #b9a074;
  --color-review-negative: #c85e2d;
  --color-review-none: #929396;

  /* 가격/할인 */
  --color-discount-text: #beee11;
  --color-discount-bg: #4c6b22;
  --color-price-original: #738895;

  /* 그라디언트 */
  --gradient-store-bg: linear-gradient(180deg, #2a475e 0%, #1b2838 80%);
  --gradient-hero-glow: radial-gradient(1000px 500px at 23% top, hsl(213 53% 31%), rgba(0, 0, 0, 0));
  --gradient-buy-btn: linear-gradient(to right, #75b022 5%, #588a1b 95%);
  --gradient-buy-btn-hover: linear-gradient(to right, #8ed629 5%, #6aa621 95%);
  --color-buy-btn-text: #d2efa9;
  --gradient-blue-btn-hover: linear-gradient(-60deg, #417a9b 5%, #67c1f5 95%);
  --gradient-purchase-box: linear-gradient(-60deg, rgba(226, 244, 255, 0.3) 5%, rgba(84, 107, 115, 0.3) 95%);
  --gradient-sidebar-block: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.65) 95%);
  --gradient-storenav: linear-gradient(90deg, rgba(62, 103, 150, 0.92) 11%, rgba(58, 120, 177, 0.8) 25%, rgb(15, 33, 110) 100%);
  --gradient-tag-hover: linear-gradient(135deg, #67c1f5 0%, #417a9b 100%);
  --gradient-highlights: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);

  /* 그림자/모서리 */
  --shadow-small: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
  --shadow-medium: 0 3px 6px 0 rgba(0, 0, 0, 0.24);
  --radius-btn: 2px;
  --radius-box: 4px;

  /* 폰트 — Motiva Sans는 유료 폰트라 Inter(메트릭 거의 동일) + Noto Sans KR로 대체 */
  --font-body: "Motiva Sans", Inter, "Noto Sans KR", Arial, Helvetica, sans-serif;

  /* 글랜스(우측 요약) 라벨 */
  --summary-title-text-color: #798a95;
}