@charset "UTF-8";
/* 모바일 AIO 페이저(.aio-pager) — aio.css를 로드하지 않는 화면도 이 파일만 추가하면 되도록 분리 */
/* --aio-* 토큰은 aio-tokens.css 소비 전제 — 이 파일 로드 화면은 aio-tokens.css도 함께 로드돼 있어야 한다 */
@layer ua, reset, vendor, legacy, token, layout, component, variant, utility;
/* 페이저 눌림/비활성 로컬 토큰 — PC v2 페이저 정본 대응 */
@layer token{
:root {
    --aio-pager-active-fg: var(--aio-bg-app);
    --aio-pager-disabled-bg: transparent;
    --aio-pager-arrow-active-bg: transparent;
    --aio-pager-arrow-active-border: var(--aio-border-divider);
}
body.light-theme {
    --aio-pager-active-fg: var(--qz-text-on-bright);
    --aio-pager-disabled-bg: var(--btn-disabled-bg);
    --aio-pager-arrow-active-bg: var(--btn-neutral-bg-default);
    --aio-pager-arrow-active-border: var(--btn-neutral-bg-default);
}
}
/* ===== 페이지네이션 (24px 버튼, 활성 orange-80, 화살표 셰브런 1.5) ===== */
.aio-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aio-gap-default);
    padding: var(--aio-container-x) var(--aio-container-x) 0;
}
.aio-pager__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--aio-border-divider);
    border-radius: var(--aio-radius-control);
    color: var(--aio-text-primary);
    text-decoration: none;
}
.aio-pager__arrow.is-disabled {
    color: var(--aio-text-tertiary);
    background: var(--aio-pager-disabled-bg);
    pointer-events: none;
}
/* 터치 눌림 — PC 페이저 hover 정본 값(다크는 토큰이 default와 같아 무변화, 라이트만 면이 채워진다) */
.aio-pager__arrow:active:not(.is-disabled) {
    background: var(--aio-pager-arrow-active-bg);
    border-color: var(--aio-pager-arrow-active-border);
}
/* 페이저 chevron — 자산 mask + currentColor(is-disabled 딤은 부모 color 상속).
   color:inherit 필수 — 레거시 common.css `.list-area i`(@layer legacy)가 <i> 의 color 를 직접 잡아
   currentColor 가 부모 링크색 대신 그 값(라이트 #1A1A1A / 다크 #FFF)으로 굳는다. 이 규칙은 레이어 밖이라 이긴다. */
.aio-icon-chevron {
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: url(../../images/common/ic_arrow_left.svg) no-repeat center / contain;
    mask: url(../../images/common/ic_arrow_left.svg) no-repeat center / contain;
}
.aio-icon-chevron--first { -webkit-mask-image: url(../../images/common/ic_arrow_left_double.svg); mask-image: url(../../images/common/ic_arrow_left_double.svg); }
.aio-icon-chevron--next { -webkit-mask-image: url(../../images/common/ic_arrow_right.svg); mask-image: url(../../images/common/ic_arrow_right.svg); }
.aio-icon-chevron--last { -webkit-mask-image: url(../../images/common/ic_arrow_right_double.svg); mask-image: url(../../images/common/ic_arrow_right_double.svg); }
.aio-pager__pages {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 var(--aio-gap-default);
    padding: 0;
}
.aio-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--aio-radius-control);
    font-size: var(--aio-size-meta);
    color: var(--qz-text-subtle);
    text-decoration: none;
}
.aio-pager__page:active {
    background: var(--btn-neutral-bg-default);
}
.aio-pager__page.is-active {
    background: var(--aio-brand-orange-80);
    color: var(--aio-pager-active-fg);
    font-weight: var(--aio-weight-emphasis);
}
/* 댓글 페이저 변형 — 목록과 동일 디자인, Livewire 컨텍스트 래퍼 여백만 보정 */
.aio-pager--comment {
    padding: var(--aio-container-x) 0;
}
.aio-comment-paging {
    display: flex;
    justify-content: center;
}

/* 레거시 sub.css 의 `#frmSearch .content a:visited` 는 @layer legacy 로 강등돼 이 파일(레이어 밖)에 진다 —
   ID 방어 규칙은 그래서 제거했다. 이 파일을 @layer 안으로 옮기면 그 방어가 다시 필요해진다. */