/* 바로온 손님 화면 — 랜딩 v2 문법을 그대로 잇는다.
   ① 한 지면 = 한 색면 = 한 메시지 (베이지 ↔ 녹색 ↔ 칠판 ↔ 주황 ↔ 진녹)
   ② 주황은 «획»이다 — 밑줄 · 막대 · 점. 주황 면에 흰 글자 금지(2.6:1), 녹색 위 주황 글자 금지(2.5:1)
   ③ 장보기 지면만은 «도구»다 — 꾸밈을 걷고 사진과 값이 앞에 선다 */
:root {
  --beige: #F2EAD9; --paper: #FBF7EF; --paper2: #EDE0C8;
  --green: #0F6B3A; --green-d: #0A4A28; --deep: #0B2A18;
  --orange: #FF7A00; --amber-ink: #A34704; --amber-lit: #FF9038;
  --ink: #16261B; --ink-2: #4C5B50; --ink-3: #596553;
  --slate: #1E2A26;
  /* 주문 진행 상태 색 — 관리 화면과 같다 */
  --s-new: #D93A35; --s-acc: #D98A00; --s-ready: #15803D; --s-out: #2563EB; --s-done: #7C877A; --wood: #7C5C3F;
  --line: rgba(22,38,27,.16); --line-g: rgba(255,255,255,.24); --line-d: rgba(233,238,230,.16);
  --gut: clamp(16px, 5vw, 64px); --maxw: 1180px;
  --top: 56px;
  --wood-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='w' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='0.13' intercept='0.4262'/><feFuncG type='linear' slope='0.13' intercept='0.3007'/><feFuncB type='linear' slope='0.13' intercept='0.1870'/><feFuncA type='linear' slope='0' intercept='1'/></feComponentTransfer></filter><rect width='300' height='300' filter='url(%23w)'/></svg>");
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 52px); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--beige); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1; word-break: keep-all;
}
/* 종이 결 — 랜딩 v2 와 같은 필터 (밝은 지면에만) */
body, .shop { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.013 0.62' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='0.088' intercept='0.9084'/><feFuncG type='linear' slope='0.088' intercept='0.8770'/><feFuncB type='linear' slope='0.088' intercept='0.8103'/><feFuncA type='linear' slope='0' intercept='1'/></feComponentTransfer></filter><rect width='400' height='400' filter='url(%23p)'/></svg>"); background-size: 400px 400px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* 공통 머리 3단 */
.eyebrow { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.idx { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--amber-ink); }
.h2 { margin: 0; font-size: clamp(27px, 4.6vw, 48px); font-weight: 800; line-height: 1.14; letter-spacing: -.045em; }
.lead { margin: 16px 0 0; font-size: clamp(15px, 1.3vw, 17px); color: var(--ink-2); max-width: 40em; }
.hl { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: .07em; text-underline-offset: .17em; text-decoration-skip-ink: none; }
.h2 .hl { color: var(--green); }

/* ── 머리 ─────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40; height: calc(var(--top) + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: env(safe-area-inset-top) var(--gut) 0; background: var(--green-d); color: #fff;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; }
.brand img { height: 28px; width: auto; }
.brand span { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; opacity: .9; }
.top-r { display: flex; align-items: center; gap: 14px; }
.lookup { font-size: 14px; color: rgba(255,255,255,.86); text-decoration: none; }
.cart-btn { position: relative; border: 0; background: rgba(255,255,255,.1); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.cart-btn i { position: absolute; top: -3px; right: -4px; min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px;
  background: var(--orange); color: var(--ink); font-style: normal; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.cart-btn.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ── 표지 ─────────────────────────────── */
.cover { position: relative; background: var(--deep); color: #fff; overflow: clip; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cover-veil { position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,40,22,.96) 0%, rgba(8,40,22,.78) 34%, rgba(8,40,22,.22) 70%, rgba(8,40,22,.35) 100%); }
.cover-in { position: relative; max-width: var(--maxw); margin: 0 auto; min-height: min(82svh, 720px);
  padding: 120px var(--gut) clamp(34px, 6vw, 70px); display: flex; flex-direction: column; justify-content: flex-end; }
.cover .eyebrow { color: rgba(255,255,255,.8); }
.cover-h1 { margin: 0; font-size: clamp(36px, 8vw, 78px); font-weight: 800; line-height: 1.06; letter-spacing: -.05em; }
.cover-h1 .hl { color: var(--orange); }
.cover-sub { margin: 18px 0 0; max-width: 32em; font-size: clamp(15px, 1.4vw, 17px); color: rgba(255,255,255,.84); }
.status { margin: 22px 0 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px;
  border: 1px solid rgba(255,255,255,.36); border-radius: 999px; font-size: 14px; font-weight: 600; background: rgba(0,0,0,.18); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9BE07A; box-shadow: 0 0 0 3px rgba(155,224,122,.25); animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 6px rgba(155,224,122,.06); } }
.status.closed .dot { background: #E9B8A0; box-shadow: none; animation: none; }
.cover-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 8px;
  background: var(--paper); color: var(--green-d); font-weight: 800; text-decoration: none; font-size: 16px; border: 0; }
.btn-cta::after { content: "↓"; font-weight: 800; }
.btn-cta.small { padding: 11px 18px; font-size: 15px; background: var(--green-d); color: #fff; }
.btn-cta.small::after { content: "→"; }
.btn-ghost { display: inline-flex; align-items: center; padding: 13px 20px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.4);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; }
.btn-ghost.light { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.notice { margin: 0; padding: 12px var(--gut); background: var(--orange); color: var(--ink); font-weight: 700; text-align: center; font-size: 15px; }

/* ── 오늘의 좋은값 (칠판 입간판) ───────────────
   쪽지 = 장부의 판매가. 「어제보다」는 price_log 에서 온다 */
.board-sec { background: var(--slate); color: #fff; padding: clamp(52px, 8vw, 96px) 0 clamp(58px, 8vw, 100px); }
.board-sec .eyebrow { color: rgba(233,238,230,.7); }
.board-sec .h2 { color: #fff; } .board-sec .h2 .hl { color: var(--amber-lit); }
.board-sec .lead { color: rgba(233,238,230,.72); }
.aframe { position: relative; width: min(100%, 720px); margin: clamp(30px, 4vw, 48px) 0 34px; }
.aframe::before { content: ""; position: absolute; top: -11px; left: 17%; right: 17%; height: 13px;
  background: linear-gradient(180deg, #9C7551 0%, #7C5C3F 55%, #5E452E 100%); border-radius: 4px 4px 0 0; }
.aframe::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -36px; height: 36px;
  background: radial-gradient(30% 42% at 50% 0%, rgba(0,0,0,.55), transparent 72%), radial-gradient(62% 76% at 50% 0%, rgba(0,0,0,.30), transparent 78%); }
.chalk { background-color: var(--wood); background-image: var(--wood-grain); background-size: 300px 300px;
  padding: clamp(10px, 1.3vw, 16px); border-radius: 5px;
  box-shadow: 0 24px 50px rgba(0,0,0,.34), inset 0 2px 0 rgba(255,255,255,.13), inset 0 -2px 0 rgba(0,0,0,.3); }
.chalk-face { position: relative; overflow: clip; border-radius: 2px; background: #121A17;
  padding: clamp(20px, 3vw, 32px) clamp(16px, 2.6vw, 28px) clamp(24px, 3.2vw, 36px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 90px rgba(0,0,0,.55); }
.chalk-face::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.13'/></svg>"); background-size: 180px 180px; }
.chalk-top { position: relative; margin: 0 0 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; color: rgba(233,238,230,.7); }
.chalk-top span:first-child { font-size: 17px; letter-spacing: .02em; color: #EDEFE6; }
.chalk-tray { position: relative; margin-top: -4px; height: clamp(14px, 1.6vw, 18px); background-color: var(--wood); background-image: var(--wood-grain);
  background-size: 300px 300px; border-radius: 0 0 5px 5px; box-shadow: 0 10px 20px rgba(0,0,0,.36), inset 0 -3px 0 rgba(0,0,0,.34); }
.chalk-tray::before { content: ""; position: absolute; left: 11%; top: -5px; width: 46px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #F6F3E9, #D8D3C2); }
.aframe-feet { display: flex; justify-content: space-between; margin: 0 7%; }
.aframe-feet i { width: 23%; height: clamp(16px, 1.8vw, 22px); background-color: var(--wood); background-image: var(--wood-grain); background-size: 300px 300px; border-radius: 0 0 4px 4px; }
.aframe-feet i:first-child { transform: skewX(-12deg); } .aframe-feet i:last-child { transform: skewX(12deg); }

.tags { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (max-width: 520px) { .tags { grid-template-columns: 1fr; gap: 16px; } }
.tag { --rot: 0deg; --tx: 50%; --trot: 0deg; --tw: 52px;
  position: relative; background: #F6F1E4 linear-gradient(174deg, rgba(255,255,255,.42), rgba(90,70,30,.05));
  color: var(--ink); padding: 12px 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; column-gap: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.7); cursor: pointer; text-align: left; border: 0; width: 100%;
  transform: rotate(var(--rot)); animation: pin-in .55s cubic-bezier(.2,.9,.3,1.2) both; }
.tag::before { content: ""; position: absolute; top: -8px; left: var(--tx); width: var(--tw); height: 16px; transform: translateX(-50%) rotate(var(--trot));
  background: rgba(236,228,205,.8); box-shadow: 0 1px 3px rgba(0,0,0,.34); }
.tags li:nth-child(1) .tag { --rot: -.7deg; --tx: 42%; --trot: -4.5deg; --tw: 56px; animation-delay: .1s; }
.tags li:nth-child(2) .tag { --rot: .5deg; --tx: 59%; --trot: 3.2deg; --tw: 46px; animation-delay: .22s; }
.tags li:nth-child(3) .tag { --rot: -.3deg; --tx: 46%; --trot: 6deg; --tw: 58px; animation-delay: .34s; }
.tags li:nth-child(4) .tag { --rot: .85deg; --tx: 36%; --trot: -2.2deg; --tw: 50px; animation-delay: .46s; }
.tags li:nth-child(5) .tag { --rot: -.6deg; --tx: 63%; --trot: 5deg; --tw: 44px; animation-delay: .58s; }
.tags li:nth-child(6) .tag { --rot: .35deg; --tx: 49%; --trot: -5.4deg; --tw: 55px; animation-delay: .7s; }
@keyframes pin-in { from { opacity: 0; transform: rotate(calc(var(--rot) * 4)) translateY(-14px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .tag { animation: none; } }
.tag b { font-size: 16.5px; font-weight: 800; letter-spacing: -.035em; }
.tag span { grid-column: 1; font-size: 12.5px; color: var(--ink-3); }
.tag strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; color: var(--green); }
.tag em { grid-column: 2; justify-self: end; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.tag em.down { color: #1B7A40; } .tag em.up { color: var(--amber-ink); }
.tag.out { opacity: .55; } .tag.out strong { text-decoration: line-through; }

/* ── 장보기 ─────────────────────────────── */
.shop { padding: clamp(46px, 7vw, 84px) 0 clamp(50px, 7vw, 90px); }
.shop-head { margin-bottom: 18px; }
.how { list-style: none; counter-reset: how; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.how li { counter-increment: how; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.how b { display: block; font-size: 15px; letter-spacing: -.02em; }
.how b::before { content: counter(how) " "; color: var(--amber-ink); font-weight: 800; margin-right: 2px; }
.how span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 420px) { .how li { padding: 8px 9px; } .how b { font-size: 14px; } .how span { font-size: 11.5px; } }

.tabs { position: sticky; top: calc(var(--top) + env(safe-area-inset-top)); z-index: 30; background: rgba(242,234,217,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs-in { max-width: var(--maxw); margin: 0 auto; padding: 9px var(--gut); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 16px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.tabs button small { font-size: 12px; font-weight: 600; opacity: .7; }
.tabs button.on { background: var(--green-d); border-color: var(--green-d); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; } }
.card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: 10px; overflow: clip;
  box-shadow: 0 1px 0 rgba(22,38,27,.06), 0 0 0 1px var(--line); transition: box-shadow .2s; }
.card.flash { box-shadow: 0 0 0 3px var(--orange); }
.ph { position: relative; aspect-ratio: 1 / 1; background: var(--paper2); overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
/* 사진이 없을 때 — 분류 색 바탕 + 잎 표시. 글자를 크게 박지 않는다 */
.ph.empty { display: grid; place-items: center; }
.ph.empty::before { content: ""; width: 34%; aspect-ratio: 225 / 183; background: url(assets/mark-leaf.png) center / contain no-repeat; opacity: .22; }
.ph.c-채소 { background: #E3E8D2; } .ph.c-과일 { background: #F1DFC6; } .ph.c-기타 { background: #E9E2D3; }
.ph .soon { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 11.5px; color: rgba(22,38,27,.5); font-weight: 600; }
.badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 4px; background: var(--orange); color: var(--ink); font-size: 12px; font-weight: 800; }
.soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22,38,27,.55); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .04em; }
/* 담기 — 사진 오른쪽 아래 동그라미. 담으면 수량 칸으로 바뀐다 */
.add { position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--green-d); color: #fff; font-size: 26px; line-height: 1; font-weight: 500; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(10,40,22,.3); }
.qty { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; height: 42px; border-radius: 21px;
  background: var(--green-d); color: #fff; box-shadow: 0 4px 12px rgba(10,40,22,.3); overflow: hidden; }
.qty button { border: 0; background: none; color: #fff; width: 38px; height: 42px; font-size: 20px; font-weight: 700; }
.qty span { min-width: 18px; text-align: center; font-weight: 800; }
.body { padding: 10px 12px 13px; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nm { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.035em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.desc { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.pr { margin: auto 0 0; padding-top: 6px; font-size: 18.5px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 6px; }
.pr small { font-size: 13px; font-weight: 700; }
.pr em { font-style: normal; font-size: 12px; font-weight: 700; }
.pr em.down { color: #1B7A40; } .pr em.up { color: var(--amber-ink); }
.card.out .body { opacity: .6; }
.empty { text-align: center; color: var(--ink-3); padding: 48px 0; }
.skel { aspect-ratio: 3 / 4; border-radius: 10px; background: linear-gradient(90deg, var(--paper2), var(--paper), var(--paper2)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ── 우리 하루 ─────────────────────────────── */
.day { background: var(--deep); color: #fff; padding: clamp(56px, 8vw, 110px) 0; }
.day .idx { color: var(--amber-lit); }
.day .h2 { color: #fff; } .day .h2 .hl { color: var(--orange); }
.day .lead { color: rgba(255,255,255,.8); }
.steps { list-style: none; margin: clamp(30px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 14px; } }
.step { position: relative; border-radius: 6px; overflow: clip; background: var(--deep); }
.step-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.step-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(9,34,19,.94) 0%, rgba(9,34,19,.7) 26%, rgba(9,34,19,.2) 56%, rgba(9,34,19,.03) 100%); }
.step-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(16px, 2.4vw, 28px); }
.step-t { margin: 0 0 4px; color: var(--amber-lit); font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.step-h { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.step-b { margin: 0; font-size: clamp(13px, 1.15vw, 15px); line-height: 1.6; color: rgba(255,255,255,.9); }
.step-b .hl { color: #fff; }
.day-end { margin: clamp(28px, 4vw, 48px) 0 0; padding-top: 24px; border-top: 1px solid var(--line-g); font-size: clamp(19px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.04em; }

/* ── 제철 ─────────────────────────────── */
.season-sec { background: var(--paper2); padding: clamp(52px, 8vw, 100px) 0; }
.season { margin-top: clamp(26px, 3.4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .season { grid-template-columns: 1fr; } }
.season-now { background: var(--green); color: #fff; border-radius: 6px; padding: clamp(22px, 3.2vw, 38px); display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; }
.season-now .eyebrow { grid-column: 1 / -1; color: rgba(255,255,255,.84); margin: 0 0 4px; }
.season-m { font-size: clamp(44px, 7vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.season-i { margin: 0; font-size: clamp(19px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.035em; line-height: 1.35; }
.season-s { grid-column: 1 / -1; margin: 12px 0 0; font-size: 14px; color: rgba(255,255,255,.84); }
.season-next { background: var(--paper); border-radius: 6px; padding: 18px 20px; display: grid; gap: 10px; align-content: center; }
.season-next div { display: flex; gap: 16px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.season-next div:last-child { border: 0; padding: 0; }
.season-next b { flex: none; width: 3em; color: var(--amber-ink); font-size: 14px; }
.season-next span { color: var(--ink-2); font-size: 15px; }
.season-img { grid-column: 1 / -1; display: none; }

/* ── 네 가지 약속 (주황 색면 · 글자는 잉크) ───── */
.vows-sec { background: var(--orange); color: var(--ink); padding: clamp(52px, 8vw, 100px) 0; }
.vows-sec .idx { color: var(--ink); }
.vows-sec .h2 .hl { color: var(--ink); text-decoration-color: #fff; }
.vows { list-style: none; margin: clamp(28px, 4vw, 46px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .vows { grid-template-columns: 1fr; } }
.vow { background: var(--paper); border-radius: 3px; padding: clamp(22px, 3vw, 34px); }
.vow-n { display: block; margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; color: var(--amber-ink); }
.vow-n::after { content: ""; display: block; width: 26px; height: 3px; margin-top: 7px; background: var(--orange); }
.vow-h { margin: 0 0 8px; font-size: clamp(21px, 2.3vw, 28px); font-weight: 800; letter-spacing: -.04em; color: var(--green); }
.vow-b { margin: 0; font-size: 15px; color: var(--ink-2); }
.vow-b em { font-style: normal; font-weight: 700; color: var(--ink); box-shadow: inset 0 -.28em 0 rgba(255,122,0,.42); }

/* ── 찾아오시는 길 ─────────────────────────────── */
.find-sec { background: var(--green); color: #fff; padding: clamp(52px, 8vw, 100px) 0; }
.find-sec .idx { color: rgba(255,255,255,.82); }
.find-sec .h2 { color: #fff; } .find-sec .h2 .hl { color: #fff; }
.find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .find { grid-template-columns: 1fr; } }
.facts { list-style: none; margin: 26px 0 0; padding: 0; }
.fact { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-g); font-size: 15.5px; }
.fact:last-child { border-bottom: 1px solid var(--line-g); }
.fact b { flex: none; width: 5.4em; font-size: 13.5px; color: rgba(255,255,255,.78); padding-top: 1px; }
.fact span.blank { color: rgba(255,255,255,.75); }
.supply { background: var(--paper); color: var(--ink); border-radius: 4px; overflow: clip; border-left: 5px solid var(--orange);
  display: grid; grid-template-columns: 140px 1fr; }
.supply img { width: 100%; height: 100%; object-fit: cover; }
.supply > div { padding: 22px 22px 24px; }
@media (max-width: 480px) { .supply { grid-template-columns: 1fr; } .supply img { height: 150px; } }
.supply .eyebrow { color: var(--amber-ink); margin-bottom: 8px; }
.supply h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; color: var(--green); }
.supply p { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-2); }

.foot { background: var(--green-d); color: rgba(255,255,255,.72); padding: 40px 0 calc(110px + env(safe-area-inset-bottom)); font-size: 13.5px; }
.foot img { width: 190px; height: auto; margin-bottom: 16px; }
.foot p { margin: 0 0 6px; }
.biz { font-size: 12.5px; }
.note { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 14px !important; max-width: 48em; }

/* ── 장바구니 막대 ─────────────────────────────── */
.cartbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
  display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto;
  border: 0; border-radius: 12px; padding: 15px 18px; background: var(--green-d); color: #fff;
  box-shadow: 0 10px 28px rgba(10,40,22,.4); font-size: 16px; font-weight: 700; animation: rise .25s ease-out; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.cb-n { min-width: 26px; height: 26px; border-radius: 13px; background: var(--orange); color: var(--ink); display: grid; place-items: center; font-size: 14px; font-weight: 800; padding: 0 6px; }
.cb-t { flex: 1; text-align: left; }
.cb-s { font-weight: 800; }

/* ── 시트 ─────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(10,25,15,.55); display: flex; align-items: flex-end; justify-content: center; }
/* ⚠ 아이폰 사파리는 flex:1(0% 기준) 자식을 높이 0 으로 접는다(근태앱 10/5) → 높이는 max-height 로만 */
.sheet-in { width: 100%; max-width: 620px; max-height: 92svh; background: var(--beige); border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; overflow: hidden; animation: up .24s ease-out; }
@keyframes up { from { transform: translateY(36px); opacity: .4; } }
@media (min-width: 700px) { .sheet { align-items: center; } .sheet-in { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .sheet-in, .cartbar { animation: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gut) 10px; border-bottom: 1px solid var(--line); flex: none; }
.sheet-head h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.x { border: 0; background: none; font-size: 20px; width: 40px; height: 40px; color: var(--ink-2); }
.sheet-body { overflow-y: auto; max-height: calc(92svh - 66px); padding: 12px var(--gut) calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.lines { list-style: none; margin: 0 0 18px; padding: 0; }
.line { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.line .ln { flex: 1; min-width: 0; } .line .ln b { display: block; font-size: 15.5px; }
.line .ln small { color: var(--ink-3); font-size: 13px; }
.line .lq { display: flex; align-items: center; border: 1.5px solid var(--green); border-radius: 6px; flex: none; }
.line .lq button { border: 0; background: none; width: 34px; height: 34px; font-size: 18px; font-weight: 700; color: var(--green); }
.line .lq span { min-width: 22px; text-align: center; font-weight: 800; }
.line .lp { width: 76px; text-align: right; font-weight: 800; flex: none; }
.seg { border: 0; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--ink-2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); font-weight: 700; }
.seg input:checked + span { border-color: var(--green-d); background: var(--green-d); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.hint { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); min-height: 1em; }
.f { display: block; margin: 0 0 13px; }
.f > span { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.f small { font-weight: 500; color: var(--ink-3); }
.f input, .f select, .f textarea { width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font-size: 16px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--green); }
.row { display: flex; gap: 8px; }
.btn-s { flex: none; border: 1.5px solid var(--green); background: var(--paper); color: var(--green); border-radius: 8px; padding: 0 14px; font-weight: 700; }
.sum { margin: 18px 0 8px; padding: 12px 14px; background: var(--paper); border-radius: 8px; }
.sum div { display: flex; justify-content: space-between; padding: 4px 0; }
.sum dt { color: var(--ink-2); } .sum dd { margin: 0; font-weight: 700; }
.sum .tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 19px; } .sum .tot dd { font-weight: 800; }
.pay-note { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 12px; }
.err { background: #FBE3D6; color: #7A2A05; border-radius: 8px; padding: 10px 12px; font-size: 14.5px; margin: 0 0 12px; }
.btn-main { width: 100%; border: 0; border-radius: 10px; background: var(--green-d); color: #fff; padding: 16px; font-size: 17px; font-weight: 800; }
.btn-main:disabled { opacity: .5; }
.btn-main.ghost { background: var(--paper); color: var(--green-d); border: 1.5px solid var(--green-d); margin-top: 8px; }
.done-code { font-size: 36px; font-weight: 800; letter-spacing: .02em; color: var(--green-d); margin: 4px 0; }
.steps-o { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 6px; }
.steps-o li { padding: 9px 12px; border-radius: 8px; background: var(--paper); color: var(--ink-3); font-weight: 600; }
.steps-o li.on { background: var(--green-d); color: #fff; } .steps-o li.past { color: var(--ink); }
.a2hs { margin: 16px 0 4px; padding: 14px; border-radius: 10px; background: var(--paper2); display: flex; gap: 12px; align-items: center; }
.a2hs img { width: 46px; height: 46px; border-radius: 11px; flex: none; }
.a2hs p { margin: 0; font-size: 14px; } .a2hs b { display: block; font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14.5px; max-width: 90vw; }

/* ═════════ 모션 · 타이포 (2차) ═════════ */

/* 표지 제목 — 줄마다 가림막 안에서 올라온다 (CSS 만, JS 안 기다림) */
.cover-h1 .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.cover-h1 .ln > span { display: inline-block; animation: rise-line .9s cubic-bezier(.2,.75,.2,1) both; }
.cover-h1 .ln:nth-child(2) > span { animation-delay: .14s; }
@keyframes rise-line { from { transform: translateY(105%); } }
.cover-h1 .hl { text-decoration: none; background: linear-gradient(var(--orange), var(--orange)) 0 92% / 0 .07em no-repeat; animation: underline .7s .75s cubic-bezier(.6,0,.2,1) forwards; padding-bottom: .04em; }
.cover-h1 .ln:nth-child(2) .hl { animation-delay: .95s; }
@keyframes underline { to { background-size: 100% .07em; } }
.cover-sub, .status, .cover-cta, .cover .eyebrow { animation: fade-up .8s cubic-bezier(.2,.75,.2,1) both; }
.cover .eyebrow { animation-delay: 0s; } .cover-sub { animation-delay: .35s; } .status { animation-delay: .5s; } .cover-cta { animation-delay: .62s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
/* 표지 사진은 아주 천천히 다가온다 */
.cover-img { animation: kb 22s ease-out both; transform-origin: 60% 50%; }
@keyframes kb { from { transform: scale(1.12); } }
/* 표지 오른쪽 세로 영문 */
.cover::after { content: "FRESH TODAY · GOOD TOMORROW"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-size: 11px; letter-spacing: .32em; color: rgba(255,255,255,.55); }
@media (max-width: 760px) { .cover::after { display: none; } }

/* 오늘 값 띠 — 시세가 흐른다 */
.ticker { display: flex; align-items: stretch; background: var(--ink); color: #EDEFE6; font-size: 14.5px; overflow: hidden; height: 44px; }
.tk-label { flex: none; display: grid; place-items: center; padding: 0 14px; background: var(--orange); color: var(--ink); font-weight: 800; font-size: 13.5px; letter-spacing: .02em; position: relative; z-index: 1; }
.tk-track { flex: 1; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
.tk-in { display: flex; width: max-content; animation: tick var(--dur, 40s) linear infinite; }
.ticker:hover .tk-in { animation-play-state: paused; }
.tk-run { display: flex; align-items: center; white-space: nowrap; }
.tk { padding: 0 6px; font-feature-settings: "tnum" 1; } .tk b { font-weight: 700; color: #fff; }
.tk i { font-style: normal; font-size: 12px; margin-left: 4px; } .tk i.down { color: #8FD18A; } .tk i.up { color: var(--amber-lit); }
.tk-dot { color: rgba(255,255,255,.25); font-size: 7px; padding: 0 12px; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tk-in { animation-duration: calc(var(--dur, 40s) * 3); } }

/* 분류 그림 띠 */
.cat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 0; max-width: 640px; }
.cat-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.cat-strip img:nth-child(1) { object-position: 70% 60%; } .cat-strip img:nth-child(2) { object-position: 80% 40%; } .cat-strip img:nth-child(3) { object-position: 75% 60%; }
@media (min-width: 900px) {
  .shop-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: end; }
  .shop-head .idx, .shop-head .h2 { grid-column: 1; }
  .cat-strip { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}

/* 탭 밑줄 — 고른 탭으로 미끄러진다 */
.tabs-in { position: relative; }
.tab-ink { position: absolute; left: 0; bottom: 4px; height: 3px; border-radius: 2px; background: var(--orange); width: 0; transition: transform .35s cubic-bezier(.3,.8,.3,1), width .35s; pointer-events: none; }

/* 카드 — 사진 없는 상품은 분류 그림(흐리게)을 깐다 */
.ph.empty::before { content: none; }
.ph .ph-cat { width: 100%; height: 100%; object-fit: cover; object-position: 75% 60%; filter: saturate(.8) blur(1.5px); opacity: .5; transform: scale(1.08); }
.ph .soon { background: rgba(251,247,239,.86); left: 50%; right: auto; transform: translateX(-50%); bottom: 10px; padding: 2px 9px; border-radius: 999px; color: var(--ink-2); }
.ph img:not(.ph-cat) { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .card:hover .ph img:not(.ph-cat) { transform: scale(1.04); } }
.ctl { position: absolute; right: 8px; bottom: 8px; }
.ctl .add, .ctl .qty { position: static; }
.add { transition: transform .15s; } .add:active { transform: scale(.9); }
.qty { animation: pop .22s ease-out; } @keyframes pop { from { transform: scale(.7); opacity: .4; } }
.card.flash { animation: flash 1.4s ease; } @keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--orange); } }
/* 카드가 차례로 떠오른다 — 스크롤 연동이 되는 브라우저에서만 (안 되면 그냥 보인다) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card { animation: card-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .reveal, .vow, .step, .season > *, .fact, .supply, .h2 { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
    @keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
  }
}

/* 날아가는 점 */
.fly { position: fixed; z-index: 80; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; }
.cart-btn.bump, .cartbar.bump .cb-n { animation: bump .35s ease; }

/* 큰 글자 — 주황 지면 뒤에 깔리는 외곽선 영문 */
.vows-sec { position: relative; overflow: clip; }
.big-type { position: absolute; right: -2vw; top: 20px; margin: 0; pointer-events: none; text-align: right;
  font-size: clamp(56px, 13vw, 180px); font-weight: 900; line-height: .86; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(22,38,27,.16); }
.vows-sec .wrap { position: relative; }
.vow-photo { display: grid; grid-template-columns: 1fr; padding-top: 0; overflow: clip; }
.vow-photo img { width: calc(100% + 2 * clamp(22px, 3vw, 34px)); margin: 0 calc(-1 * clamp(22px, 3vw, 34px)) 18px; aspect-ratio: 16 / 8; object-fit: cover; }

/* 우리 하루 — 시각 숫자를 크게 */
.step-t { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; font-weight: 900; }

/* 제철 사진 */
.season-now { position: relative; overflow: clip; grid-template-columns: 1fr; padding: 0; }
.season-now img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.season-tx { padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; }
.season-tx .eyebrow { grid-column: 1 / -1; color: rgba(255,255,255,.84); margin: 0 0 4px; }
.season-next .muted-s { margin: 4px 0 0; }

/* 완료 화면 */
.muted-s { font-size: 13px; color: var(--ink-3); margin: 0; }
.done-hero { display: flex; align-items: center; gap: 14px; padding: 16px; margin: 4px 0 16px; background: var(--paper); border-radius: 12px; }
.done-hero p { margin: 0; font-weight: 700; }
.ok { width: 54px; height: 54px; flex: none; fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ok circle { stroke-dasharray: 183; stroke-dashoffset: 183; animation: draw .6s ease-out forwards; }
.ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .35s .5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sheet-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; border-radius: 2px; background: rgba(22,38,27,.2); transform: translateX(-50%); }
.sheet-head { position: relative; touch-action: none; }
.toast { animation: fade-up .25s ease-out; }

/* ═════════ 3차 다듬기 ═════════ */
/* 사진 없는 상품 — 흐린 그림 대신 글자를 그림으로 (분류 색 바탕 + 잎 표시) */
.ph.empty { display: block; }
.ph.empty::after { content: ""; position: absolute; right: -8%; top: -6%; width: 46%; aspect-ratio: 225 / 183;
  background: url(assets/mark-leaf.png) center / contain no-repeat; opacity: .13; transform: rotate(-14deg); }
.ph.c-채소 { background: #DDE6CC; } .ph.c-과일 { background: #F3DCC2; } .ph.c-기타 { background: #E6DED0; }
.ph-name { position: absolute; left: 12px; right: 12px; top: 14px; font-size: clamp(26px, 7.5vw, 40px); font-weight: 900; line-height: 1;
  letter-spacing: -.06em; color: rgba(10,74,40,.82); word-break: keep-all; }
.ph.c-과일 .ph-name { color: rgba(163,71,4,.85); } .ph.c-기타 .ph-name { color: rgba(76,91,80,.85); }
.ph .soon { left: 12px; transform: none; bottom: 14px; background: none; padding: 0; font-size: 11.5px; color: rgba(22,38,27,.45); }
/* 주문 순서 — 한 줄 화살표 */
.how { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; }
.how li { background: none; border: 0; padding: 0 18px 0 0; position: relative; }
.how li + li { padding-left: 4px; }
.how li:not(:last-child)::after { content: "→"; position: absolute; right: 4px; top: 0; color: var(--amber-ink); font-weight: 800; }
.how span { display: block; }
/* 칠판 — 폰에서도 두 줄로, 값은 아래로 */
@media (max-width: 520px) {
  .tags { grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .tag { grid-template-columns: 1fr; padding: 11px 11px 10px; }
  .tag b { font-size: 15px; } .tag strong { grid-column: 1; grid-row: auto; font-size: 21px; margin-top: 4px; }
  .tag em { grid-column: 1; justify-self: start; }
  .cover-in { min-height: 72svh; }
  .cover .eyebrow { font-size: 11px; letter-spacing: .12em; }
}
.ph-name { top: 40px; }
.badge { top: 10px; left: 10px; }
.how li { padding-right: 28px; } .how li:not(:last-child)::after { right: 8px; }
.vow-photo img { max-width: none; }

/* 아이콘 (assets/icons.svg) */
.i { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .32em; flex: none; }
.seg span { display: flex; align-items: center; justify-content: center; gap: 2px; }
.x .i { margin: 0; width: 22px; height: 22px; }

/* 진행 중인 내 주문 알약 */
.order-pill { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 44; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 11px 14px 13px; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); text-align: left;
  box-shadow: 0 10px 30px rgba(10,40,22,.22), 0 0 0 1px var(--line); overflow: hidden; animation: rise .3s ease-out; }
.order-pill:has(~ .cartbar:not([hidden])) { bottom: calc(84px + env(safe-area-inset-bottom)); }
.op-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--green-d); color: #fff; display: grid; place-items: center; flex: none; }
.op-ic .i { margin: 0; width: 20px; height: 20px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }
.op-t { flex: 1; min-width: 0; } .op-t b { display: block; font-size: 15.5px; } .op-t small { color: var(--ink-3); font-size: 12.5px; }
.order-pill::after { content: "보기 ›"; font-size: 13px; font-weight: 700; color: var(--green); }
.op-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: var(--orange); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.order-pill.pop { animation: pill-pop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes pill-pop { 40% { transform: scale(1.04); } }
.live { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 14px 0 0; }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: #3FAE5B; animation: live 2s ease-in-out infinite; }
.btn-main .i { vertical-align: -.22em; }
@media (prefers-reduced-motion: reduce) { .op-ic .i { animation: none; } }

/* ═════════ 7차: 화면 나누기 · 모션 · 칠판 · 달력 · 특가 ═════════ */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.view.enter { animation: view-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .view.enter { animation: none; } }
.btn-cta::after { content: "→"; }
.scroll-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 50; background: var(--orange); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* 글씨가 쳐지는 줄 */
.type-line { min-height: 1.7em; }
.typed { white-space: pre-wrap; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cover .type-line { font-size: clamp(16px, 1.6vw, 19px); color: #fff; font-weight: 600; }

/* 홈: 특가 · 가격 내림 줄 */
.deals { padding: 26px 0 8px; }
.deals-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.deals-h h2 { margin: 0; font-size: 21px; letter-spacing: -.04em; display: flex; align-items: center; gap: 8px; }
.deals-h .hl { color: var(--green); }
.spark-ic { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,122,0,.6); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 10px rgba(255,122,0,0); } }
.more-link { font-size: 14px; font-weight: 700; color: var(--green); text-decoration: none; }
.deal-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; }
.deal { flex: 0 0 148px; scroll-snap-align: start; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 3px; }
.deal-ph { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper2); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--orange); }
.deal-ph img { width: 100%; height: 100%; object-fit: cover; }
.deal-ph b { font-size: 22px; font-weight: 900; letter-spacing: -.06em; color: rgba(10,74,40,.8); padding: 0 8px; text-align: center; line-height: 1.1; }
.deal-ph.c-채소 { background: #DDE6CC; } .deal-ph.c-과일 { background: #F3DCC2; } .deal-ph.c-기타 { background: #E6DED0; }
.deal-tag { position: absolute; left: 8px; top: 8px; font-style: normal; background: var(--orange); color: var(--ink); font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 6px; animation: wiggle 2.6s ease-in-out infinite; }
.deal-tag.sp { background: var(--ink); color: #fff; }
.deal-n { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-p { font-size: 17px; font-weight: 800; } .deal-p small { font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* 홈: 두 갈래 문 */
.doors { padding: 18px 0 40px; }
.doors-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .doors-in { grid-template-columns: 1fr; } }
.door { position: relative; display: block; min-height: 190px; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,40,22,.92), rgba(10,40,22,.35) 60%, rgba(10,40,22,.1)); }
.door:not(.dark) img { object-position: 70% 60%; }
@media (hover: hover) { .door:hover img { transform: scale(1.05); } }
.door-t { position: absolute; left: 18px; right: 60px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; }
.door-t small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-lit); }
.door-t b { font-size: 26px; font-weight: 800; letter-spacing: -.045em; }
.door-t em { font-style: normal; font-size: 13.5px; opacity: .85; }
.door-ar { position: absolute; right: 16px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--ink); display: grid; place-items: center; font-style: normal; font-weight: 900; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } 90% { transform: translateX(-2px); } }

/* 우리 하루 표지 */
.story-cover { position: relative; height: min(56svh, 460px); overflow: hidden; color: #fff; }
.story-cover img { width: 100%; height: 100%; object-fit: cover; animation: kb 22s ease-out both; }
.story-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,42,24,.95), rgba(11,42,24,.2) 70%); }
.sc-in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 30px; }
.sc-in .eyebrow { color: rgba(255,255,255,.8); }
.sc-h { margin: 0; font-size: clamp(30px, 7vw, 64px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; min-height: 1.2em; }

/* ── 칠판: 분필 글씨 (사진 칠판 / 그린 칠판 공용) ── */
.board-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 34px; align-items: center; }
@media (max-width: 860px) { .board-grid { grid-template-columns: 1fr; } }
.board { position: relative; width: min(100%, 560px); margin: 0 auto; aspect-ratio: 3 / 4; }
.board-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 24px 50px rgba(0,0,0,.4); }
/* 그린 칠판(사진이 아직 없을 때) — 나무 테 · 판 · 받침 · 다리 */
.board-css { position: absolute; inset: 0; }
.board.photo .board-css { display: none; }
.bc-frame { position: absolute; left: 0; right: 0; top: 0; bottom: 9%; border-radius: 8px; background-color: var(--wood); background-image: var(--wood-grain); background-size: 300px 300px;
  box-shadow: 0 24px 50px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.3); }
.bc-frame::after { content: ""; position: absolute; inset: 4.5%; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 70px rgba(0,0,0,.6);
  background-image: radial-gradient(60% 30% at 70% 25%, rgba(233,238,230,.07), transparent 70%), radial-gradient(80% 30% at 20% 85%, rgba(233,238,230,.05), transparent 70%), radial-gradient(120% 90% at 30% 20%, #2A332F, #151C19 70%); }
.bc-tray { position: absolute; left: 3%; right: 3%; bottom: 7.5%; height: 3%; border-radius: 0 0 5px 5px; background-color: #6B4E34; background-image: var(--wood-grain); background-size: 300px 300px; box-shadow: 0 8px 14px rgba(0,0,0,.35); }
.bc-tray::before { content: ""; position: absolute; left: 14%; top: -45%; width: 12%; height: 70%; border-radius: 4px; background: linear-gradient(#F6F3E9, #D8D3C2); }
.bc-feet { position: absolute; left: 9%; right: 9%; bottom: 0; height: 8%; background: linear-gradient(90deg, transparent 0 6%, #6B4E34 6% 24%, transparent 24% 76%, #6B4E34 76% 94%, transparent 94%); }
/* 판 위 글씨 영역 — 사진 칠판의 판 위치에 맞춰 --inset 을 바꾼다 */
.board-face { --inset-x: 11%; --inset-t: 9%; --inset-b: 19%; position: absolute; left: var(--inset-x); right: var(--inset-x); top: var(--inset-t); bottom: var(--inset-b);
  display: flex; flex-direction: column; color: #F2F1EA; font-family: "Nanum Pen Script", "Pretendard Variable", cursive; }
.board.photo .board-face { --inset-x: 14%; --inset-t: 12%; --inset-b: 22%; }
.chalk-h { margin: 0 0 4%; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px dashed rgba(242,241,234,.35); padding-bottom: 2%; }
.chalk-h span { font-size: clamp(30px, 4.6vw, 44px); line-height: 1; text-shadow: 0 0 1px rgba(255,255,255,.6); }
.chalk-h small { font-size: clamp(17px, 2.2vw, 22px); opacity: .8; }
.chalk-lines { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; min-height: 0; }
.cl { all: unset; cursor: pointer; display: grid; grid-template-columns: auto auto minmax(10px, 1fr) auto auto; align-items: baseline; gap: 0 6px; width: 100%;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; text-shadow: 0 0 1px rgba(255,255,255,.55), 0 0 6px rgba(255,255,255,.08); }
.cl span { font-size: .62em; opacity: .75; }
.cl .dots { border-bottom: 2px dotted rgba(242,241,234,.35); transform: translateY(-.25em); }
.cl strong { font-weight: 400; color: #FFE9A8; }
.cl em { font-style: normal; font-size: .58em; min-width: 3.4em; text-align: right; }
.cl em.down { color: #9FE08A; } .cl em.up { color: #FFB080; }
/* 분필로 써 내려가는 동작 — 줄마다 왼쪽에서 오른쪽으로 드러난다 · 14초마다 다시 */
.board.writing .chalk-lines li { animation: write 1.1s cubic-bezier(.5,0,.3,1) both; animation-delay: calc(var(--n) * .35s + .2s); }
.board.writing .chalk-h span { animation: write 1s cubic-bezier(.5,0,.3,1) both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .board.writing .chalk-lines li, .board.writing .chalk-h span { animation: none; } }

/* ── 제철 달력: 이번 달은 전구 점등 ── */
.cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 22px 0 14px; }
@media (max-width: 760px) { .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cm { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 12px; min-height: 92px; display: flex; flex-direction: column; gap: 4px; opacity: .72; }
.cm b { font-size: 22px; font-weight: 800; letter-spacing: -.04em; color: var(--ink-3); } .cm b small { font-size: 12px; margin-left: 1px; }
.cm > span { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.cm.next { opacity: .9; }
.cm.now { opacity: 1; background: var(--green-d); border-color: var(--green-d); color: #fff; box-shadow: 0 0 0 3px rgba(255,177,60,.35), 0 0 28px rgba(255,177,60,.45); animation: glow 2.4s ease-in-out infinite; z-index: 1; }
.cm.now b { color: #FFE9A8; } .cm.now > span { color: rgba(255,255,255,.92); font-weight: 600; }
.cm.now em { position: absolute; right: 8px; top: 8px; font-style: normal; font-size: 11px; font-weight: 900; color: var(--ink); background: #FFC94D; padding: 1px 6px; border-radius: 4px; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px rgba(255,177,60,.15), 0 0 12px rgba(255,177,60,.2); } }
/* 테두리 전구 — 번갈아 켜진다(극장 간판처럼) */
.bulbs { position: absolute; inset: -5px; pointer-events: none; }
.bulbs i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #FFD36E; box-shadow: 0 0 6px 2px rgba(255,200,80,.85); animation: bulb 1s steps(1) infinite; }
.bulbs i:nth-child(odd) { animation-delay: .5s; }
@keyframes bulb { 50% { background: #7A5A20; box-shadow: none; } }
.bulbs i:nth-child(1) { left: 8%; top: 0; } .bulbs i:nth-child(2) { left: 29%; top: 0; } .bulbs i:nth-child(3) { left: 50%; top: 0; } .bulbs i:nth-child(4) { left: 71%; top: 0; } .bulbs i:nth-child(5) { left: 92%; top: 0; }
.bulbs i:nth-child(6) { left: 100%; top: 33%; } .bulbs i:nth-child(7) { left: 100%; top: 66%; }
.bulbs i:nth-child(8) { left: 92%; top: 100%; } .bulbs i:nth-child(9) { left: 71%; top: 100%; } .bulbs i:nth-child(10) { left: 50%; top: 100%; } .bulbs i:nth-child(11) { left: 29%; top: 100%; } .bulbs i:nth-child(12) { left: 8%; top: 100%; }
.bulbs i:nth-child(13) { left: 0; top: 66%; } .bulbs i:nth-child(14) { left: 0; top: 33%; }
@media (prefers-reduced-motion: reduce) { .bulbs i, .cm.now { animation: none; } }

/* ── 특가 · 가격 내림 카드 강조 ── */
.card { position: relative; }
.card.hot { box-shadow: 0 0 0 2px var(--orange), 0 8px 22px rgba(255,122,0,.18); }
.card.hot::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); background-size: 250% 100%; animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { background-position: 130% 0; } 100% { background-position: -60% 0; } }
.ribbon { position: absolute; z-index: 3; top: 14px; right: -36px; transform: rotate(38deg); background: var(--ink); color: #FFE9A8; font-size: 12px; font-weight: 900; padding: 4px 40px; letter-spacing: .04em; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.badge.wiggle { animation: wiggle 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes wiggle { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-9deg) scale(1.08); } 88% { transform: rotate(8deg) scale(1.08); } 91% { transform: rotate(-5deg); } 94% { transform: rotate(3deg); } }
.tabs .deal-tab { border-color: var(--orange); color: var(--amber-ink); }
.tabs .deal-tab.on { background: var(--orange); color: var(--ink); border-color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .card.hot::after, .badge.wiggle, .deal-tag, .door-ar, .spark-ic { animation: none; } }

/* ── 아래 탭 ── */
.bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(251,247,239,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.bnav a, .bnav button { position: relative; border: 0; background: none; text-decoration: none; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; padding: 4px 0; }
.bnav .i { width: 24px; height: 24px; margin: 0; }
.bnav a.on { color: var(--green-d); } .bnav a.on .i { transform: translateY(-1px) scale(1.06); }
.bnav a.on::before { content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
.bnav i { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: var(--orange); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.cartbar { bottom: calc(70px + env(safe-area-inset-bottom)); }
.order-pill { bottom: calc(70px + env(safe-area-inset-bottom)); }
.order-pill:has(~ .cartbar:not([hidden])) { bottom: calc(142px + env(safe-area-inset-bottom)); }
body:not([data-view="shop"]) .cartbar { display: none !important; }
body:not([data-view="shop"]) .order-pill:has(~ .cartbar:not([hidden])) { bottom: calc(70px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
.foot { padding-bottom: 40px; }

/* ── 장바구니: 배달 무료까지 · 주소 찾기 ── */
.goal { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1.5px solid var(--line); }
.goal-t { font-size: 14px; color: var(--ink); margin-bottom: 6px; } .goal-t b { color: var(--green-d); }
.goal.low .goal-t b { color: var(--amber-ink); }
.goal-bar { height: 8px; border-radius: 4px; background: var(--paper2); overflow: hidden; }
.goal-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--orange), #3FAE5B); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.goal.done .goal-bar i { background: #3FAE5B; }
.post-layer { position: relative; height: 420px; margin: 4px 0 12px; border: 1.5px solid var(--green); border-radius: 10px; overflow: hidden; background: #fff; }
.post-layer #postBox { width: 100%; height: 100%; }
.post-x { position: absolute; right: 6px; top: 6px; z-index: 2; border: 0; border-radius: 6px; background: var(--ink); color: #fff; padding: 5px 10px; font-weight: 700; font-size: 13px; }
.link-btn { border: 0; background: none; padding: 0; margin: -4px 0 12px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }

/* 주문 끝 — 잎이 터진다 */
.burst { position: fixed; left: 50%; top: 45%; z-index: 80; pointer-events: none; }
.burst i { position: absolute; width: 12px; height: 12px; border-radius: 0 70% 0 70%; background: var(--c); animation: leaf 1.4s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes leaf { from { transform: translate(0,0) rotate(0) scale(.4); opacity: 1; } to { transform: translate(var(--x), calc(var(--y) + 220px)) rotate(var(--r)) scale(1); opacity: 0; } }

/* 장바구니 가독성 · 주소 줄 (8차) */
.f > span.row { display: flex; gap: 8px; margin: 0; font-size: 16px; color: var(--ink); }
.f > span.row input { flex: 1; min-width: 0; }
.f > span.row .btn-s { flex: none; padding: 0 16px; font-size: 15px; background: var(--green-d); color: #fff; border-color: var(--green-d); }
.sheet-in { color: var(--ink); }
.f > span { color: var(--ink); font-size: 14.5px; }
.hint { color: var(--ink); font-size: 14px; }
.seg legend { color: var(--ink); font-size: 15px; }
.seg span { color: var(--ink); border-color: rgba(22,38,27,.28); }
.f input, .f select, .f textarea { border-color: rgba(22,38,27,.3); color: var(--ink); }
.f input::placeholder, .f textarea::placeholder { color: #8A9285; }
.line .ln small { color: var(--ink-2); }
.sum dt { color: var(--ink); }
.pay-note { color: var(--ink); }
.cartbar .cb-t { color: #fff; } .cartbar .cb-s { color: #FFE9A8; }

.cl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8.5em; }

/* ═════════ 9차: 상품 상세 · 자주 산 것 ═════════ */
.card .body, .card .ph img, .card .ph-name { cursor: pointer; }
.mine-chip { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; color: var(--green-d); background: #DCEBD8; border-radius: 999px; padding: 1px 7px; vertical-align: 2px; letter-spacing: 0; }
.mine { padding: 18px 0 4px; }
.mine .deals-h h2 { font-size: 21px; }
.mine .more-link { border: 0; background: none; padding: 0; cursor: pointer; }
.mine-c { position: relative; }
.mine-c .deal-ph { border: 0; padding: 0; cursor: pointer; box-shadow: 0 0 0 1.5px var(--line); }
.deal-tag.mine { background: var(--green-d); color: #fff; animation: none; }
.tabs .mine-tab { border-color: var(--green); color: var(--green-d); }
.tabs .mine-tab.on { background: var(--green); color: #fff; }
.tg-add { position: absolute; right: 6px; top: calc(148px - 40px); width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--green-d); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(10,40,22,.3); }
.tg-add .i { margin: 0; width: 18px; height: 18px; }
.tg-add:active { transform: scale(.9); }

/* 상세 시트 */
.sheet-in.detail { max-width: 560px; }
.d-ph { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--paper2); margin-bottom: 14px; }
.d-ph img { width: 100%; height: 100%; object-fit: cover; }
.d-ph.empty::after { content: ""; position: absolute; right: -6%; top: -8%; width: 40%; aspect-ratio: 225 / 183; background: url(assets/mark-leaf.png) center / contain no-repeat; opacity: .14; transform: rotate(-14deg); }
.d-ph.c-채소 { background: #DDE6CC; } .d-ph.c-과일 { background: #F3DCC2; } .d-ph.c-기타 { background: #E6DED0; }
.d-ph .ph-name { font-size: clamp(36px, 10vw, 54px); top: 22px; left: 18px; right: 18px; }
.d-ph .badge { top: auto; bottom: 12px; left: 12px; }
.d-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.d-meta { margin: 0; font-size: 14px; color: var(--ink-2); }
.d-price { margin: 2px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 8px; }
.d-price small { font-size: 18px; } .d-price em { font-style: normal; font-size: 14px; font-weight: 800; }
.d-price em.down { color: #1B7A40; } .d-price em.up { color: var(--amber-ink); }
.d-mine { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--green-d); display: flex; align-items: center; }
.d-desc { font-size: 15px; color: var(--ink); margin: 12px 0 0; }
.d-care { margin: 16px 0 0; display: grid; gap: 8px; }
.d-care > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.d-care b { display: flex; align-items: center; font-size: 14.5px; color: var(--green-d); }
.d-care p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink); line-height: 1.55; }
.d-care small { font-size: 12px; color: var(--ink-3); }
.d-sub { margin: 20px 0 10px; font-size: 17px; letter-spacing: -.03em; }
.d-tog { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.tg-c { position: relative; flex: 0 0 116px; display: flex; flex-direction: column; gap: 2px; }
.tg-ph { border: 0; padding: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper2); display: grid; place-items: center; cursor: pointer; }
.tg-ph img { width: 100%; height: 100%; object-fit: cover; }
.tg-ph b { font-size: 17px; font-weight: 900; letter-spacing: -.05em; color: rgba(10,74,40,.8); padding: 0 6px; line-height: 1.1; }
.tg-ph.c-채소 { background: #DDE6CC; } .tg-ph.c-과일 { background: #F3DCC2; } .tg-ph.c-기타 { background: #E6DED0; }
.tg-n { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-p { font-size: 14px; font-weight: 800; }
.tg-c .tg-add { top: calc(116px - 40px); width: 32px; height: 32px; }
.d-buy { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 18px calc(-1 * var(--gut)) 0; padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom)); background: var(--beige); border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.d-qty { display: flex; align-items: center; border: 1.5px solid var(--green-d); border-radius: 10px; flex: none; }
.d-qty button { border: 0; background: none; width: 44px; height: 50px; display: grid; place-items: center; color: var(--green-d); }
.d-qty .i { margin: 0; } .d-qty span { min-width: 24px; text-align: center; font-weight: 800; font-size: 18px; }
.d-buy .btn-main { flex: 1; }

/* ═════════ 10차: 완료 화면 · 받는 법 ═════════ */
.steps-o.h { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin: 14px 0 18px; counter-reset: st; }
.steps-o.h li { position: relative; padding: 22px 2px 0; background: none; border-radius: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.steps-o.h li::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--paper2); }
.steps-o.h li::after { content: ""; position: absolute; left: 50%; top: 2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper2); border: 2px solid var(--beige); }
.steps-o.h li.past, .steps-o.h li.on { color: var(--ink); background: none; }
.steps-o.h li.past::before, .steps-o.h li.on::before { background: var(--green); }
.steps-o.h li.past::after { background: var(--green); }
.steps-o.h li.on::after { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,122,0,.25); animation: ping 1.6s ease-out infinite; }
.steps-o.h li.on { color: var(--green-d); }
.guide { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; background: #EAF1E4; border: 1px solid rgba(15,107,58,.2); }
.guide > .i { width: 26px; height: 26px; color: var(--green-d); margin: 2px 0 0; flex: none; }
.guide b { display: block; font-size: 15.5px; color: var(--green-d); }
.guide p { margin: 3px 0 0; font-size: 14px; color: var(--ink); }
.guide a { color: var(--green-d); font-weight: 700; }
.btn-main:disabled { background: #8E9A8F; opacity: 1; }

.guide p b { display: inline; font-size: inherit; }

/* ═════════ 11차: 표지 셔터 영상 · 이번 달 점등 테두리 ═════════ */
/* 표지 — 셔터가 올라가며 가게가 열린다(한 번 재생 후 마지막 장면에 멈춤). 글씨 쪽만 어둡게 */
video.cover-img { object-fit: cover; object-position: 50% 45%; animation: none; background: #1B2A30; }
.cover-veil { background: linear-gradient(0deg, rgba(8,40,22,.94) 0%, rgba(8,40,22,.72) 34%, rgba(8,40,22,.15) 62%, rgba(8,40,22,.25) 100%); }

/* 이번 달 — 굵은 주황 테두리가 천천히 켜졌다 꺼진다(점등). 전구·후광 제거 */
.cm.now { background: var(--paper); color: var(--ink); border: 3px solid #FF7A00; padding: 8px 8px 10px; opacity: 1;
  box-shadow: none; animation: lamp 1.8s ease-in-out infinite; }
.cm.now b { color: var(--amber-ink); }
.cm.now > span { color: var(--ink); font-weight: 700; }
.cm.now em { position: static; order: -1; align-self: flex-start; background: none; padding: 0; color: #FF7A00; font-size: 11.5px; font-weight: 900; letter-spacing: .08em; }
@keyframes lamp {
  0%, 100% { border-color: #FF7A00; box-shadow: 0 0 0 3px rgba(255,122,0,.18), 0 0 16px rgba(255,122,0,.35); }
  50% { border-color: #F2C9A0; box-shadow: 0 0 0 0 rgba(255,122,0,0); }
}
@media (prefers-reduced-motion: reduce) { .cm.now { animation: none; } }

/* 예시 사진(웹 무료 이미지) 표시 — 매장 실사진으로 바꾸면 사라진다 */
.ref-tag { position: absolute; left: 8px; bottom: 8px; z-index: 2; background: rgba(22,38,27,.62); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: .02em; pointer-events: none; }
.card .ph .ref-tag { bottom: 10px; }
.d-ph .ref-tag { font-size: 12px; left: 12px; bottom: 12px; }
/* 칠판 — 실제 칠판 표면 사진(지운 자국 그대로) */
.bc-frame::after { background: #1B211E url(assets/board-surface.jpg) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.55); }

/* ═════════ 12차: 장보기 머리 줄이기 · 검색 · 주문서 요약 · 시각 버튼 · 손님 직접 · 큰 글씨 ═════════ */
@media (max-width: 640px) {
  .shop { padding-top: 18px; }
  .shop-head .cat-strip, .shop-head .how, .shop-head .idx { display: none; }
  .shop-head .h2 { font-size: 26px; }
  .shop-head .type-line { margin-top: 6px; font-size: 14px; }
  .shop-head { margin-bottom: 8px; }
}
.search-pill { flex: none; display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 0 10px 0 9px; height: 38px; }
.search-pill .i { width: 16px; height: 16px; margin: 0; color: var(--green); }
.search-pill input { border: 0; outline: 0; width: 64px; font-size: 15px; background: transparent; transition: width .25s; }
.search-pill input:focus, .search-pill input:not(:placeholder-shown) { width: 120px; }
.search-pill:focus-within { border-color: var(--green); }
.who-card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 0 0 14px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); }
.who-card > .i { width: 22px; height: 22px; color: var(--green); margin: 0; flex: none; }
.who-card div { flex: 1; min-width: 0; } .who-card b { display: block; font-size: 15px; } .who-card span { display: block; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tc { border: 1.5px solid rgba(22,38,27,.28); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14.5px; }
.tc.on { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.so-box { display: flex; gap: 10px; margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: #FFF1E3; border: 1.5px solid rgba(255,122,0,.45); }
.so-box > .i { width: 22px; height: 22px; color: var(--amber-ink); margin: 2px 0 0; flex: none; }
.so-box b { display: block; color: #7A2A05; } .so-box p { margin: 3px 0 8px; font-size: 13.5px; }
.so-btns { display: flex; gap: 6px; flex-wrap: wrap; } .so-btns .btn-s { padding: 8px 12px; height: auto; }
.cust-act { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.cust-act .link-btn { margin: 0; display: inline-flex; align-items: center; } .link-btn.danger { color: var(--red, #B42318); }
.big-btn { border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 8px; height: 32px; padding: 0 8px; font-weight: 800; font-size: 15px; }
.big-btn small { font-size: 11px; margin-left: 1px; }
.big-btn[aria-pressed="true"] { background: #fff; color: var(--green-d); }
html.big body { zoom: 1.14; }
html.big .tag, html.big .badge, html.big .ref-tag { font-size: 12.5px; }

/* ── 13차: PC 옆 장바구니 · 예약 날 ── */
.side-cart { display: none; }
@media (min-width: 1100px) {
  .shop-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .side-cart { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--top) + 70px); max-height: calc(100vh - var(--top) - 100px);
    background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(22,38,27,.08); }
  .side-cart h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; }
  .side-cart h3 b { margin-left: auto; background: var(--orange); color: var(--ink); border-radius: 999px; min-width: 26px; text-align: center; font-size: 13px; padding: 1px 8px; }
  .sc-lines { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 60px; }
  .sc-lines li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
  .sc-n { font-weight: 700; } .sc-n small { display: block; color: var(--ink-3); font-weight: 500; font-size: 12px; }
  .sc-q { grid-row: span 2; display: inline-flex; align-items: center; gap: 6px; align-self: center; }
  .sc-q button { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-weight: 800; cursor: pointer; }
  .sc-q b { min-width: 16px; text-align: center; }
  .sc-p { color: var(--ink-2); font-size: 13px; }
  .sc-lines li.sc-empty { display: flex; gap: 10px; align-items: center; color: var(--ink-3); border: 0; padding: 18px 4px; }
  .sc-lines li.sc-empty .i { width: 30px; height: 30px; flex: none; }
  .sc-sum { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 10px; font-weight: 700; }
  .sc-sum b { font-size: 20px; }
  .sc-hint { margin: 0; font-size: 12.5px; color: var(--amber-ink); min-height: 1em; }
  .side-cart .btn-main { width: 100%; }
  .side-cart .btn-main:disabled { opacity: .45; }
  body[data-view="shop"] .cartbar { display: none !important; }
}

/* ── 표지 영상: 정사각 720px 영상을 PC 넓은 화면에 꽉 채우면 셔터만 크게 뭉개진다 → PC 는 글 옆 액자, 폰은 가게 안이 보이게 ── */
.cover-img { animation: none; transform: none; object-position: 50% 62%; }
@media (min-width: 960px) {
  .cover { background: radial-gradient(120% 90% at 85% 50%, #123d24 0%, var(--deep) 60%); }
  .cover-in { min-height: min(68svh, 600px); justify-content: center; padding-top: 90px; }
  .cover-img { inset: auto; top: 50%; right: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
    width: min(40vw, 470px); height: auto; aspect-ratio: 1; transform: translateY(-50%); object-position: 50% 50%;
    border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
  .cover-veil { background: linear-gradient(90deg, rgba(11,42,24,.55) 0%, rgba(11,42,24,0) 45%); }
  .cover::after { display: none; }
}

/* ── 14차: 장바구니 창 대비 — 페이지와 같은 베이지라 묻혀 보였다 → 흰 판 + 진한 덮개 + 또렷한 선택지 ── */
.sheet { background: rgba(8,22,13,.68); }
.sheet-in { background: #FFFDF9; box-shadow: 0 -18px 50px rgba(0,0,0,.35); }
.sheet-head { background: #fff; }
.sheet-in .f > span:first-child, .sheet-in .f > span#whenLabel, .sheet-in #dayBox > span:first-child { color: var(--ink); font-weight: 800; }
.sheet-in .tc { border-color: rgba(22,38,27,.42); color: var(--ink); }
.sheet-in .tc.on { background: var(--green-d); border-color: var(--green-d); color: #fff; box-shadow: 0 2px 8px rgba(10,74,40,.3); }
.sheet-in .seg label, .sheet-in .seg span { border-color: rgba(22,38,27,.42); }
.sheet-in .line { border-bottom-color: rgba(22,38,27,.16); }
.sheet-in .line .ln b { font-size: 16.5px; }
.sheet-in .line .lq { background: #F3F7F1; }
.sheet-in .hint, .sheet-in .muted-s, .sheet-in .pay-note { color: var(--ink-2); }
.sheet-in .sum { background: #F4EFE4; border: 1px solid rgba(22,38,27,.12); }
.sheet-in input, .sheet-in textarea { background: #fff; border-color: rgba(22,38,27,.35); color: var(--ink); }
.pay-hint { display: block; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
/* 홈페이지 QR (바닥) */
.foot-qr { display: flex; gap: 16px; align-items: center; margin: 4px 0 18px; }
.foot-qr img { width: 132px; height: 132px; border-radius: 12px; background: #fff; padding: 6px; flex: none; }
.foot-qr p { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.55; }
.foot-qr p b { display: block; color: #fff; font-size: 17px; margin-bottom: 2px; }
@media (max-width: 560px) { .foot-qr img { width: 104px; height: 104px; } }

/* ── 15차: 내 주문 진행 카드 (홈 · 장보기 맨 위) ── */
.track-slot:empty { display: none; }
.track-slot { display: grid; gap: 12px; margin-top: 18px; margin-bottom: 6px; }
.track { --c: var(--s-new); background: #fff; border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); border-left: 6px solid var(--c);
  border-radius: 16px; padding: 14px 16px 12px; box-shadow: 0 10px 26px rgba(22,38,27,.1); color: var(--ink); }
.track.st-accepted { --c: var(--s-acc); } .track.st-ready { --c: var(--s-ready); } .track.st-out { --c: var(--s-out); }
.track.st-done, .track.st-canceled { --c: var(--s-done); box-shadow: none; }
.track.call { --c: var(--orange); }
.track.changed { animation: tr-pop .7s cubic-bezier(.2,.9,.3,1.3); }
@keyframes tr-pop { 0% { transform: scale(.96); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 60% { transform: scale(1.015); box-shadow: 0 0 0 10px transparent; } }
.tr-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.tr-h b { font-size: 15.5px; }
.tr-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: 999px; padding: 2px 9px 2px 7px; }
.tr-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.track:not(.st-done):not(.st-canceled) .tr-live i { animation: tr-blink 1.4s ease-in-out infinite; }
@keyframes tr-blink { 50% { opacity: .25; } }
.tr-mode { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 13px; }
.tr-mode .i { width: 16px; height: 16px; }
.tr-x { margin-left: auto; border: 0; background: none; color: var(--ink-3); padding: 2px; cursor: pointer; }
.tr-x .i { width: 18px; height: 18px; }
.tr-msg { margin: 8px 0 12px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--c); line-height: 1.4; }
.tr-msg b { color: var(--ink); }
.tr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.tr-steps::before, .tr-steps::after { content: ""; position: absolute; top: 17px; left: calc(50% / var(--n)); height: 4px; border-radius: 2px; }
.tr-steps::before { right: calc(50% / var(--n)); background: #E7E2D6; }
.tr-steps::after { width: calc((100% - 100% / var(--n)) * var(--at) / (var(--n) - 1)); background: var(--c); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.tr-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.tr-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #F1EDE3; color: #A7A99B; border: 2px solid #fff; }
.tr-dot .i { width: 19px; height: 19px; margin: 0; }
.tr-steps li.past .tr-dot { background: var(--c); color: #fff; }
.tr-steps li.now .tr-dot { background: var(--c); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); }
.track:not(.st-done) .tr-steps li.now .tr-dot { animation: tr-ring 1.8s ease-out infinite; }
@keyframes tr-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.tr-steps b { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.tr-steps li.now b { color: var(--ink); font-weight: 900; }
.tr-steps li.past b { color: var(--ink-2); }
.tr-steps small { font-size: 11px; color: var(--ink-3); min-height: 1em; font-variant-numeric: tabular-nums; }
.tr-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed rgba(22,38,27,.15); font-size: 13px; color: var(--ink-2); }
.tr-more { border: 0; background: none; font-weight: 800; color: var(--green-d); font-size: 14px; cursor: pointer; white-space: nowrap; }
@media (max-width: 420px) { .tr-dot { width: 32px; height: 32px; } .tr-steps::before, .tr-steps::after { top: 14px; } .tr-steps b { font-size: 11.5px; } .tr-msg { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .track, .tr-dot, .tr-live i { animation: none !important; } }

/* ── 매장 전화 — 잘 보이게 (머리 · 표지 · 바닥) ── */
.tel-top { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--orange); color: var(--ink); font-weight: 900; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(255,122,0,.35); }
.tel-top .i { width: 18px; height: 18px; margin: 0; }
@media (max-width: 760px) { .tel-top { width: 40px; padding: 0; justify-content: center; } .tel-top .tel-num { display: none; } }
.cover-tel { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 18px 10px 12px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.28); color: #fff; text-decoration: none; width: fit-content; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-up .8s .75s cubic-bezier(.2,.75,.2,1) both; }
.cover-tel .i { width: 34px; height: 34px; padding: 8px; margin: 0; border-radius: 50%; background: var(--orange); color: var(--ink); }
.cover-tel span { font-size: 13.5px; color: rgba(255,255,255,.82); }
.cover-tel b { font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.foot-tel { margin: 0 0 10px !important; }
.foot-tel a { color: #fff; font-size: 22px; font-weight: 900; text-decoration: none; letter-spacing: .02em; }
#fPhone a { color: inherit; font-weight: 800; }
@media (max-width: 520px) { .top .lookup { display: none; } .big-btn { white-space: nowrap; } }