/* ═══════════════════════════════════════════════════════
   tai-responsive.css — TAI 커스텀 섹션 모바일 반응형
   모든 페이지에 공통 적용. 템플릿 responsive.css 보완.
   W2: 광역 hero 덮어쓰기 제거 → 각 hero별 명시적 계약으로 교체.
   ═══════════════════════════════════════════════════════ */

/* ── 기본: 이미지 반응형 전역 ── */
img { max-width: 100%; height: auto; }

/* ── 768px 이하: 태블릿/모바일 ── */
@media (max-width: 768px) {

  /* ── HERO 섹션 — 개별 계약 (W2) ──────────────────────
     고정 헤더 높이 ~72–90px를 모두 수용하는 계약.
     각 hero는 min-height 유지, padding은 nav-h + 여백.
     tai-hero__inner는 tai-hero.css에서 이미 처리하므로
     .tai-hero 자체에는 min-height/padding 강제하지 않음.
  ─────────────────────────────────────────────────────── */

  /* 1. index.astro — overlay 방식: min-height는 유지 */
  .idx-hero-new {
    min-height: 420px;
  }
  /* overlay 콘텐츠 하단 패딩 확보 (align-items:flex-end) */
  .idx-hero-new-content {
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
  }

  /* 2. pricing — inline 패딩 방식 */
  .price-hero {
    padding: calc(var(--tai-nav-h, 72px) + 48px) 16px 48px !important;
    min-height: auto;
  }

  /* 3. saas-hero — inner grid 방식이므로 outer 강제 안 함 */

  /* 4. contact-hero / faq-hero — 패딩 기반, nav clearance 명시 */
  .contact-hero {
    padding: calc(var(--tai-nav-h, 72px) + 40px) 0 50px !important;
  }
  .faq-hero {
    padding: calc(var(--tai-nav-h, 72px) + 40px) 0 50px !important;
  }

  /* 5. ss-hero — already uses calc(var(--tai-nav-h,90px)+36px) via inline */

  /* 6. owner-hero-section — inner 방식으로 이미 처리됨 */

  /* 7. sm-hero — inline @media already handles padding */

  /* ── hero 타이포그래피 공통 ── */
  .tai-hero__title,
  .idx-hero-new-title,
  .price-hero h1,
  .diag-hero h1,
  .apps-hero .hero-title,
  .saas-hero h1,
  .owner-hero-content h1,
  .sm-hero-text .sm-title,
  .tai-about-hero h1,
  .contact-hero h1,
  .faq-hero h1,
  .ss-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    line-height: 1.2 !important;
    word-break: keep-all;
  }

  /* 수평 스크롤 방지 */
  body, html {
    overflow-x: hidden;
  }
  .container, .sec-inner, [class*="container"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 버튼 전폭 */
  .btn-red, .btn-navy, .btn-outline,
  .btn-base, .btn-border,
  .idx-hero-new-cta, .result-cta-btn {
    min-height: 44px;
  }
  .btn-red, .btn-navy, .btn-outline,
  .btn-base, .btn-border {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 0.9rem;
  }

  /* 섹션 패딩 축소 */
  .sec, [class*="pd-top-"], [class*="pd-bottom-"],
  .idx-section, .problem-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* 플로우 이미지 */
  .sec img, .sec-inner img,
  .idx-section-img, .solution-flow-img img,
  .wrong-tries-section .idx-section-img {
    max-width: 100%;
    height: auto;
  }

  /* 통계 카운터 (4열 → 2열) */
  .counter-wrap, .stat-grid, [class*="counter"],
  .trust-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* 가격 카드 */
  .plan-card, .diag-card, .single-price,
  [class*="pricing-card"], [class*="price-card"],
  #saas-page .sp-price {
    margin-bottom: 16px;
  }

  /* 테이블 가로 스크롤 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── index: 8칸 기능 그리드 2열 ── */
  .versatile-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* ── 무료진단: 스텝 인디케이터 ── */
  .diag-page-modern .pb-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 4px;
    margin-bottom: 28px;
  }
  .diag-page-modern .pb-line {
    display: none;
  }
  .diag-page-modern .diag-shell,
  .diag-page-modern .diag-form-panel {
    max-width: 100% !important;
  }

  /* ── 진단 결과 ── */
  .diag-result-chart img,
  .saas-img {
    max-width: 100%;
    height: auto;
  }
  .law-badge {
    word-break: break-word;
    white-space: normal;
  }
  .rule-desc, .rule-meta, .urgent-title {
    word-break: break-word;
  }

  /* ── SaaS: 기능 소개 세로 전환 ── */
  #saas-page .sp-sec .row.flex-row-reverse,
  #saas-page .sp-sec .row.align-items-center {
    flex-direction: column !important;
  }
  #saas-page .sp-sec .row.flex-row-reverse > [class*="col-"],
  #saas-page .sp-sec .row.align-items-center > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }
  #saas-page .sp-industry-tier-flow .sp-tier-steps {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #saas-page .sp-industry-tier-flow .sp-tier-arrow {
    display: none;
  }
  #saas-page .sp-sector-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }
  #saas-page .sp-sector-btn {
    flex: 1 1 30%;
    min-width: 0;
    font-size: 0.82rem;
    padding: 10px 8px;
  }

  /* ── pricing: 탭 ── */
  .price-tabs {
    flex-wrap: wrap;
    gap: 8px;
  }
  .price-tab-btn {
    flex: 1 1 45%;
    padding: 10px 16px;
    font-size: 0.85rem;
  }
  .sector-tabs {
    width: 100%;
    flex-wrap: wrap;
  }
  .sector-tab-btn {
    flex: 1 1 30%;
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.78rem;
    text-align: center;
  }
  .sector-tab-btn .sector-icon {
    display: block;
    margin: 0 auto 2px;
  }

  /* ── 로그인: 소셜 버튼 세로 ── */
  .social-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .social-btn {
    width: 100%;
    max-width: 280px;
    height: 48px;
    border-radius: 8px;
  }
}

