/* ===================================================================================================
    Gn 원자(Atoms) — 타이포·아이콘·배지·개수·아바타·링크·구분선·키·로딩·진행 막대·안내 상자·빈 상태·페이지네이션
    (2026-10-15, 스타일가이드 #typography · #icon · #badge · #avatar · #misc · #feedback · #empty · #pagination)
    - 입력·버튼·드롭다운 원자는 gn-controls.css, 이 파일은 그 밖의 원자. 전부 gn- 클래스 범위라 기존 화면 영향 없음.
    - 무드는 GNB·생성 모달과 같다: 회색 위계(본문 gray-900 · 보조 gray-700 · muted gray-600 · 아이콘 gray-500),
      강조는 연파랑 바탕 + 파랑 글자, 상태는 연한 바탕 + 진한 글자 + 안쪽 링, 글자 12/13/14/16/20/24px.
    - 로드: main·note 셸(components 묶음) + /style-guide. 개수 칩·아바타·페이지네이션은 각각 gn-page-header·gn-header·gn-data-table 에서 옮겨 왔다.
    - 자체 CSS를 쓰는 이유(규칙 2): 역할별 글자 규격·아이콘 칸·상태 배지 변형·아바타 이니셜·스켈레톤·안내 상자·빈 상태는 BS 유틸·컴포넌트에 없다.
    - !important: main 셸 style.css 의 전역 a{color:#495057 !important}(#111 결정 전까지)에 링크 색이 묻혀 .gn-link 색만 되받는다(파일 끝).
=================================================================================================== */

