/* =====================================================================
 * nav.css — 천기연 플랫폼 공통 탭 (홈 · 연화 사주 · 모임 관계 · 오늘의 하늘)
 *   모든 페이지 헤더 안에 공통으로 들어가며, 테마별 변수만 다르게 씁니다.
 *   라이트(한지) 기본값 / .cnav.dark = 우주 페이지용
 *   .cnav-home = 홈 탭(아이콘만, 좁게) — 나머지 3개가 폭을 나눠 가짐
 * ===================================================================== */
.cnav {
  --cnav-bg: #fffefb;
  --cnav-line: #e9e2d4;
  --cnav-dim: #6f675a;
  --cnav-active: #a83a26;
  --cnav-active-txt: #ffffff;
  display: flex; gap: 6px;
  padding: 0 14px 10px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cnav::-webkit-scrollbar { display: none; }
.cnav-item {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 7px; border-radius: 100px;
  font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: -.02em;
  color: var(--cnav-dim); background: var(--cnav-bg);
  border: 1px solid var(--cnav-line);
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.cnav-item span { font-size: 14px; line-height: 1; }
.cnav-item i { font-style: normal; }
.cnav-item:hover { transform: translateY(-1px); }
.cnav-item.active {
  color: var(--cnav-active-txt); background: var(--cnav-active); border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
/* 홈 탭: 아이콘만 보이는 좁은 칩 (텍스트는 스크린리더용) */
.cnav-home { flex: 0 0 auto; padding: 9px 11px; }
.cnav-home i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 우주(다크) 테마 */
.cnav.dark {
  --cnav-bg: #14141f;
  --cnav-line: rgba(210, 200, 255, .14);
  --cnav-dim: #a5a1bd;
  --cnav-active: #e8b76a;
  --cnav-active-txt: #221600;
}
@media (max-width: 380px) {
  .cnav { gap: 5px; padding: 0 12px 10px; }
  .cnav-item { font-size: 11.5px; padding: 8px 6px; gap: 4px; }
  .cnav-item:not(.cnav-home) span { display: none; }   /* 아주 좁은 화면: 아이콘 숨기고 글자만 */
}