/* community-zine-s9.css — 원본 toonhub/css/community-zine.css 스테이지 분할(STEP3, 2026-07-30).
   S9 — 방문 기록 바 / 레벨 배지·접속자·임시저장 / 알림 / 푸터 / 모바일 / 라이트 테마 오버라이드. 반드시 마지막 링크.
   규칙 본문·순서 무변경(byte-exact 이관). 토큰=base.css, radius=tokens.css. */
/* [분할 계약 — 실태 정정 2026-08-04] "10파일 전부 .cmz 스코프"라는 초기 전제는 더 이상 사실이
   아니다. 현재 상태: s7 = .wrz(글쓰기 독립 루트) · s8 = 전역(스코프 없음) · s9 = .cmz + 예외 2건
   (S9-1 모션 가드 · 라이트 .mo-btn.primary). 나머지는 .cmz 유지.
   따라서 "s9 가 마지막 링크"만으로 캐스케이드를 판단할 수 없다 — 스코프가 다르면 링크 순서보다
   명시도가 먼저 갈린다. 신규 규칙 추가 시 대상 스테이지의 실제 스코프를 먼저 확인할 것. */
/* [분할 계약] 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 주석 해제. */
/* ★[S9-1 스코프 불일치 종결 2026-08-03] S8 전역 승격(8553a61) 파생. 이 파일의 두 규칙에서
   `.cmz ` 접두를 제거했다(본문·순서·위치 불변) — 파일 말미 모션 가드와 라이트 오버라이드의
   `.mo-btn.primary` 항목.
   사유: .mo·.hc-box·.am 의 base 가 s8 전역이 되면서 .cmz 스코프 가드가 커뮤니티 안에서만
     걸렸다. 모달은 로그인 게이트·공유·유저 메뉴·editor.js 삽입 모달까지 전 화면에서 열린다.
   ★단 지금 발현하는 결함은 아니다(실측 정정). S8 은 스코프만 풀었고 모달 마크업 리스킨은 하지
     않아 .mo·.hc-box·.am·.nt 는 현행 마크업에 0건이다 — 가드 대상이 아직 그려지지 않는다.
     즉 구조는 어긋나 있으나 화면에는 아직 안 나타난다. s8 모달 마크업을 배선하는 순간
     커뮤니티 밖에서 prefers-reduced-motion 이 안 걸리는 형태로 발현한다. 라이트
     .mo-btn.primary 도 같은 구조이며, 여기에 더해 --c-white 가 light 에서 재정의되지 않아
     이중으로 no-op 이다. 둘 다 배선 전에 닫아두는 것이 순서다.
   ★가드는 s9 에 유지한다(s8 이관 기각). .nt 의 base 가 s9 자신이라 s8 로 옮기면 링크 순서상
     못 덮고, R3 이 역방향 쌍 해소로 s8->s9 이관한 이력을 되돌리게 된다. `.cmz` 만 떼면 s9 가
     마지막 링크라 s8 전역 base 보다 뒤이고 .nt 도 같은 파일 안에서 base 보다 뒤다 —
     한 번의 제거로 4타겟이 전부 이긴다.
   ※ 이 파일은 아직 미링크다. 따라서 두 규칙은 **로드되지 않으며 지금은 효력이 없다.**
     결함은 S9-2 에서 link 를 켜는 시점에 해소된다. 그때까지 존속한다. */

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

/* ===== 방문 기록 바 ===== */
.cmz .nh-wrap{border:1px solid var(--bor);background:var(--pane);margin-bottom:16px}
.cmz .nh-row{display:flex;align-items:center;gap:8px;padding:7px 10px}
.cmz .nh-chips{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow:hidden;flex-wrap:nowrap}
.cmz .nh-chips.exp{flex-wrap:wrap;overflow:visible}
.cmz .nh-sub{font-size:11.5px;font-weight:700;color:var(--acc-br);border:1px solid var(--acc);background:var(--acc-dim);padding:3px 9px;white-space:nowrap;cursor:pointer;flex:none;transition:.12s}
.cmz .nh-sub:hover,.cmz .nh-sub.on{color:var(--c-white);background:var(--acc);border-color:var(--acc)}
.cmz .nh-c{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--t2);border:1px solid var(--hair);background:var(--bg);padding:3px 9px;white-space:nowrap;cursor:pointer;flex:none;transition:.12s}
.cmz .nh-c:hover{color:var(--t1);border-color:var(--bor2)}
.cmz .nh-x{color:var(--t3);font-size:12px;line-height:1}
.cmz .nh-c:hover .nh-x{color:var(--danger)}
.cmz .nh-none{font-size:10.5px;color:var(--t3)}
.cmz .nh-ex{width:24px;height:24px;display:grid;place-items:center;color:var(--t3);border:1px solid var(--hair);flex:none}
.cmz .nh-ex svg{width:13px;height:13px}
.cmz .nh-ex:hover{color:var(--acc-br);border-color:var(--acc)}
.cmz .nh-mg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid var(--hair);background:var(--pane2)}
.cmz .nh-ml{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--t3);margin-right:2px}
.cmz .nh-mb{font-size:11px;font-weight:600;color:var(--t2);border:1px solid var(--bor);padding:4px 9px;white-space:nowrap;transition:.12s}
.cmz .nh-mb:hover{color:var(--t1);border-color:var(--bor2)}
.cmz .nh-mb.on{color:var(--acc-br);border-color:var(--acc);background:var(--acc-dim)}
.cmz .nh-close{margin-left:auto}
/* 방문 기록 · 작성자 */
.cmz .bd-read{font-size:9px;font-weight:700;color:var(--t3);border:1px solid var(--hair);padding:0 4px;flex:none;letter-spacing:.03em;white-space:nowrap}
.cmz .au-l{cursor:pointer;border-bottom:1px dotted transparent}
.cmz .au-l:hover{color:var(--acc-br);border-bottom-color:var(--acc)}

