/* ============================================================
   대출 이자 계산기 전용 스타일
   - 이 도구의 디자인 컨셉: "은행 창구에서 받는 상환 명세 한 장"
     왼쪽에 대출 조건을 적어 내면 오른쪽 명세에 월 상환액과
     총 이자가 채워지고, 아래에서 중도상환안을 겹쳐 본다.
   - 숫자가 주인공이라 금액은 전부 tabular-nums(자리 고정).
   - 색은 사이트 종이 바탕을 유지하고, 금액 계열만 이 파일에서
     따로 정의한다(원금 감청 / 절약 초록 / 수수료 붉은색).
   ============================================================ */

/* ---- 도입부 (다른 도구와 같은 골격) ---- */
.tool-intro {
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-5);
}
.tool-intro h1 {
  margin: 0 0 var(--space-3);
  max-width: 20ch;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.lead {
  color: var(--color-text-sub);
  margin: var(--space-2) 0 var(--space-2);
  max-width: 60ch;
  font-size: 1.02rem;
}
.lead-note {
  color: var(--color-text-sub);
  font-size: .85rem;
  opacity: .85;
  margin: var(--space-3) 0 var(--space-5);
}

/* ---- 금액 색 (라이트/다크) ---- */
:root {
  --ln-ink: #2f4a68;      /* 원금·주 숫자: 장부 감청 */
  --ln-interest: #b3603a; /* 이자: 흙벽돌색 */
  --ln-save: #35785a;     /* 아끼는 돈: 초록 */
  --ln-fee: #b4534a;      /* 수수료: 붉은색 */
  --ln-rule: #ded5c2;     /* 명세 괘선 */
  --ln-band: #f7f3e9;     /* 표 머리·강조 띠 */
}
:root[data-theme="dark"] {
  --ln-ink: #8ab0d6;
  --ln-interest: #dd9367;
  --ln-save: #6fb891;
  --ln-fee: #d97a70;
  --ln-rule: #3a3428;
  --ln-band: #211b14;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ln-ink: #8ab0d6;
    --ln-interest: #dd9367;
    --ln-save: #6fb891;
    --ln-fee: #d97a70;
    --ln-rule: #3a3428;
    --ln-band: #211b14;
  }
}

/* ---- 입력 | 명세 2단 ---- */
.ln-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .ln-grid { grid-template-columns: 1fr; }
}

/* ---- 입력 ---- */
.ln-form { display: flex; flex-direction: column; gap: var(--space-4); }
.ln-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ln-label { font-weight: 700; font-size: .95rem; }
.ln-label small { font-weight: 400; color: var(--color-text-sub); font-size: .82rem; }
.ln-field-note { font-size: .8rem; color: var(--color-text-sub); line-height: 1.55; }

.ln-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  min-width: 0;
}
.ln-input-wrap:focus-within {
  border-color: var(--ln-ink);
  box-shadow: 0 0 0 3px rgba(47, 74, 104, .12);
}
.ln-input-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 11px 0;
  outline: none;
}
/* 숫자 입력 화살표는 자리만 차지해서 숨긴다 */
.ln-input-wrap input[type="number"]::-webkit-outer-spin-button,
.ln-input-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ln-input-wrap input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ln-unit { font-size: .88rem; color: var(--color-text-sub); flex: none; }

.ln-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* 입력한 금액을 한글 단위로 되읽어 주는 줄 (0 하나 더 찍었는지 확인용) */
.ln-kor {
  min-height: 1.1em;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ln-ink);
  text-align: right;
}

/* ---- 빠른 입력 칩 ---- */
.ln-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-sub);
  border-radius: 999px;
  padding: 5px 11px;
  font: inherit;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ln-chip:hover { border-color: var(--ln-ink); color: var(--ln-ink); }

