/* =============================================================
   Earth Call — Landing page
   Design canvas: 1920px wide.
   File map:
     :root              design tokens (colors, sizes, fonts)
     base reset         minimal element resets
     .container         centered content max-width
     .site-header       sticky top navigation
     .hero              full-bleed hero section
     .intro/.services   text intro + 3 service cards
     .how               5-step booking flow (alternating bands)
     .reviews           horizontal testimonial rail
     .faq               accordion list
     .cta               full-bleed CTA banner with store buttons
     .site-footer       company info footer
   ============================================================= */


/* ---------- 1. Tokens --------------------------------------- */
:root {
  /* brand */
  --color-yellow:        #FFCE00;
  --color-yellow-soft:   #FFE066;

  /* surfaces */
  --color-bg-dark:       #0D0D0D;
  --color-bg-darker:     #000000;
  --color-bg-light:      #FFFFFF;

  /* text */
  --color-text:          #1A1A1A;
  --color-text-soft:     #555555;
  --color-text-muted:    #8A8A8A;
  --color-text-on-dark:  #FFFFFF;
  --color-text-on-dark-muted: #B8B8B8;

  /* lines & borders */
  --color-line-dark:     rgba(255, 255, 255, 0.12);
  --color-line-light:    rgba(0, 0, 0, 0.10);

  /* layout */
  --container-max:       1280px;
  --container-pad:       40px;
  --header-height:       80px;
  --section-pad-y:       120px;
  --radius-sm:           8px;
  --radius-md:           16px;
  --radius-lg:           24px;
  --radius-pill:         999px;

  /* type */
  --font-sans: "Paperlogy", "Pretendard", "Apple SD Gothic Neo",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-en:   "Paperlogy", "Inter", var(--font-sans);
}


/* ---------- 2. Base reset ----------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg-darker);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Korean: never split a single word across lines — only break at
     whitespace between phrases. Fixes mid-syllable wraps like "하세\n요!". */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Outer page wrapper — caps the layout at the design canvas width
   so the layout doesn't stretch on ultrawide monitors. The body
   shows a dark bg behind the wrapper on screens wider than 1920px.

   Note: we use `overflow-x: clip` (not `hidden`) because `hidden`
   creates a new scroll container and breaks position:sticky used by
   the .step stack animation. `clip` only clips, no scroll container. */
.page {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: var(--color-bg-light);
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p { margin: 0; }


/* ---------- 3. Layout primitives ---------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}
.eyebrow--yellow { color: var(--color-yellow); }
.eyebrow--center { text-align: center; }

.section-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-title--dark  { color: var(--color-text); }
.section-title--light { color: var(--color-text-on-dark); }
.section-title--center { text-align: center; }

.section-subtitle {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-soft);
}
.section-subtitle--light { color: var(--color-text-on-dark-muted); }


/* ---------- 4. Header --------------------------------------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--header-height);
  background: rgba(13, 13, 13, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.header__logo img { width: 110px; height: auto; }

.header__nav {
  display: flex;
  gap: 56px;
}
.header__nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-on-dark);
  transition: color .2s ease;
}
.header__nav a:hover { color: var(--color-yellow); }
.header__nav a.is-active { color: var(--color-yellow); }

.header__lang {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-on-dark);
  font-size: 14px;
  font-weight: 500;
}
.header__lang .lang {
  color: inherit;
  opacity: 0.7;
  transition: opacity .2s ease, color .2s ease;
}
.header__lang .lang:hover { opacity: 1; }
.header__lang .lang--active {
  color: var(--color-yellow);
  font-weight: 700;
  opacity: 1;
}
.lang--active { color: var(--color-yellow); font-weight: 700; }
.lang__divider { opacity: 0.4; }

/* Mobile-only chrome — hidden on desktop. mobile.css makes them visible
   below 1024px. Keeping the rules here means the desktop layout stays
   identical even though the drawer markup is in the DOM. */
.header__burger { display: none; }
.mobile-menu    { display: none; }


/* ---------- 5. Hero ----------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--color-text-on-dark);
  overflow: hidden;
}

/* slideshow stack — each slide cross-fades using opacity */
.hero__slides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.50) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
}

