/* ==========================================================================
   About > CEO 인사말 (Figma 1:4877) — page body only
   Hero/stage come from sub-common.css + sub-hero.js; this file: message / philosophy
   ========================================================================== */
.ceo-page {
  --ceo-navy: #002165;
  --ceo-gutter: clamp(16px, 9.557vw, 184px);
  --ceo-box-w: min(1553px, 100vw - 2 * var(--ceo-gutter));
  --ceo-font: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ceo-font-en: 'Montserrat', 'Pretendard', sans-serif;
  display: block;
  font-family: var(--ceo-font);
  color: #111;
  background: #fff;
  overflow-x: clip;
}
/* ---------- 3) Message (1:4942) ---------- */
.ceo-message {
  position: relative;
  padding: clamp(64px, 6.354vw, 122px) var(--ceo-gutter);
  overflow: hidden;
}
.ceo-message-inner {
  width: min(1221px, 100%);
  margin-inline: auto;
}
.ceo-message-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 2.031vw, 39px);
  padding-left: 32.76%;
}
.ceo-bg-type {
  position: absolute;
  left: 50%;
  bottom: 21px;
  z-index: 0;
  width: 100vw;
  transform: translate(-50%, 50%);
  overflow: hidden;
  pointer-events: none;
}
.ceo-bg-type-track {
  display: flex;
  width: max-content;
  animation: ceo-marquee 60s linear infinite;
}
.ceo-bg-type-track span {
  padding-right: 0.3em;
  font-family: var(--ceo-font-en);
  font-weight: 600;
  font-size: clamp(64px, 8.333vw, 160px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.02);
  white-space: nowrap;
}
@keyframes ceo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ceo-portrait {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: clamp(220px, 17.604vw, 338px);
  aspect-ratio: 338 / 451.328;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f7;
}
.ceo-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ceo-name {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #333;
}
.ceo-name-role {
  font-size: clamp(15px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
}
.ceo-name-person {
  font-size: clamp(26px, 1.875vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.ceo-message-cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 415fr 726fr;
  gap: clamp(40px, 4.167vw, 80px);
  margin-top: clamp(48px, 4.792vw, 92px);
}
.ceo-lead {
  font-size: clamp(22px, 1.5625vw, 30px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #111;
  word-break: keep-all;
}
.ceo-body {
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #333;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ceo-body p { margin: 0 0 20px; }
.ceo-body .ceo-signoff { margin: 0; font-weight: 600; }

/* ---------- 4) Management Philosophy (1:4957) ---------- */
.ceo-philosophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 3.125vw, 60px);
  padding: clamp(72px, 6.25vw, 120px) var(--ceo-gutter);
  background: rgba(0, 33, 101, 0.04);
}
.ceo-philosophy-title {
  font-family: var(--ceo-font-en) !important;
  font-weight: 600;
  font-size: clamp(30px, 2.5vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #111;
  text-align: center;
}
.ceo-philosophy-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 4.167vw, 80px);
  width: min(1360px, 100%);
  list-style: none;
}
.ceo-philosophy-card {
  flex: 0 1 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  min-height: clamp(400px, 26.042vw, 500px);
  padding: clamp(48px, 3.646vw, 70px) clamp(20px, 2.083vw, 40px);
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.ceo-philosophy-card:nth-child(2) { margin-top: 50px; }
.ceo-philosophy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: rgba(43, 179, 75, 0.04);
}
.ceo-philosophy-icon img { width: auto; height: auto; }
.ceo-philosophy-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ceo-philosophy-card h3 {
  font-size: clamp(24px, 1.667vw, 32px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #111;
}
.ceo-philosophy-card p {
  font-size: clamp(17px, 1.146vw, 22px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #666;
  word-break: keep-all;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .ceo-message-top { padding-left: 24%; }
}
@media (max-width: 1024px) {
  .ceo-message-cols { grid-template-columns: 1fr; }
  .ceo-message-top { padding-left: 0; justify-content: center; }
  .ceo-philosophy-grid { flex-direction: column; align-items: center; }
  .ceo-philosophy-card { flex-basis: auto; width: min(400px, 100%); min-height: 0; }
  .ceo-philosophy-card:nth-child(2) { margin-top: 0; }
}
@media (max-width: 768px) {
  .ceo-message-top { flex-direction: column; align-items: center; text-align: center; }
  .ceo-name { align-items: center; }
  .ceo-bg-type { bottom: auto; top: 30%; }
}
@media (max-width: 600px) {
  .ceo-philosophy-icon { width: 112px; height: 112px; }
  .ceo-philosophy-icon img { transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .ceo-bg-type-track { animation: none; }
}