/* 검색 버튼 효과: 돋보기가 원 궤적을 따라 이동하는 path-follow 애니메이션 */
.search-icon-btn {
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search-icon-btn svg,
.search-icon-btn img {
    width: 28px;
    height: 28px;
    display: block;
    transition: transform 0.32s cubic-bezier(.68,-0.55,.27,1.55);
}
.search-icon-btn:hover svg,
.search-icon-btn:hover img {
    animation: magnifier-path-spin 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes magnifier-path-spin {
    0%   { transform: translate(0,0) rotate(0deg); }
    10%  { transform: translate(4px,-4px) rotate(36deg); }
    25%  { transform: translate(8px,-8px) rotate(90deg); }
    40%  { transform: translate(8px,8px) rotate(144deg); }
    60%  { transform: translate(-8px,8px) rotate(216deg); }
    75%  { transform: translate(-8px,-8px) rotate(270deg); }
    90%  { transform: translate(-4px,-4px) rotate(324deg); }
    100% { transform: translate(0,0) rotate(360deg); }
}

/* Elastic Hover: 돋보기 아이콘이 늘어나며 흔들리는 탄성 효과 */
.search-icon-btn {
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search-icon-btn svg,
.search-icon-btn img {
    width: 28px;
    height: 28px;
    display: block;
    transition: transform 0.32s cubic-bezier(.68,-0.55,.27,1.55);
}
.search-icon-btn:hover svg,
.search-icon-btn:hover img {
    animation: elastic-hover 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
.search-icon-btn:active svg,
.search-icon-btn:active img {
    animation: elastic-click 0.32s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes elastic-hover {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.25,0.85) rotate(-8deg); }
    50%  { transform: scale(0.92,1.18) rotate(6deg); }
    70%  { transform: scale(1.12,0.96) rotate(-4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes elastic-click {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.85); }
    100% { transform: scale(1); }
}

/* Glow Pulse: 돋보기 아이콘에 파란색 글로우와 파동 효과 */
.search-icon-btn {
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search-icon-btn svg,
.search-icon-btn img {
    width: 28px;
    height: 28px;
    display: block;
    transition: box-shadow 0.32s, , transform 0.32s;
}
.search-icon-btn:hover svg,
.search-icon-btn:hover img {
    animation: glow-pulse 0.8s cubic-bezier(.68,-0.55,.27,1.55);
}
.search-icon-btn:active svg,
.search-icon-btn:active img {
    box-shadow: none;
    animation: glow-click 0.32s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes glow-pulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.18); }
    60%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}
@keyframes glow-click {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.85); }
    100% { transform: scale(1); }
}

/* 아이콘 효과 (filter 제거) */
.search-icon-btn {
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.search-icon-btn svg,
.search-icon-btn img {
    width: 28px;
    height: 28px;
    display: block;
    transition: transform 0.32s;
}
.search-icon-btn:hover svg,
.search-icon-btn:hover img {
    transform: scale(1.08);
}
.search-icon-btn:active svg,
.search-icon-btn:active img {
    transform: scale(0.95);
}