/* [Define404] */
/* 베트남 개발팀 도입 자료(/vietnam-dev-team/): 리포트 글 틀(report.css) 위에 옮겨 온 글 본문 요소와 계산기만 더한다.
   토큰은 site.css 그대로. 그림자·그라디언트 없음, 선 1px, 모서리 2px */

/* 목록 */
.vd-list .rp-head h1 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.25; word-break: keep-all; max-width: 15em; }
.vd-moved { font-size: var(--fs-small) !important; color: var(--ink-3) !important; margin-top: var(--s4) !important; }
.vd-calc-card { display: grid; gap: var(--s2); max-width: 760px; padding: var(--s5); margin-bottom: var(--s8); border: var(--bw) solid var(--ink-1); border-radius: var(--r-sm); background: var(--paper-raised); word-break: keep-all; }
.vd-calc-card b { font-size: clamp(22px, 2.4vw, 28px); font-weight: 740; letter-spacing: -0.02em; line-height: 1.3; }
.vd-calc-card span:last-child { color: var(--ink-2); }
.vd-calc-card:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--sky); }
.vd-group { margin-top: var(--s8); }
.vd-group h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 740; letter-spacing: -0.02em; margin-bottom: var(--s4); }
.vd-list .rp-item a { grid-template-columns: minmax(0, 1fr) auto; }
.vd-list .rp-title { font-size: clamp(19px, 2vw, 24px); word-break: keep-all; }
.vd-list .rp-sum { grid-column: 1 / -1; }
.vd-list-note { margin-top: var(--s8); max-width: 760px; }
.vd-list-note a { color: var(--sky-ink); border-bottom: var(--bw) solid currentColor; margin-left: var(--s2); }
@media (max-width: 720px) { .vd-list .rp-item a { grid-template-columns: minmax(0, 1fr); } }

/* 글 머리 */
.vd .ar-head h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.28; word-break: keep-all; }
.vd-lead { color: var(--ink-1); font-size: var(--fs-lead); line-height: 1.65; margin-bottom: var(--s5); word-break: keep-all; }