/* ── 1. 타이포 — 역할별 규격(글자 크기 / 줄 높이 / 굵기 / 자간) ─────────────────────────────── */
.gn-h1,
.gn-h2,
.gn-h3,
.gn-h4 {
    margin: 0;
    font-weight: var(--gn-font-weight-bold);
    color: var(--gn-color-text-primary);
}
.gn-h1 { font-size: var(--gn-font-size-2xl); line-height: 2rem;     letter-spacing: -0.02em; }   /* 24/32 화면 제목 */
.gn-h2 { font-size: var(--gn-font-size-xl);  line-height: 1.75rem;  letter-spacing: -0.015em; }  /* 20/28 큰 구역 */
.gn-h3 { font-size: var(--gn-font-size-base); line-height: 1.5rem;  letter-spacing: -0.01em; }   /* 16/24 구역·카드 제목 */
.gn-h4 { font-size: var(--gn-font-size-sm);  line-height: 1.25rem; }                              /* 14/20 작은 묶음 제목 */
.gn-body {
    font-size: var(--gn-font-size-sm);                  /* 14/22 본문 */
    line-height: 1.375rem;
    color: var(--gn-gray-700);
}
.gn-body-lg {
    font-size: var(--gn-font-size-base);                /* 16/26 긴 글(공지·도움말) */
    line-height: 1.625rem;
    color: var(--gn-gray-700);
}
.gn-small {
    font-size: 0.8125rem;                               /* 13/20 보조·라벨 */
    line-height: 1.25rem;
    color: var(--gn-color-text-muted);
}
.gn-caption {
    font-size: var(--gn-font-size-xs);                  /* 12/18 메타·도움말 */
    line-height: 1.125rem;
    color: var(--gn-color-text-muted);
}
.gn-overline {
    font-size: 0.6875rem;                               /* 11/16 묶음 머리글 */
    font-weight: var(--gn-font-weight-bold);
    line-height: 1rem;
    letter-spacing: 0.04em;
    color: var(--gn-gray-500);
}
/* 굵기·색(조합용) */
.gn-fw-regular { font-weight: var(--gn-font-weight-regular); }
.gn-fw-medium  { font-weight: var(--gn-font-weight-medium); }
.gn-fw-bold    { font-weight: var(--gn-font-weight-bold); }
.gn-text-primary   { color: var(--gn-color-text-primary); }
.gn-text-secondary { color: var(--gn-gray-700); }
.gn-text-muted     { color: var(--gn-color-text-muted); }
.gn-text-subtle    { color: var(--gn-gray-500); }
.gn-text-accent    { color: var(--gn-color-accent); }
.gn-text-danger    { color: var(--gn-status-reject-fg); }
.gn-text-success   { color: var(--gn-status-complete-fg); }
.gn-num { font-variant-numeric: tabular-nums; }         /* 숫자 열 맞춤(표·카운트) */
.gn-line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ── 2. 아이콘 — 크기 단계 + 아이콘 칸(둥근 사각) ─────────────────────────────────────── */
.gn-icon     { font-size: 1rem;     line-height: 1; }   /* 16 — 버튼·메뉴 기본 */
.gn-icon-xs  { font-size: 0.75rem;  line-height: 1; }   /* 12 — 캐럿·작은 표시 */
.gn-icon-sm  { font-size: 0.875rem; line-height: 1; }   /* 14 — 메타·작은 버튼 */
.gn-icon-lg  { font-size: 1.25rem;  line-height: 1; }   /* 20 — 헤더 아이콘 버튼 */
.gn-icon-xl  { font-size: 1.5rem;   line-height: 1; }   /* 24 — 빈 상태·강조 */
.gn-icon-box {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--gn-radius-md);
    background: var(--gn-blue-50);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--gn-blue-600);
}
.gn-icon-box-sm { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; font-size: 0.875rem; }
.gn-icon-box-lg { width: 3rem;    height: 3rem;    border-radius: var(--gn-radius-lg); font-size: 1.5rem; }
.gn-icon-box-round { border-radius: var(--gn-radius-circle); }
.gn-icon-box-gray  { background: var(--gn-gray-100);              color: var(--gn-gray-600); }
.gn-icon-box-green { background: var(--gn-status-complete-bg);   color: var(--gn-status-complete-fg); }
.gn-icon-box-amber { background: var(--gn-status-share-bg);      color: var(--gn-status-share-fg); }
.gn-icon-box-red   { background: var(--gn-status-reject-bg);     color: var(--gn-status-reject-fg); }
.gn-icon-box-solid { background: var(--gn-color-accent);         color: var(--bs-white); }
.gn-icon-box-sky    { background: var(--gn-status-writing-bg);    color: var(--gn-status-writing-fg); }
.gn-icon-box-indigo { background: var(--gn-status-approval-bg);   color: var(--gn-status-approval-fg); }

/* 검색어 형광펜 — GnHighlight.mark() 가 감싼다(js/components/gn-highlight.js) */
mark.gn-mark {
    padding: 0 0.0625rem;
    border-radius: 0.1875rem;
    background: var(--gn-amber-100);
    box-shadow: inset 0 -0.125rem 0 var(--gn-amber-500);
    color: inherit;
}

/* 연구노트 작성 방식 — 에디터(웹 에디터로 쓴 노트) · 파일(첨부파일을 엮어 한 문서로 병합한 노트).
   카드 · 목록 · 이어서 보기는 GnNoteCard.mode(), 사이드바는 템플릿이 그린다. 스타일가이드 #note-card */
.gn-note-mode {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1;
}
.gn-note-mode-sm { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; font-size: 0.6875rem; }
.gn-note-mode-editor { background: var(--gn-blue-50); color: var(--gn-blue-600); }
.gn-note-mode-file   { background: var(--gn-status-share-bg); color: var(--gn-status-share-fg); }

