/* 학교 소개 — the argument, told in numbered steps. */

.about__question { font-size: var(--step-5); }

/* --- intro video placeholder (frame 31:307) -------------------------------
   Shown only when no real intro video is set — a static reproduction of
   Figma's own mockup, not a functional player. Nothing here is clickable. */
.video-placeholder {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark);
  margin-block: var(--space-6);
}
.video-placeholder__stage {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.video-placeholder__play {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--surface);
  position: relative;
}
.video-placeholder__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent var(--accent);
}
.video-placeholder__caption { color: var(--dark-ink); margin: 0; }

.video-placeholder__bar { padding: var(--space-3) var(--space-4); }
.video-placeholder__track {
  height: 4px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: var(--space-3);
}
.video-placeholder__fill {
  width: 42%;
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--dark-muted);
}
.video-placeholder__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--dark-muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.video-placeholder__transport { letter-spacing: var(--space-1); }
.video-placeholder__spacer { flex: 1; }

.school-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  counter-reset: none;
}

.school-section { display: flex; flex-direction: column; gap: var(--space-3); }

.school-section__label {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--muted);
  letter-spacing: .04em;
}

.school-section__title { font-size: var(--step-5); line-height: var(--font-h1-leading); }

.school-section__lead { font-size: var(--step-2); color: var(--ink); }

.school-section__body { color: var(--ink-2); }

.school-section__callout {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--ink);
}
.school-section__callout p { margin: 0; }

@media (max-width: 860px) {
  .about__question { font-size: var(--step-4); }
  .school-sections { gap: var(--space-7); }
  .school-section__title { font-size: var(--step-4); }
  .school-section__callout { padding: var(--space-5); }
}