/* 시민 앱 공용 하단 탭바 — /citizen 과 /citizen/me 가 함께 쓴다. */
.cz-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface-1) 94%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--border); padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
.cz-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; text-decoration: none; color: var(--text-secondary); font-size: 12px; font-weight: 700; border-radius: 12px; position: relative; }
.cz-tabs a .ic { font-size: 22px; line-height: 1; }
.cz-tabs a[aria-current="page"] { color: var(--accent); background: var(--lcp-accent-soft); }
.cz-tabs a .dot { position: absolute; top: 6px; right: calc(50% - 20px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--status-critical); color: #fff; font-size: 10px; display: grid; place-items: center; padding: 0 4px; }
html.elder .cz-tabs a { font-size: 15px; min-height: 66px; }
html.elder .cz-tabs a .ic { font-size: 28px; }
body.cz-has-tabs { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .cz-tabs { left: 50%; right: auto; transform: translateX(-50%); width: 560px; bottom: 14px; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-md-hover); } }