/* ==========================================================================
   Topic Hub (GB-11, GB-20 2조각)
   정본: Figma I04 160:321 (상태 1, 1440), I05 160:668 (상태 2~4).
   모바일 정본: Figma 00 Cover H01 184:471(상태 1), H02 185:521(2), H03 185:673(3), H04 185:824(4).
   ========================================================================== */

.gb-hub {
  --gb-hub-pad: 80px;
  --gb-label-ls: 0.12em;
  background: var(--gb-paper);
}
.gb-hub__inner {
  max-inline-size: calc(var(--gb-page-max) + 2 * var(--gb-hub-pad));
  margin-inline: auto;
  padding-inline: var(--gb-hub-pad);
}

/* 라벨 공통 11px 대문자 */
.gb-hub__eyebrow,
.gb-hub__label,
.gb-hub__stats dt,
.gb-part__meta,
.gb-badge,
.gb-cover__label,
.gb-series-card__meta,
.gb-card__eyebrow,
.gb-card__meta,
.gb-feature__eyebrow,
.gb-feature__meta,
.gb-hub__title-count {
  font-family: var(--gb-font-family-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: var(--gb-label-ls);
  text-transform: uppercase;
}

/* 링크 공통: 밑줄 없음, 색 유지 */
.gb-hub a { text-decoration: none; }
.gb-hub a:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; }

/* ── 남색 머리 (160:376) ──────────────────────────────── */

.gb-hub__head { background: var(--gb-navy); color: var(--gb-paper); }
.gb-hub__head-inner {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  padding-block: 50px 64px;
}
.gb-hub__head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-inline-size: 720px;
}
.gb-hub__eyebrow { margin: 0; color: var(--gb-gold); }
.gb-hub__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);
  overflow-wrap: anywhere;
}
.gb-hub__title-count { margin-inline-start: 12px; color: var(--gb-gold); vertical-align: middle; }
.gb-hub__intro {
  max-inline-size: 620px;
  margin: 0;
  font-family: var(--gb-font-serif);
  font-size: 20px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--gb-paper) 80%, transparent);
}
.gb-hub__stats {
  display: flex;
  gap: 48px;
  inline-size: min(620px, 100%);
  margin: 6px 0 0;
  padding-block-start: 20px;
  border-block-start: 1px solid color-mix(in srgb, var(--gb-paper) 20%, transparent);
}
.gb-hub__stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.gb-hub__stats dt { color: color-mix(in srgb, var(--gb-paper) 70%, transparent); }
.gb-hub__stats dd {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 34px;
  line-height: normal;
  color: var(--gb-paper);
  text-transform: uppercase;
}
.gb-hub__head-art { flex: 0 0 496px; block-size: 300px; margin-block-start: -2px; }
.gb-art { display: block; inline-size: 100%; block-size: 100%; }
.gb-hub__band,
.gb-series-card__thumb { display: none; }

/* ── 구획 탭 (160:387) ────────────────────────────────── */

.gb-hub__tabs { background: var(--gb-white); border-block-end: 1px solid var(--gb-gray-200); }
.gb-hub__tabs ul { display: flex; gap: 40px; margin-block: 0; list-style: none; overflow-x: auto; }
.gb-hub__tabs a {
  display: flex;
  align-items: center;
  block-size: 56px;
  border-block-end: 3px solid transparent;
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-gray-600);
  white-space: nowrap;
}
.gb-hub__tabs a.is-current { padding-inline-end: 16px; border-block-end-color: var(--gb-navy); color: var(--gb-navy); }
.gb-hub__tabs a:hover { color: var(--gb-navy); }
.gb-hub__tabs a:focus-visible { outline-offset: -3px; } /* 가로 스크롤 상자가 바깥 테두리를 자른다 */

/* ── 구획 공통 ────────────────────────────────────────── */

.gb-hub__section { padding-block: 64px; scroll-margin-block-start: 24px; }
.gb-hub__section--paper { background: var(--gb-paper); }
.gb-hub__section--white { background: var(--gb-white); }
.gb-hub__section--related { padding-block-start: 0; padding-block-end: 80px; }
.gb-hub__label { margin: 0 0 10px; color: var(--gb-navy); }
.gb-hub__h2 {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 44px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gb-ink);
}
.gb-hub__section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gb-hub__all,
.gb-hub__more a,
.gb-series-card__more,
.gb-related__count {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  gap: 8px;
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-navy);
}