/* 목차 */
.vd-toc { max-width: 760px; margin-top: var(--s6); padding: var(--s4) var(--s5); border: var(--bw) solid var(--line-1); border-radius: var(--r-sm); background: var(--paper-raised); }
.vd-toc-title { font-size: var(--fs-small); font-weight: 700; color: var(--ink-1); }
.vd-toc ol { margin-top: var(--s2); padding-left: 1.4em; list-style: decimal; display: grid; gap: 4px; }
.vd-toc li { color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.vd-toc a { color: var(--ink-2); }
.vd-toc a:hover { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }

/* 옮겨 온 본문 요소 */
.vd-body { word-break: keep-all; }
.vd-body h2 { scroll-margin-top: calc(var(--head-h) + var(--s4)); }
.vd-body ul, .vd-body ol { padding-left: 1.3em; display: grid; gap: var(--s2); }
.vd-body ul { list-style: disc; }
.vd-body ol { list-style: decimal; }
.vd-body li > ul, .vd-body li > ol { margin-top: var(--s2); }
.vd-body hr { border: 0; border-top: var(--bw) solid var(--line-1); margin: var(--s7) 0 0; }
.vd-body blockquote { border-left: 2px solid var(--sky-ink); padding: var(--s2) var(--s4); background: var(--paper-raised); }
.vd-body blockquote p { color: var(--ink-1); }
.vd-body figure { margin: var(--s6) 0 0; }
.vd-body figure img { display: block; width: 100%; height: auto; border: var(--bw) solid var(--line-1); border-radius: var(--r-sm); background: var(--paper-sunk); }
.vd-body figcaption { padding-top: var(--s2); font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.vd-body pre { overflow-x: auto; padding: var(--s4); border: var(--bw) solid var(--line-1); border-radius: var(--r-sm); background: var(--paper-raised); font-size: 14px; line-height: 1.6; }
.vd-body pre code { overflow-wrap: normal; white-space: pre; font-size: 14px; }
.vd-body :not(pre) > code { padding: 0 4px; background: var(--paper-sunk); border-radius: var(--r-sm); }
.vd-body a { overflow-wrap: anywhere; }

/* 표: 넓으면 표 안에서만 옆으로 민다 */
.vd-body .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: var(--bw) solid var(--ink-1); margin-top: var(--s5); }
.vd-body .table-scroll table { width: 100%; border-collapse: collapse; font-size: 15px; font-feature-settings: "tnum" 1; }
.vd-body .table-scroll th, .vd-body .table-scroll td { text-align: left; padding: 10px 12px 10px 0; border-bottom: var(--bw) solid var(--line-1); vertical-align: top; color: var(--ink-2); line-height: 1.5; min-width: 5.5em; }
.vd-body .table-scroll th { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.vd-body .table-scroll td:first-child { color: var(--ink-1); font-weight: 600; }
.vd-body .table-scroll th[align="right"], .vd-body .table-scroll td[align="right"] { text-align: right; }
@media (max-width: 480px) { .vd-body .table-scroll th, .vd-body .table-scroll td { font-size: 13px; } }

/* 글 끝 안내 */
.vd-cta-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: auto; }
.vd-cta .btn { margin-top: auto; }
.vd-disclosure { grid-column: 1 / -1; font-size: var(--fs-small) !important; color: var(--ink-3) !important; }
.vd-more { max-width: 760px; margin-top: var(--s8); }
.vd-more ul { margin-top: var(--s3); border-top: var(--bw) solid var(--line-1); }
.vd-more li { border-bottom: var(--bw) solid var(--line-1); }
.vd-more li a { display: block; padding: var(--s4) 0; word-break: keep-all; }
.vd-more b { font-weight: 650; color: var(--ink-1); }
.vd-more li a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sky); }
.vd-more-all { margin-top: var(--s4); font-size: var(--fs-small); }
.vd-more-all a { color: var(--sky-ink); border-bottom: var(--bw) solid currentColor; }

/* 계산기 */
.vd-calc { max-width: 760px; margin-top: var(--s6); padding: var(--s5); border: var(--bw) solid var(--ink-1); border-radius: var(--r-sm); background: var(--paper-raised); }
.vd-calc-scroll { overflow-x: auto; }
.vd-calc-table { width: 100%; border-collapse: collapse; font-feature-settings: "tnum" 1; }
.vd-calc-table th, .vd-calc-table td { text-align: left; padding: 8px 8px 8px 0; border-bottom: var(--bw) solid var(--line-1); vertical-align: middle; }
.vd-calc-table thead th { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.vd-calc-table tbody th { font-weight: 650; color: var(--ink-1); font-size: 15px; word-break: keep-all; }
.vd-calc input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: var(--bw) solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink-1); font: inherit; font-size: 15px; font-feature-settings: "tnum" 1; }
.vd-calc input:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--ink-1); }
.vd-calc-table td:last-child { width: 5.5em; }
.vd-calc-table td:nth-child(2) { width: 46%; }
.vd-calc-rate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s5); font-size: 15px; color: var(--ink-2); }
.vd-calc-rate input { width: 7em; }
.vd-calc-note { margin-top: var(--s2); font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.vd-calc-result { margin-top: var(--s5); border-top: var(--bw) solid var(--ink-1); }
.vd-calc-row { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: var(--bw) solid var(--line-1); color: var(--ink-2); }
.vd-calc-row b { color: var(--ink-1); font-weight: 700; font-feature-settings: "tnum" 1; text-align: right; }
.vd-calc-total b { font-size: clamp(20px, 2.4vw, 26px); }
.vd-calc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s5); }
@media (max-width: 480px) {
  .vd-calc { padding: var(--s4); }
  .vd-calc-table td:nth-child(2) { width: auto; }
  .vd-calc-table tbody th { font-size: 14px; }
}
