/* 종목 검색 패널 (js/stock-search-panel.js) - 소형 앵커 드롭다운 버전
 * document.body에 직접 붙는 플로팅 위젯. 티스토리 기본 검색과 헷갈리지 않도록
 * 트리거 버튼에 항상 "종목검색" 라벨 + 전용 아이콘/색을 노출한다.
 * 상승=빨강 #d24f45, 하락=파랑 #1261c4 (사이트 공통 컬러) */

.ssp-wrap {
  position: fixed;
  bottom: 76px;
  right: 18px;
  z-index: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;
}

.ssp-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(124, 58, 237, 0.4);
  transition: background 0.15s, transform 0.2s;
}
.ssp-trigger:hover { background: #6d28d9; transform: translateY(-2px); }
.ssp-trigger-icon { font-size: 14px; line-height: 1; }
.ssp-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.ssp-dropdown {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: min(340px, 88vw);
  background: #fff;
  color: #222;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  border: 1px solid #eee;
}

.ssp-dropdown-inner { padding: 14px; max-height: min(60vh, 480px); overflow-y: auto; }

.ssp-input-wrap { position: relative; }
.ssp-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
}
.ssp-input:focus { border-color: #7c3aed; }

.ssp-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
}
.ssp-suggest.active { display: block; }
.ssp-suggest-item { padding: 9px 12px; font-size: 13.5px; cursor: pointer; }
.ssp-suggest-item:hover, .ssp-suggest-item.active { background: #f2f2f2; }

.ssp-chip-section { margin-top: 14px; }
.ssp-chip-group { margin-bottom: 12px; }
.ssp-chip-group:last-child { margin-bottom: 0; }
.ssp-chip-title { font-size: 12px; font-weight: 700; color: #888; margin-bottom: 6px; }
.ssp-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ssp-chip {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fafafa;
  font-size: 12.5px;
  cursor: pointer;
}
.ssp-chip:hover { background: #f0eaff; border-color: #c9b6f7; }
.ssp-chip-empty { font-size: 12px; color: #999; }

@media (max-width: 640px) {
  .ssp-wrap { bottom: 66px; right: 14px; }
  .ssp-trigger { max-width: 140px; padding: 8px 12px; }
  .ssp-dropdown { width: min(300px, 85vw); }
}

/* ---- 다크모드 ---- */
/* 2026-07-28: 사이트 다크모드 전체 재통일(style.css 기타 규칙 참고)에 맞춰 #1A1A1A
   배경 + #F5EFE0 글자로 교체. */
html.dark .ssp-dropdown { background: #1A1A1A !important; color: #F5EFE0 !important; border-color: rgba(245, 239, 224, 0.2) !important; }
html.dark .ssp-input { background: rgba(245, 239, 224, 0.06) !important; border-color: rgba(245, 239, 224, 0.25) !important; color: #F5EFE0 !important; }
html.dark .ssp-suggest { background: #1A1A1A !important; border-color: rgba(245, 239, 224, 0.2) !important; }
html.dark .ssp-suggest-item { color: #F5EFE0 !important; }
html.dark .ssp-suggest-item:hover, html.dark .ssp-suggest-item.active { background: rgba(245, 239, 224, 0.1) !important; }
html.dark .ssp-chip-title { color: rgba(245, 239, 224, 0.55) !important; }
html.dark .ssp-chip { background: rgba(245, 239, 224, 0.08) !important; border-color: rgba(245, 239, 224, 0.2) !important; color: #F5EFE0 !important; }
html.dark .ssp-chip:hover { background: rgba(245, 239, 224, 0.16) !important; border-color: rgba(245, 239, 224, 0.4) !important; }
html.dark .ssp-chip-empty { color: rgba(245, 239, 224, 0.5) !important; }