/* HCL — 모바일 카드 가로 스냅 스크롤 (≤767px 전용) v3 */
.mobile-snap-dots {
  display: none;
}

@media (max-width: 767px) {
  /* ─── 가로 스냅 카드 컨테이너 ─── */
  .mobile-snap-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 4px 20px 8px;
    margin: 0 -20px;
    border: 0 !important;
    /* space-y-* 무력화 */
    --tw-space-y-reverse: 0 !important;
  }
  .mobile-snap-row > * + * {
    margin-top: 0 !important;
  }
  .mobile-snap-row::-webkit-scrollbar {
    display: none;
  }
  .mobile-snap-row > * {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: start;
    min-width: 0;
    word-break: keep-all;
    align-self: stretch !important;
    height: auto !important;
    min-height: 100% !important;
    border: 1px solid rgba(212, 218, 227, 1) !important;
    border-radius: 12px;
  }
  [data-snap-dark].mobile-snap-row > *,
  [data-snap-dark] .mobile-snap-row > * {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  [data-snap="wide"].mobile-snap-row > *,
  [data-snap="wide"] .mobile-snap-row > * {
    flex: 0 0 90% !important;
    max-width: 90% !important;
  }
  [data-snap="compact"].mobile-snap-row > *,
  [data-snap="compact"] .mobile-snap-row > * {
    flex: 0 0 70% !important;
    max-width: 70% !important;
  }

  /* ─── 카드 안 큰 숫자 폰트 모바일 축소 ─── */
  .mobile-snap-row .text-\[60px\],
  .mobile-snap-row .text-\[52px\],
  .mobile-snap-row .text-\[48px\],
  .mobile-snap-row .text-\[44px\],
  .mobile-snap-row .md\:text-\[60px\] {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }
  .mobile-snap-row .text-\[40px\] {
    font-size: 28px !important;
  }
  .mobile-snap-row .text-\[36px\] {
    font-size: 26px !important;
  }
  .mobile-snap-row .text-\[32px\] {
    font-size: 24px !important;
  }
  /* heading-lg 또는 h2/h3 큰 텍스트 보호 */
  .mobile-snap-row h2,
  .mobile-snap-row h3 {
    word-break: keep-all;
  }

  /* ─── 인디케이터 dots ─── */
  .mobile-snap-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 16px 0 4px;
    padding: 0;
  }
  .mobile-snap-dots span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(6, 20, 58, 0.16);
    transition:
      width 0.3s ease,
      background 0.3s ease;
  }
  .mobile-snap-dots span.is-active {
    width: 22px;
    border-radius: 999px;
    background: #26b7c7;
  }
  [data-snap-dark] ~ .mobile-snap-dots span,
  [data-snap-dark].mobile-snap-row ~ .mobile-snap-dots span {
    background: rgba(255, 255, 255, 0.22);
  }
  [data-snap-dark] ~ .mobile-snap-dots span.is-active,
  [data-snap-dark].mobile-snap-row ~ .mobile-snap-dots span.is-active {
    background: #7bd2dc;
  }

  /* ─── 정책자금 "상담~사후관리" 5단계 모바일 2x2+1 ─── */
  .proc-grid-2x2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .proc-grid-2x2 > *:nth-child(5) {
    grid-column: 1 / -1;
    max-width: calc(50% - 4px);
    margin: 0 auto;
  }

  /* ─── 정책자금 "가산점 효과 표" → 모바일 가로 슬라이드 카드 ─── */
  #cert-table .overflow-x-auto {
    overflow: visible !important;
    border: 0 !important;
    margin: 0 -20px;
  }
  #cert-table table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
  }
  #cert-table thead {
    display: none !important;
  }
  #cert-table tbody {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    padding: 4px 20px 8px;
  }
  #cert-table tbody::-webkit-scrollbar {
    display: none;
  }
  #cert-table tbody tr {
    display: block !important;
    flex: 0 0 82% !important;
    min-width: 82% !important;
    scroll-snap-align: start;
    background: white !important;
    border: 1px solid #d4dae3 !important;
    border-radius: 12px !important;
    padding: 18px 18px 8px !important;
  }
  #cert-table tbody tr:hover {
    background: white !important;
  }
  #cert-table tbody td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #e8ecf2 !important;
    text-align: right !important;
    font-size: 13px !important;
  }
  #cert-table tbody td:last-child {
    border-bottom: 0 !important;
  }
  #cert-table tbody td:first-child {
    display: block !important;
    border-bottom: 2px solid #06143a !important;
    margin-bottom: 6px;
    padding-bottom: 12px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #06143a !important;
    text-align: left !important;
  }
  #cert-table tbody td:nth-child(2)::before {
    content: "정책자금 우대";
  }
  #cert-table tbody td:nth-child(3)::before {
    content: "R&D 가산점";
  }
  #cert-table tbody td:nth-child(4)::before {
    content: "세제 혜택";
  }
  #cert-table tbody td:nth-child(5)::before {
    content: "보증료 우대";
  }
  #cert-table tbody td:nth-child(n + 2)::before {
    font-size: 11px;
    color: #6a7480;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-right: 12px;
  }

  /* ─── 카톡 / TOP 버튼 겹침 완전 분리 ─── */
  #kakaoBtn {
    bottom: 88px !important;
    z-index: 41 !important;
  }
  #topBtn {
    bottom: 168px !important;
    z-index: 41 !important;
  }
}