/* 예금·적금 이자 계산기 (savings.css) — core.css 다음에. 공통 모양은 core.css, 여기엔 이 계산기에만 쓰는 것
   예금 = 파랑(--lc-blue) · 적금 = 청록(--sv-teal). PC 는 예금·적금을 좌우로, 폰(640px 아래)은 위아래로 */
.lc { --sv-teal: #0d9488; --sv-teal-ink: #0f766e; --sv-teal-bg: #f0fdfa; }
.lc .sv-nb { white-space: nowrap; }
.lc .lc-max { font-size: 12px; font-weight: 700; color: #c2410c; }
/* 입력: 예금 상자 · 적금 상자 */
.lc .sv-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lc .sv-box { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 16px 16px 18px; border: 1px solid var(--lc-line); border-radius: 16px; background: #fff; }
.lc .sv-d { border-top: 3px solid var(--lc-blue); }
.lc .sv-i { border-top: 3px solid var(--sv-teal); }
.lc .sv-bt { display: flex; align-items: baseline; gap: 8px; }
.lc .sv-bt i, .lc .sv-ch i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lc-blue); transform: translateY(-1px); }
.lc .sv-i .sv-bt i, .lc .sv-card.sv-i .sv-ch i { background: var(--sv-teal); }
.lc .sv-bt b { font-size: 17px; }
.lc .sv-bt span { font-size: 13px; color: var(--lc-muted); font-weight: 600; }
.lc .sv-i .lc-ch.on, .lc .sv-i .lc-tabs button.on { background: var(--sv-teal); box-shadow: 0 1px 3px rgba(13, 148, 136, .3); }
.lc .sv-i .lc-fld:focus-within { border-color: var(--sv-teal); box-shadow: 0 0 0 3px #ccfbf1; }
.lc .sv-i .lc-ko { color: var(--sv-teal-ink); }
.lc .lc-tabs { flex: none; }
/* 금리 + 단리·월복리 한 줄 (칸이 모자라면 단리·월복리만 아래 줄로) */
.lc .sv-rrow { flex-wrap: wrap; row-gap: 8px; }
.lc .sv-rrow .lc-fld { flex: 1 1 152px; padding: 0 8px; gap: 4px; }
.lc .sv-rrow .lc-ib { width: 30px; height: 30px; }
.lc .sv-rrow .lc-fld input { min-width: 58px; }
.lc .sv-comp button { min-width: 0; padding: 0 9px; }
/* 세금 */
.lc .sv-taxs { align-self: stretch; }
.lc .sv-taxs button { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 4px 6px; line-height: 1.25; }
.lc .sv-taxs button b { display: block; font-size: 14px; }
.lc .sv-taxs button span { display: block; font-size: 12px; font-weight: 600; opacity: .8; }
.lc .sv-taxp { display: flex; flex-direction: column; gap: 8px; }
.lc .sv-taxp[hidden] { display: none; }
.lc .sv-taxp .lc-row { align-items: center; flex-wrap: wrap; }
.lc .sv-taxf { width: 120px; flex: none; }
/* 결과 카드 */
.lc .sv-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lc .sv-card { min-width: 0; padding: 16px 18px 14px; border: 1px solid var(--lc-line); border-radius: 16px; background: #fff; }
.lc .sv-ch { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lc .sv-ch b { font-size: 16px; }
.lc .sv-ch span { font-size: 13px; color: var(--lc-muted); }
.lc .sv-l { margin-top: 10px !important; font-size: 13px; font-weight: 700; color: var(--lc-muted); }
.lc .sv-big { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; white-space: nowrap; color: var(--lc-blue-ink); }
.lc .sv-card.sv-i .sv-big { color: var(--sv-teal-ink); }
.lc .sv-rows { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed #d0d7de; font-size: 14px; }
.lc .sv-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; }
.lc .sv-rows dt { color: var(--lc-muted); white-space: nowrap; }
.lc .sv-rows dt small { font-size: 12px; }
.lc .sv-rows dd { margin: 0; font-weight: 600; white-space: nowrap; }
.lc .sv-rows .sv-minus { color: #b42318; }
.lc .sv-rows .sv-post dt, .lc .sv-rows .sv-post dd { color: #1f2328; font-weight: 700; }
.lc .sv-per { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px !important; padding: 9px 12px; border-radius: 10px; background: #eff6ff; font-size: 14px; }
.lc .sv-per span { font-weight: 700; color: var(--lc-blue-ink); }
.lc .sv-per b { font-size: 17px; white-space: nowrap; }
.lc .sv-card.sv-i .sv-per { background: var(--sv-teal-bg); }
.lc .sv-card.sv-i .sv-per span { color: var(--sv-teal-ink); }
.lc .sv-wait { margin-top: 10px !important; font-size: 15px; color: var(--lc-muted); }
/* 합계 */
.lc .sv-tot { margin-top: 12px; padding: 14px 18px; border: 1px solid #e0e7ff; border-radius: 16px; background: #f7f8ff; color: var(--lc-navy); }
.lc .sv-tot p:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lc .sv-tot p:first-child span { font-size: 14px; font-weight: 700; color: #3f4a8a; }
.lc .sv-tot b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.lc .sv-tot-s { margin-top: 2px !important; font-size: 13px; color: #5b6597; }
.lc .sv-tot-s span { white-space: nowrap; }
/* 적금 회차별 표 */
.lc .sv-tbl { padding: 4px 16px 16px; border-top: 1px solid var(--lc-line); }
.lc .sv-tbl { overflow-x: auto; }
.lc .sv-tcap { margin: 10px 0 2px !important; font-size: 13px; color: var(--lc-muted); }
.lc .sv-tr { display: grid; grid-template-columns: 3.6em 1fr 1.4fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid #eef0f2; font-size: 14px; }
.lc .sv-tr span { white-space: nowrap; text-align: right; }
.lc .sv-tr span:first-child { text-align: left; }
.lc .sv-th { font-size: 12px; font-weight: 700; color: var(--lc-muted); }
.lc .sv-tf { border-bottom: 0; font-weight: 800; }
.lc .sv-more { width: 100%; margin: 10px 0 4px; }
.lc .sv-tnote { margin-top: 6px !important; }
/* PC: 좌우로 */
@media (min-width: 640px) {
  .lc .sv-cols, .lc .sv-cards { grid-template-columns: 1fr 1fr; }
  .lc .sv-cards .sv-card:only-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .lc .sv-box { padding: 14px 12px 16px; }
  .lc .sv-card { padding: 14px 14px 12px; }
  .lc .sv-tr { font-size: 13px; gap: 4px; }
}