/* ------------------------- */
/* 기본 스타일 & 배경 */
/* ------------------------- */
/*body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: url(../img/bg_login.png) no-repeat #fff;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
}*/
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: url(../img/bg_login.png) no-repeat #fff;
    background-size: cover;
    display: flex;
    justify-content: center;
    /* align-items 제거 */
    min-height: 100vh; /* 최소 화면 높이 */
    box-sizing: border-box;
}

/* ------------------------- */
/* 컨테이너 반응형 */
/* ------------------------- */
/*.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
}*/
.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 화면 상단부터 쌓이도록 */
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 20px 0; /* 상단 여백 확보 */
    box-sizing: border-box;
}

/* ------------------------- */
/* 로그인 박스 */
/* ------------------------- */
.login-box {
    text-align: center;
    width: 100%;
    max-width: 520px;
    padding: 0 10px;
    box-sizing: border-box;
}

/* ------------------------- */
/* 로고 */
/* ------------------------- */
.logo {
    margin-top: clamp(20px, 5vw, 70px);
}

.logo img {
    width: 50%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.logo_02 {
    margin-top: clamp(20px, 5vw, 70px);  /* .logo 와 동일하게 */
    text-align: center;  /* 가운데 정렬 */
}

.logo_02 img {
    width: 80%;
    max-width: 379px;
    height: auto;
    margin: 0 auto 60px;  /* 가운데 정렬 + 아래 여백 */
    display: block;
}

/* ------------------------- */
/* 제목, 서브타이틀 */
/* ------------------------- */
.subtitle {
    margin-top: 0;
    font-size: clamp(12px, 2vw, 14px);
    color: #444;
}

h2 {
    font-size: clamp(24px, 5vw, 42px);
    margin: clamp(40px, 8vw, 82px) 0 clamp(20px, 4vw, 40px);
}

/* ------------------------- */
/* 폼 반응형 */
/* ------------------------- */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    max-width: 520px;
    height: clamp(50px, 10vw, 72px);
    padding: 1.5em 2em;
    border: none;
    box-sizing: border-box;
    border-radius: 20px;
    background: #f0f0f0;
    font-size: clamp(16px, 2vw, 20px);
    color: #888;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border: 1px #333 solid;
    background-color: #fff;
}

/* ------------------------- */
/* 체크박스 */
/* ------------------------- */
.checkbox {
    display: flex;
    align-items: center;
    font-size: clamp(14px, 2vw, 18px);
    color: #333;
    justify-content: flex-start;
}

.checkbox input {
    opacity: 0;
    position: absolute;
}

.checkbox label {
    background: url(../img/check_box_off.png) left top no-repeat;
    background-size: 30px;
    height: 30px;
    padding-left: 40px;
    line-height: 30px;
    display: inline-block;
    cursor: pointer;
}

.checkbox input:checked + label {
    background: url(../img/check_box_on.png) left top no-repeat;
    background-size: 30px;
}

/* ------------------------- */
/* 버튼 반응형 */
/* ------------------------- */
button {
    width: 100%;
    max-width: 520px;
    height: clamp(50px, 10vw, 72px);
    padding: 24px;
    border: none;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: #F72537;
    color: #fff;
    font-size: clamp(16px, 2vw, 20px);
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    margin-top: 40px;
}

button:hover {
    background-color: #E60033;
}

/* ------------------------- */
/* 저작권 표시 */
/* ------------------------- */
.copyright {
    font-size: clamp(12px, 1.5vw, 16px);
    color: #000;
    margin-top: 60px;
}

/*.gate-box .copyright {*/
/*    margin-top: 16px;*/
/*}*/
.gate-box .copyright{ margin-top: 16px;}

/* ------------------------- */
/* 반응형 이미지 카드 (gate-box) */
/* ------------------------- */
/*.gate-box {*/
/*    text-align: center;*/
/*    width: 100%;*/
/*    max-width: 1080px;*/
/*}*/

/*.gate-box ul {*/
/*    width: 100%;*/
/*    display: table;*/
/*    padding: 0;*/
/*}*/

/*.gate-box ul li {*/
/*    list-style: none;*/
/*    display: table-cell;*/
/*    vertical-align: top;*/
/*    cursor: pointer;*/
/*}*/

/*.gate-box ul li:first-of-type a,*/
/*.gate-box ul li:last-of-type a {*/
/*    display: block;*/
/*    width: 100%;*/
/*    max-width: 540px;*/
/*    height: auto;*/
/*    background-position: center top;*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*    overflow: hidden;*/
/*    text-indent: -1000000px;*/
/*}*/

/*.gate-box ul li:first-of-type a:hover {*/
/*    background-image: url(../img/card_aicando_on.png);*/
/*    transform: translateY(-10px);*/
/*}*/

/*.gate-box ul li:last-of-type a:hover {*/
/*    background-image: url(../img/card_moon_on.png);*/
/*    transform: translateY(-10px);*/
/*}*/

.gate-box {
    text-align: center;
    width: 1080px;
}

.gate-box ul{ width: 100%; display: table; padding: 0;}

.gate-box ul li{ list-style: none; display: table-cell; vertical-align: top; cursor: pointer;}

.gate-box ul li:first-of-type a{display: block; width: 540px; height:625px; background: url(../img/card_aicando.png) center top no-repeat; background-size: 500px; overflow: hidden; text-indent: -1000000px;}
.gate-box ul li:first-of-type a:hover{ display: block; background: url(../img/card_aicando_on.png) center top no-repeat; background-size: 540px; transform: translateY(-10px);}

.gate-box ul li:last-of-type a{display: block; width: 540px; height:625px; background: url(../img/card_moon.png) center top no-repeat; background-size: 500px; overflow: hidden; text-indent: -1000000px;}
.gate-box ul li:last-of-type a:hover{ display: block; background: url(../img/card_moon_on.png) center top no-repeat; background-size: 540px; transform: translateY(-10px);}

/*
.gate-box ul li:first-of-type a{display: block; width: 540px; height:625px; background: url(../img/card_aicando.png) center top no-repeat; background-size: 500px; overflow: hidden; text-indent: -1000000px;}
.gate-box ul li:first-of-type a:hover{ display: block; background: url(../img/card_aicando_on.png) center top no-repeat; background-size: 540px; transform: translateY(-10px);}

.gate-box ul li:last-of-type a{display: block; width: 540px; height:625px; background: url(../img/card_moon.png) center top no-repeat; background-size: 500px; overflow: hidden; text-indent: -1000000px;}
.gate-box ul li:last-of-type a:hover{ display: block; background: url(../img/card_moon_on.png) center top no-repeat; background-size: 540px; transform: translateY(-10px);}
*/