/* ---------------- 급식서비스 ---------------- */

/* 급식서비스 페이지 배경/스크롤 공통 설정 */
.catering_page {
  background-color: #FAFAF8;
  scrollbar-gutter: stable;
}

/* 급식서비스 페이지 헤더 톤(메인과 같은 화이트 헤더) */
.catering_page .site-header-light {
  border-bottom: none;
  background-color: transparent;
}

/* 급식서비스 각 화면 공통 프레임(한 화면 한 섹션) */
.catering_screen {
  height: 100svh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #FAFAF8;
}

/* 급식서비스 첫 화면 헤더 높이 확보 */
.catering_screen_with_header {
  padding-top: calc(var(--site-header-height) + 0.1rem);
}

/* 급식서비스 섹션 본문 수직 중앙 정렬 */
.catering_screen_body {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

/* 급식서비스 본문 공통 최대 너비 */
.catering_screen_inner {
  width: min(100%, 1320px);
  margin: 0 auto;
}

/* 급식서비스 가운데 정렬 섹션 제목 */
.catering_section_heading_center {
  margin: 0 auto;
  width: min(100%, 1320px);
  text-align: center;
  font-size: var(--section-title-font-size);
  font-weight: 800;
  color: #111111;
}

/* 2번 화면: 3분할 이미지를 화면 끝까지 확장 */
.catering_screen_stage {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

/* 2번 화면: 패널 본문이 세로로 꽉 차도록 stretch 정렬 */
.catering_screen_stage .catering_screen_body {
  align-items: stretch;
  padding-top: 0;
}

/* 1번 화면: 메뉴구성 흐름도 전체 보드 */
.catering_flow_board {
  --catering-flow-line-width: 3px;
  --catering-flow-line-color: #8b8279;
  position: relative;
  isolation: isolate;
  width: min(100%, 1320px);
  height: clamp(530px, 72vh, 720px);
  margin: 0 auto;
}

/* 1번 화면: 흐름도 전체가 위에서 아래로 진입 */
#catering_flow .catering_screen_inner {
  opacity: 0;
  animation: catering_flow_section_enter 1.05s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

/* 1번 화면: 전체 흐름도 진입 애니메이션 */
@keyframes catering_flow_section_enter {
  from {
    opacity: 0;
    transform: translateY(-110px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1번 화면: 전체 흐름도 본문을 아래로 이동 */
#catering_flow .catering_screen_body {
  padding-top: clamp(2.1rem, 4.9vh, 3.8rem);
}

/* 1번 화면: 메뉴구성 흐름도 공통 노드 셀 */
.catering_flow_node {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 0.78rem 1.55rem;
  border-radius: 9999px;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
  opacity: 1;
  transform: none;
  animation: none;
}

/* 1번 화면: 마인드맵 노드 진입 애니메이션 */
/* 1번 화면: 모션 축소 환경에서는 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  #catering_flow .catering_screen_inner,
  .catering_flow_node {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .catering_stage_panel_visible .catering_stage_image,
  .catering_stage_panel_visible .catering_stage_text,
  .catering_compare_visible {
    animation: none;
    opacity: 1;
  }

  .catering_flow_path,
  .catering_flow_svg_arrowhead {
    opacity: 1;
    animation: none;
  }
}

/* 1번 화면: 검정색 셀(메인 바 색 연동) */
.catering_flow_node_dark {
  background-color: var(--catering-dark-cell-color);
  color: #ffffff;
}

/* 1번 화면: 외곽선 셀 */
.catering_flow_node_outline {
  border-radius: 1rem;
  border: 1.5px solid #3f3026;
  padding: 0.85rem 0.95rem;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  color: #111111;
  background-color: #ffffff;
}

/* 1번 화면: 좌측 3개 셀 위치 */
.catering_flow_node_left_top {
  left: 2%;
  top: 8%;
  width: 300px;
}

/* 1번 화면: 좌측 중간 셀 위치 */
.catering_flow_node_left_mid {
  left: 2%;
  top: 35%;
  width: 300px;
}

/* 1번 화면: 좌측 하단 셀 위치 */
.catering_flow_node_left_bottom {
  left: 2%;
  top: 62%;
  width: 300px;
}

/* 1번 화면: 중앙 검증/구성 셀 위치 */
.catering_flow_node_center_top {
  left: 33%;
  top: 21%;
  width: 300px;
}

/* 1번 화면: 중앙 사업장 메뉴 구성 셀 위치 */
.catering_flow_node_center_mid {
  left: 33%;
  top: 48%;
  width: 300px;
}

/* 1번 화면: 우측 분석/결과 셀 위치 */
.catering_flow_node_right_mid {
  left: 61%;
  top: 48%;
  width: 190px;
}

/* 1번 화면: 우측 끝 식단 구성 셀 위치 */
.catering_flow_node_right_end {
  left: 81%;
  top: 48%;
  width: 190px;
}

/* 1번 화면: 우상단 현장중심 메뉴구성 셀 위치 */
.catering_flow_node_top_right {
  right: 0;
  top: 4%;
  width: 280px;
}

/* 1번 화면 현장중심 메뉴구성 호버 안내 박스 기준점 */
.catering_flow_node_hover_anchor {
  outline: none;
  cursor: help;
}

/* 1번 화면 현장중심 메뉴구성 호버 안내 박스 */
.catering-hover-tooltip {
  position: absolute;
  top: calc(100% + 1rem);
  z-index: 12;
  width: min(88vw, 320px);
  display: flex;
  align-items: center;
  min-height: 168px;
  border: 3px solid #3f3026;
  border-radius: 1.2rem;
  background-color: #ffffff;
  padding: 1.8rem 1.25rem 1.25rem;
  box-shadow: 0 22px 40px rgba(63, 48, 38, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* 1번 화면 현장중심 메뉴구성 우측 정렬 박스 */
.catering-hover-tooltip-right {
  right: 0;
}

/* 1번 화면 현장중심 메뉴구성 안내 박스 북마크 장식 */
.catering-hover-tooltip::before {
  content: "";
  position: absolute;
  top: -1.95rem;
  right: 2.1rem;
  width: 1.9rem;
  height: 2.55rem;
  background-color: #3f3026;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

/* 1번 화면 현장중심 메뉴구성 호버/포커스 시 안내 박스 표시 */
.catering_flow_node_hover_anchor:is(:hover, :focus-visible, :focus-within) .catering-hover-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 1번 화면 현장중심 메뉴구성 안내 문구 */
.catering-hover-tooltip-text {
  margin: 0;
  color: #111111;
  text-align: left;
  font-size: clamp(14px, 0.98vw, 16px);
  line-height: 1.55;
  width: 100%;
  white-space: pre-line;
}

/* 1번 화면: 흐름 연결 SVG */
.catering_flow_svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 1번 화면: 흐름 연결선 스타일(굵기/색상 통일) */
/* --catering-flow-line-length: 각 경로의 실제 SVG 좌표 길이 — dasharray/dashoffset을 동일하게 맞춰 애니메이션 전 구간이 선 그리기에 사용되도록 함 */
.catering_flow_path {
  fill: none;
  stroke: var(--catering-flow-line-color);
  stroke-width: var(--catering-flow-line-width);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
  animation: none;
}

/* 1번 화면: 화살표 머리 스타일 */
.catering_flow_svg_arrowhead {
  fill: none;
  stroke: var(--catering-flow-line-color);
  stroke-width: var(--catering-flow-line-width);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
  animation: none;
}

/* 1번 화면: 흐름선 페이드인 애니메이션 */
/* 1번 화면: 데스크톱/모바일 흐름선 세트 기본 토글 */
.catering_flow_lines_default {
  display: inline;
}

/* 1번 화면: 모바일 전용 흐름선은 기본 숨김 */
.catering_flow_lines_mobile {
  display: none;
}

/* 1번 화면 화살표: 기본 화면 버전 표시 */
.catering_flow_arrow_default {
  display: inline;
}

/* 1번 화면 화살표: 작은 화면 버전 기본 숨김 */
.catering_flow_arrow_small {
  display: none;
}

/* 1번 화면: Needs 연결선 기본 화면 버전 표시 */
.catering_flow_needs_line_default {
  display: inline;
}

/* 1번 화면: Needs 연결선 작은 화면 버전 기본 숨김 */
.catering_flow_needs_line_small {
  display: none;
}

/* 2번 화면: 메뉴 관리 단계 3단 패널 컨테이너 */
.catering_stage_grid {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* 2번 화면: 이미지 래퍼 오른쪽에서 슬라이드 인 애니메이션 */
@keyframes catering_stage_image_enter {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2번 화면: 텍스트 아래에서 위로 진입 애니메이션 */
@keyframes catering_stage_text_enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2번 화면: 섹션 진입 시 이미지 래퍼 오른쪽에서 슬라이드 인 */
.catering_stage_panel_visible .catering_stage_image_wrap {
  animation: catering_stage_image_enter 1.05s cubic-bezier(0.16, 0.84, 0.28, 1) both;
}

/* 2번 화면: 섹션 진입 시 텍스트 아래에서 위로 진입 */
.catering_stage_panel_visible .catering_stage_text {
  animation: catering_stage_text_enter 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 2번 화면: 진입 전 이미지/텍스트 숨김(JS에서 클래스 부여) */
.catering_stage_wrap_hidden {
  opacity: 0;
}

.catering_stage_text_hidden {
  opacity: 0;
}

/* 2번 화면: 3단 카드 공통(왼쪽/가운데/오른쪽 배경색 분할) */
.catering_stage_panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
}

/* 2번 화면: 글로벌 기준색 패널 배경에만 그레인 질감을 적용한다 */
.catering_stage_panel::before,
.catering_stage_panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
}

/* 2번 화면: 패널 배경 거친 노이즈 질감 레이어 */
.catering_stage_panel::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.95'%20numOctaves='2'%20seed='7'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  mix-blend-mode: soft-light;
  opacity: 0.35;
}

/* 2번 화면: 패널 배경 부드러운 노이즈 질감 레이어 */
.catering_stage_panel::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20220'%3E%3Cfilter%20id='m'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.62'%20numOctaves='3'%20seed='21'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 132px 132px;
  mix-blend-mode: overlay;
  opacity: 0.30;
}

/* 2번 화면: 왼쪽 카드 배경색(기준색) */
.catering_stage_panel_left {
  background-color: var(--catering-stage-base-color);
}

/* 2번 화면: 가운데 카드 배경색(기준색보다 밝게) */
.catering_stage_panel_center {
  background-color: var(--catering-stage-mid-color);
}

/* 2번 화면: 오른쪽 카드 배경색(가운데보다 더 밝게) */
.catering_stage_panel_right {
  background-color: var(--catering-stage-light-color);
}

/* 2번 화면: 접시 이미지 래퍼(패널 전체 기준 배치) */
.catering_stage_image_wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 2번 화면: 접시 이미지 공통 스타일 */
.catering_stage_image {
  object-fit: contain;
  filter: none;
  width: var(--catering-plate-width, 150%) !important;
  height: var(--catering-plate-height, 108%) !important;
  max-width: none !important;
  max-height: none !important;
  left: auto !important;
  right: var(--catering-plate-right, -82%) !important;
  top: var(--catering-plate-top, 50%) !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  transform-origin: center center;
  image-rendering: auto;
}

/* 2번 화면: 접시 이미지(오른쪽에서 들어와 왼쪽 면 중심으로 보이게) */
.catering_stage_image_left {
  --catering-plate-right: -82%;
  --catering-plate-top: 51%;
}

/* 2번 화면: 가운데 패널 접시 이미지 위치 */
.catering_stage_image_center {
  --catering-plate-right: -82%;
  --catering-plate-top: 51%;
}

/* 2번 화면: 오른쪽 패널 접시 이미지 위치 */
.catering_stage_image_right {
  --catering-plate-right: -82%;
  --catering-plate-top: 51%;
}

/* 2번 화면: 하단 단계 텍스트 */
.catering_stage_text {
  position: relative;
  z-index: 2;
  width: min(58%, 360px);
  margin: 0 auto 1.75rem 0;
  padding: 0 0 0 clamp(0.9rem, 2vw, 1.7rem);
  text-align: left;
  color: #ffffff;
}

/* 2번 화면: 단계 텍스트 제목(STEP 번호) */
.catering_stage_text strong {
  display: block;
  font-size: clamp(16px, 1.12vw, 20px);
  font-weight: 700;
  line-height: 1.25;
}

/* 2번 화면: 단계 텍스트 본문 설명 */
.catering_stage_text p {
  margin: 0.28rem 0 0;
  min-height: calc(1.45em * 2);
  display: flex;
  align-items: flex-start;
  white-space: pre-line;
  font-size: clamp(15px, 1.02vw, 19px);
  line-height: 1.45;
}

/* 3번 화면: 요소 밑에서 올라오는 진입 애니메이션 */
@keyframes catering_compare_enter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3번 화면: 진입 전 숨김 상태 */
.catering_compare_hidden {
  opacity: 0;
}

/* 3번 화면: 진입 시 애니메이션 실행 */
.catering_compare_visible {
  animation: catering_compare_enter 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 3번 화면: 모집-채용-입사-관리 카드는 더 빠르게 진입 */
.catering_process_card.catering_compare_visible {
  animation-duration: 0.28s;
}

/* 5번 화면: 상단 카드 묶음이 잠깐 숨겨진 뒤 한꺼번에 올라오는 진입 */
@keyframes catering_research_list_enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--catering-research-lift-offset) + var(--catering-research-top-extra-lift) + 96px));
  }
  to {
    opacity: 1;
    transform: translateY(calc(var(--catering-research-lift-offset) + var(--catering-research-top-extra-lift)));
  }
}

.catering_research_list.catering_compare_visible {
  animation: catering_research_list_enter 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* 5번 화면: 중단/하단 카드 진입 속도 빠르게 */
#catering_research .catering_safety_chip_row.catering_compare_visible,
#catering_research .catering_recruit_blocks.catering_compare_visible {
  animation-duration: 0.44s;
}

/* 3번 화면: 비교표/프로세스 섹션 전체 간격 */
.catering_compare_inner {
  display: grid;
  align-content: center;
  gap: clamp(2rem, 3.8vh, 3rem);
}

/* 3번 화면: 상단 메뉴개발/품질연구 버튼형 라벨 */
.catering_compare_top_tabs {
  width: min(100%, 900px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.2vw, 4.4rem);
  margin-bottom: clamp(0.35rem, 1vh, 0.8rem);
  justify-content: center;
  justify-items: center;
}

/* 3번 화면: 메뉴개발/품질연구 라벨 셀 스타일 */
.catering_compare_top_tabs span {
  min-width: 250px;
  border: 1.5px solid #3f3026;
  border-radius: 1rem;
  padding: 0.85rem 0.95rem;
  text-align: center;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  background-color: #ffffff;
}

/* 3번 화면: 비교표 3열 그리드 */
.catering_compare_table {
  display: grid;
  width: min(100%, 1060px);
  margin: clamp(0.8rem, 1.8vh, 1.25rem) auto 0;
  grid-template-columns: 1fr 1.35fr 2.45fr;
  gap: 4px;
  background-color: #ffffff;
}

/* 3번 화면: 비교표 좌상단 모서리 둥글게 */
.catering_compare_table > .catering_compare_cell_head:nth-child(1) {
  border-top-left-radius: 0.9rem;
}

/* 3번 화면: 비교표 우상단 모서리 둥글게 */
.catering_compare_table > .catering_compare_cell_head:nth-child(3) {
  border-top-right-radius: 0.9rem;
}

/* 3번 화면: 비교표 본문 행 묶음(display: contents로 3셀 유지) */
.catering_compare_row_group {
  display: contents;
}

/* 3번 화면: 비교표 셀 공통 스타일 */
.catering_compare_cell {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.46rem 0.78rem;
  background-color: #dbd8d3;
  color: #111111;
  text-align: center;
  font-size: clamp(14px, 0.98vw, 18px);
  line-height: 1.3;
}

/* 3번 화면: 비교표 헤더 셀(검정색 셀/표 배경) */
.catering_compare_cell_head {
  background-color: var(--catering-table-dark-color);
  color: #ffffff;
}

/* 3번 화면: 좌측 구분 셀(검정색 셀/표 배경) */
.catering_compare_cell_side {
  background-color: var(--catering-table-dark-color);
  color: #ffffff;
}

/* 3번 화면: 하단 프로세스 4단 카드 */
.catering_process_row {
  --catering-process-gap: clamp(3rem, 6.3vw, 5.8rem);
  --catering-process-arrow-length: clamp(3.4rem, 5.5vw, 5.2rem);
  --catering-process-head-height: 56px;
  display: grid;
  width: min(100%, 1060px);
  margin: clamp(1.6rem, 3.1vh, 2.6rem) auto 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--catering-process-gap);
}

/* 3번 화면: 모집/채용/입사/관리 카드 */
.catering_process_card {
  position: relative;
  border-radius: 0.9rem;
  overflow: visible;
  background-color: transparent;
  border: 1px solid #e2e2e2;
}

/* 3번 화면: 프로세스 카드 상단 검정 헤더 */
.catering_process_card_head {
  height: var(--catering-process-head-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--catering-table-dark-color);
  color: #ffffff;
  text-align: center;
  padding: 0 0.6rem;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 700;
  border-top-left-radius: 0.9rem;
  border-top-right-radius: 0.9rem;
}

/* 3번 화면: 프로세스 카드 본문 */
.catering_process_card_body {
  min-height: 172px;
  display: grid;
  grid-template-rows: repeat(var(--process-row-count, 3), minmax(0, 1fr));
  align-content: stretch;
  gap: 0;
  padding: 0 clamp(0.78rem, 1vw, 0.92rem);
  background-color: #f4f4f4;
  border-bottom-left-radius: 0.9rem;
  border-bottom-right-radius: 0.9rem;
}

/* 3번 화면: 프로세스 카드 본문 항목 텍스트 */
.catering_process_card_body p {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  font-size: clamp(14px, 0.98vw, 18px);
  line-height: 1.35;
  white-space: pre-line;
}

/* 3번 화면: 프로세스 카드 항목 사이 구분선 */
.catering_process_card_body p + p {
  border-top: 1px solid #d2d2d2;
}

/* 3번 화면: 카드 사이 화살표 래퍼 */
.catering_process_arrow {
  position: absolute;
  left: calc(100% + (var(--catering-process-gap) - var(--catering-process-arrow-length)) / 2);
  top: calc(var(--catering-process-head-height) / 2);
  transform: translateY(-50%);
  width: var(--catering-process-arrow-length);
  height: 20px;
  z-index: 3;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.24s ease;
}

/* 화살표 이미지 래퍼 크기에 맞춤 */
.catering_process_arrow_img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* 화살표 왼→오 드러남 */
.catering_process_arrow_visible {
  clip-path: inset(0 0% 0 0) !important;
}

/* 4번 화면: 교육 섹션 본문 레이아웃 */
.catering_education_inner {
  display: grid;
  align-content: center;
  gap: clamp(5.3rem, 8.4vh, 7rem);
}

/* 4번 화면: 상단 정기/비정기 교육 지표 */
.catering_education_stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  transform: translateY(-0.1rem);
}

