/* ==========================================================================
   JJ STYLE 자산관리 — LASSIE.AI RESPONSIVE LAYOUT (responsive.css)
   ========================================================================== */

@media (max-width: 1024px) {
  .hero-spotlight-card {
    padding: 28px;
  }

  .spotlight-amount {
    font-size: 32px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-grid,
  .analytics-sub-grid,
  .budget-action-grid,
  .bs-category-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pill-nav-links {
    display: none;
  }

  .pill-mobile-btn {
    display: flex;
  }

  .hide-mobile {
    display: none;
  }

  .hero-editorial-title {
    font-size: 3.6rem;
  }

  .hero-editorial-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.22em;
  }

  .hero-video-card.shrunk {
    width: 92vw;
    max-width: 92vw;
    height: 88vh;
    border-radius: 24px;
  }

  .floating-pill-nav {
    top: 12px;
    width: calc(100% - 24px);
  }

  .hero-sticky-wrapper {
    margin-bottom: 60dvh;
  }

  .main-scroll-container {
    gap: 60dvh;
    padding-bottom: 60dvh;
  }

  .section-heading {
    font-size: 20px;
  }

  .hero-spotlight-card {
    padding: 22px;
  }

  .spotlight-amount {
    font-size: 28px;
  }

  .spotlight-metrics-grid {
    gap: 12px;
  }

  .spotlight-sub-divider {
    display: none;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 20px;
  }
}

/* ==========================================================================
   MOBILE PASS 1 — 빈 공간 걷어내기 (2026.09)
   --------------------------------------------------------------------------
   데스크톱의 '시네마틱 스크롤'(섹션마다 화면 한 개분 여백 + 풀스크린 히어로)은
   375px 화면에서 문서를 22,448px = 27.6화면으로 부풀린다. 그 중 4,968px이
   순수 빈 공간이었다. 아래 규칙은 내용을 지우지 않고 공백과 밀도만 손본다.
   ※ 섹션을 한 번에 하나만 보여주는 탭 구조는 다음 단계에서 붙인다.
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. 섹션 간 여백: 화면 한 개분(100svh ≈ 812px) → 24px.
        데스크톱에서 섹션이 하나씩 '올라오는' 연출은 손바닥 화면에서는
        스크롤해도 한참 백지인 상태로만 체감된다. */
  .section-gap {
    margin-bottom: 24px;
  }
  section.section-gap:last-of-type {
    margin-bottom: 40px;
  }

  /* 2. 히어로: 풀스크린 관문 → 42svh 배너.
        사진과 타이포는 그대로 두되, 데이터를 보려고 한 화면을 통째로
        지나야 하는 상태를 없앤다. */
  .hero-cinema {
    min-height: 42svh;
  }
  @supports not (height: 100svh) {
    .hero-cinema { min-height: 42vh; }
  }

  /* 3. 히어로 축소 연출 해제.
        scale(0.9)는 좁은 폭에서 카드가 화면 밖으로 밀려 잘린 것처럼 보인다.
        모바일에서는 사진 틀을 고정해 둔다. */
  #hero.hero-shrunk .hero-photo-bed {
    transform: none;
    border-radius: 0;
  }
}

/* 4. 순자산 카드 안 '총자산 / 총부채 / 부채비율' 스트립.
      grid-cols-3 이 반응형이 아니어서 375px에서 한 칸 폭이 90px밖에 안 되고,
      '22억 3,081만원'이 세 줄로 쪼개진다. 금액은 줄바꿈되면 못 읽는 정보이므로
      모바일에서는 한 줄에 한 항목씩(라벨 왼쪽 · 값 오른쪽) 놓는다. */
@media (max-width: 639px) {
  #dash-networth-strip {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 18px;
    padding-top: 16px;
  }
  #dash-networth-strip > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 14px;
  }
  #dash-networth-strip > div > div:first-child {
    margin-bottom: 0;
    white-space: nowrap;
  }
  #dash-networth-strip > div > div:last-child {
    font-size: 15px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-align: right;
  }
}

