/*
 * 쿠폰 상세 화면.
 *
 * 좁은 화면이 기본이다. 클릭의 82%가 모바일이라 미디어 쿼리 밖의 규칙이
 * 모바일을 그리고, 넓은 화면은 min-width 로 얹는다. 순서를 뒤집으면
 * 대다수 방문자가 "덮어쓰기로 되돌린 화면"을 보게 된다.
 *
 * 표는 마크업 하나다(template-parts/coupon-detail.php). 좁은 화면에서는
 * 셀을 블록으로 바꿔 카드처럼 보이게 하고 넓은 화면에서 표로 되돌린다.
 * 모바일용 마크업을 따로 내보내면 같은 내용이 두 번 나가 검색엔진에
 * 중복으로 보이고, 어느 쪽을 숨겨도 그만큼의 방문자를 버리게 된다.
 *
 * 값은 wds-tokens.css 에만 있다. 여기서 색·간격·글꼴을 새로 만들지 않는다.
 *
 * 이 파일이 의존하는 것은 gcp-base 뿐이다(functions.php). components.css 는
 * is_front_page() 에서만 실리므로 거기 있는 .gcp-section 과 배지 규칙은
 * 이 화면에 닿지 않는다. 필요한 만큼 여기서 다시 쓴다.
 */

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

.gcp-coupon__head {
  display: flex;
  align-items: center;
  gap: var(--gcp-s4);
  margin-bottom: var(--gcp-s5);
}
/*
 * 112px 은 원본 해상도 안이다. Storage 의 로고는 240x240(일부 480)이라
 * 2배 DPR 화면에서 224px 로 그려도 원본을 넘지 않는다.
 */
.gcp-coupon__logo {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: var(--gcp-radius-btn-s);
  object-fit: cover;
  display: block;
  background: var(--gcp-fill);
}
.gcp-coupon__title { min-width: 0; }
/*
 * 로고 옆에 서는 제목이라 base.css 의 h1 보다 한 단계 작다.
 * 40px 로 두면 이름이 긴 게임에서 로고와 제목이 서로 밀어낸다.
 */
.gcp-coupon__title h1 {
  margin: 0;
  font-size: var(--gcp-title3-size);
  line-height: var(--gcp-title3-lh);
  overflow-wrap: anywhere;
}
.gcp-coupon__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-coupon__summary {
  margin: 0 0 var(--gcp-s8);
  padding: var(--gcp-s4);
  background: var(--gcp-bg-alt);
  border-radius: var(--gcp-radius-card);
}

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

/*
 * 이 화면 전체가 이미 .gcp-entry 라는 흰 카드 안이다(single-coupon.php).
 * 카드 안에 흰 카드를 또 깔면 경계가 보이지 않으므로, 여기서는 간격과
 * 제목만으로 나눈다.
 */
.gcp-coupon .gcp-section {
  margin: 0 0 var(--gcp-s8);
}
.gcp-coupon .gcp-section:last-child { margin-bottom: 0; }
/* 섹션 사이 간격은 위 margin 이 이미 만든다. 제목의 기본 위 여백은 뺀다 */
.gcp-coupon .gcp-section > h2 {
  margin-top: 0;
}

/* --- 코드 표: 좁은 화면(기본) --- */

/*
 * 셀을 블록으로 바꾸면 브라우저가 이 요소들을 더 이상 표로 다루지 않는다.
 * 그래서 열 이름이 보조기기에서도 사라진다. data-label 을 ::before 로
 * 되살리는 것이 그 자리를 메운다 — 생성 콘텐츠는 낭독기가 읽는다.
 */
.gcp-codes {
  display: block;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
/* 열 이름은 아래에서 셀마다 data-label 로 다시 나온다 */
.gcp-codes thead { display: none; }
.gcp-codes tbody { display: block; }

/*
 * 한 줄이 카드 하나다.
 *
 * 1열은 코드 · 보상 · 만료가 위에서 아래로, 2열은 복사 버튼이 그 전부에
 * 걸쳐 선다. 만료 칸을 코드 옆에 붙이지 않은 이유는 값이 'D-2' 로 짧지만은
 * 않기 때문이다 — '만료일 미확인', '7월 20일 추가' 가 오면 그 열이 코드가
 * 쓸 폭을 가져간다. 이 페이지에서 제일 중요한 것은 코드다.
 */
.gcp-codes tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: var(--gcp-s3);
  align-items: start;
  padding: var(--gcp-s4);
  border: 1px solid var(--gcp-border);
  border-radius: var(--gcp-radius-card);
}
.gcp-codes tbody tr + tr { margin-top: var(--gcp-s3); }
.gcp-codes td { display: block; }

/* 값이 빈 칸에는 이름을 붙이지 않는다. 만료·복사 칸이 그렇고, 보상이
 * 없을 때도 그렇다 — 값 없이 이름만 뜨는 줄이 생긴다 */
