/* 대출계산기 전용 스타일 (loan.php 에서만 불러옴) */
/* 대출계산기 전용 색 토큰: 라이트 값 = 기존 디자인, 다크 값 = html[data-theme="dark"] (화면 출력에만) */
.ln-app {
    --ln-text: #223;          --ln-btn-text: #334;
    --ln-muted: #667;         --ln-muted-2: #556;   --ln-off: #99a;  --ln-disabled-text: #aab;
    --ln-accent: #2e6aad;     --ln-accent-hover: #245a96;   --ln-accent-text: #2e6aad;
    --ln-th-bg: #f3f6fa;      --ln-desc-bg: #f7f9fc;        --ln-track: #e8edf3;
    --ln-line: #e3e8ef;       --ln-line-soft: #eef1f5;      --ln-input-line: #cdd5df;
    --ln-rule: #1f2d3a;
    --ln-row-hover: #f7fafd;  --ln-grace-text: #8a6a00;     --ln-grace-bg: #fffaf0;
    --ln-reset-line: #f0c4c0; --ln-reset-hover: #fdecea;
    --ln-focus: rgba(46,106,173,.15);
}
@media screen {
    :root[data-theme="dark"] .ln-app {
        --ln-text: #e6e9ed;       --ln-btn-text: #d6dbe1;
        --ln-muted: #a8b0b9;      --ln-muted-2: #b0b8c1;  --ln-off: #6c7480;  --ln-disabled-text: #6c7480;
        --ln-accent: #3578c4;     --ln-accent-hover: #2d68ad;   --ln-accent-text: #6cb2f0;
        --ln-th-bg: #232a33;      --ln-desc-bg: #20262e;        --ln-track: #2a323c;
        --ln-line: #333b45;       --ln-line-soft: #2a313a;      --ln-input-line: #46505b;
        --ln-rule: #55606e;
        --ln-row-hover: #1f2a36;  --ln-grace-text: #e8c25a;     --ln-grace-bg: #2c2915;
        --ln-reset-line: #6b3a3d; --ln-reset-hover: #3a1d20;
        --ln-focus: rgba(108,178,240,.3);
    }
}
.ln-app { display: flex; flex-direction: column; gap: 20px; color: var(--ln-text); }
.ln-app *, .ln-app *::before, .ln-app *::after { box-sizing: border-box; }
.ln-app button, .ln-app input { font-family: inherit; }
.ln-app [hidden] { display: none !important; }

/* 위: 입력(왼쪽) + 계산결과 총계(오른쪽), 아래: 계산결과(전체 폭) */
.ln-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ln-side { position: sticky; top: 20px; }
.ln-side > .ln-sub:first-child { margin-top: 0; }
.ln-side .ln-chart { margin: 0 0 18px; }
.ln-app .ln-side .ln-total th { width: auto; padding: 13px 12px; font-size: 13px; white-space: nowrap; }
.ln-app .ln-side .ln-total td { padding: 13px 12px; white-space: nowrap; }
.ln-side .ln-total td b { font-size: 17px; }
@media (max-width: 1240px) {
    .ln-top { grid-template-columns: 1fr; }
    .ln-side { position: static; }
}

