/* 블로그 — 글 본문(폭 790) · 목록 카드. 제목 띠·필터는 projects.css 의 pj-head · pj-filter 를 같이 쓴다. */
.bp-date { margin: 14px 0 0; color: rgba(255, 255, 255, .72); font-size: 14px; }
.bp-article .bp-text { color: var(--pz-body); font-size: 17px; line-height: 1.9; }
.bp-article .bp-text p { margin: 0 0 20px; }
.bp-article .bp-text h2, .bp-article .bp-text h3, .bp-article .bp-text h4 { margin: 40px 0 14px; color: var(--pz-ink); line-height: 1.35; letter-spacing: -.02em; }
.bp-article .bp-text h2 { font-size: clamp(22px, 2.4vw, 28px); }
.bp-article .bp-text h3 { font-size: clamp(19px, 2vw, 22px); }
.bp-article .bp-text a { color: var(--pz-blue); }
.bp-article .bp-text img { max-width: 100%; height: auto; border-radius: 12px; }
.bp-article .bp-text ul, .bp-article .bp-text ol { margin: 0 0 20px; padding-left: 22px; }
.bp-heading { margin: 40px 0 14px; color: var(--pz-ink); }
.bp-sub { color: var(--pz-body); }
.bp-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 32px; border-radius: 16px; overflow: hidden; background: #000; }
.bp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-figure { margin: 28px 0; }
.bp-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* 글 끝의 공용 블록(지붕아래 미소가득 …)은 본문 폭을 벗어나 전체 폭으로 */
.bp-article .bp-raw { margin-top: 48px; }
.bp-back { justify-content: center; }

.bl-grid { gap: 24px; }
.bl-card { display: flex; flex-direction: column; border: 1px solid var(--pz-line); border-radius: 16px; overflow: hidden; background: var(--pz-white); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.bl-card[hidden] { display: none; }
.bl-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23, 33, 43, .10); }
.bl-card__pic { display: block; aspect-ratio: 3 / 2; background: var(--pz-blue-soft); overflow: hidden; }
.bl-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.bl-card__cat { color: var(--pz-blue); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.bl-card strong { color: var(--pz-ink); font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; }
.bl-card__date { color: var(--pz-muted); font-size: 13px; }
.pj-filter { background: var(--pz-white); cursor: pointer; font-family: inherit; }
.pj-filter small { margin-left: 6px; opacity: .7; font-weight: 600; }

/* 글 끝 공용 CTA — 전체 폭 한 섹션. 블록 자체 CSS 는 그대로 두고 바깥 배치만: 배경은 끝까지, 안쪽 내용은 1200 에 맞춤 */
.bp-cta-stretch .bp-raw { margin: 0; }
.bp-cta-stretch .posco-post-cta { margin: 0 !important; border-radius: 0 !important; }
/* 위 덩어리(__main)는 1200 폭 가운데. 아래 '좋은 자재' 줄(__proof)은 밝은 바탕이 화면 끝까지 가고 안쪽 내용만 1200 에 맞춘다
   (폭을 줄이면 남색 안에 밝은 상자가 떠서 벤또가 된다). 줄 아래에 항목 사이와 같은 얇은 선 — 바로 아래 '이어서 읽기'(연파랑)와
   색이 비슷해 경계가 안 보였다(2026-09-21 사용자). */
.bp-cta-stretch .posco-post-cta__main { width: min(1200px, calc(100% - 2 * var(--pz-gutter))); margin: 0 auto; }
.bp-cta-stretch .posco-post-cta__proof {
  width: 100%; padding: 0 max(var(--pz-gutter), calc((100% - 1200px) / 2));
  border-bottom: 1px solid #d9e1e9;
}
@media (max-width: 900px) { .bp-cta-stretch .posco-post-cta__main { width: 100%; } .bp-cta-stretch .posco-post-cta__proof { padding: 0; } }

/* ---- 전체 폭 버전에서는 글씨·버튼을 사이트 표준에 맞춘다 (원본은 790 상자용 10~12px). 문구·구조는 그대로 ---- */
.bp-cta-stretch .posco-post-cta__content { padding: clamp(48px, 6vw, 80px) 40px clamp(48px, 6vw, 80px) 0; }
.bp-cta-stretch .posco-post-cta__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; margin-bottom: 14px; }
.bp-cta-stretch .posco-post-cta h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.22; letter-spacing: -.03em; }
.bp-cta-stretch .posco-post-cta__lead { max-width: 520px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.75; }
.bp-cta-stretch .posco-post-cta__phone a { font-size: clamp(30px, 3.4vw, 42px); }
.bp-cta-stretch .posco-post-cta__phone small { font-size: 13px; }
.bp-cta-stretch .posco-post-cta__cost-note { font-size: 14px; margin: 20px 0 12px; }
.bp-cta-stretch .posco-post-cta__actions { gap: 12px; }
.bp-cta-stretch .posco-post-cta__btn {
  min-height: 56px; padding: 0 26px; border-radius: var(--pz-radius); border-width: 1.5px;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
}
.bp-cta-stretch .posco-post-cta__btn--primary { background: var(--pz-lemon); border-color: var(--pz-lemon); color: var(--pz-ink) !important; }
.bp-cta-stretch .posco-post-cta__btn--primary:hover { background: var(--pz-lemon-hover); border-color: var(--pz-lemon-hover); opacity: 1; }
.bp-cta-stretch .posco-post-cta__text-link { font-size: 14px; }
.bp-cta-stretch .posco-post-cta__proof-item { padding: 26px 28px; }
.bp-cta-stretch .posco-post-cta__proof-item:first-child { padding-left: 0; }
.bp-cta-stretch .posco-post-cta__proof-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.bp-cta-stretch .posco-post-cta__proof-text { font-size: 14.5px; line-height: 1.65; }
@media (max-width: 900px) {
  .bp-cta-stretch .posco-post-cta__content { padding: 40px 20px; }
  .bp-cta-stretch .posco-post-cta__proof-item, .bp-cta-stretch .posco-post-cta__proof-item:first-child { padding: 18px 20px; }
  .bp-cta-stretch .posco-post-cta__btn { width: 100%; }
}
.bp-article { padding-bottom: clamp(48px, 6vw, 80px); }

/* 이어서 읽기 — 작게 */
.bp-more .pz-head { margin-bottom: 20px; }
.bp-more .pz-kicker { margin-bottom: 8px; }
.bl-grid--sm { gap: 16px; }
.bl-grid--sm .bl-card { border-radius: 12px; }
.bl-grid--sm .bl-card__pic { aspect-ratio: 16 / 9; }
.bl-grid--sm .bl-card__body { gap: 5px; padding: 12px 14px 14px; }
.bl-grid--sm .bl-card strong { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-grid--sm .bl-card__cat { font-size: 11.5px; }
.bl-grid--sm .bl-card__date { font-size: 12px; }

/* 연파랑 바탕 위 흰 카드 — 테두리를 한 톤 진하게 해 경계를 분명히 */
.bp-more .bl-card { border-color: #d3e0ec; }