/* =======================================================
   customlogin.css
   동아-동서 연합대학 LMS 커스텀 로그인 페이지 스타일
   ======================================================= */

/* 기본 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f0f7ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23d4e6f1' fill-opacity='0.5' d='M0,224L48,208C96,192,192,160,288,165.3C384,171,480,213,576,229.3C672,245,768,235,864,208C960,181,1056,139,1152,128C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%23a9cce3' fill-opacity='0.7' d='M0,256L48,245.3C96,235,192,213,288,197.3C384,181,480,171,576,186.7C672,203,768,245,864,256C960,267,1056,245,1152,218.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,288L48,272C96,256,192,224,288,218.7C384,213,480,235,576,250.7C672,267,768,277,864,266.7C960,256,1056,224,1152,202.7C1248,181,1344,171,1392,165.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#login_wapper {
    width: 100%;
    max-width: 880px;
    padding: 0 24px;
}

.login {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

.login_title {
    text-align: center;
    margin-bottom: 24px;
}

.login_title img {
    height: 56px;
    width: auto;
}

.login_title h1 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* 2단 레이아웃 */
.login_split {
    display: flex;
    flex-wrap: wrap;
}

.login_split_left,
.login_split_right {
    flex: 1;
    min-width: 280px;
    padding: 16px 28px;
}

.login_split_left {
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section_title {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 8px;
}

.section_desc {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 24px;
    /* 한글이 단어 중간에서 끊기지 않게 한다 */
    word-break: keep-all;
}

/* 두 칼럼을 나란히 두는 폭에서는 안내 문구를 한 줄로 유지한다 */
@media (min-width: 701px) {
    html.ko .section_desc {
        white-space: nowrap;
    }
}

/* 입력 필드 */
.login_user {
    margin-bottom: 12px;
}

.login_user .box {
    display: block;
    width: 100%;
}

.login_user .box input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #333333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login_user .box input::placeholder {
    color: #9ca3af;
}

.login_user .box input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 구분선 */
.div_line {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 16px 0;
    display: none;
}

/* 버튼 공통 */
.login_btn {
    margin-top: 16px;
}

.login_btn a {
    display: block;
    width: 100%;
    background-color: #3b82f6;
    color: #ffffff;
    text-align: center;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

.login_btn a:hover {
    background-color: #2563eb;
}

.login_btn a span {
    display: block;
}

/* 통합로그인 버튼 색상 */
.login_btn.btn_donga a {
    background-color: #003265;
}

.login_btn.btn_donga a:hover {
    background-color: #002347;
}

.login_btn.btn_dongseo a {
    background-color: #e11838;
}

.login_btn.btn_dongseo a:hover {
    background-color: #be142f;
}

/* 하단 링크 */
.login_links {
    margin-top: 16px;
    text-align: center;
}

.login_links a {
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.login_links a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.login_links .divider {
    color: #d1d5db;
    margin: 0 10px;
}

/* 회원가입 안내 */
.xn-signup-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #e5e7eb;
    font-size: 13px;
}

.xn-signup-container .xn-signup-info {
    color: #6b7280;
}

.xn-signup-container .xn-signup-btn {
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
}

.xn-signup-container .xn-signup-btn:hover {
    text-decoration: underline;
}

/* 소셜 로그인 — 아이콘만 한 줄에 네 개 */
.xn-social-login {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

.xn-social-login-btn {
    flex: 0 0 calc(25% - 6px);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    transition: filter 0.2s, border-color 0.2s;
}

.xn-social-login-btn:hover {
    filter: brightness(0.95);
}

.xn-social-login-btn > i {
    display: block;
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 아이콘만 표시하되, 화면낭독기에는 서비스 이름이 읽히도록 남긴다 */
.xn-social-login-btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.xn-social-login-btn.google {
    background-color: #ffffff;
    border-color: #e5e5e5;
}

.xn-social-login-btn.google > i {
    background-image: url(social/google_ico.svg);
}

.xn-social-login-btn.facebook {
    background-color: #4469b0;
}

.xn-social-login-btn.facebook > i {
    background-image: url(social/facebook_ico.svg);
}

.xn-social-login-btn.kakao {
    background-color: #ffeb00;
}

.xn-social-login-btn.kakao > i {
    background-image: url(social/kakao_ico.svg);
}

.xn-social-login-btn.naver {
    background-color: #27d34b;
}

.xn-social-login-btn.naver > i {
    background-image: url(social/naver_ico.svg);
}

/* 푸터 */
.footer {
    margin-top: 24px;
    text-align: center;
}

.ft_top {
    padding: 0;
}

.priv_privacy {
    margin-bottom: 8px;
}

.priv_privacy a {
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

.priv_privacy a:hover {
    text-decoration: underline;
}

.footer p {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
}

/* =======================================================
   모바일 대응
   ======================================================= */

/* 두 칼럼을 나란히 두기 좁아지는 구간부터 세로로 쌓는다 */
@media (max-width: 700px) {
    body {
        justify-content: flex-start;
        padding: 24px 0;
    }

    #login_wapper {
        padding: 0 16px;
    }

    .login {
        padding: 28px 20px;
        border-radius: 12px;
    }

    .login_title {
        margin-bottom: 16px;
    }

    .login_title img {
        height: 44px;
    }

    .login_title h1 {
        font-size: 20px;
    }

    .login_split_left,
    .login_split_right {
        flex: 1 1 100%;
        min-width: 0;
        padding: 16px 0;
    }

    .login_split_left {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .section_desc {
        margin-bottom: 16px;
    }
}

/* 소형 단말에서도 소셜 아이콘 네 개는 한 줄을 유지한다 */
@media (max-width: 380px) {
    .login {
        padding: 24px 16px;
    }

    .xn-social-login-btn {
        flex: 0 0 calc(25% - 4px);
        height: 40px;
    }

    .xn-social-login-btn > i {
        width: 20px;
        height: 20px;
    }
}