/* 모든 페이지: 히어로/상단 섹션이 투명 헤더 뒤로 올라오도록 margin-top 제거 */
.full-page-hero,
.hero,
.hero-section,
.support-hero,
.bc-intro-section {
    margin-top: 0;
}

body.main-page .full-page-hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    width: 100%;
}

.hero-background {
    top: 0;
    height: 100%;
}

section {
    margin-top: 0;
}

/* ===== 모든 페이지 공통: 기본 투명 헤더 ===== */
/* 로고·nav·햄버거 흰색 (투명 배경 위에서 가시성 확보) */
header .logo,
header .logo:hover {
    color: white;
}

header .logo-image {
    filter: brightness(0) invert(1);
}

header .nav-menu li a,
header .nav-menu li a:hover {
    color: white;
}

header .hamburger-menu,
header .hamburger-menu:hover,
header .hamburger-menu.active {
    color: white;
}

/* ===== 스크롤 후 sticky: 흰 배경 + 어두운 텍스트 ===== */
header.sticky {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header.sticky .header-shutter {
    background-color: white;
}

header.sticky .logo,
header.sticky .logo:hover {
    color: #333;
}

header.sticky .logo-image {
    filter: none;
}

header.sticky .nav-menu li a,
header.sticky .nav-menu li a:hover {
    color: #333;
}

header.sticky .hamburger-menu,
header.sticky .hamburger-menu:hover,
header.sticky .hamburger-menu.active {
    color: #333;
}

/* ===== 모바일: 투명 헤더, 로고·햄버거 흰색 ===== */
@media (max-width: 1145px) {
    header .logo,
    header .logo:hover {
        color: white;
    }
    header .logo-image {
        filter: brightness(0) invert(1);
    }
    header .hamburger-menu,
    header .hamburger-menu:hover,
    header .hamburger-menu.active {
        color: white;
    }
    .hero-section,
    .support-hero {
        padding-top: 60px;
    }
    .hero-content {
        padding: 0;
    }
}

/* ?�더 기본 ?��???- 모든 ?�이지?�서 ?�일???�치?� 구조 */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: none;
    min-height: 90px;
    background-color: transparent; /* 기본 투명 */
    box-shadow: none;
}

/* header-container - 모든 ?�이지?�서 ?�일???�이?� ?�치 */
.header-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 5px 0 5px; /* 좌우 ?�딩???�일?�게 5px�??�정 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* ?�체 ?�비 ?�용 */
    height: 90px; /* 고정 높이 (헤더 높이 = 네비 영역만) */
    min-height: 90px; /* 최소 ?�이 보장 */
    position: relative; /* ?�롭?�운 메뉴??기�???*/
}

/* 고정 header-container: 항상 visible (투명 헤더의 흰색 텍스트) */
/* 고정 header-container: 항상 visible (투명 헤더의 흰색 텍스트) */
.header-container-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: transparent;
    pointer-events: none;
}

/* 헤더 셔터: 애니메이션 대상 (clip-path 적용) */
.header-shutter {
    position: relative;
    width: 100%;
    z-index: 1000;
    overflow: visible;
    will-change: clip-path;
}

header.hamburger-active .header-shutter {
    z-index: 1002;
}

/* ?�더 ?�쪽 ?�역 (로고�? */
.header-left {
    display: flex;
    align-items: center;
    padding-left: 25px;
    margin-left: 30px;
}

/* ?�더 중앙 ?�역 (?�비게이??메뉴) */
.header-center {
    position: absolute;
    left: 60%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding-top: 0;
}

/* ?�더 ?�른�??�역 (?�버�?메뉴) */
.header-right {
    display: flex;
    align-items: center;
    margin-right: 15px; /* 조금 ???�른쪽으�?*/
    margin-left: 41px;
}

/* 로고 ?��???- 모든 ?�이지?�서 ?�일???�치?� ?��???*/
.logo {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
    text-decoration: none;
    transition: none;
    padding: 0;
    margin: 0 0 0 -20px;
    min-height: 40px;
}

.logo:hover {
    color: #00695C; /* ?�버 ?�상 조정 (???�두??�?��) */
}

/* ?�비게이??메뉴 ?��???- 모든 ?�이지?�서 ?�일???�치?� ?��???*/
.nav-menu {
    display: flex;
    list-style: none;
    gap: 131px;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
}

.nav-menu li {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    margin: 0;
}

.nav-menu li a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 1.1rem;
    transition: none;
    position: relative;
    margin: 0;
    white-space: nowrap;
}



/* 로고 ?��?지 ?��???*/
.logo-image {
    height: 60px;
    width: 180px;
    margin: 8px 0 0 0;
    transition: transform 0.3s ease;
    min-height: 40px;
    min-width: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: none;
}

.logo-image:hover {
    transform: scale(1.05);
}





