/* AIRI 공용 목록 컴포넌트 (list-kit).
 * 목록형 화면(AIRI뉴스 등)의 머리·분류·목록 행·페이지 넘김·안내·골격·뒤로 링크를 한 곳에서 정의한다.
 * 선택자 주의: site.css 의 `.airi-page button`/`.airi-page a`(0,1,1)에 지지 않도록 버튼·탭·링크는 요소+클래스로 쓴다.
 * 규칙: site-tokens.css 토큰만 쓴다(색·글꼴·간격 값을 새로 만들지 않는다). 클래스는 airi-list-* 접두어만 쓴다.
 * 칩/태그 .airi-tag 는 이 파일에도 정의한다(site.css 를 읽지 않는 화면용, site.css 규칙과 같은 값 — 시험이 일치를 지킨다). 숨김은 hidden 속성(site.css·news.css 의 [hidden] 규칙)을 쓴다.
 *
 * 사용 구조 (필수 클래스만):
 *   main.airi-list-page
 *     div.airi-list-head > p.airi-list-eyebrow, h1.airi-list-title, p.airi-list-lede
 *     div.airi-list-toolbar > div.airi-list-tabs[role=group] > button|a.airi-list-tab, form.airi-list-search
 *     div.airi-list-meta > p.airi-list-summary, div.airi-list-actions > button.airi-list-btn
 *     div.airi-list[aria-busy] > article.airi-list-row | div.airi-list-state | div.airi-list-skeleton, div.airi-list-notice
 *     nav.airi-list-pager > button.airi-list-btn.airi-list-pager-prev, span.airi-list-pager-info, button…pager-next
 *   분류: 토글 버튼은 aria-pressed, 링크는 aria-current="page" 로 선택 상태를 나타낸다(둘 다 같은 모양).
 *   페이지 넘김: 이전·다음(커서형)만 쓰거나, .airi-list-pager-pages 안에 숫자 링크/버튼(.airi-list-btn, aria-current)을 더한다.
 */

/* ---- 페이지 틀 ---- */
.airi-list-page{width:min(1184px,calc(100% - 64px));max-width:none;margin:28px auto 64px;padding:0;flex:1;min-width:0}
.airi-list-page--narrow{width:min(900px,calc(100% - 64px))}

/* ---- 머리 ---- */
.airi-list-head{padding:10px 0 20px}
.airi-list-eyebrow{margin:0;font-size:var(--airi-xs);letter-spacing:1.5px;font-weight:700;color:var(--airi-primary)}
.airi-list-title{margin:8px 0 12px;font-size:var(--airi-display);line-height:1.3;letter-spacing:-.5px;color:var(--airi-ink)}
.airi-list-lede{margin:0;color:var(--airi-muted);font-size:var(--airi-large)}

/* ---- 분류 탭/필터 + 검색 ---- */
.airi-list-toolbar{display:flex;gap:24px;align-items:center;justify-content:space-between;margin-top:24px;min-width:0}
.airi-list-tabs{display:flex;gap:4px;flex-wrap:wrap;min-width:0}
:is(button,a).airi-list-tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 15px;border:0;border-radius:var(--airi-radius);background:transparent;color:var(--airi-muted);font:inherit;font-size:var(--airi-body);white-space:nowrap;text-decoration:none;cursor:pointer}
:is(button,a).airi-list-tab[aria-pressed=true],:is(button,a).airi-list-tab[aria-current=page]{background:var(--airi-primary);color:var(--airi-on-dark);font-weight:700}
.airi-list-search{display:flex;gap:8px;flex:0 1 330px;min-width:0;margin:0}
.airi-list-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
input.airi-list-input{flex:1;min-width:0;width:auto;min-height:44px;padding:8px 12px;border:1px solid var(--airi-rule-strong);border-radius:var(--airi-radius);background:var(--airi-paper);color:var(--airi-ink);font:inherit;font-size:var(--airi-body)}

