/* library-zine.css — 라이브러리 진 스타일 컴포넌트(시안 style 블록 이식, L2). 마크업 교체=L3~L4. 토큰=base.css 재사용. */
/* ★스코프 루트가 2개다: 본문 .lbz(main.page-main) + 사이드 .lbz-side(librarySideHTML 최상위).
   #sidebar-right 는 #page 밖이라(ToonHerb.html:62) 본문 스코프만으론 사이드 규칙이 통째로 안 먹는다.
   같은 함정으로 이미 한 번 파손된 선례 = components.css:542-547(홈 사이드바 .srow/.prow 가 .main 밖이라 flex 미적용, 세로 분해). */
/* 이식 제외: 글로벌 리셋(universal·body·a·img·scrollbar) · .grain · 실 nav 소유 .hd/.topbar/.logo/.links/.wm/.mk/.sbox/.ibtn/.av
   · .shell/.main/.foot(우리 레이아웃·푸터가 이미 있다) · 시안 광고 placeholder 마크업 · mock 이미지 경로. */
/* ★주석 안에 별표와 슬래시를 붙여 쓰지 말 것 — 주석 조기종료로 뒤 블록이 통째로 소실된 파손 이력이 있다(work-detail-zine QA 2026-07-22). */
/* keyframes ledpulse 는 components.css:2588 전역 정의를 재사용한다(중복 정의 금지 — wdz 선례와 동일). */

/* ★현행 마크업과 클래스명이 겹치는 3건은 스코프만으론 부족해 추가 가드를 걸었다(L2 계약 = 화면 회귀 0).
   실측 충돌: .sec-hd(현 라이브러리 섹션헤드) · .pager(pagination.js 컨테이너, .board-pagination 이 이미 스타일) · .empty(목록 빈상태 + L1 사이드 빈안내).
   가드 방식 = 진 스킨에만 존재하는 자식/조상 요구. L3·L4 에서 해당 마크업이 들어오면 자동 발효한다.
   .mono 는 겹치지만 값이 전역과 동일(Space Mono)이라 그대로 이식했다. */

/* 시안 로컬 변수 3개만 별칭(값 매핑, 신규 색 토큰 아님). 나머지는 base.css 재사용.
   :root 가 아니라 스코프 루트에 얹는다 — 이 파일은 스코프 없는 최상위 규칙을 두지 않는다. */
