/* AEROCLAD mobile.css · v4.1.9 (mobile-overlap-fix) · cache-bust ?v=419 */
/* =============================================================
   AEROCLAD Microsite · MOBILE / TABLET OVERRIDES (v3.5.1)
   Target devices: iPhone (375–430px), iPad (768–1180px)
   Loaded AFTER style.css, so these rules win.
   ============================================================= */

/* ---------- 0. Global safety: no horizontal overflow ---------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* CRITICAL: mobile drawer must be HIDDEN BY DEFAULT at every viewport. */
/* It will only become visible when .open class is added AND viewport <= 1200px. */
.mobile-menu-drawer {
  display: none !important;
}
/* Hamburger toggle button is hidden on desktop by default. */
.mobile-menu-toggle {
  display: none;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}
*, *::before, *::after {
  min-width: 0; /* prevent grid/flex children from forcing overflow */
}
/* table & long word safety */
table { max-width: 100%; }
.spec-table-wrap, .acoustic-table-wrap, .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 1. iPad / Tablet (≤1024px) -------------------------- */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  section { padding: 72px 0; }

  /* hero & product hero */
  .hero-grid, .product-hero-grid, .prod-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .hero-copy h1 { font-size: clamp(34px, 5vw, 48px) !important; }
  .prod-hero h1 { font-size: clamp(34px, 5.5vw, 52px) !important; }

  /* main lineup → 2 columns on iPad portrait, stays nice */
  .lineup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }

  /* manufacturing dual images side by side */
  .mfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }

  /* 4-col grids → 2 cols on tablet */
  .osc-grid, .site-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  .gi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }

  /* prod-page grids */
  .prod-features { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  .structure-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .sdm-grid, .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  .app-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
  .casing-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ---------- 2. Tablet & narrow desktop (≤1024px) ----------------- */
/* v4.1.9: 분기 1200→ 1024px (모바일 겹침 정정, 데스크탑 메뉴 표시 확대) */
@media (max-width: 1024px) {
  .container { padding: 0 22px; }

  /* navigation: hide desktop menu, show hamburger (specificity 강화) */
  nav .nav-menu,
  nav ul.nav-menu { display: none !important; }
  nav .mobile-menu-toggle,
  nav button.mobile-menu-toggle { display: inline-flex !important; }

  /* mobile drawer style applies here too */
  .mobile-menu-drawer {
    position: fixed; top: 60px; right: 0; left: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--slate-200);
    padding: 18px 28px 26px;
    z-index: 999;
    box-shadow: 0 20px 40px -20px rgba(15,40,71,0.18);
    /* still hidden by default - only shown when .open added */
  }
  .mobile-menu-drawer.open { display: block !important; }
  .mobile-menu-drawer a {
    display: block; padding: 14px 4px;
    border-bottom: 1px solid var(--slate-100);
    font-size: 15px; color: var(--slate-700); font-weight: 600;
    letter-spacing: 0.02em;
  }
  .mobile-menu-drawer a:last-child { border-bottom: none; }
  .mobile-menu-drawer .nav-cta-mobile {
    display: block; margin-top: 14px;
    background: var(--navy); color: #fff !important;
    text-align: center; padding: 13px;
    border-radius: 6px; font-weight: 700;
  }

  /* nav inner: keep balanced */
  .nav-inner { padding: 14px 22px; }
  .nav-logo { font-size: 17px; }
  .nav-logo span { display: inline; font-size: 10px; }
}

/* ---------- 2.5 Small Tablet / Large Phone (≤820px) -------------- */
/* v4.1.9: 모바일 body padding-top 보정 (nav fixed 높이 가림 방지) */
body { padding-top: 0; }
@media (max-width: 1024px) {
  body { padding-top: 0; } /* nav가 fixed이므로 원래 세뗘이 hero 여백으로 처리함 */
}
@media (max-width: 820px) {
  .container { padding: 0 20px; }

  /* nav shrink for small screens */
  .nav-inner { padding: 14px 20px; }
  .nav-logo { font-size: 17px; }
  .nav-logo span { display: none; }
}

