/* =========================================================
   RB Suggestion — anchor-agnostic styles
   컨테이너(래퍼 or form)에 data-rb-sg-anchor="1" 만 있으면 동작
   ========================================================= */

/* 앵커 컨테이너(래퍼 or form) */
[data-rb-sg-anchor]{
  position: relative;
  overflow: visible;
  min-width: 0;
  font: inherit;
  color: inherit;
}

/* 드롭다운 박스 */
[data-rb-sg-anchor] > .p-suggest{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 10px);
  background: var(--white, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  padding: 12px;
  max-height: min(66vh, 560px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 10000;
}

/* 열림/닫힘 */
[data-rb-sg-anchor] > .p-suggest.is-open{
  opacity: 1; pointer-events: auto; transform: none;
}
[data-rb-sg-anchor] > .p-suggest.is-closed{
  opacity: 0; pointer-events: none; transform: translateY(6px);
}

/* 컴팩트 모드 */
[data-rb-sg-anchor] > .p-suggest.is-compact .p-sg-related{ display: none !important; }

/* 섹션 박스 */
[data-rb-sg-anchor] .p-sg-sec{
  border-radius: 12px;
}

/* 헤더 */
[data-rb-sg-anchor] .p-sg-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
[data-rb-sg-anchor] .p-sg-title{
  margin:0; font-size:13px; font-weight:800; color:#111827; letter-spacing:-.2px;
}

/* 버튼/링크 리셋(전역 스타일 간섭 차단) */
[data-rb-sg-anchor] .p-suggest button,
[data-rb-sg-anchor] .p-suggest a{
  all: unset;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
[data-rb-sg-anchor] .p-suggest button::before,
[data-rb-sg-anchor] .p-suggest button::after{ content: none !important; }

[data-rb-sg-anchor] .p-suggest button.p-sg-clear {
  padding: 5px;
}

[data-rb-sg-anchor] .p-suggest button.p-sg-chip-label {
  padding: 5px 8px;
}

/* 최근 검색어 컨트롤 */
[data-rb-sg-anchor] .p-sg-clear{
  border:1px solid var(--line, #e5e7eb);
  background:#f8fafc; color:#374151;
  font-size:12px; border-radius:8px; padding:6px 10px; line-height:1;
}
[data-rb-sg-anchor] .p-sg-clear:hover{ background:#f1f5f9; }

/* 칩 */
[data-rb-sg-anchor] .p-sg-chips{ display:flex; flex-wrap:wrap; gap:8px; }
[data-rb-sg-anchor] .p-sg-chip{
  display:inline-flex; align-items:center; gap:2px;
  background:#fff; border:1px solid var(--line, #e5e7eb);
  border-radius:999px; padding:0 6px 0 0;
}
[data-rb-sg-anchor] .p-sg-chip-label{ padding:8px 10px 8px 12px; border-radius:999px; }
[data-rb-sg-anchor] .p-sg-chip-x{
  width:20px; height:20px; border-radius:50%;
  display:inline-grid; place-items:center; color:#6b7280; margin-left:2px;
}
[data-rb-sg-anchor] .p-sg-chip-x:hover{ background:#f3f4f6; color:#111827; }

[data-rb-sg-anchor] .p-sg-sec.is-empty{ display:grid; place-items:center; min-height:120px; }
[data-rb-sg-anchor] .p-sg-empty{ color:var(--muted, #6b7280); font-size:13px; }

/* 연관 목록 */
[data-rb-sg-anchor] .p-sg-related{ display:none; flex-direction:column; min-height:0; margin-top: 10px; }
[data-rb-sg-anchor] .p-sg-related.is-on{ display:flex }
[data-rb-sg-anchor] .p-sg-related[hidden]{ display:none !important }
[data-rb-sg-anchor] .p-sg-list{ list-style:none; margin:0; padding:0; max-height:420px; overflow:auto; }
[data-rb-sg-anchor] .p-sg-item + .p-sg-item{ margin-top:6px; }
[data-rb-sg-anchor] .p-sg-link{
  display:grid; grid-template-columns:1fr; gap:10px; align-items:center;
  padding:8px; border-radius:10px; color:inherit; text-decoration:none;
}
[data-rb-sg-anchor] .p-sg-link:hover{ background:#f8fafc; }
[data-rb-sg-anchor] .p-sg-meta{ min-width:0; display:grid; gap:2px; }
[data-rb-sg-anchor] .p-sg-ttl{
  font-size:14px; font-weight:700; color:#111827; letter-spacing:-.2px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
[data-rb-sg-anchor] .p-sg-sub{
  font-size:12px; color:var(--muted, #6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 푸터(닫기) */
[data-rb-sg-anchor] .p-sg-foot{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line, #e5e7eb);
  display:flex; justify-content:flex-end;
}
[data-rb-sg-anchor] .p-sg-close{
  border:1px solid var(--line, #e5e7eb);
  background:#fff; border-radius:10px; padding:8px 12px; font-weight:700;
}
[data-rb-sg-anchor] .p-sg-close:hover{ background:#f8fafc; }

/* 반응형 */
@media (max-width: 1024px){
  [data-rb-sg-anchor] > .p-suggest{
    top: calc(100% + 8px);
    padding: 10px;
    border-radius: 12px;
    max-height: min(70vh, 520px);
  }
}