@charset "utf-8";
/* ==========================================================================
   반응형 마무리
   좁은 화면에서만 적용된다. 데스크톱 화면은 이 파일이 건드리지 않는다.
   맨 마지막에 읽히므로(head.php 의 page_css 뒤) 페이지 전용 CSS 도 덮어쓴다.
   ========================================================================== */

/* ---------- 입력칸을 누르면 화면이 확대되는 문제 ----------
   iOS 사파리는 글자가 16px 보다 작은 입력칸에 포커스가 가면 화면을 통째로 확대한다.
   확대된 화면은 저절로 돌아오지 않아서, 폼을 한 칸씩 채울 때마다 화면이 튀고
   사용자가 매번 두 손가락으로 되돌려야 한다. 회원가입·견적문의처럼 칸이 많은
   폼일수록 심하다.
   좁은 화면에서만 16px 로 올려 확대 자체를 막는다. 데스크톱 글자 설계는 그대로다.

   !important 를 쓴 이유: 각 페이지 CSS 가 '.mb input[type=text]' 처럼
   클래스를 앞에 붙여 써서 이 파일의 홑 선택자보다 구체적이다.
   파일마다 선택자를 흉내 내 쫓아가면 새 페이지가 생길 때마다 또 빠진다.
   이 파일은 애초에 덮어쓰기 용도이므로 여기서만 명시적으로 이긴다.

   확대를 부르는 것은 글자를 '입력하는' 칸뿐이라 체크박스·라디오·버튼은 두고,
   라디오/체크박스를 흉내 낸 라벨도 건드리지 않는다. */
@media (max-width: 820px) {
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input:not([type]),
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* 개수를 고르는 작은 셀렉트(78×30)는 제 CSS 에서 !important 로 12px 을 못박아
   위 규칙보다 세서 그대로 남는다. 같은 이유로 확대를 부르므로 따로 올린다.
   글자를 키운 만큼 칸도 넓힌다 — 가로로 흐르는 flex 목록이라
   넓어지면 다음 줄로 내려갈 뿐 화면 밖으로 넘치지 않는다. */
@media (max-width: 820px) {
	.es-mini {
		width: 96px !important;
		height: 40px !important;
		font-size: 16px !important;
	}
}