/* ═══════════════════════════════════════
   TABBAR THEME — 이 파일만 수정해서 탭바 디자인 커스터마이징
   (레이아웃 구조는 tabbar.css 담당)
═══════════════════════════════════════ */

/* 글라스 토큰: tabbar + screen-title 공유 */
:root {
  --tb-bg:          rgba(16, 16, 20, 0.65);
  --tb-blur:        32px;
  --tb-saturate:    200%;
  --tb-brightness:  1.08;
  /* #app max-width 430px 기준 right 오프셋 — 데스크톱 프리뷰에서도 정확히 정렬 */
  --app-right:      max(0px, calc((100vw - 430px) / 2));
}

.tabbar {
  /* ── 형태 ── */
  --tb-width:   52px;
  --tb-height:  228px;
  --tb-radius:  26px;

  /* ── 테두리 ── */
  --tb-border-top:  rgba(255, 255, 255, 0.16);
  --tb-border-side: rgba(255, 255, 255, 0.08);

  /* ── 그림자 — 왼쪽에서 떠오르는 느낌 ── */
  --tb-shadow:
    -4px 0   8px -1px rgba(0, 0, 0, 0.30),
    -8px 0  24px -4px rgba(0, 0, 0, 0.50),
   -16px 0  40px -8px rgba(0, 0, 0, 0.25);

  /* ── 글라스 왼쪽 반사광 ── */
  --tb-shine: rgba(255, 255, 255, 0.09);

  /* ── 탭 아이콘 활성 영역 ── */
  --tb-icon-radius: 10px;
}