/* =========================================================
   Wanted Design System — Bootstrap component overrides
   Bootstrap 컴포넌트 외형만 Wanted 룩으로 교체.
   기능/구조는 건드리지 않음.
   ========================================================= */

/* ===========================================================
   BUTTONS
   - 라운드: 8/10/12 (sm/md/lg)
   - 폰트 weight 700
   - 호버: 4% 진한 fill 톤
   =========================================================== */
.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 10px;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 0.95rem;
  letter-spacing: var(--tracking-body, 0.006em);
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-sm {
  --bs-btn-border-radius: 8px;
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.7rem;
  --bs-btn-font-size: 13px;
}
.btn-lg {
  --bs-btn-border-radius: 12px;
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-font-size: 16px;
}

.btn-primary {
  --bs-btn-bg: var(--primary-normal);
  --bs-btn-border-color: var(--primary-normal);
  --bs-btn-hover-bg: var(--primary-strong);
  --bs-btn-hover-border-color: var(--primary-strong);
  --bs-btn-active-bg: var(--primary-heavy);
  --bs-btn-active-border-color: var(--primary-heavy);
  --bs-btn-disabled-bg: var(--interaction-disable);
  --bs-btn-disabled-border-color: var(--interaction-disable);
  --bs-btn-disabled-color: var(--label-disable);
  --bs-btn-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--primary-normal);
  --bs-btn-border-color: var(--primary-normal);
  --bs-btn-hover-bg: var(--blue-95);
  --bs-btn-hover-border-color: var(--primary-strong);
  --bs-btn-hover-color: var(--primary-strong);
  --bs-btn-active-bg: var(--blue-90);
}

.btn-outline-secondary {
  --bs-btn-color: var(--label-neutral);
  --bs-btn-border-color: var(--line-solid-normal);
  --bs-btn-hover-bg: var(--fill-normal);
  --bs-btn-hover-border-color: var(--line-solid-strong);
  --bs-btn-hover-color: var(--label-normal);
  --bs-btn-active-bg: var(--fill-strong);
  --bs-btn-active-color: var(--label-normal);
}

.btn-danger {
  --bs-btn-bg: var(--status-negative);
  --bs-btn-border-color: var(--status-negative);
  --bs-btn-hover-bg: var(--red-40);
  --bs-btn-hover-border-color: var(--red-40);
  --bs-btn-active-bg: var(--red-40);
  --bs-btn-color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: var(--status-negative);
  --bs-btn-border-color: var(--status-negative);
  --bs-btn-hover-bg: var(--red-95);
  --bs-btn-hover-color: var(--red-40);
}

.btn-success {
  --bs-btn-bg: var(--status-positive);
  --bs-btn-border-color: var(--status-positive);
  --bs-btn-color: #fff;
}
.btn-warning {
  --bs-btn-bg: var(--status-cautionary);
  --bs-btn-border-color: var(--status-cautionary);
  --bs-btn-color: #fff;
}

/* Focus ring — Wanted: 2px primary-blue ring + 2px offset */
.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 2px var(--bs-body-bg),
              0 0 0 4px rgba(var(--bs-primary-rgb), 0.45);
  outline: none;
}

/* ===========================================================
   CARDS — 12px radius, 1px line border, soft shadow on hover
   =========================================================== */
