/* ★[S8 전역 승격 2026-08-03] byte-exact 계약을 의도적으로 파기했다.
   사유: 이 파일의 모달·오버레이는 전역 컴포넌트인데 .cmz(커뮤니티 페이지) 스코프에 있었다 =
     위치 오류. 로그인 게이트·공유·유저 메뉴는 전 화면에서 열리고 editor.js 모달은 위키에서도
     열린다. 스코프를 두면 같은 모달이 커뮤니티에선 새 디자인, 작품상세에선 옛 디자인이 된다.
   선례: S1-e 토스트 판정(.cmz #toast-layer 등 3규칙 삭제) · a625223(home-zine .card/.led →
     components.css 이관). 같은 판단을 뒤집지 않는다.
   기각안: (1) 렌더처를 .cmz 안으로 이동 — ToonHerb.html 정적 DOM 20+개 구조 변경 + fixed
     containing block 위험. 별 리팩토링 라운드감. (3) 모달 루트에 .cmz 래퍼 — 커뮤니티 밖에서
     열리는 같은 모달이 여전히 스타일을 못 받아 일관성이 깨진다.
   ★리네임 2건: .hc-grid/.hc-more 는 허브콘 페이지(components.css:1425·1560, hubcon.js)의
     전역 규칙과 **이름만 겹친 별개 컴포넌트**다(유형 ② 이름 충돌, .tl 선례). 허브콘이 먼저
     있었고 반응형 3열/2열까지 갖췄으므로 나중 온 시안이 양보한다 → .hcp-*(hubcon picker).
     s8 의 hc-* 는 아직 미배선이라(현 피커는 .pk-pop 계열) 마크업 동반 수정은 없었다.
   ★파일 위치: components.css 로 옮기지 않고 여기 남긴다. 분할 계약(10파일 링크 순서)이
     캐스케이드 보증의 기반이고, 특히 s9(라이트·반응형)가 반드시 마지막이어야 한다. 옮기면
     그 순서가 깨진다. 대신 "커뮤니티 스테이지 파일인데 전역 규칙"이라는 모순이 남으므로
     이 주석이 그 사실을 명시한다.
   ※ 이 파일은 더 이상 .cmz 스코프가 아니다. 규칙 추가 시 전역 충돌을 먼저 확인할 것. */
/* community-zine-s8.css — 원본 toonhub/css/community-zine.css 스테이지 분할(STEP3, 2026-07-30).
   S8 — 툰콘 피커 / 쪽지함 / 제재 모달·게이트 / 공유 모달 / 작성자 메뉴 / 로그인 게이트 / 모달 공통.
   규칙 본문·순서 무변경(byte-exact 이관). 토큰=base.css, radius=tokens.css. */
/* [분할 계약] S9 는 마지막 링크. 링크 순서 base -> s1 -> ... -> s9 유지.
   ★단 이것만으로 캐스케이드 동일이 보장되지 않는다(리뷰어 R3 정정). S9 가 base 를 갖고 다른 스테이지가 그
   오버라이드를 갖는 역방향 쌍이 존재한다 — .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 주석 해제. */
/* [blocker] 모달 렌더처(hub-apply.js·db-ref.js·editor.js·notify.js·comments.js)가 #page 밖이라
   이 파일을 링크해도 조상 조건 미충족. 별 라운드 필요(진스타일_커뮤니티개편_v1.md S1-d). */

/* 50% = 원형 요소 전용. 이 파일의 border-radius:50% 2건은 전부 원형 요소(도트·아바타·아이콘 원판) 전용 — CLAUDE.md 8-2 ② 사유 주석. 원본 1파일 시절 s1 중간의 "이하 파일 전체" 주석이 덮던 커버리지를 분할 후 파일별로 승계. */