/* ---------- 3. Phone (≤640px) ----------------------------------- */
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  section { padding: 56px 0; border-bottom-width: 1px; }

  /* typography scale-down */
  body { font-size: 15px; line-height: 1.65; }
  .hero-copy h1 { font-size: 32px !important; line-height: 1.18 !important; }
  .hero-copy .tagline { font-size: 14px !important; }
  .hero-copy p { font-size: 15px !important; }
  .prod-hero h1 { font-size: 30px !important; line-height: 1.2 !important; }
  .prod-hero .tagline { font-size: 13px !important; }
  .section-title { font-size: 24px !important; line-height: 1.22 !important; }
  .section-sub { font-size: 11px !important; letter-spacing: 0.12em !important; }
  .section-lead { font-size: 14px !important; }
  .eyebrow { font-size: 10px !important; letter-spacing: 0.22em !important; }

  /* all multi-col grids → single column */
  .lineup-grid,
  .mfg-grid,
  .osc-grid,
  .site-grid,
  .gi-grid,
  .casing-grid,
  .prod-features,
  .features-grid,
  .app-grid,
  .app-grid-v2,
  .sdm-grid,
  .cert-grid,
  .impact-grid,
  .design-list,
  .cta-grid,
  .structure-grid,
  .prod-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* card paddings */
  .lineup-card, .osc-card, .site-card, .gi-card,
  .casing-card, .prod-feature, .feature-card,
  .sdm-step, .cert-card, .app-card, .app-card-v2 {
    padding: 22px !important;
  }
  .lineup-card h3, .osc-card h3, .gi-card h3 { font-size: 20px !important; }

  /* impact / value strip */
  .impact-grid .impact-num,
  .values .value-num { font-size: 13px !important; }
  .impact-grid .impact-label,
  .values .value-title { font-size: 16px !important; }
  .values .value-en { font-size: 10px !important; }
  .values .value-card { padding: 18px 16px !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.08); }
  .values { padding: 56px 0 !important; }
  .values .container > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* buttons full-width */
  .hero-buttons, .prod-cta, .cta-group {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .btn, .btn-primary, .btn-secondary {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  /* hero aspect: image becomes shorter on phone */
  .hero-img { aspect-ratio: 4/3 !important; }
  .hero-tag { font-size: 10px !important; padding: 6px 10px !important; }

  /* spec tables: horizontal scroll instead of breaking layout */
  .spec-table, .acoustic-table, .table-v2 {
    font-size: 13px;
  }
  .spec-table th, .spec-table td,
  .table-v2 th, .table-v2 td { padding: 10px 12px !important; white-space: nowrap; }
  .spec-table-wrap, .acoustic-table-wrap, .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
  }
  /* hint visual that the table is scrollable */
  .spec-table-wrap::after,
  .table-wrap::after {
    content: "← 좌우로 스크롤 →";
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--slate-500);
    padding: 6px 0;
    background: var(--slate-50);
  }

  /* footer compact */
  .footer-inner { gap: 24px !important; }
  footer { padding: 48px 0 32px !important; }

  /* labels overlay on installation cards: tighter spacing */
  .osc-tag, .site-tag, .hero-tag, .gi-tag {
    letter-spacing: 0.08em !important;
  }

  /* prevent long Korean phrases from breaking words awkwardly */
  h1, h2, h3, .section-title, .hero-copy h1 {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* ---------- 4. Small phone (≤380px, e.g. iPhone SE) -------------- */
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .hero-copy h1 { font-size: 28px !important; }
  .prod-hero h1 { font-size: 26px !important; }
  .section-title { font-size: 22px !important; }
}

/* ---------- 5. iPhone notch / safe-area ------------------------- */
@supports (padding: max(0px)) {
  nav .nav-inner,
  footer .container,
  .container {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

/* ---------- 6. Hamburger button (always available in markup) ---- */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--slate-200);
  width: 40px; height: 40px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.mobile-menu-toggle svg { width: 20px; height: 20px; stroke: var(--navy); }

/* ---------- 7. Touch target minimums ---------------------------- */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn { min-height: 44px; }
  .nav-menu a, .mobile-menu-drawer a { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- 8. v4.1.9 모바일 NAV 겹침 최종 안전장치 ---------------- */
/* 인라인 CSS가 외부 mobile.css를 덮는 케이스에 대비한 최강 specificity */
@media (max-width: 1024px) {
  html body nav .nav-menu,
  html body nav ul.nav-menu,
  html body nav > .container > .nav-menu,
  html body nav > .nav-inner > .nav-menu { display: none !important; visibility: hidden !important; }
  html body nav .mobile-menu-toggle,
  html body nav button.mobile-menu-toggle { display: inline-flex !important; visibility: visible !important; }
}
/* 모바일 드로어가 열렸을 때 NAV 영역과 겹치지 않게 z-index/position 강제 */
@media (max-width: 1024px) {
  nav { z-index: 1000 !important; }
  .mobile-menu-drawer { z-index: 999 !important; }
}