/* ============================================================
   페이지 블록 공통 — 모든 페이지 블록이 쓰는 기본값
   빌더 templates.css 의 .iwg/.iwg-in 규칙 위에 얹는다.
   크기·색·간격은 전부 var(--iw-*, 기본값) 으로 읽어서
   디자인 탭(글자·간격·폭)이 기존 블록과 똑같이 먹는다.
   ★ 선택자 세기 규칙 (꼭 지킬 것)
     공통(이 파일)  = 빌더 templates.css 와 같은 세기 → 나중에 실려서 빌더 기본을 이긴다
     스킨(유형 CSS) = 공통과 같거나 높은 세기 + 더 나중에 실림 → 공통을 이긴다
     그래서 여기서는 .iwg.iwpg 처럼 클래스를 겹쳐 세기를 올리지 않는다.
   ============================================================ */
.iwg.iwpg { --pg-ink: var(--iw-ink, #172026); --pg-body: var(--iw-body, #414b53); --pg-mute: #67727b;
  --pg-line: #e2e7ea; --pg-soft: color-mix(in srgb, var(--ac) 8%, #fff); --pg-mid: color-mix(in srgb, var(--ac) 22%, #fff);
  color: var(--pg-ink); }
.iwpg > .iwg-in { max-width: var(--iw-container, 1400px);
  padding-top: var(--iw-pad-y, 96px); padding-bottom: var(--iw-pad-y, 96px); }
.iwpg .eb.pg-lb { letter-spacing: var(--iw-label-ls, .04em); text-transform: none; color: var(--iw-label-color, var(--ac)); margin: 0 0 14px; }
.iwpg h3.pg-tt { font-size: var(--iw-title-size, clamp(28px, 2.6vw, 40px)); line-height: var(--iw-title-lh, 1.32);
  letter-spacing: -.025em; word-break: keep-all; margin: 0 0 var(--iw-gap, 26px); }
.iwpg .body.pg-bd { font-size: var(--iw-body-size, 17px); line-height: var(--iw-body-lh, 1.85); color: var(--iw-body-color, var(--pg-body)); word-break: keep-all; }
.iwpg .pg-ph, .iwpg .pg-bg, .iwpg .pg-wide, .iwpg .pg-av { background: #d5dde1 var(--iw-focus, center) / cover no-repeat; }

/* 편집기 미리보기에서만 보이는 빈 사진 자리 (실제 화면에는 출력되지 않는다) */
.iwpg .is-empty {
  background-color: #d9e1e5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Ccircle cx='200' cy='205' r='80' fill='%23f1f4f5'/%3E%3Cpath d='M52 500c12-128 74-188 148-188s136 60 148 188z' fill='%23f1f4f5'/%3E%3C/svg%3E");
  background-size: auto 86%; background-position: center bottom; background-repeat: no-repeat;
}

/* v1.1.0 사람이 아닌 사진 자리 (산·해 그림) — 인물형·인사말 외 모양은 이것을 쓴다 (iwpg_pic) */
.iwpg .is-empty.is-pic {
  background-color: #dde4e8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Ccircle cx='84' cy='27' r='9' fill='%23f1f4f5'/%3E%3Cpath d='M10 78 44 36l20 25 14-15 32 32z' fill='%23f1f4f5'/%3E%3C/svg%3E");
  background-size: auto min(46%, 120px); background-position: center; background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .iwpg > .iwg-in { padding-top: var(--iw-pad-y, 60px); padding-bottom: var(--iw-pad-y, 60px); }
  .iwpg .body.pg-bd { font-size: var(--iw-body-size, 16px); line-height: var(--iw-body-lh, 1.8); }
}
@media (prefers-reduced-motion: reduce) { .iwg.iwpg * { transition: none !important; } }

/* ---------- v1.1.0 계열 모양 공통 조각 ---------- */
.iwpg .pg-head { margin-bottom: 44px; max-width: 820px; }
.iwpg .pg-head h3.pg-tt { margin-bottom: 0; }
.iwpg .pg-head .pg-sub { margin-top: 14px; }
.iwpg.is-center .pg-head, .iwpg .pg-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.iwpg .pg-empty { color: #8a949e; font-size: 15px; }
.iwpg .pg-btns { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; }
.iwpg .pg-btn { display: inline-block; padding: 14px 30px; border-radius: 7px; background: var(--ac); color: var(--iw-btn-color, #fff); font-size: var(--iw-btn-size, 15.5px); font-weight: var(--iw-btn-weight, 700); text-decoration: none; }
.iwpg .pg-btn:hover { filter: brightness(1.08); }
.iwpg .pg-it { font-size: var(--iw-ititle-size, 21px); font-weight: var(--iw-ititle-weight, 800); line-height: 1.4; color: var(--iw-ititle-color, var(--pg-ink)); word-break: keep-all; margin: 0; }
.iwpg .pg-id { font-size: var(--iw-idesc-size, 16.5px); line-height: 1.7; color: var(--iw-idesc-color, var(--pg-body)); word-break: keep-all; margin: 0; }
.iwpg .pg-tagx { display: inline-block; align-self: flex-start; font-size: var(--iw-meta-size, 12.5px); font-weight: 700; color: var(--iw-meta-color, var(--ac)); background: var(--pg-soft); padding: 4px 10px; border-radius: 999px; }
.iwpg .pg-ico { display: inline-flex; width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: var(--iw-icon-bg, var(--pg-soft)); color: var(--iw-icon-color, var(--ac)); flex: none; }
.iwpg .pg-ico svg { width: 100%; height: 100%; }
.iwpg .pg-more { font-size: 14px; font-weight: 700; color: var(--ac); text-decoration: none; }
.iwpg a.pg-cardlink { color: inherit; text-decoration: none; display: block; }
@media (max-width: 768px) {
  .iwpg .pg-head { margin-bottom: 30px; }
  .iwpg .pg-btns { margin-top: 28px; }
}