/* community-zine-s1.css — 원본 toonhub/css/community-zine.css 스테이지 분할(STEP3, 2026-07-30).
   S1 — 공통 유틸 / 커뮤니티 탭바 / 섹션 헤드 / 목록 테이블 / tombstone. 활성.
   규칙 본문·순서 무변경(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 .mono{font-family:'Space Mono',monospace}
.cmz .barbar{flex:1;height:14px;min-width:24px;color:var(--bor2);background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 5px,transparent 5px 6px,currentColor 6px 9px,transparent 9px 11px,currentColor 11px 12px,transparent 12px 15px)}
/* 50% = 원형 도트(LED). 이 파일의 border-radius:50% 3건은 전부 원형 요소(도트·아바타·아이콘 원판) 전용 — CLAUDE.md 8-2 ② 사유 주석. 분할 후 각 스테이지 파일이 동일 주석을 자체 보유한다(원본 "이하 파일 전체" 커버리지 승계) */
.cmz .led{width:6px;height:6px;border-radius:50%;background:var(--cz-led);box-shadow:var(--cz-led-glow);display:inline-block;flex:none;animation:ledpulse 1.9s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.cmz .led,.cmz .hled{animation:none!important}}
.cmz .empty{padding:40px 0;text-align:center;font-size:12.5px;color:var(--t3)}
.cmz .empty small{display:block;margin-top:6px;font-size:11px;color:var(--t3);opacity:.85}

