/* ---------- fonts ---------- */
@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'GmarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'HakgyoansimSusukkang';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-2@1.0/HakgyoansimSusukkangL.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'OwnglyphRyurue';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/Ownglyph_ryurue-Rg.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'GoogleSansFlex';
  src: url('assets/fonts/GoogleSansFlex-VariableFont.ttf') format('truetype-variations'),
       url('assets/fonts/GoogleSansFlex-VariableFont.ttf') format('truetype');
  font-weight: 1 1000;
  font-display: swap;
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

:root {
  --yellow: #ffb829;
  --yellow-light: #ffd37b;
  --charcoal: #363636;
  --charcoal-2: #282828;
  --ink: #333333;
  --gold: #fdbd22;
  --gold-2: #f8c901;

  --font-display: 'GmarketSans', sans-serif;
  --font-script: 'HakgyoansimSusukkang', sans-serif;
  --font-body: 'Paperlogy', sans-serif;
  --font-google: 'GoogleSansFlex', sans-serif;
  --font-hand: 'OwnglyphRyurue', sans-serif;
}

html {
  overflow-x: hidden;
}
body {
  font-family: var(--font-body);
  background: var(--yellow);
  color: var(--ink);
  /* Korean text wraps between ANY two characters by default (CJK line-break
     rules), not just at spaces — without this, narrow mobile widths were
     breaking mid-word (e.g. "맛있는" split into "맛있" / "는" across lines) */
  word-break: keep-all;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  color: var(--charcoal);
  text-transform: uppercase;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
}
.section-head p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
}

/* ---------- ticker ---------- */
.ticker {
  background: var(--charcoal);
  height: 36px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 22s linear infinite;
}
.ticker__group {
  display: flex;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  font-family: var(--font-script);
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}
.tri {
  width: 8px;
  height: 8px;
  background: #E23A2A;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  display: inline-block;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- nav ---------- */
.nav {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 50px);
  background: var(--yellow);
}
.nav__logo {
  height: 30px;
  width: auto;
}
/* .nav__right groups the dropdown menu + the toggle/login pair so the two
   behave as a single flex child of .nav on desktop (preserving the original
   logo <-> menu spacing), while on mobile .nav__menu detaches into an
   absolute dropdown and .nav__actions is the only thing left in flow */
.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 38px);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 38px);
}
.nav__link {
  font-family: var(--font-script);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--charcoal-2);
  padding: 8px 18px;
  white-space: nowrap;
}
.nav__link--pill {
  background: var(--charcoal);
  color: var(--yellow);
  border-radius: 999px;
}
.nav__link--active { }
/* mobile swaps the "log in" text pill for a plain user icon (matches the
   hamburger/cart icons already sitting in the compact 38px bar); desktop
   keeps the text pill, so the icon stays hidden until the mobile override */
.nav__login-icon { display: none; }

/* hamburger toggle: hidden on desktop, shown only under the 768px breakpoint below */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--charcoal-2);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--charcoal);
  overflow: hidden;
  margin-top: 20px;
  height: clamp(420px, 45.3vw, 869px);
}
.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: clamp(200px, 17.5vw, 336px);
}
.hero__logo {
  width: 100%;
  height: auto;
}
.hero__tag {
  font-family: var(--font-script);
  font-size: clamp(16px, 1.3vw, 25px);
  color: var(--gold-2);
  text-transform: uppercase;
  text-align: center;
}
.sparkle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sparkle img {
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
}

/* hero decorative sparkles sway side to side (the center logo is untouched) */
.hero .sparkle {
  transform-origin: 50% 50%;
  animation: sparkle-sway 3.4s ease-in-out infinite;
}
.hero .sparkle:nth-of-type(1) { animation-duration: 3.1s; animation-delay: -0.4s; }
.hero .sparkle:nth-of-type(2) { animation-duration: 3.7s; animation-delay: -1.6s; }
.hero .sparkle:nth-of-type(3) { animation-duration: 2.8s; animation-delay: -0.9s; }
.hero .sparkle:nth-of-type(4) { animation-duration: 3.3s; animation-delay: -2.1s; }
.hero .sparkle:nth-of-type(5) { animation-duration: 3.9s; animation-delay: -0.2s; }
@keyframes sparkle-sway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .sparkle { animation: none; }
}

@media (max-width: 480px) {
  /* Figma's mobile hero keeps all 5 swaying sparkles, just repositioned/resized
     for the 390px frame — override the inline desktop px positions with !important */
  .hero .sparkle:nth-of-type(1) { left: 11.28% !important; top: 77.42% !important; width: 17.98% !important; height: 8.37% !important; }
  .hero .sparkle:nth-of-type(2) { left: 77.44% !important; top: 73.4% !important; width: 16.47% !important; height: 12.48% !important; }
  .hero .sparkle:nth-of-type(3) { left: 42.33% !important; top: 88.96% !important; width: 7.62% !important; height: 5.755% !important; }
  .hero .sparkle:nth-of-type(4) { left: 8.21% !important; top: 10.2% !important; width: 7.66% !important; height: 6.08% !important; }
  .hero .sparkle:nth-of-type(5) { left: 59.49% !important; top: 4.8% !important; width: 17.98% !important; height: 8.35% !important; }
}

/* ---------- main sections ---------- */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(90px, 13vw, 250px);
  padding-top: 239px;
  padding-bottom: 120px;
}

/* story */
.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  width: 100%;
  max-width: 1532px;
  padding: 0 24px;
  position: relative;
}
.story__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.36;
}
.story__title span {
  display: block;
}
.story__title span:first-child { font-size: clamp(18px, 2vw, 26px); }
.story__title span:last-child { font-size: clamp(28px, 3.4vw, 42px); }

.story__photos {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.story__photo {
  width: 348px;
  height: 374px;
  border-radius: 12.5px;
  overflow: hidden;
  flex-shrink: 0;
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
.story__photo--1 { --tilt: 2.45deg; }
.story__photo--3 { --tilt: -1.13deg; }
/* each photo rises in on its own (left to right, via .reveal-group's
   nth-child stagger) instead of the trio fading in together; the composite
   transform keeps each photo's resting tilt intact through the animation */
.story__photo.reveal {
  opacity: 0;
  transform: translateY(16px) rotate(var(--tilt, 0deg));
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.story__photo.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, 0deg));
}

