/* 1. 웹 폰트 (Pretendard) 로드 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* 2. 전체 기본 레이아웃 및 폰트 설정 */
html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    /* 폰트 적용 및 글꼴 매끄럽게 처리 */
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 상단 헤더 완전히 제거 */
#header {
    display: none !important;
}

/* 3. 전체 화면 좌우 분할 컨테이너 */
#login-main {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
}

/* 4. [좌측] 로그인 폼 영역 */
#login-main form {
    width: 50vw !important;
    height: 100vh !important;
    max-width: 50vw !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important; /* 왼쪽 정렬로 변경하여 더 깔끔하게 처리 */
    padding: 0 12% !important; /* 좌우 여백 확보 */
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
}

/* 타이틀 영역 조정 */
.auth-form-header {
    margin-bottom: 35px !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 380px !important;
}

/* "Sign in" 타이틀 폰트 크기 및 두께 조정 */
.auth-form-header h1 {
    font-size: 2.2rem !important; /* 너무 과하지 않고 세련된 크기 */
    font-weight: 700 !important;   /* 볼드 폰트 */
    color: #0f172a !important;   /* 고급스러운 딥 다크 그레이 */
    margin: 0 !important;
    letter-spacing: -0.03em !important; /* 자간을 살짝 좁혀서 트렌디하게 */
}

/* 5. 입력창(Username, Password) 스타일 및 폰트 크기 */
.form-control {
    width: 100% !important;
    max-width: 380px !important;
    height: 52px !important; /* 높이를 살짝 키워 안정감 제공 */
    padding: 12px 16px !important;
    font-size: 0.95rem !important; /* 입력 글씨 크기 */
    font-family: inherit !important;
    font-weight: 400 !important;
    border-radius: 8px !important; /* 둥근 모서리 살짝 증가 */
    border: 1px solid #e2e8f0 !important; /* 부드러운 테두리 선 */
    background-color: #f8fafc !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

/* 입력창 포커스 시 테두리 색상 변경 효과 */
.form-control:focus {
    border-color: #0f52ba !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(15, 82, 186, 0.1) !important;
    outline: none !important;
}

/* 6. 로그인 버튼 스타일 (크기 및 폰트 조정) */
.btn-jupyter {
    width: 100% !important;
    max-width: 380px !important;
    height: 52px !important;
    background-color: #0f52ba !important; /* 참고 사이트 톤의 블루 */
    border: none !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 600 !important; /* 폰트 두께 */
    font-size: 1.05rem !important; /* 버튼 글씨 크기 */
    letter-spacing: -0.01em !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    margin-top: 8px !important;
}

.btn-jupyter:hover {
    background-color: #0a3d8d !important;
}

.feedback-container {
    width: 100% !important;
    max-width: 380px !important;
}

/* 7. [우측] 지구 이미지 영역 (검은색 배경 및 이미지 꽉 차게) */
#login-main::after {
    content: "" !important;
    width: 50vw !important;
    height: 100vh !important;
    background-color: #000000 !important;
    background-image: url('https://static.vecteezy.com/system/resources/previews/015/943/404/non_2x/abstract-technology-background-cloud-computing-technology-concept-hi-tech-cloud-connection-technology-background-vector.jpg&auto=format&fit=crop') !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
}

/* 기본 부트스트랩 컨테이너 여백 리셋 */
.container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* JupyterHub 로고 및 상단 아이콘 완전히 숨기기 */
#jupyterhub-logo, 
.logo, 
.navbar-brand, 
#header-container,
.tab-content .icon-jupyter {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}