/* =========================================================
   청수가 홈페이지 반응형(모바일) 보완 스타일
   - 기존 디자인/색상은 그대로 두고, 화면이 좁을 때만
     겹침·잘림·과도한 축소가 없도록 규칙을 추가합니다.
   ========================================================= */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ---------- 새 메뉴 카드 스타일 (PC/모바일 공통) ---------- */
.menu-section { max-width: 1200px; margin: 0 auto; padding: 70px 20px 40px; text-align: left; }
.menu-section .menu_title { text-align: center; margin-bottom: 36px; }
.menu-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px;
}
.menu-card {
	box-sizing: border-box;
	width: 50%;
	padding: 0 20px 22px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid #e6e6e6;
	text-align: left;
}
.menu-card .info h3 {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #222;
	margin: 0 0 4px;
}
.menu-card .info h3 .en {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #a0a0a0;
	margin-top: 3px;
}
.menu-card .info p.desc {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 13px;
	color: #858282;
	line-height: 1.6;
	margin: 0;
}
.menu-card .price {
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 700;
	color: #0e8c18;
	white-space: nowrap;
	padding-top: 2px;
}
.menu-card-img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; margin-right: 4px; }

/* ---------- 소개 배너 (텍스트 + 사진, 텍스트를 실제 글자로 표시해 화면 크기와 무관하게 선명함) ---------- */
.intro-banner {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px;
}
.intro-banner .intro-text { flex: 0 0 320px; }
.intro-banner .intro-text h2 {
	font-family: 'Noto Serif KR', serif;
	font-size: 32px;
	line-height: 1.35;
	font-weight: 500;
	color: #222;
	margin: 0 0 18px;
}
.intro-banner .intro-text p {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 13px;
	line-height: 1.7;
	color: #777;
}
.intro-banner .intro-text .stamp { width: 26px; height: auto; vertical-align: middle; margin-left: 4px; }
.intro-banner .intro-photo { flex: 1 1 auto; min-width: 0; }
.intro-banner .intro-photo img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* ---------- 예약메뉴 카드 2개 (사진 + 제목 + 설명이 항상 같은 높이에서 시작) ---------- */
.reserve-grid { display: flex; gap: 30px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.reserve-card { flex: 1 1 300px; max-width: 380px; text-align: center; }
.reserve-card img { width: 100%; height: 260px; object-fit: cover; display: block; border-radius: 4px; }
.reserve-card h3 { font-family: 'Noto Sans KR', sans-serif; font-size: 20px; font-weight: 700; margin: 16px 0 10px; }
.reserve-card .reserve-desc { font-family: 'Noto Sans KR', sans-serif; font-size: 13px; color: #666; line-height: 1.6; }
.reserve-note { text-align: center; font-size: 13px; color: #777; line-height: 1.7; margin-top: 30px; }

/* ---------- 태블릿 / 모바일 공통 (1024px 이하) ---------- */
@media (max-width: 1024px) {
	body { min-width: 0 !important; background-size: cover; }

	/* 상단 로고 + 메뉴 (DB_navi50.css보다 항상 위에 적용되도록 !important 사용) */
	#DB_navi50 { height: auto !important; }
	#DB_navi50 .inner { width: 100% !important; height: auto !important; padding: 8px 0 !important; }
	#DB_navi50 .logo-banner { position: static !important; height: auto !important; padding: 6px 15px !important; text-align: center !important; }
	#DB_navi50 .logo-banner .logo { height: 42px !important; display: inline-block !important; padding: 0 !important; overflow: visible !important; }
	#DB_navi50 .logo-banner .logo img { height: 42px !important; }
	#DB_navi50 .lnb { position: static !important; padding: 6px 0 10px !important; text-align: center !important; }
	#DB_navi50 .lnb li { float: none !important; display: inline-block !important; }
	#DB_navi50 .lnb li > a { padding: 4px 10px !important; font-size: 13px !important; line-height: 1.8 !important; }
	#DB_navi50 .fixed.on { position: relative !important; }

	/* 메인 배너 / 서브 배너 이미지 (고정 높이 → 비율 유지, 모바일에서만 전체 사진 표시) */
	#main_image, #main_image2, #main_image3,
	#DB_tab16 { height: auto !important; min-width: 0 !important; }
	#DB_tab16 .DB_img li {
		position: static !important;
		left: 0 !important;
		width: 100% !important;
		margin-left: 0 !important;
	}
	#DB_tab16 .DB_img li img { width: 100%; height: auto; display: block; }

	/* 이미지 전체 공통: 화면보다 큰 이미지가 잘리지 않고 폭에 맞춰 축소되도록 (근본 수정) */
	img { max-width: 100% !important; height: auto !important; }

	/* 1200px 고정 표들을 화면 폭에 맞춤 */
	table[width] { width: 100% !important; }
	table[height] { height: auto !important; }
	table { max-width: 100%; }

	/* 예약메뉴 사진 2장: 화면 폭에 맞춰 배치 */

	/* 시설안내/오시는길 큰 타이틀 축소 (글자 간격도 함께 정상화해 겹침 방지) */
	.location_title { font-size: 30px !important; padding-top: 40px !important; line-height: 1.3 !important; letter-spacing: normal !important; }
	.location_title2 { font-size: 24px !important; padding-top: 40px !important; line-height: 1.4 !important; letter-spacing: normal !important; }
	.location_sm { font-size: 15px !important; padding-bottom: 25px !important; }
	.location_add { font-size: 16px !important; line-height: 1.6 !important; letter-spacing: normal !important; }
	.menu_title { font-size: 22px !important; }
	#top_img1 p, #top_img2 p, #top_img3 p, #top_img5 p { letter-spacing: normal !important; }

	/* 하단 정보 영역 */
	#botom_add, #bottom_mail { width: 100% !important; padding: 0 20px; }

	/* 소개 배너: 모바일에서는 세로로 쌓기 */
	.intro-banner { flex-direction: column !important; text-align: center !important; gap: 20px !important; padding: 40px 20px !important; }
	.intro-banner .intro-text { flex: none !important; }
	.intro-banner .intro-text h2 { font-size: 26px !important; }

	/* 청수가소개 인사말: 모바일에서는 가운데 정렬 */
	.greeting_con { text-align: center !important; padding: 30px 20px !important; }

	/* 예약메뉴: 모바일에서는 세로로 쌓고, 설명 문구는 생략해 간결하게 */
	.reserve-grid { flex-direction: column !important; gap: 30px !important; }
	.reserve-card img { height: 220px !important; }
	.reserve-card .reserve-desc { display: none !important; }

	/* 시설안내 사진 갤러리: 모바일에서는 가운데 정렬 */
	.d_lightBox { padding-left: 0 !important; text-align: center !important; }
	.d_lightBox li { float: none !important; display: inline-block !important; }
	.d_lightBox li img { width: 85% !important; max-width: 320px !important; height: auto !important; margin: 8px auto !important; }
}

/* ---------- 좁은 모바일 (600px 이하) ---------- */
@media (max-width: 600px) {
	#DB_navi50 .lnb li > a { padding: 4px 7px !important; font-size: 12px !important; }
	.menu-grid { margin: 0; }
	.menu-card { width: 100%; padding: 0 0 18px; }
	.menu-card .price { font-size: 16px; }
	.location_title { font-size: 24px !important; }
	iframe { width: 100% !important; }
}