/* 검색 빈 화면 — 최근 검색 칩 + 인기 팀/선수 순위 (시안 D).
   출처: claude.ai/design `mvp` → Search Empty States.html (프레임 D)
   시안의 하드코딩 색·간격은 그대로 옮기지 않고 --bb-* / --rtp-* 토큰으로 매핑했다
   (docs/conventions/frontend.md — 하드코딩 금지). 모바일 우선 375px.
   계약: contracts/search_discover.py (SELECTORS) */

.oa-discover {
  padding: var(--bb-space-4) var(--bb-space-4) var(--bb-space-6);
}
.oa-discover[hidden] { display: none; }   /* ⚠️ 아래 규칙들이 display 를 잡으므로 가드 필수 */

.oa-discover__sec + .oa-discover__sec {
  margin-top: var(--bb-space-5);
  padding-top: var(--bb-space-5);
  border-top: 1px solid var(--rtp-line-soft);
}
.oa-discover__sec[hidden] { display: none; }

.oa-discover__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bb-space-3);
}
.oa-discover__t {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bb-ink);
}
.oa-discover__sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--rtp-ink-4);
  margin-left: var(--bb-space-1);
}
.oa-discover__a {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rtp-ink-3);
  cursor: pointer;
}

/* ── 최근 검색 칩 (시안 A 계열) ─────────────────────────────────── */
.oa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.oa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 시안은 34px 이지만 탭 타깃 최소치를 우선한다(frontend.md) — ✕ 가 작은 표적이라
     여기서 줄이면 인접 칩을 잘못 지우게 된다. */
  min-height: var(--bb-tap-target);
  padding: 0 6px 0 12px;
  border-radius: 999px;
  background: var(--bb-bg);
  border: 1px solid var(--bb-border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bb-ink);
  text-decoration: none;
}
/* 칩 본문 = 이동 링크. ✕ 와 형제라 클릭 영역이 겹치지 않는다. */
.oa-chip__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.oa-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 50%;
  color: var(--rtp-ink-4);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.oa-chip__x:hover { background: var(--bb-border-soft); color: var(--bb-ink-sub); }

/* ── 인기 순위 리스트 (시안 B 계열) ─────────────────────────────── */
.oa-poplist {
  display: flex;
  flex-direction: column;
}
.oa-poprow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--bb-tap-target);
  padding: 11px 2px;
  text-decoration: none;
  color: inherit;
}
.oa-poprow + .oa-poprow { border-top: 1px solid var(--rtp-line-soft); }

.oa-poprow__n {
  font-family: var(--rtp-font-num);
  font-size: 13px;
  font-weight: 800;
  color: var(--rtp-ink-4);
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}
.oa-poprow__n--top { color: var(--rtp-orange); }

.oa-poprow__tx { flex: 1; min-width: 0; }
.oa-poprow__nm {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oa-poprow__mt {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rtp-ink-3);
  margin-top: 2px;
}
.oa-poprow__rt {
  font-family: var(--rtp-font-num);
  font-size: 11px;
  font-weight: 800;
  color: var(--rtp-ink-4);
  flex-shrink: 0;
}
.oa-poprow__rt--up { color: var(--rtp-orange); }