@charset "UTF-8";

/* 상품 카운트 뱃지 스타일 */
.product-count-badge {
    font-size: 0.8em;
    color: #6c757d; /* secondary color */
    margin-left: 3px;
}
/* [수정] 클릭된 메뉴의 상품 카운트 뱃지 색상을 흰색으로 변경하여 가독성 확보 */
.submenu-item.just-clicked .product-count-badge {
    color: #fff;
}

/* py-2(0.5rem)와 py-3(1rem)의 중간값인 0.75rem을 위한 사용자 정의 클래스 */
.py-2-5 {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

/* 전체 메뉴 컨테이너 */
.category-menu {
    padding-top: 8px; /* 메뉴 상단 여백 추가 */
    max-width: 250px; /* 모바일 레이어 폭에 맞춰 250px로 축소 */
    background-color: #fff; /* 아마존 스타일: 흰색 배경 */
    font-size: 0.85rem; /* 기본 폰트 크기 (데스크톱 기준) */
    letter-spacing: -0.5px; /* 자간 축소로 더 밀도있고 세련된 느낌 부여 */
    animation: menuFadeInSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* 메인 카테고리(최상위) 텍스트 스타일 */
.main-category {
    color: #111;
}
/* 최상위 카테고리(depth-0, depth-1) 헤더 스타일 */
.main-category.depth-0, .main-category.depth-1 {
    cursor: pointer;
    background-color: transparent; /* 최상위 메뉴 헤더 배경색 제거 */
    font-weight: bold;
    font-size: 1.0rem; /* 폰트 크기 증가 */
    padding-left: 1rem; /* 왼쪽 여백 */
    padding-right: calc(1.5rem + 4px); /* 하위 메뉴 화살표 위치와 세로선 맞춤 */
    padding-top: 0.8rem !important; /* 대분류 상하 여백 조율 */
    padding-bottom: 0.8rem !important;
}

/* 글자 길이만큼만 하단 라인 적용 */
.main-category.depth-0 .menu-link-wrapper > span:first-child,
.main-category.depth-1 .menu-link-wrapper > span:first-child {
    flex-grow: 0; /* 가로 영역 전체 차지 해제 */
    border-bottom: 2px solid #222; /* 미니멀 타이틀 느낌 강조 (블랙 2px) */
    padding-bottom: 3px; /* 글자와 밑줄 사이 부드러운 간격 */
    transition: color 0.2s;
}
.main-category.depth-0 .menu-icon,
.main-category.depth-1 .menu-icon {
    margin-left: auto; /* 텍스트 너비가 줄어들어도 아이콘은 우측 끝에 유지 */
}

/* 활성/호버 상태 */
.main-category.active, .submenu-item.active,
.main-category:hover {
    background-color: transparent;
}
.main-category .menu-link-wrapper > span:first-child {
    display: inline-block;
    transition: color 0.2s ease;
}
.main-category:hover .menu-link-wrapper > span:first-child {
    color: #111;
    text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
}
.main-category:hover .menu-icon::after {
    color: #212529;
    transform: translateX(3px);
}
.accordion-header.open:hover .menu-icon::after,
.main-category.open:hover .menu-icon::after {
    transform: rotate(90deg) translateY(-3px);
}

/* 활성화된 경로의 최상위 부모(depth-0)에 적용되는 테두리 */
.parent-path-border {
    border: 1px solid #f4f4f4 !important; /* 아주 연한 실선 테두리로 정돈감만 제공 */
    border-radius: 8px !important; /* 모서리 라운드 처리 */
}
/* 현재 선택되었거나 활성화 경로에 포함된 메뉴 항목의 배경색 */
.immediate-parent-bg {
    background-color: #fafafa !important; /* 튀지 않는 극도로 연한 회색 */
    font-weight: bold;
    border-radius: 6px;
}
.immediate-parent-bg .depth-1 {
    background-color: transparent !important; 
}
/* 사용자가 방금 클릭하여 펼친 메뉴 항목을 위한 강조 스타일 */
.submenu-item.just-clicked {
    background-color: #f4f4f4 !important; /* 모노톤 라이트 그레이 */
    color: #111 !important;
    border-radius: 6px;
}
.submenu-item.just-clicked a,
.submenu-item.just-clicked .menu-icon::after {
    color: #111 !important;
    font-weight: 700;
}
.immediate-parent-bg a {
    color: #111 !important; /* 기본 텍스트 색상으로 복원 */
}
/* 활성화된 메뉴 텍스트 색상 */
.main-category.active {
    color: #111; /* 오렌지색 제거, 모노톤 블랙 */
}

/* 메뉴 링크 기본 스타일 */
a#map2:link, a#map2:visited, a#map2:active, a.map2, a#map2 {
    text-decoration: none;
    color: #555; /* 너무 까만색 대신 부드러운 다크 그레이 */
    font-weight: normal !important; /* 선택 해제 시 확실한 볼드 해제 */
    transition: color 0.2s;
}
a#map2up {
    font-weight: 700 !important;
    text-decoration: none;
    color: #111 !important; /* 선택 시 진한 블랙으로 볼드 처리만 적용 */
}
/* 활성화된 항목 배경색 강조 및 왼쪽 인디케이터 바 추가 (테이블 테두리 3px 시프트 현상 방지를 위해 absolute 의사요소 사용) */
.submenu-item.active-item {
    background-color: #f8f9fa !important;
    position: relative;
}
.submenu-item.active-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #212529;
    z-index: 2;
}
/* 하위 메뉴 아이템 기본 스타일 */
.submenu-item {
    position: relative;
    cursor: pointer;
    font-size: 0.875rem; /* 14px에 해당하는 rem 값 */
    transition: background-color 0.25s ease;
    margin: 0 !important; /* 양옆 여백 제거하여 세로 정렬선 불일치 문제 완전 해결 */
    border-radius: 0;
    padding-top: 0.45rem !important; /* 하위 메뉴 상하 여백 조율 */
    padding-bottom: 0.45rem !important;
    display: flex !important;
    align-items: flex-start !important;
}
.submenu-item a,
.submenu-item .text-decoration-none {
    display: inline !important; /* inline-block 대신 inline으로 설정하여 줄바꿈 시 체크박스 높이를 방해하지 않음 */
    transition: color 0.2s ease;
    vertical-align: top;
}
/* 리프 메뉴(화살표 없음): 행 전체 클릭 영역 확보 */
.leaf-menu-item .leaf-menu-content {
    width: 100%;
    min-height: 100%;
}
.leaf-menu-item .leaf-menu-content > a {
    flex: 1 1 auto;
    min-height: 1.25rem;
}
.submenu-item:hover {
    background-color: #f8f9fa !important; /* 마우스 오버 시 아주 부드러운 회색 */
}
.submenu-item:hover a,
.submenu-item:hover .text-decoration-none {
    color: #111 !important; /* 호버 시 글자색 짙게 */
    text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
}
/* 호버 시 서브메뉴 화살표 미세 이동 */
.accordion-header:hover .menu-icon::after {
    color: #212529;
    transform: translateX(3px);
}
.accordion-header.open:hover .menu-icon::after {
    transform: rotate(90deg) translateY(-3px);
}
.submenu-item.depth-1 {
    background-color: transparent; /* 계단식 배경색 모두 투명하게 제거 */
}
.submenu-item.depth-2 {
    background-color: transparent;
}
.submenu-item.depth-3 {
    background-color: transparent;
}
.submenu-item.depth-4 {
    background-color: transparent;
}
/* 동적 들여쓰기를 위해 부트스트랩에 없는 추가적인 padding-start 클래스 정의 */
.ps-6 { padding-left: 3.5rem !important; }
.ps-7 { padding-left: 4rem !important; }
.ps-8 { padding-left: 4.5rem !important; }
.ps-9 { padding-left: 5rem !important; }
.ps-10 { padding-left: 5.5rem !important; }

