/* 디저트나우 홈페이지 — 한 파일 디자인 체계.
   색은 앱 src/ui/theme.ts 와 같은 값(docs/codex/00-common.md 「디자인 토큰」).
   로고는 /brand/ 한 곳: 모든 페이지가 /brand/logo.svg · /brand/symbol.svg 를 부른다 — 파일만 바꾸면 다 바뀐다. */

:root {
  color-scheme: light;
  /* 색 */
  --primary: #C2255C;
  --primary-dark: #9C1C49;
  --soft: #FDF2F6;
  --pink-line: #F9A8C6;
  --ink: #1C1917;
  --sub: #57534E;
  --mute: #78716C;
  --line: #E7E5E4;
  --line-strong: #D6D3D1;
  --ground: #F5F5F4;
  --surface: #FFFFFF;
  --stone-soft: #F0EFEE;
  --stock-in: #15803D;
  --stock-in-soft: #DCFCE7;
  --stock-low: #B45309;
  --stock-low-soft: #FDE2C8;
  --butter: #F2C14E;
  --butter-soft: #FFF6D6;

  /* 로고(한 곳) */
  --logo: url("/brand/logo.svg");
  --symbol: url("/brand/symbol.svg");

  /* 글꼴 */
  --font-body: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Jua", "IBM Plex Sans KR", -apple-system, "Apple SD Gothic Neo", sans-serif;

  /* 4px 간격 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

  /* 모서리 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px;

  /* 그림자 */
  --sh-1: 0 1px 2px rgba(28, 25, 23, .06), 0 1px 1px rgba(28, 25, 23, .04);
  --sh-2: 0 6px 16px -6px rgba(28, 25, 23, .12), 0 2px 4px rgba(28, 25, 23, .04);
  --sh-3: 0 24px 48px -20px rgba(156, 28, 73, .28), 0 8px 16px -8px rgba(28, 25, 23, .10);

  --wrap: 1120px;
  --head-h: 60px; /* 머리띠 높이 — 첫 화면 위 여백 · 앵커 이동 여백이 이 값을 따른다 */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + var(--s4)); }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font: 400 16px/1.65 var(--font-body); letter-spacing: -.01em;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.3; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--pink-line); outline-offset: 2px; border-radius: var(--r-sm); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 600; color: var(--primary);
  background: var(--soft); border: 1px solid #FBD5E3; border-radius: var(--r-full);
  padding: var(--s1) var(--s3);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 머리 ─────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(231, 229, 228, .7);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); gap: var(--s4); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 32px; width: auto; }
.site-nav { display: none; gap: var(--s1); }
.site-nav a { color: var(--sub); text-decoration: none; font-size: 15px; font-weight: 500; padding: var(--s2) var(--s3); border-radius: var(--r-full); transition: background .2s, color .2s; }
.site-nav a:hover { background: var(--ground); color: var(--ink); }
.head-cta { font-size: 14px; }

/* ── 버튼 ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-md);
  font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer; border: 0;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(194, 37, 92, .55); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--ground); }
.btn-sm { min-height: 40px; padding: 0 var(--s4); font-size: 14px; border-radius: var(--r-full); }

/* 스토어 배지 */
.stores { display: flex; flex-wrap: wrap; gap: var(--s3); }
.store {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-width: 168px; height: 56px; padding: 0 var(--s5) 0 var(--s4);
  background: var(--ink); color: #fff; border-radius: var(--r-md); text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.store:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: 11px; opacity: .72; font-weight: 500; }
.store b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.store[aria-disabled="true"] { cursor: default; }
.store-note { margin-top: var(--s3); font-size: 13px; color: var(--mute); }

/* ── 첫 화면 ─────────────────────── */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--soft) 0%, #FFF8FA 60%, var(--surface) 100%); }
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0;
}
.hero::before { width: 420px; height: 420px; right: -120px; top: -80px; background: #F9C9DB; opacity: .8; }
.hero::after { width: 360px; height: 360px; left: -160px; bottom: -120px; background: var(--butter-soft); opacity: .9; }
.hero .wrap { position: relative; z-index: 1; display: grid; gap: var(--s12); padding-top: max(var(--s12), calc(var(--head-h) - var(--s3))); padding-bottom: var(--s16); }
.hero h1 { font-size: clamp(36px, 9vw, 64px); line-height: 1.15; margin-top: var(--s5); }
.hero h1 em { font-style: normal; color: var(--primary); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .26em; z-index: -1;
  background: var(--butter); opacity: .55; border-radius: var(--r-full);
  transform-origin: left; animation: swipe .9s .3s var(--ease) both;
}
.hero .lead { margin-top: var(--s5); font-size: clamp(16px, 4.2vw, 19px); color: var(--sub); max-width: 32em; }
.hero .stores { margin-top: var(--s8); }
.trend-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: 14px; font-weight: 600; color: var(--ink); box-shadow: var(--sh-1);
}
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .tag { font-size: 11px; font-weight: 700; color: #fff; background: var(--primary); border-radius: var(--r-full); padding: 1px 6px; }

/* 휴대폰 틀 */
.phone {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  border-radius: 40px; padding: 10px; background: #fff;
  box-shadow: var(--sh-3), 0 0 0 1px rgba(28, 25, 23, .06);
}
.phone img { width: 100%; height: auto; border-radius: 30px; aspect-ratio: 520 / 1125; object-fit: cover; background: var(--ground); }
.hero-visual { position: relative; display: flex; justify-content: center; padding: 0 var(--s4); }
.hero-visual .phone { animation: rise .9s var(--ease) both; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: var(--s3);
  background: #fff; border-radius: var(--r-lg); padding: var(--s3) var(--s4);
  box-shadow: var(--sh-2), 0 0 0 1px rgba(28, 25, 23, .04);
  font-size: 13px; line-height: 1.4; max-width: 230px;
  animation: bob 5s ease-in-out infinite;
}
.float-card b { display: block; font-size: 14px; }
.float-card .ico { flex: none; width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 18px; }
.float-card.a { left: -4px; top: 42%; } /* 휴대폰 화면 위쪽(검색 · 칩 줄)을 가리지 않게 지도 높이에 */
.float-card.b { right: -4px; bottom: 16%; animation-delay: -2.5s; }

/* 재고 표시 */
.stock { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-full); font-size: 13px; font-weight: 700; white-space: nowrap; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock.in { color: var(--stock-in); background: var(--stock-in-soft); }
.stock.low { color: var(--stock-low); background: var(--stock-low-soft); }
.stock.out { color: var(--mute); background: var(--stone-soft); }
.stock.unknown { color: var(--mute); background: transparent; border: 1.5px dashed var(--line-strong); }

/* ── 구역 ─────────────────────────── */
.section { padding: var(--s20) 0; }
.section.tint { background: var(--ground); }
.section.rose { background: var(--soft); }
.sec-head { max-width: 640px; margin-bottom: var(--s10); }
.sec-head h2 { font-size: clamp(28px, 6.4vw, 40px); margin-top: var(--s3); }
.sec-head p { margin-top: var(--s3); color: var(--sub); font-size: 17px; }

/* 기능 카드 */
.features { display: grid; gap: var(--s4); }
.feature {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: var(--s6); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #F3D2DF; }
.feature .icon {
  width: 48px; height: 48px; border-radius: var(--r-lg); display: grid; place-items: center;
  background: var(--soft); color: var(--primary); margin-bottom: var(--s4);
}
.feature .icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 19px; }
.feature p { margin-top: var(--s2); color: var(--sub); font-size: 15px; }
.feature .demo { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }

/* 사용법 단계 */
.steps { display: grid; gap: var(--s4); counter-reset: step; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); align-items: start; padding: var(--s5); background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--line); }
.step::before {
  counter-increment: step; content: counter(step);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font: 400 22px/1 var(--font-display);
}
.step h3 { font-size: 18px; }
.step p { margin-top: var(--s1); color: var(--sub); font-size: 15px; }

