/* ===================================
   Sub Page Layout
   의존: common.css (디자인 시스템 변수, 리셋)

   서브페이지 공통 레이아웃:
   - 페이지 히어로 (타이틀 + 브레드크럼)
   - 2-컬럼 (LNB + Content)
   - 반응형 (1199px 이하 1-컬럼)
   =================================== */

/* viewport scrollbar 자리 항상 확보 — 페이지 길이에 따른 viewport width 변동 방지
   (페이지마다 세로 스크롤바 유무 차이로 콘텐츠 영역이 17px 들쭉날쭉 보이는 현상 방지) */
html {
  overflow-y: scroll;
}

/* ===================================
   Sub Page Design Tokens
   =================================== */
:root {
  /* Layout */
  --sub-container-max: 1440px;
  --sub-padding-desktop: 40px;
  --sub-padding-tablet: 32px;
  --sub-padding-mobile: 24px;

  /* LNB */
  --lnb-width: 260px;
  --lnb-gap: 48px;

  /* Page Hero */
  --hero-bg: var(--color-primary-900);
  --hero-text: var(--color-white);
  --hero-padding-y: 64px;

  /* Breadcrumb */
  --crumb-text: rgba(255, 255, 255, 0.7);
  --crumb-active: var(--color-white);
  --crumb-divider: rgba(255, 255, 255, 0.4);
}

/* ===================================
   Page Hero (타이틀 + 브레드크럼)
   =================================== */
.page-hero {
  background-color: var(--hero-bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(15, 134, 202, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(131, 161, 202, 0.1) 0%, transparent 50%);
  padding: var(--hero-padding-y) 0;
  position: relative;
  overflow: hidden;
}

/* Page Hero: 배경 이미지 변형 */
.page-hero--image {
  background-image: none;
  background-color: transparent;
}

.page-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.page-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(1, 29, 77, 0.88) 0%,
    rgba(3, 54, 140, 0.75) 50%,
    rgba(15, 134, 202, 0.62) 100%
    /*
    rgba(1, 29, 77, 0.78) 0%,
    rgba(3, 54, 140, 0.62) 50%,
    rgba(15, 134, 202, 0.48) 100%
    */
  );
  z-index: 1;
}

.page-hero--image .container {
  position: relative;
  z-index: 2;
}

.page-hero--image .page-hero__title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.page-hero--image .page-hero__desc {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent
  );
}

.page-hero .container {
  padding: 0 var(--sub-padding-desktop);
}

.page-hero__title {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--hero-text);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
}

.page-hero__desc {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
}

/* ===================================
   Breadcrumb
   =================================== */
.breadcrumb {
  padding: var(--space-4) 0 0;
}

.breadcrumb .container {
  padding: 0 var(--sub-padding-desktop);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-gray-700);
}

.breadcrumb-item a {
  display: flex;
  align-items: center;
  color: var(--color-gray-700);
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--color-primary-900);
}

.breadcrumb-item.active {
  color: var(--color-gray-900);
  font-weight: var(--fw-medium);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-gray-400);
  border-bottom: 1.5px solid var(--color-gray-400);
  transform: rotate(-45deg);
  margin-right: var(--space-1);
}

.breadcrumb-item .icon {
  width: 16px;
  height: 16px;
  color: var(--color-gray-700);
}

/* ===================================
   Sub Page Body (LNB + Content)
   =================================== */
.sub-page {
  flex: 1;
  padding: var(--space-12) 0 var(--space-20);
}

.sub-page .container {
  padding: 0 var(--sub-padding-desktop);
  display: flex;
  gap: var(--lnb-gap);
  align-items: flex-start;
}

/* ===================================
   LNB Card Accordion (KBSI Style)
   =================================== */
.lnb {
  width: var(--lnb-width);
  flex-shrink: 0;
  position: sticky;
  top: 24px;
}

/* LNB Card Container */
.lnb-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.lnb-section + .lnb-section {
  margin-top: var(--space-2);
}

/* LNB Header (Button) */
.lnb-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  min-height: 46px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-align: left;
  color: var(--color-text-primary);
  font-family: 'SUIT', 'Malgun Gothic', '맑은 고딕', sans-serif;
  letter-spacing: var(--ls);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.lnb-header:hover {
  border-color: var(--color-gray-400);
}

.lnb-header:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-focus, rgba(3, 54, 140, 0.35));
}

/* 선택된 헤더 (파란 배경) */
.lnb-header.is-selected {
  background: var(--color-primary-900);
  color: var(--color-white);
  border-color: transparent;
}

.lnb-title {
  flex: 1;
}

.lnb-icon {
  font-size: var(--fs-block);
  font-weight: var(--fw-regular);
  line-height: 1;
}

/* LNB Panel (Accordion Content) */
.lnb-panel {
  margin-top: var(--space-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

/* LNB Items (Links) */
.lnb-item {
  display: block;
  padding: var(--space-2) 10px;
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-gray-700);
  text-decoration: none;
  letter-spacing: var(--ls);
  transition: all 0.2s ease;
}

.lnb-item:hover {
  text-decoration: underline;
  color: var(--color-text-primary);
}

.lnb-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-focus, rgba(3, 54, 140, 0.35));
}