/* 4번 화면: 지표 카드 */
.catering_education_stat_item {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}

/* 4번 화면: 정기/비정기 교육 라벨은 항상 선명하게 표시 */
.catering_education_stat_label {
  border-radius: 0.75rem;
  background-color: var(--catering-dark-cell-color);
  color: #ffffff;
  padding: 0.72rem 1.15rem;
  font-size: clamp(16px, 1.2vw, 23px);
  font-weight: 700;
  line-height: 1;
  transform: translateY(-0.3rem);
  opacity: 1;
  filter: blur(0px);
  transition: transform 0.1s ease;
}

/* 4번 화면: 퍼센트 카운트업 중 라벨도 함께 강조 */
.catering_education_stat_label.counting {
  transform: translateY(-0.3rem) scale(1.06);
}

/* 4번 화면: 퍼센트 수치 텍스트 */
.catering_education_stat_value {
  margin-top: 0.3rem;
  font-size: clamp(30px, 2.45vw, 48px);
  line-height: 1;
  color: #f26464;
  font-weight: 800;
  letter-spacing: -0.03em;
  transition: transform 0.1s ease;
  display: inline-block;
}

/* 4번 화면: 카운트업 중 강조 상태 */
.catering_education_stat_value.counting {
  transform: scale(1.06);
}

