/* ===================================================================================================
    Gn 컨트롤 원자(Atoms) — 버튼 · 버튼 그룹(세그먼트·칩) · 드롭다운 · 플로팅 입력  (2026-10-14, 스타일가이드 #button·#button-group·#dropdown·#form)
    - 새 화면에 쓰는 기본 부품. 전부 BS 컴포넌트(.btn·.btn-check·.dropdown-menu·.form-floating) 위에 gn- 클래스를 얹는 방식이라
      BS 의 상태(hover/active/disabled/focus)·JS(드롭다운)를 그대로 탄다. gn- 클래스가 없는 기존 화면에는 영향이 없다.
    - 크기 기준: 버튼·드롭다운 트리거 xs 28 · sm 32 · md 36(기본) · lg 40px, 플로팅 입력 58px(BS 기본). 반경 8px(sm 6px), 글자 14px medium.
    - 버튼 색은 BS 색 클래스(btn-primary …)와 섞지 않는 자체 변형: gn-btn-primary(채움) · -secondary(흰 바탕 + 안쪽 링) · -tonal(연회색) ·
      -soft(연파랑) · -ghost(투명) · -danger(빨강 채움) · -soft-danger(연빨강). 실제 테두리 대신 안쪽 링(box-shadow)이라 높이가 크기마다 정확하다.
      포커스는 2px 바깥선을 2px 띄워 그리고(Tailwind outline-offset), 비활성은 같은 색 50% 투명.
    - 자체 CSS를 쓰는 이유(규칙 2): 아이콘 간격·정사각 아이콘 버튼·세그먼트 트랙·칩 체크·드롭다운 캐럿 회전·플로팅 입력의 아이콘/보조 버튼
      자리는 BS 변수·유틸로 표현할 수 없다. !important 없음.
=================================================================================================== */

