/* ==========================================================================
   ElixirPay – mobile responsive layer
   --------------------------------------------------------------------------
   IMPORTANT: this site is rendered by the Claude artifact bundler (support.js),
   which uses ReactDOM. React strips the authored `style="..."` attribute and
   re-serializes it through the browser, so the live DOM reads e.g.
       style="position: sticky; ... padding: 14px 40px; background: rgb(...)"
   (space after every colon, colors normalized to rgb()), NOT the authored
   "position:sticky;...;background:#fff" form.

   Therefore attribute selectors here MUST match the *serialized* form:
     - prefer property-NAME-only matches (immune to value normalization),
       e.g. [style*="backdrop-filter"] uniquely identifies the nav bar;
     - when a value is needed, write it serialized: "padding: 64px 40px",
       "width: 56%", "min-height: 280px" (px / % values are preserved as-is);
     - never match on colors (they become rgb()).
   ========================================================================== */

/* ==========================================================================
   Hamburger button (injected by assets/nav.js). Hidden on desktop; shown at
   <=900px. Lives outside the media query so the default state is "hidden".
   ========================================================================== */
.ep-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.ep-burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #22304a;
  transition: transform .25s ease, opacity .2s ease;
}
[data-screen-label] div[style*="backdrop-filter"].ep-open .ep-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-screen-label] div[style*="backdrop-filter"].ep-open .ep-burger span:nth-child(2) { opacity: 0; }
[data-screen-label] div[style*="backdrop-filter"].ep-open .ep-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----- tablet / mobile ----- */
@media (max-width: 900px) {

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body { background: #fff !important; }

  /* the page canvas: drop the fixed 1280px frame */
  [data-screen-label] {
    max-width: none !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
  }

  /* let every box shrink below its content width */
  [data-screen-label] * { min-width: 0 !important; }

  /* ---------------------------------------------------------------
     NAV  – uniquely identified by `backdrop-filter` (only the nav bar
     uses it). Brand on the left, hamburger on the right; the link group
     (the nav's last child) becomes a dropdown panel toggled by .ep-open.

     NOTE: assets/nav.js injects the .ep-burger button. React owns this
     subtree and would clobber any data-*/class we add during its mount,
     so the CSS keys off the *structure* (> :last-child) and the presence
     of the injected button (:has(> .ep-burger)). When JS hasn't run, the
     :not(:has(...)) fallback simply wraps the links so nothing overflows.
     --------------------------------------------------------------- */
  [data-screen-label] div[style*="backdrop-filter"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    /* no overflow:hidden — it would clip the absolute dropdown */
  }

  /* show the injected hamburger */
  .ep-burger { display: flex !important; }

  /* --- hamburger mode (JS ran): link group -> dropdown panel --- */
  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger) > :last-child {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: auto !important;
    background: #fff !important;
    padding: 8px 14px 16px !important;
    border-bottom: 1px solid #e8edf4 !important;
    box-shadow: 0 18px 34px rgba(16, 26, 42, .14) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: max-height .28s ease, opacity .2s ease !important;
  }

  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger).ep-open > :last-child {
    max-height: 80vh !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger) > :last-child a,
  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger) > :last-child span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
  }

  /* --- fallback (no JS / no burger): just wrap the links, no overflow --- */
  [data-screen-label] div[style*="backdrop-filter"]:not(:has(> .ep-burger)) > :last-child {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    font-size: 13px !important;
  }
  [data-screen-label] div[style*="backdrop-filter"]:not(:has(> .ep-burger)) a,
  [data-screen-label] div[style*="backdrop-filter"]:not(:has(> .ep-burger)) span {
    white-space: nowrap !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
  }

  /* ---------------------------------------------------------------
     GRIDS – collapse every multi-column grid to a single column.
     (property-name match: works regardless of value serialization)
     --------------------------------------------------------------- */
  [data-screen-label] div[style*="grid-template-columns"]:not(.tech-grid) {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* tech-stack logo wall (Company): keep a compact multi-column grid instead
     of collapsing to 1 column, and let each logo keep its aspect ratio. */
  [data-screen-label] .tech-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  [data-screen-label] .tech-grid > div { height: 78px !important; }
  /* preserve aspect ratio: give each logo a definite box and let object-fit
     letterbox it. In the flex cell, auto/max-* sizing resolves the width to
     max-content and squashes the logo; object-fit:contain sidesteps that by
     scaling the bitmap to fit while keeping its ratio. */
  [data-screen-label] .tech-grid img {
    width: 100% !important;
    height: 34px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* ---------------------------------------------------------------
     SECTION PADDING – shrink the fixed 40px / 44px side padding.
     Substring matches the serialized 2-value prefix, so it also
     catches 3-value paddings like "padding: 64px 40px 60px".
     --------------------------------------------------------------- */
  [data-screen-label] [style*="padding: 22px 40px"],
  [data-screen-label] [style*="padding: 30px 40px"],
  [data-screen-label] [style*="padding: 40px 40px"],
  [data-screen-label] [style*="padding: 52px 44px"],
  [data-screen-label] [style*="padding: 60px 40px"],
  [data-screen-label] [style*="padding: 64px 40px"],
  [data-screen-label] [style*="padding: 70px 40px"],
  [data-screen-label] [style*="padding: 72px 40px"],
  [data-screen-label] [style*="padding: 74px 40px"],
  [data-screen-label] [style*="padding: 78px 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---------------------------------------------------------------
     HEADINGS / TEXT
     --------------------------------------------------------------- */
  [data-screen-label] h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
  }
  [data-screen-label] h2 { font-size: 27px !important; line-height: 1.28 !important; }
  [data-screen-label] h3 { line-height: 1.32 !important; }
  [data-screen-label] p  { max-width: 100% !important; }

  /* ---------------------------------------------------------------
     FLEX ROWS – wrap button / stat rows so they never overflow.
     (serialized "display: flex; gap: Npx")
     --------------------------------------------------------------- */
  [data-screen-label] div[style*="display: flex; gap: 12px"],
  [data-screen-label] div[style*="display: flex; gap: 18px"],
  [data-screen-label] div[style*="display: flex; gap: 26px"],
  [data-screen-label] div[style*="display: flex; gap: 30px"] {
    flex-wrap: wrap !important;
  }

  /* thin vertical divider lines between stats – hide when wrapped */
  [data-screen-label] div[style*="width: 1px"] { display: none !important; }

  /* ---------------------------------------------------------------
     IMAGE / OVERLAY CARDS
     --------------------------------------------------------------- */
  /* media wrappers using aspect-ratio: fill the column */
  [data-screen-label] div[style*="aspect-ratio"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* text panels overlaid on hero/feature images: use full width */
  [data-screen-label] [style*="width: 48%"],
  [data-screen-label] [style*="width: 52%"],
  [data-screen-label] [style*="width: 54%"],
  [data-screen-label] [style*="width: 56%"],
  [data-screen-label] [style*="width: 60%"],
  [data-screen-label] [style*="width: 62%"] {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* tame the tall fixed-height image cards */
  [data-screen-label] [style*="min-height: 460px"],
  [data-screen-label] [style*="min-height: 520px"],
  [data-screen-label] [style*="min-height: 380px"] {
    min-height: 340px !important;
  }
  [data-screen-label] [style*="min-height: 260px"],
  [data-screen-label] [style*="min-height: 280px"],
  [data-screen-label] [style*="min-height: 300px"],
  [data-screen-label] [style*="min-height: 340px"] {
    min-height: 240px !important;
  }

  /* the floating "QR 결제부터 정산까지" card (left: -22px): inline it */
  [data-screen-label] [style*="left: -22px"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 14px !important;
    width: auto !important;
  }

  /* images never overflow, except object-fit cover fills used as backdrops */
  [data-screen-label] img { max-width: 100% !important; height: auto; }
  [data-screen-label] img[style*="object-fit: cover"] {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* (footer columns already collapse via the main grid rule above) */
}

/* ----- small phones ----- */
@media (max-width: 560px) {

  [data-screen-label] div[style*="backdrop-filter"] { padding: 10px 14px !important; }

  [data-screen-label] h1 { font-size: 30px !important; }
  [data-screen-label] h2 { font-size: 23px !important; }

  /* tighter side padding */
  [data-screen-label] [style*="padding: 22px 40px"],
  [data-screen-label] [style*="padding: 30px 40px"],
  [data-screen-label] [style*="padding: 40px 40px"],
  [data-screen-label] [style*="padding: 52px 44px"],
  [data-screen-label] [style*="padding: 60px 40px"],
  [data-screen-label] [style*="padding: 64px 40px"],
  [data-screen-label] [style*="padding: 70px 40px"],
  [data-screen-label] [style*="padding: 72px 40px"],
  [data-screen-label] [style*="padding: 74px 40px"],
  [data-screen-label] [style*="padding: 78px 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* full-width CTA / hero buttons */
  [data-screen-label] div[style*="display: flex; gap: 12px"] > a {
    flex: 1 1 100% !important;
    text-align: center !important;
  }

  /* stat blocks stack one per row */
  [data-screen-label] div[style*="display: flex; gap: 26px"] > div {
    flex: 1 1 100% !important;
  }

  /* media cards a touch shorter */
  [data-screen-label] [style*="min-height: 260px"],
  [data-screen-label] [style*="min-height: 280px"],
  [data-screen-label] [style*="min-height: 300px"],
  [data-screen-label] [style*="min-height: 340px"] {
    min-height: 210px !important;
  }

  /* shrink the intro splash ring (home page) */
  [data-screen-label] [style*="width: 300px"][style*="height: 300px"] {
    width: 220px !important;
    height: 220px !important;
  }
}