/* ============================================================
   FNB-SHOP-003 · 오늘의식탁 · NAT 내추럴·오가닉
   밀키트 쇼핑몰 6p
   ============================================================ */

:root {
  --brand:       #416b34;
  --brand-ink:   #ffffff;
  --accent:      #c46a3a;
  --accent-ink:  #ffffff;
  --surface:     #fbf9f4;
  --surface-alt: #f1ebdf;
  --font-display: var(--font-sans);
  --r: var(--r-lg);
}

body { background: var(--surface); }

.u-edge { padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); }

/* ── 공통 타입 ─────────────────────────────────────────────── */

.kicker, .label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand);
}
.label { color: color-mix(in oklab, var(--ink-3) 78%, var(--brand)); }

.h2 { font-size: var(--fs-3xl); letter-spacing: var(--ls-tighter); line-height: 1.1; }
.h3 { font-size: var(--fs-xl); letter-spacing: var(--ls-tight); line-height: 1.28; }

.body-lg { font-size: var(--fs-md); color: var(--ink-2); max-width: 46ch; line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-loose); }

.tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--brand) 12%, var(--surface));
  color: var(--brand);
}
.tag--accent { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); color: color-mix(in oklab, var(--accent) 82%, black); }
.tag--soldout { background: var(--surface-alt); color: var(--ink-3); }

/* ── 버튼 ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); }
.btn--lg { padding: var(--sp-5) var(--sp-7); font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn--solid { background: var(--brand); color: var(--brand-ink); }
.btn--solid:hover { background: color-mix(in oklab, var(--brand) 84%, black); }

.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: color-mix(in oklab, var(--accent) 84%, black); }

.btn--line { border-color: color-mix(in oklab, var(--brand) 34%, transparent); color: var(--brand); background: transparent; }
.btn--line:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.btn--soft { background: var(--surface-alt); color: var(--ink); }
.btn--soft:hover { background: color-mix(in oklab, var(--surface-alt) 80%, var(--brand)); }

/* 브랜드 컬러 배경 위에 놓이는 라인 버튼 */
.btn--onbrand { border-color: color-mix(in oklab, var(--brand-ink) 52%, transparent); color: var(--brand-ink); }
.btn--onbrand:hover { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); }

/* ── 헤더 ──────────────────────────────────────────────────── */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--surface) 93%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
}

.noticebar {
  background: var(--brand);
  color: color-mix(in oklab, var(--brand-ink) 88%, transparent);
  font-size: var(--fs-xs);
  text-align: center;
  padding-block: var(--sp-2);
  letter-spacing: var(--ls-base);
}
.noticebar b { color: var(--brand-ink); }

.head__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-3); }

.logo { display: inline-flex; align-items: center; gap: var(--sp-3); }
.logo__mark {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-full);
  background:
    radial-gradient(circle at 34% 32%, color-mix(in oklab, var(--brand) 40%, white), transparent 58%),
    var(--brand);
}
.logo b { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }

.gnb { display: none; gap: var(--sp-6); }
.gnb a { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); transition: color var(--dur) var(--ease); }
.gnb a:hover { color: var(--brand); }
.gnb a[aria-current="page"] { color: var(--brand); font-weight: var(--fw-bold); }

.head__util { display: flex; align-items: center; gap: var(--sp-3); }
.cartlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in oklab, var(--brand) 24%, transparent);
  border-radius: var(--r-full);
  color: var(--brand);
}
.cartlink span {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding-inline: 5px;
  border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-xs);
}

.drawer { position: relative; }
.drawer > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  border: 1px solid color-mix(in oklab, var(--brand) 24%, transparent);
  border-radius: var(--r-full);
  cursor: pointer;
  color: var(--ink);
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer__panel {
  position: absolute; top: calc(100% + var(--sp-3)); right: 0;
  width: min(76vw, 300px);
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: var(--sp-4);
  display: grid; gap: var(--sp-2);
}
.drawer__panel a { padding: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--r-sm); }
.drawer__panel a:hover { background: var(--surface-alt); }
.drawer__panel a[aria-current="page"] { color: var(--brand); font-weight: var(--fw-bold); }

@media (min-width: 1024px) {
  .gnb { display: flex; }
  .drawer { display: none; }
  .head__bar { padding-block: var(--sp-4); }
}

