/* ============================================================
   배때지 V2 · SHOP 레이아웃 시프트(CLS) 제거

   문제
     .v2live-loading("상품을 불러오는 중...")은 shop-live.css:366 에서
     .v2live-empty 와 함께 padding:55px 20px 를 받는다. 그래서
       숨김([hidden] → display:none) : 높이 0px
       표시                          : 높이 123px
     무한스크롤이 페이지를 부를 때마다 이 123px 가 생겼다 사라지고,
     바로 아래의 페이지 네비(.v2live-seo-pagination)와 그 아래 전체가
     같은 폭만큼 위아래로 튄다.
     실측 CLS 1.45~1.68 (권장 0.1). 시프트 1회당 0.145~0.168 이 반복 누적.

   해결
     로딩 표시를 흐름에서 빼지 않고 "항상 같은 높이를 차지"하게 만든다.
     보이고 숨기는 것은 display 가 아니라 visibility 로 처리한다
     → 토글해도 주변 요소가 1px 도 움직이지 않는다.

   .v2live-empty(빈 결과 안내)는 건드리지 않는다. 그쪽은 넉넉한 여백이 맞고
   토글이 자주 일어나지도 않는다.
   ============================================================ */

/* 로딩 표시를 문서 흐름에서 완전히 뺀다.
   높이를 고정하는 것만으로는 부족했다 — 흐름에 남아 있는 한
   위쪽 상품 그리드가 커질 때마다 함께 밀려 시프트를 만든다(실측 기여도 0.148).
   화면 하단에 뜨는 토스트 형태로 바꾸면 나타나고 사라져도
   주변 어떤 요소도 움직이지 않는다. */
.v2live-loading {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));  /* 하단 고정 네비 위 */
    z-index: 30;

    display: block !important;
    box-sizing: border-box;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 18px !important;
    transform: translateX(-50%);

    border-radius: 999px;
    background: rgba(22, 22, 26, .88);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;

    visibility: hidden;
    opacity: 0;
}

/* 실제로 불러오는 중일 때만 보인다 */
.v2live-loading:not([hidden]) {
    visibility: visible;
    opacity: 1;
}

@media (min-width: 1024px) {
    .v2live-loading { bottom: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
    .v2live-loading { transition: opacity .15s ease; }
}

/* ------------------------------------------------------------
   스크롤 앵커링 끄기

   브라우저는 목록에 콘텐츠가 추가되면 "보고 있던 요소를 유지"하려고
   스크롤 위치를 자동으로 조정한다(scroll anchoring). 무한스크롤 목록에서는
   이 자동 보정이
     · 맨 위로 버튼을 누른 직후 다시 아래로 끌어내리고
     · 뒤로가기 복원 직후 위치를 흔들며
     · 레이아웃 시프트로 집계된다.
   목록 컨테이너에서만 끈다(문서 전체 동작은 그대로 둔다).
   ------------------------------------------------------------ */
#v2Products {
    overflow-anchor: none;
}

/* ------------------------------------------------------------
   번호형 페이지네이션 (2026-07-31)

   [이전] 2026-07-21 에 "N / M · 이전/다음" 표시를 sr-only 로 숨겼다
          (상품 탐색은 무한스크롤이 담당하므로 화면상 페이저는 불필요).
   [현재] 깊은 목록 도달 경로를 되살리기 위해 번호형으로 바꾸고 다시 보이게 한다.
          링크가 2개(이전/다음)뿐이면 마지막 페이지까지 4,600번을 따라가야 해서
          크롤러도 사용자도 도달하지 못했다.

   위치는 그대로 상품 그리드 «앞» 이다 — 무한스크롤로 카드가 늘어나도
   페이저가 밀리지 않아 CLS 가 생기지 않는다(그 뒤에 두면 실측 0.26).
   높이가 고정된 한 줄이라 표시 자체가 만드는 시프트도 없다.
   ------------------------------------------------------------ */
.v2live-seo-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 2px 0;
}

/* 화면 낭독기용 현재 위치 안내 — 시각적으로는 숨긴다(번호가 이미 보인다) */
.v2live-seo-pagination .v2live-page-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.v2live-seo-pagination a,
.v2live-seo-pagination .v2live-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 40px;                 /* 터치 타깃 */
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid #e4e4e8;
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.v2live-seo-pagination a:hover { border-color: #bdbdff; color: #222; }

/* 현재 페이지 — 링크가 아니라 <span>. 정렬바 선택 상태와 같은 표기. */
.v2live-seo-pagination .v2live-page-num.is-current {
    background: #111;
    border-color: #111;
    color: #fff;
    cursor: default;
}

/* 생략 기호 — 클릭 대상이 아니다 */
.v2live-seo-pagination .v2live-page-gap {
    padding: 0 2px;
    color: #a0a0a8;
    font-size: 13.5px;
    line-height: 40px;
}

/* 좁은 화면: 현재 ±2 번호를 감춰 한 줄 폭을 줄인다.
   DOM 에는 남아 있어 크롤 경로·키보드 이동은 그대로다. */
@media (max-width: 430px) {
    .v2live-seo-pagination { gap: 4px; }
    .v2live-seo-pagination .v2live-page-num.is-far { display: none; }
    /* 생략 기호는 장식이다(aria-hidden). 좁은 화면에서는 자리만 차지하므로 뺀다. */
    .v2live-seo-pagination .v2live-page-gap { display: none; }
    .v2live-seo-pagination a,
    .v2live-seo-pagination .v2live-page-num {
        padding: 0 9px;                 /* 터치 타깃 40×40 은 유지한다 */
        font-size: 13px;
    }
}