/* 아이콘을 오른쪽으로 보내기 위한 스타일 */
.menu-link-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
}
/* 텍스트 부분이 남는 공간을 모두 차지하도록 설정 */
.menu-link-wrapper > a,
.menu-link-wrapper > span:first-child {
    flex-grow: 1;
    display: flex !important;
    align-items: flex-start;
}
/* 하위 메뉴 테이블 셀의 불필요한 패딩과 테두리 제거 */
.category-menu table, 
.category-menu td,
.category-menu tr {
    margin: 0 !important;
    padding: 0;
    border-collapse: collapse !important;
}
.category-menu table td:not(.submenu-item):not(.main-category) {
    padding: 0 !important;
    border: 0 !important;
}
.submenu-body td {
    padding: 0;
    border: 0;
}
/* 아코디언 애니메이션을 위한 스타일 */
.acc-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 0 !important;
    padding: 0 !important;
}
.acc-body.is-open {
    max-height: 1000px; /* 내용물을 충분히 담을 수 있는 크기 (애니메이션을 위해 200vh 대신 1000px로 변경하여 더 부드러운 속도감 제공) */
    opacity: 1;
    transform: translateY(0);
}
/* 아이콘 스타일 */
.menu-icon::after { /* FontAwesome 아이콘을 사용한 펼침/닫힘 표시기 */
    font-family: "bootstrap-icons";
    content: "\F285"; /* bi-chevron-right */
    font-size: 0.75rem; /* 아이콘 크기를 줄여 미니멀하게 */
    font-weight: normal; /* 볼드를 빼고 얇고 날렵한 라인으로 변경 */
    color: #aaa; /* 아이콘 기본 색상을 연한 회색으로 설정 */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s; /* 부드러운 회전 애니메이션 추가 */
    display: inline-block;
}
/* 선택된 경로의 아이콘 색상을 어둡게 변경 */
.parent-path-border .main-category.depth-0 .menu-icon::after, /* depth-0 블록 내의 depth-0 아이콘만 */
.immediate-parent-bg .menu-icon::after { /* 현재 활성화된 항목의 아이콘 */
    color: #495057;
}