/* ── 히어로 ────────────────────────────────────────────────── */
/* 이미지가 왼쪽 절반을 뷰포트 끝까지 채우고, 오른쪽에 문구가 선다.
   모바일에서는 이미지가 위, 텍스트 카드가 이미지 위로 겹쳐 올라온다. */

.hero { position: relative; display: grid; min-height: 100svh; }

/* 사진 행이 56svh 면 375·768 에서 히어로 CTA 가 첫 화면 밖으로 21~34px 밀려난다
   (실측). 사진 면적은 여전히 첫 화면의 절반이라 8절 1번에는 여유가 크다. */
.hero__media { position: relative; min-height: 50svh; }
.hero__media .img-slot { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }

.hero__badge {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: var(--sp-8);
  display: grid; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-lg);
  text-align: right;
}
.hero__badge b { font-size: var(--fs-lg); color: var(--brand); letter-spacing: var(--ls-tight); }
.hero__badge span { font-size: var(--fs-xs); color: var(--ink-2); }

.hero__body {
  position: relative;
  z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-5);
  padding-inline: var(--gutter);
  padding-block: var(--sp-7) var(--sp-8);
  margin-top: calc(var(--sp-7) * -1);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface);
}

.hero__title {
  font-size: var(--fs-4xl);
  line-height: 1.04;
  letter-spacing: var(--ls-tighter);
}
.hero__title em { font-style: normal; color: var(--brand); }

.hero__lead { font-size: var(--fs-md); color: var(--ink-2); max-width: 34ch; line-height: var(--lh-loose); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.hero__trust li { position: relative; padding-left: var(--sp-4); }
.hero__trust li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: var(--r-full); background: var(--brand);
}

@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); }
  .hero__media { min-height: 100svh; }
  .hero__body {
    margin-top: 0;
    border-radius: 0;
    padding-block: var(--sp-10) var(--sp-8);
    padding-left: var(--sp-8);
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  }
  .hero__badge { right: auto; left: var(--sp-7); bottom: var(--sp-9); text-align: left; }
}

/* ── 지표 ──────────────────────────────────────────────────── */

.figures { border-block: 1px solid color-mix(in oklab, var(--brand) 16%, transparent); background: var(--surface-alt); }
.figures__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.figure { padding: var(--sp-6) var(--sp-5); }
.figure:nth-child(odd) { border-right: 1px solid color-mix(in oklab, var(--brand) 14%, transparent); }
.figure:nth-child(-n+2) { border-bottom: 1px solid color-mix(in oklab, var(--brand) 14%, transparent); }
.figure dt { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: var(--ls-wide); margin-bottom: var(--sp-3); }
.figure dd { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1; color: var(--brand); }
.figure dd span { font-size: var(--fs-sm); color: var(--ink-3); margin-left: 3px; font-weight: var(--fw-medium); }

@media (min-width: 768px) {
  .figures__grid { grid-template-columns: repeat(4, 1fr); }
  .figure:nth-child(-n+2) { border-bottom: 0; }
  .figure { border-right: 1px solid color-mix(in oklab, var(--brand) 14%, transparent); }
  .figure:last-child { border-right: 0; }
}

/* ── 티커 ──────────────────────────────────────────────────── */

.ticker { overflow: hidden; background: var(--brand); color: var(--brand-ink); padding-block: var(--sp-3); }
.ticker__track { display: flex; align-items: center; gap: var(--sp-5); width: max-content; animation: tableTicker 40s linear infinite; }
.ticker__track span { font-size: var(--fs-sm); white-space: nowrap; color: color-mix(in oklab, var(--brand-ink) 92%, transparent); }
.ticker__track i { width: 4px; height: 4px; border-radius: var(--r-full); background: color-mix(in oklab, var(--brand-ink) 55%, transparent); flex: none; }
@keyframes tableTicker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ── 섹션 헤더 ─────────────────────────────────────────────── */

.sec-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.sec-head--row { align-items: end; }
@media (min-width: 768px) {
  .sec-head--row { grid-template-columns: 1fr auto; }
}

.split { display: grid; gap: var(--sp-7); }
.split__aside { display: grid; gap: var(--sp-4); align-content: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--sp-9); }
  .split__aside { position: sticky; top: var(--sp-9); }
}

