/* pension-withdrawal (pw- prefix) */

.pw-container { max-width: 1280px; }

/* 연도별 테이블 헤더 (제목 + 상세보기 버튼) */
.pw-yearly-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pw-detail-toggle {
    display: none; /* 데스크탑에서는 전체 컬럼 표시되므로 버튼 숨김 */
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.pw-detail-toggle:hover {
    background: var(--color-bg-tertiary, var(--color-border));
    color: var(--color-text-primary);
}

/* Section */
.pw-section {
    margin-bottom: var(--space-4);
}

/* 패널 내부에서 프리셋/섹션 간격 조정 */
.as-panel-body .pw-preset-section {
    margin-bottom: var(--space-4);
}

.pw-section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

/* Preset buttons */
.pw-preset-section {
    margin-bottom: var(--space-6);
}

.pw-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.pw-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-3) var(--space-2);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    font-family: inherit;
}

.pw-preset-btn:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
}

/* Active preset — subtle but clear */
.pw-preset-btn.pw-preset-active {
    border-color: var(--color-action);
    border-width: 2px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.pw-preset-btn.pw-preset-active .pw-preset-name {
    color: var(--color-action);
}

.pw-preset-btn.pw-preset-active .pw-preset-desc {
    color: var(--color-text-secondary);
}

.pw-preset-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.pw-preset-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
}

/* Account config box */
.pw-accounts-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-4);
}

.pw-account-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Divider between accounts */
.pw-account-row + .pw-account-row {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.pw-account-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pw-account-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.pw-color-taxed { color: var(--color-accent); }
.pw-color-exempt { color: var(--color-info); }

.pw-account-tag {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    padding: 2px 8px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* Comparison grid */
.pw-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.pw-compare-card {
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pw-compare-card--active {
    border-color: var(--color-accent);
    border-width: 2px;
}

.pw-compare-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.pw-compare-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.pw-compare-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.pw-compare-row:last-child {
    border-bottom: none;
}

/* Table highlights */
.pw-row-exempt td {
    background: rgba(167, 139, 250, 0.06);
}

.pw-zero-tax {
    color: var(--color-bull);
    font-weight: var(--font-semibold);
}

.pw-row-total {
    border-top: 2px solid var(--color-text-primary);
}

.pw-row-total td {
    font-weight: var(--font-semibold);
    padding-top: var(--space-3);
    background: rgba(137, 180, 250, 0.06);
}

/* Results */
.pw-results {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pw-comparison {
    margin-bottom: var(--space-6);
}

/* Chart */
#pw-balance-chart {
    height: 300px;
    max-height: 300px;
}

/* Mobile */
@media (max-width: 640px) {
    .pw-preset-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pw-compare-grid {
        grid-template-columns: 1fr;
    }

    #pw-balance-chart {
        height: 240px !important;
        min-height: 240px !important;
    }

    /* 모바일: 상세보기 버튼 표시 */
    .pw-detail-toggle {
        display: inline-block;
    }

    /* 모바일: 나이(1), 세금(5), 세후(6) 표시 — 나머지 숨김 */
    #pw-yearly-table .pw-col-exempt,
    #pw-yearly-table .pw-col-taxed,
    #pw-yearly-table .pw-col-rate,
    #pw-yearly-table .pw-col-balance,
    #pw-yearly-table .pw-col-withdraw {
        display: none;
    }

    /* 상세보기 활성화 시 모든 컬럼 표시 */
    #pw-yearly-table.pw-show-detail .pw-col-exempt,
    #pw-yearly-table.pw-show-detail .pw-col-taxed,
    #pw-yearly-table.pw-show-detail .pw-col-rate,
    #pw-yearly-table.pw-show-detail .pw-col-balance,
    #pw-yearly-table.pw-show-detail .pw-col-withdraw {
        display: table-cell;
    }

    /* 상세보기 시 테이블 가로 스크롤 */
    .as-table-wrap:has(.pw-show-detail) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }

    #pw-yearly-table th,
    #pw-yearly-table td {
        font-size: 13px;
        padding: var(--space-2) var(--space-3);
    }

    /* 상세보기 시 폰트/패딩 축소 — 반드시 일반 규칙 아래에 */
    #pw-yearly-table.pw-show-detail th,
    #pw-yearly-table.pw-show-detail td {
        font-size: 11px;
        padding: var(--space-1) var(--space-2);
        white-space: nowrap;
    }

    /* note/collapsed 행은 줄바꿈 허용 (테이블 폭 넘침 방지) */
    .pw-row-note td,
    .pw-row-collapsed td {
        white-space: normal !important;
        word-break: keep-all;
    }
}

/* 테이블 행 줄무늬 — 다크모드에서도 구분 */
#pw-yearly-table tbody tr:nth-child(even) td {
    background: var(--color-bg-secondary);
}

/* 테이블 축약행 */
.pw-row-collapsed td {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-border);
    white-space: normal;
}

.pw-row-note td {
    font-size: var(--text-xs);
    color: var(--color-bull);
    padding: var(--space-3) var(--space-3);
    background: color-mix(in srgb, var(--color-bull) 8%, transparent);
    border-radius: var(--radius-md);
    white-space: normal;
    word-break: keep-all;
    text-align: left;
}