/* 1. 배경 설정: 격자 없는 깔끔한 회색 단색 */
#login {
    background-color: #f0f2f5 !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
}

/* 2. 로그인 박스: 전체적인 여백(Padding)을 줄여 콤팩트하게 수정 */
.login-form, form#login-form, #login form {
    background-color: #ffffff !important;
    padding: 30px 35px 40px 35px !important; /* 상단 여백을 30px로 대폭 축소 */
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e1e4e8 !important;
    max-width: 360px !important; /* 박스 가로 폭도 살짝 줄임 */
    width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 3. 서비스명: 글씨 위쪽 공백 제거 및 색상 유지 (Huni Cloud) */
.login-form h1 {
    font-size: 36px !important; /* 크기를 살짝 조절하여 균형 확보 */
    color: #8e97a0 !important; /* 부드러운 연회색 */
    font-weight: 800 !important;
    margin: 0 0 25px 0 !important; /* 상단 마진을 0으로 하여 여백 제거 */
    text-align: center !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* 4. 입력창 및 버튼: 좁아진 박스에 맞춰 정렬 */
.login-form input {
    width: 100% !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}

.login-form input[type="submit"] {
    background-color: #1a73e8 !important;
    color: white !important;
    font-weight: 700 !important;
    height: 48px !important;
    margin-top: 10px !important;
}

/* 5. 설정 페이지 박스 너비: 시원한 확장 유지 */
.dashboard .card, .dashboard .settings, .card-content {
    max-width: 1100px !important;
    width: 95% !important;
    margin: 20px auto !important;
}

/* 6. 하단 카피라이트: ⓒ 2025 Huni Cloud */
body::after {
    content: "ⓒ 2025 Huni Cloud" !important;
    position: fixed !important;
    bottom: 20px !important;
    color: #b0b8c1 !important;
    font-size: 12px !important;
    text-align: center !important;
    width: 100% !important;
    left: 0 !important;
}

/* 불필요한 로고 요소 숨기기 */
.logo, img, .login-form img, .login-form::before { display: none !important; }

/* 4. 좌측 사이드바와 메인 영역의 경계를 확실히 */
#sidebar {
    background-color: #2c3e50 !important; /* 사이드바는 진하게 유지하여 대비 강조 */
}

#sidebar .action {
    color: #bdc3c7 !important; /* 메뉴 글씨 연회색 */
    padding: 15px 20px !important;
}

#sidebar .action:hover {
    background-color: #34495e !important; /* 마우스 올릴 때 효과 */
    color: #ffffff !important;
}

#sidebar .action.active {
    background-color: #1a73e8 !important; /* 활성화된 메뉴는 블루 */
    color: white !important;
}

/* 1. 메인 파일 목록 영역을 흰색으로 변경 */
main, .dashboard, #main-wrapper {
    background-color: #ffffff !important;
}

/* 2. 상단 헤더와 파일 목록 사이의 구분선 및 여백 정리 */
header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #edf2f7 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

header .title {
    color: #2c3e50 !important;
    font-weight: 800 !important;
    font-size: 20px !important;
}

/* 3. 파일 목록 아이템 디자인 (NAS 스타일) */
.item {
    background-color: #ffffff !important; /* 배경을 흰색으로 고정 */
    border-bottom: 1px solid #f7fafc !important;
    padding: 15px 25px !important;
    transition: all 0.2s ease !important;
}

.item:hover {
    background-color: #f8faff !important; /* 마우스 올릴 때만 아주 연한 블루 */
    transform: translateX(5px); /* 살짝 밀리는 효과로 고급스럽게 */
}

/* 파일/폴더 아이콘 색상: NAS 포인트 블루 */
.item i {
    color: #1a73e8 !important;
    font-size: 22px !important;
}

/* 6. 파일명 글씨색 및 폰트 강조 */
.item .name {
    color: #2d3748 !important;
    font-weight: 500 !important;
}

/* 5. 검색창 및 상단 버튼들 정돈 */
#search {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}