/* ==========================================================================
   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 #2a3c60;
  border-radius: 10px;
  background: #121e33;
  cursor: pointer;
  flex: 0 0 auto;
}
.ep-burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #d2dcea;
  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); }


/* ==========================================================================
   Language switcher (flag + dropdown). Pure CSS hover/focus — survives the
   React bundler because it keys off class names only.
   ========================================================================== */
.ep-lang { position: relative; margin-left: 6px; display: inline-flex; }
.ep-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px; border: 1px solid #2a3c60;
  font: 700 11.5px 'Inter', sans-serif; letter-spacing: .04em;
  color: #c3cfdf; cursor: pointer; user-select: none;
}
.ep-lang:hover .ep-lang-btn { border-color: #3a5f92; color: #fff; }
.ep-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 99;
  display: none; flex-direction: column; gap: 2px; min-width: 138px;
  background: #0f1b30; border: 1px solid #2a3c60; border-radius: 12px;
  padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.ep-lang:hover .ep-lang-menu, .ep-lang:focus-within .ep-lang-menu { display: flex; }
.ep-lang-menu::before { /* hover bridge so the menu doesn't close in the gap */
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.ep-lang-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 8px;
  font: 600 12.5px 'Pretendard', sans-serif; color: #c3cfdf;
  white-space: nowrap; text-decoration: none;
}
.ep-lang-menu a:hover { background: #1e2e4a; color: #fff; }
.ep-lang-menu a.on { background: #12263f; color: #7fc3ff; }

@media (max-width: 1100px) {
  /* inside the hamburger panel: no hover — show the three options inline */
  .ep-lang { width: 100%; margin: 6px 0 0; justify-content: center; }
  .ep-lang-btn { display: none !important; }
  .ep-lang-menu {
    position: static; display: flex !important; flex-direction: row;
    justify-content: center; gap: 8px; min-width: 0;
    background: transparent; border: none; box-shadow: none; padding: 4px 0 2px;
  }
  .ep-lang-menu a { padding: 8px 12px; }
}

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

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

  body { background: #f7f9fc !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: #0b1322 !important;
    padding: 8px 14px 16px !important;
    border-bottom: 1px solid #223250 !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 {
    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;
  }

  /* Keep the language switcher as a compact row inside the mobile menu.
     The general nav-link rule above must not turn its nested spans into
     full-width block elements. */
  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger) > :last-child .ep-lang {
    display: flex !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }
  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger) > :last-child .ep-lang-menu {
    display: flex !important;
    width: auto !important;
    padding: 4px 0 2px !important;
  }
  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger) > :last-child .ep-lang-menu a {
    display: flex !important;
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }
  [data-screen-label] div[style*="backdrop-filter"]:has(> .ep-burger) > :last-child .ep-lang-menu a span {
    display: inline !important;
    width: auto !important;
    padding: 0 !important;
    font-size: inherit !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;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  [data-screen-label] h1 span { overflow-wrap: anywhere; word-break: break-word; }
  [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")
     --------------------------------------------------------------- */
  /* NOTE: :not([style*="align-items: flex-start"]) excludes bullet/list rows
     (e.g. the patent list on Company) where wrapping detaches the bullet dot
     from its text — those rows shrink via min-width:0 instead. */
  [data-screen-label] div[style*="display: flex; gap: 12px"]:not([style*="align-items: flex-start"]),
  [data-screen-label] div[style*="display: flex; gap: 18px"]:not([style*="align-items: flex-start"]),
  [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; }

  /* decorative hero typography (absolute, bottom-right) — hide on mobile
     where it would collide with the stacked hero content */
  [data-screen-label] .ep-hero-type { 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;
  }

  /* Home's visual is a compact label card, not a full-image text panel.
     Keep its title readable and remove the secondary copy that collides with
     the floating operation label on narrow screens. */
  .ep-home-hero-overlay {
    width: 62% !important;
    padding-left: 20px !important;
    padding-right: 16px !important;
  }

  .ep-home-hero-overlay p,
  .ep-home-hero-live {
    display: none !important;
  }

  .ep-home-hero-title {
    font-size: 23px !important;
    line-height: 1.3 !important;
    margin-top: 8px !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;
  }

  /* Service highlight cards keep their copy pinned to the bottom. At narrower
     widths, translated titles and descriptions can outgrow the generic image
     card height and clip their label, so reserve enough room for the full CTA. */
  #services > div[style*="grid-template-columns"] > div {
    min-height: 300px !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;
  }
}

/* ----- desktop / wide displays ----- */
/* The original pages were authored as 1280px white canvases. On wide screens
   that turns the site into a centered poster with detached side gutters. Make
   the page surface full-width, then constrain only the usable section content. */
@media (min-width: 1101px) {
  :root { --ep-content-edge: max(40px, calc((100vw - 1680px) / 2)); }

  body { background: #fff !important; }

  [data-screen-label] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* Every top-level band owns the full viewport background. Its content aligns
     to one shared desktop grid, which keeps text readable without wasting the
     surrounding canvas on ultrawide displays. */
  [data-screen-label] > div[style*="padding:"] {
    padding-left: var(--ep-content-edge) !important;
    padding-right: var(--ep-content-edge) !important;
  }

  /* Explicit wide-screen anchors for the pages whose hero copy lives inside
     the full-bleed image layer. The enlarged max-width preserves each page's
     original reading measure after the left edge moves onto the shared grid. */
  .ep-wide-hero-copy {
    padding-left: var(--ep-content-edge) !important;
    padding-right: 40px !important;
  }

  .ep-hero-copy-650 { max-width: calc(var(--ep-content-edge) + 610px) !important; }
  .ep-hero-copy-620 { max-width: calc(var(--ep-content-edge) + 580px) !important; }
  .ep-hero-copy-600 { max-width: calc(var(--ep-content-edge) + 560px) !important; }

  /* Metric bars remain full-bleed surfaces, with the grid itself aligned to
     the same content edges as the surrounding sections. */
  .ep-metric-strip {
    padding-left: var(--ep-content-edge) !important;
    padding-right: var(--ep-content-edge) !important;
  }

  /* SwingOn's hero signature stays inside the shared content frame instead
     of drifting to the physical edge of an ultrawide display. */
  .ep-hero-type {
    right: var(--ep-content-edge) !important;
  }

  /* Home's compact three-business grid was intentionally narrow at 1280px.
     Let it participate in the wider content grid while preserving its cards. */
  [data-screen-label] div[style*="max-width: 1080px"] {
    max-width: min(100%, 1440px) !important;
  }

  [data-screen-label] div[style*="grid-template-columns"][style*="gap: 14px"],
  [data-screen-label] div[style*="grid-template-columns"][style*="gap: 16px"],
  [data-screen-label] div[style*="grid-template-columns"][style*="gap: 18px"],
  [data-screen-label] div[style*="grid-template-columns"][style*="gap: 20px"] {
    gap: clamp(18px, 1.4vw, 28px) !important;
  }
}