.story__copy {
  max-width: 871px;
  width: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 1.48;
  color: var(--charcoal);
  text-transform: uppercase;
}
.story__copy p { margin-bottom: 4px; }
.story__emphasis {
  font-weight: 600;
  font-size: 22px;
  margin-top: 16px;
}
/* why oink / our black pork sections */
.why,
.black-pork {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  width: 100%;
  max-width: 1532px;
  padding: 0 24px;
}

/* why cards / feature cards shared grid */
.why__cards,
.black-pork__cards {
  display: flex;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.why-card,
.feature-card {
  background: var(--yellow-light);
  border-radius: 22px;
  overflow: hidden;
  flex: 1 1 260px;
  max-width: 368px;
  height: 404px;
  text-transform: uppercase;
  color: var(--ink);
}
.why-card {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 67px;
}
.why-card__num {
  font-family: var(--font-google);
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100, "wght" 500;
  font-size: 32px;
}
.why-card h3 {
  font-family: var(--font-google);
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100, "wght" 500;
  font-size: 32px;
  margin-bottom: 2px;
}
.why-card p {
  font-size: 18px;
  line-height: 1.48;
}

.feature-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-card h3 {
  font-family: 'Paperlogy';
  font-weight: 500;
  font-size: 28px;
}
.feature-card__media {
  position: relative;
  width: 100%;
  height: 279px;
}
.feature-card__media img {
  position: absolute;
}
.feature-card__img {
  object-fit: contain;
}
.feature-card__underline {
  object-fit: contain;
}

/* find pork */
/* Figma 142:12 — grass photo + floating plush-pig mascot replaced the old
   flat photo-bg + oegyeopsal/mokssal preview cards (those are covered by the
   "Out cuts" section right above now, so repeating them here was dropped) */
.find-pork {
  position: relative;
  width: 100%;
  background: var(--charcoal);
  overflow: hidden;
  aspect-ratio: 1920 / 1056;
  text-align: center;
}
.find-pork__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Figma applies this photo at 37% opacity over the #363636 base (not full
   strength) — that's what mutes the grass to the darker, moodier green seen
   in the design instead of a vivid daylight photo */
.find-pork__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.37; }

.find-pork__star {
  position: absolute;
  z-index: 1;
}
.find-pork__star img { width: 100%; height: 100%; display: block; }
/* desktop positions — moved out of inline style so the mobile media query
   below can override each star independently with its own Figma 259:133 coords */
.find-pork__star--purple { left: 4.844%; top: 11.972%; width: 8.777%; height: 15.465%; }
.find-pork__star--orange { left: 80.104%; top: 11.783%; width: 6.088%; height: 10.727%; }
.find-pork__star--yellow-sm { left: 78%; top: 43%; width: 5.811%; height: 10.486%; }
.find-pork__star--green-sm { left: 19.531%; top: 34.036%; width: 5.811%; height: 10.486%; }
.find-pork__star--pink { left: 10.521%; top: 70.305%; width: 13.154%; height: 23.638%; }
.find-pork__star--blue { left: 87.5%; top: 77.976%; width: 8.021%; height: 14.109%; }

.find-pork__pig {
  position: absolute;
  left: 28.177%;
  top: 58.184%;
  width: 46.302%;
  height: 64.583%;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
}

/* every text block below is independently absolutely-positioned at its own
   Figma top% (not stacked via flex/margin) — the gaps between title/subtitle/
   copy/button are uneven in the source design (6px, 28px, 70px), so a single
   flex gap can't reproduce them */
/* deliberately NOT position:relative — with every child absolutely
   positioned, this wrapper would have zero in-flow content and collapse to
   0 height, making every child's top:% resolve against that 0 instead of
   the real 1056px-tall .find-pork box, which is what actually stacked
   title/subtitle/copy/button on top of each other at top:0 */
.find-pork__content { position: static; }
.find-pork__content > * { z-index: 2; }
/* The highlight was two separate elements sized by two different formulas
   (a static image widened by vw, text widened by its own font-size in a
   custom font) — those never reliably agree on width outside the one
   reference viewport, so the highlight kept ending up narrower or wider
   than the actual text. Fix: make the highlight a CSS background ON the
   text element itself, stretched via background-size to exactly fill
   whatever box the text (plus padding) turns out to be — it can no longer
   mismatch because it isn't sized independently at all. */
/* Centering these four with left:50%+transform:translateX(-50%) collided
   with .reveal's own `transform` (translateY, for the scroll-in animation)
   — same property, equal specificity, .reveal wins because it's later in
   the file, so the horizontal centering silently never applied and left:50%
   alone just pinned each element's LEFT EDGE to center instead. Centering
   via left:0/right:0/margin:auto avoids `transform` entirely, so it can't
   collide with .reveal's animation. */
.find-pork__title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  top: 14.624%;
  z-index: 2;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(28px, 2.9vw, 56px);
  letter-spacing: -0.56px;
  color: var(--charcoal-2);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 13px clamp(24px, 3vw, 56px);
  background-image: url('assets/find-pork-highlight.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.find-pork__subtitle {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  top: 26.842%;
  font-family: var(--font-hand);
  font-size: clamp(20px, 2.08vw, 40px);
  letter-spacing: -2px;
  color: #c4ff3a;
  text-transform: uppercase;
  white-space: nowrap;
}
.find-pork__copy {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 35.078%;
  width: max-content;
  max-width: 90vw;
  color: #fff;
  font-size: 16px;
  line-height: 1.42;
  text-align: center;
}
.find-pork__copy span {
  color: var(--gold);
  display: inline-block;
  margin-top: 20px;
}
.find-pork .btn--cta {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 48.239%;
}

.btn--cta {
  background: var(--yellow);
  border-radius: 999px;
  width: min(372px, 100%);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-script);
  font-size: clamp(16px, 1.56vw, 30px);
  color: var(--charcoal-2);
  text-transform: uppercase;
  cursor: pointer;
}
/* the decor SVGs used to bake their drop-shadow in as an SVG <filter>
   (feGaussianBlur sized relative to each file's own ~150px-wide viewBox).
   Loaded via <img> at these small sticker sizes (~20-40px), that blur doesn't
   downscale proportionally with the vector artwork in most browsers — it
   rasterizes soft and oversized relative to the shrunk lines, reading as
   smudged/broken. Stripped the baked-in filters from the SVG source files
   and replaced with a CSS drop-shadow instead, which rasterizes at the
   image's actual final size and stays crisp at any scale. */
.sparkle--sm img {
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25));
}