/* pagination dots */
.hero__dots {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}
.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, width .25s ease;
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero__dot.is-active {
  background: var(--color-yellow);
  width: 28px;
  border-radius: 5px;
}

.hero__content {
  position: relative;
  text-align: center;
  padding-top: var(--header-height);
}

.hero__eyebrow {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-yellow);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.hero__title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-on-dark);
  opacity: 0.85;
  animation: bounce 2.4s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}


/* ---------- 6. Intro ---------------------------------------- */
.intro {
  padding: 180px 0 120px;
  text-align: center;
}

.intro .section-title { font-size: 56px; }
.intro .section-subtitle { font-size: 20px; margin-top: 28px; }


/* ---------- 7. Services ------------------------------------- */
.services {
  padding: 40px 0 var(--section-pad-y);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.service-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eee;
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  z-index: 1;
  transition: opacity .35s ease;
}

/* Hover panel — frosted-glass overlay that slides in from the top
   on hover, revealing the title, description and CTA button. The
   pill badge fades out so the title can take its place. */
.service-card { position: relative; }

.service-card__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity .35s ease, clip-path .45s ease;
  pointer-events: none;
}

.service-card:hover .service-card__hover {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.service-card:hover .service-card__badge { opacity: 0; }

.service-card__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 14px;
}

.service-card__desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-soft);
  margin-top: 0;
  margin-bottom: auto;
  padding-bottom: 24px;
}

.service-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border: 1.5px solid var(--color-text);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
.service-card__btn:hover {
  background: var(--color-text);
  color: #fff;
}


/* ---------- 8. How it works (5 steps) ----------------------- */
.how__intro {
  position: relative;
  padding: 120px 0 60px;
  text-align: center;
}

/* Step 1 hosts the section intro band and the step content together.
   padding-top is 0 so the intro band sits flush at the top of the
   step; padding-bottom intentionally inherits from `.step` so the
   gap to step 2 matches the gap between any other adjacent steps. */
.step--with-intro {
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
}
.step--with-intro .how__intro { padding: 100px 0 60px; }

.step {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  will-change: transform;
}

.step--dark {
  color: var(--color-text-on-dark);
}
.step--dark .step__title    { color: var(--color-text-on-dark); }
.step--dark .step__subtitle { color: var(--color-text-on-dark-muted); }
.step--dark .step__badge    {
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.step--light {
  background: var(--color-bg-light);
  color: var(--color-text);
}
.step--light .step__title    { color: var(--color-text); }
.step--light .step__subtitle { color: var(--color-text-soft); }
.step--light .step__badge    {
  background: var(--color-bg-light);
  color: var(--color-text);
  border: 1.5px solid var(--color-text);
}

.step__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.70) 100%
  );
  pointer-events: none;
}

.step__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.step--image-left  .step__phone { order: 1; }
.step--image-left  .step__text  { order: 2; }
.step--image-right .step__text  { order: 1; }
.step--image-right .step__phone { order: 2; }

.step__badge {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
}

.step__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.step__subtitle {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.7;
}

.step__phone {
  display: flex;
  justify-content: center;
}
.step__phone img {
  max-width: 320px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
}


/* ---------- 9. Reviews -------------------------------------- */
.reviews {
  background: var(--color-bg-dark);
  padding: var(--section-pad-y) 0;
  color: var(--color-text-on-dark);
}

.reviews__intro {
  text-align: center;
  margin-bottom: 60px;
}

.reviews__rail {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.reviews__rail::-webkit-scrollbar { display: none; }
.reviews__rail.is-dragging { cursor: grabbing; }

.reviews__track {
  display: flex;
  gap: 24px;
  padding: 0 var(--container-pad);
  width: max-content;
}

.review-card {
  flex: 0 0 360px;
  background: var(--color-bg-light);
  color: var(--color-text);
  padding: 28px 26px;
  user-select: none;
}

.review-card__head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;
  margin-bottom: 16px;
}

.review-card__name {
  grid-column: 1 / -1;
  font-size: 17px;
  font-weight: 700;
}

