/* deposit_calculator 전용 디자인(정기예금 증서·이자 계산서·통장 거래내역). 공통: nav·footer·사이드바·광고 스크립트만. */
body[data-tool="deposit_calculator"] {
  --dp-page: #ECEEE8; --dp-paper: #FBF8EE; --dp-paper2: #F3EEDF; --dp-white: #FFFFFF;
  --dp-ink: #16243D; --dp-ink2: #45506A; --dp-mute: #7D8597; --dp-line: #D9D3C1; --dp-line2: #E7E2D3;
  --dp-gl: #2E6A5B; --dp-gl2: #9CC2B5; --dp-red: #C0392B; --dp-blue: #2449A8;
  --dp-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dp-serif: "Nanum Myeongjo", "Noto Serif KR", serif;
  background: var(--dp-page); color: var(--dp-ink); font-family: var(--dp-sans);
}
body[data-tool="deposit_calculator"] .dt-nav { background: var(--dp-page); border-bottom: 1px solid #D8DBD2; }
body[data-tool="deposit_calculator"] .dt-nav .navbar-brand { color: var(--dp-ink); }
.dt-bare { display: block; width: 100%; flex: 1; }
.dpx { max-width: 1100px; margin: 0 auto; padding: 34px 20px 64px; }
.dpx *, .dpx *::before, .dpx *::after { box-sizing: border-box; }

/* hero */
.dp-hero h1 { font-size: 44px; line-height: 1.12; font-weight: 800; letter-spacing: -.035em; margin: 0; color: var(--dp-ink); }
.dp-hero p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--dp-ink2); max-width: 62ch; }

