<script setup lang="ts">
withDefaults(defineProps<{ columns?: 1 | 2; ariaLabel?: string }>(), {
  columns: 2,
  ariaLabel: '입력 항목'
})
</script>

<template>
  <div class="ks-form-grid" :data-columns="columns" role="group" :aria-label="ariaLabel"><slot /></div>
</template>

<style scoped>
.ks-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-space-4); align-items: start; }
.ks-form-grid[data-columns='1'] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 56rem) { .ks-form-grid { grid-template-columns: minmax(0, 1fr); } }
</style>
