/* SNC 동물메디컬센터 BI 기준: Deep Blue #4864AF · Gold Brown #B9A489 · Light Beige #F5EEE2 · Black #231F20
   국문 서체 나눔스퀘어 (OFL 라이선스, /fonts 에 포함) */
@font-face{font-family:"NanumSquare";font-weight:300;font-display:swap;src:url("/fonts/NanumSquareL.woff2") format("woff2")}
@font-face{font-family:"NanumSquare";font-weight:400;font-display:swap;src:url("/fonts/NanumSquareR.woff2") format("woff2")}
@font-face{font-family:"NanumSquare";font-weight:700;font-display:swap;src:url("/fonts/NanumSquareB.woff2") format("woff2")}
@font-face{font-family:"NanumSquare";font-weight:800;font-display:swap;src:url("/fonts/NanumSquareEB.woff2") format("woff2")}
:root{
  --blue:#4864AF; --blue-deep:#3A5296; --gold:#B9A489; --gold-soft:#F1EADF; --beige:#F5EEE2;
  --ground:#FBF8F2; --surface:#fff; --surface-2:#F7F2E9; --surface-3:#EBE3D4;
  --ink:#231F20; --ink-2:#635D58; --ink-3:#9B938A;
  --line:#EAE2D4; --line-2:#D8CCB8;
  --accent:#4864AF; --accent-ink:#fff; --accent-soft:#E8EDF8;
  --am:#3852A0; --am-bg:#E3EAF8;
  --pm:#7E6238; --pm-bg:#F4E9D3;
  --nt:#4864AF; --nt-bg:#4864AF;
  --lv:#3F6B4E; --lv-bg:#E2EEE4;
  --aw:#7C7263; --aw-bg:#ECE6DA;
  --warn:#B23A2B; --warn-bg:#FBE6E1;
  --weekend:#F8F3EA;
  --top:60px;
  --shadow:0 1px 2px rgba(72,60,40,.05),0 8px 26px rgba(72,60,40,.07);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);
  font-family:"NanumSquare","Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1440px;margin:0 auto;padding:26px 20px 70px;display:flex;flex-direction:column;gap:16px}
button{font:inherit}

.masthead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:12px;padding-bottom:14px;border-bottom:2px solid var(--line-2)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--gold)}
h1{margin:0;font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em}
.mast-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
select.month{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;cursor:pointer}
.stamp{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:12.5px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.stamp.dual{font-family:inherit;font-size:12px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);border-color:transparent}

.report{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden}
.report-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:13px 20px;background:var(--accent-soft);border-bottom:1px solid var(--line)}
.report-top h2{margin:0;font-size:15px;font-weight:700;color:var(--accent);letter-spacing:-.01em}
.daypick{font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:7px;padding:5px 9px;cursor:pointer}
.report-body{display:flex;flex-wrap:wrap;gap:22px;padding:17px 20px}
.report-lines{display:grid;grid-template-columns:repeat(2,minmax(146px,206px));
  gap:7px 30px;align-content:start}
.rline{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:500;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rline .k{color:var(--ink-2);font-size:13px;font-weight:600;min-width:86px}
.rline .v{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-weight:600}
.rline .v em{font-style:normal;font-size:20px}
.rline .v.am em{color:var(--am)} .rline .v.pm em{color:var(--pm)} .rline .v.z em{color:var(--ink-3)}
.report-side{display:flex;flex-direction:column;gap:10px;justify-content:space-between;
  min-width:206px;margin-left:auto}
.side-facts{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.side-facts b{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;color:var(--ink);font-weight:600}
.side-facts .bad{color:var(--warn);font-weight:600}
.btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:.14s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{opacity:.9;color:var(--accent-ink)}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,.ctl:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.shifts{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden}
.shift{padding:13px 18px 15px;border-right:1px solid var(--line)}
.shift:last-child{border-right:0}
.shift-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;
  padding-bottom:6px;border-bottom:2px solid var(--line)}
.shift.am .shift-hd{border-bottom-color:var(--am)}
.shift.pm .shift-hd{border-bottom-color:var(--pm)}
.shift.nt .shift-hd{border-bottom-color:var(--nt)}
.shift.lv .shift-hd{border-bottom-color:var(--lv)}
.shift-hd b{font-size:13px;font-weight:700}
.shift-hd .n{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:15px;font-weight:600;margin-left:auto}
.shift-hd .t{font-size:10.5px;color:var(--ink-3)}
.roster{display:flex;flex-direction:column;gap:9px}
.shift.am .roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
  gap:9px 18px;align-items:start}
