/* CRM — SnowUI(ByeWind) 디자인 시스템 적용 (docs 참조: Test_Design/colors_and_type.css)
   의존성 없는 self 호스팅, 엄격 CSP 유지.
   글꼴·크기·행간·굵기 토큰(--font-sans, --fs-*, --lh-*, --fw-*)은 fonts.css 가 정한다
   (Pretendard 타이포 가이드) — 이 파일은 px 크기를 직접 쓰지 않는다. */

:root {
  /* ===== SnowUI 토큰 ===== */
  --black: #1C1C1C;
  --black-80: rgba(28, 28, 28, 0.80);
  --black-40: rgba(28, 28, 28, 0.40);
  --black-20: rgba(28, 28, 28, 0.20);
  --black-10: rgba(28, 28, 28, 0.10);
  --black-5:  rgba(28, 28, 28, 0.05);
  --black-4:  rgba(28, 28, 28, 0.04);

  --bg-page: #FFFFFF;
  --surface-1: #F7F9FB;
  --surface-2: #F9F9FA;
  --surface-3: #F5F5F6;

  --brand: #95A4FC;            /* periwinkle */
  --brand-logo: #4C98FD;

  --accent-purple: #C6C7F8;
  --accent-indigo: #95A4FC;
  --accent-blue:   #A8C5DA;
  --accent-cyan:   #B1E3FF;
  --accent-mint:   #95E0C8;
  --accent-green:  #BAEDBD;
  --accent-yellow: #FFE999;
  --accent-orange: #FFC182;
  --accent-red:    #FF6692;

  --card-lavender: #EDEEFC;
  --card-blue:     #E6F1FD;
  --card-mint:     #E3F5E1;

  --status-online: #1FC16B;
  --danger: #D6456F;           /* accent-red의 텍스트 대비 보정 톤 */
  --danger-soft: #FFF0F5;

  --border: rgba(28, 28, 28, 0.10);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* 구 토큰 호환 별칭 */
  --bg: var(--bg-page);
  --surface: var(--bg-page);
  --text: var(--black);
  --muted: var(--black-40);
  --primary: var(--black);
  --primary-dark: var(--black-80);
  --ok: var(--status-online);
  --radius: var(--radius-xl);
  --shadow: var(--shadow-sm);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-page); color: var(--black);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ============ 셸 — 좌측 사이드바 + 상단바 (SnowUI DashboardShell) ============ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px; flex: none; background: var(--bg-page);
  border-right: 1px solid var(--border);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-brand {
  display: flex; align-items: center; gap: 8px; padding: 0 8px 14px;
  font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black); text-decoration: none;
}
.sb-mark {
  width: 28px; height: 28px; border-radius: 9999px; background: var(--black);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold);
}
.sb-label { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); padding: 10px 12px 4px; }
.snav { display: flex; flex-direction: column; gap: 2px; }
.snav a {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--black-80); text-decoration: none;
  transition: background .14s;
}
.snav a:hover { background: var(--black-4); }
.snav a.active { background: var(--black-5); color: var(--black); font-weight: var(--fw-medium); }
.snav a.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 9999px; background: var(--black);
}

.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 64px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--bg-page);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: none; }              /* 브랜드는 사이드바로 이동 */
.topnav { display: none; }
.topbar .spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.who { color: var(--black-80); font-size: var(--fs-body); line-height: var(--lh-body); display: inline-flex; align-items: center; gap: 8px; }

.container { padding: 28px; width: 100%; max-width: 85vw; margin: 0 auto; }
.container-auth { max-width: none; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-head h1 { font-size: var(--fs-title-l); line-height: var(--lh-title-l); margin: 0; font-weight: var(--fw-semibold); }

/* --- card --- */
.card {
  background: var(--surface-1); border: none;
  border-radius: var(--radius-xl); padding: 24px;
}
.center-card { max-width: 400px; width: 100%; margin: 0; border-radius: var(--radius-2xl); background: var(--bg-page); box-shadow: var(--shadow-sm); padding: 32px; }
.card-title { margin: 0 0 20px; font-size: var(--fs-title-m); line-height: var(--lh-title-m); font-weight: var(--fw-semibold); text-align: center; }
.card-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.error-code { font-size: var(--fs-headline-l); line-height: var(--lh-headline-l); margin: 0 0 6px; text-align: center; }
.center-card .muted { text-align: center; }
.center-card .btn { margin: 16px auto 0; display: block; width: fit-content; }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-page); color: var(--black);
  padding: 7px 14px; font-size: var(--fs-body); line-height: var(--lh-body); font-family: inherit;
  cursor: pointer; text-decoration: none; transition: background .14s;
}
.btn:hover { background: var(--black-4); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--black); border-color: var(--black); color: #fff; font-weight: var(--fw-medium); }
.btn-primary:hover { background: var(--black-80); }
.btn-danger { color: var(--danger); border-color: rgba(255, 102, 146, 0.45); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm { padding: 4px 10px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn-icon { border: none; background: none; font-size: var(--fs-title-m); line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); }

/* --- forms --- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > span { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-80); }
/* 기본 입력칸 — 어디에 있든 글자 입력·선택·여러 줄 칸은 같은 모양. :where()라 특정 규칙이 늘 이긴다 */
/* 주의: :not() 사이에 줄바꿈·공백을 두면 자손 선택자가 되어 input에 아예 안 먹는다 */
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"], [type="submit"], [type="button"], [type="hidden"]), select, textarea) {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: var(--fs-body); line-height: var(--lh-body); font-family: inherit;
  background: var(--bg-page); color: var(--black); box-sizing: border-box;
}
:where(input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }

.field input, .field select, .filters input, .filters select {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: var(--fs-body); line-height: var(--lh-body); font-family: inherit;
  background: var(--bg-page); color: var(--black);
  width: 100%; min-width: 0; box-sizing: border-box;
}
.field input:focus, .field select:focus, .filters input:focus, .filters select:focus {
  outline: 2px solid var(--brand); outline-offset: -1px;
}
/* 비밀번호 칸 — 오른쪽 끝에 눈 아이콘 버튼을 겹쳐 둔다 */
.field-pw { position: relative; display: block; }
.field-pw input { padding-right: 38px; }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--black-40);
}
.pw-eye:hover { color: var(--black-80); }
.pw-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pw-eye[aria-pressed="true"] { color: var(--black); }
/* SVG는 브라우저 기본 스타일의 [hidden] 규칙(HTML 네임스페이스 한정)이 안 먹는다 */
.pw-ico[hidden] { display: none; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-grid > .field { min-width: 0; }
.field-check { flex-direction: row; align-items: center; gap: 8px; }
.field-check input[type="checkbox"] { width: auto; accent-color: var(--black); }
.field-check > span { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--black); }
.field-hint { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); font-style: normal; }
.field-error { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--danger); font-style: normal; }
.req { color: var(--danger); font-style: normal; }
.alert { border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 14px; }
.alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255, 102, 146, 0.35); }

/* --- filters --- */
.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: flex-end; }
/* 검색칸이 .filters 바로 아래에 있을 때(담당자·감사로그) — 가로 flex 안에서만 너비로 쓴다 */
.filters > input[type="search"] { flex: 0 1 240px; min-width: 170px; background: var(--surface-2); border-color: transparent; }
.filters > input[type="search"]:focus { background: var(--bg-page); }
/* 라벨이 붙은 필터칸(.field) — 세로 flex라 flex-basis가 높이가 되므로 너비만 정해 준다 */
.filters .field { margin-bottom: 0; flex: 0 0 auto; }
.filters .field > span { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.filters .field input[type="search"] { width: 220px; background: var(--surface-2); border-color: transparent; }
.filters .field input[type="search"]:focus { background: var(--bg-page); }
.filters .field input[type="date"] { width: 150px; }
.filters .field select { width: auto; min-width: 96px; }
.filters .field-check { flex-direction: row; align-items: center; padding-bottom: 8px; }
.filter-group {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: nowrap;
  border: none; border-radius: var(--radius-md); background: var(--surface-2);
  margin: 0; padding: 6px 12px;
}
.filter-label { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40); margin-right: 4px; }
.filter-chk {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  border-radius: 9999px; padding: 3px 10px; font-size: var(--fs-body); line-height: var(--lh-body); user-select: none;
  transition: background .14s;
}
.filter-chk:hover { background: var(--black-4); }
.filter-chk input { accent-color: var(--black); margin: 0; }
.filter-chk input:checked + span { color: var(--black); font-weight: var(--fw-semibold); }
.filter-chk span { white-space: nowrap; color: var(--black-80); }
.filter-group .filter-date { width: 140px; padding: 4px 8px; font-size: var(--fs-body); line-height: var(--lh-body); background: var(--bg-page); }

/* --- table --- */
.table-meta { margin-bottom: 10px; color: var(--black-40); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.table-wrap {
  overflow-x: auto; background: var(--surface-1);
  border: none; border-radius: var(--radius-xl); padding: 8px 12px;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); }
.table th, .table td { padding: 11px 12px; text-align: left; white-space: nowrap; }
.table thead th {
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-regular);
  color: var(--black-40); border-bottom: 1px solid var(--border); background: transparent;
  text-transform: none;
}
.table tbody tr { border-bottom: 1px solid var(--black-5); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--black-4); }
.col-actions { text-align: right; }
.col-actions .btn { margin-left: 4px; background: var(--bg-page); }
.empty { text-align: center; color: var(--black-40); padding: 36px 0 !important; }

