/* personal-branding.css — /personal-branding/ 페이지 고유 레이아웃
 * 공통 헤더·푸터·FINAL CTA·.section-head는 sections.css, 컴포넌트는 components.css를 그대로 사용.
 * 여기서는 .pb__* 배치만. 모바일 우선 · min-width 768 / 1024 · 토큰만 사용.
 * 카피 원천: boostree.partners/marketing (퍼스널 브랜딩 이전 페이지) + 기획서 06 구성 03.
 */

.pb__back {
  margin-bottom: var(--web-stack-lg);
  font-size: var(--web-fs-small);
  color: var(--text-soft);
}
.pb__back:hover { color: var(--text); }

/* ── 히어로 ─────────────────────────────────────────── */
.pb__hero-grid {
  display: grid;
  gap: var(--web-stack-lg);
}
.pb__hero-text {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--web-stack-sm);
}
.pb__hero-text .h-display { margin: 0; }
.pb__lead {
  max-width: var(--web-measure);
  margin: calc(var(--web-stack-md) - var(--web-stack-sm)) 0 var(--web-stack-sm);
  color: var(--text-soft);
}
.pb__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: var(--web-stack-md) 0 0;
  border-top: var(--line-dark-w) solid var(--line-dark);
}
.pb__fact {
  display: grid;
  gap: 0.25em;
  padding-block: var(--web-stack-sm);
  padding-inline-end: var(--web-stack-sm);
}
.pb__fact + .pb__fact {
  padding-inline-start: var(--web-stack-sm);
  border-left: var(--line-dark-w) solid var(--line-dark);
}
.pb__fact dt { color: var(--text-soft); }
.pb__fact dd {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  letter-spacing: var(--ls-tight);
}
.pb__hero-photo { margin: 0; }

/* ── 광고 vs 퍼스널 브랜드 비교 ─────────────────────── */
.pb__compare {
  overflow-x: auto;
  margin-bottom: var(--web-stack-lg);
}
.pb__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--web-fs-body);
}
.pb__table th,
.pb__table td {
  padding: var(--web-stack-sm) var(--web-stack-sm) var(--web-stack-sm) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--line-dark-w) solid var(--line-dark);
}
.pb__table th {
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h3);
  border-bottom-color: var(--text-soft);
}
.pb__table td:first-child,
.pb__table th:first-child { color: var(--text-soft); width: 50%; }
.pb__table th:last-child { color: var(--text-emphasis); }

.pb__three { margin: 0; padding: 0; list-style: none; }
.pb__owner {
  margin: var(--web-stack-md) 0 0;
  color: var(--text-soft);
}

/* ── 구성 6개 ───────────────────────────────────────── */
.pb__items { margin: 0; padding: 0; list-style: none; }
.pb__item { min-height: calc(var(--web-card-p) * 4); justify-content: space-between; }
.pb__quote { margin: var(--web-stack-lg) 0 0; }
.pb__quote p { margin: 0; }

/* ── 진단 5단계 ─────────────────────────────────────── */
.pb__steps {
  display: grid;
  gap: var(--web-stack-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── 포트폴리오 ─────────────────────────────────────── */
.pb__works {
  columns: 1;
  column-gap: var(--web-grid-gap);
}
.pb__work {
  break-inside: avoid;
  margin: 0 0 var(--web-grid-gap);
}
.pb__work img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-photo);
}
.pb__work figcaption {
  margin-top: 0.75em;
  color: var(--text-soft);
}

/* ── 운영 구성 3단계 ───────────────────────────────── */
.pb__grades { margin: 0; padding: 0; list-style: none; }
.pb__grade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--web-stack-sm);
  min-height: var(--web-stack-md);   /* 추천 배지 유무와 무관하게 가격 줄 높이 고정 */
}
.pb__grade-name { margin: 0; }
.card--accent .pb__grade-name { color: var(--text-on-green); }
.card--accent .pb__grade-badge {
  color: var(--text-on-green);
  box-shadow: inset 0 0 0 1px var(--text-on-green);
}
.pb__price {
  margin: var(--web-stack-sm) 0 0;
  font-size: var(--web-fs-body);
}
.pb__price strong {
  font-weight: var(--fw-bold);
  font-size: var(--web-fs-h2);
  letter-spacing: var(--ls-tighter);
}
.pb__grades-foot {
  display: grid;
  justify-items: start;
  gap: var(--web-stack-sm);
  margin-top: var(--web-stack-lg);
  color: var(--text-soft);
}
.pb__grades-foot .body { margin: 0; }

/* ── 예약 ───────────────────────────────────────────── */
.pb__cta { border-top: var(--line-dark-w) solid var(--line-dark); }
.pb__newtab { margin-top: var(--web-stack-sm); }
.pb__privacy {
  margin: var(--web-stack-md) 0 0;
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .pb__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb__works { columns: 2; }
}

@media (min-width: 1024px) {
  .pb__hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
  .pb__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pb__steps .step { grid-template-columns: 1fr; row-gap: var(--web-stack-sm); }
  .pb__works { columns: 3; }
}