/* 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)}

/* 3-COLUMN LAYOUT */
.layout-wrap{display:grid;grid-template-columns:300px minmax(0,1080px) 300px;gap:22px;max-width:1764px;margin:0 auto;padding:0 20px}
.ad-left{display:flex;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}}
.sidebar-right{display:flex;flex-direction:column;gap:16px;padding-top:16px}

/* 실측 정정(배포표준_적합성감사_v1 §408~418): 3열 전개 요구폭=1764px(300+1080+300+gap44+pad40), 주석의
   1280 은 오기 — collapse(explore-responsive.css:51)는 1240px 에서 발동해 1241~1763px 구간이 무방비였다.
   가운데 트랙을 minmax(0,1080px) 로 바꿔 그 구간을 흡수(위 줄) — 1764px 이상에서는 종전과 동일(300+1080+300),
   1241~1763px 에서는 가운데만 줄며 총폭이 뷰포트를 넘지 않는다. #page 가 이미 min-width:0(37행)이라
   가운데 트랙 축소를 막는 자식이 없다. collapse 브레이크포인트(1240)는 손대지 않음 — 그 아래 폭에서
   이미 정상 동작 중인 2열 레이아웃을 건드리지 않기 위함(대안 collapse 상향은 1241~1780px 구간의 3열
   사용자를 불필요하게 2열로 강등시켜 부작용이 더 크다). */

/* 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}