/* 토스트 규칙(#toast-layer·.tst·.tst.in) 삭제 — S1. 사유는 파일 최상단 이식 제외 목록 참조 */

/* ===== 레벨 배지 · 접속자 · 임시저장 ===== */
.cmz .lvb{display:inline-grid;place-items:center;min-width:17px;height:15px;padding:0 3px;font-size:9.5px;font-weight:700;border:1px solid;border-radius:var(--r-sm);vertical-align:middle;margin-left:4px}
.cmz .onl{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--t3)}
.cmz .onl b{color:var(--acc-br)}
.cmz .dp{display:flex;align-items:center;gap:11px;border:1px dashed var(--acc);background:var(--acc-dim);padding:10px 13px;margin:0 0 14px}
.cmz .dp-b{flex:1;min-width:0;font-size:12.5px;color:var(--t2)}
.cmz .dp-b b{color:var(--t1)}
.cmz .dp-t{font-size:10.5px;color:var(--t3);margin-left:5px}
.cmz .dp-a{flex:none;font-size:11.5px;font-weight:700;color:var(--c-white);background:var(--acc-br);border:1px solid var(--acc-br);padding:6px 13px}
.cmz .dp-a:hover{background:var(--acc)}
.cmz .dp-x{flex:none;width:22px;height:22px;color:var(--t3);font-size:12px}
.cmz .dp-x:hover{color:var(--t1)}

