:root{--ink:#202a38;--green:#243d57;--lime:#d5bd8e;--cream:#f6f4ef;--line:#e7e2d8}*{box-sizing:border-box}html{min-height:100%;background:var(--cream)}body{margin:0;color:var(--ink);font-family:'Noto Sans KR',sans-serif;letter-spacing:-.035em;background:var(--cream);min-height:100vh}.topbar{height:76px;padding:0 max(24px,calc((100vw - 1120px)/2));border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}.brand img{display:block;width:142px;height:auto}.mark{width:32px;height:32px;border-radius:11px;object-fit:cover}.back{color:#607067;font-size:12px;text-decoration:none}.page{max-width:1000px;padding:27px 24px 60px;margin:auto}.crumb{display:flex;gap:9px;align-items:center;color:#596775;font-size:11px}.crumb a{color:#607267;text-decoration:none}.intro{padding:37px 0 25px}.eyebrow{font:700 10px 'DM Sans',sans-serif;letter-spacing:.16em;color:#596775;text-transform:uppercase}.intro h1{font-size:36px;line-height:1.25;letter-spacing:-.07em;margin:10px 0 8px}.intro p{color:#596775;font-size:13px;line-height:1.7;margin:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:17px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:24px;box-shadow:0 10px 30px #1b342307}.panel h2{font-size:16px;letter-spacing:-.05em;margin:0}.sub{font-size:11px;color:#596775;margin:6px 0 20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px 12px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label{font-size:11px;font-weight:600;color:#535f6e}.control{height:47px;border:1px solid #e3e8e1;border-radius:9px;background:#fbfaf7;padding:0 12px;font-size:14px;color:#26362c;width:100%;outline:none}.control:focus{border-color:#82a58c;box-shadow:0 0 0 3px #eaf0f4}.unit-wrap{position:relative}.unit-wrap .control{padding-right:45px}.unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;color:#596775;pointer-events:none}.calc-button{width:100%;margin-top:20px;border:0;border-radius:10px;height:49px;background:var(--green);color:#fff;font-weight:700;font-size:13px;cursor:pointer}.calc-button:hover{background:#345778}.calc-button span{float:right;font-size:18px;line-height:13px}.small-note{font-size:10px;color:#596775;text-align:center;margin:12px 0 0}.result-panel{background:#fcfbf8}.result-top{display:flex;justify-content:space-between;align-items:center}.result-icon{width:28px;height:28px;border-radius:9px;background:#e9eef2;color:#546e86;display:grid;place-items:center}.result-empty{min-height:185px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#596775}.result-empty span{font-size:32px;color:#cbd7e1}.result-empty p{font-size:12px;line-height:1.8;text-align:center}.result-main{margin:19px 0 15px;padding:18px;border-radius:12px;background:#edf1f4}.result-label{font-size:10px;color:#596775}.result-value{font:700 clamp(23px,3vw,30px) 'DM Sans','Noto Sans KR',sans-serif;letter-spacing:-.06em;color:#324f6c;margin-top:7px;overflow-wrap:anywhere}.rows{border-top:1px solid #e7edf2}.row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #e7edf2;padding:11px 1px;font-size:11px}.row span:first-child{color:#596775}.row strong{font-weight:600;text-align:right;overflow-wrap:anywhere}.notice{margin-top:22px;padding-top:15px;border-top:1px solid var(--line)}.notice b{font-size:10px;color:#566576}.notice p{font-size:10px;line-height:1.8;color:#596775;margin:6px 0 0}.mobile-back{display:none}footer{max-width:1000px;margin:0 auto;padding:20px 24px 30px;color:#596775;font-size:10px;border-top:1px solid var(--line)}@media(max-width:720px){.brand img{width:132px}.topbar{height:64px;padding:0 18px}.page{padding:20px 16px 35px}.crumb{font-size:10px;gap:6px}.intro{padding:29px 0 20px}.intro h1{font-size:29px}.intro p{font-size:12px}.layout{grid-template-columns:1fr;gap:12px}.panel{padding:19px 17px;border-radius:14px}.fields{grid-template-columns:1fr;gap:13px}.field label{font-size:12px}.control{height:50px;font-size:16px}.calc-button{height:52px;font-size:14px;margin-top:17px}.result-empty{min-height:120px}.result-main{padding:16px}.result-value{font-size:26px}.notice{margin-top:17px}.mobile-back{display:block;text-align:center;text-decoration:none;color:#526981;padding:15px;font-size:12px;border:1px solid #e0e5e9;border-radius:11px;margin-top:14px;background:#fff}footer{padding:18px 16px 25px;line-height:1.7}.back{font-size:11px}}@media(max-width:360px){.brand{font-size:13px}.back{font-size:10px}.panel{padding:16px 14px}.intro h1{font-size:26px}}

.footer-partner{width:min(100%,680px);margin:18px auto 14px;overflow:hidden}.footer-partner iframe{display:block;width:100%!important;max-width:680px;margin:0 auto}

/* Shared calculator polish */
.topbar{position:sticky;top:0;z-index:20;background:rgba(246,244,239,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:#e2ddd2}
.brand img{width:148px}
.back{padding:10px 14px;border:1px solid #ded9cf;border-radius:999px;background:#ffffffa8;transition:background .18s ease,border-color .18s ease}
.back:hover{background:#fff;border-color:#c9b78f}
.page{max-width:1040px;padding-top:34px;padding-bottom:72px}
.crumb{letter-spacing:0}
.intro{padding:42px 0 29px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#596775}
.eyebrow:before{content:"";width:21px;height:1px;background:#b49c6e}
.intro h1{font-weight:700;letter-spacing:-.06em}
.intro p{color:#596775}
.panel{border-color:#e7e3da;border-radius:20px;padding:26px;box-shadow:0 16px 42px #202a3809}
.form-panel{background:linear-gradient(160deg,#fff 0%,#fdfcf9 100%)}
.result-panel{background:linear-gradient(155deg,#fbfaf7 0%,#f2f3f1 100%)}
.panel h2{font-size:17px}
.sub{font-size:12px;line-height:1.65;margin:7px 0 22px}
.fields{gap:17px 13px}
.field label{color:#465565;font-size:12px}
.control{border-color:#e0e3df;border-radius:11px;background:#fcfbf8;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.control:hover{border-color:#c9cfcf;background:#fff}
.control:focus{border-color:#ad966b;box-shadow:0 0 0 4px #d5bd8e26;background:#fff}
.calc-button{height:51px;border-radius:11px;background:linear-gradient(110deg,#243d57,#314f6b);box-shadow:0 8px 20px #243d571b;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.calc-button:hover{background:linear-gradient(110deg,#2b4965,#3b5a75);box-shadow:0 11px 24px #243d5726;transform:translateY(-1px)}
.calc-button:active{transform:translateY(0)}
.result-main{background:linear-gradient(135deg,#e9eef1,#f0f1ed);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff}
.result-value{color:#243d57}
.notice{background:#f7f6f2;border:1px solid #ebe8df;border-radius:12px;padding:15px;margin-top:20px}
.notice p{font-size:11px}
.mobile-back{border-color:#e2ded5;color:#425c73;box-shadow:0 4px 15px #202a3807}
footer{border-top-color:#e2ddd2}
.back:focus-visible,.calc-button:focus-visible,.control:focus-visible,.mobile-back:focus-visible{outline:3px solid #d5bd8e;outline-offset:3px}
@media(min-width:960px){.result-panel{position:sticky;top:100px}}
@media(max-width:720px){.topbar{height:68px}.brand img{width:136px}.page{padding-top:25px;padding-bottom:48px}.intro{padding:33px 0 23px}.panel{border-radius:17px;padding:21px 18px}.result-panel{box-shadow:0 12px 30px #202a3808}.fields{gap:15px}.control{border-radius:12px}.calc-button{height:53px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Readability and brand scale audit */
body{letter-spacing:-.015em;line-height:1.65}
.brand img{width:132px}
.intro h1{letter-spacing:-.04em;line-height:1.3}
.intro p{font-size:14px;line-height:1.8}
.panel h2{letter-spacing:-.03em;line-height:1.45}
.sub{font-size:13px;line-height:1.75}
.field label{font-size:13px;line-height:1.5}
.control{letter-spacing:-.01em}
.unit{font-size:11px}
.calc-button{font-size:14px;letter-spacing:-.01em}
.small-note{font-size:11px;line-height:1.65}
.result-label{font-size:11px;line-height:1.5}
.row{font-size:12px;line-height:1.6}
.notice b{font-size:11px}
.notice p{font-size:12px;line-height:1.8}
.action-status{font-size:11px;line-height:1.55}
.reset-button,.share-button{font-size:12px}
footer{font-size:11px;line-height:1.8}
.guide-index-head h1,.guide-article-head h1{letter-spacing:-.04em;line-height:1.4}
.guide-index-head p,.guide-article-head>p{font-size:15px;line-height:1.9}
.article-section h2{letter-spacing:-.035em;line-height:1.5}
.article-section p{font-size:14px;line-height:1.9}
@media(max-width:720px){.brand img{width:120px}.intro h1{font-size:30px;line-height:1.35}.intro p{font-size:14px}.field label{font-size:13px}.notice p{font-size:12px;line-height:1.85}.article-section p{font-size:13px;line-height:1.9}.guide-index-head p,.guide-article-head>p{font-size:14px}}
@media(max-width:360px){.brand img{width:112px}.intro h1{font-size:27px}}

.calculator-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:30px}
.reset-button,.share-button{border:1px solid #e2ded5;background:#fff;color:#526579;border-radius:9px;padding:8px 11px;font-size:11px;font-weight:600;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.reset-button:hover,.share-button:hover{background:#f5f3ed;border-color:#cdb98d;color:#243d57}
.action-status{font-size:10px;color:#596775;line-height:1.45}
.result-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.share-button{padding:7px 11px;white-space:nowrap}
@media(max-width:720px){.calculator-actions{margin-top:9px}.reset-button,.share-button{min-height:38px;padding-inline:12px}.result-actions{gap:6px}.action-status{max-width:110px;text-align:right}}

/* Quick adjustments and expandable amortization schedule */
.quick-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:1px}
.quick-chips button{min-height:34px;padding:6px 10px;border:1px solid #e2ded5;border-radius:999px;background:#fff;color:#526579;font:600 11px 'Noto Sans KR',sans-serif;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.quick-chips button:hover{background:#f4f1e9;border-color:#c9b78f;color:#243d57}
.quick-chips button:focus-visible,.repayment-schedule summary:focus-visible{outline:3px solid #d5bd8e;outline-offset:2px}
.repayment-schedule{margin-top:15px;border:1px solid #e7e3da;border-radius:12px;background:#fff;overflow:hidden}
.repayment-schedule summary{padding:13px 14px;cursor:pointer;color:#3d5369;font-size:12px;font-weight:700;list-style:none}
.repayment-schedule summary::-webkit-details-marker{display:none}
.repayment-schedule summary:after{content:'+';float:right;color:#9a845d;font:600 17px 'DM Sans',sans-serif;line-height:1}
.repayment-schedule[open] summary:after{content:'−'}
.schedule-scroll{max-height:340px;overflow:auto;border-top:1px solid #ece8df;-webkit-overflow-scrolling:touch}
.schedule-scroll table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:10px;font-variant-numeric:tabular-nums}
.schedule-scroll th,.schedule-scroll td{padding:9px 8px;text-align:right;border-bottom:1px solid #f0eee9}
.schedule-scroll th{position:sticky;top:0;background:#f7f6f2;color:#596775;font-weight:700}
.schedule-scroll th:first-child,.schedule-scroll td:first-child{text-align:center}
.schedule-scroll td{color:#405163}
.partner-disclosure{max-width:680px;margin:0 auto 8px;text-align:center;color:#596775;font-size:11px;line-height:1.7;letter-spacing:0}
@media(max-width:720px){.quick-chips button{min-height:38px;font-size:12px}.repayment-schedule summary{min-height:46px;padding:14px 13px}.schedule-scroll table{font-size:10px}.schedule-scroll th,.schedule-scroll td{padding:9px 7px}.partner-disclosure{padding:0 4px;font-size:10px;line-height:1.7}}

/* Keep partner and legal footer content visually centered together. */
footer{text-align:center}
.footer-partner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-inline:auto}
.field-hint{color:#596775;font-size:10px;line-height:1.7}
.field-hint a{color:#315c43;text-underline-offset:2px}.field-hint a:focus-visible{outline:2px solid #315c43;outline-offset:2px}