@charset "utf-8";
/* ===========================================================================
 * L3 — KRDS 패턴을 따른 변형
 *
 *   여기 두는 것   KRDS 에 같은 용도가 있으나 변형 클래스가 필요한 것
 *                  (S40-krds-ui.md §2 의 Q3). 예: .krds-btn.danger — KRDS 에 danger 가 없다
 *   두지 않는 것   KRDS 에 아예 없는 컴포넌트. 그것은 L4 다
 *
 *   ⚠️ **오버라이드가 계속 늘어나면 KRDS 와 싸우고 있는 것이다** → L4 로 내린다 (S40 §2).
 *   ⚠️ 값은 --krds-* 토큰만 쓴다. 색·간격 하드코딩 금지, !important 금지 (절대 규칙 6).
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 필수 입력 표시 — KRDS 에 라벨용 필수 표식이 없다
 *
 *   ⚠️ **별표만으로 알리지 않는다.** 서버·JS 검증이 함께 있고(data-required),
 *      실패 문구는 form-hint-invalid 로 글자로 나온다 (절대 규칙 8).
 * ------------------------------------------------------------------------- */
.required::after {
	content: " *";
	color: var(--krds-light-color-text-danger);
	font-weight: var(--krds-font-weight-bold);
}

/* ---------------------------------------------------------------------------
 * 위험 단추 — KRDS 에 danger 변형이 없다
 *
 *   KRDS .krds-btn 의 변형은 primary·secondary·tertiary·text·link 다.
 *   삭제·탈퇴처럼 **되돌릴 수 없는 동작**은 색으로도 구분돼야 한다(KWCAG 는 색만으로
 *   알리는 것을 막을 뿐, 색을 함께 쓰는 것은 권장이다). 글자는 언제나 「삭제」다.
 * ------------------------------------------------------------------------- */
.krds-btn.danger {
	/* ⚠️ KRDS 에 --krds-*-action-danger 는 없다. 그리고 --krds-*-action-* 은
	      **상태 레이어라 기본값이 투명**이다 — 그것을 채움색으로 쓰면 흰 글자가
	      뒤 배경에 얹혀 명도대비가 1.09 가 된다(axe 실측).
	   ⚠️ element-danger(=danger-50 #de3412)로는 흰 글자가 약 3.6:1 이라 **모자란다**.
	      text-danger(=danger-60 #bd2c0f)가 약 4.7:1 로 KWCAG 5.3.4 를 넘긴다. */
	background-color: var(--krds-light-color-text-danger);
	color: var(--krds-light-color-text-inverse-static);
	border-color: var(--krds-light-color-text-danger);
}

/* hover 는 한 단계 밝게 — 기본 상태의 대비를 유지하려고 어두운 쪽을 기본으로 두었다 */
.krds-btn.danger:hover,
.krds-btn.danger:active {
	background-color: var(--krds-light-color-element-danger);
	border-color: var(--krds-light-color-element-danger);
}

/* ---------------------------------------------------------------------------
 * 셈틀웨어 로고 — KRDS .logo 는 안내 사이트 배경 이미지다
 *
 *   KRDS 의 #krds-header .header-container .logo a 는 반입본의
 *   img/guide/common/top_logo.png 를 배경으로 깐다. 제품 이미지를 표시하고
 *   KRDS 의 데스크톱·모바일 로고 폭은 그대로 사용한다.
 * ------------------------------------------------------------------------- */
#krds-header .header-container .logo.text-logo a {
	display: inline-flex;
	align-items: center;
	background-image: none;
	font-size: var(--krds-pc-font-size-heading-xsmall);
	font-weight: var(--krds-font-weight-bold);
	color: var(--krds-light-color-text-basic);
}

#krds-header .header-container .logo.text-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * 페이지네이션 「처음 · 끝」 — KRDS 는 이전·다음만 준다
 *
 *   KRDS .krds-pagination 은 .page-navi.prev(order 1) · .page-links(order 2) ·
 *   .page-navi.next(order 3) 셋뿐이다. 우리는 **처음·끝을 함께 둔다**
 *   (rules/50-screen-jsp.md §3.1). 그래서 양 끝 order 만 더 준다 —
 *   배경·높이·라운드는 .page-navi 가 이미 갖고 있다.
 *
 *   ⚠️ 아이콘을 만들지 않는다. KRDS 반입본에 겹화살표 svg 가 없고
 *      (ico_angle.svg 하나뿐), 글자 「처음」·「끝」이 스크린리더에도 더 낫다.
 * ------------------------------------------------------------------------- */
