@charset "UTF-8";

/* Reset */
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Pretendard Variable", "Noto Sans KR";
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

* {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    outline: 0;
}

img {

    height: auto;
    vertical-align: top;
    border: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

form {
    display: inline;
}

input {
    font-family: inherit;
    outline:none;
}

select {
    font-family: inherit;
}

textarea {
    font-family: inherit;
    resize: vertical;
    outline:none;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    outline: 0;
}

embed, iframe, object {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    outline: 0;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

input {
    font-family: inherit;
}

select {
    font-family: inherit;
}

textarea {
    font-family: inherit;
    resize: vertical;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    outline: 0;
}

/* Fonts */
@font-face {
    font-display: swap;
    font-family: Pretendard;
    font-weight: 200;
    src: url("../../fonts/Pretendard-ExtraLight.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: Pretendard;
    font-weight: 300;
    src: url("../../fonts/Pretendard-Light.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: Pretendard;
    font-weight: 400;
    src: url("../../fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: Pretendard;
    font-weight: 500;
    src: url("../..fonts/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: Pretendard;
    font-weight: 600;
    src: url("../../fonts/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: Pretendard;
    font-weight: 700;
    src: url("../../fonts/Pretendard-Bold.woff2") format("woff2");
}
@font-face {
    font-family: Pretendard;
    font-weight: 800;
    src: url("../../fonts/Pretendard-ExtraBold.woff2") format("woff2");
}
@font-face {
    font-family: Pretendard;
    font-weight: 900;
    src: url("../../fonts/Pretendard-Black.woff2") format("woff2");
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: var(--100vh);
    font-family: "Pretendard", sans-serif;
    letter-spacing: -0.05em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    word-wrap: break-word;
    word-break: keep-all;
    background:#a9a9a9;
}


body::-webkit-scrollbar {width:10px;background-color:rgba(255,255,255,0.5);}
body::-webkit-scrollbar-thumb { background-color:#ccc;}
input {outline: none;}
ul,li{list-style:none;}
.hidden {display:none;}


/* 알럿 */
.alert-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;justify-content: center;align-items:center;}
.alert-container .inner {width:400px;background:#eee;color:#232323;font-weight:normal;padding:20px;margin:20px;position:relative;border-radius:5px;}
.alert-container .inner h4 {width:100%;position:absolute;border-top-right-radius:10px;top:20px;left:20px;}
.alert-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
.alert-container .inner .message {padding:20px;min-height:160px;display:flex;justify-content: center;align-items:center;font-size:0.86rem;color:#232323;}
.alert-container .inner .btns {display:block;text-align:right;font-size:0.86rem;position:absolute;bottom:0px;left:0px;width:100%;padding:20px;}
.alert-container .inner .btns .btn-confirm-alert {margin-left:auto;background:#333;color:#fff;padding:6px 12px;border-radius:5px;}

.confirm-container {z-index:999;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;justify-content: center;align-items:center;}
.confirm-container .inner {width:400px;background:#eee;color:#232323;font-weight:normal;padding:20px;position:relative;margin:20px;border-radius:5px;}
.confirm-container .inner h4 {width:100%;position:absolute;border-top-right-radius:10px;top:20px;left:20px;}
.confirm-container .inner h4 .close-alert {position:absolute;right:10px;top:0px;}
.confirm-container .inner .btn-x-close {color:#fff;position:absolute;right:10px;top:10px;}
.confirm-container .inner .message {padding:20px;min-height:160px;display:flex;justify-content: center;align-items:center;font-size:15px;color:#232323;line-height:24px;}
.confirm-container .inner .login {display:flex;justify-content: center;align-items:center;height:40px;}
.confirm-container .inner .login .login {background:#121212;color:#fff;padding:7px 14px;display:flex;justify-content: center;align-items:center;width:110px;font-size:13px;height:100%;}
.confirm-container .inner .login .join {background:#1348d5;color:#fff;padding:7px 14px;display:flex;justify-content: center;align-items:center;width:110px;margin-left:10px;font-size:13px;height:100%;}
.confirm-container .inner .btns {display:block;text-align:right;font-size:0.86rem;position:absolute;bottom:0px;left:0px;}
.confirm-container .inner .btns a {}
.confirm-container .inner .btns .btn-confirm-confirm {margin-left:auto;background:#333;color:#fff;padding:6px 12px;border-radius:5px;}
.confirm-container .inner .btns .btn-confirm-close {margin-left:auto;margin-left:6px;background:#ddd;color:#444;padding:6px 12px;border-radius:5px;}

.toaster-container {position: fixed;z-index: 1000;display: flex;flex-direction: column;gap:5px;}
.toaster-box {color: white;background-color:#211C84;padding: 13px 30px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);ont-size: 14px;position: relative;display: flex;align-items: center;justify-content: space-between;opacity: 0.95;transition: all 0.3s ease-in-out;min-width:200px;text-align:center;}
.toaster-box.info-toast {color:#000;}
.toaster-close {margin-left: 0px;cursor: pointer;color:#fff;position:absolute;top:10px;right:10px;font-size:16px;}
.toaster-box.info-toast .toaster-close {color:#000;}

/* 위치 설정 */
.toaster-container.top-center { top: 10px; left: 50%; transform: translateX(-50%); }
.toaster-container.top-right { top: 10px; right: 10px; }
.toaster-container.bottom-right { bottom: 10px; right: 10px; }
.toaster-container.bottom-left { bottom: 10px; left: 10px; }


/* 📌 슬라이드 다운 효과 */
.slide-down {
    transform: translateY(-20px);
    opacity: 0;
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 📌 슬라이드 업 효과 */
.slide-up {
    animation: slideUp 0.3s ease-in forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/* 추가사항 */
.hidden {display:none;}
.top-banner .form-checkbox .ico:before {left:3px;top:3px;}
.form-checkbox input:checked ~ .ico {background-image:url("../img/ic_circle_chkbox_off.svg") no-repeat 0 0;background-color:var(--color-point) !important;}