/* ==========================================================================
   AI Review Net - Modal & Mobile GNB Custom CSS
   기존 style.css와 충돌하지 않도록 독립적으로 작성된 스타일입니다.
   ========================================================================== */

/* ----------------------------------------
   1. Mobile Bottom Navigation (GNB)
   ---------------------------------------- */
.bottom-nav {
    display: none; /* PC 화면에서는 기본적으로 숨김 */
}

@media (max-width: 768px) {
    /* 모바일 하단 GNB가 떠있을 때 컨텐츠 가림 방지 */
    body {
        padding-bottom: 70px !important; 
    }

    .bottom-nav.mobile-only {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background-color: #1e293b; /* 신 버전 다크 테마 배경색 */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #64748b; /* 비활성 아이콘 색상 */
        font-size: 11px;
        width: 100%;
        height: 100%;
        transition: color 0.2s ease;
    }

    .bottom-nav .nav-item svg {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
        fill: currentColor;
    }

    .bottom-nav .nav-item.active,
    .bottom-nav .nav-item:hover {
        color: #22d3ee; /* 활성 상태 포인트 컬러 (Cyan) */
    }
}

/* ----------------------------------------
   2. Modal Window (Signup Modal)
   ---------------------------------------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: none; /* 기본 숨김 */
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}

/* 스크립트에서 active 클래스가 추가되면 표시됨 */
.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #1e293b;
    border-radius: 16px;
    width: 90%;
    max-width: 460px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    animation: modalSlideUp 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 모달 닫기 버튼 */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 11;
    transition: color 0.2s;
    padding: 0;
}

.modal-close:hover {
    color: #fff;
}

/* 모달 내부 폼 요소 */
.form-group {
    margin-bottom: 16px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: #cbd5e1;
    margin-bottom: 6px;
    font-weight: 500;
}

/* 폼 입력창 스타일 */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="tel"] {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #334155;
    background-color: #0f172a;
    color: #f8fafc;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}

.form-group input::placeholder {
    color: #475569;
}

/* 모달 내 체크박스 및 약관 동의 영역 */
.form-group input[type="checkbox"] {
    accent-color: #22d3ee;
    cursor: pointer;
}

.form-group a {
    color: #60a5fa;
    text-decoration: none;
}

.form-group a:hover {
    text-decoration: underline;
}

/* 가입 완료/전송 버튼 */
.submit-btn {
    width: 100%;
    padding: 16px;
    background-color: #22d3ee;
    color: #0f172a;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #06b6d4;
}

.submit-btn:disabled {
    background-color: #475569;
    color: #94a3b8;
    cursor: not-allowed;
}

/* =========================================================
   약관 동의 체크박스 및 텍스트 강제 노출/크기 수정
   ========================================================= */

/* 신 버전 테마에서 숨겨진 체크박스를 강제로 브라우저 기본 형태로 표시 */
#signupModal .form-group input[type="checkbox"] {
    display: inline-block !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    cursor: pointer;
    flex-shrink: 0 !important;
}

/* 전체 동의하기 텍스트 크기 및 정렬 */
#signupModal label[for="agreeAll"] {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    cursor: pointer;
    line-height: 1.2 !important;
}

/* 개별 약관 항목 텍스트 크기 및 정렬 */
#signupModal label[for="agreeTerms"],
#signupModal label[for="agreePrivacy"],
#signupModal label[for="agreeThirdParty"] {
    font-size: 14px !important;
    color: #e2e8f0 !important;
    cursor: pointer;
    line-height: 1.3 !important;
}

/* 플렉스 박스 수직 중앙 정렬 보정 */
#signupModal .form-group > div {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}