.krds-pagination .page-navi.first {
	order: 0;
	padding: 0 var(--krds-padding-3);
}

.krds-pagination .page-navi.last {
	order: 4;
	padding: 0 var(--krds-padding-3);
}

@media (max-width: 767px) {
	/* 좁은 폭에서 KRDS 는 번호 줄(.page-links)에 100% 를 주고 다음(order 1)을 위로 올린다.
	   끝도 같은 줄에 둔다 — 그러지 않으면 번호 줄 아래에 홀로 떨어진다 */
	.krds-pagination .page-navi.last {
		order: 1;
	}
}

/* ---------------------------------------------------------------------------
 * 헤더 아래 경계선을 **메뉴 선과 같은 자리**에 둔다 【사용자 결정 2026-09-10】
 *
 *   스크롤이 시작되면 KRDS 가 #krds-header 와 .header-in 에 border-bottom 을 준다.
 *   그런데 헤더 안쪽 .inner 에 아래 여백이 16px 있어서, 그 선이 주메뉴 자신의
 *   border-bottom 보다 **16px 아래**에 그려졌다 — 멈춰 있을 때와 스크롤할 때
 *   **선이 두 자리를 오갔다**(실측 2026-09-10: 메뉴 152.3px · 헤더 168.3px).
 *
 *   여백을 지우면 헤더 끝 = 메뉴 끝이 되어 두 선이 겹친다.
 *
 *   ⚠️ **PC 에서만 한다.** 1023px 이하에서는 .krds-main-menu 가 없어(display:none)
 *      이 여백이 로고 줄의 아래 숨통이다 — 지우면 헤더가 붙어 버린다.
 * ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	#krds-header .header-container > .inner {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 푸터는 **문서 흐름**에 둔다 【C-F05】
 *
 *   ⚠️ 예전 `position: fixed` 는 본문(버튼·첨부·약관)을 가렸다. 흐름 배치로 바꾸고
 *      `#wrap` 을 flex column + `#container { flex: 1 }` 로 **짧은 페이지에서도
 *      푸터가 하단에 남게** 한다. 높이를 JS 로 재지 않는다.
 * ------------------------------------------------------------------------- */
#wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#container {
	flex: 1 0 auto;
}

#krds-footer {
	flex-shrink: 0;
	position: static;
}

#krds-footer > .inner {
	padding-top: var(--krds-padding-8);
	padding-bottom: var(--krds-padding-10);
}

/* ---------------------------------------------------------------------------
 * 셀렉트 — **값을 고른 것이 보이게** 한다 【D-216】
 *
 *   ⚠️ KRDS 셀렉트의 **기본 글자색은 `text-disabled`** 다(반입본 실측) — 「아직 안 골랐다」를
 *      전제한 색이라 값이 들어 있어도 흐리게 보였다. 옆의 `.krds-input` 은 `#464c53` 인데
 *      셀렉트만 `#8a949e` 라 **같은 줄에서 셀렉트만 죽어 보인다**(사용자 지적 2026-09-10).
 *      가이드가 `.completed` 를 붙이라는 이유가 이것이다.
 *   ⚠️ **클래스를 화면마다 붙이지 않는다.** 붙이는 것을 잊은 화면이 반드시 생긴다 —
 *      `:has()` 로 **고른 상태를 CSS 가 직접 본다**(빈 값 option 은 「아직 안 고름」으로 남긴다).
 *   ⚠️ 색은 KRDS 가 정한 토큰(`--krds-form-select--color-text-completed`)을 그대로 쓴다.
 * ------------------------------------------------------------------------- */
.krds-form-select:has(option:checked:not([value=""])) {
	color: var(--krds-form-select--color-text-completed);
}

