/* ══════════════════════════════════════════════════════════════════════════
   anime-season.css — 애니 시즌(분기) 뷰 전용. 시안 = Design/Ani Season/ToonHerb - 애니 시즌 (분기).html
   ★스코프 루트는 .asn 하나다 = 본문(#page 안, _animeSeasonBodyHTML 최상위).
     우측 사이드바는 앱 기본 사이드바(rightSidebarHTML)를 그대로 쓰므로 여기 규칙이 없다.
   ★무스코프 금지: 시안이 재사용하는 .card/.cover/.ci/.ctitle/.tb/.cplat/.bm/.grid/.empty/.srow 는
     전부 components.css 의 전역 컴포넌트와 동명이다. 스코프를 빼면 탐색·랭킹·라이브러리·작품상세
     카드가 통째로 3:4 오버레이로 뒤집힌다(전역 .cover 는 2:3).
   ★.shell 을 스코프 루트로 쓰지 않는다 — 전역 .shell(components.css)은 작품상세(work.js)·
     위키(work-wiki.js)가 이미 쓰는 3열 레이아웃이라 그쪽 카드로 샌다. 시즌 셸 규칙은 .asn 하위에서만.
   ※radius 토큰 규칙(§8-2): 시안은 각진 형태라 반경 없음 = 0 명시 불요. 원형은 .led(50%)뿐이며 전역 소유.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 셸 ── 앱은 이미 .layout-wrap(좌광고·#page·우사이드바) 3열이라 여기서 열을 다시 만들지 않는다.
   시안 .shell 은 그 3열 자체였으므로 마크업에 두지 않고, 세로 리듬(본문 블록 간격)만 .asn 이 갖는다.
   (.asn .shell 규칙을 두지 않는 이유 = 시즌 마크업에 .shell 요소가 없어 죽은 규칙이 되기 때문이다.) */
.asn{display:flex;flex-direction:column;gap:16px}
.asn .page-main{padding-top:0}
.asn .sec{display:flex;flex-direction:column;gap:12px}
/* 크럼 — 전역 .crumb(explore-responsive.css:4)은 margin-bottom:12px 를 갖는데, 시안의 .crumb 엔
   그 마진이 없고 간격을 컨테이너 gap(=.asn 16px)이 소유한다. flex gap 은 자식 마진과 합산되므로
   그대로 두면 28px 이 된다 → 시즌에서만 마진을 걷어 시안 간격(16px)으로 맞춘다. */
.asn .crumb{margin-bottom:0}
/* 섹션 헤더 — 접두(.num=AN)와 건수(.sec-sub)는 전역 규칙(explore-responsive.css:44,46)이 이미
   시안과 동일한 값을 갖는다. 여기서 다시 쓰지 않는다(§8).
   ★margin-left:auto 는 시안 이탈이다 — 시안(html:236)의 .sec-hd 는 AN·제목·건수가 gap:11px 로
     좌측 클러스터되고 스페이서가 없다. 건수를 우측으로 미는 것은 작업 지시서가 명시한 요구라
     그쪽을 따랐다(지시 > 시안). 좌측 클러스터로 되돌리려면 이 규칙만 지우면 된다. */
.asn .sec-hd .sec-sub{margin-left:auto}