.review-card__role {
  font-size: 13px;
  color: var(--color-text-muted);
}

.review-card__stars {
  display: flex;
  gap: 2px;
}
.review-card__stars span {
  width: 14px;
  height: 14px;
  background-color: var(--color-yellow);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center / contain no-repeat;
}

.review-card__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-soft);
}


/* ---------- 10. FAQ ----------------------------------------- */
.faq {
  background: var(--color-bg-dark);
  padding: var(--section-pad-y) 0;
}

.faq-list {
  max-width: 880px;
  margin: 60px auto 0;
}

.faq-item {
  border-bottom: 1px solid var(--color-line-dark);
}

.faq-item details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 4px;
  cursor: pointer;
  color: var(--color-text-on-dark);
  font-size: 17px;
  font-weight: 500;
  transition: color .2s ease;
}
.faq-item details > summary::-webkit-details-marker { display: none; }
.faq-item details > summary:hover { color: var(--color-yellow); }

.faq-item__icon {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-on-dark-muted);
  transition: transform .25s ease, color .2s ease;
}
.faq-item details[open] .faq-item__icon {
  transform: rotate(45deg);
  color: var(--color-yellow);
}

.faq-item__body {
  padding: 0 4px 28px;
  color: var(--color-text-on-dark-muted);
  font-size: 15px;
  line-height: 1.7;
}


/* ---------- 11. CTA ----------------------------------------- */
.cta {
  position: relative;
  padding: 340px 0 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: var(--color-text-on-dark);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    rgba(0, 0, 0, 0.70) 100%
  );
}

.cta__content {
  position: relative;
}

.cta__title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.cta__title-accent { color: var(--color-yellow); }

.cta__subtitle {
  margin-top: 20px;
  font-size: 18px;
  color: #FFFFFF;
}

.cta__stores {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark);
  transition: background .2s ease, transform .2s ease;
}
.store-btn:hover {
  background: #000;
  transform: translateY(-1px);
}
.store-btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.store-btn__text small {
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.store-btn__text strong {
  font-size: 16px;
  font-weight: 700;
}


/* ---------- 11b. Scroll-to-top FAB ---------------------------
   Stays glued to the right edge of the .page wrapper (1920px max).
   On wider monitors the right offset is computed so the button
   sits inside the page, not on the far viewport edge. */
.scroll-top {
  position: fixed;
  right: max(32px, calc((100vw - 1920px) / 2 + 32px));
  bottom: 32px;
  z-index: 50;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-yellow);
  color: var(--color-text);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover { background: #e6b800; }


/* ---------- App-status popup (fires from the store buttons) -- */
.app-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.app-popup[hidden] { display: none; }

.app-popup__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;
}

.app-popup__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px 28px;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.30);
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: opacity .25s ease,
              transform .32s cubic-bezier(.22, .61, .36, 1);
  /* Respect iOS safe areas if the modal stretches the full height. */
  padding-top: max(40px, env(safe-area-inset-top));
}

.app-popup.is-open                      { pointer-events: auto; }
.app-popup.is-open .app-popup__backdrop { opacity: 1; }
.app-popup.is-open .app-popup__panel    {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #888;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.app-popup__close:hover  { background: rgba(0, 0, 0, 0.06); color: #222; }
.app-popup__close:active { transform: scale(.94); }

.app-popup__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-yellow);
  color: #1a1a1a;
  border-radius: 50%;
  box-shadow: 0 10px 24px -6px rgba(255, 206, 0, 0.55);
}

.app-popup__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.app-popup__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-soft);
  margin: 0 0 26px;
}

