/* =========================================================================
 *  회원 랭킹 페이지 전용 스타일  (Nariya-A / Bootstrap 4 호환)
 * -------------------------------------------------------------------------
 *  - 색/라운드/그림자/숫자폰트는 skin/board/totolist/tokens.css 의 var(--*) 만 사용.
 *    토큰 스코프는 :root 가 아닌 #nt_body 이며, .rk-wrap 은 head.php 가 여는
 *    <main id="nt_body"> 내부에서 출력되므로 정상 도달한다.
 *    (JS로 서브메뉴 위로 옮겨지는 .board-list-banner 도 같은 <main> 안이라 동일)
 *    로드는 ranking.php 에서 add_stylesheet order -1 로 가장 먼저.
 *  - 하드코딩 hex 예외(DESIGN_SYSTEM §7.4)만 리터럴 유지:
 *    배너의 컬러 표면 위 텍스트(#fff), rgba(255,255,255,…) 오버레이 층, 의도된 그라디언트.
 *  - 순위 목록은 게시판(.fb-row) 미러. 목록 행(.rk-list-item)과 내 순위 행(.rk-my-row)이
 *    .rk-col-rank / .rk-col-member / .rk-col-score 열과 행 기하를 공유하므로
 *    한쪽만 고치면 두 영역의 열 축이 어긋난다.
 *  - 컴포넌트는 .rk- 프리픽스로 격리. 테마/스킨에 영향 없음.
 *  - .d-none 은 Bootstrap4(head.sub.php) 가 제공한다. 여기서 재정의하지 말 것.
 * ========================================================================= */

/* 로컬 브릿지 — 행 hover 표면. 대응 전역 토큰이 없어 free-community 와 동일 값으로 복원한다
   (skin/board/free-community/style.css:14 --fb-hover-lift, DESIGN_SYSTEM §3).
   ⚠ 반드시 #nt_body 스코프. :root 에 두면 선언 지점에서 치환돼 전역 크롬까지 샌다. */
#nt_body {
    --rk-hover: #FAFBFC;
    /* 기간 칩 채움 — 게시판 분류탭(#bo_cate)과 같은 값.
       정본: skin/board/free-community/list.css:25 --fb-hover. 전역 토큰에 대응값 없음. */
    --rk-chip-fill: #f2f4f6;

    /* 상단 서브메뉴 폭을 본문에 맞춘다.
       .na-top-sidemenu 를 직접 재정의하는 것은 §7.6 위반(전 보드 공용) —
       공통 레이어(custom-main.css)가 마련해 둔 --na-content-w 를 선언하는 것이 정식 방법이다.
       값은 "보이는 카드의 border-box 폭" = .rk-panel 실폭 = .rk-wrap 의 900px
       (PC 에서 .rk-wrap 은 padding 0 이라 max-width 가 곧 카드 폭).
       ⚠ .rk-wrap / .board-list-banner 의 max-width 를 바꾸면 이 값도 함께 바꿀 것. */
    --na-content-w: 900px;
}

/* §9.2: 스킨 래퍼는 상하 패딩을 추가하지 않는다 — 테마 컨테이너(nt-container py-3 py-sm-4)에 위임.
   상단 간격은 .na-top-sidemenu 의 margin-bottom:16px 가 이미 담당한다
   (여기서 padding-top 을 또 주면 16+16=32px 로 벌어진다). */
.rk-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* =========================================================================
 *  흰 카드 패널 — 게시판 #bo_list_wrap.fb-wrap 미러
 *  탭·서브탭·기간칩·결과영역을 한 장으로 감싼다.
 *  §9.2: 래퍼 패딩 0 + 내부 섹션 좌우 20px 고정(가변 여백 금지) / PC 만 테두리
 * ========================================================================= */
