/* ═══════════════════════════════════════════════════════════
   Geniego-ROI 모바일 PWA 최적화 CSS v2
   - Android/iPhone 완벽 지원
   - 설치 배너 / iOS 가이드 / 스플래시
   - 모바일 반응형 화면 표시 개선 (전면 강화)
   ═══════════════════════════════════════════════════════════ */

/* ── iOS/Android PWA safe area 변수 ──────────────── */
:root {
  --safe-t: env(safe-area-inset-top,    0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left,   0px);
  --safe-r: env(safe-area-inset-right,  0px);
}

/* ── PWA standalone 모드 ─────────────────────────── */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body {
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ── 공통 모바일 스타일 ──────────────────────────── */
@media (max-width: 768px) {
  /* 전체 폭 스크롤 방지 */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* iOS 입력 줌 방지 */
  input, select, textarea {
    font-size: 16px !important;
    -webkit-appearance: none;
  }

  /* 터치 피드백 개선 */
  * { -webkit-tap-highlight-color: transparent; }

  /* ── 섹션/패널 박스 자동 분리 ─── */
  /* 박스가 너무 붙어 있는 문제: 섹션 사이 gap 추가 */
  [class*="card"], [class*="Card"],
  [class*="box"],  [class*="Box"],
  [class*="panel"], [class*="Panel"],
  [class*="section"], [class*="Section"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── 고정 px 너비 박스 자동 축소 ─── */
  /* inline style width 설정된 박스도 max-width 100% 적용 */
  div[style*="width: "], div[style*="width:"],
  span[style*="width: "], span[style*="width:"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── flex 컨텐츠 자동 줄바꿈 ─── */
  /* 일반 flex 컨테이너는 wrap 허용 */
  /* ★우측 잘림 근본수정: flex-direction:column 컨테이너는 제외(:not column). 세로 flex 에 wrap 을 먹이면
     높이 제약(height:100%·overflow:hidden) 시 자식이 우측 새 컬럼으로 wrap 되어 콘텐츠가 화면 밖으로 밀려
     잘린다(예: Dashboard 루트 → 고정존 좌측·스크롤콘텐츠 우측 off-screen). styles.css 안전망과 동일 정책. */
  div[style*="display: flex"]:not([style*="column"]),
  div[style*="display:flex"]:not([style*="column"]) {
    flex-wrap: wrap;
  }
  /* 단, nav/tab/topbar는 nowrap 유지 */
  nav,
  [role="navigation"],
  [role="tablist"],
  .topbar,
  .topbar-right,
  .sidebar,
  .mobile-bottom-nav {
    flex-wrap: nowrap !important;
  }

  /* 이미 flex-wrap: nowrap으로 명시된 것도 보호 */
  div[style*="flex-wrap: nowrap"],
  div[style*="flexWrap: nowrap"] {
    flex-wrap: nowrap !important;
  }

  /* flex 자식들: min-width 0으로 축소 허용 */
  div[style*="display: flex"] > *,
  div[style*="display:flex"] > * {
    min-width: 0;
  }

  /* ── 텍스트 자동 크기 조정 ─── */
  /* 글자가 화면 밖으로 나가지 않도록 */
  [class*="title"], [class*="Title"],
  [class*="heading"], [class*="Heading"],
  [class*="label"], [class*="Label"] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: keep-all;
  }

  /* ── 테이블 가로 스크롤 래퍼 ─── */
  .table-responsive-wrap,
  [class*="table-wrap"],
  [class*="tableWrap"],
  [class*="tableContainer"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(79,142,247,0.3) transparent;
  }

  /* 차트 컨테이너 너비 제한 */
  svg { max-width: 100%; }
  canvas { max-width: 100%; }

  /* 탭 가로 스크롤 */
  [role="tablist"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  [role="tablist"]::-webkit-scrollbar { display: none; }

  /* ── 인라인 그리드 자동 단일 컬럼 ─── */
  /* [238차] ★반응형 grid(minmax=auto-fit/auto-fill)는 제외 — 스스로 화면폭에 맞춰 균형 배치하므로
     1fr로 무너뜨리면 카드가 1열로 길게 적층돼 "리스트가 아래로 늘어지는" 불균형이 된다(채널 KPI 등).
     고정 트랙 grid만 1열화하고, minmax 반응형 grid는 보존(다열 균형 유지). styles.css 규칙과 정합. */
  div[style*="grid-template-columns"]:not([style*="minmax"]),
  div[style*="gridTemplateColumns"]:not([style*="minmax"]) {
    grid-template-columns: 1fr !important;
  }

  /* ── 고정 높이 박스: min-height로 전환 ─── */
  /* 내용이 많으면 아래로 늘어날 수 있도록 */
  /* [238차] ★max-height 기반 접힘(아코디언/role=region)은 제외 — 'max-height: 0px'가 'height: ' 부분문자열로
     오매칭되어 overflow:visible 로 덮이면, 사이드바 대메뉴 아코디언·드롭다운 collapse 가 무력화되어
     "모든 메뉴가 펼쳐진" 상태가 된다. 고정 height 스크롤박스만 풀고, 접힘 패널은 clip 유지. */
  div[style*="height: "][style*="overflow: hidden"]:not([style*="max-height"]):not([role="region"]),
  div[style*="height:"][style*="overflow:hidden"]:not([style*="max-height"]):not([role="region"]) {
    height: auto !important;
    min-height: fit-content;
    overflow: visible !important;
  }
}

/* ── PWA 설치 배너 ─────────────────────────────── */
#pwa-install-banner {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  background: linear-gradient(135deg, #1a2744, #0d1829);
  border: 1px solid rgba(79, 142, 247, 0.3);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(79, 142, 247, 0.1);
  z-index: 10000;
  animation: banner-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes banner-slide-up {
  from { transform: translateY(80px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

#pwa-install-banner img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

#pwa-install-banner .banner-text { flex: 1; min-width: 0; }
#pwa-install-banner .banner-title { font-weight: 800; font-size: 13px; color: #e8edf5; margin-bottom: 2px; }
#pwa-install-banner .banner-desc  { font-size: 10px; color: #4d6580; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#pwa-install-btn {
  background: linear-gradient(135deg, #4f8ef7, #6366f1);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 16px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
  touch-action: manipulation;
}

#pwa-install-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
  min-width: 32px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── iOS "홈 화면에 추가" 안내 ─────────────────── */
#ios-install-guide {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(7, 15, 26, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 0 0;
  padding: 20px 24px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  animation: slide-from-bottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slide-from-bottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.ios-guide-title  { font-size: 16px; font-weight: 800; color: #e8edf5; margin-bottom: 16px; text-align: center; }
.ios-guide-steps  { display: flex; flex-direction: column; gap: 12px; }
.ios-guide-step   { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #8fa3c0; }
.ios-guide-step-icon { font-size: 22px; flex-shrink: 0; }

#ios-install-close-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #8fa3c0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
}

/* ── 스플래시 스크린 ───────────────────────────── */
#pwa-splash {
  position: fixed;
  inset: 0;
  background: #070f1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.5s ease 1.5s, visibility 0.5s ease 1.5s;
}

#pwa-splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#pwa-splash img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 0 60px rgba(79, 142, 247, 0.4);
  animation: splash-pulse 1.5s ease-in-out infinite;
}

@keyframes splash-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(79,142,247,0.3); }
  50%       { transform: scale(1.05); box-shadow: 0 0 80px rgba(79,142,247,0.5); }
}

.splash-title {
  margin-top: 22px;
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #4f8ef7, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.splash-sub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}