.app-popup__btn {
  width: 100%;
  padding: 14px 20px;
  background: var(--color-text);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.app-popup__btn:hover  { background: #000; }
.app-popup__btn:active { transform: scale(.985); }

/* Lock background scroll while the modal is open. */
body.is-popup-open { overflow: hidden; }


/* ---------- 12. Footer -------------------------------------- */
.site-footer {
  background: var(--color-bg-darker);
  color: var(--color-text-on-dark-muted);
  padding: 70px 0 90px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 2fr 1.5fr;
  gap: 40px;
  align-items: start;
}

.site-footer__brand img {
  width: 130px;
  height: auto;
}

.site-footer__title {
  color: var(--color-yellow);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.site-footer__col p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text-on-dark-muted);
}

.site-footer__links li {
  font-size: 13px;
  line-height: 2;
}
.site-footer__links a {
  color: var(--color-text-on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.site-footer__links a:hover { color: var(--color-yellow); }


/* ---------- 13. Responsive ---------------------------------- */
@media (max-width: 1024px) {
  :root {
    --section-pad-y: 90px;
    --container-pad: 28px;
  }

  .hero { min-height: 100vh; }
  .hero__title       { font-size: 40px; }
  .section-title     { font-size: 34px; }
  .step__title       { font-size: 32px; }
  .cta__title        { font-size: 34px; }

  .step__inner { gap: 20px; }
  .step__phone img { max-width: 260px; }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* On small screens, drop the sticky stacking — steps flow naturally */
@media (max-width: 720px) {
  .step {
    position: relative;
    min-height: auto;
    height: auto;
  }
}

@media (max-width: 720px) {
  :root {
    --section-pad-y: 70px;
    --header-height: 64px;
  }

  .header__nav { display: none; }
  .header__logo img { width: 90px; }

  .hero { min-height: 100vh; }
  .hero__eyebrow { font-size: 14px; }
  .hero__title   { font-size: 28px; }

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

  .service-grid { grid-template-columns: 1fr; gap: 20px; }

  .step { padding: 70px 0; }
  .step__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .step--image-left  .step__phone,
  .step--image-right .step__phone { order: 2; }
  .step--image-left  .step__text,
  .step--image-right .step__text  { order: 1; text-align: center; }
  .step__phone img { max-width: 240px; }
  .step__title { font-size: 24px; }
  .step__subtitle { font-size: 15px; }

  .review-card { flex-basis: 280px; }

  .cta { padding: 200px 0 220px; }
  .cta__title { font-size: 26px; }
  .cta__subtitle { font-size: 15px; }
  .cta__stores { gap: 10px; }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* =============================================================
   14. About page (회사소개)
   -------------------------------------------------------------
   The about page reuses the shared header / footer / mobile drawer
   from styles.css. The header stays `position: absolute` (same as
   index) and floats over the about-hero — never sticky.

     .about-hero               half-height image hero with overlay
     .about-section            centered text + optional wide image
     .about-pillar             two-column (text + image) row
   ============================================================= */

.page-about { background: var(--color-bg-light); }

/* ---------- About hero ------------------------------------- */
.about-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: var(--header-height);
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

.about-hero__content {
  position: relative;
  text-align: center;
}

.about-hero__eyebrow {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-yellow);
  margin-bottom: 16px;
}

.about-hero__title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.about-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-on-dark);
  opacity: 0.85;
  animation: bounce 2.4s ease-in-out infinite;
}

/* ---------- Wide text section (vision / platform) ----------
   Left-aligned by default; the platform section opts into the
   centered variant via `.about-section--center`. */
.about-section {
  background: var(--color-bg-light);
  padding: 160px 0 130px;
  text-align: left;
  color: var(--color-text);
}

.about-section--center { text-align: center; }

.about-section--platform { padding-top: 140px; padding-bottom: 150px; }

.about-section__eyebrow {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.about-section__title {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 36px;
}

.about-section__body {
  font-size: 19px;
  line-height: 1.9;
  color: var(--color-text-soft);
}

.about-section__wide-media {
  margin-top: 56px;
}
.about-section__wide-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ---------- Location / Kakao Map (오시는 길) --------------- */
.about-location {
  background: var(--color-bg-light);
  padding: 120px 0 140px;
  text-align: center;
  color: var(--color-text);
}

.about-location__title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--color-text);
}

.about-location__address {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-soft);
  margin: 0 0 40px;
}

.about-location__addr-label {
  display: inline-block;
  margin-right: 8px;
  font-weight: 600;
  color: var(--color-text);
}

