/* 홈 V2 — 다크 네이비·퍼플. /rank·/feed·/top3 V2 와 같은 값(카드 그라데이션·퍼플 테두리·결과 색). 범위는 .rt-home 뿐이다. */
.rt-home { --h-line: rgba(149, 107, 255, .3); --h-line-soft: rgba(149, 107, 255, .14); --h-card: linear-gradient(180deg, rgba(13, 19, 46, .96), rgba(8, 13, 34, .98)); --h-purple: #956bff; --h-purple-hi: #a77bff; --h-mint: #2ee6a6; --h-text: var(--rt-text, #f7f7fa); --h-text2: var(--rt-text-2, #aab1c7); --h-muted: #8791ad;
  color: var(--h-text); padding: 22px 0 36px; line-height: 1.5; }
.rt-home *, .rt-home *::before, .rt-home *::after { box-sizing: border-box; }
.rt-home h1, .rt-home h2, .rt-home p { margin: 0; }
.rt-home a { color: inherit; text-decoration: none; }
.rt-home a:focus-visible, .rt-home button:focus-visible { outline: 2px solid var(--h-purple-hi); outline-offset: 3px; }
.rt-home .hm-eyebrow { color: var(--h-purple-hi); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; }

/* 버튼 */
.rt-home .hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 750; transition: background .15s, border-color .15s; }
.rt-home .hm-btn.is-primary { background: #8b5cf6; border-color: #a78bfa; color: #fff; box-shadow: 0 6px 20px rgba(139, 92, 246, .35); }
.rt-home .hm-btn.is-primary:hover { background: #9d73f8; }
.rt-home .hm-btn.is-ghost { gap: 8px; border-color: rgba(149, 107, 255, .55); background: rgba(13, 19, 46, .6); color: #e6dcff; }
.rt-home .hm-btn.is-ghost:hover { border-color: var(--h-purple-hi); background: rgba(149, 107, 255, .16); }

/* 히어로 */
.rt-home .hm-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 270px; border: 1px solid var(--h-line); border-radius: 16px;
  background: radial-gradient(60% 120% at 80% 0%, rgba(149, 107, 255, .38), transparent 62%), radial-gradient(45% 90% at 95% 100%, rgba(70, 120, 255, .22), transparent 70%), linear-gradient(110deg, #171a42, #0b1030 70%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06); }
.rt-home .hm-hero-copy { position: relative; z-index: 2; max-width: 58%; padding: 34px 40px; }
.rt-home .hm-hero .hm-eyebrow { margin-bottom: 12px; }
.rt-home h1 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; letter-spacing: -1.6px; font-weight: 850; }
.rt-home h1 em { font-style: normal; color: var(--h-purple-hi); }
.rt-home .hm-hero-desc { margin: 14px 0 22px; color: var(--h-text2); font-size: 14px; }
.rt-home .hm-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.rt-home .hm-hero-art { position: absolute; inset: 0 0 0 46%; z-index: 1; display: flex; align-items: center; justify-content: center; color: var(--h-purple-hi); transform: rotate(-8deg); opacity: .8; }
.rt-home .hm-hero-art svg { width: 92%; filter: drop-shadow(0 0 18px rgba(149, 107, 255, .45)); }
.rt-home .hm-crowd { position: absolute; inset: -10% 0 40% 0; background: radial-gradient(circle at 20% 60%, rgba(180, 160, 255, .35) 0 1.5px, transparent 2.5px) 0 0 / 22px 18px, radial-gradient(circle at 60% 30%, rgba(120, 160, 255, .3) 0 1.2px, transparent 2px) 0 0 / 30px 24px; -webkit-mask: linear-gradient(180deg, #000, transparent 90%); mask: linear-gradient(180deg, #000, transparent 90%); opacity: .55; }

/* 서비스 3카드 */
.rt-home .hm-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 16px 0 18px; }
.rt-home .hm-service { --k: 149, 107, 255; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid rgba(var(--k), .3); border-radius: 14px; background: var(--h-card); transition: border-color .15s, box-shadow .15s; }
.rt-home .hm-service.is-market { --k: 96, 140, 255; }
.rt-home .hm-service.is-rank { --k: 240, 180, 60; }
.rt-home .hm-service.is-top { --k: 167, 123, 255; }
.rt-home .hm-service:hover { border-color: rgba(var(--k), .7); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.rt-home .hm-service-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 50px; width: 50px; height: 50px; border: 1px solid rgba(var(--k), .45); border-radius: 12px; background: rgba(var(--k), .14); color: rgb(var(--k)); }
.rt-home .hm-service-text { min-width: 0; flex: 1 1 auto; }
.rt-home .hm-service-text strong { display: block; font-size: 17px; font-weight: 800; }
.rt-home .hm-service-text small { display: block; margin-top: 3px; color: var(--h-text2); font-size: 12.5px; }
.rt-home .hm-service-go { color: var(--h-text2); font-size: 26px; line-height: 1; }

/* 레이아웃 */
.rt-home .hm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.rt-home .hm-main, .rt-home .hm-aside { display: grid; gap: 18px; min-width: 0; }
.rt-home .hm-panel { min-width: 0; overflow: hidden; border: 1px solid var(--h-line); border-radius: 16px; background: var(--h-card); }
.rt-home .hm-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.rt-home .hm-head-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; color: #b9a0ff; }
.rt-home .hm-head-icon.is-gold { color: #f0b429; }
.rt-home .hm-head-icon.is-mint { color: #2ee6a6; }
.rt-home .hm-head-text { flex: 1 1 auto; min-width: 0; }
.rt-home h2 { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.rt-home .hm-head-text p { margin-top: 2px; color: var(--h-text2); font-size: 12.5px; }
.rt-home .hm-more { flex: 0 0 auto; color: #b9a0ff; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.rt-home .hm-more:hover { color: #d7c8ff; }

/* 탭 */
.rt-home .hm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 20px 12px; padding: 8px; border: 1px solid var(--h-line-soft); border-radius: 12px; background: rgba(8, 13, 34, .6); }
.rt-home .hm-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--h-text2); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.rt-home .hm-tab b { font-weight: 700; color: var(--h-muted); }
.rt-home .hm-tab:hover { color: var(--h-text); }
.rt-home .hm-tab.is-active { background: #8b5cf6; color: #fff; }
.rt-home .hm-tab.is-active b { color: #e9deff; }

/* 마감 임박 경기 행 */
.rt-home .hm-events { padding: 0 8px 8px; }
.rt-home .hm-event { display: grid; grid-template-columns: 140px minmax(0, 1fr) 232px 92px 78px; align-items: center; gap: 12px; padding: 12px 12px; border-top: 1px solid var(--h-line-soft); }
.rt-home .hm-event[hidden] { display: none; }
.rt-home .hm-event-league { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rt-home .hm-league-flag { display: inline-flex; flex: 0 0 22px; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; }
.rt-home .hm-league-flag img { width: 100%; height: 100%; object-fit: cover; }
.rt-home .hm-league-text { min-width: 0; }
.rt-home .hm-league-text b { display: block; overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-league-text small { display: block; color: var(--h-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rt-home .hm-event-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.rt-home .hm-team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 750; }
.rt-home .hm-team.is-home { justify-content: flex-end; text-align: right; }
.rt-home .hm-tname { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; line-height: 1.3; }
.rt-home .hm-title-only { grid-column: 1 / -1; font-size: 15px; font-weight: 750; }
.rt-home .hm-logo { display: inline-flex; flex: 0 0 30px; width: 30px; height: 30px; align-items: center; justify-content: center; }
.rt-home .hm-logo img { width: 100%; height: 100%; object-fit: contain; }
.rt-home .hm-x { color: var(--h-muted); font-size: 12px; font-weight: 700; }
.rt-home .hm-odds { display: flex; gap: 6px; min-width: 0; }
.rt-home .hm-odd { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34px; padding: 5px 4px; border: 1px solid var(--h-line); border-radius: 9px; background: rgba(255, 255, 255, .03); }
.rt-home .hm-odd:hover { border-color: var(--h-purple-hi); background: rgba(149, 107, 255, .14); }
.rt-home .hm-odd span { max-width: 100%; overflow: hidden; color: var(--h-text2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-odd b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rt-home .hm-remain { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #ff8da4; font-size: 12px; font-weight: 650; white-space: nowrap; }
.rt-home .hm-remain:not(.is-soon) { color: var(--h-text2); }
.rt-home .hm-predict { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 10px; border: 1px solid rgba(255, 92, 124, .75); border-radius: 8px; background: rgba(255, 92, 124, .08); color: #ff8da4; font-size: 13px; font-weight: 750; white-space: nowrap; }
.rt-home .hm-predict:hover { background: rgba(255, 92, 124, .2); }
.rt-home .hm-p-new { display: none; }

/* 결과 배지·행 배경: 4개 영역 통일값 */
.rt-home .hm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 4px 10px; border: 1px solid rgba(110, 150, 255, .55); border-radius: 999px; background: rgba(60, 100, 230, .16); color: #7fa5ff; font-size: 12px; font-weight: 800; line-height: 1.3; }
.rt-home .pd-pick-win .hm-badge { border-color: rgba(46, 230, 166, .6); background: rgba(46, 230, 166, .14); color: #2ee6a6; }
.rt-home :is(.pd-pick-lose, .pd-pick-lost) .hm-badge { border-color: rgba(255, 92, 124, .6); background: rgba(255, 92, 124, .14); color: #ff8da4; }
.rt-home .pd-pick-void .hm-badge { border-color: rgba(160, 170, 196, .4); background: rgba(160, 170, 196, .1); color: #b6bdd0; }

/* 피드 행 */
.rt-home .hm-feed-row { display: grid; grid-template-columns: 38px 120px minmax(0, 1.5fr) minmax(0, 1fr) 62px; align-items: center; gap: 14px; margin: 0 8px 6px; padding: 10px 14px; border: 1px solid var(--h-line-soft); border-radius: 12px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); transition: border-color .15s; }
.rt-home .hm-feed-row:hover { border-color: var(--h-line); }
.rt-home .hm-feed-row.pd-pick-win { background: #0D2728; }
.rt-home .hm-feed-row:is(.pd-pick-lose, .pd-pick-lost) { background: #251925; }
.rt-home :is(.hm-feed, .hm-top) .hm-feed-row:last-child { margin-bottom: 8px; }
.rt-home .hm-feed-none { grid-column: 3 / -1; color: var(--h-muted); font-size: 12.5px; }
.rt-home .hm-feed-name { overflow: hidden; font-size: 14.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-feed-match, .rt-home .hm-feed-pick { min-width: 0; }
.rt-home .hm-feed-match b, .rt-home .hm-feed-pick b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-feed-match small, .rt-home .hm-feed-pick small { display: block; overflow: hidden; color: var(--h-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-feed-pick { text-align: center; }
.rt-home .hm-feed-pick small { color: var(--h-text); font-size: 13px; font-weight: 700; }
/* 픽 캡슐 — 피드의 픽 상자와 같은 14px · 700 · 흰 글자, 색만 네이비 바탕 + 보라 테두리. 누르는 요소가 아니다. */
.rt-home .hm-pick-pill { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 5px 13px; overflow: hidden; vertical-align: middle; border: 1px solid rgba(149, 107, 255, .55); border-radius: 999px; background: #0B1230; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-feed-row .hm-badge { justify-self: end; }

/* 아바타 */
.rt-home .hm-ava { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; border: 2px solid rgba(149, 107, 255, .55); border-radius: 50%; background: rgba(149, 107, 255, .14); color: #8f78e0; }
.rt-home .hm-ava img, .rt-home .hm-ava svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-home .hm-feed-row .hm-ava, .rt-home .hm-rank-row .hm-ava { width: 38px; height: 38px; }

/* 이달의 랭킹 */
.rt-home .hm-rank-row { display: grid; grid-template-columns: 28px 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--h-line-soft); }
.rt-home .hm-rank-row:hover { background: rgba(149, 107, 255, .06); }
.rt-home .hm-rank-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid #4a5476; border-radius: 8px; color: var(--h-text2); font-size: 14px; font-weight: 800; }
.rt-home .is-rank1 .hm-rank-no { border-color: #d9a21f; background: linear-gradient(145deg, #ffe38a, #d9a21f); color: #3a2a00; }
.rt-home .is-rank2 .hm-rank-no { border-color: #9aa6bf; background: linear-gradient(145deg, #e8edf8, #9aa6bf); color: #1f2433; }
.rt-home .is-rank3 .hm-rank-no { border-color: #a8653a; background: linear-gradient(145deg, #f0b184, #a8653a); color: #301a0b; }
.rt-home .hm-rank-name { min-width: 0; }
.rt-home .hm-rank-name b { display: block; overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-rank-name small { display: block; overflow: hidden; color: var(--h-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-rank-name small i { color: var(--h-text); font-style: normal; }
.rt-home .hm-rank-name small u { margin: 0 3px; text-decoration: none; opacity: .5; }
.rt-home .hm-profit { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rt-home .hm-profit.is-up { color: var(--h-mint); }
.rt-home .hm-profit.is-down { color: #ff5c7c; }

/* 적중률 값 */
.rt-home .hm-rate { color: var(--h-text); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }


/* 빈 상태 */
.rt-home .hm-empty { padding: 26px 20px 30px; text-align: center; }
.rt-home .hm-empty strong { display: block; font-size: 14px; font-weight: 700; }
.rt-home .hm-empty p { margin-top: 8px; color: var(--h-text2); font-size: 12.5px; line-height: 1.8; }
.rt-home .hm-empty a { display: inline-block; margin-top: 14px; color: #b9a0ff; font-size: 13px; }

/* TOP3픽 — 3열 랭커 카드. 순위별 금·은·동은 배지와 카드 테두리에만 은은하게 쓴다(발광·장식 없음). 팁스터 최신 픽은 아래 구분선형 리스트 그대로.
   카드 안은 위에서 아래로 상단(팁스터) · 중단(경기) · 하단(픽·배당·결과) 세 단으로 고정한다. */
.rt-home .hm-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
.rt-home .hm-top > .hm-head, .rt-home .hm-top > .hm-empty { grid-column: 1 / -1; }
.rt-home .hm-top > .hm-head { margin: 0 -16px; }
.rt-home .hm-top .hm-feed-row.hm-top-row, .rt-home .hm-top .hm-feed-row.hm-top-row:last-child {
  --rk: 149, 107, 255; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; padding: 16px 18px; min-width: 0;
  border-color: rgba(var(--rk), .4); border-radius: 14px; }
.rt-home .hm-top .hm-top-row.is-rank1 { --rk: 240, 180, 41; border-color: rgba(var(--rk), .6); background: linear-gradient(180deg, rgba(240, 180, 41, .07), rgba(10, 15, 38, .98) 55%); box-shadow: inset 0 0 0 1px rgba(var(--rk), .12); }
.rt-home .hm-top .hm-top-row.is-rank2 { --rk: 190, 205, 235; }
.rt-home .hm-top .hm-top-row.is-rank3 { --rk: 226, 140, 88; }
.rt-home .hm-top .hm-feed-row.hm-top-row:hover { border-color: rgba(var(--rk), .7); }
/* 상단: 순위 배지 · 아바타 · 닉네임 — 한 줄, 세로 가운데, 간격 일정 */
.rt-home .hm-top-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--h-line-soft); }
.rt-home .hm-top-head .hm-rank-no, .rt-home .hm-top-head .hm-ava { flex: none; }
.rt-home .hm-top-head .hm-feed-name { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.3; }
/* 중단: 경기명 2줄 높이 고정 + 리그·날짜 한 줄 */
.rt-home .hm-top .hm-top-row .hm-feed-match b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.4; white-space: normal; }
.rt-home .hm-top .hm-top-row .hm-feed-match small { margin-top: 2px; overflow: hidden; color: var(--h-muted); font-size: 12.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-top .hm-top-row .hm-feed-none { padding: 6px 0; }
/* 하단: 픽 캡슐 + 배당(왼쪽 묶음) / 결과 배지(오른쪽 끝) — 카드 바닥에 붙여 세 카드가 같은 선에 놓인다 */
.rt-home .hm-top-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--h-line-soft); }
.rt-home .hm-top .hm-top-foot .hm-feed-pick { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; text-align: left; }
.rt-home .hm-top .hm-top-foot .hm-feed-pick b { display: block; flex: 0 1 auto; min-width: 0; overflow: visible; font-size: 14px; }
.rt-home .hm-top .hm-top-foot .hm-feed-pick small { display: block; flex: none; font-size: 14px; }
.rt-home .hm-top .hm-top-foot .hm-badge { flex: none; margin-left: auto; }

/* 팁스터 최신 픽 — 픽 캡슐과 배당을 한 줄에 나란히(세로 가운데). 배당은 캡슐 밖 오른쪽, 결과 배지는 행의 오른쪽 끝 그대로. */
.rt-home .hm-feed .hm-feed-pick { display: flex; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; }
.rt-home .hm-feed .hm-feed-pick b { display: block; flex: 0 1 auto; min-width: 0; }
.rt-home .hm-feed .hm-feed-pick small { display: block; flex: none; }

/* 팁스터 최신 픽 — 카드 테두리 없이 구분선 중심의 컴팩트 리스트 */
.rt-home .hm-feed .hm-feed-row, .rt-home .hm-feed .hm-feed-row:last-child { margin: 0; padding: 11px 20px; border: 0; border-top: 1px solid var(--h-line-soft); border-radius: 0; }
.rt-home .hm-feed .hm-feed-row:not(.pd-pick-win):not(.pd-pick-lose):not(.pd-pick-lost) { background: transparent; }
.rt-home .hm-feed .hm-feed-row:not(.pd-pick-win):not(.pd-pick-lose):not(.pd-pick-lost):hover { background: rgba(149, 107, 255, .06); }

/* 반응형 */
@media (max-width: 1280px) {
  .rt-home .hm-top { grid-template-columns: minmax(0, 1fr); }
  .rt-home .hm-event { grid-template-columns: 150px minmax(0, 1fr) 230px 96px 78px; gap: 10px; }
  .rt-home .hm-feed-row { grid-template-columns: 38px 100px minmax(0, 1.4fr) minmax(0, 1fr) 58px; gap: 10px; }
  .rt-home .hm-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
  .rt-home .hm-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-home .hm-grid { grid-template-columns: minmax(0, 1fr); }
  .rt-home .hm-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-home .hm-hero-copy { max-width: 70%; }
  .rt-home .hm-event { grid-template-columns: 140px minmax(0, 1fr) 220px; }
  .rt-home .hm-event .hm-remain, .rt-home .hm-event .hm-predict { grid-row: 2; }
  .rt-home .hm-event .hm-remain { grid-column: 1; justify-content: flex-start; }
  .rt-home .hm-event .hm-predict { grid-column: 3; }
}
.rt-home .hm-quick { display: none; }
.rt-home .hm-top-profit { display: none; }
.rt-home .hm-top-head .hm-top-badge { display: none; }   /* PC(≥1024px)에서만 상단 우측에 보인다(아래 PC 블록). 하단 결과 배지는 태블릿·모바일이 그대로 쓴다. */
.rt-home .hm-t-m { display: none; }
@media (max-width: 767px) {
  /* 모바일 홈 — 히어로·서비스 카드·종목 탭·반복 랭킹 목록(aside)을 감추고, 마감 임박 3경기 · TOP3픽 3건 · 최신 픽 3건 · 랭킹 바로가기만 남긴다.
     마크업은 PC·태블릿 공용이라 지우지 않고 숨기기만 한다. 아래 규칙은 /top3·/feed 모바일 카드와 같은 체계(24px 캡슐 배지 · 13px 본문). */
  .rt-home { padding-top: 0; padding-bottom: 8px; }
  .rt-home .hm-hero, .rt-home .hm-services, .rt-home .hm-aside, .rt-home .hm-tabs { display: none; }
  .rt-home .hm-grid, .rt-home .hm-main { gap: 12px; }
  .rt-home .hm-head { padding: 9px 12px 9px; gap: 10px; }
  html:root .rt-home .hm-panel .hm-head-icon { flex-basis: 32px; width: 32px; height: 32px; border: 1px solid rgba(var(--sc), .4); border-radius: 10px; background: rgba(var(--sc), .12); color: rgb(var(--sc)); }
  .rt-home .hm-head-icon svg { width: 20px; height: 20px; }
  .rt-home .hm-head-text p { display: none; }
  .rt-home h2 { font-size: 17px; }
  .rt-home .hm-more { color: rgb(var(--sc)); font-size: 13px; }

  /* 섹션별 고유 색(--sc = 포인트 색 RGB): 랭킹 바로가기 골드 · TOP3 퍼플 · 최신 픽 블루 · 마감 임박 오렌지.
     테두리(1px)·제목 아이콘 박스·전체보기 링크가 같은 색 계열이고, 바탕은 기존 다크 네이비에 색을 아주 옅게 얹는다. 카드 안쪽(메달·배지·배당·버튼)은 건드리지 않는다. */
  .rt-home .hm-main > .hm-quick { --sc: 241, 196, 91; }
  .rt-home .hm-main > .hm-top { --sc: 173, 131, 255; }
  .rt-home .hm-main > .hm-feed { --sc: 94, 168, 255; }
  .rt-home .hm-main > .hm-market { --sc: 255, 99, 92; }   /* 코랄 레드 */
  .rt-home .hm-market .hm-t-pc { display: none; }
  .rt-home .hm-market .hm-t-m { display: inline; }
  .rt-home .hm-event-league small { display: none; }   /* 모바일 마감 임박 경기는 경기 시각 줄을 보이지 않는다(리그명만) */
  .rt-home .hm-main > .hm-panel { border-color: rgba(148, 163, 200, .22); border-radius: 14px; background: linear-gradient(180deg, rgba(var(--sc), .07), rgba(var(--sc), 0) 110px), var(--h-card); }

  /* 마감 임박 경기 — 앞의 3경기만(마감 임박 순), 한 줄에 배당 3칸 + 예측하기 */
  .rt-home .hm-events { padding: 0 8px 4px; }
  .rt-home .hm-event:nth-child(n+4) { display: none; }
  .rt-home .hm-event { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px 8px; margin-bottom: 8px; padding: 10px; border: 1px solid var(--h-line-soft); border-radius: 12px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); }
  .rt-home .hm-event-league { grid-column: 1; grid-row: 1; min-width: 0; }
  .rt-home .hm-event .hm-remain { grid-column: 2; grid-row: 1; justify-content: flex-end; text-align: right; white-space: normal; }
  .rt-home .hm-remain svg { display: none; }
  .rt-home .hm-event-teams { grid-column: 1 / -1; grid-row: 2; }
  .rt-home .hm-odds { grid-column: 1; grid-row: 3; }
  .rt-home .hm-event .hm-predict { grid-column: 2; grid-row: 3; min-height: 38px; padding: 0 14px; border-color: #a78bfa; background: #8b5cf6; color: #fff; }
  .rt-home .hm-team { font-size: 14px; }
  .rt-home .hm-x { font-size: 0; }
  .rt-home .hm-x::after { content: "VS"; font-size: 12px; }
  .rt-home .hm-odd { flex-direction: row; gap: 6px; min-height: 38px; padding: 4px 6px; }
  .rt-home .hm-odd b { font-size: 14px; }

  /* TOP3픽 · 최신 픽 — 공통 카드: ① (메달)·아바타·닉네임 / 결과  ② 경기  ③ 예측 / 배당 */
  .rt-home .hm-top { display: block; padding: 0 8px 4px; }
  .rt-home .hm-top > .hm-head { margin: 0 -8px; }
  html:root .rt-home .hm-top .hm-feed-row.hm-top-row, html:root .rt-home .hm-feed .hm-feed-row, html:root .rt-home .hm-feed .hm-feed-row:last-child {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; margin: 0 8px 8px; padding: 10px 12px; border: 1px solid var(--h-line-soft); border-radius: 12px; }
  html:root .rt-home .hm-top .hm-feed-row.hm-top-row { margin: 0 0 8px; }
  html:root .rt-home .hm-feed .hm-feed-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  html:root .rt-home .hm-feed .hm-feed-row:not(.pd-pick-win):not(.pd-pick-lose):not(.pd-pick-lost), html:root .rt-home .hm-feed .hm-feed-row:not(.pd-pick-win):not(.pd-pick-lose):not(.pd-pick-lost):hover { background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); }
  html:root .rt-home .hm-feed > a.hm-feed-row:nth-of-type(n+4) { display: none; }
  .rt-home .hm-top .hm-top-head { grid-column: 1 / -1; grid-row: 1; gap: 8px; padding-bottom: 0; border-bottom: 0; }
  .rt-home .hm-top .hm-top-head .hm-rank-no { width: 24px; height: 24px; font-size: 12px; }
  .rt-home .hm-top-head .hm-ava, .rt-home .hm-feed-row .hm-ava { width: 28px; height: 28px; border-width: 1.5px; }
  .rt-home .hm-top-head .hm-feed-name, .rt-home .hm-feed-name { font-size: 14px; }
  .rt-home .hm-feed .hm-feed-row .hm-ava { grid-column: 1; grid-row: 1; }
  .rt-home .hm-feed .hm-feed-row .hm-feed-name { grid-column: 2; grid-row: 1; }
  html:root .rt-home .hm-feed-row .hm-badge { grid-column: -2; grid-row: 1; justify-self: end; min-width: 0; height: 24px; padding: 0 10px; font-size: 11px; font-weight: 600; line-height: 1; }
  .rt-home .hm-top .hm-top-foot, .rt-home .hm-top .hm-top-foot .hm-feed-pick, .rt-home .hm-feed .hm-feed-pick { display: contents; }
  .rt-home .hm-top .hm-top-foot .hm-badge { margin-left: 0; }
  html:root .rt-home .hm-top .hm-top-row .hm-feed-match, html:root .rt-home .hm-feed .hm-feed-match { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; padding: 8px 0 0; border-top: 1px solid rgba(149, 107, 255, .2); }
  .rt-home .hm-feed-match b, .rt-home .hm-top .hm-top-row .hm-feed-match b { display: block; overflow: visible; font-size: 13px; font-weight: 800; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
  .rt-home .hm-feed-none { grid-column: 1 / -1; grid-row: 2; }
  html:root .rt-home .hm-pk { grid-row: 3; display: block; min-width: 0; padding-top: 6px; color: #fff; font-size: 13px; }
  html:root .rt-home .hm-pk:not(.hm-pk-odds) { grid-column: 1 / -2; }
  html:root .rt-home .hm-feed .hm-pk:not(.hm-pk-odds) { grid-column: 1 / -2; }
  html:root .rt-home .hm-pk-odds { grid-column: -2; text-align: right; white-space: nowrap; }
  html:root .rt-home .hm-pk i { display: inline; margin-right: 6px; color: var(--h-text2); font-size: 12px; font-weight: 500; letter-spacing: 0; }
  html:root .rt-home .hm-pk:not(.hm-pk-odds) i { font-size: 0; }
  html:root .rt-home .hm-pk:not(.hm-pk-odds) i::before { content: "예측"; font-size: 12px; }
  html:root .rt-home .hm-pk-val { display: inline; overflow: visible; font-size: 13px; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }


  /* 섹션 순서(모바일만): 마감 임박 경기 → 랭커픽 TOP3 → 팁스터 최신 픽 (PC·태블릿은 마크업 순서 그대로 — 같은 순서다). 랭킹 바로가기는 모바일에서 뺐다(상단 메뉴와 중복). */
  .rt-home .hm-main > .hm-top { order: 2; }
  .rt-home .hm-main > .hm-feed { order: 3; }
  .rt-home .hm-main > .hm-market { order: 1; }

  /* TOP3 행 — ① (메달)·아바타·닉네임 / 월 수익  ② 경기  ③ 예측 / 배당 / 결과. 구분선 없이 촘촘하게 */
  .rt-home .hm-top .hm-top-profit { display: none; }   /* 홈 TOP3픽은 수익 금액을 보이지 않는다(최신 픽과 같은 구성) */
  html:root .rt-home .hm-top .hm-feed-row.hm-top-row { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 12px; }
  html:root .rt-home .hm-top .hm-top-row .hm-feed-match { margin-top: 6px; padding: 0; border-top: 0; }
  html:root .rt-home .hm-top .hm-pk { padding-top: 3px; }
  html:root .rt-home .hm-top .hm-pk:not(.hm-pk-odds) { grid-column: 1; }
  html:root .rt-home .hm-top .hm-pk-odds { grid-column: 2; }
  /* 결과 배지는 첫째 줄 오른쪽 끝(헤더 안 배지)만 쓰고, 하단 배지는 감춘다 — 최신 픽과 같은 위치 */
  .rt-home .hm-top .hm-top-head .hm-top-badge { display: inline-flex; flex: none; margin-left: auto; }
  .rt-home .hm-top .hm-top-foot .hm-badge { display: none; }
  /* 최신 픽 행 — 구분선 없이 촘촘하게 */
  html:root .rt-home .hm-feed .hm-feed-row { padding: 9px 12px; }
  html:root .rt-home .hm-feed .hm-feed-match { margin-top: 6px; padding: 0; border-top: 0; }
  html:root .rt-home .hm-feed .hm-pk { padding-top: 3px; }
  /* 마감 임박 카드 — 한 장을 낮게 */
  .rt-home .hm-event { gap: 6px 8px; padding: 8px 10px 10px; }
  .rt-home .hm-event .hm-logo, .rt-home .hm-event .hm-logo img { width: 22px; height: 22px; }
  .rt-home .hm-team { font-size: 13.5px; }
  .rt-home .hm-odd { min-height: 36px; }
  .rt-home .hm-event .hm-predict { min-height: 36px; }
}
@media (max-width: 900px) {
  .rt-home .hm-top { grid-template-columns: minmax(0, 1fr); }
}

/* PICK / ODDS label layout (HOME TOP3 + latest picks) */
.rt-home .hm-feed-pick { display: flex; align-items: flex-start; justify-content: flex-start; gap: 24px; min-width: 0; text-align: left; }
.rt-home .hm-pk { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rt-home .hm-pk:not(.hm-pk-odds) { flex: 1 1 auto; }
.rt-home .hm-pk-odds { flex: none; }
.rt-home .hm-pk i { color: #95A4C7; font-size: 11px; font-style: normal; font-weight: 400; line-height: 1.2; letter-spacing: .02em; }
.rt-home .hm-pk-val { display: block; overflow: hidden; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.rt-home .hm-top .hm-top-foot .hm-feed-pick { align-items: flex-start; }
.rt-home .hm-top .hm-pk { align-items: flex-start; gap: 5px; text-align: left; }
.rt-home .hm-top .hm-pk-odds { align-items: flex-end; text-align: right; }
.rt-home .hm-top .hm-pk i { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }

/* PC(≥1024px) 마감 임박 경기 — 종목 탭·카운트·액션 버튼을 승부예측(/market)의 칩·카운트·CTA 값으로 통일. 문구는 '예측참여'(768~1023·모바일은 기존 '예측하기'). */
@media (min-width: 1024px) {
  .rt-home .hm-tabs { border-color: rgba(149, 107, 255, .28); border-radius: 16px; background: linear-gradient(rgba(14, 18, 48, .9), rgba(9, 13, 36, .95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 16px rgba(0, 0, 0, .22); }
  .rt-home .hm-tab { border: 1px solid transparent; border-radius: 999px; color: #cfc6ee; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; }
  .rt-home .hm-tab:hover { border-color: rgba(149, 107, 255, .35); background: rgba(149, 107, 255, .16); color: #fff; box-shadow: inset 0 0 12px rgba(149, 107, 255, .18); }
  .rt-home .hm-tab.is-active { border-color: rgba(190, 165, 255, .5); background: linear-gradient(180deg, #9b79ff, #7549eb); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px rgba(117, 73, 235, .38); }
  .rt-home .hm-tab.is-active:hover { background: linear-gradient(180deg, #a888ff, #8157f2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 6px 16px rgba(117, 73, 235, .5); }
  .rt-home .hm-tab:focus-visible, .rt-home .hm-predict:focus-visible { outline: 2px solid #b49aff; outline-offset: 2px; }
  .rt-home .hm-tab b { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--rt-border); border-radius: 999px; background: var(--rt-surface-1); color: #aab1c7; font-size: 10px; font-weight: 500; line-height: 1; }
  .rt-home .hm-tab.is-active b { border-color: rgba(255, 255, 255, .22); background: rgba(8, 18, 32, .2); color: rgba(255, 255, 255, .9); }
  .rt-home .hm-p-new { display: inline; }
  .rt-home .hm-p-old { display: none; }
  .rt-home .hm-predict { gap: 3px; height: 34px; min-height: 0; box-sizing: border-box; padding: 0 14px; border: 1px solid rgba(149, 107, 255, .6); border-radius: 8px; background: rgba(149, 107, 255, .12); color: #b49aff; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
  .rt-home .hm-predict:hover, .rt-home .hm-predict:focus-visible, .rt-home .hm-event:hover .hm-predict { border-color: #956BFF; background: #956BFF; color: #101322; }  /* 섹션별 포인트 색(--sc = RGB, 모바일과 같은 값): 오렌지(마감 임박) · 퍼플(TOP3픽 · 적중률순) · 블루(최신 픽) · 골드(랭킹 바로가기 · 수익률순) · 민트(적중률 100%). 테두리 · 제목 아이콘 · 헤더 배경만 칠한다. */
  .rt-home .hm-panel { --sc: 173, 131, 255; border-color: rgba(148, 163, 200, .22); }  /* PC: 외곽선은 6개 모두 블루그레이, 섹션색(--sc)은 아이콘·링크에만 */
  .rt-home .hm-panel.hm-quick, .rt-home .hm-aside > .hm-panel:has(.hm-head-icon.is-gold) { --sc: 241, 196, 91; }
  .rt-home .hm-main > .hm-market { --sc: 255, 138, 76; }
  .rt-home .hm-main > .hm-top { --sc: 229, 168, 75; }  /* TOP3픽: 퍼플 대신 골든 앰버 */
  .rt-home .hm-main > .hm-feed { --sc: 94, 168, 255; }
  .rt-home .hm-aside > .hm-panel:has(.hm-head-icon.is-mint) { --sc: 46, 230, 166; }
  .rt-home .hm-aside > .hm-panel:has(.hm-head-icon:not(.is-gold):not(.is-mint)) { --sc: 242, 123, 181; }  /* 적중률순: 퍼플은 TOP3픽에만 남긴다 */
  .rt-home .hm-panel > .hm-head { background: linear-gradient(90deg, rgba(149, 107, 255, .13), rgba(149, 107, 255, .03)); }
  html:root .rt-home .hm-panel .hm-head-icon { border: 1px solid rgba(var(--sc), .4); border-radius: 10px; background: rgba(var(--sc), .12); color: rgb(var(--sc)); }
  /* TOP3픽 카드: 결과 배지는 상단 우측(닉네임과 같은 줄), 하단은 좌 '픽' · 우 '배당' 두 칸. 같은 배지를 상단에 한 번 더 그리고 하단 것은 감춘다 — 상태 클래스(pd-pick-*)는 카드에 있어 색은 그대로다. */
  .rt-home .hm-top .hm-top-head .hm-top-badge { display: inline-flex; flex: none; margin-left: auto; }
  .rt-home .hm-top .hm-top-foot .hm-badge { display: none; }
  .rt-home .hm-top .hm-top-foot .hm-feed-pick { width: 100%; justify-content: space-between; }
  .rt-home .hm-top .hm-top-foot .hm-pk:not(.hm-pk-odds) > i { padding-left: 8px; }  /* '픽' 라벨만 배지 기준 좌측정렬에서 8px 안쪽으로. */
  .rt-home .hm-top .hm-top-foot .hm-pk-odds { flex: none; align-items: flex-end; text-align: right; }
  /* TOP3픽 경기명: 1줄 말줄임(전체 이름은 title 툴팁). 2줄 기준이던 높이가 줄어 세 카드가 같은 높이로 짧아진다. 태블릿·모바일은 위 규칙 그대로. */
  .rt-home .hm-top .hm-top-row .hm-feed-match b { display: block; -webkit-line-clamp: unset; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 홈 TOP3 의 픽 값 칩 — 공용 .rt-pick-chip (prediction.css 와 같은 값). 홈은 prediction.css 를 싣지 않아 여기에 둔다. */
.rt-pick-chip { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 5px 12px; overflow: hidden; vertical-align: middle; border: 1px solid rgba(125, 140, 255, .42); border-radius: 10px; background: rgba(76, 92, 190, .18); color: #eef0ff; font-size: 13px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s ease, background-color .15s ease; }
.rt-home .hm-top-row:hover .rt-pick-chip { border-color: rgba(150, 165, 255, .7); background: rgba(76, 92, 190, .28); }
html:root .rt-home .hm-top .hm-pk-val { overflow: hidden; white-space: nowrap; }
html:root .rt-home .hm-top .hm-pk-val .rt-pick-chip { display: block; width: fit-content; max-width: 100%; }
@media (max-width: 767px) { html:root .rt-home .hm-top .hm-pk-val .rt-pick-chip { padding: 4px 10px; font-size: 11px; } }
@media (max-width: 767px) {
  html:root .rt-home .hm-top .hm-pk-val { display: inline; overflow: visible; }
  html:root .rt-home .hm-top .hm-pk-val .rt-pick-chip { display: inline-block; vertical-align: middle; }
  html:root .rt-home .hm-top .hm-pk i { vertical-align: middle; }
}

/* PC(≥1024px) 홈 — 히어로 배너와 상단 바로가기 카드(메뉴와 중복)를 숨겨 마감 임박 경기가 맨 위에 오게 한다. 태블릿(768~1023px)은 기존 그대로이며 마크업은 공용이라 지우지 않는다. */
@media (min-width: 1024px) {
  .rt-home .hm-hero, .rt-home .hm-services { display: none; }
  /* 마감 임박: 배당 칸은 2택·3택 모두 같은 칸 폭으로 맞춰 행마다 줄이 어긋나지 않게 한다. */
  .rt-home .hm-odds { justify-content: space-between; }
  /* 마감 임박 경기: 테두리·헤더 포인트를 레드코랄로, 종목 탭의 개수 배지는 탭(퍼플)과 어울리는 색으로. */
  .rt-home .hm-main > .hm-market { --sc: 255, 138, 76; border-color: rgba(148, 163, 200, .22); }
  .rt-home .hm-tab b { min-width: 22px; height: 20px; padding: 0 7px; border-color: rgba(167, 123, 255, .4); background: rgba(149, 107, 255, .18); color: #d7c8ff; font-size: 11px; font-weight: 700; }
  .rt-home .hm-tab.is-active b { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .22); color: #fff; }
  .rt-home .hm-odd { flex: 0 0 calc((100% - 12px) / 3); }
}
@media (min-width: 1281px) {
  .rt-home .hm-event { grid-template-columns: 168px minmax(0, 1fr) 232px 92px 78px; }
}

/* 모바일(≤767px) 홈 TOP3·팁스터 최신 픽 — 결과 배지에 확정 스코어('3:1')를 먼저 보이고(피드·랭커픽과 같은 pick_score), 없으면 기존 결과 글자. PC·태블릿은 기존 글자(.hm-bd-pc)를 그대로 쓴다. */
.rt-home .hm-bd-m { display: none; }
@media (max-width: 767px) {
 .rt-home .hm-bd-pc { display: none; }
 .rt-home .hm-bd-m { display: inline; }
 html:root .rt-home .hm-feed-row .hm-badge:has(.hm-bd-m:not(:empty)) { font-variant-numeric: tabular-nums; }
}
/* 모바일 다크 비적중 카드 — 피드·랭커픽과 같은 플럼 와인. 적중·대기·무효 색은 그대로. */
@media (max-width: 767px) {
 html:root:not([data-theme="light"]) .rt-home .hm-feed-row:is(.pd-pick-lose, .pd-pick-lost), html:root:not([data-theme="light"]) .rt-home .hm-feed .hm-feed-row:is(.pd-pick-lose, .pd-pick-lost):hover { background: #241A30; border-color: rgba(214, 112, 146, .34); }
 html:root:not([data-theme="light"]) .rt-home .hm-feed-row:is(.pd-pick-lose, .pd-pick-lost) .hm-badge { background: rgba(236, 100, 135, .13); border-color: rgba(236, 122, 152, .5); color: #FFA0B8; }
}

/* 모바일 다크 홈 TOP3·팁스터 최신 픽 카드 — 피드(/feed) 모바일 카드와 같은 규격: 패딩 9px 12px 8px · 순위 20px · 아바타 24px · 닉네임 13px/600 · 배지 22px · 로고 16px + 경기명 12px/600 ·
   경기명 아래 구분선 · 하단 픽/배당 12px. 예측 팀명 색상 칩(.rt-pick-chip)과 섹션 헤더·외곽은 그대로. 라이트·PC·태블릿은 이 블록 밖(경기명 로고 줄 .hm-mt-m 도 다크 모바일에서만 보인다). */
.rt-home .hm-mt-m { display: none; }
@media (max-width: 767px) {
 html:root:not([data-theme="light"]) .rt-home .hm-top .hm-feed-row.hm-top-row, html:root:not([data-theme="light"]) .rt-home .hm-feed .hm-feed-row { padding: 9px 12px 8px; margin-bottom: 8px; border-color: rgba(149, 107, 255, .3); }
 html:root:not([data-theme="light"]) .rt-home .hm-feed .hm-feed-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
 html:root:not([data-theme="light"]) .rt-home .hm-top .hm-top-head .hm-rank-no { width: 20px; height: 20px; font-size: 10px; }
 html:root:not([data-theme="light"]) .rt-home .hm-top-head .hm-ava, html:root:not([data-theme="light"]) .rt-home .hm-feed-row .hm-ava { width: 24px; height: 24px; }
 html:root:not([data-theme="light"]) .rt-home .hm-top-head .hm-feed-name, html:root:not([data-theme="light"]) .rt-home .hm-feed-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
 html:root:not([data-theme="light"]) .rt-home .hm-feed-row .hm-badge { height: 22px; }
 /* 경기: 로고 줄로 바꾸고 구분선은 경기명 아래(예측 위) */
 html:root:not([data-theme="light"]) .rt-home .hm-feed-match b { display: none; }
 html:root:not([data-theme="light"]) .rt-home .hm-feed-match .hm-mt-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
 html:root:not([data-theme="light"]) .rt-home .hm-mt-t { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
 html:root:not([data-theme="light"]) .rt-home .hm-mt-l, html:root:not([data-theme="light"]) .rt-home .hm-mt-l img { flex: none; display: inline-flex; width: 16px; height: 16px; object-fit: contain; }
 html:root:not([data-theme="light"]) .rt-home .hm-mt-vs { color: #fff; font-size: 11px; font-weight: 600; }
 html:root:not([data-theme="light"]) .rt-home .hm-feed-none { margin-top: 8px; }
 html:root:not([data-theme="light"]) .rt-home .hm-top .hm-top-row .hm-feed-match, html:root:not([data-theme="light"]) .rt-home .hm-feed .hm-feed-match { margin-top: 8px; padding: 0 0 6px; border-top: 0; border-bottom: 1px solid rgba(149, 107, 255, .2); }
 /* 하단 픽/배당 (칩은 그대로) */
 html:root:not([data-theme="light"]) .rt-home .hm-pk { padding-top: 3px; font-size: 12px; align-self: center; }
 html:root:not([data-theme="light"]) .rt-home .hm-pk-odds i { font-size: 11px; }
 html:root:not([data-theme="light"]) .rt-home .hm-pk:not(.hm-pk-odds) i::before { content: "픽"; font-size: 11px; }
 html:root:not([data-theme="light"]) .rt-home .hm-pk-odds .hm-pk-val { font-size: 12px; font-weight: 700; }
}

/* PC(≥1024px) 본문 시작 위치 통일 — 레이아웃이 헤더 아래 16px 를 주므로 홈 본문 안쪽 위 여백(22px)은 뺀다. 태블릿·모바일은 그대로. */
@media (min-width: 1024px) { .rt-home { padding-top: 0; padding-bottom: 0; } }

/* 모바일 홈(≤767px) 최종 구성: 마감 임박 → 수익순 TOP3 → 적중률순 TOP3(10~20픽) → (21픽 이상) → 적중률 100%. 기존 TOP3픽·팁스터 최신 픽은 모바일에서만 감추고(PC·태블릿은 그대로), 새 4섹션(.hm-rk)은 모바일에서만 보인다. 카드는 기존 TOP3 행(.hm-top-row)을 그대로 쓰고 '월 수익 · 적중률' 한 줄만 더한다. 아이콘 색은 /rank 계열 섹션색(금 · 핑크 · 블루 · 민트). */
.rt-home .hm-rk { display: none; }
@media (max-width: 767px) {
 html:root .rt-home .hm-main > .hm-top:not(.hm-rk), html:root .rt-home .hm-main > .hm-feed { display: none; }
 html:root .rt-home .hm-main > .hm-top.hm-rk { display: block; }
 .rt-home .hm-rk.is-total_profit { --sc: 229, 168, 75; }
 .rt-home .hm-rk.is-percentage_pick_10_to_20 { --sc: 242, 123, 181; }
 .rt-home .hm-rk.is-percentage_pick_more_20 { --sc: 94, 168, 255; }
 .rt-home .hm-rk.is-percentage_100 { --sc: 46, 230, 166; }
 html:root .rt-home .hm-rk .hm-head-icon { border: 1px solid rgba(var(--sc), .4); background: rgba(var(--sc), .12); color: rgb(var(--sc)); }
 html:root .rt-home .hm-rk .hm-more { color: rgb(var(--sc)); }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--h-text2); font-size: 12px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats b { margin-left: 4px; font-size: 14px; font-weight: 800; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats { display: none; }   /* 모바일 TOP3 카드도 월 수익·적중률은 보이지 않는다(PC 와 같다) */
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match, html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-none { grid-row: 3; }
 html:root .rt-home .hm-top.hm-rk .hm-pk { grid-row: 4; }
}

}

/* TOP3 섹션의 월 수익·적중률 색(모바일·PC 공용) */
@media (max-width: 767px), (min-width: 1024px) {
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats b.is-up { color: #2ee6a6; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats b.is-down { color: #ff7a8c; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats b.is-rate { color: #b49aff; }
}

/* PC(≥1024px) 홈 — 기존 세로형 'TOP3픽' 대신 4개 TOP3 섹션(.hm-rk)을 가로형 리스트로 보여 준다. 한 줄 = 순위 배지 · 아바타 · 닉네임 / 월 수익 · 적중률 / ›. 섹션 색·외곽 테두리 투명도·상단 7% 색조·아이콘 상자는 모바일 홈에서 확정한 값 그대로. 순서: 마감임박 → TOP3 4개 → 팁스터 최신 픽(이미 가로형 리스트라 그대로). 태블릿(768~1023px)은 기존 TOP3픽 그대로. */
@media (min-width: 1024px) {
 .rt-home .hm-main > .hm-market { order: 1; }
 .rt-home .hm-main > .hm-rk { order: 2; }
 .rt-home .hm-main > .hm-feed { order: 3; }
 html:root .rt-home .hm-main > .hm-top:not(.hm-rk) { display: none; }
 .rt-home .hm-main > .hm-rk.is-total_profit { --sc: 229, 168, 75; }
 .rt-home .hm-main > .hm-rk.is-percentage_pick_10_to_20 { --sc: 242, 123, 181; }
 .rt-home .hm-main > .hm-rk.is-percentage_pick_more_20 { --sc: 94, 168, 255; }
 .rt-home .hm-main > .hm-rk.is-percentage_100 { --sc: 46, 230, 166; }
 html:root .rt-home .hm-main > .hm-top.hm-rk { display: block; padding: 0; background: var(--h-card); }
 html:root .rt-home .hm-top.hm-rk > .hm-head { margin: 0; padding: 12px 16px; background: linear-gradient(90deg, rgba(149, 107, 255, .13), rgba(149, 107, 255, .03)); }
 html:root .rt-home .hm-top.hm-rk .hm-head-text p { display: none; }
 html:root .rt-home .hm-top.hm-rk .hm-feed-row.hm-top-row { display: grid; grid-template-columns: 28px 34px minmax(0, 1.3fr) minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; margin: 0; padding: 8px 28px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row :is(.hm-top-head, .hm-top-foot) { display: contents; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rank-no { grid-column: 1; grid-row: 1 / 3; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-ava { grid-column: 2; grid-row: 1 / 3; width: 34px; height: 34px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-name { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats { grid-column: 4; grid-row: 1; display: flex; align-items: baseline; justify-content: flex-end; gap: 16px; color: var(--h-text2); font-size: 12px; white-space: nowrap; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats b { margin-left: 5px; font-size: 14px; font-weight: 800; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-top-head .hm-top-badge { grid-column: 5; grid-row: 1 / 3; align-self: center; justify-self: end; display: inline-flex; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match { grid-column: 3; grid-row: 2; min-width: 0; margin: 0; padding: 0; border: 0; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match b { font-size: 12.5px; font-weight: 600; color: var(--h-text2); }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match .hm-mt-m { display: none; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-none { grid-column: 3 / 5; grid-row: 2; margin: 0; padding: 0; font-size: 12.5px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-top-foot .hm-feed-pick { grid-column: 4; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 14px; width: auto; min-width: 0; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; padding: 0; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk > i { margin: 0; padding: 0; font-size: 11px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk-odds .hm-pk-val { font-size: 13px; font-weight: 800; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .rt-pick-chip { padding: 3px 10px; font-size: 13px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-top-foot .hm-badge { display: none; }
}

/* PC(≥1024px) TOP3 · 팁스터 최신 픽 — 행 구분선 중심의 통일된 표 스타일(개별 테두리·결과색 배경·금은동 카드 강조 없이, 결과는 배지 색으로만). ≥1280px 에서는 TOP3 와 최신 픽이 같은 열(순위·아바타·닉네임/통계·리그/시각·홈 vs 원정·픽·배당·결과)에 정렬된다. 리그 로고는 이 조회 경로에 데이터가 없어 그리지 않는다. 모바일·태블릿 밖. */
html:root .rt-home .hm-lg { display: none; }
@media (min-width: 1024px) {
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats { display: none; }   /* 월 수익·적중률은 PC 홈 TOP3 에서 보이지 않는다(모바일은 그대로) */
 html:root .rt-home .hm-top.hm-rk .hm-feed-row.hm-top-row { border-width: 1px 0 0; border-style: solid; border-color: rgba(148, 163, 200, .14); border-radius: 0; background: transparent; box-shadow: none; margin: 0; }
 html:root .rt-home .hm-top.hm-rk .hm-feed-row.hm-top-row:last-child { margin: 0; }
 html:root .rt-home .hm-feed .hm-feed-row { padding-left: 28px; padding-right: 28px; }
 html:root .rt-home .hm-top.hm-rk .hm-feed-row.hm-top-row:hover, html:root .rt-home .hm-feed .hm-feed-row:hover { background: rgba(var(--sc), .05); }
 html:root .rt-home .hm-feed .hm-feed-row:is(.pd-pick-win, .pd-pick-lose, .pd-pick-lost) { background: transparent; }
 html:root .rt-home .hm-top.hm-rk > .hm-head { margin-bottom: 0; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .rt-pick-chip { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk:not(.hm-pk-odds), html:root .rt-home .hm-pickbook .hm-feed-row .hm-pk:not(.hm-pk-odds) { min-width: 0; overflow: hidden; justify-content: flex-start; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk:not(.hm-pk-odds) .hm-pk-val, html:root .rt-home .hm-pickbook .hm-feed-row .hm-pk:not(.hm-pk-odds) .hm-pk-val { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0 auto 0 0; }
}
@media (min-width: 1280px) {
 html:root .rt-home .hm-top.hm-rk .hm-feed-row.hm-top-row, html:root .rt-home .hm-feed .hm-feed-row { grid-template-columns: 28px 30px minmax(5rem, 1.4fr) minmax(0, 4.3fr) minmax(12rem, 2fr) minmax(2.4rem, .6fr) minmax(3.25rem, .8fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 7px 28px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rank-no { grid-column: 1; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-ava, html:root .rt-home .hm-feed .hm-feed-row .hm-ava { grid-column: 2; grid-row: 1 / 3; width: 30px; height: 30px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-name, html:root .rt-home .hm-feed .hm-feed-row .hm-feed-name { grid-column: 3; grid-row: 1 / 3; font-size: 14px; }
 html:root .rt-home .hm-feed .hm-feed-row .hm-feed-name { grid-row: 1 / 3; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats { grid-column: 3; grid-row: 2; justify-content: flex-start; gap: 6px; font-size: 11px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats b { margin-left: 3px; font-size: 12px; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-rk-stats > span + span { padding-left: 7px; border-left: 1px solid rgba(148, 163, 200, .28); }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-lg, html:root .rt-home .hm-feed .hm-feed-row .hm-lg { display: none; }   /* 리그명·경기 날짜는 보이지 않는다 */
 html:root .rt-home .hm-lg b { display: none; }   /* 리그명은 보이지 않는다(경기 시각만) */
 html:root .rt-home .hm-lg small { overflow: hidden; align-self: center; color: var(--h-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match, html:root .rt-home .hm-feed .hm-feed-row .hm-feed-match { grid-column: 4; grid-row: 1 / 3; min-width: 0; margin: 0; padding: 0; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-none { grid-column: 4 / 8; grid-row: 1 / 3; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match > b, html:root .rt-home .hm-feed .hm-feed-row .hm-feed-match:has(.hm-mt-m) > b { display: none; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match .hm-mt-m, html:root .rt-home .hm-feed .hm-feed-row .hm-feed-match .hm-mt-m { display: flex; align-items: center; gap: 8px; min-width: 0; }
 html:root .rt-home .hm-feed-match .hm-mt-t { display: block; flex: 1 1 0; min-width: 0; max-height: 2.3em; overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.15; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
 html:root .rt-home .hm-feed-match .hm-mt-l, html:root .rt-home .hm-feed-match .hm-mt-l img { display: inline-flex; width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
 html:root .rt-home .hm-feed-match .hm-mt-l { float: left; margin: 1px 6px 0 0; }
 html:root .rt-home .hm-feed-match .hm-mt-vs { flex: none; color: var(--h-muted); font-size: 11px; font-weight: 600; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-top-foot .hm-feed-pick, html:root .rt-home .hm-feed .hm-feed-row .hm-feed-pick { display: contents; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk:not(.hm-pk-odds), html:root .rt-home .hm-feed .hm-feed-row .hm-pk:not(.hm-pk-odds) { grid-column: 5; grid-row: 1 / 3; justify-self: stretch; min-width: 0; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk-odds, html:root .rt-home .hm-feed .hm-feed-row .hm-pk-odds { grid-column: 6; grid-row: 1 / 3; display: flex; align-items: center; gap: 5px; justify-self: end; padding: 0; text-align: right; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-top-head .hm-top-badge, html:root .rt-home .hm-feed .hm-feed-row .hm-badge { grid-column: 7; grid-row: 1 / 3; justify-self: end; align-self: center; }
 html:root .rt-home .hm-feed .hm-feed-row .hm-pk { display: flex; align-items: center; justify-content: flex-start; gap: 5px; padding: 0; text-align: left; }
 html:root .rt-home .hm-feed .hm-feed-row .hm-pk > i, html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk > i { display: none; }
 html:root .rt-home .hm-feed .hm-feed-row .hm-pk-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
 html:root .rt-home .hm-feed-match .hm-mt-t { display: flex; align-items: center; }
 html:root .rt-home .hm-feed-match .hm-mt-t:first-child { justify-content: flex-end; text-align: right; }
 html:root .rt-home .hm-feed-match .hm-mt-l { float: none; flex: none; margin: 0 6px 0 0; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk:not(.hm-pk-odds), html:root .rt-home .hm-feed .hm-feed-row .hm-pk:not(.hm-pk-odds) { justify-content: center; }
 html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-pk:not(.hm-pk-odds) .hm-pk-val, html:root .rt-home .hm-pickbook .hm-feed-row .hm-pk:not(.hm-pk-odds) .hm-pk-val { margin: 0; }
}

/* 홈 마감 임박 경기 PC(≥1024px) 5경기 표시(6번째 줄과 종목 탭 숫자만 PC 용) · TOP3 섹션 제목('TOP3픽' = PC, 모바일은 기존 'TOP3'). 모바일·태블릿은 밖. */
.rt-home .hm-tab b.hm-n-pc { display: none; }
@media (min-width: 1024px) {
 html:root .rt-home .hm-event.hm-pc-hide, html:root .rt-home .hm-tab.hm-pc-none { display: none; }
 html:root .rt-home .hm-event-league small { display: none; }   /* PC 마감 임박 경기는 경기 시각 줄을 보이지 않는다(리그명만) */
 html:root .rt-home .hm-market .hm-tabs { display: none; }   /* PC 마감 임박 경기는 종목 탭 없이 5경기를 그대로 보인다 */
 html:root .rt-home .hm-tab b.hm-n-all { display: none; }
 html:root .rt-home .hm-tab b.hm-n-pc { display: inline-flex; }
}
@media (max-width: 767px) {
 .rt-home .hm-rk .hm-t-pc { display: none; }
 .rt-home .hm-rk .hm-t-m { display: inline; }
}

/* PC(≥1024px) '투데이 픽'(수익순 4~13위) — 기존 '팁스터 최신 픽' 자리를 대신한다. 행은 최신 픽과 같은 마크업·같은 열 정렬. 태블릿 이하에서는 감춘다. */
html:root .rt-home .hm-main > .hm-pickbook { display: none; }
@media (min-width: 1024px) {
 html:root .rt-home .hm-main > .hm-pickbook { display: block; }
 html:root .rt-home .hm-main > .hm-feed:not(.hm-pickbook) { display: none; }
 html:root .rt-home .hm-main > .hm-pickbook { order: 3; }
}

/* PC 홈 '투데이 픽' 의 선택 픽도 TOP3픽과 같은 퍼플 테두리 칩으로(칩이 길면 말줄임). */
@media (min-width: 1024px) {
 html:root .rt-home .hm-pickbook .hm-feed-row .rt-pick-chip { display: block; margin: 0; width: fit-content; max-width: 100%; padding: 3px 10px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
 html:root .rt-home .hm-pickbook .hm-feed-row:hover .rt-pick-chip { border-color: rgba(150, 165, 255, .7); background: rgba(76, 92, 190, .28); }
}

/* PC 1024~1279px — '투데이 픽' 행도 TOP3픽과 같은 2줄 구성(닉네임/경기명 · 픽·배당 · 결과)으로 열을 맞춘다. */
@media (min-width: 1024px) and (max-width: 1279px) {
 html:root .rt-home .hm-pickbook .hm-feed-row { display: grid; grid-template-columns: 34px minmax(0, 1.3fr) minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 8px 28px; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-ava { grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 15px; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-match { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; padding: 0; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-match b { font-size: 12.5px; font-weight: 600; color: var(--h-text2); }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-pick { grid-column: 3; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-pk { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; padding: 0; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-pk > i { margin: 0; padding: 0; font-size: 11px; font-style: normal; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-badge { grid-column: 4; grid-row: 1 / 3; align-self: center; justify-self: end; }
}

/* PC(≥1024px) 우측 랭킹 패널 — 수익순: 제목 '수익순'·보조 문구(적중률·전적) 없이 수익 금액만 키워 강조 / 적중률순: 전적(N전·N승·N패)을 작은 배지 3개로. 태블릿 이하는 기존 그대로. */
.rt-home .hm-rt-pc { display: none; }
@media (min-width: 1024px) {
 html:root .rt-home .hm-rt-tb { display: none; }
 html:root .rt-home .hm-rt-pc { display: inline; }
 html:root .rt-home .hm-aside > .hm-panel:has(#hm-rank-title) .hm-rank-name small { display: none; }
 html:root .rt-home .hm-aside > .hm-panel:has(#hm-rank-title) .hm-profit { font-size: 17px; font-weight: 800; }
 html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name small { display: flex; gap: 4px; overflow: hidden; }
 html:root .rt-home .hm-rec { flex: none; padding: 0 6px; border: 1px solid rgba(140, 160, 205, .32); border-radius: 999px; background: rgba(140, 160, 205, .1); color: #a9b6d6; font-size: 11px; font-weight: 700; line-height: 1.3; }
 html:root .rt-home .hm-rec.is-w { border-color: rgba(46, 230, 166, .38); background: rgba(46, 230, 166, .1); color: #2ee6a6; }
 html:root .rt-home .hm-rec.is-l { border-color: rgba(255, 92, 124, .4); background: rgba(255, 92, 124, .1); color: #ff8da4; }
}

/* PC(≥1280px) '투데이 픽' — 순위 배지 없는 6열(아바타 · 닉네임 · 경기 · 픽 · 배당 · 결과). TOP3픽과 같은 비율 체계, 빠진 두 열의 폭은 경기·픽 열이 가져간다. */
@media (min-width: 1280px) {
 html:root .rt-home .hm-pickbook .hm-feed-row { grid-template-columns: 30px minmax(5rem, 1.2fr) minmax(0, 5fr) minmax(13.5rem, 2.8fr) minmax(2.4rem, .6fr) minmax(3.25rem, .8fr); }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-ava { grid-column: 1; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-name { grid-column: 2; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-match { grid-column: 3; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-pk:not(.hm-pk-odds) { grid-column: 4; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-pk-odds { grid-column: 5; }
 html:root .rt-home .hm-pickbook .hm-feed-row .hm-badge { grid-column: 6; }
}

/* 모바일(≤767px) 다크 홈 TOP3픽 카드 단순화 — 카드 기본 배경·테두리는 중립 인디고 하나(적중·미적중만 아래 줄의 약한 상태 틴트), 글로우 없음.
   픽 선택값은 박스 없이 밝은 글자(11px/700)만, 배당은 오른쪽 끝(2열) 그대로. 긴 픽 이름은 줄바꿈으로 읽히게 두고 배당 열은 밀리지 않는다. 라이트·PC·태블릿 밖. */
@media (max-width: 767px) {
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row, html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row:is(.pd-pick-win, .pd-pick-lose, .pd-pick-lost, .pd-pick-pending, .pd-pick-void) { padding: 8px 12px 7px; margin-bottom: 6px; border-color: rgba(149, 107, 255, .16); background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); box-shadow: none; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row:hover { border-color: rgba(149, 107, 255, .3); }
 /* 상태 틴트 — 피드·랭커픽과 같은 값(적중 #0D2728 청록 · 미적중 #241A30 플럼 · 대기는 위의 중립 인디고). 카드 배경과 테두리에만, 아주 약하게. */
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row.pd-pick-win, html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row.pd-pick-win:hover { background: #0D2728; border-color: rgba(46, 230, 166, .3); }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row:is(.pd-pick-lose, .pd-pick-lost), html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row:is(.pd-pick-lose, .pd-pick-lost):hover { background: #241A30; border-color: rgba(214, 112, 146, .34); }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row.pd-pick-void { border-color: rgba(160, 170, 196, .22); }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match { margin-top: 6px; padding-bottom: 5px; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-pk { display: flex; flex-direction: row; align-items: center; align-self: center; padding-top: 2px; line-height: 1.3; }   /* 픽 · 배당 두 칸을 같은 가로축(세로 가운데)에 놓는다 */
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-pk-val { font-size: 11px; line-height: 1.3; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-pk > i { line-height: 1.3; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-pk-odds .hm-pk-val { position: relative; top: .5px; }   /* 숫자는 한글보다 글자 중심이 반 픽셀 높아 보여 맞춘다 */
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-pk-odds .hm-pk-val { font-size: 11px; }   /* 배당 숫자도 픽 선택값과 같은 11px 로 맞춘다(줄 높이 같음 → 같은 기준선) */
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-pk-val .rt-pick-chip, html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row:hover .rt-pick-chip { display: inline-block; box-sizing: border-box; width: auto; max-width: 100%; margin: 0; padding: 3px 10px; vertical-align: middle; overflow: visible; border: 1px solid rgba(125, 140, 255, .42); border-radius: 10px; background: rgba(76, 92, 190, .18); color: #eef0ff; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: left; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
}

/* 모바일(≤767px) 홈 구성: 마감 임박 경기는 숨기고(PC·태블릿은 그대로), TOP3 4개 섹션 다음에 기존 '투데이 픽'을 보인다. 같은 마크업·같은 조회 — 보이게만 한다. */
@media (max-width: 767px) {
 html:root .rt-home .hm-main > .hm-market { display: none; }
 html:root .rt-home .hm-main > .hm-pickbook { display: block; order: 3; }
 html:root .rt-home .hm-pickbook > a.hm-feed-row:nth-of-type(n+4) { display: grid; }   /* 최신 픽의 '3건만'은 투데이 픽에 적용하지 않는다 — 4~13위 10건 전부 */
}

/* 모바일(≤767px) 다크 홈 — TOP3픽 4개 섹션·투데이 픽 5개 섹션의 헤더·면·외곽선을 하나로 통일: 제목 14px 흰색 · 아이콘 26px 흰색(박스는 기본 인디고 + 공통 퍼플 테두리) · 전체보기 12px #D5D9E8,
   섹션 배경은 섹션색 틴트 없이 기본 다크 인디고, 외곽선은 기본 퍼플(--h-line). 색은 카드의 결과 상태와 순위 메달에만 남긴다. 제목은 한 줄이고 아주 좁은 폭(≤340px)에서만 한 단계 더 줄여 전체보기와 겹치지 않게 한다. 라이트·PC·태블릿 밖. */
@media (max-width: 767px) {
 html:root:not([data-theme="light"]) .rt-home .hm-main > :is(.hm-top.hm-rk, .hm-pickbook) > .hm-head { padding: 7px 12px; gap: 8px; }
 html:root:not([data-theme="light"]) .rt-home .hm-main > :is(.hm-top.hm-rk, .hm-pickbook) > .hm-head .hm-head-icon { flex-basis: 26px; width: 26px; height: 26px; border: 1px solid var(--h-line); border-radius: 8px; background: rgba(149, 107, 255, .12); color: #e6e9f5; }
 html:root:not([data-theme="light"]) .rt-home .hm-main > :is(.hm-top.hm-rk, .hm-pickbook) > .hm-head .hm-head-icon svg { width: 16px; height: 16px; }
 html:root:not([data-theme="light"]) .rt-home .hm-main > :is(.hm-top.hm-rk, .hm-pickbook) > .hm-head h2 { color: #fff; font-size: 14px; line-height: 1.25; white-space: nowrap; }
 html:root:not([data-theme="light"]) .rt-home .hm-main > :is(.hm-top.hm-rk, .hm-pickbook) > .hm-head .hm-more { flex: none; color: #D5D9E8; font-size: 12px; white-space: nowrap; }
 html:root:not([data-theme="light"]) .rt-home .hm-main > :is(.hm-top.hm-rk, .hm-pickbook) { border-color: var(--h-line); background: var(--h-card); }
}
@media (max-width: 340px) {   /* 320px 급 아주 좁은 폰: 제목을 한 단계 더 줄이고 그래도 길면 말줄임(전체보기와 겹치지 않는다) */
 html:root:not([data-theme="light"]) .rt-home .hm-main > :is(.hm-top.hm-rk, .hm-pickbook) > .hm-head h2 { overflow: hidden; font-size: 13px; text-overflow: ellipsis; }
}

/* 모바일(≤767px) 다크 홈 '투데이 픽' 카드 — 위 TOP3 카드와 같은 글꼴 크기·여백·카드 면(중립 인디고, 적중·미적중은 약한 틴트)·박스 없는 픽 값으로 맞춘다. 같은 마크업, 보이는 값만 같게. 라이트·PC·태블릿 밖. */
@media (max-width: 767px) {
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row, html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row:is(.pd-pick-win, .pd-pick-lose, .pd-pick-lost, .pd-pick-pending, .pd-pick-void) { padding: 8px 12px 7px; margin-bottom: 6px; border-color: rgba(149, 107, 255, .16); background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); box-shadow: none; }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row:hover { border-color: rgba(149, 107, 255, .3); }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row.pd-pick-win, html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row.pd-pick-win:hover { background: #0D2728; border-color: rgba(46, 230, 166, .3); }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row:is(.pd-pick-lose, .pd-pick-lost), html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row:is(.pd-pick-lose, .pd-pick-lost):hover { background: #241A30; border-color: rgba(214, 112, 146, .34); }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row.pd-pick-void { border-color: rgba(160, 170, 196, .22); }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-feed-match { margin-top: 6px; padding-bottom: 5px; }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-pk { display: flex; flex-direction: row; align-items: center; align-self: center; padding-top: 2px; font-size: 12px; line-height: 1.3; }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-pk > i { line-height: 1.3; }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-pk-val { font-size: 11px; line-height: 1.3; }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-pk-odds .hm-pk-val { position: relative; top: .5px; font-weight: 700; }
 html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .rt-pick-chip, html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row:hover .rt-pick-chip { display: inline-block; box-sizing: border-box; width: auto; max-width: 100%; margin: 0; padding: 3px 10px; vertical-align: middle; overflow: visible; border: 1px solid rgba(125, 140, 255, .42); border-radius: 10px; background: rgba(76, 92, 190, .18); color: #eef0ff; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: left; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
}

/* 모바일(≤767px) 다크 홈 TOP3픽 · 투데이 픽 카드 가독성 — 같은 카드 체계를 한 번에: 카드 안 여백·줄 간격을 한 단계 넓히고(높이 +약 10px), 닉네임은 한 단계 키워 굵게(순서: 닉네임 → 경기명 → 픽·배당가 눈에 들어오게),
   순위 메달은 20→18px 로 줄여 닉네임보다 튀지 않게. 구조(3줄)·배당 우측 정렬·상태 배경·배지 색은 그대로. 라이트·PC·태블릿 밖. */
@media (max-width: 767px) {
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row, html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row:is(.pd-pick-win, .pd-pick-lose, .pd-pick-lost, .pd-pick-pending, .pd-pick-void), html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row, html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row:is(.pd-pick-win, .pd-pick-lose, .pd-pick-lost, .pd-pick-pending, .pd-pick-void) { padding: 10px 12px 9px; margin-bottom: 8px; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-name, html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-feed-name { font-size: 14px; font-weight: 700; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-top-head .hm-rank-no { width: 18px; height: 18px; border-width: 1px; border-radius: 6px; font-size: 10px; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-match, html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-feed-match { margin-top: 8px; padding-bottom: 7px; }
 html:root:not([data-theme="light"]) .rt-home .hm-top.hm-rk .hm-top-row .hm-pk, html:root:not([data-theme="light"]) .rt-home .hm-pickbook .hm-feed-row .hm-pk { padding-top: 5px; }
}

/* 모바일 다크: 픽 박스가 길어져도 우측 '배당' 글자와 붙지 않게 여백만 둔다(박스 모양은 위 규칙). */
@media (max-width: 767px) {
 html:root:not([data-theme="light"]) .rt-home .hm-feed-pick > .hm-pk:not(.hm-pk-odds) { min-width: 0; margin-right: 8px; }
 html:root:not([data-theme="light"]) .rt-home .hm-pk:not(.hm-pk-odds) > i { flex: none; white-space: nowrap; }
}

/* 홈: 회원 아바타만 숨긴다. 순위 메달·순위 숫자·레벨 아이콘·닉네임은 그대로. 피드(feed_v2.css)와 같은 display:none 이고,
   홈 행은 아바타가 한 열(칸)을 차지하는 격자라서, 열 번호가 정해진 행은 그 열 폭을 0 으로 접고 닉네임을 앞 간격만큼 당기고, 자동 배치 행은 그 열을 아예 뺀다. */
html:root .rt-home .hm-ava { display: none; }
/* 이달의 랭킹(사이드): 순위 · [아바타] · 닉네임 · 수익 */
html:root .rt-home .hm-rank-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
/* 최신 픽 · 투데이 픽 행 (태블릿 이하·기본) */
html:root .rt-home .hm-feed-row { grid-template-columns: 120px minmax(0, 1.5fr) minmax(0, 1fr) 62px; }
@media (max-width: 1280px) {
  html:root .rt-home .hm-feed-row { grid-template-columns: 100px minmax(0, 1.4fr) minmax(0, 1fr) 58px; }
}
@media (max-width: 767px) {
  html:root .rt-home .hm-feed .hm-feed-row { grid-template-columns: 0 minmax(0, 1fr) auto; }
  html:root .rt-home .hm-feed .hm-feed-row .hm-feed-name { margin-left: -8px; }
}
@media (max-width: 767px) {
  html:root:not([data-theme="light"]) .rt-home .hm-feed .hm-feed-row { grid-template-columns: 0 minmax(0, 1fr) auto; }
}
/* TOP3 카드 머리(순위 · 닉네임)는 flex 라 열을 접을 필요가 없다 — 당김 없음 */
html:root .rt-home .hm-top-head .hm-feed-name { margin-left: 0; }
/* PC(≥1024px) TOP3 섹션 행: 순위 · [아바타] · 닉네임 … */
@media (min-width: 1024px) {
  html:root .rt-home .hm-top.hm-rk .hm-feed-row.hm-top-row { grid-template-columns: 28px 0 minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-name { margin-left: -12px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html:root .rt-home .hm-pickbook .hm-feed-row { grid-template-columns: 0 minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-name, html:root .rt-home .hm-pickbook .hm-feed-row .hm-feed-match { margin-left: -12px; }
}
@media (min-width: 1280px) {
  html:root .rt-home .hm-top.hm-rk .hm-feed-row.hm-top-row, html:root .rt-home .hm-feed .hm-feed-row { grid-template-columns: 28px 0 minmax(5rem, 1.4fr) minmax(0, 4.3fr) minmax(12rem, 2fr) minmax(2.4rem, .6fr) minmax(3.25rem, .8fr); }
  html:root .rt-home .hm-top.hm-rk .hm-top-row .hm-feed-name, html:root .rt-home .hm-feed .hm-feed-row .hm-feed-name { margin-left: -10px; }
  html:root .rt-home .hm-pickbook .hm-feed-row { grid-template-columns: 0 minmax(5rem, 1.2fr) minmax(0, 5fr) minmax(13.5rem, 2.8fr) minmax(2.4rem, .6fr) minmax(3.25rem, .8fr); }
}

/* 홈 '적중률순' TOP5: 전적 배지 3개 대신 승패 비율 막대(승수/(승수+패수)) + 아래 글자 '14전 11승 3패'. 이 카드(#hm-pct-title)에만 적용. */
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name small { display: flex; gap: 6px; margin-top: 3px; overflow: hidden; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec { padding: 0; border: 0; border-radius: 0; background: none; font-size: 11.5px; font-weight: 600; line-height: 1.3; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-w { background: none; color: #2ee6a6; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-l { background: none; color: #ff7a92; }
html:root[data-theme="light"] .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-w { color: #0d7a55; }
html:root[data-theme="light"] .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-l { color: #c1304f; }
.rt-home .hm-wl { display: none; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-wl { display: flex; width: 100%; height: 8px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(140, 160, 205, .18); }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-wl i { display: block; height: 100%; min-width: 0; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-wl i.is-w { background: #9B78E8; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-wl i.is-l { background: #ff5c7c; }
html:root[data-theme="light"] .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-wl i.is-w { background: #9B78E8; }  /* 승리 막대: 수익순 민트와 겹치지 않게 라벤더 퍼플(다크·라이트 공통) */
html:root[data-theme="light"] .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-wl i.is-l { background: #e8466a; }
/* 적중률순: 전적('14전 11승 3패')을 닉네임 오른쪽 같은 줄로 옮기고, 승패 막대는 그 아래 한 줄로 둔다. 좁으면 닉네임이 말줄임으로 줄고 전적은 한 줄을 지킨다. */
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name { display: grid; grid-template-columns: minmax(0, max-content) max-content 1fr; align-items: center; column-gap: 8px; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name b { grid-column: 1; grid-row: 1; min-width: 0; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name small { grid-column: 2; grid-row: 1; margin-top: 0; white-space: nowrap; overflow: visible; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name .hm-wl { grid-column: 1 / -1; grid-row: 2; }
/* 사이드가 좁은 폭(≈320px)에서도 닉네임이 말줄임 되지 않도록 이 카드 행의 좌우 여백·간격·전적 글자만 조금 줄인다. */
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-row { padding-left: 14px; padding-right: 14px; gap: 10px; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name { column-gap: 6px; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name small { gap: 4px; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec { font-size: 11px; }

/* 적중률순: 총전('14전')은 빼고 '11승' · '3패' 를 각각 네모 칩으로 보인다(이 카드만). */
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rank-name small { gap: 5px; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec { padding: 1px 6px; border: 1px solid rgba(140, 160, 205, .32); border-radius: 5px; font-size: 10.5px; font-weight: 700; line-height: 1.3; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-w { border-color: rgba(46, 230, 166, .4); background: rgba(46, 230, 166, .12); color: #7ff0c9; }
html:root .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-l { border-color: rgba(255, 92, 124, .42); background: rgba(255, 92, 124, .12); color: #ffa3b4; }
html:root[data-theme="light"] .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-w { color: #0b6a49; }
html:root[data-theme="light"] .rt-home .hm-aside > .hm-panel:has(#hm-pct-title) .hm-rec.is-l { color: #b02a47; }