/* =========================
    LOGIN
========================= */


.login-page {

    display:flex;
    min-height:100vh;
    background:#ffffff;

    font-family:'Galmuri', sans-serif;

}


/* 왼쪽 */

.login-section {

    width:50%;
    padding:40px 80px;

}


.login-logo {

    color:#20CD8D;

    font-size:32px;
    font-weight:bold;

}



.login-box {

    width:545px;

    margin-top:70px;

    margin-left:70px;

}



.login-box h1 {

    font-size:35px;

    color:#222;

    margin-bottom:10px;

}



.login-subtitle {

    color:#999;

    font-size:20px;

    margin-bottom:45px;

}




.input-box {

    height:55px;

    border:1px solid #aaa;

    border-radius:10px;

    display:flex;

    align-items:center;

    padding:0 20px;

    margin-bottom:15px;

}


.input-icon {

    color:#aaa;

    margin-right:15px;

}



.input-box input {

    flex:1;

    border:none;

    outline:none;

    font-size:18px;

}



.eye-btn {

    border:none;

    background:none;

    cursor:pointer;

}



.login-option {

    display:flex;

    justify-content:space-between;

    margin:35px 0;

    color:#888;

}



.login-option a {

    color:#888;

    text-decoration:none;

}



.login-btn {

    width:100%;

    height:55px;

    background:#20CD8D;

    color:white;

    border:none;

    border-radius:10px;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

}



.signup-text {

    text-align:center;

    margin:25px 0;

    color:#999;

}



.signup-text a {

    color:#20CD8D;

    font-weight:bold;

}


/* 오른쪽 */

.intro-section {

    width:50%;

    background:#fcfffd;

    text-align:center;

    padding-top:50px;

}



.login-character {

    width:220px;

}



.intro-section h2 {

    margin-top:30px;

    color:#777;

    font-size:24px;

    line-height:1.5;

}



.intro-logo {

    color:#20CD8D;

    font-size:45px;

    font-weight:bold;

    margin:40px;

}


.feature-list {

    padding-top:30px;

}



.feature-item {

    display:flex;
    width:400px;
    margin:30px auto;
    transform: translateX(40px);
    text-align:left;
    align-items:center

}

.feature-icon svg {
    width: 48px;
    height: 48px;
    stroke: #20CD8D;
}


.feature-icon {

    width:70px;

    height:70px;

    border:2px solid #20CD8D;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-right:20px;

}



.feature-item h3 {

    margin:0;

    font-size:22px;

}



.feature-item p {

    color:#999;

}

.googlelogo,
.kakaologo {

    width:24px;
    height:24px;

    object-fit:contain;

}

.kakaologo {
    transform: translateX(-25px);
}


/* =========================
    SIGNUP STEP1
========================= */
.signup-page {

    min-height:100vh;

    padding:40px 60px;

    background:white;

    font-family:'Pretendard', sans-serif;

}



/* =====================
   로고
===================== */


.signup-logo {

    font-size:36px;

    font-weight:800;

    color:#20CD8D;

}





/* =====================
   상단 영역
===================== */


.signup-top {

    display:grid;

    grid-template-columns:1fr 1fr;

    width:1000px;

    margin:25px auto 40px;

    align-items:center;

}





/* 왼쪽 영역 */

.signup-top-left {

    display:flex;

    align-items:center;

    gap:20px;

}





.signup-title-area h1 {

    font-size:28px;

    font-weight:700;

    color:#17202A;

    margin:0 0 10px;

}



.signup-title-area p {

    font-size:16px;

    color:#888;

    margin:0;

}





.signup-character {

    width:130px;

}







/* =====================
   STEP 영역
===================== */


.signup-top-right {

    display:flex;

    justify-content:center;

}





.signup-step {

    display:flex;

    align-items:flex-start;

}





/* STEP 아이템 */

.step-item {

    display:flex;

    flex-direction:column;

    align-items:center;

}





.step-circle {
    width:40px;
    height:40px;

    border-radius:50%;

    background:#E5E5E5; 
    color:#999;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:600;
}





.step-item.active > .step-circle {
    background:#20CD8D;
    color:white;
}