/* ---------------------------------------------------------------------------
 * 폼 다열 배치 — KRDS `.form-col-group` 의 칸을 **균등하게** 나눈다 【사용자 지시 2026-09-11】
 *
 *   입력·수정 화면이 **한 줄에 한 칸씩** 쌓여 스크롤이 지나치게 길었다.
 *   ⚠️ **새로 만들지 않는다** — KRDS 에 `.form-col-group`(flex row · 767px 이하 세로)이 있다.
 *      여기서 고치는 것은 **칸 폭 하나**다(절대 규칙 6 · S40 §2 의 Q2).
 *
 *   ⚠️ KRDS 는 칸을 `width: fit-content` 로 둔다 — 그러면 **칸마다 폭이 달라져**
 *      두 줄의 입력칸 오른쪽 끝이 어긋난다. 줄맞춤이 이 배치의 목적이므로 균등하게 나눈다.
 *   ⚠️ `min-width: 0` 이 없으면 **긴 안내 문구가 칸을 밀어내** 옆 칸이 찌그러진다
 *      (flex 항목의 최소 크기는 기본이 내용 크기다).
 *   ⚠️ **여기서 맡는 것은 두 칸까지다.** 셋·넷은 `ui-core/form-grid.css` 의
 *      `cols-3`·`cols-4` 가 격자로 그린다 — 접는 폭이 칸 수마다 다르기 때문이다
 *      (판정은 `deliverables/05-화면설계/폼-열수-규칙.md` · 대조는
 *      `KrdsMarkupRuleTest.다열은_두_칸에서_네_칸까지다`).
 * ------------------------------------------------------------------------- */
/* ⚠️ **줄 자체가 폭을 다 써야 한다.** KRDS `.fieldset` 은 `align-items: flex-start` 라
   폭을 안 정한 자식은 **내용만큼만** 넓어진다 — 그러면 두 칸이 왼쪽에 몰린다(실측). */
.form-col-group {
	width: 100%;
}

.form-col-group > .form-group {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

/* 좁은 폭에서는 KRDS 가 세로로 세운다. ⚠️ 그때 `flex: 1 1 0` 을 그대로 두면
   **기준 축이 높이로 바뀌어** 칸끼리 높이를 나눠 갖는다 — 되돌린다. */
@media (max-width: 767px) {
	.form-col-group > .form-group {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * 빈 안내 문단에는 아이콘도 없다
 *
 *   ⚠️ KRDS 는 `.form-hint-information::before` 로 ⓘ 아이콘을 그린다. 그런데 아이디
 *      중복확인 결과처럼 **JS 가 나중에 채우는 자리**는 화면이 열릴 때 비어 있어
 *      **아이콘만 덩그러니** 남았다(실측 2026-09-11 · 회원가입).
 *   ⚠️ **요소를 감추지 않는다** — 그 문단이 `aria-live` 라 `display:none` 으로 들어갔다 나오면
 *      스크린리더가 변화를 놓칠 수 있다. 지우는 것은 **아이콘뿐**이다.
 * ------------------------------------------------------------------------- */
.form-group .form-hint-information:empty::before {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 탭 줄은 감싸개 폭을 넘지 않는다 — 넘치는 것은 **탭 줄 안에서** 흐른다
 *
 *   KRDS 는 `.tab > ul` 에 `overflow-x: auto` 를 걸어 **탭이 많으면 탭 줄만 옆으로
 *   흐르게** 해 두었다. 그런데 `.krds-tab-area` 가 `align-items: flex-start` 인 세로
 *   플렉스라 `.tab` 의 폭이 **내용만큼(max-content)** 잡히고, 그러면 흐를 자리가 없어
 *   **문서가 통째로 옆으로 넘친다** — 320px 에서 5px(실측 2026-09-11 · 게시판 탭 4개).
 *   **front 는 320px 에서 가로 스크롤이 없어야 한다**(절대 규칙 10).
 *
 *   ⚠️ **탭을 줄이거나 접지 않는다.** KRDS 가 정한 처리는 「탭 줄 안에서 흐르게」다 —
 *      여기서는 그것이 **되게** 할 뿐이다(`min-width: 0` 이 없으면 플렉스 항목이
 *      제 최소 내용 폭 밑으로 줄지 않는다).
 * ------------------------------------------------------------------------- */
.krds-tab-area > .tab {
	width: 100%;
	min-width: 0;
}