/* 네이버 로그인 버튼 기본 스타일 */
.um-naver-login-container {
    margin: 15px 0;
    text-align: center;
    position: relative;
    width: 100%;
    order: 10; /* 가장 아래로 배치 */
}

/* Ultimate Member 폼 내에서 순서 조정 */
.um-form .um-naver-login-container {
    margin: 15px 0;
    order: 10; /* 비밀번호 찾기 아래로 */
}

.um-form .um-col-alt {
    order: 2; /* 로그인/가입 버튼 */
}

.um-form .um-col-alt-b {
    order: 3; /* 비밀번호를 잊으셨나요? */
}

/* 비밀번호 찾기 링크 아래 여백 추가 */
.um-col-alt-b {
    margin-bottom: 20px;
}

.um-naver-login-container::before {
    content: '또는';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0 15px;
    color: #999;
    font-size: 12px;
}

.um-naver-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #03C75A;
    color: white !important;
    padding: 12px 24px;
    text-decoration: none !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    margin: 10px auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-height: 45px;
}

.um-naver-login-btn:hover {
    background-color: #02B050;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(3, 199, 90, 0.3);
    color: white !important;
}

.um-naver-login-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(3, 199, 90, 0.3);
}

/* 네이버 로고 - SVG 인라인으로 변경 */
.naver-logo {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845z"/></svg>') no-repeat center;
    background-size: contain;
}

/* 대체 네이버 로고 (첫 번째가 안 보일 경우) */
.naver-logo::before {
    content: "N";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: white;
    color: #03C75A;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 3px;
    margin-right: 8px;
}

/* 간단한 스타일 버전 */
.um-naver-simple {
    background-color: transparent;
    color: #03C75A !important;
    border: 2px solid #03C75A;
    padding: 8px 16px;
    font-size: 13px;
}

.um-naver-simple:hover {
    background-color: #03C75A;
    color: white !important;
    transform: none;
}

.um-naver-simple .naver-logo {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2303C75A"><path d="M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845z"/></svg>') no-repeat center;
}

.um-naver-simple:hover .naver-logo {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.273 12.845 7.376 0H0v24h7.726V11.156L16.624 24H24V0h-7.727v12.845z"/></svg>') no-repeat center;
}

/* Ultimate Member 폼과의 통합 */
.um .um-form .um-naver-login-container {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

/* 로그인 버튼들과 나란히 배치 */
.um-form .um-col-alt .um-left,
.um-form .um-col-alt .um-right {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

/* 네이버 버튼을 가장 아래로 이동 */
.um-form {
    display: flex;
    flex-direction: column;
}

.um-form .um-naver-login-container {
    order: 10;
    margin-top: 20px;
    margin-bottom: 0;
}

/* 반응형 디자인 */
@media (max-width: 480px) {
    .um-naver-login-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .naver-logo {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }
}

/* 로딩 상태 스타일 */
.um-naver-login-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.um-naver-login-btn.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    .um-naver-login-container::before {
        color: #ccc;
    }
}

/* 카카오 버튼과 통일성을 위한 스타일 조정 */
.kakaoLogin {
    margin: 15px 0;
}

.kakaoLogin img {
    max-width: 300px;
    width: 100%;
    height: auto;
}