/**
 * styles/mobile.css — 전체 모바일 최적화 (MASTER HOTFIX #126, 2026-05-22)
 *
 * 사장님 P0: "모바일에서 팝업 화면이 잘려서 보여 모바일 용으로 재 작성"
 *            "다른것도 마찬가지로 모바일 사용이 많기 때문에 모바일에서 잘 보이게"
 *
 * 원칙:
 *   1. 데스크톱 디자인 영향 X — 모든 규칙 @media (max-width:...) 안에
 *   2. iOS 자동 확대 방지 — 입력 폼 font-size 16px
 *   3. 가로 스크롤 절대 금지 — overflow-x: hidden
 *   4. 터치 영역 최소 44x44px
 *   5. iPhone safe-area 대응 — env(safe-area-inset-*)
 *   6. PWA 친화 — viewport-fit=cover (index.html 참조)
 *
 * 브레이크포인트:
 *   📱 모바일: ~640px   → 1열, 풀스크린 모달
 *   📱 태블릿: 640~768px → 1~2열 적응형
 *   💻 데스크톱: 768px+  → 본 파일 영향 X
 *
 * Load order (index.html):
 *   tokens.css → chatbot.css → style.css → mobile.css  (last-wins 우선)
 */


/* ════════════════════════════════════════════════════════════════
 * Part A — 글로벌 베이스 (모든 화면 적용 — 단, 데스크톱 영향 X)
 * ══════════════════════════════════════════════════════════════ */

/* safe-area 변수 (iPhone notch / Dynamic Island 대응) */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* iOS 자동 텍스트 확대 방지 (가로 회전 시) */
html {
  -webkit-text-size-adjust: 100%;
}

/* 모바일 가로 스크롤 절대 방지 — body 만 (html 은 PWA 호환 위해 그대로) */
body {
  overflow-x: hidden;
}

/* 터치 하이라이트 제거 (iOS 회색 박스) */
button, a, [role="button"], input[type="button"], input[type="submit"] {
  -webkit-tap-highlight-color: transparent;
}

/* 스크롤 부드럽게 (iOS Safari) */
.scroll-touch,
.overflow-y-auto,
.overflow-x-auto,
.overflow-auto {
  -webkit-overflow-scrolling: touch;
}


