/* community-zine-s2.css — 원본 toonhub/css/community-zine.css 스테이지 분할(STEP3, 2026-07-30).
   S2 — 정렬·말머리·뷰토글 / 이미지뷰 / 카드뷰 / BEST 댓글 / 검색·글쓰기 바 / 검색 결과.
   규칙 본문·순서 무변경(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 주석 해제. */

/* ===== 정렬+말머리+뷰토글 한 줄 ===== */
.cmz .pfx-wrap{position:relative}
.cmz .pfx-row{display:flex;align-items:center;gap:3px;padding:6px 10px;border-bottom:1px solid var(--bor);overflow-x:auto;scrollbar-width:none}
.cmz .pfx-t.has-sub::after{content:"";display:inline-block;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3.5px solid currentColor;opacity:.5;margin-left:4px;vertical-align:2px}
.cmz .pfx-bubble{position:absolute;top:calc(100% - 1px);left:12px;z-index:12;display:inline-flex;align-items:center;gap:2px;padding:6px 10px;background:var(--bg4);border:1px solid var(--bor2);border-radius:var(--r1);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.cmz .pfx-bubble[hidden]{display:none}
.cmz .pfx-bubble::before{content:"";position:absolute;top:-5px;left:var(--caret,28px);width:9px;height:9px;background:var(--bg4);border-left:1px solid var(--bor2);border-top:1px solid var(--bor2);transform:rotate(45deg)}
.cmz .pfx-sub{font-size:12px;font-weight:600;color:var(--t2);padding:3px 8px;white-space:nowrap;transition:.12s}
.cmz .pfx-sub:hover{color:var(--t1)}
.cmz .pfx-sub.on{font-weight:700}
.cmz .pfx-sep{color:var(--bor2);font-size:10px}
.cmz .pfx-row::-webkit-scrollbar{display:none}
.cmz .pfx-t{border-bottom:2px solid transparent;color:var(--t3);font-size:12.5px;font-weight:600;padding:3px 9px 5px;white-space:nowrap;transition:.12s}
.cmz .pfx-t:hover{color:var(--t1)}
.cmz .pfx-t.on{color:var(--t1);font-weight:700;border-bottom-color:var(--acc-br)}
.cmz .pfx-div{width:1px;background:var(--bor2);margin:2px 6px;align-self:stretch;flex:none}
.cmz .pfx-vt{margin-left:auto;flex:none}
.cmz .bd-vt{display:flex;border:1px solid var(--hair)}
.cmz .vt-b{width:28px;height:24px;display:grid;place-items:center;color:var(--t3)}
.cmz .vt-b svg{width:13px;height:13px}
.cmz .vt-b.on{color:var(--c-white);background:var(--acc-br)}
.cmz .hot-sorts{display:flex;gap:3px;padding:6px 10px;border-bottom:1px solid var(--bor)}

/* ===== 이미지뷰 카드 ===== */
.cmz .bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px;padding:14px 0}
/* [이관→s1] .cmz .bd-card{...} 와 .cmz .bd-card:hover{...} 2규칙은 community-zine-s1.css 말미 이관 구역으로 옮겼다.
   사유: 이미지뷰는 S2 신설이 아니라 기존 기능(S.boardView=list|image)이고 현행 boardCardHTML 이 .bd-card 를 발행한다 = HEAD 에서 활성이었다.
   여기 남겨두면 미링크로 pages.css:981-982 로 되돌아가 background·border-radius·transition·hover 4속성이 바뀐다(화면 변경).
   S2가 신설하는 건 카드뷰다. 아래 .bc-* 는 현행이 하이픈형(bd-card-thumb/bd-card-body/bd-card-title)이라 전부 미매치 = 정상 대기. */
.cmz .bc-th{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--pane2)}
.cmz .bc-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.cmz .bd-card:hover .bc-img{transform:scale(1.05)}
.cmz .bc-noth{display:grid;place-items:center}
.cmz .bc-noth span{font-family:'Black Han Sans';font-size:34px;color:var(--t3);opacity:.5}
.cmz .bc-body{padding:10px 11px 11px}
.cmz .bc-meta{display:flex;align-items:center;gap:6px;margin-bottom:5px;min-width:0}
.cmz .bc-au{font-family:'Space Mono';font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmz .bc-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;min-height:36px}
.cmz .bd-card:hover .bc-title{color:var(--acc-br)}
.cmz .bc-foot{display:flex;gap:11px;font-family:'Space Mono';font-size:10px;color:var(--t3)}
.cmz .bc-foot span{display:inline-flex;align-items:center;gap:3px}
.cmz .bc-foot svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.9;fill:none}
.cmz .bc-up.mid,.cmz .bc-up.hot{color:var(--acc-br)}

