@charset "utf-8";
/* ============================================================
   라스코스반상 모바일 반응형 (2026)
   - 데스크톱(고정폭) 레이아웃은 건드리지 않고, 좁은 화면에서만 override
   - 헤더/메뉴는 인라인 width 가 있어 !important 로 덮어씀
   ============================================================ */

html, body { max-width: 100%; }

/* ---------- 컨테이너 유동화 (≤1320px) ---------- */
@media (max-width: 1320px) {
	.ls_in      { width: 100% !important; padding-left: 20px; padding-right: 20px; }
	.ls_band .ls_in { padding-left: 0; padding-right: 0; }
	.cf_inner   { width: 100% !important; padding-left: 16px; padding-right: 16px; }
	.inner_area { width: 100% !important; }
	.inner      { width: 100% !important; }
	.gnb_menu   { width: 100% !important; padding: 0 12px; box-sizing: border-box; }
}

/* ---------- 태블릿/모바일 (≤1024px) ---------- */
@media (max-width: 1024px) {
	html, body { overflow-x: hidden; }
	img { max-width: 100%; height: auto; }

	/* 상단 바 */
	#gnb .gnb_menu { width: 100% !important; }

	/* 헤더: 로고 + 메뉴 세로 정렬 */
	#sub_menu .inner_area { height: auto !important; padding: 6px 12px; box-sizing: border-box; }
	#logo { width: 100% !important; float: none !important; text-align: center; padding: 12px 0 6px !important; box-sizing: border-box; }
	#logo img { max-width: 200px !important; margin-top: 0 !important; }
	#navigation { width: 100% !important; float: none !important; padding: 0 0 6px !important; box-sizing: border-box; }
	#navigation > div { width: 100% !important; float: none !important; }

	/* 메인 메뉴(jMenu): 가로 table → 세로 블록 */
	#jMenu, ul#jMenu { display: block !important; width: 100% !important; }
	#jMenu > li { display: block !important; float: none !important; width: 100% !important; border-top: 1px solid #eee; }
	#jMenu > li a { padding: 13px 12px !important; font-size: 15px !important; text-align: center; }

	/* HERO */
	#content .slideshow { height: 540px !important; }
	.ls_hero_ov h1 { font-size: 34px !important; }
	.ls_hero_ov .en { font-size: 16px !important; }
	.ls_hero_ov .sub { font-size: 14px !important; }

	/* 예약 바 */
	.ls_resv .ls_in { flex-direction: column; text-align: center; gap: 14px; }
	.ls_resv .right { flex-direction: column; gap: 12px; }

	/* 섹션 공통 */
	.ls_spaces .ls_in, .ls_seat .ls_in, .ls_menu .ls_in { padding: 56px 20px !important; }
	.ls_h { font-size: 27px; }

	/* 4카드 */
	.ls_grid4 { flex-wrap: wrap; gap: 16px; }
	.ls_card { flex: 0 0 48%; }
	.ls_card .thumb { height: 240px; }

	/* 다크 인용 */
	.ls_quote { background-attachment: scroll !important; }
	.ls_quote .qin { padding: 80px 20px !important; }
	.ls_quote h2 { font-size: 30px !important; }
	.ls_quote p { font-size: 14px !important; }

	/* 자리 */
	.ls_seatrow { flex-wrap: wrap; gap: 16px; }
	.ls_seatcol { flex: 0 0 48%; }

	/* 메뉴 */
	.ls_courses { flex-wrap: wrap; gap: 16px; }
	.ls_course { flex: 0 0 100%; }

	/* 밴드: 세로 스택, 이미지 위 / 텍스트 아래 */
	.ls_band .ls_in { flex-direction: column !important; min-height: 0 !important; }
	.ls_band.beige .ls_in { flex-direction: column-reverse !important; }
	.ls_band .pic { flex: 0 0 auto !important; width: 100% !important; height: 260px !important; }
	.ls_band .txt { padding: 44px 24px !important; }

	/* 오시는길 */
	.ls_visit .ls_in { flex-direction: column; gap: 30px; padding: 48px 20px !important; }

	/* ===== 커피숍 페이지 ===== */
	.cf_hero .cf_hero_txt .kr { font-size: 28px; }
	.cf_gallery a { width: 32% !important; height: 180px !important; margin: 0 2% 2% 0 !important; }
	.cf_gallery a:nth-child(3n) { margin-right: 0 !important; }
	.cf_gallery a:nth-child(4n) { margin-right: 2% !important; }
	.cf_info .cf_inner { display: block; }
	.cf_info .ci_col { width: 100% !important; float: none !important; padding: 0 16px !important; margin-bottom: 22px; box-sizing: border-box; }
	.cf_cta a { display: block; margin: 8px 16px; }

	/* 푸터 */
	#footer_info .copyright { width: 100% !important; box-sizing: border-box; padding: 20px 16px !important; }
	#footer_info .foot_logo { float: none !important; text-align: center; padding: 20px 0 0 !important; }
}

/* ---------- 모바일 (≤680px) ---------- */
@media (max-width: 680px) {
	#content .slideshow { height: 420px !important; }
	.ls_hero_ov h1 { font-size: 27px !important; }
	.ls_hero_ov .hrule { margin: 20px auto; }

	.ls_h { font-size: 23px; }
	.ls_label { letter-spacing: 3px; }

	.ls_card { flex: 0 0 100%; }
	.ls_card .thumb { height: 220px; }

	.ls_quote h2 { font-size: 25px !important; }

	.ls_seatcol { flex: 0 0 100%; }

	.ls_resv .tel b { font-size: 25px; }
	.ls_visit .bigtel { font-size: 29px; }
	.ls_band .txt h3 { font-size: 25px; }

	.cf_hero .cf_hero_txt .kr { font-size: 24px; }
	.cf_intro { padding: 40px 16px 30px !important; }
	.cf_intro h2 { font-size: 21px !important; }
	.cf_gallery a { width: 48% !important; height: 150px !important; }
	.cf_gallery a:nth-child(3n) { margin-right: 2% !important; }
	.cf_gallery a:nth-child(2n) { margin-right: 0 !important; }
}

/* ---------- 추가 효과 요소 반응형 ---------- */
@media (max-width: 1024px) {
	.ls_marquee .track img { width: 240px !important; height: 170px !important; }
	.ls_scrollcue { display: none; }
}
@media (max-width: 680px) {
	.ls_marquee .track img { width: 175px !important; height: 128px !important; }
	.ls_float { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 13px; }
}