/* ===== 커뮤니티 탭바 ===== */
.cmz .comm-hd{display:flex;align-items:baseline;gap:11px;margin-bottom:2px}
.cmz .comm-t{font-family:'Chakra Petch',var(--font);font-size:23px;font-weight:700;letter-spacing:-.4px}
.cmz .comm-hd .mono{font-size:10.5px;letter-spacing:.11em;color:var(--t3)}
.cmz .tabbar{display:flex;align-items:center;gap:3px;padding:11px 0 9px;border-bottom:1px solid var(--bor);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.cmz .tabbar::-webkit-scrollbar{display:none}
.cmz .ctab{padding:6px 12px;border-radius:var(--r1);font-size:12.5px;font-weight:700;color:var(--t2);white-space:nowrap;transition:.12s}
.cmz .ctab:hover{color:var(--t1)}
.cmz .ctab.on{background:var(--acc-br);color:var(--c-white)}

/* ===== 섹션 헤드 ===== */
.cmz .st-num{font-size:11px;font-weight:700;color:var(--acc-br);flex:none}
.cmz .sdot{width:6px;height:6px;border-radius:50%;background:var(--acc-br);flex:none}
.cmz .st-t{font-weight:700;font-size:16.5px;letter-spacing:-.3px;flex:none}
.cmz .st-s{font-size:10.5px;color:var(--t3);flex:none}
.cmz .hot-hd,.cmz .hot-hd2,.cmz .hub-hd,.cmz .cs-hd{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.cmz .hot-hd2{margin-top:26px}

/* ===== 목록 테이블 ===== */
/* .bd-row/.bd-tt/.bd-table 에 시안 밀도 B(기본 확정) 값 접어넣음: min-height 46px, border-bottom var(--bor), bd-tt 13.5px */
.cmz .bd-table{border-top:1px solid var(--bor);background:var(--pane)}
.cmz .bd-row{display:grid;grid-template-columns:64px 1fr 84px 56px 50px 42px;align-items:center;gap:8px;padding:0 12px;min-height:46px;border-bottom:1px solid var(--bor);cursor:pointer;transition:background .12s}
.cmz .bd-row:hover{background:var(--pane2)}
.cmz .bd-row.pinned{background:var(--acc-dim)}
.cmz .bd-row.notice{background:var(--pane2)}
/* .bd-head는 위 .bd-row의 den-b 46px를 그대로 상속(시안 실렌더 동일. 시안 원본 Design/design_handoff_community/community/comm-boards.js 의 HEAD 정의가 class="bd-row bd-head" 동시 보유 — toonhub/ 내 파일이 아니다).
   시안의 .bd-head 자체 min-height:30px 선언은 전 밀도(a 33px·b 46px·c display:none)에서 특이도로 사강한 죽은 선언 → 미이식.
   컴팩트 헤더가 필요하면 디자이너 별건 결정 사항(행 높이=디자인 결정, 제작자 권한 밖).
   border-top:0 / font-weight:400 = 명시적 해제. pages.css 의 .bd-row.bd-head(모달용 — .cmz 밖 소비처 user-menu.js openUserPosts)가 선언하는 border-top·font-weight 가 동일 특이도(0,2,0) + 선순위 로드라 .cmz 안으로 새어 들어온다. 시안은 border-top 을 컨테이너 .bd-table 에만 두고(중복 시 상단 2px) .bd-head 엔 font-weight 선언이 없다(Space Mono 400). */
.cmz .bd-head{background:var(--pane2);cursor:default;font-family:'Space Mono';font-size:10px;letter-spacing:.06em;color:var(--t3);text-transform:uppercase;border-top:0;font-weight:400}
.cmz .bd-head:hover{background:var(--pane2)}
/* ★누출 해제(S1). 시안이 선언하지 않은 속성을 pages.css 의 동명 규칙이 유일 소유하면(특이도 (0,1,0)/(0,2,0)) 이 스코프 안으로 새어 들어온다.
   pages.css 쪽은 지울 수 없다 — .cmz 밖 소비처(user-menu.js openUserPosts 모달 헤더행)가 그 선언들을 받는다.
   그래서 시안 원본값으로 이쪽에서 명시 해제한다. inherit = 시안이 무선언이라 상속받던 값의 정확한 재현.
   해제 보유 규칙: bd-flair · bd-title · bd-hot · bd-best · bd-pin · bd-poppin · bd-card (총 7).
   ★분할 후 실측 정정(리뷰어 R2): 이 섹션 안에 있는 건 6건이고 bd-card 는 이미지뷰 섹션 소속이라 파일이 갈렸다
     → 이 파일 말미 "활성 스테이지 이관 구역" 으로 되돌려 7건 성립. .bd-card:hover(border-color) 는 해제가 아니라 값 오버라이드라 이 7건에 불산입.
     bd-head 의 border-top:0 / font-weight:400 은 바로 위 별 주석이 담당(중복 계수 아님).
   해제 안 한 잔여(무해 판정): bd-flair 의 white-space,overflow,text-overflow / bd-title 의 overflow,white-space
     — 시안은 자식(bd-src, bd-tt)이 자체 클리핑을 갖고 셀 폭도 동일해 렌더 결과 차이 0. */
.cmz .bd-flair{min-width:0;font-size:inherit;font-weight:inherit}
.cmz .bd-pfx{font-size:11px;font-weight:700}
.cmz .bd-src{font-family:'Space Mono';font-size:10px;font-weight:700;color:var(--acc-br);border:1px solid var(--bor);padding:1px 5px;white-space:nowrap;overflow:hidden;display:inline-block;max-width:100%}
.cmz .bd-title{display:flex;align-items:center;gap:6px;min-width:0;font-size:inherit}
.cmz .bd-tt{font-size:13.5px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmz .bd-row:hover .bd-tt{color:var(--acc-br)}
.cmz .bd-cmt{font-family:'Space Mono';font-size:10.5px;font-weight:700;color:var(--acc-br);flex:none}
/* 이미지 포함 표식 */
.cmz .bd-im{display:inline-flex;color:var(--t3);flex:none}
.cmz .bd-im svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.7;fill:none}
.cmz .bd-row:hover .bd-im{color:var(--acc-br)}
/* 방문 표식 */
.cmz .bd-row.read .bd-tt{color:var(--t3)}
.cmz .bd-row.read:hover .bd-tt{color:var(--acc-br)}
.cmz .bd-hot{display:inline-flex;align-items:center;gap:3px;font-family:'Space Mono';font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--cz-hot);border:1px solid var(--cz-hot-bor);padding:0 5px;flex:none;text-shadow:0 0 8px color-mix(in srgb,var(--led) 50%,transparent);background:none;border-radius:0;margin-left:0;line-height:inherit}
.cmz .hled{width:4px;height:4px;border-radius:50%;background:var(--cz-hled);box-shadow:var(--cz-hled-glow);animation:ledpulse 1.4s ease-in-out infinite}
.cmz .bd-best{font-family:'Space Mono';font-size:9.5px;font-weight:700;color:var(--gold);border:1px solid var(--gold);padding:0 5px;flex:none;background:none;border-radius:0;margin-left:0;line-height:inherit;letter-spacing:inherit}
.cmz .bd-pin{display:inline-block;width:7px;height:7px;background:var(--acc-br);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);flex:none;margin-right:0}
.cmz .bd-poppin{display:inline-flex;align-items:center;gap:3px;font-family:'Space Mono';font-size:9.5px;font-weight:700;color:var(--acc-br);flex:none;border:0;border-radius:0;padding:0;margin-right:0;line-height:inherit}
.cmz .bd-poppin svg{width:9px;height:9px}
.cmz .bd-author,.cmz .bd-date,.cmz .bd-views{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmz .bd-author{color:var(--t2)}
.cmz .bd-date,.cmz .bd-views{font-family:'Space Mono';font-size:10px;text-align:right}
.cmz .bd-up{font-family:'Space Mono';font-size:11.5px;font-weight:700;text-align:center;color:var(--t3)}
.cmz .bd-up.low{color:var(--t2)}
.cmz .bd-up.mid{color:var(--acc-br)}
.cmz .bd-up.hot{color:var(--cz-hot);text-shadow:0 0 8px color-mix(in srgb,var(--led) 45%,transparent)}
.cmz .bd-divider{height:3px;background:repeating-linear-gradient(90deg,var(--bor2) 0 4px,transparent 4px 8px)}

/* [R2 ← community-zine-s2.css 이미지뷰 카드 섹션] 이미지뷰는 S2 신설이 아니라 기존 기능(S.boardView=list|image).
   현행 boardCardHTML 이 .bd-card 를 발행하므로 HEAD 에서 활성이었다. s2(미링크)에 두면 pages.css:981-982 로 되돌아가
   background(--pane→--bg3)·border-radius(0→--r-sm)·transition·hover border-color 4속성이 바뀐다.
   ★배치 위치 제약(QA 회귀 실측): 이 2규칙은 아래 tombstone 의 .cmz .bd-blind 보다 반드시 **앞**에 와야 한다.
     둘 다 특이도 (0,2,0)·!important 없음 → 소스 순서로 결정되고, 교차 요소는 다중클래스 .bd-card.bd-blind(블라인드 카드)다.
     뒤로 옮기면 .bd-card 가 이겨 tombstone 대각 해치(background)와 cursor:default 가 죽는다.
     HEAD 원본 상대 위치(.bd-divider 159 → 이미지뷰 카드 161~ → tombstone 873~)와 동일하게 여기 둔다.
   경쟁자는 둘이다 — pages.css .bd-card (0,1,0) 는 특이도로 이기고(위치 무관), .cmz .bd-blind 는 동특이도라 순서로만 이긴다.
   자손 .bc-* 를 요구하는 .bd-card:hover .bc-img / .bd-card:hover .bc-title 은 현행 마크업에 자손이 없어 死 → s2 잔류. */
.cmz .bd-card{border:1px solid var(--bor);background:var(--pane);cursor:pointer;transition:.12s;overflow:hidden;border-radius:0}
.cmz .bd-card:hover{border-color:var(--acc-br)}

/* ===== tombstone — 삭제·블라인드 ===== */
.cmz .bd-blind,.cmz .bd-blind:hover{cursor:default;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(128,128,128,.07) 6px 12px)}
.cmz .bd-blind .bd-tt{color:var(--t3);font-style:italic}
.cmz .cm-tombb{color:var(--t3);font-style:italic;background:repeating-linear-gradient(45deg,var(--pane2) 0 6px,var(--pane) 6px 12px)}

