/* 헤더 전체 컨테이너 (중복 선언 통합 및 flex 설정) */
.main-header {
    width: 100%;
    height: 80px;
    background-color: #fbe6ff;
    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: #af60bf; }
#section_career { background-color: #d6a1e0; }
#section_contact { background-color: #fdf3ff; }


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

/* 불필요하게 밀어내던 padding을 없애고 중앙으로 모음 */
.contents section h1,
.contents section h2,
.contents section p {
    padding-left: 0;
    padding-right: 0;
    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: #854093;
    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: #77108b; 
}

.mo-br {
    display: none; /* 기본적으로 데스크탑에서는 보이지 않음 (공백 유지) */
}

.map-container {
    width: 100%;
    max-width: 800px; /* 폼과 동일한 최대 너비 적용 */
    margin: 30px auto; /* 중앙 정렬 및 위아래 여백 */
    border-radius: 8px; /* 모서리를 둥글게 처리해 세련된 느낌 추가 */
    overflow: hidden; /* 둥근 모서리 밖으로 지도가 삐져나오지 않게 방어 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 약간의 그림자 효과 */
}

.map-container iframe {
    width: 100%;
    height: 350px;
    display: block;
}

/* ==========================================
   [반응형] 태블릿 세로 모드 (max-width: 820px 기준)
========================================== */
@media screen and (max-width: 820px) {
    /* 1. 좌우 여백 10%로 축소 (h1 라인 및 전체 레이아웃 기준) */
    .main-header {
        padding: 0 10%;
    }
    .contents section .inner,
    .main-footer .inner {
        padding: 0 10%;
    }

    /* 2. 헤더 메뉴 구조 변경: topmenu와 lang을 두 줄로 분리하고 오른쪽 정렬 */
    nav.header-nav {
        flex-direction: column; /* 메뉴를 위아래 두 줄로 꺾음 */
        align-items: flex-end; /* 오른쪽 정렬 */
        justify-content: center;
        gap: 8px; /* 두 줄 사이의 간격 */
    }
    
    .header-nav .topmenu {
        width: auto; /* 데스크탑의 고정 너비(380px) 해제 */
        gap: 20px;
    }

    /* 3. Works, Career 섹션 텍스트 가운데 정렬 및 기존 여백 밀어내기 초기화 */
    #section_works .inner,
    #section_career .inner {
        text-align: center;
    }
    
    #section_works .inner h1,
    #section_works .inner h2,
    #section_works .inner p,
    #section_career .inner h1,
    #section_career .inner h2,
    #section_career .inner p {
        padding-left: 0;
        padding-right: 0;
    }

    /* 4. Contact Form 구조 변경: 라벨을 입력칸 위로 올리기 */
    .contact-form .input-group {
        flex-direction: column;
        align-items: flex-start; /* 라벨과 입력칸을 왼쪽 벽으로 밀착 */
    }
    .contact-form .input-group label {
        width: 100%; /* 라벨이 한 줄을 온전히 차지하도록 설정 */
        margin-bottom: 8px; /* 라벨과 아래 입력칸 사이의 숨통 틔우기 */
        text-align: left;
    }
    .contact-form .input-group.align-top label {
        padding-top: 0; /* 데스크탑에 있던 상단 여백 제거 */
    }
}


/* ==========================================
   [반응형] 태블릿 & 모바일 세로 모드 (Portrait) 공통
   기준: 가로 1024px 이하 & 기기를 세로로 들었을 때
========================================== */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    
    /* 1. 전체 여백 10%로 축소 (h1 밑줄 여백도 동일하게 10%로 맞춰짐) */
    .main-header,
    .contents section .inner,
    .main-footer .inner {
        padding: 0 10%;
    }

    /* 2. 로고 숨김 처리 */
    .main-header .logo {
        display: none;
    }

    /* 3. 헤더 네비게이션 2줄 분리 및 우측 정렬 */
    .main-header {
        justify-content: flex-end; /* 로고가 사라졌으니 전체 요소를 오른쪽으로 밀착 */
    }
    nav.header-nav {
        width: 100%;
        flex-direction: column; /* 가로 배열을 세로 배열로 변경 (2줄) */
        justify-content: center;
        align-items: flex-end; /* 2줄 모두 오른쪽 정렬 */
        gap: 15px; /* 주 메뉴와 언어 메뉴 사이의 상하 간격 */
    }
    .header-nav .topmenu {
        width: auto; 
        gap: 30px; /* 메뉴 간 가로 간격 */
        justify-content: flex-end;
    }

    /* 4. 섹션 내용 가운데 정렬 및 기존 데스크탑 밀어내기 속성 초기화 */
    #section_works .inner,
    #section_career .inner {
        text-align: center;
    }
    #section_works .inner h1,
    #section_works .inner h2,
    #section_works .inner p,
    #section_career .inner h1,
    #section_career .inner h2,
    #section_career .inner p {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    /* 5. Contact 폼 수직(Column) 배치 */
    .contact-form .input-group {
        flex-direction: column; /* 라벨과 입력칸을 위아래로 배치 */
        align-items: flex-start; /* 왼쪽 정렬 고정 */
        gap: 8px; /* 라벨과 입력칸 사이 여백 */
    }
    .contact-form .input-group label {
        width: 100%; /* 데스크탑에서 고정했던 라벨 폭 해제 */
        padding-top: 0; /* 문의사항 텍스트에리어용 상단 패딩 초기화 */
    }
}