.rk-panel {
    background: var(--card);
    border: none;
    border-radius: var(--r-10);
    padding: 0;
    box-shadow: none;
    overflow: hidden;
}
@media (min-width: 769px) {
    .rk-panel { border: 1px solid var(--line); }
}
/* 구 .rk-panel{border-radius:--r-10} 제거 — 기본값이 2026-08-16 에 --r-10 이 되어 중복 선언이었다 */
/* ⚠ 모바일(≤575px) 규칙은 여기 두지 않는다 — 파일 맨 아래 「모바일 목록 면 full-bleed」 블록에 있다.
   이유: .rk-tabs(:81) · .rk-periods(:122) · .rk-result(:430) · .rk-list-item(:363) 의 기본 선언이
   전부 이 지점보다 **뒤**에 있고, 그 중 여럿이 padding 축약형이다. 미디어쿼리는 특이도를 올리지
   않으므로 여기에 적으면 뒤 선언에 조용히 덮인다 — 2026-08-17 이전 이 자리의 14px 인셋이
   실제로는 한 번도 적용되지 않고 있었다(실측 좌측선 32px). 되돌리지 말 것. */

/* ---------- 탭 (메인) ---------- */
.rk-tabs {
    display: flex;
    gap: 4px 18px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
    padding: 6px 20px 0;   /* §9.2 좌우 20px 고정 */
}
/* 탭 4개 이상이 되어도 모바일에서 자연스럽게 wrap */
.rk-tabs .rk-tab { white-space: nowrap; }
.rk-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 10px 2px 12px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    /* 비활성 탭은 상단 서브메뉴 네비(.na-top-sidemenu .me-a — custom-main.css:3007)와 같은 톤이다.
       바로 위에 붙어 있는 두 줄짜리 메뉴라 색이 갈리면 계단처럼 읽힌다.
       중성 램프의 마지막 단계(--muted-2)보다 한 단계 더 물러난 값으로, 새 토큰/리터럴 없이 파생한다.
       ⚠ 아래 두 줄은 한 규칙 안의 표준 폴백 관용구다(덧대기 아님) —
         앞줄을 지우면 color-mix 미지원 브라우저에서 색이 아예 안 잡힌다. 정본은 네비 쪽 주석. */
    color: var(--muted-2);
    color: color-mix(in srgb, var(--muted-2) 85%, var(--card));
    cursor: pointer;
    position: relative;
    transition: color .15s;
}
.rk-tab:hover { color: var(--body); }
.rk-tab.is-active {
    color: var(--ink);
}
.rk-tab.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}
/* 전환(exchange) 탭은 브랜드 블루와 구분되도록 최강조 잉크 톤 */
.rk-tab-exchange.is-active { color: var(--ink); }
.rk-tab-exchange.is-active::after { background: var(--ink); }

/* ---------- 필터 행 (활동 분류 + 기간) ---------- */
.rk-periods {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    padding: 0 20px;   /* §9.2 좌우 20px 고정 */
    flex-wrap: wrap;
}
/* 두 칩 그룹(분류 / 기간) — 같은 규칙을 공유한다 */
.rk-periods-chips,
.rk-subtabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* 게시판 분류탭(#bo_cate) 미러 — 브랜드 블루가 아니라 회색/검정 톤.
   기본=회색 채움(보더 없음) / hover=한 단계 진한 회색 / 활성=잉크 채움 + 흰 글씨.
   활동 분류(.rk-subtab)도 같은 칩을 쓴다 — 한 줄에 두 그룹이 나란히 서므로 언어가 갈리면 안 된다. */
.rk-chip,
.rk-subtab {
    appearance: none;
    border: none;
    background: var(--rk-chip-fill);
    color: var(--body);
    border-radius: var(--r-6);   /* pill 아님 — 끝만 살짝 둥근 카드형 */
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
.rk-chip:hover,
.rk-subtab:hover {
    background: var(--line);
    color: var(--ink);
}
.rk-chip.is-active,
.rk-subtab.is-active {
    background: var(--ink);
    color: #fff;              /* 잉크 표면 위 텍스트 — §7.4 예외 */
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(25,31,40,.18);
}

/* ---------- 활동 분류: 모바일 셀렉트 ----------
   좁은 화면에서 칩 3개가 기간 칩과 같은 줄을 다투므로 네이티브 <select> 로 접는다.
   커스텀 드롭다운 대신 네이티브를 쓰는 이유: OS 피커라 터치 조작·접근성이 확실하고
   외부 클릭 닫기·z-index 처리가 필요 없다. 기본은 숨김, ≤575px 에서만 노출. */
.rk-subselect {
    display: none;
    position: relative;
}
.rk-subselect::after {          /* 캐럿 — appearance:none 으로 지워진 기본 화살표 대체 */
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--body);
    pointer-events: none;
}
/* 여는 버튼 — 기간 칩과 같은 모양 */
.rk-subselect-btn {
    appearance: none;
    border: none;
    background: var(--rk-chip-fill);
    color: var(--body);
    border-radius: var(--r-6);
    padding: 6px 30px 6px 14px;   /* 우측은 캐럿 자리 */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}
/* 포커스 링 — 브라우저 기본 아웃라인(굵은 검정) 대신 tokens.css 의 필드 포커스 링 사용.
   outline 을 지우기만 하면 키보드 접근성이 깨지므로 반드시 대체 링을 준다. */
.rk-subselect-btn:focus-visible,
.rk-subopt:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--field-focus-ring);
}