/* ===== 활성 스테이지 이관 구역 (STEP3 후속, 리뷰어 R1) ===== */
/* 분할 자체는 규칙 본문·순서를 보존했으나, 화면 무변화는 "미링크 규칙이 현행 마크업에 매치되지 않을 때"만 따라온다.
   아래 규칙은 현행 마크업에 매치되므로 HEAD 에서 활성이었고, 미링크 스테이지에 두면 실제로 화면이 바뀐다.
   본문은 원본 그대로(잘라 옮기기만). 출처와 승패 근거를 규칙별로 병기한다.
   ★이 구역은 "특이도로 이겨서 위치 무관"인 규칙만 받는다. 동특이도 형제와 순서로 다투는 규칙은
   원본 상대 위치에 그대로 둬야 한다(선례: R2 .bd-card ↔ .bd-blind, 파일 말미로 옮겨 tombstone 회귀 발생). */

/* [R1 ← s9 라이트 테마 오버라이드] .cmz .bd-hot / .cmz .bd-up.hot 의 중립화 짝.
   --led 는 base.css 에서 light 재정의(#7d8709 — 2026-08-06 명도비 교정 전 #aab40d)되므로
   미링크 시 황록 헤일로 부활. 값이 어두워졌을 뿐 헤일로가 부활하는 구조는 그대로다.
   특이도 (0,3,1) > .cmz .bd-hot (0,2,0) → s1 내 위치 무관하게 승리(순서 의존 없음). */
html[data-theme="light"] .cmz .bd-hot,
html[data-theme="light"] .cmz .bd-up.hot{text-shadow:none}

/* [R2] 이미지뷰 카드 2규칙(.cmz .bd-card / .cmz .bd-card:hover)은 이 구역이 아니라 위 목록 테이블 섹션 말미
   (.cmz .bd-divider 직후 · tombstone 섹션 직전)에 있다. 파일 말미에 두면 tombstone 이 깨진다 — 그 자리 주석 참조. */