/* ═══════════════════════════════════════════════════════
   tai-responsive.css — TAI 커스텀 섹션 모바일 반응형
   모든 페이지에 공통 적용. 템플릿 responsive.css 보완.
   ═══════════════════════════════════════════════════════ */

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

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

  /* 히어로 섹션 */
  .tai-hero, [class*="hero-section"], .page-hero,
  .idx-hero-new, .price-hero, .saas-hero {
    min-height: auto !important;
    padding: 48px 16px 40px !important;
  }
  .tai-hero h1, .page-hero .sec-h2,
  [class*="hero"] h1,
  .idx-hero-new-title, .price-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; }
}