/* 4번 화면: 좌우 네비/본문 카드 묶음 */
.catering_education_cards_wrap {
  --catering-education-gap: clamp(2.5rem, 4.6vw, 4.2rem);
  position: relative;
  margin-top: clamp(3.9rem, 6.6vh, 5.6rem);
  padding-inline: clamp(0.7rem, 1.3vw, 1.2rem);
}

/* 4번 화면: 카드 슬라이드 표시 영역 */
.catering_education_cards_viewport {
  overflow: hidden;
  touch-action: pan-y;
}

/* 4번 화면: 좌우 화살표 버튼 */
.catering_education_nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #7a7470;
  font-size: 64px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* 4번 화면: 비활성 화살표 버튼 상태 */
.catering_education_nav:disabled {
  opacity: 0.38;
  cursor: default;
}

/* 4번 화면: 이동 가능한 화살표 버튼 강조 */
.catering_education_nav:not(:disabled):hover {
  color: #9f968d;
}

/* 4번 화면: 왼쪽 화살표 버튼 위치 */
.catering_education_nav_left {
  left: -2.5rem;
}

/* 4번 화면: 오른쪽 화살표 버튼 위치 */
.catering_education_nav_right {
  right: -2.5rem;
}

/* 4번 화면: 교육/소통/협력사 카드 3열 */
.catering_education_cards {
  display: flex;
  justify-content: flex-start;
  gap: var(--catering-education-gap);
  touch-action: pan-y;
}

