/* ═══════════════════════════════════════════════════════════════
   AI Link Topbar v3 — topbar.css
   역할 기반 탑바 + 슬림 GNB
   기존 topbar.css 교체용
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1층 통합 바: 40+56 → 0+56 (총 56px)
   !important는 ailink-ds.css가 topbar.css보다 뒤에 로드되는 페이지에서도
   --al2-topbar-h 값이 확실히 0으로 유지되도록 필요 (GNB fixed top 기준값) */
:root {
  --al2-topbar-h: 0px !important;
  --al2-gnb-h: 56px !important;
  --al2-bar-h: 56px;
}

/* 기존 2층의 상단 탑바는 완전히 숨김 — 로그인/비로그인 메뉴를 모두 GNB로 이관
   일부 페이지가 자체 .al2-topbar를 렌더하더라도 표시되지 않도록 보장 */
.al2-topbar,
#al2-topbar-mount { display: none !important; }


/* ─── Topbar Services (역할별 메뉴) ─── */
.al2-topbar-svc {
  padding: 0 14px;
  height: var(--al2-topbar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--al2-g400);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.al2-topbar-svc:hover { color: var(--al2-g200); }
.al2-topbar-svc.on { color: #fff; border-bottom-color: var(--al2-brand); }

.al2-topbar-svc .al2-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--al2-green);
  animation: al2-pulse-dot 2s infinite;
}

.al2-topbar-svc .al2-cnt {
  font-family: var(--al2-font-mono);
  font-size: .56rem;
  background: rgba(255,255,255,.12);
  padding: 1px 5px;
  border-radius: var(--al2-radius-full);
  margin-left: 2px;
}


/* ─── Topbar Dropdown (조달정보, 네트워크) ─── */
.al2-topbar-dropdown {
  position: relative;
  display: inline-flex;
}

.al2-topbar-dd-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--al2-g150, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px 0;
  z-index: 9500;                        /* 페이지 sticky bar 위로 */
  margin-top: 2px;
}

.al2-topbar-dropdown.open .al2-topbar-dd-menu { display: block; }

.al2-topbar-dd-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: .72rem;
  color: var(--al2-g700, #374151);
  text-decoration: none;
  font-weight: 500;
  transition: all .12s;
}