/* --- badges / status (SnowUI 파스텔) --- */
.badge {
  display: inline-block; border-radius: 9999px;
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); padding: 2px 10px; color: var(--black);
}
.badge-admin { background: var(--accent-indigo); color: #fff; }
.badge-member { background: var(--card-blue); }
/* 직무 5종 */
.badge-role-system { background: var(--accent-purple); }
.badge-role-head_counselor { background: var(--accent-yellow); }
.badge-role-doctor { background: var(--accent-cyan); }
.badge-role-esthetician { background: var(--accent-orange); }
.badge-role-coordinator { background: var(--accent-green); }
.badge-role-nurse { background: var(--accent-mint); }
/* 업무상태 */
.badge-ws-waiting { background: var(--surface-3); color: var(--black-80); }
.badge-ws-working { background: var(--accent-cyan); }
.badge-ws-vacation { background: var(--accent-orange); }
/* 언어 선택 — 상단바(로그아웃 왼쪽)·로그인 화면 공용 콤보 */
.lang-select {
  height: 30px; padding: 0 26px 0 10px; font: inherit; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium);
  color: var(--black-80); background: var(--surface-1); cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1c1c' stroke-opacity='.4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.lang-select:hover { border-color: var(--black-20); }
.lang-select:focus-visible { outline: 2px solid var(--black-20); outline-offset: 1px; }
.lang-pick { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot-on { background: var(--status-online); }
.dot-off { background: var(--black-20); }
.muted { color: var(--black-40); }

/* --- pager --- */
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 16px; }

/* --- detail list (profile) --- */
.detail-list { margin: 0; display: grid; gap: 12px; }
.detail-list > div { display: grid; grid-template-columns: 130px 1fr; align-items: center; }
.detail-list dt { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40); }
.detail-list dd { margin: 0; }

/* --- modal --- */
/* 모달이 열려 있으면 배경 페이지는 스크롤되지 않는다 (JS가 body에 붙인다) */
body.modal-open { overflow: hidden; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(28, 28, 28, 0.40);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px; z-index: 40;
  overscroll-behavior: contain;  /* 백드롭에서 시작한 스크롤이 뒤 페이지로 넘어가지 않게 */
}
.modal {
  background: var(--bg-page); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop); width: 100%; max-width: 560px;
  max-height: 84vh; overflow-y: auto;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: var(--fw-semibold); }
.modal-body { padding: 24px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* 직원 관리 — 현재상태 배지 · 상세보기 격자 */
.badge.status-working { background: var(--card-mint); }
.badge.status-vacation { background: var(--accent-yellow); }
.badge.status-leave { background: var(--accent-orange); }
.badge.status-resigned { background: var(--surface-1); color: var(--black-40); }
.emp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.emp-sec h3 { margin: 0 0 8px; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black-80); }
.emp-sec .detail-list > div { grid-template-columns: 110px 1fr; }
.emp-sec dd.pre { white-space: pre-wrap; word-break: break-word; }
.emp-form-sec { margin: 14px 0 8px; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black-80); border-top: 1px solid var(--border); padding-top: 12px; }
.emp-form-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.bulk-bar .bulk-select { width: auto; min-width: 140px; padding: 6px 10px; }
.link-plain { color: inherit; text-decoration: underline dotted; }
.link-plain:hover { color: var(--brand); }
@media (max-width: 700px) { .emp-grid { grid-template-columns: 1fr; } }
/* 내 정보 모달 — 정보 · 비밀번호 탭 */
.pf-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); margin: -6px 0 18px; }
.pf-tabs button {
  border: none; background: none; padding: 6px 2px 10px; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold);
  color: var(--black-40); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.pf-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.pf-pane { display: none; }
.pf-pane.on { display: block; }
.pf-ro { padding: 14px 0 4px; border-top: 1px solid var(--border); }
.pf-note { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); margin: 10px 0 0; }

/* --- toast --- */
.toasts {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px; z-index: 50;
}
.toast {
  border-radius: var(--radius-md); padding: 11px 16px; font-size: var(--fs-body); line-height: var(--lh-body); color: #fff;
  box-shadow: var(--shadow-pop); transition: opacity .35s, transform .35s;
}
.toast-ok { background: var(--black); }
.toast-error { background: var(--accent-red); }
.toast-out { opacity: 0; transform: translateY(6px); }

/* --- htmx --- */
.htmx-request { opacity: .65; pointer-events: none; }

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--border); }
  .sb-brand { padding: 0 8px; }
  .sb-label { display: none; }
  .snav { flex-direction: row; }
  .snav a.active::before { display: none; }
  .field-grid { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
  .detail-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --- KOS 조회 화면 --- */
.kos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.card-sub { margin: 0 0 14px; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); }
.kos-form .btn { width: 100%; }
.kos-form .field-grid { grid-template-columns: 1fr; }  /* 좁은 카드에서 날짜 인풋은 세로 배치 */
.kos-form input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
.kos-form .phone-grid { grid-template-columns: 80px 1fr; gap: 0 10px; }
.kos-form .field-hint { display: block; margin-bottom: 10px; }
.kos-result { margin-top: 4px; }
.htmx-indicator { display: none; margin: 8px 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.raw-json { margin-top: 12px; }
.raw-json pre {
  background: var(--surface-2); border: none; border-radius: var(--radius-lg);
  padding: 14px; overflow-x: auto; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); max-height: 480px; overflow-y: auto;
}
.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.detail-head h2 { margin: 0; }
.detail-cols { grid-template-columns: 1fr 1fr; }
.detail-cols > div { grid-template-columns: 110px 1fr; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-body); line-height: var(--lh-body); }
@media (max-width: 800px) { .detail-cols { grid-template-columns: 1fr; } }

/* --- KOS 호출 내역 --- */
.kos-log { margin-top: 20px; }
.log-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.log-head h2 { margin: 0; }
.log-table td { font-size: var(--fs-body); line-height: var(--lh-body); }
.log-payload { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-err { background: var(--accent-red); }

/* --- KOS 탭 내비 --- */
.kos-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.kos-tabs a {
  padding: 8px 16px; text-decoration: none; color: var(--black-40);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-body);
}
.kos-tabs a:hover { color: var(--black); }
.kos-tabs a.active { color: var(--black); border-bottom-color: var(--black); }

/* --- 직무관리 --- */
.row-error td { background: var(--danger-soft); }
.table td input[type="text"], .table td input[type="number"] {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: var(--fs-body); line-height: var(--lh-body); font-family: inherit;
  background: var(--bg-page); color: var(--black);
  width: 100%; max-width: 300px; box-sizing: border-box;
}
.table td input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
/* 개수 입력 — 두 자리 숫자에 맞춘 최소 폭 (36px에서 20% 확대) */
.table td input.cap-input { width: 44px; max-width: 44px; padding-left: 7px; padding-right: 5px; }

/* --- 대시보드 --- */
.section-title { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: var(--fw-semibold); margin: 26px 0 12px; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-row-sm { gap: 8px; }
.stat-card {
  flex: 1 1 150px; min-width: 140px; border-radius: var(--radius-lg);
  padding: 18px 20px; background: var(--surface-1);
  display: flex; flex-direction: column; gap: 6px;
}
.stat-card-sm { flex: 0 1 auto; min-width: 120px; padding: 12px 16px; }
.stat-label { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black-80); }
.stat-value { font-size: var(--fs-title-l); line-height: var(--lh-title-l); font-weight: var(--fw-semibold); }
.stat-card-sm .stat-value { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); }
.stat-card.tone-lavender { background: var(--card-lavender); }
.stat-card.tone-blue { background: var(--card-blue); }
.stat-card.tone-mint { background: var(--card-mint); }
.stat-card.tone-warn { background: #FFF1E4; }
.stat-card.tone-plain { background: var(--surface-2); }
.stat-hint { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); margin: 8px 0 0; }

/* 처리건수 직무 카드 — 직무가 몇 개든 한 줄에 고르게 */
.work-cols {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px;
}
.work-col { padding: 18px 20px; }
.work-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.work-col-head h3 { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.work-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-body); line-height: var(--lh-body); }
.wl-name { font-weight: var(--fw-medium); }
.wl-note { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-80); flex-basis: 100%; }
.wl-empty { margin: 0; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }

.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-title { margin: 0; font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: var(--fw-semibold); }
.cal-hint { margin-left: auto; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); text-align: center; padding: 4px 0; }
.cal-dow.cal-sun { color: var(--accent-red); }
.cal-dow.cal-sat { color: var(--brand-logo); }
.cal-cell {
  min-height: 84px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-page); padding: 6px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; font: inherit; color: inherit;
  transition: background .14s;
}
.cal-cell:hover { background: var(--black-4); }
.cal-cell.out { background: var(--surface-2); color: var(--black-40); }
.cal-cell.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-day { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); }
.cal-pill {
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); border-radius: 9999px; padding: 1px 8px;
  background: var(--accent-orange); color: var(--black);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) {
  .work-cols { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; }
}
/* 업무상태만 휴가인 사용자 — 등록 기록과 구분 */
.cal-pill.from-status {
  background: transparent; border: 1px dashed var(--accent-orange); color: var(--black-80);
}

/* --- 대시보드: 공간별 누적 --- */
.sub-title { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black-80); margin: 18px 0 10px; }
.totals-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.period-tabs {
  display: inline-flex; gap: 2px; background: var(--surface-2);
  border-radius: var(--radius-md); padding: 4px;
}
.period-tab { cursor: pointer; }
.period-tab input { position: absolute; opacity: 0; pointer-events: none; }
.period-tab span {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--black-80); transition: background .14s;
}
.period-tab:hover span { background: var(--black-4); }
.period-tab.active span { background: var(--bg-page); color: var(--black); font-weight: var(--fw-semibold); }
.totals-range { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); margin-left: auto; }
.cards-contents { display: contents; }