/* ===== 알림 ===== */
.nt-ov{position:fixed;inset:0;z-index:var(--z-nav-drop)}
.nt{position:absolute;right:78px;top:52px;width:340px;max-height:70vh;display:flex;flex-direction:column;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)}
.nt-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--hair)}
.nt-t{font-family:'Chakra Petch',var(--font);font-size:15px;font-weight:700}
.nt-cnt{font-size:10px;font-weight:700;color:var(--c-white);background:var(--danger);padding:1px 6px}
.nt-all{margin-left:auto;font-family:'Space Mono';font-size:10px;font-weight:700;color:var(--t2);border:1px solid var(--hair);padding:3px 8px;white-space:nowrap}
.nt-all:hover{color:var(--acc-br);border-color:var(--acc)}
.nt-l{overflow-y:auto;flex:1}
.nt-i{position:relative;display:flex;align-items:flex-start;gap:10px;padding:11px 14px 11px 16px;border-bottom:1px solid var(--hair);cursor:pointer;transition:.12s}
.nt-i:hover{background:var(--pane2)}
.nt-i.unread{background:var(--acc-dim)}
.nt-ic{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--bor);color:var(--acc-br);flex:none}
.nt-ic svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.nt-b{flex:1;min-width:0}
.nt-x{font-size:12.5px;color:var(--t2);line-height:1.45}
.nt-x b{color:var(--t1)}
.nt-s{font-size:11px;color:var(--t2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-at{font-size:9.5px;color:var(--t3);flex:none;padding-top:2px;white-space:nowrap}
.nt-dot{position:absolute;left:5px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--acc-br);box-shadow:0 0 6px var(--acc-br);transform:translateY(-50%)}
.nt-f{padding:9px 14px;border-top:1px solid var(--hair);background:var(--pane2)}
.nt-more{width:100%;font-size:12px;font-weight:700;color:var(--t2);border:1px solid var(--bor);padding:7px}
.nt-more:hover{color:var(--acc-br);border-color:var(--acc)}
/* height 14px 완전원형 알약 → r-pill */
.nbadge{position:absolute;top:1px;right:1px;min-width:14px;height:14px;border-radius:var(--r-pill);background:var(--danger);color:var(--c-white);font-family:'Space Mono';font-size:9px;font-weight:700;display:grid;place-items:center;padding:0 3px;pointer-events:none}

/* ===== 푸터 ===== */
.cmz .foot{display:flex;align-items:center;gap:12px;padding-top:26px;margin-top:10px}
.cmz .foot .ast{font-family:'Chakra Petch';font-weight:700;font-size:18px;color:var(--acc)}
.cmz .foot .mono{font-size:10px;color:var(--t3);letter-spacing:.06em}

/* ===== 모바일 ===== */
@media(max-width:620px){
  .cmz .pd-title,.rvz .pd-title{font-size:20px}
  .cmz .rd-one,.rvz .rd-one{font-size:21px}
  .cmz .rv-one,.rvz .rv-one{font-size:17px}
  .cmz .hb-name{font-size:23px}
  /* .cmz .rv-sum-pct 는 pages.css(.work-rev-page 스코프)로 이관했다(2026-08-06 평론 요약 이관).
     기저 규칙이 .cmz 를 떠났으므로 이 오버라이드만 남기면 매치 대상이 0이 된다 — 짝으로 옮긴다. */
  .nt{left:12px;right:12px;width:auto}
  .cmz .pd-head,.cmz .pd-body,.cmz .pd-act,.cmz .pd-nav,.cmz .rd-work,
  .rvz .pd-head,.rvz .pd-body,.rvz .pd-act,.rvz .pd-nav,.rvz .rd-work{padding-left:15px;padding-right:15px}
}

/* ===== 라이트 테마 오버라이드 ===== */
/* [S5 활성화 완료 2026-08-03] s5.css 의 .gal-* 블록과 한 세트로 해제했다. 규칙 무수정. */
html[data-theme="light"] .cmz .gal-act{color:var(--acc)}
/* [이관→s1] LED 가독 보정 중 글로우 제거분(html[data-theme=light] 의 .bd-hot·.bd-up.hot text-shadow:none)은
   community-zine-s1.css 말미 이관 구역으로 옮겼다. 사유: 짝인 .cmz .bd-hot·.cmz .bd-up.hot 이 활성 s1에 있어
   여기 두면 라이트에서 --led 헤일로가 부활한다 = 화면 변경.
   (라이트 --led 는 2026-08-06 명도비 교정으로 #aab40d → #7d8709. 구조는 불변.) */
/* 시안 충실 이관 — acc-br 배경 위 흰 글자 고정. c-white가 light에서 재정의되지 않아 현재는 dark와 동값(실질 no-op)이나, 시안의 명시 의도를 보존 */
html[data-theme="light"] .cmz .ctab.on,
html[data-theme="light"] .cmz .vt-b.on,
html[data-theme="light"] .cmz .wfab,
html[data-theme="light"] .cmz .pg-b.on,
html[data-theme="light"] .cmz .cf-sub,
html[data-theme="light"] .cmz .cho.on,
html[data-theme="light"] .cmz .togchip.on,
html[data-theme="light"] .mo-btn.primary,
html[data-theme="light"] .cmz .wrx-sb.on{color:var(--c-white)}

/* ===== [S9-L1 신규 2026-08-04] 라이트 히어로 명암 (S3 이월) =====
   ★byte-exact 이관이 아니라 신규 규칙 4개다. s3.css 는 이관 계약이라 못 고치고, s9 가 마지막
   링크라 여기서 덮는 것이 정방향이다(§분할 계약).
   현상: .hh-body 가 테마 무관 고정 검정 그라디언트이고 .hh-title 이 --c-white 다. 라이트에서
     히어로만 검정 박스로 남고 .hot-rail 은 --pane 을 따라 밝아져 한 행에서 명암이 갈렸다.
   ★KV 이미지 유무를 구분한다(일괄 처리 기각). 사진 위 흰 글자 + 검정 오버레이는 가독을 위한
     표준이므로 이미지가 있으면 라이트에서도 유지해야 한다. 문제는 이미지 부재 시 밝은 --pane
     위에 검정 그라디언트만 남는 경우다.
   구분 수단 = .hh-kv 는 이미지가 없어도 항상 렌더되고 style 속성만 조건부다
     (community.js:330 — kvStyle 이 빈 문자열). 따라서 :not([style]) 로 부재를 잡는다.
     ※ community.js 가 .hh-kv 에 다른 인라인 style 을 붙이면 이 셀렉터가 조용히 빗나간다.
        그때는 이 블록도 함께 고칠 것. */
html[data-theme="light"] .cmz .hh-kv:not([style]) + .hh-body{background:none}
html[data-theme="light"] .cmz .hh-kv:not([style]) + .hh-body .hh-title{color:var(--t1)}
html[data-theme="light"] .cmz .hh-kv:not([style]) + .hh-body .hh-foot{color:var(--t2)}
html[data-theme="light"] .cmz .hh-kv:not([style]) + .hh-body .hh-sep{background:var(--bor)}

/* ===== 모션 가드 (STEP3 후속, 리뷰어 R3 ← s8 모달 공통) ===== */
/* 4타겟의 animation base 가 두 파일로 갈렸다: .mo·.hc-box·.am = s8, .nt = 이 파일 알림 섹션.
   S9 가 마지막 링크이므로 이 자리(파일 말미)가 4타겟 전부보다 뒤 = 원본의 "base 뒤 가드" 승패를 복원한다.
   ★교훈: "S9 를 마지막 링크로" 만으로 캐스케이드가 보장되지 않는다 — S9 가 base 를 갖고
   다른 스테이지가 그 오버라이드를 갖는 역방향 쌍이 존재한다. 신규 분할·이관 시 방향까지 확인할 것. */
@media(prefers-reduced-motion:reduce){.mo,.hc-box,.nt,.am{animation:none}}