/* 50% = 원형 요소 전용. 이 파일의 border-radius:50% 1건은 전부 원형 요소(크럼브 도트(LED)) 전용
   — CLAUDE.md §8-2 ② 사유 주석. 전건 셀렉터를 대조해 확인했다(2026-08-06). */
/* 탐색 크럼브(매체탭바 스킵 — 헤더 nav와 중복 회피). 시안 .crumb 규칙 */
/* flex-wrap:wrap — 애니 탭(content.js:68 _animeSubtabsHTML 부착분)만 한 줄에 다 안 들어가
   375px 에서 18px 가로넘침(anime@375, 하네스 FAIL). 웹툰/만화/소설/라이브러리/작품상세/시즌
   크럼브는 원래도 한 줄에 들어가므로(내용 자체가 더 짧다) wrap 은 그 화면들에서 발동하지 않아
   무회귀 — 실제로 줄바꿈이 필요한 화면(anime@375)에서만 서브탭 그룹이 다음 줄로 내려간다. */
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:'Space Mono';font-size:10.5px;letter-spacing:.1em;color:var(--t3);text-transform:uppercase;margin-bottom:12px}
.crumb .dotled{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 7px var(--led);animation:ledpulse 1.7s ease-in-out infinite}
.crumb b{color:var(--acc-br);font-weight:700}
.crumb .sp{flex:1}

