/* 세이프스쿨24 상황판 — 앱 스타일 (디자인 토큰 기반) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--fg-body);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
i[data-lucide] { width: 20px; height: 20px; stroke-width: 1.75; }

.ss-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============================ APP SHELL ============================ */
#root { min-height: 100vh; }
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Top bar (로그인 이후) ---- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-4);
  height: 64px; padding: 0 var(--sp-6);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar__nav-buttons { display: flex; align-items: center; gap: 12px; }
.topbar__nav-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--fg-secondary); font-size: var(--fs-body-sm); font-weight: 600; width: 28px; height: 28px; border-radius: var(--r-md); transition: all .14s; cursor: pointer; }
.topbar__nav-btn i { width: 17px; height: 17px; }
.topbar__nav-btn.topbar__nav-home { width: auto; padding: 6px 12px; font-weight: 700; }
.topbar__nav-btn:hover { color: var(--blue-600); background: var(--gray-100); }
.topbar__crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); color: var(--fg-secondary); font-weight: 600; white-space: nowrap; }
.topbar__crumbs .crumb-link { color: var(--fg-secondary); background: none; border: none; padding: 4px 6px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-body-sm); }
.topbar__crumbs .crumb-link:hover { background: var(--gray-100); color: var(--blue-600); }
.topbar__crumbs .crumb-cur { color: var(--fg-primary); font-weight: 700; }
.topbar__crumbs i { width: 15px; height: 15px; color: var(--gray-300); }
.topbar__crumbs .crumb-sep { width: 15px; height: 15px; color: var(--gray-300); flex-shrink: 0; }
.topbar__spacer { flex: 1; }

/* role switcher */
.roleswitch { display: flex; align-items: center; gap: 0; background: var(--gray-100); border-radius: var(--r-pill); padding: 4px; }
.roleswitch button {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; color: var(--fg-secondary);
  font-size: var(--fs-body-sm); font-weight: 700; padding: 7px 14px; border-radius: var(--r-pill);
  transition: all .16s cubic-bezier(.2,.7,.3,1); white-space: nowrap;
}
.roleswitch button i { width: 16px; height: 16px; }
.roleswitch button.active.safe { background: var(--white); color: var(--blue-700); box-shadow: var(--shadow-sm); }
.roleswitch button.active.school { background: var(--white); color: var(--safe-strong); box-shadow: var(--shadow-sm); }
.roleswitch button:not(.active):hover { color: var(--fg-body); }

.topbar__user { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__who { text-align: right; line-height: 1.25; white-space: nowrap; }
.topbar__who b { display: block; font-size: var(--fs-body-sm); color: var(--fg-primary); font-weight: 700; }
.topbar__who span { font-size: var(--fs-caption); color: var(--fg-secondary); }
.avatar { width: 38px; height: 38px; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 800; font-size: 15px; color: var(--white); background: var(--blue-500); }
.avatar.school { background: var(--safe); }
.btn-logout { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--white); color: var(--fg-secondary); font-weight: 600; font-size: var(--fs-body-sm); padding: 8px 12px; border-radius: var(--r-md); }
.btn-logout:hover { background: var(--gray-100); color: var(--fg-body); }
.btn-logout i { width: 16px; height: 16px; }

/* role banner (현재 권한 안내) */
.rolebar { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-6); font-size: var(--fs-body-sm); font-weight: 600; border-bottom: 1px solid var(--border); }
.rolebar.safe { background: var(--blue-50); color: var(--blue-800); }
.rolebar.school { background: var(--safe-bg); color: var(--safe-strong); }
.rolebar i { width: 17px; height: 17px; }
.rolebar .rolebar__pill { margin-left: auto; font-size: var(--fs-caption); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,0.6); }

/* generic buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; border: none; border-radius: var(--r-md); padding: 11px 20px; font-size: 15px; transition: all .16s cubic-bezier(.2,.7,.3,1); }
.btn i { width: 17px; height: 17px; }
.btn-primary { background: var(--blue-500); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-600); }
.btn-primary:active { background: var(--blue-700); transform: scale(.98); }
.btn-ghost { background: transparent; color: var(--fg-body); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-sm { padding: 8px 14px; font-size: var(--fs-body-sm); }
.btn { text-decoration: none; }
.topbar__visitor { color: var(--safe-strong); box-shadow: inset 0 0 0 1px rgba(21, 160, 106, 0.30); white-space: nowrap; }
.topbar__visitor:hover { background: var(--safe-bg); box-shadow: inset 0 0 0 1px rgba(21, 160, 106, 0.5); }
.topbar__visitor i { width: 16px; height: 16px; }
.topbar__visitor--center { position: absolute; left: 50%; transform: translateX(-50%); }

/* ---- 개발용 drawer (페이지 경로 · 역할 전환 — 출시 전 임시 도구) ---- */
.devdrawer { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--white); border-bottom: 1px solid var(--gray-200); box-shadow: 0 10px 28px rgba(15, 30, 50, .14); transform: translateY(-100%); transition: transform .26s cubic-bezier(.2,.7,.3,1); }
.devdrawer.open { transform: translateY(0); }
.devdrawer__inner { display: flex; align-items: center; gap: var(--sp-4); padding: 10px var(--sp-6); }
.devdrawer__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #9a3412; background: #fff7ed; border: 1px dashed #fdba74; border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap; }
.devdrawer__label i, .devdrawer__label svg { width: 13px; height: 13px; }
.devdrawer__handle { position: absolute; top: 100%; right: 18px; display: flex; align-items: center; gap: 6px; height: 24px; border: 1px solid var(--gray-300); border-top: none; border-radius: 0 0 10px 10px; background: var(--gray-100); color: var(--fg-secondary); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; cursor: pointer; padding: 0 12px; opacity: .85; transition: opacity .15s, background .15s; box-shadow: 0 3px 8px rgba(15, 30, 50, .14); }
.devdrawer__handle:hover, .devdrawer.open .devdrawer__handle { opacity: 1; background: var(--white); color: var(--blue-600); }
.devdrawer__handle i, .devdrawer__handle svg { width: 13px; height: 13px; }

/* ---- 로그아웃 첫 화면 헤더 (로고+방문자 / 항상 떠 있는 로그인) ---- */
.homebar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255,255,255,0.88); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.homebar__left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 2px; }
.homebar__nav-buttons { display: flex; align-items: center; gap: 12px; }
.homebar__nav-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--fg-secondary); font-size: var(--fs-body-sm); font-weight: 600; width: 28px; height: 28px; border-radius: var(--r-md); transition: all .14s; cursor: pointer; }
.homebar__nav-btn i { width: 17px; height: 17px; }
.homebar__nav-btn.homebar__nav-home { width: auto; padding: 6px 12px; font-weight: 700; }
.homebar__nav-btn:hover { color: var(--blue-600); background: var(--gray-100); }
.homebar__spacer { flex: 1; }
.homebar__logo { display: flex; align-items: center; height: 48px; }
.homebar__logo img { height: 46px; display: block; }
.homebar__home { border: none; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; }

/* 컴팩트 로그인 박스 */
.loginbox { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.loginbox__fields { display: flex; align-items: stretch; gap: 8px; }
/* 아이디·비밀번호를 한 사각형 안에 위아래로 */
.loginbox__box {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: all .14s;
}
.loginbox__box:focus-within { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.loginbox__box.err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.loginbox__row { display: flex; align-items: center; gap: 8px; padding: 8px 11px; }
.loginbox__row i { width: 15px; height: 15px; color: var(--gray-400); flex-shrink: 0; }
.loginbox__row input { border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--fg-primary); width: 178px; min-width: 0; }
.loginbox__row input::placeholder { color: var(--gray-400); }
.loginbox__rowsep { height: 1px; background: var(--border); margin: 0 11px; }
.loginbox .inp__eye { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -5px -4px 0; padding: 0; border: none; background: none; cursor: pointer; color: var(--gray-400); border-radius: var(--r-sm); }
.loginbox .inp__eye:hover { color: var(--blue-600); background: var(--blue-50); }
.loginbox .inp__eye svg { width: 15px; height: 15px; }
.loginbox__go { white-space: nowrap; align-self: stretch; padding: 0 18px; font-size: var(--fs-body-sm); }
.loginbox__go i { width: 16px; height: 16px; }

.loginbox__meta { display: flex; align-items: center; gap: 11px; }
.loginbox__sep { width: 1px; height: 13px; background: var(--border-strong); }
.loginbox__role { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.loginbox__role.school { color: var(--safe-strong); }
.loginbox__role.safe { color: var(--blue-700); }
.loginbox__role-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.login__check--xs { gap: 6px; white-space: nowrap; }
.login__check--xs .login__check-box { width: 15px; height: 15px; border-radius: 4px; }
.login__check--xs .login__check-box svg { width: 11px; height: 11px; }
.login__check--xs .login__check-lab { font-size: 11px; font-weight: 600; color: var(--fg-secondary); white-space: nowrap; }

.loginbox__notice { display: flex; align-items: flex-start; gap: 7px; max-width: 340px; font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--caution-strong); background: var(--caution-bg); border: 1px solid var(--caution); border-radius: var(--r-sm); padding: 7px 9px; }
.loginbox__notice svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.loginbox__notice b { font-weight: 800; }
.loginbox__notice button { margin-left: auto; border: none; background: none; padding: 0; cursor: pointer; color: inherit; opacity: .7; display: grid; place-items: center; }
.loginbox__notice button i { width: 13px; height: 13px; }
.loginbox__err { align-self: flex-end; max-width: 380px; font-size: 11.5px; line-height: 1.4; color: var(--danger-strong); font-weight: 600; text-align: right; }

@keyframes loginShake { 0%, 100% { transform: translateX(0); } 18%, 54% { transform: translateX(-5px); } 36%, 72% { transform: translateX(5px); } }
.loginbox.shake { animation: loginShake .5s cubic-bezier(.36,.07,.19,.97); }

@media (max-width: 820px) {
  .homebar { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .loginbox { align-items: stretch; }
  .loginbox__fields { flex-wrap: wrap; }
  .loginbox__box { flex: 1; }
  .loginbox__row input { width: auto; flex: 1; }
  .loginbox__meta { flex-wrap: wrap; }
}

/* ============================ LOGIN ============================ */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr; }
.login__brandside { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--blue-600), var(--navy-900)); color: #fff; padding: var(--sp-16) var(--sp-12); display: flex; flex-direction: column; justify-content: space-between; }
.login__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(86,136,240,0.45), transparent 65%); top: -160px; right: -120px; }
.login__glow.two { top: auto; bottom: -200px; left: -160px; background: radial-gradient(circle, rgba(255,122,102,0.22), transparent 65%); }
.login__brandwm { position: absolute; right: -40px; bottom: -30px; width: 360px; opacity: 0.10; }
.login__brandtop { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.login__brandtop .shield { width: 44px; }
.login__brandtop .wm { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.login__brandtop .wm b { color: #fff; }
.login__brandtop .wm span { color: var(--blue-200); }
.login__hero { position: relative; z-index: 1; }
.login__hero .ss-overline { color: var(--blue-200); display: inline-flex; align-items: center; gap: 8px; }
.login__hero h1 { font-size: 40px; line-height: 1.18; font-weight: 800; letter-spacing: -0.02em; margin: 16px 0 14px; }
.login__hero p { font-size: var(--fs-body-lg); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 30ch; }
.login__points { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.login__points div { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: rgba(255,255,255,0.9); font-weight: 500; }
.login__points i { width: 18px; height: 18px; color: var(--blue-200); }

.login__formside { display: flex; align-items: center; justify-content: center; padding: var(--sp-12); background: var(--bg-surface); }
.login__card { width: 100%; max-width: 380px; }
.login__card h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.015em; color: var(--fg-primary); margin: 0 0 6px; }
.login__back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--fg-secondary); font-weight: 600; font-size: var(--fs-caption); padding: 0; margin-bottom: 16px; white-space: nowrap; }
.login__back i { width: 15px; height: 15px; }
.login__back:hover { color: var(--blue-600); }
.login__card .lead { font-size: var(--fs-body-sm); color: var(--fg-secondary); margin: 0 0 var(--sp-6); }
.login__tabs { display: flex; gap: 8px; background: var(--gray-100); padding: 5px; border-radius: var(--r-md); margin-bottom: var(--sp-6); }
.login__tabs button { flex: 1; border: none; background: transparent; padding: 11px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-body-sm); color: var(--fg-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: all .16s; }
.login__tabs button i { width: 16px; height: 16px; }
.login__tabs button.active { background: var(--white); box-shadow: var(--shadow-sm); }
.login__tabs button.active.safe { color: var(--blue-700); }
.login__tabs button.active.school { color: var(--safe-strong); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--fg-body); margin-bottom: 7px; }
.field .inp { display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; transition: all .14s; }
.field .inp:focus-within { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.field .inp i { width: 18px; height: 18px; color: var(--gray-400); }
.field .inp input { border: none; outline: none; flex: 1; font-size: 15px; color: var(--fg-primary); background: transparent; }
.field .inp .inp__eye {
  flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px;
  margin: -6px -6px -6px 0; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--gray-400); border-radius: var(--r-sm); transition: color .14s, background .14s;
}

/* ---- 로그인 옵션 체크박스 (비밀번호 저장 / 로그인 상태 유지) ---- */
.login__opts {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin: 4px 0 var(--sp-5);
}
.login__check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.login__check input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.login__check-box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  display: grid; place-items: center;
  color: transparent;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
  flex-shrink: 0;
}
.login__check-box svg { width: 13px; height: 13px; display: block; }
.login__check:hover .login__check-box { border-color: var(--blue-400); }
.login__check input:focus-visible + .login__check-box { box-shadow: var(--focus-ring); border-color: var(--blue-500); }
.login__check input:checked + .login__check-box {
  background: var(--blue-500); border-color: var(--blue-500); color: #fff;
}
.login__check-lab {
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-body);
}

/* ============================ WORKER CHIP RAIL ============================ */
.worker-rail {
  position: sticky; top: 0; z-index: 19;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 28px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.worker-rail__chips {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.worker-rail__chips::-webkit-scrollbar { height: 4px; }
.worker-rail__chips::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }
.worker-rail__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; flex-shrink: 0; border: none;
  border-radius: var(--r-pill);
  background: var(--gray-100); color: var(--fg-body);
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s, transform .14s;
  white-space: nowrap;
}
.worker-rail__chip:hover { background: var(--gray-200); }
.worker-rail__chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gray-400); flex-shrink: 0;
  transition: background .14s, box-shadow .14s;
}
.worker-rail__chip .nm { color: inherit; }
.worker-rail__chip .role {
  font-size: var(--fs-caption); font-weight: 600;
  color: var(--fg-secondary);
}
.worker-rail__chip.is-active {
  background: var(--blue-500); color: #fff;
  box-shadow: var(--shadow-sm);
}
.worker-rail__chip.is-active .dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.28); }
.worker-rail__chip.is-active .role { color: rgba(255,255,255,0.85); }
.worker-rail__add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; flex-shrink: 0;
  border: 1px dashed var(--blue-300); background: transparent;
  border-radius: var(--r-pill);
  color: var(--blue-600); font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.worker-rail__add:hover { background: var(--blue-50); border-color: var(--blue-500); }
