/* BASIC css start */
.full-wrapper { max-width: none; --bs-gutter-x: 200px; }
.full-wrapper .no-gutters { --bs-gutter-x: 200px; }
.main-banner-wrapper { padding-left: 0; padding-right: 0; }
.main-banner-wrapper .cowave-swiper { height: 50vh; }
.main-banner-wrapper .cowave-swiper .cowave-swiper-slide { display: flex; justify-content: center; align-items: center; }
.main-banner-wrapper .cowave-swiper .cowave-swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.main-banner-wrapper .cowave-swiper .cowave-swiper-scrollbar {
    --swiper-scrollbar-bottom: 40px;
    --swiper-scrollbar-sides-offset: 30%;
    --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.20);
    --swiper-scrollbar-border-radius: 99px;
    bottom: var(--swiper-scrollbar-bottom, 2px);
    height: var(--swiper-scrollbar-size, 2px);
}
.main-banner-wrapper .cowave-swiper .cowave-swiper-scrollbar-drag {
    --swiper-scrollbar-drag-bg-color: #000;
}
.main-banner-wrapper .cowave-swiper .cowave-swiper-pagination-custom {
    position: absolute; left: auto; right: -30px; bottom: -8px; width: auto; text-align: right;
    --swiper-pagination-fraction-color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: .75rem;
    font-weight: 500;
}
.main-banner-wrapper .cowave-swiper .cowave-swiper-button-prev,
.main-banner-wrapper .cowave-swiper .cowave-swiper-button-next {
    width: 60px;
    height: 60px;
}
.main-banner-wrapper .cowave-swiper .cowave-swiper-button-prev {
    left: calc(0.5 * var(--bs-gutter-x))
}
.main-banner-wrapper .cowave-swiper .cowave-swiper-button-next {
    right: calc(0.5 * var(--bs-gutter-x))
}
.main-banner-wrapper .cowave-swiper .cowave-swiper-button-prev:after {
    content: '';
    background: url(//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_cheveron_left_60.svg) no-repeat center center;
    background-size: contain;
    width: 100%; height: 100%;
}
.main-banner-wrapper .cowave-swiper .cowave-swiper-button-next:after {
    content: '';
    background: url(//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_cheveron_right_60.svg) no-repeat center center;
    background-size: contain;
    width: 100%; height: 100%;
}
.sub-banner-wrapper { display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: center; padding: 40px 0 60px 0; }
.sub-banner--content { display: flex; flex: 1 1 50%; max-width: 50%; }
.sub-banner--content img { display: block; width: 100%; height: auto; }
.products-wrapper { padding-top: 60px; }
.products-wrapper .prds--image { margin-bottom: 16px; }
.products-wrapper .prds--price-wrap { justify-content: space-between; }
.products--title { display: flex; justify-content: center; align-items: center; color: var(--cw-heading-color); text-align: center; font-size: 32px; font-weight: 700; line-height: 40px; }
.products-wrapper .goods-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px 20px; padding: 40px 0 60px 0; }
.products-wrapper .btns { display: flex; align-items: center; flex-direction: column; padding-bottom: 60px; }
.products-wrapper .btns .more-btn {
    --bs-btn-line-height: 40px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 500;
    display: flex; width: 300px; justify-content: center; align-items: center; gap: 8px;
}
.in-banner-wrapper { display: flex; padding: 40px 0 60px 0; justify-content: flex-end; align-items: stretch; gap: 20px; align-self: stretch; }
.in-banner-wrapper .side-banner { flex-shrink: 0; position: relative; display: flex; width: 31.25%; justify-content: center; align-items: center; }
.in-banner-wrapper .side-banner--img { width: 100%; height: 100%; object-fit: cover; }
.in-banner-wrapper .side-banner--text { z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--cw-color-white); text-align: center; font-size: 2rem; font-weight: 700; line-height: 40px; letter-spacing: 11px; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.in-banner-wrapper .goods-list { flex: 1; padding: 0; gap: 40px 20px; }
.md-pick .goods-list { grid-template-columns: repeat(3, 1fr); }

.goods-list--item .item-image .ico-wish { display: flex; align-items: center; flex-direction: column; }
.goods-list--item .item-image .my-wish-list { display: inline-block; width: 32px; height: 32px; padding-top: 27px; background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_wish_off.svg'); }
.goods-list--item .item-image .my-wish-list.wish-on { background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_wish_on.svg'); }
.goods-list--item .item-image .my-wish-count { color: var(--cw-color-60); font-size: .75rem; }
.goods-list--item .goods--engname { display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: .813rem; line-height: 18px; color: var(--cw-color-80); margin-top: 4px; }
.goods--icons { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.goods--icons span { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; }

/* 옵션 미리보기 */
.mk_opt_top_text { color: var(--cw-heading-color); font-weight: 700; font-size: .75rem; white-space: nowrap; }
.mk_prd_option_list { width: 100px !important; padding: 10px !important; font-family: var(--bs-body-font-family) !important; color: var(--cw-color-80); font-size: .688rem !important; font-weight: 500; border: 1px solid var(--cw-color-30) !important; border-radius: 3px; }
.mk_prd_option_list .option-name { padding: 10px 0 6px !important; font-size: .688rem !important; color: var(--cw-heading-color) !important; background: none !important; border: 0 !important; font-weight: 700; }
.mk_opt_unit { display: flex !important; align-items: center; gap: 4px; white-space: nowrap; }
.mk_opt_top_close a,
.mk_bt_opt_close a { color: var(--cw-color-80); }

/* 태블릿 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .header-container--md { display: none !important; }
    .header-container { display: flex !important; }
    .full-wrapper { --bs-gutter-x: 24px; padding-bottom: 80px; }
    .full-wrapper .no-gutters { --bs-gutter-x: 24px; }
    .main-banner-wrapper .cowave-swiper .cowave-swiper-button-prev,
    .main-banner-wrapper .cowave-swiper .cowave-swiper-button-next { display: none; }
    .main-banner-wrapper .cowave-swiper .cowave-swiper-scrollbar { --swiper-scrollbar-bottom: 20px; }
    .sub-banner-wrapper { padding: 24px 0 0 0; gap: 4px; }
    .sub-banner--content { justify-content: space-between; }
    .products-wrapper { padding-top: 50px; }
    .products--title { font-size: 1.25rem; line-height: 28px; }
    .products-wrapper .goods-list { padding: 16px 0 40px 0; gap: 40px 16px; }
    .products-wrapper .btns { padding-bottom: 0; }
    .in-banner-wrapper { flex-direction: column; gap: 16px; padding: 16px 0 0 0; }
    .in-banner-wrapper .side-banner { width: 100%; height: 50vh; }
    .in-banner-wrapper .goods-list { padding: 0 0 30px 0; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; }
    .in-banner-wrapper .goods-list--item { flex: 0 0 calc(25% - 12px); min-width: calc(25% - 12px); }
    .products-wrapper .goods-list::-webkit-scrollbar { height: 2px; }
    .products-wrapper .goods-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.10); }
    .products-wrapper .goods-list::-webkit-scrollbar-thumb { background: #000; }
}

/* 모바일 */
@media (max-width: 767.98px) {
    .header-container--md { display: none !important; }
    .header-container { display: flex !important; }
    .full-wrapper { --bs-gutter-x: 16px; padding-bottom: 60px; }
    .full-wrapper .no-gutters { --bs-gutter-x: 16px; }
    .main-banner-wrapper .cowave-swiper .cowave-swiper-button-prev,
    .main-banner-wrapper .cowave-swiper .cowave-swiper-button-next { display: none; }
    .main-banner-wrapper .cowave-swiper .cowave-swiper-scrollbar { --swiper-scrollbar-bottom: 20px; }
    .sub-banner-wrapper { flex-direction: column; padding: 16px 0 0 0; gap: 4px; }
    .sub-banner--content { justify-content: space-between; max-width: 100%; }
    .products-wrapper { padding-top: 50px; }
    .products--title { font-size: 1.25rem; line-height: 28px; }
    .products-wrapper .goods-list { padding: 20px 0 40px 0; gap: 20px 8px; grid-template-columns: repeat(2, 1fr); }
    .products-wrapper .btns { padding-bottom: 0; }
    .products-wrapper .btns .more-btn { width: 100%; max-width: none; }
    .in-banner-wrapper { flex-direction: column; gap: 20px; padding: 20px 0 0 0; }
    .in-banner-wrapper .side-banner { width: 100%; height: 50vh; }
    .in-banner-wrapper .goods-list { padding: 0 0 40px 0; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; }
    .in-banner-wrapper .goods-list--item { flex: 0 0 calc(50% - 4px); min-width: calc(50% - 4px); }
    .products-wrapper .goods-list::-webkit-scrollbar { height: 2px; }
    .products-wrapper .goods-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.10); }
    .products-wrapper .goods-list::-webkit-scrollbar-thumb { background: #000; }
}

/* ==========================================
   MAPSYNA SEARCHBAR — CLEAN FINAL VERSION
   ========================================== */

/* 검색창 전체 구역 (배너 아래 FULL WIDTH) */
.m-searchbar {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px 0 15px 0 !important;
    padding: 0 !important;
}

/* 검색창 박스 */
.searchbox {
    width: 800px;                /* PC 폭 */
    max-width: 90%;              /* 화면 줄어들면 자동 */
    height: 30px;                /* 얇고 깔끔 */
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}

/* 검색 input */
.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    outline: none;
}
.search-input::placeholder {
    color: rgba(255,255,255,0.65);
}

/* 돋보기 아이콘 */
.search-btn {
    border: none;
    background: transparent;
    padding: 0;
}
.search-btn img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: invert(100%) brightness(200%);
}

/* 모바일 */
@media (max-width: 768px) {
    .searchbox {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        height: 32px !important;
        margin: 0 10px !important;
    }
}
/* === 돋보기 깨짐 방지 + 높이 보정 === */

/* 검색창 박스 높이(세로 공간 확보) */
.searchbox {
    height: 32px !important;         /* ★ 30px → 32px로 살짝 키우기 */
    padding: 0 12px !important;
    align-items: center !important;
}

/* input도 같은 세로 기준으로 맞추기 */
.search-input {
    line-height: 32px !important;    /* ★ 돋보기와 input이 같은 축을 가지도록 */
}

/* 돋보기 아이콘 비율 고정 (절대 찌그러지지 않음) */
.search-btn img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;      /* ★ flex shrink 방지 */
    min-height: 16px !important;
    object-fit: contain !important;  /* ★ 압축/늘어남 방지 */
    display: block !important;
}
/* MAPSYNA 3단 메인 비디오 완전 복구 핵심 CSS */