.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    /* ?�롭?�운 메뉴???�색 배경???��??�여 가?�성???�입?�다. */
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 그림??조금 ??진하�?*/
    z-index: 1002; /* ?�더보다 ?�에 ?�도�?z-index ?�게 ?�정 */
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden; /* ?�근 모서�??�용???�해 추�? */
}

.dropdown-content a {
    color: #333; /* ?�롭?�운 메뉴 ?�스???�상 ?��? */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-content a:hover {
    background-color: #e0f2f7; /* ?�버 배경??조정 (밝�? ?�랑 계열) */
    color: #00695C;
}

/* ?�버�?메뉴 기본 ?��???- 모든 ?�이지?�서 ?��? */
.hamburger-menu {
    display: flex; /* flex�??�정 */
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px;
    z-index: 1003; /* 모든 메뉴보다 ?�에 */
    transition: color 0.3s ease, transform 0.3s ease;
    color: white;
    margin: 0; /* 마진 ?�거 */
    min-width: 40px; /* 최소 ?�비 보장 */
    min-height: 40px; /* 최소 ?�이 보장 */
    align-items: center;
    justify-content: center;
}

/* ?�버�?메뉴 ?�성???�태 */
.hamburger-menu.active {
    transform: rotate(90deg);
}

/* ?�버�?메뉴 ?�성????X ?�이콘으�?변�?*/
.hamburger-menu.active i {
    transform: rotate(-90deg);
}

/* 햄버거 메뉴 드롭다운 */

.hamburger-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1002;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ?�코?�언 ?��???*/
.accordion-item {
    border-bottom: none; /* 기본?�으�?구분???��? */
}

.accordion-item:last-child {
    border-bottom: none;
}

/* ?�체?�면?�서???�코?�언 ?�더�??�반 ?�목처럼 ?�시 */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default; /* ?�체?�면?�서???�릭 불�? */
    padding: 15px 0;
    margin: 0;
    transition: all 0.3s ease;
    user-select: none;
}

/* ?�체?�면?�서???�버 ?�과 ?�거 */
.accordion-header:hover {
    background-color: transparent;
}

.accordion-header span {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    font-family: 'Pretendard', sans-serif;
}

/* ?�체?�면?�서???�코?�언 ?�이�??��? */
.accordion-icon {
    font-size: 1rem;
    color: #666;
    transition: transform 0.3s ease;
    display: none; /* ?�체?�면?�서 ?�이�??��? */
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* ?�체?�면(1215px ?�상)?�서??모든 콘텐츠�? ??�� 보이?�록 */
@media (min-width: 1216px) {
    .accordion-content {
        max-height: none; /* ?�체?�면?�서???�이 ?�한 ?�음 */
        overflow: visible; /* ?�체?�면?�서???�버?�로???�시 */
        transition: none; /* ?�체?�면?�서???�환 ?�과 ?�음 */
        background-color: #f8f9fa;
        margin: 0;
        padding: 10px 20px 20px; /* ?�체?�면?�서????�� ?�딩 ?�용 */
    }

    .accordion-item.active .accordion-content {
        max-height: none; /* ?�체?�면?�서???�이 ?�한 ?�음 */
        padding: 10px 20px 20px;
    }
}

/* ?�코?�언???�쳐졌을 ?�만 구분???�시 */
.accordion-item.active {
    border-bottom: 1px solid #e0e0e0;
}

/* Chrome/Safari???�크롤바 ?�기�?- ?�이?�바 ?�롭?�운 */
@media (max-width: 1215px) {
    .hamburger-dropdown::-webkit-scrollbar {
        display: none;
    }
}

/* ?�이?�바 모드?�서�??�코?�언 기능 ?�성??*/
@media (max-width: 1215px) {
    /* ?��? ?�면?�서???�코?�언 ?�더 ?�릭 가??*/
    .accordion-header {
        padding: 20px 0;
        background-color: white;
        border-bottom: none; /* ?�더 ?�래 구분???�거 */
        cursor: pointer; /* ?��? ?�면?�서???�릭 가??*/
    }
    
    .accordion-header:hover {
        background-color: #f8f9fa;
    }
    
    /* ?��? ?�면?�서???�코?�언 ?�이�??�시 */
    .accordion-icon {
        display: block; /* ?��? ?�면?�서 ?�이�??�시 */
    }
    
    /* ?��? ?�면?�서???�코?�언 콘텐�??��?/?�시 */
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background-color: #f8f9fa;
        border-top: 1px solid #e0e0e0;
        padding: 15px 20px 20px; /* ?�딩????�� ?�일?�게 ?��? */
        box-sizing: border-box;
    }
    
    .accordion-item.active .accordion-content {
        max-height: 300px;
        /* ?�딩?� ?��? ?�일?�게 ?��? */
    }
    
    /* ?��? ?�면?�서??기본?�으�?구분???��? */
    .accordion-item {
        border-bottom: none;
    }
    
    /* ?�이?�바 모드?�서 ?�코?�언???�쳐졌을 ?�만 구분???�시 */
    .hamburger-dropdown .dropdown-column.accordion-item.active {
        border-bottom: 1px solid #e0e0e0;
    }
}

