/* 예측시장 회원 화면 */ .pd-wrap { max-width: 960px; margin: 0 auto; padding: 16px; } /* 목록은 표 + 슬립이라 960px 안에서는 팀 이름 칸이 77px 밖에 남지 않아 잘린다. 목록만 레이아웃이 주는 폭을 그대로 쓴다(portal_ever w1280 → 1248px). 1400px 는 폭 제한이 없는 레이아웃에서 표가 끝없이 늘어나지 않게 하는 상한이고, 레이아웃이 그보다 좁으면 그 폭을 따라간다. 랭킹·My Picks 는 예전 폭 그대로다. */ /* ── 1280px 안에서 표에 폭을 몰아준다 (rev64) ───────────────── 레이아웃(portal_ever)은 `display_conten_Wsize = w1280` 이라 본문 컨테이너가 1280px 다. **그 폭은 그대로 둔다** — 레이아웃을 모듈에서 덮어쓰면 예측 화면만 사이트와 다른 폭이 된다. 1280px 안에서 쓸 수 있는 폭은 정해져 있다. 1280 − 슬립 313 − 격자 간격 7 = 960px ← 표가 가질 수 있는 최대 예전에는 `.pd-wrap` 의 좌우 안쪽 여백 16px 씩이 그 960 을 928 로 깎고 있었다. 표는 일곱 칸이라 32px 이 그대로 팀 이름 칸에서 빠진다. 위아래 여백은 남긴다 — 머리글·다음 구획과 붙지 않아야 한다. 위쪽 여백도 없앤다 — 레이아웃이 이미 본문 위에 자기 간격을 두고 있어서, 여기서 16px 을 더하면 탭 줄만 아래로 밀린다. 아래쪽 16px 은 남긴다. 다음 구획과 표가 붙으면 목록이 어디서 끝나는지 흐려진다. 좁은 화면(≤640px)에서는 좌우 여백을 다시 준다. 거기서는 표가 화면 가장자리에 닿으면 읽기 어렵다. */ .pd-wrap.pd-layout { max-width: 1400px; padding: 0 0 16px; } /* ── 랭킹도 레이아웃 폭을 그대로 쓴다 (rev92) ───────────────── `.pd-wrap` 의 960px 은 슬립(313px)이 옆에 서는 목록 화면에서 나온 숫자다. 랭킹에는 슬립이 없는데도 같은 상한을 쓰고 있어서, 상단 메뉴 띠는 레이아웃 폭(1280px)을 다 쓰고 본문만 960px 로 가운데 몰려 좌우에 빈 띠가 생겼다. `.pd-layout` 과 같은 방식으로 푼다 — 상한만 두고 실제 폭은 레이아웃이 정한다. 1400px 는 폭 제한이 없는 레이아웃에서 표가 끝없이 늘어나지 않게 하는 상한이고, 레이아웃이 그보다 좁으면 그 폭을 따라간다. 좌우 안쪽 여백도 지운다. 남겨 두면 표가 메뉴 띠보다 16px 씩 안으로 들어가 여전히 어긋나 보인다. 위쪽 여백을 지우는 것은 레이아웃이 이미 본문 위에 간격을 두기 때문이고, 아래쪽 16px 은 다음 구획과 붙지 않도록 남긴다. 표는 칸 폭이 전부 백분율이라(.pd-col-tipster 26% 등) 폭이 늘어난 만큼 고르게 벌어진다. 칸 구성은 건드리지 않는다. */ .pd-wrap.pd-rank { max-width: 1400px; padding: 0 0 16px; } /* ── 베팅 슬립이 따라 내려오게 한다 (rev64) ─────────────────── `.pd-slip` 은 `position: sticky` 인데 실제 화면에서는 목록과 함께 흘러 올라갔다. 원인은 슬립 자신이 아니라 **조상**이다. .gpe_allcon_wrap0 · .contents_area_wrap0 · .gpe_contents_box · .gpe_contents · .gpe_contents_xecon ← 전부 overflow:hidden sticky 는 가장 가까운 **스크롤 조상**을 기준으로 붙는다. `overflow:hidden` 인 조상이 하나라도 있으면 그것이 기준이 되는데, 그 상자는 자기 내용만큼 높아서 스크롤되지 않는다. 그래서 붙을 자리가 없고 슬립은 그냥 페이지와 함께 지나간다. **폭은 건드리지 않는다.** `width` 도 `max-width` 도 그대로 두고 `overflow` 만 되돌린다 — 레이아웃 1280px 은 유지된다. 이 파일은 예측 화면에서만 실리므로 다른 페이지에 닿지 않는다. 원래 이 `overflow:hidden` 은 좌우 사이드박스(float) 를 감싸기 위한 것인데, 이 사이트는 사이드박스가 `display:none` 이라 감쌀 float 이 없다. 높이가 달라지지 않는 것을 실측으로 확인했다. */ .gpe_allcon_wrap0, .contents_area_wrap0, .gpe_contents_box, .gpe_contents, .gpe_contents_xecon { overflow: visible; } /* `overflow:hidden` 이 하던 일이 하나 더 있었다 — **float 감싸기**. 그것만 없애면 두 상자의 높이가 0 으로 무너진다(실측 4904 → 0). `flow-root` 는 같은 일을 하면서 스크롤 상자를 만들지 않는다. 그래서 높이는 지키고 sticky 는 살아 있다. */ .gpe_allcon_wrap0, .contents_area_wrap0 { display: flow-root; } .pd-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .pd-title { font-size: 22px; font-weight: 700; margin: 0; } .pd-link { color: #2f6fdb; text-decoration: none; font-size: 14px; } .pd-link:hover { text-decoration: underline; } .pd-empty { padding: 48px 0; text-align: center; color: #888; } /* ═════════════════════════════════════════════════════════════ SPORTS — 경기 목록 + 베팅 슬립 (rev110, 목표 시안 `docs/3.png`) ⚠ 선택자는 전부 `.pd-sports-page` 안으로 한정한다. `.pd-empty` · `.pd-wrap` 처럼 다른 화면이 함께 쓰는 이름은 원본을 고치지 않는다. rev65 의 bgame 색(빨강 슬립 #eb2629 · 파란 배당칸 #f0faff · 노란 선택 글씨)을 걷어내고 시안의 체계로 다시 잡는다. 표와 슬립이 **같은 옷**을 입는 것이 요점이다 — 흰 바탕 · 얇은 회색 선 · 작은 라운드 · 녹색 포인트. 바탕 #ffffff 선 #e2e6ea (카드) · #eef1f4 (줄 사이) 머리줄 #f4f6f8 글자 #2b3440 (본문) · #7b8794 (보조) 포인트 #0f7a35 (채움 · 흰 글씨) · #eaf6ee (연한 채움) 라운드 8px (카드) · 6px (단추) 포인트 녹색은 사이트 상단 메뉴의 밝은 녹색(#04ba1e)과 같은 계열이되 한 단계 짙다. 밝은 쪽 위에 흰 글씨를 얹으면 대비가 모자라 글자가 뜬다. 고치는 것은 보기뿐이다 — 종목·날짜 필터, 리그·경기 조회와 순서, 배당 선택, HOME/DRAW/AWAY 의 뜻과 자리, 금액 프리셋, 예상액 계산, 참여 등록, 일일 한도, 마감·중복 검사는 하나도 건드리지 않는다. ═════════════════════════════════════════════════════════════ */ /* ── ① 2단 레이아웃 ────────────────────────────────────────── 왼쪽이 경기 목록, 오른쪽이 슬립. 슬립 폭은 고정, 목록은 남는 폭이다. */ /* 이 화면의 바탕만 아주 연한 회색 (rev140). 흰 카드가 흰 바탕 위에 놓여 있어 경계가 테두리 한 겹뿐이었다. 바탕을 한 단계 내리면 카드가 저절로 떠오른다. ⚠ `body` 나 공통 래퍼가 아니라 **이 화면 전용 표식**(`.pd-sports-page`) 안에서만이다. 랭킹·Picks·프로필은 이 클래스를 붙이지 않는다. 색은 새로 만들지 않는다 — 리그 바가 쓰던 `#f4f6f8` 을 그대로 옮겨 쓴다. 리그 바는 아래에서 진한 회색이 되므로 이 값이 비었다. 여백은 건드리지 않는다. 카드 사이 간격(26px·14px)과 아래 여백(20px) 자리에 바탕이 드러나는 것으로 충분하다. */ .pd-wrap.pd-sports-page { max-width: 1400px; padding: 0 0 20px; background: #f4f6f8; } /* RT-DARK-2 — 기둥이 1440 로 넓어졌다. 슬립을 328→312 로 줄이고 간격도 26→22 로 좁혀 본문 쪽에 3열을 세울 자리를 만든다. 312 는 금액 프리셋 3개(10,000·20,000·30,000)가 한 줄에 들어가는 하한이다 — 더 줄이면 숫자가 두 줄로 접힌다. */ .pd-sports-page.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 22px; align-items: start; } .pd-sports-page .pd-main { min-width: 0; } /* ── ② 제목 ───────────────────────────────────────────────── ⚠ rev117 — 제목 줄(`.pd-sports-head` · `.pd-sports-title`)과 그 아래 구분선을 통째로 지웠다. 화면에 그 요소가 더 없다. 같은 이유로 rev116 에서 지운 안쪽 탭 규칙(`.pd-tabs2` · `.pd-tab2` · `.pd-tab2-ico`)도 여기 없다. 쓰이지 않는 규칙을 남겨 두면 다음 사람이 "어디에 걸리는가" 를 다시 찾아야 한다. 툴바(종목 칩 + 검색)가 화면 맨 위에 선다. */ /* ── ③ 종목 칩 + 검색 한 툴바 ─────────────────────────────── 칩이 왼쪽, 검색이 오른쪽 끝. 폭이 모자라면 검색이 통째로 아랫줄로 내려간다(`flex-wrap`). 주소·파라미터는 그대로다. */ /* 칩이 윗줄, 검색이 아랫줄 (rev133). ──────────────────────────────────────────────────────────────── 두 개를 한 줄에 나란히 세우려던 것이 문제였다. 검색이 폭을 먼저 가져가면 칩이 그만큼 일찍 접혀 두 줄이 되고, 결국 검색 자리를 아무리 깎아도 전체는 두 줄 아래로 내려가지 않았다. 그럴 바에는 **칩에 한 줄을 통째로 준다.** 926px 면 지금 일곱 개가 한 줄에 들어간다. 검색은 아랫줄 오른쪽으로 내려가고, 전체는 그대로 두 줄이다 — 같은 높이에 첫 줄이 꽉 찬다. 칩이 더 늘어 두 줄이 되면 전체가 세 줄이 된다. 그때는 칩이 실제로 두 줄어치라 늘어난 것이고, 검색 때문에 밀린 줄이 아니다. */ .pd-sports-page .pd-sports-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; } /* `flex: 1 1 100%` 가 한 줄을 통째로 차지하게 만든다 — 뒤따르는 검색은 자리가 없어 다음 줄로 내려간다. 칩 자신은 그 줄 안에서만 접힌다. */ .pd-sports-page .pd-chips { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-content: center; gap: 5px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; } /* 첫 줄을 채운다 (rev131). ──────────────────────────────────────────────────────────────── rev130 에서 두 줄로 줄였지만 첫 줄 끝에 20px 이 남아 다음 칩이 올라오지 못했다. 20px 짜리 빈틈 하나 때문에 칩 하나가 통째로 아랫줄에 서 있으면, 첫 줄은 휑하고 둘째 줄은 거의 비어 보인다. 높이(34px)·글자 크기(13px)·색은 건드리지 않는다. 줄이는 것은 **글자 바깥의 여백**뿐이다 — 좌우 10→8, 아이콘 뒤 6→5, 칩 사이 6→5, 숫자 13→12. 칩 하나당 10px 안팎이 줄어 한 줄에 하나가 더 들어간다. 칩이 작아 보이게 만들려는 것이 아니다. */ .pd-sports-page .pd-chip { box-sizing: border-box; display: inline-flex; align-items: center; height: 34px; padding: 0 8px; border: 1px solid #dfe3e8; border-radius: 6px; background: #ffffff; font-size: 13px; font-weight: 600; color: #5a6b80; white-space: nowrap; text-decoration: none; } .pd-sports-page .pd-chip:hover { border-color: #0f7a35; color: #0f7a35; } .pd-sports-page .pd-chip.is-active { border-color: #0f7a35; background: #0f7a35; color: #ffffff; font-weight: 700; } .pd-sports-page .pd-chip-icon { margin-right: 5px; font-size: 14px; line-height: 1; } /* 종목 SVG 아이콘 (PREDICTION-SPORT-ICON-1). 이모지와 같은 자리·같은 여백을 쓰므로 칩 높이는 변하지 않는다. 크기는 글꼴이 아니라 픽셀로 못 박는다 — 그림은 font-size 를 따르지 않는다. */ .pd-sports-page .pd-chip-icon-img { width: 16px; height: 16px; flex: none; display: block; } /* 숫자는 종목 이름보다 한 단계 뒤로 물러선다 — 읽는 것은 종목 이름이고 숫자는 곁들이는 값이다. 겸사겸사 칩 폭도 줄어든다 (rev131). */ .pd-sports-page .pd-chip-count { margin-left: 4px; font-size: 12px; font-weight: 500; opacity: .75; } .pd-sports-page .pd-chip.is-active .pd-chip-count { color: #ffffff; } /* 자리를 먼저 잡는다 — 줄어들지도(`0 0`) 늘어나지도 않는다 (rev130). `margin-left: auto` 는 그대로 둔다. 칩이 한 줄에 다 들어가고도 폭이 남는 날(종목이 적을 때)에는 그것이 검색을 오른쪽 끝으로 민다. */ /* 검색은 윗줄을 통째로 쓴다 (rev134). 입력칸이 남는 폭을 다 먹고 단추는 오른쪽 끝에 붙는다. 고정 폭을 두지 않으므로 화면이 넓어지면 입력칸이 함께 넓어진다 — 팀 이름이 길어도 친 글자가 칸 안에 남는다. */ .pd-sports-page .pd-search { flex: 1 1 100%; display: flex; gap: 6px; width: auto; margin-left: 0; padding: 0; } .pd-sports-page .pd-search-input { box-sizing: border-box; flex: 1 1 auto; width: auto; min-width: 0; height: 34px; padding: 0 11px; border: 1px solid #dfe3e8; border-radius: 6px; font-size: 13px; color: #2b3440; } .pd-sports-page .pd-search-input:focus { border-color: #0f7a35; outline: none; } .pd-sports-page .pd-search-input::placeholder { color: #a3adb8; } .pd-sports-page .pd-search-btn { box-sizing: border-box; flex: 0 0 auto; width: auto; height: 34px; padding: 0 16px; border: 1px solid #0f7a35; border-radius: 6px; background: #0f7a35; color: #ffffff; font-size: 13px; font-weight: 600; cursor: pointer; } .pd-sports-page .pd-search-btn:hover { background: #0c6a2d; border-color: #0c6a2d; } /* ── ④ 리그 카드 ──────────────────────────────────────────── 리그 하나가 카드 하나다. [머리줄][배당 열 제목][경기 줄 …] 테두리 한 겹과 아주 옅은 그림자로 끝낸다. */ .pd-sports-page .pd-league { padding: 0; margin-bottom: 14px; border: 1px solid #e2e6ea; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); overflow: hidden; } .pd-sports-page .pd-league:last-of-type { padding-bottom: 0; border-bottom: 1px solid #e2e6ea; } /* 리그 바는 연한 청회색 + 왼쪽 초록 포인트선 (rev140 → rev141). rev140 에서 진한 회색(`#4a4f57`)으로 두었더니 목록에 진한 띠가 여러 겹 쌓여 화면이 무거웠다. 바탕을 한 단계 올리고 글자를 진하게 되돌린다. 색은 새로 만들지 않는다. 배경 `#eef1f5` ← rev108~139 랭킹 머리글이 쓰던 연한 청회색 글자 `#2b3440` ← 상단 메뉴·회원 영역·팀 이름이 쓰는 본문 색 선 `#0f7a35` ← 고른 배당 · 활성 SUBMIT 과 같은 초록 ⚠ 왼쪽 선 3px 만큼 왼쪽 여백을 14 → 11 로 줄인다. 선과 여백을 더하면 14px 라 **리그명이 서던 자리가 그대로다.** 높이(44px)도 그대로다 — `box-sizing: border-box` 라 테두리가 안쪽으로 들어간다. */ .pd-sports-page .pd-league-head { display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 44px; padding: 0 14px 0 11px; border: 0; border-bottom: 1px solid #e8ecef; border-left: 3px solid #0f7a35; background: #eef1f5; } .pd-sports-page .pd-league-icon { flex: none; font-size: 15px; line-height: 1; } .pd-sports-page .pd-league-icon-img { width: 17px; height: 17px; display: block; } /* 리그 국기 (PREDICTION-FLAG-1). `/score` 의 국기와 **같은 SVG 파일**을 같은 크기로 그린다. 두 화면의 국기가 서로 다른 크기·모양이면 같은 자산을 쓰고도 다른 기능처럼 보인다. 원본 비율 4:3 을 그대로 쓴다 — 원형으로 자르거나 정사각형으로 늘이지 않는다. 흰 바탕이 큰 국기(일본·폴란드)가 밝은 화면에서 사라지지 않도록 아주 얇은 테두리 하나만 둔다. `flex: none` 이라 리그 이름 칸을 밀지 않는다. 이름 쪽은 `min-width: 0` 이라 좁아지면 이름이 먼저 줄고 말줄임이 걸린다. */ .pd-sports-page .pd-league-flag { flex: none; display: block; width: 18px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 1px; box-shadow: 0 0 0 1px rgba(127, 137, 149, .25); } @media (max-width: 640px) { .pd-sports-page .pd-league-flag { width: 16px; } } /* 종목 아이콘 바로 뒤에 국기가 붙을 때만 그 사이를 조금 좁힌다 (PREDICTION-FLAG-2). 머리글은 `gap: 8px` 짜리 flex 다. 세 요소가 8/8 로 벌어지면 아이콘과 국기가 서로 다른 묶음처럼 보인다. 둘은 같은 "이 리그가 무엇인가" 묶음이고 리그 이름이 그 다음이다. 그래서 **인접 형제일 때만** 2px 당긴다 — 각 요소에 margin 을 따로 주면 국기가 없는 줄에서도 간격이 먹는다. */ .pd-sports-page .pd-league-icon + .pd-league-flag { margin-left: -2px; } .pd-sports-page .pd-league-name { min-width: 0; font-size: 13.5px; font-weight: 700; color: #2b3440; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 리그 바 안에 링크나 보조 글자가 생기더라도 흰 글자가 남지 않게 한다. 범위는 리그 바 안뿐이다 — 밖의 링크 색은 건드리지 않는다. */ .pd-sports-page .pd-league-head a { color: #2b3440; } /* ── ⑤ 표 격자 ────────────────────────────────────────────── 머리글과 경기 줄이 **같은 격자**를 쓴다. 한쪽만 바뀌면 칸이 어긋난다. 시간 | 게임종류 | 홈(오버) | 무/기준 | 원정(언더) | 상태 | 정보 */ .pd-sports-page .pd-thead, .pd-sports-page .pd-row { display: grid; grid-template-columns: 96px 76px minmax(0, 1fr) 104px minmax(0, 1fr) 52px 92px; gap: 8px; align-items: center; padding: 0 14px; } .pd-sports-page .pd-thead { height: 34px; margin: 0; border: 0; border-bottom: 1px solid #eef1f4; background: #ffffff; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8b95a1; } .pd-sports-page .pd-th { height: auto; line-height: 1.2; text-align: center; font-weight: 600; } .pd-sports-page .pd-th-time { text-align: left; } /* ── ⑥ 경기 줄 ────────────────────────────────────────────── 세로 선은 두지 않는다. 줄 사이 가로 선 하나로 나눈다. 행 높이 68px — 배당 단추(42px) 위아래 13px. */ .pd-sports-page .pd-game { margin: 0; border: 0; background: none; } .pd-sports-page .pd-game + .pd-game { border-top: 1px solid #eef1f4; } .pd-sports-page .pd-row { background: none; min-height: 68px; } .pd-sports-page .pd-row + .pd-row { margin-top: 0; border-top: 1px dashed #f0f2f5; } /* 접힌 줄. `더보기(+N)` 를 누르면 열린다. */ .pd-sports-page .pd-row.is-extra { display: none; } .pd-sports-page .pd-game.is-open .pd-row.is-extra { display: grid; } .pd-sports-page .pd-game:hover { background: #fbfcfd; } .pd-sports-page .pd-row > * { display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; padding: 0; box-sizing: border-box; background: none; font-size: 13px; color: #5a6b80; } /* 시간은 `MM-DD HH:MM` 한 줄이다. 서버가 준 글자를 그대로 쓴다. */ .pd-sports-page .pd-td-time { justify-content: flex-start; } .pd-sports-page .pd-time-main { font-size: 12.5px; color: #7b8794; white-space: nowrap; font-variant-numeric: tabular-nums; } /* 게임종류. 녹색은 "고른 것"에만 쓰므로 여기서는 중립 칩이다. */ .pd-sports-page .pd-kind { display: inline-block; min-width: 0; padding: 3px 8px; border-radius: 4px; background: #eef1f5; color: #5a6b80; font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-align: center; white-space: nowrap; } /* ── ⑦ 배당 단추 ──────────────────────────────────────────── HOME 은 [이름][배당], AWAY 는 [배당][이름] — rev65 부터 같은 거울 배치다. 머리글의 `Home (Over)` · `Away (Under)` 와 같은 순서이고, 자리를 바꾸지 않는다. 줄마다 이름이 다르다(핸디캡 `LV Aces -7.5`, U/O `Under 8.5`) — 서버가 준 값 그대로다. */ .pd-sports-page .pd-pick { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 42px; padding: 0 11px; box-sizing: border-box; border: 1px solid #dfe3e8; border-radius: 6px; background: #ffffff; box-shadow: none; font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s; } .pd-sports-page .pd-pick:hover { border-color: #0f7a35; background: #f6fbf7; } .pd-sports-page .pd-pick:focus-visible { outline: 2px solid #0f7a35; outline-offset: 1px; } /* 이미 그 경기에 건 회원에게는 그 경기의 모든 단추가 잠긴다 (rev67). `disabled` 는 클릭 자체를 막고, 아래 규칙은 그 사실을 눈에 보이게 한다. */ .pd-sports-page .pd-pick[disabled] { border-color: #e8ecef; background: #f7f8fa; box-shadow: none; cursor: not-allowed; } .pd-sports-page .pd-pick[disabled]:hover { border-color: #e8ecef; background: #f7f8fa; } .pd-sports-page .pd-pick[disabled] .pd-pick-team { color: #a3adb8; } .pd-sports-page .pd-pick[disabled] .pd-pick-odds { color: #b3bcc6; } /* ── 대회 배당 범위 밖 (COMPETITION-ODDS-1) ───────────────────────────── 배당 숫자는 **지우지 않는다.** 잠근 것은 "고를 수 있는가"이지 "얼마인가"가 아니다. 그래서 `[disabled]` 의 흐린 회색보다 한 단계 진하게 되돌려 숫자가 읽히게 둔다 — 참여함(`Joined`) 줄과는 다른 상태다. 칸 크기·정렬은 건드리지 않는다. 폭은 줄 격자가 정하고, `×` 는 그 안에 들어가는 11px 글자 하나다. 줄바꿈만 막아 둔다. */ .pd-sports-page .pd-pick.is-ineligible[disabled] .pd-pick-odds { color: #7c8794; } /* 범위 밖 배당은 이제 native `disabled` 가 아니다 (COMPETITION-ODDS-2). 클릭을 받아 이유를 알려주기 위해서다. 그래서 `[disabled]` 가 주던 모양을 여기서 그대로 다시 준다 — 보기에는 달라진 것이 없어야 한다. */ .pd-sports-page .pd-pick.is-ineligible { border-color: #e8ecef; background: #f7f8fa; box-shadow: none; cursor: not-allowed; } .pd-sports-page .pd-pick.is-ineligible:hover { border-color: #e8ecef; background: #f7f8fa; } .pd-sports-page .pd-pick.is-ineligible .pd-pick-odds { color: #7c8794; } .pd-sports-page .pd-pick.is-ineligible .pd-pick-team { color: #98a2ad; } /* 누른 이유를 알려주는 한 줄. 화면 아래 가운데에 잠깐 뜬다. 눌린 자리에서 바로 보여야 해서 슬립(닫힌 시트 안일 수 있다)을 쓰지 않는다. */ .pd-pick-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200; max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px; border-radius: 20px; background: rgba(32, 40, 48, .94); color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 16px rgba(0,0,0,.24); } .pd-pick-toast[hidden] { display: none; } .pd-sports-page .pd-pick.is-ineligible[disabled] .pd-pick-team { color: #98a2ad; } .pd-sports-page .pd-pick-odds { white-space: nowrap; } .pd-sports-page .pd-odds-x { margin-left: 3px; font-size: 11px; font-weight: 700; line-height: 1; color: #b4564b; } /* 참여 가능 배당 안내. 슬립 머리줄 바로 아래 한 줄이다. */ .pd-sports-page .pd-slip-odds-range { margin: 0; padding: 8px 16px; border-bottom: 1px solid #e8ecef; background: #f7f8fa; font-size: 12px; font-weight: 600; color: #5a6b80; } /* 배당 자리에 들어가는 `Joined`. 숫자가 아니라 상태라는 것이 보이게 글자를 작게 잡고 대문자 간격을 준다 (rev68). */ .pd-sports-page .pd-joined { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: #a3adb8; text-transform: uppercase; } /* 고른 칸 — 초록으로 채운다 (rev140). 옅은 초록 바탕(`#eaf6ee`)은 hover 바탕(`#f6fbf7`)과 한 단계밖에 차이가 나지 않아, 마우스를 올린 칸과 실제로 고른 칸이 비슷해 보였다. 고른 칸만 **채워서** 가른다. hover 규칙은 손대지 않았다. 초록은 사이트가 이미 쓰는 `#0f7a35` 다 — 활성 SUBMIT · 검색 단추 · 고른 금액 단추와 같은 값이다. 색만으로 가르지 않는 원칙은 그대로다. 테두리 굵기(2px)와 글자 굵기가 함께 바뀌고, 여백 보정(`padding: 0 10px`)도 예전 그대로다. ⚠ `.is-picked` 는 JS 가 이미 붙였다 뗐다 하는 기존 클래스다. 선택 해제· 교체·초기화 동작을 위해 새로 만든 것이 없다. */ .pd-sports-page .pd-pick.is-picked { border-color: #0f7a35; border-width: 2px; padding: 0 10px; background: #0f7a35; box-shadow: none; } .pd-sports-page .pd-pick.is-picked .pd-pick-team { color: #ffffff; font-weight: 700; } .pd-sports-page .pd-pick.is-picked .pd-pick-odds { color: #ffffff; font-weight: 800; } /* 오버·언더 화살표. 채운 바탕에서 원래 색(빨강·파랑)은 읽히지 않는다. */ .pd-sports-page .pd-pick.is-picked .pd-marker { color: #ffffff; } /* 고른 칸에 마우스를 올려도 초록이 흐려지지 않게 둔다 — 위의 hover 규칙이 바탕을 옅은 초록으로 되돌리는 것을 막는다. hover 규칙 자체는 그대로다. */ .pd-sports-page .pd-pick.is-picked:hover { background: #0f7a35; border-color: #0f7a35; } .pd-sports-page .pd-pick-team { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #2b3440; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-sports-page .pd-pick-home .pd-pick-team { padding: 0; text-align: left; } .pd-sports-page .pd-pick-away .pd-pick-team { padding: 0; text-align: right; } .pd-sports-page .pd-pick-odds { flex: 0 0 auto; text-align: center; font-size: 13.5px; font-weight: 700; color: #2b3440; font-variant-numeric: tabular-nums; white-space: nowrap; } .pd-sports-page .pd-pick-mid { justify-content: center; } .pd-sports-page .pd-pick-mid .pd-pick-odds { flex: 1 1 auto; } /* 데스크톱은 예전 그대로 — 가운데 칸에는 배당만 보인다 (rev206). 이름(`Draw`)은 마크업에 있고 좁은 화면에서만 나온다. */ .pd-sports-page .pd-pick-mid .pd-pick-team { display: none; } /* U/O 줄의 위아래. 홈 = 오버(▲) · 원정 = 언더(▼). 뜻이 배당만으로는 드러나지 않아 화살표로 가른다 (rev68). 색은 한 단계 차분하게 낮췄다. */ .pd-sports-page .pd-marker { margin: 0 3px 0 0; font-size: 10px; font-weight: 700; } .pd-sports-page .pd-pick-away .pd-marker { margin: 0 0 0 3px; } .pd-sports-page .pd-marker-under { color: #2f6fdb; } .pd-sports-page .pd-marker-over { color: #d1493f; } /* 가운데가 기준선인 줄(핸디캡·U/O). 배당이 아니므로 누르지 않는다. */ .pd-sports-page .pd-line { color: #5a6b80; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } /* 2-way 는 가운데가 비어 있다. 없는 무승부 칸을 만들어 두지 않는다. 글자(`vs`)는 rev236 부터 마크업이 갖는다 — CSS `content` 는 번역할 수 없다. */ .pd-sports-page .pd-mid-blank { color: #a3adb8; font-size: 12px; font-weight: 600; } /* ── ⑧ 상태 · 더보기 ──────────────────────────────────────── 색만으로 가르지 않도록 글자도 함께 남긴다(서버가 준 문구 그대로). */ .pd-sports-page .pd-state { font-size: 11.5px; font-weight: 600; white-space: nowrap; } .pd-sports-page .pd-state-OPEN { color: #0f7a35; } .pd-sports-page .pd-state-SUSPENDED { color: #b7791f; } .pd-sports-page .pd-state-CLOSED, .pd-sports-page .pd-state-RESOLVED { color: #98a2b3; } .pd-sports-page .pd-state-CANCELLED { color: #c4362c; } .pd-sports-page .pd-expand { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 30px; padding: 0 6px; border: 1px solid #dfe3e8; border-radius: 6px; background: #ffffff; color: #5a6b80; font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer; } .pd-sports-page .pd-expand em { font-style: normal; font-weight: 700; margin-left: 3px; } .pd-sports-page .pd-expand:hover { border-color: #0f7a35; color: #0f7a35; } .pd-sports-page .pd-expand:focus-visible { outline: 2px solid #0f7a35; outline-offset: 1px; } .pd-sports-page .pd-expand.is-open { border-color: #cfd6de; background: #f4f6f8; color: #7b8794; } /* 펼친 뒤에는 `Close` 로 바뀐다. 글자를 CSS 가 갈아 끼우므로 JS 에 문구가 없다 — lang 을 바꿔도 여기만 남는 일이 생기지 않는다. */ .pd-sports-page .pd-expand-close { display: none; } .pd-sports-page .pd-expand.is-open .pd-expand-open { display: none; } .pd-sports-page .pd-expand.is-open .pd-expand-close { display: block; } /* 경기가 없는 날. 리그 카드와 같은 테두리 안에 둔다. */ .pd-sports-page .pd-empty { padding: 44px 0; border: 1px solid #e2e6ea; border-radius: 8px; background: #ffffff; color: #8b95a1; font-size: 14px; } /* ── ⑨ BET SLIP ───────────────────────────────────────────── 리그 카드와 **같은 옷**이다 — 흰 바탕, 같은 테두리·라운드·그림자. `top` 은 사이트 상단 고정바(높이 35px) 아래에서 멈추게 잡는다. */ /* 슬립 + 광고를 한 덩이(`.pd-slip-col`)로 묶어 여기에 sticky 를 준다. 슬립 혼자만 sticky 였다면 그리드 3번째 칸으로 떨어진 광고가 auto-flow 에 의해 목록 맨 아래(다음 줄, 왼쪽 칸)로 밀려난다 — 같은 오른쪽 칸 안에서 슬립 바로 아래 붙어 있게 하려면 이 방법뿐이다. */ .pd-sports-page .pd-slip-col { position: sticky; top: 47px; } .pd-sports-page .pd-slip { border: 1px solid #e2e6ea; border-radius: 8px; /* 위쪽 3px 초록 띠 — 슬립이 이 화면에서 가장 중요한 상자라는 것을 한눈에 보여준다(글 요청: 색이 튀지 않는다). 사이트 브랜드 초록(#0f7a35) 그대로다. */ border-top: 3px solid #0f7a35; background: #ffffff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); overflow: hidden; font-family: inherit; font-size: 13px; color: #2b3440; } /* 슬립 바로 아래 광고 자리 (자리 확인용). 카드 껍데기(테두리·배경· 그림자·제목)는 두지 않는다 — 이미지 하나뿐이다. 오른쪽 칸이 328px 이므로 326px 이미지가 그대로 들어가고, 칸이 더 좁아지면 폭에 맞춰 줄어든다(가로세로 비율은 이미지 자체 비율을 따른다). */ .pd-sports-page .pd-slip-ad { margin-top: 16px; } .pd-sports-page .pd-slip-ad img { display: block; width: 326px; max-width: 100%; height: auto; } /* 머리글 (rev118 → rev141). 리그 바가 연한 청회색으로 물러난 자리에서, 슬립 머리글만 진한 네이비로 남겨 화면의 무게 중심을 오른쪽 한 곳에 둔다. 색은 사이트가 이미 쓰는 `#2b3440` 이다 — 상단 메뉴 글자·회원 영역· 팀 이름과 같은 값으로, 회색보다 푸른 기가 있어 네이비로 읽힌다. 그림자·그라데이션은 두지 않는다 — 다른 사이트 위젯처럼 튀면 안 된다. */ .pd-sports-page .pd-slip-head { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid #e8ecef; background: #2b3440; color: #ffffff; font-size: 15px; font-weight: 700; letter-spacing: .01em; } /* 글자 앞 점. 진한 바탕에서 초록(#0f7a35)은 묻히므로 흰 점으로 둔다 — "지금 담는 자리" 라는 표시는 그대로다. 크기·자리는 건드리지 않는다. */ .pd-sports-page .pd-slip-head::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ffffff; } .pd-sports-page .pd-slip-form { padding: 0; background: #ffffff; } .pd-sports-page .pd-slip-body { padding: 14px 16px 16px; } /* 고른 픽 */ .pd-sports-page .pd-slip-pick { min-height: 0; padding: 0; background: none; border-bottom: 0; } /* 아직 고른 것이 없을 때 (rev118). 맨 글자 한 줄이면 "비어 있음" 인지 "덜 그려짐" 인지 알기 어렵다. 고른 픽이 들어올 자리와 같은 크기의 점선 상자를 두어 담길 곳을 보여 준다. */ .pd-sports-page .pd-slip-empty { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 66px; margin: 2px 0 14px; padding: 12px; /* 옅은 초록 기 — 담길 자리라는 신호를 회색보다 또렷하게 준다(승리·선택 상태에 이미 쓰는 #eefaf0 계열, 새 색 아님). */ border: 1px dashed #bcdfc9; border-radius: 6px; background: #f6faf7; font-size: 12.5px; line-height: 1.5; color: #8b95a1; text-align: center; } /* ⚠ `display` 를 준 순간 브라우저 기본 `[hidden] { display: none }` 이 밀린다. 화면 스크립트는 이 요소를 `hidden` 속성으로 감추므로(`renderSlip()`), 픽을 고른 뒤에도 빈 상자가 그대로 남는다. 같은 자리에서 되돌려 놓는다. */ .pd-sports-page .pd-slip-empty[hidden] { display: none; } /* 고른 픽. 왼쪽 초록 띠로 "이것이 담긴 것" 을 표시한다 (rev118) — 경기 목록에서 초록으로 켜진 배당 단추와 같은 신호다. */ .pd-sports-page .pd-slip-chosen { position: relative; padding: 11px 34px 11px 13px; margin-bottom: 14px; border: 1px solid #e2e6ea; border-left: 3px solid #0f7a35; border-radius: 6px; background: #fafbfc; } .pd-sports-page .pd-slip-match { font-size: 12px; color: #7b8794; line-height: 1.4; overflow-wrap: anywhere; } .pd-sports-page .pd-slip-sel { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #eef1f4; } /* 초록 채움 — 옆의 선택 이름(`.pd-slip-name`)과 한 쌍으로 읽히게 한다. 같은 초록은 `.pd-pick-win` 등 다른 화면이 이미 "적중/선택"에 쓰는 #eefaf0 다 — 새 색이 아니라 슬립에도 같은 뜻으로 옮겨온 것이다. */ .pd-sports-page .pd-slip-kind { flex: 0 0 auto; padding: 2px 7px; border-radius: 4px; background: #eefaf0; color: #0f7a35; font-size: 10.5px; font-weight: 700; } .pd-sports-page .pd-slip-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: #0f7a35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 지우기. 눈에 띄되 주 동작(Place bet)보다 앞서지 않게 둔다. */ .pd-sports-page .pd-slip-clear { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: #a3adb8; font-size: 17px; line-height: 1; cursor: pointer; } .pd-sports-page .pd-slip-clear:hover { background: #eef1f4; color: #c4362c; } .pd-sports-page .pd-slip-clear:focus-visible { outline: 2px solid #0f7a35; outline-offset: 1px; } /* 값 줄 — 라벨 왼쪽, 값 오른쪽 */ /* 값 줄. 사이에 옅은 선을 한 겹 둔다 (rev118) — Odds 와 Stake 가 붙어 있으면 어느 숫자가 어느 라벨의 것인지 한 번 더 보게 된다. */ .pd-sports-page .pd-slip-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; margin: 0; border: 0; box-shadow: none; font-size: 13px; color: #2b3440; } .pd-sports-page .pd-slip-line + .pd-slip-line { border-top: 1px solid #f2f4f6; } .pd-sports-page .pd-slip-label { font-size: 13px; font-weight: 600; color: #5a6b80; } .pd-sports-page .pd-slip-odds { padding: 0; font-size: 14px; font-weight: 700; color: #2b3440; font-variant-numeric: tabular-nums; } /* 읽기 전용이다. 금액은 아래 단추로만 정한다 — 서버가 프리셋만 받는다(§74). */ .pd-sports-page .pd-slip-stake { width: auto; height: auto; padding: 0; border: 0; background: none; text-align: right; font-size: 14px; font-weight: 700; color: #2b3440; font-variant-numeric: tabular-nums; } /* 예상 수익. 슬립에서 마지막에 보는 숫자라 옅은 초록 띠에 얹는다 (rev118). Stake 단추 바로 아래에서 "얼마 걸면 얼마" 가 한 줄로 이어진다. */ .pd-sports-page .pd-slip-total { box-sizing: border-box; height: 46px; margin-top: 12px; padding: 0 12px 0 9px; border-top: 0; border-radius: 6px; /* 고른 픽 상자(.pd-slip-chosen)와 같은 왼쪽 초록 띠 — "이 숫자가 최종 결과"라는 신호를 같은 문법으로 되풀이한다. */ border-left: 3px solid #0f7a35; background: #f1f8f3; } .pd-sports-page .pd-slip-total + .pd-slip-line, .pd-sports-page .pd-slip-line + .pd-slip-total { border-top: 0; } .pd-sports-page .pd-slip-total .pd-slip-label { color: #2b3440; font-weight: 700; } .pd-sports-page .pd-slip-return { padding: 0; font-size: 17px; font-weight: 800; color: #0f7a35; font-variant-numeric: tabular-nums; } /* 금액 프리셋 — 같은 너비 세 칸 */ .pd-sports-page .pd-slip-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 0; } .pd-sports-page .pd-slip-presets:last-of-type { grid-template-columns: repeat(3, 1fr); } .pd-sports-page .pd-slip-presets:last-of-type .pd-amt:last-child { grid-column: auto; } .pd-sports-page .pd-amt { height: 42px; box-sizing: border-box; padding: 0 4px; border: 1px solid #dfe3e8; border-radius: 6px; background: #ffffff; color: #2b3440; font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; } .pd-sports-page .pd-amt:hover { border-color: #0f7a35; color: #0f7a35; } .pd-sports-page .pd-amt:focus-visible { outline: 2px solid #0f7a35; outline-offset: 1px; } .pd-sports-page .pd-amt.is-picked { border-color: #0f7a35; background: #0f7a35; color: #ffffff; font-weight: 700; } /* 등록 단추 */ .pd-sports-page .pd-slip-submit { display: block; box-sizing: border-box; width: 100%; height: 48px; margin: 14px 0 0; border: 1px solid #0f7a35; border-radius: 6px; background: #0f7a35; color: #ffffff; font-size: 15px; font-weight: 700; line-height: 46px; text-align: center; text-decoration: none; cursor: pointer; } .pd-sports-page .pd-slip-submit:hover { background: #0c6a2d; border-color: #0c6a2d; } .pd-sports-page .pd-slip-submit:focus-visible { outline: 2px solid #0f7a35; outline-offset: 2px; } .pd-sports-page .pd-slip-submit:disabled { border-color: #dfe3e8; background: #eef1f4; color: #a3adb8; cursor: not-allowed; } /* 슬립 오류 한 줄 (rev137). 단추 바로 아래다 — 누른 자리에서 눈이 떨어지지 않는 거리에 둔다. 붉은 글자와 옅은 붉은 바탕으로 남은 참여 횟수 알약과 구분한다. `[hidden]` 을 명시하는 것은 `display` 를 준 요소에서 `hidden` 속성이 무시되기 때문이다(슬립의 빈 상태에서 한 번 겪었다). */ .pd-sports-page .pd-slip-error { margin: 10px 0 0; padding: 8px 10px; border: 1px solid #f3c6c6; border-radius: 6px; background: #fdf3f3; color: #b42318; font-size: 12px; font-weight: 600; line-height: 1.45; text-align: center; } .pd-sports-page .pd-slip-error[hidden] { display: none; } /* 남은 참여 횟수. 서버가 준 값 그대로이고 모양만 작은 알약으로 둔다 (rev118). */ .pd-sports-page .pd-slip-quota { display: block; width: fit-content; margin: 10px auto 0; padding: 4px 10px; border-radius: 999px; background: #f4f6f8; font-size: 11.5px; color: #7b8794; text-align: center; } .pd-table { width: 100%; border-collapse: collapse; font-size: 14px; } .pd-table th, .pd-table td { padding: 10px 8px; border-bottom: 1px solid #eef0f3; text-align: left; } .pd-table th { font-size: 12px; color: #7c8798; font-weight: 600; } .pd-num { text-align: right; font-variant-numeric: tabular-nums; } .pd-date { font-size: 12px; color: #8b95a1; white-space: nowrap; } .pd-cell-title { max-width: 260px; } .pd-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: #eef2f7; color: #5a6b80; } .pd-badge-WIN { background: #e6f6ec; color: #1d7a45; } .pd-badge-LOSE { background: #fdecec; color: #c33; } .pd-badge-VOID { background: #f3f4f6; color: #6b7280; } .pd-badge-CANCELLED { background: #f3f4f6; color: #9aa3ad; } .pd-settled { font-size: 12px; color: #6b7684; margin-left: 6px; } .pd-hint { margin-top: 18px; font-size: 12px; color: #8b95a1; } .pd-error { padding: 24px; background: #fdecec; color: #c33; border-radius: 8px; } /* ⚠ 폭을 화면에 맞춘다 (rev110). 이 사이트의 공통 레이아웃(`contents_area_wrap0`)은 1280px 고정이라, 화면이 그보다 좁아져도 부모가 1280px 를 준다. 그대로 두면 Sports 본문이 화면 밖으로 넘쳐 페이지가 통째로 가로로 밀린다. 공통 레이아웃은 손대지 않고(다른 화면이 전부 그것을 쓴다) **이 화면의 상자만** 화면 폭에 맞춘다. 테마가 본문 상자를 화면 왼쪽 20px 안쪽에서 시작시키므로 정확히 100vw 를 주면 그만큼 오른쪽으로 넘친다. 좌우 여백을 같은 크기로 남기고, 테마 여백이 달라져도 넘치지 않게 넉넉히 잡는다. ⚠ 칸 수를 바꾸는 지점(1050px)과 **따로** 둔다. 1280px 화면은 2단을 그대로 두고 폭만 맞춰야 한다. */ @media (max-width: 1330px) { .pd-wrap.pd-sports-page { box-sizing: border-box; width: 100%; max-width: calc(100vw - 40px); margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } /* ── ⑩ 태블릿 — 2단을 놓는 지점 (rev110) ──────────────────── 1050px 아래에서는 팀 이름 칸이 눌려 이름이 잘리기 시작한다. 억지로 2단을 붙들지 않고 슬립을 목록 아래로 내린다. 내려간 슬립은 따라다닐 이유가 없으므로 sticky 를 푼다. */ @media (max-width: 1050px) { .pd-sports-page.pd-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; } .pd-sports-page .pd-slip-col { position: static; } /* rev134 부터 검색은 늘 전폭이라 태블릿에서 따로 줄일 것이 없다. */ } @media (max-width: 640px) { /* 칸 수는 그대로 두고 폭만 줄인다. 칸을 접거나 세로로 쌓으면 배당이 세로로 맞지 않아 표로 읽히지 않는다. */ .pd-wrap { padding: 8px; } /* 좁은 화면에서는 좌우 여백을 되살린다. 표가 화면 가장자리에 닿으면 읽기 어렵다. `.pd-wrap.pd-layout` 이 위에서 0 으로 지웠으므로 같은 특이도로 다시 준다. */ .pd-wrap.pd-layout { padding-left: 8px; padding-right: 8px; padding-bottom: 8px; } /* 랭킹도 같은 이유로 되살린다 — 위에서 0 으로 지웠으므로 같은 특이도로. */ .pd-wrap.pd-rank { padding-left: 8px; padding-right: 8px; padding-bottom: 8px; } /* ── SPORTS (rev110) — 좁은 화면 ────────────────────────── ⚠ 먼저 폭을 화면에 맞춘다. 이 사이트의 공통 레이아웃(`contents_area_wrap0`)은 1280px 고정이라, 좁은 화면에서도 부모가 1280px 를 준다. 그대로 두면 아래 두 줄 배치가 1280px 짜리 카드 안에서 펼쳐져 화면에는 왼쪽 3분의 1만 보인다. 공통 레이아웃은 손대지 않고(다른 화면이 전부 그것을 쓴다) **이 화면의 상자만** 화면 폭에 맞춘다. 가운데 정렬도 푼다 — 1280px 안에서 가운데로 두면 상자가 화면 밖으로 밀린다. 칸은 하나도 지우지 않는다. 일곱 칸을 **두 줄로 접는다.** 1줄 시간 | 종류 | 상태 | 더보기 2줄 홈 | 무/기준 | 원정 머리글(`.pd-thead`)도 **같은 배치**를 쓰므로 라벨이 제 칸 위에 그대로 선다 — `Home (Over)` 이 홈 단추 위, `Away (Under)` 가 원정 단추 위다. 뜻이 화면에서 추론되지 않고 서버가 준 라벨 그대로다. DOM 순서는 그대로다(시간·종류·홈·가운데·원정·상태·정보). 자리만 옮기고 순서를 바꾸지 않는다. */ /* 폭 맞추기는 위 1050px 규칙이 이미 한다 — 여기서 다시 적지 않는다. */ .pd-sports-page .pd-thead, .pd-sports-page .pd-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 0 10px; } .pd-sports-page .pd-thead > *:nth-child(1), .pd-sports-page .pd-row > *:nth-child(1) { grid-area: 1 / 1 / 2 / 3; } .pd-sports-page .pd-thead > *:nth-child(2), .pd-sports-page .pd-row > *:nth-child(2) { grid-area: 1 / 3 / 2 / 4; } .pd-sports-page .pd-thead > *:nth-child(6), .pd-sports-page .pd-row > *:nth-child(6) { grid-area: 1 / 4 / 2 / 5; } .pd-sports-page .pd-thead > *:nth-child(7), .pd-sports-page .pd-row > *:nth-child(7) { grid-area: 1 / 5 / 2 / 7; } .pd-sports-page .pd-thead > *:nth-child(3), .pd-sports-page .pd-row > *:nth-child(3) { grid-area: 2 / 1 / 3 / 3; } .pd-sports-page .pd-thead > *:nth-child(4), .pd-sports-page .pd-row > *:nth-child(4) { grid-area: 2 / 3 / 3 / 5; } .pd-sports-page .pd-thead > *:nth-child(5), .pd-sports-page .pd-row > *:nth-child(5) { grid-area: 2 / 5 / 3 / 7; } .pd-sports-page .pd-thead { height: auto; padding-top: 7px; padding-bottom: 5px; row-gap: 3px; font-size: 10px; } .pd-sports-page .pd-row { min-height: 0; padding-top: 9px; padding-bottom: 9px; row-gap: 7px; } .pd-sports-page .pd-row > * { font-size: 12px; } .pd-sports-page .pd-th { height: auto; line-height: 1.2; } .pd-sports-page .pd-time-main { font-size: 12px; } .pd-sports-page .pd-kind { padding: 2px 6px; font-size: 10px; } /* 단추 안에서 이름을 위, 배당을 아래로 쌓는다. 셋이 한 줄에 들어가고 팀 이름이 잘리지 않는다 — 글자를 지우거나 줄이지 않는다. */ .pd-sports-page .pd-pick { flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 48px; padding: 0 6px; } .pd-sports-page .pd-pick.is-picked { padding: 0 5px; } .pd-sports-page .pd-pick-team { flex: 0 0 auto; width: 100%; font-size: 11px; font-weight: 600; text-align: center; } .pd-sports-page .pd-pick-home .pd-pick-team, .pd-sports-page .pd-pick-away .pd-pick-team { text-align: center; } .pd-sports-page .pd-pick-odds { flex: 0 0 auto; font-size: 13px; } /* 가운데 칸도 홈·원정과 **같은 구조**다 (rev206). ⚠ 데스크톱 규칙 `.pd-pick-mid .pd-pick-odds { flex: 1 1 auto }` 가 세로로 쌓을 때는 숫자 상자를 위아래로 늘려, 숫자만 위에 떠 보였다. 좁은 화면에서는 다른 칸과 같은 `flex: 0 0 auto` 로 되돌린다. */ .pd-sports-page .pd-pick-mid .pd-pick-team { display: block; } .pd-sports-page .pd-pick-mid .pd-pick-odds { flex: 0 0 auto; } /* 원정 칸은 데스크톱에서 [배당][이름] 거울 배치다. 세로로 쌓을 때는 이름이 위로 오도록 순서만 되돌린다 — HOME/AWAY 자리는 그대로다. */ .pd-sports-page .pd-pick-away { flex-direction: column-reverse; } .pd-sports-page .pd-line, .pd-sports-page .pd-mid-blank { font-size: 12px; } .pd-sports-page .pd-state { font-size: 11px; } .pd-sports-page .pd-expand { height: 30px; padding: 0 4px; font-size: 10.5px; } /* 종목 칩은 한 줄로 두고 상자 안에서 옆으로 민다 — 칩을 지우거나 종목 이름을 줄이지 않는다. 좁은 화면에서는 칩과 검색을 **위아래로** 놓는다. 나란히 두면 검색이 240px 를 먼저 가져가 칩 상자가 손가락 하나 폭이 된다. 그래서 여기서만 툴바의 줄바꿈을 다시 켠다 (rev130). */ .pd-sports-page .pd-sports-toolbar { flex-wrap: wrap; } .pd-sports-page .pd-chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .pd-sports-page .pd-chip { flex: 0 0 auto; } .pd-sports-page .pd-search { flex: 1 1 100%; width: 100%; margin-left: 0; } .pd-sports-page .pd-slip-body { padding: 12px 12px 14px; } /* 랭킹표는 칸 구성이 달라 따로 줄인다(아래 .pd-rank-table 규칙). */ .pd-table:not(.pd-rank-table) th:nth-child(5), .pd-table:not(.pd-rank-table) td:nth-child(5), .pd-table:not(.pd-rank-table) th:nth-child(7), .pd-table:not(.pd-rank-table) td:nth-child(7) { display: none; } } .pd-quota { font-size: 13px; color: #6b7684; margin-right: 12px; } .pd-quota strong { color: #2f6fdb; } /* 손익 표시 */ .pd-profit-up { color: #1d7a45; font-weight: 600; } .pd-profit-down { color: #c33; font-weight: 600; } .pd-profit-flat { color: #6b7280; } .pd-profit-none { color: #b9c2cd; } /* 미정산 행의 예상액 표시. 실제 지급액과 혼동하지 않게 값 앞에 붙인다. */ .pd-potential { display: inline-block; font-size: 11px; font-weight: 600; color: #8b6d1f; background: #fdf5e0; border-radius: 8px; padding: 1px 6px; margin-right: 4px; vertical-align: middle; } /* ───────────────────────────────────────────────────────────── Tipster Ranking v1 롤모델(reference/1.png)의 표를 따른다 — 진한 머리글, 넉넉한 행 높이, 값은 얇은 상자 안에. 기간 탭 · 검색 · 뱃지는 다음 단계에서 붙인다. ───────────────────────────────────────────────────────────── */ .pd-rank .pd-actions { display: flex; align-items: center; gap: 10px; } /* 아직 정산이 없을 때. 한 줄로 끝내면 고장처럼 읽힌다. */ .pd-empty-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #5a6b80; } .pd-empty-hint { margin: 0; font-size: 13px; color: #9aa4b1; } .pd-tag-final { background: #f0f2f5; color: #5a6b80; } .pd-rank-table { border: 1px solid #d8dde3; } .pd-rank-table th { background: #4a4f57; color: #fff; font-size: 13px; font-weight: 600; text-align: center; padding: 12px 8px; border-bottom: 0; } .pd-rank-table td { vertical-align: middle; height: 49px; text-align: center; border-bottom: 1px solid #e3e6ea; } .pd-rank-table tbody tr:last-child td { border-bottom: 0; } .pd-col-rank { width: 44px; white-space: nowrap; } /* 팁스터 칸이 가장 넓다. 나머지는 숫자라 폭이 필요 없다. td 에 flex 를 걸면 칸 폭 계산에서 빠지므로 정렬은 vertical-align 으로 한다. */ .pd-col-tipster { width: 26%; text-align: left; } /* ═══════════════════════════════════════════════════════════════ 순위 배지 — TOP3 · Ranking · Picks **공통** (rev224) 세 화면(그리고 픽 모음·레벨 랭킹)이 모두 `` 하나로 순위를 그린다. 그래서 모양도 여기 한 곳에서만 정한다 — 화면마다 같은 CSS 를 베껴 두지 않는다. 화면별로 다른 것은 **크기뿐** 이고, 그것도 아래 각 화면 블록에서 폭·높이만 덮는다. 모양: 가운데는 비우고(테마 배경이 그대로 비친다) **테두리 고리와 숫자에만** 색을 준다. 1·2·3 위는 금·은·동 고리, 4위 아래는 중립 고리다. 그라데이션·그림자·빛번짐·애니메이션·왕관은 쓰지 않는다. 숫자는 언제나 **글자 그대로** 남는다(이미지로 바꾸지 않는다). 색은 이 아래 변수 한 벌로 두고 다크에서 값만 바꾼다 — 규칙을 두 벌 쓰지 않기 위해서다. 노랑·주황처럼 쨍하지 않게 한 단계 낮춘 값이다. */ .pd-wrap { --pd-gold: #c9a227; --pd-gold-ink: #a8811a; --pd-silver: #97a3b2; --pd-silver-ink: #6f7b8a; --pd-bronze: #b07a4b; --pd-bronze-ink: #8c5f38; --pd-rank-ring: var(--t3-border, #dfe3e8); --pd-rank-ink: var(--t3-text-2, #6b7787); } html[data-theme="dark"] .pd-wrap { --pd-gold: #d8b34a; --pd-gold-ink: #e3c469; --pd-silver: #aab5c3; --pd-silver-ink: #c4cdd8; --pd-bronze: #bf8a5b; --pd-bronze-ink: #cf9c6d; } .pd-rank-no { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; border: 2px solid var(--pd-rank-ring); border-radius: 999px; background: transparent; color: var(--pd-rank-ink); font-size: 12.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .pd-rank-no.is-top1 { border-color: var(--pd-gold); color: var(--pd-gold-ink); } .pd-rank-no.is-top2 { border-color: var(--pd-silver); color: var(--pd-silver-ink); } .pd-rank-no.is-top3 { border-color: var(--pd-bronze); color: var(--pd-bronze-ink); } /* 조회용 값 (rev145 — 상자를 푼다). ───────────────────────────────────────────────────────────── 왜 상자를 없애는가 ───────────────────────────────────────────────────────────── `Win Rate` · `Profit` · `Odds` 같은 값은 **누르는 것이 아니다.** 그런데 흰 바탕·테두리·둥근 모서리·고정 폭(76px)을 두르고 있어 입력칸이나 단추처럼 보였다. 실제로 누를 수 있는 자리(Search · 페이지 이동 · View Profile · Delete · SUBMIT)와 구별되지 않는다. 그래서 상자를 걷고 글자만 남긴다. rev108 에서 랭킹 표만 이렇게 풀어 두었던 것을 **모든 사용자 표에** 같게 적용한다 — 같은 성격의 값이 화면마다 다르게 보이던 자리다. 칸의 정렬은 표(`th`·`td`)가 갖고 있으므로 여기서 폭을 잡지 않아도 숫자가 흔들리지 않는다. 자릿수 맞춤(`tabular-nums`)은 남긴다. */ .pd-cell { display: inline-block; padding: 0; border: 0; background: none; font-size: 13px; color: #3a4756; font-variant-numeric: tabular-nums; } /* 손익은 뜻이 있는 색이다. ⚠ `.pd-profit-*` 은 위쪽에 있어 `.pd-cell` 과 특이도가 같고, 나중에 선언된 `.pd-cell` 의 색에 눌리고 있었다(랭킹만 따로 되살려 두었다). 여기서 모든 표에 대해 되살린다 — 상자를 걷으면 색이 유일한 신호다. */ .pd-cell.pd-profit-up { color: #1f8a4c; font-weight: 600; } .pd-cell.pd-profit-down { color: #c4362c; font-weight: 600; } .pd-cell.pd-profit-flat { color: #3a4756; font-weight: 500; } .pd-avatar { display: inline-block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #eef2f7; margin-right: 8px; vertical-align: middle; } .pd-avatar-empty { text-align: center; line-height: 28px; font-size: 12px; font-weight: 700; color: #7c8798; } /* 닉네임 (rev115 — 네 화면이 한 벌을 쓴다). 순위표만 진한 본문색·굵게·밑줄 없음이었고 TOP3·Picks·레벨 랭킹은 파란 밑줄 링크였다. 같은 성격의 이름이 화면마다 달라 보이던 자리다. 색은 본문색으로 두고 강조는 hover 에서만 준다 — 표 안에서 이름이 링크 색으로 줄줄이 서면 정작 봐야 할 수치가 묻힌다. */ .pd-nick { font-size: 14px; font-weight: 600; color: #1f2937; vertical-align: middle; text-decoration: none; overflow-wrap: anywhere; } .pd-nick:hover { color: #0f7a35; text-decoration: none; } /* 로그인한 회원의 줄. 표에서 자기 자리를 먼저 찾을 수 있어야 한다. */ /* 로그인한 회원의 줄 (rev115 — 강조색을 녹색 한 가지로 모은다) */ .pd-rank-row.is-me { background: #f2faf5; box-shadow: inset 3px 0 0 #0f7a35; } .pd-rank-row.is-me .pd-nick { font-weight: 700; color: #0b5f28; } /* ── 탭 (기간 · 정렬) ─────────────────────────────────────────── rev115 — 순위표 · TOP3 · Picks · 픽 모음이 **한 벌**을 쓴다. 전에는 두 벌이었다. 기본 규칙(TOP3·Picks)은 고른 탭이 진회색 `#4a4f57` 에 padding 7/14px, 순위표만 덮어쓴 규칙이 파랑 `#2f6fdb` 에 높이 33px 이었다. 같은 성격의 고르개가 화면마다 색도 크기도 달라 한 사이트로 읽히지 않았다. 색은 사이트 포인트 녹색에 맞춘다 — 상단 헤더의 선택 메뉴, Sports 화면의 고른 배당·Stake·Place bet 이 모두 이 녹색이다. 밝은 쪽(`#04ba1e`)은 흰 글씨를 얹으면 대비가 모자라, 채우는 자리에는 한 단계 짙은 `#0f7a35` 를 쓴다(헤더·Sports 화면과 같은 값). ⚠ 이 네 화면 밖에서는 `.pd-rank-tab` 을 쓰지 않는다. 화면별 덮어쓰기를 두지 않으므로 최종 값이 이 한 곳에서 다 읽힌다. */ .pd-rank-tabs { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0 0 8px; padding: 0; } .pd-rank-tab a { box-sizing: border-box; display: flex; align-items: center; height: 33px; padding: 0 13px; border: 1px solid #dfe3e8; border-radius: 6px; background: #ffffff; color: #5a6b80; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; } .pd-rank-tab a:hover { border-color: #0f7a35; color: #0f7a35; } .pd-rank-tab a:focus-visible { outline: 2px solid #0f7a35; outline-offset: 1px; } .pd-rank-tab.is-active a { background: #0f7a35; border-color: #0f7a35; color: #ffffff; font-weight: 700; } /* ── 순위 화면 상단 두 줄 (rev101) ─────────────────────────────── 1줄 기간 탭 + 오른쪽 끝 검색 · 2줄 랭킹 기준 탭. `.pd-rank-head` 안에서만 걸리게 둔다 — 레벨 랭킹·픽 화면의 같은 클래스는 예전 배치를 그대로 쓴다. */ .pd-rank-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; } .pd-rank-head .pd-rank-tabs { margin: 0; } /* 검색은 한 묶음이다. 좁아져도 입력창과 단추가 갈라지지 않는다. */ .pd-rank-head .pd-rank-search { margin: 0; flex-wrap: nowrap; min-width: 0; } .pd-rank-head .pd-rank-input { min-width: 0; } /* 검색이 쓰던 아래 여백을 기준 탭 줄이 이어받는다 (표가 붙어 보이지 않게) */ .pd-rank-sorts { margin-bottom: 14px; } /* ── 월간 달 고르개 (rev231) ───────────────────────────────────── 기간 탭과 **같은 줄 오른쪽 끝**이다. 자리는 `.pd-rank-head` 의 `justify-content: space-between` 이 이미 만들고 있어 새 배치 규칙을 두지 않는다. 높이(33px)·라운드(6px)·테두리·글자 크기는 탭·검색창과 같은 값을 쓴다. 한 줄에 서는 부품끼리 눈금이 어긋나면 따로 붙인 것처럼 보인다. 폭은 내용만큼이다(`2026-08` 한 덩어리). 고정 폭을 주면 글자와 화살표 사이가 벌어져 지시서의 compact 모양에서 멀어진다. */ .pd-rank-month { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin: 0; } .pd-rank-month-select { box-sizing: border-box; /* 폭은 `2026-08` + 화살표가 답답하지 않게 (지시서 120~130px). */ min-width: 125px; height: 33px; padding: 0 30px 0 11px; border: 1px solid #dfe3e8; border-radius: 6px; color: #2b3440; font-size: 13px; font-weight: 600; cursor: pointer; /* 화살표를 직접 그린다. 기본 화살표는 브라우저·OS 마다 폭이 달라 탭과 나란히 놓으면 오른쪽 끝이 흔들린다. ⚠ 배경은 **반드시 축약형 한 줄**이다. longhand 로 나눠 쓰면 `background-image` 만 살고 `background-repeat` 가 빠지는 경우가 생겨 화살표가 칸 전체에 타일처럼 깔린다(지그재그 무늬로 보인다). 축약형은 빠진 값을 초깃값으로 되돌리므로 그 중간 상태 자체가 만들어지지 않는다. 크기도 못 박는다. 그림 크기를 브라우저 판단에 맡기면 확대되어 한 개가 여러 개처럼 번진다. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%235a6b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center; background-size: 10px 6px; } .pd-rank-month-select:hover { border-color: #0f7a35; color: #0f7a35; } .pd-rank-month-select:focus { border-color: #0f7a35; outline: none; } .pd-rank-month-select:focus-visible { outline: 2px solid #0f7a35; outline-offset: 1px; } /* TOP3 의 달 고르개 (Snapshot 화면 통합 작업지시서 §20). `.pd-rank-head` 를 그대로 재사용하지만 기간 탭이 없어 자식이 고르개 하나뿐이다 — `space-between` 은 하나뿐인 자식을 왼쪽에 붙이므로, 순위표와 같은 오른쪽 자리를 얻으려면 이 한 줄만 있으면 된다. */ .pd-top-head { justify-content: flex-end; } /* ── 검색 ────────────────────────────────────────────────────── */ .pd-rank-search { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; } /* 탭과 같은 높이·라운드·녹색이다 (rev115). 한 줄에 서면 눈금이 맞아야 한다. */ .pd-rank-input { box-sizing: border-box; width: 200px; height: 33px; padding: 0 11px; border: 1px solid #dfe3e8; border-radius: 6px; font-size: 13px; color: #2b3440; } .pd-rank-input:focus { border-color: #0f7a35; outline: none; } .pd-rank-input::placeholder { color: #a3adb8; } .pd-rank-btn { box-sizing: border-box; height: 33px; padding: 0 16px; border: 1px solid #0f7a35; border-radius: 6px; background: #0f7a35; color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; } .pd-rank-btn:hover { background: #0c6a2d; border-color: #0c6a2d; } .pd-rank-btn:focus-visible { outline: 2px solid #0f7a35; outline-offset: 1px; } .pd-rank-count { margin-left: auto; font-size: 13px; color: #8b95a1; } /* ═════════════════════════════════════════════════════════════ 순위표 화면 (rev108) rev107(2차)에서 넓고 성기게 벌려 놓은 값을 걷어내고, rev106(1차)의 뼈대 위에서 다시 잡는다. 같은 선택자를 여러 번 덮어쓰지 않고 최종 적용값을 이 한 덩어리에 모은다 — 어느 값이 실제로 먹는지 여기서 전부 읽힌다. ⚠ 선택자는 전부 `.pd-rank-board` 안으로 한정한다. `.pd-rank-table` · `.pd-cell` · `.pd-avatar` · `.pd-rank-tab` 은 픽 화면 · 레벨 랭킹 · 팁스터 프로필이 함께 쓰는 공통 규칙이라, 위쪽 원본을 고치면 그 화면들이 같이 움직인다. 여기서는 이 화면에만 덧입힌다. 고치는 것은 보기뿐이다 — 순위·적중률·손익 셈, 기간·최소참여 조건, 조회 질의, 주소, 쪽 넘김, 검색은 하나도 건드리지 않는다. rev107 에서 되돌린 것 콘텐츠 폭 1400 → 1180 흰 카드(라운드 10px) → 얇은 선 한 줄 알약 40px → 33px 파란 테두리 → 연회색 테두리 행 62px → 56px 아바타 36px → 32px 배지 28px → 24px 손익 굵기 700 → 600 · 색은 차분하게 ═════════════════════════════════════════════════════════════ */ /* ── ① 콘텐츠 폭 ───────────────────────────────────────────── rev109 — 좌우 여백을 없앤다. 1180px 로 묶고 좌우 18px 를 두었더니, 표가 위쪽 머리글·메뉴가 쓰는 본문 폭(1280px)보다 안쪽으로 들어가 한 단 들어간 것처럼 보였다. 레이아웃이 주는 폭을 그대로 쓴다 — 다른 Prediction 화면의 `.pd-wrap.pd-rank` 와 같은 값이라 이 화면만 따로 놀지 않는다. */ .pd-wrap.pd-rank-board { max-width: 1400px; margin: 0 auto; padding: 0 0 16px; } /* ── ② 필터 · 검색 툴바 ────────────────────────────────────── 알약을 표보다 먼저 보이지 않을 크기로 낮춘다. 고른 것만 포인트 색으로 채우고 나머지는 흰 바탕 + 연회색 테두리다. 그림자·그라데이션은 없다. 주소·파라미터·form·전송 방식은 그대로다. */ .pd-rank-board .pd-rank-tabs { gap: 7px; margin: 0; } .pd-rank-board .pd-rank-head { align-items: center; gap: 12px; margin-bottom: 8px; } /* 순서가 기간 → 기준 → 검색으로 바뀌면서(rev210) 아래 여백이 한 칸씩 옮겨 간다. 크기·색·라운드·가로 스크롤은 그대로다 — 자리만 바뀌었다. ⚠ 머리 줄 안에서 `nowrap` 을 주던 규칙(`.pd-rank-head .pd-rank-search`)은 자리를 옮기면 걸리지 않는다. 그대로 두면 입력창과 단추가 두 줄로 갈라진다(1440px 에서 실제로 갈라졌다). 같은 값을 새 자리에 다시 준다. 순위표와 Picks 가 같은 규칙을 쓴다 — 두 화면의 눈금이 어긋나지 않는다. */ .pd-rank-board .pd-rank-sorts { margin-bottom: 8px; } /* 알약 모양·색은 위쪽 공통 `.pd-rank-tab` 한 벌이 정한다 (rev115). 순위표만 따로 덮어쓰던 규칙을 지웠다 — 그것이 Picks·TOP3 와 색이 갈리던 원인이었다. 여기서는 간격만 정한다. */ /* 검색은 기간 줄 오른쪽 끝에 서되, **콘텐츠 폭 안**이다 — 표의 오른쪽 모서리와 같은 자리에서 끝난다. 브라우저 끝에 붙거나 잘리지 않는다. 폭은 250px 한 덩어리이고 입력창이 남는 자리를 갖는다. */ .pd-rank-board .pd-rank-search, /* 픽 화면도 **같은 눈금**을 쓴다 (rev177). 순위표와 나란히 놓았을 때 입력창·단추 크기와 사이 간격이 어긋나면 다른 부품처럼 보인다. */ .pd-picks .pd-rank-search { gap: 6px; width: 250px; margin: 0; } /* ⚠ 위 `margin: 0` 이 **나중에** 선언돼 아래 여백을 지우고 있었다 — 검색폼과 결과 표가 딱 붙어 보이던 자리다. 같은 특이도라 순서가 이기므로 이 규칙을 그 뒤에 둔다. `nowrap` 도 함께 준다(머리 줄 밖으로 옮기면서 필요해졌다). */ .pd-rank-board > .pd-rank-search, .pd-picks > .pd-rank-search { margin: 0 0 16px; flex-wrap: nowrap; min-width: 0; } /* 모양은 공통 규칙이 정한다. 여기서는 한 덩어리 안에서의 폭만 나눈다. */ .pd-rank-board .pd-rank-input, .pd-picks .pd-rank-input { flex: 1 1 auto; width: auto; min-width: 0; } .pd-rank-board .pd-rank-btn, .pd-picks .pd-rank-btn { flex: 0 0 auto; padding: 0 14px; } /* ── ③ 표를 담는 상자 ──────────────────────────────────────── 굵은 카드 외곽선도 그림자도 두지 않는다 — 얇은 선 한 줄과 작은 라운드다. `overflow-x` 는 좁은 화면에서 표를 **상자 안에서** 밀기 위한 것이고, 그 덕에 라운드도 안쪽 내용에 맞게 잘린다. */ .pd-rank-board .pd-rank-card { border: 1px solid #dfe3e8; border-radius: 6px; background: #ffffff; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── ④ 칸 폭 ───────────────────────────────────────────────── 폭은 템플릿의 `` 이 갖는다. 여기서는 그 값만 준다. 합 100% 이고, `min-width` 아래로는 줄지 않고 상자 안에서 밀린다. 회원 칸을 남는 자리 전부로 두면(=폭 미지정) 이름 오른쪽이 통째로 비고 수치가 오른쪽 끝으로 몰린다. 그래서 회원 칸도 값을 못 박는다. */ /* 칸이 여덟 개가 되었다 (rev121). 최소 폭을 한 단계 올려 좁은 상자에서 숫자가 눌리지 않게 한다 — 더 좁아지면 상자 안에서 가로로 민다. */ .pd-rank-board .pd-rank-table { border: 0; table-layout: fixed; min-width: 1060px; } .pd-rank-board .pd-c-rank { width: 6.6%; } .pd-rank-board .pd-c-member { width: 25%; } .pd-rank-board .pd-c-part { width: 13.4%; } .pd-rank-board .pd-c-win { width: 9.5%; } .pd-rank-board .pd-c-lose { width: 9.5%; } .pd-rank-board .pd-c-rate { width: 12.5%; } .pd-rank-board .pd-c-odds { width: 11%; } .pd-rank-board .pd-c-profit { width: 12.5%; } /* ── ⑤ 머리글 ──────────────────────────────────────────────── 진한 회색 띠를 되살린다 (rev108 → rev139). rev108 에서 이 화면만 밝은 띠(`#eef1f5`)로 바꿨었다. 그런데 같은 `.pd-rank-table` 을 쓰는 Picks·T.O.P3 는 진한 띠(`#4a4f57`)를 그대로 쓰고 있어, 사이트 안에서 같은 표가 두 가지 머리글을 갖게 됐다. 색을 새로 만들지 않는다. 바로 위의 기본 규칙 (`.pd-rank-table th { background: #4a4f57; color: #fff }`)에 있는 값을 그대로 되쓴다 — 한쪽을 바꾸면 다른 쪽이 따라오지 않는 상태를 만들지 않기 위해 값을 옮겨 적지 않고 같은 값을 쓴다. 아래 선은 지운다. 진한 띠 밑의 밝은 선은 띠와 본문 사이에 뜬 한 줄로 보인다 — 기본 규칙도 `border-bottom: 0` 이다. 높이·여백·글자 크기·굵기는 rev108 그대로다. 이번에 바꾸는 것은 색뿐이다. */ .pd-rank-board .pd-rank-table thead th { height: 43px; padding: 0 8px; background: #4a4f57; color: #ffffff; font-size: 13px; font-weight: 600; border: 0; } /* ── ⑥ 본문 행 ─────────────────────────────────────────────── 행 높이 56px(38 + 위아래 9). 세로 테두리 없이 가로 구분선만 둔다. */ .pd-rank-board .pd-rank-table td { height: 38px; padding: 9px 8px; border: 0; border-bottom: 1px solid #eef1f4; } .pd-rank-board .pd-rank-table tbody tr:last-child td { border-bottom: 0; } /* 짚어 보는 줄. 자기 줄(`is-me`)의 표시를 덮지 않게 비켜 둔다. */ .pd-rank-board .pd-rank-row:not(.is-me):hover > td { background: #f8fafc; } /* 머리글과 본문의 정렬을 칸마다 맞춘다 — 일곱 칸 모두 가운데다 (rev109). 회원 칸을 왼쪽에 붙여 두었더니 순위 숫자 바로 옆에 닿아 두 칸이 한 덩어리로 읽혔다. 가운데로 세우면 순위와의 사이가 저절로 벌어지고, 머리글 `Member` 와 아래 이름이 같은 축에 선다. 왼쪽 여백은 가운데 정렬이 대신하므로 따로 주지 않는다. */ .pd-rank-board .pd-rank-table th, .pd-rank-board .pd-rank-table td { text-align: center; } /* ── ⑦ 1~3위 원형 배지 ─────────────────────────────────────── 24px 정원에 숫자만 가운데 둔다. 메달·왕관·그림자·그라데이션은 없다. 4위 아래(`is-top4` …)는 걸릴 규칙이 없어 그대로 일반 숫자다. 검색 중에는 자리 번호가 `-` 라 배지가 붙지 않는다. */ /* 순위표의 배지는 공통 규칙(위 `.pd-rank-no`) 그대로다 (rev224). 예전에 여기 있던 **꽉 찬 금·은·동 원**은 지웠다 — 세 화면이 같은 모양을 쓰기로 했고, 그 모양은 한 곳에서만 정한다. 크기도 TOP3·Picks 와 같은 28px 을 쓴다(표 줄 높이가 이미 그만큼 된다). 그래서 이 화면에는 따로 덮어쓸 값이 없다. */ /* ── ⑧ 회원 칸 ─────────────────────────────────────────────── 회원이 올린 이미지가 있으면 32px 원형으로 그린다. 이미지가 없을 때 첫 글자를 담던 동그라미(`.pd-avatar-empty`)는 rev109 에서 템플릿에서 빼 이 화면에는 더 이상 나오지 않는다 — 규칙도 함께 지웠다. 닉네임은 본문색으로 굵게, 밑줄은 뺀다. 링크·프로필 주소·권한 처리는 그대로다. */ .pd-rank-board .pd-avatar { width: 32px; height: 32px; margin-right: 9px; } /* 닉네임 모양은 위쪽 공통 `.pd-nick` 한 벌이 정한다 (rev115) — 순위표만 따로 덮어쓰던 규칙을 지웠다. */ /* 경험치 레벨 아이콘이 들어오는 자리 — 닉네임 **왼쪽** (rev109). 아이콘 `` 은 애드온이 이 span 안에 넣는다. 경험치가 없는 회원은 비어 있고, 빈 인라인 span 은 자리를 갖지 않는다. 오른쪽 간격은 애드온 기본값(3px)보다 조금 넉넉하게 준다. 높이 제한은 아이콘 세트가 바뀌어도 행이 커지지 않게 하는 안전선이고, 지금 세트(josun, 22×16)에는 걸리지 않는다. */ /* 잠긴 레벨 아이콘은 손가락 커서를 주지 않는다 (rev135). 눌러도 아무 일이 없는데 누를 수 있어 보이면 그것대로 고장으로 읽힌다. 관리자에게는 이 클래스가 붙지 않아 예전 그대로다. */ .pd-lv-lock, .pd-lv-lock .xe_experience_level_icon { cursor: default; } .pd-rank-board .pd-lv { display: inline; } .pd-rank-board .pd-lv .xe_experience_level_icon { margin: 0 5px 0 0; max-height: 18px; width: auto; vertical-align: middle; } /* ── ⑨ 수치 ────────────────────────────────────────────────── 입력창처럼 보이던 상자(테두리·배경·최소폭)를 걷고 글자만 남긴다. 숫자 자체와 자릿수·`%` 표기는 정산이 넣어 준 그대로다. */ .pd-rank-board .pd-cell { min-width: 0; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: #37414f; } /* 손익은 한 단계만 세게 말한다 — 크기는 같고 굵기와 색만 다르다. 위쪽 `.pd-profit-*` 은 `.pd-cell` 과 특이도가 같아 나중에 선언된 `.pd-cell` 의 색에 눌리고 있었다. 여기서 되살린다. */ .pd-rank-board .pd-cell.pd-profit-up { color: #1f8a4c; font-weight: 600; } .pd-rank-board .pd-cell.pd-profit-down { color: #c4362c; font-weight: 600; } .pd-rank-board .pd-cell.pd-profit-flat { color: #37414f; font-weight: 500; } /* ═════════════════════════════════════════════════════════════ TOP3 · Tipster Picks — 회원 칸의 경험치 레벨 아이콘 (rev114) 두 화면의 템플릿(`ranking_top.html` · `tipster_picks.html`)이 닉네임 앞에 빈 `.pd-lv` span 을 둔다. `experience_level_icon` 애드온이 그 안에 아이콘을 넣는다 — 순위표(`.pd-rank-board`)와 같은 방식이다. ⚠ `.pd-top` 은 `ranking_top.html` · `top.html` 이, `.pd-picks` 는 `tipster_picks.html` · `ranking_picks.html` 이 함께 쓴다. 그러나 `.pd-lv` span 을 두는 것은 이번에 고친 두 템플릿뿐이라, 나머지 두 화면에는 걸릴 요소가 없다. ⚠ 첫 글자 동그라미(`.pd-avatar-empty`)는 템플릿에서 뺐으므로 여기서도 규칙을 두지 않는다 — 레벨 랭킹 등 다른 화면의 동그라미는 그대로다. ═════════════════════════════════════════════════════════════ */ .pd-top .pd-avatar, .pd-picks .pd-avatar { width: 32px; height: 32px; margin-right: 9px; } .pd-top .pd-lv, .pd-picks .pd-lv { display: inline; } /* 애드온 기본값(`margin-right: 3px`)보다 조금 넉넉하게. 높이 제한은 아이콘 세트가 바뀌어도 줄 높이가 커지지 않게 하는 안전선이고, 지금 세트 (josun, 22×16)에는 걸리지 않는다. */ .pd-top .pd-lv .xe_experience_level_icon, .pd-picks .pd-lv .xe_experience_level_icon { margin: 0 5px 0 0; max-height: 18px; width: auto; vertical-align: middle; } @media (max-width: 640px) { .pd-top .pd-avatar, .pd-picks .pd-avatar { width: 27px; height: 27px; margin-right: 8px; } /* 아이콘 때문에 닉네임 줄이 두 줄이 되지 않게 한다. 비율은 그대로다. */ .pd-top .pd-lv .xe_experience_level_icon, .pd-picks .pd-lv .xe_experience_level_icon { margin-right: 4px; max-height: 16px; } } /* ── 레벨 랭킹 ───────────────────────────────────────────────── */ /* 칸이 넷뿐이라 이름 칸을 넓게 준다 */ .pd-level-table .pd-col-tipster { width: 46%; } .pd-level-table .pd-col-rank { width: 12%; } /* ── 팁스터 프로필 ───────────────────────────────────────────── */ /* ⚠ rev100 — 머리글 전용 규칙을 지웠다. `.pd-profile-head` · `.pd-avatar-lg` · `.pd-profile-meta` · `.pd-profile-key` · `.pd-profile-val` 은 이 화면에서만 쓰던 것이고, 그 영역이 사라져 걸릴 요소가 없다. `.pd-avatar-empty` 는 순위표들이 계속 쓰므로 남긴다. */ /* ⚠ rev104 — 첫 칸 전용 규칙을 지웠다. `.pd-profile-table th/td:first-child` 는 `Period` 칸 하나를 위한 것이었다(폭 22% · 회색 굵은 글씨). 그 칸이 사라진 뒤로는 첫 칸이 `Participations` 라, 남겨 두면 숫자 칸 하나만 넓고 색이 달라진다. 여섯 칸은 `.pd-rank-table` 기본값대로 고르게 나눠 갖는다. */ /* ── Picks 제목 줄 (rev101, 참고 화면 `docs/2.png`) ─────────────── 작은 아이콘 · `{닉네임}'s Picks & Predictions` · `View Profile` 한 줄. 아래 얇은 선으로 표와 나눈다. `.pd-profile` 안으로 한정한다 — 다른 화면이 같은 이름을 쓰지 않는다. 너비를 화면 전체로 밀지 않고 내용만큼만 차지한다. */ .pd-profile .pd-picks-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid #d8dde3; } /* 왼쪽 아이콘은 경험치 레벨 아이콘이다 (rev227 — 참고 화면 `docs/1.png`). View Profile(`.pd-mp-head`)과 **같은 자리표시자·같은 애드온 출력**이고, 크기도 원본 그대로 둔다(`max-height` 는 안전선일 뿐 늘리지 않는다). 경험치가 없는 회원은 span 이 비어 오는데, 그대로 두면 `gap` 만큼 제목이 밀리므로 자리째 접는다. */ .pd-profile .pd-picks-title .pd-lv { display: inline-flex; align-items: center; } .pd-profile .pd-picks-title .pd-lv:empty { display: none; } .pd-profile .pd-picks-title .xe_experience_level_icon { margin: 0; max-height: 20px; width: auto; vertical-align: middle; } .pd-profile .pd-picks-title-text { margin: 0; font-size: 15px; font-weight: 600; color: #2b3440; } /* `View Profile` — 쪽 이동 단추와 **같은 옷**을 입는다 (rev228). 회색 알약이라 화면에서 유일하게 강조색을 쓰지 않는 링크였다. 모양 (테두리 1px · radius 8px · 굵기 600)과 색(테두리·글자 초록, 올려두면 초록으로 채우고 흰 글씨)을 `.pd-page` · `.pd-page.is-current` 에서 그대로 가져온다 — 새 색을 만들지 않고 토큰만 쓰므로 라이트·다크가 함께 따라온다. 높이만 제목 줄에 맞춰 28px 로 둔다(쪽 이동은 34px). */ .pd-profile .pd-picks-profile-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border: 1px solid var(--t3-green, #0f7a35); border-radius: 8px; background: var(--t3-surface, #ffffff); color: var(--t3-green-text, #0f7a35); font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .pd-profile .pd-picks-profile-btn:hover { background: var(--t3-green, #0f7a35); border-color: var(--t3-green, #0f7a35); color: #ffffff; } .pd-profile .pd-picks-profile-btn:focus-visible { outline: 2px solid var(--t3-green, #0f7a35); outline-offset: 1px; } /* Picks 가 맨 위다 (rev100). 첫 요소일 때는 위 여백을 두지 않는다 — 머리글이 있던 시절의 26px 이 그대로 남으면 표가 시작하기 전에 빈 띠가 생긴다. */ .pd-profile-picks { margin-top: 26px; } .pd-profile-picks:first-child { margin-top: 0; } /* Picks 아래에 오는 Period 표는 예전 Picks 가 갖던 만큼 띄운다. */ .pd-profile .pd-profile-table { margin-top: 26px; } /* ── TOP N · 픽 모음 ─────────────────────────────────────────── */ /* 묶음 사이는 넉넉히 띄우고, 제목은 **자기 표에 붙여** 둔다 (rev222). 그래야 제목이 위 표가 아니라 아래 표를 가리키는 것으로 읽힌다. */ .pd-top-group { margin-bottom: 34px; } .pd-top-group:last-of-type { margin-bottom: 0; } /* 섹션 제목 (rev222). ⚠ 색이 `#2b3440` 로 박혀 있어 **다크에서 배경에 묻혔다** — 어두운 판 위의 짙은 남색이었다. 새 색을 만들지 않고 본문색 토큰(`--t3-text`) 으로 바꾼다. 라이트에서 그 토큰 값이 곧 `#2b3440` 이라 라이트 화면은 그대로다. 구성은 [아이콘][제목] 한 덩어리 + 아래 얇은 선 하나뿐이다. 왼쪽 막대와 밑줄을 함께 쓰지 않고, 상자·그림자·배경도 두지 않는다. 초록은 아이콘 에만 쓰고 글자는 중립색으로 둔다. */ .pd-top-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--t3-border-soft, #eef0f3); font-size: 15.5px; font-weight: 700; color: var(--t3-text, #2b3440); } /* 아이콘칸 — 네 섹션 모두 같은 크기·같은 선 굵기다(뜻만 다르다). 사이트가 이미 쓰는 인라인 SVG 방식이라 새 아이콘 꾸러미를 들이지 않는다. */ .pd-top-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; color: var(--t3-green-text, #0f7a35); } .pd-top-ico svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pd-top-label { min-width: 0; } .pd-top-empty { padding: 20px 0; } /* 픽 표는 칸이 많아 글자를 한 단계 줄인다 */ .pd-pick-table th, .pd-pick-table td { font-size: 13px; } .pd-pick-choice { font-weight: 600; color: #2b3440; } /* ── 픽 표 칸 배분 (rev180) ────────────────────────────────────── `League` 칸을 없앴다. 그 폭은 경기 이름(`Match`)이 받는다 — 빈 칸이나 여백으로 남기지 않는다. 경기 이름은 길어질 수 있으므로 한 줄로 자르고, 승률은 줄바꿈 없이 한 줄로 둔다. 머리글과 값은 같은 표의 같은 칸이라 따로 맞출 것이 없다. */ .pd-picks .pd-pick-table .pd-col-rank { width: 58px; } .pd-picks .pd-pick-table .pd-col-tipster { width: 22%; } .pd-picks .pd-pick-event { width: 34%; max-width: 360px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-picks .pd-pick-choice { width: 18%; text-align: center; } .pd-picks .pd-pick-rate { width: 92px; white-space: nowrap; } /* 적중·비적중 줄. 롤모델도 줄 전체에 색을 준다 */ .pd-pick-win { background: #eefaf0; } .pd-pick-lose { background: #fdf1ee; } .pd-pick-void { background: #f5f6f8; } /* ── Picks · 순위표의 "내 줄" (rev189 · rev191) ───────────────── 여기서 파랑은 **오직 지금 로그인한 사람**을 뜻한다. 그동안 내 줄은 녹색이었다(`.pd-rank-row.is-me`, 위쪽). 그런데 같은 표 에서 녹색은 이미 **적중(WIN)** 을 뜻한다 — 내 줄이면서 지지 않은 줄은 두 가지 뜻이 한 색으로 겹쳐, 녹색 줄이 "내 줄"인지 "맞힌 줄"인지 구분되지 않았다. 그래서 사람 표시만 파랑으로 옮긴다. 녹색·빨강은 결과의 뜻으로 남는다. rev191 — 순위표(`ranking.html` · `.pd-rank-board`)도 **같은 규칙**을 쓴다. 순위표에는 다크 재정의가 하나도 없어 어두운 화면에서 라이트용 연녹색 `#f2faf5` 가 그대로 남았고(밝은 줄 + 밝은 글자), 같은 뜻이 화면마다 다른 색으로 보였다. 값을 새로 만들지 않고 아래 선택자에 순위표 범위를 한 줄씩 더 적는다 — Picks 쪽 선언은 그대로라 Picks 화면은 한 픽셀도 바뀌지 않는다. T.O.P3(`.pd-top`) · 레벨 랭킹(`.pd-level`) · 프로필은 이번 범위가 아니라 기존 규칙 그대로다. 사이트 토큰에는 파란색이 없다(`--t3-navy` 는 슬립 머리글용 짙은 회남색 이라 배경으로 쓰면 내 줄이 그냥 어두운 줄로 보인다). 그래서 이 범위 안에서만 쓰는 이름을 새로 둔다 — 값은 라이트·다크 두 벌뿐이고, 테마 전환은 `html[data-theme]` 이 이 이름을 바꿔 끼우는 것으로 끝난다 (JavaScript 없음). */ .pd-picks, .pd-rank-board { --pd-me-bg: #eff6ff; --pd-me-bg-hover: #dbeafe; --pd-me-line: #2563eb; --pd-me-nick: #1d4ed8; --pd-me-nick-hover: #1e40af; } html[data-theme="dark"] .pd-picks, html[data-theme="dark"] .pd-rank-board { --pd-me-bg: #17263a; --pd-me-bg-hover: #1d3150; --pd-me-line: #3b82f6; --pd-me-nick: #60a5fa; --pd-me-nick-hover: #93c5fd; } /* 줄 바탕과 왼쪽 선. 방식은 전과 같다(줄에 건 `inset` 그림자) — 색만 바뀐다. `.pd-pick-win` 같은 결과 바탕보다 이름 수가 많아 내 줄에서는 파랑이 남는다. */ .pd-picks .pd-rank-row.is-me, .pd-rank-board .pd-rank-row.is-me, html[data-theme="dark"] .pd-picks .pd-rank-row.is-me, html[data-theme="dark"] .pd-rank-board .pd-rank-row.is-me { background: var(--pd-me-bg); box-shadow: inset 3px 0 0 var(--pd-me-line); } .pd-picks .pd-rank-row.is-me .pd-nick, .pd-rank-board .pd-rank-row.is-me .pd-nick { font-weight: 700; color: var(--pd-me-nick); } /* 이름에 마우스를 얹어도 파랑 안에서만 움직인다 — 기본 규칙은 녹색이라 여기서만 눌러 둔다(녹색은 적중의 뜻이다). */ .pd-picks .pd-rank-row.is-me .pd-nick:hover, .pd-rank-board .pd-rank-row.is-me .pd-nick:hover { color: var(--pd-me-nick-hover); } /* 짚어 보는 줄. 일반 줄의 hover 는 이미 `:not(.is-me)` 로 비켜 있으므로 내 줄 바탕을 덮지 않는다. 왼쪽 선은 그대로 남는다. */ .pd-picks .pd-rank-row.is-me:hover, .pd-rank-board .pd-rank-row.is-me:hover, html[data-theme="dark"] .pd-picks .pd-rank-row.is-me:hover, html[data-theme="dark"] .pd-rank-board .pd-rank-row.is-me:hover { background: var(--pd-me-bg-hover); box-shadow: inset 3px 0 0 var(--pd-me-line); } /* 결과의 뜻은 그대로 지킨다. 내 줄에서는 줄 바탕이 파랑이라 WIN 의 연녹색·LOSE 의 연분홍이 보이지 않는다. 그 뜻을 잃지 않도록 **그 줄의 Status 칸 글자**에만 원래 의미색을 준다 — 값은 사이트가 이미 쓰는 승·패 토큰이라 라이트·다크가 함께 맞는다. 다른 줄의 WIN·LOSE 규칙은 한 글자도 건드리지 않았고, PENDING·VOID 는 규칙을 두지 않아 기존 중립색 그대로다. */ .pd-picks .pd-rank-row.is-me.pd-pick-win > td:last-child .pd-cell { color: var(--t3-green-text, #0f7a35); font-weight: 700; } .pd-picks .pd-rank-row.is-me.pd-pick-lose > td:last-child .pd-cell { color: var(--t3-danger, #b42318); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════ 쪽 이동 — 화면 공통 (rev225) Tipster Picks & Predictions · Ranking · Picks(그리고 같은 마크업을 쓰는 픽 모음 · 레벨 랭킹 · My Picks)가 **이 한 벌**을 쓴다. 화면마다 같은 CSS 를 베껴 두지 않는다. 넓은 화면 « ‹ 1 2 [3] 4 5 › » 숫자형 좁은 화면 ‹ 3 / 12 › 현재/전체형 한 쪽뿐 아무것도 그리지 않는다 (마크업 자체를 만들지 않는다 — 숨기는 것이 아니다. 조건은 각 템플릿의 `cond` 다.) 숫자와 요약(`3 / 12`)은 **둘 다 마크업에 있고**, 폭에 따라 한쪽만 보인다. 자리·주소·파라미터는 예전 그대로다 — 모양만 정한다. 색은 사이트 토큰이라 라이트·다크가 한 벌로 따라온다. */ .pd-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 18px 0 0; } .pd-page { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--t3-border, #dfe3e8); border-radius: 8px; background: var(--t3-surface, #ffffff); color: var(--t3-text-2, #5a6b80); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; } /* 탭·검색과 같은 녹색이다 (rev115) — 한 화면에 두 가지 강조색을 두지 않는다. */ .pd-page:hover { border-color: var(--t3-green, #0f7a35); color: var(--t3-green-text, #0f7a35); } .pd-page:focus-visible { outline: 2px solid var(--t3-green, #0f7a35); outline-offset: 1px; } .pd-page.is-current { background: var(--t3-green, #0f7a35); border-color: var(--t3-green, #0f7a35); color: #ffffff; font-weight: 700; } /* 갈 곳이 없는 방향은 **링크가 아니다**(span 으로 그린다). 눌리지 않고, 손가락 커서도 hover 도 주지 않는다. */ .pd-page.is-off { color: var(--t3-text-3, #a3adb8); border-color: var(--t3-border-soft, #eef0f3); background: transparent; cursor: default; } .pd-page.is-off:hover { border-color: var(--t3-border-soft, #eef0f3); color: var(--t3-text-3, #a3adb8); } /* 사이에 낀 말줄임 — 단추가 아니다. */ .pd-page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 34px; color: var(--t3-text-3, #a3adb8); font-size: 13px; } /* 좁은 화면에서만 쓰는 `3 / 12`. */ .pd-page-sum { display: none; } @media (max-width: 767px) { /* 숫자와 처음·끝은 접고, 앞뒤 한 칸과 요약만 남긴다. */ .pd-pager .pd-page-num, .pd-pager .pd-page-edge, .pd-pager .pd-page-gap { display: none; } .pd-pager { gap: 10px; } .pd-pager .pd-page { min-width: 44px; height: 40px; font-size: 15px; } .pd-page-sum { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 40px; color: var(--t3-text, #2b3440); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } } @media (max-width: 640px) { /* 칸은 하나도 지우지 않는다. 지우면 회원이 그 값을 확인할 방법이 없다. 대신 상자와 글자를 줄여 일곱 칸을 그대로 담는다. */ .pd-rank-table th, .pd-rank-table td { padding: 8px 3px; font-size: 12px; } .pd-rank-table td { height: 42px; } .pd-cell { min-width: 0; padding: 4px 6px; font-size: 12px; } .pd-col-rank { width: 32px; } .pd-col-tipster { width: auto; } .pd-avatar { width: 22px; height: 22px; margin-right: 5px; } .pd-avatar-empty { line-height: 22px; } .pd-nick { font-size: 13px; } /* 상단 두 줄 — 폭이 모자라면 검색이 아래로 내려간다. 내려가도 입력창과 단추는 한 줄에 붙어 있다 (rev101). */ .pd-rank-head .pd-rank-search { flex: 1 1 100%; } .pd-rank-head .pd-rank-input { flex: 1 1 auto; width: auto; } /* 순위표 화면(rev108) — 좁은 화면 값. 칸은 일곱 개 그대로다. 지우거나 줄이지 않고, 표가 상자보다 넓어지면 `.pd-rank-card` 안에서 가로로 민다. 글자는 한 단계까지만 낮춘다 — 더 줄이면 표를 밀어 보는 의미가 없다. */ .pd-wrap.pd-rank-board { padding-left: 8px; padding-right: 8px; } .pd-rank-board .pd-rank-table thead th { height: 38px; padding: 0 6px; font-size: 12px; } .pd-rank-board .pd-rank-table td { height: 34px; padding: 8px 6px; font-size: 13px; } .pd-rank-board .pd-cell { font-size: 13px; } .pd-rank-board .pd-rank-no { min-width: 24px; height: 24px; font-size: 11.5px; } .pd-rank-board .pd-avatar { width: 27px; height: 27px; margin-right: 8px; } .pd-rank-board .pd-nick { font-size: 13px; } /* 1~3위도 같은 배지다 — 크기는 위 한 줄이 이미 정했다 (rev224). */ /* 아이콘 때문에 닉네임 줄이 두 줄이 되지 않게 한다. 비율은 그대로다. */ .pd-rank-board .pd-lv .xe_experience_level_icon { margin-right: 4px; max-height: 16px; } /* 알약과 검색. 검색은 통째로 다음 줄에 서고, 그때도 입력창과 단추는 붙어 있다(위 `.pd-rank-head` 규칙). 폭 고정을 풀어 줄을 꽉 채운다. */ /* 좁은 화면 값도 네 화면이 함께 쓴다 (rev115) */ .pd-rank-tab a { height: 31px; padding: 0 11px; font-size: 12px; } .pd-rank-input, .pd-rank-btn { height: 31px; font-size: 12px; } .pd-rank-btn { padding: 0 12px; } .pd-rank-board .pd-rank-search, .pd-picks .pd-rank-search { width: auto; } .pd-rank-board .pd-rank-head { gap: 8px; } } /* ═════════════════════════════════════════════════════════════ MY PICKS — 베팅 내역 (rev64, 롤모델 betting_list 기준) 줄 하나가 참여 하나다. 접힌 줄은 네 칸 + 펼침 단추, 펼치면 경기 줄과 요약 줄이 그 아래로 열린다. 머리글 진한 회색 바탕(#3f4040) · 흰 글씨 접힌 줄 흰 바탕 펼친 머리 진한 바탕 + 노란 글씨 — 지금 열려 있는 줄을 가린다 요약 줄 노란 바탕(#ffd800) — 금액이 한눈에 들어와야 한다 ═════════════════════════════════════════════════════════════ */ /* 폭은 목록 화면과 같게 맞춘다 (rev64). `.pd-wrap` 기본값(960px 가운데 정렬)을 그대로 쓰면 My Picks 만 좁게 나와, 목록에서 넘어온 회원이 화면이 바뀐 것처럼 느낀다. 레이아웃이 주는 폭(현재 1280px)을 그대로 쓰고 위·좌우 여백을 없앤다. */ .pd-wrap.pd-picks { max-width: 1400px; padding: 0 0 16px; } /* ⚠ rev93 — `.pd-picks .pd-head` · `.pd-picks .pd-actions` 를 지웠다. My Picks · Picks 화면의 머리글 줄이 사라져 걸릴 요소가 없다. `.pd-head` · `.pd-actions` 일반 규칙은 남는다 — 프로필·레벨 랭킹이 쓴다. */ .pd-picks-table { border: 1px solid #cccccc; border-top: 0; background: #ffffff; } /* 여섯 칸. 머리글과 줄이 같은 격자를 쓴다 — 한 곳만 바뀌면 어긋난다. */ .pd-picks-head, .pd-pk-row { display: grid; grid-template-columns: 190px 1fr 96px 76px 120px 90px 96px; align-items: stretch; } /* 남의 내역에는 취소 칸이 없다 (rev94). 칸이 하나 줄면 격자도 함께 줄여야 머리글과 줄이 어긋나지 않는다. */ .pd-picks-table.is-readonly .pd-picks-head, .pd-picks-table.is-readonly .pd-pk-row { grid-template-columns: 190px 1fr 96px 76px 120px 90px; } /* 머리글 띠는 랭킹 · T.O.P3 와 **같은 표**로 읽혀야 한다 (rev147). 여기만 `#3f4040` · 12px · normal 이라 사이트 안에서 같은 자리의 띠가 두 벌이 됐다. 값을 새로 만들지 않고 `.pd-rank-board .pd-rank-table thead th` 가 쓰는 것을 그대로 가져온다. 칸 나눔(grid)과 본문 줄은 건드리지 않는다 — 바뀌는 것은 이 띠 하나다. */ .pd-picks-head { background: #4a4f57; color: #ffffff; } .pd-pk-th { display: flex; align-items: center; justify-content: center; height: 43px; font-size: 13px; font-weight: 600; } .pd-picks-item + .pd-picks-item { border-top: 1px solid #dddddd; } .pd-pk-row > * { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; box-sizing: border-box; font-size: 12px; color: #333333; } .pd-pk-match { justify-content: center; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-pk-stake { font-variant-numeric: tabular-nums; } .pd-pk-date { color: #666666; font-variant-numeric: tabular-nums; } /* 고른 것. 짧아서 눈에 먼저 들어와야 하는 칸이다. */ /* 색을 두지 않는다. 줄의 기본 글자색(#333333)을 그대로 물려받는다 — 이 표에서 색이 뜻을 갖는 곳은 결과 칸 하나뿐이어야 한다. */ .pd-pk-pick { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .pd-pk-odds { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── 결과에 따른 줄 색 (rev77) ──────────────────────────────── 연한 바탕만 깔고 글자는 원래 색을 쓴다. 바탕을 진하게 하면 글자가 묻히고, 스무 줄이 이어지면 표가 읽히지 않는다. 판정 전(Waiting)과 무효·취소는 색을 두지 않는다 — 색 자체가 "맞았다/틀렸다" 라서, 판정이 없는 줄에 칠하면 없는 뜻이 생긴다. */ .pd-picks-item.is-win .pd-pk-row { background: #eaf6ec; } .pd-picks-item.is-lose .pd-pk-row { background: #fdecec; } .pd-picks-item.is-win .pd-pk-state { color: #1c7a33; font-weight: 700; } .pd-picks-item.is-lose .pd-pk-state { color: #c0272d; font-weight: 700; } .pd-picks-item.is-none .pd-pk-state { color: #777777; } /* 취소 칸 (rev65). 네 상태 중 하나만 그려진다. */ .pd-pk-cancel-btn { padding: 5px 12px; border: 0; background: #eb2629; color: #ffffff; font-size: 12px; font-weight: bold; cursor: pointer; } .pd-pk-cancel-btn:hover { background: #c81f22; } .pd-pk-cancel-btn[disabled] { background: #bbbbbb; cursor: default; } .pd-pk-cancel-off { color: #999999; } .pd-pk-cancel-done { color: #cc0000; font-weight: bold; } .pd-picks-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0; } .pd-pk-page { display: inline-block; min-width: 24px; padding: 5px 10px; background: #f2f2f2; color: #666666; font-size: 12px; text-align: center; text-decoration: none; } .pd-pk-page:hover { background: #e6e6e6; } .pd-pk-page.is-current { background: #ffffff; color: #cc6600; font-weight: bold; } .pd-pk-page.is-off { color: #bbbbbb; } @media (max-width: 640px) { .pd-wrap.pd-picks { padding-left: 8px; padding-right: 8px; } .pd-picks-head, .pd-pk-row { grid-template-columns: 76px 1fr 56px 48px 56px 48px 58px; } .pd-picks-table.is-readonly .pd-picks-head, .pd-picks-table.is-readonly .pd-pk-row { grid-template-columns: 76px 1fr 56px 48px 56px 48px; } .pd-pk-row > * { font-size: 11px; padding: 0 3px; } /* 좁은 화면에서도 랭킹 머리글과 같은 값이다(38px · 12px). */ .pd-pk-th { height: 38px; font-size: 12px; } .pd-pk-pick, .pd-pk-odds { font-size: 11px; } /* 좁은 화면에서는 경기 줄을 접는다 — 여덟 칸은 들어가지 않는다. 시각·리그·상태를 빼고 고른 쪽이 보이게 남긴다. */ /* 좁은 화면에서 보이는 것은 종류·홈·기준·원정 네 칸뿐이다 (시각·리그·상태는 아래에서 감춘다). 칸 수를 그 넷에 맞춘다. */ } /* ═════════════════════════════════════════════════════════════ 팁스터 상세 — 베팅 내역 표 (rev96, 참고 화면 `docs/2.png`) `My Picks` 의 격자(.pd-picks-table)와 **따로 둔다.** 저쪽은 회원이 자기 것을 취소하는 목록이고 이쪽은 성적을 보여주는 표다. 한 벌로 묶으면 한쪽 칸을 고칠 때 다른 화면이 함께 움직인다. 줄 색이 결과를 말한다 — 적중 초록 · 미적중 붉은색. 판정이 없는 줄은 흰색 그대로다. ═════════════════════════════════════════════════════════════ */ .pd-bet-table { width: 100%; margin-top: 10px; border-collapse: collapse; border: 1px solid #cfd6de; background: #ffffff; font-size: 13px; } .pd-bet-table thead th { height: 40px; padding: 0 8px; border: 1px solid #4a4a4a; background: #3f4040; color: #ffffff; font-size: 12px; font-weight: normal; text-align: center; } .pd-bt-row > td { height: 44px; padding: 0 8px; border: 1px solid #dde3ea; color: #333333; text-align: center; } /* 칸 폭. 경기명만 남는 자리를 가져간다. */ .pd-bt-no { width: 56px; color: #8b95a1; } .pd-bt-date { width: 96px; white-space: nowrap; } /* rev101 — 경기명을 가운데로, 굵기는 뺀다. 굵은 글씨가 줄마다 있으면 정작 강조해야 할 결과 배지가 묻힌다. 링크·색은 그대로다. */ .pd-bt-match { text-align: center; font-weight: normal; } .pd-bt-pick { width: 110px; } .pd-bt-stake { width: 130px; font-variant-numeric: tabular-nums; } .pd-bt-odds { width: 84px; font-variant-numeric: tabular-nums; } .pd-bt-state { width: 96px; } .pd-bt-del { width: 62px; } /* rev105 — 팁스터 상세의 Pick 칸이 두 줄로 접히던 것을 편다. `STL Cardinals +1.5` 처럼 팀명 뒤에 핸디캡 선이 붙는 픽이 110px 에 들어가지 않아 선만 아랫줄로 내려가고 있었다. 글자를 줄이거나 팀명을 자르지 않는다 — 칸을 넓히고 줄바꿈을 막는다. 출력값은 그대로다. Match 는 폭을 지정하지 않은 채 두어 남는 자리를 그대로 가져간다. Pick 이 가져간 만큼만 줄어들고, Placed·Stake·Odds·Result 칸의 px 폭은 건드리지 않는다. `min-width` 는 `Bayer Leverkusen vs Borussia Mönchengladbach` 같은 긴 경기명이 눌리지 않게 하는 바닥값이다. ⚠ `.pd-profile` 안으로 한정한다. 같은 `.pd-bet-table` 을 쓰는 View Profile(`.pd-mp-picks`)은 짧은 표기(`pick_short`)를 그리는 좁은 표라 여기 값을 물려받으면 안 된다. */ .pd-profile .pd-bt-match { min-width: 320px; } .pd-profile .pd-bt-pick { width: 17%; min-width: 150px; white-space: nowrap; } .pd-bt-row.is-win > td { background: #d9f2dd; } .pd-bt-row.is-lose > td { background: #f8cfcb; } /* ── 상태 배지 ─────────────────────────────────────────────── */ /* 낱말이 곧 저장된 상태다. 색만 다르고 말은 바꾸지 않는다. */ /* 상태 (rev145 — 알약을 푼다). 낱말이 곧 저장된 상태다. 말은 바꾸지 않고 **표현만** 푼다 — 조회용 값이 흰 알약을 두르고 있어 누를 수 있는 것처럼 보였다. 뜻은 색이 진다. 채움을 걷어도 초록 = 적중, 빨강 = 실패, 회색 = 대기가 그대로다. 굵기와 글자 간격은 남겨 두어 상태 표시로 읽히게 한다. 고정 폭(74px)은 걷는다 — 칸 정렬은 표가 갖고 있다. */ .pd-bt-badge { display: inline-block; padding: 0; border: 0; border-radius: 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: .02em; } .pd-bt-badge.is-PENDING { color: #5a6b80; } .pd-bt-badge.is-WIN { color: #1c7a33; } .pd-bt-badge.is-LOSE { color: #c0272d; } .pd-bt-badge.is-CANCELLED { color: #777777; } .pd-bt-badge.is-VOID { color: #777777; } /* ── 운영자 삭제 ───────────────────────────────────────────── */ .pd-bt-del-btn { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: #eb2629; color: #ffffff; font-size: 15px; line-height: 1; cursor: pointer; } .pd-bt-del-btn:hover { background: #c81f22; } .pd-bt-del-btn[disabled] { background: #bbbbbb; cursor: default; } @media (max-width: 640px) { /* 칸을 지우지 않는다 — 지우면 그 값을 확인할 방법이 없다. 상자와 글자만 줄여 여덟 칸을 그대로 담는다. */ .pd-bet-table { font-size: 11px; } .pd-bet-table thead th { height: 32px; padding: 0 3px; font-size: 10px; } .pd-bt-row > td { height: 36px; padding: 0 3px; } .pd-bt-no { width: 34px; } .pd-bt-date { width: 62px; } .pd-bt-pick { width: 62px; } .pd-bt-stake { width: 72px; } .pd-bt-odds { width: 52px; } .pd-bt-state { width: 66px; } .pd-bt-del { width: 40px; } .pd-bt-badge { min-width: 0; padding: 2px 5px; font-size: 9px; } .pd-bt-del-btn { width: 22px; height: 22px; font-size: 13px; } /* ⚠ rev226 — `.pd-profile` 의 Match·Pick 바닥값(200px · 130px)을 지웠다. 767px 아래에서는 팁스터 상세의 표 자체를 그리지 않고 카드 목록을 쓰므로(맨 아래 블록) 걸릴 요소가 없다. View Profile(`.pd-mp-picks`) 은 계속 표라서 위쪽 `.pd-bt-*` 규칙은 그대로 둔다. */ /* 좁은 화면에서는 제목이 길어 단추가 다음 줄로 내려간다. 겹치지 않게 줄 간격만 준다 — 글자를 줄이면 닉네임이 잘린다 (rev101). */ .pd-profile .pd-picks-title { row-gap: 6px; } .pd-profile .pd-picks-title-text { font-size: 13px; } } /* ═════════════════════════════════════════════════════════════ VIEW PROFILE — 팁스터의 이번 달 성적 화면 (rev103, 참고 화면 `docs/1.png` · `docs/2.png`) ⚠ 선택자는 전부 `.pd-mp` 안으로 한정한다. 이 화면은 회원 모듈의 자리에 그려지므로, 밖으로 새는 규칙 하나가 곧 회원 화면 전체를 망가뜨린다. 픽 표(`.pd-bet-table`)는 팁스터 상세와 **같은 것**을 그대로 쓴다 — 여기서 다시 칠하지 않는다. ═════════════════════════════════════════════════════════════ */ .pd-wrap.pd-mp { max-width: 1400px; padding: 0 0 16px; } /* ── ① 팁스터 ────────────────────────────────────────────────── */ /* 아이콘과 닉네임은 세로 가운데로 선다. 사이 간격은 아이콘이 작아진 만큼(44px 동그라미 → 22×16 레벨 아이콘) 10px 에서 7px 로 줄인다. */ .pd-mp-head { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; } /* ⚠ rev227 — `.pd-avatar-lg` 규칙을 지웠다. 템플릿에서 프로필 사진·첫 글자 동그라미를 빼고 경험치 레벨 아이콘으로 바꿨으므로 이 화면에는 걸릴 요소가 없다. `.pd-avatar` 자체는 다른 화면이 계속 쓴다. */ /* 레벨 아이콘 자리 (rev227). 아이콘은 애드온이 넣는 `` 하나다. 크기는 **원본 그대로** 둔다 — `max-height` 는 아이콘 세트가 바뀌어도 줄 높이가 뛰지 않게 하는 안전선이고, 지금 세트(josun, 22×16)에는 걸리지 않는다. 늘리지 않으므로 비율이 찌그러질 일도 없다. 경험치가 없는 회원은 애드온이 아무것도 넣지 않는다. 그때 빈 span 이 남으면 `gap` 만큼 닉네임이 밀리므로 자리째 접는다. */ .pd-mp .pd-mp-head .pd-lv { display: inline-flex; align-items: center; } .pd-mp .pd-mp-head .pd-lv:empty { display: none; } .pd-mp .pd-mp-head .xe_experience_level_icon { margin: 0; max-height: 22px; width: auto; vertical-align: middle; } .pd-mp-nick { margin: 0; font-size: 20px; font-weight: 700; color: #2b3440; word-break: break-all; } /* ── 좁은 화면에서 표를 자르지 않고 민다 ───────────────────── 칸을 지우면 그 값을 확인할 방법이 없다. 표는 그대로 두고 상자만 가로로 스크롤시킨다. */ .pd-mp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── ② 이번 달 성적 요약 (한 줄) ─────────────────────────────── */ .pd-mp-scroll-sum { margin-top: 10px; } .pd-mp-sum { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: #2b3440; } .pd-mp-sum th { height: 40px; padding: 0 8px; text-align: center; border: 1px solid #4a4a4a; background: #3f4040; color: #ffffff; font-weight: 600; } .pd-mp-sum td { height: 44px; padding: 0 8px; text-align: center; border: 1px solid #dde3ea; background: #ffffff; font-size: 15px; font-variant-numeric: tabular-nums; } /* 승·패 칸의 괄호 비율 (rev242). 숫자보다 작고, 뜻은 사이트가 이미 쓰는 초록·빨강(`--t3-green-text` · `--t3-danger`)이다 — 새 색을 만들지 않는다. 숫자 아래 줄로 내려 칸이 옆으로 넓어지지 않게 한다. */ .pd-mp-ratio { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; } .pd-mp-ratio.is-win { color: var(--t3-green-text, #1c7a33); } .pd-mp-ratio.is-lose { color: var(--t3-danger, #c0272d); } /* ── ③ 이번 달 Picks ─────────────────────────────────────────── */ /* 제목 = [달력 아이콘][Period] 한 줄 (rev227). 간격 7px 은 참고 화면 (`docs/1.png`, 6~8px)의 값이다. */ .pd-mp-title { display: flex; align-items: center; gap: 7px; margin: 26px 0 0; font-size: 15px; font-weight: 700; color: #2b3440; } /* 상단 요약 제목 `All Time Summary` (rev242). 아래 `Period` 제목과 같은 규칙을 쓰고, 첫 덩이라 위 여백만 좁게 둔다. (rev243 — 제목 아래 설명 한 줄은 제목이 이미 같은 말을 해서 지웠다.) */ .pd-mp-title.pd-mp-title-sum { margin-top: 18px; } /* 아이콘칸 — T.O.P3 섹션 제목(`.pd-top-ico`)과 **같은 그리기 방식·같은 색**이다 (인라인 SVG · 선만 · currentColor · 강조 초록). 다른 것은 크기(16px)뿐이라, 두 화면의 섹션 제목이 한 벌로 읽힌다 (rev228). */ .pd-mp-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--t3-green-text, #0f7a35); } .pd-mp-ico svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pd-mp-table { width: 100%; min-width: 640px; margin-top: 10px; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: #2b3440; } .pd-mp-table thead th { height: 40px; padding: 0 8px; border: 1px solid #4a4a4a; background: #3f4040; color: #ffffff; font-weight: 600; } .pd-mp-row > td { height: 42px; padding: 0 8px; text-align: center; border: 1px solid #dde3ea; background: #ffffff; } .pd-mp-table .pd-mp-month { width: 16%; } .pd-mp-table .pd-mp-rate { width: 30%; } .pd-mp-table .pd-mp-odds { width: 15%; font-variant-numeric: tabular-nums; } .pd-mp-table .pd-mp-profit { width: 22%; font-variant-numeric: tabular-nums; } .pd-mp-table .pd-mp-more { width: 17%; } /* 펼침 단추. 참고 화면과 같이 글자 링크처럼 보인다. */ .pd-mp-toggle { padding: 4px 8px; border: 0; background: none; color: #2f6fdb; font-size: 13px; white-space: nowrap; cursor: pointer; } .pd-mp-toggle:hover { text-decoration: underline; } /* 이번 달 픽이 없을 때. 누를 것이 없으므로 단추로 보이지 않게 둔다. */ .pd-mp-none { color: #9aa4b1; font-size: 13px; white-space: nowrap; } /* `hidden` 을 확실히 듣게 한다. 테마 CSS 가 `tr { display: table-row }` 를 두면 브라우저 기본 `[hidden]` 규칙이 그것에 밀려 접힌 줄이 펼쳐진 채 뜬다. */ .pd-mp-picks[hidden] { display: none; } /* 펼침 줄. 안쪽 표가 자기 테두리를 가지므로 칸 여백만 준다. */ .pd-mp-picks > td { padding: 0 0 6px; border: 1px solid #dde3ea; border-top: 0; background: #ffffff; } .pd-mp-picks .pd-bet-table { margin-top: 0; min-width: 720px; } /* 손익 칸. 팁스터 상세 표에는 없던 칸이라 여기서만 폭을 준다. */ .pd-mp-picks .pd-bt-profit { width: 110px; font-variant-numeric: tabular-nums; } /* Pick 칸 (rev234). 짧은 표기(`1 · 2 +1.5`) 대신 저장된 제목 (`Atletico Madrid +1.5`)을 적게 되어 110px 에서는 두 줄로 접혔다. 팁스터 상세(`.pd-profile .pd-bt-pick`)와 **같은 처리**를 쓴다 — 팀 이름을 자르지 않고 칸을 넓히고 줄바꿈만 막는다. 이 표는 이미 720px 바닥값을 갖고 좁은 화면에서는 상자가 옆으로 밀리므로, 다른 칸의 px 폭은 건드리지 않는다. */ .pd-mp-picks .pd-bt-pick { width: 150px; min-width: 150px; white-space: nowrap; } .pd-mp .pd-hint { margin-top: 10px; } @media (max-width: 640px) { .pd-wrap.pd-mp { padding: 0 8px 8px; } .pd-mp-nick { font-size: 17px; } /* ⚠ rev227 — 좁은 화면의 `.pd-avatar-lg` 크기 규칙도 함께 지웠다. 레벨 아이콘은 원본 크기(22×16) 그대로라 폭에 따라 줄일 것이 없다. */ .pd-mp-sum, .pd-mp-table { font-size: 12px; } .pd-mp-sum th { height: 34px; padding: 0 4px; } .pd-mp-sum td { height: 38px; padding: 0 4px; font-size: 13px; } .pd-mp-table thead th { height: 34px; padding: 0 4px; font-size: 11px; } .pd-mp-row > td { height: 36px; padding: 0 4px; } /* 펼침 단추가 손익 칸과 붙지 않게 한다 — 좁아져도 겹치지 않는다. */ .pd-mp-toggle, .pd-mp-none { padding: 4px 2px; font-size: 12px; } .pd-mp-picks .pd-bt-profit { width: 74px; } } /* ═════════════════════════════════════════════════════════════ 다크 모드 (rev142) ───────────────────────────────────────────────────────────── 라이트 규칙은 한 줄도 건드리지 않는다 ───────────────────────────────────────────────────────────── 위의 모든 규칙은 그대로 두고, `html[data-theme="dark"]` 이 붙었을 때만 색을 덮는다. 그래서 라이트 모드의 보기는 이 블록이 있으나 없으나 같다. 변수는 공통 레이아웃(`userCSS.html`)이 정의한다 — 사이트와 Prediction 이 같은 색표를 쓰게 하려는 것이고, 여기서 다시 정의하면 두 벌이 갈린다. 변수가 없는 화면(관리자 등)에서는 이 블록의 선택자가 아예 걸리지 않는다. ⚠ 뜻이 있는 색은 그대로다. 고른 배당 · 활성 SUBMIT → 초록 채움 `#0f7a35` + 흰 글자 비활성 SUBMIT → 회색 (누를 수 없음이 분명해야 한다) 경고 · 실패 → 붉은 계열 초록 **글자**만 어두운 바탕에서 읽히도록 한 단계 밝게 쓴다. ═════════════════════════════════════════════════════════════ */ /* ── 바탕과 카드 ───────────────────────────────────────────── */ html[data-theme="dark"] .pd-wrap.pd-sports-page { background: var(--t3-bg); } /* 걸린 경기가 없을 때 나오는 빈 카드(`.pd-empty`)도 리그 카드와 **같은 옷**이다 — 흰 바탕 · 같은 테두리 · 같은 라운드(rev148). 여기 빠져 있어 0 개인 종목을 고르면 어두운 바탕에 흰 판만 남았다. 새 값을 만들지 않고 같은 줄에 세운다 — 카드 색을 바꾸는 날 이 하나만 뒤처지지 않게. */ html[data-theme="dark"] .pd-sports-page .pd-league, html[data-theme="dark"] .pd-sports-page .pd-empty, html[data-theme="dark"] .pd-sports-page .pd-slip { background: var(--t3-surface); border-color: var(--t3-border); box-shadow: none; } html[data-theme="dark"] .pd-sports-page .pd-slip-form { background: var(--t3-surface); } /* 위쪽 초록 띠는 테마와 무관하게 같은 값이다 — 고른 배당 칸이 두 테마 에서 같은 초록을 쓰는 것과 같은 원칙("뜻이 같으면 색도 같다"). */ html[data-theme="dark"] .pd-sports-page .pd-slip { border-top-color: var(--t3-green, #0f7a35); } /* ── 검색과 종목 칩 ────────────────────────────────────────── */ html[data-theme="dark"] .pd-sports-page .pd-search-input { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text); } html[data-theme="dark"] .pd-sports-page .pd-search-input::placeholder { color: var(--t3-text-3); } html[data-theme="dark"] .pd-sports-page .pd-chip { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text-2); } html[data-theme="dark"] .pd-sports-page .pd-chip:hover { border-color: var(--t3-green-text); color: var(--t3-green-text); } /* 고른 종목은 라이트와 같은 초록 채움이다 — 뜻이 있는 색이다. */ html[data-theme="dark"] .pd-sports-page .pd-chip.is-active { background: #0f7a35; border-color: #0f7a35; color: #ffffff; } /* ── 리그 바와 표 머리글 ───────────────────────────────────── */ html[data-theme="dark"] .pd-sports-page .pd-league-head { background: var(--t3-surface-2); border-bottom-color: var(--t3-border); border-left-color: #0f7a35; } html[data-theme="dark"] .pd-sports-page .pd-league-name, html[data-theme="dark"] .pd-sports-page .pd-league-head a { color: var(--t3-text); } html[data-theme="dark"] .pd-sports-page .pd-thead { background: transparent; border-bottom-color: var(--t3-border-soft); } html[data-theme="dark"] .pd-sports-page .pd-th { color: var(--t3-text-3); } /* ── 경기 줄 ──────────────────────────────────────────────── */ html[data-theme="dark"] .pd-sports-page .pd-row { border-bottom-color: var(--t3-border-soft); } html[data-theme="dark"] .pd-sports-page .pd-td, html[data-theme="dark"] .pd-sports-page .pd-time-main { color: var(--t3-text-2); } html[data-theme="dark"] .pd-sports-page .pd-kind { background: var(--t3-surface-2); color: var(--t3-text-2); } html[data-theme="dark"] .pd-sports-page .pd-mid-vs { color: var(--t3-text-3); } html[data-theme="dark"] .pd-sports-page .pd-expand { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text-2); } html[data-theme="dark"] .pd-sports-page .pd-expand:hover { border-color: var(--t3-green-text); color: var(--t3-green-text); } /* `Bet` 은 걸 수 있다는 뜻이다 — 초록을 지키되 어두운 바탕에서 읽히게 한다. */ html[data-theme="dark"] .pd-sports-page .pd-state-open { color: var(--t3-green-text); } /* ── 배당 칸 ──────────────────────────────────────────────── */ html[data-theme="dark"] .pd-sports-page .pd-pick { background: var(--t3-surface-2); border-color: var(--t3-border); } html[data-theme="dark"] .pd-sports-page .pd-pick-team, html[data-theme="dark"] .pd-sports-page .pd-pick-odds { color: var(--t3-text); } /* hover 는 **바탕을 채우지 않는다.** 채우면 고른 칸과 구별이 사라진다. */ html[data-theme="dark"] .pd-sports-page .pd-pick:hover { background: var(--t3-surface-3); border-color: var(--t3-green-text); } html[data-theme="dark"] .pd-sports-page .pd-pick[disabled], html[data-theme="dark"] .pd-sports-page .pd-pick[disabled]:hover { background: var(--t3-bg); border-color: var(--t3-border-soft); } html[data-theme="dark"] .pd-sports-page .pd-pick[disabled] .pd-pick-team, html[data-theme="dark"] .pd-sports-page .pd-pick[disabled] .pd-pick-odds, html[data-theme="dark"] .pd-sports-page .pd-joined { color: var(--t3-text-3); } /* 고른 칸 — 라이트와 **같은 초록 채움**이다. 뜻이 같으면 색도 같아야 한다. */ html[data-theme="dark"] .pd-sports-page .pd-pick.is-picked, html[data-theme="dark"] .pd-sports-page .pd-pick.is-picked:hover { background: #0f7a35; border-color: #0f7a35; } html[data-theme="dark"] .pd-sports-page .pd-pick.is-picked .pd-pick-team, html[data-theme="dark"] .pd-sports-page .pd-pick.is-picked .pd-pick-odds, html[data-theme="dark"] .pd-sports-page .pd-pick.is-picked .pd-marker { color: #ffffff; } /* ── PICK SLIP ────────────────────────────────────────────── */ html[data-theme="dark"] .pd-sports-page .pd-slip-head { background: var(--t3-navy); border-bottom-color: var(--t3-border); color: var(--t3-text); } html[data-theme="dark"] .pd-sports-page .pd-slip-empty { background: var(--t3-surface-2); border-color: var(--t3-green, #0f7a35); color: var(--t3-text-3); } html[data-theme="dark"] .pd-sports-page .pd-slip-chosen { background: var(--t3-surface-2); border-color: var(--t3-border); } html[data-theme="dark"] .pd-sports-page .pd-slip-match { color: var(--t3-text-2); } /* 라이트와 같은 뜻(초록 채움) — 어두운 바탕에서는 채움 대신 초록 글자로 (rev, PICK SLIP 색상 보강). */ html[data-theme="dark"] .pd-sports-page .pd-slip-kind { background: var(--t3-surface-3); color: var(--t3-green-text); } html[data-theme="dark"] .pd-sports-page .pd-slip-name { color: var(--t3-green-text); } html[data-theme="dark"] .pd-sports-page .pd-slip-clear { color: var(--t3-text-3); } html[data-theme="dark"] .pd-sports-page .pd-slip-line { border-bottom-color: var(--t3-border-soft); } html[data-theme="dark"] .pd-sports-page .pd-slip-label { color: var(--t3-text); } html[data-theme="dark"] .pd-sports-page .pd-slip-odds { color: var(--t3-text); } html[data-theme="dark"] .pd-sports-page .pd-slip-stake { background: transparent; border-color: transparent; color: var(--t3-text); } html[data-theme="dark"] .pd-sports-page .pd-slip-total { background: var(--t3-surface-2); border-left-color: var(--t3-green, #0f7a35); } html[data-theme="dark"] .pd-sports-page .pd-slip-return { color: var(--t3-green-text); } html[data-theme="dark"] .pd-sports-page .pd-amt { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text); } html[data-theme="dark"] .pd-sports-page .pd-amt:hover { border-color: var(--t3-green-text); color: var(--t3-green-text); } html[data-theme="dark"] .pd-sports-page .pd-amt.is-picked { background: #0f7a35; border-color: #0f7a35; color: #ffffff; } /* 활성 SUBMIT 은 초록 그대로. 비활성은 "누를 수 없음" 이 분명한 회색이다. */ html[data-theme="dark"] .pd-sports-page .pd-slip-submit:disabled { background: var(--t3-surface-3); border-color: var(--t3-border); color: var(--t3-text-3); } html[data-theme="dark"] .pd-sports-page .pd-slip-quota { background: var(--t3-surface-2); color: var(--t3-text-2); } html[data-theme="dark"] .pd-sports-page .pd-slip-error { background: var(--t3-danger-bg); border-color: var(--t3-danger-line); color: var(--t3-danger); } /* ── 랭킹 · Picks · T.O.P3 · 프로필 (같은 표를 쓴다) ────────── */ html[data-theme="dark"] .pd-wrap { color: var(--t3-text); } html[data-theme="dark"] .pd-rank-table, html[data-theme="dark"] .pd-picks-table, html[data-theme="dark"] .pd-table { background: var(--t3-surface); border-color: var(--t3-border); } html[data-theme="dark"] .pd-rank-table th { background: var(--t3-surface-2); color: var(--t3-text); } html[data-theme="dark"] .pd-rank-table td, html[data-theme="dark"] .pd-table th, html[data-theme="dark"] .pd-table td { border-bottom-color: var(--t3-border-soft); color: var(--t3-text); } html[data-theme="dark"] .pd-rank-board .pd-rank-table thead th { background: var(--t3-surface-2); color: var(--t3-text); } html[data-theme="dark"] .pd-rank-board .pd-rank-row:not(.is-me):hover > td { background: var(--t3-surface-2); } /* 순위 배지의 다크 보정은 없앴다 (rev224) — 색을 변수 한 벌 (`--pd-gold` …)로 두고 `html[data-theme="dark"] .pd-wrap` 에서 값만 바꾸므로, 화면마다·테마마다 규칙을 따로 두지 않는다. */ /* ── 팁스터 픽 표의 결과 줄 (rev155) ───────────────── `/picks`(`tipster_picks.html`) · 팁스터 픽 모음(`ranking_picks.html`) · T.O.P3(`top.html` · `ranking_top.html`) 가 함께 쓰는 표다. 네 화면 모두 `` 에 `` 를 그린다. 줄 클래스는 모델이 만든다 — `prediction.model.php` · `attachPick()` 의 `pd-pick- . strtolower($status)`. 그래서 템플릿에는 `result_status` 도 `result_tone` 도 글자로 남지 않는다. 밝은 바탕의 정체는 라이트의 세 줄(`prediction.css` · 위쪽)이고, 그동안 다크 재정의가 하나도 없었다. 줄(``)에 칠한 바탕은 표에 칠한 어두운 바탕을 덮어쓰므로, 글자만 `--t3-text` 로 올라가 연초록 · 연회색 위에 밝은 글자가 옆에 서는 꼴이 됐다. 값은 새로 만들지 않는다. 베팅 내역 표(`.pd-bt-row`)와 My Picks 가 이미 쓰는 어두운 승패색과 **같은 값**을 가져온다 — 한 사이트에서 같은 결과가 표마다 다른 색으로 말하면 안 된다. PENDING 은 규칙을 두지 않는다 — 표의 기본 바탕(`--t3-surface`)이 그대로 드러난다. 라이트에서도 PENDING 은 규칙이 없었다. 범위를 `.pd-pick-table` 안으로 가둔다. `.pd-pick-win` 같은 맨 이름은 짧아서 다른 곳에 같은 이름이 생기면 함께 물들기 때문이다. */ html[data-theme="dark"] .pd-pick-table .pd-pick-win { background: #14301f; } html[data-theme="dark"] .pd-pick-table .pd-pick-lose { background: #341c1e; } /* VOID 는 PENDING 과 같은 줄로 둔다 (rev156). 판정이 없었다는 뜻이라 따로 칠할 것이 없다. 다만 이 규칙을 **지울 수는 없다** — 라이트의 `.pd-pick-void { background:#f5f6f8 }` 가 다크에서 되살아나기 때문이다. 표 바탕이 그대로 비치게 눌러 두면 PENDING 과 한 색이 된다. */ html[data-theme="dark"] .pd-pick-table .pd-pick-void { background: transparent; } html[data-theme="dark"] .pd-nick { color: var(--t3-text); } html[data-theme="dark"] .pd-nick:hover { color: var(--t3-green-text); } html[data-theme="dark"] .pd-rank-tab a { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text-2); } html[data-theme="dark"] .pd-rank-tab.is-active a { background: #0f7a35; border-color: #0f7a35; color: #ffffff; } html[data-theme="dark"] .pd-rank-input { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text); } /* 달 고르개도 탭·검색창과 같은 어두운 값으로 (rev231). 화살표는 그림이라 색이 따라오지 않는다 — 어두운 바탕에서 보이는 회색으로 같은 그림을 한 번 더 준다. ⚠ 여기도 축약형 한 줄이다. 레이아웃 테마에 `html[data-theme="dark"] select { background: … }` 라는 **축약형** 규칙이 있어(userCSS.html), 이쪽을 longhand 로 쪼개 두면 두 규칙이 반쪽씩 섞일 여지가 남는다. 같은 형태로 맞춰 통째로 이긴다. */ html[data-theme="dark"] .pd-rank-month-select { border-color: var(--t3-border); color: var(--t3-text); background: var(--t3-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23a9b4c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center; background-size: 10px 6px; } /* 다크에서도 고른 값이 바탕과 같은 색으로 묻히지 않게 (일부 브라우저는 목록 항목 색을 따로 정해야 한다). */ html[data-theme="dark"] .pd-rank-month-select option { background: var(--t3-surface-2); color: var(--t3-text); } html[data-theme="dark"] .pd-empty, html[data-theme="dark"] .pd-empty-hint { color: var(--t3-text-3); } /* 마우스가 지나는 줄 (rev142 보강). 라이트의 `#fbfcfd` 는 흰색에 가까워 어두운 바탕에서 흰 띠가 된다. 같은 뜻(지금 보는 줄)을 어두운 쪽 값으로 옮긴다. */ html[data-theme="dark"] .pd-sports-page .pd-game:hover { background: var(--t3-surface-2); } html[data-theme="dark"] .pd-sports-page .pd-game + .pd-game, html[data-theme="dark"] .pd-sports-page .pd-row + .pd-row { border-top-color: var(--t3-border-soft); } /* ═════════════════════════════════════════════════════════════ 다크 보정 — 랭킹 · 팁스터 상세 · 프로필 (rev143) rev142 의 다크 블록은 `.pd-table`·`.pd-rank-table` 만 덮었다. 세 화면은 각자 **자기 표 클래스**를 쓴다 — 랭킹 숫자는 `.pd-cell`, 팁스터 상세는 `.pd-bet-table`, 프로필은 `.pd-mp-sum` · `.pd-mp-table` 이다. 그 자리에 라이트용 어두운 글자색이 그대로 남아 어두운 바탕에 묻혔다. 여기서 채우는 것은 **색뿐**이다. 열 구성·너비·행 높이·정렬은 손대지 않는다. ═════════════════════════════════════════════════════════════ */ /* ── ① 랭킹 본문 숫자 ────────────────────────────────────────── `.pd-rank-board .pd-cell` 이 `#37414f` 였다. 어두운 표 위에서 거의 보이지 않는다. 값은 회원명(`--t3-text`)보다 한 단계 여린 `--t3-text-2` 다 — 읽히되 이름과 손익보다 앞서 나서지 않는다. */ html[data-theme="dark"] .pd-rank-board .pd-cell { color: var(--t3-text-2); } html[data-theme="dark"] .pd-rank-board .pd-cell.pd-profit-flat { color: var(--t3-text-2); } /* 손익은 뜻이 있는 색이다. 어두운 바탕에서 읽히는 밝기로만 옮긴다. */ html[data-theme="dark"] .pd-rank-board .pd-cell.pd-profit-up { color: var(--t3-green-text); } html[data-theme="dark"] .pd-rank-board .pd-cell.pd-profit-down { color: var(--t3-danger); } /* 1~3위 금·은·동 배지는 그대로 둔다 — 뜻이 색에 실려 있다. */ /* ── ② 팁스터 상세 (Picks & Predictions) ───────────────────── */ html[data-theme="dark"] .pd-profile .pd-picks-title-text { color: var(--t3-text); } html[data-theme="dark"] .pd-profile .pd-picks-title { border-bottom-color: var(--t3-border); } /* ⚠ rev228 — `View Profile` 의 다크 재정의를 지웠다. 단추가 토큰 (`--t3-green` · `--t3-green-text` · `--t3-surface`)만 쓰게 되어 두 테마가 한 벌로 그려진다. 여기서 회색으로 되돌리면 초록 통일이 다크에서만 깨진다. */ html[data-theme="dark"] .pd-profile .pd-picks-profile-btn { background: var(--t3-surface-2); } /* 이니셜 아바타 — 어두운 바탕에서 글자가 보이게 한다. */ html[data-theme="dark"] .pd-avatar-empty { background: var(--t3-surface-3); color: var(--t3-text); } html[data-theme="dark"] .pd-avatar { border-color: var(--t3-border); } html[data-theme="dark"] .pd-bet-table { background: var(--t3-surface); border-color: var(--t3-border); } html[data-theme="dark"] .pd-bet-table th { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text); } html[data-theme="dark"] .pd-bet-table td { border-color: var(--t3-border); color: var(--t3-text); } html[data-theme="dark"] .pd-bt-row { background: var(--t3-surface); } html[data-theme="dark"] .pd-bt-row:hover { background: var(--t3-surface-3); } /* ── ③ 결과 상태 (WON · LOST · PENDING) ───────────────────── 라이트의 연초록·연분홍 행을 그대로 쓰면 어두운 화면에서 그 두 줄만 허옇게 뜬다. **뜻은 지키고 밝기만 뒤집는다** — 어두운 초록·어두운 붉은 표면으로 옮기고, 배지는 기존 채움색을 그대로 둔다. */ /* ⚠ 라이트는 색을 **`> td` 에** 준다(`.pd-bt-row.is-win > td`). 줄에만 덮으면 특이도가 낮아 밀린다 — 같은 깊이로 맞춘다. `!important` 없이. */ html[data-theme="dark"] .pd-bt-row.is-win > td { background: #14301f; color: var(--t3-text); } html[data-theme="dark"] .pd-bt-row.is-lose > td { background: #341c1e; color: var(--t3-text); } html[data-theme="dark"] .pd-bt-row.is-win:hover > td { background: #1a3b27; } html[data-theme="dark"] .pd-bt-row.is-lose:hover > td { background: #3f2225; } /* 상태는 rev145 에서 알약을 걷었다. 다크에서는 글자색만 옮긴다 — 뜻(초록 = 적중, 빨강 = 실패, 회색 = 대기)은 그대로다. */ html[data-theme="dark"] .pd-bt-badge.is-PENDING { color: var(--t3-text-2); } html[data-theme="dark"] .pd-bt-badge.is-WIN { color: var(--t3-green-text); } html[data-theme="dark"] .pd-bt-badge.is-LOSE { color: var(--t3-danger); } html[data-theme="dark"] .pd-bt-badge.is-CANCELLED, html[data-theme="dark"] .pd-bt-badge.is-VOID { color: var(--t3-text-3); } /* ── ④ 삭제 단추 ────────────────────────────────────────────── 붉은 뜻과 크기·아이콘은 그대로다. 어두운 표면에서 테두리만 보이게 한다. */ html[data-theme="dark"] .pd-bt-del-btn { border-color: rgba(248, 113, 113, .45); } /* ── ⑤ 쪽 이동 ────────────────────────────────────────────── */ html[data-theme="dark"] .pd-picks-pager .pd-pk-page { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text-2); } html[data-theme="dark"] .pd-picks-pager .pd-pk-page:hover { border-color: var(--t3-green-text); color: var(--t3-green-text); } html[data-theme="dark"] .pd-picks-pager .pd-pk-page.is-current { background: var(--t3-surface); border-color: var(--t3-green-text); color: var(--t3-green-text); } html[data-theme="dark"] .pd-picks-pager .pd-pk-page.is-off { background: var(--t3-surface-3); border-color: var(--t3-border); color: var(--t3-text-3); } /* 쪽 이동은 위 공통 규칙이 토큰으로 두 테마를 함께 그린다 (rev225). 다크에서 바꿀 것은 판 색 한 단계와, 지금 쪽을 채우는 초록의 대비뿐이다. */ html[data-theme="dark"] .pd-pager .pd-page { background: var(--t3-surface-2); } html[data-theme="dark"] .pd-pager .pd-page.is-current { background: var(--t3-green); border-color: var(--t3-green); color: #ffffff; } html[data-theme="dark"] .pd-pager .pd-page.is-off { background: transparent; } /* ── ⑥ 프로필 통계 ────────────────────────────────────────── */ html[data-theme="dark"] .pd-mp .pd-mp-nick { color: var(--t3-text); } html[data-theme="dark"] .pd-mp .pd-mp-title { color: var(--t3-text); } html[data-theme="dark"] .pd-mp .pd-mp-sum, html[data-theme="dark"] .pd-mp .pd-mp-table { background: var(--t3-surface); border-color: var(--t3-border); } html[data-theme="dark"] .pd-mp .pd-mp-sum th, html[data-theme="dark"] .pd-mp .pd-mp-table th, html[data-theme="dark"] .pd-mp .pd-mp-table thead th { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text); } /* ⚠ 칸의 **배경**까지 옮긴다. 라이트는 `td` 마다 `background: #ffffff` 를 주므로, 표에만 색을 주면 흰 칸이 그대로 남는다. 월별 표는 `.pd-mp-row > td` 라 같은 깊이로 맞춘다. */ html[data-theme="dark"] .pd-mp .pd-mp-sum td, html[data-theme="dark"] .pd-mp .pd-mp-table td, html[data-theme="dark"] .pd-mp .pd-mp-row > td { background: var(--t3-surface); border-color: var(--t3-border); color: var(--t3-text-2); } html[data-theme="dark"] .pd-mp .pd-mp-row:hover > td { background: var(--t3-surface-3); } /* ⚠ 승·패 줄색을 여기서 되살린다. 바로 위 `.pd-mp .pd-mp-table td` 는 이 표의 **모든 칸**을 판 색으로 칠하는데, 승패색(`.pd-bt-row.is-win > td`)과 특이도가 (0,3,2) 로 똑같다. 같은 값이면 **뒤에 적힌 쪽이 이기므로**, 나중에 오는 이 규칙이 승패색을 덮어 View Profile 의 Period 표만 색이 빠져 보였다(팁스터 상세 표는 `.pd-mp` 밖이라 멀쩡했다). 그래서 같은 `.pd-mp` 안에서 한 단계 더 좁게 다시 적는다 — 특이도 (0,4,2). 색은 새로 만들지 않는다: 위쪽 `.pd-bt-row.is-win > td` 가 쓰던 값 그대로다. 라이트는 이 다툼이 없어 원래부터 정상이므로 손대지 않는다. */ html[data-theme="dark"] .pd-mp .pd-bt-row.is-win > td { background: #14301f; color: var(--t3-text); } html[data-theme="dark"] .pd-mp .pd-bt-row.is-lose > td { background: #341c1e; color: var(--t3-text); } html[data-theme="dark"] .pd-mp .pd-bt-row.is-win:hover > td { background: #1a3b27; } html[data-theme="dark"] .pd-mp .pd-bt-row.is-lose:hover > td { background: #3f2225; } html[data-theme="dark"] .pd-mp .pd-mp-none { color: var(--t3-text-3); } /* `+ Picks` 는 누를 수 있는 자리다 — 어두운 바탕에서 링크로 읽히게 한다. */ html[data-theme="dark"] .pd-mp .pd-mp-toggle, html[data-theme="dark"] .pd-mp .pd-mp-more a { color: var(--t3-green-text); } html[data-theme="dark"] .pd-mp .pd-mp-toggle:hover, html[data-theme="dark"] .pd-mp .pd-mp-more a:hover { color: var(--t3-green-text); text-decoration: underline; } html[data-theme="dark"] .pd-mp .pd-mp-toggle:focus-visible { outline: 2px solid var(--t3-green-text); outline-offset: 1px; } /* 손익 의미색 — 세 화면이 같은 `.pd-profit-*` 을 쓴다. ⚠ 바로 위의 `.pd-mp .pd-mp-sum td` 가 특이도 (0,2,1) 이라 클래스만으로는 눌린다. 손익 칸도 `td` 이므로 **같은 깊이(td.pd-profit-*)** 로 적는다. `!important` 를 쓰지 않기 위한 것이다. */ html[data-theme="dark"] .pd-mp .pd-mp-sum td.pd-profit-up, html[data-theme="dark"] .pd-mp .pd-mp-table td.pd-profit-up, html[data-theme="dark"] .pd-profile .pd-profit-up { color: var(--t3-green-text); } html[data-theme="dark"] .pd-mp .pd-mp-sum td.pd-profit-down, html[data-theme="dark"] .pd-mp .pd-mp-table td.pd-profit-down, html[data-theme="dark"] .pd-profile .pd-profit-down { color: var(--t3-danger); } html[data-theme="dark"] .pd-mp .pd-mp-sum td.pd-profit-flat, html[data-theme="dark"] .pd-mp .pd-mp-table td.pd-profit-flat, html[data-theme="dark"] .pd-profile .pd-profit-flat { color: var(--t3-text-2); } /* 본문과 푸터 사이 구분선 */ html[data-theme="dark"] .pd-mp .pd-mp-foot, html[data-theme="dark"] .pd-mp hr { border-color: var(--t3-border); } /* ═════════════════════════════════════════════════════════════ 랭킹 다크 보정 (rev144) 두 가지를 T.O.P3 표에 맞춘다. 그 표가 다크의 기준이다. 외곽선 1px solid #33414f · 배경 #18212c 본문 #e4e8ee ⚠ 범위는 `.pd-rank-board` 안뿐이다. `.pd-rank-card` 는 랭킹 템플릿에서만 쓰는 클래스이고(다른 화면에는 없다), 나머지 규칙도 전부 이 표식 아래에 있다. ═════════════════════════════════════════════════════════════ */ /* ── 흰 외곽선의 정체 ────────────────────────────────────────── 표가 아니라 **표를 담는 상자**였다. `.pd-rank-card` 가 라이트의 `background: #ffffff; border: 1px solid #dfe3e8` 를 그대로 쓰고 있었다. 표 자체는 `border: 0` 이라, 상자의 흰 배경이 표 둘레 1px 만큼 삐져나와 흰 테두리처럼 보였다. 상자를 T.O.P3 표와 같은 색으로 옮긴다. */ html[data-theme="dark"] .pd-rank-board .pd-rank-card { background: var(--t3-surface); border-color: var(--t3-border); } /* ── 본문 글자 ──────────────────────────────────────────────── T.O.P3 의 `td` 는 `--t3-text` 다. 랭킹만 `--t3-text-2` 로 한 단계 낮아 다른 화면보다 어두워 보였다. 같은 단계로 올린다. 순위 번호는 지시대로 **한 단계 낮은 밝기**(`--t3-text-2`)로 남긴다 — 1~3위 메달이 서는 자리라 일반 번호까지 같은 밝기로 올리면 메달의 대비가 흐려진다. `opacity` 를 쓰지 않고 색을 직접 준다. */ html[data-theme="dark"] .pd-rank-board .pd-cell { color: var(--t3-text); } html[data-theme="dark"] .pd-rank-board .pd-cell.pd-profit-flat { color: var(--t3-text); } /* 손익·회원명·머리글·메달은 그대로다 — 위 rev143 규칙이 계속 이긴다. */ /* 조회용 값의 다크 글자색 (rev145). 상자를 걷었으니 이제 색이 유일한 신호다. 표의 일반 본문과 같은 밝기로 맞춘다 — 랭킹이 T.O.P3 와 맞춘 것과 같은 단계다. 범위는 Prediction 사용자 화면(`.pd-wrap`) 안뿐이라 관리자 화면에는 닿지 않는다. */ html[data-theme="dark"] .pd-wrap .pd-cell { color: var(--t3-text); } html[data-theme="dark"] .pd-wrap .pd-cell.pd-profit-flat { color: var(--t3-text); } html[data-theme="dark"] .pd-wrap .pd-cell.pd-profit-up { color: var(--t3-green-text); } html[data-theme="dark"] .pd-wrap .pd-cell.pd-profit-down { color: var(--t3-danger); } /* ── My Picks 표의 다크 (rev146) ────────────────────────────── 범위는 `.pd-picks-table` 안뿐이다 — 이 격자는 `my_participations.html` 한 곳에서만 쓴다. 랭킹·T.O.P3·팁스터 프로필은 `.pd-rank-table` · `.pd-table` 을, 경기 목록은 `.pd-bt-row` 를 쓰므로 닿지 않는다. 값은 새로 만들지 않는다. 레이아웃 토큰과, **같은 회원이 보는 베팅 내역 표(`.pd-bt-row`)가 이미 쓰는 어두운 승패색**을 그대로 가져온다 — 두 표가 같은 결과를 다른 색으로 말하면 안 된다. */ /* 판정 전(Waiting) 줄. 라이트의 `#333333` · `#666666` 이 어두운 바탕에 그대로 남아 경기명 · 픽 · Stake · Odds 가 잠겼다. 줄의 기본 글자색만 옮긴다 — 칸의 크기도 정렬도 굵기도 건드리지 않는다. */ html[data-theme="dark"] .pd-picks-table .pd-pk-row > * { color: var(--t3-text); } html[data-theme="dark"] .pd-picks-table .pd-pk-date { color: var(--t3-text-2); } /* 줄 사이 선(`#dddddd`)은 어두운 표 위에서 흰 띠가 된다. */ html[data-theme="dark"] .pd-picks-table .pd-picks-item + .pd-picks-item { border-top-color: var(--t3-border); } /* 맞은 줄 · 틀린 줄. 연한 초록 · 빨강(`#eaf6ec` · `#fdecec`)은 어두운 바탕에서 흰 띠가 된다. 뜻은 그대로 두고 밝기만 뒤집는다. */ html[data-theme="dark"] .pd-picks-table .pd-picks-item.is-win .pd-pk-row { background: #14301f; } html[data-theme="dark"] .pd-picks-table .pd-picks-item.is-lose .pd-pk-row { background: #341c1e; } /* 이 표에서 색이 뜻을 지는 칸은 결과 하나뿐이다(rev77). 그 하나만 어두운 바탕에서 읽히는 단계로 올리고, 판정이 없는 줄은 라이트와 같이 눈에 덜 띄는 회색으로 남긴다 — 없는 뜻을 만들지 않는다. */ html[data-theme="dark"] .pd-picks-table .pd-picks-item.is-win .pd-pk-state { color: var(--t3-green-text); } html[data-theme="dark"] .pd-picks-table .pd-picks-item.is-lose .pd-pk-state { color: var(--t3-danger); } html[data-theme="dark"] .pd-picks-table .pd-picks-item.is-none .pd-pk-state { color: var(--t3-text-2); } /* 아래 안내 문구. 문구 · 자리 · 크기 · 간격은 그대로, 밝기만 올린다. `.pd-hint` 는 다른 화면도 쓰므로 My Picks 래퍼 안으로 가둔다 — `.pd-picks` 는 팁스터 Picks 랭킹도 쓰지만 그쪽엔 `.pd-rank` 가 붙는다. */ html[data-theme="dark"] .pd-wrap.pd-picks:not(.pd-rank) > .pd-hint { color: var(--t3-text-2); } /* 머리글 띠 (rev147). 라이트에서 랭킹과 같은 `#4a4f57` 로 맞췄으니 다크에서도 랭킹 머리글(`.pd-rank-table th`)과 같은 값을 쓴다 — 진한 회색 띠 하나만 어두운 카드 위에 떠 있지 않게 한다. */ html[data-theme="dark"] .pd-picks-table .pd-picks-head { background: var(--t3-surface-2); } html[data-theme="dark"] .pd-picks-table .pd-pk-th { color: var(--t3-text); } /* ═════════════════════════════════════════════════════════════ 랭킹 — 좁은 화면에서는 카드로 (rev201) PC 표를 줄여 보여 주지 않는다. 같은 `` 한 줄을 **격자로 다시 배치**할 뿐이라 데이터도, 질의도, 열 순서도 그대로다(추가 조회 없음). 1줄 [순위] [레벨아이콘+닉네임] [Profit] 2줄 Picks Win Lose 3줄 Win Rate Avg Odds 라벨은 템플릿이 `data-label` 로 넘긴 **언어 변수 값**을 그대로 쓴다 — CSS 에 영어를 박아 두면 한국어 화면에서 영어가 남는다. 색(승·패·손익·본인 줄·메달)은 위쪽 규칙 그대로다. ⚠ 640px 이상은 이 블록이 걸리지 않는다 — 데스크톱 표는 그대로다. ═════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* 좌우 여백은 레이아웃(`.gpe_contents_box` 12px)이 이미 준다. 여기서 8px 을 더하면 콘텐츠가 20px 에서 시작한다 — 랭킹 화면에서만 그 8px 을 뺀다(다른 예측 화면은 그대로다). */ .pd-wrap.pd-rank-board { padding-left: 0; padding-right: 0; } /* 표 뼈대를 블록으로 푼다. 고정 폭(1060px)이 여기서 사라진다. */ .pd-rank-board .pd-rank-table, .pd-rank-board .pd-rank-table tbody { display: block; width: 100%; min-width: 0; } .pd-rank-board .pd-rank-table colgroup, .pd-rank-board .pd-rank-table thead { display: none; } .pd-rank-board .pd-rank-card { overflow: visible; } /* 칸 넷을 **고정 뼈대**로 둔다 (rev217). 예전에는 첫 칸이 `auto` 라 그 줄에서 가장 넓은 것(1줄은 순위, 2줄은 `Picks 12`)이 폭을 정했다. 줄마다 · 카드마다 값이 달라 닉네임이 시작하는 자리가 조금씩 어긋났다. 첫 칸을 28px 로 못박으면 모든 카드에서 닉네임이 **같은 자리**에서 시작한다. 1줄 [28px 순위] [닉네임 ─ 2~4칸 합침] [Profit] 2줄 [Picks ─ 1·2칸] [Win] [Lose ─ 남는 칸, 왼쪽 붙임] 3줄 [Win Rate ─ 1~4칸] [Avg Odds] ⚠ 가운데 두 칸을 `auto`(내용 폭)로 두는 것이 rev219 의 핵심이다. `1fr` 로 나누면 `Picks · Win · Lose` 가 카드 폭을 삼등분해 서로 멀찍이 떨어진다 — 한 전적인데 남남처럼 보였다. 내용 폭으로 두면 셋이 왼쪽에서 차례로 붙는다. 닉네임(1줄)·Win Rate(3줄)는 **남는 칸(`1fr`)까지 걸쳐** 두었다. 늘어나는 칸을 걸친 항목은 `auto` 칸의 폭 계산에 끼어들지 않으므로 (격자 규격 §12.5), 긴 닉네임이나 `Win Rate 100.00%` 가 `Win` 칸을 밀어내지 않는다. 값·계산·열 순서는 그대로다 — 자리만 정한다. */ .pd-rank-board .pd-rank-table tr.pd-rank-row { display: grid; grid-template-columns: 28px auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--t3-border-soft, #eef0f3); } .pd-rank-board .pd-rank-table td { display: flex; align-items: center; gap: 6px; height: auto; padding: 0; border: 0; text-align: left; min-width: 0; font-size: 14px; } /* 라벨 — 값 앞에 짧게 붙는다. */ .pd-rank-board .pd-rank-table td[data-label]::before { content: attr(data-label); flex: 0 0 auto; color: var(--t3-text-2, #7b8794); font-size: 12px; font-weight: 600; } /* 1줄 */ .pd-rank-board .pd-rank-table td.pd-col-rank { grid-column: 1; grid-row: 1; justify-content: center; } .pd-rank-board .pd-rank-table td.pd-col-tipster { grid-column: 2 / 5; grid-row: 1; min-width: 0; } .pd-rank-board .pd-rank-table td:nth-child(8) { grid-column: 5; grid-row: 1; justify-content: flex-end; } /* 2줄 — 셋을 왼쪽에서 한 덩어리로 붙인다 (rev219). 칸 사이 간격은 격자의 10px 에 오른쪽 여백 14px 을 더해 24px 이다. 마지막 `Lose` 뒤에는 여백을 주지 않는다. */ .pd-rank-board .pd-rank-table td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; padding-right: 14px; } .pd-rank-board .pd-rank-table td:nth-child(4) { grid-column: 3; grid-row: 2; padding-right: 14px; } .pd-rank-board .pd-rank-table td:nth-child(5) { grid-column: 4; grid-row: 2; justify-content: flex-start; } /* 아주 좁은 화면(320px)에서 세 자리 값이 들어와도 두 줄로 접히지 않게 한 줄로 못박는다. 남는 칸이 모자라면 글자가 오른쪽 빈자리로 조금 넘칠 뿐이고(그 줄 오른쪽에는 아무것도 없다), 잘리지도 화면이 밀리지도 않는다. */ .pd-rank-board .pd-rank-table td:nth-child(3), .pd-rank-board .pd-rank-table td:nth-child(4), .pd-rank-board .pd-rank-table td:nth-child(5) { white-space: nowrap; } /* 3줄 — 왼쪽 Win Rate · 오른쪽 Avg Odds 는 그대로다. */ .pd-rank-board .pd-rank-table td:nth-child(6) { grid-column: 1 / 5; grid-row: 3; } .pd-rank-board .pd-rank-table td:nth-child(7) { grid-column: 5; grid-row: 3; justify-content: flex-end; } /* ── 첫 줄의 사람 영역 (rev217) ────────────────────────────── [순위][레벨 아이콘][닉네임] 이 하나로 읽히게 간격만 좁힌다. 레벨 아이콘은 **경험치 애드온이 넣는 그대로**다 — 이미지도, 결정 방식도, 크기 비율도 여기서 만들지 않는다. 빈 span 은 경험치가 없는 회원에게 그대로 빈칸으로 남는다(자리를 차지하지 않는다). */ .pd-rank-board .pd-rank-table td.pd-col-tipster { gap: 0; } .pd-rank-board .pd-rank-table td.pd-col-tipster .pd-avatar { flex: 0 0 auto; width: 26px; height: 26px; margin-right: 7px; } .pd-rank-board .pd-rank-table td.pd-col-tipster .pd-lv { display: inline-flex; align-items: center; flex: 0 0 auto; } .pd-rank-board .pd-rank-table td.pd-col-tipster .pd-lv .xe_experience_level_icon { margin: 0 5px 0 0; max-height: 16px; width: auto; } /* 닉네임은 한 줄 우선, 길면 안전하게 자른다(레벨 아이콘은 그대로). */ .pd-rank-board .pd-rank-table td.pd-col-tipster .pd-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } /* 실적은 라벨과 금액이 한 덩어리로 읽히게 붙이고, 줄바꿈은 막는다. 색(양수 초록 · 음수 빨강)과 값은 위쪽 규칙 그대로다. */ .pd-rank-board .pd-rank-table td:nth-child(8) { gap: 6px; white-space: nowrap; } /* 값 글자 크기는 표에서 줄여 둔 값을 되돌린다(모바일에서 더 읽혀야 한다). */ .pd-rank-board .pd-rank-table .pd-cell { font-size: 14px; padding: 0; font-variant-numeric: tabular-nums; } /* ── 순위 배지 (rev217) ────────────────────────────────────── 1~3위는 지금 쓰는 금·은·동 원형 그대로다(색·글자색 그대로, 크기만 한 칸 키워 4위 아래와 같은 자리를 쓴다). 4위 아래는 숫자만 떠 있던 것을 **같은 크기의 중립 배지**로 감싼다 — 배경 없음, 옅은 테두리, 흐린 글자. 순위별 색을 새로 만들지 않는다. 세 자리 순위(100)도 들어가도록 알약 모양으로 두고 숫자 폭은 고정폭 숫자로 맞춘다. 검색 중에는 순위 값이 `-` 라 그 자리도 같은 배지로 그려진다. */ /* 카드에서는 조금 크게 (rev224). 모양·색은 공통 규칙 그대로이고 여기서는 크기만 정한다. 지시서의 38~44px 은 이 카드 구조에서 닉네임 줄을 밀어내므로(순위·레벨아이콘·닉네임이 한 줄이다) 32px 로 둔다 — 표(26px)보다 확실히 크고 줄 높이는 지킨다. */ .pd-rank-board .pd-rank-no { min-width: 32px; height: 32px; font-size: 13px; } /* 기간·정렬 단추와 검색 — 손가락 기준으로 키운다. */ .pd-rank-board .pd-rank-tab a { height: 40px; padding: 0 14px; font-size: 13.5px; } .pd-rank-board .pd-rank-head { flex-wrap: wrap; gap: 10px; } /* 달 고르개도 단추와 같은 높이로 (손가락 기준). 자리는 아직 기간 탭 오른쪽 그대로다 — 이 폭에서는 탭 셋과 나란히 서도 남는다. */ .pd-rank-board .pd-rank-month-select { height: 40px; font-size: 13.5px; } .pd-rank-board .pd-rank-search { width: 100%; } .pd-rank-board .pd-rank-input { height: 40px; flex: 1 1 auto; min-width: 0; font-size: 14px; } .pd-rank-board .pd-rank-btn { height: 40px; padding: 0 16px; white-space: nowrap; } /* 값이 없는 구간의 안내문은 화면 기준으로 가운데 둔다. */ .pd-rank-board .pd-empty { padding: 24px 14px; } } /* ═════════════════════════════════════════════════════════════ 좁은 화면의 픽 슬립 — 하단 요약 바 + 올라오는 판 (rev202) 슬립 자체(`.pd-slip`)는 **같은 요소를 자리만 옮긴다**(`prediction.js`). 그래서 여기서 정하는 것은 껍데기의 모양뿐이고, 슬립 안쪽 규칙은 위쪽에 있던 것을 그대로 쓴다. 768px 이상에서는 껍데기가 아예 없다. 색은 사이트 토큰만 쓴다(라이트·다크 자동). ═════════════════════════════════════════════════════════════ */ .pd-slip-dock { display: none; } .pd-sheet, .pd-sheet-back { display: none; } @media (max-width: 767px) { /* 슬립이 판(sheet)으로 옮겨지는 것과 같은 분기점 — 광고는 슬립이 제자리에 있을 때만 보이므로 여기서 함께 감춘다. */ .pd-sports-page .pd-slip-ad { display: none; } /* 목록 아래 여백은 **바가 떠 있을 때만** 준다 (rev204). 고르기 전에는 빈 자리를 남기지 않는다. */ .pd-sports-page .pd-main { padding-bottom: 24px; } html.pd-dock-on .pd-sports-page .pd-main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } /* ── 하단 요약 바 (rev204) ──────────────────────────────── 레이아웃 위에 **따로 떠 있는 조작 판**처럼 보이게 한다. 바탕은 화면 배경보다 한 단계 밝은 보조 표면(`--t3-surface-2`), 위쪽에 3px 초록 선, 얇은 테두리, 위로 지는 옅은 그림자. 색은 모두 사이트 토큰이라 라이트·다크가 함께 따라온다. */ .pd-slip-dock[hidden] { display: none; } .pd-slip-dock { position: fixed; z-index: 900; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--t3-border); border-top: 3px solid var(--t3-green); border-radius: 12px; background: var(--t3-surface-2); box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); color: var(--t3-text); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; /* 아래에서 짧게 올라온다(약 200ms). */ transform: translateY(120%); opacity: 0; transition: transform .2s ease-out, opacity .2s ease-out; } .pd-slip-dock.is-on { transform: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .pd-slip-dock { transition: none; } } .pd-slip-dock:focus-visible { outline: 2px solid var(--t3-green); outline-offset: 2px; } .pd-dock-label { flex: 0 0 auto; font-weight: 800; color: var(--t3-text); letter-spacing: .01em; } .pd-dock-pick { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t3-text-2); } .pd-slip-dock.is-picked .pd-dock-pick { color: var(--t3-text); font-weight: 600; } .pd-dock-odds { flex: 0 0 auto; white-space: nowrap; font-weight: 800; font-size: 15px; color: var(--t3-green-text); } .pd-dock-caret { flex: 0 0 auto; display: inline-flex; color: var(--t3-text); transition: transform .2s ease-out; } .pd-slip-dock[aria-expanded="true"] .pd-dock-caret { transform: rotate(180deg); } /* ── 올라오는 판 ──────────────────────────────────────── */ .pd-sheet-back { display: block; position: fixed; inset: 0; z-index: 950; background: rgba(15, 23, 32, .45); } .pd-sheet-back[hidden] { display: none; } .pd-sheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 960; max-height: 85vh; max-height: 85dvh; padding-bottom: env(safe-area-inset-bottom, 0px); border-top-left-radius: 16px; border-top-right-radius: 16px; border-top: 1px solid var(--t3-border); background: var(--t3-surface); color: var(--t3-text); box-shadow: 0 -10px 28px rgba(0, 0, 0, .2); animation: pd-sheet-up .18s ease-out; } .pd-sheet[hidden] { display: none; } @keyframes pd-sheet-up { from { transform: translateY(12%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .pd-sheet { animation: none; } } .pd-sheet-head { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--t3-border-soft); } .pd-sheet-handle { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 2px; background: var(--t3-border); } .pd-sheet-title { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 700; } .pd-sheet-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--t3-text-2); cursor: pointer; } .pd-sheet-close:focus-visible { outline: 2px solid var(--t3-green); outline-offset: 2px; } .pd-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 옮겨 온 슬립은 판 안에서 전체 폭을 쓴다(테두리는 판이 갖는다). */ .pd-sheet-body .pd-slip { width: auto; max-width: none; margin: 0; position: static; border: 0; border-radius: 0; box-shadow: none; } .pd-sheet-body .pd-slip-head { display: none; } /* 제목은 판 머리에 있다 */ /* 판이 열려 있는 동안 뒤 화면은 움직이지 않는다. */ html.pd-sheet-open, html.pd-sheet-open body { overflow: hidden; } } /* ═════════════════════════════════════════════════════════════ Picks — 좁은 화면에서는 카드로 (rev203) 랭킹과 같은 방식이다: PC 표의 `` 한 줄을 **격자로 다시 배치**할 뿐이라 데이터·질의·열 순서·검색·정렬은 그대로다(추가 조회 없음). 1줄 [순위] [레벨아이콘 + 닉네임] [상태] 2줄 경기 이름 (한 줄, 넘치면 …, 전체는 title) 3줄 Pick(왼쪽) Odds(가운데) Win Rate(오른쪽) 라벨은 템플릿이 `data-label` 로 넘긴 언어 변수 값을 쓴다. 상태색(WIN·LOSE·PENDING·VOID)·본인 줄 파랑·1위 강조는 위쪽 규칙 그대로다 — 여기서 색을 새로 만들지 않는다. 768px 이상은 이 블록이 걸리지 않아 데스크톱 표가 그대로다. ═════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* 좌우 여백은 레이아웃이 준다(랭킹과 같은 처리). */ .pd-wrap.pd-picks { padding-left: 0; padding-right: 0; } /* 기간·정렬 줄 — 한 줄로 두고 옆으로 민다(줄바꿈하지 않는다). */ /* 순위표도 **같은 방식**을 쓴다 (rev211). 기준 탭이 줄바꿈되어 순위표만 필터가 네 줄이었다(Picks 는 세 줄). 두 화면 모두 한 줄 + 가로 스크롤로 맞춘다 — 탭 문구·개수·주소는 그대로다. */ .pd-picks .pd-rank-tabs, .pd-rank-board .pd-rank-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .pd-picks .pd-rank-tabs::-webkit-scrollbar, .pd-rank-board .pd-rank-tabs::-webkit-scrollbar { display: none; } .pd-picks .pd-rank-tab, .pd-rank-board .pd-rank-tab { flex: 0 0 auto; } .pd-picks .pd-rank-tab a, .pd-rank-board .pd-rank-tab a { height: 40px; padding: 0 14px; white-space: nowrap; } /* 달 고르개는 기간 탭과 **같은 줄**이다 (rev248, §17 갱신). rev231 은 탭줄에 한 줄을 통째로 주고 고르개를 아랫줄로 내렸다 — 그때는 Daily 를 포함해 탭이 넷이라 고르개까지 세우면 줄 전체가 밀렸다. 지금은 Monthly·Weekly·All Time 셋뿐이라 고르개(약 125px)를 나란히 세워도 남는다. 세 줄(탭·고르개·기준탭)이 두 줄로 준다. ⚠ rev247 에서 `flex: 1 1 auto` 로 한 번 고쳤으나 실제로는 줄바꿈이 그대로였다 — `flex-basis: auto` 는 줄바꿈을 결정할 때(`flex-wrap`) `min-width:0` 이 아니라 **탭 목록의 콘텐츠 폭**(예: 280px대)을 그대로 쓴다. `min-width:0` 은 한 줄 안에서 줄어드는 하한선일 뿐, 애초에 그 줄에 들어갈지 말지는 못 바꾼다. 그래서 탭 폭 + 고르개 폭이 머리줄보다 넓으면 여전히 둘째 줄로 밀렸다. `flex-basis` 를 아예 0 으로 준다(`flex: 1 1 0`). 줄바꿈 판단에 쓰는 "가상 크기"가 0 이 되어 고르개(고정 폭)와 반드시 한 줄에 남고, 실제로는 `flex-grow:1` 로 남는 폭만큼 자라난다. 탭 폭이 그 자란 폭보다 넓으면 줄바꿈이 아니라 바로 위 규칙의 `overflow-x:auto` 로 탭 목록 안에서만 가로 스크롤된다. */ .pd-rank-board .pd-rank-head .pd-rank-tabs { flex: 1 1 0; min-width: 0; } .pd-rank-board .pd-rank-month { flex: 0 0 auto; margin-left: auto; } /* 고르개를 한 줄에 남겨도(위 규칙) `All Time` 이 스크롤 없이는 안 보였다 (rev249). 고르개 최소폭(기본 125px, §969)은 데스크톱 여유폭 기준이라 좁은 화면에서는 탭 자리를 많이 가져간다. `2026-08` 이 실제로 필요한 만큼만(약 100px) 줄여 남는 폭을 탭 쪽에 돌려준다 — 화살표 아이콘 자리(`background-position`)도 줄어든 오른쪽 여백에 맞춘다. */ .pd-rank-board .pd-rank-month-select { min-width: 100px; padding: 0 24px 0 8px; background-position: right 8px center; } /* 검색 — 입력창이 남는 폭을 쓰고 단추는 제 폭을 지킨다. */ .pd-picks .pd-rank-head { flex-wrap: wrap; gap: 10px; } .pd-picks .pd-rank-search { width: 100%; } .pd-picks .pd-rank-input { flex: 1 1 auto; min-width: 0; height: 42px; font-size: 14px; } .pd-picks .pd-rank-btn { flex: 0 0 auto; height: 42px; padding: 0 16px; white-space: nowrap; } /* ── 표 → 카드 ─────────────────────────────────────────── */ .pd-picks .pd-pick-table, .pd-picks .pd-pick-table tbody { display: block; width: 100%; min-width: 0; } .pd-picks .pd-pick-table colgroup, .pd-picks .pd-pick-table thead { display: none; } .pd-picks .pd-rank-card { overflow: visible; border: 0; background: none; } .pd-picks .pd-pick-table tr.pd-rank-row { display: grid; /* 순위 칸을 빼면서 두 칸이 되었다 (rev205) — 왼쪽 작성자, 오른쪽 상태. */ grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: center; gap: 10px; margin-bottom: 10px; padding: 14px; border: 1px solid var(--t3-border); border-radius: 10px; background: var(--t3-surface); } .pd-picks .pd-pick-table td { display: block; min-width: 0; /* ⚠ 데스크톱 열 폭(22% · 18% · 92px …)이 격자 칸에도 그대로 걸린다. 그래서 닉네임이 "T.." 로, Pick 이 "O" 로 잘렸다. 폭은 격자가 정한다. */ width: auto; max-width: none; height: auto; padding: 0; border: 0; font-size: 14px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ⚠ 데스크톱 열 폭은 `.pd-picks .pd-pick-table .pd-col-tipster{width:22%}` 처럼 이름이 셋이라 위의 `td` 규칙(둘)으로는 이기지 못한다. 실제로 닉네임 칸이 42px 로 눌려 "T.." 로 잘렸다. 같은 깊이로 다시 적는다. */ .pd-picks .pd-pick-table td.pd-col-rank, .pd-picks .pd-pick-table td.pd-col-tipster, .pd-picks .pd-pick-table td.pd-pick-event, .pd-picks .pd-pick-table td.pd-pick-choice, .pd-picks .pd-pick-table td.pd-pick-rate { width: auto; max-width: none; } /* 1줄 */ /* 순위는 좁은 화면에서 내보내지 않는다 (rev205) — 자리도 남기지 않는다. 데스크톱 표의 Rank 열과 값은 그대로다. */ .pd-picks .pd-pick-table td.pd-col-rank { display: none; } .pd-picks .pd-pick-table td.pd-col-tipster { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: flex-start; gap: 6px; } .pd-picks .pd-pick-table td.pd-col-tipster .pd-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-picks .pd-pick-table td.pd-pick-status { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; } /* 2줄 — 경기 이름은 카드 전체 폭 한 줄 */ .pd-picks .pd-pick-table td.pd-pick-event { grid-column: 1 / -1; grid-row: 2; width: auto; max-width: none; text-align: left; color: var(--t3-text); font-weight: 600; /* 경기 이름 아래 얇은 구분선 (rev214). T.O.P3 카드의 최신 픽 구분선(`.pd-tcard-pick`)과 **같은 굵기·같은 색**(1px · `--t3-border-soft`)이다 — 두 화면의 선이 달라 보이지 않게. */ padding-bottom: 10px; border-bottom: 1px solid var(--t3-border-soft); } /* 3줄 — 값 위에 작은 이름표 */ /* ⚠ 이름표 문구는 언어 변수라 값으로 고를 수 없다 — 클래스로 고른다. Odds 칸은 `.pd-num[data-label]` 중 승률이 아닌 쪽 하나뿐이다. */ .pd-picks .pd-pick-table td.pd-pick-choice, .pd-picks .pd-pick-table td.pd-num[data-label]:not(.pd-pick-rate), .pd-picks .pd-pick-table td.pd-pick-rate { grid-row: 3; } .pd-picks .pd-pick-table td.pd-pick-choice { grid-column: 1; text-align: left; padding-right: 10px; } /* 칸이 둘이라 Odds 는 Pick 칸의 오른쪽 끝에 붙여 가운데처럼 세운다. */ .pd-picks .pd-pick-table td.pd-num[data-label]:not(.pd-pick-rate) { grid-column: 1; grid-row: 3; justify-self: end; margin-right: 12px; text-align: center; } .pd-picks .pd-pick-table td.pd-pick-rate { grid-column: 2; text-align: right; width: auto; } .pd-picks .pd-pick-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--t3-text-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-picks .pd-pick-table td.pd-num[data-label]:not(.pd-pick-rate)::before { text-align: center; } .pd-picks .pd-pick-table td.pd-pick-rate::before { text-align: right; } .pd-picks .pd-pick-table .pd-cell { display: inline; padding: 0; font-size: 14px; white-space: nowrap; } /* ── 결과색 (rev205) ────────────────────────────────────── PC 표의 적중·비적중 줄과 **같은 값**을 카드 바탕에 그대로 쓴다. 판정은 모델이 붙인 그 클래스이고 여기서 다시 판단하지 않는다. 위의 카드 규칙이 바탕을 덮으므로 같은 깊이로 다시 적는다. */ .pd-picks .pd-pick-table tr.pd-rank-row.pd-pick-win { background: #eefaf0; } .pd-picks .pd-pick-table tr.pd-rank-row.pd-pick-lose { background: #fdf1ee; } .pd-picks .pd-pick-table tr.pd-rank-row.pd-pick-void { background: var(--t3-surface-2); } .pd-picks .pd-pick-table tr.pd-pick-win td.pd-pick-status { color: var(--t3-green-text); } .pd-picks .pd-pick-table tr.pd-pick-lose td.pd-pick-status { color: var(--t3-danger); } .pd-picks .pd-pick-table tr.pd-pick-void td.pd-pick-status { color: var(--t3-text-3); } /* 본인 카드 — 바탕은 결과색이 갖고, 사람 표시는 왼쪽 선과 닉네임이다. */ .pd-picks .pd-pick-table tr.pd-rank-row.is-me { border-left-width: 3px; border-left-color: var(--pd-me-line); } .pd-picks .pd-pick-table tr.pd-rank-row.is-me .pd-nick { color: var(--pd-me-nick); font-weight: 700; } .pd-picks .pd-pick-table tr.pd-rank-row:last-child { margin-bottom: 4px; } } /* 좁은 화면 카드의 결과색 — 어두운 화면 값 (rev205). PC 표(`html[data-theme="dark"] .pd-pick-table .pd-pick-win` 등)와 같은 값이고, 카드 규칙보다 이름이 많아야 하므로 여기서 다시 적는다. */ @media (max-width: 767px) { html[data-theme="dark"] .pd-picks .pd-pick-table tr.pd-rank-row.pd-pick-win { background: #14301f; } html[data-theme="dark"] .pd-picks .pd-pick-table tr.pd-rank-row.pd-pick-lose { background: #341c1e; } html[data-theme="dark"] .pd-picks .pd-pick-table tr.pd-rank-row.pd-pick-void { background: var(--t3-surface-2); } html[data-theme="dark"] .pd-picks .pd-pick-table tr.pd-rank-row.is-me .pd-nick { color: var(--pd-me-nick); } } /* ═════════════════════════════════════════════════════════════ TOP3 — 좁은 화면은 분류 탭 + 카드 (rev207) 같은 `$top_groups` 자료를 두 벌로 그려 두고, **폭에 따라 한 벌만** 보인다(둘이 동시에 보이지 않는다). 데스크톱은 네 묶음 표 그대로다. ═════════════════════════════════════════════════════════════ */ .pd-top .pd-top-m { display: none; } @media (max-width: 767px) { /* PC 표 묶음과 아래 안내문은 접고, 카드 덩이만 보인다. */ .pd-top .pd-top-group, .pd-top .pd-top-dhint { display: none; } .pd-top .pd-top-m { display: block; } .pd-wrap.pd-top { padding-left: 0; padding-right: 0; } /* 분류 탭 — 한 줄, 넘치면 옆으로 민다(줄바꿈하지 않는다). */ .pd-top-tabs { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 12px; } .pd-top-tabs::-webkit-scrollbar { display: none; } .pd-top-tab { flex: 0 0 auto; box-sizing: border-box; height: 40px; padding: 0 14px; border: 1px solid var(--t3-border); border-radius: var(--t3b-radius, 6px); background: var(--t3-surface); color: var(--t3-text-2); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; } .pd-top-tab:hover { border-color: var(--t3-green); color: var(--t3-green-text); } .pd-top-tab:focus-visible { outline: 2px solid var(--t3-green); outline-offset: 1px; } .pd-top-tab.is-on { background: #0f7a35; border-color: #0f7a35; color: #ffffff; } /* ⚠ rev239 — `.pd-top-mtitle` 규칙을 지웠다. 켜진 탭이 이미 분류를 말하므로 판 안에서 같은 낱말을 되풀이하지 않는다(마크업에서 뺐다). 기간 줄은 남으므로 제목이 갖던 만큼만 위를 띄운다. */ .pd-top-msub { margin: 0 0 12px; font-size: 12px; color: var(--t3-text-2); } .pd-top-mempty { display: flex; align-items: center; justify-content: center; min-height: 76px; margin: 0 0 12px; padding: 0 14px; border: 1px solid var(--t3-border); border-radius: 10px; background: var(--t3-surface); color: var(--t3-text-2); font-size: 13px; } /* ── 카드 ─────────────────────────────────────────────── */ .pd-tcard { margin-bottom: 10px; padding: 14px; border: 1px solid var(--t3-border); border-radius: 10px; background: var(--t3-surface); } .pd-tcard-head { display: flex; align-items: center; gap: 8px; min-width: 0; } .pd-tcard-head .pd-nick { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } /* 순위 — 금·은·동. 표의 배지와 같은 값이라 뜻이 화면마다 달라지지 않는다. */ /* TOP3 카드의 순위도 **같은 배지**다 (rev224). 마크업에 공통 클래스 `pd-rank-no` 를 함께 달았으므로 모양·색은 위 공통 규칙이 맡고, 여기서는 카드 줄에 맞는 크기만 정한다. */ .pd-tmedal { flex: 0 0 auto; min-width: 26px; height: 26px; font-size: 12px; } .pd-tcard-key { flex: 0 0 auto; font-size: 16px; font-weight: 800; white-space: nowrap; color: var(--t3-text); } /* 실적 묶음의 대표값은 손익이다 — 뜻을 색으로 말한다 (rev239). 위 규칙이 본문색을 박아 두어 초록·빨강이 눌리고 있었다. 값은 표· 순위표가 쓰는 `.pd-profit-*` 그대로이고, 여기서는 그 색이 이기도록 같은 깊이(`.pd-tcard-key.pd-profit-*`)로만 다시 적는다. */ .pd-tcard-key.pd-profit-up { color: var(--t3-green-text); } .pd-tcard-key.pd-profit-down { color: var(--t3-danger); } .pd-tcard-key.pd-profit-flat { color: var(--t3-text); } /* 둘째 줄은 값 하나뿐이다 (rev239) — 두 칸 격자를 풀어 왼쪽에 세운다. (예전 오른쪽 칸 정렬 규칙은 값이 하나가 되면서 지웠다.) */ .pd-tcard-sub { margin-top: 10px; font-size: 13px; color: var(--t3-text); } .pd-tcard-stat { white-space: nowrap; } .pd-tcard-stat em { font-style: normal; margin-right: 6px; color: var(--t3-text-2); font-size: 12px; font-weight: 600; } /* 최신 픽 — 카드 안쪽의 작은 판 */ .pd-tcard-pick { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--t3-border-soft); } .pd-tcard-line { display: flex; align-items: center; gap: 10px; min-width: 0; } .pd-tcard-line2 { margin-top: 6px; font-size: 13px; } .pd-tcard-match { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--t3-text); } .pd-tcard-choice { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-tcard-odds { flex: 0 0 auto; white-space: nowrap; } .pd-tcard-choice em, .pd-tcard-odds em { font-style: normal; margin-right: 6px; color: var(--t3-text-2); font-size: 12px; font-weight: 600; } .pd-tcard-result { flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--t3-text-2); } /* 결과 뜻은 PC 표와 같은 토큰이다. 카드 바탕은 칠하지 않는다 — 카드 셋뿐이라 배지 색만으로 충분하고, 본인 파랑과 섞이지 않는다. */ .pd-tcard.pd-pick-win .pd-tcard-result { color: var(--t3-green-text); } .pd-tcard.pd-pick-lose .pd-tcard-result { color: var(--t3-danger); } .pd-tcard.pd-pick-void .pd-tcard-result { color: var(--t3-text-3); } /* 본인 카드 — 왼쪽 파란 선과 파란 닉네임만. 메달·손익·결과색은 그대로다. */ .pd-tcard.is-me { border-left: 3px solid var(--pd-me-line); } .pd-tcard.is-me .pd-nick { color: var(--pd-me-nick); font-weight: 700; } .pd-top-mhint { margin: 4px 0 0; font-size: 12px; } } /* 데스크톱에서는 좁은 화면용 안내문만 접는다(표 아래 안내문은 그대로). */ @media (min-width: 768px) { .pd-top .pd-top-mhint { display: none; } } /* ═════════════════════════════════════════════════════════════ Predictions — 좁은 화면의 좌우 여백 (rev208) 실측(390px): 검색폼·종목 탭·리그 카드가 모두 **왼쪽 20px** 에서 시작하고 오른쪽도 21px 이 남았다. 여백이 두 곳에서 겹쳐 쌓였기 때문이다. 레이아웃 `.gpe_contents_box` 12px (모든 화면 공통) + 이 화면 `.pd-wrap.pd-sports-page` 8px ──────────────────────────────────── 합계 20px 공통 레이아웃의 12px 은 다른 화면(랭킹·Picks·TOP3·게시판)도 함께 쓰므로 건드리지 않는다. 대신 **이 화면의 몫만** 줄여 합이 14px 이 되게 한다. 음수 margin 도, `width: calc(100% + …)` 도 쓰지 않는다 — 겹친 여백을 실제로 줄이는 것이다. ⚠ 12 + 2 = 14. 레이아웃 쪽 값이 바뀌면 이 2px 도 같이 손봐야 한다. ═════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .pd-wrap.pd-sports-page { box-sizing: border-box; width: 100%; max-width: none; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 2px; padding-right: 2px; /* 레이아웃 12px + 2px = 14px */ } /* 격자 자식이 폭을 밀어내지 않게 한다. */ .pd-sports-page .pd-main, .pd-sports-page .pd-league, .pd-sports-page .pd-toolbar, .pd-sports-page .pd-search, .pd-sports-page .pd-chips { min-width: 0; } /* 리그 카드는 본문 폭을 그대로 쓴다(카드 바깥 좌우 여백 없음). */ .pd-sports-page .pd-league { width: auto; max-width: none; margin-left: 0; margin-right: 0; } /* 배당 단추는 남는 폭을 셋이 똑같이 나눈다. */ .pd-sports-page .pd-pick { min-width: 0; } /* 하단 요약 바도 본문과 같은 기준선(14px)에 선다. */ .pd-slip-dock { left: 14px; right: 14px; } } /* ═════════════════════════════════════════════════════════════ 팁스터 상세(Picks & Predictions) — 좁은 화면은 압축형 카드 (rev226) ───────────────────────────────────────────────────────────── 왜 바꾸는가 ───────────────────────────────────────────────────────────── 여덟 칸짜리 가로 표를 390px 에 밀어 넣고 있었다. 글자를 11px 까지 줄여도 Match 뒤(Stake · Odds · Result)가 화면 밖으로 나가, 결과 하나를 보려고 옆으로 밀어야 했다. 칸을 지워 값을 감추지 않고 **한 줄을 세 줄로 접는다.** 1줄 [순번] 경기 이름 2줄 고른 쪽 배당 3줄 날짜 · 베팅액 결과 배지 T.O.P3(`.pd-top-m`) · Picks 카드와 **같은 방식**이다 — 같은 자료를 두 벌로 그려 두고 폭에 따라 한 벌만 보인다. 조회도 값도 늘지 않는다. ⚠ 범위는 `.pd-profile` 안뿐이다. 같은 `.pd-bet-table` 을 쓰는 View Profile(`.pd-mp-picks`)은 펼침 상자 안의 짧은 표라 그대로 둔다. 768px 이상에서는 이 블록이 걸리지 않아 데스크톱 표가 그대로다. ═════════════════════════════════════════════════════════════ */ .pd-profile .pd-btm-list { display: none; } @media (max-width: 767px) { /* 좌우 여백은 레이아웃(12px) 하나만 쓴다 (rev237). 이 화면만 `.pd-wrap.pd-rank` 의 640px 규칙(좌우 8px)이 그대로 남아 레이아웃 12px 과 겹쳐 20px 에서 시작했다 — 같은 자리에서 Picks(`/picks`)· T.O.P3·랭킹은 이미 12px 이라 이 화면만 안쪽으로 들어가 보였다. 그 세 화면과 **같은 처리**를 한다(각자 `padding-left/right: 0`). */ .pd-wrap.pd-profile { padding-left: 0; padding-right: 0; } .pd-profile .pd-bet-table { display: none; } .pd-profile .pd-btm-list { display: block; margin: 10px 0 0; padding: 0; list-style: none; } /* 카드는 표의 밀도를 그대로 갖는다 — 여백을 키워 한 화면에 두세 줄만 보이게 하지 않는다. 그림자·기울기는 두지 않고 테두리 한 줄뿐이다. */ .pd-btm-item { box-sizing: border-box; margin-bottom: 7px; padding: 12px 13px; border: 1px solid var(--t3-border, #cfd6de); border-radius: 7px; background: var(--t3-surface, #ffffff); color: var(--t3-text, #333333); font-size: 13px; } .pd-btm-item:last-child { margin-bottom: 0; } .pd-btm-l1, .pd-btm-l2, .pd-btm-l3 { display: flex; align-items: baseline; gap: 8px; min-width: 0; } /* 2·3줄은 순번 칸(26px)과 사이 여백(8px)만큼 들여 경기 이름 아래에 선다. */ .pd-btm-l2, .pd-btm-l3 { margin-top: 5px; padding-left: 34px; } .pd-btm-no { flex: 0 0 auto; min-width: 26px; color: var(--t3-text-3, #8b95a1); font-size: 12px; font-variant-numeric: tabular-nums; } /* 경기 이름이 가장 굵다. `Deportivo La Coruna vs Real Madrid` 처럼 긴 값도 `…` 로 자르지 않고 접는다 — 어느 경기인지가 이 화면의 본문이다. */ .pd-btm-match { flex: 1 1 auto; min-width: 0; color: var(--t3-text, #2b3440); font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } /* 운영자 `×` — 표와 같은 단추다. 줄 높이를 늘리지 않게 가운데로 세운다. */ .pd-btm-del { flex: 0 0 auto; align-self: center; } .pd-btm-pick { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .pd-btm-odds { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; } .pd-btm-meta { flex: 1 1 auto; min-width: 0; color: var(--t3-text-2, #5a6b80); font-size: 12px; font-variant-numeric: tabular-nums; } .pd-btm-dot { margin: 0 5px; } /* 배지는 표와 같은 요소다. 640px 아래에서 표용으로 줄여 둔 값(9px · 2px 5px)이 카드에서는 너무 작아, 카드 줄에 맞는 크기만 다시 잡는다. 색·말은 위 `.pd-bt-badge.is-*` 규칙 그대로다. */ .pd-btm-l3 .pd-bt-badge { flex: 0 0 auto; padding: 0; font-size: 11.5px; } /* 결과색 — PC 표(`.pd-bt-row.is-win > td`)와 **같은 값**이다. 판정은 모델이 붙인 색조(win · lose · none)이고 여기서 다시 판단하지 않는다. PENDING · VOID · CANCELLED 는 규칙을 두지 않는다 — 표에서도 칠하지 않던 자리라 카드 기본 바탕이 그대로 드러난다. */ .pd-btm-item.is-win { background: #d9f2dd; border-color: #b7e0c0; } .pd-btm-item.is-lose { background: #f8cfcb; border-color: #edb8b2; } html[data-theme="dark"] .pd-btm-item { background: var(--t3-surface); border-color: var(--t3-border); } html[data-theme="dark"] .pd-btm-item.is-win { background: #14301f; border-color: #1f4a2e; } html[data-theme="dark"] .pd-btm-item.is-lose { background: #341c1e; border-color: #4d292c; } /* 제목 줄 — 닉네임이 남는 폭을 쓰고 `View Profile` 은 제 폭을 지킨다. (640px 아래의 글자 크기·줄 간격은 위 블록이 이미 정한다.) */ .pd-profile .pd-picks-title-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .pd-profile .pd-picks-profile-btn { flex: 0 0 auto; } } /* ═════════════════════════════════════════════════════════════ VIEW PROFILE — 좁은 화면 (rev230) ───────────────────────────────────────────────────────────── 무엇이 잘리고 있었는가 ───────────────────────────────────────────────────────────── 화면이 잘린 것이 아니라 **표가 상자보다 넓었다.** 세 표에 PC 기준 바닥값이 박혀 있고(`.pd-mp-sum` 560px · `.pd-mp-table` 640px · 펼친 픽 표 720px), 그 상자(`.pd-mp-scroll`)가 `overflow-x: auto` 라 390px 화면에서는 오른쪽 칸이 상자 밖에 있었다. 몸통 가로 스크롤이 아니라 상자 안 가로 스크롤이었고, 그래서 눌러 보기 전에는 값이 있는지도 알 수 없었다. 여기서 하는 일은 **바닥값을 풀고 자리를 다시 앉히는 것**이다. `overflow: hidden` 으로 넘친 부분을 감추지 않는다. 요약 6칸 한 줄 표 → 3열 × 2줄 격자 (머리글이 값 위로) Period 5칸 표 → 달마다 카드 한 장 펼친 픽 표 → **그대로 둔다** (지시서 §12) 요약·Period 는 마크업을 새로 만들지 않고 **같은 표를 다시 앉힌다** — `display: contents` · `display: grid` 뿐이라 값·조회·펼치기 동작이 그대로다. 768px 이상은 이 블록이 걸리지 않아 PC 화면이 그대로다. ═════════════════════════════════════════════════════════════ */ /* 넓은 화면에서는 좁은 화면 전용 두 조각을 그리지 않는다. */ .pd-mp .pd-mp-sub { display: none; } .pd-mp .pd-mp-month-long { display: none; } @media (max-width: 767px) { /* 좌우 여백은 레이아웃(12px) 하나만 쓴다 — 랭킹·Picks·TOP3 와 같은 처리. 640px 아래에서 8px 을 더하던 규칙을 여기서 되돌린다(합 20px → 12px). */ .pd-wrap.pd-mp { box-sizing: border-box; padding-left: 0; padding-right: 0; } .pd-mp .pd-mp-scroll, .pd-mp .pd-mp-sum, .pd-mp .pd-mp-table { max-width: 100%; } /* ── ① 팁스터 줄 ─────────────────────────────────────── */ /* 아이콘은 첫 줄에 두고, 오른쪽이 닉네임 + 보조 문구 두 줄이 된다. */ .pd-mp-head { align-items: flex-start; } .pd-mp .pd-mp-id { min-width: 0; } .pd-mp .pd-mp-nick { line-height: 1.25; } .pd-mp .pd-mp-sub { display: block; margin: 2px 0 0; color: var(--t3-text-2, #5a6b80); font-size: 12px; font-weight: 500; } /* ── ② 요약 — 3열 × 2줄 ──────────────────────────────── */ /* 옆으로 밀 것이 없으므로 이 상자만 스크롤을 끈다(펼친 픽 표는 그대로). */ .pd-mp .pd-mp-scroll-sum { overflow: visible; } .pd-mp .pd-mp-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--t3-border, #dde3ea); } /* 표 뼈대는 자리만 내주고 칸이 곧 격자 항목이 된다. */ .pd-mp .pd-mp-sum thead, .pd-mp .pd-mp-sum tbody, .pd-mp .pd-mp-sum tr { display: contents; } .pd-mp .pd-mp-sum th, .pd-mp .pd-mp-sum td { display: block; min-width: 0; height: auto; border: 0; background: transparent; text-align: center; } /* 이름표는 값보다 작고 여리게, 값은 한 단계 크게. 색은 건드리지 않는다 — 손익(`.pd-profit-*`)이 쓰는 의미색을 눌러서는 안 된다. */ .pd-mp .pd-mp-sum th { padding: 9px 6px 0; color: var(--t3-text-2, #5a6b80); font-size: 11px; font-weight: 600; letter-spacing: .01em; } .pd-mp .pd-mp-sum td { padding: 1px 6px 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } /* 이름표 + 값 한 쌍이 한 칸이다. 쌍 사이만 선을 긋는다 — 1·2·3번 칸은 1·2줄, 4·5·6번 칸은 3·4줄에 앉힌다. */ .pd-mp .pd-mp-sum th:nth-child(1) { grid-area: 1 / 1; } .pd-mp .pd-mp-sum th:nth-child(2) { grid-area: 1 / 2; } .pd-mp .pd-mp-sum th:nth-child(3) { grid-area: 1 / 3; } .pd-mp .pd-mp-sum td:nth-child(1) { grid-area: 2 / 1; } .pd-mp .pd-mp-sum td:nth-child(2) { grid-area: 2 / 2; } .pd-mp .pd-mp-sum td:nth-child(3) { grid-area: 2 / 3; } .pd-mp .pd-mp-sum th:nth-child(4) { grid-area: 3 / 1; } .pd-mp .pd-mp-sum th:nth-child(5) { grid-area: 3 / 2; } .pd-mp .pd-mp-sum th:nth-child(6) { grid-area: 3 / 3; } .pd-mp .pd-mp-sum td:nth-child(4) { grid-area: 4 / 1; } .pd-mp .pd-mp-sum td:nth-child(5) { grid-area: 4 / 2; } .pd-mp .pd-mp-sum td:nth-child(6) { grid-area: 4 / 3; } .pd-mp .pd-mp-sum th:nth-child(2), .pd-mp .pd-mp-sum th:nth-child(3), .pd-mp .pd-mp-sum td:nth-child(2), .pd-mp .pd-mp-sum td:nth-child(3), .pd-mp .pd-mp-sum th:nth-child(5), .pd-mp .pd-mp-sum th:nth-child(6), .pd-mp .pd-mp-sum td:nth-child(5), .pd-mp .pd-mp-sum td:nth-child(6) { border-left: 1px solid var(--t3-border, #dde3ea); } .pd-mp .pd-mp-sum th:nth-child(4), .pd-mp .pd-mp-sum th:nth-child(5), .pd-mp .pd-mp-sum th:nth-child(6) { border-top: 1px solid var(--t3-border, #dde3ea); } /* 어두운 화면에서도 이름표가 값보다 앞서 나서지 않게 한다. 위쪽 다크 규칙이 머리글을 본문색(밝게)으로 올려 두었기 때문이다. 손익 색은 `td.pd-profit-*` 이 한 단계 깊어 그대로 이긴다. */ html[data-theme="dark"] .pd-mp .pd-mp-sum th { background: transparent; color: var(--t3-text-2); } html[data-theme="dark"] .pd-mp .pd-mp-sum td { color: var(--t3-text); } /* ── ③ Period — 달마다 카드 한 장 ────────────────────── */ .pd-mp .pd-mp-title { margin-top: 22px; } .pd-mp .pd-mp-table, .pd-mp .pd-mp-table tbody { display: block; width: 100%; min-width: 0; } .pd-mp .pd-mp-table thead { display: none; } /* 표기 갈아 끼우기 — 좁은 화면은 `August 2026` 만 보인다. */ .pd-mp .pd-mp-month-short { display: none; } .pd-mp .pd-mp-month-long { display: inline; } .pd-mp .pd-mp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; box-sizing: border-box; margin-bottom: 8px; padding: 12px 13px; border: 1px solid var(--t3-border, #dde3ea); border-radius: 7px; background: var(--t3-surface, #ffffff); } /* ⚠ PC 열 폭(16% · 30% · 15% · 22% · 17%)은 이름이 셋이라 아래 `td` 규칙으로는 이기지 못한다. 같은 깊이로 다시 적어 격자가 폭을 정하게 한다. */ .pd-mp .pd-mp-table .pd-mp-month, .pd-mp .pd-mp-table .pd-mp-rate, .pd-mp .pd-mp-table .pd-mp-odds, .pd-mp .pd-mp-table .pd-mp-profit, .pd-mp .pd-mp-table .pd-mp-more { width: auto; } .pd-mp .pd-mp-row > td { display: block; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; text-align: left; font-size: 13px; } /* 바탕은 **카드 한 장**이 갖는다 (rev232). 칸마다 바탕을 칠하던 표 규칙(다크의 `.pd-mp-row > td` 와 줄 hover)이 카드에서는 네 칸이 각각 띠로 보인다. 손가락으로 `+ Picks` 를 누르면 그 hover 가 그대로 남아 띠가 붙박이가 됐다(마우스가 없으니 풀리지 않는다). 표에서는 그대로 두고 **좁은 화면에서만** 칸 바탕을 비운다 — 특이도가 같아야 이기므로 `html[data-theme]` 까지 맞춰 적는다. */ html[data-theme="dark"] .pd-mp .pd-mp-row > td, html[data-theme="dark"] .pd-mp .pd-mp-row:hover > td { background: transparent; } /* 1줄 — 달 이름과 `+ Picks` */ .pd-mp .pd-mp-row > td.pd-mp-month { grid-area: 1 / 1; font-size: 14.5px; font-weight: 700; color: var(--t3-text, #2b3440); } .pd-mp .pd-mp-row > td.pd-mp-more { grid-area: 1 / 2; text-align: right; } .pd-mp .pd-mp-toggle, .pd-mp .pd-mp-none { padding: 0; font-size: 13px; } /* 2줄 — `3W 0L (100.00%)` 한 줄 */ .pd-mp .pd-mp-row > td.pd-mp-rate { grid-area: 2 / 1 / 3 / -1; margin-top: 8px; color: var(--t3-text-2, #5a6b80); } /* 3·4줄 — 이름표는 왼쪽, 값은 오른쪽. 이름표 문구는 템플릿이 넘긴다. */ .pd-mp .pd-mp-row > td.pd-mp-odds { grid-area: 3 / 1 / 4 / -1; } .pd-mp .pd-mp-row > td.pd-mp-profit { grid-area: 4 / 1 / 5 / -1; } .pd-mp .pd-mp-row > td.pd-mp-odds, .pd-mp .pd-mp-row > td.pd-mp-profit { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 5px; font-weight: 600; } .pd-mp .pd-mp-row > td[data-label]::before { content: attr(data-label); flex: 0 0 auto; color: var(--t3-text-2, #5a6b80); font-size: 12px; font-weight: 500; } /* 펼친 픽 목록은 **카드와 한 칸 띄운 별개의 판**이다 (rev235). 처음에는 카드 아래에 붙여(음수 여백 + 위쪽만 각진 모서리) 이어 붙은 것처럼 두었는데, 달 카드의 마지막 줄(Profit)과 표 머리글이 맞닿아 어디까지가 요약이고 어디부터가 내역인지 읽히지 않았다. 카드 사이 간격(8px)과 같은 만큼 띄우고 네 모서리를 같게 둔다. ⚠ 접힘 규칙(`.pd-mp-picks[hidden]`)을 이 블록보다 앞에서 선언했으므로 같은 깊이로 다시 적어 둔다 — 그러지 않으면 늘 펼쳐진다. */ .pd-mp .pd-mp-picks { display: block; margin: 8px 0 10px; } .pd-mp .pd-mp-picks[hidden] { display: none; } .pd-mp .pd-mp-picks > td { display: block; width: auto; padding: 0; border: 1px solid var(--t3-border, #dde3ea); border-radius: 7px; background: var(--t3-surface, #ffffff); } } /* ═══════════════════════════════════════════════════════════════════ Scores — Sports Data Layer 경기 목록 (PHASE 6-1 · UI 재구성) ═══════════════════════════════════════════════════════════════════ ⚠ 선택자는 전부 `.pd-scores` 안으로 한정한다. 이 파일은 모든 회원 화면이 함께 읽으므로, 범위를 열어두면 Predictions·Ranking 이 같이 바뀐다. ⚠ 색상은 `--t3-*` 만 쓴다. 이 변수들은 레이아웃이 라이트/다크 두 벌로 정의해 두었고, 전환은 `html[data-theme="dark"]` 이 값을 바꿔 끼우는 것으로 끝난다. 여기서 #hex 를 적으면 그 자리만 다크에서 안 바뀐다. 이 블록에 하드코딩한 색은 하나도 없다. ───────────────────────────────────────────────────────────────── 폭 ───────────────────────────────────────────────────────────────── 레이아웃의 본문 칸은 1240px(`gpe_allcon_wrap0` 1280px − 좌우 여백)이고 `.pd-wrap` 은 그 안에서 가운데로 놓인다. 왼쪽에 붙어 보이던 것은 여백이 한쪽으로 몰려서가 아니라 960px 가 본문 칸에 비해 좁아서였다. 1000px 로 넓히되 그 이상 늘리지 않는다. Ranking·Picks 처럼 1400px 를 주면 1920px 화면에서 팀 이름과 스코어 사이가 손가락 몇 개만큼 벌어져 눈이 가로로 한참 이동한다. 이 목록은 **세로로 빨리 훑는 화면**이다. ───────────────────────────────────────────────────────────────── 밀도 ───────────────────────────────────────────────────────────────── 경기마다 카드를 두지 않는다(UI §5·§39). 리그 하나가 한 판이고, 그 안에서 얇은 선으로 경기를 나눈다. 강조는 두 곳뿐이다 — 진행 시간과 스코어. 팀 이름은 전부 같은 굵기다(UI §9). */ /* 화면 폭 (SCORE-UI-4.4). 본문 칸은 1280px 이다 — `.gpe_allcon_wrap0` 이 인라인 style 로 그 폭을 갖고, 오른쪽 사이드 상자는 `display:none` 이라 본문이 전부 쓴다. 그 안에서 카드를 1048px(4.3) 에 두었더니 좌우가 100px 씩 남아 여전히 작아 보였다. 본문을 충분히 쓰는 값으로 올린다. wrap 1220px → 카드 1188px → 좌우 여백 (1280-1220)/2 = 30px 1048px 이하로 되돌리지 않는다. 화면 끝까지 100% 로 붙이지도 않는다 — 본문 칸보다 크게 잡으면 이 레이아웃은 가로 스크롤이 생긴다. */ .pd-wrap.pd-scores { max-width: 1220px; } /* ── 날짜 고르개 ───────────────────────────────────────────────── `‹ 📅 Aug 16 Sun ›` 한 줄. 날짜 목록은 가운데 단추를 눌렀을 때만 펼친다. 일곱 칸을 늘 펴 두던 방식을 대신한다. 그 줄은 폭을 다 쓰면서도 경기 목록에는 아무것도 더해 주지 않았고, 모바일에서는 날짜만 가로로 밀어야 했다. 이제 날짜 줄은 한 줄짜리이고 어느 폭에서도 가로 스크롤이 없다. */ /* ── 거르개 줄 ─────────────────────────────────────────────────── 왼쪽 탭(무엇을) · 오른쪽 날짜(언제를). 한 줄이다. 좁아지면 `flex-wrap` 으로 날짜가 다음 줄로 내려간다 — 글자나 여백을 줄여 억지로 한 줄을 지키지 않는다. */ .pd-scores .pd-sc-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--t3-border-soft); margin-bottom: 10px; } /* 좁은 화면의 세로 공간 (SCORE-UI-2). 실화면에서 첫 경기가 나오기 전에 거르개·날짜·구분선이 세로를 꽤 먹었다. 글자를 줄이는 대신 **여백부터** 줄인다 — 글자를 줄이면 눌러야 하는 대상이 먼저 작아진다. 단추 자체의 높이(28px)는 지킨다. */ @media (max-width: 640px) { .pd-scores .pd-sc-bar { gap: 6px; padding-bottom: 7px; margin-bottom: 8px; } /* 종목 줄도 여백만 줄인다. 글자를 줄이면 누르기 어려워진다. */ .pd-scores .pd-sc-sports { gap: 12px; margin-bottom: 6px; } .pd-scores .pd-sc-sport { font-size: 13px; padding-bottom: 5px; } .pd-scores .pd-sc-period { font-size: 11.5px; } } .pd-scores .pd-sc-dsel { position: relative; /* 목록이 이 상자를 기준으로 붙는다 */ /* `inline-flex` 로 두면 줄 상자(line box)가 아래에 빈 칸을 만든다. 블록으로 두고 폭만 내용에 맞춘다. */ display: flex; width: -moz-fit-content; width: fit-content; align-items: center; gap: 2px; margin-left: auto; /* 줄의 오른쪽 끝 */ padding: 2px; border: 1px solid var(--t3-border); border-radius: 7px; background: var(--t3-surface); max-width: 100%; box-sizing: border-box; } /* 좌·우 이동. 눈에 보이는 화살표는 작아도 누르는 자리는 32px 이다. */ .pd-scores .pd-sc-dstep { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 5px; color: var(--t3-text-2); font-size: 17px; line-height: 1; text-decoration: none; } .pd-scores .pd-sc-dstep:hover { background: var(--t3-surface-2); color: var(--t3-green-text); } /* 조회 범위 끝. 링크가 아니므로 눌리지 않는다는 것이 보여야 한다. */ .pd-scores .pd-sc-dstep.is-off { color: var(--t3-text-3); opacity: .45; } .pd-scores .pd-sc-dbtn { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--t3-text); font-size: 13px; font-family: inherit; line-height: 1; cursor: pointer; } .pd-scores .pd-sc-dbtn:hover { background: var(--t3-surface-2); } .pd-scores .pd-sc-dbtn[aria-expanded="true"] { background: var(--t3-surface-2); } .pd-scores .pd-sc-dicon { flex: none; color: var(--t3-green-text); } .pd-scores .pd-sc-dtext { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-scores .pd-sc-ddow { flex: none; font-size: 11.5px; color: var(--t3-text-2); } /* ── 날짜 목록 ─────────────────────────────────────────────────── z-index 는 20 이다. 경기 목록·탭보다 위이면 충분하고, 레이아웃 머리줄 (`.t3-hd`, z-index 100)보다는 아래로 둔다 — 목록이 머리줄을 덮으면 메뉴를 누를 수 없다. */ .pd-scores .pd-sc-dpanel { /* 고르개가 줄의 오른쪽 끝에 있으므로 목록도 오른쪽에 맞춰 내려온다. 왼쪽에 맞추면 목록이 콘텐츠 밖으로 삐져나간다. */ position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 100%; max-width: 260px; box-sizing: border-box; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px; border: 1px solid var(--t3-border); border-radius: 7px; background: var(--t3-surface); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .pd-scores .pd-sc-dpanel[hidden] { display: none; } .pd-scores .pd-sc-dopt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; color: var(--t3-text-2); font-size: 12.5px; line-height: 1.3; text-decoration: none; white-space: nowrap; } .pd-scores .pd-sc-dopt:hover { background: var(--t3-surface-2); } .pd-scores .pd-sc-dopt-name { flex: 1 1 auto; min-width: 0; color: var(--t3-text); } .pd-scores .pd-sc-dopt-dow { flex: none; color: var(--t3-text-3); font-size: 11px; } /* 경기 수. 이미 받아 둔 값이라 여기 두는 데 질의가 더 들지 않는다. */ .pd-scores .pd-sc-dopt-num { flex: none; color: var(--t3-text-3); font-size: 11px; font-variant-numeric: tabular-nums; } /* 오늘과 선택일은 다른 것이다. 오늘은 글자만 초록, 지금 보고 있는 날은 초록 채움 — 둘이 겹치면 채움 하나로 끝낸다(§15·§16). */ .pd-scores .pd-sc-dopt.is-today .pd-sc-dopt-name { color: var(--t3-green-text); font-weight: 700; } .pd-scores .pd-sc-dopt.is-current { background: var(--t3-green); } .pd-scores .pd-sc-dopt.is-current .pd-sc-dopt-name { color: #fff; font-weight: 700; } .pd-scores .pd-sc-dopt.is-current .pd-sc-dopt-dow, .pd-scores .pd-sc-dopt.is-current .pd-sc-dopt-num { color: rgba(255,255,255,.85); } /* ── 상태 탭 ─────────────────────────────────────────────────── 초록은 이 사이트의 색이다. 참고 화면의 빨강을 가져오지 않는다(UI §22). */ /* 종목 줄 (SCORE-BASKETBALL-1). 거르개(All/Live/…) 위에 한 줄. 거르개와 모양을 일부러 다르게 둔다 — 둘 다 알약 모양이면 "지금 고른 것"이 두 줄에 두 개 보여 무엇이 상위 선택인지 흐려진다. 종목은 밑줄, 거르개는 알약이다. 높이를 크게 쓰지 않는다. 이 줄은 하루에 한 번 누르는 자리이고, 화면은 경기를 보러 오는 곳이다. */ .pd-scores .pd-sc-sports { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .pd-scores .pd-sc-sport { padding: 3px 1px 6px; font-size: 13.5px; font-weight: 600; color: var(--t3-text-3); text-decoration: none; border-bottom: 2px solid transparent; } .pd-scores .pd-sc-sport:hover { color: var(--t3-text); } .pd-scores .pd-sc-sport.is-active { color: var(--t3-text); border-bottom-color: var(--t3-green); } /* 농구 진행 표시(`Q1`…`Q4` · `OT`). 축구 시계와 같은 자리·같은 색을 쓴다 — 둘 다 "지금 진행 중"이라는 같은 뜻이기 때문이다. 다만 초가 흐르지 않으므로 표 숫자 설정은 두지 않는다. */ .pd-scores .pd-sc-period { font-size: 12px; font-weight: 700; color: var(--t3-danger); letter-spacing: .02em; } /* 탭 줄. 아래 경계와 여백은 이제 `.pd-sc-bar` 가 갖는다 — 한 줄 안에서 탭만 밑줄을 그으면 날짜와 선이 어긋난다. */ /* 네 칸을 한 덩어리로 묶는다 (SCORE-UI-1). 낱개 알약 넷은 "각각 켤 수 있는 것"처럼 보인다. 상태는 하나만 고를 수 있으므로 segmented 로 둔다 — 테두리 하나 안에서 선택만 채워진다. */ .pd-scores .pd-sc-tabs { display: flex; gap: 2px; flex-wrap: nowrap; min-width: 0; padding: 2px; border: 1px solid var(--t3-border); border-radius: 7px; background: var(--t3-surface); } .pd-scores .pd-sc-tab { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 0; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--t3-text-2); text-decoration: none; background: transparent; } .pd-scores .pd-sc-tab:hover { color: var(--t3-text); background: var(--t3-surface-2); } .pd-scores .pd-sc-tab.is-active { background: var(--t3-green); color: #fff; font-weight: 700; } .pd-scores .pd-sc-tabnum { font-size: 11px; color: var(--t3-text-3); font-variant-numeric: tabular-nums; } .pd-scores .pd-sc-tab.is-active .pd-sc-tabnum { color: rgba(255,255,255,.85); } /* ── 리그 머리 ─────────────────────────────────────────────────── 목록과 붙은 한 덩어리로 만든다. 바탕 한 단계와 테두리까지만 쓰고 그림자·큰 모서리는 넣지 않는다 — 리그가 열 개면 카드 열 개가 된다. */ /* 리그 사이 간격 (SCORE-UI-3에서 18 → 12). 글로벌 라이브가 들어오면서 한 화면의 리그가 8~10개에서 **84개**가 됐다. 18px 을 그대로 두면 리그 사이 여백만으로 화면 하나 반이 지나간다. 12px 은 경기 사이(1px 선)보다 여전히 열 배 넓어 경계는 그대로 읽힌다. */ .pd-scores .pd-sc-league { margin-bottom: 12px; } .pd-scores .pd-sc-league:last-of-type { margin-bottom: 4px; } /* 리그 머리 (SCORE-UI-2에서 대비 한 단계 강화). 실화면에서 머리와 경기 줄의 밝기 차가 약해 목록이 한 덩어리로 읽혔다. 바탕을 한 단계 더 밝히고(`surface-3`) 아래 테두리만 진하게 둔다. gradient·그림자·큰 모서리는 쓰지 않는다 — 리그가 열 개면 그 장식이 열 번 반복된다. 높이는 그대로다(패딩 6px). */ .pd-scores .pd-league-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; box-sizing: border-box; border: 1px solid var(--t3-border); border-bottom: 2px solid var(--t3-text-3); border-radius: 6px 6px 0 0; background: var(--t3-surface-3); } /* 국기 (SCORE-FLAG-1에서 글자 → 그림). 예전에는 유니코드 지역 표시 문자였다. 그건 보는 쪽 글꼴에 국기 글리프가 있어야만 국기로 그려지는데, 윈도우 크롬·엣지에는 그 글리프가 없어 `PT` 두 글자로 떨어졌다. 이제 우리 서버의 SVG 를 `` 로 넣는다 — 글꼴과 무관하다. 크기는 예전 이모지가 차지하던 자리에 맞춘다(14px 글자 ≈ 폭 18px). 원본 비율 4:3 을 그대로 쓰고 찌그러뜨리지 않는다. 원형 자르기·큰 배지·그림자 는 두지 않는다 — 리그 머리에 여든 번 반복되는 자리다. 아주 얇은 테두리 하나만 둔다. 흰 바탕이 큰 국기(일본·폴란드 등)가 밝은 화면에서 배경에 녹아 사라지기 때문이다. */ .pd-scores .pd-sc-flag { flex: none; display: block; width: 18px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 1px; box-shadow: 0 0 0 1px rgba(127, 137, 149, .25); } /* 접기 단추. 리그 머리 오른쪽 끝. 눌리면 화살표가 뒤집힌다. */ .pd-scores .pd-sc-lgtoggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; color: var(--t3-text-3); transition: color .12s ease; } .pd-scores .pd-sc-lgtoggle:hover { color: var(--t3-text); background: var(--t3-surface-3); } .pd-scores .pd-sc-lgtoggle svg { transition: transform .15s ease; } .pd-scores .pd-sc-lgtoggle[aria-expanded="false"] svg { transform: rotate(180deg); } .pd-scores .pd-sc-league.is-collapsed .pd-sc-list { display: none; } .pd-scores .pd-sc-league.is-collapsed .pd-league-head { border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .pd-scores .pd-sc-lgtoggle svg { transition: none; } } /* 화면에서만 감춘다. 읽어 주는 장치에는 남는다. 원래 `.pd-scores` 안에서만 썼다(240행 collapse 안내). 최종 SEO 안정화 §18·§19에서 Home·Score·Picks·Top3·Rank 다섯 개 허브 페이지의 H1에도 같은 클래스를 그대로 재사용한다 — rev93·rev117이 이미 "제목 줄을 화면에 또 넣지 않는다"고 정한 자리라 보이는 레이아웃은 건드리지 않되, DOM에는 실제 H1이 있어야 하기 때문이다(새 유틸리티 클래스를 만들지 않는다). 범위를 좁히던 `.pd-scores` 접두사를 떼도 동작은 그대로다 — 순수하게 시각적으로만 감추는 규칙이라 다른 화면에 번져도 부작용이 없다. */ .pd-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 리그 이름 (SCORE-UI-3에서 13 → 14px). 실화면에서 위계가 뒤집혀 있었다 — 리그 이름이 13px, 그 아래 팀 이름이 13.5px 였다. 굵기(700 대 400)만으로 버티고 있었던 셈이다. 리그가 83개인 화면에서 머리글은 목록보다 확실히 커야 한다. 머리 높이는 그대로다 — 높이를 정하는 것은 글자가 아니라 접기 단추(22px)다. */ .pd-scores .pd-league-name { min-width: 0; font-size: 14px; font-weight: 700; color: var(--t3-text); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 국가 코드는 값이 있을 때만 렌더된다. 없는 리그가 많아 자리를 비워 둔다. */ .pd-scores .pd-sc-cc { flex: none; font-size: 10px; letter-spacing: .04em; color: var(--t3-text-3); border: 1px solid var(--t3-border); border-radius: 3px; padding: 0 4px; } /* 숫자 두 개가 서로 밀리지 않게 묶어 둔다. 리그 이름이 길면 이름 쪽이 줄고 숫자는 자리를 지킨다(UI §43). */ .pd-scores .pd-sc-lgmeta { flex: none; margin-left: auto; display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } /* 진행 중인 경기 수. 초록 점 하나면 충분하다 — 깜빡이지 않는다(§18). */ .pd-scores .pd-sc-lglive { font-size: 11px; font-weight: 700; color: var(--t3-green-text); } .pd-scores .pd-sc-lglive::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--t3-green); vertical-align: 1px; } /* 이 탭에 보이는 그 리그의 전체 경기 수. 라이브 수와 뜻이 다르므로 굵기·색을 낮춰 둘을 구분한다(UI §14). */ .pd-scores .pd-sc-lgtotal { font-size: 11px; color: var(--t3-text-3); } /* 두 숫자를 그냥 나란히 두면 `14 16` 이 되어 서로 무슨 관계인지 읽히지 않는다. 빗금을 넣어 **14 중 진행 중, 16 중 전체**로 읽히게 한다. 빗금은 두 숫자가 **함께 있을 때만** 필요하므로 인접 형제 선택자에 맡긴다 — 템플릿에 조건을 하나 더 두지 않는다. 그래서 세 가지 표시가 마크업 변경 없이 나온다. 진행 중 있음 · 일부 ● 14 / 16 진행 중이 전부(Live 탭) ● 14 진행 중 없음 16 */ .pd-scores .pd-sc-lglive + .pd-sc-lgtotal::before { content: '/'; margin-right: 4px; color: var(--t3-text-3); } /* ── 경기 목록 ─────────────────────────────────────────────────── */ .pd-scores .pd-sc-list { border: 1px solid var(--t3-border); border-top: 0; border-radius: 0 0 6px 6px; background: var(--t3-surface); overflow: hidden; } /* 경기 한 줄 = 상태 칸 + 경기 칸. 스코어를 세 번째 열로 따로 두지 않는다. 팀 이름과 스코어를 한 줄 안에 두면 둘이 어긋날 수가 없고, 나중에 팀 로고가 생겨도 이 줄 안에서 끝난다. */ /* 칸 폭과 높이는 **실제로 들어가는 글자**에서 나온 값이다. 상태 칸 46px — 가장 긴 표시값이 `94'+5` 와 `04:00` 이고, 12px 표 숫자(tabular)로 재면 34px 안쪽이다. 나머지 12px 이 여유다. 이 칸에는 ellipsis 를 걸지 않는다 — 경기 시간이 잘리면 안 되는 정보라, 좁아서 잘릴 바에는 칸이 넓어야 한다. 세로는 글자 크기가 아니라 여백으로 줄인다(패딩 7→5, 줄높이 1.45→1.35). 같은 경기의 두 줄 사이는 2px, 다른 경기와는 11px(5+5+선 1) 이라 경기 경계가 여전히 다섯 배 넓다. */ /* 줄 격자 (SCORE-UI-3). [상태 60px] │ [팀 남는 폭 전부] [스코어 48px] 세 칸 완결 구조 (SCORE-UI-4.5). 60(상태) + 12 + 1022(팀 1fr) + 12 + 48(스코어) = 1154 네 번째 칸(배당)은 SCORE-MULTISPORT-1 에서 걷어냈다. 그릴 것이 없으면 칸도 두지 않는다 — 빈 격자 칸은 화면에서 "미완성 열" 로 보인다. 오른쪽 공간이 필요해지면 그때 페이지 레이아웃(사이드바 등)에서 쓴다. = 카드 1188 − 테두리 2 − 줄 여백 32 4.4 는 팀 칸을 650px 로 묶고 오른쪽에 네 번째 칸(372px)을 뒀다. 카드는 넓은데 정보는 65% 에서 끝나, 화면에서 "넓은 판 왼쪽에 작은 표를 넣어 둔" 모양이 됐다. **네 번째 칸을 없애고 팀 칸을 `1fr` 로 푼다.** 가운데가 넓어 보이는 것은 빈 예약이 아니다. 팀 이름은 왼쪽, 스코어는 오른쪽 — 이름과 결과를 양 끝에서 훑어 비교하는 것이 스코어보드의 읽는 방식이다. 상태 칸 오른쪽 실선이 세 영역을 갈라 준다. 줄 좌우 여백을 10 → 16px 로 넓혀 스코어가 카드 테두리에 붙지 않게 한다. 스코어는 **오른쪽 정렬**이다. 가운데 정렬로 두면 `0` 과 `12` 의 자릿수가 달라질 때 숫자가 좌우로 흔들린다. 오른쪽 정렬은 일의 자리가 늘 같은 X 에 선다(지시서 §16). */ .pd-scores .pd-sc-list .pd-sc-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 48px; align-items: stretch; gap: 0 12px; padding: 4px 16px; border-top: 1px solid var(--t3-border-soft); } .pd-scores .pd-sc-list > .pd-sc-row:first-child { border-top: 0; } /* 이제 경기 줄은 상세로 가는 링크다(PHASE 6-2). `` 로 바뀌었으므로 글자색·밑줄을 되돌려 놓는다 — 목록의 모양은 하나도 바뀌지 않는다. */ .pd-scores a.pd-sc-row { color: inherit; text-decoration: none; } .pd-scores .pd-sc-row:hover { background: var(--t3-surface-2); } /* 상태 칸. ⚠ 이 칸의 내용은 자동 갱신이 통째로 갈아 끼운다(`state.innerHTML = ''` 뒤 span 하나). 그래서 자식 구조에 기대는 규칙을 두지 않는다 — 가운데 맞춤은 칸 자신이 한다. 50px 은 가장 긴 실제 값에서 나온다. 현재 데이터에서 `90'+4`(추가 시간 4건)와 `04:00` 이 가장 길고, 12px 표 숫자로 34px 안쪽이다. 잘림 처리를 걸지 않는다 — 경기 시간은 잘리면 안 되는 값이다. */ .pd-scores .pd-sc-list .pd-sc-state { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--t3-border-soft); } /* 줄바꿈을 막는다. 한국어 '전반종료'가 네 글자라 두 줄로 깨졌던 자리다 — 이제 이 화면은 'HT' 를 쓰지만(§11), 다른 언어가 긴 값을 넣더라도 칸을 넘칠지언정 두 줄이 되지는 않게 못 박아 둔다. */ .pd-scores .pd-sc-state { font-size: 11.5px; color: var(--t3-text-2); text-align: center; line-height: 1.3; white-space: nowrap; } .pd-scores .pd-sc-time { font-size: 12px; font-variant-numeric: tabular-nums; } .pd-scores .pd-sc-ft { font-size: 11px; font-weight: 600; color: var(--t3-text-3); } /* 결과 미확정. 종료도 예정도 아니라는 것이 보여야 한다. ⚠ `.pd-sc-other` 는 줄(`.pd-sc-row.pd-sc-other`)에도 붙는 이름이라 상태 칸 안으로 한정한다. 그러지 않으면 이 글자 크기가 줄 전체의 상속 기준이 된다. */ .pd-scores .pd-sc-state .pd-sc-other { font-size: 10.5px; color: var(--t3-text-3); } /* 진행 중 강조. 색과 굵기까지만 쓴다 — 움직이는 요소를 넣지 않는다. */ /* 진행 중 표시는 **붉은 계열**이다 (SCORE-UI-1). 초록은 이 화면에서 "지금 고른 것"(선택된 거르개)을 뜻한다. 같은 초록이 진행 시간에도 쓰이면 두 뜻이 겹친다. 라이브는 상태이므로 상태색을 쓴다. 색만으로 구분하지 않는다 — `72'` · `HT` 처럼 글자가 늘 함께 있다(§7). */ .pd-scores .pd-sc-clock { font-size: 12px; font-weight: 700; color: var(--t3-danger); font-variant-numeric: tabular-nums; } /* 진행 표시선을 뺀다 (SCORE-UI-3). SCORE-UI-2 에서 줄 왼쪽에 2px 붉은 선을 뒀다. 그때 화면에는 라이브가 10~20경기였다. 지금은 **146경기 · 84리그**다. 라이브 탭에서는 거의 모든 줄에 선이 붙어, 구분 표시가 아니라 목록의 배경 무늬가 됐다. 선택지를 견줬다. A 유지 146줄에 반복 — 노이즈 B 투명도 낮추기 약해질수록 있으나 마나 C 선을 빼고 분(minute)만 강조 ← 채택 D 작은 점 추가 점도 146개다. 선을 점으로 바꿀 뿐 E 큰 배지 §7 이 금지 라이브 신호는 이미 글자로 있다 — `72'` · `HT` 가 붉고 굵다(색만으로 구분하지 않는다는 규칙도 그대로 지켜진다). 스코어도 라이브만 흰색·굵게라 줄 안에 신호가 둘이다. 세 번째는 필요 없다. 경기 상세(`.pd-match .pd-md-row.pd-sc-live`)의 표시선은 그대로 둔다 — 거기는 줄이 하나뿐이라 반복 문제가 없다. */ /* 팀 열과 스코어 열 (SCORE-UI-3). 두 열은 각각 자식이 **둘**(HOME·AWAY)인 세로 묶음이다. 예전에는 이름과 숫자를 한 줄 안에 두었는데, 그 이유는 열을 따로 쌓으면 반 줄씩 어긋날 수 있어서였다. 그 위험은 **줄 높이를 두 열에 같은 값으로 못 박아** 없앤다 — 아래 `line-height: 18px` 이 그것이고, 배수(1.35)가 아니라 고정값인 이유가 이것이다. 배수는 글꼴 크기가 열마다 달라지는 순간 어긋나고, 고정값은 어긋날 수가 없다. 이렇게 두면 148줄이 되어도 스코어가 늘 같은 X 에 선다. 배당 열이 생기면 이 열 오른쪽(예약 칸)에 붙는다. */ .pd-scores .pd-sc-match, .pd-scores .pd-sc-scores { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; } .pd-scores .pd-sc-team { font-size: 14px; font-weight: 400; color: var(--t3-text); height: 19px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 스코어 값. 열 폭 32px 은 두 자리(`12`)를 tabular 숫자로 재고 남긴 값이다. 세 자리 스코어는 축구에 없으므로 더 넓히지 않는다. `nowrap` 을 못 박는 이유는 칸이 좁아졌을 때 `1` 과 `2` 가 세로로 쪼개지면 홈·원정 두 줄이 통째로 어긋나기 때문이다. 높이는 팀 이름과 **같은 18px** 이다(위 설명). 이 값이 두 열의 정렬을 보장하므로 한쪽만 바꾸지 않는다. */ /* 정렬은 기본 규칙(오른쪽)을 그대로 쓴다 — 자릿수가 달라도 일의 자리가 같은 X 에 선다. 여기서는 두 열의 줄 높이만 못 박는다. */ .pd-scores .pd-sc-list .pd-sc-num { height: 19px; line-height: 19px; } .pd-scores .pd-sc-num { font-size: 14px; font-weight: 700; color: var(--t3-text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 진행 중 스코어만 초록이다. 종료 경기는 기본 글자색으로 둔다 — 끝난 경기를 계속 초록으로 밝히면 어디가 지금 경기인지 흐려진다(UI §34). */ /* 진행 중 스코어는 화면에서 가장 밝고 굵다. 색을 하나 더 쓰지 않는다 — 붉은색은 상태(시간)에, 밝기는 숫자에 준다. */ .pd-scores .pd-sc-live .pd-sc-num { color: #fff; font-weight: 700; } /* 아직 스코어가 없는 자리(`-`). 자리는 지키되 숫자처럼 읽히지 않게 한다. */ .pd-scores .pd-sc-upcoming .pd-sc-num { color: var(--t3-text-3); font-weight: 400; } /* 값이 바뀐 줄을 잠깐 표시한다. 색만 바뀌고 위치는 움직이지 않는다 — 목록이 흔들리면 읽던 줄을 놓친다. */ .pd-scores .pd-sc-row.is-bumped { background: var(--t3-surface-3); transition: background .8s ease-out; } @media (prefers-reduced-motion: reduce) { .pd-scores .pd-sc-row.is-bumped { transition: none; } } /* ── 모바일 ──────────────────────────────────────────────────── 기존 화면과 같은 경계값(767px · 640px)을 쓴다. 이 화면만 다른 값을 쓰면 같은 폭에서 화면마다 다르게 접힌다. HOME/AWAY 를 한 줄로 합치지 않는다(UI §42). 두 줄 구조가 그대로 남고 좁아지는 것은 팀 이름 칸뿐이다 — 상태와 스코어는 자리를 지킨다. */ @media (max-width: 767px) { .pd-wrap.pd-scores { padding: 12px 10px; } /* 좁은 화면에는 예약 칸을 두지 않는다 (SCORE-UI-3). 190px 을 비워 두면 팀 이름 칸이 그만큼 줄어 360px 화면에서 이름이 먼저 잘린다. 배당이 실제로 생길 때 모바일에서 어떻게 놓을지는 그때 정할 일이고, 지금 자리부터 뺏지 않는다. */ .pd-scores .pd-sc-list .pd-sc-row { grid-template-columns: 46px minmax(0, 1fr) 28px; gap: 0 10px; padding: 5px 8px; } /* 글자를 줄이면 줄 높이도 함께 줄여야 두 열이 계속 맞는다. 한 값만 고치면 이름과 숫자가 어긋난다 — 늘 함께 바꾼다. */ .pd-scores .pd-sc-team, .pd-scores .pd-sc-num { font-size: 13px; } .pd-scores .pd-sc-team, .pd-scores .pd-sc-list .pd-sc-num { height: 17px; line-height: 17px; } } @media (max-width: 640px) { .pd-wrap.pd-scores { padding: 10px 8px; } /* 좌우 여백 (SCORE-UI-4). 실측(390px): 콘텐츠 시작점이 왼쪽에서 20px 이었다. 레이아웃이 `.gpe_contents_box` 한 곳에서 12px 을 주고(userCSS rev201), 그 안에서 이 화면이 8px 을 더 준 값이다. 스코어보드는 폭이 곧 정보라서 그 20px 이 팀 이름에서 그대로 깎인다. 레이아웃의 12px 은 **건드리지 않는다** — 다른 화면이 전부 그 값을 쓴다. 이 화면만 음수 바깥 여백으로 그 12px 을 되돌리고, 여기서 5px 만 준다. 결과적으로 리그 카드가 화면 가장자리에서 5px 에 선다. ⚠ 이 규칙은 **639px 이하**다. 레이아웃이 12px 을 주기 시작하는 경계가 639 라서, 640px 에서 음수 여백만 걸리면 내용이 화면 밖으로 7px 밀려 가로 스크롤이 생긴다. */ } @media (max-width: 639px) { .pd-wrap.pd-scores { margin-left: -12px; margin-right: -12px; padding-left: 5px; padding-right: 5px; } } @media (max-width: 640px) { /* 날짜 고르개는 좁은 화면에서 한 줄을 다 쓴다. 320px 에서도 화살표 두 개(32px씩)와 날짜가 함께 들어가고, 가로 스크롤은 생기지 않는다. 목록도 같은 폭으로 열려 화면 밖으로 나가지 않는다(§27·§28). */ /* 좁은 화면에서는 날짜가 탭 아래 줄로 내려와 폭을 다 쓴다. */ .pd-scores .pd-sc-dsel { display: flex; width: 100%; margin-left: 0; } /* 날짜 줄도 같은 이유로 여백만 줄인다. 화살표는 32→28px 로 낮추되 가로는 그대로라 누르기 어려워지지 않는다. */ .pd-scores .pd-sc-dstep { height: 28px; } /* 기본 규칙이 `height: 32px` 로 못박혀 있어 `min-height` 만으로는 줄지 않는다. 높이를 풀고 최소값으로 바꾼다. */ .pd-scores .pd-sc-dbtn { height: auto; min-height: 28px; padding: 0 8px; } .pd-scores .pd-sc-dpanel { max-width: none; left: 0; right: 0; } /* 거르개 네 칸은 좁은 화면에서도 **한 줄**이다 (SCORE-UI-1). 가로 스크롤로 도망가지 않는다. 360px 에서 네 칸 합이 약 270px 이라 들어간다. 그래도 모자라면 글자만 줄어들도록 `min-width: 0` 과 ellipsis 를 걸어 둔다 — 칸이 다음 줄로 접히면 날짜 줄이 세 번째 줄까지 밀린다. */ .pd-scores .pd-sc-tabs { width: 100%; padding: 2px; } .pd-scores .pd-sc-tab { flex: 1 1 0; justify-content: center; gap: 3px; /* 세로 패딩 4→3. 대신 `min-height` 로 누를 자리를 지킨다. */ padding: 3px 4px; min-height: 26px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; } .pd-scores .pd-sc-tabnum { font-size: 10.5px; } .pd-scores .pd-league-head { padding: 6px 8px; } .pd-scores .pd-sc-flag { width: 16px; } .pd-scores .pd-sc-lgtoggle { width: 20px; height: 20px; } /* 상태 칸은 42px 를 지킨다. 여기서는 시간 글자가 11.5px 이라 `94'+5` 가 33px 안쪽이고, 이보다 줄이면 잘릴 위험이 생긴다(UI §8·§30). */ .pd-scores .pd-sc-list .pd-sc-row { grid-template-columns: 42px minmax(0, 1fr) 26px; gap: 0 8px; padding: 4px 6px; } .pd-scores .pd-sc-state { font-size: 11px; } .pd-scores .pd-sc-clock, .pd-scores .pd-sc-time { font-size: 11.5px; } } /* ═══════════════════════════════════════════════════════════════════ Match Detail — 경기 상세 (PHASE 6-2) ═══════════════════════════════════════════════════════════════════ ⚠ 선택자는 전부 `.pd-match` 안으로 한정한다. 이 파일은 모든 회원 화면이 함께 읽는다. ⚠ 이 화면의 머리글은 목록 줄과 같은 이름(`pd-sc-row` · `pd-sc-num` · `pd-sc-clock`)을 쓴다 — 라이브 갱신 계약이기 때문이다. 모양만 여기서 다시 정의한다. 그래서 이 블록은 목록 블록보다 **뒤에** 있어야 한다. 색은 `--t3-*` 만 쓴다. 목록 화면과 같은 어휘이고, 새 디자인 시스템을 만들지 않는다(§41). */ .pd-wrap.pd-match { max-width: 1000px; } /* ── 돌아가기 ─────────────────────────────────────────────────── */ .pd-match .pd-md-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; padding: 4px 10px 4px 8px; border: 1px solid var(--t3-border); border-radius: 999px; background: var(--t3-surface); color: var(--t3-text-2); font-size: 12.5px; line-height: 1.4; text-decoration: none; } .pd-match .pd-md-back:hover { border-color: var(--t3-green); color: var(--t3-green-text); } /* ── 머리글 ───────────────────────────────────────────────────── */ .pd-match .pd-md-head { border: 1px solid var(--t3-border); border-radius: 7px; background: var(--t3-surface); overflow: hidden; margin-bottom: 14px; } .pd-match .pd-md-league { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--t3-border); background: var(--t3-surface-2); } .pd-match .pd-md-lgname { min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--t3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 목록의 격자를 여기서 되돌린다. 이름은 계약이라 그대로 두고 모양만 바꾼다. */ .pd-match .pd-md-row { display: block; padding: 14px 12px 16px; border: 0; background: none; } .pd-match .pd-md-row:hover { background: none; } /* 여기서는 링크가 아니다 */ /* 상세 머리글의 진행 표시선 (SCORE-UI-2). 목록 줄은 표시선을 배경 그림으로 그린다(연속 라이브가 한 줄기로 보이지 않게 하려고). 그런데 이 화면은 `background: none` 으로 배경을 지우므로 그 그림도 함께 사라진다. 여기서는 줄이 하나뿐이라 이어질 걱정이 없어 안쪽 그림자로 되돌려 둔다 — 목록과 상세가 같은 신호를 쓴다. */ .pd-match .pd-md-row.pd-sc-live { box-shadow: inset 2px 0 0 var(--t3-danger); } .pd-match .pd-md-state { text-align: center; font-size: 12.5px; color: var(--t3-text-2); line-height: 1.3; margin-bottom: 10px; } .pd-match .pd-md-state .pd-sc-clock { font-size: 13px; } .pd-match .pd-md-state .pd-sc-ft, .pd-match .pd-md-state .pd-sc-other { font-size: 12px; } .pd-match .pd-md-kick { font-variant-numeric: tabular-nums; } .pd-match .pd-md-teams { display: flex; flex-direction: column; gap: 6px; } /* h1 로 바뀌면서 생기는 기본 여백만 지운다(SEO 2단계-3). display·gap 은 위 규칙이 이미 정하므로 새로 만들지 않는다 — margin 하나만 없앤다. */ .pd-match h1.pd-md-teams { margin: 0; font-size: inherit; font-weight: inherit; } /* 팀 이름 | 스코어. 목록과 같은 정렬 규칙이다 — 스코어 칸은 고정폭이라 이름 길이에 밀리지 않는다. */ .pd-match .pd-md-side { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 12px; } /* "vs" 는 목록의 3-way 대진 가운데 칸(`pd-mid-blank`)과 같은 무게로 맞춘다 — 새 스타일을 짓지 않는다(SEO 2단계-3). */ .pd-match .pd-md-vs { font-size: 11px; font-weight: 600; color: var(--t3-text-3); text-align: center; line-height: 1.3; } .pd-match .pd-md-team { font-size: 17px; font-weight: 500; color: var(--t3-text); line-height: 1.3; overflow-wrap: anywhere; } .pd-match .pd-md-score { font-size: 20px; font-weight: 700; color: var(--t3-text); text-align: right; font-variant-numeric: tabular-nums; line-height: 1.3; } /* 진행 중 스코어만 초록. 종료 경기는 기본 글자색이다 — 목록과 같은 규칙. */ .pd-match .pd-sc-live .pd-md-score { color: var(--t3-green-text); } .pd-match .pd-sc-upcoming .pd-md-score { color: var(--t3-text-3); font-weight: 400; } /* ── 경기 기록 ─────────────────────────────────────────────────── */ .pd-match .pd-md-stats { border: 1px solid var(--t3-border); border-radius: 7px; background: var(--t3-surface); padding: 12px; } .pd-match .pd-md-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t3-text-2); } /* 진행 중 기록이라는 표시. 최종 기록과 같은 것으로 읽히면 안 된다. */ .pd-match .pd-md-livetag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--t3-surface-2); color: var(--t3-green-text); font-size: 10.5px; letter-spacing: 0; text-transform: none; } .pd-match .pd-md-stat { padding: 7px 2px; border-top: 1px solid var(--t3-border-soft); } .pd-match .pd-md-statlist > .pd-md-stat:first-child { border-top: 0; } .pd-match .pd-md-statline { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: baseline; gap: 8px; } .pd-match .pd-md-statval { font-size: 13.5px; font-weight: 600; color: var(--t3-text); font-variant-numeric: tabular-nums; } .pd-match .pd-md-statline > .pd-md-statval:first-child { text-align: left; } .pd-match .pd-md-statline > .pd-md-statval:last-child { text-align: right; } .pd-match .pd-md-statname { text-align: center; font-size: 12px; color: var(--t3-text-2); line-height: 1.35; } /* 막대. 가운데에서 양쪽으로 벌어진다 — 어느 쪽이 큰지 숫자를 읽기 전에 보인다. 애니메이션·그림자는 넣지 않는다. */ /* `overflow: hidden` 이 있어야 한다. 두 막대의 합은 100% 이고 사이 간격이 2px 이라, 그대로 두면 줄마다 2px 씩 넘쳐 좁은 화면에서 가로 스크롤이 생긴다. 넘치는 2px 은 보이지 않는 자리다. */ .pd-match .pd-md-bar { display: flex; gap: 2px; margin-top: 5px; height: 3px; overflow: hidden; } .pd-match .pd-md-barh, .pd-match .pd-md-bara { display: block; height: 100%; border-radius: 2px; background: var(--t3-text-3); } .pd-match .pd-md-barh { margin-left: auto; } /* 왼쪽 칸의 오른쪽 끝에 붙인다 */ .pd-match .pd-md-bara { margin-right: auto; } .pd-match .pd-sc-live .pd-md-barh, .pd-match .pd-md-stat .pd-md-barh { background: var(--t3-green); } .pd-match .pd-md-bara { background: var(--t3-text-3); } .pd-match .pd-empty { margin: 6px 2px; } /* ── 모바일 ─────────────────────────────────────────────────── 목록 화면과 같은 경계값을 쓴다. 320px 에서도 가로 스크롤이 없어야 하고, `Shots on target` 같은 긴 이름이 두 줄로 접히더라도 숫자 칸을 밀지 않는다(§43). */ @media (max-width: 767px) { .pd-wrap.pd-match { padding: 12px 10px; } .pd-match .pd-md-team { font-size: 15.5px; } .pd-match .pd-md-score { font-size: 18px; } } @media (max-width: 640px) { .pd-wrap.pd-match { padding: 10px 8px; } .pd-match .pd-md-row { padding: 12px 10px 14px; } .pd-match .pd-md-side { grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; } .pd-match .pd-md-team { font-size: 14.5px; } .pd-match .pd-md-score { font-size: 17px; } .pd-match .pd-md-stats { padding: 10px 8px; } .pd-match .pd-md-statline { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; } .pd-match .pd-md-statval { font-size: 13px; } .pd-match .pd-md-statname { font-size: 11.5px; } } /* ═══════════════════════════════════════════════════════════════════ Team Stats — 팀 통계 (PHASE 6-3) ═══════════════════════════════════════════════════════════════════ ⚠ 선택자는 전부 `.pd-team` 안으로 한정한다. Match Detail 과 같은 어휘를 쓴다 — 카드 테두리·제목 크기·표 줄 간격이 두 화면에서 달라 보이면 같은 사이트로 읽히지 않는다. 돌아가기 단추 (`.pd-md-back`)는 그 화면의 것을 그대로 재사용한다. */ .pd-wrap.pd-team { max-width: 1000px; } .pd-team .pd-tm-head { margin-bottom: 12px; } .pd-team .pd-tm-name { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--t3-text); line-height: 1.25; } /* 어떤 대회 경기로 계산했는가. 하나면 한 줄, 섞이면 그만큼 나열된다. */ .pd-team .pd-tm-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .pd-team .pd-tm-comp { padding: 2px 8px; border: 1px solid var(--t3-border); border-radius: 999px; background: var(--t3-surface); color: var(--t3-text-2); font-size: 11.5px; } .pd-team .pd-tm-comp b { color: var(--t3-text); font-weight: 700; } /* 카드 두 벌씩. 좁아지면 한 줄로 내려온다. */ .pd-team .pd-tm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pd-team .pd-tm-wide { grid-column: 1 / -1; } .pd-team .pd-tm-card { border: 1px solid var(--t3-border); border-radius: 7px; background: var(--t3-surface); padding: 12px; } .pd-team .pd-tm-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t3-text-2); } /* 실제로 쓴 경기 수. "Last 10" 이라고 적고 2경기를 보여주지 않기 위한 값이다. */ .pd-team .pd-tm-n { margin-left: auto; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--t3-text-3); } /* ── 폼 배지 ─────────────────────────────────────────────────── */ .pd-team .pd-tm-badges { display: flex; gap: 4px; margin-bottom: 10px; } .pd-team .pd-tm-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; font-size: 12px; font-weight: 700; color: #fff; } /* 색은 사이트가 이미 쓰는 세 가지다. 새 색 체계를 만들지 않는다(§33). */ .pd-team .pd-tm-badge.is-w { background: var(--t3-green); } .pd-team .pd-tm-badge.is-d { background: var(--t3-text-3); } .pd-team .pd-tm-badge.is-l { background: var(--t3-danger); } /* ── 표 ──────────────────────────────────────────────────────── */ .pd-team .pd-tm-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--t3-border-soft); } .pd-team .pd-tm-kv > .pd-tm-row:first-child { border-top: 0; } .pd-team .pd-tm-k { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--t3-text-2); } .pd-team .pd-tm-v { flex: none; font-size: 13.5px; font-weight: 600; color: var(--t3-text); font-variant-numeric: tabular-nums; } /* 그 지표만 표본이 다를 때 붙는다. 모든 줄에 n 을 달지 않는다(§25). */ .pd-team .pd-tm-sample { margin-left: 5px; font-size: 11px; font-weight: 400; color: var(--t3-text-3); } .pd-team .pd-tm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pd-team .pd-tm-half-title { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--t3-text); } /* ── 마켓 비율 ───────────────────────────────────────────────── */ .pd-team .pd-tm-rates { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; } .pd-team .pd-tm-rate { display: grid; grid-template-columns: 96px minmax(0, 1fr) 42px; align-items: center; gap: 8px; } .pd-team .pd-tm-bar { display: block; height: 4px; border-radius: 2px; background: var(--t3-surface-3); overflow: hidden; } .pd-team .pd-tm-bar > span { display: block; height: 100%; background: var(--t3-green); } .pd-team .pd-tm-rate .pd-tm-v { text-align: right; } /* ── 최근 경기 ───────────────────────────────────────────────── */ .pd-team .pd-tm-games { display: flex; flex-direction: column; } .pd-team .pd-tm-game { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--t3-border-soft); color: inherit; text-decoration: none; } .pd-team .pd-tm-games > .pd-tm-game:first-child { border-top: 0; } .pd-team .pd-tm-game:hover { background: var(--t3-surface-2); } .pd-team .pd-tm-gdate { font-size: 11.5px; color: var(--t3-text-3); font-variant-numeric: tabular-nums; } .pd-team .pd-tm-gteams { min-width: 0; font-size: 13px; color: var(--t3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-team .pd-tm-gteams b { font-variant-numeric: tabular-nums; } .pd-team .pd-tm-gres { justify-self: end; width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; } .pd-team .pd-tm-gres.is-w { background: var(--t3-green); } .pd-team .pd-tm-gres.is-d { background: var(--t3-text-3); } .pd-team .pd-tm-gres.is-l { background: var(--t3-danger); } /* ── 경기 상세의 팀 이름 링크 (PHASE 6-3) ───────────────────── 이름 자체가 링크다. 별도 단추를 만들지 않는다 — 누를 곳이 이름이라는 것은 밑줄 대신 hover 로 알린다. */ .pd-match a.pd-md-team { color: inherit; text-decoration: none; } .pd-match a.pd-md-team:hover { color: var(--t3-green-text); } /* ── 모바일 ───────────────────────────────────────────────── */ @media (max-width: 767px) { .pd-wrap.pd-team { padding: 12px 10px; } .pd-team .pd-tm-grid { grid-template-columns: minmax(0, 1fr); } .pd-team .pd-tm-name { font-size: 19px; } } @media (max-width: 640px) { .pd-wrap.pd-team { padding: 10px 8px; } .pd-team .pd-tm-card { padding: 10px 9px; } .pd-team .pd-tm-name { font-size: 18px; } /* 홈·원정을 두 칸으로 두면 320px 에서 한 칸이 125px 이 되어 `Goals against / game` 이 세 줄로 접힌다. 한 줄씩 세로로 쌓는다. */ .pd-team .pd-tm-two { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pd-team .pd-tm-k { font-size: 12px; } .pd-team .pd-tm-v { font-size: 13px; } .pd-team .pd-tm-rate { grid-template-columns: 78px minmax(0, 1fr) 38px; gap: 6px; } .pd-team .pd-tm-game { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 8px; } .pd-team .pd-tm-gteams { font-size: 12.5px; } } /* 대회 배당 범위 밖 (COMPETITION-ODDS-1) — 어두운 화면에서도 숫자는 읽혀야 한다. `[disabled]` 의 `--t3-text-3` 보다 한 단계 밝은 색으로 되돌린다. */ html[data-theme="dark"] .pd-sports-page .pd-pick.is-ineligible[disabled] .pd-pick-odds, html[data-theme="dark"] .pd-sports-page .pd-pick.is-ineligible[disabled] .pd-pick-team { color: var(--t3-text-2); } html[data-theme="dark"] .pd-sports-page .pd-odds-x { color: #d08b82; } html[data-theme="dark"] .pd-sports-page .pd-slip-odds-range { background: var(--t3-surface-2); border-color: var(--t3-border); color: var(--t3-text-2); } /* 범위 밖 배당 — 어두운 화면에서도 `[disabled]` 와 같은 모양을 유지한다 (COMPETITION-ODDS-2에서 native disabled 를 뗐기 때문이다). */ html[data-theme="dark"] .pd-sports-page .pd-pick.is-ineligible, html[data-theme="dark"] .pd-sports-page .pd-pick.is-ineligible:hover { background: var(--t3-bg); border-color: var(--t3-border-soft); } html[data-theme="dark"] .pd-pick-toast { background: rgba(226, 232, 236, .96); color: #16211b; } /* ═══════════════════════════════════════════════════════════════════════ PREDICTION MARKET CARD UI — Phase 1 (PREDICTION-CARD-1) ═══════════════════════════════════════════════════════════════════════ 범위 ───────────────────────────────────────────────────────────────────── 전부 `.pd-sports-page` 안이다. 그 표식은 **목록 화면(list.html) 하나만** 달고 있어서, Picks·Rank·Top3·Scores·Team 화면에는 한 줄도 닿지 않는다. `:root` 를 건드리지 않는 이유도 같다 — 전역 토큰을 손대면 이 파일이 담당하는 다른 화면까지 따라 바뀐다. 왜 위쪽 규칙을 고치지 않고 여기에 덮어쓰는가 ───────────────────────────────────────────────────────────────────── 기존 표 규칙은 `.pd-sports-page .pd-row` (0,2,0) 이다. 카드 규칙은 `.pd-sports-page .pd-card .pd-row` (0,3,0) 이라 자연히 이긴다. 위쪽 4,200줄을 건드리지 않고도 목록만 바꿀 수 있어서, 되돌릴 때도 이 블록만 지우면 된다. 색을 여기서만 정의한다 ───────────────────────────────────────────────────────────────────── 파일 위쪽의 `html[data-theme="dark"]` 규칙들은 `--t3-*` 를 참조하는데 그 변수가 이 파일 어디에도 **정의되어 있지 않다.** 즉 지금은 아무 일도 하지 않는다. 그 규칙을 고치지 않고(다른 화면도 함께 보므로) 카드가 쓸 토큰을 `.pd-sports-page` 에 따로 세운다. ───────────────────────────────────────────────────────────────────── */ /* * 카드 토큰은 이제 **자기 값을 갖지 않는다** (RT-DARK-1). * * Phase 1 에서는 여기에 hex 를 직접 적었다. 그때는 이 화면 말고 어두운 곳이 * 없어서 그래도 됐지만, 지금은 사이트 전체가 `--rt-*` 를 본다. 값을 두 군데 * 두면 한쪽만 고치는 날이 오고, 그날 카드만 색이 어긋난다. * * 이름은 그대로 둔다 — 아래 카드 규칙 수십 개가 `--pdc-*` 로 쓰여 있고, * 그것을 일괄 치환하면 이번 작업의 회귀 지점만 늘어난다. 이름은 두고 * **출처만** 전역으로 옮긴다. */ .pd-sports-page { --pdc-bg: var(--rt-bg); --pdc-surface: var(--rt-surface-1); --pdc-surface-2: var(--rt-surface-2); --pdc-border: var(--rt-border); --pdc-border-hi: var(--rt-border-strong); --pdc-text: var(--rt-text); --pdc-muted: var(--rt-text-2); --pdc-faint: var(--rt-muted); --pdc-accent: var(--rt-accent); /* 분포 막대 3색. 승/무/패의 뜻이 고정이라 여기서만 쓴다 — 배당 단추에는 쓰지 않는다(§18: 과한 색상 금지). */ --pdc-home: var(--rt-positive); --pdc-draw: var(--rt-text-2); --pdc-away: var(--rt-negative); /* * `--t3-*` 정의는 여기 없다 — 전역(`userCSS.html` 의 `:root`)으로 올렸다. * 그 이름을 쓰는 규칙이 이 화면 말고 Scores·Team·Picks 에도 있어서, * 한 화면 안에만 값을 두면 나머지는 계속 죽은 채로 남는다. */ } /* ── 페이지 바닥 ─────────────────────────────────────────── */ .pd-sports-page.pd-wrap { background: var(--pdc-bg); color: var(--pdc-text); } .pd-sports-page .pd-empty { color: var(--pdc-muted); background: none; border: 0; } /* ── 툴바 (검색 + 종목 칩) ───────────────────────────────── */ .pd-sports-page .pd-sports-toolbar { border-bottom: 1px solid var(--pdc-border); } .pd-sports-page .pd-search-input { background: var(--pdc-surface); border-color: var(--pdc-border); color: var(--pdc-text); } .pd-sports-page .pd-search-input::placeholder { color: var(--pdc-faint); } .pd-sports-page .pd-search-input:focus { border-color: var(--pdc-accent); } .pd-sports-page .pd-search-btn { background: var(--pdc-surface-2); border-color: var(--pdc-border); color: var(--pdc-text); } .pd-sports-page .pd-search-btn:hover { background: var(--pdc-accent); border-color: var(--pdc-accent); color: #fff; } .pd-sports-page .pd-chip { background: var(--pdc-surface); border-color: var(--pdc-border); color: var(--pdc-muted); } .pd-sports-page .pd-chip:hover { border-color: var(--pdc-border-hi); color: var(--pdc-text); } .pd-sports-page .pd-chip.is-active { background: var(--pdc-accent); border-color: var(--pdc-accent); color: #fff; } .pd-sports-page .pd-chip-count { color: var(--pdc-faint); } .pd-sports-page .pd-chip:hover .pd-chip-count { color: var(--pdc-muted); } .pd-sports-page .pd-chip.is-active .pd-chip-count { color: rgba(255,255,255,.75); } /* ── 리그 구간 — 테두리 상자를 걷어내고 머리줄만 남긴다 ──── */ .pd-sports-page .pd-league { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0 0 22px; padding: 0; } .pd-sports-page .pd-league:last-of-type { border-bottom: 0; padding-bottom: 0; } .pd-sports-page .pd-league-head { background: none; border: 0; padding: 0 0 10px; } .pd-sports-page .pd-league-name { color: var(--pdc-text); letter-spacing: .2px; } .pd-sports-page .pd-league-head a { color: var(--pdc-text); } /* ═══ 카드 격자 ═══════════════════════════════════════════ 현재 메인 폭은 약 796px 이다(레이아웃 1150 − 슬립 328 − 간격 26). 그래서 2열이 상한이다 — 4열로 쪼개면 카드가 187px 이 되어 팀 이름도 배당도 들어가지 않는다. 폭을 넓히는 것은 이번 범위가 아니다(§41). */ /* 열 수를 뷰포트가 아니라 **본문 폭**이 정하게 한다. `auto-fill` + `minmax(300px, 1fr)` 이면 자리가 나는 만큼만 열이 늘고, 좁아지면 저절로 줄어든다. 미디어쿼리로 열 수를 못 박으면 슬립이 있는 화면과 없는 화면에서 같은 뷰포트인데 카드 폭이 달라진다. 300px 은 하한이다 — 3-way 배당 세 칸이 각각 90px 남짓을 받는 폭이고, 그보다 좁으면 배당 숫자가 접힌다(배당은 절대 줄이지 않는다). */ .pd-sports-page .pd-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; } /* ═══ 카드 ═══════════════════════════════════════════════ */ .pd-sports-page .pd-card { display: flex; flex-direction: column; /* 같은 줄의 카드 높이를 맞추되 **고정하지 않는다** — 긴 팀 이름이 들어오면 늘어나야 한다(§32). */ min-height: 178px; margin: 0; padding: 14px 14px 12px; background: var(--pdc-surface); border: 1px solid var(--pdc-border); border-radius: 12px; transition: border-color .14s ease, background-color .14s ease; } /* 표 시절의 구분선·hover 배경을 끈다. */ .pd-sports-page .pd-card + .pd-card { border-top: 1px solid var(--pdc-border); } .pd-sports-page .pd-card:hover { background: var(--pdc-surface); border-color: var(--pdc-border-hi); } /* ── 카드 머리 ───────────────────────────────────────────── */ .pd-sports-page .pd-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; min-width: 0; } .pd-sports-page .pd-card-lg { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 auto; } .pd-sports-page .pd-card-sport { flex: none; font-size: 12px; line-height: 1; } .pd-sports-page .pd-card-sport-img { width: 14px; height: 14px; display: block; flex: none; } .pd-sports-page .pd-card-flag { flex: none; width: 16px; height: 12px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); } .pd-sports-page .pd-card-lgname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--pdc-muted); } .pd-sports-page .pd-card-when { flex: none; font-size: 11.5px; font-weight: 600; color: var(--pdc-faint); font-variant-numeric: tabular-nums; } /* 마감이 가까운 경기만 색이 바뀐다. `closing_soon` 은 서버가 정한 값이다. */ .pd-sports-page .pd-card-when.is-soon { color: #f0a63c; } /* ── 카드 제목 (경기명) ──────────────────────────────────── */ .pd-sports-page .pd-card-title { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin: 0 0 11px; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--pdc-text); } .pd-sports-page .pd-card-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pd-sports-page .pd-card-vs { flex: none; font-size: 11px; font-weight: 600; color: var(--pdc-faint); } .pd-sports-page .pd-card-team-solo { flex: 1 1 100%; } /* ── 시장 줄 — 표 격자를 끄고 세로로 쌓는다 ──────────────── */ .pd-sports-page .pd-card .pd-row { display: block; grid-template-columns: none; min-height: 0; margin: 0; padding: 0; background: none; border: 0; } .pd-sports-page .pd-card .pd-row + .pd-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--pdc-border); } /* 표 시절의 칸 스타일만 걷어낸다. `display` 는 **여기서 정하지 않는다** — 자식마다 flex·grid 로 달라서, 여기서 한 번 정하면 그 값이 자식보다 특이도가 높아(`.pd-card .pd-row > *` = 0,3,0) 자식 선언을 눌러 버린다. */ .pd-sports-page .pd-card .pd-row > * { padding: 0; border: 0; min-width: 0; } /* 접힘/펼침 — 기존 `.pd-expand` 스크립트가 `.pd-game` 에 붙이는 `is-open` 을 그대로 본다. 값만 grid → block 으로 바꾼다. */ .pd-sports-page .pd-card .pd-row.is-extra { display: none; } .pd-sports-page .pd-card.is-open .pd-row.is-extra { display: block; } /* ── 시장 이름 줄 (대표 시장 / 기준선 / 상태) ────────────── */ .pd-sports-page .pd-card .pd-card-kind { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; min-width: 0; } .pd-sports-page .pd-card .pd-kind { padding: 0; min-width: 0; background: none; border: 0; border-radius: 0; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--pdc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-sports-page .pd-card .pd-line { flex: none; padding: 1px 6px; border-radius: 4px; background: var(--pdc-surface-2); color: var(--pdc-text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .pd-sports-page .pd-card .pd-state { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 600; color: var(--pdc-faint); } /* ── 선택지 (Pick 버튼) ───────────────────────────────────── 열 수는 outcome 개수를 따라간다. 3-way 를 전제로 폭을 박지 않는다. */ .pd-sports-page .pd-card .pd-card-outcomes { display: grid; gap: 6px; } .pd-sports-page .pd-card .pd-card-outcomes.is-2way { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-sports-page .pd-card .pd-card-outcomes.is-3way { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-sports-page .pd-card .pd-pick { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; width: 100%; min-height: 50px; padding: 8px 9px; background: var(--pdc-surface-2); border: 1px solid var(--pdc-border); border-radius: 9px; cursor: pointer; text-align: left; transition: border-color .12s ease, background-color .12s ease; } .pd-sports-page .pd-card .pd-pick-team { flex: none; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--pdc-muted); } /* 배당이 카드에서 가장 눈에 띄어야 한다(§31·§49-Q5). */ .pd-sports-page .pd-card .pd-pick-odds { flex: none; width: auto; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -.2px; color: var(--pdc-text); font-variant-numeric: tabular-nums; } .pd-sports-page .pd-card .pd-pick:hover { background: #202836; border-color: var(--pdc-border-hi); } .pd-sports-page .pd-card .pd-pick:focus-visible { outline: 2px solid var(--pdc-accent); outline-offset: 2px; } /* 선택 상태 — 색 하나로만 말하지 않는다(§16). 테두리·바닥·왼쪽 표시가 함께 바뀌므로 색을 못 가리는 눈에도 구분된다. */ .pd-sports-page .pd-card .pd-pick.is-picked { background: rgba(77, 141, 255, .14); border-color: var(--pdc-accent); box-shadow: inset 3px 0 0 0 var(--pdc-accent); } .pd-sports-page .pd-card .pd-pick.is-picked .pd-pick-team { color: #b9d0ff; } .pd-sports-page .pd-card .pd-pick.is-picked .pd-pick-odds { color: #ffffff; } .pd-sports-page .pd-card .pd-pick[disabled], .pd-sports-page .pd-card .pd-pick[disabled]:hover { background: #12161d; border-color: var(--pdc-border); cursor: default; } .pd-sports-page .pd-card .pd-pick[disabled] .pd-pick-team, .pd-sports-page .pd-card .pd-pick[disabled] .pd-pick-odds { color: var(--pdc-faint); } .pd-sports-page .pd-card .pd-pick.is-ineligible, .pd-sports-page .pd-card .pd-pick.is-ineligible:hover { background: #12161d; border-color: var(--pdc-border); } .pd-sports-page .pd-card .pd-pick.is-ineligible .pd-pick-odds { color: var(--pdc-faint); } .pd-sports-page .pd-card .pd-joined { font-size: 10.5px; font-weight: 700; color: var(--pdc-faint); } .pd-sports-page .pd-card .pd-marker { margin-right: 3px; font-size: 9.5px; } /* ── 팁스터 선택 분포 ─────────────────────────────────────── 픽이 0이면 서버가 `has_dist` 를 끄므로 이 블록 자체가 그려지지 않는다. 가짜 33/33/33 을 만들지 않는다(§17). */ .pd-sports-page .pd-card .pd-card-dist { display: flex; align-items: center; gap: 8px; margin-top: 9px; } .pd-sports-page .pd-dist-bar { display: flex; flex: 1 1 auto; min-width: 0; height: 4px; border-radius: 999px; overflow: hidden; background: var(--pdc-surface-2); } .pd-sports-page .pd-dist-seg { display: block; height: 100%; } .pd-sports-page .pd-dist-seg.pd-dist-h { background: var(--pdc-home); } .pd-sports-page .pd-dist-seg.pd-dist-d { background: var(--pdc-draw); } .pd-sports-page .pd-dist-seg.pd-dist-a { background: var(--pdc-away); } .pd-sports-page .pd-dist-legend { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; color: var(--pdc-muted); font-variant-numeric: tabular-nums; } .pd-sports-page .pd-dist-item { display: inline-flex; align-items: center; gap: 3px; } .pd-sports-page .pd-dist-dot { width: 5px; height: 5px; border-radius: 50%; display: block; } .pd-sports-page .pd-dist-dot.pd-dist-h { background: var(--pdc-home); } .pd-sports-page .pd-dist-dot.pd-dist-d { background: var(--pdc-draw); } .pd-sports-page .pd-dist-dot.pd-dist-a { background: var(--pdc-away); } /* ── 카드 바닥 ───────────────────────────────────────────── */ .pd-sports-page .pd-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 11px; } .pd-sports-page .pd-card-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--pdc-faint); } .pd-sports-page .pd-card-meta b { font-weight: 700; color: var(--pdc-muted); font-variant-numeric: tabular-nums; } .pd-sports-page .pd-card-sep { margin: 0 5px; } .pd-sports-page .pd-card .pd-expand { flex: none; padding: 4px 9px; background: var(--pdc-surface-2); border: 1px solid var(--pdc-border); border-radius: 999px; color: var(--pdc-muted); font-size: 10.5px; font-weight: 700; cursor: pointer; transition: border-color .12s ease, color .12s ease; } .pd-sports-page .pd-card .pd-expand:hover { border-color: var(--pdc-border-hi); color: var(--pdc-text); } .pd-sports-page .pd-card .pd-expand:focus-visible { outline: 2px solid var(--pdc-accent); outline-offset: 2px; } /* ── 베팅 슬립 — 구조는 그대로, 색만 카드와 맞춘다 (§42) ─── */ .pd-sports-page .pd-slip { background: var(--pdc-surface); border-color: var(--pdc-border); color: var(--pdc-text); } .pd-sports-page .pd-slip-head { color: var(--pdc-text); border-color: var(--pdc-border); } .pd-sports-page .pd-slip-odds-range { color: var(--pdc-faint); } .pd-sports-page .pd-slip-label { color: var(--pdc-muted); } .pd-sports-page .pd-slip-match { color: var(--pdc-text); } .pd-sports-page .pd-slip-amt, .pd-sports-page .pd-slip .pd-amt { background: var(--pdc-surface-2); border-color: var(--pdc-border); color: var(--pdc-text); } .pd-sports-page .pd-slip .pd-amt.is-on { background: var(--pdc-accent); border-color: var(--pdc-accent); color: #fff; } /* ── 반응형 — 기존 breakpoint 를 그대로 쓴다 ─────────────── */ @media (max-width: 1050px) { /* 슬립이 아래로 내려가 메인이 전폭이 된다. 2열을 유지한다. */ .pd-sports-page .pd-card-grid { gap: 12px; } } @media (max-width: 640px) { .pd-sports-page .pd-card-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pd-sports-page .pd-card { min-height: 0; padding: 13px 13px 11px; border-radius: 11px; } .pd-sports-page .pd-card-title { font-size: 14px; } /* 좁은 화면에서 3-way 도 한 줄을 지킨다. 배당은 끝까지 줄이지 않고, 이름 쪽만 줄인다 — 숫자가 잘리면 카드가 쓸모없어진다(§34). */ .pd-sports-page .pd-card .pd-pick { min-height: 46px; padding: 7px 7px; } .pd-sports-page .pd-card .pd-pick-team { font-size: 10.5px; } .pd-sports-page .pd-card .pd-pick-odds { font-size: 15px; } .pd-sports-page .pd-card .pd-card-outcomes { gap: 5px; } } /* ═══ PREDICTION MARKET CARD UI — 끝 ═══════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ BET SLIP — Dark 마감 (RT-DARK-1 · Phase C, 2026-08-27) ═══════════════════════════════════════════════════════════════════════ Phase 1 은 슬립의 **바깥 상자**만 어둡게 했다. 그래서 테두리는 맞는데 안쪽(`.pd-slip-form`)이 `#ffffff` 로 남아, 카드는 검고 슬립만 하얀 화면이 됐다. 여기서 안쪽까지 마저 맞춘다. 구조·DOM·JS 는 한 줄도 건드리지 않는다 — 색만이다. 좁은 화면에서 이 상자를 body 로 옮겨 바텀시트로 쓰는 스크립트도 그대로 동작한다 (그쪽 규칙은 이미 `--t3-*` 를 보고 있어서 전역 별칭으로 함께 살아났다). ═══════════════════════════════════════════════════════════════════════ */ .pd-sports-page .pd-slip { background: var(--rt-surface-1); border-color: var(--rt-border); color: var(--rt-text); box-shadow: none; /* 위쪽 강조 띠는 남긴다 — 이 화면에서 가장 중요한 상자라는 표시다. 다만 3px 초록은 sportsbook 쪽 인상이 강해서, 2px 강조색으로 줄인다. */ border-top: 2px solid var(--rt-accent); } .pd-sports-page .pd-slip-form { background: var(--rt-surface-1); } .pd-sports-page .pd-slip-head { background: var(--rt-surface-1); color: var(--rt-text); border-bottom-color: var(--rt-border); } .pd-sports-page .pd-slip-head::before { background: var(--rt-accent); } .pd-sports-page .pd-slip-odds-range { color: var(--rt-muted); } /* 고른 것이 없을 때의 안내. 원래는 연녹색 점선 상자였다 — 어두운 판에서는 빈 자리를 색으로 말하지 않고 **선만** 남긴다. */ .pd-sports-page .pd-slip-empty { background: transparent; border-color: var(--rt-border); color: var(--rt-muted); } /* 고른 픽 요약 */ .pd-sports-page .pd-slip-chosen { background: var(--rt-surface-2); border-color: var(--rt-border); border-left-color: var(--rt-accent); } .pd-sports-page .pd-slip-match { color: var(--rt-text-2); } .pd-sports-page .pd-slip-name { color: var(--rt-text); } .pd-sports-page .pd-slip-kind { background: var(--rt-selected); color: var(--rt-accent-text); } .pd-sports-page .pd-slip-clear { color: var(--rt-text-2); } .pd-sports-page .pd-slip-clear:hover { background: var(--rt-hover); color: var(--rt-negative); } .pd-sports-page .pd-slip-clear:focus-visible { outline-color: var(--rt-accent); } /* 배당·금액 줄 */ .pd-sports-page .pd-slip-line + .pd-slip-line { border-top-color: var(--rt-border-soft); } .pd-sports-page .pd-slip-label { color: var(--rt-text-2); } .pd-sports-page .pd-slip-odds, .pd-sports-page .pd-slip-stake { color: var(--rt-text); } /* 예상 당첨금 — 밝은 민트 상자였다. 뜻(양수)은 글자에만 남기고, 상자는 다른 줄과 같은 표면으로 낮춘다. 값이 커 보이는 이유는 색이 아니라 자릿수와 굵기여야 한다. */ .pd-sports-page .pd-slip-total { background: var(--rt-surface-2); border-left-color: var(--rt-accent); } .pd-sports-page .pd-slip-total .pd-slip-label { color: var(--rt-text); } .pd-sports-page .pd-slip-return { color: var(--rt-positive); } /* 금액 프리셋 — 기본 / hover / 선택 / 잠김 네 상태가 서로 구분되어야 한다. 선택은 색 하나로만 말하지 않는다: 바닥·테두리·글자가 함께 바뀐다. */ .pd-sports-page .pd-amt { background: var(--rt-input-bg); border-color: var(--rt-border); color: var(--rt-text); } .pd-sports-page .pd-amt:hover { background: var(--rt-hover); border-color: var(--rt-border-strong); color: var(--rt-text); } .pd-sports-page .pd-amt:focus-visible { outline-color: var(--rt-accent); } .pd-sports-page .pd-amt.is-picked { background: var(--rt-selected); border-color: var(--rt-accent); color: #ffffff; box-shadow: inset 2px 0 0 0 var(--rt-accent); } .pd-sports-page .pd-amt:disabled, .pd-sports-page .pd-amt[disabled] { background: var(--rt-bg); border-color: var(--rt-border-soft); color: var(--rt-muted); } /* 제출 단추. 잠김 상태가 밝은 회색(#eef1f4)이라 어두운 판 위로 튀어나왔다. */ .pd-sports-page .pd-slip-submit { background: var(--rt-accent); border-color: var(--rt-accent); color: #ffffff; } .pd-sports-page .pd-slip-submit:hover { background: var(--rt-accent-hover); border-color: var(--rt-accent-hover); } .pd-sports-page .pd-slip-submit:focus-visible { outline-color: var(--rt-accent); } .pd-sports-page .pd-slip-submit:disabled { background: var(--rt-surface-2); border-color: var(--rt-border); color: var(--rt-muted); } .pd-sports-page .pd-slip-login { background: var(--rt-surface-2); border-color: var(--rt-border); color: var(--rt-text); } .pd-sports-page .pd-slip-login:hover { background: var(--rt-hover); border-color: var(--rt-border-strong); } /* 카드 바닥글 — 감사 §42 에서 3.2:1 로 약했다. 한 단계만 올린다. 본문과 같은 밝기로 올리면 보조 정보가 제목만큼 눈에 들어온다. */ .pd-sports-page .pd-card-meta { color: var(--rt-text-2); } /* ═══ BET SLIP Dark — 끝 ═══════════════════════════════════════════════ */