/* 4번 화면: 카드 트랙을 실제로 한 칸씩 이동시키는 전환 */
.catering_education_cards_track_animated {
  transition: transform 0.42s ease;
  will-change: transform;
}

/* 4번 화면: 카드 폭은 화면 측정값에 맞춰 인라인 스타일로 주입한다. */
.catering_education_card {
  flex: 0 0 calc((100% - var(--catering-education-gap) - var(--catering-education-gap)) / 3);
  max-width: calc((100% - var(--catering-education-gap) - var(--catering-education-gap)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 4번 화면: 카드 제목 */
.catering_education_card h3 {
  margin: 0;
  min-height: calc(1.35em * 1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #111111 !important;
  font-size: clamp(17px, 1.18vw, 22px);
  font-weight: 800;
}

/* 4번 화면: 카드 본문 설명 */
.catering_education_card p {
  margin: 2.1rem 0 0;
  height: calc(1.45em * 6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: #111111;
  white-space: pre-line;
  font-size: clamp(15px, 1.05vw, 22px);
  line-height: 1.45;
}

/* 5번 화면: 레시피/채용 섹션 본문 레이아웃 (기존 단일 섹션용, 미사용 가능) */
.catering_research_inner {
  --catering-research-lift-offset: -0.85rem;
  --catering-research-top-extra-lift: -0.45rem;
  display: grid;
  align-content: center;
  gap: clamp(2.7rem, 5.1vh, 4.8rem);
}

/* 5번 섹션(레시피 단독): 패딩 + 레이아웃 */
.catering_research_section_inner {
  padding-inline: clamp(1.5rem, 5vw, 4rem);
  display: grid;
  align-content: center;
  gap: clamp(1.5rem, 3vh, 2.5rem);
}

/* 5번 섹션: SectionTitle 래퍼 — 부모가 이미 padding-inline 처리하므로 좌우/상단 패딩 제거 */
.catering_research_section_inner .main-section-title-wrap {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: clamp(1.2rem, 2.5vh, 2rem);
}

.catering_research_section_inner .catering_research_list {
  gap: clamp(2.8rem, 6vh, 5rem);
  transform: none;
}

/* 5번 섹션: 설명 텍스트를 위생칩과 동일한 테두리 박스로 표시 */
.catering_research_section_inner .catering_research_description {
  border: 1.5px solid rgba(52, 43, 35, 0.55);
  border-radius: 0.9rem;
  padding: clamp(0.9rem, 2vh, 1.5rem) clamp(1rem, 2vw, 1.5rem);
  background-color: #ffffff;
  white-space: normal;
  font-size: clamp(16px, 1.2vw, 23px);
  line-height: 1.5;
  max-width: none;
  width: auto;
  margin: 0;
}

/* 5번 섹션: 뱃지 폰트 상향 */
.catering_research_section_inner .catering_research_badge {
  font-size: clamp(16px, 1.2vw, 23px);
}

/* 6번 섹션(위생+채용 통합): 패딩 + 레이아웃 */
.catering_safety_recruit_inner {
  padding-inline: clamp(1.5rem, 5vw, 4rem);
  display: grid;
  align-content: center;
  gap: clamp(2rem, 4vh, 3.5rem);
}

/* 6번 섹션: SectionTitle 래퍼 — 부모가 이미 padding-inline 처리하므로 좌우/상단 패딩 제거 */
.catering_safety_subgroup .main-section-title-wrap,
.catering_recruit_subgroup .main-section-title-wrap {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  margin-bottom: clamp(0.8rem, 1.8vh, 1.5rem);
}

.catering_safety_recruit_inner .catering_safety_chip_row {
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-top: 0;
  transform: none;
}

.catering_safety_recruit_inner .catering_safety_chip {
  padding: clamp(1.2rem, 2.5vh, 2rem) 1.4rem;
  font-size: clamp(16px, 1.2vw, 23px);
  line-height: 1.5;
}

.catering_safety_recruit_inner .catering_recruit_blocks {
  gap: clamp(2rem, 4.5vw, 6rem);
  margin-top: 0;
}

.catering_safety_recruit_inner .catering_recruit_block h3 {
  font-size: clamp(26px, 2.1vw, 38px);
}

.catering_safety_recruit_inner .catering_recruit_block li {
  font-size: clamp(16px, 1.2vw, 23px);
}

/* 모바일 교육 섹션: stats와 캐러셀 사이 구분선 (고객문의 바 동일 스타일, 양끝 인셋) */
.catering_education_divider {
  height: 4px;
  border: 0;
  background-color: #111111;
  margin-top: clamp(0.8rem, 2vh, 1.5rem);
  margin-bottom: 0;
  margin-inline: clamp(1rem, 4vw, 2rem);
}

/* 5번 화면: 좌측 뱃지 + 우측 설명 3행 */
.catering_research_list {
  display: grid;
  gap: clamp(1.7rem, 3vh, 2.5rem);
  width: min(100%, 1140px);
  margin: 0 auto;
  transform: translateY(calc(var(--catering-research-lift-offset) + var(--catering-research-top-extra-lift)));
}

/* 5번 화면: 한 줄 아이템 */
.catering_research_item {
  display: grid;
  grid-template-columns: minmax(235px, 33%) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.8rem, 3.1vw, 2.9rem);
  transform: none;
}

/* 5번 화면: 첫 번째 아이템 위치 보정 */
.catering_research_item:nth-child(1) {
  transform: none;
}

/* 5번 화면: 두 번째 아이템 위치 보정 */
.catering_research_item:nth-child(2) {
  transform: none;
}

/* 5번 화면: 검정 뱃지 셀 */
.catering_research_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border-radius: 0.75rem;
  background-color: var(--catering-dark-cell-color);
  color: #ffffff;
  padding: 0.72rem 1.1rem;
  width: min(100%, 235px);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 700;
  line-height: 1;
}

/* 5번 화면: 우측 설명 문구 */
.catering_research_description {
  margin: 0;
  white-space: pre-line;
  width: min(100%, 52ch);
  max-width: 52ch;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.34;
  text-align: left;
}

/* 5번 화면: 중간 3개 외곽선 강조 박스 */
.catering_safety_chip_row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.2rem, 4.6vw, 4.4rem);
  margin-top: clamp(0.75rem, 1.6vh, 1.4rem);
  transform: translateY(var(--catering-research-lift-offset));
}

/* 5번 화면: 위생/안전 강조 박스 */
.catering_safety_chip {
  border: 1.5px solid rgba(52, 43, 35, 0.62);
  border-radius: 0.9rem;
  padding: 0.95rem 1.1rem;
  text-align: center;
  white-space: pre-line;
  font-size: clamp(14px, 0.98vw, 19px);
  line-height: 1.35;
  background-color: #ffffff;
}

/* 5번 화면: 하단 2개 채용 블록 */
.catering_recruit_blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 460px));
  justify-content: center;
  width: min(100%, 1080px);
  gap: clamp(1.6rem, 3.8vw, 5rem);
  margin: clamp(1rem, 2.2vh, 1.8rem) auto 0;
  transform: none;
}

