/* Hominic Tools · Loan Repayment Comparison v1.0.0 */
[data-hominic-loan] { container-type:inline-size; container-name:hmloan; min-width:0; }
.hm-loan-tool { --hm-ln-navy:#102b4d; --hm-ln-blue:#1475ef; --hm-ln-green:#087a57; --hm-ln-line:#dde5ef; color:#20334b; background:#f5f8fc; border:1px solid var(--hm-ln-line); border-radius:20px; overflow:hidden; font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif; text-align:left; width:100%; min-width:0; margin:24px 0; color-scheme:light; }
.hm-loan-tool,.hm-loan-tool *,.hm-loan-tool *::before,.hm-loan-tool *::after { box-sizing:border-box; }
.hm-loan-tool [hidden] { display:none !important; }
.hm-loan-tool h2,.hm-loan-tool h3,.hm-loan-tool h4,.hm-loan-tool p,.hm-loan-tool ul,.hm-loan-tool dl,.hm-loan-tool dt,.hm-loan-tool dd { margin:0; padding:0; font-family:inherit; }
.hm-loan-tool button,.hm-loan-tool input,.hm-loan-tool select,.hm-loan-tool textarea { font:inherit; color:inherit; margin:0; letter-spacing:normal; }
.hm-loan-tool button { appearance:none; background:#fff; border:1px solid #cbd7e6; border-radius:10px; min-height:44px; padding:9px 14px; font-weight:650; font-size:13px; line-height:1.4; cursor:pointer; box-shadow:none; text-decoration:none; white-space:normal; }
.hm-loan-tool button:hover:not(:disabled) { border-color:var(--hm-ln-blue); background:#f0f6ff; }
.hm-loan-tool button:disabled { color:#8290a3; background:#f6f8fb; cursor:default; }
.hm-loan-tool button:focus-visible,.hm-loan-tool input:focus-visible,.hm-loan-tool select:focus-visible,.hm-loan-tool textarea:focus-visible,.hm-loan-tool summary:focus-visible,.hm-loan-tool [tabindex]:focus-visible { outline:3px solid #69aafc; outline-offset:3px; }
.hm-loan-tool .hm-ln-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 26px; background:var(--hm-ln-navy); color:#fff; }
.hm-loan-tool .hm-ln-brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:750; }
.hm-loan-tool .hm-ln-logo { display:inline-grid; place-items:center; width:30px; height:30px; position:relative; border:1px solid #71879f; border-radius:7px; font-size:24px; line-height:1; font-weight:800; }
.hm-loan-tool .hm-ln-logo::after { content:""; width:5px; height:5px; background:#ffad4a; border-radius:50%; position:absolute; right:3px; bottom:3px; }
.hm-loan-tool .hm-ln-head-note { color:#bdcde0; font-size:11px; letter-spacing:1px; }
.hm-loan-tool .hm-ln-intro { padding:28px 26px 22px; }
.hm-loan-tool .hm-ln-kicker { display:block; font-size:11px; letter-spacing:1.5px; font-weight:750; color:var(--hm-ln-blue); margin-bottom:5px; }
.hm-loan-tool h2 { color:var(--hm-ln-navy); font-size:32px; font-weight:800; line-height:1.35; word-break:keep-all; overflow-wrap:anywhere; margin-bottom:8px; border:0; background:transparent; }
.hm-loan-tool .hm-ln-intro p { color:#61738a; font-size:15px; word-break:keep-all; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-content { padding:0 26px; display:grid; gap:20px; min-width:0; }
.hm-loan-tool .hm-ln-content > section { min-width:0; }
.hm-loan-tool .hm-ln-input-card,.hm-loan-tool .hm-ln-chart-card,.hm-loan-tool .hm-ln-schedule-card { padding:22px; border:1px solid var(--hm-ln-line); border-radius:15px; background:#fff; min-width:0; }
.hm-loan-tool .hm-ln-section-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; min-width:0; }
.hm-loan-tool h3 { font-size:19px; color:var(--hm-ln-navy); font-weight:750; line-height:1.45; word-break:keep-all; overflow-wrap:anywhere; background:transparent; border:0; }
.hm-loan-tool .hm-ln-pill { font-size:11px; font-weight:650; color:#37608d; background:#eaf3ff; padding:4px 9px; border-radius:7px; }
.hm-loan-tool form { margin:0; padding:0; border:0; min-width:0; }
.hm-loan-tool .hm-ln-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.hm-loan-tool .hm-ln-field { display:grid; gap:7px; min-width:0; font-size:13px; font-weight:650; color:#41536b; }
.hm-loan-tool .hm-ln-input-wrap { display:block; position:relative; min-width:0; }
.hm-loan-tool input { appearance:none; display:block; background:#fff; width:100%; max-width:100%; min-width:0; min-height:48px; border:1px solid #cbd7e6; border-radius:9px; padding:10px 45px 10px 12px; font-size:17px; font-weight:600; line-height:1.4; font-variant-numeric:tabular-nums; box-shadow:none; }
.hm-loan-tool input::placeholder { color:#97a5b6; font-weight:400; font-size:14px; opacity:1; }
.hm-loan-tool .hm-ln-unit { position:absolute; top:50%; right:12px; transform:translateY(-50%); color:#667c96; pointer-events:none; }
.hm-loan-tool .hm-ln-term { display:grid; grid-template-columns:minmax(0,1fr) 84px; gap:8px; min-width:0; }
.hm-loan-tool .hm-ln-term input { padding-right:12px; }
.hm-loan-tool select { appearance:auto; background:#fff; border:1px solid #cbd7e6; border-radius:9px; min-height:44px; padding:9px 28px 9px 10px; width:auto; max-width:100%; line-height:1.4; }
.hm-loan-tool .hm-ln-term select { width:100%; min-height:48px; padding-left:10px; }
.hm-loan-tool input[aria-invalid="true"],.hm-loan-tool select[aria-invalid="true"] { border-color:#c74040; background:#fffafa; }
.hm-loan-tool .hm-ln-hint { color:#6d7f95; font-size:12px; margin-top:12px; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-input-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:17px; }
.hm-loan-tool button.hm-ln-primary { background:var(--hm-ln-blue); color:#fff; border-color:var(--hm-ln-blue); padding-left:22px; padding-right:22px; }
.hm-loan-tool button.hm-ln-primary:hover { background:#0965d9; border-color:#0965d9; }
.hm-loan-tool .hm-ln-status { font-size:12px; color:#738399; margin-top:11px; overflow-wrap:anywhere; min-height:20px; }
.hm-loan-tool .hm-ln-status.hm-ln-error { color:#b52e35; }
.hm-loan-tool .hm-ln-basis { background:#eaf2fc; padding:12px 15px; border-radius:10px; font-size:12px; color:#4e6c8e; margin-top:-8px; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-context { font-size:12px; color:#6d7f95; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-results { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.hm-loan-tool .hm-ln-result-card { display:flex; flex-direction:column; border:1px solid var(--hm-ln-line); border-top:4px solid var(--hm-ln-blue); border-radius:14px; padding:19px; background:#fff; min-width:0; }
.hm-loan-tool .hm-ln-result-card[data-result="principal"] { border-top-color:var(--hm-ln-green); }
.hm-loan-tool .hm-ln-result-card[data-result="bullet"] { border-top-color:var(--hm-ln-navy); }
.hm-loan-tool .hm-ln-result-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; min-height:25px; margin-bottom:5px; }
.hm-loan-tool .hm-ln-method-number { color:#8ca0b8; font-weight:750; font-size:12px; }
.hm-loan-tool .hm-ln-badge { background:#dff3eb; color:var(--hm-ln-green); font-size:10px; font-weight:700; padding:3px 7px; border-radius:6px; }
.hm-loan-tool .hm-ln-description { color:#718197; font-size:12px; margin-top:6px; line-height:1.6; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-main-value { margin:16px 0; padding:14px 12px; background:#eff6ff; border-radius:10px; }
.hm-loan-tool [data-result="principal"] .hm-ln-main-value { background:#edf9f4; }
.hm-loan-tool [data-result="bullet"] .hm-ln-main-value { background:#f0f3f7; }
.hm-loan-tool .hm-ln-main-value span { display:block; font-size:11px; color:#5c7796; }
.hm-loan-tool .hm-ln-main-value strong { display:block; font-size:25px; color:var(--hm-ln-blue); font-weight:800; line-height:1.35; margin-top:5px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.hm-loan-tool [data-result="principal"] .hm-ln-main-value strong { color:var(--hm-ln-green); }
.hm-loan-tool [data-result="bullet"] .hm-ln-main-value strong { color:var(--hm-ln-navy); }
.hm-loan-tool .hm-ln-metrics { display:grid; gap:9px; }
.hm-loan-tool .hm-ln-metrics > div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:12px; min-width:0; }
.hm-loan-tool .hm-ln-metrics dt { color:#6c7f97; }
.hm-loan-tool .hm-ln-metrics dd { color:#304b6b; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; min-width:0; }
.hm-loan-tool .hm-ln-metrics .hm-ln-interest { border-top:1px solid var(--hm-ln-line); padding-top:11px; margin-top:3px; }
.hm-loan-tool .hm-ln-interest dd { font-size:17px; color:var(--hm-ln-navy); }
.hm-loan-tool .hm-ln-method-note { font-size:11px; color:#7789a0; border-top:1px solid #edf1f6; padding-top:11px; margin-top:13px; margin-bottom:14px; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-schedule-shortcut { width:100%; margin-top:auto; color:#406895; }
.hm-loan-tool .hm-ln-comparison-note { font-size:12px; color:#486b94; background:#ebf3ff; border-radius:10px; padding:13px 15px; margin-top:13px; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-export-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.hm-loan-tool .hm-ln-copy-message { font-size:12px; color:#087a57; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-copy-message:not(:empty) { margin-top:10px; }
.hm-loan-tool .hm-ln-copy-fallback { display:block; width:100%; max-width:100%; min-height:190px; resize:vertical; border:1px solid #ccd9e8; border-radius:9px; padding:12px; background:#fff; font-size:13px; margin-top:10px; }
.hm-loan-tool .hm-ln-chart-unit { font-size:11px; color:#7a8ca3; }
.hm-loan-tool .hm-ln-chart { display:block; width:100%; height:auto; max-width:100%; overflow:hidden; }
.hm-loan-tool .hm-ln-chart text { font-family:inherit; }
.hm-loan-tool .hm-ln-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin-top:8px; font-size:11px; color:#59718e; }
.hm-loan-tool .hm-ln-legend span { display:inline-flex; align-items:center; gap:6px; }
.hm-loan-tool .hm-ln-legend i { display:inline-block; width:23px; height:0; border-top:3px solid var(--hm-ln-blue); }
.hm-loan-tool .hm-ln-legend i.principal { border-top:3px dashed var(--hm-ln-green); }
.hm-loan-tool .hm-ln-legend i.bullet { border-top:3px dotted var(--hm-ln-navy); }
.hm-loan-tool .hm-ln-schedule-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; min-width:0; }
.hm-loan-tool .hm-ln-schedule-controls label { display:grid; gap:5px; min-width:0; font-size:12px; font-weight:650; color:#556f8b; }
.hm-loan-tool .hm-ln-page-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
.hm-loan-tool .hm-ln-page-buttons button { font-size:12px; padding-left:12px; padding-right:12px; }
.hm-loan-tool .hm-ln-table-hint { color:#8a9aaf; font-size:11px; margin:12px 0 8px; }
.hm-loan-tool .hm-ln-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #e0e7f1; border-radius:10px; max-width:100%; min-width:0; }
.hm-loan-tool table { border-collapse:collapse; width:100%; min-width:650px; margin:0; table-layout:auto; font-size:12px; background:#fff; color:#3c5675; }
.hm-loan-tool th,.hm-loan-tool td { padding:11px 12px; border:0; border-bottom:1px solid #edf1f6; line-height:1.5; font-variant-numeric:tabular-nums; background:transparent; }
.hm-loan-tool thead th { text-align:right; background:#f0f5fc; color:#5b7390; font-size:11px; white-space:nowrap; }
.hm-loan-tool tbody th { text-align:center; font-weight:650; }
.hm-loan-tool td { text-align:right; white-space:nowrap; }
.hm-loan-tool th:first-child,.hm-loan-tool th:nth-child(2),.hm-loan-tool td:nth-child(2) { text-align:center; }
.hm-loan-tool .hm-ln-payment-cell { color:var(--hm-ln-blue); font-weight:700; }
.hm-loan-tool tfoot th,.hm-loan-tool tfoot td { border-bottom:0; background:#f3f7fc; font-weight:750; }
.hm-loan-tool .hm-ln-empty { padding:30px 14px; text-align:center; color:#8c9bb0; font-size:12px; white-space:normal; }
.hm-loan-tool .hm-ln-schedule-note { font-size:11px; color:#7f91a7; margin-top:10px; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-help { border:1px solid var(--hm-ln-line); border-radius:12px; background:#fff; overflow:hidden; }
.hm-loan-tool summary { cursor:pointer; padding:13px 16px; min-height:44px; font-size:13px; font-weight:700; color:#49627f; }
.hm-loan-tool .hm-ln-help > div { padding:0 18px 18px; }
.hm-loan-tool h4 { color:#496784; font-size:13px; margin-top:12px; margin-bottom:4px; font-weight:750; }
.hm-loan-tool .hm-ln-help p { font-size:12px; color:#6d8099; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-help .hm-ln-formula-key { margin-top:14px; padding:11px; border-radius:8px; background:#f3f7fc; }
.hm-loan-tool .hm-ln-help ul { padding:8px 0 0 18px; list-style:disc; font-size:12px; color:#64768c; }
.hm-loan-tool .hm-ln-help li { margin-top:7px; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-footer { padding:22px 26px; color:#7c8ca0; font-size:11px; text-align:center; overflow-wrap:anywhere; }
.hm-loan-tool .hm-ln-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@container hmloan (min-width:860px) {
  .hm-loan-tool .hm-ln-fields { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hm-loan-tool .hm-ln-results { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container hmloan (max-width:520px) {
  .hm-loan-tool { border-radius:13px; margin:12px 0; }
  .hm-loan-tool .hm-ln-header { padding:14px 15px; }
  .hm-loan-tool .hm-ln-head-note { display:none; }
  .hm-loan-tool .hm-ln-intro { padding:22px 15px 18px; }
  .hm-loan-tool h2 { font-size:26px; }
  .hm-loan-tool .hm-ln-intro p { font-size:13px; }
  .hm-loan-tool .hm-ln-content { padding:0 12px; gap:16px; }
  .hm-loan-tool .hm-ln-input-card,.hm-loan-tool .hm-ln-chart-card,.hm-loan-tool .hm-ln-schedule-card { padding:17px 13px; }
  .hm-loan-tool .hm-ln-fields { grid-template-columns:minmax(0,1fr); }
  .hm-loan-tool h3 { font-size:17px; }
  .hm-loan-tool .hm-ln-input-actions button,.hm-loan-tool .hm-ln-export-actions button { flex:1 1 auto; }
  .hm-loan-tool .hm-ln-page-buttons { margin-left:0; width:100%; }
  .hm-loan-tool .hm-ln-chart text { font-size:20px; }
}