/* ═══════════════════════════════════════════════════════════════════════
 *  W-HOSTING — 글로벌 모바일 반응형 보강 레이어
 *  메인 홈 / 서비스 / 고객 마이페이지 / 로그인 등 공통 적용
 * ═══════════════════════════════════════════════════════════════════════ */

/* iOS Safari — 100vh 우회 */
@supports (-webkit-touch-callout: none) {
  .min-h-screen { min-height: -webkit-fill-available; }
}

/* 가로 스크롤 방지 (전역) */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, table { max-width: 100%; }

/* iOS 입력칸 자동 줌 방지 (16px 이상) */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  /* 작은 라벨 폰트는 유지 — 상위 클래스만 */
  .inp, .fx-input { font-size: 16px !important; }
}

/* ── 메인 홈 / 서비스 페이지 (.container 사용) ────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 16px !important; }
  .section { padding: 48px 0 !important; }
  .section-title { font-size: clamp(22px, 5vw, 30px) !important; }
  .section-desc { font-size: 14px !important; }

  /* 헤더 — 모바일에서 압축 */
  .site-header { padding: 0 !important; }
  .header-inner { height: 56px !important; }
  .logo { font-size: 16px !important; }
  .logo-icon { width: 28px !important; height: 28px !important; font-size: 12px !important; }

  /* 카드 그리드 강제 1열 (auto-fit이 안 먹을 때) */
  .card-grid-2, .card-grid-3, .card-grid-4 {
    grid-template-columns: 1fr !important;
  }
  .card { padding: 20px !important; }

  /* 가격 카드 */
  .price-card { padding: 20px !important; }
  .price-amount { font-size: 28px !important; }

  /* CTA */
  .cta-banner { padding: 32px 20px !important; }

  /* 버튼 */
  .btn { padding: 10px 20px !important; font-size: 13px !important; }

  /* 푸터 */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important; gap: 24px !important;
    padding-bottom: 32px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important; gap: 8px !important;
  }
  .footer-biz { font-size: 10px !important; line-height: 1.7 !important; }
}

@media (max-width: 480px) {
  .container { padding: 0 12px !important; }
  .section { padding: 32px 0 !important; }
  .section-title { font-size: 20px !important; }

  .footer-grid { grid-template-columns: 1fr !important; }

  /* 패밀리 사이트 카드 — 세로 적층 */
  .footer-grid > div:first-child > div[style*="margin-top:14px"] {
    margin-top: 12px;
  }

  /* CTA 배너 폰트 축소 */
  .cta-banner h2 { font-size: 22px !important; }
  .cta-banner p { font-size: 13px !important; }

  /* 플로팅 contact 버튼 — 작게 */
  #float-btn { width: 48px !important; height: 48px !important; }
  #float-icon { font-size: 18px !important; }
}

/* ── 고객 마이페이지 ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* 사이드바는 lg 미만에서 자동 hidden — 이미 처리됨 */
  /* 본문 좌측 마진 제거 */
  [class*="lg:ml-[220px]"] { margin-left: 0 !important; }
}

@media (max-width: 768px) {
  /* 토픽바 압축 */
  .topbar { padding: 0 12px !important; height: 52px !important; }
  .topbar-title { font-size: 14px !important; }

  /* 카드 padding 축소 */
  .card { border-radius: 12px !important; }
  .card.p-5 { padding: 16px !important; }
  .card.p-6 { padding: 18px !important; }

  /* 그리드 → 1열 (sm: 적용된 것은 유지) */
  .grid.sm\:grid-cols-2 { gap: 12px !important; }
  .grid.sm\:grid-cols-3 { gap: 12px !important; }

  /* 메인 컨테이너 */
  main, .container, [class*="px-4"] { padding-left: 12px !important; padding-right: 12px !important; }

  /* 모바일 사이드 드로어 — 어둡게 */
  .sidebar { box-shadow: 0 0 30px rgba(15, 23, 42, .15) !important; }
}

/* ── 로그인 페이지 (양쪽 패널) ─────────────────────────────────────── */
@media (max-width: 959px) {
  .deco-panel { display: none !important; }
  .form-side { padding: 16px !important; }
  .form-card { max-width: 100% !important; }
}

@media (max-width: 480px) {
  .form-side { padding: 12px !important; }
  .form-card .logo-mark + div { font-size: 14px; }
}

/* ── 일반 — 너무 큰 글자 방지 ─────────────────────────────────────── */
@media (max-width: 480px) {
  h1 { font-size: clamp(22px, 6vw, 28px) !important; }
  h2 { font-size: clamp(18px, 5vw, 24px) !important; }
  h3 { font-size: clamp(16px, 4.5vw, 20px) !important; }

  /* Inline 스타일로 큰 폰트 강제된 경우만 — clamp 우선 */
  [style*="font-size:32px"]:not(.preserve-large) { font-size: 22px !important; }
  [style*="font-size:36px"]:not(.preserve-large) { font-size: 24px !important; }
  [style*="font-size:42px"]:not(.preserve-large) { font-size: 26px !important; }
  [style*="font-size:48px"]:not(.preserve-large) { font-size: 30px !important; }
  [style*="font-size:56px"]:not(.preserve-large) { font-size: 32px !important; }
  [style*="font-size:64px"]:not(.preserve-large) { font-size: 34px !important; }
  [style*="font-size:68px"]:not(.preserve-large) { font-size: 36px !important; }

  /* Hero 섹션 padding */
  [style*="padding:80px 0"] { padding: 40px 0 !important; }
  [style*="padding:60px 0"] { padding: 36px 0 !important; }
}

/* ── 안전영역 (iPhone notch) ──────────────────────────────────────── */
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .fx-header { padding-top: env(safe-area-inset-top); }
  .fx-footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}

/* ── 터치 영역 — 최소 44x44 (iOS 가이드라인) ─────────────────────── */
@media (hover: none) and (pointer: coarse) {
  button, a.btn, .nav-item, .fx-cat, .fx-action {
    min-height: 38px;
  }
}

/* ── 가로/세로 회전 ─────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .fx-hero { padding: 24px 0 !important; }
  .fx-hero-stats { display: none; }
  .deco-panel { display: none !important; }
}

/* ── 인쇄 스타일 (선택적) ─────────────────────────────────────────── */
@media print {
  .fx-header, .fx-footer, .sidebar, .topbar, .fx-actions,
  #float-contact, button { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}