/* 로아스온 광고 손익분기 계산기. 색 · 글꼴은 launchroas-intro/DESIGN.md(정산서 모양 · 남색은 남는 돈에만).
   틀은 첫단추 마진 계산기 styles.css를 고쳤다. */
:root{
  --paper:#fdfdfe; --board:#f5f6f8; --board-line:#e8ebf0; --surface:#ffffff; --line:#e1e4e9;
  --ink:#141414; --ink-2:#474747; --ink-3:#636363; --field-line:#8a8a8a;
  --money:#3b4cd8; --money-ink:#2a37a8; --money-wash:#e3e7ff; --error:#b42318;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.5; word-break:keep-all}
.wrap{max-width:460px; margin:0 auto; padding:16px 16px calc(96px + env(safe-area-inset-bottom))}

.top{margin:4px 0 14px}
.brand{margin:0; font-weight:800; font-size:18px; letter-spacing:-.03em; display:flex; align-items:center; gap:7px}
.mark{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(145deg,#4a5be6,#2a37a8)}
.mark svg{width:24px; height:24px; display:block}
.on{color:var(--money)}
h1{margin:6px 0 0; font-size:26px; font-weight:800; letter-spacing:-.04em; line-height:1.2}

.result{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:18px 18px 16px; box-shadow:0 1px 0 var(--board-line)}
.result-head{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink-3)}
.badge{background:var(--money-wash); color:var(--money-ink); font-weight:700; font-size:12px; border-radius:999px; padding:2px 9px; white-space:nowrap}
.badge[hidden]{display:none}
.be{margin:8px 0 2px; display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.be-label{font-size:15px; font-weight:700}
.be strong{font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1.05; font-variant-numeric:tabular-nums}
.verdict{margin:4px 0 14px; font-size:14px; font-weight:600; color:var(--ink-2)}
.verdict:empty{display:none}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.kpis div{background:var(--board); border-radius:14px; padding:10px 12px}
.kpis span{display:block; font-size:12px; color:var(--ink-3); line-height:1.35}
.kpis strong{display:block; margin-top:4px; font-size:19px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.money{color:var(--money)}
.deficit{color:var(--error)}
.err-summary{margin:10px 0 0; font-size:13px; color:var(--error)}

.ledger{margin-top:12px; background:var(--board); border:1px solid var(--board-line); border-radius:20px; padding:14px 16px}
.ledger[hidden]{display:none}
.ledger-head{display:flex; justify-content:space-between; align-items:baseline}
.ledger-head span{font-size:12px; color:var(--ink-3)}
.ledger dl{display:grid; grid-template-columns:1fr auto; margin:10px 0 0; gap:7px 0; font-size:15px; font-variant-numeric:tabular-nums}
.ledger dt{color:var(--ink-2)}
.ledger dd{margin:0; text-align:right}
.ledger .sub{font-weight:700; color:var(--ink); padding-top:7px; border-top:1px dashed var(--field-line)}
.ledger-total{display:flex; justify-content:space-between; align-items:baseline; margin:10px 0 0; padding-top:10px; border-top:2px solid var(--ink)}
.ledger-total span{font-weight:700}
.ledger-total strong{font-size:24px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.excluded{margin:10px 2px 0; font-size:12px; color:var(--ink-3)}

.inputs{margin-top:24px}
.form-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
h2{margin:0; font-size:17px; letter-spacing:-.02em}
.actions{display:flex; gap:6px}
.actions button{font:inherit; font-size:13px; font-weight:700; border-radius:6px; padding:7px 12px; min-height:36px; border:1px solid var(--ink); background:var(--surface); color:var(--ink); cursor:pointer}
.actions button:last-child{background:var(--ink); color:var(--surface)}
.field{display:block; padding:12px 0; border:0; border-bottom:1px solid var(--line); margin:0; min-width:0}
.name{font-size:14px; font-weight:700; padding:0}
.name b{font-size:11px; font-weight:700; color:var(--ink-3); border:1px solid var(--line); border-radius:6px; padding:0 5px; margin-left:4px}
.field small{display:block; font-size:12px; color:var(--ink-3); margin-top:1px}
.box{display:flex; align-items:center; margin-top:6px; border:1.5px solid var(--field-line); border-radius:6px; padding:0 14px; background:var(--surface)}
.box:focus-within{border-color:var(--ink); box-shadow:0 0 0 3px var(--money-wash)}
.box input{flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; font-size:20px; font-weight:700; padding:11px 0; text-align:right; font-variant-numeric:tabular-nums}
.box input::placeholder{color:#b9bdc4; font-weight:500}
.box i{font-style:normal; color:var(--ink-3); margin-left:6px; font-size:15px}
.box:has(input[aria-invalid="true"]){border-color:var(--error)}
.msg{display:block; font-style:normal; font-size:12px; color:var(--error); margin-top:4px}
.msg:empty{display:none}

.seg{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; margin:0}
.seg span{display:block; height:100%; text-align:center; font-size:13px; font-weight:700; line-height:1.3; padding:9px 4px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer}
.seg span small{display:inline; font-size:11px; font-weight:500; color:var(--ink-3); margin:0}
.seg input:checked + span{border-color:var(--ink); background:var(--ink); color:var(--surface)}
.seg input:checked + span small{color:#cfcfcf}
.seg input:focus-visible + span{box-shadow:0 0 0 3px var(--money-wash)}
.vat-note{margin-top:8px !important}

.ship-toggle{display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:10px 12px; min-height:44px; font:inherit; font-size:14px; font-weight:700; color:var(--ink); background:var(--board); border:0; border-radius:10px; cursor:pointer; text-align:left}
.ship-toggle::before{content:""; width:18px; height:18px; flex:none; border:1.5px solid var(--ink); border-radius:5px; background:var(--surface)}
.ship-toggle[aria-expanded="true"]::before{background:var(--ink); box-shadow:inset 0 0 0 3px var(--surface)}
.ship .sub{display:block; margin-top:12px}
.ship-note{margin:10px 0 0; font-size:12px; color:var(--ink-3)}
#shipSimple[hidden],#shipPaid[hidden]{display:none}

.next{margin-top:22px; background:var(--money-wash); border-radius:16px; padding:14px 16px; font-size:14px; color:var(--ink-2)}
.next p{margin:0}
.next strong{color:var(--ink)}
.privacy{font-size:12px; color:var(--ink-3); margin:14px 2px 0}

.dock{position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:baseline; justify-content:center; gap:10px; background:var(--ink); color:var(--surface); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); font-variant-numeric:tabular-nums}
.dock[hidden]{display:none}
.dock span{font-size:13px; color:#cfcfcf}
.dock strong{font-size:20px}
.dock .money{color:#9aa6ff}
.dock .deficit{color:#ff8a80}

.howto{margin:0 0 14px; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px 18px}
.howto h2{font-size:19px; letter-spacing:-.03em}
.howto ol{margin:10px 0 0; padding:0; list-style:none; counter-reset:step; display:grid; gap:10px}
.howto li{counter-increment:step; position:relative; padding-left:34px}
.howto li::before{content:counter(step); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--surface); font-size:13px; font-weight:800; display:grid; place-items:center}
.howto li b{display:block; font-size:15px}
.howto li span{display:block; font-size:13px; color:var(--ink-2)}
.howto details{margin-top:4px}
.howto summary{cursor:pointer; font-size:13px; font-weight:700; color:var(--money-ink); min-height:32px; display:flex; align-items:center}
.levers{width:100%; border-collapse:collapse; margin-top:6px; font-size:13px; font-variant-numeric:tabular-nums}
.levers th{font-size:11px; font-weight:700; color:var(--ink-3); text-align:right; padding:0 0 4px}
.levers th:first-child,.levers td:first-child{text-align:left}
.levers td{padding:6px 0; border-top:1px solid var(--line); text-align:right; white-space:nowrap}
.levers td:first-child{white-space:normal; padding-right:6px}
.howto .note{margin:8px 0 0; font-size:12px; color:var(--ink-3)}