/* =============================================================================
   about.css — 협회소개 페이지 전용 (인사말 · 타임라인 · 조직)
   역할: about/index.html 레이아웃.
   의존: tokens/base/components 이후 로드.
   주의: 타임라인 스타일은 이 페이지 전용 — 다른 곳에 쓰게 되면 승격 검토.
   ========================================================================== */

/* ===== 인사말 ===== */
.greeting-grid {
  display: grid;
  grid-template-columns: 4fr 7fr; /* 사진은 좁고 세로로 길게 — 초상 사진 비율 */
  gap: var(--sp-8);
  align-items: start;
}
.greeting-photo { aspect-ratio: 4 / 5; position: relative; }
.greeting-photo::after { content: ''; position: absolute; inset: 0; background: var(--duotone); opacity: 0.4; }
.greeting-text h2 { font-size: var(--fs-5); }
.greeting-text .hairline { margin-inline: 0; max-width: 200px; }
.greeting-text p { color: var(--ink-soft); margin-bottom: var(--sp-3); max-width: 38em; }
.greeting-text .signature { color: var(--ink); margin-top: var(--sp-5); }
.greeting-text .signature strong { font-family: var(--font-serif); font-size: var(--fs-3); margin-left: var(--sp-1); }

/* ===== 연혁 타임라인 — 골드 세로선 + 와인 점 ===== */
.timeline {
  position: relative;
  max-width: 640px;
  padding-left: var(--sp-4);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 4px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--gold);
}
.timeline li { position: relative; padding-bottom: var(--sp-5); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-4) - 4px); /* 세로선 위 정중앙 */
  top: 10px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--wine);
  border: 2px solid var(--paper-warm); /* 배경색 테두리로 선과 분리 */
}
.timeline strong {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--fs-4);
  color: var(--wine);
  display: block;
}
.timeline p { color: var(--ink-soft); margin-top: 4px; }

/* ===== 조직 카드 ===== */
.org-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.org-card {
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold); /* 상단 골드 라인 — 훈장적 디테일 */
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3);
  background: var(--paper);
}
.org-card--wide { grid-column: 1 / -1; }
.org-card h3 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-3); margin-bottom: var(--sp-1); }
.org-card p { color: var(--ink-soft); font-size: var(--fs-2); }

/* ===== 반응형 ===== */
@media (max-width: 1024px) {
  .org-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .greeting-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .greeting-photo { max-width: 360px; }
  .org-grid { grid-template-columns: 1fr; }
}