/* pages/category.php 전용 스타일 (/system /global /edu). 공용 컴포넌트는 css/gpc-theme.css 참고. */

.cat-count { display: inline-flex; align-items: baseline; gap: 7px; margin-top: 30px; padding: 8px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 100px; font-size: 13.5px; color: #dfe4ee; }
.cat-count b { font-family: var(--serif); font-size: 17px; color: var(--gold); line-height: 1; }

.cat-body { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px,6vw,72px) clamp(20px,6vw,64px) clamp(64px,9vw,104px); }

.cat-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.cat-tab { position: relative; border: 0; background: transparent; font-family: var(--serif); font-size: 16px; font-weight: 600; color: #9aa5bd; padding: 4px 0 16px; cursor: pointer; transition: color .18s; }
.cat-tab[aria-selected="true"] { color: var(--navy); }
.cat-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .25s; }
.cat-tab[aria-selected="true"]::after { transform: scaleX(1); }
.cat-tab span { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 12px; font-weight: 500; opacity: .55; margin-left: 8px; }

/* 표준 등록부 — 카드 그리드 대신 인덱스형 목록. 번호는 이 목록 안에서의 실제 순번(스캔용). */
.cat-list { display: flex; flex-direction: column; }
.cat-row { position: relative; display: flex; align-items: flex-start; gap: 26px; padding: 36px 10px 36px 28px; border-bottom: 1px solid var(--border); transition: background .18s; }
.cat-row:first-child { border-top: 1px solid var(--border); }
.cat-row::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .3s; }
.cat-row:hover { background: var(--bg-soft); }
.cat-row:hover::before { transform: scaleY(1); }
.cat-row__no { flex: none; width: 36px; padding-top: 4px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 15px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.cat-row__body { flex: 1 1 auto; min-width: 0; }
.cat-row__eyebrow { display: block; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 10.5px; letter-spacing: .16em; color: #93a0ba; margin-bottom: 10px; }
.cat-row__title { display: block; font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.4; color: var(--navy); transition: color .18s; }
.cat-row:hover .cat-row__title { color: var(--blue); }
.cat-row__desc { display: block; font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 12px; max-width: 640px; }
.cat-row__arrow { flex: none; margin-top: 8px; color: var(--blue); opacity: .3; transition: opacity .2s, transform .2s; }
.cat-row:hover .cat-row__arrow { opacity: 1; transform: translateX(4px); }
@media (max-width: 560px) { .cat-row { gap: 16px; padding: 26px 4px 26px 18px; } .cat-row__no { width: 28px; font-size: 13px; } .cat-row__title { font-size: 18px; } }

/* 페이지네이션 — 테두리 없이 텍스트로, 현재 페이지만 원형으로 강조 */
.cat-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 40px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.cat-pager__btn { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 14px; font-weight: 600; color: #9aa5bd; cursor: pointer; transition: color .15s, background .15s; }
.cat-pager__btn:hover:not(:disabled) { color: var(--blue); }
.cat-pager__btn:disabled { opacity: .3; cursor: default; }
.cat-pager__btn[data-act="prev"], .cat-pager__btn[data-act="next"] { font-size: 18px; margin: 0 6px; }
.cat-pager__btn[data-act="go"] { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.cat-pager__btn[data-act="go"][aria-current="true"] { background: var(--navy); color: #fff; }
.cat-pager__btn[data-act="go"][aria-current="true"]:hover { color: #fff; }

.cat-grouptitle { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: .02em; }
.cat-grouptitle::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.cat-empty { padding: 60px 20px; text-align: center; color: #8a93a3; font-size: 15px; border: 1px dashed #d0d8e8; border-radius: 14px; }

.cat-cta { max-width: var(--wrap); margin: 0 auto clamp(64px,9vw,100px); padding: clamp(32px,5vw,48px) clamp(24px,6vw,56px); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.cat-cta__t { font-size: clamp(17px,2.4vw,22px); font-weight: 700; color: var(--navy); }
.cat-cta__s { font-size: 14px; color: var(--muted); margin-top: 6px; }