/* 유틸바 검색 — 허브(frontend/hub, #searchInput + .search-results)와 같은
   인라인 셀렉트박스 형태다. 입력하면 인풋 바로 아래에 결과가 붙고, 모달
   오버레이를 띄우지 않는다. 화면 뒤 내용이 가려지지 않아 결과를 훑으면서
   지금 보고 있던 상품과 비교할 수 있다. */

.search-box{position:relative;flex:1;min-width:200px;max-width:560px}
.search-box input{
  width:100%;padding:7px 13px;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--bg-soft);color:var(--text);font:13px/1.5 inherit;
}
.search-box input::placeholder{color:var(--text-muted)}
.search-box input:focus{
  outline:none;border-color:var(--primary);background:var(--bg);
  box-shadow:0 0 0 3px var(--accent-bg);
}

.search-results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;
  max-height:min(60vh,480px);overflow-y:auto;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(15,30,55,.18);
}
/* author 스타일이 UA 의 [hidden]{display:none} 을 이기는 일이 없도록 명시한다 —
   빠지면 닫힌 목록이 화면을 덮어 아래 클릭을 가로챈다. */
.search-results[hidden]{display:none}

.search-results .sr-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 12px;background:var(--bg-tint);border-bottom:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--text-muted);
}
.search-results .sr-head .cnt{
  padding:1px 7px;border-radius:9px;background:var(--bg);
  font-size:10.5px;color:var(--primary);
}
.search-results .sr-list{margin:0;padding:4px;list-style:none}
.search-results .sr-item{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;
  font-size:13px;cursor:pointer;
}
.search-results .sr-item:hover,
.search-results .sr-item[aria-selected="true"]{background:var(--accent-bg)}
.search-results .sr-item .media{
  flex-shrink:0;width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;font-weight:700;color:var(--text-muted);
}
.search-results .sr-item .nm{flex:1;min-width:0;font-weight:600}
.search-results .sr-item .nm mark{
  background:#FDE68A;color:#78350F;padding:0 2px;border-radius:2px;
}
.search-results .sr-item .sz{
  flex-shrink:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;color:var(--text-muted);
}
.search-results .sr-item .sz mark{background:none;color:var(--primary);font-weight:700}
/* 안내 문구는 listbox 안의 고를 수 없는 항목이다. */
.search-results .sr-empty,.search-results .sr-more{
  padding:14px 10px;text-align:center;font-size:12.5px;color:var(--text-muted);cursor:default;
}
.search-results .sr-foot{
  display:flex;gap:12px;padding:6px 12px;
  background:var(--bg-tint);border-top:1px solid var(--border);
  font-size:10.5px;color:var(--text-muted);
}
.search-results .sr-foot kbd{
  padding:1px 5px;border:1px solid var(--border-strong);border-radius:3px;
  background:var(--bg);font:inherit;font-size:10px;
}

/* 좁은 화면에서는 검색 박스가 유틸바의 한 줄을 통째로 쓰고(언어·내보내기는 다음 줄로
   내려간다), 항목의 스펙 값은 상품명을 밀어내지 않도록 아래 줄로 접힌다. */
@media (max-width:760px){
  .search-box{flex:1 0 100%;min-width:0;max-width:none}
  .search-results .sr-item{flex-wrap:wrap}
  .search-results .sr-item .media{width:64px}
  .search-results .sr-item .sz{width:100%;max-width:none;padding-left:26px}
}