.about-location__map {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ---------- Pillar rows (text + image) ---------------------
   Default bg is light gray; every other pillar opts into the
   white variant via `.about-pillar--light` so the sequence reads
   gray / white / gray instead of one continuous band. */
.about-pillar {
  background: #f3f4f6;
  padding: 140px 0;
  color: var(--color-text);
}

.about-pillar--light { background: #ffffff; }

.about-pillar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}

.about-pillar--text-left  .about-pillar__text  { order: 1; }
.about-pillar--text-left  .about-pillar__media { order: 2; }
.about-pillar--image-left .about-pillar__media { order: 1; }
.about-pillar--image-left .about-pillar__text  { order: 2; }

.about-pillar__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 28px;
}

.about-pillar__body {
  font-size: 18px;
  line-height: 1.9;
  color: var(--color-text-soft);
}

.about-pillar__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.25);
}


/* ---------- Company History timeline (회사 연혁) ----------
   Editorial timeline: bold header + stat strip on top, then 4
   alternating rows with a thin display year, label tag, and
   numbered detail list. Last row (PLATFORM) is highlighted in
   the brand yellow to signal the upcoming chapter. */
.about-history {
  background: #ffffff;
  padding: 140px 0 160px;
  color: var(--color-text);
}

.about-history__head {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  padding-bottom: 56px;
}

.about-history__title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  color: var(--color-text);
}

.about-history__lede {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-soft);
  max-width: 560px;
  margin: 0;
}

.about-history__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  margin: 0;
  padding: 0;
}

.about-history__stat {
  padding: 16px 22px;
  border-left: 1px solid rgba(0, 0, 0, 0.10);
}
.about-history__stat:first-child { border-left: 0; }

.about-history__stat-value {
  display: block;
  margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-feature-settings: "tnum";
}
.about-history__stat-value sup {
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
  vertical-align: super;
  letter-spacing: 0;
}

.about-history__stat-label {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.about-history__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.about-history__row {
  display: grid;
  grid-template-columns: 70px minmax(180px, 220px) 130px minmax(0, 1fr);
  column-gap: 36px;
  align-items: center;
  padding: 38px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.about-history__row > .about-history__detail { margin-left: 100px; }

.about-history__index {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  font-feature-settings: "tnum";
}

.about-history__year {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.about-history__month {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.about-history__year-num {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: 92px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--color-text);
  font-feature-settings: "tnum";
}

.about-history__tag {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.about-history__detail-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 14px;
}

.about-history__detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-soft);
  counter-reset: history-item;
}

.about-history__detail-list li {
  counter-increment: history-item;
  position: relative;
  padding-left: 30px;
}

.about-history__detail-list li + li { margin-top: 2px; }

.about-history__detail-list li::before {
  content: counter(history-item, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-muted);
  font-weight: 500;
  font-feature-settings: "tnum";
}

/* Featured stat (NEXT LAUNCH '26) — brand yellow */
.about-history__stat--featured .about-history__stat-value { color: var(--color-yellow); }

/* Featured (latest / upcoming) row — brand yellow highlight */
.about-history__row--featured .about-history__index    { color: rgba(255, 206, 0, 0.65); }
.about-history__row--featured .about-history__month    { color: var(--color-yellow); font-size: 28px; font-weight: 300; letter-spacing: 0; margin-bottom: 0; line-height: 1; }
.about-history__row--featured .about-history__year-num { color: var(--color-yellow); font-weight: 700; }
.about-history__row--featured .about-history__tag      { color: var(--color-yellow); }


/* =============================================================
   15. Services page (서비스)
   -------------------------------------------------------------
     .services-hero          full-bleed hero with brand mark
     .services-row           text + image side-by-side row
     .vehicles               4-card vehicle grid
     .vehicle-card           clickable card opens popup
     .vehicle-popup          modal with vehicle detail
     .services-app           mobile app showcase (text + phone)
   ============================================================= */

.page-services { background: var(--color-bg-light); }

/* ---------- Services hero ---------------------------------- */
.services-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: var(--header-height);
}

.services-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

.services-hero__content {
  position: relative;
  text-align: center;
}