/* ── 상품 카드 ─────────────────────────────────────────────── */

.products { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .products { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.product { display: grid; gap: var(--sp-4); align-content: start; }
.product__media { border-radius: var(--r-lg); position: relative; }
.product__media > img { transition: transform var(--dur-slow) var(--ease-out); }
.product:hover .product__media > img { transform: scale(1.05); }
.product__flag {
  position: absolute; z-index: 3; left: var(--sp-4); top: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}
.product__cat { font-size: var(--fs-xs); color: var(--brand); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }
.product__name { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); margin-top: var(--sp-2); }
.product__desc { font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--sp-2); line-height: var(--lh-loose); }
.product__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
}
.product__price { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.product__price s { font-size: var(--fs-sm); color: var(--ink-4); font-weight: var(--fw-normal); margin-right: var(--sp-2); }
.product__meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* ── 필터 바 (스티키) ──────────────────────────────────────── */

.filterbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding-block: var(--sp-4);
  margin-bottom: var(--sp-6);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
}
.chip {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.filterbar__count { margin-left: auto; align-self: center; font-size: var(--fs-xs); color: var(--ink-3); }

/* ── 조리 단계 ─────────────────────────────────────────────── */

.steps { display: grid; gap: var(--sp-6); }
.step {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface-alt);
  border-radius: var(--r-lg);
}
.step__num {
  font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  line-height: .9; letter-spacing: var(--ls-tighter);
  color: color-mix(in oklab, var(--brand) 34%, var(--surface-alt));
}
.step__title { font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.step p { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-loose); }
.step__time { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent); letter-spacing: var(--ls-wide); }

@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ── 헤어라인 그리드 ───────────────────────────────────────── */

.grid-hair {
  display: grid;
  gap: 1px;
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 16%, transparent);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.grid-hair > * { background: var(--surface); padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.grid-hair h3 { font-size: var(--fs-md); letter-spacing: var(--ls-tight); }
.grid-hair p { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-loose); }
.grid-hair .idx { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }

@media (min-width: 768px) { .grid-hair { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-hair { grid-template-columns: repeat(3, 1fr); } }

/* ── 산지 이야기 (풀블리드 + 겹침 카드) ────────────────────── */

.origin { position: relative; padding-bottom: var(--section-y); }
.origin__media { border-radius: 0; aspect-ratio: 4 / 5; }
.origin__card {
  position: relative;
  margin-top: calc(var(--sp-8) * -1);
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  display: grid; gap: var(--sp-4);
}
.origin__list { display: grid; gap: var(--sp-4); }
.origin__list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-loose);
}
.origin__list b { color: var(--brand); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); padding-top: 3px; min-width: 4.5em; }

@media (min-width: 768px) {
  .origin__media { aspect-ratio: 21 / 9; }
  .origin__card { margin-top: calc(var(--sp-10) * -1); max-width: 620px; padding: var(--sp-8); }
}

/* ── 인용 ──────────────────────────────────────────────────── */

.quote-band { background: var(--surface-alt); padding-block: var(--section-y); }
.quote-band blockquote { display: grid; gap: var(--sp-5); }
.quote-band p { font-size: var(--fs-xl); line-height: 1.5; letter-spacing: var(--ls-tight); font-weight: var(--fw-medium); }
.quote-band footer { font-size: var(--fs-sm); color: var(--ink-3); }
.quote-band footer b { color: var(--ink); }
@media (min-width: 1024px) { .quote-band p { font-size: var(--fs-2xl); max-width: 24ch; } }

/* ── 페이지 헤더 ───────────────────────────────────────────── */

.pagehead { padding-top: calc(var(--sp-9) + var(--sp-5)); padding-bottom: var(--sp-7); background: var(--surface-alt); }
.pagehead__inner { display: grid; gap: var(--sp-4); }
.pagehead h1 { font-size: var(--fs-3xl); letter-spacing: var(--ls-tighter); }
.pagehead p { font-size: var(--fs-md); color: var(--ink-2); max-width: 48ch; line-height: var(--lh-loose); }
.crumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: var(--ls-wide); }
.crumb a:hover { color: var(--brand); }
@media (min-width: 1024px) {
  .pagehead { padding-top: calc(var(--sp-10) + var(--sp-4)); padding-bottom: var(--sp-8); }
  .pagehead h1 { font-size: var(--fs-4xl); }
}

