/* 알림 종 (notice-bell.mjs): the bell in the header, its list and the one-time question about phone notifications.
   Colours come from the page's tokens, so the dark theme follows without twins. */
.notice-bell{position:relative;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;display:inline-grid;place-items:center;background:none;color:var(--ink);flex:none}
.notice-bell:hover{background:var(--green-tint)}
.notice-bell svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.notice-count{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--danger);color:var(--on-danger);font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface,#fff)}
.notice-dialog{width:min(420px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 48px));padding:0;border:1px solid var(--line);border-radius:18px;background:var(--surface,#fff);color:var(--ink);box-shadow:var(--shadow-3,0 20px 60px #0003);overflow:hidden;display:none;flex-direction:column}
.notice-dialog[open]{display:flex}
.notice-dialog::backdrop{background:var(--scrim)}
.nb-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px 18px;border-bottom:1px solid var(--line)}
.nb-head h2{margin:0;font-size:17px}
.nb-close{width:34px;height:34px;min-height:34px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--muted)}
.nb-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nb-push{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.nb-push-text{flex:1;line-height:1.45}
.nb-push-toggle{flex:none;min-height:32px;padding:5px 12px;border:1px solid var(--line-strong,var(--line));border-radius:999px;background:var(--surface,#fff);color:var(--ink);font-size:12.5px;font-weight:600}
.nb-push-toggle.primary{border-color:var(--green);background:var(--green);color:var(--on-accent,#fff)}
.nb-list{overflow:auto;padding:6px 0}
.nb-item{display:flex;gap:12px;padding:11px 18px;color:var(--ink);text-decoration:none;align-items:flex-start}
.nb-item:hover{background:var(--green-tint)}
.nb-item.unread{background:var(--green-soft,#eaf2ed)}
.nb-icon{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green-tint);color:var(--green)}
.nb-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nb-like .nb-icon,.nb-like-comment .nb-icon{color:var(--danger-text)}
.nb-at{font-size:14px}
.nb-body{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13.5px;line-height:1.45}
.nb-body small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nb-empty{margin:0;padding:22px 18px;color:var(--muted);font-size:13px;line-height:1.6}
.nb-nudge{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;width:min(440px,calc(100vw - 24px));display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);color:var(--ink);box-shadow:var(--shadow-3,0 20px 60px #0003)}
.nb-nudge p{margin:0;font-size:13.5px;line-height:1.5}
.nb-nudge-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--green-tint);color:var(--green)}
.nb-nudge-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nb-nudge-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.nb-nudge-actions button{min-height:34px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);font-size:13px;font-weight:600}
.nb-nudge-actions .nb-yes{border-color:var(--green);background:var(--green);color:var(--on-accent,#fff)}
/* Phones: the bell joins the theme switch, the language and the account menu on one line. */
@media (max-width:420px){
 body:not(.reader-mode) .site-header{gap:4px}
 body:not(.reader-mode) .site-header .language-link,body:not(.reader-mode) .site-header .account-menu>summary{padding-inline:9px}
 .notice-bell{width:34px;height:34px;min-height:34px}
 /* The 작곡실's header is full on a phone: there the bell shows only with something new. */
 .studio-header .notice-bell:not(.has-unread){display:none}
}