/* ==========================================================================
   Books (GB-20 5조각) — 책장(페이지 466) + 책 상세(gb_book)
   정본: Figma I08 160:1442·B01 208:851(책장), I08b 160:1533·B02 208:979(상세).
   수치: .superpowers/sdd/2026-10-02-client-feedback-261001/task-8-values.md
   ========================================================================== */

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

/* 라벨 = UI 글꼴 Medium 11 자간 12% 대문자 */
.gb-books__eyebrow,
.gb-books__order,
.gb-book-card__badge,
.gb-book__path,
.gb-book__badge,
.gb-book__fact dt,
.gb-book__label,
.gb-cover__series {
  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;
}

/* ── 그린 표지 (대표 이미지 없을 때) ───────────────────── */

.gb-cover {
  display: flex;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
}
img.gb-cover { display: block; object-fit: cover; }
.gb-cover__spine { flex: none; inline-size: var(--gb-cover-spine, 14px); background: var(--gb-ink); }
.gb-cover__face {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-inline-size: 0;
  box-sizing: border-box;
  padding: var(--gb-cover-pad, 23px);
  background: var(--gb-navy);
}
.gb-cover__series { color: var(--gb-gold); font-size: var(--gb-cover-series, 11px); }
.gb-cover__mid { display: flex; flex-direction: column; gap: var(--gb-cover-mid-gap, 14px); }
.gb-cover__rule { inline-size: 48px; block-size: 2px; background: var(--gb-gold); }
.gb-cover__title {
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-cover-title, 26px);
  line-height: 1.1;
  color: var(--gb-paper);
  overflow-wrap: anywhere;
}
.gb-cover__brand {
  font-family: var(--gb-font-display-family);
  font-size: var(--gb-cover-brand, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gb-paper);
}
.gb-cover--paper .gb-cover__face { background: var(--gb-paper); }
/* 천 질감 바탕 사진(gb_book_cover_art_{tone}). 글자는 그 위에 */
.gb-cover__face { position: relative; isolation: isolate; }
.gb-cover__art { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gb-cover--paper .gb-cover__series,
.gb-cover--paper .gb-cover__title,
.gb-cover--paper .gb-cover__brand { color: var(--gb-navy); }

/* ── 책장 머리 (navy, 48/80/64, 간격 16) ──────────────── */

.gb-books__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 48px var(--gb-books-inline) 64px;
  background: var(--gb-navy);
  color: var(--gb-paper);
}
.gb-books .gb-books__eyebrow { color: var(--gb-gold); }
.gb-books__title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 72px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--gb-paper);
}
.gb-books__intro { margin: 0; font-family: var(--gb-font-serif); font-size: 20px; line-height: 1.45; color: var(--gb-paper); }

/* ── 책장 (paper, 64/80/96, 간격 28, 카드 3열 간격 32) ──── */

.gb-books__shelf {
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
  padding: 64px var(--gb-books-inline) 96px;
  background: var(--gb-paper);
}
.gb-books__bar { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; }
.gb-books__count {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gb-ink);
}
.gb-books .gb-books__order { color: var(--gb-gray-600); }
.gb-books__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gb-book-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--gb-white);
  outline: var(--gb-stroke-hairline);
  outline-offset: -1px;
}
.gb-book-card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 405 / 440;
  background: var(--gb-gray-50);
}
.gb-book-card__cover .gb-cover { inline-size: 250px; max-inline-size: 62%; block-size: auto; aspect-ratio: 2 / 3; }
.gb-book-card__body { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.gb-books .gb-book-card__badge { align-self: flex-start; padding: 5px 10px; border: 1px solid var(--gb-ink); color: var(--gb-ink); }
.gb-book-card__title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gb-ink);
}
.gb-book-card__text { margin: 0; font-family: var(--gb-font-serif); font-size: 17px; line-height: 1.5; color: var(--gb-gray-600); }
.gb-books .gb-book-card__link,
.gb-book .gb-book__card-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  align-self: flex-start;
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--gb-navy);
  text-decoration: none;
}
.gb-books .gb-book-card__link { margin-block-start: 4px; }
.gb-books .gb-book-card__link:hover,
.gb-book .gb-book__card-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 상세 Product (navy, 72/80/88, 표지 400 + 간격 100 + 글 600) ── */