/* 현재 페이지 (좌측 강조선 + 배경) */
.lnb-item.is-active {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  position: relative;
  background: rgba(11, 31, 58, 0.06);
}

.lnb-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-900);
}

/* LNB 히어로 (컬러 배경 + 타이틀) */
.lnb-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--space-5);
  margin-bottom: var(--space-2);
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 100%);
  height: 180px;
  display: flex;
  align-items: flex-end;
}

.lnb-hero::before {
  content: 'SNUH';
  position: absolute;
  right: -4px;
  top: -18px;
  font-family: 'GmarketSans', var(--font-family);
  font-size: var(--fs-mega);
  font-weight: var(--fw-extrabold);
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: var(--ls);
}

.lnb-hero__title {
  margin: 0;
  font-family: 'GmarketSans', var(--font-family);
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  position: relative;
  z-index: 1;
  line-height: 1;
}

/* LNB 타이틀 섹션 (site-lnb.js 동적 렌더링용) */
.lnb-section--title {
  margin-bottom: var(--space-1);
}

.lnb-header--title {
  background: var(--color-primary-900);
  color: var(--color-white);
  border-color: transparent;
  cursor: default;
  font-size: var(--fs-block);
  font-weight: var(--fw-semibold);
}

.lnb-header--title:hover {
  border-color: transparent;
}

/* LNB 단일 링크 섹션 (children 없는 항목) — .lnb-header와 박스 사양 완전 동일하게 */
.lnb-header--link {
  text-decoration: none;
  color: var(--color-text-primary);
  /* a 태그 inline 기본 보정 — .lnb-header 사양과 일치 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  min-height: 46px;
  box-sizing: border-box;
  line-height: normal; /* 부모 1.6 상속으로 박스가 커지는 문제 차단 (button .lnb-header와 일치) */
}

.lnb-header--link:hover {
  border-color: var(--color-gray-400);
}

/* 현재 페이지일 때 — 아코디언 is-selected와 동일 시각 (font-weight도 동일하게 fw-medium 유지) */
.lnb-header--link.is-active {
  background: var(--color-primary-900);
  color: var(--color-white);
  border-color: transparent;
}

/* ===================================
   Content Area
   =================================== */
.content {
  flex: 1;
  min-width: 0;
}

/* ===================================
   Page Header, Icon Button, Breadcrumb
   → components.css로 이동됨 (범용 컴포넌트)
   =================================== */

/* ===================================
   Hero Visual
   =================================== */
.hero-visual {
  margin-bottom: var(--space-6);
}

.hero-visual__container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 4;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, 
    rgba(15, 134, 202, 0.2) 0%, 
    rgba(131, 161, 202, 0.15) 50%,
    rgba(3, 54, 140, 0.2) 100%
  );
}

.hero-visual__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===================================
   Content Body
   =================================== */
.content-body {
  margin-bottom: var(--gap-layout-section-compact); /* var(--space-16) */
}

.content-body__title {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.content-body__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-gray-700);
  margin-bottom: var(--space-4);
}

.content-body__text:last-child {
  margin-bottom: 0;
}

/* ============================================================
   이미지 안전판 — figure wrap 없는 case에도 컬럼 폭 안에 수렴
   (P9-2, 이전 dear-common.css에 정의되어 있던 것을 공용으로 격상)
   ============================================================ */
.tabs__panel img,
.content-block img {
  max-width: 100%;
  height: auto;
}

/* 탭 패널 안 다중 content-block 사이 간격
   (P9-3, 이전 dear-common.css에 정의되어 있던 것을 공용으로 격상) */
.tabs__panel > .content-block + .content-block {
  margin-top: var(--space-10);
}

/* ============================================================
   content-body__list — 정의 목록 줄글(<li><strong>라벨</strong>: 설명) 가독성
   라벨이 한 줄, 설명이 다음 줄로 분리 + li 사이 16px 간격
   (이전 dear-common.css에 정의되어 있던 것을 공용으로 격상)
   ============================================================ */
.content-body__list > li {
  margin-bottom: var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  color: var(--color-gray-700);
}

.content-body__list > li:last-child {
  margin-bottom: 0;
}

/* li 시작 첫 strong을 라벨처럼 별도 줄로 분리 */
.content-body__list > li > strong:first-child {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-primary-900);
}

/* ============================================================
   content-body__sublist — 중첩 list (각 호 항목 들여쓰기·시각 구분)
   상위 li 안의 sub-list가 자연스럽게 인덴트 + 본문 톤으로 약화
   ============================================================ */
.content-body__sublist {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}
.content-body__sublist > li {
  margin-bottom: var(--space-1);
  line-height: 1.7;
  color: var(--color-gray-700);
}
.content-body__sublist > li:last-child {
  margin-bottom: 0;
}

