/* community-zine-s6.css — 원본 toonhub/css/community-zine.css 스테이지 분할(STEP3, 2026-07-30).
   S6 — 게시글 상세 / 댓글 / 관련글 / 게스트 댓글 게이트.
   규칙 본문·순서 무변경(byte-exact 이관). 토큰=base.css, radius=tokens.css. */
/* [분할 계약] S9 는 마지막 링크. 링크 순서 base -> s1 -> ... -> s9 유지.
   ★단 이것만으로 캐스케이드 동일이 보장되지 않는다(리뷰어 R3 정정). S9 가 base 를 갖고 다른 스테이지가 그
   오버라이드를 갖는 역방향 쌍이 존재한다 — .cmz .nt (base=S9 알림, 오버라이드=S8 모션 가드). 이 쌍은 가드를
   s9 말미로 별도 이관해 해소했다. 실측: 동일 셀렉터 중복 11쌍 = Sx->S9 정방향 10 + S9->S8 역방향 1.
   S9 는 라이트 테마·@media(max-width:620px) 만이 아니라 방문기록바·레벨배지·알림·푸터도 갖는다
   = "뒤에 와야 하는 규칙만 모인 파일"이 아니다. 신규 분할·이관 시 중복 유무가 아니라 방향까지 확인할 것.
   또한 화면 무변화는 미링크 규칙이 현행 마크업에 매치되지 않을 때만 따라온다 — 짝 규칙(중립화 오버라이드·
   누출 해제)은 활성 스테이지로 이관해야 한다(R1·R2 선례: s1 말미 이관 구역). */
/* [활성화] 해당 스테이지 착수 1단계 = toonhub/ToonHerb.html 의 이 파일 link 주석 해제. */

/* 50% = 원형 요소 전용. 이 파일의 border-radius:50% 3건은 전부 원형 요소(도트·아바타·아이콘 원판) 전용 — CLAUDE.md 8-2 ② 사유 주석. 원본 1파일 시절 s1 중간의 "이하 파일 전체" 주석이 덮던 커버리지를 분할 후 파일별로 승계. */

/* ===== 게시글 상세 ===== */
/* ★평론 상세(review.js renderRevDetail)도 renderPostDetailCard(utils.js)의 이 pd-* 골격을 그대로 쓴다.
   작품상세(.cmz 밖)에서도 걸리도록 .rvz 를 병기하되, 평론 상세가 실제로 발행하지 않는 클래스
   (pd-av·pd-mbtn·pd-img·pd-nsp·pd-vote b — 게시글 상세 전용 아바타/메뉴/본문이미지/네비스페이서)는
   제외한다. 값 무변경 — 커뮤니티(.cmz)는 이중매치일 뿐 동일 결과. */
.cmz .pd-crumb,.rvz .pd-crumb{display:flex;align-items:center;gap:9px;font-family:'Space Mono';font-size:10.5px;letter-spacing:.06em;color:var(--t3);margin-bottom:12px}
.cmz .pd-c-sep,.rvz .pd-c-sep{color:var(--bor2)}
.cmz .pd-c-no,.rvz .pd-c-no{color:var(--acc-br)}
.cmz .pd-back,.rvz .pd-back{margin-left:auto;font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--t2);border:1px solid var(--hair);padding:4px 10px}
.cmz .pd-back:hover,.rvz .pd-back:hover{color:var(--acc-br);border-color:var(--acc)}
.cmz .pd-card,.rvz .pd-card{border:1px solid var(--bor);background:var(--pane)}
.cmz .pd-head,.rvz .pd-head{padding:20px 22px 14px;border-bottom:1px solid var(--hair)}
.cmz .pd-title,.rvz .pd-title{font-family:'Chakra Petch',var(--font);font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.4px;text-wrap:balance;margin-bottom:13px}
.cmz .pd-meta,.rvz .pd-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--t3)}
.cmz .pd-meta .mono,.rvz .pd-meta .mono{font-size:10.5px}
.cmz .pd-av{width:22px;height:22px;border-radius:50%;background:var(--acc-dim);border:1px solid var(--bor);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--acc-br);flex:none}
.cmz .pd-au,.rvz .pd-au{font-size:12.5px;font-weight:700;color:var(--t1)}
/* #1 리뷰어 지적 — 클릭 요소 cursor 누락 전수. [onclick] 한정 = 차단(_blk) 시 pd-au 에 onclick 이
   빠져 클릭 불가한 경우까지 커서를 잘못 얹지 않기 위함(review.js:132/153). */
