/* 세이프스쿨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__logo { display: flex; align-items: center; height: 36px; }
.topbar__logo img { height: 34px; display: block; }
.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; }

/* ---- 로그아웃 첫 화면 헤더 (로고+방문자 / 항상 떠 있는 로그인) ---- */
.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__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 {
  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-10) 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: var(--sp-12) auto var(--sp-12); container-type: inline-size; }
.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);
  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; }

/* ---- 보조 박스 (세이프스쿨 입력 → 학교 열람) ---- */
.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; 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: 1.55fr 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%); }

/* ============================ 통합 관리 대시보드 (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; }
}