/**
 * AGS Custom CSS
 * - KRDS 기본 스타일을 확장하는 커스텀 CSS
 * - component.css에서 누락된 grid-3, grid-4 등을 정의
 */

/* ========================================
   Form Grid System Extension
   ======================================== */

/* grid-1: 전체 너비 (1열) */
.form-box.grid-1 {
    display: block;
    width: 100%;
}

.form-box.grid-1 .form-group {
    width: 100%;
    margin-bottom: 20px;
}

.form-box.grid-1 .form-group:last-child {
    margin-bottom: 0;
}

/* grid-3: 3열 그리드 */
.form-box.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
}

.form-box.grid-3 .form-group {
    width: 100%;
}

/* grid-4: 4열 그리드 */
.form-box.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
}

.form-box.grid-4 .form-group {
    width: 100%;
}

/* ========================================
   Responsive Grid (반응형)
   ======================================== */

/* 태블릿: grid-4 -> grid-2 */
@media (max-width: 1024px) {
    .form-box.grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-box.grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 모바일: 모든 그리드 -> grid-1 */
@media (max-width: 768px) {
    .form-box.grid-2,
    .form-box.grid-3,
    .form-box.grid-4 {
        grid-template-columns: 1fr;
    }
}