/* BASIC css start */
/* ============================================================
   ¸ð¹ÙÀÏ °­Á¦ ¸®¼Â
   °øÅë.cssÀÇ body{min-width:1450px}´Â PC Àü¿ë ±ÔÄ¢Àε¥
   ¸ð¹ÙÀÏ ½ºÅ²¿¡µµ ·ÎµåµÇ¾î Àüü ÆäÀÌÁö°¡ Ãà¼ÒµÈ PCºä·Î ·»´õ¸µµÇ´Â
   ¹®Á¦¸¦ Â÷´ÜÇÕ´Ï´Ù. (ÇÊÅÍ ¹öÆ°/Á¤·Ä ¹èÄ¡°¡ ±úÁö°í, ½ÃÆ® ¾È
   ¿É¼Ç pillÀÌ ÁÙ¹Ù²Þ ¾øÀÌ È­¸é ¹ÛÀ¸·Î À߸®´Â ¿øÀÎÀÌ ÀüºÎ ÀÌ°Í ÇϳªÀÔ´Ï´Ù)
============================================================ */
html, body {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ÇöÀç ºÐ·ù¸í */
.now_cate_tit { position: relative; font-size: 24px; color: #121212; font-weight: 600; padding: 40px 20px 24px; } 


/* Ä«Å×°í¸® */
.class-list { position: relative; padding: 0 20px 72px; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 8px 7%; } 
.class-list dd a { font-size: 14px; font-weight: 400; color: #656565; } 
.class-list dd a.sel { font-weight:600; color:#121212; } 
body .swiper_wrap .swiper-pagination { top:auto; bottom:0; left:50%; width:160px; height:1px; margin-left:-80px; background:#e6e6e6; } 
body .swiper_wrap .swiper-pagination { top:auto; bottom:40px; left:50%; width:160px; height:2px; margin-left:-80px; background:#e6e6e6; border-radius:1px; } 
body .swiper_wrap .swiper-pagination-progressbar-fill { background:#121212; border-radius: 1px; } 

/* º£½ºÆ® ¾ÆÀÌÅÛ */
.cont_tit {font-size: 20px;font-weight: 500;color: #121212;padding: 0 0 16px;} 
.goodsList .swiper-container {padding: 0 0 22px 0;} 

/* »óÇ° ¸®½ºÆ® */
#MS_product {position: relative;padding: 0 20px;} 
.swiper_wrap{padding: 0 20px;margin-bottom: 26px;overflow: hidden;}
.goodsList{position: relative;}


/* ============================================================
   ÇÊÅÍ - ÀζóÀÎ »ó½Ã³ëÃâ ÆгÎ
   Ä÷¯ ÅäÅ«: ÅؽºÆ®/Æ÷ÀÎÆ® #121212, º¸´õ #ededed
============================================================ */
#csFilterRoot.list_array {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 4px !important;
    padding: 0 20px !important;
}
#csFilterRoot .filter-panel { order: 1; flex: 0 0 100%; width: 100%; }
#csFilterRoot .list_arrayLeft {
    order: 2;
    font-size: 13px;
    color: #6b6b6b;
}
#csFilterRoot .list_arrayLeft b { color:#121212; font-weight:700; }
#csFilterRoot .list_arrayRight {
    order: 3;
    margin-left: auto;
}
#csFilterRoot .list_arrayRight select {
    border: none !important;
    background-color: transparent !important;
    padding: 0 16px 0 0 !important;
    font-size: 12px !important;
    color: #767676 !important;
    font-weight: 600 !important;
    width: auto !important;
    height: auto !important;
}

/* ---------- ÇÊÅÍ ÆгΠīµå ---------- */
.filter-panel {
    border: 1px solid #ededed;
    border-radius: 20px;
    padding: 22px 20px 18px;
    box-sizing: border-box;
    background: #fff;
}
.filter-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.filter-panel-head .fp-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.filter-panel-head .fp-ico svg { display: block; width: 100%; height: 100%; }
.filter-panel-head strong {
    font-size: 15px;
    font-weight: 700;
    color: #121212;
}

/* ---------- ÇÊÅÍ ±×·ì Çà (¶óº§ + °¡·Î½ºÅ©·Ñ ¿É¼Ç) ---------- */
.filter-panel-body { width: 100%; }
.filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f6f6f6;
}
.filter-row:first-child { border-top: none; padding-top: 0; }
.filter-row-label {
    flex: 0 0 54px;
    padding-top: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #121212;
}
.filter-row-options {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filter-row-options::-webkit-scrollbar { display: none; }

/* ÇÊÅÍ ´õº¸±â(4¹ø° ±×·ìºÎÅÍ Á¢±â, ±âº» 3°³ ³ëÃâ) */
.filter-panel-body .filter-row:nth-child(n+4) { display: none; }
.filter-panel-body.expanded .filter-row:nth-child(n+4) { display: flex; }
.filter-more-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    margin-top: 4px;
    padding: 10px 0 2px;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 12.5px;
    font-weight: 600;
    color: #9c9184;
}
.filter-more-btn.show { display: flex; }
.filter-more-btn .arrow { font-size: 13px; transition: transform .2s ease; }
.filter-more-btn.expanded .arrow { transform: rotate(90deg); }

/* üũ¹Ú½ºÇü(chk-box) ¡æ pill Åä±Û, °¡·Î ½ºÅ©·Ñ ÇÑ ÁÙ */
.filter-row-options.chk-box {
    gap: 6px;
}
.filter-row-options.chk-box input[type="checkbox"],
.filter-row-options.chk-box input[type="radio"] { display:none; }
.filter-row-options.chk-box label {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 7px 12px;
    border: 1px solid #ededed;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 400;
    color: #121212;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.filter-row-options.chk-box input:checked + label {
    background: #121212;
    border-color: #121212;
    color: #fff;
}

/* Ä÷¯ ½º¿ÍÄ¡Çü(chk-color-code) */
.filter-row-options.chk-color-code {
    gap: 14px;
    align-items: flex-start;
}
.filter-row-options.chk-color-code input[type="checkbox"],
.filter-row-options.chk-color-code input[type="radio"] { display:none; }
.filter-row-options.chk-color-code label {
    display: block;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ededed;
    box-shadow: 0 0 0 2px #fff;
    cursor: pointer;
}
.filter-row-options.chk-color-code input:checked + label {
    outline: 1.6px solid #121212;
    outline-offset: 2px;
}
.filter-row-options.chk-color-code p {
    margin-top: -4px;
    font-size: 10.5px;
    color: #a3a3a3;
    text-align: center;
}

/* ---------- ÆгΠÇÏ´Ü ¹öÆ° ---------- */
.filter-panel-foot {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f4f4f4;
}
.filter-panel-foot .btn-reset {
    flex: 0 0 88px;
    padding: 13px 0;
    border: 1px solid #ededed;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #121212;
}
.filter-panel-foot .btn-reset:only-child { flex: 1; }
.filter-panel-foot .btn-search {
    flex: 1;
    padding: 13px 0;
    border: none;
    border-radius: 20px;
    background: #121212;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
.filter-panel-foot .btn-search .btn-search-count { margin-left: 4px; opacity:.75; font-weight:600; }
.filter-panel-foot button span { visibility: visible; }

/* ¿É¼Ç ÁÙ ¿ìÃø ½ºÅ©·Ñ ÈùÆ® - mask-image·Î ó¸®ÇØ ½ºÅ©·ÑÇصµ Ç×»ó ¿ìÃø ³¡¿¡ °íÁ¤ */
.filter-row-options {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}

/* ---------- ¼±ÅÃµÈ ÇÊÅÍ Ä¨ ---------- */
.select-filter-wrap {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    margin: 6px 0 18px;
}
.select-filter-wrap.show { display: flex; }
.select-filter-wrap .select-filter {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.select-filter-wrap .select-filter::-webkit-scrollbar { display: none; }
.select-filter-wrap .select-filter li {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 8px 8px 8px 14px;
    border: 1px solid #121212;
    border-radius: 20px;
    background: #121212;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}
.select-filter-wrap .select-filter li .color-code {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
}
.select-filter-wrap .select-filter li .btn-del {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.select-filter-wrap .select-filter li .btn-del:before,
.select-filter-wrap .select-filter li .btn-del:after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 1.3px;
    background: #fff;
}
.select-filter-wrap .select-filter li .btn-del:before { transform: translate(-50%,-50%) rotate(45deg); }
.select-filter-wrap .select-filter li .btn-del:after { transform: translate(-50%,-50%) rotate(-45deg); }

.select-filter-wrap .chip-reset-btn {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ededed;
    background: #fff;
    position: relative;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select-filter-wrap .chip-reset-btn svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* ============================================================
   º£½ºÆ® ¾ÆÀÌÅÛ Ä«µå ÅëÀÏ (½º¿ÍÀÌÆÛ + ±×¸®µå ¸®½ºÆ® °øÅë Àû¿ë)
   »óÇ°¸í/¼³¸í ±æÀÌ°¡ Á¦°¢°¢À̶ó Ä«µå¸¶´Ù ÁÙ¹Ù²Þ ¼ö°¡ ´Þ¶óÁö°í
   °¡°ÝÁÙ ½ÃÀÛ À§Ä¡°¡ µéÂß³¯ÂßÇØ º¸ÀÌ´ø ¹®Á¦ ÇØ°á
============================================================ */
.goodsList ul li .textWrap {
    display: flex;
    flex-direction: column;
}

/* »óÇ°¸í - 2ÁÙ °íÁ¤, ³ÑÄ¡¸é ¸»ÁÙÀÓ */
.goodsList ul li .textWrap .goodsName {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 40px;
}

/* ¼­ºê ¼³¸í - 2ÁÙ °íÁ¤, ³ÑÄ¡¸é ¸»ÁÙÀÓ */
.goodsList ul li .textWrap .goodsSubName {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 32px;
    margin-top: 2px;
}

/* °¡°ÝÁÙ - ÇÒÀÎÀ²/ÆǸŰ¡/¼ÒºñÀÚ°¡ º£À̽º¶óÀÎ Á¤·Ä ÅëÀÏ */
.goodsList ul li .textWrap .goodsPrice {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 4px;
    min-height: 20px;
}
.goodsList ul li .textWrap .goodsPrice .discountPer { order: 1; }
.goodsList ul li .textWrap .goodsPrice .price { order: 2; }
.goodsList ul li .textWrap .goodsPrice .c_price { order: 3; }
.goodsList ul li .textWrap .listSoldout {
    display: flex;
    align-items: center;
    min-height: 20px;
}

/* ¸®ºä °³¼ö(½º³À¸®ºä ½ºÅ©¸³Æ®°¡ goodsPrice µÚ¿¡ ÀÚµ¿ »ðÀÔÇÏ´Â ¿ä¼Ò)
   »ðÀԵǴ class¸íÀÌ ¸Å¹ø °°´Ù´Â º¸ÀåÀÌ ¾ø¾î, "goodsPrice ¹Ù·Î ´ÙÀ½ ÇüÁ¦"
   ¶ó´Â ±¸Á¶Àû À§Ä¡¸¦ ±âÁØÀ¸·Î ½ºÅ¸ÀÏÀ» °íÁ¤   class¸í ¸ô¶óµµ Ç×»ó Àû¿ëµÊ */
.goodsList ul li .textWrap .goodsPrice ~ * {
    margin-top: 6px !important;
    font-size: 11px !important;
    color: #b3b3b3 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* ============================================================
   º£½ºÆ® ¾ÆÀÌÅÛ ¼øÀ§ ¹èÁö (BEST1 / BEST2 / BEST3)
   ¸ÞÀÌÅ©¼¥ °ø½Ä INDEX ű×(<!--/idx/-->)·Î ¼ø¹ø Ãâ·Â ¡æ JS ºÒÇÊ¿ä
============================================================ */
.swiper_wrap .imgWrap { position: relative; }
.swiper_wrap .imgWrap .rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 5px 11px;
    border-radius: 20px;
    background: #121212;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.3;
}
/* ¼øÀ§º° Ä÷¯ ±¸ºÐ (PC Åæ°ú µ¿ÀÏ) */
.swiper_wrap .swiper-slide:nth-child(1) .rank-badge { background: #d4667e; }
.swiper_wrap .swiper-slide:nth-child(2) .rank-badge { background: #121212; }
.swiper_wrap .swiper-slide:nth-child(3) .rank-badge { background: #c9a876; color:#121212; }

/* BEST ¹èÁö´Â 1~3À§±îÁö¸¸ ³ëÃâ, 4¹ø°ºÎÅÍ´Â ¼û±è */
.swiper_wrap .swiper-slide:nth-child(n+4) .rank-badge { display: none; }

/* À§½Ã ÇÏÆ®°¡ ¹èÁö¿Í °ãÄ¡Áö ¾Êµµ·Ï z-index Á¤¸® */
.goodsList ul li .wishIcon { z-index: 3; }
.goodsList ul li .imgWrap .soldout_txt { z-index: 2; }

/* ============================================================
   º£½ºÆ® ½º¿ÍÀÌÆÛ - BEST ¹èÁö À§Ä¡¸¸ Á¶Á¤ (ÇÏÆ®´Â ¿ø·¡ ½ºÅ¸ÀÏ À¯Áö, À§Ä¡¸¸ »ì¦ À̵¿)
============================================================ */
.swiper_wrap .imgWrap .rank-badge {
    top: 8px;
    left: 8px;
    padding: 4px 9px;
    font-size: 10px;
}
.swiper_wrap .wishIcon {
    top: 6px;
    right: 6px;
}


/* ============================================================
   ÇÊÅÍ ÅÇ Áï½Ã ³ëÃâµÇ´Â ·Îµù ¿À¹ö·¹ÀÌ
   ½ÇÁ¦ ÇÊÅ͸µÀº ¼­¹ö ÀçÁ¶È¸(ÆäÀÌÁö À̵¿)¶ó ½Ã°£ ÀÚü´Â ÁÙÀÏ ¼ö ¾øÁö¸¸,
   ÅÇ Áï½Ã ¹ÝÀÀÀ» º¸¿©Á༭ ü°¨ Áö¿¬À» ÃÖ¼ÒÈ­
============================================================ */
.filter-loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255,255,255,.72);
    align-items: center;
    justify-content: center;
}
.filter-loading.show { display: flex; }
.filter-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #ededed;
    border-top-color: #121212;
    border-radius: 50%;
    animation: filterSpin .7s linear infinite;
}
@keyframes filterSpin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   ºÐ·ù¸í(¹«Áö) + ÇÏÀ§ Ä«Å×°í¸® ¸ñ·Ï ¼û±è
   ¼û±ä ¸¸Å­ »ó´Ü Ä«Å×°í¸® ÅÇ°ú º£½ºÆ® ¾ÆÀÌÅÛ »çÀÌ ¿©¹é È®º¸
============================================================ */
.now_cate_tit,
.class-list {
    display: none !important;
}
main.shopbrand {
    padding-top: 24px;
}
/* BASIC css end */