@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Serif+KR:wght@600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{
  --ink:#141414;--ink2:#3d3d3d;--muted:#6f6c66;--line:#dcd8d0;--line2:#ebe8e2;
  --paper:#faf9f6;--white:#fff;--red:#ea3325;--red-d:#c9271b;--ok:#2f6b4f;--warn:#8a5a12;
  --sans:'Manrope','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --serif:'Playfair Display','Noto Serif KR',Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:64px}
a{color:inherit}
.wrap{max-width:600px;margin:0 auto;padding:0 20px}
@media(max-width:380px){.wrap{padding:0 16px}}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:13px}
.brand b{color:var(--red);font-weight:700}
.top .meta{font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

/* hero */
.hero{padding:34px 0 22px;border-bottom:1px solid var(--line)}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;align-items:center}
.kicker .no{color:var(--red);font-weight:700}
h1{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.32;letter-spacing:-.01em;margin:14px 0 12px;word-break:keep-all}
.lead{color:var(--ink2);margin:0;word-break:keep-all}
.byline{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:13px;color:var(--muted)}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 0}
.byline b{color:var(--ink);font-weight:600;display:block;font-size:14px}

/* note */
.note-peter{border-left:2px solid var(--ink);padding:2px 0 2px 14px;margin:18px 0;font-size:14.5px;color:var(--ink2);word-break:keep-all}
.note-peter .who{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.fine{font-size:12.5px;color:var(--muted);word-break:keep-all}

/* quiz stepper */
.step{display:none;padding:28px 0 8px}
.step.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.prog{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.1em;color:var(--muted);margin-top:26px}
.prog .bar{flex:1;height:1px;background:var(--line);position:relative}
.prog .bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--ink);transition:width .25s}
.step h2{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.4;margin:0 0 6px;word-break:keep-all}
.step .help{font-size:14px;color:var(--muted);margin:0 0 16px;word-break:keep-all}
.choice{display:block;width:100%;text-align:left;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:3px;padding:15px 44px 15px 16px;margin:0 0 10px;cursor:pointer;position:relative;word-break:keep-all;transition:border-color .15s}
.choice:hover{border-color:var(--ink2)}
.choice small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.choice::after{content:'';position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;border:1px solid var(--line);border-radius:50%}
.choice.sel{border-color:var(--ink)}
.choice.sel::after{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.navrow{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.linkbtn{background:none;border:0;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}

/* forms (calculators) */
.sheet{padding:26px 0 6px}
.sect{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:24px 0 12px;display:flex;gap:10px;align-items:center}
.sect::after{content:'';flex:1;height:1px;background:var(--line)}
.field{margin:0 0 16px}
.field label{display:block;font-weight:600;font-size:15px;margin-bottom:6px;word-break:keep-all}
.field .hint{display:block;font-size:13px;color:var(--muted);margin-top:5px;word-break:keep-all}
.inp{position:relative}
.inp input,.inp select,.field select{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:3px;padding:13px 14px;-webkit-appearance:none;appearance:none}
.inp.usd input{padding-left:28px}
.inp.usd::before{content:'$';position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.inp.pct input{padding-right:34px}
.inp.pct::after{content:'%';position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.inp input:focus,.field select:focus{outline:none;border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tick{display:flex;gap:10px;align-items:center;font-size:15px;margin:4px 0 18px;cursor:pointer}
.tick input{width:18px;height:18px;accent-color:var(--ink)}

/* buttons */
.btn{display:block;width:100%;text-align:center;font:inherit;font-weight:600;font-size:16px;letter-spacing:.01em;border-radius:3px;padding:15px 18px;cursor:pointer;text-decoration:none;margin:10px 0 0;border:1px solid var(--ink);background:var(--white);color:var(--ink)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-d)}
.btn.ink{background:var(--ink);color:#fff}
.btn:disabled{opacity:.35;cursor:default}
.textlinks{display:flex;gap:18px;justify-content:center;margin:16px 0 0;font-size:14px}
.textlinks a,.textlinks button{color:var(--ink2);background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}

/* result = consultation notes */
.notes{display:none;margin-top:30px;background:var(--white);border:1px solid var(--line);padding:26px 22px 22px}
.notes.on{display:block;animation:fade .3s ease}
.notes .head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:18px}
.notes .head span{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.notes .head .d{color:var(--muted)}
.notes h2{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.38;margin:0 0 8px;word-break:keep-all}
.status{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 9px;border:1px solid currentColor;border-radius:2px;margin-bottom:12px}
.status.ok{color:var(--ok)}.status.warn{color:var(--warn)}.status.red{color:var(--red)}
.blk{border-top:1px solid var(--line2);padding:16px 0 4px;margin-top:16px}
.blk h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 8px}
.blk h3 em{font-style:normal;color:var(--red);margin-right:6px}
.blk p{margin:0 0 6px;word-break:keep-all}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.facts li{font-size:13.5px;border:1px solid var(--line);padding:3px 9px;border-radius:2px;color:var(--ink2)}
.todo{list-style:none;padding:0;margin:0}
.todo li{position:relative;padding:8px 0 8px 28px;border-bottom:1px dashed var(--line2);word-break:keep-all}
.todo li:last-child{border-bottom:0}
.todo li::before{content:'';position:absolute;left:0;top:13px;width:14px;height:14px;border:1px solid var(--ink2);border-radius:2px}
ol.num{margin:0;padding:0;list-style:none;counter-reset:n}
ol.num li{counter-increment:n;position:relative;padding:6px 0 6px 30px;word-break:keep-all}
ol.num li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:7px;font-size:12px;font-weight:700;color:var(--red);letter-spacing:.04em}
.figure{display:flex;align-items:baseline;gap:10px;margin:4px 0 6px}
.figure .v{font-family:var(--serif);font-size:46px;font-weight:700;line-height:1}
.figure .u{color:var(--muted);font-size:14px}
.kv{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);margin-top:14px}
.kv div{padding:12px 0;border-bottom:1px solid var(--line2)}
.kv div:nth-child(odd){padding-right:12px;border-right:1px solid var(--line2)}
.kv div:nth-child(even){padding-left:12px}
.kv b{display:block;font-size:19px;font-weight:700}
.kv span{font-size:12.5px;color:var(--muted)}
.formula{font-size:13.5px;background:var(--paper);border:1px solid var(--line2);padding:10px 12px;color:var(--ink2);word-break:keep-all}
.sign{display:flex;gap:12px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}
.sign img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 0}
.sign div{font-size:13px;color:var(--muted);line-height:1.5}
.sign b{display:block;color:var(--ink);font-size:14px}
.cta{margin-top:22px}
.cta p{font-size:14px;color:var(--ink2);margin:0 0 4px;word-break:keep-all}

/* checklist (realtor) */
.cl{margin:24px 0 0;border-top:1px solid var(--ink)}
.cl label{display:grid;grid-template-columns:34px 1fr 22px;gap:4px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line);cursor:pointer}
.cl .n{font-size:12px;font-weight:700;color:var(--red);padding-top:4px;letter-spacing:.04em}
.cl b{display:block;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.4;margin-bottom:4px;word-break:keep-all}
.cl span{font-size:14.5px;color:var(--ink2);word-break:keep-all;display:block}
.cl span i{display:block;font-style:normal;color:var(--muted);font-size:13px;margin-top:4px}
.cl input{width:18px;height:18px;margin-top:5px;accent-color:var(--ink)}

