/* =============================================================
   Earth Call — Mobile / Tablet stylesheet
   -------------------------------------------------------------
   Loaded with media="(max-width: 1024px)" — never applied on desktop.
   Goal: take the existing desktop design and adapt it cleanly to
   small screens. No new chrome, no extra menus, no redesign —
   only sizing, spacing and stacking tweaks so everything still
   looks like the PC version, just resized.

   File map
     1. Tokens
     2. Header
     3. Hero
     4. Intro
     5. Services
     6. How it works (steps)
     7. Reviews
     8. FAQ
     9. CTA
     10. Footer
     11. Scroll-to-top FAB
     12. Phone breakpoint (≤640px)
     13. Small-phone breakpoint (≤380px)
   ============================================================= */


/* ---------- 1. Tokens -------------------------------------- */
:root {
  --container-pad:  28px;
  --section-pad-y:  90px;
  --header-height:  72px;
}


/* ---------- 2. Header -------------------------------------- */
.header__inner { gap: 20px; }
.header__logo img { width: 100px; }
/* On any mobile width, the inline nav and language switcher live in
   the drawer instead of the header bar. Keeps the bar tidy. */
.header__nav  { display: none; }
.header__lang { display: none; }

/* Hamburger button — visible on tablet and phone, hidden on desktop. */
.header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 4px;
}
.header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text-on-dark);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* ---------- Mobile menu (drawer) --------------------------- */
.mobile-menu {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 380px);
  background: #0f1115;
  color: var(--color-text-on-dark);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 28px;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  /* respect iOS notches */
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

.mobile-menu.is-open                  { pointer-events: auto; }
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel    { transform: translateX(0); }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 24px;
}
.mobile-menu__logo img { width: 96px; height: auto; display: block; }
.mobile-menu__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  color: var(--color-text-on-dark);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.mobile-menu__close:hover { background: rgba(255, 255, 255, 0.12); }
.mobile-menu__close:active { transform: scale(.94); }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-on-dark);
  border-radius: 14px;
  transition: background .2s ease, color .2s ease;
}
.mobile-menu__nav a svg { color: rgba(255, 255, 255, 0.4); transition: transform .2s ease, color .2s ease; }
.mobile-menu__nav a:hover,
.mobile-menu__nav a:active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-yellow);
}
.mobile-menu__nav a:hover svg,
.mobile-menu__nav a:active svg { color: var(--color-yellow); transform: translateX(3px); }

