/* 통합 검색 전용 (templates/search/index.html) */

/* 검색 폼: 검색어 | 버튼 */
.search-form { display: flex; gap: var(--sp-3); padding: var(--sp-4); }
.search-form__q { flex: 1 1 auto; width: auto; min-width: 0; min-height: 52px; font-size: var(--fs-lg); }
.search-form__btn { flex-shrink: 0; min-height: 52px; padding: 0 var(--sp-6); }
@media (max-width: 480px) {
  .search-form { padding: var(--sp-3); gap: var(--sp-2); }
  .search-form__btn { padding: 0 var(--sp-4); }
}
.sr-note { margin: 0; }

/* 결과 종류 탭 (알약 링크, 결과가 있는 종류만 · 폰에서는 줄 바꿈) */
.search-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; }
.search-tabs { min-width: 0; }
.search-tabs .pill b { margin-left: var(--sp-1); font-weight: var(--fw-semibold); color: var(--muted); }
/* 고른 탭: 공통 .pill 에는 링크용 '선택됨' 모양이 없어 여기서 (포인트색 바탕) */
.search-tabs .pill[aria-current="page"] { background: var(--primary); border-color: transparent; color: var(--text-strong); font-weight: var(--fw-semibold); }
.search-tabs .pill[aria-current="page"] b { color: var(--text-strong); }
.sr-q { color: var(--text-strong); }
@media (max-width: 768px) {
  .search-tabs { width: 100%; }
}

.search-results { gap: var(--sp-8); }
.search-section { gap: var(--sp-3); }
.sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.sr-empty p { margin: 0; }

/* 본문 발췌: 검색어는 노란 글씨 + 밑줄 */
.sr-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); word-break: break-all; }
.sr-snip--sm { -webkit-line-clamp: 2; font-size: var(--fs-xs); line-height: var(--lh-snug); }
.sr-snip mark { padding: 0 1px; color: var(--hud-yellow); background: transparent; font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }
.sr-meta { font-size: var(--fs-xs); color: var(--muted); }

/* 게시글 · 게임 데이터 줄 */
.sr-list { display: flex; flex-direction: column; }
.sr-post, .sr-data { display: flex; color: var(--text); border-bottom: 1px solid var(--line); min-width: 0; }
.sr-post:last-child, .sr-data:last-child { border-bottom: 0; }
.sr-post:hover, .sr-data:hover { background: var(--surface); color: var(--text); }
.sr-post { flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); }
.sr-post__top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.sr-post__title { min-width: 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sr-data { align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-3) var(--sp-5); }
.sr-data__name { flex-shrink: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); }
@media (max-width: 480px) {
  .sr-post { padding: var(--sp-3) var(--sp-4); }
  .sr-data { padding: var(--sp-3) var(--sp-4); }
}

/* 공략 영상 · 갤러리 카드 (4 · 3 · 2열) */
.sr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1024px) { .sr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
.sr-card { display: flex; flex-direction: column; overflow: hidden; color: var(--text); min-width: 0; }
.sr-card:hover { color: var(--text); border-color: var(--accent-line); }
.sr-card__img { display: block; aspect-ratio: 4 / 3; background: var(--art-bg); overflow: hidden; }
.sr-card__img--video { aspect-ratio: 16 / 9; }
.sr-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-card__text { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); min-width: 0; }
.sr-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-strong); }

/* ----- 공략 · 도감 · 음악 (시안 docs/search-sian) ----- */
/* 공략 · 도감 한 줄: 그림 · 종류 · 이름(영문) · 어디 · (본문에서 찾았으면 발췌) */
.sr-g { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; padding: var(--sp-3) var(--sp-5); color: var(--text); border-bottom: 1px solid var(--line); min-width: 0; }
.sr-g:last-child { border-bottom: 0; }
.sr-g[hidden] { display: none; }   /* 종류 거르기로 숨긴 줄 (display: flex 보다 앞서게) */
.sr-g:hover { background: var(--surface); color: var(--text); }
.sr-g__art { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-md, 10px); background: var(--art-bg-deep); overflow: hidden; }
.sr-g__art img { max-width: 44px; max-height: 44px; image-rendering: pixelated; }
.sr-g__art--face img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; image-rendering: auto; }
.sr-g__ph { color: var(--muted); }
.sr-g__tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-g__top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.sr-g__top .chip { flex-shrink: 0; }
.sr-g__name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-strong); }
.sr-g__en { flex-shrink: 1; font-size: var(--fs-sm); color: var(--muted); }
.sr-g__where { font-size: var(--fs-sm); color: var(--text-sub); }
.sr-g__go { flex-shrink: 0; font-size: 22px; color: var(--muted); }
.sr-g mark, .sr-song mark, .sr-pl mark, .sr-tag mark { padding: 0 1px; color: var(--hud-yellow); background: transparent; font-weight: var(--fw-bold); }
.sr-snip--1 { -webkit-line-clamp: 1; line-height: var(--lh-snug); }
@media (max-width: 768px) {
  .sr-g { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .sr-g__art { flex-basis: 44px; width: 44px; height: 44px; }
  .sr-g__art img { max-width: 38px; max-height: 38px; }
  .sr-g__en { display: none; }
  .sr-snip--1 { -webkit-line-clamp: 2; }
}

/* 공략 탭: 종류 거르기 (줄 바꿈, 가로 스크롤 없음) */
.sr-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sr-filter__b { min-height: 40px; padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-sm); color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.sr-filter__b b { margin-left: 4px; color: var(--muted); font-weight: var(--fw-semibold); }
.sr-filter__b[aria-pressed="true"] { color: var(--text-strong); border-color: var(--accent-line); background: var(--surface); }

/* 음악: 곡 줄 */
.sr-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-sub); }
.sr-sub b { color: var(--muted); }
.sr-song { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; padding: var(--sp-3) var(--sp-5); color: var(--text); border-bottom: 1px solid var(--line); min-width: 0; }
.sr-song:last-child { border-bottom: 0; }
.sr-song:hover { background: var(--surface); color: var(--text); }
.sr-song__th { position: relative; flex: 0 0 80px; height: 45px; border-radius: 6px; background: var(--art-bg) center / cover; }
.sr-song__ov { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; background: rgba(0,0,0,.25); border-radius: inherit; }
.sr-song__tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-song__t { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-strong); }
.sr-song__a { font-size: var(--fs-sm); color: var(--text-sub); }
.sr-song__tags { flex-shrink: 0; display: flex; gap: var(--sp-1); }
.sr-tag { font-size: var(--fs-xs); color: var(--accent); }
@media (max-width: 768px) {
  .sr-song { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .sr-song__th { flex-basis: 64px; height: 36px; }
  .sr-song__tags { display: none; }
}

/* 음악: 플리 카드 (표지 2×2) */
.sr-pl { display: flex; flex-direction: column; overflow: hidden; color: var(--text); min-width: 0; }
.sr-pl:hover { color: var(--text); border-color: var(--accent-line); }
.sr-pl__cover { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; background: var(--art-bg); }
.sr-pl__cover i { background: center / cover; }
.sr-pl__cover--one { grid-template-columns: 1fr; }
.sr-pl__cover--one i ~ i { display: none; }
.sr-pl__lock { position: absolute; left: var(--sp-2); top: var(--sp-2); padding: 2px 8px; font-size: var(--fs-xs); font-style: normal; color: #fff; background: rgba(0,0,0,.7); border-radius: 999px; }