.al2-topbar-dd-menu a:hover {
  background: var(--al2-g50, #f9fafb);
  color: var(--al2-brand, #6c3ae0);
}

.al2-topbar-dd-menu a i {
  width: 14px;
  font-size: .68rem;
  color: var(--al2-g400);
  text-align: center;
}

.al2-topbar-dd-menu a:hover i {
  color: var(--al2-brand);
}

.al2-topbar-dd-divider {
  height: 1px;
  background: var(--al2-g100);
  margin: 3px 0;
}

/* Dropdown label (카테고리 그룹 헤더) */
.al2-topbar-dd-label {
  padding: 5px 14px 2px;
  font-size: .6rem;
  font-weight: 700;
  color: var(--al2-g400);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* 2026-05-01 — 네트워크 dropdown unread dot (B15/B17/B18/B19) */
.al2-tb-net-dot {
  display: inline-flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff;
  font-size: .58rem; font-weight: 800;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  margin-left: 2px;
  font-family: var(--al2-font-mono, 'JetBrains Mono', monospace);
  animation: al2-tb-net-pulse 2s ease-in-out infinite;
}
@keyframes al2-tb-net-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}


/* ─── Topbar Right ─── */
.al2-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.al2-topbar-right a,
.al2-topbar-right button {
  font-size: .68rem;
  color: var(--al2-g400);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.al2-topbar-right a:hover,
.al2-topbar-right button:hover { color: #fff; }


/* ─── 접근성: 키보드 포커스 링 (:focus-visible 만 — 마우스 클릭 시 잔상 없음) ─── */
.al2-topbar-svc:focus-visible,
.al2-topbar-right a:focus-visible,
.al2-topbar-right button:focus-visible,
.al2-gnb-logo:focus-visible,
.al2-gnb-btn:focus-visible,
.al2-gnb-avatar:focus-visible,
.al2-avatar-item:focus-visible,
.al2-topbar-dd-menu a:focus-visible,
.al2-noti-tab:focus-visible,
.al2-noti-item:focus-visible,
.al2-cmdk-item:focus-visible {
  outline: 2px solid var(--al2-brand, #6c3ae0);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ─── GNB Slim (56px → 48px) ─── */
.al2-gnb {
  height: var(--al2-gnb-h);
  padding: 0 16px;
}

/* GNB 내부 네비게이션 — 1층 통합으로 이동한 역할별 메뉴
   .al2-gnb-left 안에서 로고 바로 옆에 배치 */
.al2-gnb-nav {
  display: inline-flex;
  align-items: center;
  gap: 0;                /* 그룹 내 spacing은 item padding으로만 처리 (asymmetry 효과 ↑) */
  height: var(--al2-gnb-h);
  margin-left: 8px;
}

/* 2026-05-01 — 그룹 구분선 (Divider + Spacing Asymmetry, 글로벌 SaaS 표준)
   item 간 padding 12px → 그룹 간 break(1px divider + 8px×2 margin) = ~17px 추가
   결과: 그룹 내 24px ↔ 그룹 간 ~41px + 시각 line */
.al2-topbar-group-break {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--al2-g200, #e5e7eb);
  margin: 0 8px;
  flex-shrink: 0;
  vertical-align: middle;
}
[data-topbar-theme="dark"] .al2-topbar-group-break { background: #334155; }

/* 밝은 배경(GNB)에서의 네비 아이템 색상 재정의 — 기존 dark bar 전제 덮어쓰기 */
.al2-gnb-nav .al2-topbar-svc {
  height: var(--al2-gnb-h);
  padding: 0 12px;
  color: var(--al2-g600, #4b5563);
  border-bottom: 2px solid transparent;
  font-size: .78rem;
}
.al2-gnb-nav .al2-topbar-svc:hover {
  color: var(--al2-g900, #111827);
  background: rgba(108, 58, 224, .04);
}
.al2-gnb-nav .al2-topbar-svc.on {
  color: var(--al2-brand, #6c3ae0);
  border-bottom-color: var(--al2-brand, #6c3ae0);
}
.al2-gnb-nav .al2-topbar-svc .al2-cnt {
  background: var(--al2-g100, #f3f4f6);
  color: var(--al2-g600, #4b5563);
}

/* Dropdown 포지셔닝: GNB 안에 있으므로 top을 바 높이에 맞춤 */
.al2-gnb-nav .al2-topbar-dropdown { height: var(--al2-gnb-h); }
.al2-gnb-nav .al2-topbar-dd-menu { top: calc(100% - 2px); }

/* GNB 검색바 Cmd+K 힌트 */
.al2-gnb-search-hint {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.al2-gnb-search-hint kbd {
  font-family: var(--al2-font-mono);
  font-size: .6rem;
  font-weight: 600;
  color: var(--al2-g400);
  background: var(--al2-g100);
  border: 1px solid var(--al2-g200);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.3;
}

.al2-gnb-search input:focus ~ .al2-gnb-search-hint {
  display: none;
}

/* GNB 사이즈 미세 조정 */
.al2-gnb-logo-icon {
  width: 28px;
  height: 28px;
  font-size: .72rem;
}

.al2-gnb-logo-text {
  font-size: 1rem;
}

.al2-gnb-avatar {
  width: 28px;
  height: 28px;
  font-size: .65rem;
}

.al2-gnb-search input {
  padding: 7px 12px 7px 32px;
  font-size: .8rem;
}

.al2-gnb-search i {
  left: 10px;
  font-size: .78rem;
}


/* ─── Command Palette (Cmd+K) ─── */
.al2-cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.4);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  animation: al2-cmdk-fadein .12s ease;
}

@keyframes al2-cmdk-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.al2-cmdk-dialog {
  width: 520px;
  max-width: 90vw;
  background: var(--al2-white);
  border-radius: var(--al2-radius-lg);
  box-shadow: 0 16px 48px rgba(15,23,42,.18);
  overflow: hidden;
  animation: al2-cmdk-slidein .15s ease;
}

@keyframes al2-cmdk-slidein {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.al2-cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--al2-g100);
}

.al2-cmdk-input-wrap i {
  color: var(--al2-g400);
  font-size: .9rem;
  flex-shrink: 0;
}

.al2-cmdk-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-size: .88rem;
  font-family: var(--al2-font-sans);
  color: var(--al2-g800);
  background: transparent;
}

.al2-cmdk-input-wrap input::placeholder {
  color: var(--al2-g400);
}

.al2-cmdk-input-wrap kbd {
  font-family: var(--al2-font-mono);
  font-size: .6rem;
  color: var(--al2-g400);
  background: var(--al2-g100);
  border: 1px solid var(--al2-g200);
  border-radius: 3px;
  padding: 2px 5px;
}

.al2-cmdk-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px 0;
}

.al2-cmdk-group-label {
  padding: 8px 16px 4px;
  font-size: .62rem;
  font-weight: 700;
  color: var(--al2-g400);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.al2-cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .08s;
}

.al2-cmdk-item:hover,
.al2-cmdk-item.active {
  background: var(--al2-g50);
}

.al2-cmdk-item i {
  width: 16px;
  font-size: .78rem;
  color: var(--al2-g400);
  text-align: center;
  flex-shrink: 0;
}

.al2-cmdk-item:hover i { color: var(--al2-brand); }

.al2-cmdk-item-text {
  flex: 1;
  font-size: .8rem;
  font-weight: 500;
  color: var(--al2-g700);
}

.al2-cmdk-item-hint {
  font-size: .65rem;
  color: var(--al2-g400);
}

.al2-cmdk-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--al2-g100);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .62rem;
  color: var(--al2-g400);
}

.al2-cmdk-footer kbd {
  font-family: var(--al2-font-mono);
  font-size: .56rem;
  background: var(--al2-g100);
  border: 1px solid var(--al2-g200);
  border-radius: 3px;
  padding: 1px 4px;
}


/* ─── Ask AI 버튼 (GNB) ─── */
.al2-gnb-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 32px;
  background: linear-gradient(135deg, #6c3ae0 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(108, 58, 224, .18);
}
.al2-gnb-ai:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(108, 58, 224, .28);
}
.al2-gnb-ai:active { transform: translateY(0); }
.al2-gnb-ai i { font-size: .78rem; }
.al2-gnb-ai-label { letter-spacing: -.01em; }

@media (max-width: 600px) {
  .al2-gnb-ai { padding: 6px 10px; }
  .al2-gnb-ai-label { display: none; }  /* 모바일은 아이콘만 */
}


/* ─── Command Palette 탭 (검색 / AI 질의) ─── */
.al2-cmdk-tabs {
  display: flex;
  border-bottom: 1px solid var(--al2-g100);
  background: var(--al2-g50, #f9fafb);
}
.al2-cmdk-tab {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--al2-g500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .12s;
}
.al2-cmdk-tab:hover { color: var(--al2-brand); background: rgba(108,58,224,.04); }
.al2-cmdk-tab.on {
  color: var(--al2-brand);
  border-bottom-color: var(--al2-brand);
  background: var(--al2-white);
}
.al2-cmdk-tab i { font-size: .72rem; }


/* ─── AI 패널 ─── */
.al2-cmdk-ai-panel { padding: 4px 0 12px; }

.al2-cmdk-ai-hero {
  text-align: center;
  padding: 22px 20px 18px;
}
.al2-cmdk-ai-hero > i {
  font-size: 1.4rem;
  color: var(--al2-brand);
  background: linear-gradient(135deg, #6c3ae0, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 8px;
}
.al2-cmdk-ai-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--al2-g800);
  margin-bottom: 4px;
}
.al2-cmdk-ai-sub {
  font-size: .72rem;
  color: var(--al2-g500);
}

.al2-cmdk-ai-sugs { padding: 0 8px; }
.al2-cmdk-ai-sug {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  font-size: .78rem;
  color: var(--al2-g700);
  cursor: pointer;
  transition: all .12s;
}
.al2-cmdk-ai-sug:hover {
  background: rgba(108,58,224,.06);
  border-color: rgba(108,58,224,.18);
  color: var(--al2-brand);
}
.al2-cmdk-ai-sug i {
  font-size: .72rem;
  color: var(--al2-brand);
  flex-shrink: 0;
}

.al2-cmdk-ai-qtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 16px 6px;
  padding: 6px 10px;
  background: var(--al2-g50);
  border-radius: 8px;
  font-size: .74rem;
  color: var(--al2-g600);
}
.al2-cmdk-ai-qtag i { font-size: .7rem; color: var(--al2-g400); }

.al2-cmdk-ai-answer {
  padding: 8px 16px 6px;
}
.al2-cmdk-ai-answer-body {
  background: linear-gradient(180deg, rgba(108,58,224,.04), rgba(139,92,246,.02));
  border: 1px solid rgba(108,58,224,.14);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: .82rem;
  color: var(--al2-g700);
  line-height: 1.55;
}
.al2-cmdk-ai-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--al2-brand);
  text-decoration: none;
  padding: 4px 0;
}
.al2-cmdk-ai-cta:hover { text-decoration: underline; }

.al2-cmdk-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 20px;
  font-size: .8rem;
  color: var(--al2-g500);
}
.al2-cmdk-ai-loading i { color: var(--al2-brand); }


/* ─── GNB Avatar & Notification Dropdowns ─── */
.al2-gnb-noti-wrap,
.al2-gnb-avatar-wrap,
.al2-gnb-fav-wrap {
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════
   드롭다운 패널 공통 토큰 — 즐겨찾기/알림/아바타 일관성 (2026-04-17)
   ═══════════════════════════════════════════════════════════════ */

/* 공통 헤더 */
.al2-panel .al2-panel-header,
.al2-fav-header,
.al2-noti-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--al2-g100);
  flex-shrink: 0;
}
.al2-panel-title,
.al2-fav-title,
.al2-noti-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--al2-g800);
  letter-spacing: -.01em;
}
/* 헤더 우측 아이콘 액션 (알림의 '모두 읽음' 등) */
.al2-panel-action {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--al2-g500);
  border-radius: 6px;
  cursor: pointer;
  transition: all .12s;
  font-size: .78rem;
}
.al2-panel-action:hover {
  background: rgba(108, 58, 224, .08);
  color: var(--al2-brand);
}