/* ---- 버튼 ---- */
:is(button,a).airi-list-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 16px;border:1px solid var(--airi-rule-strong);border-radius:var(--airi-radius);background:var(--airi-paper);color:var(--airi-primary);font:inherit;font-size:var(--airi-body);font-weight:500;line-height:1.4;white-space:nowrap;text-decoration:none;cursor:pointer}
:is(button,a).airi-list-btn--primary{background:var(--airi-primary);border-color:var(--airi-primary);color:var(--airi-on-dark)}
:is(button,a).airi-list-btn:disabled,:is(button,a).airi-list-btn[aria-disabled=true]{opacity:1;background:var(--airi-soft);border-color:var(--airi-border);color:var(--airi-muted);cursor:not-allowed}
:is(button,a).airi-list-btn[aria-current=page]{background:var(--airi-primary);border-color:var(--airi-primary);color:var(--airi-on-dark);font-weight:700}
@media(hover:hover) and (pointer:fine){
 .airi-list-tab:not([aria-pressed=true]):not([aria-current=page]):hover{background:var(--airi-action-soft);color:var(--airi-primary)}
 .airi-list-btn:not(:disabled):not(.airi-list-btn--primary):not([aria-current=page]):hover{background:var(--airi-action-soft);border-color:var(--airi-primary)}
 .airi-list-btn--primary:not(:disabled):hover{background:var(--airi-primary-hover)}
}
.airi-list-tab:focus-visible,.airi-list-btn:focus-visible,.airi-list-input:focus-visible,.airi-list-back:focus-visible{outline:2px solid var(--airi-focus);outline-offset:3px}

/* ---- 건수·보조 동작 줄 ---- */
.airi-list-meta{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:16px 0;color:var(--airi-muted);font-size:var(--airi-body);min-width:0}
.airi-list-summary{margin:0;min-width:0;overflow-wrap:anywhere}
.airi-list-actions{display:flex;gap:8px;flex:none}
.airi-list-actions .airi-list-btn{min-height:40px;padding:6px 14px;font-size:var(--airi-sm)}

