/* 생성된 파일 — 직접 고치지 마라.
   원본은 design/tokens.css 다. 갱신: sh landing/sync-tokens.sh
   (design.md 10절 — 하드코딩 사본을 만들면 진실이 둘이 된다) */
/* ============================================================
   줍줍 디자인 토큰 v1.0
   브랜드 컬러 #FF0051 (로고 실측값)
   토스 계열 뉴트럴 스케일 + 한국 커머스 UI 규격
   ============================================================ */

:root {
  /* ---------- 브랜드 ---------- */
  --jj-brand-50:  #FFF0F4;
  --jj-brand-100: #FFE0E9;
  --jj-brand-200: #FFC2D2;
  --jj-brand-300: #FF4D7D;   /* 다크모드 액센트 · #121212 위 5.90:1 AA */
  --jj-brand-400: #FF2666;
  --jj-brand-500: #FF0051;   /* 로고 · FAB · 주요 CTA 배경 */
  --jj-brand-600: #D10046;   /* 흰 배경 위 텍스트 · 링크 · 5.53:1 AA */
  --jj-brand-700: #A30036;   /* pressed */
  --jj-brand-800: #7A0028;

  /* ---------- 뉴트럴 (토스 계열) ---------- */
  --jj-ink-900: #191F28;
  --jj-ink-800: #333D4B;
  --jj-ink-700: #4E5968;
  --jj-ink-600: #6B7684;
  --jj-ink-500: #8B95A1;
  --jj-ink-400: #B0B8C1;
  --jj-ink-300: #D1D6DB;
  --jj-ink-200: #E5E8EB;
  --jj-ink-100: #F2F4F6;
  --jj-ink-50:  #F9FAFB;
  --jj-white:   #FFFFFF;

  /* ---------- 시맨틱 ---------- */
  --jj-save:    #00A86B;   /* 절약률 · 가격하락 · 구매인증 */
  --jj-save-bg: #E6F7F0;
  --jj-warn:    #FF8A00;   /* 배송지연 · 가격급등 · 별점 */
  --jj-warn-bg: #FFF4E5;
  --jj-danger:  #E5342B;
  --jj-info:    #3182F6;

  /* ---------- 표면 (라이트) ---------- */
  --jj-bg:        var(--jj-white);
  --jj-bg-alt:    var(--jj-ink-100);   /* 8px 섹션 구분 블록 */
  --jj-bg-sunken: var(--jj-ink-50);    /* 정보 박스 */
  --jj-line:      var(--jj-ink-200);
  --jj-border:    var(--jj-ink-300);

  /* ---------- 텍스트 ---------- */
  --jj-text:        var(--jj-ink-900);
  --jj-text-strong: var(--jj-ink-800);
  --jj-text-body:   var(--jj-ink-700);
  --jj-text-muted:  var(--jj-ink-600);
  --jj-text-caption:var(--jj-ink-500);
  --jj-text-disabled:var(--jj-ink-400);
  --jj-text-brand:  var(--jj-brand-600);   /* 흰 배경 위에서는 항상 600 */
  --jj-text-onbrand:var(--jj-white);

  /* ---------- 타이포 ---------- */
  --jj-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;

  --jj-display:   800 38px/1.14 var(--jj-font);  /* 주운 금액 */
  --jj-display-s: 800 28px/1.2  var(--jj-font);
  --jj-h1:        800 24px/1.34 var(--jj-font);
  --jj-h2:        700 18px/1.4  var(--jj-font);
  --jj-h3:        700 16px/1.45 var(--jj-font);
  --jj-body:      400 15px/1.55 var(--jj-font);
  --jj-body-b:    600 15px/1.55 var(--jj-font);
  --jj-label:     600 13px/1.45 var(--jj-font);
  --jj-caption:   400 12px/1.5  var(--jj-font);
  --jj-btn:       700 17px/1    var(--jj-font);  /* CTA 라벨 최소 규격 */
  --jj-btn-sm:    700 15px/1    var(--jj-font);

  --jj-tracking-tight: -0.035em;   /* Display · H1 */
  --jj-tracking-snug:  -0.02em;    /* 본문 */
  --jj-tracking-logo:  -0.055em;   /* 워드마크 */

  /* ---------- 간격 (4 기반) ---------- */
  --jj-space-1: 4px;   --jj-space-2: 8px;   --jj-space-3: 12px;
  --jj-space-4: 16px;  --jj-space-5: 20px;  --jj-space-6: 24px;
  --jj-space-8: 32px;  --jj-space-10: 40px; --jj-space-12: 48px;

  --jj-gutter: 20px;              /* 화면 좌우 여백 */
  --jj-section-gap: 8px;          /* 섹션 구분 회색 블록 두께 */

  /* ---------- 라운드 ---------- */
  --jj-r-chip:   999px;
  --jj-r-sm:     9px;
  --jj-r-md:     12px;
  --jj-r-btn:    15px;
  --jj-r-card:   16px;
  --jj-r-sheet:  22px;
  --jj-r-img:    14px;

  /* ---------- 높이 ---------- */
  --jj-h-btn:      56px;
  --jj-h-btn-sm:   46px;
  --jj-h-input:    44px;
  --jj-h-tabbar:   78px;
  --jj-size-fab:   60px;
  --jj-size-touch: 44px;   /* 최소 터치 영역 */

  /* ---------- 그림자 (최소 사용) ---------- */
  --jj-shadow-fab:   0 8px 22px -5px rgba(255, 0, 81, 0.55);
  --jj-shadow-sheet: 0 -4px 24px -8px rgba(25, 31, 40, 0.18);
  --jj-shadow-card:  0 1px 3px rgba(25, 31, 40, 0.06);

  /* ---------- 모션 ---------- */
  --jj-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --jj-ease-sheet:  cubic-bezier(0.32, 0.72, 0, 1);
  --jj-dur-fast:    140ms;
  --jj-dur-base:    220ms;
  --jj-dur-sheet:   280ms;

  /* ---------- z-index ---------- */
  --jj-z-tabbar: 40;
  --jj-z-header: 50;
  --jj-z-scrim:  70;
  --jj-z-sheet:  71;
  --jj-z-toast:  90;
}

