/*
 * 예전 모바일 헤더 개선 (body.m-hdr-v1 = 모바일 + 앱 아님 + is-app-v2 아님) — layout.html 에서 클래스 부여
 * 1) "약준모" 글자 → 흰색 로고(하트 + 약준모, images/main_logo_mo.svg)
 * 2) 검색: 아이콘을 누르면 상단 바 자리에 입력칸이 오른쪽→왼쪽으로 펼쳐지고 아래로 인기 검색어 패널
 *    (드롭다운의 입력칸 하나를 주 검색창으로 사용. 검색 주소·값은 그대로)
 * PC·앱·새 화면에는 적용 안 됨.
 */

/* 새 로고 이미지는 이 화면에서만 보인다 (PC 는 기존 로고 그대로) */
#layout_header .title_link .logo-mw { display: none; }

@media (max-width: 768px) {
	/* ── 로고 ── */
	body.m-hdr-v1 #layout_header .header_left a.title_link {
		display: inline-flex !important;
		align-items: center;
		height: 30px;
		margin-right: 2px;
		vertical-align: middle;
		transition: transform .28s ease, opacity .2s ease;
	}
	body.m-hdr-v1 #layout_header .header_left a.title_link .logo-mw {
		display: block;
		width: auto;
		height: 21px;
		filter: brightness(0) invert(1);
	}
	/* 글자는 화면 낭독용으로만 남김 */
	body.m-hdr-v1 #layout_header .header_left a.title_link .logo-name {
		position: absolute !important;
		width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); white-space: nowrap;
	}
	body.m-hdr-v1 #layout_header .header_left .mobile_search .mobile_search_open { color: #fff !important; }

	/* 검색 중에는 로고가 왼쪽으로 밀리며 사라짐 */
	body.m-hdr-v1.m-search-open #layout_header .header_left a.title_link { transform: translateX(-18px); opacity: 0; }

	/* 헤더 안의 작은 입력칸은 드롭다운 입력칸과 중복이라 펼치지 않음 (검색 버튼은 그대로) */
	body.m-hdr-v1 .mobile-search-container.active .mobile_search input[type=text] { display: none !important; }

	/* ── 검색 패널 (화면 맨 위에 고정) ── */
	body.m-hdr-v1 .mobile-search-dropdown {
		display: block !important;
		position: fixed;
		top: 0; left: 0; right: 0;
		width: auto;
		max-height: 78vh;
		border: 0;
		border-radius: 0 0 18px 18px;
		background: #fff;
		box-shadow: 0 12px 30px rgba(20, 30, 50, .18);
		z-index: 10070;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease, visibility 0s linear .32s;
	}
	body.m-hdr-v1 .mobile-search-container.active .mobile-search-dropdown {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: opacity .15s ease, visibility 0s linear 0s;
	}

	/* 맨 윗줄: 청록 바 그대로, 흰 입력칸이 오른쪽에서 왼쪽으로 펼쳐짐 */
	body.m-hdr-v1 .search-dropdown-header {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 54px;
		padding: 0 12px 0 14px;
		box-sizing: border-box;
		background: #48a7bb;
	}
	body.m-hdr-v1 .search-dropdown-form {
		position: relative;
		flex: 1;
		min-width: 0;
		margin: 0;
		clip-path: inset(0 0 0 100% round 20px);
		transition: clip-path .32s cubic-bezier(.3, .8, .3, 1);
	}
	body.m-hdr-v1 .mobile-search-container.active .search-dropdown-form { clip-path: inset(0 0 0 0 round 20px); }
	body.m-hdr-v1 .search-dropdown-icon {
		position: absolute; left: 14px; top: 50%;
		margin-top: -7px;
		color: #8a97a8; font-size: 14px; line-height: 14px;
		pointer-events: none;
	}
	body.m-hdr-v1 .search-dropdown-input {
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 38px;
		margin: 0;
		padding: 0 14px 0 36px;
		border: 0 !important;
		border-radius: 20px;
		background: #fff;
		box-shadow: none;
		color: #1e2b45 !important;
		font-size: 16px; /* 16px 미만이면 iOS 가 화면을 확대함 */
		line-height: 38px;
		outline: none;
		-webkit-appearance: none;
	}
	body.m-hdr-v1 .search-dropdown-input::placeholder { color: #9aa6b5; }
	body.m-hdr-v1 .search-dropdown-close {
		flex: none;
		margin: 0;
		padding: 8px 2px;
		border: 0;
		background: none;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
		opacity: 0;
		transform: translateX(10px);
		transition: opacity .2s ease .12s, transform .25s ease .12s;
	}
	body.m-hdr-v1 .mobile-search-container.active .search-dropdown-close { opacity: 1; transform: none; }

	/* 아래 인기 검색어: 살짝 내려오며 나타남 */
	body.m-hdr-v1 .mobile-search-section {
		padding: 14px 16px 10px;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .25s ease .1s, transform .3s ease .1s;
	}
	body.m-hdr-v1 .mobile-search-container.active .mobile-search-section { opacity: 1; transform: none; }
	body.m-hdr-v1 .mobile-search-title { color: #1e2b45; font-size: 13px; font-weight: 800; }
	body.m-hdr-v1 .mobile-search-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
	body.m-hdr-v1 .mobile-search-list li a { padding: 9px 6px; border-radius: 10px; }

	/* 바깥 어둡게: 부드럽게 */
	body.m-hdr-v1 .mobile-search-overlay {
		display: block !important;
		z-index: 10060;
		background: rgba(14, 22, 38, .4);
		visibility: hidden;
		opacity: 0;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}
	body.m-hdr-v1 .mobile-search-container.active .mobile-search-overlay {
		visibility: visible;
		opacity: 1;
		transition: opacity .25s ease, visibility 0s linear 0s;
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	body.m-hdr-v1 #layout_header .header_left a.title_link,
	body.m-hdr-v1 .search-dropdown-form,
	body.m-hdr-v1 .search-dropdown-close,
	body.m-hdr-v1 .mobile-search-section,
	body.m-hdr-v1 .mobile-search-overlay,
	body.m-hdr-v1 .mobile-search-dropdown { transition: none; }
}