/* 헤더 전체 컨테이너 (중복 선언 통합 및 flex 설정) */
.main-header {
    width: 100%;
    height: 80px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between; /* 자식인 로고와 nav를 양 끝으로 쫙 밀어냄 */
    padding: 0 20%; /* 핵심: 헤더 자체에 좌우 10% 여백을 줌 */
    box-sizing: border-box; /* 패딩이 들어가도 전체 가로폭이 100%를 넘지 않게 방어 */
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 1000; /* 다른 요소들보다 무조건 위에 떠 있도록 순위 격상 */
}

/* 좌측 메뉴 버튼 영역 (높이 상속) */
.main-header .menu {
    height: 100%;
}
.main-header .menu a {
    display: block;
    height: 100%;
}
.main-header .menu img {
    height: 100%;
    width: auto;
    object-fit: contain; 
}

/* 네비게이션 영역 (고정 높이 제거 및 상속 복구) */
nav.header-nav {
    height: 100%; 
    box-sizing: border-box;
    display: flex; 
    align-items: center; 
    gap: 60px; /* 주메뉴(topmenu)와 언어메뉴(lang) 사이의 간격 */
}

/* 로고 영역 */
.main-header .logo {
    height: 100%;
}
.main-header .logo a {
    display: block;
    height: 100%;
}
.main-header .logo img {
    height: 100%;
    width: auto;
    object-fit: contain; 
    vertical-align: middle;
}

/* GNB (주 메뉴) 영역 */
.header-nav .topmenu {
    width: 380px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* 메뉴 텍스트 자체를 수직 중앙 정렬 */
    height: 100%;
}
.header-nav .topmenu > li > a {
    font-size: 16px; 
    color: #333333;
    display: block; /* 클릭 영역을 텍스트 밖으로 넓히기 위해 블록 처리 */
}

/* 6. Topmenu (언어 선택 등) 영역 신규 추가 */
.header-nav .lang {
    display: flex; /* 세로로 쌓인 메뉴를 가로로 배치 */
    gap: 20px; /* KR, EN, JP 사이의 간격 */
    align-items: center;
}

.header-nav .lang > li > a {
    font-size: 14px; /* 주 메뉴보다 살짝 작게 설정해 위계 구분 */
    color: #666666;
    display: block;
}

.contents {
    width: 100%;
    padding-top: 80px; /* 헤더 높이(80px)만큼 윗공간을 강제로 확보 */
}

/* 부드러운 스크롤 이동 효과 (전체 문서 적용) */
html {
    scroll-behavior: smooth;
}

/* 선택 사항: 네비게이션을 위해 헤더를 상단에 고정하고 싶다면 아래 주석을 해제해.
  .main-header {
      position: sticky;
      top: 0;
      z-index: 1000;
  }
*/

/* 각 섹션의 뼈대 설정 */
.contents section {
    width: 100%;
    min-height: 60vh; /* 화면 높이의 60%를 기본으로 하되, 내용이 길어지면 자동 확장 */
    display: flex; /* 내부 콘텐츠를 세로 중앙에 배치하기 위함 */
    align-items: center; 
    box-sizing: border-box;
    padding: 80px 0; /* 위아래로 숨쉴 여백 확보 */
}

/* 1. 모든 섹션 뼈대 고정 (구분선 100% 길이 유지를 위한 공통 래퍼) */
.contents section .inner,
.main-footer .inner {
    width: 100%;
    padding: 0 20%; /* 화면 양쪽 20% 여백 고정 (헤더와 폭 일치) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 2. h1과 절대 위치(Absolute)를 활용한 구분선 세팅 */
.contents section h1 {
    font-size: 40px; 
    margin: 0;
    width: 100%; 
    position: relative; /* 자식인 ::after 선이 도망가지 못하게 가두는 기준점 */
    padding-bottom: 0.5em; /* 선이 그려질 하단 공간 확보 */
    margin-bottom: 1em; /* 선 아래쪽 텍스트와의 여백 확보 */
    box-sizing: border-box;
}

/* 선을 절대 위치로 띄워서 글자의 움직임과 분리함 */
.contents section h1::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0; /* h1의 맨 아래 바닥에 찰싹 붙임 */
    left: 0; /* 글자가 밀려도 무조건 맨 왼쪽 끝에서 시작 */
    width: 100%; /* 폭을 100% 꽉 채움 */
    border-bottom: 0.08em solid #333; 
}

