/* 1. 기본 설정 */
body {
    font-family: 'Noto Sans KR', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* 2. 화면 중앙 정렬 컨테이너 */
.single-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

/* 3. [핵심] 하나의 큰 통합 카드 디자인 */
.combined-card {
    display: flex;               /* 좌우 배치를 위해 flex 사용 */
    width: 100%;
    max-width: 1000px;           /* 최대 너비 설정 */
    height: 650px;               /* 높이 고정 */
    background-color: #fff;      /* 기본 흰색 배경 */
    border-radius: 20px;         /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* 부드럽고 큰 그림자 */
    overflow: hidden;            /* 자식 요소가 둥근 모서리를 넘지 않게 */
}

/* 4. 좌측: 이용약관 패널 (파란색 디자인 적용) */
.left-panel {
    flex: 1.2;                   /* 우측보다 조금 더 넓게 */
    background: linear-gradient(135deg, #182a87 0%, #005eb8 100%); /* 파란색 그라데이션 배경 */
    padding: 40px 36px 40px 40px;
    display: flex;
    flex-direction: column;
    color: white;                /* 텍스트 색상 흰색으로 변경 */
}

.terms-header {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3); /* 흰색 반투명 구분선 */
}

/* 약관 스크롤 영역 */
.terms-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9); /* 흰색에 가까운 텍스트 */
}

/* 스크롤바 커스텀 (파란 배경에 맞춤) */
.terms-scroll-area::-webkit-scrollbar { width: 6px; }
.terms-scroll-area::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.4); border-radius: 3px; }
.terms-scroll-area::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.1); }

/* 약관 내부 텍스트 스타일 */
.terms-scroll-area h3 { margin-top: 0; color: white; font-size: 18px; }
.terms-scroll-area h4 { margin-top: 25px; margin-bottom: 10px; color: #ffd700; /* 강조색(노랑) */ font-weight: 700; }
.highlight { font-weight: bold; color: #ffd700; }


/* 5. 우측: 로그인 폼 패널 (흰색 배경) */
.right-panel {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 중앙 정렬 */
    align-items: center;
    text-align: center;
    background-color: #fff;
}

.logo-area img { width: 160px; height: auto; margin-bottom: 20px; }
.system-title { font-size: 24px; font-weight: 700; color: #333; margin-bottom: 35px; line-height: 1.3; }

/* 6. 입력창 스타일 */
.input-group { width: 100%; margin-bottom: 15px; text-align: left; }
.login-input {
    width: 100%; height: 52px; padding: 0 15px;
    border: 1px solid #e0e0e0; border-radius: 8px;
    font-size: 15px; background: #fcfcfc; box-sizing: border-box; transition: all 0.3s;
}
.login-input:focus { outline: none; border-color: #182a87; background: #fff; box-shadow: 0 0 0 4px rgba(24, 42, 135, 0.1); }
.login-input::placeholder { color: #aaa; }

/* 7. 버튼 스타일 */
#login-button {
    width: 100%; height: 56px; font-size: 17px; font-weight: 700;
    background-color: #182a87; color: #fff; border: none; border-radius: 8px;
    cursor: pointer; margin-top: 15px; transition: background-color 0.3s, transform 0.1s;
}
#login-button:hover { background-color: #005eb8; }
#login-button:active { transform: scale(0.98); }

/* 하단 링크 */
.sub-links { margin-top: 25px; font-size: 14px; color: #888;display: flex; justify-content: center; align-items: center; width: 100%; }
#signup-button, #find-pw-button, button[id="#"] { 
    background: none; border: none; color: #666; font-size: 14px; cursor: pointer; padding: 5px; font-family: inherit;
}
#signup-button:hover, #find-pw-button:hover, button[id="#"]:hover { color: #182a87; text-decoration: underline; }

/* 8. 로그인 완료 후 화면 */
.logged-in-box { width: 100%; text-align: center; }
.btn-logout {
    display: block; width: 100%; padding: 12px; background: #6c757d; color: white; border-radius: 8px; 
    text-decoration: none; margin-top: 15px; font-weight: bold; box-sizing: border-box;
}

/* 9. 반응형 (모바일 화면) */
@media (max-width: 900px) {
    .combined-card {
        flex-direction: column; /* 위아래로 배치 */
        height: auto;
        max-width: 500px;
    }
    .left-panel {
        height: 250px; /* 약관 영역 높이 줄임 */
        padding: 30px;
    }
    .right-panel {
        padding: 40px 30px;
    }
    .system-title { font-size: 20px; }
}