/* ==========================================================================
   글 목록 지면 — Articles 페이지, 검색 결과 (GB-20 1조각)
   정본: Figma S01 176:2, S02 176:341, S03 177:108, S04 177:183, Articles 03.
   UI 글꼴은 상단·하단과 같은 --gb-font-family-ui (시안 Inter 자리).
   ========================================================================== */

.gb-index {
  --gb-index-pad: 80px;
  --gb-label-ls: 0.12em; /* 시안 11px 에 1.32px */
  background: var(--gb-paper);
}

.gb-index__inner,
.gb-index__body {
  max-inline-size: calc(var(--gb-page-max) + 2 * var(--gb-index-pad));
  margin-inline: auto;
  padding-inline: var(--gb-index-pad);
}

/* 라벨 공통: 11px, 대문자, 넓은 자간 */
.gb-index__eyebrow,
.gb-topics__head,
.gb-topics__count,
.gb-topics__promo-label,
.gb-row__date,
.gb-row__eyebrow,
.gb-row__minutes {
  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;
}

/* ── 남색 머리 (S01 176:4) ────────────────────────────── */

.gb-index__head {
  background: var(--gb-navy);
  color: var(--gb-paper);
}
.gb-index__head .gb-index__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 48px 68px;
}
.gb-index__eyebrow { margin: 0; color: var(--gb-gold); }
.gb-index__title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gb-paper);
  overflow-wrap: anywhere; /* 띄어쓰기 없는 긴 검색어가 폭을 밀지 않게 */
}
.gb-index__standfirst {
  max-inline-size: none; /* 고객 10-03: 한 줄에 들어가면 한 줄 */
  overflow-wrap: anywhere;
  margin: 0 0 24px; /* 시안: 문장과 검색 칸 사이 간격 16 + 8 + 16 */
  font-family: var(--gb-font-serif);
  font-size: 20px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--gb-paper) 80%, transparent);
}

/* 검색 칸: 입력 760 + 버튼 110 */
.gb-search {
  display: flex;
  inline-size: min(870px, 100%);
  margin: 0;
  scroll-margin-block-start: 96px;
}
/* Astra 다크 모드 입력 규칙(.astra-dark-mode-enable input[type="search"], 0,2,1)을 이겨야 흰 칸이 된다 */
.gb-index .gb-search .gb-search__input {
  flex: 1;
  min-inline-size: 0;
  block-size: 50px;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: var(--gb-white);
  font-family: var(--gb-font-family-ui);
  font-size: 15px;
  line-height: normal;
  color: var(--gb-ink);
}
/* Astra 다크 모드는 입력 글자색과 포커스 테두리·배경을 !important 로 칠한다. 회원 화면(components.css)과 같은 방식으로 이 칸에서만 이긴다 */
.gb-index .gb-search .gb-search__input,
.gb-index .gb-search .gb-search__input:focus {
  background-color: var(--gb-white) !important;
  border: 0 !important;
  color: var(--gb-ink) !important;
}
.gb-index .gb-search .gb-search__input::placeholder { color: var(--gb-gray-600); }
.gb-index .gb-search .gb-search__input:focus-visible { outline: 2px solid var(--gb-gold); outline-offset: 0; }
.gb-index .gb-search__button {
  flex: 0 0 110px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gb-gold);
  border-radius: 0;
  background: transparent;
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--gb-paper);
  cursor: pointer;
}
.gb-index .gb-search__button:hover { background: color-mix(in srgb, var(--gb-gold) 14%, transparent); }
.gb-index .gb-search__button:focus-visible { outline: 2px solid var(--gb-paper); outline-offset: 2px; }

/* 허브 칩 (Articles 머리) */
.gb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.gb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--gb-paper) 40%, transparent);
  font-family: var(--gb-font-family-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--gb-paper);
  text-decoration: none;
}
.gb-chip__count { opacity: 0.72; font-size: 12px; }
.gb-chip:hover { border-color: var(--gb-paper); color: var(--gb-paper); }
.gb-chip.is-current { background: var(--gb-paper); border-color: var(--gb-paper); color: var(--gb-navy); }
.gb-chip:focus-visible { outline: 2px solid var(--gb-paper); outline-offset: 2px; }

/* ── 본문: 허브 목록 260 + 간격 56 + 목록 ─────────────── */

.gb-index__body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  padding-block: 56px 96px;
}
.gb-index__body--none { grid-template-columns: minmax(0, 560px); }
.gb-index__body--single { grid-template-columns: minmax(0, 1fr); }