.worker-rail__roster {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; flex-shrink: 0;
  border: none; background: transparent;
  color: var(--fg-secondary);
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
  cursor: pointer; border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.worker-rail__roster:hover { background: var(--gray-100); color: var(--fg-primary); }
.worker-rail__roster .ss-num { color: var(--blue-600); margin: 0 1px 0 3px; }

/* ============================ 인력 등록부 슬라이드 패널 ============================ */
.wr-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17, 38, 68, 0.40);
  animation: wrFade .18s ease-out;
}
@keyframes wrFade { from { opacity: 0; } to { opacity: 1; } }
.wr-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 100vw;
  background: #fff;
  box-shadow: -16px 0 48px rgba(17, 38, 68, 0.16);
  z-index: 101;
  display: flex; flex-direction: column;
  animation: wrSlide .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes wrSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.wr-panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px 8px;
}
.wr-panel__title { display: flex; align-items: center; gap: 9px; flex: 1; }
.wr-panel__title h3 { margin: 0; font-size: var(--fs-h3); font-weight: 800; color: var(--fg-primary); }
.wr-panel__title .bd-ic { color: var(--blue-600); }
.wr-panel__count {
  font-size: var(--fs-caption); font-weight: 700;
  color: var(--blue-700); background: var(--blue-50);
  padding: 3px 10px; border-radius: var(--r-pill);
}
.wr-panel__close {
  width: 32px; height: 32px; border: none;
  background: transparent; color: var(--fg-secondary);
  border-radius: var(--r-pill); cursor: pointer;
  display: grid; place-items: center;
}
.wr-panel__close:hover { background: var(--gray-100); color: var(--fg-body); }
.wr-panel__sub {
  margin: 0 24px 16px; font-size: var(--fs-caption);
  color: var(--fg-secondary); line-height: 1.55;
}
.wr-list {
  flex: 1; overflow: auto;
  padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.wr-row {
  display: grid; grid-template-columns: 28px 22px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left; cursor: pointer; font-family: inherit;
  transition: background .13s, border-color .13s;
  position: relative;
}
.wr-row:hover { background: var(--gray-50); border-color: var(--border); }
.wr-row.is-active {
  background: var(--blue-50);
  border-color: var(--blue-300);
  box-shadow: inset 0 0 0 1px var(--blue-300);
}
.wr-row__no {
  font-size: var(--fs-body); font-weight: 800;
  color: var(--fg-secondary); text-align: center;
}
.wr-row.is-active .wr-row__no { color: var(--blue-700); }
.wr-row__radio {
  font-size: 18px; color: var(--gray-300);
  text-align: center;
}
.wr-row.is-active .wr-row__radio { color: var(--blue-600); }
.wr-row__main { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.wr-row__main .nm {
  font-size: var(--fs-body); font-weight: 800;
  color: var(--fg-primary); letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-row__main .nm.placeholder { color: var(--gray-400); font-weight: 500; font-style: italic; }
.wr-row__main .role {
  font-size: var(--fs-caption); font-weight: 700;
  color: var(--fg-secondary);
  background: var(--gray-100);
  padding: 2px 8px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.wr-row.is-active .wr-row__main .role { background: var(--blue-100); color: var(--blue-700); }
.wr-row__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); color: var(--fg-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.wr-row__meta .sep { color: var(--gray-300); }
.wr-row__rm {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  color: var(--gray-400);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.wr-row__rm:hover { background: var(--danger-bg); color: var(--danger-strong); }
.wr-row--empty { cursor: default; background: var(--gray-50); border-color: var(--gray-100); opacity: 0.7; }
.wr-row--empty:hover { background: var(--gray-50); border-color: var(--gray-100); }
.wr-row__add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border: 1px dashed var(--blue-300); background: transparent;
  border-radius: var(--r-pill);
  color: var(--blue-600); font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
  cursor: pointer;
}
.wr-row__add:hover { background: var(--blue-50); border-color: var(--blue-500); }
.wr-panel__foot {
  padding: 12px 22px; border-top: 1px solid var(--border);
  font-size: var(--fs-caption); color: var(--fg-secondary);
  background: var(--gray-50);
  display: flex; align-items: flex-start; gap: 7px;
  line-height: 1.55;
}
.wr-panel__foot .bd-ic { color: var(--gray-400); margin-top: 1px; flex-shrink: 0; }

/* ---- 구독 서비스 카탈로그 (6-2) — wr-* 패널 위에 금액 카탈로그 확장 ---- */
.svc-row { align-items: center; }
.svc-row__fee {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  margin-left: auto; text-align: right; white-space: nowrap; flex-shrink: 0;
}
.svc-row__fee .amt {
  font-size: var(--fs-body-sm); font-weight: 800; color: var(--fg-primary);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.svc-row.is-active .svc-row__fee .amt { color: var(--blue-700); }
.svc-row__fee .per { font-size: var(--fs-caption); color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.svc-row .wr-row__rm { margin-left: 10px; }
.svc-panel__total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-top: 1px solid var(--border);
  background: var(--blue-50);
}
.svc-panel__total .lab {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-body-sm); font-weight: 700; color: var(--blue-800);
}
.svc-panel__total .lab .bd-ic { color: var(--blue-500); }
.svc-panel__total .amt {
  font-size: var(--fs-body); font-weight: 800; color: var(--blue-800);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.svc-panel__total .amt .vat { font-size: var(--fs-caption); font-weight: 600; color: var(--blue-600); }

/* ============================ 단기 대체인력 — 구인신청 + 탭 ============================ */
.hire-tabbar {
  display: flex; gap: 4px; padding: 10px 24px 0;
  max-width: var(--wrap, 1180px); margin: 0 auto; width: 100%;
  border-bottom: 1px solid var(--border);
}
.hire-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 18px; border: none; background: none; cursor: pointer;
  font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-secondary);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.hire-tab .bd-ic { color: var(--gray-400); }
.hire-tab.on { color: var(--blue-700); border-bottom-color: var(--blue-600); }
.hire-tab.on .bd-ic { color: var(--blue-600); }
.hire-tab .ss-num { font-weight: 800; }
.hire-tab__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--danger, #d8443a); color: #fff; font-size: 11px; font-weight: 800;
}

.hire-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hire-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 56px 20px; color: var(--gray-400); text-align: center;
}
.hire-empty .bd-ic { color: var(--gray-300); }
.hire-empty p { margin: 0; font-size: var(--fs-body-sm); color: var(--fg-secondary); }

.hire-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
}
.hire-row__status {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 5px 10px; border-radius: 999px;
  font-size: var(--fs-caption); font-weight: 800;
}
.st-draft { background: var(--gray-100); color: var(--fg-secondary); }
.st-submitted { background: #fdeccd; color: #8a5a08; }
.st-received { background: var(--blue-50); color: var(--blue-700); }
.st-matched { background: #d9f2e3; color: #1d6b43; }
.st-closed { background: var(--gray-100); color: var(--gray-400); }
.hire-row__main {
  flex: 1; min-width: 0; text-align: left; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; padding: 0;
}
.hire-row__main .nm { font-size: var(--fs-body); font-weight: 800; color: var(--fg-primary); letter-spacing: -0.01em; }
.hire-row__main .nm .g { color: var(--fg-secondary); font-weight: 600; }
.hire-row__main .meta {
  font-size: var(--fs-caption); color: var(--fg-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hire-row__act { display: flex; gap: 7px; flex-shrink: 0; }

/* 구인신청서 폼 패널 (우측 슬라이드) */
.hire-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 560px; max-width: 100vw; background: #fff;
  box-shadow: -16px 0 48px rgba(17, 38, 68, 0.16); z-index: 101;
  display: flex; flex-direction: column;
  animation: wrSlide .26s cubic-bezier(.2,.7,.3,1);
}
.hire-panel__head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 8px; }
.hire-panel__title { display: flex; align-items: center; gap: 10px; flex: 1; }
.hire-panel__title .bd-ic { color: var(--blue-600); }
.hire-panel__title h3 { margin: 0; font-size: var(--fs-h3, 18px); font-weight: 800; color: var(--fg-primary); }
.hire-panel__sub { margin: 0 24px 14px; font-size: var(--fs-caption); color: var(--fg-secondary); line-height: 1.55; }
.hire-form { flex: 1; overflow-y: auto; padding: 0 24px 18px; display: flex; flex-direction: column; gap: 16px; }
.hire-field__lab,
.hire-cell .lab { display: block; font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); margin-bottom: 6px; }
.hire-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hire-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-body);
}
.hire-chip .box { color: var(--gray-300); font-size: 13px; }
.hire-chip.on { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-800); font-weight: 700; }
.hire-chip.on .box { color: var(--blue-600); }
.hire-chip:disabled { cursor: default; opacity: .85; }
.hire-chip-etc {
  min-width: 130px; padding: 7px 12px; border: 1px dashed var(--gray-300);
  border-radius: 999px; font-size: var(--fs-body-sm);
}
.hire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hire-cell { display: block; }
.hire-cell.full { grid-column: 1 / -1; }
.hire-cell input, .hire-cell textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  font-size: var(--fs-body-sm); font-family: inherit; color: var(--fg-primary); resize: vertical;
}
.hire-cell input:focus, .hire-cell textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-50); }
.hire-cell input:disabled, .hire-cell textarea:disabled { background: var(--gray-50); color: var(--fg-body); }
.hire-pair { display: flex; align-items: center; gap: 8px; }
.hire-pair input { width: 100%; }
.hire-pair .sep { color: var(--gray-400); }
.hire-panel__foot .btn { white-space: nowrap; }
.hire-panel__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px; border-top: 1px solid var(--border); background: var(--gray-50);
}

/* 로스터 — 학교별 새 신청 표시 */
.hire-tag {
  margin-left: 8px; display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  background: #fdeccd; color: #8a5a08; font-size: var(--fs-caption); font-weight: 800;
}

/* 통합 대시보드 — 구인 신청 현황 집계 */
.adm-hire { margin-bottom: 18px; }
.adm-hire__summary { display: flex; gap: 12px; padding: 14px 18px 4px; flex-wrap: wrap; }
.adm-hire__stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; border-radius: 12px; min-width: 124px; }
.adm-hire__stat b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.adm-hire__stat span { font-size: var(--fs-caption); font-weight: 700; opacity: .9; }
.adm-hire__list { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 18px; max-height: 380px; overflow-y: auto; }
.adm-hire__list .hire-row { padding: 11px 14px; }

/* ============================ ROSTER 행 확장 — 인력 칩 ============================ */
.school-row__toggle {
  position: relative; margin: -34px 0 0 auto; right: 56px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border: none; background: var(--gray-50); color: var(--fg-secondary);
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: background .13s, color .13s;
  float: right;
}
.school-row__toggle i { width: 13px; height: 13px; }
.school-row__toggle:hover { background: var(--blue-50); color: var(--blue-700); }
.school-row__toggle.on { background: var(--blue-500); color: #fff; }
.school-row__workers {
  background: var(--blue-50);
  border-top: 1px dashed var(--blue-200);
  padding: 10px 18px 12px;
  display: flex; flex-direction: column; gap: 7px;
  animation: rosterDown .18s ease-out;
}
@keyframes rosterDown {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.school-row__workers-lab {
  font-size: var(--fs-overline); font-weight: 800;
  color: var(--blue-700); letter-spacing: 0.03em;
}
.school-row__workers-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.school-row__wchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  background: #fff;
  border: 1px solid var(--blue-200);
  border-radius: var(--r-pill);
  font-family: inherit; font-size: var(--fs-body-sm); font-weight: 700;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background .13s, border-color .13s, box-shadow .13s, transform .13s;
}
.school-row__wchip:hover {
  background: var(--blue-500); color: #fff;
  border-color: var(--blue-500);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.school-row__wchip .no { color: var(--blue-600); font-weight: 800; }
.school-row__wchip:hover .no { color: rgba(255,255,255,0.85); }
.school-row__wchip .role {
  font-size: var(--fs-caption); font-weight: 600;
  color: var(--fg-secondary);
  background: var(--gray-100);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.school-row__wchip:hover .role { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); }
.school-row.expanded { background: var(--blue-50) !important; }
.field .inp .inp__eye:hover { color: var(--blue-600); background: var(--blue-50); }
.field .inp .inp__eye svg { width: 18px; height: 18px; }
.field .inp select { border: none; outline: none; flex: 1; font-size: 15px; color: var(--fg-primary); background: transparent; }
.login__submit { width: 100%; margin-top: var(--sp-2); padding: 13px; font-size: var(--fs-body); }
.login__hint { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--fg-secondary); text-align: center; line-height: 1.6; }
.login__hint b { color: var(--fg-body); }

/* 학교 검색 (NEIS) 자동완성 */
.field__ok { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-caption); font-weight: 700; color: var(--safe-strong); }
.field__ok i { width: 15px; height: 15px; }
.school-search { position: relative; }
.school-search .inp input { border: none; outline: none; flex: 1; font-size: 15px; color: var(--fg-primary); background: transparent; min-width: 0; }
.school-search__clear { border: none; background: none; padding: 2px; display: grid; place-items: center; color: var(--gray-400); cursor: pointer; }
.school-search__clear i { width: 16px; height: 16px; }
.school-search__clear:hover { color: var(--fg-body); }
.spin { animation: ssspin .8s linear infinite; color: var(--blue-500); }
.ss-spin { width: 16px; height: 16px; flex-shrink: 0; border: 2px solid var(--blue-200); border-top-color: var(--blue-500); border-radius: 50%; animation: ssspin .7s linear infinite; }
@keyframes ssspin { to { transform: rotate(360deg); } }
.school-search__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); max-height: 280px; overflow: auto; z-index: 20; padding: 5px; }
.school-search__src { display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px; font-size: var(--fs-overline); font-weight: 700; color: var(--fg-secondary); letter-spacing: 0.01em; }
.school-search__src i { width: 13px; height: 13px; color: var(--blue-500); }
.school-search__empty { padding: 14px 12px; font-size: var(--fs-body-sm); color: var(--fg-secondary); }
.ss-opt { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: none; background: none; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; }
.ss-opt:hover { background: var(--blue-50); }
.ss-opt__name { font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-primary); display: flex; align-items: center; gap: 8px; }
.ss-opt__kind { font-size: 11px; font-weight: 700; color: var(--blue-700); background: var(--blue-50); padding: 1px 7px; border-radius: var(--r-pill); }
.ss-opt:hover .ss-opt__kind { background: var(--blue-100); }
.ss-opt__meta { font-size: var(--fs-caption); color: var(--fg-secondary); }

/* ============================ LOGIN DRAWER (오른쪽 슬라이드) ============================ */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(17,38,68,0.40);
  opacity: 0; visibility: hidden;
}
.drawer-scrim.show { opacity: 1; visibility: visible; }

.login-drawer {
  position: fixed; top: 0; right: 0; z-index: 90;
  width: 440px; max-width: 92vw; height: 100vh;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  overflow-y: auto;
}
.login-drawer.animating { transition: transform .24s cubic-bezier(.2,.7,.3,1); }
.login-drawer.open { transform: translateX(0); }

.login-drawer__head {
  position: relative; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-6) var(--sp-8);
  background: linear-gradient(150deg, var(--blue-600), var(--navy-900));
  color: #fff;
}
.login-drawer__brand { display: flex; align-items: center; gap: 11px; }
.login-drawer__brand .shield { width: 36px; }
.login-drawer__brand .wm { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.login-drawer__brand .wm b { color: #fff; }
.login-drawer__brand .wm span { color: var(--blue-200); }
.login-drawer__close {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: none; background: rgba(255,255,255,0.14); color: #fff;
  display: grid; place-items: center; transition: background .14s;
}
.login-drawer__close:hover { background: rgba(255,255,255,0.26); }
.login-drawer__close i { width: 19px; height: 19px; }

.login-drawer__body { padding: var(--sp-8); }
.login-drawer__body h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.015em; color: var(--fg-primary); margin: 0 0 6px; }
.login-drawer__body .lead { font-size: var(--fs-body-sm); color: var(--fg-secondary); margin: 0 0 var(--sp-6); }

/* 월 갱신 안내 배너 (자동 로그아웃 후) */
.login-notice {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--caution-bg); border: 1px solid var(--caution);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: var(--sp-5);
  font-size: var(--fs-body-sm); color: #8a5a08; line-height: 1.5;
}
.login-notice b { color: var(--caution-strong); display: block; margin-bottom: 2px; }
.login-notice__ic { flex-shrink: 0; color: var(--caution-strong); }
.login-notice__ic svg { width: 19px; height: 19px; display: block; }
.login-notice__x { margin-left: auto; flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--caution-strong); padding: 2px; opacity: 0.7; }
.login-notice__x:hover { opacity: 1; }
.login-notice__x i { width: 15px; height: 15px; }

/* 비밀번호 필드 보조 */
.field__tag { font-size: 11px; font-weight: 700; color: var(--blue-700); background: var(--blue-50); padding: 2px 8px; border-radius: var(--r-pill); margin-left: 6px; }
.inp.err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.field__err { margin-top: 6px; font-size: var(--fs-caption); color: var(--danger-strong); line-height: 1.45; }