/* 전체 컨테이너를 가로 3단 고정 */
.m-banner-fade {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* wrapper는 절대 column이 되면 안됨 */
.m-banner-fade .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 각각의 비디오 칸을 정확히 1/3로 고정 */
.m-banner-fade .swiper-slide {
    width: 33.333% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative;
}

/* 비디오를 칸 안에 꽉 채우기 (커지거나 흘러내리지 않게) */
.m-banner-fade video {
    width: 100% !important;
    height: 400px !important;   /* ★ MAPSYNA 3단 고정 기준 */
    object-fit: cover !important;
    display: block !important;
}
.search-btn img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    object-fit: contain !important;
    display: block !important;
    filter: invert(100%) brightness(200%);
}
.search-btn img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;

    filter: none !important;           /* ★ 네이비용 흰색 필터 제거 */
    opacity: 0.8 !important;           /* 살짝 은은하게 */
}
/* =========================================================
   MAPSYNA 검색창 — 각진 + 풀사이즈 버전
========================================================= */

/* 배너 아래 전체 검색 영역 */
.m-searchbar {
    width: 100%;
    padding: 12px 0;
    background: #f2f2f2;              /* 깔끔한 연회색 배경 */
    display: flex;
    justify-content: center;          /* 모바일 대비 */
    box-sizing: border-box;
}

