/* oa-home-rec — 홈 추천 섹션 2종 (다시 보고 싶은 경기 / 우리 학교 최근 경기)
   핸드오프 원본: docs/design/home-rec-handoff/oa-home-rec.css
   Contract    : contracts/home_rec.py (SELECTORS · CARD_ID_TEMPLATE · SLOT_CLASS)

   ⚠️ 핸드오프 원본과의 차이 — 값(구조는 100% 동일):
     · rgba(255,255,255,.94) → var(--bb-overlay-light-strong) (auto_rules 하드코딩 금지)
     · raw px(11.5/11/10.5/12/22 등 45곳) → tokens.css 신설 --bb-text-* / --bb-rec-* 토큰 참조
     · .oa-rec-empty* 마크업·CSS·"인기 경기 보기" CTA 는 이식하지 않는다 — R6(3장 미만이면
       섹션 통째 미렌더, 대체 콘텐츠 없음)로 죽은 코드가 됐다(SDD §4 "재사용 안 함").
     · .oa-rec__hint(「전체 ›」) 는 2026-09-03 제거 — 갈 목적지가 없어 href="#" 인
       죽은 링크였다(사용자 확정). 마크업이 사라졌으니 규칙도 남기지 않는다.

   토큰은 --bb-* 만 사용(하드코딩 금지). 클래스는 기존 oa-* 계열을 따른다.
   경기 카드의 팀/스코어 조판은 .oa-game-card__score* 를 그대로 재사용하므로
   rtp-recent-games.css **뒤**, inline-player.css **앞**에 로드한다. */

/* ── 섹션 공통 ───────────────────────────────────────────────── */
.oa-rec{margin-top:var(--bb-space-5)}
.oa-rec__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--bb-space-2)}
.oa-rec__title{margin:0;font:var(--bb-type-h5);letter-spacing:var(--bb-tracking-h4);color:var(--bb-ink)}
.oa-rec__sub{display:block;margin-top:var(--bb-space-1);font-size:var(--bb-text-11-plus);font-weight:600;color:var(--bb-ink-muted)}
.oa-rec__proxy{display:inline-block;margin-top:var(--bb-space-1);padding:0 var(--bb-space-2);border-radius:var(--bb-radius-4);background:var(--bb-accent-soft);color:var(--bb-accent-dark);font-size:var(--bb-text-11);font-weight:700}
.oa-rec__list{display:flex;flex-direction:column;gap:var(--bb-space-2);margin-top:var(--bb-space-3)}
.oa-rec__list[hidden]{display:none}

/* ── 추천 카드 (히어로 / 컴팩트 공용 골격) ───────────────────── */
.oa-rec-card{position:relative;border-radius:var(--bb-radius-lg);border:1px solid var(--bb-border);background:var(--bb-bg);overflow:hidden;transition:border-color var(--bb-t-fast) var(--bb-ease),box-shadow var(--bb-t-fast) var(--bb-ease)}
.oa-rec-card:hover{border-color:var(--bb-ink-muted);box-shadow:var(--bb-shadow)}
.oa-rec-card__open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.oa-rec-card__open:focus-visible{outline:none;box-shadow:var(--bb-focus-ring)}

.oa-rec-card__thumb{position:relative;display:block;background:var(--bb-hero-inner);overflow:hidden}
.oa-rec-card__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.oa-rec-card__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:var(--bb-radius-pill);background:var(--bb-overlay-light-strong);box-shadow:var(--bb-shadow-lg)}
.oa-rec-card__play::after{content:"";width:0;height:0;border-left:var(--bb-rec-play-tri-l) solid var(--bb-ink);border-top:var(--bb-rec-play-tri-tb) solid transparent;border-bottom:var(--bb-rec-play-tri-tb) solid transparent;margin-left:var(--bb-space-1)}
.oa-rec-card__dur{position:absolute;right:var(--bb-space-2);bottom:var(--bb-space-2);padding:var(--bb-space-05) var(--bb-rec-space-5);border-radius:var(--bb-radius-4);background:var(--bb-overlay-dark-strong);color:var(--bb-neutral-0);font-size:var(--bb-text-2xs-plus);font-weight:800}

.oa-rec-card__body{display:block}
.oa-rec-card__top{display:flex;align-items:center;gap:var(--bb-space-2);margin-bottom:var(--bb-space-2)}
.oa-rec-card__date{font-size:var(--bb-text-11);font-weight:600;color:var(--bb-ink-muted)}
.oa-rec-card__competition{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--bb-text-11);color:var(--bb-ink-muted)}

