/* 퀵메뉴 — 1:1문의 포인트 (shop_layout.css 기본 스타일 이외 추가분만) */
.quick-menu .quick-menu-box.heading-current span,
.quick-menu .quick-menu-box.heading-current strong {
    font-size: 9px;
    color: #9ca3af;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.quick-menu .quick-menu-box.kp-qmenu-qna { background: #f8faff; border-top: 1px solid #eff6ff; }
.quick-menu .quick-menu-box.kp-qmenu-qna:hover { background: #eff6ff; }
.quick-menu .quick-menu-box.kp-qmenu-qna a i { color: #3b82f6; }
.quick-menu .quick-menu-box.kp-qmenu-qna a span { color: #1d4ed8; }
.quick-menu .quick-menu-box.kp-qmenu-qna a:hover i { color: #1d4ed8; }
.quick-menu .quick-menu-box.kp-qmenu-qna a:hover span { color: #1e40af; }

/* ── 모바일 카테고리 드롭다운 (category_modern) ── */
/* category_modern.css 의 .kp-mob-cat-* 가 주 스타일, 여기서는 위치/너비 보정 */
#nav_category .dropdown-menu.kp-mob-cat-menu {
    left: 0 !important;
    right: auto !important;
    width: 260px !important;
}
@media (max-width: 767px) {
    #nav_category .dropdown-menu.kp-mob-cat-menu {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
}

.event_head a{
    color: #fcae18 !important;
}

.mobile_only{
    display: none;
}

#new_icon{
    float: right;
    position: absolute;
    top: 10px;
    right: 4px;
    width: 15px;
    height: 15px;
}


.header-right-ul li{
    display: inline-block;
}

.cart-badge {
    position: absolute;
    right: 8px;
    border-radius: 50% !important;

    top: 10px;
    background-color:  #fcae18 !important;
    color: black !important;


}


.header-right-ul {
    position: absolute;
    top: 25px;
    right: 10px;
}

#right_ic{
    margin-right: 10px;
    margin-top:10px;
    width: 50px;
}

/* CSS */
.top-area {
    display: flex;
    flex-direction: column-reverse;
}

.top-area img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}


.my-dropdown-menu{
    min-width: initial !important;
    text-align: center;
    width: 120px;
}

.my-dropdown-item{
    display: block;
    margin: 10px 0;
    font-family: "Noto Sans KR";
}

.my-dropdown-menu-right{
    right: -25px;
}
.my-dropdown-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* 수평 선 스타일 및 색상 지정 */
    margin: 0.5rem 0; /* 위아래 여백 지정 */
}

.main_sub_title{
    font-family: "Noto Sans KR";
}

p, a, ul , li, label{
    font-family: "Noto Sans KR";
}

.mobile-sidebar-left-trigger{
    cursor: pointer;
    background-color: initial;
    border: 0;
     color: black;
    position: inherit;
}

.top-bg{
    position: absolute; /* 절대적 위치 설정 */
    width: 50%; /* 부모 요소의 50%를 차지하도록 설정 */
    height: 80px; /* 이미지의 높이를 자동으로 조절하여 비율을 유지 */
    z-index: 1;
}

.pc-l {
    left: 0; /* 왼쪽에 배치 */
}

.pc-r {
    right: 0; /* 오른쪽에 배치 */
}


.header-nav .navbar-nav > li > a{
    line-height: initial !important;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 8px;
}

.header-nav .navbar-nav > .dropdown > a:after{
    line-height: 60px;
}

/* 구형 모바일 규칙 — 아래 종합 블록(모바일 헤더 전면 리디자인)으로 대체됨 */



/* 큰 디바이스 (데스크톱 등) */
@media (min-width: 992px) {
    /* 여기에 큰 디바이스에 적용될 스타일을 작성합니다. */

    .mobile_only{
        display: none !important;
    }

    .pc-version{
        display: block;
    }

    .mobile-version{
        display: none;
    }

    .top-bg{
        display: block;
    }
}

@media (max-width: 500px) {
    .hide-on-small {
        display: none !important;
    }
}


/* ============================================================
   톤앤매너 v2026-04-29 (보수적 — 레이아웃은 건드리지 않고 색/hover/뱃지만)
   원칙
   - .header-title-in 높이/로고 위치/검색바 폭 등 구조는 원본 유지
   - .header-nav .navbar height 60px, line-height 50px 기반 정렬 유지
   - #nav_category 의 노랑 박스 CTA 등 강제 override 제거
   - page-title-wrap 만 안전하게 재디자인 (breadcrumb 가시성)
   ============================================================ */

/* ══════════════════════════════════════════════
   검색바 리디자인 (.kp-search-*)
   ══════════════════════════════════════════════ */

/* shop_layout.css 의 .header-title-search 구 스타일 덮어쓰기
   (margin-left:-200px 과 transform 이 중복 적용되어 좌측 이탈 발생 → 여기서 리셋) */
/* ══════════════════════════════════════════════
   헤더 3열 레이아웃 — 로고(좌) / 검색(중앙) / 아이콘(우)
   ══════════════════════════════════════════════ */

.header-title .header-title-in .container.kp-hd-flex {
    display: flex !important;
    align-items: center !important;
    height: 100px;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ── 로고 : 1/3 왼쪽 정렬 ── */
.kp-hd-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.header-title .header-title-in .kp-hd-logo .title-logo-image {
    position: static !important;
    top: auto !important; left: auto !important;
    margin: 0 !important;
    height: 46px;
    width: auto;
}

/* ── 검색 : 1/3 중앙 ── */
.header-title .header-title-in .header-title-search.kp-search-wrap {
    flex: 1 !important;
    max-width: 480px !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important; right: auto !important;
    min-width: 0;
}

/* ── 우측 아이콘 : 1/3 오른쪽 정렬 ── */
.kp-hd-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.kp-hd-right .header-right-ul {
    position: static !important;
    top: auto !important; right: auto !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0; padding: 0;
    list-style: none;
}
.kp-hd-right .header-right-ul > li {
    display: inline-flex !important;
    align-items: center;
}
/* 뱃지 — flex 환경에서 위치 보정 */
.kp-hd-right .cart-badge {
    position: relative !important;
    top: -8px !important;
    right: 14px !important;
    margin-right: -10px;
}

.kp-search-form { width: 100%; }
/* ── 검색 컨테이너 ── */
.kp-search-inner {
    position: relative;         /* 돋보기 아이콘 absolute 기준 */
    display: flex;
    align-items: stretch;       /* 버튼·입력 동일 높이 자동 맞춤 */
    height: 44px;
    border: 1.5px solid #e2e5ea;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.kp-search-inner:focus-within {
    border-color: #f8b500;
    box-shadow: 0 0 0 2px rgba(248,181,0,0.18);
}

/* 돋보기 아이콘 (input 위 absolute) */
.kp-search-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #bfc4ce;
    pointer-events: none;
    z-index: 2;
    transition: color .15s;
}
.kp-search-inner:focus-within .kp-search-ico { color: #f8b500; }

/* 입력 필드 — shop_layout.css #sch_str 완전 덮어쓰기 */
.kp-search-input,
#sch_str.kp-search-input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 10px 0 36px !important;
    font-size: 14px !important;
    font-weight: 400;
    color: #1f2937 !important;
    font-family: 'Noto Sans KR', sans-serif;
    -webkit-appearance: none;
    appearance: none;
    height: auto !important;   /* align-items:stretch 가 높이 결정 */
}
.kp-search-input::placeholder { color: #adb3be !important; }

/* shop_layout.css focus border 제거 */
#sch_str, #sch_str:focus,
.header-title .header-title-in .header-title-search .input > input,
.header-title .header-title-in .header-title-search .input > input:focus {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── 검색 버튼 ── */
.kp-search-btn {
    flex-shrink: 0;
    padding: 0 22px;
    background: #f8b500;
    color: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s ease;
    font-family: 'Noto Sans KR', sans-serif;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.kp-search-btn i { font-size: 13px; }
.kp-search-btn:hover { background: #e6a300; }

/* 관리자 아이콘 */
.kp-hd-admin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626 !important;
    font-size: 14px;
    text-decoration: none !important;
    transition: background .15s;
}
.kp-hd-admin:hover { background: #fecaca; }

/* 500px 이하에서 라벨 숨김 */
@media (max-width: 500px) {
    .kp-hd-qna-label { display: none; }
    .kp-hd-qna { padding: 7px 10px !important; border-radius: 50%; width: 34px; height: 34px; justify-content: center; }
}

/* 로고/우측 아이콘 hover 살짝 페이드 — opacity 는 아이콘 이미지에만 적용 (li 전체 X — 드롭다운 흐려짐 방지) */
.header-title .header-title-in .title-logo-image { transition: opacity .15s ease; }
.header-title .header-title-in .title-logo-image:hover { opacity: 0.85; }
.header-right-ul li > a > img,
.header-right-ul li > a > #right_ic { transition: opacity .15s ease; }
.header-right-ul li > a:hover > img,
.header-right-ul li > a:hover > #right_ic { opacity: 0.75; }
/* 드롭다운 자체에는 opacity 절대 적용 X */
.my-dropdown-menu, .my-dropdown-menu *,
.dropdown-menu, .dropdown-menu * { opacity: 1 !important; }

/* 장바구니 뱃지 — 빨강 + 그림자 (수치는 기존 위치 유지, 색만 변경) */
.cart-badge {
    background-color: #e74c3c !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Header Nav 메뉴 — 모든 메뉴 항목 높이 48px 고정 (불규칙한 padding/line-height 통일) */
.header-nav .navbar-nav > li > a.my-nav-item {
    position: relative;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 20px !important;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    transition: color .15s ease;
    border-bottom: 0 !important;
}
/* 호버 시 노출되는 고정 폭 노랑 라인 (40px 중앙) */
.header-nav .navbar-nav > li > a.my-nav-item::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: #f8b500;
    border-radius: 2px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.header-nav .navbar-nav > li > a.my-nav-item:hover {
    color: #f8b500 !important;
}
.header-nav .navbar-nav > li > a.my-nav-item:hover::after {
    opacity: 1;
}
/* 원본 ID hover (#brand-cat / #now_delivery) 의 직선 border 충돌 제거 */
#brand-cat,
#now_delivery,
li#now_delivery > a.my-nav-item,
#brand-cat:hover,
#now_delivery:hover,
li#now_delivery:hover > a.my-nav-item {
    border-bottom: 0 !important;
}
#brand-cat:hover,
#now_delivery:hover,
li#now_delivery:hover > a.my-nav-item {
    color: #f8b500 !important;
}

/* event_head 강조 색은 기존 css(#fcae18) 유지 — 변경 없음 */

/* ══════════════════════════════════════════════
   Quick Nav strip — 모바일 전용 가로 스크롤 행
   PC(≥768px): navbar-nav 안 hidden-xs/sm 항목이 대신
   ══════════════════════════════════════════════ */

/* PC에서 strip 완전 숨김 */
@media (min-width: 768px) {
    .kp-qnav-strip { display: none !important; }
}

.kp-qnav-strip {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.kp-qnav-strip::-webkit-scrollbar { display: none; }
.kp-qnav-ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    min-width: max-content;
}
.kp-qnav-li {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
}
.kp-qnav-a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 15px !important;
    height: 46px !important;
    line-height: 1 !important;
    color: #374151 !important;
    font-size: 15px !important;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
    transition: color .15s ease;
    border-bottom: 0 !important;   /* border 방식 제거 → 레이아웃 영향 없음 */
}
/* 호버 언더라인 — ::after 가상요소로 (레이아웃 영향 없음) */
.kp-qnav-a::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 2px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.kp-qnav-a:hover::after { opacity: 1; }

.kp-qnav-a i {
    font-size: 13px;
    flex-shrink: 0;
    transition: color .15s ease;
}

/* ── 항목별 기본 색상 ── */
/* 브랜드 */
.kp-qnav-brand { color: #1f2937 !important; }
.kp-qnav-brand i { color: #6b7280; }
.kp-qnav-brand:hover { color: #111827 !important; }

/* 견적문의 */
.kp-qnav-quote { color: #1d4ed8 !important; }
.kp-qnav-quote i { color: #3b82f6; }
.kp-qnav-quote:hover { color: #1e40af !important; }

/* 블로그 */
.kp-qnav-blog { color: #059669 !important; }
.kp-qnav-blog i { color: #10b981; }
.kp-qnav-blog:hover { color: #047857 !important; }

/* 이벤트/기획전 */
.kp-qnav-event { color: #7c3aed !important; }
.kp-qnav-event i { color: #8b5cf6; }
.kp-qnav-event:hover { color: #6d28d9 !important; }

/* 오피스넥스 */
.kp-qnav-office { color: #0369a1 !important; }
.kp-qnav-office i { color: #0ea5e9; }
.kp-qnav-office:hover { color: #075985 !important; }

/* 나비엠알오 */
.kp-qnav-navi { color: #0e7490 !important; }
.kp-qnav-navi i { color: #06b6d4; }
.kp-qnav-navi:hover { color: #155e75 !important; }

/* ── 당일출고 — 레드 강조 + 마감 뱃지 ── */
.kp-qnav-sameday { color: #dc2626 !important; gap: 8px; }
.kp-qnav-sameday i { color: #ef4444; }
.kp-qnav-sameday:hover { color: #b91c1c !important; }

.kp-qnav-deadline {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    background: #dc2626;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800;
    border-radius: 4px;
    letter-spacing: 0.3px;
    line-height: 1.5;
    animation: kpDeadlinePulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220,38,38,.5);
}
@keyframes kpDeadlinePulse {
    0%   { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
    50%  { box-shadow: 0 0 0 5px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

/* ── (N) New 뱃지 ── */
.kp-qnav-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    background: #ef4444;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 900;
    border-radius: 50%;
    line-height: 1;
    animation: kpNewBounce 1.8s ease infinite;
    flex-shrink: 0;
    margin-left: 1px;
    vertical-align: middle;
}
@keyframes kpNewBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    40%       { transform: translateY(-3px) scale(1.15); }
    60%       { transform: translateY(-1px) scale(1.05); }
}

/* ── 반응형 ── */

/* PC: navbar height(60px) 에 맞춰 kp-qnav 아이템 높이 통일 */
@media (min-width: 992px) {
    .header-nav .navbar-nav > li.kp-qnav-li {
        height: 60px;
        display: flex !important;
        align-items: center;
    }
    .header-nav .navbar-nav > li.kp-qnav-li > a.kp-qnav-a {
        height: 60px !important;
        line-height: 1;
    }
}

@media (max-width: 991px) {
    .kp-qnav-a {
        padding: 0 11px !important;
        font-size: 14px !important;
        height: 42px !important;
    }
}

/* ══════════════════════════════════════════════
   모바일 헤더 전면 리디자인 (≤ 767px)  v2
   흰 배경 + 골드(#f8b500) 포인트 / 2줄 레이아웃
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── 1. 헤더 타이틀 — 높이 자동, 구형 포지셔닝 리셋 ── */
    .header-title .header-title-in {
        height: auto !important;
        border-bottom: none !important;
    }
    .header-right-ul {
        position: static !important;
        top: auto !important;
        right: auto !important;
    }
    .title-logo-image { margin-top: 0 !important; }
    .mobile_only { display: block; }
    .pc-version { display: none; }
    .mobile-version { display: block; }
    .top-bg { display: none; }

    /* ── 2. 헤더 컨테이너: 2줄 레이아웃 ── */
    .kp-hd-flex {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 14px 16px 0 !important;
        align-items: center !important;
    }
    /* Row 1 — 로고 (좌) */
    .kp-hd-logo {
        order: 1 !important;
        flex: 1 1 auto !important;
        justify-content: flex-start !important;
    }
    .kp-hd-logo img,
    .header-title .header-title-in .kp-hd-logo .title-logo-image {
        height: 30px !important;
        width: auto !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
    }
    /* Row 1 — 아이콘 (우) */
    .kp-hd-right {
        order: 2 !important;
        flex: 0 0 auto !important;
    }
    .kp-hd-right .header-right-ul {
        gap: 8px !important;
    }
    #right_ic {
        width: 28px !important;
        margin: 0 !important;
    }
    .kp-hd-admin {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    .kp-hd-right .cart-badge {
        top: -8px !important;
        right: 14px !important;
    }
    .mobile-sidebar-left-trigger {
        padding: 4px 8px !important;
        font-size: 20px !important;
        color: #374151 !important;
    }

    /* Row 2 — 검색바 전폭 */
    .kp-search-wrap,
    .header-title .header-title-in .header-title-search.kp-search-wrap {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 0 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: static !important;
        transform: none !important;
    }
    .kp-search-form { width: 100% !important; }
    .kp-search-inner {
        border-radius: 22px !important;
        border: 1.5px solid #e5e7eb !important;
        background: #f9fafb !important;
        height: 40px !important;
    }
    .kp-search-inner:focus-within {
        border-color: #f8b500 !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(248,181,0,0.12) !important;
    }
    .kp-search-input { font-size: 13px !important; }
    .kp-search-btn {
        padding: 0 16px !important;
        font-size: 13px !important;
        border-radius: 0 22px 22px 0 !important;
    }

    /* ── 3. kp-qnav-strip — 가로 스크롤 → 4열 2행 그리드 ── */
    .kp-qnav-strip {
        overflow: visible !important;
        overflow-x: visible !important;
        border-top: 1px solid #f0f0f0;
        border-bottom: 2px solid #f8b500;
        background: #fff;
    }
    .kp-qnav-ul {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        flex-wrap: unset !important;
        min-width: unset !important;
    }
    .kp-qnav-li {
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        flex-shrink: unset !important;
        /* 1행/2행 구분선 */
        border-bottom: 1px solid #f3f4f6;
    }
    /* 2행 아이템은 하단 구분선 제거 */
    .kp-qnav-li:nth-child(n+5) {
        border-bottom: none !important;
    }
    /* 세로 구분선 (각 열 우측, 마지막 열 제외) */
    .kp-qnav-li:not(:nth-child(4n)) {
        border-right: 1px solid #f3f4f6;
    }
    .kp-qnav-a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        color: #374151 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 0 4px !important;
        height: 40px !important;
        gap: 0 !important;
        position: relative;
        white-space: nowrap;
    }
    .kp-qnav-brand, .kp-qnav-quote, .kp-qnav-sameday,
    .kp-qnav-blog,  .kp-qnav-event, .kp-qnav-office,
    .kp-qnav-navi { color: #374151 !important; }
    .kp-qnav-a i { display: none !important; }
    .kp-qnav-deadline { display: none !important; }
    .kp-qnav-new { display: none !important; }
    .kp-qnav-a:hover { color: #f8b500 !important; background: #fffbeb !important; }
    .kp-qnav-a:hover::after { display: none !important; }
}

/* ── 메인 헤더 (로고/검색/아이콘 영역) — 흰 배경 + 노랑 하단 보더 + 상하 spacing ── */
.header-title .header-title-in {
    background: #fff !important;
    border-bottom: 2px solid #f8b500 !important;
    box-sizing: border-box;
}


/* ── 카테고리 전체보기 드롭다운 — 흰 배경 진하게 + 명확한 그림자 ── */
#DropdownMainMenu,
.header-nav .dropdown-menu,
.my-dropdown-menu,
.dropdown-menu {
    background: #fff !important;
    background-color: #fff !important;
    opacity: 1 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: none !important;
}
#DropdownMainMenu li,
.header-nav .dropdown-menu li {
    background: #fff !important;
    opacity: 1 !important;
}
#DropdownMainMenu a,
.header-nav .dropdown-menu a,
.my-dropdown-menu .my-dropdown-item,
.dropdown-menu a {
    color: #1f2937 !important;
    opacity: 1 !important;
}
/* 호버 시 노랑 액센트 */
#DropdownMainMenu a:hover,
.header-nav .dropdown-menu a:hover,
.my-dropdown-menu .my-dropdown-item:hover,
.dropdown-menu a:hover {
    background: #fff8e7 !important;
    color: #b45309 !important;
}

/* ── page-title-wrap (breadcrumb 영역) — 옅은 크림 zone + 상하 보더 ── */
.page-title-wrap {
    background: #fffdf5 !important;            /* 거의 흰색의 미세한 크림 — 메뉴 영역과 zone 분리 */
    padding: 13px 0 !important;
    border-top: 1px solid #e8e8e8 !important;  /* 상단 보더 — 메뉴와 명확히 구분 */
    border-bottom: 1px solid #e8e8e8 !important;
    box-shadow: inset 0 -1px 0 rgba(248, 181, 0, 0.15);  /* 하단 노랑 미세 그림자 */
    position: relative;
}
/* 좌측 노랑 액센트 — 4px 컬러 라인 (브랜드 정체성) */
.page-title-wrap::before {
    content: '';
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px;
    background: #f8b500;
    border-radius: 2px;
}
.page-title-wrap .container { padding-left: 14px; }

.page-title-wrap h2 {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.4px;
    line-height: 1.5;
    margin: 0 !important;
    color: #111827 !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.page-title-wrap h2 a {
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color .12s ease;
}
.page-title-wrap h2 a:hover {
    color: #f8b500 !important;
}
/* 마지막 a — 현재 위치 강조 */
.page-title-wrap h2 a:last-of-type {
    color: #0f172a !important;
    font-weight: 700 !important;
}
/* 구분자 ›  — 모던 chevron 톤 */
.page-title-wrap h2 span {
    color: #d1d5db !important;
    margin: 0 6px;
    font-weight: 400;
    font-size: 12px;
}

@media (max-width: 991px) {
    .page-title-wrap { padding: 12px 0 !important; }
    .page-title-wrap h2 { font-size: 14px !important; }
    .page-title-wrap h2 span { margin: 0 4px; }
    .page-title-wrap::before { height: 16px; }
}

/* ══════════════════════════════════════════════
   사이드바 — 모바일 Modern Drawer v4 (2025 트렌드)
   iOS Sheet / Material Drawer 스타일
   PC(≥992px): 원본 유지 / 모바일(≤991px): 전면 재설계
   ══════════════════════════════════════════════ */

@media (max-width: 991px) {

    /* ── Drawer 슬라이드 ── */
    .sidebar.left {
        display: block !important;
        left: 0 !important;
        transform: translateX(-105%);
        transition: transform 0.32s cubic-bezier(0.32, 0, 0.67, 0) !important;
        will-change: transform;
        box-shadow: none;
        width: 300px;
        max-width: 300px;
        background: #fff;
        border-right: 0;
        overflow-x: hidden !important;  /* 자식 탈출 방지 */
    }
    .sidebar-left-content {
        width: 300px !important;
        max-width: 300px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    .sidebar.left.kp-open {
        transform: translateX(0) !important;
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.22);
        transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1) !important;
    }

    /* 딤드 배경 — blur 효과 */
    .sidebar-left-mask {
        display: block !important; opacity: 0 !important;
        pointer-events: none !important; transition: opacity 0.32s ease !important;
        background: rgba(15, 23, 42, 0.55) !important;
        backdrop-filter: blur(3px);
    }
    .sidebar-left-mask.active { opacity: 1 !important; pointer-events: auto !important; }

    /* ══════════════════
       헤더 — 로고 + 닫기
       ══════════════════ */
    .sidebar .sidebar-title {
        display: flex !important; align-items: center !important;
        justify-content: space-between !important;
        height: 60px !important; line-height: 1 !important;
        padding: 0 16px !important; margin-bottom: 0 !important;
        background: #fff !important;
        border-bottom: 0 !important;
        box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    }
    .sidebar .sidebar-title img { height: 26px; width: auto; display: block; margin: 0 !important; }
    .sidebar .sidebar-title .sidebar-close-btn {
        position: static !important;
        width: 36px !important; height: 36px !important; line-height: 36px !important;
        border-radius: 10px !important; background: #f1f5f9 !important;
        color: #475569 !important; font-size: 14px !important;
        display: flex !important; align-items: center; justify-content: center;
        transition: all 0.15s; border: 0 !important;
    }
    .sidebar .sidebar-title .sidebar-close-btn:hover {
        background: #f8b500 !important; color: #fff !important;
        transform: scale(1.05);
    }

    /* ══════════════════
       회원 영역 — 컴팩트 2버튼
       ══════════════════ */
    .sidebar .sidebar-member-menu {
        padding: 12px 16px 14px !important; background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0; margin: 0 !important;
    }
    .sidebar .sidebar-member-menu .sidebar-other-btn-box { width: 50%; }
    .sidebar .sidebar-member-menu .other-btn-left { padding-right: 5px; }
    .sidebar .sidebar-member-menu .other-btn-right { padding-left: 5px; }
    .sidebar .sidebar-member-menu .sidebar-other-btn {
        height: 40px !important; line-height: 40px !important;
        border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important;
        text-align: center; background: #fff !important; color: #374151 !important;
        border: 1px solid #e2e8f0 !important;
        transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .sidebar .sidebar-member-menu .sidebar-other-btn:hover {
        border-color: #f8b500 !important; color: #b45309 !important; background: #fffbeb !important;
    }
    .sidebar .sidebar-member-menu .other-btn-red {
        background: #f8b500 !important; color: #fff !important; border-color: #f8b500 !important;
        box-shadow: 0 2px 6px rgba(248,181,0,0.3) !important;
    }
    .sidebar .sidebar-member-menu .other-btn-red:hover { background: #e6a300 !important; border-color: #e6a300 !important; }

    /* ══════════════════
       카테고리 섹션 레이블
       ══════════════════ */
    /* Bootstrap float 강제 차단 — navbar-nav > li { float: left } 오버라이드 */
    .sidebar .nav.navbar-nav {
        margin: 0 !important; border: 0 !important;
        float: none !important;
        width: 100% !important;
    }
    .sidebar .nav.navbar-nav > li {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }
    .sidebar .nav.navbar-nav > li#nav_category {
        border-top: 0 !important;
    }

    /* 카테고리 전체보기 트리거 */
    .sidebar .nav.navbar-nav > li > a {
        display: flex !important; align-items: center !important;
        font-size: 13.5px !important; font-weight: 600 !important; color: #334155 !important;
        padding: 0 16px !important; height: 52px !important; line-height: 1 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #fff !important; border-left: 0 !important;
        transition: background 0.12s, color 0.12s; position: relative;
        letter-spacing: -0.2px;
    }
    .sidebar .nav.navbar-nav > li > a:hover {
        background: #fef9ee !important; color: #b45309 !important;
    }
    /* 카테고리 전체보기 강조 — 섹션 헤더처럼 */
    .sidebar .nav.navbar-nav > li#nav_category > a {
        background: #fff !important; color: #0f172a !important;
        font-size: 14px !important; font-weight: 700 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-top: 0 !important; height: 52px !important;
    }
    .sidebar .nav.navbar-nav > li#nav_category > a:before {
        content: '' !important; display: inline-block !important;
        width: 3px !important; height: 18px !important;
        background: #f8b500 !important; border-radius: 2px !important;
        margin-right: 12px !important; flex-shrink: 0;
    }
    /* 카테고리 전체보기 우측 — ::after 완전 숨김 (별도 행 렌더링 버그 방지)
       접기/펴기 표시는 .cate-dropdown-open 버튼이 담당 */
    .sidebar .nav.navbar-nav > li.dropdown > a:after,
    .sidebar .nav.navbar-nav > li.dropdown > a::after {
        display: none !important;
        content: '' !important;
        visibility: hidden !important;
        width: 0 !important; height: 0 !important;
        border: 0 !important;
        position: absolute !important;
    }
    /* open 상태: 배경색 제거 → 금색 좌측 바 + 진하게 */
    .sidebar .nav.navbar-nav > li.dropdown.open > a {
        background: #fff !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        border-left: 3px solid #f8b500 !important;
        padding-left: 13px !important;
    }

    /* ══════════════════
       카테고리 드롭다운 컨테이너
       ══════════════════ */
    /* 드롭다운 공통 레이아웃 — display 는 별도로 제어 */
    .sidebar .nav.navbar-nav li.dropdown > .dropdown-menu,
    .sidebar #DropdownMainMenu {
        position: static !important; float: none !important;
        width: 100% !important; background: #f8fafc !important;
        border: none !important; border-top: 0 !important;
        box-shadow: inset 0 3px 6px rgba(0,0,0,0.04) !important;
        padding: 6px 0 !important; margin: 0 !important;
        border-radius: 0 !important; max-height: none !important;
        list-style: none !important;
    }
    /* 사이드바 모든 ul — 불릿 완전 제거 */
    .sidebar ul,
    .sidebar .dropdown-menu,
    .sidebar #DropdownMainMenu,
    .sidebar #DropdownMainMenu ul,
    .sidebar #DropdownMainMenu li { list-style: none !important; }
    /* 닫힘 기본값 */
    .sidebar .nav.navbar-nav li.dropdown:not(.open) > .dropdown-menu { display: none !important; }
    /* 열림 — JS가 .open 클래스 + inline style 동시 설정, CSS는 보조 */
    .sidebar .nav.navbar-nav li.dropdown.open > .dropdown-menu { display: block !important; }
    /* #DropdownMainMenu: JS inline style이 1차 제어, CSS는 .open 상태 fallback */
    .sidebar #nav_category.open > #DropdownMainMenu { display: block !important; }
    .sidebar #nav_category:not(.open) > #DropdownMainMenu { display: none !important; }

    /* ══════════════════
       카테고리 1단계 아이템 — flex row 레이아웃
       (float 차단 후 li 전체를 flex 행으로: 링크 | 버튼)
       ══════════════════ */
    .sidebar #DropdownMainMenu > li,
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li {
        display: flex !important;
        flex-wrap: wrap !important;       /* 서브메뉴는 다음 행으로 */
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #f1f5f9 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* 카테고리 링크 — flex: 1 (버튼이 차지한 나머지 전부) */
    .sidebar #DropdownMainMenu > li > a:not(.cate-dropdown-open),
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li > a:not(.cate-dropdown-open) {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important; align-items: center !important;
        height: 48px !important; line-height: 1 !important;
        padding: 0 8px 0 20px !important;
        font-size: 13.5px !important; font-weight: 600 !important;
        color: #334155 !important; background: transparent !important;
        border: 0 !important;
        white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important;
        transition: background 0.1s, color 0.1s;
    }
    .sidebar #DropdownMainMenu > li > a:not(.cate-dropdown-open):hover,
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li > a:not(.cate-dropdown-open):hover {
        background: #fef9ee !important; color: #b45309 !important;
    }
    /* open 상태 — 링크 좌측 금색 바 */
    .sidebar #DropdownMainMenu > li.open > a:not(.cate-dropdown-open),
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li.open > a:not(.cate-dropdown-open) {
        color: #0f172a !important;
        font-weight: 700 !important;
        border-left: 3px solid #f8b500 !important;
        padding-left: 17px !important;
    }
    /* active 상태 */
    .sidebar #DropdownMainMenu > li.active > a:not(.cate-dropdown-open),
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li.active > a:not(.cate-dropdown-open) {
        color: #b45309 !important; font-weight: 700 !important;
        border-left: 3px solid #f8b500 !important;
        padding-left: 17px !important;
    }

    /* ══════════════════
       접기/펴기 버튼 — flex 아이템 (position absolute 완전 제거)
       FontAwesome fa-chevron-down 아이콘 회전
       ══════════════════ */
    .sidebar .cate-dropdown-open {
        flex-shrink: 0 !important;
        position: static !important;      /* absolute 제거 */
        width: 40px !important; height: 48px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        padding: 0 !important;
        outline: none !important;
        margin-right: 4px !important;
        transform: none !important;       /* translateY(-50%) 제거 */
        transition: none !important;
    }
    .sidebar .cate-dropdown-open i {
        font-size: 11px !important;
        color: #94a3b8 !important;
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s !important;
        pointer-events: none !important;
    }
    .sidebar .cate-dropdown-open:hover i { color: #f8b500 !important; }
    .sidebar li.open > .cate-dropdown-open i {
        transform: rotate(180deg) !important;
        color: #f8b500 !important;
    }
    /* ::before / ::after 완전 비활성화 */
    .sidebar .cate-dropdown-open::before,
    .sidebar .cate-dropdown-open::after {
        display: none !important;
        content: none !important;
    }

    /* 서브메뉴 — flex-wrap 다음 행 전체 폭 */
    .sidebar #DropdownMainMenu > li > .dropdown-menu,
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li > .dropdown-menu {
        flex-basis: 100% !important;
    }

    /* ══════════════════
       2단계 서브메뉴
       ══════════════════ */
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li > .dropdown-menu,
    .sidebar #DropdownMainMenu > li > .dropdown-menu {
        display: none !important; position: static !important; float: none !important;
        left: auto !important; top: auto !important; width: 100% !important; min-height: 0 !important;
        border: none !important; background: #fff !important; box-shadow: none !important;
        padding: 4px 0 !important; border-top: 1px solid #f0f0f0 !important;
        border-bottom: 2px solid #fde68a !important;
    }
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu > li.open > .dropdown-menu,
    .sidebar #DropdownMainMenu > li.open > .dropdown-menu { display: block !important; }

    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu .dropdown-submenu > a,
    .sidebar #DropdownMainMenu li.dropdown-submenu > a {
        height: 42px !important; line-height: 1 !important;
        padding: 0 16px 0 36px !important;
        font-size: 13px !important; font-weight: 500 !important; color: #64748b !important;
        background: transparent !important; border-bottom: 1px solid #f8fafc !important;
        display: flex !important; align-items: center !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        border-left: 0 !important; transition: background 0.1s, color 0.1s;
        letter-spacing: -0.1px;
    }
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu .dropdown-submenu > a::before,
    .sidebar #DropdownMainMenu li.dropdown-submenu > a::before {
        content: '' !important; display: inline-block !important;
        width: 5px !important; height: 5px !important; border-radius: 50% !important;
        background: #cbd5e1 !important; margin-right: 10px !important; flex-shrink: 0;
        transition: background 0.1s; transform: none !important;
    }
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu .dropdown-submenu:hover > a,
    .sidebar #DropdownMainMenu li.dropdown-submenu:hover > a {
        background: #fef9ee !important; color: #b45309 !important;
    }
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu .dropdown-submenu:hover > a::before,
    .sidebar #DropdownMainMenu li.dropdown-submenu:hover > a::before { background: #f8b500 !important; }
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu .dropdown-submenu.active > a,
    .sidebar #DropdownMainMenu li.dropdown-submenu.active > a {
        background: #fff7ed !important; color: #c2410c !important; font-weight: 600 !important;
    }
    .sidebar .nav.navbar-nav > li.nav-category > .dropdown-menu .dropdown-submenu.active > a::before,
    .sidebar #DropdownMainMenu li.dropdown-submenu.active > a::before { background: #f8b500 !important; }
}