/* ============================================================
   회사소개 › 인사말
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI
         2048:903 (시작)  ·  2048:848 (조금 내렸을 때)

   모든 치수는 calc(N * var(--u)). N 은 시안(1920) 원값 그대로다.
   --u 는 /gnb/gnb.css 가 정의한다.
   ============================================================ */

/* 이 페이지는 한 화면씩 끊는 문서가 아니다.
   style.css 가 메인용으로 걸어 둔 스냅을 푼다 */
html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  /* hidden 은 스크롤 컨테이너를 만들어 안쪽 sticky 를 깨뜨릴 수 있다.
     clip 은 잘라내기만 하고 스크롤 컨테이너가 되지 않는다 */
  overflow-x: clip;
}

.page {
  /* 본문 칸 — 시안에서 글줄이 258~1660 에 놓인다 (폭 1402, 가운데) */
  --page-w: 1402;
  --page-gutter: 40;

  /* ---------- 크기 조절은 여기만 ----------
     시안(1920 아트보드) 값을 그대로 쓰면 실제 화면에서 글자와 여백이 과하게 크다.
     한 단씩 줄인 값이다. 괄호 안이 시안 원값이다. */
  --t-eyebrow: 28;      /* 40 */
  --t-title:   46;      /* 65 */
  --t-lead:    54;      /* 75 */
  --t-greet:   36;      /* 50 */
  --t-body:    20;      /* 25 */
  --t-sign:    28;      /* 40 */

  /* 헤더(110)가 얹혀 있으므로 실제로 보이는 여백은 이 값에서 헤더 높이를 뺀 만큼이다.
     210 → 1920 에서 100 정도가 남는다 */
  --sp-top:      210;   /* 270 — 헤더 아래 → CEO MESSAGE */
  --sp-title:     14;   /*  19 — CEO MESSAGE → 인사말 */
  --sp-visual:    80;   /* 132 — 인사말 → 패널 */
  --sp-body-top:  96;   /* 137 — 패널 → 본문 */
  --sp-body-bot: 150;   /* 217 — 본문 → 푸터 */
  --sp-greet:     56;   /*  74 — 인사 제목 → 본문 글 */
  --sp-sign:      72;   /* 100 — 본문 글 → 서명 */

  /* 좁은 화면에서 글자가 읽기 어려울 만큼 작아지지 않도록 바닥을 둔다.
     --u 는 화면 폭에 정비례해서 줄어들기 때문이다 */
  --t-body-min: 16px;

  /* 글줄 폭. 칸 전체(1402)를 쓰면 한 줄이 70자 가까이 되어 눈이 되돌아오기 힘들다.
     한글 본문은 50자 안팎이 편하다 */
  --text-w: 1080;
}
.page__head,
.page__body {
  width: min(calc(var(--page-w) * var(--u)), calc(100% - var(--page-gutter) * var(--u) * 2));
  margin: 0 auto;
}

/* ---------- 첫 화면 등장 ----------
   다른 페이지에서 넘어왔을 때 첫 화면이 통째로 '띡' 하고 나타나지 않도록,
   위에서부터 아주 짧게 차례로 올라온다.

   스크롤이나 관찰자에 걸지 않고 CSS 애니메이션으로 둔다.
   페이지가 그려지는 순간 스스로 재생되므로 스크립트가 없어도 글이 사라지지 않는다.
   (클래스로 켜면 그 스크립트가 실패했을 때 내용이 영영 안 보인다)

   폭은 건드리지 않는다 — 세로로 조금 올라오고 밝아지기만 한다.
   패널이 나중에 커지는 동작과 겹치지 않아야 그 변화가 따로 읽힌다.
*/
@keyframes ceoEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.js .page__eyebrow { animation: ceoEnter .7s var(--flow-ease) both; }
.js .page__title   { animation: ceoEnter .7s var(--flow-ease) .09s both; }
.js .ceo__panel    { animation: ceoEnter .85s var(--flow-ease) .19s both; }

/* ---------- 페이지 머리 ---------- */
.page__head { padding-top: calc(var(--sp-top) * var(--u)); }

.page__eyebrow {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));   /* 점과 글자 사이 */
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(var(--t-eyebrow) * var(--u));
  line-height: 1.2;
  color: var(--color-ink);
}
/* 시안 Ellipse 40 — 지름 20 의 점 */
.page__eyebrow::before {
  content: "";
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: #135a9c;
}

