@charset "utf-8";
/* 발전지원재단 > 인사말 */

.greeting{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start;
}

.greeting__portrait{position:sticky;top:calc(var(--header-h) + 28px)}
.greeting__portrait figure{
  overflow:hidden;border-radius:var(--radius-l);box-shadow:var(--shadow-m);
  background:var(--bg-alt);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.greeting__portrait img{width:100%;height:auto;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);}

/* ── 사진에 마우스를 올렸을 때 ──────────────────────────────────────
   사진틀이 살짝 떠오르고, 그 안에서 사진이 아주 조금 다가옵니다.
   틀에 overflow:hidden 이 걸려 있어 커진 사진은 틀 밖으로 나오지 않습니다.
   둘레에는 홈페이지 파랑으로 옅은 테를 한 겹 둘러 '지금 보고 있는 곳'
   임을 알립니다.

   이사장님 사진이라 빛이 훑고 지나가는 식의 효과는 넣지 않았습니다.
   조용히 다가오는 정도로만 두었습니다.                                */
.greeting__portrait figure:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(15,45,80,.26),
             0 0 0 3px rgba(0,116,176,.2);
}
.greeting__portrait figure:hover img{transform:scale(1.045)}
.greeting__portrait figure:hover figcaption{color:var(--brand-strong)}
.greeting__portrait figcaption{transition:color .3s}

/* 화면이 움직이면 어지러우신 분들께는 사진을 움직이지 않고
   테두리만 둘러 알려 드립니다. */
@media (prefers-reduced-motion:reduce){
  .greeting__portrait figure:hover{transform:none}
  .greeting__portrait figure:hover img{transform:none}
}
/* 이름표 — 예전에는 사진 파일 안에 글자가 박혀 있어 아래가 잘리고
   좌우도 어긋났습니다. 이제 글자로 넣어 가운데에 맞춥니다. */
.greeting__portrait figcaption{
  padding:14px 12px 16px;
  background:var(--surface);
  text-align:center;
  font-size:14px;font-weight:700;letter-spacing:-.02em;
  color:var(--text);word-break:keep-all;
}

.greeting__letter{min-width:0}
.greeting__quote{
  font-size:clamp(20px,2.6vw,26px);font-weight:900;letter-spacing:-.03em;line-height:1.5;
  color:var(--navy);word-break:keep-all;
}
.greeting__body{margin-top:30px;display:flex;flex-direction:column;gap:22px}
.greeting__body p{font-size:16px;line-height:1.9;color:var(--text-mid);word-break:keep-all}

.greeting__sign{
  margin-top:40px;padding-top:28px;border-top:1px solid var(--line);
  text-align:right;
}
.greeting__sign b{
  display:block;font-size:13.5px;font-weight:600;color:var(--text-dim);
}
.greeting__sign span{
  display:block;margin-top:6px;font-size:19px;font-weight:900;letter-spacing:.06em;color:var(--navy);
}

@media (max-width:820px){
  .greeting{grid-template-columns:1fr;gap:32px}
  .greeting__portrait{position:static;max-width:220px;margin-inline:auto}
}