/* ==========================================================================
   About (GB-20 5조각, 페이지 1)
   정본: Figma J07 211:1879(데스크톱 1440, I07 + 대표 사진), A01 212:927(모바일 390).
   머리는 Resources(J09)와 같은 배치 — 글 600 + 사진 620.
   ========================================================================== */

.gb-about {
  --gb-about-pad: 80px;
  --gb-about-inline: max(var(--gb-about-pad), (100% - var(--gb-page-max)) / 2);
  background: var(--gb-white);
  color: var(--gb-ink);
}
.gb-about a:focus-visible { outline: 2px solid var(--gb-navy); outline-offset: 2px; }

.gb-about__eyebrow,
.gb-about__label {
  margin: 0;
  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-navy);
}
.gb-about__welcome-title,
.gb-about__cover-title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--gb-ink);
}

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

.gb-about__head {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 620fr);
  gap: 60px;
  align-items: center;
  box-sizing: border-box;
  padding: 48px var(--gb-about-inline) 56px;
  background: var(--gb-navy);
  color: var(--gb-paper);
}
/* 대표 이미지가 없으면 글 묶음 1열 */
.gb-about__head:not(:has(.gb-about__photo)) { grid-template-columns: minmax(0, 1fr); }
.gb-about__head-text { display: flex; flex-direction: column; gap: 20px; }
.gb-about .gb-about__eyebrow { color: var(--gb-gold); }
.gb-about__title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 72px;
  font-weight: 400;
  line-height: 1.02;
  text-wrap: wrap; /* base 의 balance 를 끈다 — J07·A01 줄바꿈("Accounting is / more than / numbers.") */
  letter-spacing: 0;
  color: var(--gb-paper);
}
.gb-about__intro { margin: 0; font-family: var(--gb-font-serif); font-size: 20px; line-height: 1.45; color: var(--gb-paper); }
.gb-about__photo { aspect-ratio: 620 / 349; }
.gb-about__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── Welcome (흰 바탕, 패딩 88/80, 글 700 + 간격 96 + 네 단어 484) ── */

.gb-about__welcome {
  display: grid;
  grid-template-columns: minmax(0, 700fr) minmax(0, 484fr);
  gap: 96px;
  align-items: start;
  box-sizing: border-box;
  padding: 88px var(--gb-about-inline);
  background: var(--gb-white);
}
.gb-about__welcome-text { display: flex; flex-direction: column; gap: 20px; }
.gb-about__prose { display: flex; flex-direction: column; gap: 20px; }
.gb-about__prose > * { margin: 0; }
.gb-about__prose p { font-family: var(--gb-font-serif); font-size: 20px; line-height: 1.6; color: var(--gb-ink); }

.gb-about__words .gb-about__label { margin-block-end: 8px; }
.gb-about__word-list { margin: 0; padding: 0; list-style: none; }
.gb-about__word {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-block-end: 1px solid var(--gb-gray-200);
}
.gb-about__word-num { flex: none; font-family: var(--gb-font-display-family); font-size: 28px; line-height: 1; color: var(--gb-gold); }
.gb-about__word-body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-inline-size: 0; }
.gb-about__word-key { font-family: var(--gb-font-display-family); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--gb-ink); }
.gb-about__word-text { font-family: var(--gb-font-family-ui); font-size: 13px; line-height: 1.45; color: var(--gb-gray-600); }

/* ── What we cover (paper, 패딩 88/80, 간격 36, 카드 3x2 405 간격 32) ── */

