/* =========================================================
   Wanted Design System — layout (sidebar, topbar, app-table)
   기존 layout.html 의 인라인 <style> 을 이관 + 토큰화.
   ========================================================= */

:root {
  --sidebar-width: 240px;
}

/* ===========================================================
   SIDEBAR
   - 라이트/다크 모두 cool-neutral-15 (Wanted 의 진한 사이드바)
   - 폰트 weight Pretendard 700 (브랜드), 500 (메뉴)
   =========================================================== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--cool-neutral-15);
  flex-shrink: 0;
  transition: width 0.18s ease;
  /* Step 22-LA(2차) — 사이드바 폰트 크기 변수화.
     하위 메뉴 = 기존 0.875rem(14px) 그대로, 상위 대분류 = 하위 + 정확히 2px.
     rem/px 모두 브라우저 확대에 비례하므로 125%/150% 확대에서도 크기 관계가 유지된다. */
  --sidebar-submenu-font-size: 0.875rem;
  --sidebar-group-font-size: calc(var(--sidebar-submenu-font-size) + 2px);
  /* Step 22-LA — 본문과 스크롤 분리: viewport 높이 고정 + 내부 스크롤.
     sticky(top:0) + align-self:flex-start 로 본문이 길어도 사이드바는 화면에 고정되고,
     메뉴가 화면보다 길면 사이드바 자체에 세로 스크롤이 생긴다 (배경도 100vh 까지만). */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-bs-theme="dark"] .sidebar {
  background: var(--cool-neutral-7);
}

.sidebar .brand {
  font-weight: 700;
  letter-spacing: var(--tracking-h, -0.006em);
  color: #fff;
  /* Step 20-D — 좌우 padding 축소(소마니또 로고가 사이드바 폭을 더 채우도록). */
  padding: 1rem 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar .brand .brand-wordmark {
  height: 22px;
  width: auto;
  display: inline-block;
}
/* Step 20-D(추가) — 소마니또 사이드바 브랜드 로고: 사이드바 가로폭(내부 padding 제외)에 맞게 크게. */
.sidebar .brand .sidebar-brand-logo {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
}
.sidebar .brand .brand-subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
  margin-left: 0.1rem;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: var(--sidebar-submenu-font-size); /* 0.875rem — 기존 값 유지 */
  font-weight: 500;
  letter-spacing: var(--tracking-body-sm, 0.019em);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  margin: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
}
.sidebar .nav-link.active {
  background: rgba(0, 102, 255, 0.22);
  color: #fff !important;
  font-weight: 700;
}
.sidebar .nav-link.disabled {
  opacity: 0.55;
}
.sidebar .text-muted {
  color: rgba(255, 255, 255, 0.4) !important;
}

.nav-section {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.38);
  padding: 1rem 1rem 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Step 22-LA — 대분류 아코디언 토글 (button 기반, Bootstrap collapse 사용).
   Step 22-LA(2차) — 가시성 개선: 상위 메뉴 텍스트를 하위 메뉴보다 2px 크게 +
   텍스트 앞 아이콘(고정 폭 20px)으로 텍스트 시작 위치를 일직선으로 정렬.
   chevron 은 기존처럼 오른쪽 끝 유지 (space-between).
   Step 22-LB 보완 — 상위 메뉴 텍스트/아이콘/chevron 을 흰색(#fff, opacity 1)으로
   (nav-section 의 회색 rgba 0.38 을 덮어씀 — 하위 메뉴 색은 변경하지 않음). */
.sidebar .nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: var(--sidebar-group-font-size); /* 하위 메뉴 + 2px */
  line-height: 1.3; /* 크기 증가에 따른 버튼 내 세로 정렬 최소 보정 */
  color: #fff; /* 텍스트/아이콘/chevron 모두 상속 — 흰색 */
  opacity: 1;
}
.sidebar .nav-group-toggle:hover,
.sidebar .nav-group-toggle:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08); /* 흰색 유지 + 배경으로 hover/focus 표시 */
  border-radius: 8px;
}

/* Step 22-LB 보완 — 상위 대분류 사이 세로 간격 확대 (하위 메뉴 간격은 유지).
   대시보드(단일 링크) 다음의 첫 대분류에도 동일하게 적용된다. */
