/* community-zine-s5.css — 원본 toonhub/css/community-zine.css 스테이지 분할(STEP3, 2026-07-30).
   S5 — 허브 목록 / 허브 홈 배너 / 허브 매니저 바 / 허브 배너 컨트롤.
   규칙 본문·순서 무변경(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 주석 해제. */
/* [주의] 허브 목록 섹션의 .gal-* 블록은 S1이 주석 비활성한 상태 그대로 이관됐다.
   파일 미링크와 이중 차단이므로 주석을 벗기지 말 것 — S5 착수 시 판단.
   짝이 되는 라이트 테마 .gal-act 오버라이드는 분할표에 따라 community-zine-s9.css 에 있다. */

/* ===== 허브 목록 ===== */
.cmz .hub-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.cmz .hub-search{max-width:250px;flex:none}
.cmz .hub-dd{display:flex;gap:3px;margin-left:auto}
.cmz .cho-row{display:flex;flex-wrap:wrap;gap:4px;padding:10px 0 14px;border-bottom:1px solid var(--bor);margin-bottom:16px}
.cmz .cho{min-width:28px;height:26px;font-size:11.5px;font-weight:600;color:var(--t2);border:1px solid var(--bor);background:var(--pane);padding:0 7px;transition:.12s}
.cmz .cho:hover{border-color:var(--acc);color:var(--acc-br)}
.cmz .cho.on{color:var(--c-white);background:var(--acc-br);border-color:var(--acc-br)}
/* [S5 활성화 완료 2026-08-03] 아래 허브 카드 블록은 S1이 조기 발효 때문에 주석 비활성했던 것을
   S5-1 에서 마크업 교체(gal-card→gal · gal-body→gal-b · gal-name→gal-n · gal-meta→gal-m,
   gal-mono 신설) 후 해제했다. 규칙 본문·순서는 무수정 — 주석 기호만 벗겼다(18규칙).
   ★순서 계약: 마크업 교체가 먼저, 주석 해제가 나중. 반대로 하면 S1 파손이 재발한다.
   짝인 라이트 오버라이드(html[data-theme=light] .cmz .gal-act)는 community-zine-s9.css 에 있고 같이 해제했다. */
.cmz .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:13px}
.cmz .gal{position:relative;border:1px solid var(--bor);background:var(--pane);overflow:hidden;cursor:pointer;transition:.14s}
.cmz .gal:hover{border-color:var(--acc-br);transform:translateY(-2px)}
.cmz .gal-fav{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;height:26px;padding:0 7px;color:var(--c-white);background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.35);font-size:11px;font-weight:700;transition:.16s}
.cmz .gal-fav .flbl{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .2s ease,opacity .18s ease,margin .2s ease}
.cmz .gal-fav:hover .flbl,.cmz .gal-fav.on .flbl{max-width:56px;opacity:1;margin-left:4px}
.cmz .gal-fav:hover{border-color:var(--acc-br);color:var(--acc-br)}
.cmz .gal-fav svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none}
.cmz .gal-fav.on{color:var(--c-white);border-color:var(--acc-br);background:var(--acc)}
.cmz .gal-fav.on:hover{background:var(--acc-br);color:var(--c-white)}
.cmz .gal-kv{position:relative;height:98px;background-size:cover;background-position:center 25%;background-color:var(--bg4);display:grid;place-items:center}
.cmz .gal-kv::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 62%)}
.cmz .gal-mono{font-family:'Black Han Sans';font-size:38px;color:var(--t3);opacity:.4}
.cmz .gal-b{padding:11px 12px 12px}
.cmz .gal-n{font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmz .gal:hover .gal-n{color:var(--acc-br)}
.cmz .gal-m{font-size:10px;color:var(--t3);margin-top:4px}
.cmz .gal-act{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10px;color:var(--acc-br)}

/* ===== 허브 홈 배너 ===== */
.cmz .hbanner{position:relative;border:1px solid var(--bor);background:var(--pane);overflow:hidden;margin-bottom:0;min-height:196px;display:flex;align-items:flex-end}
.cmz .hb-kv{position:absolute;inset:0;background-size:cover;background-position:center 24%}
.cmz .hb-grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.94) 6%,rgba(0,0,0,.55) 52%,rgba(0,0,0,.25))}
.cmz .hb-catno{position:absolute;left:16px;top:14px;z-index:2;font-size:10px;letter-spacing:.13em;color:rgba(255,255,255,.6)}
.cmz .hb-bc{position:absolute;right:16px;top:12px;z-index:2;width:110px;flex:none;color:var(--acc-br);opacity:.65}
.cmz .hb-body{position:relative;z-index:2;padding:20px 18px 18px;flex:1;min-width:0}
.cmz .hb-kick{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.1em;color:var(--cz-kick);margin-bottom:8px}
.cmz .hb-name{font-family:'Chakra Petch',var(--font);font-size:29px;font-weight:700;line-height:1.1;color:var(--c-white);letter-spacing:-.6px;margin-bottom:12px}
.cmz .hb-stats{display:flex;align-items:center;gap:0}
.cmz .hbs{display:flex;flex-direction:column;gap:2px;padding:0 16px;position:relative}
.cmz .hbs:first-child{padding-left:0}
.cmz .hbs+.hbs::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.2)}
.cmz .hbs b{font-family:'Chakra Petch';font-size:18px;font-weight:700;color:var(--c-white);line-height:1}
.cmz .hbs i{font-family:'Space Mono';font-size:9.5px;font-style:normal;color:rgba(255,255,255,.6);letter-spacing:.05em}
.cmz .hb-act{position:relative;z-index:2;display:flex;gap:7px;padding:0 18px 20px}
.cmz .btn-sub{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--c-white);border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.4);padding:8px 15px}
.cmz .btn-sub svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.9;fill:none}
.cmz .btn-sub:hover{border-color:var(--acc-br);color:var(--acc-br)}
.cmz .btn-sub.on{color:var(--acc-br);border-color:var(--acc-br);background:color-mix(in srgb,var(--acc) 20%,transparent)}

