/* ========================================================================== sports — 스포츠북 경기 한 줄에 마켓 세 가지를 같이 놓는다 (루벳은 1x2 하나만 놓는다). 1x2 · 핸디캡(기준점) · 언더오버(기준점) + 나머지는 `+32` 로 접어 둔다 베팅 슬립은 싱글/조합/시스템 탭이 없다. 하나 고르면 싱글, 둘 이상이면 조합이다. ========================================================================== */ /* ---- 배너 (최대 3열) ---------------------------------------------------- */ /* ⚠ 칸 수를 3 으로 <못 박지 않는다>. 배너에는 엠블럼이 있는 <서로 다른 리그>만 오르므로 (SportsPage.pickDistinctLeagues) 고를 리그가 적은 새벽에는 두 장·한 장이 된다. 3 으로 박아 두면 그때 오른쪽에 빈 칸이 남는다 — auto-fit 은 있는 만큼만 채운다. */ .sb-banners{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:var(--gap-card); } .sb-banner{ position:relative; overflow:hidden; min-height:150px; padding:20px 140px 20px 20px; border-radius:var(--r); display:flex; flex-direction:column; justify-content:flex-end; gap:10px; background: radial-gradient(120% 130% at 15% 0%, color-mix(in oklab, var(--c) 60%, transparent), transparent 62%), linear-gradient(140deg, color-mix(in oklab, var(--c) 30%, var(--surface-2)), var(--surface-1)); border:1px solid var(--line); } /* ★★ 리그가 <제목>이다 (레드 2026-09-15 「앞에 리그명」). 이 줄의 이름이 「인기리그」라 고른 기준이 리그인데, 예전에는 「A vs B」가 크고 리그가 그 위에 작았다 — 이름과 내용이 어긋났다. ★ 경기는 <그 리그에서 지금 열리는 것 하나>를 보기로 남긴다. 리그 이름만 있으면 지금 뭘 할 수 있는지가 안 보인다. */ /* ★ 리그 이름 <하나>다 (레드 2026-09-15 「리그명만 크게」). 경기명을 뺐으니 그 무게를 이 줄이 가져간다. ⚠ .sb-banner__league 규칙은 남긴다 — 이 컴포넌트를 쓰는 다른 화면이 아직 쓴다. */ .sb-banner__title{ font-size:var(--fs-md); font-weight:900; line-height:1.3; } .sb-banner__league{ font-size:var(--fs-sm); font-weight:700; color:var(--text-3); } .sb-banner .btn{ margin-top:2px; width:max-content; } /* ---- 탭 줄 · 검색 ------------------------------------------------------- */ .sb-top{ display:flex; align-items:center; gap:var(--gap-card); flex-wrap:wrap; } .sb-tabs{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; } .sb-tabs::-webkit-scrollbar{ display:none; } .sb-tab{ flex:none; height:44px; padding:0 16px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-md); font-weight:800; color:var(--text-5); border-bottom:2px solid transparent; transition:color var(--t-color), border-color var(--t-bg); } .sb-tab:hover{ color:var(--text-2); } .sb-tab.is-on{ color:var(--text); border-bottom-color:var(--cta); } .sb-tab i{ font-style:normal; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full); display:inline-grid; place-items:center; background:var(--tag-casino); color:#fff; font-size:var(--fs-badge); font-weight:900; line-height:1; font-variant-numeric:tabular-nums; } .sb-search{ flex:1; min-width:200px; margin-left:auto; height:44px; padding:0 14px; border-radius:var(--r); display:flex; align-items:center; gap:10px; background:var(--surface-1); border:1px solid var(--line); } .sb-search svg{ width:20px; height:20px; color:var(--text-5); flex:none; } .sb-search input{ flex:1; min-width:0; border:0; background:transparent; font-family:var(--font); font-size:var(--fs-base); color:var(--text); } /* ---- 종목 줄 — 아이콘 위, 이름 아래 -------------------------------------- */ /* ── 종목 고르개 (레드 2026-09-13 「아이콘 크게 · 종목이 확 읽히게」) ────── ★ 아이콘을 <동그란 판> 위에 올린다. 24px 그림을 맨바닥에 놓으니 배경과 붙어서 작아 보였다 — 판이 있으면 같은 크기라도 훨씬 크게 읽힌다. ★ 고른 것은 <판에 색>이 들어온다. 전에는 글자색만 바뀌어 한눈에 안 보였다. ⚠ 칸 너비를 글자에 맡기지 않는다. 「아이스 하키」와 「축구」의 너비가 달라지면 줄이 들쭉날쭉해진다. ------------------------------------------------------------------ */ .sb-sports{ display:flex; gap:8px; } .sb-sport{ flex:none; width:96px; padding:12px 4px 10px; border-radius:var(--r); display:grid; justify-items:center; gap:8px; font-size:var(--fs-sm); font-weight:800; color:var(--text-4); transition:background var(--t-bg), color var(--t-color); } /* 아이콘 판 */ /* ★ 판 안을 <그림이 꽉 채운다>. (레드 2026-09-13, 그림으로 지시) 52px 판에 30px 그림은 둘레 여백이 11px 씩이라, 판은 커도 그림 자체는 여전히 작게 읽혔다. 둘레를 4px 만 남긴다. */ .sb-sport__ico{ width:58px; height:58px; border-radius:var(--r-full); display:grid; place-items:center; background:radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--surface-3) 70%, transparent), var(--surface-2) 70%); border:1px solid var(--line); transition:background var(--t-bg), border-color var(--t-bg), box-shadow var(--t-bg), transform var(--t-bg); } .sb-sport__ico img, .sb-sport__ico svg{ width:50px; height:50px; object-fit:contain; } /* ---- 「전체」 아이콘만 한 겹 줄인다 (레드 2026-09-15) -------------------- ★★ 그림 여백 문제가 <아니다>. 네 장을 재 봤더니 칠해진 넓이가 모두 같다 — 캔버스 256 에 내용 216, 84.4% 로 똑같다. 다른 것은 <모양>이다. 공은 원이라 둥근 판 안에서 테두리와 나란히 돈다. 「전체」는 네모 넷이라 <모서리가> 판 끝까지 닿는다 — 같은 사각형에 그려도 원보다 √2 배 멀리 뻗는다. ★ 그래서 그림을 고치지 않고 <그릴 때만> 줄인다. transform 이라 자리는 그대로고 가운데도 안 흔들린다. 0.78 은 모서리가 공 테두리와 같은 자리에 서는 값이다(1/√2 = 0.707 에 둥근 모서리 몫을 더한 것). ⚠ 주소로 고른다. slug 로 고르면 <모르는 종목>이 놓친다 — SportIcon 이 모르는 종목에도 all 그림을 주기 때문이다(default -> "all"). 그래서 이 한 줄이 종목 줄·리그 대체 자리·인플레이까지 한꺼번에 닿는다. ------------------------------------------------------------------------ */ img[src*="/sports-icon/all-"]{ transform:scale(.78); } .sb-sport:hover{ color:var(--text-2); } .sb-sport:hover .sb-sport__ico{ background:var(--surface-3); transform:translateY(-2px); } .sb-sport.is-on{ color:var(--text); } /* ★ 고른 것은 <파란 링>이 돈다. 색만 살짝 바꾸면 줄 안에서 안 보인다. */ .sb-sport.is-on .sb-sport__ico{ background:color-mix(in oklab, var(--primary) 30%, var(--surface-2)); border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in oklab, var(--primary) 55%, transparent), 0 0 14px color-mix(in oklab, var(--primary) 40%, transparent); } .sb-sport.is-on svg{ color:var(--cta); } /* ⚠ 움직임을 싫어하는 설정이면 뜨지 않는다 */ @media (prefers-reduced-motion:reduce){ .sb-sport:hover .sb-sport__ico{ transform:none; } } /* ---- 주요 경기 카드 줄 — 지금 눈에 띄는 경기를 가로로 --------------------- */ .sb-hls{ display:flex; gap:var(--gap-card); } .sb-hl{ flex:none; width:calc((100% - var(--gap-card) * 2) / 3); min-width:300px; position:relative; overflow:hidden; /* 세로로 쌓고 마켓 이름부터 아래로 붙인다 — 팀 이름이 두 줄인 카드와 한 줄인 카드가 한 줄에 서도 배당 칸 높이가 맞는다(아래 .sb-hl__mkt margin-top:auto) */ display:flex; flex-direction:column; padding:14px 16px; border-radius:var(--r); background: radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 62%), var(--surface-1); border:1px solid var(--line); } .sb-hl__top{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-5); } .sb-hl__top b{ font-weight:900; color:var(--text-3); } .sb-hl__top .sb-live{ margin-left:auto; } /* ★ 위를 맞춘다(start) — 팀 이름이 두 줄이 되면 가운데 맞춤은 그쪽 동그라미만 위로 뜬다. 동그라미·시각 칸이 같은 높이(34)라 위를 맞추면 한 줄에 선다. */ .sb-hl__teams{ margin:14px 0; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:start; } .sb-hl__side{ display:grid; justify-items:center; gap:6px; text-align:center; min-width:0; } .sb-hl__side i{ width:34px; height:34px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--surface-3); font-style:normal; font-size:var(--fs-base); font-weight:900; } /* 팀 이름 — <두 줄까지> 보인다 (레드 2026-09-11 「Washingto… 잘림 · 둘 다 고쳐줘」). 한 줄 말줄임이라 「Washington Nationals」가 폰에서 「Washingto…」, PC 에서도 「Washington Nati…」였다. 낱말 단위로 넘기고(keep-all), 한 낱말이 칸보다 길 때만 글자에서 끊는다. 세 줄째부터 말줄임. */ .sb-hl__side span{ font-size:var(--fs-base); font-weight:800; line-height:1.25; max-width:100%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; word-break:keep-all; overflow-wrap:anywhere; } .sb-hl__score{ display:flex; gap:4px; } .sb-hl__score b{ min-width:34px; height:34px; padding:0 6px; border-radius:var(--r-chip); display:grid; place-items:center; background:var(--surface-3); font-size:var(--fs-md); font-weight:900; } .sb-hl__mkt{ text-align:center; font-size:var(--fs-sm); color:var(--text-5); margin-top:auto; } .sb-hl .sb-mkt__picks{ margin-top:6px; } .sb-hl__teams + .sb-mkt__picks{ margin-top:auto; } /* 마켓 이름이 없는 경기 — 배당 칸을 바로 아래로 */ /* 종목별 경기장 바탕 (레드 2026-09-11 「스포츠 카드 배경 · 종목별로 경기장배경으로」) ★ 그림은 920×218 — 위는 검고 아래에 불 켜진 경기장. 아래를 맞춰(center bottom) 골대·림·네트·홈이 카드 가운데 오게 한다. slug 는 HighlightRail 이 종목 탭 짝으로 찾아 data-sport 로 준다. ★ 배당 칸·팀 동그라미는 원래 불투명 바탕이라 밝은 경기장 위에서도 읽힌다. 경기장 위에 얹히는 글자(팀 이름·마켓 이름)만 그림자를 주고, 얇은 막으로 그림을 조금 누른다(아이스링크가 하얗다). ★ 파일 이름에 날짜 — CSS 속 그림 주소에는 ?v= 가 안 붙는다. */ .sb-hl[data-sport]{ background: linear-gradient(180deg, rgba(5,8,15,.10) 0%, rgba(5,8,15,.30) 55%, rgba(5,8,15,.45) 100%), var(--hl-art, none) center bottom / cover no-repeat, var(--surface-1); } .sb-hl[data-sport="soccer"] { --hl-art:url("/assets/design/img/sports-bg/soccer-20260913.jpg"); } .sb-hl[data-sport="baseball"] { --hl-art:url("/assets/design/img/sports-bg/baseball-20260913.jpg"); } .sb-hl[data-sport="basketball"]{ --hl-art:url("/assets/design/img/sports-bg/basketball-20260913.jpg"); } .sb-hl[data-sport="volleyball"]{ --hl-art:url("/assets/design/img/sports-bg/volleyball-20260913.jpg"); } .sb-hl[data-sport="ice-hockey"]{ --hl-art:url("/assets/design/img/sports-bg/ice-hockey-20260913.jpg"); } .sb-hl[data-sport] .sb-hl__side span, .sb-hl[data-sport] .sb-hl__mkt{ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); } .sb-hl[data-sport] .sb-hl__mkt{ color:var(--text-3); } /* ---- 진행 예정은 <한 겹 가라앉힌다> (레드 2026-09-18) -------------------- 「인플레이 진행전 → 조금 다르게 주자 진행중이랑 구분가게」 ⚠ 2026-09-15 에는 <같은 생김새로 둔다>고 정했었다. 한 목록이 두 종류로 보이는 것을 막으려는 뜻이었는데, 화면은 이미 「진행 중」·「진행 예정」 두 구역으로 나뉘어 있어서 같게 두면 오히려 어느 구역을 보고 있는지가 흐려졌다. ★ 바꾸는 것은 <채도와 밝기>뿐이다. 크기·여백·배치는 손대지 않는다 — 모양을 바꾸면 한 화면에 격자가 두 벌이 되어 훑어보기가 나빠진다. ★ 경기장 그림만 가라앉히고 <글자는 되돌린다>. 팀 이름까지 흐리면 읽으려고 눈을 멈추게 된다. 진행 예정도 읽으라고 띄운 카드다. ⚠ 어둠막을 진하게 하는 대신 filter 를 쓴다. 막만 진하게 하면 그림은 어두워지고 카드 바탕(--surface-1)은 그대로라 <위아래 색이 갈라져> 보인다. */ .sb-hl[data-sport][data-live="0"]{ filter: saturate(.55) brightness(.82); } .sb-hl[data-sport][data-live="0"] .sb-hl__top, .sb-hl[data-sport][data-live="0"] .sb-hl__side span, .sb-hl[data-sport][data-live="0"] .sb-hl__score{ filter: saturate(1.8) brightness(1.22); /* 글자·엠블럼은 원래 밝기로 */ } /* ---- 리그 섹션 — 머리를 눌러 접는다 -------------------------------------- */ .sb-league{ margin-top:var(--gap-sec); } .sb-league__head{ display:flex; align-items:center; gap:10px; width:100%; padding:0 4px 12px; text-align:left; } .sb-league__head svg:first-child{ width:22px; height:22px; color:var(--text-4); } /* ⚠⚠ 좁은 화면에서 「멕시코」가 <세로로 쪼개졌다>(33×48). 리그 이름이 길면 flex 가 나라 칸부터 줄여서 글자 사이에서 줄을 바꿨다. ★ 나라는 <안 쪼갠다>. 줄일 것은 리그 이름 쪽이고, 거기에 말줄임을 건다. */ .sb-league__name{ font-size:var(--fs-lg); font-weight:900; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sb-league__where{ font-size:var(--fs-sm); color:var(--text-5); flex:none; white-space:nowrap; } .sb-league__caret{ margin-left:auto; width:20px; height:20px; color:var(--text-4); transition:transform var(--t-bg); } .sb-league.is-folded .sb-league__caret{ transform:rotate(180deg); } .sb-league.is-folded .sb-league__list{ display:none; } .sb-league__list{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; } /* ---- 경기 한 줄 --------------------------------------------------------- 왼쪽에 시각과 두 팀, 오른쪽에 마켓 세 묶음과 `+N`. ------------------------------------------------------------------------ */ .sb-row{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(360px,520px) auto; gap:16px; align-items:center; padding:14px 16px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line); transition:border-color var(--t-color); } .sb-row:hover{ border-color:var(--primary); } /* ---- 경기 줄의 종목 표시 (레드 2026-09-13 「종목별로 뭔가 넣으면 좋겠다」) ---- ★ 그림을 쓰지 않는다. 한 화면에 줄이 스무 개씩 깔리는데 「주요 경기」 카드처럼 경기장 사진을 넣으면 (1) 가장 잘 읽혀야 할 배당 숫자를 그림이 덮고, (2) 스무 장이 동시에 뜨고, (3) sports-bg 그림은 center bottom 으로 잘리도록 그린 것이라 낮고 넓은 줄에서는 골대가 아예 안 보인다. 색만 쓴다 — 용량 0. ★ 셋을 <각각 약하게> 겹친다. 하나만 쓰면 약하거나(워시) 시끄럽다(글리프). 띠 5px · 왼쪽 세로 워시 22% · 글리프 15% · 시각 앞 종목 점 8px ⚠ overflow:hidden 을 쓰지 않는다. 대신 띠는 border-radius:inherit 한 테두리로 그려 모서리를 저절로 따라가게 하고(.is-open 이 밑 모서리를 펴도 따라간다), 글리프는 높이를 <비율>로 잡는다. 줄 높이가 마켓 수에 따라 달라서 고정 px 로 두면 짧은 줄에서 삐져나온다. ⚠ 자식에 z-index 를 줄 때 `> *` 로 뭉뚱그리지 않는다. 640px 아래에서 .sb-more 가 <절대배치>라(아래 640px 블록) position 을 덮어쓰면 자리가 깨진다. ⚠ 여기 없는 종목은 --sp 기본값(회색)으로 떨어진다. 색은 tokens.css 에 있다. ------------------------------------------------------------------------ */ .sb-row[data-sport]{ position:relative; --sp:var(--text-5); /* 왼쪽에서 <세로 전체>로 번진다. 처음에는 왼쪽 <위 모서리>였는데, 1900px 짜리 줄에서 그 구석은 아무도 안 보는 자리였다. */ background: radial-gradient(90% 190% at 0% 50%, color-mix(in srgb, var(--sp) 22%, transparent) 0%, transparent 42%), var(--surface-1); } .sb-row[data-sport="soccer"] { --sp:var(--sp-soccer); } .sb-row[data-sport="basketball"] { --sp:var(--sp-basketball); } .sb-row[data-sport="baseball"] { --sp:var(--sp-baseball); } .sb-row[data-sport="volleyball"] { --sp:var(--sp-volleyball); } .sb-row[data-sport="ice-hockey"] { --sp:var(--sp-ice-hockey); } /* 띠 — 테두리로 그려서 둥근 모서리를 그대로 따라간다 */ .sb-row[data-sport]::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; border-left:5px solid var(--sp); } /* 글리프 — 팀 이름 뒤. ★★ 크기를 <고정>한다 (레드 2026-09-14 「각 스포츠 볼 아이콘사이즈가 안맞을떄가있거등 이거 일괄적으로 사이즈 처리해줄래」). 전에는 height:78% 였다. 줄 높이가 마켓 수에 따라 달라져(120~168px) 같은 종목의 같은 공이 <줄마다 92~129px 로> 흔들렸다. 세로로 훑으면 공이 커졌다 작아졌다 한다 — 비율은 「안 넘치게」 하려던 것이었지 「같아 보이게」 하려던 것이 아니었다. ⚠ 값은 <가장 짧은 줄>에 맞춘다. 실측으로 줄은 120~168px 이고, 92px 이면 짧은 줄에서도 76% 라 여유가 있다. min() 으로 천장을 두면 짧은 줄만 작아져 <다시 두 가지 크기>가 된다 — 그래서 한 값이다. ⚠ .sb-row 는 overflow:visible 이다. 넘치면 진짜로 삐져나오므로 여기서 넘지 않을 값을 골라야 한다. 줄이 더 짧아질 일이 생기면 이 값을 함께 내린다. ⚠ .sb-hl(주요 경기 카드)는 이 규칙을 안 탄다. 거기는 사진이 배경이다. */ .sb-row[data-sport]::after{ content:""; position:absolute; z-index:0; pointer-events:none; left:120px; top:50%; translate:0 -50%; height:92px; aspect-ratio:1; background:var(--sp); opacity:.15; -webkit-mask:var(--sp-glyph) no-repeat center / contain; mask:var(--sp-glyph) no-repeat center / contain; } /* 축구공 — 테두리 + 가운데 오각형 + 이음선 다섯 */ .sb-row[data-sport="soccer"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.3l3.3 2.4-1.25 3.9h-4.1L8.7 9.7z'/%3E%3Cpath d='M12 7.3V2.9M15.3 9.7l4.3-3M8.7 9.7l-4.3-3M14.05 13.6l5.2 4.1M9.95 13.6l-5.2 4.1'/%3E%3C/svg%3E"); } /* ⚠⚠ 농구는 <선으로> 그린다. (레드 2026-09-13 「농구 마크가안나와」) 전에는 폰트어썸 꼴의 채우기 경로였다 — 바깥 원을 그리고 안쪽 조각들을 같은 방향으로 그리는 모양이라, 기본 채우기 규칙(nonzero)에서는 <구멍이 안 뚫려 민 원>이 된다. 실측 56% 채워짐 = 지름 그대로의 원이다. fill-rule:evenodd 를 주면 뚫리기는 하는데 <지구본>이 된다 — 이 경로의 조각 배치가 농구공 솔기가 아니라 경선·위선을 닮았다. ★ mask 는 <그려진 픽셀>을 쓴다. 선(stroke)도 그려진다 — 그래서 채우기 경로를 고치는 대신 선으로 그린다. 원 + 세로선 + 가로선 + 좌우 곡선 둘. 그것이 농구공이다. ⚠ stroke 색은 아무거나 좋다(mask 는 모양만 본다). 다만 이 없으면 원이 통째로 메워져 다시 민 원이 된다. */ .sb-row[data-sport="basketball"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.7'%20stroke-linecap%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9.2'%2F%3E%3Cpath%20d%3D'M12%202.8v18.4M2.8%2012h18.4'%2F%3E%3Cpath%20d%3D'M5.4%205.4a13%2013%200%200%200%2013.2%2013.2M18.6%205.4A13%2013%200%200%200%205.4%2018.6'%2F%3E%3C%2Fsvg%3E"); } /* 야구공 — 공 테두리 + 실밥 두 줄 + 땀 여섯 (레드 2026-09-14 「진짜 야구공모양처럼」). ⚠ 전에는 실밥을 <채운 덩어리>로 그려서 비치볼처럼 보였다. 실밥은 <가는 선>이어야 야구공으로 읽힌다. 농구와 같은 외곽선 방식으로 맞춘다. */ .sb-row[data-sport="baseball"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M6.1 5C9.6 7.6 9.6 16.4 6.1 19M17.9 5C14.4 7.6 14.4 16.4 17.9 19'/%3E%3Cpath stroke-width='1.2' d='M7.4 8.3l2-.9M7.8 12h2.2M7.4 15.7l2 .9M16.6 8.3l-2-.9M16.2 12h-2.2M16.6 15.7l-2 .9'/%3E%3C/svg%3E"); } /* 배구공 — 테두리 + 이음선 셋 */ .sb-row[data-sport="volleyball"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M11.3 2.9C8.5 7 7.8 12.2 9.4 17M20.9 10.7C16.4 10 11.9 11.7 8.7 15.1M4.3 16.7C6.7 12.2 11 9.2 16 8.7'/%3E%3C/svg%3E"); } /* 아이스하키 — 스틱과 빙판선. <같은 모양>을 선으로만 다시 그린 것이다 */ .sb-row[data-sport="ice-hockey"]{ --sp-glyph:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4.6 15.4l9.2-9.2a2.6 2.6 0 013.7 0l1 1a1 1 0 010 1.4l-9.4 9.4H7.7z'/%3E%3Cpath d='M13.2 7.4l4.2 4.2'/%3E%3Cpath d='M3.2 20.4h17.6'/%3E%3C/svg%3E"); } /* 종목 점 — 「오늘 17:00」 앞의 8px 동그라미. ★ 실은 <이것이 가장 잘 보인다.> 띠는 줄 맨 왼쪽 끝인데 1900px 짜리 줄에서 그 가장자리는 눈이 가지 않는다. 시각은 회원이 어차피 읽는 자리다. ★ 폰에서도 남긴다 — 글리프와 달리 자리를 안 먹고, 칸이 좁을수록 더 쓸모 있다. */ .sb-row[data-sport] .sb-row__when::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); } /* 글자를 글리프 위로 올린다. .sb-more 는 <건드리지 않는다> — 640px 아래에서 절대배치다 */ .sb-row[data-sport] > .sb-row__go, .sb-row[data-sport] > .sb-mkts{ position:relative; z-index:1; } /* 폰에서는 글리프를 뺀다 — 칸이 좁아 팀 이름과 겹친다. 띠·워시·점은 그대로 둔다 */ @media (max-width:640px){ .sb-row[data-sport]::after{ display:none; } } .sb-row__go{ display:block; min-width:0; } /* ★★ 시각을 <왼쪽에> 못 박는다 (레드 2026-09-15 「시간 밀림」). 이 칸은 display:block 이라 폭이 414px 인데, 물려받은 text-align:center 가 짧은 글자를 <가운데로> 보냈다. 팀 이름은 왼쪽에서 시작하니 둘의 머리가 안 맞아 시각만 떠 보였다 — 팀 이름이 짧은 리그에서 특히 그랬다. (실측: 팀 이름 49px, 시각은 칸 가운데) */ .sb-row__when{ font-size:var(--fs-sm); color:var(--text-5); text-align:left; padding-left:7px; } .sb-row__when b{ font-weight:800; color:var(--text-3); } .sb-live{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--r-full); background:var(--tag-casino); color:#fff; font-size:var(--fs-sm); font-weight:900; } .sb-live em{ font-style:normal; } .sb-live i{ width:6px; height:6px; border-radius:var(--r-full); background:#fff; animation:sb-blink 1.4s infinite; } @keyframes sb-blink{ 50%{ opacity:.25; } } /* ★ 여백을 걷었다 (레드 「카드내 여백 최대한 촘촘하게」) — 8→5, 4→3 */ .sb-row__teams{ margin-top:5px; display:grid; gap:3px; } .sb-team{ display:flex; align-items:center; gap:10px; font-size:var(--fs-md); font-weight:800; } .sb-team__mark{ /* ★ 22 → 26px (레드 2026-09-16 「리그 팀 이미지 지금보다 크게」) */ flex:none; width:26px; height:26px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--surface-3); font-size:var(--fs-sm); font-weight:900; color:var(--text-2); } /* 팀 이름 — <두 줄로 안 넘긴다> (레드 2026-09-14 「팀명이길면 2줄로하지않고 … 처리」). ⚠ 예전에는 이름이 <맨 글자>였다. text-overflow 는 요소에만 걸리므로 감싸는 span 을 만들었다(SportsPage · InPlayPage). ⚠ min-width:0 이 없으면 flex 칸이 <글자 길이만큼> 버텨 말줄임이 안 걸린다. */ .sb-team__name{ min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sb-team__score{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--cta); } /* 팀 이름 오른쪽 H(홈) · A(원정) — 레드 2026-09-13 ★ 배당 칸이 팀 이름 대신 HOME·AWAY 를 적게 되면서, <어느 팀이 홈인가>를 읽을 자리가 이 줄밖에 없다. 없으면 HOME 을 누르면서 어느 팀인지 모른다. ★ 홈만 칠하고 원정은 테두리로 둔다. 둘 다 칠하면 어느 쪽이 기준인지 흐려지고, 한 줄에 강한 색이 둘이 되어 배당 숫자에서 눈을 뺏는다. ⚠ .sb-team 이 gap:10px 이라 이름과 너무 벌어진다 — 4px 을 당겨 6px 로 붙인다. ⚠ .sb-team__score 는 margin-left:auto 라 오른쪽 끝으로 가므로 자리를 다투지 않는다. */ .sb-team__ha{ flex:none; margin-left:-4px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-2); color:var(--text-4); font-size:11px; line-height:1; font-weight:900; letter-spacing:.02em; } /* ⚠ 살짝 위로 떠 보인다 (레드 2026-09-14). flex 가 <글자 상자>의 가운데에 맞추는데, 한글은 상자 안에서 아래쪽에 앉아 눈에는 배지가 올라가 보인다. 1px 내려 <눈에> 맞춘다 — 자리 계산이 틀린 것이 아니라 착시다. */ .sb-team__ha{ position:relative; top:1px; } .sb-team__ha.is-home{ background:var(--cta); border-color:var(--cta); color:var(--bg); } .sb-team__ha.is-away{ background:var(--surface-2); color:var(--text-4); } /* 팀·리그 엠블럼 (2026-09-12, 바닐라 피드 — components/Emblem) ★ 엠블럼은 대개 <투명 바탕에 검은 선>이다(화이트삭스는 통째로 검다). 어두운 동그라미 위에 그대로 두면 사라진다 → 그림이 있을 때만(.is-img) 동그라미를 밝게 칠하고, 안에 여백을 두고 contain 으로 앉힌다. 크기·둥글기는 원래 동그라미 규칙(목록 22 · 레일 34 · 상세 56)을 그대로 쓴다. ★ 그림이 없거나 못 받으면 .is-img 가 안 붙어 머리글자 동그라미 그대로다. */ /* ★★ <뒤판을 걷어냈다> (레드 2026-09-16 「뒤에 동그라미는 다 제거」). 예전에는 엠블럼 뒤에 밝은 동그라미(#f3f5f9)를 깔았다. 엠블럼이 대개 <투명 바탕에 검은 선>이라 어두운 판 위에 그냥 두면 사라졌기 때문이다 (시카고 화이트삭스처럼 통째로 검은 것도 있다). 이제 판 대신 <얇은 흰 외곽 빛>으로 살린다. 판은 네모·동그라미가 눈에 먼저 들어와 정작 엠블럼을 가렸는데, 외곽 빛은 검은 선의 <가장자리만> 밝혀 준다. ⚠ drop-shadow 는 투명 png 의 <그림 모양>을 따라간다. box-shadow 처럼 상자 테두리를 그리는 것이 아니다 — 그래서 판 없이도 글자 획이 살아난다. ⚠ 2026-09-16 부터 상류(exit-odds)가 흰 배경을 지우고 전부 png 로 낸다. 배경이 남아 있던 시절에는 이 방법이 <흰 네모에 흰 빛>이라 뜻이 없었다. */ /* ⚠ overflow 를 걸지 않는다 — 외곽 빛(drop-shadow)이 잘린다. 위 규칙 설명 참고 */ .is-img{ } /* ★ 칸 안에 <다> 들어간다 (레드 2026-09-16 「영역에 100% 맞춰서」). ⚠⚠ width/height 를 100% 로 주면 안 된다. 이 그림은 grid 칸 안에서 place-items:center 로 놓여 <늘어나지 않으므로>, height:100% 가 기댈 높이가 없어 그림이 제 비율대로 커진다. 실측으로 34×34 칸에서 <34×46> 이 나왔다 — 세로로 긴 로고(화이트삭스·클리블랜드)가 12px 넘쳐 팀 이름을 덮었다. 세로가 짧은 로고(세인트루이스·샌프란시스코)는 우연히 맞아서 더 헷갈렸다. max- 로 잡으면 <천장만> 정해 주는 것이라 어떤 비율이든 칸 안에 들어간다. */ /* ⚠⚠ 그림을 <자리에서 떼어> 칸에 물린다(absolute + inset:0). %(100% 든 max-height 든)로는 안 된다. 이 그림은 grid 칸 안에서 place-items:center 로 놓여 있어 높이가 <내용 기준>으로 정해지고, 그러면 브라우저가 % 를 풀 기준을 못 찾아 그림이 제 비율대로 커진다. 실측: 34px 칸에서 max-height:100% 를 줘도 h 가 46.3px 로 잡혔다. 떼어 놓으면 inset:0 이 부모 상자를 그대로 가리키므로 기준이 분명해진다. 부모는 위 :is(...) 규칙에서 이미 position:relative 다. */ .is-img > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 2px rgba(255,255,255,.45)); } /* ★ 그래도 <글자가 위>다 (레드 2026-09-16 「이미지 글자 뒤로 가자」). 크기를 잡았으니 겹칠 일이 없지만, 상류가 별난 비율의 그림을 주는 날에도 팀 이름이 가려지지는 않아야 한다. 이름은 읽혀야 하고 그림은 곁들이는 것이다. */ :is(.sb-hl__side, .sb-team, .mt-side) :is(span, .sb-team__name, .mt-side__name){ position:relative; z-index:1; } :is(.sb-team__mark, .sb-hl__side > i, .mt-side__mark){ z-index:0; } /* 리그 — 종목 아이콘 자리. ★ 20 → 24px (레드 2026-09-16), 뒤판 없음 */ .lg-emblem{ flex:none; width:24px; height:24px; box-sizing:border-box; object-fit:contain; vertical-align:middle; filter:drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 2px rgba(255,255,255,.45)); } /* 그림이 없는 팀의 기본 엠블럼(유니폼 + 머리글자) — components/Emblem.tsx 의 TeamCrest. ⚠ 동그라미를 <꽉> 채운다. 머리글자 하나만 있던 자리라 여백을 두면 예전과 같아 보인다. */ .em-crest{ width:100%; height:100%; display:block; } /* 받는 중 — 그림은 1px 로 숨기고 예전 모양(머리글자·종목 아이콘)을 보인다. 받고 나면 바뀐다. ⚠ display:none 으로 숨기면 loading=lazy 그림은 영영 안 받는다 — 그래서 1px·투명. 팀 동그라미 안에서는 가운데 겹쳐 두어 머리글자를 밀지 않는다. */ .em-wait{ width:1px !important; height:1px !important; padding:0 !important; background:none !important; opacity:0; pointer-events:none; } .lg-emblem.em-wait{ margin-left:-1px; } /* ★★ 엠블럼 자리는 <칸 그 자체>다 (레드 2026-09-16 「뒤에 동그라미 배경 없애고, 엠블럼 이미지만 표기. 영역 벗어나는 게 있는데 100% 맞춰서 노출」). 세 자리(목록·레일·상세)가 저마다 배경 동그라미(var(--surface-3))를 깔고 있었다. 머리글자를 담던 시절의 것이다 — 이제 그 자리에는 엠블럼이나 기본 유니폼이 들어가고, 둘 다 <제 모양과 색>을 들고 있어 뒤판이 오히려 그림을 가렸다. ⚠ 둥근 모서리도 함께 없앤다. 배경이 사라지면 그 동그라미는 <보이지 않으면서 그림만 잘라내는> 틀이 된다 — 사각인 엠블럼과 유니폼의 네 귀퉁이가 깎였다. 모양은 이제 그림 자체가 정한다. ⚠ overflow 는 걸지 않는다. 모서리를 없애면 칸을 넘칠 것이 없고, 잠그면 엠블럼 둘레의 흰 외곽 빛(drop-shadow)까지 잘려 검은 로고가 다시 묻힌다. */ :is(.sb-team__mark, .sb-hl__side > i, .mt-side__mark){ position:relative; background:none; border-radius:0; } :is(.sb-team__mark, .sb-hl__side > i, .mt-side__mark) > .em-wait{ position:absolute; left:50%; top:50%; } /* ---- 마켓 세 줄 -------------------------------------------------------- 가로로 늘어놓지 않는다. 한 줄에 하나씩 세로로 쌓는다. 1x2 [홈][무][원정] 핸디캡 -1.5 [홈][원정] 언더오버 2.5 [오버][언더] 선택지가 둘이든 셋이든 **칸 끝이 세로로 맞도록** 여섯 칸을 나눠 쓴다. ------------------------------------------------------------------------ */ .sb-mkts{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; } .sb-mkt{ display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:10px; } .sb-mkt__head{ display:flex; align-items:baseline; gap:5px; font-size:var(--fs-sm); font-weight:800; color:var(--text-5); white-space:nowrap; } .sb-mkt__head b{ font-weight:900; color:var(--text-3); } .sb-mkt__picks{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:4px; } .sb-mkt__picks[data-n="3"] > *{ grid-column:span 2; } .sb-mkt__picks[data-n="2"] > *{ grid-column:span 3; } .sb-pick{ height:42px; border-radius:var(--r-chip); display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 10px; background:var(--surface-2); color:var(--text); transition:background var(--t-bg), color var(--t-color); } .sb-pick span{ font-size:var(--fs-sm); font-weight:700; color:var(--text-5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sb-pick b{ flex:none; font-size:var(--fs-base); font-weight:900; font-variant-numeric:tabular-nums; } .sb-pick:hover{ background:var(--surface-3); } /* 고른 것은 노랗게 — 슬립에 담겼다는 뜻이다 */ .sb-pick.is-on{ background:var(--cta); color:var(--text-on-cta); } .sb-pick.is-on span{ color:rgba(0,0,0,.6); } .sb-more{ flex:none; height:42px; padding:0 12px; border-radius:var(--r-chip); display:inline-flex; align-items:center; background:var(--surface-2); color:var(--text-3); font-size:var(--fs-base); font-weight:900; transition:background var(--t-bg), color var(--t-color); } .sb-more:hover{ background:var(--surface-3); color:var(--text); } /* 좁은 화면에서는 마켓 두 줄이 접히므로 `+N` 의 N 도 그만큼 커진다 */ .sb-more__narrow{ display:none; } /* ========================================================================== 접이식 배당판 — +N 을 누르면 경기 줄 <바로 아래>에 펼쳐진다 (레드 2026-09-11 「그걸 옆에 숫자 누르면 리스트 하단에 나오게, 배당판만」) ★ .sb-more 는 이제 <단추>다. 전에는 상세로 가는 링크였다 — 단추와 링크는 기본 여백·글꼴·테두리가 달라 아래 셋을 되돌려 놔야 전달본과 같은 모양이 된다. ========================================================================== */ .sb-more{ border:0; cursor:pointer; font-family:inherit; } /* 펼쳐진 동안은 눌린 것으로 보인다 — 어느 줄을 열었는지 눈으로 찾는다 */ .sb-more.is-open{ background:var(--primary); color:#fff; } /* 열린 줄은 아래 상자와 <이어져 보이게> 밑 모서리를 편다 */ .sb-row.is-open{ border-bottom-left-radius:0; border-bottom-right-radius:0; } .sb-oddsbox{ margin:-1px 0 8px; /* 경기 줄과 <붙인다> */ padding:12px; background:var(--surface-1); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-card) var(--r-card); } /* 상세 화면의 마켓 묶음을 그대로 쓴다. 여기서는 좀 더 촘촘하게 */ .sb-oddsbox .mt-mkts{ display:flex; flex-direction:column; gap:8px; } .sb-oddsbox .mt-mkt__head{ padding:8px 10px; } .sb-oddsbox__msg{ padding:20px; text-align:center; font-size:var(--fs-sm); color:var(--text-5); } @media (max-width:768px){ .sb-oddsbox{ padding:8px; } } .sb-empty{ padding:48px; text-align:center; font-size:var(--fs-md); color:var(--text-5); } /* ========================================================================== 베팅 슬립 — 싱글/조합/시스템 탭이 없다. 하나 고르면 싱글, 둘 이상이면 조합. 화면이 알아서 말해 준다. ========================================================================== */ .slip{ position:fixed; right:var(--gutter); bottom:var(--gutter); z-index:50; width:300px; max-width:calc(100vw - var(--gutter) * 2); border-radius:var(--r); overflow:hidden; background:var(--surface-1); border:1px solid var(--line); box-shadow:0 16px 40px rgba(0,0,0,.5); } .slip[hidden]{ display:none; } /* 접힌 머리 — 노란 바 하나. 두툼할 이유가 없다. */ .slip__head{ display:flex; align-items:center; gap:8px; width:100%; height:44px; padding:0 14px; background:var(--cta); color:var(--text-on-cta); font-size:var(--fs-base); font-weight:900; } .slip__head i{ font-style:normal; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--bg); color:var(--cta); font-size:var(--fs-sm); font-weight:900; /* 숫자를 원 안 정중앙에 — .badge-count 의 같은 주석 참고 */ line-height:1; font-variant-numeric:tabular-nums; } .slip__head svg{ margin-left:auto; width:18px; height:18px; transition:transform var(--t-bg); } /* 담긴 것이 없을 때의 「닫기」 — 화살표가 있던 자리다 */ .slip__close{ margin-left:auto; font-size:var(--fs-sm); font-weight:700; color:var(--text-4); } .slip.is-open .slip__head svg{ transform:rotate(180deg); } .slip__body{ display:none; padding:10px; max-height:60vh; overflow-y:auto; } .slip.is-open .slip__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; } /* 담은 픽 — 경기 이름 · 배당 · 빼기가 한 줄, 마켓 이름이 그 아래 */ .slip__picks{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; } .slip__pick{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 8px; align-items:center; padding:8px 10px; border-radius:var(--r-chip); background:var(--bg); } .slip__pick b{ grid-column:1; grid-row:1; font-size:var(--fs-xs); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .slip__pick small{ grid-column:1; grid-row:2; font-size:var(--fs-sm); color:var(--text-5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .slip__odds{ grid-column:2; grid-row:1 / span 2; font-size:var(--fs-base); font-weight:900; color:var(--cta); font-variant-numeric:tabular-nums; } .slip__del{ grid-column:3; grid-row:1 / span 2; width:22px; height:22px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--surface-2); color:var(--text-4); } .slip__del:hover{ background:var(--tag-casino); color:#fff; } .slip__del svg{ width:12px; height:12px; } /* 금액 — 라벨 · 보유액 · 입력칸 · 빠른 금액 단추 */ .slip__amt{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; } .slip__amt__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .slip__amt__top span{ font-size:var(--fs-sm); font-weight:800; color:var(--text-4); } .slip__amt__top em{ font-style:normal; font-size:var(--fs-sm); color:var(--text-5); } .slip__amount{ display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:var(--r-chip); background:var(--bg); border:1px solid var(--line); transition:border-color var(--t-color); } .slip__amount:focus-within{ border-color:var(--cta); } .slip__amount b{ font-size:var(--fs-base); font-weight:900; color:var(--text-4); } .slip__amount input{ flex:1; min-width:0; border:0; background:transparent; text-align:right; font-family:var(--font); font-size:var(--fs-md); font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; } /* ⚠ 칸 수를 <박지 않는다>. 2026-09-18 에 빠른금액이 셋→다섯(+최대 = 여섯)이 되면서 4칸 격자에 여섯이 들어가 줄이 어긋났다. auto-fit 이면 개수가 바뀌어도 따라간다. */ .slip__quick{ display:grid; grid-template-columns:repeat(auto-fit, minmax(62px,1fr)); gap:4px; } .slip__quick button{ height:30px; border-radius:var(--r-chip); background:var(--surface-2); color:var(--text-2); font-size:var(--fs-sm); font-weight:900; white-space:nowrap; transition:background var(--t-bg), color var(--t-color); } .slip__quick button:hover{ background:var(--surface-3); color:var(--text); } .slip__quick [data-max]{ background:var(--surface-3); } .slip__quick [data-max]:hover{ background:var(--cta); color:var(--text-on-cta); } /* 계산기 — 베팅금 · 총 배당 · 예상 당첨금 */ .slip__calc{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-items:center; padding:10px 12px; border-radius:var(--r-chip); background:var(--bg); } .slip__calc span{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--text-4); } .slip__calc b{ font-size:var(--fs-base); font-weight:900; text-align:right; font-variant-numeric:tabular-nums; } .slip__calc b.is-win{ font-size:var(--fs-md); color:var(--success); } /* 다폴더 자동 보너스 줄 — 위 총 배당에 이미 먹인 값이라, <얼마가 얹혔는지>만 알린다. 회사가 얹어 준 것이라 당첨금과 같은 성공 색을 쓰되 한 단계 여리게 둔다. */ .slip__calc span.slip__bonus{ color:var(--success); } .slip__calc b.slip__bonus{ color:var(--success); } .slip__kind{ padding:2px 8px; border-radius:var(--r-full); background:var(--surface-2); font-style:normal; font-size:var(--fs-sm); font-weight:900; color:var(--text-2); } .slip__empty{ padding:18px; text-align:center; font-size:var(--fs-sm); color:var(--text-5); } /* ========================================================================== 좁은 화면 PC 는 `팀 | 마켓 | +N` 세 칸이지만, 폭이 좁아지면 그대로 둘 수 없다. 팀과 `+N` 을 윗줄에 두고 마켓을 아랫줄 전체 폭으로 내린다. ========================================================================== */ @media (max-width:1024px){ /* 배너를 세로로 쌓으면 첫 화면이 배너만으로 가득 찬다. 옆으로 밀어 보게 한다. */ .sb-banners{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .sb-banners::-webkit-scrollbar{ display:none; } .sb-banner{ flex:none; width:88%; scroll-snap-align:start; min-height:132px; } /* ★ 카드 키를 줄인다 (레드 2026-09-15 「여백좀줄여서 카트높이좀줄여달래」). 폰에서는 카드 하나가 화면의 절반을 먹어 <한 경기 보고 또 밀어야> 했다. 글자·동그라미 크기는 그대로 두고 <빈 자리만> 걷는다 — 위아래 여백 14→10, 팀 줄 여백 14→8, 마켓 이름 줄 간격 6→4. */ .sb-hl{ width:86%; min-width:0; padding:10px 12px; } .sb-hl__teams{ margin:8px 0; } .sb-hl .sb-mkt__picks{ margin-top:4px; } .sb-hl__mkt{ font-size:var(--fs-xs); } /* ★★ 한 칸으로 쌓는다 (레드 2026-09-15 「위아래 여백 최소화 · 팀이름 … 처리」). 두 칸(go | more)으로 두니 팀 이름 칸이 <제 글자 길이만큼> 버티고, 그 옆에 배당판이 겹쳐 「도호쿠 라쿠텐 골든이글스」가 숫자 밑으로 파고들었다. 한 칸이면 겹칠 자리가 아예 없다. ⚠ minmax(0,1fr) 이 아니라 <1fr 하나>다. 칸이 하나뿐이라 min 을 0 으로 눌러 둘 필요가 없고, 안쪽 .sb-team__name 의 말줄임이 그때 비로소 걸린다. */ .sb-row{ grid-template-columns:1fr; grid-template-areas:"go" "mkts"; gap:8px; align-items:start; padding:10px 12px; } .sb-row__go{ grid-area:go; min-width:0; } .sb-mkts{ grid-area:mkts; } /* +N 은 <시각 줄 오른쪽 끝>에 붙는다 — 제 줄을 따로 먹지 않는다 */ .sb-more{ position:absolute; top:10px; right:12px; height:26px; padding:0 8px; font-size:var(--fs-xs); /* ⚠⚠ z-index 를 <반드시> 준다 (2026-09-17). 여기서 +N 은 절대배치라 .sb-row__go <위에 겹친다>. 그런데 위쪽에 `.sb-row[data-sport] > .sb-row__go{ position:relative; z-index:1 }` 이 있어 겹치는 자리에서 <경기 줄이 단추보다 위에> 깔린다 — 손가락이 +N 을 눌러도 닿는 것은 경기 줄이고, 단추의 눌림 표시(.is-open)도 그래서 안 먹는다. 지금은 둘 다 toggle 을 불러 결과가 같아 보이지만 그것은 <우연>이다. 한쪽 동작이 달라지는 날 조용히 어긋난다 — 누르는 자리가 단추여야 한다. */ z-index:2; } .sb-row{ position:relative; } .sb-mkt{ grid-template-columns:70px minmax(0,1fr); gap:8px; } /* 팀 줄 — 배지와 점수가 자리를 먼저 가져가고 이름이 남는 만큼 쓴다 */ .sb-team{ gap:8px; font-size:var(--fs-sm); } .sb-team__mark{ flex:none; } .slip{ left:0; right:0; bottom:var(--tabbar-h); width:auto; max-width:none; border-radius:var(--r) var(--r) 0 0; border-left:0; border-right:0; border-bottom:0; } .slip__head{ height:48px; } .slip__body{ max-height:52vh; } .slip .btn--cta{ height:46px; } } @media (max-width:640px){ /* 종목 줄 — 손가락으로 밀어 보는 줄이라 칸을 조금 좁힌다. ★★ <촘촘하게> (레드 2026-09-15). 칸마다 위아래 18px 씩 비어 있어 종목 줄 하나가 화면의 큰 덩이를 먹었다 — 그 위아래 여백까지 합치면 배너와 경기 목록 사이가 통째로 벌어져 보인다. 판과 그림 크기는 그대로 두고 <빈 자리만> 걷는다. */ .sb-sports{ gap:2px; } /* ⚠ 이름은 <한 줄>이다. 「아이스 하키」가 두 줄이 되면 그 줄만 키가 커져 종목 줄 전체가 덩달아 높아진다. 넘치면 …으로 자른다. */ .sb-sport{ width:64px; padding:4px 2px 2px; gap:4px; font-size:var(--fs-xs); } .sb-sport > span:last-child{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sb-sport__ico{ width:46px; height:46px; } .sb-sport__ico img, .sb-sport__ico svg{ width:39px; height:39px; } /* 검색은 동그란 단추로 접어 둔다. 누르면(label 이라 안의 칸이 잡힌다) 펼쳐진다. */ .sb-top{ gap:10px; flex-wrap:nowrap; } .sb-tabs{ flex:1; min-width:0; } /* ⚠⚠ gap 을 <0 으로> 내린다 (레드 2026-09-15 「검색버튼 정가운데오기」). .sb-search 는 gap:12px 인 flex 다. 접힌 상태에서도 폭 0 짜리 입력칸이 그 12px 이 살아 있었다 — 돋보기가 칸 한가운데가 아니라 <왼쪽으로 6px 밀려> 서 있었다. 펼치면 다시 12px 로 돌려준다. */ .sb-search{ flex:none; width:44px; min-width:0; margin-left:0; padding:0; gap:0; justify-content:center; border-radius:var(--r-full); transition:width var(--t-bg), border-radius var(--t-bg); } .sb-search:focus-within{ gap:12px; } /* ⚠⚠ width:0 만으로는 안 된다. 바깥 규칙의 flex:1 이 살아 있어 <남은 자리를 전부> 가져간다 — 실측 22px 을 먹어 돋보기가 칸 가운데서 11px 왼쪽에 섰다(레드가 두 번 말한 자리다). ★ flex 를 <0 0 0> 으로 눌러야 진짜 폭이 0 이 된다. */ .sb-search input{ flex:0 0 0; width:0; min-width:0; padding:0; opacity:0; } .sb-search:focus-within{ flex:1; width:auto; padding:0 14px; border-radius:var(--r); gap:12px; } .sb-search:focus-within input{ flex:1 1 auto; width:auto; opacity:1; } /* 탭 줄은 위에 붙여 둔다 — 리그를 한참 내려도 종목을 바로 바꿀 수 있다 (루벳) */ .sb-top{ position:sticky; top:var(--header-h); z-index:20; margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter); background:var(--bg); border-bottom:1px solid var(--line); } /* 경기 한 줄 — 루벳 모바일 그대로. 왼쪽 : 시각 위, 두 팀 아래 오른쪽: 마켓 이름 위, 배당 단추 아래 쌓지 않고 좌우로 나눠야 한 화면에 경기가 여럿 들어온다. */ /* ⚠⚠ 이 블록이 위(≤1024)의 <한 칸 쌓기>를 덮고 있었다 (2026-09-15). 좌우로 나누면 팀 이름 칸이 1fr 이라 <제 글자 길이만큼> 버티고, 배당판이 그 위로 겹쳐 「도호쿠 라쿠텐 골든이글스」가 숫자 밑으로 파고든다. ★ 폰에서는 <한 칸으로> 쌓는다. 겹칠 자리가 아예 없어지고 그때 비로소 .sb-team__name 의 말줄임이 걸린다. */ .sb-row{ position:relative; grid-template-columns:1fr; grid-template-areas:"go" "mkts"; gap:8px; align-items:start; padding:10px 12px; } /* `+N` 은 칸을 차지하지 않고 오른쪽 위 모서리에 얹는다. */ .sb-more{ position:absolute; top:10px; right:12px; height:24px; padding:0 8px; font-size:var(--fs-xs); } /* 마켓은 1x2 하나만 남긴다. 핸디캡·언더오버는 `+N` 안으로 들어간다. 좁은 화면에 세 줄을 다 펴면 경기 하나가 화면 3분의 1을 먹는다. (루벳도 하나만 둔다) */ .sb-mkt:not(:first-child){ display:none; } .sb-more__wide{ display:none; } .sb-more__narrow{ display:inline; } /* 마켓 이름을 배당 위 가운데로 올린다. `+N` 과 같은 높이로 맞춘다. */ .sb-mkt{ grid-template-columns:minmax(0,1fr); gap:6px; } .sb-mkt__head{ justify-content:center; min-height:22px; align-items:center; } /* 팀 이름도 어절 단위로 끊는다 */ /* 모바일 경기 줄 — 글자를 12px 로 내리고 <한 줄>로 둔다 (레드 2026-09-14 「폰트너무커서 11~12로 · 2줄로하지않고 … 처리」). ⚠ 예전에는 어절 단위로 <끊어 내렸다>(align-items:flex-start + keep-all). 두 줄이 되면 줄 높이가 들쭉날쭉해 배당 칸과 어긋났다. 이제 말줄임이라 가운데 맞춤으로 돌린다 — H·A 도 그래야 제자리에 선다. */ .sb-team{ align-items:center; font-size:12px; gap:8px; } .sb-team__mark{ margin-top:0; width:22px; height:22px; font-size:11px; } .sb-row__teams{ word-break:normal; } .sb-team__ha{ min-width:15px; height:15px; font-size:10px; } /* 좁은 화면에서는 `진행 중` 을 떼고 분만 남긴다 — 뱃지가 시각 자리를 다 먹는다 */ .sb-live{ padding:2px 7px; } .sb-live em{ display:none; } /* 칸이 좁으므로 이름과 배당을 위아래로 쌓는다 */ .sb-pick{ flex-direction:column; justify-content:center; gap:2px; height:56px; padding:0 4px; } .sb-pick b{ font-size:var(--fs-base); } .sb-hl__side i{ width:30px; height:30px; } .sb-hl__score b{ min-width:30px; height:30px; } } /* ========================================================================== 경기 상세 — 경기를 누르면 오는 화면 루벳의 `전문가 팁` 은 두지 않는다. ========================================================================== */ /* ---- 위쪽 경기 줄 — 같은 종목의 다른 경기로 바로 건너뛴다 ---------------- 글자만 늘어놓으면 무엇인지 읽히지 않는다. 주요 경기 카드와 같은 방식으로 리그 · 시각 · 팀 마크 · 점수를 담은 작은 카드로 만든다. ------------------------------------------------------------------------ */ .mt-strip{ display:flex; gap:8px; } .mt-strip__item{ flex:none; width:236px; padding:12px 14px; border-radius:var(--r); display:grid; gap:8px; background:var(--surface-1); border:1px solid var(--line); transition:border-color var(--t-color), background var(--t-bg); } .mt-strip__item:hover{ border-color:var(--primary); } .mt-strip__item.is-on{ background:color-mix(in oklab, var(--primary) 22%, var(--surface-1)); border-color:var(--primary); } .mt-strip__top{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--text-5); min-width:0; } .mt-strip__top svg{ flex:none; width:14px; height:14px; } .mt-strip__top b{ flex:1; min-width:0; font-weight:800; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mt-strip__when{ flex:none; font-size:var(--fs-sm); font-weight:800; color:var(--text-4); } .mt-strip__item.is-on .mt-strip__when{ color:var(--text-2); } .mt-strip__row{ display:flex; align-items:center; gap:8px; min-width:0; font-size:var(--fs-base); font-weight:800; } .mt-strip__row i{ flex:none; width:20px; height:20px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--surface-3); font-style:normal; font-size:var(--fs-sm); font-weight:900; color:var(--text-2); } .mt-strip__row span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mt-strip__row b{ flex:none; font-variant-numeric:tabular-nums; color:var(--cta); } /* ★★ 띠 카드에 <종목 배경 사진> (레드 2026-09-13 「배너랑 … 배경카드넣자」) 주요 경기 카드(.sb-hl[data-sport])와 <같은 열쇠 · 같은 그림 · 같은 어둠막>이다. 한 사이트 안에서 같은 뜻(이 경기는 야구다)을 두 가지 그림으로 말하지 않는다. ⚠ 어둠막을 <사진 위에> 깐다. 사진만 깔면 흰 유니폼이나 조명 위에서 팀 이름이 사라진다 — 아래에서 글자 그림자까지 함께 준다. ⚠ [data-sport] 가 붙은 카드에만 건다. 열쇠가 없으면 원래의 판을 그대로 쓴다. */ .mt-strip__item[data-sport]{ background: linear-gradient(180deg, rgba(5,8,15,.30) 0%, rgba(5,8,15,.50) 55%, rgba(5,8,15,.68) 100%), var(--hl-art, none) center bottom / cover no-repeat, var(--surface-1); } .mt-strip__item[data-sport="soccer"] { --hl-art:url("/assets/design/img/sports-bg/soccer-20260913.jpg"); } .mt-strip__item[data-sport="baseball"] { --hl-art:url("/assets/design/img/sports-bg/baseball-20260913.jpg"); } .mt-strip__item[data-sport="basketball"]{ --hl-art:url("/assets/design/img/sports-bg/basketball-20260913.jpg"); } .mt-strip__item[data-sport="volleyball"]{ --hl-art:url("/assets/design/img/sports-bg/volleyball-20260913.jpg"); } .mt-strip__item[data-sport="ice-hockey"]{ --hl-art:url("/assets/design/img/sports-bg/ice-hockey-20260913.jpg"); } .mt-strip__item[data-sport] .mt-strip__top b, .mt-strip__item[data-sport] .mt-strip__row span{ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); } /* ---- 경기 상세 판 짜기 -------------------------------------------------- PC : 왼쪽에 머리 · 탭 · 마켓, 오른쪽 한 줄로 트래커. 좁은 화면: 트래커를 **경기 머리 바로 아래**로 올린다. 점수와 순위는 베팅하기 전에 보는 것이라 마켓 아래에 있으면 아무도 안 본다. ------------------------------------------------------------------------ */ .mt-layout{ display:grid; grid-template-columns:minmax(0,1fr) 304px; grid-template-areas:"head track" "tabs track" "mkts track"; gap:var(--gap-card); align-items:start; align-content:start; } .mt-layout > *{ min-width:0; } .mt-layout > .mt-head { grid-area:head; } .mt-layout > .mt-tabs { grid-area:tabs; } .mt-layout > .mt-mkts { grid-area:mkts; } .mt-layout > .mt-track{ grid-area:track; } .mt-mkts{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; } /* ---- 경기 머리 ---------------------------------------------------------- */ .mt-head{ padding:20px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line); } /* ★★ 경기 머리(홈 vs 원정)에 <종목 배경 사진> (레드 2026-09-13) 이 칸이 그 경기의 얼굴이다. 그런데 판이 통째로 어두워, 어느 종목을 보고 있는지 글자를 읽어야만 알 수 있었다. 사진을 깔면 화면을 열자마자 알아본다. ⚠ 띠보다 어둠막을 <조금 더 진하게> 준다. 여기에는 점수 · 팀 이름 · 시각이 한꺼번에 올라앉아 읽을 글자가 가장 많다. ⚠ 사진은 아래(center bottom)를 기준으로 자른다 — 구장 사진은 위가 하늘이라 가운데를 잡으면 잔디가 안 나오고 하늘만 깔린다. */ .mt-head[data-sport]{ background: linear-gradient(180deg, rgba(5,8,15,.50) 0%, rgba(5,8,15,.68) 55%, rgba(5,8,15,.82) 100%), var(--hl-art, none) center bottom / cover no-repeat, var(--surface-1); } .mt-head[data-sport="soccer"] { --hl-art:url("/assets/design/img/sports-bg/soccer-20260913.jpg"); } .mt-head[data-sport="baseball"] { --hl-art:url("/assets/design/img/sports-bg/baseball-20260913.jpg"); } .mt-head[data-sport="basketball"]{ --hl-art:url("/assets/design/img/sports-bg/basketball-20260913.jpg"); } .mt-head[data-sport="volleyball"]{ --hl-art:url("/assets/design/img/sports-bg/volleyball-20260913.jpg"); } .mt-head[data-sport="ice-hockey"]{ --hl-art:url("/assets/design/img/sports-bg/ice-hockey-20260913.jpg"); } .mt-head[data-sport] .mt-head__where, .mt-head[data-sport] .mt-side__name, .mt-head[data-sport] .mt-when{ text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.5); } .mt-head__where{ display:flex; align-items:center; gap:8px; font-size:var(--fs-base); color:var(--text-5); } .mt-head__where svg{ width:18px; height:18px; } .mt-head__main{ margin-top:14px; display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; } .mt-side{ display:grid; justify-items:center; gap:8px; text-align:center; } .mt-side__mark{ /* ★ 56 → 64px (레드 2026-09-16) */ width:64px; height:64px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--surface-3); font-size:var(--fs-xl); font-weight:900; } /* 한글은 기본값이면 낱글자 단위로 끊긴다. `크리스탈 팰리 / 스` 를 막는다. */ .mt-side__name{ font-size:var(--fs-md); font-weight:900; word-break:keep-all; } .mt-when{ text-align:center; } .mt-when b{ display:block; font-size:var(--fs-2xl); font-weight:900; font-variant-numeric:tabular-nums; } .mt-when span{ font-size:var(--fs-base); color:var(--text-5); } /* ---- 마켓 탭 ------------------------------------------------------------ */ .mt-tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; } .mt-tabs::-webkit-scrollbar{ display:none; } .mt-tab{ flex:none; height:40px; padding:0 14px; border-radius:var(--r-full); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:var(--surface-2); color:var(--text-3); font-size:var(--fs-base); font-weight:800; transition:background var(--t-bg), color var(--t-color); } .mt-tab:hover{ color:var(--text); } .mt-tab.is-on{ background:var(--surface-3); color:var(--text); } .mt-tab i{ font-style:normal; font-size:var(--fs-sm); font-weight:900; color:var(--text-5); } .mt-tab.is-on i{ color:var(--cta); } /* ---- 마켓 묶음 (접힘) --------------------------------------------------- */ .mt-mkt{ border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line); overflow:hidden; } .mt-mkt__head{ display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; text-align:left; } .mt-mkt__name{ font-size:var(--fs-md); font-weight:900; } .mt-mkt__badge{ padding:3px 8px; border-radius:var(--r-chip); background:var(--cta); color:var(--text-on-cta); font-size:var(--fs-sm); font-weight:900; } .mt-mkt__caret{ margin-left:auto; width:20px; height:20px; color:var(--text-4); transition:transform var(--t-bg); } .mt-mkt.is-folded .mt-mkt__caret{ transform:rotate(180deg); } .mt-mkt.is-folded .mt-mkt__body{ display:none; } .mt-mkt__body{ display:grid; gap:6px; padding:0 16px 16px; } .mt-mkt__body[data-cols="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); } .mt-mkt__body[data-cols="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); } /* 배당 한 칸 — 이름은 왼쪽, 배당은 오른쪽 */ .mt-pick{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:0 14px; border-radius:var(--r-chip); background:var(--surface-2); color:var(--text); transition:background var(--t-bg), color var(--t-color); } .mt-pick span{ font-size:var(--fs-base); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mt-pick b{ flex:none; font-size:var(--fs-md); font-weight:900; font-variant-numeric:tabular-nums; } .mt-pick:hover{ background:var(--surface-3); } .mt-pick.is-on{ background:var(--cta); color:var(--text-on-cta); } /* ---- 오른쪽 트래커 ------------------------------------------------------ */ .mt-track{ padding:16px; border-radius:var(--r); background:var(--surface-1); border:1px solid var(--line); } .mt-track__title{ display:flex; align-items:center; justify-content:center; gap:8px; padding-bottom:12px; font-size:var(--fs-base); font-weight:900; color:var(--text-3); } .mt-track__board{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; padding:16px; border-radius:var(--r); background:var(--bg); text-align:center; } .mt-track__board b{ font-size:var(--fs-2xl); font-weight:900; font-variant-numeric:tabular-nums; } .mt-track__board span{ display:block; font-size:var(--fs-sm); color:var(--text-4); } .mt-track__rows{ margin-top:10px; display:grid; gap:6px; } .mt-track__row{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--r-chip); background:var(--bg); font-size:var(--fs-base); font-weight:800; text-align:center; } .mt-track__row em{ font-style:normal; font-size:var(--fs-sm); font-weight:700; color:var(--text-5); } @media (max-width:1024px){ .mt-layout{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "track" "tabs" "mkts"; } } @media (max-width:640px){ /* ★★ 배당판을 으로 되돌린다 (레드 2026-09-15 「홈/드로우/어웨이 한줄 · 핸디캡·언오바 동일 기준점 한줄」). 폰에서 한 칸씩 세로로 쌓고 있었다. 그러면 · 승무패가 <석 줄>이 되어 홈·무·원정을 한눈에 못 견준다 · 핸디캡·오버언더는 <같은 기준점의 짝>이 위아래로 갈려 「오버 150.5 / 언더 150.5」가 서로 다른 줄의 값처럼 보인다 배당판은 <견주는 판>이다. 짝을 갈라 놓으면 판이 아니게 된다. ⚠ 칸이 좁아지므로 안쪽을 줄인다 — 글자·높이·여백만 줄이고 칸 수는 그대로 둔다(3은 3, 2는 2). */ .mt-mkt__body{ gap:4px; padding:0 10px 12px; } .mt-pick{ min-height:42px; padding:0 8px; gap:4px; } .mt-pick span{ font-size:var(--fs-xs); } .mt-pick b{ font-size:var(--fs-sm); } .mt-head{ padding:16px; } .mt-head__main{ margin-top:10px; gap:8px; } .mt-side__mark{ width:52px; height:52px; font-size:var(--fs-lg); } .mt-side__name{ font-size:var(--fs-base); } .mt-when b{ font-size:var(--fs-xl); } .mt-strip__item{ width:210px; } } /* ═══════════════════════════════════════════════════════════════════════ 배팅 티켓 창 (레드 2026-09-12 「모달 지금보다 좀 더 멋지게 · 지금너무 밋밋하네」 「처음에 숫자만나오는데 · 하단에 배팅한거 · 처음부터 나오게」) — bet/BetSlip.tsx WaitDialog ① 상태 링(남은 초 · 사파이어) → 접수 초록 체크 / 실패 빨간 「!」 ② 티켓 폴더 목록 · 절취선(양옆 반원 홈) · 합계 — 당첨금이 가장 크다 ③ 단추 결과가 난 뒤에만 옛 창(.ex-slipwait)은 exit.css(원본 토큰)라 whaley 색을 못 받았다. 이름을 새로 두고 토큰만 쓴다. ═══════════════════════════════════════════════════════════════════════ */ .bt-modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:16px; background:rgba(4,7,14,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:bt-fade .18s ease-out; } .bt-card{ position:relative; width:min(400px, 100%); max-height:calc(100dvh - 32px); overflow:auto; padding:28px 20px 20px; border-radius:20px; border:1px solid color-mix(in srgb, var(--primary) 45%, var(--line)); background: radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--primary) 55%, transparent) 0%, transparent 62%), linear-gradient(180deg, #101a2e 0%, var(--surface-1) 58%); box-shadow:0 30px 80px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05); animation:bt-rise .32s cubic-bezier(.2,.9,.3,1.15); } .bt-modal.is-ok .bt-card{ border-color:color-mix(in srgb, var(--success) 50%, var(--line)); background: radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--success) 26%, transparent) 0%, transparent 62%), linear-gradient(180deg, #0f1c24 0%, var(--surface-1) 58%); animation:bt-flash .7s ease-out; } .bt-modal.is-fail .bt-card{ border-color:color-mix(in srgb, var(--updown-down) 50%, var(--line)); background: radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--updown-down) 22%, transparent) 0%, transparent 62%), linear-gradient(180deg, #1a121c 0%, var(--surface-1) 58%); } /* ① 상태 */ .bt-status{ text-align:center; } .bt-ring{ position:relative; width:84px; height:84px; margin:0 auto 14px; } .bt-ring__svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; } .bt-ring__track{ fill:rgba(255,255,255,.03); stroke:var(--surface-3); stroke-width:4; } .bt-ring__bar{ fill:none; stroke:#6FA0FF; stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(78,147,255,.65)); transition:stroke-dashoffset 1s linear, stroke .3s; } .is-ok .bt-ring__bar{ stroke:var(--success); filter:drop-shadow(0 0 8px rgba(63,217,138,.6)); transition:stroke-dashoffset .35s ease-out, stroke .3s; } .is-fail .bt-ring__bar{ stroke:var(--updown-down); filter:drop-shadow(0 0 8px rgba(255,75,75,.5)); transition:stroke-dashoffset .35s ease-out, stroke .3s; } .bt-ring__num{ position:absolute; inset:0; display:grid; place-items:center; font-size:32px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; animation:bt-tick .35s ease-out; } .is-fail .bt-ring__num{ color:var(--updown-down); animation:bt-pop .35s ease-out; } .bt-ring__icon{ position:absolute; inset:0; margin:auto; width:40px; height:40px; fill:none; stroke:var(--success); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24; animation:bt-draw .45s .12s ease-out forwards; } .bt-title{ margin:0; font-size:var(--fs-lg); line-height:var(--lh-lg); font-weight:900; color:#fff; word-break:keep-all; text-wrap:balance; } .bt-sub{ margin:4px 0 0; font-size:var(--fs-xs); line-height:18px; color:var(--text-4); word-break:keep-all; text-wrap:balance; } .is-fail .bt-sub{ color:#FF9C9C; } /* ② 티켓 */ .bt-ticket{ position:relative; margin-top:20px; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); } .bt-ticket__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:12px 16px 2px; font-size:var(--fs-sm); font-weight:800; letter-spacing:.06em; color:var(--text-4); } .bt-ticket__head em{ font-style:normal; letter-spacing:0; padding:2px 9px; border-radius:var(--r-full); background:color-mix(in srgb, var(--primary) 40%, transparent); color:#D3E2FF; } .bt-picks{ list-style:none; margin:0; padding:6px 16px 14px; display:grid; max-height:38vh; overflow:auto; } .bt-pick{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:end; padding:10px 0; border-top:1px solid rgba(255,255,255,.06); } .bt-pick:first-child{ border-top:0; padding-top:4px; } .bt-pick__match{ grid-column:1 / -1; font-size:var(--fs-sm); color:var(--text-5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bt-pick__sel{ min-width:0; display:flex; flex-direction:column; gap:1px; } .bt-pick__sel em{ font-style:normal; font-size:var(--fs-sm); color:var(--text-4); } .bt-pick__sel b{ font-size:var(--fs-base); font-weight:800; color:var(--text-2); word-break:keep-all; } .bt-pick__sel b i{ font-style:normal; margin-left:6px; padding:0 6px; border-radius:6px; background:var(--surface-3); font-size:var(--fs-sm); color:var(--text-3); } /* 배당 — 플래티넘 금속 칩(버튼 CTA 와 같은 결) */ .bt-pick__odds{ min-width:58px; padding:6px 10px; border-radius:10px; text-align:center; background:linear-gradient(180deg, var(--cta-hi) 0%, var(--cta) 55%, var(--cta-lo) 100%); color:#0C1220; font-weight:900; font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px -2px rgba(0,0,0,.5); } /* 절취선 — 점선과 양옆 반원 홈. 홈은 창 바탕색으로 칠해 티켓을 파낸 것처럼 보이게 */ .bt-cut{ position:relative; height:0; margin:0 16px; border-top:2px dashed #33466A; } .bt-cut::before, .bt-cut::after{ content:""; position:absolute; top:-10px; width:18px; height:18px; border-radius:50%; background:#0d1526; box-shadow:inset 0 0 0 1px var(--line); } .bt-cut::before{ left:-26px; } .bt-cut::after{ right:-26px; } .bt-sum{ margin:0; padding:14px 16px 16px; display:grid; gap:8px; } .bt-sum > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .bt-sum dt{ margin:0; font-size:var(--fs-sm); color:var(--text-4); } .bt-sum dd{ margin:0; font-size:var(--fs-base); font-weight:800; color:var(--text-2); font-variant-numeric:tabular-nums; } .bt-sum__win{ margin-top:4px; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); } .bt-sum__win dt{ font-weight:800; color:var(--text-3); } .bt-sum__win dd{ font-size:var(--fs-xl); line-height:var(--lh-xl); font-weight:900; color:var(--success); text-shadow:0 0 18px rgba(63,217,138,.35); } /* ③ 단추 */ .bt-actions{ display:flex; gap:10px; margin-top:18px; animation:bt-fade .25s ease-out; } .bt-actions > *{ flex:1; justify-content:center; } .bt-ghost{ background:transparent; border:1px solid var(--line); color:var(--text-2); } .bt-ghost:hover{ border-color:color-mix(in srgb, var(--primary) 70%, var(--line)); color:#fff; } @keyframes bt-fade{ from{ opacity:0; } } @keyframes bt-rise{ from{ opacity:0; transform:translateY(14px) scale(.97); } } @keyframes bt-tick{ from{ transform:scale(1.25); opacity:.4; } } @keyframes bt-pop{ 0%{ transform:scale(.4); opacity:0; } 70%{ transform:scale(1.15); } } @keyframes bt-draw{ to{ stroke-dashoffset:0; } } @keyframes bt-flash{ 0%{ box-shadow:0 0 0 0 rgba(63,217,138,.45), 0 30px 80px -24px rgba(0,0,0,.75); } 100%{ box-shadow:0 0 0 18px rgba(63,217,138,0), 0 30px 80px -24px rgba(0,0,0,.75); } } @media (prefers-reduced-motion: reduce){ .bt-modal, .bt-card, .bt-ring__num, .bt-actions{ animation:none; } .bt-ring__bar{ transition:none; } .bt-ring__icon{ animation:none; stroke-dashoffset:0; } } @media (max-width:480px){ .bt-card{ padding:24px 16px 16px; } .bt-ticket__head, .bt-sum, .bt-picks{ padding-left:14px; padding-right:14px; } .bt-cut{ margin:0 14px; } .bt-cut::before{ left:-24px; } .bt-cut::after{ right:-24px; } } /* ⚠⚠ 여기 있던 .sb-sport__ico 24px 규칙을 걷었다 (2026-09-13). 같은 이름의 규칙이 <파일 안에 두 벌>이었다. 위(69행)에서 52px 판으로 키워 놨는데 이 줄이 뒤에 있어서 그것을 24px 로 되돌렸다. 레드가 「아이콘이 너무 작게 보이는데」 라고 한 것이 이것이다 — 키우는 코드를 넣고도 화면은 그대로였다. ★ 종목 탭 아이콘 규칙은 이 파일에서 <한 군데>(69행)에만 둔다. */ /* ========================================================================== 배너 배경 — 브러시 그림 한 장을 <종목 색으로> 물들인다 (레드 2026-09-14 「각페이지 배경처리해주고 … 종목별로 배경 이미지 색을 다르게」) ★★ 그림은 <한 장>이다(파랑). 종목마다 만들지 않는다 — background-blend-mode:color 가 위 색층의 <색>과 아래 그림의 <밝기>를 섞어 같은 무늬를 어떤 색으로든 물들인다. 그림이 늘면 관리할 것만 늘어난다. ⚠ 어둠막을 <맨 위에> 한 겹 더 깐다. 브러시가 밝은 자리에서 흰 글자가 사라진다. blend 는 그 아래 두 겹에만 걸리므로(콤마 순서) 막은 그대로 남는다. ⚠ 여기 없는 종목은 <예전 그라디언트>로 떨어진다. 그림이 안 깔릴 뿐 화면은 멀쩡하다. ========================================================================== */ /* ★★ 배경 그림을 <셋>으로 늘렸다 (레드 2026-09-15). 전에는 한 장을 세 칸에 똑같이 깔았다. 나란히 놓이니 <같은 무늬가 세 번> 보여 세 칸이 한 장을 잘라 놓은 것처럼 읽혔다. 칸마다 다른 결을 준다. ★★ 종목 색층(blend-mode:color)을 <걷었다>. 전에는 그림 <한 장>을 종목 색으로 물들여 썼다. 그런데 새로 받은 그림은 그 자체로 결이 있는 파란 배경이라, 색을 입히면 야구 칸이 <금색>으로 변해 그림이 통째로 다른 것이 됐다 — 받은 그림을 보여 주는 뜻이 사라진다. ★ 종목 구분은 <오른쪽 엠블럼>이 이미 한다. 바탕까지 종목 색일 까닭이 없다. ⚠ 그림 이름은 --bgimg 로 <바깥에서> 고른다. background 선언 안에 박으면 칸마다 이 긴 선언을 통째로 다시 써야 하고, 어둠막을 고칠 때 세 군데를 함께 고쳐야 한다. */ .sb-banner[data-sport]{ --bgimg:url("/assets/design/img/sports-bg/banner1-20260915.jpg"); background: linear-gradient(100deg, rgba(5,8,15,.62) 0%, rgba(5,8,15,.30) 55%, rgba(5,8,15,.55) 100%), var(--bgimg) center / cover no-repeat, var(--surface-1); } /* ⚠ :nth-child 는 <형제 순서>다. 배너 줄에는 배너만 들어 있어야 맞는다 */ .sb-banners .sb-banner[data-sport]:nth-child(2){ --bgimg:url("/assets/design/img/sports-bg/banner2-20260915.jpg"); } .sb-banners .sb-banner[data-sport]:nth-child(3){ --bgimg:url("/assets/design/img/sports-bg/banner3-20260915.jpg"); } .sb-banner[data-sport="soccer"] { --sp:var(--sp-soccer); } .sb-banner[data-sport="basketball"] { --sp:var(--sp-basketball); } .sb-banner[data-sport="baseball"] { --sp:var(--sp-baseball); } .sb-banner[data-sport="volleyball"] { --sp:var(--sp-volleyball); } .sb-banner[data-sport="ice-hockey"] { --sp:var(--sp-ice-hockey); } /* 글자는 그림 위에 선다. 그림자를 줘야 밝은 붓자국에서도 읽힌다 */ .sb-banner[data-sport] .sb-banner__league, .sb-banner[data-sport] .sb-banner__title{ position:relative; z-index:2; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5); } /* ⚠⚠ 글자는 <누름을 받지 않는다>. 받으면 카드 가운데를 눌렀을 때 덮개 링크 대신 이 글자가 잡혀 <아무 데도 안 간다> — 실제로 그랬다. 덮개보다 위에 두는 것은 <보이기> 위해서지 <누르기> 위해서가 아니다. */ .sb-banner__league, .sb-banner__title{ pointer-events:none; } .sb-banner[data-sport] .sb-banner__league{ color:var(--text-2); } /* ---- 오른쪽 리그 엠블럼 -------------------------------------------------- */ /* ⚠ 글자 아래에 둔다(z-index 없음). 위로 올리면 긴 팀 이름을 덮는다 */ /* ★ 84 → 112 (레드 2026-09-15 「오른쪽에 리그이미지 좀 크게」). ⚠ 키운 만큼 <글자 자리를 비운다>. 안 비우면 긴 리그 이름이 엠블럼 아래로 파고들어 둘 다 안 읽힌다 — 아래 padding-right 가 그 몫이다. */ .sb-banner__emblem{ position:absolute; right:16px; top:50%; translate:0 -50%; width:112px; height:112px; object-fit:contain; opacity:.9; filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)); pointer-events:none; } @media (max-width:640px){ .sb-banner__emblem{ width:64px; height:64px; right:12px; } } /* ---- 카드 전체가 리그 목록으로 간다 (레드 2026-09-14) ------------------- ★ 카드를 덮는 <투명한 링크>다. article 을 Link 로 바꾸지 않는 까닭은 안에 「지금 베팅」이 또 링크라서다 — 링크 안에 링크는 잘못된 마크업이고 브라우저가 제멋대로 푼다. ⚠ 「지금 베팅」이 이 덮개보다 <위에> 있어야 한다. 안 그러면 경기로 가려고 누른 단추가 리그 목록으로 간다 — 아래 z-index 참고. ⚠ 글자·엠블럼은 덮개보다 아래다. 위로 올리면 그 자리만 안 눌린다. */ .sb-banner__all{ position:absolute; inset:0; z-index:1; border-radius:inherit; } .sb-banner__all:focus-visible{ outline:2px solid var(--primary); outline-offset:-3px; } /* ⚠ 카드에 손을 얹으면 <누를 수 있다>는 것이 보여야 한다 */ .sb-banner:has(.sb-banner__all:hover){ border-color:color-mix(in srgb, var(--sp, var(--c)) 60%, var(--line)); } /* 단추는 덮개 위로. 이 한 줄이 없으면 「지금 베팅」이 리그 목록으로 간다 */ .sb-banner .btn{ position:relative; z-index:2; } /* ---- 다른 경기 줄 — 좌우 화살표 (레드 2026-09-14) ------------------------- ★ 스크롤은 원래 됐다(휠·터치). 스크롤바를 숨겨 놓아 <미는 길이 안 보였을> 뿐이다. 다른 레일(.sec__navs)과 같은 모양의 단추를 줄 바깥에 둔다. ⚠ 단추는 줄 <바깥>이다. 안에 두면 그것도 같이 밀려 사라진다. */ /* ---- 리그 거르개 칩 (레드 2026-09-15) ----------------------------------- ★ 인기 리그 배너에서 「지금 베팅」을 누르면 목록이 걸러진다. 걸러진 것을 말해 주지 않으면 회원은 <왜 경기가 몇 개뿐인지> 모른다 — 처음에는 아예 「반응이 없다」로 읽혔다(바뀐 자리가 화면 밖이었다). ⚠ 지우는 길을 함께 둔다. 걸어 놓고 풀 수 없으면 뒤로가기로 빠져나온다. -------------------------------------------------------------------------- */ .sb-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .sb-filter__label{ font-size:var(--fs-sm); color:var(--text-4); } .sb-filter__chip{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:var(--r-full); background:color-mix(in srgb, var(--primary) 18%, transparent); border:1px solid color-mix(in srgb, var(--primary) 55%, transparent); color:var(--text); font-size:var(--fs-sm); font-weight:800; cursor:pointer; transition:background var(--t-bg), border-color var(--t-color); } .sb-filter__chip:hover{ background:color-mix(in srgb, var(--primary) 30%, transparent); border-color:var(--primary); } .sb-filter__chip i{ font-size:12px; color:var(--text-3); } .sb-filter__chip:hover i{ color:var(--text); } /* ---- 진행 예정 카드 — 눌리지 않는다 (레드 2026-09-15) -------------------- ★ 생김새는 진행 중과 <같다>. 다른 것은 손이 닿는지 하나뿐이다. ⚠ 링크가 아니므로 커서·호버가 애초에 안 생긴다. 이 규칙은 <혹시 생길 경우>를 막는 안전줄이다. */ .sb-hl__teams.is-static{ cursor:default; } .sb-hl__teams.is-static:hover{ background:none; } /* ---- 열린 배당판 아래 「경기 정보」 길 (레드 2026-09-15) ------------------ 카드 몸통이 열고닫기가 되면서 상세로 가는 길이 사라졌다. 경기 정보·트래커는 상세에만 있어, 배당을 다 보고 「더 볼 것」을 찾는 자리에 남긴다. */ .sb-oddsbox__go{ margin-top:10px; height:40px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; border-radius:var(--r); background:var(--surface-2); font-size:var(--fs-sm); font-weight:800; color:var(--text-3); transition:background var(--t-bg), color var(--t-color); } .sb-oddsbox__go:hover{ background:var(--surface-3); color:var(--text); } /* ---- 라이브 트래커 접기 (레드 2026-09-15) -------------------------------- ★ 제목 줄이 <여닫는 단추>가 된다. 스코어는 접혀도 남는다 — 지금 몇 대 몇인지는 배당을 고르는 동안에도 계속 필요하다. ⚠ 폰에서는 처음에 접혀 있다. 트래커가 한 판을 먹어 배당이 화면 밖으로 밀렸다. */ .mt-track__toggle{ width:100%; display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; text-align:left; } /* 「펼치기 / 접기」 글자 — 화살표와 함께 오른쪽 끝에 선다. ⚠ 이 글자가 생기면서 margin-left:auto 는 <글자>가 가져간다. 화살표에 남겨 두면 글자만 왼쪽으로 밀린다. */ .mt-track__more{ margin-left:auto; color:var(--up, #2FE3AC); font-size:var(--fs-sm); font-weight:800; } .mt-track__toggle > svg:last-child{ color:var(--text-4); transition:transform var(--t-bg); } .mt-track.is-open .mt-track__toggle > svg:last-child{ transform:rotate(180deg); } /* ========================================================================== 카드를 낮추고 칸 사이를 좁힌다 (레드 2026-09-15) ★★ <빈 자리만> 걷는다. 글자 크기·동그라미·배당칸은 그대로다 — 그것들을 줄이면 읽기가 나빠지는데, 여백은 줄여도 읽는 데 지장이 없다. ⚠ --gap-card 토큰 자체는 <안 건드린다>. 그 값은 카지노·프로모션까지 온 화면이 쓰고 있어서, 여기가 좁아지길 바란 대가로 남의 화면이 조용히 좁아진다. 스포츠의 두 줄에만 준다. ========================================================================== */ /* ---- 줄 카드 (경기 리스트) ---------------------------------------------- */ .sb-row{ padding:10px 14px; } /* 마켓 줄 사이 — 세 줄이라 한 줄만 줄여도 카드가 눈에 띄게 낮아진다 */ .sb-mkts{ gap:4px 10px; } /* ---- 주요 경기 카드 ------------------------------------------------------ */ .sb-hl{ padding:10px 14px; } /* ⚠ 위아래 마진이 <따로> 붙어 있다. 14 + 17.5 + 6 = 37.5px 이 빈 자리였다. 세 곳을 함께 줄여야 뜻이 있다 — 한 곳만 줄이면 옆이 그만큼 벌어져 보인다. */ .sb-hl__teams{ margin:8px 0; } .sb-hl__mkt{ margin-top:8px; } .sb-mkt__picks{ margin-top:4px; } /* ---- 칸과 칸 사이 (레드가 빨간 동그라미로 짚은 자리) --------------------- */ .sb-banners{ gap:10px; } .sb-hls{ gap:10px; } /* 폰에서는 더 좁힌다 — 카드 하나가 화면의 절반을 먹으면 한 경기 보고 또 민다 */ @media (max-width:640px){ .sb-row{ padding:8px 12px; } .sb-hl{ padding:8px 12px; } .sb-hl__teams{ margin:6px 0; } .sb-hl__mkt{ margin-top:6px; } .sb-banners, .sb-hls{ gap:8px; } } /* ========================================================================== 배당칸을 낮추고, 배너 테두리를 걷는다 (레드 2026-09-15) ========================================================================== */ /* ★★ 배당칸이 카드 높이를 <혼자 정하고> 있었다. 한 칸 42px × 세 줄 + 줄 사이 = 카드 높이의 대부분이다. 바깥 여백을 아무리 걷어도 카드가 안 낮아지던 까닭이 이것이다 — 실측 카드 172px 중 배당칸 몫이 134px 였다. ⚠ 글자 크기는 <그대로> 둔다. 배당은 이 화면에서 제일 많이 읽히는 숫자다. 줄이는 것은 숫자 위아래의 <빈 자리>뿐이다. 36px 이면 손가락으로 누르는 최소 크기(약 34px)도 지킨다. */ .sb-pick{ height:36px; } /* ★ 배너 테두리를 걷었다 (레드 「여기카드 테두리 없애줘」). 그림이 판을 꽉 채우는데 테두리를 두르면 <액자>가 되어, 그림이 한 겹 뒤로 물러나 보인다. 모서리 둥글기가 이미 칸의 경계를 말한다. */ .sb-banner{ border:0; } /* ========================================================================== 주요 경기 카드 — 배당을 바닥에 붙이고 남은 여백을 걷는다 (레드 2026-09-15) ========================================================================== */ /* ★★ 배당 묶음을 <바닥에 붙인다>. 카드 셋의 높이는 이미 같았다(실측 211). 그런데 팀 이름이 한 줄인 카드만 배당칸 아래가 29px 비고, 두 줄인 카드는 11px 였다 — 배당칸이 <내용을 따라 떠> 있어서 칸마다 다른 자리에 앉았다. 나란히 놓으니 그 어긋남이 먼저 보인다. ★ margin-top:auto 가 남는 자리를 <위로> 몰아 준다. 팀 이름이 한 줄이든 두 줄이든 배당은 늘 같은 자리, 카드 바닥에 선다. ⚠ 카드가 display:flex; flex-direction:column 이라서 되는 일이다. grid 였다면 이 한 줄로는 안 된다. */ .sb-hl__mkt{ margin-top:auto; } /* 배당칸을 한 번 더 낮춘다 (레드 「배당부분도 여백 줄이면 카드 크기 더 줄어든다」). ⚠ 32 가 바닥이다. 더 줄이면 손가락으로 누르는 최소 크기(약 34px)를 밑돈다 — 여기는 회원이 실제로 누르는 자리다. */ .sb-hl .sb-pick{ height:32px; } /* 팀 줄 사이·카드 아래 여백 — 남은 빈 자리를 마저 걷는다 */ .sb-hl__teams{ gap:6px; } .sb-hl{ padding-bottom:8px; } @media (max-width:640px){ .sb-hl{ padding-bottom:7px; } .sb-hl__teams{ gap:5px; } } /* ★★ 배당칸을 한 번 더 낮춘다 (레드 2026-09-15 「배당 부분 위아래 여백 최대한」). 경기 줄 카드도 같은 32 로 맞춘다. 앞서 주요 경기 카드에만 줬던 값이라 두 화면의 배당칸 키가 달랐다 — 같은 것이 같아 보여야 한다. ⚠ 32 가 <바닥>이다. 여기는 회원이 실제로 누르는 자리라, 더 줄이면 손가락으로 누르는 최소 크기(약 34px)를 밑돌아 옆 칸을 잘못 누른다. 숫자 글자 크기는 그대로 둔다 — 이 화면에서 제일 많이 읽히는 숫자다. */ .sb-pick{ height:32px; } /* 줄 사이도 한 칸 더 — 세 줄이라 3px 만 줄여도 카드가 6px 낮아진다 */ .sb-mkts{ gap:3px 10px; } .sb-row{ padding:8px 14px; } @media (max-width:640px){ .sb-row{ padding:7px 12px; } } /* ========================================================================== 경기 상세 — 마켓 리스트를 촘촘하게 (레드 2026-09-15) 「여백이 많아서 페이지가 길어지고 있어」 · 「폰트도 조금 줄이자 — -2px」 · 「PC부터」 ★★ 한 상자가 118px 인데 그런 상자가 <열넷>이다. 한 칸에서 30px 을 걷으면 페이지가 420px 짧아진다 — 여기서는 여백 한 뼘이 열네 배로 돌아온다. ⚠ PC 만 바꾼다(min-width:641px). 폰은 이미 640 블록이 따로 잡고 있어 여기를 건드리면 그쪽 균형이 함께 흔들린다. 폰은 레드가 볼 때 잡는다. ========================================================================== */ @media (min-width:641px){ /* 상자 사이 — 열넷이라 2px 만 줄여도 28px 이다 */ .mt-mkts{ gap:6px; } /* 머리 — 이름 한 줄이 52px 을 쓰고 있었다 */ .mt-mkt__head{ padding:9px 14px; } .mt-mkt__name{ font-size:14px; } /* 본문 — 아래 여백이 배당칸만큼 컸다(16px) */ .mt-mkt__body{ padding:0 14px 9px; gap:5px; } /* 배당칸 48 → 38. ⚠ 38 에서 멈춘다. 여기는 회원이 실제로 누르는 자리라, 더 줄이면 손가락으로 누르는 최소 크기(약 34px)에 붙어 옆 칸을 잘못 누른다. ★ 글자는 레드가 말한 대로 <둘 다 -2px> — 이름 14→12, 배당 16→14. 배당 숫자를 이름보다 크게 두는 <차이>는 그대로 지킨다. 그 차이가 「무엇을 읽어야 하는지」를 말한다. */ /* ⚠⚠ 원본이 이다. height 만 주면 min-height 가 이겨 48 그대로 남는다 — 실측으로 잡았다(48 → 48, 안 먹음). 최소키를 함께 낮춰야 값이 산다. */ .mt-pick{ min-height:38px; height:38px; padding:0 12px; } .mt-pick > span{ font-size:12px; } .mt-pick > b{ font-size:14px; } /* ⚠⚠ 목록의 접이식 배당판(.sb-oddsbox)은 <자기 규칙>을 들고 있다. 더 구체적인 선택자라 위의 .mt-mkts · .mt-mkt__head 를 이긴다 — 상세와 목록에서 같은 부품이 다른 키로 보이던 까닭이다. 같은 것이 같아 보여야 하므로 여기도 같은 값으로 맞춘다. */ .sb-oddsbox .mt-mkts{ gap:6px; } .sb-oddsbox .mt-mkt__head{ padding:8px 12px; } } /* ★★ 스포츠 배너의 어둠막도 <걷었다> (레드 2026-09-15 「그라데이션 제거하고 이미지 원색상」). 예측마켓 배너에서 걷은 것과 <같은 까닭>이다. 그림 셋이 이미 어두운 파란 배경이라 막이 없어도 흰 글자가 선다. 막을 걷으니 그림의 빛줄기가 왼쪽 끝까지 살아난다. ⚠ 배경 선언을 <통째로> 다시 쓴다. 여러 겹 중 한 겹만 빼는 문법이 없어서, 앞 규칙을 덮어쓰는 편이 정확하다. ⚠ 글자 그림자는 이미 .sb-banner[data-sport] .sb-banner__title 에 있다 (0 1px 3px / 0 0 10px). 막이 하던 일을 그것이 대신한다. */ .sb-banner[data-sport]{ background: var(--bgimg) center / cover no-repeat, var(--surface-1); } /* ========================================================================== 모바일 경기 리스트 — 루벳 결로 (레드 2026-09-15 「우리도 이렇게 가즈아」) ★★ 바뀐 것은 셋이다. ① 리그 하나가 <한 덩이 카드>다. 전에는 경기마다 카드가 따로 떠 있어 카드 사이 그림자와 여백이 경기 수만큼 쌓였다 — 리그 셋이면 화면이 카드 열두 장이다. 한 덩이로 묶고 <가는 선>으로만 가른다. ② 팀과 배당이 <가로로 나란히> 선다. 전에는 팀 아래에 배당이 쌓여 한 경기가 두 층을 먹었다. 나란히 두면 한 층이면 되고, 눈이 「이 팀 → 이 배당」을 한 줄에서 잇는다. ③ 배당칸이 <라벨 위 · 숫자 아래> 두 단이다. 가로로 「HOME 2.28」을 늘어놓으면 좁은 폭에서 숫자가 끝으로 밀려 라벨과 멀어진다. ⚠ 640 이하에서만이다. PC 는 가로가 넓어 한 줄에 세 마켓이 들어가고, 그 편이 더 많이 보인다. ========================================================================== */ @media (max-width:640px){ /* ① 리그 = 한 덩이 카드 -------------------------------------------- */ .sb-league__list{ background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r); /* ⚠ overflow:hidden 이라야 첫·끝 줄이 모서리를 넘지 않는다 */ overflow:hidden; } .sb-row{ background:none; border:0; border-radius:0; box-shadow:none; } /* 줄 사이 가는 선 — 첫 줄 위에는 안 긋는다 */ .sb-row + .sb-row{ border-top:1px solid var(--line); } /* ② 팀 왼쪽 · 배당 오른쪽 --------------------------------------- */ .sb-row{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:"go mkts"; gap:10px; align-items:center; padding:10px 12px; } /* ③ 배당칸 — 라벨 위, 숫자 아래 ---------------------------------- */ .sb-mkt{ grid-template-columns:minmax(0,1fr); gap:4px; } .sb-mkt__name{ text-align:center; font-size:var(--fs-xs); color:var(--text-5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sb-pick{ flex-direction:column; justify-content:center; gap:1px; height:auto; min-height:44px; padding:5px 4px; } .sb-pick span{ font-size:var(--fs-xs); } .sb-pick b{ font-size:var(--fs-sm); } /* ⚠ 마켓은 <첫 줄 하나만> 보인다. 루벳도 1x2 하나만 띄운다 — 좁은 폭에 세 줄을 다 밀어 넣으면 한 경기가 다시 세 층이 된다. 나머지는 카드를 눌러 펼친다(+N 이 그 수를 말한다). */ .sb-mkts > .sb-mkt:not(:first-child){ display:none; } /* ⚠⚠ 펼쳐도 <위는 한 줄 그대로> 둔다. 처음엔 열면 세 줄을 다 보이게 했는데, 두 가지가 한꺼번에 무너졌다 — ① 배당이 세 층으로 늘어나자 팀 이름이 그 옆 <가운데에 끼여> 떠 버렸고 (align-items:center 라 세 줄의 한가운데에 앉는다), ② 바로 아래 펼쳐지는 배당판에 <같은 마켓이 또> 나와 화면에 두 벌이 됐다. 펼침이 하는 일은 <아래 배당판을 여는 것>이다. 위 줄은 늘 「이 경기가 무엇인가」만 말하면 된다. 그래서 여기에는 규칙을 <더하지 않는다>. */ /* +N — 시각 줄 오른쪽 끝. 카드 배경이 사라졌으니 자리를 다시 잡는다 */ .sb-more{ top:8px; right:10px; } /* 시각 줄 — +N 과 겹치지 않게 오른쪽을 비운다 */ .sb-row__when{ padding-right:34px; } } /* ★★ 폰에서 펼친 배당판도 촘촘하게 (레드 2026-09-15 「모바일 배당쪽도 위아래 간격 최대한 줄이자」). PC 는 앞서 잡았는데(min-width:641px) 폰은 640 블록이 따로 있어 그대로 남아 있었다 — 같은 화면인데 폰만 헐거웠다. ⚠ 폰의 .mt-pick 은 다. 여기도 PC 와 같은 함정이라 최소키를 함께 낮춰야 값이 산다. ⚠ 36 에서 멈춘다. 폰은 손가락으로 누르는 자리라 PC(32)보다 여유를 둔다. */ @media (max-width:640px){ .mt-mkts{ gap:6px; } .mt-mkt__head{ padding:8px 10px; } .mt-mkt__name{ font-size:var(--fs-sm); } .mt-mkt__body{ padding:0 10px 8px; gap:4px; } .mt-pick{ min-height:36px; height:36px; padding:0 10px; gap:4px; } } /* ========================================================================== 팀 이름이 길면 <사라지게> 한다 (레드 2026-09-15 「루벳처럼 음영처리」) ========================================================================== */ @media (max-width:640px){ /* ★★ 말줄임(…) 대신 <오른쪽으로 옅어지는> 마스크다. 「홋카이도 닛폰햄 파이터스」가 「홋카이도 닛폰햄 파…」로 끊기면 점 세 개가 자리를 먹고, 그 점이 <글자처럼> 읽혀 이름의 일부로 보인다. 옅어지며 사라지면 「뒤가 더 있다」가 모양으로 전해지고 자리도 안 먹는다. ⚠⚠ 이름 칸을 <남는 폭 전체>로 편다(flex:1 1 0). 전에는 flex:0 1 auto 라 칸 폭이 <글자 폭과 같았고>, 그 상태로 마스크를 걸면 <짧은 이름도> 끝이 흐려진다 — 마스크는 글자가 아니라 칸을 기준으로 걸리기 때문이다. 칸을 펴 두면 짧은 이름은 흐려지는 자리에 닿지도 않는다. ⚠ -webkit- 을 같이 적는다. 빠지면 모양이 사라지는 게 아니라 <칸이 통째로 안 보인다> — 오류가 안 나서 「이름이 왜 없지」만 남는다. */ .sb-team__name{ flex:1 1 0; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:clip; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent); } /* ★ H·A 는 이름을 편 만큼 <줄 끝>에 선다. 두 줄의 배지가 세로로 맞아 「위가 홈」이 한눈에 읽힌다 — 이름 길이에 따라 들쭉날쭉하지 않는다 */ .sb-team__ha{ margin-left:2px; } /* ★ 홈·원정 두 줄을 조금 띄운다 (레드 「사이간격 조금더 주고」) — 3 → 6 */ .sb-row__teams{ gap:6px; } /* ★ 리그와 리그 사이를 좁힌다 (레드 「리스트 하단에 여백은 줄이자」) — 16 → 10. ⚠ 리그 머리의 아래 여백(12)도 함께 걷는다. 둘을 따로 두면 한쪽을 줄여도 다른 쪽이 그만큼 벌어져 보여 줄어든 티가 안 난다. */ .sb-league{ margin-bottom:10px; } .sb-league__head{ padding:0 4px 7px; } } @media (max-width:640px){ /* ⚠⚠ 이름을 <왼쪽에> 못 박는다. 칸을 flex:1 1 0 으로 펴자 물려받은 text-align:center 가 드러나 「Aviator Smolensk」가 칸 <가운데로> 밀렸다. 칸 폭이 글자 폭과 같던 때는 가운데나 왼쪽이나 같은 자리라 숨어 있던 것이다 — 시각 줄에서 겪은 것과 <똑같은> 함정이다(.sb-row__when). ★ 칸을 펴는 손질에는 정렬을 함께 적는다. 폭을 주면 정렬이 드러난다. */ .sb-team__name{ text-align:left; } /* ★★ 폰에서는 H·A 배지를 <뺀다> (레드 2026-09-15 「모바일 경기리스트에는 H A표기 없애자」). 이름 칸을 폭 전체로 편 뒤로 배지가 긴 이름 <위에 겹쳐> 앉았다. 겹치지 않게 자리를 만들면 이번엔 이름이 그만큼 더 일찍 잘린다. ★ 게다가 폰에서는 배지가 없어도 안다 — 위가 홈, 아래가 원정이고, 옆의 배당칸이 1 · X · 2 로 같은 순서를 말한다. 좁은 칸에서는 <같은 말을 두 번 하는 것>이 더 비싸다. ⚠ PC 는 그대로 둔다. 가로가 넓어 배지가 이름을 밀어내지 않는다. */ .sb-team__ha{ display:none; } } @media (max-width:640px){ /* ★★ 경기와 경기를 <붙인다> (레드 2026-09-15 「경기사이 이간격도 없애자」). 리그를 한 덩이 카드로 묶었는데 줄 사이에 8px 틈이 남아 있었다. 카드 바탕이 그 틈으로 비쳐 <줄마다 끊긴 것>처럼 보였다 — 묶어 놓고 다시 가른 셈이다. ★ 가르는 일은 이미 <가는 선>(.sb-row + .sb-row 의 border-top)이 한다. 선 하나면 충분하고, 틈까지 있으면 두 번 가르는 것이다. */ .sb-league__list{ gap:0; } } @media (max-width:640px){ /* ★ 옅어지기 시작하는 자리를 <앞당긴다> (레드 2026-09-15 「팀이름 조금만 더 앞에서 음영처리하자」) — 22 → 46px. 22 로는 글자가 거의 <배당칸에 닿아서> 끊겼다. 잘리는 티가 나기 전에 먼저 옅어져야 「뒤가 더 있다」로 읽히지, 끝에서 급히 사라지면 그냥 가려진 것으로 보인다. ⚠ 시작점을 당겨도 <짧은 이름은 그대로>다. 마스크는 칸 오른쪽 끝을 기준으로 걸리고, 짧은 이름은 그 자리에 닿지도 않는다. */ .sb-team__name{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 46px), transparent calc(100% - 6px)); mask-image:linear-gradient(to right, #000 calc(100% - 46px), transparent calc(100% - 6px)); } } /* ★★ 주요 경기 카드의 1 · X · 2 를 <또렷하게> (레드 2026-09-15 「카드에 1 2 가 사라졌다!」). 사라진 게 아니라 <묻힌> 것이다. 이 카드는 바탕이 경기장 사진이라 밝고, 라벨 색이 회색(--text-5)이다. 「HOME」·「AWAY」 네 글자일 때는 덩어리가 커서 그 대비로도 읽혔는데, 한 글자가 되자 회색 점이 되어 그림에 녹았다. ★ 글자를 <줄이면 무게를 올려야> 한다. 크기가 준 만큼 색과 굵기로 메운다. ⚠ 그림자도 준다 — 사진은 자리마다 밝기가 달라서, 색만으로는 밝은 자리에서 다시 묻힌다. 카드 제목이 이미 같은 방식으로 버티고 있다. */ .sb-hl .sb-pick > span{ color:rgba(255,255,255,.92); font-weight:800; font-size:var(--fs-sm); text-shadow:0 1px 3px rgba(0,0,0,.75); } .sb-hl .sb-pick > b{ text-shadow:0 1px 3px rgba(0,0,0,.75); } /* 대회 이름·복식 (2026-09-17) — 리그를 투어로 묶는 종목에서만 나온다. ⚠ 시각 줄 옆에 붙는다. 리그 이름 자리가 아니다 — 대회는 경기마다 다르다. */ .sb-row__tour, .sb-hl__tour{ margin-left:6px; font-size:var(--fs-xs, 12px); color:var(--text-5); font-weight:700; } .sb-row__tag{ margin-left:6px; padding:1px 6px; border-radius:999px; font-size:var(--fs-xs, 12px); font-weight:800; background:color-mix(in oklab, var(--accent) 18%, transparent); color:var(--accent); } /* ── 2026-09-17 추가 다섯 종목 ───────────────────────────────────────────── 레드: 「각 종목 여기 검색에 사용한 종목 아이콘으로 해주고, 색상도 종목별로 다르게」 ★ 앞의 다섯은 무늬를 <인라인 SVG>로 들고 있다. 새 다섯은 검색이 쓰는 PNG 를 그대로 마스크로 쓴다 — 같은 그림이 두 벌이 되지 않게 하려는 것이다. 마스크라 <모양만> 따고 색은 --sp 가 칠한다. PNG 가 무슨 색이든 상관없다. ⚠ 파일 이름에 날짜가 붙어 있다(…-20260915.png). 그림을 갈아 끼우면 이름이 바뀌므로 <여기 주소도 함께> 고쳐야 한다. 안 고치면 조용히 404 가 되고, 마스크가 비어 무늬가 통째로 사라진다 — 배경만 남아 눈에 잘 안 띈다. ⚠ 슬러그는 sports_categories.name_en 에서 나온다(e-games · mma-boxing). 그 이름을 바꾸면 여기도 따라 바꿔야 한다. ───────────────────────────────────────────────────────────────────────── */ .sb-row[data-sport="tennis"] { --sp:var(--sp-tennis); } .sb-row[data-sport="handball"] { --sp:var(--sp-handball); } .sb-row[data-sport="american-football"] { --sp:var(--sp-american-football); } .sb-row[data-sport="e-games"] { --sp:var(--sp-e-games); } .sb-row[data-sport="mma-boxing"] { --sp:var(--sp-mma-boxing); } .sb-row[data-sport="tennis"] { --sp-glyph:url("/assets/design/img/sports-icon/tennis-20260915.png"); } .sb-row[data-sport="handball"] { --sp-glyph:url("/assets/design/img/sports-icon/handball-20260915.png"); } .sb-row[data-sport="american-football"] { --sp-glyph:url("/assets/design/img/sports-icon/american-football-20260915.png"); } .sb-row[data-sport="e-games"] { --sp-glyph:url("/assets/design/img/sports-icon/e-games-20260915.png"); } .sb-row[data-sport="mma-boxing"] { --sp-glyph:url("/assets/design/img/sports-icon/mma-boxing-20260915.png"); } /* ───────────────────────────────────────────────────────────────────────── ★★ 기존 다섯 종목도 <같은 검색용 아이콘>으로 (레드 2026-09-18 「기존꺼는 아이콘으로 변경안되었네!」) 새 5종목(테니스·핸드볼·미식축구·E게임·격투기)만 PNG 로 바꾸고 기존 다섯은 <손으로 그린 SVG> 그대로였다. 그래서 한 목록 안에서 축구는 선으로 그린 공, 테니스는 검색 아이콘 — <두 가지 결>이 섞여 보였다. ★ 위쪽 원본 줄(308·324·328·330·332행)은 <건드리지 않는다>. 전달본 CSS 는 한 글자도 고치지 않는 것이 규칙이고, CSS 는 <나중에 온 쪽이 이긴다> — 여기서 덮으면 다음 전달본과 대조할 때 원본이 그대로 남아 있다. ⚠ 파일 이름의 날짜(20260915)를 바꾸면 여기도 바꿔야 한다. 정적 그림은 캐시되므로 <그림을 갈면 이름도 간다>는 규칙이 있다. ───────────────────────────────────────────────────────────────────────── */ .sb-row[data-sport="soccer"] { --sp-glyph:url("/assets/design/img/sports-icon/soccer-20260915.png"); } .sb-row[data-sport="basketball"] { --sp-glyph:url("/assets/design/img/sports-icon/basketball-20260915.png"); } .sb-row[data-sport="baseball"] { --sp-glyph:url("/assets/design/img/sports-icon/baseball-20260915.png"); } .sb-row[data-sport="volleyball"] { --sp-glyph:url("/assets/design/img/sports-icon/volleyball-20260915.png"); } .sb-row[data-sport="ice-hockey"] { --sp-glyph:url("/assets/design/img/sports-icon/ice-hockey-20260915.png"); } /* ═══════════════════════════════════════════════════════════════════════ 정렬 토글 — 시간순 / 인기순 (레드 2026-09-18 「배팅순으로가자」) ⚠ 기본 .sb-filter__chip 을 그대로 쓰면 안 된다. 그것은 <걸린 거르개>를 보이는 모양이라 채워져 있어서, 토글에 쓰면 <안 고른 쪽도 고른 것처럼> 보인다. 둘 중 어느 쪽으로 보고 있는지 알 수 없으면 「정렬이 먹었나」를 회원이 못 판단한다. ★ 그래서 안 고른 것은 <비우고>, 고른 것만 채운다. ═══════════════════════════════════════════════════════════════════════ */ .sb-filter__chip--toggle{ background:transparent; border-color:color-mix(in srgb, var(--text-3) 40%, transparent); color:var(--text-3); font-weight:700; } .sb-filter__chip--toggle:hover{ background:color-mix(in srgb, var(--primary) 12%, transparent); border-color:color-mix(in srgb, var(--primary) 45%, transparent); color:var(--text); } .sb-filter__chip--toggle.is-on{ background:color-mix(in srgb, var(--primary) 18%, transparent); border-color:color-mix(in srgb, var(--primary) 55%, transparent); color:var(--text); font-weight:800; }