/* --- 대시보드: 업무상태 × 직무 열 --- */
.work-rows { display: flex; flex-direction: column; gap: 12px; }
.work-row { padding: 18px 20px; }
.job-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.job-col { min-width: 0; }
.job-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m);
}
.job-col .work-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
.rank-list li { justify-content: space-between; }
.rank-count { margin-left: auto; font-weight: var(--fw-semibold); }
@media (max-width: 1100px) { .job-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- 기간 선택 컴포넌트 --- */
.date-range {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border-radius: var(--radius-md); padding: 4px 8px;
}
.date-range.is-hidden { display: none; }
.date-sep { color: var(--black-40); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.date-input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-page); color: var(--black);
  font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: tabular-nums;
  padding: 5px 8px; width: 150px; cursor: pointer;
}
.date-input:hover { border-color: var(--black-20); }
.date-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.date-input::-webkit-calendar-picker-indicator {
  opacity: .45; cursor: pointer; transition: opacity .14s;
}
.date-input:hover::-webkit-calendar-picker-indicator { opacity: .9; }
.totals-range {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m);
}
.range-chip {
  background: var(--surface-2); color: var(--black-80);
  border-radius: 9999px; padding: 3px 10px; font-variant-numeric: tabular-nums;
}
.totals-range b { font-weight: var(--fw-semibold); color: var(--black); }

/* --- 사용자 현황 표 (업무상태 × 직무) --- */
.staff-table th[scope="row"] { white-space: nowrap; font-weight: var(--fw-regular); }
.staff-table td, .staff-table th { vertical-align: top; }
.staff-table thead th { font-weight: var(--fw-semibold); color: var(--black-80); }
.staff-cell { white-space: normal; min-width: 150px; }
.staff-names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.staff-names li { display: flex; flex-direction: column; gap: 2px; }
.staff-table .col-total { text-align: right; font-weight: var(--fw-semibold); }
.staff-table tfoot td, .staff-table tfoot th {
  border-top: 1px solid var(--border); font-weight: var(--fw-semibold); color: var(--black-80);
}

/* --- 달력: 히스토리 / 오늘 / 예정 구분 --- */
.cal-cell.past { background: var(--surface-2); }
.cal-cell.past .cal-day { color: var(--black-40); }
.cal-cell.future { background: var(--bg-page); }
.cal-cell.today {
  background: var(--card-lavender); outline: 2px solid var(--brand); outline-offset: -2px;
}
.cal-cell.today .cal-day { color: var(--black); font-weight: var(--fw-semibold); }
.cal-cell.out { background: var(--surface-3); }
.cal-cell.out .cal-day { color: var(--black-20); }

.cal-pill.tense-past { background: var(--black-5); color: var(--black-40); }
.cal-pill.tense-today { background: var(--accent-orange); color: var(--black); font-weight: var(--fw-semibold); }
.cal-pill.tense-future { background: var(--card-blue); color: var(--black-80); }
.cal-pill.from-status { background: transparent; border: 1px dashed currentColor; }

.cal-legend { display: inline-flex; align-items: center; gap: 12px; margin-left: 12px; }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.cal-legend .cal-pill { width: 14px; height: 10px; padding: 0; display: inline-block; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.over-quota { color: var(--danger); font-weight: var(--fw-semibold); }

/* 표 제목(헤더)은 가운데 정렬 — 데이터 셀 정렬은 그대로 둔다 */
.table thead th { text-align: center; }
.table thead th.col-actions { text-align: center; }

/* --- 휴가관리: 사용자별 일정 칩 --- */
.vac-cell { white-space: normal; max-width: 420px; }
.vac-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border-radius: 9999px;
  padding: 2px 4px 2px 10px; margin: 2px 4px 2px 0; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m);
  font-variant-numeric: tabular-nums;
}
.vac-del {
  border: none; background: none; cursor: pointer; color: var(--black-40);
  font-size: var(--fs-body); line-height: 1; padding: 0 4px; border-radius: 9999px;
}
.vac-del:hover { color: var(--danger); background: var(--danger-soft); }

/* --- 감사로그 --- */
.badge-action { background: var(--surface-3); color: var(--black-80); font-weight: var(--fw-medium); }
.audit-detail {
  white-space: nowrap; max-width: 380px; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--black-80);
}
.audit-table .nowrap { white-space: nowrap; }
.audit-action-select { min-width: 180px; }

/* --- 휴가 일정 태그 (사용자별 휴가) --- */
.vac-chip { background: var(--card-blue); color: var(--black); }
.vac-chip.past { background: var(--black-5); color: var(--black-40); }
.vac-chip.today { background: var(--accent-orange); font-weight: var(--fw-semibold); }
.vac-chip.future { background: var(--card-lavender); }

/* 사용자별 휴가 표 — 데이터 열은 최소폭, 남는 공간은 휴가일정에 준다 */
.vac-table td, .vac-table th { width: 1%; white-space: nowrap; }
.vac-table td.vac-cell, .vac-table th.vac-head { width: auto; max-width: none; white-space: normal; }
.vac-days { opacity: .6; }

/* --- 사용자 관리 표: 내용에 맞춘 열 + 여유 폭, 남는 공간은 관리 열 --- */
.users-table { table-layout: auto; }
.users-table th, .users-table td {
  width: 1%; white-space: nowrap; text-align: center;
  /* 글자 폭 + 좌우 여백 — 창 폭에 따라 줄어 가로 스크롤이 잘 생기지 않는다 */
  padding-left: clamp(0.5em, 1.1vw, 1.9em);
  padding-right: clamp(0.5em, 1.1vw, 1.9em);
}
.users-table th.col-actions, .users-table td.col-actions { width: auto; text-align: center; }
/* 표가 넘치더라도 관리 버튼은 항상 오른쪽에 보이게 고정한다 */
.users-table th.col-actions, .users-table td.col-actions {
  position: sticky; right: 0; z-index: 1; background: var(--surface-1);
  box-shadow: -8px 0 8px -8px rgba(28, 28, 28, 0.12);
}
.users-table tbody tr:hover td.col-actions { background: var(--surface-3); }
.users-table td.col-actions .btn { margin: 0 3px; }
.users-table td.num { text-align: center; }

/* ============ 모든 표: 헤더·내용 가운데 정렬 (개별 정렬 규칙보다 뒤에 둔다) ============ */
.table th,
.table td,
.table td.num,
.table th.col-actions,
.table td.col-actions,
.table td.audit-detail,
.table td.staff-cell,
.staff-table th[scope="row"],
.staff-table tfoot th {
  text-align: center;
}
/* 휴가 일정만 왼쪽 정렬 — 칩이 여러 개 이어져 가운데로 모으면 읽기 어렵다 */
.vac-table th.vac-head,
.vac-table td.vac-cell { text-align: left; }

/* 셀 안의 목록·칩도 가운데로 모은다 */
.staff-names li, .work-list li { align-items: center; }
.staff-names, .work-list { align-items: center; }
.audit-target { white-space: nowrap; font-size: var(--fs-body); line-height: var(--lh-body); }

/* --- 감사로그 상세 모달 --- */
.audit-params { margin-top: 18px; }
.audit-params-head { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40); margin-bottom: 8px; }
.audit-param-list {
  list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-2); border-radius: var(--radius-md); font-size: var(--fs-body); line-height: var(--lh-body);
  max-height: 260px; overflow-y: auto; word-break: break-all;
}

/* --- 표 다운로드 버튼 --- */
.export-group { display: inline-flex; align-items: center; gap: 6px; }
.export-label { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); margin-right: 2px; }
.export-group .btn { padding: 3px 10px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }

/* 사용자별 휴가 표 — 셀 좌우 여백을 키워 각 열을 약 70% 넓게 */
.vac-table th, .vac-table td { padding-left: 2.2em; padding-right: 2.2em; }
.vac-table td.vac-cell, .vac-table th.vac-head { padding-left: 1.2em; padding-right: 1.2em; }

/* --- 감사로그 필터: 한 줄 배치 --- */
#audit-filters { flex-wrap: nowrap; align-items: center; gap: 8px; }
/* 검색 박스(사용자·경로·상세)는 필터 줄의 10% 폭만 차지한다 */
#audit-filters input[type="search"] { flex: 0 0 10%; min-width: 0; }
#audit-filters .filter-group { flex: 0 0 auto; min-width: 0; padding: 5px 10px; }
#audit-filters .filter-label { white-space: nowrap; }
#audit-filters .audit-action-select { min-width: 130px; width: auto; }
#audit-filters .date-range { padding: 0; background: transparent; gap: 4px; }
#audit-filters .date-input { width: 132px; padding: 4px 6px; }
#audit-filters button[type="reset"] { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1100px) {
  #audit-filters { flex-wrap: wrap; }   /* 좁은 화면에서는 접힌다 */
}

/* 공간관리 — 이름(EN/KO)은 고정 폭, 남는 가로 공간은 설명(EN/KO)이 나눠 갖는다.
   (앞선 `.table td input[type="text"]` 규칙과 특이도를 맞추려고 input을 명시한다) */
.spaces-table { width: 100%; table-layout: auto; }
.spaces-table td input.name-input { width: 195px; max-width: 195px; }
.spaces-table th, .spaces-table td { width: 1%; }
.spaces-table th.desc-cell, .spaces-table td.desc-cell { width: auto; }
.spaces-table td.desc-cell input { width: 100%; max-width: none; min-width: 180px; }

