@charset "utf-8";

/* 인기검색어 — 번호가 붙은 세로 목록 (2026-07-31 고객 시안 반영)
   이전에는 가로 한 줄 캐러셀이라 10개를 등록해도 2개만 보였다. */
#popular {position:relative; margin:6px 0 0}

/* 제목은 화면에 표시하지 않는다(읽기 도구용) — 2026-07-31 고객 요청으로 숨김 */
#popular h2 {position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden}

/* 테두리 있는 패널 (2026-07-31) — 제목만 숨기고 테두리는 유지 */
#popular .popular_inner {
    width:auto; max-width:320px; height:auto; overflow:visible;
    background:#fff; border:1px solid #e8e3dc; border-radius:10px;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
}
#popular ul {padding:8px 0; margin:0; list-style:none}
#popular ul:after {display:none}

#popular li {
    float:none; display:block; width:auto !important;
    height:auto; line-height:normal; padding:0; border:0;
}
#popular li a {
    display:flex; align-items:center; gap:11px;
    padding:7px 16px; color:#3a352f; font-size:13.5px; line-height:1.45;
    text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:background .15s, color .15s;
}
#popular li a:hover {background:#faf7f3; color:#8b5a3c; text-decoration:none}

/* 순위 번호 — 1~3위만 강조해 위계를 준다 */
#popular li a .pp_rank {
    flex:0 0 auto;
    min-width:19px; height:19px; line-height:19px;
    padding:0 4px;
    background:#f0ece6; color:#a1968a;
    font-size:11px; font-weight:700; text-align:center;
    border-radius:4px;
    transition:background .15s;
}
#popular li:nth-child(1) a .pp_rank,
#popular li:nth-child(2) a .pp_rank,
#popular li:nth-child(3) a .pp_rank {background:#8b5a3c; color:#fff}
#popular li a:hover .pp_rank {background:#6f462d; color:#fff}

/* 캐러셀 화살표는 사용하지 않음 */
.popular_inner .popular_btns {display:none !important}

@media all and (max-width:768px){
    #popular {margin:12px 0 0}
    #popular .popular_inner {max-width:100%}
    #popular li a {padding:8px 14px; font-size:13px}
}