/*
 * 자동 페이지 다섯 화면.
 *
 *   /new-games/  /ranking/  /game-news/  /game-updates/  /coupon-alerts/
 *
 * 다섯 다 iblog 가 본문에 HTML 을 써 넣던 페이지였고 2026-07-30 에 굳었다.
 * 이제 테마가 자료로 그린다.
 *
 * 순위 줄·쿠폰 카드·업데이트 목록의 규칙은 components.css 에 있다(홈과 같은
 * 마크업이라 그쪽을 함께 싣는다). 여기 있는 것은 이 화면들에만 있는 것뿐이다.
 *
 * 좁은 화면이 기본이다. 클릭의 82%가 모바일이라 미디어 쿼리 밖의 규칙이
 * 모바일을 그리고, 넓은 화면은 min-width 로 얹는다.
 *
 * 값은 wds-tokens.css 에만 있다. 여기서 색·간격·글꼴을 새로 만들지 않는다.
 *
 * 이 파일이 의존하는 것은 gcp-base 뿐이다(functions.php). game-page.css 나
 * coupon-page.css 와 합치지 않는 것은 세 화면이 같은 요청에 함께 실리지 않기
 * 때문이다 — 합치면 어느 쪽이든 안 쓰는 몫을 내려받는다.
 */

.gcp-newgames { margin: 0; }

/* 무엇을 모은 목록인지, 언제 기준인지. 이 페이지가 아흐레 굳었을 때 아무도
 * 몰랐다. 날짜가 화면에 있으면 굳은 것이 눈에 보인다 */
.gcp-newgames__lead {
  margin: 0 0 var(--gcp-s6);
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
}

.gcp-newgames .gcp-section { margin: 0 0 var(--gcp-s8); }
.gcp-newgames .gcp-section:last-child { margin-bottom: 0; }
.gcp-newgames .gcp-section > h2 { margin-top: 0; }

.gcp-newgames .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);
}

/* --- 신작 캘린더: 미니 달력 · 필터 칩 · 날짜 헤더 · 카드 --- */

/* 미니 달력 — 훑고 건너뛰는 장치. 본문은 아래 타임라인이다 */
.gcp-minical {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gcp-s5);
  margin: 0 0 var(--gcp-s6);
}

@media (min-width: 640px) {
  .gcp-minical { grid-template-columns: 1fr 1fr; }
}

.gcp-minical__month {
  border: 1px solid var(--gcp-border);
  border-radius: 12px;
  padding: var(--gcp-s4);
}

.gcp-minical__label {
  margin: 0 0 var(--gcp-s3);
  font-size: 0.875rem;
  font-weight: 600;
}

.gcp-minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.gcp-minical__dow,
.gcp-minical__pad,
.gcp-minical__day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-size: 0.75rem;
  border-radius: 4px;
}

.gcp-minical__dow { color: var(--gcp-label-neutral); }
.gcp-minical__day { color: var(--gcp-label-neutral); text-decoration: none; }

/* 색이 상태를 말한다. 지난 날 · 앞으로 올 날 · 사전예약 */
.gcp-minical__day.is-released { background: var(--gcp-fill); color: var(--gcp-label-normal); }
.gcp-minical__day.is-upcoming { background: var(--gcp-primary); color: var(--gcp-bg); }
.gcp-minical__day.is-preorder { background: var(--gcp-cautionary); color: var(--gcp-bg); }
.gcp-minical__day.is-today { outline: 1px solid var(--gcp-label-normal); font-weight: 600; }

/* 필터 칩 */
.gcp-release-filter { margin: 0 0 var(--gcp-s6); }
.gcp-release-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gcp-s2);
  margin-bottom: var(--gcp-s2);
}

.gcp-chip {
  border: 1px solid var(--gcp-border);
  background: transparent;
  color: var(--gcp-label-neutral);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  cursor: pointer;
}

.gcp-chip[aria-pressed="true"] {
  background: var(--gcp-label-normal);
  border-color: var(--gcp-label-normal);
  color: var(--gcp-bg);
}

.gcp-chip__count { opacity: 0.7; }