/* 3. 섹션별 배경색 지정 (기존 유지) */
#section_about { background-color: #ffffff; }
#section_works { background-color: #f2f2f2; }
#section_career { background-color: #e8e8e8; }
#section_contact { background-color: #dfdfdf; }


/* ==========================================
   4. 섹션별 텍스트 배치 제어 (선은 고정, 텍스트만 이동)
========================================== */

/* About, Contact: 글자 정중앙 배치 */
#section_about .inner,
#section_contact .inner {
    text-align: center; 
}

/* Works: 왼쪽 정렬 후, 텍스트만 20% 안쪽으로 밀어냄 */
#section_works .inner {
    text-align: left; 
}
#section_works .inner h1,
#section_works .inner h2,
#section_works .inner p {
    padding-left: 20%; /* 핵심: 선은 놔두고 글자만 왼쪽에서 20% 이동 */
    box-sizing: border-box;
}

/* Career: 오른쪽 정렬 후, 텍스트만 20% 안쪽으로 밀어냄 */
#section_career .inner {
    text-align: right; 
}
#section_career .inner h1,
#section_career .inner h2,
#section_career .inner p {
    padding-right: 20%; /* 핵심: 선은 놔두고 글자만 오른쪽에서 20% 이동 */
    box-sizing: border-box;
}

/* 푸터 디자인 설정 (기존 유지) */
.main-footer {
    width: 100%;
    background-color: #333333; 
    color: #ffffff;
    padding: 40px 0;
    text-align: center;
    font-size: 14px;
}

/* ==========================================
   5. Contact Form 디자인 설정 (좌측 라벨, 우측 입력칸 구조)
========================================== */
.contact-form {
    width: 100%;
    max-width: 800px; 
    margin: 40px auto 0; 
    display: flex;
    flex-direction: column;
    gap: 20px; /* 각 줄 사이의 간격 */
}

/* 폼 요소 가로 배치 래퍼 */
.contact-form .input-group {
    display: flex;
    flex-direction: row; /* 핵심: 라벨과 입력칸을 가로로 배치 */
    align-items: center; /* 한 줄짜리 입력칸일 때 수직 중앙 정렬 */
    width: 100%;
}

/* 문의사항(textarea) 전용: 라벨 텍스트를 위쪽으로 정렬 */
.contact-form .input-group.align-top {
    align-items: flex-start; 
}
.contact-form .input-group.align-top label {
    padding-top: 15px; /* 입력칸의 안쪽 여백과 시각적 선을 맞춤 */
}

/* 라벨(타이틀) 넓이 고정 */
.contact-form .input-group label {
    width: 120px; /* 라벨 영역의 가로폭을 단단하게 고정 */
    flex-shrink: 0; /* 화면이 줄어들어도 라벨 폭이 찌그러지지 않게 방어 */
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    text-align: left;
}

/* 필수 항목(*) 표시 디자인 */
.contact-form .input-group label .required {
    color: #d93025; 
    margin-left: 4px;
}

/* 오른쪽 입력칸이 남은 영역을 모두 차지하도록 설정 */
.contact-form input,
.contact-form textarea {
    flex: 1; /* 부모 영역 안에서 남는 공간을 100% 꽉 채움 */
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #fafafa;
    font-size: 16px;
    font-family: 'Noto Sans KR', sans-serif; 
    box-sizing: border-box;
    transition: border-color 0.3s ease; 
}

/* 포커스 효과 및 사이즈 고정 */
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #333333; 
    background-color: #ffffff;
}

.contact-form textarea {
    height: 200px;
    resize: none; 
}

/* 전송 버튼 디자인 */
.contact-form .submit-btn {
    width: 100%; /* 버튼은 하단 전체 폭을 쓰도록 함 */
    padding: 18px;
    background-color: #333333;
    color: #ffffff;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px; 
}

.contact-form .submit-btn:hover {
    background-color: #555555; 
}