/* ==========================================================================
   Resources (GB-20 5조각, 페이지 533)
   정본: Figma I09·J09 161:878(데스크톱 1440), R01 206:813(모바일 390).
   표는 페이지 본문 코어 표 블록이다. patterns.css 의 .wp-block-table(가로 스크롤 상자) 위에 I09 표 모양만 얹는다.
   ========================================================================== */

.gb-resources {
  --gb-res-pad: 80px;
  --gb-res-max: calc(var(--gb-page-max) + 2 * var(--gb-res-pad));
  background: var(--gb-paper);
  color: var(--gb-ink);
}
.gb-resources a:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; }

.gb-resources__eyebrow,
.gb-resources__label,
.gb-resources__open,
.gb-resources__more {
  font-family: var(--gb-font-family-ui);
  font-weight: 500;
  line-height: normal;
}
.gb-resources__eyebrow,
.gb-resources__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── 남색 머리 1440x453 (패딩 48/80/56, 간격 60, 글 600 + 사진 620) ── */

.gb-resources__head {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 620fr);
  gap: 60px;
  align-items: center;
  box-sizing: border-box;
  padding: 48px max(var(--gb-res-pad), (100% - var(--gb-page-max)) / 2) 56px;
  background: var(--gb-navy);
  color: var(--gb-paper);
}
/* 대표 이미지가 없으면 글 묶음 1열 */
.gb-resources__head:not(:has(.gb-resources__photo)) { grid-template-columns: minmax(0, 1fr); }
.gb-resources__head-text { display: flex; flex-direction: column; gap: 16px; }
.gb-resources__eyebrow { color: var(--gb-gold); }
.gb-resources__title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gb-paper);
}
.gb-resources__intro { margin: 0; font-family: var(--gb-font-serif); font-size: 20px; line-height: 1.5; color: var(--gb-paper); }
.gb-resources__photo { aspect-ratio: 620 / 349; }
.gb-resources__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── 카드 2개 (패딩 64/80/80, 628 + 24 + 628) ─────────────── */

.gb-resources__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  box-sizing: border-box;
  max-inline-size: var(--gb-res-max);
  margin-inline: auto;
  padding: 64px var(--gb-res-pad) 80px;
}
/* 테두리는 그림 위에 그린다(Figma 안쪽 선) — 그림이 카드 폭 628 을 그대로 쓴다 */
.gb-resources__card {
  display: flex;
  flex-direction: column;
  background: var(--gb-white);
  outline: var(--gb-stroke-hairline);
  outline-offset: -1px;
}
.gb-resources__art { display: block; aspect-ratio: 628 / 240; min-block-size: 0; overflow: hidden; } /* 고른 로고(GB-56)가 세로로 길어도 칸 높이 유지 */
.gb-resources__art .gb-art { display: block; inline-size: 100%; block-size: 100%; }
.gb-resources__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 32px 36px 40px; }
.gb-resources__body .gb-resources__label { color: var(--gb-navy); }
.gb-resources__card-title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--gb-ink);
}
.gb-resources__text { margin: 0 0 6px; font-family: var(--gb-font-serif); font-size: 18px; line-height: 1.5; color: var(--gb-gray-600); }
.gb-resources__open {
  align-self: flex-start;
  margin-block-start: auto;
  padding: 15px 26px;
  background: var(--gb-navy);
  font-size: 14px;
  color: var(--gb-white);
  text-decoration: none;
}
.gb-resources .gb-resources__open:hover,
.gb-resources .gb-resources__open:focus { background: color-mix(in srgb, var(--gb-navy) 85%, var(--gb-white)); color: var(--gb-white); }

/* ── 표 미리보기 (흰 바탕, 패딩 80/80/96, 간격 24) ─────────── */

.gb-resources__preview { background: var(--gb-white); }
.gb-resources__preview > * { box-sizing: border-box; max-inline-size: var(--gb-res-max); margin-inline: auto; padding-inline: var(--gb-res-pad); }
.gb-resources__preview-head { display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; padding-block-start: 80px; }
.gb-resources__preview-text { display: flex; flex-direction: column; gap: 10px; }
.gb-resources__preview .gb-resources__label { color: var(--gb-navy); }
.gb-resources__preview-title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--gb-ink);
}
.gb-resources__more { flex: none; font-size: 14px; color: var(--gb-navy); text-decoration: none; }
.gb-resources .gb-resources__more:hover { color: var(--gb-navy); text-decoration: underline; }
.gb-resources__table { margin-block-start: 24px; }
.gb-resources__table .wp-block-table { margin: 0; }
.gb-resources__table table {
  inline-size: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.gb-resources__table th,
.gb-resources__table td {
  border: 0;
  text-align: start;
  vertical-align: top;
  color: var(--gb-ink);
}
.gb-resources__table thead { border: 0; }
.gb-resources__table thead th {
  padding: 14px 24px;
  background: var(--gb-navy);
  font-family: var(--gb-font-family-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb-paper);
}
.gb-resources__table thead th:first-child { inline-size: 280px; }
.gb-resources__table tbody td {
  padding: 18px 24px;
  font-family: var(--gb-font-serif);
  font-size: 17px;
  line-height: 26px;
}
.gb-resources__table tbody td:first-child { font-size: 18px; font-weight: 600; }
.gb-resources__table tbody tr { background: var(--gb-white); }
.gb-resources__table tbody tr:nth-child(even) { background: var(--gb-gray-50); }
.gb-resources__caption { margin-block: 24px 0; padding-block-end: 96px; font-size: 11px; font-weight: 500; }
.gb-resources__caption a { color: inherit; }

/* ── 노트북 폭 ───────────────────────────────────────── */

@media (max-width: 1279px) {
  .gb-resources { --gb-res-pad: 48px; }
  .gb-resources__title { font-size: 64px; }
}

/* ── 모바일 R01 (390) ────────────────────────────────── */

@media (max-width: 1023px) {
  .gb-resources { --gb-res-pad: 20px; }
  .gb-resources__head { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 20px; }
  .gb-resources__head-text { gap: 14px; }
  .gb-resources__title { font-size: 40px; line-height: 1.1; }
  .gb-resources__intro { font-size: 17px; line-height: 1.5; }
  .gb-resources__panels { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px 20px 40px; }
  .gb-resources__body { gap: 12px; padding: 24px 20px 28px; }
  .gb-resources__card-title { font-size: 28px; }
  .gb-resources__text { font-size: 17px; line-height: 1.5; }
  .gb-resources__open { align-self: stretch; text-align: center; }
  .gb-resources__preview-head { flex-direction: column; gap: 16px; align-items: flex-start; padding-block-start: 40px; }
  .gb-resources__preview-title { font-size: 28px; }
  .gb-resources__table { margin-block-start: 16px; }
  /* 표는 350 상자 안에서만 가로 스크롤(patterns.css .wp-block-table). 열 120/170/170 비율 */
  .gb-resources__table table { min-inline-size: 520px; }
  .gb-resources__table thead th { padding: 12px; }
  .gb-resources__table thead th:first-child { inline-size: 26%; }
  .gb-resources__table tbody td,
  .gb-resources__table tbody td:first-child { padding: 12px; font-size: 15px; line-height: 1.4; }
  .gb-resources__caption { margin-block-start: 16px; padding-block-end: 48px; }
}