/* include/flyer/engine.php 줄 115 의 인라인 style 을 파일로 뺀 것 (2026-09-30, 사장님 «실종 등록 속도») — 원문 그대로. 고칠 땐 이 파일을 고치고 cache_version 갱신 */

/* ══════════════════════════════════════════════════════════════════════════════
   전단지 — 모바일 터치 최적화 (2026-07-31)

   문제(390px 실측): 팝업이 `transform: scale(0.45)` 로 통째로 축소돼
   **안의 컨트롤이 전부 45% 크기**가 된다.
     레이아웃 select 106x24 · 1장/2장 라벨 36x19 · 색상 input 25x25 · 확인/취소 71x42
   → 권장 44x44 에 한참 못 미친다. 자연 크기를 키워도 0.45 를 곱하면 못 닿는다
     (44px 를 얻으려면 자연 98px 이 필요).

   해법: **껍데기를 스케일에서 빼고, 종이만 축소한다.**
     · 팝업 자체는 scale 제거 → 전체화면. 툴바·버튼이 자연 크기가 되어 손가락에 맞는다
     · 종이(#flyerContent)만 `zoom` 으로 축소. 🔴 `transform: scale` 이 아니라 `zoom` 인 이유 =
       transform 은 레이아웃 높이를 그대로 남겨 아래에 빈 공간이 생긴다. zoom 은 레이아웃까지 줄인다
   🔴 종이의 '색'은 건드리지 않는다 — 여기서 바꾸는 건 크기/배치뿐이다(내보내기 결과 불변).
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

	/* ── 팝업: 전체화면 + 스케일 해제 ── */
	#flyerPopup {
		top: 0 !important;
		left: 0 !important;
		transform: none !important;          /* scale(0.45) 해제 → 컨트롤이 자연 크기 */
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100dvh !important;
		border: 0 !important;
		border-radius: 0 !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		-webkit-overflow-scrolling: touch;
	}

	/* 상·하단 툴바: 794px 기준 폭을 화면 폭으로 */
	#flyerPopup > div { max-width: 100% !important; box-sizing: border-box !important; }

	/* 상단 툴바 — 🔴 좁은 폭에서 wrap 만으로는 '2장표시' 가 잘렸다(실측).
	   가로 배치를 포기하고 **세로 스택**으로 바꿔 구조적으로 넘칠 수 없게 한다. */
	#flyerPopup > div:first-of-type {
		height: auto !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		padding: 12px !important;
		box-sizing: border-box !important;   /* 🔴 없으면 width:100% + padding 으로 12px 넘친다 */
		position: sticky !important; top: 0 !important; z-index: 5 !important;
	}
	/* 안쪽 묶음(선택 + 라디오)도 세로로.
	   🔴 box-sizing 필수 — 닫기(X) div 가 인라인 padding:20px 를 갖고 있어
	      width:100% 와 더해지면 12px 넘친다(실측 R=402). */
	#flyerPopup > div:first-of-type > div {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		box-sizing: border-box !important;
		gap: 10px !important;
	}

	/* ── 종이: 여기만 축소(레이아웃까지 줄이려고 zoom 사용) ── */
	#flyerContent {
		zoom: 0.49;                          /* 794 * 0.49 ≈ 389px */
		margin: 0 auto !important;
	}

	/* ── 터치 타깃 44px 확보 ── */
	#flyerSelect {
		min-height: 48px !important;
		font-size: 17px !important;
		padding: 10px 36px 10px 8px !important;
	}
	/* 🔴 라디오는 툴바 안의 '중첩 flex' 에 들어 있어서 상단 툴바에만 flex-wrap 을 줘도 안 닿는다.
	   안쪽 컨테이너까지 wrap 시키지 않으면 '2장표시' 가 화면 밖으로 잘린다(실측). */
	.radio_custom_style.imageOption {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px !important;
	}
	.radio_custom_style.imageOption label {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 44px !important;
		padding: 10px 16px !important;
		font-size: 15px !important;
	}
	#flyerPopup .fa-x { font-size: 26px !important; }
	#flyerPopup > div:first-of-type > div[onclick] { padding: 12px !important; min-width: 44px; min-height: 44px; }

	/* 하단 툴바 — 좌우 패딩이 794px 기준이라 버튼이 화면 밖으로 밀렸다 */
	#flyerPopup > div:last-of-type {
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 12px !important;
		align-items: stretch !important;
	}
	#flyerPopup > div:last-of-type > * {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	/* 제목/부제목 **입력칸** — 폭 꽉 채우고 터치 높이 확보
	   🔴 반드시 `input` 으로 한정할 것 (2026-07-31).
	      `c_flyer_title_css` / `c_flyer_sub_title_css` 는 **hidden input 과 전단지 막대가
	      함께 쓰는 클래스**다. 태그를 안 붙이면 이 `font-size:16px !important` 가
	      전단지 제목 막대까지 잡아 **제목이 96px 이 아니라 16px 로 인쇄된다**
	      (setFontSize() 가 넣는 인라인 6em 은 important 가 없어 이 규칙에 진다). */
	#flyerPopup input.c_flyer_title_css,
	#flyerPopup input.c_flyer_sub_title_css {
		width: 100% !important;
		box-sizing: border-box !important;
		min-height: 44px !important;
		font-size: 16px !important;              /* 🔴 16px 미만이면 iOS 가 확대한다 */
	}

	/* 저장/다운로드/공유 버튼 */
	#downloadBtn, #share_btn, #flyer_saveButton {
		width: 100% !important;
		box-sizing: border-box !important;
		min-height: 50px !important;
		font-size: 16px !important;
		display: flex !important; align-items: center !important; justify-content: center !important;
	}

	/* ── 색상 선택 패널: 하단 시트로 ── */
	.color-picker-container {
		left: 0 !important; right: 0 !important;
		top: auto !important; bottom: 0 !important;
		width: 100% !important;
		/* 🔴 필수 — 기본 content-box 라 width:100% + padding 이 더해져 뷰포트를 28px 넘쳤다 */
		box-sizing: border-box !important;
		max-height: 70dvh !important;
		overflow-y: auto !important;
		border-radius: 14px 14px 0 0 !important;
		padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0)) !important;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .45) !important;
	}
	.color-picker-container input[type="color"] {
		width: 44px !important; height: 44px !important;
	}
	.color-picker-container input[type="text"] {
		flex: 1 1 auto !important;
		width: auto !important;
		min-height: 44px !important;
		font-size: 16px !important;              /* 🔴 16px 미만이면 iOS 가 확대한다 */
	}
	.color-picker-container .color-swatch {
		width: 44px !important; height: 44px !important;
	}
	.color-picker-container .color-palette {
		grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important;
		gap: 8px !important;
	}
	.color-picker-container .button-container button {
		min-width: 96px !important; min-height: 48px !important; font-size: 16px !important;
	}
	/* 라벨/입력 줄이 좁은 폭에서 넘치지 않게 */
	.color-picker-container > div,
	.color-picker-container .color-palette-container > div > div {
		flex-wrap: wrap !important;
		height: auto !important;
		gap: 8px !important;
	}
}