/* 5. KPI 4장: 1열 → 2열.
      세로로 4장 쌓이면 그것만으로 두 화면을 넘는다. 2열로 접으려면
      값(24px)과 여백(20px)이 163px 타일에 안 들어가므로 함께 줄인다.
      Tailwind sm: 경계(640px)와 맞춰 그 아래에서만 적용한다. */
@media (max-width: 639px) {
  #hero-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  #hero-kpi-grid > div {
    padding: 12px 13px;
    border-radius: 16px;
  }
  /* 라벨 행 — 아이콘 원은 좁은 폭에서 라벨을 밀어내므로 접는다 */
  #hero-kpi-grid > div > div:first-child {
    margin-bottom: 4px;
  }
  #hero-kpi-grid > div > div:first-child > span:last-child {
    display: none;
  }
  #hero-kpi-grid > div > div:first-child > span:first-child {
    font-size: 10.5px;
    line-height: 1.35;
  }
  /* 값 — 금액은 절대 줄바꿈되면 안 된다 */
  #hero-kpi-grid .text-2xl {
    font-size: 16px;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }
  /* 보조 설명 — 지우지 않고 두 줄까지만 */
  #hero-kpi-grid > div > div:last-child {
    font-size: 9.5px;
    line-height: 1.4;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   MOBILE PASS 2 — 하단 탭 내비게이션 + 첫 진입 스플래시 (2026.09)
   --------------------------------------------------------------------------
   1단계로 빈 공간을 걷어내도 문서는 16,803px(20.7화면)이다. 남은 건 대부분
   실제 내용(7개 섹션 17,090px)이라 한 번에 한 섹션만 보여주는 것 말고는
   줄일 방법이 없다. 그래서 스크롤을 내비게이션에서 떼어내 하단 탭으로 옮긴다.
   히어로는 탭 어디에도 속하지 않고, 첫 진입에 한 번 화면을 채웠다가 물러난다.
   제어는 js/components/mobileTabs.js.
   ========================================================================== */
:root {
  --mtab-bg:   rgba(255, 255, 255, 0.93);
  --mtab-line: rgba(25, 31, 40, 0.07);
  --mtab-ink:  #B0B8C1;
  --mtab-on:   #3182F6;
}
:root[data-theme="dark"] {
  --mtab-bg:   rgba(17, 21, 28, 0.94);
  --mtab-line: rgba(255, 255, 255, 0.09);
  --mtab-ink:  #6E7885;
  --mtab-on:   #5A9DFF;
}

/* 데스크톱에서는 탭바가 아예 없다 */
#mobile-tabbar { display: none; }
#mtab-sub { display: none; }

