/**
 * Noteracker WP Care Agent - Turnstile widget fit
 *
 * 위젯 기본 크기는 normal 300x65, compact 150x140 이다.
 * 워드프레스 로그인 폼 안쪽 폭은 보통 280px 라서 normal 위젯이 그대로 들어가면
 * 오른쪽이 잘리거나 가로 스크롤이 생긴다. 아래 규칙과 함께 쓰이는 스크립트가
 * 부모 폭을 재서 넘칠 때만 비율을 줄여 정확히 맞춘다.
 */

.nrwca-turnstile {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 16px;
	overflow: hidden;
	box-sizing: border-box;
}

/*
 * 여기에 폭 제한을 걸면 실제 내용 폭을 잴 수 없어 크기 맞춤이 동작하지 않는다.
 * 넘치는 부분은 위쪽 감싸개가 잘라서 관리한다.
 */
.nrwca-turnstile .cf-turnstile {
	display: block;
	transform-origin: 0 0;
}

.nrwca-turnstile .cf-turnstile iframe {
	max-width: 100%;
}

/* 위젯을 가운데 정렬하되, 줄어든 상태에서도 남는 여백이 생기지 않게 한다. */
.nrwca-turnstile[data-nrwca-fit="1"] {
	display: flex;
	justify-content: center;
}

/* 워드프레스 로그인 화면 */
body.login .nrwca-turnstile {
	margin: 0 0 16px;
	display: flex;
	justify-content: center;
}

body.login #loginform .nrwca-turnstile,
body.login #registerform .nrwca-turnstile,
body.login #lostpasswordform .nrwca-turnstile {
	margin-top: 4px;
}

/*
 * 워드프레스 로그인 박스 기본 폭(320px)은 안쪽 폭이 약 272px라서 normal 위젯(300px)이
 * 잘리거나 축소된다. 위젯이 원래 크기 그대로 정확히 들어갈 만큼만 로그인 박스를 넓혀,
 * 비율 축소 없이 선명하게 맞춘다. 아주 좁은 화면에서는 화면 폭을 넘지 않게 제한한다.
 */
body.login #login {
	width: 348px;
	max-width: 94vw;
	box-sizing: border-box;
}

/* 댓글 폼과 일반 폼 */
.comment-form .nrwca-turnstile,
form .nrwca-turnstile {
	margin: 12px 0 16px;
}

/* 아주 좁은 화면에서도 넘치지 않게 한다. */
@media (max-width: 400px) {
	.nrwca-turnstile {
		margin-bottom: 12px;
	}
}