/* ==========================================================================
   ZZAPS 피드 스크롤 반응 (헤더 숨김 + 글쓰기 버튼 축소)
   --------------------------------------------------------------------------
   적용 범위  : 긴 피드 화면만 (메인 · 중고장터 목록 · 게시판 목록)
                body 에 .zz-feedscroll 이 붙은 페이지에서만 동작한다.
   로드 방식  : resources/views/partials/feedscroll.blade.php 의 @push('head')
                (vite 엔트리·공통 app.css 를 건드리지 않는다)

   규칙
     - 모든 선택자를 .zz-feedscroll 하위로 스코프한다.
       다른 화면(상세·검색·지도·채팅·MY·관리자)에는 이 클래스가 붙지 않으므로
       규칙 자체가 적용되지 않는다.
     - 위치·색·크기 같은 기존 디자인 값을 다시 정의하지 않는다.
       여기서 더하는 것은 "전환 효과"와 "축소 상태" 두 가지뿐이다.
     - 하단 내비(.tabbar)는 건드리지 않는다. 절대 숨기지 않는다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 헤더 : 아래로 스크롤하면 위로 접힌다

   transform 만 쓴다. height·position 을 건드리면 본문이 밀려 올라가
   레이아웃이 흔들리기 때문이다(CLS).
   -------------------------------------------------------------------------- */
.zz-feedscroll .site-header {
    transition: transform 200ms ease;
    will-change: transform;
}

.zz-feedscroll .site-header.zz-fs-hide {
    /* 아래 테두리까지 확실히 넘겨 얇은 선이 남지 않게 한다 */
    transform: translateY(-101%);
}

/* --------------------------------------------------------------------------
   2. + 글쓰기 버튼 : 스크롤을 내리면 아이콘만 남는 원형으로 줄어든다

   위치(right/bottom)는 공통 .fab 규칙 그대로 둔다.
   이미 앱 컨테이너 오른쪽 안쪽 16px 에 붙어 있어 새로 잡을 필요가 없다.
   -------------------------------------------------------------------------- */
.zz-feedscroll .fab {
    /* 앱 컨테이너 오른쪽 안쪽 16px 에 고정한다.
       공통 규칙은 --shell-pad 를 쓰는데 359px 이하에서 12px 로 좁아지므로,
       피드 화면에서는 폭과 무관하게 16px 로 못박는다. (--zz-gutter 는 그대로 읽는다) */
    right: calc(var(--zz-gutter) + 16px);

    transition:
        width 200ms ease,
        padding 200ms ease,
        gap 200ms ease;
    /* 펼친 상태의 폭은 내용에 맡긴다 (라벨 길이가 바뀌어도 안 깨지게) */
    will-change: width, padding;
}

/* 라벨은 자바스크립트가 감싸 준다 (공통 컴포넌트를 고치지 않기 위해) */
.zz-feedscroll .zz-fs-fab-label {
    display: inline-block;
    max-width: 90px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition:
        max-width 200ms ease,
        opacity 160ms ease;
}

/* 축소 상태 : 정사각형에 가까운 원형 캡슐 */
.zz-feedscroll .fab.zz-fs-mini {
    width: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
}
.zz-feedscroll .fab.zz-fs-mini .zz-fs-fab-label {
    max-width: 0;
    opacity: 0;
}

/* PC·태블릿에서도 모바일과 같은 크기다.
   앱 컨테이너 폭이 고정이라 별도 확대 규칙을 두지 않는다. */

/* --------------------------------------------------------------------------
   3. 모션 최소화 설정 존중
   전환을 끄되 상태(숨김·축소)는 그대로 적용된다.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .zz-feedscroll .site-header,
    .zz-feedscroll .fab,
    .zz-feedscroll .zz-fs-fab-label {
        transition: none;
    }
}