/* 모바일 슬라이드 메뉴(#content_nav) 전용 디자인.
   원본 테마와 다르게 새로 디자인함(사용자 요청) — 기존 마크업/토글 클래스(jl_mobile_nav_open, mobile_menu_active)는 그대로 두고
   시각 스타일만 덮어씌운다. 헤더의 마젠타→레드 그라데이션과 통일감을 준다. */

#content_nav.jl_mobile_nav_wrapper {
    width: 320px !important;
    max-width: 86vw;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18) !important;
}

/* 상단 브랜드 헤더 */
#content_nav .jl_mobile_nav_inner {
    padding-bottom: 24px;
}
#content_nav .jl_mobile_nav_inner::before {
    content: "메뉴";
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 22px 28px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #6a1b52, #c81f3f);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 닫기 버튼 */
#content_nav .menu_mobile_icons.mobile_close_icons {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.15s ease;
    z-index: 2;
}
#content_nav .menu_mobile_icons.mobile_close_icons:hover {
    background: rgba(255, 255, 255, 0.32);
}
#content_nav .jl_close_wapper {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
}
#content_nav .jl_close_1,
#content_nav .jl_close_2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
}
#content_nav .jl_close_1 { transform: rotate(45deg); }
#content_nav .jl_close_2 { transform: rotate(-45deg); }

/* 메뉴 리스트 */
#content_nav .menu_moble_slide {
    margin: 8px 0 0 !important;
    padding: 0 8px !important;
}
#content_nav .menu_moble_slide > li {
    border-top: none !important;
    border-bottom: 1px solid #f0e6ea;
}
#content_nav .menu_moble_slide > li:last-child {
    border-bottom: none;
}
#content_nav .menu_moble_slide > li > a {
    padding: 15px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2a2a2a !important;
    text-transform: none !important;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
#content_nav .menu_moble_slide > li > a:hover {
    background: #fdf0f3;
    color: #c81f3f !important;
    padding-left: 26px !important;
}

/* 서브메뉴 펼침 화살표 — Line Awesome 폰트(la-angle-*)가 로드돼 있지 않으므로
   아이콘 폰트에 의존하지 않고 CSS만으로 셰브론을 그린다. */
#content_nav .arrow_down {
    position: absolute !important;
    top: 6px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 50%;
    transition: transform 0.25s ease, background 0.15s ease;
}
/* 실제 클릭 핸들러가 이 <i> 에 붙어 있으므로(custom.js) 클릭 영역은 그대로 두고 글자만 투명 처리한다. */
#content_nav .arrow_down i {
    display: block;
    width: 100%;
    height: 100%;
    color: transparent !important;
}
#content_nav .arrow_down::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #c81f3f;
    border-bottom: 2px solid #c81f3f;
    transform: translate(-50%, -65%) rotate(45deg);
    pointer-events: none;
}
/* JS 가 .sub-menu 에 menu-active-class 를 토글할 때, 같은 li 안의 화살표를 함께 회전시킨다 */
#content_nav li.menu-item-has-children:has(> .sub-menu.menu-active-class) > a > .arrow_down {
    transform: rotate(180deg);
    background: #fdf0f3;
}

/* 서브메뉴 항목 */
#content_nav .sub-menu {
    background: #fbfafb;
    border-radius: 10px;
    margin: 2px 6px 6px !important;
    overflow: hidden;
}
#content_nav .sub-menu > li {
    border-top: 1px solid #f0e6ea !important;
}
#content_nav .sub-menu > li:first-child {
    border-top: none !important;
}
#content_nav .sub-menu > li > a {
    padding: 12px 20px 12px 36px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #555 !important;
}
#content_nav .sub-menu > li > a:hover {
    color: #c81f3f !important;
    background: #f5eaee;
}

/* 배경 오버레이: 패널보다 z-index 낮게, 패널 왼쪽 나머지 화면을 확실히 덮도록 */
.mobile_menu_overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(20, 10, 15, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.mobile_menu_overlay.mobile_menu_active {
    opacity: 1 !important;
    visibility: visible !important;
}
#content_nav.jl_mobile_nav_wrapper {
    z-index: 99999 !important;
}