/*
 * form.css — 문의 폼 (Fluent Forms) 의 위치·글자
 *
 * 고정 페이지이고 본문에 [fluentform] 숏코드가 있을 때만 로드된다(inc/enqueue.php).
 * 폼 페이지는 전용 템플릿 없이 page.php 를 쓴다 — 폭(720 / 327)·세로 리듬은 page.css 가 이미 정한다.
 *
 * 셀렉터는 Fluent Forms 6.2.13 의 실제 출력 HTML 에서 잡았다.
 *
 * ★★ 색은 하나도 지정하지 않는다(배경·테두리·버튼·필수 표시·에러·성공 전부).
 *   플러그인은 폼마다 인라인 <style> 을 <body> 끝에 찍고 선택자에 폼 id 를 박는다.
 *   색은 구매자가 [Fluent Forms > 해당 폼 > 스타일] 에서 바꾸는 것이 정상 경로다.
 *   포인트 컬러를 바꿔도 폼이 안 바뀌는 것이 정상이다.
 *
 * ★ 제출 버튼 규칙은 특이도를 (0,3,0) 으로 둔다. 스타일러의 인라인 규칙
 *   (form.fluent_form_N .wpf_has_custom_css.ff-btn-submit = (0,3,1), 문서 뒤쪽)이 항상 이기게 —
 *   구매자가 스타일러에서 radius·폭을 지정하면 그 설정을 존중한다. 특이도를 올리지 말 것.
 */

/* ─────────────────────────────────────────────────────────
   폼 루트 — 아티클 타이포 상속을 끊는다.
   폼이 .c4-entry-content 안이라, 명세에 없는 요소(동의 문구·메시지 안 문단 등)가
   본문 17 / 500 / 1.9 를 그대로 받아 늘어진다. 여기서 폼 계열(Body/body3)로 되돌린 뒤 아래 표를 얹는다.
   ★ 아티클 규칙을 통째로 끄지 말 것 — 같은 컨테이너를 약관 2종이 쓴다.
   ───────────────────────────────────────────────────────── */

/* 체크박스·라디오 라벨(표의 Body/body3)도 같은 선언이라 한 규칙으로 묶었다(8단계 중복 정리).
   라벨을 따로 적어 두는 이유: 상속만 믿으면 플러그인이 라벨에 글자 규칙을 넣는 순간 조용히 진다.
   동의 문구 .ff_t_c 도 이 라벨 안에 있어 함께 따라온다. */
.c4-entry-content .fluentform,
.c4-entry-content .fluentform .ff-el-form-check-label {
	font-size: var(--c4-fz-body3);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
}

/* ─────────────────────────────────────────────────────────
   필드 사이 세로 간격 20.
   ★ 플러그인은 마지막 묶음(제출 버튼)에도 margin-bottom 20 을 붙인다.
     그대로 두면 페이지 하단이 60 이 아니라 80 이 되어 약관 2종과 어긋나므로 마지막 묶음만 0.
   높이는 완전 가변 — min/max/고정 높이를 주지 않는다.
   ───────────────────────────────────────────────────────── */

.c4-entry-content .fluentform .ff-el-group {
	margin-bottom: var(--c4-form-field-gap);
}

.c4-entry-content .fluentform :is(form, fieldset) > .ff-el-group:last-child {
	margin-bottom: 0;
}

/* 같은 이유 — 플러그인은 체크박스·라디오 선택지마다 margin-bottom 5 를 주는데 마지막 선택지에도 붙는다.
   그대로 두면 선택지 묶음 아래만 25 가 된다(실측). 선택지 사이 5 는 플러그인 기본 그대로 둔다. */
.c4-entry-content .fluentform .ff-el-form-check:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────
   라벨 — Body/body3_bold
   ───────────────────────────────────────────────────────── */

.c4-entry-content .fluentform .ff-el-input--label label {
	font-size: var(--c4-fz-body3);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-bold);
}

/* ─────────────────────────────────────────────────────────
   필드 설명(도움말) — Body/body4. 두 형태 다 대상이다.
   · 인라인 텍스트 : .ff-el-help-message (필드 안)
   · 툴팁         : 아이콘 .ff-el-tooltip 에 마우스를 올리면 플러그인 JS 가
                    .ff-el-pop-content 를 <body> 끝에 붙인다 — 폼 루트 밖이라 전역 선택자로 잡는다.
                    이 파일이 폼 페이지에서만 로드되므로 다른 화면에는 닿지 않는다.
   ───────────────────────────────────────────────────────── */

.c4-entry-content .fluentform .ff-el-help-message,
body .ff-el-pop-content {
	font-size: var(--c4-fz-body4);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
	font-style: normal;
}

