.main_container {margin: 0 auto;width: 100%;max-width: 1200px;}
.main_text {font-size:26px;margin-top:32px; display:flex; justify-content: space-between;align-items: center;}
.main_text span {font-weight: 800;}
.main_fliter {margin-top:28px;border:1px solid #AB44FF;border-radius: 24px;padding: 26px 36px 36px 36px;width: 100%;}
/* fliter_b: join_menu 스타일 (index.php와 동일) */
.fliter_tabs { position: relative; overflow-x: auto; padding-bottom: 28px; margin-top: 60px; margin-bottom: 28px; }
.fliter_tabs::-webkit-scrollbar { display: none; }
.fliter_b.join_menu { display: grid; grid-template-columns: repeat(var(--grid-count, 10), 1fr); gap: 30px; min-width: min-content; }
.fliter_b .join_menu_box { padding: 20px 30px; background: #F6F6F6; border-radius: 10px; cursor: pointer; width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border: solid 1px #762CC7; }
.fliter_b .join_menu_sub_box { cursor: pointer; }
.fliter_b .join_menu_sub_box:hover .join_menu_icon { animation: updown-transform 0.4s ease-in-out; will-change: transform; }
.fliter_b .join_menu_sub_box:hover .join_menu_text { color: #7800FF; }
@keyframes updown-transform {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
.fliter_b .join_menu_text { font-size: 20px; text-align: center; margin-top: 20px; font-weight: 700; color: #000; }
.fliter_b .join_menu_sub_box.is-active .join_menu_text { color: #7800ff; font-weight: 700; }
.fliter_b .join_menu_sub_box.is-active .join_menu_box { border-color: #7800ff; background: #F5F2FF; }
.fliter_b .join_menu_icon { object-fit: contain; width: 100%; }
.fliter_b.grid-many .join_menu_box { padding: 12px 18px; }
.fliter_b.grid-extra-many .join_menu_box { padding: 8px 12px; }
.fliter_b.grid-many .join_menu_text { font-size: 16px; margin-top: 12px; }
.fliter_b.grid-extra-many .join_menu_text { font-size: 14px; }
/* 이동하는 보라색 밑줄 */


.filter-group {display: flex;align-items: baseline;margin-top:22px;}
.group_box {font-size:18px;width: 13%;padding-left: 3%;}
.group_box span {font-weight: 700;}
.group_radio {font-size:18px;display: flex;align-items: center;padding-left:40px;padding-right:80px;}
/* 입력을 숨기되 접근성은 유지 */
.group_radio input[type="radio"]{position:absolute;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;}

/* 라벨을 클릭 영역으로 만들고 왼쪽에 원 자리 확보 */
.group_radio label{position:relative;margin-right:56px;padding-left:28px;line-height:20px;cursor:pointer;color:#303030;font-size:16px;}

/* 바깥 원(테두리) */
.group_radio label::before{content:"";position:absolute;left:0; top:50%;transform:translateY(-50%);width:20px; height:20px;border:1px solid #909090;border-radius:50%;background:#fff;transition:border-color .15s ease, box-shadow .15s ease;}

/* 안쪽 점 */
.group_radio label::after{content:"";position:absolute;left:4px; top:50%;transform:translateY(-50%) scale(0);width:12px; height:12px;border-radius:50%;background:#7800ff;transition:transform .15s ease;}

/* 선택되었을 때: 보라 테두리 + 점 표시 */
.group_radio input[type="radio"]:checked + label::before{border-color:#7800ff;}
.group_radio input[type="radio"]:checked + label::after{transform:translateY(-50%) scale(1);}

/* 키보드 포커스 표시 */
.group_radio input[type="radio"]:focus-visible + label::before{outline:3px solid rgba(120,0,255,.35);outline-offset:1px;}

/* 비활성화 */
.group_radio input[type="radio"]:disabled + label{color:#8A8A8A; cursor:not-allowed;}
.group_radio input[type="radio"]:disabled + label::before{border-color:#909090; background:#fff;}


.group_chip_wrap {flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding-left:40px;padding-right:80px;position:relative;}
.group_chip_wrap.has-scroll:not(.at-start)::before{content:"";position:absolute;left:40px;top:0;width:40px;height:100%;pointer-events:none;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%);z-index:1;}
.group_chip_wrap.has-scroll:not(.at-end)::after{content:"";position:absolute;right:80px;top:0;width:40px;height:100%;pointer-events:none;background:linear-gradient(to left,#fff 0%,rgba(255,255,255,0) 100%);z-index:1;}
.group_chip_wrap .chip-scroll-btn{display:none !important;position:absolute;top:50%;transform:translateY(-50%);font-size:14px;color:#ADADAD;z-index:2;background:none;border:none;padding:8px;cursor:pointer;pointer-events:none;}
.group_chip_wrap .chip-scroll-left{left:8px;}
.group_chip_wrap .chip-scroll-right{right:40px;}
.group_chip_wrap .chip-scroll-btn:hover{color:#7800ff;}
.group_chip_wrap.has-scroll .chip-scroll-btn{display:flex !important;align-items:center;justify-content:center;pointer-events:auto;}
.group_chip_wrap.has-scroll.at-start .chip-scroll-left{display:none !important;}
/* .group_chip_wrap.has-scroll.at-end .chip-scroll-right{display:none !important;} */
.group_chip {display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-ms-overflow-style:none;scrollbar-width:none;cursor:grab;min-width:0;}
.group_chip::-webkit-scrollbar{display:none;}
.group_chip.dragging{cursor:grabbing;user-select:none;}
/* 체크박스 숨기기(접근성 유지) */
.group_chip input[type="checkbox"], input[type="checkbox"].chip {position:absolute;opacity:0;pointer-events:none;}

/* 라벨을 칩처럼 */
.group_chip label, label.chip, .group_chip a {display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding: 8px 22px;border:1.5px solid #ADADAD;border-radius:24px;background:#F9F9F9;color:#4a4a55;font-size:14px;line-height:1;cursor:pointer;transition:all .15s ease;user-select:none;flex-shrink:0;}

.group_chip label:hover, .group_chip a:hover {background:#fff;}


/* checked 상태 */
.group_chip input[type="checkbox"]:checked + label, input[type="checkbox"].chip:checked + label.chip {border-color:#7800ff;background:#F5F2FF;color:#7800ff;font-weight:600;}

/* 키보드 포커스 */
.group_chip input[type="checkbox"]:focus-visible + label, input[type="checkbox"].chip:focus-visible + label.chip {outline:3px solid rgba(120,0,255,.35);outline-offset:1px;}

/* 비활성화 */
.group_chip input[type="checkbox"]:disabled + label, input[type="checkbox"].chip:disabled + label.chip {color:#8A8A8A;border-color:#909090;background:#fff;cursor:not-allowed;}


.cont_search_box {position: relative;display: flex;align-items: center;}
.cont_search_box input::placeholder {color: #b4b4b4;}
.cont_search_box input::-webkit-input-placeholder{color: #b4b4b4;}
.cont_search_box input:-ms-input-placeholder{color: #b4b4b4;}
.search_icon {
  position: absolute;
  right: 20px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: none;
  display: flex;
  background: none;
}
.cont_search_input {height: 100%;width: 360px;border: 1px solid #BFBFBF;border-radius: 24px;padding: 11px 18px;font-size: 17px;}
.all_search_box {display:flex;align-items: center;padding-left: 3%;justify-content: space-between;}
.reset_box {display: flex;align-items: center;gap: 6px;cursor: pointer; justify-content: flex-end; margin-top:30px;}
.reset_box span{font-size: 14px;}
.all_reset_box {display:flex;gap: 28px;margin-left: auto;}
.all_reset_box a {background:#7800FF;font-size:18px;color:#fff;padding: 13px 72px;border-radius: 24px;cursor: pointer;}

.list_box {display:flex;align-items: center;justify-content: space-between;margin-top:100px;}
.list_box_sub {display:flex;align-items: center;gap: 32px;width: 60%;}
.list_box_sub p {font-size:16px;}
.list_box_sub span {font-weight:600;}
.fliter_list {display:flex;gap:10px;overflow-x: scroll;white-space: nowrap;-ms-overflow-style: none;scrollbar-width: none;cursor: grab; padding: 0 10px;}
.fliter_list::-webkit-scrollbar { display: none; }
/* 드래그 중 스타일 */
.fliter_list.dragging{cursor: grabbing;user-select: none;}
.fliter_list li{background:#F5F2FF;color:#7800FF;border:1px solid #7800FF;border-radius: 24px;font-size:14px;padding:8px 12px;display: flex;align-items: center;}
.fliter_list li img {padding-left: 11px;}
.blurArea{position: relative;}
.blurArea::before{content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 100%; pointer-events: none; background: linear-gradient(to left, rgba(255,255,255,0) 0%, #fff 100%);}
.blurArea::after{content: ""; position: absolute; right: 0; top: 0; width: 20px; height: 100%; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%);}
.fliter_cate_list {font-size:15px;display: flex; justify-content: flex-end;margin-top:35px;}
.fliter_cate_list li {color:#666666;border-right:1px solid #909090;padding:0px 22px;cursor: pointer;}
.fliter_cate_list li:nth-child(4) {border-right:none !important;padding: 0px 0px 0px 22px !important;}
.d_on {font-weight:700;color:#000 !important;}

.result_list_box {margin-top:32px;display: grid;grid-template-columns: repeat(4, 1fr);gap: 26px;}
.cate_card {overflow: hidden;}
.card_image {position: relative;overflow: hidden;}
.card_image::after{content:"";position:absolute;inset:0;pointer-events:none;background: linear-gradient(180deg, #00000000, #00000001, #000000B5);}
.best_card_img {width: 100%;height: 280px;object-fit: cover;transition: transform 0.4s ease;will-change: transform;}
.best_tag {position: absolute;top: 12px;left: 8px;}
.card_tag {background: #000;color: #fff;border-radius: 16px;padding: 2px 10px;font-size: 12px;}
.wish_box {background: #959595;border-radius: 50px;width: 22px;height: 22px;}
.best_wish_box {position: absolute;top: 8px;right: 8px;background: #79797973;}
.wish_btn {position: absolute;top: 17%;right: 3px;width: 16px;opacity: 0.8;}
.best_card_info {position: absolute;width: 100%;display: flex;justify-content: center;gap: 20px;bottom: 8px;color: #fff;}
.card_info {display: flex;gap: 16px;margin-top: 16px;font-size: 13px;}
.info_icon {display: flex;align-items: center;gap: 4px;z-index: 2;}
.info_icon img {width: 13px;}
.best_card_cotent {padding: 12px 0px 0px 0px;}
.card_content_main {display: flex;justify-content: space-between;position: relative;}
.best_card_content_main h3 {font-size: 18px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.best_card_content_main a { width: 100%; }
.card_content_main h3 {font-size: 18px;font-weight: 600;}
.best_card_sub_text {font-size: 14px;margin-top: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.price {font-size: 17px;font-weight: 700;margin-top: 14px;display: flex;gap: 12px;align-items: center;}
.discount {color: #7800FF;}
.original {color: #666;text-decoration: line-through;font-size: 14px;font-weight: 600;}
.cate_card:nth-child(n+5) {margin-top: 72px;}

.page_div {height: 56px;margin-top:90px;position: relative;margin-bottom:200px;display: flex;justify-content: flex-end;align-items: center;}
.page_div a {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size:17px;color:#fff;background:#303030;border-radius: 24px;padding:16px 86px;cursor: pointer;}
.page_div a:hover {background:#762CC7}
.page_box {display: flex;align-items: center;gap: 48px;}

#page_search {padding : 5px 26px;font-size:15px;color:#000;border: 1px solid #AFAFAF;border-radius: 5px;width: 64px;}
.all_page {font-size:15px;}
.page_num {display: flex;align-items: center;gap: 19px;}


:root { --sticky-top: 100px; } /* 상단 고정 오프셋(헤더 높이만큼 조정해도 됨) */
/* 고정될 때의 스타일 */
.list_box.fixed{position: fixed;top: var(--sticky-top);z-index: 60;left: 50%;transform: translateX(-50%);width: 100%;max-width: 1200px;background:#fff;border-bottom: 1px solid rgba(0,0,0,.06);}

/* 레이아웃 밀림 방지 스페이서 */
.list_box-spacer{ height:0; }
.list_box-spacer.active{ height: var(--listbox-h, 0px); }

/* 숨김 상태 */
.sticky-hide {opacity: 0;transform: translateY(-12px);pointer-events: none;}


.page_arrow-rot180 { transform: rotate(180deg); transition: transform .2s ease; }

.hidden{
  display:none;
}

#cont_search_header{
  width: 420px;
  border: 1px solid  #000;
}

#btnSearchIcon_header img{
  width: 100%;
}

.filter-area.hidden {
    display: none !important;
}

/* 헤더 검색박스 위치 설정 */
.main_text .cont_search_box {
    position: relative;
}

.main_text .cont_search_box .search_clear_btn,
.main_text .cont_search_box .search_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main_text .cont_search_box .search_clear_btn,
.all_search_box .cont_search_box .search_clear_btn {
    right: 50px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #959595;
    color: #ffffff;
    font-size: 14px;
    position: absolute;
    border: none;
    cursor: pointer;
    padding: 0;
}

.main_text .cont_search_box .search_icon {
    right: 20px;
}

.list_right_div{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}