@charset "UTF-8";

/* =========================================================
   코트뷰 360° VR - 구단 선택 화면
   기준 디자인: 1920 x 1080 (카드 193 x 263)
   ========================================================= */

@font-face {
  font-family: 'KOVO';
  src: url('../fonts/KOVO.ttf') format('truetype');
  font-display: swap;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'KOVO', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  color: #fff;
  background: #0e1b3d url('../images/bg.webp') center / cover no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- layout ---------- */
.court-view {
  max-width: 1539px; /* 콘텐츠 1507 + 좌우 여백 16 */
  margin: 0 auto;
  padding: 128px 16px;
}

.court-view__title {
  display: flex;
  justify-content: center;
  margin: 62px 0 65px;
}

.court-view__title img {
  width: 459px;
  /* 우측으로 튀어나온 공 아이콘 폭의 절반만큼 밀어 글자 부분을 화면 중앙에 맞춤 */
  transform: translateX(19px);
}

/* ---------- section ---------- */
.division__label {
  font-size: 20.652px;
  font-weight: 400;
  line-height: 1;
}

/* 카드 크기(--card) 고정, 열 수(--cols)만큼의 폭으로 섹션을 중앙 배치하고 남는 줄은 중앙 정렬 */
.division {
  --cols: 7;
  --gap: 26px;
  --card: 193px;
  max-width: calc(var(--cols) * var(--card) + (var(--cols) - 1) * var(--gap));
  margin: 0 auto;
}

.division__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: 25px;
  padding: 0;
  list-style: none;
}

.division__list > li {
  /* 화면이 좁아 고정 크기가 안 들어가면 그때만 축소 */
  width: min(var(--card), (100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

/* ---------- tablet (~1500px) ---------- */
@media (max-width: 1500px) {
  .division {
    --cols: 4;
  }
}

/* ---------- team card ---------- */
.team-card {
  position: relative;
  display: block;
  aspect-ratio: 193 / 263;
  border-radius: 10.326px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease;
}

.team-card:hover,
.team-card:focus-visible {
  transform: translateY(-4px);
}

.team-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 배경 레이어: 배경색 → 경기장 사진 → (여자부) 틴트 → 사선 오버레이 순서 */
.team-card__bg,
.team-card__tint,
.team-card__overlay,
.team-card__full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.team-card__bg {
  background: #0e1b3d;
  border: 1.291px solid rgba(244, 244, 245, 0.2);
}

/* 경기장 사진: 600 x 337 박스를 카드 기준 (x, y)에 배치 — 팀별 위치는 --x / --y 로 조정 */
.team-card__stadium {
  position: absolute;
  left: calc(var(--x, -203) / 193 * 100%);
  top: calc(var(--y, -37) / 263 * 100%);
  width: calc(600 / 193 * 100%);
  max-width: none;
  height: calc(337 / 263 * 100%);
  object-fit: cover;
  opacity: 0.3;
  pointer-events: none;
}

.team-card__tint {
  display: none;
  background: rgba(41, 69, 160, 0.5);
}

/* 여자부 */
.team-card--women .team-card__bg {
  background: #36194f;
}

.team-card--women .team-card__stadium {
  opacity: 0.4;
}

.team-card--women .team-card__tint {
  display: block;
}

/* 경기장 사진 없는 카드 */
.team-card--empty .team-card__bg {
  background: rgba(48, 51, 115, 0.8);
}

.team-card--women.team-card--empty .team-card__bg {
  background:
    linear-gradient(rgba(135, 135, 131, 0.4), rgba(135, 135, 131, 0.4)),
    #36194f;
}

/* 카드 내용 */
.team-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 8px calc(21 / 193 * 100%);
  text-align: center;
}

.team-card__emblem {
  position: relative;
  width: calc(136 / 193 * 100%);
  aspect-ratio: 1 / 1;
  margin-top: calc(2 / 193 * 100%);
}

.team-card__emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 비트맵 엠블럼은 피그마 엠블럼 박스(136) 안 위치 그대로 배치 */
.team-card__emblem--stars img {
  position: absolute;
  left: calc(12 / 136 * 100%);
  top: calc(24 / 136 * 100%);
  width: calc(112 / 136 * 100%);
  height: auto;
}

.team-card__emblem--hipass img {
  position: absolute;
  left: calc(3 / 136 * 100%);
  top: calc(3 / 136 * 100%);
  width: calc(131 / 136 * 100%);
  height: calc(131 / 136 * 100%);
}

.team-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  word-break: keep-all;
}

.team-card__name {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.team-card__stadium-name {
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- mobile (~1023px) ---------- */
@media (max-width: 1023px) {
  .court-view {
    padding: 40px 16px;
  }

  .court-view__title {
    margin: 40px 0;
  }

  .court-view__title img {
    width: 260px;
    transform: translateX(11px);
  }

  .division__label {
    font-size: 18px;
  }

  .division {
    --cols: 2;
    --gap: 12px;
  }

  .division__list {
    margin-top: 16px;
  }

  .team-card__text {
    gap: 8px;
  }

  .team-card__name {
    font-size: 13px;
  }

  .team-card__stadium-name {
    font-size: 11px;
  }
}