@charset "utf-8";

/* ===========================================================================
 * form-grid — 입력·수정 폼의 열 수 (L3 · KRDS `.form-col-group` 변형)
 *
 *   【사용자 지적 2026-09-13】 「한 라인에 2개만 있다. 값들의 유사성에 따라
 *   3~4개까지도 입력되어야 한다 — 일반적인 화면에 따라 **선택적으로** 구성」
 *
 *   ⚠️ **어느 화면을 몇 열로 할지는 여기서 정하지 않는다.**
 *      판정 규칙은 `deliverables/05-화면설계/폼-열수-규칙.md` 다.
 *      이 파일은 **열 수를 그리는 일**만 한다.
 *
 *   ⚠️ **새 컨테이너를 만들지 않는다**(절대 규칙 6) — 줄 컴포넌트는 KRDS
 *      `.form-col-group` 이고, 2열은 그것과 `ui-core/components.css` 의
 *      균등분할(`flex: 1 1 0`)로 이미 된다. 여기는 **셋·넷일 때만** 얹는다.
 *
 *   ⚠️ **`components.css` 뒤에 실린다.** 앞에 실으면 거기 있는
 *      `.form-col-group > .form-group { flex: 1 1 0 }` 가 나중에 덮어써
 *      3·4열이 flex 로 돌아간다 — 그래도 **오류는 안 난다**(칸이 셋 다 보인다).
 *      `frontHeaderCss.jsp` · `operHeader.jsp` 의 순서를 바꾸지 않는다.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * 접는 폭 — `min-width` 한 방향으로만 쌓는다 (`S50-responsive.md` §2)
 *
 *   320 ~  767   1열   ← 🟥 절대 규칙 10. 여기서 가로 스크롤이 나면 안 된다
 *   768 ~ 1023   2열   ← 본문 720px. 3열이면 칸 235px 라 라벨이 두 줄이 된다
 *  1024 ~ 1439   3열   ← 본문 976px → 칸 315px
 *  1440 ~        4열   ← 본문은 1248px(`--krds-contents-wrap-size`)에서 멈춘다 → 칸 278px
 *
 *   ⚠️ **flex 가 아니라 grid 다.** flex 로 3·4열을 하면 좁은 폭에서 접으려고
 *      `flex-basis` 를 폭마다 계산해야 한다 — 칸 수만큼 값이 갈린다.
 *      격자는 **칸 수를 한 줄로 말한다**.
 *   ⚠️ `minmax(0, 1fr)` 의 `0` 이 없으면 **긴 안내 문구가 칸을 밀어낸다**
 *      (격자 칸의 최소 크기는 기본이 `auto` = 내용 크기다).
 *   ⚠️ 간격은 KRDS 가 「인풋 조합」에 정한 `--krds-gap-5` 를 그대로 쓴다.
 *      `.form-col-group` 이 이미 그 값이라 **여기서 다시 정하지 않는다.**
 * ------------------------------------------------------------------------- */
.form-col-group.cols-3,
.form-col-group.cols-4 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.form-col-group.cols-3,
	.form-col-group.cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.form-col-group.cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 4열은 1440px 부터다. 그 아래에서는 위의 2열 그대로 — **오늘과 같은 모습**이라
   좁아질 때 손해 보는 구간이 없다(`폼-열수-규칙.md` §3). */
@media (min-width: 1440px) {
	.form-col-group.cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}