:root{
  --green:#1E4636; --sage:#5B8A72; --mist:#D6E3DB; --paper:#FBFAF7; --ink:#33463D; --muted:#5B6F64;
  --line:#CFDAD3; --err:#A63A2E; --err-bg:#F7E3E0; --warn:#8A5A00; --warn-bg:#FBEFD0; --ok:#2F6B4B; --ok-bg:#E3F0E8;
  --info-bg:#EAF0EC;
  --on-green:#fff;      /* var(--green)·var(--ok)·var(--err) 바탕 위의 글자색: 어두운 화면에서는 이 색들이 밝아지므로 글자가 어두워야 읽힌다 */
  --bar:#1E4636;        /* 맨 위 머리말 바탕(밝은·어두운 화면 모두 짙은 초록) */
}
@media (prefers-color-scheme: dark){
  :root{--paper:#14211B; --ink:#E4ECE7; --muted:#9FB4A9; --line:#2E4439; --mist:#223A2F; --green:#8CC4A6; --sage:#7FB598;
    --err:#F0A59B; --err-bg:#3A1F1B; --warn:#F1CD7A; --warn-bg:#3A2F14; --ok:#8CD0A9; --ok-bg:#183326; --info-bg:#1B2D25; --on-green:#0f1c16;}
}
*{box-sizing:border-box}
html{font-size:15px;scroll-padding-top:3.8rem}      /* #주소(제목으로 이동)로 갈 때 고정 머리말이 대상의 윗부분을 덮지 않게 한다 */
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;line-height:1.55}
h1,h2,h3{font-family:"Noto Serif KR","Batang",serif;color:var(--green);margin:.2em 0 .5em}
h1{font-size:1.6rem} h2{font-size:1.2rem;margin-top:1.4em} h3{font-size:1.05rem}
a{color:var(--green);text-underline-offset:2px}
header.top{background:var(--bar);color:#fff;padding:.55rem 1.1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center}
header.top .brand{font-family:"Noto Serif KR",serif;font-weight:700;letter-spacing:.02em;margin-right:.6rem}
header.top a{color:#E8F1EC;text-decoration:none;font-size:.93rem;padding:.15rem .1rem;border-bottom:2px solid transparent}
header.top a:hover{border-bottom-color:#BFD8CA}
.badge-n{background:#E7B74A;color:#2a1d00;border-radius:999px;padding:0 .45rem;font-size:.75rem;margin-left:.2rem}
.badge-n.err{background:#C0463A;color:#fff}
main{max-width:1180px;margin:0 auto;padding:1.1rem 1.1rem 3rem}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin:.8rem 0}
@media (prefers-color-scheme: dark){.card{background:#192A22}}
.grid{display:grid;gap:.8rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat{border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:#fff}
@media (prefers-color-scheme: dark){.stat{background:#192A22}}
.stat b{display:block;font-size:1.5rem;color:var(--green)}
.stat.err b{color:var(--err)} .stat.warn b{color:var(--warn)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{border-bottom:1px solid var(--line);padding:.42rem .5rem;text-align:left;vertical-align:top;word-break:keep-all;overflow-wrap:anywhere}
th{background:var(--mist);color:var(--green);font-weight:700;white-space:nowrap}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.pill{white-space:nowrap;display:inline-block;border-radius:999px;padding:.05rem .55rem;font-size:.78rem;font-weight:700}
.pill.error{background:var(--err-bg);color:var(--err)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--info-bg);color:var(--muted)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.v{font-weight:700;border-radius:4px;padding:0 .3rem}
.v.g{color:var(--ok)} .v.o{color:var(--warn)} .v.t{color:var(--err)}
form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;margin:.4rem 0}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.15rem}
input[type=text],input[type=date],input[type=number],input[type=month],select,textarea,input[type=file]{
  width:100%;padding:.45rem .55rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}
@media (prefers-color-scheme: dark){input[type=text],input[type=date],input[type=number],input[type=month],select,textarea,input[type=file]{background:#122019}}
textarea{min-height:5.5rem}
button,.btn{background:var(--green);color:var(--on-green);border:0;border-radius:6px;padding:.5rem .95rem;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
button.sub,.btn.sub{background:transparent;color:var(--green);border:1px solid var(--green)}
button.danger{background:var(--err)}
button.sub.danger,.btn.sub.danger{background:transparent;color:var(--err);border:1px solid var(--err)}      /* 윤곽선 삭제 버튼: 초록 글자(.sub)가 빨간 바탕(.danger)과 겹쳐 안 보이던 것 */
button:disabled{opacity:.5;cursor:not-allowed}
.flash{padding:.6rem .8rem;border-radius:8px;margin:.5rem 0;border:1px solid var(--line)}
.flash.ok{background:var(--ok-bg);color:var(--ok)} .flash.error{background:var(--err-bg);color:var(--err)} .flash.warn{background:var(--warn-bg);color:var(--warn)}
.muted{color:var(--muted)} .small{font-size:.85rem}
.note{border-left:4px solid var(--sage);background:var(--info-bg);padding:.55rem .8rem;border-radius:0 8px 8px 0;margin:.6rem 0}
.note.warn{border-color:#C9962B;background:var(--warn-bg)}
.note.err{border-color:var(--err);background:var(--err-bg)}
pre.trace{white-space:pre-wrap;background:var(--info-bg);padding:.6rem .8rem;border-radius:8px;font-size:.85rem;margin:.3rem 0}
details{margin:.3rem 0} summary{cursor:pointer;color:var(--green);font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.hint{font-size:.82rem;color:var(--muted);margin:.15rem 0 .5rem}
.kv{display:grid;grid-template-columns:11rem 1fr;gap:.2rem .8rem}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.tag{font-size:.75rem;background:var(--mist);color:var(--green);border-radius:4px;padding:0 .35rem;margin-left:.3rem}
.judge{font-size:.75rem;background:var(--warn-bg);color:var(--warn);border-radius:4px;padding:0 .35rem;margin-left:.3rem}
.bar{height:10px;background:var(--mist);border-radius:6px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--sage)}
.bar.over>i{background:var(--err)}
@media print{header.top,.actions,form{display:none}}

.nw{white-space:nowrap;overflow-wrap:normal;word-break:normal}

/* ---- 로그인·계정 ---- */
.narrow{max-width:30rem;margin:2rem auto}
form .row.one{grid-template-columns:1fr}
input[type=password]{width:100%;padding:.45rem .55rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}
@media (prefers-color-scheme: dark){input[type=password]{background:#122019}}
header.top .who{margin-left:auto;display:flex;gap:.6rem;align-items:center;color:#E8F1EC;font-size:.9rem}
header.top .who .tag{background:#2c5a45;color:#E8F1EC}
form.inline{display:inline}
button.linkish{background:none;border:0;color:var(--green);text-decoration:underline;padding:0;cursor:pointer;font:inherit;font-size:.9rem}
header.top button.linkish{color:#E8F1EC}            /* 머리줄(짙은 바탕)의 로그아웃만 밝은 글자 — 본문에서는 링크 색(알림함 「숨기기」가 흰 바탕에 안 보이던 문제) */
code{background:var(--info-bg);padding:.05rem .35rem;border-radius:4px;font-size:.9em}
.issued code{font-size:1.1em;user-select:all}

/* ---- 근태 ---- */
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:.2rem}
.subnav{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.4rem 0 .8rem;font-size:.92rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem;margin:.6rem 0}
.stats .stat{border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;background:#fff;font-size:.82rem;color:var(--muted)}
@media (prefers-color-scheme: dark){.stats .stat{background:#192A22}}
.stats .stat b{display:block;font-size:1.35rem;color:var(--green)}
.stats .stat.err b{color:var(--err)} .stats .stat.warn b{color:var(--warn)}
.pnav{align-items:center;gap:.8rem}
.clockcard .big{font-size:1.15rem;margin:.6rem 0}
button.bigbtn{font-size:1.35rem;padding:.9rem 2.2rem;border-radius:12px}
tr.dim td{color:var(--muted)}
.chk{display:inline-flex;gap:.4rem;align-items:center;margin:.2rem .8rem .2rem 0;color:var(--ink);font-size:.9rem}
.chk input{width:auto}
.chkcol .chk{display:flex;margin:.15rem 0}
.chkcol b{display:block;margin:.6rem 0 .1rem;font-size:.9rem;color:var(--ink)}
ul.plain{list-style:none;padding:0;margin:.3rem 0}
ul.plain li{padding:.25rem 0;border-bottom:1px dashed var(--line)}
.noticeitem{border-left:4px solid #C9962B;background:var(--warn-bg);padding:.4rem .7rem;border-radius:0 8px 8px 0;margin:.5rem 0}
.noticeitem.done{border-color:var(--sage);background:var(--info-bg);opacity:.75}
.req{border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;margin:.6rem 0}
.reqhead{font-size:1rem}
.decide{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem}
.decide input[type=text]{flex:1 1 14rem;width:auto}
.decide select{width:auto}
table.compact th,table.compact td{padding:.2rem .5rem}
button.small{padding:.2rem .6rem;font-size:.82rem}
.scrollx{overflow-x:auto}
table.matrix{width:auto;min-width:100%;font-size:.8rem}
table.matrix th.d,table.matrix td.m{text-align:center;padding:.2rem .15rem;min-width:1.75rem;white-space:nowrap}
table.matrix th.nm,table.matrix td.nm{position:sticky;left:0;background:var(--paper);white-space:nowrap;z-index:1}
table.matrix th.we{color:var(--err)}
table.matrix .wk{font-weight:400;font-size:.7rem}
td.m sup{color:var(--err);font-weight:700}

/* 상태 색 (월간표·일별 표) */
.st-work td.m,td.m.st-work{background:var(--ok-bg);color:var(--ok)}
td.m.st-annual,td.m.st-half{background:#DCE9F7;color:#1D4E89}
td.m.st-leave_paid{background:#E6E0F5;color:#4B3A8C}
td.m.st-leave_unpaid{background:#EFE3D5;color:#7A4A12}
td.m.st-absent{background:var(--err-bg);color:var(--err);font-weight:700}
td.m.st-suspect{background:var(--warn-bg);color:var(--warn);font-weight:700}
td.m.st-loa_paid,td.m.st-loa_unpaid{background:#E4E4E4;color:#444}
td.m.st-holiday,td.m.st-off{background:var(--info-bg);color:var(--muted)}
td.m.st-out{background:transparent}
@media (prefers-color-scheme: dark){
  td.m.st-annual,td.m.st-half{background:#1E3550;color:#9CC3EE}
  td.m.st-leave_paid{background:#2D2748;color:#BFB2EE}
  td.m.st-leave_unpaid{background:#40301E;color:#E3BC8A}
  td.m.st-loa_paid,td.m.st-loa_unpaid{background:#333;color:#CCC}
}
tr.st-absent td{background:var(--err-bg)}
tr.st-suspect td{background:var(--warn-bg)}
tr.st-holiday td,tr.st-off td{color:var(--muted)}

@media (max-width:640px){
  main{padding:.7rem}
  header.top{gap:.3rem .8rem}
  header.top .who{margin-left:0;width:100%}
  button.bigbtn{width:100%}
  .kv{grid-template-columns:1fr}
  td input[type=text],td input[type=number],td input[type=date],td input[type=month],td select{min-width:6.5rem}      /* 표 안 입력칸이 몇 글자 폭으로 찌그러지지 않게 한다(표가 넓어지면 카드 안에서 가로로 밀어 본다) */
}

.card>h2:first-child,.card>h3:first-child{margin-top:.1rem}

/* ---- 진행 단계(급여 차수·신고서): 짧은 단계 이름을 알약 모양으로 한 줄에 나열한다.
   번호를 붙여 설명하는 긴 목록은 아래 .steps(번호 배지)이다. 두 가지는 이름을 섞어 쓰지 않는다(같은 클래스를 겹쳐 정의하면 배지가 글자를 덮는다). ---- */
ol.pillsteps{display:flex;flex-wrap:wrap;gap:.3rem .6rem;list-style:none;padding:0;margin:.6rem 0}
ol.pillsteps li{padding:.25rem .8rem;border-radius:999px;background:var(--info-bg);color:var(--muted);font-size:.85rem}
ol.pillsteps li.done{background:var(--ok-bg);color:var(--ok)}
ol.pillsteps li.now{background:var(--green);color:var(--on-green);font-weight:700}
fieldset.plain{border:0;padding:0;margin:0}
fieldset.plain:disabled input{background:var(--info-bg)}
article.payslip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.4rem;max-width:860px;overflow-x:auto}
@media (prefers-color-scheme: dark){article.payslip{background:#192A22}}
article.payslip tr.total td{background:var(--mist);font-weight:700}
article.payslip p.net{font-size:1.2rem;text-align:right;margin:.8rem 0}
@media print{.noprint{display:none!important}article.payslip{border:0;max-width:none;overflow:visible}}

/* ---- 화면별 업무 순서와 역할(guides.py) ---- */
details.page-guide{border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:8px;background:var(--info-bg);padding:.45rem .9rem;margin:.3rem 0 1rem}
details.page-guide>summary{cursor:pointer;font-weight:600;color:var(--green)}
details.page-guide>summary .muted{font-weight:400}
ol.guide-steps{margin:.5rem 0 .3rem;padding-left:1.5rem}
ol.guide-steps li{margin:.28rem 0;line-height:1.55}
ol.guide-steps li.mine{font-weight:600}
ol.guide-steps li:not(.mine){color:var(--muted)}
.who{display:inline-block;font-size:.74rem;font-weight:600;padding:.03rem .45rem;border-radius:999px;margin-right:.35rem;white-space:nowrap;vertical-align:1px}
.who-admin{background:#DCEBE2;color:#1E4636}.who-cons{background:#DDE6F3;color:#22426E}.who-emp{background:#F6E7C8;color:#6B4A0C}.who-both{background:#DCEDEA;color:#1D5550}.who-sys{background:#E7E9E8;color:#4A5550}
@media (prefers-color-scheme: dark){.who-admin{background:#21402F;color:#BFE3CD}.who-cons{background:#22314A;color:#C3D6F2}.who-emp{background:#3D3118;color:#F1D9A6}.who-both{background:#1D3B37;color:#BFE6E0}.who-sys{background:#2B3330;color:#C9D2CD}}
p.guide-note{margin:.2rem 0 .1rem}
@media print{details.page-guide{display:none!important}}

/* ---- 재직·경력증명서(cert) — 밝은 화면·어두운 화면 모두 흰 종이로 보인다 ---- */
article.cert-doc{background:#fff;color:#222;border:1px solid var(--line);max-width:46rem;margin:1rem auto;padding:2.4rem 3rem}
article.cert-doc .cert-no{font-size:.8rem;color:#666;margin:0}
article.cert-doc .cert-title{text-align:center;font-size:2rem;color:#222;margin:1.4rem 0 2rem}
table.cert-table{width:100%;border-collapse:collapse}
table.cert-table th,table.cert-table td{border:1px solid #888;padding:.6rem .8rem;color:#222;background:#fff}
table.cert-table th{width:28%;background:#f3f3f3;text-align:left}
article.cert-doc .cert-sentence,article.cert-doc .cert-date{text-align:center;margin:2.2rem 0;font-size:1.1rem}
article.cert-doc .cert-company{text-align:center;line-height:1.8}
article.cert-doc .cert-rep{font-size:1.15rem;font-weight:700;margin-top:.6rem}
img.cert-seal{height:64px;vertical-align:middle;margin-left:.3rem}
article.cert-doc .cert-note{font-size:.78rem;color:#666;margin-top:2.4rem}
@media (max-width:640px){article.cert-doc{padding:1.4rem 1rem}article.cert-doc .cert-title{font-size:1.5rem}}
@media print{article.cert-doc{border:0;margin:0;max-width:none;padding:0}.flash,.crumb,.page-help{display:none!important}}

/* ---- 회사 게시판(공지·법정 공고) ---- */
.notice-title{text-align:center;font-size:1.35rem;margin:.4rem 0 1rem}
.notice-body{white-space:pre-wrap;line-height:1.75;overflow-wrap:anywhere}
ul.board-list li{padding:.45rem 0;border-bottom:1px solid var(--line)}
td.act{min-width:10rem}
@media (max-width:640px){td.act{min-width:0}}
@media print{article.notice-doc{border:0;box-shadow:none;padding:0}.notice-title{font-size:1.6rem;margin-top:2rem}}

/* ======================================================================== 화면 틀: 상단 줄 + 좌측 사이드바 + 본문(2026-10-20 개편) */
header.top{position:sticky;top:0;z-index:20;flex-wrap:nowrap;gap:.9rem;padding:.5rem 1.1rem}
header.top .brand{margin-right:0;color:#fff;text-decoration:none;font-size:1.02rem;white-space:nowrap}
header.top .brand-sub{font-weight:400;opacity:.8;font-size:.85rem}
header.top .sp{flex:1}
header.top .top-link{color:#E8F1EC;text-decoration:none;font-size:.9rem;padding:.15rem .1rem;border-bottom:2px solid transparent;white-space:nowrap}
header.top .top-link:hover{border-bottom-color:#BFD8CA}
header.top .who{margin-left:0;white-space:nowrap}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.menu-btn{display:none;color:#fff;cursor:pointer;border:1px solid #BFD8CA;border-radius:6px;padding:.2rem .6rem;font-size:.9rem;white-space:nowrap}
.shell{display:block}
.shell.with-side{display:grid;grid-template-columns:15.5rem minmax(0,1fr);align-items:start;max-width:1500px;margin:0 auto}
.shell.with-side main{max-width:1180px;margin:0;width:100%}
nav.side{position:sticky;top:3rem;align-self:start;max-height:calc(100vh - 3rem);overflow-y:auto;padding:.9rem .6rem 2rem 1rem;border-right:1px solid var(--line);font-size:.92rem}
.menu-filter{width:100%;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:.85rem;margin-bottom:.6rem}
@media (prefers-color-scheme: dark){.menu-filter{background:#122019}}
.side-sec{margin-bottom:.9rem}
.side-title{font-family:"Noto Serif KR",serif;font-weight:700;color:var(--green);padding:.2rem .3rem;margin-bottom:.2rem;border-bottom:2px solid var(--green)}
.side-title span{font-weight:400;font-family:inherit;font-size:.75rem;color:var(--muted);margin-left:.4rem}
nav.side ul{list-style:none;margin:0;padding:0}
nav.side a{display:flex;justify-content:space-between;align-items:center;gap:.4rem;padding:.3rem .5rem;border-radius:6px;color:var(--ink);text-decoration:none}
nav.side a:hover{background:var(--info-bg)}
nav.side a.on{background:var(--green);color:var(--on-green);font-weight:700}
nav.side a.on .badge-n{background:var(--on-green);color:var(--green)}
.side-top{margin-bottom:.4rem !important}
.side-top a{font-weight:700}
details.side-group{margin:.1rem 0;border-radius:6px}
details.side-group>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:.35rem .5rem;border-radius:6px;font-weight:700;color:var(--green);cursor:pointer}
details.side-group>summary::-webkit-details-marker{display:none}
details.side-group>summary::after{content:"▸";font-size:.8rem;color:var(--muted)}
details.side-group[open]>summary::after{content:"▾"}
details.side-group>summary:hover{background:var(--info-bg)}
details.side-group ul{margin:0 0 .3rem .6rem;padding-left:.4rem;border-left:2px solid var(--mist)}
.page-help{text-align:right;font-size:.85rem;margin:-.2rem 0 .2rem}
.page-help a{color:var(--muted)}
details.intro{background:var(--info-bg);border-radius:8px;padding:.3rem .7rem;margin:.3rem 0 .6rem}
details.intro>summary{font-size:.88rem;font-weight:600}
details.intro>p{margin:.4rem 0}

/* 업무 허브 */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:.8rem}
.hub-card h2{margin:.1rem 0 .2rem;font-size:1.1rem}
.hub-list{list-style:none;margin:.4rem 0 0;padding:0}
.hub-list li{padding:.4rem 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:.05rem}
.hub-list li:first-child{border-top:0}
.hub-list a{text-decoration:none;display:flex;justify-content:space-between}
.hub-list a:hover b{text-decoration:underline}
ol.startlist{list-style:none;margin:.5rem 0;padding:0;display:grid;gap:.5rem}
ol.startlist li{display:flex;gap:.7rem;align-items:flex-start}
ol.startlist .mark{flex:0 0 1.7rem;height:1.7rem;border-radius:50%;background:var(--mist);color:var(--green);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
ol.startlist li.done .mark{background:var(--ok);color:var(--on-green)}
ol.startlist li.done b{color:var(--muted);font-weight:600}
.start-card{border-color:var(--sage);border-width:2px}

@media (max-width:860px){
  .menu-btn{display:inline-block}
  .shell.with-side{display:block}
  nav.side{display:none;position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);background:var(--paper);padding:.7rem 1rem}
  .navtoggle:checked ~ .shell nav.side{display:block}
  header.top{flex-wrap:wrap}
  header.top .who{width:auto}
}
@media print{nav.side,.menu-btn,.page-help{display:none}.shell.with-side{display:block}}

/* ---- 도움말·설명서 ---- */
article.manual{max-width:56rem}
article.manual .lead{font-size:1.05rem;color:var(--muted)}
article.manual .toc ol{columns:2;column-gap:2rem;margin:.3rem 0;padding-left:1.4rem}
article.manual .toc li{margin:.2rem 0;break-inside:avoid}
article.manual section.chapter{margin-top:2rem;padding-top:.4rem;border-top:2px solid var(--mist)}
article.manual p,article.manual li{line-height:1.75}
article.manual ol.procedure{counter-reset:step;list-style:none;padding-left:0}
article.manual ol.procedure>li{counter-increment:step;position:relative;padding:.35rem 0 .35rem 2.4rem}
article.manual ol.procedure>li::before{content:counter(step);position:absolute;left:0;top:.35rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--green);color:var(--on-green);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.callout{border-left:4px solid var(--sage);background:var(--info-bg);padding:.55rem .8rem;border-radius:0 8px 8px 0;margin:.8rem 0}
.callout.tip{border-color:var(--ok);background:var(--ok-bg)}
.callout.warn{border-color:#C9962B;background:var(--warn-bg)}
.menu-ref{font-weight:700;color:var(--green);background:var(--info-bg);border-radius:4px;padding:0 .3rem;text-decoration:none}
a.menu-ref:hover{text-decoration:underline}
figure{margin:1rem 0;text-align:center}
figure img{max-width:100%;border:1px solid var(--line);border-radius:8px}
figcaption{font-size:.82rem;color:var(--muted);margin-top:.3rem}
@media (max-width:640px){article.manual .toc ol{columns:1}}
@media print{article.manual .toc ol{columns:2}.noprint{display:none!important}article.manual section.chapter{break-inside:avoid-page}}

/* 화면 안 하위 메뉴(탭 모양)와 넓은 표 */
.subnav{gap:.4rem .5rem}
.subnav a{display:inline-block;padding:.2rem .75rem;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;font-size:.88rem}
@media (prefers-color-scheme: dark){.subnav a{background:#192A22}}
.subnav a:hover{border-color:var(--green)}
.card{overflow-x:auto}

article.manual section.chapter{scroll-margin-top:3.6rem}

/* ---- 3단계(노사관계·채용·평가·인건비·교육/인력) 공통 ---- */
.subnav a.cur{background:var(--green);color:var(--on-green);border-color:var(--green)}
.neg{color:var(--err)} .pos{color:var(--warn)}
td.r.neg,td.r.pos{font-weight:700}
.empty{border:1px dashed var(--line);border-radius:10px;padding:.9rem 1rem;color:var(--muted);background:transparent;margin:.6rem 0}
.empty b{color:var(--green)}
.steps{counter-reset:st;list-style:none;margin:.4rem 0;padding:0}
.steps li{counter-increment:st;padding:.35rem 0 .35rem 2.2rem;position:relative;border-bottom:1px dashed var(--line)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(st);position:absolute;left:0;top:.35rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--mist);color:var(--green);font-weight:700;text-align:center;line-height:1.5rem;font-size:.85rem}
.steps li.done::before{content:"✓";background:var(--ok-bg);color:var(--ok)}
.steps li.done{color:var(--muted)}
.barrow{display:grid;grid-template-columns:9rem 1fr 7rem;gap:.5rem;align-items:center;margin:.25rem 0;font-size:.88rem}
.barrow .bar{height:12px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem;margin:.6rem 0}
.kpi .stat small{display:block;color:var(--muted);font-size:.8rem;margin-top:.1rem}
table.compact th,table.compact td{padding:.28rem .45rem}
.rowform{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.4rem .6rem;align-items:end;margin:.3rem 0}
.rowform .grow2{grid-column:span 2}
fieldset.group{border:1px solid var(--line);border-radius:8px;margin:.5rem 0;padding:.4rem .8rem .6rem}
fieldset.group legend{font-weight:700;color:var(--green);padding:0 .4rem}
.tabcount{background:var(--mist);color:var(--green);border-radius:999px;padding:0 .4rem;font-size:.72rem;margin-left:.2rem}
.legal{font-size:.8rem;color:var(--muted)}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:.8rem}
@media (max-width:640px){.barrow{grid-template-columns:6rem 1fr 5.5rem}.rowform .grow2{grid-column:span 1}}
/* ---- 평가(ev): 진행 단계 표시·점수 척도 버튼·직원 선택 격자 ---- */
.stepper{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:.5rem 0;padding:0}
.stepper li{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;padding:.2rem .8rem .2rem .3rem;color:var(--muted);font-size:.88rem;background:transparent}
.stepper li span{display:inline-block;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--mist);color:var(--green);text-align:center;line-height:1.4rem;font-weight:700;font-size:.8rem}
.stepper li.cur{border-color:var(--green);color:var(--green);font-weight:700;background:var(--info-bg)}
.stepper li.cur span{background:var(--green);color:var(--on-green)}
.stepper li.done span{background:var(--ok-bg);color:var(--ok)}
.stepper li.done span::before{content:"✓"}
.stepper li.done span{font-size:0}.stepper li.done span::before{font-size:.8rem}
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.1rem .6rem;margin:.3rem 0}
.scalerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(3.3rem,1fr));gap:.45rem;margin:.4rem 0;max-width:30rem}
.scalebtn{display:block;cursor:pointer}
.scalebtn input{position:absolute;opacity:0;width:1px;height:1px}
.scalebtn span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3rem;padding:.3rem .2rem;border:2px solid var(--line);border-radius:10px;color:var(--ink);background:transparent}
.scalebtn span b{font-size:1.25rem;color:var(--green)}
.scalebtn span small{color:var(--muted);font-size:.74rem}
.scalebtn:hover span{border-color:var(--sage)}
.scalebtn input:checked+span{border-color:var(--green);background:var(--green)}
.scalebtn input:checked+span b,.scalebtn input:checked+span small{color:var(--on-green)}
.scalebtn input:focus-visible+span{outline:3px solid #E7B74A;outline-offset:2px}
.scalebtn input:disabled+span{opacity:.6;cursor:not-allowed}

/* 쪽 나누기·검색(직원이 많은 고객사의 목록) */
nav.pager{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.6rem 0}
nav.pager a:not(.btn){padding:.1rem .45rem;border-radius:4px}
nav.pager b.cur{background:var(--green);color:var(--on-green);border-radius:4px;padding:.1rem .5rem}
form.searchbox{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.4rem 0}

/* ---- 좁은 화면(휴대폰)의 표: table.stack 은 한 행을 「이름표: 값」 카드로 보여 준다(직원 화면의 근태 기록·임금명세서). 2026-10-25 사용성 점검 ---- */
table.stack td.nw,table td.time{white-space:nowrap}
@media (max-width:640px){
  table.stack,table.stack tbody{display:block;width:100%}
  table.stack tr.head{display:none}
  table.stack tr{display:block;border-bottom:1px solid var(--line);padding:.4rem 0}
  table.stack td{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;border:0;padding:.12rem .2rem;text-align:right}
  table.stack td::before{content:attr(data-label);color:var(--muted);font-size:.85rem;text-align:left;flex:0 0 auto}
  table.stack td.full{display:block;text-align:left}
  table.stack td.full::before{display:block;margin-bottom:.1rem}
  table.stack td:empty,table.stack td.opt-empty{display:none}
  table.stack tr.total{background:var(--mist)}
  header.top{flex-wrap:nowrap;gap:.6rem}
  header.top .who .tag,header.top .who a.top-link,header.top a.help-link,header.top .who-name{display:none}
  header.top .who{width:auto;margin-left:0}
  header.top .brand{overflow:hidden;text-overflow:ellipsis;max-width:46vw}
}
nav.side .side-account{display:none}
@media (max-width:860px){nav.side .side-account{display:block}}
/* 서식 라이브러리: 서식 이름 아래 빈 서식 내려받기 링크 */
.formlinks{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-top:.35rem;font-size:.88rem}
.formlinks>span{white-space:nowrap}
/* AI 도우미(화면 오른쪽 아래 챗봇) */
.helpbot{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.helpbot-open{border-radius:999px;padding:.6rem 1.1rem;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.helpbot.open .helpbot-open{display:none}
.helpbot-panel{width:min(380px,calc(100vw - 2rem));height:min(72vh,580px);display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);overflow:hidden}
.helpbot-panel[hidden]{display:none}
.helpbot-panel>header{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:var(--bar);color:#fff}
.helpbot-mode{font-size:.75rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:0 .45rem}
.helpbot-close{margin-left:auto;background:transparent;color:#fff;border:0;font-size:1.3rem;line-height:1;padding:0 .3rem;cursor:pointer}
.helpbot-note{margin:0;padding:.5rem .8rem;font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--line)}
.helpbot-log{flex:1;overflow-y:auto;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.5rem}
.helpbot-msg{white-space:pre-wrap;padding:.5rem .7rem;border-radius:10px;font-size:.9rem;max-width:92%;overflow-wrap:anywhere}
.helpbot-msg.user{align-self:flex-end;background:var(--mist);color:var(--ink)}
.helpbot-msg.bot{align-self:flex-start;background:var(--info-bg);color:var(--ink)}
.helpbot-msg.pending{color:var(--muted)}
.helpbot-src{margin:.4rem 0 0;padding-left:1.1rem;font-size:.8rem;white-space:normal}
.helpbot-form{display:flex;gap:.4rem;align-items:flex-end;padding:.5rem .6rem;border-top:1px solid var(--line);margin:0}
.helpbot-form textarea{flex:1;resize:none;min-height:2.6rem}
.helpbot-spacer{height:4rem}
@media (max-width:600px){.helpbot{right:.5rem;bottom:.5rem}.helpbot-panel{height:min(80vh,560px)}}
@media print{.helpbot,.helpbot-spacer{display:none!important}}
/* 전자서명 */
.esgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.4rem .9rem;margin:.4rem 0}
.esfield{margin:.25rem 0}.esfield.wide{grid-column:1/-1}.esfield textarea{width:100%}
.esgroup{margin:.5rem 0;display:flex;align-items:flex-start;gap:.6rem}.esgroup b{flex:0 0 7rem;font-size:.9rem;padding-top:.35rem}.esbtns{display:flex;flex-wrap:wrap;gap:.4rem;flex:1}.esbtns a.btn{margin:0}@media (max-width:640px){.esgroup{flex-direction:column;gap:.3rem}.esgroup b{flex:none;padding-top:0}}
.esroster{max-height:18rem;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:.4rem .6rem}
.sigpad{margin:.6rem 0}.sigpad canvas{display:block;width:100%;max-width:480px;height:160px;border:1px dashed var(--sage);border-radius:8px;background:#fff;touch-action:none;cursor:crosshair}
.seal-mini{height:2rem;vertical-align:middle;margin-left:.3rem}
.esdoc{margin-top:.6rem}
.pre{white-space:pre-wrap}
@media print{.esign{display:none}}

/* ---- Word 문서를 종이 모양으로 보이고 인쇄(docprint — 근로계약서 등) — 밝은·어두운 화면 모두 흰 종이 ---- */
article.dp-paper{background:#fff;color:#111;width:var(--dp-w,210mm);max-width:100%;box-sizing:border-box;margin:.8rem auto;padding:var(--dp-m,25mm);border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.08);font-family:"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:10pt;line-height:1.35;overflow-x:auto}
article.dp-paper .dp-p{white-space:pre-wrap;overflow-wrap:anywhere;color:#111}
table.dp-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:inherit;margin:0}
table.dp-table td{border:1px solid #333;padding:1.5pt 4pt;color:#111;background:transparent;word-break:keep-all;overflow-wrap:anywhere}
table.dp-table.plain td{border:0}
img.dp-img{vertical-align:middle;max-width:100%}
.dp-break{border-top:1px dashed #bbb;margin:1.4rem 0}
.dp-footer{margin-top:1.6rem;font-size:8pt;color:#555;text-align:right;line-height:1.5}
.dp-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.4rem 0}
@media (max-width:640px){article.dp-paper{padding:1rem .7rem}}
@media print{article.dp-paper{border:0;box-shadow:none;margin:0;padding:0;width:auto;max-width:none;overflow:visible}
  .dp-break{border:0;margin:0;break-after:page}table.dp-table tr{break-inside:avoid}
  article.payslip+article.payslip,.pay-many article.payslip:not(:first-of-type){break-before:page}}
/* 인쇄: 화면 바탕색을 찍지 않고, 문서·명세서 화면은 바깥 여백 없이 종이 여백(@page)만 쓴다. 명세서는 A4 한 장에 들어가게 줄인다. */
@media print{body,main,.shell{background:#fff!important}
  main:has(article.dp-paper),main:has(article.payslip){padding:0!important}
  article.payslip{padding:0;font-size:9.5pt;background:#fff!important;color:#111}
  article.payslip h1{font-size:15pt;margin:0 0 .3rem}article.payslip h2{font-size:11pt;margin:.55rem 0 .2rem}
  article.payslip th,article.payslip td{padding:.1rem .35rem}article.payslip p.net{font-size:11pt;margin:.35rem 0}
  article.payslip p{margin:.25rem 0}}
/* 노무사 대시보드 「고객별 처리 현황」: 가장 급한 일은 세 줄까지만(전체는 마우스를 올리면), 분야별 알림은 한 칸에 줄바꿈 */
.clamp3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
table.client-status td.top-issue{min-width:18rem;max-width:30rem}
table.client-status td.area-pills{min-width:14rem;line-height:1.9}
table.client-status td.area-pills a.pill{text-decoration:none}
/* 직원 첫 화면 「할 일」 */
.todo-card{border-left:4px solid #E7B74A}
.todo-list{list-style:none;padding:0;margin:.4rem 0}
.todo-list li{padding:.35rem 0;border-bottom:1px dashed var(--line, #ddd)}
.todo-list li:last-child{border-bottom:0}
/* 탭(신청 화면 등): 스크립트가 켜졌을 때만 탭 막대가 보이고, 한 번에 한 구역만 보인다 */
.tabbar{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 .2rem;border-bottom:2px solid var(--line)}
.tabbar a{padding:.5rem 1rem;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;text-decoration:none;color:var(--green);background:#fff;font-weight:600}
.tabbar a.on{background:var(--green);color:var(--on-green);border-color:var(--green)}
body:not(.tabs-on) .tabbar{border-bottom:0}
body:not(.tabs-on) .tabbar a{border-radius:8px;border-bottom:1px solid var(--line)}
.tabs-on .tabgrid{display:block}
[data-panel][hidden],[data-hide-when-half][hidden]{display:none!important}
td.kindcol{min-width:8.5rem}
/* 양식 자체에 class="row" 를 준 경우(입력 칸을 나란히): 버튼·안내는 한 줄 전체 */
form.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;margin:.4rem 0;align-items:end}
form.row>.actions,form.row>p,form.row>.note,form.row>.hint,form.row>details,form.row>table,form.row>h3{grid-column:1/-1}
/* 직원 목록의 계정 발급: 아이디 칸과 버튼을 한 줄에 */
form.acct-form{display:flex;gap:.3rem;align-items:center;flex-wrap:nowrap}
form.acct-form input[type=text]{width:9.5rem;min-width:0}
/* 기간제 사용기간: 단계별 묶음(① 계약 이력 ② 예외 근거 ③ 사업주 결정) */
fieldset.ft-step{border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem .9rem;margin:.9rem 0}
fieldset.ft-step>legend{font-weight:700;color:var(--green);padding:0 .35rem;font-size:1.02rem}
.exc-box{border-left:3px solid var(--sage);padding:.1rem .9rem .4rem;margin:.7rem 0}
.exc-box[hidden]{display:none!important}
.exc-box h3{margin:.3rem 0 .2rem;font-size:.98rem}
label.check{display:flex;gap:.4rem;align-items:center;font-weight:400;margin:.3rem 0}
label.check input{width:auto}
table.seg-table td{vertical-align:middle}
table.seg-table input[type=date]{min-width:10rem}
table.seg-table select{min-width:13rem}
table.seg-table td.c,table.seg-table th.c{text-align:center}
table.seg-table td.c input{width:auto}
/* 칸이 한두 개뿐인 짧은 양식(예: 점검 구간 고르기)은 버튼을 같은 줄에 */
form.row:not(:has(> div:nth-of-type(3)))>.actions{grid-column:auto;align-self:end}
/* 전자서명 빈칸 화면: 줄 반복 묶음(기타 수당) */
.es-repeat table.rep-table{width:auto;min-width:min(100%,40rem)}
.es-repeat table.rep-table td{padding:.2rem .3rem}
.es-repeat table.rep-table input{min-width:9rem}
.es-repeat [data-rep-add]{margin-top:.3rem}
.wage-note.warn-text{color:var(--err);font-weight:600}
/* 목록 위 상태 거르기(전자서명 문서 등): 일정한 간격의 둥근 버튼, 고른 상태는 진하게 */
nav.tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 .9rem}
nav.tabs a{display:inline-block;padding:.32rem .85rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green);text-decoration:none;white-space:nowrap;line-height:1.3}
nav.tabs a:hover{background:var(--info-bg)}
nav.tabs a.on{background:var(--green);border-color:var(--green);color:var(--on-green);font-weight:700}
@media (prefers-color-scheme: dark){nav.tabs a{background:#192A22}nav.tabs a.on{background:var(--green)}}
/* 전자서명 빈칸 화면: 먼저 적을 핵심 칸(총 월 급여) */
.esfield.es-key input{border-color:var(--green);border-width:2px;font-weight:700}
.esfield.es-key>label{font-weight:700;color:var(--green)}
.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:auto}
/* 교대근무표: 순서대로 채운 칸 표시, 직원 고르기 줄 */
table.roster td.hl{background:var(--warn-bg)}
table.roster td.hl input{font-weight:700}
.fill-pick{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.6rem 0 .3rem;padding:.4rem .6rem;border-radius:8px;background:var(--info-bg)}
/* 교대근무표: 칸을 글자가 보이는 크기로 고정하고(31일이면 옆으로 넘김), 직원 이름 칸은 넘길 때도 고정, 근무 종류별 칸 색 */
table.roster{width:auto;border-collapse:separate;border-spacing:0}
table.roster th,table.roster td{padding:.2rem .12rem;text-align:center}
table.roster input{width:2.4rem;min-width:2.4rem;padding:.25rem .1rem;text-align:center;font-weight:600;font-size:.85rem}
table.roster .rname{position:sticky;left:0;z-index:1;background:#fff;text-align:left;padding-right:.5rem;min-width:4.5rem;box-shadow:1px 0 0 var(--line)}
table.roster thead .rname{background:var(--mist,#e8efea)}
@media (prefers-color-scheme: dark){table.roster .rname{background:#192A22}}
table.roster td.rk-work input{background:#fff}
table.roster td.rk-off input{background:#eef1f3;color:#555}
table.roster td.rk-weekly_holiday input{background:#e3f0e8;color:var(--ok)}
table.roster td.hl input{box-shadow:inset 0 0 0 2px #E7B74A}
.rk-legend{display:inline-block;padding:0 .4rem;border-radius:4px;border:1px solid var(--line)}
.rk-legend.rk-off{background:#eef1f3}.rk-legend.rk-weekly_holiday{background:#e3f0e8}
/* 카드 머리: 제목 왼쪽, 삭제 같은 버튼 오른쪽 */
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.card-head h3{margin-top:0}
.card-head form{flex:none}
/* 한 줄 양식(칸과 버튼을 가로로): 좁은 화면에서는 줄바꿈 */
.flex-actions{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line)}
form.hform{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
form.hform input,form.hform select{width:auto;margin:0}
form.hform input.grow{flex:1 1 12rem;min-width:10rem}
form.hform .hform-label{flex:0 0 5.5rem;font-size:.85rem;font-weight:600;color:var(--muted)}
@media (max-width:640px){form.hform .hform-label{flex-basis:100%}}