/* 알림함 스타일은 다른 모달과 테이블에 영향을 주지 않도록 전용 클래스에 한정한다. */
.work-notification-bell { position:relative; display:inline-flex; align-items:center; gap:6px; }
.work-notification-count { background:#b42318; color:#fff; border-radius:12px; padding:1px 6px; font-size:11px; }
.work-notification-panel { position:fixed; top:72px; right:20px; z-index:1600; width:min(560px,calc(100vw - 24px)); max-width:none; background:var(--bg-content,#fff); border:1px solid var(--border-color,#d1d5db); border-radius:var(--border-radius,6px); box-shadow:0 5px 15px #0003; padding:0; color:var(--color-text-primary,#343a40); }
.work-notification-panel { box-sizing:border-box; display:flex; flex-direction:column; max-height:calc(100dvh - 90px); overflow:hidden; }
.work-notification-panel.is-settings { width:min(820px,calc(100vw - 24px)); }
/* 공통 모달의 헤더·본문 간격을 사용하고 목록에서도 닫기 영역은 고정한다. */
.work-notification-panel > .work-notification-head { padding:var(--space-md,16px) var(--space-lg,20px); border-bottom:1px solid var(--border-color,#d1d5db); }
.work-notification-head h3 { margin:0; font-size:var(--fs-xl,20px); }
.work-notification-panel > [data-work-content] { padding:var(--space-lg,20px); }
.work-notification-panel > .work-notification-message { margin:0; padding:10px var(--space-lg,20px); font-size:var(--fs-sm,13px); }
.work-notification-panel > .work-notification-message:empty { display:none; }
.work-notification-panel .work-notification-global { padding:0; margin:0; background:transparent; }
/* 세 패널은 제목과 닫기를 고정하고 선택된 내용 영역만 내부 스크롤한다. */
.work-notification-panel > .work-notification-head,
.work-notification-panel > .work-notification-message { flex:0 0 auto; }
.work-notification-panel > [data-work-content="push"],
.work-notification-panel > [data-work-content="work"] { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.work-notification-panel [data-work-content="list"] { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }
.work-notification-panel [data-work-content="list"] > .work-notification-actions { flex:0 0 auto; }
.work-notification-list-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.work-notification-panel[hidden], .work-notification-panel [hidden], .work-notification-count[hidden] { display:none !important; }
.work-notification-head,.work-notification-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.work-notification-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; border-bottom:1px solid #e5e7eb; padding:12px 6px; }
.work-notification-item.is-unread { background:#eff6ff; }
.work-notification-item a { display:block; min-width:0; color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.work-notification-item a:only-child { grid-column:1 / -1; }
.work-notification-item p { margin:6px 0; overflow-wrap:anywhere; }
.work-notification-item small { color:#64748b; }
.work-notification-item button { margin:0; white-space:nowrap; }
.work-notification-message { color:#64748b; font-size:13px; }
.work-notification-global { padding:10px; background:#f8fafc; font-size:13px; margin-bottom:12px; }
.work-notification-global p { margin:12px 0; }
.work-notification-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.work-notification-status > div { padding:10px; border:1px solid #dbe1e8; border-radius:6px; background:#f8fafc; }
.work-notification-status span,.work-notification-status strong { display:block; }
.work-notification-status span { color:#64748b; font-size:12px; margin-bottom:5px; }
.work-notification-status strong { font-size:14px; }
.work-notification-global > button { margin:3px 3px 3px 0; }
/* 기본 설정은 짧게 표시하고 등록된 구독의 상세 목록만 펼쳐서 관리한다. */
.work-notification-global h3, [data-work-settings] > h3 { font-size:14px; margin:0 0 10px; }
.work-notification-toggle { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
/* 라벨 열 너비를 통일하고 값과 동작을 같은 행에 배치한다. */
.work-notification-push-fields { margin:0; }
.work-notification-push-fields > div { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:12px; min-height:46px; padding:6px 0; }
.work-notification-push-fields dt { color:#64748b; font-weight:500; }
.work-notification-push-fields dd { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0; min-width:0; }
.work-notification-push-fields strong { font-weight:600; }
.work-notification-push-fields button { margin:0; }
.work-notification-state-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:420px) { .work-notification-push-fields > div { grid-template-columns:100px minmax(0,1fr); gap:8px; } }
.work-notification-toggle [aria-pressed="true"] { background:var(--color-primary,#1e224c); color:#fff; border-color:var(--color-primary,#1e224c); box-shadow:inset 0 0 0 1px currentColor; }
.work-notification-push-note { font-size:12px; color:#64748b; margin:8px 0; }
[data-work-push-message]:empty { display:none; }
.work-notification-devices { margin-top:14px; border:1px solid #dbe1e8; border-radius:8px; background:#fff; }
.work-notification-global .work-notification-device-header > h3 { margin:0; min-width:0; font-size:13px; font-weight:600; }
/* 도구와 항목을 분리하고 날짜별 제목을 고정해 여러 구독을 쉽게 비교한다. */
.work-notification-device-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-bottom:1px solid #e5e7eb; background:#f8fafc; border-radius:8px 8px 0 0; }
.work-notification-device-header > button { flex:0 0 auto; }
[data-work-device-list] { max-height:280px; overflow:auto; }
[data-work-device-list] > p { padding:8px 0; color:#64748b; }
.work-notification-device-table { width:100%; min-width:650px; border-collapse:separate; border-spacing:0; font-size:12px; }
.work-notification-device-table th, .work-notification-device-table td { padding:10px; border-bottom:1px solid #e5e7eb; vertical-align:middle; text-align:center; }
.work-notification-device-table thead th { position:sticky; top:0; z-index:1; background:#f1f5f9; font-weight:600; white-space:nowrap; }
.work-notification-device-table tr > :first-child { width:32%; text-align:left; }
.work-notification-device-table td { white-space:nowrap; }
.work-notification-device-table td:first-child { white-space:normal; overflow-wrap:anywhere; }
.work-notification-device-table tbody tr:last-child td { border-bottom:0; }
.work-notification-device-table .work-notification-device-empty { text-align:center; padding:20px; color:#64748b; }
.work-notification-device-title { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.work-notification-device-state { padding:2px 6px; border-radius:4px; font-size:11px; background:#f1f5f9; color:#64748b; }
.work-notification-device-state.is-active { background:#e8f5ee; color:#187044; }
.work-notification-device small { display:block; color:#64748b; margin-top:4px; }
.work-notification-device button { flex:0 0 auto; }
.work-notification-current { font-size:11px; color:#144ca2; background:#e8f0ff; padding:2px 5px; border-radius:4px; }

/* 표 안에서만 가로 스크롤하고 업무유형은 고정해 작은 화면에서도 설정 대상을 확인한다. */
.work-notification-table-scroll { max-width:100%; overflow-x:auto; border:1px solid #e5e7eb; border-radius:6px; }
.work-notification-settings-table { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:13px; }
.work-notification-settings-table th,.work-notification-settings-table td { box-sizing:border-box; padding:8px 0; border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; text-align:center; }
.work-notification-settings-table thead th { background:#f1f5f9; font-weight:600; white-space:nowrap; }
.work-notification-settings-table tbody th { background:#fff; font-weight:500; }
.work-notification-settings-table .work-notification-type { position:sticky; left:0; z-index:1; padding:8px 10px; text-align:left; overflow-wrap:anywhere; }
.work-notification-settings-table thead .work-notification-type { z-index:2; }
.work-notification-settings-table tbody tr:last-child > * { border-bottom:0; }
.work-notification-setting-pair { display:grid; grid-template-columns:1fr 1fr; }
.work-notification-setting-pair label { display:flex; align-items:center; justify-content:center; min-height:28px; cursor:pointer; }
.work-notification-setting-pair input { margin:0; width:15px; height:15px; }
.work-notification-more,.work-notification-save { margin-top:12px; }
@media (max-width:600px) {
    .work-notification-panel { top:60px; right:12px; max-height:calc(100dvh - 75px); }
    .work-notification-panel:not(.is-settings) { max-height:calc(100dvh - 75px); }
}