/* ==========================================================================
   재정보고 차트 섹션
   팔레트: p1 #F05B89 / p2 #F6A8BA / pt #B40037 / y1 #FFD166
           b1 #2A54A1 / g1 #343232 / g3 #636466 / g4 #999999 / gborder #CCCCCC
   ========================================================================== */

/* ── 섹션 래퍼 ─────────────────────────────────────────────────────────── */
.finance-section {
    padding: 0 0 160px;
}

/* ── 연도 선택 바 ──────────────────────────────────────────────────────── */
.finance-year-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -12px;
}

.finance-year-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    padding: 9px 40px 9px 18px;
    font-size: 18px;
    font-family: Pretendard, sans-serif;
    font-weight: 600;
    color: #343232;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23636466' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 130px;
}

.finance-year-select:focus {
    outline: none;
    border-color: #F05B89;
    box-shadow: 0 0 0 3px rgba(240, 91, 137, 0.15);
}

/* ── 수입/지출 블록 ────────────────────────────────────────────────────── */
.finance-block {
    display: flex;
    align-items: center;
    gap: 24px;
}

.finance-block:last-child {
    margin-bottom: 0;
}

/* ── 차트 영역 ─────────────────────────────────────────────────────────── */
.finance-chart-wrap {
    flex: 0 0 588px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0;
}

.finance-chart {
    width: 488px;
    height: 488px;
}

/* ── 범례 영역 ─────────────────────────────────────────────────────────── */
.finance-legend-wrap {
    flex: 1;
    min-width: 0;
}

/* 총액 헤더 */
.finance-legend__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.finance-legend__type {
    font-size: 32px;
    font-weight: 700;
    color: #343232;
}

.finance-legend__total-amount {
    font-size: 40px;
    font-weight: 700;
    color: #F05B89;
}

.finance-legend__unit {
    font-size: 32px;
    font-weight: 600;
    margin-left: 4px;
}

/* 항목 목록 */
.finance-legend__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.finance-legend__item {
    border-top: 2px solid #D9D9D9;
    padding: 20px 0;
}

.finance-legend__item:last-child {
    border-bottom:  2px solid #D9D9D9;
}

/* 항목 행 */
.finance-legend__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.finance-legend__dot {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    flex-shrink: 0;
}

.finance-legend__label {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #343232;
    flex: 1;
}

.finance-legend__amount {
    font-size: 20px;
    color: #343232;
    white-space: nowrap;
}

.finance-legend__percent {
    font-size: 20px;
    font-weight: 700;
    color: #F05B89;
    min-width: 64px;
    text-align: right;
    white-space: nowrap;
}

/* 설명 텍스트 */
.finance-legend__desc {
    font-size: 15px;
    color: #777;
    margin: 8px 0 0 40px;
    line-height: 1.5;
}

/* 세부항목 목록 */
.finance-legend__sub {
    background-color: #F7F7F7;
    list-style: none;
    margin: 12px 0 0 0;
    padding: 16px 24px 16px 40px;
    border-radius: 12px;
}

.finance-legend__sub li {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #636466;
    padding: 4px 0;
}

.finance-legend__sub-label {
    flex: 1;
}

.finance-legend__sub-amount {
    white-space: nowrap;
    color: #555560;
}

/* 데이터 없음 메시지 */
.finance-empty {
    padding: 40px 0;
    color: #999999;
    font-size: 15px;
}

/* ── 반응형 ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .finance-chart-wrap {
        flex: 0 0 280px;
    }
    .finance-chart {
        width: 280px;
        height: 280px;
    }
    .finance-block {
        gap: 32px;
    }
}

@media (max-width: 680px) {
    .finance-block {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-top: 32px;
    }
    .finance-chart-wrap {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
    }
    .finance-chart {
        width: 260px;
        height: 260px;
    }
    /* 범례 폰트 축소 */
    .finance-legend__type { font-size: 20px; }
    .finance-legend__total-amount { font-size: 22px; }
    .finance-legend__unit { font-size: 18px; }
    .finance-legend__item { padding: 14px 0; }
    .finance-legend__row { gap: 10px; }
    .finance-legend__dot { width: 18px; height: 18px; }
    .finance-legend__label { font-size: 15px; line-height: 20px; }
    .finance-legend__amount { font-size: 15px; }
    .finance-legend__percent { font-size: 14px; min-width: 48px; }
    .finance-legend__desc { font-size: 14px; margin-left: 28px; }
    .finance-legend__sub li { font-size: 14px; }
    .finance-legend__sub { padding: 12px 16px; }
}