/* 메뉴가 열렸을 때 아이콘 회전 */
.accordion-header.open .menu-icon::after,
.main-category.open .menu-icon::after {
    transform: rotate(90deg); /* 다른 아이콘으로 뚝딱 교체하지 않고 90도 부드럽게 회전 */
    color: #212529;
}

/* 모바일 화면(768px 미만)을 위한 반응형 스타일 */
@media (max-width: 767.98px) {
    .category-menu {
        font-size: 1.0rem; /* 모바일에서 기본 폰트 크기를 더 크게 */
    }
}

/* 프리미엄 커스텀 체크박스 스타일 */
.category-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #dee2e6;
    border-radius: 4px;
    outline: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    position: relative;
    margin-right: 8px;
    margin-top: 3px; /* 텍스트 첫째줄과 정렬 맞추기 */
    cursor: pointer;
    flex-shrink: 0; /* 폭 찌그러짐 방지 */
}
.category-checkbox:hover {
    border-color: #adb5bd;
}
.category-checkbox:checked {
    background-color: #212529 !important;
    border-color: #212529 !important;
}
/* 커스텀 체크박스 안의 체크 표시 그리기 */
.category-checkbox::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-bottom: 2px;
}
.category-checkbox:checked::after {
    opacity: 1;
}

/* 포커스 시 생기는 그림자 */
.category-checkbox:focus {
    border-color: #212529 !important;
    box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.1) !important;
}

/* 카테고리 메뉴 서서히 나타나는 등장 애니메이션 정의 */
@keyframes menuFadeInSlide {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}