@charset "utf-8";
/* ==========================================================================
   K리그 트립데이 (PC)
   Figma : K리그_APP-WEB / node 4007-7769
   - 기존 style.css 를 덮어쓰지 않도록 .tripday 하위로만 스코프를 제한한다.
   - 디자인 실측값(px) 기준.

   [디자인 토큰]
   kleague-light-blue : #0061AF   (탭 활성 / 신청하기 버튼)
   gray/900           : #121212   (본문 기본 텍스트)
   gray/300           : #737373   (보조 텍스트 / VS)
   gray/50            : #70737C   (테이블 헤더)
   gray/40            : #878A93   (테이블 상단 라인)
   table header bg    : #F4F4F5
   ========================================================================== */

.tripday-wrap {
    background: #f2f3f6;
}

/* --------------------------------------------------------------------------
   레이아웃 (Figma 절대좌표 그대로)
     배너 이미지  x360 y246   1200 x 1600  (→ y1846 에서 끝)
     초록 배경판  x360 y1472  1200 x 1689  (배너와 374px 겹침, 그라데이션)
     탭          x410 y1042  1100 x 42
     팀 필터      x410 y1106  1100 x 86
     카드 1       x410 y1222  1100
   → 배너를 배경으로 깔고, 탭부터가 그 위에 겹쳐 올라간다.
     기준점을 배너 상단(y246)으로 잡으면
       탭   : 1042 - 246 = 796
       카드 : 1222 - 246 = 976
       초록판: 1472 - 246 = 1226
   -------------------------------------------------------------------------- */

.tripday {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    /* Figma 프레임 좌표는 헤더(146px)를 포함하므로 배너 y246 = 헤더 아래 100px.
       그런데 부모 .sub-contents-wrap 이 이미 padding-top 50px 을 갖고 있어
       여기서는 나머지 50px 만 준다. (50 + 50 = 100) */
    padding-top: 50px;
    /* 배너 이미지(고정 1600px)가 본문보다 길어질 때 아래로 삐져나오지 않도록 잘라낸다.
       프로그램 건수가 적으면 본문이 배너보다 짧아지는데, 그때 잔디가 노출되는 것을 막는다. */
    overflow: hidden;
    font-family: 'Noto Sans KR', 'Pretendard', 'Malgun Gothic', sans-serif;
}

/* 배너 이미지 : 1200 x 1600, 문서 흐름에서 빼고 배경으로 배치 */
.tripday .tripday-visual {
    position: absolute;
    top: 50px;               /* .tripday padding-top 과 동일 */
    left: 0;
    width: 1200px;
    height: 1600px;
    font-size: 0;
    line-height: 0;
    z-index: 0;
}

.tripday .tripday-visual img {
    display: block;
    width: 1200px;
    height: 1600px;
}

.tripday .tripday-body {
    position: relative;
    z-index: 1;
    width: 1200px;
    /* 상단 796 = 탭 위치(1042) - 배너 상단(246)
       하단 50  = 초록판 끝(3161) - 페이징 끝(3083+28) */
    padding: 796px 0 50px;
    box-sizing: border-box;
}