/* ?�버�?메뉴 ?�성?????�롭?�운 ?�시 */
.hamburger-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: none; /* 모바?�에?�는 height�??�어?��?�?max-height ?�거 */
    pointer-events: auto;
}

/* ?�롭?�운 메뉴 ?��? */
.hamburger-dropdown .dropdown-container {
    max-width: 1350px; /* header-container?� ?�일??최�? ?�비 */
    margin: 0 auto; /* 중앙 ?�렬 */
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.hamburger-dropdown .dropdown-column {
    flex: 1;
    min-width: 200px;
}

.hamburger-dropdown .column-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #1a237e;
    font-family: 'Pretendard', sans-serif;
}

.hamburger-dropdown .column-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hamburger-dropdown .column-links li {
    margin: 0;
    padding: 0;
}

.hamburger-dropdown .column-links a {
    display: block;
    padding: 8px 0;
    color: #666;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: all 0.2s ease;
    font-family: 'Pretendard', sans-serif;
}

.hamburger-dropdown .column-links a:hover {
    color: #666; /* ?�버 ?�에???�래 ?�상 ?��? */
    padding-left: 8px; /* ?�쪽 ?�동 ?�과???��? */
}

/* ?�버�?메뉴 ?�성?????�더 ?��???변�?*/
header.hamburger-active {
    background-color: white;
}

/* 1215px ?�상?�서�?메인?�이지 ?�버�?메뉴 ?�성?????��????�더 */
@media (min-width: 1216px) {
    body.main-page header.hamburger-active {
        background-color: white;
    }
}

/* ?�버�?메뉴 ?�성????fixed-side-menu ?��? */
header.hamburger-active ~ .fixed-side-menu,
body.hamburger-active .fixed-side-menu,
.hamburger-active .fixed-side-menu,
.hamburger-active ~ .fixed-side-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ?�버�?메뉴 비활?�화 ??fixed-side-menu 복원 */
header:not(.hamburger-active) ~ .fixed-side-menu,
body:not(.hamburger-active) .fixed-side-menu,
:not(.hamburger-active) .fixed-side-menu,
:not(.hamburger-active) ~ .fixed-side-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



/* ?�버�?메뉴 ?�성????로고 ?��?지�??�래 ?�상?�로 */
header.hamburger-active .logo-image {
    /* 메인?�이지???�색 ?�터 ?�과 ?�전 ?�거?�고 ?�래 ?�상?�로 */
    filter: brightness(1) invert(0);
}

/* 메인?�이지?�서???�버�?메뉴 ?�성????로고 ?�래 ?�상 보장 */
body.main-page header.hamburger-active .logo-image {
    filter: brightness(1) invert(0);
}

/* ??강력???�택?�로 로고 ?�래 ?�상 보장 */
body.main-page header.hamburger-active .logo,
body.main-page header.hamburger-active .logo:hover,
body.main-page header.hamburger-active .logo-image {
    filter: brightness(1) invert(0);
}



/* ?�버�?메뉴 ?�성?????�버�?메뉴 ?�이콘을 검?�색?�로 */
header.hamburger-active .hamburger-menu {
    color: #333;
}

