:root{
  --bg:#f4f3ef; --paper:#ffffff; --ink:#1b2430; --ink2:#55606e; --ink3:#8a94a1;
  --line:#e3e1db; --line2:#eeede8; --navy:#1d3557;
  --rec:#1f7a8c; --rec-bg:#d9eef2; --rec-ink:#0f4f5c;
  --apr:#c46a1b; --apr-bg:#fbe8d4; --apr-ink:#7a3e08;
  --wkend:#f7f1ea; --sun:#c2410c; --sat:#2563eb; --today:#e11d48;
  --danger:#b42318; --ok:#15803d;
  --name-w:200px; --day-w:38px; --row-h:30px;
  --r:10px; --shadow:0 1px 2px rgba(20,30,40,.06),0 4px 16px rgba(20,30,40,.06);
  font-family:"Noto Sans KR","Noto Sans Lao",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
body.lo{font-family:"Noto Sans Lao","Noto Sans KR",system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
[hidden]{display:none!important}
.muted{color:var(--ink2)}

/* buttons */
button,.btn{cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:7px 12px;line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button:hover,.btn:hover{border-color:#cfccc4}
.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.primary:hover{background:#26446d}
.ghost{background:transparent}
.sm{padding:4px 9px;font-size:12.5px}
.danger{color:var(--danger)}
input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc3d5;outline-offset:0;border-color:#9cc3d5}

/* header */
.top{display:flex;align-items:center;gap:18px;padding:12px 20px;background:var(--navy);color:#fff;position:sticky;top:0;z-index:30;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:30px;height:30px;border-radius:7px;background:#2b4a75;position:relative;flex:none}
.logo::before,.logo::after{content:"";position:absolute;height:6px;border-radius:2px}
.logo::before{left:5px;top:8px;width:14px;background:#57b8c9}
.logo::after{left:11px;top:17px;width:14px;background:#f0a04b}
.logo.big{width:44px;height:44px;margin:0 auto 6px}
.logo.big::before{left:7px;top:12px;width:20px;height:8px}.logo.big::after{left:16px;top:25px;width:20px;height:8px}
.top h1{font-size:17px}
.top .sub{font-size:12px;color:#b9c6d8}
.tabs{display:flex;gap:4px;margin-left:12px}
.tabs button{background:transparent;border:0;color:#c9d4e3;padding:8px 12px;border-radius:7px}
.tabs button.on{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.me{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px}
.me .ghost{color:#dbe4ef;border-color:rgba(255,255,255,.25)}
.live{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#a7f3d0;letter-spacing:.04em}
.live i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
.live.off{color:#fca5a5}.live.off i{background:#f87171;box-shadow:none}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:14px;padding:14px 20px;flex-wrap:wrap;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:56px;z-index:25}
.month{display:flex;align-items:center;gap:6px}
.month h2{font-size:20px;min-width:128px;text-align:center}
.month .ghost{font-size:18px;padding:4px 10px}
.month .sm{font-size:12.5px}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#faf9f6}
.seg button{border:0;border-radius:0;background:transparent;padding:7px 12px}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--ink);color:#fff}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.recruit{background:var(--rec)}.dot.appraisal{background:var(--apr)}
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--ink2)}
.chk input{width:16px;height:16px;margin:0}
#search{width:170px}

main{padding:18px 20px 60px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.stat .v{font-size:26px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:13px;font-weight:500;color:var(--ink2);margin-left:3px}
.stat.recruit{border-top:3px solid var(--rec)}.stat.appraisal{border-top:3px solid var(--apr)}

/* now panels */
.now-wrap{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:16px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.panel h3{font-size:14px;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.panel h3 small{font-weight:400;color:var(--ink3);font-size:12px}
.cards{display:flex;flex-wrap:wrap;gap:8px}
.card{border:1px solid var(--line);border-left:4px solid var(--rec);border-radius:8px;padding:7px 10px;min-width:200px;flex:1 1 220px;max-width:340px;cursor:pointer;background:#fcfcfa}
.card.appraisal{border-left-color:var(--apr)}
.card:hover{background:#f6f8f9}
.card .loc{font-weight:600}
.card .who{font-size:12.5px;color:var(--ink2);margin-top:1px}
.card .when{font-size:12px;color:var(--ink3);margin-top:2px;display:flex;justify-content:space-between;gap:8px}
.card .prog{height:3px;background:var(--line2);border-radius:2px;margin-top:6px;overflow:hidden}
.card .prog i{display:block;height:100%;background:var(--rec)}
.card.appraisal .prog i{background:var(--apr)}
.empty{color:var(--ink3);font-size:13px;padding:6px 0}

/* legend */
.legend{display:flex;gap:16px;align-items:center;font-size:12.5px;color:var(--ink2);margin:0 2px 8px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:22px;height:11px;border-radius:3px;display:inline-block}
.sw.recruit{background:var(--rec)}.sw.appraisal{background:var(--apr)}
.sw.plan{background:repeating-linear-gradient(135deg,#fff 0 3px,#cfd6dd 3px 5px);border:1px dashed #8a94a1}
.sw.cancelled{background:#e7e5e0;position:relative}
.sw.cancelled::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:1px;background:#888}
.legend .hint{margin-left:auto;color:var(--ink3)}

/* timeline grid */
.grid-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:calc(100vh - 150px);box-shadow:var(--shadow)}
.grid{min-width:calc(var(--name-w) + var(--days) * var(--day-w));position:relative}
.g-row{display:flex;border-bottom:1px solid var(--line2);min-height:var(--row-h)}
.g-name{width:var(--name-w);flex:none;position:sticky;left:0;z-index:5;background:var(--paper);border-right:1px solid var(--line);padding:5px 10px;display:flex;align-items:center;gap:6px;font-size:12.5px;overflow:hidden}
.g-name .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-name .out{flex:none;font-size:10.5px;padding:1px 5px;border-radius:9px;background:var(--rec-bg);color:var(--rec-ink);font-weight:600}
.g-name .out.appraisal{background:var(--apr-bg);color:var(--apr-ink)}
.g-track{flex:1;position:relative;display:grid;grid-template-columns:repeat(var(--days),minmax(var(--day-w),1fr));grid-auto-rows:24px;padding:3px 0;row-gap:3px}
.g-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--days),minmax(var(--day-w),1fr))}
.g-cells div{border-right:1px solid var(--line2);cursor:cell}
.g-cells div:hover{background:rgba(29,53,87,.06)}
.g-cells .we{background:var(--wkend)}
.g-cells .td{background:rgba(225,29,72,.06);box-shadow:inset 1px 0 0 rgba(225,29,72,.35),inset -1px 0 0 rgba(225,29,72,.35)}

.g-head{position:sticky;top:0;z-index:8;background:var(--paper);border-bottom:1px solid var(--line)}
.g-head .g-name{z-index:9;font-weight:600;color:var(--ink2);font-size:12px}
.g-head .g-track{padding:0;grid-auto-rows:auto}
.g-day{text-align:center;padding:5px 0 4px;font-size:12px;border-right:1px solid var(--line2);line-height:1.15}
.g-day b{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.g-day small{color:var(--ink3);font-size:10.5px}
.g-day.we{background:var(--wkend)}
.g-day.sun b,.g-day.sun small{color:var(--sun)}.g-day.sat b,.g-day.sat small{color:var(--sat)}
.g-day.td b{background:var(--today);color:#fff;border-radius:10px;width:24px;margin:0 auto}
.g-day .cnt{display:block;margin:3px auto 0;font-size:10px;font-weight:600;color:var(--ink2);height:14px}
.g-day .cnt span{display:inline-block;min-width:16px;padding:0 4px;border-radius:7px;background:#ece9e2}

.g-dept{background:#f0eee8;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.g-dept .g-name{background:#f0eee8;font-weight:700;font-size:12.5px;color:var(--ink)}
.g-dept .g-name .caret{transition:transform .15s;color:var(--ink3);font-size:10px}
.g-dept.closed .caret{transform:rotate(-90deg)}
.g-dept .g-name .lo{font-weight:400;color:var(--ink3);font-size:11.5px}
.g-dept .g-name .c{margin-left:auto;font-weight:500;color:var(--ink3);font-size:11px}
.g-dept .g-track{grid-auto-rows:auto;padding:0}
.g-dept-fill{grid-column:1/-1}

.bar{position:relative;z-index:2;margin:0 2px;border-radius:5px;padding:0 6px;font-size:11.5px;line-height:24px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;background:var(--rec);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.bar.appraisal{background:var(--apr)}
.bar:hover{filter:brightness(1.08);z-index:3}
.bar.plan{background:repeating-linear-gradient(135deg,var(--rec-bg) 0 5px,#c7e3ea 5px 8px);color:var(--rec-ink);border:1px dashed var(--rec)}
.bar.appraisal.plan{background:repeating-linear-gradient(135deg,var(--apr-bg) 0 5px,#f6d5b3 5px 8px);color:var(--apr-ink);border-color:var(--apr)}
.bar.done{opacity:.72}
.bar.cancelled{background:#e7e5e0;color:#777;text-decoration:line-through;border:0}
.bar.cl{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.bar.cr{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.bar .sel{font-weight:700;opacity:.9;margin-left:4px}

/* list */
.list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--ink2)}
.table-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:auto;box-shadow:var(--shadow)}
.tbl{border-collapse:collapse;width:100%;font-size:13px}
.tbl th{position:sticky;top:0;background:#f7f6f2;text-align:left;font-weight:600;color:var(--ink2);font-size:12px;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tr.r{cursor:pointer}.tbl tr.r:hover td{background:#f8faf9}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag.recruit{background:var(--rec-bg);color:var(--rec-ink)}.tag.appraisal{background:var(--apr-bg);color:var(--apr-ink)}
.st{font-size:12px;white-space:nowrap}
.st.plan{color:var(--ink3)}.st.confirmed{color:var(--navy);font-weight:600}.st.ongoing{color:var(--today);font-weight:700}.st.done{color:var(--ok)}.st.cancelled{color:#999;text-decoration:line-through}

/* region */
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.rg{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;cursor:pointer;box-shadow:var(--shadow)}
.rg:hover{border-color:#bdb9ae}
.rg.zero{opacity:.55;box-shadow:none}
.rg .t{display:flex;align-items:baseline;gap:8px}
.rg .t b{font-size:14px}.rg .t small{color:var(--ink3);font-size:12px}
.rg .t .no{color:var(--ink3);font-size:11px;font-variant-numeric:tabular-nums}
.rg .bars{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line2);margin:8px 0 6px}
.rg .bars i{display:block;height:100%}
.rg .bars .r{background:var(--rec)}.rg .bars .a{background:var(--apr)}
.rg .nums{font-size:12px;color:var(--ink2);display:flex;gap:12px}
.rg .ds{font-size:11.5px;color:var(--ink3);margin-top:4px}

/* staff */
.staff-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.dept-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.dept-card h4{margin:0;padding:10px 13px;border-bottom:1px solid var(--line2);font-size:13.5px;display:flex;gap:8px;align-items:baseline}
.dept-card h4 small{color:var(--ink3);font-weight:400}
.dept-card h4 .c{margin-left:auto;color:var(--ink3);font-weight:500;font-size:12px}
.dept-card ul{list-style:none;margin:0;padding:4px 0}
.dept-card li{padding:5px 13px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.dept-card li:hover{background:#f7f6f2}
.dept-card li.off{color:var(--ink3);text-decoration:line-through}
.dept-card li .nt{margin-left:auto;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.recent ul{list-style:none;margin:0;padding:0;font-size:12.5px;max-height:320px;overflow:auto}
.recent li{padding:5px 0;border-bottom:1px solid var(--line2);display:flex;gap:10px;align-items:baseline}
.recent li time{color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.recent li b{white-space:nowrap}

/* admin */
.role{font-size:11px;padding:2px 8px;border-radius:9px;background:rgba(255,255,255,.15);color:#dbe4ef}
.role.admin{background:#f0a04b;color:#1b2430;font-weight:700}
.subtabs{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#faf9f6;margin-bottom:14px}
.subtabs button{border:0;border-radius:0;background:transparent;padding:8px 14px}
.subtabs button+button{border-left:1px solid var(--line)}
.subtabs button.on{background:var(--ink);color:#fff}
.log-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.log-tools input{width:220px}
.logtbl td{font-size:12.5px}
.logtbl .t{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink2)}
.logtbl .ip{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink2);white-space:nowrap}
.logtbl .ac{white-space:nowrap}
.act{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;background:#ece9e2;font-weight:600}
.act.a-create{background:#dcfce7;color:#166534}.act.a-update{background:#dbeafe;color:#1e40af}.act.a-delete,.act.a-fail,.act.a-denied,.act.a-blocked,.act.a-error{background:#fee2e2;color:#991b1b}.act.a-login,.act.a-logout{background:#f3e8ff;color:#6b21a8}.act.a-trips,.act.a-logs{background:#fef3c7;color:#92400e}
.chg{margin:3px 0 0;padding:0;list-style:none;font-size:12px;color:var(--ink2)}
.chg del{color:#b42318}.chg ins{color:#15803d;text-decoration:none}
.st-code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.st-code.bad{color:var(--danger);font-weight:700}
details.raw summary{cursor:pointer;color:var(--ink3);font-size:11.5px}
details.raw pre{white-space:pre-wrap;font-size:11px;background:#f7f6f2;padding:6px;border-radius:6px;max-width:520px}
.small{font-size:12px}
.recent{margin-top:16px}

/* dialog */
dialog{border:0;border-radius:14px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 20px 60px rgba(10,20,40,.3)}
dialog::backdrop{background:rgba(18,26,38,.45)}
dialog form{display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
dialog header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2)}
dialog header h3{font-size:16px}
dialog .x{margin-left:auto;border:0;font-size:22px;padding:0 6px;background:none;color:var(--ink3)}
dialog .body{padding:14px 18px;overflow:auto;display:flex;flex-direction:column;gap:11px}
dialog footer{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line2);background:#faf9f6}
.sp{flex:1}
dialog label,.fld{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink2);font-weight:500}
dialog label.chk{flex-direction:row}
dialog input,dialog select,dialog textarea{font-size:14px;color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.row3 .span2{grid-column:span 2}
.days-note{font-size:12px;color:var(--ink3);margin-top:-6px}
.catpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp{position:relative;flex-direction:row!important;cursor:pointer}
.cp input{position:absolute;opacity:0}
.cp>span{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;display:flex;flex-direction:column}
.cp b{font-size:14px;color:var(--ink)}.cp small{font-weight:400;color:var(--ink3);font-size:11.5px}
.cp.recruit input:checked+span{border-color:var(--rec);background:var(--rec-bg)}
.cp.appraisal input:checked+span{border-color:var(--apr);background:var(--apr-bg)}
.cp input:focus-visible+span{outline:2px solid #9cc3d5}
.picker{border:1px solid var(--line);border-radius:9px;max-height:210px;overflow:auto;padding:6px 8px}
.picker .pd{font-size:11.5px;color:var(--ink3);margin:6px 0 3px;font-weight:600}
.picker .pd:first-child{margin-top:0}
.picker .chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:14px;padding:3px 10px;font-size:12.5px;cursor:pointer;color:var(--ink);font-weight:400;background:#fff}
.chip input{display:none}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.busy:not(.on){border-color:#e5b4a8;background:#fdf3f0}
.warn{background:#fff7e6;border:1px solid #f3d19e;color:#7a4b00;border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:400}
.err{color:var(--danger);font-size:13px;min-height:1em}
.meta{font-size:11.5px;color:var(--ink3)}
body:not(.cat-recruit) .only-recruit{display:none}
body:not(.cat-appraisal) .only-appraisal{display:none}

/* login */
.login{position:fixed;inset:0;background:var(--navy);display:grid;place-items:center;z-index:100;padding:16px}
.login-box{background:var(--paper);border-radius:16px;padding:28px 26px;width:min(360px,100%);display:flex;flex-direction:column;gap:12px;text-align:center}
.login-box label{display:flex;flex-direction:column;gap:4px;text-align:left;font-size:12.5px;color:var(--ink2)}
.login-box .primary{justify-content:center;padding:10px}
.login-box .ghost{align-self:center}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:9px;font-size:13px;z-index:200;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}

@media (max-width:900px){
  :root{--name-w:130px;--day-w:34px}
  .top{padding:10px 14px;gap:10px}
  .tabs{order:3;width:100%;margin:0;overflow-x:auto}
  .toolbar{position:static;padding:12px 14px}
  .now-wrap{grid-template-columns:1fr}
  main{padding:14px 14px 60px}
  .legend .hint{display:none}
  #search{width:100%}
  .row3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .row2,.catpick{grid-template-columns:1fr}
  .me #meName{display:none}
  .month h2{font-size:17px;min-width:110px}
}