.lnb { width: 180px; float: left; padding: 20px 0; text-align: center; }

/* 1. 외곽 박스 및 리스트 */
.lnb-left-menu {padding: 10px 0;}
.lnb-left-menu ul { list-style: none; padding: 0; margin: 0; }
/* 2. 메뉴 항목 및 3번째 항목 숨김 */
.lnb-left-menu ul li { display: block; margin-bottom: 3px;  transition: background-color 0.15s ease; }

/*  4번째 li만 정확히 숨김 */
.lnb-left-menu ul li:nth-child(4) { display: none; }
/* 3. 링크 텍스트 및 아이콘 */
.lnb-left-menu ul li a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 400 13px -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; letter-spacing: -0.3px; color: #475569; text-decoration: none; transition: all 0.15s ease-in-out; }
.lnb-left-menu ul li a i { font-size: 14px; color: #cbd5e1; }

.lnb-left-menu ul li:hover { background-color: #f1f5f9; }
.lnb-left-menu ul li:hover a { color: #0f172a; }
.lnb-left-menu ul li:hover a i { color: #6b7277; }
.lnb-left-menu ul li.on2 {background-color: #6b7277; }
.lnb-left-menu ul li.on2 a {color: #ffffff;    font-weight: 700;}
.lnb-left-menu ul li.on2 a i {color: #ffffff;}

.lnb00 { width: 180px; padding: 0; background-color: #ffffff}
.lnb00 img { vertical-align: top; }
.lnb00>ul { position: relative; margin:0; list-style: none; padding: 0; }
.lnb00>ul>li { display: block; padding:0px 12px; margin: 0; background-color: transparent; }
.lnb00>ul>li>a, .lnb00>ul>li>span {display: block; padding: 5px 6px !important; line-height: 20px !important; font-size: 13px; color: #333; text-decoration: none;
    font-weight: 400 !important; font-family: inherit !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }
.lnb00>ul>li>a i { margin-right: 0px; font-size: 13px; vertical-align: middle; }
.lnb00>ul>li>a>span { width: 6px; height: 2px; float: left; margin: 10px 16px 0 0px; background-color: #ccc; }
.lnb00 ul li .color { font-size: 13px; }
.lnb00 ul li .color4 { color: #fb0a8d; }
.lnb00>ul>li.on1 { display: block !important;  background-color: #6b7277 !important; }
.lnb00>ul>li.on1>a { color: #ffffff !important; }
.lnb00>ul>li:hover { background-color: #6b7277 !important; border-color: #6b7277 !important; }
.lnb00>ul>li:hover>a { color: #ffffff !important; }


#menu_Detail.Tap_Detail { display: block !important; clear: both; }
.columnLefts { position: relative; width: 180px; background: #fff;border-top: 1px solid #ddd;border-left: 1px solid #ddd;}
.columnLefts:after { display: block; clear: both; content: ''; }
.columnLefts .side01_2{width:180px;float:left;text-align:center;margin:0px;padding:0;height:250px;}

/* --------------------------------==========================================
   📂 jnb 물품 메뉴 1차 대분류(li1 / a1) 완전 투명 양식
   --------------------------------========================================== */
#jnb_wrp { z-index: 20; width: 100%; float: left; border: none;  background: transparent; padding: 10px 0 0 0; }
#jnb { margin: 0; padding: 0; } 
#jnb li { position: relative; list-style: none; }

/* 🔧 [핵심 수정] 아래선(border-bottom) 및 모든 선들을 완벽히 삭제하여 보기 싫은 여백 분할 현상 완전 차단 */
#jnb .li1 { 
    display: block; border: none; 
    border-bottom: none; /* 👈 보기 싫던 아래쪽 테두리선 완전 삭제 */
    border-radius: 0; 
    margin: 0; 
    transition: background 0.2s; 
}

/* 1차 메뉴 개별 링크 텍스트 서식 */
#jnb .a1 { display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    font-weight: 500; padding: 5px 30px; text-decoration: none; color: #4a5568;  transition: all 0.15s ease-in-out; }

/* ⚡ [마우스 호버 효과] 마우스 올리면 전체가 각진 차콜 카드로 반전 + 글씨 흰색 전환 */
#jnb .li1:hover { background-color: #6b7277; }
#jnb .li1:hover .a1 { color: #ffffff; padding-left: 18px; } /* 호버 시 글자 우측 부드러운 전진 */

/* 현재 활성화된 1차 메뉴 (.on 상태) 테마 컬러 일치 고정 */
#jnb .a1.on { color: #ffffff; background-color:; border-radius: 0; color: #000;padding-left: 18px;}


/* ==========================================================================
   📂 [최종 마감] 간격 제로 및 그림자 완전 삭제형 2차·3차 패널 서식
   ========================================================================== */
#jnb ul { 
    display: none; 
    width: 180px;            /* 세부 목록 가로폭 고정 */
    background-color: #ffffff; 
    border: 1px solid #ced4da; /* 1차 메뉴판 호버 컬러와 톤을 맞춘 단정한 테두리선 */
    border-radius: 0;        /* 1차 메뉴판의 각진 형태와 일치화 */
    box-shadow: none;        /* 👈 [요청 반영] 마우스 올릴 때 나오던 그림자 효과 100% 완전 삭제 */
    position: absolute; 
    top: 0;                  /* 1차 항목과 세로 머리 높이 칼같이 일치 */
    
    /* 🔧 [마우스 사라짐 완벽 박멸] 1차 메뉴판 우측 벽면에 틈새 없이 자석처럼 100% 강제 밀착 */
    left: 156px;             /* 👈 1차 jnb_wrp 가로폭인 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: 26px; 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 .ul3 { 
    top: -5px;               /* 2차 상자 패딩 오차 보정 */
    left: 178px;             /* 👈 2차 상자 가로폭(180px)에서 보더 두께를 계산하여 빈틈없이 강제 밀착 고정 */
}
.ui_font { font-family: "Noto Sans KR", sans-serif; }