/* ── 버튼 ──────────────────────────────────────────────────────────────────────────── */
.gn-btn {
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: var(--gn-font-size-sm);
    --bs-btn-font-weight: var(--gn-font-weight-medium);
    --bs-btn-line-height: 1.25rem;                 /* 20 + 8×2 = 36px */
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: var(--gn-radius-md);
    --bs-btn-disabled-opacity: 0.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    letter-spacing: -0.005em;
    white-space: nowrap;
    box-shadow: var(--gn-btn-shadow, none);
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.gn-btn:focus-visible,
.btn-check:focus-visible + .gn-btn {
    outline: 0.125rem solid var(--gn-color-accent);
    outline-offset: 0.125rem;
    box-shadow: var(--gn-btn-shadow, none);
}
.gn-btn:disabled,
.gn-btn.disabled {
    box-shadow: var(--gn-btn-shadow, none);
    cursor: not-allowed;
    pointer-events: auto;                          /* not-allowed 커서가 보이게(클릭은 disabled 가 막는다) */
}
.gn-btn-xs {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: var(--gn-font-size-xs);
    --bs-btn-line-height: 1rem;                    /* 16 + 6×2 = 28px */
    --bs-btn-border-radius: 0.375rem;
    gap: 0.25rem;
}
.gn-btn-sm {
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-line-height: 1.25rem;                 /* 20 + 6×2 = 32px */
    --bs-btn-border-radius: 0.375rem;
    gap: 0.3125rem;
}
.gn-btn-lg {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-line-height: 1.5rem;                  /* 24 + 8×2 = 40px */
    gap: 0.5rem;
}
.gn-btn .bi { font-size: 1rem; line-height: 1; }
.gn-btn-xs .bi,
.gn-btn-sm .bi { font-size: 0.875rem; }
/* 아이콘만 — 정사각(접근 이름은 aria-label) */
.gn-btn-icon { --bs-btn-padding-x: 0; width: 2.25rem; }
.gn-btn-icon.gn-btn-xs { width: 1.75rem; }
.gn-btn-icon.gn-btn-sm { width: 2rem; }
.gn-btn-icon.gn-btn-lg { width: 2.5rem; }
/* 불러오는 중: 스피너가 글자 앞에 붙고 누를 수 없다(disabled 와 함께) */
.gn-btn .spinner-border {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

/* ── 버튼 색(변형) — 상태별 색은 BS 버튼 변수로(구 a.btn{color:var(--bs-btn-color) !important} 와도 맞는다) ── */
/* 채움(주 동작 — 한 화면에 하나): 위쪽 옅은 빛 반사 + 주색이 섞인 그림자 */
.gn-btn-primary {
    --gn-btn-shadow: var(--gn-shadow-btn-primary);
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--gn-blue-600);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--gn-blue-700);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--gn-blue-800);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--gn-blue-600);
}
/* 흰 바탕(보조 동작): 안쪽 1px 링 + xs 그림자 */
.gn-btn-secondary {
    --gn-btn-shadow: inset 0 0 0 1px var(--gn-gray-300), var(--gn-shadow-xs);
    --bs-btn-color: var(--gn-gray-800);
    --bs-btn-bg: var(--gn-color-bg-surface);
    --bs-btn-hover-color: var(--gn-color-text-primary);
    --bs-btn-hover-bg: var(--gn-gray-50);
    --bs-btn-active-color: var(--gn-color-text-primary);
    --bs-btn-active-bg: var(--gn-gray-100);
    --bs-btn-disabled-color: var(--gn-gray-800);
    --bs-btn-disabled-bg: var(--gn-color-bg-surface);
}
/* 연회색(취소·낮은 위계) */
.gn-btn-tonal {
    --bs-btn-color: var(--gn-gray-700);
    --bs-btn-bg: var(--gn-gray-100);
    --bs-btn-hover-color: var(--gn-color-text-primary);
    --bs-btn-hover-bg: var(--gn-gray-200);
    --bs-btn-active-color: var(--gn-color-text-primary);
    --bs-btn-active-bg: var(--gn-gray-300);
    --bs-btn-disabled-color: var(--gn-gray-700);
    --bs-btn-disabled-bg: var(--gn-gray-100);
}
/* 연파랑(보조 강조 — 파란 테두리 버튼 대신) */
.gn-btn-soft {
    --bs-btn-color: var(--gn-blue-700);
    --bs-btn-bg: var(--gn-blue-50);
    --bs-btn-hover-color: var(--gn-blue-800);
    --bs-btn-hover-bg: var(--gn-blue-100);
    --bs-btn-active-color: var(--gn-blue-800);
    --bs-btn-active-bg: var(--gn-blue-200);
    --bs-btn-disabled-color: var(--gn-blue-700);
    --bs-btn-disabled-bg: var(--gn-blue-50);
}
/* 투명(툴바·카드 안 보조 동작) */
.gn-btn-ghost {
    --bs-btn-color: var(--gn-gray-700);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--gn-color-text-primary);
    --bs-btn-hover-bg: var(--gn-gray-100);
    --bs-btn-active-color: var(--gn-color-text-primary);
    --bs-btn-active-bg: var(--gn-gray-200);
    --bs-btn-disabled-color: var(--gn-gray-700);
    --bs-btn-disabled-bg: transparent;
}
/* 빨강 채움(되돌릴 수 없는 삭제) */
.gn-btn-danger {
    --gn-btn-shadow: var(--gn-shadow-btn-danger);
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--gn-red-600);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--gn-red-700);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--gn-red-800);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--gn-red-600);
}
/* 연빨강(목록에서 빼기처럼 되돌릴 수 있는 것) */
.gn-btn-soft-danger {
    --bs-btn-color: var(--gn-status-reject-fg);
    --bs-btn-bg: var(--gn-status-reject-bg);
    --bs-btn-hover-color: var(--gn-red-600);
    --bs-btn-hover-bg: var(--gn-red-100);
    --bs-btn-active-color: var(--gn-red-600);
    --bs-btn-active-bg: var(--gn-red-200);
    --bs-btn-disabled-color: var(--gn-status-reject-fg);
    --bs-btn-disabled-bg: var(--gn-status-reject-bg);
}
.gn-btn-ghost:focus-visible,
.gn-btn-soft:focus-visible,
.gn-btn-tonal:focus-visible,
.gn-btn-soft-danger:focus-visible { outline-offset: 0; }   /* 바탕 없는·옅은 버튼은 띄우지 않는다 */