/* --- KOS 스케줄: 목록 위 상세 --- */
.kos-detail-slot:not(:empty) { margin-bottom: 16px; }
.detail-head .detail-close { margin-left: auto; }

/* --- KOS 스케줄 상세: 전체 필드 --- */
.kos-all-fields { margin-top: 14px; }
.field-table-wrap { max-height: 420px; overflow-y: auto; }
.field-table td, .field-table th { text-align: left; }
.field-table .field-path { white-space: nowrap; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-80); }
.field-table .field-value { white-space: normal; word-break: break-all; font-size: var(--fs-body); line-height: var(--lh-body); }
.field-table .field-label { white-space: nowrap; font-size: var(--fs-body); line-height: var(--lh-body); }

/* 상단바 시계 — 년-월-일 시:분:초 (모든 관리자 화면 공통) */
.app-clock {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.app-clock .clock-ico { color: var(--brand-logo); flex: none; }
.app-clock .clock-date {
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: var(--black-40);
  padding-right: 8px; border-right: 1px solid var(--border);
}
.app-clock .clock-time { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black); }
/* 초는 한 단계 흐리게 — 매초 바뀌어도 시선을 덜 끈다 */
.app-clock .clock-sec { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); color: var(--black-40); }

/* 퇴사자 행 — 조작 버튼 대신 퇴사일자만 */
.col-actions .retired-on { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); white-space: nowrap; }

/* 관리자 화면도 가로 스크롤 없이 — 넓은 표는 .table-wrap 안에서만 스크롤된다 */
html, body { max-width: 100%; overflow-x: hidden; }
.main-col, .container { min-width: 0; }

/* 사용자별 휴가 — 이름 옆 휴가등록 버튼 */
.vac-table td .vac-name { margin-left: 8px; }
.vac-table td .vac-add { padding: 3px 10px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); white-space: nowrap; }
.vac-table td .vac-add[disabled] { opacity: .4; cursor: not-allowed; }

/* 공간 관리 — 공간 하나가 접었다 펴는 카드 하나.
   요약줄(번호·이름)을 누르면 언어별 이름·설명과 운영 설정이 열린다. */
.sp-hint { margin: 0 0 12px; }
.sp-list { display: flex; flex-direction: column; gap: 8px; }
.sp-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden;
}
.sp-card.row-error { border-color: var(--danger); background: var(--danger-soft); }
.sp-card.sp-protected { border-left: 3px solid var(--black-80); }
.sp-card.sp-off .sp-summary { opacity: .55; }

.sp-summary {
  display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) auto 16px;
  align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none;
}
.sp-summary::-webkit-details-marker { display: none; }
.sp-summary:hover { background: var(--surface-2, var(--bg-page)); }
.sp-expand-acts { display: flex; gap: 6px; }
.sp-grip { cursor: grab; color: var(--black-20); font-size: var(--fs-body); line-height: var(--lh-body); user-select: none; }
.sp-num { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black-40); text-align: center; }
.sp-names { display: flex; flex-direction: column; min-width: 0; }
.sp-name { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); }
.sp-name-en { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.sp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-caret { color: var(--black-40); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); transition: transform .15s; }
.sp-card[open] .sp-caret { transform: rotate(180deg); }

.sp-detail { padding: 4px 16px 16px; border-top: 1px solid var(--border); background: var(--bg-page); }
.sp-section { margin-top: 14px; }
.sp-section-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40);
}
.sp-section-label::before {
  content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--black-20);
}
.sp-fields { display: grid; gap: 10px 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.sp-detail .field > span { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.sp-detail input[type="text"], .sp-detail input[type="number"], .sp-detail textarea {
  width: 100%; padding: 7px 10px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-body);
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1);
}
.sp-detail textarea { resize: vertical; min-height: 38px; }
.sp-detail input:focus, .sp-detail textarea:focus { outline: none; border-color: var(--black-20); }

.sp-ops { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.sp-cap { width: 110px; flex: none; }
/* 담당 직무는 내용만큼만 차지한다 — 그래야 '담당자 중복가능'이 바로 옆에 붙는다 */
.sp-roles { flex: 0 1 auto; min-width: 240px; max-width: 100%; }
.sp-pills { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.sp-pill { cursor: pointer; }
.sp-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.sp-pill > span {
  display: inline-block; padding: 5px 12px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium);
  color: var(--black-40); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 999px; transition: all .12s;
}
.sp-pill:hover > span { border-color: var(--black-20); color: var(--black-80); }
.sp-pill input:checked + span { background: var(--black); border-color: var(--black); color: #fff; }
.sp-pill input:focus-visible + span { outline: 2px solid var(--black-20); outline-offset: 1px; }
/* 고정 장비 — 장비마다 '몇 번 실'을 고른다. 목록이 길어질 수 있어 한 줄 아래로 넘긴다 */
.sp-equip { flex: 1 1 360px; min-width: 280px; }
.sp-equip .sp-note { margin: 6px 0 0; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.sp-equip-list { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.sp-equip-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1);
}
.sp-equip-room {
  flex: none; width: 58px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-80);
}
/* 한 실의 장비 콤보박스는 가로로 나란히 (세로로 쌓지 않는다) */
.sp-equip-picks { flex: 1 1 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; min-width: 0; align-items: center; }
.sp-equip-picks select { flex: 0 1 200px; min-width: 140px; width: auto; }
.sp-equip-row select {
  max-width: 200px; height: 28px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); padding: 0 6px;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.sp-dup { flex: none; }
.sp-switch { display: flex; align-items: center; height: 32px; }
.sp-switch input { width: 18px; height: 18px; accent-color: var(--black); }

.sp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.sp-key { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.sp-foot-btns { display: flex; gap: 6px; }

@media (max-width: 900px) {
  .sp-fields { grid-template-columns: minmax(0, 1fr); }
}

/* --- 개발(KOS API 콘솔) --- */
.dev-result { margin-top: 16px; }
.dev-result:empty { display: none; }
.dev-form .card-sub { margin: 18px 0 10px; }
.dev-form .card-sub:first-child { margin-top: 0; }
.dev-form .field-flags { flex-direction: row; gap: 16px; align-items: center; }
/* 예약 시간 — 시작 ~ 종료 두 개의 시각 콤보를 한 줄에 */
.dev-form .time-range-row { display: flex; align-items: center; gap: 8px; }
.dev-form .time-range-row select {
  flex: 1; min-width: 0; height: 36px; padding: 0 8px; font-size: var(--fs-body); line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-page);
}
.dev-form .time-range-row select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.dev-form .time-range-row em { font-style: normal; color: var(--black-40); }
.dev-form .field-flags .field { margin-bottom: 0; }
.alert-ok { background: var(--card-mint); color: var(--black); border: 1px solid var(--border); }
.table-meta .mono { color: var(--black); margin-left: 6px; }

/* --- 공지사항 --- */
.bulk-bar {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m);
}
.notice-table .col-check { width: 34px; text-align: center; }
.notice-table .col-check input { accent-color: var(--black); }
/* 요청 글 완료 — 체크박스 + 완료 시각. 완료한 줄은 제목을 흐리게 */
.notice-table .col-done { white-space: nowrap; }
.notice-table .done-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); cursor: pointer; }
.notice-table .done-check input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.notice-table tr.row-done .link-btn { color: var(--black-40); text-decoration: line-through; }
/* 보기 모달 — 요청 처리 체크 · 답글 */
.notice-req { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.notice-req .done-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); cursor: pointer; }
.notice-req .done-check input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.notice-reply-title { margin: 16px 0 8px; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); }
.notice-reply-title .muted { font-weight: var(--fw-medium); margin-left: 4px; }
.notice-replies { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.notice-replies li { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-1); }
.notice-reply-meta { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); margin-bottom: 4px; }
.notice-reply-meta .muted { margin-left: 6px; }
.notice-reply-body { font-size: var(--fs-body); line-height: var(--lh-body); white-space: pre-wrap; word-break: break-word; }
.notice-reply-form textarea { width: 100%; resize: vertical; }
/* 표 안에서 제목을 누르면 내용이 열린다 — 링크처럼 보이는 버튼 */
.link-btn {
  border: none; background: none; padding: 0; font: inherit; color: var(--black);
  cursor: pointer; text-align: left;
}
.link-btn:hover { text-decoration: underline; }
.table tr.row-off .link-btn { color: var(--black-40); }
/* 상단 브랜드 옆 버전 — 가장 최근 '배포' 글의 제목 */
.sb-brand { flex-wrap: wrap; }
.sb-ver {
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: var(--black-40);
  padding: 1px 6px; border-radius: 999px; background: var(--black-5);
}
.badge-kind-release { background: var(--card-blue); }
.badge-kind-notice { background: var(--accent-yellow); }
.badge-kind-work { background: var(--card-mint); }
.badge-kind-request { background: var(--accent-orange); }
/* 로그인 화면 — 카드 아래에 제목만 나열한다 */
.container-auth { flex-direction: column; gap: 20px; }
.notice-strip {
  width: 100%; max-width: 400px; background: var(--bg-page);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: 14px 18px;
}
.notice-strip h2 {
  margin: 0 0 8px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold);
  text-transform: uppercase; color: var(--black-40);
}
.notice-strip ul { list-style: none; margin: 0; padding: 0; }
.notice-strip li + li { border-top: 1px solid var(--border); }
.notice-link {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 8px 2px; border: none; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--black);
}
.notice-link:hover .nt { text-decoration: underline; }
.notice-link .nt {
  flex: 1; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notice-link time { flex: none; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }

/* 등록·수정 폼 */
.notice-body {
  width: 100%; min-height: 220px; padding: 10px 12px; font: inherit; font-size: var(--fs-body);
  line-height: var(--lh-body); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-page); resize: vertical;
}
.notice-body:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.notice-flags { display: flex; gap: 20px; margin-top: 4px; }
.notice-flags .field { margin-bottom: 0; }
.table tr.row-off td { color: var(--black-40); }

