/* ── home-fx — 홈 전용 동작 ────────────────────────────────────
   규칙: 모션은 transform 과 opacity 로만 만든다. width·height·position·
   margin·padding 으로 움직이지 않는다 — 그러면 원래 크기와 자리가 어긋난다.
   여기서 크기를 정하는 곳은 딱 하나, 캐러셀 카드의 width 인데
   그것도 원래 격자(.grid--3/--4)와 똑같은 식으로 계산해 값이 같다.

   숨기거나 자르는 규칙은 JS 가 준비를 마친 뒤에만 켜진다(.car.is-on).
   JS 가 없거나 모션 최소화면 전부 평소 모습 그대로다. */

/* ── 1. 스크롤 유도 ──────────────────────────────────────────
   상자에는 히어로 패럴랙스가 인라인 transform 을 쓰므로 안쪽만 움직인다. */
@keyframes fx-cue{
  0%  {transform:translateY(-3px);opacity:.3}
  55% {transform:translateY(6px); opacity:1}
  100%{transform:translateY(-3px);opacity:.3}
}
@keyframes fx-cue-label{0%,100%{opacity:.55}50%{opacity:1}}
.js3d .main-sec_1__scroll img{animation:fx-cue 2.1s cubic-bezier(.45,0,.55,1) infinite}
.js3d .main-sec_1__scroll span{animation:fx-cue-label 2.1s cubic-bezier(.45,0,.55,1) infinite}

/* ── 2. KOWON Signature — 수술 부위를 따라 그려지는 핑크 라인 ──
   국문 원본과 같은 방식이다: 코 그림 위에 같은 곡선을 네 겹으로 겹쳐
   (번짐 → 핑크 → 흰 심) stroke-dashoffset 을 1에서 0으로 줄여 그려 나간다.
   pathLength="1" 을 쓰면 길이를 재지 않아도 되므로 JS 가 필요 없다.
   패널이 display:none 이었다가 보이면 애니메이션이 처음부터 다시 돈다. */
