/* ===== ctgl.css ===== */
/* [핵심] PC에서 카테고리 폭 고정 & 스크롤 따라다니기 */
.shop-sidebar {
    width: 220px;    /* 여기서 폭을 꽉 잡아줍니다 */
    flex-shrink: 0;  /* 찌그러짐 방지 */
    position: sticky;
    top: 80px;       /* 스크롤 시 화면 상단에 붙음 */
}
.sidebar-header { font-size: 15px; font-weight: bold; margin-bottom: 10px; padding-left: 10px; }

.tree-list, .sub-tree { list-style: none; padding: 0; margin: 0; }
.cat-row { 
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; cursor: pointer; border-radius: 4px;
    font-size: 14px; color: #333; transition: all 0.2s;
}
.cat-row:hover { background-color: #f5f7fa; color: var(--brand-primary); font-weight: bold; }
.sub-tree { padding-left: 18px; margin-left: 10px; border-left: 1px dashed #ddd; }
.sub-tree-hidden { display: none; }

.shop-sidebar { 
    width: 220px; 
    flex-shrink: 0; 
    
    /* 스크롤 시 화면 상단에 고정 */
    position: sticky; 
    top: 80px; 
    
    /* [새로 추가된 핵심 기능] 화면 높이에 맞춰 자르고 스크롤 바 생성 */
    max-height: calc(100vh - 100px); /* 전체 화면 높이(100vh)에서 헤더와 여백(100px)만큼 뺀 높이 */
    overflow-y: auto; /* 내용이 넘치면 세로 스크롤 생성 */
}

/* 데스크톱만 카테고리 스크롤바 표시 — 모바일은 common.css에서 숨김 */
@media (min-width: 769px) {
    .shop-sidebar::-webkit-scrollbar { width: 6px; }
    .shop-sidebar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
    .shop-sidebar::-webkit-scrollbar-track { background: transparent; }
}

.sidebar-header { font-size: 16px; font-weight: bold; margin-bottom: 10px; }

.tree-list, .sub-tree { list-style: none; padding: 0; margin: 0; }
.cat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; border-radius: 4px; font-size: 14px; color: #333; }
.cat-row:hover { background-color: #f5f7fa; color: var(--brand-primary); }
.sub-tree { padding-left: 18px; border-left: 1px dashed #ddd; margin-left: 10px; }

/* 모바일: 3열 칩 + 카테고리만 위쪽에서 스크롤 (common.css와 세로 분할) */
@media (max-width: 768px) {
    .shop-sidebar { 
        width: 100%; 
        max-height: min(150px, 42vh);
        overflow-y: auto;
        border: 1px solid #eee; border-radius: 8px; 
        background: #fff;
        position: relative; top: 0;
        flex-shrink: 0;
    }
    .sidebar-header { display: none; }
    .tree-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
    .cat-row { font-size: 12px; padding: 8px 4px; justify-content: center; text-align: center; background: #f8f9fa; border-radius: 6px; }
    .cat-arrow, .sub-tree { display: none !important; }
}

/* 관리자: 데스크톱에서만 카테고리 옆 제거 버튼 */
@media (min-width: 769px) {
    .cat-row-line {
        display: flex;
        align-items: stretch;
        gap: 4px;
    }
    .cat-row-line .cat-row {
        flex: 1;
        min-width: 0;
    }
    .cat-remove-btn {
        align-self: center;
        flex-shrink: 0;
        font-size: 11px;
        line-height: 1;
        padding: 4px 7px;
        border-radius: 4px;
        border: 1px solid #fecaca;
        background: #fff1f2;
        color: #b91c1c;
        cursor: pointer;
    }
    .cat-remove-btn:hover {
        background: #ffe4e6;
    }
}