/* 펼침 목록 — 버튼 바로 아래 붙는다.
   .rk-panel 이 overflow:hidden 이지만 이 메뉴는 필터 행 아래(목록 위)로 열려
   패널 안쪽에 머무르므로 잘리지 않는다. */
.rk-subselect-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 132px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    box-shadow: var(--sh-md);
}
.rk-subselect.is-open .rk-subselect-menu { display: block; }
.rk-subopt {
    appearance: none;
    border: none;
    background: transparent;
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: var(--r-6);
    font-size: 13px;
    font-weight: 500;
    color: var(--body);
    cursor: pointer;
    white-space: nowrap;
}
.rk-subopt:hover { background: var(--rk-hover); }
/* 체크 자리를 항상 비워둬 선택 여부와 무관하게 라벨이 같은 x 에서 시작한다 */
.rk-subopt::before {
    content: '';
    display: inline-block;
    width: 15px;
}
/* 선택 항목은 검정(--ink) — 기간 칩 활성색과 같은 언어를 쓴다(브랜드 블루 아님) */
.rk-subopt.is-active {
    color: var(--ink);
    font-weight: 700;
}
.rk-subopt.is-active::before { content: '✓'; }
/* 모바일 전환: 칩 3개 → 셀렉트 하나.
   ⚠ 이 블록은 반드시 위의 .rk-subtabs(display:flex) / .rk-subselect(display:none)
      기본 정의보다 "뒤"에 있어야 한다. 특이도가 같아 순서로 승부가 나므로,
      파일 앞쪽 미디어쿼리에 두면 기본값에 덮여 아무 효과가 없다(실제로 그랬다).
   .d-none 은 Bootstrap 이 !important 라 활동 탭이 아닐 때는 셀렉트도 정상적으로 숨는다. */
@media (max-width: 575px) {
    .rk-subtabs   { display: none; }
    .rk-subselect { display: block; }
}

/* =========================================================================
 *  내 순위 — 목록 행과 같은 열을 쓰고 배경(회색 채움)으로만 강조
 *  (별도 카드 레이아웃을 두면 열 축이 아래 목록과 어긋나 따로 노는 요소가 된다)
 * ========================================================================= */
/* "내 순위" 라벨은 두지 않는다 — 본인 닉네임이 찍히는 행이라 라벨이 중복이다. */
.rk-my-row {
    background: var(--field-bg);
    border-radius: var(--r-10);
    margin-bottom: 18px;
}
/* 내 행은 순위 숫자를 항상 브랜드 블루로 (목록의 1~3위 규칙과 무관하게 "나" 표시) */
.rk-my-row .rk-list-rank { color: var(--brand); }
.rk-my-row .rk-col-score {
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
}
/* 점수 단위(EXP/포인트/개/일/원) — 헤더 줄이 없으므로 숫자 옆에 직접 붙여 기준을 알린다.
   내 순위 행과 목록 행 양쪽에서 같은 클래스를 쓴다.
   숫자가 아니므로 Oxanium(--font-num)을 상속받지 않게 본문 폰트로 되돌리고 한 단계 낮은 톤. */
.rk-unit {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--sub);
    margin-left: 3px;
}

