.gsi-material-button {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -webkit-appearance: none;
        background-color: WHITE;
        background-image: none;
        border: 1px solid #ccc;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #1f1f1f;
        cursor: pointer;
        font-family: 'Roboto', arial, sans-serif;
        font-size: 14px;
        height: 40px;
        letter-spacing: 0.25px;
        outline: none;
        overflow: hidden;
        padding: 0 12px;
        position: relative;
        text-align: center;
        -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
        transition: background-color .218s, border-color .218s, box-shadow .218s;
        vertical-align: middle;
        white-space: nowrap;
        width: auto;
        min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .15), 0 1px 3px 1px rgba(60, 64, 67, .1);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .15), 0 1px 3px 1px rgba(60, 64, 67, .1);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
}
.login-container {
    margin: auto;
    display: flex;
    justify-content: center;   /* 가운데 정렬 */
    align-items: center;           /* 수직 중앙 */
    height: 100vh;
    min-height: 100dvh;
    background-image: url('/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.center_wrap {
    width: 21%;
    padding: 5vh 3%;
    min-width:400px;
    text-align: center;
    background: rgba(255, 255, 255, 0.9); /* 반투명 */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-30px);
}

.center_wrap h3 img {
    width:45px;
}
.center_wrap h3 p.welcome {
    font-size:24px;
    font-weight:400;
    padding:15px 0 25px;
}

.login-input {
    width:100%;
    line-height:40px;
    border:2px solid #ddd;
    border-radius:10px;
    background:#fff !important;
    text-align:left !important;
    padding: 0 3px;
    font-size:14px;
}

.login-input:focus, .login-input:hover {
    outline: none;
    border:2px solid #0091db;
    border-radius:10px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.center_wrap > button.btn-login, .center_wrap > button.btn-join, .center_wrap > button.btn-gray { width: 100%; line-height: 40px; margin-bottom: 5px; border-radius: 5px; }
.center_wrap > button.btn-login { background: linear-gradient(#00b9ef, #0091db); color: #fff; font-weight: 600; }
.center_wrap > button.btn-join { background: #fff; color: #353535; border: 1px solid #8fc3dd; font-weight: 400; }
.center_wrap > button.btn-gray { background: #b5e9fb; color: #333; margin-bottom: 15px; font-weight: 400; }

.login-google { width: 100%; height: 43px; border-radius: 0; }
.login-naver { background: #03c75a; }
.login-kakao { background: #fee500; }
.login-naver img, .login-kakao img { width: auto; height: 43px; }
.login-naver:hover,
.login-kakao:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }

/* ===== 공통 소셜 버튼 스타일 ===== */
.login-social { position: relative; overflow: hidden; /* overlay 효과 */ color: #fff; /* 기본 텍스트 흰색 */ width: 100%; }
.login-social::after { content: ""; position: absolute; inset: 0; background: #333; opacity: 0; transition: opacity .2s ease; }
.login-social:hover { box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 1px 5px 1px rgba(0,0,0,.08); }
.login-social:hover::after { opacity: .05; }

/* [251001 SYE] 반응형 추가 */
/* ========================= Tablet (601–1024px) ========================= */
@media (max-width:1024px) and (min-width:601px) {
    .center_wrap { width: 56%; min-width: 360px; padding: 4vh 5%; transform: translateY(-20px); }

    .center_wrap h3 img { width: 40px; }
    .center_wrap h3 p.welcome { font-size: 22px; padding: 12px 0 22px; }

    .login-input { line-height: 44px; font-size: 15px; padding: 0 8px; }

    .center_wrap > button.btn-login,
    .center_wrap > button.btn-join { line-height: 44px; font-size: 15px; }

    .login-google { height: 46px; }
    .login-naver img, .login-kakao img { height: 46px; }
}

/* ========================= Mobile (≤600px) ========================= */
@media (max-width:600px) {
    .login-container { padding: 16px; /* 좌우 여백 확보 */ background-position: 40% center; /* 이미지 포커스 약간 좌측 */ }

    .center_wrap { width: 92%; min-width: 0; padding: 22px 16px; border-radius: 12px; transform: translateY(0); /* 위로 올림 제거 */ box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

    .center_wrap h3 img { width: 36px; }
    .center_wrap h3 p.welcome { font-size: 18px; padding: 10px 0 18px; }

    /* iOS 확대 방지 위해 16px 이상 권장 */
    .login-input { line-height: 46px; font-size: 16px; padding: 0 10px; border-radius: 8px; }

    .center_wrap > button.btn-login,
    .center_wrap > button.btn-join { line-height: 46px; font-size: 16px; border-radius: 8px; }

    /* 소셜 로그인 버튼 */
    .login-google,
    .login-naver,
    .login-kakao { height: 48px; border-radius: 8px; }
    .login-naver img, .login-kakao img { height: 48px; }

    /* 호버 없는 터치 환경에서 hover 효과 축소 */
    @media (hover: none) {
        .login-social:hover { box-shadow: none; }
        .login-social:hover::after { opacity: 0; }
    }
}