@charset "utf-8";

.glassmorphism-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* 스크롤 시 솔리드 화이트 상태 (NHN 스타일 섀도우) */
.glassmorphism-header.scrolled {
    background: var(--bg-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------------
   서브 페이지(일반 헤더, layout_type='sub'): 상단 비주얼이 없어 배경이 흰색이므로
   로고와 GNB 글씨만 '스크롤다운 상태'(컬러 로고 + 다크 텍스트)로 유지한다.
   헤더 바 자체는 투명 — 배경/섀도우는 실제로 스크롤했을 때(.scrolled)만 나타난다.
   .scrolled 는 JS가 붙였다 뗐다 하므로 건드리지 않는 별도 클래스(.is-solid)를 쓴다.
   ------------------------------------------------------------------ */
.glassmorphism-header.is-solid .logo a {
    color: var(--point-blue);
}

.glassmorphism-header.is-solid .logo-default {
    display: none !important;
}

.glassmorphism-header.is-solid .logo-scrolled {
    display: block !important;
}

.glassmorphism-header.is-solid .gnb > ul > li > a {
    color: var(--text-dark);
}

.glassmorphism-header.is-solid .gnb > ul > li > a::after {
    background-color: var(--point-blue);
}

.glassmorphism-header.is-solid .gnb > ul > li:hover > a,
.glassmorphism-header.is-solid .gnb > ul > li.active > a {
    color: var(--point-blue) !important;
}

/* 모바일 햄버거: 흰 배경 위이므로 다크 유지 (미디어쿼리의 흰색 규칙보다 특이도 우선) */
.glassmorphism-header.is-solid:not(.scrolled) .btn-menu-toggle .icon-bar {
    background-color: var(--text-dark);
}

.header-inner {
    display: flex;
    justify-content: flex-start; /* PC에서는 로고와 GNB가 연달아 나오도록 */
    align-items: center;
    width: 100%; /* 풀 스크린 */
    padding: 0 60px; /* 양옆 넉넉한 여백 */
    height: 80px;
}

.logo {
    margin-right: 60px; /* 로고와 메뉴 간격 */
}

.logo a {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff; /* 기본 흰색 텍스트 (물속 배경) */
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

.glassmorphism-header.scrolled .logo a {
    color: var(--point-blue); /* 스크롤 시 텍스트 컬러 변경 */
}

/* SVG 는 비트맵과 달리 고유 크기가 없을 수 있다. 높이를 직접 잡아 준다 */
.logo img {
    height: 40px;
    width: auto;
    max-height: 40px;
    transition: opacity 0.3s ease;
}

/* 헤더 액션 그룹 */
.header-action {
    margin-left: auto;
    margin-right: 20px;
    transition: margin-right 0.3s ease;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes iconCrazyShake {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-1px, -1px) rotate(-5deg); }
    20% { transform: translate(1px, -1px) rotate(5deg); }
    30% { transform: translate(-1px, 1px) rotate(-5deg); }
    40% { transform: translate(1px, 1px) rotate(5deg); }
    50% { transform: translate(-1px, -1px) rotate(-5deg); }
    60% { transform: translate(1px, -1px) rotate(5deg); }
    70% { transform: translate(-1px, 1px) rotate(-5deg); }
    80% { transform: translate(1px, 1px) rotate(5deg); }
    90% { transform: translate(-1px, -1px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.btn-header-consult {
    background: var(--water-gradient);
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 204, 198, 0.2);
    white-space: nowrap;
}

.btn-header-consult:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 204, 198, 0.4);
    background: linear-gradient(135deg, #FFC200 0%, #FFA800 100%);
    background-size: 200% 200%;
    animation: gradientMove 1.5s ease infinite;
}

.btn-header-consult i {
    font-size: 18px;
    display: inline-block;
    animation: iconBounce 1s ease-in-out infinite;
}

.btn-header-consult:hover i {
    animation: iconCrazyShake 0.2s linear infinite;
}

/* 스크롤 시: 상담 버튼이 GNB 우측 끝에 박스 형태로 꽉 차게 확장 (PC 전용).
   모바일(<=1024px)에서는 .header-action 자체가 숨겨지므로 이 블록을 적용하지 않는다. */
@media (min-width: 1025px) {
    .glassmorphism-header.scrolled .header-action {
        align-self: stretch;
        display: flex;
        margin-right: -60px; /* .header-inner 우측 패딩(60px) 상쇄 → 화면 우측 끝까지 */
    }

    .glassmorphism-header.scrolled .btn-header-consult {
        height: 100%;
        padding: 0 44px;
        border-radius: 0;
        font-size: 18px;
        gap: 12px;
        box-shadow: none;
    }

    .glassmorphism-header.scrolled .btn-header-consult i {
        font-size: 24px;
    }

    /* 박스 상태에서는 확대 대신 색상만 반응 */
    .glassmorphism-header.scrolled .btn-header-consult:hover {
        transform: none;
        box-shadow: none;
    }
}

/* 듀얼 로고 스와핑 설정 */
.logo-default {
    display: block !important;
}
.logo-scrolled {
    display: none !important;
}

.glassmorphism-header.scrolled .logo-default {
    display: none !important;
}
.glassmorphism-header.scrolled .logo-scrolled {
    display: block !important;
}

.gnb > ul {
    display: flex;
    gap: 40px;
}

.gnb > ul > li {
    position: relative;
}

.gnb > ul > li > a {
    display: flex;
    align-items: center;
    height: 80px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff; /* 기본 흰색 텍스트 */
    transition: color 0.3s;
    position: relative;
}

/* Underbar (기본 상태 - 투명 헤더일 땐 흰색) */
.gnb > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 25px; /* 헤더 높이 80px 기준, 텍스트 하단에 위치 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

/* 호버 시 언더바 등장 */
.gnb > ul > li:hover > a::after,
.gnb > ul > li.active > a::after {
    width: 100%;
}

/* 투명 헤더 상태에서 롤오버 시 글씨는 흰색 유지 */
.gnb > ul > li:hover > a,
.gnb > ul > li.active > a {
    color: #ffffff !important;
}

/* 스크롤 다운 시 (솔리드 화이트 헤더) */
.glassmorphism-header.scrolled .gnb > ul > li > a {
    color: var(--text-dark); /* 스크롤 시 다크 컬러 */
}

/* 스크롤 다운 시 언더바 색상을 포인트 컬러로 변경 */
.glassmorphism-header.scrolled .gnb > ul > li > a::after {
    background-color: var(--point-blue);
}

/* 스크롤 다운 상태에서 롤오버 시 색상 변경 */
.glassmorphism-header.scrolled .gnb > ul > li:hover > a,
.glassmorphism-header.scrolled .gnb > ul > li.active > a {
    color: var(--point-blue) !important;
}

.arrow-icon {
    margin-left: 4px;
    transition: transform 0.3s;
}

.gnb > ul > li:hover .arrow-icon {
    transform: rotate(180deg);
}

/* Sub Menu */
.sub-menu {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 160px;
    background: var(--bg-white);
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.gnb > ul > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.sub-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--text-gray);
    text-align: center;
    transition: all 0.2s;
}

.sub-menu li a:hover,
.sub-menu li.active a {
    color: var(--point-blue);
    background-color: #f8f9fa;
}

/* Mobile Toggle */
.btn-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1001;
}

.btn-menu-toggle .icon-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-dark);
    position: absolute;
    left: 0;
    transition: all 0.3s;
}