/* ── 3. 배지 — 상태·분류 표시(연한 바탕 + 진한 글자 + 안쪽 링). 기존 icon-status·confirm-status·역할/등급 칩의 새 이름 ── */
.gn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.375rem;                                   /* 22px */
    padding: 0 0.5rem;
    border-radius: var(--gn-radius-sm);
    background: var(--gn-status-neutral-bg);
    box-shadow: var(--gn-status-ring);
    font-size: var(--gn-font-size-xs);
    font-weight: var(--gn-font-weight-medium);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--gn-status-neutral-fg);
    vertical-align: middle;
}
.gn-badge-sm { height: 1.125rem; padding: 0 0.375rem; font-size: 0.6875rem; }   /* 18px — 표·카드 안 */
.gn-badge-pill { border-radius: var(--gn-radius-pill); }
.gn-badge .bi { font-size: 0.75rem; }
/* 앞 점(상태) */
.gn-badge-dot::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--gn-radius-circle);
    background: currentColor;
}
/* 색 — 의미 이름 */
.gn-badge-gray   { background: var(--gn-status-neutral-bg);    color: var(--gn-status-neutral-fg); }
.gn-badge-blue   { background: var(--gn-status-inspection-bg); color: var(--gn-status-inspection-fg); }
.gn-badge-sky    { background: var(--gn-status-writing-bg);    color: var(--gn-status-writing-fg); }
.gn-badge-green  { background: var(--gn-status-complete-bg);   color: var(--gn-status-complete-fg); }
.gn-badge-amber  { background: var(--gn-status-share-bg);      color: var(--gn-status-share-fg); }
.gn-badge-red    { background: var(--gn-status-reject-bg);     color: var(--gn-status-reject-fg); }
.gn-badge-indigo { background: var(--gn-status-approval-bg);   color: var(--gn-status-approval-fg); }
.gn-badge-slate  { background: var(--gn-status-lead-bg);       color: var(--gn-status-lead-fg); }
/* 상태 코드 지도(write-status-*·user-noti-se-*, badges.css)가 내려 준 색을 그대로 쓰는 배지 */
.gn-badge-status { background: var(--gn-status-bg, var(--gn-status-neutral-bg)); color: var(--gn-status-fg, var(--gn-status-neutral-fg)); }
/* 진한 채움(드물게 — 새 항목 'N' 처럼 눈에 띄어야 할 때) */
.gn-badge-solid { background: var(--gn-color-accent); box-shadow: none; color: var(--bs-white); }
.gn-badge-solid.gn-badge-red { background: var(--gn-red-500); color: var(--bs-white); }

/* ── 4. 개수 칩 — 탭·구역 제목·메뉴 옆 숫자(gn-page-header 에서 옮김) ───────────────────── */
.gn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    padding: calc(0.1875rem + var(--gn-font-digit-offset)) 0.375rem calc(0.1875rem - var(--gn-font-digit-offset));
    border-radius: var(--gn-radius-pill);
    background: var(--gn-gray-100);
    font-size: 0.6875rem;
    font-weight: var(--gn-font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    color: var(--gn-gray-700);
}
.gn-count-blue { background: var(--gn-blue-50); color: var(--gn-blue-700); }
.gn-count-red  { background: var(--gn-red-500); color: var(--bs-white); }   /* 안 읽음 등 주의 숫자 */

/* ── 5. 아바타 — 사진·이니셜, 크기 단계, 겹침 묶음(gn-header 에서 옮김) ───────────────────── */
.gn-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;                                        /* 32 기본 */
    height: 2rem;
    border-radius: var(--gn-radius-circle);
    object-fit: cover;
    background: var(--gn-color-bg-subtle);
    font-size: 0.8125rem;
    font-weight: var(--gn-font-weight-medium);
    line-height: 1;
    color: var(--gn-gray-700);
    vertical-align: middle;
}
.gn-avatar-xs { width: 1.25rem; height: 1.25rem; font-size: 0.5625rem; }   /* 20 */
.gn-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }   /* 28 */
.gn-avatar-lg { width: 3rem;    height: 3rem;    font-size: 1.125rem; }    /* 48 */
.gn-avatar-xl { width: 4rem;    height: 4rem;    font-size: 1.5rem; }      /* 64 */
/* 이니셜(사진 없음) — 이름 첫 글자 */
.gn-avatar-initial { background: var(--gn-blue-100); color: var(--gn-blue-800); }
.gn-avatar-initial.gn-avatar-teal  { background: var(--gn-teal-50);     color: var(--gn-status-complete-fg); }
.gn-avatar-initial.gn-avatar-amber { background: var(--gn-status-share-bg); color: var(--gn-status-share-fg); }
.gn-avatar-ring { box-shadow: 0 0 0 2px var(--gn-color-bg-surface); }
/* 겹침 묶음(참여자 등) */
.gn-avatar-group {
    display: inline-flex;
    align-items: center;
}
.gn-avatar-group > .gn-avatar { box-shadow: 0 0 0 2px var(--gn-color-bg-surface); }
.gn-avatar-group > .gn-avatar + .gn-avatar { margin-left: -0.5rem; }
.gn-avatar-more {
    background: var(--gn-gray-100);
    font-size: 0.6875rem;
    color: var(--gn-gray-700);
}