/* 공통 body */
.al2-panel-body { padding: 6px; }

/* 공통 footer */
.al2-panel-footer {
  border-top: 1px solid var(--al2-g100);
  padding: 6px;
  flex-shrink: 0;
}
.al2-panel-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--al2-brand);
  text-decoration: none;
  border-radius: 6px;
  transition: background .12s;
}
.al2-panel-footer-link:hover { background: rgba(108, 58, 224, .06); }
.al2-panel-footer-link i { font-size: .68rem; }

/* 공통 빈 상태 — icon → bold → sub → (선택) CTA */
.al2-panel-empty {
  padding: 44px 20px 40px;
  text-align: center;
}
.al2-panel-empty > i {
  display: block;
  font-size: 1.5rem;
  color: var(--al2-g300);
  margin-bottom: 12px;
  opacity: .85;
}
.al2-panel-empty p {
  font-size: .8rem;
  font-weight: 600;
  color: var(--al2-g700);
  margin: 0 0 4px;
}
.al2-panel-empty span {
  display: block;
  font-size: .68rem;
  color: var(--al2-g400);
  line-height: 1.5;
}
.al2-panel-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 6px 12px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--al2-brand);
  background: rgba(108, 58, 224, .08);
  border-radius: 6px;
  text-decoration: none;
  transition: background .12s;
}
.al2-panel-empty-cta:hover { background: rgba(108, 58, 224, .16); }
.al2-panel-empty-cta i { font-size: .62rem; }

