@charset "utf-8";
/**
 * Lemon Layout - Responsive CSS
 * PC 레이아웃을 반응형으로 전환하기 위한 미디어쿼리
 * Breakpoints: 1200px (태블릿), 768px (모바일)
 */

/* ===== 기본 반응형 설정 ===== */
.lm-pc .responsive-menu-toggle {
	display: none;
}
.lm-pc .responsive-sidebar-toggle {
	display: none;
}
.lm-pc .responsive-sidebar-overlay {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 200;
	opacity: 0;
	transition: opacity 0.3s;
}
.lm-pc .responsive-sidebar-overlay.active {
	display: block;
	opacity: 1;
}

/* ===== 태블릿: <= 1200px ===== */
@media screen and (max-width: 1200px) {
	/* min-width 제한 해제 */
	.lm-layout {
		min-width: 0 !important;
	}

	/* 모든 고정 너비 컨테이너를 유동적으로 */
	.lm-container > .lm-slider {
		width: 100% !important;
		box-sizing: border-box;
	}
	.full-width .width-unit,
	.full-width .lm-header:not(.lm-header--inline) .gnb-default,
	.full-width .lm-header--inline .gnb-default-wrap,
	.basic-width .lm-header,
	.lm-wrapper,
	.basic-width .lm-footer-wrap > .wavy,
	.lm-footer {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	.lm-header .width-unit,
	.lm-header-no .width-unit {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 20px;
		padding-right: 20px;
	}
	.lm-header:not(.lm-header--inline) .gnb-default:not(.fixed) {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}
	.lm-header--inline .gnb-default-wrap {
		width: 100% !important;
		min-width: 0 !important;
		margin-left: -50vw !important;
		box-sizing: border-box;
	}
	.gnb-default.fixed {
		width: 100% !important;
		min-width: 0 !important;
		left: 0 !important;
		margin-left: 0 !important;
		box-sizing: border-box;
		padding: 0 20px;
	}

	/* 네비게이션 넘침 방지 */
	.gnb-default-wrap {
		overflow-x: auto;
	}
	.gnb-default > ul {
		white-space: nowrap;
	}

	/* 래퍼 패딩 */
	.lm-wrapper {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.lm-footer {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* 사이드바 숨김 */
	.lm-pc .lm-sidebar {
		display: none;
	}
	.lm-pc .lm-sidebar.responsive-sidebar-active {
		display: block !important;
		position: fixed;
		left: 0;
		top: 0;
		width: 280px !important;
		height: 100%;
		z-index: 210;
		overflow-y: auto;
		padding: 20px;
		box-sizing: border-box;
		box-shadow: 2px 0 15px rgba(0,0,0,0.15);
	}
	/* 사이드바 내 side 헤더 마진 보정 */
	.lm-pc .lm-sidebar.responsive-sidebar-active .lm-header--side {
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	/* 콘텐츠 전체 너비 */
	.lm-content {
		width: 100% !important;
		float: none !important;
	}
	.lm-sidebar-left + .lm-content {
		margin-left: 0 !important;
	}
	.use-sidebar-right .lm-content {
		padding-right: 0 !important;
	}

	/* 사이드바/메뉴 토글 버튼 표시 */
	.lm-pc .responsive-sidebar-toggle {
		display: inline-block;
	}

	/* 슬라이더 조정 */
	.lm-slider--frame .swiper-slide {
		width: 50vw !important;
	}
	.lm-slider--frame .swiper-button-prev {
		margin-left: 0 !important;
		left: 10px !important;
	}
	.lm-slider--frame .swiper-button-next {
		margin-right: 0 !important;
		right: 10px !important;
	}
	.lm-slider--default .slider-content {
		right: 0;
		padding: 20px;
	}
	.lm-slider--default .slider-title {
		font-size: 24px;
	}
	.lm-slider--default .slider-desc {
		font-size: 14px;
	}
}

/* ===== 모바일: <= 768px ===== */
@media screen and (max-width: 768px) {
	/* 래퍼 패딩 조정 */
	.lm-wrapper {
		padding: 15px !important;
	}
	.lm-footer {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.lm-header .width-unit,
	.lm-header-no .width-unit {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* ★ 헤더에 position: relative 보장 (드롭다운 네비 기준점) */
	.lm-pc #header,
	.lm-pc .lm-header {
		position: relative !important;
	}

	/* 게시판(레몬 보드 스킨) 우측 메뉴(list-buttons)가 화면 밖으로 나가는 문제 해결 */
	.lm-pc .lm-board .list-buttons {
		right: 10px !important;
	}
	.lm-pc .use-sidebar-right .lm-board .list-buttons {
		right: 10px !important;
	}
	.lm-pc .lm-board .list-buttons > div.fix {
		right: 10px !important;
	}

	/* 햄버거 메뉴 버튼: 모바일에서도 숨김 (수평 스크롤 네비로 대체) */
	.lm-pc .responsive-menu-toggle {
		display: none;
	}

	/* ★ 네비게이션: 숨기지 않고 수평 스크롤 바로 항상 표시 */
	.lm-pc .gnb-default-wrap {
		display: block !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		margin: 0 !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap !important;
		border-bottom: 1px solid;
	}
	.lm-pc .gnb-default-wrap .gnb-default {
		position: relative !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		display: inline-block;
	}
	.lm-pc .gnb-default-wrap .gnb-default > ul {
		display: inline-block !important;
		white-space: nowrap !important;
		padding: 0 10px;
	}
	.lm-pc .gnb-default-wrap .gnb-default > ul > li {
		display: inline-block !important;
		padding: 12px 10px !important;
		margin: 0 !important;
	}
	.lm-pc .gnb-default-wrap .gnb-default .link--1depth {
		font-size: 13px;
	}
	/* 2depth 서브메뉴: 모바일에서 호버 드롭다운 비활성화 */
	.lm-pc .gnb-default-wrap .gnb-default > ul > li > ul {
		display: none !important;
	}
	/* 전체보기 버튼 숨김 */
	.lm-pc .gnb-default .gnb-view-all {
		display: none !important;
	}
	/* fixed 상단 네비게이션도 숨김 (스크롤 시 고정되는 GNB) */
	.lm-pc .gnb-default.fixed {
		display: none !important;
	}

	/* 인라인형 헤더의 gnb-default-wrap 위치 보정 */
	.lm-pc .lm-header--inline .gnb-default-wrap {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		height: auto !important;
		margin-left: 0 !important;
	}
	.lm-pc .lm-header--inline .gnb-default:not(.fixed) {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		margin-top: 0 !important;
	}

	/* 세로형 헤더 네비게이션: 수평 스크롤로 변환 */
	.lm-pc .lm-header--vertical .gnb-vertical {
		display: block !important;
		position: relative !important;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap !important;
		border-bottom: 1px solid;
		margin-top: 0;
		font-size: 13px;
	}
	.lm-pc .lm-header--vertical .gnb-vertical ul {
		display: inline-block !important;
		border: none !important;
		white-space: nowrap !important;
		padding: 0 10px;
	}
	.lm-pc .lm-header--vertical .gnb-vertical li {
		display: inline-block !important;
		padding: 12px 10px !important;
		width: auto !important;
		border-right: none !important;
		word-break: normal !important;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		-webkit-text-orientation: mixed;
	}
	.lm-pc .lm-header--vertical .logo {
		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;
		-webkit-text-orientation: mixed !important;
		width: auto !important;
		padding-right: 0 !important;
	}
	.lm-pc .lm-header--vertical .logo-wrap {
		height: auto !important;
		min-height: 50px;
	}

	/* 헤더 로고 영역 */
	.lm-pc .lm-header--default .logo-wrap,
	.lm-pc .lm-header .logo-wrap {
		height: auto !important;
		min-height: 50px;
		padding: 10px 0;
		box-sizing: border-box;
	}
	.lm-pc .lm-header .logo {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		font-size: 16px;
		line-height: 30px;
	}
	.lm-pc .align--center.lm-header--default .logo {
		text-align: center;
	}
	.lm-pc .lm-header .buttons {
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%);
	}
	.lm-pc .lm-header .buttons--right {
		right: 0;
	}
	.lm-pc .lm-header .buttons--left {
		left: 0;
	}

	/* 뉴스형 헤더 */
	.lm-pc .lm-header--news .logo-wrap {
		height: auto !important;
		min-height: 60px;
	}
	.lm-pc .lm-header--news .header-content {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		text-align: left !important;
		padding: 10px 0;
	}
	.lm-pc .lm-header--news .header-content > div {
		position: static !important;
		transform: none !important;
	}

	/* 인라인형 헤더 - responsive-open 시 absolute 보장 */
	.lm-pc .lm-header--inline .logo-wrap {
		height: auto !important;
		min-height: 50px;
	}
	.lm-pc .lm-header--inline .gnb-default:not(.fixed) {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		margin-top: 0 !important;
	}

	/* has-top 헤더 */
	.lm-pc .lm-header.has-top {
		padding-top: 40px;
	}
	.lm-pc .top-content {
		height: 40px;
	}
	.lm-pc .top-content .buttons {
		top: 6px;
	}
	.lm-pc .lm-header.has-top .top-content {
		top: -40px;
	}

	/* 상단 메뉴 숨김 (작은 화면에서) */
	.lm-pc .menu-top {
		display: none;
	}

	/* 검색 폼 */
	.search-global form {
		width: 90% !important;
		left: 5% !important;
		margin-left: 0 !important;
	}

	/* 모달 */
	.lm-modal--large > div {
		width: calc(100% - 30px) !important;
	}

	/* 슬라이더 */
	.lm-slider--frame .swiper-slide {
		width: 85vw !important;
	}
	.lm-slider--default .slider-title {
		font-size: 20px;
	}
	.lm-slider--default .slider-desc {
		font-size: 13px;
		margin-top: 10px;
	}
	.lm-slider--default .slider-button {
		font-size: 12px;
		line-height: 32px;
		padding: 0 15px;
	}

	/* 푸터 */
	.lm-footer {
		text-align: center;
	}
	.lm-footer .logo {
		float: none !important;
		margin-bottom: 10px;
	}
	.lm-footer .copyright--default {
		float: none !important;
		margin-left: 0 !important;
		margin-bottom: 10px;
	}
	.lm-footer .menu-footer {
		float: none !important;
		text-align: center !important;
		margin-bottom: 10px;
	}
	.lm-footer .menu-footer > ul > li {
		margin-left: 0;
		margin-right: 10px;
	}
	.lm-footer .menu-footer > ul > li:first-child {
		margin-left: 0;
	}
	.lm-footer .external-links {
		text-align: center !important;
	}
	.lm-footer .copyright--repeat {
		font-size: 13px;
		line-height: 16px;
	}

	/* side 타입 헤더의 top-content */
	.lm-pc .top-content.lm-header-no .width-unit {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* 로그인 모달 */
	.lm-login > .bg--dark {
		width: 90%;
		max-width: 400px;
	}

	/* XE 메시지 */
	.lm-xe-message .message-body {
		width: calc(100% - 30px) !important;
		right: 15px !important;
	}

	/* 사이드바 반응형 오버라이드 */
	.lm-pc .lm-sidebar.responsive-sidebar-active {
		width: 260px !important;
	}

	/* color-preview */
	.color-preview {
		width: 100%;
		box-sizing: border-box;
	}
	.color-preview > div {
		max-width: 100%;
		overflow-x: auto;
	}
}

/* ===== 소형 모바일: <= 480px ===== */
@media screen and (max-width: 480px) {
	.lm-wrapper {
		padding: 10px !important;
	}
	.lm-footer {
		padding: 15px 10px !important;
	}
	.lm-header .width-unit,
	.lm-header-no .width-unit {
		padding-left: 10px;
		padding-right: 10px;
	}
	.gnb-default.fixed {
		padding: 0 10px;
	}
	.lm-pc .lm-header .logo {
		font-size: 14px;
	}
	.lm-slider--default .slider-content {
		padding: 15px;
	}
	.lm-slider--default .slider-title {
		font-size: 18px;
	}
	.lm-slider--frame .swiper-slide {
		width: 90vw !important;
	}
	.lm-footer .menu-footer > ul > li {
		display: block;
		margin: 5px 0;
	}
}