/* out cuts */
.out-cuts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  width: 100%;
  padding: 0 24px;
}
.out-cuts h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--charcoal);
  text-transform: uppercase;
}
.out-cuts__cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Out Cuts cards: the source photos are transparent die-cut PNGs (product
   package only, no background), so unlike .product-card there's no colored
   box or clip — just the rotated cutout sitting straight on the page bg */
.out-cuts__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  width: 558px;
  max-width: 100%;
  text-align: center;
}
.out-cuts__card-photo {
  width: 100%;
  aspect-ratio: 558 / 457.575;
  display: flex;
  align-items: center;
  justify-content: center;
}
.out-cuts__card-photo img {
  width: 91.09%;
  height: auto;
}
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 562px;
  max-width: 100%;
}
.product-card--link {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.product-card--link:hover {
  transform: translateY(-4px);
}
.product-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 562 / 617;
  border-radius: 22px;
  overflow: hidden;
}
.product-card__photo--red { background: #ee1717; }
.product-card__photo--blue { background: #335bb9; }
.product-card__frame {
  position: absolute;
}
.product-card__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* frame box matches the designed crop/offset of the source photo within the card */
.product-card__frame--1 {
  left: -7.29%;
  top: 10.98%;
  width: 163.17%;
  height: 107.33%;
}
.product-card__frame--2 {
  left: -12.99%;
  right: -42.7%;
  top: 17.14%;
  aspect-ratio: 1536 / 1024;
}
.product-card__name {
  font-size: 24px;
  text-align: center;
}
.product-card__price {
  font-family: 'Paperlogy';
  font-weight: 600;
  font-size: 28px;
  text-align: center;
}

/* how to enjoy */
.how-to {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  width: 100%;
}
.how-to__marquee {
  width: 100%;
  overflow: hidden;
}
.how-to__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: howto-scroll 32s linear infinite;
}
.how-to__marquee:hover .how-to__track {
  animation-play-state: paused;
}
.how-card {
  flex-shrink: 0;
  width: 368px;
  height: 404px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--yellow-light);
}
.how-card img { width: 100%; height: 100%; object-fit: cover; }
@keyframes howto-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ready */
.ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
  padding: 0 24px;
}
.ready h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--charcoal);
  text-transform: uppercase;
}
.ready__copy {
  font-size: 16px;
  line-height: 1.42;
  color: var(--charcoal);
  text-transform: uppercase;
}
.ready__copy span {
  display: inline-block;
  margin-top: 12px;
  font-family: 'Paperlogy';
  font-weight: 500;
  font-size: 20px;
}
.ready__logo {
  width: 148px;
}

/* footer */
/* Previously an absolutely-positioned layout tuned to Figma's 1920px
   reference frame (top:%, left:% against a fixed-height container). That
   only ever actually fit at ~1920px — every real desktop width in between
   (tested 900–1728px) had the business-info block colliding with the legal
   links below it, because the container's height shrunk with viewport width
   (24.79vw) while the fixed-px text inside it didn't. Rebuilt as a wrapping
   flexbox: brand+tag left / social right on one line, business-info and
   legal-links each forced onto their own full-width line via flex-basis:100%
   — heights are whatever the content needs at any width, so nothing can
   overlap regardless of viewport size. */
.site-footer {
  position: relative;
  width: 100%;
  background: #333;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 24px;
  row-gap: 20px;
  padding: clamp(32px, 4.5vw, 64px) clamp(24px, 5.5vw, 100px);
}
.site-footer__brand {
  order: 1;
}
.site-footer__logo {
  width: clamp(90px, 7.7vw, 148px);
}
/* sits beside the logo on one line (Figma 145:3048), not stacked under it —
   margin-right:auto claims the row's remaining space, pushing whatever
   comes after (nav/social) to the row's right edge without needing a
   dedicated wrapper element around the "left group" */
.site-footer__tag {
  order: 2;
  align-self: center;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.79;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__nav {
  order: 3;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  flex-wrap: wrap;
}
.site-footer__nav a {
  font-size: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-footer__social {
  order: 4;
  margin-left: auto;
  display: flex;
  gap: 24px;
  align-items: center;
}
.site-footer__social img { width: 24px; height: 24px; }
.site-footer__chat {
  position: relative;
}
.site-footer__chat span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}
/* required 사업자정보 block (Figma 244:1979) — flex-basis:100% forces it onto
   its own full-width line below the brand/social row, at whatever height its
   6 lines of text actually need */
/* flex-basis:100% is what forces this onto its own full-width line below
   the brand/social row — a max-width here (even though it only trims the
   box, not the left-aligned text inside it) quietly undoes that guarantee:
   flex-wrap uses the CLAMPED size to decide whether an item fits on the
   current line, so past a certain viewport width there was enough leftover
   room after the social icons for the clamped box to squeeze in beside them
   instead of wrapping. No max-width needed anyway — flex-direction:column
   text children don't stretch wider just because their container is wide. */
.site-footer__biz {
  order: 5;
  flex-basis: 100%;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  line-height: 1.79;
  text-transform: uppercase;
}
.site-footer__biz p:first-child { display: flex; gap: 26px; flex-wrap: wrap; }
.site-footer__legal {
  order: 6;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* forces the mobile 2+2 link grouping below (see that rule for why) — inert
   on desktop, where all the links share one line and this never activates */
.site-footer__legal-break { display: none; }
.site-footer__legal a {
  font-size: 11px;
  text-transform: uppercase;
}
/* :not(:first-of-type) rather than the adjacent-sibling `a + a` — the mobile
   layout inserts a non-<a> line-break spacer between links, which would
   otherwise break the "immediately preceded by an <a>" match this divider
   relies on and silently drop dividers it should still show */
.site-footer__legal a:not(:first-of-type) { position: relative; padding-left: 22px; }
.site-footer__legal .site-footer__copyright { margin-left: 12px; }
.site-footer__legal a:not(:first-of-type)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.3);
}
.site-footer__copyright {
  font-size: 12px;
  color: #848484;
}
/* Figma's mobile-only second copyright line (see HTML comment) — off on
   desktop/tablet, shown by the 480px footer rebuild below */
.site-footer__copyright--bottom { display: none; }

/* back to top */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  z-index: 500;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover {
  background: #4a4a4a;
}
/* ---------- responsive ---------- */
/* tablet / mobile: 768px is the primary cutover to the touch-friendly hamburger nav.
   Matches the Figma mobile landing page (node 175:103, 390px reference frame). */
