/* ============================================================
   첫 화면 연출 (2.5D)  — 2026-09-09
   ------------------------------------------------------------
   ★ 왜 CSS 만으로 하나
     배너가 «완성된 그림 한 장»이라 잘라낸 조각(투명 PNG)이 없다.
     떠다닐 부품이 없으므로 연출은 배너 «판 자체»에 건다 — 기울기·테두리 빛·
     광택·그림자·느린 뜸. 새 그림을 기다리지 않아도 오늘 켜진다.
   ⚠ 배너 «뒤»에는 아무것도 깔지 않는다. 그림이 이 칸을 덮는 불투명한 판이라
     뒤에 깐 것은 배너 밖(= 머리글·메뉴)에서만 보였다(2026-09-16, 아래 참조).

   ★ 왜 GSAP 을 안 쓰나
     빌드 도구가 없고, 첫 화면 맨 위에 외부 스크립트를 하나 더 얹으면
     그만큼 늦게 그려진다. 스크롤 연출은 브라우저가 이미 할 줄 안다
     (animation-timeline). 모르는 브라우저는 IntersectionObserver 가
     .is-in 을 붙여 같은 그림을 만든다 — 어느 쪽이든 화면은 완성된다.

   ⚠ 움직이는 것은 transform · opacity · filter 뿐이다.
     width/height/top/left 를 건드리면 매 프레임 레이아웃을 다시 잰다.
   ⚠ 손가락 화면(pointer:coarse)과 «움직임 줄이기»에서는 전부 꺼진다.
     맨 아래 두 블록이 그 자리다 — 지우지 말 것.
   ============================================================ */

/* ── 깊이 층 ──────────────────────────────────────────────
     2 중간 장식 · 3 주인공(배너) · 4 글자 · 5 앞쪽 티끌
     ⚠ 0·1(먼 배경·빛무리)은 2026-09-16 에 걷어냈다 — 배너 뒤라 안 보였다. */
.cine{position:relative;isolation:isolate;
  /* 🔴 가로·세로 «둘 다» 자른다 (2026-09-16).
       - 가로: 장식이 밖으로 나가면 그만큼 «페이지 전체»가 옆으로 스크롤된다.
         모바일에서 390px 화면이 418px 가 됐다(2026-09-09 확인).
       - 세로: 안 자르면 장식이 머리글·메뉴 위로 번져 올라간다. 연출은 배너의 것이지
         사이트 상단의 것이 아니다 — 실제로 100px 번져 올라갔다(2026-09-16).
     ⚠ hidden 이 아니라 clip 이다. hidden 은 이 칸을 스크롤 상자로 만든다.
   🔴 자르는 선을 «14px 바깥»에 둔다 (2026-09-16, 스크롤하며 실측하고 고침).
     배너는 스크롤에 따라 최대 1.5% 커지고 마우스에 따라 1.6도 기운다. 즉 제 칸보다
     한쪽에 5~7px 씩 커진다. 자르는 선이 칸에 딱 붙어 있으면 그 5~7px 이 잘려 나가는데,
     거기 «테두리 1px 과 둥근 모서리»가 들어 있다. 그래서 맨 위에서는 테두리가 아예
     안 보이고, 스크롤을 내려 기울기가 바뀌면 아래쪽만 잠깐 보였다 — 실제로 Playwright
     로 재 보니 배너 733px, 칸 732px 로 배너가 «더 컸다».
     14px 은 그 커지는 몫(최대 ~7px)을 덮고도 남는 값이다.
   ⚠ 그래도 장식이 머리글까지 올라가지는 못한다. 예전에 번지던 빛무리는 100px 이었다. */
  overflow:clip;overflow-clip-margin:14px;}
.cine>.layer{position:absolute;inset:0;pointer-events:none;z-index:0;}
.cine>.layer.d2{z-index:2;}
.cine>.d3{position:relative;z-index:3;}
.cine>.layer.d5{z-index:5;}

