/* Lucian UX/UI Prompt #023 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#023 */
/* The saved state stays visible; opening details never changes notification settings. */
.operator-notifications .operator-notifications-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
.operator-notifications .operator-notifications-heading h3{margin:0}
.operator-notifications .notification-state-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;margin-top:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.operator-notifications .notification-state-grid>div{min-width:0}
.operator-notifications .notification-state-grid>div>span{display:block;margin-bottom:4px;color:var(--muted);font-size:12px;line-height:1.6}
.operator-notifications .notification-state-grid strong{font-weight:400;color:var(--deep)}
.operator-notifications [data-notification-details]{margin-top:18px;border-block:1px solid var(--line)}
.operator-notifications [data-notification-details]>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;list-style:none;color:var(--deep);font-size:15px;font-weight:500;cursor:pointer}
.operator-notifications [data-notification-details]>summary::-webkit-details-marker{display:none}
.operator-notifications [data-notification-details]>summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.operator-notifications [data-notification-details]>summary:hover{color:var(--brand)}
.operator-notifications .notification-details-chevron{display:inline-flex;width:18px;height:18px;flex:0 0 18px;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.22,.68,0,1)}
.operator-notifications [data-notification-details][open] .notification-details-chevron{transform:rotate(180deg)}
.operator-notifications [data-notification-details]>:not(summary){padding-bottom:20px}
.operator-notifications [data-notification-details] form{margin-top:12px}
.operator-notifications input[name="enabled"]{accent-color:var(--brand);width:18px;height:18px;flex-shrink:0}
.operator-notifications [data-notification-discard]{min-height:44px;min-width:44px;max-width:100%;white-space:normal}
.operator-notifications :is([data-notification-enabled-state],[data-notification-scope-state],[data-notification-provider-state],[data-notification-scheduler-state]){display:inline-block;font-size:14px;line-height:1.7;color:var(--deep);overflow-wrap:anywhere}
.operator-notifications :is([data-notification-enabled-state],[data-notification-provider-state],[data-notification-scheduler-state])[data-state="off"],.operator-notifications :is([data-notification-enabled-state],[data-notification-provider-state],[data-notification-scheduler-state])[data-state="unknown"]{color:var(--muted)}
.operator-notifications [data-notification-provider-state][data-state="missing"]{color:var(--danger)}
.operator-notifications [data-notification-draft]{margin-top:14px;padding:10px 14px;border:1px solid var(--line);border-radius:4px;background:var(--soft);color:var(--deep);font-size:14px;line-height:1.7}
.operator-notifications [data-notification-history]{margin-top:16px;border-block:1px solid var(--line)}
.operator-notifications [data-notification-history]>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 0;list-style:none;color:var(--deep);font-size:15px;font-weight:500;cursor:pointer}
.operator-notifications [data-notification-history]>summary::-webkit-details-marker{display:none}
.operator-notifications [data-notification-history][open] .notification-details-chevron{transform:rotate(180deg)}
.operator-notifications [data-notification-history]>summary:hover{color:var(--brand)}
.operator-notifications [data-notification-history]>summary:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.operator-notifications [data-notification-history-count]{margin-left:8px;color:var(--muted);font-size:14px;font-weight:400;white-space:nowrap}
.operator-notifications [data-notification-recent]{margin:0;padding:0 0 12px}
.operator-notifications [data-notification-recent]>.notification-history-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.operator-notifications [data-notification-recent]>.notification-history-row:last-child{border-bottom:0}
.operator-notifications .notification-history-content{flex:1 1 240px;min-width:0}
.operator-notifications .notification-history-state{margin:0;color:var(--deep);font-size:14px;line-height:1.65}
.operator-notifications .notification-history-time{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.operator-notifications :is([data-notification-summary],[data-notification-freshness],[data-notification-history-count],.notification-history-time time){font-variant-numeric:tabular-nums}
.operator-notifications .notification-history-open{flex:0 0 auto;min-height:44px;min-width:44px;color:var(--deep);white-space:normal}
@supports (interpolate-size:allow-keywords) and selector(details::details-content){
  .operator-notifications [data-notification-details]{interpolate-size:allow-keywords}
  .operator-notifications [data-notification-details]::details-content{overflow:clip;block-size:0;opacity:0;transition:block-size .2s cubic-bezier(.22,.68,0,1),opacity .16s ease,content-visibility .2s allow-discrete}
  .operator-notifications [data-notification-details][open]::details-content{block-size:auto;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .operator-notifications .notification-details-chevron,.operator-notifications [data-notification-details]::details-content{transition:none}
}
@media(max-width:760px){
  .operator-notifications .notification-state-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
}

@media(max-width:760px){
 .operator-notifications .notification-state-grid>div>span{font-size:14px}
}

#operator-notifications-panel{scroll-margin-top:16px}
#operator-notifications-panel:focus-visible{outline:2px solid var(--brand);outline-offset:4px}

/* Reserve the pending marker so a quiet read does not move the last checked time. */
.operator-notifications [data-notification-freshness]::after{content:"갱신 중";display:inline-block;min-inline-size:4em;margin-inline-start:.75em;color:var(--muted);white-space:nowrap;visibility:hidden}
.operator-notifications [data-notification-freshness][data-refreshing="true"]::after{visibility:visible}

/* Keep short saved-state terms together in narrow status columns. */
.operator-notifications .notification-state-grid strong{word-break:keep-all}