@media (max-width: 768px) {
  .hero { margin-top: 0; }

  /* mobile-specific banner: sized off viewport height (portrait-friendly) instead
     of reusing the desktop width-driven clamp, which flattens out on tall phones */
  .hero { height: min(70vh, 620px); min-height: 420px; }

  main { gap: clamp(64px, 16vw, 90px); }

  /* Figma's mobile frame puts the ticker below the nav (reverse of desktop);
     reorder via flex instead of moving markup, so desktop is untouched */
  body { display: flex; flex-direction: column; }
  .nav { order: 1; }
  .ticker { order: 2; }
  .hero { order: 3; }
  main { order: 4; }
  .site-footer { order: 5; }

  .nav {
    height: 38px;
    padding: 0 20px;
    position: relative;
    z-index: 100;
  }
  /* get_design_context reports 64px/72x21.6/24x24 for this header node, but
     on an actual phone that reads too big — sized down per direct user
     feedback instead. The always-visible LOG IN pill (a real fix, confirmed
     against the Figma screenshot) is kept, just scaled to fit the shorter bar. */
  .nav__logo { height: 16px; width: auto; }
  /* icon glyphs are kept small (14px) so they don't visually crowd the 38px
     bar, but each button's own hit-area is padded out to ~26px — a
     pragmatic minimum tap target given the bar's height, rather than
     shrinking the glyph AND the clickable area together */
  .nav__toggle {
    display: flex;
    width: 26px;
    height: 26px;
    gap: 3px;
  }
  .nav__toggle span { width: 14px; height: 1.5px; }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
  .nav__actions { gap: 6px; }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--yellow);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav__menu.is-open { max-height: 320px; }
  .nav__link {
    width: 100%;
    min-height: 44px;
    padding: 12px 24px;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
  }
  .nav__link--pill { border-radius: 0; }


  /* footer's absolute-position layout is tuned for wide desktop; stack it as soon
     as we're in mobile/tablet territory rather than only below 480px */
  .story__photos { gap: 12px; }
  .story__photo { width: 30vw; height: 32vw; }
  main { padding-top: 90px; }

  .site-footer {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 48px 24px;
  }
  .site-footer__brand,
  .site-footer__tag,
  .site-footer__nav,
  .site-footer__biz,
  .site-footer__legal,
  .site-footer__social {
    position: static;
    left: auto;
    top: auto;
    width: auto;
  }
  /* below the row-layout's comfortable width: tag drops under the logo
     instead of beside it, and the social icons drop to the very bottom
     (after biz/legal) instead of sitting top-right — the auto-margins that
     positioned them for the one-line row don't apply once the container is
     flex-direction:column */
  /* align-self:center made sense in the desktop row (vertically centers tag
     beside the logo) but in this column stack the cross-axis is horizontal,
     so it was centering the tag block instead — left it flush with
     everything else below it */
  .site-footer__tag { margin-right: 0; align-self: flex-start; }
  .site-footer__social { order: 7; margin-left: 0; }
  .site-footer__nav { flex-wrap: wrap; gap: 16px; }
  .site-footer__legal { flex-wrap: wrap; row-gap: 8px; }
  /* :not(--bottom) — the bare .site-footer__copyright rule below is for the
     legal-row copyright; without this exclusion it also matches (same class,
     both present on that element) .site-footer__copyright--bottom and
     un-hides Figma's mobile-only second copyright line in this 481–768px
     range too, where it was never meant to show (only ≤480px, further down) */
  .site-footer__copyright:not(.site-footer__copyright--bottom) { display: block; }
}

