/* =========================================================================
   edle-fx.css  ·  edle.co.kr 톤 본문 인터랙션 레이어
   - COSS 서브페이지 "본문"(#txt.kos-coten-body)에만 적용. 상단 히어로 영상/GNB 등
     기존 동작은 건드리지 않는다.
   - kos-coten-fx.css 를 덮지 않고 "보강"만 한다.
   - 요청 항목: 장면전환 / reveal 애니메이션 / 커스텀 커서 / 배경색 전환 강화 /
     아이콘 / 박스 디자인 / 배경 이미지(그레인·마스크 리빌).
   ========================================================================= */

:root {
  --edle-ease: cubic-bezier(.22, 1, .36, 1);
  --edle-ink: #12140f;
  --edle-cursor: var(--coten-blue, #2f6bd8);
}

/* -------------------------------------------------------------------------
   1) 그레인 텍스처 배경 오버레이 — 본문 위로 은은한 노이즈(질감 통일)
   ------------------------------------------------------------------------- */
.kos-coten-body.edle-fx { position: relative; }
.kos-coten-body.edle-fx::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .kos-coten-body.edle-fx::after { display: none; }
}

/* -------------------------------------------------------------------------
   2) 장면전환 배경색 강화 — 스텝 사이 전환을 더 길고 부드럽게 + 라디얼 글로우
      (_coten_scroll.html 이 body 에 bg-step-N 부여. 기본 색은 kos-coten-fx.css)
   ------------------------------------------------------------------------- */
body.kos-coten-scroll.edle-scene { transition: background-color 1.4s var(--edle-ease); }
body.kos-coten-scroll.edle-scene::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  transition: opacity 1.4s var(--edle-ease), background 1.4s var(--edle-ease);
  background:
    radial-gradient(1100px 620px at 82% -6%, rgba(47,107,216,.10), transparent 60%),
    radial-gradient(900px 520px at 6% 108%, rgba(244,169,59,.10), transparent 60%);
}
body.kos-coten-scroll.edle-scene.bg-step-3::before,
body.kos-coten-scroll.edle-scene.bg-step-4::before { opacity: .8; }

/* -------------------------------------------------------------------------
   3) 본문 리빌 — 아래에서 떠오르며 clip 마스크로 드러남 (edle 톤)
      kos-coten-fx.css 에 기본 .coten-reveal 규칙이 있으므로, edle-fx 스코프에서
      "이미지 마스크 리빌"을 추가로 얹는다.
   ------------------------------------------------------------------------- */
.kos-coten-body.edle-fx .coten-reveal .media,
.kos-coten-body.edle-fx .coten-reveal .g-item,
.kos-coten-body.edle-fx .coten-reveal.kos-hero-fig {
  overflow: hidden;
}
body.kos-reveal-on .kos-coten-body.edle-fx .coten-reveal .media img,
body.kos-reveal-on .kos-coten-body.edle-fx .coten-reveal .g-item img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition: clip-path 1s var(--edle-ease), transform 1.2s var(--edle-ease);
  will-change: clip-path, transform;
}
body.kos-reveal-on .kos-coten-body.edle-fx .coten-reveal.is-in .media img,
body.kos-reveal-on .kos-coten-body.edle-fx .coten-reveal.is-in .g-item img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  body.kos-reveal-on .kos-coten-body.edle-fx .coten-reveal .media img,
  body.kos-reveal-on .kos-coten-body.edle-fx .coten-reveal .g-item img {
    clip-path: none !important; transform: none !important; transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   4) 단어 단위 타이포 리빌 — 섹션 제목이 단어별로 순차 등장
      JS(edle-fx.js)가 h2/h3 를 <span class="edle-word"> 로 감싼다.
   ------------------------------------------------------------------------- */
