/*
 * Ajebang Form and Survey Builder - 프론트엔드 (폼 + 설문 결과)
 *
 * 색을 하드코딩하지 않는다. 배포용 플러그인이라 어떤 테마 위에 올라갈지 알 수 없고,
 * 밝은 색을 박아두면 다크 테마에서 그대로 튄다.
 *
 * 규칙:
 * - 면/선은 rgba(128,128,128,α) 중립 회색. 밝은 배경에서는 어둡게, 어두운 배경에서는
 *   밝게 섞여 양쪽에서 자연스럽다.
 * - 글자색은 지정하지 않고 테마의 currentColor 를 상속받는다. 흐리게 보여야 하는
 *   부분은 색 대신 opacity 로 처리한다.
 * - 강조색(파랑)과 상태색(빨강/초록)만 고정하되, 배경은 투명도를 얹어 쓴다.
 */

.aj-form-wrap {
	width: 100%;
}

.aj-form-frontend {
	width: 100%;
	margin: 0 0 20px;
}

/* 문항 묶음. 제목이 h3 가 되면서 p 에서 div 로 바뀌었다(p 안에는 h3 를 넣을 수 없다). */
.aj-form-field-wrap {
	margin: 0 0 20px;
}

/*
 * 라벨은 문항 제목(h3) 안에 들어가므로 굵기를 여기서 주지 않는다. 예전에는
 * 여기서 600 을 주는 바람에 선택지 텍스트까지 굵게 나왔다.
 */
.aj-form-frontend label {
	display: block;
	font-weight: inherit;
	margin-bottom: 0;
}

/* 입력 컨트롤: 배경과 글자색은 테마를 따른다. */
.aj-form-frontend input[type="text"],
.aj-form-frontend input[type="email"],
.aj-form-frontend input[type="number"],
.aj-form-frontend input[type="date"],
.aj-form-frontend textarea,
.aj-form-frontend select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid rgba( 128, 128, 128, .45 );
	border-radius: 4px;
	background: rgba( 128, 128, 128, .06 );
	color: inherit;
	box-sizing: border-box;
}

.aj-form-frontend input:focus,
.aj-form-frontend textarea:focus,
.aj-form-frontend select:focus {
	border-color: #2271b1;
	outline: 2px solid rgba( 34, 113, 177, .35 );
	outline-offset: 1px;
}

.aj-form-req {
	color: #e2565a;
}

/* 폼/설문 안내 내용 */
.aj-form-description {
	margin-bottom: 20px;
	padding: 14px 16px;
	background: rgba( 128, 128, 128, .1 );
	border-left: 4px solid #2271b1;
	border-radius: 0 4px 4px 0;
}

.aj-form-description p:last-child {
	margin-bottom: 0;
}

/* 스타일링된 radio / checkbox */
.aj-form-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

/* 선택지 텍스트는 본문과 같은 굵기다. 테마가 label 을 굵게 잡는 경우가 있어
   선택자를 한 단계 더 붙여 확실히 이긴다. */
.aj-form-choice,
.aj-form-frontend .aj-form-choice,
.aj-form-frontend .aj-form-choice .aj-form-choice-text {
	font-weight: normal;
}

.aj-form-choice {
	display: block;
	margin: 0;
	cursor: pointer;
}

/* 네이티브 컨트롤은 숨기고 박스로 대체 */
.aj-form-choice input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.aj-form-choice-box {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba( 128, 128, 128, .4 );
	border-radius: 6px;
	background: rgba( 128, 128, 128, .06 );
	transition: border-color .15s, background .15s, box-shadow .15s;
}

.aj-form-choice:hover .aj-form-choice-box {
	border-color: #2271b1;
	background: rgba( 34, 113, 177, .12 );
}

/* 체크 표시 마커 */
.aj-form-choice-mark {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 2px solid rgba( 128, 128, 128, .65 );
	background: transparent;
	position: relative;
	transition: border-color .15s, background .15s;
}

.aj-form-choices-radio .aj-form-choice-mark {
	border-radius: 50%;
}

.aj-form-choices-checkbox .aj-form-choice-mark {
	border-radius: 4px;
}

.aj-form-choice-mark::after {
	content: "";
	position: absolute;
	opacity: 0;
	transition: opacity .15s;
}

/* 라디오: 안쪽 점. 채워진 파란 원 위에 놓이므로 흰색으로 고정한다. */
.aj-form-choices-radio .aj-form-choice-mark::after {
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}

