/* index.css - index.html 전용 스타일 (stylemain.css 뒤에 로드) */

/* ── 경영방침 이미지 ── */
.login-policy-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 20px 0;
    border-radius: 8px;
}

/* ── 로고 + 제목 한 줄 배치 ── */
.login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.login-header .login-logo {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}
.login-header .login-title {
    font-size: 18px !important;
    margin: 0 !important;
    white-space: nowrap;
    line-height: 1.2;
}

/* ── 강조 안내문 (기존 인라인 style 대체) ── */
.notice-warn {
    color: #ff6b6b;
    font-weight: bold;
}

/* ── 검침관리 사용방법 버튼 ── */
.manual-wrap {
    margin-top: 10px;
}
.manual-btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background-color: #2c6ed5;
    color: #fff;
    cursor: pointer;
}
.manual-btn:hover {
    background-color: #1f56a8;
}

/* ── PC : 뷰포트 너비에 연동 (최소 340px ~ 최대 500px) ── */
@media (min-width: 769px) {
    #loginScreen.login-screen {
        padding: 40px 20px;
    }
    #loginScreen .login-container {
        width: clamp(340px, 38vw, 500px);
        max-width: none;
    }
}

/* ── 모바일 (768px 이하) : 로그인 창이 화면 전체를 꽉 채움 ── */
@media (max-width: 768px) {
    #loginScreen.login-screen {
        padding: 0;
        align-items: flex-start;
        justify-content: flex-start;
    }
    #loginScreen .login-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh;
        border-radius: 0;
        padding: 30px 20px;
        box-shadow: none;
    }
    .login-policy-img {
        border-radius: 4px;
    }
}

/* 검침전용앱 다운로드 버튼 */
.app-download-btn {
    background-color: #28a745;
    color: #ffffff;
    border: 1px solid #218838;
}

.app-download-btn:hover {
    background-color: #218838;
}