@charset "UTF-8";

.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: 14px; 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; border-radius: 16px; color: #fff; font-size: 14px; font-weight: 500;}
.dialog .dialog-action .cancel{background: #969699;}
.dialog .dialog-action .confirm{background: #094c76;}
.dialog .inactive{display: none;}

/* 모바일 */
@media screen and (max-width: 1024px) {
.dialog > .dialog-wrap{top: 20%; left: 50%; width: 90vw; max-width: 320px;}
.dialog .dialog-action .cancel:active{background: #c8c8cc;}
.dialog .dialog-action .confirm:active{background: #1679b7;}
}

/* PC */
@media screen and (min-width: 1025px) {
.dialog > .dialog-wrap{top: 20%; left: 50%; width: 320px;}
.dialog .dialog-action .cancel:hover{background: #c8c8cc;}
.dialog .dialog-action .confirm:hover{background: #1679b7;}
}