/* ============================================================
   돈돌이AI · 공유 컴포넌트 CSS (dondori_app.css)
   ------------------------------------------------------------
   여러 페이지 (대시보드 v3 / 마이페이지 / 과거분석 / 매뉴얼 / 홈)
   공통으로 쓰는 하단 nav + 페이지 본문 패딩 + 모바일 보정.
   각 페이지의 기존 CSS는 그대로 두고 이 파일을 추가로 link.
   ============================================================ */

/* 하단 nav가 콘텐츠를 가리지 않도록 본문 하단 패딩 확보 */
body { padding-bottom: 88px !important; }

/* ============================================================
   BOTTOM NAV (모든 페이지 공통)
   ============================================================ */
.dondori-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  background: rgba(11, 16, 32, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(212, 165, 116, 0.20);
  display: flex;
  padding: 8px 0 max(env(safe-area-inset-bottom), 12px);
  z-index: 9000;        /* 페이지 sticky 헤더(보통 100)보다 위 */
}

body[data-theme="light"] .dondori-bottom-nav {
  background: rgba(255, 255, 255, 0.94);
  border-top-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
}

.dondori-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
.dondori-nav-item:hover { opacity: 0.85; }
.dondori-nav-item svg { width: 22px; height: 22px; color: rgba(255, 255, 255, 0.55); transition: color 0.15s ease; }
.dondori-nav-item.active svg { color: #d4a574; }
body[data-theme="light"] .dondori-nav-item svg { color: rgba(0, 0, 0, 0.5); }
body[data-theme="light"] .dondori-nav-item.active svg { color: #b8860b; }

.dondori-nav-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.dondori-nav-item.active .dondori-nav-label { color: #d4a574; font-weight: 600; }
body[data-theme="light"] .dondori-nav-label { color: rgba(0, 0, 0, 0.5); }
body[data-theme="light"] .dondori-nav-item.active .dondori-nav-label { color: #b8860b; }

/* 화면이 좁을 때(좁은 폰) 라벨 줄바꿈 방지 */
.dondori-nav-label { white-space: nowrap; }

/* ============================================================
   기존 페이지 상단 nav 모바일 보정
   (templates/index.html, hist_dashboard.html에서 글자 세로 깨짐 방지)
   ============================================================ */

/* 페이지의 nav가 가로 공간 부족하면 줄바꿈 + 글자 nowrap */
@media (max-width: 640px) {
  /* templates/index.html의 .nav (sticky header) */
  body > nav.nav,
  body > header > nav {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 12px 16px !important;
    gap: 8px;
  }
  body > nav.nav .nav-links,
  body > header > nav .nav-links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 16px !important;
    justify-content: center;
    padding-top: 4px;
  }
  body > nav.nav .nav-logo,
  body > header > nav .nav-logo,
  body > header > nav .logo {
    white-space: nowrap;
    font-size: 16px !important;
  }
  body > nav.nav a,
  body > header > nav a {
    white-space: nowrap;
  }

  /* hist_dashboard의 .header */
  body > .header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  body > .header .logo {
    white-space: nowrap;
    font-size: 1.1rem !important;
  }
  body > .header .logo span {
    display: block;
    font-size: 0.7rem !important;
    margin-left: 0 !important;
  }
  body > .header > div[style*="display:flex"] {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px !important;
    margin-right: 0 !important;
  }
  body > .header .market-tabs {
    order: 2;
    flex-shrink: 0;
  }
}

/* ============================================================
   언어 토글 버튼 (i18n.js 자동 주입)이 bottom-nav와 겹치지 않도록
   우상단 안전 영역
   ============================================================ */
#__dondoriLangToggle {
  top: max(12px, env(safe-area-inset-top)) !important;
}

/* 대시보드 등 사이드바 레이아웃(768+) — 하단 nav 숨김 (JS 주입 nav 포함) */
@media (min-width: 768px) {
  body[data-no-bottom-nav] .dondori-bottom-nav {
    display: none !important;
  }
}

/* 모바일 공통 — 본문 최소 가독성 */
@media (max-width: 767px) {
  body {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }
  .dondori-bottom-nav {
    max-width: 100%;
  }
}