.kos-coten-body.edle-fx .edle-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.kos-coten-body.edle-fx .edle-word > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform .7s var(--edle-ease);
}
.kos-coten-body.edle-fx .coten-reveal.is-in .edle-word > i { transform: none; }
/* 단어별 계단 딜레이 (최대 12단어) */
.kos-coten-body.edle-fx .edle-word:nth-child(1) > i { transition-delay: .02s; }
.kos-coten-body.edle-fx .edle-word:nth-child(2) > i { transition-delay: .06s; }
.kos-coten-body.edle-fx .edle-word:nth-child(3) > i { transition-delay: .10s; }
.kos-coten-body.edle-fx .edle-word:nth-child(4) > i { transition-delay: .14s; }
.kos-coten-body.edle-fx .edle-word:nth-child(5) > i { transition-delay: .18s; }
.kos-coten-body.edle-fx .edle-word:nth-child(6) > i { transition-delay: .22s; }
.kos-coten-body.edle-fx .edle-word:nth-child(7) > i { transition-delay: .26s; }
.kos-coten-body.edle-fx .edle-word:nth-child(8) > i { transition-delay: .30s; }
.kos-coten-body.edle-fx .edle-word:nth-child(n+9) > i { transition-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  .kos-coten-body.edle-fx .edle-word > i { transform: none !important; transition: none !important; }
}

/* -------------------------------------------------------------------------
   5) 박스 디자인 — 라인 보더 카드 + 호버 시 살짝 떠오르며 라벨 노출 (edle 톤)
   ------------------------------------------------------------------------- */
.kos-coten-body.edle-fx .coten-numsec {
  border: 1px solid rgba(27, 59, 122, .10);
  border-radius: 22px;
  transition: transform .5s var(--edle-ease), box-shadow .5s var(--edle-ease), border-color .5s;
}
.kos-coten-body.edle-fx .coten-numsec:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 107, 216, .35);
  box-shadow: 0 26px 60px rgba(31, 74, 122, .14);
}
/* 번호 카드 상단 라틴 라벨 강조(아이콘 톤) */
.kos-coten-body.edle-fx .coten-numsec .num::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px; margin-right: 10px; vertical-align: middle;
  background: var(--coten-blue, #2f6bd8);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .6s var(--edle-ease);
}
.kos-coten-body.edle-fx .coten-numsec.is-in .num::before { transform: scaleX(1); }

/* 갤러리 카드 — zoom + 호버 라벨(VIEW) */
.kos-coten-body.edle-fx .coten-gallery .g-item {
  position: relative;
  border: 1px solid rgba(27, 59, 122, .10);
  transition: transform .5s var(--edle-ease), box-shadow .5s var(--edle-ease);
}
.kos-coten-body.edle-fx .coten-gallery .g-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(31, 74, 122, .16);
}
.kos-coten-body.edle-fx .coten-gallery .g-item img {
  transition: transform .6s var(--edle-ease);
}
.kos-coten-body.edle-fx .coten-gallery .g-item:hover img { transform: scale(1.07); }
.kos-coten-body.edle-fx .coten-gallery .g-item::after {
  content: "VIEW";
  position: absolute;
  left: 14px; top: 14px;
  z-index: 3;
  font: 700 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .16em;
  color: #fff;
  background: rgba(18, 20, 15, .55);
  backdrop-filter: blur(4px);
  padding: 7px 11px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s var(--edle-ease), transform .35s var(--edle-ease);
}
.kos-coten-body.edle-fx .coten-gallery .g-item:hover::after {
  opacity: 1; transform: none;
}

/* -------------------------------------------------------------------------
   6) 커스텀 마우스 포인터 — 본문 영역에서만. 원형 커서 + 링, 호버 시 확대/라벨.
      JS(edle-fx.js)가 body 에 edle-cursor-on 부여 + 좌표를 CSS 변수로 갱신.
      마우스 없는(터치) 환경에서는 JS가 아예 활성화하지 않음.
   ------------------------------------------------------------------------- */
.edle-cursor,
.edle-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(var(--edle-cx, -100px), var(--edle-cy, -100px), 0) translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s ease;
}
.edle-cursor {
  width: 8px; height: 8px;
  background: var(--edle-cursor);
}
.edle-cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid var(--edle-cursor);
  transition: width .28s var(--edle-ease), height .28s var(--edle-ease),
              opacity .3s ease, background .28s ease, border-color .28s ease;
}
body.edle-cursor-on .edle-cursor,
body.edle-cursor-on .edle-cursor-ring { opacity: 1; }
body.edle-cursor-on.edle-cursor-hidden .edle-cursor,
body.edle-cursor-on.edle-cursor-hidden .edle-cursor-ring { opacity: 0; }