/* index */
.tools{border-top:1px solid var(--ink);margin-top:8px}
.tools a{display:grid;grid-template-columns:40px 1fr;gap:6px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.tools .n{font-size:12px;font-weight:700;color:var(--red);padding-top:5px}
.tools b{display:block;font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.4;word-break:keep-all}
.tools span{font-size:14px;color:var(--muted);word-break:keep-all}
.tools em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}

footer{border-top:1px solid var(--line);margin-top:44px;padding:22px 0 44px;font-size:12px;color:var(--muted);word-break:keep-all;line-height:1.6}
footer p{margin:0 0 8px}
footer b{color:var(--ink2);font-weight:600}

@media print{
  .top,.hero .byline,.step,.prog,.sheet,.cta,.noprint,footer .links{display:none!important}
  body{background:#fff;font-size:13px}
  .notes{display:block!important;border:0;padding:0;margin:0}
  .hero{padding:0 0 10px}
}

.ph{display:inline-block;flex:none;width:48px;height:48px;border-radius:50%;background:linear-gradient(90deg,#bfbfbf 17.5%,transparent 17.5%),url(https://mortgageguyshq.com/assets/peter-oh.jpg) 50% 0/auto 118% no-repeat,#bfbfbf}
.sign .ph{width:44px;height:44px}
@media print{.ph{-webkit-print-color-adjust:exact;print-color-adjust:exact}}