h1 { color: #e0e0e0; }
#back-btn { background: #444; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-right: 15px; }
#back-btn:hover { background: #555; }
#breadcrumb { font-size: 16px; color: #ccc; }
#treemap-container { position: relative; width: 100%; height: 600px; background-color: #2a2a31; }


/* --- 2. 호버 효과 CSS --- */
.node.leaf-node:hover {
    filter: brightness(1.2); /* 배경색을 밝게 */
    transform: scale(1.01); /* 약간 확대 */
    z-index: 30; /* 다른 요소 위로 올라오도록 */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


.node { 
    position: absolute; 
    box-sizing: border-box; 
    /* 기본 테두리는 얇게 유지 */
    border: 1px solid #2a2a31; 
    overflow: hidden; 
    transition: all 0.15s ease-out; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 2px; 
    text-align: center; 
}

/* 부모 노드(그룹)의 기본 테두리 */
.node.parent-node {
    border-color: #4a4a53;
}

/* --- 핵심 수정: 최상위 그룹(섹터) 테두리 강화 --- */
.node.parent-node.level-0 {
    border-width: 2px; /* 테두리 두께 증가 */
    border-color: #7a7a83; /* 더 밝고 눈에 띄는 색상으로 변경 */
}
/* --- 여기까지 --- */


.node.clickable { cursor: pointer; }

/* 호버 시 테두리 색상도 더 밝게 */
.node.clickable:hover { 
    border-color: #ddd; 
}

/* 호버 시 포인터 색상도 테두리 색상과 일치하도록 조정 (선택 사항) */
.node.parent-node.level-0:hover::after { 
    border-top-color: #ddd;
}

/* 레벨 0 (최상위 그룹 - 예: 섹터) 라벨 스타일 */
.parent-node.level-0 { 
    overflow: visible; 
}
.parent-node.level-0::before {
    content: attr(data-label);
    position: absolute;
    top: 0; 
    left: 50%;
    
    /* 
     * 핵심 수정: 
     * transform의 Y값을 -50%보다 조금 더 위로 올립니다.
     * 테두리 두께(2px)의 절반(1px)만큼 더 위로(-1px) 이동시킵니다.
     */
    transform: translate(-50%, calc(-50% - 1px));
    
    /* 
     * 배경색을 차트 컨테이너가 아닌, 페이지 전체 배경색으로 설정합니다.
     * 이렇게 하면 테두리를 자연스럽게 덮을 수 있습니다.
     */
    background-color: #1e1e24; /* body의 배경색과 일치 */

    color: #ddd;
    padding: 1px 8px; /* 좌우 패딩을 조금 더 줘서 테두리를 확실히 덮도록 함 */
    font-size: 11px; 
    font-weight: 600;
    white-space: nowrap; 
    z-index: 20; /* 포인터(z-index: 19)보다 위에 있도록 함 */
}

/* 포인터 위치도 테두리 두께에 맞게 미세 조정 */
.parent-node.level-0::after {
    content: ''; 
    position: absolute;
    top: 0; 
    left: 50%;
    /* 
     * 핵심 수정:
     * 테두리 두께(2px)만큼 위로(-2px) 이동시킵니다.
     */
    transform: translate(-50%, -2px);

    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #7a7a83;
    z-index: 19;
    transition: border-color 0.3s ease;
}

/* 호버 시 포인터 색상 일치 */
.node.parent-node.level-0:hover::after {
    border-top-color: #ddd;
}

.parent-node.level-1::before { content: attr(data-label); position: absolute; top: 2px; left: 4px; transform: none; background-color: rgba(20, 20, 24, 0.6); color: #e0e0e0; padding: 1px 4px; font-size: 10px; border-radius: 2px; white-space: nowrap; z-index: 10; }
.node-label { font-weight: 600; font-size: 1.2em; color: white; }
.node-value { font-size: 0.8em; margin-top: 2px; color: white; opacity: 0.9; }
#legend { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; padding: 10px 20px; background-color: #1e1e24;}
#legend span { font-size: 12px; margin: 0 8px;}
#legend-bar { width: 150px; height: 15px; background: linear-gradient(to right, #D32F2F, #757575, #388E3C); border-radius: 4px; }

/* --- 1. 툴팁 스타일 --- */
#tooltip {
    position: fixed; /* 화면 전체 기준 */
    display: none;
    background-color: rgba(20, 20, 24, 0.9);
    border: 1px solid #666;
    border-radius: 5px;
    padding: 10px;
    color: #f0f0f0;
    font-size: 13px;
    pointer-events: none; /* 툴팁이 마우스 이벤트를 가로채지 않도록 */
    z-index: 1000;
    white-space: nowrap;
}
#tooltip-name { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; }
.tooltip-row span:first-child { display: inline-block; width: 80px; color: #aaa; }