/* ==========================================================================
   랭크나우 컬러 테마 (site.css 다음에 읽혀 색·카드 스타일을 덮어씁니다)
   분야별 색: 사이트 / K-POP / 트렌드 / 교육 / 창업 / 기업
   ========================================================================== */

:root{
  --ink:#14161d;
  --muted:#5f6878;
  --line:#e4e7f0;
  --page:#f4f5fa;
  --surface:#ffffff;

  --c-site:#1e5bff;
  --c-kpop:#e23c87;
  --c-trend:#ff6a13;
  --c-edu:#00a06a;
  --c-startup:#d79400;
  --c-biz:#6d48e5;

  --cat:var(--c-site);
  --cat-tint:rgba(30,91,255,.08);
  --cat-tint-strong:rgba(30,91,255,.14);
}

[data-cat="site"]{ --cat:var(--c-site); --cat-tint:rgba(30,91,255,.08); --cat-tint-strong:rgba(30,91,255,.15); }
[data-cat="kpop"]{ --cat:var(--c-kpop); --cat-tint:rgba(226,60,135,.09); --cat-tint-strong:rgba(226,60,135,.16); }
[data-cat="trend"]{ --cat:var(--c-trend); --cat-tint:rgba(255,106,19,.10); --cat-tint-strong:rgba(255,106,19,.18); }
[data-cat="edu"]{ --cat:var(--c-edu); --cat-tint:rgba(0,160,106,.10); --cat-tint-strong:rgba(0,160,106,.17); }
[data-cat="startup"]{ --cat:var(--c-startup); --cat-tint:rgba(215,148,0,.12); --cat-tint-strong:rgba(215,148,0,.20); }
[data-cat="biz"]{ --cat:var(--c-biz); --cat-tint:rgba(109,72,229,.09); --cat-tint-strong:rgba(109,72,229,.16); }

html[data-theme="dark"]{
  --ink:#eef1f7;
  --muted:#9aa4b4;
  --line:#28303c;
  --page:#0e1116;
  --surface:#161b23;
  --c-site:#5b8cff;
  --c-kpop:#ff6fa8;
  --c-trend:#ff9245;
  --c-edu:#2fc795;
  --c-startup:#f0b73a;
  --c-biz:#9b83ff;
}
html[data-theme="dark"] [data-cat="site"]{ --cat-tint:rgba(91,140,255,.14); --cat-tint-strong:rgba(91,140,255,.22); }
html[data-theme="dark"] [data-cat="kpop"]{ --cat-tint:rgba(255,111,168,.14); --cat-tint-strong:rgba(255,111,168,.22); }
html[data-theme="dark"] [data-cat="trend"]{ --cat-tint:rgba(255,146,69,.14); --cat-tint-strong:rgba(255,146,69,.22); }
html[data-theme="dark"] [data-cat="edu"]{ --cat-tint:rgba(47,199,149,.14); --cat-tint-strong:rgba(47,199,149,.22); }
html[data-theme="dark"] [data-cat="startup"]{ --cat-tint:rgba(240,183,58,.14); --cat-tint-strong:rgba(240,183,58,.22); }
html[data-theme="dark"] [data-cat="biz"]{ --cat-tint:rgba(155,131,255,.14); --cat-tint-strong:rgba(155,131,255,.22); }

body{ background:var(--page) !important; color:var(--ink) !important; }