.sidebar .nav-group {
  margin-top: 6px;
}
/* 펼쳐진 하위 메뉴와 다음 대분류 사이 시각적 구분. */
.sidebar .nav-group-items {
  padding-bottom: 4px;
}
/* 아이콘 + 텍스트 묶음 — 아이콘 고정 폭으로 8개 대분류 텍스트 시작 위치 통일. */
.nav-group-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-group-label > .bi {
  width: 20px;
  flex: 0 0 20px;
  margin-right: 8px;
  text-align: center;
}
.nav-group-chevron {
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}
/* 펼침 상태(= collapsed 클래스 없음)에서 chevron 을 위로 회전. */
.nav-group-toggle:not(.collapsed) .nav-group-chevron {
  transform: rotate(180deg);
}

/* Step 22-LA — 사이드바 숨기기 버튼 (소마니또 로고 위). */
.sidebar-hide-row {
  padding: 0.55rem 0.6rem 0;
}
.sidebar-hide-btn {
  width: 100%;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0.5rem;
  white-space: nowrap;
}
.sidebar-hide-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Step 22-LA — topbar "사이드바 보기" 문구: 숨김 상태에서만 노출. */
html:not(.sidebar-collapsed) .sidebar-show-label {
  display: none;
}

/* 사이드바 토글 접힘 */
html.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
}
#sidebarToggle {
  line-height: 1;
}

@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    z-index: 1040;
    left: 0;
    top: 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.25);
  }
  html.sidebar-collapsed .sidebar {
    box-shadow: none;
  }
}

/* ===========================================================
   TOPBAR — Wanted: 흰 표면 + 가벼운 라인
   =========================================================== */
.topbar {
  background: var(--bg-elevated-normal);
  border-bottom: 1px solid var(--line-solid-alternative);
  padding: 0.7rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background-color: var(--bg-transparent-normal);
}
[data-bs-theme="dark"] .topbar {
  border-bottom-color: var(--line-solid-alternative);
}

.main-content {
  min-height: calc(100vh - 56px);
  background: var(--bg-alternative);
}

/* ===========================================================
   FLASH MESSAGE
   =========================================================== */
.flash-box {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  min-width: 280px;
  /* Step 29-B — 좁은 화면에서 toast 가 화면 밖으로 벗어나지 않도록 상한 (우측 1rem 유지). */
  max-width: calc(100vw - 2rem);
}
.flash-box .alert {
  box-shadow: var(--shadow-popover);
  border-radius: 12px;
}

/* ===========================================================
   APP TABLE — CLAUDE.md 1.7.1 정렬 규칙 유지
   =========================================================== */
.app-table th {
  padding: 0.7rem 0.85rem;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  letter-spacing: var(--tracking-body-sm, 0.019em);
}
.app-table td {
  padding: 0.6rem 0.85rem;
  vertical-align: middle;
  text-align: center;
}

.app-table th.col-center,
.app-table td.col-center { text-align: center; }
.app-table th.col-money,
.app-table td.col-money  { text-align: center; }
.app-table th.col-msg    { text-align: center; }
.app-table td.col-msg {
  text-align: left;
  white-space: normal;
  word-break: break-word;
  max-width: 360px;
}
.app-table th.col-filename { text-align: center; }
.app-table td.col-filename {
  text-align: left;
  white-space: normal;
  word-break: break-word;
}
.app-table th.col-action,
.app-table td.col-action {
  text-align: center;
  white-space: nowrap;
  min-width: 96px;
}

/* Step 13-K — 정상이 아닌 모든 행(비정상/한도초과/기준없음/검토필요/미인정/오류) 공통 강조색.
   라이트/다크 모드 모두 #FF9999 로 통일한다. */
.app-table tr.row-exceeded > td {
  background-color: #FF9999;
}
.app-table.table-hover tr.row-exceeded:hover > td {
  background-color: #ff8585;
}
[data-bs-theme="dark"] .app-table tr.row-exceeded > td {
  background-color: #FF9999;
}
[data-bs-theme="dark"] .app-table.table-hover tr.row-exceeded:hover > td {
  background-color: #ff8585;
}

