.search-res{
width:var(--pw2);
margin:0 auto var(--gap);
}
.search-res h1{
font-size:28px;
font-weight:700;
margin:0 0 10px;
color:var(--tx1);
}
.search-res p{
margin:0;
color:var(--tx2);
font-size:var(--fz1);
}
.search-page-wrap{
width:var(--pw2);margin:var(--gap) auto;
}
.search-page-box{
margin-bottom:var(--gap);
}
.search-page-form{
display:flex;
align-items:center;
gap:var(--gap);
}
.search-page-filter-btn{
width:64px;
height:64px;
min-width:64px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:background-color .15s,border-color .15s;
}
.search-page-filter-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
}
.search-page-filter-btn.active{
background-color:var(--cl1);
border-color:var(--cl1);
}
.search-page-filter-btn svg{
width:28px;
height:28px;
transition:fill .15s;
}
.search-page-filter-btn svg path{
fill:var(--tx2);
transition:fill .15s;
}
.search-page-filter-btn:hover svg path{
fill:var(--cl1);
}
.search-page-filter-btn.active svg path{
fill:var(--blk);
}
.search-page-input-wrap{
flex:1;
position:relative;
min-width:0;
}
.search-page-icon{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:2;
}
.search-page-icon svg{
width:26px;
height:26px;
fill:var(--tx2);
stroke:none;
transition:fill .15s;
}
.search-page-input{
width:100%;
padding:18px 64px 18px 60px;
font-size:20px;
font-family:var(--ff1);
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
outline:none;
border-radius:var(--br0);
box-sizing:border-box;
box-shadow:var(--fbs);
}
.search-page-input::placeholder{
color:var(--tx3);
}
.search-page-input:focus{
border-color:var(--cl1);
}
.search-page-input:focus~.search-page-icon svg,
.search-page-input-wrap:focus-within .search-page-icon svg{
fill:var(--cl1);
}
.search-page-clear{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
background-color:transparent;
border:none;
border-radius:50%;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
color:var(--tx2);
font-size:36px;
font-weight:400;
line-height:1;
padding:0;
z-index:3;
}
.search-page-clear:hover{
color:var(--cl1);
background-color:var(--hv1);
}
.search-page-clear.visible{
display:flex;
}
.search-page-btn{
width:64px;
height:64px;
min-width:64px;
background-color:var(--cl1);
border:var(--bw1) solid var(--cl1);
border-radius:var(--br0);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
transition:background-color .15s,border-color .15s;
}
.search-page-btn:hover{
background-color:var(--oh1);
border-color:var(--oh1);
}
.search-page-btn svg{
width:36px;
height:36px;
}
.search-page-btn svg path{
fill:var(--blk);
}