@charset "UTF-8";
/* shop-search-mobile 검색 오버레이 아이콘 img→인라인 SVG 전환 (2026-07-09) */
.m_header .container_fix .m_search_box .search_top .search_btn svg.search_svg {
    height: 22px;
    width: auto;
    color: var(--main-btn-point-color);
    display: block;
}
.m_header .container_fix .m_search_box .search_top .close_btn svg.close_svg {
    height: 16px;
    width: auto;
    color: #919191;
    display: block;
}


/* 검색어 관련 모달 기본 */

.m_header .container_fix .m_search_box {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 150;
}

.at-header.fixed .m_header .m_search_box {
    top: 0;
}

.m_header .container_fix .m_search_box.no_banner {
    top: 0;
}

/* 검색어를 입력해주세요. */
.m_header .header_search {
    height: 45px;
}
.m_header .header_search .search_top {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e1e1e1;
    height: 100%;
}
.m_header .search_top .search_top_top {
    width: calc(100% - 42.5px);
    height: 100%;
    position: relative;
}
.m_header .header_search .search_top input {
    border: none;
    font-size: 14px;
    width: 100%;
    height: 100%;
    padding-left: 15px;
    color: #0c0c0c;
}

.m_header .header_search .search_btn {
    border: none;
    background: transparent;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translatey(-50%);
}

.m_header .header_search .search_btn img {
    height: 22px;
}

.m_header .header_search .close_btn {
    border-left: 1px solid #e1e1e1;
    width: 42.5px;
    height: 100%;
    line-height: 42px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.m_header .header_search .close_btn img {
    height: 18px;
}

/* 최근 검색어 + 추천 검색어 + 인기 검색어 */
.m_header .header_search .search_bot {
    height: calc(100vh - 45px);
    overflow-y: auto;
}

.m_header .header_search .search_bot::-webkit-scrollbar {
    width: 0;
}

.m_header .header_search .search_bot h3 {
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #0c0c0c;
}


/* 최근 검색어 */
/* 최근 검색어 타이틀 우측 삭제버튼 */
.m_header .msearch_preview_top .select_complete_btn {
    border: none;
    display: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--main-btn-font-color);
    background-color: transparent;
}

.m_header .msearch_preview_top .delete_open_btn {
    width: 13px;
    height: 13px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: #fff;
    outline: none;
}

.m_header .msearch_preview_top .delete_open_btn span {
    display: block;
    width: 3px;
    height: 3px;
    background-color: #919191;
    border-radius: 50%;
}

.m_header .msearch_preview_top .delete_open_btn span + span {
    margin-top: 2px;
}

.m_header .msearch_preview_box .msearch_preview_top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 15px 15px 18px;
}

.m_header .msearch_preview_box .msearch_preview_mid {
    overflow-x: auto;
}

.m_header .msearch_preview_box .msearch_preview_mid .preview_list {
    padding: 0 15px;
    display: flex;
}

.m_header .msearch_preview_box .msearch_preview_mid .preview_list::-webkit-scrollbar {
    height: 0;
    display: none;
}

.m_header .preview_list .m_recent_list {
    display: table-cell;
}

.m_header .preview_list .m_recent_list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    background-color: #f5f5f5;
    border-radius: 16px;
}

.m_header .preview_list .m_recent_list + .m_recent_list a {
    margin-left: 8px;
}

.m_header .preview_list .m_recent_list .left p {
    font-size: 14px;
    font-weight: 400;
    color: #444;
    line-height: 31px;
    white-space: nowrap;
}

.m_header .preview_list .m_recent_list .right {
    display: none;
    margin-left: 9px;
    border: none;
    background-color: transparent;
}

.m_header .preview_list .m_recent_list .right img {
    height: 9px;
}

/* 최근 검색어 선택삭제 or 전체 삭제 */
.m_header .m_search_box .m_search_delete_modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}
.m_header .m_search_box .m_search_delete_modal .cont_box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 15px 15px 0 0;
    padding: 27px 0;
}
.m_header .m_search_box .m_search_delete_modal .modal_top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.m_header .m_search_box .m_search_delete_modal .m_search_delete_bar {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background-color: #e6e6e6;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.m_header .m_search_box .m_search_delete_modal .m_search_close_btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.m_header .m_search_box .m_search_delete_modal .m_search_close_btn::before,
.m_header .m_search_box .m_search_delete_modal .m_search_close_btn::after {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    background-color: #999999;
    position: absolute;
    position: absolute;
    top: 50%;
    left: 50%;
}
.m_header .m_search_box .m_search_delete_modal .m_search_close_btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.m_header .m_search_box .m_search_delete_modal .m_search_close_btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.m_header .m_search_box .m_search_delete_modal button {
    color: #0c0c0c;
    font-size: 14px;
    font-weight: 500;
    display: block;
    line-height: 38px;
    background-color: #fff;
    border: none;
    padding: 0 20px;
    width: 100%;
    text-align: left;
}



/* 추천 검색어 */
.m_header .m_search_box .recommend_top_title {
    margin: 30px 0 15px;
    padding: 0 15px;
}

.m_header .m_search_box .recommend_list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 11px;
    column-gap: 8px;
    padding: 0 15px;
}
.m_header .m_search_box .recommend_list .m_recommend_word {
    display: block;
    height: 33px;
}
.m_header .m_search_box .recommend_list .m_recommend_word a {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--main-btn-font-point-color);
    line-height: 33px;
    padding: 0 11px;
    background-color: var(--main-btn-point-color1);
    border-radius: 16.5px;
}

