/**
 * section3.css — Folded Panel (Figma section3_desktop 1–6)
 * 1920 기준: 확장 960px, 접힘 각 240px (flex 4 : 1 × 4)
 * 콘텐츠는 패널 너비 안에 맞춤: Grid + minmax(0,1fr), 오버플로 시 내부 스크롤
 * 스크롤 스냅: 패널별로 고정되어 빠른 스크롤 시에도 콘텐츠 확인 가능
 */

html {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--process-header-height, 64px);
}

.section3-section {
  --section3-pad-x: clamp(1.25rem, 3.33vw, 4rem);
  --section3-pad-y: clamp(1.25rem, 2.92vw, 3.5rem);
  --section3-gap: 6px;
  --section3-card-pad-x: clamp(1rem, 1.67vw, 2rem);
  --section3-card-pad-y: clamp(1rem, 1.46vw, 1.75rem);

  position: relative;
  background: var(--color-accent-cyan, #cce6ff);
}

.section3-pin-wrapper {
  position: relative;
  /* pin(100vh) + 5스냅: 총 스크롤량(--section3-snap-stack-vh) — 값↑ 시 감도↓ */
}

.section3-snap {
  height: calc(var(--section3-snap-stack-vh, 820) * 1vh / 5);
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.section3-pin {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--color-accent-cyan, #cce6ff);
  display: flex;
  flex-direction: column;
}

/* ----- Panel Track ----- */
.section3-panel-track {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
}

/* 가로 다열 패널 트랙: 넓은 뷰포트만(1100 이하는 시간 섹션은 아래에서 세로 고정) */
@media (min-width: 1101px) {
  .section3-panel-track {
    flex-direction: row;
    align-items: stretch;
  }
}

@media (max-width: 767px) {
  .section3-panel-track {
    flex-direction: column;
  }
}

/* ----- Panels ----- */
.section3-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
  transition: flex-grow 0.32s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
              flex-basis 0.32s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
              min-width 0.32s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
              min-height 0.32s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.section3-panel--1,
.section3-panel--3,
.section3-panel--5 {
  background: var(--color-brand-navy, #005eb8);
}

.section3-panel--2,
.section3-panel--4 {
  background: var(--color-brand-teal, #007058);
}

@media (min-width: 768px) {
  .section3-panel {
    flex-grow: 1;
    flex-basis: 0;
  }
  .section3-panel.is-active {
    flex-grow: 4;
  }
  .section3-panel.is-folded {
    flex-grow: 1;
  }
}

@media (max-width: 767px) {
  .section3-panel {
    flex-grow: 1;
    flex-basis: 0;
  }
  .section3-panel.is-active {
    flex-grow: 4;
  }
  /* 접힌 패널 숨김 — 시간 섹션은 max-width:1100 규칙과 동일하게 전체 높이를 열린 패널에 */
  .section3-panel.is-folded {
    flex: 0 0 0;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
    max-height: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: default;
  }

  .section3-section--time .section3-panel.is-active {
    flex: 1 1 0;
    min-height: 0;
  }
}

/* 접힌 패널 클릭 시 해당 패널 펼침 */
.section3-panel.is-folded {
  cursor: pointer;
  transition: filter 0.22s var(--ease-smooth, ease-in-out);
}

@media (hover: hover) and (pointer: fine) {
  .section3-section--time .section3-panel.is-folded:hover {
    filter: brightness(1.1);
  }

  .section3-section--time .section3-panel.is-folded:active {
    filter: brightness(0.94);
  }
}

/* ----- Panel inner ----- */
.section3-panel__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.section3-panel.is-active .section3-panel__inner {
  overflow: hidden;
}

.section3-panel.is-folded .section3-panel__inner {
  overflow: hidden;
}

/* ----- Content layer (패널 1은 2개 겹침: 숨김 = absolute) ----- */
.section3-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
              transform 0.26s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
  transform: translateY(8px);
}

.section3-panel__inner > .section3-content:not(.is-visible) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  z-index: 0;
}

.section3-panel__inner > .section3-content.is-visible {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 시간 패널: 펼침 안에서는 페이지 스크롤만 사용(내부 세로 스크롤 없음) */
.section3-section--time .section3-panel__inner > .section3-content.is-visible {
  overflow-y: hidden;
  -webkit-overflow-scrolling: auto;
}

.section3-panel.is-folded .section3-content {
  display: none;
}

@keyframes section3-content-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 패널 콘텐츠가 바뀔 때만(JS가 클래스 토글) — display:none 이후에도 동작 */
.section3-panel__inner > .section3-content.is-visible.section3-content--fade-in {
  transition: none;
  animation: section3-content-fade-in 0.45s cubic-bezier(0.33, 0.72, 0.29, 1) both;
}

/* ----- Intro ----- */
.section3-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: var(--section3-pad-y) var(--section3-pad-x);
  box-sizing: border-box;
}

/* ----- Headline ----- */
.section3-headline {
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.75rem, 4.2vw, 5rem);
  line-height: 1.3;
  color: var(--color-accent-cyan, #cce6ff);
  margin: 0;
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.section3-headline--center {
  text-align: center;
}

.section3-headline--left {
  text-align: left;
}

/* 데스크톱: 패널 영역 타이틀 — 최대 크기 축소 */
@media (min-width: 768px) {
  .section3-section--time {
    --section3-panel-headline-size: clamp(1.5rem, 3.1vw, 3.5rem);
  }

  .section3-section--time .section3-headline {
    font-size: var(--section3-panel-headline-size);
  }
}

/* ----- 본문 영역: 상단 헤드라인 + 하단 그리드 (Figma 여백) ----- */
.section3-scroll {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--section3-pad-y) var(--section3-pad-x);
  padding-top: clamp(2rem, 4.5vw, 4.5rem);
  box-sizing: border-box;
  gap: clamp(1.5rem, 4vh, 4rem);
}

.section3-scroll .section3-headline {
  flex: 0 0 auto;
  padding-right: 0;
}

/* 스택 레이아웃(패널4): 동일 여백 + 하단 블록 */
.section3-scroll--stack {
  justify-content: space-between;
}

.section3-scroll--stack .section3-stat-stack {
  flex: 0 1 auto;
  margin-top: auto;
  min-height: 0;
}

/* ----- Stat grid: 항상 컨테이너 안에 2열 (413px 고정 제거) ----- */
.section3-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section3-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 0;
  align-content: end;
}

.section3-stat-grid--row3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 전체 너비 행 */
.section3-stat-card--wide,
.section3-stat-card--fullwide {
  grid-column: 1 / -1;
}

/* row3: 첫 줄 풀너비, 둘째 줄 2분할 */
.section3-stat-grid--row3 > .section3-stat-card--flex {
  min-width: 0;
}

.section3-stat-grid--volunteer {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section3-stat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: var(--section3-card-pad-y) var(--section3-card-pad-x);
  background: var(--color-accent-cyan, #cce6ff);
  box-sizing: border-box;
}

.section3-stat-card--tall {
  justify-content: space-between;
  min-height: 0;
}

@media (min-width: 900px) {
  .section3-stat-card--tall {
    min-height: 12.5rem;
  }
}

.section3-stat-card--horizontal .section3-stat-card__row {
  align-items: center;
  flex-wrap: wrap;
}

.section3-stat-card--horizontal .section3-stat-card__value--56 {
  flex: 1 1 12rem;
  min-width: 0;
}

.section3-stat-card__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.25vw, 1.5rem);
  line-height: 1.5;
  margin: 0;
  width: 100%;
  max-width: 100%;
  word-break: keep-all;
}

.section3-stat-card__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.section3-stat-card__row--gap16 {
  gap: 16px;
}

.section3-stat-card__row--start {
  align-items: flex-start;
}

.section3-stat-card__icon {
  flex-shrink: 0;
  object-fit: contain;
  width: 40px;
  height: 40px;
}

.section3-stat-card__icon--doc {
  width: 36px;
  height: 40px;
}

.section3-stat-card__value {
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 4rem);
  line-height: 1.1;
  min-width: 0;
  word-break: keep-all;
}

.section3-stat-card__value--56 {
  font-size: clamp(1.75rem, 3vw, 4rem);
  line-height: 1.25;
}

.section3-stat-card__value--multiline {
  text-align: left;
}

.section3-stat-card__note {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  line-height: 1.5;
  letter-spacing: -0.5px;
  opacity: 0.7;
  margin: 0;
  width: 100%;
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.section3-stat-card__note p {
  margin: 0 0 0.35em;
}

.section3-stat-card__note p:last-child {
  margin-bottom: 0;
}

.section3-stat-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section3-gap);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.section3-stat-card__stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