/* ===== 툰콘 피커 ===== */
.hc-ov{position:fixed;inset:0;z-index:var(--z-popover)}
.hc-pop{position:fixed;inset:0;z-index:var(--z-popover);display:flex;align-items:center;justify-content:center;pointer-events:none}
.hc-box{width:328px;border:1px solid var(--bor2);background:var(--pane);box-shadow:0 20px 56px rgba(0,0,0,.55);animation:cz-mopop .16s cubic-bezier(.2,.7,.2,1);pointer-events:auto}
.hc-h{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--hair)}
.hc-seg{display:flex;border:1px solid var(--bor)}
.hc-sb{font-size:11px;font-weight:700;color:var(--t2);padding:4px 11px;border-right:1px solid var(--bor);white-space:nowrap}
.hc-sb:last-child{border-right:none}
.hc-sb.on{color:var(--c-white);background:var(--acc)}
.hc-x{margin-left:auto;width:22px;height:22px;display:grid;place-items:center;font-size:11px;color:var(--t3);border:1px solid var(--hair)}
.hc-x:hover{color:var(--danger);border-color:var(--danger)}
.hc-packs{display:flex;gap:4px;padding:8px 11px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.hc-packs::-webkit-scrollbar{display:none}
.hc-p{width:34px;height:34px;display:grid;place-items:center;border:2px solid transparent;background:var(--bg4);flex:none;overflow:hidden}
.hc-p:hover{border-color:var(--bor2)}
.hc-p.on{border-color:var(--acc)}
.hc-pth{font-size:10px;font-weight:700;color:var(--t2)}
.hc-p.on .hc-pth{color:var(--acc-br)}
.hc-none{font-size:10.5px;color:var(--t3)}
.hcp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:11px;max-height:238px;overflow-y:auto}
.hc-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:3px;border:1px solid transparent;background:var(--bg4);transition:.12s}
.hc-cell:hover{border-color:var(--acc)}
.hc-img{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(128,128,128,.09) 5px 10px);border:1px dashed var(--bor2)}
.hc-p{background:var(--bg4)}
.hc-p .hc-pth{display:grid;place-items:center;width:100%;height:100%;background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(128,128,128,.09) 5px 10px);border:1px dashed var(--bor2)}
.hc-ph{font-size:8.5px;font-weight:700;color:var(--t2);letter-spacing:.06em}
.hc-cell:hover .hc-ph{color:var(--acc-br)}
.hc-f2{display:flex;align-items:center;gap:8px;padding:8px 11px;border-top:1px solid var(--hair);background:var(--pane2);font-size:9.5px;color:var(--t3)}
.hcp-more{margin-left:auto;font-size:10px;font-weight:700;color:var(--t2);border:1px solid var(--hair);padding:2px 7px;white-space:nowrap}
.hcp-more:hover{color:var(--acc-br);border-color:var(--acc)}
/* 댓글 툴바 */
.cf-tb-row{display:flex;gap:5px;padding:8px 12px 0}
.cf-tb.hc{color:var(--acc-br);border-color:var(--acc)}

/* ===== 쪽지함 ===== */
.nt-msg{right:44px}
.nt-tabs{display:flex;border-bottom:1px solid var(--hair)}
.nt-tab{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--t3);padding:9px 0;cursor:pointer;border-bottom:2px solid transparent}
.nt-tab:hover{color:var(--t1)}
.nt-tab.on{color:var(--acc-br);border-bottom-color:var(--acc-br)}
.nt-tb{margin-left:5px;font-size:9.5px;color:var(--c-white);background:var(--danger);padding:1px 5px;border-radius:var(--r-sm)}
.nt-e{padding:34px 14px;text-align:center;font-size:12.5px;color:var(--t3)}
.ms-d{padding:14px}
.ms-back{font-size:10.5px;font-weight:700;color:var(--t2);border:1px solid var(--hair);padding:4px 9px;cursor:pointer}
.ms-back:hover{color:var(--acc-br);border-color:var(--acc)}
.ms-dt{font-size:14.5px;font-weight:700;margin:11px 0 5px;line-height:1.4}
.ms-dm{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--t3);padding-bottom:10px;border-bottom:1px solid var(--hair)}
.ms-dm b{color:var(--t1)}
.ms-db{font-size:13px;line-height:1.75;color:var(--t2);padding:12px 0}
.ms-da{display:flex;gap:7px}

