/* ==========================================================================
   About > 비전 (Figma 1:5269) — page body only
   Hero/stage (1:5310 -> Mission 1:5330) come from sp-common.css + sp-hero.js.
   This file: Mission label in the stage, Vision scene (1:5334), Core Competency (1:5340)
   ========================================================================== */

/* ---------- Stage (scene B = Mission 1:5330) ---------- */
.visi-scene-label {
  display: block;
  margin-bottom: clamp(16px, 1.5625vw, 30px);
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(18px, 1.458vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* ---------- Vision (1:5334) ---------- */
/* style.css caps direct section children at 1440px/width:100%
   (section:not(.hero)… > *, specificity 0,3,1) and pads them 0 40px. Undo it for this page's sections. */
.sp-page.vision-page section.visi-vision > .visi-vision-bg { width: auto; max-width: none; padding: 0; }
.sp-page.vision-page section.visi-vision > .visi-vision-inner { width: min(910px, 100%); max-width: none; padding: 0; }
.sp-page.vision-page section.visi-values > .visi-values-head { width: auto; max-width: none; padding: 0; }
.sp-page.vision-page section.visi-values > .visi-values-grid { width: min(1400px, 100%); max-width: none; padding: 0; }
.visi-vision {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(480px, 48.958vw, 940px);
  padding: clamp(64px, 6.25vw, 120px) 16px;
  overflow: hidden;
  background: #03091a;
  color: #fff;
  text-align: center;
}
.visi-vision-bg {
  position: absolute;
  inset: 0;
}
.visi-vision-bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.visi-vision-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.visi-vision-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.5625vw, 30px);
  width: min(910px, 100%);
}
.visi-vision-title {
  font-weight: 700;
  font-size: clamp(26px, 3.333vw, 64px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  word-break: keep-all;
}
.visi-vision-title .visi-scene-label { margin-bottom: clamp(16px, 1.5625vw, 30px); }
.visi-vision-desc {
  font-weight: 500;
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: keep-all;
}

/* ---------- Core Competency (1:5340) ---------- */
.visi-values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 3.125vw, 60px);
  padding: clamp(72px, 6.25vw, 120px) clamp(16px, 13.542vw, 260px);
  background: #f8f8f8;
}
.visi-values-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.visi-values-head-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.visi-values-title {
  font-weight: 600;
  font-size: clamp(34px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #111;
}
.visi-values-desc {
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #333;
  word-break: keep-all;
}
/* Card grid: .tale-values-grid / .tale-card come from career-talent.css (shared with talent.html) */

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .visi-values { padding-inline: clamp(16px, 6vw, 80px); }
}
@media (max-width: 768px) {
  .visi-vision-title { text-wrap: balance; }
  .visi-vision-desc br { display: none; }
}