/* ---------------- 사업영역 ---------------- */

/* 페이지 배경/스크롤 */
.business-page {
  background-color: #FAFAF8;
  scrollbar-gutter: stable;
}

/* 라이트 헤더 톤 */
.business-page .site-header-light {
  border-bottom: none;
}

/* 화면 스냅 프레임 */
.business-screen {
  height: 100svh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #FAFAF8;
}

/* 해시 이동용 앵커 */
.business-screen-anchor {
  height: 0;
}

/* 모바일 전용 섹션은 데스크톱에서 숨긴다 */
.business-mobile-only {
  display: none;
}

/* 사업영역 첫 섹션 헤더 표시 제어 */
.business-header-desktop-only {
  display: block;
}

/* 태블릿 전용 헤더 기본 숨김 */
.business-header-tablet-only {
  display: none;
}

/* 헤더 포함 첫 화면 상단 여유 */
.business-screen-with-header {
  padding-top: calc(var(--site-header-height) + 0.1rem);
}

/* 본문 세로 중앙 정렬 */
.business-screen-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

/* 사업 영역 첫 화면 배경 이미지 영역 */
.business-overview-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 사업 영역 첫 화면 배경 이미지 투명도 */
.business-overview-background-image {
  opacity: 0.30;
}

/* 첫 화면 배경 이미지 위 연초록 오버레이 */
.business-overview-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(194, 255, 217, 0.10);
}

.main-section-title-wrap {
  background-color: #FAFAF8;
}

/* 배경 이미지가 있는 섹션에서는 섹션 타이틀 배경을 투명으로 */
#business-event .main-section-title-wrap,
#business-distribution .main-section-title-wrap,
.business-mobile-only .main-section-title-wrap {
  background-color: transparent;
}

.business-page .site-header-light {
  background-color: rgba(250, 250, 248, 0.1);
  backdrop-filter: blur(3px);
}

/* 본문 폭 기준 */
.business-screen-inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  max-width: 1320px;
  display: grid;
  align-content: center;
  gap: clamp(0.8rem, 1.9vh, 1.3rem);
}

/* 모바일 화면 공통 폭 컨테이너 */
.business-mobile-inner {
  margin: 0 auto;
  width: min(100%, 390px);
  display: grid;
  align-content: center;
  gap: 0.9rem;
  padding: 0 1rem;
}

/* 모바일 화면 상단 라벨 */
.business-mobile-kicker {
  margin: 0;
  color: #6b7a8f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* 모바일 1번 화면 카드 목록 */
  .business-mobile-value-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.75rem;
  }

/* 모바일 1번 화면 카드 높이 보정 */
.business-mobile-value-card {
  min-height: 142px;
  gap: 0.8rem;
  border-radius: 1.35rem;
  padding: 0.88rem 0.9rem 0.92rem;
}