@media (max-width: 480px) {
  /* gap between major sections (story/why/find-pork/black-pork/out-cuts/how-to/ready) */
  main { gap: 64px; }

  /* precise mobile banner height from the Figma mobile frame (500px @ 390px wide) */
  .hero { height: clamp(420px, 128.2vw, 500px); }

  /* gap between a section's heading and its content — Figma uses 30px consistently */
  .why, .black-pork, .out-cuts, .how-to, .ready { gap: 30px; }
  /* Find Your Pork — mobile: Figma node 259:133, a dedicated 390×512 mobile
     frame (not just a squeezed desktop layout). Rebuilt with the same
     fixed-aspect-ratio + absolute-%-position pattern as desktop, just with
     that frame's own coordinates, so every element (bg pan, stars, pig,
     text stack) lands exactly where the mobile design puts it. */
  .find-pork { aspect-ratio: 390 / 512; padding: 0; }
  .find-pork__bg {
    inset: auto;
    left: -44.615%;
    top: -5.957%;
    width: 189.231%;
    height: 111.914%;
  }
  .find-pork__star--purple { left: 13.348%; top: 20.175%; width: 7.918%; height: 5.846%; }
  .find-pork__star--orange { left: 92.939%; top: 15.773%; width: 5.492%; height: 4.055%; }
  .find-pork__star--yellow-sm { left: 82.662%; top: 50.448%; width: 5.243%; height: 3.964%; }
  .find-pork__star--green-sm { left: 17.277%; top: 46.351%; width: 5.243%; height: 3.964%; }
  .find-pork__star--pink { left: 10.437%; top: 62.695%; width: 11.868%; height: 8.934%; }
  .find-pork__star--blue { left: 87.949%; top: 77.148%; width: 7.236%; height: 5.333%; }
  .find-pork__title {
    top: 16.855%;
    font-size: 22px;
    letter-spacing: -0.22px;
    padding: 6px 21px;
  }
  .find-pork__subtitle {
    top: 25.977%;
    font-size: 16px;
    letter-spacing: -0.8px;
  }
  .find-pork__copy {
    top: 34.766%;
    max-width: 247px;
    font-size: 10px;
  }
  /* Figma's mobile copy has no gold-highlighted last line like desktop does —
     all three lines are plain white; the extra gap above the last line comes
     from that line's own taller line-height in the design, approximated here */
  .find-pork__copy span {
    color: #fff;
    margin-top: 8px;
  }
  /* general mobile .btn--cta stays width:min(372px,100%) (near-full-bleed) for
     other CTAs' tap-target sizing — this one specifically is Figma's slim
     158px pill, so it needs its own width override, not just position */
  .find-pork .btn--cta { top: 53.906%; width: 158px; }
  .find-pork__pig {
    left: 7.436%;
    top: 65.705%;
    width: 86.923%;
    height: 50.795%;
  }

  /* Figma's mobile scale runs much smaller than the desktop clamp floors
     (16px section titles, 12px body copy vs. 26px/16px on desktop) */
  .section-head h2,
  .out-cuts h2,
  .ready h2 { font-size: 16px; }
  .section-head p { font-size: 12px; }

  /* text blocks are deliberately narrower than their section on the Figma mobile
     frame (controls where lines break) — full section width was rewrapping
     these paragraphs at different points than the design */
  .story__title { max-width: 211px; margin-left: auto; margin-right: auto; }
  .story__title span { white-space: nowrap; }
  .story__copy { max-width: 275px; margin-left: auto; margin-right: auto; }
  .ready__copy { max-width: 288px; margin-left: auto; margin-right: auto; }

  .story__title span:first-child { font-size: 12px; }
  .story__title span:last-child { font-size: 16px; }
  .story__copy { font-size: 12px; }
  .story__emphasis { font-size: 14px; margin-top: 12px; }
  .ready__copy { font-size: 12px; }
  .ready__copy span { font-size: 14px; margin-top: 8px; }
  /* force the exact Figma line break instead of relying on natural wrap, which
     was breaking mid-word ("만들" / "어보세요") at this width/font */
  .ready__copy .ready__break { display: block; }
  .ready__logo { width: 65px; }

  /* story photos: fixed 3-across sizing (102x110, 8px gap) instead of vw-based,
     which was overflowing its padded container and wrapping to 2 rows */
  .story { gap: 24px; }
  .story__photos { gap: 8px; }
  .story__photo {
    width: calc((100% - 16px) / 3);
    height: auto;
    aspect-ratio: 102 / 110;
  }

  /* CTA button: Figma's literal mobile spec is a 22px-tall pill, but that's well
     under a usable tap target — split the difference: keep the slim proportions
     and small type, just tall enough (40px) to tap comfortably */
  .btn--cta {
    height: 40px;
    margin-top: 12px;
    font-size: 11px;
    gap: 8px;
  }
  .btn__icon { width: 16px; }
  .btn__arrow { width: 7px; }

  /* tighten the largest fixed-px headings so they don't crowd a narrow phone screen */
  .why-card__num,
  .why-card h3 { font-size: clamp(24px, 7.5vw, 32px); }
  .feature-card h3 { font-size: clamp(22px, 6vw, 28px); }

  /* 2-column card grids (155px cards, 8px gap, 12px radius) — matches the Figma
     mobile frame exactly across why-oink / black-pork / find-pork / out-cuts */
  .why__cards,
  .black-pork__cards,
  .out-cuts__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 342px;
  }
  .why-card,
  .feature-card {
    width: 100%;
    max-width: none;
    height: 164px;
    border-radius: 12px;
  }
  .why-card { padding: 16px 14px; gap: 20px; }
  .why-card__num,
  .why-card h3 { font-size: 14px; }
  .why-card p { font-size: 12px; }
  .feature-card { padding: 16px 14px; gap: 8px; }
  .feature-card h3 { font-size: 14px; }
  .feature-card__media { height: 105px; }

  /* out-cuts / shop listing: the 164px card height applies to the photo box only —
     the name/price caption sits below it, outside that box (unlike why/black-pork/
     pork cards, where the whole card including text is 164px total). Scoped to
     .out-cuts__cards rather than .out-cuts so this also reaches shop/index.html,
     which reuses the same .product-card markup outside the landing page's
     .out-cuts section */
  .out-cuts__cards .product-card { width: 100%; max-width: none; gap: 8px; }
  .out-cuts__cards .product-card__photo {
    width: 100%;
    height: 164px;
    aspect-ratio: auto;
    border-radius: 12px;
  }
  /* the shop cards' inline crop % (left/top/width/height on .product-card__frame,
     set per-instance in shop/index.html) was measured against the desktop
     562x617 portrait box — at this short/wide 164px mobile box the same %
     values pan to the wrong spot, so force plain full-cover here instead */
  .out-cuts__cards .product-card__frame {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .out-cuts__cards .product-card__name { font-size: 12px; }
  .out-cuts__cards .product-card__price { font-size: 12px; }

  /* landing "Out cuts" section (plain rotated die-cut photos, added in the
     142:12 redesign) shares the .out-cuts__cards wrapper class with the shop
     listing's boxed .product-card grid above, but needs its own mobile
     treatment — :has() gives it higher specificity so it wins over the
     2-column grid rule regardless of source order. Side-by-side (2 columns),
     matching how the shop listing cards sit on mobile too. */
  .out-cuts__cards:has(.out-cuts__card) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 342px;
  }
  .out-cuts__card { width: 100%; gap: 12px; }
  .out-cuts__card .product-card__name { font-size: 12px; }
  .out-cuts__card .product-card__price { font-size: 12px; }

  /* how-to-enjoy marquee cards: 110x123, ~7px radius, 6px gap — was still using
     the desktop 368x404 size since no mobile override existed at all */
  .how-to__track { gap: 6px; }
  .how-card { width: 110px; height: 123px; border-radius: 7px; }

  /* footer: precise sizing from the Figma mobile frame */
  .site-footer__logo { width: 100px; }
  /* .site-footer__nav only exists on the shop/quiz pages' simpler footer
     (index.html/brand.html dropped it for the .site-footer--full block below) */
  .site-footer__nav { gap: 12px; }
  .site-footer__nav a { font-size: 14px; }

  /* index.html/brand.html footer — Figma node 260:235 (390px mobile frame):
     a plain top-to-bottom stack, not the desktop's absolute-% layout, so
     this reorders/re-spaces the same flat sibling markup with flex `order`
     + margins rather than nesting new wrapper groups. Scoped to
     .site-footer--full so the shop/quiz pages' simpler nav-based footer
     (still using gap/padding above) is untouched. Group order per the
     design: logo → tag → biz info → legal links + copyright → divider →
     social icons → 2nd copyright. */
  .site-footer--full { gap: 0; padding: 48px 20px; }
  .site-footer--full .site-footer__brand { order: 1; }
  .site-footer--full .site-footer__tag {
    order: 2;
    margin-top: 13px;
    font-size: 12px;
    line-height: 1.5;
    text-transform: none;
    white-space: normal;
  }
  .site-footer--full .site-footer__biz { order: 3; margin-top: 30px; width: auto; }
  .site-footer--full .site-footer__legal { order: 4; margin-top: 30px; }
  /* force the 2+2 split requested for mobile: 이용약관/개인정보처리방침 on
     line 1, 사업자정보확인/스마트스토어 on line 2 — natural flex-wrap
     wouldn't reliably land here since all three (or four, after adding the
     스마트스토어 link) can actually fit on one line at this width. Also
     strip the divider bar + its 22px left padding from the item forced onto
     line 2's start (a+a::before applies to it structurally since it still
     follows another <a> in the DOM), which otherwise left it looking
     indented with a floating divider that has nothing before it to divide. */
  /* the invisible break span (see HTML) forces everything after it onto a
     new line as a group — 사업자정보확인 no longer needs flex-basis:100%
     itself (that claimed the *entire* new line alone, leaving no room for
     스마트스토어 to join it there); it just needs its own divider suppressed
     since the break, not another link, now precedes it */
  .site-footer--full .site-footer__legal-break { display: block; flex-basis: 100%; height: 0; }
  .site-footer--full .site-footer__legal a:nth-of-type(3) {
    padding-left: 0;
  }
  .site-footer--full .site-footer__legal a:nth-of-type(3)::before {
    display: none;
  }
  /* desktop lays the copyright inline after the legal links (margin-left);
     Figma's mobile frame drops it to its own line below them instead */
  .site-footer--full .site-footer__legal .site-footer__copyright {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
    text-transform: uppercase;
  }
  .site-footer--full .site-footer__social {
    order: 5;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #4f4f4f;
    gap: 24px;
  }
  .site-footer--full .site-footer__copyright--bottom {
    display: block;
    order: 6;
    margin-top: 20px;
  }

  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }

}