/* 5번 화면: 채용 블록 카드 */
.catering_recruit_block {
  display: grid;
  justify-items: center;
}

/* 5번 화면: 채용 블록 제목 */
.catering_recruit_block h3 {
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 1.65vw, 30px);
  font-weight: 800;
  color: #000000 !important;
}

/* 채용 블록 h3 — 전역 h3{text-white} 완전 차단 */
#catering_research .catering_recruit_block h3,
#catering_safety_mobile .catering_recruit_block h3,
#catering_recruit_mobile .catering_recruit_block h3 {
  color: #000000 !important;
}

/* 5번 화면: 채용 블록 목록 */
.catering_recruit_block ul {
  margin: 1.2rem auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  width: fit-content;
  max-width: min(100%, 430px);
}

/* 5번 화면: 채용 블록 목록 항목 */
.catering_recruit_block li {
  position: relative;
  padding-left: 0.8rem;
  white-space: pre-line;
  text-align: left;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.38;
}

/* 5번 화면: 채용 블록 목록 항목 대시 */
.catering_recruit_block li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}

/* 급식서비스 태블릿/작은 데스크톱 공통 보정 */
@media (max-width: 1200px) {
/* 태블릿/작은 데스크톱: 흐름도 보드 축소 */
  .catering_flow_board {
    transform: scale(0.94);
    transform-origin: center center;
  }

/* 태블릿/작은 데스크톱: 단계 텍스트 좌측 여백 보정 */
  .catering_stage_text {
    margin-left: 1.3rem;
    margin-right: auto;
  }

/* 태블릿/작은 데스크톱: 상단 탭 간격 축소 */
  .catering_compare_top_tabs {
    gap: clamp(1.8rem, 4vw, 3.4rem);
  }
}

/* 작은 화면: 작은 화면용 화살표 세트로 교체 */
@media (max-width: 1700px) {
/* 작은 화면: 기본 화살표 숨김 */
  .catering_flow_arrow_default {
    display: none !important;
  }

/* 작은 화면: 작은 화면 화살표 표시 */
  .catering_flow_arrow_small {
    display: inline !important;
  }

/* 작은 화면: 기본 Needs 연결선 숨김 */
  .catering_flow_needs_line_default {
    display: none !important;
  }

/* 작은 화면: 작은 화면 Needs 연결선 표시 */
  .catering_flow_needs_line_small {
    display: inline !important;
  }
}

/* 급식서비스 태블릿 구간 보정 */
@media (max-width: 1024px) {
/* 태블릿: 카드 사이 여백 없이 1장씩 표시 */
  .catering_education_cards_wrap {
    --catering-education-gap: 0px;
    padding-inline: 0;
  }

/* 태블릿: 흐름도 보드 추가 축소 */
  .catering_flow_board {
    transform: scale(0.82);
    height: clamp(420px, 62vh, 560px);
  }

/* 태블릿: 메뉴 관리 패널 1열 전환 */
  .catering_stage_grid {
    grid-template-columns: 1fr;
  }

/* 태블릿: 메뉴 관리 패널 최소 높이 */
  .catering_stage_panel {
    min-height: 32svh;
  }

/* 태블릿: 접시 이미지 크기 보정 */
  .catering_stage_image {
    width: var(--catering-plate-width, 134%) !important;
    height: var(--catering-plate-height, 102%) !important;
    right: var(--catering-plate-right, -82%) !important;
    top: var(--catering-plate-top, 50%) !important;
    transform: translateY(-50%) !important;
  }

/* 태블릿: 접시 이미지 래퍼 inset 유지 */
  .catering_stage_image_wrap {
    inset: 0;
  }

/* 태블릿: 비교표 1열 전환 */
  .catering_compare_table {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    width: min(100%, 720px);
    padding-inline: 0.35rem;
  }

/* 태블릿: 비교표 행 묶음 2열 그리드 전환 */
  .catering_compare_row_group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
  }

/* 태블릿: 구분 셀 전체 너비 확장 및 좌측 정렬 */
  .catering_compare_cell_side {
    grid-column: 1 / -1;
    justify-content: flex-start;
    text-align: left;
    padding-left: 1rem;
  }

  .catering_compare_cell,
  .catering_compare_cell_head,
