/* ==========================================================================
   /tax-account/exit/ — IRP·ISA 해지 손해 계산기 (3탭)
   ========================================================================== */

/* 현재 평가 → 해지 실수령 비교 페어 */
.isa-compare-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 4px;
}
.isa-compare-pair .icp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    min-width: 0;
}
.isa-compare-pair .icp-lbl {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}
.isa-compare-pair .icp-val {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.isa-compare-pair .icp-after .icp-lbl { color: #059669; }
.isa-compare-pair .icp-after .icp-val { color: #059669; font-size: 1.1rem; }
.isa-compare-pair .icp-arrow {
    font-size: 1.2rem;
    color: #94a3b8;
    flex-shrink: 0;
}
@media (max-width: 360px) {
    .isa-compare-pair .icp-val { font-size: 0.92rem; }
    .isa-compare-pair .icp-after .icp-val { font-size: 1rem; }
    .isa-compare-pair { gap: 6px; }
}

/* ISA 순차 플로우 — 계산식 스타일 (+ 수익, − 한도, × 세율, = 세금) */
.isa-step-flow {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0 8px;
    padding: 14px 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
}
.isf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    font-size: 0.9rem;
    color: #475569;
}
.isf-op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.isf-lbl { flex: 1; color: #475569; }
.isf-sub { color: #94a3b8; font-size: 0.82rem; font-weight: 400; }
.isf-val {
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.94rem;
}
.isf-row.plus .isf-op { color: #059669; }
.isf-row.minus .isf-op { color: #dc2626; }
.isf-row.mul .isf-op { color: #7c3aed; }
.isf-row.eq .isf-op { color: #64748b; }
.isf-row.skip .isf-op { color: #dc2626; font-weight: 800; }
.isf-row.skip .isf-val { color: #94a3b8; text-decoration: line-through; font-weight: 500; }
.isf-row.tax.warn .isf-val { color: #b45309; }
.isf-row.tax .isf-lbl { font-weight: 600; color: var(--text-main); }
.isf-divider {
    height: 1px;
    background: linear-gradient(to right, transparent 5%, #94a3b8 20%, #94a3b8 80%, transparent 95%);
    margin: 6px 2px;
}
/* 만기까지 기다린다면? 대안 시나리오 (중도해지 결과 내부) */
.isf-alt-scenario {
    margin-top: 14px;
    padding: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.isf-alt-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #065f46;
    margin-bottom: 4px;
}
.isf-alt-head i { color: #059669; }
.isf-alt-final {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #86efac;
}
.isf-alt-final i { color: #059669; }
.isf-alt-final .isf-lbl { flex: 1; color: #065f46; font-weight: 600; font-size: 0.88rem; }
.isf-alt-final .isf-val { color: #065f46; font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.isf-alt-savings {
    margin-top: 4px;
    padding: 6px 8px;
    font-size: 0.82rem;
    color: #047857;
    text-align: center;
    letter-spacing: -0.01em;
}
.isf-alt-savings b { color: #065f46; font-weight: 800; }
.isf-basis {
    margin-top: 8px;
    padding: 6px 2px 0;
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
/* 만기 후 연금계좌 이전 힌트 — 긴급 톤 (60일 데드라인) */
.isf-transfer-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 7px;
    font-size: 0.82rem;
    color: #78350f;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.isf-transfer-hint i { color: #d97706; flex-shrink: 0; font-size: 1.1rem; margin-top: 1px; }
.isf-transfer-hint b { color: #92400e; font-weight: 700; }
.isf-transfer-hint .isf-th-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.isf-transfer-hint .isf-th-main {
    white-space: nowrap;
    letter-spacing: -0.035em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.isf-transfer-hint .isf-th-breakdown {
    font-size: 0.74rem;
    color: #a16207;
    opacity: 0.85;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
@media (max-width: 360px) {
    .isf-transfer-hint .isf-th-breakdown { font-size: 0.68rem; letter-spacing: -0.03em; }
}
@media (max-width: 360px) {
    .isf-transfer-hint { padding: 8px 10px; font-size: 0.78rem; }
    .isf-transfer-hint .isf-th-main { font-size: 0.76rem; letter-spacing: -0.04em; }
    .isf-transfer-hint a.isf-to-tr { font-size: 0.76rem; }
}
/* 360px↓ 가이드 h2 자간 축소 — 긴 제목 한 줄 유지 */
@media (max-width: 380px) {
    .guide-section h2 {
        letter-spacing: -0.04em !important;
    }
}

/* 현재 평가금액 아래 범위 기준 고지 */
.isa-basis-note {
    margin: -2px 0 10px;
    padding: 0;
    font-size: 0.74rem;
    color: #94a3b8;
    text-align: center;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
@media (max-width: 360px) {
    .isa-basis-note { font-size: 0.68rem; letter-spacing: -0.03em; }
}
.isf-transfer-hint a.isf-to-tr {
    display: inline-block;
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: underline;
    font-size: 0.8rem;
    white-space: nowrap;
}
@media (max-width: 360px) {
    .isf-transfer-hint { font-size: 0.74rem; }
}
@media (max-width: 360px) {
    .isf-basis { font-size: 0.66rem; }
}
/* 상태 메시지 한 줄 유지 */
.loss-ratio {
    white-space: nowrap;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 360px) {
    .loss-ratio { font-size: 0.78rem; }
}
.isf-verdict {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
}
.isf-verdict.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.isf-verdict.warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.isf-verdict i { font-size: 1rem; flex-shrink: 0; }
.isf-final {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 8px;
    border: 1px solid #6ee7b7;
}
.isf-final .isf-lbl {
    color: #065f46;
    font-weight: 600;
}
.isf-final .isf-val {
    color: #065f46;
    font-size: 1.05rem;
}
.isf-simple {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    line-height: 1.5;
}
.isf-simple.neutral { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.isf-simple.loss { background: #fef2f2; color: #7c2d12; border: 1px solid #fecaca; }
.isf-simple i { font-size: 1.3rem; flex-shrink: 0; }
.isf-simple b { color: var(--text-main); display: block; margin-bottom: 4px; }

/* 55세 유지 비교 가정 고지 — IRP 결과 */
.kbc-assumption {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 8px 0 0;
    padding: 6px 8px;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.4;
    letter-spacing: -0.015em;
}
.kbc-assumption i { color: #94a3b8; margin-top: 2px; flex-shrink: 0; }

/* ISA Exact 모드일 때 범위 버튼 dim (클릭은 여전히 가능 — 되돌리기 허용) */
#panel-isa.isa-exact-mode .range-btn-group,
#panel-isa.isa-exact-mode > .ta-form-group:has(.range-btn-group),
#panel-isa.isa-exact-mode .ta-hint-line {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
#panel-isa:not(.isa-exact-mode) .range-btn-group,
#panel-isa:not(.isa-exact-mode) .ta-hint-line {
    opacity: 1;
}

/* 고급 상단 "현재 고급 값 사용중" 안내 (Exact 모드일 때만 표시) */
.ta-mode-note {
    display: none;
    margin: 0 0 12px;
    padding: 8px 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #065f46;
    line-height: 1.4;
}
#panel-isa.isa-exact-mode .ta-mode-note { display: block; }
.ta-mode-note i { margin-right: 4px; color: #059669; }

/* 범위 입력 버튼 그룹 — ISA 해지 탭 (총액·수익률) */
.range-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.range-btn {
    flex: 1 1 auto;
    min-width: 58px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.2;
}
.range-btn:hover { border-color: var(--primary-color); }
.range-btn.active {
    border-color: var(--primary-color);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 700;
}
@media (max-width: 360px) {
    .range-btn { font-size: 0.76rem; padding: 7px 6px; min-width: 52px; }
}

/* 2줄 스택 버튼 — 수익률 (범위 서브라벨 포함) */
.range-btn-stacked {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.range-btn-stacked .range-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    line-height: 1.25;
    min-width: 0;
    font-size: 0.78rem;
}
.range-btn-stacked .range-sub {
    display: block;
    font-size: 0.66rem;
    font-weight: 400;
    opacity: 0.72;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.range-btn-stacked .range-btn.active .range-sub { opacity: 0.95; }
@media (max-width: 360px) {
    .range-btn-stacked { gap: 4px; }
    .range-btn-stacked .range-btn { padding: 7px 2px; font-size: 0.72rem; }
    .range-btn-stacked .range-sub { font-size: 0.6rem; }
}

/* 범위 모드 결과 뱃지 */
.range-mode-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #92400e;
}
.range-mode-notice i { color: #d97706; }

/* 고급 내부 토스 앱 확인 안내 — 3줄 스텝 구조 */
.ta-check-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
}
.ta-check-line i {
    color: #64748b;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1rem;
}
.ta-check-line .tcl-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ta-check-line .tcl-body b {
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 2px;
}
.ta-check-line .tcl-step {
    color: #475569;
    white-space: nowrap;
}
.ta-check-line a {
    color: var(--primary-dark);
    text-decoration: underline;
    font-weight: 600;
}

/* 예시 기준 안내 — ISA 해지 탭 고급 토글 상단 힌트 */
.ta-hint-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 6px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.4;
}
.ta-hint-line i { color: #64748b; margin-top: 2px; flex-shrink: 0; }
.ta-hint-line b { color: var(--text-main); font-weight: 600; }

/* 라디오 라벨 2줄 스택 — 긴 부제 수용 (IRP 해지 사유 전용) */
.ta-radio-stacked label {
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    line-height: 1.25;
}
.ta-radio-stacked .rlabel-sub {
    font-size: 0.74rem;
    font-weight: 400;
    opacity: 0.78;
    letter-spacing: -0.01em;
}
.ta-radio-stacked input[type=radio]:checked + label .rlabel-sub {
    opacity: 0.9;
}
@media (max-width: 360px) {
    .ta-radio-stacked .rlabel-sub { font-size: 0.7rem; }
    .ta-radio-stacked label { padding: 7px 6px; }
}

/* 타이틀 섹션 */
.exit-title-section {
    background: #fff;
    padding: 28px 24px 24px;
    border-bottom: 1px solid #e2e8f0;
}
.exit-title-inner { max-width: 1240px; margin: 0 auto; }
.exit-title-section h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: -0.025em;
    display: flex; align-items: center; gap: 10px;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
    flex-wrap: wrap;
}
.exit-title-section h1 .icon { color: var(--primary-color); }
.exit-title-section .subtitle {
    color: var(--text-sub);
    font-size: 1rem;
}

/* 하위 탭 — 심플하게 (박스·보더 제거, 삼각형 포인터만) */
.exit-tabs {
    display: flex;
    gap: 4px;
    margin: -16px 0 16px;        /* 상단 .ta-panel padding 일부 상쇄 — 가까이 */
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e2e8f0;   /* 연한 실선으로 하위 탭 구분 */
    border-radius: 0;
    position: relative;
}
/* 3번째 메인 탭(62.5%) 에서 내려오는 화살표만 */
.exit-tabs::before {
    content: '';
    position: absolute;
    top: -10px;
    left: calc(62.5% - 7px);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--primary-color);
}
/* 심플 탭 — 언더라인 스타일 (박스·그림자 제거) */
.exit-tab {
    flex: 1;
    padding: 4px 8px 6px;         /* top 4, bottom 6 → 실선이 텍스트에 가깝게 */
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    letter-spacing: -0.01em;
}
.exit-tab.active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-color);
}
.exit-tab:not(.active):hover {
    color: var(--text-main);
    border-bottom-color: #e2e8f0;
}

.exit-panel { display: none; }
.exit-panel.active { display: block; }

/* .ta-form-row 아래에 다른 row/group 오면 여백 보강 */
.exit-panel .ta-form-row + .ta-form-group,
.exit-panel .ta-form-row + .ta-form-row {
    margin-top: 12px;
}

/* 통합 wrapper (결과 + 액션 + 다음 궁금할 것) — limit 패턴과 동일 */
#exit-result-area .exit-panel.active {
    margin-bottom: 0;
}
#exit-result-area .exit-panel.active > :last-child {
    margin-bottom: 0;
}

/* 결과 모드 — sub-tabs 가 있는 ta-calc-box 와 result-area 를 하나의 카드처럼 연결 */
.ta-calculator-wrapper.result-mode .ta-calc-box {
    border-radius: 16px 16px 0 0;   /* 하단 각짐 */
    border-bottom: 1px solid #e2e8f0;
}
.ta-calculator-wrapper.result-mode #exit-result-area {
    margin-top: 0;                   /* 공백 제거 → 붙음 */
    border-radius: 0 0 16px 16px;    /* 상단 각짐 */
    border-top: none;                /* 상단 보더 제거 (calc-box 하단과 중복 방지) */
}

/* 결과 — 손해 강조 (빨강 기본) */
.loss-card {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 16px;
}

/* ISA 만기 상태 — 초록 (good) 오버라이드 */
.loss-card.isa-mature {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
}
.loss-card.isa-mature .loss-label { color: #166534; }
.loss-card.isa-mature .loss-label i { color: #16a34a; }
.loss-card.isa-mature .loss-value { color: #14532d; }
.loss-card.isa-mature .loss-sub { color: #166534; }

/* 영수증 내부 — 만기일 때 초록 */
.loss-card.isa-mature .loss-receipt {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(22, 101, 52, 0.15);
}
.loss-card.isa-mature .lr-row { color: #166534; }
.loss-card.isa-mature .lr-row b { color: #14532d; }
.loss-card.isa-mature .lr-row.lr-total {
    border-top-color: rgba(22, 101, 52, 0.25);
}
.loss-card.isa-mature .lr-row.lr-tax b.minus { color: #166534; }   /* 만기는 세금 적음 — 빨강 X */
.loss-card.isa-mature .lr-row.lr-net {
    border-top-color: #166534;
}
.loss-card.isa-mature .lr-row.lr-net b { color: #14532d; }

/* 상태 메시지 — 만기일 때 */
.loss-card.isa-mature .loss-ratio {
    background: rgba(255, 255, 255, 0.85);
}

/* ISA 중도 상태 — 빨강 강조 (.loss-card 기본이 빨강이지만 명시) */
.loss-card.isa-early { /* 기본 빨강 유지 */ }
.loss-card .loss-label {
    font-size: 0.85rem;
    color: #991b1b;
    font-weight: 700;
    margin-bottom: 6px;
}
.loss-card .loss-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #991b1b;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.loss-card .loss-sub {
    font-size: 0.88rem;
    color: #7f1d1d;
    line-height: 1.6;
    word-break: keep-all;
    letter-spacing: -0.01em;
}

/* 분해 영수증 — 원금·수익·평가·세금·실수령 단계별 표시 */
.loss-card .loss-receipt {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(153, 27, 27, 0.15);
    border-radius: 10px;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
}
.loss-card .lr-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    color: #7f1d1d;
}
.loss-card .lr-row span { font-weight: 500; }
.loss-card .lr-row b {
    font-weight: 700;
    color: #991b1b;
    font-variant-numeric: tabular-nums;
}
.loss-card .lr-row.lr-total {
    border-top: 1px dashed rgba(153, 27, 27, 0.25);
    margin-top: 2px;
    padding-top: 6px;
    font-weight: 600;
}
.loss-card .lr-row.lr-tax b.minus { color: #dc2626; }
.loss-card .lr-row.lr-net {
    border-top: 1.5px solid #991b1b;
    margin-top: 4px;
    padding-top: 8px;
    font-weight: 700;
    font-size: 0.95rem;
}
.loss-card .lr-row.lr-net b { color: #7c2d12; font-size: 1rem; }

/* 손해율 요약 */
.loss-card .loss-ratio {
    margin-top: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    font-size: 0.86rem;
    color: #334155;
    line-height: 1.55;
    word-break: keep-all;
    letter-spacing: -0.01em;
}
.loss-card .loss-ratio i {
    font-size: 0.95rem;
    margin-right: 2px;
    vertical-align: middle;
}

/* 모바일 반응형 */
@media (max-width: 480px) {
    .loss-card .loss-receipt {
        font-size: 0.82rem;
        padding: 10px 12px;
        letter-spacing: -0.02em;
    }
    .loss-card .lr-row.lr-net { font-size: 0.88rem; }
    .loss-card .lr-row.lr-net b { font-size: 0.92rem; }
    .loss-card .loss-ratio {
        font-size: 0.8rem;
        padding: 8px 10px;
        letter-spacing: -0.02em;
    }
}
@media (max-width: 360px) {
    .loss-card .loss-receipt { font-size: 0.78rem; letter-spacing: -0.03em; }
    .loss-card .loss-ratio { font-size: 0.76rem; letter-spacing: -0.025em; }
}
@media (max-width: 480px) {
    .loss-card .loss-sub {
        font-size: 0.82rem;
        letter-spacing: -0.03em;
    }
}
@media (max-width: 360px) {
    .loss-card .loss-sub {
        font-size: 0.76rem;
        letter-spacing: -0.04em;
    }
}

/* 해지 vs 유지 대비 (IRP 전용) */
.loss-card .loss-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 10px;
    margin-top: 14px;
    background: rgba(153, 27, 27, 0.08);
    border-radius: 10px;
    gap: 8px;
}
.loss-card .lc-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.loss-card .lc-label {
    font-size: 0.72rem;
    color: #7f1d1d;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.loss-card .lc-value {
    font-size: 1.15rem;
    font-weight: 900;
    color: #991b1b;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.loss-card .lc-cell.keep .lc-value {
    color: #065f46;
}
.loss-card .lc-hint {
    font-size: 0.68rem;
    color: #7f1d1d;
    opacity: 0.7;
    margin-top: 2px;
}
.loss-card .lc-cell.keep .lc-hint { color: #065f46; opacity: 0.7; }
.loss-card .lc-divider {
    width: 1px;
    height: 38px;
    background: rgba(153, 27, 27, 0.25);
}
.loss-card .loss-verdict {
    margin-top: 12px;
    padding: 10px 14px;
    background: #991b1b;
    color: #fff;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
    font-weight: 600;
}
.loss-card .loss-verdict b {
    font-weight: 900;
    color: #fef3c7;
}

/* 이득 카드 (이전 탭) */
.gain-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.gain-card .gain-label {
    font-size: 0.85rem;
    color: #166534;
    font-weight: 700;
    margin-bottom: 6px;
}
.gain-card .gain-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #14532d;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.gain-card .gain-sub {
    font-size: 0.88rem;
    color: #166534;
    line-height: 1.6;
}

/* 상세 내역 */
.detail-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.detail-box .dh {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.92rem;
    border-bottom: 1px dashed #e2e8f0;
}
.detail-row:last-of-type { border-bottom: none; }
.detail-row b { color: var(--text-main); }
.detail-row.negative b { color: #991b1b; }
.detail-row.positive b { color: #166534; }
.detail-row.total {
    border-bottom: none;
    border-top: 1px solid #cbd5e1;
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
    font-size: 1rem;
}

/* 비교 박스 */
.compare-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.compare-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.compare-card.good { border-color: #86efac; background: #f0fdf4; }
.compare-card.bad { border-color: #fca5a5; background: #fef2f2; }
.compare-card .cc-label {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-bottom: 4px;
    font-weight: 600;
}
.compare-card .cc-value {
    font-size: 1.1rem;
    font-weight: 800;
}
.compare-card.good .cc-value { color: #166534; }
.compare-card.bad .cc-value { color: #991b1b; }

/* 가이드 (shared pattern) */
.guide-section {
    background: #fff;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(8, 145, 178, 0.08);
}
.guide-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-light);
    /* 한글 가독성 표준 (사이트 구조.md A-8) */
    word-break: keep-all;
    letter-spacing: -0.02em;
    line-height: 1.35;
}
.guide-section p {
    color: #334155;
    line-height: 1.8;
    margin-bottom: 12px;
    word-break: keep-all;
    letter-spacing: -0.01em;
}
.guide-section ul { margin: 10px 0 14px 0; padding-left: 18px; color: #334155; }
.guide-section ul li {
    margin-bottom: 8px;
    line-height: 1.7;
    word-break: keep-all;
    letter-spacing: -0.01em;
}
.guide-section strong { color: var(--text-main); }
.guide-section h3 {
    font-size: 1rem;
    margin: 16px 0 8px;
    color: var(--primary-dark);
    word-break: keep-all;
    letter-spacing: -0.02em;
    line-height: 1.4;
}
/* 가이드 내부 박스 한글 가독성 (info / warning / success) */
.guide-section .info-box,
.guide-section .warning-box,
.guide-section .success-box,
.guide-section .tldr-box,
.guide-section table {
    word-break: keep-all;
    letter-spacing: -0.01em;
}
.warning-box {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 14px 0;
    color: #92400e;
    font-size: 0.93rem;
    line-height: 1.7;
}
.info-box {
    background: var(--primary-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 12px 0;
    color: #0f172a;
    font-size: 0.92rem;
    line-height: 1.7;
}

/* 모바일 — 군인 계산기 패턴 */
@media (max-width: 768px) {
    .exit-title-section { padding: 20px 16px 18px; }
    .exit-title-section h1 { font-size: 1.5rem; }
    .exit-tab { font-size: 0.82rem; padding: 4px 6px 6px; }
    /* 2열 유지 + 카드 내부 한 줄로 */
    .compare-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .compare-card { padding: 10px 8px; }
    .compare-card .cc-label {
        font-size: 0.72rem;
        letter-spacing: -0.025em;
        white-space: nowrap;
    }
    .compare-card .cc-value {
        font-size: 0.95rem;
        letter-spacing: -0.025em;
        white-space: nowrap;
    }
    .guide-section { padding: 20px 18px; border-radius: 12px; }
}
@media (max-width: 360px) {
    .compare-cards { gap: 6px; }
    .compare-card { padding: 9px 6px; }
    .compare-card .cc-label { font-size: 0.68rem; letter-spacing: -0.035em; }
    .compare-card .cc-value { font-size: 0.85rem; letter-spacing: -0.035em; }
}

@media (max-width: 480px) {
    .exit-title-section h1 { font-size: 1.4rem; letter-spacing: -0.03em; }
    .exit-title-section .subtitle { font-size: 0.92rem; }
    .guide-section h2 {
        font-size: 1.15rem;
        letter-spacing: -0.025em;
        padding-left: 1.8ch;
        text-indent: -1.8ch;
    }
    .guide-section h3 { font-size: 0.95rem; letter-spacing: -0.025em; }
    .guide-section p,
    .guide-section ul li {
        font-size: 0.95rem;
        line-height: 1.75;
        letter-spacing: -0.02em;
    }
    /* 박스 한글 자간 모바일 */
    .guide-section .info-box,
    .guide-section .warning-box,
    .guide-section .success-box,
    .guide-section .tldr-box,
    .guide-section table {
        letter-spacing: -0.02em;
    }
    .loss-card .loss-value, .gain-card .gain-value { font-size: 1.5rem; }
}
@media (max-width: 350px) {
    .guide-section h2 { letter-spacing: -0.035em; font-size: 1.08rem; }
    .guide-section h3 { font-size: 0.9rem; letter-spacing: -0.035em; }
    .guide-section p,
    .guide-section ul li { letter-spacing: -0.025em; font-size: 0.92rem; }
    .guide-section .info-box,
    .guide-section .warning-box,
    .guide-section .success-box,
    .guide-section .tldr-box { letter-spacing: -0.025em; }
}

/* ──────────────────────────────────────────────
   바 차트 — 세금 비교 (ISA 탭) / 유지 비교 (IRP 탭)
   ────────────────────────────────────────────── */
.tax-bar-chart,
.keep-bar-chart {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0 16px;
}
.tbc-title,
.kbc-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.tbc-title i,
.kbc-title i {
    color: var(--primary-color);
    font-size: 0.95rem;
}
/* 바 한 줄 — label 너비 축소해서 바 차트에 공간 더 확보 */
.tbc-row,
.kbc-row {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.tbc-row:last-of-type,
.kbc-row:last-of-type { margin-bottom: 0; }

.tbc-label,
.kbc-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-sub);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.tbc-track,
.kbc-track {
    height: 18px;
    background: #e2e8f0;
    border-radius: 9px;
    overflow: hidden;
    position: relative;
}
.tbc-fill,
.kbc-fill {
    height: 100%;
    border-radius: 9px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ISA 세금 비교 색상 */
.tbc-row.good .tbc-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
.tbc-row.bad  .tbc-fill { background: linear-gradient(90deg, #ef4444, #dc2626); }
/* IRP 유지 비교 색상 */
.kbc-row.now  .kbc-fill { background: linear-gradient(90deg, #f97316, #ea580c); }
.kbc-row.keep .kbc-fill { background: linear-gradient(90deg, #0891b2, #0e7490); }

.tbc-value,
.kbc-value {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

/* 차이(차액) 문구 */
.kbc-diff {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.01em;
    word-break: keep-all;
}
.kbc-diff i {
    font-size: 1rem;
    margin-right: 4px;
    vertical-align: middle;
}
.kbc-diff.warn { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
.kbc-diff.ok   { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.kbc-diff.neutral { background: #e0f2fe; color: #0c4a6e; border: 1px solid #7dd3fc; }

/* 모바일 */
@media (max-width: 480px) {
    .tax-bar-chart,
    .keep-bar-chart {
        padding: 12px 12px;
    }
    .tbc-row,
    .kbc-row {
        grid-template-columns: 72px 1fr auto;
        gap: 8px;
    }
    .tbc-label,
    .kbc-label {
        font-size: 0.74rem;
        letter-spacing: -0.025em;
    }
    .tbc-value,
    .kbc-value {
        font-size: 0.82rem;
    }
    .kbc-diff {
        font-size: 0.82rem;
        padding: 9px 10px;
        letter-spacing: -0.02em;
    }
}
@media (max-width: 360px) {
    .tbc-row,
    .kbc-row {
        grid-template-columns: 62px 1fr auto;
        gap: 6px;
    }
    .tbc-label,
    .kbc-label { font-size: 0.7rem; letter-spacing: -0.03em; }
    .tbc-value,
    .kbc-value { font-size: 0.78rem; }
}

/* detail-box .dh 아이콘 갭 */
.detail-box .dh {
    display: flex;
    align-items: center;
    gap: 6px;
}
.detail-box .dh i {
    color: var(--primary-color);
    font-size: 0.95rem;
}
/* loss-card, gain-card 라벨 아이콘 */
.loss-card .loss-label,
.gain-card .gain-label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.loss-card .loss-label i { color: #dc2626; font-size: 1rem; }
.gain-card .gain-label i { color: #16a34a; font-size: 1rem; }

/* warning-box 아이콘 갭 */
.warning-box i {
    margin-right: 4px;
    vertical-align: middle;
}