/* 화면 모음 */
.shots { display: flex; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s2) var(--s5) var(--s6); margin: 0 calc(var(--s5) * -1); scrollbar-width: thin; }
.shot { flex: none; width: 220px; margin: 0; scroll-snap-align: center; }
.shot .phone { border-radius: 32px; padding: 8px; box-shadow: var(--sh-2), 0 0 0 1px rgba(28, 25, 23, .06); }
.shot .phone img { border-radius: 24px; }
.shot figcaption { margin-top: var(--s3); text-align: center; font-size: 14px; font-weight: 600; color: var(--sub); }

/* 사장님 · 도매 */
.split { display: grid; gap: var(--s10); align-items: center; }
.points { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s3); }
.points li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); align-items: start; }
.points li::before {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.points b { display: block; font-size: 17px; }
.points span { color: var(--sub); font-size: 15px; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }

.owner-card {
  background: var(--surface); border-radius: var(--r-2xl); padding: var(--s6); box-shadow: var(--sh-3);
  max-width: 420px; width: 100%; margin: 0 auto;
}
.owner-card .who { font-size: 13px; font-weight: 600; color: var(--primary); }
.owner-card h3 { font-size: 22px; margin-top: var(--s1); }
.owner-card .stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s5); }
.owner-card .stat { background: var(--ground); border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.owner-card .stat small { display: block; font-size: 12px; color: var(--sub); }
.owner-card .stat b { font: 400 28px/1.2 var(--font-display); color: var(--primary); }
.owner-card .stat:last-child b { color: var(--ink); }
.owner-card .row { margin-top: var(--s5); }
.owner-card .row-head { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; }
.owner-card .row-head small { font-weight: 400; color: var(--mute); font-size: 12px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s2); }
.seg span { height: 48px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.seg .on-in { background: var(--stock-in); border-color: var(--stock-in); color: #fff; }
.owner-card .send { margin-top: var(--s5); width: 100%; }

.wholesale-card { background: var(--ink); color: #fff; border-radius: var(--r-2xl); padding: var(--s8) var(--s6); position: relative; overflow: hidden; }
.wholesale-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--primary); opacity: .35; filter: blur(30px); }
.wholesale-card .tag { font-size: 12px; font-weight: 700; color: var(--pink-line); }
.wholesale-card h3 { font-size: 22px; margin-top: var(--s2); line-height: 1.4; position: relative; z-index: 1; }
.kinds { display: grid; gap: var(--s3); margin-top: var(--s6); position: relative; z-index: 1; }
.kind { display: flex; gap: var(--s3); align-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.kind .em { font-size: 22px; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255, 255, 255, .1); flex: none; }
.kind b { display: block; font-size: 15px; }
.kind small { color: #D6D3D1; font-size: 13px; }
.pay-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); position: relative; z-index: 1; }
.pay-tags span { font-size: 13px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-full); padding: var(--s1) var(--s3); }

/* FAQ */
.faq { display: grid; gap: var(--s3); max-width: 760px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: #F3D2DF; box-shadow: var(--sh-1); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s4) var(--s5); font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ground); display: grid; place-items: center; font-size: 18px; color: var(--sub); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--soft); color: var(--primary); }
.faq details p { padding: 0 var(--s5) var(--s5); color: var(--sub); font-size: 15px; }

/* 문의 */
.contact-box { display: grid; gap: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s8) var(--s6); }
.contact-box h2 { font-size: clamp(24px, 5.5vw, 32px); }
.contact-box p { color: var(--sub); }
.contact-box .mail { font-size: 18px; font-weight: 700; }
.contact-box > * { min-width: 0; }
.contact-box .mail { max-width: 100%; min-width: 0; padding: var(--s3) var(--s4); line-height: 1.5; }

