/* ============================================================
 * 3. 헤더 기본 레이아웃 (중앙 로고 기준 밀착형 구조)
 * ============================================================ */
.main-header {
    background-color: #ffffff;
    border-bottom: 2px solid #ed5848;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}
.header-container { display: flex; justify-content: space-between; align-items: center; height: 80px; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.header-side { flex: 1; display: flex; align-items: center; }
.header-center { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 40px; }
.header-left { justify-content: flex-end; gap: 30px; }
.header-right { justify-content: flex-start; gap: 25px; }

/* ============================================================
 * 3.1 브랜드 로고 및 텍스트 스타일 (이전 글자 포맷 복원)
 * ============================================================ */
.header-container a { text-decoration: none; color: #000; font-weight: bold; font-size: 16px; transition: color 0.3s ease; }
.header-container a:hover { color: #ed5848; }
.header-container a.brand {
    font-family: 'norion-logo-font', cursive;
    font-size: 30px;
    font-weight: bold;
    color: #ed5848; /* 붉은색 강제 적용 */
    text-decoration: none;
    letter-spacing: -0.5px;
}
/* ============================================================
 * 3.2 드롭다운(Dropdown) 공통 스타일 (마우스 이탈 방지 적용)
 * ============================================================ */
.dropdown {
    position: relative;
    height: 100%; /* 헤더의 전체 높이(80px)를 꽉 채우도록 설정 */
    display: flex;
    align-items: center;
}

.dropbtn {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 30px 0;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
}

.dropbtn:hover { color: #ed5848; }

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* 메뉴 영역이 끝나는 바로 밑에 빈틈없이 찰싹 붙임 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    min-width: 170px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 12px 0;
    list-style: none;
    margin-top: 0; /* 마우스 이탈의 원흉이었던 외부 여백 제거 */
}

.dropdown:hover .dropdown-content { display: block; animation: fadeInDown 0.3s ease; }

.dropdown-content li a {
    padding: 10px 20px;
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    white-space: nowrap;
}

.dropdown-content li a:hover { background-color: #fff8f7; color: #ed5848; }

.arrow {
    font-size: 10px;
    color: #cccccc;
    margin-left: 6px;
    transition: transform 0.3s;
}

.dropdown:hover .arrow { transform: rotate(180deg); }

/* ============================================================
 * 4. footer 스타일
 * ============================================================ */
footer { background: #1a1a1a; color: #ccc; padding: 60px 20px; margin-top: 50px; } /* 푸터 전체 배경 및 여백 */
.footer-container { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; } /* 푸터 내부 섹션 배치 */
.footer-info { flex: 1.5; min-width: 300px; } /* 기업 정보 섹션 비중 설정 */
.footer-info h4 { color: #fff; margin-bottom: 20px; border-left: 3px solid #ed5848; padding-left: 10px; } /* 푸터 섹션 제목 스타일 */
.footer-info p { font-size: 14px; margin: 5px 0; color: #999; } /* 푸터 텍스트 스타일 */
.footer-follow { flex: 0.5; min-width: 150px; } /* SNS 팔로우 섹션 비중 */
.footer-follow h4 { color: #fff; margin-bottom: 20px; } /* SNS 섹션 제목 */
.sns-links a { display: block; color: #ed5848; text-decoration: none; margin-bottom: 10px; font-size: 14px; } /* SNS 링크 스타일 */
.footer-contact { flex: 1; min-width: 300px; } /* 컨택트 폼 섹션 비중 */
.footer-contact h4 { color: #fff; margin-bottom: 20px; } /* 컨택트 섹션 제목 */
.contact-form input, .contact-form textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #333; background: #222; color: #fff; border-radius: 4px; box-sizing: border-box; } /* 입력 필드 스타일 */
.contact-form button { background: #ed5848; color: white; border: none; padding: 10px 30px; cursor: pointer; border-radius: 4px; font-weight: bold; width: 100%; } /* 전송 버튼 스타일 */

/* ============================================================
 * 99. 모바일 및 태블릿 대응 (2줄 배치 + 아코디언 메뉴 적용)
 * ============================================================ */
@media screen and (max-width: 1024px) {
    /* 1. 컨테이너 강제 재설정: 로고와 메뉴 사이 간격 8px로 축소 */
    header.main-header .header-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 12px 5px !important; /* 상하 전체 여백 축소 */
        gap: 8px !important; /* 로고와 메뉴 그룹 사이의 간격 */
    }

    /* 2. 로고 위치 및 크기: 중앙 고정 */
    header.main-header .header-center {
        order: 1 !important;
        width: 100% !important;
        margin: 0 0 2px 0 !important; /* 하단 여백 최소화 */
        display: flex !important;
        justify-content: center !important;
    }
    header.main-header .header-container a.brand {
        font-size: 26px !important;
        display: inline-block !important;
    }

    /* 3. 메뉴 영역 강제 재배치: 2단 그리드 50% 배분 */
    header.main-header .header-side {
        order: 2 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important; /* 아이템이 50% 점유 시 자동으로 다음 줄로 */
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important; /* 정확한 수직 줄맞춤을 위해 간격 제거 */
    }

    /* [추가] 각 메뉴 아이템의 너비를 50%로 강제 고정하여 줄을 맞춤 */
    header.main-header .header-side > a,
    header.main-header .header-side .dropdown {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* 4. 메뉴 텍스트 및 간격: 상하 패딩 3px로 줄간격 대폭 축소 */
    header.main-header .header-container a {
        font-size: 14px !important;
        padding: 3px 0 !important; /* 8px에서 3px로 축소하여 줄간격 해결 */
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* 5. 드롭다운 및 방해 요소 제거 */
    header.main-header .arrow { display: none !important; }

    /* 서브 메뉴 노출 설정 보존 및 위치 최적화 */
    header.main-header .dropdown:hover .dropdown-content,
    header.main-header .dropdown:active .dropdown-content {
        display: block !important;
        position: absolute !important;
        top: 30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* 모바일에서 드롭다운 중앙 정렬 */
        width: 120px !important;
        background-color: white !important;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
    }
}