/* ---------- scroll reveal (landing page sections fade/slide in on scroll) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* fade-only variant for elements that already own a resting/hover transform
   of their own (e.g. .product-card--link's hover lift) — avoids two rules
   fighting over the same `transform` property at equal specificity */
.reveal--fade {
  transform: none;
  transition: opacity 0.7s ease;
}
.reveal--fade.is-visible {
  opacity: 1;
}
.reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group > *:nth-child(2) { transition-delay: 100ms; }
.reveal-group > *:nth-child(3) { transition-delay: 200ms; }
.reveal-group > *:nth-child(4) { transition-delay: 300ms; }
.reveal-d1 { transition-delay: 100ms; }
.reveal-d2 { transition-delay: 200ms; }
.reveal-d3 { transition-delay: 300ms; }

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

/* ---------- cart ---------- */
.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--charcoal-2);
  padding: 0;
}
.cart-toggle__icon { width: 18px; height: auto; }
.cart-toggle__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--yellow);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cart-toggle__badge[hidden] { display: none; }

/* mobile sizing for the cart icon + "log in" user-icon swap. These live down
   here (after the base rules above, and after .nav__link's own mobile
   dropdown-item override earlier in the file) specifically so they win the
   cascade on source order — .cart-toggle/.nav__login previously sat earlier
   in the file at equal specificity to rules defined later (e.g. the mobile
   .nav__link{padding:12px 24px} dropdown-item rule, which also matches
   .nav__login since it carries the nav__link class too), so those earlier,
   more-specific-looking overrides were silently losing every time. */
@media (max-width: 768px) {
  .cart-toggle { width: 26px; height: 26px; }
  .cart-toggle__icon { width: 14px; }
  .cart-toggle__badge {
    width: 13px;
    height: 13px;
    min-width: 13px;
    font-size: 8px;
    top: -2px;
    right: -2px;
  }
  .nav__actions .nav__login {
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    /* .nav__link's mobile dropdown-item rule sets min-height:44px, which
       carries over since .nav__login shares that class — min-height wins
       over a smaller explicit height, so it must be reset explicitly here */
    min-height: 0;
  }
  .nav__login-text { display: none; }
  .nav__login-icon { display: block; width: 14px; height: auto; }
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  visibility: hidden;
}
.cart-drawer.is-open { pointer-events: auto; visibility: visible; }
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(43, 41, 38, 0.15);
  flex-shrink: 0;
}
.cart-drawer__header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--charcoal-2);
  text-transform: uppercase;
}
.cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--charcoal-2);
  padding: 0;
}

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}
.cart-drawer__empty {
  padding: 80px 20px;
  text-align: center;
  color: rgba(43, 41, 38, 0.5);
  font-size: 14px;
}

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(43, 41, 38, 0.12);
}
.cart-item__img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f5f5f5;
}
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name {
  font-size: 14px;
  color: var(--charcoal-2);
  font-weight: 500;
  line-height: 1.4;
}
.cart-item__price {
  margin-top: 4px;
  font-family: 'Paperlogy';
  font-weight: 600;
  font-size: 14px;
  color: var(--charcoal);
}
/* same dark-pill styling as the product detail page's own qty stepper
   (.product-detail__qty in shop.css) for a consistent look across the site */
.cart-item__qty {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #464545;
  border-radius: 999px;
  padding: 4px 6px;
}
.cart-item__qty button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #605f5f;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.cart-item__qty button:active {
  opacity: 0.7;
}
.cart-item__qty span {
  min-width: 16px;
  text-align: center;
  font-size: 13px;
  font-family: 'Paperlogy';
  color: #fff;
}
/* muted/darkened forest green — still reads as "leaves the site to Naver"
   without blending in as another local action like the qty stepper, but the
   original saturated Naver green (#03c75a) sat at ~1.3:1 contrast against the
   yellow panel (both are similarly bright, so desaturating alone wouldn't
   fix it — needed to darken it too, which naturally reads as less saturated) */
.cart-item__buy {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1f4d36;
  text-decoration: none;
}
.cart-item__buy:hover { text-decoration: underline; }

.cart-item__remove {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(43, 41, 38, 0.4);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
}
.cart-item__remove:hover { color: rgba(43, 41, 38, 0.7); }

.cart-drawer__footer {
  flex-shrink: 0;
  padding: 20px 24px 24px;
  border-top: 1px solid rgba(43, 41, 38, 0.15);
}
.cart-drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--charcoal-2);
  margin-bottom: 14px;
}
.cart-drawer__total span:last-child {
  font-family: 'Paperlogy';
  font-weight: 600;
  font-size: 20px;
  color: var(--charcoal);
}
.cart-drawer__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 999px;
  /* panel itself is yellow now, so the button needs a color that isn't
     also yellow to stay visible against it — reusing the site's existing
     dark-pill-on-yellow pattern (nav login pill, quiz result CTAs) */
  background: var(--charcoal);
  color: var(--yellow);
  font-family: var(--font-script);
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  width: 100%;
}

