/* 통합검색 결과 UI (UnifiedSearch.tsx) — 카드형·썸네일·타입색상. 자체 완결(레거시 su-* 와 독립). */

.usx { max-width: 1080px; margin: 0 auto; padding: 28px 16px 72px; color: #1f2430; }

/* 타입 색상 토큰 */
.usx-c-article, .usx-b-article { --c: #2563eb; }
.usx-c-webinar, .usx-b-webinar { --c: #7c3aed; }
.usx-c-qna,     .usx-b-qna     { --c: #0d9488; }
.usx-c-maker,   .usx-b-maker   { --c: #ea580c; }
.usx-c-shop,    .usx-b-shop    { --c: #db2777; }

/* 헤더 */
.usx-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.usx-h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.usx-q { color: #111827; }
.usx-q::before { content: '“'; color: #9aa3b2; }
.usx-q::after { content: '”'; color: #9aa3b2; }
.usx-for { color: #6b7280; font-weight: 700; }
.usx-count { font-size: 14px; color: #6b7280; }
.usx-count b { color: #2563eb; font-weight: 800; }

/* 탭 + 정렬 바 */
.usx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #eceef2; margin-bottom: 18px; }
.usx-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.usx-tab { --tabc: #111827; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid #e3e6ec; border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 700; color: #4b5563; text-decoration: none;
  transition: all .15s ease; white-space: nowrap; }
.usx-tab:hover { border-color: var(--tabc); color: var(--tabc); }
.usx-tab.on { background: var(--tabc); border-color: var(--tabc); color: #fff; }
.usx-tab em { font-style: normal; font-weight: 800; opacity: .7; font-size: 12px; }
.usx-tab.on em { opacity: .85; }
.usx-tab-webinar { --tabc: #7c3aed; } .usx-tab-article { --tabc: #2563eb; }
.usx-tab-qna { --tabc: #0d9488; } .usx-tab-maker { --tabc: #ea580c; } .usx-tab-shop { --tabc: #db2777; }
.usx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tabc); display: inline-block; }
.usx-tab.on .usx-dot { background: #fff; }

.usx-sort { display: flex; gap: 12px; font-size: 13px; }
.usx-sort a { color: #9aa3b2; text-decoration: none; font-weight: 600; }
.usx-sort a.on { color: #111827; font-weight: 800; }
.usx-sort a:hover { color: #4b5563; }

/* 제조사 패싯 */
.usx-facets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 20px; }
.usx-facets-label { font-size: 12px; font-weight: 800; color: #9aa3b2; margin-right: 2px; }
.usx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: #f4f6f9; color: #4b5563; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s; }
.usx-chip:hover { background: #e6ebf2; color: #111827; }
.usx-chip em { font-style: normal; color: #9aa3b2; font-weight: 700; }

/* 결과 리스트 */
.usx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.usx-card { display: flex; gap: 16px; padding: 15px; background: #fff; border: 1px solid #eceef2;
  border-radius: 14px; border-left: 3px solid var(--c); transition: box-shadow .18s ease, transform .18s ease; }
.usx-card:hover { box-shadow: 0 8px 24px rgba(20, 30, 60, .10); transform: translateY(-2px); }

.usx-thumb { flex: 0 0 132px; width: 132px; height: 88px; border-radius: 9px; overflow: hidden;
  display: block; background: #f4f6f9; }
.usx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usx-ph { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 88%, #000 0%), color-mix(in srgb, var(--c) 55%, #fff)); }
.usx-ph span { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.18); }

.usx-cbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.usx-tags { display: flex; gap: 6px; align-items: center; }
.usx-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; letter-spacing: .02em;
  background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); }
.usx-b-best { --c: #e11d48; background: color-mix(in srgb, #e11d48 13%, #fff); color: #e11d48; }
.usx-b-tech { --c: #0d9488; background: color-mix(in srgb, #0d9488 13%, #fff); color: #0d9488; }

.usx-title { font-size: 17px; font-weight: 700; line-height: 1.35; color: #16202f; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.usx-title:hover { color: var(--c); }
.usx-snippet { margin: 0; font-size: 13.5px; line-height: 1.6; color: #6b7280;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.usx-snippet mark { background: #fff2b8; color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 700; }

.usx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: #9aa3b2; margin-top: 1px; }
.usx-meta span { position: relative; }
.usx-meta span + span::before { content: '·'; margin-right: 8px; color: #cbd2dc; }
.usx-m-strong { color: #4b5563; font-weight: 700; }
.usx-date { color: #9aa3b2; }

/* 빈 결과 */
.usx-empty { text-align: center; padding: 64px 20px; }
.usx-empty-emoji { font-size: 40px; margin-bottom: 12px; opacity: .7; }
.usx-empty-t { font-size: 16px; color: #374151; margin: 0 0 6px; }
.usx-empty-t b { color: #111827; }
.usx-empty-s { font-size: 13.5px; color: #9aa3b2; margin: 0; }

/* 무한 스크롤 */
.usx-sentinel { height: 1px; }
.usx-loading { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 26px 0; color: #9aa3b2; font-size: 13.5px; font-weight: 600; }
.usx-spin { width: 17px; height: 17px; border: 2px solid #e3e6ec; border-top-color: #6b7280;
  border-radius: 50%; animation: usx-spin .7s linear infinite; }
@keyframes usx-spin { to { transform: rotate(360deg); } }
.usx-end { text-align: center; padding: 28px 0 8px; color: #b7bdc8; font-size: 12.5px; }
.usx-more-btn { display: block; margin: 18px auto 0; padding: 10px 22px; border: 1px solid #e3e6ec;
  border-radius: 999px; background: #fff; color: #4b5563; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.usx-more-btn:hover { border-color: #9aa3b2; color: #111827; }

/* 맨 위로 버튼 */
.usx-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid #e3e6ec; background: #fff; color: #4b5563;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(20, 30, 60, .16);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.usx-top.on { opacity: 1; visibility: visible; transform: translateY(0); }
.usx-top:hover { color: #111827; border-color: #9aa3b2; }
@media (max-width: 640px) { .usx-top { right: 14px; bottom: 16px; width: 42px; height: 42px; } }

/* 반응형 */
@media (max-width: 640px) {
  .usx { padding: 20px 12px 56px; }
  .usx-h1 { font-size: 20px; }
  .usx-card { gap: 12px; padding: 12px; }
  .usx-thumb { flex-basis: 96px; width: 96px; height: 72px; }
  .usx-title { font-size: 15.5px; }
  .usx-snippet { -webkit-line-clamp: 2; font-size: 13px; }
  .usx-bar { align-items: flex-start; }
}