:root { 
  --main-red: #E82310;
  --main-red-dark: #c51709;
}

.search-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--main-red);   /* 부모에만 border */
  border-radius: 16px;
  overflow: hidden; /* 내부 요소 경계 넘지 않게 */
}

.search-wrap:focus-within {
  max-width: 350px;
  box-shadow: 0 4px 24px 0 #e823101a;
  border-color: #E82310;
}

/* ======= PC ======= */
#main-search-pc {
  flex: 1;
  border: none; /* 개별 input border 제거 */
  outline: none;
  height: 42px;
  padding: 0 14px;
  font-size: 16px;
  font-family: inherit;
}
#main-search-pc:focus {
  border-color: var(--main-red-dark);
}
#main-search-pc::placeholder {
  color: #ffb6b6;
  font-size: 15px;
  opacity: 1;
  letter-spacing: 0.01em;
}

#head-search-btn-pc {
  border: none;  /* 개별 버튼 border 제거 */
  background: var(--main-red);
  color: #fff;
  height: 42px;
  padding: 0 22px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.13s;
}
#head-search-btn-pc:hover {
  background: var(--main-red-dark);
}
#head-search-btn-pc:focus {
  background: var(--main-red-dark);
  color: #fff;
}
#autocomplete-list-pc,
#recent-search-list-pc {
 position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  min-width: 200px;
  max-width: 380px;
  background: #fff;
  border: 1.7px solid var(--main-red);
  border-radius: 0 0 13px 13px;
  box-shadow: 0 6px 18px rgba(226, 35, 16, 0.07);
  z-index: 1202;
  max-height: 240px;
  overflow-y: auto;
  font-size: 15px;
  color: #23233c;
}
#recent-search-list-pc.show { display: block; }
#autocomplete-list-pc.show,
#recent-search-list-pc.show {
  display: block;
}

/* ======= 모바일 ======= */
#main-search-mo {
  flex: 1 1 0;
  min-width: 120px;
  max-width: 320px;
  height: 42px;
  border: 2px solid var(--main-red);
  border-radius: 16px 0 0 16px;
  font-size: 16px;
  padding: 0 14px;
  background: #fff;
  color: #23233c;
  box-sizing: border-box;
  border-right: none;
  outline: none;
  transition: border 0.15s;
  font-family: inherit;
}
#main-search-mo:focus {
  border-color: var(--main-red-dark);
}
#main-search-mo::placeholder {
  color: #ffb6b6;
  font-size: 15px;
  opacity: 1;
  letter-spacing: 0.01em;
}

#head-search-btn-mo {
  background: none;         /* 배경 투명 */
  border: none;             /* 테두리 없음 */
  font-size: 1.7em;         /* 크기 큼 */
  color: #e82310;           /* 빨간색 (흰 배경이면) */
  cursor: pointer;
  padding: 0 10px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 10px;
  /* 필요시 추가 효과 */
  transition: background .12s;
}
#head-search-btn-mo:active,
#head-search-btn-mo:hover {
  background: #ffe4de;
}

#autocomplete-list-mo,
#recent-search-list-mo {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  min-width: 200px;
  max-width: 380px;
  background: #fff;
  border: 1.7px solid var(--main-red);
  border-radius: 0 0 13px 13px;
  box-shadow: 0 6px 18px rgba(226, 35, 16, 0.07);
  z-index: 33;
  max-height: 240px;
  overflow-y: auto;
  font-size: 15px;
  display: none;
  color: #23233c;
}
#autocomplete-list-mo.show,
#recent-search-list-mo.show {
  display: block;
}

/* ======= 드롭다운, 최근/자동완성 공통 ======= */
.autocomplete-list-inner,
.recent-list-inner {
  padding: 10px 14px;
}
.autocomplete-item,
.recent-item {
  padding: 8px 5px;
  cursor: pointer;
  transition: background 0.11s;
  border-radius: 6px;
  font-size: 15px;
}
.autocomplete-item:hover,
.recent-item:hover {
  background: #ffe7e0;
}
.autocomplete-category {
  font-size: 13px;
  color: var(--main-red);
  margin-top: 7px;
  margin-bottom: 2px;
  font-weight: 700;
}
.recent-title {
  font-size: 14.5px;
  color: var(--main-red-dark);
  margin-bottom: 6px;
  font-weight: bold;
}
.recent-empty {
  color: #ccc;
  font-size: 14px;
  padding: 11px 0;
  text-align: center;
}
.recent-bar {
  display: flex;
  gap: 12px;
  padding: 7px 0 3px 12px;
}
.recent-btn {
  border: none;
  background: #ffe7e0;
  color: var(--main-red);
  font-size: 13px;
  cursor: pointer;
  border-radius: 7px;
  font-weight: 600;
  padding: 4px 14px;
  transition: background 0.14s, color 0.13s;
}
.recent-btn:hover {
  background: var(--main-red);
  color: #fff;
}

@media (max-width: 700px) {
  .search-wrap {
    max-width: 97vw;
  }
  .search-wrap:focus-within {
    max-width: 99vw;
  }
}