/* =========================================================================
 *  전체 순위 리스트
 * ========================================================================= */
/* 열 폭 — 세 칸 모두 flex + align-items:center 로 세워, 레벨아이콘(28px)이 들어가도
   순위 숫자·닉네임·점수가 행 높이 안에서 같은 중앙선에 놓이게 한다. */
/* 순위는 좌측 정렬 — 점수가 우측 끝(flex-end) 정렬이라, 순위를 칸 중앙에 두면
   좌측 여백만 (칸너비-글자)/2 만큼 더 생겨 카드가 삐뚤어 보인다.
   좌측 정렬하면 양쪽 다 "결과영역 20px + 행 12px = 32px" 로 대칭이 된다.
   칸 너비는 고정하지 않고 내용에 맞춘다(flex-basis:auto + min-width).
   고정폭(56px/36px)이면 한 자리 순위 뒤에 빈칸이 그대로 남아 닉네임이 멀어 보였다.
   min-width 20px 는 두 자리(10~99, 목록의 대부분)를 담는 값이라
   닉네임 시작점 변동은 20→25px(세 자리) 정도로만 남는다. */
.rk-col-rank   { flex: 0 0 auto; min-width: 20px; display: flex; align-items: center; justify-content: flex-start; }
.rk-col-member { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; line-height: 1; }
/* 92px → 110px: 숫자 뒤에 단위(EXP/포인트/개/일/원)가 붙으므로 폭을 넓힌다 */
.rk-col-score  { flex: 0 0 110px; display: flex; align-items: center; justify-content: flex-end; }

.rk-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 게시판 행(.fb-row) 미러 — 개별 카드가 아니라 구분선으로 나뉜 리스트 행.
   패널이 이미 흰 면이므로 행에 면/보더/그림자를 주지 않는다(카드 안 카드 금지). */
/* 행 기하(패딩·gap)는 목록 행과 내 순위 행이 한 규칙을 공유한다.
   따로 쓰면 열 축이 미세하게 어긋나 "내 행"이 목록과 따로 놀게 된다. */
.rk-list-item,
.rk-my-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
}
.rk-list-item {
    border-bottom: 1px solid var(--line-soft);
    transition: background .15s;
}
/* 헤더 줄을 없앤 뒤 1위 위쪽이 열려 보여 목록 시작선을 준다. 행 사이 구분선과 같은 톤.
   .rk-empty 는 .rk-list-item 이 아니라 데이터가 없을 땐 선이 생기지 않는다. */
.rk-list-item:first-child { border-top: 1px solid var(--line-soft); }
.rk-list-item:last-child { border-bottom: none; }
.rk-list-item:hover { background: var(--rk-hover); }
/* 4위 이하는 한 톤 낮춘 중성색(--body). 1~3위(.is-top)만 브랜드 블루 강조. */
.rk-list-rank {
    font-family: var(--font-num);
    color: var(--body);
    font-size: 14px;
    font-weight: 800;
}
.rk-list-item.is-top .rk-list-rank { color: var(--brand); }
/* 닉네임은 프로필 링크(<a>) — flex 로 세워 레벨아이콘과 텍스트를 수직 중앙에 맞춘다.
   (자유게시판 .fb-col-author 와 동일 방식: 박스는 flex 중앙, SVG 알약 치우침은 lv-badge.css 가 -13% 로 보정)
   말줄임은 flex 아이템에 직접 걸 수 없으므로 텍스트를 .rk-list-nickname 으로 감쌌다. */
.rk-list-nick {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--body);   /* --ink 에서 한 톤 낮춤 */
    text-decoration: none;
    line-height: 1;
}
.rk-list-nickname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rk-list-nick:hover { color: var(--brand); }
/* 점수 셀은 데이터 행에만 숫자폰트 — 헤더는 단위 라벨(텍스트)이라 제외.
   순위 숫자와 같은 티어링: 4위 이하는 한 톤 낮추고 1~3위만 --ink 유지. */
.rk-list-item .rk-col-score {
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 800;
    color: var(--body);
}
.rk-list-item.is-top .rk-col-score { color: var(--ink); }
.rk-empty {
    text-align: center;
    color: var(--muted);
    padding: 36px 0;
    font-size: 14px;
}

