/* ==========================================
   1. header
========================================== */
.header {
    overflow: visible; /* 영역 밖 요소(드롭다운 등) 표시 */
}

/* ==========================================
   1.1 header 메인
========================================== */
.header_main {
    display: flex;             /* 자식 요소 가로 정렬 */
    align-items: flex-end;     /* 하단 기준 정렬 */
    max-width: 1024px;         /* 최대 너비 제한 */
    min-width: 320px;          /* 최소 너비 설정 */
    width: 100%;               /* 전체 너비 사용 */
    margin: 0 auto;            /* 가운데 정렬 */
    padding: 10px;             /* 내부 여백 */
}

/* 로고 영역 컨테이너 */
.logo {
    display: flex; /* 내부 요소를 flex로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
}

/* 로고 링크 스타일 */
.logo a {
    display: inline-block; /* 링크를 블록처럼 처리하고 텍스트 흐름 유지 */
}

/* 로고 이미지 스타일 */
.logo img {
    width: clamp(140px, 20vw, 185px); /* 화면 크기에 따라 최소 140px ~ 최대 185px까지 반응형으로 조절 */
    display: block; /* 이미지 하단에 생기는 불필요한 여백 제거 */
}

/* 오른쪽 그룹 */
.right-group {
    margin-left: auto;         /* 오른쪽으로 밀기 */
    display: flex;             /* 내부 가로 정렬 */
    align-items: center;       /* 세로 중앙 정렬 */
    gap: 5px;                  /* 요소 간 간격 */
}

/* ==========================================
   1.1.1 언어 선택 영역
========================================== */
.lang-dropdown {
    position: relative;        /* absolute 기준 */
    display: inline-block;     /* inline 형태 유지 */
    font-size: 0.85rem;        /* 글자 크기 */
    z-index: 10000;            /* 상위 레이어 */
}

/* 버튼 */
.lang-btn {
    display: flex;             /* 내부 정렬 */
    align-items: center;       /* 세로 중앙 */
    gap: 4px;                  /* 요소 간 간격 */
    padding: 4px 8px;          /* 버튼 여백 */
    background: transparent;   /* 배경 제거 */
    border: none;              /* 테두리 제거 */
    cursor: pointer;           /* 클릭 커서 */
    font-weight: 500;          /* 글자 두께 */
}

.arrow-icon {
    margin-left: 4px;          /* 텍스트 간격 */
    transition: transform 0.2s ease; /* 회전 애니메이션 */
}

/* 클릭 시 회전 */
.lang-btn.active .arrow-icon {
    transform: rotate(180deg); /* 화살표 뒤집기 */
}

/* 메뉴 */
.lang-menu {
    position: absolute;        /* 버튼 기준 위치 */
    top: 120%;                 /* 버튼 아래 배치 */
    right: 0;                  /* 오른쪽 정렬 */
    background: #fff;          /* 배경색 */
    border-radius: 8px;        /* 둥근 모서리 */
    padding: 4px 0;            /* 내부 여백 */
    list-style: none;          /* 리스트 스타일 제거 */
    min-width: 90px;           /* 최소 너비 */
    z-index: 10001;            /* 최상위 레이어 */

    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 그림자 효과 */
    opacity: 0;                /* 초기 숨김 */
    transform: translateY(-5px); /* 위쪽 시작 위치 */
    pointer-events: none;      /* 클릭 비활성화 */
    transition: all 0.2s ease; /* 애니메이션 */
}

/* 메뉴 열림 */
.lang-menu.active {
    opacity: 1;                /* 표시 */
    transform: translateY(0);  /* 원위치 */
    pointer-events: auto;      /* 클릭 활성화 */
}

/* 항목 */
.lang-menu button {
    width: 100%;               /* 전체 너비 */
    padding: 6px 10px;         /* 내부 여백 */
    border: none;              /* 테두리 제거 */
    background: none;          /* 배경 제거 */
    text-align: left;          /* 좌측 정렬 */
    cursor: pointer;           /* 클릭 커서 */
    font-size: 0.85rem;        /* 글자 크기 */
}

/* hover 효과 */
.lang-menu button:hover {
    background: #f5f5f5;       /* hover 배경 */
}

/* ==========================================
   1.1.2 로그인 영역
========================================== */
.login_info {
    display: flex;             /* 가로 정렬 */
    align-items: center;       /* 세로 중앙 */
    gap: 6px;                  /* 요소 간 간격 */
}

.login_info span {
    font-size: 13px;           /* 글자 크기 */
    color: var(--text-muted);               /* 텍스트 색상 */
}

.login_info span strong {
    color: #e6c200;            /* 강조 색상 */
    font-size: 15px;           /* 강조 크기 */
    padding: 2px 6px;          /* 내부 여백 */
}

.login_info button {
    padding: 2px 8px;          /* 버튼 여백 */
    font-size: 12px;           /* 글자 크기 */
    border-radius: 6px;        /* 둥근 모서리 */
    border: 1px solid #eee;    /* 테두리 */
    cursor: pointer;           /* 클릭 커서 */
    white-space: nowrap;       /* 줄바꿈 방지 */
    transition: all 0.2s ease; /* hover 애니메이션 */
}

.login_info .login {
    background-color: #FFF3A0; /* 로그인 버튼 배경 */
    color: var(--text);               /* 텍스트 색 */
    font-weight: 500;          /* 강조 */
}

.login_info .login:hover {
    background-color: #FEE500; /* hover 배경 */
}

.login_info .logout {
    background-color: #f8f8f8; /* 로그아웃 배경 */
    color: var(--text-muted);               /* 텍스트 색 */
    border: 1px solid #e0e0e0; /* 테두리 */
}

.login_info .logout:hover {
    background-color: #eeeeee; /* hover 배경 */
}

/* ==========================================
   1.2 상단 메뉴 바
========================================== */

/* 메뉴바 공통 */
.nav {
    display: flex;             /* 가로 정렬 */
    justify-content: center;   /* 중앙 정렬 */
    position: relative;        /* absolute 기준 */
    max-width: 1024px;         /* 최대 너비 */
    width: 100%;               /* 전체 너비 */
    margin: 0 auto;            /* 가운데 정렬 */
    padding: 10px;             /* 내부 여백 */
}

.nav-menu{
    max-width: 1024px;         /* 최대 너비 */
    width: 100%;               /* 전체 너비 */
    margin: 0 auto;            /* 가운데 정렬 */
}

/* 상단 메뉴 */
.nav-list {
    display: flex;             /* 가로 정렬 */
    justify-content: center;   /* 중앙 정렬 */
    align-items: center;       /* 세로 중앙 */
    gap: 24px;                 /* 메뉴 간 간격 */

    list-style: none;          /* 리스트 스타일 제거 */
    margin: 0;                 /* 기본 margin 제거 */
    padding: 0;                /* 기본 padding 제거 */

    border-top: 1px solid #eee; /* 상단 경계선 */
    border-bottom: 1px solid #eee; /* 하단 경계선 */
    background: #fff;          /* 배경색 */
}

/* 메뉴 항목 */
.nav-list > li {
    position: relative;        /* 서브메뉴 기준 */
}

/* 메인 메뉴 */
.nav-list > li > a {
    white-space: nowrap;       /* 줄바꿈 금지 */
    display: block;            /* 블록 요소 */
    padding: 14px 10px;        /* 클릭 영역 확보 */
    font-size: 15px;           /* 글자 크기 */
    font-weight: 500;          /* 글자 두께 */
    color: var(--text);               /* 텍스트 색 */
    text-decoration: none;     /* 밑줄 제거 */
}

/* hover */
.nav-list > li > a:hover {
     color: var(--brand);           /* hover 색상 */
}

/* 밑줄 효과 */
.nav-list > li > a::after {
    content: "";               /* 가상 요소 생성 */
    display: block;            /* 블록 처리 */
    height: 2px;               /* 밑줄 두께 */
    background: var(--brand);       /* 밑줄 색상 */
    width: 0;                  /* 초기 숨김 */
    transition: 0.3s;          /* 애니메이션 */
    margin-top: 5px;           /* 간격 */
}

.nav-list > li > a:hover::after {
    width: 100%;               /* hover 시 표시 */
}

/* ==========================================
   1.2.1 서브메뉴
========================================== */
.nav-sublist {
    list-style: none;          /* 리스트 스타일 제거 */

    position: absolute;        /* 부모(li) 기준 위치 */
    top: 100%;                 /* 메인 메뉴 바로 아래 */
    left: 50%;                 /* 가운데 기준 */
    transform: translateX(-50%); /* 정확히 중앙 정렬 */

    min-width: 180px;          /* 최소 너비 */
    padding: 10px 0;           /* 내부 여백 */

    background: #fff;          /* 배경색 */
    border-radius: 10px;       /* 둥근 모서리 */

    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* 그림자 효과 */

    opacity: 0;                /* 초기 숨김 */
    visibility: hidden;        /* 화면에서 숨김 */

    transition: 0.2s;          /* 표시 애니메이션 */
    z-index: 999;              /* 상단 레이어 */
}

/* hover 시 표시 */
.nav-list > li:hover .nav-sublist {
    opacity: 1;                /* 보이기 */
    visibility: visible;       /* 표시 활성화 */
}

/* hover 끊김 방지 */
.nav-sublist::before {
    content: "";               /* 가상 요소 생성 */
    position: absolute;        /* 서브메뉴 기준 */
    top: -10px;                /* 위쪽 영역 확장 */
    width: 100%;               /* 전체 너비 */
    height: 10px;              /* hover 연결 영역 */
}

/* 서브메뉴 항목 */
.nav-sublist li {
    padding: 8px 20px;         /* 항목 여백 */
    white-space: nowrap;       /* 줄바꿈 방지 */
}

/* 링크 */
.nav-sublist li a {
    text-decoration: none;     /* 밑줄 제거 */
    color: var(--text);               /* 텍스트 색상 */
    font-size: 14px;           /* 글자 크기 */
}

/* hover */
.nav-sublist li a:hover {
    background: #f5f5f5;       /* hover 배경 */
}

/* ==========================================
   1.2.2 햄버거 버튼
========================================== */

/* 햄버거 버튼 전체 컨테이너 */
.nav-toggle {
    display: none; /* 기본 상태에서는 숨김 (모바일에서만 표시하도록 사용 가능) */

    width: 40px; /* 버튼 가로 크기 */
    height: 40px; /* 버튼 세로 크기 */
    border-radius: 12px; /* 모서리를 둥글게 */

    align-items: center; /* 내부 요소 세로 중앙 정렬 */
    justify-content: center; /* 내부 요소 가로 중앙 정렬 */

    cursor: pointer; /* 마우스 올렸을 때 클릭 가능 표시 */
    transition: 0.2s; /* hover 및 상태 변화 애니메이션 */
}

/* 마우스를 올렸을 때 배경 효과 */
.nav-toggle:hover {
    background: #eaeaea; /* 연한 회색 배경 */
}

/* 햄버거 막대(span) 기본 스타일 */
.nav-toggle span {
    position: absolute; /* 겹쳐서 배치 */
    width: 24px; /* 막대 길이 */
    height: 2.5px; /* 막대 두께 */
    background: #111; /* 검정색 막대 */
    border-radius: 3px; /* 끝을 둥글게 */
    transition: 0.3s; /* 애니메이션 부드럽게 */
}

/* 첫 번째 막대 위치 (위쪽) */
.nav-toggle span:nth-child(1) { transform: translateY(-7px); }

/* 두 번째 막대 위치 (중앙) */
.nav-toggle span:nth-child(2) { transform: translateY(0); }

/* 세 번째 막대 위치 (아래쪽) */
.nav-toggle span:nth-child(3) { transform: translateY(7px); }

/* ===============================
   X 아이콘 애니메이션 상태
================================ */

/* active 상태에서 첫 번째 막대 → 대각선 변환 */
.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
}

