/* 예측시장 회원 화면 */
.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; }

/* ── 베팅 슬립이 따라 내려오게 한다 (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; }

/* ═════════════════════════════════════════════════════════════
   경기 목록 표 + 베팅 슬립 (rev65 — ranktipster.com / bgame 기본 스킨 기준)

   좌우 두 칸이다. 왼쪽이 표, 오른쪽이 슬립.

       .pd-layout [ .pd-main | .pd-slip ]

   치수와 색은 bgame 기본 스킨에서 가져왔다.
   슬립 313px · 사이 7px · 줄 높이 37px · 테두리 #ccc ·
   배당 #cc6600 · 선택 #003366+#ffff00 · 슬립 #eb2629 · 상태 #33cc00.

   표 한 줄은 일곱 칸이고, 머리글(.pd-thead)과 **같은 격자**를 쓴다.
   두 곳에 따로 적으면 언젠가 한쪽만 바뀌어 머리글과 내용이 어긋난다.

       시간 | 게임종류 | 홈(오버) | 무/기준 | 원정(언더) | 상태 | 정보

   bgame 은 <table>+colgroup 으로 홈·원정을 200px 에 고정한다(폭 1150 레이아웃).
   우리 레이아웃은 1280 이라 두 칸을 1fr 로 두고 남는 폭을 준다 — 200px 보다
   좁아지지 않고, 창이 좁아지면 알아서 줄어든다.

   칸 사이 선은 테두리가 아니라 **격자 간격**으로 그린다. 줄 배경을 #ccc 로
   두고 칸마다 흰 배경을 얹으면 1px 간격이 그대로 칸 선이 된다. 배당 칸은
   그 자리에 파란 단추가 통째로 들어가므로 안쪽 여백을 두지 않는다.
   ═════════════════════════════════════════════════════════════ */

.pd-layout { display: grid; grid-template-columns: 1fr 313px; gap: 7px;
             align-items: start; }
.pd-main { min-width: 0; }

