미디어위키:Common.js - 편집 역사

2026년 1월 17일 (토) 19:01에 Demian님의 편집

2026-01-17T19:01:35Z

← 이전 판		2026년 1월 17일 (토) 19:01 판
3번째 줄:		3번째 줄:
	/Autofocus on when clicking search button/		/Autofocus on when clicking search button/
	(function () {		(function () {
	const ~~DETAILS~~ = ~~document.getElementById(~~'citizen-search-details');		const DETAILS_ID = 'citizen-search-details';
	const TOGGLE_SEL = '#citizen-search-details > summary.citizen-dropdown-summary';		const TOGGLE_SEL = '#citizen-search-details > summary.citizen-dropdown-summary';
	const ~~CARD_ID = 'citizen-search__card';~~		const REAL_INPUT_ID = 'searchInput';
	~~const INPUT_ID~~ = 'searchInput';

	if (~~!DETAILS~~) return;		function ensureProxy() {
			let p = document.getElementById('mw-search-proxy');
			if (p) return p;

	~~function isVisible~~(el) {		p = document.createElement('input');
	~~if (!el) return false~~;		p.id = 'mw-search-proxy';
	~~const r~~ = el.~~getBoundingClientRect()~~;		p.type = 'search';
	~~return r~~.~~width > 0 && r.height > 0~~;		p.autocomplete = 'off';
	}		p.setAttribute('aria-hidden', 'true');

	~~function focusInput~~(~~tag~~) {		// "안 보이지만" 포커스는 가능한 상태로 (display:none / visibility:hidden 쓰면 포커스 자체가 막힘)
	~~const input~~ = ~~document~~.~~getElementById(INPUT_ID)~~;		p.style.position = 'fixed';
	~~if (!input) return false~~;		p.style.left = '-9999px';
	~~if (!isVisible(input)) return false~~;		p.style.top = '0';
			p.style.width = '1px';
			p.style.height = '1px';
			p.style.opacity = '0';
			p.style.pointerEvents = 'none';

	~~// iOS-friendly focus~~		document.documentElement.appendChild(p);
	~~input~~.~~focus({ preventScroll: true });~~		return p;
	~~input~~.~~click~~();

	return ~~document.activeElement === input~~;
	}		}

	function ~~focusWhenShown~~() {		function focusRealSoon() {
	const ~~card~~ = document.getElementById(~~CARD_ID~~);		const details = document.getElementById(DETAILS_ID);
	const ~~input~~ = document.getElementById(~~INPUT_ID~~);		const real = document.getElementById(REAL_INPUT_ID);
	if (!~~card~~ \|\| !~~input~~) return;		if (!details \|\| !real) return;

	~~// 1) 이미 보이면 즉시~~
	~~if (focusInput('immediate')) return;~~

	~~// 2) Citizen이 열릴 때 CSS transition/animation 타면 그 끝에서 포커스~~
	~~const onDone = () => {~~
	~~if (focusInput('transitionend')) cleanup();~~
	};

	~~const cleanup =~~ (~~) => {~~		// 열기 보장
	~~card~~.~~removeEventListener('transitionend', onDone, true~~);		if (!details.open) details.open = true;
	~~card~~.~~removeEventListener('animationend', onDone,~~ true);
	~~clearInterval(poll);~~
	};

	~~card.addEventListener~~(~~'transitionend', onDone, true~~);		// 레이아웃 한 번 강제 (iOS에 은근 도움 됨)
	~~card~~.~~addEventListener('animationend', onDone, true)~~;		void real.offsetHeight;

	// ~~3) 그래도 안 잡히면 짧은 폴링 (최대 1초)~~		// 키보드가 이미 떠있으면 real focus가 더 잘 붙는 편
	~~const start = Date~~.~~now~~();		real.focus({ preventScroll: true });
	~~const poll = setInterval(() => {~~		real.click();
	~~if (focusInput('poll')) return cleanup();~~
	~~if (Date~~.~~now~~(~~) - start > 1000) cleanup();~~
	~~}, 50~~);
	}		}

	~~// 핵심: "사용자 클릭" 이벤트 안에서 열고, 그 다음 '보이는 순간'에 포커스~~		function onToggleGesture(e) {
	function ~~openAndQueueFocus~~(e) {
	const hit = e.target.closest(TOGGLE_SEL);		const hit = e.target.closest(TOGGLE_SEL);
	if (!hit) return;		if (!hit) return;

	// ~~여기서 preventDefault를 걸면 Citizen 토글 로직이 꼬일 수 있어서~~		// 1) 유저 제스처 안에서 "input focus"를 먼저 한 번 만들어줌
	// ~~일단은 open만 보장하고, Citizen이 열어주는 흐름도 같이 허용.~~		const proxy = ensureProxy();
	if (~~!DETAILS.open~~) ~~DETAILS.open = true~~;
			try {
			proxy.focus({ preventScroll: true });
			proxy.click();
			} catch (_) {}

			// 2) 같은 제스처 안에서 real focus도 바로 시도
			focusRealSoon();

	~~focusWhenShown~~();		// 3) 그래도 Citizen이 애니메이션/상태 적용을 늦게 하면 다음 프레임에 한 번 더
			requestAnimationFrame(() => {
			focusRealSoon();
			// proxy는 필요 없으니 정리
			try { proxy.blur(); } catch (_) {}
			});
	}		}

	// ~~iOS: touchstart가~~ 제일 ~~안정적~~		// iOS에서 제일 잘 먹는 건 touchstart
	document.addEventListener('touchstart', ~~openAndQueueFocus~~, { capture: true, passive: true });		document.addEventListener('touchstart', onToggleGesture, { capture: true, passive: true });
	document.addEventListener('click', ~~openAndQueueFocus~~, true);		document.addEventListener('click', onToggleGesture, true);
	})();		})();