/* ---- 목록 컨테이너·행 ---- */
.airi-list{border-top:2px solid var(--airi-primary);border-bottom:1px solid var(--airi-border);background:var(--airi-paper);min-height:280px}
.airi-list-row{position:relative;display:flex;gap:24px;align-items:center;padding:22px 16px;border-top:1px solid var(--airi-line);min-width:0}
.airi-list-row:first-child{border-top:0}
.airi-list-body{flex:1;min-width:0}
.airi-list-row-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:var(--airi-xs);color:var(--airi-muted)}
.airi-list-date{font-variant-numeric:tabular-nums}
.airi-list-row-title{margin:8px 0 4px;font-size:var(--airi-large);line-height:1.6;font-weight:700}
a.airi-list-link{color:var(--airi-ink);text-decoration:none;overflow-wrap:anywhere}
.airi-list-link::after{content:"";position:absolute;inset:0}
.airi-list-link:focus-visible{outline:none}
.airi-list-link:focus-visible::after{outline:2px solid var(--airi-focus);outline-offset:-2px}
.airi-list-excerpt{margin:6px 0 0;color:var(--airi-muted);font-size:var(--airi-body);line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.airi-list-row>figure{width:144px;flex:none;margin:0}
.airi-list-row>figure img{display:block;width:144px;height:96px;object-fit:cover;border-radius:var(--airi-radius)}
.airi-list-row>figure figcaption{margin-top:5px;font-size:var(--airi-xs);color:var(--airi-muted)}
@media(hover:hover) and (pointer:fine){
 .airi-list-row:hover{background:var(--airi-soft)}
 .airi-list-row:hover .airi-list-link{text-decoration:underline;text-underline-offset:3px}
}

/* ---- 안내(빈·오류·로딩) ---- */
.airi-list-state{padding:56px 24px;text-align:center;overflow-wrap:anywhere}
.airi-list-state h1,.airi-list-state h2,.airi-list-state h3{margin:0 0 8px;font-size:var(--airi-section);line-height:1.5}
.airi-list-state p{margin:0 0 16px;color:var(--airi-muted)}
.airi-list-state .airi-list-btn{margin:4px 4px 0}
.airi-list-state--error{border-left:4px solid var(--airi-error);text-align:left}
.airi-list-state--error h2,.airi-list-state--error h3{color:var(--airi-error)}
.airi-list-state--error p{color:var(--airi-ink)}
.airi-list-notice{display:flex;gap:12px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;background:var(--airi-error-bg);border-left:4px solid var(--airi-error);color:var(--airi-ink);font-size:var(--airi-body);overflow-wrap:anywhere}
.airi-list-notice p{margin:0;flex:1 1 240px;min-width:0}
.airi-list-notice--info{background:var(--airi-soft);border-left-color:var(--airi-primary)}
.airi-tag{display:inline-flex;align-items:center;white-space:nowrap;min-height:24px;padding:2px 8px;border-radius:4px;background:var(--airi-action-soft);color:var(--airi-primary);font-size:var(--airi-xs);font-weight:500}
.airi-list-skeleton{display:grid}
.airi-list-skeleton-row{display:grid;gap:8px;padding:22px 16px;border-top:1px solid var(--airi-line);min-height:118px;align-content:center}
.airi-list-skeleton-row:first-child{border-top:0}
.airi-list-skeleton-row i{display:block;height:14px;width:30%;border-radius:3px;background:var(--airi-soft)}
.airi-list-skeleton-row i:nth-child(2){height:18px;width:72%}
.airi-list-skeleton-row i:nth-child(3){height:12px;width:90%}
.airi-list-state--panel{background:var(--airi-paper);border:1px solid var(--airi-border);border-radius:var(--airi-radius-lg);margin:8px 0 20px}
.airi-list[aria-busy=true] .airi-list-row{opacity:.6}

/* ---- 페이지 넘김 ---- */
.airi-list-pager{display:grid;grid-template-columns:auto auto auto;grid-template-areas:"prev info next";gap:12px 20px;justify-content:center;align-items:center;margin:28px 0}
.airi-list-pager-prev{grid-area:prev}
.airi-list-pager-info{grid-area:info;color:var(--airi-muted);font-size:var(--airi-body);text-align:center;font-variant-numeric:tabular-nums}
.airi-list-pager-next{grid-area:next}
.airi-list-pager-pages{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.airi-list-pager-pages .airi-list-btn{min-width:44px;padding:8px 10px}

/* ---- 뒤로 링크 ---- */
a.airi-list-back{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:var(--airi-body);color:var(--airi-primary);text-decoration:none}
@media(hover:hover) and (pointer:fine){.airi-list-back:hover{text-decoration:underline;text-underline-offset:3px}}

/* ---- 태블릿 ---- */
@media(max-width:950px){
 .airi-list-toolbar{align-items:stretch;flex-direction:column;gap:12px}
 .airi-list-search{flex-basis:auto;max-width:500px}
}

/* ---- 모바일 ---- */
@media(max-width:650px){
 .airi-list-page,.airi-list-page--narrow{width:calc(100% - 32px);margin:20px auto 48px}
 .airi-list-head{padding-bottom:6px}
 .airi-list-title{font-size:var(--airi-title)}
 .airi-list-lede{font-size:var(--airi-body)}
 .airi-list-toolbar{margin-top:16px}
 /* 분류: 한 줄 유지, 넘치면 이 영역 안에서만 가로 스크롤 */
 .airi-list-tabs{flex-wrap:nowrap;overflow-x:auto;gap:2px;scrollbar-width:none;overscroll-behavior-x:contain}
 .airi-list-tabs::-webkit-scrollbar{display:none}
 :is(button,a).airi-list-tab{padding:8px 9px;font-size:var(--airi-sm);flex:none}
 .airi-list-search{max-width:none}
 .airi-list-meta{margin:12px 0;font-size:var(--airi-sm);align-items:flex-start;gap:12px}
 .airi-list-row{gap:14px;padding:16px 14px}
 .airi-list-row-title{font-size:var(--airi-large)}
 .airi-list-row>figure{width:88px}
 .airi-list-row>figure img{width:88px;height:66px}
 .airi-list-state{padding:40px 16px}
 .airi-list-skeleton-row{padding:16px 14px;min-height:112px}
 /* 페이지 넘김: 건수는 위 한 줄, 이전·다음은 아래 한 줄에 같은 폭 */
 .airi-list-pager{grid-template-columns:1fr 1fr;grid-template-areas:"info info" "prev next";gap:10px 12px;justify-content:stretch;margin:20px 0}
 .airi-list-pager>.airi-list-btn{width:100%;padding:8px 10px;font-size:var(--airi-sm)}
}