/* row-exceeded 안의 회색/약한 텍스트(text-muted, .small, .text-secondary)는
   #FF9999 배경에서 대비가 부족하다. 라이트/다크 모두 진한 색으로 강제 (다른 행 영향 없음). */
.app-table tr.row-exceeded > td,
.app-table tr.row-exceeded > td.text-muted,
.app-table tr.row-exceeded > td .text-muted,
.app-table tr.row-exceeded > td.small,
.app-table tr.row-exceeded > td .small,
.app-table tr.row-exceeded > td .text-secondary,
[data-bs-theme="dark"] .app-table tr.row-exceeded > td,
[data-bs-theme="dark"] .app-table tr.row-exceeded > td.text-muted,
[data-bs-theme="dark"] .app-table tr.row-exceeded > td .text-muted,
[data-bs-theme="dark"] .app-table tr.row-exceeded > td.small,
[data-bs-theme="dark"] .app-table tr.row-exceeded > td .small,
[data-bs-theme="dark"] .app-table tr.row-exceeded > td .text-secondary {
  color: #212529 !important;
}

/* 기준 없음 / 검토 필요 / 오류 — 노란색 강조 (검토 대상 표시). 라이트/다크 동일. */
.app-table tr.row-attention > td {
  background-color: #FFF3B0;
}
.app-table.table-hover tr.row-attention:hover > td {
  background-color: #FFEC85;
}
[data-bs-theme="dark"] .app-table tr.row-attention > td {
  background-color: #FFF3B0;
}
[data-bs-theme="dark"] .app-table.table-hover tr.row-attention:hover > td {
  background-color: #FFEC85;
}
.app-table tr.row-attention > td,
.app-table tr.row-attention > td.text-muted,
.app-table tr.row-attention > td .text-muted,
.app-table tr.row-attention > td.small,
.app-table tr.row-attention > td .small,
.app-table tr.row-attention > td .text-secondary,
[data-bs-theme="dark"] .app-table tr.row-attention > td,
[data-bs-theme="dark"] .app-table tr.row-attention > td.text-muted,
[data-bs-theme="dark"] .app-table tr.row-attention > td .text-muted,
[data-bs-theme="dark"] .app-table tr.row-attention > td.small,
[data-bs-theme="dark"] .app-table tr.row-attention > td .small,
[data-bs-theme="dark"] .app-table tr.row-attention > td .text-secondary {
  color: #212529 !important;
}

/* Step 22-LD — 참여횟수 0 셀(cell-zero): 다크모드에서도 핑크 배경 위 글자가 보이도록
   해당 셀에만 검정 글자를 강제한다 (전역 다크모드 글자색은 변경하지 않음).
   링크/버튼/hover 상태 포함 — row-exceeded 다크모드 처리와 동일 패턴. */
[data-bs-theme="dark"] .app-table td.cell-zero,
[data-bs-theme="dark"] .app-table td.cell-zero a,
[data-bs-theme="dark"] .app-table td.cell-zero .btn,
[data-bs-theme="dark"] .app-table td.cell-zero .text-muted,
[data-bs-theme="dark"] .app-table.table-hover tr:hover > td.cell-zero,
[data-bs-theme="dark"] .app-table.table-hover tr:hover > td.cell-zero a {
  color: #212529 !important;
}

/* Step 22-LE — 팀 상세(일반/창업) 공통 중앙 배치.
   max-width + 좌우 auto margin — 내부 텍스트 정렬은 건드리지 않는다.
   폼(mx-auto 인라인)과 같은 980px 기준선을 공유하고, 좁은 화면에서는 자연스럽게 폭 100%. */
