/* C · 전표: 회색 바닥 위 흰 종이, Pretendard, 점선 구분, 인주색 도장 하나. 색은 도장과 마이너스에만. */
:root{
  color-scheme:light;
  --ground:#E9ECF0; --bg:#FFFFFF; --ink:#17191C; --sub:#686E77; --line:#E6E9ED; --edge:#D3D8DE; --bar:#D3D8DE; --soft:#F3F5F8; --dash:#B9BEC6;
  --accent:#D13B2E; --ok:#2F6B4F;
  --f:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --serif:var(--f);
  --pad:24px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
button,input{font:inherit;color:inherit}
a{color:inherit}
b,strong{font-weight:600}
.muted{color:var(--sub);font-size:13.5px;margin:0}
.hp{position:absolute;left:-9999px}

.top{position:sticky;top:0;z-index:5;background:rgba(233,236,240,.94);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--pad);max-width:1120px;margin:0 auto}
.logo{font-weight:800;font-size:14px;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.top-sub{font-size:13px;color:var(--sub)}

main{max-width:520px;margin:0 auto;padding:4px var(--pad) 8px;background:var(--bg);min-height:calc(100vh - 56px)}
main.wide{max-width:1120px}
.bar{height:2px;background:var(--line);margin:4px 0 32px}
.bar i{display:block;height:100%;width:16%;background:var(--ink);transition:width .3s}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
.step{display:flex;flex-direction:column;gap:24px;padding-bottom:24px}
.q{font-size:26px;line-height:1.42;font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:balance}
.q small{display:block;font-size:14.5px;font-weight:400;color:var(--sub);letter-spacing:0;margin-top:10px;line-height:1.6}

/* 업종 */
.opts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.opt{display:flex;align-items:center;gap:16px;padding:18px 0;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;width:100%}
.opt .ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;font-weight:500;color:var(--sub);flex:none}
.opt b{display:block;font-size:16px;font-weight:500}
.opt small{font-size:13px;color:var(--sub)}
.opt:hover .ic{border-color:var(--ink)}
.opt[aria-checked="true"] .ic{background:var(--ink);border-color:var(--ink);color:#fff}

/* 지도 */
.search{display:flex;align-items:center;gap:8px;height:50px;border:1px solid var(--edge);border-radius:12px;padding:0 14px;color:var(--sub)}
.search:focus-within{border-color:var(--ink)}
.search svg{width:16px;height:16px;flex:none}
.search input{flex:1;border:0;background:transparent;outline:none;font-size:15px;color:var(--ink);min-width:0}
.map{height:min(52vh,420px);border-radius:12px;background:var(--soft);margin-top:12px;overflow:hidden}
.seg{display:flex;gap:8px;margin-top:12px}
.seg button{flex:1;border:1px solid var(--edge);background:transparent;min-height:44px;border-radius:8px;font-size:14px;font-weight:500;color:var(--sub);cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.sheet{padding:16px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;margin-top:4px}
.sheet b{font-size:15px;font-weight:500}
.sheet span{font-size:13.5px;color:var(--sub)}
.sheet span em{font-style:normal;color:var(--accent);font-weight:600}

/* 입력 */
.fields{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.fld{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);cursor:text}
.fld > span:first-child{font-size:15px;min-width:0}
.fld small{display:block;font-size:12.5px;color:var(--sub)}
.in{display:flex;align-items:baseline;gap:4px;flex:none}
.in input{width:120px;border:0;background:transparent;text-align:right;font-size:20px;font-weight:400;outline:none;font-variant-numeric:tabular-nums;padding:4px 0;border-bottom:1px solid transparent}
.in input:focus{border-bottom-color:var(--ink)}
.in em{font-style:normal;font-size:14px;color:var(--sub)}
.tog{display:flex;align-items:center;gap:8px;font-size:14px;padding:14px 0}
.tog input{width:18px;height:18px;accent-color:var(--ink)}
.seg.wide{margin-top:0}
details.more summary{cursor:pointer;font-size:14px;font-weight:500;color:var(--sub);padding:8px 0;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:' +'}
details.more[open] summary::after{content:' −'}

/* 버튼 */
.btn{min-height:54px;border-radius:8px;border:1px solid transparent;font-size:16px;font-weight:500;display:grid;place-items:center;cursor:pointer;text-decoration:none;padding:0 24px}
.btn.p{background:var(--ink);color:#fff}
.btn.p:hover{background:#2C3036}
.btn.s{background:transparent;border-color:var(--edge);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.opt:focus-visible,.seg button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cta{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:8px;padding:12px var(--pad) calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(255,255,255,0),#fff 30%);max-width:568px;margin:0 auto}
.cta .btn.s{flex:0 0 96px}
.cta .btn.p{flex:1}

/* 결과 */
.r-main,.r-side{display:flex;flex-direction:column;min-width:0}
.r-main{gap:0}
.hero{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:4px}
.hero > span:first-child{font-size:14px;color:var(--sub)}
.hero b{font-weight:700;font-size:44px;line-height:1.12;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.hero b small{font-size:20px;font-weight:600;letter-spacing:0;margin-left:3px}
.hero .muted{margin-top:8px;font-size:14px}
.lede{margin:22px 0 0;font-size:16.5px;line-height:1.65;letter-spacing:-.01em;text-wrap:pretty}
.rows{display:flex;flex-direction:column}
.r-main .rows{margin-top:26px;padding-top:12px;border-top:1.5px dashed var(--dash)}
.r-main .rows .r{border-top:0;padding:9px 0}
.r-main .rows .r:last-child{border-bottom:0}
.r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;border-top:1px solid var(--line);font-size:15px}
.r:last-child{border-bottom:1px solid var(--line)}
.r > span{color:var(--sub)}
.r small{display:block;font-size:12.5px;color:var(--sub)}
.r b{font-weight:400;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.r b i{font-style:normal;color:var(--sub);font-size:13px;margin-left:8px}
.r.key b{font-weight:600}
.r.sum > span{color:var(--ink);font-weight:600}
.r.sum b{font-weight:600}
.r b.neg{color:var(--accent)} .r b.pos{color:var(--ok)}
.r-main .only-desk{margin-top:32px}

.sec{margin-top:32px;padding-top:24px;border-top:1.5px dashed var(--dash);display:flex;flex-direction:column;gap:14px}
.sec h2{margin:0;font-size:13px;font-weight:600;color:var(--sub);letter-spacing:.04em}
.sec .muted{font-size:13px}
.cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:6px;height:150px}
.col b{font-size:12.5px;font-weight:400;text-align:center;font-variant-numeric:tabular-nums}
.col i{display:block;background:var(--bar);border-radius:2px;min-height:3px}
.col span{font-size:12px;color:var(--sub);text-align:center;padding-top:4px}
.col.base b{font-weight:600} .col.base i{background:var(--ink)} .col.base span{color:var(--ink)}
.col.neg b{color:var(--accent)} .col.neg i{background:var(--accent)}
.basis{margin:0;padding-left:18px;font-size:13px;color:var(--sub);display:flex;flex-direction:column;gap:6px}
details.sec summary{font-size:15px;color:var(--ink)}

.consult{margin-top:40px;padding-top:28px;gap:12px;scroll-margin-top:72px}
.consult h2{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.consult form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.inp{border:1px solid var(--edge);border-radius:10px;padding:10px 16px;display:flex;flex-direction:column;gap:2px}
.inp span{font-size:12px;color:var(--sub)}
.inp input{border:0;background:transparent;outline:none;font-size:16px;padding:2px 0}
.inp:focus-within{border-color:var(--ink)}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--sub);line-height:1.5}
.agree input{margin:2px 0 0;width:16px;height:16px;flex:none;accent-color:var(--ink)}
.consult .btn{margin-top:8px}
.msg{font-size:14px;padding:12px 0;margin:0}
.msg.ok{color:var(--ok)} .msg.err{color:var(--accent)}
.fine{font-size:12px;color:var(--sub);margin:32px 0 0}
.only-desk{display:none}

@media (min-width:960px){
  main.wide .result{display:grid;grid-template-columns:420px 1fr;gap:96px;align-items:start}
  main.wide .r-main{position:sticky;top:76px}
  main.wide{padding:8px 48px 48px;margin-top:16px;margin-bottom:32px}
  main.wide .r-side > .sec:first-child,main.wide .r-side > .sec[hidden] + .sec:not([hidden]){margin-top:0;border-top:0;padding-top:0}
  .only-desk{display:grid}
  body.on-result .cta{display:none}
  body.on-result{padding-bottom:48px}
  .q{font-size:30px}
}

/* 리포트 */
body.on-report main,body.on-report .cta,body.on-report .top{display:none}
body.on-report{padding-bottom:48px}
.report{max-width:794px;margin:16px auto;padding:0 40px 48px;background:var(--bg)}
.rbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;gap:8px;padding:12px 0;background:rgba(255,255,255,.95);backdrop-filter:blur(8px)}
.rbar .btn{min-height:44px;font-size:15px;padding:0 20px}
.rpage{display:flex;flex-direction:column}
.rmeta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--sub);padding-top:24px}
.rmeta b{color:var(--ink);font-weight:800;letter-spacing:.06em}
.rcover{padding-top:48px}
.rcover > span{font-size:14px;color:var(--sub)}
.rcover .big{display:block;font-weight:700;font-size:72px;line-height:1.05;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:8px}
.rcover .big small{font-size:26px;font-weight:600;letter-spacing:0;margin-left:8px}
.rcover .lede{max-width:560px;font-size:17px;margin-top:28px}
.rcover .rt{margin-top:44px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.stats div{display:flex;flex-direction:column;gap:2px;min-width:0}
.stats span{font-size:12px;color:var(--sub)}
.stats b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rs{padding-top:40px;display:flex;flex-direction:column;gap:12px;min-width:0}
.rs h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em}
.rs h3{margin:8px 0 0;font-size:13px;font-weight:500;color:var(--sub)}
.rnote{font-size:12px;color:var(--sub);margin:0}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.rt{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.rt th{text-align:left;font-size:12px;font-weight:400;color:var(--sub);padding:8px 0;border-bottom:1px solid var(--ink)}
.rt td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.rt.num td:not(:first-child),.rt.num th:not(:first-child){text-align:right;white-space:nowrap;padding-left:12px}
.rt tr.sum td{font-weight:600}
.rt tr.base td{font-weight:600}
.rt tr.ok td{font-weight:600}
.rt tr.dim td{color:var(--sub)}
.rt .neg{color:var(--accent)}
.rt .acc{color:var(--accent)}
.checks{margin:0;padding:0;list-style:none;counter-reset:ck;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;row-gap:20px;font-size:13.5px}
.checks li{counter-increment:ck;display:grid;grid-template-columns:24px 1fr;gap:2px}
.checks li::before{content:counter(ck);color:var(--ink);font-weight:700}
.checks b{display:block;font-weight:600;margin-bottom:2px}
.checks span{color:#3D3C39}
.rcta{margin-top:48px;padding:24px 0;border-top:1.5px dashed var(--dash);border-bottom:1.5px dashed var(--dash);display:flex;align-items:center;justify-content:space-between;gap:20px}
.rcta b{display:block;font-size:18px;font-weight:700}
.rcta span{font-size:13.5px;color:var(--sub)}
.rcta .btn{flex:none}
.rfoot{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--sub);margin-top:24px}
.print-only{display:none}
@media (max-width:640px){
  .duo,.checks{grid-template-columns:1fr}
  .duo .rs + .rs{padding-top:40px}
  .rcover{padding-top:48px}
  .rcover .big{font-size:72px}
  .rcover .big small{font-size:26px}
  .rcover .lede{font-size:17px}
  .stats{grid-template-columns:1fr;gap:16px}
  .rcta{flex-direction:column;align-items:stretch}
  .rt{font-size:12.5px}
}

@media print{
  @page{size:A4;margin:16mm 18mm}
  body{padding:0;font-size:12px;background:#fff}
  .report{margin:0}
  body > *:not(#report){display:none!important}
  #report{display:block!important;max-width:none;padding:0}
  .no-print{display:none!important}
  .print-only{display:block}
  .rpage.cover{min-height:255mm;break-after:page;display:flex;flex-direction:column}
  .rpage.cover .rmeta{padding-top:0}
  .rpage.cover .rfoot{margin-top:auto}
  .rcover{padding-top:64px}
  .rs{padding-top:36px}
  .rs h2,.rs h3{break-after:avoid}
  .rt tr,.checks li,.stats{break-inside:avoid}
  #report *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.r.neg-row b{color:var(--accent)}
body.on-result .bar{visibility:hidden;margin-bottom:8px}

/* 전표 요소 */
.docmeta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;padding-top:20px}
.docmeta b{color:var(--ink);font-weight:800;letter-spacing:.06em}
.docsub{font-size:12.5px;color:var(--sub);margin-top:4px}
hr.dash{border:0;border-top:1.5px dashed var(--dash);margin:18px 0 22px;width:100%}
.stamp{position:absolute;right:0;top:-6px;width:84px;height:84px;border-radius:50%;border:2.5px solid var(--accent);color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-12deg);opacity:.88;font-size:11px;line-height:1.3;text-align:center;pointer-events:none}
.stamp span:first-child{font-size:13px;font-weight:800}
.hero > span:first-child,.hero .muted{padding-right:92px}
.bigrow{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.bigrow .stamp{position:static;width:116px;height:116px;flex:none;font-size:13px}
.bigrow .stamp span:first-child{font-size:17px}
.rt th{border-bottom:1px solid var(--ink)}
@media (max-width:640px){.report{margin:0;padding:0 var(--pad) 48px}.bigrow .stamp{width:88px;height:88px;font-size:11px}.bigrow .stamp span:first-child{font-size:13px}}
/* 결과 화면은 리포트 머리줄이 브랜드를 대신함 */
body.on-result .top{display:none}
body.on-result main{margin-top:16px}
@media (max-width:559px){body.on-result main{margin-top:0}}
.docmeta .brand{color:var(--ink);font-weight:800;letter-spacing:.06em;text-decoration:none}
.docmeta .brand:hover{text-decoration:underline}