.cmz .pd-au[onclick],.rvz .pd-au[onclick]{cursor:pointer}
/* R2 봉합(재작업) — renderNickOnly 가 author-nick 을 병기하며 .author-nick:hover(components.css)가
   무조건(red) 발효한다 — [onclick] 게이트를 걸면 clickable=false 경로(닉 미상 등, 비차단)가 이 규칙에
   안 걸려 red 가 그대로 새고, cursor 는 없는데 색만 바뀌는 어긋난 조합이 생긴다(1차 수정 결함).
   대조군 카드 .rv-nick:hover(s4.css:61)도 [onclick] 무조건이라 색 규칙은 여기도 무조건으로 맞춘다 —
   커서 게이트(위 줄)만 [onclick] 유지, 색은 뗀다. specificity(0,3,0) > .author-nick:hover(0,2,0)로
   상세도 카드와 동색 통일. hub.js 게시글 상세의 pd-au 는 래퍼(자식 author-nick 이 자체 color:hover 규칙을
   직접 갖고 있어 그 자체값이 상속보다 우선) — 실측(Playwright) 결과 그쪽 hover 색 무변, 아래 보고 참고. */
.cmz .pd-au:hover,.rvz .pd-au:hover{color:var(--acc-br)}
.cmz .pd-mdot,.rvz .pd-mdot{width:3px;height:3px;border-radius:50%;background:var(--bor2)}
.cmz .pd-mbtn{width:28px;height:28px;display:grid;place-items:center;color:var(--t3);border:1px solid var(--hair)}
.cmz .pd-mbtn:hover{color:var(--acc-br);border-color:var(--acc)}
.cmz .pd-mbtn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}
.cmz .pd-body,.rvz .pd-body{padding:22px}
.cmz .pd-body p,.rvz .pd-body p{font-size:14px;line-height:1.85;color:var(--t2);margin-bottom:15px;text-wrap:pretty;max-width:680px}
.cmz .pd-img{aspect-ratio:16/10;background-size:cover;background-position:center;border:1px solid var(--hair);margin:18px 0}
.cmz .pd-act,.rvz .pd-act{display:flex;align-items:center;gap:8px;padding:14px 22px;border-top:1px solid var(--hair);flex-wrap:wrap}
.cmz .pd-vote,.rvz .pd-vote{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--t2);border:1px solid var(--bor);padding:8px 14px;transition:.12s}
.cmz .pd-vote svg,.rvz .pd-vote svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.cmz .pd-vote b{font-family:'Space Mono'}
.cmz .pd-vote:hover,.rvz .pd-vote:hover{border-color:var(--acc);color:var(--acc-br)}
.cmz .pd-vote.up,.rvz .pd-vote.up{color:var(--acc);border-color:var(--acc);background:var(--acc-dim)}
/* 비추 활성 — .pd-vote.up 의 짝이 없었다. 색축은 기존 부정 신호를 그대로 따른다
   (pages.css:821 .rev-card-dislike.disliked = var(--neg)). 새 색을 고르지 않는다.
   2026-08-07 색 의미축 통일로 --score-neg(파랑) -> --neg(밝은 빨강)로 옮겼다. */