/* 🔴 «먼 격자(d0) · 빛무리(d1)» 는 걷어냈다 (2026-09-16) ─────────
     둘 다 배너 뒤(z-index 0·1)에 깔렸는데, 배너 그림이 이 칸을 통째로 덮는
     불투명한 판이다. 그래서 둘이 보이는 자리는 «배너 밖» 밖에 없었고,
     그 밖이 곧 머리글·메뉴였다 — 파란 안개가 위로 100px 번졌다.
     켠 판과 끈 판을 헤드리스 크로미움으로 찍어 견주니, 배너 위에서는 차이가 0 이고
     메뉴(y=99~180)와 다음 구역에서만 차이가 났다. 효과가 «사이트 상단에만» 있었다.
   ★ 배너 뒤에 다시 무언가 깔고 싶으면, 배너에 투명한 구석을 만들거나 연출을
     배너 «위»(z-index 4 이상)로 올릴 것. 뒤는 영영 안 보인다. */


/* ── 깊이 3 — 주인공. 배너를 «떠 있는 판»으로 다룬다.
      ★ 그림 자체는 못 자르므로, 액자째로 아주 조금 기울였다가 편다.
        올라오면서 정면을 향하는 느낌이 난다.
      ⚠ 6~14초짜리 느린 뜸(float)은 유지한다 — 완전히 멈춘 그림은 죽어 보인다. */
.cine-stage{perspective:1400px;perspective-origin:50% 30%;}
.heroimg{
  transform-style:preserve-3d;
  box-shadow:0 18px 50px -18px rgba(37,99,235,.34),0 3px 14px rgba(0,0,0,.05);
  transition:box-shadow .5s ease;
}
.heroimg img{animation:cine-float 11s ease-in-out infinite;will-change:transform;}
/* 🔴 «위로 6px 뜨는» 뜸이었다가 «아주 살짝 커지는» 뜸으로 바꿨다 (2026-09-16).
     그림은 액자 높이에 딱 맞춰져 있다(height:100% + object-fit:cover). 위로 6px 들면
     그만큼 액자 «바닥이 비친다» — 흰 띠가 배너 밑에 6px 생겼다가 사라졌다 한다.
     11초에 한 번 도니까, 스크롤했다 돌아올 때마다 「또 흰 여백이 남아」 보였다.
     찍어서 재 보니 바닥 틈이 최대 6.1px 였다.
   ★ 커지는 쪽은 틈이 안 생긴다 — object-fit:cover 가 이미 자르고 있어서 커진 만큼
     가장자리를 조금 더 자를 뿐이다. 1.2% 면 1440px 화면에서 가로 8.8px·세로 6.7px,
     한쪽당 3~4px 이다. 움직임은 그대로 보이고 흰 틈은 영영 안 생긴다.
   ⚠ 「숨 쉬는 정도」를 넘기지 말 것. 1.2% 가 천장이다 — 더 키우면 601~1100px 구간에서
     아래 글줄(REAL GROWTH…)을 갉아먹는다. 거기 여유가 30px 남짓밖에 없다. */
@keyframes cine-float{
  0%,100%{transform:scale(1);}
  50%    {transform:scale(1.012);}
}

/* 광택 한 줄 — 처음 한 번만 지나간다. 유리 위를 빛이 스치는 것. */
.heroimg::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translate3d(-120%,0,0);
  animation:cine-sheen 1.5s cubic-bezier(.22,1,.36,1) .5s both;
}
@keyframes cine-sheen{to{transform:translate3d(120%,0,0);}}

/* ── 깊이 5 — 앞쪽 티끌 세 알. 있는 듯 없는 듯한 것이 맞다. */
.cine .d5 i{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:rgba(37,99,235,.5);box-shadow:0 0 10px rgba(37,99,235,.6);
  animation:cine-mote 13s linear infinite;
}
.cine .d5 i:nth-child(1){left:12%;top:70%;animation-delay:0s;}
.cine .d5 i:nth-child(2){left:63%;top:22%;animation-delay:-4.5s;width:4px;height:4px;}
.cine .d5 i:nth-child(3){left:86%;top:58%;animation-delay:-9s;width:6px;height:6px;}
@keyframes cine-mote{
  0%  {transform:translate3d(0,10px,0);opacity:0;}
  15% {opacity:.85;}
  85% {opacity:.85;}
  100%{transform:translate3d(14px,-70px,0);opacity:0;}
}