/* 완전 풀사이즈 검색박스 */
.searchbox {
    width: 100% !important;           /* ★ 양쪽 끝까지 쭉 풀사이즈 */
    max-width: 100% !important;
    height: 34px !important;          /* 돋보기 안 깨지는 최소 높이 */
    
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0 !important;      /* ★ 완전 각진 형태 */
    
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
}

/* 검색 입력창 */
.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #333;
}

.search-input::placeholder {
    color: #999;
}

/* 돋보기 버튼 */
.search-btn {
    border: none;
    background: none;
    padding: 0;
}

/* 돋보기 아이콘 — 절대 깨지지 않음 */
.search-btn img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
}

/* 모바일: 양쪽 10px 여백만 두고 풀사이즈 */
@media (max-width: 768px) {
    .searchbox {
        width: calc(100% - 20px) !important;
        margin: 0 10px;
        height: 36px !important;
    }
}
/* =========================================================
   MAPSYNA 검색창 — 오른쪽 정렬 + 풀사이즈 + 각진
========================================================= */

/* 검색창 전체 영역 (비디오 바로 아래 연회색 바) */
.m-searchbar {
    width: 100%;
    background: #f2f2f2;          /* 자연스러운 연회색 */
    padding: 10px 0;              /* 얇은 상하 여백 */
    display: flex;
    justify-content: flex-end;    /* ★ 오른쪽 정렬 핵심 */
    box-sizing: border-box;
}