2026년 1월 17일 (토) 18:59에 Demian님의 편집

2026-01-17T18:59:43Z

차이 보기

2026년 1월 17일 (토) 18:53에 Demian님의 편집

2026-01-17T18:53:41Z

← 이전 판		2026년 1월 17일 (토) 18:53 판
1번째 줄:		1번째 줄:
	/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */		/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */

	/**
	* Citizen search: open + focus immediately on user gesture (iOS-friendly)
	* - Intercepts tap on the <summary> so focus stays within the gesture stack
	* - Manually opens <details> and focuses #searchInput right away
	*/
	(function () {		(function () {
	const DETAILS_ID = 'citizen-search-details';		const DETAILS_ID = 'citizen-search-details';
11번째 줄:		6번째 줄:
	const INPUT_ID = 'searchInput';		const INPUT_ID = 'searchInput';

	function ~~openAndFocus~~() {		// 화면에 디버그 패널 띄우기 (모바일에서도 보이게)
			function panel() {
			let el = document.getElementById('nova-search-debug');
			if (el) return el;
			el = document.createElement('div');
			el.id = 'nova-search-debug';
			el.style.cssText =
			'position:fixed;left:8px;right:8px;bottom:8px;z-index:999999;' +
			'padding:10px;border-radius:12px;background:rgba(0,0,0,.85);' +
			'color:#fff;font:12px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial;' +
			'white-space:pre-wrap;max-height:40vh;overflow:auto;';
			el.textContent = '[search debug] ready\n';
			document.documentElement.appendChild(el);
			return el;
			}

			function log(msg) {
			const el = panel();
			const t = new Date().toISOString().slice(11, 19);
			el.textContent += `${t} ${msg}\n`;
			el.scrollTop = el.scrollHeight;
			}

			function state(tag) {
			const details = document.getElementById(DETAILS_ID);
			const input = document.getElementById(INPUT_ID);

			const open = details ? !!details.open : null;
			const inputExists = !!input;

			let vis = null, dis = null, rect = null, ae = null;
			if (input) {
			const r = input.getBoundingClientRect();
			rect = `${Math.round(r.width)}x${Math.round(r.height)}`;
			dis = !!input.disabled;
			vis = !!(r.width > 0 && r.height > 0);
			}
			ae = document.activeElement ? (document.activeElement.id \|\| document.activeElement.tagName) : null;

			log(`${tag} \| details.open=${open} \| input=${inputExists} vis=${vis} rect=${rect} disabled=${dis} \| active=${ae}`);
			}

			function tryFocus(where) {
	const details = document.getElementById(DETAILS_ID);		const details = document.getElementById(DETAILS_ID);
	const input = document.getElementById(INPUT_ID);		const input = document.getElementById(INPUT_ID);

	if (~~!details \|\| !input~~) ~~return~~;		state(`before focus (${where})`);

	// ~~Open immediately (within the same user gesture)~~		if (!details) { log('NO details element'); return; }
			if (!input) { log('NO input element'); return; }

			// 열려있지 않으면 강제로 열기
	if (!details.open) details.open = true;		if (!details.open) details.open = true;

	// ~~Force a tiny layout sync so iOS is less flaky about focus~~		// iOS에서 가끔 필요: 레이아웃 동기화
	~~// (Reading offsetHeight triggers reflow; yes it's old-school, yes it works)~~
	void input.offsetHeight;		void input.offsetHeight;

	input.focus({ preventScroll: true });		try {
	input.click(); ~~// helps some mobile engines trigger the keyboard~~		input.focus({ preventScroll: true });
			input.click();
			} catch (e) {
			log('focus threw: ' + e);
			}

			state(`after focus (${where})`);
	}		}

	// ~~Use the earliest possible gesture event~~		// 1) 페이지 로드 자체 확인
			log('Common.js loaded');
			state('initial');

			// 2) summary 탭 이벤트가 들어오는지 확인 (passive:false 중요)
	document.addEventListener(		document.addEventListener(
	'touchstart',		'touchstart',
	function (e) {		function (e) {
	const ~~toggle~~ = e.target.closest(TOGGLE_SEL);		const hit = !!e.target.closest(TOGGLE_SEL);
	if (!~~toggle~~) return;		if (!hit) return;
			log('touchstart on toggle ✅ (intercept)');
	~~// Stop the default summary~~ toggle ~~so we control timing~~
	e.preventDefault();		e.preventDefault();
	e.stopPropagation();		e.stopPropagation();
			tryFocus('touchstart');
	~~openAndFocus~~();
	},		},
	{ capture: true, passive: false } ~~// passive:false is REQUIRED for preventDefault on iOS~~		{ capture: true, passive: false }
	);		);

	~~// Fallback for non-touch / weird cases~~
	document.addEventListener(		document.addEventListener(
	'click',		'click',
	function (e) {		function (e) {
	const ~~toggle~~ = e.target.closest(TOGGLE_SEL);		const hit = !!e.target.closest(TOGGLE_SEL);
	if (!~~toggle~~) return;		if (!hit) return;
			log('click on toggle ✅ (intercept)');
	e.preventDefault();		e.preventDefault();
	e.stopPropagation();		e.stopPropagation();
			tryFocus('click');
	~~openAndFocus~~();
	},		},
	true		true
	);		);

			// 3) details가 열리는 순간을 감시 (토글이 우리 코드 말고 다른 경로로 열릴 수도 있으니)
			const details = document.getElementById(DETAILS_ID);
			if (details) {
			const obs = new MutationObserver(() => state('details mutation'));
			obs.observe(details, { attributes: true, attributeFilter: ['open'] });
			log('observing details[open]');
			} else {
			log('details element not found at load time');
			}
	})();		})();