/* 태블릿: 비교표 셀 최소 높이 통일 */
  .catering_compare_cell_side {
    min-height: 52px;
  }

/* 태블릿: 프로세스 카드 2열 전환 */
  .catering_process_row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --catering-process-gap: clamp(1.1rem, 3vw, 2rem);
  }

/* 태블릿: 카드 사이 화살표 숨김 */
  .catering_process_arrow {
    display: none;
  }

/* 태블릿: 교육 카드 간격 제거 */
  .catering_education_cards {
    gap: 0;
  }

/* 태블릿: 교육 카드 1열 전환 */
  .catering_education_card {
    flex-basis: 100%;
    max-width: none;
  }

/* 태블릿: 교육 화살표 버튼 위치 보정 */
  .catering_education_nav {
    top: 50%;
    font-size: 52px;
  }

/* 태블릿: 안전 강조 박스 1열 전환 */
  .catering_safety_chip_row {
    grid-template-columns: 1fr;
  }
}

/* 모바일 전용 요소: 데스크탑 기본 숨김 */
.catering_process_mobile_only { display: none; }
.catering_mobile_section { display: none; }
.catering_mobile_section_title { display: none; }


/* 데스크탑 전용 래퍼: 항상 표시 */
.catering_education_desktop_content { display: contents; }

/* 급식서비스 모바일 구간 보정 */
@media (max-width: 768px) {
/* 모바일: 첫 화면 헤더 오프셋 축소 */
  .catering_screen_with_header {
    padding-top: calc(var(--site-header-height-mobile) + 0.1rem);
  }

/* 모바일: 흐름도 보드 폭/높이 보정 */
  .catering_flow_board {
    width: min(100%, 420px);
    height: clamp(470px, 76svh, 560px);
    transform: none;
  }

/* 급식서비스 화면: 모바일 1번 섹션 내부 여백 보정 */
  #catering_flow .catering_screen_inner {
    width: 100%;
    padding-inline: 0.65rem;
  }

/* 급식서비스 화면: 모바일 1번 섹션 상단 정렬 보정 */
  #catering_flow .catering_screen_body {
    align-items: flex-start;
    padding-top: clamp(0.9rem, 3vh, 1.4rem);
  }

/* 급식서비스 화면: 모바일 1번 섹션 노드 공통 크기/줄바꿈 보정 */
  #catering_flow .catering_flow_node {
    min-height: 46px;
    padding: 0.5rem 0.68rem;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.24;
    white-space: normal;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

/* 급식서비스 화면: 모바일 1번 섹션 강조 노드 크기 보정 */
  #catering_flow .catering_flow_node_outline {
    min-height: 44px;
    border-radius: 0.85rem;
    padding: 0.48rem 0.75rem;
  }

/* 급식서비스 화면: 모바일 상단 1번 노드 */
  #catering_flow .catering_flow_node_left_top {
    left: 2%;
    top: 20%;
    width: 30%;
  }

/* 급식서비스 화면: 모바일 상단 2번 노드 */
  #catering_flow .catering_flow_node_left_mid {
    left: 35%;
    top: 20%;
    width: 30%;
  }

/* 급식서비스 화면: 모바일 상단 3번 노드 */
  #catering_flow .catering_flow_node_left_bottom {
    left: 68%;
    top: 20%;
    width: 30%;
  }

/* 급식서비스 화면: 모바일 중단 1번 노드(본사 메뉴팀 검증) */
  #catering_flow .catering_flow_node_center_top {
    left: 21%;
    top: 40%;
    width: 58%;
  }

/* 급식서비스 화면: 모바일 중단 2번 노드(사업장 메뉴 구성) */
  #catering_flow .catering_flow_node_center_mid {
    left: 21%;
    top: 54%;
    width: 58%;
  }

/* 급식서비스 화면: 모바일 하단 1번 노드(운영 결과 분석) */
  #catering_flow .catering_flow_node_right_mid {
    left: 21%;
    top: 68%;
    width: 58%;
  }

/* 급식서비스 화면: 모바일 하단 2번 노드(고객 입맛 식단 구성) */
  #catering_flow .catering_flow_node_right_end {
    left: 21%;
    top: 82%;
    width: 58%;
  }

/* 급식서비스 화면: 모바일 1번 섹션 상단 강조 노드 */
  #catering_flow .catering_flow_node_top_right {
    left: 20%;
    right: auto;
    top: 2%;
    width: 60%;
  }

/* 급식서비스 화면: 모바일에서는 모바일 전용 흐름선 세트 사용 */
  #catering_flow .catering_flow_lines_default {
    display: none;
  }

/* 급식서비스 화면: 모바일 흐름선 표시 */
  #catering_flow .catering_flow_lines_mobile {
    display: inline;
  }

/* 모바일: 단계 텍스트 제목 크기 확대 */
  .catering_stage_text strong {
    font-size: clamp(25px, 6vw, 34px);
  }

/* 모바일: 3번 섹션 전체 간격 축소 */
  .catering_compare_inner {
    gap: clamp(0.5rem, 1.2vh, 1rem);
    padding-inline: 1rem;
  }

/* 모바일: 상단 탭 2열 유지 + 간격 축소 */
  .catering_compare_top_tabs {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

/* 모바일: 상단 탭 라벨 폭 확장 */
  .catering_compare_top_tabs span {
    min-width: 0;
    width: 100%;
    padding: 0.55rem 0.6rem;
    font-size: clamp(12px, 3.2vw, 14px);
  }

/* 모바일: 비교표 리디자인 */
  .catering_compare_table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-inline: 0;
    margin-top: 0;
    border-radius: 0;
    overflow: visible;
    border: none;
    background-color: transparent;
    box-shadow: 0 2px 16px 0 rgba(60,45,30,0.10);
  }

/* 구분 헤더 숨김 */
  .catering_compare_cell_head:first-child {
    display: none;
  }

/* 일반업체 헤더 */
  .catering_compare_cell_head:nth-child(2) {
    background-color: #f0ede8;
    color: #7a7167;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 600;
    min-height: 40px;
    border-radius: 0;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #dedad4;
  }

/* 더채움 헤더 */
  .catering_compare_cell_head:nth-child(3) {
    background-color: var(--catering-table-dark-color);
    color: #ffffff;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    min-height: 40px;
    border-radius: 0;
    letter-spacing: 0.04em;
    border-bottom: 2px solid rgba(255,255,255,0.15);
  }

