/* ══ 우리 글꼴 ══════════════════════════════════════════════════════════
   Pretendard Variable (SIL OFL 1.1 · 상업이용 무료) 에서 **우리가 쓰는 글자만** 남긴 것.
   가변 글꼴이라 이 파일 하나로 굵기 45~930 을 전부 냅니다 —
   굵기를 여러 개 쓸수록 무거워지는 예전 방식과 다릅니다. */
@font-face {
  font-family: 'GimeokSans';
  src: url('/fonts/gimeok-sans.woff2?v=b1db5e81') format('woff2');
  font-weight: 45 930;
  font-style: normal;
  font-display: swap;
}

/* 기멱기멱 공통 디자인 값 — 몰·라이브·관리자가 **같은 한 벌**을 씁니다
 * ═══════════════════════════════════════════════════════════════════════
 *
 *   사장님 지시 2026-08-23:
 *   "독립몰, 방송 관리자와 소비자 전부가 보는 모든 곳의 디자인의 통일성이 필요해.
 *    글씨폰트를 ai로 개발한 느낌이 안 들게 틱톡처럼 디자인을 흡사하게 하자."
 *   "오늘과일, 쿠마마켓, 그립, 틱톡 총 4가지 플랫폼의 색상을 분석 후
 *    우리에게 맞는 색상을 선정하기"
 *
 * ══ 네 곳을 실제로 열어 픽셀로 재본 결과 (2026-08-23) ═══════════════════
 *
 *   플랫폼      배경                    포인트색          글자
 *   ─────────────────────────────────────────────────────────────────
 *   오늘과일    흰 #fff / #f8f8f8       #ff4d6a           #222 #666 #999
 *   쿠마마켓    흰 #fff / #f8f8f8       #f64c2e (+보라)   #222 #666
 *   그립        검정 #0e1011            #eb2b51           #fff #dfe0e6
 *   틱톡        검정 #000               #fe2c55           #fff #161823
 *   ─────────────────────────────────────────────────────────────────
 *   우리(전)    흰 #fff                 #f97316 주황      #111827
 *
 *   ★ 알아낸 것 세 가지
 *     ① 배경은 **하는 일**로 갈립니다 — 쇼핑은 흰색, 영상은 검정.
 *        우리 구조(몰=흰색, 방송=검정)가 이미 정확히 그 분리입니다. 바꿀 이유가 없습니다.
 *     ② 포인트색은 **네 곳 모두 레드핑크** 입니다 (#ff4d6a #f64c2e #eb2b51 #fe2c55).
 *        우리만 주황이었습니다. 주황은 배달앱 색이고, 라이브커머스는 레드핑크가 표준입니다.
 *     ③ 글자는 순수 검정이 아니라 살짝 푸른 짙은 회색(#222 #161823 #0e1011)입니다.
 *
 *   ★ 그래서 정한 것
 *     · 브랜드(로고·기멱기멱다움)는 **주황을 지킵니다** — 우리 정체성입니다.
 *     · 다만 **장사 신호**(가격·할인율·구매버튼·활성 탭·LIVE)는 레드핑크 하나로 통일합니다.
 *       값은 네 곳의 한가운데인 #F42B54 입니다.
 *     · 주황 → 레드핑크 그라데이션이 브랜드 띠가 됩니다 (지금 쓰던 주황→빨강의 연장).
 */

