/* layout.css — 셸 골격 + 남은 전역 조각.
   ★2026-08-06 죽은 규칙 49줄 제거. 근거: 렌더 경로 전수(리터럴 class= / 함수 인수·템플릿 /
     classList 3경로 + CSS 조상 스코프·타 파일 재정의까지 §14-5 규칙대로 확인).
     발단 — 설정 페이지 QA 중 nav 19금 버튼을 .adult-badge 로 찾았는데 DOM 에 없었다.
     정본은 #adult-btn(.ibtn.adult, nav.js:72)이었다. 죽은 CSS 가 정본을 사칭하고 있었다.
   제거된 것과 현행 정본:
     .nav → .hd(ToonHerb.html:58 / components.css:2568)
     .nav-logo → .logo/.wm/.mk (nav.js:68)          .nav-links → .links (nav.js:69)
     .nav-r → .sp (nav.js:70)                        .sico → .sbox 내부 raw <svg>(래퍼 없음)
     .nbtn 계열 → .ibtn (nav.js:47~76)               .prof → .av (nav.js:52)
     .adult-badge 계열 → .topbar .ibtn.adult (components.css:2585~2589)
     .post- 계열 → .comm-post- · .hub-post- · .side-post- (접두 분화)
     .hero · .hslide · .hbg · .hbtn- · .harr 등 HERO 전체 → .jhero 계열 (home.js:30, home-zine.css:107)
       ※ .harr(좌우 화살표)는 대응 실체가 없다 — .jhero 는 닷 클릭으로만 전환한다(home.js:63)
     .dir-sub/.gal-subbtn → .gal-fav (community.js:651)
   ★옛 워드마크(.logo-text-wrap/.logo-name/.logo-hub/.logo-sub)도 같은 사유로 이미 제거됐다.
     로고 정의는 한 곳뿐이다 → docs/브랜드_로고_정본_v1.md §1
   ★남은 규칙을 지울 땐 상속·확장을 먼저 보라: .sbox 는 components.css:2579 (.topbar .sbox) 가,
     .layout-wrap/.ad-left/.sidebar-right 는 explore-responsive.css 와 components.css 가 얹혀 있다. */
/* READ BADGE on card thumbnail */
.read-badge{position:absolute;bottom:6px;left:6px;background:var(--acc);color:var(--c-white);font-size:9px;font-weight:700;padding:2px 6px;border-radius:var(--rad);line-height:1.4;pointer-events:none;z-index:5}
/* RECENT page delete button */
.recent-card-wrap{position:relative}
.recent-del{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.65);color:var(--c-white);border:none;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;z-index:20;padding:0;line-height:1}
.recent-del:hover{background:rgba(180,0,0,.75)}
.nlink{padding:0 12px;height:50px;display:flex;align-items:center;font-size:13px;font-weight:500;color:var(--t2);white-space:nowrap;position:relative;transition:color .15s;cursor:pointer}
.nlink:hover{color:var(--t1)}
.nlink.on{color:var(--t1);font-weight:700}
.nlink.on::after{content:'';position:absolute;bottom:0;left:12px;right:12px;height:2px;background:var(--acc)}
.sbox{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--bor);border-radius:var(--rad);padding:0 10px;height:30px;position:relative}
.sbox input{background:none;border:none;outline:none;color:var(--t1);font-size:13px;width:150px}
.sbox input::placeholder{color:var(--t3)}

/* LAYOUT — R2(반응형_규율_설계_v1 §2) 4단 트랙. 본문은 어떤 폭에서도 minmax(0,1080px) 하한을 갖고,
   사이드(우)→광고(좌) 순서로 남는 공간에만 복귀한다(본문을 광고가 짜부러뜨리지 않는다 — 타사 실측 근거는
   문서 §2). 이 줄 = 가장 좁은 단계(사이드·광고 전부 접힘, 본문 단일트랙). 폭이 넓어질수록
   explore-responsive.css 의 min-width 단계가 트랙을 덧붙인다(1450→우사이드바, 1630→좌광고 160px 윙,
   1764→좌광고 300px 레일 복원). 이전엔 이 자리가 고정 3열이었고 collapse(당시 구 단일 브레이크포인트)가
   우발적으로 본문을 553px 로 짜부러뜨렸다(아래 옛 주석 — 그 완화책은 R2로 대체됨). */
