/* ======================================== */
         /* ======== 공통 레이아웃 시작 부분==========  */
         /* ======================================== */


/* 1. 여기에 추가: 스크롤바가 생겨도 화면이 밀리지 않게 공간 확보 */
html { scrollbar-gutter: stable; }

/* 2. 기본 배경은 흰색으로 설정 (세로 스크롤 허용) */
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; background: #fff; overflow-y: auto; }

/* 3. 헤더 프레임: 메뉴 드롭다운과 모바일 사이드바를 위해 높이 확보 */
 .header-frame { width: 100%; 
         height: 100px; /* 기본 높이 */
         border: none; position: fixed; top: 0; left: 0; z-index: 1000; 
         transition: height 0.3s ease; /* 부드러운 높이 변화 */
         pointer-events: auto; /* 마우스 이벤트 허용 */
         }

/* 4. 마우스를 올리면 드롭다운 메뉴가 보일만큼 높이를 늘림 */
.header-frame:hover { height: 400vh; }

/* 5. 푸터 프레임: 하단 흰 줄 제거 및 밀착 */
.footer-frame { 
    width: 100%; height: 80px; border: none; 
    display: block; vertical-align: top; background: #1a1a1a; }



         /* ======================================== */
         /* ======== 상단 탭 수정부분 작성 위치 시작 부분==========  */
         /* ======================================== */

/* 프로젝트 상단 내비게이션 스타일 */
.news-nav {
  display: flex;
  flex-direction: column; /* 세로(위-아래) 방향으로 배치 */
  align-items: center;    /* 전체 요소를 가로 중앙 정렬 */
  justify-content: center;
  padding: 0px 0;
  margin-top: 105px; 
  margin-bottom: 20px;
}

.nav-title {
  font-size: 35px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0a4a44;
  margin-bottom: 20px;   /* 제목과 아래 탭 사이의 간격 */
  text-align: center;    /* 텍스트 중앙 정렬 */
}

.nav-tabs {
  display: flex;
  gap: 10px; /* 항목 사이 공간을 띄움 (원하는 만큼 조절 가능) */
  flex: 1;
  justify-content: center; /* 중앙 배치 */
}

.tab-item {
  text-decoration: none;
  color: #333;
  font-weight: 700;
  font-size: 14px;
  
  /* 박스 크기를 동일하게 설정 */
  width: 176px;        /* 버튼의 동일한 가로 너비 */
  height: 40px;        /* 버튼의 동일한 세로 높이 */
  display: flex;       /* 중앙 정렬을 위해 flex 사용 */
  align-items: center;
  justify-content: center;
  
  transition: all 0.3s ease;
  border: 1px solid #ddd;
  background-color: #fff;
  letter-spacing: 0.5px;
}

/* ALL 및 활성화된 탭 스타일 */
.tab-item.active {
  background-color: #0a4a44 !important; /* 비아건축 로고 색상 */
  color: #fff !important;
  border-color: #0a4a44 !important;
}

.tab-item:hover:not(.active) {
  border-color: #0a4a44; /* 호버 시 테두리만 로고 색상으로 */
  color: #0a4a44;
}

         /* ======================================== */
         /* ======== 본문 수정부분 작성 위치 시작 부분==========  */
         /* ======================================== */


/* 본문 전체 영역 */
.qa-main {
    flex: 1 0 auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 0px 10px 0px;
    background: #fff;
}

.qna-container {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

/* 1. '프로젝트 문의' 제목 색상 및 하단 여백 수정 */
.qna-header .title {
    font-size: 20px; 
    font-weight: 500;    /* [수정] 800(매우 진함) -> 700(적당함)으로 변경 */
    color: #666;         /* [수정] #222(진한 검정) -> #444(부드러운 회색빛 검정)로 변경 */
    margin-bottom: 8px;  /* 문구와의 간격 유지 */
}

/* 2. '비아건축사사무소에...' 안내 문구 하단 공백 수정 */
.qna-header {
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px; /* [수정] 50px -> 30px로 줄여서 표와의 간격 축소 */
}

.qna-header .subtitle {
    font-size: 15px; 
    color: #666;
    margin-bottom: 0;    /* 추가적인 여백 제거 */
}

/* 3. 표 상단의 굵은 선 색상도 제목과 통일 (선택 사항) */
.qna-table {
    width: 100%;
    border-top: 2px solid #666; /* [수정] 제목과 같은 검정색 계열로 변경 */
    border-bottom: 2px solid #666; /* [수정] 제목과 같은 검정색 계열로 변경 */
    border-collapse: collapse;
}

.qna-table th {
    background-color: #f9f9f9;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 14px;
    color: #333;
}

/* 1. 표의 각 행(칸) 자체의 여백 줄이기 */
.qna-table td {
    padding: 8px 15px; /* [수정] 위아래 15px -> 8px로 약 절반 축소 */
    border-bottom: 1px solid #ddd;
}

/* 2. 입력창 내부의 위아래 공간 줄이기 */
.qna-table input[type="text"],
.qna-table input[type="email"],
.qna-table input[type="tel"] {
    width: 100%;
    padding: 6px 10px; /* [수정] 위아래 10px -> 6px로 축소 */
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 14px;
}

/* 3. (참고) 왼쪽 항목명(th) 높이도 같이 맞춰주기 */
.qna-table th {
    background-color: #f9f9f9;
    padding: 8px 20px; /* [수정] td와 동일하게 8px로 맞춤 */
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
}

.qna-table textarea {
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 14px;            /* 글자 크기 통일 */
    font-family: 'Noto Sans KR', sans-serif; /* 폰트 종류 강제 지정 */
    font-weight: 400;           /* 글자 두께를 보통(Regular)으로 고정 */
    color: #333;                /* 글자 색상 통일 */
    padding: 6px 10px;
    height: 170px;              /* 높이 유지 */
    resize: none;               /* 크기 조절 핸들 제거 */
    line-height: 1.6;           /* 줄간격 조절 */
}

/* 안내 문구(Placeholder) 색상과 두께도 모두 동일하게 */
.qna-table input::placeholder,
.qna-table textarea::placeholder {
    color: #aaa !important;     /* 연한 회색으로 통일 */
    font-weight: 400 !important; /* 안내 문구도 얇게 설정 */
    font-size: 14px;
}

/* 3. 첨부 파일 버튼 및 텍스트 스타일 조절 */
.qna-table input[type="file"] {
    font-size: 13px;     /* 너무 커 보이지 않게 조절 */
    color: #666;
}

/* 4. 첨부 파일 하단 안내 문구 (최대 2MB...) */
.qna-table td p {
    margin-top: 5px;
    font-size: 12px;
    color: #999;         /* 더 연하게 처리하여 시선 분산 방지 */
}

/* 하단 버튼 및 동의 영역 여백 조정 */
.form-footer {
    margin-top: 15px;    /* [수정] 30px -> 15px로 줄여 표와의 간격 축소 */
    margin-bottom: 15px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;           /* [수정] 20px -> 10px로 줄여 체크박스와 버튼 사이 간격 축소 */
}

.privacy-check {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;    /* 혹시 모를 하단 여백 제거 */
}

.submit-btn {
    width: 200px;
    height: 50px;
    background-color: #0a4a44;
    color: #fff;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

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


         /* ======================================== */
         /* ======== 반응형 대응 시작 부분==========  */
         /* ======================================== */

@media (max-width: 1024px) {
    /* 1. 전체 컨테이너 및 하단 여백 축소 */
    .qna-container {
        width: 100% !important;
        max-width: none;
        margin-bottom: 5px !important; /* 푸터와의 간격을 극소화 */
    }

    /* 2. 안내 문구: 한 줄 유지 */
    .qna-header .subtitle {
        font-size: 10.5px !important;
        letter-spacing: -0.8px;
        white-space: nowrap;
        margin-bottom: 8px; /* 표와의 간격 살짝 축소 */
    }

    /* 3. 표 레이아웃 및 텍스트 크기 축소 */
    .qna-table {
        table-layout: fixed;
        width: 100% !important;
    }

    .qna-table th {
        width: 30% !important;    /* 항목명 너비 최적화 */
        font-size: 11px !important;
        padding: 6px 5px !important;
    }

    .qna-table td {
        width: 70% !important;
        padding: 6px 5px !important;
    }

    /* 4. 입력창 글씨 크기 및 패딩 정밀 축소 */
    .qna-table input, 
    .qna-table textarea {
        font-size: 11.5px !important; /* [수정] 입력 글씨를 더 슬림하게 */
        padding: 5px 7px !important;  /* 내부 여백 축소 */
    }

    .qna-table input::placeholder,
    .qna-table textarea::placeholder {
        font-size: 11px !important;   /* 안내 문구 크기 축소 */
    }

    .qna-table textarea {
        height: 110px !important;
    }

    /* 5. 개인정보 동의 영역 여백 제거 */
    .form-footer {
        margin-top: 20px !important;   /* [수정] 표 하단 선과의 간격 확보 */
        display: flex;
        flex-direction: column;
        align-items: center;           /* 모든 요소를 가로 중앙 정렬 */
        gap: 15px !important;          /* [수정] 체크박스와 버튼 사이 간격 넓힘 */
    }

    /* 2. 체크박스와 글씨 정렬 수정 */
    .privacy-check {
        display: flex;                 /* 플렉스 박스로 가로 정렬 */
        align-items: center;           /* 체크박스와 글씨 높이 맞춤 */
        justify-content: center;       /* 중앙 배치 */
        font-size: 12px !important;
        color: #666;
        cursor: pointer;
    }

    .privacy-check input {
        width: 15px !important;        /* [수정] 체크박스 크기 살짝 키움 */
        height: 15px !important;
        margin-right: 8px !important;  /* [수정] 체크박스와 글씨 사이 간격 확보 */
        margin-top: 0 !important;      /* 위로 쏠림 방지 */
    }

    /* 6. 문의하기 버튼 슬림화 및 하단 여백 제거 */
    .submit-btn {
        width: 100% !important;
        max-width: 220px;
        height: 30px !important;
        font-size: 14px !important;
        margin-bottom: -5px !important; /* [수정] 푸터와의 여유 공간 확보 */
    }

    /* 7. 첨부파일 안내문구 */
    .qna-table td p {
        font-size: 10px !important;
        margin: 2px 0 0 0 !important; /* 문구 위쪽 여백 최소화 */
    }

    /* 프로젝트 상단 내비게이션 스타일 */ 
    .news-nav {
        flex-direction: column;
        gap: 5px;
        margin-top: 70px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .nav-title {
        font-size: 25px;
        margin-top: 5px;
        margin-bottom: 5px;
   }
    .nav-tabs {
        width: 100%;
        display: flex;         /* flexbox 활성화 확인 */
        flex-wrap: nowrap;     /* 한 줄로 가득 채우려면 nowrap, 줄바꿈 허용시 wrap */
        gap: 3px;
        padding: 0;            /* 불필요한 패딩 제거 */
    }

    .tab-item {
        flex: 1;               /* 핵심: 자식 요소가 너비를 균등하게 나눠 가짐 */
        min-width: 0;          /* 텍스트가 길어질 경우 대비 */
        text-align: center;    /* 텍스트 중앙 정렬 */
        font-size: 12px;
        height: 30px;        
    }

}

@media (max-width: 640px) {
    .qa-main {
        padding-left: 10px;
        padding-right: 10px;
    }

}