/* ============================================================
   다크 모드
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jj-bg:        #121417;
    --jj-bg-alt:    #1A1D22;
    --jj-bg-sunken: #1E2228;
    --jj-line:      #2A2F37;
    --jj-border:    #3A414B;

    --jj-text:         #EDEFF2;
    --jj-text-strong:  #DCE0E6;
    --jj-text-body:    #B6BDC7;
    --jj-text-muted:   #8F97A3;
    --jj-text-caption: #757D89;
    --jj-text-disabled:#565D68;
    --jj-text-brand:   var(--jj-brand-300);   /* 다크에서는 300 */

    --jj-save:    #2FD69B;
    --jj-save-bg: #12291F;
    --jj-warn:    #FFA53D;
    --jj-warn-bg: #2A1F0F;
  }
}

:root[data-theme="dark"] {
  --jj-bg:        #121417;
  --jj-bg-alt:    #1A1D22;
  --jj-bg-sunken: #1E2228;
  --jj-line:      #2A2F37;
  --jj-border:    #3A414B;

  --jj-text:         #EDEFF2;
  --jj-text-strong:  #DCE0E6;
  --jj-text-body:    #B6BDC7;
  --jj-text-muted:   #8F97A3;
  --jj-text-caption: #757D89;
  --jj-text-disabled:#565D68;
  --jj-text-brand:   var(--jj-brand-300);

  --jj-save:    #2FD69B;
  --jj-save-bg: #12291F;
  --jj-warn:    #FFA53D;
  --jj-warn-bg: #2A1F0F;
}

/* ============================================================
   기본 요소
   ============================================================ */
body {
  margin: 0;
  background: var(--jj-bg);
  color: var(--jj-text);
  font: var(--jj-body);
  letter-spacing: var(--jj-tracking-snug);
  -webkit-font-smoothing: antialiased;
}

/* 가격 · 수량 · 통계는 항상 tabular */
.jj-num,
.jj-price,
.jj-stat { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--jj-brand-500);
  outline-offset: 2px;
  border-radius: var(--jj-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   컴포넌트
   ============================================================ */

/* ---- 워드마크 ---- */
.jj-logo {
  font-weight: 900;
  letter-spacing: var(--jj-tracking-logo);
  color: var(--jj-brand-500);
  line-height: 1;
}

/* ---- 버튼 ----
   규칙: brand/500 배경 위 흰 라벨은 17px/700 이상에서만 AA(3.91:1) 충족.
   작은 텍스트를 브랜드 배경에 올려야 하면 brand-600 배경을 쓸 것. */
.jj-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: var(--jj-h-btn);
  border: 0; border-radius: var(--jj-r-btn);
  font: var(--jj-btn); letter-spacing: var(--jj-tracking-snug);
  cursor: pointer;
  transition: transform var(--jj-dur-fast) var(--jj-ease-out),
              filter var(--jj-dur-fast) linear;
}
.jj-btn:active { transform: scale(0.985); }
.jj-btn--sm { height: var(--jj-h-btn-sm); font: var(--jj-btn-sm); border-radius: var(--jj-r-md); }

.jj-btn--primary { background: var(--jj-brand-500); color: var(--jj-text-onbrand); }
.jj-btn--primary:hover  { filter: brightness(0.95); }
.jj-btn--primary:active { background: var(--jj-brand-700); }
.jj-btn--primary:disabled { background: var(--jj-ink-200); color: var(--jj-text-disabled); }

.jj-btn--sub  { background: var(--jj-bg-alt); color: var(--jj-text-strong); }
.jj-btn--line { background: transparent; border: 1.5px solid var(--jj-border); color: var(--jj-text-strong); }
.jj-btn--ghost{ background: transparent; color: var(--jj-text-brand); }