/* ===== 허브 매니저 바 ===== */
.cmz .hmgr{display:flex;align-items:center;gap:9px;border:1px solid var(--bor);border-top:none;background:var(--pane2);padding:9px 14px;flex-wrap:wrap}
.cmz .hmgr-tag{font-family:'Space Mono';font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--acc-br);border:1px solid var(--acc);padding:1px 6px;white-space:nowrap}
.cmz .hmgr-n{font-size:12.5px;font-weight:700;color:var(--t1)}
.cmz .hmgr-x{font-family:'Space Mono';font-size:10px;color:var(--t3)}
.cmz .hmgr-b{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--t2);border:1px solid var(--bor);padding:4px 11px;white-space:nowrap}
.cmz .hmgr-b:hover{color:var(--acc-br);border-color:var(--acc)}

/* ===== 허브 배너 컨트롤 ===== */
.cmz .hbn-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--bor);background:var(--pane);padding:8px 12px;margin-top:10px}
.cmz .hbn-l{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--t3);text-transform:uppercase;white-space:nowrap}
.cmz .hbn-seg{display:flex;border:1px solid var(--bor)}
.cmz .hbn-seg button{font-family:'Space Mono';font-size:10.5px;font-weight:700;color:var(--t2);padding:5px 11px;border-right:1px solid var(--bor);white-space:nowrap}
.cmz .hbn-seg button:last-child{border-right:none}
.cmz .hbn-seg button.on{color:var(--c-white);background:var(--acc-br)}
.cmz .hbn-rng{flex:1;min-width:110px;max-width:200px;accent-color:var(--acc-br)}
.cmz .hbn-s{font-family:'Space Mono';font-size:10.5px;font-weight:700;color:var(--t2);border:1px solid var(--bor);padding:5px 11px;margin-left:auto;white-space:nowrap}
.cmz .hbn-s:hover{color:var(--acc-br);border-color:var(--acc)}
.cmz .hb-kv-auto{background:var(--cz-hb-auto-grad)}
.cmz .hsq{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--t2);border:1px solid var(--bor);background:var(--pane);padding:7px 12px;margin-bottom:8px}
.cmz .hsq-x{font-family:'Space Mono';font-size:10.5px;font-weight:700;color:var(--acc-br);border:1px solid var(--bor);padding:3px 9px;margin-left:auto;white-space:nowrap}
.cmz .hsq-x:hover{border-color:var(--acc)}