/* ==========================================================================
   오늘찬 (ONeulChan) — 반찬 정기배송 템플릿
   시안 정본: 00-디자인보드.png (컬러·타이포·컴포넌트) / 01-home.png / 02-페이지시안.png / 06-mobile.png
   레이아웃 원형: Commerce Grid + Horizontal Rail + Sticky Cart
   ========================================================================== */

:root {
  /* ── Color (디자인보드 컬러 시스템) */
  --rice: #fafaf6;          /* Rice White */
  --paper: #ffffff;
  --chili: #e23b2e;         /* Chili Red */
  --chili-press: #c22e23;
  --chili-tint: #fdf1ef;
  --leaf: #2e7d32;          /* Leaf Green */
  --leaf-press: #256428;
  --leaf-tint: #edf4ed;
  --ink: #222222;           /* Deep Charcoal */
  --ink2: #55554f;
  --muted: #8b8b83;
  --line: #e5e5e5;          /* Gray 300 */
  --line-soft: #f0efe9;
  --tint: #f3f1e9;
  --shadow-color: 34 34 34;

  /* ── Typography */
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --h1: clamp(34px, 5.4vw, 60px);
  --h2: clamp(25px, 2.7vw, 36px);
  --h3: clamp(18px, 1.5vw, 21px);

  /* ── Spacing (8px system) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s7: 64px; --s8: 80px; --s9: 104px; --s10: 128px;

  /* ── Radius / Shadow / Border */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgb(var(--shadow-color) / 0.04), 0 4px 14px rgb(var(--shadow-color) / 0.05);
  --sh-2: 0 2px 6px rgb(var(--shadow-color) / 0.05), 0 16px 40px rgb(var(--shadow-color) / 0.08);
  --sh-up: 0 -2px 10px rgb(var(--shadow-color) / 0.07);

  /* ── Layout */
  --wrap: 1220px;
  --gutter: 32px;
  --section: 104px;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 0.7, 0.28, 1);

  /* ── Z-index */
  --z-header: 60; --z-cartbar: 70; --z-scrim: 80; --z-drawer: 90; --z-toast: 100;
}

/* --------------------------------------------------------------- 기본 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--rice);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.012em;
  /* 한국어는 어절 단위로 끊는다 — "2층"·"3인분"이 갈라지지 않게 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 92px; /* 하단 고정 장바구니 바 자리 */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.32; letter-spacing: -0.028em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--chili); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--chili); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 880px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.frame { display: block; overflow: hidden; background: var(--tint); border-radius: var(--r); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

.ico {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-xs { width: 14px; height: 14px; stroke-width: 1.8; }
.ico-sm { width: 17px; height: 17px; stroke-width: 1.7; }
.ico-lg { width: 30px; height: 30px; stroke-width: 1.35; }

/* --------------------------------------------------------------- 활자 */
.eyebrow {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--chili); margin-bottom: 12px;
}
.sec-title { font-size: var(--h2); font-weight: 700; }
.sec-sub { margin-top: 12px; color: var(--ink2); font-size: 15px; }
.lead { color: var(--ink2); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.8; }
em { font-style: normal; color: var(--chili); }
em.green { color: var(--leaf); }
em.red { color: var(--chili); }
.opt { color: var(--muted); font-weight: 500; font-size: 13px; }

.section { padding-block: calc(var(--section) / 2); }
.section-flush { padding-block: calc(var(--section) / 2); }
.section-last { padding-bottom: var(--section); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.sec-head.center { justify-content: center; text-align: center; }
.sec-head.center .sec-sub { max-width: 640px; margin-inline: auto; }
.sec-tools { display: flex; align-items: center; gap: var(--s2); flex: none; }

.btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink2);
  padding: 8px 4px; border-bottom: 1px solid transparent; transition: color .18s var(--ease), border-color .18s var(--ease);
}
.btn-text:hover { color: var(--chili); border-color: var(--chili); }

