/* =============================================================
   achv.me — 사이트 검색 패널 즉시 검색 드롭다운 (.achv-ss)
   theme/rb.basic/tail.php 의 .rb_btm_search_pn 안에서만 쓴다.

   ⚠ 이 규칙이 common.css 가 아니라 별도 파일인 이유
     검색 패널은 게시판을 포함한 **모든 페이지의 tail** 에 있는데 common.css 는
     achv 페이지에서만 <link> 된다. 그렇다고 common.css 를 전역으로 걸 수는 없다 —
     그 안의 `#container_title { display: none; }` (common.css:2209) 이 테마
     head.php 의 페이지 제목 <h2> 를 **사이트 전체에서 숨긴다**. 그래서 드롭다운
     규칙만 떼어 tail 이 한 번 싣는다. 사본을 만들지 말고 이 파일만 고칠 것.

   변수는 common.css 의 --achv-* 를 쓰되, 그 파일이 없는 페이지(게시판 등)에서도
   같게 보이도록 전부 fallback 값을 적는다.
   ============================================================= */

.achv-ss {
    padding: 8px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.achv-ss[hidden] { display: none; }

.achv-ss__group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--achv-text-secondary, #64748b);
}

.achv-ss__count {
    min-width: 18px;
    padding: 0 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    color: var(--achv-primary, #e60200);
    background: var(--achv-primary-light, #fef2f2);
    border-radius: 9px;
}

.achv-ss__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* 터치 타깃 44px 이상 (360px 대응) */
    min-height: 48px;
    padding: 10px 8px;
    border-radius: 8px;
    color: var(--achv-text, #1e293b);
    text-decoration: none;
}

.achv-ss__item:hover,
.achv-ss__item:focus,
.achv-ss__item--active {
    background: var(--achv-surface-alt, #f1f5f9);
    text-decoration: none;
}

.achv-ss__item--active {
    box-shadow: inset 0 0 0 2px var(--achv-primary, #e60200);
}

/* 원형 로고·사진. 이미지가 없으면 같은 크기의 첫 글자 자리(`--empty`)가 대신 선다 —
   있는 행만 들여쓰기가 달라지면 목록이 들쭉날쭉해 보인다. */
.achv-ss__avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--achv-surface-alt, #f1f5f9);
}

.achv-ss__avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    color: var(--achv-text-secondary, #64748b);
}

.achv-ss__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achv-ss__meta {
    flex: 0 0 auto;
    max-width: 45%;
    overflow: hidden;
    font-size: 13px;
    color: var(--achv-text-secondary, #64748b);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achv-ss__empty {
    padding: 18px 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--achv-text-secondary, #64748b);
}

/* 종류별 왼쪽 표식 — 아이콘 없이 색만으로 구분한다 */
.achv-ss__item--leagues { border-left: 3px solid var(--achv-primary, #e60200); }
.achv-ss__item--teams   { border-left: 3px solid var(--achv-secondary, #1d4ed8); }
.achv-ss__item--players { border-left: 3px solid var(--achv-border-hover, #cbd5e1); }

@media all and (max-width: 380px) {
    .achv-ss { padding-left: 8px; padding-right: 8px; }
    .achv-ss__name { font-size: 14px; }
    .achv-ss__meta { max-width: 40%; font-size: 13px; }
}

/* --- PC 헤더 통합검색 안 (#search_box_wrap, 355px 팝오버) ---
   팝오버가 좁고 화면에 떠 있어 하단 패널과 여백·스크롤이 다르다.
   `.ser_ul_pd`(좌우 30px)·`ul.pt20`(위 30px) 자리를 대신하므로 그 리듬에 맞춘다. */
.achv-ss--hd {
    padding: 14px 22px 4px;
    gap: 0;
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.achv-ss--hd .achv-ss__group { padding: 10px 6px 4px; }
.achv-ss--hd .achv-ss__item  { min-height: 44px; padding: 8px 8px; }
.achv-ss--hd .achv-ss__empty { padding: 14px 6px; }

@media all and (max-width: 640px) {
    /* 모바일에서 이 팝오버는 화면 전체 폭(#search_box_wrap 100%)이 된다 */
    .achv-ss--hd { padding-left: 16px; padding-right: 16px; max-height: 50vh; }
}

/* ⚠ 헤더 팝오버 안에서는 테마 규칙이 새어 들어온다 — 반드시 되돌린다.
   `#search_box_wrap` 은 `.gnb_wrap .snb_wrap .qm_wrap` 안에 있어
   `rb.css/style.css:64,66` 의 아이콘 버튼용 규칙이 그대로 걸린다.
     .qm_wrap a    → float:left · width:40px · line-height:23px   (행이 40px 로 찌그러진다)
     .qm_wrap a span → position:absolute · 보라 배경 · 10px 흰 글씨 (이름이 알림 배지처럼 보인다)
   그 선택자가 (0,3,2) 라 클래스만으로는 못 이긴다. 로드 순서에 기대지 않도록
   id 를 물려 (1,2,2) 로 확실히 이긴다. 값은 이 파일 위쪽 `.achv-ss__*` 정의와 같게 둔다. */
#search_box_wrap .achv-ss--hd a.achv-ss__item {
    gap: 10px;
    float: none;
    width: auto;
    margin-top: 0;
    padding: 8px 8px;
    line-height: 1.4;
    display: flex;
    box-sizing: border-box;
}

#search_box_wrap .achv-ss--hd a.achv-ss__item span {
    position: static;
    top: auto;
    left: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    line-height: 1.4;
}

/* 위 되돌림은 아바타의 원형까지 지운다 (같은 `span` 이다). 같은 구체성으로 되살린다 —
   값은 이 파일 위쪽 `.achv-ss__avatar` 정의와 같다. 한쪽만 고치지 말 것. */
#search_box_wrap .achv-ss--hd a.achv-ss__item span.achv-ss__avatar {
    display: flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--achv-surface-alt, #f1f5f9);
    color: var(--achv-text-secondary, #64748b);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

#search_box_wrap .achv-ss--hd a.achv-ss__item span.achv-ss__name {
    font-size: 15px;
    color: var(--achv-text, #1e293b);
}

#search_box_wrap .achv-ss--hd a.achv-ss__item span.achv-ss__meta {
    font-size: 13px;
    color: var(--achv-text-secondary, #64748b);
}