/* ============================================================
   뉴스 탭 + 역대 명예의 전당 · 2026-09-18
   대상 : Views/Home/ProductBoxOpenList.cshtml
   구성 : 상단 세그먼트 탭 [실시간 소식 / 역대 명예의 전당]
          명예의 전당 = 오렌지 히어로 배너 + 큰 상품사진 + 순위 뱃지 카드
   기준 : SE(375) 고정 px · 탭(.rp-nwtabs)은 .renewal-ship / .bx-stats 두 스코프에서 사용 (2026-09-21 박스통계 추가)
   ============================================================ */

/* ---------- 탭 (세그먼트) ---------- */
.renewal-ship .rp-nwtabs,
.bx-stats .rp-nwtabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(93, 78, 61, .06), 0 .5px 1px rgba(93, 78, 61, .04);
}
.renewal-ship .rp-nwtab,
.bx-stats .rp-nwtab {
    flex: 1 1 0;
    height: 36px;
    line-height: 36px;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #8A8278;
    text-decoration: none !important;
    white-space: nowrap;
    transition: .14s;
}
.renewal-ship .rp-nwtab:hover,
.bx-stats .rp-nwtab:hover { color: #4A423B; }
.renewal-ship .rp-nwtab.active,
.bx-stats .rp-nwtab.active {
    background: #FFF5EC;
    color: #E56610;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #FFD3B0;
}

/* ---------- 명예의 전당 히어로 ----------
   배너 이미지에 제목·부제가 이미 그려져 있고, 비워둔 알약 자리에 기준시각만 얹는다.

   · 이미지는 <img> 로 넣어 원본 비율 그대로 표시한다 → 어떤 크기로 교체해도 잘리지 않음
   · 기준시각 위치는 '이미지 안에서의 비율' 로 지정
       현재 배너(1200x359) 알약 : x 296~663 / y 250~305  → 중심 (40.0%, 77.3%)
   · 배너를 교체해서 알약 자리가 달라지면 아래 left / top 두 값만 다시 맞추면 된다.
   · 파일 : wwwroot/images/event/hall_hero_v2.png                                  */
.renewal-ship .rp-hof-hero {
    position: relative;
    margin-bottom: 8px;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    background: #E8620C;
    box-shadow: 0 2px 10px rgba(224, 90, 0, .18);
}
.renewal-ship .rp-hof-hero-img {
    display: block;
    width: 100%;
    height: auto;
}
/* 기준시각 : 이미지의 빈 알약 중심에 맞춤 */
.renewal-ship .rp-hof-hero-s {
    position: absolute;
    left: 40%;
    top: 77.3%;
    transform: translate(-50%, -50%);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    letter-spacing: -.02em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(150, 60, 0, .35);
}
/* 이미지 안의 문구를 읽기 도구·검색에 남기기 위한 숨김 텍스트 */
.renewal-ship .rp-hof-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* ---------- 순위 카드 ---------- */
.renewal-ship .rp-hof {
    position: relative;
    display: block;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(93, 78, 61, .06), 0 .5px 1px rgba(93, 78, 61, .04);
    color: inherit !important;
    text-decoration: none !important;
}
.renewal-ship .rp-hof:last-child { margin-bottom: 0; }
/* 1위만 살짝 금색 테두리
   inset box-shadow 는 흰 배경인 이미지 칸(.rp-hof-th)에 가려 아래쪽만 보이므로,
   카드 전체를 덮는 레이어로 그린다. (카드 크기는 그대로) */
.renewal-ship .rp-hof.is-top {
    box-shadow: 0 2px 10px rgba(156, 122, 60, .16);
}
.renewal-ship .rp-hof.is-top::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 3;
    border: 1.5px solid #D3AE4B;
    border-radius: 14px;
    pointer-events: none;
}

.renewal-ship .rp-hof-th {
    position: relative;
    width: 100%;
    height: 196px;
    background: #fff;
    border-bottom: 1px solid #F4EFE6;
    display: grid;
    place-items: center;
}
.renewal-ship .rp-hof-th .rp-hof-img { max-width: 78%; max-height: 168px; object-fit: contain; }
.renewal-ship .rp-hof-th .water-mark { position: absolute; right: 8px; bottom: 8px; width: 38px !important; height: auto !important; opacity: .7; }

.renewal-ship .rp-hof-rank {
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    min-width: 38px; height: 34px;
    padding: 0 11px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0 0 12px 0;
    background: #8A8278;
    color: #fff;
    font-size: 15px; font-weight: 700;
    letter-spacing: -.02em;
}
.renewal-ship .rp-hof-rank.rk-1 { background: linear-gradient(135deg, #C9A63C 0%, #9C7A3C 100%); }   /* 1위 : 골드 */
.renewal-ship .rp-hof-rank.rk-2 { background: #F9781A; }   /* 2·3위 : 브랜드 오렌지 */
.renewal-ship .rp-hof-rank.rk-3 { background: #F9781A; }

.renewal-ship .rp-hof-b { padding: 10px 12px 12px; }
.renewal-ship .rp-hof-u {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 500; color: #8A8278;
}
.renewal-ship .rp-hof-u img { width: 16px; height: 16px; object-fit: contain; }
.renewal-ship .rp-hof-n {
    margin-top: 2px;
    font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #1F1815;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: keep-all;
}
.renewal-ship .rp-hof-p {
    margin-top: 5px;
    display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
}
.renewal-ship .rp-hof-p b { font-size: 16px; font-weight: 700; color: #E56610; }
.renewal-ship .rp-hof-p span { font-size: 11px; font-weight: 500; color: #8A8278; white-space: nowrap; }