/* ==============================
   1. 변수 설정 (색상 통합 관리)
   ============================== */
:root {
    /* 브랜드 메인 컬러 (쿠모 블루) */
    --primary-color: #7db4e6;

    /* 라이트 모드(기본) 색상 팔레트 */
    --bg-color: #fcfcfc;        /* 전체 배경색 */
    --text-main: #333333;       /* 기본 글자색 */
    --text-strong: #000000;     /* 강조 글자색 (제목 등) */
    --text-desc: #888888;       /* 설명 글자색 (회색) */
    --card-bg: #ffffff;         /* 카드/박스 배경 */
    --card-border: #f0f0f0;     /* 테두리 색상 */
    --card-shadow: rgba(0,0,0,0.03); /* 그림자 */
}

/* 다크 모드 활성화 시 색상 재정의 */
body.dark-mode {
    --bg-color: #1a1a1a;
    --text-main: #e0e0e0;
    --text-strong: #ffffff;
    --text-desc: #a0a0a0;
    --card-bg: #2d2d2d;
    --card-border: #444444;
    --card-shadow: rgba(0,0,0,0.5);
}

/* ==============================
   2. 전체 레이아웃 (스크롤바 제거 및 풀스크린 핵심)
   ============================== */
* {
    /* 패딩(padding)이나 테두리(border)가 너비를 늘리지 않도록 설정 */
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* 가로 스크롤바가 생기는 것을 원천적으로 차단 */
    overflow-x: hidden;
}

body {
    /* 세로로 요소들을 배치 (헤더 -> 본문 -> 푸터) */
    display: flex;
    flex-direction: column;

    /* 내용이 적어도 화면 꽉 차게 만듦 (푸터 바닥 고정용) */
    min-height: 100vh;

    /* 변수 적용 및 부드러운 전환 효과 */
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Noto Sans KR', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* ==============================
   3. 로그인 컨테이너 (화면 정중앙 배치)
   ============================== */
.login-container {
    /* [핵심] 남은 빈 공간을 모두 차지함 -> 자연스럽게 푸터를 바닥으로 밀어냄 */
    flex: 1;

    /* 내부 내용물(로그인 박스)을 정중앙에 배치 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 중앙 */
    align-items: center;     /* 수평 중앙 */

    width: 100%;
    padding: 80px 20px 20px; /* [수정] 상단 여백 80px 추가 (고정 헤더 대응) */
}

/* 실제 로그인 폼이 들어가는 박스 (너비 제한) */
.login-box {
    width: 100%;
    max-width: 400px; /* 피그마 디자인처럼 너무 넓어지지 않게 고정 */
    display: flex;
    flex-direction: column;
}

/* ==============================
   4. 타이틀 영역
   ============================== */
.login-header {
    width: 100%;
    margin-bottom: 30px;
    text-align: left; /* 왼쪽 정렬 */
}

.login-header h1 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-strong); /* 다크모드 대응 변수 */
}

.login-header p {
    font-size: 14px;
    color: var(--text-desc);
}

/* ==============================
   5. 입력창 (피그마 스타일: 회색 박스)
   ============================== */
.input-group {
    width: 100%;
    margin-bottom: 20px;
}

.input-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-strong);
}

.custom-input {
    width: 100%;
    padding: 16px;
    background-color: #f2f4f6; /* 피그마 디자인의 연한 회색 배경 */
    border: none;              /* 테두리 없음 */
    border-radius: 6px;        /* 둥글기 6px */
    font-size: 15px;
    color: #333;               /* 입력 글씨는 잘 보이게 */
    outline: none;             /* 클릭 시 기본 테두리 제거 */
    transition: 0.2s;
}

/* 입력창 클릭(포커스) 시 효과 */
.custom-input:focus {
    background-color: #e8f0fe;
    box-shadow: 0 0 0 1px #7db4e6 inset; /* 안쪽으로 파란 테두리 생김 */
}

/* ==============================
   6. 옵션 (아이디 저장 & 찾기 링크) - 수정본
   ============================== */
.options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    width: 100%;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