/* ?�버�?메뉴 ?�성?????�비게이??메뉴 ?�스???��? */
header.hamburger-active .nav-menu li a {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ?�버�?메뉴 ?�성????로고 ?�스?��? 검?�색?�로 */
header.hamburger-active .logo {
    color: #333;
}

/* 메인?�이지?�서???�버�?메뉴 ?�성?????�스???�상 보장 */
body.main-page header.hamburger-active .hamburger-menu {
    color: #333;
}

/* 메뉴 글?�는 그�?�??�색 ?��??�되 ?��? */
body.main-page header.hamburger-active .nav-menu li a {
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}



body.main-page header.hamburger-active .logo {
    color: #333;
}

/* 1215px ?�상?�서 메인?�이지 ?�버�?메뉴 ?�성????로고 ?�상 ?�용 */
@media (min-width: 1216px) {
    /* ??구체?�인 ?�택?�로 ?�선?�위 ?�임 */
    html body.main-page header.hamburger-active .header-left .logo,
    html body.main-page header.hamburger-active .header-left .logo:hover {
        color: #333;
    }
    
    html body.main-page header.hamburger-active .header-left .logo .logo-image {
        filter: brightness(1) invert(0);
    }
}



/* 1215px ?�하?�서 ?�버�?메뉴�??�른�??�이?�바 ?�태�?변�?*/
@media (max-width: 1215px) {
    html,
    body {
        overflow-x: clip;
    }

    /* ?�이?�바 ?�버?�이 */
    .hamburger-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(7, 15, 30, 0.42);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1001;
    }
    
    .hamburger-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .hamburger-dropdown {
        
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(320px, 86vw);
        max-width: 100vw;
        height: 100vh; /* ?�체 ?�면 ?�이 */
        background: white;
        border-radius: 0;
        transform: translateX(100%);
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        /* ?�크롤바 ?�기�?*/
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        z-index: 1002;
    }
    
    .hamburger-dropdown.active {
        
        transform: translateX(0);
    }
    
    .hamburger-dropdown .dropdown-container {
        max-width: none;
        margin: 0;
        padding: 80px 30px 30px; /* ?�단 ?�백 추�? */
        display: block; /* ?�로 배치�?변�?*/
        gap: 0;
    }
    
    .hamburger-dropdown .dropdown-column {
        flex: none;
        min-width: auto;
        margin-bottom: 30px;
        border-bottom: none; /* 기본?�으�?구분???��? */
        padding-bottom: 20px;
    }
    
    .hamburger-dropdown .dropdown-column:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    
    .hamburger-dropdown .column-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
        color: #333;
        border-bottom: none; /* ?�목 ?�래 구분???�거 */
        padding-bottom: 10px;
    }
    
    .hamburger-dropdown .column-links a {
        padding: 12px 0;
        font-size: 0.95rem;
        border-bottom: none; /* 링크 ?�래 구분???�거 */
        transition: all 0.2s ease;
    }
    
    .hamburger-dropdown .column-links a:hover {
        background-color: #f8f9fa;
        padding-left: 15px;
        color: #1a237e;
    }
    

    
    /* 모바?�에???�더가 ?�버�?메뉴 ?�성??????�� ?��???*/
    header.hamburger-active {
        background-color: white;
    }
    
    header.hamburger-active .logo-image {
        /* 메인?�이지???�색 ?�터 ?�과 ?�전 ?�거?�고 ?�래 ?�상?�로 */
        filter: brightness(1) invert(0);
    }
    
    /* 모바?�에?�도 ??강력???�택?�로 로고 ?�래 ?�상 보장 */
    body.main-page header.hamburger-active .logo,
    body.main-page header.hamburger-active .logo:hover,
    body.main-page header.hamburger-active .logo-image {
        filter: brightness(1) invert(0);
    }
    
    header.hamburger-active .hamburger-menu {
        color: #333;
    }
    
    /* 모바?�에???�버�?메뉴 ?�성?????�비게이??메뉴 ?�스???��? */
    header.hamburger-active .nav-menu li a {
        color: inherit;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    /* 모바?�에???�버�?메뉴 ?�성????로고 ?�스?��? 검?�색?�로 */
    header.hamburger-active .logo {
        color: #333;
    }
}

/* ?��? 모바???�면 */
@media (max-width: 768px) {
    .hamburger-dropdown .dropdown-container {
        padding: 25px 20px; /* ?��? ?�면?�서???�절??좌우 ?�딩 ?��? */
        gap: 15px;
    }
    
    .hamburger-dropdown .column-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .hamburger-dropdown .column-links a {
        padding: 8px 0;
        font-size: 0.9rem;
    }
}



/* ?�버�?메뉴 ?�이�??��???*/
.hamburger-menu i {
    transition: transform 0.3s ease;
}

/* ?�버�?메뉴 ?�성???�태 */
.hamburger-menu.active {
    color: #333; /* ?�성???�에??검?�색 ?��? */
    transform: rotate(90deg); /* 90???�전 ?�과 */
}

/* ?�버�?메뉴 ?�버 ?�과 */
.hamburger-menu:hover {
    color: #00695C; /* ?�버 ??�?��??*/
    transform: scale(1.1);
}

/* 1145px ?�하?�서 ?�비게이??메뉴 ?��? */
@media (max-width: 1145px) {
    .header-center {
        display: none; /* ?�비게이??메뉴 ?��? */
    }
    
    .header-container {
        justify-content: space-between; /* 좌우 ?�렬 ?��? */
    }
    
    .header-left {
        padding-left: 25px; /* ?�쪽 ?�딩 줄임 */
        margin-left: 30px; /* ?�쪽 마진 줄임 */
    }
    
    .header-right {
        margin-right: 15px; /* 조금 ???�른쪽으�?*/
        margin-left: 0;
    }
}

/* Chrome/Safari???�크롤바 ?�기�?- 1100px ?�하 ?�이?�바 */
@media (max-width: 1100px) {
    .hamburger-dropdown::-webkit-scrollbar {
        display: none;
    }
}