/* =========================================================================
 *  로딩 상태
 * ========================================================================= */
/* 결과 영역 — 패널 안쪽 섹션이므로 좌우 20px 을 여기서 담당 (§9.2).
   하단 패딩은 두지 않는다: 마지막 행의 자체 패딩(12px)이 여백 역할을 하고,
   그 아래는 테마 컨테이너(py-3/py-sm-4)가 담당한다. 게시판 .fb-post-list 와 동일. */
.rk-result {
    padding: 0 20px;
}
.rk-result.is-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s;
}

/* =========================================================================
 *  목록 하단 집계 안내
 * ========================================================================= */
/* DESIGN_SYSTEM §9.5 는 하단 안내 "섹션"(.sbc-cl__guidebox 계열)에 카드 면을 주지 말라고
   규정한다 — 흰 카드가 위 목록 카드와 경쟁하기 때문이다. 여기는 그 형태가 아니라 같은 문서가
   따로 규정한 **안내 텍스트 박스**(.sbc-cl__guidebox-note / 상세 .vd-notice)다:
   중립 회색 채움만 쓰고 보더는 두지 않으며, 카드가 아니라 텍스트 박스라 라운드는 한 층 작은 --r-6.
   (같은 페이지의 .rk-my-row 는 --r-10 인데, 그건 텍스트 박스가 아니라 데이터 행이라 층이 다르다)
   좌우 20px 은 .rk-result 와 같은 값으로 목록과 좌측 선을 맞춘 것이다. */
.rk-note {
    margin: 18px 20px 20px;
    padding: 14px 16px;
    border-radius: var(--r-6);
    background: var(--field-bg);
}
.rk-note-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.rk-note-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 불릿은 ::before 점으로 — list-style 을 쓰면 두 줄 이상일 때 들여쓰기가 어긋난다.
   word-break:keep-all 은 한글 단어가 줄 끝에서 쪼개지지 않게(업체목록 안내와 동일). */
/* 13.5px 은 사이트의 안내문 표준 크기다 — 상세 .vd-notice-text · .board-login-notice(§9.4)와 동일. */
.rk-note-list li {
    position: relative;
    padding-left: 11px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
    word-break: keep-all;
}
.rk-note-list li + li { margin-top: 5px; }
.rk-note-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted-2);
}
.rk-note-list b { font-weight: 600; color: var(--body); }
/* 안내문 안의 숫자만 Oxanium — 이 페이지의 .rk-col-score(숫자) / .rk-unit(단위) 처리와 같은 방식이다.
   ⚠ 한글이 섞인 문장이라 요소 전체에 걸면 안 된다(DESIGN_SYSTEM §3 "값이 숫자인 칸만").
     Oxanium 은 한글 글리프가 없어 구절 전체가 Paperozi 폴백으로 갈리므로, 숫자만 감싼다. */
.rk-note-num { font-family: var(--font-num); }
/* 본문 아래 한 단계 낮춘 보조 줄 — 업체목록 .sbc-cl__guidebox-sub(상세 .vd-cat-sub) 와 같은 규약.
   크기·톤을 한 칸씩만 내린다(13.5px/--muted → 12.5px/--muted-2). */
.rk-note-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--muted-2);
}

/* =========================================================================
 *  모바일 반응형 (360px ~)
 * ========================================================================= */
@media (max-width: 480px) {
    .rk-tab { font-size: 14px; padding: 9px 2px 11px; }
    .rk-tabs { gap: 14px; }

    /* ⚠ padding 축약형 금지 — 위 ≤575px 블록의 좌우 14px(full-bleed 인셋)을 지우게 된다.
       이 폭에서 줄이는 건 세로값뿐이다. 좌측 시작선은 화면 전 구간에서 14px 로 고정. */
    .rk-list-item,
    .rk-my-row { padding-top: 9px; padding-bottom: 9px; gap: 8px; }
    .rk-my-row .rk-col-score { font-size: 13px; }
    /* 열 폭 축소 */
    .rk-col-rank  { min-width: 18px; }
    .rk-col-score { flex: 0 0 92px; }
    .rk-list-rank { font-size: 13px; }
    .rk-list-nick  { font-size: 13px; }
    .rk-list-item .rk-col-score { font-size: 13px; }
}