2026년 1월 17일 (토) 18:52에 Demian님의 편집

2026-01-17T18:52:10Z

← 이전 판		2026년 1월 17일 (토) 18:52 판
2번째 줄:		2번째 줄:

	/**		/**
	* ~~Aggressive autofocus for~~ Citizen search		* Citizen search: open + focus immediately on user gesture (iOS-friendly)
	* - ~~Remembers user intent even during page load~~		* - Intercepts tap on the <summary> so focus stays within the gesture stack
	* - ~~Focuses input the moment it becomes available & visible~~		* - Manually opens <details> and focuses #searchInput right away
	*/		*/
	(function () {		(function () {
	const ~~TOGGLE_SELECTOR~~ =		const DETAILS_ID = 'citizen-search-details';
	'#citizen-search-details > summary.citizen-dropdown-summary';		const TOGGLE_SEL = '#citizen-search-details > summary.citizen-dropdown-summary';
	const ~~INPUT_SELECTOR~~ = '#searchInput';		const INPUT_ID = 'searchInput';

	~~let wantFocus = false;~~		function openAndFocus() {
	~~let observer~~ = ~~null~~;		const details = document.getElementById(DETAILS_ID);
	~~let retryTimer~~ = ~~null~~;		const input = document.getElementById(INPUT_ID);

	~~function canFocus(input) {~~		if (!details \|\| !input) return;
	if (!input) return ~~false;~~
	~~if (input.disabled) return false;~~
	~~const rect = input.getBoundingClientRect();~~
	~~return rect.width > 0 && rect.height > 0~~;
	}

	~~function tryFocus~~() {		// Open immediately (within the same user gesture)
	if (!~~wantFocus~~) ~~return~~;		if (!details.open) details.open = true;

	~~const input = document.querySelector~~(~~INPUT_SELECTOR~~);		// Force a tiny layout sync so iOS is less flaky about focus
	~~if (!canFocus(~~input~~)) return~~;		// (Reading offsetHeight triggers reflow; yes it's old-school, yes it works)
			void input.offsetHeight;

	input.focus({ preventScroll: true });		input.focus({ preventScroll: true });
	input.click();		input.click(); // helps some mobile engines trigger the keyboard
			}

	if (~~document.activeElement === input~~) {		// Use the earliest possible gesture event
	~~cleanup~~();		document.addEventListener(
	}		'touchstart',
	}		function (e) {
			const toggle = e.target.closest(TOGGLE_SEL);
			if (!toggle) return;

	~~function cleanup() {~~		// Stop the default summary toggle so we control timing
	~~wantFocus = false;~~		e.preventDefault();
	~~if (observer) observer~~.~~disconnect~~();		e.stopPropagation();
	~~observer = null;~~
	~~if (retryTimer) clearInterval~~(~~retryTimer~~);
	~~retryTimer = null;~~
	}

	~~function startWatching~~() {		openAndFocus();
	~~// 1) DOM 변화 감시~~		},
	~~if (!observer)~~ {		{ capture: true, passive: false } // passive:false is REQUIRED for preventDefault on iOS
	~~observer = new MutationObserver(tryFocus);~~		);
	~~observer.observe(document.body, {~~
	~~childList~~: true,
	~~subtree~~: ~~true,~~
	~~attributes~~: ~~true,~~
	});
	}

	// ~~2) 혹시 Mutation이 안 잡히는 케이스 대비 폴링~~		// Fallback for non-touch / weird cases
	if (~~!retryTimer~~) {		document.addEventListener(
	~~retryTimer~~ = ~~setInterval~~(~~tryFocus, 50~~);		'click',
	}		function (e) {
	}		const toggle = e.target.closest(TOGGLE_SEL);
			if (!toggle) return;

	~~function onSearchIntent() {~~		e.preventDefault();
	~~wantFocus = true;~~		e.stopPropagation();
	~~tryFocus~~(); ~~// 즉시 한 번~~
	~~startWatching~~(); ~~// 안 되면 끝까지 쫓아감~~
	}

	~~// 🔑 진짜 중요한 부분: "유저 제스처"에서 intent만 기록~~		openAndFocus();
	~~['touchstart', 'touchend', 'mousedown', 'click'].forEach((evt) => {~~		},
	~~document.addEventListener(~~		true
	~~evt,~~		);
	~~function (e) {~~
	~~if (e.target.closest(TOGGLE_SELECTOR)) {~~
	~~onSearchIntent~~();
	}
	},
	true
	);
	});
	})();		})();

2026년 1월 17일 (토) 18:49에 Demian님의 편집

2026-01-17T18:49:01Z

차이 보기

2026년 1월 17일 (토) 18:45에 Demian님의 편집

2026-01-17T18:45:57Z

← 이전 판		2026년 1월 17일 (토) 18:45 판
5번째 줄:		5번째 줄:
	* Triggered when MobileFrontend search UI opens		* Triggered when MobileFrontend search UI opens
	* Improves UX by immediately opening the virtual keyboard		* Improves UX by immediately opening the virtual keyboard
			*/

			/**
			* iOS-friendly autofocus for Citizen search
			* - Bind focus to the actual user gesture on the search toggle (summary)
			* - Use a couple rAFs to wait for the input to appear/expand
	*/		*/
	(function () {		(function () {
	~~function focusSearchInput() {~~		const TOGGLE_SELECTOR = '#citizen-search-details > summary.citizen-dropdown-summary';
	const ~~input~~ =		const INPUT_SELECTOR = '#searchInput';
	~~document.querySelector(~~'.citizen-~~search__input~~'~~) \|\|~~
	~~document.querySelector(~~'#searchInput'~~) \|\|~~
	~~document.querySelector('input[type="search"]')~~;

			function focusInput() {
			const input = document.querySelector(INPUT_SELECTOR);
	if (!input) return false;		if (!input) return false;

	// ~~iOS는 visible~~/~~enable 상태 아니면~~ focus ~~무시하는 경우 많음~~		// If the toggle is still animating / collapsing, focus may fail.
			// preventScroll avoids weird jump on mobile.
	input.focus({ preventScroll: true });		input.focus({ preventScroll: true });

	// 어떤 iOS 버전/~~스킨 조합에서는 click이 키보드 트리거에 도움됨~~		// Some iOS versions are picky; a click can help trigger the keyboard.
			// (Harmless elsewhere.)
	input.click();		input.click();

24번째 줄:		31번째 줄:
	}		}

	// ~~"유저 제스처"로 인정받기 좋은 이벤트들~~		function focusSoon() {
	~~const EVENTS = [~~'touchend', ~~'pointerup'~~, '~~mouseup',~~ 'click'];		// Try immediately first (best chance to count as user gesture)
			if (focusInput()) return;

			// Then wait 1-2 frames for Citizen to render/open the search card
			requestAnimationFrame(() => {
			if (focusInput()) return;
			requestAnimationFrame(() => focusInput());
			});
			}

			// Use capturing so we still get it even if other handlers stop propagation.
			document.addEventListener(
			'touchend',
			function (e) {
			if (e.target.closest(TOGGLE_SELECTOR)) focusSoon();
			},
			true
			);

			// Fallback for devices/browsers that don't fire touchend as expected
			document.addEventListener(
			'click',
			function (e) {
			if (e.target.closest(TOGGLE_SELECTOR)) focusSoon();
			},
			true
			);
			})();

			/general/

	~~EVENTS~~.~~forEach~~((~~evt~~) => {		(function () {
	document.addEventListener(		function focusSearch() {
	~~evt~~,		const input =
	function (e) {		document.querySelector('.citizen-search__input') \|\|
	// 검색 버튼~~/아이콘~~ 후보들~~(필요하면 여기 셀렉터만 너 환경에 맞게 좁히면 됨)~~		document.querySelector('#searchInput') \|\|
	const isSearchButton = e.target.closest(		document.querySelector('input[type="search"]');
	'.citizen-search__button, .mw-ui-icon-search, .search-toggle, a[title="Search"], button[title="Search"]'
	);		if (input) {
			input.focus({ preventScroll: true });
			input.click();
			}
			}

			// 검색 버튼/아이콘(스킨마다 다름)에서 이벤트로 잡기
			document.addEventListener('click', function (e) {
			// Citizen/모바일에서 검색 토글 버튼 후보들
			const isSearchButton =
			e.target.closest('.citizen-search__button, .mw-ui-icon-search, .search-toggle, a[title="Search"], button[title="Search"]');

	if (!isSearchButton) return;		if (!isSearchButton) return;

	// ~~1) 즉시 시도 (가장 iOS 친화적)~~		// 버튼 누른 "직후" 입력창이 생기므로 프레임 2번 정도만 양보
	~~if (focusSearchInput()) return;~~		requestAnimationFrame(() => requestAnimationFrame(focusSearch));
			}, true);
	~~// 2) UI가 한 프레임 늦게 뜨면 1~2~~ 프레임 양보
	requestAnimationFrame(() => {
	~~if (focusSearchInput()) return;~~
	requestAnimationFrame(~~() => focusSearchInput(~~));
	~~});~~
	},
	true ~~// 캡처링: 스킨/확장이 stopPropagation 해도 이쪽이 먼저 받을 확률 ↑~~
	);
	});
	})();		})();