/* mode tabs */
.dp-tabs { display: inline-flex; margin: 26px 0 16px; background: #DFE3DA; border-radius: 10px; padding: 4px; gap: 4px; }
.dp-tabs button { border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--dp-ink2); padding: 9px 16px; border-radius: 7px; cursor: pointer; }
.dp-tabs button[aria-pressed="true"] { background: var(--dp-white); color: var(--dp-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.dp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }

/* certificate */
.dp-cert { position: relative; padding: 10px; border-radius: 6px; background:
  repeating-linear-gradient(45deg, rgba(46,106,91,.16) 0 2px, transparent 2px 7px),
  repeating-linear-gradient(-45deg, rgba(46,106,91,.16) 0 2px, transparent 2px 7px), var(--dp-paper);
  box-shadow: 0 2px 3px rgba(30,40,30,.08), 0 18px 34px rgba(30,40,30,.12); }
.dp-cert-in { position: relative; background:
  radial-gradient(circle at 100% 0, rgba(156,194,181,.22) 0 120px, transparent 121px),
  radial-gradient(circle at 0 100%, rgba(156,194,181,.18) 0 90px, transparent 91px), var(--dp-paper);
  border: 1.5px solid var(--dp-gl); outline: 1px solid var(--dp-gl); outline-offset: -6px; padding: 26px 26px 22px; overflow: hidden; }
.dp-cert-hd { text-align: center; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--dp-gl2); }
.dp-cert-no { position: absolute; right: 18px; top: 14px; font-size: 11px; letter-spacing: .08em; color: var(--dp-gl); font-variant-numeric: tabular-nums; }
.dp-cert-title { font-family: var(--dp-serif); font-size: 30px; font-weight: 800; letter-spacing: .42em; padding-left: .42em; color: var(--dp-ink); margin-top: 6px; }
.dp-f { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px dashed var(--dp-line); }
.dp-l { font-family: var(--dp-serif); font-size: 15px; font-weight: 800; color: var(--dp-gl); padding-top: 9px; letter-spacing: .04em; }
.dp-v { min-width: 0; }
.dp-amt { display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--dp-ink); }
.dp-amt input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 30px; font-weight: 800; color: var(--dp-ink); padding: 2px 0 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dp-amt input:focus { outline: none; }
.dp-amt span { font-size: 18px; font-weight: 700; color: var(--dp-ink2); }
.dp-amt:focus-within { border-bottom-color: var(--dp-blue); }
.dp-hg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 6px; font-size: 13px; }
.dp-hg span { font-family: var(--dp-serif); font-weight: 700; color: var(--dp-ink2); word-break: keep-all; overflow-wrap: anywhere; }
.dp-hg em { font-style: normal; color: var(--dp-mute); font-variant-numeric: tabular-nums; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dp-chips button { border: 1px solid var(--dp-line); background: rgba(255,255,255,.6); color: var(--dp-ink2); font: inherit; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.dp-chips button:hover { border-color: var(--dp-ink); color: var(--dp-ink); }
.dp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dp-num { display: inline-flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--dp-ink); }
.dp-num input { width: 90px; border: 0; background: transparent; font: inherit; font-size: 24px; font-weight: 800; color: var(--dp-ink); padding: 2px 0 4px; text-align: right; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.dp-num input::-webkit-outer-spin-button, .dp-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dp-num input:focus { outline: none; }
.dp-num span { font-size: 15px; font-weight: 700; color: var(--dp-ink2); }
.dp-num:focus-within { border-bottom-color: var(--dp-blue); }
.dp-rate input { width: 74px; }

.dp-seg { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--dp-ink); border-radius: 8px; overflow: hidden; background: var(--dp-white); }
.dp-seg button { border: 0; border-left: 1.5px solid var(--dp-ink); background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--dp-ink); padding: 8px 13px; cursor: pointer; white-space: nowrap; line-height: 1.25; }
.dp-seg button:first-child { border-left: 0; }
.dp-seg button small { display: block; font-size: 11px; font-weight: 600; color: var(--dp-mute); }
.dp-seg button[aria-pressed="true"] { background: var(--dp-ink); color: var(--dp-paper); }
.dp-seg button[aria-pressed="true"] small { color: #BFC8D9; }
.dp-seg button:disabled { color: #B9BDC6; cursor: not-allowed; background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(0,0,0,.04) 4px 8px); }
.dp-seg button:focus-visible, .dp-tabs button:focus-visible, .dp-chips button:focus-visible { outline: 2px solid var(--dp-blue); outline-offset: 2px; }
.dp-seg-sm button { padding: 6px 12px; font-size: 13px; }
.dp-cap { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--dp-mute); }
.dp-cert-ft { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding: 14px 70px 0 0; font-variant-numeric: tabular-nums; }
.dp-cert-ft span { font-family: var(--dp-serif); font-size: 13px; font-weight: 800; color: var(--dp-gl); margin-right: 6px; }
.dp-cert-ft b { font-size: 15px; }
.dp-cert-term { width: 100%; font-size: 13px; color: var(--dp-ink2); }
.dp-cert-sum { display: none; }
.dp-seal { position: absolute; right: 18px; bottom: 16px; width: 60px; height: 60px; border: 3px solid var(--dp-red); border-radius: 50%; display: grid; place-items: center; transform: rotate(-12deg); opacity: .82; }
.dp-seal span { font-family: var(--dp-serif); font-weight: 800; font-size: 14px; line-height: 1.1; text-align: center; color: var(--dp-red); }

/* slip (이자 계산서) */
.dp-slip { position: sticky; top: 16px; background: var(--dp-white); padding: 24px 24px 22px; border-radius: 3px; box-shadow: 0 2px 3px rgba(30,40,30,.08), 0 14px 26px rgba(30,40,30,.1);
  background-image: radial-gradient(circle at 7px 0, var(--dp-page) 5px, transparent 5.5px), radial-gradient(circle at 7px 100%, var(--dp-page) 5px, transparent 5.5px);
  background-size: 14px 9px, 14px 9px; background-repeat: repeat-x, repeat-x; background-position: 0 0, 0 100%; }
.dp-slip-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--dp-ink); padding: 4px 0 10px; }
.dp-slip-hd b { font-family: var(--dp-serif); font-size: 20px; font-weight: 800; letter-spacing: .2em; }
.dp-slip-hd span { font-size: 13px; color: var(--dp-mute); text-align: right; }
.dp-need { padding: 14px 0 10px; border-bottom: 1px dashed var(--dp-line); }
.dp-need span { display: block; font-size: 13px; font-weight: 700; color: var(--dp-blue); }
.dp-need b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--dp-blue); font-variant-numeric: tabular-nums; }
.dp-need i, .dp-total i { font-style: normal; font-size: .55em; margin-left: 2px; }
.dp-need em { font-style: normal; font-size: 13px; color: var(--dp-mute); }
.dp-lines { margin: 8px 0 0; padding: 0; }
.dp-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.dp-lines dt { color: var(--dp-ink2); }
.dp-lines dd { margin: 0; font-weight: 700; }
.dp-lines .dp-tax { padding: 4px 0 4px 12px; font-size: 14px; }
.dp-lines .dp-tax dt, .dp-lines .dp-tax dd { color: var(--dp-red); font-weight: 600; }
.dp-lines .dp-net { border-top: 1px solid var(--dp-line); margin-top: 4px; padding-top: 9px; }
.dp-lines .dp-net dd { color: var(--dp-gl); font-size: 17px; }
.dp-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding: 12px 0; border-top: 3px double var(--dp-ink); border-bottom: 3px double var(--dp-ink); }
.dp-total span { font-size: 15px; font-weight: 800; }
.dp-total b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.dp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dp-kpis div { background: var(--dp-paper2); border-radius: 6px; padding: 9px 10px; min-width: 0; }
.dp-kpis span { display: block; font-size: 12px; color: var(--dp-mute); }
.dp-kpis b { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dp-note { margin: 12px 0 0; font-size: 13px; color: var(--dp-red); }
.dp-basis { margin: 12px 0 0; font-size: 12px; color: var(--dp-mute); }

/* compare cards */
.dp-more { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.dp-card { background: var(--dp-white); border-radius: 8px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(30,40,30,.06); min-width: 0; }
.dp-ch { font-size: 17px; font-weight: 800; margin: 0 0 10px; letter-spacing: -.01em; }
.dp-tbl { overflow-x: auto; }
.dp-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.dp-tbl th { font-size: 12px; font-weight: 700; color: var(--dp-mute); text-align: right; padding: 6px 0 6px 10px; border-bottom: 1.5px solid var(--dp-ink); white-space: nowrap; }
.dp-tbl th:first-child, .dp-tbl td:first-child { text-align: left; padding-left: 0; }
.dp-tbl td { text-align: right; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--dp-line2); white-space: nowrap; }
.dp-tbl td em { font-style: normal; color: var(--dp-mute); font-size: 12px; }
.dp-tbl tr.on td { font-weight: 800; background: #EEF4F1; }
.dp-tbl tr.on td:first-child { box-shadow: inset 3px 0 0 var(--dp-gl); padding-left: 8px; }
.dp-pkin { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dp-pkin label { font-size: 14px; font-weight: 700; color: var(--dp-ink2); }
.dp-pkin .dp-num input { font-size: 20px; }
.dp-pk-row { display: grid; gap: 6px; }
.dp-pk-row div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--dp-line2); font-size: 14px; font-variant-numeric: tabular-nums; }
.dp-pk-row span { color: var(--dp-ink2); }
.dp-pk-row b { font-weight: 800; white-space: nowrap; }
.dp-pk-row div:last-child { border-bottom: 0; }
.dp-pk-row .up b { color: var(--dp-gl); }
.dp-pk-row .down b { color: var(--dp-blue); }

/* passbook */
.dp-book { margin-top: 22px; background: var(--dp-white); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(30,40,30,.06); }
.dp-book-hd { display: flex; align-items: baseline; gap: 12px; background: var(--dp-gl); color: #fff; padding: 11px 20px; }
.dp-book-hd b { font-size: 16px; font-weight: 800; letter-spacing: .1em; }
.dp-book-hd span { font-size: 13px; opacity: .85; }
.dp-book-tbl { overflow-x: auto; max-height: 460px; overflow-y: auto; }
.dp-book-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.dp-book-tbl tbody tr:nth-child(even) td { background: #F8FAF7; }
.dp-book-tbl th { position: sticky; top: 0; background: #F5F8F6; font-size: 12px; font-weight: 700; color: var(--dp-gl); text-align: right; padding: 8px 16px; border-bottom: 1px solid var(--dp-gl2); white-space: nowrap; }
.dp-book-tbl th:nth-child(-n+2), .dp-book-tbl td:nth-child(-n+2) { text-align: left; }
.dp-book-tbl td { text-align: right; padding: 9px 16px; border-bottom: 1px solid #EEF1EC; white-space: nowrap; }
.dp-book-tbl td small { display: block; font-size: 11px; color: var(--dp-mute); }
.dp-book-tbl td:nth-child(3) { color: var(--dp-red); }
.dp-book-tbl td:nth-child(4) { color: var(--dp-blue); }
.dp-book-tbl tr.end td { font-weight: 800; border-top: 1.5px solid var(--dp-ink); }
.dp-book-tbl tr.dp-gap td { text-align: center; color: var(--dp-mute); font-size: 13px; }

/* ad */
.dp-article .dt-ad, .dpx > .dt-ad { margin: 36px 0; }

/* article */
.dp-article, .dp-faq, .dp-links { max-width: 760px; margin: 0 auto; }
.dp-article { margin-top: 56px; font-size: 17px; line-height: 1.8; color: var(--dp-ink2); word-break: keep-all; }
.dp-article h2, .dp-faq h2, .dp-links h2 { font-size: 27px; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; color: var(--dp-ink); margin: 56px 0 14px; }
.dp-article h2:first-child { margin-top: 0; }
.dp-article h3 { font-size: 19px; font-weight: 800; color: var(--dp-ink); margin: 28px 0 8px; }
.dp-article p { margin: 0 0 14px; }
.dp-article b { color: var(--dp-ink); }
.dp-article a { color: var(--dp-blue); }
.dp-article ul { padding-left: 1.2em; margin: 0 0 16px; }
.dp-article li { margin: 6px 0; }
.dp-tw { overflow-x: auto; margin: 14px 0 22px; background: var(--dp-white); border-radius: 6px; padding: 4px 16px; box-shadow: 0 1px 2px rgba(30,40,30,.06); }
.dp-tw table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.dp-tw th { font-size: 13px; font-weight: 700; color: var(--dp-mute); text-align: right; padding: 10px 0 8px 12px; border-bottom: 1.5px solid var(--dp-ink); white-space: nowrap; }
.dp-tw td { text-align: right; padding: 9px 0 9px 12px; border-bottom: 1px solid var(--dp-line2); color: var(--dp-ink); white-space: nowrap; }
.dp-tw th:first-child, .dp-tw td:first-child { text-align: left; padding-left: 0; }
.dp-tw tr:last-child td { border-bottom: 0; }
.dp-narrow { max-width: 420px; }
.dp-src { font-size: 15px; }

/* faq */
.dp-q { border-bottom: 1px solid #D5D9CF; }
.dp-q summary { list-style: none; cursor: pointer; padding: 16px 32px 16px 0; position: relative; font-size: 17px; font-weight: 700; color: var(--dp-ink); }
.dp-q summary::-webkit-details-marker { display: none; }
.dp-q summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 22px; color: var(--dp-mute); }
.dp-q[open] summary::after { content: "\2212"; }
.dp-q p { margin: 0 0 18px; font-size: 16px; line-height: 1.75; color: var(--dp-ink2); }

/* links */
.dp-links > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dp-links a { display: block; text-decoration: none; padding: 13px 16px; border: 1px solid #D5D9CF; border-radius: 8px; color: var(--dp-ink); background: rgba(255,255,255,.65); }
.dp-links a:hover { border-color: var(--dp-ink); }
.dp-links b { display: block; font-size: 15px; }
.dp-links span { display: block; font-size: 13px; color: var(--dp-mute); margin-top: 2px; }

@media (max-width: 900px) {
  .dp-grid, .dp-more { grid-template-columns: minmax(0, 1fr); }
  .dp-slip { position: relative; top: auto; }
  .dp-cert-sum { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--dp-gl2); }
  .dp-cert-sum b { font-size: 20px; font-weight: 800; color: var(--dp-gl); }
}
@media (max-width: 600px) {
  .dpx { padding: 22px 16px 48px; }
  .dp-hero h1 { font-size: 32px; }
  .dp-hero p { font-size: 15px; }
  .dp-tabs { display: flex; width: 100%; }
  .dp-tabs button { flex: 1; padding: 9px 6px; font-size: 14px; }
  .dp-cert { padding: 7px; }
  .dp-cert-in { padding: 22px 14px 18px; }
  .dp-cert-title { font-size: 24px; letter-spacing: .3em; padding-left: .3em; }
  .dp-cert-no { right: 12px; top: 8px; font-size: 10px; }
  .dp-f { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dp-l { padding-top: 0; font-size: 14px; }
  .dp-amt input { font-size: 26px; }
  .dp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .dp-chips::-webkit-scrollbar { display: none; }
  .dp-chips button { flex: none; }
  .dp-seg { display: flex; width: 100%; }
  .dp-seg button { flex: 1; padding: 8px 6px; font-size: 13px; }
  .dp-seg-sm { width: auto; }
  .dp-seg-tax { display: grid; grid-template-columns: 1fr 1fr; }
  .dp-seg-tax button { border-left: 0; border-top: 1.5px solid var(--dp-ink); }
  .dp-seg-tax button:nth-child(-n+2) { border-top: 0; }
  .dp-seg-tax button:nth-child(even) { border-left: 1.5px solid var(--dp-ink); }
  .dp-slip { padding: 22px 16px 20px; }
  .dp-total b { font-size: 26px; }
  .dp-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dp-kpis div:first-child { grid-column: 1 / -1; }
  .dp-card { padding: 16px 14px; }
  .dp-book-tbl table, .dp-tbl table { font-size: 12.5px; }
  .dp-book-tbl th, .dp-book-tbl td { padding: 8px 6px; }
  .dp-book-tbl th:first-child, .dp-book-tbl td:first-child { padding-left: 12px; }
  .dp-tbl th, .dp-tbl td { padding-left: 6px; }
  .dp-article { font-size: 16px; }
  .dp-article h2, .dp-faq h2, .dp-links h2 { font-size: 22px; margin-top: 44px; }
  .dp-tw { padding: 4px 12px; }
  .dp-tw table { font-size: 13px; }
  .dp-tw th, .dp-tw td { padding-left: 8px; }
  .dp-links > div { grid-template-columns: minmax(0, 1fr); }
}