/* ── 480px 이하: 소형 모바일 ── */
@media (max-width: 480px) {
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.35rem !important; }
  h3 { font-size: 1.15rem !important; }

  .sec { padding: 36px 0 !important; }
  .sec-inner { padding: 0 12px !important; }

  /* 통계 카운터 1열 */
  .counter-wrap, .stat-grid,
  .trust-stats {
    grid-template-columns: 1fr !important;
  }

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

  .result-cta-btn {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  #saas-page .sp-sector-btn {
    flex: 1 1 100%;
  }
}

/* ── 375px 이하: 초소형 ── */
@media (max-width: 375px) {
  body { font-size: 14px; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── Bootstrap row gutter mobile clamp — W2 route scope only (PATCH-2) ──
   .row.g-5/g-4의 --bs-gutter-x가 M390에서 scrollWidth 8–12px 초과.
   W2 마케팅 페이지에만 scope. MyPage(W5) 등 타 페이지 gutter 보존.
   적용: body.w2-marketing-responsive class 있는 페이지만. */
@media (max-width: 575px) {
  body.w2-marketing-responsive .row.g-5 { --bs-gutter-x: 1rem; }
  body.w2-marketing-responsive .row.g-4 { --bs-gutter-x: 0.75rem; }
}

/* ── 검색 팝업 폼: 모바일 가로 오버플로우 방지 ──
   원본 style.css/responsive.css 의 .search-form { min-width:600px } 가
   폰 폭보다 커서 팝업 열람 시 가로 스크롤 발생 → 뷰포트 내로 캡. */
@media (max-width: 640px) {
  .search-popup .search-form,
  .search-popup form { min-width: 0 !important; max-width: 90vw; }
  .search-popup .form-group,
  .search-popup .form-control { max-width: 100%; }
}