/* 50% = 원형 요소 전용. 이 파일의 border-radius:50% 1건은 전부 원형 요소(크럼브 도트(LED)) 전용
   — CLAUDE.md §8-2 ② 사유 주석. 전건 셀렉터를 대조해 확인했다(2026-08-06). */
/* 탐색 크럼브(매체탭바 스킵 — 헤더 nav와 중복 회피). 시안 .crumb 규칙 */
.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;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 접힘 + content-grid 4/3/2. 클래스=우리 실제(ad-left/sidebar-right/links). base.css min-width:320 전제 */
@media(max-width:1240px){.layout-wrap{grid-template-columns:minmax(0,1fr) 300px}.ad-left{display:none}.content-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:960px){.layout-wrap{grid-template-columns:1fr}.sidebar-right{display:none}}
@media(max-width:760px){.content-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.links{overflow-x:auto;scrollbar-width:none}}
/* 헤더 949px 고정 근본원인(배포표준_적합성감사_v1 §232~236): .links{flex:none}(components.css:2661)가
   축소를 막아 바로 위 줄의 overflow-x:auto 가 걸릴 경계 자체가 없었다(내용폭만큼 그냥 커짐→.topbar 전체가
   넘침). .links 를 flex:1 1 auto+min-width:0 로 축소 가능하게 만들고, 남는 공간을 나눠먹던 .sp(스페이서)를
   flex:none 으로 죽여 그 공간을 전부 .links 에 몰아준다. ★실측(768px)상 949px 넘침이 390px 과 동일하게
   재현돼 브레이크포인트를 768 로 넓힘(760 이 아니라) — 위 content-grid 3열 규칙은 원래 760 그대로 유지
   (범위 밖 재설계 금지, §408~418 최소안). 데스크탑(768px 초과)은 components.css 원본 그대로 무변경. */
/* 761~1099px 갭 — 760 블록의 overflow-x 는 그 구간에 미적용, 축소만으론 안 잘리고 안 스크롤돼 흘러넘침. 여기도 명시.
   ★QA 실측(900/1094px FAIL, 1100px부터 자연해소): 헤더 요구폭이 1100px 미만에선 항상 남으므로 경계를 768→1099로 확장.
   1100px 이상은 이 블록 자체가 미적용이라 데스크톱 무변경 조건 그대로 유지된다. */
@media(max-width:1099px){.links{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}.topbar .sp{flex:none;width:0}
/* iOS 자동확대 봉합(§408~418) — 입력 font-size<16px 시 포커스 순간 사파리가 확대. 1100px 미만(터치기기 포함 범위) 한정, 1100px 이상 데스크톱 무변경 */
.login-input,.mypage-input,.admin-input,.sbox input{font-size:16px}}
/* .links 를 축소 가능하게 만들어도(위 768 블록) 로고(143.5px)+검색박스(200px 고정)+버튼류만으로 이미
   547px 를 요구해 375·390px 폰에선 .links 가 0폭까지 밀린다(실측). 768px 폭에는 여유가 있어(768-547=221)
   미적용, 좁은 폰 전용으로만 .topbar 고정폭 요소를 추가 축소 — 골격 재설계가 아니라 같은 항목(헤더
   반응형)의 폭 예산 조정. */
/* .sbox 70px 은 padding(7×2)+아이콘(14)+gap(7)=35 를 빼면 입력칸 실폭 ~35px 로 placeholder 가 잘려 사실상
   사용 불가(QA 실측). padding·gap 을 줄여 예산을 만들고 폭을 늘려 입력칸 실폭 90px+ 확보(130-30=100).
   .links 가 여전히 overflow-x:auto 로 흡수하므로 600px 가로 스크롤(페이지 레벨) 재발 없음. */
@media(max-width:600px){.topbar{padding:0 10px;gap:6px}.topbar .wm{font-size:15px}.topbar .sbox{width:130px;padding:0 6px;gap:4px}.topbar .ibtn.adult{padding:0 5px}}
/* 320~390px 전용 — 위 600 블록은 게스트(로그인버튼 1개)만 기준이라 로그인유저(쪽지+알림+아바타 3개 추가)에서
   헤더가 화면 밖으로 밀림(QA 실측 320px +76px). 로그인/게스트 양쪽 다 담기도록 고정폭 항목을 추가 축소.
   .mk(로고 픽토그램)는 장식 아이콘이라 .wm 텍스트가 브랜드를 이미 전달 — 이 폭에서만 숨김(20px 확보).
   .sbox 118px 은 padding(5×2)+border(1×2)+gap(3)+svg(13)=28 을 빼면 입력칸 실폭 90px 유지(QA 최소선).
   ★.ibtn 에 flex:none 필수 — 기본 flex-shrink:1 이라 폭이 모자라면 버튼이 아이콘 크기보다도 작게
   짜부라진다(실측: 미지정시 theme-btn 13.65px, svg는 15px라 아이콘이 버튼 밖으로 넘침). 고정폭으로
   막고 대신 그 폭 자체를 줄인다. */
@media(max-width:400px){.topbar{padding:0 5px;gap:2px}.topbar .mk{display:none}.topbar .wm{font-size:12px}
.topbar .sbox{width:118px;padding:0 5px;gap:3px}.topbar .sbox svg{width:13px;height:13px}
.topbar .ibtn{width:22px;height:22px;flex:none}.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}}
@media(max-width:520px){.content-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 11px}}