/* ============================================================
 * 배때지 V2 · 공통 인터랙션 (hover / focus / active)
 *
 *   설계 원칙
 *     1) hover 는 @media (hover:hover) and (pointer:fine) 안에서만.
 *        → 터치 기기에서 hover 고착 / 첫 터치 무반응이 생기지 않는다.
 *     2) transform 과 opacity 만 쓴다. width/height/left/top 애니메이션 금지.
 *        → 레이아웃 리플로우 없음, 카드 bounding box 불변.
 *     3) 이미 JS/CSS transform 이 걸린 요소(매거진 coverflow, 캐러셀 슬라이드,
 *        STYLE 핀)의 transform 은 절대 덮어쓰지 않는다. 내부 이미지만 건드린다.
 *     4) 선택자는 전부 실제 DOM 조사로 확인한 것만 사용한다.
 *        범위는 .v2live-shell / .v2-home 안으로 제한해 V1 레거시에 닿지 않게 한다.
 *
 *   로드: includes/v2_compat_head.php (문서당 1회 · 상수 가드)
 * ========================================================== */

/* V2 INTERACTIONS — COMMON START */

/* 공통 전환 변수 — 값 하나만 바꾸면 전체 톤이 맞는다 */
.v2live-shell, .v2-home {
    --v2i-dur: 200ms;
    --v2i-ease: cubic-bezier(.22, .61, .36, 1);
    --v2i-lift: -3px;
    --v2i-zoom: 1.03;
}

/* 포커스 링 — 키보드 사용자에게만 보이고, 기존 outline 을 없애지 않는다 */
.v2live-shell a:focus-visible,
.v2live-shell button:focus-visible,
.v2-home a:focus-visible,
.v2-home button:focus-visible {
    outline: 2px solid #2f6bff;
    outline-offset: 2px;
    border-radius: 6px;
}

/* V2 INTERACTIONS — COMMON END */


/* V2 INTERACTIONS — HEADER START */
/* 상단 탭: SHOP · 랭킹 · 기획전 · SALE · 브랜드 …
   실제 선택자 .v2live-head-tabs a (전 페이지 11개)
   활성 표시는 .active 와 [aria-current="page"] 둘 다 실제로 출력된다. */

.v2live-head-tabs a {
    position: relative;
    /* 밑줄이 글자 아래 고정 위치에 그려지도록 — 높이/폭에는 영향 없음 */
    transition: color var(--v2i-dur) var(--v2i-ease),
                transform var(--v2i-dur) var(--v2i-ease);
}

.v2live-head-tabs a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--v2i-dur) var(--v2i-ease);
    pointer-events: none;
}

/* 활성 탭은 평상시에도 밑줄 유지 (hover 시 중복 생성 없음 — 같은 ::after 하나) */
.v2live-head-tabs a.active::after,
.v2live-head-tabs a[aria-current="page"]::after {
    transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
    .v2live-head-tabs a:hover {
        transform: translateY(-2px);   /* 최대 2px — 헤더 높이 불변 */
    }
    .v2live-head-tabs a:hover::after {
        transform: scaleX(1);
    }
}

/* V2 INTERACTIONS — HEADER END */


/* V2 INTERACTIONS — HOME START */

/* 원형 퀵메뉴 — 실제 선택자 .v2-home-shortcut (메인 10개) */
.v2-home-shortcut { transition: transform var(--v2i-dur) var(--v2i-ease); }
.v2-home-shortcut__visual { transition: box-shadow var(--v2i-dur) var(--v2i-ease); }
.v2-home-shortcut__label { transition: color var(--v2i-dur) var(--v2i-ease); }