/* ==========================================
   [반응형] 모바일 세로 모드 (Portrait) 전용
   기준: 가로 768px 이하 & 기기를 세로로 들었을 때
========================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .header-nav .topmenu {
        width: 100%;
        justify-content: space-between; 
        gap: 12; 
        padding-left: 20px;
    }
    .header-nav .topmenu > li {
        flex: 1; 
        text-align: center; 
    }
    .header-nav .topmenu > li > a {
        font-size: 15px; /* 기존 14px에서 16px로 확대 */
        white-space: nowrap;
    }
    
    /* 2. 언어 메뉴(lang) 크기 축소 (기존 14px의 약 80%) */
    .header-nav .lang > li > a {
        font-size: 10px; 
        padding: 4px; 
    }

    /* ==========================================
       3. 모바일 전용 텍스트 크기 확대 및 가독성 세팅 (신규 추가) 
    ========================================== */
    .contents section h1 {
        font-size: 24px; /* 데스크탑(40px)보다 수치는 작지만, 모바일 화면 비율상 꽉 차 보임 */
        margin-bottom: 0.8em; /* 선 아래 여백도 모바일에 맞게 살짝 축소 */
    }
    
    .contents section h2 {
        font-size: 14px;
        line-height: 1.4; /* 줄간격을 넓혀서 읽기 편하게 조정 */
        margin-bottom: 15px;
        word-break: keep-all; /* 단어가 중간에 쪼개지며 줄바꿈 되는 현상 방어 */
    }
    
    .contents section p {
        font-size: 14px; /* 모바일 본문 표준 가독성 사이즈 */
        line-height: 1.6;
    }

    /* ==========================================
    다국어 줄바꿈(Word-break) 예외 처리 (모바일/태블릿 공통 적용을 원하면 미디어 쿼리 밖으로 빼도 무방해)
    ========================================== */

    /* 1. 기본 설정 (한국어, 영어 기준) */
    .contents section h2,
    .contents section p {
        word-break: keep-all; /* 단어 쪼개짐 방지 */
        overflow-wrap: break-word; /* 혹시나 너무 긴 영단어가 있으면 박스 안에서 줄바꿈 */
    }

    /* 2. 일본어(jp)와 중국어(tc)일 때의 예외 처리 */
    /* html 태그의 lang 속성을 인식해서 특정 언어일 때만 강제로 덮어씌움 */
    html[lang="jp"] .contents section h2,
    html[lang="jp"] .contents section p,
    html[lang="tc"] .contents section h2,
    html[lang="tc"] .contents section p {
        word-break: break-all; /* 띄어쓰기가 없어도 화면 끝에 닿으면 무조건 글자 단위로 뚝뚝 끊어서 줄바꿈 */
    }

    /* ==========================================
       Contact Us 폼 모바일 전용 최적화
    ========================================== */
    
    /* 1. 폼 컨테이너와 입력 그룹이 화면 가로를 100% 쓰도록 강제 */
    .contact-form,
    .contact-form .input-group {
        width: 100%;
    }

    /* 2. 입력칸 가로 채움 & 높이 슬림화 */
    .contact-form input,
    .contact-form textarea {
        width: 100%; /* 오른쪽 빈 공간 없이 끝까지 꽉 차게 렌더링 */
        padding: 10px 12px; /* 기존 15px에서 10px로 줄여서 뚱뚱한 느낌 제거 */
        font-size: 14px; /* 글자 크기도 모바일에 맞게 살짝 축소 */
    }

    /* 3. 문의사항(textarea) 높이 비율 조정 */
    .contact-form textarea {
        flex: none !important; /* 핵심: 데스크탑에서 물려받은 플렉스 속성 강제 해제 */
        height: 25vh !important;
    }

    /* 4. 전송 버튼 사이즈 최적화 */
    .contact-form .submit-btn {
        padding: 14px; /* 버튼 높이도 살짝 줄여서 전체적인 밸런스 통일 */
        font-size: 16px;
        margin-top: 15px; /* 위쪽 입력칸과의 여백 확보 */
    }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .mo-br {
        display: block; 
    }
}

@media screen and (max-width: 768px) {
    .map-container iframe {
        height: 250px;
    }
}