/* ── 6. 링크 · 구분선 · 키 ───────────────────────────────────────────────────────────── */
.gn-link {
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-color-accent);
    text-decoration: none;
}
.gn-link:hover {
    color: var(--gn-color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
}
.gn-link-muted {
    color: var(--gn-color-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--gn-gray-300);
    text-underline-offset: 0.1875rem;
}
.gn-link-muted:hover { color: var(--gn-color-text-primary); text-decoration-color: currentColor; }
.gn-divider {
    height: 0;
    margin: var(--gn-space-4) 0;
    border: 0;
    border-top: var(--gn-border-hairline) solid var(--gn-color-border-default);
    opacity: 1;
}
/* 글자가 가운데 있는 구분선(또는 · 이전 기록) */
.gn-divider-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: var(--gn-space-4) 0;
    font-size: var(--gn-font-size-xs);
    color: var(--gn-gray-500);
}
.gn-divider-label::before,
.gn-divider-label::after {
    content: '';
    flex: 1 1 auto;
    border-top: var(--gn-border-hairline) solid var(--gn-color-border-default);
}
.gn-kbd {
    display: inline-flex;
    align-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3125rem;
    border-radius: 0.3125rem;
    background: var(--gn-color-bg-surface);
    box-shadow: inset 0 0 0 1px var(--gn-gray-300), 0 1px 0 var(--gn-gray-300);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: var(--gn-font-weight-medium);
    line-height: 1;
    color: var(--gn-gray-700);
}

/* ── 7. 로딩 — 스피너 · 스켈레톤 ─────────────────────────────────────────────────────── */
.gn-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid var(--gn-blue-100);
    border-top-color: var(--gn-color-accent);
    border-radius: var(--gn-radius-circle);
    animation: gn-spin 0.7s linear infinite;
    vertical-align: middle;
}
.gn-spinner-sm { width: 1rem;  height: 1rem; }
.gn-spinner-lg { width: 2rem;  height: 2rem; border-width: 0.1875rem; }
@keyframes gn-spin { to { transform: rotate(360deg); } }
.gn-skeleton {
    display: block;
    height: 0.75rem;
    border-radius: var(--gn-radius-sm);
    background: var(--gn-gray-200);
    animation: gn-pulse 1.4s ease-in-out infinite;
}
.gn-skeleton + .gn-skeleton { margin-top: 0.5rem; }
.gn-skeleton-title  { height: 1rem; width: 40%; }
.gn-skeleton-circle { border-radius: var(--gn-radius-circle); }
@keyframes gn-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
    .gn-spinner { animation-duration: 1.6s; }
    .gn-skeleton { animation: none; }
}