/* ── 시즌 바 ── */
.asn .season-bar{border:1px solid var(--bor);background:var(--pane);display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:11px 14px}
.asn .season-sel{display:flex;align-items:center;gap:4px;flex:none}
.asn .season-arrow{width:30px;height:30px;display:grid;place-items:center;color:var(--t2);border:1px solid var(--hair);background:var(--bg);font-size:17px;line-height:1}
.asn .season-arrow:hover{color:var(--acc-br);border-color:var(--acc)}
.asn .season-arrow[disabled]{opacity:.3;pointer-events:none}
.asn .season-cur{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:17px;letter-spacing:-.3px;color:var(--t1);padding:2px 10px;cursor:pointer;white-space:nowrap;min-width:132px;justify-content:center}
.asn .season-cur:hover{color:var(--acc-br)}
.asn .season-cur svg{stroke:currentColor;fill:none}
.asn .season-lbl{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;align-self:center}
.asn .season-stats{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
/* display:inline-flex·align-items 는 구 전역 .schip(components.css) 삭제 시 함께 이관한 선언이다.
   ★이유는 "inline 으로 떨어져서"가 아니다 — .schip 은 .season-stats(display:flex)의 직계 자식이라
     flex item 이고, blockify 는 outer display 만 바꾸므로 이 선언이 없어도 block 박스가 된다
     (실측: computed display=block, 칩 높이 27.3px 로 동일 — 세로 padding 은 멀쩡하다).
     진짜 이유는 inner display 다. 이게 없으면 .schip 자신이 flex 컨테이너가 아니게 되어
     자식 .n(카운트 배지)이 align-items:center 를 못 받고 baseline 으로 떨어진다
     (실측: 칩 중심 대비 0.67px 어긋남). 값은 작아도 라벨과 숫자가 미세하게 어긋나 보인다. */
.asn .schip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--t2);padding:4px 11px;border:1px solid var(--hair);background:var(--bg);transition:.1s;white-space:nowrap;cursor:pointer}
.asn .schip:hover{color:var(--t1);border-color:var(--bor)}
.asn .schip.on{color:var(--ink);background:var(--acc-br);border-color:var(--acc-br);font-weight:700}
html[data-theme="light"] .asn .schip.on{color:#fff}
.asn .schip .n{font-size:9.5px;opacity:.66;margin-left:3px;font-family:'Space Mono',monospace}
.asn .season-sortwrap{display:flex;gap:3px;margin-left:auto;flex:none}
.asn .season-sort{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--t3);padding:5px 10px;border:1px solid var(--hair);background:var(--bg);white-space:nowrap}
.asn .season-sort:hover{color:var(--t1)}
.asn .season-sort.on{color:var(--acc-br);border-color:var(--acc);background:var(--acc-dim)}

/* ── 그리드·카드 ── 전용 규칙이 없다.
   시즌 카드는 공용 cardHTML 그대로고(탐색·랭킹·라이브러리와 동일), 그리드도 마크업이
   .grid.content-grid 라 전역 .content-grid(components.css:62 · explore-responsive.css 반응형)가
   그대로 먹는다. 시즌 전용 3:4 오버레이 카드는 철회했다. */
.asn .empty{padding:60px 0;text-align:center;font-size:13px;color:var(--t3);font-family:'Space Mono',monospace;grid-column:1/-1}
.asn .empty small{display:block;margin-top:8px;opacity:.7}

/* ── 분기 선택 모달 ── 신규 클래스 1개만 추가한다.
   ★.season-pick-sec/-h/-yrow/-ylbl/-qs/-grid/-cell 은 여기서 선언하지 않는다 — components.css:1955-1967
     이 이미 소유하고 있고, 이 파일이 ToonHerb.html 마지막 링크라 동일 특이도에서 캐스케이드로 이겨
     P2 범위 밖인 기존 모달의 패딩·배색을 조용히 바꾼다(리뷰어 적발). 모달 리스킨이 필요하면
     components.css 쪽 값을 고치는 별건으로 다룬다.
   .season-pick-q2 는 P1에서 새로 넣은 계절 서브라벨이라 기존 정의가 없다 → 여기서 소유한다. */
.season-pick-q2{font-size:9px;opacity:.6}

/* ── 반응형 ── 그리드 열 수는 전역 .content-grid(explore-responsive.css:51,53,54)가 소유한다.
   여기 남는 건 시즌 바 전용 조정 하나뿐이다(좁은 폭에서 정렬 버튼을 왼쪽으로 붙인다). */
@media(max-width:760px){.asn .season-sortwrap{margin-left:0}}