/* 이번 달 비밀번호 안내 모달 — 화면 중앙 창 */
.pw-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--sp-5); }
.pw-modal__scrim { position: absolute; inset: 0; background: rgba(17,38,68,0.40); backdrop-filter: blur(2px); }
.pw-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 400px;
  background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  padding: var(--sp-8) var(--sp-6) var(--sp-6); text-align: center;
}
.pw-modal__ic {
  width: 52px; height: 52px; margin: 0 auto var(--sp-4); border-radius: 50%;
  display: grid; place-items: center; background: var(--blue-50); color: var(--blue-600);
}
.pw-modal__ic svg { width: 26px; height: 26px; }
.pw-modal__card h3 { font-size: var(--fs-h3); font-weight: 800; color: var(--fg-primary); margin: 0 0 var(--sp-4); letter-spacing: -0.01em; }
.pw-modal__msg { font-size: var(--fs-body); color: var(--fg-body); margin: 2px 0; }
.pw-modal__msg b { color: var(--blue-700); font-weight: 800; }
.pw-modal__pw {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: var(--sp-3) 0; padding: 12px var(--sp-4);
  background: var(--bg-sunken); border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
}
.pw-modal__pw code { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: 0.06em; color: var(--fg-primary); }
.pw-modal__copy { background: none; border: none; cursor: pointer; color: var(--fg-secondary); padding: 4px; border-radius: var(--r-xs); transition: color .14s, background .14s; }
.pw-modal__copy:hover { color: var(--blue-600); background: var(--blue-50); }
.pw-modal__copy i { width: 17px; height: 17px; display: block; }
.pw-modal__sub { font-size: var(--fs-caption); color: var(--fg-secondary); margin: var(--sp-3) 0 var(--sp-5); line-height: 1.5; }
.pw-modal__actions { display: flex; gap: 8px; }
.pw-modal__actions .btn { flex: 1; justify-content: center; }

/* 미저장 변경 확인 창 */
.confirm-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--sp-5); }
.confirm-modal__scrim { position: absolute; inset: 0; background: rgba(17,38,68,0.40); backdrop-filter: blur(2px); }
.confirm-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 400px;
  background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  padding: var(--sp-8) var(--sp-6) var(--sp-6); text-align: center;
}
.confirm-modal__ic {
  width: 52px; height: 52px; margin: 0 auto var(--sp-4); border-radius: 50%;
  display: grid; place-items: center; background: var(--caution-bg); color: var(--caution-strong);
}
.confirm-modal__ic svg { width: 26px; height: 26px; }
.confirm-modal__card h3 { font-size: var(--fs-h3); font-weight: 800; color: var(--fg-primary); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
.confirm-modal__msg { font-size: var(--fs-body); color: var(--fg-body); line-height: 1.55; margin: 0 0 var(--sp-6); }
.confirm-modal__actions { display: flex; gap: 8px; }
.confirm-modal__actions .btn { flex: 1; justify-content: center; }
.btn-danger-ghost { background: var(--white); border: 1px solid var(--danger); color: var(--danger-strong); }
.btn-danger-ghost:hover { background: var(--danger-bg); }

/* ============================ MAIN HUB ============================ */
.page { flex: 1; }
.hub { position: relative; padding: var(--sp-4) var(--sp-6) var(--sp-8); display: flex; flex-direction: column; align-items: center; }
.hub__head { text-align: center; margin-bottom: var(--sp-10); }
.hub__head .ss-overline { color: var(--blue-600); }
.hub__head h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; color: var(--fg-primary); margin: 10px 0 6px; }
.hub__head p { font-size: var(--fs-body); color: var(--fg-secondary); margin: 0; }

/* radial layout */
.radial { position: relative; width: 100%; max-width: 1120px; aspect-ratio: 1 / 1.22; margin: -120px auto var(--sp-8); container-type: inline-size; }
@media (max-width: 760px) { .radial { margin-top: 0; } }
.radial__spokes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.radial__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  /* \ud3ed\uc774 \uc881\uc544\uc9c0\uba74 26%\ub85c \uc904\uc5b4\ub4e4\ub418, \uc548\uc758 \uae00\uc528\uac00 \uce68\ud574\ub418\uc9c0 \uc54a\ub294 \ucd5c\uc18c \ud06c\uae30(96px)\uc5d0\uc11c \uba48\ucd98\ub2e4 */
  width: clamp(96px, 26%, 291px); aspect-ratio: 1; border-radius: 50%; padding: 4.5%;
  background: radial-gradient(circle at 50% 35%, var(--blue-500), var(--blue-700));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; box-shadow: 0 18px 44px rgba(30,79,196,0.4), inset 0 2px 0 rgba(255,255,255,0.2);
  z-index: 2;
}
.radial__center .shield { width: 26%; max-width: 48px; margin-bottom: 6px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
/* 글씨 크기를 원(컨테이너) 기준으로 묶어, 폭이 좁아지면 원과 함께 글씨도 같은 비율로 줄어든다 → 글씨가 원을 침해하지 않는 선까지 원이 자유롭게 작아진다 */
.radial__center .ttl { font-size: clamp(13px, 2.05cqw, 23px); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.radial__center .tag { font-size: clamp(8px, 1.07cqw, 12px); color: var(--blue-100); margin-top: 4px; font-weight: 500; line-height: 1.3; }

/* ===== 세이프스쿨 중앙 버튼 (관리자 대시보드 진입 · 세이프스쿨 전용) ===== */
.radial__center, .hub-center-card { border: none; font-family: inherit; cursor: default; }
.radial__center.is-btn, .hub-center-card.is-btn { cursor: pointer; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s cubic-bezier(.2,.7,.3,1); }
.radial__center.is-btn:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 24px 56px rgba(30,79,196,0.5), inset 0 2px 0 rgba(255,255,255,0.25); }
.radial__center.is-btn:active { transform: translate(-50%, -50%) scale(0.99); }
.hub-center-card.is-btn:hover { transform: translateY(-4px); }
.hub-center-card.is-btn:active { transform: translateY(-1px); }
.radial__center.is-locked, .hub-center-card.is-locked { cursor: pointer; }
.radial__center.is-locked:hover, .hub-center-card.is-locked:hover { box-shadow: 0 18px 44px rgba(30,79,196,0.4), inset 0 2px 0 rgba(255,255,255,0.2); }
.cc-ic { width: 1em; height: 1em; flex-shrink: 0; }
.center-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: clamp(10px, 1.16cqw, 13px); font-weight: 700; color: #fff;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.18); white-space: nowrap;
}
.is-btn:hover .center-cta { background: rgba(255,255,255,0.28); }
.center-lock {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
  font-size: clamp(9px, 0.98cqw, 11px); font-weight: 600; color: var(--blue-100);
  opacity: 0.85; white-space: nowrap;
}
.center-live {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: clamp(9px, 0.98cqw, 11px); font-weight: 600; color: #d6f5e6; white-space: nowrap;
}
.hub-center-card .center-cta { margin-top: 12px; font-size: var(--fs-body-sm); }
.hub-center-card .center-lock, .hub-center-card .center-live { margin-top: 10px; font-size: var(--fs-caption); }

/* ===== 라이브 접속 점 (펄스 링) — 기본 상태는 항상 보이는 초록 점 ===== */
.live-dot { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--safe); flex-shrink: 0; vertical-align: middle; }
.live-dot.sm { width: 8px; height: 8px; }
.live-dot.xs { width: 6px; height: 6px; }
.live-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(21,160,106,0.55); animation: ssLivePulse 1.8s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes ssLivePulse { 0% { box-shadow: 0 0 0 0 rgba(21,160,106,0.5); } 70% { box-shadow: 0 0 0 7px rgba(21,160,106,0); } 100% { box-shadow: 0 0 0 0 rgba(21,160,106,0); } }
.off-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); flex-shrink: 0; }


.area {
  position: relative; width: 100%;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: var(--sp-5) var(--sp-4);
  text-align: center; transition: all .18s cubic-bezier(.2,.7,.3,1); z-index: 3;
  box-sizing: border-box;
}
.area.is-active { cursor: pointer; }
.area.is-active:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--blue-200); }
.area.is-disabled { opacity: 0.62; }
.area__ic { width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center; margin: 0 auto 12px; }
.area__ic i { width: 26px; height: 26px; }
.area.is-active .area__ic { background: var(--blue-50); color: var(--blue-600); }
.area.is-disabled .area__ic { background: var(--gray-100); color: var(--gray-400); }
.area__ttl { font-size: var(--fs-h3); font-weight: 700; color: var(--fg-primary); letter-spacing: -0.01em; line-height: 1.25; }
.area__sub { font-size: var(--fs-body-sm); font-weight: 700; color: var(--blue-600); }
.area.is-disabled .area__sub { color: var(--gray-400); }
.area__desc { font-size: var(--fs-caption); color: var(--fg-secondary); margin-top: 8px; line-height: 1.45; min-height: 2.4em; }
.area__chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: var(--fs-caption); font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.area__chip i { width: 13px; height: 13px; }
.area__chip.go { background: var(--blue-500); color: #fff; }
.area__chip.soon { background: var(--gray-100); color: var(--gray-500); }
.area.is-active:hover .area__chip.go { background: var(--blue-600); }

/* ---- 업무영역 카드 편집 (세이프스쿨 전용) ---- */
.hub__editbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: nowrap;
  justify-content: center; margin: 0 auto var(--sp-8);
  position: relative; z-index: 30;
  padding: var(--sp-3) var(--sp-4); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); max-width: max-content;
}
.hub__editbar.is-on { border-color: var(--blue-200); background: var(--blue-50); }
.hub__editbar-hint {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary);
}
.hub__editbar-hint i { width: 17px; height: 17px; color: var(--blue-600); }
.area.is-editing { cursor: default; outline: 2px dashed var(--blue-300); outline-offset: 2px; }
.area.is-editing.is-disabled { opacity: 1; }
.area__edit { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.area__edit input, .area__edit textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-sans);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 6px 8px; background: var(--white); color: var(--fg-primary);
  text-align: center; transition: border-color .15s, box-shadow .15s;
}
.area__edit input:focus, .area__edit textarea:focus {
  outline: none; border-color: var(--blue-500); box-shadow: var(--focus-ring);
}
.area__edit-ttl { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; }
.area__edit-sub { font-size: var(--fs-body-sm); font-weight: 700; color: var(--blue-600); }
.area__edit-desc { font-size: var(--fs-caption); line-height: 1.45; resize: vertical; min-height: 2.6em; }

/* 카톡식 미확인 로그 뱃지 — 상대가 확인 안 한 변경 로그 수 */
.area__badge {
  position: absolute; top: -9px; right: -9px; z-index: 5;
  min-width: 26px; height: 26px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff;
  border: 2.5px solid var(--white); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px rgba(226,59,59,0.45);
}
.area__badge.is-empty { display: none; }

/* grid layouts (variants) */
.hub-cols { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--sp-5); width: 100%; max-width: 1080px; margin: 0 auto; align-items: start; }
.hub-col { display: flex; flex-direction: column; gap: var(--sp-5); }
.hub-stack { display: flex; flex-direction: column; gap: var(--sp-5); width: 100%; max-width: 1080px; margin: 0 auto; }
.hub-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: start; }
.hub-cols .area, .hub-stack .area { display: flex; flex-direction: column; align-items: center; }

/* ---- 카드 + 보조 박스 묶음 ---- */
.area-cell { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }

/* 방사형: 카드를 링 위에 고정하고, 보조 박스는 바깥 방향으로 띄움 (중앙 원/이웃 비가림) */
/* 폭이 좁아지면 카드도 컨테이너(원) 기준으로 같이 작아져 중앙 원을 덜 침해한다 */
.radial .area-cell { position: absolute; transform: translate(-50%, -50%); width: clamp(94px, 17cqw, 190px); z-index: 3; display: block; }
.radial .area-cell > .area { width: 100%; min-width: 0; }
/* \uce74\ub4dc \ub0b4\ubd80(\uc5ec\ubc31\u00b7\uc544\uc774\ucf58\u00b7\uae00\uc790)\ub3c4 \ud3ed\uc5d0 \ub530\ub77c \uac19\uc774 \ucd95\uc18c \u2014 \ub370\uc2a4\ud06c\ud0d1\uc740 \uadf8\ub300\ub85c, \uc881\uc544\uc9c0\uba74 \uac00\ub3c5 \ud558\ud55c\uc120\uae4c\uc9c0 \uc791\uc544\uc9d0 */
.radial .area { padding: clamp(9px, 1.8cqw, 20px) clamp(7px, 1.45cqw, 16px); }
.radial .area__ic { width: clamp(32px, 4.46cqw, 50px); height: clamp(32px, 4.46cqw, 50px); margin-bottom: clamp(5px, 1.07cqw, 12px); border-radius: clamp(7px, 1.07cqw, 12px); }
.radial .area__ic svg { width: clamp(17px, 2.3cqw, 24px); height: clamp(17px, 2.3cqw, 24px); }
.radial .area__ttl { font-size: clamp(13px, 1.79cqw, 20px); }
.radial .area__sub { font-size: clamp(11px, 1.25cqw, 14px); }
.radial .area__desc { font-size: clamp(10px, 1.16cqw, 13px); margin-top: clamp(4px, 0.7cqw, 8px); }
.radial .area__chip { font-size: clamp(10px, 1.16cqw, 13px); margin-top: clamp(6px, 1.07cqw, 12px); padding: clamp(2px, 0.36cqw, 4px) clamp(7px, 0.98cqw, 11px); }
.radial .area__chip svg { width: clamp(11px, 1.25cqw, 14px); height: clamp(11px, 1.25cqw, 14px); }
.radial .area-cell > .area-extra { position: absolute; z-index: 4; box-sizing: border-box; }
.radial .area-cell.box-top > .area-extra { left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: 100%; }
.radial .area-cell.box-bottom > .area-extra { left: 50%; top: calc(100% + 12px); transform: translateX(-50%); width: 100%; }
.radial .area-cell.box-left > .area-extra { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: 100%; }
.radial .area-cell.box-right > .area-extra { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: 100%; }
/* 방사형 보조 박스 높이를 묶어 위/아래 박스가 편집바·푸터를 침범하지 않게 함 */
.radial .area-cell.box-top > .area-extra.is-edit,
.radial .area-cell.box-bottom > .area-extra.is-edit { max-height: 176px; overflow-y: auto; }

/* ---- 유지보수 메뉴판 — 가운데 원 아이콘 / 신청서 사진 / 뒤로 ---- */
.maint-center__ic { width: clamp(26px, 4.6cqw, 46px); height: clamp(26px, 4.6cqw, 46px); display: grid; place-items: center; margin-bottom: 6px; }
.maint-center__ic svg { width: 100%; height: 100%; color: #fff; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.maint-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto var(--sp-4); padding: 6px 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary); cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.maint-back:hover { color: var(--fg-primary); border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.maint-back svg { width: 15px; height: 15px; transform: scaleX(-1); }
.maint-photo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maint-photo__thumb { position: relative; width: 96px; height: 72px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.maint-photo__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maint-photo__rm {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: rgba(17,24,39,0.7); color: #fff; cursor: pointer;
}
.maint-photo__add {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  background: var(--gray-50); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary); cursor: pointer;
}
.maint-photo__add:hover { border-color: var(--blue-300); color: var(--blue-600); background: var(--bg-brand-soft); }

/* ===== 유지보수 — 헤더 링크 · 세부 메뉴 표 · 견적 현황 ===== */
.maint-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.maint-req-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  background: var(--bg-brand-soft); border: 1px solid var(--blue-100); border-radius: var(--r-pill);
  font: inherit; font-size: var(--fs-body-sm); font-weight: 700; color: var(--blue-700); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.maint-req-link:hover { background: var(--blue-50); border-color: var(--blue-300); }
.maint-req-link i { width: 16px; height: 16px; }
.maint-req-link__n { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--blue-600); color: #fff; font-size: 11px; font-weight: 800; }

/* 세부 선택 메뉴 */
.maint-sub { max-width: 1080px; }
.maint-sub__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-5); }
.maint-sub__title { display: flex; align-items: flex-start; gap: 16px; margin-bottom: var(--sp-5); }
.maint-sub__ic { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--bg-brand-soft); color: var(--blue-600); }
.maint-sub__ic i { width: 28px; height: 28px; }
.maint-sub__title h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; color: var(--fg-primary); margin: 6px 0 4px; }
.maint-sub__title p { margin: 0; font-size: var(--fs-body); color: var(--fg-secondary); }
.maint-note { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-brand-soft); border: 1px solid var(--blue-100); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: var(--sp-5); font-size: var(--fs-body-sm); color: var(--fg-body); line-height: 1.5; }
.maint-note i { width: 18px; height: 18px; color: var(--blue-600); flex-shrink: 0; margin-top: 1px; }