@media (hover: hover) and (pointer: fine) {
    .v2-home-shortcut:hover { transform: translateY(-3px); }
    .v2-home-shortcut:hover .v2-home-shortcut__visual {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    }
    .v2-home-shortcut:hover .v2-home-shortcut__label { color: #16161a; }
}

/* 전체보기 / 더 보기 — 화살표만 이동시켜 링크 위치는 고정 */
.v2c-sec__more, .v2-home-more { transition: color var(--v2i-dur) var(--v2i-ease); }
.v2c-sec__more span, .v2c-sec__more svg,
.v2-home-more span, .v2-home-more svg {
    display: inline-block;
    transition: transform var(--v2i-dur) var(--v2i-ease);
}

@media (hover: hover) and (pointer: fine) {
    .v2c-sec__more:hover, .v2-home-more:hover { color: #16161a; }
    .v2c-sec__more:hover span, .v2c-sec__more:hover svg,
    .v2-home-more:hover span, .v2-home-more:hover svg {
        transform: translateX(3px);
    }
}

/* Top Brand 원형 — 폭이 밀리지 않게 굵기 대신 배경·그림자만 변화 */
.v2c-brand__circle { transition: box-shadow var(--v2i-dur) var(--v2i-ease),
                                 transform var(--v2i-dur) var(--v2i-ease); }
@media (hover: hover) and (pointer: fine) {
    .v2c-brand:hover .v2c-brand__circle {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    }
}

/* V2 INTERACTIONS — HOME END */


/* V2 INTERACTIONS — PRODUCT START */
/* 캐러셀 카드(.v2c-card)와 SHOP 상품 카드(.v2live-card).
   ※ .v2c-slide(레일 슬라이드)에는 손대지 않는다 — scroll-snap 과 복제 로직이 걸려 있다.
     안쪽 카드만 움직이므로 레일 스크롤/스냅에 영향이 없다. */

.v2c-card, .v2live-card {
    transition: transform var(--v2i-dur) var(--v2i-ease),
                box-shadow var(--v2i-dur) var(--v2i-ease);
}
/* 이미지 래퍼는 overflow:hidden 이므로 안쪽 img 만 확대 → 카드 밖으로 튀지 않는다 */
.v2c-card__image img,
.v2live-card-image img {
    transition: transform 260ms var(--v2i-ease);
    will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
    .v2c-card:hover, .v2live-card:hover {
        transform: translateY(var(--v2i-lift));
    }
    .v2c-card:hover .v2c-card__image img,
    .v2live-card:hover .v2live-card-image img {
        transform: scale(var(--v2i-zoom));
    }
    /* 카드 그림자는 레일 overflow 에 잘릴 수 있어, 잘리지 않는 SHOP 그리드에만 준다 */
    .v2live-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .10); }
}

/* V2 INTERACTIONS — PRODUCT END */


/* V2 INTERACTIONS — CELEBRITY START */
/* 셀러브리티는 .v2c-card 를 공유하므로 위 규칙이 그대로 적용된다.
   자동 슬라이드 중 레일 위치가 바뀌지 않도록 슬라이드(.v2c-slide)는 건드리지 않는다.
   autoplay 정지 정책은 기존 JS 사양을 그대로 둔다(여기서 변경하지 않음). */
/* V2 INTERACTIONS — CELEBRITY END */


/* V2 INTERACTIONS — STYLE START */

/* 메인 STYLE TAG 카드 — 이미지가 카드 자체이므로 안쪽 img 만 확대 */
.v2st-home-card { transition: transform var(--v2i-dur) var(--v2i-ease); }
.v2st-home-card img { transition: transform 260ms var(--v2i-ease); }
@media (hover: hover) and (pointer: fine) {
    .v2st-home-card:hover { transform: translateY(-3px); }
    .v2st-home-card:hover img { transform: scale(1.03); }
}

/* STYLE 목록 카드 — masonry 의 grid-row-end 계산에 영향이 없도록
   카드가 아니라 이미지에만 scale 을 준다(높이 재계산 유발 금지). */
.v2st-card__media img { transition: transform 260ms var(--v2i-ease); }
.v2st-card__title { transition: opacity var(--v2i-dur) var(--v2i-ease); }
@media (hover: hover) and (pointer: fine) {
    .v2st-card__link:hover .v2st-card__media img { transform: scale(1.03); }
    .v2st-card__link:hover .v2st-card__title { opacity: .92; }
}

/* 코디 상품 카드 — 레일 overflow 에 잘리지 않도록 바깥 그림자 대신 이미지 안쪽 강조.
   (좌측 잘림 수정분을 되돌리지 않기 위해 카드에 margin/padding 을 주지 않는다) */