/* ─────────────────────────────────────────────────────────
   입력 · 셀렉트 — 높이 48 · radius 8 · 좌우 16 · Body/body3
   글꼴: 플러그인이 입력칸에만 시스템 글꼴을 박아 두므로 테마 글꼴로 되돌린다.
   ───────────────────────────────────────────────────────── */

.c4-entry-content .fluentform .ff-el-form-control {
	height: var(--c4-form-control-h);
	padding-inline: var(--c4-form-control-pad-x);
	border-radius: var(--c4-radius-form-control);
	font-family: var(--c4-font-sans);
	font-size: var(--c4-fz-body3);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
}

/* 플러그인의 select 높이 규칙(select.ff-el-form-control:not([size]):not([multiple]) = (0,3,1))을 이긴다.
   여러 줄 셀렉트(multiple · size)는 높이 48 에 가두지 않는다. */
.c4-entry-content .fluentform select.ff-el-form-control:not([size]):not([multiple]) {
	height: var(--c4-form-control-h);
}

.c4-entry-content .fluentform select.ff-el-form-control:is([size], [multiple]) {
	height: auto;
}

/* 텍스트에어리어 — 같은 스타일에 높이만 auto(최소 120), 상하 14 */
.c4-entry-content .fluentform textarea.ff-el-form-control {
	height: auto;
	min-height: var(--c4-form-textarea-min-h);
	padding-block: var(--c4-form-textarea-pad-y);
}

/* ─────────────────────────────────────────────────────────
   에러 · 성공 메시지 — Body/body4
   · 필드 아래 에러   : .error.text-danger
   · 폼 아래 모음 에러 : .ff-errors-in-stack .error
   · 제출 성공        : .ff-message-success (폼 바로 뒤, 루트 안)
   ───────────────────────────────────────────────────────── */

.c4-entry-content .fluentform :is(.text-danger, .ff-errors-in-stack .error, .ff-message-success) {
	font-size: var(--c4-fz-body4);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
}

/* ─────────────────────────────────────────────────────────
   제출 버튼 — 높이 48 · radius 8 · 폼 전체 폭(min-width) · 헤더 CTA 문구 계열(Body/body2_bold)
   ★ 특이도 (0,3,0) 유지 — 파일 상단 주석 참조.
   높이는 min-height 로 준다 — 버튼 문구가 길어 줄바꿈되면 고정 높이에서 글자가 넘친다.
   ───────────────────────────────────────────────────────── */

/*
 * [8단계] 폭은 width 가 아니라 min-width 로 준다. 스타일러의 폭 설정이 min-width 로 찍히기 때문이다.
 * width: 100% 로 두면 구매자가 스타일러에서 50% 를 골라도 min-width 50% 는 아무 일도 못 하고 720 그대로 남았다(8단계 실측).
 * 같은 속성이면 특이도 (0,3,0) < 스타일러 (0,3,1) 이라 구매자 설정이 이긴다.
 */
.c4-entry-content .fluentform .ff-btn-submit {
	min-width: 100%;
	min-height: var(--c4-form-btn-h);
	border-radius: var(--c4-radius-form-btn);
	font-size: var(--c4-fz-body2);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-bold);
}

/* ─────────────────────────────────────────────────────────
   포커스 — 플러그인 기본을 그대로 두되, 키보드로 도달했을 때 전혀 안 보이는 자리만 되살린다.
   이건 '색을 지정하지 않는다'의 예외가 아니라 접근성 최소 요건이다. 새 색을 만들지 않고 테마의 포커스 링 토큰을 쓴다.

   7단계 실측(키보드 Tab, :focus-visible 일치 상태에서 포커스 전후 outline·border·box-shadow 비교):
   · 텍스트 입력          → 플러그인이 테두리 색을 바꿔 보인다 → 손대지 않는다.
   · 체크박스 · 라디오     → 전후 완전히 같음(안 보임). base.css 의 input:focus-visible { outline: none } 이
                            테두리 강조로 대신하는데, 네이티브 체크박스·라디오에는 그 테두리가 그려지지 않는다.
   · 제출 버튼            → 전후 완전히 같음(안 보임). 플러그인 .ff-default .ff_btn_style:focus { outline: 0 }.
   ───────────────────────────────────────────────────────── */

.c4-entry-content .fluentform :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.c4-entry-content .fluentform .ff-btn-submit:focus-visible {
	outline: var(--c4-focus-ring-w) solid var(--c4-color-focus);
	outline-offset: var(--c4-focus-ring-offset);
}

/* ─────────────────────────────────────────────────────────
   모바일 — 입력 요소만 16 으로 올린다(iOS Safari 자동 확대 방지).
   라벨·버튼·메시지는 건드리지 않는다.
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.c4-entry-content .fluentform .ff-el-form-control {
		font-size: var(--c4-form-control-fz-touch);
	}
}