/* 숏팁 (/Post/ShortTip) — 단일 컬럼 카드 리스트. Figma 07-2.POST_숏팁 시안 값 1:1 반영.
   카드 = 상단 연파랑 헤더(리그명 + 태그 칩) + 경기행(팀:팀 + 날짜) + 본문(연파랑 박스 + 좌측 파랑 bar).
   이 페이지 포인트 블루 = #1A56DB(시안), 사이트 토큰(#2563EB)과 별개. px→rem(÷16) 변환. */

/* 제목 — 사이트찾기(sf-title)와 동일: 좌측 파랑 bar + 22px/700 타이틀 */
.st-title-row { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
.st-title-bar { width: 0.25rem; height: 1.25rem; background: #1A56DB; border-radius: 999px; }
.st-title { font-size: 1.375rem; font-weight: 700; line-height: 2rem; letter-spacing: -0.025em; color: #1F2430; margin: 0; }

/* 종목 필터 칩 — 결장정보 .ab-sports와 동일(가로 스크롤 pill, rem값 동일). 활성=#1A56DB, 준비중=흐린 라벨. 리스트와 15px 간격 */
.st-sports { display: flex; gap: 0.571rem; overflow-x: auto; padding-bottom: 0.214rem; margin-bottom: 0.9375rem; -webkit-overflow-scrolling: touch; }
.st-sport {
    display: inline-flex; align-items: center; gap: 0.357rem; flex: none;
    height: 2.429rem; padding: 0 1.071rem; border-radius: 999px;
    border: 1px solid #E8EBF0; background: #FFFFFF; color: #5B6473;
    font-size: 0.929rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.st-sport.is-active { background: #1A56DB; border-color: #1A56DB; color: #FFFFFF; }
.st-sport-soon { font-size: 0.714rem; font-weight: 600; color: #98A0AE; opacity: .7; }

/* 카드 리스트 — 카드 간격 15px */
.st-list { display: flex; flex-direction: column; gap: 0.9375rem; }

/* 카드 — 흰 배경 + 1px #E8EBF0 + radius 8px */
.st-card {
    background: #FFFFFF;
    border: 1px solid #E8EBF0;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* 상단 헤더 — 연파랑 띠 rgba(238,243,255,.6) + 하단 보더, padding 8px 14px */
.st-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(238, 243, 255, 0.6);
    border-bottom: 1px solid #E8EBF0;
}
/* 리그명 — 13.5px/900, #1A56DB */
.st-card-league { font-size: 0.84375rem; font-weight: 900; line-height: 1.25rem; color: #1A56DB; }
/* 태그 칩 — 반투명 흰 배경 + radius 4px(테두리 없음), 텍스트 10px/700 파랑 rgba(26,86,219,.8) */
.st-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 0.875rem;
    color: rgba(26, 86, 219, 0.8);
}

/* 경기행 — 홈 : 원정 + 날짜. padding 12px 14px 0 */
.st-card-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem 0;
}
.st-teams { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex-wrap: wrap; }
/* 팀명 — 14px/700, #1F2430 */
.st-team { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; line-height: 1.25rem; color: #1F2430; }
.st-team-ic { color: #E0A82E; font-size: 0.9375rem; }   /* 트로피 골드(시안: 15px 트로피 이미지) */
/* 구분자 ":" — 12px/700, 파랑 #1A56DB */
.st-vs { color: #1A56DB; font-weight: 700; font-size: 0.75rem; }
/* 날짜 — 12.5px/500, #98A0AE */
.st-date { font-size: 0.78125rem; font-weight: 500; line-height: 1.125rem; color: #98A0AE; white-space: nowrap; flex-shrink: 0; }

/* 본문 — 연파랑 박스 rgba(238,243,255,.5) + 좌측 파랑 bar(#1A56DB ~3px) + radius 8px, padding 8px 12px.
   카드 좌우 14px 인셋, 경기행과 12px 간격, 하단 12px. 텍스트 14.5px/500, #373737 */
.st-card-body {
    margin: 0.75rem 0.875rem 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(238, 243, 255, 0.5);
    border-left: 0.1875rem solid #1A56DB;
    border-radius: 0.5rem;
    font-size: 0.90625rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #373737;
    word-break: keep-all;
}

/* 페이저 — 36x36 버튼, radius 8px, gap 6px. 활성=#1A56DB, 비활성 보더 #E8EBF0/텍스트 #5B6473 */
.st-pager { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-top: 1.25rem; }
.st-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 0.4rem;
    border: 1px solid #E8EBF0; border-radius: 0.5rem;
    background: #FFFFFF; color: #5B6473; font-size: 0.8125rem; font-weight: 700;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.st-page:hover { background: #F5F7FA; }
.st-page.is-active { background: #1A56DB; border-color: #1A56DB; color: #FFFFFF; }
/* 이전/다음 — 커뮤니티·픽스터와 동일하게 배경 없이 테두리만(숫자 버튼과 구분) */
.st-page-arrow { height: 2rem; background: transparent; color: #5B6473; }

@media (max-width: 767.98px) {
    .st-card-match { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .st-date { align-self: flex-end; }
}