.btn-menu-toggle .icon-bar:nth-child(1) { top: 0; }
.btn-menu-toggle .icon-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.btn-menu-toggle .icon-bar:nth-child(3) { bottom: 0; }

.mobile-gnb-header {
    display: none;
}

@media (max-width: 1024px) {
    .header-action {
        display: none; /* 모바일에서는 헤더 버튼 숨김 (플로팅 버튼으로 대체) */
    }

    .header-inner {
        justify-content: space-between; /* 모바일에서만 양끝 정렬 */
        padding: 0 20px;
        height: 70px; /* 모바일 헤더 높이 약간 상향하여 상단 여백 확보 */
        border: none;
    }

    .logo {
        margin-right: 0;
    }

    .logo img {
        max-height: 30px;
    }

    /* GNB Mobile Layer */
    .gnb {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff; /* var 대신 명시적 흰색 */
        z-index: 1000;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 20px 20px 40px;
        display: block !important;
        overflow-y: auto;
    }

    .mobile-gnb-header {
        display: block;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-gnb-header img {
        max-height: 35px;
    }

    .mobile-gnb-header .logo-text {
        font-size: 18px;
        font-weight: 700;
        color: var(--point-blue);
    }

    .gnb.mobile-active {
        right: 0;
    }

    .gnb > ul {
        flex-direction: column;
        gap: 0;
    }

    .gnb > ul > li > a {
        height: auto;
        padding: 15px 0;
        color: #222 !important; /* PC 스타일에 영향 안 주게 모바일에서만 명시적 지정 */
        font-size: 20px;
        font-weight: 700;
        border-bottom: 1px solid #eee;
        justify-content: space-between;
    }

    .gnb > ul > li > a::after {
        display: none;
    }

    .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding: 10px 0 20px 15px;
        display: none;
    }

    .gnb > ul > li.opened .sub-menu {
        display: block;
    }

    .sub-menu li a {
        text-align: left;
        padding: 8px 0;
        font-size: 16px;
    }

    /* Mobile Toggle Button Animation */
    .btn-menu-toggle {
        display: block;
        z-index: 1001;
    }

    .btn-menu-toggle .icon-bar {
        background-color: var(--text-dark);
    }

    .glassmorphism-header:not(.scrolled) .btn-menu-toggle .icon-bar {
        background-color: #fff;
    }

    .gnb.mobile-active ~ .btn-menu-toggle .icon-bar {
        background-color: var(--text-dark) !important;
    }

    .btn-menu-toggle.active .icon-bar:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .btn-menu-toggle.active .icon-bar:nth-child(2) {
        opacity: 0;
    }

    .btn-menu-toggle.active .icon-bar:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
}

