@charset "utf-8";


#filter-search .search-container{display:flex;align-items:center;width:100%;max-width:650px;margin:0 auto 40px;padding:14px 24px;border:1px solid rgba(255,255,255,0.2);border-radius:50px;box-shadow:0 10px 25px rgba(0,0,0,0.05),inset 0 -4px 10px rgba(0,0,0,0.03),inset 0 2px 6px rgba(255,255,255,0.4);background:#fff}
#filter-search .search-icon{margin-right:15px}
#filter-search .search-input{width:100%;border:none;outline:none;background:transparent;font-size:15px;color:var(--text)}
#filter-search .search-input:focus{outline:none;box-shadow:none;border:none!important}
#filter-search .search-input::placeholder{color:var(--text);font-weight:400}
#filter-search .filter-inner{padding:0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:var(--mainsize);margin:0 auto;padding:12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-weight:600;;box-shadow:var(--shadow);background:var(--surface)}
#filter-search .tab-group{display:flex;gap:2px}
#filter-search .tab{padding:7px 16px;height:35px;border-radius:var(--radius-sm);border:none;background:var(--surface2);color:var(--text2);transition:all 0.15s}
#filter-search .month_box {display:none;gap:8px}
#filter-search .sale_box {display:none}
#filter-search .tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
#filter-search .divider{width:1px;height:20px;background:var(--border);margin:0 4px}
#filter-search .filter-select{flex:1;padding:7px 28px 7px 10px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center}
#filter-search .btn-search{width:115px;height:35px;padding:7px 20px;background:var(--primary-dark);color:#fff;border-radius:var(--radius-sm);border:none;font-weight:700;transition:background 0.15s;margin-left:auto}
#filter-search .btn-reset{width:35px;height:35px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.15s}
#filter-search .btn-reset span{font-size:18px;color:var(--text2);transition:color 0.15s}

@media(hover:hover){
#filter-search .tab:hover:not(.active){background:var(--bg)}
#filter-search .btn-search:hover{background:var(--primary-dark)}
#filter-search .btn-reset:hover span{color:#333}
}

/* 반응형 [s] */
@media (max-width:1440px){
#filter-search{padding:0 20px}
}
@media (max-width:1024px){
#filter-search .tab-group{width:100%;flex:1;flex-basis:auto;gap:5px}
#filter-search .divider{display:none}
#filter-search .filter-select{flex:auto;width:45%}
#filter-search .tab{height:30px;padding:3px 10px}
#filter-search .month_box{flex:11}
}
@media (max-width:768px){
#filter-search .search-container{max-width:100%;margin:0 auto 20px}
#filter-search .btn-search{padding:7px}
}
@media (max-width:580px){
#filter-search{padding:0 10px}
#filter-search .search-container{margin:0 auto 10px}
#filter-search .tab{flex:1;font-weight:600}
#filter-search .month_box{flex:auto}
#filter-search .search-input{font-size:13px}
}
@media (max-width:380px){
#filter-search .btn-search{flex:1}
}
/* 반응형 [e] */