/* ── 버튼 그룹 ①: 세그먼트(하나만 선택 — 보기 전환·작성 방식·기간 단위) ────────────────────── */
.gn-segmented {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--gn-radius-md);
    background: var(--gn-color-bg-subtle);
}
.gn-segmented-block { display: flex; }
.gn-segmented-block > .gn-segmented-item { flex: 1 1 0; }
.gn-segmented-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.25rem 0.75rem;                      /* 트랙 4 + 28 + 4 = 36px — 버튼 md 와 같은 높이 */
    height: 1.75rem;                               /* 아이콘 글리프의 세로 정렬로 1px 넘치지 않게 고정 */
    border-radius: 0.375rem;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-medium);
    line-height: 1.25rem;
    white-space: nowrap;
    color: var(--gn-color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.gn-segmented-item:hover { color: var(--gn-color-text-primary); }
.btn-check:checked + .gn-segmented-item {
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-sm);
    color: var(--gn-color-text-primary);
}
a.gn-segmented-item { text-decoration: none; }                      /* 이동 링크 칸(권한 전환 등) — 현재 칸은 .active */
a.gn-segmented-item.active {
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-sm);
    color: var(--gn-color-text-primary);
}
a.gn-segmented-item:focus-visible { box-shadow: var(--gn-shadow-focus); outline: 0; }
.btn-check:focus-visible + .gn-segmented-item { box-shadow: var(--gn-shadow-focus); }
.btn-check:disabled + .gn-segmented-item { opacity: 0.5; cursor: default; }
.gn-segmented-sm { padding: 0.1875rem; }
.gn-segmented-sm .gn-segmented-item {
    padding: 0.25rem 0.625rem;                     /* 3 + 26 + 3 = 32px — 버튼 sm 과 같은 높이 */
    height: 1.625rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}
.gn-segmented-icon .gn-segmented-item { padding-inline: 0.5rem; }
.gn-segmented .bi { font-size: 1rem; line-height: 1; }

/* ── 버튼 그룹 ②: 붙은 버튼(btn-group + gn-btn gn-btn-secondary) — 링이 겹치게 이어 붙이고 선택 칸은 회색 ──── */
.gn-btn-group > .gn-btn-secondary + .gn-btn-secondary,
.gn-btn-group > .btn-check + .gn-btn-secondary:not(:first-of-type) { margin-left: -1px; }
.gn-btn-group > .gn-btn-secondary:hover,
.gn-btn-group > .gn-btn-secondary:focus-visible { z-index: 1; }
.gn-btn-group > .gn-btn-secondary {
    --bs-btn-active-bg: var(--gn-gray-100);
    --bs-btn-active-color: var(--gn-color-text-primary);
}
.gn-btn-group > .btn-check:checked + .gn-btn-secondary { font-weight: var(--gn-font-weight-medium); }

/* ── 버튼 그룹 ③: 칩(여러 개 선택 — 필터 조건·태그) ───────────────────────────────────── */
.gn-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.1875rem 0.75rem;                    /* 20 + 3×2 + 테두리 2 = 28px 알약(버튼 xs 높이) */
    border: var(--gn-border-hairline) solid var(--gn-color-border-strong);
    border-radius: var(--gn-radius-pill);
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-xs);
    font-size: 0.8125rem;
    font-weight: var(--gn-font-weight-medium);
    line-height: 1.25rem;
    color: var(--gn-gray-700);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.gn-chip:hover { background: var(--gn-gray-50); }
.gn-chip .gn-chip-check { display: none; font-size: 0.875rem; }
.btn-check:checked + .gn-chip {
    border-color: var(--gn-blue-200);
    background: var(--gn-blue-50);
    color: var(--gn-blue-700);
}
.btn-check:checked + .gn-chip .gn-chip-check { display: inline-block; }
.btn-check:focus-visible + .gn-chip { box-shadow: var(--gn-shadow-focus); }

