diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index 9fd1f5f..fcd62d5 100644
--- a/src/app/components/AppHeader.tsx
+++ b/src/app/components/AppHeader.tsx
@@ -423,7 +423,7 @@ export function AppHeader() {
             />
           </div>
           <div
-            className={`fixed left-0 right-0 z-50 bg-white shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
+            className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur shadow-[0_12px_32px_rgba(0,0,0,0.12)] transition-all duration-200 ${
               megaOpen ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
             style={{ top: headerBottom }}
diff --git a/src/app/components/HorizontalCardScroller.tsx b/src/app/components/HorizontalCardScroller.tsx
index c41e455..73bd8c4 100644
--- a/src/app/components/HorizontalCardScroller.tsx
+++ b/src/app/components/HorizontalCardScroller.tsx
@@ -103,11 +103,7 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
           {items.map((card) => (
             <article
               key={card.id}
-              className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden"
-              style={{
-                boxShadow:
-                  "0 1px 2px 0 var(--color-alpha-shadow1, rgba(0, 0, 0, 0.05)), 0 0 2px 0 var(--color-alpha-shadow1, rgba(0, 0, 0, 0.05))",
-              }}
+              className="flex-shrink-0 w-[384px] h-[308px] rounded-[16px] bg-white overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.05),0_0_2px_rgba(0,0,0,0.05)] transition-shadow duration-200 hover:shadow-[0_0_2px_rgba(0,0,0,0.08),0_8px_16px_rgba(0,0,0,0.12)]"
             >
               <div className="grid grid-rows-[192px_116px] h-full">
                 {/* 상단: 사진 384x192, 상단 라운드 16, 하단 0 */}
@@ -149,20 +145,20 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
         </div>
       </div>
 
-      <div className="pointer-events-none absolute bottom-[20px] left-1/2 -translate-x-1/2 z-20 flex items-center gap-3">
+      <div className="pointer-events-none absolute bottom-[20px] left-1/2 -translate-x-1/2 z-20 flex items-center gap-6">
         <button
           type="button"
           aria-label="이전"
-          className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none"
+          className="pointer-events-auto p-0 m-0 bg-transparent text-neutral-500 hover:text-neutral-700 focus:outline-none size-[30px] inline-flex items-center justify-center"
           onClick={() => scrollByStep(-1)}
         >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
-            <polygon points="10,0 0,6 10,12" />
+          <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="rotate-180">
+            <path d="M9.5 5.5L15 12l-5.5 6.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
           </svg>
         </button>
-        <div ref={trackRef} className="pointer-events-auto relative h-2 w-[30vw] rounded-full bg-orange-200/50">
+        <div ref={trackRef} className="pointer-events-auto relative h-1 w-[480px] rounded bg-[#EDEDED]">
           <div
-            className="absolute top-0 h-2 rounded-full bg-orange-500"
+            className="absolute top-0 h-1 rounded bg-[var(--red-50,#F94B37)]"
             style={{ width: `${thumbWidth}px`, left: `${thumbLeft}px` }}
             onMouseDown={handleThumbMouseDown}
           />
@@ -170,11 +166,11 @@ export default function HorizontalCardScroller({ items }: HorizontalCardScroller
         <button
           type="button"
           aria-label="다음"
-          className="pointer-events-auto p-0 m-0 bg-transparent text-orange-500 hover:text-orange-600 focus:outline-none"
+          className="pointer-events-auto p-0 m-0 bg-transparent text-neutral-500 hover:text-neutral-700 focus:outline-none size-[30px] inline-flex items-center justify-center"
           onClick={() => scrollByStep(1)}
         >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
-            <polygon points="0,0 10,6 0,12" />
+          <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M9.5 5.5L15 12l-5.5 6.5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
           </svg>
         </button>
       </div>
diff --git a/src/app/components/SearchBar.tsx b/src/app/components/SearchBar.tsx
index 54ce981..dbb6020 100644
--- a/src/app/components/SearchBar.tsx
+++ b/src/app/components/SearchBar.tsx
@@ -14,13 +14,14 @@ export function SearchBar() {
       }}
       role="search"
       aria-label="사이트 검색"
-      className="relative w-full max-w-[384px]"
+      className="relative w-full max-w-[384px] group"
     >
       <button
         type="submit"
         aria-label="검색 실행"
-        className="absolute right-2 top-2 w-8 h-8 text-neutral-500 hover:text-neutral-800 cursor-pointer"
+        className="absolute right-2 top-2 w-8 h-8 text-neutral-500 cursor-pointer"
       >
+        {/* 기본(일반) 상태: outline 아이콘 */}
         <svg
           width="32"
           height="32"
@@ -28,7 +29,7 @@ export function SearchBar() {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           aria-hidden
-          className="w-8 h-8"
+          className="w-8 h-8 block group-hover:hidden group-focus-within:hidden"
         >
           <path
             d="M21 21L17.682 17.682M17.682 17.682C18.4963 16.8676 19 15.7426 19 14.5C19 12.0147 16.9853 10 14.5 10C12.0147 10 10 12.0147 10 14.5C10 16.9853 12.0147 19 14.5 19C15.7426 19 16.8676 18.4963 17.682 17.682ZM28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16Z"
@@ -38,6 +39,20 @@ export function SearchBar() {
             strokeLinejoin="round"
           />
         </svg>
+
+        {/* Hover/Focus 상태: 제공된 solid 아이콘 */}
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden
+          className="w-8 h-8 hidden group-hover:block group-focus-within:block"
+        >
+          <path d="M11 14.5C11 12.567 12.567 11 14.5 11C16.433 11 18 12.567 18 14.5C18 15.4668 17.6093 16.3404 16.9749 16.9749C16.3404 17.6093 15.4668 18 14.5 18C12.567 18 11 16.433 11 14.5Z" fill="#707070" />
+          <path fillRule="evenodd" clipRule="evenodd" d="M16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3ZM14.5 9C11.4624 9 9 11.4624 9 14.5C9 17.5376 11.4624 20 14.5 20C15.6571 20 16.7316 19.6419 17.6174 19.0316L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L19.0316 17.6174C19.6419 16.7316 20 15.6571 20 14.5C20 11.4624 17.5376 9 14.5 9Z" fill="#707070" />
+        </svg>
       </button>
       <input
         type="search"
@@ -50,7 +65,7 @@ export function SearchBar() {
         onKeyDown={(e) => {
           if (e.key === "Escape") setTerm("");
         }}
-        className="w-full h-12 pr-12 pl-2 rounded-2xl border border-neutral-300 bg-white"
+        className="w-full h-12 pr-12 pl-2 rounded-2xl border bg-white border-neutral-300 hover:border-[2px] hover:border-neutral-500 focus:border-2 focus:border-neutral-800 focus:outline-none transition-colors"
       />
     </form>
   );