@charset "utf-8";

/****************************************************************************************************************************************
레이어 팝업 공통
*****************************************************************************************************************************************/
#layerPopup {display: none; position: fixed; left: 0; right:0; top: 0; bottom:0; z-index: 9999; width: 100%; height: 100%;}
.layer-bg {position:relative; padding:30px 0; width:100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background:rgba(0,0,0,0.7); overflow-y: auto;}
.layer-wrap {position: relative;}
.layer-close {position: absolute; top:10px; right:15px; z-index: 9; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: var(--bg-layer1); border-radius: 50%; cursor: pointer;}
.layer-close > svg {font-size:20px; color:var(--gray-color);}

@media (hover: hover) and (pointer: fine) {
    .layer-close > svg:hover {color: var(--color);}
}

.layer-con {position: relative;}

/****************************************************************************************************************************************
로그인과 회원가입 팝업
*****************************************************************************************************************************************/
.intro-wrap {position:relative; margin:0 auto; padding:0; width: 440px; background:var(--bg-layer1); border-radius: 15px; overflow: hidden;}
.intro-topBg {position:relative; aspect-ratio: 440 / 135; width: 100%; object-fit: cover;}
.intro-logo {position: absolute; left:20px; top:40px; z-index: 1;}
.intro-logo > img {width: 170px;}

/* intro-txt */
.intro-txt {position:relative; margin:0 auto; padding:30px 15px 10px 15px; width: 100%; text-align: center; font-size: 16px; font-weight: 600; color:var(--color);}

/* intro-form */
.intro-form {position:relative; margin:0 auto; padding:10px 40px 40px 40px; width: 100%;}
ul.intro-list {position: relative; margin:0 auto; padding:0; width: 100%;}
ul.intro-list > li {position: relative; margin:0 0 5px 0; padding: 0; width: 100%}
ul.intro-list > li > label {display: block; margin:0 auto; padding:5px; width: 100%; text-align: left; font-weight: 500; color:var(--secondary);} 
ul.intro-list > li > input {padding:0 15px; width: 100%; line-height: 45px; color:var(--color); background: var(--bg-layer1); border: 1px var(--border2-color) solid; border-radius: 6px;}
ul.intro-list > li > input:focus {outline: none;}
ul.intro-list > li > input::placeholder {color:var(--border2-font);}

ul.join-list > li > input {line-height: 35px;}
ul.join-list > li > select {padding:0 15px; width: 100%; height: 45px; line-height: 35px; color:var(--color); background: var(--bg-layer1); border: 1px var(--border2-color) solid; border-radius: 6px;}
ul.join-list > li > select:invalid {color:var(--border2-font);}
ul.join-list > li > select:focus {outline: none;}
ul.join-list > li > select > option {color: var(--color); background: var(--bg-layer1);}

/* join */
.check-list {display: flex; justify-content: space-between; align-items: center;}
.check-list > input {padding:0 15px; width: calc(100% - 110px); line-height: 35px; color:var(--color); background: var(--bg-layer1); border: 1px var(--border2-color) solid; border-radius: 6px;}
.check-list > input:focus {outline: none;}
.check-list > input::placeholder {color:var(--border2-font);}
.check-list > button {width: 100px; line-height: 35px; font-weight: 600; color:var(--white-color); background: var(--blue-bg); border-radius: 6px;}

.intro-btns {position: relative; margin:20px auto 0 auto; padding:0; width: 100%; display: flex; gap:5px; justify-content: space-between; align-items: center;}
.intro-btns > button {position: relative; margin:0; padding: 0; width: 100%; height: 45px; font-weight: 600; border-radius: 6px;}
.intro-login {color:var(--white-color); background:var(--red-bg);}
.intro-join {color:var(--white-color); background:var(--blue-bg);}

@media (hover: hover) and (pointer: fine) {
    .check-list > button:hover,
    .intro-btns > button:hover {filter: brightness(120%);}
}

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 470px) {
    .layer-wrap {width: 100%;}
    .layer-con {padding:0 20px;}
    .layer-close {width:35px; height:35px; top:5px; right: 25px;}
    .layer-close > svg {font-size: 18px;}

    .intro-wrap {width: 100%;}
    .intro-form {padding: 10px 20px 30px 20px;}
    
    .intro-logo {top:25px;}
    .intro-logo > img {width: 130px;}

    .intro-txt {font-size: 14px;}

    ul.intro-list > li > label {font-size: 13px;}
    ul.intro-list > li > input {height: 35px; line-height: 35px; font-size: 14px;}

    .intro-btns > button {height: 40px; line-height: 40px;}
}/* 미디어쿼리문 끝 */