/* ─────────────────────────────────────────────
   NAVIGATION — SLUR Design System × slur-guidelines
   탭(tab_menu), 사이드바(nav_side), 브레드크럼(breadcrumb).
   활성은 data-state="active", 필 탭은 m_pill.
   탭은 i_list(role=tablist) > i_tab(role=tab) + i_panel(role=tabpanel)이 한 세트 —
   방향키 이동(roving tabindex)은 slur.js(tabs). 현재 페이지 링크는
   aria-current="page"(표준 속성)도 정본으로 인정한다.
   여백은 rem 토큰(텍스트와 함께 확대).
   ───────────────────────────────────────────── */

/* 탭 — 밑줄(기본) */
.tab_menu .i_list { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); list-style: none; }
.tab_menu .i_tab { margin-bottom: -1px; padding: var(--space-8) var(--space-12); border: none; border-bottom: 2px solid transparent; background: none; color: var(--color-text-secondary); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.tab_menu .i_tab:hover { color: var(--color-text-primary); }
.tab_menu .i_tab[data-state="active"] { border-bottom-color: var(--color-brand); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.tab_menu .i_panel { display: none; padding-top: var(--space-16); }
.tab_menu .i_panel[data-state="active"] { display: block; }

/* 탭 — 필 변형 */
.tab_menu.m_pill .i_list { display: inline-flex; padding: var(--space-4); border-bottom: none; border-radius: var(--radius-full); background: var(--color-surface-hover); }
.tab_menu.m_pill .i_tab { margin-bottom: 0; padding: var(--space-4) var(--space-16); border-bottom: none; border-radius: var(--radius-full); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.tab_menu.m_pill .i_tab[data-state="active"] { background: var(--color-surface-card); font-weight: var(--weight-medium); color: var(--color-text-primary); box-shadow: var(--shadow-xs); }

/* 사이드바 */
.nav_side { display: flex; padding: var(--space-8); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-12); background: var(--color-surface-card); flex-direction: column; gap: 2px; box-shadow: var(--shadow-sm); }
.nav_side .i_group { padding: var(--space-8) var(--space-12) var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); text-transform: uppercase; }
.nav_side .i_item { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.nav_side .i_item:hover { background: var(--color-surface-hover); }
.nav_side .i_item[data-state="active"], .nav_side .i_item[aria-current="page"] { background: var(--color-brand-soft); font-weight: var(--weight-semibold); color: var(--color-text-brand); }
.nav_side .i_item .i_label { flex: 1; }
.nav_side .i_divider { height: 1px; margin: var(--space-8) var(--space-4); background: var(--color-border-subtle); }

/* 브레드크럼 */
.breadcrumb { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-sm); color: var(--color-text-secondary); }
.breadcrumb .i_link { color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.breadcrumb .i_link:hover { color: var(--color-text-primary); }
.breadcrumb .i_sep { color: var(--color-text-muted); }
.breadcrumb .i_current { font-weight: var(--weight-medium); color: var(--color-text-primary); }