/* 내용 모달 — 마크다운 결과 */
.notice-meta { margin: 0 0 10px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
/* 게시글 읽기 모달 — 화면 가로의 절반. 좁은 화면에서는 화면 폭에 맞춘다 */
.modal.modal-read { width: 50vw; max-width: 50vw; }
@media (max-width: 900px) {
  .modal.modal-read { width: 100%; max-width: 100%; }
}

.notice-view { font-size: var(--fs-body); line-height: var(--lh-body); word-break: break-word; }
.notice-view h1, .notice-view h2, .notice-view h3 { margin: 16px 0 8px; font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); }
.notice-view h1:first-child, .notice-view h2:first-child { margin-top: 0; }
.notice-view p { margin: 0 0 10px; }
.notice-view ul, .notice-view ol { margin: 0 0 10px; padding-left: 20px; }
.notice-view code {
  padding: 1px 5px; border-radius: 4px; background: var(--black-5); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m);
}
.notice-view pre {
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-1);
  overflow-x: auto;
}
.notice-view pre code { padding: 0; background: none; }
.notice-view blockquote {
  margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--border);
  color: var(--black-80);
}
.notice-view a { color: var(--brand-logo); }
.notice-view table { border-collapse: collapse; }
/* 게시글 첨부 이미지 — 누르면 원본이 새 탭에서 열린다 */
.notice-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.notice-images img {
  width: 120px; height: 90px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1);
}
.notice-view th, .notice-view td { border: 1px solid var(--border); padding: 6px 10px; }

/* --- 설정 --- */
.set-card {
  max-width: 520px; background: var(--bg-page);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.set-alert { max-width: 520px; margin: 0 0 12px; }
.set-row { display: flex; align-items: center; gap: 20px; padding: 18px 22px; }
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.set-label b { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); }
.set-label i { font-style: normal; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
/* 입력칸 — 단위를 칸 안쪽에 두고 테두리 하나로 감싼다 */
.set-field {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px 0 4px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 999px;
  transition: border-color .12s, background .12s;
}
.set-field:focus-within { background: var(--bg-page); border-color: var(--black-20); }
.set-field input {
  width: 66px; height: 100%; padding: 0 8px; font: inherit; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s);
  font-weight: var(--fw-semibold); text-align: right; color: var(--black);
  border: none; background: none; outline: none;
}
.set-field em { font-style: normal; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.set-switch { flex: none; display: inline-flex; align-items: center; padding-right: 12px; }
.set-switch input { width: 18px; height: 18px; accent-color: var(--black); }
/* 카드 이동 색상 — 색 선택기 세 개를 나란히 */
.set-colors { flex: none; display: inline-flex; align-items: flex-end; gap: 14px; padding-right: 12px; }
.set-color { display: flex; flex-direction: column; gap: 4px; }
.set-color > span { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.set-color input[type="color"] {
  width: 56px; height: 32px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1);
}

/* 서비스 탭 주소 — 제품키 + 주소 칸을 세로로 쌓는다 */
.set-links { flex: none; display: flex; flex-direction: column; gap: 6px; padding-right: 12px; }
.set-link { display: flex; align-items: center; gap: 8px; }
.set-link > span { flex: 0 0 64px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.set-link input { width: 300px; }

/* 상단 언어 목록 — 체크박스를 가로로 늘어놓는다 */
.set-locales { flex: none; display: inline-flex; align-items: center; gap: 16px; padding-right: 12px; }
.set-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.set-check input { width: 18px; height: 18px; accent-color: var(--black); }
.set-check em { font-style: normal; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--black-80); }

/* 저장 완료 알림 모달 */
/* 알림·확인 모달 — 제목 / 내용 / 버튼 세 줄 */
.modal-notice { max-width: 400px; }
.modal-notice .modal-head { padding: 16px 22px; }
.modal-notice .notice-title { margin: 0; font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: var(--fw-semibold); color: var(--black); }
.modal-notice .modal-body { padding: 20px 22px 6px; }
.modal-notice .notice-msg {
  margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--black-80);
  white-space: pre-line;
}
.modal-notice .modal-foot { justify-content: flex-end; padding: 14px 22px 18px; border-top: none; }
.modal-notice .modal-foot .btn { min-width: 96px; }

/* 휴가 종류 — 전체 / 오전 / 오후 */
.field-kinds { border: none; margin: 0 0 14px; padding: 0; }
.field-kinds > span { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-80); }
.kind-tabs { display: flex; gap: 6px; margin: 6px 0 4px; }
.kind-tab { flex: 1; }
.kind-tab input { position: absolute; opacity: 0; pointer-events: none; }
.kind-tab span {
  display: block; text-align: center; padding: 7px 10px; font-size: var(--fs-body); line-height: var(--lh-body);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-page); cursor: pointer;
}
.kind-tab input:checked + span {
  background: var(--black); border-color: var(--black); color: #fff; font-weight: var(--fw-medium);
}
.vac-half {
  margin-left: 4px; padding: 0 5px; border-radius: 3px; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); font-weight: var(--fw-semibold);
  background: var(--accent-yellow); color: var(--black-80);
}
.cal-pill.half { border-left: 3px solid var(--accent-orange); }

.head-actions { display: flex; gap: 8px; }

/* 내원객 검색 — 행마다 응답 전체 필드 펼치기 */
.v-fields-row td { padding-top: 0; padding-bottom: 6px; }
.v-fields summary { cursor: pointer; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.v-fields .sub-table { margin-top: 8px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); background: var(--surface-2); }
.v-fields .sub-table th, .v-fields .sub-table td { padding: 5px 10px; text-align: left; }
.v-fields .sub-table td.mono { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); word-break: break-all; }

/* 태스크 표 — 흐름 칸이 많아 촘촘하게 */
.task-table th, .task-table td { padding: 8px 10px; font-size: var(--fs-body); line-height: var(--lh-body); white-space: nowrap; }
.badge-done { background: var(--card-mint); }
.badge-off { background: var(--surface-3); color: var(--black-40); }

/* 태스크 상세 — 왼쪽 이동 경로(타임라인) / 오른쪽 조회 정보 */
.modal-wide { max-width: 920px; }
.task-modal { overflow: hidden; }

/* 헤드 — 이름·차트번호·상태, 오른쪽에 예약/접수 시각 */
.td-head {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px 18px;
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--bg-page) 100%);
  border-bottom: 1px solid var(--border);
}
.td-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.td-id h2 { margin: 0; font-size: var(--fs-title-m); line-height: var(--lh-title-m); font-weight: var(--fw-semibold); }
.td-chart {
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: var(--black-40);
  padding: 2px 8px; border-radius: 999px; background: var(--black-5);
}
.td-times {
  display: flex; gap: 18px; margin-left: auto;
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: var(--black-80);
}
.td-times i { display: block; font-style: normal; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s);
  text-transform: uppercase; color: var(--black-40); margin-bottom: 2px; }
.td-close { margin-left: 4px; color: var(--black-40); }

.task-detail {
  display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0;
  padding: 0; max-height: calc(84vh - 74px); overflow: hidden;
}
.sec-title {
  margin: 0 0 12px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold);
  text-transform: uppercase; color: var(--black-40);
}

/* 왼쪽 — 세로 타임라인 */
.td-path {
  padding: 22px 22px 24px; background: var(--surface-1);
  border-right: 1px solid var(--border); overflow-y: auto;
}
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-item { position: relative; display: grid; grid-template-columns: 42px 14px 1fr;
  align-items: start; gap: 0 8px; padding-bottom: 2px; }
.tl-item::after {
  content: ""; position: absolute; left: 56px; top: 18px; bottom: -6px;
  border-left: 2px dotted var(--black-10);
}
.tl-item:last-child::after { display: none; }
.tl-time { padding-top: 1px; text-align: right; }
.tl-time i { display: block; font-style: normal; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s);
  color: var(--black-20); }
.tl-time b { font-size: var(--fs-caption-m); font-weight: var(--fw-semibold); line-height: var(--lh-caption-m); color: var(--black-40); }
.tl-dot {
  width: 9px; height: 9px; margin: 4px auto 0; border-radius: 50%;
  background: var(--bg-page); border: 2px solid var(--black-20); box-sizing: border-box;
}
.tl-item.now .tl-dot { border-color: var(--brand); box-shadow: 0 0 0 3px var(--card-lavender); }
.tl-body { min-width: 0; }
.tl-name { display: block; font-size: var(--fs-heading-s); font-weight: var(--fw-semibold); line-height: var(--lh-heading-s); }
.tl-name em { font-style: normal; font-weight: var(--fw-medium); color: var(--black-40); margin-left: 4px; }
.tl-staff { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tl-who {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: var(--black-80);
  background: var(--bg-page); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.tl-who i { font-style: normal; color: var(--black-40); }

/* 노드 사이 구간 — 점선 레일 위의 시간 배지 */
.tl-gap {
  position: relative; margin: 4px 0; padding: 4px 0 4px 63px; min-height: 22px;
}
.tl-gap::before {
  content: ""; position: absolute; left: 56px; top: -6px; bottom: -6px;
  border-left: 2px dotted var(--black-20);
}
.tl-chip {
  display: inline-block; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: var(--black-40);
  background: var(--bg-page); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.tl-chip.wait { color: var(--danger); border-color: rgba(214, 69, 111, .25);
  background: var(--danger-soft); }

/* 오른쪽 — 조회 정보 */
.td-info { padding: 22px 24px 24px; overflow-y: auto; }
.info-block + .info-block { margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border); }
.info-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.info-grid dt { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); margin-bottom: 2px; }
.info-grid dd { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body);
  word-break: break-word; }