/* 성향테스트 버튼 — 상담 버튼 왼쪽에 나란히. 상담이 주(主)이므로 이쪽은 테두리만 쓴다 */
.header-action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-header-test {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-header-test:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
}

/* 흰 배경 페이지와 스크롤 상태에서는 선과 글씨를 어둡게 */
.glassmorphism-header.is-solid .btn-header-test,
.glassmorphism-header.scrolled .btn-header-test {
    border-color: var(--point-blue);
    color: var(--point-blue);
}

.glassmorphism-header.is-solid .btn-header-test:hover,
.glassmorphism-header.scrolled .btn-header-test:hover {
    background: var(--point-blue);
    color: #fff;
}

/* 스크롤 시 상담 버튼이 헤더 높이를 꽉 채우므로 그 앞에 여백을 준다 */
.glassmorphism-header.scrolled .btn-header-test {
    margin-right: 4px;
}

/* 좁은 화면에서는 상담 하나만 남긴다. 둘 다 넣으면 로고와 부딪힌다 */
@media (max-width: 1024px) {
    .btn-header-test { display: none; }
}

/* 다크·컬러 배경 페이지(갤러리·시간표·성향테스트).
   배경이 진하므로 메뉴는 흰 글씨여야 읽힌다. 스크롤해서 흰 바가 깔리면 원래 규칙으로 돌아간다 */
.glassmorphism-header.is-ondark:not(.scrolled) .gnb > ul > li > a {
    color: #fff;
}

.glassmorphism-header.is-ondark:not(.scrolled) .gnb > ul > li > a::after {
    background-color: #fff;
}

.glassmorphism-header.is-ondark:not(.scrolled) .gnb > ul > li:hover > a,
.glassmorphism-header.is-ondark:not(.scrolled) .gnb > ul > li.active > a {
    color: #fff !important;
}

.glassmorphism-header.is-ondark:not(.scrolled) .arrow-icon {
    color: #fff;
}

/* 모바일 메뉴 하단 버튼 — 헤더 버튼이 모바일에서는 안 보인다 */
.mobile-gnb-actions { display: none; }

@media (max-width: 1024px) {
    .mobile-gnb-actions {
        display: grid;
        gap: 10px;
        margin-top: 26px;
        padding: 0 24px 30px;
    }

    .mobile-gnb-test,
    .mobile-gnb-consult {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        padding: 17px 20px;
        border-radius: 999px;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 800;
        cursor: pointer;
        text-decoration: none;
    }

    .mobile-gnb-test {
        border: 1px solid var(--point-mint);
        background: #fff;
        color: var(--point-mint-deep);
    }

    .mobile-gnb-consult {
        border: 0;
        background: var(--point-mint);
        color: #05221f;
    }

    .mobile-gnb-test i,
    .mobile-gnb-consult i { font-size: 1.15rem; }
}