.sigline{
  position:absolute;left:-6.3%;top:-4.58%;width:113.41%;height:auto;  /* img 와 같은 자리 */
  max-width:none;                                                    /* base.css 의 svg{max-width:100%} 가 폭을 잘라 라인이 코에서 어긋난다 */
  pointer-events:none;overflow:visible;
}
.sigline path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sigline .sigline__glow{stroke:var(--brand);stroke-width:18;opacity:.16}
.sigline .sigline__main{stroke:var(--brand);stroke-width:6}
.sigline .sigline__core{stroke:#fff;stroke-width:2.5;opacity:.9}
/* 선 길이(--len)는 곡선마다 달라서 각 svg 에 실제 값을 적어 둔다.
   pathLength 속성은 HTML 파서를 거치면 살아남지 못해 쓸 수 없다. */
/* 한 번 그리고 멈추지 않는다. 그리기 → 잠깐 머무르기 → 반대쪽으로 빠지기를
   항목이 머무는 시간(--sig-dwell)에 딱 맞춰 되풀이하므로, 탭이 넘어가는 순간
   다음 라인이 이어서 그려지기 시작해 끊긴 느낌이 없다.
   [data-sigauto="on"] 안에서만 돈다 — 화면 밖에서는 그리기가 멈춘다(페인트 절약). */
.js3d [data-sigauto="on"] .main-sec_3__panel:not([hidden]) .sigline path{
  stroke-dasharray:var(--len,1100);
  stroke-dashoffset:var(--len,1100);
  animation:fx-draw var(--sig-dwell,5s) linear infinite;
}
@keyframes fx-draw{
  0%  {stroke-dashoffset:var(--len,1100); animation-timing-function:cubic-bezier(.33,0,.2,1)}
  34% {stroke-dashoffset:0;               animation-timing-function:linear}
  74% {stroke-dashoffset:0;               animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{stroke-dashoffset:var(--nlen,-1100)}
}
/* 패널 자체는 살짝 떠오르기만 — 크기는 건드리지 않는다 */
@keyframes fx-panel{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.js3d .main-sec_3__panel:not([hidden]){animation:fx-panel .5s cubic-bezier(.16,1,.3,1) both}
/* 시술 페이지 STEP — 넘어갈 때 같은 방식으로 떠오른다. fill 을 backwards 로 두어
   끝난 뒤에는 카드의 .lift 호버가 그대로 먹는다. */
.js3d [data-sigauto-eq] [role="tabpanel"]:not([hidden]){animation:fx-panel .5s cubic-bezier(.16,1,.3,1) backwards}
/* 자동 전환 남은 시간 — 활성 탭 아래 얇은 선 */
.js3d .main-sec_3__tabs .tab{position:relative}
.js3d .main-sec_3__tabs .tab[aria-selected="true"]::after{
  content:'';position:absolute;left:20px;right:20px;bottom:8px;height:2px;
  border-radius:2px;background:var(--brand);
  transform-origin:left center;transform:scaleX(0);
}
.js3d [data-sigauto="on"] .tab[aria-selected="true"]::after{
  animation:fx-tabbar var(--sig-dwell,5s) linear infinite;
}
@keyframes fx-tabbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 리빌 무게 줄이기 (부드러움) ────────────────────────────
   perspective + rotateX 로 큰 사진 블록을 돌리면 래스터 비용이 커져
   스크롤이 끊긴다(측정: 긴 프레임 26 → 19, p90 22.8 → 20.7ms).
   글자 블록은 3D 그대로 두고, 사진이 큰 블록만 평면 이동으로 바꾼다. */
.js3d .main-sec_2__media.reveal-3d,
.js3d .main-sec_9__map.reveal-3d,
.js3d .car.reveal-3d{transform:translate3d(0,40px,0) scale(.976)}
.js3d .main-sec_2__media.reveal-3d.revealed,
.js3d .main-sec_9__map.reveal-3d.revealed,
.js3d .car.reveal-3d.revealed{transform:none}
.js3d .stagger-3d > *{transform:translate3d(0,32px,0) scale(.975)}
.js3d .stagger-3d.revealed > *{transform:none}

/* ── 3. 숫자 카운터 ──────────────────────────────────────────
   자릿수가 늘어도 폭이 흔들리지 않게 고정폭 숫자를 쓴다. */
.main-sec_5__num{font-variant-numeric:tabular-nums}

/* ── 4. 캐러셀 ────────────────────────────────────────────────
   goldendiamant "Doctor's Insight" 와 같은 방식 — 가로 트랙을 한 장씩
   밀고 가운데 것이 주인공이 된다. 다만 옆 카드에 흐림·딤을 걸지 않는다.
   움직이는 것은 트랙의 translate3d 하나뿐이다.

   트랙이 켜지기 전에는 그냥 가로 스크롤 목록이라 JS 가 없어도 다 볼 수 있다. */
.car{position:relative}
.car__track{
  display:flex;gap:var(--car-gap,24px);margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.car__track::-webkit-scrollbar{display:none}
/* 카드 폭은 원래 격자(.grid--3/--4)와 똑같은 식으로 잡는다 — 값이 1px 도 안 변한다.
   퍼센트는 트랙(=.car 와 같은 폭)의 콘텐츠 박스 기준이라 켜기 전후가 동일하다. */
.car__track > *{
  flex:0 0 auto;
  width:var(--car-col,calc((100% - (var(--car-cols) - 1) * var(--car-gap)) / var(--car-cols)));
}

.car.is-on{overflow:hidden}
/* 카드 그림자와 호버로 뜨는 6px 이 잘리지 않게 숨통을 준다.
   clip-margin 은 가로로도 번지므로 컨테이너 좌우 여백(--gutter)보다
   작게 잡아야 화면 밖으로 새지 않는다 — 새면 가로 스크롤이 생긴다.
   좌우가 화면에 붙어 있는 쇼츠 줄에는 쓰지 않는다. */
@supports (overflow:clip){
  .car--pad.is-on{overflow:clip;overflow-clip-margin:calc(var(--gutter) - 6px)}
}
.car.is-on .car__track{
  overflow:visible;
  transform:translate3d(var(--car-shift,0px),0,0);
  transition:transform .75s cubic-bezier(.16,1,.3,1);
}
.car.is-on.is-jumping .car__track{transition:none}

/* 가운데 주인공 — 양옆은 확실히 작게(원본 Doctor's Insight 와 같은 0.82),
   가운데만 원래 크기. 흐리게 하거나 어둡게 하지는 않는다. */
.car--center.is-on .car__track > *{
  transform:scale(.82);
  transition:transform .75s cubic-bezier(.16,1,.3,1);
}
.car--center.is-on .car__track > .is-active{transform:scale(1)}

/* 앞·뒤 단추와 점 — JS 가 만든다 */
.car__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:var(--sp-stack)}
.car__arw{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-soft);background:var(--surface);color:var(--text-secondary);
  transition:color .3s,border-color .3s,transform .3s;
}
@media (hover:hover){.car__arw:hover{color:var(--brand);border-color:var(--brand);transform:scale(1.06)}}
.car__dots{display:flex;align-items:center;gap:8px}
.car__dot{
  width:8px;height:8px;border-radius:50%;background:var(--line-mid);
  transition:transform .4s cubic-bezier(.16,1,.3,1),background-color .4s;
}
.car__dot[aria-current="true"]{background:var(--brand);transform:scale(1.5)}

/* 섹션별 치수 — .grid--3/--4 와 열 수도 중단점도 똑같이 맞춘다.
   인라인 style 로 두면 미디어쿼리가 못 이기므로 여기에 둔다. */
.main-sec_6__rail.car__track{--car-col:262px;--car-gap:20px}
.main-sec_7__list.car__track{--car-cols:4;--car-gap:26.667px}
.main-sec_8__cards.car__track{--car-cols:3;--car-gap:var(--sp-gap)}   /* .grid 와 같은 토큰 — 중단점까지 따라간다 */
/* 1280 미만에서 자필후기 격자는 간격을 공용 토큰으로 되돌린다(main-sec_7.css
   와 같은 중단점). 여기서도 똑같이 따라가야 카드 폭이 어긋나지 않는다. */
@media (max-width:1279px){
  .main-sec_7__list.car__track{--car-gap:var(--sp-gap)}
}
@media (max-width:1023px){
  .main-sec_7__list.car__track,
  .main-sec_8__cards.car__track{--car-cols:2}
}
@media (max-width:767px){
  .main-sec_7__list.car__track,
  .main-sec_8__cards.car__track{--car-cols:1}
}
/* 시술 페이지 SURGERY LOG(옛 COLUMNS) — 원래 .grid--3 과 같은 열 수·간격·중단점 */
.car__track--3{--car-cols:3;--car-gap:var(--sp-gap)}
@media (max-width:1023px){.car__track--3{--car-cols:2}}
@media (max-width:767px){.car__track--3{--car-cols:1}}

/* 캐러셀이 돌면 손으로 끄는 진행 막대는 뜻이 없다 */
.car.is-on ~ .rail-bar{display:none}

/* ── 5. KOWON Youtube(홈·시술 페이지 공통: [data-yt-stage] 큰 칸, [data-yt-list] 목록) ──
   큰 칸에 올라온(재생 중인) 영상의 줄만 핑크. 모든 표시·전환은 transform 과 opacity 로만 —
   배경은 ::after 층의 opacity, 막대는 ::before 의 scaleY, 제목은 보통·핑크 두 겹의 opacity. */
[data-yt-list] li{position:relative}
[data-yt-list] li::before{
  content:'';position:absolute;z-index:2;left:0;top:10%;bottom:10%;width:3px;
  background:var(--brand);border-radius:2px;
  transform:scaleY(0);transform-origin:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
[data-yt-list] li::after{
  content:'';position:absolute;z-index:0;inset:0;background:var(--brand-tint-1);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
[data-yt-list] li.is-playing::before{transform:scaleY(1)}
[data-yt-list] li.is-playing::after{opacity:1}
[data-yt-list] > li > a{position:relative;z-index:1}
[data-yt-list] [class$="__vtitle"]{display:grid;overflow:visible}
[data-yt-list] .t{
  grid-area:1/1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  transition:opacity .5s ease;
}
[data-yt-list] .t--on{color:var(--brand);opacity:0}   /* 두 겹의 굵기를 같게 — 겹쳐 넘어가는 순간에도 글자가 어긋나지 않는다 */
[data-yt-list] li.is-playing .t{opacity:0}
[data-yt-list] li.is-playing .t--on{opacity:1}
[data-yt-list] > li > a:hover .t{color:var(--brand)}
/* 대기열 — 한 칸씩 밀려 올라간다(각 줄의 transform). 빠지는 맨 위 줄은 겹쳐 둔 복사본이 위로 흐려진다 */
[data-yt-list]{position:relative;overflow:hidden}
[data-yt-list] > li{transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .5s ease}
[data-yt-list] > li.no-anim{transition:none}
[data-yt-list] > li.is-new{opacity:0}
.main-sec_6__ghost{position:absolute!important;left:0;right:0;top:0;pointer-events:none;
  transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.main-sec_6__ghost.is-gone{opacity:0;transform:translate3d(0,-45%,0)}
/* 여러 칸을 건너뛸 때(목록에서 아래 줄을 누른 경우) — 위로 흐려졌다가 아래에서 올라온다 */
[data-yt-list]{transition:opacity .32s ease,transform .32s cubic-bezier(.4,0,.2,1)}
[data-yt-list].is-out{opacity:0;transform:translate3d(0,-10px,0)}
[data-yt-list].is-in0{opacity:0;transform:translate3d(0,12px,0)}
[data-yt-list].no-anim{transition:none}
/* 묶음이 바뀌어도 줄 높이가 같게 — 제목은 어느 폭에서나 세 줄까지 */
@media (max-width:1199px){[data-yt-list] > li > a{box-sizing:border-box;min-height:calc(max(84px, var(--fs-18) * 4.5) + 24px)}}
/* 대표 자리 — 재생 중에는 핑크 테두리 */
[data-yt-stage]{transition:box-shadow .4s ease}
[data-yt-stage].is-playing{box-shadow:0 0 0 3px var(--brand)}
/* 큰 칸 전환: 나가는 화면은 위로 조금 밀리며 흐려지고, 다음 포스터는 아래에서 올라오며 선명해진다 */
[data-yt-stage] .yt-play::before,[data-yt-stage] .yt-play::after{z-index:1}
[data-yt-stage] .yt-play img,[data-yt-stage] iframe{
  transition:opacity .72s cubic-bezier(.4,0,.2,1),transform .72s cubic-bezier(.4,0,.2,1);transform-origin:50% 50%;
}
[data-yt-stage] .is-leaving{opacity:0;transform:translate3d(0,-4%,0) scale(.96);will-change:transform,opacity}
.main-sec_6__layer{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  opacity:0;transform:translate3d(0,7%,0) scale(1.03);
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity;
}
.main-sec_6__layer.is-in{opacity:1;transform:none}
.main-sec_6__layer.is-out{opacity:0;transform:none;transition-duration:.5s}
[data-yt-stage] .no-anim{transition:none!important}

/* ── 6. 글 카드 피드 — 제목이 길어도 카드 높이가 들쭉날쭉하지 않게 세 줄까지 */
.car[data-car-feed] .card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ── 모션 최소화 ─────────────────────────────────────────────
   저절로 움직이는 것은 전부 끈다. 캐러셀은 손으로 미는 가로 목록으로
   되돌려야 뒤쪽 카드가 영영 안 보이는 일이 없다. */
@media (prefers-reduced-motion:reduce){
  .js3d .main-sec_1__scroll img,
  .js3d .main-sec_1__scroll span,
  .js3d .main-sec_3__panel:not([hidden]),
  .js3d [data-sigauto-eq] [role="tabpanel"]:not([hidden]),
  .js3d [data-sigauto] .tab[aria-selected="true"]::after{animation:none!important}
  .js3d .sigline path{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .car.is-on{overflow:visible!important}
  .car.is-on .car__track{overflow-x:auto!important;transform:none!important;transition:none!important}
  .car.is-on .car__track > *{transform:none!important;transition:none!important}
  .car__nav{display:none}
  [data-yt-list] li::before,[data-yt-list] li::after,[data-yt-list] .t,[data-yt-list],
  [data-yt-stage] .yt-play img,[data-yt-stage] iframe,.main-sec_6__layer,[data-yt-list] > li,.main-sec_6__ghost{transition:none!important}
}