@charset "utf-8";
/* =========================================================================
   NEXUS ELEC — main.css  (메인 index.html 전용 · body.home 안에서만 동작)
   2026-08-18  ★전면 재디자인 (사장님 지시 : 「셀비타바이오처럼 메인 풀 영상으로」)

   무엇을 고쳤나 — 앞판의 «퀄리티가 떨어지는» 원인을 하나씩 짚어서 지웠다
     ① .hx-sec--full{min-height:100vh; justify-content:center} 가 섹션마다
        340~400px 짜리 «빈 흰 판»을 만들고 있었다(캡처 co1now_1 에서 실측).
        → 100vh 강제를 걷고 «패딩 리듬»으로 바꾼다. 화면을 채우는 것은
          히어로·전폭 스테이지·핀 세 종류«뿐»이다.
     ② .hx-pin__flow{padding:86vh …} + li{margin-bottom:32vh} 라 핀 구간이
        한 화면에 카드 «한 장»만 띄우고 나머지는 빈 사진이었다(캡처 co1now_2).
        → 34vh / 13vh 로 조여 한 화면에 3~4장이 지나가게 한다.
     ③ 히어로 사진(hero.jpg)이 «밝은 파란 라인»이라 흰 글자가 떴다.
        → 어두운 웨이퍼 컷(hero2.jpg)으로 갈고 딤을 계산해 다시 맞춘다.
     ④ 문서 높이 17,771px 중 상당량이 «빈 곳»이었다 → 채운 높이로 줄인다.

   참고 = HDC현대산업개발 IPARK  실측 SPEC : _co/_스펙_co1_hdc.md
   ★co7(셀비타바이오)과 «장치»는 같고 «문법»은 다르다 —
     같은 것 : 히어로 풀 영상(data-vsrc 지연 로드) · 포스터 대체 · 정지 버튼 · 하단 지표 띠
     다른 것 : 왼쪽 정렬(co7 가운데) · 한글 55px w500(co7 영문 106px) · max-width 없음
              (co7 1300) · 라운드 전부 0(co7 뉴스 20) · 행간 1.4(co7 1.00)
              · 포인트 #0E7C86 세로막대만(co7 #0A6E63 면)

   맞춘 숫자
     컨테이너 max-width 없음 · 좌우 3.125vw       간격 3.125/4.167/6.25/8.333/11.458vw
     히어로 55.1/1.30/w500/ls-1.5px               섹션제목 39.5/1.40/w600/ls-.5px
     중제목 29.6  라벨 26.3  리드 19.7/1.5        본문 16/1.7/ls-.5px
     대비율 55.1 : 39.5 : 16 = 3.44 : 2.47 : 1    라운드 0px · 버튼 #212121
     글자 #212121 지배 · 보조 #656565 / #B9B9B9   배경 #FFF 압도 · 패널 #F9F9FA · 다크 #000
     포인트 #0E7C86 = «세로 3px 막대»와 강조 글자에만. 면(背景)에는 안 쓴다
   ========================================================================= */

/* ------------------------------------------------------------------ 토큰 */
body.home{
  /* HDC 실측 padding 49.31·65.75·98.63·131.5·180.81 ÷1578 = 3.125vw 의 배수 */
  --pad:3.125vw;
  --s1:4.167vw; --s2:6.25vw; --s3:8.333vw; --s4:11.458vw;

  --ink:#212121; --ink-2:#656565; --ink-3:#B9B9B9;
  --line:#E5E5E5; --line-2:#E5E5E5;
  --panel:#F9F9FA; --tint:#F9F9FA; --tint-2:#F9F9FA;
  --acc:#0E7C86;                 /* 흰 배경 대비 4.95:1 — AA 통과(계산해서 골랐다) */
  --acc-on:#5FD3DC;              /* 검정 위에서 쓰는 같은 hue 의 밝은 쪽 */
  --dark:#111111;

  /* site.css 가 면(背景)에 쓰는 변수들은 전부 잉크색으로 눌러 둔다.
     포인트색을 면에 못 쓰게 하는 가장 확실한 방법이다. */
  --pri:#212121; --pri-d:#000000; --pri-soft:#F9F9FA;
  --wrap:none; --cw:none; --gut:0px;
  --r:0px; --r-btn:0px; --r-card:0px;
  --sec-y:8.333vw;

  font-size:16px; line-height:1.7; letter-spacing:-.5px;
  color:var(--ink); background:#fff; font-weight:400;
}

