section.goodsWrap {
    display: grid;
    grid-template-columns:240px 1fr;
    gap: 2rem;
}
article#goodsNavWrap {
    position: static;
}

.chk_box { display: table; position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; bottom:0; font-size:.875rem; color:#666; margin-bottom:5px; }
.chk_box input[type="checkbox"] { display: none; }
.chk_box > .on { width: 18px; height: 18px; background: #ddd; position: absolute; bottom: 0; left: 0;  border-radius:4px 4px;  }
.chk_box input[type="checkbox"]:checked + .on { background: #000; }
.chk_box > .on:after { content: ""; position: absolute; display: none; }
.chk_box input[type="checkbox"]:checked + .on:after { display: block; }
.chk_box > .on:after { width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 0; }
.chk_box:hover { color:#000; }



.tree{width:100%; border:1px solid #dfdfdf;}
.node{ border-top:1px solid #dfdfdf;}
.tree .node:first-child { border-top:0; }
.head {
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    cursor:pointer; user-select:none; transition: all .3s;
}
.head:hover {
    background:#fafafa;
}
.title{font-weight:400; flex:1; font-size:1rem; }
.indicator{
    background:#fff;  border:0;
    width:28px; height:28px; display:grid; place-items:center;
    cursor:pointer;
}
.children{padding:10px 10px 20px 20px; }
.children[hidden]{display:none}
/* 혹시라도 중첩 children이 들어와도 1뎁스만 보이게 차단 */
.children .children{display:none !important}
article#goodsGoodsWrap > div.goodsTabMenuWrap {
    display: flex; gap: 1rem; margin:0 0 1rem 0;
}

article#goodsGoodsWrap > div.cateNav {
    border-bottom:1px solid #ebebeb;
    display: flex; margin:0 0 1rem 0; gap: .5rem; padding-bottom:.5rem;
}
article#goodsGoodsWrap > div.cateNav span,
article#goodsGoodsWrap > div.cateNav a {
    text-decoration: none; color:#1a1a1a; font-size:.875rem; font-weight: 400;
}
article#goodsGoodsWrap > div.goodsTabMenuWrap > a {
    text-decoration: none; color:#1a1a1a; font-size:.875rem; font-weight: 400;
    background: #e8e8e8;
    padding:.5rem 1.25rem; border-radius: 1rem 1rem;
}
article#goodsGoodsWrap > div.goodsTabMenuWrap > a.on {
    background: #333; color: #FFF;
}


article#goodsGoodsWrap > div.tabMenuWrap {
    border:1px solid #dfdfdf;
}
article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu {
    display: flex; background: #f9f9f9;
}
article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a {
    text-decoration: none; color:#333; font-size:1rem; font-weight:300; padding:1rem 1rem; position:relative;
}
article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a:before {
    position: absolute;
    top:calc(50% - 8px); right:0; content:""; width:1px; height:16px; background:#ddd;
}
article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a:hover {
    background: #333; color:#FFF;
}
article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a.active { background: #333; color:#FFF; }
article#goodsGoodsWrap > div.goodsGoodsWrap {
    border:1px solid #dfdfdf; padding:20px 20px; margin-top:20px;
}
article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a.active:before,
article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a:hover:before {
    width:0;
}

article#goodsGoodsWrap > div.tabMenuWrapM {
    display: none;
}
article#goodsGoodsWrap > div.tabMenuWrapM {

}

div#goodsBoxWrap {
    gap: 2rem;
    display: grid;
}
div#goodsBoxWrap > div {
    padding:2rem 2rem;
    display: grid;
    grid-template-columns:150px 1fr 200px;
    gap: 2rem;
    transition: all .3s;
}

div#goodsBoxWrap > div:hover {
    box-shadow: 0 .15rem 1.75rem #21283226;
    transition: transform .15s ease-in-out,box-shadow .15s ease-in-out
}