/* 모바일 운영강점 제목은 2열 카드 폭에 맞춰 줄바꿈을 허용한다 */
.business-mobile-value-title {
  white-space: normal;
  word-break: keep-all;
  font-size: clamp(14px, 3.9vw, 16px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* 모바일 운영강점 본문은 자동 줄바꿈으로 카드 높이를 정리한다 */
.business-mobile-value-card .business-value-copy {
  font-size: 11.5px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* 모바일 운영강점 본문 강제 줄바꿈은 숨겨 자연스럽게 이어지게 한다 */
.business-mobile-value-card .business-value-copy br {
  display: none;
}

/* 모바일 운영강점 강조 문구 크기 보정 */
.business-mobile-value-card .business-value-copy strong {
  font-size: 12.5px;
}

/* 모바일 급식서비스 섹션 정렬 */
.business-mobile-catering-inner {
  gap: 1.35rem;
}

/* 모바일 급식서비스 전체 높이 사용 */
.business-mobile-catering-screen-body {
  align-items: stretch;
}

/* 모바일 급식서비스 3단 스트립 */
.business-mobile-catering-strips {
  display: grid;
  width: 100vw;
  height: 100%;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

/* 모바일 급식서비스 각 행 */
.business-mobile-catering-strip {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* 모바일 급식서비스 텍스트 오버레이 */
.business-mobile-catering-copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 0 0.7rem;
  text-align: center;
  color: #ffffff;
}

/* 모바일 급식서비스 제목 */
.business-mobile-catering-title {
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.08;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

/* 모바일 급식서비스 설명 */
.business-mobile-catering-description {
  margin: 0;
  width: min(100%, 40ch);
  color: #ffffff;
  white-space: pre-line;
  font-size: 14.5px;
  line-height: 1.58;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

/* 모바일 2번 화면 단일 패널 카드 */
.business-mobile-panel-shell {
  display: grid;
  justify-items: center;
  gap: 1.15rem;
  overflow: visible;
  background-color: transparent;
  box-shadow: none;
}

/* 모바일 급식서비스 원형 이미지 기준판 */
.business-mobile-panel-orbit {
  width: min(100%, 292px);
}

/* 모바일 2번 화면 이미지 영역 */
.business-mobile-panel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

/* 모바일 급식서비스 원형 이미지 프레임 */
.business-mobile-panel-media-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

/* 모바일 급식서비스 고리 장식 */
.business-mobile-panel-ring {
  position: absolute;
  inset: -17%;
  width: 134%;
  height: 134%;
  pointer-events: none;
  transform: translateX(2%) translateY(2%) rotate(-56deg);
}

/* 모바일 급식서비스 고리 선 */
.business-mobile-panel-ring ellipse {
  fill: none;
  stroke: #3f3026;
  stroke-width: 1.2;
}

/* 모바일 2번 화면 본문 영역 */
.business-mobile-panel-body {
  display: grid;
  justify-items: center;
  gap: 0.78rem;
  max-width: 320px;
  padding: 0;
  text-align: center;
}

/* 모바일 2번 화면 제목 */
.business-mobile-panel-title {
  margin: 0;
  color: #111111;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}

/* 모바일 2번 화면 설명 */
.business-mobile-panel-description {
  margin: 0;
  color: #222222;
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.62;
}

/* 모바일 이벤트 전용 레이아웃 */
.business-mobile-event-inner {
  justify-items: center;
  gap: 1rem;
}

/* 모바일 이벤트 상단 2개 항목 */
.business-mobile-event-top {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* 모바일 이벤트 하단 1개 항목 */
.business-mobile-event-bottom {
  display: grid;
  width: 100%;
  justify-items: center;
}

/* 모바일 이벤트 문구 묶음 */
.business-mobile-event-copy {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
}

/* 모바일 이벤트 하단 문구 폭 */
.business-mobile-event-copy-bottom {
  width: min(100%, 180px);
}

/* 모바일 이벤트 제목은 원형 배지 대신 텍스트로 정리한다 */
.business-mobile-event-heading {
  margin: 0;
  color: #111111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

/* 모바일 이벤트 이미지 */
.business-mobile-event-visual {
  position: relative;
  width: min(100%, 224px);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  overflow: visible;
}

/* 모바일 이벤트 고리 위치 */
.business-mobile-event-ring {
  inset: -58%;
  width: 216%;
  height: 216%;
  transform: translateX(1%) translateY(-1%) rotate(-52deg);
}

/* 모바일 이벤트 고리 선 두께를 조금 더 강조한다 */
.business-mobile-event-ring ellipse {
  stroke-width: 1.5;
}

/* 모바일 이벤트 카드 목록 */
.business-mobile-event-list {
  display: grid;
  gap: 0.6rem;
}

/* 모바일 이벤트 카드 */
.business-mobile-event-card {
  border: 1px solid rgba(63, 48, 38, 0.12);
  border-radius: 1.2rem;
  background-color: #ffffff;
  padding: 0.8rem 0.9rem;
}

/* 모바일 이벤트 카드 제목 */
.business-mobile-event-title {
  margin: 0;
  color: #111111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

/* 모바일 이벤트 카드 설명 */
.business-mobile-event-description {
  margin: 0;
  color: #222222;
  white-space: pre-line;
  font-size: 12.5px;
  line-height: 1.55;
}

/* 모바일 식자재유통 정보 카드 목록 */
.business-mobile-info-grid {
  display: grid;
  gap: 0.85rem;
}

/* 모바일 식자재유통 정보 카드 */
.business-mobile-info-card {
  border: 1.5px solid #3f3026;
  border-radius: 1.35rem;
  background-color: #ffffff;
  padding: 0.95rem 0.95rem 1rem;
}

/* 모바일 식자재유통 정보 카드 제목 */
.business-mobile-info-card-title {
  margin: 0;
  color: #111111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

/* 모바일 식자재유통 정보 카드 설명 */
.business-mobile-info-card-copy {
  margin: 0.55rem 0 0;
  color: #111111;
  white-space: pre-line;
  font-size: 12.5px;
  line-height: 1.56;
}

/* 모바일 식자재 구매기준 섹션 높이 정렬 */
.business-mobile-criteria-screen-body {
  align-items: center;
}

/* 모바일 식자재 구매기준 본문 영역 */
.business-mobile-criteria-inner {
  gap: 0.78rem;
  align-content: center;
  justify-items: center;
}

/* 모바일 식자재 구매기준 하단 안전 기준 묶음 */
.business-mobile-criteria-compliance {
  width: 100%;
  display: grid;
  justify-items: center;
}

/* 모바일 식자재 구매기준 박스 */
.business-mobile-criteria-box {
  border: 1.5px solid #3f3026;
  border-radius: 1.35rem;
  background-color: #ffffff;
  padding: 1rem 0.95rem 1.05rem;
}

/* 모바일 식자재 구매기준 설명 */
.business-mobile-criteria-copy {
  margin: 0.58rem 0 0;
  color: #111111;
  font-size: 13.5px;
  line-height: 1.52;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* 모바일 식자재 안전 기준 목록 */
.business-mobile-compliance-list {
  display: grid;
  width: 100%;
  gap: 0.56rem;
  justify-items: center;
}

/* 모바일 식자재 안전 기준 항목 */
.business-mobile-compliance-item {
  width: min(100%, 352px);
  border-radius: 9999px;
  background-color: #dbd8d3;
  padding: 0.62rem 0.9rem;
  color: #111111;
  font-size: 12.5px;
  line-height: 1.42;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* 1번 화면 카드 그리드 */
.business-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.15rem, 3.6vw, 3.1rem);
  padding: clamp(0.95rem, 1.7vh, 1.35rem) clamp(0.7rem, 1.45vw, 1.3rem);
}

/* 1번 화면 카드 */
.business-value-card {
  min-height: clamp(154px, 20.3vh, 208px);
  width: 100%;
  margin-inline: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.2rem;
  background-color: var(--business-overview-card-bg-1);
  color: var(--business-value-card-text);
  padding: clamp(0.56rem, 1.05vh, 0.78rem) clamp(0.76rem, 1.08vw, 1.08rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.52rem, 2.95vh, 2.2rem);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  transform: translateY(0) scale(1);
  transform-origin: center;
}

/* 카드 호버/포커스 시 위로 떠오르는 효과 */
.business-value-card:hover,
.business-value-card:focus-visible {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 18px 34px rgba(63, 48, 38, 0.18);
}

/* 카드 본문 레이어 기준 */
.business-value-card > * {
  position: relative;
  z-index: 1;
}

/* 1번 화면 카드별 배경색(1~6 고정 카드 순서 대응) */
.business-value-card:nth-child(1) {
  background-color: var(--business-overview-card-bg-1);
}

.business-value-card:nth-child(2) {
  background-color: var(--business-overview-card-bg-2);
}

.business-value-card:nth-child(3) {
  background-color: var(--business-overview-card-bg-3);
}

.business-value-card:nth-child(4) {
  background-color: var(--business-overview-card-bg-4);
}

.business-value-card:nth-child(5) {
  background-color: var(--business-overview-card-bg-5);
}

.business-value-card:nth-child(6) {
  background-color: var(--business-overview-card-bg-6);
}

/* 1번 화면 카드 제목 */
.business-value-title {
  margin: -0.46rem 0 0;
  color: #ffffff;
  font-size: clamp(18px, 2.2vh, 24px);
  font-weight: 500;
  line-height: 1.35;
}

/* 1번 화면 카드 본문 */
.business-value-copy {
  margin: 0;
  color: #ffffff;
  font-size: clamp(12px, 1.5vh, 14px);
  line-height: clamp(20px, 2.35vh, 24px);
  letter-spacing: -0.01em;
}

/* 1번 화면 카드 강조 */
.business-value-copy strong {
  font-size: clamp(14px, 1.85vh, 17px);
  font-weight: 700;
  line-height: inherit;
}

/* 급식서비스 화면 풀블리드 섹션 */
#business-catering.business-screen.business-screen-catering {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  margin-left: 0;
  margin-right: 0;
  padding: 0 !important;
}

/* 급식서비스 화면 본문 래퍼·그리드 풀폭 */
#business-catering .business-screen-body,
#business-catering .business-panel-fullbleed,
#business-catering .business-panel-grid {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 급식서비스 화면 본문 스트레치 */
.business-screen-catering .business-screen-body {
  align-items: stretch;
  padding-top: 0;
  min-height: 100%;
}

/* 급식서비스 화면 전체폭 콘텐츠 래퍼 */
.business-panel-fullbleed {
  flex: 1;
  width: 100vw;
  height: 100%;
  min-height: 100%;
}

/* 급식서비스 화면 3열 이미지 그리드 */
.business-panel-grid {
  overflow: hidden;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 급식서비스 화면 패널 카드 */
.business-panel-card {
  position: relative;
  min-height: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(96px);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
  will-change: transform, opacity;
}

/* 급식서비스 화면 진입 시 카드 오른쪽에서 순서대로 등장 */
#business-catering.is-visible .business-panel-card {
  opacity: 1;
  transform: translateX(0);
}

/* 급식서비스 화면 1번 카드 딜레이 */
#business-catering.is-visible .business-panel-card:nth-child(1) {
  transition-delay: 0.08s;
}

/* 급식서비스 화면 2번 카드 딜레이 */
#business-catering.is-visible .business-panel-card:nth-child(2) {
  transition-delay: 0.32s;
}

/* 급식서비스 화면 3번 카드 딜레이 */
#business-catering.is-visible .business-panel-card:nth-child(3) {
  transition-delay: 0.56s;
}

/* 급식서비스 화면 배경 오버레이 */
.business-panel-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}

/* 급식서비스 화면 텍스트 오버레이 영역 */
.business-panel-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.45rem, 2.7vh, 2.15rem);
  padding: 0 clamp(1.65rem, 2.35vw, 2.4rem);
  text-align: center;
  color: #ffffff;
}

/* 급식서비스 화면 카드 제목 */
.business-panel-title {
  margin: 0;
  font-size: clamp(18.5px, 1.32vw, 22px);
  font-weight: 700;
  line-height: 1.1;
}

/* 급식서비스 화면 카드 설명 */
.business-panel-description {
  margin: 0;
  width: min(92%, 36ch);
  max-width: 36ch;
  white-space: pre-line;
  font-size: clamp(16.4px, 1.17vw, 19px);
  line-height: 1.68;
  letter-spacing: -0.01em;
}

/* 급식서비스·이벤트 화면: 이미지 필터 초기화 */
.business-catering-image,
.business-event-image {
  filter: none;
}

/* 3번 화면 이벤트 레이아웃 */
.business-event-inner {
  gap: clamp(0.65rem, 1.2vh, 0.95rem);
}

/* 3번 화면 오브젝트 기준판 */
.business-event-orbit {
  position: relative;
  width: min(100%, 1240px);
  margin: 0 auto;
  min-height: clamp(530px, 68vh, 740px);
  padding-bottom: clamp(0.65rem, 1.35vh, 1rem);
  transform: translateY(-1.45vh);
}

/* 3번 화면 중앙 이미지 */
.business-event-visual {
  position: absolute;
  left: 50%;
  top: 45.6%;
  transform: translate(-50%, -50%);
  width: clamp(270px, 33vw, 430px);
  aspect-ratio: 3 / 4;
}

/* 3번 화면 이미지 마스크 */
.business-event-image-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

/* 3번 화면 고리 */
.business-event-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440%;
  height: 136%;
  z-index: 4;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
}

/* 3번 화면 스파클 별 */
.business-event-sparkle {
  fill: #3f3026;
}



/* 3번 화면 텍스트 박스 */
.business-event-copy {
  position: absolute;
  text-align: center;
  width: min(100%, 340px);
  z-index: 6;
}

/* 3번 화면 학교 위치 */
.business-event-copy-11 {
  left: 6%;
  top: 8.2%;
}

/* 3번 화면 산업체 위치 */
.business-event-copy-1 {
  right: 2%;
  top: 8%;
}

/* 3번 화면 요양원 위치 */
.business-event-copy-6 {
  left: 50%;
  bottom: -3.7rem;
  transform: translateX(-50%);
}

/* 3번 화면 제목 */
.business-event-title {
  margin: 0;
  color: #111111;
  font-size: var(--section-title-font-size);
  font-weight: 700;
  line-height: 1.2;
}

/* 3번 화면 설명 */
.business-event-description {
  margin: 0.72rem 0 0;
  white-space: pre-line;
  color: #171717;
  font-size: clamp(14.2px, 1.05vw, 17px);
  line-height: 1.62;
  letter-spacing: -0.01em;
}

/* 4번 화면 배치 */
.business-distribution-inner {
  --distribution-item-gap: clamp(1.05rem, 1.75vw, 1.5rem);
  --distribution-chip-gap: clamp(2.2rem, 3.6vw, 3.4rem);
  gap: clamp(3.6rem, 7.4vh, 5.8rem);
  transform: translateY(-2.2vh);
}

/* 4번 화면 상단 3열 */
.business-distribution-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--distribution-item-gap);
}

/* 4번 화면 상단 pill */
.business-distribution-pill {
  position: relative;
  justify-self: center;
  width: min(100%, 280px);
  border-radius: 1rem;
  border: 1.5px solid #3f3026;
  background-color: #ffffff;
  padding: 0.85rem 0.95rem;
  text-align: center;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  line-height: 1.3;
  overflow: visible;
}

/* 식자재유통 상단 pill + tooltip 묶음 — tooltip은 pill 형제로 분리해 부모 opacity 영향 차단 */
.business-dist-pill-wrap {
  position: relative;
}

/* 식자재유통 상단 항목 호버 안내 박스 기준점 */
.business-hover-anchor {
  outline: none;
  cursor: help;
}

/* 식자재유통 상단 항목 호버 안내 박스 */
.business-hover-tooltip {
  position: absolute;
  left: 50%;
  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: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* 식자재유통 상단 항목 안내 박스 북마크 장식 */
.business-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%);
}

