/* 히어로 라이브 슬라이드 — 크로스페이드 · Ken Burns · 스크롤 시차 · 포인터 시차 · 실시간 지표 칩 */
.hero[data-live]>img{display:none}
.hl-stage,.hl-pointer,.hl-slide{position:absolute;inset:0}
.hl-stage{will-change:transform}
.hl-pointer{transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-10px),0) scale(1.06);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hl-slide{opacity:0;transition:opacity 1.3s ease}
.hl-slide.on{opacity:1;z-index:1}
.hl-slide img{width:100%;height:100%;object-fit:cover;object-position:var(--op,center);transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(1)}
.hl-slide.on img{animation:hl-kb 9s ease-out forwards}
@keyframes hl-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero[data-live]:after{z-index:2}
.hero[data-live] .hero-copy{z-index:4;view-transition-name:hl-copy}
.hl-swap{animation:hl-in .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes hl-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(hl-copy){animation:hl-out .28s ease both}
::view-transition-new(hl-copy){animation:hl-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes hl-out{to{opacity:0;transform:translateY(-10px)}}

.hl-bars{position:absolute;z-index:5;left:7vw;bottom:74px;display:flex;gap:8px;align-items:center}
.hl-bar{all:unset;box-sizing:border-box;cursor:pointer;width:64px;height:24px;display:flex;align-items:center}
.hl-bar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hl-bar b{display:block;width:100%;height:3px;border-radius:2px;background:#ffffff59;overflow:hidden}
.hl-bar i{display:block;height:100%;width:0;background:#fff}
.hl-bar.done i{width:100%}
.hl-bar.on i{animation:hl-fill var(--dur,6.5s) linear forwards}
@keyframes hl-fill{to{width:100%}}
.hl-bars .hl-count{margin-left:10px;font-size:12px;color:#ffffffcc;font-variant-numeric:tabular-nums}
.hero:hover .hl-bar.on i,.hero:focus-within .hl-bar.on i,.hero.hl-hold .hl-bar.on i,.hero.hl-hold .hl-slide.on img,.hero.hl-paused .hl-bar.on i,.hero.hl-paused .hl-slide.on img{animation-play-state:paused}

.hl-arrows{position:absolute;z-index:5;right:7vw;bottom:68px;display:flex;gap:8px}
.hl-ic{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff59;background:#ffffff1f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;transition:background .2s}
.hl-ic:hover{background:#ffffff40}
.hl-ic:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hl-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hl-ic .hl-i-play{display:none}
.hl-ic[aria-pressed=true] .hl-i-play{display:block}
.hl-ic[aria-pressed=true] .hl-i-pause{display:none}
.hl-chips{position:absolute;z-index:5;right:7vw;bottom:126px;width:310px;padding:20px;border-radius:22px;background:#ffffff26;border:1px solid #ffffff40;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);color:#fff;box-shadow:0 18px 50px #00000040;display:flex;flex-direction:column;gap:8px}
.hl-ctitle{margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#ffffffe6}
.hl-ctitle em{font-style:normal;font-size:11px;font-weight:500;padding:4px 9px;border-radius:99px;background:#ffffff2e;white-space:nowrap}
.hl-chip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;background:#11192359;font-size:13px}
.hl-chip span{display:flex;align-items:center;gap:9px;color:#ffffffe0}
.hl-chip span:before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 0 #3ddc9799;animation:hl-pulse 2s infinite}
.hl-chip:nth-of-type(2) span:before{background:#ffc94d;animation-delay:.5s}
.hl-chip:nth-of-type(3) span:before{background:#6cb2ff;animation-delay:1s}
@keyframes hl-pulse{70%{box-shadow:0 0 0 7px #3ddc9700}100%{box-shadow:0 0 0 0 #3ddc9700}}
.hl-chip b{flex:none;font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hl-chip b small{font-size:12px;font-weight:500;margin-left:2px;color:#ffffffcc}
.hl-chips.hl-swap .hl-chip{animation:hl-in .7s cubic-bezier(.2,.7,.2,1) both}
.hl-chips.hl-swap .hl-chip:nth-of-type(2){animation-delay:.1s}
.hl-chips.hl-swap .hl-chip:nth-of-type(3){animation-delay:.2s}
.hl-chips{transition:opacity .5s ease,visibility .5s}
.hl-chips.hl-off{opacity:0;visibility:hidden}
.hl-note{margin:4px 2px 0;font-size:10.5px;color:#ffffffa6;text-align:right}

@supports (animation-timeline:scroll()){
  .hl-stage{animation:hl-par linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  @keyframes hl-par{to{transform:translateY(11vh) scale(1.04)}}
  .hero[data-live] .hero-copy{animation:hl-drift linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  @keyframes hl-drift{to{opacity:.15;transform:translateY(-6vh)}}
}

@media(min-width:761px){
  .hero[data-live] .hero-copy{position:absolute;left:0;bottom:122px;max-width:100%;padding:0 7vw}
  .hero[data-live]:after{background:linear-gradient(90deg,#111923cc 0%,#11192380 38%,#11192300 72%),linear-gradient(0deg,#111923b3,#11192300 38%)}
}
/* 카드와 겹치지 않도록 중간 폭에서만 카피 폭을 제한한다 */
@media(min-width:1101px) and (max-width:1359px){.hero[data-live] .hero-copy{max-width:calc(100% - 7vw - 334px)}}
@media(max-width:1100px){.hl-chips{display:none}}
@media(max-width:760px){
  .hl-bars{left:7vw;bottom:62px;gap:6px}.hl-bar{width:26px}.hl-bars .hl-count{display:none}
  .hl-arrows{right:6vw;bottom:58px;gap:6px}.hl-ic{width:38px;height:38px}
  /* 한 화면 히어로 — 첫 화면 안에 문구·버튼·슬라이드 조작이 모두 들어오게 높이를 화면(헤더 68px 제외)에 맞춘다.
     문구는 아래에서부터 쌓아 인물이 위쪽에 남고, 문구 뒤만 어둡게 한다. */
  .hero[data-live]{height:calc(100svh - 68px);min-height:540px;max-height:900px}
  .hero[data-live] .hero-copy{position:absolute;left:0;right:0;bottom:112px;padding:0 7vw}
  html .hero[data-live] .hero-copy h1{font-size:clamp(30px,10vw,42px);line-height:1.14;margin:12px 0 10px}
  html .hero[data-live] .hero-copy .hero-label{margin:0}
  html .hero[data-live] .hero-copy>p:not(.hero-label){font-size:14px;line-height:1.6;max-width:none;margin:0}
  .hero[data-live] .hero-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:16px}
  .hero[data-live] .hero-buttons .button{padding:14px 20px}
  .hl-pointer{transform:none}
  .hero[data-live]:after{background:none}
  /* 첫 슬라이드(여성 관리자) — 화면을 채우는 사진 그대로 두고, 문구 뒤만 어둡게 한다. 확대는 살짝만. */
  .hl-slide:first-child:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#11192300 18%,#111923b3 48%,#111923f2 100%)}
  @keyframes hl-kb-m{from{transform:scale(1)}to{transform:scale(1.04)}}
  /* 나머지 4장 — 잘리지 않게 가로 폭에 맞춰 사진 전체를 보여준다(3:2 사진은 250px, 16:9 사진은 211px 높이).
     사진 위·아래 여백이 같아지도록, 히어로 높이에서 문구 자리(--ch)와 사진 높이(--ih)를 뺀 빈 공간의 절반만큼 사진을 내린다(+20px은 사진 아래 페이드 구간 보정).
     아래쪽은 히어로 바탕색으로 부드럽게 이어 문구를 올리고, 확대 효과는 끈다. */
  .hero[data-live]{--hh:min(max(100svh - 68px,540px),900px);--ch:238px}
  /* 문구 높이는 언어마다 다르다(영어는 버튼이 두 줄로 접힘) — 측정값 기준 */
  html:lang(zh-CN) .hero[data-live]{--ch:244px}
  html:lang(ja) .hero[data-live]{--ch:270px}
  html:lang(en) .hero[data-live]{--ch:305px}
  .hl-slide:not(:first-child) img{--ih:56.25vw;height:var(--ih);margin-top:max(0px,calc((var(--hh) - 112px - var(--ch) - var(--ih) + 20px)/2));object-fit:contain;object-position:top center;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent)}
  .hl-slide:not(:first-child) img[src*="team"],.hl-slide:not(:first-child) img[src*="press"]{--ih:66.667vw}
  .hl-slide:not(:first-child).on img{animation:none}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .hl-slide:first-child.on img{animation-name:hl-kb-m}
}
/* 가로가 짧은 폰(SE 등) — 본문 문장을 접어 사진과 버튼 자리를 확보한다. */
@media(max-width:760px) and (max-height:720px){
  .hero[data-live]{--ch:172px}
  html:lang(zh-CN) .hero[data-live]{--ch:178px}
  html:lang(ja) .hero[data-live]{--ch:190px}
  html:lang(en) .hero[data-live]{--ch:214px}
  html .hero[data-live] .hero-copy>p:not(.hero-label){display:none}
  html .hero[data-live] .hero-copy h1{font-size:clamp(28px,9vw,36px)}
}
.hero-foot .hf-short{display:none}
.hero-foot b{font-weight:inherit}
@media(max-width:760px){.hero-foot .hf-full{display:none}.hero-foot .hf-short{display:inline}.hero-foot span,.hero-foot a{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){
  .hl-slide{transition:opacity .4s}
  .hl-slide.on img{animation:none}
  .hl-stage,.hero[data-live] .hero-copy{animation:none}
  .hl-pointer{transform:none;transition:none}
  .hl-chip span:before{animation:none}
  .hl-bar.on i{animation:none;width:100%}
}
@media print{.hl-bars,.hl-chips,.hl-arrows{display:none}}