.gcp-codes td[data-label]:not([data-label=""])::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--gcp-s1);
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-caption1-size);
  line-height: var(--gcp-caption1-lh);
  font-weight: 600;
}

.gcp-code__code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--gcp-headline1-size);
  line-height: var(--gcp-headline1-lh);
  font-weight: 700;
  color: var(--gcp-label-strong);
  /* 코드가 길어도 카드를 밀지 않는다. 붙일 데가 없으면 그때만 끊는다 */
  overflow-wrap: anywhere;
}

.gcp-code__reward {
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
}
/* 보상이 비면 빈 줄이 남지 않게 간격도 주지 않는다 */
.gcp-code__reward:not(:empty) { margin-top: var(--gcp-s3); }

.gcp-code__when { margin-top: var(--gcp-s3); }

.gcp-code__act {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
}

/* --- 만료 배지 --- */

/*
 * 값은 components.css 의 .gcp-dday 와 같다. 같은 "얼마나 급한가" 를 홈과
 * 상세가 다른 색으로 말하면 한쪽만 고쳐 놓고 다른 쪽이 조용히 어긋난다.
 * 클래스가 갈린 것은 마크업이 .gcp-when 을 내기 때문이고, 값을 물려받지
 * 못하는 것은 components.css 가 이 화면에 실리지 않기 때문이다.
 *
 * 색은 거들기만 한다. 급한지 아닌지는 배지 안의 글자가 그대로 말한다.
 */
.gcp-when {
  display: inline-block;
  padding: var(--gcp-s1) var(--gcp-s3);
  border-radius: var(--gcp-radius-pill);
  font-size: var(--gcp-label1-size);
  line-height: var(--gcp-label1-lh);
  font-weight: 600;
  white-space: nowrap;
  background: var(--gcp-fill);
  color: var(--gcp-label-neutral);
}
.gcp-when--danger { background: var(--gcp-negative); color: var(--gcp-bg); }
.gcp-when--warn { background: var(--gcp-cautionary); color: var(--gcp-bg); }
.gcp-when--normal { background: var(--gcp-fill); color: var(--gcp-label-neutral); }
.gcp-when--expired { background: var(--gcp-fill); color: var(--gcp-label-neutral); }

/* --- 복사 버튼 --- */

/*
 * 손가락으로 눌리는 크기를 지킨다(최소 44px 높이).
 * 폭 72px 은 글자가 '복사' 에서 '복사됨' 으로 바뀌어도 버튼이 넓어지지
 * 않는 값이다. 넓어지면 누르는 순간 줄 전체가 밀린다.
 *
 * 버튼은 코드를 가리지 않는다. 스크립트가 없거나 클립보드가 막혀도
 * 코드는 옆에 그대로 보이므로 읽고 옮겨 적을 수 있다.
 */
