/* ============================================
 * 발전기금 모금현황 — 라인 차트 2종 + 비율 도넛
 * ============================================ */

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

/* 좁은 화면에서 카드가 겹치지 않도록, 최소 폭 아래로는 표를 줄이지 않고 가로 스크롤.
 * 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--line {
    /* 카드 5개(각 최소 128) + 간격 + 축 여백 기준 */
    min-width: 720px;
    height: 448px;
    /* 카드는 호버 때만 떠서 상단을 넓게 비울 필요가 없다 — 그만큼 플롯 높이를 준다 */
    padding: 40px 20px 24px;
    box-sizing: border-box;
}

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

/* 카드 레이어 — 박스 위쪽까지 확장해 카드가 밖으로 올라설 수 있게 한다
 * (확장분 170px 을 뺀 값이라 캔버스 기준 좌표계는 그대로 유지된다) */
.fund-chart-cards {
    position: absolute;
    top: -158px;
    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);
    /* 기본은 감춰두고 호버(터치)한 점의 카드만 켠다 */
    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;
}

/* 도넛 중앙 라벨도 쓰지 않는다 — 비율은 좌우 범례가 크게 보여준다 */
.fund-chart--donut text {
    display: none;
}

/* ============================================
 * 비율 도넛 — 좌우 범례 + 가운데 도넛
 * ============================================ */

.fund-ratio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    min-height: 340px;
    padding: 40px 20px;
    box-sizing: border-box;
    background: var(--color-gray50);
    border-radius: 16px;
}

.fund-chart--donut {
    flex: 0 0 auto;
    width: 243px;
    height: 243px;
}

.fund-ratio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 1 200px;
}

.fund-ratio-marker {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.fund-ratio-item--main .fund-ratio-marker {
    background: var(--color-primary);
}

.fund-ratio-item--sub .fund-ratio-marker {
    background: var(--color-secondary);
}

.fund-ratio-label {
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-body);
}

.fund-ratio-value {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.fund-ratio-item--main .fund-ratio-value {
    color: var(--color-primary);
}

.fund-ratio-item--sub .fund-ratio-value {
    color: var(--color-secondary);
}

/* 작성기준일은 바로 위 차트 블록의 캡션 — 블록 기본 간격 대신 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--line {
        height: 400px;
        padding-top: 86px;
    }

    .fund-chart-cards {
        top: -150px;
    }

    .fund-card {
        width: 170px;
        padding: 16px 12px;
        gap: 4px;
    }

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

    .fund-ratio {
        gap: 32px;
    }

    .fund-chart--donut {
        width: 200px;
        height: 200px;
    }
}

@media screen and (max-width: 768px) {
    .fund-chart--line {
        height: 360px;
        padding: 78px 8px 16px;
    }

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

    .fund-card {
        width: 128px;
        padding: 10px 8px;
    }

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

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

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

    /* 좁은 화면에선 도넛을 위로 올리고 범례를 아래 가로로 */
    .fund-ratio {
        flex-wrap: wrap;
        gap: 20px 32px;
        padding: 28px 16px;
    }

    .fund-chart--donut {
        order: -1;
        flex: 0 0 100%;
        width: 100%;
        height: 200px;
    }

    .fund-ratio-item {
        flex: 1 1 0;
    }

    .fund-ratio-value {
        font-size: 26px;
    }
}