/* ── 드롭다운 ─────────────────────────────────────────────────────────────────────────
   트리거는 버튼 원자(btn gn-btn gn-btn-… + gn-dropdown-toggle), 메뉴는 BS .dropdown-menu + .gn-menu(테마: 12px 반경·lg 그림자·안쪽 여백).
   항목은 <button class="dropdown-item"> — 이동이면 <a>. 아이콘(.bi) · 제목/설명(.gn-menu-text) · 오른쪽 표시(.gn-menu-meta|.gn-menu-check). */
.gn-dropdown-toggle::after { display: none; }      /* BS 삼각 캐럿 대신 bi-chevron-down */
.gn-dropdown-caret {
    font-size: 0.75rem;
    color: var(--gn-gray-500);
    transition: transform 0.15s ease;
}
.gn-dropdown-toggle[aria-expanded='true'] .gn-dropdown-caret { transform: rotate(180deg); }
/* 값 선택형 트리거: 앞 라벨(회색) + 현재 값 + 오른쪽 끝 캐럿 */
.gn-dropdown-select {
    justify-content: flex-start;
    min-width: 11rem;
    text-align: left;
}
.gn-dropdown-select .gn-dropdown-caret { margin-left: auto; }
.gn-dropdown-label {
    font-weight: var(--gn-font-weight-regular);
    color: var(--gn-color-text-muted);
}
/* 트리거 안 적용 개수(필터) */
.gn-dropdown-count {
    min-width: 1.125rem;
    padding: calc(0.125rem + var(--gn-font-digit-offset)) 0.3125rem calc(0.125rem - var(--gn-font-digit-offset));
    border-radius: var(--gn-radius-pill);
    background: var(--gn-blue-50);
    box-shadow: inset 0 0 0 1px var(--gn-blue-100);
    font-size: 0.6875rem;
    font-weight: var(--gn-font-weight-medium);
    line-height: 1;
    text-align: center;
    color: var(--gn-blue-700);
}
.gn-dropdown-value {
    overflow: hidden;
    text-overflow: ellipsis;
}
.gn-menu {
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-item-padding-y: 0.4375rem;       /* 20 + 7×2 = 34px 항목 */
}
.gn-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    line-height: 1.25rem;
}
.gn-menu .dropdown-item > .bi {
    flex: 0 0 auto;
    font-size: 1rem;
    color: var(--gn-gray-500);
}
.gn-menu .dropdown-item:hover > .bi,
.gn-menu .dropdown-item:focus > .bi { color: var(--gn-gray-700); }
.gn-menu .dropdown-item.active { font-weight: var(--gn-font-weight-medium); }
.gn-menu .dropdown-item.active > .bi { color: var(--gn-blue-600); }
.gn-menu .dropdown-item:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--gn-blue-300);
}
/* 제목 + 설명(두 줄 항목) */
.gn-menu-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.gn-menu-desc {
    font-size: var(--gn-font-size-xs);
    font-weight: var(--gn-font-weight-regular);
    line-height: 1.125rem;
    color: var(--gn-color-text-muted);
    white-space: normal;
}
.gn-menu .dropdown-item:has(.gn-menu-desc) { align-items: flex-start; }
.gn-menu .dropdown-item:has(.gn-menu-desc) > .bi { margin-top: 0.125rem; }
/* 오른쪽 표시: 선택 체크 · 보조 정보(단축키·개수) */
.gn-menu-check {
    margin-left: auto;
    font-size: 1rem;
    color: var(--gn-blue-600);
    visibility: hidden;
}
.gn-menu .dropdown-item.active .gn-menu-check { visibility: visible; }
.gn-menu-meta {
    margin-left: auto;
    padding-left: var(--gn-space-3);
    font-size: var(--gn-font-size-xs);
    color: var(--gn-gray-500);
}
/* 체크 항목(여러 개 선택): label.dropdown-item 안 체크박스 */
.gn-menu .gn-menu-check-item { cursor: pointer; }
.gn-menu .gn-menu-check-item .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}
.gn-menu .gn-menu-check-item:active { color: inherit; background: var(--gn-gray-200); }
/* 머리글·구분선 */
.gn-menu .dropdown-header {
    padding: 0.375rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: var(--gn-font-weight-bold);
    letter-spacing: 0.02em;
    color: var(--gn-gray-500);
}
/* 위험 항목 */
.gn-menu .gn-menu-danger { color: var(--gn-status-reject-fg); }
.gn-menu .gn-menu-danger > .bi { color: inherit; }
.gn-menu .gn-menu-danger:hover,
.gn-menu .gn-menu-danger:focus {
    background: var(--gn-status-reject-bg);
    color: var(--gn-red-600);
}
/* 메뉴 머리(사용자 정보 등) · 검색 · 바닥(적용 버튼) */
.gn-menu-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: -0.375rem -0.375rem 0.375rem;
    padding: 0.75rem;
    border-bottom: var(--gn-border-hairline) solid var(--gn-color-border-default);
}
.gn-menu-head-name {
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-color-text-primary);
}
.gn-menu-head-sub {
    font-size: var(--gn-font-size-xs);
    color: var(--gn-color-text-muted);
}
.gn-menu-search {
    position: relative;
    margin-bottom: 0.375rem;
}
.gn-menu-search .bi {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    font-size: 0.875rem;
    color: var(--gn-gray-500);
    transform: translateY(-50%);
    pointer-events: none;
}
.gn-menu-search .form-control {
    height: 2rem;
    padding: 0 0.625rem 0 2rem;
    border-color: var(--gn-color-border-default);
    border-radius: 0.375rem;
    background: var(--gn-gray-50);
    box-shadow: none;
    font-size: 0.8125rem;
}
.gn-menu-search .form-control:focus {
    border-color: var(--gn-blue-500);
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-focus);
}
.gn-menu-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    margin: 0.375rem -0.375rem -0.375rem;
    padding: 0.5rem;
    border-top: var(--gn-border-hairline) solid var(--gn-color-border-default);
    border-radius: 0 0 var(--bs-dropdown-inner-border-radius) var(--bs-dropdown-inner-border-radius);
    background: var(--gn-gray-50);
}
.gn-menu-foot .gn-menu-foot-note {
    margin-right: auto;
    padding-left: 0.25rem;
    font-size: var(--gn-font-size-xs);
    color: var(--gn-color-text-muted);
}

