/* TW-26 실시간 랭킹 — 메뉴 맨 위 검색창(롤링 + 전체랭킹 ›) · TOP 5 창. 세 브랜드 공용 (clinic·vellicell layout 이 같이 읽는다). */
.ranking-search{--search-border:#C8C8C8;--search-radius:6px;--ranking-rank-w:16px;display:flex;align-items:center;gap:8px;min-width:0}
.ranking-search:focus{outline:0}
.menu-search{flex:none;padding:12px 16px;border-bottom:1px solid #EFEFEF}
body > .menu-search{max-width:var(--page-wide,1200px);margin-inline:auto}
.ranking-form{position:relative;flex:1;min-width:0;margin:0;border:1px solid var(--search-border);border-radius:var(--search-radius);background:#fff}
.ranking-form input[name=q]{box-sizing:border-box;width:100%;height:44px;padding:0 38px 0 12px;border:0;border-radius:var(--search-radius);background:transparent;font-size:var(--fs-13)}
.ranking-form button[type=submit]{position:absolute;top:0;right:2px;bottom:0;display:grid;place-items:center;width:34px;padding:0;border:0;background:none;color:#777}
.ranking-form button[type=submit] svg{width:20px;height:20px}
/* 롤링: 입력칸 위에 겹쳐 놓는다. 칸이 비어 있고 초점이 없을 때만 보인다 (R2). 링크만 눌린다 — 그 밖을 누르면 입력칸이 눌린다 */
.ranking-roll{position:absolute;inset:0 38px 0 0;display:flex;align-items:center;gap:6px;padding-left:12px;pointer-events:none;font-size:var(--fs-13)}
.ranking-roll ol{flex:1;min-width:0;margin:0;padding:0;list-style:none}
.ranking-roll li{display:block}
.ranking-roll li[hidden]{display:none}
.ranking-roll a{display:flex;align-items:center;gap:6px;pointer-events:auto;color:#1a1a1a;text-decoration:none}
.ranking-roll b{flex:none;width:var(--ranking-rank-w);color:var(--accent);font-weight:600;text-align:center}
.ranking-tag{flex:none;padding:2px 6px;border-radius:3px;background:var(--accent);color:#fff;font-size:var(--fs-12);font-weight:600;line-height:1.4}
.ranking-roll .name,.ranking-top5 .name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-form input[name=q]::placeholder{color:#999}
.ranking-search:has(.ranking-roll) input[name=q]::placeholder{color:transparent}
.ranking-search[data-ranking-typing] .ranking-roll,.ranking-form:focus-within .ranking-roll,.ranking-form:has(input[name=q]:not(:placeholder-shown)) .ranking-roll{display:none}
.ranking-search[data-ranking-typing] input[name=q]::placeholder,.ranking-form:focus-within input[name=q]::placeholder{color:#999}
.ranking-all{flex:none;padding:8px 0;border:0;background:none;color:#535353;font:inherit;font-size:var(--fs-12);white-space:nowrap;cursor:pointer}
/* TOP 5: GNB 와 하단 탭바 사이를 채운다 — 메뉴(.category-dialog)처럼 show() 로 열어 머리 띠·탭바를 가리지 않는다 (V5 3-5 · tobe-2). (‹ 뒤로 · 큰 제목 · 옵션명 한 줄 + 가격 두 줄 · 순위 두 자리). 5줄이 한 화면에, 넘김·점 없음. 가격은 오른쪽에 줄어들지 않고 붙는다 (R3·R7) */
.ranking-dialog{position:fixed;inset:var(--gnb-bottom,var(--gnb-height,56px)) 0 var(--tabbar-height,83px);z-index:20;width:100%;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:auto;overscroll-behavior:contain;color:#1a1a1a;background:#fff;box-sizing:border-box}
.ranking-sheet{max-width:640px;margin:0 auto;padding:12px 16px 32px}
.ranking-head{display:flex;align-items:center;gap:8px;padding:8px 0 16px;border-bottom:2px solid #1a1a1a}
.ranking-head h2{margin:0;font-size:var(--fs-20);font-weight:700;line-height:1.4}
.ranking-back{display:grid;place-items:center;flex:none;width:32px;height:32px;margin-left:-8px;padding:0;border:0;background:none;color:#1a1a1a;font-size:var(--fs-24);line-height:1;cursor:pointer}
/* V5 시안 대조(10-28) home 4: 이름 칸 13.4자 → 약 15자 — 줄 사이 12→8px · 가격 24→22px (순위 번호 칸은 2ch 그대로) */
.ranking-top5{margin:0;padding:0;list-style:none}
.ranking-top5 li{border-bottom:1px solid #EFEFEF}
.ranking-top5 a{display:flex;align-items:center;gap:8px;min-height:78px;color:#1a1a1a;text-decoration:none;font-size:var(--fs-14)}
.ranking-top5 b{flex:none;width:2ch;color:#1a1a1a;font-weight:700;font-size:var(--fs-16);text-align:left}
.ranking-top5 .ranking-price{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;margin-left:auto;font-size:var(--fs-12);white-space:nowrap;text-align:right}
.ranking-top5 .ranking-price del{color:#999}
.ranking-top5 .ranking-price strong{color:var(--accent);font-weight:700;font-size:var(--fs-22);line-height:1.3}
.ranking-go{flex:none;color:#bbb;font-style:normal;font-size:var(--fs-16)}
.ranking-empty{margin:0;padding:48px 0;color:#777;font-size:var(--fs-14);text-align:center}
/* 이벤트 상세에 도착한 옵션 카드 (R10) — 시술 상세 카드(.option-card)는 detail.css(TW-24)가 같은 방식으로 처리한다 */
#content .price-row[id^="option-"]{scroll-margin-top:calc(var(--gnb-height,0px) + 16px)}
.price-row.is-arrived{background:color-mix(in srgb,var(--accent) 12%,#fff);transition:background-color .3s}
@media(prefers-reduced-motion:reduce){.price-row.is-arrived{transition:none}}