.maint-table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.maint-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.maint-table thead th { background: var(--gray-50); text-align: left; font-size: var(--fs-caption); font-weight: 800; color: var(--fg-secondary); padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.maint-table th.c-act, .maint-table td.c-act { text-align: center; }
.maint-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.maint-table tr.grp-start td { border-top: 2px solid var(--border-strong); }
.maint-table tbody tr:last-child td { border-bottom: none; }
.maint-table td.c-grp { font-weight: 800; color: var(--blue-700); background: var(--bg-brand-soft); white-space: nowrap; width: 92px; border-right: 1px solid var(--border); vertical-align: middle; }
.maint-rname { display: block; font-size: var(--fs-body); color: var(--fg-primary); margin-bottom: 3px; }
.maint-rdesc { display: block; color: var(--fg-secondary); line-height: 1.5; }
.maint-table td.c-range { color: var(--fg-body); white-space: nowrap; }
.maint-costtags { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.maint-costtag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--fg-secondary); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.maint-dash { color: var(--gray-400); }
.maint-table td.c-cost { width: 1%; }
.maint-quote-btn { white-space: nowrap; }

/* 세부 메뉴 편집 (세이프스쿨) */
.maint-edited { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--bg-brand-soft); color: var(--blue-700); font-size: var(--fs-caption); font-weight: 700; vertical-align: middle; }
.maint-edited i { width: 12px; height: 12px; }
.maint-edit { display: flex; flex-direction: column; gap: var(--sp-4); }
.maint-edit__intro { display: flex; flex-direction: column; gap: 6px; }
.maint-edit__lab { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); }
.maint-edit__intro textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font: inherit; font-size: var(--fs-body-sm); resize: vertical; }
.maint-egroup { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); padding: var(--sp-4); }
.maint-egroup__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.maint-egroup__tag { flex-shrink: 0; font-size: var(--fs-caption); font-weight: 800; color: var(--blue-700); background: var(--bg-brand-soft); padding: 4px 10px; border-radius: var(--r-pill); }
.maint-egroup__name { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-body); font-weight: 700; }
.maint-edel { flex-shrink: 0; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--danger, #e23b3b); cursor: pointer; }
.maint-edel:hover { background: var(--danger-bg, #fce8e8); border-color: var(--danger, #e23b3b); }
.maint-edel.sm { width: 30px; height: 30px; }
.maint-edel i { width: 16px; height: 16px; }
.maint-erow { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--gray-50); padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.maint-erow__top { display: flex; gap: 8px; align-items: center; }
.maint-erow__name { flex: 1; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-body-sm); font-weight: 700; background: #fff; }
.maint-erow__desc { padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-body-sm); resize: vertical; background: #fff; }
.maint-erow__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.maint-erow__grid input { padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-body-sm); background: #fff; }
.maint-eadd { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: #fff; color: var(--blue-600); font: inherit; font-size: var(--fs-body-sm); font-weight: 600; cursor: pointer; }
.maint-eadd:hover { border-color: var(--blue-400); background: var(--bg-brand-soft); }
.maint-eadd i { width: 15px; height: 15px; }
.maint-eaddgroup { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border: 1.5px dashed var(--blue-300); border-radius: var(--r-lg); background: var(--bg-brand-soft); color: var(--blue-700); font: inherit; font-size: var(--fs-body-sm); font-weight: 700; cursor: pointer; }
.maint-eaddgroup:hover { background: var(--blue-50); border-color: var(--blue-400); }
.maint-eaddgroup i { width: 16px; height: 16px; }

/* 견적 의뢰서 — 선택 작업 요약 박스 */
.maint-pickbox { background: var(--bg-brand-soft); border: 1px solid var(--blue-100); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.maint-pickbox__row { display: flex; gap: 10px; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-body); }
.maint-pickbox__k { flex-shrink: 0; width: 64px; font-weight: 700; color: var(--fg-secondary); }
.maint-pickbox__img { width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--r-sm); margin-top: 2px; }
.maint-multi { font-weight: 600; color: var(--fg-tertiary, var(--gray-400)); font-size: var(--fs-caption); }

/* 견적 현황 / 접수함 */
.maint-statline { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.maint-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-body-sm); font-weight: 600; border: 1px solid var(--border); background: var(--white); color: var(--fg-secondary); }
.maint-stat b { font-size: var(--fs-h3); font-weight: 800; }
.maint-stat.st-submitted b { color: var(--blue-600); }
.maint-stat.st-received b { color: var(--blue-700); }
.maint-stat.st-quoted b { color: #b46a00; }
.maint-stat.st-accepted b { color: var(--safe, #15a06a); }

.maint-reqlist { display: flex; flex-direction: column; gap: 10px; }
.maint-reqrow { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); }
.maint-reqrow__status { flex-shrink: 0; align-self: stretch; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 800; white-space: nowrap; }
.maint-reqrow__status.st-submitted { background: var(--blue-50); color: var(--blue-700); }
.maint-reqrow__status.st-received { background: #e3ecfb; color: var(--blue-700); }
.ft-noboard { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--fg-secondary); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.maint-reqrow__status.st-quoted { background: #fff3df; color: #b46a00; }
.maint-reqrow__status.st-accepted { background: #e3f6ec; color: var(--safe, #15a06a); }
.maint-reqrow__main { flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px; padding: 0; }
.maint-reqrow__main .nm { font-size: var(--fs-body); color: var(--fg-primary); }
.maint-reqrow__main .meta { font-size: var(--fs-caption); color: var(--fg-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maint-reqrow__main:hover .nm { color: var(--blue-700); }
.maint-reqrow__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.maint-reqrow__amt { font-size: var(--fs-h3); font-weight: 800; color: var(--fg-primary); white-space: nowrap; }
.maint-reqrow__act { display: flex; align-items: center; gap: 8px; }
.maint-reqrow__act .btn { white-space: nowrap; }
.maint-reqrow__done { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-body-sm); font-weight: 700; color: var(--safe, #15a06a); white-space: nowrap; }

/* 견적서 버튼 (소프트) */
.btn-soft { background: var(--blue-50); color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-200); }
.btn-soft:hover { background: var(--blue-100); }

/* ===== 견적서 (자동 저장 문서 · PDF 다운로드 준비중) ===== */
.maint-quotedoc { max-width: 560px; }
.qdoc {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px); margin: var(--sp-3) 0;
  box-shadow: var(--shadow-sm);
}
.qdoc__title {
  text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 0.3em;
  color: var(--fg-primary); padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 3px solid var(--blue-500);
}
.qdoc__meta { display: flex; justify-content: flex-end; gap: 20px; font-size: var(--fs-caption); color: var(--fg-secondary); margin-bottom: 16px; }
.qdoc__meta span { font-weight: 700; color: var(--fg-tertiary); margin-right: 6px; }
.qdoc__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.qdoc__party { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; background: var(--bg-subtle, #fafafa); }
.qdoc__plab { font-size: var(--fs-caption); font-weight: 700; color: var(--blue-600); margin-bottom: 5px; }
.qdoc__pname { font-size: var(--fs-body); font-weight: 800; color: var(--fg-primary); margin-bottom: 4px; }
.qdoc__pline { font-size: var(--fs-caption); color: var(--fg-secondary); line-height: 1.5; }
.qdoc__table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: var(--fs-body-sm); }
.qdoc__table th { background: var(--blue-50); color: var(--blue-800); font-weight: 700; padding: 9px 12px; text-align: left; border: 1px solid var(--blue-200); }
.qdoc__table td { padding: 11px 12px; border: 1px solid var(--border); color: var(--fg-body); }
.qdoc__table .amt { text-align: right; white-space: nowrap; font-weight: 700; }
.qdoc__totals { margin-left: auto; width: 60%; min-width: 220px; margin-bottom: 18px; }
.qdoc__totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; font-size: var(--fs-body-sm); border-bottom: 1px dashed var(--border); white-space: nowrap; }
.qdoc__totals span { color: var(--fg-secondary); }
.qdoc__totals b { color: var(--fg-primary); }
.qdoc__grand { border-bottom: none !important; border-top: 2px solid var(--blue-500); margin-top: 2px; padding-top: 10px !important; }
.qdoc__grand span { font-weight: 800; color: var(--fg-primary); }
.qdoc__grand b { font-size: var(--fs-h3); color: var(--blue-600); }
.qdoc__note { background: var(--blue-50); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 18px; }
.qdoc__nlab { font-size: var(--fs-caption); font-weight: 700; color: var(--blue-700); margin-bottom: 5px; }
.qdoc__note p { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg-body); white-space: pre-wrap; }
.qdoc__stamp { text-align: center; font-size: var(--fs-body-sm); line-height: 1.9; color: var(--fg-secondary); padding-top: 8px; }
.qdoc__stamp b { font-size: var(--fs-body); color: var(--fg-primary); }
.qdoc__seal { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 4px; border: 1.5px solid var(--danger, #d24); border-radius: 50%; color: var(--danger, #d24); font-size: 12px; font-weight: 700; vertical-align: middle; transform: translateY(-2px); }
.qdoc__foot { align-items: center; }
.qdoc__soon { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; font-size: var(--fs-caption); font-weight: 700; color: var(--caution-strong, #b8791a); }
.qdoc__soon svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
  .maint-reqrow { flex-wrap: wrap; }
  .maint-table td.c-range, .maint-table th.c-range { display: none; }
}

/* ===== 유지보수 서비스 상황판 v1 ===== */
.maint-board { max-width: 1180px; }
.mb-head-tags { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.status-chip.mb-amt { background: var(--bg-brand-soft); color: var(--blue-700); font-weight: 800; }
.status-chip.mb-stage { background: #e3f6ec; color: var(--safe, #15a06a); }

/* 정보 셀 — 특이사항 강조 */
.maint-board .info-cell.full .val { color: var(--fg-body); }

/* 요청 사항 */
.rq-list { display: flex; flex-direction: column; }
.rq-row { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--border); }
.rq-row:last-child { border-bottom: none; }
.rq-row.is-sent { background: var(--blue-50); }
.rq-row.is-acked .rq-row__lab { color: var(--fg-secondary); }
.rq-row__lab { font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-primary); white-space: nowrap; }
.rq-row__input { min-width: 0; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--r-sm, 8px); font: inherit; font-size: var(--fs-body-sm); }
.rq-row__input:focus { outline: none; border-color: var(--blue-400); }
.rq-row__val { min-width: 0; font-size: var(--fs-body-sm); color: var(--fg-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-row__val.empty { color: var(--gray-400); }
.rq-row__st { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; }
.rq-row__st.ok { color: var(--safe-strong, #15a06a); }
.rq-row__st.wait { color: var(--blue-600); }
.rq-row__st.idle { color: var(--gray-400); }
.rq-row__btn { white-space: nowrap; padding: 6px 12px; }
.rq-hint { margin: 10px 8px 2px; font-size: var(--fs-caption); color: var(--fg-secondary); }
@media (max-width: 700px) { .rq-row { grid-template-columns: 80px 1fr; } .rq-row__st { grid-column: 1; } .rq-row__btn { grid-column: 2; justify-self: end; } }
.mb-reqchips { display: flex; flex-wrap: wrap; gap: 7px; }
.mb-reqchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-body); }
.mb-reqchip .box { color: var(--gray-300); font-size: 13px; }
.mb-reqchip.on { border-color: var(--blue-400); background: var(--bg-brand-soft); color: var(--blue-700); }
.mb-reqchip.on .box { color: var(--blue-600); }
.mb-reqchip.readonly { cursor: default; }
.mb-reqnote { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mb-reqnote__lab { flex-shrink: 0; width: 72px; font-size: var(--fs-caption); font-weight: 700; color: var(--blue-700); }
.mb-reqnote input { flex: 1; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-body-sm); }
.mb-reqnote__val { flex: 1; font-size: var(--fs-body-sm); color: var(--fg-body); }
.mb-reqnote__val.empty { color: var(--gray-400); font-style: italic; }
.mb-reqempty { margin: 12px 0 0; font-size: var(--fs-body-sm); color: var(--fg-secondary); }
.mb-reqfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.mb-reqstatus { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); }
.mb-reqstatus.idle { background: var(--gray-100); color: var(--fg-secondary); }
.mb-reqstatus.wait { background: #fdf3e0; color: var(--caution-strong, #b9770a); }
.mb-reqstatus.ok { background: #e3f6ec; color: var(--safe, #15a06a); }

/* 비고 */
.mb-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.mb-notes li { font-size: var(--fs-body-sm); color: var(--fg-body); line-height: 1.5; }

/* 진행 상황 타임라인 */
.mb-timeline { list-style: none; margin: 0; padding: 0; }
.mb-tl { position: relative; padding: 0 0 18px 26px; }
.mb-tl:last-child { padding-bottom: 0; }
.mb-tl::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: -4px; width: 2px; background: var(--border); }
.mb-tl:last-child::before { display: none; }
.mb-tl__dot { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--gray-300); box-sizing: border-box; }
.mb-tl.done .mb-tl__dot { background: var(--safe, #15a06a); border-color: var(--safe, #15a06a); }
.mb-tl.school .mb-tl__dot { background: var(--blue-500, #2f6fed); border-color: var(--blue-500, #2f6fed); }
.mb-tl__srctag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.mb-progaddbtn { margin-left: auto; }
.mb-progform { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 12px; border: 1px dashed var(--blue-300, #9dbdf5); border-radius: 10px; background: var(--blue-50); }
.mb-progform input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: var(--fs-body-sm); background: #fff; }
.mb-progform input:focus { outline: none; border-color: var(--blue-400); }
.mb-progform__foot { display: flex; justify-content: flex-end; }
.mb-chatempty, .mb-progempty { padding: 14px 4px; font-size: var(--fs-body-sm); color: var(--gray-400); text-align: center; }
.mb-chatempty { padding: 22px 16px; }
.mb-progform--reply { margin: 8px 0 4px; }
.mb-tl__actbtn { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 10px; border: 1px solid var(--blue-300, #9dbdf5); border-radius: 999px; background: #fff; color: var(--blue-700); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.mb-tl__actbtn:hover { background: var(--blue-50); }
.mb-tl__waittag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--caution-bg, #fef3c7); color: var(--caution-strong, #92400e); font-size: 11px; font-weight: 700; }
.mb-tl__reply { display: flex; gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--safe-bg, #e9f7f0); border: 1px solid var(--safe-soft, #bfe6d2); }
.mb-tl__replytag { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--safe, #15a06a); font-size: 11.5px; font-weight: 800; padding-top: 1px; }
.mb-tl__replytext { font-size: var(--fs-body-sm); color: var(--gray-800); line-height: 1.5; }
.mb-tl__replymeta { margin-top: 2px; font-size: 11.5px; color: var(--gray-500); }
.mb-tl.done::before { background: var(--safe-soft, #bfe6d2); }
.mb-tl__top { display: block; line-height: 1.4; }
.mb-tl__step { font-size: var(--fs-body); font-weight: 700; color: var(--fg-primary); }
.mb-tl__at { font-size: var(--fs-caption); color: var(--fg-secondary); font-variant-numeric: tabular-nums; margin-left: 8px; white-space: nowrap; }
.mb-tl__by { display: block; margin-top: 4px; font-size: var(--fs-caption); color: var(--blue-700); }
.mb-tl__by .bd-ic { color: var(--blue-500); }

/* 관련 문서 표 */
.mb-doctable { width: 100%; }
.mb-doctable th.c-no, .mb-doctable td.c-no { width: 36px; text-align: center; color: var(--fg-secondary); }
.mb-doctable th.c-dl, .mb-doctable td.c-dl { width: 48px; text-align: center; }
.mb-docname { font-weight: 600; color: var(--fg-primary); }
.mb-docowner { color: var(--fg-secondary); white-space: nowrap; }
.mb-star { color: var(--caution-strong, #d99a05); }
.mb-docbtn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; color: var(--fg-secondary); cursor: pointer; }
.mb-docbtn:hover { border-color: var(--blue-300); color: var(--blue-600); }
.mb-docbtn:disabled { opacity: .4; cursor: not-allowed; }
.mb-docbtn.recv.on { background: #e3f6ec; border-color: var(--safe, #15a06a); color: var(--safe, #15a06a); }
.mb-docbtn.up.on { background: #e3f6ec; border-color: var(--safe, #15a06a); color: var(--safe, #15a06a); }
.mb-docbtn.up:not(.on) { border-color: var(--blue-300); color: var(--blue-600); }
.mb-docwait { display: inline-block; font-size: 11px; font-weight: 700; color: var(--gray-400); padding: 4px 7px; border: 1px dashed var(--gray-300); border-radius: var(--r-sm); }
.mb-doctable tr.is-pending .mb-docname { color: var(--fg-secondary); }
.mb-recvtag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 10px; font-weight: 800; color: var(--safe, #15a06a); background: #e3f6ec; padding: 1px 6px; border-radius: var(--r-pill); vertical-align: middle; }
.mb-uptag { display: inline-flex; align-items: center; margin-left: 8px; font-size: 10px; font-weight: 800; color: var(--caution-strong, #b9770a); background: #fdf3e0; padding: 1px 6px; border-radius: var(--r-pill); vertical-align: middle; }
.mb-docnote { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-caption); color: var(--fg-secondary); }

/* 대화창 */
.mb-chatcard .card__body { display: flex; flex-direction: column; }
.mb-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--sp-4); max-height: 340px; overflow-y: auto; background: var(--gray-50); }
.mb-msg { display: flex; flex-direction: column; max-width: 78%; }
.mb-msg.school, .mb-msg.other { align-self: flex-start; align-items: flex-start; }
.mb-msg.safe, .mb-msg.mine { align-self: flex-end; align-items: flex-end; }
.mb-msg__bubble { padding: 9px 13px; border-radius: 14px; font-size: var(--fs-body-sm); line-height: 1.5; }
.mb-msg.school .mb-msg__bubble, .mb-msg.other .mb-msg__bubble { background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--fg-body); }
.mb-msg.safe .mb-msg__bubble, .mb-msg.mine .mb-msg__bubble { background: var(--blue-600); color: #fff; border-bottom-right-radius: 4px; }
.mb-msg__meta { font-size: 11px; color: var(--fg-tertiary, var(--gray-400)); margin-top: 4px; }
.mb-chatbar { display: flex; gap: 8px; padding: var(--sp-3); border-top: 1px solid var(--border); background: #fff; }
.mb-chatbar input { flex: 1; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--r-pill); font: inherit; font-size: var(--fs-body-sm); }
.mb-chatbar input:focus { outline: none; border-color: var(--blue-400); }
.mb-chatphoto { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--fg-tertiary, var(--gray-400)); cursor: pointer; }
.mb-chatphoto:hover { border-color: var(--blue-400); color: var(--blue-600); }
.mb-msg .mb-chatimg { display: block; max-width: 210px; max-height: 170px; border-radius: 12px; border: 1px solid var(--border); cursor: zoom-in; }
.mb-chatlink { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.mb-chatlink:hover { opacity: .82; color: inherit; }
.mb-imgview { position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, .72); display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; }
.mb-imgview img { max-width: min(920px, 92vw); max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
/* 관련 업무 페이지 — PC: 대화창을 미리 늘리지 않고, 입력창이 브라우저 하단에 붙도록 sticky */
@media (min-width: 1024px) {
  .detail-grid .dcol--live { display: flex; flex-direction: column; align-self: stretch; }
  .detail-grid .dcol--live .mb-chatcard { flex: 1; display: flex; flex-direction: column; }
  .detail-grid .dcol--live .mb-chatcard .card__body { flex: 1; }
  .detail-grid .dcol--live .mb-chatcard .mb-chat { max-height: none; }
  .detail-grid .dcol--live .mb-chatbar { margin-top: auto; position: sticky; bottom: 0; z-index: 5; }
}

/* ===== 학교별 서비스 현황판 (대시보드) ===== */
.msd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: var(--sp-5); }
.msd-kpi { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; }
.msd-kpi.is-clickable { cursor: pointer; transition: box-shadow .14s, border-color .14s, transform .1s; }
.msd-kpi.is-clickable:hover { box-shadow: var(--shadow-md, 0 6px 18px rgba(17,38,68,.08)); border-color: var(--blue-300); }
.msd-kpi.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 2px var(--ring); }
.msd-kpi__lab { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); }
.msd-kpi__lab .bd-ic { color: var(--blue-600); }
.msd-kpi__val { font-size: 30px; font-weight: 800; color: var(--fg-primary); letter-spacing: -0.02em; }
.msd-kpi__val small { font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-secondary); margin-left: 3px; }
.msd-kpi.blue { border-top: 3px solid var(--blue-500); }
.msd-kpi.amber { border-top: 3px solid #e0921a; }
.msd-kpi.green { border-top: 3px solid var(--safe, #15a06a); }
.msd-kpi.amt { border-top: 3px solid var(--fg-primary); background: var(--bg-brand-soft); }
.msd-kpi.amt .msd-kpi__val { font-size: 24px; }

.msd-table { width: 100%; }
.msd-table thead th { white-space: nowrap; }

/* 필터 바 */
.msd-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.msd-fgroup { display: flex; align-items: center; gap: 8px; }
.msd-flabel { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); white-space: nowrap; }
.msd-select { padding: 8px 32px 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 9px center; font: inherit; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-primary); cursor: pointer; -webkit-appearance: none; appearance: none; }
.msd-select:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--ring); }
.msd-fspacer { flex: 1; }
.msd-count { font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-secondary); white-space: nowrap; }
.msd-freset { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--white); font: inherit; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary); cursor: pointer; }
.msd-freset:hover { border-color: var(--blue-300); color: var(--blue-600); }
.msd-table th.c-no, .msd-table td.c-no { width: 42px; text-align: center; color: var(--fg-secondary); }
.msd-row { cursor: pointer; transition: background .12s; }
.msd-row:hover { background: var(--bg-brand-soft); }
.msd-row td { vertical-align: middle; }
.msd-name b { font-size: var(--fs-body); color: var(--fg-primary); }
.msd-cardname { color: var(--fg-secondary); font-size: var(--fs-caption); }
.msd-tag { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--blue-50); color: var(--blue-700); font-size: 11px; font-weight: 800; vertical-align: middle; }
.msd-c-date, .msd-c-crew { white-space: nowrap; color: var(--fg-body); }
.msd-c-crew { text-align: center; }
.msd-c-amt { white-space: nowrap; font-weight: 700; color: var(--fg-primary); text-align: right; }
.msd-c-zone { color: var(--fg-body); }
.msd-c-stat { white-space: nowrap; }
.msd-badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 800; }
.msd-badge.tone-blue { background: var(--blue-50); color: var(--blue-700); }
.msd-badge.tone-amber { background: #fff3df; color: #b46a00; }
.msd-badge.tone-violet { background: #efe9fb; color: #6d4bc4; }
.msd-badge.tone-sky { background: #e2f4fe; color: #0879ab; }
.msd-badge.tone-green { background: #e3f6ec; color: var(--safe, #15a06a); }
.msd-substat { margin-left: 7px; font-size: var(--fs-caption); color: var(--fg-secondary); }
.msd-table td.c-act { text-align: center; color: var(--fg-tertiary, var(--gray-400)); width: 40px; }
.msd-empty { text-align: center; color: var(--fg-secondary); padding: 28px 0; }
@media (max-width: 860px) {
  .msd-kpis { grid-template-columns: repeat(2, 1fr); }
  .msd-table .msd-c-zone, .msd-table .msd-c-crew { display: none; }
}

/* ---- 보조 박스 (세이프스쿨 입력 → 학교 열람) ---- */
.area-extra {
  background: var(--bg-brand-soft); border: 1px solid var(--blue-100);
  border-radius: var(--r-md); padding: var(--sp-3); text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.area-extra__img { width: 100%; border-radius: var(--r-sm); display: block; object-fit: cover; max-height: 110px; }
.area-extra__text { margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-body); white-space: pre-wrap; }
.area-extra.is-edit { background: var(--gray-50); border-style: dashed; border-color: var(--border-strong); }
.area-extra__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); }
.area-extra__label i { width: 15px; height: 15px; color: var(--blue-600); }
.area-extra__photo { position: relative; }
.area-extra__photo img { width: 100%; border-radius: var(--r-sm); display: block; max-height: 84px; object-fit: cover; }
.area-extra__rm {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: rgba(17,38,68,0.62); color: #fff; border-radius: var(--r-pill);
}
.area-extra__rm i { width: 15px; height: 15px; }
.area-extra__rm:hover { background: rgba(17,38,68,0.82); }
.area-extra__ta {
  width: 100%; box-sizing: border-box; font-family: var(--font-sans);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 7px 9px; background: var(--white); color: var(--fg-primary);
  font-size: var(--fs-body-sm); line-height: 1.45; resize: vertical; min-height: 2.8em;
}
.area-extra__ta:focus { outline: none; border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.area-extra__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--blue-200); background: var(--white); color: var(--blue-700);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-body-sm);
  padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s, border-color .15s;
}
.area-extra__add i { width: 16px; height: 16px; }
.area-extra__add:hover { background: var(--blue-50); border-color: var(--blue-300); }
.hub-center-card {
  background: linear-gradient(160deg, var(--blue-500), var(--blue-700)); color: #fff;
  border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-8); box-shadow: 0 16px 40px rgba(30,79,196,0.35);
}
.hub-center-card .shield { width: 60px; margin-bottom: 12px; }
.hub-center-card .ttl { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; }
.hub-center-card .tag { font-size: var(--fs-body-sm); color: var(--blue-100); margin-top: 6px; }

/* company footer */
.hub__footer { margin-top: var(--sp-12); width: 100%; max-width: 920px; border-top: 1px solid var(--border); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); justify-content: center; }
.hub__footer .fitem { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--fg-secondary); }
.hub__footer .fitem i { width: 14px; height: 14px; color: var(--gray-400); }
.hub__footer .fitem b { color: var(--fg-body); font-weight: 600; }

/* ============================ ROSTER (Ⅰ-1) ============================ */
.wrap { max-width: 1200px; width: min(1200px, 100%); margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-16); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.page-head__l { flex: 1; min-width: 0; }
.page-head__l .ss-overline { color: var(--blue-600); }
.page-head__l h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; color: var(--fg-primary); margin: 8px 0 6px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.page-head__l p { margin: 0; font-size: var(--fs-body); color: var(--fg-secondary); }
.page-head__r { display: flex; align-items: center; gap: var(--sp-3); }

.roster-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.searchbox { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 9px 13px; min-width: 240px; }
.searchbox i { width: 17px; height: 17px; color: var(--gray-400); }
.searchbox input { border: none; outline: none; font-size: var(--fs-body-sm); flex: 1; background: transparent; color: var(--fg-primary); }
.legend { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--fg-secondary); font-weight: 600; white-space: nowrap; }
.legend .sw { width: 14px; height: 14px; border-radius: 4px; }
.legend .sw.mine { background: var(--safe-bg); border: 1.5px solid var(--safe); }
.legend .sw.open { background: var(--white); border: 1.5px dashed var(--blue-400); }
.legend .sw.lock { background: var(--gray-100); border: 1px solid var(--border); }

.regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-5); }
.region-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.region-card__head { display: flex; align-items: center; gap: 10px; padding: 13px var(--sp-4); border-bottom: 1px solid var(--border); background: var(--gray-50); }
.region-card__badge { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--blue-500); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.region-card__name { font-weight: 800; font-size: var(--fs-body); color: var(--fg-primary); white-space: nowrap; }
.region-card__count { margin-left: auto; font-size: var(--fs-caption); color: var(--fg-secondary); font-weight: 600; white-space: nowrap; }
.region-card__count b { color: var(--blue-600); }
.school-row { display: flex; align-items: center; gap: 11px; padding: 11px var(--sp-4); border-bottom: 1px solid var(--gray-100); transition: background .14s; }
.school-row:last-child { border-bottom: none; }
.school-row__no { width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--gray-500); font-size: var(--fs-caption); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.school-row__city { font-size: var(--fs-caption); color: var(--fg-secondary); width: 58px; flex-shrink: 0; font-weight: 600; }
.school-row__name { flex: 1; font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-primary); }
.school-row__name input { width: 100%; border: 1.5px dashed var(--blue-300); background: var(--blue-50); border-radius: var(--r-sm); padding: 6px 9px; font-size: var(--fs-body-sm); color: var(--fg-primary); outline: none; }
.school-row__name input:focus { border-style: solid; border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.school-row__empty { color: var(--gray-400); font-weight: 500; font-style: italic; }
.school-row__go { width: 28px; height: 28px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--gray-300); display: grid; place-items: center; flex-shrink: 0; }
.school-row__go i { width: 17px; height: 17px; }
/* clickable (열람 가능) */
.school-row.clickable { cursor: pointer; }
.school-row.clickable:hover { background: var(--blue-50); }
.school-row.clickable:hover .school-row__go { color: var(--blue-600); }
/* 내 학교 */
.school-row.mine { background: var(--safe-bg); }
.school-row.mine .school-row__no { background: var(--safe); color: #fff; }
.school-row.mine:hover { background: #d6f0e3; }
.school-row.mine .school-row__go { color: var(--safe-strong); }
.school-row.mine .mine-tag { font-size: 10px; font-weight: 800; color: var(--safe-strong); background: var(--white); padding: 2px 7px; border-radius: var(--r-pill); letter-spacing: 0.02em; }
/* locked (학교 직원 — 타 학교) */
.school-row.locked { opacity: 0.5; }
.school-row.locked .school-row__go i { width: 14px; height: 14px; }

/* preview (비로그인 방문자 — 고객 학교 열람 전용, 상세는 잠김) */
.school-row.preview-row { cursor: pointer; }
.school-row.preview-row:hover { background: var(--gray-100); }
.school-row.preview-row .school-row__go { color: var(--gray-300); }
.school-row.preview-row .school-row__go i { width: 14px; height: 14px; }
.school-row.preview-row:hover .school-row__go { color: var(--blue-500); }

.roster-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-bottom: 10px; padding: 6px 12px 6px 9px; border: 1px solid var(--border); background: #fff; border-radius: var(--r-pill); font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-body); cursor: pointer; transition: all .14s; white-space: nowrap; }
.roster-back:hover { border-color: var(--blue-200); color: var(--blue-700); background: var(--blue-50); }
.roster-back i { width: 16px; height: 16px; }

/* ============================ 변경 로그 바 (버전 타임트래블) ============================ */
.verbar {
  position: sticky; top: 64px; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 9px var(--sp-6);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.verbar.past { background: var(--caution-bg); border-bottom-color: var(--caution); }

.verbar__nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.verbtn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: #fff;
  display: grid; place-items: center; color: var(--fg-secondary);
  transition: all .14s cubic-bezier(.2,.7,.3,1);
}
.verbtn:hover:not(:disabled) { border-color: var(--blue-300); color: var(--blue-600); background: var(--blue-50); }
.verbtn:active:not(:disabled) { transform: scale(.94); }
.verbtn:disabled { opacity: 0.38; cursor: default; }
.verbtn i { width: 18px; height: 18px; }
.verbar__pos { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); min-width: 38px; text-align: center; }

.verbar__log { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.verbar__ic { width: 17px; height: 17px; color: var(--gray-400); flex-shrink: 0; }
.verbar__tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 3px 9px 3px 6px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.01em; background: var(--caution); color: #fff; }
.verbar__tag.now { background: var(--safe-bg); color: var(--safe-strong); }
.verbar__tag i { width: 13px; height: 13px; }
.verbar__who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 800; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; }
.verbar__who.safe { background: var(--blue-50); color: var(--blue-700); }
.verbar__who.school { background: var(--safe-bg); color: var(--safe-strong); }
.verbar__who i { width: 14px; height: 14px; }
.verbar__who svg, .verbar__tag svg { flex-shrink: 0; }
.verbar__sum { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verbar__at { font-size: var(--fs-caption); color: var(--fg-secondary); white-space: nowrap; flex-shrink: 0; }

.verbar__right { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.verbar__dirty { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: 700; color: var(--caution-strong); white-space: nowrap; }
.verbar__dirty i { width: 14px; height: 14px; }
.btn-primary:disabled { background: var(--gray-300); box-shadow: none; cursor: default; }

.detail-instruct.past { background: var(--caution-bg); border-color: var(--caution); color: #8a5a08; }
.detail-instruct.past i { color: var(--caution-strong); }
.detail-grid.readonly { pointer-events: none; }

@media (max-width: 760px) {
  .verbar { top: 64px; padding: 8px var(--sp-4); gap: var(--sp-2); }
  .verbar__at, .verbar__ic { display: none; }
  .verbar__sum { font-size: var(--fs-caption); }
}

/* ============================ DETAIL (Ⅰ-2) ============================ */
.detail-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.detail-head__title { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; color: var(--fg-primary); margin: 0; white-space: nowrap; }
.detail-head__title span { color: var(--blue-600); }
.detail-instruct { display: flex; align-items: flex-start; gap: 10px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-md); padding: 12px var(--sp-4); color: var(--blue-800); font-size: var(--fs-body-sm); line-height: 1.5; margin-bottom: var(--sp-6); font-weight: 500; }
.detail-instruct i { width: 18px; height: 18px; color: var(--blue-500); flex-shrink: 0; margin-top: 1px; }
.detail-instruct svg { color: var(--blue-500); flex-shrink: 0; margin-top: 1px; }
.detail-instruct.past svg { color: var(--caution-strong); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.detail-grid.sections { grid-template-columns: 1fr; }
.dcol { display: flex; flex-direction: column; gap: var(--sp-5); }

.card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.card__head { display: flex; align-items: center; gap: 10px; padding: 14px var(--sp-5); border-bottom: 1px solid var(--border); }
.card__head .hic { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--blue-50); color: var(--blue-600); }
.card__head .hic i { width: 18px; height: 18px; }
.card__head h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; color: var(--fg-primary); white-space: nowrap; }
.card__head .head-meta { margin-left: auto; font-size: var(--fs-caption); color: var(--fg-secondary); font-weight: 600; white-space: nowrap; flex-shrink: 0; padding-left: 8px; }
.card__body { padding: var(--sp-5); }
.card__body.tight { padding: var(--sp-3) var(--sp-5); }

/* worker info grid */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gray-100); border: 1px solid var(--gray-100); border-radius: var(--r-md); overflow: hidden; }
.info-cell { background: #fff; padding: 11px var(--sp-4); display: flex; flex-direction: column; gap: 3px; position: relative; }
.info-cell.full { grid-column: span 2; }
.info-cell .lab { font-size: var(--fs-overline); font-weight: 700; color: var(--fg-secondary); letter-spacing: 0.02em; }
.info-cell .val { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-primary); }
.info-cell .val.placeholder { color: var(--gray-400); font-weight: 500; font-style: italic; }
.info-cell input { border: 1.5px solid var(--blue-300); background: var(--blue-50); border-radius: var(--r-sm); padding: 5px 8px; font-size: var(--fs-body-sm); color: var(--fg-primary); outline: none; width: 100%; }
.info-cell input:focus { border-color: var(--blue-500); box-shadow: var(--focus-ring); }

/* permission marker */
.perm { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.info-cell .perm { position: absolute; top: 9px; right: 9px; }
.req-item__meta .perm { position: static; }
.perm i { width: 11px; height: 11px; }
.perm.open { background: var(--blue-50); color: var(--blue-700); }
.perm.lock { background: var(--gray-100); color: var(--gray-500); }
.perm.toggle { cursor: pointer; border: none; transition: all .14s; }
.perm.toggle.open:hover { background: var(--blue-100); }
.perm.toggle.lock:hover { background: var(--gray-200); }

/* requests */
.req-list { display: flex; flex-direction: column; gap: 10px; }
.req-item { border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 12px var(--sp-4); transition: all .15s; }
.req-item.requested { border-color: var(--blue-300); background: var(--blue-50); }
.req-item.lockedrow { opacity: 0.55; }
.req-item__top { display: flex; align-items: center; gap: 11px; }
.req-check { width: 22px; height: 22px; border-radius: var(--r-sm); border: 2px solid var(--gray-300); display: grid; place-items: center; flex-shrink: 0; transition: all .14s; background: #fff; }
.req-check i { width: 14px; height: 14px; color: #fff; opacity: 0; }
.req-item.requested .req-check { background: var(--blue-500); border-color: var(--blue-500); }
.req-item.requested .req-check i { opacity: 1; }
.req-item.clickable { cursor: pointer; }
.req-item.clickable:hover { border-color: var(--blue-300); }

/* 타임트래블 — 이 버전에서 수정된 항목 강조 (안쪽에서 도는 펄스 — 부모 overflow:hidden 에 잘리지 않음) */
.info-cell.changed { background: var(--caution-bg); box-shadow: inset 0 0 0 2px var(--caution); animation: ssChangedCell 1.5s ease-in-out infinite; }
.info-cell.changed .lab { color: var(--caution-strong); }
.req-item.changed { border-color: var(--caution); background: var(--caution-bg); box-shadow: inset 0 0 0 1.5px var(--caution); animation: ssChangedReq 1.5s ease-in-out infinite; }
.req-item.changed .req-item__name { color: var(--caution-strong); }
@keyframes ssChangedCell {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--caution); background: var(--caution-bg); }
  50%      { box-shadow: inset 0 0 0 3px var(--caution-strong), inset 0 0 14px 0 rgba(238,154,27,0.55); background: #fbe4bf; }
}
@keyframes ssChangedReq {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--caution); background: var(--caution-bg); }
  50%      { box-shadow: inset 0 0 0 2.5px var(--caution-strong), inset 0 0 14px 0 rgba(238,154,27,0.55); background: #fbe4bf; }
}
@media (prefers-reduced-motion: reduce) {
  .info-cell.changed, .req-item.changed { animation: none; }
}
.req-item__name { font-weight: 700; font-size: var(--fs-body-sm); color: var(--fg-primary); }
.req-item__hint { font-size: var(--fs-caption); color: var(--fg-secondary); }
.req-item__meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.req-note { margin-top: 10px; }
.req-note input { width: 100%; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 8px 11px; font-size: var(--fs-body-sm); outline: none; background: #fff; color: var(--fg-primary); }
.req-note input:focus { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.req-note input::placeholder { color: var(--gray-400); }

/* progress timeline */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: var(--sp-4); padding: 13px 0; position: relative; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: -13px; width: 2px; background: var(--gray-200); }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; z-index: 1; }
.tl-dot i { width: 15px; height: 15px; }
.tl-dot.done { background: var(--safe-bg); color: var(--safe-strong); }
.tl-dot.pending { background: var(--caution-bg); color: var(--caution-strong); }
.tl-dot.urgent { background: var(--danger-bg); color: var(--danger-strong); }
/* 상태색 강조 모드 */
.card.emph .tl-dot.done { background: var(--safe); color: #fff; }
.card.emph .tl-dot.pending { background: var(--caution); color: #fff; }
.card.emph .tl-dot.urgent { background: var(--danger); color: #fff; }
.card.emph .tl-item:not(:last-child)::before { background: var(--gray-300); }
.tl-body { flex: 1; }
.tl-body .tl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tl-body .tl-title { font-weight: 700; font-size: var(--fs-body-sm); color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-body .tl-at { font-size: var(--fs-caption); color: var(--fg-secondary); white-space: nowrap; flex-shrink: 0; padding-left: 8px; }
.tl-body .tl-result { font-size: var(--fs-caption); margin-top: 3px; font-weight: 600; }
.tl-result.done { color: var(--safe-strong); }
.tl-result.pending { color: var(--caution-strong); }
.tl-result.urgent { color: var(--danger-strong); }

.status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; }
.status-chip i { width: 13px; height: 13px; }
.status-chip.done { background: var(--safe-bg); color: var(--safe-strong); }
.status-chip.pending { background: var(--caution-bg); color: var(--caution-strong); }
.status-chip.urgent { background: var(--danger-bg); color: var(--danger-strong); }

/* docs */
.doc-row { display: flex; align-items: center; gap: 12px; padding: 12px var(--sp-5); border-bottom: 1px solid var(--gray-100); }
.doc-row:last-child { border-bottom: none; }
.doc-no { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--gray-100); color: var(--gray-600); font-weight: 700; font-size: var(--fs-caption); display: grid; place-items: center; flex-shrink: 0; }
.doc-main { flex: 1; min-width: 0; }
.doc-name { font-weight: 700; font-size: var(--fs-body-sm); color: var(--fg-primary); line-height: 1.35; }
.doc-owner { font-size: var(--fs-caption); color: var(--fg-secondary); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; white-space: nowrap; }
.doc-owner .star { color: var(--caution); }
.doc-owner.none { color: var(--gray-400); }
.doc-actions { display: flex; gap: 7px; flex-shrink: 0; }
.doc-btn { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: 700; padding: 6px 11px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; color: var(--fg-body); transition: all .14s; }
.doc-btn i { width: 14px; height: 14px; }
.doc-btn.view:hover { border-color: var(--blue-300); color: var(--blue-600); background: var(--blue-50); }
.doc-btn.receive { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.doc-btn.receive:hover { background: var(--blue-600); }
.doc-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ============================ MISC ============================ */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: var(--r-pill); font-size: var(--fs-body-sm); font-weight: 600; box-shadow: var(--shadow-lg); z-index: 100; display: inline-flex; align-items: center; gap: 9px; animation: toastin .22s cubic-bezier(.2,.7,.3,1); }
.toast i { width: 17px; height: 17px; color: var(--blue-300); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.screen-enter { animation: fadeup .26s cubic-bezier(.2,.7,.3,1); }
@keyframes fadeup { from { transform: translateY(10px); } to { transform: translateY(0); } }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 980px) {
  .login { grid-template-columns: 1fr; }
  .login__brandside { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .hub-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .topbar__crumbs { display: none; }
  .topbar__who { display: none; }
  .radial { aspect-ratio: 1 / 1.15; max-width: 560px; }
  .area { width: 30%; min-width: 120px; padding: var(--sp-3); }
  .area__desc { display: none; }
  .hub-row { grid-template-columns: 1fr; }
  .wrap { padding: var(--sp-5) var(--sp-4) var(--sp-12); }
}

/* ============================================================
   브랜드 색상 = 그린 (Guardian Green)
   --blue-* 스케일을 그린으로 재매핑 → 모든 브랜드 사용처가 일괄 적용.
   상태색(safe 에메랄드 / caution / danger)은 그대로 유지.
   ============================================================ */
.app.brand-green {
  --blue-50:  #E8F6EF;
  --blue-100: #CDEBDD;
  --blue-200: #A2DCC1;
  --blue-300: #6CC79F;
  --blue-400: #34AC79;
  --blue-500: #138A5A;   /* PRIMARY (그린) */
  --blue-600: #0F7249;   /* hover */
  --blue-700: #0C5B3A;   /* press */
  --blue-800: #08442B;
  --navy-900: #093A28;   /* brand dark */
  --ring: rgba(19, 138, 90, 0.30);
}
.app.brand-green .radial__center { box-shadow: 0 18px 44px rgba(12,91,58,0.42), inset 0 2px 0 rgba(255,255,255,0.2); }
.app.brand-green .hub-center-card { box-shadow: 0 16px 40px rgba(12,91,58,0.35); }
.app.brand-green .login__glow { background: radial-gradient(circle, rgba(52,172,121,0.45), transparent 65%); }
.app.brand-green .login__glow.two { background: radial-gradient(circle, rgba(255,122,102,0.20), transparent 65%); }

/* ============================================================
   유지보수 용역 섹션 — 스카이블루 액센트
   home(그린)과 구분되도록 진입 시 --blue-* 스케일을 스카이블루로 재매핑.
   brand-green 뒤에 위치해 같은 특이성에서 소스 순서로 우선 적용.
   ============================================================ */
.app.maint-sky {
  --blue-50:  #E9F6FE;
  --blue-100: #CFEBFD;
  --blue-200: #A6DAFA;
  --blue-300: #6DC4F6;
  --blue-400: #36ACEF;
  --blue-500: #0EA5E9;   /* PRIMARY (스카이블루) */
  --blue-600: #0284C7;   /* hover */
  --blue-700: #0369A1;   /* press */
  --blue-800: #075985;
  --navy-900: #0C4A6E;
  --ring: rgba(14, 165, 233, 0.30);
  --bg-brand-soft: #E9F6FE;
  --bg-brand: #0EA5E9;
}
.app.maint-sky .radial__center { box-shadow: 0 18px 44px rgba(3,105,161,0.42), inset 0 2px 0 rgba(255,255,255,0.2); }
.app.maint-sky .hub-center-card { box-shadow: 0 16px 40px rgba(3,105,161,0.32); }
/* 섹션 전환이 느껴지도록 주요 표면 색 전이 */
.app.maint-sky .radial__center,
.app.maint-sky .area__chip.go,
.app.maint-sky .ss-overline { transition: background .25s ease, color .25s ease; }

/* ============================================================
   교재·비품 섹션 — 테라코타/클레이 액센트
   home(그린)·유지보수(스카이블루)와 구분되도록 --blue-* 스케일을 클레이로 재매핑.
   ============================================================ */
.app.supplies-clay {
  --blue-50:  #FBF0EA;
  --blue-100: #F5DECE;
  --blue-200: #EBC0A2;
  --blue-300: #DD9D73;
  --blue-400: #CE7E4E;
  --blue-500: #C2602F;   /* PRIMARY (테라코타) */
  --blue-600: #A54E23;   /* hover */
  --blue-700: #863E1B;   /* press */
  --blue-800: #6B3216;
  --navy-900: #4F2410;
  --ring: rgba(194, 96, 47, 0.30);
  --bg-brand-soft: #FBF0EA;
  --bg-brand: #C2602F;
}
.app.supplies-clay .radial__center { box-shadow: 0 18px 44px rgba(134,62,27,0.42), inset 0 2px 0 rgba(255,255,255,0.2); }
.app.supplies-clay .hub-center-card { box-shadow: 0 16px 40px rgba(134,62,27,0.32); }
.app.supplies-clay .radial__center,
.app.supplies-clay .area__chip.go,
.app.supplies-clay .ss-overline { transition: background .25s ease, color .25s ease; }
/* 준비중 분야 카드 — 클레이 톤의 옅은 점선 테두리, 클릭 시 살짝 반응 */
.app.supplies-clay .area.is-soon { cursor: pointer; border-style: dashed; }
.app.supplies-clay .area.is-soon:hover { border-color: var(--blue-300); background: var(--blue-50); }
.app.supplies-clay .radial__center.is-soon { cursor: pointer; }

/* 진행 중인 의뢰 건수 뱃지 (로스터) */
.supply-cnt {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 2px 9px; border-radius: 999px; font-size: var(--fs-caption); font-weight: 700;
  background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-200);
}
.supply-cnt svg { width: 13px; height: 13px; }
.legend .sw.cnt { background: var(--blue-50); border: 1.5px solid var(--blue-300); }

/* 체험 학습 리스트 표 (Page 3-1-2) */
.ft-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--blue-200); border-radius: 14px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 40, 80, 0.06)); }
.ft-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ft-table th { background: var(--blue-50); color: var(--blue-800); font-weight: 700; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--blue-200); white-space: nowrap; }
.ft-table td { padding: 11px 14px; border-bottom: 1px solid var(--blue-100); vertical-align: middle; }
.ft-table tr:last-child td { border-bottom: none; }
.ft-table .ft-no { width: 48px; color: var(--blue-600); font-weight: 700; white-space: nowrap; }
.ft-table .ft-cat { white-space: nowrap; font-weight: 700; }
.ft-table .ft-dot { color: var(--blue-500); margin-right: 7px; }
.ft-table .ft-desc { max-width: 260px; }
.ft-table .ft-st { white-space: nowrap; }
.ft-table tr.is-req { cursor: pointer; }
.ft-table tr.is-req:hover td { background: var(--blue-50); }
.ft-table tr.is-empty td { color: #b0b8c2; height: 46px; }
.ft-table tr.is-empty .ft-dot { color: #c9d2dc; }

/* 교재 비품 상품 리스트 표 */
.sup-ptable .sup-c-thumb { width: 84px; }
.sup-ptable .sup-c-name { min-width: 160px; }
.sup-ptable .sup-c-price { white-space: nowrap; color: var(--blue-700); }
.sup-ptable .sup-pdesc { color: #4a5563; }
.sup-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--blue-50); border: 1px solid var(--blue-100); display: flex; align-items: center; justify-content: center; }
.sup-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sup-thumb__ph { color: var(--blue-300); display: flex; }
.sup-thumb__ph svg { width: 22px; height: 22px; }
.sup-thumb__btn { position: absolute; right: 3px; bottom: 3px; width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--blue-200); color: var(--blue-600); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sup-thumb__btn svg { width: 14px; height: 14px; }
.sup-ptable .sup-prod__inp { width: 100%; }
.mb-docinp { width: 100%; padding: 5px 8px; border: 1px solid var(--blue-200); border-radius: 8px; font-size: inherit; font-family: inherit; }
.mb-docinp:focus { outline: 2px solid var(--blue-300); outline-offset: 0; }

/* 관리자 — 6개 사업부문 현황 */
.adm-biz6__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 14px 16px 16px; }
@media (max-width: 1100px) { .adm-biz6__grid { grid-template-columns: repeat(3, 1fr); } }
.adm-biz6__tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--blue-100); border-radius: 12px; background: var(--blue-50); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.adm-biz6__tile:hover { border-color: var(--blue-400); box-shadow: 0 2px 8px rgba(42, 99, 224, 0.12); }
.adm-biz6__no { position: absolute; top: 10px; right: 12px; font-weight: 800; color: var(--blue-300); }
.adm-biz6__ic svg { width: 20px; height: 20px; color: var(--blue-600); }
.adm-biz6__lab { font-weight: 700; color: var(--blue-800); }
.adm-biz6__metric { font-size: 1.05em; color: var(--navy-900); }
.adm-biz6__sub { font-size: var(--fs-caption); color: #5a6572; }

/* 학교별 진행 현황 — 준비중 플레이스홀더 */
.supply-soon {
  margin-top: var(--sp-6); padding: clamp(28px, 6vw, 64px) var(--sp-6);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: var(--white); border: 1.5px dashed var(--blue-200); border-radius: var(--r-xl);
}
.supply-soon__ic {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600);
}
.supply-soon__ic svg { width: 30px; height: 30px; }
.supply-soon h2 { font-size: var(--fs-h3); font-weight: 800; color: var(--fg-primary); }
.supply-soon p { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--fg-secondary); }
.supply-soon .btn { margin-top: 6px; }

/* ============================ 통합 관리 대시보드 (ADMIN) ============================ */
.admin .page-head { align-items: flex-start; }
.admin-back {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--sp-3);
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary);
  transition: color .14s;
}
.admin-back:hover { color: var(--blue-600); }
.admin-back svg { width: 16px; height: 16px; }

/* KPI */
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.adm-kpi {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-5) var(--sp-5);
  display: flex; flex-direction: column; gap: 8px;
}
.adm-kpi.live { border-color: var(--safe); background: var(--safe-bg); }
.adm-kpi.caution { border-color: var(--caution); background: var(--caution-bg); }
.adm-kpi__lab { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-caption); font-weight: 600; color: var(--fg-secondary); }
.adm-kpi.live .adm-kpi__lab { color: var(--safe-strong); }
.adm-kpi.caution .adm-kpi__lab { color: var(--caution-strong); }
.adm-kpi__val { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg-primary); line-height: 1; }
.adm-kpi.live .adm-kpi__val { color: var(--safe-strong); }
.adm-kpi.caution .adm-kpi__val { color: var(--caution-strong); }
.adm-kpi__val small { font-size: 14px; font-weight: 600; margin-left: 3px; color: var(--fg-secondary); }
.adm-kpi.live .adm-kpi__val small, .adm-kpi.caution .adm-kpi__val small { color: inherit; opacity: 0.7; }

