/* ================================================================
   Recella 모바일 반응형 CSS
   태블릿(900px 이하) + 모바일(480px 이하)
================================================================ */

/* ── 태블릿 / 소형 PC ─────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --left-w: 280px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .header-nav .nav-link { padding: 5px 9px; font-size: 12px; }
}

/* ── 태블릿 ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 왼쪽 패널 숨김 */
  .left-panel { display: none; }
  .right-main { margin-left: 0; }

  /* 모바일 헤더 로고 표시 */
  .header-logo { display: block; }

  /* PC 네비 숨김 */
  .header-nav { display: none; }

  /* 햄버거 표시 */
  .hamburger { display: flex; }

  /* 하단 탭바 표시 */
  .bottom-tabbar { display: block; }
  .right-main { padding-bottom: 72px; }

  /* 배너 비율 조정 */
  .banner-slider { aspect-ratio: 4/3; }
  .slide-badge { display: none; }
  .slide { padding: 24px 22px; }
  .slide-content { max-width: 100%; }

  /* 장바구니 패널 전체 너비 */
  .cart-panel { width: 100%; right: -100%; }

  /* 마이페이지 1열 */
  .mypage-wrap { grid-template-columns: 1fr; }
  .mypage-sidebar { position: static; }
}

/* ── 모바일 ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .section { padding: 28px 14px; }
  .grade-banner,
  .promo-banner,
  .point-bar { margin-left: 14px; margin-right: 14px; }
  .member-bar { padding: 6px 14px; font-size: 11px; }
  .header { padding: 0 14px; }
  .banner-slider { aspect-ratio: 3/2.5; }
  .slide-title { font-size: 18px; }
  .slide { padding: 20px 18px; }
  .top-notice { font-size: 12px; padding: 9px 14px; }

  /* 폼 */
  .form-wrap { padding: 28px 14px; }
  .form-title { font-size: 20px; }

  /* 마이페이지 */
  .mypage-wrap { padding: 16px 14px; }

  /* 장바구니 패널 */
  .cart-panel-header { padding: 14px 16px; }
  .cart-panel-body   { padding: 14px 16px; }
  .cart-panel-footer { padding: 14px 16px; }

  /* 모달 */
  .product-modal { padding: 16px 16px 28px; }
  .modal-product-img { font-size: 60px; }

  /* 푸터 */
  footer { padding: 32px 14px 80px; }
  .footer-links { gap: 10px; }
}

/* ── 초소형 모바일 ─────────────────────────────────────────── */
@media (max-width: 380px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-info  { padding: 10px 10px 12px; }
  .price-current { font-size: 14px; }
  .section { padding: 22px 12px; }
  .slide-title { font-size: 16px; }
  .slide-sub  { font-size: 12px; }
}

/* ── 가로 모드 (모바일 landscape) ──────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  .banner-slider { aspect-ratio: 21/8; }
  .bottom-tabbar { padding: 5px 0 5px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 다크모드 (선택 사항, 추후 활성화) ───────────────────────
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1A1D1A;
    --white: #242824;
    --light: #2D312D;
    --text:  #E8E8E8;
    --muted: #9CA39C;
  }
}
*/

/* ── iOS safe area 대응 ─────────────────────────────────────── */
@supports (padding: max(0px)) {
  .bottom-tabbar {
    padding-bottom: max(7px, env(safe-area-inset-bottom));
  }
  .right-main {
    padding-bottom: max(72px, calc(72px + env(safe-area-inset-bottom)));
  }
}