.detail-centered {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* Step 32-B — 팀 상세 전용 폭 (전역 .detail-centered 980px 는 그대로 두고
   팀 상세 화면의 카드/제목 줄만 함께 넓혀 기본 정보 6개 항목이 균형 있게 들어가게 한다). */
.detail-centered.team-detail-wide {
  max-width: 1200px;
}

/* Step 32-A/B — 팀 상세 "기본 정보" 배치.
   상단 한 줄: 센터명 | 기수 | 팀 구분 | 팀 이름 | 기술분류(대) | 기술분류(중)
   하단 전용 줄: 프로젝트 이름 label + 값(카드 오른쪽 끝까지 확장).

   Step 32-B — 폭 배분 재설계: 팀 이름 하나가 minmax(0,1fr) 로 잔여 공간을 모두 흡수해
   기술분류가 우측 끝으로 몰리던 구조를 제거하고, 14-column 비율 grid + 넓힌 column-gap
   으로 6개 항목을 카드 폭 전체에 균형 배치한다 (absolute/JS 계산 없음). */
.team-basic-grid {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 1.8vw, 2rem);
  row-gap: 1rem;
  align-items: start;
}
/* 비율 기반 span — 합계 14 columns (2 + 1 + 2 + 3 + 2 + 4). */
.team-basic-grid > * { min-width: 0; }
.team-basic-grid .tb-col-center { grid-column: span 2; }
.team-basic-grid .tb-col-cohort { grid-column: span 1; }
.team-basic-grid .tb-col-type   { grid-column: span 2; }
.team-basic-grid .tb-col-name   { grid-column: span 3; }
.team-basic-grid .tb-col-major  { grid-column: span 2; }
.team-basic-grid .tb-col-middle { grid-column: span 4; }
/* 기술분류 값은 글자 중간에서 쪼개지지 않는다
   (가장 긴 SDx(Software-DefinedEveryThing) 도 한 줄 — 축약/말줄임 없음). */