/* ===== 카드뷰 (1열 리딩 카드) ===== */
.cmz .bd-cardfeed{display:grid;gap:0;padding:6px 0 4px}
.cmz .bd-wrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:26px;align-items:start;border-bottom:1px solid var(--bor)}
.cmz .bd-wcard{padding:16px 2px 14px;cursor:pointer;transition:.12s}
.cmz .bd-wcard:hover{background:var(--pane)}
/* 피드 하단 — 자동 로드 / 더 보기 / 페이지 전환 */
.cmz .feed-more{display:grid;place-items:center;padding:18px 0 6px}
.cmz .feed-mbtn{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:var(--t1);border:1px solid var(--bor2);background:var(--pane);padding:9px 18px;transition:.12s}
.cmz .feed-mbtn:hover{border-color:var(--acc-br);color:var(--acc-br)}
.cmz .feed-mbtn span{font-size:10px;font-weight:400;color:var(--t3)}
.cmz .feed-end,.cmz .feed-switch{text-align:center;font-size:10px;letter-spacing:.1em;color:var(--t3);padding:18px 0 8px}
.cmz .feed-switch{color:var(--t2)}

/* ===== 카드뷰 우측 — BEST 댓글 말풍선 ===== */
.cmz .bdw-best{position:relative;margin:16px 0 14px;min-width:0;display:grid;gap:10px;align-content:start}
.cmz .bdw-best.slim{margin:12px 0 0}
.cmz .bdw-best.slim .bdw-bhd{display:none}
.cmz .bdw-best.slim .bdw-bub{padding:9px 12px 8px 14px}
.cmz .bdw-best.slim .bdw-bbody{-webkit-line-clamp:2}
.cmz .bdw-best.slim .bdw-bfoot{margin-top:6px}
.cmz .bdw-best.empty{display:none}
.cmz .bdw-bhd{font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--t3);display:flex;align-items:center;gap:6px;height:17px}
.cmz .bdw-bhd::after{content:"";flex:1;height:1px;background:var(--bor)}
.cmz .bdw-bub{position:relative;cursor:pointer;background:var(--pane);border:1px solid var(--bor2);box-shadow:3px 3px 0 var(--hair);padding:11px 13px 10px 15px;transition:.12s}
.cmz .bdw-bub:hover{border-color:var(--acc-br);box-shadow:3px 3px 0 var(--acc-dim)}
.cmz .bdw-bub::before,.cmz .bdw-bub::after{content:"";position:absolute;left:-9px;top:15px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:9px solid var(--bor2)}
.cmz .bdw-bub::after{left:-7px;border-right-color:var(--pane)}
.cmz .bdw-bub:hover::before{border-right-color:var(--acc-br)}
.cmz .bdw-rank{position:absolute;left:0;top:0;font-size:9px;font-weight:700;color:var(--acc-br);background:var(--acc-dim);padding:1px 4px}
.cmz .bdw-bbody{font-size:12.5px;line-height:1.65;color:var(--t1);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.cmz .bdw-bfoot{display:flex;align-items:center;gap:9px;margin-top:8px;font-family:'Space Mono';font-size:10px;color:var(--t3)}
.cmz .bdw-bau{color:var(--t2);font-family:var(--font);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.cmz .bdw-bup{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--acc-br);margin-left:auto}
.cmz .bdw-bup svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;fill:none}
.cmz .bdw-bmore{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--t3);text-align:left;padding:0}
.cmz .bdw-bmore:hover{color:var(--acc-br)}
@media(max-width:900px){
  .cmz .bd-wrow{grid-template-columns:1fr;gap:0}
  .cmz .bdw-best{margin:0 0 18px}
  .cmz .bdw-bub::before,.cmz .bdw-bub::after{left:16px;top:-9px;border:none;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid var(--bor2)}
  .cmz .bdw-bub::after{top:-7px;border-bottom-color:var(--pane)}
  .cmz .bdw-bub:hover::before{border-bottom-color:var(--acc-br)}
}
.cmz .bd-wcard.read .bdw-title{color:var(--t2)}
.cmz .bdw-hd{display:flex;align-items:center;gap:7px;min-width:0;margin-bottom:7px}
.cmz .bdw-au{font-size:11.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.cmz .bdw-dot{color:var(--bor2);font-size:10px}
.cmz .bdw-tm{font-size:10px;color:var(--t3)}
.cmz .bdw-title{font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.3px;color:var(--t1);text-wrap:pretty}
.cmz .bd-wcard:hover .bdw-title{color:var(--acc-br)}
.cmz .bdw-th{position:relative;margin-top:11px;height:340px;overflow:hidden;background:var(--pane2);border:1px solid var(--hair)}
.cmz .bdw-img{position:absolute;inset:0;background-size:cover;background-position:center 22%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cmz .bd-wcard:hover .bdw-img{transform:scale(1.03)}
.cmz .bdw-ab{display:flex;align-items:center;gap:4px;margin-top:11px;margin-left:-7px}
.cmz .bdw-b{display:inline-flex;align-items:center;gap:5px;font-family:'Space Mono';font-size:10.5px;font-weight:700;color:var(--t3);padding:5px 7px}
.cmz .bdw-b:hover{color:var(--t1);background:var(--pane2)}
.cmz .bdw-b svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.9;fill:none}
.cmz .bdw-up.mid,.cmz .bdw-up.hot{color:var(--acc-br)}
@media(max-width:640px){.cmz .bdw-th{height:240px}.cmz .bdw-title{font-size:15px}}
.cmz .bc-up.hot{color:var(--led)}

/* ===== 검색·글쓰기 바 ===== */
.cmz .bd-bar{display:flex;align-items:center;gap:10px;padding:13px 0;flex-wrap:wrap}
.cmz .bd-bar-r{justify-content:flex-end}
.cmz .bd-search{display:flex;align-items:center;border:1px solid var(--bor);background:var(--pane);flex:1;max-width:330px}
.cmz .bd-search select{background:none;border:none;color:var(--t2);font-size:11.5px;padding:8px 6px 8px 10px;outline:none}
.cmz .bd-search input{flex:1;min-width:0;background:none;border:none;color:var(--t1);font-size:12.5px;padding:8px 6px;outline:none}
.cmz .bd-search input::placeholder{color:var(--t3)}
.cmz .bd-sbtn{width:34px;height:100%;display:grid;place-items:center;color:var(--t3);border-left:1px solid var(--hair)}
.cmz .bd-sbtn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.cmz .bd-sbtn:hover{color:var(--acc-br)}
.cmz .wfab{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--c-white);background:var(--acc-br);border:1px solid var(--acc-br);padding:8px 15px;transition:.12s}
.cmz .wfab:hover{background:var(--acc)}
.cmz .wfab svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.cmz .wfab.sm{margin-left:auto;font-size:11.5px;padding:6px 12px}
.cmz .pager{display:flex;justify-content:center;gap:4px;padding:16px 0}
.cmz .pg-b{min-width:28px;height:28px;font-family:'Space Mono';font-size:11.5px;font-weight:700;color:var(--t2);border:1px solid var(--hair);background:var(--pane);padding:0 7px}
.cmz .pg-b:hover{border-color:var(--acc);color:var(--acc-br)}
.cmz .pg-b.on{color:var(--c-white);background:var(--acc-br);border-color:var(--acc-br)}
.cmz .pg-b:disabled{opacity:.35;cursor:default}
.cmz .pg-e{color:var(--t3);padding:0 3px;align-self:center;font-size:11px}