.adm-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--sp-6); align-items: start; }

/* 접속 현황 카드 */
.adm-presence .head-meta { display: inline-flex; align-items: center; gap: 6px; }
.adm-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.adm-toolbar .searchbox { flex: 1; }
.adm-filter {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--white); cursor: pointer;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary);
  transition: all .14s cubic-bezier(.2,.7,.3,1);
}
.adm-filter:hover { border-color: var(--safe); color: var(--safe-strong); }
.adm-filter.on { background: var(--safe-bg); border-color: var(--safe); color: var(--safe-strong); }

.presence-list { max-height: 560px; overflow-y: auto; }
.presence-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px var(--sp-5); border-bottom: 1px solid var(--gray-100);
}
.presence-row:last-child { border-bottom: none; }
.presence-row.online { background: linear-gradient(90deg, var(--safe-bg) 0%, rgba(232,247,239,0) 60%); }
.presence-row__status { width: 12px; display: flex; justify-content: center; flex-shrink: 0; }
.presence-row__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 16px; font-weight: 800;
  background: var(--gray-100); color: var(--gray-500);
}
.presence-row__avatar.on { background: var(--safe); color: #fff; box-shadow: 0 0 0 3px var(--safe-bg); }
.presence-row__main { flex: 1; min-width: 0; }
.presence-row__name { font-size: var(--fs-body); font-weight: 700; color: var(--fg-primary); }
.presence-row.online .presence-row__name { color: var(--safe-strong); }
.presence-row__sub { font-size: var(--fs-caption); color: var(--fg-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence-row__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.presence-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 800;
  background: var(--safe); color: #fff;
}
.presence-users { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 700; color: var(--safe-strong); }
.presence-users svg { width: 13px; height: 13px; }
.presence-last { font-size: var(--fs-caption); color: var(--gray-400); white-space: nowrap; }
.adm-empty { padding: var(--sp-8); text-align: center; color: var(--fg-secondary); font-size: var(--fs-body-sm); }

/* 최근 가입 카드 */
.signup-list { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.signup-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); transition: box-shadow .14s, border-color .14s;
}
.signup-card.pending { border-color: var(--caution); background: var(--caution-bg); }
.signup-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.signup-card__region {
  font-size: 11px; font-weight: 800; color: var(--blue-700); background: var(--blue-50);
  padding: 2px 8px; border-radius: var(--r-pill); flex-shrink: 0;
}
.signup-card__name { font-size: var(--fs-body); font-weight: 800; color: var(--fg-primary); }
.signup-card__today { font-size: 10px; font-weight: 800; color: #fff; background: var(--accent-coral); padding: 2px 7px; border-radius: var(--r-pill); }
.signup-card__badge { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 800; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; flex-shrink: 0; }
.signup-card__name { font-size: var(--fs-body); font-weight: 800; color: var(--fg-primary); white-space: nowrap; }
.signup-card__today { white-space: nowrap; flex-shrink: 0; }
.signup-card__badge svg { width: 13px; height: 13px; }
.signup-card__badge.ok { background: var(--safe-bg); color: var(--safe-strong); }
.signup-card__badge.wait { background: var(--caution); color: #fff; }
.signup-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-body-sm); color: var(--fg-secondary); }
.signup-card__meta .dot-sep { color: var(--gray-300); }
.signup-card__mgr { margin-top: 4px; font-size: var(--fs-caption); color: var(--fg-secondary); }
.signup-card__actions { display: flex; gap: 8px; margin-top: var(--sp-4); }
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-body-sm); font-weight: 700; transition: all .14s cubic-bezier(.2,.7,.3,1);
}
.sg-btn svg { width: 14px; height: 14px; }
.sg-btn.ghost { background: var(--white); border: 1px solid var(--border); color: var(--fg-secondary); }
.sg-btn.ghost:hover { border-color: var(--blue-300); color: var(--blue-600); background: var(--blue-50); }
.sg-btn.primary { flex: 1; background: var(--blue-500); border: 1px solid var(--blue-500); color: #fff; box-shadow: var(--shadow-sm); }
.sg-btn.primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.sg-btn.primary:active { transform: scale(0.98); }
.sg-btn.primary.done { background: var(--safe-bg); border-color: var(--safe-bg); color: var(--safe-strong); box-shadow: none; cursor: default; }

@media (max-width: 880px) {
  .adm-kpis { grid-template-columns: repeat(2, 1fr); }
  .adm-grid { grid-template-columns: 1fr; }
}

/* ============================ KPI 버튼 (전체 가입 학교) ============================ */
.adm-kpi--btn { cursor: pointer; text-align: left; font: inherit; position: relative; transition: border-color .14s, box-shadow .14s, transform .1s; }
.adm-kpi--btn:hover { border-color: var(--blue-400); box-shadow: var(--shadow-md); }
.adm-kpi--btn:active { transform: scale(0.99); }
.adm-kpi__go { font-size: var(--fs-caption); font-weight: 700; color: var(--blue-600); margin-top: 2px; }

/* ============================ 전체 가입 학교 목록 ============================ */
.schl-toolbar { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.schl-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.schl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--white); cursor: pointer;
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary);
  transition: all .14s cubic-bezier(.2,.7,.3,1);
}
.schl-chip:hover { border-color: var(--blue-300); color: var(--blue-600); }
.schl-chip.on { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.schl-chip__n { font-size: var(--fs-caption); font-weight: 700; background: var(--gray-100); color: var(--fg-secondary); padding: 1px 7px; border-radius: var(--r-pill); }
.schl-chip.on .schl-chip__n { background: rgba(255,255,255,0.25); color: #fff; }
.schl-list { max-height: 640px; overflow-y: auto; }
.schl-row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 13px var(--sp-5); border: none; border-bottom: 1px solid var(--gray-100);
  background: #fff; cursor: pointer; text-align: left; font: inherit;
  transition: background .12s;
}
.schl-row:hover:not(.locked) { background: var(--blue-50); }
.schl-row.locked { cursor: not-allowed; opacity: 0.6; }
/* 가입 학교 목록 — PC에서 넓은 그리드 */
.schl-page { width: min(1560px, 100%); max-width: 1560px; }
/* 모든 서비스의 학교 목록 페이지 — PC에서 화면 폭을 넓게 사용 */
.wide-page { width: min(1560px, 100%); max-width: 1560px; }
.schl-toolbar { flex-wrap: wrap; row-gap: 10px; }
@media (min-width: 1000px) {
  .schl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; padding: var(--sp-4) var(--sp-5); max-height: 70vh; }
  .schl-list .adm-empty { grid-column: 1 / -1; }
  .schl-list .schl-row { border: 1px solid var(--gray-100); border-radius: var(--r-md); padding: 12px 14px; background: var(--white); }
  .schl-list .schl-row:hover:not(.locked) { border-color: var(--blue-200); background: var(--blue-50); }
}
.schl-row__av {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
  background: var(--gray-100); color: var(--fg-secondary);
}
.schl-row__av.on { background: var(--safe-bg); color: var(--safe-strong); }
.schl-row__main { flex: 1; min-width: 0; }
.schl-row__name { font-weight: 700; color: var(--fg-primary); display: flex; align-items: center; gap: 7px; }
.schl-row__sub { font-size: var(--fs-body-sm); color: var(--fg-secondary); margin-top: 1px; }
.schl-row__right { display: flex; align-items: center; gap: var(--sp-3); color: var(--gray-400); }
.schl-pend { font-size: var(--fs-caption); font-weight: 700; color: var(--caution-strong); background: var(--caution-bg); padding: 3px 9px; border-radius: var(--r-pill); }
.schl-lock { font-size: var(--fs-caption); color: var(--gray-400); }
.schl-badge { font-size: var(--fs-caption); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); }
.schl-badge.ok { background: var(--safe-bg); color: var(--safe-strong); }
.schl-badge.wait { background: var(--caution-bg); color: var(--caution-strong); }
.schl-badge.stop { background: var(--danger-bg); color: var(--danger-strong); }