/* content-body__section (h3 소제목 단위 묶음) 사이 표준 간격 — gap-layout-h3-top 토큰 사용 */
.content-body__section + .content-body__section {
  margin-top: var(--gap-layout-h3-top); /* var(--space-10) */
}

/* 검색·필터(.board-search) → 다음 콘텐츠 사이 표준 간격 — BRI 공통 */
.board-search + .content-block,
.board-search + .content-body,
.board-search + .table-wrap,
.board-search + .board-list,
.board-search + .board-list__filter {
  margin-top: var(--gap-form-divider); /* var(--space-8) */
}

/* 콘텐츠 헤더 (제목 + 인쇄) */
.content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  margin-bottom: var(--gap-layout-page-header); /* var(--space-10) */
  border-bottom: 2px solid var(--color-gray-900);
}

.content__title {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.content__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: all 0.2s ease;
}

.btn-print:hover {
  color: var(--color-primary-900);
  border-color: var(--color-primary-900);
}

.btn-print .icon {
  width: 16px;
  height: 16px;
}

/* ===================================
   Content Sections
   =================================== */
.content-block {
  margin-bottom: var(--gap-layout-section-compact); /* var(--space-16) (h2 대섹션 사이) */
}

.content-block:last-child {
  margin-bottom: 0;
}

.content-block__title {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  margin-bottom: var(--gap-layout-h2-body); /* var(--space-5) 표준 */
  padding-left: var(--space-4);
  position: relative;
}

.content-block__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  background-color: var(--color-primary-700);
  border-radius: var(--radius-sm);
}

.content-block__text {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.8;
  color: var(--color-gray-700);
  word-break: var(--word-break-base);
  margin-bottom: var(--space-2); /* var(--space-2) — 본문 → 본문 */
}

.content-block__text:last-child {
  margin-bottom: 0;
}

.content-block__text + .content-block__text {
  margin-top: 0; /* margin-bottom으로 처리되므로 중복 방지 */
}

/* 보조 안내문(※ form-message--help) — 직전 콘텐츠에 좁게 붙이고, 아래 간격은 표준 유지 */
.content-block__text:has(> .form-message--help),
.content-block__text:has(> .form-message) {
  margin-top: calc(var(--space-3) * -1); /* -12px — 위 텍스트 line-height 일부 흡수 */
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-gray-600);
}

/* form-message span 자체 margin-top 제거 (.form-message 기본 2px 상쇄) */
.content-block__text > .form-message--help,
.content-block__text > .form-message {
  margin-top: 0;
}

/* 본문 → highlight 간격 */
.content-block__text + .content-block__highlight {
  margin-top: var(--space-5);
}

/* 본문 → notice-box(보조 텍스트 박스) — 본문에 가깝게 붙임 */
.content-block__text + .notice-box,
.content-body__text + .notice-box {
  margin-top: var(--gap-layout-notice-body); /* var(--space-2) */
}

/* 표/info-cards → notice-box (비고·안내문) */
.table + .notice-box,
.table-wrap + .notice-box {
  margin-top: var(--gap-layout-h2-body); /* var(--space-5) */
}

/* info-cards → 표 (카드+표 복합 섹션) */
.info-cards + .table,
.info-cards + .table-wrap {
  margin-top: var(--gap-layout-h2-body); /* var(--space-5) */
}

/* 본문 보조 ※ 안내문 — gray-600, fs-small */
.content-block__text--note {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
}

/* h3 소제목 → 모든 콘텐츠 표준 간격 12px (gap-layout-h3-body 토큰) */
.content-body__title + *:not(:empty) {
  margin-top: var(--gap-layout-h3-body); /* var(--space-3) */
}
/* h3 자체 margin-bottom 무효화 (다음 형제 margin-top으로 통일) */
.content-body__title {
  margin-bottom: 0;
}
/* h3 → 다음 h3 / hr는 동일 (이미 12px) */

/* 본문 p → 탭 nav 표준 간격 — 12px */
.content-block__text + .tabs,
.content-body__text + .tabs {
  margin-top: var(--gap-layout-h3-body); /* var(--space-3) */
}

/* 본문 p → 블록 컴포넌트 (아코디언/번호카드/프로세스/표/카드/그리드 등) — 12px (본문 후속 컴포넌트) */
.content-block__text + .accordion,
.content-body__text + .accordion,
.content-block__text + .numbered-list,
.content-body__text + .numbered-list,
.content-block__text + .process-steps,
.content-body__text + .process-steps,
.content-block__text + .terms-box,
.content-body__text + .terms-box,
.content-block__text + .table-wrap,
.content-body__text + .table-wrap,
.content-block__text + .icon-link-card-grid,
.content-body__text + .icon-link-card-grid,
.content-block__text + .card,
.content-body__text + .card,
.content-block__text + .dear-facility-list,
.content-body__text + .dear-facility-list {
  margin-top: var(--gap-layout-h3-body); /* var(--space-3) */
}

/* 탭 패널 첫 자식 margin-top 강제 0 (탭 → 콘텐츠는 panel padding만 적용) */
.tabs__panel > :first-child {
  margin-top: 0;
}

