/* =====================================================================
   eb_motion.css — 어복 공용 모션 시스템
   2026-08-26 신설

   [설계 원칙 — 운영 사이트라 회귀가 절대 없어야 함]
   1) 이 파일은 "추가"만 한다. 기존 규칙을 지우거나 동작을 바꾸지 않는다.
   2) 스크롤 리빌의 '숨김' 상태는 반드시 html.eb-motion 아래에서만 적용한다.
      이 클래스는 eb_motion.js 가 IntersectionObserver 지원을 확인한 뒤에만 붙인다.
      → JS 가 없거나 실패하면 아무것도 숨겨지지 않는다(콘텐츠 유실 0).
   3) 메뉴 스태거는 transition 이 아니라 animation 으로 만든다.
      animation 은 재생될 때만 영향을 주므로, 클래스가 안 붙으면 메뉴는 평소 그대로다.
   4) transform / opacity 만 애니메이션한다 (트랩 #4 — iOS Safari 메모리 압박).
   5) prefers-reduced-motion 은 전부 무력화한다.

   [적용 범위]
   - 메뉴 타이밍 : 전역 (모든 페이지의 사이드바/오버레이)
   - 스크롤 리빌 : #m2-scope (메인페이지)만. 다른 페이지는 영향 없음.
   ===================================================================== */

:root{
    /* --- 페이지 진입 모션 : C안(적극형) --- */
    --eb-dur:   620ms;
    --eb-ease:  cubic-bezier(.34,1.56,.64,1);   /* 살짝 오버슈트 */
    --eb-dy:    28px;
    --eb-sc:    .96;
    --eb-stag:  110ms;

    /* --- 전체메뉴 모션 : B안(표준) — 타이밍 동기화만 사용 --- */
    --eb-menu-dur:  300ms;
    --eb-menu-ease: cubic-bezier(.22,1,.36,1);
}

/* =====================================================================
   [1] 전체메뉴 — 사이드바 / 오버레이 타이밍 동기화                (전역)

   기존 문제(2026-08-26 실측):
     .app-sidebar       transition: all 0.3s ease
     #responsive-overlay transition: all 0.1s cubic-bezier(.4,0,.2,1)
   → 3배 차이 때문에 어두운 배경이 먼저 깔리고 메뉴가 늦게 따라왔다.

   ⚠ transition-property 는 건드리지 않는다. 기존 'all' 을 유지해야
     PC 사이드바 접힘(width 변화) 등 다른 전환이 그대로 살아난다.
   ===================================================================== */
#responsive-overlay{
    transition-duration: var(--eb-menu-dur) !important;
    transition-timing-function: var(--eb-menu-ease) !important;
}
.app-sidebar{
    transition-timing-function: var(--eb-menu-ease) !important;
}

/* [2026-08-26 제거] 메뉴 그룹 순차 등장(B안 스태거)
   ────────────────────────────────────────────────────────────
   열 때 항목이 한 번 깜빡이는 문제로 제거했다.

   원인은 경합(race)이다.
     ① 햄버거 탭 → 테마가 사이드바를 즉시 열기 시작 (항목이 보이는 상태)
     ② 1~2 프레임 뒤 → MutationObserver 가 오버레이 class 변화를 감지
     ③ 그제서야 항목을 숨기고 스태거 시작
   ②와 ③ 사이에 항목이 이미 그려져서 '보였다 사라졌다' 하는 것으로 보인다.

   되살리려면: 오버레이 감시가 아니라 .sidemenu-toggle 클릭을 캡처 단계에서
   먼저 잡아, 테마가 열기 전에 숨김 클래스를 붙여야 한다. 사후 감지로는 못 고친다.

   아래 [1] 의 오버레이·사이드바 타이밍 동기화는 그대로 유지한다.
   그게 원래 발견했던 실제 결함(0.1s vs 0.3s)이고 깜빡임과 무관하다. */

/* =====================================================================
   [2] 스크롤 리빌 — 메인페이지(#m2-scope) 전용                    (C안)

   transform 은 '하나의 선언'으로 합성한다. 리빌 이동(--eb-ty)·hover 상승(--eb-hy)·
   3D 틸트(--eb-rx/--eb-ry)가 같은 transform 속성을 서로 덮어쓰지 않게 하기 위함.
   ===================================================================== */
html.eb-motion #m2-scope [data-eb]{
    opacity:0;
    transform: translate3d(0, calc(var(--eb-ty, var(--eb-dy)) + var(--eb-hy, 0px)), 0)
               scale(var(--eb-s, var(--eb-sc)));
    transition: opacity   var(--eb-dur) var(--eb-ease),
                transform var(--eb-dur) var(--eb-ease);
    transition-delay: calc(var(--eb-i, 0) * var(--eb-stag));
}
html.eb-motion #m2-scope [data-eb].eb-in{
    opacity:1;
    --eb-ty:0px;
    --eb-s:1;
}

