/* ============================================================
   wanted-ds.css — Wanted Design System 토큰 (Claude Design import)
   원본: claude.ai/design "Kream 브랜드 페이지 레이아웃" / Kream Product.dc.html
   fig-tokens(원시) + semantic(별칭) + typography(역할 클래스) 통합.
   product-detail KREAM 클론 전용으로 로드. (Light 모드만)
   ============================================================ */

:root {
  /* 폰트 (Syncle은 Pretendard 보유) */
  --font-sans: 'Pretendard', 'PretendardVariable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-brand: var(--font-sans);
  --font-mono: ui-monospace, Menlo, monospace;

  /* ── 원시 컬러 (fig-tokens, 디자인이 직접 참조하는 것만) ── */
  --common-0: rgb(0,0,0);
  --common-100: rgb(255,255,255);
  --static-white: rgb(255,255,255);
  --static-black: rgb(0,0,0);

  --primary-normal: rgb(51,102,255);   /* #3366FF */
  --primary-strong: rgb(0,94,235);
  --primary-heavy: rgb(0,84,209);

  --blue-40: rgb(0,84,209);
  --blue-45: rgb(0,94,235);
  --blue-50: rgb(0,102,255);
  --blue-60: rgb(51,133,255);
  --blue-90: rgb(201,222,254);
  --blue-95: rgb(234,242,254);
  --blue-99: rgb(247,251,255);

  --green-40: rgb(0,150,50);
  --green-50: rgb(0,191,64);
  --green-90: rgb(172,252,199);
  --green-95: rgb(217,255,230);
  --green-99: rgb(242,255,246);

  --red-40: rgb(229,34,34);
  --red-50: rgb(255,66,66);
  --red-90: rgb(254,213,213);
  --red-95: rgb(254,236,236);
  --red-99: rgb(255,250,250);

  --orange-50: rgb(255,146,0);

  --cool-neutral-10: rgb(23,23,25);
  --cool-neutral-15: rgb(27,28,30);
  --cool-neutral-99: rgb(247,247,248);

  /* ── 라벨/텍스트 (반투명 → 흰 배경에서 충분한 대비) ── */
  --label-strong: var(--common-0);              /* #000 */
  --label-normal: rgb(23,23,23);                /* near-black */
  --label-neutral: rgba(46,47,51,0.88);
  --label-alternative: rgba(55,56,60,0.61);
  --label-assistive: rgba(55,56,60,0.28);
  --label-disable: rgba(55,56,60,0.16);

  /* ── 배경/표면 ── */
  --background-normal-normal: rgb(255,255,255);
  --background-normal-alternative: var(--cool-neutral-99);
  --background-elevated-normal: rgb(255,255,255);

  /* ── 채움(반투명 중성) ── */
  --fill-alternative: rgba(112,115,124,0.05);
  --fill-normal: rgba(112,115,124,0.08);
  --fill-strong: rgba(112,115,124,0.16);

  /* ── 라인/보더 ── */
  --line-normal-alternative: rgba(112,115,124,0.08);
  --line-normal-normal: rgba(112,115,124,0.22);
  --line-normal-strong: rgba(112,115,124,0.52);

  /* ── 상태 ── */
  --status-positive: var(--green-50);
  --status-negative: var(--red-50);
  --status-cautionary: var(--orange-50);

  --inverse-background: var(--cool-neutral-15);
  --inverse-label: var(--cool-neutral-99);
  --material-dimmer: rgba(23,23,25,0.52);

  /* ── Wanted 시맨틱 별칭 (semantic.css) ── */
  --ws-primary: var(--primary-normal);
  --ws-primary-strong: var(--primary-strong);
  --ws-primary-heavy: var(--primary-heavy);
  --ws-primary-blue: var(--blue-50);

  --ws-text-strong: var(--label-strong);
  --ws-text-normal: var(--label-normal);
  --ws-text-neutral: var(--label-neutral);
  --ws-text-alternative: var(--label-alternative);
  --ws-text-assistive: var(--label-assistive);
  --ws-text-disable: var(--label-disable);
  --ws-text-on-primary: var(--static-white);

  --ws-bg: var(--background-normal-normal);
  --ws-bg-alt: var(--background-normal-alternative);
  --ws-bg-elevated: var(--background-elevated-normal);
  --ws-surface-card: var(--background-elevated-normal);

  --ws-fill-alt: var(--fill-alternative);
  --ws-fill: var(--fill-normal);
  --ws-fill-strong: var(--fill-strong);

  --ws-line-alt: var(--line-normal-alternative);
  --ws-line: var(--line-normal-normal);
  --ws-line-strong: var(--line-normal-strong);

  --ws-positive: var(--status-positive);
  --ws-negative: var(--status-negative);
  --ws-cautionary: var(--status-cautionary);
  --ws-info: var(--blue-50);

  --ws-inverse-bg: var(--inverse-background);
  --ws-inverse-label: var(--inverse-label);

  /* 간격 (4px grid) */
  --ws-space-2: 4px; --ws-space-3: 6px; --ws-space-4: 8px; --ws-space-5: 10px;
  --ws-space-6: 12px; --ws-space-8: 16px; --ws-space-10: 20px; --ws-space-12: 24px;
  --ws-space-14: 28px; --ws-space-16: 32px; --ws-space-20: 40px; --ws-space-24: 48px;

  /* 라운드 */
  --ws-radius-8: 8px; --ws-radius-10: 10px; --ws-radius-12: 12px;
  --ws-radius-14: 14px; --ws-radius-16: 16px; --ws-radius-pill: 999px;

  /* 그림자 */
  --ws-shadow-emphasize: 0 0 1px rgba(0,0,0,0.16), 0 1px 2px rgba(23,23,23,0.06);
  --ws-shadow-strong: 0 0 1px rgba(0,0,0,0.12), 0 2px 8px rgba(23,23,23,0.07);
  --ws-shadow-heavy: 0 0 1px rgba(0,0,0,0.12), 0 4px 16px rgba(23,23,23,0.10);

  /* 모션 */
  --ws-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ws-duration-fast: 120ms;
  --ws-duration-normal: 200ms;
}