.layout-wrap{display:grid;grid-template-columns:minmax(0,1080px);gap:22px;max-width:1764px;margin:0 auto;padding:0 20px}
/* 모바일 거터 축 = layout-wrap 단일 셸(리뷰어 반려 후 축 반전, 반응형_실기기_여백감사_v1) —
   375px 실측: #jhero-wrap 까지의 편측 거터가 layout-wrap 20px + main(components.css:3) 20px = 40px
   로 이중 스택(뷰폭의 21%). .layout-wrap 자체가 1450px 미만에서 이미 단일 트랙(위 기본값)이라
   3열 그리드용 20px 패딩은 불필요.
   ★애초 시도(main 쪽에서 12px 를 냄)는 반려됨 — <main> 없이 #page 직속으로 그리는 페이지
   (admin.js .admin-layout · admin-manager.js .manager-wrap · season.js #anime-season-area ·
   content.js 크럼/#content-filter-area)가 거터를 통째로 잃어 화면별 좌우 인셋이 어긋났다.
   layout-wrap 은 <main> 유무와 무관하게 모든 페이지가 통과하는 유일한 공통 셸이라 예외가
   구조적으로 존재할 수 없다 — 거터는 여기서만 낸다. main 은 좌우 0(bottom 64px 만 유지)으로
   되돌려 이중 스택을 없앤다. 합계 12px, 데스크톱(≥769px) 무접촉. */
@media(max-width:768px){.layout-wrap{padding:0 12px}}
/* 기본=숨김(display:none) — R2 4단 트랙의 최협 단계. 1630px 이상에서만 explore-responsive.css 가 flex 로 되살린다. */
.ad-left{display:none;flex-direction:column;gap:16px;padding-top:16px;position:sticky;top:50px;align-self:start}
#page{min-width:0;padding-top:20px}
/* 부팅 스켈레톤 전용 최소높이(배포표준_적합성감사_v1 P0-4) — ToonHerb.html 초기 마크업이 #page에 이
   클래스를 정적으로 달고 시작해 JS 실행 전(첫 페인트 시점부터) 이미 공간이 예약된다. #page가 비어
   있는 프레임에서 .site-footer가 화면 안에 보였다가 스켈레톤 삽입 순간 화면 밖으로 밀려나며 발생하던
   큰 CLS(실측 0.60)를 원천 차단 — 부트 스크립트가 최초 renderPage() 직전에 이 클래스를 제거한다(정상
   경로에서는 실 콘텐츠가 항상 1뷰포트를 넘으므로 제거 후에도 되밀림 없음). */
#page.boot-skel-active{min-height:100vh}
/* 페이지 전환 등장 애니메이션 — opacity만(transform 쓰면 #page>*가 containing block 생성→자식 position:fixed 검색드롭다운 팝업이 뷰포트 아닌 #page 기준으로 어긋남) */
#page>*{animation:pageIn .2s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#page>*{animation:none}}
/* 기본=숨김(display:none) — 1450px 이상에서만 explore-responsive.css 가 flex 로 되살린다. */
.sidebar-right{display:none;flex-direction:column;gap:16px;padding-top:16px}

/* ★이력(R2 이전 완화책, 대체됨 — 반응형_규율_설계_v1 §2 R2로 교체): 배포표준_적합성감사_v1 §408~418 이
   가운데 트랙을 minmax(0,1080px) 로 바꿔 1241~1763px 본문압착(553px)을 흡수했었다. 이는 collapse(당시
   구 단일 브레이크포인트)와 3열 전개(1764) 사이 간극을 "본문을 줄여서" 메우는 임시 완화책이었고, 사이드바·광고가 각자
   다른 폭에서 켜지는 지금의 4단 구조(위 .layout-wrap 주석)가 그 간극 자체를 없애 대체한다. 가운데 트랙이
   여전히 minmax(0,1080px) 인 이유는 동일 — 어느 단계에서도 본문이 1080px 을 넘어 퍼지지 않게 상한을 둔다. */

/* COMMUNITY */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.write-btn{padding:6px 14px;border-radius:var(--rad);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--bor);color:var(--t2);background:var(--bg2);transition:all .15s;font-family:inherit}
.write-btn:hover{border-color:var(--acc);color:var(--acc)}

/* BOOT-0 부팅 로더 실패 배너 — #boot-fail-banner(ToonHerb.html, nav 바로 아래 고정 위치)를 JS가 채움/비움.
   빈 상태는 내용 없음=0 높이라 평소엔 안 보임. 정상흐름 배치라 z-index 불요. */
.boot-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 20px;font-size:13px;font-weight:600;text-align:center}
.boot-banner.warn{background:var(--warn);color:var(--c-white)}
.boot-banner.danger{background:var(--danger);color:var(--c-white)}
.boot-banner button{border:1px solid currentColor;background:transparent;color:inherit;border-radius:var(--rad);padding:4px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.boot-banner button:hover{background:rgba(255,255,255,.18)}
.boot-banner button:disabled{opacity:.6;cursor:default}