.topbar{
position:fixed;      /* ✅ 기준점 설정 */
display:flex;
align-items:center;
/* border-bottom:1px solid #e0e0e0; */
background:#fff;
justify-content:space-between;
top:0; left:0;
width : 100%;
z-index: 10000;
box-shadow: 0 1px 1px var(--shadow-color);
}

.detail-panel.active ~ .topbar .topbar-inner {
  transform: translateX(-25%) !important;
  /* transition: transform .3s ease !important; */
  width : 64%;
  margin: 0 auto;
  }

.topbar-inner{
  width : 100%;
  margin:0 auto;         /* 가운데 정렬 */
  padding:8px 8px;      /* 좌우 20px 여백도 동일 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap : 14px; /* 좌우 여백 */
  position:relative;     
}


/* ───── 검색 박스 컨테이너 ───── */
.search-box{
position: relative;                 /* 버튼 위치 기준 */
flex: 0.5;
margin: 0px;
display: block;                     /* 한 덩어리 취급 */
background: #efeded;
border-radius: 48px;
min-width: 256px;
border : 1px solid var(--border-color);
transition: background .2s, border-color .2s, box-shadow .25s, transform .25s;
}

/* ───── input — 폭 100%, 오른쪽 안쪽 여백 확보 ───── */
.search-box input{
padding: 8px 12px 8px 36px;         /* 오른쪽 52 px ▶ 버튼 자리 */
border: none;
background: transparent;
width : 90%;
font-size: 16px;
}
.search-box input:focus{ outline: none; }


/* 가장 단순한 임시 패치 */
.search-box input {
font-size: 16px !important;      /* 중요: !important 로 덮어쓰기 확인 */
line-height: 1.3;
}

/* ───── 포커스 효과 — 컨테이너 한 번에 ───── */
.search-box:focus-within{
background: #fff;
/* border-color: var(--primary-color); */
/* box-shadow: 0 0 0 3px rgba(0,0,0,.06); */
box-shadow: 0 4px 12px var(--shadow-color);
transform: scale(1.015);
z-index: 10;      
}

@media (max-width: 768px) {
.topbar{
  top: 0; left: 0;
  width: 100%; height: 56px;
  padding: 0 0px;
  z-index: 1000;
  border-bottom: 1px solid #e0e0e0;
  transition: transform .25s ease;
  will-change: transform;
}
  /* 데스크탑 헤더 숨김 */
  .header { display: none; }

  /* TopBar 높이(56) + 여유 12 = 68 */
  .container { padding-top: 12px !important; }

  /* 데스크탑용 우상단 버튼 숨김 */
  .top-right-button { display: none !important; }

  /* 검색 · 옵션 약간 여백 */
  .search-form { margin-top: 8px; }
.search-box{margin: 2px 4px 2px 4px; flex: auto;} 

.search-box:focus-within{
flex:1;
}

}