.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 {display: flex;position: relative;border-bottom:1px solid #bbbbbb;}
    .fliter_b li {font-size:18px;color:#000;width: 15%;text-align: center;cursor: pointer;padding: 0px 0px 28px 0px;}
    .is-active {color: #7800ff !important;font-weight: 700;}
    /* 이동하는 보라색 밑줄 */
    .ink-bar{position:absolute; left:0; bottom:-1px;  /* 회색선 위에 딱 맞게 */height:2px; width:0;background:#7800FF;transition: left .28s ease, width .28s ease;pointer-events:none;}
    .fliter_tabs { position: relative; } 


    .filter-group {display: flex;align-items: baseline;margin-top:22px;}
    .group_box {font-size:18px;width: 15%;padding-left: 3%;}
    .group_box span {font-weight: 700;}
    .group_radio {font-size:18px;display: flex;align-items: center;}
    /* 입력을 숨기되 접근성은 유지 */
    .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;}

    /* 바깥 원(테두리) */
    .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 {display:flex;gap:8px;flex-wrap:wrap;flex: 1}
    /* 체크박스 숨기기(접근성 유지) */
    .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 #D9D9D9;border-radius:24px;background:#F9F9F9;color:#4a4a55;font-size:14px;line-height:1;cursor:pointer;transition:all .15s ease;user-select:none;}

    .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;}
    .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;
    }