/* theme.css — A안 '네이비 정리' 통일 규칙 (2026-10-04, Claude Design 시안 비교 후 선택). */ /* 주석은 **한 줄 안에서** 닫는다 (test_layout_css_comments_are_closed) — 여러 줄 주석이 뒤 규칙을 삼킨 적이 있어 줄 단위로 검사한다. */ /* 지금 사이트의 남색·파랑은 그대로 두고, 페이지마다 제각각이던 공통 컴포넌트의 모양만 한 가지로 맞춘다. */ /* 기존 주제별 CSS 위에 마지막으로 링크된다 (구조·동작은 그대로): */ /* 1단 탭(페이지 안 탭) = 남색 글자 + 남색 3px 밑줄 (상단 메뉴와 같은 색) */ /* 2단 세그먼트(시즌|이번 주 · 기간 · 차트 전환) = 둥근 테두리 + 선택은 남색 채움 */ /* 필터 칩(여러 개 켜고 끄기) = B안: 회색 알약, 켜면 파랑 채움 */ /* 숫자 카드 = B안: 테두리 없는 흰 면 */ /* 상태 = B안의 색 점 + 글자 (배경 없음). 점은 모두 찬 점, 결과는 글자로 구분 */ /* 버튼 = 주 파랑, 돈이 빠지는 구매만 빨강, 보조는 흰 바탕 + 테두리 · 모서리 6px */ :root { --r-ctl: 6px; --chip-on-bg: var(--blue-light); --buy: #d0243a; } /* 1단 탭: 파란 밑줄 → 남색 (상단 메뉴와 같은 규칙) */ .subtabs a.on { color: var(--navy); border-bottom-color: var(--navy); } /* 2단 세그먼트: 둥근 테두리 + 남색 채움 — 기간 버튼·차트 전환·탭형 링크도 같은 모양 */ .seg { border-radius: var(--r-pill); } .bfilter .presets { border-radius: var(--r-pill); overflow: hidden; } .bfilter .presets a.on { background: var(--navy); color: #fff; } .hsw a.on, .ctabs a.on { background: var(--navy); color: #fff; border-color: var(--navy); } /* 필터 칩: B안 — 테두리 없는 회색 알약, 켜면 파랑 채움 (내 예측 상태 · 알림 필터 · 카트 안 탭). 랭킹 아이콘 칩은 ranking.css 그대로 (배경 없는 아이콘 + 남색 밑줄) */ :root { --track: #e9ebef; } .bfilter .fst label { border: 0; border-radius: var(--r-pill); background: var(--track); color: var(--text-3); padding: 5px 12px; } .bfilter .fst label:has(input:checked) { background: var(--blue); color: #fff; border: 0; } .bfilter .fst label:has(input:checked) .dot { box-shadow: 0 0 0 2px #fff; } .cseg a { border: 0; border-radius: var(--r-pill); background: var(--track); color: var(--text-3); } .cseg a.on { background: var(--blue); color: #fff; } /* 상태: B안의 '색 점 + 글자' (배경 채움 없음) — 예정 파랑 · 진행 빨강 · 종료 회색 · 적중 초록 · 미적중 빨강 · 무효 회색 */ .game .state .badge, .srow3 .st .sb, table.blist .st, #cpRc .rcrow .rst { display: inline-flex; align-items: center; gap: 5px; background: transparent !important; padding: 2px 0; border-radius: 0; font-size: 13px; font-weight: 700; } .game .state .badge::before, .srow3 .st .sb::before, table.blist .st::before, #cpRc .rcrow .rst::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0; border-radius: 50%; background: currentColor; box-sizing: border-box; } .game .state .badge { color: var(--blue); } .game .state .badge.done, .srow3 .st .sb.fin { color: var(--text-2); } .game .state .badge.done::before, .srow3 .st .sb.fin::before { background: #9aa3b2; } .game .state .badge.live { color: var(--red-strong); } .game .state .badge.live::before { width: 7px; height: 7px; margin: 0; background: var(--red-strong); } .game .state .badge.closed { color: var(--muted); } .game .state .badge.cancel { color: var(--red-strong); } .game .state .badge.cancel::before, .srow3 .st .sb.cancel::before { display: none; } table.blist .st.push, #cpRc .rcrow .rst.push { color: var(--muted); } /* 버튼: 모서리 6px · 주 = 파랑 · 구매 = 빨강 · 보조 = 흰 바탕 + 테두리 */ .btn { border-radius: var(--r-ctl); } .cart .buy { background: var(--buy); } .cart .keep { color: var(--navy); } .pager span.on { border-radius: 4px; } /* 배당 버튼: 모서리 4px로 통일 (예측 파랑 채움 · 카트 주황 · 마감 회색은 그대로) */ .opt { border-radius: 4px; } .opt:not(.can):not(.pick):not(.actual):not(.sel):not(.mine) { background: #f6f7f9; } /* 숫자 카드: B안 — 테두리 없는 흰 면 + 옅은 그림자 (라벨 12 → 값 22 → 보조 12) */ .kpi, .skpi { border: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04); } .kpi span, .skpi span { color: #6b7280; } .kpi small, .skpi small { color: var(--muted); } .skpi b { font-size: 22px; } .srow3 .st .sb.live { color: var(--red-strong); } .srow3 .st .sb.pre { color: var(--blue); } @media (max-width: 700px) { .game .state .badge, .srow3 .st .sb, table.blist .st { font-size: 12px; gap: 4px; } } /* 예측판 정리 (PC·모바일 같게, B 시안처럼 한 경기 = 한 카드, 같은 정보를 두 번 쓰지 않음) */ .card.bcard { background: transparent; border: 0; box-shadow: none; } .card.bcard > .thead { display: none; } /* 개최일시·대상경기·상태 머리줄: 카드 안에 다 보임 */ .card.bcard #topBar { border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; } .card.bcard .game { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .mname .pk { display: none; } /* 시장 줄의 'KIA 승 52%' 요약 = 아래 파란 버튼과 중복 */ .mname { font-size: 12px; color: var(--muted); } .mrow .mname .pno { border: 0; padding: 0; margin-right: 4px; color: var(--muted); font-weight: 600; background: transparent; font-size: 12px; } .mrow .mname b, .mrow .mname .line, .mrow .mname b .line { font-size: 12px; color: var(--muted) !important; font-weight: 600; } .opt.pick:not(.win):not(.loss):not(.push):not(.lw):not(.ll):not(.lt)::before { display: none; } /* 경기 전 '예측' 태그 = 파란 채움과 중복 (결과 태그는 유지) */ .opt.pick .pct { font-size: 12px; } .game .mlinks { font-size: 12px; } /* 오른쪽 패널(예측 티켓 · 카트): 탭은 1단 탭 규칙(남색 글자 + 밑줄), 다리 머리는 회색 글자 한 줄, 버튼은 둥근 6px */ .side .tabs2 a { background: #fff; color: var(--muted); border-bottom: 2px solid var(--line); } .side .tabs2 a.on { background: #fff; color: var(--navy); border-bottom: 3px solid var(--navy); } .side .tabs2 a.fold { background: #fff; } .ticket .leg .uoh { display: none; } /* '9점 이하·10점 이상' = 기준선과 중복 */ .ticket .addcart { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; } .ticket .addcart .ico, .viewnote .ico { width: 16px; height: 16px; flex: none; } .ticket .note.bnote { display: flex; justify-content: space-between; gap: 8px; } .ticket .note.bnote a { color: var(--blue); white-space: nowrap; } .cart .buyrow { gap: 8px; padding: 10px 12px 12px; background: #fff; } .cart .buy { border-radius: 6px; } .cart .keep { border-radius: 6px; border-left: 1px solid var(--line-strong); } #cpRc .rcrow .ri small a { white-space: nowrap; } /* '예측에 표시'가 줄 끝에서 끊기지 않게 */ /* 펼친 '근거'의 선발 줄: 투수 이름과 ERA를 같이 (카드 머리의 이름 옆 ERA는 모바일에서 잘려 숨김 — 여기서 봄) */ .infotab td.why .wi.sp { white-space: normal; } .infotab td.why .wi.sp .ps { display: inline-block; white-space: nowrap; } .infotab td.why .wi.sp .pn { color: var(--text); margin-right: 4px; font-size: 13px; } .side-info table.infotab td.k { display: table-cell; vertical-align: top; } /* '.side-info .k'(AI 의견 줄 라벨용 inline-block)이 표 칸에도 걸려, 오른쪽이 여러 줄이면 왼쪽 밑줄이 첫 줄에서 끊기던 것 */ @media (max-width: 700px) { .infotab td.why .wi { white-space: normal; } .infotab td.why .wi.sp { margin-right: 0; } .infotab td.why .wi.sp i { margin: 0 3px; } .infotab td.why .wi.sp small { margin-right: 4px; } .infotab td.why .wi.sp .pn { margin-right: 3px; font-size: 12px; } } /* 모바일 한 줄에 들어가게 */ /* 내 예측 목록: 프로토 번호는 회색 글자 한 줄(테두리 칩 X, 예측판과 같게), 영수증은 제목 옆 아이콘 */ .blist .pnos { gap: 1px 8px; } .blist .pnos .pno, .blist .pnos .pno.nono { height: auto; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: var(--muted); background: transparent; } table.blist .rchip { width: 28px; height: 24px; margin: -3px 0 -3px 4px; vertical-align: middle; border: 0; background: transparent; color: var(--navy); } table.blist .rchip svg { width: 16px; height: 16px; } table.blist .rchip:hover { border: 0; background: var(--blue-light); } /* 내 예측 필터: 날짜 입력은 '직접'을 눌렀을 때만 (빈 mm/dd/yyyy 두 칸이 늘 보이던 것) */ .bfilter .frow .dates:not(.open) { display: none; } .bfilter .presets a { cursor: pointer; } /* 내 예측 펼친 카드: 머리 = 번호·구매 시각 + 영수증, 다리 번호는 회색 글자, U/O 힌트 숨김 */ .bcard .bh { background: #f7f8fa; font-size: 13px; } .bcard .bh .rcpt { gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); font-size: 13px; } .bcard .bh .rcpt svg { width: 14px; height: 14px; } .bleg2 .lh .pno { border: 0; padding: 0; margin-right: 6px; color: var(--muted); font-size: 12px; font-weight: 600; } .bleg2 .uoh { display: none; } /* 카트 투표금 ⓘ: 라벨 글자 줄에 맞춤 (위로 떠 보이던 것) */ .cart .stake .tip { font-size: 13px; margin-left: 3px; vertical-align: baseline; line-height: 1; } @media (min-width: 701px) and (max-width: 999px) { table.blist tr.bdetail .bcard { max-width: 560px; } } @media (min-width: 1000px) { /* 넓은 PC: 베트맨 구매내역처럼 — 표 전체 폭, 경기마다 머리줄 + 선택 줄(가운데 버튼), 맨 아래 합계 가로 칸 */ table.blist tr.bdetail .bcard { max-width: none; } table.blist tr.bdetail .bleg2 .lb { grid-template-columns: 180px minmax(0, 1fr) 180px; padding: 10px 16px; } table.blist tr.bdetail .bleg2 .boxes { grid-column: 2; justify-self: center; width: 100%; max-width: 420px; } table.blist tr.bdetail .bcard > .tot > .tcnt { display: flex; } table.blist tr.bdetail .bcard > .tot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 12px 12px; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; } table.blist tr.bdetail .bcard > .tot > div { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; border-right: 1px solid var(--line); text-align: center; } table.blist tr.bdetail .bcard > .tot > div:last-child { border-right: 0; } table.blist tr.bdetail .bcard > .tot > div > span { padding: 7px 8px; background: var(--slate); color: #fff; font-size: 13px; font-weight: 700; } table.blist tr.bdetail .bcard > .tot > div > b { padding: 10px 8px; font-size: 15px; } } .cart .stake .shint { margin: 5px 0 0; font-size: 12px; color: var(--red-strong); } /* 투표금 안내: 한도·잔고 초과, 1천원 미만 */ .cart .stake input.bad { border-color: var(--red-strong); } .cart .cclear { padding: 6px 12px 2px; text-align: right; } .cart .cclear a { font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; } /* 담은 추천을 바꾸려면 비우기 → 빈 카트의 추천 버튼 */ /* 모바일 카트·영수증 버튼: 글자 없이 아이콘 원 + 숫자 배지 (카드 내용을 덜 가리게). 카트=남색 채움, 영수증=흰 바탕 테두리 */ @media (max-width: 860px) { .cart-fab, .cart-fab.rc { width: 52px; height: 52px; padding: 0; gap: 0; border-radius: 50%; justify-content: center; font-size: 22px; box-shadow: 0 3px 10px rgba(16, 24, 40, .2); } .cart-fab .lb { display: none; } .cart-fab .n { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; } } /* 카트: 추천 예측 담기/바꾸기 드롭다운 (칩 13개 대신 한 줄) */ .ticket .qsel { padding: 8px 12px 4px; } .ticket .qsel select { width: 100%; height: 44px; padding: 0 40px 0 14px; border: 1px solid #c9dcf7; border-radius: 10px; color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none; /* 기본 select 모양 대신 버튼처럼: 연한 파랑 바탕 + 오른쪽 꺾쇠 */ background: #eef4fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c62d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; } .ticket .qsel select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 98, 209, .15); } /* 모바일 카트 시트: 위쪽 손잡이를 끌어 높이 조절 (▼ 는 드롭다운처럼 보여 뺌), 짧게 누르면 접기/펴기 */ @media (max-width: 860px) { .cdrawer .ph { padding-top: 16px; touch-action: none; } .cdrawer .ph .grab { position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .55); } .cdrawer .ph .chev { display: none; } .cdrawer.folded .pn { max-height: 52px !important; height: auto !important; } } @media (max-width: 860px) { body.cart-open #toast { top: 84px; bottom: auto; } } /* 카트 시트가 열려 있으면 토스트는 위쪽 (구매 버튼을 가리지 않게) */ .ak.gift { background: var(--amber-bg); color: var(--amber); } /* 알림: 관리자 선물 */ /* ④ 다듬기 — 예측판·경기 상세 */ .empty.dayoff a { color: var(--blue); font-weight: 700; margin-left: 6px; } .game .head .cxl { flex: none; font-size: 13px; color: var(--blue); padding: 6px 4px; } @media (max-width: 700px) { .game .head .cxl { display: block; padding: 2px 0 0; font-size: 11.5px; text-align: center; } } /* 취소 경기 '일정 ›': 좁은 상태 칸(60px)에선 배지 아래 줄로 — 옆에 두면 카드 밖으로 삐져나와 잘렸다 (10/13) */ .gpage a.gpick { display: flex; align-items: center; gap: 4px; text-decoration: none; } .gpage a.gpick .go { margin-left: auto; color: var(--blue); font-weight: 700; font-size: 13px; } @media (max-width: 860px) { #topBar .btn.nav { width: 32px; height: 32px; } /* 날짜 이동 터치 영역 32px (전 24×28) */ .bar .stat.done { display: inline-flex !important; order: 10; flex: 0 0 auto; height: 22px; margin: 4px 0 0 30px; padding: 0 8px; font-size: 12px; gap: 3px; } /* 모바일에도 날짜별 결과 요약 — 날짜 줄 아래 작은 줄 (승패 4/5 · U/O 4/5) */ .bar .stat.done .tl { display: none; } #topBar:has(.stat.done) { flex-wrap: wrap; } #topBar .stat.done::before { content: ""; flex-basis: 100%; } } /* 패널·카트 다리: 영수증과 같은 표기 — 'KT : 롯데'(기준선은 홈 뒤 작은 글자) + 예상(파란 굵은 글자) */ .ticket .leg .g.rl { color: var(--text); font-weight: 600; font-size: 13px; } .ticket .leg .g.rl .ln { color: var(--muted); font-weight: 600; font-size: 12px; } .ticket .leg .g.rl .cl { font-style: normal; color: #9aa3b5; margin: 0 2px; } .ticket .leg .s .rp { color: var(--blue); font-size: 15px; font-weight: 800; } .bcard .tot > .tcnt { display: none; } /* 경기 수는 넓은 PC 가로 합계 칸에서만 (좁은 화면에선 목록 줄에 있음) */ @media (min-width: 1000px) { .wrap.mywrap { max-width: 960px; } } /* 내 예측: 표·펼친 카드가 베트맨처럼 딱 맞게 — 화면 전체로 늘리지 않음 */ @media (min-width: 1000px) { /* 랭킹 회원 예측 모달: 펼친 카드가 딱 맞게 폭을 줄이고 좌우 칸도 좁게 */ #hist .mbox { max-width: 860px; } #hist table.blist tr.bdetail .bleg2 .lb { grid-template-columns: 150px minmax(0, 1fr) 150px; } } .ticket .tot div > b.big { font-size: 15px; } .card.season table.t td.l .uname { word-break: keep-all; overflow-wrap: anywhere; } /* 결산 표: 이름은 단어 단위로, '7위'는 한 덩어리 */ .card.season table.t .rkn { white-space: nowrap; } h3 small.hsub { display: inline-block; white-space: nowrap; } /* 리그 순위 부제: 단어 중간에서 끊지 않고 통째로 다음 줄 */ @media (max-width: 700px) { table.t.mkt td.v small { display: block; min-width: 0; margin: 1px 0 0; font-size: 11px; } /* 모바일에서도 표본 수(43/63) */ table.t.kv.mvk th:nth-child(2), table.t.kv.mvk td:nth-child(2) { display: none; } /* 모델 vs 배당: 경기 수 열은 숨기고 지표 우선 */ table.t.strat th:nth-child(4), table.t.strat td:nth-child(4), table.t.strat th:nth-child(6), table.t.strat td:nth-child(6) { display: none; } /* 전략 표: 최고 누적·기록 일수 숨김 */ } .ticket .leg.rrow .rp { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 6px; border-radius: 50%; box-sizing: border-box; } /* 결과는 영수증처럼 예상에: 적중 = 초록 동그라미, 미적중 = 빨간 사선 */ .ticket .leg.rrow.win .rp { box-shadow: inset 0 0 0 2px var(--green); } .ticket .leg.rrow.loss .rp::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 2px solid var(--red); transform: rotate(-30deg); } .ticket .leg.rrow.push .rp { color: var(--muted); } .ticket .leg.rrow.prov.win .rp { box-shadow: inset 0 0 0 2px rgba(46, 158, 91, .45); } /* 경기 중(현재 점수 기준)은 연하게 */ .ticket .leg.rrow.prov.loss .rp::after { opacity: .45; } /* 예측 패널·카트 다리 = 영수증과 같은 열 정렬: 번호 | 홈 | 기준선 | : | 원정 | 예상 | 배당 — 폭에 맞춰 고르게 펼침(넓은 모바일 카트에서 가운데만 비던 것), 배당 끝 = 아래 합계 끝 */ .ticket .leg.rrow { display: grid; grid-template-columns: minmax(78px, 1.1fr) minmax(36px, .9fr) minmax(30px, .5fr) 10px minmax(36px, .9fr) minmax(48px, .9fr) minmax(36px, .8fr); column-gap: 3px; align-items: center; padding: 9px 12px; font-size: 14px; } .ticket .leg.rrow.nn { grid-template-columns: minmax(40px, 1fr) minmax(30px, .7fr) 10px minmax(38px, 1fr) minmax(48px, .9fr) minmax(36px, .8fr); } /* 추천 조합: 번호 없음 */ .ticket .leg.rrow.nn.pc { grid-template-columns: minmax(40px, 1fr) minmax(30px, .7fr) 10px minmax(38px, 1fr) minmax(48px, .9fr) minmax(36px, .8fr) 30px; } /* + 모델 확률 */ .cart .ticket .leg.rrow, #cartLegs .leg.rrow { grid-template-columns: minmax(78px, 1.1fr) minmax(36px, .9fr) minmax(30px, .5fr) 10px minmax(36px, .9fr) minmax(48px, .9fr) minmax(36px, .8fr) 22px; } /* + 빼기 */ .ticket .leg.rrow .lno { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.15; } .ticket .leg.rrow .th, .ticket .leg.rrow .ta { color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticket .leg.rrow .ln { color: var(--muted); font-size: 13px; font-weight: 600; text-align: right; padding-right: 2px; white-space: nowrap; line-height: 1.15; } .ticket .leg.rrow .lno .nb { position: relative; display: block; padding-left: 13px; } .ticket .leg.rrow .lno .pf { position: absolute; left: 0; font-style: normal; } /* 번호 앞 ①·H·U — 영수증처럼 접두어 칸을 따로 둬 번호 자리를 맞춤 */ .ticket .leg.rrow .lno .mt { display: block; margin-top: 2px; padding-left: 13px; font-size: 10px; font-weight: 600; color: var(--muted); opacity: .85; } /* 번호 아래 경기 유형 — 번호와 같은 자리에서 시작(접두어만 왼쪽에 걸침), ':' 양옆은 홈 기준선 : 원정만 */ .ticket .leg.rrow:not(.nn) { align-items: baseline; } /* 팀 이름·예상·배당을 번호 줄 높이에 맞춤 (유형 줄은 그 아래로) */ .ticket .leg.rrow .ln .h5 { display: table; margin: 0 0 1px auto; padding: 0 4px; border-radius: 4px; background: #fdf3e1; color: #a2610b; font-size: 10.5px; font-weight: 700; line-height: 15px; letter-spacing: -.2px; } /* 승①패·홀짝·5회: 기준선 칸의 작은 주황 글자가 무엇인지 안 읽혀 칩으로 (10/13) */ .ticket .leg.rrow .cl { font-style: normal; color: #9aa3b5; text-align: center; } .ticket .leg.rrow .rp { justify-self: center; font-size: 14px; font-weight: 800; color: var(--blue); padding: 0 8px; white-space: nowrap; } .ticket .leg.rrow .o { text-align: right; white-space: nowrap; } .ticket .leg.rrow .o.chg { color: #b26a00; text-decoration: underline dotted; } .ticket .leg.rrow .pp { text-align: right; color: var(--muted); font-size: 12px; font-weight: 600; } .ticket .leg.rrow .rm { justify-self: end; margin-left: 0; min-width: 24px !important; text-align: right; } .card.season .sgrid small, .kpis .kpi small { word-break: keep-all; } /* "3건" 같은 단위가 숫자와 떨어지지 않게 */ .userbar .ubtn > b { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* 긴 닉네임이 헤더를 두 줄로 밀지 않게 */ @media (max-width: 700px) { .userbar .ubtn > b { max-width: 84px; } } .bell { width: 36px; height: 36px; } /* 터치 영역 */ .bell .dot { top: 6px; right: 7px; } .userbar > a[href="/login"], .userbar > a[href="/signup"] { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); font-weight: 700; color: var(--navy); } .userbar > a[href="/signup"] { background: var(--navy); color: #fff; } h3 .predlnk { color: var(--blue); white-space: nowrap; font-size: 13px; font-weight: 700; margin-left: 6px; } /* 일정 제목 옆 링크: 단어 중간에서 끊지 않음 */ .note .lg-m { display: none; } @media (max-width: 700px) { .note .lg-pc { display: none; } .note .lg-m { display: inline; } } /* 모바일 월별 칸은 경기 수만 보여서 범례도 그에 맞게 */ @media (max-width: 400px) { .userbar .ubtn > b { max-width: 56px; } } @media (max-width: 370px) { .userbar { gap: 6px; } .userbar .ubtn > b { max-width: 42px; } } /* 360px 폭: 긴 닉네임이어도 헤더 한 줄 */ table.amem .msub { display: none; } /* 관리 회원: 모바일에서도 로그인 기록. nowrap 이면 이 줄 길이가 표 너비를 정해 가로 스크롤이 난다 (10/9 '관리' 칸이 늘면서 터짐) */ @media (max-width: 700px) { table.amem .msub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; white-space: normal; line-height: 1.5; word-break: keep-all; } } #recEmpty .egoto { display: inline-block; margin-top: 8px; color: var(--blue); font-weight: 700; cursor: pointer; } /* 랭킹 보기 칩 = 테두리 없는 글자 토글: 회원만 · ●오늘 구매 17 · ●10/3 적중 1 — 꺼짐은 회색 글자(흐림 처리 없이 대비 유지), 켜짐은 네이비 굵게 + 밑줄 */ .rkchip, .rkchip:hover, .rkchip.on { opacity: 1; filter: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 6px; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; box-shadow: none; } .rkchip:hover { color: var(--navy); } .rkchip b { color: var(--muted); font-weight: 700; } .rkchip .dt { width: 7px; height: 7px; border-radius: 50%; flex: none; } .rkchip .dt.new { background: var(--red); } .rkchip .dt.hit { background: var(--green); } .rkchip .ls { display: none; } .rkchip.on { color: var(--navy); font-weight: 800; border-bottom-color: var(--navy) !important; } .rkchip.on b { color: var(--navy); } .rkchip .ck { width: 14px; height: 14px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 4px; background: #fff; position: relative; } /* 배당 랭킹 고급·회원만: 글자만 있으면 눌리는 건지 안 보여 체크 박스 (10/13) */ .rkchip.on .ck { background: var(--navy); border-color: var(--navy); } .rkchip.on .ck::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .rkchip.on::before { content: none; } @media (max-width: 700px) { .rkchip, .rkchip:hover, .rkchip.on { padding: 0 4px; gap: 4px; font-size: 13px; } .rkchip .lb { display: none; } .rkchip .ls { display: inline; } } .merank { border-radius: var(--r-pill); padding: 5px 12px; } /* 내 순위: 다른 칩과 같은 알약, 모바일은 내용 폭만 */ @media (max-width: 700px) { .merank { flex-basis: auto; width: auto; } } table.t td { font-variant-numeric: tabular-nums; } /* 숫자 열 자리 맞춤 (전 표 공통) */ /* 탭 규칙: 페이지·카드 1단 탭(.subtabs·.gtabs·.ctabs) = 네이비 글자 + 3px 밑줄 (상단 GNB와 같은 색). 단일 선택 세그먼트(.seg·기간 버튼·알림 필터) = 알약 + 네이비 채움 */ .subtabs a.on, .gtabs a.on { color: var(--navy); border-bottom-color: var(--navy); } .ctabs { border-bottom: 1px solid var(--line); } .ctabs a, .ctabs a.on { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; } .ctabs a.on { color: var(--navy); border-bottom-color: var(--navy); } .rkbar .seg a.on { background: var(--navy); color: #fff; box-shadow: none; border-radius: 0; } /* 키보드 포커스: 브라우저 기본 검은 테두리 대신 공통 파란 링 (마우스 클릭엔 안 보이고 Tab 이동에만) */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; } /* 작은 아이콘 버튼: 모양은 그대로 두고 눌리는 영역만 32px 이상으로 */ table.blist .rchip { position: relative; } table.blist .rchip::after { content: ""; position: absolute; inset: -6px -4px; } .mclose, .cart .leg .rm, .ticket .leg.rrow .rm { position: relative; } .ticket .leg.rrow .rm::after { content: ""; position: absolute; inset: -8px -6px; } /* KPI 카드 하나의 규칙 (내 예측·시즌 기록·결산·관리): 라벨 12px 회색 → 값 22px/800 기본 글자색(손익만 초록/빨강) → 보조 12px. 링크 카드는 오른쪽 위 › */ .kpi span, .skpi span, .card.season .sgrid span, .adm .akpis .kpi span { font-size: 12px; font-weight: 600; color: var(--muted); } .kpi b, .skpi b, .card.season .sgrid b, .adm .akpis .kpi b { font-size: 22px; font-weight: 800; line-height: 1.25; } .skpi b, .card.season .sgrid b { color: var(--text); } .kpi small, .skpi small, .card.season .sgrid small, .adm .akpis .kpi small { font-size: 12px; } .card.season .sgrid > div { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04); border: 1px solid var(--line); } @media (max-width: 700px) { .kpi b, .skpi b, .card.season .sgrid b, .adm .akpis .kpi b { font-size: 19px; } } .clegend.tg { justify-content: flex-start; flex-wrap: wrap; } /* 차트 범례 = 왼쪽 위 알약 (시즌 기록·내 예측 공통) */ .clegend.tg.st > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text-2); } .clegend.tg.st > span i { margin-right: 0; } @media (max-width: 860px) { body:has(#cartFab:not([hidden])) .foot { padding-bottom: 84px; } } /* 카트 버튼(둥근 FAB)이 떠 있으면 푸터 빌드 정보를 가리지 않게 */ table.t.lu tr.sub td { background: var(--surface); } /* 라인업 교체 선수(↳): 박스스코어와 같은 들여쓴 회색 줄 */ table.t.lu tr.sub td.nm { font-weight: 600; color: var(--text-2); } table.t.lu tr.sub td.o { color: var(--muted-2); } /* 경기 상세 그라운드 (진행 중) — 수비 위치에 선수 이름, 투수(마운드)·타자(홈 옆, 노랑)·주자(노란 베이스)·대기 타석 */ /* 그라운드 — 경기장은 진한 잔디·흙(네이버 중계처럼), 카드는 사이트 톤(흰 바탕 얇은 테두리) */ .ground { position: relative; background: #2f7d3b; border-bottom: 1px solid var(--line); } .ground .gsvg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; } .ground .gf-bg { fill: #2f7d3b; } .ground .gf-grass { fill: #3b9149; } .ground .gf-dirt { fill: #c9a77c; } .ground .gf-base { fill: #fff; } .ground .gf-base.on { fill: #ffd23f; stroke: #b8860b; stroke-width: 1.5; } .ground .gl rect { fill: rgba(16, 32, 64, .72); } /* 이름표 알약 — 바탕색과 상관없이 읽히게 */ .ground .gl text { font-size: 12px; font-weight: 700; fill: #fff; } .ground .gl.p rect, .ground .gl.b rect, .ground .gl.r rect { fill: #fff; } /* 지금 플레이 중인 투수·타자·주자 = 흰 이름표 (수비수는 어두운 이름표) */ .ground .gl.p text, .ground .gl.b text, .ground .gl.r text { fill: #1d2433; font-weight: 800; } .ground .gf-box { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; } .ground:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 290px; background: #fff; } /* PC: 경기장 | 정보칸 */ .ground .gfield { display: flex; align-items: center; background: #2f7d3b; } .ground .gcol { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #fff; } .ground .gsec { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); } .ground .gsec:first-child { border-top: 0; } .ground .gh { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; } .ground .gv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); } .ground .gv .nm { font-size: 15px; font-weight: 800; color: var(--navy); } .ground .gv em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-2); } .ground .gpitch .gv, .ground .gdeck .gv { flex-direction: column; flex-wrap: nowrap; gap: 1px; } .ground .gwp { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); } .ground .gwp b { font-size: 16px; font-weight: 800; color: var(--navy); } .ground .gwp em { font-style: normal; font-size: 12px; } .ground .gwp em.up { color: var(--green); } .ground .gwp em.dn { color: var(--red); } .ground .gbar { display: block; width: 100%; height: 5px; margin-top: 5px; border-radius: 3px; background: #c0561f; overflow: hidden; } .ground .gbar > i { display: block; height: 100%; background: var(--blue); } @media (max-width: 860px) { /* 모바일·좁은 화면: 정보칸을 경기장 아래 줄로 */ .ground:not([hidden]) { grid-template-columns: minmax(0, 1fr); } .ground .gcol { border-left: 0; border-top: 1px solid var(--line); } .ground .gsec { grid-template-columns: 76px minmax(0, 1fr); padding: 9px 14px; } .ground .gdeck .gv { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; } } /* 카트 '추천 예측 담기/바꾸기': 기본 select 대신 버튼 → 예측판 선택기와 같은 시트에 한 줄 목록 (이름 · 경기 수 · 배당 ›) */ .ticket .qsel .qbtn { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 40px 0 14px; border: 1px solid #c9dcf7; border-radius: 10px; color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; background: #eef4fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c62d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; } .ticket .qsel .qbtn small { color: var(--muted); font-weight: 600; font-size: 12px; } .vpick.cartpk { z-index: 90; } /* 카트 시트 위에 */ .vpick.cartpk .vlg { display: none; } .vpick .vrows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .vpick .vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(64px, auto) 14px; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; background: #fff; border-top: 1px solid var(--line); cursor: pointer; color: var(--text); } .vpick .vrow:first-child { border-top: 0; } .vpick .vrow:active, .vpick .vrow:hover { background: var(--blue-light); } .vpick .vrow b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpick .vrow small { color: var(--muted); font-size: 13px; font-weight: 600; } .vpick .vrow .od { text-align: right; color: var(--blue); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; } .vpick .vrow .go { font-style: normal; color: var(--muted-2); font-size: 16px; } .game .spchg { padding: 7px 14px; background: var(--amber-bg); color: var(--amber); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); } /* 최종 예측 뒤 선발 변경 경고 */ .game .spchg b { font-weight: 800; } .game .spchg.ok { background: var(--blue-light); color: var(--navy); } /* 그라운드 왼쪽 위: 지금 투수(투구 수)·타자(오늘 성적) — 상황 줄의 작은 글씨 대신 크게 */ .wrap.form-page .form { max-width: none; margin: 24px 0 0; } /* 폼 페이지: 카드가 페이지 폭(460) 그대로, 위 여백은 다른 페이지와 비슷하게 */ .wrap.form-page .form + .form { margin-top: 12px; } /* 페이지 제목 줄 한 가지 규칙: 흰 바탕 · 제목 18px/800 네이버 · (시즌 선택 알약 · ⓘ) — 랭킹·결산·시즌 기록·리그 순위·포스트시즌·알림·관리 */ h3.rkh, .psh > h3, .card > .stitle { background: #fff; } h3.rkh .rkt, .card > .stitle > b, .psh > h3, .adm .ah b, .ptitle { font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; } .psh > h3 small, .psh > h3 .nextg { letter-spacing: 0; } @media (max-width: 700px) { h3.rkh .rkt, .card > .stitle > b, .psh > h3, .adm .ah b, .ptitle { font-size: 16px; } } /* 안내 상자 (템플릿 inline 색 대신) */ .notice { margin: 12px 16px 0; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.5; border: 1px solid; } .notice.warn { background: #fff8e6; border-color: #f2d27a; } .notice.ok { background: #eaf7ee; border-color: #9fd7b0; padding: 8px 12px; } /* 참가자 배지: 봇·AI (이름 앞 이모지 대신) */ .ptg { display: inline-flex; align-items: center; height: 17px; padding: 0 4px; margin-right: 3px; border-radius: var(--r-sm); font-size: 10px; font-weight: 800; font-style: normal; letter-spacing: 0; vertical-align: 1px; line-height: 1; } .ptg.ai { background: #f1e9ff; color: var(--purple); } .ptg.bot { background: var(--blue-light); color: var(--navy); } /* 상태 표기 한 규칙(점 + 글자, 채움 없음) — 남아 있던 알약(.jt 적중 판정 · 다리의 5회/진행 꼬리표 · 포스트시즌 시리즈 상태)도 같은 모양으로 */ /* 예정·진행 중 판정 파랑 · 진행 빨강 · 종료·무효 회색 · 적중 초록 · 미적중 빨강(모두 찬 점, 글자로 구분) · 잠정 판정 = 점선 점 */ .jt, .bleg2 .mk .sb.fin, .bleg2 .mk .sb.live, .bracket .sst { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent !important; font-size: 12px; font-weight: 700; color: var(--muted); } .jt::before, .bleg2 .mk .sb.fin::before, .bleg2 .mk .sb.live::before, .bracket .sst::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-sizing: border-box; } .jt.win { color: var(--green); } .jt.loss { color: var(--red); } .jt.pending { color: var(--blue); } .jt.prov { background: transparent !important; border: 0; } .jt.prov::before { background: transparent; border: 1.5px dashed currentColor; } /* 진행 중 잠정 판정 */ .bleg2 .mk .sb.fin, .bleg2 .mk .sb.live { display: flex; width: max-content; margin: 1px 0 2px; font-size: 11px; color: var(--text-2); } .bleg2 .mk .sb.fin::before { background: #9aa3b2; } .bleg2 .mk .sb.live { color: var(--red-strong); } .bracket .sst { font-size: 11px; } .bracket .sst.on { color: var(--red-strong); } .bracket .ser.sel .sh .sst, .bracket .ser.sel .sh .sst.on { background: transparent !important; color: #fff; } /* 선택 카드(네이비 머리) 위에선 흰 글자 */ .bracket .ser.sel .sh .sst.on::before { background: #ff8a80; } table.aitab td.pk .jt { display: flex; width: fit-content; margin: 0 auto 2px; } /* AI 표: 판정은 칸 가운데 한 줄 */ .side.side-ph .ph { display: flex; flex-direction: column; gap: 6px; padding: 28px 18px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; } /* 예측판 오른쪽 빈 칸 안내 */ .side.side-ph .ph b { color: var(--navy); font-size: 15px; } @media (max-width: 860px) { .side.side-ph { display: none; } } @media (max-width: 700px) { #topBar .stat.done { display: none !important; } } /* 모바일 예측판: 결과 칩(승패·U/O 적중 수)은 숨김 — 한 줄에 안 들어가 두 줄로 밀리던 것 */ @media (max-width: 700px) { .srow3 .sd .pit .ptag { border: 0; padding: 0; height: auto; width: auto; margin: 0 1px; font-size: 11px; line-height: inherit; background: none; } } /* 모바일 일정: 승/패 표시는 상자 없이 글자만 — 좁은 칸에서 투수 이름이 잘리지 않게 */ .game .state .badge { min-width: 4.4em; } /* 상태 글자 폭 고정 — '● 종료'/'● 9회초' 폭 차이로 점수(:) 줄이 들쭉날쭉하던 것 */ .game .state .badge::before, .game .state .badge.live::before, .srow3 .st .sb::before, .srow3 .st .sb.live::before { display: none; } /* 경기 상태(예정·회차·종료)는 점 없이 글자 색으로 — 종료는 줄 배경(회색)으로도 구분됨. 점은 적중·미적중 판정에만 */ .bfilter .dates input:focus, .bform select:focus, .card select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 98, 209, .15); } /* 입력칸 포커스 = 로그인 폼과 같은 파란 테두리 */ /* 모바일 터치 영역 ≥ 32px — 겉모양은 거의 그대로, 누르는 칸만 키움 (세그먼트·선택 상자·작은 버튼·표 속 이름 링크) */ @media (max-width: 700px) { .seg a, .afilter a, .bfilter .presets a, .bfilter .fst label, .vchip, .datebtn, .todaybtn, .ubtn, .pillsel select, select.viewsel { min-height: 32px; box-sizing: border-box; } .seg, .afilter { height: auto !important; min-height: 32px; align-items: stretch; } .seg a, .afilter a { display: inline-flex; align-items: center; } #topBar .btn.icon, .btn.nav { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } table.blist .rchip { width: 32px; height: 32px; margin: -4px 0 -4px 2px; } a.glink, a.more-tg { padding-top: 7px; padding-bottom: 7px; } a.chip { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; } a.uname, a.plink, a.edit, a.predlnk, a.today:not(:where(.cal-d)) { display: inline-block; padding-top: 8px; padding-bottom: 8px; margin-top: -8px; margin-bottom: -8px; } .foot .ft { min-height: 32px; display: flex; align-items: center; } .card.sched .mon > a { min-width: 32px; min-height: 32px; } .chart .clegend.tg a, .rkh .rksel select, .racev .rh .tsel select, a.merank { min-height: 32px; box-sizing: border-box; } .card.season .more a { display: inline-block; padding: 8px 0; margin: -8px 0; } .markets .mlinks a.glink, .markets a.more-tg { min-height: 32px; display: inline-flex; align-items: center; box-sizing: border-box; } a.plink { padding-top: 9px; padding-bottom: 9px; margin-top: -9px; margin-bottom: -9px; } a.today:not(:where(.cal-d)) { /* 일정 월별 달력의 오늘 칸(a.cal-d.today) 제외 — inline-block·음수 여백으로 칸이 밀려 테두리가 밖으로 나가던 것. :where 로 우선순위는 그대로 (.strip a.today 가 이김) */ padding-left: 4px; padding-right: 4px; margin-left: -4px; margin-right: -4px; } .pager a { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } } /* 이번 타석: 스트라이크존(포수 시점) + 투구 목록 — 점·번호 색 = 볼 초록 · 스트라이크 노랑 · 타격 파랑 */ .ground .gpitch .gv { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center; gap: 4px !important; } /* 존 그림 + 아래 '위치 대기 중' */ .ground .gzone { flex: none; background: #f4f6f9; border-radius: 6px; } .ground .gzone .zb { fill: #fff; stroke: var(--line-strong); stroke-width: 1; } .ground .gzone .zl { stroke: var(--track); stroke-width: 1; } .ground .gzone .zp circle { stroke: #fff; stroke-width: 1; } .ground .gzone .zp text { font-size: 8px; font-weight: 800; fill: #fff; } .ground .gzone .zp.b circle { fill: #22a06b; } .ground .gzone .zp.s circle { fill: #e0a100; } .ground .gzone .zp.x circle { fill: var(--blue); } /* 문자중계 .rlist .pt .n 과 같은 색 */ /* 전적·폼 탭: 불펜 현황 */ table.t.pen td, table.t.pen th { font-variant-numeric: tabular-nums; } table.t.pen td.hv { color: var(--red); font-weight: 700; } table.t.pen .ren { font-style: normal; font-size: 11px; font-weight: 700; color: var(--red); margin-left: 3px; } table.t.pen .dim { color: var(--line-strong); } @media (max-width: 700px) { .tmpage table.tm-pen th, .tmpage table.tm-pen td { padding: 7px 2px; } .tmpage table.tm-pen th { font-size: 12px; letter-spacing: -.3px; } .tmpage table.tm-pen th:first-child, .tmpage table.tm-pen td:first-child { padding-left: 8px; } .tmpage table.tm-pen th:last-child, .tmpage table.tm-pen td:last-child { padding-right: 8px; } } /* 360px 폰: 날짜 5칸 + 계가 카드 밖으로 밀리던 것 (10/13) */ .pensum { margin-top: 18px; } .ground .gsec.gpitch { grid-template-columns: minmax(0, 1fr) !important; align-items: start; gap: 6px; } .ground .gpitch .gv { justify-content: center; } .ground .gzone .zp text { font-size: 10px; } /* 투구 위치: 머리는 윗줄, 존은 칸 가운데 (목록이 빠져 폭 전체를 씀) */ /* 모바일 일정 머리 한 줄: [구단] ‹ 2026.08 › 오늘 [일별|월별] (전엔 두 줄) */ @media (max-width: 700px) { .sched .mon { flex-wrap: nowrap; gap: 3px; padding: 8px 8px; font-size: 16px; } .sched .mon::after { display: none; } .sched .mon .tsel { order: -1; margin-right: auto; } .sched .mon .vsw { order: 9; margin-left: auto; } .sched .mon .tsel select { padding: 0 18px 0 8px; } .sched .mon .tsel::after { right: 7px; } .sched .mon .vsw a { padding: 0 8px; } .sched .mon .todaybtn { padding: 0 10px; margin-left: 2px; min-height: 30px; height: 30px; } .card.sched .mon > a:not(.todaybtn) { min-width: 26px; width: 26px; } /* ‹ › 만 — 오늘 버튼까지 26px 로 눌려 글자가 삐져나오던 문제 */ .sched .mon .datebtn { padding: 2px 2px; } .sched .mon > * { flex-shrink: 0; white-space: nowrap; } } @media (max-width: 370px) { .sched .mon { font-size: 15px; gap: 2px; } .sched .mon .vsw a { padding: 0 6px; } } /* 예측판 펼친 상세: 남색 머리줄 대신 작은 제목, 근거는 홈 | 원정 비교표 */ .side-info .itit { flex: 1 1 100%; font-size: 13px; font-weight: 800; color: var(--navy); margin: 2px 0 -2px; } table.t.infotab td.cmpw { padding-top: 4px; padding-bottom: 4px; } /* PC 도 같은 규칙: 섹션 제목은 남색 굵게, 행 사이는 넉넉하게 (10/9) */ .side-info table.t.infotab > tbody > tr > td.k { color: var(--navy); font-weight: 800; font-size: 13px; } .side-info table.t.infotab > tbody > tr > td { padding-bottom: 10px; padding-top: 10px; } table.cmp { border-collapse: collapse; width: auto; min-width: 280px; font-size: 13px; } table.cmp th, table.cmp td { padding: 4px 14px 4px 0; text-align: left; border: 0; background: none !important; white-space: nowrap; font-variant-numeric: tabular-nums; } table.cmp th { color: var(--navy); font-weight: 800; font-size: 13px; } table.cmp td:first-child { color: var(--muted); font-size: 13px; padding-right: 18px; } table.cmp tr + tr td { border-top: 1px dashed var(--track); } table.cmp b { font-weight: 700; color: var(--text); } table.cmp b.adv { color: var(--blue); } table.cmp .pn { color: var(--text-2); font-size: 13px; font-weight: 400; } table.cmp em { font-style: normal; font-size: 12px; color: var(--muted); } table.cmp b, table.cmp td { font-size: 13px; } /* 한 칸 안에 11·12·13px 이 섞여 들쭉날쭉했다 — 본문 13, 보조 12 두 단계만 (10/9) */ /* 예측 내역 접힌 행: 경기 번호(U6286·H6285…)는 숨김 — 펼치면 다리마다·영수증에 있음 (목록이 난잡해 보이던 것) */ table.blist tr.brow .pnos { display: none; } .side-info .itit { padding-left: 8px; } @media (max-width: 700px) { /* 모바일: '근거' 머리는 위, 비교표는 칸 전체 폭 */ table.t.infotab > tbody > tr.cmpr > td { display: block; width: auto; } table.t.infotab > tbody > tr.cmpr > td.k { padding-bottom: 0; border-bottom: 0; width: 100%; box-sizing: border-box; background: none; } table.cmp { width: 100%; min-width: 0; font-size: 13px; } table.cmp th, table.cmp td { padding: 4px 6px 4px 0; } table.cmp td:first-child { padding-right: 8px; font-size: 12px; } table.cmp .pn { font-size: 12px; } } /* 경기 상세 모달 (예측판 '예상 점수 · 승률 · AI 의견 ›') */ .modal.gdet .mbox { max-width: 900px; } .modal.gdet .mbody { padding: 4px 14px 14px; } .modal.gdet .side-info { border-top: 0; margin-top: 0; display: flex !important; } .modal.gdet .side-info > table.infotab { flex: 1 1 100%; width: 100%; } /* 표가 내용 폭으로 줄어 오른쪽이 비던 것 */ .modal.gdet:not(.aiview) .aitab-wrap { display: none; } /* AI 의견은 예측판에서 AI 조합을 골랐을 때만 */ .modal.gdet.aiview .aitab tr.aioff { display: none; } @media (max-width: 700px) { .modal.gdet.aiview .aitab tr.why-row:not(.aioff) { display: table-row; } } /* 모바일: 그 AI 의 근거 줄은 펼친 채로 (PC 는 근거가 같은 행의 칸) */ .wrap:not(.aiview) .more-tg .aiw { display: none; } /* 예측 상세 맨 위 '한눈에' */ .gsum { flex: 1 1 100%; margin: 4px 0 6px; padding: 10px 12px; background: #f4f7fc; border: 1px solid #dfe7f3; border-radius: 8px; color: var(--text); } /* 전반 탭처럼 여러 시장이 겹칠 때만 갈라 준다. '.gs-row + .gs-row' 는 숨긴 행도 형제로 세어 보이는 첫 행 위에 선이 그어졌다 ([hidden] 은 DOM 에 남는다) → JS 가 첫 행에 .first 를 붙인다 */ .gsum .gs-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d6e0ef; } /* 한 줄: 왼쪽 경기번호·시장, 오른쪽 예측·확률 (10/12 — 'SCOUT 예측' 꼬리표는 위 제목과 겹쳐 뺌, 높이 절반) */ .gsum .gs-row.first { margin-top: 0; padding-top: 0; border-top: 0; } .gsum .gs-id { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); font-weight: 700; } /* 경기번호 · 시장 · 기준선 */ .gsum .gs-id .pno { margin-right: 5px; font-size: 11px; color: var(--blue); border: 1px solid var(--blue); border-radius: var(--r-sm); padding: 0 4px; font-weight: 700; } .gsum .gs-id em { font-style: normal; color: var(--text-2); font-weight: 700; } .gsum .gs-pick { flex: none; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .gsum .gs-v { font-size: 17px; font-weight: 800; color: var(--blue); } .gsum .gs-p { font-size: 14px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; } .gsum .gs-sc { margin-top: 6px; padding-top: 6px; border-top: 1px solid #dfe7f3; font-size: 14px; color: var(--text-2); } .gsum .gs-sc.first { margin-top: 0; padding-top: 0; border-top: 0; } .gsum .gs-sc b { color: var(--text); font-size: 15px; } .gsum .gs-sc small { margin-left: 6px; color: var(--muted); font-size: 12px; } @media (max-width: 700px) { .modal.gdet .mbody { padding: 2px 8px 12px; } } /* 포스트시즌 ⓘ(정규시즌 순위) 툴팁: 카드 밖으로 넘치게 + 제목 줄 기준(왼쪽 맞춤·화면 안) — 카드 안에 갇혀 스크롤이 생기던 것 */ .card.psh { overflow: visible; } .psh h3 { position: relative; } .psh h3 .ptip { position: static; } .ptip.seeds .box { left: 12px; right: auto; top: calc(100% - 4px); width: auto; max-width: min(320px, calc(100vw - 48px)); min-width: 260px; box-sizing: border-box; } /* 예측 상세: 승률 근거 (모델→보정→배당 섞기→최종 + 묶음별 기여 막대 — 홈 쪽 파랑 오른쪽, 원정 쪽 주황 왼쪽) */ /* 글자 크기는 12(보조) · 13(본문) · 14(소제목) · 15/17(한눈에) 네 단계만 — 11·14px 가 뒤섞여 들쭉날쭉했다 (10/9) */ /* 예측 상세 · 승리 확률 (10/6 일반인용): 홈 = 파랑, 원정 = 주황 — 나눈 막대·'상세 분석' 막대·글자가 같은 색 */ .wsplit { display: flex; max-width: 420px; height: 26px; border-radius: 6px; overflow: hidden; font-size: 13px; line-height: 26px; white-space: nowrap; } .wsplit > span { min-width: 64px; padding: 0 8px; overflow: hidden; box-sizing: border-box; } .wsplit .h { background: var(--blue); color: #fff; } .wsplit .a { background: #c0561f; color: #fff; text-align: right; } .wsplit b { color: #fff; } .wpipe { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); } .wpipe b { color: var(--text-2); } .wpipe b.fin { color: var(--navy); } .wexp { margin-top: 14px; max-width: 420px; font-size: 13px; } .wexp .wx-t { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .wexp .wx-h { display: flex; justify-content: space-between; margin: 0 64px 2px 72px; font-size: 12px; font-weight: 600; } .wexp .wx-h .h { color: var(--blue); } .wexp .wx-h .a { color: #c4551f; } .wexp .wx-r { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 8px; padding: 3px 0; } .wexp .wx-k { color: var(--text-2); white-space: nowrap; } .wexp .wx-b { position: relative; height: 10px; background: var(--track); border-radius: 5px; } .wexp .wx-b::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-strong); } .wexp .wx-b i { position: absolute; top: 0; bottom: 0; } .wexp .wx-b i.h { right: 50%; background: var(--blue); border-radius: 5px 0 0 5px; } .wexp .wx-b i.a { left: 50%; background: #c0561f; border-radius: 0 5px 5px 0; } .wexp .wx-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .wexp .wx-v.h { color: var(--blue); } .wexp .wx-v.a { color: #c4551f; } .wexp .wx-flat { margin-top: 2px; color: var(--muted); } .wexp .wx-note { margin-top: 5px; color: var(--muted); font-size: 12px; } @media (max-width: 700px) { .wsplit, .wexp { max-width: none; } .wexp .wx-r { grid-template-columns: 62px minmax(0, 1fr) 62px; gap: 6px; } .wexp .wx-h { margin: 0 68px 2px 68px; } } @media (max-width: 700px) { /* 모바일 예측 상세: 표 대신 '머리 줄 + 값(전체 폭)' 목록 — 칸이 좁아 글이 세로로 쪼개지던 것 */ table.t.infotab, table.t.infotab > tbody, table.t.infotab > tbody > tr, table.t.infotab > tbody > tr > td { display: block; width: auto; box-sizing: border-box; } table.t.infotab > tbody > tr { border-bottom: 1px solid var(--line); padding: 12px 0; } /* 섹션 사이를 벌려 경계가 보이게 (10/9) */ table.t.infotab > tbody > tr:last-child { border-bottom: 0; } table.t.infotab > tbody > tr > td { border: 0; padding: 2px 8px; background: none; } /* 섹션 제목은 맨 위 'KBO Scout 예측'(.itit)과 같은 남색 굵은 글씨로 — 회색 작은 글씨라 섹션 구분이 안 됐다 */ table.t.infotab > tbody > tr > td.k { font-size: 13px; font-weight: 800; color: var(--navy); padding-bottom: 5px; } } /* 팀 상세 페이지 */ .tmpage .tm-head { display: flex; align-items: center; gap: 10px; } .tmpage .tm-head .logo { width: 34px; height: 34px; flex-basis: 34px; } .tmpage .tm-back { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; color: var(--muted); font-size: 22px; text-decoration: none; border-radius: var(--r-sm); } .tmpage .tm-back:hover { background: var(--hover); color: var(--navy); } .tmpage .tm-rank { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; color: var(--muted); } .tmpage .tm-rank b { color: var(--navy); font-size: 15px; } .tmpage .tps { padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; background: var(--hover); color: var(--text-2); white-space: nowrap; } /* 포스트시즌 성적 (10/15) */ .tmpage .tps.champ { background: var(--gold-bg); color: var(--gold-text); } .tmpage .tps.ru { background: #e9edf3; color: var(--text-3); } .tmpage .tps.live { background: var(--red-bg); color: var(--red-strong); } .tmpage .tps.wait { background: var(--blue-light); color: var(--blue); } .tmpage .tps.out, .tmpage .tps.none { background: none; padding: 0; color: var(--muted); font-weight: 600; } .tmpage .tm-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); } .tmpage .tm-kpi > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-left: 1px solid var(--line); } .tmpage .tm-kpi > div:first-child { border-left: 0; } .tmpage .tm-kpi small { color: var(--muted); font-size: 12px; font-weight: 700; } .tmpage .tm-kpi b { font-size: 17px; font-weight: 800; color: var(--text); } .tmpage .tm-kpi b.pos { color: var(--green); } .tmpage .tm-kpi b.neg { color: var(--red); } .tmpage .tm-kpi em { font-style: normal; font-size: 12px; color: var(--muted); } .tmpage .tm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .tmpage .tm-grid .card { margin: 0; } @media (min-width: 861px) { /* PC: 왼쪽 최근 경기→선발 등판, 오른쪽 로테이션→불펜 — 짧은 로테이션 카드가 옆 카드 높이로 늘어나 비던 것 (10/13) */ .tmpage .tm-grid { align-items: start; } .tmpage .tm-grid .tm-c1 { grid-column: 1; grid-row: 1 / span 2; } .tmpage .tm-grid .tm-c2 { grid-column: 2; grid-row: 1; } .tmpage .tm-grid .tm-c3 { grid-column: 1; grid-row: 3; } .tmpage .tm-grid .tm-c4 { grid-column: 2; grid-row: 2 / span 2; } .tmpage .tm-grid .card.tm-wide { grid-row: 4; } } .tmpage .stitle.sm b { font-size: 15px; } .tmpage .stitle.sm small a { color: var(--blue); font-weight: 700; } .tmpage table.t { width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; } .tmpage table.t tr.link { cursor: pointer; } .tmpage table.t tr.link:hover td { background: var(--blue-light); } .tmpage .aw { color: var(--muted); font-size: 11px; } .tmpage small.ps { color: var(--purple); font-weight: 700; font-size: 11px; } .tmpage td.sc { font-weight: 700; } .tmpage .tm-res { font-weight: 800; } .tmpage .tm-res.W { color: var(--blue); } .tmpage .tm-res.L { color: var(--red); } .tmpage .tm-res.D { color: var(--muted); } .tmpage .wl { font-size: 11px; font-weight: 700; } .tmpage .wl.w { color: var(--blue); } .tmpage .wl.l { color: var(--muted); } .tmpage td.hv { color: var(--red); font-weight: 700; } .tmpage table.t td.l { white-space: nowrap; } .tmpage .tm-rot b.ok { color: var(--green); } .tmpage td.heat.h1 { background: #eef4fd !important; } .tmpage td.heat.h2 { background: #dbe8fb !important; } .tmpage td.heat.h3, .tmpage td.heat.h4 { background: #c4d9f7 !important; } /* 좌/우 상대 타선: 표가 넓어 한 줄 전체를 쓴다 */ .tmpage .tm-grid .card.tm-wide { grid-column: 1 / -1; } .tmpage .plat-kpi { margin-bottom: 2px; } .tmpage .plat-kpi b { font-size: 16px; } .tmpage .tm-plat td.dim, .tmpage .tm-plat td.dim b { color: var(--muted); font-weight: 400; } /* 손별 표본 미달 — 숫자는 보여주되 신뢰하지 말라는 표시 */ .tmpage .tm-plat b.pos { color: var(--green); } .tmpage .tm-plat b.neg { color: var(--red); } .tmpage .plat-note { padding: 8px 14px; color: var(--muted); font-size: 12px; line-height: 1.55; border-top: 1px solid var(--line); } .tmpage .plat-note b { color: var(--navy); } @media (max-width: 860px) { .tmpage .tm-grid { grid-template-columns: minmax(0, 1fr); } .tmpage .plat-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tmpage .plat-kpi > div:first-child { grid-column: auto; border-top: 1px solid var(--line); } /* 승패 칸처럼 한 줄 차지할 이유가 없다 — 2열 그대로 */ .tmpage .plat-kpi > div:first-child ~ div:nth-child(even) { border-left: 1px solid var(--line); } .tmpage .plat-kpi > div:first-child ~ div:nth-child(odd) { border-left: 0; } .tmpage .tm-plat { font-size: 12px; } .tmpage .tm-plat th, .tmpage .tm-plat td { padding-left: 4px; padding-right: 4px; } @media (max-width: 380px) { .tmpage .tm-plat th, .tmpage .tm-plat td { padding-left: 2px; padding-right: 2px; } .tmpage .tm-plat th:first-child, .tmpage .tm-plat td:first-child { padding-left: 6px; } } /* 360px: 8열이 9px 넘쳐 마지막 차이 칸이 잘리던 것 (10/13) */ .tmpage .tm-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tmpage .tm-kpi > div { border-left: 0; border-top: 1px solid var(--line); } .tmpage .tm-kpi > div:nth-child(even) { border-left: 1px solid var(--line); } .tmpage .tm-kpi > div:first-child { grid-column: 1 / -1; border-top: 0; } .tmpage .tm-kpi > div:first-child ~ div:nth-child(even) { border-left: 0; } .tmpage .tm-kpi > div:first-child ~ div:nth-child(odd) { border-left: 1px solid var(--line); } .tmpage .tm-rank { font-size: 12px; } .tmpage .tm-kpi.plat-kpi > div:first-child { grid-column: auto; border-top: 0; } .tmpage .tm-kpi.plat-kpi > div:nth-child(2) { border-top: 0; } /* 좌/우 타선: vs 좌투·vs 우투를 한 줄에 나란히, 마지막(반대 손 비율)이 한 줄 차지 (10/13) */ .tmpage .tm-kpi.plat-kpi > div:nth-child(odd), .tmpage .tm-kpi.plat-kpi > div:first-child ~ div:nth-child(odd) { border-left: 0; } .tmpage .tm-kpi.plat-kpi > div:first-child ~ div:nth-child(even) { border-left: 1px solid var(--line); } .tmpage .tm-kpi.plat-kpi > div:last-child:nth-child(odd) { grid-column: 1 / -1; } } a.tlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } a.tlink:hover b { color: var(--blue); text-decoration: underline; } /* 리그 순위 → 팀 상세 */ /* 내 정보 · 휴대폰 알림 (웹 푸시) */ .pushset { padding: 12px 16px 10px; border-top: 1px solid var(--line); margin-top: 8px; } .pushset > label small { color: var(--muted); font-weight: 400; } .pushset .push-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .pushset .push-st { flex: 1 1 160px; font-size: 13.5px; color: var(--navy); font-weight: 700; } .pushset .push-row .btn { min-height: 34px; padding: 6px 12px; } .pushset .push-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; } .alist + .note.apush, .note.apush { text-align: center; } .note.apush a { color: var(--blue); font-weight: 700; } .pushset .push-prefs { margin-top: 10px; padding: 10px 12px; background: var(--bg-soft, #f6f7fa); border-radius: var(--r-sm, 6px); } .pushset .pp-h { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .pushset .pp-h small { color: var(--green); font-weight: 400; margin-left: 6px; } /* 칸이 118px 이라 'SCOUT 예측 결과' 가 '…결'/'과' 로 쪼개져 아랫줄을 침범했다 (10/9 제보) — 칸을 넓히고 낱말 가운데에서는 안 끊기게 */ .pushset .pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px 10px; align-items: start; } .pushset .push-prefs label { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13.5px; font-weight: 400; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; margin: 0; cursor: pointer; } .pushset .push-prefs input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; } .pushset .pp-wide { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); } .pushset .pp-wide small { flex-basis: 100%; color: var(--muted); font-size: 12px; line-height: 1.45; padding-left: 24px; } .pushset .pp-score small, .pushset .pp-team small { padding-left: 0; } .pushset .pp-score select, .pushset .pp-team select { width: auto; margin: 0; } .pushset .pp-score > b, .pushset .pp-team > b { min-width: 64px; } .pushset .pp-score select, .pushset .pp-team select { min-width: 156px; } /* 경기 종료·점수·응원 팀: 이름 칸·상자 폭을 맞춰 세 줄이 같은 자리에서 시작 (10/13) */ /* 내 정보 · 비밀번호 줄 + 변경 모달 */ .form-page .pwrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); margin-top: 8px; font-size: 13.5px; color: var(--muted); } .form-page .pwrow .btn { min-height: 34px; padding: 6px 14px; } .modal.pwm { align-items: center; } .modal.pwm .mbox { max-width: 400px; } .modal.pwm form.mbody { display: flex; flex-direction: column; padding: 12px 16px 16px; max-width: none; margin: 0; } /* .form 기본(380px·가운데 40px 여백) 해제 */ .modal.pwm form.mbody .err { margin: 0 0 8px; } .modal.pwm .pw-note { color: var(--muted); font-size: 12px; margin: 2px 0 10px; } .modal.pwm .btn.primary { width: 100%; padding: 10px; font-size: 15px; } @media (max-width: 700px) { .modal.pwm { padding: 12px; align-items: center; } .modal.pwm .mbox { border-radius: 8px; max-height: calc(100vh - 24px); } } .pushops { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 6px); background: #fff; font-size: 13px; color: var(--muted); } .pushops b { color: var(--text); } .pushops b.neg { color: var(--red); } .pushops small { font-size: 11.5px; } .ground .gzone .zw { font-size: 11px; fill: var(--muted); } .ground .gpitch .zwait { font-size: 11.5px; color: var(--muted); } .ground .gpitch .gv { position: relative; } .ground .gpitch .gh .zfresh { font-size: 11px; font-weight: 500; color: var(--muted); } .ground .gpitch .gh .zfresh.old { color: #c2410c; } /* 서버가 네이버에서 마지막으로 받은 뒤 */ .ground .gzone .zp { cursor: pointer; } .ground .gzone .zp circle.zh { fill: transparent; stroke: none; } .ground .gzone .zp text { pointer-events: none; } /* 점보다 넓게 눌리는 칸 */ .ground .gzone .zp.on .zd { stroke: var(--text); stroke-width: 2; } .ground .gzone.zprev .zp, .ground .gzone.zprev .zb { opacity: .45; } /* 새 타자 첫 공 전: 직전 타석을 흐리게 */ .ground .gpitch .gh { display: flex; align-items: center; gap: 8px; } /* 투구 위치 [타석|투수 오늘] … N초 전 갱신 */ .ground .gpitch .gh .zfresh { margin-left: auto; } .ground .zseg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-weight: 600; } .ground .zseg a { padding: 2px 9px; font-size: 11.5px; color: var(--muted); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; } .ground .zseg a.on { background: var(--text); color: #fff; } .ground .znav { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 280px; } .ground .znav button { flex: none; min-width: 32px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; touch-action: manipulation; } .ground .znav button:disabled { color: var(--line-strong); cursor: default; } .ground .znav button.zlive { font-size: 11.5px; font-weight: 700; padding: 0 8px; color: #fff; background: var(--red); border-color: var(--red); } .ground .gpitch .zcap { flex: 1; min-width: 0; text-align: center; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ground .gpitch .zcap b { color: var(--text); font-weight: 700; } .ground .gzone.zsm .zp .zd { stroke: none; opacity: .55; } .ground .gzone.zsm .zp.rc .zd { opacity: .95; } .ground .gzone.zsm .zp.lst .zd { opacity: 1; stroke: var(--text); stroke-width: 1.4; } /* 투수 보기: 작고 반투명 — 겹칠수록 진하게, 최근 5구는 진하게, 마지막 공 테두리 */ .ground .gzone .zc { cursor: pointer; } .ground .gzone .zc .zd { fill: #e8590c; stroke: var(--line-strong); stroke-width: .6; } .ground .gzone .zc.on .zd { stroke: var(--text); stroke-width: 1.6; } /* 구역 보기: 많이 던진 칸일수록 진하게 */ .ground .gzone .zc text { font-size: 10px; font-weight: 800; fill: var(--text); pointer-events: none; } .ground .gzone .zc.dk text { fill: #fff; } .ground .gpitch .zctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .ground .gpitch .zleg { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); } .ground .gpitch .zleg a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; cursor: pointer; color: var(--muted); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* 범례 = 거르기 버튼 */ .ground .gpitch .zleg a.off { opacity: .4; text-decoration: line-through; } .ground .gpitch .zleg i { width: 8px; height: 8px; border-radius: 50%; } .ground .gpitch .zleg i.b { background: #22a06b; } .ground .gpitch .zleg i.s { background: #e0a100; } .ground .gpitch .zleg i.x { background: var(--blue); } .ground .gpitch .zcap2 { font-size: 11px; color: var(--muted); } .ground .gpitch .zsum { font-size: 12px; color: var(--muted); text-align: center; } .ground .gpitch .zsum span { display: block; white-space: nowrap; } .ground .gpitch .zsum b { color: var(--text); } /* 투수 화면 분석용 배치 (10/9): 구속을 머리에 — 질문이 '평소보다 괜찮은가' 다. 존은 작게 옆으로 붙여 여백을 없앤다 */ .ground .zhero { text-align: center; padding: 2px 0 8px; } .ground .zbig { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .ground .zbig small { margin-left: 3px; font-size: 14px; font-weight: 700; color: var(--muted); } .ground .zvs { margin-top: 4px; font-size: 12.5px; color: var(--muted); } .ground .zvs b { color: var(--text-2); } .ground .zvs b.dn { color: #e0702c; } .ground .zvs b.up { color: var(--blue); } .ground .ztwo { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: stretch; align-self: stretch; margin-top: 10px; } /* 폭 전체 — 존 왼쪽 끝을 구속 그래프와 맞춘다 (10/10) */ .ground .ztwo .gzone { width: 100%; height: auto; } /* 오른쪽 수치 (10/10): 이름·값이 한 줄에 붙어 읽히지 않던 것 → 2×2 칸, 값은 크게 위, 이름은 작게 아래. 존 높이를 채운다 */ .ground .zkv { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; min-width: 0; } .ground .zkv > div { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; min-width: 0; padding: 6px 4px; border-radius: 8px; background: #f4f6f9; text-align: center; } .ground .zkv b { font-size: 21px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .ground .zkv b small { margin-left: 1px; font-size: 12px; font-weight: 700; color: var(--muted); } .ground .zkv span { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; } .ground .zsec { align-self: stretch; margin-top: 10px; } .ground .zsh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .ground .zsh .zst { font-size: 12px; font-weight: 700; color: var(--text-2); border-bottom: 1px dotted var(--line-strong); cursor: help; -webkit-tap-highlight-color: transparent; } /* 그림 설명은 제목 말풍선 */ .ground .zsh small { font-size: 11.5px; font-weight: 700; } .ground .zsh small.dn { color: #e0702c; } .ground .zsh small.up { color: var(--blue); } .ground .zlab { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 3px; } /* 이닝별 평균 (HTML 막대): 값은 막대 안 흰 글씨, 회 이름은 아래 고정 크기 */ .ground .zib { position: relative; display: grid; gap: 6px; } .ground .zib > div { display: flex; flex-direction: column; min-width: 0; } .ground .zib .ia { display: flex; align-items: flex-end; height: 46px; margin: 0; } .ground .zib .ibr { display: flex; justify-content: center; align-items: flex-start; width: 100%; min-height: 17px; border-radius: 4px 4px 2px 2px; background: var(--muted-2); font-style: normal; } .ground .zib .ibr.up { background: var(--blue); } .ground .zib .ibr.dn { background: #e0702c; } .ground .zib .ibr b { padding-top: 2px; font-size: 11px; font-weight: 800; line-height: 13px; color: #fff; font-variant-numeric: tabular-nums; } .ground .zib span { height: 16px; margin-top: 2px; font-size: 11px; line-height: 16px; color: var(--muted); text-align: center; } .ground .zib .ibase { position: absolute; left: -2px; right: -2px; height: 0; border-top: 1px dashed #e0702c; pointer-events: none; } /* 구속 추이 (10/9): 투구 번호 × 구속. 최고·평균 두 숫자로는 '선발 떨어졌나' 에 답이 안 됐다 */ .ground .zspd { position: relative; padding-left: 26px; background: #f4f6f9; border-radius: 6px; } /* 왼쪽 26px = 최고·최저 숫자 자리 (밀어도 고정) */ .ground .zspd .zscr { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } .ground .zspd .zscr::-webkit-scrollbar { display: none; } .ground .zspd.scr .zscr { scroll-snap-type: x proximity; } .ground .zspd .zcan { position: relative; min-width: 100%; } .ground .zspd.scr .zcan { padding-top: 14px; } /* 위 14px = 이닝 이름 줄 */ .ground .zspd .zil { position: absolute; top: 1px; margin-left: 3px; font-size: 10px; font-weight: 700; line-height: 12px; color: var(--muted); scroll-snap-align: start; scroll-margin-left: 3px; pointer-events: none; } .ground .zspd svg { display: block; width: 100%; height: 54px; } .ground .zspd .zs { cursor: pointer; -webkit-tap-highlight-color: transparent; } .ground .zspd .zh { fill: transparent; stroke: none; } /* 공마다 누르는 칸 (세로 띠) */ .ground .zspd .zs.on .zd { stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .ground .zspd .yax { position: absolute; left: 3px; z-index: 1; transform: translateY(-50%); font-size: 10px; font-weight: 700; line-height: 1; color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; } .ground .zspd .sl { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linejoin: round; } .ground .zspd .si { stroke: #98a3b4; stroke-width: 1; stroke-dasharray: 3 3; } .ground .vb { stroke: #e0702c; stroke-width: 1; stroke-dasharray: 4 3; } /* 평소 구속 선 */ .ground .zspd .sd { fill: #e0a100; } .ground .zspd .sd.b { fill: #22a06b; } .ground .zspd .sd.x { fill: var(--blue); } /* 존 점·범례와 같은 색 (볼 초록·스트라이크 노랑·타격 파랑) */ .ground .gzone .zp.nw { transform-box: fill-box; transform-origin: center; animation: zdrop .45s cubic-bezier(.2, 1.4, .5, 1) both; } /* 방금 들어온 공: 떨어지듯 + 고리 */ .ground .gzone .zp circle.zr { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: zring 1.1s ease-out .3s both; pointer-events: none; } .ground .gzone .zp.b .zr { stroke: #22a06b; } .ground .gzone .zp.s .zr { stroke: #e0a100; } .ground .gzone .zp.x .zr { stroke: var(--blue); } @keyframes zdrop { 0% { opacity: 0; transform: translateY(-14px) scale(1.7); } 100% { opacity: 1; transform: none; } } @keyframes zring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } } .ground .ztip { position: absolute; transform: translate(-50%, -100%); padding: 4px 8px; border-radius: 6px; background: rgba(20, 24, 31, .92); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 3; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); } .ground .ztip[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .ground .gzone .zp.nw, .ground .gzone .zp .zr, .gstate .cnt .d.fl { animation: none !important; } .ground .gzone .zp .zr { display: none; } } /* 순위 · 매직넘버 계산 과정 모달 */ button.mgbtn { font: inherit; color: inherit; background: none; border: 0; padding: 4px 4px; margin: -4px -4px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; border-radius: 6px; -webkit-tap-highlight-color: rgba(28, 98, 209, .12); touch-action: manipulation; vertical-align: middle; } /* 밑줄 대신 작은 ⓘ — 누르면 계산 과정 */ .mgplain { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; } button.mgbtn .mtag, .mgplain .mtag { vertical-align: 0; } button.mgbtn .mgi { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor; color: var(--blue); font: 700 9px/1 Georgia, serif; font-style: italic; opacity: .75; flex: none; } button.mgbtn:hover { background: var(--hover); } button.mgbtn:hover .mgi { opacity: 1; } .modal.mgm { align-items: center; } .modal.mgm .mbox { max-width: 460px; } .modal.mgm .mbody { padding: 12px 16px 16px; font-size: 14px; line-height: 1.55; } .modal.mgm .mbody p { margin: 0 0 8px; } .modal.mgm .mbody p:first-child { color: var(--muted); font-size: 13px; } @media (max-width: 700px) { .modal.mgm { padding: 12px; } .modal.mgm .mbox { border-radius: 8px; max-height: calc(100vh - 24px); } } /* 관리 · 모델 노트 */ .mnote .card { margin-bottom: 12px; } .mnote .ch small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; } .mnote ol.mflow { margin: 0; padding: 10px 16px 12px 34px; font-size: 13.5px; line-height: 1.6; } .mnote ol.mflow li { margin-bottom: 6px; } .mnote ol.mflow small { display: block; color: var(--muted); font-size: 12px; } .mnote table.t { width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; } .mnote td.g { color: var(--muted); font-size: 12px; white-space: nowrap; } .mnote td.pos { color: var(--blue); } .mnote td.neg { color: var(--orange, #d9822b); } .mnote td.best { font-weight: 800; color: var(--green); } .mnote td.cbar { width: 28%; } .mnote td.cbar i { display: block; height: 8px; border-radius: 4px; } .mnote td.cbar i.pos { background: var(--blue); } .mnote td.cbar i.neg { background: #e8a45a; } .mnote .mnote-h { display: block; padding: 8px 14px 12px; color: var(--muted); font-size: 12px; line-height: 1.5; } .mnote .akpis.mk { padding: 10px 12px 4px; } .mnote .mmon { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 14px 12px; font-size: 13px; color: var(--muted); } .mnote .mmon b { color: var(--text); } .mnote ul.mrej { margin: 0; padding: 10px 16px 4px 32px; font-size: 13.5px; line-height: 1.6; } .mnote ul.mrej b { color: var(--text); } @media (max-width: 700px) { .mnote td.cbar, .mnote th.cbar { display: none; } .mnote table.mline { font-size: 12px; } .mnote table.mline td, .mnote table.mline th { padding: 4px 3px; } } .mnote .mscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mnote table.mline td.l { white-space: nowrap; } .mnote table.mline { min-width: 520px; } /* 내 예측 · 나 vs 모델 vs AI 순위표 + 전체 기간 요약 카드 */ .mywrap h3 small.muted { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; } .mywrap table.crank { width: 100%; font-variant-numeric: tabular-nums; } .mywrap table.crank td, .mywrap table.crank th { padding: 7px 6px; white-space: nowrap; } .mywrap table.crank td.l { overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 46%; } .mywrap table.crank th:first-child { width: 44px; } .mywrap table.crank td:first-child { width: 44px; color: var(--muted); font-weight: 700; } .mywrap table.crank td small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.3; } .mywrap table.crank td a { color: inherit; } .mywrap table.crank tr[hidden] { display: none; } .mywrap .cfil { display: flex; gap: 6px; padding: 12px 14px; } /* 위 여백 0 이라 칩이 제목 밑줄에 붙고, 아래는 짙은 표 머리줄에 얹힌 것처럼 보였다 (10/11·10/13 제보) */ .mywrap .cfil a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12.5px; color: var(--muted); cursor: pointer; } .mywrap .cfil a.on { border-color: var(--navy); color: var(--navy); font-weight: 700; } .mywrap #cpager { border-top: 1px solid var(--line); align-items: center; } .mywrap #cpager[hidden] { display: none; } .mywrap #cpager .pgt { border: 0; color: var(--muted); } .mywrap table.crank tr.me td { background: var(--blue-light); } .mywrap table.crank tr.me td:first-child { color: var(--navy); } .psum { padding: 12px 14px 14px; } .psum .sumtiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .psum .sumtiles > div { border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; min-width: 0; } .psum .sumtiles span { display: block; font-size: 12px; color: var(--muted); } .psum .sumtiles b { display: block; font-size: 19px; margin: 1px 0; } .psum .sumtiles b.pos { color: var(--green); } .psum .sumtiles b.neg { color: var(--red); } .psum .sumtiles small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; } .psum .ptitle { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--navy); } .psum .mkbars .mkr { display: grid; grid-template-columns: 92px 1fr 44px; grid-template-areas: "nm bar pc" "nm sm sm"; align-items: center; column-gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); } .psum .mkbars .mkr:last-child { border-bottom: 0; } .psum .mkbars .nm { grid-area: nm; font-size: 13.5px; font-weight: 700; } .psum .mkbars .mbr { grid-area: bar; height: 8px; background: #eef1f6; border-radius: 4px; overflow: hidden; } .psum .mkbars .mbr i { display: block; height: 100%; background: var(--blue); border-radius: 4px; } .psum .mkbars .pc { grid-area: pc; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .psum .mkbars small { grid-area: sm; font-size: 11.5px; color: var(--muted); } .psum .combos { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; } .psum .combos > div { background: #f7f8fa; border-radius: 6px; padding: 7px 8px; text-align: center; min-width: 0; } .psum .combos span { display: block; font-size: 12px; color: var(--muted); } .psum .combos b { display: block; font-size: 16px; } .psum .combos small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; } @media (max-width: 700px) { .mywrap table.crank td, .mywrap table.crank th { padding: 6px 4px; font-size: 13px; } .mywrap table.crank td.l { width: 52%; } .mywrap .cfil { padding: 10px 10px; } .mywrap table.crank td:first-child, .mywrap table.crank th:first-child { width: 34px; } } /* 경기 상세 · 전적·폼: 연승·연패 */ .formbox h4 .stk { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; font-size: 12px; font-weight: 800; vertical-align: middle; border: 1px solid currentColor; color: var(--muted); background: #fff; } .formbox h4 .stk.W { color: var(--green); } .formbox h4 .stk.L { color: var(--red); } /* 내 정보(설정): 섹션별 카드 + 머리글 */ .setpage .card.form h3 small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; } .setpage > .notice { margin: 16px 0 0; } .setpage > .notice.err { background: var(--red-bg, #fdecec); border-color: #f1b5b5; color: var(--red); } .setpage .card.form:first-of-type { margin-top: 16px; } /* 내 정보 머리 (10/9): 닉네임을 크게, 아이디·가입일은 작게. 잔고는 금액이라 오른쪽에 따로 */ /* 카드 안에서 왼쪽 끝이 셋이었다 — 머리글 12px · 이 줄 0 · 아래 칸 16px (10/9 제보). 16px 로 맞추고, 밑줄 아래 여백도 한 번만 준다 (전엔 margin 14 + 아래 칸 padding 12 = 26px 이 비었다) */ .setpage .acct2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); } .setpage .card.form > h3 { padding-left: 16px; padding-right: 16px; } .setpage .acct2 .who { min-width: 0; } .setpage .acct2 .who b { display: block; font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.2px; } .setpage .acct2 .who small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); } .setpage .acct2 .bal { flex: none; text-align: right; } .setpage .acct2 .bal span { display: block; font-size: 12px; color: var(--muted); } .setpage .acct2 .bal b { font-size: 18px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; } /* 간편 로그인: 공급자마다 한 줄 — 동그란 머리글자 · 이름/상태 · 연결·해제 */ .setpage .oalist { display: grid; gap: 8px; padding: 12px 16px 0; } /* 다른 칸과 같은 16px 안쪽 여백 — 전엔 카드 테두리에 붙어 있었다 */ .setpage .oarow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; } .setpage .oarow.on { border-color: #cfe0f7; background: #f7fafe; } .setpage .oarow form { margin: 0; } .setpage .oaico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 14px; color: #fff; } .setpage .oaico.google { background: #4285f4; } .setpage .oaico.kakao { background: #fee500; color: #3c1e1e; } .setpage .oatx { flex: 1 1 auto; min-width: 0; } .setpage .oatx b { display: block; font-size: 14px; color: var(--text); } .setpage .oatx small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setpage .btn.sm { padding: 5px 12px; font-size: 13px; min-height: 32px; } .setpage .oanote { display: block; padding: 10px 16px 12px; font-size: 12px; line-height: 1.6; color: var(--muted); } /* 마지막 로그인 수단은 해제 버튼 대신 이 표시 — 떼면 못 들어온다 */ .setpage .oakeep { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 12px; font-weight: 700; } /* 비밀번호가 아직 없는 계정 (소셜로 가입) */ .setpage .pwrow .pwst { margin-left: auto; margin-right: 2px; font-size: 12.5px; font-weight: 700; color: var(--orange, #d9822b); } .setpage .pwrow .pwst:empty { display: none; } /* 소셜 첫 로그인 갈림길 (oauth_new.html) — 새로 가입 / 이미 회원이에요 */ .oanew .obody { padding: 16px; } .oanew .owho { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--hover); } .oanew .owho b { display: block; font-size: 15px; color: var(--text); } .oanew .owho small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); } .oanew .owho .oaico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 15px; color: #fff; } .oanew .owho .oaico.google { background: #4285f4; } .oanew .owho .oaico.kakao { background: #fee500; color: #3c1e1e; } .oanew form { margin: 0; } .oanew .obtn { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 10px; border-radius: 10px; font-size: 15px; font-weight: 700; text-align: left; text-decoration: none; } .oanew .obtn small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; opacity: .85; } .oanew .note { margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: #fff8e8; color: #7a5a12; font-size: 12.5px; line-height: 1.6; } /* 로그인 화면의 간편 로그인 (연결해 둔 계정이면 로그인, 처음이면 가입) */ .oabtns { padding: 0 16px 14px; } .oasep { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; color: var(--muted); font-size: 12px; } .oasep::before, .oasep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .oabtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; } .oabtn:hover { background: var(--hover); } .oabtn.kakao { background: #fee500; border-color: #f0d800; color: #3c1e1e; } .oabtn .oaico { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; } .oabtn .oaico.google { background: #4285f4; } .oabtn .oaico.kakao { background: #3c1e1e; color: #fee500; } .oabtns > small { display: block; text-align: center; font-size: 12px; color: var(--muted); } .setpage .acct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); } .setpage .acct > div { padding: 10px 16px; min-width: 0; } .setpage .acct > div + div { border-left: 1px solid var(--line); } .setpage .acct span { display: block; font-size: 12px; color: var(--muted); } .setpage .acct b { display: block; font-size: 15px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .setpage .sec { padding: 12px 16px; } .setpage .sec label small { color: var(--muted); font-weight: 400; margin-left: 4px; } .setpage .nickrow { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .setpage .nickrow input { margin: 0; flex: 1 1 auto; min-width: 0; } .setpage .nickrow .btn { flex: none; min-height: 42px; padding: 0 18px; font-size: 15px; } .setpage .pwrow { margin-top: 0; } .setpage .privacy .pvopts { margin: 0; } .setpage .pushset { border-top: 0; margin-top: 0; padding-top: 12px; } .setpage .setfoot { text-align: center; } .setpage .setfoot a { color: var(--blue); } @media (max-width: 700px) { .setpage .acct > div { padding: 9px 12px; } .setpage .acct b { font-size: 14px; } } /* 사용자 메뉴·이름 앞 아이콘: 이모지 대신 라인 아이콘 (헤더 종 아이콘과 같은 톤) */ svg.ico { flex: none; vertical-align: -3px; } .userbar .umenu a, .userbar .umenu button { display: flex; align-items: center; gap: 10px; } .userbar .umenu svg.ico { color: var(--muted); } .userbar .umenu a:hover svg.ico, .userbar .umenu button:hover svg.ico { color: var(--navy); } .userbar .ubtn svg.ico, .myhead .who svg.ico { color: var(--navy); } .sched h3.dayh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .sched h3.dayh .hleg { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--muted); } .mnote .mflow4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; padding: 12px 14px 14px; counter-reset: none; } /* 관리 화면 폭(980)에선 2×2 */ .mnote .mflow4 > div { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; background: #fff; } .mnote .mflow4 > div:nth-child(even)::before { content: "›"; position: absolute; left: -10px; top: 50%; transform: translate(-50%, -50%); color: var(--muted); font-size: 16px; font-weight: 700; } .mnote .mflow4 .st { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); } .mnote .mflow4 .st i { font-style: normal; font-size: 10.5px; padding: 0 5px; border-radius: 8px; background: var(--hover); } .mnote .mflow4 .st i.on { background: #eaf7ee; color: var(--green); } .mnote .mflow4 b { display: block; font-size: 18px; color: var(--navy); margin: 3px 0 4px; } .mnote .mflow4 small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; } .mnote .ch small i.lg { display: inline-block; width: 10px; height: 8px; border-radius: 3px; margin: 0 3px 0 6px; } .mnote .ch small i.lg.pos { background: var(--blue); } .mnote .ch small i.lg.neg { background: #e8a45a; } .mnote table.mline th.grp { font-weight: 600; font-size: 12px; } @media (max-width: 480px) { .mnote .mflow4 { grid-template-columns: minmax(0, 1fr); } .mnote .mflow4 > div::before { display: none; } } .mnote .mflow4 small b.in { display: inline; font-size: 12px; margin: 0; color: var(--text); } .psum .sumtiles b a { color: inherit; } .psum .note.pnote { padding: 10px 0 0; } @media (max-width: 700px) { .fpanel .psum { padding: 10px 10px 12px; } } @media (min-width: 701px) { .fpanel .psum .sumtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fpanel .psum .mkbars .mkr { grid-template-columns: 110px 1fr 44px; } } @media (min-width: 701px) { .psum .sumtiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .psum .pgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 28px; align-items: start; } } /* 순위·기록 › 타자·투수 기록: 선수 칸 — 모바일은 구단 로고 빼고 이름(한 줄) 아래 구단 (좁은 칸에서 로고가 커지고 이름이 세로로 꺾이던 것) */ table.rec .pnm { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } table.rec .pnm small { color: var(--muted); } @media (max-width: 700px) { table.rec .pnm { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; } table.rec .pnm .logo { display: none; } table.rec .pnm small { font-size: 11px; } } /* 예측 분석 › 배당 시뮬레이션: 모바일은 금액 요약(+11.5만) · 이름 칸 줄바꿈 허용 · 보조 글씨(봇 기록) 숨김 — 가로 스크롤 없이 */ @media (max-width: 700px) { #d-money table.t { width: 100%; } #d-money table.t td, #d-money table.t th { padding: 7px 4px; font-size: 13px; } #d-money table.t td.nw { white-space: normal; word-break: keep-all; } #d-money table.t td.nw small { display: none; } #d-money table.t td.nw .ptg { margin-right: 3px; } } @media (max-width: 700px) { #d-money .mh, #d-money table.strat .mh { display: none; } #d-money table.strat td, #d-money table.strat th { padding: 6px 4px; font-size: 12.5px; } } /* 일수·최고 누적·기록 열은 모바일에서 숨김 */ @media (max-width: 700px) { #d-money table.strat { width: 100%; } #d-money table.strat td.l { white-space: normal; word-break: keep-all; } #d-money table.strat td:not(.l), #d-money table.strat th { white-space: nowrap; } #d-money table.aitbl td, #d-money table.aitbl th { padding: 7px 3px; } } /* 페이지 표시 '1 / 2' 는 버튼 모양 없이 글자로 (AI 참가자 조합 누적) */ .pager span.pgt { border: 0; padding: 5px 6px; color: var(--muted); display: inline-flex; align-items: center; } .pager span.pgt b { color: var(--text); margin-right: 3px; } @media (max-width: 700px) { .pc-only { display: none; } } .mnote table.mbk th.dim, .mnote table.mbk td.dim { color: var(--muted); } .mnote table.mbk th.grp { font-size: 12px; font-weight: 600; } .mnote table.mbk th.grp.dim { color: #c9d4ea; } .mnote table.mbk td.dim.pos, .mnote table.mbk td.dim.neg { color: var(--muted); } .adm .mnote .akpis .kpi small { white-space: normal; overflow: visible; } /* 모델 탭: 지금 파이프라인 · 시즌 전체 두 값을 잘리지 않게 */ .adm .ipsh { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #b25e00; background: #fff1d6; vertical-align: 1px; cursor: help; } /* 관리 회원: 다계정 참고 */ .form .anote1 { margin: 2px 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; } /* 가입: 1인 1계정 안내 */ /* 내역 페이지 버튼: 글자가 줄바꿈되지 않게, 모바일은 번호 대신 '현재 / 전체' (10/5) */ .pager a, .pager span { white-space: nowrap; flex: none; } .pager span.pgm { display: none; } .pager a, .pager span.on, .pager span.dim { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } /* 현재 번호가 다른 버튼보다 위로 떠 보이던 것 (a 와 같은 상자) */ @media (max-width: 700px) { .pager .pn, .pager span.pn { display: none; } /* span.on/dim 상자 규칙보다 뒤·같은 무게로 (모바일에 '3 …' 이 남던 것) */ .pager span.pgm { display: inline-flex; } .pager > a { padding: 5px 14px; } } /* 공통 알림·확인 창 (static/js/dialog.js) — 기본 alert/confirm 대신. 모달 카드와 같은 톤: 흰 카드·네이비 제목·파란 확인 */ .uidlg { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .45); animation: uidlgIn .12s ease-out; } .uidlg .box { width: 100%; max-width: 360px; background: var(--white, #fff); border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .22); overflow: hidden; } .uidlg .hd { display: flex; align-items: center; gap: 8px; padding: 16px 18px 6px; font-size: 16px; font-weight: 800; color: var(--navy); } .uidlg .hd .ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font: 800 12px/1 system-ui, sans-serif; flex: none; } .uidlg .hd .ic.ok { background: var(--green); } .uidlg .hd .ic.err { background: var(--red); } .uidlg .msg { padding: 4px 18px 18px; font-size: 14.5px; line-height: 1.6; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; } .uidlg .bt { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #f7f8fa; } .uidlg .bt .btn { flex: 1; height: 42px; font-size: 15px; border-radius: 6px; } .uidlg .bt .btn.danger { background: var(--red); border-color: var(--red); } @keyframes uidlgIn { from { opacity: 0; } to { opacity: 1; } } .uidlg .btn:focus { outline: none; } .uidlg .btn:focus-visible { box-shadow: 0 0 0 3px rgba(28, 98, 209, .28); } /* 열 때 확인 버튼에 포커스 — 굵은 기본 테두리 대신 옅은 링 */ /* 날짜 선택 창 (static/js/datepick.js) — 기본 달력 대신. 선택 창(.ppick)과 같은 틀: PC 팝오버 / 모바일 아래 시트 */ .dpick { position: fixed; inset: 0; z-index: 70; } .dpick[hidden] { display: none; } .dpick .bd { position: absolute; inset: 0; } .dpick .pn { position: absolute; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 30, 50, .18); padding-bottom: 6px; } .dpick .dh { display: flex; align-items: center; gap: 4px; padding: 8px 8px 6px 10px; border-bottom: 1px solid var(--line); } .dpick .dh b { flex: 1; text-align: center; font-size: 15px; color: var(--navy); } .dpick .dh .mv, .dpick .dh .x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; color: var(--navy); font-size: 20px; user-select: none; } .dpick .dh .x { font-size: 15px; color: var(--muted); } .dpick .dh .mv:hover, .dpick .dh .x:hover { background: var(--hover); } .dpick .dg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 6px 8px 2px; } .dpick .dg .wd { text-align: center; font-size: 11.5px; color: var(--muted); padding: 2px 0 4px; font-weight: 700; } .dpick .dg a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; } .dpick .dg .sun { color: var(--red); } .dpick .dg .sat { color: var(--blue); } .dpick .dg a:hover { background: var(--hover); } .dpick .dg a.now { box-shadow: inset 0 0 0 1.5px var(--navy); } .dpick .dg a.on { background: var(--navy); color: #fff; } .dpick .dg a.off { color: var(--line-strong); cursor: default; background: none; } .dpick .df { display: flex; justify-content: flex-end; padding: 2px 12px 4px; } .dpick .df .td { font-size: 13px; font-weight: 700; color: var(--blue); cursor: pointer; padding: 6px 4px; } @media (max-width: 860px) { .dpick .bd { background: rgba(10, 20, 40, .38); } .dpick .pn { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .22); padding-bottom: max(10px, env(safe-area-inset-bottom)); } .dpick .dg a { width: 42px; height: 42px; } } .dphide { display: none !important; } .dpbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; min-width: 92px; } .dpbtn::after { content: ""; width: 13px; height: 13px; background: currentColor; opacity: .45; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; } .dpbtn.empty { color: var(--muted); font-weight: 500; } @media (max-width: 700px) { .bfilter .dates .dpbtn { flex: 1; min-width: 0; } } /* 체크박스·라디오: 브라우저 기본 파랑 대신 사이트 네이비 */ input[type=checkbox], input[type=radio] { accent-color: var(--navy); } /* 입력 검증 안내 (dialog.js) — 기본 말풍선 대신 입력칸 아래 빨간 한 줄 */ .fmsg { margin: 4px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--red); line-height: 1.4; } input.bad, textarea.bad, select.bad { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(217, 83, 79, .12) !important; } /* 툴팁 (static/js/tip.js) — 기본 title 상자 대신 작은 네이비 말풍선 (PC 마우스 / 터치는 누를 수 없는 요소만) */ .uitip { position: fixed; z-index: 1100; max-width: min(300px, calc(100vw - 16px)); padding: 6px 10px; border-radius: 6px; background: var(--navy-dark); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-line; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); pointer-events: none; } .uitip[hidden] { display: none; } .uitip::after { content: ""; position: absolute; left: var(--ax, 50%); top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--navy-dark); } .uitip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--navy-dark); } /* ⓘ 설명: 터치·좁은 화면은 화면 위에 겹쳐 뜨던 상자 대신 아래 시트 */ html.tipsheet .tip .tipbox { display: none !important; } .tsheet { position: fixed; inset: 0; z-index: 1000; } .tsheet[hidden] { display: none; } .tsheet .bd { position: absolute; inset: 0; background: rgba(10, 20, 40, .38); } .tsheet .pn { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72vh; display: flex; flex-direction: column; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .22); padding-bottom: env(safe-area-inset-bottom); animation: tsheetUp .16s ease-out; } @media (min-width: 701px) { .tsheet .pn { left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; transform: translate(-50%, -50%); border-radius: 10px; animation: none; } } /* 터치 태블릿: 가운데 카드 */ .tsheet .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line); } .tsheet .ph b { font-size: 15px; color: var(--navy); } .tsheet .ph .x { border: 0; background: none; font-size: 17px; color: var(--muted); width: 36px; height: 36px; border-radius: 6px; cursor: pointer; } .tsheet .pb { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 18px; font-size: 14px; line-height: 1.6; color: var(--text); } .tsheet .pb .ti { padding: 9px 0; } .tsheet .pb .ti b { font-size: 13px; margin-bottom: 2px; } @keyframes tsheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } } #hist .mnote { padding: 9px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--text-2, #4a5263); word-break: keep-all; } /* 랭킹 내역 창: 봇·AI 설명 */ /* 보기 줄 (내 예측·추천 조합): PC·모바일 같은 모양 — ‹ 제목 2/3 › · 담기/영수증 · ✕ (10/6, ↺ 대신 ✕ = 닫고 SCOUT 예측) */ .viewnote.vbar { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 7px 7px 8px; background: #eef4fd; border: 1px solid #c9dcf7; border-radius: 10px; color: var(--text); font-size: 13px; } .viewnote.vbar[hidden] { display: none; } .viewnote.vbar .vl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; padding: 0 4px; } .viewnote.vbar .vl > b { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--navy); } .viewnote.vbar .vl .vt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .viewnote.vbar .vl .vpos { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .viewnote.vbar .vl small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viewnote.vbar .vl small b { color: #111827; } .viewnote.vbar .vl small .r.win { color: #137a3e; } .viewnote.vbar .vl small .r.loss { color: var(--red-strong); } .viewnote.vbar .vpg { flex: none; width: 30px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; } .viewnote.vbar .vpg:hover:not(:disabled) { background: rgba(28, 98, 209, .08); } .viewnote.vbar .vpg:disabled { color: #b9c6dc; cursor: default; } .viewnote.vbar .vadd { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--blue); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .viewnote.vbar .vrc, .viewnote.vbar .vx { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #c9dcf7; border-radius: var(--r-round); background: #fff; color: var(--navy); font-size: 15px; cursor: pointer; } .viewnote.vbar .vx { color: var(--text-2); } .viewnote.vbar a { margin: 0; } .uidlg .msg .cpy { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #f7f8fa; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); } /* uiCopy: 직접 복사할 값 */ /* 관리자: API 키 만료 표 */ .keyw table.keyt td small { display: block; color: var(--muted); font-size: 11.5px; } .keyw .kl { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; } .keyw .kl.ok { background: #e8f6ee; color: #137a3e; } .keyw .kl.soon { background: #fff4d6; color: #8a6100; } .keyw .kl.urgent, .keyw .kl.expired { background: #fde8e7; color: var(--red-strong, #c0392b); } .keyw .kl.unknown { background: var(--hover); color: var(--muted); } .keyw .kc { margin-left: 6px; font-size: 12px; } .keyw .mnote-h { display: block; padding: 8px 14px 12px; } .lu-est { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 2px; cursor: help; } /* 라인업 WAR: KBO 발표 전 직전 경기 라인업으로 계산 (10/7) */ .kpis .kpi b.dim { color: var(--muted); font-weight: 700; } /* 정산 전 손익·수익률: 초록 +₩0 대신 회색 — */ @media (max-width: 400px) { .vpick .vrow { gap: 6px; padding: 0 10px; } .vpick .vrow b { font-size: 14px; } .vpick .vrow small { font-size: 12px; } .vpick .vrow .od { font-size: 14px; } } /* 360px: AI 이름(+모델)이 잘리지 않게 */ @media (max-width: 700px) { /* 예측 내역 게임 칸: 'N게임 · 배당 · 영수증' 을 줄마다 같은 자리에 (배당 자릿수에 따라 영수증 아이콘이 들쭉날쭉하던 것) */ table.blist td.l { white-space: nowrap; } table.blist td.l > b { display: inline-block; min-width: 2.6em; } table.blist td.l small.bodd { display: inline-block; min-width: 44px; margin-left: 2px; font-variant-numeric: tabular-nums; } } /* 관리 화면 · 회원 제재 (10/9) */ .amem td.mng { text-align: center; white-space: nowrap; } .amem td.mng .btn { min-height: 30px; padding: 4px 10px; font-size: 12.5px; } @media (max-width: 700px) { .amem td.mng { padding-left: 4px; padding-right: 6px; } .amem td.mng .btn { padding: 4px 8px; } .adm table.amem td, .adm table.amem th { padding: 8px 6px; } /* 좁은 화면에선 칸 사이를 줄인다 */ .adm table.amem .nick { white-space: normal; text-align: left; } } .amem .susp { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; } .mang label { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); } .mang label small { margin-left: 4px; font-size: 11.5px; } .mang .msec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .mang .mrow { display: flex; gap: 8px; align-items: center; margin-top: 6px; } .mang .mrow input { flex: 1 1 auto; min-width: 0; margin: 0; } .mang .mrow .btn { flex: none; min-height: 40px; padding: 0 14px; } .mang .mrow input:disabled { background: var(--hover); color: var(--muted); } .mang .mlink { margin-top: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; } .mang .mlink .ltx { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mang .mlink .ltx small { color: var(--muted); } .mang .danger label { color: var(--red); } .mang .btn.del { background: var(--red); border-color: var(--red); color: #fff; } .mang .btn.del:disabled { opacity: .45; } /* 로그인 화면의 가입 입구 (10/9) — 작은 글씨 링크라 못 보고 로그인 칸에 새 아이디를 넣는 일이 있었다 */ .gojoin { padding: 0 16px 14px; text-align: center; } .gojoin .btn { display: block; width: 100%; box-sizing: border-box; padding: 11px; border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--text-2); } .gojoin .btn b { color: var(--blue); font-weight: 700; } .gojoin small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); } /* 숫자 열은 어디서나 같은 폭으로 — 위아래가 줄을 서야 비교가 된다 (10/9 제보: 배당·적중금 열 정렬) */ .alist .al .vl, table.t.rank td.num, table.t.rank td.money, .ticket .leg.rrow .o, .ticket .leg.rrow .pp, .ticket .tot div > b, .leg .o, .bet .lg .o { font-variant-numeric: tabular-nums; } /* 2026-10-11 전수 검수(모바일 390px): 누르는 칸이 30px 밑이면 엄지로 놓친다. 이 저장소가 이미 쓰는 기준(32px)에 맞춘다 */ @media (max-width: 700px) { .top .brand, .userbar .bal { min-height: 32px; display: inline-flex; align-items: center; } /* 110x26 · 76x20 이었다 */ #tglAll.btn.icon { min-width: 32px; } /* 22px 폭 */ .mrow .mkdet { min-height: 32px; } /* '상세 ›' 32x28 */ table.t.rec th a, table.t.rank th a { display: inline-block; padding: 7px 2px; } /* 정렬 링크 17px */ .note a, .setfoot a, .note.apush a, .mywrap .more a { display: inline-block; padding: 6px 2px; }/* 본문 속 이동 링크 16~20px */ } /* 포스트시즌 띠 (예측판 카드 맨 위 · 일정 줄 위 · 경기 상세 머리줄 위): 배지 + '플레이오프 · 2차전' + 오른쪽 시리즈 상황. 사이트 남색 통일, 한국시리즈만 금색 (10/13 시안 ②) */ .psb { display: flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 12.5px; line-height: 1.35; background: #eef2f8; border-bottom: 1px solid #dde4ef; color: #2c4a7c; } .psb .pb { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: #2c4a7c; border-radius: 4px; padding: 1px 6px; line-height: 16px; letter-spacing: .2px; } .psb b { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .psb span { margin-left: auto; padding-left: 6px; font-size: 12px; font-weight: 700; opacity: .85; white-space: nowrap; } .psb.ks { background: #fbf5e4; border-bottom-color: #f0e3bd; color: #7d5a0c; } .psb.ks .pb { background: #c4921b; } /* 팀 페이지 '최근 선발 등판' (10/13): 날짜는 작고 흐리게, 투수 이름 굵게, 승·패는 작은 알약, 이닝은 3⅓ 처럼 짧게 — 7열이 폰 화면에 들어가게 */ .tmpage table.tm-starts td.md, .tmpage table.tm-games td.md { color: var(--muted); font-size: 12px; white-space: nowrap; } .tmpage table.tm-games .tm-res { display: inline-block; min-width: 22px; padding: 1px 0; border-radius: 6px; font-size: 12px; text-align: center; } /* 최근 경기 결과도 선발 등판 표와 같은 알약 */ .tmpage table.tm-games .tm-res.W { background: var(--blue-light); } .tmpage table.tm-games .tm-res.L { background: var(--red-bg); } .tmpage table.tm-games .tm-res.D { background: #f1f3f6; } .tmpage table.tm-starts td.nm b { font-weight: 700; } .tmpage table.tm-starts .wl { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; font-size: 10.5px; line-height: 16px; vertical-align: 1px; } .tmpage table.tm-starts .wl.w { background: var(--blue-light); color: var(--blue); } .tmpage table.tm-starts .wl.l { background: #f1f3f6; color: var(--muted); } .tmpage table.tm-starts .aw, .tmpage table.tm-games .aw { display: inline-block; margin-right: 4px; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 10px; line-height: 14px; vertical-align: 2px; } .tmpage table.tm-starts .tm-res { display: inline-block; min-width: 22px; padding: 1px 0; border-radius: 6px; font-size: 12px; text-align: center; } .tmpage table.tm-starts .tm-res.W { background: var(--blue-light); } .tmpage table.tm-starts .tm-res.L { background: var(--red-bg); } .tmpage table.tm-starts .tm-res.D { background: #f1f3f6; } @media (max-width: 700px) { .tmpage table.tm-starts { font-size: 13px; table-layout: fixed; } .tmpage table.tm-starts th, .tmpage table.tm-starts td { padding: 8px 2px; } .tmpage table.tm-starts th:nth-child(1) { width: 46px; } .tmpage table.tm-starts th:first-child, .tmpage table.tm-starts td:first-child { padding-left: 8px; } .tmpage table.tm-starts th:nth-child(4) { width: 32px; } .tmpage table.tm-starts th:nth-child(5), .tmpage table.tm-starts th:nth-child(6) { width: 32px; } .tmpage table.tm-starts th:nth-child(7) { width: 38px; } .tmpage table.tm-starts th:last-child, .tmpage table.tm-starts td:last-child { padding-right: 8px; } .tmpage table.tm-starts td.l:not(.md) { overflow: hidden; text-overflow: ellipsis; } .tmpage table.tm-starts th { font-size: 12px; } } .psum .mkbars .mkr .pc { white-space: nowrap; text-align: right; } /* "100%" 가 두 줄로 꺾이던 것 (10/13) */ /* 구매 성향 (10/13 2차): 섹션 제목 '구매 성향' + 카드(타자 유형·한 줄 설명) + 세 축 — 축마다 이름·값 / 막대 / 양 끝을 따로 줄로, 축 사이 간격 넉넉히 */ .btype { padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #f5f8fd, #fff 60%); } .btype.none { padding: 12px 14px; color: var(--muted); font-size: 13px; background: #fff; } .btype .bt-n { display: block; font-size: 21px; font-weight: 800; color: var(--navy); letter-spacing: -.4px; } .btype .bt-d { margin: 6px 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-2); } .btype .bt-axes { display: grid; gap: 16px; padding-top: 12px; border-top: 1px dashed var(--line); } .btype .bt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .btype .bt-top b { font-size: 13px; font-weight: 700; color: var(--text); } .btype .bt-top span { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; } .btype .bt-bar { position: relative; height: 8px; margin: 0 7px; border-radius: 4px; background: linear-gradient(90deg, #d9e5f6, #ece9f3 50%, #f6dccb); } .btype .bt-bar i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--navy), 0 1px 3px rgba(0,0,0,.2); box-sizing: border-box; } .btype .bt-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); } /* 탭 이름 옆 ⓘ (10/13): 패널 안 소제목이 탭 이름과 같아 제목을 지우고 설명만 탭으로 옮겼다 — 상자는 탭 오른쪽 끝에 맞춰 모달 밖으로 안 나가게 */ /* 패널 맨 아래 접힌 안내 (10/13): 탭 이름과 같은 소제목도 탭 옆 ⓘ 도 아니고, 읽고 싶을 때만 펜다 */ .xinfo { margin: 14px 0 2px; border-top: 1px solid var(--line); } .xinfo > summary { display: flex; align-items: center; gap: 4px; width: fit-content; margin-left: auto; padding: 9px 0 7px; min-height: 32px; box-sizing: border-box; cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 600; color: var(--muted); } .xinfo > summary::-webkit-details-marker { display: none; } .xinfo > summary:hover { color: var(--blue); } .xinfo > summary i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .xinfo[open] > summary i { transform: translateY(1px) rotate(-135deg); } .xinfo .xbody { padding: 2px 0 10px; font-size: 12px; line-height: 1.6; color: var(--text-2); } .xinfo .xbody .ti { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); word-break: keep-all; } .xinfo .xbody .ti:last-child { border-bottom: 0; } .xinfo .xbody .ti b { display: block; margin-bottom: 1px; font-size: 11px; color: var(--navy); } .btsec .ptitle.bare { margin: 6px 0 12px; min-height: 0; } /* 제목이 빠진 줄 — 위아래가 2px·6px 라 단추가 끼여 보였다 (10/13) */ .fseason { display: flex; align-items: center; gap: 8px; padding: 8px 14px 0; font-size: 13px; } .btsec .ptitle .btshare { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff; color: var(--navy); font-size: 12px; font-weight: 700; cursor: pointer; } /* 내 구매 성향 → 그림으로 공유 (영수증처럼) */ .btsec .ptitle .btshare svg { width: 13px; height: 13px; } .btsec .ptitle { display: flex; align-items: center; gap: 4px; } /* 구매 성향 (기획안): 대표 성향 + 근거 / 보조 성향 칩 / 구매 특징 4칸 */ .btype .bt-k { display: block; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .2px; } .btype .bt-base { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); vertical-align: 3px; } .btype .bt-n { display: inline-block; } .btype .bt-why { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; } .btype .bt-why li { font-size: 12px; line-height: 1.5; color: var(--text-2); padding-left: 10px; position: relative; } .btype .bt-why li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #9aa8c0; } .btype .bt-why li b { margin-right: 6px; color: var(--navy); font-weight: 700; } .btype .bt-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; } .btype .bt-subs .bt-k { display: inline; margin-right: 2px; } .btype .bt-chip { padding: 2px 10px; border-radius: 12px; background: #e9eef7; color: var(--navy); font-size: 12px; font-weight: 700; } .btype .bt-mets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; } .btype .bt-mets > div { padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); } .btype .bt-mets span { display: block; font-size: 11px; color: var(--muted); } .btype .bt-mets b { font-size: 13.5px; font-weight: 800; color: var(--text); } @media (min-width: 701px) { .btype .bt-mets { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .btsec .ptitle .tip { font-size: 13px; } /* 구매 성향 카드: 요약만 보이고 근거·지표·막대는 '판정 근거·구매 특징 보기' 로 펼침 (10/13) */ .btype .bt-subs { margin-bottom: 0; } .btype .bt-more { margin-top: 12px; border-top: 1px dashed var(--line); } .btype .bt-more > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--blue); cursor: pointer; } .btype .bt-more > summary::-webkit-details-marker { display: none; } .btype .bt-more > summary::after { content: "▾"; font-size: 11px; transition: transform .15s; } .btype .bt-more[open] > summary::after { transform: rotate(180deg); } .btype .bt-more[open] > summary { padding-bottom: 12px; } .btype .bt-more .bt-axes { border-top: 0; padding-top: 4px; } /* 구매 성향 카드 3차 (10/13): 이름 · 설명 · 칩 → 막대 4개(늘) → '자세히'(구매 특징 4칸) */ .btype .bt-subs { margin-bottom: 14px; } .btype > .bt-axes { border-top: 1px dashed var(--line); padding-top: 14px; } .btype .bt-more .bt-mets { margin: 2px 0 0; } .btype .bt-more[open] > summary { padding-bottom: 10px; } /* 구매 성향 카드 4차 (10/13): 공유 그림과 같은 순서, 접는 것 없이 */ .btype .bt-who { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--muted); } .btype .bt-subs { margin: 8px 0 0; } .btype .bt-d { margin: 10px 0 12px; } .btype .bt-mets { margin-bottom: 4px; } .btype > .bt-axes { border-top: 0; padding-top: 12px; } .btype .bt-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; } /* '야구왕 님은 역배 선호형' 한 줄 (10/13) — 닉네임이 길면 자연스럽게 줄바꿈 */ .btype .bt-head .bt-who { display: inline; margin: 0; font-size: 14px; } .btype.none { display: flex; flex-direction: column; gap: 2px; } /* 표가 모자랄 때: '성향 분석 중' + 안내 (10/13 — '판정 보류' 대신) */ .btype.none .bt-wait { font-size: 15px; font-weight: 800; color: var(--navy); } /* 내 예측 탭 4개 (10/13 '구매 성향 분석' 추가): PC 는 긴 이름, 모바일은 짧은 이름 (내역 · 현황 분석 · 성향 분석 · 세트 구매) */ .subtabs.stabs .ts { display: none; } @media (max-width: 700px) { .subtabs.stabs .tl { display: none; } .subtabs.stabs .ts { display: inline; } } /* 머리줄 컨트롤 B안 (10/13) — 랭킹 시안 B 를 사이트 전체에: 시즌·구단 같은 머리줄 드롭다운은 테두리 없는 연회색 알약 + 남색 굵은 글자, */ /* 트로피 같은 아이콘 버튼은 테두리 없음. 세그먼트(시즌|이번 주 등)는 남색 채움 그대로 (10/13 사용자 선택). 설정 화면의 입력용 셀렉트는 그대로 */ :root { --soft: #e9edf4; } /* 머리줄 드롭다운 바탕: 페이지 배경(#f4f6fa)보다 한 단계 진하게 — 흰 카드 위에서 눌리는 칸으로 보이게 */ .rksel select, .pillsel select { border-color: transparent !important; background-color: var(--soft) !important; color: var(--navy) !important; font-weight: 800 !important; } .pillsel::after, .rksel::after { color: var(--navy) !important; } .pp-wide .pillsel select { border-color: var(--line-strong) !important; background-color: #fff !important; color: var(--text) !important; font-weight: 700 !important; } .pp-wide .pillsel::after { color: var(--muted) !important; } .rkh .hallbtn { border-color: transparent !important; background: transparent !important; } .rkh .hallbtn:hover { background: var(--soft) !important; } .rkbar { background: #fff !important; border-top: 0 !important; } .merank.pc { border-color: transparent !important; background: var(--soft) !important; } .sched .mon .todaybtn { border-color: transparent; background: var(--soft); color: var(--navy); } .sched .mon .todaybtn.on { background: var(--soft); color: var(--muted); } .vchip { border-color: transparent !important; background: var(--soft) !important; color: var(--navy) !important; } @media (max-width: 700px) { .rkh .hallbtn { margin-left: auto !important; } } /* 모바일: 트로피 · ⓘ 는 오른쪽 끝 */ h3.rkh .rksel select, .ssel select, .ksel select { height: 28px !important; min-height: 28px !important; } /* 제목 옆 시즌 선택은 28px — 32px 이면 제목 글자보다 칸이 커 보였다 (도구 줄 드롭다운은 옆 버튼 높이에 맞춰 그대로) */ /* 구매 성향 · 유형별 결과 (10/13, 막대 줄): 막대 = 실제 적중(색 = 판정), 세로선 = 배당 기준 기대. 표본 쌓는 중 = 빗금(20개까지 얼마나 모였는지) */ .btype .bt-chip.good { background: #e3f3e9; color: var(--green); } .btype .bt-chip.special { background: #e4f1fb; color: #1f6391; } /* 특별 칭호 (날씨 요정) — 성향 칩과 구별되는 하늘색 */ .btype .bt-res { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); } .btype .bt-rh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .btype .bt-rh > b { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--navy); } .btype .bt-rh small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); } .btype .bt-rh small i { display: inline-block; width: 2px; height: 10px; border-radius: 1px; background: var(--text); } .btype .bt-rr { padding: 10px 0; border-bottom: 1px solid var(--line); } .btype .bt-rr:last-child { border-bottom: 0; padding-bottom: 0; } .btype .bt-rt { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .btype .bt-rt b { font-size: 14px; font-weight: 800; color: var(--text); } .btype .bt-rt small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .btype .bt-st { margin-left: auto; padding: 1px 8px; border-radius: 7px; background: #eef1f6; color: var(--slate); font-size: 11.5px; font-weight: 800; white-space: nowrap; } .btype .bt-rb { position: relative; height: 10px; border-radius: 5px; background: #edf0f5; } .btype .bt-rb .fill { position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; border-radius: 5px; background: #8fa3c4; } .btype .bt-rb .exp { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); } .btype .bt-rn { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .btype .bt-rn strong { font-size: 13px; font-weight: 800; color: var(--text); } .btype .bt-rr.good .fill { background: var(--green); } .btype .bt-rr.good .bt-st { background: #e3f3e9; color: var(--green); } .btype .bt-rr.good .bt-rn strong { color: var(--green); } .btype .bt-rr.low .fill { background: #d98b88; } .btype .bt-rr.low .bt-st { background: #fbeaea; color: var(--red); } .btype .bt-rr.low .bt-rn strong { color: var(--red); } .btype .bt-rr.wait .fill { background: repeating-linear-gradient(45deg, #c9d2e0 0 4px, #dde3ec 4px 8px); } .btype .bt-rr.wait .bt-st { padding: 0; background: none; color: var(--muted); font-weight: 600; } .btype .bt-top span { color: var(--muted); } .btype .bt-top span strong { margin-left: 2px; font-size: 13.5px; font-weight: 800; color: var(--navy); } /* 막대 글자: 핵심 값만 굵게 (4칸을 뺀 대신 한눈에, 10/13) */ .btype .bt-bar::before, .btype .bt-bar::after { content: ""; position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px #c3ccda; } /* 20%·80% 눈금 = 성향 판정 기준 (가운데 = 보통, 10/13) */ .btype .bt-bar::before { left: 20%; } .btype .bt-bar::after { left: 80%; } .btype .bt-bar i { z-index: 1; } /* 성향 카드 (10/13 성향 중심): 같은 성향 인원 · ●시즌/○최근 범례 · 구성 막대(조합 경기 수·게임 유형) · 구매 습관 4칸 · 나와 같은 성향 */ .btype .bt-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; } .btype .bt-rare { font-size: 12px; color: var(--muted); white-space: nowrap; } .btype .bt-rare b { color: var(--navy); font-weight: 800; } .btype .bt-lg { display: flex; justify-content: flex-end; gap: 12px; margin: -2px 0 4px; font-size: 11.5px; color: var(--muted); } .btype .bt-lg i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; vertical-align: -1px; box-sizing: border-box; } .btype .bt-lg i.s { background: var(--navy); } .btype .bt-lg i.r { border: 2px solid #e07a3f; background: #fff; } .btype .bt-bar u { position: absolute; top: 50%; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2.5px solid #e07a3f; border-radius: 50%; background: #fff; box-sizing: border-box; } .btype .bt-bar i { z-index: 2; } .btype .bt-fb { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: 6px; } .btype .bt-fb i { display: block; min-width: 3px; height: 100%; } .btype .bt-fl { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font-size: 12px; color: var(--text-2); } .btype .bt-fl span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .btype .bt-fl b { font-weight: 800; } .btype .bt-fl em { font-style: normal; color: var(--muted); } .btype .bt-fl span i { width: 9px; height: 9px; border-radius: 2px; } .btype .c-1 { background: #cfe0f5; } .btype .c-2 { background: #9cc0ea; } .btype .c-3 { background: #5b8fd6; } .btype .c-4 { background: #2f63b0; } .btype .c-5 { background: #1f3a6e; } .btype .c-승패 { background: #2b4c7e; } .btype .c-핸디캡 { background: #5b8fd6; } .btype .c-언더오버 { background: #9cc0ea; } .btype .c-고급 { background: #e07a3f; } .btype .bt-sh { display: block; font-size: 14px; font-weight: 800; color: var(--navy); } .btype .bt-hab, .btype .bt-same { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); } .btype .bt-ps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .btype .bt-ps a { padding: 5px 11px; border-radius: var(--r-pill); background: var(--soft, #e9edf4); color: var(--navy); font-size: 12.5px; font-weight: 700; } .btype .bt-ps a:has(> .ptg:first-child) { padding-left: 5px; } /* 봇·AI 칩: 배지가 칩 왼쪽 끝에 붙게 — 칩 바탕과 배지 바탕이 비슷해 SCOUT 앞이 빈칸처럼 보였다 (10/14) */ .btype .bt-ps a .ptg { background: var(--surface); } .btype .bt-ps span { padding: 5px 4px; font-size: 12px; color: var(--muted); } /* 구매 현황 분석 · 자주 고르는 종목: 배당 기대 대비 판정 (10/13) */ .psum .mkbars .mkr small .xp { color: var(--muted); } .psum .mkbars .mkr small .vd { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 18px; vertical-align: 1px; } .psum .vd.good { background: #e3f3e9; color: var(--green); } .psum .vd.low { background: #fbeaea; color: var(--red); } .psum .vd.mid { background: #eef1f6; color: var(--slate); } .psum .vd.wait { padding: 0; background: none; color: var(--muted); font-weight: 600; } .btype .bt-hab .bt-mets { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 0; } /* 구매 습관 2칸 (하루 평균 구매 · 평균 구매 금액, 10/13) — PC 도 2칸 */ .psum .mkbars .mkr { grid-template-columns: 92px 1fr 52px; grid-template-areas: "nm bar pc" "nm sm vd"; } /* 판정 배지 = 오른쪽 % 아래 (10/13) */ @media (min-width: 701px) { .fpanel .psum .mkbars .mkr { grid-template-columns: 110px 1fr 52px; } } .psum .mkbars .mkr > .vd { grid-area: vd; justify-self: end; align-self: center; margin: 0; padding: 0 7px; border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 18px; white-space: nowrap; } .psum .mkbars .mkr > .vd.wait { padding: 0; font-weight: 600; font-size: 11.5px; } .btype .bt-hab .bt-mets small.bt-nt { display: block; margin-top: 1px; font-size: 11px; color: var(--muted-2, #9aa3b5); } /* '구매한 날 기준' */ /* 참가자 창 (10/13): 성향 탭 제목이 다른 탭보다 14px 아래에 있던 것 · 밀어서 탭을 넘기면 그 방향에서 들어오게 */ #hist .fpanel .psum > .btsec:first-child > .ptitle { margin-top: 0; } #hist .fpanel.sl-l { animation: histSlL .22s ease-out; } #hist .fpanel.sl-r { animation: histSlR .22s ease-out; } @keyframes histSlL { from { opacity: .3; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes histSlR { from { opacity: .3; transform: translateX(-28px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #hist .fpanel.sl-l, #hist .fpanel.sl-r { animation: none; } } .btype .bt-ends { position: relative; } /* 눈금 기준값 글자 (정배 85% · 역배 45% / x1.5 · x2.2) — 막대 안쪽 여백(7px) 맞춰 20%·80% 아래 (10/13) */ .btype .bt-ends .bt-tk { position: absolute; top: 0; left: calc(7px + (100% - 14px) * var(--p)); transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--muted-2, #9aa3b5); white-space: nowrap; } /* 카트 › 오늘 구매 (10/14 개편): 한 표 = 한 장의 작은 카드 — 상태·번호 / 경기 수·배당(크게) / 투표금 → 적중금 / 동작 */ #cpRc { padding: 10px 10px 0; } #cpRc .rcrow { display: block; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; } #cpRc .rcrow:hover, #cpRc .rcrow:active { background: #fff; border-color: var(--navy); box-shadow: 0 2px 8px rgba(31, 58, 110, .08); } #cpRc .rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #cpRc .rc-id { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } #cpRc .rc-main { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; } #cpRc .rc-main b { font-size: 17px; font-weight: 800; color: var(--text); } #cpRc .rc-main .rc-odds { color: var(--navy); font-variant-numeric: tabular-nums; } #cpRc .rc-amt { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; } #cpRc .rc-amt i { font-style: normal; color: var(--muted); } #cpRc .rc-amt b { font-size: 15px; color: var(--navy); } #cpRc .rc-amt b.win { color: var(--green); } #cpRc .rc-amt b.loss { color: var(--muted); text-decoration: line-through; } #cpRc .rc-amt small { margin-left: auto; font-size: 12px; color: var(--muted); } #cpRc .rc-act { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); } #cpRc .rc-act a { font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; padding: 6px 0; } #cpRc .rcrow .rgo { height: 32px; padding: 0 14px; font-size: 13px; } #cpRc .setslink { padding: 6px 0 14px; font-weight: 600; } /* 접기·펼치기 원 버튼 (10/14 제보: ▲ 글자가 원 안에서 위로 치우쳐 어색) — 글자는 숨기고 가운데 맞춘 꺾쇠를 그린다. 상태는 .game.closed / #tglAll.dn */ .game .tg, #tglAll.btn.icon { display: inline-flex; align-items: center; justify-content: center; font-size: 0 !important; line-height: 0; } .game .tg::before, #tglAll.btn.icon::before { content: ""; width: 6px; height: 6px; border-left: 1.7px solid currentColor; border-top: 1.7px solid currentColor; transform: translateY(1.5px) rotate(45deg); transition: transform .15s; } .game.closed .tg::before, #tglAll.btn.icon.dn::before { transform: translateY(-1.5px) rotate(225deg); } @media (max-width: 700px) { .game .tg { display: none; } } /* 예측 패널 조합 카드 (10/14 개편, dashboard/_panel.html): 다리 = 두 줄 카드 · 근거는 % 말풍선 · 합계는 한 덩어리 */ .ticket .leg.pl { position: relative; display: block; margin: 0 12px 8px; padding: 9px 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; } .ticket .leg.pl:first-child { margin-top: 12px; } .ticket .leg.pl.win { border-color: #b9e2c8; background: #fbfefc; } .ticket .leg.pl.loss { background: #fcfcfd; } .ticket .leg.pl.loss .psel { color: var(--muted); background: #eef0f3; text-decoration: line-through; } .ticket .leg.pl .pl1 { display: flex; align-items: center; gap: 6px; min-height: 18px; } .ticket .leg.pl .pmk { padding: 0 6px; border-radius: 5px; background: #eef1f6; color: var(--text-2); font-size: 11.5px; font-weight: 700; line-height: 18px; } .ticket .leg.pl .pres { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; } .ticket .leg.pl .pres::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ticket .leg.pl .pres.win { color: var(--green); } .ticket .leg.pl .pres.loss { color: var(--red-strong, #c62828); } .ticket .leg.pl .pres.push { color: var(--muted); } .ticket .leg.pl .psel { justify-self: center; min-width: 32px; padding: 2px 6px; border-radius: 7px; background: var(--blue-light); color: var(--blue); font-size: 15px; font-weight: 800; text-align: center; white-space: nowrap; } .ticket .leg.pl .ppc { justify-self: end; font-size: 12.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; outline: none; } .ticket .leg.pl .ppc.hw { color: var(--navy); border-bottom: 1px dashed currentColor; cursor: help; } .ticket .leg.pl .ppc.ic { border-bottom: 0; font-size: 14px; color: var(--muted); } .ticket .leg.pl .po { text-align: right; font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .ticket .leg.pl.cxl .po { color: var(--muted); } /* 근거 말풍선: % 에 마우스(PC) · 탭(모바일, focus) */ .ticket .leg.pl .ppop { display: none; position: absolute; z-index: 30; top: calc(100% - 4px); left: 8px; right: 8px; padding: 12px 14px; border-radius: 10px; background: #1f2b40; color: #fff; box-shadow: 0 10px 28px rgba(15, 25, 45, .3); font-size: 13px; font-weight: 500; line-height: 1.45; text-align: left; cursor: default; white-space: normal; } .ticket .leg.pl .ppc:hover .ppop, .ticket .leg.pl .ppc:focus .ppop, .ticket .leg.pl .ppc:focus-within .ppop { display: block; } .ticket .leg.pl .ppop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* % 에서 말풍선으로 마우스를 옮겨도 안 닫히게 */ .ppop .pp-h { display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 700; color: #9fb3d6; } .ppop .pp-sc { display: block; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .ppop .pp-sc small { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: #c8d3e6; } .ppop .pp-b { display: block; margin-top: 2px; color: #dfe6f2; } .ppop .pp-bar { display: flex; height: 6px; margin: 10px 0 5px; border-radius: 3px; overflow: hidden; background: #3a4760; } .ppop .pp-bar i { background: #5b9bff; } .ppop .pp-r { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; font-size: 12.5px; color: #c8d3e6; } .ppop .pp-r b { color: #fff; font-variant-numeric: tabular-nums; } .ppop .pp-r.fin b { color: #8fd0ff; } /* 합계 */ .ticket .psum { margin: 4px 12px 0; padding: 13px 14px; border-radius: 12px; background: #f4f6f9; } .ticket .psum .ps-big { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .ticket .psum .ps-big span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); } .ticket .psum .ps-big b { font-size: 23px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1.2; } .ticket .psum .ps-big .r { text-align: right; } .ticket .psum .ps-big .r b { color: var(--text); } .ticket .psum .ps-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #e1e6ee; font-size: 12.5px; color: var(--text-2); } .ticket .psum .ps-meta b { color: var(--text); font-variant-numeric: tabular-nums; } .ticket .psum .ps-res { display: flex; justify-content: space-between; margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 800; } .ticket .psum .ps-res.win { background: #e3f4ea; color: var(--green); } .ticket .psum .ps-res.loss { background: var(--red-bg); color: var(--red-strong, #c62828); } .ticket .psum .ps-res.push { background: #eef0f3; color: var(--muted); } .ticket .psum .ps-res.pending { background: var(--blue-light); color: var(--navy); } .ticket .psum .ps-res b { font-variant-numeric: tabular-nums; } .side .ticket .addcart:not(.rcbtn) { margin: 12px 12px 6px; width: calc(100% - 24px); padding: 12px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font-size: 14.5px; } .side .ticket .addcart:not(.rcbtn):hover { background: var(--navy-dark); } /* 조합 고르기 알약 (PC) — 위: 출처(SCOUT·전략·AI·최고배당·내 예측) / 아래: 그 출처의 조합. 모바일은 기존 칩 + 고르기 창 */ .recpills { display: none; } @media (min-width: 861px) { .side .recbar:has(.recpills:not([hidden])) { display: block; padding: 10px 12px 8px; background: #fff; } .side .recbar:has(.recpills:not([hidden])) .recchip { display: none; } .recpills:not([hidden]) { display: block; } .recpills .rp1 { display: flex; flex-wrap: wrap; gap: 6px; } .recpills .rp1 a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: #f0f3f7; color: var(--text-2); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; } .recpills .rp1 a small { font-size: 11.5px; font-weight: 700; color: var(--muted); } .recpills .rp1 a:hover { background: #e6ebf2; } .recpills .rp1 a.on { background: var(--navy); color: #fff; } .recpills .rp1 a.on small { color: #c9d6ee; } .recpills .rp2 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .recpills .rp2 a { flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 56px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .recpills .rp2 a:hover { border-color: var(--line-strong); } .recpills .rp2 a.on { border-color: var(--navy); color: var(--navy); background: var(--blue-light); } .recpills .rp2 .sdot { width: 7px; height: 7px; border-width: 0; } .recpills .rp2 a.st-win .sdot { background: var(--green); } .recpills .rp2 a.st-loss .sdot { background: var(--red); } .recpills .rp2 a.st-push .sdot { background: #9aa3b2; } } .ticket .psum:last-child { margin-bottom: 12px; } .ticket .leg.pl .pno { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .ticket .leg.pl.prov .pres { opacity: .7; } /* 다리 아래 줄 = 고정 칸 격자 — 카드끼리 홈·기준선·:·원정·예상·확률·배당이 세로로 맞는다 (10/14) */ .ticket .leg.pl .pl2 { display: grid; grid-template-columns: minmax(40px, 1fr) 34px 12px minmax(40px, 1fr) 40px 40px 44px; align-items: center; column-gap: 3px; margin-top: 5px; } .ticket .leg.pl .pl2 .th, .ticket .leg.pl .pl2 .ta, .ticket .leg.pl .pl2 .tg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--text); } .ticket .leg.pl .pl2 .tg { grid-column: 1 / 5; } .ticket .leg.pl .pl2 .ln { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .ticket .leg.pl .pl2 .cl { font-style: normal; text-align: center; color: #9aa3b5; } .ticket .leg.pl .pl2 .psel { grid-column: 5; }