/* ============================================================ */
/* 검색창(Search Bar) 스타일                                     */
/* 파일명 : css/search.css                                       */
/* ============================================================ */
 
/* 검색창을 감싸는 바깥 영역 : 가운데 정렬, 사이드바 폭과 무관하게 독립적으로 반응 */
.search-area{
    flex-shrink:0;
    display:flex;
    justify-content:center;
    padding:var(--spacing-layout-y-16) var(--spacing-layout-x-20);
    background:var(--color-container-base-primary);
}
 
.search-bar{
    display:flex;
    align-items:center;

    width:100%;
    max-width:calc(var(--spacing-gap-40) * 16);
    padding:var(--spacing-component-y-10) var(--spacing-component-x-20);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-full);
    background:var(--color-container-base-primary);
}
 
.search-bar .search-icon{
    width:var(--spacing-gap-32);
    height:var(--spacing-gap-32);
    flex-shrink:0;
}
 
.search-bar input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-body);
    font-family:inherit;
    color:var(--color-text-base-primary);
}
.search-bar input::placeholder{
    color:var(--color-text-base-secondary);
}
 
.search-submit{
    width:var(--spacing-gap-40);
    height:var(--spacing-gap-40);
    flex-shrink:0;
    border:none;
    outline:none;
    background:transparent;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    border-radius:var(--radius-small);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;

}
.search-submit:hover{background:var(--color-state-light-hover);
}
.search-submit:active{background:var(--color-state-light-pressed);
}
.search-submit img{ width:var(--spacing-gap-40); height:var(--spacing-gap-40); }
 
.search-bar.is-loading .search-submit{
    opacity:.5;
    pointer-events:none;
}
.search-bar.is-error{
    border-color:var(--color-text-feedback-error);
}
.search-bar > * + *{margin-left:var(--spacing-gap-12);
}
.search-bar:focus-within{border-color:var(--color-border-brand-primary);
}
.search-bar.is-error:focus-within{border-color:var(--color-text-feedback-error);
}
.search-submit:focus-visible{outline:var(--border-width-focus) solid var(--color-border-brand-primary);outline-offset:var(--spacing-gap-2);
}
@media (max-width:1279px){
    .search-area{flex:0 0 calc(var(--spacing-layout-y-80) + var(--spacing-gap-16));position:relative;border-top:var(--border-width-default) solid var(--color-border-base-low);
}
}
@media (max-width:767px){
    .search-area{padding:var(--spacing-layout-y-16) var(--spacing-layout-x-16);
}
    .search-bar{padding:var(--spacing-component-y-10) var(--spacing-component-x-12);
}
}