/* ─────────────────────────────────────────────────────────────
   반응형 오버라이드 — 리뉴얼의 핵심 목적.
   960px 초과: 현행 사이트와 동일한 고정 레이아웃 (legacy-base.css)
   960px 이하: 플로트 해제·유동 폭으로 모바일 대응
   ───────────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }

@media (max-width: 960px) {
	#headertop, #header, #wrapper, #container, .inner { width: auto !important; }
	#mainnav { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; }
	#mainnav li { float: none !important; }
	#mainnav img { height: 38px; width: auto; }
	#mainImage04 iframe, .top-slider img { width: 100%; }
	#mainImage05 { display: flex; gap: 4px; }
	#mainImage05 div { flex: 1; }
	#container { float: none !important; width: auto !important; padding: 0 10px; }
	#main { float: none !important; width: auto !important; }
	#sidebarR, #sidebarL { float: none !important; width: auto !important;
		display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
	#sidebarR p { width: 46%; margin: 0; }
	.syoukai_cm .box2 { width: 46% !important; margin: 2%; float: left; }
	#footerUpper { height: auto !important; background-size: cover; }
	#footerUpper .inner { display: flex; flex-direction: column; align-items: center; }
	.list_size001 a { display: inline-block; max-width: 85%; vertical-align: top; }
	.spec-table th { width: 6em; }
}