@charset "utf-8";
/* 2026-10-06 devhwang (KRP1855 모바일 전체화면 검색 레이어)
   상단 검색 버튼을 누르면 뜨는 레이어. 3몰 헤더가 같이 쓴다(마크업은 common/kw_search_layer.js 가 만든다).
   정적 파일 캐시가 길게 잡혀 있어 고칠 때는 내용만 바꾸지 말고 파일명을 바꾼다.
   이 스킨은 전역 box-sizing 이 꺼져 있어 요소마다 border-box 를 직접 준다. */

.kw-sl {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	background: var(--kw-n0);
	flex-direction: column;
	--kw-sl-accent: var(--kw-cyan);
}
.kw-sl.is-open { display: flex; }
.kw-sl--green { --kw-sl-accent: var(--kw-green); }

.kw-sl *, .kw-sl *::before, .kw-sl *::after { box-sizing: border-box; }

/* 입력 줄 — 닫기 / 입력칸 / 검색 */
.kw-sl-bar {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 60px;
	margin: 0;
	padding: 8px 8px 8px 4px;
	border-bottom: 1px solid var(--kw-n3);
	background: var(--kw-n0);
}
.kw-sl-close,
.kw-sl-submit {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.kw-sl-close { color: var(--kw-n10); }
.kw-sl-submit { color: var(--kw-sl-accent); }
.kw-sl-close svg,
.kw-sl-submit svg { width: 24px; height: 24px; display: block; }

.kw-sl-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0 4px;
	border-radius: 22px;
	background: var(--kw-n2);
	border: 1px solid var(--kw-n2);
	display: flex;
	align-items: center;
}
.kw-sl-field:focus-within { border-color: var(--kw-sl-accent); background: var(--kw-n0); }

/* 16px 미만이면 아이폰이 화면을 확대한다 */
.kw-sl-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 22px;
	background: transparent;
	outline: none;
	font-size: var(--kw-fs-base);
	color: var(--kw-n11);
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
}
.kw-sl-input::-webkit-search-decoration,
.kw-sl-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kw-sl-input::placeholder { color: var(--kw-n6); }

/* 최근검색어·자동완성(KRP1856)이 들어갈 자리 */
.kw-sl-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 열려 있는 동안 뒤 화면이 같이 스크롤되지 않게 */
html.kw-sl-lock,
html.kw-sl-lock body { overflow: hidden; }

/* PC 로 모바일 화면을 볼 때는 본문과 같은 640 칸 안에 띄운다(common.css 의 #wrap 규칙과 같은 조건) */
@media (min-width:768px) and (pointer:fine) {
	.kw-sl {
		left: calc((100vw - 640px) / 2);
		right: auto;
		width: 640px;
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
	}
}