/* ═══════════════════════════════════════════════════════════
   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 }` **삭제** — 사용자 지시/헌법이 금지한
     "잘린 요소를 안 보이게 숨기는" 방식이다. 오른쪽으로 밀려난 콘텐츠가 있어도 스크롤도 안 되고
     보이지도 않으므로, 결함이 있다는 사실 자체가 은폐된다.
     ★근거: 제거 전 320/390px 에서 루트 가로 오버플로를 **은폐 해제 후 실측**한 결과
       대상 12개 라우트 전부 0px 였다 — 즉 이 규칙은 실제로 아무것도 가리고 있지 않았고,
       앞으로 새 오버플로가 생기면 가로 스크롤로 **드러나서** E2E 검사에 잡힌다.
     max-width 는 유지한다(뷰포트보다 넓은 body 자체를 만들지 않는 것은 은폐가 아니라 예방이다). */
  html, body {
    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 유지. */
  /* ★[현 차수] `.app-shell-col`·`.app-scroll-wrap` 제외 — 이 규칙이 앱 셸 컬럼의 인라인
     (height:100%; overflow:hidden)에 적중해 셸을 콘텐츠 높이로 팽창시켰고, 그 결과
     **모바일 전 페이지에서 세로 스크롤이 사라져 첫 화면 아래가 접근 불가**였다(320x568 실측).
     App.jsx 는 인라인을 클래스로 옮겨 근본 원인을 없앴고, 이 :not() 은 재발 방지 안전망이다.
     (같은 이유로 스크롤존 자신도 제외한다 — 스크롤 컨테이너의 height 를 풀면 스크롤이 죽는다.) */
  div[style*="height: "][style*="overflow: hidden"]:not([style*="max-height"]):not([role="region"]):not(.app-shell-col):not(.app-scroll-wrap):not(.container),
  div[style*="height:"][style*="overflow:hidden"]:not([style*="max-height"]):not([role="region"]):not(.app-shell-col):not(.app-scroll-wrap):not(.container) {
    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;
}