/* ── gf-check — v1 체크박스 규격 ─────────────────────────────────────────────────────────────────────
   18px · 모서리 5px · 테두리 1px. 선택·일부 선택은 브랜드색 채움 + 흰 체크 / 흰 가로줄.
   FR·AC 상세 표(.gf-table-check)와 같은 모양을 전역 테마 토큰으로 옮긴 것 — 다크·라이트·앰버·세이지·브랜드를 따라간다.
   옵트인: <input type="checkbox" class="gf-check">  · 글자와 함께: <label class="gf-check-label"><input class="gf-check" …> 글자</label>
   부트스트랩 .custom-control-input · input[type=checkbox] 전역 선택자는 건드리지 않는다.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

.gf-check {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line-normal-strong, rgba(112, 115, 124, 0.52));
    border-radius: 5px;
    background: var(--background-elevated-normal, #FFFFFF);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.gf-check::after {
    content: '';
    width: 8px;
    height: 4px;
    margin-top: -2px;
    border: solid var(--static-white, #FFFFFF);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg) scale(0);
    transition: transform .12s ease;
}

.gf-check:checked,
.gf-check:indeterminate {
    border-color: var(--primary-normal, #3385FF);
    background: var(--primary-normal, #3385FF);
}

.gf-check:checked::after {
    transform: rotate(-45deg) scale(1);
}

/* 일부 선택 — 흰 가로줄 */
.gf-check:indeterminate::after {
    height: 0;
    margin-top: 0;
    border-width: 0 0 2px;
    transform: none;
}

.gf-check:hover:not(:disabled):not(:checked):not(:indeterminate) {
    border-color: var(--primary-normal, #3385FF);
}

.gf-check:focus {
    outline: none;
}

.gf-check:focus-visible {
    outline: 2px solid var(--primary-normal, #3385FF);
    outline-offset: 2px;
}

.gf-check:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* 글자와 함께 쓸 때 — 줄 가운데 맞춤, 글자 눌러도 선택 */
.gf-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.gf-check-label:has(.gf-check:disabled) {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .gf-check,
    .gf-check::after {
        transition: none;
    }
}