/* ==========================================================================
   Rich HTML 본문 렌더링 공용 스타일 (official/admin 게시글)
   사용처: preview_community_integrated_01.html(.pd-content--rich),
          index.html 메인 상세 모달(.cds-content.pd-content--rich)
   네임스페이스: .pd-content--rich 하위 모든 요소
   ========================================================================== */

.pd-content.pd-content--rich { padding: 8px 24px 20px; font-weight: 400; line-height: 1.85; color: #2a2a2a; }
.pd-content--rich p { margin-bottom: 16px; }
.pd-content--rich strong { font-weight: 700; color: #1a1a1a; }
.pd-content--rich em { font-style: normal; color: #767676; font-size: 13px; }
.pd-content--rich hr { border: none; border-top: 1px solid #eee; margin: 24px 0; }
.pd-content--rich h4 { font-size: 15px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.3px; margin: 8px 0 12px; }

.pd-content--rich .quote-inline {
    display: block; margin: 18px 0; padding: 16px 18px;
    background: #FFF8F9; border-left: 3px solid #E8617A; border-radius: 8px;
    font-size: 15px; font-weight: 700; color: #E8617A;
    letter-spacing: -0.3px; line-height: 1.6;
}

.pd-content--rich ul { list-style: none; padding: 6px 0; margin: 0 0 16px 0; }
.pd-content--rich ul li { position: relative; padding-left: 14px; margin-bottom: 8px; word-break: keep-all; }
.pd-content--rich ul li::before {
    content: ''; position: absolute; left: 0; top: 12px;
    width: 5px; height: 5px; background: #E8617A; border-radius: 50%;
}

/* 현장 리포트용 블록들 */
.pd-content--rich .text-block { padding: 8px 0 14px; font-size: 15px; font-weight: 400; line-height: 1.85; color: #2a2a2a; word-break: keep-all; letter-spacing: -0.3px; }
.pd-content--rich .text-block p { margin-bottom: 14px; }
.pd-content--rich .text-block p:last-child { margin-bottom: 0; }
.pd-content--rich .text-block strong { font-weight: 700; color: #1a1a1a; }
.pd-content--rich .text-block em { font-style: normal; color: #E8617A; font-weight: 700; font-size: inherit; }
.pd-content--rich .text-block .badge-inline { display: inline-block; padding: 1px 7px; background: #FFF8F9; color: #E8617A; font-weight: 700; font-size: 13px; border-radius: 5px; }

.pd-content--rich .section-h { padding: 18px 0 6px; font-size: 16px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.pd-content--rich .section-h__pill { display: inline-block; padding: 2px 9px; font-size: 11px; font-weight: 700; color: #fff; background: #E8617A; border-radius: 10px; letter-spacing: 0; }
.pd-content--rich .section-h__pill--hot { background: #FFA500; }
.pd-content--rich .section-h__pill--navy { background: #0a2b63; }
.pd-content--rich .section-sub { padding: 8px 0 4px; font-size: 13px; font-weight: 700; color: #E8617A; letter-spacing: -0.2px; margin: 0; }

/* 이미지 — img 자체에 aspect-ratio 만 적용.
   wrapper 에 aspect-ratio + img 에 height:100% 를 주면 flex/부모 높이 순환참조로
   높이가 0으로 계산되어 이미지가 안 보이는 버그가 있어 폐기. */
.pd-content--rich .post-image { margin: 6px 0 10px; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); background: #eee; }
.pd-content--rich .post-image img { width: 100%; height: auto; display: block; object-fit: cover; }
.pd-content--rich .post-image.hero { margin-top: 12px; }
.pd-content--rich .post-image.hero img { aspect-ratio: 3/4; }
.pd-content--rich .post-image.wide img { aspect-ratio: 4/3; }
.pd-content--rich .post-image__caption { padding: 8px 14px 12px; font-size: 11px; color: #999; letter-spacing: -0.2px; font-weight: 500; background: #fafafa; margin: 0; }

/* 포인트/체크/인용/공지 카드 */
.pd-content--rich .point-card { margin: 0 0 14px; padding: 14px 16px; background: linear-gradient(135deg, #fff8e6, #fff3d0); border-left: 3px solid #FFA500; border-radius: 10px; }
.pd-content--rich .point-card__label { font-size: 11px; font-weight: 700; color: #FFA500; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 4px; }
.pd-content--rich .point-card__name { font-size: 15px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.3px; margin-bottom: 4px; }
.pd-content--rich .point-card__desc { font-size: 13px; font-weight: 500; color: #555; letter-spacing: -0.2px; line-height: 1.6; word-break: keep-all; }
.pd-content--rich .point-card__desc strong { color: #1a1a1a; font-weight: 700; }

.pd-content--rich .quote-block { margin: 0 0 16px; padding: 16px 18px 16px 20px; background: #FFF8F9; border-left: 3px solid #E8617A; border-radius: 8px; font-size: 14px; font-weight: 600; color: #E8617A; letter-spacing: -0.3px; line-height: 1.6; word-break: keep-all; }

.pd-content--rich .check-list { margin: 0 0 14px; padding: 14px 16px; background: #f7fafc; border-radius: 10px; }
.pd-content--rich .check-list__item { display: flex; gap: 8px; margin-bottom: 10px; font-size: 13px; line-height: 1.6; letter-spacing: -0.2px; word-break: keep-all; color: #2a2a2a; }
.pd-content--rich .check-list__item:last-child { margin-bottom: 0; }
.pd-content--rich .check-list__item .material-symbols-rounded { font-size: 17px; color: #00Bfa5; flex-shrink: 0; font-variation-settings: 'FILL' 1; }
.pd-content--rich .check-list__item strong { font-weight: 700; color: #1a1a1a; }

.pd-content--rich .notice-box { margin: 4px 0 14px; padding: 14px 16px; background: #FFF8F9; border: 1px solid rgba(232, 97, 122, 0.2); border-radius: 10px; font-size: 13px; line-height: 1.6; letter-spacing: -0.2px; color: #4a2a33; word-break: keep-all; }
.pd-content--rich .notice-box strong { color: #E8617A; font-weight: 700; }

/* 해시태그, 서명, 구분선 */
.pd-content--rich .hashtags { padding: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pd-content--rich .hashtag { font-size: 12px; font-weight: 600; color: #E8617A; background: rgba(232, 97, 122, 0.08); padding: 5px 10px; border-radius: 8px; letter-spacing: -0.2px; }
.pd-content--rich .sig { padding: 4px 0 24px; color: #E8617A; font-weight: 700; font-size: 14px; letter-spacing: -0.3px; margin: 0; }
.pd-content--rich .divider { height: 1px; background: #eee; margin: 6px 0; }