.gb-book__product {
  display: grid;
  grid-template-areas: "cover path" "cover info";
  grid-template-columns: minmax(0, 400px) minmax(0, 600px);
  grid-template-rows: auto 1fr;
  gap: 18px 100px;
  box-sizing: border-box;
  padding: 72px var(--gb-books-inline) 88px;
  background: var(--gb-navy);
  color: var(--gb-paper);
}
.gb-book .gb-book__path { grid-area: path; color: var(--gb-gold); }
.gb-book .gb-book__path a { color: inherit; text-decoration: none; }
.gb-book .gb-book__path a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gb-book__cover {
  grid-area: cover;
  align-self: start;
  aspect-ratio: 5 / 7;
  --gb-cover-spine: 22px;
  --gb-cover-pad: 36px;
  --gb-cover-title: 40px;
  --gb-cover-brand: 14px;
  --gb-cover-mid-gap: 18px;
}
.gb-book__info { grid-area: info; display: flex; flex-direction: column; gap: 18px; min-inline-size: 0; }
.gb-book .gb-book__badge { align-self: flex-start; padding: 6px 12px; border: 1px solid var(--gb-paper); color: var(--gb-paper); }
.gb-book__title {
  margin: 0;
  font-family: var(--gb-font-display-family);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--gb-paper);
}
.gb-book__intro { margin: 0; font-family: var(--gb-font-serif); font-size: 22px; line-height: 1.45; color: var(--gb-paper); }
.gb-book__facts { margin: 4px 0 0; padding: 0; }
.gb-book__fact {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border-block-start: 1px solid color-mix(in srgb, var(--gb-paper) 30%, transparent);
}
.gb-book .gb-book__fact dt { color: var(--gb-paper); }
.gb-book__fact dd { margin: 0; font-family: var(--gb-font-serif); font-size: 18px; line-height: 1.3; text-align: end; color: var(--gb-paper); }
.gb-book__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
.gb-book .gb-book__btn {
  box-sizing: border-box;
  padding: 15px 26px;
  border: 1px solid var(--gb-paper);
  font-family: var(--gb-font-family-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--gb-paper);
  text-align: center;
  text-decoration: none;
}
.gb-book .gb-book__btn:hover,
.gb-book .gb-book__btn:focus { background: color-mix(in srgb, var(--gb-paper) 12%, transparent); color: var(--gb-paper); }
.gb-book__note { margin: 0; font-family: var(--gb-font-family-ui); font-size: 13px; line-height: 1.4; color: var(--gb-paper); }

/* ── Inside the book (paper, 88/80, 간격 32, 4칸 간격 20) ── */

.gb-book__inside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
  padding: 88px var(--gb-books-inline);
  background: var(--gb-paper);
}
.gb-book .gb-book__label { margin-block-end: -20px; color: var(--gb-navy); } /* 라벨 ↔ 제목 12 (I08b 묶음) */
.gb-book__inside-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);
}
.gb-book__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gb-book__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 28px;
  background: var(--gb-white);
  outline: var(--gb-stroke-hairline);
  outline-offset: -1px;
}
.gb-book__card-num { font-family: var(--gb-font-display-family); font-size: 36px; line-height: 1.1; color: var(--gb-gold); }
.gb-book__card-name { margin: 0; font-family: var(--gb-font-serif); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--gb-ink); }
.gb-book__card-text { margin: 0; font-family: var(--gb-font-family-ui); font-size: 14px; line-height: 1.5; color: var(--gb-gray-600); }
.gb-book .gb-book__card-link { margin-block-start: auto; padding-block-start: 24px; }

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

@media (max-width: 1279px) {
  .gb-books,
  .gb-book { --gb-books-pad: 48px; }
  .gb-books__title { font-size: 64px; }
  .gb-books__grid { gap: 24px; }
  .gb-book__product { column-gap: 64px; }
  .gb-book__title { font-size: 48px; }
  .gb-book__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 모바일 B01·B02 (390) ────────────────────────────── */

@media (max-width: 1023px) {
  .gb-books,
  .gb-book { --gb-books-pad: 20px; --gb-books-inline: 20px; }

  .gb-books__head { gap: 14px; padding: 32px 20px; }
  .gb-books__title { font-size: 40px; line-height: 1.04; }
  .gb-books__intro { font-size: 17px; line-height: 1.5; }
  .gb-books__shelf { gap: 20px; padding: 32px 20px 48px; }
  .gb-books__count { font-size: 28px; }
  .gb-books__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gb-book-card__cover { aspect-ratio: auto; padding: 28px 0; }
  .gb-book-card__cover { --gb-cover-spine: 13px; --gb-cover-pad: 18px; --gb-cover-series: 10px; --gb-cover-title: 22px; }
  .gb-book-card__cover .gb-cover { inline-size: 216px; max-inline-size: 70%; }
  .gb-book-card__body { padding: 24px 20px 28px; }
  .gb-book-card__title { font-size: 24px; }

  .gb-book__product {
    grid-template-areas: "path" "cover" "info";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 18px;
    padding: 32px 20px 40px;
  }
  .gb-book__cover {
    justify-self: center;
    inline-size: 240px;
    max-inline-size: 100%;
    --gb-cover-spine: 13px;
    --gb-cover-pad: 22px;
    --gb-cover-series: 8px;
    --gb-cover-title: 24px;
    --gb-cover-brand: 9px;
    --gb-cover-mid-gap: 11px;
  }
  .gb-book__title { font-size: 36px; }
  .gb-book__intro { font-size: 18px; line-height: 1.5; }
  .gb-book__facts { margin-block-start: 0; }
  .gb-book__fact dd { font-size: 17px; }
  .gb-book__actions { flex-direction: column; margin-block-start: 4px; }

  .gb-book__inside { gap: 20px; padding: 48px 20px 56px; }
  .gb-book .gb-book__label { margin-block-end: -8px; }
  .gb-book__inside-title { font-size: 32px; }
  .gb-book__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gb-book__card { padding: 24px 20px; }
  .gb-book__card-num { font-size: 32px; }
  .gb-book__card-name { font-size: 20px; }
  .gb-book .gb-book__card-link { padding-block-start: 6px; }
}