:root {
    --hc-point: #8e44ad;
    --hc-gold: #d4af37;
    --hc-bg: #fdfbfd;
    --hc-card: #ffffff;
    --hc-text: #2d3436;
    --hc-dim: #636e72;
    --point-red: #e84393;
}

#hot_homecare_page { background-color: var(--hc-bg); color: var(--hc-text); font-family: 'Noto Sans KR', sans-serif; padding-bottom: 100px; }
.ranking-container { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }

/* 헤더 섹션 */
.hero-section { text-align: center; margin-bottom: 60px; padding: 40px 0; }
.hero-section .kicker { color: var(--hc-point); font-family: 'Montserrat'; font-weight: 800; font-size: 13px; letter-spacing: 4px; display: block; margin-bottom: 15px; }
.hero-section h2 { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 15px; }
.hero-section p { color: var(--hc-dim); font-size: 16px; font-weight: 400; }

/* 지역 필터 */
.sticky-nav { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: center; margin-bottom: 50px; padding: 15px 0; background: rgba(253, 251, 253, 0.9); backdrop-filter: blur(10px); }
.city-tabs { background: #fff; padding: 5px; border-radius: 50px; border: 1px solid #e0d5e0; display: flex; gap: 2px; overflow-x: auto; max-width: 100%; scrollbar-width: none; box-shadow: 0 5px 15px rgba(0,0,0,0.03); -webkit-overflow-scrolling: touch; }
.city-tabs::-webkit-scrollbar { display: none; }
.city-btn { background: transparent; border: none; padding: 10px 22px; color: #888; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 40px; white-space: nowrap; transition: 0.3s; flex-shrink: 0; }
.city-btn.active { background: var(--hc-point); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(142, 68, 173, 0.3); }

/* TOP 1-3 카드 */
.top-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
.premium-card { position: relative; border-radius: 24px; overflow: hidden; background: var(--hc-card); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid #eee; box-shadow: 0 15px 35px rgba(142, 68, 173, 0.05); }
.premium-card:hover { transform: translateY(-12px); border-color: var(--hc-point); box-shadow: 0 25px 50px rgba(142, 68, 173, 0.12); }

.rank-1 { border: 2px solid rgba(142, 68, 173, 0.2); }
.rank-1 .badge-wrap { background: linear-gradient(135deg, var(--hc-point), #a29bfe) !important; color: #fff !important; }

.img-box { width: 100%; aspect-ratio: 4/5; position: relative; overflow: hidden; }
.img-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,255,255,1) 10%, rgba(255,255,255,0.2) 40%, transparent 100%); }

.rank-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; z-index: 2; }
.badge-wrap { position: absolute; top: -25px; left: 30px; background: #fff; color: var(--hc-point); padding: 8px 22px; border-radius: 12px; font-family: 'Montserrat'; font-weight: 900; font-size: 18px; box-shadow: 0 10px 20px rgba(142, 68, 173, 0.15); border: 1px solid var(--hc-point); }
.loc-tag { font-size: 13px; color: var(--hc-point); font-weight: 700; display: block; margin-bottom: 8px; letter-spacing: 1px; }
.shop-name { font-size: 22px; font-weight: 800; margin-bottom: 15px; }

.meta-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f3eff3; padding-top: 15px; }
.score-box { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.score-box i { color: #fdcb6e; }
.score-box span { color: #b2bec3; font-size: 12px; font-weight: 400; }
.price-tag { color: var(--point-red); font-family: 'Montserrat'; font-weight: 800; font-size: 19px; }

/* TOP 4-5 카드 - 숫자 가독성 수정 */
.mid-tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 60px; }
.mid-card { display: flex; background: #fff; border-radius: 20px; overflow: hidden; height: 160px; border: 1px solid #eee; position: relative; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.03); }
.mid-card:hover { border-color: var(--hc-point); }
.mid-card .m-img { width: 160px; }
.mid-card .m-img img { width: 100%; height: 100%; object-fit: cover; }
.mid-card .m-info { padding: 25px; flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ★ 4, 5번 숫자 가독성 핵심 수정 ★ */
.mid-card .m-rank { 
    position: absolute; 
    top: 10px; 
    right: 20px; 
    font-family: 'Montserrat'; 
    font-weight: 900; 
    font-size: 40px; 
    color: var(--hc-point); /* 흐릿한 회색에서 포인트 컬러로 변경 */
    opacity: 0.15; /* 투명도를 높여서 더 잘 보이게 조정 */
    letter-spacing: -2px;
}

/* 6-30위 리스트 */
.list-section { background: #fff; border-radius: 30px; padding: 15px 35px; border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
.list-item { display: grid; grid-template-columns: 60px 80px 1fr 100px 120px; align-items: center; padding: 18px 0; border-bottom: 1px solid #f8f1f8; position: relative; transition: 0.2s; }
.list-item:hover { background: #fdfafd; padding-left: 10px; }
.list-item .l-rank { font-family: 'Montserrat'; font-weight: 700; font-size: 18px; color: #ced6e0; }
.list-item img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.list-item .l-name { font-weight: 700; font-size: 16px; padding-left: 10px; }
.list-item .l-score { text-align: right; font-weight: 800; color: #fdcb6e; }
.list-item .l-price { text-align: right; font-family: 'Montserrat'; font-weight: 800; color: var(--point-red); }

.abs-link { position: absolute; inset: 0; z-index: 5; }
.status-msg { grid-column: 1/-1; text-align: center; padding: 100px 0; color: #b2bec3; }

/* ★ 모바일 최적화 ★ */
@media (max-width: 768px) {
    .ranking-container { padding: 30px 15px; }
    .hero-section { margin-bottom: 30px; padding: 20px 0; }
    .hero-section h2 { font-size: 28px; }
    .hero-section p { font-size: 14px; }

    .top-tier-grid { grid-template-columns: 1fr; gap: 40px; }
    .img-box { aspect-ratio: 16/10; }
    .rank-info { padding: 20px; }
    .badge-wrap { top: -15px; left: 20px; font-size: 16px; padding: 6px 16px; }

    .mid-tier-grid { grid-template-columns: 1fr; gap: 15px; }
    .mid-card { height: auto; flex-direction: column; }
    .mid-card .m-img { width: 100%; height: 180px; }
    .mid-card .m-info { padding: 20px; }
    /* 모바일에서 4, 5번 숫자 더 명확하게 */
    .mid-card .m-rank { top: 10px; font-size: 32px; opacity: 0.2; } 

    .list-section { padding: 10px 20px; border-radius: 20px; }
    .list-item { grid-template-columns: 40px 50px 1fr 60px; }
    .list-item .l-price { display: none; }
    .list-item .l-rank { font-size: 16px; }
    .list-item img { width: 45px; height: 45px; }
    .list-item .l-name { font-size: 14px; }
    .list-item .l-score { font-size: 14px; }
    
    .sticky-nav { padding: 10px 0; margin-bottom: 30px; }
}