.v2st-coordi__img { transition: box-shadow var(--v2i-dur) var(--v2i-ease); }
.v2st-coordi__img img { transition: transform 260ms var(--v2i-ease); }
@media (hover: hover) and (pointer: fine) {
    .v2st-coordi__card:hover .v2st-coordi__img { box-shadow: 0 0 0 2px #d6dbe4; }
    .v2st-coordi__card:hover .v2st-coordi__img img { transform: scale(1.04); }
}

/* 추천 STYLE 카드 */
.v2st-relcard__img img { transition: transform 260ms var(--v2i-ease); }
@media (hover: hover) and (pointer: fine) {
    .v2st-relcard:hover .v2st-relcard__img img { transform: scale(1.04); }
}

/* 태그 칩 — 폭 변화가 없도록 배경/테두리만 */
.v2st-tags a, .v2st-chip { transition: background var(--v2i-dur) var(--v2i-ease),
                                       border-color var(--v2i-dur) var(--v2i-ease),
                                       color var(--v2i-dur) var(--v2i-ease); }

/* ※ STYLE 핀(.v2st-pin)에는 어떤 transform 도 추가하지 않는다.
     핀은 left/top % + translate(-50%,-50%) 로 좌표가 잡혀 있어
     transform 을 건드리면 좌표가 어긋난다. 기존 dot 효과만 유지. */

/* V2 INTERACTIONS — STYLE END */


/* V2 INTERACTIONS — MAGAZINE START */
/* 매거진 hover 는 v2-magazine.css 로 옮겼다.
   이유: 여기 있던 규칙이 실제 DOM 과 맞지 않아 전혀 발동하지 않았다.
     · .v2cf-card__image  → 실제로 존재하지 않는 클래스 (실측 0개)
     · [aria-hidden="false"] → 캐러셀 JS 는 보이는 슬라이드에서 속성을 제거하므로 절대 매칭 안 됨
   실제 카드는 .v2mag-card 이고 메인/목록/상세가 이를 공유한다. */
/* V2 INTERACTIONS — MAGAZINE END */


/* V2 INTERACTIONS — INTERNAL PAGES START */
/* 버튼·아이콘 공통 — 위치 이동 없이 색/그림자 중심 (클릭 지점이 흔들리지 않게) */

.v2live-shell .v2st-btn,
.v2live-shell .v2st-act {
    transition: background var(--v2i-dur) var(--v2i-ease),
                border-color var(--v2i-dur) var(--v2i-ease),
                color var(--v2i-dur) var(--v2i-ease);
}

/* 비활성 요소에는 hover 를 주지 않는다 */
.v2live-shell [disabled],
.v2live-shell [aria-disabled="true"] { transition: none; }
@media (hover: hover) and (pointer: fine) {
    .v2live-shell [disabled]:hover,
    .v2live-shell [aria-disabled="true"]:hover { transform: none; box-shadow: none; }
}

/* 터치 기기: hover 대신 짧은 눌림 피드백만.
   레일 스냅/핀 좌표를 깨지 않도록 카드가 아닌 버튼류에만 적용한다. */
@media (hover: none) {
    .v2live-shell .v2st-btn:active,
    .v2live-shell .v2st-act:active,
    .v2-home-shortcut:active { transform: scale(.97); }
}

/* 하단 고정 네비는 기존 active 상태만 유지 — hover 효과 추가하지 않는다 */

/* V2 INTERACTIONS — INTERNAL PAGES END */


/* V2 INTERACTIONS — REDUCED MOTION START */
@media (prefers-reduced-motion: reduce) {
    .v2live-shell *,
    .v2-home * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .v2live-head-tabs a:hover { transform: none; }
    .v2c-card:hover, .v2live-card:hover,
    .v2st-home-card:hover, .v2-home-shortcut:hover { transform: none; }
}
/* V2 INTERACTIONS — REDUCED MOTION END */

/* V2 INTERACTIONS END */

/* V2 SEO — PAGE TITLE START */
/* SHOP 페이지 H1. 문서 주제를 사람과 크롤러 모두에게 보이게 노출한다.
   (숨김 텍스트는 검색엔진이 가치를 낮게 평가하므로 감추지 않는다) */
.v2live-page-title{
    margin:14px 16px 4px;
    font-size:18px;
    font-weight:900;
    letter-spacing:-.02em;
    color:#16161a;
    line-height:1.3;
}
@media (min-width:768px){ .v2live-page-title{margin:18px 20px 6px;font-size:22px} }
@media (min-width:1200px){ .v2live-page-title{margin:20px 24px 8px;font-size:25px} }
/* V2 SEO — PAGE TITLE END */

/* SHOP intro (GEO: 페이지 주제 설명 문단) */
.v2live-page-intro{
    margin:0 16px 10px;
    font-size:13px;
    line-height:1.6;
    color:#6b6f78;
}
@media (min-width:768px){ .v2live-page-intro{margin:0 20px 12px;font-size:14px} }
@media (min-width:1200px){ .v2live-page-intro{margin:0 24px 14px;font-size:14.5px;max-width:860px} }