/* ==========================================================================
   공통 테이블 (Common Table System)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 공통 테이블 베이스 (모든 테이블 기본 적용)
   -------------------------------------------------------------------------- */
.tbl-base {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: center;
    background-color: #ffffff;
    letter-spacing: -0.3px;
}

.tbl-base th {
    background-color: #f8fafc;
    color: #1e293b;
	font-size: 1rem;
    font-weight: 700;
    padding: 12px 8px;
    border-top: 2px solid #0f172a;
    border-bottom: 1px solid #cbd5e1;
    white-space: nowrap;
}

.tbl-base td {
    padding: 10px 3px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: middle;
}

.tbl-base tbody tr:hover {
    background-color: #f1f5f9; /* 마우스 오버 효과 */
}

tr.row-gray td {
    background-color: #f2f2f2 !important;
}

/* --------------------------------------------------------------------------
   [TYPE 1] 열 고정 + 가로 스크롤 테이블 (기록, 경기결과 등 다열 데이터)
   -------------------------------------------------------------------------- */
/* 스크롤 감싸는 래퍼 */
.tbl-scroll-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    margin-bottom: 25px;
}

.tbl-type-scroll {
    white-space: nowrap; /* 열이 자동으로 줄바꿈되지 않도록 설정 */
    border-top: none;
}

/* 1번째 열 좌측 고정 (선수명, 팀명 등) */
.tbl-type-scroll .sticky-col-1 {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #ffffff;
    /* border-right: 2px solid #cbd5e1;  고정 열 경계선 */
}

/* 2번째 열까지 좌측 고정 필요한 경우 */
.tbl-type-scroll .sticky-col-2 {
    position: sticky;
    left: 48px; /* 1번째 열 너비만큼 지정, 너무 넒으면 1,2열이 뜬다. */
    z-index: 2;
    background-color: #ffffff;
   /* border-right: 2px solid #cbd5e1; 고정 열 경계선 */
}

/* 고정열 2번째 (이름 열 위치 잡기) */
.tbl-type-scroll .sticky-col-2 {
    /* left: 50px;  1번째 열(순위) 너비에 맞게 설정 */
}


/* 헤더(th) 열 고정 시 z-index 조율 및 배경색 지정 */
.tbl-type-scroll th.sticky-col-1,
.tbl-type-scroll th.sticky-col-2 {
    z-index: 3;
    background-color: #f8fafc;
}

/* 마우스 오버 시 고정열 배경색 변경 */
.tbl-type-scroll tbody tr:hover .sticky-col-1,
.tbl-type-scroll tbody tr:hover .sticky-col-2 {
    background-color: #f1f5f9;
}

/* --------------------------------------------------------------------------
   [TYPE 2] 유동형 기본 테이블 (시상내역, 연간일정, 공지사항 등)
   -------------------------------------------------------------------------- */
.tbl-type-simple {
    width: 100%;
    border-top: 2px solid #0f172a;
    border-bottom: 1px solid #e2e8f0;
    table-layout: fixed; /* 컬럼 너비 균등 및 줄바꿈 제어 */
    word-break: keep-all;
    /* margin-bottom: 25px; */
}

/* 모바일 모드 조율 */
@media (max-width: 768px) {
    .tbl-base th,
    .tbl-base td {
        padding: 10px 6px;
        font-size: 0.825rem;
    }

	/* 2번째 열까지 좌측 고정 필요한 경우 */
	.tbl-type-scroll .sticky-col-2 {

		left: 36px; /* 1번째 열 너비만큼 지정, 너무 넒으면 1,2열이 뜬다. */

	}
    .tbl-type-simple {
        table-layout: auto; /* 모바일에서는 자동 너비 조절 */
    }
}





/* ==========================================================================
   대회 기록 전용 스타일 (서브 탭 & 타이틀 & 링크)
   ========================================================================== */

/* 1. 서브 내비게이션 탭 바 */
.record-tab-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
}

.btn-rec-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #64748b;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-rec-tab:hover {
    color: #0f172a;
    background-color: #f1f5f9;
}

/* active (현재 선택된 서브 탭) */
.btn-rec-tab.active {
    color: #ffffff;
    background-color: #0f172a;
    border-color: #0f172a;
}

/* 2. 소타이틀 (작은 버전) */
.comp-section-title.sm {
    margin-bottom: 12px;
}

.comp-section-title.sm h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comp-section-title.sm h4 i {
    color: #004ea2;
}

/* 3. 테이블 내 정렬 링크 (th a) 및 선수명 링크 스타일 */
.tbl-base th a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

.tbl-base th a:hover {
    text-decoration: underline;
    color: #004ea2;
}

.player-link {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}

.player-link:hover {
    color: #004ea2;
    text-decoration: underline;
}

/* 주요 데이터 강조 */
.txt-bold {
    font-weight: 700;
}

.txt-highlight {
    font-weight: 500;
    color: #004ea2 !important;
}
td.txt-left, th.txt-left { padding:5px 20px; text-align:left; }



/* 모바일 반응형 조율 */
@media (max-width: 576px) {
    .record-tab-bar {
        width: 100%;
    }

    .btn-rec-tab {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.825rem;
    }
}