/* ----- Tone ----- */
.section3-content--tone-navy .section3-stat-card__label,
.section3-content--tone-navy .section3-stat-card__value,
.section3-content--tone-navy .section3-stat-card__note,
.section3-content--tone-navy .section3-stat-card__note p {
  color: var(--color-brand-navy, #005eb8);
}

.section3-content--tone-teal .section3-stat-card__label,
.section3-content--tone-teal .section3-stat-card__value,
.section3-content--tone-teal .section3-stat-card__note,
.section3-content--tone-teal .section3-stat-card__note p {
  color: var(--color-brand-teal, #007058);
}

/* ----- Mobile: 디자인 시안 동일 레이아웃 (카드 맞닿음, 1열/2열) ----- */
@media (max-width: 767px) {
  .section3-section {
    --section3-pad-x: clamp(1rem, 4vw, 1.5rem);
    --section3-card-pad-x: clamp(0.75rem, 3vw, 1.25rem);
    --section3-card-pad-y: clamp(0.75rem, 2.5vw, 1rem);
  }

  .section3-scroll {
    min-height: 0;
    padding: clamp(1rem, 3vw, 1.5rem) var(--section3-pad-x);
    padding-top: clamp(1.25rem, 3.5vw, 2rem);
    padding-bottom: clamp(1rem, 3vw, 1.5rem);
    gap: clamp(1rem, 3vh, 2rem);
    justify-content: space-between;
  }
  .section3-scroll .section3-stat-grid,
  .section3-scroll .section3-stat-stack {
    margin-top: auto;
  }

  .section3-headline {
    font-size: clamp(1.25rem, 4.5vw, 2rem);
  }

  .section3-intro {
    min-height: 10rem;
    padding: clamp(1rem, 3vw, 1.5rem);
  }

  /* 패널2: 첫 줄 2열 유지 */
  .section3-stat-grid--2col-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .section3-stat-grid--2col-mobile .section3-stat-card--tall,
  .section3-stat-grid--2col-mobile .section3-stat-card:not(.section3-stat-card--tall):nth-child(n+3) {
    grid-column: 1 / -1;
  }

  /* 패널1: 특수학교·특수학급 | 문화체험도 2열( Figma mobile-time-1 ) */
  .section3-section--time .section3-panel--1 .section3-stat-grid--panel1.section3-stat-grid--2col-mobile .section3-stat-panel1-span-mobile {
    grid-column: auto;
  }

  /* 패널3·4·6: 1열, 카드 맞닿음 */
  .section3-stat-grid:not(.section3-stat-grid--2col-mobile),
  .section3-stat-grid--row3,
  .section3-stat-grid--volunteer,
  .section3-stat-grid--1col-mobile {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .section3-stat-card--wide,
  .section3-stat-card--fullwide {
    grid-column: 1;
  }

  /* 카드 간격 제거, 테두리로 구분 (디자인: 맞닿은 블록) */
  .section3-stat-grid,
  .section3-stat-stack {
    gap: 0;
  }
  .section3-stat-card {
    border-bottom: 1px solid var(--color-brand-navy, #005eb8);
    min-height: auto;
  }
  .section3-content--tone-teal .section3-stat-card {
    border-bottom-color: var(--color-brand-teal, #007058);
  }
  .section3-stat-card:last-child {
    border-bottom: none;
  }

  .section3-stat-card--tall {
    min-height: 0;
  }

  .section3-scroll--stack .section3-stat-stack {
    margin-top: auto;
  }

  .section3-stat-card__label {
    font-size: clamp(0.8125rem, 2.2vw, 1rem);
  }
  .section3-stat-card__value {
    font-size: clamp(1.25rem, 4vw, 2rem);
  }
  .section3-stat-card__value--56 {
    font-size: clamp(1.125rem, 3.5vw, 1.75rem);
  }
  .section3-stat-card__note {
    font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  }
  .section3-stat-card__icon {
    width: 36px;
    height: 36px;
  }
  .section3-stat-card__icon--doc {
    width: 32px;
    height: 36px;
  }
}

/* ----- Figma 658:* / 523:* 시간(10주년) 카드 레이아웃 ----- */
.section3-section.section3-section--time {
  background: var(--color-brand-navy, #005eb8);
  /* 값↑: 패널 고정·전환에 필요한 스크롤량 증가(감도↓) — 820→1100 */
  --section3-snap-stack-vh: 1100;
  /* 패널5 아웃트로(타자기·노란 원·중앙 문구) sticky 스크롤 길이 — 값↓ 중앙문구→비교표 간격 축소 */
  --panel5-outro-sticky-scroll: 420vh;
  /* 탭 아래 초록 고정 스크롤 구간 길이(값↑ = 전환 느림) */
  --p5-green-scroll-vh: 650;
}

/* 데스크톱: 패널5 고정 스크롤 구간 절반(420vh → 210vh) */
@media (min-width: 1101px) {
  .section3-section.section3-section--time {
    --panel5-outro-sticky-scroll: 210vh;
  }
}

.section3-section--time .section3-pin {
  background: transparent;
}

/* 시간 패널: 1100px 이하 기본 = 모바일형(세로 스택·얇은 접힘). 1101px 이상에서만 가로 5패널 */
.section3-section--time .section3-panel-track {
  flex-direction: column;
  align-items: stretch;
}

/* 1100px 이하(세로 스택): 접힌 패널은 레이아웃·시각적으로 제거, 열린 패널만 전체 높이 사용 */
@media (max-width: 1100px) {
  .section3-section--time .section3-panel.is-folded {
    flex: 0 0 0;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 0;
    max-height: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: default;
  }
}

.section3-section--time .section3-panel.is-active {
  flex: 1 1 0;
  flex-grow: 1;
  min-height: 0;
  min-width: 0;
}

.section3-section--time .section3-split-bottom.section3-split-bottom--panel1-figma,
.section3-section--time .section3-split-bottom.section3-split-bottom--panel2-figma {
  flex-wrap: nowrap;
  align-items: stretch;
}

.section3-section--time .section3-split-bottom.section3-split-bottom--panel3-figma {
  flex-wrap: nowrap;
  align-items: stretch;
}

.section3-section--time .section3-split-bottom.section3-split-bottom--panel4-figma {
  flex-wrap: nowrap;
  align-items: stretch;
}

@media (min-width: 1101px) {
  .section3-section--time .section3-panel-track {
    flex-direction: row;
    align-items: stretch;
  }

  .section3-section--time .section3-panel.is-folded {
    flex: 0 0 clamp(24px, 1.9vw, 38px);
    flex-grow: 0;
    min-height: 0;
    min-width: clamp(24px, 1.9vw, 38px);
    max-width: clamp(24px, 1.9vw, 38px);
    width: auto;
  }

  .section3-section--time .section3-panel.is-active {
    flex: 1 1 0;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
  }

  .section3-section--time .section3-split-bottom.section3-split-bottom--panel1-figma,
  .section3-section--time .section3-split-bottom.section3-split-bottom--panel2-figma {
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  .section3-section--time .section3-panel--5 .section3-split-bottom.section3-split-bottom--panel1-figma {
    align-items: self-end;
  }
}

@media (min-width: 1101px) {
  .section3-section--time .section3-split-bottom.section3-split-bottom--panel3-figma {
    flex-wrap: nowrap;
    align-items: flex-end;
  }
}

@media (min-width: 1101px) {
  .section3-section--time .section3-split-bottom.section3-split-bottom--panel4-figma {
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 4px;
    overflow: visible;
    max-height: none;
  }

  .section3-section--time .section3-panel--4 .section3-split-bottom.section3-split-bottom--panel4-figma {
    overflow: visible;
  }

  .section3-section--time .section3-panel--4 .section3-split-bottom--panel4-figma .section3-split-bottom__cards {
    overflow: visible;
  }
}

.section3-section--time .section3-headline {
  color: #fff;
}

.section3-section--time .section3-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  gap: clamp(0.35rem, 1vmin + 0.25rem, 0.85rem);
  /* 흰 타이틀 위: 좌측 패딩(--section3-pad-x)의 약 2배 */
  padding-top: calc(2 * var(--section3-pad-x));
  padding-bottom: clamp(0.5rem, 1.2vmin, 1rem);
}

.section3-section--time .section3-split-bottom {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.section3-section--time .section3-split-bottom__cards {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.section3-section--time .section3-stat-grid,
.section3-section--time .section3-vol-stack,
.section3-section--time .section3-vol-cols,
.section3-section--time .section3-stat-stack {
  min-height: 0;
}

.section3-section--time .section3-stat-grid {
  flex: 1 1 0;
  align-content: start;
}

.section3-section--time .section3-vol-stack {
  flex: 1 1 0;
}

.section3-section--time .section3-stat-card {
  gap: 6px;
  background: #fff;
  border-radius: 12px;
  border-bottom: none;
  justify-content: flex-start;
}

.section3-section--time .section3-stat-card--tall {
  min-height: 0 !important;
  justify-content: flex-start;
}

.section3-section--time .time-carousel {
  flex-shrink: 1;
  min-height: 0;
  width: min(100%, clamp(240px, 34vw, 420px));
  max-width: 100%;
  max-height: min(26vmin, calc(42dvh - 4rem), 240px);
  aspect-ratio: 523 / 406;
}

/* 패널1·2: 슬라이드 523×406 고정은 넓은 뷰포트만(1100px 이하는 모바일형 전폭) */
@media (min-width: 1101px) {
  .section3-section--time .time-carousel.time-carousel--panel1,
  .section3-section--time .time-carousel.time-carousel--panel2 {
    flex: 0 0 523px;
    width: 523px;
    max-width: 523px;
    min-width: 523px;
    max-height: none;
    aspect-ratio: 523 / 406;
  }

  /* 패널2: 슬라이드 세로를 406px로 고정(흰 카드 열과 동일 높이 맞춤) */
  .section3-section--time .time-carousel.time-carousel--panel2 {
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    aspect-ratio: auto;
  }

  /* 패널3: 523×406 슬라이드, 세로 406px로 흰 카드 열과 동일 */
  .section3-section--time .time-carousel.time-carousel--panel3 {
    flex: 0 0 523px;
    width: 523px;
    max-width: 523px;
    min-width: 523px;
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    aspect-ratio: auto;
  }

  .section3-section--time .time-carousel.time-carousel--panel4 {
    flex: 0 0 406px;
    width: 523px;
    max-width: 523px;
    min-width: 523px;
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    aspect-ratio: auto;
  }

  /* 패널5: 슬라이드 세로 406px(흰 카드 열과 동일) — 캐러셀은 --panel1 공유라 패널으로 한정 */
  .section3-section--time .section3-panel--5 .time-carousel.time-carousel--panel1 {
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    aspect-ratio: auto;
  }
}

.section3-section--time .section3-stat-grid,
.section3-section--time .section3-vol-stack,
.section3-section--time .section3-vol-cols {
  gap: var(--section3-gap);
}

.section3-section--time .section3-stat-card__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.35vw, 1.625rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* 패널1·2: 상단은 좌측 2배, 하단은 기존 여백 유지 (Figma 80px / 24px 타이틀 영역 패딩) */
.section3-section--time .section3-scroll.section3-scroll--panel1-figma,
.section3-section--time .section3-scroll.section3-scroll--panel2-figma {
  padding-top: calc(2 * var(--section3-pad-x));
  padding-bottom: clamp(1.75rem, 5.5vmin, 5.5rem);
}

.section3-section--time .section3-scroll.section3-scroll--panel3-figma {
  padding-top: calc(2 * var(--section3-pad-x));
  padding-bottom: clamp(1.75rem, 5.5vmin, 5.5rem);
}

.section3-section--time .section3-scroll.section3-scroll--panel4-figma {
  padding-top: calc(2 * var(--section3-pad-x));
  padding-bottom: clamp(1.75rem, 5.5vmin, 5.5rem);
}

/* 패널2: mobile-time-2 헤드라인 3줄 — 데스크톱에서는 세 번째 줄바꿈 숨김 */
br.panel2-headline-br {
  display: none;
}

@media (max-width: 1100px) {
  .section3-panel--2 br.panel2-headline-br {
    display: revert;
  }
}

br.desktop-only-br {
  display: inline;
}

@media (max-width: 767px) {
  br.desktop-only-br {
    display: none;
  }
}

/* 시간 섹션 패널 타이틀: 모바일형 레이아웃에서도 데스크톱과 동일한 줄바꿈(br 유지) */
.section3-section--time br.desktop-only-br {
  display: revert;
}

.section3-section--time .section3-stat-grid--2col-mobile .section3-stat-grid--wide-item {
  grid-column: 1 / -1;
}

/* ----- 패널1: Figma 658:2274 / mobile 658:2326 (832×406 그리드 + 523×406 캐러셀 동일 행) ----- */
/* 흰 카드 라벨 손글씨 — Peoplefirst Neat Loud + font-weight 900 (span·전환 문구 포함, 상속 끊김 방지) */
.section3-section--time .section3-panel--1 .section3-stat-card__label,
.section3-section--time .section3-panel--1 .section3-stat-card__label .panel1-label--desktop,
.section3-section--time .section3-panel--1 .section3-stat-card__label .panel1-label--mobile,
.section3-section--time .section3-panel--5 .section3-stat-card__label {
  font-family: "Peoplefirst Neat Loud", var(--font-sans);
  font-weight: 900;
  /* 실제 볼드 글리프 없음: 동색 초미세 스트로크로 윤곽만 살짝 두껍게(과하면 흐려짐) */
  -webkit-text-stroke: max(0.8px, 0.011em) currentColor;
  paint-order: stroke fill;
}

/* 패널1 흰 카드: 좁은 폭에서도 수치·아이콘이 잘리지 않도록 축소 (카드 기준 cqw + vmin 폴백) */
.section3-section--time .section3-panel--1 .section3-stat-card,
.section3-section--time .section3-panel--5 .section3-stat-card {
  min-width: 0;
}

.section3-section--time .section3-panel--1 .section3-stat-card__value,
.section3-section--time .section3-panel--5 .section3-stat-card__value {
  font-size: clamp(0.8125rem, 0.55rem + 2.4vmin, 4rem);
  line-height: 1;
  max-width: 100%;
}

.section3-section--time .section3-panel--1 .section3-stat-card__icon--lg,
.section3-section--time .section3-panel--5 .section3-stat-card__icon--lg {
  width: clamp(22px, 0.5rem + 3.2vmin, 64px);
  height: clamp(22px, 0.5rem + 3.2vmin, 64px);
}

.section3-section--time .section3-panel--1 .section3-stat-card__row,
.section3-section--time .section3-panel--5 .section3-stat-card__row {
  width: 100%;
  min-width: 0;
  gap: clamp(4px, 0.35rem + 0.75vmin, 10px);
}

@supports (container-type: inline-size) {
  .section3-section--time .section3-panel--1 .section3-stat-card,
  .section3-section--time .section3-panel--5 .section3-stat-card {
    container-type: inline-size;
    container-name: panel1-card;
  }

  .section3-section--time .section3-panel--1 .section3-stat-card__value,
  .section3-section--time .section3-panel--5 .section3-stat-card__value {
    font-size: clamp(0.8125rem, 11cqw + 0.7rem, 4rem);
    line-height: 1;
    max-width: 100%;
  }

  .section3-section--time .section3-panel--1 .section3-stat-card__icon--lg,
  .section3-section--time .section3-panel--5 .section3-stat-card__icon--lg {
    width: clamp(22px, 10cqw + 12px, 64px);
    height: clamp(22px, 10cqw + 12px, 64px);
  }

  .section3-section--time .section3-panel--1 .section3-stat-card__row,
  .section3-section--time .section3-panel--5 .section3-stat-card__row {
    gap: clamp(4px, 2.2cqw + 4px, 10px);
  }
}

/* 패널2·3·4: 패널1·5와 동일 — 카드 너비에 맞춰 수치·아이콘 축소(잘림 방지) */
.section3-section--time .section3-panel--2 .section3-stat-card,
.section3-section--time .section3-panel--3 .section3-stat-card,
.section3-section--time .section3-panel--4 .section3-stat-card {
  min-width: 0;
  overflow: visible;
}

.section3-section--time .section3-panel--2 .section3-stat-card__value,
.section3-section--time .section3-panel--2 .section3-stat-card__value--56,
.section3-section--time .section3-panel--3 .section3-stat-card__value,
.section3-section--time .section3-panel--4 .section3-stat-card__value,
.section3-section--time .section3-panel--4 .section3-stat-card__value--panel4-org,
.section3-section--time .section3-panel--4 .section3-stat-card__value--panel4-ajpress {
  font-size: clamp(0.8125rem, 0.55rem + 2.4vmin, 4rem);
  line-height: 1;
  max-width: 100%;
}

.section3-section--time .section3-panel--2 .section3-stat-card__icon--lg,
.section3-section--time .section3-panel--3 .section3-stat-card__icon--lg,
.section3-section--time .section3-panel--4 .section3-stat-card__icon--lg {
  width: clamp(22px, 0.5rem + 3.2vmin, 64px);
  height: clamp(22px, 0.5rem + 3.2vmin, 64px);
  flex-shrink: 0;
}

.section3-section--time .section3-panel--2 .section3-stat-card__row,
.section3-section--time .section3-panel--3 .section3-stat-card__row,
.section3-section--time .section3-panel--4 .section3-stat-card__row {
  width: 100%;
  min-width: 0;
  gap: clamp(4px, 0.35rem + 0.75vmin, 10px);
}

.section3-stat-card__panel2-metrics,
.section3-stat-card__panel3-metrics {
  width: 100%;
  min-width: 0;
}

@supports (container-type: inline-size) {
  .section3-section--time .section3-panel--2 .section3-stat-card,
  .section3-section--time .section3-panel--3 .section3-stat-card,
  .section3-section--time .section3-panel--4 .section3-stat-card {
    container-type: inline-size;
    container-name: panel-stat-card;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card__value,
  .section3-section--time .section3-panel--2 .section3-stat-card__value--56,
  .section3-section--time .section3-panel--3 .section3-stat-card__value,
  .section3-section--time .section3-panel--4 .section3-stat-card__value,
  .section3-section--time .section3-panel--4 .section3-stat-card__value--panel4-org,
  .section3-section--time .section3-panel--4 .section3-stat-card__value--panel4-ajpress {
    font-size: clamp(0.8125rem, 11cqw + 0.7rem, 4rem);
    line-height: 1;
    max-width: 100%;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card__icon--lg,
  .section3-section--time .section3-panel--3 .section3-stat-card__icon--lg,
  .section3-section--time .section3-panel--4 .section3-stat-card__icon--lg {
    width: clamp(22px, 10cqw + 12px, 64px);
    height: clamp(22px, 10cqw + 12px, 64px);
  }

  .section3-section--time .section3-panel--2 .section3-stat-card__row,
  .section3-section--time .section3-panel--3 .section3-stat-card__row,
  .section3-section--time .section3-panel--4 .section3-stat-card__row {
    gap: clamp(4px, 2.2cqw + 4px, 10px);
  }

  /* 전문강사 등 2열 아이콘+수치: 좁은 카드에서는 세로 스택 (패널2 봉사자는 모바일에서 가로 — 아래 ≤767 규칙) */
  @container panel-stat-card (max-width: 22rem) {
    .section3-stat-card__panel3-metrics {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }

  .section3-stat-card__panel4-orgs .section3-stat-card__row {
    flex-wrap: wrap;
    align-items: center;
  }

  .section3-section--time .section3-panel--4 .section3-stat-card__value--panel4-org {
    font-size: clamp(0.8125rem, 9cqw + 0.55rem, 1.75rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }
}

.section3-split-bottom--panel1-figma,
.section3-split-bottom--panel2-figma {
  flex: 1 1 0;
  min-height: 0;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 6px;
}

.section3-split-bottom--panel3-figma {
  flex: 1 1 0;
  min-height: 0;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 6px;
}

.section3-split-bottom--panel1-figma .section3-split-bottom__cards,
.section3-split-bottom--panel2-figma .section3-split-bottom__cards {
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
}

.section3-split-bottom--panel3-figma .section3-split-bottom__cards {
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
}

.section3-split-bottom--panel4-figma {
  flex: 1 1 0;
  min-height: 0;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 4px;
}

.section3-split-bottom__panel4-aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  flex: 0 0 auto;
}

.section3-split-bottom--panel4-figma .section3-split-bottom__cards {
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
}

/* 패널1·2·5: 그리드가 flex:1/flex-basis 0 column 자식으로 높이 0에 수축해 흰 카드가 사라지는 현상 방지 */
.section3-panel--1 .section3-split-bottom.section3-split-bottom--panel1-figma,
.section3-panel--5 .section3-split-bottom.section3-split-bottom--panel1-figma,
.section3-panel--2 .section3-split-bottom.section3-split-bottom--panel2-figma {
  overflow: visible;
}

.section3-panel--3 .section3-split-bottom.section3-split-bottom--panel3-figma {
  overflow: visible;
}

.section3-panel--4 .section3-split-bottom.section3-split-bottom--panel4-figma {
  max-height: none;
  overflow: visible;
}

.section3-panel--1 .section3-split-bottom--panel1-figma .section3-split-bottom__cards,
.section3-panel--5 .section3-split-bottom--panel1-figma .section3-split-bottom__cards,
.section3-panel--2 .section3-split-bottom--panel2-figma .section3-split-bottom__cards {
  overflow: visible;
  min-height: min-content;
}

.section3-panel--3 .section3-split-bottom--panel3-figma .section3-split-bottom__cards {
  overflow: visible;
  min-height: min-content;
}

.section3-panel--4 .section3-split-bottom--panel4-figma .section3-split-bottom__cards {
  overflow: visible;
  min-height: min-content;
}

.section3-panel--1 .section3-split-bottom--panel1-figma .section3-stat-grid.section3-stat-grid--panel1,
.section3-panel--5 .section3-split-bottom--panel1-figma .section3-stat-grid.section3-stat-grid--panel1,
.section3-panel--2 .section3-split-bottom--panel2-figma .section3-stat-grid.section3-stat-grid--panel2 {
  flex: 0 1 auto;
  min-height: auto;
  align-self: auto;
}

.section3-panel--3 .section3-split-bottom--panel3-figma .section3-stat-grid.section3-stat-grid--panel3 {
  flex: 0 1 auto;
  min-height: auto;
  align-self: auto;
}

.section3-panel--4 .section3-split-bottom--panel4-figma .section3-stat-grid.section3-stat-grid--panel4 {
  flex: 0 1 auto;
  min-height: auto;
  align-self: auto;
}

/* 패널1: 라벨 데스크톱/모바일 문구 전환 (Figma 658:2274 / 658:2326) */
.section3-panel--1 .panel1-label--mobile {
  display: none;
}

.section3-panel--1 .panel1-label--desktop {
  display: inline;
}

@media (max-width: 1100px) {
  .section3-panel--1 .panel1-label--mobile {
    display: inline;
  }

  .section3-panel--1 .panel1-label--desktop {
    display: none;
  }
}

/* 패널1: 모바일·태블릿 줄바꿈(1101px 이상에서는 숨김) */
.section3-panel--1 .panel1-note-br {
  display: none;
}

@media (max-width: 1100px) {
  .section3-panel--1 .panel1-note-br {
    display: inline;
  }
}

/* 패널1: 아이콘+숫자 행과 설명 — 세로 스택(모바일 좁은 폭에서는 가로 배치가 깨져 동일하게 세로 유지) */
.section3-panel--1 .section3-stat-card__panel1-mid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1100px) {
  .section3-panel--1 .section3-stat-card__panel1-mid > .section3-stat-card__row {
    flex-shrink: 0;
    gap: 6px;
  }

  .section3-panel--1 .section3-stat-card__panel1-mid > .section3-stat-card__note {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

.section3-stat-grid--panel1 {
  width: 100%;
  max-width: 100%;
  gap: 6px;
  align-content: start;
}

.section3-section--time .section3-panel--5 .covid-manual-card .section3-stat-card__value--56 {
  margin: 0;
  line-height: 1.5;
  font-size: clamp(1.25rem, 1rem + 1.35vw, 2.375rem);
  overflow-wrap: anywhere;
  word-break: keep-all;
}

@media (min-width: 1101px) {
  .section3-stat-grid--panel1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto);
    max-height: none;
    width: 100%;
    max-width: 100%;
  }

  .section3-scroll--panel1-figma,
  .section3-scroll--panel2-figma {
    gap: clamp(0.85rem, 1.65vmin, 1rem);
  }

  /* 데스크톱: 3·4번 카드는 각 열별 폭만 차지(Figma 두열 4칸); 전폭 span 없음 */
  .section3-stat-grid--panel1 .section3-stat-panel1-span-mobile {
    grid-column: auto;
    max-width: 100%;
  }

  .section3-panel--1 .section3-stat-card--panel1-sm,
  .section3-panel--5 .section3-stat-card--panel1-sm {
    min-height: 178px;
    padding: clamp(1.125rem, 1.46vw, 1.75rem) clamp(1.25rem, 1.67vw, 2rem);
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .section3-panel--1 .section3-stat-card--panel1-md,
  .section3-panel--1 .section3-stat-card--tall.section3-stat-card--panel1-md,
  .section3-panel--5 .section3-stat-card--panel1-md,
  .section3-panel--5 .section3-stat-card--tall.section3-stat-card--panel1-md {
    min-height: 222px !important;
    padding: clamp(1.125rem, 1.46vw, 1.75rem) clamp(1.25rem, 1.67vw, 2rem);
    box-sizing: border-box;
  }

  .section3-panel--5 .section3-stat-grid--panel1 .covid-manual-card {
    grid-column: 1 / -1;
  }

  /* 패널5 데스크톱: 흰 카드 블록 총높이 = 슬라이드(406px) */
  .section3-panel--5 .section3-split-bottom--panel1-figma .section3-split-bottom__cards {
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    display: flex;
    flex-direction: column;
  }

  .section3-panel--5 .section3-split-bottom--panel1-figma .section3-stat-grid.section3-stat-grid--panel1 {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    align-content: stretch;
  }

  .section3-panel--5 .section3-stat-card--panel1-sm {
    min-height: 0 !important;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .section3-panel--5 .covid-manual-card.section3-stat-card--panel1-md {
    min-height: 0 !important;
    height: 100%;
    max-height: 100%;
    overflow: visible;
  }

  .section3-section--time .section3-panel--5 .covid-manual-card .section3-stat-card__value--56 {
    font-size: clamp(1.1875rem, 0.8rem + 1.25vw, 2.25rem);
  }

  /* Figma desktop-time-1 / desktop-time-2: 헤드라인 80/130%, 라벨 26/150%, 수치 Paperlogy */
  .section3-section--time .section3-panel--1 .section3-scroll--panel1-figma .section3-headline.section3-headline--home,
  .section3-section--time .section3-panel--5 .section3-scroll--panel1-figma .section3-headline.section3-headline--home,
  .section3-section--time .section3-panel--2 .section3-scroll--panel2-figma .section3-headline.section3-headline--home {
    font-size: var(--section3-panel-headline-size, clamp(1.5rem, 3.1vw, 3.5rem));
    line-height: 1.3;
    font-weight: 800;
  }

  .section3-section--time .section3-panel--1 .section3-stat-card__label,
  .section3-section--time .section3-panel--5 .section3-stat-card__label,
  .section3-section--time .section3-panel--2 .section3-stat-grid--panel2 .section3-stat-card__label {
    font-size: 1.625rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .section3-section--time .section3-panel--1 .section3-stat-card__note,
  .section3-section--time .section3-panel--5 .section3-stat-card__note {
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: -0.035em;
  }
}

/* ----- 패널2: Figma desktop-time-2 523:13793 / mobile-time-2 524:14929 ----- */
.section3-stat-grid--panel2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 100%;
  align-content: end;
}

.section3-stat-grid--panel2 .section3-stat-panel2-span-full {
  grid-column: 1 / -1;
}

.section3-stat-card__panel2-metrics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.section3-stat-card__panel2-metrics .section3-stat-card__row {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.section3-section--time .section3-panel--2 .section3-stat-grid--panel2 .section3-stat-card__label {
  font-family: "Peoplefirst Neat Loud", var(--font-sans);
  font-weight: 900;
  -webkit-text-stroke: max(0.8px, 0.011em) currentColor;
  paint-order: stroke fill;
}

.section3-section--time .section3-panel--2 .section3-stat-card {
  min-width: 0;
}

@media (min-width: 1101px) {
  .section3-stat-grid--panel2 {
    max-height: none;
  }

  /* 패널2: 흰 카드 열 세로 = 캐러셀(406px). 가로축 flex이므로 높이는 height로 고정 */
  .section3-panel--2 .section3-split-bottom--panel2-figma .section3-split-bottom__cards {
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    display: flex;
    flex-direction: column;
  }

  .section3-panel--2 .section3-split-bottom--panel2-figma .section3-stat-grid.section3-stat-grid--panel2 {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    align-self: stretch;
    gap: 6px;
    grid-template-rows: auto 1fr;
    align-content: stretch;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card--panel2-wide {
    min-height: 161px;
    padding: clamp(1.125rem, 1.46vw, 1.75rem) clamp(1.25rem, 1.67vw, 2rem);
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card--panel2-wide .section3-stat-card__value {
    font-size: clamp(2rem, 3.2vw, 4rem);
    line-height: 1;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card--panel2-wide .section3-stat-card__row.section3-stat-card__row--gap16 {
    gap: 10px;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card--panel2-vol {
    align-self: stretch;
    min-height: 0;
    height: 100%;
    padding: clamp(1.125rem, 1.46vw, 1.75rem) clamp(1.25rem, 1.67vw, 2rem);
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 8px;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card--panel2-vol .section3-stat-card__value--56 {
    font-size: clamp(1.75rem, 2.8vw, 3.5rem);
    line-height: 1;
  }
}

.section3-stat-grid--covid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section3-stat-grid--covid .covid-manual-card {
  grid-column: 1 / -1;
}

.section3-stat-card__note--flush {
  margin-top: 0;
}

@media (max-width: 767px) {
  .section3-stat-grid--covid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.section3-section--time .section3-stat-card__icon--lg {
  width: clamp(52px, 4.5vw, 64px);
  height: clamp(52px, 4.5vw, 64px);
  object-fit: contain;
}

.section3-vol-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section3-gap);
  flex: 0 1 auto;
  min-height: 0;
}

.section3-vol-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section3-gap);
  width: 100%;
}

.section3-split-bottom__panel4-aside .time-report-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  flex: 0 0 auto;
}

.time-report-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(11px, 1.85vw, 13px);
  line-height: 1.45;
  letter-spacing: -0.04em;
  color: var(--color-brand-teal, #007058);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    filter 0.22s var(--ease-smooth, ease-in-out),
    box-shadow 0.22s var(--ease-smooth, ease-in-out),
    transform 0.22s var(--ease-smooth, ease-in-out);
}

@media (hover: hover) and (pointer: fine) {
  .time-report-link:hover {
    filter: brightness(1.04);
    box-shadow: 0 4px 14px rgba(0, 112, 88, 0.18);
    transform: translateY(-1px);
  }

  .time-report-link:active {
    filter: brightness(0.97);
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(0, 112, 88, 0.12);
  }
}

.time-report-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.time-report-link svg {
  flex-shrink: 0;
}

/* 패널4: 연구 보고서 버튼(아이콘 없음) — 호버 시 흰 테두리·브랜드 초록 배경·흰 글씨(그림자 없음) */
.section3-panel--4 .time-report-link.time-report-link--panel4 {
  gap: 0;
  justify-content: center;
  padding: 9px 18px;
  border: 2px solid transparent;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .section3-panel--4 .time-report-link.time-report-link--panel4:hover {
    filter: none;
    border-color: #fff;
    box-shadow: none;
    transform: none;
    background: var(--color-brand-teal, #007058);
    color: #fff;
  }

  .section3-panel--4 .time-report-link.time-report-link--panel4:active {
    transform: none;
    box-shadow: none;
    filter: brightness(0.92);
    border-color: #fff;
    background: var(--color-brand-teal, #007058);
    color: #fff;
  }
}

/* ----- 패널3: Figma desktop-time-3 523:14018 / mobile-time-3 524:15034 (패널1·2 figma 트랙·그리드 패턴) ----- */
.section3-stat-grid--panel3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  align-content: start;
  align-items: stretch;
}

.section3-stat-card--panel3-banner {
  grid-column: 1 / -1;
}

.section3-stat-card__panel3-metrics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
  min-width: 0;
}

.section3-stat-card__panel3-metrics .section3-stat-card__row {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
}

.section3-section--time .section3-panel--3 .section3-stat-card__label {
  font-family: "Peoplefirst Neat Loud", var(--font-sans);
  font-weight: 900;
  -webkit-text-stroke: max(0.8px, 0.011em) currentColor;
  paint-order: stroke fill;
}

.section3-section--time .section3-panel--3 .section3-stat-card__value {
  font-size: clamp(0.8125rem, 0.55rem + 2.4vmin, 4rem);
  line-height: 1;
  max-width: 100%;
}

.section3-section--time .section3-panel--3 .section3-stat-card__icon--lg {
  width: clamp(22px, 0.5rem + 3.2vmin, 64px);
  height: clamp(22px, 0.5rem + 3.2vmin, 64px);
}

.section3-stat-card__panel3-banner-copy {
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.75rem, 5.25vw, 4rem);
  line-height: 1.3;
  margin: 0;
  width: 100%;
  max-width: 100%;
  color: var(--color-brand-navy, #005eb8);
}

.section3-stat-card--panel3-banner {
  justify-content: center;
}

br.panel3-banner-br {
  display: inline;
}

@media (min-width: 1101px) {
  .section3-scroll--panel3-figma {
    gap: clamp(0.85rem, 1.65vmin, 1rem);
  }

  /* 1행: 보수교육 · 전문 강사 · 담당 교사 — 3열 균등, 배너는 2행 전폭 */
  .section3-panel--3 .section3-stat-grid.section3-stat-grid--panel3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 패널3: 흰 카드 열 세로 = 캐러셀(406px) — 패널2와 동일 */
  .section3-panel--3 .section3-split-bottom--panel3-figma .section3-split-bottom__cards {
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    display: flex;
    flex-direction: column;
  }

  .section3-panel--3 .section3-split-bottom--panel3-figma .section3-stat-grid.section3-stat-grid--panel3 {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    align-self: stretch;
    gap: 6px;
    /* 1행(보수교육·전문강사) 비중 ↑, 2행(응원키트) 비중 ↓ — 전체 406px 유지 */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    align-content: stretch;
  }

  .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-sm,
  .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-instructor,
  .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-teacher {
    min-height: 0;
    align-self: stretch;
    overflow: visible;
  }

  /*
   * 카드 열이 슬라이드 옆에서 좁아지면 2×1+배너 → 3블록 1열 세로 (보수교육 → 전문강사 → 응원키트)
   */
  @supports (container-type: inline-size) {
    .section3-panel--3 .section3-split-bottom--panel3-figma .section3-split-bottom__cards {
      container-type: inline-size;
      container-name: panel3-cards;
    }

    @container panel3-cards (max-width: 34rem) {
      .section3-panel--3 .section3-stat-grid.section3-stat-grid--panel3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto minmax(0, 1fr);
        align-content: stretch;
      }

      .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-sm,
      .section3-panel--3 .section3-stat-card--panel3-banner {
        grid-column: 1 / -1;
      }

      .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-instructor {
        grid-column: 1;
      }

      .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-teacher {
        grid-column: 2;
      }
    }
  }

  /* container query 미지원: 1252px 이하 — 전문강사·담당교사 2열 */
  @supports not (container-type: inline-size) {
    @media (max-width: 1252px) {
      .section3-panel--3 .section3-stat-grid.section3-stat-grid--panel3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto minmax(0, 1fr);
        align-content: stretch;
      }

      .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-sm,
      .section3-panel--3 .section3-stat-card--panel3-banner {
        grid-column: 1 / -1;
      }

      .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-instructor {
        grid-column: 1;
      }

      .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-teacher {
        grid-column: 2;
      }
    }
  }

  .section3-section--time .section3-panel--3 .section3-scroll--panel3-figma .section3-headline.section3-headline--home {
    font-size: var(--section3-panel-headline-size, clamp(1.5rem, 3.1vw, 3.5rem));
    line-height: 1.3;
    font-weight: 800;
  }

  /* 패널2와 동일하게 뷰포트 너비(vw)에 따라 손글씨 라벨·수치·아이콘이 가변 */
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-sm .section3-stat-card__label,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-instructor .section3-stat-card__label,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-teacher .section3-stat-card__label {
    font-size: clamp(1rem, 0.45vw + 0.82rem, 1.5rem);
    line-height: 1.45;
    letter-spacing: 0;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card__panel3-metrics {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.75rem, 1.75vw, 2rem);
  }

  @container panel-stat-card (max-width: 22rem) {
    .section3-stat-card__panel3-metrics {
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(0.65rem, 1.5vw, 1.25rem);
    }
  }

  .section3-panel--3 .section3-stat-card__panel3-metrics .section3-stat-card__row {
    flex: 0 1 auto;
    min-width: 0;
    gap: clamp(6px, 0.85vw, 12px);
  }

  .section3-panel--3 .section3-stat-card--panel3-sm,
  .section3-panel--3 .section3-stat-card--panel3-instructor,
  .section3-panel--3 .section3-stat-card--panel3-teacher {
    padding: clamp(1.125rem, 1.46vw, 1.75rem) clamp(1.25rem, 1.67vw, 2rem);
    box-sizing: border-box;
    justify-content: flex-start;
    overflow: visible;
  }

  /* 보수교육·전문강사·담당교사: 패널2 수치(clamp + vw)와 같은 방식 */
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-sm .section3-stat-card__value,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-instructor .section3-stat-card__value,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-teacher .section3-stat-card__value {
    font-size: clamp(1.5rem, 0.35rem + 2.65vw, 3.25rem);
    line-height: 1;
    max-width: 100%;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-sm .section3-stat-card__icon--lg,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-instructor .section3-stat-card__icon--lg,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-teacher .section3-stat-card__icon--lg {
    width: clamp(36px, 1.25rem + 2.8vw, 56px);
    height: clamp(36px, 1.25rem + 2.8vw, 56px);
  }

  .section3-panel--3 .section3-stat-card--panel3-banner {
    min-height: 0;
    align-self: stretch;
    padding: clamp(1.125rem, 1.6vw, 1.75rem) clamp(1.25rem, 2.2vw, 2.5rem);
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .section3-panel--3 .section3-stat-card__panel3-banner-copy {
    font-size: clamp(1.4rem, 0.85rem + 1.55vw, 2.5rem);
    line-height: 1.35;
  }
}

/* 패널3 배너: 넓은 데스크톱(1331px+)만 한 줄 — 1330px 이하는 br 줄바꿈 유지 */
@media (min-width: 1331px) {
  .section3-panel--3 .section3-stat-card__panel3-banner-copy {
    white-space: nowrap;
  }

  br.panel3-banner-br {
    display: none;
  }
}

/* 패널3: 1252px 이하 — 보수교육·배너 전폭, 전문강사·담당교사 2열 나란히 */
@media (max-width: 1252px) {
  .section3-panel--3 .section3-split-bottom--panel3-figma .section3-stat-grid.section3-stat-grid--panel3 {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .section3-panel--3 .section3-stat-grid.section3-stat-grid--panel3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, auto);
    align-content: start;
  }

  .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-sm,
  .section3-panel--3 .section3-stat-card--panel3-banner {
    grid-column: 1 / -1;
  }

  .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-instructor {
    grid-column: 1;
    grid-row: 2;
  }

  .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-teacher {
    grid-column: 2;
    grid-row: 2;
  }

  .section3-panel--3 .section3-stat-card--panel3-banner {
    grid-row: 3;
  }
}

/* ----- 패널4: Figma desktop-time-4 523:14178 / mobile-time-4 524:15181 (832×406 카드 열 + 523×406 슬라이드) ----- */
br.panel4-headline-br {
  display: none;
}

@media (max-width: 1100px) {
  .section3-panel--4 br.panel4-headline-br {
    display: inline;
  }
}

.section3-stat-grid--panel4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  align-content: start;
}

.section3-stat-card__panel4-orgs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.section3-stat-card__panel4-orgs .section3-stat-card__row {
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
}

.section3-section--time .section3-panel--4 .section3-stat-card__value--panel4-org {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.section3-stat-card__panel4-journal-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.section3-stat-card__panel4-journal-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: auto;
  min-width: 0;
}

.section3-stat-card__note--panel4-journal {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.section3-stat-card__note--panel4-journal p {
  margin: 0;
}

.section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__label {
  font-family: "Peoplefirst Neat Loud", var(--font-sans);
  font-weight: 900;
  -webkit-text-stroke: max(0.8px, 0.011em) currentColor;
  paint-order: stroke fill;
}

.section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card {
  min-width: 0;
}

@media (min-width: 1101px) {
  .section3-stat-grid--panel4 {
    max-width: none;
    width: 100%;
  }

  .section3-scroll--panel4-figma {
    gap: clamp(0.65rem, 1.2vmin, 0.85rem);
  }

  .section3-section--time .section3-panel--4 .section3-scroll--panel4-figma .section3-headline.section3-headline--home {
    font-size: var(--section3-panel-headline-size, clamp(1.5rem, 3.1vw, 3.5rem));
    line-height: 1.3;
    font-weight: 800;
  }

  /* 카드 열 너비(cqw) 기준으로 라벨·수치·아이콘 축소 — 슬라이드 옆 좁을 때 잘림 방지 */
  @supports (container-type: inline-size) {
    .section3-panel--4 .section3-split-bottom--panel4-figma .section3-split-bottom__cards {
      container-type: inline-size;
      container-name: panel4-cards;
    }
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__label {
    font-size: clamp(0.875rem, 3.6cqw + 0.55rem, 1.625rem);
    line-height: 1.45;
    letter-spacing: 0;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note,
  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note p {
    font-size: clamp(0.625rem, 2.4cqw + 0.38rem, 0.875rem);
    line-height: 1.45;
    letter-spacing: -0.03em;
  }

  /* 흰 카드 2개 스택 = 406px · 슬라이드 뷰포트 = 406px(연구보고서 행은 열 높이에 추가) */
  .section3-panel--4 .section3-split-bottom--panel4-figma .section3-split-bottom__cards {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    height: 406px;
    min-height: 406px;
    max-height: 406px;
    box-sizing: border-box;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  .section3-panel--4 .section3-split-bottom--panel4-figma .section3-stat-grid.section3-stat-grid--panel4 {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    align-self: stretch;
    gap: 4px;
    grid-template-rows: minmax(0, 6fr) minmax(0, 4fr);
    align-content: stretch;
  }

  .section3-panel--4 .section3-split-bottom__panel4-aside {
    flex: 0 0 523px;
    width: 523px;
    min-width: 523px;
    max-width: 523px;
    height: calc(406px + 2.75rem + 4px);
    min-height: calc(406px + 2.75rem + 4px);
    max-height: none;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 4px;
  }

  .section3-panel--4 .section3-split-bottom__panel4-aside .time-report-row--panel4 {
    margin-top: 0;
    flex-shrink: 0;
  }

  .section3-panel--4 .section3-split-bottom__panel4-aside .time-carousel.time-carousel--panel4 {
    flex: 0 0 406px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 406px !important;
    min-height: 406px !important;
    max-height: 406px !important;
    aspect-ratio: auto;
  }

  .section3-panel--4 .section3-stat-grid--panel4 > .section3-stat-card--panel4-research,
  .section3-panel--4 .section3-stat-grid--panel4 > .section3-stat-card--panel4-journal {
    min-height: 0;
    height: 100%;
    align-self: stretch;
  }

  .section3-panel--4 .section3-stat-card--panel4-research {
    padding: clamp(0.875rem, 1.2vw, 1.35rem) clamp(1.25rem, 1.67vw, 2rem);
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 5px;
    min-height: 0;
  }

  .section3-panel--4 .section3-stat-card--panel4-research .section3-stat-card__panel4-orgs,
  .section3-panel--4 .section3-stat-card--panel4-research .section3-stat-card__note {
    min-width: 0;
    max-width: 100%;
  }

  .section3-panel--4 .section3-stat-card--panel4-journal {
    padding: clamp(1.125rem, 1.46vw, 1.75rem) clamp(1.25rem, 1.67vw, 2rem);
    box-sizing: border-box;
    justify-content: flex-start;
    min-height: 0;
  }

  .section3-stat-card--panel4-journal .section3-stat-card__panel4-journal-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(8px, 2.5cqw, 16px);
    min-width: 0;
  }

  .section3-stat-card__panel4-journal-main {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(100%, 380px);
  }

  .section3-stat-card__note--panel4-journal {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-org {
    font-size: clamp(0.75rem, 7cqw + 0.42rem, 2rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-ajpress {
    font-size: clamp(0.875rem, 8.5cqw + 0.5rem, 2.25rem);
    line-height: 1;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__icon--lg {
    width: clamp(26px, 8cqw + 10px, 56px);
    height: clamp(26px, 8cqw + 10px, 56px);
  }

  .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--doc {
    width: clamp(22px, 6.5cqw + 8px, 44px);
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
    align-self: flex-start;
  }

  .section3-stat-card__panel4-orgs {
    gap: clamp(4px, 1.5cqw, 8px);
  }

  .section3-stat-card__panel4-orgs .section3-stat-card__row {
    gap: clamp(6px, 2cqw, 12px);
  }

  /* 카드 열이 슬라이드 옆에서 좁을 때: 학술지 본문 세로 스택 + 여백·행 비율 조정 */
  @supports (container-type: inline-size) {
    @container panel4-cards (max-width: 34rem) {
      .section3-panel--4 .section3-split-bottom--panel4-figma .section3-split-bottom__cards {
        overflow-x: hidden;
        overflow-y: auto;
      }

      .section3-stat-card--panel4-journal .section3-stat-card__panel4-journal-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .section3-stat-card__panel4-journal-main {
        max-width: 100%;
      }

      .section3-stat-card__note--panel4-journal {
        flex: 0 1 auto;
        width: 100%;
      }

      .section3-panel--4 .section3-stat-grid.section3-stat-grid--panel4 {
        grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
      }

      .section3-panel--4 .section3-stat-card--panel4-research {
        gap: 4px;
        padding: clamp(0.65rem, 2cqw + 0.45rem, 1rem) clamp(0.75rem, 2.5cqw + 0.4rem, 1.25rem);
      }

      .section3-panel--4 .section3-stat-card--panel4-journal {
        padding: clamp(0.65rem, 2cqw + 0.45rem, 1rem) clamp(0.75rem, 2.5cqw + 0.4rem, 1.25rem);
      }
    }

    @container panel4-cards (max-width: 26rem) {
      .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__label {
        font-size: clamp(0.8125rem, 4.5cqw + 0.5rem, 1rem);
        line-height: 1.4;
      }

      .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-org {
        font-size: clamp(0.6875rem, 8cqw + 0.35rem, 1.125rem);
      }

      .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-ajpress {
        font-size: clamp(0.75rem, 9.5cqw + 0.4rem, 1.35rem);
      }

      .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__icon--lg {
        width: clamp(22px, 9cqw + 6px, 36px);
        height: clamp(22px, 9cqw + 6px, 36px);
      }

      .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--doc {
        width: clamp(20px, 7.5cqw + 6px, 32px);
      }

      .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note,
      .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note p {
        font-size: clamp(0.5625rem, 3cqw + 0.32rem, 0.75rem);
        line-height: 1.4;
      }
    }
  }

  /* 패널4 데스크톱: 캐러셀 화살표(검정 SVG) → 브랜드 초록 #007058 */
  .section3-panel--4 .time-carousel.time-carousel--panel4 .time-carousel__btn-icon {
    filter: brightness(0) saturate(100%) invert(26%) sepia(90%) saturate(900%) hue-rotate(132deg) brightness(0.9) contrast(1.12);
  }

  .section3-panel--4 .time-carousel.time-carousel--panel4 .time-carousel__btn:hover:not(:disabled) .time-carousel__btn-icon,
  .section3-panel--4 .time-carousel.time-carousel--panel4 .time-carousel__btn:active:not(:disabled) .time-carousel__btn-icon {
    filter: brightness(0) invert(1);
  }
}

/* 이미지 슬라이드 (패널 공통 패턴) */
.time-carousel {
  position: relative;
  width: 100%;
  max-width: clamp(260px, 27.75vw, 523px);
  aspect-ratio: 523 / 406;
  align-self: flex-end;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.time-carousel.is-swiping {
  cursor: grabbing;
}

.time-carousel__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.time-carousel__viewport.is-swiping {
  cursor: grabbing;
  touch-action: none;
}

.time-carousel.is-swiping {
  touch-action: none;
}

.time-carousel__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  will-change: transform;
}

.time-carousel__track.is-animating {
  transition: transform 0.38s cubic-bezier(0.33, 0.72, 0.29, 1);
}

.time-carousel__track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.time-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.time-carousel__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .time-carousel__track.is-animating {
    transition: none;
  }
}

.time-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    background-color 0.22s var(--ease-smooth, ease-in-out),
    box-shadow 0.22s var(--ease-smooth, ease-in-out);
}

@media (hover: hover) and (pointer: fine) {
  .time-carousel__btn:hover:not(:disabled) {
    background-color: var(--color-brand-navy, #005eb8);
    box-shadow: 0 4px 16px rgba(0, 94, 184, 0.35);
  }

  .time-carousel__btn:hover:not(:disabled) .time-carousel__btn-icon {
    filter: brightness(0) invert(1);
  }

  .time-carousel__btn:active:not(:disabled) {
    background-color: #004585;
    box-shadow: 0 1px 8px rgba(0, 40, 80, 0.35);
  }

  .time-carousel__btn:active:not(:disabled) .time-carousel__btn-icon {
    filter: brightness(0) invert(1);
  }
}

.time-carousel__btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 좌·우 화살표: `assets/time/time-carousel-arrow-prev.svg` / `time-carousel-arrow-next.svg` (버튼 크기 유지·아이콘만 시각적 확대) */
.time-carousel__btn-icon {
  display: block;
  width: 24px;
  height: 24px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  flex-shrink: 0;
  transition: filter 0.22s var(--ease-smooth, ease-in-out);
}

.time-carousel__btn--prev {
  left: 8px;
}

.time-carousel__btn--next {
  right: 8px;
}

@media (max-width: 1100px) {
  .section3-section--time .section3-stat-card {
    border-radius: 8px;
  }

  .section3-section--time .section3-stat-card__label {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
  }

  .section3-section--time .section3-stat-grid,
  .section3-section--time .section3-vol-cols {
    gap: clamp(6px, 1.8vw, 10px);
  }

  /* 흰 카드 간 모바일에서도 패널색과 분리 */
  .section3-section--time .section3-stat-card {
    margin: 0;
  }

  .section3-section--time .section3-vol-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 패널 내 슬라이드: 태블릿·모바일(≤1100)에서 523/406·max-height 기본값 대신 16:9 전폭 */
  .section3-section--time .time-carousel {
    width: 100%;
    max-width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  .time-carousel {
    max-width: 100%;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    margin-top: clamp(8px, 2vw, 12px);
  }

  .time-carousel__btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .time-carousel__btn--prev {
    left: 8px;
  }

  .time-carousel__btn--next {
    right: 8px;
  }

  .time-carousel__btn-icon {
    width: 22px;
    height: 22px;
  }

  .section3-section.section3-section--time .section3-stat-card {
    border-bottom: none;
  }
}

.section3-split-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--section3-gap);
  margin-top: auto;
  width: 100%;
}

/* 패널1·2·3 figma: 한 줄(또는 ≤1100에서 세로 1열) 유지 — 기본 .section3-split-bottom의 flex-wrap:wrap보다 우선 */
.section3-split-bottom.section3-split-bottom--panel1-figma,
.section3-split-bottom.section3-split-bottom--panel2-figma,
.section3-split-bottom.section3-split-bottom--panel3-figma {
  align-items: flex-end;
  flex-wrap: nowrap;
}

.section3-split-bottom.section3-split-bottom--panel4-figma {
  align-items: flex-end;
  flex-wrap: nowrap;
}

.section3-split-bottom__cards {
  flex: 1 1 min(52rem, 100%);
  min-width: 0;
}

.section3-split-bottom .time-carousel {
  flex-shrink: 1;
  min-height: 0;
}

.section3-section--time .section3-headline--home {
  font-size: clamp(1.05rem, 2vw + 0.55rem, 2.25rem);
  line-height: 1.28;
}

@media (max-width: 1100px) {
  .section3-section--time .section3-headline {
    font-size: clamp(1rem, 3.25vw + 0.55rem, 1.375rem);
  }

  .section3-section--time .section3-scroll {
    gap: clamp(0.28rem, 1.2vmin, 0.65rem);
    /* 고정 헤더·노치 아래로 타이틀이 가려지지 않도록 상단 여백 확보 */
    padding-top: max(
      calc(2 * var(--section3-pad-x)),
      calc(
        env(safe-area-inset-top, 0px) + var(--process-header-height, var(--header-height, 3.5rem)) + clamp(0.5rem, 2vmin, 1rem)
      )
    );
    justify-content: flex-start;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section3-section--time .time-carousel:not(.time-carousel--panel1):not(.time-carousel--panel2) {
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  .section3-section--time .time-carousel.time-carousel--panel1,
  .section3-section--time .time-carousel.time-carousel--panel2 {
    max-height: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 16 / 9;
  }

  .section3-split-bottom {
    flex-direction: column;
    align-items: stretch;
    /* column + wrap 이면 세로 공간 부족 시 다음 '열'(우측)로 넘어감 → 태블릿에서 슬라이드가 옆으로 밀림 */
    flex-wrap: nowrap;
  }

  /* 세로 스택일 때는 슬라이드가 카드 블록 바로 아래에 붙도록 */
  .section3-split-bottom.section3-split-bottom--panel1-figma,
  .section3-split-bottom.section3-split-bottom--panel2-figma,
  .section3-split-bottom.section3-split-bottom--panel3-figma {
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .section3-split-bottom.section3-split-bottom--panel4-figma {
    align-items: stretch;
    flex-wrap: nowrap;
  }

  /*
   * 세로 스택(flex-direction: column)일 때 .time-carousel의 align-self: flex-end는
   * 교차축이 가로가 되어 슬라이드가 우측으로 밀림 → 전폭으로 쌓이도록 stretch.
   */
  .section3-split-bottom .time-carousel {
    align-self: stretch;
  }

  .section3-section--time .section3-split-bottom__cards {
    flex: 0 1 auto;
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  /* Figma mobile-time-1 / mobile-time-2: 20×16 패딩; 캐러셀은 뷰포트 너비에 맞춰 16:9 */
  .section3-section--time .section3-panel--1 .section3-scroll.section3-scroll--panel1-figma,
  .section3-section--time .section3-panel--5 .section3-scroll.section3-scroll--panel1-figma,
  .section3-section--time .section3-panel--2 .section3-scroll.section3-scroll--panel2-figma {
    padding: 20px 16px;
    padding-top: max(
      1.25rem,
      calc(
        env(safe-area-inset-top, 0px) + var(--process-header-height, var(--header-height, 3.5rem)) + clamp(0.5rem, 2.5vmin, 1.25rem)
      )
    );
    padding-bottom: 20px;
    gap: clamp(10px, 2.5vmin, 16px);
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section3-section--time .section3-panel--1 .section3-scroll.section3-scroll--panel1-figma .section3-headline.section3-headline--home,
  .section3-section--time .section3-panel--5 .section3-scroll.section3-scroll--panel1-figma .section3-headline.section3-headline--home,
  .section3-section--time .section3-panel--2 .section3-scroll.section3-scroll--panel2-figma .section3-headline.section3-headline--home {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;
  }

  .section3-section--time .section3-panel--1 .section3-stat-card__label,
  .section3-section--time .section3-panel--5 .section3-stat-card__label,
  .section3-section--time .section3-panel--2 .section3-stat-card__label {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  /* 모바일: Figma 24px 상한, 좁은 2열 셀에서는 cqw로 추가 축소 */
  .section3-section--time .section3-panel--1 .section3-stat-card__value,
  .section3-section--time .section3-panel--5 .section3-stat-card__value,
  .section3-section--time .section3-panel--2 .section3-stat-card__value {
    font-size: clamp(0.8125rem, 0.55rem + 3.8vw, 1.5rem);
    line-height: 1;
  }

  @supports (container-type: inline-size) {
    .section3-section--time .section3-panel--1 .section3-stat-card__value,
    .section3-section--time .section3-panel--5 .section3-stat-card__value,
    .section3-section--time .section3-panel--2 .section3-stat-card__value {
      font-size: clamp(0.8125rem, 10cqw + 0.65rem, 1.5rem);
      line-height: 1;
    }
  }

  .section3-section--time .section3-panel--1 .section3-stat-card__note,
  .section3-section--time .section3-panel--5 .section3-stat-card__note {
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: -0.0385em;
  }

  /* 패널1: 특수학교·특수학급 / 문화체험 캡션 — Figma mobile 12px */
  .section3-section--time .section3-panel--1 .section3-stat-card--panel1-md .section3-stat-card__note {
    font-size: 12px;
  }

  .section3-panel--1 .section3-stat-card--panel1-sm .section3-stat-card__icon--lg,
  .section3-panel--1 .section3-stat-card__panel1-mid .section3-stat-card__icon--lg,
  .section3-panel--5 .section3-stat-card--panel1-sm .section3-stat-card__icon--lg,
  .section3-panel--5 .section3-stat-card__panel1-mid .section3-stat-card__icon--lg,
  .section3-panel--2 .section3-stat-card--panel2-vol .section3-stat-card__icon--lg,
  .section3-panel--2 .section3-stat-card--panel2-wide .section3-stat-card__icon--lg {
    width: clamp(22px, 0.45rem + 6.5vw, 32px);
    height: clamp(22px, 0.45rem + 6.5vw, 32px);
  }

  @supports (container-type: inline-size) {
    .section3-panel--1 .section3-stat-card--panel1-sm .section3-stat-card__icon--lg,
    .section3-panel--1 .section3-stat-card__panel1-mid .section3-stat-card__icon--lg,
    .section3-panel--5 .section3-stat-card--panel1-sm .section3-stat-card__icon--lg,
    .section3-panel--5 .section3-stat-card__panel1-mid .section3-stat-card__icon--lg,
    .section3-panel--2 .section3-stat-card--panel2-vol .section3-stat-card__icon--lg,
    .section3-panel--2 .section3-stat-card--panel2-wide .section3-stat-card__icon--lg {
      width: clamp(22px, 9cqw + 8px, 32px);
      height: clamp(22px, 9cqw + 8px, 32px);
    }
  }

  .section3-panel--1 .section3-stat-card--panel1-sm .section3-stat-card__row,
  .section3-panel--5 .section3-stat-card--panel1-sm .section3-stat-card__row,
  .section3-panel--2 .section3-stat-card--panel2-vol .section3-stat-card__row,
  .section3-panel--2 .section3-stat-card--panel2-wide .section3-stat-card__row {
    gap: 6px;
  }

  /* 패널1 md(10px)와 동일한 내부 간격 — 흰 카드 사이는 그리드 gap 4px(패널1과 동일) */
  .section3-section--time .section3-panel--2 .section3-stat-card__panel2-metrics {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  @supports (container-type: inline-size) {
    .section3-section--time .section3-panel--2 .section3-stat-card {
      container-type: inline-size;
      container-name: panel-stat-card;
    }
  }

  .section3-section--time .section3-panel--2 .section3-stat-card--panel2-vol .section3-stat-card__value--56 {
    font-size: clamp(0.8125rem, 10cqw + 0.65rem, 1.5rem);
    line-height: 1;
  }

  @supports (container-type: inline-size) {
    .section3-section--time .section3-panel--2 .section3-stat-card--panel2-vol .section3-stat-card__value--56 {
      font-size: clamp(0.8125rem, 10cqw + 0.65rem, 1.5rem);
    }
  }

  .section3-panel--1 .section3-split-bottom.section3-split-bottom--panel1-figma,
  .section3-panel--5 .section3-split-bottom.section3-split-bottom--panel1-figma,
  .section3-panel--2 .section3-split-bottom.section3-split-bottom--panel2-figma {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: stretch;
    gap: 4px;
    margin-top: 0;
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
  }

  .section3-panel--1 .section3-split-bottom--panel1-figma .section3-split-bottom__cards,
  .section3-panel--5 .section3-split-bottom--panel1-figma .section3-split-bottom__cards,
  .section3-panel--2 .section3-split-bottom--panel2-figma .section3-split-bottom__cards {
    gap: 4px;
    flex: 0 1 auto;
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  /*
   * Figma 658:2326 mobile-time-1 흰 카드: 2×2 (생활체육|운동회 → 특수학교·특수학급|문화체험)
   * HTML은 데스크톱 순서(운동회, 생활체육, …) 유지 → 모바일만 order로 1행 배치 보정
   */
  .section3-section--time .section3-panel--1 .section3-stat-grid.section3-stat-grid--panel1.section3-stat-grid--2col-mobile,
  .section3-section--time .section3-panel--5 .section3-stat-grid.section3-stat-grid--panel1.section3-stat-grid--2col-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 4px;
    align-content: start;
  }

  .section3-section--time .section3-panel--1 .section3-stat-grid--panel1.section3-stat-grid--2col-mobile .section3-stat-card--panel1-sm:nth-child(1) {
    order: 2;
  }

  .section3-section--time .section3-panel--1 .section3-stat-grid--panel1.section3-stat-grid--2col-mobile .section3-stat-card--panel1-sm:nth-child(2) {
    order: 1;
  }

  .section3-section--time .section3-panel--1 .section3-stat-grid--panel1.section3-stat-grid--2col-mobile .section3-stat-panel1-span-mobile:nth-child(3) {
    order: 3;
  }

  .section3-section--time .section3-panel--1 .section3-stat-grid--panel1.section3-stat-grid--2col-mobile .section3-stat-panel1-span-mobile:nth-child(4) {
    order: 4;
  }

  .section3-section--time .section3-panel--1 .section3-stat-grid--panel1.section3-stat-grid--2col-mobile .section3-stat-panel1-span-mobile {
    grid-column: auto;
  }

  .section3-section--time .section3-panel--1 .section3-stat-card,
  .section3-section--time .section3-panel--5 .section3-stat-card,
  .section3-section--time .section3-panel--2 .section3-stat-card {
    border-radius: 6px;
    padding: 12px 16px;
    gap: 4px;
    border-bottom: none;
  }

  .section3-section--time .section3-panel--1 .section3-stat-card--tall.section3-stat-card--panel1-md,
  .section3-section--time .section3-panel--1 .section3-stat-card--panel1-md:not(.section3-stat-card--panel1-sm),
  .section3-section--time .section3-panel--5 .section3-stat-card--tall.section3-stat-card--panel1-md,
  .section3-section--time .section3-panel--5 .section3-stat-card--panel1-md:not(.section3-stat-card--panel1-sm) {
    gap: 10px;
  }

  /* 패널2: 패널1과 동일 — 카드 사이 간격 4px만, align-content start(1fr 행 늘리기 없음) */
  .section3-section--time .section3-panel--2 .section3-stat-grid--panel2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-content: start;
  }

  .section3-section--time .section3-panel--2 .section3-stat-grid--panel2 .section3-stat-panel2-span-full {
    grid-column: 1 / -1;
  }

  .section3-section--time .time-carousel.time-carousel--panel1,
  .section3-section--time .section3-panel--2 .time-carousel.time-carousel--panel2 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    min-height: 0;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    margin-top: 0;
    align-self: stretch;
  }

  /* 시간 섹션: 1100px 이하 패널 안(그리드·분할) — 트랙·패널 축은 위 기본 규칙으로 고정 */
  .section3-section--time .section3-panel {
    flex-grow: 1;
    flex-basis: 0;
    max-width: none;
  }

  .section3-section--time .section3-split-bottom {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .section3-section--time .section3-stat-grid:not(.section3-stat-grid--2col-mobile),
  .section3-section--time .section3-stat-grid--row3,
  .section3-section--time .section3-stat-grid--volunteer,
  .section3-section--time .section3-stat-grid--1col-mobile,
  .section3-section--time .section3-stat-grid--time-edu,
  .section3-section--time .section3-stat-grid--covid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(6px, 1.5vw, 10px);
  }

  /* 패널5: 3번 카드만 전폭(패널1은 2×2 — 위 panel--1 규칙) */
  .section3-section--time .section3-panel--5 .section3-stat-grid--panel1 .section3-stat-panel1-span-mobile {
    grid-column: 1 / -1;
  }

  .section3-section--time .section3-vol-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 패널3: ≤1100px — 패널1·2 figma 모바일 규칙을 panel--3에만 동일 적용 */
@media (max-width: 1100px) {
  .section3-split-bottom.section3-split-bottom--panel3-figma {
    align-items: stretch;
  }

  .section3-section--time .section3-panel--3 .section3-scroll.section3-scroll--panel3-figma {
    padding: 20px 16px;
    padding-top: max(
      1.25rem,
      calc(
        env(safe-area-inset-top, 0px) + var(--process-header-height, var(--header-height, 3.5rem)) + clamp(0.5rem, 2.5vmin, 1.25rem)
      )
    );
    padding-bottom: 20px;
    gap: clamp(10px, 2.5vmin, 16px);
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section3-section--time .section3-panel--3 .section3-scroll.section3-scroll--panel3-figma .section3-headline.section3-headline--home {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card__label {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card__value {
    font-size: clamp(0.8125rem, 0.55rem + 3.8vw, 1.5rem);
    line-height: 1;
  }

  @supports (container-type: inline-size) {
    .section3-section--time .section3-panel--3 .section3-stat-card {
      container-type: inline-size;
      container-name: panel-stat-card;
    }

    .section3-section--time .section3-panel--3 .section3-stat-card__value {
      font-size: clamp(0.8125rem, 10cqw + 0.65rem, 1.5rem);
      line-height: 1;
    }
  }

  .section3-panel--3 .section3-stat-card--panel3-sm .section3-stat-card__icon--lg,
  .section3-panel--3 .section3-stat-card--panel3-instructor .section3-stat-card__icon--lg,
  .section3-panel--3 .section3-stat-card--panel3-teacher .section3-stat-card__icon--lg {
    width: clamp(22px, 0.45rem + 6.5vw, 32px);
    height: clamp(22px, 0.45rem + 6.5vw, 32px);
  }

  @supports (container-type: inline-size) {
    .section3-panel--3 .section3-stat-card--panel3-sm .section3-stat-card__icon--lg,
    .section3-panel--3 .section3-stat-card--panel3-instructor .section3-stat-card__icon--lg,
    .section3-panel--3 .section3-stat-card--panel3-teacher .section3-stat-card__icon--lg {
      width: clamp(22px, 9cqw + 8px, 32px);
      height: clamp(22px, 9cqw + 8px, 32px);
    }
  }

  .section3-panel--3 .section3-stat-card--panel3-sm .section3-stat-card__row,
  .section3-panel--3 .section3-stat-card--panel3-instructor .section3-stat-card__row,
  .section3-panel--3 .section3-stat-card--panel3-teacher .section3-stat-card__row {
    gap: 6px;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card__panel3-metrics {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-sm .section3-stat-card__row,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-instructor .section3-stat-card__row,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-teacher .section3-stat-card__row {
    flex-wrap: nowrap;
  }

  .section3-panel--3 .section3-split-bottom.section3-split-bottom--panel3-figma {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: stretch;
    gap: 4px;
    margin-top: 0;
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
  }

  .section3-panel--3 .section3-split-bottom--panel3-figma .section3-split-bottom__cards {
    gap: 4px;
    flex: 0 1 auto;
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .section3-section--time .section3-panel--3 .section3-stat-grid--panel3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: 4px;
    align-content: start;
  }

  .section3-section--time .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-sm,
  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-banner {
    grid-column: 1 / -1;
  }

  .section3-section--time .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-instructor {
    grid-column: 1;
    grid-row: 2;
  }

  .section3-section--time .section3-panel--3 .section3-stat-grid--panel3 > .section3-stat-card--panel3-teacher {
    grid-column: 2;
    grid-row: 2;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card--panel3-banner {
    grid-row: 3;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card {
    border-radius: 6px;
    padding: 12px 16px;
    gap: 4px;
    border-bottom: none;
    min-height: min-content;
    overflow: visible;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card__label {
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  /* 세로가 매우 짧을 때도 카드와 슬라이드 사이 gap(4px) 유지 — 슬라이드 높이 상한으로 비율 축소 */
  .section3-section--time .section3-panel--3 .time-carousel.time-carousel--panel3 {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    min-height: 0 !important;
    max-height: min(46dvh, 72vw, 320px) !important;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    margin-top: 0;
    align-self: stretch;
  }

  .section3-section--time .section3-panel--3 .section3-stat-card__panel3-banner-copy {
    font-size: clamp(1.375rem, 3.6vw, 1.75rem);
    line-height: 1.3;
    font-weight: 800;
  }
}

/* 패널3·4: 세로 매우 짧은 기기 — 슬라이드 높이 추가 상한(카드와 4px gap 유지) */
@media (max-width: 1100px) and (max-height: 560px) {
  .section3-section--time .section3-panel--3 .time-carousel.time-carousel--panel3,
  .section3-section--time .section3-panel--4 .time-carousel.time-carousel--panel4 {
    max-height: min(28dvh, 160px) !important;
  }
}

/* 패널4: ≤1100px — 패널3 figma 모바일과 동일 패턴 */
@media (max-width: 1100px) {
  .section3-section--time .section3-panel--4 .section3-scroll.section3-scroll--panel4-figma {
    padding: 20px 16px;
    padding-top: max(
      1.25rem,
      calc(
        env(safe-area-inset-top, 0px) + var(--process-header-height, var(--header-height, 3.5rem)) + clamp(0.5rem, 2.5vmin, 1.25rem)
      )
    );
    padding-bottom: 20px;
    gap: clamp(10px, 2.5vmin, 16px);
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section3-section--time .section3-panel--4 .section3-scroll.section3-scroll--panel4-figma .section3-headline.section3-headline--home {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 800;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__label {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    line-height: 1.5;
    letter-spacing: 0;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note,
  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note p {
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: -0.0385em;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-org,
  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-ajpress {
    font-size: clamp(0.8125rem, 0.55rem + 3.8vw, 1.5rem);
    line-height: 1;
  }

  @supports (container-type: inline-size) {
    .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 > .section3-stat-card {
      container-type: inline-size;
      container-name: panel4-card;
    }

    .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-org,
    .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-ajpress {
      font-size: clamp(0.8125rem, 10cqw + 0.65rem, 1.5rem);
      line-height: 1;
    }

    .section3-panel--4 .section3-stat-card--panel4-research .section3-stat-card__icon--lg,
    .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--lg {
      width: clamp(22px, 9cqw + 8px, 32px);
      height: clamp(22px, 9cqw + 8px, 32px);
    }
  }

  .section3-panel--4 .section3-stat-card--panel4-research .section3-stat-card__icon--lg,
  .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--lg {
    width: clamp(22px, 0.45rem + 6.5vw, 32px);
    height: clamp(22px, 0.45rem + 6.5vw, 32px);
  }

  .section3-panel--4 .section3-stat-card--panel4-research .section3-stat-card__row,
  .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__row {
    gap: 6px;
  }

  .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--doc {
    width: clamp(22px, 0.4rem + 5.5vw, 32px);
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
  }

  .section3-panel--4 .section3-split-bottom__panel4-aside {
    display: contents;
    width: 100%;
    align-self: stretch;
    gap: 4px;
  }

  /* 연구보고서 → 흰 카드 위·우측, 슬라이드 맨 아래 (≤1100px) */
  .section3-panel--4 .section3-split-bottom.section3-split-bottom--panel4-figma {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 4px;
    align-items: stretch;
    align-self: stretch;
    margin-top: 0;
    flex: 0 1 auto;
    min-height: min-content;
    width: 100%;
    overflow: visible;
  }

  .section3-panel--4 .time-report-row.time-report-row--panel4 {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  .section3-panel--4 .section3-split-bottom--panel4-figma .section3-split-bottom__cards {
    grid-row: 2;
    grid-column: 1;
    gap: 4px;
    flex: 0 0 auto;
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    min-height: min-content;
    overflow: visible;
    position: relative;
    z-index: 2;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-content: start;
    flex: 0 1 auto;
    min-height: min-content;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card {
    border-radius: 6px;
    padding: 12px 16px;
    gap: 4px;
    border-bottom: none;
  }

  .section3-section--time .section3-panel--4 .time-carousel.time-carousel--panel4 {
    grid-row: 3;
    grid-column: 1;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto;
    min-height: 0 !important;
    max-height: min(46dvh, 72vw, 320px) !important;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    margin-top: 0;
    align-self: stretch;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
}

/* 690~1100px: 슬라이드 16:6 (1101px+는 데스크톱 비율; 폭 690 미만 패널4는 ≤767에서 16:6) */
@media (min-width: 690px) and (max-width: 1100px) {
  .section3-section--time .time-carousel.time-carousel--panel1,
  .section3-section--time .section3-panel--2 .time-carousel.time-carousel--panel2,
  .section3-section--time .section3-panel--3 .time-carousel.time-carousel--panel3,
  .section3-section--time .section3-panel--4 .time-carousel.time-carousel--panel4 {
    aspect-ratio: 16 / 6;
  }
}

/* 모바일(≤767px): 패널 안 흰 카드 블록 사이 4px — 1100px 이하의 clamp(6px~) 최소값 보정 */
@media (max-width: 767px) {
  .section3-section--time {
    --section3-gap: 4px;
  }

  .section3-section--time .section3-stat-grid,
  .section3-section--time .section3-vol-cols {
    gap: 4px;
  }

  .section3-section--time .section3-stat-grid:not(.section3-stat-grid--2col-mobile),
  .section3-section--time .section3-stat-grid--row3,
  .section3-section--time .section3-stat-grid--volunteer,
  .section3-section--time .section3-stat-grid--1col-mobile,
  .section3-section--time .section3-stat-grid--time-edu,
  .section3-section--time .section3-stat-grid--covid {
    gap: 4px;
  }

  .section3-section--time .section3-stat-grid--panel3 {
    gap: 4px;
  }

  .section3-section--time .section3-stat-grid--panel4 {
    gap: 4px;
  }

  /* 패널2: 임직원·대학생 카드 — 명·분 한 줄 가로 배열 */
  .section3-section--time .section3-panel--2 .section3-stat-card__panel2-metrics {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(4px, 1.5vw, 8px);
    width: 100%;
  }

  .section3-section--time .section3-panel--2 .section3-stat-card__panel2-metrics .section3-stat-card__row {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  @supports (container-type: inline-size) {
    @container panel-stat-card (max-width: 22rem) {
      .section3-section--time .section3-panel--2 .section3-stat-card__panel2-metrics {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
      }
    }
  }

  .section3-panel--4 .time-report-link.time-report-link--panel4 {
    padding: 6px 12px;
  }

  .section3-section--time .section3-panel--4 .time-carousel.time-carousel--panel4 {
    aspect-ratio: 16 / 6;
    max-height: none;
    height: auto;
    flex: 0 0 auto;
  }

  .section3-stat-card__panel4-orgs {
    gap: 4px;
  }

  /* 패널4: 폰(≤767) — 산세리프(보조문) 축소 · 라벨·주요 수치·아이콘 확대 */
  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note,
  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__note p {
    font-size: clamp(0.625rem, 1.65vw, 0.6875rem);
    line-height: 1.42;
    letter-spacing: -0.025em;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__label {
    font-size: clamp(0.9375rem, 3.75vw, 1.0625rem);
    line-height: 1.45;
  }

  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-org,
  .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-ajpress {
    font-size: clamp(0.8125rem, 0.5rem + 3.5vw, 1.3rem);
    line-height: 1.12;
  }

  @supports (container-type: inline-size) {
    .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-org,
    .section3-section--time .section3-panel--4 .section3-stat-grid--panel4 .section3-stat-card__value--panel4-ajpress {
      font-size: clamp(0.8125rem, 7.5cqw + 0.48rem, 1.3rem);
      line-height: 1.12;
    }
  }

  .section3-panel--4 .section3-stat-card--panel4-research .section3-stat-card__icon--lg,
  .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--lg {
    width: clamp(24px, 0.38rem + 5.8vw, 36px);
    height: clamp(24px, 0.38rem + 5.8vw, 36px);
  }

  @supports (container-type: inline-size) {
    .section3-panel--4 .section3-stat-card--panel4-research .section3-stat-card__icon--lg,
    .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--lg {
      width: clamp(24px, 7.5cqw + 8px, 36px);
      height: clamp(24px, 7.5cqw + 8px, 36px);
    }
  }

  .section3-panel--4 .section3-stat-card--panel4-journal .section3-stat-card__icon--doc {
    width: clamp(22px, 0.34rem + 5vw, 34px);
    height: auto;
  }
}

/* 중간 너비: 그리드 2열 유지, 글자만 축소 (이미 clamp) */
@media (min-width: 768px) and (max-width: 1023px) {
  .section3-headline {
    font-size: clamp(1.3rem, 3vw, 2.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section3-panel,
  .section3-content {
    transition: none;
  }

  .section3-panel.is-folded {
    transition: none;
  }

  .section3-content.section3-content--fade-in {
    animation: none !important;
  }

  .time-carousel__btn,
  .time-report-link {
    transition: none;
  }

  .time-report-link:hover,
  .time-report-link:active {
    transform: none;
  }

  html {
    scroll-snap-type: none;
  }

  .section3-snap {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

/* ----- 패널5 이후 아웃트로: sticky 흰 100vh + 스크롤에서 노란 원·전면 노랑 (panel5-outro-scroll.js) ----- */
.section3-panel5-outro {
  position: relative;
  width: 100%;
  min-height: 0;
  background: #ffeb00;
}

/* 인트로(타자기·노란 원·중앙 문구)만 sticky 스크롤 — 비교표·탭은 트랙 밖 문서 흐름 */
.section3-panel5-outro__intro-track {
  position: relative;
  width: 100%;
  min-height: calc(100dvh + var(--panel5-outro-sticky-scroll, 1240vh));
}

.section3-panel5-outro__pin {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  max-height: none;
  z-index: 2;
  box-sizing: border-box;
  /* 인트로는 __scene 흰색으로 덮임. compare↔탭 사이 margin 등 빈 공간은 투명이면 부모 네이비가 비침 → 노랑 유지 */
  background-color: #ffeb00;
  --p5-outro-circle: 0;
  --p5-outro-final-enter: 0;
  --p5-outro-final-opacity: 0;
  --p5-outro-table: 0;
  --p5-cmp-before: 0;
  --p5-cmp-arrow: 0;
  --p5-cmp-after: 0;
}

/* 인트로(노란 원·비교표)만 100vh 클립 — 탭은 아래 문서 흐름으로 같은 스크롤 */
.section3-panel5-outro__intro-lock {
  flex: 0 0 auto;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}

.section3-panel5-outro__scene {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  min-height: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}

.section3-panel5-outro__white {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
}

.section3-panel5-outro__edge {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  max-width: min(92vw, 42rem);
  padding: 0 1rem;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--impact-section-title-size);
  line-height: var(--impact-section-title-line-height);
  color: #005bac;
  pointer-events: none;
  /* 글자별 타자기는 JS(panel5-outro-scroll.js), 여기서는 최종 문구 구간에서만 페이드아웃 */
  opacity: clamp(0, calc(1 - var(--p5-outro-final-enter, 0) * 2.75), 1);
}

.section3-panel5-outro__edge-typed {
  display: inline;
  white-space: pre-wrap;
}

.section3-panel5-outro__ch {
  display: inline;
  opacity: 0;
  transition: none;
}

.section3-panel5-outro__edge--top {
  top: max(10vh, calc(env(safe-area-inset-top, 0px) + 4.5rem));
}

.section3-panel5-outro__edge--bottom {
  bottom: max(10vh, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
}

/* 전면 노랑(원과 겹쳐 균일 배경) — 원이 거의 화면을 덮을 때 페이드인 */
.section3-panel5-outro__yellowfloor {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #ffeb00;
  pointer-events: none;
  opacity: clamp(0, calc((var(--p5-outro-circle, 0) - 0.82) * 5.5), 1);
  transition: none;
}

.section3-panel5-outro__disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: max(3px, calc(var(--p5-outro-circle, 0) * 260vmin));
  height: max(3px, calc(var(--p5-outro-circle, 0) * 260vmin));
  border-radius: 50%;
  background: #ffeb00;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
  pointer-events: none;
}

.section3-panel5-outro__final {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  max-width: min(90vw, 36rem);
  padding: 0 1rem;
  box-sizing: border-box;
  text-align: center;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.2;
  color: #005bac;
  pointer-events: none;
  opacity: var(--p5-outro-final-opacity, 0);
  transform: translate(-50%, -50%);
}

/* 스크롤 진행(--p5-outro-final-enter)에 맞춰 한 줄씩 아래→위 페이드인 */
.section3-panel5-outro__final-line {
  --line-rise: 1.25rem;
  --line-enter-step: 3.4;
  display: block;
  opacity: clamp(
    0,
    calc((var(--p5-outro-final-enter, 0) - var(--line-enter-offset, 0)) * var(--line-enter-step)),
    1
  );
  transform: translate3d(
    0,
    calc(
      (1 - clamp(
        0,
        calc((var(--p5-outro-final-enter, 0) - var(--line-enter-offset, 0)) * var(--line-enter-step)),
        1
      )) * var(--line-rise)
    ),
    0
  );
  will-change: opacity, transform;
}

.section3-panel5-outro__final-line:nth-child(1) {
  --line-enter-offset: 0;
}

.section3-panel5-outro__final-line:nth-child(2) {
  --line-enter-offset: 0.28;
}

.section3-panel5-outro__final-line:nth-child(3) {
  --line-enter-offset: 0.56;
}

@media (prefers-reduced-motion: reduce) {
  .section3-panel5-outro__final-line {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ----- 참여 전·후 비교: pin 문서 흐름(인트로 밖) — 스크롤 후에도 탭 위에 유지 ----- */
.section3-panel5-outro__compare-slot {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  box-sizing: border-box;
  overflow: visible;
  background: #ffeb00;
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.section3-panel5-outro__compare {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(1rem, 3vw, 2rem) min(16px, 4vw) clamp(0.5rem, 2vw, 1.25rem);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 1;
}

.section3-panel5-outro__compare-inner {
  pointer-events: auto;
  width: 100%;
  max-width: 52rem; /* 832px */
  max-height: min(100dvh, 100%);
  overflow: visible;
  opacity: 1;
  transform: none;
  transition: none;
}

.section3-p5-compare-layout {
  align-items: center !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  margin-bottom: 40px;
}

@keyframes section3-p5-compare-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.section3-panel5-outro__compare-inner:not(.is-revealed) .section3-p5-compare-rise {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

.section3-panel5-outro__compare-inner.is-revealed .section3-p5-compare-rise {
  animation: section3-p5-compare-rise-in 0.52s var(--ease-smooth-in-out, cubic-bezier(0.33, 0.72, 0.29, 1)) both;
  animation-delay: var(--compare-rise-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .section3-panel5-outro__compare-inner .section3-p5-compare-rise {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.section3-p5-compare-col-title {
  padding-bottom: 16px;
  margin: 0;
  text-align: center;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #005eb8;
}

.section3-p5-compare-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section3-p5-compare-card {
  margin: 0;
  padding: 20px 32px;
  border-radius: 12px;
  background: #fff;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem; /* 24px — 피그마 데스크톱 본문 */
  line-height: 1.5;
  color: #005eb8;
  text-align: center;
  box-sizing: border-box;
}

.section3-p5-compare-br-mobile {
  display: none;
}

.section3-p5-compare-arrow__svg {
  display: block;
  flex-shrink: 0;
}

.section3-p5-compare-arrow__svg--mobile {
  display: none;
}

.section3-p5-compare-outcomes {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}

.section3-p5-compare-outcome {
  flex: 1 1 0;
  min-width: 0;
  min-height: 10.0625rem; /* 161px */
  padding: 1.5rem 0.5rem;
  border-radius: 12px;
  background: #b9ddff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  text-align: center;
}

.section3-p5-compare-outcome__icon {
  display: block;
  height: 2.5rem;
  width: auto;
  aspect-ratio: 42 / 32;
  max-width: min(100%, 3.25rem);
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

.section3-p5-compare-outcome__label {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25rem; /* 20px — 피그마 데스크톱 하단 카드 */
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: #005eb8;
}

.section3-p5-compare-outcome__label-mobile {
  display: none;
}

.section3-p5-compare-outcome__label-desktop {
  display: block;
}

@media (max-width: 767px) {
  .section3-panel5-outro__edge {
    font-size: 1.5rem;
  }

  .section3-panel5-outro__final {
    font-size: 1.5rem;
  }

  .section3-p5-compare-br-mobile {
    display: inline;
  }

  .section3-p5-compare-layout {
    gap: 8px;
  }

  .section3-p5-compare-col-title {
    font-size: 1.5rem; /* 24px */
  }

  .section3-p5-compare-card {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem; /* 14px */
  }

  .section3-p5-compare-arrow__svg--desktop {
    display: none;
  }

  .section3-p5-compare-arrow__svg--mobile {
    display: block;
  }

  .section3-p5-compare-outcomes {
    gap: 4px;
  }

  .section3-p5-compare-outcome__icon {
    height: 2rem;
  }

  .section3-p5-compare-outcome {
    min-height: 6.3125rem; /* 101px */
    padding: 1rem 0.25rem;
    border-radius: 6px;
    gap: 6px;
  }

  .section3-p5-compare-outcome__label {
    font-size: 0.6875rem; /* 11px */
    letter-spacing: -0.0455em;
  }

  .section3-p5-compare-outcome__label-desktop {
    display: none;
  }

  .section3-p5-compare-outcome__label-mobile {
    display: block;
  }
}

/* ----- 패널5: 5탭 파란 박스 (문서 스크롤, 탭은 항상 표시) ----- */
.section3-panel5-outro__tabs-flow {
  flex: 0 1 auto;
  position: relative;
  z-index: 1;
  width: 100%;
  background: #ffeb00;
  box-sizing: border-box;
  margin-top: 0;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  overflow: visible;
}

.section3-panel5-outro__tabs-wrap {
  position: relative;
  inset: auto;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  padding: 0 min(12px, 3vw) 0;
  box-sizing: border-box;
  pointer-events: none;
  overflow: visible;
}

.section3-p5-tabs {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(96vw, 110rem);
  margin: 0 auto;
  overflow: visible;
  border-radius: 0;
}

/* 스크롤 진입 시: 탭 버튼 + 본문 박스 한 덩어리로 페이드인 */
.section3-panel5-outro__tabs-wrap:not(.is-tabs-revealed) .section3-p5-tabs.section3-p5-tabs-rise {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

.section3-panel5-outro__tabs-wrap.is-tabs-revealed .section3-p5-tabs.section3-p5-tabs-rise {
  animation: section3-p5-compare-rise-in 0.52s var(--ease-smooth-in-out, cubic-bezier(0.33, 0.72, 0.29, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
  .section3-panel5-outro__tabs-wrap .section3-p5-tabs.section3-p5-tabs-rise {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.section3-p5-tabs__list {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: stretch;
  width: 100%;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 25;
  background: #ffeb00;
  box-sizing: border-box;
}

.section3-p5-tabs__tab {
  flex: 1 1 0;
  min-width: 20%;
  min-height: 5rem;
  margin: 0;
  padding: 0.9rem 0.5rem 1rem;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  text-align: center;
  color: #999999;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .section3-p5-tabs__tab:hover,
  .section3-p5-tabs__tab:active {
    box-shadow: none;
    filter: none;
  }

  .section3-p5-tabs__tab:not(.is-active):hover,
  .section3-p5-tabs__tab:not(.is-active):focus-visible {
    color: var(--color-brand-navy, #005eb8);
  }

  /* SVG 흰 fill → #005eb8 (비활성 기본 #999는 invert(60%)) */
  .section3-p5-tabs__tab:not(.is-active):hover .section3-p5-tabs__tab-icon,
  .section3-p5-tabs__tab:not(.is-active):focus-visible .section3-p5-tabs__tab-icon {
    filter: brightness(0) saturate(100%) invert(24%) sepia(89%) saturate(2476%) hue-rotate(195deg)
      brightness(92%) contrast(101%);
  }
}

@media (min-width: 768px) {
  .section3-p5-tabs__tab {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 3.25rem;
    padding: 0.6rem 1rem 0.7rem;
    gap: 0.4rem;
    font-size: 1.125rem;
    line-height: 1.3;
    text-align: left;
  }


  .section3-p5-tabs__tab-label {
    text-align: left;
  }
}

.section3-p5-tabs__tab-icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.section3-p5-tabs__tab-label {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  word-break: keep-all;
}

.section3-p5-tabs__tab:not(.is-active) .section3-p5-tabs__tab-icon {
  opacity: 1;
  /* SVG는 흰색 fill → 실제 표시색 #999999에 맞춤 */
  filter: brightness(0) invert(60%);
  transition: filter 0.15s ease;
}

.section3-p5-tabs__tab.is-active .section3-p5-tabs__tab-icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.section3-p5-tabs__tab.is-active {
  color: #fff;
  background: #005eb8;
}

.section3-p5-tabs__body {
  flex: 0 0 auto;
  min-height: 0;
  position: relative;
  display: block;
  background: #005eb8;
  overflow: visible;
  overflow-anchor: none;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

/* 활성 패널만 표시(콘텐츠 높이) — 탭 전환 시 JS가 스크롤 보정으로 박스 위치 유지 */
.section3-p5-tabs-panel {
  --p5-handwriting-size: clamp(1rem, 1.65vw, 1.625rem);
  --p5-handwriting-width: 70%;
  --p5-photo-handwriting-gap: clamp(1rem, 2.5vw, 1.75rem);
  --p5-stream-block-gap: 2.5rem;
  display: none;
  width: 100%;
  min-width: 0;
  overflow: visible;
  overflow-anchor: none;
  position: relative;
  padding: clamp(1.5rem, 3vw, 4rem);
  padding-bottom: calc(clamp(1.5rem, 3vw, 4rem) + 1.75rem);
  box-sizing: border-box;
  color: #fff;
}

.section3-p5-tabs-panel.is-active {
  display: block;
  z-index: 1;
}

.section3-p5-tabs-panel__footnote {
  position: absolute;
  left: clamp(1.5rem, 3vw, 4rem);
  right: clamp(1.5rem, 3vw, 4rem);
  bottom: clamp(1.5rem, 3vw, 4rem);
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  padding-top: 16px;
}

.section3-p5-tabs-panel__lead,
.section3-p5-doosan__lead {
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.85vw, 3rem);
  line-height: 1.3;
  color: #fff;
  overflow: hidden;
}

.section3-p5-tabs-panel__lead {
  margin: 0 0 2.5rem;
  max-width: 35rem;
}

.section3-p5-lead__line {
  display: block;
  opacity: 0;
  transform: translate3d(0, 0.65em, 0);
}

.section3-p5-lead__line.is-in {
  animation: p5-tab-lead-line-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.05s + var(--p5-line-i, 0) * 0.11s);
}

@keyframes p5-tab-lead-line-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.65em, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.section3-p5-tabs-panel__quote,
.section3-p5-doosan__quote {
  margin: 0 auto;
  font-family: "Peoplefirst Neat Loud", var(--font-sans);
  font-weight: 400;
  font-size: var(--p5-handwriting-size);
  line-height: 1.5;
  text-align: center;
  color: #fff;
}

.section3-p5-tabs-panel__text {
  margin: 0 auto;
  font-family: "Peoplefirst Neat Loud", var(--font-sans);
  font-size: var(--p5-handwriting-size);
  line-height: 1.5;
  text-align: center;
  color: #fff;
}

.section3-p5-tabs-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  min-width: 0;
}

@media (min-width: 768px) {
  .section3-p5-tabs-panel__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.section3-p5-tabs-panel__col--stream {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p5-stream-block-gap);
  padding-bottom: var(--p5-stream-block-gap);
  min-width: 0;
}

.section3-p5-tabs-panel__grid .section3-p5-tabs-panel__lead {
  margin: 0;
  max-width: none;
}

.section3-p5-tabs-panel__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  min-width: 0;
}

.section3-p5-tabs-panel__col--stream .section3-p5-tabs-panel__quote,
.section3-p5-tabs-panel__figure .section3-p5-tabs-panel__quote,
.section3-p5-doosan__quote {
  width: var(--p5-handwriting-width);
  max-width: var(--p5-handwriting-width);
}

.section3-p5-tabs-panel__figure .section3-p5-tabs-panel__quote {
  margin-top: var(--p5-photo-handwriting-gap);
}

.section3-p5-tabs-panel__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: clamp(10px, 1.2vw, 18px);
  border: none;
  outline: none;
  box-shadow: none;
  object-fit: cover;
  object-position: center;
  background: rgba(0, 30, 70, 0.25);
}

/* ----- 두산 탭: Figma pc/mo — 좌 2개 리드(데스크톱) / 모바일 세로 인터리브 ----- */
.section3-p5-doosan {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4.5vh, 4.5rem);
  min-width: 0;
}

.section3-p5-doosan__row {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  min-width: 0;
}

.section3-p5-doosan__lead {
  margin: 0;
}

.section3-p5-doosan__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--p5-photo-handwriting-gap);
  min-width: 0;
  width: 100%;
}

.section3-p5-doosan__body .section3-p5-doosan__cards--pair {
  align-self: stretch;
  width: 100%;
}

.section3-p5-doosan__cards--pair {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
  min-width: 0;
}

.section3-p5-doosan-card {
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
}

.section3-p5-doosan-card__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.section3-p5-doosan__quotes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: 100%;
}

.section3-p5-doosan__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  min-width: 0;
}

.section3-p5-doosan__figure .section3-p5-tabs-panel__photo {
  width: 100%;
  border-radius: clamp(10px, 1.2vw, 18px);
}

@media (min-width: 768px) {
  .section3-p5-doosan__row {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 0;
    align-items: start;
  }

  .section3-p5-doosan__lead {
    align-self: start;
  }

  .section3-p5-doosan__cards--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 0.75rem);
  }
}

@media (min-width: 1100px) {
  .section3-p5-doosan__row {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
  }
}

.section3-p5-tabs-panel__figure .section3-p5-tabs-panel__text {
  margin-top: var(--p5-photo-handwriting-gap);
  width: var(--p5-handwriting-width);
  max-width: var(--p5-handwriting-width);
}

@media (max-width: 767px) {
  .section3-panel5-outro__tabs-flow,
  .section3-panel5-outro__tabs-wrap,
  .section3-p5-tabs {
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
  }

  .section3-p5-tabs {
    width: 100%;
  }

  .section3-p5-tabs__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    flex-wrap: nowrap;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .section3-p5-tabs__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .section3-p5-tabs__tab {
    flex: none;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 3rem;
    padding: 0.55rem 0.12rem 0.4rem;
    gap: 0.15rem;
    font-size: clamp(0.5625rem, 2.65vw, 0.6875rem);
    line-height: 1.3;
    overflow: hidden;
  }

  .section3-p5-tabs__tab-label {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .section3-p5-tabs__tab-icon {
    width: clamp(1.125rem, 4.2vw, 1.5rem);
    height: clamp(1.125rem, 4.2vw, 1.5rem);
  }

  .section3-p5-tabs-panel {
    --p5-handwriting-size: 1rem;
    --p5-stream-block-gap: 2rem;
    padding: 2rem 1rem 2.5rem;
    padding-bottom: calc(2.5rem + 4rem);
  }

  .section3-p5-tabs-panel__footnote {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    font-size: 0.6875rem;
    text-align: center;
  }

  .section3-p5-tabs-panel__lead,
  .section3-p5-doosan__lead {
    font-size: 1.5rem;
  }

  .section3-p5-tabs-panel__lead {
    margin-bottom: 2rem;
  }

  .section3-p5-tabs-panel__grid {
    gap: 1.5rem;
  }

  .section3-p5-doosan {
    gap: 2.5rem;
  }

  .section3-p5-doosan__row {
    gap: 1.5rem;
  }

}

@media (min-width: 480px) and (max-width: 767px) {
  .section3-p5-doosan__cards--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

/* ----- 탭 아래: 초록 100vh 고정 · 5단계 + conic(12시→시계) 배경 + 흰 원 전환 (p5-green-scroll.js) ----- */
.section3-p5-green {
  --p5-green-dark: #004d3d;
  --p5-green-light: #007a5e;
  --p5-green-on-white: var(--p5-green-light);
  --p5-green-sweep: 0;
  --p5-white-iris: 0;
  /* 흰 블록 열: 최대 992px · 그 이하 뷰포트에서는 화면 가로 70% */
  --p5-green-blocks-max: 992px;
  --p5-green-cards-max: 832px;
  --p5-green-blocks-width: min(var(--p5-green-blocks-max), 70vw);
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--p5-green-dark);
}

.section3-p5-green__track {
  min-height: calc(100dvh + var(--p5-green-scroll-vh, 520) * 1vh);
}

.section3-p5-green__pin {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
  isolation: isolate;
}

.section3-p5-green__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* 기본(진한) 바닥 + 연한 레이어 위에 12시부터 시계방향으로 진한 초록이 퍼짐 */
.section3-p5-green__bg-layer--dark {
  position: absolute;
  inset: 0;
  background: var(--p5-green-light);
}

.section3-p5-green__bg-layer--sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--p5-green-dark) 0deg,
    var(--p5-green-dark) calc(var(--p5-green-sweep, 0) * 360deg),
    transparent calc(var(--p5-green-sweep, 0) * 360deg),
    transparent 360deg
  );
}

.section3-p5-green__iris {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: calc(var(--p5-white-iris, 0) * 280vmax);
  height: calc(var(--p5-white-iris, 0) * 280vmax);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  opacity: clamp(0, calc((var(--p5-white-iris, 0) - 0.03) * 40), 1);
  pointer-events: none;
  will-change: width, height, opacity;
}

.section3-p5-green__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  padding: clamp(1.5rem, 5vw, 3rem);
  box-sizing: border-box;
}

.section3-p5-green__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
  margin: 0;
  padding: clamp(1.5rem, 5vw, 3rem);
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: none;
}

.section3-p5-green__step.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.section3-p5-green__title {
  margin: 0;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.25;
  color: #fff;
}

.section3-p5-green__dummy {
  margin: 0;
  max-width: min(36rem, 92vw);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* 스텝 활성 시: 아이콘 → 타이틀 → 블록 순, 아래에서 위로 페이드인 */
@keyframes section3-p5-green-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.section3-p5-green__step--youth:not(.is-active) .section3-p5-green-employee__icon,
.section3-p5-green__step--youth:not(.is-active) .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--youth:not(.is-active) .section3-p5-green-employee-card,
.section3-p5-green__step--school:not(.is-active) .section3-p5-green-employee__icon,
.section3-p5-green__step--school:not(.is-active) .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--school:not(.is-active) .section3-p5-green-employee-card,
.section3-p5-green__step--teacher:not(.is-active) .section3-p5-green-employee__icon,
.section3-p5-green__step--teacher:not(.is-active) .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--teacher:not(.is-active) .section3-p5-green-employee-card,
.section3-p5-green__step--employee:not(.is-active) .section3-p5-green-employee__icon,
.section3-p5-green__step--employee:not(.is-active) .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--employee:not(.is-active) .section3-p5-green-employee-card,
.section3-p5-green__step--center:not(.is-active) .section3-p5-green-center__lead,
.section3-p5-green__step--center:not(.is-active) .section3-p5-green-center__metric {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  animation: none;
}

.section3-p5-green__step--youth.is-active .section3-p5-green-employee__icon,
.section3-p5-green__step--youth.is-active .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--youth.is-active .section3-p5-green-employee-card,
.section3-p5-green__step--school.is-active .section3-p5-green-employee__icon,
.section3-p5-green__step--school.is-active .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--school.is-active .section3-p5-green-employee-card,
.section3-p5-green__step--teacher.is-active .section3-p5-green-employee__icon,
.section3-p5-green__step--teacher.is-active .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--teacher.is-active .section3-p5-green-employee-card,
.section3-p5-green__step--employee.is-active .section3-p5-green-employee__icon,
.section3-p5-green__step--employee.is-active .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--employee.is-active .section3-p5-green-employee-card,
.section3-p5-green__step--center.is-active .section3-p5-green-center__lead,
.section3-p5-green__step--center.is-active .section3-p5-green-center__metric {
  animation: section3-p5-green-rise-in 0.55s var(--ease-smooth-in-out, ease) both;
}

.section3-p5-green__step--youth.is-active .section3-p5-green-employee__icon,
.section3-p5-green__step--school.is-active .section3-p5-green-employee__icon,
.section3-p5-green__step--teacher.is-active .section3-p5-green-employee__icon,
.section3-p5-green__step--employee.is-active .section3-p5-green-employee__icon {
  animation-delay: 0.05s;
}

.section3-p5-green__step--youth.is-active .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--school.is-active .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--teacher.is-active .section3-p5-green-employee__hero-copy,
.section3-p5-green__step--employee.is-active .section3-p5-green-employee__hero-copy {
  animation-delay: 0.22s;
}

.section3-p5-green__step--youth.is-active .section3-p5-green-employee-card:nth-child(1),
.section3-p5-green__step--school.is-active .section3-p5-green-employee-card:nth-child(1),
.section3-p5-green__step--teacher.is-active .section3-p5-green-employee-card:nth-child(1),
.section3-p5-green__step--employee.is-active .section3-p5-green-employee-card:nth-child(1) {
  animation-delay: 0.39s;
}

.section3-p5-green__step--youth.is-active .section3-p5-green-employee-card:nth-child(2),
.section3-p5-green__step--school.is-active .section3-p5-green-employee-card:nth-child(2),
.section3-p5-green__step--teacher.is-active .section3-p5-green-employee-card:nth-child(2),
.section3-p5-green__step--employee.is-active .section3-p5-green-employee-card:nth-child(2) {
  animation-delay: 0.56s;
}

.section3-p5-green__step--youth.is-active .section3-p5-green-employee-card:nth-child(3) {
  animation-delay: 0.73s;
}

.section3-p5-green__step--youth.is-active .section3-p5-green-employee-card:nth-child(4) {
  animation-delay: 0.9s;
}

.section3-p5-green__step--center.is-active .section3-p5-green-center__lead {
  animation-delay: 0.05s;
}

.section3-p5-green__step--center.is-active .section3-p5-green-center__metric {
  animation-delay: 0.35s;
}

/* 패널 스텝 공통 — Figma 청소년/교육기관/담당교사/임직원 */
.section3-p5-green__step--youth,
.section3-p5-green__step--school,
.section3-p5-green__step--teacher,
.section3-p5-green__step--employee {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  text-align: left;
}

/* 중앙 텍스트 — Figma 741:4500 */
.section3-p5-green__step--center {
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

.section3-p5-green-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  max-width: min(92vw, 72rem);
  margin: 0 auto;
}

.section3-p5-green-center__lead {
  margin: 0;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.3;
  color: #fff;
  word-break: keep-all;
  text-align: center;
}

.section3-p5-green-center__metric {
  margin: 0;
  width: 100%;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}

.section3-p5-green-center__br-desktop {
  display: none;
}

.section3-p5-green-employee {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 32px 16px;
  gap: 32px;
}

.section3-p5-green-employee__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.section3-p5-green-employee__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section3-p5-green-employee__icon {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Figma icon 170×137.62 — 담당교사·전문강사 */
.section3-p5-green-employee__icon--instructor {
  width: auto;
  max-width: 79px;
  height: 64px;
}

.section3-p5-green-employee__heading,
.section3-p5-green-employee__amount {
  margin: 0;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.3;
  color: #fff;
  word-break: keep-all;
}

.section3-p5-green-employee__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.section3-p5-green-employee__cards--grid {
  display: grid;
  grid-template-columns: 1fr;
}

.section3-p5-green-employee-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border-radius: 6px;
  padding: 14px 16px 8px;
  box-sizing: border-box;
  color: var(--p5-green-on-white);
}

.section3-p5-green-employee-card__title {
  margin: 0;
  font-family: "Paperlogy Octin", var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.3;
  color: inherit;
  word-break: keep-all;
}

.section3-p5-green-employee-card__value {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: -0.0455em;
  color: inherit;
}

/* 흰 블록 공통: 이후 스텝 카드에도 동일 초록 텍스트 */
.section3-p5-green [class*="-card"][class*="p5-green"] {
  color: var(--p5-green-on-white);
}

.section3-p5-green-employee-card__br-desktop {
  display: none;
}

@media (min-width: 768px) {
  .section3-p5-green__step--youth,
  .section3-p5-green__step--school,
  .section3-p5-green__step--teacher,
  .section3-p5-green__step--employee {
    align-items: flex-start;
    justify-content: stretch;
  }

  .section3-p5-green-center__lead {
    font-size: clamp(44px, 3.85vw, 90px);
  }

  .section3-p5-green-center__metric {
    font-size: 32px;
  }

  .section3-p5-green-center__br-desktop {
    display: block;
  }

  .section3-p5-green-employee {
    width: var(--p5-green-blocks-width);
    max-width: var(--p5-green-blocks-max);
    height: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: clamp(40px, 4.1667vw, 80px);
    gap: 0;
    justify-content: space-between;
  }

  .section3-p5-green-employee__hero {
    gap: 32px;
  }

  .section3-p5-green-employee__icon {
    width: 140px;
    height: 140px;
  }

  .section3-p5-green-employee__icon--instructor {
    width: auto;
    max-width: 173px;
    height: 140px;
  }

  .section3-p5-green-employee__heading,
  .section3-p5-green-employee__amount {
    font-size: clamp(44px, 3.85vw, 72px);
  }

  .section3-p5-green-employee__cards {
    gap: 6px;
    width: 100%;
    max-width: min(var(--p5-green-cards-max), 100%);
  }

  .section3-p5-green-employee__cards--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .section3-p5-green-employee-card {
    gap: 16px;
    border-radius: 12px;
    padding: 28px 32px 24px;
  }

  .section3-p5-green__step--youth .section3-p5-green-employee-card__title {
    font-size: 26px;
  }

  .section3-p5-green__step--youth .section3-p5-green-employee-card--lg-title .section3-p5-green-employee-card__title {
    font-size: 28px;
  }

  .section3-p5-green__step--school .section3-p5-green-employee-card__title,
  .section3-p5-green__step--teacher .section3-p5-green-employee-card__title,
  .section3-p5-green__step--employee .section3-p5-green-employee-card__title {
    font-size: clamp(24px, 1.875vw, 36px);
  }

  .section3-p5-green-employee-card__value {
    font-size: 14px;
    letter-spacing: -0.0357em;
  }

  .section3-p5-green-employee-card__br-desktop {
    display: block;
  }
}

@media (max-width: 767px) {
  .section3-section--time {
    --p5-green-scroll-vh: 550;
  }

  /* 고정 헤더 아래 아이콘이 가리지 않도록 상단 여백 */
  .section3-p5-green {
    --p5-green-mobile-top: calc(
      env(safe-area-inset-top, 0px) + var(--process-header-height, var(--header-height, 3.5rem)) + 0.75rem
    );
  }

  .section3-p5-green__title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .section3-p5-green__dummy {
    font-size: 1rem;
  }

  .section3-p5-green-employee {
    max-width: none;
    width: 100%;
    padding-top: var(--p5-green-mobile-top);
  }

  /* 흰 카드: 텍스트 우측 ~30% 여백(줄바꿈·가독) */
  .section3-p5-green-employee-card {
    padding: 14px 30% 8px 16px;
  }

  /* 흰 카드: 모바일에서는 줄바꿈(br) 비표시 → 한 줄 흐름 */
  .section3-p5-green-employee-card br,
  .section3-p5-green-employee-card__br-desktop {
    display: none;
  }

  .section3-p5-green__step--center {
    padding-top: var(--p5-green-mobile-top);
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section3-p5-green__track {
    min-height: auto;
  }

  .section3-p5-green__pin {
    position: relative;
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .section3-p5-green__content {
    min-height: 0;
    padding: 2rem 1rem;
  }

  .section3-p5-green__step {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 2rem 1rem;
  }

  .section3-p5-green__step:not(.is-active) {
    display: none;
  }

  .section3-p5-green__iris {
    display: none;
  }

  .section3-p5-green__step .section3-p5-green__title,
  .section3-p5-green__step .section3-p5-green__dummy,
  .section3-p5-green-employee__icon,
  .section3-p5-green-employee__hero-copy,
  .section3-p5-green-employee-card,
  .section3-p5-green-center__lead,
  .section3-p5-green-center__metric {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .section3-p5-lead__line {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}