.info-grid dd.muted { font-weight: var(--fw-regular); color: var(--black-20); }
@media (max-width: 860px) {
  .task-detail { grid-template-columns: 1fr; max-height: none; }
  .td-path { border-right: none; border-bottom: 1px solid var(--border); }
}

/* 공간 관리 — 끌어서 순서 바꾸기 표시 */
.sp-card[draggable="true"] { cursor: default; }
.sp-card.dragging { opacity: .45; }
.sp-card.drop-before { box-shadow: 0 -3px 0 0 var(--primary, #2563eb); }
.sp-card.drop-after { box-shadow: 0 3px 0 0 var(--primary, #2563eb); }

/* 추가 폼 한 줄 — 카드 가로를 꽉 채운다 (제목 | 입력들 | 버튼) */
.add-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto;
  gap: 12px; align-items: end; width: 100%; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.add-row .add-row-title { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); color: var(--black-80); padding-bottom: 9px; }
.add-row .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.add-row .field input, .add-row .field select {
  width: 100%; height: 34px; padding: 0 10px; font-size: var(--fs-body); line-height: var(--lh-body);
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-page);
}
.add-row .btn { height: 34px; }
.table .order-input { width: 72px; }
@media (max-width: 1100px) {
  .add-row { grid-template-columns: 1fr 1fr; }
  .add-row .add-row-title, .add-row .btn { grid-column: 1 / -1; }
}
.add-row-spaces {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 80px 100px minmax(0, 1fr) 80px auto;
}

/* 표 행 드래그 정렬 (직무 관리) */
.table tr.dragging { opacity: .45; }
.table tr.drop-before td { box-shadow: inset 0 3px 0 0 var(--primary, #2563eb); }
.table tr.drop-after td { box-shadow: inset 0 -3px 0 0 var(--primary, #2563eb); }
.table td.col-num .sp-grip { margin-right: 2px; }

/* 상품 목록 사용여부 버튼 */
.btn.btn-on { color: var(--primary, #2563eb); border-color: var(--primary, #2563eb); }
.btn.btn-off { color: var(--black-40); }

/* 설정 — 외부 CRM 연결 상태 */
.set-status { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.set-status em { font-style: normal; }
.set-status em.ok { color: var(--success, #15803d); }
.set-status em.err { color: var(--danger, #c62828); }
.td-id .td-chart { margin-left: 6px; font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--black-40); }

/* 상단바 접속자 이름 — 내 정보 링크 */
.who .who-link { color: inherit; text-decoration: none; }
.who .who-link:hover { text-decoration: underline; }

/* --- 근태 관리 (목업 06_근태관리) --- */
.vac-page-head { align-items: flex-start; }
.vac-page-head .page-sub { margin: 4px 0 0; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }

/* 오늘 요약 띠 */
/* 점 · 문구를 글자 기준선에 세운다 — 가운데 정렬이면 큰 숫자 때문에 줄이 높아져 점이 글자보다 위에 뜬다 */
.today-summary {
  display: flex; align-items: baseline; gap: 12px;
  background: var(--surface-1); border-radius: var(--radius-lg);
  padding: 14px 20px; margin-bottom: 14px;
}
.today-dot { width: 9px; height: 9px; border-radius: 50%; background: #db2777; flex-shrink: 0; }
.today-dot.all-present { background: var(--status-online); }
/* 「오늘 연차 2명」 — 숫자만 크므로 가운데가 아니라 글자 기준선에 맞춘다 */
.today-count { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); display: flex; align-items: baseline; gap: 6px; }
.today-count b { font-size: var(--fs-title-l); line-height: var(--lh-title-l); font-weight: var(--fw-semibold); color: #5b7cfa; margin: 0 2px; }
.today-count .sep { color: var(--black-20); }

/* 달력 — 흰 카드, 칸은 선으로 나눈다 */
.cal-wrap { background: var(--bg-page); border: 1px solid var(--border); padding: 18px 20px; margin-bottom: 14px; }
.cal-wrap .cal-head { flex-wrap: wrap; }
.cal-wrap .cal-title { font-size: var(--fs-title-s); line-height: var(--lh-title-s); font-weight: var(--fw-semibold); }
.cal-nav { display: flex; gap: 6px; margin-left: auto; }
.cal-nav-btn {
  width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg-page);
  border-radius: 6px; font: inherit; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); cursor: pointer;
  display: grid; place-items: center;
}
.cal-nav-btn:hover { background: var(--black-4); color: var(--black); }
.cal-wrap .cal-hint { margin-left: 0; }
.cal-wrap .cal-grid { gap: 0; }
.cal-wrap .cal-dow { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); padding: 6px 0; border-bottom: 1px solid var(--black-5); }
.cal-wrap .cal-cell {
  min-height: 78px; border: none; border-radius: 0; padding: 5px 6px; gap: 2px;
  border-bottom: 1px solid var(--black-5); border-right: 1px solid var(--black-5);
  background: var(--bg-page); outline: none;
}
.cal-wrap .cal-cell:nth-child(7n) { border-right: none; }
.cal-wrap .cal-cell:hover { background: var(--surface-2); }
.cal-wrap .cal-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-wrap .cal-cell.past { background: var(--bg-page); }
.cal-wrap .cal-cell.today { background: var(--bg-page); outline: none; }
.cal-wrap .cal-cell.out { background: var(--bg-page); opacity: .35; }
.cal-wrap .cal-cell .cal-day { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40); margin-bottom: 2px; }
.cal-wrap .cal-cell .cal-day.cal-sun { color: var(--accent-red); }
.cal-wrap .cal-cell .cal-day.cal-sat { color: var(--brand-logo); }
.cal-wrap .cal-cell .cal-day.today {
  width: 20px; height: 20px; border-radius: 50%; background: #5b7cfa; color: #fff;
  display: grid; place-items: center;
}
.cal-chip, .cal-chip-more {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--fs-caption-s); font-weight: var(--fw-semibold);
  padding: 2px 5px; border: none; border-radius: 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-caption-s);
}
.cal-chip.full { background: #fce7f3; color: #db2777; }
.cal-chip.am { background: #fef3c7; color: #d97706; }
.cal-chip.pm { background: #e0e7ff; color: #4f46e5; }
.cal-chip:hover { filter: brightness(.96); }
.cal-chip-more { background: var(--surface-3); color: #5b7cfa; font-weight: var(--fw-semibold); }
.cal-chip-more:hover { background: #dce4ff; }
.cal-legend .cal-chip { width: 14px; height: 10px; padding: 0; display: inline-block; }

/* 직무 탭 */
.job-tabs { display: flex; margin-bottom: 12px; flex-wrap: wrap; }
.job-tab {
  padding: 8px 16px; font: inherit; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40);
  cursor: pointer; border: 1px solid var(--border); background: var(--bg-page); transition: all .15s;
}
.job-tab:first-child { border-radius: 8px 0 0 8px; }
.job-tab:last-child { border-radius: 0 8px 8px 0; }
.job-tab:not(:first-child) { border-left: none; }
.job-tab.active { background: #5b7cfa; color: #fff; border-color: #5b7cfa; }
.job-tab:not(.active):hover { background: var(--surface-2); }
.job-tab .tab-count { font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); margin-left: 4px; opacity: .7; }

/* 오늘 근태 현황 — 빠른 등록 */
.quick-wrap { background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.quick-header {
  display: flex; align-items: center; gap: 8px; padding: 14px 20px 10px;
  font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--black-5);
}
.quick-header::before { content: ''; width: 3px; height: 16px; background: #5b7cfa; border-radius: 2px; }
.quick-header .date-label { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: #5b7cfa; margin-left: 4px; }
.quick-table-wrap { background: transparent; border-radius: 0; padding: 0 8px; }
.quick-table { font-size: var(--fs-body); line-height: var(--lh-body); }
/* 머리글은 값과 같은 정렬 — 이름·직무·상태는 가운데, 빠른 설정(버튼 묶음)은 왼쪽 */
.quick-table thead th { text-align: center; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); }
.quick-table th:last-child, .quick-table td:last-child { text-align: left; }
.quick-table tbody tr.vacation-row { background: #fdf2f8; }
.quick-table tbody tr.vacation-row:hover { background: #fce7f3; }
.tag { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); font-weight: var(--fw-semibold); }
.tag.on { background: #ecfdf5; color: #059669; }
.tag.off { background: #fce7f3; color: #db2777; }
.tag.off-am { background: #fef3c7; color: #b45309; }   /* 오전 반차 — 빠른 설정 [오전 반차] 색 */
.tag.off-pm { background: #eef2ff; color: #4f46e5; }   /* 오후 반차 — 빠른 설정 [오후 반차] 색 */
.quick-btns { display: flex; gap: 6px; }
.q-btn {
  padding: 5px 14px; border-radius: 7px; font: inherit; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-page); color: var(--black-40); transition: all .15s;
}
.q-btn:hover { background: var(--surface-2); }
.q-btn:disabled { opacity: .5; cursor: progress; }
.q-btn.active-full { background: #db2777; color: #fff; border-color: #db2777; }
.q-btn.active-am { background: #d97706; color: #fff; border-color: #d97706; }
.q-btn.active-pm { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* 등록 모달 — 이름 검색 목록 */
.modal-vac { max-width: 440px; }
.search-select { position: relative; }
.search-select .ss-input { width: 100%; }
.ss-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10; max-height: 200px; overflow-y: auto;
  background: var(--bg-page); border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.ss-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px; font: inherit; font-size: var(--fs-body); line-height: var(--lh-body);
  border: none; background: none; cursor: pointer;
}
.ss-item:hover, .ss-item[aria-selected="true"] { background: var(--card-lavender); }
.ss-item:disabled { opacity: .4; cursor: not-allowed; }
.ss-item .ss-job { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); margin-left: 6px; }
.ss-empty { padding: 12px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.field[hidden] { display: none; }

/* 연차 상세 모달 */
.vac-detail .vd-person { padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.vac-detail .vd-name { font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); font-weight: var(--fw-semibold); margin-bottom: 6px; }
.vac-detail .vd-job { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.vac-detail .vd-job b { color: var(--black); }
.vd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.vd-grid .vd-wide { grid-column: 1 / -1; }
.vd-grid dt { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.vd-grid dd { margin: 2px 0 0; font-weight: var(--fw-semibold); }
.vd-status.today { color: #db2777; }
.vd-status.future { color: #5b7cfa; }
.vd-status.past { color: var(--black-40); }
.vd-note { margin: 14px 0 0; padding: 8px 12px; background: #fef7f7; border-radius: 6px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.vac-detail-foot { padding: 0 24px 20px; }
.btn-release { background: #ef4444; border-color: #ef4444; color: #fff; }
.btn-release:hover { background: #dc2626; }

/* --- 대시보드 (목업 01_대시보드) --- */
.dash-head { align-items: flex-start; margin-bottom: 14px; }
.dash-head .page-sub { margin: 4px 0 0; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); display: flex; gap: 12px; }
.btn-board { background: #5b7cfa; border-color: #5b7cfa; color: #fff; font-weight: var(--fw-semibold); box-shadow: 0 2px 6px rgba(91,124,250,.25); }
.btn-board:hover { background: #4a6ae8; }
.section-label { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; }
.section-label::before { content: ''; width: 3px; height: 14px; background: #5b7cfa; border-radius: 2px; }
.kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.kpi .vl.kpi-money { font-size: var(--fs-title-l); line-height: var(--lh-title-l); }
.kpi { background: var(--bg-page); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.kpi .lb { color: var(--black-40); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); margin-bottom: 4px; }
.kpi .vl { font-size: var(--fs-title-l); line-height: var(--lh-title-l); font-weight: var(--fw-semibold); }
.kpi .un { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-medium); color: var(--black-40); margin-left: 2px; }
.kpi .meta { font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); color: var(--black-40); margin-top: 2px; }
.spaces { display: grid; grid-template-columns: repeat(var(--space-cols, 7), 1fr); gap: 8px; }
.sp { background: var(--bg-page); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; text-align: center; }
.sp .nm { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp .vl { font-size: var(--fs-title-m); line-height: var(--lh-title-m); font-weight: var(--fw-semibold); }
.sp .cap { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); font-weight: var(--fw-regular); }
.sp.full { border-color: #ef4444; background: #fef7f7; }
.sp.full .vl { color: #ef4444; }
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.panel { background: var(--bg-page); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; min-height: 320px; max-height: 420px; }
.ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-shrink: 0; }
.pt { font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); }
.pt .count { color: #5b7cfa; }
.panel .lg { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.panel .tabs { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; flex-shrink: 0; }
.panel .tab { padding: 4px 10px; border-radius: 6px; font: inherit; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); cursor: pointer; background: var(--surface-3); color: var(--black-80); border: none; }
.panel .tab:hover { background: var(--black-5); }
.panel .tab.active { background: #5b7cfa; color: #fff; }
.tw { flex: 1; overflow-y: auto; min-height: 0; }
.dash-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.dash-table th { text-align: left; color: var(--black-40); font-weight: var(--fw-medium); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); padding: 6px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-page); z-index: 1; white-space: nowrap; }
.dash-table td { padding: 8px; border-bottom: 1px solid var(--black-5); }
.dash-table tbody tr:hover { background: var(--surface-2); }
.dash-table tr.received td { color: var(--black-40); }
.dash-table td.empty { padding: 24px 0 !important; }
.time-cell { color: #5b7cfa; font-weight: var(--fw-semibold); }
.loc-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); font-weight: var(--fw-semibold); white-space: nowrap; }
.loc-badge.normal { background: #dbeafe; color: #2563eb; }
.loc-badge.delay { background: #fef2f2; color: #ef4444; }
.time-delay { color: #ef4444; font-weight: var(--fw-semibold); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.active { background: #22c55e; }
.dot.idle { background: #d1d5db; }
.dot.leave { background: var(--accent-orange); }
.staff-note { font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); color: var(--black-40); margin-top: 6px; flex-shrink: 0; }
.dash-table .badge-xs { font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); padding: 1px 8px; }
.dash-table tr.staff-vacation td { color: var(--black-40); }
@media (max-width: 1250px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .spaces { grid-template-columns: repeat(4, 1fr); }
  .bottom-grid { grid-template-columns: 1fr; }
}
.num-btn { font: inherit; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: #5b7cfa; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
.num-btn:hover { color: #4a6ae8; }
.modal-staff-work { max-width: 640px; }
.sw-summary { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--black-80); }
.sw-summary b { color: #5b7cfa; font-size: var(--fs-heading-m); line-height: var(--lh-heading-m); }
.sw-summary .sep { color: var(--black-20); }
.sw-wrap { background: transparent; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 50vh; overflow-y: auto; }
.sw-live { font-style: normal; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); color: #22c55e; font-weight: var(--fw-semibold); margin-left: 4px; }
.dash-table tr.ongoing td { background: #f0fdf4; }
.sw-foot { padding: 0 24px 20px; }
.kpi-btn { font: inherit; text-align: left; cursor: pointer; color: inherit; transition: border-color .15s, box-shadow .15s; }
.kpi-btn:hover { border-color: #5b7cfa; box-shadow: 0 2px 8px rgba(91,124,250,.18); }
.kpi-btn .kpi-more { font-style: normal; color: #5b7cfa; font-weight: var(--fw-semibold); margin-left: 2px; }
.dash-table th.num, .dash-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sw-summary .sw-export { margin-left: auto; }
.kpi-alert { border-color: #ef4444; background: #fef7f7; }
.kpi-alert .vl { color: #ef4444; }

/* 담당자 관리 — 의사의 진료 가능 시술(체크 목록) */
.field-treatments { border: none; margin: 0 0 14px; padding: 0; grid-column: 1 / -1; }
.field-treatments > span { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-80); }
.field-treatments[hidden] { display: none; }
.treat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.treat-pills .sp-pill input { position: absolute; opacity: 0; pointer-events: none; }
.treat-pills .sp-pill span {
  display: inline-block; padding: 4px 10px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); border: 1px solid var(--border);
  border-radius: 9999px; background: var(--bg-page); cursor: pointer;
}
.treat-pills .sp-pill input:checked + span { background: var(--black); border-color: var(--black); color: #fff; }

/* 시술 관리 — 진료 가능 의사 열 */
.tt-doctors { white-space: normal; max-width: 360px; }
.tt-doctors .badge { margin: 0 2px 2px 0; }

/* 설정 화면 — 모니터(뷰포트) 너비의 70%. 콘텐츠 영역보다 넓어질 수는 없다 */
.settings-page { width: min(70vw, 100%); max-width: min(70vw, 100%); }
@media (max-width: 1100px) { .settings-page { width: 100%; max-width: 100%; } }

/* 설정 — 서비스 탭 줄(주소 + 노출·링크 체크) */
.set-link-tab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-link-tab input[type="url"] { flex: 1 1 220px; min-width: 160px; }
.set-check { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); white-space: nowrap; }

/* 설정 — 전체현황 색상: 라벨은 위, 아래 줄 전체 폭에 추천 조합 콤보 + 색 선택기 격자 */
.set-row-colors { flex-wrap: wrap; align-items: flex-start; }
.set-row-colors .set-label { flex: 1 1 100%; }
.set-colors-box { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.set-preset { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.set-preset select { min-width: 200px; }
.set-row-colors .set-colors { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px 12px; }
.set-row-colors .set-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }

/* 공간 카드 [저장] 확인 모달 */
.sp-save-grid { font-size: var(--fs-body); line-height: var(--lh-body); }
.sp-save-grid dd { font-weight: var(--fw-medium); }
.sp-foot .sp-save-one { margin-left: auto; margin-right: 6px; }

/* 고정 장비 블록은 운영 설정 줄 아래 전체 폭을 쓴다 — 실마다 콤보박스가 가로로 나란히 */
.sp-ops .sp-equip { flex: 1 1 100%; min-width: 0; }
.sp-equip-picks select { flex: 0 1 180px; }

/* 설정 화면(모니터 70%) 안에서는 카드가 그 폭을 다 쓴다 */
.settings-page .set-card { max-width: none; width: 100%; }

/* 색상 조합 저장 모달 — 저장할 색을 견본으로 보여 준다 */
.preset-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.preset-swatch i { display: block; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--sw); }
.set-preset .btn-sm { white-space: nowrap; }

/* 설정 — 지점명·주소·서비스 탭 입력칸 */
.set-link input[type="text"], .set-link input[type="url"], .set-link-tab input[type="url"] {
  height: 34px; padding: 0 10px; font-size: var(--fs-body); line-height: var(--lh-body);
}

/* 설정 — 색상 미리보기(전체현황 축소 그림). 색은 --c-<키> 변수로 받는다 */
.color-preview {
  position: fixed; z-index: 60; width: 320px; padding: 10px; border-radius: 12px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-pop); pointer-events: none;
  --c-primary: #4355d8; --c-primary_soft: #eef2ff; --c-primary_line: #b9c5f5; --c-card: #5b7cfa;
  --c-head_bg: #eef1f8; --c-head_fg: #3f4a61; --c-line: #e1e4ea; --c-delay: #f59e0b; --c-delay_soft: #fef3c7;
  --c-danger: #d33b32; --c-success: #197a4b; --c-success_soft: #e7f5ec; --c-hold: #8a6700;
  --c-pick_card: #3b5bdb; --c-pick_slot: #3b5bdb; --c-pick_zone: #3b5bdb; --c-equipment: #4355d8;
}
.color-preview[hidden] { display: none; }
.cp-title { font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40); margin-bottom: 6px; }
.cp-board { background: #f7f8fa; border-radius: 8px; padding: 8px; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); color: #1f2937; }
.cp-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.cp-tab { padding: 2px 8px; border-radius: 6px 6px 0 0; background: #e6e8ec; color: #8d95a7; font-weight: var(--fw-semibold); }
.cp-tab.on { background: #fff; color: var(--c-primary); }
.cp-btn { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--c-primary); color: #fff; font-weight: var(--fw-semibold); }
.cp-zone { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px var(--c-pick_zone) inset; }
.cp-head { display: flex; justify-content: space-between; padding: 4px 8px; background: var(--c-head_bg); color: var(--c-head_fg); font-weight: var(--fw-semibold); }
.cp-line { height: 1px; background: var(--c-line); }
.cp-seats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px; }
.cp-card { border: 1.5px solid var(--c-card); border-radius: 6px; padding: 4px 5px; background: #fff; display: flex; flex-direction: column; gap: 3px; }
.cp-card b { color: var(--c-card); font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); }
.cp-card.picked { outline: 2px solid var(--c-pick_card); outline-offset: 1px; }
.cp-badge { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); font-weight: var(--fw-semibold); width: fit-content; }
.cp-badge.delay { background: var(--c-delay_soft); color: var(--c-delay); }
.cp-badge.paid { background: var(--c-success_soft); color: var(--c-success); }
.cp-badge.hold { background: #fff8e1; color: var(--c-hold); }
.cp-seat { border: 1.5px dashed var(--c-pick_slot); border-radius: 6px; display: grid; place-items: center; color: var(--c-pick_slot); font-weight: var(--fw-semibold); position: relative; }
.cp-equip { position: absolute; top: 3px; right: 3px; font-size: var(--fs-caption-s); line-height: var(--lh-caption-s); padding: 0 5px; border-radius: 8px; border: 1px solid var(--c-equipment); color: var(--c-equipment); background: #fff; }
.cp-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.cp-soft { padding: 2px 8px; border-radius: 6px; background: var(--c-primary_soft); color: var(--c-primary); border: 1px solid var(--c-primary_line); }
.cp-danger { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--c-danger); color: var(--c-danger); font-weight: var(--fw-semibold); }
/* 올린 색의 부분만 강조 */
.color-preview[data-focus="primary"] [data-part="primary"], .color-preview[data-focus="primary_soft"] [data-part="primary_soft"],
.color-preview[data-focus="primary_line"] [data-part="primary_soft"], .color-preview[data-focus="card"] [data-part="card"],
.color-preview[data-focus="head_bg"] [data-part="head_bg"], .color-preview[data-focus="head_fg"] [data-part="head_bg"],
.color-preview[data-focus="line"] [data-part="line"], .color-preview[data-focus="delay"] [data-part="delay"],
.color-preview[data-focus="delay_soft"] [data-part="delay"], .color-preview[data-focus="danger"] [data-part="danger"],
.color-preview[data-focus="success"] [data-part="success"], .color-preview[data-focus="success_soft"] [data-part="success"],
.color-preview[data-focus="hold"] [data-part="hold"], .color-preview[data-focus="pick_card"] [data-part="pick_card"],
.color-preview[data-focus="pick_slot"] [data-part="pick_slot"], .color-preview[data-focus="pick_zone"] [data-part="pick_zone"],
.color-preview[data-focus="equipment"] [data-part="equipment"] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f43f5e;
}

/* 설정 — 사용 가이드 링크 칸은 주소가 다 보이게 넓힌다 */
.set-field input[type="url"] { width: 360px; max-width: 100%; text-align: left; font-weight: var(--fw-medium); }
/* 설정 — 서비스 탭 주소 칸 */
.set-link-tab input[type="url"] {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-page);
  color: var(--black); font-size: var(--fs-body); line-height: var(--lh-body); height: 34px; padding: 0 10px;
}
.set-link-tab input[type="url"]:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
/* 서비스 탭 줄 끌어 정렬 */
.set-link-tab { padding: 4px 6px; border-radius: 8px; cursor: grab; }
.set-link-tab .sp-grip { cursor: grab; color: var(--black-20); }
.set-link-tab.dragging { opacity: .5; }
.set-link-tab.drop-before { box-shadow: 0 -2px 0 0 var(--brand); }
.set-link-tab.drop-after { box-shadow: 0 2px 0 0 var(--brand); }

/* --- 시술리스트 (목업 02_시술리스트_v2) — 행 앞 [+] 방문 이력 펼침 · 오른쪽 상세 패널 --- */
.task-table tr[data-history] { cursor: pointer; }
.task-table td.col-name b { font-weight: var(--fw-semibold); }
.badge-first { background: var(--accent-yellow); }
.badge-revisit { background: var(--card-mint); }
.badge-nation { background: var(--card-lavender); color: var(--brand-logo); font-weight: var(--fw-semibold); }
.task-table .col-toggle { width: 36px; text-align: center; padding-left: 10px; padding-right: 4px; }
.hist-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--card-lavender); color: var(--brand-logo); font-size: var(--fs-heading-m); font-weight: var(--fw-semibold); line-height: 1;
}
.hist-toggle:hover { background: var(--accent-purple); }
.task-table tr.hist-open > td { background: var(--surface-1); }
.task-table tr.hist-row:hover { background: transparent; }
.task-table tr.hist-row > td { padding: 0; white-space: normal; }
.hist-box {
  margin: 6px 16px 14px 44px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-page); box-shadow: var(--shadow-sm);
}
.hist-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold);
}
.hist-head .muted { font-weight: var(--fw-regular); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.hist-scroll { max-height: 240px; overflow-y: auto; }
.hist-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); }
.hist-table th {
  position: sticky; top: 0; z-index: 1; padding: 8px 14px; text-align: left;
  font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); font-weight: var(--fw-semibold); color: var(--black-40);
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.hist-table td { padding: 9px 14px; border-bottom: 1px solid var(--black-5); white-space: nowrap; }
.hist-table tr.hist-item { cursor: pointer; }
.hist-table tr.hist-item:hover { background: var(--card-lavender); }
.hist-table tr.hist-item.current td:first-child { font-weight: var(--fw-semibold); }
.hist-table .badge { margin-left: 6px; }
.hist-empty { margin: 0; padding: 10px 16px; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); font-style: italic; }

/* 오른쪽 슬라이드 패널 — 이력 줄을 누르면 열린다 */
/* 층 순서 — 상단바 30 < 슬라이드 패널 34·35 < 모달·확인창 40 < 토스트 50.
   패널이 모달보다 위에 있으면 [삭제] 확인창이 패널 뒤에 가려 보이지 않는다 */
.slide-overlay { position: fixed; inset: 0; z-index: 34; background: rgba(28, 28, 28, .3); }
.slide-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 35;
  width: min(72vw, 1180px); display: flex; flex-direction: column;
  background: var(--bg-page); box-shadow: -4px 0 20px rgba(0, 0, 0, .12);
  animation: task-slide-in .25s ease;
}
@keyframes task-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide-panel { animation: none; } }
.slide-panel .td-head { flex: none; }
.tp-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
}
.tp-col { padding: 20px 22px 28px; min-width: 0; }
.tp-col + .tp-col { border-left: 1px solid var(--border); }
.tp-col-title { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-heading-s); line-height: var(--lh-heading-s); font-weight: var(--fw-semibold); }
.tp-col-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--brand); }
.tp-path { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.tp-empty { margin: 0; padding: 40px 0; text-align: center; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.tp-memo textarea {
  width: 100%; min-height: 160px; box-sizing: border-box; padding: 12px;
  font: inherit; font-size: var(--fs-body); line-height: var(--lh-body); resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.tp-memo textarea:focus { outline: none; background: var(--bg-page); border-color: var(--black-20); }
.tp-memo-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.tp-memo-by { margin: 8px 0 0; text-align: right; font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
.tp-note { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-3); font-size: var(--fs-caption-m); line-height: var(--lh-caption-m); color: var(--black-40); }
@media (max-width: 1100px) {
  .slide-panel { width: min(92vw, 1180px); }
  .tp-body { grid-template-columns: 1fr; }
  .tp-col + .tp-col { border-left: none; border-top: 1px solid var(--border); }
}