/* 한국어 줄바꿈 — 어절 중간에서 끊기면 실격 */
body.home,.home *{word-break:keep-all !important; overflow-wrap:break-word}
/* 라운드 0px : HDC 는 207개 중 207개가 0 */
.home *{border-radius:0 !important}

/* site.js 의 스크롤 등장(.rv)은 메인에서 끈다.
   ★프로그램 스크롤로 건너뛴 구간은 IntersectionObserver 가 안 울려
     본문이 opacity:0 인 채로 남는다(측정·캡처가 통째로 거짓이 된다). */
.home .rv{opacity:1 !important; transform:none !important}

/* 컨테이너 = «max-width 없음». 여백은 섹션이 갖고 .wrap 은 그 안쪽 폭 그대로 */
.home .wrap{width:100%; max-width:none; margin:0; padding:0}

.home h1,.home h2,.home h3,.home h4{
  font-weight:600; line-height:1.4; letter-spacing:-.5px; color:inherit}
.home p{margin:0 0 1em; letter-spacing:-.5px}
.home strong{color:var(--acc); font-weight:600}   /* 포인트색은 «강조 글자»에만 */
/* 숫자 폭이 흔들리면 지표 줄이 어긋난다 */
.home .hhero__stats b,.home .hx-stats b,.home time{font-variant-numeric:tabular-nums}

/* 라벨(kicker/eyebrow) = 세로 3px 막대 + 영문 15px  ← HDC 문법 그대로 */
.home .kicker,.home .eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin:0;
  font-size:15px; font-weight:600; line-height:1.4; letter-spacing:0;
  text-transform:none; color:var(--ink)}
.home .kicker::before,.home .eyebrow::before{
  content:""; flex:0 0 auto; width:3px; height:16px; background:var(--acc)}