/* ── 탭 ─────────────────────────────────────────────────────── */
.pd-tabs2 { display: flex; align-items: stretch; height: 58px;
            border: 1px solid #cccccc; background: #efefef; }
.pd-tab2 { display: flex; align-items: center; padding: 0 23px;
           border-right: 1px solid #cccccc; font-size: 13px; color: #666666;
           text-decoration: none; }
.pd-tab2:hover { color: #3399cc; }
.pd-tab2.is-active { color: #3399cc; font-weight: bold; }
.pd-tab2-right { margin-left: auto; border-right: 0; border-left: 1px solid #cccccc; }

/* ── 검색 ───────────────────────────────────────────────────── */
.pd-search { display: flex; justify-content: space-between; padding-top: 7px; }
.pd-search-input { width: 86%; height: 40px; box-sizing: border-box;
                   padding: 5px 0 5px 10px; border: 1px solid #90bcd2;
                   font-size: 12px; color: #333333; }
.pd-search-input::placeholder { color: #a3a3a3; }
.pd-search-btn { width: 13%; height: 40px; box-sizing: border-box;
                 border: 1px solid #90bcd2; background: #f0faff; color: #3496c7;
                 font-size: 13px; font-weight: 800; cursor: pointer; }
.pd-search-btn:hover { background: #e2f4ff; }

/* ── 종목 필터 ──────────────────────────────────────────────── */
/* bgame 은 종목 10개를 (0) 까지 모두 늘어놓아 두 줄 76px 로 고정한다.
   우리는 0건 종목을 빼므로 높이를 고정하면 아래가 빈다. 한 줄 높이만 잡는다. */
/* 칸 너비를 고정하지 않는다 (rev64).
   롤모델은 칩마다 `width:100px` 을 준다. 종목 이름이 두 글자 한글이라
   그 폭에 고르게 들어맞기 때문이다. 우리 이름은 `All` 부터
   `Basketball` 까지 길이가 제각각이라, 100px 을 그대로 쓰면 짧은 칩
   뒤에 빈 자리가 남는다 — `All (87)` 다음이 유독 벌어져 보인 이유다.

   글자 폭만큼만 차지하게 두고 사이 간격은 `column-gap` 하나로 정한다.
   그래야 이름 길이와 상관없이 간격이 늘 같다. */
.pd-chips { display: flex; flex-wrap: wrap; align-content: flex-start;
            column-gap: 18px; row-gap: 0;
            min-height: 39px; margin-top: 7px; padding: 0 10px;
            border: 1px solid #cccccc; background: #ffffff; }
.pd-chip { display: inline-flex; align-items: center; height: 39px;
           font-size: 12px; color: #333333; white-space: nowrap;
           text-decoration: none; }
.pd-chip:hover { color: #3399cc; }
.pd-chip.is-active { color: #ff0000; font-weight: bold; }
.pd-chip-icon { margin-right: 5px; font-size: 13px; line-height: 1; }
.pd-chip-count { margin-left: 3px; color: #009bfc; }

/* ── 표 격자 ────────────────────────────────────────────────── */
/* 머리글과 내용이 같은 값을 쓴다. 한 곳만 바뀌면 칸이 어긋난다. */
/* 머리글의 안쪽 폭·왼쪽 시작점이 경기 줄과 **정확히** 같아야 칸이 맞는다.
   줄은 리그 테두리(1) + 리그 여백(3) + 경기 테두리(1) = 5px 안쪽에서 시작하므로
   머리글은 테두리(1) + 여백(4) = 5px 로 맞춘다. 간격 1px 도 같이 쓴다. */
.pd-thead, .pd-row {
    display: grid;
    /* 시간 92px — 요일을 뺐으므로 `08-08 02:00` 만 들어가면 된다 (rev70).
       줄어든 20px 은 홈·원정 칸(1fr)이 가져간다. */
    grid-template-columns: 92px 70px 1fr 110px 1fr 44px 96px;
    gap: 1px;
    align-items: stretch;
}
.pd-thead { margin-top: 10px; padding: 3px 4px; border: 1px solid #cccccc;
            background: #ffffff; font-size: 12px; color: #666666; }
.pd-th { height: 28px; line-height: 28px; text-align: center; font-weight: normal; }

/* ── 리그 구간 ──────────────────────────────────────────────── */
/* bgame 은 리그 전체를 테두리 한 겹으로 감싼다. 우리는 리그마다 <section>
   이라 좌우 선을 각 구간이 이어 그리고 마지막 구간만 아래를 닫는다. */
.pd-league { padding: 3px 3px 0; border-right: 1px solid #cccccc;
             border-left: 1px solid #cccccc; }
.pd-league:last-of-type { padding-bottom: 3px; border-bottom: 1px solid #cccccc; }
.pd-league-head { display: flex; align-items: center; gap: 6px; height: 33px;
                  box-sizing: border-box; padding: 3px 0 0 4px;
                  border-top: 3px solid #666666; background: #efefef;
                  font-size: 12px; color: #666666; }
.pd-league-icon { font-size: 14px; line-height: 1; }
.pd-league-name { font-size: 12px; font-weight: bold; color: #d30000; }

/* ── 경기 줄 ────────────────────────────────────────────────── */
/* 경기 사이는 2px 다. 위아래 모두 주면 4px 이 되어 표가 성글어진다. */
.pd-game { margin: 0 0 2px; border: 1px solid #cccccc; background: #cccccc; }
.pd-row { background: #cccccc; }
.pd-row + .pd-row { margin-top: 1px; }
/* 접힌 줄. `더보기(+N)` 를 누르면 열린다. */
.pd-row.is-extra { display: none; }
.pd-game.is-open .pd-row.is-extra { display: grid; }

.pd-row > * { display: flex; align-items: center; justify-content: center;
              min-height: 37px; min-width: 0; padding: 0 2px; box-sizing: border-box;
              background: #ffffff; font-size: 12px; color: #666666; }

/* 시간은 `MM-DD(요일) HH:MM` 한 줄이다 (rev66). 남은 시간 줄은 뺐다. */
.pd-time-main { font-size: 12px; color: #666666; white-space: nowrap;
                font-variant-numeric: tabular-nums; }

/* 게임종류 배지 — 롤모델 실측: 46×16, 배경 #19aa00, 흰 글씨 */
.pd-kind { display: inline-block; min-width: 46px; padding: 1px 6px;
           background: #19aa00; color: #ffffff; font-size: 11px; font-weight: bold;
           line-height: 14px; text-align: center; }

/* ── 배당 칸 ────────────────────────────────────────────────── */
/* 단추가 칸을 통째로 채운다. 이름 70% · 배당 30% 는 bgame 비율이다. */
/* 칸 사이는 [흰 2px | #ccc 1px | 흰 2px] 이다 (롤모델 실측).
   흰 여백은 2px 흰 테두리로, 파란 상자 선은 안쪽 그림자로 그린다 —
   단추가 곧 칸이라 테두리 하나에 둘을 함께 담을 수 없다. */
.pd-pick { display: flex; align-items: center; width: 100%; min-width: 0;
           padding: 0; box-sizing: border-box; border: 2px solid #ffffff;
           background: #f0faff; background-clip: padding-box;
           box-shadow: inset 0 0 0 1px #90bcd2;
           font-size: 12px; cursor: pointer; transition: background .12s; }
.pd-pick:hover { background: #e2f4ff; }
/* 이미 그 경기에 건 회원에게는 그 경기의 모든 단추가 잠긴다 (rev67).
   `disabled` 는 클릭 자체를 막고, 아래 규칙은 그 사실을 눈에 보이게 한다. */
.pd-pick[disabled] { background: #f2f2f2; box-shadow: inset 0 0 0 1px #d5d5d5;
                     cursor: default; }
.pd-pick[disabled]:hover { background: #f2f2f2; }
.pd-pick[disabled] .pd-pick-team { color: #999999; }
.pd-pick[disabled] .pd-pick-odds { color: #aaaaaa; }
/* 배당 자리에 들어가는 `Joined`. 숫자가 아니라 상태라는 것이 보이게
   글자를 작게 잡고 대문자 간격을 준다 (rev68). */
.pd-joined { font-size: 11px; font-weight: 700; letter-spacing: .3px;
             color: #8a8a8a; text-transform: uppercase; }
.pd-pick.is-picked { background: #003366; box-shadow: inset 0 0 0 1px #000000; }
.pd-pick-team { flex: 0 0 70%; min-width: 0; font-size: 13px; font-weight: bold;
                color: #000000;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pick-home .pd-pick-team { padding-left: 5px; text-align: left; }
/* 원정 칸은 배당이 왼쪽, 이름이 오른쪽이다 (bgame 과 같은 거울 배치). */
.pd-pick-away .pd-pick-team { padding-right: 5px; text-align: right; }
.pd-pick-odds { flex: 1 1 auto; text-align: center; font-size: 12px;
                font-weight: 700; color: #cc6600;
                font-variant-numeric: tabular-nums; }
.pd-pick-mid { justify-content: center; }
.pd-pick.is-picked .pd-pick-team { color: #ffffff; }
.pd-pick.is-picked .pd-pick-odds { color: #ffff00; }

/* U/O 줄의 위아래. 홈 = 오버(빨강 ▲) · 원정 = 언더(파랑 ▼) — bgame 의
   arrow_over.png · arrow_under.png 와 같은 색이다. */
.pd-marker { margin: 0 2px; font-size: 10px; font-weight: bold; }
.pd-marker-under { color: #0066ff; }
.pd-marker-over { color: #ff0033; }

/* 가운데가 기준선인 줄(핸디캡·U/O). 배당이 아니므로 누르지 않는다. */
.pd-line { color: #3398cc; font-weight: bold; font-variant-numeric: tabular-nums; }
/* 2-way 는 가운데가 비어 있다. bgame 처럼 `vs` 를 놓아 빈 칸으로 보이지 않게 한다. */
.pd-mid-blank::after { content: "vs"; color: #cc6600; font-weight: bold; }

/* ── 상태 · 정보 ────────────────────────────────────────────── */
.pd-state { font-size: 12px; color: #8e8e8e; }
.pd-state-OPEN { color: #33cc00; }   /* rev62 — 롤모델과 같은 초록. 참여 가능한 줄이 한눈에 보여야 한다 */
.pd-state-SUSPENDED { color: #ff9900; }
.pd-state-CLOSED, .pd-state-RESOLVED { color: #8e8e8e; }
.pd-state-CANCELLED { color: #ff0033; }

.pd-expand { display: flex; align-items: center; justify-content: center;
             box-sizing: border-box; width: 100%; height: 32px; padding: 0 2px;
             border: 1px solid #99cc66; background: #ffffcc; color: #0066ff;
             font-size: 11px; line-height: 1.4; cursor: pointer; }
.pd-expand em { display: block; font-style: normal; font-weight: bold; }
.pd-expand:hover { background: #ffffb3; }
.pd-expand.is-open { border-color: #cccccc; background: #f0f2f5; color: #666666; }
/* 펼친 뒤에는 `Close` 로 바뀐다. 글자를 CSS 가 갈아 끼우므로 JS 에 문구가
   없다 — lang 을 바꿔도 여기만 남는 일이 생기지 않는다. */
.pd-expand-close { display: none; }
.pd-expand.is-open .pd-expand-open { display: none; }
.pd-expand.is-open .pd-expand-close { display: block; }

/* ── BET SLIP ───────────────────────────────────────────────── */
/* `top` 은 사이트 상단 고정바(.tmenu1_wrap00, 높이 35px) 아래에서 멈추게
   잡는다 (rev64). 12px 이면 슬립 머리글이 그 바에 가려 "BET SLIP" 글자가
   반쯤 잘린다. 35 + 여백 12 = 47px. */
.pd-slip { position: sticky; top: 47px; border: 1px solid #eb2629;
           background: #ffffff; font-family: "돋움", Dotum, sans-serif;
           font-size: 11px; color: #999999; }
.pd-slip-head { display: flex; align-items: center; height: 33px; padding: 0 8px;
                background: #eb2629; color: #ffffff;
                font-size: 12px; font-weight: bold; }
.pd-slip-form { padding: 0 0 6px; background: #efefef; }

.pd-slip-pick { min-height: 46px; padding: 6px; background: #ffffff;
                border-bottom: 1px solid #eb2629; }
.pd-slip-empty { margin: 6px 0; font-size: 12px; color: #999999; }
.pd-slip-chosen { padding: 9px; border: 1px solid #eb2629; background: #ffe9e9; }
.pd-slip-match { font-size: 11px; color: #666666;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-slip-sel { display: flex; align-items: center; gap: 6px;
               margin-top: 6px; padding-top: 6px; border-top: 1px solid #eb2629; }
.pd-slip-kind { flex: 0 0 auto; padding: 1px 5px; background: #eb2629;
                color: #ffffff; font-size: 10px; font-weight: bold; }
.pd-slip-name { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: bold;
                color: #000000;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 구분선은 #ccc 한 줄 + 흰 한 줄이다(bgame 의 slip_hr2). */
.pd-slip-line { display: flex; align-items: center; justify-content: space-between;
                gap: 8px; height: 28px; margin: 0 6px;
                border-bottom: 1px solid #cccccc; box-shadow: 0 1px 0 #ffffff;
                font-size: 12px; color: #000000; }
.pd-slip-label { font-size: 12px; color: #000000; }
.pd-slip-odds { padding-right: 5px; font-size: 12px; font-weight: bold;
                color: #cc6600; font-variant-numeric: tabular-nums; }
/* 읽기 전용이다. 금액은 아래 단추로만 정한다 — 서버가 프리셋만 받는다(§74). */
.pd-slip-stake { width: 200px; height: 24px; box-sizing: border-box; padding: 0 5px;
                 border: 1px solid #eb2629; background: #ffffff; text-align: right;
                 font-size: 12px; font-weight: bold; color: #ff0000;
                 font-variant-numeric: tabular-nums; }
.pd-slip-total { border-bottom: 0; box-shadow: none; }
.pd-slip-return { padding-right: 5px; font-size: 12px; font-weight: bold;
                  color: #cc6600; font-variant-numeric: tabular-nums; }

.pd-slip-presets { display: grid; grid-template-columns: repeat(3, 1fr);
                   gap: 1px; margin: 6px 6px 0; }
/* MIN·MAX 도 같은 3칸 격자를 쓴다. 2칸으로 두면 단추가 넓어져 윗줄과 어긋난다. */
.pd-slip-presets:last-of-type { grid-template-columns: repeat(3, 1fr); }
.pd-slip-presets:last-of-type .pd-amt:last-child { grid-column: 2; }
.pd-amt { height: 30px; box-sizing: border-box; border: 1px solid #eb2629;
          background: #ffe9e9; color: #000000;
          font-family: "돋움", Dotum, sans-serif; font-size: 12px; font-weight: bold;
          cursor: pointer; font-variant-numeric: tabular-nums; }
.pd-amt:hover { background: #ffd9d9; }
.pd-amt.is-picked { background: rgba(235, 38, 41, .85); color: #ffffff; }

.pd-slip-submit { display: block; width: calc(100% - 12px); height: 50px;
                  margin: 6px; box-sizing: border-box; border: 1px solid #000000;
                  background: #ff0000; color: #ffffff; font-size: 17px;
                  font-weight: bold; line-height: 46px; text-align: center;
                  text-decoration: none; cursor: pointer; }
.pd-slip-submit:hover { background: #e60000; }
.pd-slip-submit:disabled { border-color: #bbbbbb; background: #d9d9d9;
                           color: #ffffff; cursor: not-allowed; }
.pd-slip-quota { margin: 6px 6px 0; font-size: 11px; color: #999999; 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; }

@media (max-width: 900px) {
    /* 슬립을 표 아래로 내린다. 옆에 두면 표가 눌려 팀 이름이 잘린다. */
    .pd-layout { grid-template-columns: 1fr; }
    .pd-slip { position: static; }
}

@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; }
    .pd-thead, .pd-row { grid-template-columns: 74px 46px 1fr 54px 1fr 40px 46px; }
    .pd-thead { font-size: 11px; }
    .pd-row > * { min-height: 32px; font-size: 11px; padding: 0 1px; }
    .pd-th { height: 24px; line-height: 24px; }
    .pd-time-main { font-size: 11px; }
    .pd-kind { padding: 1px 4px; font-size: 10px; }
    .pd-pick { font-size: 11px; }
    .pd-pick-odds { font-size: 11px; }
    .pd-pick-team { flex-basis: 62%; }
    .pd-state { font-size: 11px; }
    .pd-expand { height: 28px; padding: 0 2px; font-size: 10px; }
    .pd-tab2 { padding: 0 10px; font-size: 12px; }
    .pd-tabs2 { height: 44px; }
    /* 좁은 화면에서는 간격만 줄인다. 폭은 여기서도 글자에 맡긴다. */
    .pd-chips { column-gap: 12px; padding: 0 6px; }
    /* 랭킹표는 칸 구성이 달라 따로 줄인다(아래 .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-live { background: #eaf3ff; color: #2f6fdb; }
.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; }
.pd-rank-no { font-variant-numeric: tabular-nums; font-weight: 600; color: #5a6b80; }

/* 값 상자. 숫자 다섯 칸이 나란히 설 때 칸의 경계를 대신한다. */
.pd-cell { display: inline-block; min-width: 76px; padding: 5px 10px;
           border: 1px solid #cfd9e6; border-radius: 3px; background: #f2f7fd;
           font-size: 13px; color: #3a4756; font-variant-numeric: tabular-nums; }

.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; }
.pd-nick { font-size: 14px; color: #2f6fdb; vertical-align: middle; }

/* 로그인한 회원의 줄. 표에서 자기 자리를 먼저 찾을 수 있어야 한다. */
.pd-rank-row.is-me { background: #eff5ff; box-shadow: inset 3px 0 0 #2f6fdb; }
.pd-rank-row.is-me .pd-nick { font-weight: 700; color: #2559b0; }

/* ── 탭 (기간 · 정렬) ─────────────────────────────────────────── */
.pd-rank-tabs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
                margin: 0 0 8px; padding: 0; }
.pd-rank-tab a { display: block; padding: 7px 14px; border: 1px solid #dfe3e8;
                 border-radius: 6px; font-size: 13px; color: #5a6b80; text-decoration: none; }
.pd-rank-tab a:hover { border-color: #2f6fdb; color: #2f6fdb; }
.pd-rank-tab.is-active a { background: #4a4f57; border-color: #4a4f57;
                           color: #fff; font-weight: 700; }

/* ── 검색 ────────────────────────────────────────────────────── */
.pd-rank-search { display: flex; align-items: center; gap: 8px;
                  margin: 10px 0 14px; flex-wrap: wrap; }
.pd-rank-input { width: 200px; padding: 7px 10px; border: 1px solid #cfd6de;
                 border-radius: 6px; font-size: 14px; }
.pd-rank-btn { padding: 8px 16px; border: 0; border-radius: 6px; background: #2f6fdb;
               color: #fff; font-size: 14px; cursor: pointer; }
.pd-rank-btn:hover { background: #2559b0; }
.pd-rank-count { margin-left: auto; font-size: 13px; color: #8b95a1; }

/* ── 레벨 랭킹 ───────────────────────────────────────────────── */
/* 칸이 넷뿐이라 이름 칸을 넓게 준다 */
.pd-level-table .pd-col-tipster { width: 46%; }
.pd-level-table .pd-col-rank { width: 12%; }

/* ── 팁스터 프로필 ───────────────────────────────────────────── */
.pd-profile-head { display: flex; align-items: center; gap: 16px;
                   margin: 4px 0 18px; flex-wrap: wrap; }
.pd-avatar-lg { width: 64px; height: 64px; margin-right: 0; }
.pd-avatar-lg.pd-avatar-empty { line-height: 64px; font-size: 24px; }
.pd-profile-meta { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0;
                   flex-wrap: wrap; }
.pd-profile-key { display: block; font-size: 12px; color: #8b95a1; }
.pd-profile-val { display: block; font-size: 16px; font-weight: 700; color: #2b3440;
                  font-variant-numeric: tabular-nums; }
/* 두 줄(전체 · 이달)뿐이라 기간 칸을 넓게 준다 */
.pd-profile-table td:first-child, .pd-profile-table th:first-child {
    width: 22%; text-align: left; font-weight: 600; color: #5a6b80; }
.pd-profile-picks { margin-top: 26px; }

/* ── TOP N · 픽 모음 ─────────────────────────────────────────── */
.pd-top-group { margin-bottom: 26px; }
.pd-top-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #2b3440; }
.pd-top-empty { padding: 20px 0; }
/* 픽 표는 칸이 여덟 개라 글자를 한 단계 줄인다 */
.pd-pick-table th, .pd-pick-table td { font-size: 13px; }
.pd-pick-event, .pd-pick-choice { text-align: left; }
.pd-pick-choice { font-weight: 600; color: #2b3440; }
/* 적중·비적중 줄. 롤모델도 줄 전체에 색을 준다 */
.pd-pick-win  { background: #eefaf0; }
.pd-pick-lose { background: #fdf1ee; }
.pd-pick-void { background: #f5f6f8; }

.pd-pager { display: flex; gap: 4px; justify-content: center; margin: 18px 0 0; flex-wrap: wrap; }
.pd-page { display: inline-block; min-width: 32px; padding: 6px 8px; text-align: center;
           border: 1px solid #dfe3e8; border-radius: 6px; font-size: 13px;
           color: #5a6b80; text-decoration: none; }
.pd-page:hover { border-color: #2f6fdb; color: #2f6fdb; }
.pd-page.is-current { background: #2f6fdb; border-color: #2f6fdb; color: #fff; font-weight: 700; }

@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; }
}

/* ═════════════════════════════════════════════════════════════
   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; }

/* 머리글 줄. 제목과 오른쪽 링크가 붙어 보이지 않게 사이를 벌린다. */
.pd-picks .pd-actions { display: flex; align-items: center; gap: 14px; }
.pd-picks .pd-head { margin-bottom: 12px; padding-top: 14px; }

.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 120px 90px 80px 96px;
    align-items: stretch;
}
.pd-picks-head { background: #3f4040; color: #ffffff; }
.pd-pk-th { display: flex; align-items: center; justify-content: center;
            height: 38px; font-size: 12px; font-weight: normal; }

.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; }

/* 펼친 줄은 지금 보고 있는 것이 무엇인지 가려야 한다. */
.pd-picks-item.is-open .pd-pk-row { background: #3f4040; }
.pd-picks-item.is-open .pd-pk-row > * { color: #ffd800; }
.pd-picks-item.is-open .pd-pk-match { color: #ffd800; }

/* 펼침 단추. `+` ↔ `−` 는 CSS 가 갈아 끼운다 — JS 에 글자를 두지 않는다. */
.pd-pk-toggle { width: 34px; height: 30px; box-sizing: border-box;
                border: 1px solid #cccccc; background: #f6f6f6;
                font-size: 18px; line-height: 1; color: #333333; cursor: pointer; }
.pd-pk-toggle::before { content: "+"; }
.pd-picks-item.is-open .pd-pk-toggle { border-color: #888888; background: #ffffff; }
.pd-picks-item.is-open .pd-pk-toggle::before { content: "\2212"; }
.pd-pk-toggle:hover { background: #eaeaea; }

/* ── 펼친 줄 ① 경기 ─────────────────────────────────────────── */
/* 목록 화면과 같은 배치다. 칸 수가 달라 격자는 여기서 따로 정한다. */
.pd-pk-detail { display: none; }
/* ── 상세 줄의 격자는 **위 줄과 같은 경계**를 쓴다 (rev69) ─────
   접힌 줄이  190 | 1fr | 120 | 90 | 80 | 96  이므로,
   상세 줄은 가운데 `1fr` 자리를 다섯으로 쪼개고 양 끝은 그대로 둔다.

       190 │ 130  70  1fr  90  1fr │ 120 │ 90 │ 80 │ 96
       시각│ 리그 종류 홈  기준 원정│ ← 상태 두 칸이 나눠 쓴다

   앞 190 과 뒤 120·90·80·96 이 위 줄과 같은 값이므로, 가운데 다섯 칸의
   합도 저절로 위 줄의 `1fr` 과 같아진다. 세로선이 맞는 이유다.

   리그 칸이 108px 일 때 `China Super League` 가 잘렸다. 130px 로 넓히고
   팀 칸(1fr)에서 그만큼 가져온다 — 팀 이름은 줄임표가 있지만 리그는
   가운데가 잘리면 어느 리그인지 알 수 없다. */
/* 칸 사이 선은 **테두리**로 그린다. 격자 간격(gap)으로 그리면 칸마다
   1px 씩 밀려 위 줄과 세로선이 어긋난다(실측 3px). `box-sizing: border-box`
   라 테두리는 칸 안쪽에 들어가므로 기하가 위 줄과 정확히 같아진다. */
.pd-picks-item.is-open .pd-pk-detail {
    display: grid;
    grid-template-columns: 190px 130px 70px 1fr 90px 1fr 120px 90px 80px 96px;
    background: #ffffff;
}
.pd-pk-detail > * { border-right: 1px solid #cccccc; }
.pd-pk-detail > *:last-child { border-right: 0; }
/* 상태 두 칸이 뒤쪽 네 칸을 둘씩 나눠 쓴다. */
.pd-pk-mstate { grid-column: span 2; }
.pd-pk-rstate { grid-column: span 2; }
.pd-pk-detail > * { display: flex; align-items: center; justify-content: center;
                    min-height: 37px; min-width: 0; padding: 0 2px; box-sizing: border-box;
                    background: #ffffff; font-size: 12px; color: #666666; }
.pd-pk-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-pk-sport { margin-right: 4px; font-size: 13px; line-height: 1; }
.pd-pk-league { justify-content: flex-start; padding: 0 6px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
                line-height: 37px; font-size: 11px; color: #666666; }

/* 좌우 선택지. 고른 쪽만 남색 + 노란 배당으로 표시한다 — 목록 화면의
   선택 상태와 같은 색이라 회원이 같은 의미로 읽는다. */
.pd-pk-side { display: flex; align-items: center; justify-content: space-between;
              padding: 0 5px; background: #f0faff;
              box-shadow: inset 0 0 0 1px #90bcd2; }
.pd-pk-side.is-picked { background: #003366; box-shadow: inset 0 0 0 1px #000000; }
.pd-pk-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              font-size: 12px; font-weight: bold; color: #000000; }
.pd-pk-odds { flex: 0 0 auto; margin-left: 6px; font-weight: 700; color: #cc6600;
              font-variant-numeric: tabular-nums; }
.pd-pk-side-away .pd-pk-odds { margin: 0 6px 0 0; }
.pd-pk-side.is-picked .pd-pk-team { color: #ffffff; }
.pd-pk-side.is-picked .pd-pk-odds { color: #ffff00; }
.pd-pk-mid { justify-content: center; }

/* ── 펼친 줄 ② 요약 ─────────────────────────────────────────── */
.pd-pk-summary { display: none; }
.pd-picks-item.is-open .pd-pk-summary {
    display: flex; align-items: center; gap: 28px;
    min-height: 38px; padding: 0;
    background: #ffd800; color: #333333; font-size: 12px;
}
/* 날짜는 위 두 줄의 첫 칸(190px)과 같은 자리에 둔다. 세 줄의 왼쪽 끝이
   흔들리면 펼쳤을 때 한 덩어리로 읽히지 않는다. */
.pd-pk-sum-date { flex: 0 0 190px; text-align: center;
                  color: #333333; font-weight: bold; font-variant-numeric: tabular-nums; }
.pd-pk-sum b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.pd-pk-return { color: #cc0000; }

/* ── 쪽 나누기 ──────────────────────────────────────────────── */
/* 취소 칸 (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-item.is-open .pd-pk-cancel-off,
.pd-picks-item.is-open .pd-pk-cancel-done { color: #ffd800; }

.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: 88px 1fr 66px 56px 44px 62px; }
    .pd-pk-row > * { font-size: 11px; padding: 0 3px; }
    .pd-pk-th { font-size: 11px; }
    /* 좁은 화면에서는 경기 줄을 접는다 — 여덟 칸은 들어가지 않는다.
       시각·리그·상태를 빼고 고른 쪽이 보이게 남긴다. */
    /* 좁은 화면에서 보이는 것은 종류·홈·기준·원정 네 칸뿐이다
       (시각·리그·상태는 아래에서 감춘다). 칸 수를 그 넷에 맞춘다. */
    .pd-picks-item.is-open .pd-pk-detail { grid-template-columns: 44px 1fr 44px 1fr; }
    .pd-pk-mstate, .pd-pk-rstate { grid-column: auto; }
    .pd-pk-sum-date { flex: 0 0 auto; }
    .pd-pk-time, .pd-pk-league, .pd-pk-mstate, .pd-pk-rstate { display: none; }
    .pd-picks-item.is-open .pd-pk-summary { flex-wrap: wrap; gap: 8px 14px; padding: 6px 8px; }
}