/* ═══════════════════════════════════════════════════════════════════════
   메뉴별 알림 — 벨 안 「메뉴 공지」 칸 (2026-08-17)

   ★ 새 문법을 만들지 않는다. 목록 줄(.bp-i)·머리줄 버튼(.pop-a)·칸 테두리(.pop-f)는
     app.css 의 것을 그대로 쓴다. 이 파일에는 **app.css 에 없는 것만** 둔다.
   ⚠ 색·간격은 전부 토큰(var(--…))이다 — 리터럴 색/치수는 UI 게이트가 막는다
     (_ClaudeWorkspace/automation/ui_gate_tokens.py).
   ⚠ 안 읽음 표시는 **점**이다. 숫자 배지(.bell-n)의 주인은 core.js 이고, 한 요소를
     둘이 소유하면 마지막에 그린 쪽에 따라 값이 흔들린다(notify.js 머리말 참조).
   ═══════════════════════════════════════════════════════════════════════ */

/* 안 읽은 메뉴 공지가 있을 때 벨에 붙는 점 */
.bell.has-nmenu::after{
  content:"";
  position:absolute; top:0; right:-2px;
  width:var(--s2); height:var(--s2);
  /* ⚠ 50% 가 아니라 999px 이다 — 반경 스케일 밖 값은 토큰 게이트가 막는다
       (_ClaudeWorkspace/automation/ui_gate_tokens.py). 원 모양은 둘 다 같다. */
  border-radius:999px;
  background:var(--accent);
}

/* 칸 머리줄 — 벨 팝오버 머리줄(.pop-h)과 같은 결로 보이되 안쪽 칸이라 한 단 작다 */
.nmenu-h{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3) var(--sp-1);
  font-size:12px; font-weight:600; color:var(--ink-3);
}
.nmenu-h i{font-style:normal; font-weight:400; color:var(--accent)}

/* 메뉴별 켜기/끄기 — 2단 그리드(줄바꿈으로 체크박스·글자가 뒤섞이지 않는다,
   2026-08-25 개선: 종전 flex-wrap 은 좁은 팝오버에서 라벨이 중간에 줄바꿈되며
   바로 옆 체크박스와 짝이 헷갈렸다) */
.nmenu-ts{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-3);
  padding:0 var(--sp-3) var(--sp-2);
}
/* 체크박스 자체는 krds-form-check(20px 박스·8px 간격, _ClaudeWorkspace/automation/ui_gate_tokens.py
   토큰만 씀)를 그대로 쓴다 — 여기서는 이 칸 전용 크기(팝오버 폭에 맞춘 13px)만 얹는다. */
.krds-form-check.nmenu-t{
  font-size:13px; color:var(--ink);
  /* ⚠ 터치 대상은 최소 높이를 지킨다 — 폰에서 체크가 안 눌리는 자리를 만들지 않는다 */
  min-height:var(--s5);
}

/* 알림 한 건에서 그 메뉴로 가는 링크 */
.nmenu-go{color:var(--accent); font-weight:600; white-space:nowrap}
.nmenu-go:hover{color:var(--accent-hi)}