/* ============================================================================
   search.css — 통합검색 (네이버風 카드 리스트 + 키워드 광고 슬롯)
   라이트/다크 --ro-* 토큰. 모바일 1열, 데스크톱 본문+사이드.
   ⚠ 클래스에 ad/ad- 접두사 금지(광고차단기가 숨김) → 광고 슬롯도 .sx-promo 로. [[css-avoid-ad-class]]
   ========================================================================== */
.sx { max-width: 1080px; margin: 0 auto; }

/* ── 프리미엄 히어로 (오로라 그라디언트 + 대형 검색) ──
   히어로 배경은 라이트·다크 공통 브랜드 그라디언트(고정). 그 위 텍스트는 항상 흰색,
   검색창은 --ro-surface 토큰이라 테마에 맞춰 적응. overflow는 visible(자동완성 드롭다운이 안 잘리게),
   오로라 블롭은 .sx__hero-fx(overflow:hidden) 안에서만 클립. */
.sx__hero { position: relative; margin-bottom: 18px; isolation: isolate; overflow: visible;
    padding: clamp(26px, 5vw, 46px) clamp(18px, 4vw, 40px) clamp(18px, 3vw, 26px);
    border-radius: 24px;
    background: linear-gradient(135deg, #2b6fff 0%, #4E8FFF 46%, #6aa8ff 100%);
    box-shadow: 0 22px 54px -22px rgba(43,111,255,.6); }
.sx__hero-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; }
.sx__hero-fx::before, .sx__hero-fx::after { content: ''; position: absolute; border-radius: 50%;
    filter: blur(46px); opacity: .5; will-change: transform; }
.sx__hero-fx::before { width: 46%; padding-bottom: 46%; background: #7cf0d0; top: -18%; left: -8%;
    animation: sxfloat1 13s ease-in-out infinite; }
.sx__hero-fx::after { width: 42%; padding-bottom: 42%; background: #c58bff; bottom: -20%; right: -6%;
    animation: sxfloat2 16s ease-in-out infinite; }
@keyframes sxfloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,26px) scale(1.08); } }
@keyframes sxfloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-28px,-34px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .sx__hero-fx::before, .sx__hero-fx::after { animation: none; } }

.sx__head { margin-bottom: 18px; }
.sx__eyebrow { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
    color: rgba(255,255,255,.82); margin-bottom: 12px; text-transform: uppercase; }
