/* ============================================================
 * 배때지 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.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}

/* ============================================================
 *  상세 · "이 스타일 코디 상품" 가로 슬라이더
 *    모바일: 스와이프 / 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}