/* 날짜 헤더
 *
 * 이 목록은 날짜가 유일한 구분이다. 처음에는 글자 굵기 하나로만 갈랐더니
 * 카드가 이어 붙어 어디서 날이 바뀌는지 안 보였다. 셋으로 가른다 —
 * 위에 긋는 선, 아래보다 넓은 위 여백, 그리고 굵고 진한 글자.
 *
 * 위 여백을 아래보다 넓게 두는 것이 핵심이다. 제목이 위쪽 카드가 아니라
 * 아래쪽 카드에 붙어 보여야 "여기부터 이 날짜" 로 읽힌다.
 */
.gcp-release-day {
  margin: 0;
  /* 묶음이 스무 개 가까이 되므로 여백을 아낀다. 선이 있으면 덜 벌려도 갈린다 */
  padding: var(--gcp-s5) 0 var(--gcp-s6);
  border-top: 1px solid var(--gcp-border);
}

/* 첫 묶음 위에는 긋지 않는다. 필터 칩 바로 아래라 선이 겹쳐 보인다 */
.gcp-release-day:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.gcp-release-day__head {
  margin: 0 0 var(--gcp-s4);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
  font-weight: 700;
  color: var(--gcp-label-normal);
}

/* 묶음이 여럿이라 지금 어디쯤인지 알려 주는 표시가 하나는 있어야 한다 */
.gcp-release-day__now {
  display: inline-block;
  margin-right: var(--gcp-s2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gcp-label-normal);
  color: var(--gcp-bg);
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
  font-weight: 700;
  vertical-align: middle;
}

.gcp-release-day__dday {
  display: inline-block;
  margin-left: var(--gcp-s2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gcp-primary);
  color: var(--gcp-bg);
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
  font-weight: 700;
  vertical-align: middle;
}

/* 카드 */
.gcp-releases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /*
   * 좁은 화면은 한 장씩이다.
   *
   * 두 장씩 놓았더니 카드 하나가 180px 안팎으로 좁아져 개발사 이름이 세 줄로
   * 접히고 배너는 우표만 해졌다. 이 화면은 훑는 화면이라 카드가 크게 보여야
   * 한다 — 세로로 더 길어지는 값은 치른다.
   */
  grid-template-columns: 1fr;
  gap: var(--gcp-s4);
}