@media (max-width: 768px) {
  /* ---- 탭바 ---- */
  #mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    align-items: start;
    padding: 8px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--mtab-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--mtab-line);
  }
  .mtab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0 2px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--mtab-ink);
    min-height: 44px;          /* 터치 타깃 */
    cursor: pointer;
  }
  .mtab-btn svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mtab-btn.on { color: var(--mtab-on); }

  /* 가운데 기록 버튼 — 살짝 올라와 있다 */
  .mtab-btn.mtab-add { gap: 0; }
  .mtab-add-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #3182F6;
    box-shadow: 0 6px 16px rgba(49, 130, 246, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
  }
  .mtab-add-fab svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.6; }

  /* 탭바에 가려지지 않도록 본문 아래 여유 */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* 탭 모드에서는 보이는 섹션이 늘 맨 위에 오므로, 떠 있는 헤더(top:20px + 약 56px)
     높이만큼 본문을 내려준다. 스플래시 중에는 히어로가 position:fixed 라서
     이 여백의 영향을 받지 않는다. */
  html.m-tabs body { padding-top: 88px; }

  /* ---- 탭 밖 섹션은 감춘다 ---- */
  html.m-tabs [data-mtab].mtab-off { display: none; }

  /* 탭 전환 시 내용이 툭 나타나지 않게 아주 짧게 올라온다 */
  html.m-tabs [data-mtab]:not(.mtab-off) {
    animation: mtab-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes mtab-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  /* 탭이 켜지면 섹션 아래 여백은 필요 없다 (탭마다 한 섹션이므로) */
  html.m-tabs [data-mtab] { margin-bottom: 0 !important; }

  /* ---- 더보기 안의 하위 전환 (자산분석 / 현금흐름 / 예산관리) ---- */
  #mtab-sub {
    display: none;
    gap: 4px;
    padding: 4px;
    margin: 0 16px 14px;
    background: rgba(25, 31, 40, 0.05);
    border-radius: 12px;
  }
  #mtab-sub.show { display: grid; grid-template-columns: repeat(3, 1fr); }
  #mtab-sub button {
    border: 0;
    border-radius: 9px;
    padding: 8px 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    color: #8B95A1;
    min-height: 36px;
    cursor: pointer;
  }
  #mtab-sub button.on {
    background: #fff;
    color: #191F28;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  }
  :root[data-theme="dark"] #mtab-sub button.on { background: #1D232E; color: #ECEEF1; }

  /* 탭이 켜지면 햄버거 메뉴는 역할이 없다 */
  html.m-tabs #btn-mobile-menu { display: none; }

  /* 토스트는 탭바 위로 — 기본값(bottom:24px)이면 탭바에 가린다 */
  html.m-tabs #toast-container {
    left: 16px;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* ---- 첫 진입 스플래시 ----
     히어로가 화면을 덮고, 그 아래에서 대시보드가 기다린다.
     m-splash 는 index.html <head> 인라인 스크립트가 첫 페인트 전에 붙인다. */
  html.m-splash, html.m-splash body { overflow: hidden; }
  html.m-splash #hero {
    position: fixed;
    inset: 0;
    height: 100svh;
    min-height: 0;
    margin: 0;
    z-index: 60;
  }
  @supports not (height: 100svh) {
    html.m-splash #hero { height: 100vh; }
  }
  html.m-splash #mobile-tabbar { opacity: 0; pointer-events: none; }
  html.m-splash #dashboard { opacity: 0; transform: translateY(18px); }

  /* 물러나는 중 — 히어로는 옅어지며 살짝 커지고, 순자산 카드가 올라온다 */
  html.m-splash-out #hero {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
  }
  html.m-splash-out #dashboard {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s,
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
  }
  html.m-splash-out #mobile-tabbar {
    opacity: 1;
    transition: opacity 0.45s ease 0.25s;
  }

  /* 끝 — 히어로는 레이아웃에서 완전히 빠진다.
     스플래시가 끝난 뒤든, 데스크톱에서 창을 좁혀 탭 모드로 들어온 경우든,
     탭 모드에서 히어로가 본문 위에 얹혀 있는 상태는 만들지 않는다. */
  html.m-splash-done #hero,
  html.m-tabs:not(.m-splash):not(.m-splash-out) #hero { display: none; }

  /* 모션 최소화 설정이면 연출 없이 곧바로 대시보드부터 */
  @media (prefers-reduced-motion: reduce) {
    html.m-splash #hero,
    html.m-splash-out #hero { transition: none; }
    html.m-splash #dashboard,
    html.m-splash-out #dashboard { opacity: 1; transform: none; transition: none; }
    html.m-tabs [data-mtab]:not(.mtab-off) { animation: none; }
  }
}

/* ==========================================================================
   MOBILE PASS 3 — 모달을 바텀시트로 (2026.09)
   --------------------------------------------------------------------------
   앱의 모든 창은 window.Modal(js/app.js) 하나를 거친다. Modal.open 19곳,
   Modal.confirm 14곳이 #modal-dialog / #confirm-backdrop 를 돌려 쓰므로,
   이 두 컨테이너만 아래에 붙이면 33곳이 한꺼번에 바뀐다.
   화면 가운데 창이 모바일에서 문제인 이유는 키보드다. Modal.open 은 열자마자
   첫 입력칸에 포커스를 주므로(app.js) 키보드가 즉시 올라와 창 아래쪽을 덮는다.
   시트를 화면 아래에 붙이고, 키보드 높이만큼 띄워 올린다(--kb-inset).
   선택자는 id 를 써서 Tailwind 유틸리티(items-center·rounded-3xl·max-w-lg)를
   특이도로 넘긴다. 드래그 핸들은 ::before 로 얹어 마크업을 건드리지 않는다.
   ========================================================================== */
