From 02f9c550323facebb9012462874b825f7906cf1f Mon Sep 17 00:00:00 2001
From: zio <admin@zioinfo.co.kr>
Date: Mon, 1 Jun 2026 01:55:50 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EB=A1=9C=EA=B3=A0=20filter=20?=
 =?UTF-8?q?=EC=99=84=EC=A0=84=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/Header.css | 252 +++++++++++-----------
 1 file changed, 126 insertions(+), 126 deletions(-)

diff --git a/frontend/src/components/layout/Header.css b/frontend/src/components/layout/Header.css
index 3cc3e00..66f2b65 100644
--- a/frontend/src/components/layout/Header.css
+++ b/frontend/src/components/layout/Header.css
@@ -1,126 +1,126 @@
-/* ─── Header ──────────────────────────────────────────────── */
-.skip-link {
-  position: absolute; top: -60px; left: 0; z-index: 9999;
-  background: var(--primary); color: #fff;
-  padding: 10px 20px; border-radius: 0 0 8px 0;
-  transition: top .2s;
-}
-.skip-link:focus { top: 0; }
-
-.header {
-  position: fixed; top: 0; left: 0; right: 0;
-  z-index: 1000; height: var(--header-h);
-  background: rgba(26, 26, 46, 0.96);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(255,255,255,.08);
-  transition: all var(--mid) var(--ease);
-}
-.header.scrolled {
-  background: rgba(26, 26, 46, 0.99);
-  box-shadow: 0 4px 24px rgba(0,0,0,.3);
-}
-.header-inner {
-  display: flex; align-items: center; gap: 32px;
-  height: 100%;
-}
-
-/* 로고 */
-.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
-.logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
-.logo-text { color: #fff; font-size: 20px; font-weight: 700; }
-.logo-text strong { color: var(--accent); }
-
-/* 데스크톱 메뉴 */
-.nav-desktop {
-  display: flex; align-items: center; gap: 4px;
-  margin-left: 24px; flex: 1;
-}
-.nav-item { position: relative; }
-.nav-trigger {
-  height: var(--header-h);
-  padding: 0 16px;
-  color: rgba(255,255,255,.85);
-  font-size: 15px; font-weight: 500;
-  transition: color var(--fast);
-  display: flex; align-items: center;
-}
-.nav-trigger:hover,
-.nav-item.active .nav-trigger { color: #fff; }
-.nav-item.active .nav-trigger { border-bottom: 2px solid var(--accent); }
-
-/* 드롭다운 */
-.dropdown {
-  position: absolute; top: calc(var(--header-h) - 2px); left: 0;
-  min-width: 180px;
-  background: #fff;
-  border-radius: 0 0 var(--radius) var(--radius);
-  box-shadow: var(--shadow-lg);
-  border-top: 3px solid var(--primary);
-  padding: 8px 0;
-  animation: fadeDown .18s ease;
-}
-@keyframes fadeDown {
-  from { opacity:0; transform:translateY(-8px); }
-  to   { opacity:1; transform:translateY(0); }
-}
-.dropdown-item {
-  display: flex; align-items: center; gap: 8px;
-  padding: 10px 20px;
-  font-size: 14px; color: var(--gray-700);
-  transition: all var(--fast);
-}
-.dropdown-item:hover, .dropdown-item.current {
-  background: var(--primary-light);
-  color: var(--primary);
-}
-
-/* CTA 버튼 */
-.header-cta { margin-left: auto; flex-shrink: 0; }
-
-/* 햄버거 */
-.hamburger {
-  display: none;
-  flex-direction: column;
-  gap: 5px;
-  padding: 8px;
-  margin-left: auto;
-}
-.hamburger span {
-  display: block; width: 24px; height: 2px;
-  background: #fff;
-  border-radius: 2px;
-  transition: all var(--mid);
-}
-
-/* 모바일 메뉴 */
-.nav-mobile {
-  display: none;
-  flex-direction: column;
-  background: var(--secondary);
-  border-top: 1px solid rgba(255,255,255,.1);
-  max-height: calc(100vh - var(--header-h));
-  overflow-y: auto;
-}
-.mobile-group { border-bottom: 1px solid rgba(255,255,255,.08); }
-.mobile-group-header {
-  display: flex; align-items: center;
-  padding: 14px 24px;
-  color: rgba(255,255,255,.85);
-  font-size: 15px; font-weight: 500;
-  cursor: pointer;
-}
-.mobile-children { background: rgba(0,0,0,.2); }
-.mobile-child {
-  display: flex; align-items: center; gap: 8px;
-  padding: 10px 36px;
-  font-size: 14px; color: rgba(255,255,255,.7);
-}
-.mobile-child:hover { color: #fff; }
-
-/* 반응형 */
-@media (max-width: 1024px) {
-  .nav-desktop, .header-cta { display: none; }
-  .hamburger { display: flex; }
-  .header.mobile-open .nav-mobile { display: flex; }
-  .header.mobile-open { height: auto; }
-}
+/* ─── Header ──────────────────────────────────────────────── */
+.skip-link {
+  position: absolute; top: -60px; left: 0; z-index: 9999;
+  background: var(--primary); color: #fff;
+  padding: 10px 20px; border-radius: 0 0 8px 0;
+  transition: top .2s;
+}
+.skip-link:focus { top: 0; }
+
+.header {
+  position: fixed; top: 0; left: 0; right: 0;
+  z-index: 1000; height: var(--header-h);
+  background: rgba(26, 26, 46, 0.96);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255,255,255,.08);
+  transition: all var(--mid) var(--ease);
+}
+.header.scrolled {
+  background: rgba(26, 26, 46, 0.99);
+  box-shadow: 0 4px 24px rgba(0,0,0,.3);
+}
+.header-inner {
+  display: flex; align-items: center; gap: 32px;
+  height: 100%;
+}
+
+/* 로고 */
+.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; text-decoration: none; }
+.logo img { height: 40px; width: auto; }
+.logo-text { color: #fff; font-size: 20px; font-weight: 700; }
+.logo-text strong { color: var(--accent); }
+
+/* 데스크톱 메뉴 */
+.nav-desktop {
+  display: flex; align-items: center; gap: 4px;
+  margin-left: 24px; flex: 1;
+}
+.nav-item { position: relative; }
+.nav-trigger {
+  height: var(--header-h);
+  padding: 0 16px;
+  color: rgba(255,255,255,.85);
+  font-size: 15px; font-weight: 500;
+  transition: color var(--fast);
+  display: flex; align-items: center;
+}
+.nav-trigger:hover,
+.nav-item.active .nav-trigger { color: #fff; }
+.nav-item.active .nav-trigger { border-bottom: 2px solid var(--accent); }
+
+/* 드롭다운 */
+.dropdown {
+  position: absolute; top: calc(var(--header-h) - 2px); left: 0;
+  min-width: 180px;
+  background: #fff;
+  border-radius: 0 0 var(--radius) var(--radius);
+  box-shadow: var(--shadow-lg);
+  border-top: 3px solid var(--primary);
+  padding: 8px 0;
+  animation: fadeDown .18s ease;
+}
+@keyframes fadeDown {
+  from { opacity:0; transform:translateY(-8px); }
+  to   { opacity:1; transform:translateY(0); }
+}
+.dropdown-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 20px;
+  font-size: 14px; color: var(--gray-700);
+  transition: all var(--fast);
+}
+.dropdown-item:hover, .dropdown-item.current {
+  background: var(--primary-light);
+  color: var(--primary);
+}
+
+/* CTA 버튼 */
+.header-cta { margin-left: auto; flex-shrink: 0; }
+
+/* 햄버거 */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  padding: 8px;
+  margin-left: auto;
+}
+.hamburger span {
+  display: block; width: 24px; height: 2px;
+  background: #fff;
+  border-radius: 2px;
+  transition: all var(--mid);
+}
+
+/* 모바일 메뉴 */
+.nav-mobile {
+  display: none;
+  flex-direction: column;
+  background: var(--secondary);
+  border-top: 1px solid rgba(255,255,255,.1);
+  max-height: calc(100vh - var(--header-h));
+  overflow-y: auto;
+}
+.mobile-group { border-bottom: 1px solid rgba(255,255,255,.08); }
+.mobile-group-header {
+  display: flex; align-items: center;
+  padding: 14px 24px;
+  color: rgba(255,255,255,.85);
+  font-size: 15px; font-weight: 500;
+  cursor: pointer;
+}
+.mobile-children { background: rgba(0,0,0,.2); }
+.mobile-child {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 36px;
+  font-size: 14px; color: rgba(255,255,255,.7);
+}
+.mobile-child:hover { color: #fff; }
+
+/* 반응형 */
+@media (max-width: 1024px) {
+  .nav-desktop, .header-cta { display: none; }
+  .hamburger { display: flex; }
+  .header.mobile-open .nav-mobile { display: flex; }
+  .header.mobile-open { height: auto; }
+}