/* ============================ 학교 종합 페이지 (School Hub) ============================ */
.shub-online { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--safe-strong); margin-left: 12px; vertical-align: middle; }
.shub-tags { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.shub-tag { font-size: var(--fs-body-sm); font-weight: 600; color: var(--fg-secondary); background: var(--gray-100); padding: 4px 11px; border-radius: var(--r-pill); }
.shub-rolehint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); color: var(--caution-strong); background: var(--caution-bg); padding: 7px 13px; border-radius: var(--r-pill); font-weight: 600; }

.shub-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); align-items: start; }
.shub-col { display: flex; flex-direction: column; gap: var(--sp-5); }

/* 정보 그리드 */
.shub-info { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gray-100); }
.shub-info__cell { background: #fff; padding: 11px var(--sp-4); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shub-info__cell.full { grid-column: span 2; }
.shub-info__lab { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-tertiary, var(--gray-500)); letter-spacing: 0.01em; }
.shub-lock-i { color: var(--blue-400); }
.shub-val { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-body); color: var(--fg-primary); font-weight: 500; word-break: break-all; }
.shub-val .muted { color: var(--gray-400); }
.shub-pencil { opacity: 0; border: none; background: none; color: var(--blue-500); cursor: pointer; padding: 2px; border-radius: 5px; flex-shrink: 0; transition: opacity .12s, background .12s; }
.shub-info__cell:hover .shub-pencil, .shub-contact:hover .shub-pencil { opacity: 0.65; }
.shub-pencil:hover { opacity: 1; background: var(--blue-50); }
.shub-pend { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-body-sm); color: var(--caution-strong); background: var(--caution-bg); padding: 3px 9px; border-radius: 7px; font-weight: 600; }
.shub-pend b { color: var(--fg-primary); }

