/* gameLab.jsp 합성페이지(lab.jsp + rank.jsp)가 공유하는 스타일 */
.lab-text {
	color: #fff;
	padding: 0.5em;
	font-size: 0.75em;
	font-weight: bold;
}

/* 이긴 쪽 점수 강조. lab.jsp/gameResult.jsp/gameLive.jsp가 공용으로 씀(전에는 각 파일에 중복 정의됨) */
.ttb-score-w { color: red !important; }

/* 게임상세(종료결과/라이브) 화면 공통 탭바 - 결과(또는 라이브)/분석이력 전환용.
   gameResult.jsp에서 gameLive.jsp로도 재사용하게 되면서 공용 스타일로 옮김 */
.result-tab-bar { width: 100%; max-width: 1116px; margin: 0 auto; display: flex; background-color: #fff; border-bottom: 1px solid #ddd; }
.result-tab-btn { flex: 1 1 0; text-align: center; padding: 11px 0; font-size: 0.8em; font-weight: 600; color: #999; cursor: pointer; }
.result-tab-btn-active { color: var(--main-color); border-bottom: 2px solid var(--main-color); }

/* 팀/선발 최근5경기 섹션 안의 "전체"/"맞대결" 토글(2026-07-13) - result-tab-btn과 달리 섹션 하나
   안에서만 쓰는 작은 버튼쌍이라 폭이 좁고(flex:1 아님) 별도 클래스로 둔다 */
.lab-toggle-bar { display: flex; gap: 8px; margin: 8px 0 12px; }
/* 모바일에서 "팀 최근5경기" details가 끝나자마자 선발투수 사진(#c-item-pit)이 바로 붙어보이는 문제
   (2026-07-13, 사용자 피드백) - PC(>=1132px)에서는 .lab-compare-grid의 row-gap이 이미 간격을 만들어주고
   애초에 grid-area상 tc/pc가 같은 줄이라 이 마진이 있으면 오히려 어긋나므로, 아래 미디어쿼리에서 0으로 되돌린다 */
.lab-grid-pc { margin-top: 16px; }
.lab-toggle-btn {
	flex: 1 1 0; text-align: center; padding: 8px 0; font-size: 0.78em; font-weight: 700;
	/* 2026-07-30(사용자 요청): 사이트 전체 "탭 비활성화" 텍스트색을 rgb(153,153,153)로 통일 */
	border: 1px solid #ccc; border-radius: 4px; color: rgb(153,153,153); background-color: #fff; cursor: pointer;
}
/* 최근5경기 합계행(.ctbl tfoot 아래 참고)과 같은 노란톤으로 통일(2026-07-13, 사용자가 그 색을 마음에 들어함) -
   steelblue(팀순위 퍼시픽리그 색)로 바꿔봤다가 안 어울린다는 피드백으로 원복 */
.lab-toggle-btn-active { color: #7a5900; background-color: #fff6d6; border-color: #e8c96a; }

.table-lab {
	width: 100%;
	text-align: left;
	border-spacing: 0;
	border: 1px solid #ccc;
	border-collapse: collapse;
	box-sizing: border-box;
	empty-cells: show;
}
.table-lab thead th {
	text-align: center;
	position: relative;
	border: 1px solid #ccc;
	font-size: 0.75em;
	font-family: "Pretendard", "Malgun Gothic", "나눔고딕", "Arial";
	opacity: 1;
	color: black;
	font-weight: bold;
	padding: 0.5em 0 0.5em 0;
	height: 20px;
}
.table-lab tbody tr {
	height: 20px;
	white-space: nowrap;
}
.table-lab tbody td {
	text-align: center;
	position: relative;
	border: 1px solid #ccc;
	color: black;
	white-space: nowrap;
	vertical-align: middle;
	padding: 0.5em 0 0.5em 0;
	font-size: 0.75em;
	opacity: 1;
	font-weight: bold;
}
/* 라인업 표(table-lab-lineup)도 틀고정 칸을 쓰는데, 위 .table-lab thead th/tbody td의
   position:relative가 명시도가 더 높아서 .ctbl-frozen의 sticky를 덮어씀 - 여기서 다시 이김 */
.table-lab thead th.ctbl-frozen, .table-lab tbody td.ctbl-frozen, .table-lab tfoot td.ctbl-frozen {
	position: sticky;
}

/* tui-grid가 applyTheme()으로 런타임에 <style>을 주입해 .tui-grid-cell{background:#fff}를
   나중에 덧씌우기 때문에, 동일 우선순위로는 항상 묻혀버린다. !important로 명시적으로 이긴다. */
.bcolor-default { background-color: #f7f7f7 !important; font-weight: 600; }
.bcolor-away { background-color: var(--away-color) !important; }
.bcolor-home { background-color: var(--home-color) !important; }
/* 2026-08-01(사용자 요청): 예전엔 이 표(.ctbl, 선발투수상세데이터)만 --home-color/--away-color보다
   진하게 보정하려고 별도 하드코딩 색을 썼는데(그러다보니 -b 변수를 바꿔도 안 따라와서 버그가 남),
   이제 --home-color/--away-color 자체가 -b에서 opacity(0.3)로 뽑혀나오는 값이라 여기서 별도로 덮어쓸
   필요가 없어짐 - 그냥 같은 변수를 그대로 씀(bcolor-home/away의 기본 규칙과 동일해져 이 규칙 자체는
   사실상 불필요하지만, 이 표 안에서만 색을 다르게 조정하고 싶어질 수 있어 자리는 남겨둠) */
.ctbl td.bcolor-away { background-color: var(--away-color) !important; }
.ctbl td.bcolor-home { background-color: var(--home-color) !important; }

.lab-home-bg-color { background-color: #fef0ee !important; }
.lab-away-bg-color { background-color: #e7f7f4 !important; }
/* 2026-08-03: 팀구장(파크팩터) 표에서 이벤트/중립 구장 경기(예: 오릭스가 도쿄돔에서 여는 특별경기)의
   실제 개최구장 행 하이라이트용 - 어느 팀 소유도 아니라서 home(분홍)/away(청록) 대신 별도 노란색으로
   구분(stadium.jsp stadiumRowClass 참고) */
.lab-event-bg-color { background-color: #fff6d9 !important; }
/* 2026-08-01(사용자 지적): 선발/팀 최근5경기·맞대결5경기 표의 "이긴 경기" 하이라이트가 홈이면
   lab-home-bg-color(분홍), 원정이면 lab-away-bg-color(청록)로 갈라져 있었는데("고유팀컬러") 굳이
   나눌 이유가 없다는 지적 - 같은 클래스를 stadium.jsp/rank.jsp가 승패와 무관한 홈/원정 행 구분용으로도
   재사용 중이라(그쪽은 그대로 둬야 함) 새 전용 클래스로 분리. 홈/원정 무관 동일 초록(resultCellHtml의
   "승" 글자색 #2a9d5c와 같은 계열)에 opacity 0.1.
   2026-08-02(사용자 요청): 행 전체가 아니라 "결과" 칸에만 씌우는 걸로 바뀌었다(resultBgClass, lab.jsp).
   패 쪽도 같은 자리에 대칭으로 필요해져서 lab-loss-bg-color를 추가 - resultCellHtml의 "패" 글자색
   #e0332f와 같은 계열, 승과 동일한 opacity로 톤을 맞춘다 */
.lab-win-bg-color { background-color: rgba(42,157,92,0.1) !important; }
.lab-loss-bg-color { background-color: rgba(224,51,47,0.1) !important; }

/* 팀 비교 막대그래프 */
.home-equals-bar { width: 100%; float: left; }
.home-graph-bar { height: 20px; float: left; background-color: var(--home-color-b); }
.home-graph-per { width: 25%; float: left; }
.away-equals-bar { width: 100%; float: right; }
.away-graph-bar { height: 20px; float: right; background-color: var(--away-color-b); }
.away-graph-per { width: 25%; float: right; }
.graph-bar-op { opacity: 0.2; }

/* 선발투수 비교 막대그래프 */
.sp_home-equals-bar { width: 100%; float: left; }
.sp_home-graph-bar { height: 100%; float: left; background-color: var(--home-color-b); }
.sp_home-graph-per { width: 18%; float: left; }
.sp_away-equals-bar { width: 100%; float: right; }
.sp_away-graph-bar { height: 100%; float: right; background-color: var(--away-color-b); }
.sp_away-graph-per { width: 18%; float: right; }
.sp_graph-bar-op { opacity: 0.2; }

.graph-zoom { background-color: gray; }

/* 섹션 타이틀 바 (예전엔 display:table/table-cell 인라인 스타일로 매번 반복 작성됨) */
.mlb-check-title {
	width: 100%;
	height: 29px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
/* 2026-08-02: 옅은 배경+팀색 글씨로 바꿔봤다가("헤더가 -b라 눈아프다") 최근5경기/라인업 쪽에서
   다시 원래대로(-b 배경 + 흰 글씨, .lab-text 기본값 그대로)가 낫다는 재피드백으로 원복.
   border-bottom만 계속 제거된 채로 둔다 - 배경색과 무관하게 바로 아래 표(.ctbl thead th)와 맞닿는
   테두리가 겹쳐 이중선으로 보이는 문제라(.lab-section-hdr와 동일 이유) 이건 그대로 유효함 */
.mlb-check-title-away { border: 1px solid #cccccc; border-bottom: none; background-color: var(--away-color-b); }
.mlb-check-title-home { border: 1px solid #cccccc; border-bottom: none; background-color: var(--home-color-b); }

/* 선발투수 상세데이터(<details id="details">) - 접혔을 때만 다른 타이틀바랑 같은 29px 높이로 보이게.
   height를 열림/닫힘 상관없이 고정으로 박아두면 펼친 뒤 내용(표)이 그 높이를 넘어가는데, 부모는
   <details>가 "선언한" 높이만큼만 자리를 차지한다고 보고 그만큼만 밀어내서 아래 컨텐츠와 겹쳐 보인다 -
   접힌 상태에서만 29px로 좁히고, 펼치면 내용 높이만큼 자연스럽게 늘어나며 아래를 밀어내게 둔다.
   (2026-07-13: 이 섹션 자체는 손대지 않기로 함 - 아래 .lab-collapse-bordered는 팀/선발 최근5경기
   2곳에만 씀) */
#details:not([open]) {
	height: 29px;
}

/* 라인업 섹션 접고펴기 - beaveradm "데이터 검증" 화면의 .valid-section 레이아웃(카드+우측화살표)을
   포팅하되(2026-07-13, 사용자 요청), 테두리색은 beaveradm 고유값(#e5e5e5) 대신 이 페이지의 불펜비교
   등과 같은 #ccc로 맞췄다(같은 색이었으면 좋겠다는 후속 피드백). .lab-detail-section의 ▶::before
   화살표 규칙과 안 겹치게 별도 클래스로 두고(그쪽 클래스는 안 씀), 화살표는 오른쪽 끝에 직접 그린
   <span class="arrow">로 대체. margin-top은 바로 위 불펜비교와 너무 붙어보인다는 피드백으로 추가 */
.lab-card-section { background: #fff; border: 1px solid #ccc; border-radius: 6px; margin-top: 16px; margin-bottom: 14px; }
.lab-card-section > summary {
	cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 0.9em; list-style: none;
	display: flex; align-items: center; justify-content: space-between;
	background-color: #EDEDED; /* 다른 섹션 헤더들(팀비교 등)과 톤 맞춤(2026-07-13) - 이걸로 마무리 */
}
.lab-card-section > summary::-webkit-details-marker { display: none; }
.lab-card-section > summary .right-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lab-card-section > summary .arrow { color: #999; font-size: 0.8em; transition: transform 0.15s; }
.lab-card-section[open] > summary .arrow { transform: rotate(90deg); }
.lab-card-section .section-body { padding: 0 16px 16px; }
/* 라인업 카드(#lineupCardSection)만 body 패딩을 0으로 - 이 클래스는 지금 라인업에서만 쓰이지만
   ID로 좁혀서 다른 곳에서 .lab-card-section을 재사용해도 영향 없게 함(2026-07-15) */
#lineupCardSection .section-body { padding: 0; }

/* 선발투수상세데이터/팀 최근5경기/선발 최근5경기 - 3곳 다 .lab-text 기반 헤더바인데, 팀비교/선발투수
   비교/불펜비교(.table-lab thead th, 테두리 있음)와 높이를 29px로 맞춘다(2026-07-13, 사용자 피드백).
   처음엔 하단보더도 같이 줬었는데, 바로 아래 오는 내용(표 thead 등)이 이미 자기 테두리를 갖고 있어서
   1px 두 개가 나란히 붙어 두꺼운/겹쳐보이는 줄로 보인다는 후속 피드백을 받아 제거함 - 헤더는 배경색
   차이(#EDEDED vs 흰색)만으로 구분되고, 실제 선은 아래 내용 쪽 테두리 하나만 남는다 */
.lab-section-hdr {
	height: 29px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

/* 팀 최근5경기/선발 최근5경기 - 팀비교/불펜비교와 같은 느낌의 "항상 펼쳐진" 테두리 박스(2026-07-13).
   헤더(.lab-text)는 박스 테두리에 딱 붙어야(패딩 없이) 팀비교 표 헤더와 같은 느낌이 나서, 테두리
   자체엔 패딩을 안 주고 헤더 아래 실제 컨텐츠(.lab-collapse-body)에만 패딩을 준다 */
.lab-collapse-bordered {
	border: 1px solid #ccc;
	box-sizing: border-box;
}
.lab-collapse-body {
	padding: 10px;
	box-sizing: border-box;
}

/* 접고 펼 수 있는 타이틀바(.lab-detail-section > summary)들 - mlb-check-title/lab-text 스타일 때문에
   display:flex/block이 되면서 <summary>의 기본 삼각형 마커(::marker)가 안 보이길래, 직접 그려서
   펼칠 수 있는 요소라는 게 눈에 띄게 함. [open] 여부에 따라 방향만 90도 돌림 */
.lab-detail-section > summary {
	list-style: none;
}
.lab-detail-section > summary::-webkit-details-marker {
	display: none;
}
.lab-detail-section > summary::before {
	content: "▶";
	display: inline-block;
	margin-right: 6px;
	font-size: 0.7em;
	color: #666;
	transition: transform 0.15s ease;
}
.lab-detail-section[open] > summary::before {
	transform: rotate(90deg);
}

/* 선발투수 승/패 배지 */
/* 2026-08-01(사용자 지적): display:flex는 자기 자신은 여전히 block 레벨이라(부모가 flex/grid가
   아닌 한) 부모 폭 100%로 늘어남 - 그래서 한때 글씨 영역만큼만 차지하게 inline-flex로 바꿨었는데,
   2026-08-02(사용자 재요청): 다시 폭 100%로 - inline-flex는 유지하고 width만 명시로 채운다
   (display:flex로 되돌리는 것과 결과는 같지만, 굳이 inline이 필요해질 다른 자리에서 재사용하기
   쉽게 이 형태로 둠) */
/* 2026-08-02(사용자 지적): width:100% + margin-left:5px를 같이 쓰면 박스(콘텐츠 100%+마진 5px)가
   부모 폭을 5px 넘어서고, 그 초과분이 부모 쪽에서 잘리면서 하필 오른쪽 끝(둥근 모서리 부분)이 잘려
   보이던 문제 - width를 calc(N% - 5px)로 줄여서 마진까지 포함한 전체 박스가 정확히 N% 안에
   들어오게 한다(둥근 모서리는 살리고 폭은 여전히 꽉 차 보이게).
   2026-08-02(사용자 재요청): 100%는 너무 꽉 차 보인다는 지적으로 50%로 축소 */
.lab-pit-wl-badge {
	margin-left: 5px;
	width: calc(50% - 5px);
	height: 18px;
	display: inline-flex;
	align-items: center;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	padding: 2px;
	box-sizing: border-box;
}
/* 2026-08-02: 옅은 배경으로 바꿔봤다가("눈아프다") 다시 원래대로(-b 진한 배경 + 흰 글씨, lab.jsp
   인라인 style도 함께 원복) 되돌림 */
.lab-pit-wl-badge-away { background-color: var(--away-color-b); }
.lab-pit-wl-badge-home { background-color: var(--home-color-b); }

/* gameLab 상세화면(lab.jsp) 레이아웃 (팀비교/선발비교/맞대결 라인)
   주의: rank.jsp도 .c-item-line/.c-item-line-item 클래스명을 재사용하지만 자체 인라인 스타일로
   완전히 다른 레이아웃을 구성하므로, 여기서는 .lab-detail-line으로 한정해 충돌을 피한다. */
.lab-detail-line {
	width: 100%;
	min-height: 60px;
	overflow: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 15px;
	row-gap: 8px;
}
.lab-detail-line > .mlb-check-title {
	flex: 0 0 100%;
}
/* min-width:0 없으면 안에 table/grid가 있을 때 flex가 그 내용 가로폭 밑으로 못 줄어들어서
   넘침(스크롤)이 생긴다. flex:1 / flex:2 비율로만 너비를 나누고 고정폭은 쓰지 않는다. */
.lab-detail-line .c-item-line-item {
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* 라인업 표: 시즌/최근5경기/vs상대투수/vs좌투 4구간 x 4~6칸이라 폭이 화면보다 넓어짐.
   <col> px폭 + table-layout:fixed로 각 컬럼의 "비율"은 고정해두되, width:100%+min-width로
   넓은 화면에서는 100%까지 늘어나고(글자가 다닥다닥 붙지 않게), 화면이 min-width보다 좁아지면
   그 밑으로는 안 줄어들고 부모의 가로스크롤(overflow-x:auto)로 넘겨보게 한다.
   min-width는 <col> 폭 합(35+110+30+45*18+90 = 1075px - 타순35/선수명110/좌우타30(2026-07-17 추가)/
   일반칸(18개)45/안타차트90) */
/* 2026-07-17: 화면폭이 min-width(1045px)보다 좁아서 가로스크롤바가 실제로 뜨면, 그 스크롤바가 이 wrap의
   높이 안에서 공간을 차지하면서(브라우저 네이티브 스크롤바 - 특히 Windows Chrome/Edge) 합계행(tfoot) 아랫부분과
   겹쳐 가려 보이는 문제(사용자 지적) - 처음엔 padding-bottom:14px로 여백을 넉넉히 확보했는데 스크롤이 없을
   때도 항상 그 여백이 남아 합계행 밑에 불필요한 공백이 커 보인다는 재지적 - .ctbl-wrap과 동일한 얇은
   커스텀 스크롤바(4px)로 통일하면 굳이 큰 여백을 미리 깔아둘 필요가 없어짐(겹칠 공간 자체가 거의 없음) */
.lineup-scroll-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: #ddd transparent;
}
.lineup-scroll-wrap::-webkit-scrollbar {
	height: 4px;
}
.lineup-scroll-wrap::-webkit-scrollbar-thumb {
	background-color: #ddd;
	border-radius: 2px;
}
.lineup-scroll-wrap::-webkit-scrollbar-track {
	background: transparent;
}
.table-lab-lineup {
	table-layout: fixed;
	width: 100%;
	/* 145(틀고정3칸) + 225(시즌5) + 315(최근5경기6, 추이칸만 90) + 225(vs상대투수5) + 225(vs좌우투5)
	   + 675(vs구종15, 2026-07-24 추가) = 1810 */
	min-width: 1810px;
}
/* 컬럼이 39개까지 늘어난 라인업 표는 한 화면에 최대한 많이 보이는 게 컴팩트함 = 이 사이트의 장점이라는
   피드백(2026-07-24)으로 tbody td만 1px로 압축. thead th(그룹명+구종명+통계약어 3단 헤더)는 1px로
   줄여보니 너무 답답해 보인다는 피드백으로 원래 패딩(0.5em) 유지 - 합계행(tfoot)과 동일한 이유 */
.table-lab-lineup tbody td {
	padding: 1px 4px;
	height: auto;
}
.table-lab-lineup tbody tr {
	height: auto;
}
.table-lab-lineup .lineup-player-nm {
	text-align: left;
	padding-left: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.table-lab-lineup .lineup-trend-cell {
	padding: 1px 4px;
}
/* 라인업 합계행 - tbody td 서식(정렬/폰트크기/패딩 등)을 그대로 안 물려받아서(tfoot은 별도 선택자라
   기본 브라우저 스타일로 떨어짐) 행이 붕 떠보였음 - .table-lab tbody td와 동일하게 맞추고
   다른 표 합계행(.ctbl tfoot)과 통일해서 노란색+볼드만 얹는다.
   패딩을 tbody처럼 1px로 줄여봤다가 원복함(2026-07-24) - tbody 각 행은 최근5경기 안타추이(SVG,
   고정 30px 높이)가 있는 행이라 패딩을 줄여도 그 SVG 높이 때문에 어차피 안 줄어드는데, 추이가 없는
   합계행만 홀쭉하게 줄어들어서 오히려 더 안 맞아 보인다는 피드백 - 그래서 합계행은 원래 패딩 유지 */
.table-lab-lineup tfoot td {
	text-align: center;
	border: 1px solid #ccc;
	color: black;
	white-space: nowrap;
	vertical-align: middle;
	padding: 0.5em 0 0.5em 0;
	font-size: 0.75em;
	font-weight: bold;
	background-color: #fff6d6;
}
/* 2026-07-31(사용자 요청): 합계행 원정/홈 비교색(lineup.jsp colorizeLineupFootComparison, lab.jsp의
   .pdetail-better/.pdetail-worse 재사용) - 위 "color: black" 규칙이 클래스+태그 2개짜리라 저 색
   클래스(클래스 1개)보다 우선순위가 높아서 검은색이 이겨버렸음. 태그 개수를 맞춰서 이겨야 함 */
.table-lab-lineup tfoot td.pdetail-better { color: #2a9d5c; }
.table-lab-lineup tfoot td.pdetail-worse { color: #e0332f; }
/* 라인업 표는 칸이 20개 가까이 되는데(.table-lab tbody td 기본이 전부 bold라) 전체가 볼드라 너무
   무거워 보인다는 피드백(2026-07-13) - 스탯 칸들은 일반 굵기로 풀고, 틀고정된 타순/선수명(.ctbl-frozen)
   만 원래대로 볼드 유지(합계행 tfoot은 위 규칙에서 이미 별도로 볼드) */
.table-lab-lineup tbody td {
	font-weight: normal;
}
.table-lab-lineup tbody td.ctbl-frozen {
	font-weight: bold;
}
/* 합계행 타석수만 볼드 제거(2026-07-24, 사용자 요청) - 다른 합계행 칸은 위 규칙대로 볼드 유지,
   타석수는 "표본크기 참고용" 성격이라 다른 값들만큼 강조할 필요가 없다는 판단 */
.table-lab-lineup tfoot td.lineup-pa-cell {
	font-weight: normal;
}
/* 구간(시즌/최근5경기/vs상대투수/vs좌우투/vs구종) 구분이 잘 안 된다는 피드백(2026-07-24) - 각 구간
   첫 칸(lineup.jsp의 colgroup에서 그룹당 딱 하나의 <col>에만 붙여둔 lineup-col-start)에 굵은
   세로선만 얹는다(배경 밴드는 넣어봤다가 사용자가 빼자고 해서 제거, 경계선만 유지). border는 <col>에
   직접 걸어도 브라우저가 그 칼럼의 모든 셀에 적용해준다(폭/visibility와 마찬가지로 표준으로 지원되는
   몇 안 되는 col 속성) */
.table-lab-lineup col.lineup-col-start {
	border-left: 2px solid #bbb;
}

/* ===== 공용 커스텀테이블(ctbl) - TOAST Grid 대체 시험버전.
   데이터 많은 표를 위한 사이트 전용 테이블: 합계행/틀고정/스와이프+마우스드래그스크롤/헤더리사이즈/
   내용기준 자동폭을 순수 HTML table+CSS+JS로 구현. 선발투수 최근5경기표에 먼저 적용해보고
   마음에 들면 다른 TOAST Grid도 이걸로 교체할 예정(ck.customtable.js 참고) */
.ctbl-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	scrollbar-width: thin;
	scrollbar-color: #ddd transparent;
}
.ctbl-wrap.ctbl-dragging {
	cursor: grabbing;
	user-select: none;
}
.ctbl-wrap::-webkit-scrollbar {
	height: 4px;
}
.ctbl-wrap::-webkit-scrollbar-thumb {
	background-color: #ddd;
	border-radius: 2px;
}
.ctbl-wrap::-webkit-scrollbar-track {
	background: transparent;
}
.ctbl {
	table-layout: auto;
	width: 100%;
	border-collapse: collapse;
	white-space: nowrap;
	font-size: 0.75em;
}
/* PC처럼 공간이 남는 화면에서, 이 클래스 붙은 컬럼(보통 "상대팀"처럼 텍스트가 가변적인 컬럼)이
   남는 폭을 다 흡수하게 함. auto-layout 표에서 한 칸만 width:100% 주면 나머지는 내용기준 최소폭,
   이 칸이 나머지 여유공간을 가져가는 식으로 동작함 */
.ctbl-flex {
	width: 100%;
}
.ctbl th, .ctbl td {
	border: 1px solid #ccc;
	padding: 0.5em 8px;
	text-align: center;
	box-sizing: border-box;
}
/* "최근5경기 5칸 채우기"처럼 값이 아예 없는 빈 칸(<td></td>)은 브라우저가 줄박스를 안 만들어서
   글자 있는 칸보다 살짝 낮게 찌그러져 보일 수 있음 - 데이터 있는 행과 높이를 맞춤 */
.ctbl td:empty::after {
	content: "\00a0";
}
.ctbl thead th {
	position: relative;
	background-color: #fafafa;
	font-weight: bold;
	user-select: none;
}
.ctbl tfoot td {
	font-weight: bold;
	background-color: #fff6d6;
}
/* 틀고정(frozen) 컬럼 - .ctbl 표뿐 아니라 다른 표(예: 라인업)에서도 그대로 쓸 수 있게 범용으로 둠.
   좌우로 스크롤해도 이 컬럼은 항상 보임. 여러 개면 ck.customtable.js의 applyFrozenOffsets가
   실제 렌더링폭 기준으로 left값을 계산해서 순서대로 붙여줌. 색은 일반 칸과 동일하게 두고(하이라이트 불필요),
   sticky 스크롤 중 뒷내용이 비치지 않도록 불투명 배경만 유지한다 */
.ctbl-frozen {
	position: sticky;
	left: 0;
	background-color: #fff;
	z-index: 1;
	/* 라인업처럼 행이 많은 표에서, 좌우로 스크롤했다가 원래 위치로 돌아오면 ::before로 그린 틀고정
	   경계선이 리페인트가 안 돼서 사라져 보이는 문제(2026-07-13, 사용자 제보) - 알려진 크로미움
	   sticky 렌더링 버그로, 이 셀을 별도 컴포지팅 레이어로 승격시키면 스크롤마다 확실히 다시 그려짐 */
	will-change: left;
	transform: translateZ(0);
}
/* thead th에 걸린 position:relative(리사이저용)보다 명시도가 높아야 sticky가 이김 */
.ctbl thead th.ctbl-frozen {
	position: sticky;
	z-index: 2;
}
/* 틀고정 칸끼리(예: 타순|선수명) 또는 틀고정과 일반 칸 사이의 경계선을 border-collapse의 "공유 테두리"
   계산에 맡기면 안 된다 - position:sticky인 셀은 별도 컴포지팅 레이어로 떠서, 그 셀과 이웃 셀 중
   "누가 이 경계선을 그릴지" border-collapse 계산 결과가 스크롤/토글 중에 간헐적으로 깨져서 선이
   보였다 안 보였다 한다(알려진 브라우저 렌더링 버그, Order|Player처럼 sticky끼리 붙은 경우 특히 심함).
   그래서 border 속성 자체를 안 쓰고, 매 틀고정 칸마다 자기 오른쪽 끝에 ::before로 실제 배경색 선을 하나
   그린다 - 이건 border-collapse 계산과 완전히 무관하게 그 칸 자신의 페인트에 포함되므로 항상 그려진다.
   (Season 체크해제 등으로 옆에 오는 칸이 바뀌어도 이 선은 "그 칸 자신"의 오른쪽 끝에 그려지는 것이라
   영향을 안 받는다. position은 이미 sticky라 별도 relative가 필요 없음 - sticky도 absolute 자식의
   위치기준이 되는 positioned element라서 ::before/::after가 정상적으로 이 칸 기준으로 붙는다) */
.ctbl-frozen::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background-color: #ccc;
	pointer-events: none;
}
/* 틀고정 마지막 칸(스크롤 가능 영역과 만나는 진짜 경계)만 더 굵고 진하게 + 그림자 추가로 확실히 구분 */
.ctbl-frozen:not(:has(+ .ctbl-frozen))::before {
	width: 2px;
	background-color: rgba(15, 23, 42, 0.4);
}
.ctbl-frozen:not(:has(+ .ctbl-frozen))::after {
	content: "";
	position: absolute;
	top: 0;
	right: -6px;
	bottom: 0;
	width: 6px;
	background: linear-gradient(to right, rgba(15, 23, 42, 0.18), transparent);
	pointer-events: none;
}
tfoot .ctbl-frozen {
	background-color: #fff6d6;
}
/* 헤더 우측 끝 드래그핸들(컬럼 리사이즈용) */
.ctbl-resizer {
	position: absolute;
	top: 0;
	right: -3px;
	width: 6px;
	height: 100%;
	cursor: col-resize;
	user-select: none;
	touch-action: none;
	z-index: 3;
}
.ctbl-resizer:hover, .ctbl-resizer.ctbl-resizing {
	background-color: #418ed4;
	opacity: 0.5;
}

/* PC모드에서 좌측(센트럴+퍼시픽 세로배치)/우측(전체순위)가 display:inline-block이라 기본 정렬기준이
   baseline이라서 위쪽 시작지점이 서로 어긋나 보였음 - top 기준으로 맞춤 */
.rank-row .rank-col {
	vertical-align: top;
}
/* 팀순위 화면: 좁은 화면에선 센트럴리그→퍼시픽리그→전체리그 순으로 위아래로 쌓이게(DOM 순서 그대로) */
@media screen and (max-width: 724px) {
	.rank-row .rank-col {
		width: 100% !important;
	}
}

@media screen and (min-width: 1132px) {
	.lab-detail-line .c-item-line-item {
		flex: 1 1 0;
	}
	#c-item-pit,
	#c-item-pitLast5,
	#c-item-vsPitLast5 {
		flex: 2 1 0;
	}
	/* 라인업 표는 이미 가로스크롤이 필요한 넓은 표라, PC에서도 좌우로 나란히 두면 오히려 더 좁아져서
	   스크롤만 늘어난다. 화면 크기 상관없이 항상 위/아래로 쌓이게 이 화면만 예외처리 */
	#lineup-team-row.lab-detail-line .c-item-line-item {
		flex: 1 1 100%;
	}
	/* 팀비교/선발비교/팀최근5경기/선발최근5경기 2x2 배치(2026-07-13, 사용자 피드백 - PC에서는
	   비교표 2개가 나란히 보이던 기존 레이아웃을 유지하고 싶다는 요청). 모바일(이 미디어쿼리 밖)은
	   .lab-compare-grid에 grid를 안 걸어서 그냥 일반 블록으로 소스 순서(팀비교→팀최근5경기→선발비교→
	   선발최근5경기) 그대로 세로 스택된다 - grid-template-areas로 PC에서만 시각적 순서를 재배치.
	   한때 pc(선발비교~선발투수상세데이터)와 pl(선발최근5경기)을 한 칸으로 합쳐 딱 붙여봤지만, 그러면
	   선발상세데이터를 접고펼 때마다 선발최근5경기가 위아래로 움직여서 팀최근5경기와 시작줄이 안 맞는
	   문제가 있었다(2026-07-13, 재조정) - tl/pl 둘 다 그냥 2행에 두어 "동일 시작점 유지"를 우선하고,
	   선발상세데이터~선발최근5경기 사이 간격은 다시 생기는 채로 둔다(사용자가 이 트레이드오프를 선택) */
	.lab-compare-grid {
		display: grid;
		/* 선발투수쪽은 데이터가 더 많아서(방어율/최근구속추이/상세표 등) 기존에도 #c-item-pit이
		   flex:2 1 0(팀비교 flex:1의 2배 폭)였다 - grid로 바꾸면서도 그 비율(1:2) 그대로 유지 */
		grid-template-columns: 1fr 2fr;
		grid-template-areas: "tc pc" "tl pl";
		column-gap: 15px;
		/* 2행(팀최근5경기/선발최근5경기)을 위쪽 내용에 거의 붙여달라는 피드백(2026-07-13, 8px에서
		   더 줄임) - 0으로 두고, 위아래 테두리가 겹쳐 두꺼워 보이지 않도록 아래 .lab-grid-tl/.lab-grid-pl에
		   -1px 마진으로 위쪽 테두리 한 줄만 남긴다 */
		row-gap: 0;
	}
	.lab-compare-grid > .lab-grid-tc { grid-area: tc; }
	.lab-compare-grid > .lab-grid-pc { grid-area: pc; margin-top: 0; } /* 모바일 전용 여백 취소 - tc와 같은 줄이라 붙어야 정렬됨 */
	/* row-gap:0이라 위 테두리(팀비교 표/선발상세데이터 표의 아래쪽 1px)와 이 칸 자체 테두리(위쪽 1px)가
	   바로 붙는데, 1px+1px이 살짝 뜬 두 줄로 보여서(실측: 사이에 1px 흰 줄) -1px로 겹쳐 한 줄로 합친다 */
	.lab-compare-grid > .lab-grid-tl { grid-area: tl; margin-top: -1px; }
	.lab-compare-grid > .lab-grid-pl { grid-area: pl; margin-top: -1px; }
}