.gcp-copy {
  min-width: 72px;
  min-height: 44px;
  padding: 0 var(--gcp-s3);
  border: 0;
  border-radius: var(--gcp-radius-btn-s);
  background: var(--gcp-label-normal);
  color: var(--gcp-bg);
  font-family: var(--gcp-font);
  font-size: var(--gcp-label1-size);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.gcp-copy:hover { background: var(--gcp-label-neutral); }
.gcp-copy:focus-visible {
  outline: 2px solid var(--gcp-primary);
  outline-offset: 2px;
}
/* 성공은 초록 위 검정이다. 흰 글자는 이 초록에서 읽기 어렵다 */
.gcp-copy.is-done { background: var(--gcp-positive); color: var(--gcp-label-strong); }
.gcp-copy.is-error { background: var(--gcp-negative); color: var(--gcp-bg); }

@media (prefers-reduced-motion: reduce) {
  .gcp-copy { transition: none; }
}

/* --- 만료된 코드 --- */

.gcp-expired {
  margin: 0 0 var(--gcp-s8);
  padding: var(--gcp-s4);
  border: 1px solid var(--gcp-border);
  border-radius: var(--gcp-radius-card);
}
.gcp-expired summary {
  /* 접었다 펴는 자리도 손가락으로 눌린다 */
  padding: var(--gcp-s2) 0;
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
  font-weight: 600;
  cursor: pointer;
}
.gcp-expired .gcp-codes { margin-top: var(--gcp-s3); }
/* 테두리 안의 테두리를 겹치지 않게, 여기서는 줄만 긋는다 */
.gcp-expired .gcp-codes tr {
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-radius: 0;
}
.gcp-expired .gcp-codes tbody tr + tr {
  margin-top: 0;
  padding-top: var(--gcp-s4);
  border-top: 1px solid var(--gcp-border-soft);
}

/* --- 등록 방법 · FAQ · 관련 게임 --- */

.gcp-steps {
  margin: 0;
  padding-left: var(--gcp-s6);
}
.gcp-steps li + li { margin-top: var(--gcp-s2); }
.gcp-note {
  margin: var(--gcp-s4) 0 0;
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
}

.gcp-faq { margin: 0; }
.gcp-faq dt {
  margin-top: var(--gcp-s6);
  font-weight: 700;
}
.gcp-faq dt:first-child { margin-top: 0; }
/*
 * Q 는 CSS 로만 붙인다. 질문 문구는 JSON-LD 의 Question.name 으로도
 * 나가는데 거기까지 "Q" 가 섞이면 검색엔진이 읽는 질문이 망가진다.
 * 화면에서만 보이면 되는 표시라 ::before 가 맞는 자리다.
 */
.gcp-faq dt::before {
  content: "Q";
  margin-right: var(--gcp-s2);
  color: var(--gcp-primary);
}
.gcp-faq dd {
  margin: var(--gcp-s2) 0 0;
  color: var(--gcp-label-neutral);
  font-size: var(--gcp-body1-size);
  line-height: var(--gcp-body1-lh);
}

/* --- 스토어 정보 --- */

/*
 * 마크업은 게임 정보 화면과 같은 것을 쓴다(gcp_render_game_store). 규칙은
 * game-page.css 에 같은 것이 있는데 그 파일을 여기서 받지 않는다 — 두
 * 화면은 같은 요청에 함께 실리지 않아서, 합치면 어느 쪽이든 안 쓰는 절반을
 * 내려받는다(functions.php 의 자원 등록 주석). 이 파일이 components.css 의
 * .gcp-section 을 다시 쓰는 것과 같은 자리다.
 */

/*
 * 남의 글이다. 왼쪽 선으로 우리 문장과 갈라 놓는다. 출처는 접지 않는다 —
 * 인용은 출처를 밝혀야 인용이다.
 */
.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-related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gcp-s2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gcp-related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--gcp-s4);
  border: 1px solid var(--gcp-border);
  border-radius: var(--gcp-radius-btn);
  color: var(--gcp-label-normal);
  font-size: var(--gcp-body1-size);
  font-weight: 600;
}
.gcp-related a:hover {
  background: var(--gcp-label-normal);
  border-color: var(--gcp-label-normal);
  color: var(--gcp-bg);
  text-decoration: none;
}

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

/*
 * 경계는 782/783px 이다. base.css 와 components.css 가 이미 782px 을 쓰고
 * 있어서, 다른 값을 하나 더 만들면 제목 크기가 바뀌는 폭과 표가 바뀌는 폭이
 * 어긋나 화면이 두 번 접힌다.
 *
 * 여기서 셀을 표로 되돌린다. 이 블록이 닿지 않는 폭에서는 위의 카드
 * 배치가 그대로 남는데, 카드는 어느 폭에서도 깨지지 않으므로 그쪽이
 * 안전한 기본값이다.
 */
@media (min-width: 783px) {
  .gcp-coupon__title h1 {
    font-size: var(--gcp-title1-size);
    line-height: var(--gcp-title1-lh);
  }

  .gcp-codes { display: table; }
  .gcp-codes thead { display: table-header-group; }
  .gcp-codes tbody { display: table-row-group; }
  .gcp-codes tr {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .gcp-codes tbody tr + tr { margin-top: 0; }
  .gcp-codes th,
  .gcp-codes td {
    display: table-cell;
    padding: var(--gcp-s3) var(--gcp-s4);
    vertical-align: middle;
  }
  /*
   * 열 이름이 머리줄로 돌아왔으므로 셀마다 다시 붙이지 않는다.
   * 선택자를 위와 똑같이 적는다. 짧게 줄이면 우선순위가 낮아져 이 규칙이
   * 지고, 넓은 화면에서 이름이 값 위에 한 번 더 붙는다.
   */
  .gcp-codes td[data-label]:not([data-label=""])::before { content: none; }

  .gcp-codes th {
    background: var(--gcp-fill);
    color: var(--gcp-label-neutral);
    text-align: left;
    font-size: var(--gcp-label1-size);
    line-height: var(--gcp-label1-lh);
    font-weight: 600;
  }
  .gcp-codes tbody td { border-top: 1px solid var(--gcp-border-soft); }

  /* 코드와 보상이 폭을 나눠 갖고, 만료와 복사는 내용만큼만 쓴다 */
  .gcp-code__reward:not(:empty) { margin-top: 0; }
  .gcp-code__when {
    margin-top: 0;
    width: 1%;
    white-space: nowrap;
  }
  .gcp-code__act {
    width: 1%;
    white-space: nowrap;
    text-align: right;
  }

  .gcp-expired { padding: var(--gcp-s4) var(--gcp-s6); }
  .gcp-expired .gcp-codes tbody tr + tr { padding-top: 0; border-top: 0; }
}

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