/* 체크박스: 체크 표시. 위와 같은 이유로 흰색 고정. */
.aj-form-choices-checkbox .aj-form-choice-mark::after {
	top: 1px;
	left: 5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* 선택(checked) 상태 */
.aj-form-choice input:checked + .aj-form-choice-box {
	border-color: #2271b1;
	background: rgba( 34, 113, 177, .18 );
	box-shadow: 0 0 0 1px #2271b1 inset;
}

.aj-form-choice input:checked + .aj-form-choice-box .aj-form-choice-mark {
	border-color: #2271b1;
	background: #2271b1;
}

.aj-form-choice input:checked + .aj-form-choice-box .aj-form-choice-mark::after {
	opacity: 1;
}

/* 키보드 포커스 표시 */
.aj-form-choice input:focus + .aj-form-choice-box {
	box-shadow: 0 0 0 2px rgba( 34, 113, 177, .4 );
}

.aj-form-choice-text {
	line-height: 1.3;
}

.aj-form-submit-btn {
	background: #2271b1;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 10px 22px;
	font-size: 15px;
	cursor: pointer;
}

.aj-form-submit-btn:hover {
	background: #135e96;
}

.aj-form-submit-btn:disabled {
	opacity: .55;
	cursor: default;
}

/* AJAX 전송 중 */
.aj-form-submit-btn.is-busy {
	opacity: .75;
}

.aj-form-submit-btn.is-busy::after {
	content: "…";
}

.aj-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * 자동/항목별 제출에서는 버튼을 숨긴다. 단 JS 가 실제로 동작할 때만
 * (html.aj-form-js 는 스크립트가 붙인다). JS 가 없으면 버튼이 보여야
 * 제출할 방법이 남는다.
 *
 * JS 로 직접 숨기지 않고 CSS 로 처리하는 이유: 하이드레이션이 wrap 내부를
 * 통째로 교체하므로, 요소에 직접 준 스타일은 사라진다.
 */
.aj-form-js .aj-form-frontend[data-aj-autosubmit="1"] .aj-form-actions,
.aj-form-js .aj-form-frontend[data-aj-perfield="1"] .aj-form-actions {
	display: none;
}

/*
 * 상태 박스. 글자색은 테마를 따르고 배경/테두리로만 의미를 전달한다.
 * 밝은 배경색 + 어두운 글자색 조합을 쓰면 다크 테마에서 읽을 수 없게 된다.
 */
.aj-form-notice,
.aj-form-error,
.aj-form-success {
	padding: 12px 16px;
	border-radius: 4px;
	margin-bottom: 16px;
	border: 1px solid transparent;
}

/* 이미 참여한 방문자 안내 */
.aj-form-notice {
	background: rgba( 34, 113, 177, .12 );
	border-color: rgba( 34, 113, 177, .5 );
}

.aj-form-error {
	background: rgba( 214, 54, 56, .12 );
	border-color: rgba( 214, 54, 56, .55 );
}

.aj-form-success {
	background: rgba( 70, 180, 90, .14 );
	border-color: rgba( 70, 180, 90, .5 );
}

/* 설문 결과 */
.aj-form-results {
	width: 100%;
}

.aj-form-results-total {
	font-size: 13px;
	opacity: .7;
}

/*
 * 질문마다 카드로 감싼다. 여러 질문이 이어지면 어디까지가 한 질문인지
 * 구분되지 않아 가독성이 크게 떨어진다.
 */
.aj-form-result-block {
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid rgba( 128, 128, 128, .35 );
	border-radius: 8px;
	background: rgba( 128, 128, 128, .04 );
}

.aj-form-result-block:last-child {
	margin-bottom: 0;
}

.aj-form-result-title {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba( 128, 128, 128, .2 );
	font-size: 1.05em;
	line-height: 1.4;
}

.aj-form-result-count {
	font-weight: 400;
	font-size: .8em;
	opacity: .65;
	white-space: nowrap;
}

/* 항목별 제출: 답한 질문은 카드로 바뀐다. */
.aj-form-field-done {
	margin-bottom: 18px;
}

.aj-form-field-sending {
	opacity: .6;
	pointer-events: none;
}

.aj-form-bars {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * 옵션 라벨은 한 줄을 통째로 쓰고, 막대와 수치는 그 아래 줄에 놓는다.
 * 라벨과 막대를 좌우로 나누면 긴 보기글이 좁은 칼럼에서 여러 줄로 접힌다.
 */
.aj-form-bar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-bottom: 14px;
}

.aj-form-bar-label {
	flex: 0 0 100%;
	font-size: 14px;
	line-height: 1.45;
	word-break: break-word;
}

.aj-form-bar-track {
	flex: 1 1 auto;
	min-width: 0;
	height: 18px;
	background: rgba( 128, 128, 128, .25 );
	border-radius: 3px;
	overflow: hidden;
}

.aj-form-bar-fill {
	display: block;
	height: 100%;
	background: #2271b1;
	min-width: 2px;
}

.aj-form-bar-value {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
	font-size: 13px;
	opacity: .75;
}

.aj-form-stat-note {
	opacity: .7;
}

/* ==========================================================================
   1.8.0 — 제목 / 마감 / 관련 링크 / 목록
   색 규칙은 이 파일 맨 위 주석과 같다. 중립 회색 + 투명도로만 처리한다.
   ========================================================================== */

/* 숏코드가 제목을 출력할 때. 테마의 heading 크기를 그대로 쓰지 않고
   폼 내부 요소로 보이도록 살짝 줄인다. */
.aj-form-title {
	margin: 0 0 12px;
	font-size: 1.35em;
	line-height: 1.3;
}

/* 마감 예정 안내 */
.aj-form-deadline {
	margin: 0 0 16px;
	font-size: .9em;
	opacity: .75;
}

.aj-form-deadline-left {
	white-space: nowrap;
}

/* 마감된 폼 안내 */
.aj-form-closed-notice {
	background: rgba( 128, 128, 128, .14 );
	border-color: rgba( 128, 128, 128, .45 );
}

/* 초안 미리보기(관리자에게만 보임) */
.aj-form-draft-notice {
	background: rgba( 220, 150, 30, .14 );
	border-color: rgba( 220, 150, 30, .55 );
}

/* 관련 링크 */
.aj-form-links {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid rgba( 128, 128, 128, .35 );
	border-radius: 8px;
	background: rgba( 128, 128, 128, .04 );
}

.aj-form-links-title {
	margin: 0 0 8px;
	font-size: .95em;
	opacity: .8;
}

.aj-form-links-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-form-links-list li {
	margin: 0 0 6px;
	padding: 0;
}

.aj-form-links-list li:last-child {
	margin-bottom: 0;
}

.aj-form-link {
	word-break: break-word;
}

/* --- 목록 숏코드 [aj_form_list] ------------------------------------------ */

.aj-form-list-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-form-list-item {
	margin: 0 0 12px;
	padding: 16px 18px;
	border: 1px solid rgba( 128, 128, 128, .35 );
	border-radius: 8px;
	background: rgba( 128, 128, 128, .04 );
}

.aj-form-list-item:last-child {
	margin-bottom: 0;
}

/* 마감된 항목은 뒤로 물러나 보이게. 글자색을 바꾸지 않고 투명도로만 처리한다. */
.aj-form-list-item.is-closed {
	opacity: .72;
}

.aj-form-list-link {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	text-decoration: none;
	color: inherit;
}

.aj-form-list-link:hover .aj-form-list-title,
.aj-form-list-link:focus .aj-form-list-title {
	text-decoration: underline;
}

.aj-form-list-title {
	font-size: 1.1em;
	font-weight: 600;
}

.aj-form-list-badge {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: .75em;
	font-weight: 600;
	line-height: 1.6;
	border: 1px solid transparent;
}

.aj-form-badge-open {
	background: rgba( 70, 180, 90, .16 );
	border-color: rgba( 70, 180, 90, .5 );
}

.aj-form-badge-closed {
	background: rgba( 128, 128, 128, .16 );
	border-color: rgba( 128, 128, 128, .5 );
}

.aj-form-list-excerpt {
	margin: 8px 0 0;
	font-size: .92em;
	opacity: .8;
}

.aj-form-list-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 10px 0 0;
	font-size: .85em;
	opacity: .7;
}

