/* ranking.css — 랭킹. app.css 에서 주제별로 나눔; layout.html 이 base → … 순서로 전부 링크한다. */
/* 제목 줄: 제목+시즌 선택 · 시즌|이번 주 · ⓘ · (오른쪽 끝) 내 순위 칩. 좁으면 칩이 다음 줄로 */
  h3.rkh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; }
  h3.rkh .rktabs { display: inline-flex; gap: 14px; margin-right: 4px; }   /* 랭킹 종류: 수익률 | 배당 (10/7) */
  h3.rkh .rktabs a { padding: 4px 0; border-bottom: 2px solid transparent; font-size: 16px; font-weight: 800; color: var(--muted-2, #9aa3b5); white-space: nowrap; }
  h3.rkh .rktabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
  h3.rkh .rkt { font-size: 16px; font-weight: 800; color: var(--navy); white-space: nowrap; }
  h3.rkh .rkwk { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  h3.rkh .rksel { position: relative; display: inline-flex; }
  h3.rkh .rksel select { appearance: none; -webkit-appearance: none; height: 30px; padding: 0 30px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; } /* 시즌 선택: 예측판 보기 칩과 같은 알약 */
  h3.rkh .rksel::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); pointer-events: none; }
  h3.rkh .tip { margin-left: 0; }
  h3.rkh .brk { display: none; }
  @media (max-width: 700px) {
    h3.rkh .rktabs { gap: 12px; } h3.rkh .rktabs a { font-size: 15px; }
    h3.rkh { padding: 10px 12px; gap: 6px 8px; }
    h3.rkh .rksel select { height: 28px; font-size: 12px; padding: 0 24px 0 10px; }
    h3.rkh .brk { display: block; flex-basis: 100%; height: 0; }   /* 모바일: 제목+시즌 선택 / 세그먼트 줄로 나눔 */
  }
  .rkseg { font-weight: 600; } /* 랭킹: 시즌 | 이번 주 */
  .merank { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px 10px; background: #fff; white-space: nowrap; }
  .merank b { color: var(--navy); }
  .merank small { color: var(--muted); }
  .merank.mb { display: none; }   /* 모바일: 제목 줄 대신 필터 줄 아래 '내 행' 한 줄로 (제목 줄에서 혼자 꺾이던 것, 10/13) */
  @media (max-width: 700px) {
    .merank.pc { display: none; }
    .merank.mb { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 10px; align-items: center; gap: 0 10px; margin: 0; padding: 10px 12px 10px 9px; border: 0; border-left: 3px solid var(--navy); border-bottom: 1px solid var(--line); border-radius: 0; background: #f2f6fd; }   /* 표의 행처럼: 순위 · 이름 + '내 순위' · 수익률 (B안 10/13) */
    .merank.mb::after { content: "›"; font-size: 16px; color: var(--muted); }
    .merank.mb .mr-rk { text-align: center; font-size: 17px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
    .merank.mb .mr-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .merank.mb .mr-nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--navy); }
    .merank.mb .mr-nm small { font-size: 11.5px; color: var(--muted); }
    .merank.mb .mr-v { font-size: 15px; font-weight: 800; text-align: right; }
  }
/* PC 표: 순위 | 참가자(이름 + 봇 설명 한 줄, 넘치면 …) | 숫자 열은 오른쪽 정렬·고정폭 숫자. 봇 행 전체 분홍 배경은 뺐다(봇이 많아 표가 통째로 분홍이 되던 것) */
  table.t.rank { font-variant-numeric: tabular-nums; } /* 선택자를 table.t.rank 로 쓰는 이유: 뒤에 오는 stats.css 의 표 공통 규칙(table.t td, 여백 8px·밑줄)보다 우선해야 해서 */
  table.t.rank th, table.t.rank td { padding: 9px 10px; white-space: nowrap; vertical-align: middle; }
  table.t.rank th.num, table.t.rank td.num { text-align: right; }
  table.t.rank th.rk, table.t.rank td.rk { width: 62px; text-align: center; }
  table.t.rank td.nm { max-width: 0; width: 38%; } /* max-width:0 이 있어야 표 셀에서 … 줄임이 먹는다 */
  table.t.rank .nmw { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.t.rank .note { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); margin-top: 1px; }
  table.t.rank td.roi { font-size: 15px; font-weight: 800; }
  table.t.rank td.net { font-weight: 700; }
  table.t.rank td.money { color: var(--text-2); font-weight: 500; }
  table.t.rank td.ast { color: var(--text); font-weight: 700; }
  table.t.rank td.buy b { font-size: 14px; }
  table.t.rank td.buy small, table.t.rank td.hit small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
  table.t.rank td.hit b { font-weight: 700; }
  table.t.rank tbody tr:hover td { background: #f3f6fb; }
  table.t.rank tbody tr:has(a.uname) { cursor: pointer; }   /* 줄 전체가 참가자 창을 연다 */
  table.t.rank tr.me td { background: var(--blue-light) !important; }
  table.t.rank .uname { color: var(--navy); font-weight: 800; cursor: pointer; }
  table.t.rank .uname:hover { text-decoration: underline; }
  .bdg { font-size: 13px; margin-left: 2px; cursor: help; } /* 시즌 시상 배지 (마감된 시즌만) */
  .bdg.today { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 7px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; line-height: 1.4; vertical-align: 1.5px; letter-spacing: .2px; } /* 오늘 경기에 예측을 건 참가자 */
  .bdg.pass { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 7px; background: #8a93a3; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.4; vertical-align: 1.5px; letter-spacing: .2px; cursor: help; } /* AI 가 오늘 스스로 관망 — NEW 자리, 회색 (10/6) */
  @media (max-width: 860px) {
    .userbar .ubtn .bdg { display: none; }
  } /* 모바일: 오른쪽 끝 정렬 (위 .userbar 기본 margin-left 를 덮음) */
  @media (max-width: 1000px) {
    table.t.rank .m-hide .mfull { display: none; }
    table.t.rank .m-hide .mshort { display: inline; }
  } /* 태블릿: 구매금액·적중금액·자산도 요약 */
/* 순위 칸: 숫자와 어제 대비 변동('2 ▲2'). 1~3위는 금·은·동 원 */
  .rkc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .rkc b { font-size: 15px; min-width: 26px; text-align: center; }   /* 메달(26px 원)과 같은 폭 → 옆의 변동(▲1/–) x 위치가 행마다 같다 */
  tr.top1 .rkc b, tr.top2 .rkc b, tr.top3 .rkc b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; color: #fff; }
  tr.top1 .rkc b { background: #927100; } tr.top2 .rkc b { background: #6b7482; } tr.top3 .rkc b { background: #965c22; }   /* 흰 글씨 대비 4.5:1 (은 2.52 · 동 2.9 였다) */
  .dl { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; min-width: 22px; text-align: center; }   /* '–'와 '▲1'이 같은 칸 가운데에 */
  .dl.up { color: var(--red); }
  .dl.dn { color: var(--blue); }
  .dl.same { color: #6d7688; } /* 변동 없음 '–'가 흰 배경에서 안 보여 행이 비어 보이던 것 */
  .dl.new { color: var(--green); font-size: 10px; letter-spacing: .3px; }
  .pre { display: inline-block; color: var(--muted); font-size: 12px; line-height: 1.2; }
  .pre small { display: block; font-size: 11px; }
/* 모바일: 표를 두 줄 목록으로 — [순위] [이름] [수익률] 위, [순위] [적중률 · 구매 n회] [순손익] 아래 (구매·금액·자산 열은 숨김, 이름을 누르면 상세) */
  @media (max-width: 700px) {
    table.t.rank, table.t.rank tbody { display: block; }
    table.t.rank thead { display: none; }
    table.t.rank tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "rk nm roi" "rk hit net"; align-items: center; column-gap: 8px; row-gap: 1px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
    table.t.rank tr.me { background: var(--blue-light); }
    table.t.rank td { display: block; padding: 0; border: 0; background: transparent !important; }
    table.t.rank td.rk { grid-area: rk; width: auto; text-align: center; }
    table.t.rank td.nm { grid-area: nm; max-width: none; width: auto; }
    table.t.rank td.roi { grid-area: roi; font-size: 16px; }
    table.t.rank td.net { grid-area: net; font-size: 13px; }
    table.t.rank td.hit { grid-area: hit; text-align: left; font-size: 12px; color: var(--muted); }
    table.t.rank td.hit b { color: var(--text); }
    table.t.rank td.m-hide { display: none; }
    table.t.rank .uname { font-size: 14px; }
    table.t.rank tbody tr:hover td { background: transparent; }
    .rkc { flex-direction: column; gap: 2px; }
    .rkc b { font-size: 17px; }
    .dl { min-width: 0; text-align: center; }
    table.t.rank td[colspan] { padding: 16px; white-space: normal; }
    table.t.rank tr:has(td[colspan]) { display: block; }   /* 빈 목록 안내 줄이 44px 순위 칸에 갇혀 '표…'로 잘리던 것 */
  }
/* 필터 줄(내 예측 필터와 같은 회색 띠): 기간 묶음 | 보기 토글 칩. 활성은 진한 채움 대신 연한 파랑 + 남색 테두리 */
  .rkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 14px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .rkbar .rkgrp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .rkbar .rkgrp + .rkgrp { padding-left: 16px; border-left: 1px solid var(--line-strong); }
  .rkbar .rkwk { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
  .rkbar .rksel { position: relative; display: inline-flex; }
  .rkbar .rksel select { appearance: none; -webkit-appearance: none; height: 30px; padding: 0 28px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
  .rkbar .rksel::after { content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); pointer-events: none; }
  .rkbar .seg a.on { background: var(--blue-light); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); border-radius: var(--r-pill); }
  @media (max-width: 700px) {
    .rkbar { padding: 8px 12px; gap: 6px; }
    .rkbar .rkgrp { gap: 6px; }
    .rkbar .rkgrp + .rkgrp { padding-left: 0; border-left: 0; }
    .rkbar .rksel select { height: 28px; font-size: 12px; padding: 0 24px 0 10px; }
  }
  @media (max-width: 700px) {  /* 모바일: 필터 한 줄 — 보기 칩은 짧은 이름(회원·오늘·적중) */
    .rkbar { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .rkbar::-webkit-scrollbar { display: none; }
    .rkbar .rkgrp { flex-wrap: nowrap; flex: none; }
    .rkbar .rkgrp + .rkgrp { margin-left: auto; }
    .rkbar { gap: 4px; padding: 8px 10px; } .rkbar .rkgrp { gap: 2px; } .rkbar .seg a { padding: 0 7px; }   /* 오늘·적중 수가 세 자리여도 360px 한 줄에 (10/13) */
    .rkbar .rkchip, .rkbar .rkchip:hover, .rkbar .rkchip.on { padding: 0 3px; gap: 3px; font-size: 12.5px; } .rkbar .rkchip b { font-size: 11.5px; } .rkbar .rkchip .ck { width: 13px; height: 13px; }
  }
  .bdg.hit { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 7px; background: var(--green); color: #fff; font-size: 10px; font-weight: 800; line-height: 1.4; vertical-align: 1.5px; } /* 최근 정산일 적중 */
  .bdg.sty { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px; border: 1px solid currentColor; font-size: 10px; font-weight: 700; line-height: 1.4; vertical-align: 2px; background: #fff; } /* AI 베팅 성향 (평균 잔고 대비 건 금액) */
  .bdg.sty.agg { color: #c0392b; } .bdg.sty.bal { color: #2c6fbf; } .bdg.sty.cau { color: #5c6b7a; }
  .styt { font-weight: 700; } table.t.rank td.hit b.styt.agg { color: #c0392b; } table.t.rank td.hit b.styt.bal { color: #2c6fbf; } table.t.rank td.hit b.styt.cau { color: #5c6b7a; }
  @media (max-width: 700px) { .nm .bdg.sty { display: none; } }   /* 모바일: 이름 줄이 좁아 성향 배지가 잘려서, 둘째 줄(적중률 · 구매 · 성향)로 */
  h3.rkh .rksel select { height: 28px; font-size: 13px; }
  table.t.rank td.money small.opn { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
/* 랭킹 '배당' 탭 (10/7): 전체(날마다 최고배당) / 적중(실제로 맞힌 표) — 줄을 누르면 영수증 */
.orank .rkbar .ogrp { gap: 6px; }   /* 전체/적중 오른쪽에 기본/고급(또는 회원만) — 한 줄 */
@media (max-width: 700px) {
  .orank .rkbar { gap: 6px; padding: 8px 10px; } .orank .rkbar .rkgrp + .rkgrp { margin-left: auto; }
  .orank .rkbar .seg a { padding: 0 9px; font-size: 12.5px; } .orank .rkbar .ogrp { gap: 4px; } .orank .rkbar .rkchip { padding: 0 4px; font-size: 12.5px; }
}
@media (max-width: 370px) { .orank .rkbar .seg a { padding: 0 7px; font-size: 12px; } }
.orank .rkseg.sm a { font-size: 12.5px; }
.orank table.otab { width: 100%; font-variant-numeric: tabular-nums; }
.orank table.otab td, .orank table.otab th { padding: 9px 8px; white-space: nowrap; }
.orank table.otab tbody tr[tabindex] { cursor: pointer; } .orank table.otab tbody tr[tabindex]:hover td { background: var(--hover); }
.orank table.otab td.rk { width: 44px; text-align: center; color: var(--muted); } .orank table.otab tr.top1 td.rk b, .orank table.otab tr.top2 td.rk b, .orank table.otab tr.top3 td.rk b { color: var(--navy); }
.orank table.otab td.l { overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 45%; }
.orank table.otab td.l small { display: block; color: var(--muted); font-size: 11.5px; } .orank table.otab td.l small.dw { display: inline; }
.orank table.otab td.l .ms { display: none; } .orank table.otab td.l small .ms { display: none; }
.orank table.otab td.od b { color: var(--navy); font-size: 15px; }
.orank table.otab td.pay { color: var(--green); font-weight: 700; } .orank table.otab td.pay small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.orank table.otab td.pay .mshort { display: none; }
.orank table.otab tr.me td { background: var(--blue-light); }
@media (max-width: 700px) {
  .orank table.otab td, .orank table.otab th { padding: 8px 4px; font-size: 13.5px; } .orank table.otab td.rk, .orank table.otab th.rk { width: 34px; }
  .orank table.otab .m-hide { display: none; } .orank table.otab td.l .ms, .orank table.otab td.l small .ms { display: inline; } .orank table.otab td.l small.ms { display: block; }
  .orank table.otab td.pay .mfull { display: none; } .orank table.otab td.pay .mshort { display: inline; }
}
/* 메달 · 🔥 · 명예의 전당 (10/13 개편): 직전 시즌 수익률·배당 1~3위는 이름 옆 메달(금·은·동, 숫자 = 순위), 지금 최다 연속 적중은 🔥 */
  .mdls { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; padding: 0 1px; border: 0; background: none; cursor: pointer; vertical-align: -3px; line-height: 1; }
  .mdl { display: inline-flex; font-style: normal; }
  .mdl svg { width: 17px; height: 17px; display: block; }
  .mdl .rb { fill: #3b5c94; }
  .mdl .c { stroke-width: 1.2; }
  .mdl text { font-size: 8.5px; font-weight: 800; text-anchor: middle; font-family: inherit; }
  .mdl.r1 .c { fill: #f4c84f; stroke: #c99a1d; } .mdl.r1 text { fill: #5e4100; }
  .mdl.r2 .c { fill: #dfe4ea; stroke: #98a2b0; } .mdl.r2 text { fill: #3f4855; }
  .mdl.r3 .c { fill: #e8b083; stroke: #b7733f; } .mdl.r3 text { fill: #55290a; }
  .mdl.big svg { width: 30px; height: 30px; }
  .mdls:hover .mdl svg, .mdls:focus-visible .mdl svg { filter: brightness(1.06) drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
  .fire { margin-left: 3px; font-size: 13px; line-height: 1; vertical-align: 0; cursor: help; }
  .hallbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .hallbtn:hover { border-color: var(--navy); }
  .hallbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .modal.mdlm { align-items: center; padding: 16px; }
  .modal.mdlm .mbox.sm { max-width: 440px; max-height: 82vh; border-radius: 12px; }
  @media (max-width: 700px) { .modal.mdlm { padding: 14px; } .modal.mdlm .mbox.sm { max-height: 82vh; border-radius: 12px; } }
  .rkh .hallbtn + .merank { margin-left: 8px; }   /* 제목 줄 오른쪽: 명예의 전당 · 내 순위 */
  @media (max-width: 700px) { .rkh .hallbtn { width: 30px; height: 30px; margin-left: 0; padding: 0; justify-content: center; border-color: var(--line); } .rkh .hallbtn .hl { display: none; } .rkh .hallbtn svg { width: 16px; height: 16px; } .rkh .hallbtn + .merank { margin-left: 0; } }   /* 모바일: 트로피 아이콘만, ⓘ 바로 옆 (오른쪽 끝에 홀로 떠 있던 것) */
  @media (max-width: 700px) { h3.rkh > .tip { order: 1; } h3.rkh > .merank { order: 2; } }   /* 모바일: ⓘ 는 트로피 다음 (10/13) */

/* 메달 카드 · 명예의 전당 창 (10/13 2차): 글 대신 큰 숫자 + 칸 + 성향 칩, 명예의 전당은 시즌을 옆으로 넘김 */
  .mdlm .mbody { padding: 12px 16px 16px; overflow-y: auto; }
  .mdl.xl svg { width: 52px; height: 52px; }
  .tchip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; background: #eef2f9; color: var(--navy); font-size: 11px; font-weight: 700; white-space: nowrap; }
  .mdcard .mdhero { display: flex; align-items: center; gap: 12px; }
  .mdcard .mdwho { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  .mdcard .mdk { font-size: 12px; font-weight: 800; letter-spacing: .2px; }
  .mdcard.r1 .mdk { color: #a87a06; } .mdcard.r2 .mdk { color: #66707e; } .mdcard.r3 .mdk { color: #9a5a2a; }
  .mdcard .mdn { font-size: 20px; font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: -.3px; }
  .mdcard .mdn i { font-style: normal; color: var(--muted); font-size: 16px; } .mdcard .mdn:hover { color: var(--blue); }
  .mdcard .mdbig { margin: 14px 0 12px; padding: 14px 12px; border-radius: 12px; text-align: center; background: #f6f8fc; }
  .mdcard.r1 .mdbig { background: linear-gradient(180deg, #fff8e3, #fffdf6); } .mdcard.r2 .mdbig { background: linear-gradient(180deg, #f1f3f6, #fbfcfd); } .mdcard.r3 .mdbig { background: linear-gradient(180deg, #fbf0e7, #fffbf8); }
  .mdcard .mdbig b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--navy); }
  .mdcard .mdbig b.pos { color: var(--green); } .mdcard .mdbig b.neg { color: var(--red); }
  .mdcard .mdbig small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
  .mdcard .mdtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; }
  .mdcard .mdtiles > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px; }
  .mdcard .mdtiles > div + div { border-left: 1px solid var(--line); }
  .mdcard .mdtiles span { font-size: 11px; color: var(--muted); } .mdcard .mdtiles b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mdcard .mdtiles b.pos { color: var(--green); } .mdcard .mdtiles b.neg { color: var(--red); }
  .mdcard .mdbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .mdcard .mdbtns .btn { justify-content: center; text-align: center; min-height: 38px; }
  .hallb { padding-left: 0 !important; padding-right: 0 !important; }
  .hallb .hnav { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 8px; }
  .hallb .hnav b { font-size: 16px; font-weight: 800; color: var(--navy); }
  .hallb .hgo { width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--navy); font-size: 18px; line-height: 1; cursor: pointer; }
  .hallb .hgo:disabled { opacity: .3; cursor: default; }
  .hallb .hslides { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hallb .hslides::-webkit-scrollbar { display: none; }
  .hallb .hslide { flex: 0 0 100%; scroll-snap-align: start; padding: 0 16px; box-sizing: border-box; }
  .hallb .hsec + .hsec { margin-top: 14px; }
  .hallb .hk { margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--text); } .hallb .hk small { margin-left: 4px; font-size: 11px; font-weight: 400; color: var(--muted); }
  .hallb .hrw { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 10px; }
  .hallb .hrw.r1 { background: #fffaf0; border-color: #f0dfae; }
  .hallb .hrw.dim { display: block; color: var(--muted); text-align: center; }
  .hallb .hrw .mdl svg { width: 28px; height: 28px; }
  .hallb .hnm { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .hallb a.hn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; color: var(--text); text-decoration: none; }
  .hallb a.hn:hover { color: var(--blue); text-decoration: underline; }
  .hallb .hmain small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hallb .hval { text-align: right; } .hallb .hval b { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy); }
  .hallb .hval b.pos { color: var(--green); } .hallb .hval b.neg { color: var(--red); } .hallb .hval small { font-size: 11px; color: var(--muted); white-space: nowrap; }
  .hallb .hdots { display: flex; justify-content: center; gap: 6px; padding-top: 6px; } .hallb .hdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); } .hallb .hdots i.on { background: var(--navy); width: 16px; border-radius: 3px; }
  .hallb .hempty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }
  .hallb .hempty svg { width: 40px; height: 40px; fill: none; stroke: #c4ccd8; stroke-width: 1.4; } .hallb .hempty b { color: var(--text); font-size: 14.5px; }
  .otab a.who { color: inherit; text-decoration: none; } .otab a.who:hover { color: var(--blue); text-decoration: underline; }