/* ══════════════════════════════════════════════════════════════════════════
   구포몰 디자인 토큰
   ──────────────────────────────────────────────────────────────────────────
   모든 색은 WCAG 2.1 AA(소형 텍스트 4.5:1)를 계산해서 정했다.
   1차 구축분에서 브랜드색 위 흰 글씨가 4.03:1 로 미달했던 자리이므로
   값을 바꿀 때는 반드시 대비를 다시 계산한다 (CLAUDE.md 재구축 주의 5항).

   색은 마스코트(구포 거북이)에서 뽑았다. 화면의 노랑과 로고의 노랑이 다르면
   로고만 얹어 놓은 것처럼 보인다. 다만 **로고에 쓰인 색이라고 해서 화면에
   그대로 쓸 수 있는 것은 아니다** — 등껍질 초록이 그 예다(아래).

   검증된 조합 (측정치)
     ink-900(#0E2430) 위 흰 글씨            15.99:1
     ink-900 위 dim(#AFBECB)                 8.41:1
     yellow-500(#FFDF30) 위 먹 글씨         13.48:1   ← 난색에는 반드시 먹 글씨
     yellow-500 위 흰 글씨                    1.32:1   ← 금지
     yellow-500 을 흰 바탕 글씨로              1.32:1   ← 금지. 그 자리는 700
     yellow-700(#6B5B00) 위 흰 글씨           6.73:1
     shell-500(#408A29) 로고 원색            흰 4.30 / 먹 3.79  ← 둘 다 미달, 면에만
     shell-600(#367523) on white             5.64:1
     red-600(#BE2818) on white               5.99:1
     red-700(#A6210F) 위 흰 글씨              7.38:1
     n-500(#656B73) on page(#F5F6F7)         4.97:1   ← 이전 값 4.33:1 은 미달이었다
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/PretendardVariable.302ec55f5b43.woff2") format("woff2-variations");
}

/* 워드마크(구포몰) 전용 표시 서체 — Bagel Fat One, SIL OFL 1.1.
 *
 * 로고 글자에만 쓴다. 본문에 쓰면 두꺼운 획이 서로 붙어 읽히지 않는다.
 * 원본은 한글 3,121 자에 1.5MB 라, 로고에 실제로 쓰는 글자만 잘라 11.8KB 로
 * 줄였다 (tools/build_wordmark_font.py). 구글 폰트 CDN 을 부르지 않는 이유는
 * SPEC §1 클라우드 중립이다.
 *
 * 라이선스 전문: static/fonts/BagelFatOne-OFL.txt
 */
@font-face {
  font-family: "Bagel Fat One";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/BagelFatOne-wordmark.edd491ca588d.woff2") format("woff2");
}

