/*
 * search-form.css — 알약형 검색 폼
 *
 * ★★ 테두리·radius·높이는 바깥 컨테이너가 아니라 <input> 자신에게 준다.
 *   컨테이너에 테두리를 주면 아래 포커스 규칙이 아무 효과도 내지 못한다(input 에 테두리가 없으므로).
 *   아이콘 둘은 position:absolute 로 얹고, input 의 좌우 패딩으로 자리를 비운다.
 */

.c4-search {
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--c4-search-w);
}

.c4-search__input {
	width: 100%;
	height: var(--c4-search-h);
	/* 좌측은 돋보기(16) + 간격(16) 만큼 더 비우고, 우측은 지우기 버튼 자리를 비운다. */
	padding: var(--c4-search-pad-y)
		calc(var(--c4-search-pad-x) + var(--c4-search-icon) + var(--c4-search-icon-gap))
		var(--c4-search-pad-y)
		calc(var(--c4-search-pad-x) + var(--c4-search-icon) + var(--c4-search-icon-gap));
	border: var(--c4-search-border-w) solid var(--c4-color-text);
	border-radius: var(--c4-radius-pill);
	background: var(--c4-color-white);
	color: var(--c4-color-text);
	font-size: var(--c4-fz-body2);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
	appearance: none;
}

.c4-search__input::placeholder {
	color: var(--c4-color-text-faint);
	opacity: 1;
}

/*
 * 포커스는 테두리 색만 바꾼다(두께·크기 변화 없음, 외곽 링 금지).
 *
 * ★ 텍스트 입력처럼 키보드 입력을 기대하는 요소는 클릭으로 포커스해도 :focus-visible 에 매칭된다 —
 *   브라우저 표준 동작이라 CSS 로는 가를 수 없다. 클릭이든 탭이든 테두리 색이 바뀌는 것이 정상이다.
 */
.c4-search__input:focus-visible {
	outline: none;
	border-color: var(--c4-color-focus);
}

/* 브라우저 기본 지우기 버튼을 숨기고 커스텀 아이콘을 쓴다. */
.c4-search__input::-webkit-search-cancel-button,
.c4-search__input::-webkit-search-decoration {
	appearance: none;
	display: none;
}

.c4-search__icon {
	position: absolute;
	top: 50%;
	left: var(--c4-search-pad-x);
	transform: translateY(-50%);
	display: flex;
	width: var(--c4-search-icon);
	height: var(--c4-search-icon);
	color: var(--c4-color-text);
	pointer-events: none;
}

/*
 * ★★ 후속 형제(~) 선택자라 마크업에서 <input> 이 이 버튼보다 앞에 있어야 동작한다.
 *   (여기서는 :has() 를 쓰지 않는다 — 필요 없고 폴백만 늘어난다.)
 */
.c4-search__clear {
	position: absolute;
	top: 50%;
	right: var(--c4-search-pad-x);
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--c4-search-icon);
	height: var(--c4-search-icon);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c4-color-text);
	cursor: pointer;
}

.c4-search__input:not(:placeholder-shown) ~ .c4-search__clear {
	display: flex;
}