/* 아코디언/번호카드/탭/약관박스 → 다음 h3/section — 40px 표준 */
.accordion + .content-body__title,
.accordion + .content-body__section,
.numbered-list + .content-body__title,
.numbered-list + .content-body__section,
.process-steps + .content-body__title,
.process-steps + .content-body__section,
.terms-box + .content-body__title,
.terms-box + .content-body__section,
.tabs + .content-body__title,
.tabs + .content-body__section,
.dear-facility-list + .content-body__title,
.dear-facility-list + .content-body__section {
  margin-top: var(--gap-layout-h3-top); /* var(--space-10) */
}

/* 본문 p → 버튼/btn-group — 20px (h2-body 동등) */
.content-block__text + .btn-group,
.content-body__text + .btn-group,
.content-block__text + .btn,
.content-body__text + .btn {
  margin-top: var(--gap-layout-h2-body); /* var(--space-5) */
}

/* 테이블·카드·노티스박스·섹션래퍼 → 버튼/btn-group — 20px */
table + .btn-group,
.table-wrap + .btn-group,
.info-cards + .btn-group,
.notice-box + .btn-group,
.content-body__section + .btn-group,
ul + .btn-group,
ol + .btn-group,
table + .btn,
.table-wrap + .btn,
.info-cards + .btn,
.notice-box + .btn,
.content-body__section + .btn,
ul + .btn,
ol + .btn {
  margin-top: var(--gap-layout-h2-body); /* var(--space-5) */
}

/* 테이블 → 카드(인라인 배치) — 20px */
table + .info-cards,
.table-wrap + .info-cards {
  margin-top: var(--gap-layout-h2-body); /* var(--space-5) */
}

/* 버튼/btn-group → 이미지/figure — 20px */
.btn-group + .content-block__image,
.btn-group + figure,
.btn + .content-block__image,
.btn + figure {
  margin-top: var(--gap-layout-h2-body); /* var(--space-5) */
}

/* 본문/표/리스트/버튼그룹/카드 → h3 소제목 앞 간격 */
.content-block__text + .content-body__title,
.content-body__text + .content-body__title,
.table-wrap + .content-body__title,
table + .content-body__title,
ul + .content-body__title,
ol + .content-body__title,
dl + .content-body__title,
.btn-group + .content-body__title,
.btn + .content-body__title,
.card + .content-body__title,
.bio-chart + .content-body__title,
.notice-box + .content-body__title,
.info-cards + .content-body__title,
.icon-link-card-grid + .content-body__title,
.mission-card + .content-body__title,
.mv-values__grid + .content-body__title,
/* h3가 .content-body__section 안에 감싸진 경우도 동일 간격 */
.content-block__text + .content-body__section,
.content-body__text + .content-body__section,
.table-wrap + .content-body__section,
table + .content-body__section,
ul + .content-body__section,
ol + .content-body__section,
dl + .content-body__section,
.btn-group + .content-body__section,
.btn + .content-body__section,
.card + .content-body__section,
.bio-chart + .content-body__section,
.notice-box + .content-body__section,
.info-cards + .content-body__section,
.icon-link-card-grid + .content-body__section,
.mission-card + .content-body__section {
  margin-top: var(--space-12); /* var(--space-12) — 콘텐츠 뒤 h3 호흡 */
}

/* mission-card 인용 박스 다음 콘텐츠 간격 — 20px */
.mission-card + .info-cards,
.mission-card + .icon-link-card-grid,
.mission-card + table,
.mission-card + .table-wrap {
  margin-top: var(--gap-layout-h2-body); /* var(--space-5) */
}

/* 강조 텍스트 박스 */
.content-block__highlight {
  background-color: var(--color-gray-100);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-3) 0;
  border-radius: var(--radius-md);
}

.content-block__highlight p {
  font-size: var(--fs-block);
  font-weight: var(--fw-semibold);
  line-height: 1.7;
  color: var(--color-gray-800);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.content-block__highlight p::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary-700);
  border-radius: var(--radius-full);
}

.content-block__highlight em {
  color: var(--color-primary-700);
  font-style: normal;
  margin: 0 -1px;
}

/* 이미지 영역 — figure 자체가 옅은 회색 박스(radius 8)로 고정.
   이미지는 max-width 100%·자연 크기로 가운데 정렬되며,
   콘텐츠 폭보다 작은 이미지는 둘레가 자연스럽게 회색 배경으로 채워짐. */
/* 기본: outline 스타일 — 흰 배경 + 1px 테두리 (흰 배경 사진/도면/인증서에 적합) */
.content-block__image {
  margin: var(--space-5) 0;
  padding: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  text-align: center;
}

.content-block__image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.content-block__image figcaption {
  margin-top: var(--space-4);
  margin-bottom: -8px;
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  text-align: center;
}

/* 모디파이어: frame — 회색 배경 (스크린샷·다이어그램·자체 배경 있는 이미지에 적합) */
.content-block__image--frame {
  padding: var(--space-4);
  background-color: var(--color-primary-50);
  border: none;
}

