/* ===== 1. 상단바 (검색창) ===== */
.header-section{
  position:sticky; 
  top:0; 
  z-index:10;
  border-bottom:1px solid var(--border);
}

/* Dark theme header */
:root[data-theme="dark"] .header-section{
  background:rgba(15,15,15,.9); 
  backdrop-filter:saturate(180%) blur(8px);
}

/* Light theme header */
:root[data-theme="light"] .header-section{
  background:rgba(255,255,255,.9); 
  backdrop-filter:saturate(180%) blur(8px);
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:100%;
  margin:0 auto;
  position:relative
}

.logo{
  font-weight:800;
  font-size:28px;
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:2
}

.logo .red{color:var(--accent)}
.logo-icon{width:32px;height:32px;fill:var(--accent)}

.search{
  display:flex;
  gap:8px;
  max-width:800px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:1
}

.search input{
  width:300px;
  min-width:200px;
  padding:8px 12px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  border-radius:8px;
  font-size:16px
}

.search-btn{
  min-width:50px;
  border:1px solid var(--border);
  background:var(--accent);
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:16px
}

.search-btn:hover{background:#e60029}

.mode-toggle{
  width:50px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:6px 6px;
  border-radius:8px;
  cursor:pointer;
  z-index:2
}