/* bact.css: 알림 (bact.js). theme.css 다음. 틀은 흑백, 코랄은 안 읽은 개수 배지에만 */

/* 맨 위 막대(휴대폰)의 종 버튼: 설정 버튼과 같은 모양 */
.mtop .act-bell{position:relative;margin-right:8px}
.act-badge{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--c-coral);color:#fff;font-size:10.5px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--surface);pointer-events:none}
/* 사이드(PC)의 알림 줄: 설정 줄 위 */
.side-set .act-sbtn{position:relative}
.side-set .act-sbtn .act-badge{position:static;margin-left:auto;box-shadow:none}

/* 알림 화면 */
.act-scr{max-width:720px;word-break:keep-all}
.act-flt{margin:4px 0 16px}
.act-flt .seg{max-width:100%}
.act-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.act-card{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.act-hd{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;padding:14px 16px 12px;border:0;border-bottom:1px solid var(--surface-3);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.act-tg{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-3)}
.act-tg em{font-style:normal;font-weight:800;color:var(--ink)}
.act-tt{display:flex;align-items:center;gap:8px;min-width:0}
.act-tt b{flex:1;min-width:0;font-size:16px;font-weight:800;line-height:22px;letter-spacing:-.02em;overflow-wrap:anywhere}
.act-tt .ico{flex:none;color:var(--ink-4)}
.act-ts{font-size:13px;color:var(--ink-2);line-height:19px}
@media (hover:hover){.act-hd:hover .act-tt b{text-decoration:underline;text-underline-offset:3px}}
.act-ls{list-style:none;margin:0;padding:6px 16px 8px}
.act-ls>li{display:flex;align-items:flex-start;gap:10px;padding:8px 0}
.act-ls>li+li{border-top:1px solid var(--line-2)}
.act-av{flex:none;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;line-height:1}
.act-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.act-ch{font-size:14px;line-height:20px;color:var(--ink-2)}
.act-ch b{font-weight:800;color:var(--ink);margin-right:2px}
.act-tx small{font-size:12px;line-height:17px;color:var(--ink-3)}
.act-ls>li.new .act-ch{color:var(--ink);font-weight:600}
.act-ls>li.new .act-tx small::after{content:"새 알림";margin-left:6px;font-weight:800;color:var(--ink)}
.act-ls>li.act-more{display:block;font-size:12.5px;color:var(--ink-3);padding:8px 0 4px}
.act-card.new{border-color:var(--ink-4)}
.act-empty{margin:24px 0 8px;padding:28px 18px;border:1px solid var(--line);border-radius:14px;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.6}
.act-empty b{display:block;color:var(--ink);font-size:15px;font-weight:800;margin-bottom:4px}
.act-empty p{margin:0}
.act-mbtn{margin-top:12px}
.act-note{margin:16px 0 8px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
@media (max-width:767px){
  .act-hd{padding:12px 14px 10px}
  .act-ls{padding:4px 14px 6px}
  .act-tt b{font-size:15px}
}