
.bph-bell-wrap{position:relative;display:inline-flex;align-items:center}
.bph-bell{position:relative;width:50px;height:50px;border:1px solid #e5e9f0;background:#fff;border-radius:10px;color:#334155;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
@media(max-width:640px){.bph-bell{width:42px;height:42px;font-size:16px}}
.bph-bell:hover{border-color:#fbbf8f;color:#fa782a;background:#fff9f5}
.bph-bell-wrap.open .bph-bell{border-color:#fa782a;color:#fa782a;background:#fff9f5}
.bph-bell-c{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#fa782a;color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;border:2px solid #fff}
.bph-noti{display:none;position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 24px));background:#fff;border:1px solid #e8ecf3;border-radius:16px;overflow:hidden;z-index:99997;box-shadow:0 20px 50px rgba(15,23,42,.16)}
.bph-bell-wrap.open .bph-noti{display:block;animation:bphNotiIn .16s ease}
@keyframes bphNotiIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.bph-noti-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid #f1f5f9}
.bph-noti-head b{font-size:14px;color:#0f172a;font-weight:700}
.bph-noti-yeni{font-size:11px;font-weight:700;color:#fa782a;background:#fff1e7;border-radius:999px;padding:3px 9px}
.bph-noti-list{max-height:min(60vh,380px);overflow-y:auto}
.bph-ni{display:flex;align-items:flex-start;gap:11px;padding:12px 15px;border-bottom:1px solid #f4f6fa;cursor:pointer;transition:.12s;position:relative}
.bph-ni:last-child{border-bottom:0}
.bph-ni:hover{background:#f8fafc}
.bph-ni-ic{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#f1f5f9;color:#94a3b8;display:inline-flex;align-items:center;justify-content:center;font-size:14px;margin-top:1px}
.bph-ni.unread{background:#fff8f3}
.bph-ni.unread:hover{background:#fff2e9}
.bph-ni.unread .bph-ni-ic{background:#ffece0;color:#fa782a}
.bph-ni-tx{min-width:0;flex:1}
.bph-ni-tx b{display:block;font-size:13px;color:#1e293b;font-weight:600;margin-bottom:2px;line-height:1.3}
.bph-ni.unread .bph-ni-tx b{font-weight:700;color:#0f172a}
.bph-ni-msg{font-size:12px;color:#64748b;display:block;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bph-ni-time{font-size:10.5px;color:#a3adbb;display:block;margin-top:4px}
.bph-ni-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#fa782a;margin-top:6px}
.bph-ni-bos{padding:34px 16px;text-align:center;color:#94a3b8}
.bph-ni-bos i{font-size:26px;display:block;margin-bottom:8px;opacity:.7}
.bph-ni-bos span{font-size:12.5px}
.bph-noti-foot{padding:9px 14px;border-top:1px solid #f1f5f9;text-align:center;background:#fbfcfe}
.bph-noti-readall{background:none;border:0;color:#fa782a;font-size:12px;font-weight:600;cursor:pointer;padding:4px 6px}
.bph-noti-readall:hover{text-decoration:underline}
.bph-noti-foot:has(.bph-noti-readall[hidden]){display:none}
@media(max-width:520px){.bph-noti{position:fixed;top:auto;left:12px;right:12px;width:auto}}