/* ★ 체크박스 스타일 (이게 핵심) ★ */
.checkbox-container input {
    appearance: none;           /* 브라우저 기본 디자인 삭제 */
    width: 18px;
    height: 18px;
    background-color: #f2f4f6;  /* 입력창 배경색이랑 통일 */
    border: 1px solid #e0e0e0;  /* 연한 테두리 */
    border-radius: 4px;         /* 살짝 둥글게 */
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    margin: 0;
}

/* 체크됐을 때 배경색 변경 */
.checkbox-container input:checked {
    background-color: var(--primary-color); /* 쿠모 블루 */
    border-color: var(--primary-color);
}

/* 체크됐을 때 V 표시 나타나기 */
.checkbox-container input:checked::after {
    content: '✔';
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.checkbox-container span {
    font-size: 13px; /* 텍스트 길이를 고려해 14px에서 살짝 조정 */
    font-weight: 600;
    color: var(--text-strong);
}

/* 오른쪽: 찾기 링크 그룹 (새로 추가/수정) */
.find-links {
    display: flex;
    align-items: center;
    white-space: nowrap; /* 링크들이 한 줄에 나오도록 고정 */
}

.find-links a {
    font-size: 12px; /* 일본어 문구 길이를 고려한 최적의 크기 */
    color: #0056b3;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.find-links a:hover {
    text-decoration: underline;
}

/* 링크 사이 구분선 */
.find-links .separator {
    margin: 0 6px;
    color: #ccc;
    font-size: 10px;
    user-select: none; /* 드래그 방지 */
}

/* 기존 CSS의 불필요한 마진 제거 */
.forgot-id {
    margin-left: 0 !important;
}

/* 캡차 영역 중앙 정렬용 추가 */
#captchaArea {
    display: none;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

/* ==============================
   7. 버튼 스타일 (디자인 복구 핵심)
   ============================== */
.btn-login {
    width: 100%;
    padding: 16px;
    background-color: var(--primary-color); /* 쿠모 블루 */
    color: white !important; /* 글자색 강제 흰색 */
    border: none !important; /* 테두리 강제 제거 (기본 스타일 덮어쓰기) */
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 15px;
    display: block;
}

.social-btn {
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background-color: #f2f4f6; /* 회색 배경 */
    color: #333 !important;
    border: none !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* 하단 회원가입 링크 영역 */
.signup-link {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    color: var(--text-desc);
}

.signup-link a {
    color: #0056b3;
    font-weight: 700;
    margin-left: 5px;
}

.social-icon {
    /* 여기서 정하는 게 진짜 크기입니다 */
    width: 20px;   /* 버튼 글씨 크기랑 비슷하게 */
    height: 20px;

    /* 혹시 모를 여백 문제 방지 */
    display: block;
}

.social-icon2 {
    /* 여기서 정하는 게 진짜 크기입니다 */
    width: 25px;   /* 버튼 글씨 크기랑 비슷하게 */
    height: 25px;

    /* 혹시 모를 여백 문제 방지 */
    display: block;
}

/* ==============================
   8. 다크 모드 예외 처리
   ============================== */
/* 다크모드일 때 입력창과 소셜 버튼을 어둡게 변경 */
body.dark-mode .custom-input,
body.dark-mode .social-btn {
    background-color: #333;
    color: #fff !important;
}

/* 다크모드일 때 링크 색상을 브랜드 컬러로 변경 */
body.dark-mode .forgot-pw,        /* 콤마(,) 필수! */
body.dark-mode .forgot-id,        /* 콤마(,) 필수! */
body.dark-mode .signup-link a {
    color: var(--primary-color);
}

/* 로그인 실패 에러 메시지 */
.login-error-msg {
    color: #EA4335;       /* 구글 레드 */
    font-size: 13px;
    text-align: center;   /* 가운데 정렬 */
    margin-bottom: 15px;  /* 버튼과 간격 */
    margin-top: -5px;     /* 옵션 행과 간격 조절 */
    font-weight: 400;
    background-color: rgba(234, 67, 53, 0.1); /* 연한 빨간 배경 (선택사항) */
    padding: 10px;        /* 배경 있을 시 여백 */
    border-radius: 4px;   /* 배경 있을 시 둥글게 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;             /* 아이콘과 텍스트 사이 간격 */
}

/* 다크모드 대응 (선택) */
body.dark-mode .login-error-msg {
    background-color: rgba(234, 67, 53, 0.2);
    color: #ff8a80;
}