@media (max-width: 480px) {
  .cart-drawer__header { padding: 18px 20px; }
  .cart-drawer__items { padding: 4px 20px; }
  .cart-drawer__footer { padding: 16px 20px 20px; }
}

/* ---------- legal modals (이용약관 / 개인정보처리방침, Figma 243:1843 / 243:1939) ---------- */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.legal-modal.is-open { visibility: visible; opacity: 1; }
.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.legal-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--yellow-light);
  border-radius: 30px;
  width: min(900px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.legal-modal.is-open .legal-modal__panel { transform: translateY(0); }
.legal-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.legal-modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--charcoal);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.legal-modal__body {
  background: var(--yellow);
  border-radius: 15px;
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 13px;
  line-height: 1.48;
  color: var(--charcoal);
}
.legal-modal__body h3 {
  font-family: 'Paperlogy';
  font-weight: 600;
  font-size: 15px;
  margin: 20px 0 8px;
}
.legal-modal__body h3:first-child { margin-top: 0; }
.legal-modal__body p { margin-bottom: 12px; }
.legal-modal__body ul,
.legal-modal__body ol {
  margin: 0 0 12px 20px;
}
.legal-modal__body li { margin-bottom: 4px; }
.legal-modal__body a { text-decoration: underline; }
.legal-modal__ok {
  align-self: center;
  margin-top: 20px;
  background: var(--charcoal);
  color: var(--yellow);
  font-family: var(--font-script);
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  padding: 8px 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* checkout modal — 자체 주문 폼 (스마트스토어로 이동시키지 않고 이 사이트
   안에서 주문을 접수받기 위함). .legal-modal과 같은 오버레이 패턴/색상
   토큰을 재사용하되, 문서가 아니라 폼이라 패널을 훨씬 좁게 잡았다. */
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.checkout-modal.is-open { visibility: visible; opacity: 1; }
.checkout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
/* 아래부터 Figma 265:810(웹) / 267:909(모바일) 그대로 — 색상·폰트는 전부
   기존 프로젝트 토큰(--yellow-light, --yellow, --charcoal, --font-display,
   --font-script, --font-body)과 정확히 일치해서 새 값 없이 재사용함 */
/* 2026-09-03: Figma 265:810 웹용 팝업이 훨씬 더 작은 스케일(524px 콘텐츠
   폭, 40px가 아니라 20px 패딩 등)로 개정됨 — 이하 desktop 기본값을 새
   스펙에 맞춰 전면 교체. 모바일(267:909)은 이번에 안 바뀌어서 아래 480px
   블록은 그대로 두되, 새 desktop 값과의 차이만 남기고 정리함. */
.checkout-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--yellow-light);
  border-radius: 18px;
  width: min(564px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.checkout-modal.is-open .checkout-modal__panel { transform: translateY(0); }
.checkout-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.checkout-modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--charcoal);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.checkout-modal__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.checkout-modal__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 10px;
  padding: 12px 24px 12px 12px;
  background: var(--yellow);
  border-radius: 10px;
}
.checkout-modal__item-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.checkout-modal__item-img {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: #335bb9;
  overflow: hidden;
}
.checkout-modal__item-img img { width: 100%; height: 100%; object-fit: cover; }
.checkout-modal__item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  color: var(--charcoal);
}
.checkout-modal__item-name { font-size: 16px; }
.checkout-modal__item-qty { font-size: 14px; }
.checkout-modal__item-total {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--charcoal);
  white-space: nowrap;
}
.checkout-modal__item-total span { font-size: 14px; }
.checkout-modal__item-total strong { font-size: 16px; font-weight: 600; }
.checkout-modal__grand-total {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin: -6px 0 12px;
}
#checkoutForm { display: flex; flex-direction: column; gap: 14px; }
.checkout-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.checkout-modal__field label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--charcoal);
}
#checkoutForm input,
#checkoutForm textarea {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: #fff;
  color: var(--charcoal);
  resize: none;
}
#checkoutForm input,
#checkoutName { height: 38px; }
#checkoutForm input::placeholder,
#checkoutForm textarea::placeholder { color: #9a9a9a; }
#checkoutForm input:focus,
#checkoutForm textarea:focus { outline: 2px solid var(--charcoal); outline-offset: 1px; }
.checkout-modal__address-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}
.checkout-modal__address-row {
  display: flex;
  gap: 10px;
}
.checkout-modal__address-row input { flex: 1; min-width: 0; }
.checkout-modal__address-btn {
  flex-shrink: 0;
  width: 75px;
  height: 38px;
  font-family: var(--font-script);
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 10px;
  border: none;
  background: var(--charcoal);
  color: var(--yellow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#checkoutForm textarea { height: 90px; }
.checkout-modal__note {
  font-size: 10px;
  line-height: 1.5;
  color: rgba(54, 54, 54, 0.7);
  margin: -10px 0 0;
}
.checkout-modal__error {
  font-size: 11px;
  color: #c0392b;
  margin: 0;
}
.checkout-modal__submit {
  width: 100%;
  height: 38px;
  margin-top: 4px;
  background: var(--charcoal);
  color: var(--yellow);
  font-family: var(--font-script);
  font-size: 14px;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.checkout-modal__submit:disabled { opacity: 0.6; cursor: default; }
.checkout-modal__order-id {
  text-align: center;
  font-size: 13px;
  color: var(--charcoal);
  margin: 12px 0 20px;
  line-height: 1.6;
}
.checkout-modal__order-id strong { font-size: 18px; }
.checkout-modal [data-step="success"] { text-align: center; }
.checkout-modal__bank {
  background: var(--yellow);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  text-align: left;
}
.checkout-modal__bank-label {
  font-size: 12px;
  color: var(--charcoal);
  margin: 0 0 8px;
  line-height: 1.5;
}
.checkout-modal__bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0;
}
#checkoutCopyAccount {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: var(--charcoal);
  color: var(--yellow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.checkout-modal__bank-amount {
  font-size: 12px;
  color: var(--charcoal);
  margin: 8px 0 0;
}
.checkout-modal__bank-amount strong { font-size: 16px; }
.checkout-modal__lookup-hint {
  font-size: 11px;
  color: rgba(54, 54, 54, 0.7);
  margin: 0 0 16px;
}
.checkout-modal__lookup-hint a { color: var(--charcoal); text-decoration: underline; }
.checkout-modal__ok {
  margin-top: 8px;
  background: var(--charcoal);
  color: var(--yellow);
  font-family: var(--font-script);
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 다음 우편번호 검색 — 팝업창 대신 체크아웃 패널 위에 겹치는 레이어에
   embed()로 직접 그려 넣는다 (팝업 차단 회피, see script.js). 처음엔 HTML의
   hidden 속성으로만 감췄었는데, 이 규칙의 display:flex가 UA 기본 스타일의
   [hidden]{display:none}과 동률 우선순위에서 이겨버려서 항상 폼 위를 덮고
   있었다 — .is-open 클래스로 명시적으로 켜는 방식으로 바꿈 (다른 모달들과
   동일한 패턴). */
.checkout-modal__address-layer { display: none; }
.checkout-modal__address-layer.is-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
}
.checkout-modal__address-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  flex-shrink: 0;
}
.checkout-modal__address-layer-header button {
  border: none;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#checkoutAddressEmbed { flex: 1; min-height: 0; }
#checkoutAddressEmbed iframe { width: 100%; height: 100%; border: none; }

/* Figma 267:909 — mobile checkout modal spec, 2026-09-03 재개정 (데스크탑
   개정과는 별도로 모바일도 한 번 더 다듬어짐: 팝업/아이템 라운드 더 작게,
   상품 사진·입력창 높이 더 작게 등). 메타데이터(328px 기준 프레임) 그대로 옮김. */
@media (max-width: 480px) {
  .checkout-modal { padding: 12px; }
  .checkout-modal__panel { border-radius: 12px; }
  .checkout-modal__close { top: 10px; right: 10px; width: 24px; height: 24px; }
  .checkout-modal__title { margin-bottom: 12px; }
  .checkout-modal__items { margin-bottom: 20px; }
  .checkout-modal__item { padding: 12px; }
  .checkout-modal__item-left { gap: 8px; }
  .checkout-modal__item-img { width: 46px; height: 46px; }
  .checkout-modal__item-info { gap: 4px; }
  .checkout-modal__item-qty { font-size: 12px; }
  .checkout-modal__item-total { gap: 10px; }
  .checkout-modal__item-total span { font-size: 12px; }
  .checkout-modal__item-total strong { font-size: 16px; }
  .checkout-modal__grand-total { font-size: 14px; margin: -12px 0 12px; }
  #checkoutForm { gap: 14px; }
  .checkout-modal__field { gap: 4px; }
  .checkout-modal__field label { font-size: 12px; }
  #checkoutForm input,
  #checkoutForm textarea { font-size: 11px; border-radius: 8px; }
  #checkoutForm input,
  #checkoutName { height: 32px; }
  .checkout-modal__address-group { gap: 8px; }
  .checkout-modal__address-btn { width: 90px; height: 32px; border-radius: 8px; }
  .checkout-modal__submit { height: 32px; border-radius: 8px; }
  .checkout-modal__address-layer { border-radius: 12px; }
}

@media (max-width: 480px) {
  .legal-modal { padding: 12px; }
  /* phones have much less height to work with than the desktop preview this
     was fitted against, so this tightens spacing (not the text itself) to
     keep the whole thing on one screen without an internal scroll */
  .legal-modal__panel { padding: 16px; border-radius: 20px; max-height: 92vh; }
  .legal-modal__title { font-size: 16px; margin-bottom: 12px; }
  .legal-modal__body { padding: 12px 14px; font-size: 11px; line-height: 1.4; }
  .legal-modal__body p { margin-bottom: 8px; }
  .legal-modal__body ul,
  .legal-modal__body ol { margin: 0 0 8px 16px; }
  .legal-modal__body li { margin-bottom: 3px; }
  .legal-modal__ok { margin-top: 12px; }
}

/* ---------- order-status.html — 고객용 주문조회 페이지 ---------- */
.order-status-page {
  display: flex;
  justify-content: center;
  padding: clamp(48px, 8vw, 100px) 20px;
  min-height: 50vh;
}
.order-status {
  width: min(480px, 100%);
}
.order-status h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--charcoal);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.order-status__lead {
  font-size: 14px;
  color: rgba(54, 54, 54, 0.75);
  margin: 0 0 28px;
  line-height: 1.5;
}
.order-status__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--yellow-light);
  border-radius: 20px;
  padding: 24px;
}
.order-status__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--charcoal);
}
.order-status__form input {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  background: #fff;
  color: var(--charcoal);
}
.order-status__form input:focus { outline: 2px solid var(--charcoal); outline-offset: 1px; }
.order-status__error { font-size: 13px; color: #c0392b; margin: 0; }
.order-status__form button {
  margin-top: 4px;
  height: 46px;
  background: var(--charcoal);
  color: var(--yellow);
  font-family: var(--font-script);
  font-size: 16px;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.order-status__form button:disabled { opacity: 0.6; cursor: default; }

.order-status__result {
  margin-top: 24px;
  background: #fff;
  border: 1px solid rgba(54, 54, 54, 0.12);
  border-radius: 20px;
  padding: 24px;
}
.order-status__steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.order-status__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  text-align: center;
}
/* connecting line runs through the row of dots, behind them */
.order-status__step::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: rgba(54, 54, 54, 0.15);
  z-index: 0;
}
.order-status__step:first-child::before { display: none; }
.order-status__step.is-done::before { background: var(--yellow); }
.order-status__step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(54, 54, 54, 0.15);
  position: relative;
  z-index: 1;
}
.order-status__step.is-done .order-status__step-dot { background: var(--yellow); }
.order-status__step.is-current .order-status__step-dot {
  background: var(--charcoal);
  box-shadow: 0 0 0 4px rgba(54, 54, 54, 0.15);
}
.order-status__step-label {
  font-size: 11px;
  color: rgba(54, 54, 54, 0.6);
}
.order-status__step.is-current .order-status__step-label,
.order-status__step.is-done .order-status__step-label {
  color: var(--charcoal);
  font-weight: 600;
}
.order-status__updated {
  font-size: 12px;
  color: rgba(54, 54, 54, 0.6);
  margin: 0 0 16px;
  text-align: center;
}
.order-status__items {
  border-top: 1px solid rgba(54, 54, 54, 0.1);
  padding-top: 16px;
  margin-bottom: 8px;
}
.order-status__items p {
  font-size: 14px;
  color: var(--charcoal);
  margin: 0 0 6px;
}
.order-status__total {
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0;
}

@media (max-width: 480px) {
  .order-status__step-label { font-size: 9px; }
  .order-status__steps { margin-bottom: 16px; }
}