/* 2026-10-21 알림함 (notify.js, .nt-*) — 새 파일. 기준표 --ds-* 사용, 태그 색은 영업 배지(.sp-status-badge · .hsl-tag)와 같은 연한 바탕 + 진한 글자 */

/* 종 (회원 동그라미 왼쪽) */
.nt-wrap{position:relative;display:flex;align-items:center;}
.nt-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--ds-gray-600);font-size:22px;cursor:pointer;}
@media (hover:hover){.nt-bell:hover{background:var(--ds-gray-50);color:var(--ds-brand);}}
.nt-num{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:var(--ds-radius-pill);background:var(--ds-danger);color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center;box-sizing:border-box;}
.nt-dot{position:absolute;bottom:5px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--ds-warn);border:1.5px solid #fff;}
.nt-num[hidden],.nt-dot[hidden],.nt-panel[hidden],.nt-readall[hidden]{display:none;}

/* 패널 (PC: 종 아래 오른쪽 맞춤) */
.nt-panel{position:absolute;top:calc(100% + 6px);right:-48px;width:380px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ds-gray-200);border-radius:10px;box-shadow:0 8px 24px rgba(27,58,107,.14);z-index:9999;overflow:hidden;text-align:left;}
.nt-head{padding:var(--ds-sp-3) var(--ds-sp-3) var(--ds-sp-2);flex-shrink:0;}
.nt-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:var(--ds-line) solid var(--ds-primary);border-radius:var(--ds-radius-md);overflow:hidden;}
.nt-sw-btn{height:32px;padding:0;border:none;background:transparent;color:var(--ds-primary);font-size:var(--ds-fs-md);font-weight:400;cursor:pointer;white-space:nowrap;}
.nt-sw-btn + .nt-sw-btn{border-left:var(--ds-line) solid var(--ds-primary);}
.nt-sw-btn.active{background:var(--ds-primary);color:#fff;font-weight:500;}
.nt-tools{display:flex;justify-content:flex-end;min-height:0;}
.nt-readall{margin-top:6px;padding:2px 0;border:none;background:none;color:var(--ds-primary);font-size:var(--ds-fs-sm);cursor:pointer;}
.nt-list{flex:1 1 auto;min-height:0;overflow-y:auto;}
.nt-foot{flex-shrink:0;padding:var(--ds-sp-2);border-top:var(--ds-line) solid var(--ds-gray-200);text-align:center;font-size:var(--ds-fs-xs);color:var(--ds-gray-400);}
.nt-empty{padding:28px var(--ds-sp-3);text-align:center;font-size:var(--ds-fs-md);color:var(--ds-gray-400);}

/* 한 줄 = 종류 태그 · 시각 / 업체명 / 보낸 사람 · 짧은 내용 */
.nt-row{display:flex;gap:var(--ds-sp-2);padding:10px var(--ds-sp-3);border-top:var(--ds-line) solid var(--ds-gray-200);cursor:pointer;outline:none;}
@media (hover:hover){.nt-row:hover{background:var(--ds-gray-50);}}
.nt-row:focus-visible{background:var(--ds-gray-50);}
.nt-row-dot{flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:transparent;}
.nt-row-body{flex:1;min-width:0;}
.nt-row-top{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-sp-2);}
.nt-row-time{flex-shrink:0;font-size:var(--ds-fs-xs);color:var(--ds-gray-400);white-space:nowrap;}
.nt-row-co{margin-top:3px;font-size:var(--ds-fs-md);color:var(--ds-gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nt-row-sub{margin-top:1px;font-size:var(--ds-fs-sm);color:var(--ds-gray-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 안 읽은 줄 = 연한 파랑 바탕 + 왼쪽 파란 점 + 굵은 글씨 */
.nt-row--unread{background:var(--ds-primary-soft);}
@media (hover:hover){.nt-row--unread:hover{background:#dde9f5;}}
.nt-row--unread .nt-row-dot{background:var(--ds-primary);}
.nt-row--unread .nt-row-co{font-weight:600;}

/* 태그 색: 처리 완료 초록 · 요청/지시 노랑 · 처리 요청·오늘 F/U 파랑 · 완료 후 수정됨·재검토 주황 · 지연 빨강 · 완료 취소 회색 */
.nt-tag{display:inline-block;padding:1px 7px;border-radius:var(--ds-radius-sm);font-size:var(--ds-fs-xs);font-weight:600;line-height:1.6;white-space:nowrap;}
.nt-tag--green{background:#ecfdf5;color:var(--ds-success);}
.nt-tag--yellow{background:#fef9c3;color:#a16207;}
.nt-tag--blue{background:#eff6ff;color:var(--ds-progress);}
.nt-tag--orange{background:#fff7ed;color:var(--ds-warn);}
.nt-tag--red{background:#fef2f2;color:var(--ds-danger);}
.nt-tag--gray{background:#f1f5f9;color:var(--ds-gray-600);}

/* 휴대폰: 머리 줄 바로 아래로 화면 폭 (top·max-height 는 notify.js _ntPlace) */
@media screen and (max-width: 600px){
  .nt-bell{width:34px;height:34px;font-size:21px;}
  .nt-panel{position:fixed;left:8px;right:8px;width:auto;top:60px;}
}