/* 1100px ?�하?�서 ?�버�?메뉴�??�쪽 ?�이?�바 ?�태�?변�?*/
@media (max-width: 1100px) {
    html,
    body {
        overflow-x: clip;
    }

    /* ?�이?�바 ?�버?�이 */
    .hamburger-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(7, 15, 30, 0.42);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1001;
    }
    
    .hamburger-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .hamburger-dropdown {
        
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(320px, 86vw);
        max-width: 100vw;
        height: 100vh; /* ?�체 ?�면 ?�이 */
        background: white;
        border-radius: 0;
        transform: translateX(100%);
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        /* ?�크롤바 ?�기�?*/
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        z-index: 1002;
    }
    
    .hamburger-dropdown.active {
        
        transform: translateX(0);
    }
    
    .hamburger-dropdown .dropdown-container {
        max-width: none;
        margin: 0;
        padding: 80px 30px 30px; /* ?�단 ?�백 추�? */
        display: block; /* ?�로 배치�?변�?*/
        gap: 0;
    }
    
    .hamburger-dropdown .dropdown-column {
        flex: none;
        min-width: auto;
        margin-bottom: 30px;
        border-bottom: none; /* 기본?�으�?구분???��? */
        padding-bottom: 20px;
    }
    
    .hamburger-dropdown .dropdown-column:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    
    .hamburger-dropdown .column-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
        color: #333;
        border-bottom: none; /* ?�목 ?�래 구분???�거 */
        padding-bottom: 10px;
    }
    
    .hamburger-dropdown .column-links a {
        padding: 12px 0;
        font-size: 0.95rem;
        border-bottom: none; /* 링크 ?�래 구분???�거 */
        transition: all 0.2s ease;
    }
    
    .hamburger-dropdown .column-links a:hover {
        background-color: #f8f9fa;
        padding-left: 15px;
        color: #1a237e;
    }
    

    
    /* 1100px 미디??쿼리?�서???�코?�언???�쳐졌을 ?�만 구분???�시 */
    .hamburger-dropdown .dropdown-column.accordion-item.active {
        border-bottom: 1px solid #e0e0e0;
    }
}

/* ?�블�??�면 */
@media (max-width: 1024px) {
    .logo {
        margin: 0 0 0 -10px; /* 마진 조정 */
    }
    
    .header-right {
        margin-right: 40px; /* ?�버�?메뉴 ?�치 조정 */
    }
}

/* 770px 근처?�서 부?�러???�환???�한 중간 ?�계 */
@media (max-width: 770px) {
    .logo-image {
        height: 40px; /* ?�기 ?��? */
        width: auto;
        min-height: 40px;
        min-width: 40px;
    }
    
    .hamburger-menu {
        font-size: 1.8rem; /* ?�기 ?��? */
        min-width: 40px;
        min-height: 40px;
        padding: 5px;
    }
}