/* ── 8. 진행 막대 — 라벨 + 퍼센트 + 얇은 막대 ─────────────────────────────────────────── */
.gn-progress {
    display: grid;
    gap: 0.375rem;
}
.gn-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gn-gray-700);
}
.gn-progress-head .gn-num {
    font-size: var(--gn-font-size-xs);
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-color-text-muted);
}
.gn-progress .progress {
    --bs-progress-height: 0.5rem;
    --bs-progress-bg: var(--gn-gray-100);
    --bs-progress-bar-bg: var(--gn-color-accent);
    --bs-progress-border-radius: var(--gn-radius-pill);
}
.gn-progress-sm .progress { --bs-progress-height: 0.375rem; }
.gn-progress-lg .progress { --bs-progress-height: 0.75rem; }
.gn-progress .progress-bar { border-radius: var(--gn-radius-pill); }
.gn-progress-green .progress { --bs-progress-bar-bg: var(--gn-teal-500); }
.gn-progress-amber .progress { --bs-progress-bar-bg: var(--gn-amber-500); }
.gn-progress-red   .progress { --bs-progress-bar-bg: var(--gn-red-500); }
.gn-progress-help {
    font-size: var(--gn-font-size-xs);
    color: var(--gn-color-text-muted);
}

/* ── 9. 안내 상자(callout) — 정보·성공·경고·오류. 기존 guide_text·alert-msg·노란 alert-primary 의 새 이름 ── */
.gn-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--gn-radius-lg);
    background: var(--gn-blue-50);
    box-shadow: inset 0 0 0 1px var(--gn-blue-100);
    font-size: var(--gn-font-size-sm);
    line-height: 1.375rem;
    color: var(--gn-blue-800);
}
.gn-callout > .bi {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--gn-blue-600);
}
.gn-callout-body { flex: 1 1 auto; min-width: 0; }
.gn-callout-title {
    display: block;
    margin-bottom: 0.125rem;
    font-weight: var(--gn-font-weight-bold);
}
.gn-callout-body > p,
.gn-callout-body > ul { margin: 0; }
.gn-callout-body > ul { padding-left: 1.125rem; list-style: disc; }
.gn-callout .gn-callout-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-weight: var(--gn-font-weight-medium);
}
.gn-callout-close {
    flex: 0 0 auto;
    margin: -0.25rem -0.375rem 0 0;
    padding: 0.375rem;
    border: 0;
    border-radius: var(--gn-radius-md);
    background: none;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
}
.gn-callout-close:hover { opacity: 1; background: rgba(var(--bs-white-rgb), 0.5); }
.gn-callout-success { background: var(--gn-status-complete-bg); box-shadow: inset 0 0 0 1px var(--gn-callout-success-ring); color: var(--gn-callout-success-fg); }
.gn-callout-success > .bi { color: var(--gn-status-complete-fg); }
.gn-callout-warning { background: var(--gn-status-share-bg); box-shadow: inset 0 0 0 1px var(--gn-callout-warning-ring); color: var(--gn-callout-warning-fg); }
.gn-callout-warning > .bi { color: var(--gn-status-share-fg); }
.gn-callout-danger  { background: var(--gn-status-reject-bg); box-shadow: inset 0 0 0 1px var(--gn-callout-danger-ring); color: var(--gn-callout-danger-fg); }
.gn-callout-danger > .bi { color: var(--gn-status-reject-fg); }
.gn-callout-neutral { background: var(--gn-gray-50); box-shadow: inset 0 0 0 1px var(--gn-color-border-default); color: var(--gn-gray-700); }
.gn-callout-neutral > .bi { color: var(--gn-gray-500); }
.gn-callout-sm { padding: 0.5rem 0.75rem; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; }
.gn-callout-sm > .bi { font-size: 0.9375rem; }

/* ── 10. 빈 상태 — 아이콘 칸 + 제목 + 설명 + 동작. 기존 no-data(PNG 상자)의 새 이름 ──────────── */
.gn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: var(--gn-space-8) var(--gn-space-4);
    text-align: center;
}
.gn-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: var(--gn-radius-circle);
    background: var(--gn-gray-100);
    font-size: 1.375rem;
    line-height: 1;
    color: var(--gn-gray-500);
}
.gn-empty-title {
    margin: 0;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-bold);
    color: var(--gn-color-text-primary);
}
.gn-empty-desc {
    max-width: 22rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--gn-color-text-muted);
}
.gn-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
/* 점선 상자 안(목록 자리 비어 있음) */
.gn-empty-boxed {
    border: 0.125rem dashed var(--gn-color-border-default);
    border-radius: var(--gn-radius-lg);
    background: var(--gn-gray-50);
}
.gn-empty-sm { padding: var(--gn-space-5) var(--gn-space-3); }
.gn-empty-sm .gn-empty-icon { width: 2.25rem; height: 2.25rem; font-size: 1rem; }