.ln-card { background: var(--surface); border-radius: 12px; padding: 26px 28px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ln-h { margin: 0 0 4px; font-size: 22px; }
.ln-lead { margin: 0 0 22px; color: var(--ln-muted); font-size: 14px; }
.ln-sub { margin: 26px 0 10px; padding-left: 10px; border-left: 3px solid var(--ln-accent); font-size: 15px; line-height: 1.3; }
.ln-lead + .ln-sub { margin-top: 0; }

/* 입력 표 */
.ln-app table { width: 100%; border-collapse: collapse; }
.ln-form { border-top: 2px solid var(--ln-rule); }
.ln-app .ln-form th { width: 130px; background: var(--ln-th-bg); text-align: left; padding: 16px; font-size: 14px; border-bottom: 1px solid var(--ln-line); vertical-align: top; }
.ln-app .ln-form th label { cursor: pointer; }
.ln-app .ln-form td { padding: 12px 16px; border-bottom: 1px solid var(--ln-line); font-size: 14px; }

.ln-radios { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ln-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 15px; }
.ln-radios input { width: 16px; height: 16px; accent-color: var(--ln-accent); }
.ln-desc { margin: 10px 0 0; padding: 10px 12px; background: var(--ln-desc-bg); border-radius: 6px; font-size: 13px; line-height: 1.6; color: var(--ln-muted-2); }

.ln-inputline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ln-app .ln-input {
    width: 230px; height: 40px; padding: 0 12px; border: 1px solid var(--ln-input-line); border-radius: 6px;
    font-size: 16px; text-align: right; background: var(--input-bg); color: var(--ln-text);
}
.ln-app .ln-input:focus { outline: 0; border-color: var(--ln-accent); box-shadow: 0 0 0 3px var(--ln-focus); }
.ln-app .ln-input:disabled { background: var(--th-bg); color: var(--ln-disabled-text); cursor: not-allowed; }
.ln-unit { font-size: 14px; color: var(--ln-muted-2); }
.ln-hint { font-size: 13px; color: var(--ln-accent-text); font-weight: bold; }

.ln-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-quick button {
    height: 30px; padding: 0 12px; border: 1px solid var(--ln-input-line); border-radius: 5px;
    background: var(--surface); color: var(--ln-btn-text); font-size: 13px; cursor: pointer;
}
.ln-quick button:hover:not(:disabled) { background: var(--hover-bg-2); border-color: var(--ln-accent); }
.ln-quick button.reset { color: var(--err-text); border-color: var(--ln-reset-line); }
.ln-quick button.reset:hover:not(:disabled) { background: var(--ln-reset-hover); border-color: var(--err-text); }
.ln-quick button:disabled { opacity: .45; cursor: not-allowed; }
#ln-grace-row.is-off th { color: var(--ln-off); }
.ln-note { margin: 8px 0 0; font-size: 12px; color: var(--muted-3); }

/* 비율 막대 + 범례 */
.ln-chart { margin-top: 22px; }
.ln-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--ln-track); }
.ln-bar-p { background: var(--ln-accent); width: 0; transition: width .3s; }
.ln-bar-i { background: #f5a623; width: 0; transition: width .3s; }
.ln-bar:not(.on) .ln-bar-p, .ln-bar:not(.on) .ln-bar-i { width: 0 !important; }
.ln-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 14px; color: var(--ln-muted-2); }
.ln-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ln-legend i.p { background: var(--ln-accent); } .ln-legend i.i { background: #f5a623; } .ln-legend i.m { background: #3aa57a; }
.ln-legend b { color: var(--ln-text); margin-left: 4px; }

/* 총계 */
.ln-total { border-top: 2px solid var(--ln-rule); }
.ln-app .ln-total th { width: 220px; background: var(--ln-th-bg); text-align: left; padding: 13px 16px; font-size: 14px; border-bottom: 1px solid var(--ln-line); }
.ln-app .ln-total td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--ln-line); font-size: 15px; }
.ln-total td b { font-size: 18px; color: var(--link); }

.ln-error { margin: 18px 0 0; padding: 12px 14px; background: var(--err-bg); border: 1px solid var(--err-line); border-radius: 6px; color: var(--err-text); font-size: 14px; }

.ln-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.ln-actions button { min-width: 130px; height: 46px; padding: 0 22px; border-radius: 8px; font-size: 16px; cursor: pointer; }
.ln-primary { background: var(--ln-accent); border: 1px solid var(--ln-accent); color: #fff; font-weight: bold; }
.ln-primary:hover { background: var(--ln-accent-hover); }
.ln-line { background: var(--surface); border: 1px solid var(--ln-input-line); color: var(--ln-btn-text); }
.ln-line:hover { background: var(--ln-th-bg); }

/* 계산결과 */
.ln-notes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--ln-muted); }
.ln-scroll { overflow-x: auto; }
.ln-scroll-y { max-height: 560px; overflow-y: auto; border-bottom: 1px solid var(--ln-line); }
.ln-app .ln-table { min-width: 640px; border-top: 2px solid var(--ln-rule); }
.ln-app .ln-table th { background: var(--ln-th-bg); padding: 11px 10px; font-size: 13px; text-align: center; border-bottom: 1px solid var(--ln-line); white-space: nowrap; }
.ln-app .ln-table td { padding: 10px 10px; font-size: 14px; text-align: right; border-bottom: 1px solid var(--ln-line-soft); font-variant-numeric: tabular-nums; }
.ln-app .ln-table td.c { text-align: center; color: var(--ln-muted); }
.ln-app .ln-table td.l { text-align: center; font-weight: bold; }
.ln-app #ln-sum-row td { text-align: center; font-size: 14px; }
.ln-scroll-y thead th { position: sticky; top: 0; z-index: 1; }
.ln-table tbody tr:hover td { background: var(--ln-row-hover); }
.ln-table tr.grace td { color: var(--ln-grace-text); background: var(--ln-grace-bg); }
.ln-app .ln-table tfoot th, .ln-app .ln-table tfoot td { background: var(--ln-th-bg); font-weight: bold; border-top: 2px solid var(--ln-rule); border-bottom: 0; }
.ln-app .ln-table tfoot th { text-align: center; }

