/* 모바일검색창 */
.search-page{ width: 100%;   display: flex;    flex-direction: column;    align-items: center;   gap: 40px;    position: relative;  padding: 20px 0 100px;  }

.search-page .container{  width: 100%;    display: flex;   flex-direction: column;    gap: 30px;   padding: 25px 0;  max-width: 100%;  margin: 0;}
.search-page .recent-searches,
.search-page .recommended-searches,
.search-page .popular-searches,
.search-page .recent-products,
.search-page .recommended-products{  width: 100%;    display: flex;   flex-direction: column;  gap: 15px; margin: 0;}
.search-page .recent-searches .section-header{padding: 0 20px;}

.search-page .recommended-searches,
.search-page .popular-searches,
.search-page .recent-products,
.search-page .recommended-products{padding: 0 20px;}
.search-page .section-header{width: 100%;display: flex;flex-direction: row; justify-content: space-between; align-items: center;}
.search-page .section-header h3{font-size: 15px; letter-spacing: -0.75px; line-height: 1; font-weight: 700;color: #333;}

/* 모바일검색창 - 최근검색어 */
.search-page .section-header .clear-all-btn{font-size: 12px;letter-spacing: -0.75px; line-height: 1; font-weight: 400;color: #888}
.search-page .recent-searches .search-tags-swiper {padding-left: 20px;}
.search-page .recent-searches .search-tags-swiper .swiper .swiper-wrapper{width: 100%;  display: flex;  flex-direction: row;  align-items: flex-start;  justify-content: flex-start; gap: 8px;}
.search-page .recent-searches .search-tags-swiper .swiper .swiper-wrapper .swiper-slide {display: flex;  max-width: fit-content;  width: 100%; margin-right: 0;}
.search-tag-item{width: fit-content; height: 36px; display: flex;  flex-direction: row;  align-items: center;  justify-content: center;  gap: 5px;  padding: 8px 12px;   border-radius: 100px;  border: 1px solid #eee;  background-color: #fff;}
.search-tag-item .search-tag{font-size: 14px; letter-spacing: -0.75px; line-height: 1; font-weight: 400;color: #333;}
.search-tag-item .remove-btn{font-size: 14px; line-height: 1; font-weight: 400;color: #B5B5B6;}

/* 모바일검색창 - 추천검색어 */
.recommended-searches .search-tags{width: 100%;  display: flex;  gap: 5px;  flex-wrap: wrap;}
.recommended-searches .search-tags .search-tag{padding: 8px 12px;  border-radius: 100px;  background-color: #F8F8F8;  font-size: 14px;  letter-spacing: -0.75px;  line-height: 1;  color: #333;  font-weight: 400;}


/* 모바일검색창 - 인기검색어 */
.popular-searches .update-time{display: flex;  flex-direction: row;  align-items: center;  justify-content: center;  gap: 3px;}
.popular-searches .update-time span{font-size: 12px;letter-spacing: -0.75px; line-height: 1; font-weight: 400;color: #888}
.popular-searches .update-time i{font-size: 12px;letter-spacing: -0.75px; line-height: 1; font-weight: 400;color: #888}

/* 인기 검색어 리스트 */
.popular-searches .popular-list{width: 100%;position: relative; padding-bottom: 30px;}
.popular-searches .popular-group{width: 100%; display: flex; flex-direction: row;gap: 40px;}
.popular-searches .left-column,
.popular-searches .right-column { width: calc(100% / 2); flex: 1;  display: flex;  flex-direction: column;}
.popular-searches .popular-item{width: 100%; display: flex;  flex-direction: row;  align-items: center;  justify-content: flex-start;gap: 5px;padding: 10px 0;cursor: pointer;transition: background-color 0.2s ease;}
.popular-searches .popular-item .rank{min-width: 20px; max-width: 20px;display: flex;  flex-direction: row;  align-items: center; justify-content: flex-start; font-size: 18px; font-weight: 700; line-height: 1;}
.popular-searches .popular-item.first-rank .rank{color: #D70011;}
.popular-searches .popular-item .keyword{width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;font-size: 15px; letter-spacing: -0.75px;font-weight: 400; line-height: 1;}
.popular-searches .popular-item .status{min-width: 20px; max-width: 20px;display: flex;  flex-direction: row;  align-items: center;  justify-content: center;}
.popular-searches .popular-item .status.status-new{font-size: 11px; font-weight: 700;color: #000;}
.status-up,.status-same,.status-down{font-size: 14px; font-weight: 700;}
.status-up{color:#D70011;}
.popular-searches .swiper-pagination .swiper-pagination-bullet{margin: 0 !important; border-radius: 0;width: 40px; height: 2px;}
.popular-searches .swiper-pagination .swiper-pagination-bullet-active{background: #000;}

/* 검색결과 화면 */
/*  검색결과 - 타이틀 */
.search-results-page .container{width: 100%;padding: 50px 0;display: flex;  flex-direction: column;  gap: 15px;}
.search-results-page .container .search-header{width: 100%;  display: flex;  flex-direction: column;  align-items: center;  gap: 60px;}
.search-results-page .container .search-header .search-title{width: 100%;text-align: center;}
.search-results-page .container .search-header .search-title .title{font-size: 28px; letter-spacing: -0.75px; line-height: 1;font-weight: 400; color: #333;}
.search-results-page .container .search-header .search-title .title b{font-weight: 600; color: #23b16c;}
.search-results-page .container .search-header .sort-options{width: 100%;display: flex;  flex-direction: row; justify-content: space-between;  align-items: center;margin-bottom: 20px;}
.search-results-page .container .search-header .sort-options .result-count{font-size: 14px; letter-spacing: -0.75px; line-height: 1; color: #333;}
.search-results-page .sort-options .sort-buttons.web-sort{display: flex;flex-direction: row;align-items: center;gap: 10px;}
.search-results-page .sort-options .sort-buttons.web-sort .sort-btn{display: flex;flex-direction: row;align-items: center;gap: 10px; font-size: 14px;font-weight: 400; letter-spacing: -0.75px; line-height: 1;color: #B5B5B6; transition: all 0.3s;}
.search-results-page .sort-options .sort-buttons.web-sort .sort-btn.active{color: #333;font-weight: 600;}
.search-results-page .sort-options .sort-buttons.web-sort .sort-btn +.sort-btn::before{content: '';width: 1px; height: 14px; background-color: #B5B5B6; display: block;}


/* 걸색결과 - 제품리스트 */
.search-results-page .product-grid-container{width: 100%;}
.search-results-page .product-grid{display: flex; flex-wrap: wrap; gap: 20px; width: 100%;}
.search-results-page .product-card{display: flex; flex-direction: column; align-items: flex-start; width: calc((100% / 4) - 30px);}
.search-results-page .product-card .product-card-link{display: flex;  width: 100%;  flex-direction: column;  gap: 15px;}
.search-results-page .product-card .product-card-link .thumb{position: relative;  width: 100%;  max-width: 100%;  height: 100%;  max-height: 250px;  border-radius: 5px;  overflow: hidden; aspect-ratio: 1 / 1;}
.search-results-page .product-card .product-card-link .thumb img{width: 100%; height: 100%; object-fit: cover;}
.search-results-page .product-card .product-card-link .thumb .btn-cart{position: absolute; bottom: 10px;  right: 10px;  background: rgba(0, 0, 0, 0.6);  color: #fff;  border-radius: 50%;  cursor: pointer;  width: 30px;  height: 30px;  display: flex;  flex-direction: row;  align-items: center;  justify-content: center;  z-index: 10;}
.search-results-page .product-card .product-card-link .thumb .btn-cart .cart-img{width: 20px;  height: 20px;  object-fit: contain;  transform: none;}
.search-results-page .product-card .info{width: 100%;display: flex;  flex-direction: column;  gap: 6px;}
.search-results-page .product-card .info h3{width: 100%;  font-size: 17px;  font-style: normal;  font-weight: 400;  letter-spacing: -0.75px;  line-height: 1.4;  color: #333;  display: -webkit-box;  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;  word-break: break-word;}
.search-results-page .product-card .info .price{color: #333;  font-size: 16px;  font-weight: 700;}
.search-results-page .product-card .info .product-rating-wrap{display: flex; flex-direction: row;  align-items: center;  gap: 5px;}
.search-results-page .product-card .info .product-rating-wrap .rating-icon i {  font-size: 16px;  color: #23b16c;}
.search-results-page .product-card .info .product-rating-wrap  .rating-icon span {  font-size: 13px; color: #666666;}
.search-results-page .product-card .info .product-rating-wrap .review-count { font-size: 13px; color: #666666;}

/* 모바일 정렬/필터 버튼 */
.mobile-sort-filter { display: none;  align-items: center;  gap: 10px;}

/* 모바일 정렬 드롭다운 */
.mobile-sort-dropdown {position: relative;}
.sort-dropdown-btn {display: flex;align-items: center;gap: 8px;font-size: 14px;color: #333;cursor: pointer;}
.sort-dropdown-btn i {font-size: 12px;transition: transform 0.2s ease;}
.sort-dropdown-btn.active i {  transform: rotate(180deg);}
.sort-dropdown-btn .sort-text{font-weight: 600;}
.sort-dropdown-menu {min-width: 80px;  position: absolute;  top: 100%;   right: 0;  background: #fff;border-radius: 5px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  z-index: 1000;
display: none;margin-top: 4px;}
.sort-dropdown-menu.active {display: block;}
.sort-dropdown-menu .sort-option {  padding: 10px;font-size: 12px;letter-spacing: -0.75px;  color: #333; cursor: pointer;transition: background-color 0.2s ease;}
.sort-dropdown-menu .sort-option:last-child {border-bottom: none;}
.sort-dropdown-menu .sort-option.active {color: #23b16c;font-weight: 600;}

/* 필터 버튼 */
.mobile-sort-filter .filter-btn {  display: flex;  align-items: center; gap: 6px;  font-size: 14px;  color: #333;  cursor: pointer;}
.mobile-sort-filter .filter-btn span{font-size: 14px; font-weight: 400;color: #888;}
.mobile-sort-filter .filter-btn .filter-ico {width: 16px; height: 16px; background: url("../../images/icon/filter-icon.svg") 50% 50% no-repeat; background-size: contain;;}
/* 필터 바텀시트 */
.filter-bottom-sheet{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:none;}
.filter-bottom-sheet.active{display:block;}
.filter-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);}
.filter-content{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;max-height:80vh;height: 100%; display:flex;flex-direction:column;animation:slideUp 0.3s ease-out;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.filter-header{padding:20px 20px 0;text-align:center;position:relative;}
.filter-handle{width:40px;height:4px;background:#ddd;border-radius:2px;margin:0 auto 15px;}
.filter-title{font-size:18px;font-weight:700;color:#333;margin:0;}
.filter-tabs{display:flex;border-bottom:1px solid #f0f0f0;margin:20px 0 0;}
.filter-tab{flex:1;background:none;border:none;padding:15px 10px;font-size:14px;color:#666;cursor:pointer;position:relative;}
.filter-tab.active{color:#333;font-weight:600;}
.filter-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80%;height:2px;background:#23b16c;}
.filter-body{flex:1;overflow-y:auto;}
.filter-tab-content{display:none;}
.filter-tab-content.active{display: flex; flex-direction: column;  gap: 20px;}

/* 필터 옵션 스타일 */
.filter-options{display:flex;flex-direction:column;gap:15px;padding: 0 20px;}
.filter-option{display:flex;align-items:center;justify-content:space-between;padding:15px 0;background:none;border:none;border-bottom:1px solid #f0f0f0;font-size:16px;color:#333;cursor:pointer;text-align:left;width:100%;}
.filter-option:last-child{border-bottom:none;}
.filter-option.active{color:#23b16c;font-weight:600;}

/* 체크박스가 있는 필터 옵션 */
.inp.filter-option{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid #f0f0f0;}
.inp.filter-option:last-child{border-bottom:none;}
.inp.filter-option input[type="checkbox"]{display:none;}
.inp.filter-option {display:flex;align-items:center;justify-content:flex-start;width:100%;cursor:pointer;}
.inp.filter-option .checkcircle .text{width: fit-content;display:flex;align-items:center;gap:10px;}
.inp.filter-option .checkcircle .text p{font-size:16px;color:#333;margin:0;}
.inp.filter-option .checkcircle .count{font-size:14px;color:#999;}
.inp.filter-option input[type="checkbox"]+label.checkcircle::before{min-width: 18px; max-width: 18px; height: 18px;}
.inp.filter-option input[type="checkbox"]:checked+label.checkcircle::before{filter: brightness(1.25);min-width: 18px; max-width: 18px; height: 18px;}

/* 버튼 형태의 필터 옵션 */
.filter-option button{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:15px 0;font-size:16px;color:#333;cursor:pointer;text-align:left;}
.filter-option button .filter-checkbox{width:20px;height:20px;border:2px solid #ddd;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:10px;transition:all 0.3s;}
.filter-option button .filter-checkbox i{font-size:12px;color:transparent;transition:color 0.3s;}
.filter-option button .filter-checkbox.active{background:#23b16c;border-color:#23b16c;}
.filter-option button .filter-checkbox.active i{color:#fff;}
.filter-option button.active{color:#23b16c;font-weight:600;}
.sort-options-list{display:flex;flex-direction:column;gap:10px;}
.sort-option{display:flex;align-items:center;justify-content:space-between;padding:15px 0;background:none;border:none;font-size:16px;color:#333;cursor:pointer;text-align:left;}
.sort-option.active{color:#23b16c;font-weight:600;}
.sort-option i{color:#23b16c;font-size:18px;}
.category-options{display:flex;flex-direction:column;gap:10px;}
.category-option{display:flex;align-items:center;justify-content:space-between;padding:15px 0;background:none;border:none;border-bottom:1px solid #f0f0f0;font-size:16px;color:#333;cursor:pointer;text-align:left;}
.category-option.active{color:#23b16c;font-weight:600;}
.category-option .count{color:#999;font-size:14px;}
.price-range{display:flex;flex-direction:column;gap:20px;}
.price-inputs{display:flex;align-items:center;gap:10px;}
.price-input{flex:1;padding:12px;border:1px solid #ddd;border-radius:8px;font-size:16px;}
.price-separator{color:#666;font-size:16px;}
.price-presets{display:flex;flex-wrap:wrap;gap:10px;}
.price-preset{padding:8px 16px;background:#f8f8f8;border:1px solid #ddd;border-radius:20px;font-size:14px;color:#666;cursor:pointer;}
.price-preset.active{background:#23b16c;color:#fff;border-color:#23b16c;}
.brand-alphabet{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.alphabet-btn{padding:8px 12px;background:#ffffff;border:1px solid #eee;border-radius:20px;font-size:14px;color:#666;cursor:pointer;}
.alphabet-btn.active{background:#23b16c;color:#fff;border-color:#23b16c;}
.brand-options{display:flex;flex-direction:column;gap:10px;}
.brand-option{display:flex;align-items:center;justify-content:space-between;padding:15px 0;background:none;border:none;border-bottom:1px solid #f0f0f0;font-size:16px;color:#333;cursor:pointer;text-align:left;}
.brand-option.active{color:#23b16c;font-weight:600;}
.brand-option .count{color:#999;font-size:14px;}
.filter-footer{display:flex;gap:10px;padding:20px;border-top:1px solid #f0f0f0;}
.filter-reset-btn{flex:1;padding:15px;background:#f8f8f8;border-radius:8px;font-size:16px;color:#666;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;height: 55px;}
.filter-apply-btn{flex:2;padding:15px;background:#23b16c;border:none;border-radius:8px;font-size:16px;color:#fff;font-weight:600;cursor:pointer;}
/* 브랜드 스와이퍼 스타일 */
.brand-alphabet-swiper {width: 100%;overflow: hidden;}
.brand-alphabet-swiper-container {  width: 100%;  padding: 10px 20px;  cursor: grab;background-color: #fafafa; border-bottom: 1px solid #eee;  overflow: visible;}
.brand-alphabet-swiper-container .swiper-wrapper .swiper-slide{width: fit-content;}

/* 뱃지 이미지 스타일 */
.badge-wrap { position:absolute; top:0; left:16px; display:flex; gap:5px; } 
.badge { font-size:0.70rem; padding:8px 6px; border-radius:5px; color:#fff; font-weight:500; letter-spacing:-.75px; width:fit-content; flex: 1; display: flex; align-items: center; justify-content: center; height: fit-content; } 
.badge.badge-image { padding:0; border-radius:0; background:transparent; width:auto; height:auto; max-width:70px; object-fit:contain; transition: all 0.3s; } 

/* 260330 추가 가격할인금액 */
.product-card .info .price-box{width: 100%;display: flex; flex-direction: column; align-items: flex-start;}
.product-card .info .price-box p{line-height: 1;}
.product-card .info .price-box .price-origin{font-size: 13px; font-weight: 400; color: #909090;text-decoration: line-through;margin-bottom: 2px;}
.first-discount-badge{width: fit-content; display: flex; flex-direction: row; align-items: center;  justify-content: flex-start; gap: 4px;padding: 3px 8px; background-color: #E12318; border-radius: 4px;}
.first-discount-badge i{width: 12px;height: 12px;background: url("../../images/sale-tag.svg") 50% 50% no-repeat; background-size: contain;}
.first-discount-badge p{display: flex; flex-direction: row;  align-items: center;  gap: 2px;}
.first-discount-badge p strong, small{font-size: 12px; letter-spacing: -0.75px; line-height: 1; color: #ffffff;}


@media (max-width: 1050px){
.search-results-page .container{padding: 50px 10px;}
.search-results-page .product-grid{gap: 20px;}
}
@media (max-width: 768px) {
  .search-results-page .sort-options .sort-buttons.web-sort { display: none;}
  .mobile-sort-filter {display: flex;}
  .search-results-page .product-card{width: calc((100% / 2) - 10px);}
}

@media (max-width: 720px) {
  .filter-content { bottom: calc(65px + var(--safe-area-bottom)); }
}