/* 링은 좌표 추적을 살짝 지연시켜 트레일 느낌 (JS가 --edle-rx/ry 갱신) */
.edle-cursor-ring {
  transform: translate3d(var(--edle-rx, -100px), var(--edle-ry, -100px), 0) translate(-50%, -50%);
}
/* 링크·카드 호버 시 링 확대 + 라벨 */
body.edle-cursor-on.edle-cursor-hover .edle-cursor-ring {
  width: 66px; height: 66px;
  background: rgba(47, 107, 216, .12);
  border-color: transparent;
}
body.edle-cursor-on.edle-cursor-hover .edle-cursor { opacity: 0; }
.edle-cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 10000;
  pointer-events: none;
  transform: translate3d(var(--edle-rx, -100px), var(--edle-ry, -100px), 0) translate(-50%, -50%);
  font: 700 10px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .14em;
  color: var(--coten-blue-dk, #1b3b7a);
  opacity: 0;
  transition: opacity .28s ease;
}
body.edle-cursor-on.edle-cursor-hover .edle-cursor-label { opacity: 1; }

/* 커스텀 커서가 켜지면 본문 링크/카드에서 기본 커서 숨김(포인터는 유지) */
body.edle-cursor-on .kos-coten-body.edle-fx a,
body.edle-cursor-on .kos-coten-body.edle-fx .coten-numsec,
body.edle-cursor-on .kos-coten-body.edle-fx .g-item { cursor: none; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .edle-cursor, .edle-cursor-ring, .edle-cursor-label { display: none !important; }
}

/* -------------------------------------------------------------------------
   7) 아이콘 — 리드 영문 라벨 앞 점/라인, CTA 화살표 아이콘 (edle 대문자 톤)
   ------------------------------------------------------------------------- */
.kos-coten-body.edle-fx .coten-lead .en,
.kos-coten-body.edle-fx .coten-seclabel .en {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kos-coten-body.edle-fx .coten-lead .en::before,
.kos-coten-body.edle-fx .coten-seclabel .en::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coten-accent, #f4a93b);
  box-shadow: 0 0 0 4px rgba(244, 169, 59, .2);
  animation: edle-pulse 2.4s var(--edle-ease) infinite;
}
@keyframes edle-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244, 169, 59, .2); }
  50% { box-shadow: 0 0 0 8px rgba(244, 169, 59, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kos-coten-body.edle-fx .coten-lead .en::before,
  .kos-coten-body.edle-fx .coten-seclabel .en::before { animation: none; }
}

.kos-coten-body.edle-fx .coten-cta .cta-links a::after {
  content: "→";
  margin-left: 4px;
  transition: transform .3s var(--edle-ease);
}
.kos-coten-body.edle-fx .coten-cta .cta-links a:hover::after { transform: translateX(4px); }

/* Independent EPDM animation layer: reveal on parent, pointer tilt on media. */
#txt.kos-epdm-body .coten-reveal { opacity:1; transform:none; transition:none; clip-path:none; filter:none; will-change:auto; }
#txt.kos-epdm-body .epdm-enter { animation:epdm-soft-enter .95s both; }
#txt.kos-epdm-body .epdm-scene.epdm-enter { animation-duration:1.2s; }
#txt.kos-epdm-body .epdm-tilt {
  transform:perspective(950px) rotateX(var(--epdm-rx,0deg)) rotateY(var(--epdm-ry,0deg)) scale(var(--epdm-scale,1));
  transition:transform .55s cubic-bezier(.2,.8,.25,1.3);
}
#txt.kos-epdm-body .epdm-tilt.epdm-tracking { transition-duration:.13s; }
@keyframes epdm-soft-enter {
  0% { opacity:0; transform:translateY(55px) scale(.97,1.03); }
  48% { opacity:1; transform:translateY(-13px) scale(1.012,.988); }
  70% { transform:translateY(6px) scale(.996,1.004); }
  86% { transform:translateY(-3px); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@media(prefers-reduced-motion:reduce) {
  #txt.kos-epdm-body *,#txt.kos-epdm-body *::before,#txt.kos-epdm-body *::after { animation:none!important; transition:none!important; }
  #txt.kos-epdm-body .epdm-tilt,#txt.kos-epdm-body .coten-reveal { transform:none!important; opacity:1!important; }
}
@media print {
  #txt.kos-epdm-body { background:white!important; padding:0; }
  #txt.kos-epdm-body .epdm-scene,#txt.kos-epdm-body::before { display:none; }
  #txt.kos-epdm-body *,#txt.kos-epdm-body *::before,#txt.kos-epdm-body *::after { animation:none!important; transition:none!important; transform:none!important; opacity:1!important; box-shadow:none!important; }
}