/* ⚠ 2026-08-26 — PC 히어로에 모션이 없던 진짜 원인.
   html.eb-motion 이 붙는 순간 '숨김(opacity:0)'까지 620ms 전환으로 재생돼,
   콘텐츠가 서서히 사라지는 동안 IO 가 다시 나타나게 만들어 두 전환이 상쇄됐다.
   → eb_motion.js 가 .eb-ready 를 붙이기 전까지는 전환을 끈다.
     숨김은 즉시 확정되고, 그 다음 변화(.eb-in)부터 애니메이션된다. */
html.eb-motion #m2-scope [data-eb]:not(.eb-ready),
html.eb-motion #m2-scope [data-eb]:not(.eb-ready) > .eb-m{
    transition: none !important;
}

/* 섹션 제목 — 마스크 슬라이드업.
   h2 자체는 보이게 두고 안쪽 span(.eb-m)만 아래에서 밀어올린다.
   padding/margin 을 상쇄로 넣어 레이아웃 변화 없이 디센더(ㅇ,ㅈ 등) 잘림만 방지. */
html.eb-motion #m2-scope [data-eb="mask"]{
    opacity:1;
    transform:none;
    overflow:hidden;
    padding-bottom:.12em;
    margin-bottom:-.12em;
}
html.eb-motion #m2-scope [data-eb="mask"] > .eb-m{
    display:inline-block;
    transform: translate3d(0,110%,0);
    transition: transform var(--eb-dur) var(--eb-ease);
    transition-delay: calc(var(--eb-i, 0) * var(--eb-stag));
}
html.eb-motion #m2-scope [data-eb="mask"].eb-in > .eb-m{ transform:none; }

/* ---------------------------------------------------------------------
   카드 — 리빌이 끝나면(.eb-done) 원래 hover 전환값으로 정확히 복귀시킨다.
   기존 값: np-card  transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s
            ng-card  transform .25s, box-shadow .25s, border-color .25s
   hover 상승값(-6px / -5px)도 그대로 유지 → hover 체감 변화 0.
   --------------------------------------------------------------------- */
html.eb-motion #m2-scope .m2-np-card[data-eb]{
    transition: opacity     var(--eb-dur) var(--eb-ease),
                transform   var(--eb-dur) var(--eb-ease),
                box-shadow  .3s,
                border-color .3s;
}
html.eb-motion #m2-scope .m2-np-card[data-eb].eb-done{
    transition: opacity .2s linear,
                transform .3s cubic-bezier(.4,0,.2,1),
                box-shadow .3s,
                border-color .3s;
    transition-delay: 0s;
}
html.eb-motion #m2-scope .m2-np-card[data-eb]:hover{ --eb-hy:-6px; }

html.eb-motion #m2-scope .m2-ng-card[data-eb]{
    transition: opacity     var(--eb-dur) var(--eb-ease),
                transform   var(--eb-dur) var(--eb-ease),
                box-shadow  .25s,
                border-color .25s;
}
html.eb-motion #m2-scope .m2-ng-card[data-eb].eb-done{
    transition: opacity .2s linear,
                transform .25s,
                box-shadow .25s,
                border-color .25s;
    transition-delay: 0s;
}
html.eb-motion #m2-scope .m2-ng-card[data-eb]:hover{ --eb-hy:-5px; }

/* 3D 틸트 (C안) — 마우스가 있는 환경에서만. 리빌이 끝난 카드에만 적용한다.
   --eb-rx/--eb-ry 는 eb_motion.js 가 pointermove 로 넣어준다. */
@media (hover:hover) and (pointer:fine){
    html.eb-motion #m2-scope .m2-np-card[data-eb].eb-done,
    html.eb-motion #m2-scope .m2-ng-card[data-eb].eb-done{
        transform: translate3d(0, calc(var(--eb-ty,0px) + var(--eb-hy,0px)), 0)
                   scale(var(--eb-s,1))
                   rotateX(var(--eb-rx,0deg)) rotateY(var(--eb-ry,0deg));
    }
}

/* 히어로 배경 글로우 — 은은한 이동. .m2-hero 가 overflow:hidden 이라 밖으로 안 샌다. */
@keyframes eb-glow-drift{
    from{ transform: translate3d(-3%,-2%,0) scale(1); }
    to  { transform: translate3d(9%,7%,0)  scale(1.18); }
}
html.eb-motion #m2-scope .m2-hero-glow{
    animation: eb-glow-drift 9s ease-in-out infinite alternate;
}

/* 버튼 press 피드백 — 누르는 순간만. 기존 hover 규칙과 충돌하지 않는다. */
html.eb-motion #m2-scope .m2-btn:active,
html.eb-motion #m2-scope .m2-shead-link:active,
html.eb-motion #m2-scope .m2-loginbar-btn:active{
    transform: scale(.96);
    transition-duration: 90ms;
}

/* =====================================================================
   [3] 모션 최소화 — 사용자 OS 설정을 존중해 전부 끈다
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
    html.eb-motion #m2-scope [data-eb],
    html.eb-motion #m2-scope [data-eb].eb-in,
    html.eb-motion #m2-scope [data-eb="mask"] > .eb-m{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
        animation:none !important;
    }
    html.eb-motion #m2-scope .m2-hero-glow{ animation:none !important; }
}