2026년 1월 17일 (토) 18:40에 Demian님의 편집

2026-01-17T18:40:35Z

← 이전 판		2026년 1월 17일 (토) 18:40 판
7번째 줄:		7번째 줄:
	*/		*/
	(function () {		(function () {
	function ~~focusSearch~~() {		function focusSearchInput() {
	const input =		const input =
	document.querySelector('.citizen-search__input') \|\|		document.querySelector('.citizen-search__input') \|\|
	document.querySelector('#searchInput') \|\|		document.querySelector('#searchInput') \|\|
	document.querySelector('input[type="search"]');		document.querySelector('input[type="search"]');

	if (input) {		if (!input) return false;
	~~input.focus({ preventScroll: true })~~;
	~~input.click();~~
	}
	}

	// ~~검색 버튼~~/~~아이콘~~(~~스킨마다 다름~~)~~에서 이벤트로 잡기~~		// iOS는 visible/enable 상태 아니면 focus 무시하는 경우 많음
	document.~~addEventListener(~~'click', function (e) {		input.focus({ preventScroll: true });
	// ~~Citizen/모바일에서~~ 검색 토글 버튼 후보들
	const isSearchButton =		// 어떤 iOS 버전/스킨 조합에서는 click이 키보드 트리거에 도움됨
	e.target.closest('.citizen-search__button, .mw-ui-icon-search, .search-toggle, a[title="Search"], button[title="Search"]');		input.click();

			return document.activeElement === input;
			}

			// "유저 제스처"로 인정받기 좋은 이벤트들
			const EVENTS = ['touchend', 'pointerup', 'mouseup', 'click'];

			EVENTS.forEach((evt) => {
			document.addEventListener(
			evt,
			function (e) {
			// 검색 버튼/아이콘 후보들(필요하면 여기 셀렉터만 너 환경에 맞게 좁히면 됨)
			const isSearchButton = e.target.closest(
			'.citizen-search__button, .mw-ui-icon-search, .search-toggle, a[title="Search"], button[title="Search"]'
			);

	if (!isSearchButton) return;		if (!isSearchButton) return;

	// ~~버튼 누른 "직후" 입력창이 생기므로~~ 프레임 ~~2번 정도만~~ 양보		// 1) 즉시 시도 (가장 iOS 친화적)
	requestAnimationFrame(() => requestAnimationFrame(~~focusSearch~~));		if (focusSearchInput()) return;
	}, true);
			// 2) UI가 한 프레임 늦게 뜨면 1~2 프레임 양보
			requestAnimationFrame(() => {
			if (focusSearchInput()) return;
			requestAnimationFrame(() => focusSearchInput());
			});
			},
			true // 캡처링: 스킨/확장이 stopPropagation 해도 이쪽이 먼저 받을 확률 ↑
			);
			});
	})();		})();

