@charset "utf-8";
/* 포트폴리오 목록 — 통합검색 (분류 탭 자리)
   ============================================================================
   ※ 다른 분이 손대는 파일(style.css)과 섞이지 않게 따로 두었다.
     나중에 합칠 때 이 파일만 들어내면 된다.

   자리·크기는 없앤 분류 탭(.work-filter)이 쓰던 그대로다 —
   폭 1479 가운데, 위 여백 64, 높이 51 의 알약 모양.                          */

.work-search {
	position: relative;
	max-width: 1679px;
	margin: 64px auto 0;
	padding: 0 var(--gutter, 24px);
}

/* 알약 — 탭과 같은 그러데이션 테두리 */
.work-search__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 62px;
	padding: 0 8px 0 24px;
	border: 1px solid transparent;
	border-radius: 300px;
	background:
		linear-gradient(#141415, #141415) padding-box,
		linear-gradient(90deg, #2e5bff 0%, #8b4dff 52%, #c84bff 100%) border-box;
	box-shadow: 0 0 24px rgba(80, 70, 255, .18);
	transition: box-shadow .3s ease;
}
.work-search__inner:focus-within { box-shadow: 0 0 34px rgba(120, 90, 255, .45); }

.work-search__ico {
	flex: none;
	width: 24px;
	height: 24px;
	color: rgba(255, 255, 255, .55);
}

.work-search__in {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	color: var(--c-white, #fff);
	font-family: inherit;
	font-size: clamp(14.4px, 1.34vw, 19.3px);
	font-weight: 500;
	line-height: 1.4;
}
.work-search__in::placeholder { color: rgba(255, 255, 255, .38); font-weight: 400; }
.work-search__in:focus { outline: none; }
/* 브라우저가 넣어 주는 X 는 우리 것으로 갈음한다 */
.work-search__in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.work-search__clear {
	flex: none;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .8);
	font-size: 19px;
	line-height: 30px;
	cursor: pointer;
	transition: background-color .2s ease;
}
.work-search__clear:hover { background: rgba(255, 255, 255, .26); }
.work-search__clear[hidden] { display: none; }

.work-search__go {
	flex: none;
	height: 46px;
	padding: 0 28px;
	border: 0;
	border-radius: 300px;
	background: linear-gradient(90deg, #2e5bff 0%, #8b4dff 52%, #c84bff 100%);
	color: #fff;
	font-family: inherit;
	font-size: clamp(13px, 1.118vw, 16.1px);
	font-weight: 700;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}
.work-search__go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.work-search__go:active { transform: translateY(0); }

/* 몇 건 찾았는지 */
.work-search__hint {
	margin: 14px 2px 0;
	color: rgba(255, 255, 255, .5);
	font-size: clamp(13px, 1.05vw, 15px);
	font-weight: 500;
	line-height: 1.6;
}
.work-search__hint b { color: rgba(255, 255, 255, .85); font-weight: 700; }
.work-search__all {
	margin-left: 10px;
	color: rgba(255, 255, 255, .7);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.work-search__all:hover { color: #fff; }

/* 찾는 중 */
.work-search.is-busy .work-search__ico { opacity: .4; }

@media (max-width: 900px) {
	.work-search { margin-top: 40px; padding: 0 24px; }
	.work-search__inner { height: 54px; padding: 0 6px 0 18px; gap: 8px; }
	.work-search__go { height: 40px; padding: 0 18px; }
	.work-search__ico { width: 20px; height: 20px; }
}

/* ---------- more 단추 감추기 ----------
   style.css 의 .work-more 가 display:flex 라 브라우저 기본값인
   [hidden] { display:none } 을 눌러 버린다. 그래서 더 볼 것이 없어도
   단추가 그대로 남아 있었다. 여기서 다시 감춘다.
   (.work-search__clear 와 같은 이유·같은 방식) */
.work-more[hidden] { display: none; }