@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Regular.otf') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Pretendard';
    src: url('./fonts/Pretendard-Bold.otf') format('woff2');
    font-weight: 700;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; 
    line-height: 1.6; 
    color: #333; 
    animation: fadeIn 0.3s ease;
}

ul, ol, li { 
    list-style: none; /* 점 제거 */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 컨테이너 공통 여백 */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* 네비게이션 보완: 로고 추가 */
.logo-area img { 
    height: 65px; /* 로고 크기 키움 */
    width: auto;
    display: block;
}

.main-header { 
    background-color: #e8f0de; /* 요청하신 색상 */
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: space-between; 
    margin: 0 auto; 
    padding: 0 40px;
    width: 100%;
}
.nav-container { 
    display: flex; 
    align-items: center;    /* 핵심: 로고와 메뉴를 수직 중앙으로 정렬 */
    justify-content: space-between; 
    width: 90%;             /* 혹은 100% (양쪽 끝 여백 조절용) */
    max-width: 1400px;      /* 너무 퍼지지 않게 최대치만 설정 */
    margin: 0 auto; 
    padding: 10px 100px;
    position: relative;
}

.nav-menu {
    display: flex; 
    justify-content: center; 
    gap: 60px; 
    align-items: center;
}
.nav-menu a { 
    font-weight: 500; 
    font-size: 1.3rem; 
    color: #333;
    text-decoration: none;
}
.nav-menu a:hover { color: #bdcaad; }

.mobile-nav{
    display:none;

    position:fixed;
    top:85px;
    left:0;
    width:100vw;

    margin:0;
    padding:20px 0;

    list-style:none;

    background:#e8f0de;

    flex-direction:column;
    align-items:center;
    gap:20px;

    z-index:999;
}

.mobile-nav a{
    color:#333;
    text-decoration:none;
    font-size:1.3rem;
    font-weight:500;
}

.mobile-nav a:hover{
    color:#bdcaad;
}

/* 햄버거 버튼 */
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.hamburger span{
    width:28px;
    height:3px;
    background:#a1a1a1;
    border-radius:3px;
}

.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(6px,6px);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(5px,-5px);
}

.hamburger span{
    transition:.3s;
}

/* 문의글 작성 폼 */
.title-main {
    text-align: center; /* 제목 중앙 정렬 */
    font-size: 2rem; 
    margin-bottom: 60px; 
    color: #333;
}

.form-section { 
    background: #fff; 
    padding: 40px; 
    border-radius: 15px; 
    border: 1px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    text-align: center; 
    margin: 100px auto 100px;
    width: 800px;
}

.form-section-header { 
    text-align: center; 
    margin-bottom: 20px; 
}

.inquiry {
    text-align: center;
    margin-bottom: 50px;
}

.form-group { 
    margin-bottom: 15px; 
}

.form-group input, .form-group textarea { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ddd; background: #f9f9f9; border-radius: 4px; 
    outline: none; 
    font-size: 1rem;
}

.form-group textarea { 
    height: 150px; 
    resize: none; 
}

.privacy-check { 
    font-size: 1rem; /* 1rem이 너무 크면 조절하세요 */
    display: flex; 
    flex-direction: column; /* 위아래로 쌓기 */
    gap: 10px;              /* 줄 사이 간격 */
    margin: 40px 0 20px 0; 
    color: #333; 
}

.check-row {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 왼쪽부터 차례대로 */
    gap: 8px;                    /* 문구와 전문보기 버튼 사이 간격 */
}

.btn-text {
    background: none;
    border: none;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-text { 
    background: none; 
    border: none; 
    color: #888; 
    text-decoration: underline; 
    cursor: pointer; 
    font-size: 1rem; 
}

.submit-btn { 
    width: 100%; 
    padding: 15px; 
    background: #7b9160; 
    color: #fff; 
    border: none; 
    border-radius: 4px; 
    font-size: 1.2rem; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
}

.submit-btn:hover { 
    background: #5d6e46; 
}

/* 팝업 모달 */
.modal { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 1000; 

    justify-content: center; 
    align-items: center;
}

.modal-content { 
    background: #fff; 
    width: 90%; 
    max-width: 500px; 
    /* margin: 100px auto;  */
    padding: 30px; 
    border-radius: 10px; 

    position: absolute;    /* 부모(.modal) 기준 절대 위치 */
    top: 50%;             /* 위에서 50% 내려옴 */
    left: 50%;            /* 왼쪽에서 50% 이동 */
    transform: translate(-50%, -50%);
    line-height: 1.5;
    font-size: 1rem;
}

.close-modal { 
    position: absolute; 
    top: 15px; 
    right: 20px; 
    font-size: 24px; 
    cursor: pointer;
}

/* 4. 푸터: 가운데 정렬 및 배경색 수정 */
.main-footer { 
    background-color: #e8f0de; /* 네비게이션과 동일한 색상 */
    padding: 80px 20px; 
    text-align: center; /* 전체 가운데 정렬 */
    border-top: 1px solid #d8e4c8;
}
.footer-logo { width: 130px; margin-bottom: 25px; }
.footer-content h3 { font-size: 1.6rem; margin-bottom: 20px; color: #444; }
.footer-content p { color: #666; font-size: 0.95rem; margin-bottom: 8px; }
.copyright { margin-top: 40px; opacity: 0.5; font-size: 0.85rem; }





@media (max-width: 768px) {
    .main-header{
    padding:0;
    }
 
    /* 1. 폼 전체 컨테이너: 800px 고정 해제 및 너비 조정 */
    .form-section {
        width: 95% !important;        /* 화면 양옆에 약간의 여백만 남기고 꽉 채움 */
        padding: 30px 20px !important; /* 패딩을 줄여 내부 공간 확보 */
        margin: 60px auto !important; /* 아래쪽 여백 조절 */
        box-sizing: border-box;
    }

    /* 2. 상단 헤더 및 안내 문구 간격 조절 */
    .inquiry, .kakao-desc {
        margin-bottom: 30px !important;
        padding: 0 10px;
        font-size: 1rem;
    }

    /* 3. 개인정보 동의 체크 영역: 요소가 겹치지 않게 배치 */
    .privacy-check {
        flex-direction: column !important; /* 체크박스와 버튼을 위아래로 */
        align-items: flex-start !important;
        gap: 10px !important;
        font-size: 0.9rem !important;
    }

    .btn-text {
        padding: 0 !important; /* 버튼 여백 제거 */
    }

    /* 4. 전송 버튼: 모바일 터치에 적합하도록 */
    .submit-btn {
        padding: 12px !important;
        font-size: 1.2rem !important;
    }

    /* 5. 팝업 모달: 화면 높이에 맞춰 위치 조정 */
    .modal-content {
        width: 85% !important;
        margin: 0 auto !important; /* 너무 밑으로 내려가지 않게 조정 */
        padding: 20px !important;
        font-size: 1rem;
        word-break: keep-all;
        line-height: 1.5;
    }

    /* 텍스트 영역 높이 살짝 조절 */
    .form-group textarea {
        height: 120px !important;
    }

    /* 데스크탑 메뉴 숨김 */
    .nav-menu{
        display:none;
    }

    /* 햄버거 보이기 */
    .hamburger{
        display:flex;
    }

    /* 햄버거 클릭 시 */
    .mobile-nav.active{
        display:flex;
    }

    .nav-container{
        padding:10px 20px;
    }

    .hamburger{
        margin-left:auto;
    }
}