.lbz,.lbz-side{
  --ink:var(--bg);      /* acc-br 배경 위 텍스트=캔버스색 */
  --red:var(--neg);     /* 부정 의미 토큰 = 기존 --neg */
  --ad:var(--sur);      /* 광고 패널 배경 */
}
html[data-theme="light"] .lbz,html[data-theme="light"] .lbz-side{ --ink:#fff; --ad:var(--pane2); }

/* ── 사이드 컨테이너(시안 .sb 레이아웃을 스코프 루트 자체에 부여) ──
   ★시안 .sb 의 position:sticky/top:74px 는 뺐다 — 현행 .sidebar-right(layout.css:42)는 sticky 가 아니라
   지금 넣으면 그 자리에서 스크롤 거동이 바뀐다(L2 계약 = 화면 회귀 0). 스티키 도입은 L3 판단.
   아래 1180 미디어의 position:static 은 그래서 현재 no-op 이며, 시안 대조용으로 남긴다. */
.lbz-side{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ── 공통 유틸 ── */
.lbz .mono,.lbz-side .mono{font-family:'Space Mono',monospace}
.lbz .num,.lbz-side .num{font-variant-numeric:tabular-nums}
.lbz .barbar{height:16px;color:var(--acc);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)}
.lbz .led,.lbz-side .led{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 7px var(--led);display:inline-block;flex:none;animation:ledpulse 1.7s ease-in-out infinite}   /* 50% = 원형 인디케이터 */
@media(prefers-reduced-motion:reduce){.lbz .led,.lbz-side .led{animation:none}}

/* ── 헤드 블록 세로 리듬(L3a 추가) ──
   시안은 .main 의 flex column gap:14px 이 잡아줬는데 .main 은 이식 제외분(우리 레이아웃 소유)이라
   진 헤드 블록만 감싸는 컨테이너에 같은 리듬을 준다. 좌우 20px = 기존 본문 컬럼과 정렬 맞춤. */
.lbz .lbz-stack{display:flex;flex-direction:column;gap:14px;padding:0 20px}
/* ★#lib-controls-area = 부분갱신 앵커(§13-2)일 뿐 레이아웃 박스가 아니다. display:contents 로
   레이아웃 트리에서 투명하게 만들어 .srail/.cbar/.fbar 이 .lbz-stack 의 직계 flex 자식 자격을
   그대로 유지하게 한다. 이 줄이 없으면 셋이 block 자식으로 떨어져 gap:14px 을 잃고,
   .srail 과 .fbar 의 1px 테두리가 맞붙는다(필터를 열었을 때 눈에 띈다). */
.lbz #lib-controls-area{display:contents}

/* ── 상태 레일 상태점 수식자(L3a 추가) ──
   ★색만으로 가르지 않는다 — 관심은 빈 링이라 색약·흑백에서도 나머지와 구분된다. */
.lbz .st .dot--watching{background:var(--led)}
.lbz .st .dot--binge{background:var(--gold)}
.lbz .st .dot--completed{background:var(--acc-br)}
.lbz .st .dot--dropped{background:var(--red)}
.lbz .st .dot--interested{background:transparent;box-shadow:inset 0 0 0 1.5px var(--t2)}

/* ── 크럼 ── */
.lbz .crumb{display:flex;align-items:center;gap:9px;font-family:'Space Mono';font-size:10.5px;letter-spacing:.1em;color:var(--t3);text-transform:uppercase}
.lbz .crumb b{color:var(--acc-br);font-weight:700}
.lbz .crumb .sp{flex:1}

/* ═══ shelf head (진 히어로 스트립) ═══ */
.lbz .shelf{position:relative;border:1px solid var(--bor);background:var(--pane);overflow:hidden;display:flex;align-items:stretch}
.lbz .shelf::before{content:"";position:absolute;inset:0;background-image:radial-gradient(currentColor 1px,transparent 1.4px);background-size:9px 9px;color:var(--t1);opacity:.045}
.lbz .shelf-l{position:relative;padding:16px 40px 16px 18px;display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.lbz .shelf .kr{position:absolute;right:10px;top:14px;bottom:14px;display:flex;align-items:center;font-family:'Space Mono';font-size:9.5px;font-weight:700;letter-spacing:.34em;color:var(--t3);opacity:.5;writing-mode:vertical-rl;text-transform:uppercase;pointer-events:none;user-select:none}
.lbz .shelf-kick{display:flex;align-items:center;gap:8px;font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--acc-br);text-transform:uppercase}
.lbz .shelf-ttl{font-family:'Chakra Petch',var(--font);font-weight:700;font-size:34px;line-height:.98;letter-spacing:-.6px;text-transform:uppercase}
.lbz .shelf-ttl em{font-style:normal;color:var(--acc-br)}
.lbz .shelf-sub{font-size:12.5px;color:var(--t2)}
.lbz .shelf-r{position:relative;border-left:1px solid var(--hair);display:flex;flex:none}
.lbz .mstat{padding:16px 18px 14px;display:flex;flex-direction:column;gap:3px;min-width:96px;border-right:1px solid var(--hair)}
.lbz .mstat:last-child{border-right:none}
.lbz .mstat .l{font-family:'Space Mono';font-size:9.5px;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;white-space:nowrap}
.lbz .mstat .v{font-family:'Chakra Petch';font-weight:700;font-size:26px;line-height:1;color:var(--t1)}
.lbz .mstat .v i{font-style:normal;font-size:11px;font-family:var(--font);font-weight:600;color:var(--t3);margin-left:3px}
.lbz .mstat.hl .v{color:var(--acc-br)}
.lbz .mstat.warn .v{color:var(--gold)}
.lbz .shelf-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--acc) 0 22px,rgba(47,148,96,.2) 22px 30px)}