/* 모디파이어: sm — 최대 폭 720px 캡 (좁은 다이어그램/인증서 등) */
.content-block__image--sm {
  padding: var(--space-4);
}

.content-block__image--sm img {
  max-width: 720px;
  margin: 0 auto;
  display: block;
}

/* 모디파이어: padded — SVG 다이어그램·도면 등 선 그래픽에 여백 추가 */
.content-block__image--padded {
  padding: var(--space-4);
}

/* 모디파이어: full — 컨테이너 배경은 전체 너비 채움, 이미지는 비율 유지하며 늘어남
   (지도·흐름도·조직도 등) */
.content-block__image--full {
  padding: 0;
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.content-block__image--full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* 모디파이어: cover — 전체 너비·빈틈없이 채우기 (장비·건물 사진 등 크롭해도 되는 이미지) */
.content-block__image--cover {
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.content-block__image--cover img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

/* Process Steps 핵심 스타일 → components.css로 이전 (2026-05-28) */

/* ===================================
   Info Cards (기능 소개 카드)
   =================================== */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* 4컬럼 변형 (4개 항목용) */
.info-cards--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* 2컬럼 변형 (2개 항목용) */
.info-cards--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* 자식 수에 따른 자동 컬럼 (HTML에 modifier 안 붙여도 fill) */
.info-cards:has(> .info-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.info-cards:has(> .info-card:nth-child(4):last-child) {
  grid-template-columns: repeat(4, 1fr);
}
.info-cards:has(> .info-card:only-child) {
  grid-template-columns: 1fr;
}

.info-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 28px var(--space-6);
  text-align: center;
  transition: all 0.25s ease;
}

.info-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-md);
}

.info-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.info-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-700);
  border-radius: 50%;
  color: var(--color-white);
}

.info-card__icon .icon {
  width: 24px;
  height: 24px;
}

.info-card__title {
  font-size: var(--fs-title-md);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
}

/* info-card 내 뱃지 — 직책/유형 표시용 (title 아래 보조 정보) */
.info-card .badge {
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.info-card__desc {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 리스트 변형 — 아이콘 없이 ul 목록을 desc 영역에 사용할 때
   아이콘이 있는 경우 margin auto로 자동 중앙 배치 유지 */
.info-card--list {
  text-align: left;
}
.info-card--list .info-card__icon {
  margin-left: auto;
  margin-right: auto;
}
.info-card--list .info-card__title {
  margin-bottom: var(--gap-card-icon-text);
}
.info-card--list .info-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-body);
  color: var(--color-gray-700);
  line-height: 1.7;
}
.info-card--list .info-card__list > li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--gap-card-title-desc);
}
.info-card--list .info-card__list > li:last-child {
  margin-bottom: 0;
}
.info-card--list .info-card__list > li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-primary-700);
  font-weight: var(--fw-bold);
}

/* 가로 레이아웃 변형 — 아이콘 좌측, 텍스트 우측 (단일 카드용) */
.info-card--horizontal {
  display: flex;
  align-items: center;
  text-align: left;
  gap: var(--space-5);
}
.info-card--horizontal .info-card__icon {
  margin: 0;
  flex-shrink: 0;
}
.info-card--horizontal .info-card__title {
  margin-bottom: var(--space-1);
}

/* ===================================
   Stat Card — 핵심 지표 카드 (큰 숫자 + 라벨 + 상세)
   info-card에 .stat-card 클래스 추가해 사용:
   <div class="info-card stat-card">
     <p class="stat-card__label">라벨</p>
     <h3 class="stat-card__value">10<span class="stat-card__unit">건</span></h3>
     <p class="stat-card__detail">상세 설명</p>
   </div>
   =================================== */
.stat-card {
  text-align: left;
  padding: 28px var(--space-8);
}

.stat-card__label {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
}

.stat-card__label small {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-gray-500);
  margin-left: var(--space-1);
}

.stat-card__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-300);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary-900);
  line-height: 1;
  letter-spacing: var(--ls);
}

.stat-card__unit {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
}

.stat-card__detail {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-gray-500);
  line-height: 1.5;
}

/* ===================================
   Key Numbers (숫자 정보)
   =================================== */
.key-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin: var(--space-8) 0;
}

.key-number {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
}