/* ── 플로팅 입력(BS .form-floating — 로그인과 같은 방식) ─────────────────────────────── */
.gn-field > .form-control,
.gn-field > .form-select {                         /* 높이는 BS 플로팅 기본(3.5rem + 테두리) — 라벨이 올라간 뒤 글자 위치가 그 높이 기준이다 */
    padding-inline: 0.875rem;
    border-color: var(--gn-color-border-strong);
    border-radius: var(--gn-radius-md);
    font-size: var(--gn-font-size-sm);
    color: var(--gn-color-text-primary);
}
.gn-field > textarea.form-control {
    height: 7.5rem;
    min-height: 5rem;
    resize: vertical;
}
.gn-field > label {
    padding-inline: 0.875rem;
    font-size: var(--gn-font-size-sm);
    color: var(--gn-color-text-muted);
}
.gn-field > .form-control:focus ~ label,
.gn-field > .form-select:focus ~ label { color: var(--gn-blue-600); }
.gn-field > .form-control:disabled ~ label,
.gn-field > .form-select:disabled ~ label { color: var(--gn-color-text-disabled); }
.gn-field > .form-control.is-invalid ~ label { color: var(--gn-status-reject-fg); }
.gn-field > .form-control:read-only:not(:disabled) {
    background-color: var(--gn-gray-50);
    box-shadow: none;
}
/* 필수 표시 */
.gn-field > label .gn-required { margin-left: 0.125rem; color: var(--gn-status-reject-fg); }
/* 앞 아이콘 */
.gn-field-has-icon > .form-control { padding-left: 2.625rem; }
.gn-field-has-icon > label { padding-left: 2.625rem; }
.gn-field-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    z-index: 3;
    font-size: 1rem;
    line-height: 1;
    color: var(--gn-color-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}
