/* 펫사주 커뮤니티 게시판형 (2026-10-10, Claude)
   - 목록: 카드 → 게시판 줄(작은 사진 + 분류·제목·작성자/날짜/댓글/조회)
   - 상세·글쓰기: 팝업 → 페이지 안에 펼쳐 보기 (body.pcb-view 일 때 목록 영역을 숨김) */

/* ── 목록 ── */
html body.pcb #list{margin-top:0!important;margin-bottom:14px!important;padding:0!important;background:#fff;border:1px solid var(--pv6-line,#F0E5D9);
  border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(39,33,63,.05)}
html body.pcb #list > .empty{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body.pcb #list > .card{display:grid!important;grid-template-columns:88px minmax(0,1fr);
  grid-template-areas:"th cat" "th ttl" "th meta";column-gap:14px;row-gap:0;align-items:center;
  width:100%;margin:0!important;padding:12px 16px!important;border:0!important;border-bottom:1px solid var(--pv6-line,#F0E5D9)!important;
  border-radius:0!important;box-shadow:none!important;background:#fff!important;cursor:pointer}
html body.pcb #list > .card:last-child{border-bottom:0!important}
html body.pcb #list > .card:hover{background:#FFFBF8!important}
html body.pcb #list > .card:not(:has(.pcm-thumb)){grid-template-columns:minmax(0,1fr);grid-template-areas:"cat" "ttl" "meta"}
html body.pcb #list .card .pcm-thumb{grid-area:th;width:88px;height:66px;aspect-ratio:auto!important;margin:0!important;border-radius:10px!important}
html body.pcb #list .card .pcm-thumb-video{font-size:22px!important}
html body.pcb #list .card .pcm-badges{right:3px!important;bottom:3px!important;gap:3px!important}
html body.pcb #list .card .pcm-badges span{padding:1px 5px!important;font-size:9.5px!important}
html body.pcb #list .card .cat{grid-area:cat;justify-self:start;margin:0 0 3px!important;padding:2px 7px!important;font-size:10.5px!important;line-height:1.5!important}
html body.pcb #list .card h3{grid-area:ttl;margin:0!important;font-size:15.5px!important;line-height:1.45!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html body.pcb #list .card .pv{display:none!important}
html body.pcb #list .card .meta{grid-area:meta;margin:4px 0 0!important;gap:2px 10px!important;font-size:11.5px!important;line-height:1.5!important}
@media (min-width:768px){
  html body.pcb #list > .card{grid-template-columns:104px minmax(0,1fr);padding:14px 20px!important}
  html body.pcb #list .card .pcm-thumb{width:104px;height:78px}
  html body.pcb #list .card h3{font-size:16.5px!important}
}
@media (max-width:420px){
  html body.pcb #list > .card{grid-template-columns:72px minmax(0,1fr);column-gap:11px;padding:11px 12px!important}
  html body.pcb #list .card .pcm-thumb{width:72px;height:56px}
  html body.pcb #list .card h3{font-size:14.5px!important}
}

/* ── 페이지 번호 ── */
.pcb-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.pcb-pager button{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--pv6-line,#F0E5D9);border-radius:10px;
  background:#fff;color:var(--v7-ink,#27213F);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.pcb-pager button.on{background:var(--v7-ink,#27213F);border-color:var(--v7-ink,#27213F);color:#fff}
.pcb-pager button:disabled{opacity:.4;cursor:default}

/* ── 상세·글쓰기: 페이지 안에서 보기 ── */
html body.pcb.pcb-view .wrap > :not(.topbar){display:none!important}
html body.pcb :is(#detailOvl,#writeOvl).on{position:static!important;display:block!important;inset:auto!important;
  width:100%!important;height:auto!important;margin:0!important;padding:0 0 48px!important;overflow:visible!important;
  background:none!important;pointer-events:none}
html body.pcb :is(#detailOvl,#writeOvl) > .sheet{position:static!important;top:auto!important;transform:none!important;
  width:100%!important;max-width:760px!important;max-height:none!important;margin:14px auto 0!important;overflow:visible!important;
  padding:22px 22px 26px!important;border:1px solid var(--pv6-line,#F0E5D9)!important;border-radius:22px!important;
  background:#fff!important;box-shadow:0 10px 30px rgba(39,33,63,.06)!important;pointer-events:auto}
html body.pcb :is(#detailOvl,#writeOvl) > .sheet::before{content:none!important;display:none!important}
html body.pcb #detailBox h2{font-size:22px!important;line-height:1.45!important}
.pcb-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 14px;padding:7px 12px;border:1px solid var(--pv6-line,#F0E5D9);
  border-radius:10px;background:#fff;color:var(--v7-ink,#27213F);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pcb-back:hover{background:#FFFBF8}
@media (max-width:560px){
  html body.pcb :is(#detailOvl,#writeOvl) > .sheet{margin-top:10px!important;padding:16px 15px 22px!important;border-radius:18px!important}
  html body.pcb #detailBox h2{font-size:19px!important}
}