div#goodsBoxWrap figure {
    width:150px;
    padding:0 0 0 0; margin: 0 0 0 0;
    overflow: hidden;
}
div#goodsBoxWrap figure > img.img-responsive {
    aspect-ratio: 1/1;
    object-fit: contain;
}
div#goodsBoxWrap > div p {
    padding: 0 0 0 0; margin:0 0 0 0; font-size: .875rem; color:#333; padding-bottom:20px;
}
div#goodsBoxWrap > div div.description {
    font-size:.75rem; color:#666; font-weight: 300;
}
img.zoom {
    transition: transform 0.3s ease;
}

img.zoom:hover {
    transform: scale(1.1);
}
div.priceBoxWrap {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
div.priceBoxWrap > div.price {
    margin-left:auto; font-weight:400; font-size:.875rem; color:#666;
}
div.priceBoxWrap > div.price  > strong {
    font-weight: 400; color:#333; font-size:1.25rem;
}
div.priceBoxWrap > div.stnBtn {
    display: flex; justify-content: flex-end; width:100%;
}
div.priceBoxWrap > div.stnBtn > button {
    border:0; background: none; cursor: pointer; width:50%; border:1px solid #ebebeb; padding:.5rem 0; font-size:.75rem;
}
div.priceBoxWrap > div.stnBtn > button:hover {
    background: #f1f1f1;
}



.selected-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; font-size:.75rem; color:#666; }
.selected-list .chip{display:inline-flex;align-items:center;padding:4px 8px 4px 10px;border:1px solid #ddd;border-radius:999px}
.selected-list .del{border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1}




/* Mobile */
@media (max-width: 599px) {
    section.goodsWrap {
        display: grid;
        grid-template-columns:1fr;
        gap: 2rem;
    }
    article#goodsNavWrap {
        display: none;
    }
    article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu {
        justify-content: space-between;
    }
    article#goodsGoodsWrap > div.goodsGoodsWrap {

    }
    article#goodsGoodsWrap > div.tabMenuWrap  {
        display: none;
    }
    article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a {
        font-size: .675rem; width:100%; text-align: center;
    }
    article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a:last-child:before {
        width:0 !important;
    }
    div#goodsBoxWrap {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 0;
    }
    div#goodsBoxWrap > div {
        padding:.25rem .5rem !important;
        grid-template-columns:1fr;
    }
    div#goodsBoxWrap figure {
        width:100%;
    }
    img.zoom:hover {
        transform: scale(1);
    }
    div#goodsBoxWrap > div.priceBoxBody {
        padding:0 1rem;
    }
    div#goodsBoxWrap > div {
        gap: 1rem;
    }
    div#goodsBoxWrap > div div.description {
        display: none;
    }
    div#goodsBoxWrap > div p {
        font-size:.675rem;
        padding-bottom:10px;
    }
    article#goodsGoodsWrap > div.goodsGoodsWrap {
        border:0; padding:0 0 0 0;
    }
    div.priceBoxWrap > div.price {
        font-size:.75rem;
    }
    div.priceBoxWrap > div.price > strong {
        font-size:.875rem;
    }
    article#goodsGoodsWrap > div.tabMenuWrapM {
        display: flex; justify-content: flex-end;
        background: #f5f5f5; border:1px solid #ebebeb;
        font-size:.875rem;
        color:#666;
        padding:.5rem 1rem;
        gap: 1rem;
    }
}