/* 공통 스켈레톤 로딩 행 */
.al2-panel-skel { padding: 4px; }
.al2-panel-skel-row {
  display: flex;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  align-items: center;
}
.al2-panel-skel-avatar {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--al2-g100);
  background-image: linear-gradient(90deg, var(--al2-g100) 0%, #eef2f7 50%, var(--al2-g100) 100%);
  background-size: 200% 100%;
  animation: al2-skel 1.3s infinite linear;
}
.al2-panel-skel-lines { flex: 1; min-width: 0; }
.al2-panel-skel-bar {
  border-radius: 6px;
  background: var(--al2-g100);
  background-image: linear-gradient(90deg, var(--al2-g100) 0%, #eef2f7 50%, var(--al2-g100) 100%);
  background-size: 200% 100%;
  animation: al2-skel 1.3s infinite linear;
}
.al2-panel-skel-line-a { height: 10px; width: 78%; margin-bottom: 6px; }
.al2-panel-skel-line-b { height: 8px; width: 46%; }
@keyframes al2-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 다크 모드 — 스켈레톤/빈 상태/푸터 */
[data-topbar-theme="dark"] .al2-panel-skel-avatar,
[data-topbar-theme="dark"] .al2-panel-skel-bar {
  background: #1e293b;
  background-image: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
  background-size: 200% 100%;
}
[data-topbar-theme="dark"] .al2-panel-empty > i { color: #475569; }
[data-topbar-theme="dark"] .al2-panel-empty p { color: #e2e8f0; }
[data-topbar-theme="dark"] .al2-panel-empty span { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-panel-empty-cta { background: rgba(108, 58, 224, .2); color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-panel-empty-cta:hover { background: rgba(108, 58, 224, .32); }
[data-topbar-theme="dark"] .al2-panel-footer { border-top-color: #1e293b; }
[data-topbar-theme="dark"] .al2-panel-footer-link { color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-panel-footer-link:hover { background: rgba(108, 58, 224, .16); }
[data-topbar-theme="dark"] .al2-panel-action { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-panel-action:hover { background: rgba(108, 58, 224, .16); color: #c4b5fd; }

/* 비교함 카운트 뱃지 — 기존 al2-cnt 위에 색 강조 */
.al2-cnt-cmp {
  background: var(--al2-brand, #6c3ae0) !important;
  color: #fff !important;
  font-weight: 700;
}


/* ─── 즐겨찾기 패널 ─── */
.al2-fav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  background: var(--al2-white, #fff);
  border: 1px solid var(--al2-g150, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  z-index: 9500;                        /* 페이지 sticky 위로 */
  overflow: hidden;
  animation: al2-gnb-dd-in .12s ease;
}
.al2-fav-panel.open { display: block; }

.al2-fav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--al2-g100);
}
.al2-fav-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--al2-g800);
}
.al2-fav-all {
  font-size: .68rem;
  font-weight: 600;
  color: var(--al2-brand, #6c3ae0);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.al2-fav-all:hover { text-decoration: underline; }

.al2-fav-body {
  max-height: 520px;
  overflow-y: auto;
  padding: 8px 10px 12px;
}

/* 필터 탭 — 알림 탭과 동일 규격 */
.al2-fav-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 16px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.05);
  position: sticky;
  top: 0;
  z-index: 2;
}
.al2-fav-tab {
  flex: 1;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: background .12s, color .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.al2-fav-tab > i {
  font-size: .72rem;
  line-height: 1;
  opacity: .85;
}
.al2-fav-tab.on > i { opacity: 1; }
.al2-fav-tab:hover { background: rgba(108,58,224,.08); color: #4A1FB8; }
.al2-fav-tab.on { background: #6C3AE0; color: #fff; }
.al2-fav-tab .cnt {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  background: rgba(255,255,255,.25);
  border-radius: 8px;
  font-size: .65rem;
  text-align: center;
}
.al2-fav-tab:not(.on) .cnt { background: rgba(0,0,0,.08); }

.al2-fav-empty {
  padding: 40px 20px;
  text-align: center;
}
.al2-fav-empty i {
  font-size: 1.4rem;
  color: var(--al2-g300);
  display: block;
  margin-bottom: 10px;
}
.al2-fav-empty p {
  font-size: .78rem;
  font-weight: 600;
  color: var(--al2-g600);
  margin: 0 0 4px;
}
.al2-fav-empty span {
  font-size: .68rem;
  color: var(--al2-g400);
}

.al2-fav-item {
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.al2-fav-item:hover { background: rgba(108,58,224,.05); }
.al2-fav-item + .al2-fav-item { margin-top: 2px; }
/* 마감됨 — 알림의 읽음 처리와 동일한 감도 */
.al2-fav-item.gone { opacity: .62; }
.al2-fav-item.gone:hover { opacity: 1; }

/* 좌측 카테고리 아이콘 — 알림 오너먼트와 완전 동일 스타일 */
.al2-fav-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.al2-fav-ico i {
  font-size: .78rem;
  color: #6b7280;
  line-height: 1;
}
/* 마감 임박 아이템 — 알림의 unread와 동일한 브랜드 강조 */
.al2-fav-item.hot .al2-fav-ico { background: #EEEBFE; }
.al2-fav-item.hot .al2-fav-ico i { color: #6C3AE0; }

/* 제품 모드(customer/buyer/manufacturer) 썸네일 — fav-ico와 동일 크기의 사각 */
.al2-fav-thumb {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f3f4f6;
  overflow: hidden;
  margin-top: 1px;
}
.al2-fav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-topbar-theme="dark"] .al2-fav-thumb { background: #1e293b; }

.al2-fav-main { flex: 1; min-width: 0; padding-top: 2px; }

.al2-fav-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.al2-fav-title-line {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--al2-g800);
  letter-spacing: -.01em;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al2-fav-dday {
  flex-shrink: 0;
  font-family: var(--al2-font-mono, ui-monospace);
  font-size: .62rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--al2-g100);
  color: var(--al2-g600);
  letter-spacing: 0;
}
.al2-fav-dday.hot { background: var(--al2-red-light, #fee2e2); color: var(--al2-red, #ef4444); }
.al2-fav-dday.gone { background: var(--al2-g100); color: var(--al2-g400); text-decoration: line-through; }

.al2-fav-row2 {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--al2-g500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.al2-fav-stage {
  flex-shrink: 0;
  font-size: .58rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--al2-brand-light, #ede9fe);
  color: var(--al2-brand, #6c3ae0);
  letter-spacing: 0;
}

/* 영업 파이프라인 상태 칩 (userStage) — row1 우측에 인라인 편집 */
.al2-fav-ustage-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}
.al2-fav-ustage {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 0;
  font-size: .6rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s, background .12s;
  font-family: inherit;
  letter-spacing: 0;
  line-height: 1.2;
}
.al2-fav-ustage i { font-size: .5rem; opacity: .65; }
.al2-fav-ustage:hover { filter: brightness(.96); }
.al2-fav-ustage--gray   { background: #f3f4f6; color: #6b7280; }
.al2-fav-ustage--blue   { background: #DBEAFE; color: #2563EB; }
.al2-fav-ustage--purple { background: #EDE9FE; color: #6C3AE0; }
.al2-fav-ustage--indigo { background: #E0E7FF; color: #4F46E5; }
.al2-fav-ustage--green  { background: #D1FAE5; color: #059669; }
.al2-fav-ustage--red    { background: #FEE2E2; color: #EF4444; }

.al2-fav-ustage-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 124px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: al2-gnb-dd-in .1s ease;
}
.al2-fav-ustage-opt {
  width: 100%;
  text-align: left;
  border: 0;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: filter .1s;
}
.al2-fav-ustage-opt:hover { filter: brightness(.95); }
.al2-fav-ustage-opt.on::after {
  content: '\2713';
  font-size: .72rem;
  opacity: .75;
  margin-left: 6px;
}

/* D-day 버킷 섹션 헤더 — 알림 그룹과 동일 톤 */
.al2-fav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 6px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #9ca3af;
}
.al2-fav-group:first-child { padding-top: 6px; }
.al2-fav-group-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--al2-g100, #f3f4f6);
  color: var(--al2-g600, #4b5563);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 0;
}

@media (max-width: 600px) {
  .al2-fav-panel { width: calc(100vw - 24px); right: -80px; }
}

.al2-gnb-avatar { cursor: pointer; }

/* Shared dropdown animation */
@keyframes al2-gnb-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ── Avatar Menu ── */
/* v852 — 글로벌 트렌드(LinkedIn/GitHub/Slack/Notion/Linear/Stripe) 정렬 강화:
   메뉴 자체에 inner padding(10px) + box-sizing border-box로 width 예측 가능
   호버 시 rounded segment(8px radius) → 모던 SaaS 표준 */
.al2-avatar-menu,
.al2-avatar-menu *,
.al2-avatar-menu *::before,
.al2-avatar-menu *::after {
  box-sizing: border-box;
}
.al2-avatar-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;                         /* 280 → 300: 호흡 공간 확보 */
  padding: 10px !important;              /* 강화: 내부 gutter (캐스케이드 안전) */
  background: var(--al2-white, #fff);
  border: 1px solid var(--al2-g150, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  z-index: 9500;                        /* 페이지 sticky bar(보통 999)·sticky tabs(999) 위로 */
  overflow: hidden;
  animation: al2-gnb-dd-in .12s ease;
}

.al2-avatar-menu.open { display: block; }

/* 헤더: full bleed (메뉴 padding 10px을 negative margin으로 상쇄) */
.al2-avatar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  margin: -10px -10px 10px;              /* v852: 메뉴 padding 10px과 매칭 */
  background: var(--al2-g50, #f9fafb);
  border-bottom: 1px solid var(--al2-g100, #f3f4f6);
}

.al2-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--al2-brand, #6c3ae0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.al2-avatar-info {
  flex: 1;
  min-width: 0;
}

.al2-avatar-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--al2-g800, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.al2-avatar-email {
  font-size: .68rem;
  color: var(--al2-g400, #9ca3af);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.al2-avatar-badge {
  display: inline-block;
  font-size: .58rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  margin-right: 4px;          /* v853: 다중 배지 간격 */
}

.al2-avatar-badge.sales  { background: #EDE9FE; color: #6c3ae0; }
.al2-avatar-badge.mfr    { background: #DBEAFE; color: #2563EB; }
.al2-avatar-badge.customer { background: #D1FAE5; color: #059669; }

/* v851 — 디바이더: 메뉴 padding(8px) 안에서 좌우 4px 추가로 inset */
.al2-avatar-divider {
  height: 1px;
  background: var(--al2-g100, #f3f4f6);
  margin: 6px 4px;
}

/* v851 — 항목: rounded hover segment + 호흡 공간 */
.al2-avatar-item {
  display: flex;
  align-items: center;
  gap: 12px;                             /* 10 → 12: 아이콘-라벨 간격 ↑ */
  padding: 9px 12px;                     /* 10/16 → 9/12: 메뉴 padding 8px과 합쳐 시각적 좌측 여백 20px */
  min-height: 40px;
  font-size: .8rem;                      /* .78 → .8: 약간 ↑ */
  font-weight: 500;
  color: var(--al2-g700, #374151);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  border-radius: 8px;                    /* 신규: rounded segment */
}

.al2-avatar-item:hover {
  background: var(--al2-g50, #f9fafb);
  color: var(--al2-brand, #6c3ae0);
}

.al2-avatar-item i {
  width: 18px;                           /* 16 → 18 */
  font-size: .82rem;                     /* .75 → .82 */
  color: var(--al2-g400);
  text-align: center;
}

.al2-avatar-item:hover i { color: var(--al2-brand); }

.al2-avatar-logout { color: var(--al2-g500, #6b7280); }
.al2-avatar-logout:hover { background: var(--al2-g50, #f9fafb); color: var(--al2-g700, #374151); }
.al2-avatar-logout i { color: var(--al2-g400); }
.al2-avatar-logout:hover i { color: var(--al2-g600, #4b5563); }

/* 아바타 메뉴 섹션 구분 — divider element가 분리 담당, 섹션 간 border-top 제거 */
.al2-avatar-section { padding: 2px 0; }
.al2-avatar-section + .al2-avatar-section {
  border-top: none;
  margin-top: 0;
  padding-top: 2px;
}
.al2-avatar-section-label {
  padding: 8px 12px 4px;                 /* 6/16 → 8/12: 항목 indent와 동일 */
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--al2-g400, #9ca3af);
}

/* 인라인 토글 행 (다크 모드 스위치) */
.al2-avatar-item-row { justify-content: flex-start; }
.al2-avatar-item-row .al2-avatar-item-label {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  font-weight: 500;
  color: inherit;
}
.al2-theme-switch-inline {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--al2-g200, #e5e7eb);
  transition: background .16s ease;
  flex-shrink: 0;
}
.al2-theme-switch-inline::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.al2-avatar-item-row[aria-checked="true"] .al2-theme-switch-inline {
  background: var(--al2-brand, #6c3ae0);
}
.al2-avatar-item-row[aria-checked="true"] .al2-theme-switch-inline::after {
  transform: translateX(14px);
}
.al2-avatar-item-row:hover .al2-theme-switch-inline { filter: brightness(1.02); }


/* ── Notification Panel ── */
.al2-noti-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  background: var(--al2-white, #fff);
  border: 1px solid var(--al2-g150, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  z-index: 9500;                        /* 페이지 sticky 위로 */
  overflow: hidden;
  animation: al2-gnb-dd-in .12s ease;
}

.al2-noti-panel.open { display: block; }

.al2-noti-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--al2-g100);
}

.al2-noti-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--al2-g800);
}

.al2-noti-readall {
  font-size: .68rem;
  font-weight: 500;
  color: var(--al2-g400, #9ca3af);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all .12s;
}

.al2-noti-readall:hover {
  color: var(--al2-brand, #6c3ae0);
  background: var(--al2-g50, #f9fafb);
}

.al2-noti-body {
  max-height: 340px;
  overflow-y: auto;
}

.al2-noti-empty {
  padding: 48px 24px 52px;
  text-align: center;
}

.al2-noti-empty i {
  font-size: 1.6rem;
  color: var(--al2-g200);
  display: block;
  margin-bottom: 14px;
  opacity: .7;
}

.al2-noti-empty p {
  font-size: .82rem;
  font-weight: 600;
  color: var(--al2-g500);
  margin: 0 0 4px;
}

.al2-noti-empty span {
  font-size: .68rem;
  color: var(--al2-g400);
}

/* Notification badge (bell) */
.al2-gnb-noti-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  background: var(--al2-red, #ef4444);
  color: #fff;
  font-size: .52rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.al2-gnb-noti-wrap .al2-gnb-btn {
  position: relative;
}

/* Notification item (for future Firestore integration) */
.al2-noti-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--al2-g50);
  cursor: pointer;
  transition: background .1s;
}

.al2-noti-item:hover { background: var(--al2-g50); }
.al2-noti-item.unread { background: #F5F3FF; }

.al2-noti-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  flex-shrink: 0;
}

.al2-noti-item-body { flex: 1; min-width: 0; }

.al2-noti-item-title {
  font-size: .75rem;
  font-weight: 600;
  color: var(--al2-g800);
}

.al2-noti-item-desc {
  font-size: .68rem;
  color: var(--al2-g500);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al2-noti-item-time {
  font-size: .6rem;
  color: var(--al2-g400);
  margin-top: 3px;
}


/* ─── 모바일 햄버거 & 드로어 ─── */
.al2-gnb-hamburger {
  display: none;  /* 데스크톱에선 숨김 */
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--al2-g700);
  cursor: pointer;
  border-radius: 6px;
  margin-right: 4px;
  flex-shrink: 0;
}
.al2-gnb-hamburger:hover { background: var(--al2-g100); }
.al2-gnb-hamburger i { font-size: 1rem; }

.al2-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.al2-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.al2-drawer-panel {
  position: absolute;
  top: 0; left: 0;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--al2-white, #fff);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0,0,0,.12);
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow: hidden;
}
.al2-drawer-overlay.open .al2-drawer-panel { transform: translateX(0); }

.al2-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--al2-g100);
  flex-shrink: 0;
}
.al2-drawer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.al2-drawer-close {
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--al2-g600);
  cursor: pointer;
  font-size: 1rem;
}
.al2-drawer-close:hover { background: var(--al2-g100); color: var(--al2-g800); }

.al2-drawer-ai {
  margin: 12px 14px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #6c3ae0, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(108,58,224,.25);
}
.al2-drawer-ai i { font-size: .85rem; }

.al2-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 12px;
}

.al2-drawer-group { margin: 4px 0; }
.al2-drawer-group-label {
  padding: 10px 12px 6px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--al2-g400);
}

.al2-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  text-decoration: none;
  color: var(--al2-g700);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.al2-drawer-item.top { font-weight: 600; color: var(--al2-g800); }
.al2-drawer-item:hover { background: var(--al2-g50); color: var(--al2-brand); }
.al2-drawer-item i { width: 18px; font-size: .78rem; text-align: center; color: var(--al2-g400); }
.al2-drawer-item:hover i { color: var(--al2-brand); }
.al2-drawer-item .al2-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--al2-green); margin-left: 5px;
}
.al2-drawer-item.primary {
  background: var(--al2-brand);
  color: #fff;
  justify-content: center;
}
.al2-drawer-item.primary i { color: #fff; }
.al2-drawer-item.primary:hover { background: var(--al2-brand-dark, #5a2ec7); color: #fff; }

.al2-drawer-footer {
  padding: 8px 8px 16px;
  border-top: 1px solid var(--al2-g100);
  flex-shrink: 0;
}


/* ─── Responsive ─── */
@media (max-width: 1100px) {
  /* 중간 폭: GNB 네비 패딩 줄이기 */
  .al2-gnb-nav .al2-topbar-svc {
    padding: 0 9px;
    font-size: .74rem;
  }
  .al2-gnb-search { max-width: 360px; }
}

@media (max-width: 900px) {
  .al2-topbar-svc {
    padding: 0 10px;
    font-size: .72rem;
  }
  /* GNB 네비 숨김 → 햄버거 드로어로 이관 */
  .al2-gnb-nav { display: none; }
  .al2-gnb-hamburger { display: inline-flex; }
  .al2-gnb-search { max-width: none; margin: 0; }

  .al2-cmdk-dialog {
    width: 95vw;
  }
}

@media (max-width: 768px) {
  /* 모바일: 탑바 서비스 메뉴 전체 숨김 → 햄버거 드로어로 이관 */
  .al2-topbar { display: none; }
  .al2-gnb-logo-text { display: none; }  /* 로고 텍스트 숨겨 공간 확보 */
  .al2-gnb-search { flex: 1; }
}

@media (max-width: 600px) {
  .al2-gnb-search-hint { display: none; }

  .al2-noti-panel {
    width: calc(100vw - 24px);
    right: -60px;
  }

  .al2-avatar-menu {
    width: calc(100vw - 24px);
    right: -12px;
    /* v852 — 모바일에선 inner padding 8px (좁은 화면에서 컨텐츠 너비 확보) */
    padding: 8px !important;
  }
  .al2-avatar-menu .al2-avatar-header {
    margin: -8px -8px 8px;
  }
}
/* Topbar 알림 리스트 — 실 Firestore 연동 (Phase N4: 여백/그룹핑 개선) */
.al2-noti-panel .al2-noti-body { max-height: 520px; overflow-y: auto; padding: 8px 10px 12px; }

/* 날짜 그룹 헤더 */
.al2-noti-group {
  font-size: .62rem; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 14px 12px 6px; background: transparent;
}
.al2-noti-group:first-child { padding-top: 6px; }

.al2-noti-item {
  display: flex; gap: 12px; padding: 13px 14px;
  border-bottom: 0; border-radius: 8px;
  cursor: pointer; transition: background .12s, opacity .12s;
  position: relative; padding-right: 40px;
}
.al2-noti-item:hover { background: rgba(108,58,224,.05); }

/* 읽음 처리된 항목은 살짝 물러나게 */
.al2-noti-item:not(.unread) { opacity: .62; }
.al2-noti-item:not(.unread):hover { opacity: 1; }

/* 안 읽음 — 좌측 점 (•) 표시 */
.al2-noti-item.unread::before {
  content: ''; position: absolute; left: 2px; top: 24px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #6C3AE0;
}

/* 아이콘 — 원형 배경 + FA 아이콘 */
.al2-noti-item .al2-noti-ico {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #f3f4f6;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.al2-noti-item .al2-noti-ico i {
  font-size: .78rem; color: #6b7280; line-height: 1;
}
.al2-noti-item.unread .al2-noti-ico { background: #EEEBFE; }
.al2-noti-item.unread .al2-noti-ico i { color: #6C3AE0; }

.al2-noti-item .al2-noti-main { flex: 1; min-width: 0; padding-top: 2px; }

/* 제목 + 시간 한 줄 */
.al2-noti-item .al2-noti-row1 {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.al2-noti-item .al2-noti-title-line {
  flex: 1; min-width: 0;
  font-size: .78rem; font-weight: 500; color: #1A1A2E;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: -.01em;
}
.al2-noti-item.unread .al2-noti-title-line { font-weight: 600; color: #2A1F5C; }
.al2-noti-item .al2-noti-time {
  flex: 0 0 auto; font-size: .62rem; color: #9ca3af; font-weight: 500;
}

/* 본문 — 한 줄 ellipsis */
.al2-noti-item .al2-noti-msg {
  font-size: .7rem; color: #6b7280; line-height: 1.5; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Topbar 알림 — 필터 탭 (Phase N3 유지) */
.al2-noti-tabs {
  display: flex; gap: 2px; padding: 10px 16px 12px;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.05);
  position: sticky; top: 0; z-index: 2;
}
.al2-noti-tab {
  flex: 1; padding: 6px 8px; background: transparent; border: 0;
  border-radius: 6px; font-size: .72rem; font-weight: 600;
  color: #666; cursor: pointer; transition: background .12s, color .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.al2-noti-tab:hover { background: rgba(108,58,224,.08); color: #4A1FB8; }
.al2-noti-tab.on { background: #6C3AE0; color: #fff; }
.al2-noti-tab .cnt {
  display: inline-block; min-width: 16px; padding: 0 5px;
  background: rgba(255,255,255,.25); border-radius: 8px;
  font-size: .65rem; text-align: center;
}
.al2-noti-tab:not(.on) .cnt { background: rgba(0,0,0,.08); }


/* ═══════════════════════════════════════════════════════════════
   다크 모드 — [data-topbar-theme="dark"] 속성으로 토글
   범위: 탑바/GNB + 드롭다운 표면 (페이지 본문은 점진 확대)
   ═══════════════════════════════════════════════════════════════ */

/* GNB 바 자체 */
[data-topbar-theme="dark"] .al2-gnb {
  background: #0f172a;
  border-bottom-color: #1e293b;
}
[data-topbar-theme="dark"] .al2-gnb-logo-text { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-gnb-logo-icon { background: var(--al2-brand); }

/* GNB 내부 네비 메뉴 */
[data-topbar-theme="dark"] .al2-gnb-nav .al2-topbar-svc { color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-gnb-nav .al2-topbar-svc:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
[data-topbar-theme="dark"] .al2-gnb-nav .al2-topbar-svc.on {
  color: #fff;
  border-bottom-color: var(--al2-brand);
}
[data-topbar-theme="dark"] .al2-gnb-nav .al2-topbar-svc .al2-cnt {
  background: rgba(255,255,255,.1);
  color: #e2e8f0;
}

/* GNB 검색창 */
[data-topbar-theme="dark"] .al2-gnb-search input {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
[data-topbar-theme="dark"] .al2-gnb-search input::placeholder { color: #64748b; }
[data-topbar-theme="dark"] .al2-gnb-search input:focus {
  background: #0f172a;
  border-color: var(--al2-brand);
  box-shadow: 0 0 0 3px rgba(108,58,224,.25);
}
[data-topbar-theme="dark"] .al2-gnb-search i { color: #64748b; }
[data-topbar-theme="dark"] .al2-gnb-search-hint kbd {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

/* GNB 우측 버튼(즐겨찾기, 알림) */
[data-topbar-theme="dark"] .al2-gnb-btn.outline {
  background: transparent;
  border-color: #334155;
  color: #cbd5e1;
}
[data-topbar-theme="dark"] .al2-gnb-btn.outline:hover {
  background: rgba(255,255,255,.06);
  border-color: #475569;
  color: #fff;
}
[data-topbar-theme="dark"] .al2-gnb-avatar { box-shadow: 0 0 0 2px #1e293b; }
[data-topbar-theme="dark"] .al2-gnb-hamburger { color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-gnb-hamburger:hover { background: rgba(255,255,255,.06); }

/* 드롭다운 패널 (즐겨찾기/알림/아바타) */
[data-topbar-theme="dark"] .al2-fav-panel,
[data-topbar-theme="dark"] .al2-noti-panel,
[data-topbar-theme="dark"] .al2-avatar-menu,
[data-topbar-theme="dark"] .al2-topbar-dd-menu {
  background: #0f172a;
  border-color: #1e293b;
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
}
[data-topbar-theme="dark"] .al2-fav-header,
[data-topbar-theme="dark"] .al2-noti-header { border-bottom-color: #1e293b; }
[data-topbar-theme="dark"] .al2-fav-title,
[data-topbar-theme="dark"] .al2-noti-title { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-fav-item:hover { background: rgba(108,58,224,.16); }
[data-topbar-theme="dark"] .al2-fav-title-line { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-fav-row2 { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-fav-dday {
  background: #1e293b;
  color: #cbd5e1;
}

/* 아바타 메뉴 */
[data-topbar-theme="dark"] .al2-avatar-header {
  background: #1e293b;
  border-bottom-color: #334155;
}
[data-topbar-theme="dark"] .al2-avatar-name { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-avatar-email { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-avatar-item { color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-avatar-item:hover {
  background: rgba(108,58,224,.16);
  color: #c4b5fd;
}
[data-topbar-theme="dark"] .al2-avatar-item i { color: #64748b; }
[data-topbar-theme="dark"] .al2-avatar-item:hover i { color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-avatar-divider { background: #1e293b; }
[data-topbar-theme="dark"] .al2-avatar-logout { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-avatar-section + .al2-avatar-section { border-top-color: #1e293b; }
[data-topbar-theme="dark"] .al2-avatar-section-label { color: #64748b; }
[data-topbar-theme="dark"] .al2-theme-switch-inline { background: #334155; }
[data-topbar-theme="dark"] .al2-avatar-item-row[aria-checked="true"] .al2-theme-switch-inline { background: var(--al2-brand, #6c3ae0); }
[data-topbar-theme="dark"] .al2-theme-switch-inline::after { background: #f1f5f9; }
[data-topbar-theme="dark"] .al2-fav-group { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-fav-group-cnt { background: #1e293b; color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-fav-ico { background: #1e293b; }
[data-topbar-theme="dark"] .al2-fav-ico i { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-fav-item.hot .al2-fav-ico { background: rgba(108,58,224,.28); }
[data-topbar-theme="dark"] .al2-fav-item.hot .al2-fav-ico i { color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-fav-ustage--gray   { background: #1e293b;             color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-fav-ustage--blue   { background: rgba(37,99,235,.22);  color: #93c5fd; }
[data-topbar-theme="dark"] .al2-fav-ustage--purple { background: rgba(108,58,224,.26); color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-fav-ustage--indigo { background: rgba(79,70,229,.22);  color: #a5b4fc; }
[data-topbar-theme="dark"] .al2-fav-ustage--green  { background: rgba(5,150,105,.22);  color: #6ee7b7; }
[data-topbar-theme="dark"] .al2-fav-ustage--red    { background: rgba(239,68,68,.22);  color: #fca5a5; }
[data-topbar-theme="dark"] .al2-fav-ustage-menu    { background: #0f172a; border-color: #1e293b; box-shadow: 0 10px 28px rgba(0,0,0,.5); }

/* 드롭다운 메뉴 항목 */
[data-topbar-theme="dark"] .al2-topbar-dd-menu a { color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-topbar-dd-menu a:hover {
  background: rgba(108,58,224,.16);
  color: #c4b5fd;
}
[data-topbar-theme="dark"] .al2-topbar-dd-menu a i { color: #64748b; }
[data-topbar-theme="dark"] .al2-topbar-dd-menu a:hover i { color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-topbar-dd-divider { background: #1e293b; }

/* 알림 아이템 */
[data-topbar-theme="dark"] .al2-noti-item:hover { background: rgba(108,58,224,.12); }
[data-topbar-theme="dark"] .al2-noti-item.unread { background: rgba(108,58,224,.18); }
[data-topbar-theme="dark"] .al2-noti-item .al2-noti-ico { background: #1e293b; }
[data-topbar-theme="dark"] .al2-noti-item .al2-noti-ico i { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-noti-item.unread .al2-noti-ico { background: rgba(108,58,224,.28); }
[data-topbar-theme="dark"] .al2-noti-item.unread .al2-noti-ico i { color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-noti-item .al2-noti-title-line { color: #e2e8f0; }
[data-topbar-theme="dark"] .al2-noti-item.unread .al2-noti-title-line { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-noti-item .al2-noti-msg { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-noti-item .al2-noti-time { color: #64748b; }
[data-topbar-theme="dark"] .al2-noti-tabs { background: #0f172a; border-bottom-color: #1e293b; }
[data-topbar-theme="dark"] .al2-noti-tab { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-noti-tab:hover { background: rgba(108,58,224,.16); color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-fav-tabs { background: #0f172a; border-bottom-color: #1e293b; }
[data-topbar-theme="dark"] .al2-fav-tab { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-fav-tab:hover { background: rgba(108,58,224,.16); color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-fav-tab:not(.on) .cnt { background: rgba(255,255,255,.08); color: #cbd5e1; }

/* Cmd+K 팔레트 (다크) */
[data-topbar-theme="dark"] .al2-cmdk-dialog {
  background: #0f172a;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}
[data-topbar-theme="dark"] .al2-cmdk-tabs { background: #1e293b; border-bottom-color: #334155; }
[data-topbar-theme="dark"] .al2-cmdk-tab { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-cmdk-tab.on { background: #0f172a; color: #c4b5fd; border-bottom-color: var(--al2-brand); }
[data-topbar-theme="dark"] .al2-cmdk-input-wrap { border-bottom-color: #1e293b; }
[data-topbar-theme="dark"] .al2-cmdk-input-wrap input { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-cmdk-input-wrap input::placeholder { color: #64748b; }
[data-topbar-theme="dark"] .al2-cmdk-input-wrap kbd {
  background: #1e293b; border-color: #334155; color: #94a3b8;
}
[data-topbar-theme="dark"] .al2-cmdk-item:hover,
[data-topbar-theme="dark"] .al2-cmdk-item.active { background: rgba(108,58,224,.16); }
[data-topbar-theme="dark"] .al2-cmdk-item-text { color: #e2e8f0; }
[data-topbar-theme="dark"] .al2-cmdk-footer { border-top-color: #1e293b; color: #94a3b8; }
[data-topbar-theme="dark"] .al2-cmdk-ai-sug { color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-cmdk-ai-sug:hover { background: rgba(108,58,224,.16); border-color: rgba(108,58,224,.4); color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-cmdk-ai-title { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-cmdk-ai-sub { color: #94a3b8; }
[data-topbar-theme="dark"] .al2-cmdk-ai-qtag { background: #1e293b; color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-cmdk-ai-answer-body {
  background: linear-gradient(180deg, rgba(108,58,224,.14), rgba(139,92,246,.08));
  border-color: rgba(108,58,224,.32);
  color: #e2e8f0;
}

/* 드로어 (모바일) */
[data-topbar-theme="dark"] .al2-drawer-panel { background: #0f172a; }
[data-topbar-theme="dark"] .al2-drawer-header { border-bottom-color: #1e293b; }
[data-topbar-theme="dark"] .al2-drawer-item { color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-drawer-item.top { color: #f1f5f9; }
[data-topbar-theme="dark"] .al2-drawer-item:hover { background: rgba(108,58,224,.16); color: #c4b5fd; }
[data-topbar-theme="dark"] .al2-drawer-item i { color: #64748b; }
[data-topbar-theme="dark"] .al2-drawer-group-label { color: #64748b; }
[data-topbar-theme="dark"] .al2-drawer-footer { border-top-color: #1e293b; }

/* 테마 토글 스위치 (아바타 메뉴 내부) */
.al2-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--al2-g700, #374151);
}
.al2-theme-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.al2-theme-toggle-label i { width: 16px; font-size: .78rem; color: var(--al2-g400); text-align: center; }
.al2-theme-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--al2-g200, #e5e7eb);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s;
  flex-shrink: 0;
  padding: 0;
}
.al2-theme-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.al2-theme-switch[aria-checked="true"] { background: var(--al2-brand, #6c3ae0); }
.al2-theme-switch[aria-checked="true"]::after { transform: translateX(16px); }
[data-topbar-theme="dark"] .al2-theme-toggle { color: #cbd5e1; }
[data-topbar-theme="dark"] .al2-theme-toggle-label i { color: #64748b; }
[data-topbar-theme="dark"] .al2-theme-switch { background: #334155; }

/* 우측 열기 버튼 — hover 시에만 보임 */
.al2-noti-open {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; color: #c4c4cc;
  border: 0; cursor: pointer; transition: background .12s, color .12s;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; opacity: 0;
}
.al2-noti-item:hover .al2-noti-open { opacity: 1; color: #6C3AE0; }
.al2-noti-open:hover { background: #6C3AE0 !important; color: #fff !important; }

/* ─────────── Guest 메뉴 고도화 (audience 배지 + 관점 토글 + 온보딩 배너) ─────────── */

/* 메뉴 아이템 옆 audience 배지 (👤/💼) */
.al2-aud-badge {
  display: inline-block;
  font-size: .65rem;
  margin-left: 3px;
  opacity: .7;
  vertical-align: middle;
  line-height: 1;
  filter: saturate(.85);
}
.al2-topbar-svc:hover .al2-aud-badge { opacity: 1; }

/* 관점 비매칭 아이템은 살짝 흐리게 (hide하지 않음) */
.al2-aud-dim,
.al2-aud-dim .al2-topbar-svc,
.al2-aud-dim > .al2-drawer-group-label,
.al2-drawer-item.al2-aud-dim { opacity: .55; }
.al2-aud-dim:hover,
.al2-aud-dim:hover .al2-topbar-svc,
.al2-drawer-item.al2-aud-dim:hover { opacity: 1; }

/* 관점 토글 (segmented) */
.al2-guest-persp {
  display: inline-flex;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  margin-right: 6px;
  height: 34px;
}
.al2-guest-persp-btn {
  border: 0;
  background: transparent;
  padding: 0 10px;
  font-size: .72rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .12s, color .12s;
  border-right: 1px solid #e2e8f0;
}
.al2-guest-persp-btn:last-child { border-right: 0; }
.al2-guest-persp-btn:hover { background: #eef2f7; color: #1e293b; }
.al2-guest-persp-btn.on {
  background: #6C3AE0;
  color: #fff;
}
.al2-guest-persp-btn.on:hover { background: #5a2ec9; }
.al2-guest-persp-ic { font-size: .8rem; }
@media (max-width: 760px) {
  .al2-guest-persp { display: none; }  /* 모바일은 드로어에서 제공 */
}

/* 온보딩 배너 (첫 방문) */
.al2-guest-onboard {
  background: linear-gradient(135deg, #6C3AE0 0%, #8b5cf6 100%);
  color: #fff;
  font-size: .82rem;
  position: relative;
  z-index: 100;
}
.al2-guest-onboard-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 48px 8px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.al2-guest-onboard-msg { flex: 1 1 240px; }
.al2-guest-onboard-msg strong { margin-right: 6px; }
.al2-guest-onboard-cta {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.al2-guest-onboard-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
.al2-guest-onboard-btn:hover { background: rgba(255, 255, 255, 0.28); }
.al2-guest-onboard-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  opacity: .8;
}
.al2-guest-onboard-close:hover { background: rgba(255, 255, 255, 0.15); opacity: 1; }
@media (max-width: 600px) {
  .al2-guest-onboard-inner { padding: 10px 44px 10px 14px; font-size: .76rem; }
  .al2-guest-onboard-msg { flex: 1 1 100%; }
}

/* 드로어 관점 박스 */
.al2-drawer-persp-box {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
}
.al2-drawer-persp-label {
  font-size: .7rem;
  color: #94a3b8;
  margin-bottom: 6px;
  font-weight: 600;
}
.al2-drawer-persp {
  display: flex;
  gap: 6px;
}
.al2-drawer-persp-btn {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: .78rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.al2-drawer-persp-btn:hover { background: #f8fafc; }
.al2-drawer-persp-btn.on {
  background: #6C3AE0;
  color: #fff;
  border-color: #6C3AE0;
}

/* Dark mode */
[data-topbar-theme="dark"] .al2-guest-persp {
  background: #0f172a;
  border-color: #1e293b;
}
[data-topbar-theme="dark"] .al2-guest-persp-btn {
  color: #94a3b8;
  border-right-color: #1e293b;
}
[data-topbar-theme="dark"] .al2-guest-persp-btn:hover { background: #1e293b; color: #e2e8f0; }
[data-topbar-theme="dark"] .al2-drawer-persp-box { border-top-color: #1e293b; }
[data-topbar-theme="dark"] .al2-drawer-persp-btn {
  background: #0f172a;
  border-color: #1e293b;
  color: #cbd5e1;
}
[data-topbar-theme="dark"] .al2-drawer-persp-btn:hover { background: #1e293b; }