/* --------------------------------------------------------------- 버튼 */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--bd); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg);
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  cursor: pointer; text-align: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { --bg: var(--chili); --fg: #fff; --bd: var(--chili); }
.btn-primary:hover { --bg: var(--chili-press); --bd: var(--chili-press); }
.btn-leaf { --bg: var(--leaf); --fg: #fff; --bd: var(--leaf); }
.btn-leaf:hover { --bg: var(--leaf-press); --bd: var(--leaf-press); }
.btn-dark { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }
.btn-dark:hover { --bg: #000; }
.btn-line { --bg: var(--paper); --fg: var(--ink); --bd: var(--line); }
.btn-line:hover { --bd: var(--ink); }
.btn-ghost { --bg: transparent; --fg: #fff; --bd: rgb(255 255 255 / 0.55); }
.btn-ghost:hover { --bg: rgb(255 255 255 / 0.12); --bd: #fff; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* 이미 담긴 상품 — 빨강 버튼 위에 초록 글씨가 얹히지 않도록 배경까지 함께 바꾼다 */
.btn-add.is-in { --bg: var(--leaf-tint); --fg: var(--leaf); --bd: var(--leaf); }
.btn-add.is-in:hover { --bg: #e2eee3; }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  display: inline-block; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- 헤더 */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(250 250 246 / 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck { border-color: var(--line); box-shadow: 0 2px 12px rgb(34 34 34 / 0.05); }
.nav { display: flex; align-items: center; gap: var(--s3); height: var(--header-h); }

.brand { display: inline-flex; align-items: baseline; gap: 3px; flex: none; }
.brand-name { font-size: 25px; font-weight: 800; letter-spacing: -0.05em; color: var(--ink); }
.brand-seal {
  width: 17px; height: 17px; border-radius: 4px; background: var(--chili); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  transform: translateY(-7px); flex: none;
}
.brand small { margin-left: 10px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }

.navlinks { display: flex; align-items: center; gap: 4px; margin-left: var(--s2); }
.navlinks a {
  position: relative; padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--ink2);
  border-radius: var(--r-sm); transition: color .16s var(--ease), background-color .16s var(--ease);
}
.navlinks a:hover { color: var(--ink); background: var(--line-soft); }
.navlinks a[aria-current] { color: var(--chili); }
.navlinks a[aria-current]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--chili); border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.nav-tel {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--ink); padding: 8px 10px;
}
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--ink);
  transition: background-color .16s var(--ease);
}
.cart-btn:hover { background: var(--line-soft); }
.cart-badge {
  position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--chili); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.cart-badge.is-zero { background: var(--muted); }
.menu-btn {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--ink);
}

/* 모바일 가로 메뉴 (06-mobile: Horizontal Menu) */
.tabbar { display: none; gap: 2px; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar a {
  flex: none; padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--ink2);
  border-bottom: 2px solid transparent; white-space: nowrap; min-height: 46px;
}
.tabbar a[aria-current] { color: var(--chili); border-color: var(--chili); }