.m_header .header_search .search_bot .msearch_preview_box .msearch_preview_mid .more_keyword .more_keyword_btn button {
    border: 1px solid #e1e1e1;
    background-color: #fff;
    border-radius: 16.25px;
    width: 87.5px;
    height: 32.5px;
    margin: 15px auto 0;
    font-size: 11px;
    color: #333;
    line-height: 30.5px;
}
.m_header .header_search .search_bot .msearch_preview_box .msearch_preview_mid .more_keyword .more_keyword_btn .arrow {
    display: inline-block;
    font-family: "SUIT", sans-serif;
    font-weight: 500;
    transform: rotate(90deg);
    margin-left: 2px;
}
.m_header .header_search .search_bot .msearch_preview_box .msearch_preview_mid .list_off {
    color: #999999;
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    text-align: left;
}
.m_header .header_search .search_bot .msearch_preview_box .msearch_preview_mid .list_off img {
    display: block;
    margin: 0 auto 15px;
    width: 41px;
    height: 41px;
}

/* 인기 검색어 */
.m_header .m_search_box .keyword_rank_box_title {
    font-size: 16px;
    font-weight: 700;
    color: #0c0c0c;
    text-align: left;
    padding-left: 15px;
    margin: 30px 0 0;
}
.m_header .m_search_box .keyword_rank_sub {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    text-align: left;
    padding-left: 15px;
    margin: 10px 0 15px;
}

.m_header .m_search_box .rank_li {
    padding: 0 20px 0 15px;
}
.m_header .m_search_box .rank_li + .rank_li {
    margin-left: auto;
}
.m_header .m_search_box .rank_li + .rank_li .rank_a {
    margin-left: auto;
    border-top: 1px solid #e1e1e1;
}
.m_header .m_search_box .rank_li .rank_a {
    font-size: 15px;
    line-height: 48px;
    font-weight: 500;
    display: flex;
    align-items: center;
}
.m_header .m_search_box .rank_li .num {
    font-family: "Open Sans", sans-serif;
    width: 36px;
    text-align: left;
    padding-left: 10px;
}
.m_header .m_search_box .rank_li .keyword {
    font-family: "Open Sans", sans-serif;
    color: #5d5d5d;
}
.m_header .m_search_box .rank_li .keyword:hover {
    color: var(--main-box-font-point-color);
}
.m_header .m_search_box .rank_li .status {
    font-family: "Open Sans", sans-serif;
    margin-left: auto;
    position: relative;
}
.m_header .m_search_box .rank_li .status.rank_up:before {
    content: "";
    border-bottom: 5.5px solid #f86e78;
    border-left: 4.5px solid rgba(0, 0, 0, 0);
    border-right: 4.5px solid rgba(0, 0, 0, 0);
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translatey(-50%);
}
.m_header .m_search_box .rank_li .status.rank_down:before {
    content: "";
    border-top: 5.5px solid #aaa;
    border-left: 4.5px solid rgba(0, 0, 0, 0);
    border-right: 4.5px solid rgba(0, 0, 0, 0);
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translatey(-50%);
}
.m_header .m_search_box .rank_li .status.rank_keep:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 1px;
    background: #aaa;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translatey(-50%);
}

/* 검색어 상품 노출 */
.m_header .search_preview_box {
    position: absolute;
    top: 45px;
    left: 0;
    display: none;
    width: calc(100% + 42.5px);
    height: 100vh;
    border: none;
    border-radius: 0;
    background-color: #fff;
    overflow: hidden;
    visibility: visible;
    z-index: 10;
    transition: all 0.5s;
}
.m_header .search_preview_list {
    position: relative;
    height: auto;
    border: none;
    background-color: transparent;
}
.m_header .search_preview_list li {
    padding: 12.25px 15px;
    color: #666;
}
.m_header .search_preview_list li + li {
    margin-left: 0;
    border-top: 1px solid #f5f5f5;
}
.m_header .search_preview_list li:last-child {
    padding: 12.25px 15px;
}

.m_header .search_preview_list li a {
    display: flex;
    align-items: center;
    padding: 0;
}

.m_header .search_preview_list li:last-child a {
    padding: 0;
}

.m_header .search_preview_list li span.b {
    font-weight: 500;
}