/* =====================================================================
 * Mobile responsive overrides.
 * Strategy:
 *  - On mobile (≤768px) the page renders at device-width (no viewport zoom).
 *  - We then "undo" Figma's fixed-px layouts: containers become fluid,
 *    horizontally-arranged elements stack vertically, buttons go full-width,
 *    and font sizes are tuned for phone reading distance.
 *  - Selectors prefer stable hooks (data-breakpoint-id, data-isimage,
 *    .textContents) over Figma's hashed `css-XXXX` class names, but we use
 *    the hash names where there's no semantic alternative.
 * ===================================================================== */

html, body {
  -webkit-text-size-adjust: 100%;
}
a, button { -webkit-tap-highlight-color: transparent; }

/* Allow vertical scroll, prevent stray horizontal scroll */
html, body { overflow-x: hidden; }

/* =====================================================================
 * MOBILE: ≤768px
 * ===================================================================== */
@media (max-width: 768px) {

  /* ---- Universal: relax the fixed-design width ----------------------- */
  [data-breakpoint="true"] {
    --content-min-width: 100% !important;
    --content-min-height: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* All <img> and Figma image containers stay within the viewport */
  [data-isimage="true"],
  [data-isimage="true"] > img,
  img { max-width: 100% !important; height: auto !important; }

  /* ===================================================================
   * HOME PAGE  (data-breakpoint-id="node-0_4", desktop only design)
   * =================================================================== */
  [data-breakpoint-id="node-0_4"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 20px !important;
  }
  /* The 849×283 absolutely-positioned center box → flow with content */
  [data-breakpoint-id="node-0_4"] .css-154xlb {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    gap: 28px !important;
  }
  /* Undo the translate(-50%,-50%) centering since we're now in flow */
  [data-breakpoint-id="node-0_4"] .css-vxfvp6 { transform: none !important; }

  /* "TOM N TOMS COFFEE / White Station" hero image */
  [data-breakpoint-id="node-0_4"] [data-isimage="true"].css-ark3l2 {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 849.385 / 141.169 !important;
    margin: 0 auto !important;
  }
  /* The text wrapper above the hero image: center-align on mobile */
  [data-breakpoint-id="node-0_4"] .css-u449si {
    align-items: center !important;
    width: 100% !important;
  }
  /* "무인 카페의 새로운 기준," */
  [data-breakpoint-id="node-0_4"] .css-bcoafy {
    font-size: 15px !important;
    line-height: 22px !important;
  }
  /* Button row → vertical stack, full-width */
  [data-breakpoint-id="node-0_4"] .css-z8tz6q {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 360px !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }
  [data-breakpoint-id="node-0_4"] .css-9bw8xp {
    width: 100% !important;
    padding: 16px 24px !important;
  }
  /* Button label */
  [data-breakpoint-id="node-0_4"] .css-7ebqii {
    font-size: 15px !important;
    text-align: center !important;
    width: 100% !important;
  }
  [data-breakpoint-id="node-0_4"] .css-3wkftf {
    line-height: 22px !important;
  }

  /* ===================================================================
   * 입점 + 파트너 PAGES  — make the Figma-pinned-px layout flexible.
   *
   * Figma sets explicit `width: <px>`, `flex-shrink: 0`, etc. on tons of
   * elements (113 px-widths in 입점, 59 in 파트너). On a phone these blow
   * past the viewport. We aggressively neutralise the pins:
   *   • All descendants: max-width:100vw, min-width:0  → can shrink
   *   • All descendants: flex-shrink:1, flex-wrap:wrap → can shrink + reflow
   *   • Explicit widths > 280px: collapse to 100%
   *   • All <img>/image-containers: width:100%, height:auto
   *   • Force inline-grid → grid with single fluid column so children stack
   * =================================================================== */
  [data-breakpoint-id="node-35_26203"] { display: none !important; }

  [data-breakpoint-id="node-260_8811"],
  [data-breakpoint-id="node-35_27917"] { padding: 0 !important; }

  /* Allow any descendant to shrink and not blow past viewport */
  [data-breakpoint-id="node-260_8811"] *,
  [data-breakpoint-id="node-35_27917"] * {
    max-width: 100vw !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  /* User preference: stack horizontal layouts vertically on mobile.
     Force all flex containers within long pages to column direction.
     Exceptions are handled below (e.g. the nav row keeps its row layout). */
  [data-breakpoint-id="node-260_8811"] [class*="css-"],
  [data-breakpoint-id="node-35_27917"] [class*="css-"] {
    flex-direction: column !important;
  }
  /* Some rows should stay row: top nav, icon+label pairs, small inline groups.
     Detect these by their narrower width: small flex rows (≤80px wide gap pattern)
     usually want to stay inline. We use specific class allowlist instead. */
  [data-breakpoint-id="node-260_8811"] .css-ttken5,
  [data-breakpoint-id="node-260_8811"] .css-l90j9u,
  [data-breakpoint-id="node-260_8811"] .css-67ic49 {
    flex-direction: row !important;
  }

  /* Images: clamp to parent (NOT forced to 100%) so logos stay sized */
  [data-breakpoint-id="node-260_8811"] img,
  [data-breakpoint-id="node-35_27917"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Fixed-position top bars: tighten padding for phones */
  [data-breakpoint-id="node-260_8811"] .css-ttken5 {
    padding: 10px 12px !important;
  }
  /* Nav row: allow wrap so logo + CTA-button can stack */
  [data-breakpoint-id="node-260_8811"] .css-l90j9u {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* The right-side button-group: keep its natural width but allow shrink */
  [data-breakpoint-id="node-260_8811"] .css-67ic49 {
    width: auto !important;
    max-width: 60% !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Don't force all flex containers to wrap - that breaks horizontal alignments.
     Instead, only wrap specific known-problematic containers (handled above). */

  /* Allow Korean text to wrap properly. Figma uses white-space:nowrap on big
     headings which prevents wrapping; we force normal wrapping on mobile. */
  [data-breakpoint-id="node-260_8811"] *,
  [data-breakpoint-id="node-35_27917"] * {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* =====================================================================
 * Universal grid/inline-grid override for the two long pages.
 * Apply outside @media so it also works on small tablets.
 * `display: inline-grid` Figma containers use `grid-template-columns: auto`
 * by default — we override to a flexible 1fr column so children shrink.
 * ===================================================================== */
@media (max-width: 768px) {
  [data-breakpoint-id="node-260_8811"] [class*="css-us4svo"],
  [data-breakpoint-id="node-35_27917"] [class*="css-us4svo"],
  [data-breakpoint-id="node-260_8811"] [style*="inline-grid"],
  [data-breakpoint-id="node-35_27917"] [style*="inline-grid"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
}

/* Smaller phones */
@media (max-width: 380px) {
  [data-breakpoint-id="node-0_4"] .css-bcoafy { font-size: 14px !important; }
  [data-breakpoint-id="node-0_4"] [data-isimage="true"].css-ark3l2 { max-width: 280px !important; }
}