@media (max-width: 768px) {
  /* ---- 공용 창 (Modal.open) ---- */
  #modal-backdrop {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    /* 키보드가 올라오면 그만큼 시트를 밀어 올린다 (js/app.js 가 값을 넣는다) */
    padding-bottom: var(--kb-inset, 0px);
    transition: padding-bottom 0.18s ease-out;
  }
  #modal-dialog {
    max-width: none;
    width: 100%;
    max-height: 88svh;
    border-radius: 20px 20px 0 0;
    padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
    /* 아래로 쓸어내리는 동안 JS 가 transform 을 직접 넣는다 */
    will-change: transform;
  }
  @supports not (height: 100svh) {
    #modal-dialog { max-height: 88vh; }
  }

  /* 손잡이 막대 — 쓸어내려 닫을 수 있다는 신호 */
  #modal-dialog::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: rgba(25, 31, 40, 0.18);
    margin: 2px auto 12px;
    flex-shrink: 0;
  }
  :root[data-theme="dark"] #modal-dialog::before { background: rgba(255, 255, 255, 0.22); }

  /* 아래에서 올라온다 */
  #modal-backdrop:not(.hidden) #modal-dialog {
    animation: m-sheet-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes m-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  /* 쓸어내리는 중에는 등장 애니메이션이 간섭하지 않도록 끈다 */
  #modal-dialog.m-sheet-dragging { animation: none !important; transition: none; }
  #modal-dialog.m-sheet-snapback { transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); }

  /* 창 안의 제목 줄 — 손잡이가 생겼으니 위 여백을 줄인다 */
  #modal-dialog > div:first-of-type { padding-bottom: 12px; margin-bottom: 16px; }

  /* ---- 확인창 (Modal.confirm) ---- */
  #confirm-backdrop {
    align-items: flex-end;
    padding: 0;
    padding-bottom: var(--kb-inset, 0px);
  }
  #confirm-backdrop > div {
    max-width: none;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
    animation: m-sheet-up 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  /* 버튼은 엄지가 닿는 자리에 가로로 꽉 — 확인이 위, 취소가 아래 */
  #confirm-backdrop > div > div:last-child {
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 22px;
  }
  #confirm-backdrop > div > div:last-child button {
    width: 100%;
    padding-top: 13px;
    padding-bottom: 13px;
    border-radius: 14px;
  }

  @media (prefers-reduced-motion: reduce) {
    #modal-backdrop:not(.hidden) #modal-dialog,
    #confirm-backdrop > div { animation: none; }
    #modal-backdrop { transition: none; }
  }
}

/* ==========================================================================
   MOBILE PASS 4 — 기록 전용 화면 (2026.09)
   --------------------------------------------------------------------------
   금액을 자체 숫자 키패드로 받는 전면 화면. OS 키보드가 올라오지 않으므로
   3단계의 키보드 문제 자체가 생기지 않는다. 제어는 js/components/quickEntry.js.
   내용 칸에 글자를 넣는 동안(.qe-typing)에만 키패드를 접어 키보드에 자리를 준다.
   ========================================================================== */
#quick-entry {
  position: fixed;
  inset: 0;
  z-index: 48;                /* 탭바(45) 위, 모달(50) 아래 */
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  padding-bottom: env(safe-area-inset-bottom);
}
#quick-entry[hidden] { display: none; }
html.qe-open, html.qe-open body { overflow: hidden; }

/* 기록 화면이 열리면 떠 있는 헤더와 탭바는 비킨다.
   헤더는 z-50 이라 그냥 두면 기록 화면 제목 위에 얹힌다. */
html.qe-open #toss-header,
html.qe-open #mobile-tabbar { display: none; }

.qe-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.qe-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.qe-close {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--bg-tertiary); color: var(--text-secondary);
  font-size: 20px; line-height: 1; cursor: pointer;
}