/* ── 최신 연재: 회차 목록 780 + 표지 452 (160:474) ───── */

.gb-hub__series {
  display: grid;
  grid-template-columns: minmax(0, 780px) 452px;
  justify-content: space-between;
  gap: 48px;
  margin-block-start: 28px;
  align-items: start;
}
.gb-parts { margin: 0; padding: 0; list-style: none; }
.gb-part {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 18px;
  border-block-end: 1px solid var(--gb-gray-200);
  color: var(--gb-ink);
}
.gb-part__num {
  flex: 0 0 52px;
  font-family: var(--gb-font-display-family);
  font-size: 30px;
  line-height: normal;
  color: var(--gb-navy);
}
.gb-part__text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-inline-size: 0; }
.gb-part__title { font-family: var(--gb-font-serif); font-size: 21px; font-weight: 600; line-height: normal; color: var(--gb-ink); }
.gb-part__meta { color: var(--gb-gray-600); }
.gb-part:hover .gb-part__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gb-badge { flex: 0 0 auto; margin-inline-end: 19px; padding: 5px 10px; border: 1px solid var(--gb-gold); color: var(--gb-ink); }

.gb-cover { background: var(--gb-navy); color: var(--gb-paper); }
.gb-cover__art { block-size: 280px; }
.gb-cover__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 32px 32px; }
.gb-cover__label { margin: 0; color: var(--gb-gold); }
.gb-cover__title { margin: 0; font-family: var(--gb-font-display-family); font-size: 26px; line-height: 1.2; color: var(--gb-paper); }
.gb-cover__span { margin: 0; font-family: var(--gb-font-family-ui); font-size: 14px; line-height: normal; color: color-mix(in srgb, var(--gb-paper) 75%, transparent); }
.gb-hub .gb-cover__button {
  margin-block-start: 6px;
  padding: 15px 26px;
  border: 1px solid var(--gb-gold);
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gb-paper);
}
.gb-hub .gb-cover__button:hover { background: color-mix(in srgb, var(--gb-gold) 14%, transparent); color: var(--gb-paper); }
.gb-hub .gb-cover__button:focus-visible { outline-color: var(--gb-paper); }

/* ── 전체 연재: 한 줄 4개 (160:535) ───────────────────── */

.gb-series-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.gb-series-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 300px;
  border: 1px solid var(--gb-gray-200);
  background: var(--gb-white);
  color: var(--gb-ink);
}
.gb-series-card__art { display: block; block-size: 120px; }
.gb-series-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
.gb-series-card__meta { color: var(--gb-gray-600); }
.gb-series-card__title { font-family: var(--gb-font-display-family); font-size: 22px; line-height: 1.18; color: var(--gb-ink); }
.gb-series-card__more { margin-block-start: 2px; }
.gb-series-card:hover { border-color: var(--gb-navy); }
.gb-hub__more { margin: 28px 0 0; text-align: end; }

/* 정렬 상자 (I04 160:483): SORT 11px + 테두리 상자 13px, 높이 34 */
.gb-sort { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gb-sort__label {
  font-family: var(--gb-font-family-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--gb-label-ls);
  text-transform: uppercase;
  color: var(--gb-gray-600);
}
.gb-sort__menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  block-size: 34px;
  min-block-size: 0;
  padding: 0 12px;
  border: 1px solid var(--gb-gray-200);
  line-height: 16px;
  background: var(--gb-white);
  font-family: var(--gb-font-family-ui);
  font-size: 13px;
  color: var(--gb-ink);
  cursor: pointer;
  list-style: none;
}
.gb-sort__menu summary::-webkit-details-marker { display: none; }
.gb-sort__menu summary:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; }
.gb-sort__caret { font-size: 12px; color: var(--gb-navy); }
.gb-sort__menu ul {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 5;
  min-inline-size: 100%;
  margin: 4px 0 0;
  padding: 4px 0;
  border: 1px solid var(--gb-gray-200);
  background: var(--gb-white);
  list-style: none;
}
.gb-sort__menu a {
  display: block;
  padding: 8px 12px;
  font-family: var(--gb-font-family-ui);
  font-size: 13px;
  color: var(--gb-ink);
  white-space: nowrap;
}
.gb-sort__menu a[aria-current] { color: var(--gb-navy); font-weight: 500; }
.gb-sort__menu a:hover { background: var(--gb-gray-50); }
#all-series .gb-hub__section-head + .gb-series-grid { margin-block-start: 28px; }