/* ── 진입 연출 ────────────────────────────────────────────
     ★ 기본형: 화면에 들어오면 «아래에서 올라오며 또렷해진다».
       .cine-up 을 붙인 것만 움직인다. 붙이지 않은 것은 그대로다.
     ⚠ 두 갈래로 같은 그림을 만든다 —
       ① animation-timeline 을 아는 브라우저: 스크롤에 맞물려 저절로
       ② 모르는 브라우저: JS 가 .is-in 을 붙이면 그때 한 번 */
.cine-up{opacity:0;transform:translate3d(0,26px,0);}
.cine-up.is-in{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1);}

/* 차례로 들어오는 것 — 목록·카드. 한꺼번에 뜨면 아무 일도 안 일어난 것 같다. */
.cine-stagger>*{opacity:0;transform:translate3d(0,18px,0);}
.cine-stagger.is-in>*{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);}
.cine-stagger.is-in>*:nth-child(1){transition-delay:.04s}
.cine-stagger.is-in>*:nth-child(2){transition-delay:.09s}
.cine-stagger.is-in>*:nth-child(3){transition-delay:.14s}
.cine-stagger.is-in>*:nth-child(4){transition-delay:.19s}
.cine-stagger.is-in>*:nth-child(5){transition-delay:.24s}
.cine-stagger.is-in>*:nth-child(6){transition-delay:.29s}
.cine-stagger.is-in>*:nth-child(7){transition-delay:.34s}
.cine-stagger.is-in>*:nth-child(8){transition-delay:.39s}

/* 제목이 «위에서 내려오며 열린다» — 커튼이 걷히는 쪽 */
.cine-birth{clip-path:inset(0 0 100% 0);opacity:.001;}
.cine-birth.is-in{clip-path:inset(0 0 0 0);opacity:1;
  transition:clip-path .7s cubic-bezier(.22,1,.36,1),opacity .35s ease;}

/* ── 브라우저가 스크롤 타임라인을 알면 그쪽이 이긴다 ──────────
     ⚠ @supports 안에서만 켠다. 모르는 브라우저에 animation-timeline 을
       그냥 적으면 애니메이션이 즉시 끝난 상태로 굳어 화면이 빈다. */
@supports (animation-timeline:view()){
  .cine-up,.cine-stagger>*,.cine-birth{
    animation:cine-enter both;
    animation-timeline:view();
    animation-range:entry 8% cover 26%;
  }
  .cine-birth{animation-name:cine-enter-birth;}
  .cine-stagger>*:nth-child(2){animation-range:entry 4% cover 26%;}
  .cine-stagger>*:nth-child(3){animation-range:entry 2% cover 27%;}
  .cine-stagger>*:nth-child(4){animation-range:entry 0% cover 28%;}
  @keyframes cine-enter{
    from{opacity:0;transform:translate3d(0,26px,0);}
    to  {opacity:1;transform:none;}
  }
  @keyframes cine-enter-birth{
    from{opacity:0;clip-path:inset(0 0 100% 0);}
    to  {opacity:1;clip-path:inset(0 0 0 0);}
  }

  /* 배너 — 스크롤을 내리면 살짝 커지며 뒤로 물러난다.
     ⚠ 사라지게 하지 않는다. 첫 화면을 지우면 되돌아온 손님이 길을 잃는다. */
  .heroimg{
    animation:cine-hero both;
    animation-timeline:view();
    animation-range:cover 12% cover 92%;
  }
  /* ⚠ keyframes 안에서도 마우스 값을 섞는다 (2026-09-16).
       animation 이 도는 동안에는 .heroimg 의 기본 transform 이 «무시»되므로,
       여기 안 적으면 스크롤 타임라인을 아는 브라우저에서만 기울기가 죽는다.
     ⚠ scale 은 1.015 까지다. 이건 그림을 자르지 않는다 — 액자 «전체»가
       커지는 것이라 안쪽이 잘릴 일이 없다. */
  @keyframes cine-hero{
    from{transform:perspective(1400px)
         rotateX(calc(3.2deg + var(--py)*-1.2deg)) rotateY(calc(var(--px)*1.6deg)) scale(.985);}
    40% {transform:perspective(1400px)
         rotateX(calc(0deg + var(--py)*-1.2deg))   rotateY(calc(var(--px)*1.6deg)) scale(1);}
    to  {transform:perspective(1400px)
         rotateX(calc(-1.4deg + var(--py)*-1.2deg)) rotateY(calc(var(--px)*1.6deg)) scale(1.015);opacity:.92;}
  }
}

