/* 알림 종 버튼 · 목록 · 슬랙 설정 (src/alerts.js) — 프로필 동그라미와 같은 크기, 새 알림은 종 오른쪽 위 작은 빨간 점(테두리 없이) */
.page-head .account{display:flex;align-items:center;gap:8px}
.page-head .account .alerts-bell{position:relative;width:var(--button-height);height:var(--button-height);min-height:0;flex:none;border:0;border-radius:50%;padding:0;background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.alerts-bell[hidden]{display:none}
.page-head .account .alerts-bell:hover{background:var(--hover)}
.page-head .account .alerts-bell[aria-expanded="true"]{box-shadow:0 0 0 2px var(--accent);outline:none}
.alerts-bell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.alerts-dot{position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--danger)}
.alerts-dot[hidden]{display:none}
.alerts-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:360px;max-width:calc(100vw - 32px);max-height:min(560px,calc(100dvh - 90px));overflow:auto;background:var(--surface);border-radius:var(--radius-panel);padding:16px;box-shadow:var(--shadow-dialog,0 8px 28px #0000001f)}
.alerts-pop[hidden]{display:none}
.alerts-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;min-height:28px}
.alerts-head b{font-size:16px}
.alerts-head>div{display:flex;align-items:center;gap:2px}
.alerts-pop .alerts-head button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;padding:4px;min-height:0;cursor:pointer}
.alerts-pop .alerts-head button:hover{color:var(--secondary)}
.alerts-pop .alerts-gear{display:grid;place-items:center;width:28px;height:28px}
.alerts-gear svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.alerts-pop .alerts-head .alerts-back{color:var(--ink);font-weight:600;padding-left:0}
.alerts-list{display:flex;flex-direction:column;gap:6px}
.alerts-item{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start;padding:10px;border-radius:12px;background:var(--inset)}
.alerts-item.read{background:transparent}.alerts-item.read .alerts-t{color:var(--secondary)}
.alerts-k{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.alerts-k svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.alerts-k.warn{background:var(--dot-warn-bg);color:var(--dot-warn-text)}
.alerts-k.bad{background:var(--danger-bg);color:var(--danger)}
.alerts-k.ok{background:var(--dot-ok-bg);color:var(--dot-ok-text)}
.alerts-t{font-size:14px;font-weight:600;line-height:1.4}
.alerts-s{font-size:12px;color:var(--secondary);margin-top:2px;line-height:1.5;white-space:pre-line}
.alerts-item time{font-size:11px;color:var(--muted);white-space:nowrap}
.alerts-go{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--ink);text-decoration:none}
.alerts-go:hover{text-decoration:underline}
.alerts-empty{margin:18px 0;text-align:center;font-size:13px;color:var(--muted)}
.alerts-foot{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.alerts-set h3{margin:0 0 4px;font-size:16px}
.alerts-sub{margin:0 0 14px;font-size:13px;color:var(--secondary)}
.alerts-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.alerts-field>span{font-size:13px;font-weight:600}
.alerts-field input{border:0;background:var(--inset);border-radius:10px;padding:11px 12px;font:inherit;font-size:13px;color:var(--ink);min-height:0;width:100%}
.alerts-field small{font-size:12px;color:var(--muted);line-height:1.5}
.alerts-pop .alerts-clear{border:0;background:transparent;padding:0;min-height:0;font:inherit;font-size:12px;color:var(--danger);cursor:pointer}
.alerts-checks{display:flex;flex-direction:column;gap:9px;margin:-4px 0 14px}
.alerts-checks label{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}
.alerts-checks input{appearance:none;-webkit-appearance:none;flex:none;margin:0;padding:0;border:0;width:18px;min-width:18px;height:18px;min-height:0;border-radius:5px;background:var(--inset);display:grid;place-items:center;cursor:pointer}
.alerts-checks input:checked{background:var(--solid)}
.alerts-checks input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-solid);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.alerts-msg{margin:0 0 10px;font-size:12px;color:var(--secondary)}
.alerts-msg:empty{display:none}
.alerts-acts{display:flex;gap:8px;justify-content:flex-end}
.alerts-pop .alerts-acts button{border:0;border-radius:999px;padding:10px 16px;min-height:0;font:inherit;font-size:13px;font-weight:600;background:var(--inset);color:var(--ink);cursor:pointer}
.alerts-pop .alerts-acts .alerts-save{background:var(--solid);color:var(--on-solid)}
.alerts-pop .alerts-acts button:disabled{opacity:.45;cursor:default}
@media(max-width:760px){.page-head .account{gap:6px}.page-head .account .alerts-bell{width:40px;height:40px;min-height:0;padding:0}}
/* 좁은 화면에서도 단추 바로 아래 360px 로(문의 창과 같게) — 600px 이하에서만 양옆을 채운다. 위치는 단추 밑으로 떨어지게(2026-10-19 사용자: 단추를 덮고 너무 넓었다) */
@media(max-width:600px){.alerts-pop{position:fixed;top:76px;right:12px;left:12px;width:auto;max-width:none}}
.alerts-done{margin-top:4px;font-size:12px;font-weight:600;color:var(--dot-ok-text)}
/* 영상이 있는 알림 — 회색 칸에 영상 제목 · 채널 · 공개 시각(0149) */
.alerts-box{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--surface)}
.alerts-item.read .alerts-box{background:var(--inset)}
.alerts-vt{font-size:13px;font-weight:600;line-height:1.45;color:var(--ink)}
.alerts-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--secondary)}
.alerts-meta img{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none}
.alerts-meta span{color:var(--muted)}

/* 새 알림 한 줄 — 종 왼쪽에 종과 같은 높이의 알약이 5초 나왔다 들어간다(2026-10-12) */
.alerts-line{position:fixed;z-index:300;display:flex;align-items:center;gap:8px;padding:0 16px 0 8px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:650;white-space:nowrap;max-width:min(520px,calc(100vw - 150px));cursor:pointer;
 opacity:0;transform:translateX(18px) scale(.96);transform-origin:right center;pointer-events:none;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .24s,background .15s}
.alerts-line.on{opacity:1;transform:none;pointer-events:auto}
.alerts-line:hover{background:var(--hover)}
.alerts-line .alerts-k{width:28px;height:28px;border-radius:50%;flex:none}
.alerts-line .alerts-k svg{width:15px;height:15px}
.alerts-line-t{overflow:hidden;text-overflow:ellipsis}
.alerts-bell.ring svg{animation:alerts-ring .8s ease-in-out;transform-origin:50% 10%}
@keyframes alerts-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.alerts-line{transition:opacity .2s;transform:none}.alerts-bell.ring svg{animation:none}}

/* 새 문의 알림(0200 · 관리자만) — 문의 단추와 같은 말풍선, 보라 */
.alerts-k.ask{background:var(--accent-soft);color:var(--accent)}
button.alerts-go{border:0;background:none;padding:0;min-height:0;font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}