:root {
  /* ── 나루 잉크 — 구포나루의 감청. 크롬(헤더·푸터)과 최상위 텍스트 ───── */
  --ink-950: #081A24;
  --ink-900: #0E2430;
  --ink-800: #16323F;
  --ink-700: #224353;
  --ink-600: #315667;
  --ink-300: #AFBECB;
  --ink-200: #CBD6DF;

  /* ── 구포 노랑 — 마스코트에서 그대로 뽑았다. 행동(CTA)의 색 ────────────
   *
   * 500(#FFDF30)은 로고 몸통 색 그 자체다. 화면의 노랑과 로고의 노랑이
   * 다르면 로고만 붙여 놓은 것처럼 보인다.
   *
   * 노랑 위에는 **언제나 먹 글씨**를 얹는다. 밝기가 높아 흰 글씨는 1.32:1 로
   * 아예 안 읽힌다 — 눈대중으로 흰 글씨를 얹지 않는다.
   * 반대로 노랑을 흰 바탕 위 '글씨'로 쓸 수는 없다(1.32:1). 그 자리는 700 이다.
   */
  --yellow-50:  #FFFDF0;
  --yellow-100: #FFF9D6;
  --yellow-200: #FFF3B2;
  --yellow-300: #FFEC85;   /* 어두운 크롬 위 글씨 13.39:1 */
  --yellow-400: #FFE65C;   /* 행동 hover — 먹 글씨 14.22:1 */
  --yellow-500: #FFDF30;   /* 로고 몸통색 — 먹 글씨 13.48:1 */
  --yellow-600: #DBB900;   /* 테두리 전용. 글씨로 쓰면 흰 바탕에서 1.92:1 */
  --yellow-700: #6B5B00;   /* 위에 흰 글씨 6.73:1 */

  /* 별점의 채운 별. 흔히 쓰는 밝은 호박색(#F5A524)은 흰 바탕 2.04:1 로
   * **그래픽 대비 3:1(WCAG 1.4.11)에 미달**한다. 별은 값을 전달하는 그림이라
   * 장식이 아니다 — 안 보이면 평점을 못 읽는다.
   *
   *   흰 바탕 4.18:1 · 페이지 배경 3.87:1 · 빈 별(--n-200) 대비 3.31:1
   *
   * 마지막 값이 특히 중요하다. 채운 별과 빈 별이 구분되지 않으면 몇 점인지
   * 알 수 없고, 그 순간 별점 표시가 통째로 무의미해진다. */
  --star: #B36B00;

  /* ── 값·특가 — 가격과 마감 임박에만 쓴다. 남용하면 신호가 죽는다 ──── */
  --red-50:  #FDECEA;
  --red-100: #FBD9D4;
  --red-500: #D5301E;
  --red-600: #BE2818;
  --red-700: #A6210F;

  /* ── 등껍질 초록 — 마스코트 등껍질에서 뽑았다. 배송·픽업·신뢰 표시 ────
   *
   * 로고 원색(#408A29)은 흰 글씨 4.30:1, 먹 글씨 3.79:1 로 **어느 쪽도
   * 못 얹는다.** 색상·채도는 그대로 두고 명도만 낮춰 쓸 수 있게 만들었다.
   * 로고에 쓰인 색이라고 해서 화면에 그대로 쓸 수 있는 것은 아니다.
   */
  --shell-50:  #E8F7E4;
  --shell-500: #408A29;   /* 로고 원색 — 면·아이콘 전용, 글씨 금지 */
  --shell-600: #367523;   /* 흰 바탕 글씨 5.64:1 */
  --shell-700: #2D611D;   /* 흰 바탕 글씨 7.40:1 */

  --blue-50:  #EBF3FD;
  --blue-500: #2379DC;
  --blue-600: #1668C7;
  --blue-700: #12539E;

  --green-50:  #E7F4EC;
  --green-600: #157347;
  --green-700: #0F5C39;

  /* ── 중립 ─────────────────────────────────────────────────────────── */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFD;
  --n-50:  #F5F6F7;
  --n-100: #EDEFF2;
  --n-200: #E2E5EA;
  --n-300: #CFD4DB;
  --n-400: #949BA4;
  --n-500: #656B73;   /* 페이지 배경 위 4.97:1 — 이전 #6F757E 는 미달이었다 */
  --n-600: #4E545C;
  --n-700: #383D44;
  --n-800: #23272D;
  --n-900: #12161A;

  /* ── 의미 토큰 ────────────────────────────────────────────────────── */
  --bg-page:     var(--n-50);
  --bg-surface:  var(--n-0);
  --bg-raised:   var(--n-25);
  --bg-muted:    var(--n-100);
  --bg-sunken:   var(--n-200);
  --bg-chrome:   var(--ink-900);
  --bg-chrome-2: var(--ink-800);
  --bg-tint:     var(--yellow-50);
  --bg-deal:     var(--red-700);

  --text-primary:       var(--n-900);
  --text-secondary:     var(--n-600);
  --text-muted:         var(--n-500);
  --text-on-chrome:     var(--n-0);
  --text-on-chrome-dim: var(--ink-300);
  --text-on-action:     #14181B;
  --text-price:         var(--red-600);
  --text-link:          var(--blue-700);

  --line:        var(--n-200);
  --line-soft:   var(--n-100);
  --line-strong: var(--n-300);
  --line-field:  var(--n-400);
  --line-focus:  var(--blue-600);

  --action-bg:       var(--yellow-500);
  --action-bg-hover: var(--yellow-400);
  --action-line:     var(--yellow-600);

  --status-ok:     var(--green-700);
  --status-warn:   var(--yellow-700);
  --status-danger: var(--red-600);
  --status-info:   var(--blue-700);

  /* ── 타이포 스케일 — 1.200 (minor third). 한글은 자간을 좁혀야 안정된다 ─ */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-34: 34px;
  --fs-42: 42px;

  --tracking-tight:  -0.028em;
  --tracking-tighter: -0.042em;
  --tracking-wide:    0.06em;

  /* ── 간격 (4px 그리드) ───────────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* 그림자는 잉크색을 섞어 만든다. 순수 검정 그림자는 화면을 탁하게 만든다. */
  --shadow-xs: 0 1px 2px rgba(14, 36, 48, .06);
  --shadow-sm: 0 1px 3px rgba(14, 36, 48, .08), 0 1px 2px rgba(14, 36, 48, .04);
  --shadow-md: 0 4px 14px -3px rgba(14, 36, 48, .12), 0 2px 5px -2px rgba(14, 36, 48, .06);
  --shadow-lg: 0 14px 34px -10px rgba(14, 36, 48, .18), 0 4px 10px -4px rgba(14, 36, 48, .08);
  --shadow-xl: 0 24px 56px -16px rgba(14, 36, 48, .24);

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.45, .05, .55, .95);
  --dur-fast: .14s;
  --dur-base: .22s;
  --dur-slow: .38s;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
               BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
               "Apple SD Gothic Neo", sans-serif;
  --font-serif: "Nanum Myeongjo", "Batang", "AppleMyungjo", serif;
  /* 로고 글자 전용. 본문에 쓰지 않는다 — 획이 두꺼워 서로 붙는다. */
  --font-wordmark: "Bagel Fat One", var(--font-sans);

  /* ── 레이아웃 상수 ───────────────────────────────────────────────── */
  --promo-h: 36px;
  --header-h: 68px;
  --hotwords-h: 44px;
  --catnav-h: 48px;
  --quicknav-h: 44px;
  --subnav-h: 42px;
  --subnav-h: 42px;        /* 백오피스 2차 네비 */
  --bottom-nav-h: 58px;
  --cta-h: 62px;
  --page-max: 1280px;
  --page-pad: var(--space-5);

  /* 화면 위에 붙어 있는 것의 실제 높이. 앵커로 뛰었을 때 제목이 그 아래로
   * 숨지 않으려면 이 값이 정확해야 한다.
   *
   * 인기 검색어 줄은 헤더 **안에** 있으므로 헤더 높이에 더해야 한다.
   * --header-h 만 쓰면 sticky 로 붙는 것들이 인기 검색어 줄 높이만큼
   * 헤더 뒤로 들어가 보이지 않는다. 기본값은 인기 검색어가 없는 화면
   * (상인센터·운영센터) 기준이고, 있는 화면은 아래에서 늘린다. */
  --stick-h: var(--header-h);
}

/* :has() 를 못 읽는 브라우저는 위의 기본값으로 떨어진다 — 앵커 위치가 인기
   검색어 줄만큼 어긋날 뿐 화면이 깨지지는 않는다. */
:root:has(.hotwords) { --stick-h: calc(var(--header-h) + var(--hotwords-h)); }

@media (max-width: 768px) {
  :root {
    --promo-h: 34px;
    --header-h: 56px;
    --page-pad: var(--space-4);
  }
}