/* ── 숫자 세기 — 「11곳 · 47종」이 0 에서 올라간다 */
.cine-num{font-variant-numeric:tabular-nums;}

/* ============================================================
   2026-09-16 — 「점 세 알로 뭐 하냐」 해서 판을 키웠다
   ------------------------------------------------------------
   ★ 여전히 CSS 다. 외부 라이브러리(GSAP 등)를 안 쓴다 —
     첫 화면 맨 위에 스크립트를 얹으면 그만큼 늦게 그려진다(위 머리 주석).
   ★ 늘어난 것 넷
     ① 액자째 기울인다 — 그림은 «건드리지 않는다». 확대하면 가장자리 글이 잘린다
     ② 마우스를 따라 층이 어긋난다 — 깊이마다 다른 배수. 이것이 2.5D 의 핵심이다
     ③ 테두리 빛이 마우스를 따라 번진다
        (같이 넣었던 빛무리·격자는 배너 뒤라 안 보여 그날 다시 걷어냈다)
     ④ 광택이 한 번이 아니라 9초마다 지나간다
   ⚠ 겹쳐 쓰는 transform 은 «층을 나눠» 준다. 같은 원소에 두 개를 얹으면
     하나가 다른 하나를 지운다 —
       .heroimg          → 스크롤 타임라인 (기존)
       .heroimg picture  → 마우스 기울기   (새로 추가)
       .heroimg img      → 느린 뜸(float)  (기존)
   ============================================================ */

/* 마우스 자리 — cine.js 가 -1 ~ 1 로 넣는다. 없으면 0 이라 아무 일도 안 난다. */
.cine{--px:0;--py:0;}

/* ── 깊이 2·3 — 배너를 «유리판 한 장»으로 다룬다 ──────────
      🔴 왜 떠다니는 조각을 «안» 붙였나 (2026-09-16, 한 번 붙였다 뺐다)
        유리 타일 여섯을 배너 둘레에 띄워 봤다. 두 가지가 동시에 났다 —
        ① 배너가 흰 바탕이라 흰 유리가 «안 보인다»
        ② 보이는 자리에 놓으면 제목과 휴대폰 위에 얹혀 «지저분해진다».
        배너는 이미 다 그려진 포스터다. 위에 물건을 더 얹는 것은 연출이 아니라 잡동사니다.

      ★ 그래서 «판 자체»를 물건처럼 다룬다. 셋이 함께 돈다.
        🔴 그림 «안»은 손대지 않는다. 확대해서 시차를 주려다 두 번 다 아래 글자를
           잘라 먹었다. 이 배너는 가장자리까지 글이 있다.
        ② 기울기 — 액자째 마우스 쪽으로 1.6도 안쪽에서 돌아본다
        ③ 테두리 빛 — 마우스 자리에서 흰 빛이 번진다. 유리 모서리에 닿는 빛이다
        ④ 그림자 — 기울인 «반대쪽»으로 늘어난다. 안 그러면 떠 있는 것처럼 안 보인다
      ⚠ 액자(.heroimg)에는 overflow:hidden 이 있다(home.css). 그래서 안쪽을
        조금이라도 키우면 그만큼 «잘린다». 키우지 않는다. */