/* ── 최신 글 3장 (160:617) ────────────────────────────── */

.gb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.gb-card { display: flex; flex-direction: column; gap: 12px; color: var(--gb-ink); }
.gb-card__img { display: block; aspect-ratio: 405 / 200; overflow: hidden; background: var(--gb-gray-50); }
.gb-card__img img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gb-card__eyebrow { color: var(--gb-gray-600); }
.gb-card__title { font-family: var(--gb-font-serif); font-size: 22px; font-weight: 600; line-height: 1.22; color: var(--gb-ink); }
.gb-card__meta { color: var(--gb-gray-600); }
.gb-card:hover .gb-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── 관련 주제 (160:636) ──────────────────────────────── */

.gb-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.gb-related__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  block-size: 100%;
  padding: 24px;
  border-block-start: 2px solid var(--gb-ink);
  background: var(--gb-white);
}
.gb-related__name { font-family: var(--gb-font-display-family); font-size: 24px; line-height: normal; color: var(--gb-ink); }
.gb-related__intro { font-family: var(--gb-font-family-ui); font-size: 14px; line-height: normal; color: var(--gb-gray-600); }
.gb-related__count { margin-block-start: 4px; }

/* ── 상태 3·4: 대표 글 1 + 안내 (I05) ────────────────── */

/* 왼쪽 여백은 .gb-hub__inner 가운데 정렬과 같은 값 — 1440 보다 넓은 화면에서도 제목 왼쪽선에 맞는다 (고객 10-07 요청 2-2: 1920 에서 240 어긋남) */
.gb-hub__narrow { max-inline-size: calc(760px + 2 * var(--gb-hub-pad)); margin-inline: max(0px, (100% - var(--gb-page-max)) / 2 - var(--gb-hub-pad)) 0; }
.gb-feature { display: flex; flex-direction: column; gap: 8px; padding-block-start: 20px; border-block-start: 1px solid var(--gb-ink); color: var(--gb-ink); }
.gb-feature__eyebrow { color: var(--gb-navy); }
.gb-feature__title { font-family: var(--gb-font-display-family); font-size: 30px; line-height: 1.2; color: var(--gb-ink); }
.gb-feature__meta { color: var(--gb-gray-600); }
.gb-hub__note {
  margin: 24px 0 0;
  padding: 14px 18px;
  background: var(--gb-gray-50);
  font-family: var(--gb-font-serif);
  font-size: 17px;
  color: var(--gb-ink);
}
.gb-hub--state-4 .gb-hub__note { margin-block-start: 0; }

/* ── 1279px 이하: 머리 그림 줄임 ─────────────────────── */