/* 마지막 권유 */
.final { text-align: center; background: var(--primary); color: #fff; border-radius: var(--r-2xl); padding: var(--s12) var(--s6); position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .18), transparent 40%), radial-gradient(circle at 90% 90%, rgba(242, 193, 78, .35), transparent 45%); }
.final > * { position: relative; }
.final img.sym { width: 72px; height: 72px; margin: 0 auto var(--s4); border-radius: 18px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .35); }
.final h2 { font-size: clamp(28px, 6.4vw, 40px); }
.final p { margin-top: var(--s2); opacity: .9; }
.final .stores { justify-content: center; margin-top: var(--s6); }
.final .store { background: #fff; color: var(--ink); }

/* ── 바닥 ─────────────────────────── */
.site-foot { border-top: 1px solid var(--line); padding: var(--s12) 0 var(--s16); color: var(--mute); font-size: 14px; background: var(--surface); }
.site-foot .logo { height: 28px; width: auto; margin-bottom: var(--s5); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
.site-foot nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.site-foot nav a:hover { color: var(--primary); }
.site-foot .biz { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 13px; line-height: 1.7; }
.site-foot .copy { margin-top: var(--s4); font-size: 12px; }

/* ── 매장 페이지 ─────────────────── */
.store-page { background: var(--ground); min-height: 100vh; }
.store-main { max-width: 560px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s16); }
.store-hero { background: var(--surface); border-radius: var(--r-2xl); padding: var(--s6); box-shadow: var(--sh-1); }
.store-hero .kicker { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.badge-verify { font-size: 12px; font-weight: 700; padding: 2px var(--s2); border-radius: var(--r-full); background: var(--soft); color: var(--primary); }
.badge-verify.unverified { background: transparent; border: 1.5px dashed var(--line-strong); color: var(--mute); }
.store-hero h1 { font-size: 28px; margin-top: var(--s3); }
.store-hero .addr { margin-top: var(--s2); color: var(--sub); font-size: 15px; }
.store-hero .meta { margin-top: var(--s2); color: var(--mute); font-size: 14px; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.store-hero .actions { display: grid; gap: var(--s2); margin-top: var(--s5); }
.stock-list { margin-top: var(--s4); background: var(--surface); border-radius: var(--r-2xl); padding: var(--s2) var(--s5); box-shadow: var(--sh-1); }
.stock-list h2 { font-size: 16px; padding: var(--s4) 0 var(--s2); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: space-between; align-items: baseline; }
.stock-list h2 small { font-weight: 400; font-size: 12px; color: var(--mute); }
.stock-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.stock-row > div { min-width: 0; }
.stock-row > .stock { flex-shrink: 0; }
.stock-row b { font-size: 16px; display: block; }
.stock-row small { color: var(--mute); font-size: 13px; }
.store-tip { margin-top: var(--s4); font-size: 13px; color: var(--mute); text-align: center; }
.empty { text-align: center; background: var(--surface); border-radius: var(--r-2xl); padding: var(--s12) var(--s6); box-shadow: var(--sh-1); }
.empty img { width: 72px; height: 72px; margin: 0 auto var(--s4); border-radius: 18px; }
.empty h1 { font-size: 22px; }
.empty p { margin-top: var(--s2); color: var(--sub); }
.empty .stores, .empty .actions { justify-content: center; margin-top: var(--s6); }
.pick { display: grid; gap: var(--s2); margin-top: var(--s5); text-align: left; }
.pick a { display: block; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); }
.pick a:hover { border-color: var(--pink-line); background: var(--soft); }
.pick small { display: block; color: var(--mute); font-size: 13px; }
.skeleton { border-radius: var(--r-md); background: linear-gradient(90deg, var(--stone-soft) 25%, #F7F6F5 50%, var(--stone-soft) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.store-download { margin-top: var(--s6); text-align: center; }
.store-download p { font-size: 14px; color: var(--sub); margin-bottom: var(--s3); }
.store-download .stores { justify-content: center; }

/* ── 약관 ─────────────────────────── */
.legal { max-width: 760px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s16); font-size: 15px; line-height: 1.75; }
.legal header .back { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; font-weight: 600; font-size: 14px; }
.legal header .back img { height: 24px; width: auto; }
.legal h1 { font-size: clamp(24px, 6vw, 30px); margin: var(--s6) 0 var(--s2); }
.legal .eff { color: var(--mute); font-size: 14px; margin: 0 0 var(--s2); }
.legal .eff:last-of-type { margin-bottom: var(--s8); }
.legal h2 { font-size: 18px; margin: var(--s10) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.legal p, .legal li { color: #3F3A36; }
.legal p + p { margin-top: var(--s3); }
.legal ul, .legal ol { padding-left: 22px; margin: var(--s2) 0; }
.legal li { margin: var(--s1) 0; }
.legal table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: 14px; display: block; overflow-x: auto; }
.legal th, .legal td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal th { background: var(--soft); font-weight: 700; white-space: nowrap; }
.legal .toc { background: var(--ground); border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin-bottom: var(--s6); }
.legal .toc a { text-decoration: none; }
.legal footer { margin-top: var(--s12); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; }

/* ── 움직임 ─────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.reveal { animation: rise .7s var(--ease) both; }
.reveal.d1 { animation-delay: .08s; } .reveal.d2 { animation-delay: .16s; } .reveal.d3 { animation-delay: .24s; }
@supports (animation-timeline: view()) {
  .on-scroll { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 넓은 화면 ─────────────────────── */
@media (min-width: 640px) {
  .wrap { padding: 0 var(--s8); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .shots { margin: 0 calc(var(--s8) * -1); padding-left: var(--s8); padding-right: var(--s8); }
  .shot { width: 240px; }
  .contact-box { grid-template-columns: 1fr auto; align-items: center; padding: var(--s10); }
  .store-hero .actions { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .site-nav { display: flex; }
  .hero .wrap { grid-template-columns: 1.1fr .9fr; align-items: center; padding-top: max(var(--s16), calc(var(--head-h) + var(--s4))); padding-bottom: var(--s24); }
  .features { grid-template-columns: repeat(3, 1fr); }
  .feature.wide { grid-column: span 2; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr 1fr; gap: var(--s16); }
  .split.flip > :first-child { order: 2; }
  .section { padding: var(--s24) 0; }
  .shots { justify-content: center; overflow: visible; flex-wrap: wrap; }
  .float-card.a { left: 0; }
  .float-card.b { right: 0; }
}


/* ── 이야기: 앱 온보딩 네 장면 ─────────────
   그림 · 문구는 design/source/Onboarding*.html 그대로. 장면이 화면에 들어오면(js/site.js 가 .is-in)
   그림 속 움직임이 그때 시작된다 — 들어오기 전엔 멈춰 둔다. */
.story { padding-bottom: var(--s16); }
.story-head { margin-bottom: var(--s12); }
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s16); }
.beat { display: grid; gap: var(--s6); align-items: center; }

.scene {
  position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-2xl);
  display: grid; place-items: center; padding: var(--s6) var(--s4);
  aspect-ratio: 1 / .92; isolation: isolate;
}
.scene::after { /* 바닥 쪽 은은한 빛 */
  content: ""; position: absolute; inset: auto -10% -40% -10%; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), transparent); pointer-events: none;
}
.scene svg { width: 100%; height: auto; max-width: 380px; font-family: var(--font-body); overflow: visible; }
.scene-1 { background: #FDF2F6; }
.scene-2 { background: #FEF3E2; }
.scene-3 { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.scene-4 { background: #ECFDF5; }
.scene-2 svg { max-width: 400px; }

.copy { max-width: 30em; }
.kicker { display: flex; align-items: center; gap: var(--s3); font-size: 14px; font-weight: 600; color: var(--sub); }
.kicker .num { font: 400 15px/1 var(--font-display); color: var(--accent); letter-spacing: .02em; }
.pager { display: inline-flex; gap: 5px; }
.pager i { width: 6px; height: 6px; border-radius: 3px; background: var(--dot); transition: width .5s var(--ease), background .5s; }
.beat[data-beat="1"] .pager i:nth-child(1), .beat[data-beat="2"] .pager i:nth-child(2),
.beat[data-beat="3"] .pager i:nth-child(3), .beat[data-beat="4"] .pager i:nth-child(4) { width: 22px; background: var(--primary); }
.copy h3 { font-size: clamp(28px, 7.4vw, 42px); line-height: 1.25; margin-top: var(--s4); letter-spacing: -.015em; }
.copy .body { margin-top: var(--s3); font-size: clamp(17px, 4.4vw, 19px); color: var(--sub); }
.mark { position: relative; z-index: 0; white-space: nowrap; }
.mark::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: .08em; height: .34em; z-index: -1;
  background: #F9A8C6; border-radius: 3px; transform-origin: left; transform: scaleX(1);
}
.in-app { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.in-app .label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--primary); margin-bottom: var(--s2); }
.in-app p { font-size: 15px; color: var(--sub); line-height: 1.7; }
.in-app .demo { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* 장면 3: 지도 레이더(원본은 290px 고정 — 그대로 두고 좁은 화면에서만 줄인다) */
.radar { position: relative; width: 290px; height: 290px; font-family: var(--font-body); }
.radar-bg { position: absolute; inset: 10px; border-radius: 50%; background: #FDF2F6; }
.ob-orbit { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed #F9A8C6; }
.me { position: absolute; left: 135px; top: 132px; width: 20px; height: 20px; }
.me span { position: absolute; inset: 0; border-radius: 50%; background: #2563EB; }
.me .dot { border: 4px solid #fff; }
.ob-pin { position: absolute; }
.pin { padding: 8px 12px; border-radius: 18px; font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.pin.in { background: #15803D; color: #fff; box-shadow: 0 6px 14px rgba(21, 128, 61, .3); }
.pin.low { background: #B45309; color: #fff; box-shadow: 0 6px 14px rgba(180, 83, 9, .3); }
.ob-flipper { border: 1px solid #A8A29E; background: #fff; color: #78716C; }
.ob-flipper span { text-decoration: line-through; text-decoration-color: #78716C; }
.ob-toast {
  position: absolute; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.ob-bell { display: inline-flex; }
.ob-bell svg { width: 16px; height: 16px; }

/* 장면 그림 움직임 — 원본 키프레임 그대로 */
@keyframes o1-drop { 0% { transform: translateY(-320px); opacity: 0 } 55% { transform: translateY(10px); opacity: 1 } 75% { transform: translateY(-6px) } 100% { transform: translateY(0); opacity: 1 } }
@keyframes o1-pop { 0% { transform: scale(0); opacity: 0 } 60% { transform: scale(1.15); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes o1-twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: 0 } 50% { transform: scale(1) rotate(45deg); opacity: 1 } }
@keyframes o-fade { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ch-bounce { 0%, 100% { transform: translateY(0) scale(1, 1) } 45% { transform: translateY(-10px) scale(.97, 1.03) } 90% { transform: translateY(0) scale(1.04, .96) } }
@keyframes ch-squish { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.07, .93) } }
@keyframes ch-tilt { 0%, 100% { transform: rotate(-5deg) } 50% { transform: rotate(5deg) } }
@keyframes ch-wave { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-28deg) } }
@keyframes o2-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes o2-sway { 0%, 100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }
@keyframes o2-spin { to { transform: rotate(360deg) } }
@keyframes o2-sign { 0%, 30% { transform: translateY(-70px) rotate(0); opacity: 0 } 38% { transform: translateY(0) rotate(14deg); opacity: 1 } 46% { transform: rotate(-10deg) } 54% { transform: rotate(6deg) } 62%, 90% { transform: rotate(0); opacity: 1 } 100% { opacity: 0 } }
@keyframes o2-gasp { 0%, 36% { transform: scale(0); opacity: 0 } 44% { transform: scale(1.2); opacity: 1 } 52%, 90% { transform: scale(1); opacity: 1 } 100% { opacity: 0 } }
@keyframes o2-drip { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(14px); opacity: 0 } }
@keyframes o2-bubble { 0%, 100% { transform: scale(.96) } 50% { transform: scale(1.04) } }
@keyframes ob-pop { 0% { transform: scale(0) translateY(20px); opacity: 0 } 60% { transform: scale(1.15) translateY(-4px); opacity: 1 } 100% { transform: scale(1) translateY(0); opacity: 1 } }
@keyframes ob-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes ob-pulse { 0% { transform: scale(1); opacity: .55 } 100% { transform: scale(3.2); opacity: 0 } }
@keyframes ob-toast { 0%, 8% { transform: translateY(-16px) scale(.9); opacity: 0 } 14%, 72% { transform: translateY(0) scale(1); opacity: 1 } 80%, 100% { transform: translateY(-10px) scale(.95); opacity: 0 } }
@keyframes ob-flip { 0%, 40% { background: #FFFFFF; color: #78716C; border-color: #A8A29E } 50%, 100% { background: #15803D; color: #FFFFFF; border-color: #15803D } }
@keyframes ob-strike { 0%, 40% { text-decoration-color: #78716C } 50%, 100% { text-decoration-color: transparent } }
@keyframes ob-wobble { 0%, 100% { transform: rotate(-8deg) } 50% { transform: rotate(8deg) } }
@keyframes o4-bite { 0%, 100% { transform: translate(0, 0) rotate(0) } 40%, 55% { transform: translate(-26px, -14px) rotate(-12deg) } }
@keyframes o4-chew { 0%, 35% { transform: scaleY(1) } 45% { transform: scaleY(.25) } 55% { transform: scaleY(1) } 65% { transform: scaleY(.4) } 75%, 100% { transform: scaleY(1) } }
@keyframes o4-head { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-4deg) } 75% { transform: rotate(3deg) } }
@keyframes o4-heart { 0% { transform: translateY(0) scale(.4); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(-110px) scale(1.1); opacity: 0 } }
@keyframes o4-crumb { 0%, 45% { transform: translateY(0); opacity: 0 } 50% { opacity: 1 } 100% { transform: translateY(60px); opacity: 0 } }
@keyframes o4-yum { 0%, 40% { transform: scale(0); opacity: 0 } 50% { transform: scale(1.2); opacity: 1 } 60%, 85% { transform: scale(1); opacity: 1 } 100% { transform: scale(.8); opacity: 0 } }

/* 바탕 상태는 「다 보이는 그림」(움직임 줄이기 · 스크립트 없음에서도 온전). 움직임은 fill 로 첫 장면을 잡는다. */
.o1-drop { transform-box: fill-box; transform-origin: center bottom; animation: o1-drop .8s cubic-bezier(.3, 1.4, .5, 1) both; }
.o1-d1 { animation-delay: .2s; } .o1-d2 { animation-delay: .55s; } .o1-d3 { animation-delay: .9s; }
.o1-pop { transform-box: fill-box; transform-origin: left bottom; animation: o1-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.o1-star { transform-box: fill-box; transform-origin: center; animation: o1-twinkle 1.8s ease-in-out infinite both; }
.o1-tag { animation: o-fade .5s ease-out both; }
.ch-idle { transform-box: fill-box; transform-origin: 50% 100%; }
.ch-bounce { animation: ch-bounce 1.6s ease-in-out infinite; }
.ch-squish { animation: ch-squish 1.8s ease-in-out infinite; }
.ch-tilt { animation: ch-tilt 2.2s ease-in-out infinite; }
.ch-wave, .ch-wave2 { transform-box: fill-box; transform-origin: 100% 100%; animation: ch-wave .7s ease-in-out infinite; }
.ch-wave2 { transform-origin: 0% 100%; }
.o2-p { transform-box: fill-box; transform-origin: center bottom; animation: o2-bob 1.6s ease-in-out infinite; }
.o2-sway { transform-box: fill-box; transform-origin: center bottom; animation: o2-sway 2.4s ease-in-out infinite; }
.o2-hand { transform-box: fill-box; transform-origin: 50% 100%; animation: o2-spin 2s linear infinite; }
.o2-hand2 { transform-box: fill-box; transform-origin: 50% 100%; animation: o2-spin 24s linear infinite; }
.o2-sign { transform-box: fill-box; transform-origin: 50% 0%; animation: o2-sign 5s ease-in-out infinite; }
.o2-gasp { transform-box: fill-box; transform-origin: center; animation: o2-gasp 5s ease-out infinite; }
.o2-drip { animation: o2-drip 1.4s ease-in infinite; }
.o2-bubble { transform-box: fill-box; transform-origin: left bottom; animation: o2-bubble 1.8s ease-in-out infinite; }
.ob-pin { animation: ob-pop .6s cubic-bezier(.3, 1.6, .5, 1) both, ob-float 3s ease-in-out infinite; }
.ob-p1 { animation-delay: .3s, 1s; } .ob-p2 { animation-delay: .55s, 1.4s; } .ob-p3 { animation-delay: .8s, 1.8s; }
.ob-p3 .ob-flipper { animation: ob-flip 4.8s ease-in-out 1.6s infinite alternate; }
.ob-p3 .ob-flipper span { animation: ob-strike 4.8s ease-in-out 1.6s infinite alternate; }
.ob-ring { animation: ob-pulse 2s ease-out infinite; }
.ob-ring2 { animation-delay: 1s; }
.ob-orbit { animation: o2-spin 18s linear infinite; }
.ob-toast { animation: ob-toast 4.8s ease-in-out 1.4s infinite both; }
.ob-bell { animation: ob-wobble .5s ease-in-out infinite; }
.o4-treat { transform-box: fill-box; transform-origin: center; animation: o4-bite 2.4s ease-in-out infinite; }
.o4-mouth { transform-box: fill-box; transform-origin: center; animation: o4-chew 2.4s ease-in-out infinite; }
.o4-head { transform-box: fill-box; transform-origin: 50% 90%; animation: o4-head 2.4s ease-in-out infinite; }
.o4-heart { transform-box: fill-box; transform-origin: center; animation: o4-heart 2.8s ease-out infinite both; }
.o4-crumb { animation: o4-crumb 2.4s ease-in infinite both; }
.o4-yum { transform-box: fill-box; transform-origin: left bottom; animation: o4-yum 2.4s ease-out infinite both; }
.o4-sun { transform-box: fill-box; transform-origin: center; animation: o2-spin 30s linear infinite; }

/* 스크립트가 있으면: 화면에 들어오기 전엔 그림을 멈추고 글을 숨겨 두었다가, 들어오면 차례로 */
.js .beat:not(.is-in) .scene *, .js .beat:not(.is-in) .scene *::after { animation-play-state: paused; }
.js .beat .scene { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .beat .copy > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .beat.is-in .scene, .js .beat.is-in .copy > * { opacity: 1; transform: none; }
.js .beat.is-in .copy > :nth-child(2) { transition-delay: .12s; }
.js .beat.is-in .copy > :nth-child(3) { transition-delay: .22s; }
.js .beat.is-in .copy > :nth-child(4) { transition-delay: .34s; }
.js .beat .mark::after { transform: scaleX(0); transition: transform .6s var(--ease) .7s; }
.js .beat.is-in .mark::after { transform: scaleX(1); }
.js .beat:not(.is-in) .pager i { width: 6px !important; }

/* ── 온라인 주문 · 도매 주문 순서 ───────── */
.order { background: linear-gradient(180deg, var(--surface) 0%, #FFF8EC 100%); }
.order-top { display: grid; gap: var(--s6); margin-bottom: var(--s10); }
.order-top .sec-head { margin-bottom: 0; }
.order-cta-label { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: var(--s3); }
.flow {
  list-style: none; margin: 0 calc(var(--s5) * -1); padding: var(--s2) var(--s5) var(--s4);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s5); scrollbar-width: thin;
}
.flow-step { scroll-snap-align: start; position: relative; }
.flow-step .mock {
  height: 200px; border-radius: var(--r-xl); background: #FEF3E2; display: grid; place-items: center; padding: var(--s4);
  margin-bottom: var(--s4); overflow: hidden;
}
.flow-ws .flow-step .mock { background: var(--ground); }
.flow-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff; font: 400 15px/1 var(--font-display); margin-bottom: var(--s2);
}
.flow-step h3 { font-size: 18px; }
.flow-step p { margin-top: var(--s1); color: var(--sub); font-size: 15px; line-height: 1.6; }
.order-aside { margin-top: var(--s6); font-size: 15px; color: var(--sub); }
.order-aside a { font-weight: 700; }

/* 작은 화면 조각(앱 화면 03 · 07 · 08 · 09 를 줄여 옮긴 것) */
.m-card {
  width: 100%; max-width: 236px; background: #fff; border-radius: var(--r-lg); padding: 14px 16px;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(28, 25, 23, .04); display: grid; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--ink);
}
.m-card b { font-size: 14px; }
.m-card small { color: var(--mute); font-size: 11.5px; }
.m-dark { background: var(--ink); color: #fff; }
.m-dark small { color: rgba(255, 255, 255, .7); }
.m-kicker { color: var(--pink-line); font-size: 11.5px; font-weight: 700; }
.m-badge { justify-self: start; background: var(--soft); color: var(--primary); font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.m-title { font-size: 30px !important; line-height: 1.1; }
.m-tabs { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-bottom: 1px solid var(--line); margin-top: 4px; color: var(--mute); font-weight: 600; }
.m-tabs span { padding: 6px 0; }
.m-tabs .on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.m-btn { justify-self: end; background: var(--primary); color: #fff; font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: 10px; margin-top: 4px; }
.m-label { font-weight: 700; font-size: 12.5px; }
.m-line { color: var(--sub); }
.m-row { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; font-weight: 700; }
.m-row b { color: var(--primary); font-size: 12.5px; }
.m-card:has(.m-row) .m-btn { justify-self: stretch; text-align: center; }
.m-box { font-size: 30px; line-height: 1; justify-self: center; }
.m-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; font-weight: 700; font-size: 11.5px; }
.m-track span { padding-top: 8px; border-top: 3px solid var(--line); color: var(--mute); }
.m-track .done { border-color: var(--stock-in); color: var(--stock-in); }
.m-track .now { border-color: var(--primary); color: var(--primary); }
.m-card:has(.m-track) small { text-align: center; }
.m-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.m-chips span { border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 9px; font-weight: 600; }
.m-chips .on { background: var(--ink); border-color: var(--ink); color: #fff; }
.m-upload { border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 9px; text-align: center; color: var(--sub); font-weight: 600; margin-top: 4px; }
.m-center { justify-items: center; text-align: center; }
.m-ok { width: 40px; height: 40px; border-radius: 50%; background: var(--stock-in); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.m-approved { background: var(--stock-in-soft); color: var(--stock-in); font-weight: 700; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; }
.m-notice { background: #FEF3E2; color: #7C2D12; border-radius: 8px; padding: 6px 8px; font-size: 11px; font-weight: 600; }
.m-stepper { justify-self: end; display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 3px 10px; }
.m-stepper i { font-style: normal; color: var(--sub); font-size: 14px; }
.m-radio { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-weight: 600; }
.m-radio::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--mute); flex: none; box-sizing: border-box; }
.m-radio.on { border: 2px solid var(--ink); }
.m-radio.on::before { border: 4px solid var(--ink); }
.m-check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sub); }
.m-check::before { content: "✓"; width: 16px; height: 16px; border-radius: 4px; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }

.wflow-head { margin: var(--s16) 0 var(--s6); }
.wflow-head h3 { font-size: clamp(24px, 5.6vw, 30px); }
.wflow-head p { margin-top: var(--s2); color: var(--sub); }

/* FAQ: 넓은 화면에선 제목 왼쪽 · 질문 오른쪽 */
.faq-wrap .sec-head p a { font-weight: 700; }

@media (max-width: 374px) {
  .radar { transform: scale(.9); margin: -15px; }
}
@media (max-width: 359px) {
  .radar { transform: scale(.82); margin: -27px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .beat .scene, .js .beat .copy > * { opacity: 1; transform: none; }
  .js .beat .mark::after { transform: scaleX(1); }
}
@media (min-width: 640px) {
  .flow { margin: 0 calc(var(--s8) * -1); padding-left: var(--s8); padding-right: var(--s8); scroll-padding-inline: var(--s8); grid-auto-columns: minmax(260px, 44%); }
}
@media (min-width: 960px) {
  .story { padding-bottom: var(--s20); }
  .story-head { margin-bottom: var(--s16); }
  .beats { gap: var(--s24); }
  .beat { grid-template-columns: 1.05fr .95fr; gap: var(--s16); }
  .beat:nth-child(even) .scene { order: 2; }
  .scene { aspect-ratio: 1 / .86; padding: var(--s10); }
  .copy h3 { margin-top: var(--s5); }
  .order-top { grid-template-columns: 1.3fr 1fr; align-items: end; gap: var(--s12); }
  .flow { margin: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
  .flow-step:not(:last-child)::after { /* 단계 사이 화살표 */
    content: ""; position: absolute; top: 92px; right: calc(var(--s6) * -.5 - 8px); width: 16px; height: 16px; z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s16); align-items: start; }
  .faq-wrap .sec-head { position: sticky; top: calc(var(--head-h) + var(--s8)); margin-bottom: 0; }
  .faq-wrap .faq { max-width: none; }
}
.js .flow .flow-step { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .flow.is-in .flow-step { opacity: 1; transform: none; }
.js .flow.is-in .flow-step:nth-child(2) { transition-delay: .1s; }
.js .flow.is-in .flow-step:nth-child(3) { transition-delay: .2s; }
.js .flow.is-in .flow-step:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .js .flow .flow-step { opacity: 1; transform: none; } }

/* ── 문의 · 신청 폼 ───────────────────── */
[hidden] { display: none !important; }
.apply-mail { margin-top: var(--s4); font-size: 14px; color: var(--mute); }
.apply-mail a { font-weight: 600; }
.apply-box.is-form { grid-template-columns: 1fr; }
.apply-form { display: grid; gap: var(--s5); min-width: 0; }
.f-kinds { border: 0; margin: 0; padding: 0; min-width: 0; }
.f-label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: var(--s2); padding: 0; }
.f-label em, .f-check em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--primary); margin-left: 4px; }
.seg-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.seg-chips label { position: relative; cursor: pointer; }
.seg-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-chips span {
  display: inline-flex; align-items: center; height: 42px; padding: 0 var(--s4); border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--surface); font-size: 15px; font-weight: 600; color: var(--sub);
  transition: background .18s, color .18s, border-color .18s;
}
.seg-chips input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg-chips input:focus-visible + span { outline: 3px solid var(--pink-line); outline-offset: 2px; }
.f-grid { display: grid; gap: var(--s4); }
.f-field { min-width: 0; }
.apply-form input[type="text"], .apply-form input[type="tel"], .apply-form input[type="email"], .apply-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--font-body); letter-spacing: -.01em;
  transition: border-color .18s, box-shadow .18s; -webkit-appearance: none; appearance: none;
}
.apply-form textarea { resize: vertical; min-height: 132px; }
.apply-form input::placeholder, .apply-form textarea::placeholder { color: #A8A29E; }
.apply-form input:focus, .apply-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(194, 37, 92, .14); }
.apply-form [aria-invalid="true"] { border-color: #B91C1C !important; }
.f-err { margin-top: 6px; font-size: 13px; font-weight: 600; color: #B91C1C; }
.f-hint { font-size: 13px; color: var(--mute); margin-top: calc(var(--s2) * -1); }
.f-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.f-count { margin-left: auto; margin-top: 6px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.f-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f-agree { background: var(--ground); border-radius: var(--r-lg); padding: var(--s4); }
.f-check { display: flex; gap: var(--s3); align-items: center; font-size: 15px; font-weight: 600; cursor: pointer; }
.f-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--primary); }
.f-note { margin-top: var(--s2); padding-left: 34px; font-size: 13px; color: var(--sub); line-height: 1.6; }
.f-agree .f-err { padding-left: 34px; }
.f-submit { display: grid; gap: var(--s3); }
.f-submit .btn { width: 100%; min-height: 54px; font-size: 16px; }
.f-submit .btn:disabled { opacity: .6; cursor: progress; }
.f-status { font-size: 14px; font-weight: 600; min-height: 1px; }
.f-status.is-err { color: #B91C1C; }
.f-status.is-ok { color: var(--stock-in); background: var(--stock-in-soft); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
@media (min-width: 640px) {
  .f-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
  .f-wide { grid-column: 1 / -1; }
  .f-submit { grid-template-columns: auto 1fr; align-items: center; }
  .f-submit .btn { width: auto; padding: 0 var(--s10); }
}
@media (min-width: 960px) {
  .apply-box.is-form { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: var(--s12); align-items: start; padding: var(--s12); }
}

/* ── 이름 붙은 조각들(HTML 에 쓰는 클래스는 모두 여기서 정의) ── */
.kicker .name { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.order-cta {
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(231, 229, 228, .8); border-radius: var(--r-xl);
  padding: var(--s5); box-shadow: var(--sh-1);
}
.order-cta .store-note { margin-top: var(--s3); }
.apply-intro { min-width: 0; }
.apply-lead { margin-top: var(--s2); color: var(--sub); }
@media (min-width: 960px) {
  .order-cta { padding: var(--s6); }
  .apply-box.is-form .apply-intro { position: sticky; top: calc(var(--head-h) + var(--s8)); }
}

/* ── 모바일(640px 미만): 소개 글 · 제목 · 버튼은 가운데, 폼 · FAQ · 긴 목록은 왼쪽 정렬 유지 ── */
@media (max-width: 639.98px) {
  .hero .wrap > div:first-child { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .trend-chips, .hero .stores, .order-cta .stores, .cta-row { justify-content: center; }

  .sec-head { text-align: center; margin-left: auto; margin-right: auto; }
  .split > div:first-child { text-align: center; }
  .points { text-align: left; max-width: 440px; margin-left: auto; margin-right: auto; }

  .copy { text-align: center; margin: 0 auto; }
  .kicker { justify-content: center; }
  .in-app .demo { justify-content: center; }

  .order-cta { text-align: center; }
  .flow-step { text-align: center; }
  .flow-step p { max-width: 26em; margin-left: auto; margin-right: auto; }
  .order-aside { text-align: center; }
  .wflow-head { text-align: center; }

  .steps .step { text-align: left; }
  .faq, .faq details p { text-align: left; }

  .contact-box { text-align: center; padding: var(--s8) var(--s5); }
  .contact-box .mail { justify-self: center; }
  .apply-form { text-align: left; }
}

/* ── 넓은 화면 정돈: 그림은 작게 고정, 글과 나란히(장면마다 좌우 번갈아), 글 폭 제한, 장면 하나가 한 화면 안에 ── */
@media (min-width: 640px) and (max-width: 899.98px) {
  .scene { max-width: 480px; width: 100%; margin: 0 auto; }
  .beat .copy { max-width: 36em; margin: 0 auto; }
}
@media (min-width: 900px) {
  .section { padding: var(--s20) 0; } /* 구역 간격 한 가지로 */
  .story { padding-bottom: var(--s20); }
  .story-head { margin-bottom: var(--s12); }
  .beats { gap: var(--s20); }
  .beat { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(48px, 7vw, 96px); align-items: center; }
  .beat:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .beat:nth-child(even) .scene { order: 2; }
  .scene { width: 100%; max-width: 420px; aspect-ratio: 1 / .9; padding: var(--s8); }
  .scene svg { max-width: 340px; }
  .beat .copy { max-width: 28em; }
  .beat:nth-child(even) .copy { justify-self: start; }
  .copy h3 { font-size: clamp(30px, 3.2vw, 40px); margin-top: var(--s4); }
  .copy .body { font-size: 18px; }
  .in-app { margin-top: var(--s5); padding-top: var(--s4); }

  .order-top { margin-bottom: var(--s8); }
  .order-top .sec-head p { max-width: 30em; }
  .flow-step .mock { height: 184px; }
  .flow-step p { max-width: 22em; }
  .wflow-head { margin-top: var(--s12); }
}

/* 넓은 화면 장면 카드: 높이는 그림에 맞춰(아래 이름표가 잘리지 않게) */
@media (min-width: 900px) {
  .scene { aspect-ratio: auto; min-height: 360px; padding: var(--s8) var(--s6); }
  .scene svg { max-width: 320px; }
}

/* ── 좁은 화면 메뉴(☰) ───────────────────── */
.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: calc(var(--s2) * -1);
  border: 0; border-radius: var(--r-full); background: transparent; color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--ground); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative;
  transition: transform .25s var(--ease), background .2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.site-head.is-open .nav-toggle span { background: transparent; }
.site-head.is-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.site-head.is-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 959.98px) {
  .site-head .wrap { gap: var(--s2); }
  .head-cta { margin-left: auto; }
  .site-nav {
    display: flex; flex-direction: column; gap: 2px; position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--s2) var(--s4) var(--s4); background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--line); box-shadow: 0 18px 32px -18px rgba(28, 25, 23, .22);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  .site-nav a { font-size: 17px; font-weight: 600; color: var(--ink); padding: 14px var(--s3); border-radius: var(--r-md); }
  .site-head.is-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (min-width: 960px) { .nav-toggle { display: none; } }

/* W8 플랫폼: 기존 색·서체·간격 토큰을 공유한다. */
.p-head { border-bottom:1px solid var(--line); background:var(--surface); }
.p-head .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); padding-block:var(--s4); }
.p-head form { display:flex; flex:1; min-width:200px; border:2px solid var(--primary); border-radius:var(--r-md); overflow:hidden; }
.p-head input { border:0; min-width:0; width:100%; padding:12px; font:inherit; }
.p-head button { border:0; background:var(--primary); color:white; padding-inline:18px; font:inherit; cursor:pointer; white-space:nowrap; flex:none; }
.p-head nav { display:flex; gap:var(--s4); font-size:14px; }
.p-main { padding-block:var(--s10); }
.p-main h1 { font-size:clamp(28px,5vw,44px); line-height:1.3; margin-bottom:var(--s4); }
.p-main h2 { font-size:22px; margin-bottom:var(--s4); }
.p-main h3 { font-size:17px; margin-top:var(--s6); }
.p-lead { color:var(--sub); max-width:760px; margin-bottom:var(--s6); }
.p-section { margin-block:var(--s10); }
.p-muted { color:var(--mute); font-size:13px; }
.p-chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-block:var(--s4); }
.p-chips a { color:var(--ink); padding:8px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full); text-decoration:none; }
.p-chips a:hover { border-color:var(--primary); background:var(--soft); }
.p-chips small { color:var(--mute); }
.p-store { padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); margin-bottom:var(--s3); }
.p-store:hover { border-color:var(--pink-line); }
.p-store-name { color:var(--ink); font-weight:700; font-size:18px; text-decoration:none; }
.p-store small { display:block; color:var(--mute); margin-top:var(--s2); }
.p-stocks { display:flex; flex-wrap:wrap; gap:var(--s2); margin-block:var(--s3); }
.p-stock { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:var(--r-sm); background:var(--ground); color:var(--mute); font-size:13px; }
.p-stock.in { color:var(--stock-in); background:var(--stock-in-soft); }
.p-stock.low { color:var(--stock-low); background:var(--stock-low-soft); }
.p-ad,.p-buzz { display:inline-block; font-size:12px; border:1px solid var(--pink-line); color:var(--primary); border-radius:6px; padding:2px 6px; vertical-align:middle; }
.p-buzz { margin-left:4px; color:var(--sub); border-color:var(--line); }
.p-promos { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s3); }
.p-promos .p-store { background:var(--soft); border-color:var(--pink-line); }
.p-filters { display:flex; flex-wrap:wrap; gap:var(--s3); padding:var(--s5); background:var(--ground); border-radius:var(--r-lg); margin-block:var(--s5); align-items:end; }
.p-filters label { display:flex; flex:1 1 130px; flex-direction:column; gap:4px; font-size:13px; }
.p-filters select,.p-filters input { border:1px solid var(--line-strong); border-radius:var(--r-sm); background:white; min-height:44px; min-width:0; width:100%; padding:8px; font:inherit; }
#platform-status { color:var(--sub); font-size:14px; margin-block:var(--s4); }
#platform-map { height:450px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.p-layout { display:grid; gap:var(--s6); }
.p-empty { padding:var(--s10); background:var(--ground); border-radius:var(--r-lg); }
.p-owner { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5); padding:var(--s6); margin-top:var(--s12); border-radius:var(--r-xl); background:var(--soft); }
.p-owner h2 { margin:0; }
.p-bottom { display:flex; gap:var(--s6); margin-block:var(--s6); }
.p-details { display:grid; grid-template-columns:90px 1fr; gap:var(--s4); padding:var(--s6); background:var(--ground); border-radius:var(--r-lg); }
.p-details dt { color:var(--sub); }.p-details dd { margin:0; }
.p-breadcrumb { margin-bottom:var(--s4); font-size:14px; }
.p-banner-slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:var(--r-xl); }
.p-banner { display:block; position:relative; background:var(--soft); border:1px solid var(--pink-line); padding:var(--s6); color:var(--ink); border-radius:var(--r-lg); text-decoration:none; }
.p-banner-slides .p-banner { flex:0 0 100%; scroll-snap-align:start; }
.p-banner img { width:100%; height:180px; object-fit:cover; border-radius:var(--r-md); margin-bottom:var(--s4); }
.p-banner-strip { display:flex; gap:var(--s3); overflow-x:auto; margin-top:var(--s4); }
.p-banner-strip .p-banner { flex:0 0 240px; padding:var(--s4); }.p-banner-strip h2 { font-size:17px; }.p-banner-strip img { height:90px; }
#banner-prev,#banner-next { padding:8px 18px; margin-top:8px; background:white; border:1px solid var(--line); border-radius:var(--r-full); cursor:pointer; }
.p-sr,.p-skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.platform [hidden] { display:none !important; }
@media(min-width:960px) { .p-layout.has-map { grid-template-columns:minmax(0,1fr) minmax(300px,.85fr); } #platform-map { position:sticky; top:24px; height:650px; } }
@media(max-width:599px) { .p-head form { order:3; flex-basis:100%; }.p-head nav { margin-left:auto; }.p-main { padding-top:var(--s6); }.p-store { padding:var(--s4); } }

/* 좁은 화면: 지도를 목록 위로(목록 100곳 아래 맨 끝이라 안 보였다 — 앱빌드 10-04) */
@media(max-width:959px) { #platform-map { order:-1; height:300px; } }
/* 매장 사진 자리 · 메인 추천 자리(10-04) */
.p-photo { display:block; width:100%; max-width:640px; height:220px; object-fit:cover; border-radius:var(--r-lg); margin:var(--s4) 0; background:var(--soft); }
.p-photo-empty { display:flex; align-items:center; justify-content:center; font:700 64px/1 'Jua', sans-serif; color:var(--pink-line); border:1px solid var(--pink-line); }
.p-slot { display:block; text-decoration:none; color:var(--ink); border-style:dashed; }
.p-fine { margin-top:var(--s6); }

/* ── 디저트 매장 플랫폼(서버에서 그리는 메인 · 지역 · 디저트 · 매장, 10-04) — 기존 hero · chip · section 부품 위에 dn-* 만 더한다 ── */
.platform .site-head .site-nav a { white-space: nowrap; }
.dn-search { display: flex; gap: var(--s2); margin-top: var(--s6); max-width: 520px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full); box-shadow: var(--sh-2); }
.dn-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--s4); font: inherit; font-size: 16px; outline: none; }
.dn-search .btn { min-height: 46px; border-radius: var(--r-full); padding: 0 var(--s6); white-space: nowrap; }
.chip { text-decoration: none; }
.chip .dn-count { font-size: 12px; font-weight: 600; color: var(--mute); }
a.chip:hover { border-color: var(--primary); color: var(--primary); }
a.eyebrow { text-decoration: none; }

/* 디저트 카드 줄 */
.dn-desserts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: var(--s3); overflow-x: auto; padding-bottom: var(--s2); scroll-snap-type: x mandatory; }
.dn-dessert { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s5); border-radius: var(--r-xl); color: var(--ink); text-decoration: none; scroll-snap-align: start; box-shadow: var(--sh-1); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.dn-dessert:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.dn-dessert .dn-emoji { font-size: 52px; line-height: 1; margin-bottom: var(--s4); filter: drop-shadow(0 6px 8px rgba(28,25,23,.12)); }
.dn-dessert b { font-family: var(--font-display); font-weight: 400; font-size: 22px; white-space: nowrap; letter-spacing: -0.02em; }   /* 이름은 한 줄 — 「쿠키 · 구움과자」가 두 줄로 늘어 위 · 아래 카드 높이가 달라지지 않게(대표님 10-04 「위하고 똑같이」) */
.dn-dessert span { color: var(--sub); font-size: 14px; }
.dn-dessert em { font-style: normal; font-weight: 700; color: var(--ink); }
.dn-dessert img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--r-md); margin-bottom: var(--s3); }
.dn-badge { position: absolute; top: var(--s4); right: var(--s4); font-size: 11px !important; font-weight: 700; color: #fff !important; background: var(--primary); border-radius: var(--r-full); padding: 2px 8px; }
/* 한 줄 6칸은 이름(「쿠키 · 구움과자」)이 한 줄에 들어가는 폭부터 — 그보다 좁으면 옆으로 넘기기(카드 크기는 위 · 아래 같게) */
@media (min-width: 1180px) { .dn-desserts { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; } }
/* 지역 타일 */
.dn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); }
.dn-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.dn-tile b { font-size: 17px; }
.dn-tile span { color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.dn-tile:hover { border-color: var(--pink-line); transform: translateY(-2px); box-shadow: var(--sh-2); }
.dn-subhead { font-size: 17px; margin: var(--s8) 0 var(--s3); }
.section.dn-tight { padding: var(--s10) 0; }
.section.dn-tight .dn-subhead { margin-top: 0; }

/* 매장 카드 */
.dn-grid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 640px) { .dn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dn-grid { grid-template-columns: repeat(3, 1fr); } .p-layout.has-map .dn-grid { grid-template-columns: repeat(2, 1fr); } }
.dn-card { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.dn-card:hover { border-color: var(--pink-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.dn-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 32px; object-fit: cover; }
.dn-thumb-lg { width: 88px; height: 88px; font-size: 46px; border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.dn-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dn-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dn-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.dn-where { color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-meta { color: var(--mute); font-size: 12px; }
.dn-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px; }
.dn-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-full); font-size: 12.5px; background: var(--ground); color: var(--sub); }
.dn-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.dn-pill b { font-weight: 700; }
.dn-pill.in { background: var(--stock-in-soft); color: var(--stock-in); } .dn-pill.in i { background: var(--stock-in); }
.dn-pill.low { background: var(--stock-low-soft); color: var(--stock-low); } .dn-pill.low i { background: var(--stock-low); }
.dn-pill.out { background: var(--stone-soft); color: var(--mute); } .dn-pill.out i { background: var(--mute); }
.dn-pill.out b { text-decoration: line-through; }
.dn-pills-lg .dn-pill { font-size: 15px; padding: 6px 14px; }
.dn-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--ground); color: var(--sub); }
.dn-tag.ad { background: var(--soft); color: var(--primary); }
.dn-tag.hot { background: var(--butter-soft); color: #8A5A00; }
.dn-empty { padding: var(--s10); text-align: center; color: var(--sub); background: var(--ground); border-radius: var(--r-xl); }

/* 추천(광고) 자리 */
.dn-slot { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s6); background: var(--surface); border: 2px dashed var(--pink-line); border-radius: var(--r-xl); color: var(--ink); text-decoration: none; }
.dn-slot > span:nth-child(2) { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.dn-slot b { font-size: 18px; } .dn-slot > span:nth-child(2) span { color: var(--sub); font-size: 14px; }
.dn-slot-ico { font-size: 34px; }

/* 찾기 폼 */
.dn-filter { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-1); align-items: end; }
.dn-filter label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sub); min-width: 0; }
.dn-filter select, .dn-filter input { min-height: 46px; width: 100%; min-width: 0; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--ground); border: 1px solid transparent; border-radius: var(--r-md); }
.dn-filter select:focus, .dn-filter input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.dn-filter .dn-q { grid-column: 1 / -1; }
.dn-filter .btn { grid-column: 1 / -1; min-height: 48px; }
@media (min-width: 960px) { .dn-filter { grid-template-columns: repeat(4, 1fr) 1.4fr auto; } .dn-filter .dn-q, .dn-filter .btn { grid-column: auto; } }
.dn-status { color: var(--sub); font-size: 14px; margin: var(--s5) 0 var(--s3); }
.dn-status b { color: var(--ink); }

