/* community-zine-s3.css — 원본 toonhub/css/community-zine.css 스테이지 분할(STEP3, 2026-07-30).
   S3 — 핫허브 히어로.
   규칙 본문·순서 무변경(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% 1건은 전부 원형 요소(도트·아바타·아이콘 원판) 전용 — CLAUDE.md 8-2 ② 사유 주석. 원본 1파일 시절 s1 중간의 "이하 파일 전체" 주석이 덮던 커버리지를 분할 후 파일별로 승계. */

/* ===== 핫허브 히어로 ===== */
.cmz .hot-feat{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-bottom:4px}
@media(max-width:760px){.cmz .hot-feat{grid-template-columns:1fr}}
.cmz .hot-hero{position:relative;border:1px solid var(--bor);background:var(--pane);overflow:hidden;cursor:pointer;min-height:214px;display:flex;flex-direction:column;justify-content:flex-end}
.cmz .hot-hero:hover{border-color:var(--acc-br)}
.cmz .hh-kv{position:absolute;inset:0;background-size:cover;background-position:center 28%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cmz .hot-hero:hover .hh-kv{transform:scale(1.04)}
.cmz .hot-hero .hh-body{position:relative;z-index:2;padding:20px 18px 16px;background:linear-gradient(0deg,rgba(0,0,0,.93) 8%,rgba(0,0,0,.7) 55%,transparent)}
.cmz .hh-kick{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.1em;color:var(--cz-kick);margin-bottom:8px}
.cmz .hh-title{font-family:'Chakra Petch',var(--font);font-size:21px;font-weight:700;line-height:1.25;color:var(--c-white);letter-spacing:-.3px;text-wrap:balance;margin-bottom:11px}
.cmz .hh-foot{display:flex;align-items:center;gap:9px;font-family:'Space Mono';font-size:10.5px;color:rgba(255,255,255,.7)}
.cmz .hh-foot svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.9;fill:none;display:inline-block;vertical-align:-1px;margin-right:3px}
.cmz .hh-sc{font-family:'Chakra Petch';font-size:20px;font-weight:700;color:var(--cz-hsc);line-height:1;text-shadow:0 0 12px color-mix(in srgb,var(--led) 50%,transparent)}
.cmz .hh-sep{width:1px;height:11px;background:rgba(255,255,255,.25)}
.cmz .hh-au{margin-left:auto}
.cmz .hot-rail{display:flex;flex-direction:column;gap:0;border:1px solid var(--bor);background:var(--pane)}
.cmz .hr-item{display:flex;gap:11px;padding:13px 14px;border-bottom:1px solid var(--hair);cursor:pointer;transition:.12s;align-items:flex-start;flex:1}
.cmz .hr-item:last-child{border-bottom:none}
.cmz .hr-item:hover{background:var(--pane2)}
.cmz .hr-dot{width:6px;height:6px;border-radius:50%;background:var(--acc-br);box-shadow:0 0 7px color-mix(in srgb,var(--acc-br) 55%,transparent);flex:none;margin-top:6px}
.cmz .hr-item:hover .hr-dot{background:var(--led);box-shadow:0 0 8px var(--led)}
.cmz .hr-main{min-width:0}
.cmz .hr-t{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}
.cmz .hr-item:hover .hr-t{color:var(--acc-br)}
.cmz .hr-m{font-size:10px;color:var(--t3);margin-top:4px}
/* .notice-lead/.nl-t — 시안에 마크업 발행처가 없다(전건 grep 0). S3 소관 아님. 본문 무수정 보존(멀티셋 818). */
.cmz .notice-lead{display:flex;align-items:center;gap:9px;border:1px solid var(--bor);background:var(--pane);padding:11px 14px;margin-bottom:14px}
.cmz .notice-lead .mono{font-size:10px;letter-spacing:.1em;color:var(--acc-br)}
.cmz .nl-t{font-size:12.5px;color:var(--t2)}