@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");

/* (공통) reset */
* { font-family: "Pretendard Variable", Pretendard, sans-serif; box-sizing: border-box; } 
html, body { margin: 0; padding: 0; height: 100%; } 
body { position: relative; } 

h1,h2,h3,h4,h5,p { margin: 0; } 

.display-none { display: none; }

.kakao-button { font-weight: 500; background-color: #FFD000; color: #000 !important; }
.kakao-button:hover { background: #ffda37; color: #000 !important; }

/* (공통) App */
#app { position: relative; margin: 0 auto; width: 100%; height: auto; } 
#app.main { background-color: #ffe000; }
#app.sub { height: 100vh; background-color: #f9f9f9; }

/* (공통) Button Top */
#button-top { opacity: 0; visibility: hidden; position: fixed; right: 1rem; bottom: 1rem; transition: 0.3s; } 
#button-top.active { opacity: 1; visibility: visible; } 
.button-top button { position: relative; font-size: 0px; font-weight: 400; padding: 0px; width: 38px; height: 38px; background: rgba(255, 255, 255, 0.8); color: rgb(207, 210, 215); border: 1px solid rgb(242, 243, 245); border-radius: 50% !important; text-align: center; vertical-align: top; box-sizing: border-box; cursor: pointer; outline: none; } 
.button-top button svg { width: 22px; height: auto; cursor: pointer; }

/* Bootstrap Custom */
.btn-light { background-color: #eee; }

.modal-dialog.alert-modal { justify-content: center; }
.modal-dialog.alert-modal .modal-content { width: 90%; max-width: 320px; }
.modal-dialog.alert-modal .modal-content.small { width: 80%; max-width: 300px; }
.modal-dialog.alert-modal .modal-content .modal-body { padding: 1rem 2rem; }
.modal-dialog.alert-modal .modal-content .modal-body .title { margin-top: 10px; font-size: 20px; font-weight: 500; text-align: center; }
.modal-dialog.alert-modal .modal-content .modal-body .message { padding: 0.5rem 0 0; font-size: 18px; text-align: center; }
.modal-dialog.alert-modal .modal-content .modal-body .message.medium { font-size: 18px !important; color: #555; }
.modal-dialog.alert-modal .modal-content .modal-body .message.small { font-size: 17px !important; color: #555; }
.modal-dialog.alert-modal .modal-content .modal-body .message.bold { font-weight: 500; }
.modal-dialog.alert-modal .modal-content .modal-footer { padding-top: 0; padding-bottom: 1.5rem; justify-content: center; border-top: none; }
.modal-dialog.alert-modal .modal-content .modal-footer button { padding: 0.5rem 2.5rem }

.modal-dialog.desktop-alert-modal { justify-content: center; }
.modal-dialog.desktop-alert-modal .modal-content { width: 90%; max-width: 320px; }
.modal-dialog.desktop-alert-modal .modal-content.small { width: 80%; max-width: 300px; }
.modal-dialog.desktop-alert-modal .modal-content.big { width: 100%; max-width: 350px; }
.modal-dialog.desktop-alert-modal .modal-content .modal-body { padding: 1rem 2rem; }
.modal-dialog.desktop-alert-modal .modal-content .modal-body .title { margin-top: 15px; font-size: 20px; font-weight: 600; text-align: center; }
.modal-dialog.desktop-alert-modal .modal-content .modal-body .message { padding: 0; font-size: 18px; text-align: center; color: #777; }
.modal-dialog.desktop-alert-modal .modal-content .modal-body .message.small { padding: 0.25rem 0 0; font-size: 14px !important; color: #999; }
.modal-dialog.desktop-alert-modal .modal-content .modal-footer { padding-top: 0; padding-bottom: 1.5rem; justify-content: center; border-top: none; }
.modal-dialog.desktop-alert-modal .modal-content .modal-footer button { padding: 0.5rem; width: 45%; }

@media (max-width: 350px) {
  .modal-dialog.alert-modal .modal-content { width: 95%; }
  .modal-dialog.alert-modal .modal-content .modal-body .message { font-size: 16px; }
  .modal-dialog.alert-modal .modal-content .modal-footer button { padding: 0.5rem 2.25rem; font-size: 15px; }
}


/* 디바이스별 블라인드 처리 */
#button-top.ios { display: none !important; }