@media (min-width: 640px) {
  .gcp-releases { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .gcp-releases { grid-template-columns: repeat(3, 1fr); }
}

.gcp-release {
  position: relative;
  border: 1px solid var(--gcp-border);
  border-radius: 12px;
  overflow: hidden;
}

/*
 * hidden 속성이 듣게 못을 박는다.
 *
 * 접힘('더 보기' 앞의 카드)과 칩 필터가 둘 다 이 속성 하나에 달려 있는데,
 * 그것을 감추는 것은 브라우저 기본 규칙이라 힘이 가장 약하다. 나중에 누가
 * .gcp-release 나 .gcp-release-day 에 display 를 정하면 그 기본값을 이겨
 * 접힘도 필터도 조용히 안 듣는다 — 카드는 다 보이고 배너 마흔 장이 그대로
 * 내려온다. 여기서 같은 자리에 못을 박아 그 일이 안 나게 한다.
 */
.gcp-release[hidden],
.gcp-release-day[hidden] { display: none; }

/* 2:1 이 feature graphic 비율이다. 아이콘으로 물러서도 틀은 그대로 */
.gcp-release__banner {
  aspect-ratio: 2 / 1;
  background: var(--gcp-fill);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gcp-release__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gcp-release__banner--icon img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: contain;
}

/*
 * 상태 딱지. 홈의 .gcp-newgame__state 와 같은 모양이다 — 같은 값이니 같게
 * 보여야 한다.
 *
 * 전에는 배너 위에 얹혀 있었다(position: absolute). 그림의 왼쪽 위를 가리는
 * 데다 반투명 검정 바탕이라, 밝은 배너에서는 글자가 뭉갰다. 본문으로 내리고
 * 바탕을 꽉 채운다.
 */
/* 딱지와 날짜가 한 줄이다. */
.gcp-release__head {
  display: flex;
  align-items: center;
  gap: var(--gcp-s2);
  margin: 0 0 var(--gcp-s1);
}

/*
 * 딱지는 이 화면 전용 치수다. 홈(.gcp-newgame__state)의 값을 그대로 가져다
 * 쓰지 않는다.
 *
 * 홈에서는 딱지가 제 줄을 혼자 쓰므로 14px/4·12px 알약이 알맞다. 여기서는
 * 14px 날짜와 한 줄을 나눠 쓴다 — 같은 치수를 얹으면 딱지가 28px, 날짜가
 * 20px 이 되어 딱지 혼자 줄을 밀어 올린다. 12px 글자에 2·8px 을 주면 딱
 * 20px 이라 두 값의 높이가 같아진다.
 *
 * **왼쪽 여백은 없다.** 한때 4px 을 밀어 뒀는데, 그러면 딱지만 제목·장르보다
 * 오른쪽에서 시작해 본문 왼쪽 선이 딱지 줄에서만 어긋난다. 알약이 테두리에
 * 눌려 보이는 것보다 시작선이 어긋나는 쪽이 더 눈에 띈다.
 *
 * 12px 굵은 글자는 WCAG 의 '큰 글자'(18.66px 굵게)가 아니라 4.5:1 을 채워야
 * 한다. 흰 글자 기준 검정 17.9:1 · 파랑 4.8:1 이고, 주황만 2.2:1 이라 아래에서
 * 글자를 검게 뒤집는다.
 */
.gcp-release__chip {
  padding: 2px var(--gcp-s2);
  border-radius: var(--gcp-radius-pill);
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
  font-weight: 700;
  white-space: nowrap;
  background: var(--gcp-label-normal);
  color: var(--gcp-bg);
}

.gcp-release__chip--upcoming { background: var(--gcp-primary); }

/*
 * 사전예약만 글자가 검다. 주황이 밝아서 흰 글자가 안 읽힌다 — 검은 글자를
 * 얹으면 2.2:1 이 8.0:1 이 된다.
 */
.gcp-release__chip--preorder {
  background: var(--gcp-cautionary);
  color: var(--gcp-label-normal);
}

.gcp-release__body { padding: var(--gcp-s3); min-width: 0; }

/*
 * 날짜는 딱지 오른쪽에 선다. 이 화면은 날짜를 보러 오는 곳이라 장르·개발사
 * 사이에 섞어 두면 묻힌다.
 */
.gcp-release__date {
  margin: 0;
  font-size: var(--gcp-label1-size);
  line-height: var(--gcp-label1-lh);
  font-weight: 600;
  color: var(--gcp-label-normal);
}

/*
 * 제목은 홈과 같은 24px 이다.
 *
 * 15px 이었다. 카드에서 제일 큰 글자가 제목이 아니라 배너였고, 훑을 때 이름이
 * 안 걸렸다. 홈 카드(.gcp-newgame__title)가 같은 넓이에서 24px 을 쓴다.
 *
 * **홈과 달리 줄바꿈을 막지 않는다.** 홈은 nowrap + ellipsis 로 한 줄에
 * 자르는데, 여기서는 이름이 잘리면 무슨 게임인지 알 수 없게 된다 — '죠죠의
 * 기묘한 모험: 골든 스피릿' 같은 이름이 흔하다. 두 줄을 받는다.
 */
.gcp-release__title {
  margin: 0;
  font-size: var(--gcp-title3-size);
  line-height: var(--gcp-title3-lh);
  font-weight: 700;
}

/*
 * 카드 전체가 링크다.
 *
 * 제목 글자만 누를 수 있으면 표적이 너무 작다 — 카드 하나가 열 줄인데
 * 그중 한 줄만 반응한다. 제목의 <a> 를 카드 넓이로 늘려 덮는다.
 *
 * **링크를 <li> 로 올리지 않는 이유**는 그러면 그림·칩·순위까지 링크 이름에
 * 들어가 화면 낭독기가 카드 하나를 통째로 읽기 때문이다. 이 방식은 링크
 * 이름이 게임명 하나로 남는다.
 *
 * .gcp-release 에 position: relative 가 있다. 원래 칩을 얹으려고 둔 것인데
 * 칩이 본문으로 내려간 지금은 이 덮개가 유일한 쓸모다 — 지우지 말 것.
 */
.gcp-release__title a {
  text-decoration: none;
  color: var(--gcp-label-normal);
}

.gcp-release__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 칩 위로 덮는다. 칩은 누를 것이 아니라 읽을 것이다 */
  z-index: 1;
}

