/* ===================================================================
   대한에이즈예방협회 (KAAP) — about.css
   인사말 페이지(content.php?co_id=abt_grt) 콘텐츠 전용 스타일.
   공통 토큰/레이아웃은 common.css · layout.css 선행 로드.
   =================================================================== */

/* 인사말 본문 */
.greeting { display:flex; gap:40px; margin-top:8px; align-items:flex-start; animation:kaapFadeUp 0.6s var(--ease-out) 0.15s both; }
.president { position:relative; width:250px; flex-shrink:0; }
.president__deco-a { position:absolute; left:-12px; top:-12px; width:84px; height:84px; border-radius:20px; background:var(--blue-50); z-index:0; }
.president__deco-b { position:absolute; right:-10px; bottom:-10px; width:56px; height:56px; border-radius:50%; background:var(--red-50); z-index:0; }
.president__frame { position:relative; z-index:1; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-subtle); box-shadow:var(--shadow-md); background:linear-gradient(180deg, #F4F8FC 0%, #fff 100%); min-height:300px; }
.president__frame img { display:block; width:100%; height:auto; }

.greeting__body { flex:1; min-width:0; }
.greeting__headline { margin:0 0 24px; font-size:39px; font-weight:800; line-height:1.35; letter-spacing:-0.025em; color:var(--text-strong); word-break:keep-all; }
.greeting__headline .ribbon { color:var(--red-500); }
.greeting__headline .lead { color:var(--sc-solid); }
.greeting__text { font-size:19px; line-height:1.85; color:var(--text-body); }
.greeting__text p { margin:0; }
.greeting__text p + p { margin-top:18px; }
.greeting__text .em-red { color:var(--red-500); font-weight:700; }
.greeting__text .em-green { color:var(--green-500); font-weight:700; }
.sign { margin-top:40px; display:flex; align-items:baseline; gap:14px; justify-content:flex-end; }
.sign__role { font-size:16.5px; color:var(--text-muted); }
.sign__name { font-size:29px; font-weight:800; letter-spacing:0.06em; color:var(--text-strong); }

.divider { height:1px; background:var(--border-subtle); margin:48px 0 28px; }

/* 하단 가치 카드 3열 */
.value-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.value-card { background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-xs); }
.value-card__head { display:flex; align-items:center; gap:12px; }
.value-card__icon { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.value-card__title { font-size:19px; font-weight:800; letter-spacing:-0.01em; color:var(--text-strong); }
.value-card__desc { margin:12px 0 0; font-size:16.5px; line-height:1.7; color:var(--text-muted); }
.tint-green { background:var(--green-50); color:var(--green-500); }
.tint-red   { background:var(--red-50);   color:var(--red-500); }
.tint-amber { background:var(--amber-50); color:var(--amber-500); }

/* ── 반응형 (인사말 콘텐츠) ── */
@media (max-width: 960px) {
  .greeting { flex-direction:column; align-items:stretch; }
  .greeting__body { order:1; }          /* 텍스트 먼저 */
  .president { order:2; width:100%; max-width:260px; align-self:center; }  /* 이미지 아래로 · 가운데 */
  .value-cards { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .greeting { gap:28px; }
  .greeting__headline { font-size:32.5px; }
}