/* ═══ view tabs ═══ */
.lbz .vtabs{display:flex;gap:4px;position:relative}
.lbz .vtab{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--t2);padding:9px 16px;border:1px solid var(--hair);background:var(--pane);transition:.12s;white-space:nowrap}
.lbz .vtab:hover{color:var(--t1);border-color:var(--bor)}
.lbz .vtab.on{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br)}
html[data-theme="light"] .lbz .vtab.on{color:#fff}
.lbz .vtab .mc{font-family:'Space Mono';font-size:10px;font-weight:700;opacity:.75}

/* ═══ status rail (1차축) ═══ */
.lbz .srail{display:flex;border:1px solid var(--bor);background:var(--pane);overflow-x:auto;scrollbar-width:none}
.lbz .srail::-webkit-scrollbar{display:none}
.lbz .st{position:relative;flex:1;min-width:92px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:10px 14px;border-right:1px solid var(--hair);white-space:nowrap}
.lbz .st:last-child{border-right:none}
.lbz .st .sl{font-size:12.5px;font-weight:700;color:var(--t2);white-space:nowrap}
.lbz .st .sv{font-family:'Chakra Petch';font-weight:700;font-size:18px;line-height:1;color:var(--t3)}
.lbz .st:hover .sl{color:var(--t1)}
.lbz .st.on{background:var(--pane2)}
.lbz .st.on .sl{color:var(--t1)}
.lbz .st.on .sv{color:var(--acc-br)}
.lbz .st::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.lbz .st.on::after{background:var(--acc-br);box-shadow:0 0 9px var(--acc)}
.lbz .st .dot{position:absolute;top:10px;right:12px;width:5px;height:5px;border-radius:50%;opacity:.85}   /* 50% = 원형 상태점 */

/* ═══ control bar ═══ */
/* ★전역 .cbar 역누출 중화 — components.css:343 의 .cbar 는 **관리자 대시보드 차트 막대**다
   (.chart-bars>.cbar, .cbar-lbl 동반). 우리 컨트롤바와 이름만 같고 의미가 다르다.
   실측 오염: background=acc(초록 띠) · opacity .65(컨트롤바 전체가 자식까지 흐려짐) · radius 3px
             · min-height 4px · flex 1 1 0% · position relative · cursor default
   ★flex:none 필수 — .lbz-stack 이 세로 flex 라 flex:1 1 0% 가 남으면 컨트롤바가 세로로 늘어난다.
   중화는 우리 쪽에서만 한다(components.css 는 남의 소비처 — 건드리지 않는다).
   선례 = .lbz .grid{padding-left:0}(L4a 전역 .grid 4px 중화). */
.lbz .cbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:none;opacity:1;border-radius:0;min-height:0;flex:none;position:static;cursor:auto}
.lbz .cbtn{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--t2);padding:7px 12px;border:1px solid var(--hair);background:var(--pane);white-space:nowrap}
.lbz .cbtn:hover{color:var(--t1);border-color:var(--bor)}
.lbz .cbtn.on{color:var(--acc-br);border-color:var(--acc);background:var(--acc-dim)}
.lbz .cbtn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.lbz .cbtn .n{font-family:'Space Mono';font-size:10px;font-weight:700}
.lbz .cbar .sp{flex:1}
.lbz .slbl{font-family:'Space Mono';font-size:10px;letter-spacing:.06em;color:var(--t3);text-transform:uppercase}
.lbz .sort-sel{font-size:12px;font-weight:600;color:var(--t1);background:var(--bg);border:1px solid var(--bor);border-radius:var(--rad);padding:6px 10px}
.lbz .sort-sel:focus{outline:none;border-color:var(--acc)}
.lbz .vtog{display:flex;border:1px solid var(--hair);background:var(--pane)}
.lbz .vtog button{width:34px;height:32px;display:grid;place-items:center;color:var(--t3);border-right:1px solid var(--hair)}
.lbz .vtog button:last-child{border-right:none}
.lbz .vtog button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none}
.lbz .vtog button.on{color:var(--ink);background:var(--acc-br)}
html[data-theme="light"] .lbz .vtog button.on{color:#fff}

/* ═══ filter bar ═══ */
.lbz .fbar{border:1px solid var(--bor);background:var(--pane)}
.lbz .frow{display:flex;align-items:flex-start;gap:12px;padding:9px 14px;border-bottom:1px solid var(--hair)}
.lbz .flbl{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;width:74px;flex:none;padding-top:5px;line-height:1.3}
.lbz .ftags{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.lbz .ftag{font-size:12px;font-weight:600;color:var(--t2);padding:4px 10px;border:1px solid var(--hair);background:var(--bg);border-radius:var(--rad);transition:.1s;white-space:nowrap}
.lbz .ftag:hover{color:var(--t1);border-color:var(--bor)}
.lbz .ftag.on{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br);font-weight:700}
html[data-theme="light"] .lbz .ftag.on{color:#fff}
.lbz .ftag .c{font-family:'Space Mono';font-size:9.5px;opacity:.6;margin-left:4px}
.lbz .ffoot{display:flex;align-items:center;gap:10px;padding:9px 14px}
.lbz .freset{font-size:11.5px;font-weight:700;color:var(--red);border:1px solid var(--red);border-radius:var(--rad);padding:4px 10px}
.lbz .freset:hover{background:rgba(163,48,58,.12)}
.lbz .ffoot .sp{flex:1}
.lbz .fsum{font-family:'Space Mono';font-size:10.5px;color:var(--t3)}
.lbz .fsum b{color:var(--acc-br)}

/* ═══ section head ═══ */
/* 가드: 현 라이브러리 마크업에도 .sec-hd 가 있다(전역 규칙 explore-responsive.css:37 적용 중).
   진 스킨 sec-hd 는 항상 .n 을 자식으로 갖는다 — 그 형태에만 발효시킨다. */
.lbz .sec-hd:has(>.n){display:flex;align-items:baseline;gap:11px;padding-top:4px}
.lbz .sec-hd .n{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--acc-br)}
.lbz .sec-hd .t{font-weight:700;font-size:18px;letter-spacing:-.4px}
.lbz .sec-hd .s{font-family:'Space Mono';font-size:11px;color:var(--t3)}

/* ═══ grid view ═══ */
.lbz .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 13px}
.lbz .grid>.card{min-width:0}
.lbz .card{cursor:pointer}
/* 가드: 공용 cardHTML(components/card.js)이 .cover/.ci/.cmeta/.ctitle/.csub 를 쓴다.
   라이브러리 본문에도 취향위젯(libTasteRecHTML)이 그 카드를 렌더하므로, 진 스킨 카드 내부 규칙은
   진 그리드(.grid) 안에서만 발효시킨다 — 현 마크업은 .lib-grid 라 매치되지 않는다. */