/* ── 상품 상세 ─────────────────────────────────────────────── */

.detail { display: grid; gap: var(--sp-7); }
.detail__gallery { display: grid; gap: var(--sp-3); }
.detail__main { border-radius: var(--r-xl); }
.detail__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.detail__thumbs .img-slot { border-radius: var(--r); }

.detail__buy { display: grid; gap: var(--sp-5); align-content: start; }
.detail__name { font-size: var(--fs-2xl); letter-spacing: var(--ls-tighter); line-height: 1.15; }
.detail__price { display: flex; align-items: baseline; gap: var(--sp-3); }
.detail__price b { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
.detail__price s { color: var(--ink-4); font-size: var(--fs-md); }
.detail__price em { font-style: normal; color: var(--accent); font-weight: var(--fw-bold); font-size: var(--fs-md); }

.spec { display: grid; gap: 0; border-top: 1px solid color-mix(in oklab, var(--brand) 16%, transparent); }
.spec > div {
  display: grid; grid-template-columns: 7rem 1fr; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 12%, transparent);
  font-size: var(--fs-sm);
}
.spec dt { color: var(--ink-3); }
.spec dd { color: var(--ink-2); line-height: var(--lh-loose); }

.qty { display: flex; align-items: center; gap: var(--sp-3); }
.qty button {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in oklab, var(--brand) 26%, transparent);
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--brand);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease);
}
.qty button:hover { background: color-mix(in oklab, var(--brand) 10%, transparent); }
.qty output { min-width: 3rem; text-align: center; font-size: var(--fs-md); font-weight: var(--fw-bold); }

.buybox {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface-alt);
  border-radius: var(--r-lg);
}
.buybox__total { display: flex; align-items: baseline; justify-content: space-between; }
.buybox__total span { font-size: var(--fs-sm); color: var(--ink-2); }
.buybox__total b { font-size: var(--fs-xl); color: var(--brand); letter-spacing: var(--ls-tight); }
.buybox__actions { display: grid; gap: var(--sp-3); }

@media (min-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--sp-8); align-items: start; }
  .detail__buy { position: sticky; top: var(--sp-9); }
  .buybox__actions { grid-template-columns: 1fr 1fr; }
  .buybox__actions .btn--block:first-child { grid-column: 1 / -1; }
}

/* ── 장바구니 ──────────────────────────────────────────────── */

.cart { display: grid; gap: var(--sp-7); }
.cartlist { display: grid; gap: 0; border-top: 2px solid var(--brand); }
.cartrow {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
  align-items: start;
}
.cartrow .img-slot { border-radius: var(--r); }
.cartrow__body { display: grid; gap: var(--sp-3); }
.cartrow__name { font-size: var(--fs-md); letter-spacing: var(--ls-tight); }
.cartrow__opt { font-size: var(--fs-xs); color: var(--ink-3); }
.cartrow__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cartrow__price { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.cartrow__del { font-size: var(--fs-xs); color: var(--ink-3); text-decoration: underline; }
.cartrow__del:hover { color: var(--accent); }

.summary {
  display: grid; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface-alt);
  border-radius: var(--r-lg);
  align-content: start;
}
.summary dl { display: grid; gap: var(--sp-3); }
.summary dl > div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.summary dt { color: var(--ink-2); }
.summary dd { font-weight: var(--fw-semibold); }
.summary__total {
  padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  display: flex; justify-content: space-between; align-items: baseline;
}
.summary__total span { font-size: var(--fs-sm); }
.summary__total b { font-size: var(--fs-xl); color: var(--brand); letter-spacing: var(--ls-tight); }
.summary__note { font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-loose); }

@media (min-width: 1024px) {
  .cart { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--sp-8); align-items: start; }
  .summary { position: sticky; top: var(--sp-9); }
  .cartrow { grid-template-columns: 120px 1fr; }
}

/* ── FAQ / 아코디언 ────────────────────────────────────────── */

.qa { border-bottom: 1px solid color-mix(in oklab, var(--brand) 14%, transparent); }
.qa:first-of-type { border-top: 1px solid color-mix(in oklab, var(--brand) 14%, transparent); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-block: var(--sp-5);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--brand); }
.qa summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat;
  transition: transform var(--dur) var(--ease);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-2); max-width: 66ch; line-height: var(--lh-loose); }