/* 작은 첫 화면(지역 · 디저트 · 매장) */
.dn-hero-sm .wrap { padding-bottom: var(--s12); }
.dn-hero-sm h1 { font-size: clamp(32px, 7vw, 52px); }
.dn-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--mute); margin-bottom: var(--s4); }
.dn-crumbs a { color: var(--sub); text-decoration: none; } .dn-crumbs a:hover { color: var(--primary); }
.dn-hero-emoji { width: min(280px, 60vw); aspect-ratio: 1; margin: 0 auto; border-radius: 40%; display: grid; place-items: center; font-size: min(140px, 30vw); box-shadow: var(--sh-3); animation: bob 5s ease-in-out infinite; }

/* 매장 페이지 */
.dn-store-hero .wrap { grid-template-columns: 1fr !important; max-width: 820px; }
.dn-store-head { display: flex; gap: var(--s5); align-items: center; }
.dn-store-head h1 { margin-top: 6px !important; font-size: clamp(28px, 6vw, 44px) !important; line-height: 1.2; }
.dn-store-head .dn-where { white-space: normal; font-size: 15px; margin-top: 4px; }
.dn-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dn-now { margin-top: var(--s8); padding: var(--s6); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.dn-now h2 { font-size: 15px; color: var(--sub); margin-bottom: var(--s3); }
.dn-note { margin-top: var(--s3); color: var(--mute); font-size: 13px; }
.dn-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.dn-info { margin-top: var(--s5); display: grid; gap: 0; background: var(--surface); border-radius: var(--r-xl); border: 1px solid var(--line); overflow: hidden; }
.dn-info div { display: grid; grid-template-columns: 88px 1fr; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.dn-info div:first-child { border-top: 0; }
.dn-info dt { color: var(--mute); font-size: 14px; } .dn-info dd { margin: 0; }
.dn-fine { color: var(--mute); font-size: 13px; } .dn-fine b { color: var(--sub); } .dn-fine ul { margin: 6px 0 0; padding-left: 18px; }

/* FAQ · 아래 띠 */
.dn-faq details { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.dn-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; }
.dn-faq summary::after { content: "+"; float: right; color: var(--mute); }
.dn-faq details[open] summary::after { content: "−"; }
.dn-faq p { margin-top: var(--s2); color: var(--sub); }
.dn-cta { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: center; justify-content: space-between; padding: var(--s10); border-radius: var(--r-2xl); background: linear-gradient(135deg, var(--soft), #FFF8E6); }
.dn-cta h2 { font-size: clamp(24px, 5vw, 34px); margin-top: var(--s3); }
.dn-cta p { color: var(--sub); margin-top: var(--s2); }
.dn-cta-btns { display: flex; gap: var(--s3); flex-wrap: wrap; }
@media (max-width: 599px) { .dn-cta { padding: var(--s6); } .dn-store-head { align-items: flex-start; } }
.dn-store-hero .wrap * { text-align: left !important; }
.dn-store-hero .dn-store-head, .dn-store-hero .dn-pills, .dn-store-hero .dn-actions { justify-content: flex-start !important; }
@media (max-width: 959px) { .hero:not(.dn-store-hero) .dn-crumbs { justify-content: center; } }
/* Safari: 첫 화면 칸이 검색 칸 · 칩 줄의 최소 폭만큼 넓어져 오른쪽으로 넘치던 것(앱빌드 10-04) */
.platform .hero .wrap { grid-template-columns: minmax(0, 1fr); }
.platform .hero .wrap > div { min-width: 0; }
.dn-search input { width: 100%; }
@media (min-width: 960px) { .platform .hero:not(.dn-store-hero) .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
/* 매장 정보 다 보이기(10-04 [3144]) */
.dn-review { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.dn-score { display: flex; align-items: baseline; gap: var(--s2); }
.dn-score b { font-size: 22px; color: var(--ink); } .dn-score span { color: var(--sub); font-size: 14px; }
.dn-stats { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dn-stats span { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 12px; color: var(--mute); line-height: 1.3; }
.dn-stats b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dn-store-body { max-width: 820px; }
.dn-store-body .dn-subhead { margin-top: var(--s6); }
.dn-info dd small { color: var(--mute); }
.dn-info a { color: var(--primary); text-decoration: none; font-weight: 600; }
/* 매장 메뉴(이름 · 가격) — 플레이스 상세 수집본, 대표님 10-05 「메뉴 수집을 했는데 메뉴가 안 나와」. 매장 정보 표와 같은 판, 한 줄에 하나 */
.dn-subhead small { color: var(--mute); font-size: 14px; font-weight: 600; margin-left: 4px; }
.dn-menu { list-style: none; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s1) var(--s5); }
.dn-menu li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); min-width: 0; }
.dn-menu li:first-child { border-top: 0; }
.dn-menu span { min-width: 0; overflow-wrap: anywhere; }
.dn-menu b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.dn-menu-more { margin-top: var(--s3); }
.dn-menu-more summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 14px; padding: var(--s2) 0; }
.dn-menu-more .dn-menu { margin-top: var(--s2); }
.dn-muted { color: var(--mute); font-size: 14px; }
.dn-photos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: var(--s2); overflow-x: auto; margin-bottom: var(--s4); }
.dn-photos img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--r-md); }
.dn-fine { margin-top: var(--s8); } .dn-fine p { margin: var(--s3) 0 0; } .dn-fine a { color: var(--sub); }
/* 디저트 칩 「더보기」 — 가나다 격자(10-04 [3153]) */
.dn-more { margin-top: var(--s2); }
.dn-more > summary { display: inline-flex; list-style: none; cursor: pointer; background: var(--surface); color: var(--primary); border-color: var(--pink-line); font-weight: 600; }
.dn-more > summary::-webkit-details-marker { display: none; }
.dn-more[open] > summary { display: none; }
.dn-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s2); margin-top: var(--s2); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-1); text-align: left; }
.dn-more-grid a { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.dn-more-grid a:hover { background: var(--soft); }
.dn-more-grid span { grid-row: span 2; font-size: 22px; }
.dn-more-grid b { font-size: 14px; font-weight: 600; line-height: 1.2; }
.dn-more-grid small { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 지역 요약 카드 · 종류별 디저트 고르기(10-04 [3157]) */
.dn-summary { align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s6); background: var(--surface); border-radius: var(--r-2xl); box-shadow: var(--sh-3); }
.dn-summary div { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); border-radius: var(--r-lg); background: var(--soft); }
.dn-summary div:nth-child(2) { background: var(--butter-soft); } .dn-summary div:nth-child(3) { background: #EEF5FF; } .dn-summary div:nth-child(4) { background: var(--stock-in-soft); }
.dn-summary b { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 4vw, 36px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dn-summary span { color: var(--sub); font-size: 13px; }
.dn-picker { display: flex; flex-direction: column; gap: var(--s3); }
.dn-picker-all { align-self: flex-start; }
.dn-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.dn-group { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.dn-group h3 { display: flex; align-items: baseline; gap: 6px; font-size: 15px; margin: 0 0 var(--s2); }
.dn-group h3 small { color: var(--mute); font-weight: 500; font-size: 12px; }
.dn-group-list { display: flex; flex-direction: column; }
.dn-group-list a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--s2); padding: 7px var(--s2); border-radius: var(--r-md); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.dn-group-list a:hover { background: var(--soft); }
.dn-group-list span { font-size: 19px; } .dn-group-list b { font-weight: 600; } .dn-group-list small { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.dn-group details > summary { list-style: none; cursor: pointer; padding: 6px var(--s2); color: var(--primary); font-size: 13px; font-weight: 600; }
.dn-group details > summary::-webkit-details-marker { display: none; }
.dn-group details[open] > summary { display: none; }
/* 메인 「종류별로 보기」는 위 디저트 카드처럼 PC 한 줄 6칸(대표님 10-04 [3217]) — 묶음마다 3개 + 「n개 더」 */
@media (min-width: 600px) { .dn-groups-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .dn-groups-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dn-groups-6 .dn-group { padding: var(--s3); }
  /* 칸이 좁아 이름이 잘리지 않게 — 개수는 묶음 제목 옆 숫자로 보고, 줄마다 개수는 뺀다 */
  .dn-groups-6 .dn-group-list a { grid-template-columns: 20px minmax(0, 1fr); gap: 6px; padding: 6px 4px; font-size: 13.5px; }
  .dn-groups-6 .dn-group-list b { white-space: nowrap; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; }
  .dn-groups-6 .dn-group-list span { font-size: 17px; }
  .dn-groups-6 .dn-group-list small { display: none; }
}
@media (max-width: 599px) { .dn-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dn-group { padding: var(--s3); } .dn-group-list a { grid-template-columns: 22px 1fr; } .dn-group-list small { display: none; } }