/* ── 타이포 역할 클래스 (typography.css) ── */
.ws-display3 { font: 700 36px/48px var(--font-sans); letter-spacing: -0.027em; }
.ws-title1 { font: 700 32px/44px var(--font-sans); letter-spacing: -0.0253em; }
.ws-title2 { font: 700 28px/38px var(--font-sans); letter-spacing: -0.0236em; }
.ws-title3 { font: 700 24px/32px var(--font-sans); letter-spacing: -0.023em; }
.ws-heading1 { font: 600 22px/30px var(--font-sans); letter-spacing: -0.0194em; }
.ws-heading2 { font: 600 20px/28px var(--font-sans); letter-spacing: -0.012em; }
.ws-headline1 { font: 600 18px/26px var(--font-sans); letter-spacing: -0.002em; }
.ws-headline2 { font: 600 17px/24px var(--font-sans); letter-spacing: 0em; }
.ws-body1 { font: 500 16px/24px var(--font-sans); letter-spacing: 0.0057em; }
.ws-body2 { font: 500 15px/22px var(--font-sans); letter-spacing: 0.0096em; }
.ws-label1 { font: 500 14px/20px var(--font-sans); letter-spacing: 0.0145em; }
.ws-label2 { font: 500 13px/18px var(--font-sans); letter-spacing: 0.0194em; }
.ws-caption1 { font: 500 12px/16px var(--font-sans); letter-spacing: 0.0252em; }
.ws-caption2 { font: 500 11px/14px var(--font-sans); letter-spacing: 0.0311em; }
.ws-w-400 { font-weight: 400 !important; }
.ws-w-500 { font-weight: 500 !important; }
.ws-w-600 { font-weight: 600 !important; }
.ws-w-700 { font-weight: 700 !important; }

/* ── 최소 컴포넌트 (x-import Avatar/Chip/Button 대체) ── */
/* Wanted Chip 실측 사양: 흰 배경 + 1px inset 테두리(--ws-line) + 알약(999px) */
.ws-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  font: 500 13px/1 var(--font-sans); letter-spacing: 0.0145em;
  background: #fff; box-shadow: inset 0 0 0 1px var(--ws-line); color: var(--ws-text-neutral);
  border: none; cursor: pointer; white-space: nowrap;
}
.ws-chip--xsmall { height: 28px; padding: 0 10px; font-size: 13px; }
.ws-chip--active { background: var(--blue-95); box-shadow: none; color: var(--ws-primary); font-weight: 600; }
.ws-chip--alt { background: #fff; box-shadow: inset 0 0 0 1px var(--ws-line); color: var(--ws-text-neutral); }

.ws-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 20px; border-radius: var(--ws-radius-12);
  font: 600 15px/1 var(--font-sans); letter-spacing: -0.012em;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background var(--ws-duration-fast) var(--ws-ease-standard);
}
.ws-btn--primary { background: var(--ws-primary); color: var(--ws-text-on-primary); }
.ws-btn--primary:hover { background: var(--ws-primary-strong); }
.ws-btn--outlined { background: var(--ws-bg); color: var(--ws-text-neutral); box-shadow: inset 0 0 0 1px var(--ws-line); }
.ws-btn--outlined:hover { box-shadow: inset 0 0 0 1px var(--ws-line-strong); }

.ws-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ws-radius-circle, 50%); flex-shrink: 0;
  background: var(--ws-fill); color: var(--ws-text-neutral);
  font: 700 16px/1 var(--font-sans); overflow: hidden;
}