.services-hero__brand img {
  width: 240px;
  height: auto;
  margin: 0 auto;
}

.services-hero__caption {
  margin-top: 28px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
}

.services-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-on-dark);
  opacity: 0.85;
  animation: bounce 2.4s ease-in-out infinite;
}

/* ---------- Service description rows ----------------------- */
.services-row {
  background: var(--color-bg-light);
  padding: 130px 0;
  color: var(--color-text);
}
.services-row--alt { background: #f3f4f6; }

.services-row__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}

.services-row--text-left  .services-row__text  { order: 1; }
.services-row--text-left  .services-row__media { order: 2; }
.services-row--image-left .services-row__media { order: 1; }
.services-row--image-left .services-row__text  { order: 2; }

.services-row__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 28px;
}

.services-row__body {
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-text-soft);
}

.services-row__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.30);
}

/* ---------- Vehicles section ------------------------------- */
.vehicles {
  background: #f3f4f6;
  padding: 130px 0 150px;
  color: var(--color-text);
}

.vehicles__intro {
  margin-bottom: 70px;
}
.vehicles__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 24px;
}
.vehicles__body {
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-text-soft);
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  color: var(--color-text);
  /* Top-only padding — image fills the rest edge-to-edge. */
  padding: 24px 0 0;
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 36px -18px rgba(0, 0, 0, 0.45);
}

.vehicle-card__name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
  display: block;
}

.vehicle-card__media {
  display: block;
  background: #ffffff;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.vehicle-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Vehicle popup ---------------------------------- */
.vehicle-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.vehicle-popup[hidden] { display: none; }

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

.vehicle-popup__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 8px;
  /* Top-only padding — title/desc add their own horizontal pad,
     and the media block spans edge-to-edge to the bottom corners. */
  padding: 28px 0 0;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  overflow: hidden;
  transition: opacity .25s ease,
              transform .32s cubic-bezier(.22, .61, .36, 1);
}

.vehicle-popup.is-open                     { pointer-events: auto; }
.vehicle-popup.is-open .vehicle-popup__backdrop { opacity: 1; }
.vehicle-popup.is-open .vehicle-popup__panel    {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.vehicle-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #888;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.vehicle-popup__close:hover  { background: rgba(0, 0, 0, 0.06); color: #222; }
.vehicle-popup__close:active { transform: scale(.94); }

.vehicle-popup__title {
  font-size: 20px;
  font-weight: 800;
  margin: 4px 0 14px;
  padding: 0 28px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.vehicle-popup__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-soft);
  margin: 0 0 22px;
  padding: 0 28px;
}

.vehicle-popup__media {
  background: #f5f5f5;
}
.vehicle-popup__media img {
  width: 100%;
  height: auto;
  display: block;
}

body.is-vehicle-popup-open { overflow: hidden; }

/* ---------- App showcase section --------------------------- */
.services-app {
  background: var(--color-bg-light);
  padding: 120px 0 140px;
  color: var(--color-text);
}

.services-app__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}

.services-app__title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0 0 24px;
}

.services-app__body {
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-text-soft);
  margin-bottom: 36px;
}

.services-app__stores {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.services-app__media {
  display: flex;
  justify-content: center;
}
.services-app__media img {
  max-width: 380px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.20));
}


/* =============================================================
   Short-viewport polish for the desktop sticky-stack animation
   -------------------------------------------------------------
   Each .step occupies 100vh and pins via `position: sticky;
   top: 0`. On laptops with a short viewport (768–900px tall) the
   original 80px paddings + 320px phone mockup overflow the 100vh
   frame, so the bottom of the card gets hidden behind the next
   sticky step. These rules keep the sticky stack animation intact
   but compress padding and cap the phone artwork to a viewport-
   relative height so every step fits in one screen on laptops.
   Desktop-only — mobile.css handles ≤1024 separately.
   ============================================================= */
/* ── Universal image cap (works at every desktop viewport height) ──
   Phone mockup is the dominant element causing vertical overflow.
   Cap it as min(absolute-px, viewport-relative) so it ALWAYS fits
   regardless of exact viewport height — no breakpoint gaps.
   `dvh` accounts for browser chrome (bookmarks bar, extensions, dev
   tools) which is why earlier vh-based caps failed inconsistently
   between machines with different chrome heights. */
