/* ============================================================
   G-PASS — PC(데스크톱) 반응형 레이아웃
   · 웹 우선 개발. 기본(모바일/패드, < 1024px) 디자인은 그대로 유지.
   · 데스크톱(>= 1024px)에서만 적용 — 하단 네비 → 좌측 사이드바,
     앱 프레임 확대. 페이지 개별 수정 없이 공통 셸(.app/.bottom-nav)에 작용.
   · 페이지마다 inline <style> 가 있으므로 충돌 방지 위해 !important 사용.
   ============================================================ */

@media (min-width: 1024px) {
  body {
    background: #E9EEF5 !important;
    padding: 0 !important;
  }

  /* ---------- 앱을 웹 전체 폭으로 확장(고정 프레임 제거) ---------- */
  .app {
    max-width: none !important;
    width: auto !important;          /* 블록 채움 → 뷰포트 전체 폭 */
    margin: 0 auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 하단 네비가 있는 페이지 — 좌측 사이드바(248px) 옆의 전체 폭을 앱이 채움 */
  body:has(.bottom-nav) .app {
    margin-left: 248px !important;
    margin-right: 0 !important;
    width: auto !important;
  }

  /* ---------- 콘텐츠가 웹 전체 폭을 채우도록 ----------
     좁은 폰 컬럼(고정 480/760) 대신 전체 폭 사용 + 유동 좌우 여백으로 breathing room.
     페이지별 래퍼 클래스가 달라 공통 후보를 모두 지정(!important 로 인라인 style override). */
  .app > .content,
  .app > .body,
  .app > .slides-wrap,
  .app > .notif-scroll,
  .all-content {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(20px, 3.5vw, 64px) !important;
    padding-right: clamp(20px, 3.5vw, 64px) !important;
    box-sizing: border-box !important;
  }

  /* ---------- 하단 네비 → 좌측 사이드바 ---------- */
  .bottom-nav {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 248px !important;
    max-width: 248px !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 26px 16px calc(26px + var(--safe-bottom, 0px)) !important;
    border-top: none !important;
    border-right: 1px solid rgba(16, 30, 54, 0.10) !important;
    box-shadow: none !important;
    /* index.html 의 grid 레이아웃 무력화 */
    grid-template-columns: none !important;
  }
  .bottom-nav .nav-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    transition: background 0.15s !important;
  }
  .bottom-nav .nav-btn:hover { background: rgba(10, 37, 64, 0.05) !important; }
  .bottom-nav .nav-btn-icon {
    font-size: 20px !important;
    width: 26px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
  }
  .bottom-nav .nav-btn-label { font-size: 14px !important; font-weight: 700 !important; }
  /* 가운데 강조 버튼(PASS)도 일반 행으로 정렬 */
  .bottom-nav .nav-btn.center { margin-top: 0 !important; padding-top: 12px !important; }
  .bottom-nav .nav-btn.center .nav-circle {
    width: 40px !important; height: 40px !important;
    margin: 0 !important; margin-top: 0 !important;
    font-size: 20px !important;
    box-shadow: none !important;
  }
  .bottom-nav .nav-btn.active {
    background: #D0E1FB !important;
    color: #0A2540 !important;
  }
  .bottom-nav .nav-btn.active .nav-btn-icon { background: none !important; }

  /* 데스크톱에선 옛 하단 네비 자리(여백) 축소 */
  .content,
  .slides-wrap,
  .all-body { padding-bottom: 40px !important; }
}

/* ---------- all.html — PC 이중 사이드바 정리 ----------
   좌측 글로벌 네비(사이드바)가 이미 있으므로, 내부 카테고리(세로 112px 레일)는
   데스크톱에서 상단 가로 바로 전환해 사이드바를 하나만 유지한다. */
@media (min-width: 1024px) {
  .all-body { grid-template-columns: 1fr !important; }
  .all-sidebar {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(16, 30, 54, 0.10) !important;
  }
  .all-cat {
    border-left: none !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    white-space: nowrap !important;
    width: auto !important;
  }
  .all-cat.active { border-left-color: transparent !important; }
}

/* 앱은 이미 전체 폭이므로 초광폭 전용 고정폭 규칙은 두지 않음.
   콘텐츠 좌우 여백은 위 clamp() 로 화면 폭에 따라 자동 확장된다. */