.c-search__flex-wrapper{display:flex;flex-flow:column;gap:20px}@media screen and (min-width:1281px){.c-search__flex-wrapper{flex-flow:row-reverse;align-items:center;justify-content:space-between;gap:0}}.c-search__divided-box{display:flex;align-items:center;justify-content:flex-start;gap:10px}.c-search__back-btn{display:block;flex-grow:0;background-color:#e3e1e1;background-image:url(https://static.nexon.co.jp/mabinogimobile/official_SUet1U2lbpVnyhZI/common/search-selectbox-reset.svg);background-size:18px 18px;background-position:center;background-repeat:no-repeat;border-radius:16px;width:42px;height:42px}@media screen and (min-width:1281px){.c-search__back-btn{width:52px;height:52px;background-size:22px 22px}}.c-search__back-btn.is-hidden{display:none}@media(any-hover:hover){.c-search__back-btn:hover{background-color:#d0cdcd}}.c-search__container{display:grid;grid-template-columns:120px 1fr;grid-auto-flow:column;color:#5c5c5c;border:1px solid #5c5c5c;height:42px;border-radius:16px;flex:1}@media screen and (min-width:1281px){.c-search__container{grid-template-columns:155px 315px;height:50px}}.c-search__select{position:relative;display:grid;place-items:center;-webkit-user-select:none;user-select:none;width:calc(100% - 1px);height:100%;border-right:1px solid #5c5c5c;font-size:12px;border-radius:16px 0 0 16px}@media screen and (min-width:1281px){.c-search__select{font-size:14px}}@media(any-hover:hover){.c-search__select:hover{background-color:#fff}}.c-search__select-tag{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--p-text)}.c-search__select-tag:after{content:"";display:block;margin:auto;width:9px;height:7px;background-image:url(https://static.nexon.co.jp/mabinogimobile/official_SUet1U2lbpVnyhZI/common/search-selectbox-arrow.svg);background-size:contain;background-repeat:no-repeat}.c-search__select-box{display:none;box-sizing:border-box;overflow:hidden;position:fixed;bottom:0;left:0;width:100%;background-color:#fff;z-index:101;border-radius:20px 20px 0 0}@media screen and (min-width:1281px){.c-search__select-box{position:absolute;top:55px;bottom:auto;border-radius:16px;border:1px solid #5c5c5c}}.c-search__select-box:before{content:"";display:block;width:60px;height:6px;margin:16px auto 30px;background-color:#d9d9dd;border-radius:100vmax}@media screen and (min-width:1281px){.c-search__select-box:before{display:none}}.c-search__select-box.is-active{display:block}.c-search__select-box.is-active+.c-search__select-bg{display:block}@media screen and (min-width:1281px){.c-search__select-box.is-active+.c-search__select-bg{display:none}}.c-search__select-box-inner{box-sizing:border-box;overflow-y:auto;padding:10px}.c-search__select-list{color:#626262;text-align:center;padding:6px 10px;border-radius:8px}@media screen and (min-width:1281px){.c-search__select-list{text-align:left;padding:8px 10px}}@media screen and (min-width:1281px){.c-search__select-list:not(:last-child){margin-bottom:10px}}@media screen and (any-hover:hover)and (min-width:1281px){.c-search__select-list:hover{background-color:#2d2d2d;color:#fff}}.c-search__select-list.is-select{background-color:#2d2d2d;color:#fff}.c-search__select-bg{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#000c;z-index:100}.c-search__select--single{border:none;border:1px solid #5c5c5c;color:#5c5c5c;width:100%;height:40px;border-radius:16px}@media screen and (min-width:1281px){.c-search__select--single{width:320px;height:50px}}.c-search__select--single .c-search__select-tag{font-size:14px}@media screen and (min-width:1281px){.c-search__select--single .c-search__select-tag{font-size:16px}}@media screen and (min-width:1281px){.c-search__select--single .c-search__select-box{padding-right:0}}.c-search__select--single .c-search__select-box-inner{overflow-y:auto;max-height:180px}.c-search__select--single .c-search__select-box-inner::-webkit-scrollbar{width:18px;border-radius:100vmax}.c-search__select--single .c-search__select-box-inner::-webkit-scrollbar-thumb{background-color:#00b670;border:7px solid #fff;border-radius:10px}.c-search__select--single .c-search__select-box-inner::-webkit-scrollbar-track{border-radius:100vmax}.c-search__input{position:relative;width:100%;height:100%;border-radius:0 16px 16px 0;overflow:hidden}.c-search__input input{box-sizing:border-box;width:100%;height:100%;border:none;background-color:transparent;outline:none;padding-left:10px;padding-right:40px;font-size:14px;color:var(--p-text)}@media screen and (min-width:1281px){.c-search__input input{padding-left:20px;font-size:16px}}.c-search__input input::placeholder{color:var(--p-text);font-size:14px}@media screen and (min-width:1281px){.c-search__input input::placeholder{font-size:16px}}.c-search__input input:focus{background-color:#fff}@media(any-hover:hover){.c-search__input input:hover{background-color:#fff}}.c-search__input--single{border:1px solid #5c5c5c;height:50px;border-radius:16px}@media screen and (min-width:1281px){.c-search__input--single{width:300px}}.c-search__btn{position:absolute;top:0;bottom:0;right:18px;margin:auto;width:17px;height:19px;aspect-ratio:21/23;background-image:url(https://static.nexon.co.jp/mabinogimobile/official_SUet1U2lbpVnyhZI/common/search-submit-icon.svg);background-position:center;background-size:contain;background-repeat:no-repeat}@media screen and (min-width:1281px){.c-search__btn{width:21px;height:23px}}.c-search__sort{display:flex;align-items:center;gap:8px}@media screen and (min-width:1281px){.c-search__sort{gap:18px}}.c-search__sort.is-hidden{display:none}.c-search__sort-btn{position:relative;display:block;font-size:14px}@media screen and (min-width:1281px){.c-search__sort-btn{font-size:min(16px,1vw)}}.c-search__sort-btn.is-active{color:#fff;background-color:#5c5c5c;text-box:trim-both cap alphabetic;border-radius:6px;padding:4px 10px}@media screen and (min-width:1281px){.c-search__sort-btn.is-active{padding:8px 10px}}.c-search__sort-btn.is-active:after{position:absolute;left:0;right:0;margin:auto;content:"";display:block;width:0;height:0;border-style:solid;border-bottom:0;bottom:-4px;border-right:6px solid transparent;border-left:6px solid transparent;border-top:5px solid #555555}