/* 인라인 편집 */
.shub-edit { display: inline-flex; align-items: center; gap: 5px; width: 100%; }
.shub-edit input, .shub-edit textarea { flex: 1; min-width: 0; padding: 6px 9px; border: 1.5px solid var(--blue-400); border-radius: 7px; font: inherit; font-size: var(--fs-body); color: var(--fg-primary); resize: vertical; }
.shub-edit input:focus, .shub-edit textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
.shub-eb { border: 1px solid var(--border); background: #fff; color: var(--fg-secondary); cursor: pointer; padding: 5px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.shub-eb:hover { border-color: var(--blue-300); color: var(--blue-600); }
.shub-eb.ok { background: var(--safe); border-color: var(--safe); color: #fff; }

/* 담당자 */
.shub-contacts { display: flex; flex-direction: column; }
.shub-contact { padding: 12px var(--sp-5); border-bottom: 1px solid var(--gray-100); }
.shub-contact.primary { background: linear-gradient(0deg, var(--safe-bg) 0%, transparent 60%); }
.shub-contact__top { display: flex; align-items: center; gap: 8px; }
.shub-star { border: none; background: none; color: var(--gray-300); cursor: pointer; padding: 2px; display: grid; place-items: center; flex-shrink: 0; }
.shub-star.on { color: var(--caution); }
.shub-star:disabled { cursor: default; }
.shub-contact__name { font-weight: 700; color: var(--fg-primary); }
.shub-contact__role { font-size: var(--fs-body-sm); color: var(--fg-secondary); }
.shub-del { margin-left: auto; border: none; background: none; color: var(--gray-400); cursor: pointer; padding: 3px; border-radius: 6px; display: grid; place-items: center; }
.shub-del:hover { color: var(--danger-strong); background: var(--danger-bg); }
.shub-contact__lines { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding-left: 24px; }
.shub-contact__line { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); color: var(--fg-secondary); }
.shub-contact__line > svg { color: var(--gray-400); flex-shrink: 0; }
.shub-contact__line .shub-val { font-size: var(--fs-body-sm); }
.shub-link { font-size: var(--fs-caption); font-weight: 700; color: var(--blue-600); text-decoration: none; padding: 2px 9px; border-radius: var(--r-pill); background: var(--blue-50); margin-left: 2px; }
.shub-link:hover { background: var(--blue-100); }

/* 비밀번호 카드 */
.shub-pw__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.shub-pw__lab { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); display: block; margin-bottom: 7px; }
.shub-pw__valrow { display: flex; align-items: center; gap: 8px; }
.shub-pw__val { font-family: var(--mono, ui-monospace, monospace); font-size: 20px; font-weight: 700; letter-spacing: 0.06em; color: var(--fg-primary); background: var(--gray-50, var(--gray-100)); padding: 8px 14px; border-radius: 9px; border: 1px solid var(--border); }
.shub-pw__masked { font-size: var(--fs-body-sm); color: var(--gray-400); }
.shub-pw__meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); color: var(--fg-secondary); }
.shub-pw__act { display: flex; gap: 8px; flex-wrap: wrap; }
.shub-pw__hist { border-top: 1px solid var(--gray-100); padding-top: var(--sp-3); }
.shub-pw__histlab { font-size: var(--fs-caption); font-weight: 700; color: var(--fg-secondary); }
.shub-pw__histrow { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: var(--fs-body-sm); color: var(--fg-secondary); border-bottom: 1px dashed var(--gray-100); }
.shub-pw__histrow code { font-family: var(--mono, ui-monospace, monospace); color: var(--fg-primary); }