/* ============================================
   상단 배너 (.board-list-banner 공통 형태 — DESIGN_SYSTEM §9.1)
   ============================================ */
/* 문구는 호출 PHP 상단 $_banner 가 소유한다 (마크업 하드코딩 금지).
   ⚠ 클래스명은 공통 규약(.board-list-banner__*)이지만 값은 이 페이지 전용 —
      다른 화면과 자동 공유되지 않는다. (DESIGN_SYSTEM §9.1) */
/* 서브메뉴 위로 이동(JS) — .rk-wrap 밖이라 자체 폭 필요. .rk-wrap 과 항상 같은 값으로 유지할 것 */
.board-list-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 32px;
	background: linear-gradient(135deg, #3182f6 0%, #1b64da 60%, #0f4baf 100%);
	border-radius: var(--r-10,10px);
	overflow: hidden;
	min-height: 150px;
	/* 상단 배너 규정 — DESIGN_SYSTEM §9 */
	border: none;
	max-width: 900px;
	margin: 0 auto 16px;
}
.board-list-banner__deco { position: absolute; border-radius: 50%; opacity: 0.1; background: #fff; }
.board-list-banner__deco--1 { width: 180px; height: 180px; top: -60px; right: 60px; }
.board-list-banner__deco--2 { width: 100px; height: 100px; bottom: -30px; right: -10px; }
.board-list-banner__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.board-list-banner__title { font-size: clamp(20px, 3.4vw, 30px); font-weight: 700; letter-spacing: -.04em; line-height: 1.3; color: #fff; margin: 0; }
.board-list-banner__desc { font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,0.85); margin: 0; letter-spacing: -0.2px; line-height: 1.5; }
.board-list-banner__icon {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; min-width: 52px;
	background: rgba(255,255,255,0.15); border-radius: var(--r-12); color: #fff; font-size: 24px; backdrop-filter: blur(4px);
}
@media (max-width: 575px) {
	.board-list-banner { padding: 22px 20px; min-height: 85px; }
	.board-list-banner__title { font-size: clamp(14px, 4.6vw, 17px); letter-spacing: -.6px; line-height: 1.3; }
	.board-list-banner__icon { width: 44px; height: 44px; min-width: 44px; font-size: 20px; }
}

/* =========================================================================
 *  모바일 목록 면 full-bleed (≤575px) [DESIGN_SYSTEM §9.2, 2026-08-17 합류]
 *  -----------------------------------------------------------------------
 *  #nt_body 가 이 폭에서만 좌우 --page-gutter:12px 을 갖는데(custom-sidebar.css ≤575px 블록),
 *  흰 면이 그 안에 있으면 면과 행 hover 틴트가 화면 끝까지 못 간다. 바로 위 상단 서브메뉴는
 *  이미 화면 끝까지 가는 스트립이라(custom-main.css ≤575px) 목록만 안쪽에 갇혀 보였다.
 *  → 면을 음수 마진으로 빼내고, 인셋은 「행」이 갖는다. 좌측 시작선을 화면 기준 14px 로.
 *
 *  ⚠ **이 블록은 반드시 파일 맨 아래에 둔다.** .rk-tabs · .rk-periods · .rk-result · .rk-list ·
 *    .rk-list-item 의 기본 선언이 모두 위쪽에 있고 여럿이 padding 축약형이다. 미디어쿼리는
 *    특이도를 올리지 않으므로 위에 두면 조용히 덮인다(구 .rk-panel 블록 자리의 14px 이
 *    그래서 한 번도 적용되지 않았다). 규칙을 추가할 때도 이 순서를 깨지 말 것.
 *  ⚠ 575px 이어야 한다 — 이 폭에서만 .nt-container 가 px-0(head.php:222)이라 거터가 한 겹이고
 *    음수 마진 한 값으로 정확히 상쇄된다. 576~767px 은 px-sm-4(24px)가 겹쳐 2층이 된다.
 *  ⚠ 거터 숫자(12px)를 복사해 두지 말 것 — 소유자는 custom-sidebar.css 다. 변수로 참조한다.
 *  정본 미러: theme/Nariya-A/skin/review/style.css ≤575px (.rv-panel → .rv-list → .rv-card).
 * ========================================================================= */
@media (max-width: 575px) {
	/* 패널은 투명 껍데기가 된다 — 흰 면은 아래 .rk-list 가 갖는다.
	   탭·기간칩은 면 밖(페이지 배경 위)으로 나온다(§9.2 「흰 면의 주인은 목록이다」).
	   ⚠ overflow 를 반드시 풀어야 한다(기본값 hidden) — 안 풀면 자식의 음수 마진이 잘린다. */
	.rk-panel {
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	/* 껍데기 안 섹션들의 좌측 시작선 = 거터 12 + 2 = 화면 기준 14px.
	   ⚠ 탭·기간칩·목록이 반드시 같은 선이어야 한다 — 하나만 어긋나면 좌측이 계단이 된다.
	   ⚠ 롱핸드로만 — 기본 규칙의 세로값(.rk-tabs{padding:6px 20px 0})을 지우면 안 된다. */
	/* 상단 0 — 토토 목록(.sbc-cl__panel ≤575px)과 동일. 카드 위 여백은 .na-top-sidemenu 의 margin-bottom 16px 단독 */
	.rk-tabs    { padding-left: 2px; padding-right: 2px; padding-top: 0; }
	.rk-periods { padding-left: 2px; padding-right: 2px; }
	.rk-result  { padding-left: 2px; padding-right: 2px; }

	/* 목록이 흰 면을 갖고 거터 밖으로 나간다.
	   시작선은 .rk-list-item:first-child 의 border-top 이 이미 긋는다. */
	.rk-list {
		margin-left: calc(-1 * var(--page-gutter, 12px));
		margin-right: calc(-1 * var(--page-gutter, 12px));
		background: var(--card);
	}

	/* 내 순위 행도 같은 선에 세운다 — 목록과 어긋나면 "나"만 안쪽으로 들어가 따로 논다.
	   회색 채움은 유지(강조 수단)하되, 화면 끝까지 가는 띠가 되므로 라운드는 뗀다. */
	.rk-my-row {
		margin-left: calc(-1 * var(--page-gutter, 12px));
		margin-right: calc(-1 * var(--page-gutter, 12px));
		border-radius: 0;
	}

	/* ⚠ 인셋은 컨테이너(.rk-list)가 아니라 행이 갖는다 — 컨테이너에 주면 행 배경·구분선이 잘린다.
	   세로값은 기본 규칙(12px)과 ≤480px 블록(9px)이 계속 담당하므로 좌우 롱핸드만 쓴다. */
	.rk-list-item,
	.rk-my-row {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* 끝선 — 면이 화면 끝까지 가면 경계가 사라지므로 마지막 행이 목록을 닫는다(§9.2).
	   PC 는 패널 카드의 아래 모서리가 닫지만 여기선 그 카드가 투명해졌다.
	   기본 규칙의 :last-child{border-bottom:none} 을 이 폭에서만 되돌리는 것. */
	.rk-list-item:last-child { border-bottom: 1px solid var(--line-soft); }

	/* 하단 안내도 .rk-my-row 와 같은 처리 — 회색 채움은 유지(그게 이 박스의 정체다)하되
	   화면 끝까지 가는 띠가 되므로 라운드는 뗀다.
	   ⚠ 인셋 박스로 남겨두면 투명해진 패널 뒤 페이지 배경 위에 회색 박스가 떠서
	     바로 위 목록 흰 면과 분리돼 보인다. 목록을 아래에서 닫는 띠가 되어야 한다.
	   ⚠ 위쪽 margin 은 0 — 목록 마지막 행의 끝선이 곧 이 띠의 경계다(선 2줄 금지, §9.5). */
	.rk-note {
		margin: 0 calc(-1 * var(--page-gutter, 12px));
		border-radius: 0;
		padding-left: 14px;
		padding-right: 14px;
	}
}