:root {
  --bg: #f1f4f8;
  --panel: #fff;
  --line: #e3e8ef;
  --line-2: #cbd4e0;
  --ink: #172033;
  --ink-2: #59677c;
  --ink-3: #99a4b4;
  --accent: #1a63d8;
  --accent-soft: #eaf1fe;
  --ok: #14804a;
  --ok-soft: #e6f4ec;
  --warn: #a45907;
  --warn-soft: #fdf2e3;
  --bad: #c62828;
  --bad-soft: #fdecec;
  --hold-soft: #eceff3;
  --flash: #fff6cc;
  --r: 8px;
  --row: 30px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 13px/1.4 "Pretendard", "Malgun Gothic", -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.booting > * { visibility: hidden; }
button { font: inherit; cursor: pointer; border-radius: 6px; }
[hidden] { display: none !important; }

/* ── 로그인 ── */
.loginwrap {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: linear-gradient(160deg, #eef3fa, #dde6f3);
}
.loginbox { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 30px 26px; width: 340px; box-shadow: 0 10px 40px #0b1a2c1a; }
.loginbox h1 { margin: 0 0 4px; font-size: 19px; }
.loginbox .sub { margin: 0 0 18px; color: var(--ink-3); font-size: 12.5px; }
.loginbox label { display: block; margin-bottom: 12px; color: var(--ink-2); font-size: 12.5px; }
.loginbox input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 7px; font: inherit; }
.loginbox input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.loginbox button { width: 100%; padding: 9px; margin-top: 4px; }
.loginbox .err { color: var(--bad); font-size: 12.5px; margin: 0 0 12px; }
.loginbox .err:empty { display: none; }

/* BIT SSO 버튼 */
.ssobtn {
  display: block; text-align: center; text-decoration: none; padding: 10px;
  border-radius: 8px; background: var(--accent); color: #fff; margin-bottom: 16px;
}
.ssobtn:hover { filter: brightness(1.08); }
.ssobtn b { display: block; font-size: 13.5px; }
.ssobtn span { font-size: 11px; opacity: .8; }
.ordiv { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ink-3); font-size: 11.5px; }
.ordiv::before, .ordiv::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── 상단바 ── */
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.brand strong { font-size: 15px; letter-spacing: -.3px; }
.spacer { flex: 1; }
.proj, .projfixed { font-size: 13px; font-weight: 600; padding: 5px 9px; max-width: 260px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--ink); }
.projfixed { border-style: dashed; color: var(--ink-2); }
button.ghost { background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); padding: 5px 9px; }
button.ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
button.ghost.danger:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
button.ghost.tiny { padding: 2px 7px; font-size: 11.5px; }
button.primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; padding: 5px 11px; font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }
button.icon { background: none; border: none; color: var(--ink-3); padding: 1px 4px; font-size: 13px; line-height: 1; }
button.icon:hover { color: var(--bad); }

