/* 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}
/* ★R1(반응형_전수실측_v1 §1-5, 폐기) — 375px 실측: 고정열 합(64+84+56+50+42=296)+gap40+padding24=360 이
   375px 컨테이너(실폭 291~331)를 넘어 마지막 열(.bd-up)이 17px 밖으로 밀려났었다(6칸 표를 좁혀 우겨넣는 접근).
   ★2026-08-30 현우 승인 시안 B로 대체: ≤560 은 6칸 압축이 아니라 제목 우선 2줄 그리드로 전환 →
   오버플로 원인(고정열 합이 컨테이너 폭을 넘음) 자체가 사라져 이 ≤400 압축 규칙은 폐기.
   ★리뷰어 정정: 삭제 자체는 죽은 코드 정리로 타당하나, 남겨둬도 6칸 표로는 안 돌아간다 — 구 ≤400 블록은
   이 파일 앞쪽(당시 line 45대), 신규 ≤560 2줄 블록은 파일 뒤쪽(현재 105행대)에 있어 동특이도(0,2,0)에서
   신규가 소스 순서상 항상 후순위로 이긴다. 즉 이 블록은 2줄 전환으로 오버플로 원인이 사라지며 이미
   무력화된 상태였다(존치해도 회귀 없음) — 그래서 폐기해도, 존치해도 결과는 같고 정리 차원에서 삭제한다.
   2줄 규칙은 아래 "모바일 2줄 레이아웃" 참조. */
.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)}

/* ===== 모바일 2줄 레이아웃(≤560, 현우 승인 시안 B) =====
   6칸 표 → 제목 우선 2줄 카드형. DOM 순서(flair·title·author·date·views·up) 무변경 — 재배치는
   각 셀 클래스에 grid-area 를 부여해 grid-template-areas 로만 수행(마크업은 community.js boardRowHTML 그대로).
   .bd-head(표 라벨행)는 2줄 카드형에 의미가 없어 숨김 — community.js:204 주석의 "bd-row 병기 필수"
   전제(그리드 선언 없으면 6열 소실)는 유지, JS 는 그대로 두고 CSS 로만 숨긴다.
   이 블록은 동일 프로퍼티를 다시 선언하는 위 base 규칙(.bd-flair 등, line 67~93)보다 반드시 뒤에 와야
   한다 — 특이도가 같아(0,2,0) 소스 순서로 승패가 갈린다. */
@media(max-width:560px){
  .cmz .bd-row.bd-head{display:none}
  .cmz .bd-row{
    grid-template-columns:30px minmax(0,1fr) auto auto auto;
    grid-template-rows:auto auto;
    grid-template-areas:"flair title title title title" "flair author date views up";
    align-items:center;
    row-gap:2px;
    column-gap:6px;
    padding:8px 10px;
    /* min-height:50px 제거(죽은 값) — base.css:138 body{line-height:1.5} 가 .bd-tt·메타 셀에 그대로 상속되는데
       주석 산식이 이를 빠뜨렸다. 실제 = title 14×1.5=21 + row-gap 2 + meta 11×1.5=16.5 + padding 16 ≈ 55.5px
       (실측 56~58px) — 콘텐츠가 항상 50 을 넘어 min-height 는 아무 효과가 없었다. 행 높이는 grid auto
       사이징(콘텐츠 높이)이 결정하며 별도 강제가 불필요하다. */
  }
  .cmz .bd-flair{grid-area:flair;align-self:center}
  .cmz .bd-title{grid-area:title}
  .cmz .bd-row .bd-tt{font-size:14px}
  .cmz .bd-author{grid-area:author;font-size:11px;color:var(--t3)}
  .cmz .bd-date{grid-area:date;font-size:11px}
  .cmz .bd-views{grid-area:views;font-size:11px}
  /* color:var(--acc-br) 제거(죽은 선언) — 추천 강조는 이미 base 4단계(base --t3 · .low --t2 · .mid --acc-br ·
     .hot --cz-hot, line 92~98)+font-weight:700 이 담당한다. 이 (0,2,0) 신규 선언은 등급 클래스 (0,3,0) 을
     못 이기고, 유일하게 적용되는 무등급(0추천) 케이스는 community.js:139 _upCls(0)→'' 라 셀 내용 자체가
     빈 문자열 — 칠할 글자가 없어 발효 지점이 없다. */
  .cmz .bd-up{grid-area:up;text-align:right}
}

/* [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 이 깨진다 — 그 자리 주석 참조. */