@media (max-width: 700px) {
    .ln-card { padding: 18px 14px; }
    .ln-app .ln-form, .ln-app .ln-form tbody, .ln-app .ln-form tr, .ln-app .ln-form th, .ln-app .ln-form td { display: block; width: 100%; }
    .ln-app .ln-form th { padding: 12px 12px 6px; border-bottom: 0; }
    .ln-app .ln-form td { padding: 4px 12px 14px; }
    .ln-app .ln-input { width: 100%; max-width: 230px; }
    .ln-app .ln-total th { width: 50%; font-size: 13px; }
    .ln-actions button { flex: 1; min-width: 0; }
}

/* 사이트 공통 모바일 규칙(table 의 1·4번째 열 숨김)이 계산 결과 표를 가리지 않도록 되돌림 */
@media (max-width: 700px) {
    .ln-app table th:nth-child(1), .ln-app table td:nth-child(1),
    .ln-app table th:nth-child(4), .ln-app table td:nth-child(4) { display: table-cell; }
    .ln-app .ln-form th:nth-child(1), .ln-app .ln-form td:nth-child(1),
    .ln-app .ln-form th:nth-child(4), .ln-app .ln-form td:nth-child(4) { display: block; }
}

/* 인쇄: 계산 결과만 출력 */
@media print {
    header, .breaking, footer, .section-title, .ln-noprint { display: none !important; }
    body, main { background: #fff !important; }
    .ln-app { max-width: none; display: block; }
    .ln-card { box-shadow: none; padding: 0; border-radius: 0; }
    .ln-top { display: none !important; }
    .ln-scroll-y { max-height: none; overflow: visible; }
    .ln-scroll-y thead th { position: static; }
    .ln-table tr { break-inside: avoid; }
}

/* ===== 입력 폼 정리: 제목 옆 설명, 좁은 항목명 칸, 같은 폭의 입력칸, 한 줄 버튼 ===== */
.ln-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 18px; }
.ln-head .ln-h { margin: 0; }
.ln-head .ln-lead { margin: 0; }
.ln-head + .ln-sub { margin-top: 0; }

.ln-app .ln-form th { width: 88px; padding: 16px 12px; white-space: nowrap; }
.ln-app .ln-form td { padding: 12px 14px; }

.ln-inputline { flex-wrap: wrap; }
.ln-app .ln-inputline .ln-input { flex: 0 0 180px; width: 180px; }
.ln-inputline .ln-unit { flex: 0 0 auto; min-width: 42px; white-space: nowrap; }
.ln-inputline .ln-quick { flex-wrap: nowrap; }
.ln-quick button { padding: 0 9px; white-space: nowrap; }
.ln-inputline .ln-quick { gap: 5px; }
/* '5,000만 원', '(5년)' 같은 안내 문구는 정정 버튼 바로 옆에 표시 (공간이 모자라면 아래 줄로) */
.ln-inputline .ln-hint { flex: 0 0 auto; margin-left: 4px; white-space: nowrap; }
.ln-inputline .ln-hint:empty { display: none; }

@media (max-width: 700px) {
    .ln-app .ln-form th { width: 100%; }
    .ln-app .ln-inputline .ln-input { flex: 1 1 140px; width: auto; max-width: none; }
    .ln-inputline .ln-quick { flex-wrap: wrap; flex-basis: 100%; }
}