/* --------------------------------------------------------------- 서랍 */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgb(34 34 34 / 0.42); opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(340px, 88vw); background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .28s var(--ease), visibility .28s var(--ease);
  box-shadow: -8px 0 40px rgb(34 34 34 / 0.12);
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-close { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.drawer-nav { padding: 8px 0; overflow-y: auto; flex: 1; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; font-size: 17px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-soft); min-height: 54px;
}
.drawer-nav a:hover { background: var(--line-soft); }
.drawer-nav a .ico { color: var(--muted); }
.drawer-foot { padding: 16px 20px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-sum { font-size: 14px; color: var(--ink2); }
.drawer-sum b { color: var(--ink); }

/* --------------------------------------------------------------- 하단 고정 장바구니 (Sticky Cart) */
.cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cartbar);
  background: var(--paper); border-top: 1px solid var(--line); box-shadow: var(--sh-up);
  /* 바탕은 클릭을 통과시킨다 — 아래에 깔린 버튼을 삼키지 않게 */
  pointer-events: none;
}
.cartbar-in { display: flex; align-items: center; gap: var(--s2); min-height: 76px; padding-block: 12px; }
.cartbar-ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--chili); color: #fff; flex: none;
}
.cartbar-count {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.cartbar-num { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; flex: none; }
.cartbar-div { width: 1px; height: 14px; background: var(--line); display: inline-block; }
.cartbar-pay { color: var(--chili); font-size: 18px; }
.cartbar-free { display: grid; gap: 6px; flex: 1; min-width: 0; }
.cartbar-msg { font-size: 13px; color: var(--ink2); }
.cartbar-track, .track { display: block; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.cartbar-track i, .track i { display: block; height: 100%; background: var(--leaf); border-radius: var(--r-pill); transition: width .35s var(--ease); }
.cartbar .btn { pointer-events: auto; flex: none; }
.cartbar.is-empty .cartbar-ico { background: var(--muted); }

/* --------------------------------------------------------------- 토스트 · 맨 위로 */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); z-index: var(--z-toast);
  display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
  pointer-events: none; /* 하단 버튼을 삼키지 않게 */
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast .ico { color: #7fd08a; }
.toast-msg { flex: 1; }
.toast-act {
  pointer-events: auto; flex: none; min-height: 34px; padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.5); border-radius: var(--r-pill);
  color: #fff; font-size: 13px; font-weight: 700;
}
.toast-act:hover { background: rgb(255 255 255 / 0.14); }

.to-top {
  position: fixed; right: 20px; bottom: 100px; z-index: var(--z-cartbar);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-1); opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- 등장 효과 */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════ 홈 — Hero */
.hero { position: relative; background: linear-gradient(180deg, #f6f3ea 0%, var(--rice) 100%); overflow: hidden; }
.hero-in { position: relative; z-index: 1; padding-block: clamp(48px, 6vw, 96px); }
.hero-copy { max-width: 480px; }
.hero-copy h1 { font-size: var(--h1); font-weight: 800; letter-spacing: -0.045em; line-height: 1.18; }
.hero-copy .lead { margin-top: var(--s3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--s4); }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.hero-trust .ico { color: var(--leaf); }
.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #f6f3ea 0%, rgb(246 243 234 / 0) 22%);
}

/* ══════════════════════════════════════════════ 가로 레일 (Horizontal Rail) */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px var(--gutter) var(--s3);
  scroll-padding-left: var(--gutter);
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: none; }
.rail-nav { display: inline-flex; gap: 6px; }
.rail-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.rail-btn:hover { border-color: var(--ink); }
.rail-hint { margin-top: 4px; font-size: 13px; color: var(--muted); text-align: center; }

.dish { width: 186px; text-align: center; position: relative; }
.dish-photo {
  display: block; position: relative; width: 152px; height: 152px; margin: 0 auto 14px;
  border-radius: 50%; overflow: hidden; background: var(--paper);
  box-shadow: 0 6px 18px rgb(34 34 34 / 0.07);
  transition: transform .25s var(--ease);
}
.dish-photo img { width: 100%; height: 100%; object-fit: cover; }
.dish:hover .dish-photo { transform: translateY(-4px); }
.dish-name { font-size: 16px; font-weight: 700; }
.dish-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dish-price { font-size: 16px; font-weight: 800; margin-top: 6px; }
.dish .btn { margin-top: 10px; }
.dish.is-out .dish-photo img { filter: grayscale(0.85) opacity(0.55); }

.badge {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: -0.01em; z-index: 2; white-space: nowrap;
}
/* 원형 사진에서는 액자 밖에 얹는다 — 안에 넣으면 원 마스크에 잘린다 */
.dish > .badge { top: 0; box-shadow: 0 0 0 3px var(--rice); }
.pcard .badge { left: 8px; transform: none; }
.badge-new { background: var(--leaf); color: #fff; }
.badge-best { background: var(--ink); color: #fff; }
.badge-low { background: var(--chili-tint); color: var(--chili); border: 1px solid var(--chili); }
.badge-out { background: var(--muted); color: #fff; }

/* ══════════════════════════════════════════════ 홈 — 라이브 장바구니 요약 */
.livecart {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center;
  gap: var(--s3) var(--s5);
  background: var(--paper); border: 1px solid var(--leaf); border-radius: var(--r-lg);
  padding: var(--s4); box-shadow: var(--sh-1);
}
.livecart-head { display: flex; align-items: center; gap: 14px; }
.livecart-ico {
  width: 56px; height: 56px; border-radius: var(--r); background: var(--leaf-tint); color: var(--leaf);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.livecart-title { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.live-dot {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--chili);
  padding: 2px 7px; border-radius: 4px;
}
.livecart-sub { font-size: 14px; color: var(--ink2); margin-top: 2px; }
.livecart-nums { display: flex; align-items: flex-end; gap: var(--s5); }
.livecart-nums dt { font-size: 13px; color: var(--muted); }
.livecart-nums dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; }
.livecart-nums .is-total dd { color: var(--chili); font-size: 24px; }
.livecart-act { display: grid; gap: 8px; }
.livecart-free { grid-column: 1 / -1; display: grid; gap: 7px; font-size: 13px; color: var(--ink2); }

/* ══════════════════════════════════════════════ 홈 — 약속 4열 */
.promise { background: var(--paper); border-block: 1px solid var(--line); }
.promise-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.promise-row li { padding: var(--s2) var(--s3); text-align: center; border-left: 1px solid var(--line-soft); }
.promise-row li:first-child { border-left: 0; }
.promise-row .ico { color: var(--leaf); margin: 0 auto 14px; }
.promise-row h3 { font-size: 17px; }
.promise-row p { margin-top: 8px; font-size: 14px; color: var(--ink2); }

/* ══════════════════════════════════════════════ 홈 — 에디토리얼 분할 */
.split { display: grid; grid-template-columns: 340px 1fr; gap: var(--s7); align-items: center; }
.split-copy h2 { line-height: 1.34; }
.split-copy .lead { margin-top: var(--s3); }
.split-copy .btn { margin-top: var(--s4); }
.split-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.split-figs li { text-align: center; }
.split-figs .frame { aspect-ratio: 181 / 196; margin-bottom: 14px; }
.split-figs b { display: block; font-size: 15px; }
.split-figs span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════════ 홈 — 쿠폰 */
.coupon {
  display: grid; grid-template-columns: 1fr 380px; align-items: center; gap: var(--s5);
  background: var(--tint); border-radius: var(--r-lg); overflow: hidden;
  padding-left: var(--s7);
}
.coupon-copy { padding-block: var(--s5); }
.coupon-copy h2 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; }
.coupon-copy p { margin-top: 12px; font-size: 14px; color: var(--ink2); }
.coupon-copy .btn { margin-top: var(--s3); }
.coupon-photo { display: block; align-self: stretch; }
.coupon-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════ 홈 — 이용 안내 */
.info-sec { border-top: 1px solid var(--line); }
.info-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.info-row li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.info-row .ico { grid-row: span 2; color: var(--ink2); }
.info-row b { font-size: 15px; align-self: end; }
.info-row span { font-size: 13px; color: var(--muted); align-self: start; }

/* ══════════════════════════════════════════════ 페이지 머리 */
.page-head { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: var(--s4) var(--s5); }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: var(--s3); }
.crumb a:hover { color: var(--chili); }
.page-head-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.page-head h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.04em; }
.page-head .lead { margin-top: var(--s2); }
.page-head-photo { display: block; width: 220px; flex: none; border-radius: var(--r-lg); overflow: hidden; }
.page-head-photo img { width: 100%; height: auto; }
.page-head-photo.photo-sub { width: 190px; }
.head-count {
  display: inline-block; min-width: 34px; padding: 0 10px; margin-left: 6px;
  border-radius: var(--r-pill); background: var(--chili); color: #fff;
  font-size: 17px; font-weight: 700; vertical-align: 6px;
}

/* ══════════════════════════════════════════════ 주간 식단 — 필터 */
.filters { background: var(--rice); border-bottom: 1px solid var(--line); padding-block: var(--s3); position: sticky; top: var(--header-h); z-index: 40; }
.filter-block + .filter-block { margin-top: var(--s2); }
.filter-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.rail-wrap.flush .chiprail { padding-inline: 0; }
.chiprail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chiprail::-webkit-scrollbar { display: none; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset.big { gap: 10px; }

.chip {
  flex: none; min-height: 46px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  font-size: 15px; font-weight: 600; color: var(--ink2);
  transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--chili); background: var(--chili); color: #fff; }
.chip[disabled], .chip.is-off { opacity: .38; cursor: not-allowed; }
.chip-day { flex-direction: column; gap: 0; min-width: 62px; padding: 6px 12px; line-height: 1.25; }
.chip-day b { font-size: 15px; font-weight: 700; }
.chip-day span { font-size: 11px; opacity: .8; }
.chip-al[aria-pressed="true"] { border-color: var(--leaf); background: var(--leaf); }
.chip-reset { color: var(--muted); background: transparent; }
.chip-lg { min-height: 54px; padding: 0 26px; font-size: 15px; }
.chip-sq { min-width: 54px; min-height: 54px; padding: 0; }
.filter-count { margin-top: var(--s2); font-size: 14px; color: var(--ink2); font-weight: 600; }

/* ── 상품 격자 (Commerce Grid) */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pcard {
  display: grid; grid-template-columns: 148px 1fr; gap: var(--s3);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s2); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pcard:hover { border-color: var(--ink); box-shadow: var(--sh-1); }
.pcard-photo { display: block; position: relative; border-radius: var(--r); overflow: hidden; background: var(--tint); aspect-ratio: 1; }
.pcard-photo img { width: 100%; height: 100%; object-fit: cover; }
.pcard.is-out .pcard-photo img { filter: grayscale(0.85) opacity(0.5); }
.pcard-body { display: flex; flex-direction: column; min-width: 0; }
.pcard-cat { font-size: 12px; font-weight: 700; color: var(--leaf); }
.pcard-name { font-size: 18px; font-weight: 700; margin-top: 2px; }
.pcard-desc { font-size: 13px; color: var(--ink2); margin-top: 8px; line-height: 1.65; }
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pcard-tags span { font-size: 11px; font-weight: 600; color: var(--ink2); background: var(--line-soft); border-radius: 4px; padding: 3px 7px; }
.pcard-al { font-size: 12px; color: var(--muted); margin-top: 8px; }
.pcard-stock { font-size: 12px; font-weight: 600; color: var(--leaf); margin-top: 6px; }
.pcard-stock.is-low { color: var(--chili); }
.pcard-stock.is-out { color: var(--muted); }
.pcard-buy { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--s2); flex-wrap: wrap; }
.pcard-price { width: 100%; font-size: 19px; font-weight: 800; }
.pcard-buy .btn-add { flex: 1; min-width: 78px; }

/* ── 수량 조절 (한 손 조작) */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); overflow: hidden; }
.step {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); transition: background-color .14s var(--ease);
}
.step:hover { background: var(--line-soft); }
.step[disabled] { color: var(--line); cursor: not-allowed; }
.step-val { min-width: 38px; text-align: center; font-size: 15px; font-weight: 700; border-inline: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; justify-content: center; }