.sx__title { margin: 0 0 8px; font-size: clamp(24px, 4.4vw, 40px); font-weight: 900; letter-spacing: -0.025em;
    line-height: 1.15; color: #fff; text-shadow: 0 2px 18px rgba(10,30,80,.28); }
.sx__title em { font-style: normal; background: linear-gradient(90deg, #ffffff, #d9f6ff 55%, #b8f0e0);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx__desc { margin: 0; font-size: clamp(13px, 1.6vw, 15px); color: rgba(255,255,255,.9); line-height: 1.6; max-width: 620px; }

/* 검색창 — 히어로 위 부양(유리광택·포커스 링) */
.sx__form { position: relative; display: flex; gap: 9px; margin: 0; }
.sx__box { position: relative; flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 0 6px 0 18px; background: var(--ro-surface); border: 0; border-radius: 16px;
    box-shadow: 0 14px 36px -10px rgba(8,20,50,.42); transition: box-shadow .2s; }
.sx__box:focus-within { box-shadow: 0 0 0 4px rgba(255,255,255,.42), 0 16px 40px -8px rgba(8,20,50,.52); }
.sx__box > svg { width: 21px; height: 21px; color: var(--ro-primary-500); flex-shrink: 0; }
.sx__box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-size: 16px; color: var(--ro-text); padding: 15px 0; }
.sx__box input::placeholder { color: var(--ro-text-muted); }
.sx__go { flex-shrink: 0; border: 0; cursor: pointer; padding: 0 24px; border-radius: 14px;
    background: #0b1220; color: #fff; font-size: 15px; font-weight: 800;
    box-shadow: 0 14px 32px -10px rgba(8,15,30,.55); transition: transform .08s, filter .15s; }
.sx__go:hover { filter: brightness(1.22); }
.sx__go:active { transform: scale(.97); }

/* ── 결과 섹션 진입 애니메이션(은은한 페이드업, 모션 최소화 존중) ── */
@media (prefers-reduced-motion: no-preference) {
    .sx__main > .sx__sec, .sx__main > .sx__promos--top { animation: sxrise .45s cubic-bezier(.22,1,.36,1) both; }
    .sx__main > *:nth-child(2) { animation-delay: .04s; }
    .sx__main > *:nth-child(3) { animation-delay: .08s; }
    .sx__main > *:nth-child(4) { animation-delay: .12s; }
    .sx__main > *:nth-child(5) { animation-delay: .16s; }
    .sx__main > *:nth-child(6) { animation-delay: .20s; }
}
@keyframes sxrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 자동완성 */
.sx__suggest { position: absolute; left: 0; right: 96px; top: calc(100% + 6px); z-index: 50; margin: 0; padding: 6px;
    list-style: none; background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(8,12,20,.16); max-height: 60vh; overflow-y: auto; }
.sx__suggest[hidden] { display: none; }
.sx__suggest-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--ro-text); }
.sx__suggest-item:hover, .sx__suggest-item.is-active { background: var(--ro-primary-50); }
.sx__suggest-type { flex-shrink: 0; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--ro-primary-500); padding: 2px 8px; border-radius: 999px; }
.sx__suggest-type--코스 { background: #4e8fff; } .sx__suggest-type--매거진 { background: #a855f7; } .sx__suggest-type--커뮤니티 { background: #64748b; }
.sx__suggest-type--대회 { background: #ef6c00; } .sx__suggest-type--크루 { background: #12b886; } .sx__suggest-type--토픽 { background: #e64980; }
.sx__suggest-type--인물 { background: #2563eb; } .sx__suggest-type--제품 { background: #0ea5e9; } .sx__suggest-type--용어 { background: #7c3aed; } .sx__suggest-type--정보 { background: #475569; } .sx__suggest-type--기업 { background: #0f766e; }
/* 등록 사이트(서치콘솔 스타일) */
.sx__regsites-more { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ro-primary-600, #2563eb); text-decoration: none; }
.sx__regsites-list { display: flex; flex-direction: column; gap: 8px; }
.sx__regsite { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--ro-border, rgba(0,0,0,.08)); border-radius: 12px; background: var(--ro-surface, #fff); text-decoration: none; transition: border-color .15s, background .15s; }
.sx__regsite:hover { border-color: var(--ro-primary-300, #A9C7FF); background: var(--ro-primary-50, #eff5ff); }
.sx__regsite-fav { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: var(--ro-surface-2, #eef2f7); }
.sx__regsite-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sx__regsite-name { font-size: 14px; font-weight: 800; color: var(--ro-text, #111); }
.sx__regsite-vf { color: #16a34a; font-size: 12px; }
.sx__regsite-desc { font-size: 12.5px; color: var(--ro-text-sub, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__regsite-cat { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ro-primary-600, #2563eb); background: var(--ro-primary-50, #eff5ff); border-radius: 999px; padding: 2px 9px; }
.sx__regsites-cta { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--ro-text-sub, #64748b); text-decoration: none; }
.sx__regsites-cta:hover { color: var(--ro-primary-600, #2563eb); }

.sx__empty-report { margin-top: 22px; font-size: 13px; color: var(--ro-text-sub, #94a3b8); }
.sx__empty-report a { font-weight: 700; color: var(--ro-primary-600, #2563eb); text-decoration: none; margin-left: 4px; }
.sx__empty-report a:hover { text-decoration: underline; }
.sx__suggest-thumb { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--ro-surface-2, #eef2f7); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sx__suggest-item.has-thumb { padding-top: 7px; padding-bottom: 7px; }
.sx__suggest-label { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__suggest-sub { margin-left: auto; font-size: 11.5px; color: var(--ro-text-sub); white-space: nowrap; }

/* 최근 검색어 */
.sx__recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.sx__recent-label { font-size: 12px; font-weight: 800; color: var(--ro-text-sub); }
.sx__recent-chip { display: inline-flex; align-items: center; border: 1px solid var(--ro-border); border-radius: 999px; background: var(--ro-surface); overflow: hidden; }
.sx__recent-chip > a { padding: 4px 4px 4px 11px; font-size: 12px; color: var(--ro-text); text-decoration: none; }
.sx__recent-chip button { background: none; border: 0; color: var(--ro-text-muted); cursor: pointer; padding: 4px 8px 4px 3px; font-size: 12px; }
.sx__recent-clear { background: none; border: 0; color: var(--ro-text-muted); font-size: 11.5px; cursor: pointer; }

/* ── 탭 (네이버風: 헤더 아래 sticky 로 붙어 스크롤해도 탭 유지) ── */
.sx__tabs { position: sticky; top: var(--ro-header-h, 64px); z-index: 30;
    display: flex; gap: 4px; overflow-x: auto; padding: 8px 0 10px; margin-bottom: 10px;
    background: var(--ro-bg, var(--ro-surface)); border-bottom: 1px solid var(--ro-border); scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
.sx__tabs::-webkit-scrollbar { display: none; }
.sx__tab { flex-shrink: 0; padding: 8px 15px; border-radius: 999px; text-decoration: none;
    font-size: 14px; font-weight: 700; color: var(--ro-text-sub); white-space: nowrap; }
.sx__tab:hover { background: var(--ro-primary-50); color: var(--ro-text); }
.sx__tab.is-on { background: linear-gradient(135deg, #2b6fff, #4E8FFF); color: #fff;
    box-shadow: 0 6px 16px -6px rgba(43,111,255,.7); }
.sx__tab-n { font-weight: 800; opacity: .8; margin-left: 3px; }

/* ── 본문 + 사이드 레이아웃 ──
   ⚠ 사이드(프로모)가 **있을 때만** 2단. 예전엔 항상 300px 칸을 잡아 프로모 없을 때
     오른쪽이 텅 비고 본문이 좁아 보였다(사용자 제보 "빈 공간"). rail 클래스로 제어. */
/* minmax(0,1fr) + min-width:0 — 그리드 아이템(.sx__main)이 내용 최소폭(가로 이미지 스트립 등)으로
   부풀어 모바일에서 화면 밖으로 잘리던 blowout 방지. */
.sx__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sx__body > * { min-width: 0; }
.sx__main { min-width: 0; }
@media (min-width: 940px) { .sx__body--rail { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.sx__side { display: none; }
@media (min-width: 940px) { .sx__body--rail .sx__side { display: block; position: sticky; top: 84px; } }

/* ── 섹션 = 네이버風 카드 블록 ── */
.sx__sec { background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 16px;
    padding: 6px 18px 8px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.04);
    transition: box-shadow .2s, border-color .2s, transform .2s; }
.sx__sec:hover { box-shadow: 0 10px 28px -14px rgba(15,23,42,.22); border-color: var(--ro-primary-200); }
.sx__sec-h { display: flex; align-items: center; gap: 9px; padding: 13px 0 9px; margin-bottom: 4px;
    border-bottom: 1px solid var(--ro-border); }
/* 섹션 제목 앞 그라디언트 액센트 바(프리미엄 포털 감) */
.sx__sec-t { position: relative; padding-left: 13px; font-size: 16px; font-weight: 800; color: var(--ro-text); letter-spacing: -0.01em; }
.sx__sec-t::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #2b6fff, #6aa8ff); }
.sx__sec-n { font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2b6fff, #4E8FFF);
    min-width: 20px; text-align: center; padding: 1px 8px; border-radius: 999px; box-shadow: 0 3px 8px -3px rgba(43,111,255,.6); }
.sx__sec-more { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ro-text-sub); text-decoration: none; transition: color .15s; }
.sx__sec-more:hover { color: var(--ro-primary-600); }

/* 결과 행(네이버 블로그/카페 스타일 — 썸네일 + 텍스트) + 프리미엄 마이크로 인터랙션 */
.sx__list { display: flex; flex-direction: column; }
.sx__row { display: flex; gap: 14px; padding: 14px 8px; margin: 0 -8px; border-radius: 12px; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--ro-border); transition: background .15s, transform .13s cubic-bezier(.22,1,.36,1); }
.sx__row:last-child { border-bottom: 0; }
.sx__row:hover { background: var(--ro-primary-50); transform: translateX(3px); }
.sx__thumb { flex-shrink: 0; width: 78px; height: 78px; border-radius: 12px; overflow: hidden;
    background: var(--ro-primary-50); display: grid; place-items: center; transition: transform .22s, box-shadow .22s; }
.sx__row:hover .sx__thumb { transform: scale(1.05); box-shadow: 0 8px 20px -8px rgba(15,23,42,.35); }
.sx__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx__row-t { transition: color .15s; }
.sx__row:hover .sx__row-t { color: var(--ro-primary-700); }
.sx__thumb--icon { color: var(--ro-primary-400); }
.sx__thumb--icon svg { width: 28px; height: 28px; }
.sx__row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx__row-cat { font-size: 11.5px; font-weight: 800; color: var(--ro-primary-700); }
.sx__row-t { font-size: 15px; font-weight: 700; color: var(--ro-text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx__row-d { font-size: 13px; color: var(--ro-text-sub); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx__row-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ro-text-sub); margin-top: auto; }
.sx__row-meta b { font-weight: 700; color: var(--ro-text-sub); }

/* ── 웹에서 더 찾기(외부 검색 딥링크) ── */
.sx__websec-note { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ro-text-muted); }
.sx__web { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 6px 0 4px; }
@media (max-width: 520px) { .sx__web { grid-template-columns: 1fr; } }
.sx__web-chip { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 12px;
    border: 1px solid var(--ro-border); background: var(--ro-surface); text-decoration: none; color: var(--ro-text-sub);
    font-size: 13px; transition: border-color .15s, box-shadow .15s, transform .08s; }
.sx__web-chip:hover { border-color: color-mix(in srgb, var(--wc, var(--ro-primary-400)) 55%, var(--ro-border));
    box-shadow: 0 6px 16px rgba(8,12,20,.08); transform: translateY(-1px); }
.sx__web-chip b { font-weight: 800; color: var(--ro-text); flex-shrink: 0; }
.sx__web-chip > span:not(.sx__web-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sx__web-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sx__web-chip svg { width: 15px; height: 15px; margin-left: auto; flex-shrink: 0; color: var(--ro-text-muted); }

/* ── 관련 지식(위키백과) 카드 ── */
.sx__kn-src { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--ro-text-muted); }
.sx__kn-card { display: flex; gap: 14px; width: 100%; text-align: left; padding: 14px 4px; margin: 0 -4px;
    border: 0; background: transparent; cursor: pointer; color: inherit; border-radius: 10px; }
.sx__kn-card:hover { background: var(--ro-primary-50); }
.sx__kn-thumb { flex-shrink: 0; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--ro-primary-50); }
.sx__kn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx__kn-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx__kn-t { font-size: 15.5px; font-weight: 800; color: var(--ro-text); }
.sx__kn-x { font-size: 13px; color: var(--ro-text-sub); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sx__kn-more { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 800; color: var(--ro-primary-700); }

/* ── 공용 모달 (관련 지식 본문 / 외부 이동 확인) — 네이티브 <dialog> top layer, 라이트·다크 토큰 ── */
dialog.sx-modal { box-sizing: border-box; position: fixed; inset: 0; margin: auto;
    width: min(560px, calc(100vw - 24px)); height: fit-content;
    max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
    padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
dialog.sx-modal::backdrop { background: rgba(6,9,14,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
body.sx-modal-open { overflow: hidden; }
.sx-modal__panel { position: relative; background: var(--ro-surface); border: 1px solid var(--ro-border);
    border-radius: 18px; box-shadow: 0 24px 70px rgba(6,9,14,.5); max-height: calc(100vh - 24px); overflow: auto;
    animation: sxmodal-pop .2s cubic-bezier(.22,1,.36,1) both; }
@keyframes sxmodal-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.sx-modal__x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0;
    background: var(--ro-surface-2, rgba(127,127,127,.12)); color: var(--ro-text-sub); border-radius: 9px;
    display: grid; place-items: center; cursor: pointer; z-index: 2; }
.sx-modal__x svg { width: 18px; height: 18px; }
.sx-modal__body { padding: 24px 22px 22px; }

.sx-modal__kn h3 { margin: 0 0 4px; font-size: 20px; font-weight: 900; color: var(--ro-text); }
.sx-modal__kn-src { display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--ro-primary-700);
    background: var(--ro-primary-50); padding: 2px 9px; border-radius: 999px; margin-bottom: 12px; }
.sx-modal__kn-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
.sx-modal__kn p { font-size: 14.5px; line-height: 1.75; color: var(--ro-text); margin: 0 0 16px; }

.sx-modal__ext { text-align: center; padding: 6px 4px; }
.sx-modal__ext-ic { font-size: 40px; }
.sx-modal__ext h3 { margin: 8px 0 8px; font-size: 19px; font-weight: 900; color: var(--ro-text); }
.sx-modal__ext h3 span { color: var(--ro-text-sub); font-weight: 700; }
.sx-modal__ext p { font-size: 14px; color: var(--ro-text-sub); line-height: 1.7; margin: 0 0 18px; }

.sx-modal__actions { display: flex; gap: 8px; }
.sx-modal__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 13px;
    border-radius: 12px; font-size: 14.5px; font-weight: 800; text-decoration: none; cursor: pointer; border: 0; }
.sx-modal__btn--ghost { background: var(--ro-surface); border: 1px solid var(--ro-border); color: var(--ro-text-sub); }
.sx-modal__btn--go { background: var(--ro-primary-500); color: #fff; }
.sx-modal__btn--go:hover { filter: brightness(1.06); }
.sx-modal__kn .sx-modal__btn--go { width: 100%; }
@media (max-width: 520px) { .sx__kn-thumb { width: 64px; height: 64px; } .sx-modal__actions { flex-direction: column; } }

/* 데스크톱: 프로모는 사이드에서만(본문 상단 프로모는 중복이라 숨김). 모바일은 사이드 숨김이라 상단만 노출. */
@media (min-width: 940px) { .sx__body--rail .sx__promos--top { display: none; } }

/* ── 확장 검색 구분 밴드 (러너온 결과 ↔ 웹·미디어) ── */
.sx__extband { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
.sx__extband-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ro-border), transparent); }
.sx__extband-t { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--ro-text-muted); }
.sx__extband-t b { color: var(--ro-primary-600); font-weight: 800; }

/* ── 연관 검색어 (네이버 연관검색 자리) ── */
.sx__related { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.sx__related-label { font-size: 12px; font-weight: 800; color: var(--ro-text-muted); }
.sx__related-chip { font-size: 13px; font-weight: 700; color: var(--ro-primary-700); background: var(--ro-primary-50);
    padding: 6px 13px; border-radius: 999px; text-decoration: none; transition: background .15s; }
.sx__related-chip:hover { background: var(--ro-primary-100); }

/* ── 관련 영상 (YouTube) ── */
.sx__vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 6px 0 4px; }
@media (max-width: 640px) { .sx__vid-grid { grid-template-columns: repeat(2, 1fr); } }
.sx__vid { display: flex; flex-direction: column; gap: 6px; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.sx__vid-th { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--ro-primary-50); }
.sx__vid-th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.sx__vid:hover .sx__vid-th img { transform: scale(1.06); }
.sx__vid-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px;
    background: rgba(6,9,14,.28); opacity: 0; transition: opacity .15s; }
.sx__vid:hover .sx__vid-play { opacity: 1; }
.sx__vid-t { font-size: 13px; font-weight: 700; color: var(--ro-text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx__vid-ch { font-size: 11.5px; color: var(--ro-text-sub); }

.sx-modal__vid-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; margin-bottom: 12px; }
.sx-modal__vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sx-modal__vid h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--ro-text); line-height: 1.4; }

/* ── 관련 정보 (네이버 뉴스·백과) ── */
.sx__winfo-list { display: flex; flex-direction: column; }
.sx__winfo-row { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent;
    padding: 12px 4px; margin: 0 -4px; border-bottom: 1px solid var(--ro-border); border-radius: 8px; cursor: pointer; color: inherit; }
.sx__winfo-row:last-child { border-bottom: 0; }
.sx__winfo-row:hover { background: var(--ro-primary-50); }
.sx__winfo-kind { flex-shrink: 0; font-size: 11px; font-weight: 800; color: #fff; background: #03c75a; padding: 3px 9px; border-radius: 999px; margin-top: 1px; }
.sx__winfo-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx__winfo-t { font-size: 14px; font-weight: 700; color: var(--ro-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__winfo-d { font-size: 12px; color: var(--ro-text-muted); }
.sx__winfo-go { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--ro-text-muted); }

/* 해시태그 */
.sx__tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.sx__tag { font-size: 13px; font-weight: 700; color: var(--ro-primary-600); background: var(--ro-primary-50);
    padding: 5px 11px; border-radius: 999px; text-decoration: none; }
.sx__tag:hover { background: var(--ro-primary-100); }

/* ── 키워드 프로모(광고/공지/안내) 슬롯 ──
   레이아웃 3종: card(썸네일+텍스트) · banner(큰 배너+자식카드) · text(이미지 없는 텍스트 광고).
   구조: .sx__promo(컨테이너) > .sx__promo-main(클릭영역 a/div) + .sx__promo-subs(자식 링크들). */
.sx__promos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.sx__side .sx__promos { margin-bottom: 0; }
.sx__promo { position: relative; display: block; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--ro-border); background: var(--ro-surface);
    transition: box-shadow .15s, transform .08s, border-color .15s; }
.sx__promo:hover { box-shadow: 0 8px 22px rgba(8,12,20,.10); transform: translateY(-1px); border-color: var(--ro-primary-200); }
/* 종류 액센트(레이아웃 배경보다 먼저 선언 → text/banner 가 덮어쓴다) */
.sx__promo--notice { border-left: 3px solid #e65100; }
.sx__promo--announcement { border-left: 3px solid #7b1fa2; }

/* 클릭영역(본문) */
.sx__promo-main { display: flex; gap: 13px; padding: 15px 16px; text-decoration: none; color: inherit; }
.sx__promo-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx__promo-tag { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ro-primary-700); background: var(--ro-primary-100); padding: 2px 7px; border-radius: 5px; }
.sx__promo--notice .sx__promo-tag { color: #e65100; background: rgba(230,81,0,.12); }
.sx__promo--announcement .sx__promo-tag { color: #7b1fa2; background: rgba(123,31,162,.12); }
.sx__promo-t { font-size: 14.5px; font-weight: 800; color: var(--ro-text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx__promo-d { font-size: 12.5px; color: var(--ro-text-sub); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx__promo-cta { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--ro-primary-700); }

/* card — 썸네일(64px) 좌 + 텍스트 우 (기본) */
.sx__promo--card .sx__promo-main { background: linear-gradient(135deg, var(--ro-primary-50), var(--ro-surface) 72%); }
.sx__promo--card.sx__promo--notice .sx__promo-main,
.sx__promo--card.sx__promo--announcement .sx__promo-main { background: var(--ro-surface); }
.sx__promo-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
    background: var(--ro-primary-100); display: grid; place-items: center; color: var(--ro-primary-600); }
.sx__promo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx__promo-thumb svg { width: 24px; height: 24px; }

/* banner — 큰 배너 이미지(5:2) 위 + 텍스트 아래 */
.sx__promo--banner .sx__promo-main { flex-direction: column; gap: 0; padding: 0; }
.sx__promo-hero { display: block; width: 100%; aspect-ratio: 5 / 2; overflow: hidden; background: var(--ro-primary-50); }
.sx__promo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx__promo--banner .sx__promo-b { padding: 13px 16px 15px; gap: 4px; }
.sx__promo--banner .sx__promo-t { font-size: 16px; -webkit-line-clamp: 2; }

/* text — 이미지 없는 텍스트 광고. 액센트 바 + 은은한 그라디언트로 멋스럽게 */
.sx__promo--text { background: linear-gradient(135deg, var(--ro-primary-50), var(--ro-surface) 62%); }
.sx__promo--text::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ro-primary-500); }
.sx__promo--text .sx__promo-main { padding: 16px 18px 16px 20px; }
.sx__promo--text .sx__promo-t { font-size: 16px; }
.sx__promo--text .sx__promo-d { font-size: 13px; }

/* 자식 링크(리치) — 기본은 알약 칩, banner 에선 큰 썸네일 카드 */
.sx__promo-subs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.sx__promo--text .sx__promo-subs { padding-left: 20px; }
.sx__promo-sub { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--ro-border);
    border-radius: 999px; background: var(--ro-surface); text-decoration: none; color: var(--ro-text-sub); font-size: 12.5px; font-weight: 700; }
.sx__promo-sub:hover { border-color: var(--ro-primary-300); color: var(--ro-primary-600); }
.sx__promo-sub-th { width: 22px; height: 22px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--ro-primary-50); }
.sx__promo-sub-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx__promo-sub-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

.sx__promo--banner .sx__promo-subs { border-top: 1px solid var(--ro-border); padding-top: 12px; }
.sx__promo--banner .sx__promo-sub { flex-direction: column; align-items: center; width: 76px; gap: 6px;
    padding: 0; border: 0; background: transparent; border-radius: 0; color: var(--ro-text-sub); }
.sx__promo--banner .sx__promo-sub:hover { color: var(--ro-primary-600); }
.sx__promo--banner .sx__promo-sub-th { width: 76px; height: 76px; border-radius: 10px; }
.sx__promo--banner .sx__promo-sub-l { white-space: normal; text-align: center; font-size: 11.5px; line-height: 1.3; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

.sx__side-h { font-size: 12px; font-weight: 800; color: var(--ro-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }

/* 빈 상태 */
.sx__empty { text-align: center; padding: 54px 20px; }
.sx__empty img { width: 96px; height: 96px; opacity: .9; margin-bottom: 12px; }
.sx__empty-t { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--ro-text); }
.sx__empty-d { margin: 0; font-size: 13.5px; color: var(--ro-text-sub); }
.sx__samples { margin-top: 16px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sx__sample { font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
    background: var(--ro-primary-50); color: var(--ro-primary-600); text-decoration: none; }
.sx__sample:hover { background: var(--ro-primary-100); }

/* ── 반응형 (모바일 최적화) ── */
@media (max-width: 600px) {
    .sx__form { gap: 6px; }
    .sx__box { padding: 0 4px 0 13px; }
    .sx__box input { font-size: 16px; padding: 12px 0; }   /* 16px = iOS 확대 방지 */
    .sx__go { padding: 11px 16px; font-size: 14px; }
    .sx__sec { padding: 4px 13px 6px; border-radius: 14px; }
    .sx__row { gap: 11px; padding: 12px 2px; }
    .sx__thumb { width: 60px; height: 60px; border-radius: 10px; }
    .sx__row-t { font-size: 14.5px; }
    .sx__row-d { font-size: 12.5px; }
    .sx__promo--banner .sx__promo-t { font-size: 15px; }
    .sx__promo--banner .sx__promo-sub { width: 68px; }
    .sx__promo--banner .sx__promo-sub-th { width: 68px; height: 68px; }
    /* 모바일에선 sticky 탭이 화면을 많이 먹지 않게 여백 축소 */
    .sx__tabs { padding: 6px 0 8px; gap: 3px; }
    .sx__tab { padding: 7px 13px; font-size: 13.5px; }
}
/* 아주 좁은 화면(≤360)에선 썸네일 더 축소 */
@media (max-width: 360px) {
    .sx__thumb { width: 52px; height: 52px; }
    .sx__row-meta { gap: 7px; font-size: 11.5px; }
}

/* ============================================================================
   지식카드(엔티티) — 결과 최상단. 인물/제품/러닝 토픽 공용. --ro-* 토큰(다크 안전).
   ========================================================================== */
.sx__entity { background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 16px;
    padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 12px 30px -18px rgba(15,23,42,.28); }
.sx__entity-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; }
.sx__entity-name { font-size: clamp(19px, 2.4vw, 23px); font-weight: 900; color: var(--ro-text);
    letter-spacing: -0.02em; text-decoration: none; }
a.sx__entity-name:hover { color: var(--ro-primary-600); text-decoration: underline; }
.sx__entity-sub { font-size: 13px; color: var(--ro-text-muted); font-weight: 600; }
.sx__entity-badges { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sx__entity-vf { font-size: 11px; font-weight: 800; color: #fff; background: var(--ro-primary-500);
    padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sx__entity-badge { font-size: 11px; font-weight: 800; color: var(--ro-primary-700);
    background: var(--ro-primary-50); border: 1px solid var(--ro-primary-200); padding: 2px 9px;
    border-radius: 999px; white-space: nowrap; }

.sx__entity-body { display: flex; gap: 16px; align-items: flex-start; }
.sx__entity-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sx__entity-row { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.sx__entity-label { flex: 0 0 84px; color: var(--ro-text-muted); font-weight: 700; }
.sx__entity-val { color: var(--ro-text); min-width: 0; word-break: break-word; text-decoration: none; }
a.sx__entity-val { color: var(--ro-primary-600); }
a.sx__entity-val:hover { text-decoration: underline; }
.sx__entity-thumb { flex: 0 0 auto; width: 108px; height: 108px; border-radius: 14px; overflow: hidden;
    background: var(--ro-primary-50); border: 1px solid var(--ro-border); }
.sx__entity-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sx__entity-summary { margin: 12px 0 0; font-size: 13.5px; color: var(--ro-text-sub); line-height: 1.65; }

.sx__entity-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.sx__entity-stat { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px;
    background: var(--ro-primary-50); border: 1px solid var(--ro-border); }
.sx__entity-stat-v { font-size: 16px; font-weight: 800; color: var(--ro-text); letter-spacing: -0.01em; }
.sx__entity-stat-l { font-size: 11.5px; font-weight: 700; color: var(--ro-text-muted); }

.sx__entity-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sx__entity-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--ro-border); background: var(--ro-surface); color: var(--ro-text-sub);
    font-size: 12.5px; font-weight: 700; text-decoration: none; transition: border-color .15s, color .15s; }
.sx__entity-chip:hover { border-color: var(--ro-primary-400); color: var(--ro-primary-600); }

.sx__entity-gallery { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin; }
.sx__entity-gitem { flex: 0 0 auto; width: 120px; margin: 0; }
.sx__entity-gitem img { width: 120px; height: 84px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--ro-border); display: block; }
.sx__entity-gitem figcaption { margin-top: 5px; font-size: 11px; color: var(--ro-text-muted); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sx__entity-foot { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 12px;
    border-top: 1px solid var(--ro-border); }
.sx__entity-foot-t { font-size: 11.5px; font-weight: 700; color: var(--ro-text-muted); }
.sx__entity-report { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ro-text-sub);
    text-decoration: none; }
.sx__entity-report:hover { color: var(--ro-primary-600); text-decoration: underline; }

@media (max-width: 600px) {
    .sx__entity { padding: 15px 15px; }
    .sx__entity-body { flex-direction: column-reverse; gap: 12px; }
    .sx__entity-thumb { width: 84px; height: 84px; }
    .sx__entity-label { flex-basis: 72px; }
    .sx__entity-badges { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================================
   실시간 인기검색어 위젯 — 빈 상태 + 데스크톱 사이드 공용.
   ========================================================================== */
.sx__trend { background: var(--ro-surface); border: 1px solid var(--ro-border); border-radius: 16px;
    padding: 14px 16px; margin-bottom: 14px; }
.sx__trend-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sx__trend-t { font-size: 14.5px; font-weight: 800; color: var(--ro-text); letter-spacing: -0.01em; }
.sx__trend-live { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,77,79,.6); animation: sxpulse 1.8s ease-out infinite; }
@keyframes sxpulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,79,.5); } 70% { box-shadow: 0 0 0 6px rgba(255,77,79,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,79,0); } }
@media (prefers-reduced-motion: reduce) { .sx__trend-live { animation: none; } }
.sx__trend-list { list-style: none; margin: 0; padding: 0; }
.sx__trend-row { display: flex; align-items: center; gap: 11px; padding: 7px 4px; border-radius: 8px;
    transition: background .13s; }
.sx__trend-row:hover { background: var(--ro-primary-50); }
.sx__trend-rank { flex: 0 0 20px; text-align: center; font-size: 14px; font-weight: 800;
    color: var(--ro-text-muted); font-variant-numeric: tabular-nums; }
.sx__trend-row--top .sx__trend-rank { color: var(--ro-primary-600); }
.sx__trend-kw { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ro-text);
    text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx__trend-row--top .sx__trend-kw { font-weight: 800; }
.sx__trend-kw:hover { color: var(--ro-primary-600); text-decoration: underline; }
.sx__trend-hint { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ro-text-muted);
    font-variant-numeric: tabular-nums; }

/* 빈 상태(검색 전)에선 가운데 정렬 폭 제한 + 좌측정렬 목록 */
.sx__trend-wrap--empty { max-width: 380px; margin: 22px auto 0; text-align: left; }
.sx__trend-wrap--empty .sx__trend { margin-bottom: 0; }

/* ══ 같은 이름 다른 인물/제품 (동명이인 그리드) — 대표 지식카드 아래 ══════════════ */
.sx__samegrp { margin: 16px 0 6px; }
.sx__samegrp-h { font-size: 15px; font-weight: 800; color: var(--ro-text); margin: 0 0 11px; letter-spacing: -0.01em; }
.sx__samegrp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.sx__samegrp-card { display: block; text-decoration: none; color: inherit; }
.sx__samegrp-img { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 10px; overflow: hidden; background: var(--ro-surface-alt, #f3f5f8); border: 1px solid var(--ro-border);
    transition: border-color .16s ease; }
.sx__samegrp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 이미지 없음/로드실패 → 이름 첫 글자 이니셜 박스 */
.sx__samegrp-img.is-empty::before { content: attr(data-ini); font-size: 30px; font-weight: 800; color: var(--ro-text-muted, var(--ro-text-sub)); }
.sx__samegrp-name { display: block; margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--ro-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx__samegrp-sub { display: block; font-size: 11.5px; color: var(--ro-text-sub);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx__samegrp-card:hover .sx__samegrp-img { border-color: var(--ro-primary-300, var(--ro-primary-500)); }
@media (max-width: 600px) {
    .sx__samegrp-list { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
}

/* ============================================================================
   "새로워진 통합검색" 안내 칩 — 은은한 액센트 알약(작고 muted), localStorage 로 1회 닫힘.
   검색창 아래 인라인으로 붙어 레이아웃을 크게 밀지 않는다. --ro-* 토큰(라이트/다크 공용).
   ========================================================================== */
.sx__whatsnew { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 2px;
    padding: 6px 8px 6px 13px; border-radius: 999px; font-size: 12.5px; line-height: 1.3;
    background: linear-gradient(135deg, var(--ro-primary-50), var(--ro-accent-50));
    border: 1px solid var(--ro-primary-200); box-shadow: 0 4px 14px -9px rgba(43,111,255,.45); }
.sx__whatsnew[hidden] { display: none; }
.sx__whatsnew-spark { flex-shrink: 0; color: var(--ro-accent-500); font-size: 13px; line-height: 1; }
.sx__whatsnew-t b { font-weight: 800; color: var(--ro-primary-700); }
.sx__whatsnew-t span { color: var(--ro-text-sub); font-weight: 600; }
.sx__whatsnew-x { flex-shrink: 0; width: 20px; height: 20px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(127,127,127,.14); color: var(--ro-text-sub); font-size: 15px; line-height: 1;
    display: grid; place-items: center; transition: background .14s, color .14s; }
.sx__whatsnew-x:hover { background: rgba(127,127,127,.28); color: var(--ro-text); }
@media (max-width: 600px) { .sx__whatsnew { font-size: 12px; } .sx__whatsnew-t span { display: none; } }

/* ── 관련 이미지 (Wikimedia Commons, 무키) — 가로 스크롤 스트립 ── */
.sx__img-strip { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.sx__img-strip::-webkit-scrollbar { height: 6px; }
.sx__img-strip::-webkit-scrollbar-thumb { background: var(--ro-border); border-radius: 999px; }
.sx__img-tile { flex: 0 0 auto; width: 148px; height: 108px; border-radius: 12px; overflow: hidden;
    background: var(--ro-surface-alt); border: 1px solid var(--ro-border); scroll-snap-align: start;
    display: block; transition: transform .2s, box-shadow .2s, border-color .2s; }
.sx__img-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(15,23,42,.45);
    border-color: var(--ro-primary-300); }
.sx__img-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .sx__img-tile { width: 124px; height: 92px; } }

/* ── 낱말 뜻 (위키낱말사전, 무키) — 컴팩트 카드 ── */
.sx__define-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 10px; }
.sx__define-t { font-size: 16px; font-weight: 800; color: var(--ro-text); letter-spacing: -0.01em; }
.sx__define-x { font-size: 13.5px; color: var(--ro-text-sub); line-height: 1.7; }
.sx__define-src { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 800;
    color: var(--ro-primary-700); text-decoration: none; }
.sx__define-src[hidden] { display: none; }
.sx__define-src:hover { text-decoration: underline; }

/* ============================================================================
   프리미엄 폴리시 — 지식카드 · 실시간 인기검색어 · 동명이인 그리드.
   깊이(soft shadow) + 은은한 액센트 + 시인성(양 테마). 기존 규칙 뒤에 선언해 강화.
   ========================================================================== */
/* 지식카드: 상단 얇은 브랜드→코랄 액센트 바 + 부드러운 입체감 + 호버 강조 */
.sx__entity { position: relative; overflow: hidden;
    box-shadow: 0 20px 46px -26px rgba(15,23,42,.42), 0 2px 6px -3px rgba(15,23,42,.12);
    transition: box-shadow .2s, border-color .2s; }
.sx__entity::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--ro-primary-500), var(--ro-accent-500) 90%); }
.sx__entity:hover { border-color: var(--ro-primary-200);
    box-shadow: 0 26px 56px -26px rgba(15,23,42,.5), 0 3px 8px -3px rgba(15,23,42,.14); }
.sx__entity-head { padding-top: 3px; }
/* 통계 타일: 살짝 더 또렷한 라벨(양 테마 시인성) */
.sx__entity-stat-l { color: var(--ro-text-sub); }

/* 실시간 인기검색어: 입체감 + 헤더 구분선 + 상위 3위 웜 액센트(코랄) */
.sx__trend { box-shadow: 0 14px 32px -24px rgba(15,23,42,.4); }
.sx__trend-h { padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px solid var(--ro-border); }
.sx__trend-row--top .sx__trend-rank { color: var(--ro-accent-500); font-weight: 900; }
.sx__trend-row--top .sx__trend-kw { color: var(--ro-text); }
.sx__trend-row:hover .sx__trend-kw { color: var(--ro-primary-600); }

/* 동명이인 그리드: 카드 호버 리프트 + 그림자(양 테마) */
.sx__samegrp-img { transition: border-color .16s ease, box-shadow .2s ease, transform .2s ease; }
.sx__samegrp-card:hover .sx__samegrp-img { border-color: var(--ro-primary-300);
    box-shadow: 0 10px 22px -13px rgba(15,23,42,.45); transform: translateY(-2px); }