.page__title {
  margin: calc(var(--sp-title) * var(--u)) 0 0;
  font-weight: 700;
  font-size: calc(var(--t-title) * var(--u));
  line-height: 1.2;
  letter-spacing: -.03em;            /* -1.95 / 65 */
  color: var(--color-ink);
}

/* ---------- 비주얼 ----------
   패널이 커지는 동안 아래 본문이 밀리지 않도록,
   자리는 처음부터 '커진 높이'로 잡아 둔다.
   패널은 그 안에서 위를 기준으로 자란다.
*/
.ceo {
  --p: 0;                 /* 0 또는 1 — js/page-greeting.js 가 넣는다 */

  /* 작은 크기 → 최종 크기까지 걸리는 시간.
     카피는 이 시간이 끝난 뒤에 찍히기 시작한다 (JS 가 같은 값을 본다) */
  --ceo-grow: .9s;

  /* 시안(1710 → 1840)을 그대로 쓰면 화면을 거의 꽉 채워서
     커졌을 때 위 모서리가 화면 밖으로 나가 라운드가 보이지 않는다.
     비주얼 전체를 한 비율로 줄인다. 1710 × .8187 ≈ 1400 — 열렸을 때 시작 폭이다.
     이 숫자 하나만 바꾸면 패널·사진·카피가 함께 따라간다. */
  --visual-k: .8187;

  --panel-w: calc((1710 + 130 * var(--p)) * var(--visual-k) * var(--u));  /* 1400 → 1506 */
  --panel-h: calc((600 + 320 * var(--p)) * var(--visual-k) * var(--u));   /*  491 →  753 */

  /* 커진 높이 — 자라는 동안 아래 본문이 밀리지 않도록 미리 확보한다 */
  --panel-box: calc(920 * var(--visual-k) * var(--u));

  /*
    이 구간에서 스크롤을 잠시 붙잡아 둔다.
    안 그러면 휠 한 번에 화면이 지나가 버려서, 커지는 것도 글자가 나오는 것도
    끝난 뒤에나 눈에 들어온다. 붙잡아 두면 한 화면 안에서 처음부터 끝까지 보인다.
    길이는 화면 높이에 비례한다 — 길면 갇힌 느낌이, 짧으면 효과가 안 보인다.
  */
  --pin: 60vh;

  height: calc(var(--panel-box) + var(--pin));
  margin-top: calc(var(--sp-visual) * var(--u));
}

/* 붙잡히는 부분. 헤더 아래에 자리 잡고 --pin 만큼 그대로 머문다 */
.ceo__sticky {
  position: sticky;
  top: calc((var(--gnb-h) + 24) * var(--u));
  display: flex;
  justify-content: center;
  height: var(--panel-box);
}

/*
  --p 는 0 아니면 1 이다. 중간값이 없다 (js/page-greeting.js).

  스크롤 양에 비례해 조금씩 커지게 하면 '커지는 중' 인 어중간한 크기가
  계속 화면에 남아서, 어느 것이 제 크기인지 읽히지 않는다.
  대신 스크롤이 구간에 들어오는 순간 --p 를 1 로 한 번에 넘기고,
  실제로 커지는 과정은 CSS 전환에 맡긴다.
  값이 calc() 안의 변수에서 왔더라도 계산 결과인 width/height 가 바뀌므로
  전환은 정상적으로 걸린다.
*/
.ceo__panel {
  position: relative;
  width: var(--panel-w);
  height: var(--panel-h);
  /* 라운드는 줄이지 않는다. 패널이 작아진 만큼 오히려 또렷하게 읽힌다 */
  border-radius: calc(35 * var(--u));
  overflow: hidden;
  background: #eff0f5;
  transition: width var(--ceo-grow) var(--flow-ease),
              height var(--ceo-grow) var(--flow-ease);
}

/* 사진은 패널을 채우지 않는다. 배경이 잘린 인물 이미지가 패널 위에 놓인다.
   위치·크기 모두 두 시안 값을 --p 로 잇고, 패널과 같은 비율로 줄인다 */
