/* ════════════════════════════════════════════════════════════════════
   WOW ABOUTMEAT — 부산물 전문몰 디자인 토큰

   색값은 작업지시서 3번에 적힌 그대로입니다. 여기 한 곳에만 둡니다 —
   화면 코드에서 #123D32 같은 날값을 쓰지 마세요. 나중에 브랜드색을
   한 단계 조정할 때 고칠 곳이 한 군데여야 합니다.

   ⚠️ Accent Red(#C85B4B)는 **가격·특가·NEW 배지에만** 씁니다.
   구간 제목이나 카드 배경으로 넓히면 그 순간 "빨간 정육점" 이 되고,
   지시서 2번이 금지한 디자인이 됩니다.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 색 (지시서 3번) ───────────────────────────────────── */
  --green:        #123D32;   /* MAIN DEEP GREEN — 헤더 강조·버튼·다크 배너 */
  --green-700:    #0D2E26;   /* 눌렀을 때 */
  --green-400:    #2A5A4C;   /* 호버 */
  --ivory:        #F6F4EE;   /* BACKGROUND / WARM IVORY */
  --white:        #FFFFFF;
  --ink:          #202522;   /* TEXT */
  --ink2:         #6B706D;   /* SUB TEXT */
  --line:         #E7E4DC;   /* BORDER */
  --red:          #C85B4B;   /* ACCENT RED — 가격·특가·NEW 만 */
  --red-ink:      #A8402F;   /* 아이보리 위 빨강 글자 (본문 대비 확보용) */
  --green-bg:     #EEF2EE;   /* LIGHT GREEN BACKGROUND */

  /* 파생 — 위 여덟 가지에서만 만듭니다 */
  --ink3:         #9A9E9B;   /* 더 옅은 보조 글자 (단위·캡션) */
  --line-soft:    #F0EDE6;
  --shadow-sm:    0 1px 2px rgba(18,61,50,.05);
  --shadow-md:    0 4px 16px rgba(18,61,50,.07);
  --shadow-lg:    0 12px 36px rgba(18,61,50,.10);

  /* ── 글꼴 ──────────────────────────────────────────────
     Pretendard 가 CDN 에서 못 뜨더라도 버튼·입력칸만 다른 글꼴이
     되지 않도록, 화면 코드는 반드시 var(--font) 를 씁니다. */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
          system-ui, "Noto Sans KR", sans-serif;
  --font-num: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;

  /* ── 글씨 크기 — 아홉 단계에서 끝냅니다 ────────────────
     12px 미만은 만들지 않습니다. 부산물은 사업자 손님이 많고,
     연세 있는 분이 kg 단가를 읽어야 합니다. */
  --t-cap:   12.5px;  /* 배지·캡션 */
  --t-sm:    13px;    /* 보조 설명 */
  --t-base:  14px;    /* 본문 기본 */
  --t-md:    15px;    /* 상품명·버튼 */
  --t-lg:    17px;    /* 소제목 */
  --t-xl:    20px;    /* 카드 제목·가격 */
  --t-2xl:   24px;    /* 상품상세 제목 */
  --t-3xl:   32px;    /* 구간 제목 */
  --t-hero:  clamp(30px, 5.4vw, 52px);   /* 히어로 한 곳만 유동 */

  --lh-tight: 1.28;
  --lh-base:  1.62;

  /* ── 간격 — 4 의 배수 ─────────────────────────────────── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 56px;  --s10: 80px; --s11: 112px;

  --sec-y:      var(--s10);   /* 구간 위아래 여백 (데스크톱) */
  --sec-y-tight: var(--s9);   /* 읽기만 하는 구간 */

  /* ── 모서리 ───────────────────────────────────────────
     지나치게 둥글면 쇼핑몰 앱처럼 보이고, 각지면 차갑습니다. */
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  14px;
  --r-pill: 999px;

  /* ── 레이아웃 ─────────────────────────────────────────── */
  --max:     1280px;   /* 본문 최대 폭 */
  --gutter:  24px;     /* 좌우 여백 (데스크톱) */
  --hdr-h:   72px;     /* 헤더 윗줄 */
  --gnb-h:   52px;     /* GNB 줄 */
  --grid-gap: 24px;

  /* ── 이미지 비율 ───────────────────────────────────────
     상품 사진은 전부 4:3. 한 그리드 안에서 비율이 섞이면
     카드 높이가 들쭉날쭉해져 목록이 지저분해 보입니다. */
  --ar-product: 4 / 3;
  --ar-hero:    16 / 7;
  --ar-square:  1 / 1;

  /* 누르는 것의 최소 크기 — 모바일 장바구니에서 오터치가 곧 이탈입니다 */
  --tap: 44px;
}

/* 태블릿 아래로는 여백과 구간 높이를 줄입니다.
   데스크톱 여백을 그대로 들고 내려오면 스크롤만 길어집니다. */
@media (max-width: 1024px){
  :root{ --sec-y: var(--s9); --sec-y-tight: var(--s8); --gutter: 20px; --grid-gap: 16px; }
}
@media (max-width: 640px){
  :root{
    --sec-y: var(--s8); --sec-y-tight: var(--s7); --gutter: 16px; --grid-gap: 12px;
    --hdr-h: 56px; --gnb-h: 46px;
    --t-3xl: 24px; --t-2xl: 20px; --t-xl: 18px;
  }
}