/* =========================================================================
   픽스터(Pickster) — 로스터 목록 / 픽스터 상세(픽 표 + 아코디언). 라이트테마 토큰, rem 반응형.
   ========================================================================= */

/* =========================================================================
   목록 페이지 — 2단(왼쪽 적중률 순위 / 오른쪽 선택 픽스터 개별정보). 시안 블루(#1A56DB) 팔레트, rem 반응형.
   ========================================================================= */

/* ---- 페이지 헤더 ---- */
.pk-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.3rem; }
.pk-page-bar { flex: none; width: 4px; height: 1.4rem; background: #1A56DB; border-radius: 999px; }
.pk-page-title { margin: 0; font-size: 1.571rem; font-weight: 800; letter-spacing: -0.02em; color: #1F2430; }
.pk-page-hint { font-size: 0.929rem; font-weight: 500; color: #98A0AE; }
/* 공통 _PageTitle을 pk-page-head(가로 flex) 안에서 쓸 때: 박스 하단 여백 제거(헤더 자체 margin 사용) */
.pk-page-head .page-title-box { margin-bottom: 0; }

/* ---- 2단 레이아웃 ---- */
/* 시안: 전체 1440 = 왼쪽 564 + gap 20 + 오른쪽 856 (좌측 카드 width 564px · 우측 카드 width 856px).
   564:856 = 0.659:1 이므로 fr 비율을 그대로 쓴다(가변폭에서도 비율 유지). */
.pk-list-layout { display: grid; grid-template-columns: minmax(0, 0.659fr) minmax(0, 1fr); gap: 1.429rem; align-items: start; }

/* ---- 왼쪽: 적중률 순위 ---- */
/* 왼쪽 열 — 시안은 헤더·종목탭·카드 사이가 모두 10px 균일(부모 flex gap 10px) */
.pk-rank { display: flex; flex-direction: column; gap: 0.714rem; }
.pk-rank-top { display: flex; justify-content: space-between; align-items: center; padding: 0 0.3rem; }
.pk-rank-heading { font-size: 0.929rem; font-weight: 700; color: #5B6473; }
.pk-rank-guide { font-size: 0.857rem; color: #98A0AE; }

/* 종목 필터 pill — 비활성 흰배경 / 활성 #1A56DB 단색 (Info 페이지와 동일 시안) */
.pk-sports { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pk-sport { padding: 0.3rem 0.85rem; border: 1px solid #E8EBF0; background: #fff; border-radius: 999px; color: #5B6473; font-size: 0.893rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: all .12s ease; }
.pk-sport:hover { border-color: #1A56DB; color: #1A56DB; }
.pk-sport.is-active { background: #1A56DB; border-color: #1A56DB; color: #fff; }

.pk-rank-list { display: flex; flex-direction: column; gap: 0.714rem; /* 10px — 시안 카드 간격 */ }
.pk-rank-card {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.8rem 0.95rem; background: #fff; border: 1px solid #E8EBF0;
    border-radius: 0.857rem; text-decoration: none;
    transition: border-color .12s ease, background .12s ease;
}
.pk-rank-card:hover { border-color: #1A56DB; }
.pk-rank-card.is-active { border-color: #1A56DB; background: rgba(238, 243, 255, 0.5); }
.pk-rank-no { flex: none; width: 1.4rem; text-align: center; font-size: 0.929rem; font-weight: 800; color: #98A0AE; }
/* 즐겨찾기 별 — 빈 상태. ⚠ `.pk-rank-card.is-featured .pk-rank-star{color:#1A56DB}` 는 제거했다:
   별이 관리자 추천을 뜻하던 시절의 규칙이라, 별을 즐겨찾기로 바꾼 지금은 남의 값으로 내 별이 켜진다.
   추천 표시는 닉네임 옆 `.pk-badge-featured` 칩이 전담한다. */
.pk-rank-star { flex: none; display: flex; align-items: center; color: #CBD2DE; font-size: 1rem; }
/* 즐겨찾기 켜짐 — 좌측은 표시 전용이라 hover 색은 두지 않는다(누를 수 없는데 반응하면 오해를 부른다) */
.pk-rank-star.is-on { color: #FFA600; }
.pk-rank-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pk-rank-name { display: flex; align-items: center; gap: 0.4rem; font-size: 1.036rem; font-weight: 800; color: #1F2430; }
.pk-rank-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.857rem; color: #98A0AE; }
.pk-rank-meta .is-win { color: #1A56DB; font-weight: 700; }
.pk-rank-meta .is-lose { color: #E11D2A; font-weight: 700; }
.pk-dot { color: #E8EBF0; }
.pk-rank-rate { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.pk-rank-pct { font-size: 1.286rem; font-weight: 800; line-height: 1; color: #1A56DB; }
.pk-rank-lbl { font-size: 0.75rem; font-weight: 600; color: #98A0AE; }

/* '추천' 칩 — 닉네임 뒤 */
.pk-badge-featured {
    display: inline-block; padding: 0.1rem 0.4rem;
    background: #1A56DB; color: #fff; border-radius: 4px;
    font-size: 0.679rem; font-weight: 800; font-style: normal; vertical-align: middle;
}

.pk-empty { padding: 2.5rem 1rem; text-align: center; color: #98A0AE; background: #fff; border: 1px solid #E8EBF0; border-radius: 0.857rem; }

/* ---- 오른쪽: 선택 픽스터 개별정보 ---- */
.pk-info { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 5rem; }
.pk-info-empty { padding: 3rem 1rem; text-align: center; color: #98A0AE; background: #fff; border: 1px solid #E8EBF0; border-radius: 1rem; }

/* 헤더 카드 — 이름 + 누적Pick + 큰 적중률 + 4지표 */
/* 개별정보 헤더 카드 — Figma 시안값(rem 기준 1rem=14px):
   카드 padding 19.57/29 · radius 16 · gap(행)16 · 헤더 gap 12 · 지표박스 padding 10/0 · 지표 gap 8 */
.pk-info-head {
    background: #fff; border: 1px solid #E8EBF0; box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    border-radius: 1.143rem; padding: 1.398rem 2.071rem;
    display: grid; grid-template-columns: 1fr auto; gap: 1.143rem 0.857rem; align-items: center;
}
.pk-info-who { display: flex; align-items: center; gap: 0.857rem; /* 12px */ }
/* 즐겨찾기 별(22×20) — 빈 상태. `.is-featured` 규칙 제거(위 .pk-rank-star 주석과 같은 이유).
   ⚠ 색을 #E8EBF0 → #CBD2DE 로 올렸다: 원래 값은 '추천 아님'을 흐리게 죽이려던 것이라 흰 배경에서 거의
     안 보였는데, 이제 이 별은 회원이 눌러야 하는 대상이라 로스터 별과 같은 농도로 맞춘다. */
/* ⚠ 마크업이 `<span>` → `<button>` 으로 바뀌었다(즐겨찾기 토글). 버튼 기본 스타일을 지운다. */
.pk-info-star {
    flex: none; display: flex; align-items: center; font-size: 1.286rem; color: #CBD2DE;
    padding: 0; background: none; border: 0; -webkit-appearance: none; appearance: none;
    cursor: pointer; transition: color .12s ease;
}
.pk-info-star:hover { color: #FFA64D; }
.pk-info-star.is-on, .pk-info-star.is-on:hover { color: #FFA600; }
.pk-info-id { display: flex; flex-direction: column; gap: 0.097rem; }
/* 닉네임 + '추천' 배지 — 배지가 들어가므로 로스터 카드(.pk-rank-name)와 같이 flex 로 세로 가운데를 맞춘다 */
.pk-info-name { display: flex; align-items: center; gap: 0.4rem; font-size: 1.357rem; font-weight: 800; letter-spacing: -0.025em; color: #1F2430; }
.pk-info-sub { font-size: 0.893rem; color: #98A0AE; }
.pk-info-rate { display: flex; flex-direction: column; align-items: flex-end; gap: 0.245rem; }
/* '적중률' 라벨은 우측정렬이 아니라 **숫자 폭 기준 가운데 정렬**(시안: 라벨 컨테이너 align-items:center + margin:0 auto). */
.pk-info-rate-lbl { align-self: center; font-size: 0.786rem; font-weight: 600; color: #98A0AE; }
.pk-info-rate-pct { font-size: 2.143rem; font-weight: 800; line-height: 1; color: #1A56DB; }
.pk-info-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.571rem; }
.pk-stat { display: flex; flex-direction: column; align-items: center; padding: 0.714rem 0.5rem; background: rgba(244, 246, 249, 0.7); border-radius: 0.571rem; }
.pk-stat-v { font-size: 0.964rem; font-weight: 800; color: #1F2430; }
.pk-stat-v.is-win { color: #1A56DB; }
.pk-stat-v.is-lose { color: #E11D2A; }
.pk-stat-l { font-size: 0.786rem; color: #98A0AE; }

/* 픽 포스트 카드 — 클릭 시 상세로 이동 */
.pk-pp-list { display: flex; flex-direction: column; gap: 0.85rem; }
.pk-pp-card {
    display: flex; flex-direction: column; gap: 0.5rem;
    background: #fff; border: 1px solid #E8EBF0; box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    border-radius: 0.857rem; padding: 1.05rem 1.1rem; text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.pk-pp-card.is-hidden { display: none; }
.pk-pp-card:hover { border-color: #1A56DB; box-shadow: 0 2px 8px rgba(26, 86, 219, 0.08); }
.pk-pp-top { display: flex; align-items: center; gap: 0.5rem; }
.pk-pp-sport { padding: 0.1rem 0.45rem; background: #EEF3FF; color: #1A56DB; border-radius: 4px; font-size: 0.75rem; font-weight: 800; }
.pk-pp-league { font-size: 0.857rem; font-weight: 600; color: #98A0AE; }
.pk-pp-top-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.pk-pp-date { font-size: 0.821rem; color: #98A0AE; }
.pk-pp-status { padding: 0.1rem 0.5rem; border-radius: 6px; font-size: 0.786rem; font-weight: 800; }
.pk-pp-status.is-pending { background: #F1F3F7; color: #98A0AE; }
.pk-pp-status.is-win { background: #EEF3FF; color: #1A56DB; }
.pk-pp-status.is-lose { background: rgba(225, 29, 42, 0.1); color: #E11D2A; }
.pk-pp-title { margin: 0; font-size: 1.071rem; font-weight: 800; color: #1F2430; word-break: keep-all; }
.pk-pp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.pk-pp-pick { padding: 0.25rem 0.55rem; background: #EEF3FF; border: 1px solid rgba(26, 86, 219, 0.3); border-radius: 6px; color: #1A56DB; font-size: 0.893rem; font-weight: 800; }
.pk-pp-odds { padding: 0.25rem 0.6rem; background: #1A56DB; border-radius: 6px; color: #fff; font-size: 0.893rem; font-weight: 800; }
.pk-pp-tag { padding: 0.15rem 0.45rem; background: #EEF3FF; border-radius: 4px; color: #1A56DB; font-size: 0.75rem; font-weight: 800; }
.pk-pp-tag.is-dog { background: rgba(225, 29, 42, 0.1); color: #E11D2A; }
.pk-pp-foot { display: flex; align-items: center; gap: 0.8rem; }
.pk-pp-desc { flex: 1 1 auto; min-width: 0; font-size: 0.929rem; color: #5B6473; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-pp-more { flex: none; display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.857rem; font-weight: 700; color: #1A56DB; }

/* 페이저(JS 생성) */
/* 페이저 — 커뮤니티(.cm-pager)와 **동일 규격**(시안 공통). rem은 root 16px 기준.
   숫자 = 36×36 흰배경+테두리 / 이전·다음 = 32px 높이·배경 없음·13px / 활성 = #1A56DB / 비활성 = opacity .4 */
.pk-pager { display: flex; justify-content: center; align-items: center; gap: 0.375rem; padding-top: 0.9375rem; }
.pk-pager:empty { display: none; }
.pk-page-btn {
    min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #E8EBF0; background: #FFFFFF; border-radius: 0.5rem;
    color: #5B6473; font-size: 0.84375rem; font-weight: 700; cursor: pointer;
    transition: all 0.12s ease;
}
/* 이전/다음 — 배경 없이 테두리만(숫자 버튼과 구분). JS가 `--text`를 붙인다. */
.pk-page-btn--text { height: 2rem; padding: 0 0.75rem; background: transparent; font-size: 0.8125rem; }
.pk-page-btn:hover:not(:disabled) { border-color: #1A56DB; color: #1A56DB; }
.pk-page-btn.is-active { background: #1A56DB; border-color: #1A56DB; color: #fff; }
.pk-page-btn:disabled { opacity: 0.4; cursor: default; }

/* =========================================================================
   상세 — 단일 픽 페이지(시안 Figma 퍼블). 헤더 카드 + 분석 내용 + 제휴 추천 B2C.
   ========================================================================= */

/* 뒤로가기 */
.pk-dt-back { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 1rem; font-size: 0.964rem; font-weight: 700; color: #5B6473; text-decoration: none; }
.pk-dt-back:hover { color: #1A56DB; }

/* 픽 카드 */
.pk-dt-card {
    background: #fff; border: 1px solid #E8EBF0; box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    border-radius: 16px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.6rem;
}

/* 헤더: 아바타 + 닉네임/메타 + 상태 */
.pk-dt-head { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 1rem; border-bottom: 1px solid #F1F3F7; }
.pk-dt-avatar { flex: none; width: 2.857rem; height: 2.857rem; border-radius: 50%; background: #E8EDFF; color: #3358D4; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; }
.pk-dt-id { display: flex; flex-direction: column; gap: 0.1rem; }
.pk-dt-name-row { display: flex; align-items: center; gap: 0.4rem; }
.pk-dt-name { font-size: 1.071rem; font-weight: 800; color: #1F2430; }
.pk-dt-id-meta { font-size: 0.857rem; color: #98A0AE; }
.pk-dt-status { margin-left: auto; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.786rem; font-weight: 800; }
.pk-dt-status.is-pending { background: #F1F3F7; color: #98A0AE; }
.pk-dt-status.is-win { background: #EEF3FF; color: #1A56DB; }
.pk-dt-status.is-lose { background: rgba(225, 29, 42, 0.1); color: #E11D2A; }

/* 종목/리그/날짜 */
.pk-dt-meta { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.5rem; }
.pk-dt-sport { padding: 0.1rem 0.45rem; background: #EEF3FF; color: #1A56DB; border-radius: 4px; font-size: 0.75rem; font-weight: 800; }
.pk-dt-league { font-size: 0.857rem; font-weight: 600; color: #98A0AE; }
.pk-dt-date { margin-left: auto; font-size: 0.821rem; color: #98A0AE; }

.pk-dt-title { margin: 0.1rem 0 0; font-size: 1.357rem; font-weight: 800; letter-spacing: -0.02em; color: #1F2430; }
.pk-dt-desc { margin: 0; font-size: 0.964rem; line-height: 1.6; color: #1F2430; }

/* 픽 칩 */
.pk-dt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.pk-dt-pick { padding: 0.3rem 0.7rem; background: #EEF3FF; border: 1px solid rgba(26, 86, 219, 0.3); border-radius: 6px; color: #1A56DB; font-size: 1rem; font-weight: 800; }
.pk-dt-odds { padding: 0.3rem 0.7rem; background: #1A56DB; border-radius: 6px; color: #fff; font-size: 0.929rem; font-weight: 800; }
.pk-dt-tag { padding: 0.3rem 0.7rem; background: #EEF3FF; border: 1px solid rgba(26, 86, 219, 0.3); border-radius: 6px; color: #1A56DB; font-size: 1rem; font-weight: 800; }
.pk-dt-tag.is-dog { background: rgba(225, 29, 42, 0.08); border-color: rgba(225, 29, 42, 0.3); color: #E11D2A; }
.pk-dt-note { margin: 0; font-size: 0.821rem; color: #98A0AE; }

/* 3지표(픽·기준배당·핸디캡) */
.pk-dt-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.4rem; }
.pk-dt-sumbox { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.7rem 0.5rem; background: rgba(244, 246, 249, 0.7); border-radius: 8px; }
.pk-dt-sum-v { font-size: 1rem; font-weight: 800; color: #1F2430; }
.pk-dt-sum-v.is-red { color: #E11D2A; }
.pk-dt-sum-l { font-size: 0.786rem; color: #98A0AE; }

/* 분석 내용 */
.pk-dt-analysis-label { margin-top: 0.6rem; font-size: 0.893rem; font-weight: 700; color: #5B6473; }
.pk-dt-analysis { font-size: 1rem; line-height: 1.75; color: #1A1A1A; word-break: break-word; }
.pk-dt-analysis p { margin: 0 0 0.5rem; }
.pk-dt-analysis img { max-width: 100%; height: auto; border-radius: 6px; }
.pk-dt-empty-analysis { color: #98A0AE; font-size: var(--text-sm); }

/* 소유자 수정/삭제 — ⚠ **쓰는 곳은 마이페이지 픽 상세(`Views/MyPage/PickDetail.cshtml`) 하나뿐이다.**
   픽스터 픽 상세(이 CSS 의 주 사용처)에서는 2026-08-20 에 버튼을 뺐다. 이 화면에서 안 보인다고
   죽은 규칙으로 오해해 지우면 마이페이지 수정·삭제 버튼 줄이 깨진다(그 뷰가 pickster.css 를 함께 싣는다). */
.pk-dt-owner { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding-top: 1rem; border-top: 1px solid #F1F3F7; }
.pk-dt-owner form { margin: 0; }

/* ---- 제휴 추천 B2C ---- */
.pk-dt-b2c {
    margin-top: 1.25rem;   /* 위 .pk-dt-card 와 영역 구분(.page-main 은 블록 흐름이라 카드 간 여백이 없음) */
    background: #fff; border: 1px solid #E8EBF0; box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04);
    border-radius: 16px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.pk-dt-b2c-head { display: flex; align-items: center; gap: 0.5rem; }
.pk-dt-b2c-bar { width: 4px; height: 1.15rem; background: #1A56DB; border-radius: 999px; }
.pk-dt-b2c-title { margin: 0; font-size: 1.143rem; font-weight: 800; letter-spacing: -0.02em; color: #1F2430; }
.pk-dt-b2c-sub { margin: 0 0 0.5rem; font-size: 0.893rem; color: #98A0AE; }
.pk-dt-b2c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.pk-dt-b2c-card {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.95rem;
    background: #fff; border: 1px solid #E8EBF0; border-radius: 12px; text-decoration: none;
    transition: border-color .12s ease;
}
.pk-dt-b2c-card:hover { border-color: #1A56DB; }
.pk-dt-b2c-card.is-featured { background: rgba(238, 243, 255, 0.4); border-color: rgba(26, 86, 219, 0.4); }
.pk-dt-b2c-thumb { flex: none; width: 2.571rem; height: 2.571rem; border-radius: 8px; background: rgba(71, 85, 105, 0.18); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 0.786rem; font-weight: 700; }
.pk-dt-b2c-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pk-dt-b2c-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pk-dt-b2c-name-row { display: flex; align-items: center; gap: 0.4rem; }
.pk-dt-b2c-name { font-size: 1rem; font-weight: 800; color: #1F2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-dt-b2c-grade { flex: none; padding: 0.1rem 0.4rem; background: #F1F3F7; color: #5B6473; border-radius: 4px; font-size: 0.714rem; font-weight: 700; }
.pk-dt-b2c-pick { flex: none; padding: 0.1rem 0.4rem; background: #1A56DB; color: #fff; border-radius: 4px; font-size: 0.679rem; font-weight: 800; }
/* ⚠ 한 줄 말줄임(`nowrap` + ellipsis)이면 **배당 금액이 잘린다** — 3열 카드에 팀명이 길면
     "…승 · 우대배당 ⋯" 이 되어 정작 중요한 숫자가 사라진다(2026-09-03 실측). 2줄까지 접어서
     금액이 남게 한다. 3줄 이상은 카드 높이가 튀므로 그때는 말줄임한다. */
.pk-dt-b2c-odds {
    font-size: 0.857rem; font-weight: 600; color: #98A0AE;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden; word-break: break-all; line-height: 1.35;
}
.pk-dt-b2c-go { flex: none; padding: 0.4rem 0.85rem; background: #1A56DB; border-radius: 8px; color: #fff; font-size: 0.893rem; font-weight: 700; }
.pk-dt-b2c-empty { padding: 1.5rem 1rem; text-align: center; color: #98A0AE; font-size: var(--text-sm); }
/* 배당 미등록 — 업체가 아직 입력하지 않은 카드. 빈 줄로 두면 카드 높이가 들쭉날쭉해진다. */
.pk-dt-b2c-odds-none { color: #C2C8D2; font-weight: 500; }

/* ---- 우리 업체 배당정보 입력 (기업회원 전용, 2026-09-03) ----
   기본 hidden 이고 JS 가 서버 자격 판정(ok:true) 후에만 연다 — 마크업이 있다고 권한이 생기지 않는다.

   ⚠⚠ **아래 `[hidden]` 규칙을 지우지 말 것 — 이게 없으면 폼이 항상 보인다.**
     `hidden` 속성의 `display:none` 은 **UA 스타일시트** 규칙이라, 작성자가 준
     `display:flex`(아래 `.pk-b2cf` 등)에 **우선순위에서 밀린다.** 실제로 비로그인 방문자에게
     입력 폼이 그대로 노출됐다(2026-09-03 브라우저 검증에서 발견). 라인 행(오버/언더 전용)도
     같은 이유로 항상 보였다. */
.pk-b2cf[hidden], .pk-b2cf-view[hidden], .pk-b2cf-form[hidden],
.pk-b2cf-row[hidden], .pk-b2cf-btn[hidden], .pk-b2cf-msg[hidden] { display: none !important; }

.pk-b2cf {
    margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #E8EBF0;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.pk-b2cf-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pk-b2cf-title { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: #1F2430; }
.pk-b2cf-note { font-size: 0.821rem; color: #98A0AE; }

/* 저장된 값 보기 — 좌측 요약 / 우측 수정·삭제 */
.pk-b2cf-view {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.7rem 0.9rem; background: #F7F9FC; border: 1px solid #E8EBF0; border-radius: 10px;
}
.pk-b2cf-view-txt { font-size: 0.929rem; font-weight: 700; color: #1F2430; word-break: break-all; }
.pk-b2cf-actions { flex: none; display: flex; gap: 0.4rem; }

/* 입력 폼 — 라벨+입력 한 줄. 모바일에서 라벨이 위로 떨어지도록 wrap 한다. */
.pk-b2cf-form { display: flex; flex-direction: column; gap: 0.5rem; }
.pk-b2cf-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pk-b2cf-label { flex: none; width: 5.5rem; font-size: 0.893rem; font-weight: 700; color: #4B5565; }
.pk-b2cf-sel, .pk-b2cf-inp {
    flex: 1 1 10rem; min-width: 0; max-width: 22rem;
    padding: 0.5rem 0.7rem; font-size: 0.929rem; color: #1F2430;
    background: #fff; border: 1px solid #E8EBF0; border-radius: 8px;
}
.pk-b2cf-sel:focus, .pk-b2cf-inp:focus { outline: 2px solid rgba(26, 86, 219, 0.35); outline-offset: 1px; border-color: #1A56DB; }
.pk-b2cf-sel:disabled { background: #F2F4F7; color: #98A0AE; }

/* 베팅유형 — 고정 표시(입력칸이 아니다, 2026-09-03 업체 확정).
   ⚠ select 처럼 보이면 회원이 누르려 하므로 **테두리를 주지 않는다** — 값 + 안내문만 보여 준다. */
.pk-b2cf-fixed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; min-width: 0; }
.pk-b2cf-fixed > b { font-size: 0.929rem; font-weight: 700; color: #1F2A37; }
.pk-b2cf-fixed-note { font-size: 0.821rem; font-style: normal; color: #98A0AE; }

.pk-b2cf-btns { display: flex; gap: 0.4rem; margin-top: 0.2rem; }
.pk-b2cf-btn {
    padding: 0.45rem 0.9rem; font-size: 0.893rem; font-weight: 700; cursor: pointer;
    background: #1A56DB; color: #fff; border: 1px solid #1A56DB; border-radius: 8px;
}
.pk-b2cf-btn:hover { filter: brightness(1.06); }
/* 보조 동작(수정·삭제·취소)은 외곽선형 — 저장과 시각적 무게를 구분한다 */
.pk-b2cf-edit, .pk-b2cf-del, .pk-b2cf-cancel { background: #fff; color: #4B5565; border-color: #E8EBF0; }
.pk-b2cf-del { color: #D64545; }

/* 진행 상태 전용('저장 중…'·'삭제 중…') — 오류는 모달이다(2026-09-17, `b2c-odds.js` 머리말).
   ⚠ `.is-err`(빨간 문구) 규칙은 함께 제거했다 — 오류를 인라인으로 되돌리면 모달과 두 벌이 된다. */
.pk-b2cf-msg { margin: 0.2rem 0 0; font-size: 0.857rem; color: #98A0AE; }

/* 모바일 — 라벨을 한 줄 위로 올리고 입력칸을 폭 전체로(가로 스크롤 방지) */
@media (max-width: 767.98px) {
    .pk-b2cf-row { flex-direction: column; align-items: stretch; gap: 0.3rem; }
    .pk-b2cf-label { width: auto; }
    /* ⚠⚠ **`flex` 를 반드시 해제한다 — 안 하면 입력칸 높이가 10rem(160px)이 된다.**
         행이 `column` 으로 바뀌는 순간 주축이 세로가 되어 데스크톱의 `flex: 1 1 10rem` 의
         **flex-basis 가 '너비'가 아니라 '높이'로 해석**된다(2026-09-03 실제 증상).
         `max-width: none` 만으로는 안 잡힌다 — 그건 가로축이라 주축과 무관하다. */
    .pk-b2cf-sel, .pk-b2cf-inp { flex: 0 0 auto; width: 100%; max-width: none; }
    .pk-b2cf-view { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .pk-b2cf-actions { justify-content: flex-end; }
}

/* ---- 목록 하단 (Pick 등록 버튼 영역) ---- */
.pk-list-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* ⚠ Pick 등록/수정 폼 CSS(`.pk-form-*`·`.pk-site-*`·`#pkEditor`·`.ql-*`)는 **삭제했다**(2026-08-20).
     폼이 마이페이지로 이관돼(`/MyPage/PickWrite`) 그쪽 `.mpk-f*`(mypage.css)만 쓴다.
     같은 폼의 CSS 를 두 벌 두면 시안이 바뀔 때 어느 쪽을 고쳐야 하는지 알 수 없다. */

/* ---- 모바일 ---- */
@media (max-width: 767.98px) {
    /* 2단 → 1단(순위 위, 개별정보 아래) */
    .pk-list-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .pk-info-head { grid-template-columns: 1fr; padding: 1.2rem 1.1rem; }
    .pk-info-rate { align-items: flex-start; }
    .pk-info-stats { grid-template-columns: repeat(2, 1fr); }
    .pk-pp-desc { white-space: normal; }

    /* 상세 — 단일 픽 */
    .pk-dt-summary { grid-template-columns: 1fr; }
    .pk-dt-b2c-grid { grid-template-columns: 1fr; }
    .pk-dt-title { font-size: 1.2rem; }

}