/* 공용 부품 모양 (TW-1) — templates/themes/shared/ui.html 의 pill_tabs·pager. 값은 tokens.css 의 이름만 쓴다. */

/* 알약형 탭: 넘치면 가로로 밀리고, 더 있으면 오른쪽 40px 이 흐려진다 (ui.js 가 data-overflow 를 단다) */
.ui-pill-tabs{display:flex;gap:8px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.ui-pill-tabs::-webkit-scrollbar{display:none}
.ui-pill-tabs[data-overflow=true]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.ui-pill{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;margin:0;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:white;color:var(--text-sub);font-family:inherit;font-size:var(--fs-13);font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer}
.ui-pill:hover{text-decoration:none}
.ui-pill[aria-current=page],.ui-pill[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-tint);font-weight:600}

/* 쪽 넘김 «‹ 현재 / 전체 ›» — 화살표 단추 40×40 */
.ui-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0}
.ui-pager-step{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:var(--radius-button);background:none;color:var(--text);font-family:inherit;font-size:var(--fs-24);line-height:1;text-decoration:none;cursor:pointer}
.ui-pager-step:hover{text-decoration:none}
.ui-pager-step:disabled,.ui-pager-step[aria-disabled=true]{color:var(--line);cursor:default}
.ui-pager-count{font-size:var(--fs-14);line-height:1;color:var(--text-sub)}
.ui-pager-count b{font-weight:600;color:var(--text)}