.team-basic-grid .team-basic-tech {
  white-space: nowrap;
  word-break: keep-all;
}
/* 팀 이름이 길면 자기 영역 안에서 자연스럽게 줄바꿈한다 (다른 항목을 밀어내지 않는다). */
.team-basic-grid .team-basic-name > div:last-child { word-break: break-word; }
/* 프로젝트 이름 — 하단 전용 줄(전체 column span), 값이 카드 오른쪽 끝까지 확장. */
.team-basic-grid .team-basic-project {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
}
.team-basic-grid .team-basic-project-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.team-basic-grid .team-basic-project-value {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
/* 좁은 화면 — 의미 순서를 유지한 채 적층. 프로젝트 이름은 계속 전용 줄(전체 폭).
   1200px 미만에서는 14-column 한 줄로는 기술분류(중) 최장값을 담을 수 없어 2열로 재배치한다. */
@media (max-width: 1199.98px) {
  .team-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-basic-grid .tb-col-center,
  .team-basic-grid .tb-col-cohort,
  .team-basic-grid .tb-col-type,
  .team-basic-grid .tb-col-name,
  .team-basic-grid .tb-col-major,
  .team-basic-grid .tb-col-middle { grid-column: span 1; }
}
@media (max-width: 575.98px) {
  .team-basic-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Step 22-LF — 상세 화면 section 제목/건수 확대 공통 클래스 (연수생 상세의 inline 정의와 동일 값 —
   팀 상세(일반/창업)/멘토 상세 등에서 재사용). 제목 17px = 기존 .small 14px + 3px, 건수 15px = 12px + 3px. */
.section-title-lg { font-size: 17px !important; }
.section-count-lg { font-size: 15px !important; }

/* Step 22-LF — badge/아이콘 +3px 확대 (팀 구분/팀장/경고 횟수 badge 전용 — 전역 badge 는 불변).
   badge 기본 폰트는 부모의 0.75em 이므로 calc 로 정확히 +3px 만 키운다. */
.badge-plus3 { font-size: calc(0.75em + 3px) !important; }

/* ── Step 25 3차 — 지정 안내/필터/건수/modal 텍스트 +3px (body 전역 확대 아님) ──
   페이지 제목(h5)/표 본문/badge/pagination/아이콘/검색 입력값은 대상이 아니다.
   절대 px 로 지정해 중첩(이중 +3px)이 발생하지 않는다. */
/* 1) 각 메뉴 기능 설명(페이지 부제 — h5 제목 바로 아래 small) 14px → 17px */
.main-content h5.fw-bold + small.text-muted { font-size: 17px; }
/* 2) 검색 필터 등 form label(small 계열) 14px → 17px */
.main-content .form-label.small { font-size: 17px; }
/* 3) 검색결과/전체 건수 안내(card-header 의 fw-semibold small) 14px → 17px */
.main-content .card-header > .fw-semibold.small { font-size: 17px; }
/* 4) 개별 지정 안내문(잔여 객실 설명/지점 안내사항 설명 등 14px 기반) → 17px */
.ui-help-plus3 { font-size: 17px !important; }

/* 지정 modal 전체 visible text +3px — .modal-content 1곳에만 부여 (wrapper 중첩 금지).
   상속 텍스트(제목·label·본문) 16→19px, .small 류 14→17px, 버튼도 +3px. 아이콘은 불변. */
.modal-plus3 { font-size: 19px; }
.modal-plus3 .small, .modal-plus3 small,
.modal-plus3 .form-text, .modal-plus3 .invalid-feedback { font-size: 17px; }
.modal-plus3 .btn { font-size: 19px; }
.modal-plus3 .btn-sm { font-size: 17px; }
.modal-plus3 h5.modal-title { font-size: 23px; }
.modal-plus3 h6.modal-title { font-size: 19px; }

/* 페이지 단위 +3px (테스트 데이터 초기화 화면 전용 — visible text 전체). */
.page-plus3 { font-size: 19px; }
.page-plus3 .small, .page-plus3 small { font-size: 17px; }
.page-plus3 .btn { font-size: 19px; }
.page-plus3 .btn-sm { font-size: 17px; }
.page-plus3 h5, .page-plus3 .h5 { font-size: 23px; }
.page-plus3 h6, .page-plus3 .h6 { font-size: 19px; }

/* ── Step 28-A — 활동보고(멘토링/엑스퍼트) 화면 가독성 +3px ──
   전역 body font-size(14px)·Bootstrap .badge/.table/.alert 자체는 변경하지 않는다.
   지정 영역에만 부여하는 semantic class 이며, 값은 각 요소의 실제 computed 크기 + 3px 이다.
   (측정 기준 — 안내문 .alert…small 내부 12.25px, 그 안의 중첩 .small 10.72px,
    badge 0.75em=10.5px, 요약 카드 제목 14px, 최근 업로드 카운트/헤더 14px)
   절대 px 로 지정해 중첩(이중 +3px)이 발생하지 않는다. */

/* 1) 안내문 영역 (개설목록 매칭 안내 / 검증상태 안내 / 계산 안내 / 최종 결과 안내 /
      필수 컬럼 안내) — 컨테이너에 1회만 부여하고 제목·본문·legend 가 상속받는다. */
.report-guide-lg { font-size: 15.25px; }              /* 12.25px + 3px */
.report-guide-lg .small,
.report-guide-lg small { font-size: 13.72px; }        /* 10.72px + 3px (중첩 .small) */
.report-guide-lg .badge { font-size: calc(0.75em + 3px); }
.report-guide-lg ul { line-height: 1.65; }            /* 확대 후 줄 겹침 방지 */

/* 2) 결과 요약 카드 (출장/멘토링/활동 수당 요약) — 제목과 본문 역할별. */
.report-summary-title-lg { font-size: 17px !important; }    /* 14px + 3px */
.report-summary-subtitle-lg { font-size: 15.25px !important; } /* 12.25px + 3px */
.report-summary-body-lg { font-size: 15.25px !important; }  /* 12.25px + 3px */

/* 3) 상태/구분 badge — Bootstrap badge 기본 0.75em 기준 정확히 +3px.
      아이콘과 텍스트가 세로 중앙에 오도록 line-height/정렬을 함께 보정한다. */
.report-status-badge-lg {
  font-size: calc(0.75em + 3px) !important;           /* 10.5px + 3px */
  line-height: 1.25;
  vertical-align: middle;
}
.report-status-badge-lg > .bi { vertical-align: -0.06em; }

/* 4) 최근 업로드 영역 — 결과/상태 아이콘 badge, 전체·정상·경고·오류 카운트, 업로드 일시. */
.recent-upload-metric-lg { font-size: 17px !important; }    /* 14px + 3px */
.recent-upload-datetime-lg { font-size: 15.25px !important; } /* 12.25px + 3px */

/* 5) 확대 후에도 메시지 열이 좁아지지 않도록 폭 우선순위를 유지한다
      (구분 열 제거분을 메시지가 흡수 — 말줄임 없이 줄바꿈). */
.app-table td.col-msg-wide {
  text-align: left;
  white-space: normal;
  word-break: break-word;
  max-width: none;
  min-width: 320px;
}
.app-table th.col-msg-wide { text-align: center; min-width: 320px; }
/* 행번호/승인값/상태처럼 badge·짧은 값만 들어가는 열은 최소 폭으로 축소. */
.app-table th.col-tight,
.app-table td.col-tight { width: 1%; white-space: nowrap; }

/* Step 22-LF 3차 — 연수생 성별 표시 (여성 전용 핑크 — danger 빨강 대체 금지).
   목록은 아이콘 단독(.gender-female-icon), 상세 제목은 badge(.gender-female-badge)로 사용. */
.gender-female-icon { color: #d63384; }
[data-bs-theme="dark"] .gender-female-icon { color: #ed7fb4; }
.badge.gender-female-badge { background-color: rgba(214, 51, 132, 0.12); color: #d63384; }
[data-bs-theme="dark"] .badge.gender-female-badge { background-color: rgba(214, 51, 132, 0.28); color: #ed7fb4; }

/* ===========================================================
   PAGE CONTAINERS — 컨텐츠는 넉넉한 여백 + 흰 카드 위
   =========================================================== */
.container,
.container-fluid {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* 페이지 타이틀 — 본문 첫 헤더 */
.page-title {
  font: var(--type-h2);
  letter-spacing: var(--tracking-h);
  color: var(--label-normal);
  margin-bottom: 1.25rem;
}

/* Step 23 최종 수정 / Step 28-A — 상단 공통 bar 전역 북마크 10x1 (SUPER_ADMIN 설정, 전체 사용자 공통).
   Step 24 — 위치를 테마 버튼 왼쪽(우측 그룹 첫 요소)으로 이동, position 오름차순 좌→우 표시,
   폰트 +2px(0.8rem→0.925rem). 좁은 화면에서는 strip 내부만 가로 스크롤 (body 가로 스크롤
   금지) — 테마/권한/로그아웃은 flex-shrink-0 으로 항상 유지된다. */
.topbar-bookmarks {
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  white-space: nowrap;
  gap: .25rem;
  scrollbar-width: thin;
}
.topbar-bookmark-link {
  display: inline-flex;
  align-items: center;
  max-width: 170px;
  padding: .2rem .6rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 999px;
  font-size: .925rem; /* 0.8rem(12.8px) + 2px */
  color: inherit;
  text-decoration: none;
  background: var(--bs-body-bg, #fff);
  flex: 0 0 auto;
}
.topbar-bookmark-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-bookmark-link:hover {
  border-color: var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
}

/* ── Step 28-C — 연수생 목록 '출력'(과정 참가 확인서) 버튼 ──
   상세/수정 버튼과 색이 겹쳐 다크테마에서 구분되지 않던 문제를 해결한다.
   프로젝트 wanted-components.css 의 .btn-success 는 테마 토큰(--status-positive)을 쓰고
   다크에서 background-color 가 커스텀 속성을 따라오지 않는 케이스가 있어, 이 버튼은
   커스텀 속성 대신 색을 직접 지정한다. 라이트·다크 모두 같은 녹색 #198754 를 쓰는데,
   이 녹색은 흰 글자 대비가 4.53:1 로 WCAG AA(4.5:1)를 만족하고 어두운 배경에서도 선명하다
   (더 밝은 녹색은 흰 글자 대비가 AA 미만이라 채택하지 않는다). .btn-certificate 에만 적용. */
.btn-certificate {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
.btn-certificate:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}
.btn-certificate:active,
.btn-certificate:focus:active {
  color: #fff;
  background-color: #146c43;
  border-color: #13653f;
}
.btn-certificate:disabled,
.btn-certificate.disabled {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
  opacity: .65;
}
.btn-certificate:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .5);
}