/* ==========================================================================
   홈 전용 (v2) — 우리만 있는 홈 기능을 외주본 언어로.
   STYLE SNAPS(스타일링 착용샷 가로 줄 + 착용 상품 팝업) · 인스타그램 어드민 6칸.
   클래스 이름은 기존 홈 스크립트가 만드는 그대로 둔다(스크립트는 한 글자도 안 바꿈).
   ========================================================================== */

/* 외주본 원형 화살표(.best-arrow)와 같은 모양, 위치만 자유 */
.wm-round {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 9px #00000012;
}
.wm-round svg { width: 23px; height: 23px; display: block; }
.wm-round[disabled] { opacity: 0.3; cursor: default; }

/* STYLE SNAPS — 외주본 BEST 줄(.best-track) 규칙 */
.snaps .section-top { align-items: flex-end; }
.snaps__desc { margin: 12px 0 0; color: #888; font-size: 15px; line-height: 1.7; }
.snaps__ctrl { display: flex; align-items: center; gap: 10px; }
.snaps__ctrl .snaps__all { margin-left: 10px; }
.snaps__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 64px) / 5);
    gap: 16px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #999 #eee;
    padding-bottom: 22px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.snap { scroll-snap-align: start; cursor: pointer; }
.snap__ph { aspect-ratio: 2 / 3; overflow: hidden; background: #f2f2f2; }
.snap__ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s; }
.snap:hover .snap__ph img { transform: scale(1.04); }
.snap:focus-visible { outline: 2px solid #777; outline-offset: 4px; }
@media (max-width: 700px) {
    .snaps .section-top { flex-direction: column; align-items: flex-start; }
    .snaps__ctrl .snaps__nav { display: none; }
    .snaps__ctrl .snaps__all { margin-left: 0; }
    .snaps__track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
}

/* 착용 상품 팝업 — 외주본 상세 팝업(.detail) 언어: 흰 판 · 왼쪽 사진 · 오른쪽 정보 */
.sty-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; background: #0008; }
.sty-modal.on { display: flex; }
.sty-modal__panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(1000px, 100%);
    max-height: 90svh;
    overflow: auto;
    background: #fff;
}
.sty-modal__close { position: absolute; top: 15px; right: 15px; z-index: 3; padding: 6px; background: #fff9; }
.sty-modal__left { min-width: 0; }
.sty-modal__photo { aspect-ratio: 4 / 5; background: #f2f2f2; }
.sty-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sty-modal__cap { padding: 14px 20px 18px; font-size: 15px; color: #777; }
.sty-modal__right { display: flex; flex-direction: column; justify-content: center; padding: 55px 38px; min-width: 0; }
.sty-modal__right > .eyebrow { margin-bottom: 22px; }
.sty-carousel { position: relative; }
.sty-carousel__vp { overflow: hidden; }
.sty-track { display: flex; transition: transform 0.3s; }
.sty-prod { flex: 0 0 100%; min-width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.sty-prod__img { display: block; width: 100%; max-width: 280px; aspect-ratio: 3 / 4; background: #f2f2f2; overflow: hidden; }
.sty-prod__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sty-prod__nm { margin-top: 18px; font-size: 25px; line-height: 1.4; letter-spacing: -1px; font-weight: 650; }
.sty-prod__price { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 20px; }
.sty-prod__price s { color: #999; font-size: 15px; }
.sty-prod__price b { font-weight: 650; }
.sty-prod__buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    min-height: 50px;
    margin-top: 24px;
    background: #171717;
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0.5px;
}
.sty-prod__off { margin-top: 18px; font-size: 15px; color: #999; }
.sty-empty2 { color: #999; font-size: 15px; }
.sty-nav { position: absolute; top: 30%; z-index: 2; transform: translateY(-50%); }
.sty-nav--prev { left: -16px; }
.sty-nav--next { right: -16px; }
.sty-dots { display: flex; gap: 6px; margin-top: 20px; }
.sty-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ddd; cursor: pointer; }
.sty-dots i.on { background: #111; }
@media (max-width: 700px) {
    .sty-modal { padding: 0; align-items: stretch; }
    .sty-modal__panel { grid-template-columns: 1fr; max-height: none; height: 100%; }
    .sty-modal__right { padding: 24px 22px 34px; justify-content: flex-start; }
    .sty-nav { display: none; }
}

/* 인스타그램 6칸 — 외주본 .instagram-grid(정사각 6칸) */
.wmig__desc { margin: -8px 0 18px; color: #888; font-size: 15px; }
.instagram-grid .wmig__cell { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: #f2f2f2; }
.instagram-grid .wmig__cell img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.wmig__cell::after { content: ""; position: absolute; inset: 0; background: #0005; opacity: 0; transition: opacity 0.2s; }
.wmig__cell:hover::after { opacity: 1; }
.wmig__ic { position: absolute; inset: 0; z-index: 1; width: 26px; height: 26px; margin: auto; color: #fff; opacity: 0; transition: opacity 0.2s; }
.wmig__cell:hover .wmig__ic { opacity: 1; }
.wmig__reel { position: absolute; top: 8px; right: 8px; z-index: 1; width: 17px; height: 17px; color: #fff; filter: drop-shadow(0 1px 3px #0009); }

/* BEST 줄 — 어드민 칸(상품 아님)은 외주본 카드 모양 그대로 */
.best-track .product .product-image img { object-position: center; }

[data-theme="dark"] .wm-round,
[data-theme="dark"] .sty-modal__panel { background: #161616; color: #eee; border-color: #333; }
[data-theme="dark"] .snap__ph,
[data-theme="dark"] .sty-modal__photo,
[data-theme="dark"] .sty-prod__img { background: #1c1c1c; }
[data-theme="dark"] .sty-prod__buy { background: #eee; color: #111; }
[data-theme="dark"] .sty-dots i { background: #444; }
[data-theme="dark"] .sty-dots i.on { background: #eee; }