/* 분류 보관 편수 줄 (K03, GB-40). 모바일 허브 선택 상자(S03 177:128)와 같은 상자 */
.gb-index__total {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  margin: 0 0 16px;
  padding: 0 14px;
  border: 1px solid var(--gb-gray-200);
  background: var(--gb-white);
  font-family: var(--gb-font-family-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--gb-ink);
}
.gb-index__total .gb-topics__count { margin-inline-start: 8px; font-size: 13px; letter-spacing: 0; color: var(--gb-ink); }
.gb-index__empty {
  margin: 0;
  font-family: var(--gb-font-serif);
  font-size: 19px;
  color: var(--gb-gray-600);
}

/* 허브 목록 (S01 176:41) */
.gb-topics__head { margin: 0 0 12px; color: var(--gb-navy); }
.gb-topics__list { margin: 0; padding: 0; list-style: none; }
.gb-topics__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-block-end: 1px solid var(--gb-gray-200);
  font-family: var(--gb-font-serif);
  font-size: 17px;
  line-height: normal;
  color: var(--gb-ink);
  text-decoration: none;
}
.gb-topics__item:hover { background: var(--gb-state-hover-tint); color: var(--gb-ink); }
.gb-topics__item.is-current {
  padding-inline-start: 12px;
  border-block-end-color: transparent;
  border-inline-start: 3px solid var(--gb-navy);
  background: var(--gb-white);
  color: var(--gb-navy);
}
.gb-topics__count { color: var(--gb-gray-600); }
.gb-topics__item:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: -2px; }

/* Learning Path 안내 (S01 176:69) */
.gb-topics__promo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block-start: 32px;
  padding: 24px;
  background: var(--gb-navy);
  text-decoration: none;
}
.gb-topics__promo-label { color: var(--gb-gold); }
.gb-topics__promo-text {
  font-family: var(--gb-font-display-family);
  font-size: 21px;
  line-height: 1.25;
  color: var(--gb-paper);
}
.gb-topics__promo-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--gb-gold);
}
.gb-topics__promo:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; }

/* 모바일 선택 상자 — 데스크톱에서는 숨김 */
.gb-topics__select { display: none; }

/* ── 글 목록 (S01 176:74) ─────────────────────────────── */

.gb-list__month + .gb-list__month { margin-block-start: 48px; }
.gb-list__month-head {
  margin: 0;
  padding-block-end: 12px;
  border-block-end: 2px solid var(--gb-ink);
  font-family: var(--gb-font-display-family);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  color: var(--gb-ink);
}
.gb-list__items { margin: 0; padding: 0; list-style: none; }

.gb-row { margin: 0; border-block-end: 1px solid var(--gb-gray-200); }
.gb-row__link {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 70px 140px;
  column-gap: 24px;
  align-items: start;
  padding-block: 20px;
  color: inherit;
  text-decoration: none;
}
.gb-row__date { color: var(--gb-ink); }
.gb-row__main { display: flex; flex-direction: column; gap: 6px; }
.gb-row__eyebrow { color: var(--gb-gray-600); }
.gb-row__title {
  font-family: var(--gb-font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gb-ink);
}
.gb-row__minutes { color: var(--gb-gray-600); }
.gb-row__thumb {
  display: block;
  inline-size: 140px;
  block-size: 88px;
  overflow: hidden;
  background: var(--gb-gray-50);
}
.gb-row__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gb-row__link:hover .gb-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gb-row__link:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; }

/* ── 쪽 번호 (S01 176:276) ────────────────────────────── */

.gb-pager {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block-start: 48px;
  font-family: var(--gb-font-family-ui);
  font-weight: 500;
  line-height: normal;
}
.gb-pager__nums { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gb-pager__num {
  display: block;
  padding: 8px 14px;
  border: 1px solid var(--gb-gray-200);
  font-size: 13px;
  color: var(--gb-ink);
  text-decoration: none;
}
.gb-pager__num.is-current { border-color: var(--gb-navy); background: var(--gb-navy); color: var(--gb-white); }
a.gb-pager__num:hover { border-color: var(--gb-navy); color: var(--gb-navy); }
.gb-pager__next,
.gb-pager__prev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gb-navy);
  text-decoration: none;
}
.gb-pager__count,
.gb-pager__prev { display: none; }

