/* ============================================================
 * 배때지 V2 · STYLE (목록 / 상세 / 메인 섹션)
 *   브레이크포인트는 V2 메인 계열 규약을 따른다: 768 / 1200
 *   (SHOP 계열의 600/1024 와 섞지 않는다)
 * ========================================================== */

.v2st-page,
.v2st-view{
    --st-pad:16px;
    max-width:1440px;margin:0 auto;
    padding:0 var(--st-pad) calc(90px + env(safe-area-inset-bottom));
    box-sizing:border-box;
}
@media (min-width:768px){ .v2st-page,.v2st-view{--st-pad:20px} }
@media (min-width:1200px){ .v2st-page,.v2st-view{--st-pad:24px} }

/* ---------------- 목록 헤더 / 필터 ---------------- */

.v2st-head{padding:18px 0 12px}
.v2st-head h1{margin:0;font-size:24px;font-weight:900;letter-spacing:-.02em;color:#16161a}
.v2st-head p{margin:4px 0 0;font-size:13px;color:#8b8f98}
@media (min-width:768px){ .v2st-head h1{font-size:28px} }

.v2st-filter{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.v2st-filter__row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
                  -webkit-overflow-scrolling:touch;padding-bottom:2px;overscroll-behavior-x:contain}
.v2st-filter__row::-webkit-scrollbar{display:none}
.v2st-chip{flex:0 0 auto;padding:8px 15px;border-radius:999px;border:1px solid #e2e5ea;
           background:#fff;color:#4a4d55;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.v2st-chip.on{background:#16161a;border-color:#16161a;color:#fff}
.v2st-filter__sort{display:flex;gap:14px}
.v2st-sort{font-size:13px;color:#8b8f98;text-decoration:none;font-weight:600}
.v2st-sort.on{color:#16161a;font-weight:800;text-decoration:underline;text-underline-offset:3px}

.v2st-tagnote{font-size:13px;color:#4a4d55;margin:0 0 14px}
.v2st-tagnote a{color:#2f6bff;margin-left:8px}

/* ---------------- Masonry ----------------
   CSS columns 대신 "행 스팬 grid".
     · 순서가 가로로 흐른다(읽기 혼란 없음)
     · iPad Safari 의 column break 로 카드가 쪼개지는 문제가 없다
     · 카드 높이는 이미지 비율에 따라 JS 가 --span 을 넣어 결정한다
       (JS 미동작 시에도 grid-auto-rows 기본값으로 균일 카드로 보인다) */

.v2st-masonry{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
    grid-auto-rows:8px;              /* 잘게 쪼갠 행 — 카드가 span 으로 높이를 차지 */
    align-items:start;
}
@media (min-width:768px){  .v2st-masonry{grid-template-columns:repeat(3, minmax(0,1fr));gap:16px} }
@media (min-width:1200px){ .v2st-masonry{grid-template-columns:repeat(4, minmax(0,1fr));gap:18px} }
@media (min-width:1600px){ .v2st-masonry{grid-template-columns:repeat(5, minmax(0,1fr))} }

.v2st-card{min-width:0;grid-row-end:span 40}   /* JS 가 실제 비율로 덮어쓴다 */
.v2st-card__link{display:block;text-decoration:none;color:inherit}

.v2st-card__media{
    position:relative;width:100%;
    aspect-ratio:3/4;                /* JS 가 실제 비율로 덮어쓴다 (CLS 방지 기본값) */
    border-radius:14px;overflow:hidden;background:#eef0f3;
    min-width:0;
}
.v2st-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.v2st-card__media picture{display:contents}
.v2st-card__media.is-broken::after{
    content:'이미지 준비중';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:12px;color:#a9adb5;background:#eef0f3
}
.v2st-card__noimg{position:absolute;inset:0;background:#eef0f3}

.v2st-card__count{
    position:absolute;top:10px;right:10px;z-index:2;
    background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:800;
    padding:3px 8px;border-radius:999px;backdrop-filter:blur(2px)
}
.v2st-card__badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;gap:4px;flex-wrap:wrap;max-width:75%}
.v2st-badge{background:rgba(255,255,255,.92);color:#16161a;font-size:10.5px;font-weight:800;
            padding:3px 8px;border-radius:999px;white-space:nowrap}
.v2st-badge--pick{background:#16161a;color:#fff}

/* 이미지 하단 어두운 gradient — 텍스트 가독성 */
.v2st-card__grad{
    position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,0) 100%)
}

.v2st-card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 12px 13px;color:#fff}
.v2st-card__cat{display:inline-block;font-size:10.5px;font-weight:800;opacity:.85;margin-bottom:3px}
.v2st-card__title{
    margin:0;font-size:14px;font-weight:800;line-height:1.32;
    /* 제목이 길어도 카드 높이가 흔들리지 않게 2줄 고정 */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.v2st-card__desc{
    margin:3px 0 0;font-size:11.5px;line-height:1.4;opacity:.82;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden
}
.v2st-card__meta{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:11px;opacity:.8}

@media (min-width:768px){
    .v2st-card__title{font-size:15px}
    .v2st-card__desc{font-size:12px;-webkit-line-clamp:2}
}

/* ---------------- 더보기 / 빈 상태 ---------------- */

.v2st-more{display:flex;justify-content:center;padding:24px 0 8px;min-height:44px}
.v2st-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 26px;
          border-radius:999px;border:1px solid #d8dbe0;background:#fff;color:#16161a;
          font-size:14px;font-weight:800;text-decoration:none;cursor:pointer}
.v2st-btn:hover{background:#f5f7fa}
.v2st-empty{text-align:center;padding:60px 20px;color:#8b8f98}
.v2st-empty p{margin:0 0 16px;font-size:14px}

/* 로딩 skeleton */
.v2st-skel{grid-row-end:span 40}
.v2st-skel__b{width:100%;aspect-ratio:3/4;border-radius:14px;background:#eef0f3;
              animation:v2stPulse 1.2s ease-in-out infinite}
@keyframes v2stPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){ .v2st-skel__b{animation:none} }

.v2st-retry{display:flex;flex-direction:column;align-items:center;gap:10px;color:#8b8f98;font-size:13px}

/* ============================================================
 *  상세
 * ========================================================== */

.v2st-preview-note{background:#fff4e5;color:#a8620d;border:1px solid #ffe0b8;border-radius:10px;
                   padding:10px 12px;font-size:13px;margin:12px 0}

.v2st-actionbar{
    position:sticky;top:0;z-index:30;
    display:flex;align-items:center;gap:10px;
    padding:10px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid #eff1f4;margin-bottom:14px
}
.v2st-actionbar__t{flex:1;min-width:0;font-size:14px;font-weight:800;color:#16161a;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2st-act{
    flex:0 0 auto;min-width:44px;min-height:44px;   /* 최소 터치 영역 */
    display:inline-flex;align-items:center;justify-content:center;gap:4px;
    border:0;background:transparent;font-size:17px;color:#33363d;cursor:pointer;border-radius:10px
}
.v2st-act:hover{background:#f2f4f7}
.v2st-act:focus-visible{outline:2px solid #2f6bff;outline-offset:2px}
.v2st-act--like b{font-size:12px;font-weight:800}
.v2st-act--like.on{color:#e2365b}

/* ---------------- 이미지 stage + 핀 ---------------- */

.v2st-stages{display:flex;flex-direction:column;gap:14px}
.v2st-figure{margin:0}
.v2st-stage{
    position:relative;width:100%;margin:0 auto;
    aspect-ratio:3/4;                 /* JS 가 실제 비율로 덮어쓴다 */
    border-radius:14px;overflow:hidden;background:#eef0f3;
    max-width:100%;
}
@media (min-width:768px){  .v2st-stage{max-width:560px} }
@media (min-width:1200px){ .v2st-stage{max-width:680px} }

.v2st-stage img{display:block;width:100%;height:100%;object-fit:contain;
                  -webkit-user-select:none;user-select:none}

.v2st-pin{
    position:absolute;transform:translate(-50%,-50%);
    width:44px;height:44px;                  /* 최소 터치 영역 */
    padding:0;margin:0;border:0;background:transparent;cursor:pointer;
    display:flex;align-items:center;justify-content:center;z-index:3
}
.v2sp-pin__dot{
    display:block;width:15px;height:15px;border-radius:50%;
    background:#fff;border:3px solid #16161a;box-shadow:0 2px 10px rgba(0,0,0,.4);
    transition:transform .16s ease
}
.v2st-pin[aria-expanded="true"] .v2sp-pin__dot{transform:scale(1.28);background:#16161a;border-color:#fff}
.v2st-pin:focus-visible{outline:3px solid #2f6bff;outline-offset:0;border-radius:50%}
@media (prefers-reduced-motion:reduce){ .v2sp-pin__dot{transition:none} }

/* ---------------- 상품 팝오버 ---------------- */

.v2st-pop{
    position:absolute;z-index:60;width:250px;max-width:calc(100vw - 24px);
    background:#fff;border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.24);
    border:1px solid #eceef1;padding:10px
}
.v2st-pop[hidden]{display:none}
.v2st-pop__x{position:absolute;top:4px;right:6px;border:0;background:transparent;
             font-size:20px;line-height:1;color:#8b8f98;cursor:pointer;
             min-width:32px;min-height:32px;border-radius:8px}
.v2st-pop__link{display:flex;gap:10px;text-decoration:none;color:inherit;align-items:center}
.v2st-pop__img{flex:0 0 66px;width:66px;height:66px;border-radius:10px;overflow:hidden;background:#eef0f3}
.v2st-pop__img img{width:100%;height:100%;object-fit:cover;display:block}
.v2st-pop__i{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:14px}
.v2st-pop__i b{font-size:11px;color:#8b8f98;font-weight:700}
.v2st-pop__i > span{font-size:13px;color:#16161a;font-weight:700;line-height:1.3;
                    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2st-pop__i em{font-size:13px;font-weight:900;color:#16161a;font-style:normal}
.v2st-pop__go{font-size:11px !important;color:#2f6bff !important;font-weight:800 !important}

/* 모바일에서는 하단 sheet 로 — 작은 팝오버가 화면 밖으로 나가지 않게 */
@media (max-width:600px){
    .v2st-pop{
        position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));
        top:auto !important;width:auto;max-width:none;padding:12px
    }
    .v2st-pop__img{flex:0 0 74px;width:74px;height:74px}
}

/* ---------------- 상세 정보 ---------------- */

.v2st-info{padding:18px 0 6px;max-width:760px;margin:0 auto}
.v2st-info__cat{display:inline-block;font-size:11.5px;font-weight:800;color:#2f6bff;margin-bottom:6px}
.v2st-info__title{margin:0;font-size:20px;font-weight:900;line-height:1.35;color:#16161a}
@media (min-width:768px){ .v2st-info__title{font-size:24px} }
.v2st-info__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12px;color:#8b8f98}
.v2st-info__excerpt{margin:14px 0 0;font-size:14px;line-height:1.65;color:#4a4d55}
.v2st-info__body{margin:16px 0 0;font-size:14.5px;line-height:1.75;color:#33363d}
.v2st-info__body img{max-width:100%;height:auto;border-radius:10px}
.v2st-info__body p{margin:0 0 14px}
.v2st-info__body h2{font-size:17px;margin:24px 0 10px}
.v2st-info__body h3{font-size:15px;margin:20px 0 8px}

.v2st-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:18px 0 0}
.v2st-tags a{display:inline-block;padding:5px 11px;border-radius:999px;background:#f2f4f7;
             color:#4a4d55;font-size:12px;text-decoration:none;font-weight:600}
.v2st-tags a:hover{background:#e6e9ee}

/* ---------------- 태그된 상품 ---------------- */

.v2st-products{margin:30px auto 0;max-width:1000px}
.v2st-products h2{margin:0 0 14px;font-size:17px;font-weight:900;color:#16161a}
.v2st-products h2 small{color:#8b8f98;font-size:13px;margin-left:6px;font-weight:700}
.v2st-products__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
@media (min-width:768px){  .v2st-products__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px} }
@media (min-width:1200px){ .v2st-products__grid{grid-template-columns:repeat(5,minmax(0,1fr))} }

.v2st-prod{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;min-width:0}
.v2st-prod__img{width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#eef0f3;display:block}
.v2st-prod__img img{width:100%;height:100%;object-fit:cover;display:block}
.v2st-prod__b{font-size:11px;color:#8b8f98;font-weight:700;margin-top:4px}
.v2st-prod__t{font-size:12.5px;color:#33363d;line-height:1.35;
              display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2st-prod__p{font-size:13px;font-weight:900;color:#16161a}

/* ---------------- 관련 STYLE ---------------- */

.v2st-related{margin:34px auto 0;max-width:1000px}
.v2st-related h2{margin:0 0 14px;font-size:17px;font-weight:900;color:#16161a}
.v2st-related__rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;
                    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
                    scroll-snap-type:x proximity;padding-bottom:4px}
.v2st-related__rail::-webkit-scrollbar{display:none}
.v2st-relcard{flex:0 0 clamp(126px, 38vw, 176px);text-decoration:none;color:inherit;scroll-snap-align:start;min-width:0}
.v2st-relcard__img{display:block;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#eef0f3}
.v2st-relcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.v2st-relcard__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
                 margin-top:6px;font-size:12.5px;font-weight:700;color:#33363d;line-height:1.35}

/* ============================================================
 *  메인 STYLE TAG 섹션 (index.php)
 *  카드 크기는 공용 캐러셀(.v2c)이 관리하므로 여기서는 내용만 정의한다.
 * ========================================================== */

.v2st-home-card{position:relative;display:block;width:100%;text-decoration:none;color:#fff;
                border-radius:14px;overflow:hidden;background:#eef0f3;aspect-ratio:3/4}
.v2st-home-card img{width:100%;height:100%;object-fit:cover;display:block}
.v2st-home-card__grad{position:absolute;left:0;right:0;bottom:0;height:64%;
    background:linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,0) 100%)}
.v2st-home-card__pick{position:absolute;top:10px;left:10px;background:#16161a;color:#fff;
    font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px}
.v2st-home-card__b{position:absolute;left:0;right:0;bottom:0;padding:11px 12px 12px}
.v2st-home-card__t{margin:0;font-size:13.5px;font-weight:800;line-height:1.32;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2st-home-card__go{display:inline-block;margin-top:7px;font-size:11px;font-weight:800;
    background:rgba(255,255,255,.94);color:#16161a;padding:5px 11px;border-radius:999px}
.v2st-home-card__noimg{position:absolute;inset:0;background:#eef0f3}

/* ============================================================
 *  STYLE TAG 전용 3D 스택 슬라이더  "style-stack"  (메인 시그니처)
 *    · 중앙 100% + 좌우 82%(scale .82, rotateY 20°, opacity .55) + 뒤 카드 살짝
 *    · transform/opacity 만 변경(GPU) · 부모 높이 CSS 고정 → 슬라이드 중 CLS 0
 *    · 브레이크포인트 768 / 1200 (V2 메인 규약)
 *    · 엔진: v2-style-stack.js  (공용 celeb/coverflow 와 무관)
 * ========================================================== */
.v2stk-sec{margin-top:34px}
@media (min-width:768px){ .v2stk-sec{margin-top:42px} }
@media (min-width:1200px){ .v2stk-sec{margin-top:50px} }

.v2stk{
    position:relative;
    overflow:hidden;                 /* 좌우 끝 카드는 opacity 로 사라지고, 가로 넘침만 클립 */
    padding:16px 0 10px;             /* hover translateY(-6px)/그림자 여유 → 상단 클립 방지 */
    /* 중앙 카드 실제 폭(px). 이 값만으로 stage 높이(3:4)가 결정된다 → 높이 고정 */
    --stk-w:clamp(198px, 58vw, 300px);
}
@media (min-width:768px){  .v2stk{--stk-w:clamp(288px, 42vw, 400px)} }
@media (min-width:1200px){ .v2stk{--stk-w:clamp(340px, 30vw, 452px)} }

.v2stk-stage{
    position:relative;
    width:100%;
    height:calc(var(--stk-w) * 4 / 3);   /* 중앙 카드(3:4) 기준 고정 높이 → CLS 0 */
    perspective:1400px;
    touch-action:pan-y;                  /* 세로 스크롤은 브라우저, 가로만 슬라이더 */
    cursor:grab;
}
.v2stk-stage.is-grabbing{cursor:grabbing}

.v2stk-track{
    position:absolute; inset:0;
    list-style:none; margin:0; padding:0;
    transform-style:preserve-3d;
}
.v2stk-slide{
    position:absolute; top:0; left:50%;
    width:var(--stk-w);
    height:calc(var(--stk-w) * 4 / 3);
    margin-left:calc(var(--stk-w) / -2);   /* 가로 중앙 정렬 */
    will-change:transform, opacity;
    transform-origin:center center;
    backface-visibility:hidden;
    transition:transform 580ms cubic-bezier(.22,.61,.36,1), opacity 580ms ease;
}
/* JS 초기화 전(FOUC) — 첫 카드가 위로 오도록 */
.v2stk-slide:first-child{z-index:2}

.v2stk-slide .v2st-home-card{
    height:100%;
    aspect-ratio:auto;                     /* 슬라이드 고정 높이를 그대로 채운다 */
    box-shadow:0 8px 22px rgba(20,20,26,.14);
    transition:box-shadow .3s ease, transform .3s ease;
}
/* 중앙 카드 — 살짝 떠 있는 느낌(그림자 강화) */
.v2stk-slide.is-center .v2st-home-card{
    box-shadow:0 22px 52px rgba(20,20,26,.32), 0 6px 16px rgba(20,20,26,.18);
}
/* hover 는 PC(정밀 포인터)에서만 — 모바일/터치는 효과 제거 */
@media (hover:hover) and (pointer:fine){
    .v2stk-slide.is-center .v2st-home-card:hover{ transform:translateY(-6px); }
}

/* prev / next — PC·태블릿에서만 노출(터치는 스와이프) */
.v2stk-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:40;
    width:44px; height:44px; border-radius:50%;
    border:1px solid #e6e6ec; background:rgba(255,255,255,.94);
    color:#16161a; font-size:22px; line-height:1; font-weight:700;
    display:none; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 6px 18px rgba(20,20,26,.16); backdrop-filter:blur(4px);
}
.v2stk-nav--prev{left:8px}
.v2stk-nav--next{right:8px}
.v2stk-nav:hover{background:#fff}
.v2stk-nav:focus-visible{outline:2px solid #2f6bff; outline-offset:2px}
@media (min-width:768px){ .v2stk-nav{display:inline-flex} }

@media (prefers-reduced-motion:reduce){
    .v2stk-slide, .v2stk-slide .v2st-home-card{transition:none}
}

/* ============================================================
 *  상세 · "이 스타일 코디 상품" 가로 슬라이더
 *    모바일: 스와이프 / PC: 여러 개 노출
 * ========================================================== */

.v2st-coordi{margin:18px auto 0;max-width:1000px}
.v2st-coordi h2{margin:0 0 12px;font-size:16px;font-weight:900;color:#16161a}
.v2st-coordi h2 small{color:#8b8f98;font-size:13px;margin-left:6px;font-weight:700}

.v2st-coordi__rail{
    display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    /* 카드의 강조 테두리가 잘리지 않도록 안쪽 여백을 주고,
       그만큼 레일을 바깥으로 빼서 카드가 페이지 좌우 여백과 정확히 맞게 한다.
       (예전에는 카드에 margin:-6px 를 줘서 첫 카드가 overflow 에 잘렸다) */
    padding:6px;
    margin-inline:-6px;
    scroll-padding-inline:6px;
}
.v2st-coordi__rail::-webkit-scrollbar{display:none}

.v2st-coordi__card{
    /* 화면 폭에 따라 부드럽게 늘어나는 유동 카드 (고정 px 아님) */
    flex:0 0 clamp(112px, 30vw, 150px);
    display:flex;flex-direction:column;gap:3px;
    text-decoration:none;color:inherit;min-width:0;scroll-snap-align:start;
    border-radius:12px;padding:0;margin:0;
    box-sizing:border-box;
    transition:background .25s ease, box-shadow .25s ease;
}
@media (min-width:768px){  .v2st-coordi__card{flex:0 0 clamp(140px, 18vw, 168px)} }
@media (min-width:1200px){ .v2st-coordi__card{flex:0 0 clamp(156px, 13vw, 184px)} }

.v2st-coordi__img{display:block;width:100%;aspect-ratio:1/1;border-radius:10px;
                  overflow:hidden;background:#eef0f3}
.v2st-coordi__img img{width:100%;height:100%;object-fit:cover;display:block}
.v2st-coordi__b{font-size:11px;color:#8b8f98;font-weight:700;margin-top:4px}
.v2st-coordi__t{font-size:12.5px;color:#33363d;line-height:1.35;
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v2st-coordi__p{font-size:13px;font-weight:900;color:#16161a}

/* 핀 클릭 시 해당 카드 강조 (2초) */
.v2st-coordi__card.is-hit .v2st-coordi__img{
    box-shadow:0 0 0 3px #2f6bff;    /* 이미지에만 테두리 → 레일에 잘리지 않는다 */
}
.v2st-coordi__card.is-hit .v2st-coordi__t{color:#2f6bff}
@media (prefers-reduced-motion:reduce){
    .v2st-coordi__card{transition:none}
}

/* ============================================================
 *  상세 · 핀 스타일 (반투명 흰 원 + 맥동)
 * ========================================================== */

.v2st-pin .v2sp-pin__dot{
    width:18px;height:18px;border:0;
    background:rgba(255,255,255,.92);
    box-shadow:0 2px 10px rgba(0,0,0,.35);
    position:relative;
}
/* 바깥으로 퍼지는 halo */
.v2st-pin .v2sp-pin__dot::after{
    content:'';position:absolute;inset:-7px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.75);
    animation:v2stPulseRing 2.2s ease-out infinite;
}
@keyframes v2stPulseRing{
    0%   {transform:scale(.72);opacity:.9}
    70%  {transform:scale(1.25);opacity:0}
    100% {transform:scale(1.25);opacity:0}
}
/* 중앙 점 */
.v2st-pin .v2sp-pin__dot::before{
    content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;
    margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#16161a;
}
.v2st-pin:hover .v2sp-pin__dot,
.v2st-pin:focus-visible .v2sp-pin__dot{transform:scale(1.18);background:#fff}
.v2st-pin.is-press .v2sp-pin__dot{transform:scale(.9)}
.v2st-pin[aria-expanded="true"] .v2sp-pin__dot{
    transform:scale(1.24);background:#fff;
}
.v2st-pin[aria-expanded="true"] .v2sp-pin__dot::after{animation:none;opacity:0}

@media (prefers-reduced-motion:reduce){
    .v2st-pin .v2sp-pin__dot::after{animation:none;opacity:.5}
    .v2st-pin .v2sp-pin__dot{transition:none}
}

/* 관련 STYLE 카드 메타 */
.v2st-relcard__m{display:flex;gap:5px;margin-top:3px;font-size:11px;color:#8b8f98}
@media (min-width:768px){
    .v2st-related__rail{flex-wrap:wrap;overflow:visible}
    .v2st-relcard{flex:0 0 calc(25% - 9px)}
}
@media (min-width:1200px){
    .v2st-relcard{flex:0 0 calc(16.666% - 10px)}
}

/* 제목·메타·태그를 대표이미지 위로 올린 헤더 */
.v2st-lead{max-width:760px;margin:0 auto;padding:2px 0 14px}
.v2st-lead .v2st-info__title{margin:0}
.v2st-lead .v2st-info__meta{margin-top:8px}
.v2st-tags--lead{margin:10px 0 0}

/* <picture> 래퍼가 레이아웃을 바꾸지 않게 (webp+원본 fallback 서빙용) */
.v2st-home-card picture{display:contents}

.v2st-stage picture,.v2st-coordi__img picture,.v2st-relcard__img picture{display:contents}

/* ============================================================================
   카드 전체 클릭 — «늘린 링크»(stretched link)              2026-08-20
   ----------------------------------------------------------------------------
   종전에는 카드 전체가 <a> 라, 링크 하나의 앵커 텍스트에 배지·카테고리·제목·
   본문 발췌·작성자·좋아요·조회수가 전부 들어가 160~249자짜리 앵커가 됐다.
   이제 링크는 «제목»(.v2st-card__link) 하나뿐이고, 이 규칙이 카드 전체를 클릭 영역으로 만든다.
     · 기준 상자 = .v2st-card__media{position:relative;overflow:hidden}
       (본문 오버레이 .v2st-card__body 가 그 안에 있어 media 가 곧 카드 전체다)
     · 카드 안에 다른 클릭 요소가 없어 z-index 충돌 없음
     · <article> 은 포커스를 못 받으므로 포커스 링은 :focus-within 으로 준다
   ========================================================================== */
.v2st-card{position:relative}
/* ★ 늘린 영역의 «컨테이닝 블록» 은 .v2st-card__body 다
     (.v2st-card__body{position:absolute;left:0;right:0;bottom:0} — 하단 텍스트 오버레이).
     그래서 inset:0 을 쓰면 카드 하단 텍스트 영역만 덮여 사진 위 클릭이 죽는다(실측).
     좌우·아래는 body 와 같게 두고 위로만 크게 늘린 뒤
     .v2st-card__media{overflow:hidden} 이 카드 경계로 잘라내게 한다.
     → 결과적으로 «카드 전체» 가 정확히 클릭 영역이 된다. 절대배치라 레이아웃 영향 0. */
.v2st-card__link::after{content:"";position:absolute;left:0;right:0;bottom:0;top:-9999px;z-index:2}
.v2st-card__link:hover{text-decoration:underline}
.v2st-card:focus-within .v2st-card__media{outline:2px solid #2f6bff;outline-offset:2px}