/* 내 기록 4칸 (히어로 전용) */
.oa-rec-card__stats{display:flex;margin-top:var(--bb-space-3);padding-top:var(--bb-space-15);border-top:1px solid var(--bb-border-soft)}
.oa-rec-card__stat{flex:1;position:relative;text-align:center}
.oa-rec-card__stat+.oa-rec-card__stat::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:1px;background:var(--bb-border-soft)}
.oa-rec-card__stat b{display:block;font-family:var(--bb-font-num);font-size:var(--bb-text-lg);font-weight:800;line-height:1;color:var(--bb-ink)}
.oa-rec-card__stat span{display:block;margin-top:var(--bb-rec-space-5);font-size:var(--bb-text-2xs-plus);font-weight:600;color:var(--bb-ink-muted)}
.oa-rec-card__stat--lead b,.oa-rec-card__stat--lead span{color:var(--bb-primary)}

/* ── 히어로 상태 ─────────────────────────────────────────────── */
.oa-rec-card--hero .oa-rec-card__thumb{width:100%;aspect-ratio:16/9;border-radius:var(--bb-radius) var(--bb-radius) 0 0}
.oa-rec-card--hero .oa-rec-card__play{width:var(--bb-tap-target);height:var(--bb-tap-target)}
.oa-rec-card--hero .oa-rec-card__body{padding:var(--bb-space-3)}
.oa-rec-card--hero .oa-game-card__scoreline{font-size:var(--bb-text-22)}

/* ── 컴팩트 상태 (옅은 카드 — 상대팀 한 줄 + 승패·스코어·내 기록 한 줄, 날짜 없음) ──── */
.oa-rec-card__vs,.oa-rec-card__result{display:none}
.oa-rec-card--mini .oa-rec-card__open{display:flex;align-items:center;gap:var(--bb-space-3);padding:var(--bb-space-15) var(--bb-space-3) var(--bb-space-15) var(--bb-space-15);min-height:var(--bb-tap-target)}
.oa-rec-card--mini .oa-rec-card__thumb{flex-shrink:0;width:var(--bb-rec-thumb-mini-w);height:var(--bb-rec-thumb-mini-h);border-radius:var(--bb-radius-8)}
.oa-rec-card--mini .oa-rec-card__play{width:var(--bb-rec-play-mini);height:var(--bb-rec-play-mini)}
.oa-rec-card--mini .oa-rec-card__play::after{border-left-width:var(--bb-rec-play-tri-mini-l);border-top-width:var(--bb-rec-play-tri-mini-tb);border-bottom-width:var(--bb-rec-play-tri-mini-tb);margin-left:var(--bb-space-05)}
.oa-rec-card--mini .oa-rec-card__dur,.oa-rec-card--mini .oa-rec-card__stats,.oa-rec-card--mini .oa-rec-card__competition,.oa-rec-card--mini .oa-rec-card__date,.oa-rec-card--mini .oa-game-card__score{display:none}
.oa-rec-card--mini .oa-rec-card__body{flex:1;min-width:0}
.oa-rec-card--mini .oa-rec-card__top{margin-bottom:0;gap:var(--bb-space-2)}
.oa-rec-card--mini .oa-rec-card__vs{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--bb-text-sm);font-weight:800;color:var(--bb-ink)}
.oa-rec-card--mini .oa-rec-card__result{display:flex;align-items:center;gap:var(--bb-space-2);margin-top:var(--bb-space-2);font-size:var(--bb-text-12)}
.oa-rec-card__res{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:var(--bb-space-25);height:var(--bb-space-25);border-radius:var(--bb-radius-4);background:var(--bb-neutral-100);color:var(--bb-neutral-600);font-size:var(--bb-text-2xs-plus);font-weight:800}
.oa-rec-card__res--w{background:var(--bb-primary-soft);color:var(--bb-primary-dark)}
.oa-rec-card__mini-score{flex-shrink:0;font-family:var(--bb-font-num);font-size:var(--bb-text-sm);font-weight:800;color:var(--bb-ink)}
.oa-rec-card__mini-score s{text-decoration:none;color:var(--bb-ink-muted);margin:0 var(--bb-space-05)}
.oa-rec-card__mine{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--bb-ink-muted)}
.oa-rec-card__status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-style:italic;color:var(--bb-ink-muted)}

/* ── 재생기 슬롯 (inline-player.js 가 채운다) ────────────────── */
/* 슬롯은 카드 맨 위(썸네일 자리)에 있고, 재생 중(.oa-rec-card--playing)엔 썸네일을 숨긴다.
   2026-09-04 사용자 요청 — 썸네일 아래 재생기가 하나 더 생기면 화면이 두 개로 보인다.
   .oa-rec-card 가 overflow:hidden 이라 카드 모서리 둥글림은 그대로 재생기에 적용된다. */
.oa-rec-card__slot:empty{display:none}
.oa-rec-card__slot{border-bottom:1px solid var(--bb-border-soft)}
.oa-rec-card--playing .oa-rec-card__thumb{display:none}