/* site/pages/about.css — 교육원 소개 전용
   공통 골격(섹션·표·목록)은 static-page.css가 갖고, 여기에는 이 대분류에만 쓰이는 것을 둔다.
   색·간격·글자 크기는 토큰만 쓴다 — 컨벤션 23. */

/* ── 인사말 ─────────────────────────────────── */
.intro-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.intro-quote {
  border-left: 4px solid var(--c-accent);
  background: var(--c-surface-tint);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: var(--sp-6) var(--sp-8);
  font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--c-primary);
  line-height: var(--lh-snug); word-break: keep-all;
  margin: 0 0 var(--sp-10);
}
.intro-body p { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--c-text); margin: 0 0 var(--sp-6); word-break: keep-all; }
.intro-sign { margin-top: var(--sp-12); text-align: right; }
.intro-sign .s-role { font-size: var(--fs-15); color: var(--c-text-mute); margin-bottom: var(--sp-2); }
.intro-sign .s-name { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--c-text); }

/* ── 연혁 타임라인 ──────────────────────────── */
.timeline {
  max-width: var(--container-narrow); margin: 0 auto; padding: 0 0 0 var(--sp-8);
  list-style: none; position: relative;
}
.timeline::before {
  content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2);
  width: 2px; background: var(--c-navy-100);
}
.timeline__item { position: relative; padding: 0 0 var(--sp-8) var(--sp-6); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-8) - 5px); top: 0.35em;
  width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--c-white); border: 3px solid var(--c-accent);
}
.timeline__year {
  display: block; font-family: var(--font-num);
  font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-primary);
  letter-spacing: var(--ls-snug); margin-bottom: var(--sp-1);
}
.timeline__text {
  margin: 0; font-size: var(--fs-16); line-height: var(--lh-loose);
  color: var(--c-text); word-break: keep-all;
}

@media (max-width: 767px) {
  .timeline { padding-left: var(--sp-5); }
  .timeline__item { padding-left: var(--sp-4); }
  .timeline__item::before { left: calc(-1 * var(--sp-5) - 5px); }
}

/* ── 주요업무 ───────────────────────────────── */
.legal-basis {
  padding: var(--sp-6) var(--sp-8);
  background: var(--c-surface-tint); border-radius: var(--r-lg);
}
.legal-basis p {
  margin: 0; font-size: var(--fs-16); line-height: var(--lh-loose);
  color: var(--c-text); word-break: keep-all;
}
.legal-basis__list {
  margin-top: var(--sp-4) !important;
  padding-top: var(--sp-4); border-top: 1px dashed var(--c-line-strong);
  color: var(--c-text-mute) !important;
}

.duty-grid {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-grid-gap);
}
.duty-card {
  padding: var(--sp-6);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-white);
}
/* 번호 원과 제목을 한 줄에 두고, 제목이 두 줄로 꺾여도 원은 첫 줄 가운데에 맞춘다 */
.duty-card__head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.duty-card__no {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-full);
  background: var(--c-primary); color: var(--c-on-primary);
  font-family: var(--font-num); font-size: var(--fs-13); font-weight: var(--fw-bold);
}
.duty-card__h {
  margin: calc((1.75rem - 1em * var(--lh-snug)) / 2) 0 0;
  font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--c-primary);
  line-height: var(--lh-snug); word-break: keep-all;
}
.duty-card__p {
  margin: 0; font-size: var(--fs-15); line-height: var(--lh-loose);
  color: var(--c-text-mute); word-break: keep-all;
}

@media (max-width: 1023px) {
  .duty-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .duty-grid { grid-template-columns: 1fr; }
}

/* ── 연락처·위치 상단 두 열 ────────────────────── */
/* 왼쪽 연락처·근무시간, 오른쪽 지도. 두 열 그리드는 메인의 위젯 2열(main.css .home-widgets)과 같은 조합이다.
   지도는 열 폭에 맞춰 4:3이고(전폭 지도의 5:2는 map.css), 좁은 폭에서는 세로로 쌓여 지도가 전폭이 된다. */
.contact-top {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-grid-gap);
  align-items: start; margin: 0 0 var(--sp-14);
}
.contact-top:last-child { margin-bottom: 0; }
.contact-top .static-sec { margin: 0; }
.contact-top .map { aspect-ratio: 4 / 3; }

@media (max-width: 767px) {
  .contact-top { grid-template-columns: 1fr; row-gap: var(--sp-14); }
}