/*
   초록 배경판 (Figma y1472 ~ y3161)
     - y1472~1659 : 투명 → #1a820e 그라데이션 (187px = 1689 * 11.064%)
                    아래 깔린 배너의 잔디가 비쳐 자연스럽게 이어진다.
     - y1659~     : 단색 #1a820e

   background-color 를 쓰면 그라데이션의 투명 구간까지 초록으로 덮여
   잔디와의 연결이 끊기므로, 두 레이어를 background-image 로만 겹친다.
     1층 : 그라데이션 187px — 투명하게 시작
     2층 : 단색 — 187px 아래부터 본문 끝까지
   높이는 고정하지 않고 bottom:0 으로 본문 끝까지 채운다.
*/
.tripday .tripday-body::before {
    content: '';
    position: absolute;
    top: 1226px;             /* 1472 - 246 */
    bottom: 0;               /* 본문 끝까지 채움 */
    left: 0;
    width: 1200px;
    background-image:
        linear-gradient(to bottom, rgba(26, 130, 14, 0) 0%, #1a820e 100%),
        linear-gradient(to bottom, #1a820e, #1a820e);
    background-position:
        0 0,          /* 그라데이션 : 상단 187px */
        0 186px;      /* 단색 : 1px 겹쳐 올려 경계의 서브픽셀 틈을 없앤다 */
    background-size:
        100% 187px,
        100% calc(100% - 186px);
    background-repeat: no-repeat, no-repeat;
    z-index: -1;
}

/* ----- 대회구분 탭 (540 + 20 gap + 540 = 1100), 좌우 50px 들여쓰기 ----- */
.tripday .tripday-tab {
    display: flex;
    gap: 20px;
    width: 1100px;
    margin: 0 auto;
}

.tripday .tripday-tab > a {
    flex: 1;
    height: 42px;
    line-height: 42px;
    border-radius: 100px;
    background: #fff;
    color: #737373;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.tripday .tripday-tab > a.on {
    background: #0061af;
    color: #f5f5f5;
    font-weight: 600;
}

/* ----- 팀 필터 (1100 x 86, 내부 좌우 27) : 탭 끝(1084) → 1106 = 22 ----- */
.tripday .tripday-team {
    width: 1100px;
    min-height: 86px;
    margin: 22px auto 0;
    padding: 10px 27px;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    /* 세로 스크롤이 생기지 않도록 (가로만 허용) */
    overflow-y: hidden;
}

/*
   구단 수가 많아 폭을 넘치면 가로로만 스크롤한다.
   - overflow-y:hidden 으로 세로 스크롤바 차단
   - justify-content 는 넘칠 때 flex-start 로 동작해야 하므로 space-between 대신
     gap 으로 간격을 주고, 여유가 있을 때만 균등 분배되도록 한다.
*/
.tripday .tripday-team .team-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 가로 스크롤바를 얇게 (넘칠 때만 노출) */
.tripday .tripday-team .team-list::-webkit-scrollbar {
    height: 4px;
}

.tripday .tripday-team .team-list::-webkit-scrollbar-track {
    background: transparent;
}

.tripday .tripday-team .team-list::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: #d9d9d9;
}

.tripday .tripday-team .team {
    flex: 0 0 auto;
    width: 48px;
    text-align: center;
    text-decoration: none;
}

.tripday .tripday-team .team .emblem {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
}

.tripday .tripday-team .team .emblem img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* 팀 전체 (K리그 심볼) */
.tripday .tripday-team .team .emblem.all {
    background: url(../images/tripday/team_all-6aba4fa73dbe39388466cd03c13f18b5.png) no-repeat 50% 50%;
    background-size: 48px 48px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tripday .tripday-team .team .emblem.all {
        background-image: url(../images/tripday/team_all@2x-225324440e9a3b97e0f3e148ebc96a19.png);
    }
}

.tripday .tripday-team .team .name {
    display: block;
    margin-top: 3px;
    color: #737373;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
}

.tripday .tripday-team .team.on .name {
    color: #121212;
    font-weight: 700;
}

/* ==========================================================================
   프로그램 카드
   - 카드 전체 : 1100px, 반투명 흰색 70%, radius 10, 내부 여백 20
   - 카드 내부 요소 폭 : 1060 (1100 - 20*2)
   ========================================================================== */

/* 팀 필터 끝(1192) → 카드1 시작(1222) = 30 */
.tripday .tripday-list {
    width: 1100px;
    margin: 30px auto 0;
}

/* 카드 간격 : 카드1 끝(1817) → 카드2 시작(1847) = 30 */
.tripday .tripday-card {
    width: 1100px;
    margin-top: 30px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    box-sizing: border-box;
}

.tripday .tripday-card:first-child {
    margin-top: 0;
}

/* ----- 상단 : 경기정보(321) + gap 20 + 프로그램정보(719) ----- */
.tripday .tripday-card .card-head {
    display: flex;
    gap: 20px;
}

/* 경기 정보 박스 */
.tripday .tripday-card .match-box {
    flex: 0 0 321px;
    width: 321px;
    height: 166px;
    padding: 24px 0;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
}

.tripday .tripday-card .match-box .date {
    color: #121212;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}

.tripday .tripday-card .vs-box {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 56px;
    margin-top: 16px;
}

.tripday .tripday-card .vs-box .team {
    width: 60px;
}

.tripday .tripday-card .vs-box .emblem {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.tripday .tripday-card .vs-box .emblem img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.tripday .tripday-card .vs-box .name {
    display: block;
    margin-top: 12px;
    color: #121212;
    font-size: 14px;
    font-weight: 500;
    line-height: 13px;
}

/* VS : 28px Black, 회색 */
.tripday .tripday-card .vs-box .vs {
    padding-top: 14px;
    color: #737373;
    font-size: 28px;
    font-weight: 900;
    line-height: 28px;
}

/* 프로그램 요약 / 명칭 / 설명 */
/* 높이는 min-height 로 둔다. height 고정이면 설명이 3줄일 때 아래가 잘린다. */
.tripday .tripday-card .info-box {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 166px;
    padding: 24px;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

/* 요약 : 1줄 고정. 길면 말줄임 */
.tripday .tripday-card .info-box .summary {
    color: #121212;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 명칭 : 1줄 고정. 띄어쓰기 없는 긴 문자열도 칸을 넘지 않도록 강제 줄바꿈 */
.tripday .tripday-card .info-box .title {
    margin-top: 8px;
    color: #121212;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

/* 설명 : 최대 3줄(20px x 3). 넘치면 말줄임 처리해 카드 높이를 유지한다.
   -webkit-line-clamp 는 모바일/크롬 계열에서 동작하고,
   미지원 브라우저는 max-height 로 잘린다.
   pre-line : 등록 시 입력한 줄바꿈을 살린다(연속 공백은 접힘). */
.tripday .tripday-card .info-box .desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 20px;
    max-height: 60px;
    color: #737373;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line;
    word-break: break-all;
}

/* 잘린 항목만 클릭으로 펼칠 수 있음을 커서로 알린다.
   (hover 시에는 title 툴팁도 함께 뜬다) */
.tripday .tripday-card .info-box .summary.is-clamped,
.tripday .tripday-card .info-box .title.is-clamped,
.tripday .tripday-card .info-box .desc.is-clamped,
.tripday .tripday-card .info-box .summary.is-open,
.tripday .tripday-card .info-box .title.is-open,
.tripday .tripday-card .info-box .desc.is-open {
    cursor: pointer;
}

/* 펼침 상태 : 1줄 고정(nowrap)을 풀어 전문을 보여준다 */
.tripday .tripday-card .info-box .summary.is-open,
.tripday .tripday-card .info-box .title.is-open {
    overflow: visible;
    white-space: normal;
}

/* 설명 : 줄 수 제한만 푼다 (pre-line 은 유지해야 줄바꿈이 살아 있다) */
.tripday .tripday-card .info-box .desc.is-open {
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
}

/* ==========================================================================
   세부 프로그램 (아코디언 · 열림 상태에서만 표시)
   흰 박스(1060 x 301) 안에 테이블(1012) 배치
   ========================================================================== */

.tripday .tripday-card .card-detail {
    display: none;
    margin-top: 20px;
    padding: 24px;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.tripday .tripday-card.on .card-detail {
    display: block;
}

.tripday .detail-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #878a93;
    table-layout: fixed;
}

.tripday .detail-table caption {
    overflow: hidden;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

.tripday .detail-table th,
.tripday .detail-table td {
    height: 42px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    word-break: break-all;
    box-sizing: border-box;
}

/* 신청하기 버튼이 들어가는 셀 : 텍스트 strut 이 남아 버튼이 아래로 밀리는 것을 막는다 */
.tripday .detail-table td.td-apply {
    padding: 0;
    font-size: 0;
    line-height: 0;
}

/* 헤더 : 배경 #f4f4f5, 글자 #70737c */
.tripday .detail-table thead th {
    background: #f4f4f5;
    color: #70737c;
    border-bottom: 0;
}

.tripday .detail-table tbody td {
    color: #000;
}

/* 세로 구분선 */
.tripday .detail-table th + th,
.tripday .detail-table td + td {
    border-left: 1px solid #e5e5e5;
}

/* 신청하기 버튼 : 90x28, radius 20, #0061af */
.tripday .btn-apply {
    /* inline-block 은 셀의 line-height 베이스라인에 걸려 상하 중앙이 어긋난다.
       vertical-align: middle 로 셀 높이(42px) 기준 중앙에 맞춘다. */
    display: inline-block;
    width: 90px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    border-radius: 20px;
    background: #0061af;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.4px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.tripday .btn-apply.disabled {
    background: #c6c8ca;
    cursor: default;
}

/* ----- 데이터 없음 ----- */
.tripday .no-detail {
    padding: 40px 0;
    color: #737373;
    font-size: 14px;
    text-align: center;
}

.tripday .no-data {
    width: 1100px;
    margin: 30px auto 0;
    padding: 60px 0;
    border-radius: 10px;
    background: #fff;
    color: #737373;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
}

/* ==========================================================================
   프로그램보기 토글 (1060 x 48, 텍스트는 중앙 기준 우측 배치)
   ========================================================================== */

.tripday .tripday-card .btn-detail {
    display: block;
    position: relative;
    width: 100%;
    height: 48px;
    margin-top: 20px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #121212;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.tripday .tripday-card .btn-detail > span {
    vertical-align: middle;
}

/* 화살표 : 텍스트 우측 (열리면 위 방향) */
.tripday .tripday-card .btn-detail .arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: -3px 0 0 14px;
    border-right: 2px solid #121212;
    border-bottom: 2px solid #121212;
    vertical-align: middle;
    transform: rotate(45deg);
}

.tripday .tripday-card.on .btn-detail .arrow {
    margin-top: 3px;
    transform: rotate(-135deg);
}

/* ----- 페이징 : 마지막 카드 끝(3033) → 3083 = 50 ----- */
.tripday .center {
    margin-top: 50px;
    text-align: center;
}

.tripday .center .pagination {
    margin: 0 auto;
}