/* ============================================================================
 * zeroeats brand override — applied AFTER extracted-runtime.css so it wins.
 *
 * Goals:
 *   1. Replace the upstream Cera Pro with Pretendard Variable (Korean-stable).
 *   2. Swap the red→orange brand gradient with zeroeats lime (#C6FF2E) gradient.
 *   3. Per token-04 rule: black text on lime (never white) for AAA contrast.
 *
 * Approach: targeted class overrides + a hue-rotate fallback on backgrounds
 * that we can't catch by class name.
 * ============================================================================ */

:root {
  --zr-lime: #C6FF2E;          /* zeroeats primary lime */
  --zr-lime-soft: #DAFF6E;     /* lighter lime for gradient start */
  --zr-lime-deep: #9FE020;     /* deeper lime for gradient end */
  --zr-ink: #0A0A0A;           /* primary dark text */
  --zr-paper: #FFFFFF;
  --zr-gradient: linear-gradient(153deg, #DAFF6E 0%, #C6FF2E 50%, #9FE020 100%);

  /* Override the upstream font variable */
  --cera: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

/* ─────────────────────────────────────────── font: force Pretendard everywhere */
html, body, button, input, textarea, select, h1, h2, h3, h4, h5, h6, p, a, span, div, li {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif !important;
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}
/* Heading display feel — Pretendard 800 with tighter tracking */
h1, h2, h3, .zr-marquee-track {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* ─────────────────────────────────────────── background: real WebGL canvas
   The upstream animated background is the Unicorn Studio WebGL
   canvas inside .Bcdln (data-scene-id="id-suihug6b3bkptx7595r3xr"), driven by
   the /animated-bg.json scene file we extracted from HAR. The scene ships
   with red blobs on a darker base — we hue-rotate the canvas so reds shift
   to zeroeats lime. .Bcdln keeps solid lime as paint-fallback when scene loads. */
.Bcdln {
  /* WebGL canvas paints the full scene (gradient + noise + liquify + mouseDraw
     + coloration). Solid lime is only a paint-fallback before the canvas loads. */
  background: #C6FF2E !important;
  /* Initial frame inset — creates a rounded-rectangle viewport with white
     padding around the WebGL scene. Scroll handler drives inset → 0 + radius → 0. */
  clip-path: inset(var(--zr-frame-inset, 16px) round var(--zr-frame-radius, 24px)) !important;
  -webkit-clip-path: inset(var(--zr-frame-inset, 16px) round var(--zr-frame-radius, 24px)) !important;
  transition: clip-path 0.1s linear, -webkit-clip-path 0.1s linear !important;
  /* Override the original z-index -1 (which hid behind body bg).
     Pull canvas above body bg but still behind page content. */
  z-index: 0 !important;
}
/* White frame = body bg shows through where canvas is clipped. */
html, body {
  background: #FFFFFF !important;
}
/* Page content above the canvas */
main, header, footer, aside[class*="ldjwTk"] { position: relative; z-index: 2; }

/* Hero phone group — both phones positioned via individual CSS properties
   (translate/scale/rotate) so we can run a separate float animation on
   `transform` without overriding the static offset. */
.jvKBjQ {
  /* Front phone (search result) — slides RIGHT off-screen with scroll
     (same direction as back phone + food, all exit right together). */
  translate: calc(-18% + var(--zr-scroll-exit, 0) * 130%) calc(-38% + var(--zr-scroll-exit, 0) * -10%) !important;
  scale: 0.88 !important;
  z-index: 4 !important;
  transform-origin: center center !important;
  animation: zr-phone-float-a 6s ease-in-out infinite alternate !important;
}
.hDdZRw {
  /* Back phone (home screen) — slides RIGHT off-screen with scroll. */
  translate: calc(18% + var(--zr-scroll-exit, 0) * 120%) calc(-28% + var(--zr-scroll-exit, 0) * -20%) !important;
  scale: 0.78 !important;
  z-index: 3 !important;
  transform-origin: center center !important;
  animation: zr-phone-float-b 7s ease-in-out infinite alternate !important;
}
@keyframes zr-phone-float-a {
  0%   { transform: rotate(-9deg)  translateY(0px); }
  100% { transform: rotate(-7deg)  translateY(-14px); }
}
@keyframes zr-phone-float-b {
  0%   { transform: rotate(3deg)   translateY(0px); }
  100% { transform: rotate(1deg)   translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
  .jvKBjQ, .hDdZRw { animation: none !important; }
}

/* Food-burst image (was the reflection mockup) — sits BEHIND both phones as a
   dramatic backdrop. The food image is portrait 1024x1536 (aspect 2/3) but the
   slot was 720x848 (aspect 0.85). We use object-fit: contain so the image
   keeps its real aspect ratio (no stretching). */
.iHACYZ {
  /* Food burst — exits RIGHT with the phones for a unified group exit. */
  translate: calc(var(--zr-scroll-exit, 0) * 130%) -45% !important;
  transform: scale(1.1) !important;
  z-index: 1 !important;
  filter: drop-shadow(0 0 80px rgba(198, 255, 46, 0.45)) !important;
  opacity: 1 !important;
  aspect-ratio: auto !important;
}
.iHACYZ > div { aspect-ratio: auto !important; }
.iHACYZ picture { display: block !important; aspect-ratio: auto !important; }
.iHACYZ img {
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  /* No blend mode — show the food image as-is. Dark background gets lifted
     by the lighten blend on the parent .iHACYZ filter glow. */
  mix-blend-mode: lighten !important;
  opacity: 0.95 !important;
}
/* Full WebGL scene at original intensity, hue-rotated red→lime so the
   the upstream animation (gradient + noise + 2 mouseDraw + liquify + coloration)
   plays in zeroeats brand colors. Text on hero is forced white for contrast
   against the dark animated areas. */
.Bcdln canvas {
  /* Softened background — lower opacity + reduced saturation so the animated
     lime canvas reads as a subtle ambient texture instead of dominating. */
  filter: hue-rotate(80deg) saturate(0.55) brightness(1.45) !important;
  opacity: 0.32 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Sections that paint red as their own bg */
[class*="bvIQFC"],
[class*="eDPPXZ"],
[class*="jcIHDn"],
[class*="bJXKnh"],
[class*="cVNLVI"],
[class*="ekLQZC"],
[class*="kXHite"] {
  background-color: transparent !important;
}

/* ─────────────────────────────────────────── solid red → lime */
/* Generic red replacements (form submit, cookie buttons) */
.itCUTL,
.ilCOMv {
  background: var(--zr-lime) !important;
  color: var(--zr-ink) !important;
}
.icon { fill: var(--zr-ink) !important; }
.badge { fill: var(--zr-lime) !important; }

/* Contact button (.iFJRAb / .cyfbla) — distinct INK pill on the lime page,
   with LIME text and icon inside so it stands out. */
.iFJRAb,
.cyfbla,
button.button,
header button[class*="button"] {
  background: var(--zr-ink) !important;
  color: var(--zr-lime) !important;
  border-radius: 9999px !important;
  padding: 10px 22px !important;
  border: none !important;
}
.iFJRAb em,
.cyfbla em,
.iFJRAb .char,
.cyfbla .char {
  background: transparent !important;
  color: var(--zr-lime) !important;
  font-weight: 700 !important;
}
.iFJRAb svg,
.iFJRAb svg path,
.cyfbla svg,
.cyfbla svg path,
.iFJRAb .before svg,
.iFJRAb .after svg,
.iFJRAb svg [stroke] {
  stroke: var(--zr-lime) !important;
  fill: none !important;
}
.iFJRAb:hover,
.cyfbla:hover {
  background: var(--zr-lime) !important;
  color: var(--zr-ink) !important;
}
.iFJRAb:hover em,
.iFJRAb:hover .char,
.cyfbla:hover em,
.cyfbla:hover .char { color: var(--zr-ink) !important; }
.iFJRAb:hover svg,
.iFJRAb:hover svg path { stroke: var(--zr-ink) !important; }

/* form submit + cookie accept stay as lime-on-ink */
button[type="submit"] {
  background: var(--zr-ink) !important;
  color: var(--zr-lime) !important;
}

/* "확인" cookie button + similar — lime bg, ink text */
aside button {
  background: var(--zr-lime) !important;
  color: var(--zr-ink) !important;
}

/* ─────────────────────────────────────────── text contrast over WebGL scene
   The WebGL canvas paints dark→lime gradient. Black text would disappear on
   the dark portions. Use WHITE everywhere over the canvas region; switch to
   black only on sections that have their own light/cream bg. */
body { color: var(--zr-paper) !important; }
h1, h2, h3 { color: var(--zr-paper) !important; }
section h2 + p,
section p.lede,
section[class*="bvIQFC"] p {
  color: var(--zr-paper) !important;
  opacity: 0.95;
}

/* Ink sections (black backgrounds) keep white text */
section[class*="ink"],
.section--ink,
[style*="background: rgb(10, 10, 10)"],
[style*="background-color: rgb(10, 10, 10)"] {
  color: var(--zr-paper) !important;
}
section[class*="ink"] h1,
section[class*="ink"] h2,
section[class*="ink"] h3,
section[class*="ink"] p {
  color: var(--zr-paper) !important;
}

/* ─────────────────────────────────────────── inline-style overrides */
/* Many elements have `style="color: rgb(255, 255, 255)"` — when paint over lime,
   we need to flip to ink. Use attribute selector. */
[style*="color: rgb(255, 255, 255)"],
[style*="color: rgb(242, 242, 242)"],
[style*="color: rgb(245, 245, 245)"],
[style*="color: rgb(250, 250, 250)"],
[style*="color: rgb(240, 240, 240)"],
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#FFF"],
[style*="color: #FFF"],
[style*="color: white"] {
  color: var(--zr-paper) !important;
}

/* Header / nav over WebGL scene — keep WHITE text.
   .char per-character animation spans default to white too. */
header a,
header button,
nav a,
nav button,
.site-header *,
.char,
.word {
  color: var(--zr-paper) !important;
}
/* But on ink (black) sections + dark buttons, keep white text */
section[style*="background: rgb(10, 10, 10)"] *,
section[style*="background-color: rgb(10, 10, 10)"] *,
.section--ink *,
[class*="cieGho"] *,
[class*="ga-DsZk"] *,
/* Dark CTA / store-download buttons: bg rgb(0,0,0) → white text */
.jUWdnw,
.jUWdnw *,
a.store,
a.store *,
[style*="background: rgb(0, 0, 0)"],
[style*="background: rgb(0, 0, 0)"] *,
[style*="background-color: rgb(0, 0, 0)"],
[style*="background-color: rgb(0, 0, 0)"] *,
[style*="background: rgb(10, 10, 10)"],
[style*="background: rgb(10, 10, 10)"] *,
button.dark,
button.dark * {
  color: var(--zr-paper) !important;
}
/* SVG inside dark stores buttons — fill/stroke white */
.jUWdnw svg,
.jUWdnw svg path,
a.store svg,
a.store svg path {
  fill: var(--zr-paper) !important;
  stroke: var(--zr-paper) !important;
}
/* svg fills/strokes that were white — flip to ink on lime */
.site-header svg,
header svg,
nav svg {
  fill: var(--zr-ink) !important;
}
.site-header svg [fill="white"],
.site-header svg [fill="#fff"],
.site-header svg [fill="#FFFFFF"],
.site-header svg [fill="rgb(255, 255, 255)"] {
  fill: var(--zr-ink) !important;
}
header svg path:not([fill]),
nav svg path:not([fill]) { fill: var(--zr-ink) !important; }

/* Contact button on header — was white pill with red text; now ink pill with lime text */
header a[href*="contact"],
header a.contact,
header button[class*="contact"] {
  background: var(--zr-ink) !important;
  color: var(--zr-lime) !important;
}

/* ─────────────────────────────────────────── theme-color reflection */
/* Update the favicon/manifest theme-color to lime would require <meta> update;
   that's done in the converter HTML side. */

/* ─────────────────────────────────────────── final marquee tracks visible */
.zr-marquee-track { color: var(--zr-ink) !important; }
.zr-marquee-host { color: var(--zr-ink) !important; }

/* ─────────────────────────────────────────── cookie banner — zeroeats redesign
   Original upstream banner: dark blur pill at top-of-page. Replace with
   clean white card bottom-right with lime accent stripe. */
.eryuFN,
aside[class*="eryuFN"],
aside[class*="ldjwTk"] {
  /* zeroeats ink pill: matches the Contact header button style */
  background: var(--zr-ink) !important;
  color: var(--zr-paper) !important;
  /* Reposition: bottom-right floating pill */
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: 360px !important;
  /* Pill style */
  padding: 12px 14px 12px 22px !important;
  border-radius: 9999px !important;
  border-left: none !important;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Layout: text + button (no icon) */
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 9999 !important;
  animation: zr-cookie-in 0.4s cubic-bezier(.2,.7,.2,1) 0.8s both !important;
}
/* Remove the cookie icon entirely */
.eryuFN .icon,
.eryuFN img,
aside[class*="ldjwTk"] img {
  display: none !important;
}
.eryuFN p,
aside[class*="ldjwTk"] p {
  flex: 1 1 auto !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--zr-paper) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.eryuFN button,
aside[class*="ldjwTk"] button {
  flex: none !important;
  background: var(--zr-lime) !important;
  color: var(--zr-ink) !important;
  padding: 9px 18px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}
.eryuFN button:hover,
aside[class*="ldjwTk"] button:hover {
  transform: translateY(-1px) !important;
  opacity: 0.92 !important;
}
@keyframes zr-cookie-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Hide ANY upstream-style cookie banner second-instance if present */
.eryuFN ~ .eryuFN { display: none !important; }

/* ─────────────────────────────────────────── nav: keep each menu item on one line
   The upstream template wraps each character in <span class="char"> for animation.
   Without the JS that lays them out, the chars stack vertically. Force inline. */
header nav a,
header nav button,
header ul li a,
header ul li button,
nav a,
nav button {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
header nav .word,
header nav .char,
nav .word,
nav .char,
header ul .word,
header ul .char {
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
header nav .word { margin-right: 0 !important; }
header nav ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 28px !important;
}
header nav ul li {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────── scroll animations
   Hero columns (waffl-grid + phone group) get JS-driven translateX as
   user scrolls past hero. Transition is GPU-accelerated. */
main > section:first-of-type waffl-grid,
main > section:first-of-type > div > div:has(picture) {
  will-change: transform, opacity;
  transition: transform 0.06s linear, opacity 0.06s linear;
}

/* ─────────────────────────────────────────── section reveal (fade-up) */
.zr-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.9s cubic-bezier(.2,.7,.2,1),
    transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.zr-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children inside the same parent */
.zr-reveal.is-in + .zr-reveal { transition-delay: 0.06s; }
.zr-reveal.is-in + .zr-reveal + .zr-reveal { transition-delay: 0.12s; }
.zr-reveal.is-in + .zr-reveal + .zr-reveal + .zr-reveal { transition-delay: 0.18s; }

/* Don't fade-out hero columns — those are driven by scroll handler */
main > section:first-of-type .zr-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .zr-reveal { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────── scroll-down hint
   "아래로" indicator at the bottom-left of hero. the upstream .char chars
   default to block in our overrides — force them inline + add bouncing
   arrow animation (uses the upstream @keyframes scrollBounce). */
.zvpYx,
[class*="zvpYx"],
[class*="lhfhSE"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: nowrap !important;
  color: var(--zr-paper) !important;
}
.zvpYx .word,
.zvpYx .char,
[class*="zvpYx"] .word,
[class*="zvpYx"] .char,
[class*="lhfhSE"] .word,
[class*="lhfhSE"] .char {
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  color: var(--zr-paper) !important;
  /* Kill the upstream text-shadow "ghost trail" + scrollBounce keyframes
     that produce two stacked copies of the chars. We add a cleaner arrow-only
     bounce below. */
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}
.zvpYx .word { letter-spacing: -0.01em !important; }
/* Vertical bounce arrow */
.zvpYx svg,
[class*="zvpYx"] svg,
[class*="lhfhSE"] svg {
  animation: zr-scroll-bounce 1.6s ease-in-out infinite !important;
  stroke: var(--zr-paper) !important;
}
@keyframes zr-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .zvpYx svg, [class*="zvpYx"] svg { animation: none !important; }
}

/* ─────────────────────────────────────────── hero headline — per-char stagger reveal
   Upstream GSAP analog (yPercent:-100, autoAlpha:0, stagger amount:0.7,
   duration:0.7, expo.out). Each .char carries inline --i set by hero.js pass (7).
   Scoped to .hero-headline-static so the other .zr-marquee-host instances on the
   page (scrolling marquees) stay untouched. */

/* Allow natural wrap on narrow viewports — the inline zr-marquee-runtime style
   forces nowrap/overflow:hidden on .zr-marquee-host, which makes no sense for a
   static headline. Two-class specificity outranks that rule's single class. */
.hero-headline-static.zr-marquee-host {
  white-space: normal !important;
  overflow: visible !important;
}

/* Two-line bold heading — both <span class="line"> stay heavy display weight.
   Line 2 is slightly down-scaled only so longer text doesn't wrap to 3+ rows. */
.hero-headline-static .line {
  display: block !important;
  line-height: 1.08;
  font-weight: inherit;
}
.hero-headline-static .line + .line {
  margin-top: 0.1em;
  font-size: 0.72em;
}

/* Neutralize the block-level .zr-reveal motion — per-char motion below is the
   reveal. Other .zr-reveal elements are unaffected. */
.hero-headline-static.zr-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Char start state: one line-height above + invisible. */
.hero-headline-static .char {
  display: inline-block !important;
  opacity: 0 !important;
  transform: translate3d(0, -110%, 0) !important;
  transition:
    opacity 700ms cubic-bezier(.22,1,.36,1),
    transform 800ms cubic-bezier(.22,1,.36,1) !important;
  transition-delay: calc(var(--i, 0) * 30ms) !important;
  will-change: opacity, transform;
}
.hero-headline-static.is-in .char {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline-static .char,
  .hero-headline-static.is-in .char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────── food category cards — staggered rise
   Whole-card unit reveal: the white frame + photo + label rise together as
   one piece, not the picture floating up inside a static frame. We drive the
   transform on the OUTER .card-N and use :has(.zr-reveal.is-in) (modern
   browsers) so the inner IO trigger flips the outer card's resting position.
   The inner .zr-reveal motion is neutralized so picture/label sit at their
   final positions inside the card from the start. */
[class*="card-"] .zr-reveal {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [class*="card-"] .zr-reveal {
    transform: none;
    transition: none;
  }
}

/* Zig-zag layout — each card sits at a different vertical offset and tilts at
   a different angle so the row reads as scattered polaroids, not a flat strip.
   `.card.card-N` (2 classes + !important) outranks the inline GSAP-baked
   `transform: none` on each card AND the runtime CSS `.kOIQZN .card { transform:
   translate(-50%,-50%) }` mobile centering. The rotation cascades into the inner
   .zr-reveal so the rise-from-below also enters at the same tilt.

   Reduced negative margin (-2vw vs runtime's -6vw) so the cards visibly spread
   out and the zigzag reads instead of overlapping into a single stack. */
/* Make the pin-spacer + .kOIQZN responsive AND collapse the massive vertical
   empty space that the original layout reserved for GSAP-pinned scroll
   timelines that we no longer run. Without these overrides the cards section
   leaves ~8 viewport-heights of blank lime between itself and the next text. */
/* GSAP-style scroll-driven pin + per-card transform.
   .cHfuBd gives ~200lvh of scroll range; .kOIQZN sticks to viewport top
   inside that range. JS pass (10) writes --p (0→1) on .kOIQZN as the user
   scrolls through the range. Each card's translateY + rotate interpolates
   between a "start" (off-screen below, no rotation) and an "end" matching
   the the upstream GSAP-baked final-state values. */
.cHfuBd {
  --pin-height: 220lvh !important;
  height: var(--pin-height) !important;
  min-height: 0 !important;
  position: relative !important;
}
.pin-spacer {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100lvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  position: sticky !important;
  top: 0 !important;
}
.kOIQZN {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100lvh !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  transform: none !important;
  /* progress 0 = cards just below viewport, 1 = cards in their final
     scattered positions. Driven by hero.js pass (10). */
  --p: 0;
}
.kOIQZN .card.card-1 { margin-left: 0 !important; }
.kOIQZN .card.card-2,
.kOIQZN .card.card-3,
.kOIQZN .card.card-4,
.kOIQZN .card.card-5 {
  margin-left: -2vw !important;
}
.kOIQZN .card.card-1,
.kOIQZN .card.card-2,
.kOIQZN .card.card-3,
.kOIQZN .card.card-4,
.kOIQZN .card.card-5 {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  transform-origin: 50% 50%;
  /* no transition — JS drives smoothly via scroll. */
  transition: none !important;
  opacity: 1 !important;
}
/* Per-card scroll-driven transform — Y and rotation are linear interpolations
   between a "below + flat" start state (--p=0) and the the upstream final
   scattered state (--p=1). The card-N stagger comes from each card having
   different start/end values. */
.card.card-1 {
  transform:
    translateY(calc(var(--start-y, 540px) * (1 - var(--p)) + var(--end-y, -48px) * var(--p)))
    rotate(calc(var(--end-r, -5deg) * var(--p)))
    !important;
  --start-y: 560px; --end-y: -48px; --end-r: -5deg;
}
.card.card-2 {
  transform:
    translateY(calc(var(--start-y, 480px) * (1 - var(--p)) + var(--end-y, 7px) * var(--p)))
    rotate(calc(var(--end-r, -1.6deg) * var(--p)))
    !important;
  --start-y: 480px; --end-y: 7px; --end-r: -1.6deg;
}
.card.card-3 {
  transform:
    translateY(calc(var(--start-y, 600px) * (1 - var(--p)) + var(--end-y, 8px) * var(--p)))
    rotate(calc(var(--end-r, 8.8deg) * var(--p)))
    !important;
  --start-y: 600px; --end-y: 8px; --end-r: 8.8deg;
}
.card.card-4 {
  transform:
    translateY(calc(var(--start-y, 440px) * (1 - var(--p)) + var(--end-y, -13px) * var(--p)))
    rotate(calc(var(--end-r, 1.7deg) * var(--p)))
    !important;
  --start-y: 440px; --end-y: -13px; --end-r: 1.7deg;
}
.card.card-5 {
  transform:
    translateY(calc(var(--start-y, 520px) * (1 - var(--p)) + var(--end-y, 8px) * var(--p)))
    rotate(calc(var(--end-r, -3.3deg) * var(--p)))
    !important;
  --start-y: 520px; --end-y: 8px; --end-r: -3.3deg;
}

/* Make every card's <p> label visible against any photo. Inheriting from the
   runtime's `.hbzfFU p` rule alone isn't enough because the photo's actual
   pixel colors at the gradient region vary per card — only card-3's image
   has dark restaurant interior at the bottom. Force a uniform white label
   with a hard text-shadow so it reads on any background. */
.hbzfFU p {
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 0.6) !important;
  position: relative;
  z-index: 2;
}

/* Collapse the GSAP-pinned scroll-track containers in the section AFTER the
   cards (the marquee "광고로 도배된..." section). Without GSAP these sit as
   empty 350lvh blocks, leaving ~3000-7000px of empty lime between sections. */
.hPJUpF {
  height: auto !important;
  min-height: 100lvh !important;
}
.kukqOA {
  height: auto !important;
  min-height: 100lvh !important;
}
.amEJZ {
  position: relative !important;
  height: auto !important;
  min-height: 60lvh !important;
}
.cWhwaX {
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
}
/* "4앱 일일이 안 열어봐도 됩니다" section — fake the original GSAP scroll
   reveal with CSS transitions hooked to the IO-applied .zr-reveal.is-in.
   Three layers animate together when the section enters the viewport:
     1) .brrKeQ svg — giant gray circle scale(0) → scale(1), under text
     2) .hCPHiJ    — dotted pattern bg opacity 0 → 1
     3) .bJnjJu    — picture scale(0.8) translateY(10%) → scale(1) translateY(0)
   The three layered fades + circle expand read as a soft gradient reveal.
   Keep the svg at its original 200lvh size; it's position: absolute so its
   size does not push the section taller. */
.brrKeQ svg {
  height: auto !important;
  transition:
    transform 1400ms cubic-bezier(.22,1,.36,1),
    opacity 900ms ease-out !important;
  transform: translate(-50%, -50%) scale(0) !important;
  opacity: 0;
  will-change: transform, opacity;
}
.brrKeQ.is-active svg {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1;
}
/* Gray-dot background pattern removed by user request — hide entirely. */
.hCPHiJ,
.hCPHiJ.is-active,
.hCPHiJ span {
  display: none !important;
}

/* "4앱 일일이..." section — gradient background that fades from the lime
   ambient bg at the top into the white footer at the bottom, so the
   transition reads as one continuous flow. */
section.kXtAqU {
  background: linear-gradient(
    180deg,
    rgba(241, 242, 238, 0) 0%,
    rgba(241, 242, 238, 0.45) 35%,
    #f1f2ee 65%,
    #f1f2ee 100%
  ) !important;
}

/* Footer — off-white background matching the .kXtAqU section's bottom
   (which reads as slightly green-tinted gray because the lime canvas
   bleeds through at the gradient endpoint). */
footer.cieGho {
  background: #f1f2ee !important;
}
/* Social icons (ul.CMMqi) — lime fill on lime-on-dark pill background for
   strong brand visibility. Stroke-based glyphs (the form submit arrow) stay
   on default styling further below. */
footer.cieGho ul.CMMqi a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 9999px !important;
  background: #000 !important;
  margin: 0 4px !important;
  transition: transform .15s ease, background .15s ease !important;
}
footer.cieGho ul.CMMqi a:hover {
  transform: translateY(-1px);
  background: #1a1a1a !important;
}
footer.cieGho ul.CMMqi svg path { fill: var(--zr-lime, #C6FF2E) !important; }

/* Email signup form — lime accents on the input + lime pill submit button. */
footer.cieGho form.hSkjoy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 4px 4px 14px !important;
  border: 1px solid #000 !important;
  border-radius: 9999px !important;
  background: #fff !important;
}
footer.cieGho form.hSkjoy input {
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  padding: 8px 4px !important;
  outline: none !important;
  font-size: 14px !important;
  height: auto !important;
  min-width: 200px !important;
  /* Runtime had padding-right: 14.4rem to clear space for an absolutely-
     positioned submit button; we made the button inline, so undo it. */
  padding-right: 4px !important;
  /* Runtime gave input its own border-radius + dark bg + backdrop-filter. */
  border-radius: 0 !important;
  backdrop-filter: none !important;
  color: #000 !important;
}
footer.cieGho form.hSkjoy input::placeholder { color: #777 !important; }
footer.cieGho form.hSkjoy button[type="submit"] {
  /* Override the runtime's absolute positioning + width so the button flows
     inline within the pill form container instead of floating over the input. */
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  background: var(--zr-lime, #C6FF2E) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform .15s ease, opacity .15s ease !important;
  flex-shrink: 0 !important;
}
footer.cieGho form.hSkjoy button[type="submit"]:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}
footer.cieGho form.hSkjoy button svg path { stroke: #000 !important; }
footer.cieGho form.hSkjoy button .char { color: #000 !important; }

footer.cieGho,
footer.cieGho small,
footer.cieGho h3,
footer.cieGho .char,
footer.cieGho a,
footer.cieGho nav a,
footer.cieGho nav li,
footer.cieGho input,
footer.cieGho input::placeholder,
footer.cieGho button,
footer.cieGho button .char,
footer.cieGho .zr-marquee-track,
footer.cieGho .zr-marquee-host {
  color: #000 !important;
}
footer.cieGho input::placeholder { color: #555 !important; }
footer.cieGho svg path { stroke: #000 !important; }
/* Input border + button visibility on light bg */
footer.cieGho form input {
  border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
  background: transparent !important;
}
.bJnjJu {
  transition: transform 900ms cubic-bezier(.22,1,.36,1) !important;
  transform: scale(0.86) translateY(8%) !important;
  will-change: transform;
}
.bJnjJu.is-active {
  transform: scale(1) translateY(0) !important;
}
/* Round the phone-mockup image in the "4앱 일일이..." section. */
.bJnjJu picture,
.bJnjJu img {
  border-radius: 5rem;
  overflow: hidden;
}
/* Paragraph copy in the "4앱 일일이..." section reads on a lime background
   now (gray-dot pattern removed), so force the text to pure black for
   contrast. */
.kXtAqU p.idWpeA,
.kXtAqU .iyIzyV {
  color: #000 !important;
}
/* Food category card badge — change the white background "check" path to
   black so the badge reads as a black circle with a lime checkmark on the
   5 card photos. Scoped to .hbzfFU (the card class) so other badges
   elsewhere keep their current styling. */
.hbzfFU .fVbSWL .check {
  fill: #000 !important;
}
@media (prefers-reduced-motion: reduce) {
  .brrKeQ svg, .brrKeQ.is-active svg,
  .hCPHiJ, .hCPHiJ.is-active,
  .bJnjJu, .bJnjJu.is-active {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
.hnVAMa {
  position: relative !important;
  height: auto !important;
}

/* Marquee section — runtime hides waffl-grid #2 and #3 (.brhGtj) as
   `position: absolute; visibility: hidden` so GSAP can swap them in.
   Without GSAP they all stack at the same absolute position AND the h2's
   inline `visibility: visible` overrides parent hidden → all 3 messages
   render on top of each other. Flatten to relative + visible so the flex
   column container (.bbWxPA) shows them as 3 stacked lines. */
.brhGtj {
  position: relative !important;
  visibility: visible !important;
  display: grid !important;
}
.bbWxPA {
  row-gap: 1.2rem !important;
}

/* Mobile (< 700px) — runtime stacks all .card absolute-centered, which collides
   with our zigzag. Switch back to flex column so each card is its own row, then
   rotation reads clearly. The runtime ≥700px rule already does this for desktop. */
@media (max-width: 699.98px) {
  .kOIQZN {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    aspect-ratio: auto !important;
    height: auto !important;
    padding: 24px 0 !important;
  }
  .kOIQZN .card {
    position: relative !important;
    inset: auto !important;
  }
  .kOIQZN .card.card-1,
  .kOIQZN .card.card-2,
  .kOIQZN .card.card-3,
  .kOIQZN .card.card-4,
  .kOIQZN .card.card-5 {
    margin: 0 !important;
  }
}

/* ─────────────────────────────────────────── hero text — scroll-fade-out
   As the user scrolls past the hero, the headline + body fade to 0 so the
   food-card row below reads on a clean canvas. The opacity is set inline by
   hero.js pass (8); this rule just establishes the transition origin and a
   sane initial state. Mark a parent class so pass (8) knows what to fade. */
.hero-fade-on-scroll {
  will-change: opacity;
  transition: opacity 60ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .hero-fade-on-scroll { opacity: 1 !important; transition: none !important; }
}

/* ─────────────────────────────────────────── 모바일 (< 700px) 반응형 정비
   the upstream runtime은 mobile-first로 `@media (min-width: 700px)` 분기를 사용.
   우리 zeroeats override 들은 대부분 desktop sizing으로 hardcode 되어 있어
   < 700px 에서 추가 조정이 필요한 영역을 일괄 처리. */

@media (max-width: 699.98px) {
  .hero-headline-static .line + .line {
    font-size: 0.86em !important;
    margin-top: 0.15em !important;
  }
  .hero-headline-static {
    font-size: clamp(2.4rem, 9vw, 4.8rem) !important;
    line-height: 1.1 !important;
  }
  .hero-headline-static.zr-marquee-host {
    overflow: visible !important;
    padding: 0 0.4rem !important;
  }
}

@media (max-width: 699.98px) {
  /* `.brrKeQ` 회색 원형 데코 — 모바일에서 viewport 폭 초과 + 의미 약함, 제거. */
  .brrKeQ {
    display: none !important;
  }
  .bJnjJu picture {
    width: min(80vw, 40rem) !important;
    max-width: 80vw !important;
  }
  section.kXtAqU {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  /* `.lYbak::after` — phone 위로 fade 되는 그라데이션. 부모 padding 때문에 폭이
     좁아 보이는데 모바일에서는 viewport 좌우 끝까지 full-bleed. */
  .lYbak {
    position: relative !important;
  }
  .lYbak::after {
    left: 50% !important;
    right: auto !important;
    margin-left: -50vw !important;
    width: 100vw !important;
  }
}

@media (max-width: 699.98px) {
  /* Force form's parent containers to stretch full-width and stack centered
     so the form itself can just be width:100% and inherit centering. */
  footer.cieGho .kOVAaJ,
  footer.cieGho .itYpLi {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  footer.cieGho {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  footer.cieGho form.hSkjoy {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 1.6rem !important;
  }
  footer.cieGho form.hSkjoy input {
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 0.8rem !important;
    font-size: 16px !important;
  }
  footer.cieGho form.hSkjoy button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    border-radius: 0.8rem !important;
  }
}

@media (max-width: 699.98px) {
  footer.cieGho ul.CMMqi {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    list-style: none !important;
  }
  footer.cieGho ul.CMMqi li {
    margin: 0 !important;
  }
  footer.cieGho ul.CMMqi a {
    margin: 0 !important;
  }
}

@media (max-width: 699.98px) {
  /* Keep .cHfuBd as a tall scroll buffer so hero.js Pass (10) can sticky-pin
     .kOIQZN and stagger the 5 cards with scatter transforms (matches desktop
     behavior). lkTMHP heading sits above as natural sibling — user scrolls
     past it, then enters the pinned cards section. */
  /* the upstream snapshot baked inline `width:1800px; height:940px` into
     .pin-spacer / .kOIQZN — those would render way past the mobile viewport.
     Force them back to viewport-relative sizes. */
  /* Scroll-driven scatter: .cHfuBd is a tall buffer (200vh) so user has scroll
     range; .kOIQZN sticky-pins at top:15vh and stays visually fixed; hero.js
     Pass 10 writes --p (0→1) on .kOIQZN as the user scrolls past .cHfuBd.
     Cards interpolate from center stack (--p=0) to pentagonal scatter (--p=1). */
  .cHfuBd {
    height: 80vh !important;
  }
  .cHfuBd > .pin-spacer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 80vh !important;
    max-height: 80vh !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }
  .kOIQZN {
    width: 100% !important;
    max-width: 100% !important;
    height: 80vh !important;
    max-height: 80vh !important;
    padding: 0 !important;
    aspect-ratio: unset !important;
    position: relative !important;
    top: auto !important;
    inset: auto !important;
    overflow: visible !important;
  }
  .kOIQZN .card {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: 42vw !important;
    max-width: 42vw !important;
    height: auto !important;
    transition: transform 80ms linear !important;
  }
  /* Cards interpolate from center stack to pentagonal scatter as --p goes 0→1. */
  .kOIQZN .card.card-1 {
    transform: translate(-50%, -50%)
               translate(calc(var(--p, 0) * 22vw), 0)
               rotate(calc(var(--p, 0) * -28.29deg)) !important;
  }
  .kOIQZN .card.card-2 {
    transform: translate(-50%, -50%)
               translate(calc(var(--p, 0) * 6.8vw), calc(var(--p, 0) * 20.9vw))
               rotate(calc(var(--p, 0) * -2.07deg)) !important;
  }
  .kOIQZN .card.card-3 {
    transform: translate(-50%, -50%)
               translate(calc(var(--p, 0) * -17.8vw), calc(var(--p, 0) * 12.9vw))
               rotate(calc(var(--p, 0) * -18.95deg)) !important;
  }
  .kOIQZN .card.card-4 {
    transform: translate(-50%, -50%)
               translate(calc(var(--p, 0) * -17.8vw), calc(var(--p, 0) * -12.9vw))
               rotate(calc(var(--p, 0) * -16.01deg)) !important;
  }
  .kOIQZN .card.card-5 {
    transform: translate(-50%, -50%)
               translate(calc(var(--p, 0) * 6.8vw), calc(var(--p, 0) * -20.9vw))
               rotate(calc(var(--p, 0) * 0.1deg)) !important;
  }
  /* "아래로 ▼" scroll indicator (.zvpYx) — sits after .izsieJ in DOM flow on
     mobile (baseline has no absolute positioning). Pull it up above the
     phone+food group so it appears near the CTA buttons instead of way down. */
  .zvpYx {
    margin-top: -16rem !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    z-index: 5 !important;
  }
}

@media (max-width: 699.98px) {
  h2.lfzpaI,
  section.sc-f1dc3615-0 h2,
  .kXHite {
    font-size: clamp(2.4rem, 8vw, 3.6rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.05rem !important;
  }
  .bbWxPA {
    row-gap: 1.6rem !important;
  }
  .brhGtj {
    text-align: center !important;
  }
}

/* Header logo (zeroeats icon + wordmark) + Contact / menu pills — nudge all
   header children down on mobile so they align at the same vertical height.
   .iFJRAb/.cyfbla baseline pulls them up via `transform: translate(±1.2rem,-1.2rem)` —
   reset that transform so margin-top can actually move them.
   - Contact (.iFJRAb) is hidden on mobile per design.
   - Menu (.cyfbla) loses its black circular background and renders as a clean
     3-line ink hamburger sitting directly on the lime hero. */
@media (max-width: 699.98px) {
  header.dZWphk > span:first-child,
  header.dZWphk .cyfbla {
    margin-top: 1rem !important;
  }
  header.dZWphk .iFJRAb {
    display: none !important;
  }
  header.dZWphk .cyfbla {
    transform: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 2.8rem !important;
    height: 2.8rem !important;
  }
  header.dZWphk .cyfbla .menu-icon {
    width: 2.4rem !important;
    height: 2.4rem !important;
  }
  header.dZWphk .cyfbla .menu-icon span {
    background: var(--zr-ink) !important;
    width: 100% !important;
    height: 2px !important;
    border-radius: 1px !important;
    left: 0 !important;
    right: auto !important;
    transform-origin: center !important;
    transition: transform 0.32s cubic-bezier(0.43, 0.195, 0.02, 1),
                opacity 0.2s ease !important;
  }
  header.dZWphk .cyfbla .menu-icon span:nth-child(1) {
    transform: translateY(calc(-50% - 7px)) !important;
  }
  header.dZWphk .cyfbla .menu-icon span:nth-child(2) {
    transform: translateY(-50%) !important;
  }
  header.dZWphk .cyfbla .menu-icon span:nth-child(3) {
    transform: translateY(calc(-50% + 7px)) !important;
  }
  /* Hamburger → X morph when menu is open (cyfbla.zr-menu-open).
     Top + bottom rotate ±45deg and converge to center; middle fades out. */
  header.dZWphk .cyfbla.zr-menu-open .menu-icon span:nth-child(1) {
    transform: translateY(-50%) rotate(45deg) !important;
  }
  header.dZWphk .cyfbla.zr-menu-open .menu-icon span:nth-child(2) {
    transform: translateY(-50%) scaleX(0) !important;
    opacity: 0 !important;
  }
  header.dZWphk .cyfbla.zr-menu-open .menu-icon span:nth-child(3) {
    transform: translateY(-50%) rotate(-45deg) !important;
  }
  /* Stay above the nav overlay so the user can tap the same button to close. */
  header.dZWphk .cyfbla {
    position: relative !important;
    z-index: 101 !important;
  }
}

/* Hero phone + food burst — mobile baseline parent (.izsieJ) is position:relative
   so the phones sit in flow below the CTAs. Reset Y translate to 0 so they
   appear inside that container instead of off-screen below. */
@media (max-width: 699.98px) {
  /* Front (top) phone + food burst slide LEFT on scroll-exit; back phone slides RIGHT. */
  .jvKBjQ {
    translate: calc(-10% + var(--zr-scroll-exit, 0) * -130%) -18% !important;
    scale: 0.65 !important;
  }
  .hDdZRw {
    translate: calc(10% + var(--zr-scroll-exit, 0) * 120%) -18% !important;
    scale: 0.55 !important;
  }
  .iHACYZ {
    translate: calc(var(--zr-scroll-exit, 0) * -130%) -18% !important;
    transform: scale(0.85) !important;
  }
}

/* App Store / Play Store download row — push below the hero phone+food on mobile
   and shrink each button slightly so they clear the white frame border.
   `.iPryxZ` is the hero download row (visible on mobile, gap 1.2rem baseline);
   `.cZfMuS` is the header/nav download row. Both share `.jUWdnw` for the buttons. */
@media (max-width: 699.98px) {
  .cZfMuS,
  .iPryxZ {
    margin-top: 2rem !important;
    margin-block: 2rem 1.2rem !important;
    transform: none !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .iPryxZ {
    gap: 0.6rem !important;
  }
  .jUWdnw {
    transform: scale(0.88) !important;
    transform-origin: center !important;
  }
}

/* Mobile fullscreen overlay menu — triggered by hamburger (.cyfbla).
   Reference (upstream Nav sc-5a074280-0): position:fixed inset:0, cream
   bg (bc6), opacity tied to $isOpen, transition opacity 0.5s bezzy2 ease.
   Baseline must keep `display: flex` (not `none`) so opacity transitions
   actually animate. `.zr-menu-open` flips opacity 0→1 and unlocks pointer. */
@media (max-width: 1023.98px) {
  nav.eSlwZD {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    z-index: 100 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 6rem 2rem 2rem !important;
    background: #ffffff !important;
    color: #000000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.5s cubic-bezier(0.43, 0.195, 0.02, 1) !important;
    clip-path: none !important;
  }
  nav.eSlwZD.zr-menu-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  nav.eSlwZD ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.4rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  nav.eSlwZD ul li a,
  nav.eSlwZD ul li button {
    color: #000000 !important;
    background: transparent !important;
    border: none !important;
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    padding: 0.6rem 0 !important;
    cursor: pointer !important;
    letter-spacing: -0.02em !important;
  }
  /* char span 들이 word.overflow:hidden 부모 안에서 잘리지 않게 강제 visible */
  nav.eSlwZD ul li a .word,
  nav.eSlwZD ul li button .word {
    display: inline-block !important;
    overflow: visible !important;
    color: #000000 !important;
  }
  nav.eSlwZD ul li a .char,
  nav.eSlwZD ul li button .char {
    display: inline-block !important;
    color: #000000 !important;
    opacity: 1 !important;
    transform: none !important;
    text-shadow: none !important;
    animation: none !important;
    visibility: visible !important;
  }
}

/* ─────────────────────────────────────────── inline anchor pages
   #whoitsfor (소개) / #howitworks (사용법) / #business (매장 운영자) /
   #sponsor (후원). #contact = footer anchor (already styled).
   Same shell across breakpoints — alternating lime / paper / ink / lime. */
.zr-page-section {
  position: relative;
  z-index: 2;
  scroll-margin-top: 6rem;
  padding: 8rem 2rem;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.zr-page-section--lime  { background: var(--zr-lime); color: var(--zr-ink); }
.zr-page-section--paper { background: var(--zr-paper); color: var(--zr-ink); }
.zr-page-section--ink   { background: var(--zr-ink); color: var(--zr-paper); }
.zr-page-section--ink .zr-page-card { background: rgba(255,255,255,0.08); }
.zr-page-section--ink .zr-page-card strong { color: var(--zr-lime); }
.zr-page-inner {
  max-width: 96rem;
  margin: 0 auto;
}
.zr-page-eyebrow {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: rgba(0,0,0,0.08);
  color: inherit;
  margin-bottom: 2.4rem;
}
.zr-page-section--ink .zr-page-eyebrow {
  background: rgba(255,255,255,0.1);
}
.zr-page-title {
  font-size: clamp(3.2rem, 6vw, 6.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 2rem;
  color: inherit;
}
.zr-page-lede {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 4.8rem;
  max-width: 64ch;
  color: inherit;
  opacity: 0.85;
}
.zr-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 1.6rem;
}
.zr-page-card {
  background: rgba(0,0,0,0.06);
  border-radius: 1.6rem;
  padding: 2.4rem;
}
.zr-page-card strong {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
}
.zr-page-card p {
  font-size: 1.5rem;
  line-height: 1.55;
  margin: 0;
  opacity: 0.82;
}
.zr-page-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.zr-page-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: start;
  background: rgba(0,0,0,0.05);
  border-radius: 1.6rem;
  padding: 2.4rem;
}
.zr-page-step-num {
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--zr-lime);
  text-shadow: 0 0 0 var(--zr-ink);
  -webkit-text-stroke: 2px var(--zr-ink);
  line-height: 1;
}
.zr-page-section--ink .zr-page-step-num {
  -webkit-text-stroke: 2px var(--zr-paper);
}
.zr-page-steps li strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.zr-page-steps li p {
  font-size: 1.5rem;
  line-height: 1.55;
  margin: 0;
  opacity: 0.82;
}
@media (max-width: 699.98px) {
  .zr-page-section { padding: 5.6rem 1.6rem; }
  .zr-page-grid { grid-template-columns: 1fr; }
  .zr-page-card, .zr-page-steps li { padding: 1.8rem; }
}

/* ─────────────────────────────────────────── header mail button
   Replaces the prior Contact pill (.iFJRAb) + hamburger (.cyfbla). Ink circle
   with lime envelope icon, visible identically on mobile and desktop. */
header .zr-mail-btn,
.zr-mail-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 4.4rem !important;
  height: 4.4rem !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: var(--zr-ink) !important;
  color: var(--zr-lime) !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}
header .zr-mail-btn svg,
.zr-mail-btn svg { width: 22px !important; height: 22px !important; }
header .zr-mail-btn svg path,
.zr-mail-btn svg path {
  stroke: var(--zr-lime) !important;
  fill: none !important;
}
header .zr-mail-btn:hover,
.zr-mail-btn:hover {
  background: var(--zr-lime) !important;
  transform: scale(1.04);
}
header .zr-mail-btn:hover svg path,
.zr-mail-btn:hover svg path { stroke: var(--zr-ink) !important; }

@media (max-width: 699.98px) {
  header.dZWphk .zr-mail-btn {
    margin-top: 1rem !important;
    width: 4rem !important;
    height: 4rem !important;
  }
}