:root{--ink:#17202a;--muted:#65717d;--line:#dfe5ea;--accent:#0c6b68;--accent-soft:#e2f2f0;--soft:#f4f7f7;--band-1:#0c6b68;--band-2:#3f9188;--band-3:#8a97a3;--band-4:#c98a3a;--band-5:#b1503f} *{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;background:#fff;line-height:1.45}main{max-width:min(96vw,1680px);margin:auto;padding:22px clamp(1rem,2.5vw,2.5rem)}h1{font-size:clamp(26px,2.6vw,38px);margin:8px 0 6px;letter-spacing:-.03em;word-break:keep-all;overflow-wrap:normal}h2{font-size:20px;margin:0 0 6px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}.meta,.note{color:var(--muted);font-size:14px} /* PRODUCT RECOVERY V1 (real redesign, not content gating): the tournament header is now compact -- a slim single row, not a tall hero block -- so the player leaderboard is the dominant first-screen content, matching HOME's own "player-first" contract. */ .hero{padding:14px 0 12px;display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap} .hero h1{font-size:clamp(20px,2.2vw,28px);margin:2px 0} .hero .meta{margin:2px 0 0} .status{font-size:13px;color:var(--accent);border:1px solid #acd0cc;border-radius:999px;padding:5px 11px} .panel{border:1px solid var(--line);border-radius:14px;background:#fff;padding:20px} .table-wrap{overflow-x:auto}.data{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.data th,.data td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-size:14px}.data th:first-child,.data td:first-child{text-align:left}.data tbody tr:hover{background:var(--soft)}.band{display:inline-block;padding:3px 7px;border-radius:999px;background:#edf4f3;color:#245c58;font-size:12px}.win{font-weight:800;color:var(--accent)}.checkpoint{display:flex;align-items:baseline;gap:10px;border-left:3px solid var(--accent);padding:10px 14px;background:var(--soft);margin-top:12px}.checkpoint .note{margin:0}.metric{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0}.help{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){main{padding:18px 16px}.hero{padding-top:16px}.status{display:inline-block;margin-top:8px}.panel{padding:14px}.data{min-width:700px}.table-wrap:after{content:"↔ 표를 옆으로 밀어 더 많은 열 보기";display:block;color:var(--muted);font-size:12px;padding-top:8px}.data th,.data td{padding:10px 8px}} /* MOBILE_CONTAINMENT */ /* KB FR BUILD (2026-09-13) fix: this rule's own overflow-y:hidden was a latent vertical-clipping defect on every .table-wrap on the site (PRE/R1/R2/R3/FINAL/FR alike) -- .table-wrap has no explicit height here, so today its clientHeight always equals its scrollHeight and nothing is actually clipped (verified via Playwright on the real FR page: 39/39 rows, last row's getBoundingClientRect fully inside the viewport after a real window.scrollTo to the bottom), but that safety held only by coincidence -- any future rule giving this container a height (a flex/grid ancestor stretch, a max-height media query, a future modal embedding) would have silently hidden rows with zero warning. overflow-y:visible removes the risk entirely: this class's only real job is horizontal scroll-on-mobile-wide- tables (overflow-x:auto), never vertical containment. */ .grid > *,.panel{min-width:0}.table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible} /* Public table is centered; numeric columns retain tabular numerals. */ .data th,.data td{text-align:center}.data th:first-child,.data td:first-child{text-align:center}.player-name,.player-sponsor{text-align:center} .info-control{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:2px 4px} /* OWNER UI FIX (NEO 경기력 tooltip overflow): position:fixed instead of position:absolute -- the popover no longer needs (or is affected by) any positioned ancestor, so it can never widen or overlap the table's own column layout (the reported "extends across adjacent columns / overlaps SG Total" defect) and is never clipped by .table-wrap's overflow-x/overflow-y containment. JS (below) sets left/top from the trigger button's real viewport position; max-width is clamped to the viewport so it can never overflow off-screen either. */ .info-popover{display:none;position:fixed;z-index:20;max-width:min(260px,calc(100vw - 2rem));padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 4px 14px #17202a1a;color:var(--ink);font-size:13px;font-weight:400;line-height:1.5;text-align:left;white-space:normal;overflow-wrap:break-word;word-break:keep-all} .info-popover.is-open{display:block} @media(max-width:760px){.info-popover{left:16px!important;right:16px!important;top:112px!important;width:auto;max-width:none}} /* PRODUCT RECOVERY V1 REDESIGN -- KB PRE leaderboard: replaces the rejected two-column grid + "우승 가능성 변화" shell aside entirely. The player table is now the sole, full-width panel: a real golf-leaderboard visual (sticky header, zebra rows, K-Ranking emphasized as a bold figure, NEO 경기력 rendered as a color-coded pill by band, 최근 5R SG emphasized) -- not the same bordered right-aligned data table with new copy pasted in. */ .leaderboard-panel{padding:14px 16px 8px} .leaderboard-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:10px} .leaderboard-head h2{margin:0} .leaderboard-head .note{margin:0} .cut-line-banner{flex-basis:100%;margin:4px 0 0;padding:8px 12px;background:var(--accent-soft);color:var(--ink);font-size:13px;border-left:3px solid var(--band-4)} .cut-line-banner strong{color:var(--band-4)} .leaderboard-table tbody tr.cut-divider td{padding:6px 14px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.02em;text-align:left;border-bottom:2px solid var(--line);border-top:2px solid var(--line)} /* OWNER VISUAL REVIEW FAIL, item 3 (KB PRE DESKTOP): the leaderboard was too narrow for the available desktop viewport -- fixed at the container level (main{max-width} above, now min(96vw,1680px) instead of a fixed 1240px) so the table itself has real room to use, plus a tighter vertical rhythm per row (padding 12px -> 8px/10px) that packs substantially more of the 120-player field into one screen without touching font-size -- density from layout, not from shrinking text. */ .leaderboard-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums} .leaderboard-table thead th{position:sticky;top:0;padding:9px 14px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:normal;border-bottom:2px solid var(--line);text-align:center} .leaderboard-table tbody td,.leaderboard-table tbody th{padding:8px 14px;border-bottom:1px solid var(--line);white-space:normal;text-align:center;font-size:14px} /* R2 PUBLIC TABLE COLUMN FIX (fix/kb-r2-official-cut-gate-20260911): the rule above's white-space:normal (needed elsewhere for cells that may hold longer text) is what let short numeric/percent cells -- rank, 합계, 2R, and especially the win/Top5/Top10/Top20 percentages -- wrap mid-value ("54.0" / "%" on separate lines) once R2's row grew crowded. Scoped to leaderboard-table--r2-full's own cells only (never the player-name , which must still be free to wrap a long name/sponsor) and higher-specificity than the rule above, so it wins at every width without touching any other leaderboard page. */ .leaderboard-table.leaderboard-table--r2-full tbody td{white-space:nowrap} /* HITE JINRO R1-FR COLUMN WRAP FIX (2026-10-02): same root cause/fix as the --r2-full rule above (measured: a bare 2-digit score like "70" was rendering as "7"/"0" on separate lines, computed white-space: normal, cell height ~2 line-heights), hit by hitejinro_round_page.py's table because it never carries --r2-full (that modifier's OTHER rules, further below, hard-code KB's own column count/order for its mobile card grid -- reusing it here would misalign HITE JINRO's different column layout). A new, grid-rule-free modifier instead: nowrap only, every width, no mobile grid side effects. */ .leaderboard-table.leaderboard-table--hitejinro tbody td{white-space:nowrap} /* HJ 2026100004 FR MERGED-ROW LAYOUT (2026-10-11): FR's own public leaderboard (순위/선수/R1/R2/R3/4R/최종 포인트/TOP20/TOP10/TOP5/ 우승확률, 11 DOM columns, official result + pre-FR forecast merged into one row per player per operator instruction). Purely additive -- a NEW modifier class, never used by any existing page, so nothing above is touched. Desktop (>760px, tbody tr never display:grid): the 11-column row hit the same white-space:normal root cause already fixed twice in this file (--r2-full, --hitejinro) -- short numeric/percent cells wrapped mid-value ("+12" -> "+1"/"2", "T10" -> "T1"/"0"). Same fix: nowrap on only, never the player-name . Mobile (<=760px): the generic auto-fit card above packs every metric's data-label::before text into whatever column width it lands in -- with 9 non-identity columns (vs. the auto-fit layout's design budget of ~5-6) the four forecast-probability labels ("4R 시작 전 예측 TOP20" etc, longer than r2-full's bare "TOP20") collided into unreadable run-on text. Reuses leaderboard-table-- r2-full/--fr-full's established rank/name/highlight-column geometry (rank col1 rows1-2, name cols2-4 rows1-2, 최종 포인트/4R as the two highlight numbers top-right since 최종 포인트 is this table's own last-before-forecast column) plus ONE dedicated row for R1/R2/R3 and a SECOND dedicated row for the 4 forecast cells (its own distinguishing background tint), rather than r2-full/fr-full's single probability row -- this table has both a 3-metric row (R1/R2/R3) and a 4-metric forecast row where they only ever had one or the other. */ .leaderboard-table.leaderboard-table--hj-fr-final tbody td{white-space:nowrap} /* white-space is inherited -- the nowrap rule above also reached each cell's own data-label::before pseudo-element, which needs to keep wrapping (its own long "4R 시작 전 예측 TOP20"-style text, unlike the short value it labels) or it overflows/collides with its neighbor at mobile card width. ::before counts as more specific than its parent's own td rule, so this wins without touching the value's nowrap. */ .leaderboard-table.leaderboard-table--hj-fr-final tbody td::before{white-space:normal} .leaderboard-table.leaderboard-table--hj-fr-final tbody tr{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto auto;align-items:center;column-gap:6px;row-gap:4px} .leaderboard-table.leaderboard-table--hj-fr-final tbody td:nth-child(1){grid-column:1;grid-row:1/3;background:transparent;font-size:16px;font-weight:800} .leaderboard-table.leaderboard-table--hj-fr-final tbody th[scope=row]{grid-column:2/5;grid-row:1/3} /* border-bottom:0/padding:0/margin:0 on the name belong ONLY to the mobile card layout above (tr is display:grid there, so the name sits inside its own card header with no separate cell border) -- unscoped, they also hit desktop (>760px, tr is a normal table row), silently stripping the row-divider line under every player's name while every sibling kept its own border-bottom via the base `.leaderboard-table tbody td,.leaderboard-table tbody th` rule (operator-reported regression, 2026-10-11: name-cell row lines missing on FR/HOME). Media-gated here so desktop keeps the same border-bottom/padding as every other cell in the row. */ @media(max-width:760px){.leaderboard-table.leaderboard-table--hj-fr-final tbody th[scope=row]{border-bottom:0;padding:0;margin:0}} .leaderboard-table.leaderboard-table--hj-fr-final tbody td:nth-child(7){grid-column:4;grid-row:1;background:transparent;font-size:16px;font-weight:800;color:var(--ink)} .leaderboard-table.leaderboard-table--hj-fr-final tbody td:nth-child(6){grid-column:4;grid-row:2;background:transparent;font-size:12px;color:var(--muted)} /* row3: R1/R2/R3 (DOM columns 3-5) -- column4 of this row left empty (only 3 values, 4-column grid), same as --fr-full. */ .leaderboard-table.leaderboard-table--hj-fr-final tbody td:nth-child(n+3):nth-child(-n+5){grid-row:3;background:var(--soft)} /* row4: 4R 시작 전 예측 TOP20/TOP10/TOP5/우승확률 (DOM columns 8-11) -- one full 4-col row, own tint distinguishes it from row3. */ .leaderboard-table.leaderboard-table--hj-fr-final tbody td:nth-child(n+8){grid-row:4;background:var(--soft)} @media(max-width:380px){.leaderboard-table.leaderboard-table--hj-fr-final tbody td:nth-child(n+8){font-size:12px}} /* HITE JINRO R2_CUT INLINE BADGE (2026-10-02 "R2 Renderer 재설계"): a player cut after completing R2 keeps their REAL rank/total (klpga.co.kr's own real convention for a standard cut, confirmed against 하나금융's already-published R2 page) -- this small pill next to their name is the only visual signal they're out, same visual language as .band's own pill (different color so it never reads as a NEO 경기력 band). */ .status-badge{display:inline-block;padding:2px 7px;border-radius:999px;background:#fdecea;color:#b3261e;font-size:11px;font-weight:800;margin-left:6px;vertical-align:middle} .leaderboard-table tbody tr:nth-child(even){background:#fafcfc} .leaderboard-table tbody tr:hover{background:var(--accent-soft)} .leaderboard-table tbody th[scope=row]{text-align:left;min-width:11rem} .leaderboard-table .player-name{font-size:15px;font-weight:800} .leaderboard-table .player-sponsor{font-size:12px} .leaderboard-table tbody td:nth-child(2){font-weight:800;color:var(--accent);font-size:15px} .leaderboard-table tbody td:nth-child(4){font-weight:800;color:var(--ink)} .band[aria-label="NEO 경기력 최상위"]{background:var(--band-1);color:#fff} .band[aria-label="NEO 경기력 상위"]{background:var(--band-2);color:#fff} .band[aria-label="NEO 경기력 중위"]{background:#eef1f3;color:var(--band-3)} .band[aria-label="NEO 경기력 하위"]{background:#fbeee0;color:var(--band-4)} .band[aria-label="NEO 경기력 최하위"]{background:#f7e4e1;color:var(--band-5)} .band[aria-label="NEO 경기력 데이터 부족"]{background:#f1f2f4;color:#9aa5af;border:1px dashed #cbd3da} .leaderboard-panel .table-wrap:after{content:none} @media(max-width:760px){ /* OWNER VISUAL REVIEW FAIL, item 4 (KB PRE MOBILE): the first card transformation worked (no horizontal scroll) but each card ran ~174px tall -- three stacked label/value rows for K-Ranking/NEO 경기력/최근 5R SG. Redesigned as ONE compact metric row: player identity stays a full-width header line at the top for fast scanning, then the three metric s become side-by-side stat cells sharing a single row (flex-wrap forces the wrap point after the full-width , so no markup change was needed -- purely a layout change) instead of three separate label:value lines. Brings a card down to roughly 100-110px. Still zero horizontal scrolling. */ .leaderboard-table{min-width:0} .leaderboard-table,.leaderboard-table thead,.leaderboard-table tbody{display:block;width:100%} .leaderboard-table thead{position:absolute;left:-9999px;top:-9999px} /* OWNER FOLLOW-UP (mobile NEO 경기력 info accessibility): the info trigger lives inside thead th.band-head, which the rule above moves off-screen along with the rest of the (redundant on mobile -- each card already repeats every label via ::before) header row. Rather than restoring the whole header or duplicating the button/popover markup, give this ONE (and only this one -- its siblings stay off-screen with the rest of thead) its own position:fixed: fixed positioning always escapes an ancestor's own position/offset (thead being position:absolute;left:-9999px does not drag a position:fixed descendant along with it, since none of the ancestors here set transform/filter/perspective/will-change to create a competing containing block), so it renders as a small floating pill at a real on-screen location while thead itself stays exactly as off-screen as before. Same DOM node, same button, same #neo-info popover, same JS -- nothing is duplicated. */ .leaderboard-table thead th.band-head{position:fixed;top:76px;left:auto;right:16px;z-index:15;display:inline-flex;align-items:center;gap:4px;width:auto;max-width:calc(100vw - 32px);padding:6px 10px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 2px 8px #17202a1a;color:var(--ink);font-size:12px;font-weight:800;text-transform:none;letter-spacing:normal;white-space:nowrap} /* MOBILE HOTFIX 20260911 (KB current-page audit): the previous mobile card packed every metric into ONE flex row with flex:1 1 0 -- with 7-8 metric columns (PRE's K-RANKING/NEO 경기력/최근5R SG/4-5 probabilities, or a round-result page's 합계/1R/5 probabilities) that shrank each cell to ~35-40px, which forced both the long Korean/ English labels ("KLPGA K-RANKING") and the probability values ("88.75%") to hard-wrap one glyph per line inside the cell -- the real root cause of the reported "숫자 겹침"/label collapse, not something overflow:hidden could ever fix. A CSS Grid with auto-fit/minmax now gives every metric cell a real minimum width (84px) and WRAPS extra columns onto additional grid rows inside the same card instead of over-shrinking them -- still zero horizontal scroll, still one player = one card, just as many rows per card as the metric count actually needs. */ .leaderboard-table tbody tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:4px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;padding:8px 10px 6px;background:#fff} .leaderboard-table tbody th[scope=row]{grid-column:1/-1;display:block;border-bottom:1px solid var(--line);padding:2px 0 6px;margin-bottom:2px;min-width:0;text-align:left} .leaderboard-table tbody td{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:var(--soft);border-radius:8px;padding:4px 4px;text-align:center} .leaderboard-table tbody td::before{content:attr(data-label);color:var(--muted);font-size:9px;font-weight:700;line-height:1.2;text-align:center} .leaderboard-table tbody td:nth-child(2){font-size:14px} } /* MOBILE HOTFIX 20260911 -- round-result leaderboards (R1/R2/R3/FINAL: 순위+선수+합계+해당라운드 스코어+5개 확률, in that fixed DOM order) opt into this scoped layout via the leaderboard-table--rank-result modifier class (added only by the round-result page builder -- PRE's own leaderboard-table markup never carries this class, so PRE keeps the generic auto-fit card above untouched). 순위/선수명/합계 read first on one visual line (rank+name left, total score right), 해당 라운드 스코어 sits under 합계, and the 5 probability cells form their own full-width 5-column row below -- matching the required public leaderboard reading order (순위 -> 선수 -> 핵심 스코어 -> 스폰서 -> 보조 데이터), with sponsor rendered by player_identity.py directly under the player name inside the same (untouched invariant). Both compound classes are on the same element, so this rule (2 classes) always outranks the generic 1-class rule above -- no source-order dependency. */ .leaderboard-table.leaderboard-table--rank-result tbody tr{grid-template-columns:repeat(5,1fr);grid-template-rows:auto auto;align-items:center;column-gap:6px;row-gap:4px} .leaderboard-table.leaderboard-table--rank-result tbody td:nth-child(1){grid-column:1;grid-row:1/3;background:transparent;font-size:16px;font-weight:800} .leaderboard-table.leaderboard-table--rank-result tbody th[scope=row]{grid-column:2/5;grid-row:1/3;border-bottom:0;padding:0;margin:0} .leaderboard-table.leaderboard-table--rank-result tbody td:nth-child(3){grid-column:5;grid-row:1;background:transparent;font-size:16px;font-weight:800;color:var(--ink)} .leaderboard-table.leaderboard-table--rank-result tbody td:nth-child(4){grid-column:5;grid-row:2;background:transparent;font-size:12px;color:var(--muted)} .leaderboard-table.leaderboard-table--rank-result tbody td:nth-child(n+5){grid-row:3;background:var(--soft)} /* R2 HOUSE real-data renderer (P0-1, 20260911; column set reduced to the 8-column PUBLIC contract by the R2 PUBLIC TABLE COLUMN FIX, fix/kb-r2-official-cut-gate-20260911 -- SG TOTAL/OTT/APP/ARG/PUTT removed from this PUBLIC table, WIN moved to the last column; SG data itself is untouched in the pipeline/artifacts, only no longer rendered here): purely additive -- a NEW modifier class, never used by any existing PRE/R1/KG/OK Open page, so nothing above is touched. Same 2-row rank/name/total/2R header block as leaderboard-table--rank-result above, then ONE full-width row for the remaining 4 forecast-probability cells (Top5/Top10/Top20/우승, DOM columns 5-8) -- avoids the "one glyph per line" collapse the MOBILE HOTFIX 20260911 comment above documents. Desktop is untouched: at >760px tbody tr is never display:grid, so these grid-column/grid-row declarations are inert and the table renders as a normal 8-column HTML table (table-wrap's existing overflow-x:auto is the only desktop-width fallback needed; the nowrap rule added alongside this fix keeps every value/percent cell on one line at any width). */ .leaderboard-table.leaderboard-table--r2-full tbody tr{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:6px;row-gap:4px} .leaderboard-table.leaderboard-table--r2-full tbody td:nth-child(1){grid-column:1;grid-row:1/3;background:transparent;font-size:16px;font-weight:800} .leaderboard-table.leaderboard-table--r2-full tbody th[scope=row]{grid-column:2/5;grid-row:1/3;border-bottom:0;padding:0;margin:0} .leaderboard-table.leaderboard-table--r2-full tbody td:nth-child(3){grid-column:4;grid-row:1;background:transparent;font-size:16px;font-weight:800;color:var(--ink)} .leaderboard-table.leaderboard-table--r2-full tbody td:nth-child(4){grid-column:4;grid-row:2;background:transparent;font-size:12px;color:var(--muted)} /* row3: Top5/Top10/Top20/우승 (DOM columns 5-8) -- one full 4-col row, own tint distinguishes it from the rank/total header block above. */ .leaderboard-table.leaderboard-table--r2-full tbody td:nth-child(n+5){grid-row:3;background:var(--soft)} /* Missing-value convention ("--" cells: SG/forecast not yet available for a given player) -- reuses the exact class name neo-site.css's .home-table already established for the same convention (cross-site consistency), scoped here to leaderboard-table since neo.css has no such rule yet. Applies at every width (not just mobile) since the "--" mark is shown in the flat desktop table too. */ .leaderboard-table td.metric-empty{color:var(--muted)} /* Non-ACTIVE status (CUT/WD/DQ) badge, next to the player name -- a small inline pill (reuses the .band family's visual language, own color so it's never confused with a NEO 경기력 band) so a real status is legible without needing a whole extra column. */ .status-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#f7e4e1;color:var(--band-5);font-size:11px;font-weight:800;vertical-align:middle} /* Narrow-phone wrap fix (360px QA finding), now covering the 4 Top5/Top10/Top20/우승 percentage cells (DOM columns 5-8) since the R2 PUBLIC TABLE COLUMN FIX removed the SG cells this rule originally targeted -- nth-child(n+5) still selects exactly the probability row, so the fix still applies correctly unchanged. One step smaller font in the probability row only (identity/rank/ total keep their own already-tuned sizes) removes any wrap without touching any other page's typography -- scoped to <=380px so 390/412 are untouched. */ @media(max-width:380px){.leaderboard-table.leaderboard-table--r2-full tbody td:nth-child(n+5){font-size:12px}} /* KB금융 골든라이프 챔피언십 FR BUILD (20260913): FR's own public leaderboard (순위/선수/R1/R2/R3/FR/합계, 7 DOM columns, in that fixed order -- FR is a pure results page, so unlike R2/R3/FINAL there is no probability metric to compare against). Purely additive -- a NEW modifier class, never used by any existing PRE/R1/R2/R3/FINAL page, so nothing above is touched; desktop is untouched for the same reason leaderboard-table--r2-full's own comment gives (tbody tr is never display:grid above 760px). Mobile priority per spec (순위/선수/FR/합계 read first, R1/R2/R3 secondary): reuses the exact rank/name/highlight-column geometry leaderboard-table--r2-full established (rank spans col1 rows1-2, name spans cols2-4 rows1-2, one big number top-right row1, one small number top-right row2) -- but points the two highlight slots at THIS page's own last two DOM columns (FR=6th, 합계=7th) instead of r2-full's 3rd/4th, since here 합계 is the last column, not the third. R1/R2/R3 (DOM columns 3-5) get demoted to their own row3, mirroring r2-full's row3 treatment of its own secondary metrics. */ .leaderboard-table.leaderboard-table--fr-full tbody tr{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:6px;row-gap:4px} .leaderboard-table.leaderboard-table--fr-full tbody td:nth-child(1){grid-column:1;grid-row:1/3;background:transparent;font-size:16px;font-weight:800} .leaderboard-table.leaderboard-table--fr-full tbody th[scope=row]{grid-column:2/5;grid-row:1/3;border-bottom:0;padding:0;margin:0} .leaderboard-table.leaderboard-table--fr-full tbody td:nth-child(7){grid-column:4;grid-row:1;background:transparent;font-size:16px;font-weight:800;color:var(--ink)} .leaderboard-table.leaderboard-table--fr-full tbody td:nth-child(6){grid-column:4;grid-row:2;background:transparent;font-size:12px;color:var(--muted)} /* row3: R1/R2/R3 (DOM columns 3-5) -- one row, own tint distinguishes it from the rank/total header block above; column4 of this row is left empty (only 3 values, 4-column grid) rather than force a fifth column just for this row. */ .leaderboard-table.leaderboard-table--fr-full tbody td:nth-child(n+3):nth-child(-n+5){grid-row:3;background:var(--soft)} @media(max-width:380px){.leaderboard-table.leaderboard-table--fr-full tbody td:nth-child(n+3):nth-child(-n+5){font-size:12px}} /* HANA R1 MOBILE FLAT-SCROLL TABLE (operator request: keep the desktop table feel on mobile instead of the generic auto-fit card conversion above). Purely additive -- a NEW modifier class combined with .leaderboard-table (2-class selector, higher specificity than every 1-class base mobile rule above), applied only by this page's own builder script, so nothing above is touched and no other existing page (whose markup never carries this class) is affected. Reuses the exact scroll-table technique the generic .data table already established at <=760px above (min-width + the already-global .table-wrap{overflow-x:auto} + the same "옆으로 밀어" hint text) -- just re-applied to this page's own .leaderboard-table element by restoring real table/row/cell display instead of block/grid, rather than inventing a new visual pattern. */ @media(max-width:760px){ .leaderboard-table.leaderboard-table--flat-scroll{display:table;min-width:700px} .leaderboard-table.leaderboard-table--flat-scroll thead{display:table-header-group;position:static;left:auto;top:auto} .leaderboard-table.leaderboard-table--flat-scroll thead th{white-space:nowrap} .leaderboard-table.leaderboard-table--flat-scroll tbody{display:table-row-group} .leaderboard-table.leaderboard-table--flat-scroll tbody tr{display:table-row;grid-template-columns:none;gap:0;margin-bottom:0;border:0;border-radius:0;padding:0;background:transparent} .leaderboard-table.leaderboard-table--flat-scroll tbody th[scope=row]{display:table-cell;grid-column:auto;border-bottom:1px solid var(--line);padding:8px 14px;margin-bottom:0;min-width:11rem;text-align:left} .leaderboard-table.leaderboard-table--flat-scroll tbody td{display:table-cell;min-width:0;flex-direction:row;align-items:center;justify-content:center;gap:0;border:0;border-bottom:1px solid var(--line);background:transparent;border-radius:0;padding:8px 14px;text-align:center;white-space:nowrap} .leaderboard-table.leaderboard-table--flat-scroll tbody td::before{content:none} .leaderboard-panel .table-wrap.table-wrap--flat-scroll:after{content:"↔ 표를 옆으로 밀어 더 많은 열 보기"} } /* R1 ACTIVE MODE: live summary + movers, scoped to this OK Open page's own CSS -- never touches the shared neo-site.css. */ .r1-live-summary__grid{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px}.r1-live-summary__grid .label{display:block;color:var(--muted);font-size:12px}.r1-live-summary__grid strong{font-size:16px} .mover-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.mover-grid h3{font-size:13px;color:var(--muted);margin:0 0 6px} .mover-list{list-style:none;margin:0;padding:0}.mover-list li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px}.mover-list .delta{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)} /* HOME forecast-visual figure: click-to-enlarge link around a responsive image, original ratio preserved. */ .forecast-visual{margin:0}.forecast-visual a{display:block}.forecast-visual img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}.forecast-visual figcaption{margin-top:8px;color:var(--muted);font-size:13px;text-align:center} /* HOME "주요 순위 변동" (biggest-movers) row fix: purely additive, NEW classes only (movers-list/movers-row/movers-row__*), never used by any other page's markup, so nothing else on the site is touched. Root cause of the reported bug was structural, not cosmetic: the list used a bare