/* =============================================
   Bell Dropdown — Phase 0a
   GNB의 공지사항 알림 컴포넌트
   - .gnb scope 안에서만 적용 (GNB CSS isolation 따름)
   - dashboard standalone + base.html extend 양쪽 공통
   ============================================= */

/* Bell button — base는 .gnb-util-btn 패턴 따라가지만 badge 위해 position 추가 */
.gnb .gnb-bell-btn {
  position: relative;
  padding: .35rem .55rem;  /* 다른 util-btn보다 약간 좁게 (icon-only) */
}

.gnb .gnb-bell-btn i.bi-bell {
  font-size: 1rem;
  color: var(--c-700);
  transition: color .15s;
}
.gnb .gnb-bell-btn:hover i.bi-bell {
  color: var(--c-900);
}

/* Unread badge — 우측 상단 작은 점/숫자 */
.gnb .bell-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: #000;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--c-0);  /* GNB 흰 bg와 분리 */
  font-variant-numeric: tabular-nums;
}

/* Bell dropdown — 다른 gnb-drop 패턴 + 우측 정렬 + 더 큰 width */
.gnb #gnb-bell-area .gnb-drop {
  right: 0;
  left: auto;
  min-width: 320px;
  max-width: 360px;
  padding: 0;  /* 자체 layout 위해 base padding 0 */
}

/* Bell dropdown — hover 외 click toggle 지원 (user pill 패턴 따름) */
.gnb #gnb-bell-area:not(.open):not(:hover) .gnb-drop { display: none; }
.gnb #gnb-bell-area.open .gnb-drop { display: block; }

/* Bell header */
.gnb .bell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem .875rem .625rem;
  border-bottom: 1px solid var(--c-200);
}
.gnb .bell-header-title {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--c-900);
  letter-spacing: -0.01em;
}
.gnb .bell-view-all {
  font-size: .6875rem;
  color: var(--c-500);
  font-weight: 600;
  transition: color .15s;
}
.gnb .bell-view-all:hover {
  color: var(--accent);
}

/* Bell list */
.gnb .bell-list {
  max-height: 380px;
  overflow-y: auto;
  padding: .25rem 0;
}

/* 개별 announcement item */
.gnb .bell-item {
  display: block;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--c-100);
  transition: background .12s;
  cursor: pointer;
}
.gnb .bell-item:last-child { border-bottom: none; }
.gnb .bell-item:hover { background: var(--c-50); }

.gnb .bell-item-title {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gnb .bell-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .6875rem;
  color: var(--c-500);
}
.gnb .bell-item-cat {
  display: inline-flex;
  padding: .075rem .375rem;
  background: var(--c-100);
  color: var(--c-700);
  border-radius: 999px;
  font-weight: 600;
  font-size: .625rem;
  letter-spacing: -0.01em;
}
.gnb .bell-item-cat.cat-신기능 { background: var(--accent-dim); color: var(--accent-dark, #00a080); }
.gnb .bell-item-cat.cat-이벤트 { background: #fff3c4; color: #b58900; }
.gnb .bell-item-cat.cat-점검   { background: #fee2e2; color: #b91c1c; }
.gnb .bell-item-cat.cat-업데이트 { background: #e0f2fe; color: #0284c7; }

.gnb .bell-item-time {
  color: var(--c-400);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
}

/* Pinned indicator */
.gnb .bell-item-pinned {
  display: inline-block;
  margin-right: .25rem;
  color: var(--accent);
  font-size: .65rem;
}

/* unread (last_seen 이후 신규) */
.gnb .bell-item.unread {
  background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 100%);
}
.gnb .bell-item.unread .bell-item-title::before {
  content: "● ";
  color: var(--accent);
  font-size: .85rem;
}

/* Empty state */
.gnb .bell-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--c-500);
  font-size: .8125rem;
}