/* ========================================================
   Header Container
   ======================================================== */
.design-system-header {
    position: fixed;
    top: 0;
    transform:translateX(-50%);
    left: 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--Base-8size-Spacing-200) var(--Components-margin);
    background-color: var(--Components-basic-gray-color-background-color-bg-white);
    box-sizing: border-box;
    z-index: 99;
}

/* ========================================================
   Sizing: S / M / L (헤더 및 head_space 공통 높이)
   ======================================================== */
.design-system-header.hd-size-s, .head-space.hd-size-s { height: var(--px-54); }
.design-system-header.hd-size-m, .head-space.hd-size-m { height: var(--px-64); }
.design-system-header.hd-size-l, .head-space.hd-size-l { height: var(--px-72); }

/* ========================================================
   Layout (Left, Center, Right)
   ======================================================== */
.hd-left,
.hd-right {
    display: flex;
    align-items: center;
    gap: var(--Base-8size-Spacing-600);
    flex: 1;
    min-width: 0;
}

.hd-right {
    justify-content: flex-end;
}

/* 중앙 타이틀 (타입 B 공통) */
.head_txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--Components-basic-gray-color-text-color-text-primary);
    white-space: nowrap;
    text-align: center;
}
.design-system-header i {
    color: var(--Base-Basic-gray-basic-gray-800);
}

/* ========================================================
   Elements
   ======================================================== */
.hd-icon-text {
    color: var(--Components-basic-gray-color-text-color-text-primary);
    cursor: pointer;
}

.hd-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ========================================================
   로고 사이즈 (헤더 사이즈 .hd-size-* 상속)
   ======================================================== */
/* S 사이즈 헤더일 때의 로고 높이 */
.hd-size-s .hd-logo-img { 
    height: var(--px-38);
}
/* M 사이즈 헤더일 때의 로고 높이 */
.hd-size-m .hd-logo-img { 
    height: var(--px-48); 
}
/* L 사이즈 헤더일 때의 로고 높이 (기존 var(--px-38) 기준) */
.hd-size-l .hd-logo-img { 
    height: var(--px-56);
}

/* ========================================================
   아이콘 폰트 사이즈 (헤더 타입 .hd-type-* 상속)
   ======================================================== */
/* 타입 A (login-text, login, mypage) 의 모든 i 태그 */
.hd-type-a i { 
    font-size: var(--px-24);
}

/* 타입 B (back, x, title 등 나머지) 의 모든 i 태그 */
.hd-type-b i { 
    font-size: var(--px-32);
}

/* ========================================================
   Head Space (본문 밀어내기 용)
   ======================================================== */
.head_space {
    width: 100%;
    display: block;
    background-color: transparent;
    pointer-events: none;
}

/* =========================================
   반응형 메뉴 CSS (미디어 쿼리)
========================================= */

/* [모바일 & 태블릿 기본 화면: 1023px 이하] */
.hd-pc-menu {
    display: none;
}

/* [PC 화면: 1024px 이상] */
@media (min-width: 1024px) {
    /* 기존 햄버거 메뉴 및 모바일 관련 요소 숨김 */
    #hamburger { 
        display: none !important; 
    }

    .hamburger-wrapper {
        display: none !important; /* 부모 요소까지 숨겨 gap을 제거 */
    }
    
    .sidr {
        display: none !important; 
    }

    .hd-type-a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: visible; 
    }

    /* 데스크탑 메뉴 스타일링 */
    .hd-pc-menu {
        display: block;
        flex: 1;
        text-align: center;
        position: relative;
        z-index: 100; 
    }

    .pc-menu-list {
        display: flex;
        justify-content: center;
        gap: 40px; 
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pc-menu-item {
        position: relative; 
        padding: 20px 0;
        font-size: 18px;
        font-weight: 500;
        color: #333; 
        height: 100%; 
        display: flex;
        align-items: center;
    }

    .pc-menu-item > a {
        text-decoration: none;
        color: inherit;
        display: block;
    }

    /* 데스크탑 서브메뉴 스타일링 */
    .pc-submenu {
        display: none;
        position: absolute;
        top: 100%; 
        left: 50%;
        transform: translateX(-50%);
        background: #ffffff;
        border: 1px solid #ededed;
        padding: 10px 0;
        min-width: 160px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        z-index: 9999; 
        border-radius: 8px;
    }

    .pc-submenu a {
        display: block;
        padding: 10px 20px;
        font-size: 14px;
        color: #666;
        text-decoration: none;
        white-space: nowrap;
        text-align: left;
    }

    .pc-submenu a:hover {
        background: #f8f8f8;
        color: #000;
    }

    /* 마우스 오버 시 서브메뉴 노출 */
    .pc-menu-item:hover .pc-submenu {
        display: block;
    }
}