/* 행 묶음: 전체 너비 + 2열 */
  .catering_compare_row_group {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

/* 카테고리 레이블 */
  .catering_compare_cell_side {
    grid-column: 1 / -1;
    background-color: #9e9b99 !important;
    color: #ffffff !important;
    justify-content: flex-start;
    padding-left: 0.9rem;
    font-size: clamp(10px, 2.6vw, 11px);
    font-weight: 700;
    min-height: 24px;
    letter-spacing: 0.08em;
    text-transform: none;
    border-top: 1px solid #c8c4be;
    border-radius: 0.5rem 0.5rem 0 0;
  }

/* 일반업체 값 셀 */
  .catering_compare_cell {
    min-height: 46px;
    font-size: clamp(11px, 2.8vw, 12px);
    padding: 0.45rem 0.65rem;
    background-color: #f7f5f2;
    color: #888078;
    font-weight: 400;
    border-top: 1px solid #eae6e0;
    text-align: center;
    justify-content: center;
  }

/* 더채움 값 셀 */
  .catering_compare_row_group .catering_compare_cell:last-child {
    background-color: #fdfcfb;
    color: var(--catering-table-dark-color);
    font-weight: 700;
    border-left: 2px solid var(--catering-table-dark-color);
    border-top: 1px solid #e8e4de;
  }

/* 모바일: 헤더 둥근 모서리 재정의 */
  .catering_compare_table > .catering_compare_cell_head:nth-child(1) {
    border-top-left-radius: 0;
  }
  .catering_compare_table > .catering_compare_cell_head:nth-child(2) {
    border-top-left-radius: 1rem;
  }
  .catering_compare_table > .catering_compare_cell_head:nth-child(3) {
    border-top-right-radius: 1rem;
  }
/* 첫 카테고리 레이블은 상단 border 제거 */
  .catering_compare_row_group:first-of-type .catering_compare_cell_side {
    border-top: none;
  }

/* 마지막 행 셀 하단 모서리 */
  .catering_compare_row_group:last-of-type .catering_compare_cell:nth-child(2) {
    border-bottom-left-radius: 1rem;
  }
  .catering_compare_row_group:last-of-type .catering_compare_cell:last-child {
    border-bottom-right-radius: 1rem;
  }

/* 모바일 전용 프로세스 카드: 데스크탑에서 숨김 */
.catering_process_mobile_only {
  display: none;
}

/* 섹션3 프로세스 카드: 모바일에서 숨김 */
#catering_compare .catering_process_row {
  display: none;
}

/* 모바일 전용 섹션(교육): 데스크탑에서 숨김 */
.catering_mobile_section {
  display: none;
}

/* 교육 지표+캐러셀 데스크탑 래퍼: 데스크탑에서 grid 참여 */
.catering_education_desktop_content {
  display: contents;
}

/* 모바일: 섹션3 프로세스 카드 숨기고 섹션4 모바일 전용 표시 */
  #catering_compare .catering_process_row {
    display: none;
  }

  .catering_process_mobile_only {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    padding-inline: 1.5rem;
    gap: 0.5rem;
  }

  .catering_process_mobile_down_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.2rem;
    flex-shrink: 0;
  }

  .catering_process_mobile_down_arrow .catering_process_arrow_img {
    width: 18px !important;
    height: 9px !important;
    transform: rotate(90deg);
  }

@keyframes catering_mobile_process_enter {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

  .catering_process_mobile_only .catering_process_card.catering_compare_visible,
  .catering_process_mobile_down_arrow.catering_compare_visible {
    animation-name: catering_mobile_process_enter;
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
  }

/* 모바일: 교육 지표+캐러셀 섹션4에서 숨기고 전용 섹션에서 표시 */
  .catering_education_desktop_content {
    display: none;
  }

/* 모바일: #catering_research 내 위생/채용 숨김 — 별도 모바일 섹션에서 표시 */
  #catering_research .catering_safety_chip_row,
  #catering_research .catering_recruit_blocks {
    display: none;
  }

  .catering_mobile_section {
    display: flex;
    flex-direction: column;
  }

/* 모바일: 공통 섹션 제목 표시 */
  .catering_mobile_section_title {
    display: block;
    padding-left: 2.25rem;
    padding-right: 1.35rem;
  }

/* 모바일: 위생/채용 제목은 기존 padding-left: 0 규칙보다 우선 적용 */
  #catering_research .catering_mobile_section_title,
  #catering_safety_mobile .catering_safety_subgroup .catering_mobile_section_title,
  #catering_safety_mobile .catering_recruit_subgroup .catering_mobile_section_title,
  #catering_recruit_mobile .catering_recruit_subgroup .catering_mobile_section_title {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #catering_safety_mobile .catering_safety_subgroup .catering_mobile_section_title,
  #catering_safety_mobile .catering_recruit_subgroup .catering_mobile_section_title,
  #catering_recruit_mobile .catering_recruit_subgroup .catering_mobile_section_title {
    margin-bottom: 1.1rem;
  }

/* 모바일: 제목과 본문을 배경 이미지보다 위 레이어에 고정 */
  #catering_research .catering_screen_body,
  #catering_safety_mobile .catering_screen_body,
  #catering_recruit_mobile .catering_screen_body {
    position: relative;
    z-index: 2;
  }

  #catering_research .catering_research_inner,
  #catering_safety_mobile .catering_safety_recruit_inner,
  #catering_recruit_mobile .catering_safety_recruit_inner {
    position: relative;
    z-index: 2;
  }

/* 모바일: 프로세스 카드 본문 최소 높이 축소 */
  .catering_process_card_body {
    min-height: 80px;
    font-size: clamp(11px, 3vw, 13px);
  }

/* 모바일: 프로세스 카드 헤더 높이 축소 */
  .catering_process_card_head {
    height: 36px;
    font-size: clamp(12px, 3.2vw, 14px);
  }

/* 모바일: 교육 지표 — 세로 flex로 행마다 독립 배치 */
  .catering_education_stats {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    align-items: center;
  }

  /* 모바일: 각 행은 가로 flex, 라벨+값 고정 너비로 어떤 상황에도 이동 없음 */
  .catering_education_stat_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
  }

  /* 모바일: 라벨 — 고정 152px, transform/transition 완전 차단 */
  .catering_education_stat_label {
    width: 152px !important;
    flex-shrink: 0 !important;
    text-align: center;
    white-space: nowrap;
    transform: none !important;
    transition: none !important;
  }

  .catering_education_stat_label.counting {
    transform: none !important;
    transition: none !important;
  }

  /* 모바일: 값 — 고정 80px, transform/transition 완전 차단 */
  .catering_education_stat_value {
    width: 80px !important;
    flex-shrink: 0 !important;
    margin-top: 0;
    transform: none !important;
    transition: none !important;
  }

  .catering_education_stat_value.counting {
    transform: none !important;
    transition: none !important;
  }