/* 오른쪽에 붙는 검색창 박스 자체 */
.searchbox {
    width: 100% !important;       /* ★ 가로 전체 → 양쪽 끝까지 뻗음 */
    max-width: 100% !important;
    height: 36px !important;      /* 돋보기 안 깨지게 */
    
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0 !important;  /* ★ 각진 핵심 */
    
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
}

/* 검색 입력창 */
.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #333;
    font-size: 14px;
    outline: none;
}

.search-input::placeholder {
    color: #777;
}

/* 돋보기 아이콘 */
.search-btn {
    background: none;
    border: none;
    padding: 0;
}

.search-btn img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;   /* ★ 절대 깨짐 금지 */
    display: block !important;
}

/* 모바일 — 꽉 차게 중앙 정렬 */
@media (max-width: 768px) {
    .m-searchbar {
        justify-content: center !important; /* 모바일은 오른쪽 정렬 X */
    }
    .searchbox {
        width: calc(100% - 20px) !important;
        margin: 0 10px;
        height: 38px !important;
    }
}
/* =========================================================
   MAPSYNA 검색창 — 오른쪽 정렬 + 풀사이즈 + 각진
========================================================= */

/* 검색창 전체 영역 (비디오 바로 아래 연회색 바) */
.m-searchbar {
    width: 100%;
    background: #f2f2f2;          /* 자연스러운 연회색 */
    padding: 10px 0;              /* 얇은 상하 여백 */
    display: flex;
    justify-content: flex-end;    /* ★ 오른쪽 정렬 핵심 */
    box-sizing: border-box;
}

/* 오른쪽에 붙는 검색창 박스 자체 */
.searchbox {
    width: 100% !important;       /* ★ 가로 전체 → 양쪽 끝까지 뻗음 */
    max-width: 100% !important;
    height: 36px !important;      /* 돋보기 안 깨지게 */
    
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 0 !important;  /* ★ 각진 핵심 */
    
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
}

/* 검색 입력창 */
.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #333;
    font-size: 14px;
    outline: none;
}

.search-input::placeholder {
    color: #777;
}

/* 돋보기 아이콘 */
.search-btn {
    background: none;
    border: none;
    padding: 0;
}

.search-btn img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;   /* ★ 절대 깨짐 금지 */
    display: block !important;
}