/* 뒤 보조 버튼(비밀번호 보기·지우기) */
.gn-field-has-action > .form-control { padding-right: 3rem; }
.gn-field-action {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    z-index: 3;
    transform: translateY(-50%);
}
/* 도움말·글자 수 */
.gn-field-hint {
    display: flex;
    justify-content: space-between;
    gap: var(--gn-space-2);
    margin-top: 0.375rem;
    font-size: var(--gn-font-size-xs);
    color: var(--gn-color-text-muted);
}
.gn-field-hint .gn-field-count { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── 폼 그룹: 카드 안 묶음(머리 제목·설명 / 본문 입력 / 회색 바닥 띠) ─────────────────────── */
.gn-form-card {
    --bs-card-border-color: var(--gn-color-border-default);
    --bs-card-cap-bg: var(--gn-color-bg-surface);
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
}
.gn-form-card .card-footer {
    padding-block: 0.75rem;
    border-color: var(--gn-color-border-default);
    background: var(--gn-gray-50);
}
.gn-form-card-title {
    margin: 0;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-bold);
    line-height: 1.5rem;
    color: var(--gn-color-text-primary);
}
.gn-form-card-desc {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--gn-color-text-muted);
}
/* 묶음 제목(fieldset legend) */
.gn-form-legend {
    float: none;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: var(--gn-font-weight-medium);
    line-height: 1.25rem;
    color: var(--gn-gray-700);
}
/* 체크·라디오·스위치 라벨: 14px + 아래 설명 12px */
.gn-check-label {                                  /* forms.css 의 .form-check-label(16px·500·자간 -0.03em·31px 줄높이)을 되돌린다 */
    margin-bottom: 0;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-regular);
    line-height: 1.5rem;
    letter-spacing: 0;
    color: var(--gn-color-text-primary);
}
.gn-check-desc {
    display: block;
    font-size: var(--gn-font-size-xs);
    line-height: 1.125rem;
    color: var(--gn-color-text-muted);
}
.form-check:has(.gn-check-label) { margin-bottom: 0.5rem; }
.form-check:has(.gn-check-label) .form-check-input { margin-top: 0.25rem; }
.form-check-input:disabled ~ .gn-check-label { color: var(--gn-color-text-disabled); }

/* ── 선택 카드(라디오·체크를 카드로 — 작성 방식·요금제 같은 큰 선택지) ───────────────────── */
.gn-check-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
    margin: 0;
    padding: 0.875rem 1rem;
    border: var(--gn-border-hairline) solid var(--gn-color-border-default);
    border-radius: var(--gn-radius-lg);
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-xs);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.gn-check-card:hover { border-color: var(--gn-color-border-strong); }
.gn-check-card .form-check-input { flex: 0 0 auto; margin: 0.125rem 0 0; }
.gn-check-card-title {
    display: block;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-color-text-primary);
}
.gn-check-card-desc {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--gn-font-size-xs);
    color: var(--gn-color-text-muted);
}
.gn-check-card:has(.form-check-input:checked) {
    border-color: var(--gn-color-accent);
    background: var(--gn-blue-50);
    box-shadow: inset 0 0 0 1px var(--gn-color-accent);
}
.gn-check-card:has(.form-check-input:disabled) { opacity: 0.55; cursor: default; }