/* ── CTA ───────────────────────────────────────────────────── */

.cta-band {
  background: var(--brand);
  color: var(--brand-ink);
  padding-block: var(--section-y);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.cta-band__inner { display: grid; gap: var(--sp-5); justify-items: start; }
.cta-band .label { color: color-mix(in oklab, var(--brand-ink) 62%, transparent); }
.cta-band h2 { font-size: var(--fs-3xl); letter-spacing: var(--ls-tighter); line-height: 1.1; }
.cta-band p { font-size: var(--fs-md); color: color-mix(in oklab, var(--brand-ink) 80%, transparent); max-width: 44ch; line-height: var(--lh-loose); }
.cta-band .btn--accent:hover { background: var(--brand-ink); color: var(--brand); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
@media (min-width: 1024px) { .cta-band h2 { font-size: var(--fs-4xl); } }

/* ── 푸터 ──────────────────────────────────────────────────── */

.foot { background: var(--surface-alt); padding-block: var(--sp-8) var(--sp-6); }
.foot__inner { display: grid; gap: var(--sp-6); }
.foot__brand b { display: block; font-size: var(--fs-lg); color: var(--brand); margin-bottom: var(--sp-3); }
.foot__brand p { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-loose); }
.foot__nav { display: grid; gap: var(--sp-3); align-content: start; }
.foot__nav b { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: var(--ls-wide); }
.foot__nav a { font-size: var(--fs-sm); color: var(--ink-2); }
.foot__nav a:hover { color: var(--brand); }
.foot__legal {
  grid-column: 1 / -1;
  padding-top: var(--sp-5);
  border-top: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-loose);
}
.foot__legal strong { color: var(--ink-2); font-weight: var(--fw-semibold); }
@media (min-width: 768px) { .foot__inner { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--sp-7); } }

/* ── 유틸 ──────────────────────────────────────────────────── */

