/* 키오스크 전용 화면 - 지점 로그인 상태(branchUserIdx)에서만 적용됨 */

body.kioskMode {
	background: #ddd;
}

/* 실제 키오스크 단말 화면 규격: 가로 268mm x 세로 476mm(세로형, 약 9:16) */
body.kioskMode #wrap {
	width: 268mm;
	height: 476mm;
	max-width: 100%;
	margin: 0 auto;
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	position: relative;
}

body.kioskMode #container {
	min-height: calc(100% - 80px);
	padding-bottom: 120px; /* 하단 선택상품 고정바에 콘텐츠가 가리지 않도록 여유 */
}

/* 상단 메뉴 - 사람(회원) 아이콘만 남기고 전부 숨김(키오스크는 홈페이지 탐색이 아니라 구매 전용 단말) */
body.kioskMode .pcNav,
body.kioskMode .gnb .btn1,
body.kioskMode .gnb .btn2,
body.kioskMode .btnMenu,
body.kioskMode .subMenu {
	display: none !important;
}

/* 헤더(로고+사람아이콘)는 원래 화면 전체에 고정(fixed)되는 디자인 - 키오스크 화면(#wrap) 안쪽에 자연스럽게 들어오도록 되돌림 */
body.kioskMode #header {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
}

/* 우측 하단 플로팅 버튼(빠른상담/맨위로) - 키오스크 단말엔 불필요 */
body.kioskMode .btnFloat,
body.kioskMode .btnTop {
	display: none !important;
}

/* 선택 상품 하단 고정바 */
body.kioskMode .selectedBar {
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	box-shadow: 0 -4px 12px rgba(0,0,0,.06);
	z-index: 50;
}
body.kioskMode .selectedBar.dn {
	display: none;
}
body.kioskMode .selectedBar table {
	width: 100%;
	border-collapse: collapse;
}
body.kioskMode .selectedBar thead th {
	padding: 16px 24px;
	font-size: 22px;
	color: #888;
	font-weight: 500;
	text-align: left;
	border-bottom: 1px solid #f0f0f0;
}
body.kioskMode .selectedBar thead th:last-child {
	text-align: right;
}
body.kioskMode .selectedBar tbody td {
	padding: 20px 24px 28px;
	font-size: 34px;
	color: #111;
	font-weight: 700;
}
body.kioskMode .selectedBar tbody td:last-child {
	text-align: right;
	color: #ff3c42;
}

/* 상품 선택 화면의 "다음" 버튼 - 키오스크 터치용으로 크게 */
body.kioskMode .m41List .membership .con .btnNext,
body.kioskMode .m41List .formWrap .btns button {
	font-size: 24px;
	font-weight: 700;
	height: 64px;
	line-height: 64px;
	padding: 0 40px;
}