.step-item:not(.active) > .step-circle {
    background:#E5E5E5;
    color:#999;
}


.step-text {

    margin-top:12px;

    font-size:14px;

    font-weight:600;

    color:#B8B8B8;

    white-space:nowrap;

}





.step-item.active .step-text {

    color:#20CD8D;

}


/* 원 사이 연결선 */


.step-item-line {

    display:flex;

    align-items:center;

    margin-top:21px;

    margin-left:-3px;
    margin-right:-3px;

}


.step-line {

    width:180px;

    height:3px;

    background:#D9D9D9;

}



/* =====================
   입력 폼
===================== */


.signup-form {

    width:1000px;

    margin:0 auto;

    display:flex;

    gap:100px;

}



.signup-form-left,
.signup-form-right {

    width:50%;

}


.signup-form label {

    display:block;

    margin:20px 0 10px;

    font-size:16px;

    font-weight:600;

    color:#17202A;

}



.signup-input-box {

    height:48px;

    border:1px solid #ddd;

    border-radius:10px;

    display:flex;

    align-items:center;

    padding:0 15px;

}


.signup-input-box input {

    border:none;

    outline:none;

    width:100%;

    font-size:16px;

    font-family:'Pretendard', sans-serif;

}



/* 아이디 + 중복확인 */


.signup-inline {

    display:flex;

    gap:10px;

}


.signup-inline .signup-input-box {

    flex:1;

}



.signup-check-btn {

    width:110px;

    background:white;

    color:#20CD8D;

    border:2px solid #20CD8D;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

}







/* 성별 */


.signup-gender {

    display:flex;

    gap:40px;

}





.signup-gender label {

    margin:0;

    font-weight:500;

}







/* =====================
   다음 버튼
===================== */


.signup-next-btn {

    display:flex;

    justify-content: center;

    text-decoration: none;

    align-items: center;
    
    width:300px;

    height:50px;

    margin:50px 140px 0 auto;

    background:#20CD8D;

    color:white;

    border:none;

    border-radius:12px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

}

/* =========================
    SIGNUP STEP2
========================= */
/* signup profile */


/* ================= 전체 ================= */

.signup-page{

    min-height:100vh;
    padding:40px 60px;
    background:white;

}


.signup-logo{

    font-size:36px;
    font-weight:800;
    color:#20CD8D;

}


/* ================= 상단 ================= */

.signup-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

}


.signup-top-left{

    display:flex;
    align-items:center;
    gap:30px;

}


.signup-title-area h1{

    font-size:40px;
    color:#172126;

}


.signup-title-area p{

    font-size:20px;
    color:#888;

}


.signup-character{

    width:170px;

}



/* ================= step ================= */

.signup-step{

    display:flex;
    align-items:flex-start;
    gap:0;

}



.step-item{

    display:flex;
    flex-direction:column;
    align-items:center;

}



.step-circle{

    width:55px;
    height:55px;

    border-radius:50%;

    background:#20CD8D;

    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:25px;

}




.step-line{

    width:150px;

    height:3px;

    background:#9bdac5;

}



.step-text{

    margin-top:10px;

    font-size:14px;

    white-space:nowrap;

}



/* ================= 프로필 영역 ================= */


.profile-form-container{

    display:flex;

    gap:30px;

    margin-top:50px;

    align-items:stretch;

}




.profile-section{

    flex:1;

    min-width:0;

    border:1px solid #eee;

    border-radius:20px;

    padding:25px;

    box-shadow:0 5px 15px rgba(0,0,0,0.05);

}





/* 제목 */

.profile-section-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

}



.profile-section-title > span{

    width:32px;
    height:32px;

    background:#20CD8D;

    color:white;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.profile-section-title h2{

    font-size:22px;

    margin:0;

}



.profile-section-title small{

    font-size:14px;

    color:#999;

}





/* ================= 선택 카드 ================= */


.profile-option-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}




.profile-option input,
.profile-money-option input{

    display:none;

}




.profile-option-content{

    height:90px;

    border:1px solid #ddd;

    border-radius:15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    cursor:pointer;

    transition:.2s;

}