/* ③ 테두리 빛 — 마우스를 따라 번진다 */
.heroimg::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(38% 46% at calc(50% + var(--px)*50%) calc(50% + var(--py)*50%),
             rgba(255,255,255,.34),transparent 62%);
  opacity:0;transition:opacity .45s ease;
}
.cine:hover .heroimg::before{opacity:1;}

/* ② 기울기 + ④ 그림자 — 액자째 돌고, 그림자는 반대쪽으로 늘어난다 */
.heroimg{
  transform:perspective(1400px)
            rotateY(calc(var(--px)*1.6deg)) rotateX(calc(var(--py)*-1.2deg));
  box-shadow:
    calc(var(--px)*-16px) calc(18px + var(--py)*-10px) 50px -18px rgba(37,99,235,.42),
    0 3px 14px rgba(0,0,0,.05);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;
}

/* ── 깊이 3 — 마우스를 따라 배너가 «살짝» 돌아본다.
      ⚠ 각도를 2도 넘기지 않는다. 넘으면 그림이 찌그러져 보인다. */
/* 🔴 그림은 «절대» 확대하지 않는다 (2026-09-16, 두 번 틀리고 고쳤다)
     처음 6% → 배너 아래 글자가 잘렸다. 2.5% 로 줄였는데 그래도 잘렸다.
     이 배너는 가장자리까지 글이 있는 포스터이고, 화면에 따라 액자가 이미
     object-fit:cover 로 한 번 자르고 있다(home.css). 거기에 확대를 더하면
     자른 것을 또 자르는 셈이다.
   ★ 그래서 그림을 건드리지 않고 «액자째» 기울인다. 액자가 통째로 돌면
     안에서 잘릴 것이 없다 — 판 한 장이 돌아보는 것과 같다. */
/* 🔴 picture 에는 «아무 규칙도 주지 않는다». display:block 을 준 순간
     안쪽 img 의 height:100% 가 걸리면서(home.css) 그림이 통째로 확대돼
     아래 「REAL GROWTH…」 줄과 받침대가 잘렸다. 손대지 않는 것이 맞다. */

/* ── 광택을 되풀이한다 — 9초에 한 번 유리 위를 스친다 */
.heroimg::after{animation:cine-sheen-loop 9s cubic-bezier(.22,1,.36,1) .6s infinite;}
@keyframes cine-sheen-loop{
  0%  {transform:translate3d(-120%,0,0);}
  18% {transform:translate3d(120%,0,0);}
  100%{transform:translate3d(120%,0,0);}
}

/* ── 깊이 5 — 티끌을 여덟 알로 늘린다(cine.js 가 다섯을 더 만든다).
      ⚠ 자리와 크기는 여기서 준다. JS 는 «만들기»만 한다 — 모양은 CSS 몫이다. */
.cine .d5{transform:translate3d(calc(var(--px)*22px),calc(var(--py)*22px),0);
  transition:transform .5s cubic-bezier(.22,1,.36,1);}
.cine .d5 i:nth-child(4){left:28%;top:40%;animation-delay:-2s;width:3px;height:3px;}
.cine .d5 i:nth-child(5){left:74%;top:78%;animation-delay:-6.5s;width:5px;height:5px;}
.cine .d5 i:nth-child(6){left:44%;top:12%;animation-delay:-11s;width:4px;height:4px;}
.cine .d5 i:nth-child(7){left:92%;top:34%;animation-delay:-8s;width:3px;height:3px;}
.cine .d5 i:nth-child(8){left:6%;top:30%;animation-delay:-3.5s;width:4px;height:4px;}

/* ── 손가락 화면은 덜어낸다.
      ⚠ 보급형 안드로이드에서는 장식 하나가 곧 끊기는 스크롤이다. 티끌부터 끈다. */