.stack { display: grid; gap: var(--sp-5); }
.stack--lg { display: grid; gap: var(--sp-7); }
.mt-7 { margin-top: var(--sp-7); }
.notice {
  font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-loose);
  padding: var(--sp-5);
  background: var(--surface-alt);
  border-radius: var(--r);
}
.is-hidden { display: none !important; }
.link-u { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   브랜드 마크 · 아이콘 · 인터랙션 보강  ★SPEC 4-C
   레이아웃·색·타이포는 건드리지 않는다. 여기서는 더하기만 한다.
   ============================================================ */

.ico { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* ── 브랜드 마크 — 밀키트 상자에서 돋는 새싹 ─────────────────
   CSS 원형 점을 걷어내고 인라인 SVG 로 교체한다. 크기는 그대로 26px. */
.mark { flex: none; color: var(--brand); }
.logo__mark { width: 26px; height: 26px; background: none; border-radius: 0; }

.mark__leaf { transition: transform var(--dur-slow) var(--ease-out); transform-origin: 16px 16px; }
.mark__leaf--l { transition-delay: 80ms; }
.mark__stem { transition: transform var(--dur) var(--ease-out); transform-origin: 16px 17px; }
.mark__box  { transition: transform var(--dur) var(--ease-out); }
.logo:hover .mark__leaf--r { transform: rotate(9deg); }
.logo:hover .mark__leaf--l { transform: rotate(-9deg); }
.logo:hover .mark__stem { transform: scaleY(1.12); }
.logo b { transition: color var(--dur) var(--ease); }
.logo:hover b { color: var(--brand); }

.foot__brand b { display: inline-flex; align-items: center; gap: var(--sp-3); }
.foot__brand b .mark { transition: transform var(--dur-slow) var(--ease-out); }
.foot__brand:hover b .mark { transform: translateY(-2px); }

/* ── 아이콘이 붙는 자리 ─────────────────────────────────────── */

.noticebar { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.noticebar .ico { font-size: var(--fs-base); }

.hero__trust li { display: inline-flex; align-items: center; gap: var(--sp-2); padding-left: 0; }
.hero__trust li::before { display: none; }
.hero__trust .ico { font-size: var(--fs-base); color: var(--brand); }

.origin__list b { display: inline-flex; align-items: center; gap: var(--sp-2); }
.origin__list b .ico { font-size: var(--fs-md); }

.step__time { display: inline-flex; align-items: center; gap: var(--sp-2); }
.step__time .ico { font-size: var(--fs-base); }

.foot__contact { display: grid; gap: var(--sp-3); }
.foot__contact span { display: flex; align-items: flex-start; gap: var(--sp-3); }
.foot__contact .ico { font-size: var(--fs-md); color: var(--brand); margin-top: .15em; }

/* 14px 버튼에서 1em 화살표는 뭉개진다 */
.btn__arrow {
  font-size: 1.25em;
  margin-left: 1px;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ── 장바구니 링크 ─────────────────────────────────────────── */

.cartlink { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.cartlink:hover { background: color-mix(in oklab, var(--brand) 10%, transparent); border-color: var(--brand); }
.cartlink span { transition: transform var(--dur) var(--ease-out); }
.cartlink:hover span { transform: scale(1.14); }

/* ── 내비: 밑줄이 한쪽에서 그어진다 ────────────────────────── */

.gnb a { position: relative; padding-block: 2px; }
.gnb a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--brand); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.gnb a:hover::after, .gnb a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ── 지표 ──────────────────────────────────────────────────── */

.figure { transition: background var(--dur) var(--ease); }
.figure:hover { background: color-mix(in oklab, var(--brand) 7%, var(--surface-alt)); }
.figure dd { transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.figure:hover dd { transform: translateY(-2px); color: var(--accent); }

/* ── 티커: 올리면 멈춘다 ───────────────────────────────────── */

.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span { transition: color var(--dur) var(--ease); }
.ticker:hover .ticker__track span { color: var(--brand-ink); }

/* ── 상품 카드: 들어올려지고 사진이 당겨진다 ───────────────── */

.product { transition: transform var(--dur) var(--ease-out); }
.product:hover { transform: translateY(-6px); }
.product__media { overflow: hidden; }
.product__name { transition: color var(--dur) var(--ease); }
.product:hover .product__name { color: var(--brand); }
.product__foot { transition: border-color var(--dur) var(--ease); }
.product:hover .product__foot { border-top-color: var(--accent); }
.product__flag { transition: transform var(--dur) var(--ease-out); }
.product:hover .product__flag { transform: translateY(-2px) rotate(-3deg); }

/* ── 조리 단계: 상단 선이 차오른다 ─────────────────────────── */

.step { position: relative; overflow: hidden; transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease); }
.step::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.step:hover { transform: translateY(-4px); }
.step:hover::before { width: 100%; }
.step__num { transition: color var(--dur) var(--ease); }
.step:hover .step__num { color: var(--brand); }

/* ── 헤어라인 그리드 ───────────────────────────────────────── */

.grid-hair > * { transition: background var(--dur) var(--ease); }
.grid-hair > *:hover { background: var(--surface-alt); }
.grid-hair h3 { transition: color var(--dur) var(--ease); }
.grid-hair > *:hover h3 { color: var(--brand); }
.grid-hair .idx { transition: letter-spacing var(--dur) var(--ease); }
.grid-hair > *:hover .idx { letter-spacing: var(--ls-widest); }

/* ── 산지 공정 · 상세 · 장바구니 ───────────────────────────── */

.origin__list li { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.origin__list li:hover { border-top-color: var(--brand); transform: translateX(3px); }
.detail__thumbs .img-slot { overflow: hidden; transition: transform var(--dur) var(--ease-out); }
.detail__thumbs .img-slot:hover { transform: translateY(-3px); }
.spec > div { transition: background var(--dur) var(--ease); }
.spec > div:hover { background: color-mix(in oklab, var(--brand) 5%, transparent); }
.cartrow { transition: background var(--dur) var(--ease); }
.cartrow:hover { background: color-mix(in oklab, var(--brand) 4%, transparent); }
.qty button { transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.qty button:active { transform: scale(.92); }
.chip { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.chip:active { transform: translateY(1px); }
.qa summary { transition: color var(--dur) var(--ease); }

/* ── 푸터 링크: 밑줄이 한쪽에서 그어진다 ────────────────────── */

.foot__nav a { position: relative; transition: color var(--dur) var(--ease); }
.foot__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.foot__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── 열림·등장 모션 ────────────────────────────────────────── */

@keyframes tableQaOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.qa[open] p { animation: tableQaOpen var(--dur) var(--ease-out) both; }

@keyframes tableDrawer {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.drawer[open] .drawer__panel { animation: tableDrawer var(--dur) var(--ease-out) both; }

/* 히어로 배지가 아주 천천히 떠 있다 */
@keyframes tableFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hero__badge { animation: tableFloat 6.5s var(--ease) infinite; }

/* ── 스크롤 등장에 계단식 지연 ─────────────────────────────── */

html.js .figures__grid .reveal:nth-child(2) { transition-delay: 60ms; }
html.js .figures__grid .reveal:nth-child(3) { transition-delay: 120ms; }
html.js .figures__grid .reveal:nth-child(4) { transition-delay: 180ms; }
html.js .products .reveal:nth-child(2) { transition-delay: 90ms; }
html.js .products .reveal:nth-child(3) { transition-delay: 180ms; }
html.js .steps .reveal:nth-child(2) { transition-delay: 90ms; }
html.js .steps .reveal:nth-child(3) { transition-delay: 180ms; }
html.js .grid-hair .reveal:nth-child(2) { transition-delay: 60ms; }
html.js .grid-hair .reveal:nth-child(3) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transition-delay: 0s !important; }
  .mark__leaf--l { transition-delay: 0s; }
  .hero__badge { animation: none; }
  .mark__leaf, .mark__stem, .mark__box, .foot__brand b .mark,
  .figure:hover dd, .product:hover, .product:hover .product__flag,
  .step:hover, .origin__list li:hover, .detail__thumbs .img-slot:hover,
  .cartlink:hover span, .btn:hover .btn__arrow { transform: none; }
}


/* ===== 획일성 제거 — NAT 무드 어휘 =====================================
   160작품이 레퍼런스의 밑줄 draw·카드 리프트·대문자 킥커를 그대로 복사해
   같은 사이트 리스킨으로 보였다. 반응 방식을 무드에 맞게 갈아끼운다.
   ==================================================================== */
/* 세로 카덴스를 작품마다 다르게 — 전부 같은 --section-y 를 쓰는 게 구조적 tell 이었다 */
:root { --section-y: clamp(4.39rem, 2.7299rem + 7.1215vw, 8.78rem); }

/* 내추럴 — 밑줄 대신 좌측에 작은 씨앗 하나가 돋는다. */
.gnb a::after, .foot__nav a::after { display: none !important; }
.foot__nav a, .gnb a { position: relative; }
.foot__nav a::before, .gnb a::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 60% 40% 55% 45%;
  background: currentColor;
  transform: translateY(-50%) scale(0);
  transition: transform var(--dur) var(--ease-out);
}
.foot__nav a:hover::before, .gnb a:hover::before { transform: translateY(-50%) scale(1); }
.foot__brand:hover b .mark, .figure:hover dd, .product:hover, .product:hover .product__flag, .step:hover, .detail__thumbs .img-slot:hover { transform: none; }
.foot__brand:hover b .mark, .figure:hover dd, .product:hover, .product:hover .product__flag, .step:hover, .detail__thumbs .img-slot:hover { box-shadow: 0 12px 30px color-mix(in oklab, var(--ink) 10%, transparent); }


/* ===== 티커 걷어내기 — NAT 무드에 마퀴는 어울리지 않는다 ==========
   내용(실적·목록·인증)은 실제 정보라 유지하고 장치만 바꾼다.
   ================================================================ */
/* 티커 → 감싸지는 태그 무리. 흙빛 배경에 얕게 얹는다. */
.ticker { overflow: visible; }
.ticker__track { animation: none !important; width: auto; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.ticker__track > span {
  padding: var(--sp-2) var(--sp-4);
  background: color-mix(in oklab, var(--brand) 9%, transparent);
  border-radius: var(--r);
}
.ticker__track > i { display: none; }

/* webit-touch */
@media (max-width: 767px) {
  .nav__inner { flex-wrap: wrap; overflow: visible; }
  .hero__actions, .hero__acts { flex-wrap: wrap; }
}
html.tier-premium .hero__lead { max-width: 38ch; }
html.tier-premium .section h2 { font-weight: 500; }