.profile-icon{

    width:28px;

    height:28px;

    color:#20CD8D;

}





.profile-option span{

    font-size:15px;

}





.profile-option input:checked + .profile-option-content{

    background:#20CD8D;

    border-color:#20CD8D;

    color:white;

}



.profile-option input:checked + .profile-option-content .profile-icon{

    color:white;

}





/* ================= 예산 ================= */


.profile-money-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}



.profile-money-option span{


    display:flex;

    height:55px;

    align-items:center;

    justify-content:center;

    border:1px solid #ddd;

    border-radius:15px;

    cursor:pointer;

    font-size:16px;


}




.profile-money-option input:checked + span{


    background:#20CD8D;

    color:white;

    border-color:#20CD8D;


}





/* ================= 버튼 ================= */


.profile-submit-area{

    width:100%;

    display:flex;

    justify-content:flex-end;

    margin-top:30px;

}



.profile-submit{


    width:220px;

    height:60px;


    border:none;

    border-radius:15px;


    background:#20CD8D;


    color:white;


    font-size:22px;


    cursor:pointer;


}



.profile-submit:hover {


    opacity:0.9;


}


/* =========================================================
   RESPONSIVE
   1200 / 960 / 640px
========================================================= */


/* =========================================================
   <= 1200px
   좁은 PC
========================================================= */

@media (max-width: 1200px) {

    .login-section {
        padding: 40px 50px;
    }

    .login-box {
        width: 480px;
        margin-left: 40px;
    }

    .feature-item {
        width: 340px;
    }

    .signup-top,
    .signup-form {
        width: calc(100% - 80px);
    }

    .signup-next-btn {
        margin: 50px 60px 0 auto;
    }

    .profile-form-container {
        gap: 20px;
    }
}


/* =========================================================
   <= 960px
   Tablet / 구조 전환
========================================================= */

@media (max-width: 960px) {

    /* 로그인: 좌우 2단 -> 위아래 */
    .login-page {
        flex-direction: column;
    }

    .login-section,
    .intro-section {
        width: 100%;
    }

    .login-box {
        width: 100%;
        max-width: 480px;
        margin: 40px auto 0;
    }

    .intro-section {
        padding: 40px 20px;
    }

    .feature-item {
        width: 100%;
        max-width: 400px;
        transform: none;
    }

    /* 회원가입 STEP1 */
    .signup-top {
        grid-template-columns: 1fr;
        width: calc(100% - 40px);
        gap: 20px;
    }

    .signup-top-right {
        justify-content: flex-start;
    }

    .signup-form {
        flex-direction: column;
        width: calc(100% - 40px);
        gap: 0;
    }

    .signup-form-left,
    .signup-form-right {
        width: 100%;
    }

    .signup-next-btn {
        width: 100%;
        margin: 40px 0 0;
    }

    .step-line {
        width: 100px;
    }

    /* 회원가입 STEP2 */
    .profile-form-container {
        flex-direction: column;
    }

    .profile-option-grid,
    .profile-money-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   <= 640px
   Mobile
========================================================= */

@media (max-width: 640px) {

    .login-section {
        padding: 30px 24px;
    }

    .login-logo {
        font-size: 26px;
    }

    .login-box {
        margin-top: 30px;
    }

    .login-box h1 {
        font-size: 28px;
    }

    .login-subtitle {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .input-box {
        height: 48px;
    }

    .login-btn {
        height: 48px;
        font-size: 17px;
    }

    .intro-logo {
        font-size: 32px;
        margin: 24px;
    }

    .login-character {
        width: 160px;
    }

    .feature-icon {
        width: 56px;
        height: 56px;
    }

    .feature-item h3 {
        font-size: 18px;
    }

    .signup-page {
        padding: 24px 16px;
    }

    .signup-logo {
        font-size: 28px;
    }

    .signup-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .signup-character {
        width: 110px;
    }

    .signup-check-btn {
        width: 90px;
        font-size: 13px;
    }

    .signup-gender {
        gap: 20px;
    }

    .profile-option-grid,
    .profile-money-grid {
        grid-template-columns: 1fr;
    }

    .profile-submit {
        width: 100%;
    }
}