/* ==========================================================================
   sections/search.css — 알약형 검색 폼
   ========================================================================== */

.c4-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--c4-search-gap);
	width: 100%;
	max-width: var(--c4-search-w);
	height: var(--c4-search-h);
	padding: var(--c4-search-pad);
	border: var(--c4-search-border) solid var(--c4-color-text);
	border-radius: var(--c4-radius-pill);
	background: var(--c4-color-white);
	transition: border-color .15s ease;
}

.c4-search__icon {
	width: var(--c4-search-icon);
	height: var(--c4-search-icon);
	flex-shrink: 0;
	color: var(--c4-color-text);
}

.c4-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
	appearance: none;
}

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

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

/*
 * 포커스: 마우스 클릭엔 변화 없음, 키보드일 때만 **테두리 색만** 전환한다.
 * 두께·크기 변화 없음, 외곽 링 금지(입력 필드는 테두리 색으로 강조한다).
 */
/* 입력 필드는 외곽 링 대신 테두리 색으로 강조한다 — base.css 의 전역 링을 끈다. */
.c4-search__input:focus,
.c4-search__input:focus-visible { outline: none; }

/*
 * ★ 여기서는 :has() 를 쓴다. 알약 테두리가 **바깥 form** 에 있는데
 *   "키보드일 때만" 이라는 조건은 안쪽 input 의 :focus-visible 에 달려 있어
 *   형제·자손 선택자로는 바깥으로 올라갈 수 없다.
 *   :focus-within 은 마우스 클릭에도 걸려 "마우스엔 변화 없음" 조건을 깬다.
 *   (지우기 버튼 쪽은 형제 선택자로 충분하므로 :has() 를 쓰지 않는다.)
 */
/* 색은 포인트 컬러([사이트 공통] 메인 컬러를 따른다 — 2026-10-13 사용자 지시 "검색바도 관리자에서 지정한 메인 컬러로").
   같은 날 전역 포커스 링(--c4-color-focus)도 포인트 컬러를 따르게 바뀌었다 — 둘이 같은 색이다. */
.c4-search:has(.c4-search__input:focus-visible) { border-color: var(--c4-color-accent); }

/* 지우기(X) — 입력값이 있을 때만 보인다.
   ★ :has() 를 쓰지 않는다. input 이 버튼보다 앞에 있으므로 형제 선택자로 충분하다. */
.c4-search__clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--c4-search-icon);
	height: var(--c4-search-icon);
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c4-color-text);
}

.c4-search__clear svg { width: 100%; height: 100%; }

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