.rgrp{display:flex;flex-direction:column;gap:2px}
.rgt{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-2);
  padding-bottom:2px;border-bottom:1px solid var(--line)}
.rgt i{font-style:normal;font-weight:600;color:var(--ink-3)}
.rnames{display:flex;flex-wrap:wrap;gap:1px 10px;padding-top:2px}
.rn{font-size:12.5px;font-weight:500;white-space:nowrap}
.rn .note{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:9.5px;font-weight:500;
  color:var(--ink-3);font-style:normal;margin-left:3px}
.none{color:var(--ink-3);font-size:12px}

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.ctl{color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;cursor:pointer;transition:.14s}
.ctl:hover{border-color:var(--line-2);color:var(--ink)}
.ctl[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.save-state{font-size:12px;color:var(--ink-3);margin-left:auto;text-align:right}
.save-state.dirty{color:var(--warn);font-weight:600}

.keyhelp{background:var(--surface);border:1px dashed var(--line-2);border-radius:10px;
  padding:11px 16px;font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.keyhelp b{color:var(--ink);font-weight:600}
kbd{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:11px;background:var(--surface-2);
  border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--ink)}

.board{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:auto;box-shadow:var(--shadow);max-height:68vh;position:relative}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px}
th,td{padding:0;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
thead th{position:sticky;z-index:3;background:var(--surface-2);color:var(--ink-2);font-weight:600;font-size:11px}
thead tr:nth-child(1) th{top:0;height:24px}
thead tr:nth-child(2) th{top:24px;height:22px}
thead tr:nth-child(3) th{top:46px;height:26px;background:var(--surface-3);border-bottom:2px solid var(--line-2)}
.corner{position:sticky;left:0;z-index:5;background:var(--surface-2);text-align:left;
  padding:3px 10px;min-width:124px;border-right:1px solid var(--line-2)}
thead tr:nth-child(3) .corner{background:var(--surface-3);font-size:10px;letter-spacing:.06em}
.daybtn{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-weight:600;font-size:11.5px;color:inherit;
  background:none;border:0;width:100%;padding:4px 0;cursor:pointer;font-variant-numeric:tabular-nums}
.daybtn:hover{color:var(--accent)}
th.wk,td.wk{background:var(--weekend)}
thead tr:nth-child(3) th.wk{background:var(--surface-3)}
.tot{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:12.5px;font-weight:600;color:var(--ink)}
.tot.bad{background:var(--warn-bg);color:var(--warn)}
.sel{box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}
thead tr:nth-child(1) th.sel{box-shadow:inset 2px 2px 0 var(--accent),inset -2px 0 0 var(--accent)}
tbody tr:last-child td.sel{box-shadow:inset 2px 0 0 var(--accent),inset -2px -2px 0 var(--accent)}
.namecell{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;
  padding:4px 10px;white-space:nowrap;border-right:1px solid var(--line-2)}
.nm{font-weight:500;font-size:12.5px}
.tm{font-size:10px;color:var(--ink-3);margin-left:6px}
.pbtn{border:0;background:none;padding:0;text-align:left;cursor:default;color:inherit;width:100%}
body.editing .pbtn{cursor:pointer}
body.editing .pbtn:hover .nm{color:var(--accent);text-decoration:underline}
.grp td{background:var(--accent-soft);text-align:left;padding:4px 10px;position:sticky;left:0}
.gr{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--accent);opacity:.72}
.gt{font-size:12.5px;font-weight:700;color:var(--accent);margin-left:7px;letter-spacing:-.01em}
.gc{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:10.5px;font-weight:600;
  color:var(--accent);opacity:.7;margin-left:6px}