/* ── 빈 상태 */
.empty {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: var(--s8) var(--s3); background: var(--paper);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.empty .ico { color: var(--muted); margin-bottom: 6px; }
.empty-title { font-size: 19px; font-weight: 700; }
.empty-sub { font-size: 14px; color: var(--ink2); }
.empty .btn { margin-top: var(--s2); }

/* ── 영양 3열 */
.nutri-sec { background: var(--paper); border-block: 1px solid var(--line); }
.nutri-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.nutri-row li { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); text-align: center; }
.nutri-row .ico { color: var(--leaf); margin: 0 auto 12px; }
.nutri-row b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.nutri-row span { display: block; font-size: 14px; font-weight: 600; color: var(--ink2); margin-top: 2px; }
.nutri-row i { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ── 아코디언 */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 22px 4px; text-align: left; font-size: 17px; font-weight: 700; color: var(--ink); min-height: 60px;
}
.acc-trigger .ico { color: var(--muted); transition: transform .25s var(--ease); flex: none; }
.acc-item.open .acc-trigger { color: var(--chili); }
.acc-item.open .acc-trigger .ico { transform: rotate(180deg); color: var(--chili); }
.acc-panel { display: none; padding: 0 4px 24px; }
.acc-item.open .acc-panel { display: block; }
.acc-panel p { font-size: 15px; color: var(--ink2); line-height: 1.85; }