/* ---- FAB (줍기) ---- */
.jj-fab {
  width: var(--jj-size-fab); height: var(--jj-size-fab);
  border: 0; border-radius: 50%;
  background: var(--jj-brand-500); color: var(--jj-white);
  display: grid; place-items: center;
  box-shadow: var(--jj-shadow-fab);
  cursor: pointer;
  transition: transform var(--jj-dur-fast) var(--jj-ease-out);
}
.jj-fab:active { transform: scale(0.94); }

/* ---- 칩 ---- */
.jj-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 7px;
  border: 1px solid var(--jj-border);
  font: var(--jj-caption); font-weight: 600;
  color: var(--jj-text-body);
}
/* 플랫폼 칩은 알리·테무·쉬인 브랜드 컬러를 쓰지 않는다 (충돌 + 상표 리스크) */
.jj-chip--platform { border-color: var(--jj-border); color: var(--jj-text-body); }
.jj-chip--ship { border-color: transparent; background: var(--jj-bg-alt); }

.jj-filter-chip {
  padding: 8px 15px; border: 0; border-radius: var(--jj-r-chip);
  background: var(--jj-bg-alt); color: var(--jj-text-muted);
  font: var(--jj-body-b); white-space: nowrap; cursor: pointer;
}
.jj-filter-chip[aria-pressed="true"] { background: var(--jj-ink-900); color: var(--jj-white); }

/* ---- 절약률 뱃지 (그린 단독) ---- */
.jj-save-badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 7px;
  background: var(--jj-save); color: var(--jj-white);
  font-weight: 800; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.jj-save-text { color: var(--jj-save); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- 매칭도 3구간 ---- */
.jj-match { font-weight: 700; font-variant-numeric: tabular-nums; }
.jj-match--hi  { color: var(--jj-text-brand); }   /* 90%+ */
.jj-match--mid { color: var(--jj-text-body); }    /* 85~89% */
.jj-match--lo  { color: var(--jj-text-caption); } /* 85% 미만 = 비슷한 무드 */

/* ---- 쇼츠 카드 뱃지 ---- */
.jj-platform-badge {          /* 좌상단 · 중립 */
  padding: 3px 7px; border-radius: 6px;
  background: rgba(255,255,255,0.92); color: var(--jj-ink-900);
  font-size: 10.5px; font-weight: 800; letter-spacing: var(--jj-tracking-snug);
}
.jj-item-count-badge {        /* 우상단 · 브랜드 채움 (화면당 2개 규칙에 포함) */
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 6px;
  background: var(--jj-brand-500); color: var(--jj-white);
  font-size: 10.5px; font-weight: 700;
}

/* ---- 카드 ---- */
.jj-card { background: var(--jj-bg); border-radius: var(--jj-r-card); }
.jj-sunken { background: var(--jj-bg-sunken); border-radius: var(--jj-r-btn); padding: 15px 16px; }

/* ---- 섹션 구분 (그림자 대신 회색 블록) ---- */
.jj-section-gap { height: var(--jj-section-gap); background: var(--jj-bg-alt); }
.jj-section { padding: 22px var(--jj-gutter); }

/* ---- 바텀시트 ---- */
.jj-sheet {
  border-radius: var(--jj-r-sheet) var(--jj-r-sheet) 0 0;
  background: var(--jj-bg);
  padding: 10px var(--jj-gutter) calc(20px + env(safe-area-inset-bottom));
  transform: translateY(101%);
  transition: transform var(--jj-dur-sheet) var(--jj-ease-sheet);
  z-index: var(--jj-z-sheet);
}
.jj-sheet[data-open="true"] { transform: translateY(0); }
.jj-scrim { background: rgba(15, 17, 21, 0.5); z-index: var(--jj-z-scrim); }

/* ---- 이미지 슬롯 ---- */
.jj-img { position: relative; overflow: hidden; background: var(--jj-bg-alt); }
.jj-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jj-img--product { aspect-ratio: 1 / 1;  border-radius: var(--jj-r-md); }
.jj-img--look    { aspect-ratio: 3 / 4;  border-radius: var(--jj-r-img); }
.jj-img--shorts  { aspect-ratio: 9 / 16; border-radius: var(--jj-r-img); }
.jj-img--avatar  { aspect-ratio: 1 / 1;  border-radius: 50%; }
.jj-img--cover   { aspect-ratio: 16 / 5; }
.jj-img--review  { aspect-ratio: 4 / 5;  border-radius: var(--jj-r-md); }

/* ---- 아이템 핀 (영상 오버레이) ---- */
.jj-pin {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
  border: 2px solid var(--jj-white);
  display: grid; place-items: center;
  animation: jj-pulse 2.6s ease-in-out infinite;
}
.jj-pin::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--jj-brand-500);
}
@keyframes jj-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
}