.ceo__photo {
  position: absolute;
  left: calc((382 + 365 * var(--p)) * var(--visual-k) * var(--u));    /*  382 →  747 */
  top: calc((-69 - 16 * var(--p)) * var(--visual-k) * var(--u));      /*  -69 →  -85 */
  width: calc((850 + 161 * var(--p)) * var(--visual-k) * var(--u));   /*  850 → 1011 */
  height: calc((954 + 181 * var(--p)) * var(--visual-k) * var(--u));  /*  954 → 1135 */
  object-fit: contain;
  /* 패널과 같은 시간·같은 곡선으로 움직여야 한 덩어리로 커진 것처럼 보인다 */
  transition: left var(--ceo-grow) var(--flow-ease),
              right var(--ceo-grow) var(--flow-ease),
              top var(--ceo-grow) var(--flow-ease),
              width var(--ceo-grow) var(--flow-ease),
              height var(--ceo-grow) var(--flow-ease);
}

/* 왼쪽이 어두워져야 카피가 읽힌다 (시안 2048:882).
   스크롤에 물리지 않고 '화면이 켜지듯' 스스로 밝아진다 —
   그 뒤에 글자가 찍히기 시작한다 */
.ceo__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90.25deg,
    rgba(0, 0, 0, .35) 24.3%,
    rgba(102, 102, 102, 0) 99.9%);
  opacity: 0;
  transition: opacity .7s ease;
}
.ceo.is-lead .ceo__dim { opacity: 1; }

.ceo__lead {
  position: absolute;
  left: calc(100 * var(--visual-k) * var(--u));   /* 시안 140 - 패널 왼쪽 40 */
  top: calc(303 * var(--visual-k) * var(--u));    /* 시안 866 - 패널 위 563 */
  margin: 0;
  font-weight: 400;
  font-size: calc(var(--t-lead) * var(--u));
  line-height: 1.4;              /* 105 / 75 */
  letter-spacing: -.03em;
  color: var(--color-white);
}

/*
  카피만 스크롤에서 떼어내 '자기 시간'으로 재생한다.

  스크롤 진행도에 물려 두면, 휠 한 번(100~120px)이 전체 구간(130~210px)을
  거의 다 삼켜 버려서 세 줄이 동시에 지나간다 — 순서가 눈에 안 남는다.
  그래서 패널이 어느 정도 커지는 순간 한 번 켜 두고,
  줄마다 시간차를 둬서 1.3초에 걸쳐 걷히게 한다.
  스크롤을 되감아 패널이 작아지면 함께 사라진다.

  마스크가 걷히는 방식은 메인 섹션 제목과 같아서 사이트 안에서 겉돌지 않는다.
*/
/*
  한 자씩 찍히듯 나온다.

  왼쪽에서 오른쪽으로 clip 을 여는데, steps() 로 끊어서 연다.
  단계 수를 글자 수에 맞추면 한 글자씩 드러나 타이핑처럼 읽힌다.
  글자를 <span> 으로 쪼개지 않아도 되므로 마크업이 지저분해지지 않는다.

  스크롤 진행도에 물리지 않는 이유 —
  휠 한 번이 구간을 다 삼켜 버려 순서가 눈에 남지 않기 때문이다.
  딤이 켜지는 순간(.is-lead) 한 번 시작해서 자기 시계로 끝까지 찍는다.

  --steps  그 줄의 글자 수 (공백 포함)
  --dur    찍는 데 걸리는 시간
  --delay  앞 줄이 끝난 뒤 쉬는 시간까지 더한 시작 시점
*/
.ceo__lead span {
  display: block;
  clip-path: inset(0 100% 0 0);   /* 오른쪽을 다 덮은 상태에서 시작 */
}
.ceo.is-lead .ceo__lead span {
  animation: ceoType var(--dur) steps(var(--steps)) var(--delay) forwards;
}
/* 오른쪽을 -2% 까지 여는 이유: 0 이면 마지막 글자 끝이 살짝 잘린다 */
@keyframes ceoType {
  to { clip-path: inset(0 -2% 0 0); }
}

.ceo__lead span:nth-child(1) { --steps: 12; --dur: .54s; --delay: .40s; }
.ceo__lead span:nth-child(2) { --steps: 13; --dur: .58s; --delay: 1.06s; }
.ceo__lead span:nth-child(3) { --steps:  8; --dur: .36s; --delay: 1.76s; }
/* 마지막 글자까지 약 2.1초 */