/* ── 알림 폼 */
.notify {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6);
}
.notify-copy .lead { margin-top: var(--s2); }
.field { display: grid; gap: 7px; margin-bottom: var(--s2); }
.field label, .cart-extra-label { font-size: 14px; font-weight: 700; }
.control {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--rice);
  font: inherit; font-size: 15px; color: var(--ink); transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.control::placeholder { color: #b4b4ab; }
.control:focus { background: var(--paper); border-color: var(--ink); outline-offset: 1px; }
textarea.control { resize: vertical; min-height: 92px; line-height: 1.7; }
.field.invalid .control { border-color: var(--chili); background: var(--chili-tint); }
.err { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--chili); }
.field-check { display: flex; align-items: flex-start; gap: 10px; margin-block: var(--s2); }
.field-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--chili); flex: none; }
.field-check label { font-size: 14px; font-weight: 500; color: var(--ink2); line-height: 1.6; }
.field-check.invalid label { color: var(--chili); }
.counter { font-size: 12px; color: var(--muted); text-align: right; }

/* ══════════════════════════════════════════════ 정기배송 */
.sub-head { background: linear-gradient(180deg, #f6f3ea 0%, var(--paper) 100%); }
.steps { display: flex; gap: 8px; margin-top: var(--s5); flex-wrap: wrap; }
.steps li {
  display: flex; align-items: center; gap: 10px; flex: 1 1 190px; min-width: 0;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper);
}
.steps li span {
  width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--paper);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.steps li i { font-style: normal; font-size: 12px; color: var(--muted); flex: none; }
.steps li b { font-size: 14px; font-weight: 700; margin-left: auto; text-align: right; }
.steps li.is-done { border-color: var(--chili); }
.steps li.is-done span { background: var(--chili); }
.steps li:not(.is-done) b { color: var(--muted); font-weight: 500; }

.sub-grid { display: grid; grid-template-columns: 1fr 348px; gap: var(--s6); align-items: start; }
.sub-block { padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.sub-block:last-of-type { border-bottom: 0; }
.sub-h { display: flex; align-items: center; gap: 12px; font-size: var(--h3); }
.sub-no {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.sub-note { font-size: 14px; color: var(--ink2); margin: 10px 0 var(--s2); }

.sub-table { border-top: 2px solid var(--ink); }
.sub-table caption { text-align: left; font-size: var(--h3); font-weight: 700; padding-bottom: var(--s2); }
.sub-table th, .sub-table td { padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 15px; text-align: left; }
.sub-table th { width: 34%; color: var(--ink2); font-weight: 600; }
.sub-table td { font-weight: 700; }

.sub-side { position: sticky; top: calc(var(--header-h) + 20px); }
.sub-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1); }
.sub-card-h { font-size: var(--h3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.sub-nums, .pay-nums { display: grid; gap: 12px; margin: var(--s3) 0; }
.sub-nums > div, .pay-nums > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.sub-nums dt, .pay-nums dt { font-size: 14px; color: var(--ink2); }
.sub-nums dd, .pay-nums dd { margin: 0; font-size: 15px; font-weight: 700; }
.sub-nums .is-cut dd, .pay-nums .is-cut dd { color: var(--chili); }
.sub-nums .is-total, .pay-nums .is-total { padding-top: 14px; border-top: 1px solid var(--line); }
.sub-nums .is-total dt, .pay-nums .is-total dt { font-size: 15px; font-weight: 700; color: var(--ink); }
.sub-nums .is-total dd, .pay-nums .is-total dd { font-size: 24px; font-weight: 800; color: var(--chili); }
.sub-hint { display: flex; gap: 7px; font-size: 13px; color: var(--ink2); margin-bottom: var(--s2); }
.sub-hint .ico { color: var(--leaf); flex: none; }
.sub-card .btn + .btn { margin-top: 8px; }

.benefit-sec { background: var(--paper); border-block: 1px solid var(--line); }
.benefit-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.benefit-row li { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.benefit-row .ico { color: var(--chili); margin-bottom: 14px; }
.benefit-row b { display: block; font-size: 17px; }
.benefit-row p { margin-top: 8px; font-size: 14px; color: var(--ink2); }

/* ── 타임라인 */
.timeline { position: relative; display: grid; gap: var(--s3); padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.timeline li { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s3) var(--s3) var(--s4); }
.tl-dot {
  position: absolute; left: -26px; top: 22px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--chili); color: #fff; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 3px solid var(--rice);
}
.timeline b { display: block; font-size: 17px; }
.timeline p { margin-top: 6px; font-size: 14px; color: var(--ink2); }
.timeline-alt .tl-dot { background: var(--leaf); }

.apply-sec { background: var(--paper); border-top: 1px solid var(--line); }
.apply-head { margin-bottom: var(--s4); }
.apply-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.field-wide { grid-column: 1 / -1; }
.apply-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }
.apply-sum { font-size: 15px; font-weight: 700; color: var(--leaf); }
.apply-after {
  display: flex; align-items: flex-start; gap: 8px; margin-top: var(--s3);
  background: var(--leaf-tint); border-radius: var(--r); padding: 14px 16px;
  font-size: 14px; color: var(--ink2);
}
.apply-after .ico { color: var(--leaf); flex: none; margin-top: 2px; }

/* ══════════════════════════════════════════════ 장바구니 */
.cart-grid { display: grid; grid-template-columns: 1fr 348px; gap: var(--s6); align-items: start; }
.cart-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.cart-tools-l { font-size: 15px; font-weight: 700; }
.cart-rows { display: grid; }
.crow {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 40px; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.crow-bot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.crow-photo { display: block; width: 92px; height: 92px; border-radius: var(--r); overflow: hidden; background: var(--tint); }
.crow-photo img { width: 100%; height: 100%; object-fit: cover; }
.crow-info { min-width: 0; }
.crow-cat { font-size: 12px; font-weight: 700; color: var(--leaf); }
.crow-name { font-size: 17px; font-weight: 700; margin-top: 2px; }
.crow-opt { font-size: 13px; color: var(--muted); margin-top: 4px; }
.crow-price { text-align: right; font-size: 17px; font-weight: 800; white-space: nowrap; }
.crow-price span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.crow-del {
  width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.crow-del:hover { background: var(--line-soft); color: var(--chili); }

.ship-gauge { display: grid; gap: 8px; margin-top: var(--s3); font-size: 14px; font-weight: 600; color: var(--ink2); }
.cart-extra { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.cart-extra-block { display: grid; gap: 8px; align-content: start; }
.cart-extra-row { display: flex; gap: 8px; }
.cart-extra-row select, .cart-extra-row input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  font: inherit; font-size: 14px; color: var(--ink);
}
.cart-extra-row input { text-align: right; }

.cart-side { position: sticky; top: calc(var(--header-h) + 20px); }
.pay-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1); }
.pay-h { font-size: var(--h3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.pay-earn { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); margin-bottom: var(--s2); }
.pay-earn .ico { color: var(--chili); }
.pay-card .btn + .btn { margin-top: 8px; }
.pay-note { margin-top: var(--s3); display: grid; gap: 6px; }
.pay-note li { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--muted); }
.pay-note .ico { color: var(--leaf); }

.order-done {
  background: var(--leaf-tint); border: 1px solid var(--leaf); border-radius: var(--r-lg);
  padding: var(--s4); text-align: center;
}
.order-done .ico { color: var(--leaf); margin: 0 auto 10px; }
.done-title { font-size: 19px; font-weight: 700; }
.done-sub { font-size: 14px; color: var(--ink2); margin-top: 8px; }
.done-fix { font-size: 13px; color: var(--ink2); margin-top: var(--s2); }
.done-act { display: grid; gap: 8px; margin-top: var(--s3); }

/* ══════════════════════════════════════════════ 브랜드 */
.brand-hero { background: linear-gradient(180deg, #f6f3ea 0%, var(--rice) 100%); padding-block: var(--s5) var(--s8); }
.brand-hero-in { display: grid; grid-template-columns: 1fr 340px; gap: var(--s7); align-items: center; }
.brand-hero h1 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.2; }
.brand-hero .lead { margin-top: var(--s3); max-width: 560px; }
.brand-hero .hero-actions { margin-top: var(--s4); }
.brand-hero-photo { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.brand-hero-photo img { width: 100%; height: auto; }

.story { display: grid; grid-template-columns: 320px 1fr; gap: var(--s6); align-items: center; }
.story + .story { margin-top: var(--s7); }
.story-alt { grid-template-columns: 1fr 320px; }
.story-alt .story-photo { order: 2; }
.story-photo { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--tint); aspect-ratio: 146 / 134; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-no { font-size: 13px; font-weight: 800; color: var(--chili); letter-spacing: .1em; }
.story-copy h3 { font-size: clamp(21px, 2.1vw, 28px); margin-top: 10px; }
.story-copy > p { margin-top: var(--s2); font-size: 15px; color: var(--ink2); line-height: 1.85; }
.story-pt { display: grid; gap: 8px; margin-top: var(--s3); }
.story-pt li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.story-pt .ico { color: var(--leaf); flex: none; }

.stat-sec { background: var(--ink); color: #fff; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); text-align: center; }
.stat-row b { display: block; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.04em; }
.stat-row span { display: block; font-size: 13px; color: rgb(255 255 255 / 0.66); margin-top: 6px; }

.award-sec { background: var(--paper); border-block: 1px solid var(--line); }
.award-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.award-row li { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); text-align: center; }
.award-ico {
  width: 62px; height: 62px; border-radius: 50%; background: var(--leaf-tint); color: var(--leaf);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.award-row b { display: block; font-size: 17px; }
.award-row span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.award-note { margin-top: var(--s3); font-size: 12px; color: var(--muted); text-align: center; }

.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  background: var(--chili); color: #fff; border-radius: var(--r-lg); padding: var(--s6);
}
.cta-band h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.35; }
.cta-band p { margin-top: 12px; font-size: 15px; color: rgb(255 255 255 / 0.86); }
.cta-act { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-act .btn-primary { --bg: #fff; --fg: var(--chili); --bd: #fff; }
.cta-act .btn-primary:hover { --bg: #f6ecea; --bd: #f6ecea; }

/* ══════════════════════════════════════════════ 푸터 */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); padding-top: var(--s7); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s5); padding-bottom: var(--s6); }
.foot-brand p { margin-top: 14px; font-size: 14px; color: var(--ink2); line-height: 1.7; }
.foot-sns { display: flex; gap: 8px; margin-top: var(--s3); }
.foot-sns a {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink2);
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .16s var(--ease), color .16s var(--ease);
}
.foot-sns a:hover { border-color: var(--chili); color: var(--chili); }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-h { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.foot-col a { font-size: 14px; color: var(--ink2); }
.foot-col a:hover { color: var(--chili); }
.foot-tel { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--chili) !important; }
.foot-hours { font-size: 13px; color: var(--muted); line-height: 1.7; }
.foot-cs .btn { margin-top: 6px; align-self: flex-start; }
.foot-legal { border-top: 1px solid var(--line); padding-block: var(--s3) var(--s5); }
.foot-legal p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.foot-copy { margin-top: 8px !important; }

/* ══════════════════════════════════════════════ 반응형 */
@media (max-width: 1180px) {
  :root { --gutter: 24px; --section: 88px; }
  .sub-grid, .cart-grid { grid-template-columns: 1fr 300px; gap: var(--s5); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .hero-photo { width: 46%; }
}

/* ── 태블릿: 2열 축소 + 보조 패널을 아래로 */
@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .navlinks, .nav-tel { display: none; }
  .menu-btn { display: inline-flex; }
  .tabbar { display: flex; }
  .brand small { display: none; }

  .hero-in { padding-block: var(--s5) var(--s6); }
  .hero-photo { position: relative; width: auto; height: clamp(240px, 42vw, 360px); }
  .hero-photo::before { display: none; }
  .hero { display: flex; flex-direction: column-reverse; }
  .hero-copy { max-width: none; }

  .livecart { grid-template-columns: 1fr; gap: var(--s3); }
  .livecart-nums { justify-content: space-between; gap: var(--s3); }
  .livecart-act { grid-auto-flow: column; }

  .promise-row { grid-template-columns: repeat(2, 1fr); gap: var(--s4) 0; }
  .promise-row li:nth-child(odd) { border-left: 0; }
  .split { grid-template-columns: 1fr; gap: var(--s5); }
  .coupon { grid-template-columns: 1fr; padding-left: 0; }
  .coupon-copy { padding: var(--s5) var(--s4) 0; }
  .coupon-photo { height: 200px; }
  .info-row { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); }

  .page-head-in { flex-direction: column-reverse; align-items: stretch; gap: var(--s3); }
  .page-head-photo, .page-head-photo.photo-sub { width: 100%; max-height: 200px; }
  .page-head-photo img { height: 200px; object-fit: cover; }

  .sub-grid, .cart-grid { grid-template-columns: 1fr; }
  .sub-side, .cart-side { position: static; }
  .notify { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4); }
  .benefit-row, .nutri-row, .award-row { grid-template-columns: 1fr; }
  .brand-hero-in { grid-template-columns: 1fr; gap: var(--s4); }
  .brand-hero-photo { max-width: 420px; }
  .story, .story-alt { grid-template-columns: 1fr; gap: var(--s3); }
  .story-alt .story-photo { order: 0; }
  .story-photo { max-width: 420px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s3); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
}

