/* BASE · 근무표 */
.sc-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sc-nav{display:flex;align-items:center;gap:6px}
.sc-nav b{font-size:20px;font-weight:700;min-width:132px;text-align:center}
.sc-ib{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.8);border:1px solid var(--line);font-size:18px;color:var(--sub);display:grid;place-items:center;transition:border-color .15s,color .15s}
.sc-ib:hover:not(:disabled){border-color:#D6CBB8;color:var(--ink)}
.sc-ib:disabled{opacity:.4;cursor:default}
.sc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.sc-r{margin-left:auto;display:flex;gap:6px;align-items:center}
.sc-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start;position:relative}
.sc-pal{padding:14px 12px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.sc-pal::-webkit-scrollbar{width:10px}.sc-pal::-webkit-scrollbar-track{background:transparent;margin:22px 0}
.sc-pal::-webkit-scrollbar-thumb{background:#D8CDBA;border-radius:6px;border:3px solid transparent;background-clip:content-box}
.pal-h{display:flex;align-items:baseline;gap:8px;margin:0 4px 10px}
.pal-h b{font-size:16px;font-weight:600}.pal-h span{font-size:12px;color:var(--mute)}
.sc-pal .search{max-width:none;margin-bottom:10px}
.pal-info{font-size:12px;color:var(--sub);background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:12px;padding:8px 10px;min-height:52px;line-height:1.5;margin-bottom:6px}
.pal-info u{cursor:pointer;color:#8A5B1E}
.pg-h{display:flex;align-items:center;gap:4px;margin:14px 4px 6px;font-size:13px;font-weight:600}
.pg-h span{font-weight:400;color:var(--mute);font-size:11.5px;margin-left:4px}
.pg-h::after{content:"";flex:1;height:1px;background:var(--line);margin-left:8px}
.pg-h.sub{font-size:12px;font-weight:500;color:var(--sub);margin:8px 4px 4px 10px}
#scTags{position:relative}
.ptags{display:grid;grid-template-columns:repeat(var(--pal-cols,3),minmax(0,1fr));gap:5px}
.ptag{position:relative;z-index:1;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:10px;padding:5px 4px 5px 7px;text-align:center;cursor:grab;user-select:none;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--c) 70%,transparent);transition:border-color .15s,background .15s}
.ptag.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff)}
.ptag b{display:block;font-size:calc(13px*var(--tag-k,1));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptag .ro{display:flex;justify-content:center;align-items:center;gap:2px;font-size:calc(10.5px*var(--tag-k,1));color:var(--c);white-space:nowrap;overflow:hidden}
.ptag .st{display:block;font-size:10.5px;color:var(--mute)}
.ptag .st i{font-style:normal;margin:0 2px}
.ptag .st em,.ctag em{font-style:normal;font-size:10px;color:#8A5B1E;background:var(--gold-soft);border-radius:6px;padding:0 4px;margin-left:3px}
.lb{font-style:normal;font-size:9px;line-height:13px;height:13px;padding:0 3px;border-radius:3px;background:#EFE7D8;color:#6F5531;margin-right:2px;display:inline-block}
.sc-cal{padding:12px;overflow:hidden}
.cal-h{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0 2px 8px;font-size:13px;color:var(--sub);text-align:center}
.cal-h .sun{color:#B3402F}.cal-h .sat{color:#4B6A8C}
.weeks{display:grid;gap:6px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:6px}
.dcell{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:14px;padding:6px;min-width:0;display:grid;grid-row:1/span 7;grid-template-rows:subgrid;row-gap:0;transition:border-color .15s}
.dcell.other{opacity:.5}
.dcell.today{border-color:#C0563F}
.dcell.has-pick{border-color:var(--gold)}
.dh{display:flex;align-items:center;gap:4px;min-height:22px}
.dh b{font-size:14px;font-weight:700}.dh b.red{color:#B3402F}.dh b.sat{color:#4B6A8C}
.dh .ho{font-size:10.5px;color:#B3402F}
.dh .cnt{margin-left:auto;font-size:10.5px;color:var(--mute);white-space:nowrap}
.dh .nt{width:20px;height:20px;border-radius:6px;font-size:11px;color:var(--mute);opacity:0;transition:opacity .15s}
.dcell:hover .nt{opacity:1}.dh .nt:hover{background:var(--bg);color:var(--ink)}
.notice{font-size:11px;color:#6F4A17;background:var(--gold-soft);border-radius:8px;padding:3px 6px;margin:2px 0 4px}
.notice.empty{padding:0;margin:0;background:none}
.wz,.rz{display:flex;flex-direction:column;gap:2px}
.rz{background:rgba(29,36,51,.035);border-radius:10px;padding:3px;margin-top:2px}
.slot{border-radius:8px;padding:2px 3px;min-height:22px;transition:background .12s;cursor:default}
.slot:hover{background:color-mix(in srgb,var(--sc) 7%,transparent)}
.slot.over{background:color-mix(in srgb,var(--sc) 18%,transparent);box-shadow:inset 0 0 0 1px var(--sc)}
.has-pick .slot,.sc-cal .slot{cursor:pointer}
.sl-n{display:flex;align-items:baseline;gap:4px;font-size:10.5px;font-weight:600;color:var(--sc)}
.sl-n em{font-style:normal;font-weight:400;font-size:9.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-t{display:flex;flex-wrap:wrap;gap:2px}
.ctag{display:inline-flex;align-items:center;gap:1px;max-width:100%;font-size:calc(11.5px*var(--cal-k,1));line-height:calc(18px*var(--cal-k,1));padding:0 5px 0 6px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--c);cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .12s}
.ctag:hover{border-color:#CFC4B2}
.ctag.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff)}
.ctag sup{font-size:9px;color:var(--mute);vertical-align:0;margin-left:1px}
@media (max-width:1100px){.sc-body{grid-template-columns:minmax(0,1fr)}.sc-pal{position:static;max-height:360px}}
@media (max-width:700px){.week,.cal-h{grid-template-columns:repeat(7,minmax(90px,1fr))}.sc-cal{overflow-x:auto}}

.sc-set svg{margin-right:6px}
.pav{display:grid;place-items:center;width:34px;height:34px;margin:2px auto 3px;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,#fff);color:var(--c);font-size:11px;font-weight:600}
.cd.set-w{width:min(960px,calc(100% - 32px))}
.set-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-height:70vh;overflow:auto}
.set-cols h4.sl{font-size:12px;color:var(--mute);font-weight:500;margin:6px 4px 6px}
.scard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2px 14px;margin-bottom:12px}
.srow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow>div:first-child{flex:1;min-width:0}
.srow b{display:block;font-weight:500;font-size:14px}
.srow span{display:block;font-size:12px;color:var(--sub);line-height:1.45}
.sctl{flex:none}
.sctl .in{height:38px;border-radius:10px}
.st-t{width:110px;text-align:center}
.st-pos{width:180px;height:auto;padding:8px 10px;border-radius:10px;resize:vertical;line-height:1.5}
.cpick{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 6px;border-radius:10px;border:1px solid var(--line);cursor:pointer;background:#fff}
.cpick input{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer}
.cpick span{font-size:13px;color:var(--ink)}
.pills-pick{display:flex;flex-wrap:wrap;gap:6px}
.pills-pick button{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--sub);transition:border-color .15s,background .15s,color .15s}
.pills-pick button:hover{border-color:#D6CBB8}
.pills-pick button.on{background:var(--ink);border-color:var(--ink);color:#fff}
#scEdit .fl{margin-bottom:12px}
#scEdit .m-f{justify-content:flex-end}
.se-del{margin-right:auto;color:#A8432F}
@media (max-width:900px){.set-cols{grid-template-columns:1fr}}

/* 칸 구분: 일출 = 해(따뜻한 금빛 판), 늦출 = 달(차분한 남색 판), 반차 = 점선, OFF·연차 = 아래 회색 상자 */
.slot{border-radius:9px;padding:4px 5px 5px;min-height:30px}
.slot.wz{margin-bottom:3px;border:1px solid transparent}
.s-일출{background:color-mix(in srgb,var(--sc) 11%,#fff);border-color:color-mix(in srgb,var(--sc) 26%,transparent)!important}
.s-늦출{background:color-mix(in srgb,var(--sc) 12%,#fff);border-color:color-mix(in srgb,var(--sc) 28%,transparent)!important}
.s-반차{background:#fff;border:1px dashed color-mix(in srgb,var(--sc) 45%,transparent)!important}
.slot.rz{background:rgba(29,36,51,.04);border-radius:0;margin:0}
.slot.rz0{border-radius:10px 10px 0 0;margin-top:3px;padding-top:6px}
.slot.rz1{border-radius:0 0 10px 10px;padding-bottom:6px}
.sl-n{font-size:10.5px;margin-bottom:2px}
.sl-ic{width:12px;height:12px;display:inline-block;flex:none;align-self:center;border-radius:50%}
.s-일출 .sl-ic{background:radial-gradient(circle,var(--sc) 38%,transparent 42%),conic-gradient(from 0deg,var(--sc) 0 6%,transparent 0 12.5%,var(--sc) 0 18.5%,transparent 0 25%,var(--sc) 0 31%,transparent 0 37.5%,var(--sc) 0 43.5%,transparent 0 50%,var(--sc) 0 56%,transparent 0 62.5%,var(--sc) 0 68.5%,transparent 0 75%,var(--sc) 0 81%,transparent 0 87.5%,var(--sc) 0 93.5%,transparent 0)}
.s-늦출 .sl-ic{background:radial-gradient(circle at 68% 32%,transparent 42%,var(--sc) 44%);border-radius:50%}
.s-반차 .sl-ic{background:conic-gradient(var(--sc) 0 50%,transparent 0);border:1.5px solid var(--sc);width:11px;height:11px;box-sizing:border-box}
.rz .sl-ic{display:none}
.s-일출 .sl-n{color:#9A6420}.s-늦출 .sl-n{color:#3F5F82}
.flag{width:16px;height:11px;border-radius:2px;flex:none;box-shadow:0 0 0 .5px rgba(0,0,0,.18);margin-right:3px;vertical-align:-1px}
.ctag .flag{width:14px;height:10px;margin-right:3px}
.pg-h .flag{width:18px;height:12px;margin-right:6px}

.pav{overflow:hidden}.pav img{width:100%;height:100%;object-fit:cover;display:block}
.se-photo{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:14px}
.se-av{width:64px;height:64px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,#fff);color:var(--c);font-weight:600}
.se-av img{width:100%;height:100%;object-fit:cover}
.se-photo b{display:block;font-weight:500}.se-photo span{display:block;font-size:12px;color:var(--sub)}
.se-pb{display:flex;gap:6px;margin-top:8px}.se-pb label{cursor:pointer}

/* 네임택 목록: 스크롤해도 제목·이름 찾기는 위에 붙어 있게 */
.sc-pal{padding-top:0}
.sc-sticky{position:sticky;top:0;z-index:4;margin:0 -12px;padding:14px 12px 4px;background:linear-gradient(#FBF8F1 84%,rgba(251,248,241,0));border-radius:24px 24px 0 0}

/* 네임택 호버 테두리: 수가표 목록과 같은 느낌으로 얇게 (네임택 자기 테두리 1px 위에 겹쳐 그려져 더 두꺼워 보이던 것) */
#scTags .glider{border-width:1.5px!important;box-shadow:none!important}

/* 칸 안 줄: 왼쪽 줄 머리(국기 또는 부서 이름) + 그 줄 사람들 */
.sl-row{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:3px;padding:1px 0}
.sl-row+.sl-row{border-top:1px dashed color-mix(in srgb,var(--sc) 22%,transparent);margin-top:2px;padding-top:3px}
.rh{display:flex;justify-content:center;padding-top:4px}
.rh .flag{margin:0;width:16px;height:11px}
.rh-t{font-style:normal;font-size:9.5px;font-weight:600;color:var(--c);line-height:18px;white-space:nowrap}

/* 사진 칸: 세로 3:4 둥근 네모 */
.pav{width:36px;height:48px;border-radius:8px}
.se-av{width:66px;height:88px;border-radius:12px}

/* 직원 명단 */
.st-t td{padding:10px 14px;vertical-align:middle}.st-t th{padding:10px 14px}
.st-t tbody tr{cursor:default}.st-t tbody tr.gone td{color:var(--mute)}
.st-ph{width:30px;height:40px;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,#fff);color:var(--c);font-size:10.5px;font-weight:600}
.st-ph img{width:100%;height:100%;object-fit:cover}
.st-memo{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub)}
.st-del:hover{color:#A8432F;border-color:#E7C6BC}
.st-foot{padding:12px 20px;font-size:12.5px;color:var(--sub);border-top:1px solid var(--line)}

.dir-k{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--sub)}
.dir-k>span:last-child{margin-left:8px}
.kb{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:7px;border:1px solid #D6CBB8;border-bottom-width:2px;background:#FBF8F1;font-size:12px;color:var(--ink);font-weight:600}

/* 사진 없는 칸: 가운데 사람 그림자 */
.se-av,.pav,.st-ph{display:flex!important;align-items:flex-end;justify-content:center;overflow:hidden}
.se-av img,.pav img,.st-ph img{align-self:stretch}
.person{width:88%;height:auto;display:block;color:color-mix(in srgb,var(--c) 70%,#fff)}

/* 직원 명단: 좁을 때 글자가 세로로 쪼개지지 않게 — 표는 옆으로 스크롤 */
.g.tbl:has(.st-t){overflow-x:auto}
.st-t th,.st-t td{white-space:nowrap}

/* 오른쪽 단추 목록 */
.ctx{position:fixed;z-index:200;min-width:210px;padding:6px;border-radius:16px;background:#FFFDF8;border:1px solid #DCCFB9;box-shadow:0 18px 40px -16px rgba(60,45,25,.4)}
.ctx-h{padding:8px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ctx-h b{display:block;font-size:14px;font-weight:600}.ctx-h span{display:block;font-size:12px;color:var(--sub)}
.ctx-l{position:relative}
.ctx-l button{position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:9px;font-size:13px;text-align:left;color:var(--ink)}
.ctx-l button svg{width:15px;height:15px;color:var(--sub);flex:none}
.ctx-l button.dg,.ctx-l button.dg svg{color:#A8432F}
.ctx-l hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.cdot{width:10px;height:10px;border-radius:50%;flex:none;margin:0 2px}

/* 직원 네임택 칸 숨기기 */
.sc-body.nopal{grid-template-columns:minmax(0,1fr)!important}
.sc-body.nopal>.sc-pal,.sc-body.nopal>.split-h{display:none!important}
.pal-tg.on{color:var(--ink);border-color:#D6CBB8;background:#F3ECDF}