/*
 * global.css — 소상공인 AI 허브 전역 최적화 CSS v2.0
 * 모든 페이지에서 공통으로 발생하는 모바일/PC 문제를 해결합니다.
 * 적용: <link rel="stylesheet" href="css/global.css">
 * 최종 업데이트: 2026-03-24
 */

/* ═══════════════════════════════════════════
   1. 기본 리셋 & 전역 최적화
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* iOS 폰트 자동 확대 방지 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 부드러운 스크롤 */
  scroll-behavior: smooth;
}

body {
  /* 가로 스크롤 완전 차단 */
  overflow-x: hidden;
  /* 모바일 탭 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;
  /* 더블탭 줌 방지 */
  touch-action: manipulation;
  /* 안티앨리어싱 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 미디어 요소 최대폭 제한 */
img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}

/* 긴 텍스트 자동 줄바꿈 (한글 최적화) */
p, li, td, th, label, span, div {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════
   2. 입력 요소 iOS 줌인 방지
   (iOS는 font-size 16px 미만이면 자동 줌인)
═══════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea {
  font-size: max(16px, 1em);
}

select {
  font-size: max(16px, 1em);
  -webkit-appearance: none;
  appearance: none;
}

/* ═══════════════════════════════════════════
   3. 터치 타겟 최소 크기 보장 (44×44px 권장)
═══════════════════════════════════════════ */
button,
[role="button"],
.btn,
.nav-btn,
.tab-btn,
.ntab,
.atab,
.lesson-link-btn,
.mob-link {
  min-height: 36px;
  cursor: pointer;
}

@media (max-width: 768px) {
  button,
  [role="button"],
  .btn,
  .nav-btn,
  .tab-btn,
  .ntab,
  .atab,
  .lesson-link-btn {
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════
   4. 공통 탭바 — 모바일 가로 스크롤
═══════════════════════════════════════════ */
.tab-bar,
.nav-tabs,
.filter-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Firefox */
}
.tab-bar::-webkit-scrollbar,
.nav-tabs::-webkit-scrollbar,
.filter-wrap::-webkit-scrollbar {
  display: none;                /* Chrome/Safari */
}

/* 탭 버튼이 줄바꿈되지 않도록 */
.tab-bar .tab-btn,
.nav-tabs .ntab {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   5. 강의 네비게이터 바 — 모바일 최적화
═══════════════════════════════════════════ */
#lesson-nav-bar {
  /* 이미 fixed 포지셔닝은 각 페이지에서 설정 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#lesson-nav-bar::-webkit-scrollbar { display: none; }

@media (max-width: 600px) {
  #lesson-nav-bar {
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  #lesson-nav-bar a {
    flex-shrink: 0;
    font-size: .7rem !important;
    padding: 5px 9px !important;
  }
  #lesson-nav-bar > div[style*="flex:1"] {
    min-width: 50px;
    flex: 1;
  }
  #lesson-nav-bar > div[style*="font-size:.72rem"] {
    flex-shrink: 0;
    font-size: .65rem !important;
  }
  #lesson-nav-bar > div[style*="font-size:.75rem"] {
    display: none; /* 제목 텍스트 숨김 (공간 확보) */
  }
}

/* ═══════════════════════════════════════════
   6. 토스트 알림 — 모바일 최적화
═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .toast {
    max-width: calc(100vw - 32px) !important;
    white-space: normal !important;
    text-align: center;
    font-size: .8rem !important;
    bottom: 80px !important; /* 강의 네비게이터 위로 */
  }
}

/* ═══════════════════════════════════════════
   7. 프롬프트 텍스트 박스 — 모바일 가독성
═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .prompt-box,
  .prompt-text {
    font-size: .78rem !important;
    line-height: 1.65 !important;
  }
  .copy-btn {
    position: static !important;
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════
   8. 네비게이션 — 모바일 버튼 압축
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav-inner {
    gap: 6px !important;
    padding: 0 12px !important;
  }
  /* 네비 버튼 텍스트 라벨 숨기고 아이콘만 */
  .nav-btn span.nav-label,
  .nav-btn > span:not(.fa):not([class*="fas"]):not([class*="far"]) {
    display: none;
  }
  .nav-btn {
    padding: 6px 10px !important;
    font-size: .72rem !important;
  }
  .nav-logo > span,
  .nav-logo-text span:last-child {
    display: none;
  }
}

@media (max-width: 400px) {
  /* 역할 배지 텍스트 숨김 */
  .nav-role-badge span { display: none; }
}

/* ═══════════════════════════════════════════
   9. 카드 그리드 — 모바일 단열 전환
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 2열 그리드 → 1열 */
  .g2:not(.keep-2col) {
    grid-template-columns: 1fr !important;
  }
  /* 섹션 좌우 패딩 최소화 */
  section,
  .section,
  .wrap,
  .page {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ═══════════════════════════════════════════
   10. PC 최대 너비 & 중앙 정렬
═══════════════════════════════════════════ */
.page,
.wrap,
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════
   11. 스크롤바 통일 (다크 테마)
═══════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,.7);
}

/* ═══════════════════════════════════════════
   12. 히어로/배너 텍스트 — 모바일 폰트 축소
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-title,
  h1.hero-title {
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  .hero p,
  .hero-desc {
    font-size: .88rem !important;
  }
}

/* ═══════════════════════════════════════════
   13. 모달 — 모바일 전체화면 대응
═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-box,
  .modal-inner,
  .modal-content {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
  }
}

/* ═══════════════════════════════════════════
   14. 테이블 — 모바일 가로 스크롤
═══════════════════════════════════════════ */
.table-wrap,
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}
@media (max-width: 600px) {
  .data-table {
    font-size: .78rem !important;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════
   15. 플렉스 버튼 행 — 모바일 줄바꿈
═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .btn-row,
  .action-row,
  .cta-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .btn-row a,
  .btn-row button,
  .action-row a,
  .action-row button {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════
   16. 강의 네비게이터 카드형 (video-design, automation)
═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .lesson-nav {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .lesson-nav-card {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════
   17. 예시 태그 행 (product-kit 등) — 줄바꿈
═══════════════════════════════════════════ */
.example-row,
.ex-tag-row,
.ind-chip-row {
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   18. 필터/검색바 모바일 최적화
═══════════════════════════════════════════ */
@media (max-width: 600px) {
  .filter-bar,
  .search-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .filter-bar input,
  .search-bar input {
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════
   19. PC 전용 — 호버 효과 활성화
   (터치 기기에서는 hover 비활성화)
═══════════════════════════════════════════ */
@media (hover: none) {
  /* 터치 기기에서 translateY hover 제거 (레이아웃 흔들림 방지) */
  .card-hover:hover,
  .quick-card:hover,
  .resource-card:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════
   20. 접근성 — 포커스 스타일 보강
═══════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid rgba(99,102,241,.7);
  outline-offset: 2px;
}