/* active 상태에서 가운데 막대 숨김 */
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

/* active 상태에서 세 번째 막대 → 반대 대각선 */
.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
}


/* ==========================================
   1.3 Header 모바일 (≤768px)
========================================== */
@media (max-width: 768px) {

    /* 오른쪽 영역을 세로 정렬로 변경 */
    .right-group{
        flex-direction: column; /* 가로 → 세로 배치 */
        align-items: flex-end; /* 오른쪽 기준 정렬 */
    }

    /* 로그인 정보도 세로로 정렬 */
    .login_info{
        flex-direction: column; /* 가로 → 세로 배치 */
        align-items: flex-end; /* 오른쪽 정렬 유지 */
    }

    /* 로그인 텍스트 크기 축소 */
    .login_info span{
        font-size: 10px; /* 모바일에서 가독성 유지 + 공간 절약 */
    }

    /* 햄버거 버튼 표시 */
    .nav-toggle {
        display: flex; /* 데스크탑에서는 hidden → 모바일에서만 표시 */
    }

    /* ==========================================
       사이드 메뉴 (모바일 핵심)
    ========================================== */
    /* 네비게이션 정렬 변경 */
    .nav {
        justify-content: flex-start; /* 좌측 정렬 */
        padding: 5px;               /* 내부 여백 */
    }

    .nav-menu {
        position: fixed;             /* 화면 고정 */

        top: var(--header-height);   /* 상단 위치 */
        left: 0;                     /* 좌측 정렬 */

        width: 100%;                 /* 전체 너비 */
        max-width: 320px;            /* 최대 너비 */
         height: calc(100% - var(--header-height));   /* 높이 계산 */

        background: #fff;            /* 배경색 */
        transform: translateX(-100%); /* 초기 숨김 (왼쪽 밖) */
        transition: 0.3s;            /* 슬라이드 애니메이션 */

        z-index: 2000;               /* 레이어 순서 */
        overflow-y: auto;            /* 세로 스크롤 */

        box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* 그림자 */
    }

    .nav-menu.active {
        transform: translateX(0);    /* 화면 안으로 슬라이드 */
    }

    /* 오버레이 */
    .overlay {
        position: fixed; /* 스크롤과 상관없이 화면에 고정 */
        top: 0; /* 화면 최상단 기준 */
        left: 0; /* 화면 좌측 기준 */

        width: 100%;                 /* 전체 너비 */
        height: 100%;                /* 전체 높이 */

        background: rgba(0,0,0,0.4); /* 반투명 배경 */

        opacity: 0;                  /* 초기 숨김 */
        visibility: hidden;          /* 표시 제거 */

        transition: 0.3s;            /* fade 애니메이션 */
        z-index: 1500;               /* 메뉴 아래 */
    }

    .overlay.active {
        opacity: 1;                  /* 표시 */
        visibility: visible;         /* 활성화 */
    }

    /* 모바일 메뉴 리스트 */
    .nav-list {
        display: block;              /* 세로 정렬 */
        border: none;                /* 테두리 제거 */
    }

    .nav-list li {
        border-bottom: 1px solid #eee; /* 구분선 */
    }

    .nav-list li > a {
        padding: 15px 20px;          /* 터치 영역 확대 */
    }

    /* ==========================================
       모바일 서브메뉴 (아코디언 방식)
    ========================================== */
    .nav-sublist {
        position: static;            /* 기본 흐름으로 변경 */
        transform: none;             /* 중앙 정렬 제거 */
        left: auto;                  /* 위치 초기화 */
        width: 100%;                 /* 전체 너비 */

        max-height: 0;               /* 접힌 상태 */
        overflow: hidden;            /* 내용 숨김 */

        padding: 0;                  /* 여백 제거 */
        background: #fafafa;         /* 배경색 */

        box-shadow: none;            /* 그림자 제거 */
        border-radius: 0;            /* 둥근 모서리 제거 */

        opacity: 1;                  /* 항상 보이도록 */
        visibility: visible;         /* 항상 활성화 */

        transition: max-height 0.3s ease; /* 펼침 애니메이션 */
    }

    .nav-sublist.active {
        max-height: 500px;           /* 펼쳐진 상태 */
    }

    .nav-sublist li a {
        padding: 12px 30px;          /* 들여쓰기 */
        font-size: 14px;             /* 글자 크기 */
        color: var(--text-muted);                 /* 텍스트 색 */
    }
}