/* ==========================================================
   [signin.css] 로시컴 로그인 페이지 전용 스타일
========================================================== */
/* CSS 초기화 및 기본 스타일 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }
body { background-color: #fff; height: 100vh; display: flex; overflow: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.2s; }
a:hover { color: #007672; }

/* ==========================================================
   1. 왼쪽: 비주얼 영역 (녹색 배너)
========================================================== */
.visual-panel {
    flex: 1.2;
    background-color: #f4f7f6;
    background-image: url('../img/sub/signin-bg.png');
    background-size: cover;
    background-position: center;
    position: relative; /* 상단 바를 가두기 위한 기준점 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px; /* 상단 바가 들어갈 여유 공간 확보 */
}
.visual-panel::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,118,114,0.95) 0%, rgba(26,43,76,0.85) 100%);
}

/* 상단 네비게이션 바 (이제 무조건 녹색 배너 안에 갇힙니다!) */
.auth-top-bar {
    position: absolute; top: 0; left: 0; width: 100%; height: 60px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; box-sizing: border-box;
    z-index: 20;
}
.btn-auth-back, .btn-auth-home {
    background: none; border: none; color: #fff !important; font-size: 22px; cursor: pointer; text-decoration: none; padding: 10px;
}
.btn-auth-back:hover, .btn-auth-home:hover { opacity: 0.7; }

/* 배너 내부 컨텐츠 (로고 + 텍스트 수직 정렬) */
.visual-content {
    position: relative; z-index: 10; width: 100%;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 20px; 
}
.brand-logo svg { height: 40px; width: auto; display: block; margin: 0 auto; }
.banner-text h1 { font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4; word-break: keep-all; }
.banner-text p { font-size: 16px; font-weight: 300; color: #e0e0e0; line-height: 1.6; word-break: keep-all; margin: 0; }

/* ==========================================================
   2. 오른쪽: 로그인 폼 영역
========================================================== */
.form-panel {
    flex: 1; background-color: #fff; display: flex; flex-direction: column;
    padding: 60px 10%; overflow-y: auto; 
}
.form-container { width: 100%; max-width: 400px; margin: auto; }

.form-header { margin-bottom: 30px; text-align: center; }
.form-header h2 { font-size: 24px; font-weight: 700; color: #1a2b4c; }
.form-header p { font-size: 14px; color: #777; margin-top: 5px; }

.input-group { position: relative; margin-bottom: 20px; }
.input-group input {
    width: 100%; padding: 15px 0 10px 0; border: none; border-bottom: 2px solid #ddd;
    font-size: 16px; color: #333; background: transparent; transition: border-color 0.3s;
}
.input-group input:focus { outline: none; border-bottom-color: #007672; }
.input-group label { display: none; }

.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 14px; color: #666; }
.form-options label { display: flex; align-items: center; cursor: pointer; }
.form-options input[type="checkbox"] { margin-right: 8px; accent-color: #007672; }

.btn-login {
    width: 100%; padding: 16px; background-color: #007672; color: white; border: none; border-radius: 4px;
    font-size: 16px; font-weight: 500; cursor: pointer; transition: 0.2s;
}
.btn-login:hover { background-color: #00605d; }

.social-divider { margin: 30px 0; position: relative; text-align: center; font-size: 13px; color: #aaa; }
.social-divider::before, .social-divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background-color: #eee; }
.social-divider::before { left: 0; }
.social-divider::after { right: 0; }

.social-group { display: flex; flex-direction: column; gap: 12px; }
.btn-social { width: 100%; padding: 14px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 15px; font-weight: 500; cursor: pointer; border: 1px solid transparent; }
.btn-naver { background-color: #03C75A; color: white; }
.btn-kakao { background-color: #FEE500; color: #3C1E1E; }
.social-icon { margin-right: 10px; font-weight: bold; }

.form-footer { margin-top: 40px; text-align: center; font-size: 13px; color: #777; }
.form-footer .links { margin-bottom: 20px; }
.form-footer .links a { margin: 0 8px; color: #555; }
.expert-escape { padding-top: 20px; border-top: 1px solid #eee; margin-bottom: 20px; }
.expert-escape a { color: #007672; font-weight: 500; text-decoration: underline; margin-left: 5px; }
.copyright { font-size: 12px; color: #aaa; opacity: 0.8; }

/* 모달 레이어 */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; }
.modal-content { background: #fff; width: 90%; max-width: 400px; padding: 30px; border-radius: 8px; position: relative; }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: #999; }
.modal-header { margin-bottom: 20px; font-size: 18px; font-weight: 700; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.modal-btn { width: 100%; padding: 12px; background-color: #007672; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; }
.modal-result { margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 4px; text-align: center; font-size: 14px; display: none; color: #007672; }

/* ==========================================================
   3. 모바일/태블릿 반응형 (화면 깨짐 완벽 방지)
========================================================== */
@media (max-width: 900px) {
    /* ✨ 핵심: body를 블록 요소로 바꾸고 스크롤 허용 */
    body { display: block; overflow-y: auto; height: auto; }
    
    .visual-panel { 
        flex: none; width: 100%; 
        height: auto; /* 고정 높이 삭제! 내용물 크기에 맞춤 */
        padding: 80px 20px 40px 20px; /* 상단바를 가리지 않도록 80px 여유 */
    }
    
    .visual-content { gap: 15px; }
    .brand-logo svg { height: 32px; }
    .banner-text h1 { font-size: 22px; line-height: 1.4; }
    .banner-text p { font-size: 14px; line-height: 1.5; }
    
    .form-panel { flex: none; width: 100%; height: auto; padding: 40px 20px; overflow-y: visible; }
}