.cmz .pd-vote.down,.rvz .pd-vote.down{color:var(--neg);border-color:var(--neg);background:color-mix(in srgb,var(--neg) 12%,transparent)}
/* 평론 상세 메타 우측 총점 — pd-meta 가 flex 라 margin-left:auto 로 민다.
   정상 케이스(작품 찾음)는 상단 작품카드(rd-axes/rd-score)가 총점·축점수를 이미 그려 여기선 미출력.
   작품이 삭제·유실돼 getWork 가 null 인 경우(reviews.wid 는 FK 없는 소프트링크, 0028_reviews.sql)만
   _revWorkCardHTML 이 카드째 미출력되므로, 그때에 한해 이 자리에 총점을 되살린다(review.js metaHtml). */
.cmz .pd-sc,.rvz .pd-sc{margin-left:auto;font-family:'Chakra Petch',var(--font);font-size:20px;font-weight:700;line-height:1;letter-spacing:-.5px;color:var(--acc)}
.cmz .pd-sc--mid,.rvz .pd-sc--mid{color:var(--gold)}
.cmz .pd-sc--neg,.rvz .pd-sc--neg{color:var(--neg)}
.cmz .pd-act-sp,.rvz .pd-act-sp{flex:1}
.cmz .pd-sub,.rvz .pd-sub{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t3)}
.cmz .pd-sub:hover,.rvz .pd-sub:hover{color:var(--acc-br)}
.cmz .pd-sub svg,.rvz .pd-sub svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.9;fill:none}
.cmz .pd-nav,.rvz .pd-nav{display:flex;align-items:center;gap:7px;padding:12px 22px;border-top:1px solid var(--hair);background:var(--pane2)}
.cmz .pd-nsp{flex:1}
.cmz .pd-nb,.rvz .pd-nb{font-size:12px;font-weight:700;color:var(--t2);border:1px solid var(--bor);padding:7px 13px;white-space:nowrap}
.cmz .pd-nb:hover,.rvz .pd-nb:hover{color:var(--acc-br);border-color:var(--acc)}

