/* 알림 · 확인 모달 — 사이트 디자인. 동작은 관리영역과 공용 /js/dialog.js (sszAlert · sszConfirm)
   사이트 화면 · 처리 응답 화면 · 옛 팝업 화면(이메일 상담 · 입금 안내)이 함께 쓴다 — tokens.css 만 있으면 된다 (dialog_head())
   확인은 보라 확정 단추, 취소는 흰 단추, 되돌릴 수 없는 확인은 빨강 */
@layer components {
    .ssz-dialog { width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--glass-edge); border-radius: 24px; background: linear-gradient(160deg, var(--white-90) 0%, var(--white-70) 100%); color: var(--text); font-family: var(--sans); box-shadow: inset 0 1px 0 var(--white-95), inset 0 0 0 1px var(--white-25), 0 30px 60px -28px var(--shade-45), var(--shadow); overflow: auto; -webkit-backdrop-filter: blur(5px) saturate(180%); backdrop-filter: blur(5px) saturate(180%); }   /* 유리 (2026-10-14 확정: 흰 면 90 → 70 · 흐림 5 · 덮개 20) — 반투명 흰 면 + 위 빛줄 + 옅은 흐림. 흐림이 세면 뒤가 회색으로 뭉개져 어둡기만 하다 — 뒤 글자가 비쳐 읽힐 만큼 */
    .ssz-dialog::backdrop { background: rgba(34, 27, 41, .2); }   /* 덮개는 옅게 — 유리 너머 색이 보이게 */
    .ssz-dialog[open] { animation: ssz-dialog-in .18s ease-out; }
    .ssz-dialog[open]::backdrop { animation: ssz-dialog-fade .18s ease-out; }
    @keyframes ssz-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
    @keyframes ssz-dialog-fade { from { opacity: 0; } }
    .ssz-dialog__panel { padding: 26px 24px 20px; }
    .ssz-dialog__title { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -0.01em; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
    .ssz-dialog__body { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
    .ssz-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
    .ssz-dialog__btn { min-width: 92px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; color: var(--ink); background: var(--white-66); box-shadow: inset 0 1px 0 var(--white-90), 0 2px 5px -3px var(--plum-35); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background-color .2s ease; }
    .ssz-dialog__btn:hover { background: var(--white-90); }
    .ssz-dialog__btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
    .ssz-dialog__btn--ok { color: var(--white); background: var(--grad-strong); box-shadow: inset 0 1px 0 var(--white-25), 0 2px 5px -3px var(--plum-50); }
    .ssz-dialog__btn--ok:hover { background: linear-gradient(180deg, #7c5180 0%, #634566 100%); }
    .ssz-dialog--danger .ssz-dialog__btn--ok, .ssz-dialog--danger .ssz-dialog__btn--ok:hover { background: var(--grad-red); }   /* 삭제 · 탈퇴처럼 되돌릴 수 없는 확인 */
    @media (max-width: 640px) { .ssz-dialog__actions > .ssz-dialog__btn { flex: 1; } }
    /* 큰 모달 (sszModal) — 폼 · 검색처럼 큰 내용을 페이지 안에. 알림 모달과 같은 유리 · 반경, 머리(제목 · 닫기) + 스크롤 본문 (2026-10-16 새 창 팝업 대체) */
    .ssz-modal { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--glass-edge); border-radius: 24px; background: linear-gradient(160deg, var(--white) 0%, var(--white-95) 100%); color: var(--text); font-family: var(--sans); box-shadow: inset 0 1px 0 var(--white-95), 0 30px 60px -28px var(--shade-45), var(--shadow); overflow: hidden; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }   /* 입력 폼이라 알림 모달보다 짙게 — 뒤 글자가 입력칸 뒤로 비치지 않게 */
    .ssz-modal[open] { display: flex; flex-direction: column; animation: ssz-dialog-in .18s ease-out; }
    .ssz-modal::backdrop { background: rgba(34, 27, 41, .2); }
    .ssz-modal[open]::backdrop { animation: ssz-dialog-fade .18s ease-out; }
    .ssz-modal--wide { width: min(640px, calc(100vw - 32px)); }
    .ssz-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--hair); }
    .ssz-modal__title { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
    .ssz-modal__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; transition: background-color .2s ease; }
    .ssz-modal__close:hover { color: var(--ink); background: var(--white-72); }
    .ssz-modal__close:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
    .ssz-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .ssz-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px 24px 24px; }
    @media (max-width: 640px) {
        .ssz-modal, .ssz-modal--wide { width: 100vw; max-height: calc(100dvh - 24px); margin: auto 0 0; border-bottom: 0; border-radius: 24px 24px 0 0; }   /* 모바일 — 아래에서 올라오는 시트 */
        .ssz-modal__head { padding-left: 16px; }
        .ssz-modal__body { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
    }
    @media (prefers-reduced-motion: reduce) { .ssz-dialog[open], .ssz-dialog[open]::backdrop, .ssz-modal[open], .ssz-modal[open]::backdrop { animation: none; } }
}