/* ==========================================================================
sports-kr — 코리안뷰 배당표 (js/sports-kr.js)
한 경기 = 마켓 줄 여러 개 + 오른쪽에 세로로 긴 +N 버튼
줄: [시각 104] [홈 칸 1fr] [가운데 84] [원정 칸 1fr]
========================================================================== */
.kr-match{ display:grid; grid-template-columns:96px minmax(0,1fr) 64px; gap:6px; padding:8px 0; }
.kr-match + .kr-match{ border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.kr-lines{ display:grid; gap:4px; min-width:0; }
.kr-head{ display:none; } /* 휴대폰 전용 — 시각 · 홈팀 vs 원정팀 */
.kr-line{ display:grid; grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr); gap:4px; align-items:stretch; }
/* 시각 — 세 줄 왼쪽에 세로 가운데 [날짜 / 시간]. 진행 중이면 [● 경기 시간 / 점수] */
.kr-side{ display:grid; align-content:center; }
.kr-when{ display:grid; justify-items:start; gap:2px; padding-left:4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kr-when em{ display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:var(--sb-fs-sm); color:var(--sb-t5); }
.kr-when b{ font-size:var(--sb-fs-md, 16px); font-weight:900; color:var(--text); line-height:1.2; }
.kr-when.is-live em{ color:#ff5a76; font-weight:800; }
.kr-when.is-live i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:kr-pulse 1.4s ease-in-out infinite; }
@keyframes kr-pulse{ 50%{ opacity:.3; } }
/* 배당 칸 — 홈: [이름 ··· 표시 배당] · 원정: [배당 표시 ··· 이름] */
.kr-pick{
height:36px; min-width:0; display:flex; align-items:center; gap:8px; padding:0 12px;
border-radius:var(--sb-r-chip); background:var(--surface-2); color:var(--text);
transition:background-color var(--sb-t-bg), color var(--sb-t-color);
}
.kr-pick:hover{ background:var(--surface-3); }
.kr-pick--home .kr-team{ margin-right:auto; }
.kr-pick--away .kr-team{ margin-left:auto; text-align:right; }
.kr-team{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--sb-fs-sm); font-weight:700; color:var(--sb-t2); }
.kr-pick b{ position:relative; flex:none; font-size:var(--sb-fs-base); font-weight:900; font-variant-numeric:tabular-nums; }
.kr-pick--mid{ justify-content:center; padding:0; }
/* 작은 표시 — 1x2(흐린 금색) · H(주황) · 오버 ▲(빨강) · 언더 ▼(파랑) */
.kr-mark{ flex:none; font-style:normal; font-weight:900; line-height:1; }
.kr-mark--x{ font-size:9px; letter-spacing:-.02em; color:color-mix(in srgb, var(--accent-fg) 55%, transparent); }
.kr-mark--h{ font-size:12px; color:#f5a623; }
.kr-mark--up, .kr-mark--down{ font-size:14px; font-weight:900; }
.kr-mark--up{ color:#ff4d5e; }
.kr-mark--down{ color:#3d8bff; }
/* 표시 칸 폭을 맞춘다 — 1x2 · H · ↑↓ 가 줄마다 같은 자리에 */
.kr-mark{ min-width:18px; text-align:center; }
/* 가운데 — 기준점(청록) · VS */
.kr-mid{ display:grid; place-items:center; border-radius:var(--sb-r-chip); background:color-mix(in srgb, var(--surface-2) 55%, transparent);
font-size:var(--sb-fs-sm); font-weight:800; color:var(--sb-t5); font-variant-numeric:tabular-nums; }
.kr-mid--line{ color:#2ed3c6; font-size:var(--sb-fs-base); }
/* 담긴 칸 · 배당 오름내림 — 유럽식 칸과 같은 약속 */
.kr-pick.is-on{ background:var(--accent); color:var(--accent-ink); }
.kr-pick.is-on .kr-team, .kr-pick.is-on .kr-mark{ color:rgba(0,0,0,.65); }
/* 배당 변동 ▲▼ — 숫자 오른쪽 위에 작게 띄워, 자리를 차지하지 않는다(칸 사이가 벌어지지 않게) */
.kr-pick b::after{ content:''; position:absolute; top:-3px; right:-9px; font-size:8px; line-height:1; }
.kr-pick--away b::after{ right:auto; left:-9px; } /* 원정 칸은 오른쪽에 표시가 붙으니 왼쪽 위로 */
.kr-pick.tr-up b{ color:var(--sb-up); }
.kr-pick.tr-down b{ color:var(--sb-down); }
.kr-pick.tr-up b::after{ content:'▲'; }
.kr-pick.tr-down b::after{ content:'▼'; }
.kr-pick.is-on b{ color:var(--accent-ink); }
.kr-pick.is-flash:not(.is-on){ animation:sbOddsFlash 1.8s ease-out; }
@media (prefers-reduced-motion:reduce){ .kr-pick.is-flash{ animation:none; } }
/* +N 상세 — 마켓 이름 아래 코리안 줄. 조합 · 승리 방법처럼 세 칸 넘는 건 [이름 · 배당] 칸 세 개씩.
세로선을 위 경기 줄과 똑같이 — 왼쪽은 시각 칸(96) + 간격(6), 오른쪽은 +N 칸(64) + 간격(6) 만큼 들인다.
왼쪽 102, 오른쪽 70 */
.sb-oddsbox:has(> .kr-odds){ margin:0; padding:4px 0 12px; border:0; border-radius:0; background:none; } /* 테두리 · 바탕 없이 — 목록이 그대로 이어지게 */
.kr-odds{ margin:0 70px 0 102px; }
.sb-oddsbox:has(> .kr-odds) .sb-oddsbox__go{ margin-left:102px; }
.kr-odds .mt-mkt{ border:0; border-radius:0; background:none; overflow:visible; }
.sb-oddsbox .kr-odds .mt-mkt__head{ padding:8px 0 6px 2px; }
.kr-odds .kr-lines{ padding:0 0 4px; }
.mt-mkt.is-folded .kr-lines{ display:none; }
.kr-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; }
.kr-team.is-label{ color:var(--sb-t3); }
/* +N — 경기 줄 전체 높이의 세로 버튼 */
.kr-more.sb-more{ height:auto; min-width:0; width:100%; border-radius:var(--sb-r-chip); background:var(--surface-2); color:var(--accent-fg); font-weight:900; }
.kr-more.sb-more:hover, .kr-more.sb-more.is-open{ background:var(--accent); color:var(--accent-ink); }
/* ==========================================================================
휴대폰 — 시각은 경기 위 한 줄로 올리고, 줄은 [홈 | 가운데 | 원정] 세 칸
========================================================================== */
@media (max-width:1023px){
.sb-oddsbox:has(> .kr-odds){ padding:10px; }
.kr-odds, .sb-oddsbox:has(> .kr-odds) .sb-oddsbox__go{ margin:0; }
.kr-match{ grid-template-columns:minmax(0,1fr) 40px; grid-template-areas:"head head" "lines more"; gap:6px 4px; padding:10px 0; }
.kr-side{ display:none; }
.kr-head{ grid-area:head; display:flex; align-items:center; gap:6px; min-width:0; margin:0; font-size:13px; line-height:18px; }
.kr-head .kr-when{ display:inline-flex; align-items:center; gap:4px; padding:0; margin-right:4px; }
.kr-head .kr-when em{ font-size:11.5px; }
.kr-head .kr-when b{ font-size:11.5px; font-weight:700; color:var(--sb-t4); }
.kr-head .kr-when.is-live b{ padding:0 5px; border-radius:4px; background:var(--bg); color:var(--text); }
.kr-head b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; color:var(--text); }
.kr-head span{ flex:none; font-size:11px; color:var(--sb-t5); }
.kr-lines{ grid-area:lines; }
.kr-more.sb-more{ grid-area:more; font-size:12px; }
/* 줄 — [홈 표시 · 배당 | 가운데 | 배당 · 표시 원정], 팀 이름은 위 한 줄에 있으니 칸에서는 뺀다 */
.kr-line{ grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); }
.kr-pick .kr-team.is-team{ display:none; } /* 팀 이름만 뺀다 — 홀 · 짝 · 예 · 아니오 · 조합 이름은 둔다 */
.kr-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.kr-grid .kr-pick{ justify-content:space-between; }
.kr-pick{ height:36px; gap:6px; padding:0 12px; }
.kr-pick--home{ justify-content:space-between; }
.kr-pick--away{ justify-content:space-between; }
.kr-pick b{ font-size:13.5px; }
.kr-mid--line{ font-size:13px; }
}
/* ==========================================================================
★★ 코리안뷰 경기 카드 틀 — 웨일리에서 더한 디자인 (레드 2026-09-28 「웨일리 코리안뷰에 추가 디자인한거 — 경기 카드 틀」)
원본: exit-whaley-web sports.css 3254~(레드 2026-09-27 「코리안뷰 너무 휑한데 · 유러피언뷰처럼 하이라이팅」)
① 둥근 테두리 카드 · 올리면 테두리 강조 ② 왼쪽 종목색 띠(5px)
③ 왼쪽에서 번지는 종목색 바탕(22%) ④ 시각 앞 종목색 점
공 그림은 넣지 않는다(웨일리도 레드 결정으로 뺐다 — 「코리안뷰는 색만」).
종목색 --sp-* 는 sports.css 에 이미 있다. 강조 테두리는 시안 브랜드색(--gold).
========================================================================== */
.kr-match[data-sport]{
position:relative; isolation:isolate; overflow:hidden; --sp:var(--text-mute);
padding:10px 12px 10px 16px; border:1px solid var(--line); border-radius:12px;
background:
radial-gradient(90% 190% at 0% 50%, color-mix(in srgb, var(--sp) 22%, transparent) 0%, transparent 42%),
var(--surface);
transition:border-color .2s ease-in-out;
}
.kr-match[data-sport] + .kr-match[data-sport]{ margin-top:8px; border-top:1px solid var(--line); }
.kr-match[data-sport]:hover{ border-color:var(--gold); }
.kr-match[data-sport]::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
border-radius:inherit; border-left:5px solid var(--sp);
}
/* 시각 앞 점 — 시안 시각은 날짜시각 이라 날짜 앞에 찍는다 */
.kr-match[data-sport] .kr-when:not(.is-live) > em::before{
content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
background:var(--sp); margin-right:7px; vertical-align:1px;
box-shadow:0 0 8px color-mix(in srgb, var(--sp) 70%, transparent);
}
.kr-match[data-sport="soccer"] { --sp:var(--sp-soccer); }
.kr-match[data-sport="basketball"] { --sp:var(--sp-basketball); }
.kr-match[data-sport="baseball"] { --sp:var(--sp-baseball); }
.kr-match[data-sport="volleyball"] { --sp:var(--sp-volleyball); }
.kr-match[data-sport="ice-hockey"] { --sp:var(--sp-ice-hockey); }
.kr-match[data-sport="tennis"] { --sp:var(--sp-tennis); }
.kr-match[data-sport="handball"] { --sp:var(--sp-handball); }
.kr-match[data-sport="american-football"] { --sp:var(--sp-american-football); }
.kr-match[data-sport="e-games"] { --sp:var(--sp-e-games); }
.kr-match[data-sport="mma-boxing"] { --sp:var(--sp-mma-boxing); }
@media (max-width:1023px){
.kr-match[data-sport]{ padding:9px 8px 9px 12px; }
}
/* ==========================================================================
★★ 코리안뷰 휴대폰 — 웨일리와 같은 배치 (레드 2026-10-03 「이 시안대로 · 배치만 스샷 배치 · 색감은 우리 색감」, igaming 테마도 맞춰서)
머리 줄 [리그 엠블럼(없으면 종목 아이콘) · 리그 이름 …… 시각 | +N]
배당 줄 [홈팀 · 기호 · 배당] [무승부 배당 · 기준점] [배당 · 기호 · 원정팀] — 펼친 판도 같다
★ 기호는 H · ↑ · ↓ 만(승무패 줄은 없음). 팀 이름은 넘칠 때만 끝 흐림(.is-long — sports-kr.js 가 잰다)
★ 리그 제목 줄은 없앤다 — 카드 머리 줄이 리그를 적는다. 색은 이 테마 팔레트 그대로. PC 는 그대로
========================================================================== */
.kr-league-img, .kr-sport{ display:none; }
.kr-mid.kr-mid--ou{ color:#ff4d5e; } /* 오버언더 기준점 레드 계열 — 오버 ↑ 와 같은 색. PC · 휴대폰 공통 */
@media (max-width:1023px){
.kr-match{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head more" "lines lines"; }
.kr-match .kr-head{ gap:6px; }
.kr-match .kr-league-img{ display:block; flex:none; width:18px; height:18px; object-fit:contain; }
.kr-match .kr-sport{ display:block; flex:none; width:16px; height:16px; }
.kr-match .kr-head .kr-league{ flex:1 1 auto; min-width:0; font-size:12px; font-weight:800; color:var(--text); }
.kr-match .kr-head .kr-when{ flex:none; margin:0 0 0 auto; }
.kr-match .kr-more.sb-more{
grid-area:more; align-self:center; width:auto; min-width:0; height:auto;
padding:0 2px 0 8px; border-radius:0; background:none;
color:var(--accent-fg); font-size:12px; font-weight:800; line-height:16px;
}
.kr-match .kr-more.sb-more:hover, .kr-match .kr-more.sb-more.is-open{ background:none; color:var(--accent); }
:is(.kr-match, .kr-odds) .kr-pick{ height:38px; gap:5px; padding:0 9px; }
:is(.kr-match, .kr-odds) .kr-pick .kr-team.is-team{
display:block; flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:clip;
font-size:11px; font-weight:700; color:var(--sb-t3);
}
:is(.kr-match, .kr-odds) .kr-pick--home .kr-team{ text-align:left; }
:is(.kr-match, .kr-odds) .kr-pick--away .kr-team{ text-align:right; }
:is(.kr-match, .kr-odds) .kr-pick .kr-team.is-long{
-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 16px), transparent);
mask-image:linear-gradient(90deg, #000 calc(100% - 16px), transparent);
}
:is(.kr-match, .kr-odds) .kr-mark{ min-width:0; }
:is(.kr-match, .kr-odds) .kr-mark--x{ display:none; }
:is(.kr-match, .kr-odds) .kr-pick--mid{ justify-content:center; padding:0; gap:0; }
/* 리그 제목 줄 없앰 — 코리안뷰 목록만(#sbList[data-view="kr"]) */
.sb-leagues[data-view="kr"] .sb-league__head{ display:none; }
}
@media (max-width:1023px){
.sb-leagues[data-view="kr"] .sb-league + .sb-league{ margin-top:8px; } /* 리그 사이 = 카드 사이 8 (원래 14) */
}