/* ============================================================
 * tab-bar.css — 매거진 톤 하단 탭바 공용 컴포넌트 (5/13)
 *
 * 사용처: index.html / premium 5종 / input 2종 — 사이트 와이드 통일
 * 톤: 매거진 ivory + gold (style.css 의 :root --gold / --ink-soft 재사용)
 *     style.css 가 없는 standalone 페이지에서도 동작하도록 fallback 정의
 * ============================================================ */

:root {
  --tb-ink:        #2C2420;
  --tb-ink-muted: #8C8078;
  --tb-gold:       #B8860B;
  --tb-line:       rgba(184, 134, 11, 0.18);
  --tb-bg:         rgba(255, 255, 255, 0.97);
}

.tab-bar-spacer {
  height: 60px;
  flex-shrink: 0;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* 5/26 사이트 wide 448 strict — 960 폐기, 본문 폭 일치 */
  max-width: 448px;
  height: 60px;
  background: var(--tb-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--tb-line);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--tb-ink-muted);
  font-size: 10px;
  padding: 6px 0;
  min-width: 48px;
  text-decoration: none;
  transition: color 0.18s ease;
}

.tab-bar__item:hover { color: var(--tb-ink); }
.tab-bar__item--active { color: var(--tb-gold); }

.tab-bar__icon {
  width: 22px;
  height: 22px;
}

.tab-bar__label {
  font-weight: 500;
}