/* 모바일: 교육 카드 래퍼 좌우 패딩 + 상단 여백 축소 */
  .catering_education_cards_wrap {
    padding-inline: 1.8rem;
    margin-top: clamp(0.6rem, 1.5vh, 1.2rem);
  }

/* 모바일: 모바일 교육 섹션 inner 간격 축소 */
  .catering_mobile_section .catering_education_inner {
    gap: clamp(1.2rem, 2.5vh, 2rem);
  }

/* 모바일: 교육 화살표 버튼 크기 축소 */
  .catering_education_nav {
    font-size: 40px;
  }

/* 모바일: 왼쪽 화살표 버튼 위치 */
  .catering_education_nav_left {
    left: 0.9rem;
  }

/* 모바일: 오른쪽 화살표 버튼 위치 */
  .catering_education_nav_right {
    right: 0.9rem;
  }

/* 모바일: 메뉴 연구 개발 섹션 좌우 여백 및 세로 간격 */
  #catering_research .catering_research_inner {
    width: 100%;
    padding-inline: 0;
    gap: clamp(2.35rem, 4.8vh, 3.45rem);
  }

/* 모바일: 메뉴 연구 개발 목록을 화면 안쪽에 안정적으로 배치 */
  #catering_research .catering_research_list {
    width: 100%;
    padding-inline: 1.35rem 1.35rem;
    padding-bottom: 4rem;
    gap: clamp(0.85rem, 1.8vh, 1.15rem);
    transform: none;
  }

/* 모바일: 레시피 아이템 1열 전환 */
  #catering_research .catering_research_item {
    grid-template-columns: 1fr;
    row-gap: 0.45rem;
  }

/* 모바일: 메뉴 연구 개발 카드 제목 */
  #catering_research .catering_research_badge {
    justify-self: stretch;
    width: 100%;
    min-height: 40px;
    border-radius: 0.82rem;
    padding: 0.68rem 0.9rem;
    margin-bottom: 0.5rem;
    font-size: clamp(14px, 3.7vw, 16px);
    line-height: 1.2;
  }

/* 모바일: 메뉴 연구 개발 본문 텍스트 박스 */
  #catering_research .catering_research_description {
    width: 100%;
    max-width: none;
    border: 1.5px solid rgba(52, 43, 35, 0.62);
    border-radius: 0.9rem;
    padding: 0.8rem 0.95rem;
    margin-bottom: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(63, 48, 38, 0.08);
    white-space: pre-line;
    font-size: clamp(14px, 3.7vw, 16px);
    line-height: 1.45;
    text-align: left;
  }

/* 모바일: 위생·안전 관리 및 채용안내 섹션 공통 여백 */
  .catering_safety_recruit_inner {
    width: 100%;
    padding-inline: 0;
    gap: clamp(1.55rem, 2.9vh, 2rem);
    transform: translateY(-1.8rem);
  }

/* 모바일: 위생·안전 관리/채용안내 본문 그룹 */
  .catering_safety_subgroup,
  .catering_recruit_subgroup {
    display: grid;
    width: 100%;
    gap: 0;
  }

/* 모바일: 위생 안내 텍스트 박스 */
  .catering_safety_recruit_inner .catering_safety_chip_row {
    grid-template-columns: 1fr;
    padding-inline: 1.5rem;
    gap: 0.72rem;
    margin-top: 0;
    transform: none;
  }

  .catering_safety_recruit_inner .catering_safety_chip {
    padding: 0.82rem 0.95rem;
    text-align: center;
    font-size: clamp(14px, 3.7vw, 16px);
    line-height: 1.45;
    box-shadow: 0 8px 20px rgba(63, 48, 38, 0.08);
  }

/* 모바일: 채용안내 카드 목록 */
  .catering_safety_recruit_inner .catering_recruit_blocks {
    grid-template-columns: 1fr;
    width: 100%;
    padding-inline: 1.5rem;
    gap: 0.85rem;
    margin-top: 0;
  }

  .catering_safety_recruit_inner .catering_recruit_block {
    justify-items: start;
    border: 1.5px solid rgba(52, 43, 35, 0.38);
    border-radius: 0.95rem;
    padding: 1rem 1.05rem;
    background-color: #ffffff;
    box-shadow: 0 10px 22px rgba(63, 48, 38, 0.08);
    color: #111111;
    opacity: 1;
  }

  .catering_safety_recruit_inner .catering_recruit_block h3 {
    width: 100%;
    text-align: left;
    font-size: clamp(17px, 4.6vw, 20px);
    color: #111111 !important;
  }

  .catering_safety_recruit_inner .catering_recruit_block ul {
    margin-top: 0.7rem;
    width: 100%;
    max-width: none;
  }

  .catering_safety_recruit_inner .catering_recruit_block li {
    font-size: clamp(14px, 3.7vw, 16px);
    line-height: 1.42;
    color: #111111;
  }

/* 모바일: 2번 섹션 이미지 — 세로 스택에 맞게 아래에서 위로 페이드인 */
@keyframes catering_stage_image_enter_mobile {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

  .catering_stage_panel_visible .catering_stage_image_wrap {
    animation-name: catering_stage_image_enter_mobile;
    animation-duration: 0.72s;
  }

/* 모바일: 접시 이미지 크기 및 위치*/
  .catering_stage_image {
    width: var(--catering-plate-width, 110%) !important;
    height: var(--catering-plate-height, 100%) !important;
  }
  .catering_stage_image_left,
  .catering_stage_image_center,
  .catering_stage_image_right {
    --catering-plate-right: -55%;
    --catering-plate-top: 50%;
  }

/* 모바일: 툴팁 — right:0 대신 앵커 중앙 기준 가운데 정렬로 변경 (right:0이면 왼쪽으로 밀려 잘림) */
  .catering-hover-tooltip,
  .catering-hover-tooltip-right {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(12px);
  }

  .catering_flow_node_hover_anchor:is(:hover, :focus-visible, :focus-within) .catering-hover-tooltip {
    transform: translateX(-50%) translateY(0);
  }

  .catering-hover-tooltip::before {
    /* 툴팁이 앵커 중앙 정렬이므로 노드 우측 끝에 맞춰 right 보정 */
    right: calc(min(44vw, 160px) - 30vw + 2.1rem);
    left: auto;
    transform: none;
  }

/* 모바일: 단계 텍스트 왼쪽 정렬 및 크기 축소 */
  .catering_stage_text {
    margin-left: 1rem;
    margin-right: auto;
    width: min(72%, 260px);
  }

  .catering_stage_text strong {
    font-size: clamp(15px, 4vw, 18px);
  }

  .catering_stage_text p {
    font-size: clamp(13px, 3.5vw, 15px);
    min-height: 0;
  }
}