@charset "utf-8";
/* 2026-10-06 devhwang (KRP1855 모바일 전체화면 검색 레이어 / KRP1856 최근검색어 자동완성)
   상단 검색 버튼을 누르면 뜨는 레이어. 3몰 헤더가 같이 쓴다(마크업은 common/kw_search_layer_v2.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); }

/* 입력 줄 아래 — 비어 있으면 최근검색어, 입력 중이면 자동완성 */
.kw-sl-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.kw-sl [hidden] { display: none !important; }

/* 최근검색어 — 한 줄로 옆으로 넘겨 본다 */
.kw-sl-recent { padding: 16px 0 8px; }
.kw-sl-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	margin-bottom: 10px;
}
.kw-sl-sec-title {
	margin: 0;
	font-size: var(--kw-fs-base);
	font-weight: var(--kw-fw-bold);
	color: var(--kw-n11);
}
.kw-sl-recent-clear {
	border: 0;
	background: none;
	padding: 8px 0 8px 12px;
	font-size: var(--kw-fs-sm);
	color: var(--kw-n7);
	cursor: pointer;
}
.kw-sl-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 16px 4px;
}
.kw-sl-chips::-webkit-scrollbar { display: none; }
.kw-sl-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 36px;
	max-width: 220px;
	border: 1px solid var(--kw-n4);
	border-radius: 18px;
	background: var(--kw-n0);
}
.kw-sl-chip-go {
	min-width: 0;
	height: 100%;
	padding: 0 4px 0 14px;
	border: 0;
	background: none;
	font-size: var(--kw-fs-sm);
	color: var(--kw-n10);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.kw-sl-chip-del {
	flex: 0 0 32px;
	width: 32px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0 18px 18px 0;
	background: none;
	color: var(--kw-n6);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.kw-sl-chip-del svg { width: 14px; height: 14px; display: block; }
.kw-sl-recent-empty {
	display: none;
	margin: 0;
	padding: 4px 16px;
	font-size: var(--kw-fs-sm);
	color: var(--kw-n6);
}
.kw-sl-recent.is-empty .kw-sl-chips,
.kw-sl-recent.is-empty .kw-sl-recent-clear { display: none; }
.kw-sl-recent.is-empty .kw-sl-recent-empty { display: block; }

/* 자동완성 */
.kw-sl-suggest { list-style: none; margin: 0; padding: 4px 0; }
.kw-sl-suggest-go {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border: 0;
	background: none;
	text-align: left;
	font-size: var(--kw-fs-base);
	color: var(--kw-n10);
	cursor: pointer;
}
.kw-sl-suggest-go:active { background: var(--kw-n1); }
.kw-sl-suggest-go svg { flex: 0 0 18px; width: 18px; height: 18px; margin-right: 12px; color: var(--kw-n6); }
.kw-sl-suggest-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-sl-suggest-text em { font-style: normal; font-weight: var(--kw-fw-bold); color: var(--kw-sl-accent); }

/* 열려 있는 동안 뒤 화면이 같이 스크롤되지 않게 */
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);
	}
}