@charset "UTF-8";

:root {
    --dialog-red: #cc5a5a;
    --dialog-blue: #2f80ed;
    --dialog-gray: #969699;
    --dialog-default-confirm: var(--dialog-blue);
    --dialog-default-cancel: var(--dialog-gray);
}

.dialog, .dialog > * { box-sizing: border-box; }
.dialog { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; }
.dialog.confirm { background: rgba(0, 0, 0, .7); backdrop-filter: blur(1px); }
.dialog.alert { background: transparent; backdrop-filter: blur(0); }
.dialog.inactive { display: none; }

.dialog > .dialog-wrap { position: relative; top: 50%; left: 50%; margin: 0; padding: 24px; border-radius: 24px; background: #fff; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 12px; }
.dialog .dialog-title { height: 32px; line-height: 32px; font-size: 20px; color: #212529; font-weight: 700; }
.dialog .dialog-contents { margin-top: 12px; max-height: 30vh; line-height: 1.5; font-size: 16px; color: #444; overflow-y: auto; word-break: break-all; }
.dialog .dialog-action { margin-top: 24px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; text-align: right; }

.dialog .dialog-action button { padding: 0 16px; height: 32px; line-height: 30px; display: inline-flex; border-radius: 16px; color: #fff; font-size: 16px; font-weight: 500; border: 0; outline: 0; letter-spacing: 1px; transition: opacity 0.1s ease; }

.dialog .dialog-action .cancel { background: var(--btn-cancel-bg, var(--dialog-default-cancel)); }
.dialog .dialog-action .confirm { background: var(--btn-confirm-bg, var(--dialog-default-confirm)); }

.dialog.bg-red-confirm { --btn-confirm-bg: var(--dialog-red); }
.dialog.bg-blue-confirm { --btn-confirm-bg: var(--dialog-blue); }
.dialog.bg-gray-confirm { --btn-confirm-bg: var(--dialog-gray); }

.dialog.bg-red-cancel { --btn-cancel-bg: var(--dialog-red); }
.dialog.bg-blue-cancel { --btn-cancel-bg: var(--dialog-blue); }
.dialog.bg-gray-cancel { --btn-cancel-bg: var(--dialog-gray); }

.dialog .inactive { display: none !important; }

/* 모바일 */
@media screen and (max-width: 1024px) { 
    .dialog > .dialog-wrap { top: 20%; left: 50%; width: 90vw; max-width: 320px; }
    .dialog .dialog-action button:active { opacity: 0.7; }
}

/* PC */
@media screen and (min-width: 1025px) { 
    .dialog > .dialog-wrap { top: 20%; left: 50%; width: 320px; }
    .dialog .dialog-action button:hover { opacity: 0.8; cursor: pointer; }
}