.product-head { margin-bottom: 60px; } 
.product-head h2 { margin-bottom: 40px; text-align: center; font-family: "Hanjin Group Sans"; font-size: 32px; font-weight: 700; line-height: 150%; } 
.prod-search-form form { display: flex; align-items: center; justify-content: space-between; width: 686px; margin: 0 auto; padding: 5px 12px 5px 16px; border-radius: 8px; border: 1px solid #C4CCD4; background: #FFF; } 
.prod-search-form form input { width: 100%; font-size: 16px; font-weight: 500; line-height: 150%; color: var(--text-dark); } 

.product-result-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 0 8px; } 
.product-result-wrap .result-count { color: #A6B2BF; } 
.product-result-wrap .result-count em { color: #567; } 
.product-result-wrap ul { display: flex; gap: 32px; } 
.product-result-wrap ul li { position: relative; } 
.product-result-wrap ul li:after { content: ""; display: block; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: #C4CCD4; } 
.product-result-wrap ul li:last-child:after { display: none; } 
.product-result-wrap ul li a { color: #89A; transition: all .3s; } 
.product-result-wrap ul li a:hover { color: var(--text-dark); } 
.product-result-wrap ul li a.on { font-weight: 700; color: var(--text-dark); } 

.product-list-sec { padding: 80px 0; } 

/* 모바일 커스텀 드롭다운 */
.sort-dropdown { position: relative; width: 100%; max-width: 260px; } 

.sort-dropdown__btn { width: 100%; height: 40px; padding: 0 44px 0 14px; border: 1px solid #d7dde3; border-radius: 6px; background: #fff; font-size: 14px; text-align: left; cursor: pointer; transition: all .3s; } 
.sort-dropdown__btn span { display: block; transform: translateY(1px); } 
.sort-dropdown__btn::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #8899AA; border-bottom: 2px solid #8899AA; transform: translateY(-73%) rotate(45deg); } 

.sort-dropdown.is-open .sort-dropdown__btn::after { transform: translateY(-31%) rotate(-135deg); } 

.product-result-wrap .sort-dropdown .sort-dropdown__list { display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 100%; margin: 0; padding: 6px; list-style: none; border: 1px solid #d7dde3; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,0.08); } 

.sort-dropdown.is-open .sort-dropdown__list { display: block; } 

.sort-dropdown__item { display: block; padding: 10px 10px; border-radius: 8px; color: #222; text-decoration: none; font-size: 14px; } 

.sort-dropdown__item:hover,
.sort-dropdown__item:focus { background: #EFF2F5; outline: none; } 

.sort-dropdown__item.is-active { color: var(--text-dark); background: #EFF2F5; font-weight: 700; } 

/* 전체 가격 */
.option-wrap {
    display: flex;
    gap: 10px;
}
.filter-wrap { display: flex; gap: 10px; } 
.sort-dropdown__btn span,
.custom-price { font-size: 16px; font-weight: 500; line-height: 150%; } 
.custom-price { display: flex; justify-content: space-between; align-items: center;gap: 10px; padding: 8px 10px 6px 10px; border-radius: 6px; border: 1px solid var(--line); transition: all .3s; } 
.sort-dropdown__btn:hover,
.custom-price:hover { background-color: var(--bg-soft); } 

/* 필터 모달 */
.filter-modal { display: none; position: fixed; left: 50%; top: 50%; z-index: 10000; transform: translate(-50%, -50%); width: 500px; padding: 20px; border-radius: 20px; background-color: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16); } 
.filter-bg {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
}
.filter-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } 
.filter-modal__header h2 { font-size: 20px; font-weight: 700; line-height: 150%; } 
.filter-grid { display: flex; flex-direction: column; flex-wrap: wrap; gap: 24px; height: 180px; } 
.filter-option { display: flex; align-items: center; gap: 8px; } 
.filter-grid .filter-radio { display: inline-block; --size: 22px; --border: 1px; --dot: 10px; --on: #fff; --off: var(--line);
 width: var(--size); height: var(--size); border-radius: 999px; border: var(--border) solid var(--off); background: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } 
.filter-option input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } 

.filter-radio::after { content: ""; width: var(--dot); height: var(--dot); border-radius: 999px; background: var(--line); } 
.filter-option input[type="radio"]:checked + .filter-radio { border-color: var(--blue); background-color: var(--blue); } 
.filter-option input[type="radio"]:checked + .filter-radio::after { background-color: var(--on); } 
.filter-option input[type="radio"]:focus-visible + .filter-radio { outline: 3px solid rgba(45,168,255,.25); outline-offset: 2px; } 
.filter-text { font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; } 
.filter-text em { color: var(--bg-muted); } 

.filter-modal__footer { display: flex; justify-content: center; margin-top: 40px;  transition: all .3s; } 
.filter-modal__footer button { display: block; width: 100%; padding: 10px 0 10px 0;border-radius: 8px; background-color: var(--blue); text-align: center; font-size: 18px; font-weight: 700; line-height: 150%; color: #fff; transition: all .3s; } 


@media screen and (max-width: 768px){
 .product-head h2 { margin-bottom: 30px; } 
 .prod-search-form form { padding: 5px 12px 5px 16px; } 
 .product-head { margin-bottom: 30px; } 
 .product-result-wrap { margin-bottom: 20px; } 
 }

@media screen and (max-width: 686px){
 .prod-search-form form { width: 100%; } 

 .product-result-wrap ul { gap: 16px; } 
 .product-result-wrap ul li:after { right: -8px; } 
 }