/* ---- 세그먼트 버튼 ---- */
.ln-seg {
  display: flex;
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px;
}
.ln-seg-col { flex-direction: column; }
.ln-seg-btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--color-text-sub);
  border-radius: 6px;
  padding: 9px 10px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
}
.ln-seg-col .ln-seg-btn { text-align: left; }
.ln-seg-btn b { display: block; font-weight: 700; }
.ln-seg-btn small { display: block; font-size: .78rem; opacity: .85; margin-top: 2px; }
.ln-seg-btn:hover { color: var(--color-text); }
.ln-seg-btn[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--ln-ink);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.ln-seg-sm .ln-seg-btn { padding: 6px 12px; font-size: .84rem; flex: none; }

.ln-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ln-form-note { margin: 0; font-size: .8rem; color: var(--color-text-sub); line-height: 1.6; }

/* ============================================================
   상환 명세 (오른쪽)
   ============================================================ */
.ln-report {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  /* 명세지 느낌: 위아래로 두 줄 괘선 */
  border-top: 3px double var(--ln-rule);
}

/* 입력 전 안내 */
.ln-idle { text-align: center; padding: var(--space-6) var(--space-3); }
.ln-idle-mark {
  width: 122px; height: 122px;
  margin: 0 auto var(--space-4);
  border: 2px dashed var(--ln-rule);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.ln-idle-num { font-size: 2.4rem; font-weight: 700; color: var(--ln-rule); line-height: 1; }
.ln-idle-label { font-size: .78rem; color: var(--color-text-sub); letter-spacing: .06em; }
.ln-idle-hint { margin: 0; font-size: .9rem; color: var(--color-text-sub); line-height: 1.7; }

/* 명세 머리글 */
.ln-report-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ln-rule);
}
.ln-report-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
}
.ln-report-meta {
  font-size: .8rem;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}

/* 대표 숫자 */
.ln-main { padding: var(--space-5) 0 var(--space-4); text-align: center; }
.ln-main-label {
  display: block;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--color-text-sub);
}
.ln-main-num {
  display: block;
  margin: 6px 0 8px;
  font-size: clamp(2.1rem, 6.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ln-ink);
  font-variant-numeric: tabular-nums;
}
.ln-main-sub {
  display: block;
  font-size: .88rem;
  color: var(--color-text-sub);
  line-height: 1.65;
}
.ln-main-sub b { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* 원금·이자 비율 막대 */
.ln-bar { margin-bottom: var(--space-4); }
.ln-bar-track {
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.ln-bar-p { background: var(--ln-ink); }
.ln-bar-i { background: var(--ln-interest); }
.ln-bar-legend {
  display: flex; gap: var(--space-4);
  margin-top: 6px;
  font-size: .78rem;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}
.ln-bar-legend .sw {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 5px;
}
.ln-bar-legend .sw-p { background: var(--ln-ink); }
.ln-bar-legend .sw-i { background: var(--ln-interest); }

/* 요약 항목 줄 */
.ln-rows { display: flex; flex-direction: column; }
.ln-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  grid-template-areas: "label value" "note note";
  gap: 2px var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--ln-rule);
}
.ln-row:last-child { border-bottom: 0; }
.ln-row-label { grid-area: label; font-size: .9rem; color: var(--color-text-sub); }
.ln-row-value {
  grid-area: value;
  text-align: right;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.ln-row-value b { font-weight: 700; }
.ln-row-note {
  grid-area: note;
  font-size: .78rem;
  color: var(--color-text-sub);
  line-height: 1.55;
}
.ln-num-interest { color: var(--ln-interest); }
.ln-num-save { color: var(--ln-save); }
.ln-num-fee { color: var(--ln-fee); }

.ln-result-actions { margin-top: var(--space-4); display: flex; gap: var(--space-2); }
.ln-btn-ghost { font-size: .88rem; }

/* ============================================================
   중도상환 비교 (이 도구의 차별점)
   ============================================================ */
.ln-prepay {
  margin-top: var(--space-5);
  border-left: 3px solid var(--ln-save);
}
.ln-prepay-head h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}
.ln-prepay-head p {
  margin: 0 0 var(--space-5);
  color: var(--color-text-sub);
  font-size: .95rem;
  line-height: 1.7;
  max-width: 62ch;
}
.ln-prepay-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.ln-prepay-out { margin-top: var(--space-5); }
.ln-prepay-idle {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: .9rem;
  color: var(--color-text-sub);
}