@media (max-width: 1279px) {
  .gb-hub__head-art { flex-basis: 320px; }
  .gb-hub__series { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ── 1023px 이하: H01~H04 ───────────────────────────── */

@media (max-width: 1023px) {
  .gb-hub { --gb-hub-pad: 20px; }

  /* 머리: 그림은 제목 위 96px 띠, 오른쪽 그림은 숨김 */
  .gb-hub__band { display: block; block-size: 96px; }
  .gb-hub__head-inner { display: block; padding-block: 24px 32px; }
  .gb-hub__head-text { gap: 12px; }
  .gb-hub__head-art { display: none; }
  .gb-hub__title { font-size: 40px; line-height: 1.1; }
  .gb-hub__title-count { display: block; margin: 12px 0 0; }
  .gb-hub__intro { font-size: 17px; }
  .gb-hub__stats { gap: 32px; margin-block-start: 0; padding-block-start: 16px; }
  .gb-hub__stats dd { font-size: 26px; }

  /* 탭: 가로 스크롤 */
  .gb-hub__tabs ul { gap: 24px; padding-inline-end: 20px; scrollbar-width: none; }
  .gb-hub__tabs ul::-webkit-scrollbar { display: none; }
  .gb-hub__tabs a { block-size: auto; padding-block: 16px 13px; }
  .gb-hub__tabs a.is-current { padding-inline-end: 0; }

  .gb-hub__section { padding-block: 40px; }
  .gb-hub__section--related { padding-block: 0 48px; }
  .gb-hub__h2 { font-size: 30px; line-height: 1.2; }

  /* 최신 연재: 목록 아래 표지, 표시는 날짜 줄 옆 */
  .gb-hub__series { display: block; margin-block-start: 20px; }
  .gb-part {
    display: grid;
    grid-template-columns: 36px auto 1fr;
    grid-template-areas: "num title title" "num meta badge";
    align-items: center;
    gap: 4px 0;
    padding-block: 14px;
  }
  .gb-part__text { display: contents; }
  .gb-part__num { grid-area: num; align-self: start; margin-inline-end: 14px; font-size: 22px; line-height: 30px; }
  .gb-part__title { grid-area: title; margin-inline-start: 14px; font-size: 18px; line-height: 1.25; }
  .gb-part__meta { grid-area: meta; margin-inline-start: 14px; }
  .gb-badge { grid-area: badge; justify-self: start; margin: 0 0 0 10px; padding: 3px 7px; font-size: 10px; }
  .gb-cover { margin-block-start: 28px; }
  .gb-cover__art { block-size: 160px; }
  .gb-cover__body { padding: 24px 24px 28px; }
  .gb-cover__title { font-size: 24px; }
  .gb-hub .gb-cover__button { margin-block-start: 4px; padding: 14px 24px; }

  /* 전체 연재: 한 줄 목록, 썸네일 96x72 */
  .gb-series-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block-start: 20px; }
  #all-series .gb-sort { margin-block-start: 16px; }
  #all-series .gb-hub__section-head + .gb-series-grid { margin-block-start: 20px; }
  .gb-sort__menu ul { inset-inline-end: auto; inset-inline-start: 0; }
  .gb-series-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-block-size: 0;
    padding-block: 16px;
    border: 0;
    border-block-end: 1px solid var(--gb-gray-200);
    background: transparent;
  }
  .gb-series-card:hover { border-color: var(--gb-gray-200); }
  .gb-series-card:hover .gb-series-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .gb-series-card__art { display: none; }
  .gb-series-card__thumb { display: block; flex: 0 0 96px; block-size: 72px; }
  .gb-series-card__body { flex: 1; gap: 6px; padding: 0; min-inline-size: 0; }
  .gb-series-card__title { font-size: 20px; }
  .gb-hub__more { margin-block-start: 24px; text-align: start; }

  /* 최신 글: 카드 세로, Show all 은 카드 아래 */
  .gb-hub__section--latest .gb-hub__inner { display: flex; flex-direction: column; }
  .gb-hub__section-head { display: contents; }
  .gb-cards { order: 1; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-block-start: 24px; }
  .gb-hub__all { order: 2; align-self: flex-start; margin-block-start: 24px; }
  .gb-card { gap: 10px; }
  .gb-card__img { aspect-ratio: 350 / 172; }
  .gb-card__title { font-size: 20px; }

  /* 관련 주제: 세로 */
  .gb-related { grid-template-columns: minmax(0, 1fr); margin-block-start: 16px; }
  .gb-related__card { padding: 22px 20px; }
  .gb-related__name { font-size: 22px; }
  .gb-related__intro { line-height: 1.4; }

  /* 상태 3·4 */
  .gb-hub__narrow { padding-block: 32px 48px; }
  .gb-hub--state-3 .gb-hub__section,
  .gb-hub--state-4 .gb-hub__section { padding-block: 0; }
  .gb-feature__title { font-size: 24px; }
  .gb-hub__note { padding: 14px 16px; line-height: 1.4; }
}