/* 6대 영역 타일 */
.shub-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gray-100); }
.shub-area { background: #fff; border: none; padding: 14px var(--sp-4); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; border-left: 3px solid transparent; transition: background .12s; font: inherit; }
.shub-area:hover:not(.soon) { background: var(--gray-50, #f7f8f9); }
.shub-area.soon { cursor: default; opacity: 0.55; }
.shub-area__label { font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-secondary); }
.shub-area__metric { font-size: 19px; font-weight: 800; color: var(--fg-primary); letter-spacing: -0.01em; }
.shub-area__sub { font-size: var(--fs-caption); color: var(--fg-secondary); }
.shub-area.fac { border-left-color: #1F8A5B; }
.shub-area.sub { border-left-color: #2A6FDB; }
.shub-area.subst { border-left-color: #7A5AF8; }
.shub-area.maint { border-left-color: #2E90C4; }
.shub-area.sup { border-left-color: #C2602F; }

/* 수정요청 */
.shub-reqs { margin-bottom: var(--sp-5); }
.shub-reqs.has { border-color: var(--caution); }
.shub-reqlist { display: flex; flex-direction: column; }
.shub-req { display: flex; align-items: center; gap: var(--sp-4); padding: 12px var(--sp-5); border-bottom: 1px solid var(--gray-100); }
.shub-req__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shub-req__field { font-weight: 700; color: var(--fg-primary); }
.shub-req__chg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); color: var(--fg-secondary); }
.shub-req__chg .from { text-decoration: line-through; opacity: 0.7; }
.shub-req__chg b { color: var(--blue-700); }
.shub-req__by { font-size: var(--fs-caption); color: var(--gray-400); }
.shub-req__act { display: flex; gap: 7px; flex-shrink: 0; }
.shub-reqstatus { font-size: var(--fs-caption); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); }
.shub-reqstatus.pending { background: var(--caution-bg); color: var(--caution-strong); }
.shub-reqstatus.approved { background: var(--safe-bg); color: var(--safe-strong); }
.shub-reqstatus.rejected { background: var(--gray-100); color: var(--gray-500); }

/* 최근 활동 */
.shub-activity { margin-top: var(--sp-5); }
.shub-acts { padding: var(--sp-3) var(--sp-5) var(--sp-4); }
.shub-act { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--gray-100); font-size: var(--fs-body-sm); }
.shub-act:last-child { border-bottom: none; }
.shub-act__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.shub-act__area { font-weight: 700; flex-shrink: 0; min-width: 124px; }
.shub-act__text { flex: 1; color: var(--fg-primary); }
.shub-act__by { font-size: var(--fs-caption); color: var(--gray-500); background: var(--gray-100); padding: 2px 8px; border-radius: var(--r-pill); flex-shrink: 0; }
.shub-act__at { font-size: var(--fs-caption); color: var(--gray-400); flex-shrink: 0; min-width: 78px; text-align: right; }

@media (max-width: 980px) {
  .shub-grid { grid-template-columns: 1fr; }
  .shub-act__area { min-width: 0; }
}

/* ===== 상담 신청 알림 (topbar 벨 + HOME 배너) & 게시판 ===== */
.topbar__bell { position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--white); color: var(--fg-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .14s; }
.topbar__bell:hover { color: var(--blue-600); border-color: var(--blue-300); background: var(--blue-50); }
.topbar__bell i { width: 17px; height: 17px; }
.topbar__bell.has-new { color: var(--blue-700); border-color: var(--blue-200); background: var(--blue-50); }
.topbar__bell.has-new i { animation: ssBellRing 2.6s ease-in-out infinite; transform-origin: 50% 0; }
.topbar__bell-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; border: 2px solid var(--white); border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
@keyframes ssBellRing { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(13deg); } 91% { transform: rotate(-11deg); } 94% { transform: rotate(7deg); } 97% { transform: rotate(-4deg); } }
.consult-alert { display: flex; align-items: center; gap: 12px; margin: var(--sp-4) var(--sp-6) 0; padding: 12px var(--sp-5); background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: var(--r-lg); cursor: pointer; font: inherit; text-align: left; transition: all .15s; }
.consult-alert:hover { background: var(--blue-100); border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
.consult-alert__ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--blue-500); color: #fff; display: grid; place-items: center; }
.consult-alert__ic i { width: 19px; height: 19px; }
.consult-alert b { font-size: var(--fs-body); font-weight: 800; color: var(--blue-800); white-space: nowrap; }
.consult-alert__msg { font-size: var(--fs-body-sm); color: var(--blue-700); }
.consult-alert__go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-body-sm); font-weight: 800; color: var(--blue-600); white-space: nowrap; }
.consult-alert__go i { width: 15px; height: 15px; }
.cinbox { max-width: 1140px; width: 100%; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-16); display: flex; flex-direction: column; }
.cinbox .card { margin-top: var(--sp-4); }
.cinbox__tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px var(--sp-5); border-bottom: 1px solid var(--border); background: var(--gray-50); }
.cinbox__list { display: flex; flex-direction: column; }
.cinbox-row { display: flex; align-items: flex-start; gap: 12px; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--gray-100); transition: background .14s; }
.cinbox-row:last-child { border-bottom: none; }
.cinbox-row.is-new { background: var(--blue-50); cursor: pointer; }
.cinbox-row.is-new:hover { background: var(--blue-100); }
.cinbox-row__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); margin-top: 8px; }
.cinbox-row.is-new .cinbox-row__dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-bg); }
.cinbox-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cinbox-row__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cinbox-row__school { font-size: var(--fs-body-lg); font-weight: 800; color: var(--fg-primary); }
.cinbox-row__region { font-size: var(--fs-caption); font-weight: 600; color: var(--fg-secondary); background: var(--gray-100); padding: 2px 9px; border-radius: var(--r-pill); }
.cinbox-row__newtag { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; color: #fff; background: var(--danger); padding: 2px 7px; border-radius: var(--r-pill); }
.cinbox-row__time { margin-left: auto; font-size: var(--fs-caption); color: var(--fg-secondary); white-space: nowrap; }
.cinbox-row__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--fs-body-sm); color: var(--fg-body); }
.cinbox-row__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cinbox-row__meta i { width: 14px; height: 14px; color: var(--gray-400); }
.cinbox-row__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cinbox-chip { font-size: var(--fs-caption); font-weight: 700; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 3px 10px; border-radius: var(--r-pill); }
.cinbox-row.is-new .cinbox-chip { background: #fff; }
.cinbox-chip.other { color: var(--fg-secondary); background: var(--gray-100); border-color: var(--gray-100); }
.cinbox-row__acts { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.cinbox-row__rm { width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--border); background: #fff; color: var(--fg-secondary); display: grid; place-items: center; cursor: pointer; transition: all .13s; }
.cinbox-row__rm:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-strong); }
.cinbox-row__rm i { width: 15px; height: 15px; }
@media (max-width: 760px) { .consult-alert { flex-wrap: wrap; margin: var(--sp-3) var(--sp-4) 0; } .consult-alert__go { margin-left: 0; } .cinbox-row__acts { flex-direction: column; } }

/* ===== 상황판 안내 인라인 수정 (세이프스쿨) ===== */
.board-intro { display: flex; align-items: flex-start; gap: 12px; }
.board-intro__text { flex: 1; font-size: var(--fs-body-sm); line-height: 1.65; color: var(--fg-body); white-space: pre-line; }
.board-intro__edit { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-pill); background: #fff; color: var(--fg-secondary); font: inherit; font-size: var(--fs-caption); font-weight: 700; cursor: pointer; transition: all .14s; }
.board-intro__edit:hover { color: var(--blue-600); border-color: var(--blue-300); background: var(--blue-50); }
.board-intro__edit i { width: 13px; height: 13px; }
.board-intro.is-editing { flex-direction: column; align-items: stretch; }
.board-intro__ta { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--blue-300); border-radius: var(--r-md); font: inherit; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg-body); resize: vertical; background: var(--blue-50); }
.board-intro__ta:focus { outline: none; border-color: var(--blue-500); background: #fff; }
.board-intro__acts { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.board-intro__hint { margin-right: auto; font-size: var(--fs-caption); color: var(--fg-secondary); }

/* ===== 파견 현황 보드 (시설관리 인력파견) ===== */
.disp-card { margin-bottom: var(--sp-5); }
.disp-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px var(--sp-5); border-bottom: 1px solid var(--border); background: var(--gray-50); }
.disp-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.disp-row { display: grid; grid-template-columns: 118px 1fr 0.9fr 1.4fr auto; align-items: center; gap: 12px; width: 100%; padding: 11px var(--sp-5); border: none; border-bottom: 1px solid var(--gray-100); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.disp-row:last-child { border-bottom: none; }
.disp-row:hover { background: var(--blue-50); }
.disp-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 800; white-space: nowrap; }
.disp-badge.st-new { background: var(--danger-bg); color: var(--danger-strong); }
.disp-badge.st-scheduled { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.disp-badge.st-active { background: var(--safe-bg, #e3f6ec); color: var(--safe-strong, #0c7a4d); }
.disp-badge.st-done { background: var(--gray-100); color: var(--fg-secondary); }
.disp-row__school { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.disp-row__school b { font-size: var(--fs-body-sm); font-weight: 800; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disp-row__school em { font-style: normal; font-size: var(--fs-caption); color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disp-row__worker { font-size: var(--fs-body-sm); font-weight: 700; color: var(--fg-body); white-space: nowrap; }
.disp-row__worker.is-tbd { color: var(--gray-400); font-weight: 600; }
.disp-row__role { font-size: var(--fs-body-sm); color: var(--fg-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disp-row__period { font-size: var(--fs-caption); color: var(--fg-secondary); white-space: nowrap; }
.disp-row__go { width: 16px; height: 16px; color: var(--gray-400); justify-self: end; }
.disp-row__open { justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--blue-50); color: var(--blue-700); font-size: var(--fs-caption); font-weight: 800; white-space: nowrap; border: 1px solid var(--blue-100); transition: all .13s; }
.disp-row:hover .disp-row__open { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.disp-row__open i { width: 13px; height: 13px; }
.disp-act { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 5px 11px; border-radius: var(--r-pill); background: #fff; color: var(--blue-700); border: 1px solid var(--blue-200, #bcd3f5); font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; cursor: pointer; }
.disp-act:hover { background: var(--blue-50); }
.disp-act.primary { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.disp-act.primary:hover { background: var(--blue-700); }
.disp-row__open.is-off { background: var(--gray-100); color: var(--gray-400); border-color: var(--gray-100); }
.disp-row.no-link:hover .disp-row__open.is-off { background: var(--gray-100); color: var(--gray-400); }
.disp-row.no-link { cursor: default; }
.disp-row.no-link:hover { background: #fff; }
.disp-row__worker { font-size: var(--fs-body-sm); font-weight: 800; color: var(--blue-700); }
.disp-row:not(.no-link):hover .disp-row__worker { text-decoration: underline; text-underline-offset: 3px; }
.disp-row__worker.is-tbd { color: var(--gray-400); font-weight: 600; }
.worker-cnt { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11px; font-weight: 800; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 1px 8px; border-radius: var(--r-pill); vertical-align: middle; white-space: nowrap; }
.worker-cnt i { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .disp-row { grid-template-columns: 96px 1fr auto; }
  .disp-row__role, .disp-row__period { display: none; }
}

/* 뒤로가기 버튼이 오버라인과 같은 줄에 붙는 문제 수정 */
.page-head__l .admin-back { display: flex; width: max-content; }
.schl-chip { white-space: nowrap; }

/* 단기대체 진행 상황 로그 */
.prog-open { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); background: #fdf3e0; color: #b9770a; font-size: var(--fs-caption); font-weight: 800; white-space: nowrap; }
.prog-done { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); background: var(--safe-bg, #e3f6ec); color: var(--safe-strong, #0c7a4d); font-size: var(--fs-caption); font-weight: 800; white-space: nowrap; }
th.prog-act, td.prog-act { width: 1%; white-space: nowrap; }
.prog-done-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--safe, #15a06a); border-radius: var(--r-pill); background: #fff; color: var(--safe-strong, #0c7a4d); font: inherit; font-size: var(--fs-caption); font-weight: 800; cursor: pointer; white-space: nowrap; transition: all .13s; }
.prog-done-btn:hover { background: var(--safe, #15a06a); color: #fff; }

/* 관련 문서 업로드/다운로드 (단기대체) */
th.doc-act, td.doc-act { width: 1%; white-space: nowrap; }
.doc-cell { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.doc-dl { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border: 1px solid var(--blue-300); border-radius: var(--r-pill); background: #fff; color: var(--blue-700); font: inherit; font-size: var(--fs-caption); font-weight: 800; cursor: pointer; white-space: nowrap; transition: all .13s; }
.doc-dl:hover { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.doc-up { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border: 1px dashed var(--gray-300); border-radius: var(--r-pill); background: var(--gray-50); color: var(--fg-secondary); font-size: var(--fs-caption); font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .13s; }
.doc-up:hover { border-color: var(--blue-400); color: var(--blue-600); background: var(--blue-50); }
.doc-wait { font-size: var(--fs-caption); color: var(--gray-400); white-space: nowrap; }

/* 교재·비품 상품 6종 */
.sup-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 1000px) { .sup-prods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sup-prods { grid-template-columns: 1fr; } }
.sup-prod { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .16s; }
.sup-prod:hover { box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.sup-prod.is-editing { border-color: var(--blue-300); box-shadow: 0 0 0 3px var(--blue-50); }
.sup-prod__media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--blue-50), var(--gray-100)); overflow: hidden; }
.sup-prod__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sup-prod__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--gray-400); font-size: var(--fs-caption); font-weight: 600; }
.sup-prod__ph i { width: 28px; height: 28px; }
.sup-prod__mediaacts { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.sup-prod__photo-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.95); border: 1px solid var(--border); color: var(--fg-body); font-size: var(--fs-caption); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); }
.sup-prod__photo-btn:hover { color: var(--blue-600); border-color: var(--blue-300); }
.sup-prod__photo-btn.danger { color: var(--danger-strong); }
.sup-prod__photo-btn i { width: 14px; height: 14px; }
.sup-prod__body { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-4) var(--sp-4) var(--sp-5); flex: 1; }
.sup-prod__name { margin: 0; font-size: var(--fs-body-lg); font-weight: 800; color: var(--fg-primary); }
.sup-prod__desc { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg-body); flex: 1; }
.sup-prod__inp { width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1px solid var(--blue-200); border-radius: var(--r-sm); font: inherit; background: var(--blue-50); }
.sup-prod__inp:focus { outline: none; border-color: var(--blue-500); background: #fff; }
.sup-prod__inp.name { font-weight: 800; font-size: var(--fs-body-lg); }
.sup-prod__inp.desc { font-size: var(--fs-body-sm); line-height: 1.5; resize: vertical; }
.sup-prod__inp.btnlabel { font-size: var(--fs-caption); font-weight: 700; }
.sup-prod__foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.sup-orderbtn { justify-content: center; white-space: nowrap; }
.sup-noorder { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--gray-400); font-size: var(--fs-caption); font-weight: 800; }
.sup-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: #fff; color: var(--fg-secondary); font: inherit; font-size: var(--fs-caption); font-weight: 800; cursor: pointer; white-space: nowrap; }
.sup-toggle.on { border-color: var(--safe, #15a06a); color: var(--safe-strong, #0c7a4d); background: var(--safe-bg, #e3f6ec); }
.sup-toggle i { width: 17px; height: 17px; }

/* 상품 방사형 전시 + 주문버튼 스위치 */
.radial--prods { margin: -110px auto var(--sp-4); }
@media (max-width: 760px) { .radial--prods { margin-top: 0; } }
.radial--prods .area-cell { width: clamp(150px, 24cqw, 252px); }
.sup-prod--radial { box-shadow: var(--shadow-md, var(--shadow-sm)); }
.sup-prod--radial .sup-prod__media { aspect-ratio: 16 / 10; }
.sup-prod--radial .sup-prod__body { padding: 10px 12px 12px; gap: 6px; }
.sup-prod--radial .sup-prod__name { font-size: clamp(13px, 1.6cqw, 17px); }
.sup-prod--radial .sup-prod__desc { font-size: clamp(11px, 1.2cqw, 13px); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sup-prod--radial .sup-orderbtn { padding: 6px 10px; font-size: clamp(11px, 1.2cqw, 13px); }
.sup-switch { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border: 1px solid var(--border); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: var(--fs-caption); font-weight: 800; color: var(--fg-secondary); cursor: pointer; white-space: nowrap; transition: all .15s; }
.sup-switch__track { position: relative; width: 34px; height: 19px; border-radius: 10px; background: var(--gray-300); transition: background .18s; flex-shrink: 0; }
.sup-switch__knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left .18s cubic-bezier(.2,.7,.3,1); }
.sup-switch.on { border-color: var(--safe, #15a06a); color: var(--safe-strong, #0c7a4d); background: var(--safe-bg, #e3f6ec); }
.sup-switch.on .sup-switch__track { background: var(--safe, #15a06a); }
.sup-switch.on .sup-switch__knob { left: 17px; }