/* ════════════════════════════════════════════════════════════════
 * 모바일 (~640px) — 1열, 풀스크린 모달, 큰 터치
 * ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* ── iOS 자동 확대 방지: 모든 입력 16px ────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ── 터치 영역 보장 ──────────────────────────────────────── */
  button:not(.no-min-tap),
  a.btn,
  [role="button"]:not(.no-min-tap) {
    min-height: 44px;
  }
  /* 텍스트 안의 인라인 링크는 예외 */
  p a, li a, span a { min-height: auto; }


  /* ════════════════════════════════════════════════════════════
   * Part C — 온보딩 모달 풀스크린 (사장님 지적 핵심)
   * "팝업 화면이 잘려서 보여" → 모바일에서 풀스크린으로
   * ══════════════════════════════════════════════════════════ */

  /* onboarding-modal.js 가 인라인 style 로 생성한 모달 */
  [data-testid="onboarding-modal"] {
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* 모달 컨테이너 (.role=dialog 직속 div) */
  [data-testid="onboarding-modal"] > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important; /* 동적 viewport (모바일 주소창 자동 조정) */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    box-shadow: none !important;
  }

  /* 좌측 사이드바 → 상단 가로 진행도로 변환 */
  [data-testid="onboarding-modal"] aside {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: calc(12px + var(--safe-top)) 16px 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  [data-testid="onboarding-modal"] aside h3 { display: none !important; }
  [data-testid="onboarding-modal"] aside ul {
    flex: 1;
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  [data-testid="onboarding-modal"] aside ul li {
    flex-shrink: 0;
    padding: 4px 0 !important;
  }
  [data-testid="onboarding-modal"] aside ul li > span:last-child {
    display: none !important; /* 짧은 스텝 제목 숨김 (점만 표시) */
  }
  [data-testid="onboarding-modal"] aside > div:last-child {
    flex-shrink: 0;
    font-size: 12px;
  }

  /* 본문 영역 */
  [data-testid="onboarding-modal"] main {
    flex: 1 !important;
    padding: 20px 16px !important;
    padding-bottom: calc(16px + var(--safe-bottom)) !important;
  }
  [data-testid="onboarding-modal"] main h2 {
    font-size: 20px !important;
  }
  /* 하단 액션 영역 풀너비 버튼 */
  [data-testid="onboarding-modal"] main > div:last-child {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  [data-testid="onboarding-modal"] main > div:last-child button {
    width: 100%;
    min-height: 48px;
    font-size: 15px !important;
  }


  /* ════════════════════════════════════════════════════════════
   * Part D — 회의 목록 + 검색·필터·정렬 (#125)
   * ══════════════════════════════════════════════════════════ */

  /* meetings_all.js 의 .meeting-card 모바일 정리 */
  .meeting-card {
    padding: 10px !important;
    gap: 8px;
  }
  .meeting-card .meeting-meta,
  .meeting-card [class*="meeting-meta"] {
    font-size: 11px;
  }


  /* ════════════════════════════════════════════════════════════
   * Part E — 회의 생성 (record/upload + 폼)
   * ══════════════════════════════════════════════════════════ */

  /* 녹음 큰 버튼 — meeting_new.js 의 .recording-button (있으면) */
  .recording-button,
  .record-button-big {
    width: 96px !important;
    height: 96px !important;
    font-size: 36px !important;
  }
  .record-timer {
    font-size: 28px !important;
    font-variant-numeric: tabular-nums;
  }


  /* ════════════════════════════════════════════════════════════
   * Part F — 회의 상세 (마크다운 + 액션)
   * ══════════════════════════════════════════════════════════ */

  .formatted-content,
  .meeting-formatted,
  [data-meeting-content] {
    font-size: 14px;
    line-height: 1.6;
  }
  .formatted-content h1,
  .meeting-formatted h1 { font-size: 18px; }
  .formatted-content h2,
  .meeting-formatted h2 { font-size: 16px; }
  .formatted-content h3,
  .meeting-formatted h3 { font-size: 15px; }

  /* 카카오 공유 모달 — 바텀 시트 스타일 (있을 때만) */
  dialog.share-modal[open] {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    padding-bottom: var(--safe-bottom);
  }


  /* ════════════════════════════════════════════════════════════
   * Part G — RAG 챗봇 (#121)
   * 기존 chatbot.css 의 1열 전환 보강 (사이드바 드로어화)
   * ══════════════════════════════════════════════════════════ */

  .chatbot-page {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 56px - var(--safe-top)) !important;
    height: calc(100dvh - 56px - var(--safe-top)) !important;
  }

  /* 사이드바 — chatbot.css 가 기본 display:none 으로 처리.
     본 파일에서는 .chatbot-sidebar--mobile-open 클래스로 드로어 표시 (JS 가 토글). */
  .chatbot-sidebar.chatbot-sidebar--mobile-open {
    display: block !important;
    position: fixed;
    top: calc(56px + var(--safe-top));
    bottom: 0;
    left: 0;
    width: min(85%, 320px);
    z-index: 50;
    background: #fff;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  }
  .chatbot-sidebar-overlay {
    display: none;
  }
  .chatbot-sidebar-overlay.open {
    display: block;
    position: fixed;
    top: calc(56px + var(--safe-top));
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 40;
  }

  /* 챗봇 메인 입력 영역 — safe-area 보강 */
  .chat-input-area,
  .chatbot-input-area {
    padding-bottom: calc(12px + var(--safe-bottom)) !important;
  }
  .chat-input-area textarea,
  .chatbot-input-area textarea {
    min-height: 48px;
    font-size: 16px !important;
  }


  /* ════════════════════════════════════════════════════════════
   * Part H — 기타 페이지 (대시보드/설정/도움말/약관/admin)
   * ══════════════════════════════════════════════════════════ */

  /* 대시보드 통계 — 2열 */
  .dashboard-stats,
  [data-dashboard-stats] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* 약관 / 개인정보 표 가로 스크롤 */
  .legal-page table,
  table.legal-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }

  /* ADMIN 큰 표 가로 스크롤 */
  .admin-page table,
  table.admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 헤더 안전영역 (notch) — 기존 fixed header 위로 spacer */
  header.fixed,
  header[class*="fixed top-0"] {
    padding-top: calc(0.75rem + var(--safe-top));
  }
  /* 헤더 높이 보정 — 사이드바 top 위치 (top-14 = 56px) */
  aside#sidebar {
    top: calc(56px + var(--safe-top)) !important;
    padding-bottom: var(--safe-bottom);
  }
  #announcement-banner-mount {
    top: calc(48px + var(--safe-top)) !important;
  }
  /* 본문 영역 첫 padding 보정 (헤더 fixed 와 충돌 회피) */
  main#main-content {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
    padding-bottom: var(--safe-bottom);
  }

  /* 공지 배너 모바일 — 컴팩트 */
  .announcement-banner,
  [class*="announcement-banner"]:not(.announcement-banner-mount) {
    font-size: 12px;
    padding: 8px 12px;
  }
}


/* ════════════════════════════════════════════════════════════════
 * 태블릿 (641~768px) — 일부 패턴만 적용
 * ══════════════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 768px) {
  /* 입력 폼 16px 유지 (iOS iPad 가로 모드 등) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 15px;
  }

  /* 챗봇 — 사이드바 좁게 유지 (220px) */
  .chatbot-page { grid-template-columns: 220px 1fr; }
}


/* ════════════════════════════════════════════════════════════════
 * Part I — PWA 설치 안내 배너
 * (components/install-prompt.js 가 동적 삽입)
 * ══════════════════════════════════════════════════════════════ */

.install-banner {
  position: fixed;
  bottom: calc(16px + var(--safe-bottom));
  left: 16px;
  right: 16px;
  background: linear-gradient(135deg, #0F1E3D 0%, #1a2f5e 100%);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 90;
  font-size: 13px;
  animation: installBannerSlideUp 0.3s ease;
}
.install-banner span { flex: 1; }
.install-banner button {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  min-height: 36px; /* 배너 자체 컴팩트 — 안에서 별도 */
}
.install-banner .primary-sm {
  background: #C9A961;
  color: #0F1E3D;
  font-weight: 700;
}
.install-banner .secondary-sm {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.install-banner.hidden { display: none !important; }

@keyframes installBannerSlideUp {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .install-banner { animation: none; }
}


/* ════════════════════════════════════════════════════════════════
 * 인쇄 (Export PDF 보조)
 * ══════════════════════════════════════════════════════════════ */

@media print {
  .install-banner,
  header.fixed,
  #sidebar,
  #announcement-banner-mount { display: none !important; }
  main#main-content {
    padding: 0 !important;
    margin: 0 !important;
  }
}