:root {
  /* ── 브랜드 (기멱기멱다움 — 로고·머리줄·띠) ── */
  --gi-brand:        #f97316;
  --gi-brand-2:      #f42b54;
  --gi-brand-grad:   linear-gradient(94deg, #f97316, #f42b54);

  /* ── 장사 신호 (가격·할인율·구매·활성·LIVE) — 네 곳 공통 대역 ── */
  --gi-point:        #f42b54;
  --gi-point-press:  #d81b42;
  --gi-point-soft:   #fff1f4;
  --gi-point-line:   #ffd3dc;
  --gi-on-point:     #ffffff;

  /* ── 글자 (틱톡·오늘과일의 계단을 그대로) ── */
  --gi-ink:          #161823;
  --gi-ink-2:        #4b4f5c;
  --gi-mute:         #8b90a0;
  --gi-mute-2:       #b2b6c2;

  /* ── 바탕·선 ── */
  --gi-bg:           #ffffff;
  --gi-soft:         #f8f8f8;
  --gi-line:         #ebecf0;
  --gi-line-2:       #f4f5f7;

  /* ── 검은 화면 (방송) — 그립의 값 ── */
  --gi-dark:         #0e1011;
  --gi-dark-2:       #17181a;
  --gi-dark-3:       #222327;
  --gi-on-dark:      #ffffff;
  --gi-on-dark-2:    #dfe0e6;
  --gi-on-dark-mute: #8b8d96;
  --gi-dark-line:    rgba(255, 255, 255, .12);

  /* ── 뜻이 있는 색 ── */
  --gi-ok:           #16a34a;
  --gi-warn:         #f59e0b;
  --gi-danger:       #ef4444;
  --gi-info:         #2563eb;

  /* ══ 글씨 ══════════════════════════════════════════════════════════
     ★ 우리 글꼴을 씁니다 (사장님 지시 2026-08-23: "오늘과일·쿠마마켓 방식 그대로 넣자")

       실측으로 정한 것:
         Pretendard Variable 원본  2,009KB  ← 그립은 이걸 그냥 받습니다
         우리가 쓰는 글자만          240KB  ← 우리가 쓰는 것
       상품 사진 한 장(200~500KB)과 비슷한 무게입니다.

       손님은 아무것도 하지 않습니다 — 사진·CSS 와 똑같이 브라우저가 알아서 가져옵니다.
       `font-display:swap` 이라 글꼴을 받는 동안에도 글자가 먼저 보입니다.

       글자를 새로 쓰게 되면(상품명·회원 이관) 아래 도구를 한 번 돌리면 됩니다:
         python gimeok-shared/tools/make-font.py safe
       담기지 않은 희귀 글자는 깨지지 않고 손님 기기 글꼴로 그려집니다. */
  --gi-font: GimeokSans, Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto,
             "Malgun Gothic", sans-serif;
  --gi-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 자간 — 한글은 살짝 조여야 단단해 보입니다 (네 곳 모두 음수 자간을 씁니다) */
  --gi-track:       -.02em;
  --gi-track-title: -.032em;

  /* ── 모서리·그림자·간격 ── */
  --gi-r-s:  10px;
  --gi-r:    14px;
  --gi-r-l:  20px;
  --gi-r-pill: 999px;
  --gi-shadow:   0 2px 10px rgba(22, 24, 35, .06);
  --gi-shadow-l: 0 8px 28px rgba(22, 24, 35, .12);
}

/* ══ 글씨 기본 — 세 앱이 같은 자간·다듬기를 씁니다 ═══════════════════════
   ★ font-family 는 여기서 강제하지 않습니다. 각 앱의 body 가 --gi-font 를
     직접 부르게 해서, 어느 화면이 이 파일을 안 읽었는지 바로 드러나게 합니다. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  letter-spacing: var(--gi-track);
  /* 맑은 고딕·본고딕은 이 두 줄이 있고 없고가 눈에 띄게 다릅니다 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { letter-spacing: var(--gi-track-title); }

/* 숫자는 자리가 흔들리면 값이 튀어 보입니다 (가격·재고·타이머) */
.gi-num, .price, .timer, time { font-variant-numeric: tabular-nums; }

/* ══ 아이콘 ════════════════════════════════════════════════════════════
   icons.js 가 그리는 svg 의 공통 자세. 색은 부모 글자색을 따라갑니다. */
.gi {
  display: inline-block;
  vertical-align: -.18em;
  flex: 0 0 auto;
  color: inherit;
}
/* 활성 상태는 채우지 않고 선만 굵힙니다 (오늘과일·쿠마마켓·그립과 같은 방식) */
.gi-on .gi path, .on .gi path, .active .gi path { stroke-width: 2.3; }

/* ══ 알약 버튼 · 칩 — 세 앱 공통 ═══════════════════════════════════════ */
.gi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; cursor: pointer; font-family: inherit; font-weight: 800;
  letter-spacing: var(--gi-track);
  border-radius: var(--gi-r-s); padding: 13px 18px; font-size: 15px;
  background: var(--gi-soft); color: var(--gi-ink);
}
.gi-btn--point { background: var(--gi-point); color: var(--gi-on-point); }
.gi-btn--point:active { background: var(--gi-point-press); }
.gi-btn--brand { background: var(--gi-brand-grad); color: #fff; }
.gi-btn--ghost { background: transparent; border: 1px solid var(--gi-line); }
.gi-btn:disabled { opacity: .45; cursor: default; }

.gi-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--gi-r-pill); padding: 5px 11px;
  font-size: 12.5px; font-weight: 800; letter-spacing: var(--gi-track);
  background: var(--gi-soft); color: var(--gi-ink-2);
}
.gi-chip--point { background: var(--gi-point-soft); color: var(--gi-point); }
.gi-chip--live  { background: var(--gi-point); color: #fff; }

/* ══ 가격 — 어느 화면에서든 같은 모양이어야 합니다 ═════════════════════
   네 곳 모두 「할인율(포인트색) + 값(잉크색)」 순서입니다. */
.gi-price { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.gi-price .off { color: var(--gi-point); font-weight: 900; }
.gi-price .now { color: var(--gi-ink); font-weight: 900; }
.gi-price .was { color: var(--gi-mute); font-weight: 500; text-decoration: line-through; font-size: .86em; }

/* 검은 화면에서는 잉크색만 뒤집습니다 */
.gi-dark .gi-price .now { color: var(--gi-on-dark); }
.gi-dark .gi-price .was { color: var(--gi-on-dark-mute); }

/* ══ 회원 등급 뱃지 (사장님 지시 2026-08-24) ═══════════════════════════
   "등급뱃지는 신입이면 신입뱃지가 있어야 해. 등급별로 다 있어야 해"

   전에는 등급마다 이모지(🐣🥇🤍💎👑)를 썼습니다. 이모지는 손님 기기가 그리므로
   아이폰·안드로이드·윈도우에서 **등급표가 저마다 다르게** 보였습니다.
   등급은 우리가 정한 것이니 우리가 그린 뱃지로 보여야 합니다. */
.gi-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;color:#fff;line-height:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.gi-badge .gi{width:15px;height:15px}
.gi-badge--lg{width:38px;height:38px}
.gi-badge--lg .gi{width:21px;height:21px}
.gi-badge--sm{width:20px;height:20px}
.gi-badge--sm .gi{width:12px;height:12px}
/* 등급 이름과 나란히 */
.gi-grade{display:inline-flex;align-items:center;gap:7px;font-weight:800;letter-spacing:var(--gi-track)}