/* 식자재유통 상단 항목 호버/포커스 시 안내 박스 표시 */
.business-hover-anchor:is(:hover, :focus-visible, :focus-within) .business-hover-tooltip,
.business-dist-pill-wrap:has(.business-hover-anchor:is(:hover, :focus-visible, :focus-within)) .business-hover-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


/* 식자재유통 상단 항목 안내 문구 */
.business-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;
}

/* 4번 화면 중앙 묶음 */
.business-distribution-center {
  display: grid;
  justify-items: center;
  gap: clamp(2.1rem, 4.2vh, 3rem);
}

/* 4번 화면 중앙 제목 */
.business-distribution-center-title {
  margin: 0;
  color: #111111;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 800;
  line-height: 1.2;
}

/* 4번 화면 중앙 박스 */
.business-distribution-center-box {
  width: min(100%, 980px);
  border-radius: 1rem;
  border: 1.5px solid #3f3026;
  background-color: #ffffff;
  padding: clamp(2.15rem, 4.25vh, 3.15rem) clamp(0.95rem, 1.5vw, 1.65rem);
  text-align: center;
}

/* 4번 화면 중앙 설명 */
.business-distribution-center-box p {
  margin: 0;
  font-size: clamp(13.8px, 1vw, 16.5px);
  line-height: 1.72;
  letter-spacing: -0.01em;
}

