/*
 * 머리 막대 — 아이콘의 **자리**와 **색**만 다룬다.
 *
 * 두 가지가 어긋나 있었다 (2026-09-29, 데스크톱 화면 제보).
 *
 * 1. 아이콘마다 수직 자리가 달랐다. 한 줄에 선 것들이 저마다 다른 상자였다 —
 *    종은 44px 단추, 테마는 32px 단추, 나머지는 부트스트랩 `.nav-link` 의
 *    안쪽 여백으로 높이가 정해졌다. `ul.navbar-nav` 는 늘이기(stretch)가
 *    기본이라 각자 제 상자 안에서 제 방식으로 자리를 잡았다.
 *
 *    높이를 억지로 같게 만들지 않는다. **모두 같은 축에 가운데로 세우면**
 *    높이가 달라도 눈에는 한 줄로 선다.
 *
 * 2. 테마 단추의 달 아이콘만 **검은색**이었다. `button.theme-toggle` 이
 *    `color: inherit` 인데, 그 위의 `li.nav-item` 에는 색이 걸려 있지 않아
 *    본문 글자색까지 올라간다. 막대의 링크 색은 `.navbar-dark .nav-link`
 *    처럼 **클래스**에 걸려 있어 단추에는 닿지 않는다. 종에서 이미 한 번
 *    겪은 병인데 그때는 종만 고쳤다 — 같은 병이 남아 있었다.
 *
 *    그래서 값을 토큰(`--navbar-ink`)으로 옮기고 **링크·종·테마 단추가 모두
 *    그 하나를 본다.** 다음에 단추가 하나 더 생겨도 여기에 이름만 보탠다.
 */

/* ── 색 ────────────────────────────────────────────────────────────────── */

.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-link-icon,
.navbar .navbar-nav .bell-btn,
.navbar .navbar-nav .theme-toggle {
    color: var(--navbar-ink);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .bell-btn:hover,
.navbar .navbar-nav .bell-btn:focus-visible,
.navbar .navbar-nav .theme-toggle:hover,
.navbar .navbar-nav .theme-toggle:focus-visible {
    color: var(--navbar-ink-strong);
}

/* 아이콘은 글자와 같은 색을 쓴다 — 따로 칠하지 않는다 */
.navbar .nav-link i,
.navbar .bell-btn i,
.navbar .theme-toggle i {
    color: inherit;
}

/* 좁은 화면의 손잡이 둘 가운데 **종만** 강조색을 쓴다.
 *
 * 둘 다 먹빛(`--ink`)이라 알림이 있는지가 한눈에 들어오지 않았다. 화면 안의
 * 다른 테마색(메시지 배지·집중·이어서 읽기)과 같은 색을 주어, 색이 곧
 * '알림이 여기 있다' 를 가리키게 한다. 메뉴(`≡`)는 먹빛 그대로 둔다 —
 * 둘 다 물들이면 색이 아무것도 가리키지 못한다.
 */
.nav-handle-bell { color: var(--accent-solid); }
.nav-handle-bell:hover,
.nav-handle-bell:focus-visible { color: var(--accent-solid); }

/* ── 자리 ──────────────────────────────────────────────────────────────── */

/* 좁은 화면에서는 막대가 세로로 접힌다. 거기에 가운데 맞춤을 걸면 글자가
   가운데로 모여 왼쪽 줄맞춤이 무너지므로 **넓은 화면에서만** 건다. */
@media (min-width: 992px) {
    .navbar .navbar-nav {
        align-items: center;
    }

    .navbar .nav-link-icon,
    .navbar .bell,
    .navbar .theme-picker {
        display: flex;
        align-items: center;
    }

    /* 아이콘과 글자도 서로 가운데로 — `me-1` 만으로는 세로가 맞지 않는다 */
    .navbar .nav-link-icon i,
    .navbar .bell-btn i,
    .navbar .theme-toggle i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}