.card {
  --bs-card-border-radius: 12px;
  --bs-card-inner-border-radius: 11px;
  --bs-card-border-color: var(--line-solid-normal);
  --bs-card-bg: var(--bg-elevated-normal);
  --bs-card-color: var(--label-normal);
  --bs-card-cap-bg: var(--bg-elevated-alternative);
  --bs-card-cap-color: var(--label-normal);
  box-shadow: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* 카드 헤더 폰트 - Wanted h4 톤 */
.card-header {
  font-weight: 700;
  letter-spacing: var(--tracking-h, -0.006em);
  border-bottom-color: var(--line-solid-alternative);
}

/* ===========================================================
   Step 31-F — 둥근 모서리 통일 (외곽 radius ↔ 내부 배경 일치)

   문제: 외곽(.card/.modal-content)은 border-radius 를 갖지만 내부 배경 영역
   (card-header, table thead, 첫/마지막 행, 합계 행, 강조 배경 셀)은 네모라서
   둥근 모서리 밖으로 각진 배경이 삐져나왔다.

   해결: "시각적으로 하나의 외곽 영역" 단위(.card/.modal-content)에서만
   overflow:hidden 으로 자식 배경을 외곽 radius 에 clipping 한다.
   - td/th 마다 radius 를 흩뿌리지 않는다 (border-collapse 와 충돌 없음).
   - table 가로 스크롤(.table-responsive)·hover·행 구분선·다크모드는 그대로 유지된다.
   - dropdown/popover 처럼 외곽 밖으로 나가야 하는 UI 를 넣는 카드는
     .card-overflow-visible 로 예외 처리한다 (bootstrap tooltip/popover 는
     기본적으로 body 에 append 되므로 현재 화면에는 잘림 대상이 없다).
   =========================================================== */
.card,
.modal-content {
  overflow: hidden;
}
.card.card-overflow-visible {
  overflow: visible;
}

/* ===========================================================
   BADGES — Wanted 의 soft chip
   =========================================================== */
.badge {
  --bs-badge-font-weight: 700;
  --bs-badge-padding-x: 0.55em;
  --bs-badge-padding-y: 0.3em;
  --bs-badge-border-radius: 8px;
  letter-spacing: var(--tracking-body-sm, 0.019em);
}

/* ===========================================================
   Step 21-D — 지정 화면 전용 badge 폰트 확대 (전역 .badge 는 변경하지 않음)
   - 적용 화면에서만 해당 badge 에 클래스를 부여해 ~3px 키운다.
   - 박스가 어색하지 않도록 padding/line-height 도 함께 조정.
   =========================================================== */
.badge.badge-fs3 {
  font-size: 14px;            /* 기존 약 10.5px(0.75em) → 약 +3px */
  --bs-badge-padding-x: 0.6em;
  --bs-badge-padding-y: 0.34em;
  line-height: 1.25;
}

/* Step 21-D — booking 예약 신청/상태 badge 를 잔여 객실 폰트(16px)와 동일하게. */
.badge.booking-status-badge {
  font-size: 16px;
  --bs-badge-padding-x: 0.6em;
  --bs-badge-padding-y: 0.34em;
  line-height: 1.3;
}

/* Step 21-E(3차) — 내 정보 "비밀번호 변경" 영역: 제목 텍스트만 +3px(17px).
   라벨/입력/버튼 크기·padding 은 기존 Bootstrap 기본값을 그대로 사용한다(확대 CSS 제거). */
.booking-pw-card .booking-pw-title { font-size: 17px; line-height: 1.4; }

/* Step 21-E(4차) — 비밀번호 변경 폼: PC 에서 "라벨열 | 입력열" 2열 그리드.
   세 입력창의 시작점/폭이 동일하고, 안내문구는 입력열 기준 정렬, 버튼은 입력 영역 아래 중앙.
   라벨/입력/버튼 자체 크기는 기본값을 유지한다(확대 금지). */
.booking-pw-card .booking-pw-form {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.booking-pw-card .booking-pw-row {
  display: grid;
  /* Step 21-E(6차) — 라벨 열 폭/간격 축소(170px→130px, 28px→14px)로 라벨이 입력창에 더 붙게.
     입력창 크기는 그대로(minmax(0,1fr))이며 세 input 시작점/폭은 동일하게 유지된다. */
  grid-template-columns: 130px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
/* 라벨을 입력창 텍스트 높이에 맞춰 위쪽 정렬(2열 구조). */
.booking-pw-card .booking-pw-row > .form-label {
  margin-bottom: 0;
  padding-top: 0.45rem;
}
.booking-pw-card .booking-pw-actions {
  text-align: center;
}

/* 모바일(sm 미만): 2열을 풀고 라벨 → 입력 순으로 세로로 쌓는다. */
@media (max-width: 575.98px) {
  .booking-pw-card .booking-pw-row {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }
  .booking-pw-card .booking-pw-row > .form-label {
    padding-top: 0;
    margin-bottom: 0.4rem;
  }
}

/* Step 21-D — 엑스퍼트 등록/수정 폼 좌/우 2단 사이 세로 구분선(데스크톱 lg+ 에서만).
   좁은 화면에서는 위아래로 쌓이므로 구분선을 숨긴다. */
@media (min-width: 992px) {
  .border-start-lg { border-left: 1px solid var(--bs-border-color, #dee2e6); }
}

/* Soft (subtle) 변형 — Wanted 의 추천 칩 톤 */
.bg-primary-subtle    { background-color: var(--blue-95) !important; }
.text-primary         { color: var(--primary-normal) !important; }
.bg-danger-subtle     { background-color: var(--red-95) !important; }
.text-danger          { color: var(--red-40) !important; }
.bg-success-subtle    { background-color: var(--green-95) !important; }
.text-success         { color: var(--green-40) !important; }
.bg-warning-subtle    { background-color: var(--orange-95) !important; }
.text-warning         { color: var(--orange-40) !important; }
.bg-info-subtle       { background-color: rgba(0,189,222,.12) !important; }
.text-info            { color: var(--cyan-40) !important; }

[data-bs-theme="dark"] .bg-primary-subtle  { background-color: rgba(0,102,255,.16) !important; }
[data-bs-theme="dark"] .text-primary       { color: var(--blue-60) !important; }
[data-bs-theme="dark"] .bg-danger-subtle   { background-color: rgba(255,66,66,.16) !important; }
[data-bs-theme="dark"] .text-danger        { color: var(--red-60) !important; }
[data-bs-theme="dark"] .bg-success-subtle  { background-color: rgba(0,191,64,.16) !important; }
[data-bs-theme="dark"] .text-success       { color: var(--green-60) !important; }
[data-bs-theme="dark"] .bg-warning-subtle  { background-color: rgba(255,146,0,.16) !important; }
[data-bs-theme="dark"] .text-warning       { color: var(--orange-60) !important; }

/* ===========================================================
   FORM CONTROLS
   - 라운드 10px
   - 포커스 링: 2px blue-50 outer
   =========================================================== */
.form-control,
.form-select,
.input-group-text {
  border-radius: 10px;
  border-color: var(--line-solid-normal);
  background-color: var(--bg-elevated-normal);
  color: var(--label-normal);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder {
  color: var(--label-assistive);
}
/* Step 30-D — 검색·필터 영역의 placeholder·도움말 가독성 (검색 UI 한정 scope).
   전역 placeholder(--label-assistive 0.28)는 그대로 두고, .search-filter 안에서만 한 단계 위
   토큰(--label-alternative 0.61)으로 한 단계 더 선명하게. 라이트/다크 모두 theme 토큰이라 자동 대응.
   실제 입력값 색(--label-normal)과 disabled 색은 변경하지 않는다. */
.search-filter .form-control::placeholder {
  color: var(--label-alternative);
  opacity: 1;
}
.search-filter .form-text {
  color: var(--label-neutral);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-normal);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}
.input-group-text {
  background-color: var(--bg-alternative);
  color: var(--label-neutral);
}
.form-label {
  color: var(--label-normal);
  font-weight: 600;
  letter-spacing: var(--tracking-body-sm, 0.019em);
}
.form-text {
  color: var(--label-alternative);
}

/* input-group 모서리 라운드 보정 */
.input-group > .form-control,
.input-group > .form-select {
  border-radius: 10px;
}
.input-group > .input-group-text:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.input-group > :not(:first-child).form-control,
.input-group > :not(:first-child).form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > :not(:last-child).form-control,
.input-group > :not(:last-child).input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ===========================================================
   FORM CONTROLS — readonly / disabled 다크모드 보정
   - Bootstrap 의 .bg-light utility 와 기본 readonly/disabled 색상이
     라이트 톤으로 강제되어 다크모드에서 식별이 어려운 문제 해결.
   - 라이트모드는 영향 없음 ([data-bs-theme="dark"] 한정 selector).
   - 멘토/엑스퍼트 등록 폼의 "구분" readonly 필드, 사용자/내 프로필의
     로그인 ID readonly 필드 등 동일 패턴에 공통 적용.
   =========================================================== */
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select[readonly],
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] input[readonly],
[data-bs-theme="dark"] input:disabled,
[data-bs-theme="dark"] select:disabled,
[data-bs-theme="dark"] textarea[readonly],
[data-bs-theme="dark"] textarea:disabled {
  background-color: var(--bg-elevated-normal) !important;
  color: var(--label-normal) !important;
  border-color: var(--line-solid-normal) !important;
  opacity: 1;
}
/* .bg-light Bootstrap utility 가 form 필드에 붙어 있으면 라이트 배경이
   !important 로 강제된다 — 다크모드에서 form 필드에 한해 명시적 오버라이드. */
[data-bs-theme="dark"] .form-control.bg-light,
[data-bs-theme="dark"] .form-select.bg-light,
[data-bs-theme="dark"] input.bg-light,
[data-bs-theme="dark"] textarea.bg-light {
  background-color: var(--bg-elevated-normal) !important;
  color: var(--label-normal) !important;
}

/* ===========================================================
   Step 31 — 과정포기(DROPPED) 연수생 강조 + 오프라인 O/X 배경 (앱 공통).
   - .trainee-name-dropped : 과정포기 연수생 이름 붉은 글자 (링크/hover/focus 포함, 다크 대응).
   - .trainee-area-dropped : 연수생 영역 전체 연한 붉은 배경.
   - .offline-ox-cell      : 오프라인 실시 여부 O/X 셀 연한 노랑 배경.
   우선순위: 과정포기(붉은)가 오프라인(노랑)을 항상 이긴다 — 템플릿/서버에서 최종 class
   하나만 부여하므로 CSS 선언 순서에 의존하지 않는다. 정상 연수생/일반 셀은 영향 없음.
   =========================================================== */
.trainee-name-dropped,
a.trainee-name-dropped,
.trainee-name-dropped:hover,
.trainee-name-dropped:focus {
  color: var(--red-50);
  font-weight: 600;
}
[data-bs-theme="dark"] .trainee-name-dropped,
[data-bs-theme="dark"] a.trainee-name-dropped,
[data-bs-theme="dark"] .trainee-name-dropped:hover,
[data-bs-theme="dark"] .trainee-name-dropped:focus {
  color: var(--red-60);
}
.trainee-area-dropped {
  background-color: var(--red-95) !important;
}
[data-bs-theme="dark"] .trainee-area-dropped {
  background-color: rgba(255, 99, 99, 0.16) !important;
}
.offline-ox-cell {
  background-color: var(--orange-95) !important;
}
[data-bs-theme="dark"] .offline-ox-cell {
  background-color: rgba(255, 193, 7, 0.16) !important;
}

/* ===========================================================
   TABLES — Wanted 톤
   =========================================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--label-normal);
  --bs-table-border-color: var(--line-solid-alternative);
  --bs-table-hover-bg: var(--fill-alternative);
  --bs-table-striped-bg: var(--fill-alternative);
}
.table > thead {
  background: var(--bg-alternative);
  color: var(--label-neutral);
}
.table > thead th {
  font-weight: 700;
  letter-spacing: var(--tracking-body-sm, 0.019em);
  border-bottom-color: var(--line-solid-normal);
}

/* ===========================================================
   ALERTS — Wanted: 부드러운 톤
   =========================================================== */
.alert {
  --bs-alert-border-radius: 12px;
  border-width: 1px;
}
.alert-success {
  --bs-alert-bg: var(--green-95);
  --bs-alert-color: var(--green-40);
  --bs-alert-border-color: rgba(0,150,50,.18);
}
.alert-danger {
  --bs-alert-bg: var(--red-95);
  --bs-alert-color: var(--red-40);
  --bs-alert-border-color: rgba(229,34,34,.18);
}
.alert-warning {
  --bs-alert-bg: var(--orange-95);
  --bs-alert-color: var(--orange-40);
  --bs-alert-border-color: rgba(212,120,0,.18);
}
.alert-info {
  --bs-alert-bg: var(--blue-95);
  --bs-alert-color: var(--blue-30);
  --bs-alert-border-color: var(--blue-90);
}

[data-bs-theme="dark"] .alert-success {
  --bs-alert-bg: rgba(0,191,64,.14);
  --bs-alert-color: var(--green-60);
  --bs-alert-border-color: rgba(0,191,64,.28);
}
[data-bs-theme="dark"] .alert-danger {
  --bs-alert-bg: rgba(255,66,66,.14);
  --bs-alert-color: var(--red-60);
  --bs-alert-border-color: rgba(255,66,66,.28);
}
[data-bs-theme="dark"] .alert-warning {
  --bs-alert-bg: rgba(255,146,0,.14);
  --bs-alert-color: var(--orange-60);
  --bs-alert-border-color: rgba(255,146,0,.28);
}
[data-bs-theme="dark"] .alert-info {
  --bs-alert-bg: rgba(0,102,255,.14);
  --bs-alert-color: var(--blue-65);
  --bs-alert-border-color: rgba(0,102,255,.28);
}

/* ===========================================================
   DROPDOWN — popover 그림자
   =========================================================== */
.dropdown-menu {
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-border-color: var(--line-solid-normal);
  --bs-dropdown-bg: var(--bg-elevated-normal);
  --bs-dropdown-color: var(--label-normal);
  --bs-dropdown-link-color: var(--label-normal);
  --bs-dropdown-link-hover-bg: var(--fill-normal);
  --bs-dropdown-link-active-bg: var(--blue-95);
  --bs-dropdown-link-active-color: var(--primary-strong);
  box-shadow: var(--shadow-popover);
}
[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-link-active-bg: rgba(0,102,255,.18);
  --bs-dropdown-link-active-color: var(--blue-65);
}

/* ===========================================================
   MODAL — 12px radius + soft shadow
   =========================================================== */
.modal-content {
  border-radius: 14px;
  border: 1px solid var(--line-solid-normal);
  background: var(--bg-elevated-normal);
  color: var(--label-normal);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

/* ===========================================================
   SWEETALERT2 다크 테마 — Step 25 3차
   경고 사유/필수 체크 안내(팀·연수생 경고, 과정 포기) 등 Swal 팝업이
   다크 모드에서 흰 배경으로 남던 문제 수정. Bootstrap modal 과 동일하게
   디자인 토큰(--bg-elevated-normal 등)으로 배경/글자/입력 요소를 맞춘다.
   라이트 모드는 SweetAlert2 기본 그대로 (규칙 자체가 dark 한정).
   =========================================================== */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--bg-elevated-normal);
  color: var(--label-normal);
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
  color: var(--label-normal);
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select,
[data-bs-theme="dark"] .swal2-file {
  background: var(--bg-normal);
  color: var(--label-normal);
  border-color: var(--line-solid-strong);
}
[data-bs-theme="dark"] .swal2-checkbox,
[data-bs-theme="dark"] .swal2-radio,
[data-bs-theme="dark"] .swal2-label {
  background: transparent;
  color: var(--label-normal);
}
[data-bs-theme="dark"] .swal2-validation-message {
  background: var(--bg-alternative);
  color: var(--label-normal);
}
/* confirm/cancel 버튼은 SweetAlert2 고유 색(파랑/회색·프로젝트 confirmButtonColor)을
   유지한다 — 다크에서도 대비 충분. footer/close 만 글자색 보정. */
[data-bs-theme="dark"] .swal2-footer {
  color: var(--label-alternative);
  border-top-color: var(--line-solid-normal);
}
[data-bs-theme="dark"] .swal2-close {
  color: var(--label-alternative);
}

/* ===========================================================
   LINK
   =========================================================== */
a {
  color: var(--primary-normal);
  text-decoration: none;
  transition: color 0.12s ease;
}
a:hover {
  color: var(--primary-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ===========================================================
   BOOTSTRAP ICON 색 — 기본은 상속, primary 인 경우만 blue-50
   =========================================================== */
.bi { vertical-align: -0.125em; }

/* ===========================================================
   booking 상단 브랜드 로고 (잠온다) — Step 20-B → 20-C → 21-C
   Step 21-C 에서 추가로 1.8배 확대(100px → 180px / 600px → 1080px).
   모바일은 폭/높이를 별도 제한해 상단 메뉴가 완전히 깨지지 않게 한다.
   max-width: min(.., 100%) 로 화면 폭을 넘치지 않게 하고 object-fit 으로 비율 유지.
   =========================================================== */
.booking-brand-logo {
  height: 180px;
  max-width: min(1080px, 100%);
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .booking-brand-logo {
    height: 122px;
    max-width: min(612px, 100%);
  }
}

/* ===========================================================
   booking 상단 네비 텍스트/버튼 + 반응형 정렬 — Step 21-C
   PC: 메뉴 좌측 / 사용자 우측(space-between). 텍스트 14→17px(+3),
       버튼 박스도 텍스트에 맞춰 확대.
   모바일(≤768px): 메뉴 줄 / 사용자 줄을 각각 중앙 정렬 + 줄 사이 간격.
   =========================================================== */
.booking-topnav .nav-link,
.booking-topnav .booking-user-name {
  font-size: 17px;            /* 기존 nav 14px / 사용자명 .small → 17px */
  line-height: 1.4;
}
/* 테마/로그아웃 버튼 — 텍스트 14→17px, 박스(padding/높이/라운드)도 함께 확대 */
.booking-topnav .btn {
  --bs-btn-font-size: 17px;
  --bs-btn-padding-y: .4rem;
  --bs-btn-padding-x: .8rem;
  --bs-btn-border-radius: .5rem;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}
.booking-topnav .btn i {
  font-size: 17px;            /* 아이콘도 텍스트 크기에 맞춤 */
}

/* 정렬 컨테이너 — PC: 한 줄 좌우 분리 */
.booking-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.booking-menu,
.booking-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.booking-user {
  margin-left: auto;          /* PC: 사용자 영역 우측 정렬 */
}

/* 모바일: 메뉴 줄 / 사용자 줄을 각각 중앙 정렬 + 줄 사이 간격 */
@media (max-width: 768px) {
  .booking-nav-row {
    flex-direction: column;
  }
  .booking-menu,
  .booking-user {
    width: 100%;
    justify-content: center;  /* 각 묶음 중앙 정렬 */
    margin-left: 0;           /* PC 의 ms-auto 해제 */
  }
  .booking-user {
    margin-top: .35rem;       /* 메뉴 줄과 사용자 줄 사이 간격 */
  }
}

/* ===========================================================
   TABLE 변형(contextual) 다크모드 대응 — Step 19-A-1
   Bootstrap 의 .table-light / .table-secondary 는 고정 밝은색이라
   data-bs-theme="dark" 에서도 흰색/연회색으로 남는다. 다크모드에서만
   테마 변수로 재매핑해 표 헤더가 흰색으로 고정되지 않게 한다.
   (라이트모드는 영향 없음 — selector 가 [data-bs-theme="dark"] 한정)
   =========================================================== */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--label-normal);
  --bs-table-bg: var(--bg-alternative);
  --bs-table-border-color: var(--line-solid-normal);
  --bs-table-striped-bg: var(--fill-alternative);
  --bs-table-hover-bg: var(--fill-normal);
  color: var(--label-normal);
}
[data-bs-theme="dark"] .table-secondary {
  --bs-table-color: var(--label-neutral);
  --bs-table-bg: var(--fill-normal);
  --bs-table-border-color: var(--line-solid-normal);
  --bs-table-striped-bg: var(--fill-alternative);
  --bs-table-hover-bg: var(--fill-strong);
  color: var(--label-neutral);
}

/* ===========================================================
   멘토별 진행 내역 — 영역별 헤더 색상 (Step 19-A-1)
   공통(노랑/크림) · 서울(연두/그린) · 부산(하늘/블루) · 총시간(노랑계열).
   th 셀 배경을 직접 지정해 Bootstrap 셀 배경(--bs-table-bg)을 덮는다.
   비활성(예비/기준표없음) 정규멘토링 영역은 ph-muted 로 자연스러운 disabled 톤.
   =========================================================== */
.app-table thead th.ph-common,
.app-table thead th.ph-total {
  background-color: var(--orange-95);
  color: var(--orange-40);
}
.app-table thead th.ph-seoul {
  background-color: var(--green-95);
  color: var(--green-40);
}
.app-table thead th.ph-busan {
  background-color: var(--blue-95);
  color: var(--blue-40);
}
.app-table thead th.ph-muted,
.app-table tbody td.ph-muted {
  background-color: var(--fill-normal);
  color: var(--label-assistive);
}

[data-bs-theme="dark"] .app-table thead th.ph-common,
[data-bs-theme="dark"] .app-table thead th.ph-total {
  background-color: rgba(255,146,0,.16);
  color: var(--orange-60);
}
[data-bs-theme="dark"] .app-table thead th.ph-seoul {
  background-color: rgba(0,191,64,.16);
  color: var(--green-60);
}
[data-bs-theme="dark"] .app-table thead th.ph-busan {
  background-color: rgba(0,174,255,.16);
  color: var(--light-blue-60);
}
[data-bs-theme="dark"] .app-table thead th.ph-muted,
[data-bs-theme="dark"] .app-table tbody td.ph-muted {
  background-color: var(--fill-normal);
  color: var(--label-assistive);
}

/* ===========================================================
   창업 멘토 활동 내역 — 27열 그룹 표 (Step 33-A)
   서울(연두) · 부산(하늘) · 서울+부산(분홍) 3단 header. 색상만으로 구분하지 않도록
   group label(서울/부산/서울+부산)을 항상 함께 표시한다.
   =========================================================== */
.app-table thead th.ph-sum {
  background-color: var(--red-95);
  color: var(--pink-46);
}
[data-bs-theme="dark"] .app-table thead th.ph-sum {
  background-color: rgba(245, 83, 218, .16);
  color: var(--pink-60);
}

/* 그룹 경계 — 일반 열 구분선보다 뚜렷하게 (라이트/다크 모두 본문 색 기준). */
.startup-activity-table th.grp-start,
.startup-activity-table td.grp-start {
  border-left: 2px solid rgba(var(--bs-emphasis-color-rgb), .55);
}
.startup-activity-table thead th {
  border-bottom-color: rgba(var(--bs-emphasis-color-rgb), .35);
}

/* 가로 스크롤 중에도 접근해야 하는 열만 고정 — No · 성명(좌), 작업(우). */
.startup-activity-table th.col-sticky-no,
.startup-activity-table td.col-sticky-no,
.startup-activity-table th.col-sticky-name,
.startup-activity-table td.col-sticky-name,
.startup-activity-table th.col-sticky-action,
.startup-activity-table td.col-sticky-action {
  position: sticky;
  z-index: 2;
}
.startup-activity-table th.col-sticky-no,
.startup-activity-table td.col-sticky-no { left: 0; }
.startup-activity-table th.col-sticky-name,
.startup-activity-table td.col-sticky-name { left: 56px; }
.startup-activity-table th.col-sticky-action,
.startup-activity-table td.col-sticky-action {
  right: 0;
  border-left: 2px solid rgba(var(--bs-emphasis-color-rgb), .55);
}
/* 고정 열은 아래로 지나가는 셀이 비쳐 보이지 않도록 불투명 배경이 필요하다. */
.startup-activity-table tbody td.col-sticky-no,
.startup-activity-table tbody td.col-sticky-name,
.startup-activity-table tbody td.col-sticky-action {
  background-color: var(--bs-body-bg);
}
.startup-activity-table.table-hover tbody tr:hover > td.col-sticky-no,
.startup-activity-table.table-hover tbody tr:hover > td.col-sticky-name,
.startup-activity-table.table-hover tbody tr:hover > td.col-sticky-action {
  background-color: var(--bs-tertiary-bg);
}

/* 미리보기 페이지 이미지 — modal 폭 안에서만 확장, 문서 배경은 항상 흰색. */
.preview-page-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
}

/* ─────────────────────────────────────────────────────────────
   Step 36-A — 팀 목록(일반/창업) 구성원 셀·헤더 두 줄 표시.
   - .team-header-two-line : 지정 header 를 정확히 두 줄로 (각 줄 내부 nowrap).
   - .member-two-line      : 구성원 이름/(괄호 접미사) 두 줄 (각 줄 내부 nowrap).
   - .member-leader-badge  : 팀장 badge 를 이름·괄호 접미사 아래 별도 줄에 중앙 표시.
   ───────────────────────────────────────────────────────────── */
.team-header-two-line {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
  vertical-align: middle;
}
.team-header-two-line > span { white-space: nowrap; }

.member-two-line,
.cell-two-line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  vertical-align: middle;
}
.member-two-line > span,
.cell-two-line > span { white-space: nowrap; }

.member-leader-badge {
  display: block;
  width: fit-content;
  margin: 2px auto 0;
}