/* PageBuilder 공개 출력 (설계 docs/superpowers/specs/2026-11-13-pagebuilder-design.md §3)
   기기 구분: PC ≥1024 · 태블릿 761~1023 · 모바일 ≤760 */
.pb-page { display: block; }

/* 섹션 여백·배경 */
.pb-pt-sm { padding-top: 24px; } .pb-pt-md { padding-top: 56px; } .pb-pt-lg { padding-top: 96px; }
.pb-pb-sm { padding-bottom: 24px; } .pb-pb-md { padding-bottom: 56px; } .pb-pb-lg { padding-bottom: 96px; }
.pb-bg-surface { background: var(--c-surface); border-block: 1px solid var(--c-border); }
.pb-bg-soft { background: var(--c-surface-2); }
.pb-bg-inverse { background: var(--c-bg); color: var(--c-text); }
.pb-narrow { max-width: calc(820px + var(--gutter) * 2); }

/* 섹션 높이 (기기별 최소 높이 — 정하지 않은 기기는 자동). 안의 대표 히어로도 같은 높이를 따른다 */
.pb-has-h { display: flex; flex-direction: column; justify-content: flex-start; min-height: var(--pb-h, auto); --pb-hero-h: var(--pb-h); }
.pb-has-h > * { width: 100%; }
.pb-has-h > .container { width: auto; }
.pb-va-center { justify-content: center; } .pb-va-bottom { justify-content: flex-end; }
.pb-has-h .hero__inner { padding-top: 40px; padding-bottom: 88px; }
@media (min-width: 1024px) { .pb-has-h { --pb-h: var(--pb-h-pc); } }
@media (min-width: 761px) and (max-width: 1023px) { .pb-has-h { --pb-h: var(--pb-h-tablet); } }
@media (max-width: 760px) { .pb-has-h { --pb-h: var(--pb-h-mobile); } .pb-has-h .hero__inner { padding-bottom: 72px; } }

/* 칸 나누기 — 칸 안에서는 블록이 칸 너비를 따른다 (위젯 출력 파일의 .container·위 여백 무력화) */
.pb-grid { display: grid; grid-template-columns: var(--pb-cols, 1fr); --pb-gap: 20px; gap: var(--pb-gap); align-items: start; }
.pb-gap-sm { --pb-gap: 12px; } .pb-gap-lg { --pb-gap: 32px; }
.pb-col { display: flex; flex-direction: column; gap: var(--pb-gap); min-width: 0; }
.pb-grid .container { max-width: none; padding: 0; margin: 0; }
.pb-grid .pb-block > :first-child, .pb-grid .pb-block > .container > :first-child { margin-top: 0; }
.pb-grid .section { margin-top: 0; }
.pb-grid .board-latest { margin-top: 0; }

/* 기본 블록 */
.pb-align-center { text-align: center; } .pb-align-right { text-align: right; }
.pb-heading__title--h2 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.pb-heading__title--h3 { font-size: 20px; font-weight: 800; }
.pb-heading__sub { margin-top: 6px; color: var(--c-text-muted); font-size: 15px; }
.pb-text p + p { margin-top: 12px; }
.pb-text--sm { font-size: 14px; } .pb-text--md { font-size: 16px; line-height: 1.7; } .pb-text--lg { font-size: 19px; line-height: 1.7; }
.pb-image { margin: 0; }
.pb-image img { display: block; width: 100%; height: auto; }
.pb-image--round img { border-radius: var(--radius-lg); }
.pb-button.pb-align-center { display: flex; justify-content: center; } .pb-button.pb-align-right { display: flex; justify-content: flex-end; }
.pb-divider { border: 0; border-top: 1px solid var(--c-border); margin: 8px 0; }
.pb-embed__frame { display: block; width: 100%; border: 0; border-radius: var(--radius-md); background: transparent; }

/* 기기별 숨김 */
@media (min-width: 1024px) { .pb-hide-pc { display: none !important; } }
@media (min-width: 761px) and (max-width: 1023px) {
  .pb-hide-tablet { display: none !important; }
  .pb-grid--3, .pb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pb-hide-mobile { display: none !important; }
  .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-pt-md { padding-top: 40px; } .pb-pt-lg { padding-top: 64px; }
  .pb-pb-md { padding-bottom: 40px; } .pb-pb-lg { padding-bottom: 64px; }
  .pb-heading__title--h2 { font-size: 21px; }
}

/* ②단계 — 커뮤니티 사이드바 영역 (.cm-side 는 카드 사이 간격을 grid gap 으로 둔다) */
.cm-side > .pb-page, .cm-side .pb-section, .cm-side .pb-col, .cm-side .pb-grid { display: grid; gap: 16px; padding: 0 !important; min-width: 0; }
.cm-side .pb-grid { grid-template-columns: minmax(0, 1fr); }
.cm-side .container { max-width: none; padding: 0; margin: 0; }
.cm-side .pb-block > :first-child { margin-top: 0; }

/* 템플릿 본문 자리 (관리자 미리보기에서만) */
.pb-body-placeholder { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; min-height: 320px; margin: 24px 0; padding: 32px; border: 2px dashed var(--c-border); border-radius: var(--radius-lg); text-align: center; color: var(--c-text-muted); background: repeating-linear-gradient(45deg, transparent 0 12px, var(--c-surface-2) 12px 24px); }
.pb-body-placeholder strong { font-size: 20px; color: var(--c-text); }
.pb-body-placeholder span { max-width: 520px; font-size: 14px; line-height: 1.6; }

/* ③단계 — 회원 화면(마이페이지·개발자센터) 본문 블록: 왼쪽 메뉴 옆 mp-main 안에서 카드 간격 그대로 */
.mp-main > .pb-page { display: grid; gap: 18px; min-width: 0; }
.mp-main .pb-section { padding: 0 !important; }
.mp-main .pb-section > .pb-col, .mp-main .pb-col { gap: 18px; }
.mp-main .pb-grid { --pb-gap: 18px; }
.mp-main .container { max-width: none; padding: 0; margin: 0; }
.mp-main .pb-section { display: grid; gap: 18px; min-width: 0; }