/* 탐색 필터바(시안 <style> 이식 — E2 홈 이식서 빠진 탐색 전용분). filterBarHTML 마크업이 이미 이 클래스 사용. --red=#a3303a=우리 --adult 재사용 */
.filter-bar{border:1px solid var(--bor);background:var(--pane)}
.filter-row{display:flex;align-items:flex-start;gap:12px;padding:9px 14px;border-bottom:1px solid var(--hair)}
.filter-label{font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;width:66px;flex:none;padding-top:5px;line-height:1.3}
.filter-tags{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.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}
.ftag:hover{color:var(--t1);border-color:var(--bor)}
.ftag.on{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br);font-weight:700}
html[data-theme="light"] .ftag.on{color:#fff}
/* 제외 태그 = --neg(2026-08-07 §F A-3 '삭제/제외 → --neg'). 전엔 --adult(19금색)를 빌려 썼는데
   태그 제외는 성인물과 무관하다(filters.js tagFilter.exclude) — 신호가 오염돼 있었다.
   ★components.css:455 에 같은 셀렉터가 있고 이 파일이 뒤에 로드된다(ToonHerb.html 24 < 28).
     즉 화면에 보이는 건 이쪽이다. 저쪽만 고치면 아무것도 안 바뀐다. */
.ftag.exclude{color:var(--neg);border-color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent)}
.ftag.off{opacity:.38;cursor:not-allowed}
.filter-more-btn{font-family:'Space Mono';font-size:11px;color:var(--acc-br);padding:4px 8px;border:1px dashed var(--bor);border-radius:var(--rad)}
.filter-more-btn:hover{border-color:var(--acc)}
.tag-divider{font-family:'Space Mono';font-size:10px;color:var(--t3);display:inline-flex;align-items:center;padding:0 6px;letter-spacing:.05em;align-self:center}
.filter-adv-toggle{display:block;width:100%;text-align:left;font-family:'Space Mono';font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--t2);padding:8px 14px;border-bottom:1px solid var(--hair);background:var(--pane2)}
.filter-adv-toggle:hover{color:var(--acc-br)}
.filter-adv-section{border-bottom:1px solid var(--hair);background:rgba(0,0,0,.14)}
html[data-theme="light"] .filter-adv-section{background:rgba(0,0,0,.03)}
.filter-ep-input{align-items:center}
.ep-num{width:74px;font-size:12px;color:var(--t1);background:var(--bg);border:1px solid var(--hair);border-radius:var(--rad);padding:4px 8px}
.ep-num:focus{outline:none;border-color:var(--acc)}
.ep-tilde,.ep-unit{font-size:11px;color:var(--t3)}
.filter-foot{display:flex;align-items:center;gap:10px;padding:9px 14px}
.filter-reset{font-size:11.5px;font-weight:700;color:var(--adult);border:1px solid var(--adult);border-radius:var(--rad);padding:4px 10px;background:transparent}
.filter-reset:hover{background:rgba(163,48,58,.12)}
.filter-foot .fspring{flex:1}
.filter-foot .slbl{font-family:'Space Mono';font-size:10px;letter-spacing:.06em;color:var(--t3)}
.sort-sel{font-size:12px;font-weight:600;color:var(--t1);background:var(--bg);border:1px solid var(--bor);border-radius:var(--rad);padding:5px 10px}
.sort-sel:focus{outline:none;border-color:var(--acc)}
/* 섹션헤더(시안) — ★.sec-hd는 탐색 외 community/library/season도 사용(전역 영향). components.css:3 margin-bottom:14px 유지 */
.sec-hd{display:flex;align-items:baseline;gap:11px;padding-top:6px}
.sec-hd .num{font-family:'Space Mono';font-size:11px;font-weight:700;color:var(--acc-br);flex:none}
.sec-hd .sec-title{font-family:var(--font);font-weight:700;font-size:19px;letter-spacing:-.4px}
.sec-hd .sec-sub{font-family:'Space Mono';font-size:11px;color:var(--t3)}
.sec-hd .write-fab{margin-left:auto;font-size:12px;font-weight:700;color:var(--acc-br);border:1px solid var(--acc);border-radius:var(--rad);padding:6px 12px;background:var(--acc-dim);white-space:nowrap}
.sec-hd .write-fab:hover{background:var(--acc);color:#06281a}

/* 탐색 D1 — 전역 반응형 기반. layout 4단 트랙 + content-grid 6/4/3/2. 클래스=우리 실제(ad-left/sidebar-right/links). base.css min-width:320 전제 */
/* ★R1(반응형_전수실측_v1 §1-2) — 좌·우 비대칭 접힘 해소(C안). 기존엔 ad-left 만 구 단일 브레이크포인트에서
   접히고 sidebar-right 는 960 에서야 접혀 그 사이 폭 구간(main 컬럼 658px)이 사각지대였다. 그 폭에서
   .wdz .wh-top(작품상세 제목행)의 .score{flex:none;min-width:196px} 가 형제 .wh-main 을 0px 로
   밀어 제목이 글자당 세로분할됐다(원인 확정). 좌·우를 같은 지점에서 함께 접는다는 원칙은 유지 —
   그 구 단일 브레이크포인트 자체는 ★R2(아래)가 4단 min-width 로 대체했다. */
/* ★R2(반응형_규율_설계_v1 §2) — 광고가 본문을 짜부러뜨리는 문제의 근본 수정. 이전엔 구 단일 브레이크포인트
   초과 시 좌우 광고·사이드바가 한 번에 복귀하며 가운데 트랙(minmax(0,1080px))을 553px 까지 짜부렸다
   (work-detail-zine.css:276 실측 기록). 이제 본문이 1080px 하한을 확보한 뒤에만, 콘텐츠(우사이드바)
   먼저·광고(좌) 나중 순서로 남는 공간에만 트랙을 되살린다. base(layout.css)=최협 단계(단일트랙,
   좌우 전부 숨김). 아래 3단계가 폭 순서대로 덧씌운다 — 같은 축(그리드 트랙 폭)을 다투므로 min-width
   오름차순 소스순서가 곧 우선순위다. */
@media(min-width:1450px){.layout-wrap{grid-template-columns:minmax(0,1080px) 300px}.sidebar-right{display:flex}}
@media(min-width:1630px){.layout-wrap{grid-template-columns:160px minmax(0,1080px) 300px}.ad-left{display:flex}}
@media(min-width:1764px){.layout-wrap{grid-template-columns:300px minmax(0,1080px) 300px}}
/* ★content-grid 열수는 layout-wrap 트랙 축과 별개 축이다(R2 검토 결과) — #page 실폭이 기준.
   R2 이후 #page 는 뷰포트≥1120px(=1080 본문+좌우 패딩40) 구간부터는 사이드/광고 단계와 무관하게
   항상 1080px 로 고정된다(각 단계 임계값이 정확히 그 지점에서 1080 상한에 닿도록 설계됨 — 1450/1630/1764
   전부 그 폭에서 이미 본문이 1080 캡에 도달, 실측표=작업 완료보고 참조). 즉 6열 기준설계(#page 1080px,
   components.css:67)가 1120px 이상 전 구간에서 그대로 유효 — 예전처럼 사이드바 collapse 지점에
   얹어 4열로 낮출 필요가 없다(그렇게 하면 1120~1449 구간에서 근거 없이 카드가 262px 까지 과대해진다).
   4열은 #page 가 실제로 1080 밑으로 좁아지는 좁은 단일트랙 구간(<1120)에만 적용한다. */
@media(max-width:1119px){.content-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.content-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 헤더 브레이크포인트 정리(반응형_캠페인 — 태블릿 세로깨짐 수정과 동일 작업) — 옛 1099/600/400(비표준값)을
   전역 4단(560/768/1240)으로 흡수했다. 옛 760 블록에 얹혀있던 .links{overflow-x:auto} 는 아래 1240
   타이어가 760 을 포함해 더 넓은 구간을 커버하므로 중복 제거(760 은 .content-grid 축 값이라 그대로 유지 —
   R2 축 무접촉, 반응형_규율_설계_v1 §2).
   ★근본원인: .topbar .ibtn(components.css) 이 기본 flex-shrink:1 인 채 로그인/관리자/허브 관리(nav.js
   인라인 width:auto 텍스트버튼)에 white-space:nowrap 이 없어, 폭이 모자라면 CJK 글자 단위로 줄바꿈돼
   "로그인"이 세로 3줄로 깨졌다(재현: 401~1220px, 상태 무관 — QA 실측). 지금은 components.css 쪽
   .topbar .ibtn 기본규칙에 flex:none;white-space:nowrap 을 상시 부여해 원천 차단했고, 아래 1240 타이어는
   그로 인해 줄어드는 여유폭을 .links(nav 메뉴) 가 대신 흡수하도록 축소+스크롤을 맡긴다. */
/* .links{overflow-x:auto 스크롤 은닉}+.topbar .sp{width:0} 오버라이드 제거(메인탭 priority+ 도입) —
   components.css 의 .links{flex:0 1 auto;min-width:0;overflow:hidden} 베이스 규칙이 전 폭에서
   이미 축소·클리핑을 흡수하고, .sp{flex:1}(flex-basis:0%) 는 남는 폭이 없으면 자동으로 0에 수렴한다
   (그로우:0 인 .links 가 basis 를 전부 흡수하므로 폭 이원화 오버라이드가 더 필요 없다).
   ⋯ 더보기(nav.js _navFit)가 넘치는 탭을 실제로 옮겨 담당하므로 "잘림 은닉"이 아니라 "보이는 통로로 접기"다. */
@media(max-width:1240px){
/* iOS 자동확대 봉합(§408~418) — 입력 font-size<16px 시 포커스 순간 사파리가 확대. 1240px 미만(터치기기 포함 범위) 한정 */
.login-input,.mypage-input,.admin-input,.sbox input{font-size:16px}
/* 769~1240 완충 — 관리자+허브 관리 텍스트버튼이 유발하던 틈새 잔여넘침은 그 두 버튼이 헤더 자체에서
   빠지며 해소(B안 개편 §8b, 2026-08-31 — 프로필 드롭다운 이관). .sbox 폭 단계축소(200→140, git log
   실측 — 160 경유 없음)도 같은 라운드에서 폐기 — 필 그룹(.util-pill .sbox, components.css)이 전 폭 공통 32px 아이콘 전용으로
   대체해 이 타이어 전용 값 자체가 불필요해졌다(구값은 바이트 보존 대신 삭제 — 죽은 오버라이드 방치
   금지, §8-1 준용). */
}
/* 561~768 — 중간압축(구 600px 타이어, 반응형_전수실측_v1 §1-6 이관 전 값 바이트 보존). 이전엔 이 타이어가
   768 로 흡수되며 옛 400 타이어(최대압축) 값과 통째로 합쳐져, 561~768 구간이 곧바로 최대압축(로고
   아이콘 소실·워드마크 12px·검색창 118px)을 받았다 — A-1.6 이 의도한 3단(표준→완충→중간→최대)이
   2단으로 뭉개진 회귀(리뷰어 적발). 아래서 다시 분리해 전역 4단(560/768) 안에서 3단을 복원한다. */
/* ★561~568 admin+매니저 최대 8px 잔여넘침(STEP0 실측: HEAD 구600px타이어도 flex:none 적용 시 동일 569px
   요구폭 — 3단 복원이 만든 값이 아니라 이미 있던 값을 flex:none(components.css, 별건 승인분)이 드러낸
   기존 결함). gap 6→5px 로 8px 확보(요소 11개 사이 gap 10개 × 1px 절감=10px, 아이콘·sbox 무접촉).
   게스트(adminBtn·managerBtn·msg·notif 전부 없음, 7요소·gap 6개)는 6px 만 줄어 체감 압축 미미
   (실측: 넘침 이미 0이던 상태 유지). 일반 로그인 유저(nav.js — msg·notif 버튼 추가, 9요소·gap 8개)는
   8px 줄어든다. */
/* .topbar .sbox{width:130px...} 폐기(B안 개편 §8b) — 필 그룹이 전 폭 32px 아이콘 전용으로 대체, 이 타이어 전용 축소값 불요. */
@media(max-width:768px){.topbar{padding:0 10px;gap:5px;--hit-h:2px}.topbar .wm{font-size:15px}.topbar .ibtn.adult{padding:0 5px}}
/* --hit-h:2px(components.css 히트타겟 확장, 2026-08-31) — 이 타이어 실측 gap 5px 의 절반-1px 안전여유(2+2=4≤5). */
/* ≤560 — 최대압축(구 400px 타이어 값, 바이트 보존). 로그인유저(쪽지+알림+아바타 3개 추가로 게스트보다
   폭 예산이 빠듯함, QA 실측) 포함 최협폭 기준. .ibtn 자체는 components.css 기본규칙이 이미 flex:none 이라
   여기서 재선언하지 않는다. .mk(로고 픽토그램)는 장식 아이콘이라 .wm 텍스트가 브랜드를 이미 전달 —
   이 폭에서만 숨김.
   ★구 .sbox 폭별 축소(118px→22×22, ④ 검색창 접기)와 .sbox.open 고정오버레이(position:fixed 하드코딩
   top:62px 등)는 B안 개편(§8b, 2026-08-31)으로 폐기했다 — 필 그룹(.util-pill .sbox, components.css)이
   전 폭 공통 32px 아이콘 전용 + .topbar.search-open 헤더 전폭 캡슐 확장으로 대체해, ≤560 전용 분기
   자체가 불필요해졌다(검색은 이제 전 폭에서 동일하게 동작 — 폭별 이원화 제거가 오히려 §8 취지에 더
   합치). 검색 로직(#si/#search-dropdown id·showSearchDropdown 등, nav.js)은 여전히 무접촉. */
/* ★admin+허브매니저 겸직(관리자 프리셋=getMyManagedHubs() 자동전권, hub-apply.js:98) 375px 회귀
   (QA 실측 2026-08-30): .nav-more-wrap(priority+ ⋯더보기)이 새로 추가한 형제 요소라 그 폭(22px,
   .ibtn 과 동일 하한으로 축소 후에도)+새 gap 1개(2px)=24px 이 고스란히 예산 밖으로 추가됐다.
   그 폭만큼 .prof-wrap(로그아웃·마이페이지 통로)이 화면 밖으로 밀렸다(worktree 1ab5fcc A/B 실측:
   320~450px 전 구간에서 회귀량이 정확히 이 24px 로 수렴 — 다른 원인 없음).
   1차: .nav-more-btn 을 .ibtn 과 동일 22×22 로 맞춰 9px 절감(31→22, QA 실측) — 부족(잔여 24px).
   2차(이 규칙): 남은 24px 은 .ibtn/.sbox 하한(둘 다 이미 QA 확정 최소선 — 위 주석 참조)을 건드리지
   않고 .topbar 자체 gap·padding 에서만 회수한다. .nav-more-wrap 은 전 상태 공통 신설 형제라 상태별
   topbar 자식 개수에 포함해야 한다(wrap 포함 실측): guest=8·user=10·admin 단독=11·gallery_manager
   단독=11·admin+gallery_manager 겸직=12. 가장 적은 상태는 guest(8) 다(구주석의 "gallery_manager
   단독=최소" 는 wrap 추가 이전 구값을 오인용한 것) — 최소 상태 기준으로 맞춰야 전 상태가 동시에 닫힌다:
   gap 2→0+padding 좌우 5→1(4px×2=8px)+버튼 22×22 축소(−9px) 를 합산한 순변화(Δ=16−2×자식수)는
   상태별로 갈린다(디렉터 실측 2026-08-31): guest 순증가 +2px(여유 3px→1px)·user 순감소 −2px·
   admin/gallery_manager 단독 순감소 −4px·겸직 순감소 −6px. guest 는 절감이 아니라 여유가 줄었으나
   320~450px 전 구간 실측(worktree A/B, 더블rAF 대기)으로 guest·user 넘침 0 확인(guest 최악
   319/320, 여유 1px). admin·gallery_manager 의 320px 회귀(39px·17px)는 이 변경 이전부터 있던
   기존 결함(1ab5fcc 기준 41px·17px, 오히려 개선)이라 범위 밖이다. 아이콘 자체 크기는 무접촉 —
   간격·여백만 좁혔다. ★주의: guest 여유가 1px 로 전 상태 중 가장 빠듯하다 — 헤더 요소를 추가하면
   guest 가 가장 먼저 넘친다. */
@media(max-width:560px){.topbar{padding:0 1px;gap:0;--hit-h:0px}.topbar .mk{display:none}.topbar .wm{font-size:12px}
/* --hit-h:0px(2026-08-31) — 이 타이어 실측 gap 0px, 좌우 확장 여지 없음(KNOWN, 하네스 등재).
   ::before 는 position:absolute 라 정상 플로우에 관여하지 않으므로 위 guest 여유 1px 예산과 무관(0 위험). */
.topbar .ibtn{width:22px;height:22px}.topbar .ibtn svg{width:13px;height:13px}
.topbar .ibtn.adult{padding:0 2px;font-size:10px}.topbar .av{width:20px;height:20px;font-size:9px}
/* 2026-08-31 이분법+≡ 아이콘 환원 — "메뉴" 2글자 텍스트(실측 23px)를 되돌려 ≡ 단일 glyph 로 바꾸므로
   .topbar .ibtn 과 동일 22×22 정사각이 다시 성립한다(구 텍스트폭 대비 −1px, 폭 예산 여유 방향).
   다른 헤더 요소(검색창·아바타 등)는 무접촉, 이 버튼 자신만 아이콘 크기로 맞춘다. */
.topbar .nav-more-btn{width:22px;height:22px}.topbar .nav-more-btn svg{width:13px;height:13px}}
@media(max-width:520px){.content-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 11px}}