.aj-form-list-empty p {
	margin: 0;
	opacity: .7;
}

/* ==========================================================================
   1.8.1 — 제목 계층 / 대표 이미지 / 목록 썸네일
   ========================================================================== */

/*
 * 제목 계층: 폼 제목(h2, 바로가기 페이지는 h1) > 문항 제목(h3).
 * 테마의 heading 크기를 그대로 쓰면 폼 안에서 지나치게 커지므로 em 으로 줄인다.
 */
.aj-form-field-title {
	margin: 0 0 6px;
	font-size: 1.05em;
	line-height: 1.4;
	font-weight: 600;
}

.aj-form-field-title label {
	display: inline;
}

.aj-form-links-title {
	font-size: .95em;
	font-weight: 600;
}

/* 대표 이미지 */
.aj-form-image-wrap {
	margin: 0 0 16px;
}

.aj-form-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* 목록: 이미지가 있는 항목만 2단 */
.aj-form-list-item.has-image {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.aj-form-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

.aj-form-list-thumb {
	flex: 0 0 auto;
	display: block;
	width: 140px;
	line-height: 0;
}

.aj-form-list-thumb-img {
	width: 100%;
	height: 100%;
	max-height: 110px;
	object-fit: cover;
	border-radius: 6px;
}

/* 좁은 화면에서는 썸네일을 위로 올리고 폭을 채운다. */
@media ( max-width: 600px ) {
	.aj-form-list-item.has-image {
		flex-direction: column;
		gap: 12px;
	}

	.aj-form-list-thumb {
		width: 100%;
	}

	.aj-form-list-thumb-img {
		max-height: 180px;
	}
}