/* Header Component */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--spacing-lg) + 8px) var(--spacing-xxl) var(--spacing-lg);
    height: var(--header-height-desktop);
}

/* Logo */
.logo {
    width: var(--logo-width-desktop);
    height: var(--logo-height-desktop);
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Header Right Group */
.header-right-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl); /* 48px for desktop */
}

/* Language Dropdown */
.language-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.language-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* 국기와 화살표 사이 gap 제거 */
    width: auto; /* fit to content per design */
    height: auto; /* 높이 자동 조정 */
    padding: 0; /* 패딩 제거 */
    background: transparent; /* 배경 제거 */
    border: none; /* 테두리 제거 */
    border-radius: 0; /* border-radius 제거 */
    cursor: pointer;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
}

.language-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #40454C;
    line-height: 20px;
    white-space: nowrap;
}

.language-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 21px; /* Figma 디자인: 32:21 비율 */
    flex-shrink: 0;
    border-radius: 8px; /* 국기 아이콘에 border-radius 추가 */
    overflow: hidden; /* border-radius 적용을 위한 overflow */
}

.language-flag svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 화살표 아이콘 제거됨 - 국기 아이콘 클릭으로 드롭다운 열림 */

.language-button:hover {
    opacity: 0.8; /* 호버 시 투명도 변경 */
}

/* Language Button - Dark Background Version (for index, tech-page, about-us-page) */
body:not(.career-page):not(.contact-page):not(.notes-page):not(.notes-detail-page) .language-button {
    background: transparent; /* 배경 제거 */
    border: none; /* 테두리 제거 */
}

body:not(.career-page):not(.contact-page):not(.notes-page):not(.notes-detail-page) .language-button:hover {
    opacity: 0.8; /* 호버 시 투명도 변경 */
}

/* 화살표 아이콘 제거됨 */

/* Language Menu */
.language-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: auto; /* 왼쪽 정렬 해제 */
    right: 0; /* 오른쪽 기준 정렬 */
    width: auto; /* 내용에 맞춤 */
    min-width: 92px; /* 최소 너비 */
    height: auto;
    background: #FFFFFF;
    border-radius: 8px; /* 16px → 8px */
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
    overflow: visible;
    padding: 16px; /* 12px 22px → 16px */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 8px → 16px */
    justify-content: flex-start;
    align-items: flex-start;
}

.language-dropdown.active .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-option {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 왼쪽 정렬 */
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    font-family: 'Pretendard', 'Inter', sans-serif;
    font-weight: 500; /* 700 → 500 (medium) */
    font-size: 12px; /* 14px → 12px */
    color: #222831; /* #6A6E74 → #222831 */
    line-height: 1.4; /* 20px → 1.4 */
    letter-spacing: -0.24px; /* 새로 추가 */
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    gap: 8px; /* 국기와 텍스트 사이 gap */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.language-option-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: calc(24px * 21 / 32); /* 15.75px - 정확한 32:21 비율 */
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden; /* border-radius 적용을 위한 overflow */
}

.language-option-flag svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.language-option-text {
    font-family: 'Pretendard', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #222831;
    line-height: 1.4;
    letter-spacing: -0.24px;
    white-space: nowrap;
}

.language-option:hover {
    color: #222831; /* 호버 시에도 동일한 색상 유지 */
    opacity: 0.8; /* 호버 시 투명도 변경 */
}

.language-option.active {
    color: #222831; /* 활성 상태 색상 */
}

/* Language Menu - Dark Background Version */
body:not(.career-page):not(.contact-page):not(.notes-page):not(.notes-detail-page) .language-menu {
    background: #FFFFFF; /* 어두운 배경에서도 흰색 배경 유지 */
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}

body:not(.career-page):not(.contact-page):not(.notes-page):not(.notes-detail-page) .language-option {
    color: #222831; /* 어두운 배경에서도 동일한 색상 */
}

body:not(.career-page):not(.contact-page):not(.notes-page):not(.notes-detail-page) .language-option:hover {
    color: #222831; /* 호버 시에도 동일한 색상 */
    opacity: 0.8; /* 호버 시 투명도 변경 */
}

body:not(.career-page):not(.contact-page):not(.notes-page):not(.notes-detail-page) .language-option.active {
    color: #222831; /* 활성 상태 색상 */
}

/* Language Flag - White Background Version (for career, contact, notes pages) */
/* 태극기 색상을 더 진하게 조정 */
.career-page .language-flag svg path[fill="#D80027"],
.contact-page .language-flag svg path[fill="#D80027"],
.notes-page .language-flag svg path[fill="#D80027"],
.notes-detail-page .language-flag svg path[fill="#D80027"] {
    fill: #C41E3A !important; /* 더 진한 빨간색 */
}

.career-page .language-flag svg path[fill="#0052B4"],
.contact-page .language-flag svg path[fill="#0052B4"],
.notes-page .language-flag svg path[fill="#0052B4"],
.notes-detail-page .language-flag svg path[fill="#0052B4"] {
    fill: #003D82 !important; /* 더 진한 파란색 */
}

/* 드롭다운 내부 태극기 색상도 동일하게 조정 */
.career-page .language-option-flag svg path[fill="#D80027"],
.contact-page .language-option-flag svg path[fill="#D80027"],
.notes-page .language-option-flag svg path[fill="#D80027"],
.notes-detail-page .language-option-flag svg path[fill="#D80027"] {
    fill: #C41E3A !important; /* 더 진한 빨간색 */
}

.career-page .language-option-flag svg path[fill="#0052B4"],
.contact-page .language-option-flag svg path[fill="#0052B4"],
.notes-page .language-option-flag svg path[fill="#0052B4"],
.notes-detail-page .language-option-flag svg path[fill="#0052B4"] {
    fill: #003D82 !important; /* 더 진한 파란색 */
}

/* Menu Icon */
.menu-icon {
    width: 32px;
    height: 32px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    transition: all 0.3s ease;
}

.menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Menu Icon Hover Effect */
.menu-icon:hover {
    transform: scale(1.1);
}

.menu-icon:hover img {
    opacity: 0.8;
}

/* Header Scroll Effect - 제거됨 (상단 고정) */
/* .header.scrolled {
    background: transparent;
} */

/* Menu Icon Active State */
.menu-icon.active {
    opacity: 0.6;
    transform: scale(0.9);
}

/* Hide menu icon when menu overlay is open - applies to all pages */
/* Use visibility instead of display to maintain layout space */
body.menu-active .menu-icon,
body.menu-active .header .menu-icon {
    visibility: hidden !important;
}