/* ================================================
   MOBILE.CSS — 모바일 전용 미디어 쿼리
   style.css 다음에 <link>로 연결하세요
   ================================================ */

@media (max-width: 768px) {

  /* ── 공통 ── */
  .wrap { padding: 0 20px; }
  section { padding: 64px 0; }

  /* ── NAV ── */
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-cta { font-size: 11px; padding: 6px 12px; }

  /* ── HERO ── */
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 60px;
    gap: 40px;
    text-align: center;
  }
  .hero-desc { margin: 0 auto 40px; }
  .hero-nums { justify-content: space-between; }
  .hero-logo {
    order: -1;
    justify-content: center;
  }
  .hero-logo img { max-width: 220px; }
  .hero-h1 { font-size: clamp(36px, 10vw, 56px); }
  .hero-desc { font-size: 14px; margin-bottom: 40px; }
  .hero-nums { gap: 32px; flex-wrap: wrap; }
  .hero-n { font-size: 28px; }

  /* ── STATS ROW ── */
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .sb { padding: 24px 20px; }

  /* ── ABOUT ── */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }

  /* ── MARKET / NEWS ── */
  .news-row { grid-template-columns: 1fr; }

  /* ── BIZ HEADER ── */
  .biz-header {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px;
  }
  .biz-num { display: none; }

  /* SHIFT */
    .shift {
    grid-template-columns: 1fr;
  }

  .sh-before, .sh-after {
    padding: 24px 20px;
  }

  /* ── CARDS ── */
  .cards-2 { grid-template-columns: 1fr; }

  /* ── COMPARE TABLE ── */
  .compare-table { font-size: 13px; }
  .ct-cell { padding: 12px 14px; font-size: 13px; }

  /* ── BRAND LOGO GRID ── */
  .brand-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
    .brand-logo-item {
    padding: 6px;
  }

  .brand-logo-item img {
    max-width: 100%;
    max-height: 1.25rem;
    width: auto;
    height: auto;
  }

  /* ── BRAND MAIN / SUB ── */
  .brand-main,
  .brand-sub {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .brand-sub:nth-child(even) { direction: ltr; }
  .brand-sub:nth-child(odd) { direction: ltr; }
  .brand-main-image,
  .brand-main-image-placeholder { min-height: 17.5rem; }
  .brand-sub-image-placeholder { min-height: 12.5rem; }
  .brand-main-content { padding: 2rem 1.75rem; }
  .brand-sub-content { padding: 1.75rem; }
  .brand-main-stat-n { font-size: 1.125rem; }

  /* ── RETAIL GRID ── */
  .retail-grid { grid-template-columns: 1fr; }

  /* ── EXPORT MAP ── */
  .export-map-wrap { padding: 1.25rem; }

  /* ── COUNTRY / CHIPS ── */
  .chips { gap: 6px; }
  .chip { font-size: 11px; padding: 4px 10px; }

  /* ── BUSINESS 02 / PROCESS */
  .process { grid-template-columns: 1fr 1fr; } /* 4열 → 2×2 */
  .ps { border-right: none; border-bottom: 1px solid var(--line); }
  .ps:last-child { border-bottom: none; }

  /* ── ROADMAP ── */
  .rs { grid-template-columns: 60px 1fr; gap: 16px; }

  /* ── CTA ── */
  .cta-section { padding: 80px 0; }
  .cta-btns { flex-direction: column; align-items: center; }
  .btn-primary,
  .btn-outline { width: 100%; max-width: 280px; text-align: center; }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ── 아주 작은 화면 (380px 이하) ── */
@media (max-width: 380px) {
  .stats-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-nums { flex-direction: column; gap: 20px; }
  .brand-main-stats { flex-direction: column; gap: 1rem; }
  .brand-main-stat + .brand-main-stat {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
  }
}