.kpis { display: flex; gap: 6px; }
.kpi { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 11px; text-align: center; }
.kpi .k { display: block; font-size: 10px; color: var(--ink-3); }
.kpi .v { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .v em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.kpi.dday .v { color: var(--accent); }
.kpi.go .v { color: var(--ok); }
.kpi.nogo .v { color: var(--bad); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.dot.live { background: #22c55e; }
.dot.down { background: var(--bad); }

.acct { position: relative; }
.acctmenu { position: absolute; right: 0; top: 100%; margin-top: 5px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 6px 20px #0b1a2c1f; overflow: hidden; z-index: 50; min-width: 150px; }
.acctmenu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 12px; border-radius: 0; color: var(--ink); }
.acctmenu button:hover { background: var(--accent-soft); color: var(--accent); }
.role { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.role.bit { background: var(--accent-soft); color: var(--accent); }
.role.hospital { background: var(--ok-soft); color: var(--ok); }

/* ── 탭 ── */
.tabs { display: flex; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 45px; z-index: 39; }
.tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 13px; color: var(--ink-2); border-radius: 0; }
.tabs button:hover { color: var(--accent); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.pane { display: none; padding: 12px 14px 32px; }
.pane.active { display: block; }

/* ── 카드 · 레이아웃 ── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cardbar { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.cardbar h2 { margin: 0; font-size: 13px; white-space: nowrap; }
.cardbar h2::before { content: ''; display: inline-block; width: 3px; height: 11px; background: var(--accent); border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 500px); gap: 12px; align-items: start; }
.split.wide { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.boardsplit { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 12px; align-items: start; }
.side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1400px) { .split, .split.wide { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .boardsplit { grid-template-columns: 1fr; } }

.toolbar, .weekbar { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.weekbar b { font-size: 13.5px; font-variant-numeric: tabular-nums; margin: 0 4px; }
.toolbar input[type=search], .toolbar select, .weekbar select { padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; font: inherit; color: var(--ink); }
.toolbar input[type=search] { min-width: 210px; }
.chk { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.hint { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.hintinline { color: var(--ink-3); font-weight: 400; font-size: 11px; margin-left: 4px; }
.pending { background: var(--warn-soft); color: var(--warn); border: 1px solid #eccfa4; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pending:hover { filter: brightness(.97); }

/* ── 주간 캘린더 ── */
.cal { --gut: 40px; overflow: auto; }
.calhead, .calstrip { display: grid; grid-template-columns: var(--gut) repeat(7, minmax(0, 1fr)); }
.calhead { position: sticky; top: 0; z-index: 3; background: #eef2f7; border-bottom: 1px solid var(--line-2); }
.calhead .gut, .calstrip .gut { border-right: 1px solid var(--line); }
.calstrip .gut { font-size: 9.5px; color: var(--ink-3); text-align: center; padding-top: 5px; line-height: 1.2; }
.dhead { padding: 5px 6px; text-align: center; border-left: 1px solid var(--line); }
.dhead b { font-size: 12px; margin-right: 4px; }
.dhead span { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dhead.sat b, .dhead.sat span { color: var(--accent); }
.dhead.sun b, .dhead.sun span { color: var(--bad); }
.dhead.istoday { background: var(--accent); color: #fff; }
.dhead.istoday span, .dhead.istoday b { color: #fff; }

.calstrip { border-bottom: 1px solid var(--line-2); background: #fafbfd; min-height: 26px; }
.scell { border-left: 1px solid var(--line); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-height: 26px; cursor: pointer; }

/* 시간대 칸 안에 세로로 쌓는다. 절대위치·분단위 계산 없음. */
.calgrid { }
.hrow { display: grid; grid-template-columns: var(--gut) repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.hlab { border-right: 1px solid var(--line); font-size: 10.5px; color: var(--ink-3);
        text-align: right; padding: 5px 5px 0 0; font-variant-numeric: tabular-nums; }
.tcell { border-left: 1px solid var(--line); min-height: 40px; padding: 3px;
         display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.tcell.istoday { background: #f7faff; }

/* 일정이 몇 건이든 칸 아래에 추가용 여백줄을 항상 남긴다.
   (여러 건이면 칸이 딱 맞아버려 새로 추가할 자리가 없어지던 문제) */
.tcell::after {
  content: '＋'; flex: none; margin-top: auto; height: 17px; line-height: 17px;
  text-align: center; font-size: 12px; color: var(--accent);
  border-radius: 4px; opacity: 0; transition: opacity .12s;
}
.tcell:hover { background: var(--accent-soft); }
.tcell:hover::after { opacity: .75; background: #fffc; box-shadow: inset 0 0 0 1px #1a63d833; }

.ev {
  padding: 3px 6px; border-radius: 5px; font-size: 12px; line-height: 1.35;
  cursor: pointer; border-left: 3px solid; display: flex; align-items: baseline; gap: 5px;
}
.ev b { font-variant-numeric: tabular-nums; font-size: 11.5px; flex: none; }
.ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev u { text-decoration: none; font-size: 9.5px; font-weight: 700; background: #fff9; padding: 0 4px; border-radius: 3px; flex: none; }
.ev:hover { filter: brightness(.95); }
.ev.sel { outline: 2px solid var(--ink); outline-offset: -1px; }
.ev.isdone { opacity: .62; }
.ev.isvoid { opacity: .45; text-decoration: line-through; }
.ev.isreq { border-style: dashed; border-left-style: solid; box-shadow: inset 0 0 0 1px #a4590755; }
.ev.chip { }
.ev.flash { animation: flash 1.4s ease-out; }
@keyframes flash { from { background: var(--flash) !important; } }

td.ok, th.ok { text-align: center; }
td.ok b { color: var(--ok); font-size: 11.5px; }

/* 부문 색 (8색 순환) */
.ev.c0 { background: #e6f0fd; border-color: #2f6fd0; color: #14417f; }
.ev.c1 { background: #e6f4ec; border-color: #1d8a55; color: #0e5233; }
.ev.c2 { background: #fdf0e3; border-color: #c2790f; color: #7a4a05; }
.ev.c3 { background: #f1e9fb; border-color: #7e4bcf; color: #4a2585; }
.ev.c4 { background: #fde9ee; border-color: #cf3b63; color: #85203c; }
.ev.c5 { background: #e4f4f6; border-color: #17838f; color: #0b4f57; }
.ev.c6 { background: #f5f1e0; border-color: #8f7f1a; color: #574c07; }
.ev.c7 { background: #ecedf2; border-color: #5c6579; color: #333a49; }
.ev.cx { background: #f4f5f7; border-color: #99a4b4; color: #59677c; }

/* ── 호버 상세 카드 ── */
.evhover {
  position: fixed; z-index: 250; width: 270px; pointer-events: none;
  background: #fff; border: 1px solid var(--line-2); border-radius: 9px;
  box-shadow: 0 8px 28px #0b1a2c26; padding: 9px 11px; font-size: 12px;
}
.evhover .hh { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.evhover .hh b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.evhover dl { margin: 0; display: grid; grid-template-columns: 38px 1fr; gap: 4px 8px; }
.evhover dt { color: var(--ink-3); font-size: 11.5px; }
.evhover dd { margin: 0; word-break: break-word; }
.evhover .hf { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11px; }

/* ── 일정 모달 ── */
.evdlg { width: 420px; max-width: 92vw; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; }
.evdlg .dlghead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.evdlg .dlghead h3 { margin: 0; font-size: 13.5px; }
.evdlg .form { padding: 12px; }

/* ── 오른쪽 폼 ── */
.form { padding: 10px; }
.form label { display: block; margin-bottom: 9px; color: var(--ink-2); font-size: 12px; }
.form input, .form select { display: block; width: 100%; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; color: var(--ink); background: #fff; }
.form input:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.form input:disabled, .form select:disabled { background: var(--hold-soft); color: var(--ink-2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.formfoot { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.approve { display: flex; gap: 7px; margin: 4px 0 10px; }
.approve button { flex: 1; }
.form .foot.inform { margin: 6px -10px -10px; }
dl.ro { margin: 0; display: grid; grid-template-columns: 54px 1fr; gap: 5px 8px; }
dl.ro dt { color: var(--ink-3); font-size: 12px; }
dl.ro dd { margin: 0; font-size: 12.5px; }
.st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--hold-soft); color: var(--ink-2); }
.st-완료 { background: var(--ok-soft); color: var(--ok); }
.st-요청 { background: var(--warn-soft); color: var(--warn); }
.st-반려, .st-취소 { background: var(--bad-soft); color: var(--bad); }
.st-진행중 { background: var(--accent-soft); color: var(--accent); }

/* ── 표 ── */
.tablewrap { overflow: auto; max-height: calc(100vh - 260px); }
.tablewrap.tall { max-height: calc(100vh - 300px); }
/* 오른쪽 사이드 표는 화면 높이를 채운다 (예약요청 폼이 있으면 그만큼 줄어든다) */
.tablewrap.side-fill { max-height: calc(100vh - 300px); min-height: 260px; }
body.hospital .tablewrap.side-fill { max-height: calc(100vh - 610px); min-height: 200px; }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
table.grid thead th { position: sticky; top: 0; z-index: 2; background: #eef2f7; color: var(--ink-2); font-weight: 700; font-size: 11.5px; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.grid thead th.ac { text-align: center; }
table.grid td { padding: 0; border-bottom: 1px solid var(--line); height: var(--row); overflow: hidden; }
table.grid tbody tr:hover td { background: #f7f9fc; }
tr.daysep td { border-top: 1px solid var(--line-2); }
tr.empty td { color: var(--ink-3); padding: 14px 10px; }
td.pad { padding: 4px 8px; }
td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
td.pad.num { padding-right: 10px; }
.small { color: var(--ink-3); font-size: 11px; }
.strike { text-decoration: line-through; }
.late { color: var(--bad); font-weight: 700; }
td.act { text-align: right; white-space: nowrap; }
.req { text-align: center; color: var(--warn); font-weight: 700; }
tr.done td:not(.keep), tr.done .cellin { color: var(--ink-3); }

.cellin { width: 100%; border: 1px solid transparent; background: transparent; padding: 4px 7px; font: inherit; color: inherit; border-radius: 4px; text-overflow: ellipsis; }
.cellin::placeholder { color: #c3cbd6; font-size: 12px; opacity: 0; }
tr:hover .cellin::placeholder, .cellin:focus::placeholder { opacity: 1; }
.cellin:hover { border-color: var(--line-2); background: #fff; }
.cellin:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px var(--accent-soft); }
.cellin.saving { border-color: var(--warn); }
.cellin.num { text-align: right; padding-right: 6px; }
.cellin.dt { font-variant-numeric: tabular-nums; }
select.cellin { cursor: pointer; appearance: none; padding-right: 16px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 10px) 52%, calc(100% - 6px) 52%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
select.cellin.s-완료 { color: var(--ok); font-weight: 700; }
select.cellin.s-진행중 { color: var(--accent); font-weight: 700; }
select.cellin.s-지연, select.cellin.s-N { color: var(--bad); font-weight: 700; }
select.cellin.s-Y { color: var(--ok); font-weight: 700; }

.grouprow td { background: #e7edf5 !important; font-weight: 700; border-top: 1px solid var(--line-2); }
.lvl1 td { background: #f5f8fb; color: var(--ink-2); font-weight: 600; }
.lvl2 td:nth-child(2) { padding-left: 18px; }

.prog { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.prog .n { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.prog .n i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.prog .b { flex: 1; height: 5px; min-width: 24px; max-width: 54px; background: var(--hold-soft); border-radius: 3px; overflow: hidden; }
.prog .b i { display: block; height: 100%; background: var(--accent); }
.prog.full .n { color: var(--ok); }
.prog.full .b i { background: var(--ok); }
.prog.none .n { color: var(--ink-3); }
.pl { font-size: 10.5px; color: var(--accent); font-weight: 700; }

.phasebars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pb { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px; }
.pb .t { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.pb .bar { height: 7px; background: var(--hold-soft); border-radius: 4px; position: relative; overflow: hidden; }
.pb .bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 4px; }
.pb .bar u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink-2); }
.pb .m { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; display: flex; justify-content: space-between; }

.foot { color: var(--ink-3); font-size: 11.5px; margin: 0; padding: 7px 10px; border-top: 1px solid var(--line); background: #fafbfd; }
.foot b { color: var(--ink-2); }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(18px); background: #172033; color: #fff; padding: 9px 17px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .22s; z-index: 300; max-width: 76vw; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--bad); }
dialog { border: 1px solid var(--line-2); border-radius: 12px; padding: 18px 20px; min-width: 330px; }
dialog::backdrop { background: #0b1a2c66; }
dialog h3 { margin: 0 0 13px; }
dialog label { display: block; margin-bottom: 9px; color: var(--ink-2); }
dialog input, dialog select { display: block; width: 100%; margin-top: 3px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; }
dialog menu { display: flex; justify-content: flex-end; gap: 7px; padding: 0; margin: 15px 0 0; }

@media (max-width: 1100px) { .kpis { display: none; } }
.authbadge { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.authbadge.sso { background: var(--accent-soft); color: var(--accent); }
.authbadge.password { background: var(--hold-soft); color: var(--ink-3); }
td.idcell { display: flex; align-items: center; gap: 4px; height: var(--row); }
td.idcell .cellin { font-weight: 700; }
td.idcell b.pad { padding: 4px 7px; }