/* 숫자는 항상 같은 폭으로 — 순위표가 흔들리지 않습니다 */
.rf-leader-rank, .rg-no, .rg-detail-rank-no, .rf-ranking-card ol, .rg-ranking-card ol{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

:where(a, button, [tabindex]):focus-visible{
  outline:2px solid var(--cat) !important; outline-offset:2px !important; border-radius:6px;
}

/* ---------- 헤더 / 상단 메뉴 ---------- */
.site-header{ background:var(--surface) !important; border-bottom:1px solid var(--line) !important; }
.rk-nav-item > .rk-nav-top{ position:relative; }
.rk-nav-item > .rk-nav-top::after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px; height:2px;
  background:var(--cat); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .16s ease;
}
.rk-nav-item:hover > .rk-nav-top::after,
.rk-nav-item:focus-within > .rk-nav-top::after{ transform:scaleX(1); }
.rk-nav-item:hover > .rk-nav-top,
.rk-nav-item:focus-within > .rk-nav-top{ color:var(--cat) !important; }
.rk-nav-drop{ border:1px solid var(--line) !important; border-top:3px solid var(--cat) !important; border-radius:12px !important; }
.rk-nav-drop a:hover{ background:var(--cat-tint) !important; color:var(--cat) !important; }

/* ---------- 메인 히어로 ---------- */
.rf-hero{
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(30,91,255,.13), transparent 60%),
    radial-gradient(50% 110% at 48% 0%, rgba(226,60,135,.11), transparent 62%),
    radial-gradient(55% 120% at 82% 0%, rgba(255,106,19,.12), transparent 64%),
    var(--surface) !important;
  border-bottom:1px solid var(--line) !important;
}
html[data-theme="dark"] .rf-hero{
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(91,140,255,.20), transparent 60%),
    radial-gradient(50% 110% at 48% 0%, rgba(255,111,168,.16), transparent 62%),
    radial-gradient(55% 120% at 82% 0%, rgba(255,146,69,.16), transparent 64%),
    var(--surface) !important;
}
.rf-kicker{
  display:inline-flex !important; align-items:center; gap:8px;
  padding:6px 12px 6px 10px !important; border-radius:999px !important;
  background:var(--surface) !important; border:1px solid var(--line) !important;
  color:var(--muted) !important; font-weight:700 !important; letter-spacing:0 !important;
  text-transform:none !important; font-size:13px !important;
}
.rf-kicker::before{
  content:""; width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg, var(--c-site), var(--c-kpop) 45%, var(--c-trend));
}
.rf-btn-primary{ background:var(--c-site) !important; border-color:var(--c-site) !important; color:#fff !important; }
.rf-btn-primary:hover{ filter:brightness(1.06); }
.rf-btn-ghost{ border-color:var(--line) !important; background:var(--surface) !important; color:var(--ink) !important; }
.rf-btn-ghost:hover{ border-color:var(--c-site) !important; color:var(--c-site) !important; }

/* ---------- 분야 1위 카드 ---------- */
.rf-leader-card{
  position:relative; background:var(--surface) !important;
  border:1px solid var(--line) !important; border-top:4px solid var(--cat) !important;
  border-radius:14px !important; box-shadow:none !important;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.rf-leader-card:hover{ background:var(--cat-tint) !important; border-color:var(--cat) !important; transform:translateY(-2px); }
.rf-leader-category{
  display:inline-block; color:var(--cat) !important; font-weight:800 !important;
  background:var(--cat-tint); padding:3px 8px; border-radius:6px; font-size:12px !important;
}
.rf-leader-rank{
  color:var(--cat) !important; font-weight:900 !important; font-size:15px !important;
  letter-spacing:-.01em;
}
.rf-leader-card h3{ color:var(--ink) !important; }
.rf-leader-card p, .rf-leader-card small{ color:var(--muted) !important; }

/* ---------- 분야별 섹션 · 순위 카드 ---------- */
.rf-group-head h2, .fd-section-head h2{ position:relative; padding-left:16px; }
.rf-group-head h2::before, .fd-section-head h2::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:6px;
  border-radius:3px; background:var(--cat);
}
.rf-ranking-card, .rg-ranking-card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important; border-left:4px solid var(--cat) !important;
  border-radius:12px !important; box-shadow:none !important;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.rf-ranking-card:hover, .rg-ranking-card:hover{
  background:var(--cat-tint) !important; border-color:var(--cat) !important; transform:translateY(-2px);
}
.rf-ranking-card h3, .rg-ranking-card h3{ color:var(--ink) !important; }
.rf-ranking-meta, .rg-ranking-meta{ color:var(--muted) !important; }
.rf-ranking-card ol li b, .rg-ranking-card ol li b{ color:var(--cat) !important; font-weight:800 !important; }
.rg-ranking-card em, .rf-ranking-card em{ color:var(--cat) !important; font-style:normal !important; font-weight:700 !important; }

/* ---------- 순위 상세(분야별 목록) ---------- */
.rg-detail-rank-row{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:12px !important; box-shadow:none !important;
  transition:background .16s ease, border-color .16s ease;
}
.rg-detail-rank-row:hover{ background:var(--cat-tint) !important; border-color:var(--cat) !important; }
.rg-detail-rank-no{
  color:var(--cat) !important; font-weight:900 !important;
  background:var(--cat-tint) !important; border:0 !important; border-radius:10px !important;
}
.rg-detail-rank-row:nth-child(-n+3) .rg-detail-rank-no{ background:var(--cat) !important; color:#fff !important; }
.rg-rank-metric, .rg-rank-desc{ color:var(--muted) !important; }
.rg-rank-go{ color:var(--cat) !important; border-color:var(--cat) !important; }

/* ---------- 웹하드(영화다운로드) 순위표 ---------- */
.rg-row{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:14px !important; box-shadow:none !important;
  transition:background .16s ease, border-color .16s ease;
}
.rg-row:hover{ background:var(--cat-tint) !important; border-color:var(--cat) !important; }
.rg-no{
  color:var(--cat) !important; font-weight:900 !important;
  background:var(--cat-tint) !important; border-radius:12px !important; border:0 !important;
}
.rg-row:nth-of-type(1) .rg-no,
.rg-row:nth-of-type(2) .rg-no,
.rg-row:nth-of-type(3) .rg-no{ background:var(--cat) !important; color:#fff !important; }
.rg-go{ background:var(--cat) !important; border-color:var(--cat) !important; color:#fff !important; }
.rg-go:hover{ filter:brightness(1.06); }
.rg-detail{ border-color:var(--line) !important; color:var(--ink) !important; }
.rg-detail:hover{ border-color:var(--cat) !important; color:var(--cat) !important; }
.rg-benefit{ color:var(--cat) !important; background:var(--cat-tint) !important; border-radius:6px; }
.chg.up{ color:var(--c-edu) !important; }
.chg.down{ color:var(--c-kpop) !important; }

/* ---------- 비교 카드 (분야색을 순서대로 돌려 씁니다) ---------- */
.fdc-card{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-top:4px solid var(--cat) !important; border-radius:14px !important; box-shadow:none !important;
}
.fdc-card:nth-child(6n+1){ --cat:var(--c-site); --cat-tint:rgba(30,91,255,.08); }
.fdc-card:nth-child(6n+2){ --cat:var(--c-kpop); --cat-tint:rgba(226,60,135,.09); }
.fdc-card:nth-child(6n+3){ --cat:var(--c-trend); --cat-tint:rgba(255,106,19,.10); }
.fdc-card:nth-child(6n+4){ --cat:var(--c-edu); --cat-tint:rgba(0,160,106,.10); }
.fdc-card:nth-child(6n+5){ --cat:var(--c-startup); --cat-tint:rgba(215,148,0,.12); }
.fdc-card:nth-child(6n+6){ --cat:var(--c-biz); --cat-tint:rgba(109,72,229,.09); }
.fdc-card:hover{ background:var(--cat-tint) !important; border-color:var(--cat) !important; }
.fdc-badge{ background:var(--cat-tint) !important; color:var(--cat) !important; border:0 !important; }
.fdc-arrow{ color:var(--cat) !important; }

/* ---------- 상세 페이지 ---------- */
.plan-card{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-left:4px solid var(--cat) !important; border-radius:12px !important; box-shadow:none !important;
}
.info-table th{ background:var(--cat-tint) !important; color:var(--ink) !important; }
.check-list li::marker{ color:var(--cat); }
.detail-page .detail-faq>details{ border-color:var(--line) !important; }
.detail-page .detail-faq>details>summary b{ background:var(--cat-tint) !important; color:var(--cat) !important; }
.detail-page .detail-faq>details[open]>summary{ color:var(--cat) !important; }

/* ---------- 게시판 · 일반 문서 ---------- */
.board-hero .eyebrow, .rg-eyebrow{ color:var(--cat) !important; letter-spacing:0 !important; }
.article h2{ position:relative; padding-left:14px; }
.article h2::before{
  content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:5px;
  border-radius:3px; background:var(--cat);
}

/* ---------- 하단 ---------- */
.rbx-footer{ border-top:3px solid transparent !important;
  border-image:linear-gradient(90deg, var(--c-site), var(--c-kpop) 30%, var(--c-trend) 50%, var(--c-edu) 70%, var(--c-biz)) 1 !important;
}
.rbx-footer a:hover{ color:var(--c-site) !important; }

@media (prefers-reduced-motion: reduce){
  .rf-leader-card, .rf-ranking-card, .rg-ranking-card, .rg-row, .rg-detail-rank-row, .rk-nav-item > .rk-nav-top::after{
    transition:none !important; transform:none !important;
  }
}


/* ---------- 각 페이지 히어로 ---------- */
.rg-hero, .rg-main-hero, .detail-hero, .board-hero{
  position:relative;
  background:
    linear-gradient(180deg, var(--cat-tint) 0%, transparent 78%),
    var(--surface) !important;
  border-bottom:1px solid var(--line) !important;
}
.rg-hero::after, .rg-main-hero::after, .detail-hero::after, .board-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg, var(--cat) 0%, var(--cat) 34%, var(--line) 34%);
}
.rg-hero h1, .rg-main-hero h1, .detail-hero h1, .board-hero h1{ color:var(--ink) !important; }
.rg-hero p, .rg-main-hero p, .detail-hero p, .board-hero p{ color:var(--muted) !important; }
.rg-eyebrow, .board-hero .eyebrow{
  display:inline-block; background:var(--cat-tint) !important; color:var(--cat) !important;
  padding:4px 10px; border-radius:999px; font-weight:700 !important; font-size:13px !important;
}

/* 요약 통계 박스 */
.rg-main-hero + .container > div > div, .rg-stat, .fd-stat{ border-color:var(--line) !important; }

/* ==========================================================================
   v2 — 분야 색을 더 크게 쓰는 컬러 블록 레이아웃
   ========================================================================== */

/* 히어로: 은은한 그라데이션 대신 흰 바탕 + 아래 6색 띠 */
.rf-hero{
  background:var(--surface) !important;
  border-bottom:0 !important;
  position:relative; padding-bottom:26px;
}
html[data-theme="dark"] .rf-hero{ background:var(--surface) !important; }
.rf-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:linear-gradient(90deg,
    var(--c-site) 0 16.66%, var(--c-kpop) 16.66% 33.33%, var(--c-trend) 33.33% 50%,
    var(--c-edu) 50% 66.66%, var(--c-startup) 66.66% 83.33%, var(--c-biz) 83.33% 100%);
}
.rf-hero h1{ font-size:clamp(32px,4.6vw,54px) !important; letter-spacing:-.045em !important; }
.rf-hero p{ max-width:56ch; }

/* 히어로 분야 타일 — 이 사이트가 다루는 여섯 분야를 색으로 먼저 보여줍니다 */
.rf-hero-cats{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:30px;
}
.rf-hero-cat{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:14px 16px; border-radius:12px; text-decoration:none;
  background:var(--cat); color:#fff;
  font-weight:800; font-size:15px; letter-spacing:-.01em;
  transition:filter .15s ease;
}
.rf-hero-cat b{ font-size:13px; font-weight:700; opacity:.85; }
.rf-hero-cat:hover{ filter:brightness(1.08); }
html[data-theme="dark"] .rf-hero-cat{ color:#0e1116; }

/* 1위 카드: 분야색으로 채운 카드 */
.rf-leader-card{
  background:var(--cat-tint) !important;
  border:1px solid transparent !important;
  border-top:0 !important; border-left:6px solid var(--cat) !important;
  border-radius:14px !important; overflow:hidden;
}
.rf-leader-card:hover{
  background:var(--cat-tint-strong) !important; border-color:transparent !important;
  border-left-color:var(--cat) !important; transform:none;
}
.rf-leader-category{
  background:var(--cat) !important; color:#fff !important;
  padding:4px 10px !important; border-radius:999px !important;
}
html[data-theme="dark"] .rf-leader-category{ color:#0e1116 !important; }
.rf-leader-rank{ font-size:13px !important; opacity:.9; }
.rf-leader-card h3{ font-size:22px !important; letter-spacing:-.03em; }

/* 분야 섹션 제목: 색 알약 라벨 */
.rf-group-head h2, .fd-section-head h2{ padding-left:0 !important; }
.rf-group-head h2::before, .fd-section-head h2::before{ display:none !important; }
.rf-group-head h2{
  display:inline-block; padding:6px 14px !important; border-radius:999px;
  background:var(--cat); color:#fff !important; font-size:20px !important; letter-spacing:-.02em;
}
html[data-theme="dark"] .rf-group-head h2{ color:#0e1116 !important; }

/* 분야별 순위 카드: 옅은 분야색 배경 */
.rf-ranking-card, .rg-ranking-card{
  background:var(--cat-tint) !important;
  border:1px solid transparent !important; border-radius:14px !important;
}
.rf-ranking-card:hover, .rg-ranking-card:hover{
  background:var(--cat-tint-strong) !important; border-color:var(--cat) !important;
}
.rf-ranking-card-top h3, .rg-ranking-card h3{ letter-spacing:-.02em; }
.rf-ranking-card ol li::marker, .rg-ranking-card ol li::marker{ color:var(--cat); font-weight:800; }

/* 순위 상세 목록: 1~3위는 색을 채워서 강조 */
.rg-detail-rank-row:nth-child(-n+3) .rg-detail-rank-no,
.rg-list-card .rg-row:nth-child(-n+3) .rg-no{
  background:var(--cat) !important; color:#fff !important; border-color:var(--cat) !important;
}
html[data-theme="dark"] .rg-detail-rank-row:nth-child(-n+3) .rg-detail-rank-no,
html[data-theme="dark"] .rg-list-card .rg-row:nth-child(-n+3) .rg-no{ color:#0e1116 !important; }

@media(max-width:900px){
  .rf-hero-cats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:560px){
  .rf-hero-cats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .rf-hero-cat{ padding:12px 13px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} }

/* ---------- v2 보정 ---------- */
/* 히어로 아래 6색 띠는 바로 위 분야 타일과 겹쳐 보여 뺍니다 */
.rf-hero::after{ display:none !important; }
.rf-hero{ padding-bottom:40px; border-bottom:1px solid var(--line) !important; }

/* 1위 카드: '1위'를 오른쪽 위 배지로 */
.rf-leader-card{ padding-top:18px !important; }
.rf-leader-rank{
  position:absolute; top:14px; right:14px; margin:0 !important;
  padding:3px 9px; border-radius:999px; font-size:12px !important;
  background:var(--surface); color:var(--cat) !important; border:1px solid var(--cat);
}

/* 분야별 순위 목록 페이지: 그룹 제목도 색 알약으로 */
.rg-ranking-group h2, .rg-ranking-group .rg-group-title{
  display:inline-block; padding:6px 14px !important; border-radius:999px;
  background:var(--cat); color:#fff !important; font-size:20px !important; letter-spacing:-.02em;
}
.rg-ranking-group h2::after{ display:none !important; }
html[data-theme="dark"] .rg-ranking-group h2{ color:#0e1116 !important; }

/* 순위 페이지 히어로: 가운데 정렬·빈 여백 대신 분야색 띠가 있는 왼쪽 정렬 */
.rg-hero{
  background:var(--cat-tint) !important; text-align:left !important;
  padding:46px 0 42px !important; min-height:0 !important;
  border-bottom:1px solid var(--line) !important;
}
.rg-hero .container{ max-width:1160px; }
.rg-hero h1{
  font-size:clamp(28px,3.6vw,44px) !important; letter-spacing:-.04em !important;
  color:var(--ink) !important; text-align:left !important;
}
.rg-hero p{ text-align:left !important; color:var(--muted) !important; max-width:62ch; }

/* 순위 구분 탭: 검은 띠 대신 분야색 강조 */
.rg-tabs{ background:var(--surface) !important; border-bottom:1px solid var(--line) !important; padding:14px 0 !important; }
.rg-tabs-inner{ justify-content:flex-start !important; max-width:1160px; }
.rg-tab{
  background:var(--page) !important; color:var(--muted) !important;
  border:1px solid var(--line) !important; font-weight:700 !important;
}
.rg-tab:hover{ color:var(--cat) !important; border-color:var(--cat) !important; }
.rg-tab.active{ background:var(--cat) !important; color:#fff !important; border-color:var(--cat) !important; }
html[data-theme="dark"] .rg-tab.active{ color:#0e1116 !important; }

/* ---------- v2 보정 2 ---------- */
.rf-hero{ padding-top:46px !important; }
.rf-hero-inner{ max-width:1160px; }

/* 순위 페이지 히어로 왼쪽 정렬 고정 */
.rg-hero, .rg-hero .container, .rg-hero .container h1, .rg-hero .container p,
.rg-main-hero, .rg-main-hero .container{ text-align:left !important; }
.rg-main-hero{ background:var(--cat-tint) !important; border-bottom:1px solid var(--line) !important; }
.rg-main-hero .container{ max-width:1160px; }

/* 본문 배경을 페이지 색과 맞춥니다(기존 크림색 제거) */
.rg-main, .rg-layout, .fd-home-section, .rg-content-page, main{ background:transparent !important; }

/* ---------- 상세 페이지 색 맞추기 ---------- */
.detail-page .detail-hero{ position:relative; }
.detail-page .detail-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px;
  background:var(--cat); border-radius:0 0 3px 3px;
}
.detail-page .go-btn, .detail-page .detail-btn.primary, .detail-actions .go-btn{
  background:var(--cat) !important; border-color:var(--cat) !important; color:#fff !important;
}
html[data-theme="dark"] .detail-page .go-btn{ color:#0e1116 !important; }
.detail-badges span, .detail-page .detail-badges span{
  background:var(--cat-tint) !important; color:var(--cat) !important; border:1px solid var(--cat) !important;
}
.detail-page .plan-card b, .detail-page .plan-card strong{ color:var(--cat) !important; }
.detail-page h2::before{ background:var(--cat); }

/* 순위 항목의 바로가기 버튼도 분야색으로 */
.rg-rank-go, .rg-rank-action .rg-rank-go{
  background:var(--cat) !important; border-color:var(--cat) !important; color:#fff !important;
}
.rg-rank-go:hover{ filter:brightness(1.06); }
html[data-theme="dark"] .rg-rank-go{ color:#0e1116 !important; }
.rg-rank-position, .rg-detail-rank-no{ border-radius:12px !important; }

/* ---------- '신규' 표시 ---------- */
.rg-new, .badge-new{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:var(--cat); color:#fff !important; font-size:11px; font-weight:800;
  vertical-align:middle; letter-spacing:0;
}
html[data-theme="dark"] .rg-new, html[data-theme="dark"] .badge-new{ color:#0e1116 !important; }