/* ── 1024~1279px: 허브 목록 옆 글 줄은 썸네일을 뺀다 ──────────
   목록 칸이 548px 라 4열이면 제목이 176px 로 4줄 꺾인다(2026-10-04 전수조사).
   태블릿 시안(S03)처럼 이미지 없이 두면 제목 340px. 사이드바 없는 분류 목록은 그대로 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .gb-index__body:not(.gb-index__body--single):not(.gb-index__body--none) .gb-row__link { grid-template-columns: 90px minmax(0, 1fr) 70px; }
  .gb-index__body:not(.gb-index__body--single):not(.gb-index__body--none) .gb-row__thumb { display: none; }
}

/* ── 1023px 이하: 한 열 ───────────────────────────────── */

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

  .gb-index__head .gb-index__inner { gap: 12px; padding-block: 32px; }
  .gb-index__title { font-size: 34px; line-height: normal; }
  .gb-index__standfirst { margin-block-end: 4px; font-size: 17px; }
  .gb-index__note { display: none; }

  .gb-search { inline-size: 100%; }
  .gb-index .gb-search .gb-search__input { padding: 15px 14px; }
  .gb-index .gb-search__button { flex: 0 0 auto; padding-inline: 18px; background: var(--gb-navy); }

  /* 칩 대신 아래 선택 상자 */
  .gb-chips { display: none; }

  .gb-index__body,
  .gb-index__body--none { display: block; padding-block: 24px 40px; }

  /* 허브: 결과가 있으면 한 줄 선택 상자(S03 177:128), 결과 없음은 목록 그대로(S04) */
  .gb-topics:not(.gb-topics--open) .gb-topics__side { display: none; }
  .gb-topics__select {
    display: block;
    margin-block-end: 16px;
    border: 1px solid var(--gb-gray-200);
    background: var(--gb-white);
  }
  .gb-topics__select summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 44px;
    padding: 0 14px;
    font-family: var(--gb-font-family-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--gb-ink);
    list-style: none;
    cursor: pointer;
  }
  .gb-topics__select summary::-webkit-details-marker { display: none; }
  .gb-topics__select summary:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: -2px; }
  .gb-topics__select .gb-topics__count { margin-inline-start: 8px; font-size: 13px; letter-spacing: 0; color: var(--gb-ink); }
  .gb-topics__select-label {
    font-family: var(--gb-font-family-ui);
    font-size: 11px;
    letter-spacing: var(--gb-label-ls);
    text-transform: uppercase;
    color: var(--gb-navy);
  }
  .gb-topics__select-label::after { content: " ▾"; }
  .gb-topics__select[open] .gb-topics__select-label::after { content: " ▴"; }
  .gb-topics__select .gb-topics__list { border-block-start: 1px solid var(--gb-gray-200); }
  .gb-topics__select .gb-topics__item { min-block-size: 44px; align-items: center; }
  .gb-topics__select .gb-topics__item:last-child { border-block-end: 0; }

  /* 글 줄: 날짜 · 라벨 / 제목 / 분량. 이미지 없음 (S03 177:132) */
  /* 줄 상자 높이는 링크 글꼴이 정한다. 본문 19px 그대로면 10px 라벨이 두 줄일 때 사이가 27px 로 벌어진다 */
  .gb-row__link { display: block; font-family: var(--gb-font-family-ui); font-size: 10px; line-height: 1.5; }
  .gb-row__date,
  .gb-row__eyebrow,
  .gb-row__minutes { font-size: 10px; line-height: 1.5; letter-spacing: 0.12em; }
  .gb-row__date { color: var(--gb-gray-600); }
  .gb-row__date::after { content: ""; display: inline-block; inline-size: 1px; block-size: 9px; margin-inline: 12px; vertical-align: -1px; background: currentColor; opacity: 0.45; } /* 가운뎃점 대신 세로선 (2026-10-04, .gb-sep 과 같은 모양) */
  .gb-row__main { display: inline; }
  .gb-row__title { display: block; margin-block-start: 8px; font-size: 20px; line-height: normal; }
  .gb-row__minutes { display: block; margin-block-start: 8px; }
  .gb-row__thumb { display: none; }
  .gb-row__minutes:empty { display: none; }

  /* 쪽 번호: 1 / 3 + 다음 (S03 177:148) */
  .gb-pager { margin-block-start: 24px; font-size: 13px; }
  .gb-pager__nums { display: none; }
  .gb-pager__count { display: inline; color: var(--gb-ink); }
  .gb-pager__prev { display: inline-flex; }
  .gb-pager__next,
  .gb-pager__prev { font-size: 13px; min-block-size: 44px; }
}

/* Home 검색 칸에서 고른 단계 풀기 (GB-20 4조각) */
.gb-index__stage-clear { color: var(--gb-navy); text-decoration: underline; text-underline-offset: 3px; }

/* 모바일만 월 머리 없음(S03 177:132). 태블릿은 월 구분 표시 — 고객 2026-10-03 */
@media (max-width: 767px) {
  .gb-list__month + .gb-list__month { margin-block-start: 0; }
  .gb-list__month-head { display: none; }
}