/* ==========================================================================
   smartix · mobile-overrides.css
   --------------------------------------------------------------------------
   Refactoring UI (Wathan & Schoger) + 8pt Grid + Apple HIG / Material Touch
   --------------------------------------------------------------------------
   목적: 41 페이지 인라인 CSS를 강제 보정. 모바일에서 시각 깨짐 최소화.
   적용 순서: head 최하단에 link하여 모든 페이지 인라인 <style>보다 늦게 로드.
   ========================================================================== */

/* --- 전역 안전망 ---------------------------------------------------------- */
*,*::before,*::after{
  box-sizing:border-box;
}

img,svg,video{
  max-width:100%;
  height:auto;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  /* 모바일에서 가로 스크롤 절대 방지 */
  overflow-x:hidden;
  /* 최소 본문 폰트 16px (iOS 자동 zoom 방지) */
  font-size:max(16px,1rem);
  word-break:keep-all;
  /* Refactoring UI: 본문 가독성 */
  line-height:1.6;
}

/* iOS form zoom 방지 */
input,select,textarea{
  font-size:max(16px,1rem);
}

/* --- Touch Target 44px+ (Apple HIG / Material 48dp) ----------------------- */
.btn,
.btn-primary,
.btn-secondary,
a.btn,
button.btn,
.cta a,
.cta-strip a,
.cta-strip-actions a,
[class*="btn-"][class*="primary"],
[class*="btn-"][class*="secondary"]{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* iOS hover artifact 제거 */
  -webkit-tap-highlight-color:transparent;
}

/* 인접 터치 타겟 최소 간격 (Material 8dp) */
.btn + .btn,
.hero-actions .btn + .btn,
.btns .btn + .btn,
.cta-strip-actions a + a{
  margin-left:8px;
}

