/* 지페 · 대표이사 인사말(ceo.html) — 사진 카드 */

/* ── 대표이사: 상단 분할(문장 + 인물 카드) ───────────────────── */
.pg-ceo .pg-hero__title{max-width:none;font-size:clamp(28px,3.5vw,68px);line-height:1.22}
.ceo-hero__ln{display:block}
.ceo-fig{position:relative;isolation:isolate;justify-self:end;width:min(100%,clamp(340px,39vw,640px));margin:0}
.ceo-fig__bg{position:absolute;z-index:-1;inset:7% -6% -5% 9%;border-radius:var(--r4);background:linear-gradient(155deg,#dce5ff 0%,#edf1ff 52%,#fff0b8 135%)}
.ceo-fig__img{display:block;width:100%;height:auto;aspect-ratio:912/1029;object-fit:cover;border-radius:var(--r3);background:#e9e6df;box-shadow:0 2px 4px rgba(25,31,40,.05),0 32px 64px -26px rgba(25,31,40,.4)}
.ceo-fig__tag{position:absolute;left:clamp(12px,1.6vw,24px);top:clamp(12px,1.6vw,24px);display:grid;gap:.15em;padding:.7em 1.15em .8em;border-radius:var(--r1);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 26px -12px rgba(25,31,40,.4)}
.ceo-fig__tag span{color:var(--ink2);font-size:clamp(12px,.95vw,15px);font-weight:700;line-height:1.3}
.ceo-fig__tag b{color:var(--ink);font-size:clamp(19px,1.7vw,28px);font-weight:800;letter-spacing:.08em;line-height:1.2}
/* 한 번만 나타나기: 카드 → 배경판 → 이름표 (모션 줄이기면 site.js가 바로 .in을 붙임) */
.js .ceo-fig__bg{transform:translate(-4%,5%) rotate(-3deg);transition:transform 1.2s var(--out) .12s}
.js .ceo-fig.in .ceo-fig__bg{transform:none}
.js .ceo-fig__tag{opacity:0;transform:translateY(-8px);transition:opacity .7s var(--out) .5s,transform .8s var(--out) .5s}
.js .ceo-fig.in .ceo-fig__tag{opacity:1;transform:none}
@media (max-width:1023px){
  .ceo-fig{justify-self:center;width:min(100%,520px)}
  .ceo-fig__bg{inset:6% -4% -4% 6%}
}
@media (max-width:640px){
  .pg-ceo .pg-hero__title{font-size:clamp(26px,7.4vw,34px)}
  .ceo-hero__ln{display:inline}
  .ceo-fig__tag{left:10px;top:10px;padding:.5em .85em .6em}
  .ceo-fig__tag b{font-size:17px}
}

/* ── 대표이사: 인사말 종이 ───────────────────────────────── */
.ceo-letter .letter{position:relative;max-width:min(100%,880px);margin:0 auto;padding:clamp(32px,6.2vw,116px) clamp(22px,7vw,120px) clamp(32px,4.6vw,84px);border-radius:var(--r4);background:#fff;box-shadow:var(--sh1)}
.ceo-letter .letter::before{content:"";display:block;width:56px;height:6px;margin-bottom:clamp(26px,3.2vw,48px);border-radius:3px;background:var(--wave)}
.ceo-letter .letter p{margin:0 0 1.7em;color:#2b3340;font-size:clamp(17px,1.3vw,21px);line-height:2;letter-spacing:-.012em}
.ceo-letter .letter .letter__hello{margin-bottom:1.3em;font-size:clamp(23px,2.5vw,42px);font-weight:800;line-height:1.42;letter-spacing:-.04em;text-wrap:balance}
.ceo-letter .letter .letter__key{margin:2.3em 0;padding:.1em 0 .1em clamp(16px,1.8vw,28px);border-left:6px solid var(--wave);color:var(--ink);font-size:clamp(20px,1.85vw,31px);font-weight:800;line-height:1.6;letter-spacing:-.035em}
.ceo-letter .letter .letter__thx{margin-top:2.4em;margin-bottom:0;color:var(--ink);font-weight:800}
.letter__end{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,3.4vw,52px);padding-top:clamp(22px,2.4vw,36px);border-top:1px solid var(--line)}
.letter__av{position:relative;flex:none;width:clamp(58px,5vw,80px);aspect-ratio:1;overflow:hidden;border-radius:50%;background:#e6ecfd;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.letter__av img{position:absolute;left:-134.7%;top:-72.4%;width:376.5%;max-width:none;height:auto}   /* ceo_m.webp 640x722: 얼굴(머리~턱~목)이 원 안에 들어오는 170px 창, 중심 (314, 208) */
.letter__who{display:grid;gap:.2em}
.letter__who span{color:var(--ink2);font-size:clamp(14px,1.05vw,17px);font-weight:700;line-height:1.35}
.letter__who b{color:var(--ink);font-size:clamp(26px,2.4vw,40px);font-weight:800;letter-spacing:.1em;line-height:1.2}
.letter__logo{flex:none;width:auto;height:clamp(22px,2vw,32px);margin-left:auto}
@media (max-width:640px){
  .ceo-letter .letter p{line-height:1.9}
  .letter__logo{display:none}
}

/* 확대 보기(라이트박스): 흰 문서 위에서도 ✕ ‹ › 가 보이도록 어두운 버튼 (docs.css와 같은 모양) */
.lbox button{background:rgba(10,12,18,.66);box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.lbox button:hover{background:rgba(10,12,18,.88)}
.lbox__x{right:12px;top:12px}
.lbox__c{top:16px;bottom:auto;left:16px;transform:none;padding:.3em .8em;border-radius:99px;background:rgba(10,12,18,.66);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
@media (max-width:1023px){
  /* 폰 · 태블릿: 문서가 화면 폭에 맞으면 글씨가 5~6px라서, 창 안에서 밀어 볼 수 있게 크게 열고 ‹ › 는 아래로 */
  .lbox{padding:64px 10px 80px}
  .lbox__f{max-width:100%;max-height:calc(100svh - 150px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;justify-items:start;gap:10px}
  .lbox__f img{max-width:none;max-height:none;width:min(1080px,190vw)}
  .lbox__f figcaption{position:sticky;left:0;max-width:calc(100vw - 20px);font-size:14px;text-align:left}
  .lbox__p,.lbox__n{top:auto;bottom:16px;margin:0}
  .lbox__p{left:16px}
  .lbox__n{right:16px}
}
@media print{
  .js .ceo-fig__tag{opacity:1;transform:none}
  .js .ceo-fig__bg{transform:none}
}