.key-number__value {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary-900);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.key-number__unit {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.key-number__label {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  margin-top: var(--space-1);
}

/* ===================================
   Divider
   =================================== */
.content-divider {
  border: none;
  border-top: 1px solid var(--color-gray-300);
  margin: var(--space-12) 0;
}

@media (max-width: 1280px) {
  .sub-page .mv-values__grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================
   Responsive: Tablet (768px ~ 1023px)
   =================================== */
@media (max-width: 1023px) {
  .page-hero .container,
  .breadcrumb .container {
    padding: 0 var(--sub-padding-tablet);
  }

  .page-hero__title {
    font-size: var(--fs-title-lg);
  }

  .page-hero {
    padding: var(--space-12) 0;
  }

  .hero-visual {
    margin-bottom: var(--space-5);
  }

  .hero-visual__container {
    aspect-ratio: 16 / 5;
    border-radius: var(--radius-xl);
  }

  .content-body__title {
    font-size: var(--fs-title-md);
  }

  .content-body__text {
    font-size: var(--fs-body);
  }

  .sub-page .container {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--sub-padding-tablet);
    gap: 0;
  }

  .sub-page {
    padding: var(--space-8) 0 60px;
  }

  .lnb {
    display: none;
  }

  .info-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .key-numbers {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ===================================
   Responsive: Mobile (0 ~ 767px)
   =================================== */
@media (max-width: 767px) {
  .page-hero .container,
  .breadcrumb .container {
    padding: 0 var(--sub-padding-mobile);
  }

  .page-hero {
    padding: 36px 0;
  }

  .page-hero__title {
    font-size: var(--fs-title-sm);
  }

  .page-hero__desc {
    font-size: var(--fs-small);
  }

  /* Hero Visual */
  .hero-visual {
    margin-bottom: var(--space-5);
  }

  .hero-visual__container {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
  }

  /* Content Body */
  .content-body {
    margin-bottom: var(--space-12);
  }

  .content-body__title {
    font-size: var(--fs-section);
    margin-bottom: var(--space-2);
  }

  .content-body__text {
    font-size: var(--fs-small);
    line-height: 1.75;
  }

  .sub-page .container {
    padding: 0 var(--sub-padding-mobile);
  }

  .sub-page {
    padding: var(--space-6) 0 var(--space-12);
  }

  .lnb-card {
    padding: var(--space-3);
  }

  .lnb-header {
    font-size: var(--fs-small);
    padding: 10px var(--space-3);
  }

  .lnb-item {
    font-size: var(--fs-small);
    padding: 7px 9px;
  }

  .content__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .content__title {
    font-size: var(--fs-section);
  }

  .content-block {
    margin-bottom: var(--gap-layout-page-header);
  }

  .content-block__title {
    font-size: var(--fs-title-md);
    padding-left: 14px;
  }

  .content-block__text {
    font-size: var(--fs-small);
    line-height: 1.7;
  }

  .content-block__highlight {
    padding: var(--space-5);
  }

  .info-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .info-card {
    padding: var(--space-6) var(--space-5);
  }

  .key-numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .key-number__value {
    font-size: var(--fs-title-sm);
  }

  .breadcrumb-item {
    font-size: var(--fs-small);
    gap: var(--space-1);
  }

  .breadcrumb-list {
    gap: var(--space-1);
  }

}

/* ===================================
   Print Styles
   =================================== */
/* 인쇄 용지 — A4 세로 고정.
   아래 @media print 의 축소 배율이 이 규격을 전제로 계산되므로 함께 바꿔야 한다.
   (이전에는 용지를 397x281mm 로 키워 반응형을 피하려 했으나, 비표준 규격이라
    프린터 드라이버가 받지 않고 A4 로 되돌려 아무 효과가 없었다.) */
@page {
  size: A4 portrait;
  margin: 8mm;
}

@media print {
  /* ── PC 화면 배치 그대로 출력 ───────────────────────────────────
     브라우저는 인쇄 시 미디어쿼리를 '용지' 기준으로 평가한다.
     A4 세로 210mm - 좌우 여백 16mm = 194mm ≒ 733px 이므로, 화면에서는
     걸리지 않던 태블릿·모바일 규칙이 인쇄에서 전부 걸려 4열 카드가 2열로
     접힌다. 용지를 키우거나 폭을 강제해도 이 평가 기준은 바뀌지 않는다.

     그래서 본문을 PC 폭으로 그린 뒤 용지 폭에 맞춰 '비율 축소'한다.
     좁히는 게 아니라 화면을 그대로 줄여 찍는 방식이라 배치가 깨지지 않는다.
     반응형 규칙 비활성화는 print-desktop-layout.js 가 담당한다.

     ※ 1200px 은 그 스크립트의 VIRTUAL_WIDTH 와 반드시 같아야 한다.
       배율 = 733 / 1200 = 0.6109 */
  body {
    width: 1200px !important;
    zoom: 0.6109;
  }

  .page-hero {
    background: none !important;
    padding: var(--space-5) 0;
  }

  .page-hero__title {
    color: var(--color-text-primary);
    font-size: var(--fs-title-sm);
  }

  .breadcrumb,
  .lnb,
  .lnb-card,
  .btn-print,
  .content__actions {
    display: none !important;
  }

  /* 화면 전용 사이트 크롬은 인쇄에서 제외 — 본문만 출력한다.
     (기존에는 breadcrumb·LNB 만 숨겨 헤더·GNB·퀵메뉴·푸터가 종이에 그대로 찍혔고,
      fixed 인 .loading-overlay 는 빈 페이지를 만들었다. 전 사이트 공통 증상) */
  .skip-nav,
  .top-utility-bar,
  .header,
  .loading-overlay,
  .quick-menu-wrapper,
  .quick-menu__open,
  .footer-related-bar,
  .footer,
  .related-site-popup,
  .page-header__actions {
    display: none !important;
  }

  /* 카드·차트 등 '작은' 덩어리만 페이지 경계에서 잘리지 않게 한다.
     섹션 전체(.content-block)까지 묶으면 한 장에 안 들어갈 때 통째로 다음 장으로
     밀려 아래쪽에 큰 빈 공간이 생긴다(실측: 하단 낭비 66~71%, 불필요한 1쪽 추가). */
  .card,
  .process-steps__item,
  .mv-values__card,
  .dear-stat-card,
  .bio-chart {
    break-inside: avoid;
  }

  /* 표는 여러 페이지에 걸쳐도 되지만 행 단위로는 잘리지 않게,
     페이지가 넘어가면 헤더 행을 반복한다 */
  table {
    break-inside: auto;
  }

  tr,
  td,
  th {
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  /* 카드 배경·아이콘 색이 그대로 출력되도록 (기본값 economy 는 배경을 생략한다) */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .sub-page .container {
    display: block;
  }

  .content-block__image img {
    box-shadow: none;
    border-radius: 0;
  }
}

/* 데스크톱 폭(1280px)으로 고정한 콘텐츠를 용지 크기에 맞춰 축소.
   세로 A4 콘텐츠 폭 ≈ 718px → 718/1280 ≈ 0.56
   가로 A4 콘텐츠 폭 ≈ 1047px → 1047/1280 ≈ 0.81 */

/* ===================================
   Facility Cards (시설안내 수평 카드)
   =================================== */
.facility-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.facility-cards .card--horizontal {
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.facility-cards .card--horizontal .card__image {
  width: 200px;
  min-height: 120px;
  flex-shrink: 0;
  background-color: var(--color-gray-100);
}

.facility-cards .card--horizontal .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.facility-cards .card--horizontal .card__body .badge {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .facility-cards .card--horizontal .card__image {
    width: 100%;
    min-height: 160px;
  }
}

/* tabs div가 panel을 포함하는 (비표준) 구조에서 .tabs border-bottom이 콘텐츠 아래 표시되는 문제 수정 */
.tabs:has(.tabs__panel) {
  border-bottom: none;
}
.tabs:has(.tabs__panel):not(.tabs--pill):not(.tabs--boxed) .tabs__list {
  border-bottom: 2px solid var(--color-gray-400);
}

/* board-search__row 간격 — components.css 12px → 4px 전역 축소 */
.board-search__row {
  gap: var(--space-1); /* var(--space-1) */
}

/* board-list__filter — 카운트 + 검색폼 한 줄 강제 */
.board-list__filter {
  flex-wrap: nowrap;
  gap: var(--space-3); /* var(--space-3) */
  align-items: center;
}
.board-list__filter > .board-list__count {
  flex-shrink: 0;
}

/* 검색 form 자체 — width auto + 줄바꿈 방지 */
.board-list__filter .board-search__form,
.board-list__filter form.board-search__form {
  width: auto;
  flex-shrink: 1;
  min-width: 0;
}

/* 실제 flex 컨테이너 = .board-search__row — 한 줄 강제, 붙임 */
.board-list__filter .board-search__row,
.board-list__filter form.board-search__form > .board-search__row {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1); /* var(--space-1) */
}

/* .board-search__row 안 select-group — 130px 고정 (form-group flex:1 무력화)
   flex-basis: auto 사용: row 방향 → width(130px)로 해석, column 방향 → height(auto=콘텐츠)로 해석
   → column 전환 시 flex-basis가 높이로 해석되어 큰 공백이 생기는 문제 방지 */
/* 부서 필터에 긴 부서명(최장 9자 '단백대사체학실험실' = 텍스트 119px + 좌우 패딩 48px
   = 169px 필요)이 들어가면 130px 에서는 잘려 말줄임(...)으로 표기된다.
   전체 노출되도록 180px 로 확대(여유 11px). 태블릿 이하(≤1023px)는 아래 미디어쿼리에서
   width:100% 로 전환되므로 영향 없음. */
.board-list__filter .board-search__row .board-search__select-group,
.board-list__filter .board-search__row > .form-group.board-search__select-group {
  flex: 0 0 auto;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
}
.board-list__filter .board-search__row .board-search__select-group .form-control,
.board-list__filter .board-search__row .board-search__select-group .ts-wrapper {
  width: 100%;
}

/* input-group — 가용 공간 채움 */
.board-list__filter .board-search__row .board-search__input-group,
.board-list__filter .board-search__row > .form-group.board-search__input-group {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 280px;
}

/* 버튼 — 줄바꿈 방지 */
.board-list__filter .board-search__row .board-search__btn,
.board-list__filter .board-search__row > .btn {
  flex-shrink: 0;
}

/* board-search__form--inline — board-search__row 없는 인라인 단일행 폼 */
.board-list__filter .board-search__form--inline {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* var(--space-2) */
}
/* Tom Select 초기화 후 .ts-wrapper(form-control 클래스 복사) 또는 네이티브 select 모두 대응.
   width:auto+min-width 조합은 flex 컨텍스트에서 브라우저 해석 차이로 무시되는 케이스가 있어
   표준 board-search 패턴과 동일하게 명시적 고정값으로 설정. */
.board-list__filter .board-search__form--inline > .form-control,
.board-list__filter .board-search__form--inline > .ts-wrapper {
  flex: 0 0 130px;
  width: 130px;
  min-width: 130px;
  max-width: 160px;
}
.board-list__filter .board-search__form--inline > .board-search__input-group {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 280px;
}
.board-list__filter .board-search__form--inline > .board-search__btn {
  flex: 0 0 auto;
}

/* 태블릿(≤1023px): board-custom.css가 board-search__row를 column으로 전환할 때
   고정 flex-basis(130px/200px)가 높이로 해석되는 문제 방지. */
@media (max-width: 1023px) {
  .board-list__filter .board-search__row .board-search__select-group,
  .board-list__filter .board-search__row > .form-group.board-search__select-group {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .board-list__filter .board-search__row .board-search__select-group .form-control,
  .board-list__filter .board-search__row .board-search__select-group .ts-wrapper {
    width: 100%;
  }
  .board-list__filter .board-search__row .board-search__input-group,
  .board-list__filter .board-search__row > .form-group.board-search__input-group {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .board-list__filter .board-search__row .board-search__btn,
  .board-list__filter .board-search__row > .btn {
    width: 100%;
    flex-shrink: 0;
  }
}

/* 모바일(≤767px): components.css가 flex-direction:column으로 전환할 때
   고정 flex-basis(130px/200px)가 높이로 해석되어 폼 요소가 130-200px 높이로
   늘어나는 문제를 방지. 폭·높이를 auto로 되돌려 자연스럽게 적층되도록 함. */
@media (max-width: 767px) {
  .board-list__filter .board-search__row,
  .board-list__filter form.board-search__form > .board-search__row {
    align-items: stretch;
  }
  .board-list__filter .board-search__row .board-search__select-group,
  .board-list__filter .board-search__row > .form-group.board-search__select-group {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .board-list__filter .board-search__row .board-search__select-group .form-control,
  .board-list__filter .board-search__row .board-search__select-group .ts-wrapper {
    width: 100%;
  }
  .board-list__filter .board-search__row .board-search__input-group,
  .board-list__filter .board-search__row > .form-group.board-search__input-group {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .board-list__filter .board-search__row .board-search__btn,
  .board-list__filter .board-search__row > .btn {
    width: 100%;
    flex-shrink: 0;
  }
}

/* spec-list — 문의처·출처 등 key-value 보조 정보 */
.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* var(--space-1) */
  font-size: var(--fs-small);
  color: var(--color-gray-600);
}
.spec-list__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2); /* var(--space-2) */
}
.spec-list__term {
  flex: 0 0 auto;
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
}
.spec-list__desc {
  flex: 1;
  margin: 0;
}

/* card-grid--1: 단일 열 카드 목록 */
.card-grid--1 {
  grid-template-columns: 1fr;
}

/* numbered-list--1col — 서브리스트 포함 구조 보정 */
.numbered-list--1col {
  gap: var(--space-2); /* var(--space-2) */
}
.numbered-list--1col .numbered-list__item {
  align-items: center;
}

/* 메인 텍스트 — div 래퍼 방식: flex 컬럼 안의 p 자식 */
.numbered-list__text > p:not(.numbered-list__desc) {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-block);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

/* p 직접 방식: <p class="numbered-list__text">문장 <b>강조</b> 이어서</p>
   components.css의 display:flex를 block으로 오버라이드 → <b>/<strong> 인라인 유지
   margin-bottom 0: flex align-items:center는 margin-box 기준 중앙 → bottom margin만큼
   텍스트가 위로 올라가는 현상 방지 (아이템 간격은 부모 gap이 담당) */
p.numbered-list__text {
  display: block;
  margin: 0;
  font-size: var(--fs-block);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

/* p 직접 방식 안의 강조 — 주변 semibold 대비 bold로 시각 구분 */
p.numbered-list__text b,
p.numbered-list__text strong {
  font-weight: var(--fw-bold);
}

/* 서브리스트 항목 — 보조 톤 */
.numbered-list__text > .content-body__list > li {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-gray-600);
  margin-bottom: var(--space-1);
}

/* ===================================
   표 헤더(제목) 가운데 정렬
   .board-table thead th 는 이미 center → .table 도 통일
   board-table 의 제목 열 헤더는 좌측 고정이라 함께 center 처리
   (본문 제목 셀(tbody .td-title)은 가독성 위해 좌측 유지)
   =================================== */
.table thead th {
  text-align: center;
}
.board-table thead .td-title {
  text-align: center;
}

/* 표 셀 회색 음영 (연락처 등 특정 셀 강조 통일) */
.table .cell-shade {
  background-color: var(--color-gray-100);
  font-weight: var(--fw-semibold);
}