/*
 * 게임 정보 화면.
 *
 * 좁은 화면이 기본이다. 클릭의 82%가 모바일이라 미디어 쿼리 밖의 규칙이
 * 모바일을 그리고, 넓은 화면은 min-width 로 얹는다.
 *
 * 값은 wds-tokens.css 에만 있다. 여기서 색·간격·글꼴을 새로 만들지 않는다.
 *
 * 이 파일이 의존하는 것은 gcp-base 뿐이다(functions.php). components.css 는
 * is_front_page() 에서만 실리므로 거기 있는 .gcp-section 규칙은 이 화면에
 * 닿지 않는다. 필요한 만큼 여기서 다시 쓴다.
 *
 * coupon-page.css 와 규칙이 겹치는 자리가 있다(머리·섹션 간격·표의 카드
 * 전환). 한 파일로 합치지 않는 것은 두 화면이 같은 요청에 함께 실리지
 * 않아서다 — 합치면 어느 화면이든 안 쓰는 절반을 내려받는다. 경계는
 * 782/783px 로 두 파일이 같다. 다른 값을 하나 더 만들면 제목이 커지는 폭과
 * 표가 바뀌는 폭이 어긋나 화면이 두 번 접힌다.
 */

/* --- 머리 --- */

.gcp-game__head {
  display: flex;
  align-items: center;
  gap: var(--gcp-s4);
  margin-bottom: var(--gcp-s5);
}
/*
 * 112px 은 원본 해상도 안이다. 스토어 아이콘은 512px 로 오므로 2배 DPR
 * 화면에서 224px 로 그려도 원본을 넘지 않는다.
 */
.gcp-game__icon {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: var(--gcp-radius-btn-s);
  object-fit: cover;
  display: block;
  background: var(--gcp-fill);
}
.gcp-game__title { min-width: 0; }
/* 아이콘 옆에 서는 제목이라 base.css 의 h1 보다 한 단계 작다 */
.gcp-game__title h1 {
  margin: 0;
  font-size: var(--gcp-title3-size);
  line-height: var(--gcp-title3-lh);
  overflow-wrap: anywhere;
}
.gcp-game__meta {
  margin: var(--gcp-s1) 0 0;
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
}

/* --- 요약 --- */

/* 우리가 쓴 문장이다. 스토어 인용과 눈으로도 구분되게 바탕을 준다 */
.gcp-game__summary {
  margin: 0 0 var(--gcp-s8);
  padding: var(--gcp-s4);
  background: var(--gcp-bg-alt);
  border-radius: var(--gcp-radius-card);
}

/* --- 섹션 --- */

/*
 * 이 화면 전체가 이미 .gcp-entry 라는 흰 카드 안이다(game-info.php).
 * 카드 안에 흰 카드를 또 깔면 경계가 보이지 않으므로 간격과 제목만으로 나눈다.
 */
.gcp-game .gcp-section { margin: 0 0 var(--gcp-s8); }
.gcp-game .gcp-section:last-child { margin-bottom: 0; }
.gcp-game .gcp-section > h2 { margin-top: 0; }

.gcp-game .gcp-note {
  margin: var(--gcp-s3) 0 0;
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
}

/* --- 순위 추이 표: 좁은 화면(기본) --- */

/*
 * 열이 셋뿐이고 값이 짧아(날짜 · "3위" · "순위 밖") 좁은 화면에서도 표
 * 그대로 선다. 쿠폰 표처럼 셀을 블록으로 바꾸지 않는다 — 열네 줄이 카드
 * 열네 장이 되면 화면이 통째로 길어지고, 추이는 줄을 위아래로 견주며 읽는
 * 표라 그 배치가 읽기를 방해한다.
 *
 * 그래서 data-label 은 화면에 띄우지 않는다. 마크업에 남겨 두는 것은 이
 * 판단이 뒤집힐 때를 위한 것이고, 지금은 머리줄이 그 자리를 한다.
 */
.gcp-trend {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
}
.gcp-trend th,
.gcp-trend td {
  padding: var(--gcp-s2) var(--gcp-s3);
  text-align: left;
  vertical-align: middle;
}
.gcp-trend thead th {
  background: var(--gcp-fill);
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-label1-size);
  line-height: var(--gcp-label1-lh);
  font-weight: 600;
}
.gcp-trend tbody th,
.gcp-trend tbody td { border-top: 1px solid var(--gcp-border-soft); }
/* 날짜 열은 내용만큼만 쓴다. 순위 칸이 폭을 갖는 편이 읽기 쉽다 */
.gcp-trend__date {
  width: 1%;
  white-space: nowrap;
  color: var(--gcp-label-neutral);
  font-weight: 600;
}

/* --- 스토어 인용 --- */

/*
 * 남의 글이다. 왼쪽 선으로 우리 문장과 갈라 놓는다. 출처는 접지 않는다 —
 * 인용은 출처를 밝혀야 인용이다.
 */
.gcp-quote {
  margin: 0 0 var(--gcp-s5);
  padding: 0 0 0 var(--gcp-s4);
  border-left: 3px solid var(--gcp-border);
}
.gcp-quote p { margin: 0; }
.gcp-quote footer {
  margin-top: var(--gcp-s2);
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
}

/* --- 스펙 목록 --- */

/*
 * 이름과 값이 한 줄씩 선다. dt 를 왼쪽에 고정폭으로 두면 '설치 수' 같은
 * 세 글자 항목에 맞춘 폭이 다른 줄에서 빈다.
 */
.gcp-spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gcp-s2) var(--gcp-s4);
  margin: 0;
}
.gcp-spec dt {
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
  font-weight: 600;
}
.gcp-spec dd {
  margin: 0;
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
  overflow-wrap: anywhere;
}

/* --- 쿠폰 링크 --- */

.gcp-game__coupon { margin: 0; }
/* 손가락으로 눌리는 크기여야 한다 */
.gcp-game__coupon a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--gcp-s5);
  border-radius: var(--gcp-radius-btn);
  background: var(--gcp-primary);
  color: var(--gcp-bg);
  font-size: var(--gcp-body1-size);
  font-weight: 700;
}
.gcp-game__coupon a:hover {
  background: var(--gcp-primary-strong);
  text-decoration: none;
}

/* --- 넓은 화면 --- */

@media (min-width: 783px) {
  .gcp-game__title h1 {
    font-size: var(--gcp-title1-size);
    line-height: var(--gcp-title1-lh);
  }
  .gcp-trend th,
  .gcp-trend td { padding: var(--gcp-s3) var(--gcp-s4); }
}

/*
 * 평점 옆 별. 장식이라 마크업에 aria-hidden 이 달려 있다.
 * 색만 준다 - 크기를 키우면 글자 기준선이 흐트러진다.
 */
.gcp-star { color: var(--gcp-cautionary); }