/* 모바일 — 꽉 차게 중앙 정렬 */
@media (max-width: 768px) {
    .m-searchbar {
        justify-content: center !important; /* 모바일은 오른쪽 정렬 X */
    }
    .searchbox {
        width: calc(100% - 20px) !important;
        margin: 0 10px;
        height: 38px !important;
    }
}
/* 검색창 뒷배경(연회색 구역) 복원 */
.m-searchbar {
    background: #f2f2f2 !important;   /* 연회색 자연스러운 이어짐 */
    padding: 12px 0 !important;       /* 빈 공간 만들기 */
    position: relative;               /* 검색창이 이 영역 안에 들어오게 */
    z-index: 1;
}
.searchbox {
    width: calc(100% - 24px) !important;   /* 양쪽 padding만큼 안으로 들어오게 */
    margin-right: 12px !important;         /* 오른쪽 정렬용 위치 잡기 */
}
/* 오른쪽 정렬 풀사이즈 검색바 연회색 뒷칸 정상화 */
.m-searchbar {
    width: 100%;
    background: #f2f2f2 !important;   /* 연회색 */
    display: flex;
    justify-content: flex-end;
    padding: 15px 0 !important;       /* ★ 연회색 영역 만들기 (필수) */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* 검색창 박스 */
.searchbox {
    width: 100% !important;
    max-width: 100%;
    height: 36px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
}
/* 바깥 부모 컨테이너: 전체폭 */
.search-area-wrap {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 연회색 영역 */
.m-searchbar {
    width: 100%;
    background: #f2f2f2;
    padding: 12px 0;                 /* ★ 뒷칸 보이게 함 */
    display: flex;
    justify-content: flex-end;       /* ★ 오른쪽 정렬 */
    box-sizing: border-box;
}

/* 검색창 박스 */
.searchbox {
    width: 100% !important;          /* ★ 진짜 브라우저 전체 너비로 확장 */
    max-width: 100% !important;
    height: 36px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;                /* 완전 각진 */
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
}

/* 검색 input */
.search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #333;
}

/* 돋보기 */
.search-btn {
    border: none;
    background: transparent;
    padding: 0;
}

.search-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
/* 메이크샵 기본 885px 제한 해제 → 전체폭 풀기 */
#wrap,
#container,
.layout,
.inner,
.contents {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
/* MAPSYNA 검색창 — 부모 컨테이너 강제 풀사이즈 */
.m-searchbar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    display: flex !important;
    justify-content: flex-end !important;   /* 오른쪽 정렬 */
    background: #f2f2f2;  /* 연회색 뒷칸 */
    box-sizing: border-box;
}
.searchbox {
    width: 100% !important;      /* 부모(브라우저 폭) 끝~끝까지 */
    max-width: 100% !important;
    height: 36px !important;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 !important;
    padding: 0 14px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
/* 검색창을 브라우저 가운데로 정렬 */
.m-searchbar {
    width: 100%;
    background: #f2f2f2;
    padding: 12px 0;
    display: flex;
    justify-content: center !important;   /* ★ 가운데 정렬 핵심 */
    box-sizing: border-box;
}

/* 검색창 FULL SIZE + 각진 형태 그대로 유지 */
.searchbox {
    width: 100% !important;
    max-width: 1280px !important;         /* ★ 가운데 정렬 시 길이 제한 (원하는 값으로 조절) */
    height: 36px !important;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 !important;
    padding: 0 14px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* input */
.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    color: #333;
}

/* 돋보기 */
.search-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
/* ===========================
   MAPSYNA — 3 Banner Tabs
=========================== */

.mapsyna-tabs {
    display: flex;
    justify-content: space-around;
    margin: 25px 0;
    padding: 0 20px;
    text-align: center;
}

.mapsyna-tab {
    font-size: 16px;
    padding: 12px 0;
    flex: 1;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: 0.25s;
}

.mapsyna-tab:hover {
    opacity: 0.8;
}

.mapsyna-tab.active {
    border-bottom: 2px solid #333;
    font-weight: 600;
}

/* ===========================
   펼쳐지는 리스트 영역
=========================== */

.mapsyna-list {
    display: none;
    padding: 25px 0;
    animation: fadeDown 0.35s ease;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 임시 박스 — 실제 상품 넣기 전 시각 확인용 */
.dummy-box {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 30px;
    text-align: center;
    margin: 0 20px;
    border-radius: 6px;
}
.mapsyna-tabs {
    display: flex;
    justify-content: space-around;
    margin: 20px 0 10px;
}

.mapsyna-tab {
    padding: 10px 0;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.mapsyna-tab.active {
    border-bottom: 2px solid #333;
    font-weight: 600;
}

/* 리스트 기본 숨김 */
.mapsyna-list {
    display: none;
    padding: 20px 0;
    animation: fadeDown .3s ease;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dummy-box {
    background: #f5f5f5;
    padding: 30px;
    margin: 0 20px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.mapsyna-list {
    display: none !important;     /* ★ 기본은 무조건 숨김 */
}
body .mapsyna-list { display:none !important; }
body .mapsyna-list {
    display: none !important;
}
.mapsyna-tabs {
    margin-bottom: 10px !important;
}
.m-section {
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
}

.m-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.m-col {
    flex: 1;
}

.video-col {
    position: relative;
}

.m-side-video {
    width: 100%;
    border-radius: 6px;
    display: block;
}

.m-video-text {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
}

/* 상품 5×2 */
.m-grid-5x2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.m-item img {
    width: 100%;
    border-radius: 4px;
}

.m-item .name {
    font-size: 14px;
    margin-top: 6px;
    color: #111;
}

.m-item .price {
    font-size: 14px;
    font-weight: bold;
}

/* 모바일 */
@media (max-width: 768px){
    .m-row { flex-direction: column; }
    .m-grid-5x2 { grid-template-columns: repeat(2, 1fr); }
    .m-video-text { font-size: 16px; }
}
.m-row {
    display: flex;
    gap: 30px;
    margin: 40px auto;
    max-width: 1400px;
}

/* 왼쪽 동영상 영역 */
.video-col {
    flex: 0 0 42%; /* ← 영상이 너무 크면 조절 가능 (추천 40~45%) */
}

.video-col video {
    width: 100%;
    border-radius: 8px;
}

/* 영상 텍스트 */
.m-video-text {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

/* 오른쪽 상품 영역 */
.product-col {
    flex: 1; /* 남는 폭 자동 차지 */
}

/* 5×2 상품 레이아웃 */
.m-grid-5x2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.m-row {
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 60px auto;
}

/* 왼쪽 영상 */
.video-col {
    flex: 0 0 42%;
}

.video-col video {
    width: 100%;
    border-radius: 8px;
}

.m-video-text {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 700;
}

/* 오른쪽 상품 */
.product-col {
    flex: 1;
}

.m-grid-5x2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.m-grid-5x2 .item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   MAPSYNA — 동영상 + 상품 5×2 전용 레이아웃
============================================ */

/* 전체 행 (동영상 + 상품 나란히) */
.m-row {
    display: flex;
    gap: 32px;
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
    align-items: flex-start;
}

/* ------------------------------
   LEFT : 동영상 컬럼
------------------------------ */
.video-col {
    flex: 0 0 42%;     /* 왼쪽 42% 고정 */
}

.video-col video {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.m-video-text {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

/* ------------------------------
   RIGHT : 상품 그리드
------------------------------ */
.product-col {
    flex: 1;
    min-width: 0;
}

/* 5×2 그리드 */
.m-grid-5x2 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

/* 상품 아이템 박스 */
.m-grid-5x2 .item {
    text-align: left;
}

/* 상품 이미지 */
.m-grid-5x2 .item img {
    width: 100%;
    aspect-ratio: 1 / 1;        /* 정사각 비율 */
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* 상품명 */
.m-grid-5x2 .item .name {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: #222;
}

/* 가격 */
.m-grid-5x2 .item .price {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}

/* ------------------------------
   기존 MakeShop 스타일 무력화
------------------------------ */

/* 기존 상품리스트 스타일 제거 (필수!!) */
.goods-list,
.prds-list,
.goods-list--item,
.prds-list--item {
    all: unset !important;
}

/* MakeShop 기본 flex, width 강제 초기화 */
.goods-list--item,
.prds-list--item {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 이미지 박스 기본값 제거 */
.prds--image,
.prds--image img {
    all: unset !important;
}

/* 제목, 가격 기본 스타일 제거 */
.prds--name,
.prds--engname,
.prds--subname,
.prds--price-wrap {
    all: unset !important;
}
/* 메인 2컬럼 섹션 */
.m-section {
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
}

.m-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* LEFT : 동영상 */
.video-col {
    flex: 0 0 42%;
}
.video-col video {
    width: 100%;
    border-radius: 10px;
    display: block;
}
.m-video-text {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

/* RIGHT : 상품 자동정렬 */
.product-col {
    flex: 1;
    min-width: 0;
}

/* 5×2 or 자동정렬 그리드 */
.m-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

/* 이미지 스타일 */
.m-grid-auto .item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
}

/* 상품명 */
.m-grid-auto .item .name {
    margin-top: 6px;
    font-size: 14px;
    color: #111;
}

/* 가격 */
.m-grid-auto .item .price {
    font-size: 14px;
    font-weight: 700;
}

/* 모바일 */
@media (max-width: 768px) {
    .m-row { flex-direction: column; }
    .video-col { flex: none; width: 100%; }
}
/* 전체 컨테이너: 화면 꽉 채움 */
.m-wide-row {
    width: 100%;            /* 부모 제한 제거 */
    display: flex;
    gap: 26px;
    align-items: flex-start;
    margin: 50px 0;
    padding: 0 20px;        /* 좌우 여백만 살짝 */
}

/* 동영상 영역: 폭 30% 고정 */
.m-video-box {
    width: 30%;
}

.m-video-box video {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.m-video-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

/* 상품 영역: 남은 공간 자동 확장 */
.m-product-box {
    flex: 1;        /* 오른쪽 영역 전부 사용 */
    min-width: 0;
}

/* 상품 자동정렬 (가로폭에 따라 유동적으로 4~5개 정렬됨) */
.m-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.m-grid-auto .item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
}

.m-grid-auto .item .name {
    font-size: 14px;
    margin-top: 6px;
    color: #333;
}

.m-grid-auto .item .price {
    font-size: 14px;
    font-weight: 700;
}
/* ============================================
   MAPSYNA – 동영상 18% + 무신사형 200px 갤러리
============================================ */

.m-section {
    width: 100%;
    margin: 60px auto;
    padding: 0 20px;
}

/* 한 세트 : 동영상 + 상품 */
.m-wide-row {
    width: 100%;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* LEFT : 동영상 18% 고정 */
.m-video-box {
    width: 18%;
    min-width: 180px; /* 너무 작아지지 않도록 안정장치 */
}

.m-video-box video {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.m-video-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
}

/* RIGHT : 상품 자동정렬 */
.m-product-box {
    flex: 1;
    min-width: 0;
}

/* 무신사 타입 갤러리 : 최소 200px 기준 자동 정렬 */
.m-grid-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 26px;
}

/* 상품 이미지 */
.m-grid-gallery .item img {
    width: 100%;
    aspect-ratio: 1 / 1.15; /* 무신사 상품 카드 비율 */
    object-fit: cover;
    border-radius: 8px;
}

/* 상품명 */
.m-grid-gallery .item .name {
    margin-top: 6px;
    font-size: 15px;
    color: #111;
    line-height: 1.35;
}

/* 가격 */
.m-grid-gallery .item .price {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
}

/* 모바일 */
@media (max-width: 768px) {
    .m-wide-row { flex-direction: column; }
    .m-video-box { width: 100%; }
    .m-grid-gallery { grid-template-columns: repeat(2, 1fr); }
}
<div class="m-grid-gallery">
    <!--/loop_new_product_list/-->
    <div class="item">
        <a href="<!--/new_product_list@link/-->">
            <img src="<!--/makeshop{label_product_img(new_product_list,image_m)}/-->">
            <p class="name"><!--/new_product_list@name/--></p>
            <p class="price"><strong><!--/number/new_product_list@price_sell/--></strong>원</p>
        </a>
    </div>
    <!--/end_loop/-->
</div>
.m-section {
    width: 100%;
    margin: 60px auto;
    padding: 0 20px;
}

.m-wide-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

/* LEFT 동영상 18% */
.m-video-box {
    width: 18%;
    min-width: 160px;
}

.m-video-box video {
    width: 100%;
    border-radius: 10px;
}

.m-video-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    line-height: 1.35;
}

/* RIGHT 상품 그리드 */
.m-product-box {
    flex: 1;
}

/* 기존 <dl class="item-list"> 을 그리드 형태로 재배치 */
.m-grid-5x2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.m-grid-5x2 dl.item-list {
    width: 100% !important;
    margin: 0 !important;
}

.m-grid-5x2 dt.thumb img {
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
}

/* 모바일 */
@media (max-width: 768px) {
    .m-wide-row { flex-direction: column; }
    .m-video-box { width: 100%; }
    .m-grid-5x2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
.m-wide-row {
    display: flex;
    gap: 40px;          /* 간격 조금 넓힘 */
    margin-top: 40px;   /* 위로 숨쉬기 공간 */
    align-items: flex-start;
}

.m-video-box {
    width: 22%;         /* 18% → 22% 살짝 키움 */
    min-width: 200px;   /* 너무 작아지지 않게 */
}

.m-grid-5x2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px 20px;     /* 가로 20 / 세로 28 → 브랜드 느낌 */
}
.m-grid-5x2 .prd-info .prd-name {
    font-size: 15px;
    line-height: 1.4;
    height: 42px; /* 두 줄 정렬 */
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-section {
    border-bottom: 1px solid #eee;
    padding-bottom: 35px;
    margin-bottom: 45px;
}
@keyframes fadein {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.m-grid-5x2 .item,
.m-grid-auto .item,
.mapsyna-item {
    opacity: 0;
    animation: fadein 0.7s ease forwards;
}
.mapsyna-item:nth-child(1) { animation-delay: 0.1s; }
.mapsyna-item:nth-child(2) { animation-delay: 0.2s; }
.mapsyna-item:nth-child(3) { animation-delay: 0.3s; }
.mapsyna-item:nth-child(4) { animation-delay: 0.4s; }
.mapsyna-item:nth-child(5) { animation-delay: 0.5s; }
.m-video-box video {
    opacity: 0;
    animation: fadein 1s ease forwards;
}
/* ===============================
   하단 상품 리스트 자동 갤러리 정렬
================================ */

/* MD PICK / 신규상품 / 특별상품 통합 적용 */
.products-wrapper .prds-list,
.products-wrapper .goods-list,
.md-pick .goods-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px 20px;
    width: 100% !important;
}

/* item-list 통일 */
.products-wrapper .item-list,
.md-pick .item-list {
    width: 100% !important;
    margin: 0 !important;
}

/* 이미지 스타일 */
.products-wrapper .item-list dt.thumb img,
.md-pick .item-list dt.thumb img {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* 상품명 통일 */
.products-wrapper .prd-name,
.md-pick .prd-name {
    font-size: 14px;
    line-height: 1.35;
    margin-top: 6px;
    height: 40px;    /* 2줄 정렬 */
    overflow: hidden;
}

/* 가격 */
.products-wrapper .prd-price,
.md-pick .prd-price {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
}

/* 컬러칩 등 나머지 정보 */
.products-wrapper .prd-color,
.products-wrapper .prd-brand,
.products-wrapper .prd-ico {
    font-size: 12px;
    opacity: .8;
}

/* BASIC css end */