/* ════════════════════════════════════════════════════
   Legacy dark-theme variable aliases
   JS template strings (ai_review, ai_competitor, ai_listing, history)
   still reference these — map to new light design system values
   ════════════════════════════════════════════════════ */
:root {
  --bg:     var(--gray-50);     /* page background */
  --bg2:    var(--white);       /* card surface */
  --bg3:    var(--gray-100);    /* nested surface / progress track */
  --border: var(--gray-200);    /* default border */
  --muted:  var(--gray-500);    /* secondary text */
  --text:   var(--gray-900);    /* primary text */
  --teal:   var(--sp-primary);  /* brand accent #00B894 */
  --amber:  var(--warning);     /* warning #FFB400 */
  --blue:   var(--info);        /* info #4A90F8 */
  --red:    var(--danger);      /* danger #F04452 */
}

/* ════════════════════════════════════════════════════
   Qibaro shell overrides
   - 인라인 <style> (구 다크 테마 + 구 SPA 라우터)의 layout 정의를 강제 덮어쓴다
   - 디자인 시스템 CSS link 다음에 로드해서 cascade 후위 확보
   ════════════════════════════════════════════════════ */

/* === body shell — flex layout + 라이트 테마 === */
html, body.qibaro-app {
  margin: 0 !important;
  padding: 0 !important;
}
body.qibaro-app {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;        /* page-login.css의 글로벌 body align-items:center 차단 */
  justify-content: flex-start !important; /* 동일 — center 정렬 차단 */
  min-height: 100vh !important;
  background: #f9fafb !important;
  color: #191F28 !important;
  font-family: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif !important;
  letter-spacing: normal !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 0 !important;                  /* 동일 — padding:24px 차단 */
}

/* === sidebar — hidden by default to prevent FOUC; app-mode reveals it === */
body.qibaro-app .sidebar {
  flex-shrink: 0 !important;
  flex-direction: column !important;
  display: none !important;
}
body.qibaro-app.app-mode .sidebar {
  display: flex !important;
}

/* === main-content — flex:1로 우측 전체 차지 === */
body.qibaro-app .main-content {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #f9fafb !important;
}

/* === topbar — hidden by default to prevent FOUC; app-mode reveals it === */
body.qibaro-app .topbar {
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 32px !important;
  height: 64px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e8eb !important;
  display: none !important;
}
body.qibaro-app.app-mode .topbar {
  display: flex !important;
}

/* === .page 컨테이너 — 인라인 <style>의 max-width:1100px / padding:80px / margin:auto 모두 무력화 === */
body.qibaro-app .page {
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
}
body.qibaro-app .page-content {
  padding: 32px !important;
  flex: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* === 인라인 <style>이 정의한 .nav-links / .nav-row / .hero / .container를 #page-* 안에서만 시안 그대로 살리기 === */
body.qibaro-app .page .container {
  max-width: 1200px;
  margin: 0 auto;
}
body.qibaro-app .page:not(#page-home) .hero {
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* === sidebar overlay (모바일) === */
body.qibaro-app .sidebar-overlay {
  display: none;
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 99;
}
body.qibaro-app.sidebar-open .sidebar-overlay { display: block; }

/* ════════════════════════════════════════════════════
   Dual mode: landing(랜딩 풀페이지) vs app(사이드바+토픽바)
   - body.landing-mode  : #page-home 같은 풀페이지 마케팅
   - body.app-mode      : 대시보드 페이지 (기본)
   ════════════════════════════════════════════════════ */

/* === 랜딩 모드 — 사이드바·토픽바 숨김, 시안 자체 nav 표시 === */
body.qibaro-app.landing-mode {
  display: block !important;          /* flex 해제, 풀폭 block layout */
  background: #fff !important;
}
body.qibaro-app.landing-mode .sidebar,
body.qibaro-app.landing-mode .sidebar-overlay,
body.qibaro-app.landing-mode .topbar {
  display: none !important;
}
body.qibaro-app.landing-mode .main-content {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}
body.qibaro-app.landing-mode .page-content {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* 시안 원래 정의 유지 — .mobile-menu는 .open 시에만 표시, nav는 데스크탑에서 자연 표시 */

/* === 앱 모드 (기본) — 사이드바·토픽바 표시, 시안 자체 nav 숨김 === */
body.qibaro-app.app-mode #page-home > nav.nav,
body.qibaro-app.app-mode #page-home .mobile-menu,
body.qibaro-app.app-mode #page-pricing > nav.nav,
body.qibaro-app.app-mode #page-pricing .mobile-menu {
  display: none !important;
}

/* === 모바일 — sidebar 토글 === */
@media (max-width: 768px) {
  body.qibaro-app .sidebar {
    position: fixed !important;
    left: 0; top: 0;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  body.qibaro-app.sidebar-open .sidebar {
    transform: translateX(0);
  }
  body.qibaro-app .sidebar-toggle { display: inline-flex !important; }
  body.qibaro-app .page-content { padding: 16px !important; }
}
@media (min-width: 769px) {
  body.qibaro-app .sidebar-toggle { display: none !important; }
}