/* 판정 문구 */
.ln-verdict {
  background: var(--ln-band);
  border: 1px solid var(--ln-rule);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.ln-verdict-line {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
}
.ln-verdict-line b { font-variant-numeric: tabular-nums; }
.ln-verdict-sub {
  margin: var(--space-2) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
  line-height: 1.7;
}
.ln-verdict-sub b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.ln-verdict-tag {
  display: inline-block;
  border-radius: 3px;
  padding: 2px 8px;
  margin-right: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  vertical-align: 2px;
}
.ln-verdict-tag.t-good { background: var(--ln-save); }
.ln-verdict-tag.t-bad { background: var(--ln-fee); }
.ln-verdict-tag.t-even { background: var(--color-text-sub); }

/* 비교 표 */
.ln-cmp-wrap { overflow-x: auto; }
.ln-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 460px;
}
.ln-cmp th, .ln-cmp td {
  border: 1px solid var(--color-border);
  padding: 9px var(--space-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ln-cmp thead th { background: var(--ln-band); font-size: .82rem; text-align: right; }
.ln-cmp thead th:first-child,
.ln-cmp tbody th { text-align: left; font-weight: 400; color: var(--color-text-sub); white-space: normal; }
.ln-cmp tbody tr:last-child th,
.ln-cmp tbody tr:last-child td { font-weight: 700; }

.ln-prepay-caveat {
  margin: var(--space-4) 0 0;
  font-size: .82rem;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* ============================================================
   회차별 상환표
   ============================================================ */
.ln-sched { margin-top: var(--space-5); }
.ln-sched-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.ln-sched-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
}
.ln-sched-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
.ln-sched-caption {
  margin: 0;
  font-size: .8rem;
  color: var(--color-text-sub);
  font-variant-numeric: tabular-nums;
}
.ln-sched-wrap {
  overflow: auto;
  max-height: 460px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.ln-sched-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.ln-sched-table th, .ln-sched-table td {
  padding: 7px var(--space-3);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
}
.ln-sched-table thead th {
  position: sticky;
  top: 0;
  background: var(--ln-band);
  font-size: .78rem;
  z-index: 1;
}
.ln-sched-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .018); }
:root[data-theme="dark"] .ln-sched-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-sched-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
}
.ln-sched-table .c-no { text-align: left; color: var(--color-text-sub); }
.ln-sched-table .c-int { color: var(--ln-interest); }
.ln-sched-table .c-extra { color: var(--ln-save); font-weight: 700; }
.ln-sched-table .c-fee { color: var(--ln-fee); }
.ln-sched-table .c-bal { color: var(--color-text-sub); }
/* 추가상환·수수료 열은 중도상환안을 볼 때만 */
.ln-sched-table:not(.has-extra) .th-extra,
.ln-sched-table:not(.has-extra) .th-fee { display: none; }

/* ---- 본문 표 ---- */
.ln-table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
.ln-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 520px;
}
.ln-table th, .ln-table td {
  border: 1px solid var(--color-border);
  padding: 9px var(--space-3);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.ln-table th { background: var(--ln-band); font-size: .84rem; }

/* ---- 본문 프로즈(다른 도구와 같은 골격) ---- */
.prose { max-width: 760px; margin: var(--space-6) auto 0; }
.prose h2 { margin: 0 0 var(--space-3); }
.prose h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.1rem; }
.prose p, .prose li { color: var(--color-text); font-size: .95rem; line-height: 1.8; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: var(--space-2); }
.prose code {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .88em;
}
.prose details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.prose summary { cursor: pointer; font-weight: 700; font-size: .95rem; }
.prose details p { margin: var(--space-3) 0 var(--space-1); }

/* 본문 표는 프로즈 너비를 넘겨도 가로 스크롤로 처리 */
.prose .ln-table-wrap { max-width: 100%; }