/* ── 모바일: PC 축소판이 아니라 다시 짠 우선순위 */
@media (max-width: 720px) {
  :root { --gutter: 18px; --section: 64px; }
  body { padding-bottom: 84px; }

  .pgrid { grid-template-columns: 1fr; }
  .pcard { grid-template-columns: 108px 1fr; gap: var(--s2); }
  .pcard-desc, .pcard-al { display: none; }
  .pcard-name { font-size: 16px; }
  .pcard-buy { gap: 8px; }
  .pcard-price { width: 100%; font-size: 18px; }

  .rail-btn { display: none; }
  .dish { width: 148px; }
  .dish-photo { width: 128px; height: 128px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .sec-head.center { align-items: center; }

  .livecart { padding: var(--s3); }
  .livecart-nums { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .livecart-nums dd { font-size: 18px; }
  .livecart-nums .is-total dd { font-size: 21px; }
  .livecart-act { grid-auto-flow: row; }

  .promise-row li { padding: var(--s2) 8px; }
  .split-figs { grid-template-columns: 1fr; gap: var(--s3); }
  .split-figs .frame { aspect-ratio: 16 / 10; }
  .info-row li { grid-template-columns: 1fr; gap: 2px; text-align: left; }
  .info-row .ico { grid-row: auto; margin-bottom: 4px; }

  /* 필터는 화면을 덜 먹게 */
  .filters { position: static; }
  .chip { min-height: 44px; padding: 0 14px; font-size: 14px; }
  .chip-day { min-width: 56px; }

  /* 장바구니 줄: 한 손으로 조작하도록 2단으로 재배치 */
  .crow { grid-template-columns: 76px minmax(0, 1fr) 44px; grid-template-areas: "photo info del" "bot bot bot"; gap: 12px var(--s2); }
  .crow-photo { grid-area: photo; width: 76px; height: 76px; }
  .crow-info { grid-area: info; }
  .crow-bot { grid-area: bot; justify-content: space-between; gap: var(--s2); }
  .crow-price { text-align: right; font-size: 16px; }
  .crow-del { grid-area: del; justify-self: end; align-self: start; }
  .cart-extra { grid-template-columns: 1fr; gap: var(--s3); }

  .apply-form { grid-template-columns: 1fr; }
  .steps li { flex: 1 1 100%; }
  .stat-row { gap: var(--s4) var(--s2); }
  .cta-band { padding: var(--s4); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .foot-cs .btn { align-self: stretch; }

  .cartbar-in { gap: 8px 10px; min-height: 72px; flex-wrap: wrap; }
  .cartbar .btn { order: 3; margin-left: auto; }
  .cartbar-free { order: 4; flex-basis: 100%; }
  .toast { bottom: 88px; left: 16px; right: 16px; transform: translateY(12px); max-width: none; }
  .toast.show { transform: translateY(0); }
  .to-top { display: none; }
}

@media (max-width: 480px) {
  .cartbar-num .cartbar-pay { font-size: 16px; }
  .cartbar-in .btn { padding: 0 14px; font-size: 14px; }
  .cartbar-msg { font-size: 12px; }
  .dish { width: 136px; }
  .dish-photo { width: 118px; height: 118px; }
  .brand-name { font-size: 22px; }
}

/* ── 터치 영역 44px 확보 (기능 명세 §6) */
@media (max-width: 980px) {
  button, .btn, a[role="button"], .menu-btn, .step, .crow-del, .rail-btn, .chip, .toast-act, .to-top, .drawer-close {
    min-height: 44px;
  }
  .step { width: 46px; }
  .crow-del { width: 44px; }
  .foot-sns a { width: 44px; height: 44px; }
}

/* ── 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── 인쇄 */
@media print {
  .site-header, .cartbar, .drawer, .scrim, .toast, .to-top { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
}