/* ==========================================================================
   📦 [최종 교체] 고정 스크롤 박스 기반의 미니멀 물품 카테고리 lnb 서식
   ========================================================================== */

/* 사이드바 전체 가로 외곽 뼈대 프레임 고정 */
.lnb { width: 238px; float: left; padding: 20px 0; text-align: center; }
.lnb_m { width: 240px; padding: 0; margin: -1px 0 0 0; box-sizing: border-box; border: none; }
.Tap_Off, .Tap_On, .Tap_Detail { display: none; }

/* 물품 카테고리판 상시 노출 */
#menu_Detail.Tap_Detail { display: block !important; clear: both; }
.columnLefts { position: relative; float: left; width: 240px; background: #fff; }
.columnLefts:after { display: block; clear: both; content: ''; }

/* --------------------------------==========================================
   📂 jnb 물품 메뉴 1차 대분류 스마트 고정 박스 서식
   ========================================================================== */
/* 🔧 [근본 해결 핵심] 1차 메뉴 전체 높이를 모니터 화면 크기에 맞춰 400px로 칼같이 패킹
   - 메뉴가 아무리 많아져도 이 상자 안에서만 미니멀하게 스크롤되므로 화면 바닥 가려짐 완전 멸각 */
#jnb_wrp { 
    z-index: 20; width: 100%; float: left; border: none; border-radius: 0; box-sizing: border-box; background: transparent; padding: 0; 
    max-height: 400px;      /* 👈 [조율 포인트] 모니터 크기에 맞게 350px, 450px 등으로 세로 높이 변경 가능 */
    overflow-x: hidden;
    overflow-y: auto;       /* 👈 메뉴 개수가 늘어나면 박스 내부에서만 스크롤바 가동 */
}

/* 박스 내부 우측 가이드용 슬림 스크롤바 깔끔하게 정돈 디자인 */
#jnb_wrp::-webkit-scrollbar { width: 4px; }
#jnb_wrp::-webkit-scrollbar-track { background: transparent; }
#jnb_wrp::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

#jnb { margin: 0; padding: 0; } 
#jnb li { position: relative; list-style: none; }

/* 1차 메뉴 항목 각진 모던 카드 프레임 배치 (아래선 및 모든 테두리 완전 제거 사양 고정) */
#jnb .li1 { display: block; border: none; border-bottom: none; border-radius: 0; margin: 0; transition: background 0.2s; position: relative; }
#jnb .a1 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 10px 12px; text-decoration: none; color: #4a5568; border-radius: 0; transition: all 0.15s ease-in-out; }

/* 1차 호버 하이라이트 효과 (기억해주신 각진 차콜 카드 폼) */
#jnb .li1:hover { background-color: #6b7277; }
#jnb .li1:hover .a1 { color: #ffffff; padding-left: 18px; }
#jnb .a1.on { color: #ffffff; background-color: #6b7277; border-radius: 0; }


/* ==========================================================================
   📂 [2차·3차 드롭레이어] 간섭 요소 완전 박멸 및 1차 우측 벽면 자석 밀착
   ========================================================================== */
#jnb ul.ul2 { 
    display: none; width: 180px; background-color: #ffffff; 
    border: 1px solid #ced4da; /* 기억해두신 미니멀 각진 직선 테두리선 */
    border-radius: 0; box-shadow: none; /* 요청 반영: 그림자 100% 완전 삭제 박제 */
    position: absolute; 
    top: 0;                  /* 현재 마우스가 올라간 1차 항목 머리 높이에 정확히 일치화 */
    
    /* 🔧 [간섭 0% 보장] 1차 1단 박스 바로 우측 벽면에 틈새 없이 자석처럼 칼밀착 고정 
       - 가로질러 가야 하는 2단 장애물 자체가 물리적으로 존재하지 않아 마우스 가로채기 완벽 박멸 */
    left: 239px; 
    z-index: 999; padding: 4px 0; margin: 0; box-sizing: border-box;
}

#jnb .li2:first-child { display: none; }

/* 2차, 3차 내부의 개별 링크 글씨 서식 (각진 디자인 통일) */
#jnb .ul2 a, #jnb .ul3 a { 
    display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px; padding: 0 12px;         
    text-decoration: none; white-space: nowrap; color: #4a5568; border-radius: 0; box-sizing: border-box; transition: all 0.15s ease-in-out; 
}
#jnb .ul2 b { position: static; font-size: 10px; color: #a0aec0; font-weight: normal; }

/* ⚡ [마우스 호버 효과] 배경색 스윽 깔리며 레드로 전환 + 오른쪽 3px 부드러운 전진 모션 */
#jnb .ul2 a:hover, #jnb .ul3 a:hover { background-color: #f7fafc; color: #d32f2f; padding-left: 15px; }
#jnb .ul2 .on .a2, #jnb .a3.on { color: #ffffff; background-color: #6b7277; }

/* 3차 소분류 위치 역시 2차 박스 바로 우측 옆 라인에 빈틈없이 강제 연동 */
#jnb .ul2 > li { position: relative; } 
#jnb .ul3 { top: -5px; left: 178px; }
.ui_font { font-family: "Noto Sans KR", sans-serif; }