/* --- 768px 이하 (모바일·세로 태블릿) --------------------------------------- */
@media (max-width:768px){
  /* 컨테이너 padding 16px (8pt grid) — 모서리 충돌 방지 */
  .wrap,.inner,.container,.section-head{
    padding-left:16px;
    padding-right:16px;
  }

  /* Hero / 일반 section 세로 padding 표준화 */
  section,
  .section{
    padding-top:56px;
    padding-bottom:56px;
  }
  .hero{
    padding-top:48px;
    padding-bottom:40px;
  }

  /* 타이포: Refactoring UI 권장 — 모바일에서 글자 줄여 호흡 확보 */
  h1{
    font-size:clamp(28px,7vw,40px);
    line-height:1.18;
    letter-spacing:-0.03em;
  }
  h2{
    font-size:clamp(22px,5vw,30px);
    line-height:1.25;
  }
  h3{
    font-size:clamp(18px,4vw,22px);
    line-height:1.32;
  }
  p,li{
    font-size:16px;
    line-height:1.65;
  }

  /* 모든 multi-column 그리드 → 1열 강제 (모바일은 vertical stack) */
  [class*="grid"][style*="grid-template-columns"],
  .grid,
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-6,
  .hero-grid,.industry-grid,.solution-grid,.product-grid,.feature-grid,
  .scenario-grid,.flow-grid,.qr-grid,.persona-grid,.fit-grid,
  .ops-grid,.benefit-grid,.core-grid,.mission-grid,.application-grid,
  .reference-grid,.experience-grid,.consult-grid,.combo-row,
  .compare-row,.value-grid,.featured-grid,.indicator-grid,
  .logic-grid,.subcategory-grid,.problem-grid,.effect-grid,
  .process,.process-grid,.flow-hw-visual-grid,.flow-step-nav,
  .lottery-flow,.color-sync,.qr-device,.answer-grid,.problem-cards,
  .model-grid,.proof-grid,.usecase-grid,.link-grid,.showcase-grid,
  .reason-grid,.module-row,.pv-result-strip,.dash-grid,.hero-metrics,
  .hw-grid,.ticket-grid,.channel-stats,.integration-strip,
  .board-stats,.compare-band,.core-line,.console-report,.scan-strip,
  .hw-feature-row,.hardware-map,.checkin-hw-strip,.day-map,.kpis,
  .board-metrics,.board-links,.metric-grid,.outcomes,.hero-kpis,
  .mode-grid,.pain-cards,.console-stats,.checkin-grid,.process-v2,
  .relation-grid,.security-grid,.journey,.mock-kpi,.mock-flow,
  .flow,.feature-bento,.mega-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  /* 좌석 그리드 (.seat-grid) 는 의도된 12열 유지 (가로 스크롤 허용) */
  .seat-grid{
    overflow-x:auto;
  }

  /* ---------------------------------------------------------------------
     products/maketicket .flow-* 시스템 강제 단순화
     ---------------------------------------------------------------------
     인라인 CSS의 !important 273회 모두 override.
     데스크탑은 복잡 인터랙티브 그리드 유지, 모바일은 단순 vertical stack.
     --------------------------------------------------------------------- */
  .flow-stage,
  .flow-stage-body,
  .flow-hw-visual,
  .flow-mini-card{
    display:block !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    min-height:auto !important;
    max-height:none !important;
    height:auto !important;
    padding:14px !important;
    margin:0 0 12px !important;
    overflow:visible !important;
    border-radius:16px !important;
    transform:none !important;
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
  }
  .flow-stage-grid,
  .flow-hw-visual-grid,
  .flow-step-nav,
  .flow-progress{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 0 12px !important;
    min-height:auto !important;
    height:auto !important;
    overflow:visible !important;
  }
  .flow-stage-marker,
  .flow-index{
    display:inline-block !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:auto !important;
    height:auto !important;
    min-height:auto !important;
    padding:4px 10px !important;
    margin:0 0 8px !important;
    font-size:13px !important;
    border-radius:999px !important;
  }
  .flow-stage-top{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    min-height:auto !important;
    margin:0 0 10px !important;
  }
  .flow-hw-icon,
  .flow-hw-visual i,
  .flow-hw-visual svg{
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
  }
  .flow-hw-visual em{
    font-size:14px !important;
    line-height:1.4 !important;
    color:#1c2441 !important;
  }
  .flow-hw-visual:before{
    display:none !important;
  }

  /* ---------------------------------------------------------------------
     B+A 라운드 보강 — 페이지별 잔존 패턴 일괄 처리
     - repeat 6+열 grid (.quick, .quick-nav, .seat-grid 등)
     - min-width 큰 박스 (.label, .after-system, table 등)
     - min-height 700+ 박스 (.persona-card, .flow-card 등)
     --------------------------------------------------------------------- */

  /* 6+열 그리드 모바일 강제 1fr (좌석 그리드 제외) */
  .quick,.quick-nav,
  [class*="grid"][style*="repeat(6"],
  [class*="grid"][style*="repeat(7"],
  [class*="grid"][style*="repeat(8"],
  [class*="grid"][style*="repeat(9"],
  .channel-stats,.flow-step-nav,.step-nav,
  .partner-grid,.partners-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  /* min-width 큰 박스 모바일 풀기 */
  .after-system,.label,table,
  .system-flow,.connection-table,.compare-table,
  .map-item,.product-card,.hero-grid{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* min-height 700px+ 큰 박스 모바일 컴팩트 */
  .persona-card,.flow-card,.mission-card,.fit-card,
  .reference-card,.consult-card,.experience-card,
  .ref-card,.product-card,.scenario-card,.feature-card,
  .benefit-card,.application-card,.industry-card,.case-card,
  .core-card,.compare-card,.faq-item{
    min-height:auto !important;
    max-height:none !important;
  }

  /* products/ 제품 카드: 모바일에서 "자세히 보기" absolute → static
     데스크탑은 카드 우하단 고정이지만 모바일은 카드 높이가 짧아져
     ul 본문과 너무 가까워지는 이슈. 자연 흐름 + margin-top으로 분리 */
  .product-card a{
    position:static !important;
    display:inline-block !important;
    margin-top:14px !important;
    left:auto !important;
    bottom:auto !important;
  }

  /* hero showcase / dashboard 영역 — 데스크탑 큰 높이 풀기 */
  .hero{
    min-height:auto !important;
  }
  .hero-showcase,
  .kiosk-visual,.channel-console,.dash-grid,
  .mock-dashboard,.product-mockup{
    min-height:auto !important;
    max-height:none !important;
  }

  /* 모바일에서 절대 위치 부속 UI (마이크로 카드 등) 정상 흐름으로 */
  .float-card,.hero-mini,.float-left,.float-right,.float-bottom,
  .pill-floating,.badge-floating{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:100% !important;
    margin:8px 0 !important;
  }

  /* 인라인 style="width:NNNpx" 강제 풀기 (HTML inline override 어려움) */
  [style*="width:7"],[style*="width:8"],
  [style*="width: 7"],[style*="width: 8"],
  [style*="min-width:6"],[style*="min-width:7"],[style*="min-width:8"]{
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* 카드 padding 16px+ (Refactoring UI 권장) */
  .card,.feature-card,.scenario-card,.fit-card,.product-card,
  .case-card,.industry-card,.persona-card,.flow-card,.mission-card,
  .core-card,.benefit-card,.consult-card,.ref-card,.reference-card,
  .application-card,.experience-card,.qa-card,.faq-item,
  .problem-card,.compare-card{
    padding:20px;
  }

  /* CTA 영역 padding 24px+ (강조 영역) */
  .cta,.cta-section,.cta-strip,.cta-box,.cta-panel,.final-cta,
  .hub-cta,.bottom-cta{
    padding:24px 20px;
  }

  /* CTA 내부 버튼 그룹 — 세로 정렬 + 폭 100% */
  .cta-strip-actions,
  .hero-actions,
  .btns{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
  }
  .cta-strip-actions a,
  .hero-actions .btn,
  .hero-actions .link-arrow,
  .btns .btn{
    width:100%;
    justify-content:center;
  }
  /* margin-left 누적 방지 */
  .cta-strip-actions a + a,
  .hero-actions .btn + .btn,
  .btns .btn + .btn{
    margin-left:0;
  }

  /* 큰 hero / hero showcase 영역 — 모바일에서 컴팩트 */
  .hero-board,
  .hero-card,
  .hero-mini,
  .hero-showcase,
  .kiosk-visual,
  .channel-console,
  .gate-photo-visual{
    margin-top:24px;
    width:100%;
    /* 절대 위치 hero 부속 → 정상 흐름 */
    position:static !important;
    transform:none !important;
  }

  /* 테이블·고정 폭 박스 — 가로 스크롤 허용 */
  table,
  .combo table,
  .cmp-table,
  .compare-table,
  .compare-row,
  .pv-map,
  .pv-visual-frame svg{
    display:block;
    max-width:100%;
    overflow-x:auto;
  }

  /* 푸터 모바일 정리 */
  footer .inner,
  .site-footer .inner{
    flex-direction:column;
    gap:16px;
    text-align:left;
  }
}

/* --- 480px 이하 (소형 모바일) ------------------------------------------- */
@media (max-width:480px){
  .wrap,.inner,.container,.section-head{
    padding-left:14px;
    padding-right:14px;
  }
  h1{
    font-size:clamp(26px,7vw,34px);
    letter-spacing:-0.02em;
  }
  h2{
    font-size:clamp(20px,5vw,26px);
  }
  section,.section{
    padding-top:44px;
    padding-bottom:44px;
  }
  .hero{
    padding-top:40px;
    padding-bottom:32px;
  }
  /* 카드 padding 줄여서 컨텐츠 확보 */
  .card,.feature-card,.scenario-card,.fit-card,.product-card,
  .case-card,.industry-card,.persona-card,.flow-card,.faq-item,
  .application-card,.consult-card,.benefit-card{
    padding:18px;
  }
  .cta,.cta-section,.cta-strip,.final-cta{
    padding:20px 16px;
  }
}

/* --- 접근성: 포커스 시 명확한 시각 표시 ----------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:2px solid #6c3bff;
  outline-offset:2px;
  border-radius:8px;
}

/* --- prefers-reduced-motion 사용자 존중 ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}