.gb-about__cover {
  display: flex;
  flex-direction: column;
  gap: 36px;
  box-sizing: border-box;
  padding: 88px var(--gb-about-inline);
  background: var(--gb-paper);
}
.gb-about__cover .gb-about__label { margin-block-end: -16px; } /* 라벨 ↔ 제목 20 (Figma 묶음) */
.gb-about__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 바탕 교대 white·gray-50, 그림 바탕은 반대 톤. 테두리는 그림 위에 그린다(Figma 안쪽 선) */
.gb-about__card {
  display: flex;
  flex-direction: column;
  background: var(--gb-white);
  outline: var(--gb-stroke-hairline);
  outline-offset: -1px;
}
.gb-about__card:nth-child(even) { background: var(--gb-gray-50); }
.gb-about__card:nth-child(even) .gb-art > rect:first-child { fill: var(--gb-white); }
.gb-about__art { display: block; aspect-ratio: 405 / 90; }
.gb-about__art .gb-art { display: block; inline-size: 100%; block-size: 100%; }
.gb-about__card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 28px; } /* 좌우 14: 영역 이름 한 줄 (GB-57) */
.gb-about__card-num { font-family: var(--gb-font-display-family); font-size: 36px; line-height: 1.1; color: var(--gb-navy); }
.gb-about__card-name { font-family: var(--gb-font-serif); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--gb-ink); }

/* ── Mission (흰 바탕, 패딩 96/80, 가운데) ─────────────── */

.gb-about__mission {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  box-sizing: border-box;
  padding: 96px var(--gb-about-inline);
  background: var(--gb-white);
  text-align: center;
}
.gb-about__mission-text {
  max-inline-size: 1000px;
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 44px;
  line-height: 1.25;
  color: var(--gb-ink);
}
.gb-about__actions { display: flex; gap: 12px; justify-content: center; margin: 8px 0 0; }
.gb-about__btn {
  box-sizing: border-box;
  padding: 14px 26px;
  border: 1px solid var(--gb-navy);
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}
.gb-about .gb-about__btn--fill { background: var(--gb-navy); color: var(--gb-white); }
.gb-about .gb-about__btn--fill:hover,
.gb-about .gb-about__btn--fill:focus { background: color-mix(in srgb, var(--gb-navy) 85%, var(--gb-white)); color: var(--gb-white); }
.gb-about .gb-about__btn--line { background: transparent; color: var(--gb-navy); }
.gb-about .gb-about__btn--line:hover,
.gb-about .gb-about__btn--line:focus { background: var(--gb-state-hover-tint); color: var(--gb-navy); }

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

@media (max-width: 1279px) {
  .gb-about { --gb-about-pad: 48px; }
  .gb-about__title { font-size: 64px; }
  .gb-about__welcome { gap: 64px; }
  .gb-about__cards { gap: 24px; }
}

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

@media (max-width: 1023px) {
  .gb-about { --gb-about-pad: 20px; --gb-about-inline: 20px; }
  .gb-about__head { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 32px 20px; }
  .gb-about__head-text { gap: 14px; }
  .gb-about__title { font-size: 40px; line-height: 1.04; }
  .gb-about__intro { font-size: 17px; line-height: 1.5; }
  .gb-about__photo { aspect-ratio: 350 / 197; }

  .gb-about__welcome { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 20px 48px; }
  .gb-about__welcome-text,
  .gb-about__prose { gap: 16px; }
  .gb-about__welcome-title,
  .gb-about__cover-title { font-size: 32px; }
  .gb-about__prose p { font-size: 17px; }
  .gb-about__words .gb-about__label { margin-block-end: 0; }
  .gb-about__word { gap: 16px; padding: 16px 0; }
  .gb-about__word-num { font-size: 24px; }
  .gb-about__word-key { font-size: 22px; }
  .gb-about__word-text { line-height: 1.5; }

  .gb-about__cover { gap: 16px; padding: 40px 20px 48px; }
  .gb-about__cover .gb-about__label { margin-block-end: 0; }
  .gb-about__cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gb-about__card,
  .gb-about__card:nth-child(even) { background: var(--gb-white); outline: 1px solid var(--gb-gray-200); }
  .gb-about__card:nth-child(even) .gb-art > rect:first-child { fill: var(--gb-gray-50); }
  .gb-about__art { aspect-ratio: 350 / 78; }
  .gb-about__card-body { gap: 6px; padding: 12px 20px 20px; }
  .gb-about__card-num { font-size: 28px; }
  .gb-about__card-name { font-size: 20px; }

  .gb-about__mission { gap: 16px; padding: 48px 20px 56px; }
  .gb-about__mission-text { font-size: 28px; }
  .gb-about__actions { flex-direction: column; align-self: stretch; margin-block-start: 0; }
  .gb-about__btn { text-align: center; }
}