/* =============================================================================
 * 상품 목록 분류 경로 표시 (대분류 > 중분류 > 소분류)
 *
 * 사용 화면: 관리자 상품 관리(SCR-105)·상품 재고 관리(SCR-107),
 *            사용자 상품찾기(SCR-202)·대시보드 type1 신제품(SCR-201)
 * 마크업 생성: application/helpers/category_path_helper.php (PHP),
 *              application/views/user/product_list_v.php (무한스크롤 JS 템플릿)
 * 팝오버 열기·닫기와 위치 계산: assets/js/category_path.js
 * ========================================================================== */

.bjn-cat-path-wrap {
    /* 관리자 목록 표는 .text-nowrap이라 경로가 길면 잘리므로 이 영역만 줄바꿈을 허용한다 */
    white-space: normal;
    word-break: keep-all;
}

.bjn-cat-path {
    white-space: normal;
    word-break: keep-all;
}

/* 분류 세트가 2건 이상일 때만 렌더되는 더보기 버튼(돋보기 안 가로 3줄 아이콘) */
.bjn-cat-more {
    position: relative;
    display: inline-block;
    /* 분류 경로 텍스트와의 간격 — 두 글자 크기(≈.875rem·.7rem)에 비례하도록 em */
    margin-left: .3em;
}

/* 색은 관리자 상품 관리 「정렬」 열 헤더의 도움말 버튼(.product-sort-help)과 통일한다.
   그 버튼의 .text-muted가 참조하는 변수를 그대로 써서 계산된 색을 일치시킨다.
   아이콘 도형·크기·세로 정렬은 아래 .bjn-cat-more-icon에서 관리한다. */
.bjn-cat-more-btn {
    display: inline-block;
    line-height: 1;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.bjn-cat-more-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
    border-radius: 3px;
}

/* 더보기 아이콘 — 돋보기 안에 가로 3줄.
   bootstrap-icons 1.11.0에 같은 도형이 없어 SVG를 직접 그려 mask로 넣는다.
   PHP 헬퍼·상품찾기 JS 템플릿은 <i class="bjn-cat-more-icon">만 출력하고,
   도형·크기·세로 정렬은 이 규칙 한곳에서 관리한다.
   색은 mask 아래 깔리는 background-color가 currentColor라 위 버튼 색을 그대로 따른다. */
.bjn-cat-more-icon {
    display: inline-block;
    /* 글자 크기에 비례한다(관리자 목록 .small ≈.875rem, 사용자 카드 .7rem).
       카드 쪽에서 안쪽 가로 3줄이 뭉개지지 않도록 최소 크기를 px로 받쳐 둔다 */
    width: 1.2em;
    height: 1.2em;
    min-width: 14px;
    min-height: 14px;
    /* 아이콘의 세로 중심을 옆 분류 경로 글자의 시각적 중심(베이스라인 위 ≈.35em)에 맞춘다 */
    vertical-align: -.25em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3e%3ccircle cx='10' cy='10' r='8'/%3e%3cpath d='M5.6 6.6h8.8M4.6 10h10.8M5.6 13.4h8.8'/%3e%3cpath d='M16 16L21.5 21.5' stroke-width='2.2'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3e%3ccircle cx='10' cy='10' r='8'/%3e%3cpath d='M5.6 6.6h8.8M4.6 10h10.8M5.6 13.4h8.8'/%3e%3cpath d='M16 16L21.5 21.5' stroke-width='2.2'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 표(.table-responsive)·카드(.overflow-hidden) 안에서 잘리지 않도록
   열릴 때 body로 옮겨 뷰포트 기준(fixed)으로 배치한다 — 좌표는 JS가 계산 */
.bjn-cat-more-pop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    min-width: 200px;
    max-width: 360px;
    padding: 8px 10px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    text-align: left;
    white-space: normal;
    word-break: keep-all;
}

.bjn-cat-more-pop.is-open {
    display: block;
}

.bjn-cat-more-title {
    display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: .7rem;
    font-weight: 600;
}

.bjn-cat-more-item {
    display: block;
    color: #1f2937;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.5;
}

.bjn-cat-more-item + .bjn-cat-more-item {
    margin-top: 2px;
}