/* ===== 댓글 ===== */
.cmz .cs{margin-top:28px}
.cmz .cs-cnt{font-family:'Space Mono';font-size:12px;font-weight:700;color:var(--acc-br)}
.cmz .cs-sorts{display:flex;gap:9px;flex:none}
.cmz .cs-sb{font-family:'Space Mono';font-size:11px;color:var(--t3)}
.cmz .cs-sb.on{color:var(--t1);font-weight:700}
.cmz .cf{border:1px solid var(--bor);background:var(--pane);margin-bottom:16px}
.cmz .cf-ta{width:100%;background:none;border:none;color:var(--t1);font-size:13px;line-height:1.6;padding:13px 14px;min-height:76px;resize:vertical;outline:none}
.cmz .cf-ta::placeholder{color:var(--t3)}
.cmz .cf-foot{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--hair)}
.cmz .cf-tb{font-size:10px;font-weight:700;color:var(--danger);border:1px solid var(--danger);padding:3px 8px}
.cmz .cf-cnt{font-size:10px;color:var(--t3);margin-left:auto}
.cmz .cf-sub{font-size:12.5px;font-weight:700;color:var(--c-white);background:var(--acc-br);padding:7px 17px}
.cmz .cm-bestwrap{border:1px solid var(--acc);background:var(--acc-dim);padding:4px 14px;margin-bottom:14px}
.cmz .cm-bh{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--acc-br);padding:9px 0 4px}
.cmz .cm-list{border-top:1px solid var(--hair)}
.cmz .cm{padding:13px 14px;border-bottom:1px solid var(--hair)}
.cmz .cm-reply{border-left:2px solid var(--bor2);background:var(--pane)}
.cmz .cm-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.cmz .cm-av{width:24px;height:24px;border-radius:50%;background:var(--bg4);border:1px solid var(--bor);display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--acc-br);flex:none}
.cmz .cm-u{font-size:12.5px;font-weight:700;color:var(--t1)}
.cmz .cm-best{font-size:9px;font-weight:700;color:var(--led);border:1px solid var(--led);padding:0 5px}
.cmz .cm-d{font-size:10px;color:var(--t3);margin-left:auto}
/* 말풍선 */
.cmz .cm-b{position:relative;font-size:13px;line-height:1.7;color:var(--t2);margin-left:32px;background:var(--pane2);border:1px solid var(--hair);border-radius:var(--r1);padding:11px 13px;text-wrap:pretty;max-width:660px}
.cmz .cm-b::before{content:"";position:absolute;top:-5px;left:13px;width:8px;height:8px;background:var(--pane2);border-left:1px solid var(--hair);border-top:1px solid var(--hair);transform:rotate(45deg)}
.cmz .cm-reply .cm-b{background:var(--bg4)}
.cmz .cm-reply .cm-b::before{background:var(--bg4)}
/* 스포일러 — 내용 가리고 사유를 명시 */
.cmz .cm-b.spoil{position:relative;color:transparent;user-select:none;cursor:pointer;background:repeating-linear-gradient(45deg,var(--bg4) 0 7px,var(--pane2) 7px 14px);border-color:var(--spoiler);min-height:46px}
.cmz .cm-b.spoil::before{border-color:var(--spoiler);background:var(--bg4)}
.cmz .cm-b.spoil>*{visibility:hidden}
/* content 문자열에서 시안의 선행 경고 이모지 1자 제거 — CLAUDE.md 8절(렌더 HTML 이모지 전면 금지). 이 파일 유일한 콘텐츠 문자열 변경 */
.cmz .cm-b.spoil::after{content:"스포일러 — 클릭하여 보기";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--spoiler);pointer-events:none}
.cmz .cm-b.spoil:hover::after{color:var(--t1)}
.cmz .cm.reveal .cm-b.spoil{color:var(--t2);background:var(--pane2);border-color:var(--hair)}
.cmz .cm.reveal .cm-b.spoil::after{display:none}
.cmz .cm.reveal .cm-b.spoil>*{visibility:visible}
.cmz .cm.reveal .cm-b.spoil::before{border-color:var(--hair);background:var(--pane2)}
.cmz .sp-tag{font-size:9.5px;font-weight:700;color:var(--spoiler);border:1px solid var(--spoiler);padding:1px 5px;margin-right:6px}
.cmz .cm-f{display:flex;align-items:center;gap:14px;padding-left:32px;margin-top:8px}
.cmz .cm-f button{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--t3)}
.cmz .cm-f button:hover{color:var(--acc-br)}
.cmz .cm-f button.on{color:var(--acc-br)}
.cmz .cm-f svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
/* 답글 스레드 접기 */
.cmz .cm-fold{margin-left:auto;font-family:'Space Mono';font-size:10px;font-weight:700;color:var(--t3);border:1px solid var(--hair);padding:2px 8px}
.cmz .cm-fold:hover{color:var(--acc-br);border-color:var(--acc)}

/* ===== 관련글 ===== */
.cmz .rel{margin-top:28px}
.cmz .rel-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cmz .rel-list{border:1px solid var(--bor);background:var(--pane)}
.cmz .rel-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hair);cursor:pointer;transition:.12s}
.cmz .rel-row:last-child{border-bottom:none}
.cmz .rel-row:hover{background:var(--pane2)}
.cmz .rel-t{font-size:12.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cmz .rel-row:hover .rel-t{color:var(--acc-br)}
.cmz .rel-m{font-size:10px;color:var(--t3);flex:none}

/* ===== 게스트 댓글 게이트 ===== */
.cmz .cf-guest{display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--bor2);background:var(--pane);padding:20px;font-size:13px;font-weight:700;color:var(--t2);cursor:pointer;margin-bottom:16px;transition:.12s}
.cmz .cf-guest:hover{border-color:var(--acc);color:var(--acc-br);background:var(--acc-dim)}
.cmz .cf-guest b{color:var(--acc-br)}