/*
 * HE Forms — 스케치업 체험판 신청 폼 겉모양
 *
 * 그래비티폼즈로 만들어져 있던 팝업 폼(GF #4·#9·#10)의 화면을 그대로 옮긴 것이다.
 * 값은 라이브 사이트(sketchup.buildingpoint.co.kr)에서 실제로 계산된 스타일을
 * 재어 온 것이라 눈대중이 아니다.
 *
 *   폼 너비 520px · 라벨 110px · 입력영역 410px
 *   한글/영문 두 칸: 197px + 16px(간격) + 197px
 *   입력칸  배경 rgba(0,0,0,.05) · 테두리 없음 · 모서리 3px · 높이 34px
 *   제출버튼 #005f9e — 스케치업 사이트의 주요 버튼(.btn.unique_bg)과 같은 색
 *
 * 플러그인 기본 CSS 를 고치지 않는 이유: 같은 플러그인을 지오시스템에서도 쓰는데
 * 그쪽은 라벨이 입력칸 위에 오는 전혀 다른 배치다.
 *
 * 불러오는 곳: functions/assets.php (priority 999 — 플러그인 CSS 뒤)
 */

/* ================================================================
   폼 전체
   ================================================================ */
.popwrap .he-form { max-width: none; }

.popwrap .he-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 16px;
}

/* ================================================================
   한 줄 = 라벨(왼쪽 고정폭) + 입력영역
   ================================================================ */
.popwrap .he-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1 1 100%;
	min-width: 0;
}

/* 조건부 항목(기타 내용)은 조건을 만족할 때만 보인다.
   플러그인의 .he-field--hidden 은 클래스 하나짜리라, 위 .popwrap .he-field 규칙에
   밀려 다시 나타난다. 같은 구체성으로 못박아 둔다. */
.popwrap .he-field--hidden { display: none; }

.popwrap .he-field-label {
	flex: 0 0 110px;
	margin: 0;
	text-align: left;      /* 팝업 전체가 가운데 정렬이라 되돌려 준다 */
	font-size: 16px;
	font-weight: 700;
	color: #000;
	line-height: 1.4;
}

.popwrap .he-field-input {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

/* 설명·오류 문구는 입력칸 아래로 내려보내고 라벨 폭만큼 들여쓴다 */
.popwrap .he-field-desc,
.popwrap .he-field-error {
	flex: 1 1 100%;
	margin: 6px 0 0 110px;
	text-align: left;
}

/* ================================================================
   입력칸
   ================================================================ */
.popwrap .he-field-input input[type="text"],
.popwrap .he-field-input input[type="email"],
.popwrap .he-field-input input[type="tel"],
.popwrap .he-field-input input[type="number"],
.popwrap .he-field-input select,
.popwrap .he-field-input textarea {
	width: 100%;
	box-sizing: border-box;
	height: 34px;
	padding: 5px 8px;
	border: 0;
	border-radius: 3px;
	background: rgba(0, 0, 0, .05);
	font-size: 16px;
	line-height: 1.4;
	color: #000;
}
.popwrap .he-field-input textarea { height: auto; padding: 8px; }

.popwrap .he-field-input input::placeholder,
.popwrap .he-field-input textarea::placeholder { color: #999; }

/* 지역·알게된 경로 — 라이브도 입력영역의 절반만 쓴다 */
.popwrap .he-field--select .he-field-input select { width: calc(50% - 8px); }

/* ================================================================
   한글 / 영문 두 칸 (이름 · 회사(학교)명)
   ================================================================
   앞 칸이 라벨을 갖고, 뒤 칸은 라벨 없이 이어 붙는다.
     앞 = 라벨110 + 입력197 = 50% + 47px
     뒤 =            입력197 = 50% - 63px
   두 값의 합에 간격 16px 을 더하면 정확히 한 줄이 된다. */
.popwrap .he-field--half                   { flex: 0 0 calc(50% + 47px); }
.popwrap .he-field--half + .he-field--half { flex: 0 0 calc(50% - 63px); }

/* 뒤 칸의 라벨은 화면에서만 감춘다.
   접수 목록과 메일에는 '이름(영문)' 으로 남아야 하므로 정의에서 지우지 않고,
   display:none 대신 화면 밖으로 밀어 스크린리더는 그대로 읽게 둔다. */
.popwrap .he-field--half + .he-field--half > .he-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.popwrap .he-field--half + .he-field--half > .he-field-desc,
.popwrap .he-field--half + .he-field--half > .he-field-error { margin-left: 0; }

/* ================================================================
   제품 선택 (PipeModeler / DuctModeler) — 한 줄에 둘
   ================================================================ */
.popwrap .he-field--checkbox .he-choices {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0;
}
.popwrap .he-field--checkbox .he-choice {
	flex: 0 0 50%;
	align-items: center;
	gap: 6px;
	font-size: 15px;
}
.popwrap .he-field--checkbox .he-choice input { margin-top: 0; }

/* ================================================================
   제목 · 안내 문구 · 구분선
   ================================================================ */
.popwrap .he-field--html { display: block; text-align: center; }

/* 제목 두 줄.
   테마가 h2·h3 에 padding-bottom:10px 을 주고 있어서, 제품명과 서식 이름
   사이가 한 줄만큼 벌어져 보였다. margin 만 0 으로 해서는 사라지지 않는다. */
.popwrap .he-field--html h2,
.popwrap .he-field--html h3 {
	margin: 0;
	padding: 0;
	font-weight: 400;
	line-height: 1.25;
	color: #000;
}
.popwrap .he-field--html h2 { font-size: 30px; }
.popwrap .he-field--html h3 { font-size: 26px; margin-bottom: 10px; }
.popwrap .he-field--html p {
	margin: 0;
	text-align: left;
	font-size: 14px;
	color: #555;
}

.popwrap .he-field--section { display: block; text-align: left; }

/* ================================================================
   동의 항목
   ================================================================ */
.popwrap .he-field--consent { display: block; text-align: left; }
.popwrap .he-field--consent .he-choice { align-items: flex-start; gap: 6px; font-size: 14px; }

/* 동의 항목 셋은 한 덩어리로 읽혀야 한다.
   .he-form-fields 의 줄 간격 20px 을 그대로 받으면 서로 남남처럼 떨어져 보여서,
   이어지는 항목만 음수 여백으로 8px 까지 당긴다. */
.popwrap .he-field--consent + .he-field--consent { margin-top: -12px; }

/* ================================================================
   제출 버튼 — 사이트 주요 버튼(.btn.unique_bg)과 같은 모양
   ================================================================ */
.popwrap .he-form-actions { margin-top: 24px; }
.popwrap .he-form-submit {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 0;
	border-radius: 3px;
	background: #005f9e;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	transition: background .3s;
	-webkit-appearance: none;
	appearance: none;
}
.popwrap .he-form-submit:hover:not([disabled]) { background: #000; }

/* ================================================================
   좁은 화면 — 라벨을 입력칸 위로 올린다
   ================================================================ */
@media (max-width: 600px) {
	.popwrap .he-field { display: block; }
	.popwrap .he-field-label { display: block; margin-bottom: 6px; }
	.popwrap .he-field--half,
	.popwrap .he-field--half + .he-field--half { flex: 1 1 100%; }
	.popwrap .he-field--half + .he-field--half > .he-field-label {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
	.popwrap .he-field-desc,
	.popwrap .he-field-error { margin-left: 0; }
	.popwrap .he-field--select .he-field-input select { width: 100%; }
}