/* 크리에이터 홈(D-064·D-065): 게시글·사진·좋아요·댓글, 응원. 색·글자·작은 표(.pill)·첫 글자 동그라미(.avatar.sm)·입력(.writebox textarea)은 /ui.css(2026-10-20 공용 기준).
   CSP 가 style 속성을 막으니 모양은 전부 이 파일에서(사진은 <img>). 프로필·월 구독·채팅 후원 칸·공지 한 줄·탭·PC 배치는 app.css */

/* 게시글 카드 */
.post .phead { display: flex; align-items: center; gap: 10px; }
.pwho { display: grid; min-width: 0; }
.pwho strong { color: var(--ui-ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.when { color: var(--ui-sub); font-size: 13px; font-weight: 400; }
.ptags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.ptitle { margin: 12px 0 0; font-size: 17px; color: var(--ui-ink); }
.pbody { margin: 8px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.65; color: var(--ui-text); }
.pimgs { display: grid; gap: 4px; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.pimgs.n2, .pimgs.n3, .pimgs.n4 { grid-template-columns: 1fr 1fr; }
.pimgs a { display: block; background: var(--ui-fill); }
.pimgs img { display: block; width: 100%; height: auto; }
.pimgs.n2 img, .pimgs.n3 img, .pimgs.n4 img { aspect-ratio: 1; height: 100%; object-fit: cover; }
.pimgs.n3 a:first-child { grid-column: 1 / -1; }
.pimgs.n3 a:first-child img { aspect-ratio: 2 / 1; }
.pfoot { display: flex; gap: 4px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ui-line); }
.react { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ui-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.react:hover { background: var(--ui-fill); }
.react.on { color: var(--ui-red); }

/* 잠긴 글(구독자 전용): 옅은 회색 칸 */
.lockbox { display: grid; justify-items: center; gap: 4px; margin-top: 12px; padding: 24px 16px; border-radius: 12px; background: var(--ui-fill); text-align: center; color: var(--ui-ink); }
.lockbox .ico.big svg { width: 28px; height: 28px; color: var(--ui-text); }
.lockbox strong { font-size: 15px; }
.lockbox .fine { margin: 0; }

/* 댓글·응원 */
.comments { margin-top: 8px; }
.clist { display: grid; }
.comment { padding: 12px 0; border-top: 1px solid var(--ui-line); }
.clist .comment:first-child, #cheerList .comment:first-child { border-top: 0; }
.comment.by-creator { background: var(--ui-bg); margin: 0 -10px; padding: 12px 10px; border-radius: 12px; }
.chead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; color: var(--ui-ink); }
.chead .ico.sub { color: var(--ui-gold-ink); }
.chead .ico.sub svg { width: 15px; height: 15px; }
.cbody { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 15px; color: var(--ui-text); }
.cacts { display: flex; gap: 8px; }
.reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.reasons .chip { cursor: pointer; }
.reasons .chip::before { display: none; }
.writebox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 8px; }
.writebox a.btn { grid-column: 1 / -1; justify-content: center; width: 100%; text-decoration: none; }
#feedMore, #cheerMore { margin-top: 12px; }