.mobile-menu__foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mobile-menu__foot-label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.mobile-menu__lang {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.mobile-menu__lang .lang {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.mobile-menu__lang .lang--active {
  background: var(--color-yellow);
  color: #1a1a1a;
}

/* Burger morphs into an X while drawer is open — visual continuity. */
body.is-menu-open .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.is-menu-open .header__burger span:nth-child(2) { opacity: 0; }
body.is-menu-open .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.is-menu-open { overflow: hidden; }


/* ---------- 3. Hero ---------------------------------------- */
.hero__title   { font-size: 40px; line-height: 1.3; }
.hero__eyebrow { font-size: 16px; }


/* ---------- 4. Intro --------------------------------------- */
.intro { padding: 130px 0 80px; }
.intro .section-title    { font-size: 40px; }
.intro .section-subtitle { font-size: 17px; margin-top: 22px; }


/* ---------- 5. Services ------------------------------------ */
/* On tablet, drop to 2 columns so each card is wide enough that the
   absolutely-positioned hover panel (title + desc + CTA) actually fits
   inside the 4:3 media frame. At 3-cols the panel was clipping the
   "자세히 보기" button at the bottom. The phone breakpoint below
   replaces this grid with a swipe carousel. */
.service-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* Keep the hover panel from overflowing on the smaller cards. */
.service-card__hover { padding: 28px 24px; }


/* ---------- 6. How it works -------------------------------- */
/* Disable sticky stack on smaller screens — steps flow naturally.
   Pin dark-step backgrounds to the bottom-center so the phone mockup
   in the artwork stays in frame instead of getting cropped weird when
   the section shrinks. */
.step {
  position: relative;
  min-height: auto;
  height: auto;
  padding: 72px 0;
  background-position: center bottom;
}
.step__inner { gap: 28px; }
.step__title    { font-size: 32px; }
.step__subtitle { font-size: 17px; }
.step__phone img { max-width: 280px; }


/* ---------- 7. Reviews ------------------------------------- */
.reviews__intro { margin-bottom: 48px; }
.review-card    { flex-basis: 320px; }


/* ---------- 8. FAQ ----------------------------------------- */
.faq-item details > summary { font-size: 16px; padding: 24px 4px; }


/* ---------- 9. CTA ----------------------------------------- */
.cta { padding: 220px 0 240px; }
.cta__title    { font-size: 36px; }
.cta__subtitle { font-size: 17px; }


/* ---------- 10. Footer ------------------------------------- */
.site-footer        { padding: 60px 0 70px; }
.site-footer__grid  { grid-template-columns: 1fr 1fr; gap: 32px; }


/* ---------- 11. Scroll-to-top FAB --------------------------
   The desktop offset uses a 1920px-page anchor that pushes the
   button off-screen on small viewports. Reset to a viewport edge. */
.scroll-top {
  right: 20px;
  bottom: 20px;
}


/* ---------- About page ------------------------------------- */
.about-hero { min-height: 100vh; }
.about-hero__title   { font-size: 38px; }
.about-hero__eyebrow { font-size: 14px; }

.about-section            { padding: 110px 0 90px; }
.about-section--platform  { padding-top: 100px; padding-bottom: 110px; }
.about-section__eyebrow   { font-size: 28px; }
.about-section__title     { font-size: 36px; }
.about-section__body      { font-size: 17px; }
.about-section__wide-media { margin-top: 48px; }

.about-pillar { padding: 100px 0; }
.about-pillar__inner {
  grid-template-columns: 1fr;
  gap: 40px;
}
/* Image always above text on tablet — keeps the scan order
   consistent regardless of the desktop alternation. */
.about-pillar--text-left  .about-pillar__media,
.about-pillar--image-left .about-pillar__media { order: 1; }
.about-pillar--text-left  .about-pillar__text,
.about-pillar--image-left .about-pillar__text  { order: 2; }
.about-pillar__title   { font-size: 30px; }
.about-pillar__body    { font-size: 17px; max-width: none; }

/* History timeline — tablet */
.about-history { padding: 100px 0 110px; }
.about-history__head {
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 40px;
}
.about-history__title { font-size: 32px; }
.about-history__stat-value { font-size: 22px; }
.about-history__row {
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "index year"
    "tag   tag"
    "detail detail";
  row-gap: 18px;
  column-gap: 24px;
  padding: 34px 0;
}
.about-history__index  { grid-area: index; align-self: start; padding-top: 16px; }
.about-history__year   { grid-area: year; }
.about-history__tag    { grid-area: tag; padding-left: 88px; }
.about-history__detail { grid-area: detail; padding-left: 88px; }
.about-history__year-num { font-size: 76px; }
.about-history__detail-title { font-size: 20px; }
.about-history__row--featured .about-history__month { font-size: 24px; }


/* ---------- Services page ---------------------------------- */
.services-hero { min-height: 100vh; }
.services-hero__brand img { width: 200px; }
.services-hero__caption   { font-size: 18px; margin-top: 22px; }

.services-row { padding: 90px 0; }
.services-row__inner {
  grid-template-columns: 1fr;
  gap: 40px;
}
.services-row__title { font-size: 30px; margin-bottom: 20px; }
.services-row__body  { font-size: 16px; max-width: none; }

.vehicles { padding: 90px 0 100px; }
.vehicles__title { font-size: 30px; margin-bottom: 20px; }
.vehicles__body  { font-size: 16px; }
.vehicle-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.vehicle-card { padding: 20px 0 0; }
.vehicle-card__name { font-size: 16px; }

.services-app { padding: 90px 0 100px; }
.services-app__inner {
  grid-template-columns: 1fr;
  gap: 48px;
}
.services-app__title { font-size: 30px; }
.services-app__body  { font-size: 16px; max-width: none; }
.services-app__media img { max-width: 320px; }


/* =============================================================
   12. Phone breakpoint (≤640px)
   Stack everything single-column, shrink the type scale.
   ============================================================= */
@media (max-width: 640px) {
  :root {
    --container-pad: 20px;
    --section-pad-y: 70px;
    --header-height: 60px;
  }

  /* Header — burger is the only right-side control; logo stays left. */
  .header__logo img { width: 88px; }

  /* Hero */
  .hero__eyebrow { font-size: 14px; margin-bottom: 16px; }
  .hero__title   { font-size: 28px; }
  .hero__dots    { bottom: 70px; }
  .hero__dot     { width: 8px; height: 8px; }
  .hero__dot.is-active { width: 22px; }

  /* Intro */
  .intro { padding: 100px 0 60px; }
  .intro .section-title    { font-size: 28px; }
  .intro .section-subtitle { font-size: 15px; margin-top: 16px; }

  .section-title    { font-size: 26px; }
  .section-subtitle { font-size: 15px; }

  .eyebrow { font-size: 14px; }

  /* Services — horizontal swipeable carousel (slide), not a vertical stack.
     Cards take ~80% of the viewport so the next card peeks in from the
     right, signalling that the row is swipeable. Native scroll-snap
     locks each card neatly in place. */
  .service-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    /* Edge-to-edge: undo the .container side padding so the first card
       starts flush with the page edge while keeping the snap-padding. */
    margin-left:  calc(var(--container-pad) * -1);
    margin-right: calc(var(--container-pad) * -1);
    padding: 4px var(--container-pad) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--container-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .service-grid::-webkit-scrollbar { display: none; }

  .service-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
  }
  .service-card__media { aspect-ratio: 4 / 3; }

  /* Phones don't have hover — show the info panel by default
     so the title / description / CTA are always reachable. */
  .service-card__hover {
    position: static;
    inset: auto;
    opacity: 1;
    clip-path: none;
    pointer-events: auto;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 24px 22px 26px;
    flex: 1;
  }
  .service-card__title { font-size: 19px; margin-bottom: 10px; }
  .service-card__desc  { font-size: 14px; padding-bottom: 18px; }
  .service-card__btn   { padding: 14px 20px; font-size: 14px; }

  /* Steps — stacked, image above text. Tightened to feel app-like:
     less wasted padding, larger phone mockup so it reads as the hero
     of the slide, and a constrained text column for clean rhythm.   */
  .step          { padding: 56px 0; }
  .step__inner   { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .step--image-left  .step__phone,
  .step--image-right .step__phone { order: 1; width: 100%; }
  .step--image-left  .step__text,
  .step--image-right .step__text  {
    order: 2;
    text-align: center;
    max-width: 320px;
    padding: 0 4px;
  }
  /* Phone mockup: scale to viewport so it stays prominent on every
     phone size, but cap it so it never overpowers the text.         */
  .step__phone img {
    width: 64%;
    max-width: 280px;
    min-width: 200px;
  }
  .step__title    { font-size: 22px; line-height: 1.4; }
  .step__subtitle { font-size: 14.5px; line-height: 1.6; margin-top: 10px; }
  .step__badge    { margin-bottom: 16px; padding: 6px 18px; font-size: 12px; }

  /* Intro band above STEP 01 — tighten the *top* of the intro, but
     leave the step's own padding-bottom alone so STEP 01 has the same
     gap-to-next-step as steps 02/03/04. */
  .how__intro { padding: 64px 0 28px; }
  .step--with-intro .how__intro { padding: 64px 0 32px; }

  /* Dark steps: strengthen the overlay so the title/subtitle stay
     legible when the bg image is scaled into a smaller frame.       */
  .step--dark .step__overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.62) 50%,
      rgba(0, 0, 0, 0.78) 100%
    );
  }

  /* Reviews — keep the horizontal card carousel, just smaller */
  .reviews__intro { margin-bottom: 32px; }
  .reviews__track { gap: 16px; }
  .review-card    { flex-basis: 280px; padding: 24px 22px; }

  /* FAQ */
  .faq-list { margin-top: 36px; }
  .faq-item details > summary { font-size: 15px; padding: 22px 4px; gap: 16px; }
  .faq-item__body { font-size: 14px; }

  /* CTA */
  .cta { padding: 160px 0 180px; }
  .cta__title    { font-size: 26px; }
  .cta__subtitle { font-size: 15px; }
  .cta__stores   { gap: 10px; margin-top: 28px; }
  .store-btn     { padding: 12px 18px; }

  /* Footer */
  .site-footer       { padding: 50px 0 60px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__brand img { width: 110px; }

  /* FAB */
  .scroll-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }

  /* About page — phone */
  .about-hero { min-height: 100vh; }
  .about-hero__title   { font-size: 28px; }
  .about-hero__eyebrow { font-size: 13px; }

  .about-section            { padding: 90px 0 70px; }
  .about-section--platform  { padding-top: 80px; padding-bottom: 90px; }
  .about-section__eyebrow   { font-size: 22px; }
  .about-section__title     { font-size: 28px; margin-bottom: 22px; }
  .about-section__body      { font-size: 16px; line-height: 1.85; }
  .about-section__wide-media { margin-top: 36px; }

  .about-pillar { padding: 80px 0; }
  .about-pillar__inner { gap: 30px; }
  .about-pillar__title   { font-size: 26px; margin-bottom: 18px; }
  .about-pillar__body    { font-size: 16px; line-height: 1.85; }

  /* History timeline — phone */
  .about-history { padding: 80px 0 90px; }
  .about-history__title { font-size: 26px; }
  .about-history__lede  { font-size: 15px; line-height: 1.8; }
  .about-history__stats { grid-template-columns: 1fr 1fr 1fr; }
  .about-history__stat  { padding: 14px 12px; }
  .about-history__stat-value { font-size: 19px; }
  .about-history__stat-label { font-size: 10px; letter-spacing: 0.14em; }
  .about-history__row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "index"
      "year"
      "tag"
      "detail";
    row-gap: 14px;
    padding: 28px 0;
  }
  .about-history__index { padding-top: 0; }
  .about-history__tag, .about-history__detail { padding-left: 0; }
  .about-history__year-num { font-size: 60px; }
  .about-history__detail-title { font-size: 18px; }
  .about-history__detail-list { font-size: 13.5px; }
  .about-history__row--featured .about-history__month { font-size: 22px; }

  /* Services — phone */
  .services-hero__brand img { width: 160px; }
  .services-hero__caption   { font-size: 16px; margin-top: 18px; }

  .services-row { padding: 70px 0; }
  .services-row__title { font-size: 24px; }
  .services-row__body  { font-size: 15px; line-height: 1.8; }

  .vehicles { padding: 70px 0 80px; }
  .vehicles__intro { margin-bottom: 40px; }
  .vehicles__title { font-size: 24px; }
  .vehicles__body  { font-size: 15px; line-height: 1.8; }
  .vehicle-grid { gap: 14px; }
  .vehicle-card__name { font-size: 14.5px; margin-bottom: 14px; }

  .services-app { padding: 70px 0 80px; }
  .services-app__inner { gap: 36px; }
  .services-app__title { font-size: 24px; }
  .services-app__body  { font-size: 15px; line-height: 1.8; margin-bottom: 28px; }
  .services-app__media img { max-width: 260px; }

  .vehicle-popup__panel { padding: 24px 0 0; }
  .vehicle-popup__title { font-size: 18px; padding: 0 22px; }
  .vehicle-popup__body  { font-size: 14px; padding: 0 22px; }
}


/* =============================================================
   13. Small-phone breakpoint (≤380px)
   ============================================================= */
@media (max-width: 380px) {
  :root { --container-pad: 16px; }

  .hero__title { font-size: 26px; }
  .review-card { flex-basis: 260px; }
}