/* ===== 검색 결과 ===== */
.cmz .src-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.cmz .src-inp{max-width:400px;flex:1}
.cmz .src-inp input{font-size:14px;font-weight:600}
.cmz .src-sum{font-size:11.5px;color:var(--t3)}
.cmz .src-sum b{color:var(--acc-br)}
.cmz .src-tabs{margin-bottom:20px}
.cmz .src-c{font-family:'Space Mono';font-size:9.5px;font-weight:700;margin-left:5px;opacity:.75}
.cmz .src-sec{margin-bottom:26px}
.cmz .src-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cmz .sec-more{font-family:'Space Mono';font-size:10.5px;font-weight:700;color:var(--t2);border:1px solid var(--hair);padding:4px 10px;flex:none;white-space:nowrap}
.cmz .sec-more:hover{color:var(--acc-br);border-color:var(--acc)}
.cmz .togchip{font-size:12px;color:var(--t2);background:var(--bg);border:1px solid var(--bor);padding:6px 13px;cursor:pointer;transition:.12s;white-space:nowrap}
.cmz .togchip:hover{border-color:var(--bor2);color:var(--t1)}
.cmz .togchip.on{color:var(--c-white);background:var(--acc-br);border-color:var(--acc-br)}
.cmz .chips{display:flex;flex-wrap:wrap;gap:6px}
.cmz .fld{margin-bottom:14px}
.cmz .flabel{font-family:'Space Mono';font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--acc-br);margin-bottom:8px}

/* ===== S2 배선 보강 구역 (디렉터 승인 append, 2026-07-30 — 기존 규칙 무수정·순서 불변) ===== */
/* [편차②해소] 시안 .bdw-hd 는 <span class="sp" style="flex:1"> 인라인 스페이서로 HOT/BEST 를 우측 정렬했다
   (comm-boards.js bdCardWide). .sp 의 CSS 는 이식제외 셸 스코프(.topbar .sp / .pvbar .sp)에만 있어 재현 불가였다
   → 인라인 스타일을 CSS 로 승격(§8 인라인 레이아웃 금지 준수). 마크업은 <span class="sp"></span> 발행. */
.cmz .bdw-hd .sp{flex:1}
/* [tombstone] 카드뷰 tombstone 지오메트리 복원. .bd-wcard 를 붙이면 s1 .cmz .bd-blind(0,2,0)를
   s2 .cmz .bd-wcard(0,2,0)가 후순위 링크로 이겨 cursor:pointer + :hover 배경이 해치를 덮는다(R2 동형 함정).
   다중클래스로 특이도를 올려(0,3,0)/(0,4,0) 되찾는다 = 파일 내 위치 무관 승리.
   선언은 community-zine-s1.css 의 .cmz .bd-blind,.cmz .bd-blind:hover 본문을 문자 그대로 복사했다. */
.cmz .bd-wcard.bd-blind,.cmz .bd-wcard.bd-blind:hover{cursor:default;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(128,128,128,.07) 6px 12px)}