.cell{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-weight:600;font-size:11.5px;
  padding:4px 2px;min-width:29px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
body.editing .cell{cursor:cell}
.k-am{background:var(--am-bg);color:var(--am)}
.k-pm{background:var(--pm-bg);color:var(--pm)}
.k-nt{background:var(--nt-bg);color:#fff}
.k-lv{background:var(--lv-bg);color:var(--lv)}
.k-aw{background:var(--aw-bg);color:var(--aw)}
.k-off{color:var(--ink-3);opacity:.38;font-weight:400}
.k-none{color:var(--ink-3);opacity:.3}
td.cur{outline:2.5px solid var(--accent);outline-offset:-2px;position:relative;z-index:1}

.menu{position:absolute;z-index:20;background:var(--surface);border:1px solid var(--line-2);
  border-radius:10px;box-shadow:var(--shadow);padding:8px;display:none;min-width:198px}
.menu.open{display:block}
.menu .who{font-size:11px;color:var(--ink-2);margin-bottom:7px;font-weight:600;padding:0 3px}
.menu .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.menu .keys button{font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:12px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:6px 0;cursor:pointer}
.menu .rows button{display:block;width:100%;text-align:left;font-size:12.5px;border:0;
  background:none;color:var(--ink);padding:6px 8px;border-radius:6px;cursor:pointer}
.menu .rows button:hover,.menu .keys button:hover{background:var(--accent-soft);color:var(--accent)}
.menu .rows hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.menu .rows .danger{color:var(--warn)}

.legend{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:11.5px;color:var(--ink-2)}
.legend div{display:flex;align-items:center;gap:6px}
.sw{width:17px;height:17px;border-radius:4px;display:grid;place-items:center;
  font-family:ui-monospace,"SF Mono",Consolas,"Malgun Gothic",monospace;font-size:9px;font-weight:600}
.alerts{background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;
  padding:10px 14px;font-size:12.5px;color:var(--warn);line-height:1.7}
.alerts b{font-weight:700}
footer{font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px;line-height:1.7}
.ro-note{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:9px 13px;font-size:12.5px;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:900px){.shifts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.report-lines{grid-template-columns:1fr}.report-side{margin-left:0}}
@media (max-width:680px){.wrap{padding:18px 12px 50px}.shifts{grid-template-columns:1fr}
  .shift{border-right:0;border-bottom:1px solid var(--line)}}

/* ===================== 포털 공통 (로그인 · 상단바 · 관리 화면) ===================== */
.hidden{display:none!important}
body.auth{min-height:100vh}
.login-card{width:min(400px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:30px 28px 26px}
.login-card h1{font-size:22px;margin:0 0 4px}
.login-card .sub{color:var(--ink-2);font-size:13px;margin:0 0 22px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.field>label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:11.5px;color:var(--ink-3)}
.inp{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);
  border-radius:8px;padding:9px 11px;width:100%}
.inp:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea.inp{min-height:70px;resize:vertical}
.err{color:var(--warn);font-size:12.5px;min-height:18px;margin:2px 0 10px}
.btn.block{width:100%;padding:11px}

.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1440px;margin:0 auto;padding:0 20px;height:54px;display:flex;align-items:center;gap:22px}
.brand{font-weight:700;font-size:15px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand i{width:9px;height:22px;background:var(--accent);border-radius:2px;display:inline-block}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tabs.pinned{margin-left:auto;padding-left:14px;border-left:1px solid var(--line)}
.tab{border:0;background:none;color:var(--ink-2);font-size:13.5px;font-weight:600;padding:16px 12px 14px;cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.userchip{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.live{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.live.on{background:#2fa36b}
.chipbtn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.chipbtn:hover{border-color:var(--accent);color:var(--accent)}
.subtabs{display:flex;gap:6px;flex-wrap:wrap}

.tblwrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:auto;box-shadow:var(--shadow)}
table.tbl{width:100%;font-size:13px;border-collapse:collapse}
table.tbl th{position:static;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:600;
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.c,table.tbl th.c{text-align:center}
.muted{color:var(--ink-3)}
.badge{display:inline-block;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;
  background:var(--surface-2);color:var(--ink-2)}
.badge.ok{background:var(--lv-bg);color:var(--lv)} .badge.off{background:var(--warn-bg);color:var(--warn)}
.badge.acc{background:var(--accent-soft);color:var(--accent)}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.danger{color:var(--warn);border-color:var(--warn-bg)} .btn.danger:hover{border-color:var(--warn);color:var(--warn)}
.section-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.section-head h2{margin:0;font-size:17px;letter-spacing:-.01em}
.note-box{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 15px;
  font-size:12.5px;color:var(--ink-2);line-height:1.7}
.permgroup td{background:var(--accent-soft)!important;color:var(--accent);font-weight:700;font-size:12px}
.pm-label{font-weight:500} .pm-key{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--ink-3);margin-left:6px}
.tri{font:inherit;font-size:12px;border:1px solid var(--line-2);border-radius:6px;padding:3px 5px;background:var(--surface);color:var(--ink)}
.tri.allow{background:var(--lv-bg);color:var(--lv)} .tri.deny{background:var(--warn-bg);color:var(--warn)}

.overlay{position:fixed;inset:0;background:rgba(10,18,24,.5);z-index:60;display:grid;place-items:center;padding:16px;overflow:auto}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  width:min(480px,100%);max-height:92vh;overflow:auto;padding:22px 22px 18px}
.modal.wide{width:min(640px,100%)}
.modal h3{margin:0 0 14px;font-size:17px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.secret{font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:600;letter-spacing:.03em;
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:8px;padding:10px 12px;user-select:all;word-break:break-all}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--ground);
  padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;box-shadow:var(--shadow);max-width:90vw}
.toast.bad{background:var(--warn);color:#fff}

/* ===================== 근무표 추가 요소 ===================== */
.palette{display:flex;flex-wrap:wrap;gap:5px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;position:sticky;top:var(--top);z-index:12}
.palette .pk{font-family:ui-monospace,Consolas,monospace;font-size:12px;font-weight:600;min-width:36px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);border-radius:6px;padding:6px 8px;cursor:pointer}
.palette .pk:hover{border-color:var(--accent);color:var(--accent)}
.palette .plabel{font-size:11.5px;color:var(--ink-2);margin:0 4px 0 2px;font-weight:600}
.k-etc{background:var(--surface-3);color:var(--ink-2)}
.namecell.me{box-shadow:inset 3px 0 0 var(--accent)}
.namecell.me .nm{color:var(--accent);font-weight:700}
.wkb{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--ink-3);margin-left:6px}
th.sumh{min-width:34px;padding:0 4px;font-size:10.5px;white-space:nowrap}
td.sum{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--ink-3);min-width:34px;padding:4px 2px}
td.sum.hi{color:var(--ink);font-weight:600} td.sum.warn{color:var(--warn);font-weight:700}
td.sum.tot2{color:var(--accent);font-weight:700}
td.notec{text-align:left;min-width:180px;max-width:280px;padding:4px 8px;font-size:11px;color:var(--ink-2);white-space:normal;line-height:1.35}
.save-state.ok{color:var(--lv)}
.editnote{font-size:11.5px;color:var(--ink-3)}
@media (max-width:680px){.topbar-in{padding:0 12px;gap:10px}.userchip .who{display:none}}

/* ===== 근무표 : 구글시트 [전체] 근무표 서식 (항상 밝은 종이 바탕, 원본과 같은 색) ===== */
.xl-legend{font-size:12px;font-weight:700;color:var(--ink);padding:0 2px;line-height:1.6}
.xlboard{--w-cat:88px;--w-nm:106px;background:#fff;color:#000;color-scheme:light;border-radius:6px;max-height:76vh}
table.xl{border-collapse:separate;border-spacing:0;width:max-content;min-width:0;font-size:12.5px;color:#000;background:#fff;
  border-top:2px solid #222;border-left:2px solid #222}
.xl th,.xl td{border-right:1px solid #9aa0a6;border-bottom:1px solid #b9bec3;padding:0;text-align:center;background:#fff;color:#000}
.xl thead th{font-weight:700;font-size:12.5px;color:#000;background:#fff;z-index:4}
.xl thead tr:nth-child(1) th{top:0;height:26px}
.xl thead tr:nth-child(2) th{top:26px;height:22px;border-bottom:2px solid #222}
.xl thead th.notehd{border-bottom:2px solid #222}

/* 왼쪽 고정 2열 : 분류(병합) · 이름 */
.xl .cat{position:sticky;left:0;z-index:3;width:var(--w-cat);min-width:var(--w-cat);max-width:var(--w-cat);
  font-size:13px;padding:2px 4px;vertical-align:middle;border-right:2px solid #222;border-bottom:2px solid #222;line-height:1.35}
.xl .namecell,.xl .nmc,.xl th.nmh{position:sticky;left:var(--w-cat);z-index:2;width:var(--w-nm);min-width:var(--w-nm);max-width:var(--w-nm);
  text-align:center;padding:0;border-right:2px solid #222}
.xl thead th.cat{z-index:7}
.xl thead th.nmh{z-index:6}
.xl .pbtn{width:100%;height:100%;text-align:center;padding:3px 4px;font-size:12.5px;font-weight:500;white-space:nowrap;color:#000;border-radius:0}
.xl .wkp{font-size:11px;font-weight:400;color:#555}
body.editing .xl .pbtn:hover{color:#1a73e8;text-decoration:underline}
.xl .namecell.me{box-shadow:none}
.xl .namecell.me .pbtn{font-weight:700;color:#0c6a5f}

/* 머리글 */
.xl th.lab,.xl td.lab{background:#c0c0c0}
.xl th.dn,.xl td.dn{width:28px;min-width:28px;font-weight:700}
.xl .daybtn{width:100%;font-family:inherit;font-size:12.5px;font-weight:700;color:#000;padding:2px 0}
.xl .daybtn:hover{color:#1a73e8}
.xl th.dw,.xl td.dw{font-weight:700;font-size:12px}
.xl .sat{color:#0000ff}.xl .sun{color:#ff0000}
.xl th.dn.sel,.xl th.dw.sel{background:#e8f0fe}
.xl thead th.sel{box-shadow:none}

/* 근무 칸 */
.xl td.cell{width:28px;min-width:28px;height:24px;font-family:inherit;font-weight:600;font-size:12.5px;padding:0;color:#000;background:#fff}
body.editing .xl td.cell{cursor:cell}
.xl td.cell.sel,.xl td.sel{box-shadow:inset 1px 0 0 #0c6a5f,inset -1px 0 0 #0c6a5f}
.xl tr.gend>td{border-bottom:2px solid #222}
.xl td.cur{outline:2px solid #1a73e8;outline-offset:-2px;box-shadow:inset 0 0 0 3px #fff;position:relative;z-index:1}
/* 코드별 색 — 원본 시트의 조건부 서식과 동일 */
.cx-v{background:#00b050!important}
.cx-m,.cx-a{background:#34a853!important}
.cx-r{background:#ffff00!important}
.cx-n{background:#000!important;color:#fff!important}
.cx-l{background:#ff0000!important}
.cx-w{background:#9900ff!important;color:#fff!important}
.cx-c{background:#0000ff!important;color:#fff!important}
.cx-x{background:#ff00ff!important}
.cx-o,.cx-ye{background:#00ffff!important}
.cx-g,.cx-gy{background:#ff9900!important}
.cx-b{background:#f9cb9c!important}
.cx-hak{background:#00ff00!important}
.cx-chul{background:#46bdc6!important}
.palette .pk[class*="cx-"],.sw[class*="cx-"]{color:#000;border-color:#888}
.palette .pk.cx-n,.palette .pk.cx-w,.palette .pk.cx-c,.sw.cx-n,.sw.cx-w,.sw.cx-c{color:#fff}

/* 오른쪽 : 지각 출미 퇴미 결근 조퇴 외출 · 비고 */
.xl th.sumh,.xl th.sumk{min-width:44px;width:44px;color:#000}
.xl th.sumh{font-size:13.5px}
.xl th.sh-L{background:#ff0000;border-left:2px solid #222}
.xl th.sh-W{background:#9900ff;color:#fff}
.xl th.sh-C{background:#0000ff;color:#fff}
.xl th.sh-X{background:#ff00ff}
.xl th.sh-O{background:#00ffff}
.xl th.sh-G{background:#ff9900}
.xl td.sum{min-width:44px;font-weight:500;font-size:12.5px;color:#000}
.xl td.sum[data-sk="L"]{border-left:2px solid #222}
.xl td.sum.hi{background:#fce5cd;font-weight:700}
.xl th.notehd{min-width:250px;width:250px;border-left:2px solid #222;border-right:2px solid #222}
.xl td.notec{text-align:left;padding:3px 8px;min-width:250px;max-width:420px;font-size:12px;line-height:1.4;color:#222;
  white-space:normal;word-break:keep-all;border-left:2px solid #222;border-right:2px solid #222}
body.editing .xl td.notec{cursor:text}
body.editing .xl td.notec:hover{background:#eef4ff}

/* 하단 : 직군별 오전·오후 / 야간근무자 / 총합계 */
.xl tr.sp>td{height:16px;border:0;background:transparent}
.xl tr.ah>td{background:#d9d2e9;font-weight:700;height:22px}
.xl tr.ah>td.sat{color:#0000ff}.xl tr.ah>td.sun{color:#ff0000}
.xl tr.ah>td.sel{background:#cdc3e6}
.xl tr.ag>td{height:22px;font-size:12.5px}
.xl tr.ag>td.nmc{font-weight:500}
.xl tr.ag.night>td{background:#999}
.xl tr.ag.night>td.bad{background:#f4b6a8;color:#a00;font-weight:700}
.xl tr.ag.total>td{background:#fff2cc;font-weight:700}
.xl td.aggcat{background:#fff;border-bottom:2px solid #222;font-size:12px;color:#0000ff}
.xl tr.ag:last-child>td{border-bottom:2px solid #222}

/* ===================== 브랜드 적용 (BI 가이드) ===================== */
:root{--gold-ink:#86704B}
.eyebrow{color:var(--gold-ink)}
.topbar{box-shadow:0 1px 0 var(--gold-soft)}
.topbar-in{height:var(--top)}
.brandlink{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
.logo{height:34px;width:auto;display:block}                    /* BI 화면용 최소 폭 55px 이상 */
.portal{font-size:12.5px;font-weight:700;color:var(--ink-2);padding-left:12px;border-left:1px solid var(--line-2);line-height:1.1}
.tab{font-weight:700;padding:21px 14px 18px}
.tab[aria-current="page"]{border-bottom-width:3px;padding-bottom:16px}

/* 키 비주얼의 아치(치유의 북극성 아래 지붕) — 모서리에 얇은 골드 라인 */
.arcs{position:absolute;inset:0;pointer-events:none;--arc:clamp(56px,8vw,112px);--aw:3px}
.arcs i{position:absolute;width:var(--arc);height:calc(var(--arc) * 1.55);border:0 solid var(--gold)}
.arcs .tl{left:0;top:0;border-right-width:var(--aw);border-bottom-width:var(--aw);border-bottom-right-radius:var(--arc)}
.arcs .tr{right:0;top:0;border-left-width:var(--aw);border-bottom-width:var(--aw);border-bottom-left-radius:var(--arc)}
.arcs .bl{left:0;bottom:0;border-right-width:var(--aw);border-top-width:var(--aw);border-top-right-radius:var(--arc)}
.arcs .br{right:0;bottom:0;border-left-width:var(--aw);border-top-width:var(--aw);border-top-left-radius:var(--arc)}

/* 로그인 */
body.auth{display:block;place-items:normal;min-height:100vh;background:var(--surface)}
#app{width:100%}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth-brand{position:relative;background:var(--beige);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:56px 64px;overflow:hidden}
.auth-brand .logo{height:76px;margin-bottom:38px}
.auth-brand h2{margin:0 0 16px;font-size:clamp(28px,3.4vw,42px);font-weight:800;color:var(--blue);line-height:1.28;letter-spacing:-.035em}
.auth-brand p{margin:0;color:var(--blue);opacity:.8;font-size:14px;line-height:1.85;max-width:330px}
.auth-side{display:flex;align-items:center;justify-content:center;padding:36px 24px;background:var(--surface)}
.login-card{width:min(380px,100%);background:transparent;border:0;box-shadow:none;padding:0}
.login-card h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.btn.primary{font-weight:700}
@media (max-width:860px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-brand{padding:38px 28px 44px}.auth-brand .logo{height:54px;margin-bottom:20px}
  .auth-brand h2{font-size:26px;margin-bottom:8px}.auth-brand p{font-size:13px}
  .auth-side{align-items:flex-start;padding-top:28px}
}

/* 홈 */
.home{max-width:1180px;margin:0 auto;padding:22px 20px 70px;display:flex;flex-direction:column;gap:18px}
.hero{position:relative;background:var(--beige);border-radius:22px;overflow:hidden;padding:58px 28px 52px;text-align:center;
  min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.hero>*:not(.arcs){position:relative}
.auth-brand>*:not(.arcs){position:relative}
.hero .star{width:30px;height:auto;margin-bottom:2px}
.hero .date{font-size:13px;font-weight:700;color:var(--gold-ink);margin:0}
.hero h1{margin:0;font-size:clamp(28px,5vw,48px);font-weight:800;color:var(--blue);line-height:1.22;letter-spacing:-.035em}
.hero .hello{margin:2px 0 0;font-size:15px;color:var(--ink-2);line-height:1.7}
.mychip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;color:var(--ink);box-shadow:0 1px 0 var(--line-2)}
.mychip i{font-style:normal;font-weight:800;border-radius:999px;padding:2px 10px;font-size:13px}
.hero .go{margin-top:8px}
.home-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px}
.card h3{margin:0 0 14px;font-size:15px;font-weight:800}
.card h3 small{font-weight:400;color:var(--ink-3);margin-left:8px;font-size:12px}
.today3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tbox{border-radius:12px;padding:14px 15px 13px}
.tbox.am{background:var(--am-bg);color:var(--am)}.tbox.pm{background:var(--pm-bg);color:var(--pm)}.tbox.nt{background:var(--blue);color:#fff}
.tbox .lb{font-size:12px;font-weight:700;opacity:.9}
.tbox .n{font-size:36px;font-weight:800;line-height:1.1;margin-top:4px;letter-spacing:-.03em}.tbox .n small{font-size:14px;font-weight:700;margin-left:2px}
.tbox .sub{font-size:11.5px;margin-top:8px;line-height:1.6;opacity:.92}
.tnote{margin:12px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.tnote.bad{color:var(--warn);font-weight:700}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wd{border-radius:10px;padding:8px 2px 7px;text-align:center;background:var(--surface-2)}
.wd .dw{font-size:11px;color:var(--ink-3);font-weight:700}.wd.wk .dw{color:var(--warn)}
.wd .dn{font-size:14px;font-weight:800;margin:1px 0 6px}
.wd .cd{font-size:13px;font-weight:800;border-radius:7px;padding:5px 0;min-height:27px;margin:0 3px}
.wd.today{outline:2.5px solid var(--blue);outline-offset:-1px;background:#fff}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.mod{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px 18px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.mod:hover{border-color:var(--blue)}
.mod b{font-size:15px;font-weight:800}.mod span{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.mod.soon{background:transparent;border:1px dashed var(--line-2);box-shadow:none;cursor:default}.mod.soon:hover{border-color:var(--line-2)}
.mod.soon b{color:var(--ink-2)}
.pill{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--gold-soft);color:var(--gold-ink)}
.mod.ready .pill{background:var(--accent-soft);color:var(--blue)}
.sec-title{margin:6px 0 -4px;font-size:15px;font-weight:800}
.creed{background:var(--beige);border-radius:16px;padding:20px 26px;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.creed b{color:var(--blue);font-size:16px;font-weight:800;letter-spacing:-.02em}
.creed .snc{display:flex;gap:8px}.creed .snc span{background:#fff;color:var(--gold-ink);font-weight:800;font-size:12.5px;border-radius:999px;padding:5px 13px}
@media (max-width:860px){.home-grid{grid-template-columns:1fr}.hero{min-height:270px;padding:46px 20px 40px}}
@media (max-width:520px){.today3{grid-template-columns:1fr}.tbox{display:flex;align-items:baseline;gap:14px}.tbox .n{margin:0}.tbox .sub{margin:0 0 0 auto;text-align:right}.card{padding:18px 16px}}
@media (max-width:520px){
  .portal{display:none}
  .topbar-in{gap:6px;padding:0 10px}
  .tab{padding:21px 9px 18px}.tab[aria-current="page"]{padding-bottom:16px}
  .userchip{gap:6px}.chipbtn{padding:5px 10px}
  .tbox .lb{white-space:nowrap;min-width:30px}.tbox .n{white-space:nowrap}.tbox .n small{white-space:nowrap}
  .tbox .sub{max-width:62%}
}

/* ===================== 공지사항 ===================== */
.notices{display:flex;flex-direction:column;gap:10px}
.notice{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow)}
.notice.pinned{border-color:var(--gold);background:var(--gold-soft)}
.notice-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.notice-title{font-size:14.5px}
.notice-body{font-size:13.5px;color:var(--ink-2);line-height:1.7;white-space:pre-line;margin-bottom:8px}

/* ===================== 주소록: 병원 대표 정보 ===================== */
.hcard{background:var(--beige);border-radius:14px;padding:16px 20px;margin-bottom:16px}
.hrow{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink)}
.hrow b{font-size:15px;font-weight:800;color:var(--blue)}
.hrow.slogan{font-style:italic;color:var(--gold-ink);margin-top:2px}
.hrow .btn{margin-left:auto}

/* ===================== 인사관리카드 ===================== */
.hrgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hrfield{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.hrfield .lb{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.hrfield .vl{font-size:14px;color:var(--ink)}
.hrsec{margin-top:18px}
.hrsec h3{margin:0 0 8px;font-size:14px;font-weight:800}
@media (max-width:680px){.hrgrid{grid-template-columns:1fr}}

/* ===================== 병원 매뉴얼 ===================== */
.manuals{display:flex;flex-direction:column;gap:8px}
.manual-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:13px 18px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.manual-row:hover{border-color:var(--blue)}
.manual-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0}
.manual-main b{font-size:14.5px}
.manual-note{flex-basis:100%;font-size:12px;color:var(--ink-3)}
.manual-actions{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12.5px}

/* 매뉴얼 상세 본문 */
.manual-body{white-space:pre-wrap;line-height:1.75;font-size:13.5px;color:var(--ink);max-height:none}

/* 계정 목록: 정렬 가능한 표 머리글 */
.tbl th.sortable:hover{color:var(--blue)}
.sort-arrow{font-size:10px;color:var(--blue)}