.gcp-release__meta {
  margin: var(--gcp-s1) 0 0;
  font-size: var(--gcp-label1-size);
  line-height: var(--gcp-label1-lh);
  color: var(--gcp-label-neutral);
}

/*
 * 설치 수와 평점. 나온 게임만 갖는 값이라 줄을 따로 뒀다 — 장르·개발사와
 * 섞으면 사전예약 카드에서 그 줄이 반쪽만 차서 들쭉날쭉해진다.
 */
.gcp-release__stats {
  margin: var(--gcp-s1) 0 0;
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
  color: var(--gcp-label-neutral);
}

/*
 * 순위 줄만 위 간격이 넓다. 아래 세 줄(장르·설치·순위)은 4px 로 붙여 두는데,
 * 순위는 알약이라 제 높이가 있어 같은 4px 이면 설치 줄에 눌린 것처럼 보인다.
 */
.gcp-release__ranks {
  margin: var(--gcp-s2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/*
 * 순위 줄은 카드에서 부차적인 정보다.
 *
 * 처음에는 색을 꽉 채우고 글자를 흰색으로 뒀는데, 상태 딱지(사전예약·출시예정)
 * 와 같은 무게로 서서 시선을 나눠 가졌고 흰 글자가 특히 주황 위에서 안 읽혔다
 * (#FFFFFF on #FF9200 은 대비 2.1:1 로 WCAG AA 4.5:1 에 한참 못 미친다).
 *
 * 옅은 바탕에 짙은 글자로 바꾼다. 무게가 내려가고 대비는 올라간다 —
 * #0054D1 on #E8F0FF 은 7.4:1, #8A4B00 on #FFF3E0 은 7.0:1 이다.
 */
.gcp-release__rank {
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 0.6875rem;
  /*
   * 줄간격을 조인 것은 세로 여백을 벌기 위해서다. 본문 줄간격(1.6)이 그대로
   * 붙으면 11px 글자만으로 18px 을 먹어 여백 없이도 칩이 두꺼워진다. 여기를
   * 1.35 로 죄어 둔 덕에 위아래 4px 을 줘도 칩이 낮게 남는다.
   */
  line-height: 1.35;
}

.gcp-release__rank--free {
  background: #E8F0FF;
  color: var(--gcp-primary-heavy);
}

.gcp-release__rank--gross {
  background: #FFF3E0;
  color: #8A4B00;
}

/* 필터를 겹쳐 카드가 하나도 안 남을 때 서버가 미리 그려 둔 알림. JS 가 켠다 */
.gcp-newgames__empty {
  margin: var(--gcp-s6) 0;
  text-align: center;
  color: var(--gcp-label-neutral);
}

/* 더 보기 */
.gcp-newgames__more { margin: 0 0 var(--gcp-s6); text-align: center; }

.gcp-more {
  border: 1px solid var(--gcp-border);
  background: transparent;
  color: var(--gcp-label-normal);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 0.875rem;
  cursor: pointer;
}

/* --- 신작 소식 ---
 *
 * 제목과 링크뿐이다. 남의 기사라 본문을 옮기지 않는다.
 */

/*
 * 카드 격자. 그림과 제목으로 고르는 목록이라 줄 목록보다 카드가 맞다 —
 * 원래 이 화면이 그랬고, 맨 링크 목록으로 바꿨더니 사이트의 다른 화면과
 * 따로 놀았다.
 */
.gcp-newscards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gcp-s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gcp-newscard {
  border: 1px solid var(--gcp-border-soft);
  border-radius: var(--gcp-radius-card);
  overflow: hidden;
  background: var(--gcp-bg);
}
/* 카드 하나가 통째로 눌린다. 그림과 제목 중 어느 것을 눌러도 같은 곳에 간다 */
.gcp-newscard > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--gcp-label-normal);
  text-decoration: none;
}
.gcp-newscard > a:hover { text-decoration: none; }
.gcp-newscard:hover { border-color: var(--gcp-border); }

