/* 뼈대 레이아웃 - 원본 유지 */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #fff; font-family: 'Pretendard', sans-serif; }
:root { --main-blue: #0073e9; }

.top-bar {
    height: 60px; background: #fff; display: flex; align-items: center; 
    justify-content: space-between; padding: 0 30px; border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box; width: 100%;
}
.top-bar .logo { font-size: 22px; font-weight: 900; color: var(--main-blue); text-decoration: none; }

#shop-main-container { display: flex; height: calc(100vh - 60px); width: 100%; background: #fff; }

.sidebar { 
    width: 260px; 
    min-width: 260px; 
    height: 100%; 
    overflow-y: auto; 
    border-right: 1px solid #f0f0f0; 
    padding: 20px 15px; 
    box-sizing: border-box; 
    background: #fff;
}
.sidebar h3 { font-size: 16px; font-weight: 800; color: #333; margin: 0 0 20px 0; }

/* 카테고리 아이템 디자인 - 원본 유지 + 화살표 공간 확보 */
.cat-item { 
    position: relative;
    cursor: pointer; 
    padding: 10px 15px; 
    font-size: 14px; 
    color: #555; 
    border-radius: 8px; 
    margin-bottom: 4px; 
    transition: 0.2s; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cat-item:hover { background: #f4f7fa; color: var(--main-blue); }
.cat-item.active { background: var(--main-blue); color: #fff !important; font-weight: 600; }

/* [추가] 트리 구조를 위한 하위 그룹 디자인 */
.cat-children {
    display: none; /* JS slideToggle 연동용 */
    margin-left: 15px; /* 들여쓰기 */
    padding-left: 10px;
    border-left: 1px solid #eee; /* 계층 연결선 */
    margin-bottom: 8px;
}

/* [추가] 화살표 스타일 */
.arrow {
    font-size: 12px;
    font-weight: normal;
    opacity: 0.7;
    transition: transform 0.2s;
}
.cat-item.active .arrow {
    transform: rotate(45deg); /* 활성화 시 회전 효과 예시 */
}

/* 메인 스크롤 영역 - 원본 유지 */
.main-content { flex: 1; height: 100%; overflow-y: auto; background: #fff; }