/* Fold / Flip */
@media (min-width: 600px) and (max-width: 767px) {
    section.goodsWrap {
        display: grid;
        grid-template-columns:1fr;
        gap: 2rem;
    }
    article#goodsNavWrap {
        display: none;
    }
    article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu {
        justify-content: space-between;
    }
    article#goodsGoodsWrap > div.goodsGoodsWrap {

    }
    article#goodsGoodsWrap > div.tabMenuWrap  {
        display: none;
    }
    article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a {
        font-size: .75rem; width:100%; text-align: center;
    }
    article#goodsGoodsWrap > div.tabMenuWrap > div.tabMenu > a:last-child:before {
        width:0 !important;
    }
    div#goodsBoxWrap {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    div#goodsBoxWrap > div {
        padding:1rem 1rem !important;
        grid-template-columns:1fr;
    }
    div#goodsBoxWrap figure {
        width:100%;
    }
    img.zoom:hover {
        transform: scale(1);
    }
    div#goodsBoxWrap > div.priceBoxBody {
        padding:0 1rem;
    }
    div#goodsBoxWrap > div {
        gap: 1rem;
    }
    div#goodsBoxWrap > div div.description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }
    div#goodsBoxWrap > div p {
        padding-bottom:10px;
    }
    article#goodsGoodsWrap > div.tabMenuWrapM {
        display: flex; justify-content: flex-end;
        background: #f5f5f5; border:1px solid #ebebeb;
        font-size:.875rem;
        color:#666;
        padding:.5rem 1rem;
        gap: 1rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    section.goodsWrap {
        display: grid;
        grid-template-columns:1fr;
        gap: 2rem;
    }
    article#goodsNavWrap {
        display: none;
    }
    article#goodsGoodsWrap > div.tabMenuWrap  {
        display: none;
    }
    div#goodsBoxWrap > div p {
        padding-bottom:10px;
    }
    article#goodsGoodsWrap > div.tabMenuWrapM {
        display: flex; justify-content: flex-end;
        background: #f5f5f5; border:1px solid #ebebeb;
        font-size:.875rem;
        color:#666;
        padding:.5rem 1rem;
        gap: 1rem;
    }

}




.sort-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.sort-trigger {
    cursor: pointer;
    user-select: none;
}

.sort-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;          /* 안 보이게만 */
    cursor: pointer;
    z-index: 10;
}
.filter-wrap {
    cursor: pointer;
}
div.chip-clear-all { cursor: pointer; }
/* 오버레이 */
.filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
    z-index: 1000;
}

/* 슬라이드 패널 */
.filter-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    left:auto;
    width:100vw;
    max-width: 95%;
    height: 100vh;
    max-height: 95%;
    background: #fff;
    border-radius: 15px 0 0 0;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

/* 헤더 */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
}
.filter-header > button#filterClose {
    cursor: pointer;
    background: none;
    border: 0;
}
.filter-header > button#filterClose > i {
    font-size:1rem;
}
    /* 바디 */
.filter-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

/* 푸터 */
.filter-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.filter-footer > button {
    font-size:.75rem; width: 100%;
}

/* 활성화 상태 */
.filter-overlay.active {
    opacity: 1;
    visibility: visible;
}

.filter-panel.active {
    transform: translateX(0);
}
.m-node .m-body {
    display: block;
    margin-bottom:.5rem;
    padding:.5rem .5rem;
    background: #f5f5f5;
    border-radius: 10px 10px;
}

.m-node.is-close .m-body {
    display: none;
}

.m-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border:0;
    line-height: 2.5rem;
    font-size:.875rem;
}
.m-node.is-close {
    border-bottom:1px solid #EBEBEB;
}

.m-node.is-close .m-head i {
    transform: rotate(-90deg);
}

.mchk_box { display: table; position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; bottom:0; font-size:.75rem; color:#666; margin-bottom:5px; }
.mchk_box input[type="checkbox"] { display: none; }
.mchk_box > .on { width: 16px; height: 16px; background: #ddd; position: absolute; bottom: 0; left: 0;  border-radius:4px 4px;  }
.mchk_box input[type="checkbox"]:checked + .on { background: #000; }
.mchk_box > .on:after { content: ""; position: absolute; display: none; }
.mchk_box input[type="checkbox"]:checked + .on:after { display: block; }
.mchk_box > .on:after { width: 4px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 0; }
.mchk_box:hover { color:#000; }