.lbz .grid .cover{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--hair);background:var(--pane2)}
.lbz .grid .cover .ci{position:absolute;inset:0;background-size:cover;background-position:center 28%;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lbz .grid .card:hover .cover .ci{transform:scale(1.045)}
.lbz .grid .cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 3px 4px);mix-blend-mode:multiply;opacity:.45}
.lbz .grid .stag{position:absolute;left:0;top:0;z-index:2;display:inline-flex;align-items:center;gap:4px;font-family:'Space Mono';font-size:9px;font-weight:700;letter-spacing:.04em;padding:3px 7px;color:#fff;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);white-space:nowrap}
.lbz .grid .stag i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}   /* 50% = 원형 상태점 */
.lbz .grid .stag i.ho,.lbz .lbadge i.ho{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.lbz .grid .ntag{position:absolute;right:0;top:0;z-index:2;font-size:9px;font-weight:800;letter-spacing:.04em;padding:3px 6px;background:var(--led);color:#0a0b0c}
.lbz .grid .prog{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;background:rgba(0,0,0,.55)}
.lbz .grid .prog i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--led) 0 5px,rgba(217,224,33,.3) 5px 8px);box-shadow:0 0 9px rgba(217,224,33,.5)}
.lbz .grid .cmeta{padding:8px 1px 0;display:flex;flex-direction:column;gap:3px}
.lbz .grid .ctitle{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbz .grid .crow{display:flex;align-items:center;gap:8px;min-width:0}
.lbz .hsc{display:inline-flex;align-items:baseline;gap:3px;font-family:'Space Mono';font-size:12.5px;font-weight:700;color:var(--acc-br);font-variant-numeric:tabular-nums;flex:none}
.lbz .hsc .leaf{width:11px;height:11px;color:var(--acc-br);align-self:center}
.lbz .hsc.none{color:var(--t3)}
.lbz .mysc{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--t2);flex:none;white-space:nowrap}
.lbz .mysc b{color:var(--gold);font-size:12px}
.lbz .mysc.none{color:var(--t3);font-weight:400}
.lbz .grid .csub{font-family:'Space Mono';font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 카드 이식 보강(L4a 추가) ── */
/* 전역 .grid(components.css:55)의 padding-left:4px 중화 — 진 그리드는 본문 컬럼과 좌측을 맞춘다.
   L2 의 .lbz .grid 블록 값은 건드리지 않고 뒤에서 덮는다. */
.lbz .grid{padding-left:0}
/* 표지 폴백 이니셜 — 이미지 없거나 onerror 로 숨겨졌을 때 .ci 배경색 위에 보인다. */
.lbz .grid .cini{position:absolute;inset:0;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:26px;color:rgba(255,255,255,.5);z-index:0}
/* thumb-img 는 .ci(absolute=positioned) 안에 들어가 inset:0 로 채운다. 이미지가 있으면 이니셜을 덮는다. */
.lbz .grid .ci .thumb-img{z-index:1}
/* 상태 태그 점 — .stag i 는 L2 가 이미 원형(5px)이라 .dot--* 는 색·링만 얹는다. */
.lbz .stag i.dot--watching{background:var(--led)}
.lbz .stag i.dot--binge{background:var(--gold)}
.lbz .stag i.dot--completed{background:var(--acc-br)}
.lbz .stag i.dot--dropped{background:var(--red)}
.lbz .stag i.dot--interested{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
/* 점수 없음(집계 전·평점 미유입) — 정직한 빈 상태 */
.lbz .hsc.none{color:var(--t3)}

/* ═══ list view ═══ */
.lbz .list{display:flex;flex-direction:column;border:1px solid var(--bor);background:var(--pane)}
.lbz .lrow{display:flex;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--hair);cursor:pointer}
.lbz .lrow:last-child{border-bottom:none}
.lbz .lrow:hover{background:var(--pane2)}
.lbz .lth{width:46px;flex:none;aspect-ratio:2/3;position:relative;overflow:hidden;border:1px solid var(--hair);background:var(--pane2)}
.lbz .lth .ci{position:absolute;inset:0;background-size:cover;background-position:center 28%}
.lbz .lmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lbz .lttl{display:flex;align-items:center;gap:8px;min-width:0}
.lbz .lttl .t{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbz .lbadge{display:inline-flex;align-items:center;gap:4px;font-family:'Space Mono';font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border:1px solid var(--hair);color:var(--t2);flex:none;white-space:nowrap}
.lbz .lbadge i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}   /* 50% = 원형 상태점 */
.lbz .lsub{font-family:'Space Mono';font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbz .lprog{display:flex;align-items:center;gap:8px;flex:none;width:132px}
.lbz .lbar{flex:1;height:3px;background:var(--hair);overflow:hidden}
.lbz .lbar i{display:block;height:100%;background:var(--acc-br)}
.lbz .lpt{font-family:'Space Mono';font-size:10.5px;color:var(--t2);flex:none;font-variant-numeric:tabular-nums}
.lbz .lsc{display:flex;align-items:center;gap:12px;flex:none;width:150px;justify-content:flex-end}
.lbz .ldate{font-family:'Space Mono';font-size:10px;color:var(--t3);flex:none;width:84px;text-align:right}
/* 가드: .empty 는 현 목록 빈상태(.lib-list/.lib-grid 내부)와 L1 사이드 빈안내가 이미 쓴다(전역 components.css:209).
   진 스킨 목록 컨테이너(.list/.grid) 안에서만 발효시킨다 — 사이드에는 의도적으로 넣지 않는다. */
.lbz .list .empty,.lbz .grid .empty{padding:56px 0;text-align:center;font-family:'Space Mono';font-size:12.5px;color:var(--t3)}
.lbz .list .empty small,.lbz .grid .empty small{display:block;margin-top:8px;opacity:.7}

/* ── 리스트 행 이식 보강(L4b 추가) ── */
/* 썸네일: 카드와 같은 방식(.ci = 폴백색 레이어 겸 이미지 그릇, absolute 라 thumb-img 의 positioned 부모) */
.lbz .lth .cini{position:absolute;inset:0;display:grid;place-items:center;font-family:'Chakra Petch';font-weight:700;font-size:15px;color:rgba(255,255,255,.5);z-index:0}
.lbz .lth .ci .thumb-img{z-index:1}
/* 상태 배지 점 — .stag 와 같은 토큰 매핑(.lbadge i 는 L2 가 이미 원형 5px) */
.lbz .lbadge i.dot--watching{background:var(--led)}
.lbz .lbadge i.dot--binge{background:var(--gold)}
.lbz .lbadge i.dot--completed{background:var(--acc-br)}
.lbz .lbadge i.dot--dropped{background:var(--red)}
.lbz .lbadge i.dot--interested{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
/* NEW 배지 · 진행 없음 — 시안은 인라인 style 이지만 클래스로 간다 */
.lbz .lbadge.new{color:var(--led);border-color:var(--led)}
.lbz .lpt.none{color:var(--t3)}
/* 상태 배지는 클릭 가능(상태 메뉴) — 행 클릭과 구분되게 커서·호버를 준다 */
.lbz .lttl .lbadge[onclick]{cursor:pointer}
.lbz .lttl .lbadge[onclick]:hover{border-color:var(--acc);color:var(--t1)}
.lbz .lsub a{cursor:pointer}

/* ═══ pager ═══ */
/* 가드: pagination.js 컨테이너가 class="pager board-pagination" 라 이미 .board-pagination(components.css:1223)이 스타일한다.
   진 스킨 버튼은 .pg — 그 자식이 있을 때만 발효. */
.lbz .pager:has(>.pg){display:flex;align-items:center;justify-content:center;gap:5px;padding:18px 0 2px}
.lbz .pg{min-width:32px;height:32px;padding:0 6px;font-family:'Space Mono';font-size:12px;font-weight:700;color:var(--t2);border:1px solid var(--hair);background:var(--pane);display:grid;place-items:center}
.lbz .pg:hover{color:var(--t1);border-color:var(--bor)}
.lbz .pg.on{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br)}
html[data-theme="light"] .lbz .pg.on{color:#fff}

/* ═══ sidebar (스코프 루트 = .lbz-side) ═══ */
.lbz-side .side{border:1px solid var(--bor);background:var(--pane);padding:14px}
.lbz-side .side-hd{display:flex;align-items:center;gap:7px;margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.lbz-side .side-hd .t{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--t3);text-transform:uppercase}
.lbz-side .side-hd .sp{flex:1}
.lbz-side .side-hd .v{font-family:'Space Mono';font-size:10px;color:var(--acc-br)}
.lbz-side .hrow{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.lbz-side .hrow .hs{font-family:'Space Mono';font-size:10px;color:var(--t3);width:22px;text-align:right;flex:none}
.lbz-side .hrow .ht{flex:1;height:9px;background:var(--bg);border:1px solid var(--hair);overflow:hidden}
.lbz-side .hrow .hb{display:block;height:100%;background:var(--acc);min-width:0}
.lbz-side .hrow.top .hb{background:var(--acc-br)}
.lbz-side .hrow .hc{font-family:'Space Mono';font-size:10px;color:var(--t3);width:20px;flex:none}
.lbz-side .gcloud{display:flex;flex-wrap:wrap;gap:5px}
.lbz-side .gtag{font-size:11.5px;font-weight:600;color:var(--t2);padding:3px 9px;border:1px solid var(--hair);background:var(--bg);border-radius:var(--rad)}
.lbz-side .gtag:hover{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br)}
html[data-theme="light"] .lbz-side .gtag:hover{color:#fff}
.lbz-side .gtag .c{font-family:'Space Mono';font-size:9.5px;color:var(--t3);margin-left:4px}
.lbz-side .cta{display:flex;align-items:center;gap:10px;border:1px dashed var(--bor);background:var(--pane);padding:12px 13px}
.lbz-side .cta .k{font-family:'Chakra Petch';font-weight:700;font-size:24px;color:var(--gold);line-height:1;flex:none}
.lbz-side .cta .d{font-size:11.5px;color:var(--t2);line-height:1.5}
.lbz-side .cta:hover{border-color:var(--acc)}
.lbz-side .ad{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid var(--bor);background:var(--ad);color:var(--t3)}
.lbz-side .ad .l{font-size:9px;font-weight:800;letter-spacing:.16em}
.lbz-side .ad .z{font-size:10px;opacity:.7}

/* ═══ follow tab ═══ */
.lbz .fsec{margin-bottom:26px}
.lbz .fsec-hd{display:flex;align-items:center;gap:9px;padding-bottom:7px;border-bottom:1px solid var(--bor);margin-bottom:14px}
.lbz .fsec-hd .t{font-family:'Space Mono';font-size:10.5px;font-weight:700;letter-spacing:.11em;color:var(--t2);text-transform:uppercase}
.lbz .fsec-hd .sp{flex:1}
.lbz .fsec-hd .c{font-family:'Space Mono';font-size:10px;color:var(--t3)}
.lbz .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:18px 12px}
.lbz .fcard{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;min-width:0}
.lbz .fav{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--bor);background:var(--pane2);font-family:'Chakra Petch';font-weight:700;font-size:24px;color:#06281a;position:relative;overflow:hidden;transition:.15s}   /* 50% = 원형 아바타 */
.lbz .fcard:hover .fav{border-color:var(--acc-br);box-shadow:0 0 0 3px var(--acc-dim)}
.lbz .fav .ledring{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--led);box-shadow:0 0 8px var(--led)}
.lbz .fname{font-size:12.5px;font-weight:700;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbz .fsub{font-family:'Space Mono';font-size:10px;color:var(--t3);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbz .fbadge{font-family:'Space Mono';font-size:9.5px;font-weight:700;color:var(--acc-br)}

/* ── 팔로우 탭 이식 보강(L5 추가) ── */
/* ★.ledring(활동중 LED) 마크업은 발행하지 않는다 — online-presence.js 는 채널 총 접속자 수만 그리고
   유저별 온라인 신호가 없다. 위 L2 이식분 `.lbz .fav .ledring` 규칙은 그래서 지금 매치되는 요소가 없다(미발효).
   유저별 신호가 생기면 마크업만 얹으면 켜진다(L2 sticky 미이식과 같은 판단). */
/* 아바타 팔레트 — 색 정본 = base.css --flw-av-1..8. 고스트(.lbz 밖)는 pages.css 가 같은 토큰으로 받는다.
   글자색은 L2 .fav 기본(#06281a)을 덮는다 — 새 팔레트는 어두운 그린이라 흰 글자라야 대비가 선다. */
.lbz .fav--1{background:var(--flw-av-1)}
.lbz .fav--2{background:var(--flw-av-2)}
.lbz .fav--3{background:var(--flw-av-3)}
.lbz .fav--4{background:var(--flw-av-4)}
.lbz .fav--5{background:var(--flw-av-5)}
.lbz .fav--6{background:var(--flw-av-6)}
.lbz .fav--7{background:var(--flw-av-7)}
.lbz .fav--8{background:var(--flw-av-8)}
.lbz .fav--1,.lbz .fav--2,.lbz .fav--3,.lbz .fav--5,.lbz .fav--6,.lbz .fav--7,.lbz .fav--8{color:var(--c-white)}
.lbz .fav--4{color:#1a1400}   /* 골드 배경은 흰 글자 대비가 모자란다 */
.lbz .fav--icon{background:linear-gradient(135deg,var(--bg3),var(--bg4))}
.lbz .fav-ico{color:var(--t3);display:flex}
.lbz .fsub-plain{color:var(--t3)}
/* 언팔 X 앵커 — .fav 는 overflow:hidden 이라 버튼을 안에 못 넣는다 */
.lbz .fav-wrap{position:relative;flex-shrink:0;margin-bottom:4px}
/* ★아래는 클래스 리네임으로 매치를 잃는 pages.css 규칙의 이관분이다(원본 값 유지, 삭제 아님 — pages.css 정리는 L6).
   long-press 드래그의 시각 피드백(hold 링·ready 확대·dragging 흐림)과 터치 제스처 허용이 여기 달려 있다. */
.lbz .fcard{user-select:none;touch-action:pan-y}
.lbz .fcard .fav{transition:transform var(--flw-slot-fade-duration) var(--flw-ease-spring),box-shadow var(--flw-slot-fade-duration) var(--flw-ease-spring),border-color 200ms var(--flw-ease-spring),opacity var(--flw-slot-fade-duration) var(--flw-ease-out),border-style 0ms step-end}
.lbz .fcard .fname,.lbz .fcard .fsub{transition:opacity var(--flw-slot-fade-duration) var(--flw-ease-out)}
.lbz .fcard.is-holding .fav{animation:flw-av-ring-grow var(--flw-hold-anim-duration) var(--flw-ease-out) forwards;cursor:grab}
.lbz .fcard.is-drag-ready .fav{transform:scale(var(--flw-ready-av-scale));box-shadow:var(--flw-ready-ring);border-color:var(--acc);cursor:grabbing}
.lbz .fcard.is-dragging{pointer-events:none;cursor:default}
.lbz .fcard.is-dragging .fav{opacity:var(--flw-slot-content-opacity);transform:scale(0.9);box-shadow:none;border-color:var(--bor);border-style:dashed}
.lbz .fcard.is-dragging .fname,.lbz .fcard.is-dragging .fsub{opacity:var(--flw-slot-content-opacity)}
.lbz .fsec[data-count="1"] .fcard.is-holding .fav,.lbz .fsec[data-count="1"] .fcard.is-drag-ready .fav{animation:none;transform:none;box-shadow:none;border-color:var(--bor);cursor:pointer}
.lbz .fsec[data-count="1"] .fcard.is-dragging{pointer-events:auto;cursor:pointer}
.lbz .fsec[data-count="1"] .fcard.is-dragging .fav{opacity:1;transform:none;border-style:solid;border-color:var(--bor)}
.lbz .fsec[data-count="1"] .fcard.is-dragging .fname,.lbz .fsec[data-count="1"] .fcard.is-dragging .fsub{opacity:1}
.lbz .fgrid{position:relative}   /* 드롭 인디케이터 기준 */
/* 구 pages.css 는 아바타 테두리가 2px 였으나 시안(L2 .lbz .fav)은 1px 다 — 덮지 않고 시안을 따른다. */
.lbz .fcard:hover .flw-unfollow{opacity:1}
/* 팔로우 그리드 반응형(구 .flw-grid 767/479 이관) */
@media(max-width:767px){
  .lbz .fgrid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px 8px}
  .lbz .fav{width:64px;height:64px}
}
@media(max-width:479px){
  .lbz .fgrid{grid-template-columns:repeat(3,1fr);gap:12px 8px}
  .lbz .fav{width:60px;height:60px;font-size:18px}
}

/* ═══ 반응형(시안 1180 / 860 / 600) — .shell·.topbar·.sbox·.links 는 이식 제외분이라 뺐다 ═══ */
@media(max-width:1180px){
  .lbz-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .lbz .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:860px){
  .lbz .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lbz .shelf{flex-direction:column}
  .lbz .shelf-r{border-left:none;border-top:1px solid var(--hair)}
  .lbz .mstat{flex:1;min-width:0}
  .lbz .lprog{display:none}
  .lbz .lsc{width:auto}
  .lbz .ldate{display:none}
  .lbz-side{grid-template-columns:1fr}
}
@media(max-width:600px){
  .lbz .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lbz .shelf-ttl{font-size:27px}
  .lbz .flbl{width:58px}
  .lbz .st{min-width:80px;padding:9px 11px}
}