/* 앱 셸 — Figma Header/PC·Header/Mobile·Footer (docs/DESIGN_GUIDE.md 6장)
 * 마크업은 public/js/components/ds.js, 그리는 곳은 public/js/app.js. app.css 뒤에 불러 기존 셸 규칙을 덮는다.
 * 좌측 사이드바는 index.html 에서 주석 처리했다(W4, 2026-10-13). 다시 쓰면 아래 사이드바 폭 0 설정을 지운다.
 */
@media (min-width: 1025px) { :root { --side-w: 0px; } }

/* 헤더 높이: PC 80 / Mobile 56 (채팅 화면 높이 계산도 이 값을 쓴다) */
:root { --topbar-h: var(--header-h-pc); }
@media (max-width: 1024px) { :root { --topbar-h: var(--header-h-mobile); } }

/* ── 헤더: 위쪽 cherry 빛(Figma Ellipse) + 반투명 배경, 스크롤해도 위에 고정 ── */
.topbar.shell-header {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h); padding: 0; border-bottom: 0;
  background: rgba(11, 10, 16, .88); backdrop-filter: blur(16px) saturate(1.2);
  /* Figma Header 아래 1px 선 (border/default). 높이 80 안에 그리려고 border 대신 안쪽 그림자 */
  box-shadow: inset 0 -1px 0 var(--color-border-default);
  transition: background-color var(--dur-fast) var(--ease-out);
}
/* 상단 빛 (Figma Ellipse 1: 1254×84, y -40, cherry→보라, blur 168.7) */
.topbar.shell-header::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -40px; width: min(1254px, 65%); height: 84px; transform: translateX(-50%);
  border-radius: 50%; background: linear-gradient(90deg, var(--cherry-500), #9a00bd); filter: blur(84px); pointer-events: none;
}
.shell-header .dp-header, .shell-header .dp-header-m-bar { background: transparent; }
.shell-header .dp-header-m { display: none; background: transparent; }
@media (max-width: 1439px) { .shell-header .dp-menu-panel { right: var(--space-40); } .shell-header .dp-header { padding: 0 var(--space-40); } .shell-header .dp-header-left { gap: var(--space-32); } .shell-header .dp-header-nav { gap: var(--space-24); } }
@media (max-width: 1279px) { .shell-header .dp-search { width: 300px; } }
@media (max-width: 1024px) {
  .shell-header .dp-header, .shell-header .dp-menu-panel { display: none; } /* 모바일 헤더에는 햄버거가 없다 */
  .shell-header .dp-header-m { display: block; }
  .topbar.shell-header { box-shadow: none; } /* Figma Header/Mobile: 아래 선 없음 */
}
.dp-menu-m-bar { display: none; }

/* ── 모바일 햄버거 메뉴 (Figma mobile · 메인 · 로그인/로그아웃 · 메뉴 열림 367:7536 / 367:7815)
 * 하단 '메뉴' 탭으로 열고, 헤더 자리부터 화면 전체를 덮는다(하단 탭바는 위에 그대로). 바: 로고 + 검색 · 닫기 (좌 16 · 우 12, 간격 4)
 * 본문: 위 16 · 좌우 16 · 아래 40(+탭바), 간격 24. 카드·세이프 모드·SERVICE·MY·SUPPORT 는 PC 패널과 같은 부품 */
@media (max-width: 1024px) {
  /* 헤더의 backdrop-filter 는 안쪽 fixed 패널의 기준을 헤더로 바꿔 버려 모바일에서는 끈다 (배경은 거의 불투명이라 차이 없음) */
  .topbar.shell-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 10, 16, .94); }
  .shell-header .dp-menu-panel {
    display: block; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-height: none;
    background: var(--color-bg-canvas); box-shadow: none; transform: translateY(8px); scrollbar-width: none;
  }
  .shell-header .dp-menu-panel::-webkit-scrollbar { display: none; }
  .shell-header .dp-menu-panel.is-open { transform: none; }
  /* 바는 패널(스크롤 영역) 맨 위에 붙어 있어 메뉴를 내려도 로고 · 검색 · 닫기가 계속 보인다 */
  .dp-menu-m-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: var(--header-h-mobile); padding: 0 var(--space-12) 0 var(--space-16); background: var(--color-bg-canvas); }
  .dp-menu-m-actions { display: flex; gap: var(--space-4); }
  .dp-menu-panel .dp-menu-body { padding: var(--space-16) var(--space-16) calc(var(--space-40) + 64px + env(safe-area-inset-bottom)); }
  .dp-menu-panel [data-dp-logout] { display: none; } /* 모바일 메뉴 MY 에는 로그아웃이 없다 (MY 화면에 있음) */
  html.dp-menu-open, html.dp-menu-open body { overflow: hidden; }
}

/* ── 모바일 하단 탭바 (Figma Bottom Tab Bar: 탭 64×56 좌우 16 · 아이콘 24 · 라벨 10 Medium, 활성은 icon/active) ── */
@media (max-width: 1024px) {
  /* app.css 는 760 이하에서만 탭바를 보여 줘 761~1024(모바일 헤더 구간)에 메뉴로 갈 길이 없었다 → 1024 이하 전부 */
  .bottombar.shell-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; justify-content: space-between; padding: 0 var(--space-16) env(safe-area-inset-bottom);
    background: var(--color-bg-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--color-border-default);
  }
  .shell-tabbar .dp-tab-item {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
    width: 64px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
    font: 500 10px/1.2 var(--font-sans); letter-spacing: var(--tracking-base); color: var(--color-text-secondary);
  }
  .shell-tabbar .dp-tab-item .dp-icon { color: currentColor; }
  .shell-tabbar .dp-tab-item.active, .shell-tabbar .dp-tab-item[aria-expanded="true"] { color: var(--color-icon-active); }
  body.in-chat .bottombar.shell-tabbar, body.bare-page .bottombar.shell-tabbar { display: none; }
  html.dp-menu-open .shell-tabbar .dp-tab-item.active { color: var(--color-text-secondary); } /* 메뉴가 열리면 메뉴 탭만 활성 */
}

/* 알림 배지: support.js 가 숫자를 넣지만 헤더에서는 7px 점으로만 보인다 (Badge/Dot) */
.shell-header .dp-icon-btn > .badge {
  position: absolute; left: 22px; top: 7px; width: 7px; height: 7px; overflow: hidden;
  border-radius: var(--radius-full); background: var(--color-status-notification); font-size: 0;
}
.shell-header .dp-icon-btn.is-48 > .badge { left: 28px; top: 13px; }
.shell-header .dp-icon-btn > .badge[hidden] { display: none; }

/* ── 푸터: 최대 1680 + 좌우 120 (모바일은 하단 탭바만큼 아래 여백) ── */
.footer.shell-footer { margin: 0; border-top: 1px solid var(--color-border-default); background: var(--color-bg-canvas); }
.shell-footer-inner { max-width: calc(var(--content-max) + var(--gutter-pc) * 2); margin: 0 auto; padding: 0 var(--gutter-pc); box-sizing: border-box; }
@media (max-width: 1439px) { .shell-footer-inner { padding: 0 var(--space-40); } }
@media (max-width: 1024px) { .shell-footer-inner { padding: 0 var(--gutter-mobile) 72px; } }
.shell-lang select {
  margin-top: var(--space-8); padding: var(--space-4) var(--space-8); border: 1px solid var(--color-border-default); border-radius: var(--radius-none);
  background: transparent; color: var(--color-text-secondary); font: 400 12px/1.4 var(--font-sans); letter-spacing: var(--tracking-base);
}