/* ===== 제재 모달 ===== */
.sc-seg{display:flex;gap:7px}
.sc-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;font-weight:700;color:var(--t2);border:1px solid var(--bor);background:var(--bg);padding:9px 6px;border-radius:var(--r1)}
.sc-opt .sc-sub{font-size:10px;font-weight:400;color:var(--t3)}
.sc-opt:hover{border-color:var(--bor2);color:var(--t1)}
.sc-opt.on{color:var(--acc-br);border-color:var(--acc);background:var(--acc-dim)}
.sc-opt.on .sc-sub{color:var(--acc-br);opacity:.8}
.sc-days{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sc-day{font-size:12px;font-weight:700;color:var(--t2);border:1px solid var(--bor);background:var(--bg);padding:7px 13px;border-radius:var(--r1);white-space:nowrap}
.sc-day:hover{border-color:var(--bor2);color:var(--t1)}
.sc-day.on{color:var(--c-white);background:var(--acc-br);border-color:var(--acc-br)}
.sc-cl{font-size:10.5px;color:var(--t3);margin-left:3px}
.sc-ci{width:76px}
.sc-hint{font-family:var(--font);font-weight:400;letter-spacing:0;text-transform:none;color:var(--t3);font-size:11px}
.mo-btn.danger{background:var(--danger);border-color:var(--danger);color:var(--c-white)}
.mo-btn.danger:hover{filter:brightness(1.12)}

/* ===== 제재 게이트 ===== */
.sg{display:flex;align-items:center;gap:11px;border:1px solid var(--danger);background:var(--danger-dim);padding:12px 14px;margin:0 0 14px}
.sg-i{width:20px;height:20px;flex:none;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:13px;color:var(--c-white);background:var(--danger);border-radius:var(--r-sm)}
.sg-b{flex:1;min-width:0}
.sg-t{font-size:13px;font-weight:700;color:var(--t1)}
.sg-m{font-size:10.5px;color:var(--t2);margin-top:3px}
.sg-a{flex:none;font-size:11.5px;font-weight:700;color:var(--t2);border:1px solid var(--bor);padding:6px 12px;white-space:nowrap}
.sg-a:hover{color:var(--t1);border-color:var(--bor2)}

/* ===== 공유 모달 ===== */
.sh-row{display:flex;justify-content:space-around;gap:8px}
.sh-i{display:flex;flex-direction:column;align-items:center;gap:7px}
.sh-c{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:none;cursor:pointer}
.sh-c svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none}
.sh-ig{background:var(--cz-ig-grad)}
.sh-cp{background:var(--pane2);border:1px solid var(--bor);color:var(--t1)}
.sh-mk{font-family:'Chakra Petch';font-weight:700;font-size:14px;letter-spacing:-.5px}
.sh-l{font-size:11px;color:var(--t3)}
.sh-url{display:flex;align-items:center;gap:9px;margin-top:16px;border:1px solid var(--hair);background:var(--bg);padding:9px 11px}
.sh-uk{font-size:9.5px;color:var(--t3);flex:none}
.sh-uv{flex:1;min-width:0;font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-ub{flex:none;font-size:10.5px;font-weight:700;color:var(--acc-br);border:1px solid var(--acc);padding:4px 10px}

/* ===== 작성자 메뉴 ===== */
.am-ov{position:fixed;inset:0;z-index:var(--z-ctx-menu)}
.am{position:fixed;z-index:var(--z-ctx-menu);width:168px;border:1px solid var(--bor2);background:var(--pane);box-shadow:0 14px 40px rgba(0,0,0,.5);animation:cz-mopop .14s cubic-bezier(.2,.7,.2,1)}
.am-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--hair);background:var(--pane2)}
.am-av{width:24px;height:24px;border-radius:50%;background:var(--acc-dim);border:1px solid var(--bor);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--acc-br);flex:none}
.am-n{font-size:12.5px;font-weight:700;color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-b{display:block;width:100%;text-align:left;font-size:12.5px;color:var(--t2);padding:9px 12px;border-bottom:1px solid var(--hair)}
.am-b:last-child{border-bottom:none}
.am-b:hover{background:var(--pane2);color:var(--acc-br)}
.am-b.danger:hover{color:var(--danger)}

/* ===== 로그인 게이트 ===== */
.lg-b{display:flex;flex-direction:column;gap:8px}
.lg-p{font-size:13px;font-weight:700;color:var(--c-white);background:var(--acc-br);border:1px solid var(--acc-br);padding:11px}
.lg-p:hover{background:var(--acc)}
.lg-s{font-size:12.5px;font-weight:600;color:var(--t1);border:1px solid var(--bor);background:var(--bg);padding:10px}
.lg-s:hover{border-color:var(--bor2)}
.lg-or{display:flex;align-items:center;gap:10px;margin:4px 0;color:var(--t3)}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--hair)}
.lg-or .mono{font-size:9.5px;letter-spacing:.1em}