.gcp-newscard__art {
  display: block;
  width: 100%;
  /* 매체마다 썸네일 비율이 달라 잘라서 맞춘다. 격자가 들쭉날쭉하면 목록이 아니다 */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--gcp-fill);
}

.gcp-newscard__body {
  display: flex;
  flex-direction: column;
  gap: var(--gcp-s1);
  flex: 1;
  padding: var(--gcp-s3);
}
.gcp-newscard__title {
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* 어디서 온 기사인지 밝히는 것이 남의 글을 다루는 최소한이다 */
.gcp-newscard__src {
  margin-top: auto;
  padding-top: var(--gcp-s2);
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
}

/* --- 화면 머리말 ---
 *
 * 무엇을 모은 목록인지, 언제 기준인지. 다섯 화면이 아흐레 굳었을 때 아무도
 * 몰랐다. 날짜가 화면에 있으면 굳은 것이 눈에 보인다.
 */
.gcp-rankpage__lead,
.gcp-updatepage__lead,
.gcp-alertpage__lead,
.gcp-newsdays__lead {
  margin: 0 0 var(--gcp-s6);
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
}

/*
 * 자동 생성 화면(순위·쿠폰·신작·업데이트·뉴스)은 좁은 화면에서 글 카드
 * (.gcp-entry) 안쪽 여백을 절반으로 줄인다.
 *
 * 이 화면들의 알맹이는 목록이라 가로 폭이 곧 정보량이다. 글 카드 32px +
 * 섹션 16px + 컨테이너 16px 이 겹쳐 360px 화면에서 좌우 128px 이 여백으로
 * 나갔다 (2026-08-24 지적). 카드 여백을 16px 로 줄이면 제목·머리말·달력·칩·
 * 목록이 **모두 같은 선(32px)에서 시작하면서** 폭이 32px 씩 넓어진다.
 *
 * 섹션(.gcp-section)만 그만큼 밖으로 뺀다. 섹션은 제 안쪽 여백 16px 을 가지고
 * 있어서, 밖으로 빼야 그 안의 글이 제목과 같은 선에 선다.
 *
 * ⚠️ 묶음(.gcp-rankpage 등) 자체에 음수 margin 을 주면 안 된다. 섹션에 담기지
 * 않은 것들 — 신작 화면의 달력·필터 칩·주간 카드 — 까지 딸려 나가 카드 가장자리에
 * 붙어 버린다 (2026-08-24 지적).
 *
 * :has() 를 못 읽는 브라우저에서는 카드 여백이 32px 로 남는다. 폭만 덜 벌 뿐
 * 제목과 섹션은 여전히 나란하다.
 */
@media (max-width: 782px) {
  .gcp-entry:has(.gcp-rankpage),
  .gcp-entry:has(.gcp-alertpage),
  .gcp-entry:has(.gcp-newgames),
  .gcp-entry:has(.gcp-updatepage),
  .gcp-entry:has(.gcp-newsdays) {
    padding-left: var(--gcp-s4);
    padding-right: var(--gcp-s4);
  }
  .gcp-rankpage > .gcp-section,
  .gcp-alertpage > .gcp-section,
  .gcp-updatepage > .gcp-section,
  .gcp-newsdays > .gcp-section {
    margin-left: calc(-1 * var(--gcp-s4));
    margin-right: calc(-1 * var(--gcp-s4));
  }
}

/* --- 게임 뉴스 ---
 *
 * 제목과 링크뿐이다. 남의 기사라 본문을 옮기지 않는다.
 *
 * 처음에는 맨 목록으로 뒀더니 밑줄 친 파란 링크가 줄줄이 서서 사이트의 다른
 * 화면과 따로 놀았다. 줄 전체를 누를 수 있게 하고 밑줄을 걷어 순위·업데이트
 * 목록과 같은 결로 맞춘다.
 */
.gcp-newsdays .gcp-section { margin: 0 0 var(--gcp-s8); }
.gcp-newsdays .gcp-section > h2 { margin-top: 0; }
.gcp-newsdays .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);
}