@charset "UTF-8";
:root {
    /* Cort 로고 색상에서 추출한 진한 블루/네이비 (근사치) */
    --cort-primary-color: #004a9e; 
    /* 웹사이트 배경색 */
    --cort-background-color: #f7f7f7; 
    /* 컨텐츠 박스 (로그인 폼) 배경색 */
    --cort-form-background: #ffffff; 
    /* 주요 텍스트 색상 */
    --cort-text-color: #333333; 
    /* 보조 텍스트 색상 */
    --cort-sub-text-color: #666666; 
    /* 입력 필드 테두리 색상 */
    --cort-border-color: #e0e0e0;
    /* 버튼 배경색 (로그인 버튼 등) */
    --cort-button-bg-color: #222222; 
    /* 버튼 텍스트 색상 */
    --cort-button-text-color: #ffffff;
    
    /* 폰트: Cort 웹사이트와 유사한 간결한 산세리프 계열 */
    /* Google Fonts를 사용한다면: font-family: 'Roboto', sans-serif; */
    --cort-main-font: Arial, Helvetica, sans-serif; 
}
/* ----------------------------------------------- */

body {
    font-family: var(--cort-main-font);
    background-color: var(--cort-background-color);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--cort-text-color);
    line-height: 1.6;
}

.cort-login-container {
    width: 100%;
    max-width: 420px; /* 로그인 박스 최대 너비 조정 */
    padding: 30px; /* 컨테이너 패딩 추가 */
}

.cort-login-box {
    background-color: var(--cort-form-background);
    padding: 50px 40px; /* 패딩 증가 */
    border-radius: 6px; /* 모서리 둥글기 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* 그림자 더 강조 */
    /* Cort 로고 색상으로 상단 바 추가 */
    border-top: 4px solid var(--cort-primary-color); 
}

.cort-brand-logo {
    text-align: center;
    color: var(--cort-primary-color); /* 로고 텍스트 색상 */
    font-size: 32px; /* 로고 크기 */
    font-weight: 700; /* 굵기 */
    margin-top: 0;
    margin-bottom: 5px; /* 부제목과의 간격 */
    letter-spacing: 1.5px; /* 자간 조정 */
}

.cort-subtitle {
    text-align: center;
    color: var(--cort-sub-text-color);
    font-size: 15px;
    margin-bottom: 40px; /* 입력 폼과의 간격 */
    font-weight: 400;
}

.cort-input-group {
    margin-bottom: 25px; /* 입력 그룹 간 간격 증가 */
}

.cort-label {
    display: block;
    font-size: 13px;
    color: var(--cort-sub-text-color);
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase; /* 레이블 대문자화 */
}

.cort-input-field {
    width: 100%;
    padding: 14px 12px; /* 패딩 증가 */
    font-size: 16px;
    border: 1px solid var(--cort-border-color);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out;
}

.cort-input-field:focus {
    outline: none;
    border-color: var(--cort-primary-color); /* 포커스 시 색상 변경 */
    box-shadow: 0 0 0 2px rgba(0, 74, 158, 0.1); /* 옅은 그림자 효과 */
}

.cort-button {
    width: 100%;
    padding: 16px; /* 버튼 패딩 증가 */
    font-size: 17px;
    font-weight: 700;
    color: var(--cort-button-text-color);
    background-color: var(--cort-button-bg-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cort-login-button:hover {
    background-color: #333333; /* 약간 더 진하게 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cort-error-message {
    color: #cc0000; /* 진한 빨강 */
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
    height: 1.2em;
    font-weight: 500;
}