/**
 * About 페이지 공통 스타일 (인재상, 복지, 교육제도)
 * - Top Section: 깔끔한 타이포그래피, 일러스트레이션 영역 없음
 */

/* ========== 공통: About 페이지 ========== */
/* Top Section: 깔끔한 2단 레이아웃 (좌: 대제목, 우: 설명) */
.about-top-section {
  background: #ffffff;
  padding: 3rem 1.5rem 4rem;
}
@media (min-width: 1024px) {
  .about-top-section {
    padding: 5rem 3rem 6rem;
  }
}

.about-top-section .about-heading {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0;
  line-height: 1.15;
}
@media (min-width: 1024px) {
  .about-top-section .about-heading {
    font-size: 3rem;
  }
}

.about-top-section .about-desc-wrap {
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .about-top-section .about-desc-wrap {
    margin-top: 0;
    padding-left: 2rem;
    border-left: 2px solid #e2e8f0;
  }
}

.about-top-section .about-desc-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.75rem;
}

.about-top-section .about-desc-body {
  font-size: 1rem;
  line-height: 1.75;
  color: #475569;
}

/* ========== benefits.html 전용 ========== */
/* 스크롤 리빌: 섹션 제목·설명·카드 진입 애니메이션 */
.scroll-reveal-section .scroll-reveal-item {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.scroll-reveal-section.is-inview .scroll-reveal-item {
  opacity: 1;
  transform: translateY(0);
}
.scroll-reveal-section .scroll-reveal-item.reveal-delay-1 { transition-delay: 0.05s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-2 { transition-delay: 0.1s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-3 { transition-delay: 0.15s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-4 { transition-delay: 0.2s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-5 { transition-delay: 0.25s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-6 { transition-delay: 0.3s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-7 { transition-delay: 0.35s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-8 { transition-delay: 0.4s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-9 { transition-delay: 0.45s; }
.scroll-reveal-section .scroll-reveal-item.reveal-delay-10 { transition-delay: 0.5s; }

.benefit-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

.img-placeholder {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}

.photo-placeholder {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.benefits-gradient-bg {
  background: linear-gradient(
    120deg,
    #e0f2fe 0%,
    #ccfbf1 22%,
    #fef9c3 44%,
    #fce7f3 66%,
    #e0e7ff 88%,
    #e0f2fe 100%
  );
  background-size: 400% 400%;
  animation: benefits-gradient-shift 18s ease infinite;
}

@keyframes benefits-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========== careers.html 전용 ========== */
.value-section .value-label,
.value-section .value-heading,
.value-section .value-body {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.value-section.in-view .value-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.value-section.in-view .value-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

.value-section.in-view .value-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

.orbit-1 { animation: orbit-rotate 22s linear infinite; }
.orbit-2 { animation: orbit-rotate 28s linear infinite reverse; }
.orbit-3 { animation: orbit-rotate 18s linear infinite; }
.orbit-4 { animation: orbit-rotate 25s linear infinite reverse; }
.orbit-5 { animation: orbit-rotate 30s linear infinite; }

@keyframes orbit-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========== training.html 전용 ========== */
.header-bg {
  background: #f1f5f9;
  min-height: 14rem;
}

.header-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  opacity: 0.75;
}

.header-orb--1 {
  width: 300px;
  height: 300px;
  left: 0%;
  top: 5%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(147, 197, 253, 0.85) 0%,
    rgba(59, 130, 246, 0.45) 45%,
    transparent 70%
  );
  animation: training-orb-1 24s ease-in-out infinite,
    training-orb-glow 14s ease-in-out infinite;
}

.header-orb--2 {
  width: 280px;
  height: 280px;
  right: 0%;
  top: 20%;
  background: radial-gradient(
    circle at 70% 30%,
    rgba(196, 181, 253, 0.8) 0%,
    rgba(139, 92, 246, 0.4) 45%,
    transparent 70%
  );
  animation: training-orb-2 28s ease-in-out infinite 2s,
    training-orb-glow 16s ease-in-out infinite 2s;
}

.header-orb--3 {
  width: 260px;
  height: 260px;
  left: 35%;
  bottom: 0%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(56, 189, 248, 0.75) 0%,
    rgba(14, 165, 233, 0.4) 45%,
    transparent 70%
  );
  animation: training-orb-3 26s ease-in-out infinite 4s,
    training-orb-glow 12s ease-in-out infinite 1s;
}

.header-orb--4 {
  width: 220px;
  height: 220px;
  right: 20%;
  bottom: 10%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(253, 224, 71, 0.7) 0%,
    rgba(250, 204, 21, 0.35) 45%,
    transparent 70%
  );
  animation: training-orb-4 22s ease-in-out infinite 1s,
    training-orb-glow 15s ease-in-out infinite 0.5s;
}

.header-orb--5 {
  width: 240px;
  height: 240px;
  left: 50%;
  top: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(165, 243, 252, 0.8) 0%,
    rgba(34, 211, 238, 0.4) 45%,
    transparent 70%
  );
  animation: training-orb-5 30s ease-in-out infinite 3s,
    training-orb-glow 13s ease-in-out infinite 2.5s;
}

@keyframes training-orb-1 {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(18px, -12px); }
  40% { transform: translate(8px, 16px); }
  60% { transform: translate(-14px, 10px); }
  80% { transform: translate(-6px, -8px); }
}

@keyframes training-orb-2 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-20px, 8px); }
  50% { transform: translate(-10px, -18px); }
  75% { transform: translate(14px, -6px); }
}

@keyframes training-orb-3 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(12px, 20px); }
  66% { transform: translate(-16px, -10px); }
}

@keyframes training-orb-4 {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-12px, -14px); }
  60% { transform: translate(16px, 6px); }
}

@keyframes training-orb-5 {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  25% { transform: translate(-50%, -50%) translate(12px, -14px); }
  50% { transform: translate(-50%, -50%) translate(-8px, 12px); }
  75% { transform: translate(-50%, -50%) translate(-10px, -8px); }
}

@keyframes training-orb-glow {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 0.95; }
}

/* training.html value-section: .value-section 공통 규칙 사용 (careers와 동일) */