/**
 * PC 에서도 모바일 화면 그대로 보이게 하는 틀
 *
 * 이 서비스는 앱 웹뷰와 모바일 브라우저를 전제로 만들어졌다. PC 로 열면
 * 가로가 그대로 늘어나 카드가 띄엄띄엄 놓이고, 고정 바가 화면 끝까지 뻗는다.
 * 그래서 PC 에서는 가운데에 휴대폰 폭만큼만 두고 나머지는 배경으로 남긴다.
 *
 * 규칙
 *   · 모바일에는 아무 영향이 없다 — min-width 안에서만 동작한다
 *   · position:fixed 요소는 화면 기준이라 폭만 줄이면 왼쪽으로 붙는다.
 *     left/right 를 같이 잡아 틀 안에 맞춘다.
 *   · 적용 대상은 각 화면에서 --pcm-target 로 지정하지 않고, 아래 선택자로 직접 건다.
 *     화면마다 최상위 래퍼 이름이 달라 공통 클래스를 새로 붙이는 것보다 확실하다.
 */

@media (min-width: 768px) {

	:root {
		/* 휴대폰 세로 폭. 430 은 요즘 큰 기종 기준이라 대부분의 레이아웃이 그대로 맞는다 */
		--pcm-width: 430px;
		/* 틀 기준 1vw. 아래 가로 스크롤 목록들이 vw 로 카드 폭을 잡고 있어 환산에 쓴다 */
		--pcm-vw: calc(var(--pcm-width) / 100);
	}

	html.pcm-on,
	html.pcm-on body {
		background-color: #e9ecef;
	}

	/* 가운데 세로 띠 — 이 안이 「휴대폰 화면」이다 */
	html.pcm-on body::before {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		left: 50%;
		width: var(--pcm-width);
		margin-left: calc(var(--pcm-width) / -2);
		background: #fff;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 40px rgba(0, 0, 0, .12);
		z-index: 0;
		pointer-events: none;
	}

	/* ---------- 본문 래퍼 ---------- */
	html.pcm-on .main-witdeal-wrap,
	html.pcm-on .witdeal-login-wrap {
		position: relative;
		width: var(--pcm-width);
		max-width: var(--pcm-width);
		margin-left: auto;
		margin-right: auto;
		z-index: 1;
	}

	/*
	 * 고정 요소 — 화면(뷰포트) 기준이라 래퍼를 줄여도 따라오지 않는다.
	 * 좌우를 계산해 틀 폭에 맞춘다.
	 */
	html.pcm-on .witdeal-top-fixed-bar,
	html.pcm-on .main-witdeal-header,
	html.pcm-on .main-floating-layer {
		left: 50%;
		right: auto;
		width: var(--pcm-width);
		max-width: var(--pcm-width);
		margin-left: calc(var(--pcm-width) / -2);
	}

	/*
	 * 첫 로딩 스플래시 — 화면 전체를 덮도록 만들어져 있어 PC 에서는 브라우저를 꽉 채운다.
	 * 틀 안에서만 덮게 한다.
	 */
	html.pcm-on #witdeal-splash-screen {
		left: 50%;
		right: auto;
		width: var(--pcm-width);
		max-width: var(--pcm-width);
		margin-left: calc(var(--pcm-width) / -2);
	}

	/*
	 * 슬라이딩 헤더(.header-top) — left/right 가 인라인 style 로 박혀 있어
	 * 일반 규칙으로는 밀린다. !important 로 덮는다.
	 * 여닫기는 JS 가 .hide 클래스의 translateY 로 처리하므로, 가로 중앙정렬을
	 * transform 에 합쳐 두 상태 모두 따로 지정해야 한다.
	 * (witdeal-seller-reg-max480 에서 같은 문제를 같은 방식으로 이미 풀어 두었다)
	 */
	html.pcm-on .header-top {
		left: 50% !important;
		right: auto !important;
		width: 100% !important;
		max-width: calc(var(--pcm-width) - 20px) !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	html.pcm-on .header-top:not(.hide) {
		transform: translateX(-50%) !important;
	}
	html.pcm-on .header-top.hide {
		transform: translate(-50%, -115px) !important;
	}

	/* 헤더 펼침 버튼도 틀 오른쪽 안쪽으로 */
	html.pcm-on .btn-header-top {
		right: calc(50% - var(--pcm-width) / 2 + 10px) !important;
		left: auto !important;
	}

	/*
	 * 왼쪽에서 밀려 나오는 정보카드 패널.
	 *
	 * 닫힌 상태는 transform: translateX(-100%) 로 자기 폭만큼 왼쪽에 물러나 있다.
	 * 모바일에서는 그 자리가 화면 밖이라 안 보이지만, PC 에서 틀만 좁히면
	 * 물러난 자리가 틀 왼쪽의 빈 화면이 되어 닫힌 패널이 그대로 보인다.
	 *
	 * 그래서 기준점을 화면 왼쪽 끝(left:0)에 두어 닫히면 화면 밖으로 나가게 하고,
	 * 열릴 때만 틀 왼쪽 가장자리로 이동시킨다. 밀려 나오는 동작도 그대로 남는다.
	 */
	html.pcm-on .witdeal-infocard-panel {
		left: 0;
		right: auto;
		margin-left: 0;
		width: calc(var(--pcm-width) - 40px);
		max-width: calc(var(--pcm-width) - 40px);
	}
	html.pcm-on .witdeal-infocard-panel.open {
		transform: translateX(calc(50vw - var(--pcm-width) / 2));
	}

	/*
	 * 끌어열기 감지 영역은 PC 에서 없앤다.
	 *
	 * 화면 왼쪽 32px 를 z-index 9997 로 덮는데, 이건 손가락으로 끌어 여는 장치라
	 * 마우스로는 쓸 일이 없다. 그런데 틀 왼쪽 가장자리에 두면 상단바(z-index 101)의
	 * 카드 버튼 위에 그대로 얹혀서 클릭을 먹어 버린다.
	 */
	html.pcm-on .witdeal-infocard-edge-swipe {
		display: none !important;
	}

	/* 딤은 화면 전체를 덮어야 바깥을 눌러 닫는 동작이 자연스럽다 */
	html.pcm-on .witdeal-infocard-overlay,
	html.pcm-on .header-top-dim {
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		margin-left: 0;
	}

	/* 플로팅 버튼은 틀 오른쪽 안쪽에 붙어야 한다 */
	html.pcm-on .main-floating-layer {
		display: flex;
		justify-content: flex-end;
	}

	/*
	 * 화면을 덮는 팝업들 — 딤은 전체를 덮되, 내용은 틀 폭 안에서만 보이게 한다.
	 * 딤까지 좁히면 바깥을 눌러 닫는 동작이 어색해진다.
	 */
	html.pcm-on .layer_pop .layerPopWrap,
	html.pcm-on .popup-content,
	html.pcm-on .popup-banner {
		max-width: var(--pcm-width);
		margin-left: auto;
		margin-right: auto;
	}
	html.pcm-on .popup-banner {
		left: 50%;
		width: var(--pcm-width);
		margin-left: calc(var(--pcm-width) / -2);
	}

	/* 로그인 배경은 틀 안에서만 깔린다 */
	html.pcm-on .witdeal-login-bg,
	html.pcm-on .witdeal-login-bg-slide {
		max-width: var(--pcm-width);
	}

	/* 좌상단 「전체 단지 더보기」도 틀 안으로 */
	html.pcm-on .witdeal-browse-apt-fab {
		left: 50%;
		margin-left: calc(var(--pcm-width) / -2 + 12px);
	}

	/*
	 * 가로 스크롤 목록의 카드 폭.
	 *
	 * 원본은 41vw·58vw 처럼 vw 로 잡혀 있다. vw 는 틀이 아니라 브라우저 창을 재므로
	 * PC 에서는 카드 하나가 틀보다 넓어져, 3장 늘어서야 할 자리에 한 장만 꽉 차 보인다.
	 * 같은 비율을 틀 폭 기준으로 다시 계산한다 (--pcm-vw = 틀의 1vw).
	 */
	html.pcm-on .pd-list-scroll > li {
		width: calc(41 * var(--pcm-vw));
	}
	html.pcm-on .event-list-scroll > li {
		width: calc(58 * var(--pcm-vw));
	}
	html.pcm-on .partner-list-scroll > li {
		width: calc(70 * var(--pcm-vw));
	}
	html.pcm-on .footer-horizontal-scroll .footer-item-wrap > li {
		width: calc(40 * var(--pcm-vw));
	}

	/*
	 * 몰 팝업 광고 (popMainPopup / popSimpleImagePopup).
	 *
	 * position:fixed 에 width:100% 라 PC 에서는 브라우저를 가득 채운다.
	 * 딤(.bg)은 화면 전체를 덮어야 바깥을 눌러 닫는 동작이 자연스러우므로 그대로 두고,
	 * 내용만 틀 폭으로 좁힌다.
	 */
	html.pcm-on #popMainPopup .popContentWrap,
	html.pcm-on #popSimpleImagePopup .popContentWrap {
		width: var(--pcm-width) !important;
		max-width: var(--pcm-width) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		/*
		 * PMP_windowResize() 가 $(window).width() 로 left 를 계산해 인라인으로 박는다.
		 * 브라우저 폭 기준이라 틀에서 벗어나므로 무력화한다.
		 */
		left: 0 !important;
		right: 0 !important;
	}
}