@media (pointer:coarse){
  .cine .d5{display:none;}
  .heroimg img{animation:none;}
  /* 2026-09-16 에 늘린 것들도 함께 끈다. 손가락에는 마우스가 없어
     시차·기울기·테두리 빛이 «영영 0» 이다 — 계산만 시키고 얻는 것이 없다. */
  .heroimg::before{display:none;}
  .heroimg::after{animation:cine-sheen 1.5s cubic-bezier(.22,1,.36,1) .5s both;}
  .heroimg{transform:none;
    box-shadow:0 18px 50px -18px rgba(37,99,235,.34),0 3px 14px rgba(0,0,0,.05);}
}

/* ── 움직임 줄이기 — 여기만은 예외를 두지 않는다 ──────────── */
@media (prefers-reduced-motion:reduce){
  .cine .d5 i,.heroimg img,.heroimg::after{animation:none !important;}
  /* 2026-09-16 에 늘린 것 — 여기서도 예외를 두지 않는다. */
  .cine .d5{animation:none !important;}
  .heroimg::before{display:none !important;}
  .cine-up,.cine-stagger>*,.cine-birth{
    opacity:1 !important;transform:none !important;clip-path:none !important;
    animation:none !important;transition:none !important;
  }
  .heroimg{animation:none !important;transform:none !important;}
}

/* ── 배너 아래 «진짜» 단추와 숫자 ─────────────────────────
      🔴 그림 안에 그려진 단추는 눌리지 않는다. 배너 전체가 링크 하나라
        「무료체험」을 눌러도 주문 화면으로 갔다. 여기 있는 것이 진짜다.
      ⚠ 그림 «위»에 좌표로 얹지 않는다 — 넓은 화면은 가로 그림(1412×1059),
        좁은 화면은 정사각 그림(1000×750)이라 단추 자리가 서로 다르다.
        한쪽에 맞추면 다른 쪽이 어긋난다. */
.herocta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:14px;padding:16px 18px;
  border:1px solid var(--line,#efefef);border-radius:16px;background:#fff;
  box-shadow:0 3px 14px rgba(0,0,0,.04);
}
.herocta .hc-btns{display:flex;gap:10px;flex:1 1 320px;}
.herocta .hb-p,.herocta .hb-s{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 26px;border-radius:12px;
  font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,background .18s ease;
}
.herocta .hb-p{
  background:linear-gradient(135deg,var(--accent,#2563eb),#3b82f6);color:#fff;
  box-shadow:0 8px 20px -8px rgba(37,99,235,.6);
}
.herocta .hb-s{background:#fff;color:var(--ink,#222);border:1.5px solid #dfe5ee;}
.herocta .hb-p:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(37,99,235,.7);}
.herocta .hb-s:hover{transform:translateY(-2px);border-color:var(--accent,#2563eb);color:var(--accent-d,#1d4ed8);}

/* 숫자 두 칸 — 세로줄로 가른다 */
.herocta .hc-stat{display:flex;gap:0;list-style:none;margin:0;padding:0;}
.herocta .hc-stat li{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 20px;border-left:1px solid #eef1f6;
}
.herocta .hc-stat li:first-child{border-left:0;}
.herocta .hc-stat span{font-size:11.5px;font-weight:700;color:var(--gray,#757575);letter-spacing:-.01em;}
.herocta .hc-stat b{font-size:26px;font-weight:900;color:var(--accent-d,#1d4ed8);line-height:1.15;letter-spacing:-.03em;}
.herocta .hc-stat i{display:none;}

@media (max-width:900px){
  .herocta{margin-top:12px;padding:14px;gap:12px;}
  .herocta .hc-btns{flex:1 1 100%;}
  .herocta .hb-p,.herocta .hb-s{flex:1;padding:0 12px;height:48px;font-size:15px;}
  .herocta .hc-stat{width:100%;}
  .herocta .hc-stat li{flex:1;padding:0 14px;}
}

/* 눌렀을 때 튀는 것은 «움직임 줄이기»에서도 끈다 */
@media (prefers-reduced-motion:reduce){
  .herocta .hb-p:hover,.herocta .hb-s:hover{transform:none;}
}