/* ── 툴바 검색 입력(플로팅 아님) — 목록 위 검색 줄, 36px(버튼 md 와 같은 높이) ──────────────── */
.gn-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 12rem;
    margin: 0;                                         /* <label> 로 쓸 때 셸의 label 아래 여백(0.5rem)을 없앤다 — 버튼과 한 줄 */
}
.gn-search > .bi {
    position: absolute;
    left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--gn-gray-500);
    pointer-events: none;
}
.gn-search > .form-control {
    height: 2.25rem;
    padding: 0 2rem 0 2.125rem;
    border-color: var(--gn-color-border-strong);
    border-radius: var(--gn-radius-md);
    box-shadow: var(--gn-shadow-xs);
    font-size: var(--gn-font-size-sm);
}
.gn-search > .form-control::placeholder { color: var(--gn-gray-500); }
.gn-search > .form-control:focus {
    border-color: var(--gn-blue-500);
    box-shadow: var(--gn-shadow-focus);
}
.gn-search > .form-control::-webkit-search-cancel-button { display: none; }
/* 오른쪽 단축키 표시 또는 지우기 버튼 자리 */
.gn-search > .gn-kbd,
.gn-search > .gn-search-clear {
    position: absolute;
    right: 0.5rem;
}
.gn-search-clear {
    padding: 0.25rem;
    border: 0;
    border-radius: var(--gn-radius-sm);
    background: none;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--gn-gray-500);
}
.gn-search-clear:hover { background: var(--gn-gray-100); color: var(--gn-color-text-primary); }
.gn-search-sm > .form-control { height: 2rem; font-size: 0.8125rem; }
/* 검색 버튼(오른쪽 끝) — 모바일 자판에 Enter 가 잘 안 보여도 눌러서 찾는다. 폼 안에서 type="submit" */
.gn-search > .gn-search-submit {
    position: absolute;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--gn-radius-sm);
    background: var(--gn-color-bg-subtle);
    font-size: 0.875rem;
    color: var(--gn-gray-700);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.gn-search > .gn-search-submit:hover { background: var(--gn-blue-50); color: var(--gn-blue-700); }
.gn-search > .gn-search-submit:focus-visible { outline: 0; box-shadow: var(--gn-shadow-focus); }
.gn-search:has(> .gn-search-submit) > .form-control { padding-right: 2.5rem; }
.gn-search-sm > .gn-search-submit { width: 1.5rem; height: 1.5rem; }

/* 툴바 셀렉트 — 검색창과 한 줄에 놓는 검색 조건 · 정렬. 높이 · 테두리 · 반경 · 그림자 · 포커스를 .gn-search 와 같게(36px, sm 32px) */
.form-select.gn-select {
    width: auto;
    min-width: 6.5rem;
    height: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.75rem;
    border-color: var(--gn-color-border-strong);
    border-radius: var(--gn-radius-md);
    box-shadow: var(--gn-shadow-xs);
    font-size: var(--gn-font-size-sm);
    color: var(--gn-color-text-primary);
}
.form-select.gn-select:focus {
    border-color: var(--gn-blue-500);
    box-shadow: var(--gn-shadow-focus);
}
.form-select.gn-select-sm { height: 2rem; font-size: 0.8125rem; }

/* ── 태그 입력 — 입력 상자 안에 칩이 쌓이고 끝에 글자 입력(키워드) ───────────────────────── */
.gn-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.5rem;
    border: var(--gn-border-hairline) solid var(--gn-color-border-strong);
    border-radius: var(--gn-radius-md);
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-xs);
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gn-tag-input:focus-within {
    border-color: var(--gn-blue-500);
    box-shadow: var(--gn-shadow-focus);
}
.gn-tag-input > input {
    flex: 1 1 6rem;
    min-width: 6rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    border: 0;
    outline: 0;
    background: none;
    font-size: var(--gn-font-size-sm);
    color: var(--gn-color-text-primary);
}
.gn-tag-input > input::placeholder { color: var(--gn-gray-500); }
.gn-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    height: 1.5rem;
    padding: 0 0.125rem 0 0.5rem;
    border-radius: 0.375rem;
    background: var(--gn-gray-100);
    box-shadow: var(--gn-status-ring);
    font-size: var(--gn-font-size-xs);
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-gray-700);
    white-space: nowrap;
}
.gn-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    font-size: 0.625rem;
    line-height: 1;
    color: var(--gn-gray-500);
}
.gn-tag-remove:hover { background: var(--gn-gray-200); color: var(--gn-color-text-primary); }
.gn-tag-blue { background: var(--gn-blue-50); color: var(--gn-blue-700); }

