.pinpad-dimmed .low *,
.pinpad-dimmed .low *::before,
.pinpad-dimmed .low *::after {
	box-sizing: border-box;
}

.pinpad-dimmed {
	width: 100%;
	min-height: 100%;
	position: absolute;
	display: grid;
	top: 0;
	left: 0;
	background-color: #fff;
	margin: 0;
	padding: 0;
	z-index: 1000000;
}

body.pinpad-noscroll {
	overflow-y: hidden;
}

.pinpad-dimmed .inner_wrapper {
	display: grid;
	width: 100%;
	min-height: 100%;
}

	.pinpad-dimmed .inner_wrapper > div {
		width: 100%;
		height: 100%;
		display: table;
		background-color: #fff;
	}

/* 데스크탑 */
.pinpad-dimmed.window {
	display: table;
	background-color: rgb(0, 0, 0, 0.5);
}

	.pinpad-dimmed.window .wrapper {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}

	.pinpad-dimmed.window .inner_wrapper {
		display: inline-block;
		width: 400px;
	}

	.pinpad-dimmed.window .high {
		height: 300px !important;
	}


.pin-board {
	vertical-align: top;
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	text-align: center;
	/* border:1px solid #fff; */
}

	.pin-board .pin {
		font-size: 30px;
		min-height: 30px;
		max-height: 30px;
		letter-spacing: 0.3em;
		width: 100%;
		color: #666;
		word-break: break-all;
	}

	.pin-board .pin-desc {
		font-size: 20px;
		min-height: 30px;
		max-height: 30px;
	}

.pinpad {
	left: 0;
	width: 100%;
	vertical-align: bottom;
	display: table-cell;
	margin: 0;
	padding: 0;
}

	.pinpad .toolbar {
		border-top: 1px solid rgb(199, 199, 199);
		border-bottom: 1px solid rgb(199, 199, 199);
	}

		.pinpad .toolbar .button {
			padding: 3px 5px;
			font-size: 22px;
			font-weight: 400;
		}

	.pinpad .pads {
		border-top: 1px solid rgb(199, 199, 199);
	}

	.pinpad .number {
		background-color: #fff;
		width: 33.33%;
		text-align: center;
		float: left;
		cursor: pointer;
		border-bottom: 1px solid rgb(199, 199, 199);
		user-select: none;
	}

		.pinpad .number.x4 {
			width: 25%;
		}

		.pinpad .number.x5 {
			width: 20%;
		}

		.pinpad .number span {
			vertical-align: middle;
			font-size: 26px;
			font-weight: 400;
			color: #333;
		}

		.pinpad .number.x3:nth-child(3n+2) { /* 2, 5, 8 ... */
			border-left: 1px solid rgb(199, 199, 199);
			border-right: 1px solid rgb(199, 199, 199);
		}

		.pinpad .number.x4:nth-child(2n+1) { /* 1, 3, 5, 7, 9 ... */
			border-left: 1px solid rgb(199, 199, 199);
			border-right: 1px solid rgb(199, 199, 199);
		}

		.pinpad .number.x5:nth-child(5n+2) { /* 2, 7 ... */
			border-left: 1px solid rgb(199, 199, 199);
			border-right: 1px solid rgb(199, 199, 199);
		}

		.pinpad .number.x5:nth-child(5n+4) { /* 4, 9 ... */
			border-left: 1px solid rgb(199, 199, 199);
			border-right: 1px solid rgb(199, 199, 199);
		}


/**** gray skin ****/
.pinpad-dimmed.gray {
	/* background-color: #eee; */
}

	.pinpad-dimmed.gray .pinpad .number {
		background-color: #666;
	}

		.pinpad-dimmed.gray .pinpad .number > span {
			color: #ddd;
		}

	.pinpad-dimmed.gray .inner_wrapper > div {
		background-color: #eee;
	}

/**** blue skin ****/
.pinpad-dimmed.blue {
	/* background-color: #e4efff; */
}

	.pinpad-dimmed.blue .pinpad .number {
		background-color: rgb(74, 89, 177);
	}

		.pinpad-dimmed.blue .pinpad .number > span {
			color: #ddd;
		}

	.pinpad-dimmed.blue .inner_wrapper > div {
		background-color: rgb(228, 239, 255);
	}


/**** pastel gray2 skin ****/
.pinpad-dimmed.gray2 {
	/* 기존보다 연한 회색 계열 */
	background-color: #dcdcdc;
}

	.pinpad-dimmed.gray2 .pinpad .number {
		/* 파스텔톤의 부드러운 그레이 */
		background-color: #a8a8a8;
		border-radius: 8px; /* 버튼을 좀 더 부드럽게 */
		transition: background-color 0.2s ease-in-out;
	}

		.pinpad-dimmed.gray2 .pinpad .number:hover {
			/* 마우스 오버 시 약간 더 밝게 */
			background-color: #bcbcbc;
		}

		.pinpad-dimmed.gray2 .pinpad .number > span {
			/* 기존보다 밝고 부드러운 색상 */
			color: #f0f0f0;
			font-weight: bold;
		}

	.pinpad-dimmed.gray2 .inner_wrapper > div {
		/* 전체적으로 더 부드러운 그레이 배경 */
		background-color: #e6e6e6;
		border-radius: 10px;
		padding: 10px;
	}


/**** Senior-friendly pastel gray skin ****/
.pinpad-dimmed.gray3 {
	background-color: #e0e0d1; /* 연한 크림색 (눈부심 방지) */
}

	.pinpad-dimmed.gray3 .pinpad .number {
		background-color: #a89c94; /* 부드러운 브라운 그레이 */
		border-radius: 10px; /* 버튼 모서리 부드럽게 */
		font-size: 20px; /* 글자 크기 증가 */
		font-weight: bold; /* 가독성 향상 */
		transition: background-color 0.2s ease-in-out;
	}

		.pinpad-dimmed.gray3 .pinpad .number:hover {
			background-color: #8c7c6c; /* 조금 더 진한 톤으로 강조 */
		}

		.pinpad-dimmed.gray3 .pinpad .number > span {
			color: #333333; /* 선명한 다크 그레이 (눈에 잘 띄도록) */
		}

	.pinpad-dimmed.gray3 .inner_wrapper > div {
		background-color: #f0e6d6; /* 부드러운 베이지 톤 */
		border-radius: 12px;
		padding: 12px;
	}