/* 4번 화면 하단 1~5 묶음 */
.business-distribution-bottom {
  display: grid;
  width: min(100%, 1120px);
  margin: 0 auto;
  gap: var(--distribution-item-gap);
}

/* 4번 화면 하단 상단행 */
.business-distribution-bottom-top {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, max-content);
  gap: var(--distribution-chip-gap);
  justify-content: space-between;
}

/* 4번 화면 하단 하단행 */
.business-distribution-bottom-bottom {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, max-content);
  gap: var(--distribution-chip-gap);
  justify-content: space-between;
}

/* 4번 화면 하단 공통 칩 */
.business-distribution-chip {
  width: fit-content;
  min-width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 2.4rem;
  border-radius: 9999px;
  background-color: #dbd8d3;
  padding: 0.56rem 2.2rem;
  text-align: left;
  font-size: clamp(12.4px, 0.9vw, 15px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  justify-self: start;
}

/* 식자재유통 화면: 개별 칩 그리드 자동 배치 */
.business-distribution-chip-top-1,
.business-distribution-chip-top-2,
.business-distribution-chip-bottom-1,
.business-distribution-chip-bottom-2,
.business-distribution-chip-bottom-3 {
  grid-column: auto;
}

/* 식자재유통 화면: 상단·하단 칩 행 너비 고정 */
.business-distribution-chip-top,
.business-distribution-chip-bottom {
  width: max-content;
  min-width: max-content;
  max-width: none;
}

/* 태블릿 */
@media (max-width: 1024px) {
  /* 첫 섹션은 헤더 여백 영향으로 시각 중심이 내려가 보여 약간 위로 보정 */
  .business-screen-with-header .business-screen-body {
    transform: translateY(clamp(-1.15rem, -2.2vh, -0.75rem));
  }

/* 전체 화면 태블릿: 데스크톱 전용 헤더 숨김 */
  .business-header-desktop-only {
    display: none;
  }

/* 전체 화면 태블릿: 태블릿 전용 헤더 표시 */
  .business-header-tablet-only {
    display: block;
  }

/* 운영강점 화면 태블릿: 카드 그리드 2열 */
  .business-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

/* 급식서비스 화면 태블릿: 패널 그리드 단열 전환 */
  .business-panel-grid {
    grid-template-columns: 1fr;
  }

/* 급식서비스 화면 태블릿: 패널 카피 좌우 패딩 축소 */
  .business-panel-copy {
    padding: 0 clamp(1rem, 4vw, 1.7rem);
  }

/* 급식서비스 화면 태블릿: 패널 설명 최대 너비 축소 */
  .business-panel-description {
    width: min(96%, 43ch);
    max-width: 43ch;
  }

/* 급식서비스 화면 태블릿: 패널 카드 높이 전체 채움 */
  .business-panel-card {
    min-height: 100%;
    height: 100%;
  }

/* 이벤트 화면 태블릿: 궤도 최소 높이 및 위치 보정 */
  .business-event-orbit {
    min-height: clamp(560px, 78vh, 820px);
    transform: translateY(-1vh);
  }

/* 이벤트 화면 태블릿: 중앙 시각 이미지 위치·크기 보정 */
  .business-event-visual {
    top: 42.6%;
    width: clamp(270px, 40vw, 362px);
  }

/* 이벤트 화면 태블릿: 회전 고리 크기·각도 보정 */
  .business-event-ring {
    inset: -50%;
    width: 200%;
    height: 200%;
    transform: translateX(4%) translateY(2%) rotate(-54deg);
  }

/* 이벤트 화면 태블릿: 카피 박스 최대 너비 축소 */
  .business-event-copy {
    width: min(100%, 290px);
  }

/* 이벤트 화면 태블릿: 왼쪽 상단 카피 위치 보정 */
  .business-event-copy-11 {
    left: 6%;
  }

/* 이벤트 화면 태블릿: 오른쪽 상단 카피 위치 보정 */
  .business-event-copy-1 {
    right: 3%;
  }

/* 이벤트 화면 태블릿: 하단 카피 위치 보정 */
  .business-event-copy-6 {
    bottom: -3.1rem;
  }

/* 식자재유통 화면 태블릿: 상단 뱃지 그리드 단열 전환 */
  .business-distribution-top {
    grid-template-columns: 1fr;
  }

/* 식자재유통 화면 태블릿: 내부 요소 세로 위치 보정 */
  .business-distribution-inner {
    transform: translateY(-1.4vh);
  }

  .business-distribution-bottom-top,
/* 식자재유통 화면 태블릿: 하단 칩 그리드 2열 */
  .business-distribution-bottom-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 모바일 */
@media (max-width: 768px) {
  /* 모바일에서는 태블릿보다 조금 더 위로 올려 중앙 정렬 체감을 맞춘다 */
  .business-screen-with-header .business-screen-body {
    transform: translateY(clamp(-1.6rem, -3.1vh, -1.05rem));
  }

/* 전체 화면 모바일: 데스크톱 전용 요소 숨김 */
  .business-desktop-only {
    display: none !important;
  }

/* 전체 화면 모바일: 모바일 전용 요소 표시 */
  .business-mobile-only {
    display: flex !important;
  }

/* 전체 화면 모바일: 헤더 높이 기준 상단 패딩 재설정 */
  .business-screen-with-header {
    padding-top: calc(var(--site-header-height-mobile) + 2.2rem);
  }

/* 운영강점 화면 모바일: 내부 컨테이너 너비·간격·패딩 */
  .business-mobile-inner {
    width: min(100%, 360px);
    gap: 0.75rem;
    padding: 0 0.85rem 0.9rem;
  }

/* 운영강점 화면 모바일: 카드 그리드 행 구조·패딩 */
  .business-mobile-value-card {
    min-height: 132px;
    display: grid;
    grid-template-rows: minmax(calc(1.22em * 2), auto) minmax(0, 1fr);
    align-content: start;
    gap: 0.72rem;
    padding: 0.82rem 0.82rem 0.88rem;
    justify-content: flex-start;
  }

/* 운영강점 화면 모바일: 카드 타이틀 줄바꿈·크기 */
  .business-mobile-value-title {
    margin: 0;
    width: 100%;
    min-height: calc(1.22em * 2);
    display: block;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: pretty;
    font-size: clamp(13px, 3.7vw, 15px);
    line-height: 1.22;
  }

/* 운영강점 화면 모바일: 카드 본문 텍스트 크기·줄간격 */
  .business-mobile-value-card .business-value-copy {
    width: 100%;
    margin: 0;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: pretty;
    font-size: 11px;
    line-height: 1.45;
  }

/* 운영강점 화면 모바일: 카드 본문 강조 텍스트 크기 */
  .business-mobile-value-card .business-value-copy strong {
    font-size: 12px;
  }

/* 급식서비스 화면 모바일: 내부 요소 세로 간격 */
  .business-mobile-catering-inner {
    gap: 1.2rem;
  }

/* 급식서비스 화면 모바일: 카피 영역 간격·패딩 */
  .business-mobile-catering-copy {
    gap: 0.62rem;
    padding: 0 0.68rem;
  }

/* 급식서비스 화면 모바일: 타이틀 크기 */
  .business-mobile-catering-title {
    font-size: 26px;
  }

/* 급식서비스 화면 모바일: 설명 텍스트 너비·크기·줄간격 */
  .business-mobile-catering-description {
    width: min(100%, 41ch);
    font-size: 14.5px;
    line-height: 1.5;
  }

/* 급식서비스 화면 모바일: 패널 궤도 최대 너비 */
  .business-mobile-panel-orbit {
    width: min(100%, 274px);
  }

/* 급식서비스 화면 모바일: 패널 본문 세로 간격 */
  .business-mobile-panel-body {
    gap: 0.68rem;
  }

/* 급식서비스 화면 모바일: 패널 타이틀 크기 */
  .business-mobile-panel-title {
    font-size: 26px;
  }

/* 급식서비스 화면 모바일: 패널 설명 크기·줄간격 */
  .business-mobile-panel-description {
    font-size: 12px;
    line-height: 1.55;
  }

/* 이벤트 화면 모바일: 시각 이미지 최대 너비 */
  .business-mobile-event-visual {
    width: min(100%, 208px);
  }

/* 이벤트 화면 모바일: 상단 영역 세로 간격 및 하단 여백 */
  .business-mobile-event-top {
    gap: 0.6rem;
    margin-bottom: 0.55rem;
  }

/* 이벤트 화면 모바일: 소제목 크기 */
  .business-mobile-event-heading {
    font-size: 16px;
  }

/* 이벤트 화면 모바일: 요양원 영역 상단 여백 */
  .business-mobile-event-bottom {
    margin-top: 0.55rem;
  }

/* 이벤트 화면 모바일: 카드 목록 세로 간격 */
  .business-mobile-event-list {
    gap: 0.5rem;
  }

/* 이벤트 화면 모바일: 개별 카드 내부 패딩 */
  .business-mobile-event-card {
    padding: 0.72rem 0.8rem;
  }

/* 이벤트 화면 모바일: 카드 타이틀 크기 */
  .business-mobile-event-title {
    font-size: 14px;
  }

/* 이벤트 화면 모바일: 카드 설명 여백·크기·줄간격 */
  .business-mobile-event-copy .business-mobile-event-description {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
  }

/* 이벤트·식자재유통 화면 모바일: 공통 설명 텍스트 크기 */
  .business-mobile-event-description,
  .business-mobile-info-card-copy,
  .business-mobile-criteria-copy,
  .business-mobile-compliance-item {
    font-size: 12.5px;
  }

/* 식자재유통 화면 모바일: 정보 그리드·목록 세로 간격 */
  .business-mobile-info-grid,
  .business-mobile-compliance-list {
    gap: 0.62rem;
  }

/* 식자재유통 화면 모바일: 정보 카드·기준 박스 패딩·둥글기 */
  .business-mobile-info-card,
  .business-mobile-criteria-box {
    padding: 0.88rem 0.82rem 0.92rem;
    border-radius: 1.15rem;
  }

/* 운영강점 화면 모바일: 카드 그리드 단열 전환 */
  .business-value-grid {
    grid-template-columns: 1fr;
  }

/* 운영강점 화면 모바일: 카드 최소 높이·정렬 보정 */
  .business-value-card {
    min-height: 158px;
    border-radius: 1.2rem;
    justify-content: flex-start;
    gap: 0.72rem;
  }

/* 급식서비스 화면 모바일: 패널 카피 좌우 패딩 축소 */
  .business-panel-copy {
    padding: 0 1rem;
  }

/* 이벤트 화면 모바일: 궤도 레이아웃 그리드로 전환 */
  .business-event-orbit {
    display: grid;
    justify-items: center;
    gap: 1rem;
    min-height: auto;
    transform: none;
  }

/* 이벤트 화면 모바일: 중앙 시각 이미지 정적 위치 전환 */
  .business-event-visual {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: clamp(300px, 82vw, 400px);
    margin-top: -0.35rem;
    margin-bottom: 1.9rem;
  }

/* 이벤트 화면 모바일: 카피 박스 정적 배치 */
  .business-event-copy {
    position: static;
    width: 100%;
    transform: none;
  }

/* 이벤트 화면 모바일: 회전 고리 크기·각도 보정 */
  .business-event-ring {
    inset: -40%;
    width: 180%;
    height: 180%;
    transform: translateX(2%) translateY(2%) rotate(-56deg);
  }

  /* 모바일 이벤트 섹션 고리만 별도 확장/상향/굵기 보정 */
  .business-mobile-event-ring {
    inset: -39%;
    width: 178%;
    height: 178%;
    transform: translateX(1%) translateY(1%) rotate(-52deg);
  }

/* 이벤트 화면 모바일: 고리 선 두께 축소 */
  .business-mobile-event-ring ellipse {
    stroke-width: 1;
  }

/* 이벤트 화면 모바일: 하단 카피 상단 여백 보정 */
  .business-event-copy-6 {
    margin-top: 2rem;
  }

  .business-distribution-top,
  .business-distribution-bottom-top,
/* 식자재유통 화면 모바일: 전체 그리드 단열 전환 */
  .business-distribution-bottom-bottom {
    grid-template-columns: 1fr;
  }

/* 식자재유통 화면 모바일: 필 너비 전체 채움 */
  .business-distribution-pill {
    width: 100%;
  }

/* 식자재유통 화면 모바일: 툴팁 전체 너비 배치 */
  .business-hover-tooltip {
    left: 0;
    right: 0;
    width: 100%;
    transform: translate(0, 12px);
  }

/* 식자재유통 화면 모바일: 툴팁 호버 시 제자리 이동 */
  .business-hover-anchor:is(:hover, :focus-visible, :focus-within) .business-hover-tooltip {
    transform: translate(0, 0);
  }

/* 식자재유통 화면 모바일: 칩 너비 전체 채움 */
  .business-distribution-chip {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

/* 식자재유통 화면 모바일: 내부 세로 오프셋 초기화 */
  .business-distribution-inner {
    transform: translateY(0);
  }
}

/* 초소형 모바일 */
@media (max-width: 480px) {
/* 이벤트 화면 초소형: 시각 이미지 최대 너비 축소 */
  .business-event-visual {
    width: min(95vw, 340px);
  }
}

/* 작은 데스크톱 */
@media (max-height: 900px) and (min-width: 769px) {
/* 이벤트 화면 낮은 뷰포트: 궤도 최소 높이 축소 */
  .business-event-orbit {
    min-height: clamp(500px, 65vh, 670px);
  }

/* 이벤트 화면 낮은 뷰포트: 시각 이미지 위치·크기 보정 */
  .business-event-visual {
    top: 42.4%;
    width: clamp(340px, 44vh, 460px);
  }

/* 이벤트 화면 낮은 뷰포트: 회전 고리 중앙 기준 재배치 */
  .business-event-ring {
    left: 50%;
    top: 50%;
    width: 390%;
    height: 120%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

/* 이벤트 화면 낮은 뷰포트: 링 텍스트 크기 축소 */
  .business-event-ring-text {
    font-size: 22px;
  }

/* 이벤트 화면 낮은 뷰포트: 하단 카피 위치 보정 */
  .business-event-copy-6 {
    bottom: -2.9rem;
  }
}

/* ─── 모바일 2번 화면: 급식서비스 스트립 순차 진입 ─── */
.business-mobile-catering-strip {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#business-mobile-catering.is-visible .business-mobile-catering-strip {
  opacity: 1;
  transform: translateY(0);
}

#business-mobile-catering.is-visible .business-mobile-catering-strip:nth-child(1) { transition-delay: 0.05s; }
#business-mobile-catering.is-visible .business-mobile-catering-strip:nth-child(2) { transition-delay: 0.22s; }
#business-mobile-catering.is-visible .business-mobile-catering-strip:nth-child(3) { transition-delay: 0.39s; }

/* ─── 모바일 3번 화면: 이벤트 상단·중앙·하단 순차 진입 ─── */
#business-mobile-event .business-mobile-event-top,
#business-mobile-event .business-mobile-event-visual,
#business-mobile-event .business-mobile-event-bottom {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#business-mobile-event.is-visible .business-mobile-event-top    { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
#business-mobile-event.is-visible .business-mobile-event-visual { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
#business-mobile-event.is-visible .business-mobile-event-bottom { opacity: 1; transform: translateY(0); transition-delay: 0.48s; }

/* ─── 모바일 4번 화면: 식자재유통 정보 카드 순차 진입 ─── */
#business-mobile-distribution .business-mobile-info-card {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#business-mobile-distribution.is-visible .business-mobile-info-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
#business-mobile-distribution.is-visible .business-mobile-info-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
#business-mobile-distribution.is-visible .business-mobile-info-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }

/* ─── 모바일 5번 화면: 구매기준 박스 + 안전기준 항목 순차 진입 ─── */
#business-mobile-criteria .business-mobile-criteria-box {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#business-mobile-criteria.is-visible .business-mobile-criteria-box { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }

#business-mobile-criteria .business-mobile-compliance-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#business-mobile-criteria.is-visible .business-mobile-compliance-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
#business-mobile-criteria.is-visible .business-mobile-compliance-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }
#business-mobile-criteria.is-visible .business-mobile-compliance-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
#business-mobile-criteria.is-visible .business-mobile-compliance-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.54s; }
#business-mobile-criteria.is-visible .business-mobile-compliance-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.66s; }

@media (prefers-reduced-motion: reduce) {
  .business-event-image-frame {
    animation: none;
  }

  .business-panel-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* 모션 감소 설정 시 식자재유통 애니메이션 즉시 노출 */
  .business-dist-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 모션 감소 설정 시 모바일 섹션 애니메이션 즉시 노출 */
  .business-mobile-catering-strip,
  #business-mobile-event .business-mobile-event-top,
  #business-mobile-event .business-mobile-event-visual,
  #business-mobile-event .business-mobile-event-bottom,
  #business-mobile-distribution .business-mobile-info-card,
  #business-mobile-criteria .business-mobile-criteria-box,
  #business-mobile-criteria .business-mobile-compliance-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 식자재유통 섹션 애니메이션: 초기 상태(숨김) */
.business-dist-anim {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 섹션 진입 시 순서대로 나타남 */
#business-distribution.is-visible .business-dist-anim {
  opacity: 1;
  transform: translateY(0);
}

/* 상단 pill 3개 */
#business-distribution.is-visible .business-dist-anim-d1 { transition-delay: 0.05s; }
#business-distribution.is-visible .business-dist-anim-d2 { transition-delay: 0.20s; }
#business-distribution.is-visible .business-dist-anim-d3 { transition-delay: 0.35s; }

/* 중앙 구매기준 박스 */
#business-distribution.is-visible .business-dist-anim-d4 { transition-delay: 0.50s; }

/* 하단 안전 기준 칩 5개 */
#business-distribution.is-visible .business-dist-chip-d1 { transition-delay: 0.65s; }
#business-distribution.is-visible .business-dist-chip-d2 { transition-delay: 0.80s; }
#business-distribution.is-visible .business-dist-chip-d3 { transition-delay: 0.95s; }
#business-distribution.is-visible .business-dist-chip-d4 { transition-delay: 1.10s; }
#business-distribution.is-visible .business-dist-chip-d5 { transition-delay: 1.25s; }

/* 이벤트 섹션 애니메이션: 초기 상태 */
.business-event-copy-11 {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.business-event-copy-1 {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.business-event-copy-6 {
  opacity: 0;
  transform: translateX(-50%) translateY(40px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 이벤트 섹션 진입 시 순서대로 등장 */
#business-event.is-visible .business-event-copy-11 {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.08s;
}

#business-event.is-visible .business-event-copy-1 {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.35s;
}

#business-event.is-visible .business-event-copy-6 {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.62s;
}

/* 모션 감소 설정 시 이벤트 애니메이션 즉시 노출 */
@media (prefers-reduced-motion: reduce) {
  .business-event-copy-11,
  .business-event-copy-1 {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important;
  }

  .business-event-copy-6 {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    transition: none !important;
  }
}