:root{--navy:#1b2a4a;--blue:#2f6bff;--blue-light:#eaf0ff;--gray:#6b7280;--line:#d3d9e3;--bg:#eef1f6;--danger:#e04b4b;--card-bg:#fff;--input-bg:#fff;--headline-bg:#1b2a4a;--text:#1b2a4a}html[data-theme=dark]{--navy:#e8ecf4;--blue:#6b95ff;--blue-light:#232f4d;--gray:#9aa4b8;--line:#2c3550;--bg:#0f1626;--danger:#ff6b6b;--card-bg:#182138;--input-bg:#1e2942;--headline-bg:#0a0f1c;--text:#e8ecf4}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Malgun Gothic,sans-serif;line-height:1.5;transition:background .25s,color .25s}.wrap{max-width:640px;margin:0 auto;padding:24px 18px 60px}header{text-align:center;padding:32px 0 24px}header h1{letter-spacing:-.5px;font-size:26px;font-weight:800}header p{color:var(--gray);margin-top:10px;font-size:15px}.topbar{z-index:10;gap:8px;display:flex;position:fixed;top:14px;right:14px}.icon-btn{border:1px solid var(--line);background:var(--card-bg);height:40px;color:var(--text);cursor:pointer;border-radius:20px;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:600;transition:background .25s;display:flex}.icon-btn.round{justify-content:center;width:40px;padding:0;font-size:18px}.icon-btn:active{transform:scale(.95)}.card{background:var(--card-bg);border:1px solid var(--line);border-radius:16px;margin-bottom:18px;padding:22px;transition:background .25s,border-color .25s;box-shadow:0 1px 3px #1b2a4a0f}.field{margin-bottom:18px}.field:last-child{margin-bottom:0}label{margin-bottom:8px;font-size:15px;font-weight:700;display:block}select,input.text-input{border:1px solid var(--line);width:100%;color:var(--text);background:var(--input-bg);border-radius:10px;padding:13px 14px;font-size:16px;transition:background .25s,border-color .25s}select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");background-position:right 14px center;background-repeat:no-repeat;padding-right:40px;font-size:16px;line-height:1.4}select option{padding:8px;font-size:16px}select:focus,input:focus{border-color:var(--blue);outline:none}.hint{color:var(--gray);margin-top:6px;font-size:13px}.channels{flex-direction:column;gap:14px;display:flex}.chan-row{align-items:center;gap:12px;display:flex}.chan-row .name{flex:0 0 92px;font-size:14px;font-weight:600}.chan-row input[type=range]{accent-color:var(--blue);flex:1}.pct-wrap{color:var(--blue);white-space:nowrap;flex:none;align-items:center;gap:2px;font-size:14px;font-weight:700;display:flex}input.pct-input{text-align:center;width:42px;color:var(--blue);border:none;border-bottom:1.5px solid var(--line);-moz-appearance:textfield;background:0 0;border-radius:0;padding:4px;font-size:16px;font-weight:700}input.pct-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input.pct-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.pct-input:focus{border-bottom-color:var(--blue);outline:none}.total-note{text-align:right;margin-top:12px;font-size:13px}.total-note.ok{color:var(--gray)}.total-note.bad{color:var(--danger);font-weight:700}button.calc{background:var(--blue);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;margin-top:4px;padding:16px;font-size:17px;font-weight:800}button.calc:active{transform:translateY(1px)}button.calc:disabled{opacity:.5;cursor:not-allowed}.api-badge{color:var(--gray);text-align:center;margin-top:8px;font-size:11px}.headline{background:var(--headline-bg);color:#fff;text-align:center;border-radius:16px;margin-bottom:18px;padding:26px 22px}.headline .small{opacity:.8;font-size:14px}.fee-duo{justify-content:center;align-items:center;gap:8px;margin-top:14px;display:flex}.fee-col{flex:1}.fee-label{opacity:.75;margin-bottom:6px;font-size:13px}.fee-val{letter-spacing:-.5px;white-space:nowrap;font-size:22px;font-weight:800}.fee-val.accent{color:#7ea6ff}.fee-divider{background:#fff3;align-self:stretch;width:1px}.headline .big{letter-spacing:-1px;margin:8px 0;font-size:34px;font-weight:800}.headline .big span{color:#7ea6ff}.breakdown{list-style:none}.breakdown.locked{filter:blur(6px);pointer-events:none;-webkit-user-select:none;user-select:none}.lock-overlay{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex;position:absolute;inset:0}.lock-overlay p{color:var(--text);font-size:14px;font-weight:700}.lock-overlay button{background:var(--blue);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px 22px;font-size:15px;font-weight:800}.lock-overlay button:active{transform:translateY(1px)}.breakdown li{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;padding:14px 0;display:flex}.breakdown li:last-child{border-bottom:none}.breakdown li>div:first-child{flex:1;min-width:0}.breakdown .ch-name{font-weight:700}.breakdown .ch-sub{color:var(--gray);font-size:13px;font-weight:400}.breakdown .ch-amt{text-align:right;white-space:nowrap;flex-shrink:0;font-weight:800}.breakdown .ch-amt small{color:var(--gray);font-size:12px;font-weight:500;display:block}.tag{background:var(--blue-light);color:var(--blue);vertical-align:middle;border-radius:20px;margin-left:6px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}.tip{background:var(--blue-light);border-radius:12px;padding:16px;font-size:14px}.tip b{color:var(--blue)}.saving-report{background:var(--card-bg);border:1px solid var(--line);border-radius:16px;margin-bottom:18px;padding:20px;box-shadow:0 1px 3px #1b2a4a0f}.sr-head{margin-bottom:8px;font-size:16px;font-weight:800}.sr-headline{color:var(--text);margin-bottom:14px;font-size:14px;font-weight:600;line-height:1.6}.sr-tips{flex-direction:column;gap:10px;list-style:none;display:flex}.sr-tip{border-left:4px solid var(--line);background:var(--bg);border-radius:12px;padding:14px}.sr-tip.danger{border-left-color:var(--danger)}.sr-tip.warn{border-left-color:#f0a500}.sr-tip.good{border-left-color:#2fb37a}.sr-tip-title{margin-bottom:4px;font-size:14px;font-weight:800}.sr-tip-desc{color:var(--gray);font-size:13px;line-height:1.6}.disclaimer{color:var(--gray);margin-top:20px;font-size:12px;line-height:1.6}.login-banner{background:var(--blue-light);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;padding:14px 16px;font-size:14px;display:flex}.login-banner b{color:var(--blue)}.login-banner button{background:var(--blue);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:8px 14px;font-weight:700}.modal-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.modal{background:var(--card-bg);border-radius:18px;width:100%;max-width:400px;max-height:90vh;padding:26px 22px;overflow-y:auto}.modal h2{margin-bottom:6px;font-size:20px}.modal .sub{color:var(--gray);margin-bottom:18px;font-size:14px}.modal .close{float:right;cursor:pointer;color:var(--gray);background:0 0;border:none;font-size:22px}.modal .err{color:var(--danger);margin-top:10px;font-size:13px}.modal .switch{text-align:center;color:var(--gray);margin-top:16px;font-size:14px}.modal .switch button{color:var(--blue);cursor:pointer;background:0 0;border:none;font-weight:700}.social{flex-direction:column;gap:10px;margin:16px 0;display:flex}.social button{border:1px solid var(--line);cursor:pointer;border-radius:10px;padding:12px;font-size:15px;font-weight:700}.social .kakao{color:#000;background:#fee500;border-color:#fee500}.social .naver{color:#fff;background:#03c75a;border-color:#03c75a}.social .google{color:#333;background:#fff}.divider{text-align:center;color:var(--gray);margin:14px 0;font-size:12px;position:relative}footer{text-align:center;color:var(--gray);margin-top:30px;font-size:12px}.feedback-bar{background:var(--card-bg);border:1px dashed var(--line);text-align:center;border-radius:14px;margin-top:26px;padding:18px}.feedback-bar span{color:var(--gray);margin-bottom:10px;font-size:13px;display:block}.feedback-btn{background:var(--blue);color:#fff;border-radius:20px;padding:10px 20px;font-size:14px;font-weight:700;text-decoration:none;display:inline-block}.feedback-btn:active{transform:translateY(1px)}.cta-box{background:var(--blue-light);text-align:center;border-radius:16px;margin-bottom:18px;padding:20px}.cta-box p{color:var(--text);margin-bottom:14px;font-size:14px;font-weight:600;line-height:1.6}.cta-box b{color:var(--blue)}.related-links{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.related-link{border:1px solid var(--line);color:var(--text);background:var(--bg);border-radius:20px;padding:8px 14px;font-size:13px;font-weight:600;text-decoration:none;display:inline-block}.related-link.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.stat-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;display:grid}.stat-box{background:var(--card-bg);border:1px solid var(--line);border-radius:14px;padding:18px}.stat-label{color:var(--gray);margin-bottom:8px;font-size:13px}.stat-value{color:var(--blue);font-size:28px;font-weight:800}.stat-value.sm{font-size:18px}.bar-list{flex-direction:column;gap:10px;margin-top:12px;display:flex}.bar-row{align-items:center;gap:10px;display:flex}.bar-name{flex:0 0 88px;font-size:13px;font-weight:600}.bar-track{background:var(--bg);border-radius:10px;flex:1;height:20px;overflow:hidden}.bar-fill{background:var(--blue);border-radius:10px;height:100%;transition:width .3s}.bar-count{text-align:right;color:var(--blue);flex:0 0 44px;font-size:13px;font-weight:700}.share-actions{gap:10px;margin-top:14px;display:flex}.share-btn{border:1.5px solid var(--blue);color:var(--blue);cursor:pointer;white-space:nowrap;background:0 0;border-radius:12px;flex:1;padding:14px;font-size:14px;font-weight:800}.share-btn.primary{background:var(--blue);color:#fff}.share-btn:active{transform:translateY(1px)}.share-btn:disabled{opacity:.5}.share-capture{z-index:-1;pointer-events:none;box-sizing:border-box;color:#fff;background:linear-gradient(160deg,#1b2a4a,#0a0f1c);width:500px;padding:44px 40px;font-family:-apple-system,Apple SD Gothic Neo,Malgun Gothic,sans-serif;position:fixed;top:0;left:-10000px}.sc-brand{color:#7ea6ff;margin-bottom:24px;font-size:20px;font-weight:800}.sc-title{color:#fff;margin-bottom:18px;font-size:26px;font-weight:800;line-height:1.4}.sc-amount{color:#7ea6ff;letter-spacing:-2px;font-size:52px;font-weight:900}.sc-sub{color:#c3ccdd;margin-top:6px;margin-bottom:28px;font-size:18px}.sc-lines{border-top:1px solid #fff3;padding-top:18px}.sc-line{color:#fff;justify-content:space-between;padding:7px 0;font-size:17px;font-weight:600;display:flex}.sc-cta{text-align:center;color:#7ea6ff;margin-top:28px;font-size:16px;font-weight:700}.seo-content{background:var(--card-bg);border:1px solid var(--line);border-radius:14px;margin-top:40px;padding:24px}.seo-content h2{margin-bottom:12px;font-size:18px}.seo-content h3{margin:16px 0 8px;font-size:15px}.seo-content p{color:var(--text);font-size:14px;line-height:1.7}.seo-content ul{margin:0 0 0 18px}.seo-content li{color:var(--text);font-size:14px;line-height:1.8}.seo-content .seo-note{color:var(--gray);margin-top:14px;font-size:12px}.realcost-box{background:var(--blue-light);border-radius:12px;padding:16px}.toggle-row{cursor:pointer;align-items:flex-start;gap:10px;margin-bottom:0;font-size:14px;font-weight:600;display:flex}.toggle-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue);flex:none;margin-top:1px}.toggle-row b{color:var(--blue)}.ch-breakdown{color:var(--gray);flex-wrap:wrap;gap:2px 8px;margin-top:4px;font-size:12px;display:flex}.ch-breakdown span{white-space:nowrap}.ch-breakdown span:not(:last-child):after{content:"·";color:var(--line);margin-left:8px}.form-error{color:var(--danger);background:#e04b4b1f;border-radius:10px;margin-bottom:12px;padding:12px 14px;font-size:14px;font-weight:600}@media (width<=480px){.wrap{padding:18px 14px 48px}header{padding:24px 0 18px}header h1{font-size:22px}header p{font-size:14px}.card{border-radius:14px;padding:18px}.headline .big{font-size:28px}.chan-row .name{flex:0 0 74px;font-size:13px}.chan-row input[type=range]{height:28px}input.pct-input,select,input.text-input{font-size:16px}.topbar{top:10px;right:10px}.icon-btn{height:36px;padding:0 12px;font-size:13px}.icon-btn.round{width:36px;padding:0}.login-banner{text-align:center;flex-direction:column;align-items:stretch}.login-banner button{width:100%;padding:10px}.breakdown .ch-amt{font-size:14px}.modal{padding:22px 18px}}html,body{max-width:100%;overflow-x:hidden}