.home .kicker--on,.home .eyebrow--on{color:#fff}
.home .kicker--on::before,.home .eyebrow--on::before{background:var(--acc-on)}

/* ------------------------------------------------------------------ 버튼 */
.home .btn{
  min-height:44px; height:44px; padding:0 28px; gap:8px;
  font-size:14px; font-weight:600; letter-spacing:-.5px; border:1px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.home .btn--pri{background:#212121; color:#fff; border-color:#212121}
.home .btn--pri:hover{background:#000; border-color:#000}
.home .btn--ghost{background:transparent; color:#212121; border-color:#212121}
.home .btn--ghost:hover{background:#212121; color:#fff}
.home .hhero .btn--ghost,.home .cta .btn--ghost{color:#fff; border-color:rgba(255,255,255,.8)}
.home .hhero .btn--ghost:hover,.home .cta .btn--ghost:hover{background:#fff; color:#212121; border-color:#fff}
.home .hhero .btn--pri{background:#fff; color:#111; border-color:#fff}
.home .hhero .btn--pri:hover{background:#E6E6E6; border-color:#E6E6E6}
.home .cta .btn--pri{background:#fff; color:#212121; border-color:#fff}
.home .cta .btn--pri:hover{background:#E9E9E9; border-color:#E9E9E9}

/* ------------------------------------------------------------------ 헤더
   fixed · h71 · 메인에서는 «투명» → 스크롤하면 흰 배경.
   ★기본값을 «흰 배경 + 검은 글자»로 두고, 스크롤 구동 애니메이션을 지원하는
     브라우저에서만 «맨 위에서 투명»으로 바꾼다. 지원 안 하면 흰 헤더로 남아
     흰 글자가 흰 배경에 얹히는 사고가 절대 안 난다. */
/* ★border-bottom 을 쓰면 헤더가 71+1=72px 이 된다. 실측치 71 을 지키려고 box-shadow 로 긋는다 */
.home .hd{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:#fff; border-bottom:0; box-shadow:0 1px 0 var(--line);
  backdrop-filter:none; -webkit-backdrop-filter:none}
.home .hd__in{
  min-height:71px; height:71px; gap:0; padding:0 var(--pad);
  max-width:none; align-items:stretch}
.home .hd__logo{gap:10px; color:#212121; align-self:center}
.home .hd__mark{
  width:34px; height:34px; background:transparent; color:inherit;
  border:1px solid currentColor; font-size:13px; font-weight:700; letter-spacing:.04em}
.home .hd__nm b{font-size:16px; font-weight:700; letter-spacing:.05em}
.home .hd__nm i{font-size:11px; color:inherit; opacity:.62; letter-spacing:0}
.home .gnb{margin-left:auto; align-self:stretch}
.home .gnb>ul{gap:0; height:100%}
.home .gnb__i{display:flex}
.home .gnb__i>a{
  display:flex; align-items:center; justify-content:center;
  padding:0 20px; height:71px; font-size:15px; font-weight:600;
  letter-spacing:-.5px; color:#212121; box-shadow:none}
.home .gnb__i:hover>a,.home .gnb__i:focus-within>a{color:#212121; opacity:.62}
.home .gnb__sub{
  transform:translateX(-50%) translateY(0); top:71px; min-width:206px;
  background:#fff; border:1px solid var(--line); border-top:0; padding:14px 0;
  box-shadow:0 20px 40px rgba(0,0,0,.10)}
.home .gnb__i:hover .gnb__sub,.home .gnb__i:focus-within .gnb__sub{transform:translateX(-50%) translateY(0)}
.home .gnb__sub a{padding:9px 22px; font-size:15px; color:#656565; letter-spacing:-.5px}
.home .gnb__sub a:hover{background:#F9F9FA; color:#212121}
.home .hd__cta{
  align-self:center; margin-left:20px; height:40px; display:inline-flex;
  align-items:center; padding:0 20px; background:transparent; color:#212121;
  border:1px solid currentColor; font-size:14px; font-weight:600; letter-spacing:-.5px}
.home .hd__cta:hover{background:#212121; color:#fff; border-color:#212121}
.home .hd__burger{
  align-self:center; color:#212121; background:transparent; border:1px solid currentColor}
.home .hd__burger span{background:currentColor}
.home .mnav{
  background:#fff; border-top:1px solid var(--line);
  max-height:calc(100vh - 71px); overflow:auto}
.home .mnav>.wrap{padding:12px var(--pad) 28px}
.home .mnav ul ul a{background:#F9F9FA; color:#656565}

@supports (animation-timeline:scroll()){
  .home .hd{
    animation:hxHdBg linear both;
    animation-timeline:scroll(root block); animation-range:24px 150px}
  .home .hd__logo,.home .gnb__i>a,.home .hd__cta,.home .hd__burger{
    animation:hxHdInk linear both;
    animation-timeline:scroll(root block); animation-range:24px 150px}
  /* ★맨 위 헤더는 «완전 투명»이 아니라 «검정 46%» 에서 시작한다.
     캡처 화소로 재 보니 완전 투명일 때 내비 자리 배경 L95 = 0.256 → 15px 흰 글자가
     3.43:1 로 AA(4.5:1) «미달» 이었다(사진의 밝은 금색 구간). 검정 46% 를 깔면 5.9:1 이 된다(캡처로 재확인).
     ★영상이 나중에 올라와도 이 띠가 있으면 어떤 밝기가 와도 헤더가 안 죽는다.
     검정 «단색» 한 겹이다 — 그라데이션이 아니다. */
  @keyframes hxHdBg{
    from{background:rgba(0,0,0,.46);     box-shadow:0 1px 0 rgba(229,229,229,0)}
    to  {background:#ffffff;             box-shadow:0 1px 0 rgba(229,229,229,1)}}
  @keyframes hxHdInk{from{color:#ffffff} to{color:#212121}}
}

/* ================================================================= 히어로
   «메인 풀 영상» — co7(셀비타바이오)과 «같은 장치», 다른 얼굴.
   ★영상이 없어도 화면이 깨지면 안 된다. 3중으로 받친다 :
       1층  .hhero__bg 자체의 색면(먹→딥 슬레이트). img 가 404 여도 여기서 멎는다
       2층  <img src="img/hero2.jpg">  포스터
       3층  <video data-vsrc>          재생이 «실제로 붙었을 때만» has-video 가 붙어
                                       포스터를 감춘다. 못 붙으면 포스터가 그대로 남는다
   ★딤 α 는 감이 아니라 계산이다 : hero2.jpg 는 어두운 웨이퍼 컷이라
     제목 영역 평균 휘도가 이미 낮다. .42 를 씌우고 캡처 «화소»로 다시 잰다.
     검정 단색만 쓴다(색 든 그라데이션 금지). */
.home .hhero{background:#000; overflow:hidden}
.home .hhero--video{
  min-height:100vh; min-height:100svh; position:relative;
  display:flex; flex-direction:column; justify-content:flex-start}
/* 1층 : 색면 — 영상도 사진도 못 뜨는 최악의 경우에 «검정 빈 화면»을 막는다 */
.home .hhero__bg{background:#0B0F12; background-image:linear-gradient(160deg,#141C23 0%,#090C0F 62%,#000 100%)}
.home .hhero__bg img{opacity:1; width:100%; height:100%; object-fit:cover}
/* ★영상은 «불투명도 .55» 로 얹는다. 1.0 으로 두면 밝은 프레임 한 장이 헤더 글자를 지운다.
   최악 계산 : 밝은 프레임 250 → .55*250 + .45*14 = 144 → 아래 스크림 .60 → 58
   → 흰 글자 11:1. 영상이 어떤 밝기로 오든 헤더가 안 죽는다. */
.home .hhero__v.on{opacity:.55}
/* ★스크림 .60 은 «캡처 화소»로 정했다(_N_ctr.py) :
     .42 일 때 헤더 띠 L95 0.299 = 3.01:1 → 15px 흰 내비가 AA(4.5:1) «미달» 이었다.
     .60 → 약 5.6:1 로 올라온다. 제목 띠는 11.8:1. 검정 단색 한 겹이다(그라데이션 아님). */
.home .hhero--video .hhero__bg::after{background:rgba(0,0,0,.60)}
/* ★HDC 는 제목 상단이 y164. 라벨(21px)+제목 margin(26px) 을 빼면 padding-top 은 117 이다 */
.home .hhero--video .hhero__in{
  position:relative; z-index:2; padding:117px var(--pad) 0; max-width:none;
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center}
.home .hhero__t{
  margin:26px 0 0; max-width:none;
  font-size:55.1px; line-height:1.30; font-weight:500; letter-spacing:-1.5px; color:#fff;
  text-shadow:0 1px 26px rgba(0,0,0,.5)}
.home .hhero__t em{font-style:normal; color:#fff}
.home .hhero__lead{
  margin:28px 0 0; max-width:56ch;
  font-size:19.7px; line-height:1.5; font-weight:400; color:rgba(255,255,255,.93);
  text-shadow:0 1px 18px rgba(0,0,0,.55)}
.home .hhero__cta{margin:38px 0 0; gap:10px}

/* 스크롤 신호 — 100vh 히어로에는 «아래가 더 있다»는 표시가 있어야 한다 */
.home .hx-scroll{
  position:absolute; left:var(--pad); bottom:calc(var(--s1) + 148px); z-index:3;
  display:flex; align-items:center; gap:14px; pointer-events:none}
.home .hx-scroll span{
  font-size:12px; font-weight:600; letter-spacing:.22em; color:rgba(255,255,255,.74)}
.home .hx-scroll i{
  display:block; width:64px; height:1px; background:rgba(255,255,255,.42);
  overflow:hidden; position:relative}
.home .hx-scroll i::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:22px; background:#fff;
  animation:hxScroll 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes hxScroll{0%{transform:translateX(-24px)}60%,100%{transform:translateX(64px)}}

/* 하단 지표 띠 — co7 은 «카드 4칸», 우리는 «윗선만 있는 4칸»(HDC 문법) */
.home .hhero--video .hhero__stats{
  margin-top:auto; padding:0 var(--pad); max-width:none; position:relative; z-index:2}
.home .hhero__stats dl{
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  background:none; border:0; border-top:1px solid rgba(255,255,255,.36)}
.home .hhero__stats div{background:none; padding:22px 26px 0 0; border-top:0}
.home .hhero__stats div+div{border-left:1px solid rgba(255,255,255,.22); padding-left:26px}
.home .hhero__stats dt{font-size:15px; color:rgba(255,255,255,.84); margin-bottom:10px}
.home .hhero__stats b{font-size:33px; font-weight:600; letter-spacing:-1px; color:#fff}
.home .hhero__stats span{font-size:15px; color:rgba(255,255,255,.9)}
.home .hvbar{padding:20px var(--pad) 40px; max-width:none; position:relative; z-index:2}
.home .hvtoggle.on{border:1px solid rgba(255,255,255,.55); background:rgba(0,0,0,.55);
  height:36px; font-size:13px; font-weight:600}

/* ================================================================ 섹션 리듬
   ★100vh 강제는 «히어로 · 전폭 스테이지 · 핀» 에만 남긴다.
     글이 든 섹션까지 100vh 로 잡으면 340~400px 짜리 빈 판이 생긴다
     (그게 앞판의 병이었다 — 캡처 co1now_1 에서 실측했다). */
.home .hx-sec{padding:var(--s3) var(--pad); background:#fff}
.home .hx-sec--panel{background:var(--panel)}
.home .hx-sec--full{padding:var(--s3) var(--pad)}
/* 선언 화면만 «조금» 넉넉하게 — 다만 100vh 는 아니다 */
.home .hx-sec--stmt{
  text-align:center; padding:var(--s4) var(--pad);
  border-bottom:1px solid var(--line)}

.home .hx-hd{max-width:none; margin:0 0 var(--s1)}
.home .hx-hd h2{margin:22px 0 0; font-size:39.5px; line-height:1.4; font-weight:600; letter-spacing:-.5px}
.home .hx-hd .sec__lead{
  margin:24px 0 0; max-width:62ch; font-size:19.7px; line-height:1.5;
  font-weight:400; color:var(--ink-2)}
/* 선언 화면 = 가운데 정렬(HDC 「기획부터 운영까지」) */
.home .hx-hd--c{margin:0; display:flex; flex-direction:column; align-items:center; text-align:center}
.home .hx-hd--c h2{font-size:48px; line-height:1.32; letter-spacing:-1.2px}
.home .hx-hd--c .sec__lead{margin-left:auto; margin-right:auto; margin-top:30px}
.home .hx-sec--cards .hx-hd{margin-bottom:var(--s1)}

/* 전폭 사진 스테이지 — 화면 꽉 찬 사진 + 아래쪽 짧은 문장 */
.home .hx-stage{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; background:#000}
.home .hx-stage__img{position:absolute; inset:0; margin:0}
.home .hx-stage__img img{width:100%; height:100%; object-fit:cover}
.home .hx-stage__img::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,var(--ov,.34))}
/* 글이 앉는 아래쪽만 «같은 검정»을 한 겹 더 눌러 밝은 사진에서도 4.5:1 아래로 안 떨어지게 한다.
   색이 든 그라데이션이 아니라 검정 한 색의 농도만 바뀌므로 규칙 위반이 아니다. */
.home .hx-stage__in{
  position:relative; width:100%; padding:var(--s3) var(--pad); color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.64) 0%,rgba(0,0,0,.42) 48%,rgba(0,0,0,0) 100%)}
.home .hx-stage h2{
  margin:22px 0 0; font-size:39.5px; line-height:1.4; font-weight:600;
  letter-spacing:-.5px; color:#fff}
.home .hx-stage__lead{
  margin:24px 0 0; max-width:58ch; font-size:19.7px; line-height:1.5;
  color:rgba(255,255,255,.93)}
.home .hx-stage__b{margin:34px 0 0}

/* 좌측 큰 제목 + 우측 본문 2단 — HDC 는 제목 x49 / 본문 x799 */
.home .hx-2col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--s2)}
.home .hx-2col__l h2{margin:22px 0 0; font-size:39.5px; line-height:1.4; letter-spacing:-.5px}
.home .hx-2col__r{border-top:1px solid var(--line); padding-top:34px}
.home .hx-2col__r p{margin:0 0 1.5em; font-size:16px; line-height:1.7; color:var(--ink)}
.home .hx-2col__r p:last-child{margin-bottom:0}

/* 타일 — 폭 348px 급 · gap 24 · radius 0 */
.home .hx-cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s1) 24px; margin:0}
.home .hx-card{background:transparent; border:0; padding:0; box-shadow:none}
.home .hx-card:hover{border:0; transform:none; box-shadow:none}
.home .hx-card__im{margin:0 0 22px; overflow:hidden; aspect-ratio:4/3; background:#EFEFEF}
.home .hx-card__im img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,0,0,1)}
.home .hx-card:hover .hx-card__im img{transform:scale(1.045)}
.home .hx-card .card__ico{
  width:auto; height:auto; background:none; color:var(--acc); margin:0 0 12px; display:block}
.home .hx-card .ico{width:24px; height:24px}
.home .hx-card h3{margin:0 0 12px; font-size:26.3px; line-height:1.4; font-weight:600}
.home .hx-card p{margin:0; font-size:16px; line-height:1.7; color:var(--ink-2)}
.home .card__link{
  margin-top:20px; font-size:14px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:3px; letter-spacing:-.5px}
.home .card__link:hover{color:var(--acc); border-bottom-color:var(--acc)}

/* 실적 지표 */
.home .hx-stats{
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; background:none; border:0}
.home .hx-stats .stats__i{background:transparent; padding:24px 0 0; border-top:1px solid var(--ink)}
.home .hx-stats dt{font-size:15px; color:var(--ink-2)}
.home .hx-stats dd{margin:14px 0 14px}
.home .hx-stats b{font-size:44px; font-weight:600; line-height:1.1; letter-spacing:-1.4px; color:var(--ink)}
.home .hx-stats span{font-size:16px; color:var(--ink-2)}
.home .hx-stats p{margin:0; font-size:16px; line-height:1.7; color:var(--ink-2)}
.home .note{margin:var(--s1) 0 0; font-size:15px; color:var(--ink-3)}

/* 제품 카드 */
.home .hx-icards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.home .hx-icard{border:0; background:transparent; overflow:visible}
.home .hx-icard:hover{border:0; box-shadow:none}
.home .hx-icard figure{overflow:hidden; aspect-ratio:4/3; background:#EFEFEF}
.home .hx-icard img{width:100%; height:100%; aspect-ratio:auto; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,0,0,1)}
.home .hx-icard:hover img{transform:scale(1.045)}
.home .hx-icard .icard__b{padding:22px 0 0}
.home .hx-icard h3{margin:0 0 12px; font-size:26.3px; line-height:1.4; font-weight:600}
.home .hx-icard p{margin:0; font-size:16px; line-height:1.7; color:var(--ink-2)}

/* 공정 갤러리 — 600px 넘는 사진 4장 */
.home .hx-gal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s1) 24px}
.home .hx-gal figure{margin:0}
.home .hx-gal img{width:100%; aspect-ratio:3/2; object-fit:cover; background:#EFEFEF}
.home .hx-gal figcaption{margin-top:20px}
.home .hx-gal h3{margin:0 0 10px; font-size:21px; line-height:1.4; font-weight:600}
.home .hx-gal p{margin:0; font-size:16px; line-height:1.7; color:var(--ink-2)}

/* 사람 3열 — 갤러리와 같은 문법, 열만 3개 */
.home .hx-gal--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.home .hx-gal--3 img{aspect-ratio:16/9}
@media (max-width:900px){.home .hx-gal--3{grid-template-columns:minmax(0,1fr)}}

/* 뉴스 카드 — 사진 + 제목 + 날짜 · gap 24 · radius 0 */
.home .hx-news{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; border-top:0}
.home .hx-news li{display:block; grid-template-columns:none; gap:0; padding:0; border-bottom:0}
.home .hx-news figure{margin:0 0 20px; overflow:hidden; aspect-ratio:442/260; background:#EFEFEF}
.home .hx-news figure img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,0,0,1)}
.home .hx-news li:hover figure img{transform:scale(1.045)}
.home .hx-news .nlist__c{
  display:inline-block; padding:4px 10px; border:1px solid var(--ink);
  color:var(--ink); font-size:13px; font-weight:600}
.home .hx-news h3{margin:14px 0 10px; font-size:23px; line-height:1.4; font-weight:600}
.home .hx-news p{margin:0; font-size:16px; line-height:1.7; color:var(--ink-2)}
.home .hx-news time{
  display:block; margin-top:16px; text-align:left; font-size:15px; color:var(--ink-3)}

/* ------------------------------------------------------------------ 핀 섹션
   배경 사진이 «고정»된 채 카드가 지나간다.
   ★카드는 «처음부터 불투명»하다. 진행률 p 로 fade 시키면 빈 배경 패널이 지나가고,
     불투명도 퇴장은 규칙상 금지다. 그래서 등장/퇴장 자체를 안 만든다 —
     실패할 수 있는 타이밍 로직이 없으니 «빈 화면»이 나올 경우의 수가 0 이다.
   ★2026-08-18 : 간격이 너무 넓어 «한 화면에 카드 한 장 + 빈 사진» 이 되어 있었다.
     86vh/32vh → 34vh/13vh 로 조인다. 이제 한 화면에 3~4장이 함께 지나간다. */
.home .hx-pin{position:relative; background:#000}
.home .hx-pin__bg{position:sticky; top:0; height:100vh; overflow:hidden}
.home .hx-pin__bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.home .hx-pin__bg::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.52)}
/* 제목은 «고정된 배경 안»에 둔다 — 카드가 지나가는 동안 제목이 화면에 남는다 */
.home .hx-pin__hd{
  position:relative; z-index:1; max-width:46vw; color:#fff;
  padding:calc(71px + var(--s3)) 0 0 var(--pad)}
.home .hx-pin__hd h2{
  margin:22px 0 0; font-size:39.5px; line-height:1.4; font-weight:600;
  letter-spacing:-.5px; color:#fff}
.home .hx-pin__flow{
  position:relative; z-index:2; margin-top:-100vh; padding:34vh var(--pad) 12vh}
.home .hx-pin__cards{display:grid; gap:0; justify-items:end; margin:0; padding:0}
.home .hx-pin__cards li{
  width:min(560px,46vw); margin:0 0 13vh; padding:30px 34px 32px 58px;
  background:#fff; color:var(--ink);
  font-size:19.7px; line-height:1.5; font-weight:600; letter-spacing:-.5px}
.home .hx-pin__cards li:last-child{margin-bottom:0}
.home .hx-pin__cards li::before{
  left:34px; top:1.05em; border-left:2px solid var(--acc); border-bottom:2px solid var(--acc)}

/* ------------------------------------------------------------------ 하단 CTA
   ★100vh 를 채우던 것을 걷었다. 짧은 문장 하나에 화면 한 장은 «빈 곳»이 된다. */
.home .cta{background:#000}
.home .cta__bg img{opacity:1; width:100%; height:100%; object-fit:cover}
.home .cta__bg::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.56)}
.home .cta__in{
  position:relative; min-height:auto; max-width:none; text-align:left;
  padding:var(--s4) var(--pad); display:flex; flex-direction:column; justify-content:center}
.home .cta h2{margin:22px 0 0; font-size:39.5px; line-height:1.4; font-weight:600;
  letter-spacing:-.5px; color:#fff}
.home .cta p{margin:26px 0 0; max-width:60ch; font-size:19.7px; line-height:1.5;
  color:rgba(255,255,255,.93)}
.home .cta__b{margin:38px 0 0; justify-content:flex-start; gap:10px}

/* ------------------------------------------------------------------ 푸터
   구조·링크는 그대로. 본문 16px 지배 규칙에 맞춰 글자만 키웠다. */
.home .ft{background:#111; padding:var(--s2) var(--pad) 56px}
.home .ft>.wrap{max-width:none}
.home .ft__top{grid-template-columns:300px minmax(0,1fr); gap:var(--s2); padding-bottom:var(--s1)}
.home .ft__brand .hd__mark{
  width:40px; height:40px; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.6); font-size:14px}
.home .ft__slogan{margin:20px 0 0; font-size:16px; line-height:1.8; color:rgba(255,255,255,.66)}
.home .ft__cols{grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px}
.home .ft__c h2{margin:0 0 18px; font-size:16px; font-weight:600; color:#fff; letter-spacing:-.5px}
.home .ft__c li{padding:4px 0}
.home .ft__c a{font-size:16px; line-height:1.7; color:rgba(255,255,255,.66); letter-spacing:-.5px}
.home .ft__c a:hover{color:#fff}
.home .ft__legal{padding-top:var(--s1)}
.home .ft__links{font-size:15px}
.home .ft__addr{font-size:15px; line-height:1.9; color:rgba(255,255,255,.56)}
.home .ft__copy{font-size:15px; color:rgba(255,255,255,.56)}
.home .ft__sample{font-size:15px; color:#fff; font-weight:600}
.home .totop{right:var(--pad); bottom:30px; width:46px; height:46px;
  background:#fff; color:#212121; border:1px solid #212121}
.home .totop:hover{background:#212121; color:#fff}

/* ------------------------------------------------------------------ 반응형
   ★모바일 그리드는 반드시 minmax(0,1fr). 1fr 이면 min-content 에 밀려 본문이
     잘리는데 body 의 overflow-x:hidden 이 그걸 감춘다(검사는 통과하고 화면만 깨진다). */
@media (max-width:1280px){
  .home .gnb__i>a{padding:0 14px; font-size:14px}
  .home .hd__cta{margin-left:12px}
  .home .hhero__stats b{font-size:28px}
}
@media (max-width:1100px){
  /* ★모바일 헤더는 «항상 흰 바탕»으로 고정한다.
     좁은 화면에서는 사진이 크게 잘려 어느 부분이 올라올지 예측이 안 된다
     → 투명 헤더 + 흰 글자를 유지하면 밝은 구간에서 글자가 사라진다. */
  .home .hd{background:#fff !important; box-shadow:0 1px 0 var(--line) !important;
    animation:none !important}
  .home .hd__logo,.home .gnb__i>a,.home .hd__burger{
    animation:none !important; color:#212121 !important}
  .home .hd__cta{display:none}
  .home .hd__burger{display:block; margin-left:auto}
}
@media (max-width:1024px){
  body.home{--pad:5vw; --s1:5vw; --s2:7vw; --s3:9vw; --s4:11vw}
  .home .hhero--video .hhero__in{padding-top:132px}
  .home .hhero__t{font-size:40px; line-height:1.28; letter-spacing:-1px}
  .home .hhero__lead{font-size:18px}
  .home .hhero__stats dl{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:0}
  .home .hhero__stats div,.home .hhero__stats div+div{
    padding:18px 18px 18px 0; border-left:0; border-top:1px solid rgba(255,255,255,.22)}
  .home .hx-scroll{display:none}
  .home .hx-hd h2,.home .hx-stage h2,.home .hx-2col__l h2,
  .home .hx-pin__hd h2,.home .cta h2{font-size:31px}
  .home .hx-hd--c h2{font-size:34px}
  .home .hx-hd .sec__lead,.home .hx-stage__lead,.home .cta p{font-size:18px}
  .home .hx-2col{grid-template-columns:minmax(0,1fr); gap:28px}
  .home .hx-cards,.home .hx-icards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .hx-news{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .hx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .hx-stats b{font-size:36px}
  .home .hx-card h3,.home .hx-icard h3{font-size:23px}
  .home .hx-stage{min-height:74vh}
  .home .ft__top{grid-template-columns:minmax(0,1fr); gap:32px}
  .home .ft__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 핀은 태블릿부터 푼다 — 카드 폭이 커지면 고정된 제목을 덮는다 */
  .home .hx-pin__bg{position:static; height:auto; background:#0A0A0A}
  .home .hx-pin__bg img{position:static; height:52vh}
  .home .hx-pin__bg::after{display:none}
  .home .hx-pin__flow{margin-top:0; padding:var(--s1) var(--pad) var(--s3)}
  .home .hx-pin__hd{padding:var(--s3) var(--pad) 0; max-width:none}
  .home .hx-pin__cards li{width:100%; margin-bottom:16px}
}
@media (max-width:720px){
  body.home{--pad:6vw; --s1:7vw; --s2:10vw; --s3:12vw; --s4:14vw}
  .home .hd__in{height:62px; min-height:62px}
  .home .gnb__sub{top:62px}
  .home .mnav{max-height:calc(100vh - 62px)}
  .home .hhero--video{min-height:auto}
  .home .hhero--video .hhero__in{padding:104px var(--pad) 0}
  .home .hhero__t{font-size:32px; letter-spacing:-.8px}
  .home .hhero__lead{font-size:17px}
  .home .hhero__cta{gap:8px}
  .home .hhero--video .hhero__stats{margin-top:var(--s2)}
  .home .hhero__stats dl{grid-template-columns:minmax(0,1fr); gap:0}
  .home .hhero__stats div,.home .hhero__stats div+div{padding:14px 0}
  .home .hhero__stats b{font-size:26px}
  .home .hx-hd h2,.home .hx-stage h2,.home .hx-2col__l h2,
  .home .hx-pin__hd h2,.home .cta h2{font-size:26px}
  .home .hx-hd--c h2{font-size:28px}
  .home .hx-hd .sec__lead,.home .hx-stage__lead,.home .cta p{font-size:17px}
  .home .hx-cards,.home .hx-icards,.home .hx-news,
  .home .hx-stats,.home .hx-gal{grid-template-columns:minmax(0,1fr)}
  .home .hx-card h3,.home .hx-icard h3{font-size:21px}
  .home .hx-news h3{font-size:20px}
  .home .hx-stats b{font-size:32px}
  .home .ft__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .hx-pin__bg img{height:38vh}
  .home .hx-pin__cards{justify-items:stretch}
  .home .hx-pin__cards li{width:100%; margin-bottom:14px; padding:26px 26px 26px 50px; font-size:17px}
  .home .hx-pin__cards li::before{left:26px}
  .home .hx-stage{min-height:62vh}
}
@media (max-width:390px){
  .home .hhero__t{font-size:28px}
  .home .hx-hd h2,.home .hx-stage h2,.home .hx-2col__l h2,
  .home .hx-pin__hd h2,.home .cta h2{font-size:23px}
  .home .hx-hd--c h2{font-size:25px}
  .home .btn{padding:0 18px; font-size:13px}
  .home .hd__nm b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .home .hx-card__im img,.home .hx-icard img,.home .hx-news figure img{transition:none}
  .home .hx-scroll i::after{animation:none; transform:translateX(0)}
}