/* ── 11. 페이지네이션 — 총 건수 + 36px 둥근 페이지 버튼, 576px 미만 '현재 / 전체'(gn-data-table 에서 옮김) ──
   마크업은 GnDataTable.pagination(nav, info, onChange) 가 그린다(표 없이도 쓴다). */
.gn-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gn-space-3);
    margin-top: var(--gn-space-4);
}
.gn-pagination .pagination {
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: var(--gn-font-size-sm);
    --bs-pagination-color: var(--gn-gray-700);
    --bs-pagination-border-width: 0;
    --bs-pagination-hover-bg: var(--gn-gray-100);
    --bs-pagination-hover-color: var(--gn-color-text-primary);
    --bs-pagination-focus-box-shadow: var(--gn-shadow-focus);
    --bs-pagination-active-bg: var(--gn-color-accent);
    --bs-pagination-active-color: var(--bs-white);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--gn-color-text-disabled);
    --bs-pagination-border-radius: var(--gn-radius-md);   /* BS 는 첫·끝 버튼에만 이 값을 준다 — 나머지는 아래 .page-link */
    display: flex;                       /* bs-reset.css 의 구 페이징 .pagination{inline-block; margin} 을 되돌린다 */
    gap: var(--gn-space-1);
    margin: 0 0 0 auto;
}
.gn-pagination .pagination > li > span {   /* bs-reset.css 구 페이징 칸 테두리·배경 제거 */
    border: 0;
    background: transparent;
}
.gn-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--gn-space-2);
    border-radius: var(--gn-radius-md);
    font-variant-numeric: tabular-nums;
}
.gn-pagination .page-item.active .page-link {
    font-weight: var(--gn-font-weight-medium);
    box-shadow: var(--gn-shadow-btn-primary);
}
.gn-pagination-compact { min-width: 4.5rem; }
.gn-pagination-summary {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gn-color-text-muted);
}
.gn-pagination-summary strong {
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-color-text-primary);
}

/* ── main 셸 전역 링크색 되받기(규칙 4 예외, 원본 정리 시 제거) ─────────────────────────── */
a.gn-link              { color: var(--gn-color-accent) !important; }
a.gn-link:hover        { color: var(--gn-color-accent-hover) !important; }
a.gn-link-muted        { color: var(--gn-color-text-muted) !important; }
a.gn-link-muted:hover  { color: var(--gn-color-text-primary) !important; }

/* 디스크(저장) 아이콘 — 동봉한 bootstrap-icons 에는 디스크만 있는 글리프가 없다(bi-save · bi-save2 는 아래 화살표가 붙어 다운로드처럼 보인다).
   자체 SVG 를 마스크로 써서 글자색을 따른다. 사용: <i class="bi gn-icon-floppy" aria-hidden="true"></i> (.bi 크기 규칙을 그대로 받는다) */
.gn-icon-floppy {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linejoin='round'%3E%3Cpath d='M2.5 1.5h9l3 3v9a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1z'/%3E%3Cpath d='M4.75 1.5v3.25h5.5V1.5'/%3E%3Cpath d='M4.25 14.5V9.25h7.5v5.25'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.25' stroke-linejoin='round'%3E%3Cpath d='M2.5 1.5h9l3 3v9a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1z'/%3E%3Cpath d='M4.75 1.5v3.25h5.5V1.5'/%3E%3Cpath d='M4.25 14.5V9.25h7.5v5.25'/%3E%3C/svg%3E") center / contain no-repeat;
}