/* 급여계산 2026 — 다크 대시보드 (design: 급여계산 2026.dc.html) */
:root{
  --bg:#0A0F1E; --panel:#141B2D; --card:#1A2438; --input:#1E2D42;
  --line:#253548; --fg:#E8EDF5; --muted:#8896A7;
  --accent:#00E676; --accent-dim:#00B259; --danger:#FF5252;
  --sans:'Noto Sans KR','Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:180ms cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{font-family:var(--sans);color:var(--fg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dim)}
::selection{background:rgba(0,230,118,.25)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
input,select,button{font-family:inherit}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- shell ---- */
.shell{display:flex;align-items:stretch;min-height:100vh}
.side{width:252px;flex:none;background:var(--panel);border-right:.5px solid var(--line);display:flex;flex-direction:column;padding:22px 14px 18px}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;color:var(--fg)}
.brand:hover{color:var(--fg)}
.mark{width:40px;height:40px;flex:none;border-radius:8px;border:2px solid var(--accent);box-shadow:0 0 16px rgba(0,230,118,.3);display:flex;align-items:center;justify-content:center;font:500 17px/1 var(--mono);color:var(--accent)}
.bt{display:flex;flex-direction:column;gap:4px}
.bt b{font:700 15px/1 var(--sans);letter-spacing:2px}
.bt i{font:600 10px/1 var(--mono);letter-spacing:1.5px;color:var(--muted);font-style:normal}

.side nav ol{counter-reset:navno -1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font:500 14px/1.4 var(--sans);color:var(--muted);transition:background var(--ease),color var(--ease)}
.side nav a::before{counter-increment:navno;content:counter(navno,decimal-leading-zero);font:400 11px/1 var(--mono);opacity:.6;width:16px;flex:none}
.side nav a:hover{background:#1A2438;color:var(--fg)}
.side nav a[aria-current]{background:rgba(0,230,118,.15);color:var(--accent)}
.side-foot{margin-top:auto;border-top:.5px solid var(--line);padding:14px 8px 0;display:flex;flex-direction:column;gap:8px}
.side-foot b{font:600 10px/1 var(--mono);letter-spacing:1.5px;color:var(--muted)}
.side-foot span{font:400 11px/1.6 var(--sans);color:var(--muted)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:16px 32px;border-bottom:.5px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.code{font:600 11px/1 var(--mono);letter-spacing:1.5px;color:var(--muted)}
.theme-btn{margin-left:auto;padding:6px 12px;border-radius:999px;background:transparent;border:.5px solid var(--line);color:var(--muted);font:500 11px/1 var(--mono);letter-spacing:1px;cursor:pointer}
.theme-btn:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.badges{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.badges li{display:flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:8px;background:var(--card);border:.5px solid var(--line)}
.badges b{font:600 10px/1 var(--mono);letter-spacing:1px;color:var(--muted)}
.badges span{font:500 12px/1 var(--mono);color:var(--accent)}
.content{flex:1;padding:36px 32px 64px;max-width:1180px;width:100%}

/* ---- typography ---- */
h1{margin:0 0 8px;font:300 32px/1.3 var(--sans);letter-spacing:-.5px}
h2{margin:2em 0 .6em;font:500 18px/1.4 var(--sans)}
h3{margin:1.4em 0 .4em;font:500 15px/1.5 var(--sans)}
p{margin:0 0 14px;text-wrap:pretty}
.intro{font:400 14px/1.7 var(--sans);color:var(--muted);margin-bottom:24px}
main p:not(.intro):not(.disclaimer){font-size:14px;line-height:1.8;color:var(--muted)}

/* ---- form ---- */
.card{background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:22px;margin:0 0 20px}
.field{margin:0 0 16px}
.field label{display:block;font:600 11px/1 var(--mono);letter-spacing:1.5px;color:var(--muted);margin-bottom:8px}
input[type=number],input[type=text],input[type=date],select{width:100%;padding:13px 15px;background:var(--input);border:.5px solid var(--line);border-radius:10px;font:400 18px/1.2 var(--mono);color:var(--fg);color-scheme:dark;outline:none}
input:focus,select:focus{border-color:var(--accent)}
input[inputmode=numeric],input[inputmode=decimal],input[type=number]{text-align:right}
.field--lead input{padding:14px 16px;font-weight:300;font-size:30px;letter-spacing:-1px}
/* 단계 번호 — 마크업이 아니라 카운터로 매깁니다 */
.card{counter-reset:step}
.field.step>label::before{counter-increment:step;content:counter(step);
  display:inline-block;width:16px;font:400 11px/1 var(--mono);color:var(--accent)}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:52px;height:52px;flex:none;padding:0;border-radius:10px;
  background:var(--input);border:.5px solid var(--line);color:var(--fg);font:400 22px/1 var(--mono)}
.stepper button:hover{background:var(--line);opacity:1}
.stepper input{flex:1;min-width:0;height:52px;text-align:center;font-weight:300;font-size:30px;padding:0}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 160px}
button{padding:13px 24px;border:.5px solid var(--accent);border-radius:10px;background:var(--accent);color:#000;font:600 14px/1 var(--sans);cursor:pointer;transition:opacity var(--ease)}
button:hover{opacity:.85}
button:active{transform:scale(.98)}
button.ghost{background:var(--input);border-color:var(--line);color:var(--fg);font-weight:500}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 0;padding:0;list-style:none}
.chips button{padding:9px 13px;border-radius:8px;background:#0D2137;border:.5px solid rgba(0,230,118,.3);color:var(--accent);font:500 13px/1 var(--mono);transition:background var(--ease)}
.chips button:hover{background:rgba(0,230,118,.15);opacity:1}

/* 선택 카드 — 라디오를 숨기고 label 을 카드로 (상태 JS 없음) */
.opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.opts input,.seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.opts label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:10px;background:var(--input);border:.5px solid var(--line);color:var(--muted);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.opts label span{font:400 13px/1.4 var(--sans)}
.opts label b{font:500 12px/1 var(--mono);flex:none}
.opts label:hover{border-color:var(--muted)}
.opts label:has(:checked){background:rgba(0,230,118,.15);border-color:rgba(0,230,118,.4);color:var(--accent)}

/* 세그먼트 토글 */
.seg{display:flex;gap:6px;padding:4px;margin:0 0 16px;list-style:none;background:var(--panel);border:.5px solid var(--line);border-radius:10px}
.seg li{flex:1;min-width:0}
.seg label{display:block;text-align:center;padding:10px 4px;border-radius:8px;font:500 13px/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap;transition:background var(--ease),color var(--ease)}
.seg label:hover{color:var(--fg)}
.seg label:has(:checked){background:rgba(0,230,118,.15);color:var(--accent)}
.opts label:has(:focus-visible),.seg label:has(:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* 슬라이더 */
.slider{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.slider label{margin:0}
.slider b{font:500 16px/1 var(--mono);color:var(--fg)}
input[type=range]{width:100%;margin:10px 0 12px;accent-color:var(--accent);background:transparent}

/* ---- result ---- */
.result{background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:24px;margin:0 0 20px}
.result>div:first-child{font:600 11px/1 var(--mono);letter-spacing:1.5px;color:var(--muted)}
.result .big{font:300 clamp(36px,5vw,56px)/1 var(--mono);letter-spacing:-2px;color:var(--accent);margin:8px 0 4px}
.result .big small{font:400 18px/1 var(--sans);color:var(--muted);margin-left:8px;letter-spacing:0}
.result .big.bad{font:400 22px/1.3 var(--sans);letter-spacing:0;color:var(--danger)}
.bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--input);margin:16px 0 10px}
.bar i{display:block;height:100%}
.s0{background:var(--accent)}
.s1{background:rgba(0,230,118,.55)}
.s2{background:rgba(0,230,118,.32)}
.s3{background:rgba(0,230,118,.18)}
.s4{background:var(--line)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0 0 4px;padding:0;font-size:11px}
.legend li{display:flex;align-items:center;gap:6px;color:var(--muted)}
.legend em{display:block;width:8px;height:8px;border-radius:999px;flex:none}
.legend b{font:500 11px/1 var(--mono);color:var(--fg)}

/* ---- table ---- */
table{width:100%;border-collapse:collapse;margin:10px 0}
th,td{padding:11px 8px;border-bottom:.5px solid var(--line);text-align:right;font:500 13px/1 var(--mono);color:var(--fg);white-space:nowrap}
th{font:600 10px/1 var(--mono);letter-spacing:1.5px;color:var(--muted)}
th:first-child,td:first-child{text-align:left;font:400 13px/1.4 var(--sans);color:var(--muted);white-space:normal}
tr.tot td{font-weight:500;color:var(--accent)}
tr.tot td:first-child{font-weight:500;color:var(--fg)}
tr.on td{color:var(--accent)}
tr.on td.num{font-size:20px;letter-spacing:-.5px}
td.num{font-variant-numeric:tabular-nums}
/* 표 셀은 flex 로 만들지 않습니다 — 셀 상자를 깨지 않도록 인라인으로 둡니다 */
td.rate{text-align:right;white-space:nowrap}
.tbar{display:inline-block;vertical-align:middle;width:56px;height:6px;margin-right:8px;
  border-radius:999px;background:var(--input);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
td.rate b{display:inline-block;width:44px;text-align:right;font:400 11px/1 var(--mono);color:var(--muted)}

/* ---- prose blocks ---- */
.steps ol{padding-left:18px;font:400 13px/1.9 var(--sans);color:var(--muted)}
.note,.note-inline{font:400 12px/1.7 var(--sans);color:var(--muted)}
.note{background:var(--panel);border-radius:8px;padding:12px;margin:12px 0}
details{border-bottom:.5px solid var(--line);padding:12px 0}
summary{cursor:pointer;font:500 14px/1.5 var(--sans);color:var(--fg)}
details div{font-size:13px;line-height:1.8;color:var(--muted);padding-top:8px}
.related ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.related li a{display:inline-block;padding:9px 14px;border-radius:999px;background:var(--card);border:.5px solid var(--line);color:var(--muted);font-size:13px;transition:border-color var(--ease),color var(--ease)}
.related li a:hover{border-color:var(--accent);color:var(--accent)}
.disclaimer{font:400 12px/1.7 var(--sans);color:var(--muted);border-top:.5px solid var(--line);padding-top:18px;margin-top:36px}

/* ---- home: kicker + 기준 숫자 ---- */
.kicker{margin:28px 0 14px;font:600 11px/1 var(--mono);letter-spacing:1.5px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;list-style:none;padding:0;margin:0 0 20px}
.stats li{display:flex;flex-direction:column;gap:8px;background:var(--card);border:.5px solid var(--line);border-radius:12px;padding:18px 20px}
.stats span{font:600 11px/1 var(--mono);letter-spacing:1.5px;color:var(--muted)}
.stats b{font:300 30px/1 var(--mono);letter-spacing:-1px;color:var(--fg)}
.stats li:last-child b{font-size:20px;letter-spacing:0}

/* ---- tool grid (home) ---- */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;list-style:none;padding:0;margin:0 0 20px}
.tools a{display:flex;flex-direction:column;gap:6px;height:100%;background:var(--card);border:.5px solid var(--line);border-radius:12px;padding:18px;transition:border-color var(--ease)}
.tools a:hover{border-color:var(--accent)}
.tools strong{font:500 16px/1.4 var(--sans);color:var(--fg)}
.tools span{font:400 13px/1.6 var(--sans);color:var(--muted)}

footer{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;border-top:.5px solid var(--line);padding-top:18px;margin-top:28px;font:400 12px/1.7 var(--sans);color:var(--muted)}
footer ul{list-style:none;display:flex;gap:16px;flex-wrap:wrap;padding:0;margin:0;flex:1;min-width:240px}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}
footer p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:1px}

/* ---- PWA 화면 (구조는 pwa.css, 여기서는 색과 활자만) ---- */
.pwa-offline{background:var(--panel);border-bottom:.5px solid var(--line);
  font:400 13px/1.4 var(--sans);color:var(--fg)}
.pwa-install{background:var(--panel);border-top:.5px solid var(--line);box-shadow:0 -12px 32px rgba(0,0,0,.4)}
.pwa-install-mark{border:.5px solid var(--accent);border-radius:8px;font:400 22px/1 var(--mono);color:var(--accent)}
.pwa-install-text strong{font:500 15px/1.4 var(--sans);color:var(--fg)}
.pwa-install-text span{font:400 13px/1.6 var(--sans);color:var(--muted)}
.pwa-tabs{background:var(--panel);border-top:.5px solid var(--line)}
.pwa-tabs a{border-bottom:3px solid transparent;color:var(--muted);font:400 11px/1 var(--sans)}
.pwa-tabs a span:first-child{font:400 17px/1 var(--mono)}
.pwa-tabs a[aria-current]{border-bottom-color:var(--accent);color:var(--accent)}

/* ---- responsive: 사이드바를 상단 스크롤 바로 ---- */
@media (max-width:860px){
  .shell{flex-direction:column}
  .side{width:auto;border-right:0;border-bottom:.5px solid var(--line);padding:14px 16px}
  .brand{padding-bottom:14px}
  .side nav ol{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .side nav ol::-webkit-scrollbar{display:none}
  .side nav a{white-space:nowrap}
  .side nav a::before{display:none}
  .side-foot{display:none}
  .topbar{padding:12px 16px}
  .content{padding:24px 16px 56px}
  h1{font-size:26px}
}
/* 휴대폰 */
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stats li{padding:14px 16px}
  .stats b{font-size:26px}
  th,td{padding:10px 6px;font-size:12px}
  th:first-child,td:first-child{font-size:12px}
  .tbar{display:none}            /* 좁은 화면에서는 % 만 남깁니다 */
  td.rate b{width:auto;font-size:12px}
  .stepper button{width:46px;height:46px}
  .stepper input{height:46px;font-size:26px}
  .result .big{letter-spacing:-1px}
  .result,.card{padding:18px}
}