/* ============================================
 * 발전기금 활용현황 — 집행 내역 표 + 막대 차트
 * ============================================ */

/* 블록 사이는 .divider(60/60), 제목 아래는 공용 .board-table-head 여백 */
.fund-chart-block .board-table-head {
    margin-bottom: 12px;
}

/* ============================================
 * 집행 내역 표 — 2열(항목/금액), 행 배경은 지그재그
 * ============================================ */

.board-table--fund-use {
    min-width: 600px;
}

/* Figma 실측 — 항목 67% : 금액 33%.
 * board-table 은 table-layout:fixed 라 열 폭은 colgroup 으로 정한다
 * (첫 행 셀에 width 를 걸면 이 테이블에서는 반영되지 않는다) */
.board-table--fund-use .fund-use-col--item {
    width: 67%;
}

.board-table--fund-use .fund-use-col--amount {
    width: 33%;
}

/* 대분류 행에만 옅은 바탕 — 소분류는 흰 바탕으로 구분한다 */
.board-table--fund-use .fund-use-row--head th {
    background: var(--color-gray100);
}

.board-table--fund-use .fund-use-amount {
    text-align: right;
}

/* 대분류는 굵게, 소분류는 한 단계 작고 들여쓴다 */
.board-table--fund-use .fund-use-row--head th {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-title1);
}

.board-table--fund-use .fund-use-row--sub td {
    padding-left: 30px;
    font-size: var(--font-size-label-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-body);
}

.board-table--fund-use .fund-use-row--sub .fund-use-amount {
    padding-left: 15px;
}

/* ============================================
 * 막대 차트
 * ============================================ */

/* 좁은 화면에서 막대·라벨이 겹치지 않도록 최소 폭 아래로는 가로 스크롤.
 * overflow-x:auto 는 세로도 함께 잘라내므로, 툴팁이 박스 위로 튀어나올 만큼
 * 위쪽을 padding 으로 벌리고 같은 크기의 음수 margin 으로 자리를 되돌린다 */
.fund-chart-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-top: 170px;
    margin-top: -170px;
}

.fund-chart {
    position: relative;
    width: 100%;
    background: var(--color-gray50);
    border-radius: 16px;
}

.fund-chart--bar {
    /* 막대 8개 + 두 줄짜리 라벨이 들어갈 최소 폭 */
    min-width: 860px;
    height: 448px;
    padding: 40px 20px 24px;
    box-sizing: border-box;
}

.fund-chart-canvas {
    width: 100%;
    height: 100%;
}

/* 카드 레이어 — 박스 위쪽까지 확장해 툴팁이 밖으로 올라설 수 있게 한다 */
.fund-chart-cards {
    position: absolute;
    top: -170px;
    right: 20px;
    bottom: 24px;
    left: 20px;
    pointer-events: none;
}

/* ============================================
 * 막대 위 툴팁 카드 (Figma 212x148)
 * ============================================ */

.fund-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 212px;
    padding: 25px 20px;
    box-sizing: border-box;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    text-align: center;
    /* 기본은 감춰두고 호버(터치)한 막대의 카드만 켠다 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.fund-card.is-active {
    opacity: 1;
    visibility: visible;
}

.fund-card-term {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--color-text-title1);
}

.fund-card-label {
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--color-text-body);
}

.fund-card-value {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
}

/* Morris 기본 hover 툴팁은 쓰지 않는다(위 카드로 대체) */
.morris-hover {
    display: none !important;
}

/* 작성기준일은 바로 위 차트 블록의 캡션 — 블록 기본 간격 대신 10px 로 붙인다 */
.fund-chart-block:has(.fund-status-note) {
    gap: 10px;
}

.fund-status-note {
    margin-top: 12px;
    font-size: 14px;
    color: var(--color-text-body);
    text-align: right;
}

/* ============================================
 * 반응형
 * ============================================ */

@media screen and (max-width: 1024px) {
    .fund-chart--bar {
        height: 420px;
        padding-top: 36px;
    }

    .board-table--fund-use .fund-use-col--item {
        width: 62%;
    }

    .board-table--fund-use .fund-use-col--amount {
        width: 38%;
    }
}

@media screen and (max-width: 768px) {
    .fund-chart--bar {
        height: 380px;
        padding: 30px 8px 16px;
    }

    .fund-chart-cards {
        right: 8px;
        left: 8px;
    }

    .fund-card {
        width: 160px;
        padding: 14px 12px;
        gap: 4px;
    }

    .fund-card-term {
        font-size: 14px;
    }

    .fund-card-label {
        font-size: 12px;
    }

    .fund-card-value {
        font-size: 18px;
    }

    .board-table--fund-use .fund-use-row--sub td {
        padding-left: 20px;
    }
}