/* 모바???�면 */
@media (max-width: 768px) {

    
    .logo {
        margin: 0; /* 모바?�에??마진 ?�거 */
    }
    
    .logo-image {
        height: 40px; /* 모바?�에?�도 ?�일???�기 ?��? */
        width: auto;
        min-height: 40px;
        min-width: 40px;
    }
    
    .header-right {
        margin-right: 20px; /* 모바?�에???�버�?메뉴 ?�치 조정 */
    }
    
    .hamburger-menu {
        font-size: 1.8rem; /* 모바?�에?�도 ?�일???�기 ?��? */
        min-width: 40px;
        min-height: 40px;
        padding: 5px;
    }

    .nav-menu {
        display: none; /* 기본?�으�??��? */
        flex-direction: column;
        position: fixed; /* fixed�?변�?*/
        top: 90px; /* ?�더 ?�이만큼 ?�래�?*/
        left: 0;
        right: 0; /* ?�체 ?�비 */
        width: 100%;
        background-color: #ffffff; /* ?�전 불투�??�색 배경 */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 2px 15px; /* ?�하 ?�딩 ??줄임 */
        border-top: 1px solid #e0e0e0;
        z-index: 9999; /* z-index�????�게 ?�정 */
        min-height: auto; /* 최소 ?�이 ?�거 */
        max-height: calc(100vh - 90px); /* ?�면 ?�이?�서 ?�더 ?�이만큼 ?�외 */
        overflow-y: auto;
        /* ?�크롤바 ?�기�?*/
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */ /* ?�크�?가?�하�?*/
        opacity: 0; /* 초기 ?�명??0 */
        transform: translateY(-10px); /* 초기 ?�치 ?�간 ?�로 */
        transition: opacity 0.3s ease, transform 0.3s ease; /* 부?�러???�환 ?�과 */
    }

    .nav-menu.active {
        display: flex; /* ?�성????flex�?보임 */
        background-color: #ffffff; /* 배경???�정 */
        z-index: 9999; /* z-index ?�정 */
        opacity: 1; /* ?�전??보이�?*/
        transform: translateY(0); /* ?�래 ?�치�?*/
    }
    
    /* ??구체?�인 ?�택?�로 ?�선?�위 ?�임 */
    header .nav-menu.active,
    .header-container .nav-menu.active {
        display: flex;
        background-color: #ffffff;
        z-index: 9999;
        opacity: 1;
        transform: translateY(0);
    }
    
    /* 최고 ?�선?�위 ?�택??- !important ?�거?�고 ??구체?�인 ?�택???�용 */
    body header .header-container .nav-menu.active,
    html body header .header-container .nav-menu.active {
        display: flex;
        background-color: #ffffff;
        z-index: 9999;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-menu li {
        width: 100%;
        text-align: center;
        margin-bottom: 0; /* 간격 ?�전 ?�거 */
        padding: 0; /* ?�딩 ?�거 */
        background-color: transparent; /* 배경???�명 */
        height: 30px; /* li ?�소 ?�이 ?�한 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-menu li:last-child {
        margin-bottom: 0;
    }

    /* ?�사?�개 버튼 ?�에 마진 추�? */
    .nav-menu li:first-child {
        margin-top: 10px;
    }

    .nav-menu li a {
        padding: 5px 0; /* ?�하 ?�딩 ?�당??추�? */
        display: block;
        color: #333333; /* 모바??메뉴 ?�스???�상 */
        font-size: 0.9rem; /* 글???�기 ??줄임 */
        font-weight: 500; /* 글??굵기 줄임 */
        text-align: center; /* 중앙 ?�렬 ?�실??*/
        width: 100%; /* ?�체 ?�비 ?�용 */
        background-color: transparent; /* 배경 ?�거 */
        border-radius: 0; /* 모서�??�거 */
        border: none; /* ?�두�??�거 */
        transition: all 0.2s ease; /* ?�환 ?�과 줄임 */
        text-decoration: none; /* 밑줄 ?�거 */
        line-height: 1.2; /* �??�이 줄임 */
        min-height: auto; /* 최소 ?�이 ?�거 */
        box-sizing: border-box; /* 박스 모델 ?�정 */
        height: auto; /* ?�이 ?�동?�로 */
    }

    .nav-menu li a:hover {
        background-color: transparent;
        color: #00695C;
        transform: none; /* ?�버 ?�과 ?�거 */
        box-shadow: none; /* 그림???�거 */
    }

    /* ?�롭?�운 메뉴 모바???��???*/
    .dropdown-content {
        position: static; /* 모바?�에?�는 ?�적?�로 */
        box-shadow: none;
        border-top: 1px solid #dee2e6;
        margin-top: 3px; /* 간격 ??줄임 */
        background-color: #ffffff; /* ?�롭?�운 배경??*/
        border-radius: 3px; /* 모서�???줄임 */
    }

    .dropdown-content a {
        padding: 2px 8px; /* ?�딩 ?�??줄임 */
        color: #6c757d;
        font-size: 0.85rem; /* 글???�기 ??줄임 */
        line-height: 1.2; /* �??�이 줄임 */
        min-height: auto; /* 최소 ?�이 ?�거 */
        background-color: transparent; /* 배경 ?�거 */
        border: none; /* ?�두�??�거 */
    }

    /* 모바??메뉴?�서??밑줄 ?�과 추�? */
    .nav-menu li a::after {
        content: '';
        position: absolute;
        width: 0; /* 초기 ?�비??0 */
        height: 2px;
        bottom: -2px; /* 모바?�에?�는 ??가깝게 */
        left: 50%; /* ?�작 ?�치�?가?�데�?*/
        transform: translateX(-50%); /* ?�확??가?�데 ?�렬 */
        background-color: #00897B; /* ?�더?�인 ?�상 */
        transition: width 0.3s ease, left 0.3s ease, transform 0.3s ease; /* ?�환 ?�과 */
    }

    .nav-menu li a:hover::after {
        width: 100%; /* ?�버 ???�비 100%�??�장 */
        left: 0; /* ?�쪽 ?�으�??�동 */
        transform: translateX(0); /* 변??초기??*/
    }
}

/* ?��? 모바???�면 */
@media (max-width: 480px) {
    .header-container {
        padding: 0 15px 0 15px; /* ?��? ?�면?�서 ?�딩 조정 */
    }
    
    .logo-image {
        height: 35px; /* ?��? ?�면?�서 로고 ?�기 줄임 */
    }
    
    .header-right {
        margin-right: 15px; /* ?��? ?�면?�서 ?�버�?메뉴 ?�치 조정 */
    }
    
    .nav-menu {
        padding: 2px 10px; /* ?��? ?�면?�서 메뉴 ?�딩 조정 */
    }
}

/* ?�치 ?�바?�스 ?�용 ?�더 ?��???(F12 모바??모드?�서???�용) */
@media (hover: none) and (pointer: coarse) {
    .header-container {
        padding: 0 20px 0 20px; /* ?�치 ?�바?�스??맞는 ?�딩 */
    }
    
    .hamburger-menu {
        padding: 8px; /* ?�치?�기 ?�게 ?�딩 증�? */
        min-width: 44px; /* ?�치 ?��?최소 ?�기 */
        min-height: 44px;
    }
    
    .nav-menu li a {
        padding: 8px 0; /* ?�치?�기 ?�게 ?�딩 증�? */
        min-height: 44px; /* ?�치 ?��?최소 ?�기 */
    }
}

/* F12 모바??모드 �?기기 모드 ?�용 ?��???*/
@media (max-width: 768px) and (orientation: portrait),
       (max-width: 768px) and (max-height: 1024px) {
    .header-container {
        padding: 0 15px 0 15px; /* 기기 모드?�서 ?�딩 줄임 */
        height: 70px; /* 기기 모드?�서 ?�더 ?�이 줄임 */
    }
    
    .logo-image {
        height: 30px; /* 기기 모드?�서 로고 ?�기 줄임 */
    }
    
    .header-left {
        margin-left: 10px; /* 기기 모드?�서 ?�쪽 마진 줄임 */
        padding-left: 10px;
    }
    
    .header-right {
        margin-right: 10px; /* 기기 모드?�서 ?�른�?마진 줄임 */
    }
    
    .hamburger-menu {
        font-size: 1.8rem; /* 기기 모드?�서???�일???�기 ?��? */
        padding: 5px; /* 기본 ?�딩 ?��? */
        min-width: 40px; /* 최소 ?�기 보장 */
        min-height: 40px;
    }
}

/* 매우 ?��? 기기 모드 ?�면 */
@media (max-width: 480px) and (orientation: portrait),
       (max-width: 480px) and (max-height: 800px) {
    .header-container {
        padding: 0 10px 0 10px; /* 매우 ?��? ?�면?�서 ?�딩 ??줄임 */
        height: 60px; /* 매우 ?��? ?�면?�서 ?�더 ?�이 ??줄임 */
    }
    
    .logo-image {
        height: 25px; /* 매우 ?��? ?�면?�서 로고 ?�기 ??줄임 */
    }
    
    .header-left {
        margin-left: 5px; /* 매우 ?��? ?�면?�서 ?�쪽 마진 ??줄임 */
        padding-left: 5px;
    }
    
    .header-right {
        margin-right: 5px; /* 매우 ?��? ?�면?�서 ?�른�?마진 ??줄임 */
    }
    
    .hamburger-menu {
        font-size: 1.8rem; /* 매우 ?��? ?�면?�서???�일???�기 ?��? */
        padding: 5px; /* 기본 ?�딩 ?��? */
        min-width: 40px; /* 최소 ?�기 보장 */
        min-height: 40px;
    }
}

/* ?�로 모드 기기 모드 ?�용 */
@media (orientation: portrait) and (max-width: 768px) {
    .header-container {
        padding: 0 12px 0 12px;
        height: 65px;
    }

    .logo-image {
        height: 28px;
    }

    .hamburger-menu {
        font-size: 1.8rem; /* ?�로 모드?�서???�일???�기 ?��? */
        padding: 5px; /* 기본 ?�딩 ?��? */
        min-width: 40px; /* 최소 ?�기 보장 */
        min-height: 40px;
    }
}

/* ===== 데스크탑 메가메뉴 호버 시 헤더 배경 전환 ===== */
/* clip-path를 header가 아닌 .header-shutter에 적용하므로:
   - header: clip-path 없음 → 마우스 이벤트 영역 항상 유지 (오르락내리락 버그 방지)
   - .header-shutter: clip-path 애니메이션 → 셔터 시각 효과 담당 */
header.desktop-dropdown-open {
    transition: none;
    /* background/box-shadow는 .header-shutter에 달아야 clip-path로 같이 클리핑됨 */
}

header.desktop-dropdown-open .header-shutter {
    background-color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 스티키 상태에서도 메가메뉴 애니메이션 적용 */
header.sticky.desktop-dropdown-open .header-shutter {
    background-color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 드롭다운 열릴 때: 로고·nav 어두운 색으로 (모든 페이지 공통) */
header.desktop-dropdown-open .logo,
header.desktop-dropdown-open .logo:hover {
    color: #333;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

header.desktop-dropdown-open .logo-image {
    filter: none;
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

header.desktop-dropdown-open .nav-menu li a {
    color: #111;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 스티키 상태에서 드롭다운 열릴 때 텍스트 색 */
header.sticky.desktop-dropdown-open .logo,
header.sticky.desktop-dropdown-open .logo:hover {
    color: #333;
    transition: none;
}

header.sticky.desktop-dropdown-open .logo-image {
    filter: none;
    transition: none;
}

header.sticky.desktop-dropdown-open .nav-menu li a {
    color: #111;
    transition: none;
}

/* ===== 데스크탑 메가메뉴 (1146px 이상) ===== */
@media (min-width: 1146px) {
    .hamburger-menu { display: none; }
    .hamburger-overlay { display: none; }

    /* 드롭다운을 헤더 일반 흐름(normal flow)에 배치 → 헤더와 하나의 배경 */
    /* ★ 애니메이션은 header의 clip-path로 처리 → opacity/visibility는 clip-path와 함께 */
    .hamburger-dropdown {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: 0;
        max-height: none;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: none;
        transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        background: transparent;
        pointer-events: none;
        z-index: 1;
    }

    .hamburger-dropdown.active {
        /* JS가 style.height로 명시적 px 설정 → 드롭다운 전체 높이 확보 */
        /* overflow: visible → top:-24px 칼럼이 nav 영역으로 올라올 수 있음;
           clip-path(header-shutter)가 전체 시각 경계를 제어하므로 여기서 hidden 불필요 */
        opacity: 1;
        visibility: visible;
        overflow: visible;
        transform: none;
        pointer-events: auto;
    }

    /* 컨테이너: JS가 height 설정 */
    .hamburger-dropdown .dropdown-container {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
        gap: 0;
    }

    /* 칼럼: JS가 position·left 설정 */
    .hamburger-dropdown .dropdown-column {
        position: absolute;
        top: -24px;
        text-align: center;
        margin: 0;
        padding: 0 0 18px;
    }

    /* 칼럼 제목 숨기기 (nav 탭명 반복 불필요) */
    .hamburger-dropdown .column-title {
        display: none;
    }

    /* 아코디언 콘텐츠 항상 펼침 */
    .accordion-content {
        max-height: none;
        overflow: visible;
        transition: none;
        background: transparent;
        padding: 0;
        border-top: none;
    }

    .accordion-icon { display: none; }

    /* 서브링크 */
    .hamburger-dropdown .column-links {
        padding: 0;
        list-style: none;
        margin: 0;
    }

    .hamburger-dropdown .column-links li { margin: 0; }

    .hamburger-dropdown .column-links a {
        display: block;
        padding: 8px 0;
        color: #999;
        font-size: 0.95rem;
        font-weight: 400;
        text-decoration: none;
        transition: color 0.2s ease;
        font-family: 'Pretendard', sans-serif;
        white-space: nowrap;
    }

    .hamburger-dropdown .column-links a:hover {
        color: #2563eb;
        padding-left: 0;
        background: none;
    }
}

@media (min-width: 1146px) and (max-height: 800px) {
    .hamburger-dropdown .dropdown-column {
        top: -18px;
        padding-bottom: 12px;
    }

    .hamburger-dropdown .column-links a {
        padding: 6px 0;
        font-size: 0.9rem;
        line-height: 1.25;
    }
}

@media (min-width: 1146px) and (max-height: 700px) {
    .hamburger-dropdown .dropdown-column {
        top: -14px;
        padding-bottom: 8px;
    }

    .hamburger-dropdown .column-links a {
        padding: 5px 0;
        font-size: 0.85rem;
        line-height: 1.2;
    }
}

.hamburger-dropdown .direct-menu-item .accordion-header {
    cursor: pointer;
}

.hamburger-dropdown .direct-menu-item .accordion-content {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 480px) {
    .hamburger-dropdown .dropdown-container {
        padding: 64px 22px 24px;
    }

    .hamburger-dropdown .dropdown-column {
        margin-bottom: 20px;
        padding-bottom: 14px;
    }

    .hamburger-dropdown .column-title {
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .hamburger-dropdown .column-links a {
        padding: 7px 0;
    }
}

@media (max-width: 480px) and (max-height: 800px) {
    .hamburger-dropdown .dropdown-container {
        padding: 56px 18px 18px;
    }

    .hamburger-dropdown .dropdown-column {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .hamburger-dropdown .column-title {
        font-size: 0.95rem;
        margin-bottom: 6px;
        padding-bottom: 4px;
    }

    .hamburger-dropdown .column-links a {
        padding: 6px 0;
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) and (max-height: 700px) {
    .hamburger-dropdown .dropdown-container {
        padding: 76px 20px 18px;
    }

    .hamburger-dropdown .dropdown-column {
        margin-bottom: 16px;
        padding-bottom: 10px;
    }

    .hamburger-dropdown .column-title {
        margin-bottom: 6px;
        padding-bottom: 4px;
    }

    .hamburger-dropdown .column-links a {
        padding: 6px 0;
        font-size: 0.86rem;
        line-height: 1.25;
    }
}