/* 모바일 2차 메뉴 — 펼칠 수 있다는 걸 화살표로 알린다 */
@media (max-width: 1024px) {
    .gnb > ul > li > a .arrow-icon {
        display: block;
        width: 18px;
        height: 18px;
        transition: transform .25s;
    }

    .gnb > ul > li.opened > a .arrow-icon { transform: rotate(180deg); }

    /* 펼친 묶음은 배경을 살짝 깔아 어디까지가 하위인지 보이게 */
    .gnb > ul > li.opened .sub-menu {
        background: #f5fbfb;
        border-radius: 12px;
        margin-bottom: 10px;
    }
}

/* 모바일 메뉴판은 흰 바탕이다.
   어두운 페이지용 흰 글씨 규칙(is-ondark)이 파일 뒤쪽에 있어 모바일 규칙을 덮어써
   메뉴 글씨가 흰 바탕에 흰색으로 나왔다. 여기서 다시 눌러 준다 */
@media (max-width: 1024px) {
    .glassmorphism-header .gnb > ul > li > a,
    .glassmorphism-header.is-ondark .gnb > ul > li > a,
    .glassmorphism-header.is-ondark:not(.scrolled) .gnb > ul > li > a,
    .glassmorphism-header.is-ondark:not(.scrolled) .gnb > ul > li:hover > a,
    .glassmorphism-header.is-ondark:not(.scrolled) .gnb > ul > li.active > a,
    .glassmorphism-header .gnb > ul > li:hover > a,
    .glassmorphism-header .gnb > ul > li.active > a {
        color: #222 !important;
    }

    /* 보고 있는 메뉴만 브랜드 색으로 */
    .glassmorphism-header .gnb > ul > li.active > a,
    .glassmorphism-header.is-ondark .gnb > ul > li.active > a {
        color: var(--point-mint-deep) !important;
    }

    .glassmorphism-header .gnb .arrow-icon,
    .glassmorphism-header.is-ondark:not(.scrolled) .arrow-icon {
        color: #9aa8af !important;
    }

    .glassmorphism-header .sub-menu li a,
    .glassmorphism-header.is-ondark .sub-menu li a {
        color: #55636b !important;
    }

    .glassmorphism-header .sub-menu li.active a,
    .glassmorphism-header .sub-menu li a:hover {
        color: var(--point-mint-deep) !important;
    }
}

/* PC 용 드롭다운은 가운데 맞추려고 왼쪽으로 절반 밀어 둔다(translateX(-50%)).
   그 규칙이 선택자가 더 구체적이라 모바일 규칙을 이기고 살아남아,
   손가락이 닿는 순간 2차 메뉴가 왼쪽으로 빠져나갔다. 모바일에서는 밀지 않는다 */
@media (max-width: 1024px) {
    .gnb > ul > li .sub-menu,
    .gnb > ul > li:hover .sub-menu,
    .gnb > ul > li.opened .sub-menu {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        min-width: 0;
    }

    /* 펼친 것만 보인다. 손가락이 닿았다고 열리면 안 된다 */
    .gnb > ul > li .sub-menu,
    .gnb > ul > li:hover .sub-menu { display: none; }
    .gnb > ul > li.opened .sub-menu { display: block; }

    .sub-menu li a { text-align: left; }
}

/* 모바일 메뉴판은 자기 스크롤바를 감춘다.
   본문 스크롤바와 나란히 두 줄이 생겨 지저분했다. 막대만 숨기고 스크롤은 그대로 된다 */
@media (max-width: 1024px) {
    .gnb {
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .gnb::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* 화살표는 손가락으로 누를 자리라 넓혀 준다. 글자 쪽은 그대로 이동한다 */
@media (max-width: 1024px) {
    .gnb > ul > li > a .arrow-icon {
        box-sizing: content-box;
        padding: 14px 6px 14px 24px;
        margin: -14px -6px -14px 0;
    }
}