@media (min-width: 1025px) {
  /* Use dvh on .step too so the sticky frame matches what the user
     actually sees, not the larger-than-visible vh value. */
  .step {
    min-height: 100vh;       /* fallback */
    min-height: 100dvh;
  }

  /* Same cap on EVERY step (step 1 included) so all phone mockups
     render at identical size — visual consistency across the stack.
     The cap is sized for step 1's worst case (intro band eats vertical
     room there) and reused everywhere. */
  .step__phone img {
    max-width: 360px;
    max-height: 60vh;                  /* fallback */
    max-height: min(620px, 60dvh);
    width: auto;
  }
}

/* ── Padding + typography compression for shorter desktop viewports ──
   The image cap above keeps the phone in frame; these rules trim
   surrounding chrome (padding, font-size, intro band) so the whole
   composition stays balanced as height shrinks. */
@media (min-width: 1025px) and (max-height: 900px) {
  .step { padding: 40px 0; }
  /* Constrain both columns and center them as a group. With the
     default `1fr 1fr` each column is ~600px wide; once the phone
     gets shrunk by max-height, it floats in the middle of its
     column and the visual gap to the text balloons. Tight columns
     + justify-content: center keep them visually paired. */
  .step__inner {
    grid-template-columns: minmax(0, 340px) minmax(0, 460px);
    justify-content: center;
    gap: 56px;
  }
  .step__title    { font-size: 32px; }
  .step__subtitle { font-size: 16px; margin-top: 12px; }
  .step__badge    { margin-bottom: 18px; padding: 6px 18px; font-size: 12px; }

  .how__intro,
  .step--with-intro .how__intro { padding: 44px 0 18px; }
  .how__intro .section-title { font-size: 32px; }
  .how__intro .eyebrow { margin-bottom: 10px; }
}

@media (min-width: 1025px) and (max-height: 820px) {
  .step { padding: 32px 0; }
  .step__inner {
    grid-template-columns: minmax(0, 310px) minmax(0, 440px);
    gap: 48px;
  }
  .step__title    { font-size: 28px; }
  .step__subtitle { font-size: 15px; margin-top: 10px; }
  .step__badge    { margin-bottom: 14px; padding: 6px 16px; font-size: 12px; }

  .how__intro,
  .step--with-intro .how__intro { padding: 36px 0 14px; }
  .how__intro .section-title { font-size: 28px; }
  .how__intro .eyebrow { font-size: 14px; margin-bottom: 8px; }
}

@media (min-width: 1025px) and (max-height: 740px) {
  .step { padding: 22px 0; }
  .step__inner {
    grid-template-columns: minmax(0, 280px) minmax(0, 420px);
    gap: 40px;
  }
  .step__title    { font-size: 25px; }
  .step__subtitle { font-size: 14px; margin-top: 8px; }
  .step__badge    { margin-bottom: 10px; padding: 5px 14px; font-size: 11px; }

  .how__intro,
  .step--with-intro .how__intro { padding: 28px 0 10px; }
  .how__intro .section-title { font-size: 25px; }
  .how__intro .eyebrow { font-size: 13px; margin-bottom: 6px; }
}

@media (min-width: 1025px) and (max-height: 660px) {
  .step { padding: 14px 0; }
  .step__inner {
    grid-template-columns: minmax(0, 240px) minmax(0, 360px);
    gap: 28px;
  }
  .step__title    { font-size: 22px; line-height: 1.25; }
  .step__subtitle { font-size: 13px; margin-top: 6px; line-height: 1.5; }
  .step__badge    { margin-bottom: 8px; padding: 4px 12px; font-size: 10px; }

  .how__intro,
  .step--with-intro .how__intro { padding: 18px 0 6px; }
  .how__intro .section-title { font-size: 22px; line-height: 1.2; }
  .how__intro .eyebrow { font-size: 12px; margin-bottom: 4px; }
}