2026년 1월 17일 (토) 18:36에 Demian님의 편집

2026-01-17T18:36:26Z

← 이전 판		2026년 1월 17일 (토) 18:36 판
31번째 줄:		31번째 줄:
	}, true);		}, true);
	})();		})();

	~~mw.hook('mobileFrontend.search.open').add(function () {~~
	~~mw.notify('search.open fired');~~
	~~});~~

2026년 1월 17일 (토) 18:35에 Demian님의 편집

2026-01-17T18:35:59Z

← 이전 판		2026년 1월 17일 (토) 18:35 판
31번째 줄:		31번째 줄:
	}, true);		}, true);
	})();		})();

			mw.hook('mobileFrontend.search.open').add(function () {
			mw.notify('search.open fired');
			});

2026년 1월 17일 (토) 18:33에 Demian님의 편집

2026-01-17T18:33:46Z

← 이전 판		2026년 1월 17일 (토) 18:33 판
6번째 줄:		6번째 줄:
	* Improves UX by immediately opening the virtual keyboard		* Improves UX by immediately opening the virtual keyboard
	*/		*/
	~~mw.hook('mobileFrontend.search.open').add~~(function () {		(function () {
	~~const tryFocus =~~ () => {		function focusSearch() {
	const input =		const input =
	document.querySelector('.citizen-search__input') \|\|		document.querySelector('.citizen-search__input') \|\|
15번째 줄:		15번째 줄:
	if (input) {		if (input) {
	input.focus({ preventScroll: true });		input.focus({ preventScroll: true });
	input.click(); ~~// 모바일에서 키보드 트리거에 도움 될 때가 있음~~		input.click();
	}		}
	};		}

	requestAnimationFrame(() => requestAnimationFrame(~~tryFocus~~));		// 검색 버튼/아이콘(스킨마다 다름)에서 이벤트로 잡기
	});		document.addEventListener('click', function (e) {
			// Citizen/모바일에서 검색 토글 버튼 후보들
			const isSearchButton =
			e.target.closest('.citizen-search__button, .mw-ui-icon-search, .search-toggle, a[title="Search"], button[title="Search"]');

			if (!isSearchButton) return;

			// 버튼 누른 "직후" 입력창이 생기므로 프레임 2번 정도만 양보
			requestAnimationFrame(() => requestAnimationFrame(focusSearch));
			}, true);
			})();