/* ── 파일 — 드롭 영역 + 파일 행(아이콘 칸 · 이름/크기 · 진행 · 제거) ──────────────────────── */
.gn-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 8.5rem;
    padding: var(--gn-space-5);
    border: 0.125rem dashed var(--gn-color-border-strong);
    border-radius: var(--gn-radius-lg);
    background: var(--gn-gray-50);
    font-size: var(--gn-font-size-sm);
    text-align: center;
    color: var(--gn-gray-700);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gn-file-drop strong { font-weight: var(--gn-font-weight-medium); color: var(--gn-color-accent); }
.gn-file-drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.25rem;
    border-radius: var(--gn-radius-circle);
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-xs), inset 0 0 0 1px var(--gn-color-border-default);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--gn-gray-500);
}
.gn-file-drop-hint { font-size: var(--gn-font-size-xs); color: var(--gn-color-text-muted); }
.gn-file-drop:hover,
.gn-file-drop.is-dragover { border-color: var(--gn-blue-300); background: var(--gn-blue-50); }
.gn-file-drop:hover .gn-file-drop-icon,
.gn-file-drop.is-dragover .gn-file-drop-icon { color: var(--gn-color-accent); }
input[type='file']:focus-visible + .gn-file-drop { box-shadow: var(--gn-shadow-focus); }
.gn-file-drop-sm { flex-direction: row; min-height: 0; gap: 0.75rem; padding: 0.75rem 1rem; text-align: left; }
.gn-file-drop-sm .gn-file-drop-icon { margin: 0; }

.gn-file-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gn-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: var(--gn-border-hairline) solid var(--gn-color-border-default);
    border-radius: var(--gn-radius-lg);
    background: var(--gn-color-bg-surface);
    box-shadow: var(--gn-shadow-xs);
}
.gn-file-body {
    display: grid;
    flex: 1 1 auto;
    gap: 0.125rem;
    min-width: 0;
}
.gn-file-name {
    overflow: hidden;
    font-size: var(--gn-font-size-sm);
    font-weight: var(--gn-font-weight-medium);
    color: var(--gn-color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.gn-file-name:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
.gn-file-meta {
    font-size: var(--gn-font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--gn-color-text-muted);
}
.gn-file .progress {
    --bs-progress-height: 0.25rem;
    --bs-progress-bg: var(--gn-gray-100);
    --bs-progress-bar-bg: var(--gn-color-accent);
    margin-top: 0.25rem;
}
.gn-file.is-error { border-color: var(--gn-red-100); background: var(--gn-status-reject-bg); }
.gn-file.is-error .gn-file-meta { color: var(--gn-status-reject-fg); }

/* ── 날짜 — 플로팅 입력 + 달력 아이콘, 기간(시작 ~ 끝) ───────────────────────────────────── */
.gn-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}
.gn-date-range-sep { font-size: var(--gn-font-size-sm); color: var(--gn-gray-500); }
.gn-field input[type='date'] { font-variant-numeric: tabular-nums; }
.gn-field input[type='date']::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* ── 스위치 — BS .form-switch 크기·색 ─────────────────────────────────────────────────── */
.gn-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 1.5rem;
    margin: 0;
    padding-left: 0;
}
.gn-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    flex: 0 0 auto;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0;
    border: 0;
    border-radius: var(--gn-radius-pill);
    background-color: var(--gn-gray-300);
    background-image: var(--bs-form-switch-bg);
    cursor: pointer;
    transition: background-color 0.15s ease, background-position 0.15s ease;
}
.gn-switch .form-check-input:checked { background-color: var(--gn-color-accent); }
.gn-switch .form-check-input:focus { box-shadow: var(--gn-shadow-focus); }
.gn-switch .form-check-input:disabled { opacity: 0.5; }
.gn-switch-sm .form-check-input { width: 1.75rem; height: 1rem; }