/* ==========================================================================
   One-Line Header Layout (로고 - 메뉴 - 회원가입/로그인 한 줄 배치)
   ========================================================================== */

#hd {
    position: relative;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
}

/* Flexbox로 1줄(가로) 통합 배치 */
#hd_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* 1. 좌측 로고 */
#logo {
    flex-shrink: 0;
}

#logo img {
    height: 40px;
    vertical-align: middle;
}

/* 2. 중앙 메뉴바 (투명 & 센터) */
#gnb {
    background: transparent;
    flex-grow: 1;
}

#gnb_1ul {
    display: flex;
    justify-content: center; /* 메뉴 센터 정렬 */
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gnb_1li {
    position: relative;
    white-space: nowrap;
}

.gnb_1a {
    display: block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.gnb_1li:hover > .gnb_1a {
    color: #0066ff;
}

/* PC 2차 드롭다운 */
.gnb_2ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 150px;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    z-index: 1000;
}

.gnb_1li:hover .gnb_2ul {
    display: block;
}

.gnb_2li {
    text-align: center;
}

.gnb_2a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: #475569;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.gnb_2a:hover {
    background-color: #f1f5f9;
    color: #0066ff;
}

/* 3. 우측 회원가입 / 로그인 */
#tnb {
    flex-shrink: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

#tnb li {
    display: inline-block;
    margin-left: 12px;
}

#tnb a {
    color: #64748b;
    font-size: 13px;
    text-decoration: none;
}

#tnb a:hover {
    color: #000000;
}

#tnb .tnb_admin {
    color: #ef4444;
    font-weight: bold;
}

/* 4. 메인 wrapper 컨테이너 (100% 화면 채우기) */
#wrapper {
    width: 100%;
    max-width: none; /* 최대 너비 제한 해제 */
    margin: 0;       /* 좌우 여백 제거 */
    padding: 0;      /* 내부 여백 제거 */
    box-sizing: border-box;
}
/* 모바일 전용 요소 기본 숨김 */
.mobile_menu_btn, .m_gnb_header, .m_sub_toggle, #gnb_overlay {
    display: none;
}


/* ==========================================================================
   Mobile Responsive (모바일 우측 메뉴)
   ========================================================================== */
@media screen and (max-width: 992px) {
    #tnb {
        display: none; /* PC 상단 회원버튼 숨김 */
    }

    /* 햄버거 버튼 (오른쪽 노출) */
    .mobile_menu_btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .mobile_menu_btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 2px;
    }

    #gnb_overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 9998;
    }

    #gnb_overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 모바일 우측 슬라이드 메뉴 */
    #gnb {
        position: fixed;
        top: 0;
        right: -280px; /* 오른쪽 외부 대기 */
        left: auto;
        width: 280px;
        height: 100%;
        background: #ffffff;
        margin: 0;
        z-index: 9999;
        transition: right 0.3s ease;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
    }

    #gnb.active {
        right: 0;
    }

    .m_gnb_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .m_tnb {
        display: flex;
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .m_tnb a {
        font-size: 13px;
        color: #475569;
        text-decoration: none;
    }

    .m_close_btn {
        background: none;
        border: none;
        font-size: 24px;
        color: #64748b;
        cursor: pointer;
        line-height: 1;
    }

    #gnb_1ul {
        flex-direction: column;
        align-items: stretch;
    }

    .gnb_1li {
        border-bottom: 1px solid #f1f5f9;
    }

    .gnb_1a {
        padding: 15px 20px;
        font-size: 15px;
    }

    .m_sub_toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .m_sub_toggle::before {
        content: "+";
        font-size: 18px;
        color: #64748b;
        line-height: 50px;
    }

    .gnb_1li.open .m_sub_toggle::before {
        content: "-";
    }

    .gnb_2ul {
        display: none;
        position: static;
        transform: none;
        min-width: 100%;
        background-color: #f8fafc;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 5px 0;
    }

    .gnb_1li.open .gnb_2ul {
        display: block;
    }

    .gnb_2li {
        text-align: left;
    }

    .gnb_2a {
        padding: 10px 20px 10px 35px;
        font-size: 14px;
        color: #64748b;
    }
}