#search_slide {
  position: fixed;
  top: 0; right: 0;
  width: 350px;   /* 모바일은 100vw로! */
  height: 100vh;
  background: #fff;
  box-shadow: -8px 0 32px rgba(44,110,221,0.10);
  border-left: 1.5px solid #e3e8ee;
  z-index: 10010;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.29s cubic-bezier(.77,0,.18,1), opacity .18s;
  pointer-events: none;
  display: block;
}
#search_slide.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.slide-search-inner {
  display: flex;
  align-items: center;
  padding: 42px 24px 18px 18px;
  height: 80px;
  border-bottom: 1px solid #f2f4fa;
  background: #fff;
}
#searchbar {
  flex: 1;
  height: 46px;
  border: 1.5px solid #e3e8ee;
  border-radius: 20px;
  padding: 0 18px;
  font-size: 1.09em;
  background: #f8fafb;
  outline: none;
  transition: border .13s;
}
#searchbar:focus {
  border-color: #2563eb;
  background: #fff;
}
#search_close {
  margin-left: 14px;
  background: none;
  border: none;
  font-size: 2.2em;
  color: #b1b6be;
  cursor: pointer;
  transition: color .15s;
}
#search_close:hover { color: #2563eb; }

/* 모바일 대응 */
@media (max-width: 768px) {
  #search_slide { width: 100vw; }
  .slide-search-inner { padding: 22px 10px 12px 10px; }
}


.recent-keywords-box {
  padding: 14px 22px 6px 18px;
  background: none;
}
.recent-title {
  font-size: 1em;
  font-weight: 600;
  color: #222;
  margin-bottom: 5px;
}
.recent-keywords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.recent-keywords-list li {
  background: #f5f7fa;
  border-radius: 13px;
  padding: 4px 14px 4px 14px;
  font-size: 0.98em;
  color: #2f2f2f;
  display: flex; align-items: center;
  cursor: pointer;
  transition: background 0.13s;
}
.recent-keywords-list li:hover {
  background: #e6f0fe;
}
.recent-keywords-list .remove-k {
  background: none; border: none; color: #b8b8bb;
  margin-left: 7px; font-size: 1.12em; cursor: pointer;
  padding: 0;
  transition: color .13s;
}
.recent-keywords-list .remove-k:hover { color: #fa4d4d; }

.suggest-keywords-box {
  padding: 12px 22px 12px 18px;
  border-top: 1px solid #f3f4f6;
}
.suggest-title {
  font-size: 1em;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 5px;
}
.suggest-keywords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.suggest-keywords-list li {
  background: #e8f1ff;
  border-radius: 13px;
  padding: 4px 15px;
  font-size: 0.99em;
  color: #2166c9;
  display: flex; align-items: center;
  cursor: pointer;
  transition: background 0.12s;
  border: 1px solid #e1ebf8;
}
.suggest-keywords-list li:hover {
  background: #d2e8ff;
}

.recent-mapia-box {
  padding: 12px 20px 10px 18px;
}
.recent-mapia-title {
  font-size: 1em; font-weight: 600; color: #145baa; margin-bottom: 4px;
}
.recent-mapia-list {
  display: flex; flex-direction: column; gap: 7px; list-style: none; padding:0; margin:0;
}
.recent-mapia-list li {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: #f9fafd; border-radius: 8px; padding: 5px 8px;
  font-size: 0.99em; color: #242b3b; transition: background .13s;
}
.recent-mapia-list li:hover { background: #e8f3ff; }
.recent-mapia-thumb {
  width: 34px; height: 24px; border-radius: 4px; object-fit: cover; background: #e4e6ef;
}
.recent-mapia-title-text {
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.search-input-wrap {
  position: relative;
}
.search-clear-btn {
  position: absolute;
  right: 52px; /* 닫기버튼 left보다 살짝 안쪽 */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #b1b6be;
  font-size: 1.45em;
  padding: 0 6px;
  cursor: pointer;
  transition: color 0.14s;
  display: none;
  z-index: 10;
}
.search-clear-btn:hover { color: #2563eb; }