/* ---------- 본문 ----------
   2026-09-18 두 칸으로 — 본문 폭(1080)이 틀(1400)보다 좁아 오른쪽이 비어 보였다.
   왼쪽 칸(340)에 인사 제목이 스크롤을 따라오고(sticky), 오른쪽 칸에 본문과 서명이 놓인다.
   본문 줄바꿈(br-pc)은 그대로다 — 오른쪽 칸이 1000 이라 가장 긴 줄(약 950)이 들어간다 */
.page__body { padding: calc(var(--sp-body-top) * var(--u)) 0 calc(var(--sp-body-bot) * var(--u)); }
.ceo__read {
  display: grid;
  grid-template-columns: calc(380 * var(--u)) minmax(0, 1fr);   /* 'SPCI 대표이사 이철입니다.' 한 줄(약 360) 이 들어가는 폭 */
  column-gap: calc(40 * var(--u));
  align-items: start;
}
.ceo__greeting { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--gnb-h, 110) * var(--u) + 40px); }
.ceo__text     { grid-column: 2; grid-row: 1; margin-top: 0; }
.ceo__sign     { grid-column: 2; grid-row: 2; }

/* ---------- 한 화면씩 스냅 (2026-09-18) ----------
   PC(769px 이상 · 창 높이 900 이상)에서 이 페이지는 세 화면으로 딱딱 끊긴다.
     1) 제목 + 패널     — 패널이 헤더 아래에 닿는 자리에서 멈추고 커진다 (붙잡는 거리 --pin 은 0)
     2) 인사말 본문     — 인사 제목과 글이 한 화면에 다 들어오고, 문단이 차례로 떠오른다 (reveal)
     3) 푸터
   창이 낮으면(본문이 한 화면에 안 들어감) 스냅을 걸지 않고 그냥 흐른다 */
@media (min-width: 769px) and (min-height: 960px) {
  html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--gnb-h) * var(--u));   /* 고정 헤더 바로 아래에 맞춘다. 패널 화면은 sticky top(헤더+24)보다 24 위에서 멈추지만 --pin 이 0 이라 그대로 붙어 있다 */
  }
  .page__head { scroll-snap-align: start; }
  .ceo { --pin: 0px; scroll-snap-align: start; }
  /* 본문 화면 — 헤더를 뺀 한 화면. 글 덩어리는 가운데, 위아래로 최소 6vh 씩 숨 쉴 여백을 둔다 */
  .page__body {
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--gnb-h) * var(--u));
    padding-top: 6vh;
    padding-bottom: 6vh;
  }
  .ceo__read { width: 100%; }
  .ceo__greeting { position: static; }
  /* 본문 화면과 푸터 사이 — 스냅이 푸터 아래끝에 맞춰 멈추므로 이 여백이 서명 아래 숨통이 된다 */
  .footer { scroll-snap-align: end; margin-top: calc(120 * var(--u)); }
}

.ceo__greeting {
  margin: 0;
  font-weight: 600;
  font-size: calc(var(--t-greet) * var(--u));
  line-height: 1.48;             /* 74 / 50 */
  letter-spacing: -.03em;
  color: var(--color-ink);
  word-break: keep-all;
}

/*
  본문 등장 — js/reveal.js 가 화면에 들어오면 .is-in 을 붙인다.

  세 덩어리가 같은 동작으로 한꺼번에 올라오면 긴 글 앞에서 산만하다.
  역할을 나눈다.
    인사 제목  한 줄씩 아래에서 걷힌다 (메인 섹션 제목과 같은 방식)
    본문 글    문단마다 조금씩 늦게 떠오른다 — 읽는 순서와 같은 방향
    서명       맨 끝에서 조용히 따라온다
*/