.qe-seg {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; padding: 3px; margin: 0 16px;
  background: rgba(25, 31, 40, 0.05); border-radius: 12px;
}
:root[data-theme="dark"] .qe-seg { background: rgba(255, 255, 255, 0.06); }
.qe-seg-btn {
  border: 0; border-radius: 9px; padding: 9px 0;
  font-family: inherit; font-size: 13px; font-weight: 700;
  background: transparent; color: #8B95A1; min-height: 40px; cursor: pointer;
}
.qe-seg-btn.on { background: #fff; color: #191F28; box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
:root[data-theme="dark"] .qe-seg-btn.on { background: #1D232E; color: #ECEEF1; }

.qe-amount { flex-shrink: 0; text-align: center; padding: 18px 16px 12px; }
.qe-ask { font-size: 12px; font-weight: 700; color: #8B95A1; }
.qe-value {
  font-size: 38px; font-weight: 900; letter-spacing: -0.045em;
  line-height: 1.15; margin-top: 3px;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.qe-value.empty { color: #C4CBD4; }
.qe-won { font-size: 21px; font-weight: 800; color: #B0B8C1; margin-left: 3px; }

.qe-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 16px 10px;
  -webkit-overflow-scrolling: touch;
}
.qe-label {
  font-size: 11px; font-weight: 700; color: #8B95A1;
  margin: 12px 0 6px;
}
.qe-label:first-child { margin-top: 0; }
.qe-opt { font-weight: 500; color: #B0B8C1; }

.qe-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.qe-chips::-webkit-scrollbar { display: none; }
.qe-chip {
  flex-shrink: 0; border-radius: 99px; padding: 8px 13px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--bg-primary); border: 1px solid rgba(25,31,40,0.09);
  color: #4E5968; white-space: nowrap; min-height: 36px; cursor: pointer;
}
.qe-chip.on { background: #191F28; border-color: #191F28; color: #fff; }
:root[data-theme="dark"] .qe-chip { border-color: rgba(255,255,255,0.14); color: #CBD3DD; }
:root[data-theme="dark"] .qe-chip.on { background: #ECEEF1; border-color: #ECEEF1; color: #14181F; }

.qe-input {
  width: 100%; border-radius: 13px; padding: 11px 13px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--text-primary); background: var(--bg-tertiary);
  border: 1px solid transparent;
}
.qe-input:focus { outline: none; border-color: #3182F6; background: var(--bg-primary); }
.qe-date-input { margin-top: 7px; font-size: 13px; }

.qe-pad {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(25,31,40,0.07);
  margin: 8px 16px 0; border-radius: 14px; overflow: hidden;
}
.qe-pad button {
  border: 0; background: var(--bg-primary); font-family: inherit;
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  padding: 13px 0; font-variant-numeric: tabular-nums; cursor: pointer;
  min-height: 52px;
}
.qe-pad button:active { background: var(--bg-tertiary); }
.qe-pad button.fn { color: #8B95A1; font-size: 18px; }

.qe-save {
  flex-shrink: 0; margin: 10px 16px 12px;
  border: 0; border-radius: 15px; padding: 15px 0;
  font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: -0.01em; color: #fff; cursor: pointer;
}

/* 내용 칸을 쓰는 동안 — 키패드를 접고 OS 키보드에 자리를 준다 */
#quick-entry.qe-typing .qe-pad { display: none; }
#quick-entry.qe-typing .qe-amount { padding-top: 8px; padding-bottom: 6px; }
#quick-entry.qe-typing .qe-value { font-size: 26px; }

/* 데스크톱에서는 쓰이지 않는 화면이지만, 창을 넓힌 채 열려 있으면
   가운데 카드 형태로 두어 전체 화면을 가리지 않게 한다 */
@media (min-width: 769px) {
  #quick-entry {
    inset: auto 50% auto auto;
    transform: translateX(50%);
    top: 6vh; bottom: 6vh;
    width: 420px; max-width: 92vw;
    border-radius: 22px;
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    overflow: hidden;
  }
}

/* Mobile Nav Drawer */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2500;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-nav-overlay.show {
  display: block;
  opacity: 1;
}

.mobile-nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background-color: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-overlay.show .mobile-nav-drawer {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.drawer-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.btn-close-drawer {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  transition: all var(--transition-fast);
}

.mobile-nav-link:hover, .mobile-nav-link.active {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.mobile-nav-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}