@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Nunito','Noto Sans KR',sans-serif;color:#35354c;background:#faf7f0;font-synthesis:none;line-height:1.6}*{box-sizing:border-box}body{margin:0;background-image:radial-gradient(#b6ad971c 1px,transparent 1px);background-size:18px 18px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #7563c7;outline-offset:4px}.page{max-width:808px;margin:auto;padding:50px 28px 35px}.intro{text-align:center;position:relative;padding:0 0 30px}.sticker{display:flex;align-items:center;justify-content:center;width:63px;height:63px;margin:0 auto 15px;background:#dacefa;border:2px solid #494057;border-radius:19px;font-size:40px;font-weight:900;transform:rotate(-12deg);box-shadow:3px 4px 0 #494057}.eyebrow{font-size:9px;font-weight:900;letter-spacing:2.4px;color:#978f9b;margin:20px 0 10px}h1{font-size:35px;letter-spacing:-1.7px;line-height:1.45;margin:0;font-weight:900}h1 span{position:relative;white-space:nowrap;background:linear-gradient(transparent 65%,#f5df89 65%,#f5df89 92%,transparent 92%)}.subtitle{font-size:13px;color:#8d8791;line-height:1.85;margin:14px 0 0}.spark{position:absolute;line-height:1}.spark-one{left:13%;top:60px;font-size:36px;color:#a1b99d;transform:rotate(13deg)}.spark-two{right:12%;top:20px;font-size:40px;color:#e5bb70}.calculator{background:#fff;border:1px solid #e8e2db;border-radius:26px;padding:29px;box-shadow:0 8px 0 #eee8df70}.modes{border:0;margin:0;padding:0}.modes legend{font-size:12px;font-weight:700;margin-bottom:13px;padding:0;color:#77717e}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.mode-grid label{position:relative;cursor:pointer}.mode-grid input{position:absolute;opacity:0;width:1px;height:1px}.mode-grid label>span{display:flex;flex-direction:column;align-items:center;border:1px solid #ede9f1;border-radius:14px;padding:12px 5px;font-weight:800;font-size:12px;background:#fcfbfd;transition:background .15s,border-color .15s}.mode-grid b{font-size:23px;font-weight:700;line-height:1.2;margin-bottom:8px;color:#9788b5}.mode-grid small{font-size:9px;color:#99929f;font-weight:400;margin-top:3px}.mode-grid input:checked+span{background:#eee8fc;border-color:#9f8ccc;color:#655091;box-shadow:0 2px 0 #b8a7db}.mode-grid input:checked+span b{color:#7962aa}.mode-grid input:focus-visible+span{outline:3px solid #7563c7;outline-offset:3px}.form-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:27px 0 18px}.form-heading h2{font-size:14px;letter-spacing:-.4px;margin:0;font-weight:700}#example{border:0;background:#faf6e9;border-radius:20px;padding:6px 11px;font-size:10px;white-space:nowrap;color:#8e7853}.inputs{display:grid;grid-template-columns:1fr 26px 1fr;gap:9px;align-items:end}.field{min-width:0}.field label{display:block;font-size:11px;color:#8a8390;margin-bottom:8px}.input-shell{border:1px solid #e4dfeb;background:#fff;border-radius:11px;display:flex;align-items:center;padding:0 13px;gap:8px}.input-shell:focus-within{border-color:#9c83c6;box-shadow:0 0 0 3px #eee8fc}.input-shell input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:14px 0;font-size:21px;font-weight:800;color:#4f4565;font-variant-numeric:tabular-nums}.input-shell input::placeholder{font-size:15px;font-weight:500;color:#c2bacb}.input-shell span{font-size:12px;color:#a69aac;white-space:nowrap}.input-symbol{align-self:end;text-align:center;font-size:22px;color:#baaacb;padding-bottom:13px}.input-help{font-size:10px;color:#aaa1ae;margin:9px 0 0}.error{font-size:11px;color:#ad4351;min-height:18px;margin:5px 0 8px}.form-actions{display:flex;gap:9px}.calculate{background:#7962aa;border:1px solid #6c559b;border-radius:11px;box-shadow:0 3px 0 #59467e;color:white;flex:1;padding:12px 19px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}.calculate:hover{background:#6d579d}.reset{border:1px solid #e8e2ee;background:#faf8fc;border-radius:11px;color:#9788a7;padding:9px 16px;font-size:18px}.reset span{font-size:11px;margin-left:3px}.result{background:#f1f5eb;border:1px solid #e0e7d8;border-radius:16px;margin-top:27px;padding:21px 23px 10px}.result-caption{display:flex;justify-content:space-between;color:#849b73;font-size:11px;font-weight:700}.result-caption>span:last-child{font-size:21px;line-height:1}.result #result-label{font-size:12px;color:#7a8971;margin:14px 0 3px}.result-value{display:flex;align-items:baseline;gap:7px;overflow-wrap:anywhere}.result-value output{min-width:0;font-size:40px;font-weight:900;line-height:1.3;color:#4f6843;letter-spacing:-1px;font-variant-numeric:tabular-nums}.result-value>span{font-size:19px;color:#7c906e}#detail{font-size:11px;color:#8c9a83;margin:9px 0 20px;overflow-wrap:anywhere}.result-bottom{border-top:1px dashed #d6dfcc;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.result-bottom>span{font-size:9px;color:#9aa68f}#copy{font-size:10px;border:0;background:#e5ecd9;color:#768967;border-radius:7px;padding:6px 10px;white-space:nowrap}#copy:disabled{opacity:.5;cursor:default}#copy-status{font-size:10px;color:#768967;min-height:16px;margin:3px 0 0}.tips{display:flex;gap:13px;padding:25px 17px 0}.tip-icon{background:#f8ecd0;border-radius:12px;flex:0 0 35px;height:35px;display:grid;place-items:center}.tips h2{font-size:11px;margin:0 0 5px;color:#918576}.tips p{font-size:11px;line-height:1.85;color:#a2978b;margin:0}.privacy{text-align:center;font-size:9px;color:#b3aaa0;margin:26px 0 0}@media(max-width:600px){.page{padding:30px 16px}.intro{padding-bottom:24px}h1{font-size:27px;letter-spacing:-1.3px}.spark-one{left:4%;top:57px;font-size:24px}.spark-two{right:6%;top:15px;font-size:28px}.calculator{padding:20px 17px;border-radius:21px}.mode-grid{gap:6px}.mode-grid label>span{padding:12px 2px;font-size:10px}.mode-grid small{font-size:8px;letter-spacing:-.4px}.form-heading{align-items:flex-start}.form-heading h2{font-size:12px}.inputs{gap:5px;grid-template-columns:1fr 18px 1fr}.input-shell{padding:0 9px}.input-shell input{font-size:17px}.input-shell input::placeholder{font-size:12px}.result{padding:18px 16px 8px}.result-value output{font-size:32px}.result-bottom{align-items:flex-start;flex-direction:column;gap:8px}.reset{padding:9px 12px}.reset span{display:none}.tips{padding-left:5px;padding-right:5px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}