/* 제목·본문 상자 자체는 움직이지 않는다. 안쪽 것들이 움직인다 */
.js .ceo__greeting[data-reveal],
.js .ceo__text[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.js .ceo__greeting span {
  display: block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(.3em);
  transition: clip-path 1s var(--flow-ease), transform 1s var(--flow-ease);
}
/* 아래를 -20% 까지 여는 이유: 0 이면 받침이 닿아 잘려 보인다 */
.js .ceo__greeting[data-reveal].is-in span {
  clip-path: inset(0 0 -20% 0);
  transform: none;
}
.js .ceo__greeting[data-reveal].is-in span:nth-child(2) { transition-delay: .13s; }

.js .ceo__text[data-reveal] p {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s var(--flow-ease), transform .85s var(--flow-ease);
}
.js .ceo__text[data-reveal].is-in p { opacity: 1; transform: none; }
.js .ceo__text[data-reveal].is-in p:nth-child(1) { transition-delay: .10s; }
.js .ceo__text[data-reveal].is-in p:nth-child(2) { transition-delay: .19s; }
.js .ceo__text[data-reveal].is-in p:nth-child(3) { transition-delay: .28s; }
.js .ceo__text[data-reveal].is-in p:nth-child(4) { transition-delay: .37s; }
.js .ceo__text[data-reveal].is-in p:nth-child(5) { transition-delay: .46s; }
.js .ceo__text[data-reveal].is-in p:nth-child(6) { transition-delay: .55s; }

/* 서명은 공용 등장(페이드 + 상승)을 그대로 쓰되 조금 늦게 */
.js .ceo__sign[data-reveal] { transition-delay: .12s; }

.ceo__text {
  max-width: calc(var(--text-w) * var(--u));
  margin-top: calc(var(--sp-greet) * var(--u));
  /* 바닥값을 둬서 좁은 화면에서도 읽힌다 */
  font-size: max(calc(var(--t-body) * var(--u)), var(--t-body-min));
  line-height: 1.85;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;          /* '겪었 / 지만' 처럼 어절 중간에서 끊기지 않게 (2026-09-18) */
}
/* 확정 카피의 줄 위치 — PC 에서만 강제 줄바꿈, 좁은 화면은 자연 줄바꿈 */
.ceo__text .br-pc { display: none; }
@media (min-width: 769px) { .ceo__text .br-pc { display: inline; } }
/* 시안은 빈 줄로 문단을 나눈다. 여기서는 문단 간격으로 같은 리듬을 만든다 */
.ceo__text p { margin: 0 0 calc(34 * var(--u)); }
.ceo__text p:last-child { margin-bottom: 0; }

.ceo__sign {
  margin: calc(var(--sp-sign) * var(--u)) 0 0;
  font-weight: 600;
  font-size: calc(var(--t-sign) * var(--u));
  line-height: 1.625;            /* 65 / 40 */
  letter-spacing: -.03em;
  text-align: right;
  color: var(--color-ink);
  overflow: clip;                /* 이름의 자간 보정(-1em)이 좁은 화면에서 오른쪽으로 새지 않게 */
}
/* 두 글자 이름 '이철' 을 세 글자 이름 폭으로 — 글자 사이를 한 글자만큼 벌린다.
   letter-spacing 은 마지막 글자 뒤에도 붙어 오른쪽 정렬이 밀리므로 그만큼 되돌린다 */
.ceo__sign-name {
  letter-spacing: 1em;
  margin-right: -1em;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 768px) {
  .page { --page-gutter: 16; }

  .page__head { padding-top: calc(160 * var(--u)); }
  .page__eyebrow { font-size: calc(22 * var(--u)); gap: calc(7 * var(--u)); }
  .page__eyebrow::before { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .page__title { font-size: calc(34 * var(--u)); margin-top: calc(12 * var(--u)); }

  /* 좁은 화면에서는 1710 짜리 가로 배치가 성립하지 않는다.
     패널을 화면 폭에 맞추고, 카피는 사진 옆이 아니라 아래쪽에 얹는다 */
  /* 좁은 화면에서는 붙잡지 않는다. 화면이 짧아 갇힌 느낌만 난다 */
  .ceo {
    --pin: 0px;
    height: auto;
    margin-top: var(--sp-block);
  }
  .ceo__sticky { position: static; height: auto; }
  /* 좌우 여백을 제목·본문과 맞춘다. 화면 끝까지 붙이면 라운드가 잘려 보인다 */
  .ceo__panel {
    width: calc(100% - var(--page-gutter) * var(--u) * 2);
    height: calc(430 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  /*
    사진은 원본 비율(928 : 1042)을 지켜야 한다.
    폭·높이를 따로 주면 비율이 어긋나 object-fit: contain 이 위아래를 남기고,
    그 남은 자리에 사진의 밝은 가장자리가 띠처럼 드러난다.
    높이를 auto 로 두면 폭 하나로 비율이 따라오므로 띠가 생기지 않는다.

    위아래는 일부러 패널 밖으로 내보낸다 — 데스크톱과 같은 방식이다.
    top -25 로 머리 위 여백을 잘라내고, 아래는 패널 밑단을 넘겨 끊는다.
      폭 420 → 높이 471,  -25 ~ 446  (패널 430 을 덮는다)

    좌우는 오른쪽을 기준으로 잡는다.
    왼쪽 기준이면 화면이 넓어질수록(태블릿) 인물이 왼쪽에 몰리고
    오른쪽에 빈 판이 남는다. 오른쪽 기준이면 어느 폭에서든 인물이 오른쪽에 서고,
    왼쪽에 카피 자리가 생긴다 — 데스크톱 배치와 같은 성격이다.

    내보내는 양은 오른쪽 어깨가 기준이다.
    원본에서 인물은 가로 15.3% ~ 94.8% 를 차지한다.
    폭 450 이면 어깨 바깥선이 사진 왼쪽에서 427 지점 —
    오른쪽으로 16 만 내보내면 어깨가 패널 안에 들어온다.
    잘리는 쪽은 왼팔인데, 그쪽은 어둡게 깔리고 카피가 얹히는 자리라 눈에 덜 걸린다.
  */
  .ceo__photo {
    left: auto;
    right: calc((-14 - 2 * var(--p)) * var(--u));
    top: calc(-25 * var(--u));
    width: calc((420 + 30 * var(--p)) * var(--u));
    height: auto;
    /* 사진은 패널보다 넓다 (좌우로 넘겨 인물을 크게 잡는다).
       전역 img { max-width: 100% } 가 패널 폭으로 묶으면 세로가 모자라
       패널 아래에 빈 자리가 남는다 */
    max-width: none;
  }

  /* 카피가 아래로 내려왔으니 어둠도 아래에서 올라온다 */
  .ceo__dim {
    background: linear-gradient(to top,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .40) 34%,
      rgba(0, 0, 0, 0) 68%);
  }

  /*
    글줄이 접히면 안 된다.
    steps() 타이핑은 '한 줄 = 한 span' 을 전제로 글자 수를 세기 때문에,
    줄바꿈이 일어나면 두 줄이 한꺼번에 걷혀 타이핑으로 안 읽힌다.
    가장 긴 줄(13자)이 21 × 0.97 × 13 ≈ 265 로, 375 화면의 패널 안쪽(288)에 들어간다.
    그보다 좁은 화면에서는 --u 가 함께 줄어들어 비율이 유지된다.
  */
  .ceo__lead {
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    top: auto;
    bottom: calc(26 * var(--u));
    font-size: calc(21 * var(--u));
    line-height: 1.45;
  }
  .ceo__lead span { white-space: nowrap; }

  /* 패널→인사 제목은 --sp-block, 마지막 줄→푸터는 --sp-section. 좁은 화면은 한 칸으로 쌓는다 */
  .page__body { padding: var(--sp-block) 0 var(--sp-section); }
  .ceo__read { display: block; }
  .ceo__greeting { position: static; font-size: calc(26 * var(--u)); line-height: 1.45; }
  /* 본문은 바닥값을 지킨다. 15px 회색 글씨는 작은 화면에서 읽기 부담스럽다 */
  .ceo__text {
    margin-top: var(--sp-head);
    font-size: max(calc(16 * var(--u)), 15px);
    line-height: 1.75;
  }
  .ceo__text p { margin-bottom: calc(22 * var(--u)); }
  .ceo__sign { margin-top: var(--sp-block); font-size: calc(20 * var(--u)); }
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  /* 커지는 과정을 보여 주지 않고 최종 상태로 둔다 */
  .ceo { --p: 1 !important; --pin: 0px !important; }
  .ceo__sticky { position: static; }
  .ceo__panel, .ceo__photo { transition: none; }
  /* 첫 화면도 움직임 없이 */
  .js .page__eyebrow,
  .js .page__title,
  .js .ceo__panel { animation: none; }
  /* 본문도 움직임 없이 처음부터 제자리에 */
  .js .ceo__greeting span,
  .js .ceo__text[data-reveal] p {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
  /* 타이핑 없이 처음부터 다 보인다 */
  .ceo__lead span,
  .ceo.is-lead .ceo__lead span {
    clip-path: none;
    animation: none;
  }
  .ceo__dim { opacity: 1; transition: none; }
}