/* ===== 모달 공통 ===== */
.mo-ov{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(0,0,0,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.mo{width:100%;max-width:420px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;border:1px solid var(--bor2);background:var(--pane);box-shadow:0 24px 70px rgba(0,0,0,.6);animation:cz-mopop .18s cubic-bezier(.2,.7,.2,1)}
.mo-wide{max-width:560px}
@keyframes cz-mopop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* [이관→s9] @media(prefers-reduced-motion:reduce){.mo,.hc-box,.nt,.am{animation:none}} 은
   community-zine-s9.css 말미로 옮겼다. 사유: 4타겟 중 .nt 의 base 는 s9(알림 섹션)에 있어,
   가드가 s8에 남으면 링크 순서 s8→s9 로 가드가 뒤로 밀려 패배한다(둘 다 (0,2,0), !important 없음).
   s9 말미에 두면 s8의 .mo/.hc-box/.am 과 s9의 .nt 4타겟 전부 base 보다 뒤 = 원본 승패 복원. */
.mo-h{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--hair)}
.mo-t{font-family:'Chakra Petch',var(--font);font-size:16.5px;font-weight:700;letter-spacing:-.3px;flex:1}
.mo-x{width:26px;height:26px;display:grid;place-items:center;font-size:13px;color:var(--t3);border:1px solid var(--hair)}
.mo-x:hover{color:var(--danger);border-color:var(--danger)}
.mo-target{font-size:12px;color:var(--t3);padding:10px 16px;border-bottom:1px solid var(--hair);background:var(--pane2);line-height:1.5}
.mo-target b{color:var(--acc-br)}
.mo-b{padding:16px;overflow-y:auto;flex:1;min-height:0}
.mo-b .fld:last-child{margin-bottom:0}
.mo-h,.mo-target,.mo-f{flex:none}
.mo-f{display:flex;justify-content:flex-end;gap:7px;padding:12px 16px;border-top:1px solid var(--hair);background:var(--pane2)}
.mo-btn{font-size:12.5px;font-weight:700;color:var(--t2);border:1px solid var(--bor);background:var(--pane);padding:8px 15px;white-space:nowrap;transition:.12s}
.mo-btn:hover{color:var(--t1);border-color:var(--bor2)}
.mo-btn.primary{color:var(--c-white);background:var(--acc-br);border-color:var(--acc-br)}
.mo-btn.primary:hover{background:var(--acc)}
.mo-btn:disabled{opacity:.4;cursor:default}
.mo-note{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border:1px solid var(--bor);background:var(--bg);font-size:11.5px;color:var(--t3);line-height:1.55}
.mo-note .led{margin-top:4px}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rep-b{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--t2);border:1px solid var(--bor);background:var(--bg);padding:9px 11px;text-align:left;transition:.12s}
.rep-b:hover{color:var(--t1);border-color:var(--bor2)}
.rep-b.on{color:var(--danger);border-color:var(--danger);background:var(--danger-dim)}
.rep-c{font-size:9px;font-weight:700;color:var(--t3);border:1px solid var(--hair);padding:1px 4px;flex:none}
.rep-b.on .rep-c{color:var(--danger);border-color:var(--danger)}
.mo-gate{border:1px solid var(--bor);background:var(--bg);padding:11px 13px;margin-bottom:15px}
.mo-gk{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--t3)}
.mo-gv{font-size:12px;font-weight:700;margin-left:7px}
.mo-gv.ok{color:var(--acc-br)}
.mo-gl{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:9px}
.mo-gi{font-family:'Space Mono';font-size:10.5px;font-weight:700}
.mo-gi.ok{color:var(--acc-br)}
.mo-gi.no{color:var(--danger)}
.iu-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--bor2);background:var(--bg);padding:26px 14px;cursor:pointer;transition:.12s;margin-bottom:12px}
.iu-drop:hover{border-color:var(--acc);background:var(--acc-dim)}
.iu-drop .mono{font-size:11.5px;color:var(--t2)}
.iu-hint{font-size:9.5px;color:var(--t3)}
.iu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.iu-th{position:relative;aspect-ratio:1;background-size:cover;background-position:center;background-color:var(--bg4);border:1px solid var(--bor);cursor:grab}
.iu-x{position:absolute;top:-1px;right:-1px;width:20px;height:20px;display:grid;place-items:center;font-size:10px;color:var(--c-white);background:rgba(0,0,0,.7);border:1px solid var(--bor2)}
.iu-x:hover{background:var(--danger)}
.iu-no{position:absolute;left:4px;bottom:3px;font-size:9px;font-weight:700;color:var(--c-white);background:rgba(0,0,0,.6);padding:0 4px}
.db-tabs{display:flex;gap:3px;border-bottom:1px solid var(--bor);margin-bottom:11px}
.db-tab{font-size:12.5px;font-weight:700;color:var(--t3);padding:6px 12px;border-bottom:2px solid transparent}
.db-tab:hover{color:var(--t1)}
.db-tab.on{color:var(--t1);border-bottom-color:var(--acc-br)}
.db-list{border:1px solid var(--hair);max-height:260px;overflow-y:auto}
.db-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--hair)}
.db-row:last-child{border-bottom:none}
.db-row:hover{background:var(--pane2)}
.db-th{width:32px;height:44px;background-size:cover;background-position:center;background-color:var(--bg4);border:1px solid var(--bor);display:grid;place-items:center;font-family:'Black Han Sans';font-size:15px;color:var(--t3);flex:none}
.db-i{flex:1;min-width:0}
.db-n{font-size:13px;font-weight:700;color:var(--t1)}
.db-m{font-size:10px;color:var(--t3);margin-top:2px}
.db-add{font-size:11.5px;font-weight:700;color:var(--acc-br);border:1px solid var(--acc);padding:4px 11px;flex:none;white-space:nowrap}
.db-add:hover{background:var(--acc-dim)}