@charset "UTF-8";
html {
	height: 100%;
	width: 100%;
	font-family: "Noto Sans KR";
}
body {
	background-image: url('/resources/img/bg/1.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	width: 100%;
	height: 100%;
	margin: 0px;
	overflow: hidden;
}
body, h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans KR";
}
body[data-bg-image="1"]{
	background-image: url('/resources/img/bg/1.png');
}
body[data-bg-image="2"]{
	background-image: url('/resources/img/bg/2.png');
}

embed {
	width: 100%;
	height: 100%;
}
.theme-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 5px;
}

.theme-item {
	padding: 6px 12px;
	background: #49a2cd;
	color: white;
	border: solid 1px;
	font-weight: 600;
	border-radius: 25px;
	width: fit-content;
	cursor: pointer;
}
body[data-bg-image="1"] .theme-item {
	background: #c5d5dd;
	border-color: #bec8cd;
	color: #889195;
}
body[data-bg-image="1"] .theme-item:hover {
	border-color: #888;
}
body[data-bg-image="2"] .theme-item {
	background: #a2cbe5;
	border-color: #a2cbe5;
}
body[data-bg-image="2"] .theme-item:hover {
	border-color: #4f8fd3;
}
.container .search-group::-webkit-scrollbar {
	display: block !important;
	height: 12px !important;
}
.container .search-group::-webkit-scrollbar-thumb {
	border: 3px solid transparent !important;
}

.icon-title {
	margin-left: 0.3rem;
}
.qrcode-container {
	position: absolute;
	top: 40%;
	height: 220px;
	display: flex;
	flex-direction: row;
}
body[data-action=nologin] .qrcode-container {
	left: 50%;
}
.qrcode-container .qrcode-item {
	background: #f1f5f7;
	border-radius: 10px;
	border: solid 1px transparent;
	height: 100%;
	width: 180px;
	display: flex;
	flex-direction: column;
}
.qrcode-container .qrcode-item .qrcode-store {
	font-size: 1.1rem;
	height: 30px;
	padding: 10px;
	color: #555555;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.qrcode-container .qrcode-item .qrcode-store img {
	height: 100%;
}
.qrcode-container .qrcode-item .qrcode {
	flex: 1;
	padding: 10px;
	padding-top: 0px;
}
body[data-bg-image="1"] .qrcode-item {
	border-color: #c9d8df;
	box-shadow: 1px 1px 5px #bac8d1;
}

body[data-bg-image="2"] .qrcode-item {
	border-color: #cbe5f6;
	box-shadow: 1px 1px 5px #c7e3f8;
}

.qrcode-item:not(:last-child) {
	margin-right: 10px;
}
.qrcode-desc {
	position: absolute;
	bottom: -40%;
}
.qrcode-container .qrcode-item:hover {
    background: #e3f4ff;
    border-color: #abd7eb !important;
    cursor: pointer;
}
.qrcode-container .qrcode-item:hover .qrcode-store {
	color: #00b6ff;
}
body[data-action=login] .qrcode-container {
	top: 76%;
	right: 62%;
	height: 160px;
}
body[data-action=login] .qrcode-container .qrcode-item {
	width: 140px;
}
body[data-action=login] .qrcode-container .qrcode-item .qrcode-store {
	font-size: 0.9rem;
	height: 20px;
	padding: 5px;
}
body .qrcode-container .qrcode-title {
	display: none;
}
body[data-action=login] .qrcode-container .qrcode-desc {
	font-size: 0.8rem;
}

.container {
	padding: 60px 20px;
	margin: 30px 0px;
	background-color: #404141;
	box-shadow: 1px 1px 5px #809ca9;
	border-radius: 24px;
	position: fixed;
	width: 400px;
	left: 50%;
	height: calc(100% - 180px);
	border-left: none;
	border-right: none;
}
embed {
	width: 100%;
	height: 100%;
	background: white;
}
/* App Container 전환 시점 */
@media (max-width: 1023px){
	body {
		background: #d8e3e8 !important;
	}
	body[data-bg-image="2"] {
		background: #d6e9f8 !important;
	}
	
	body[data-action=nologin] .qrcode-container {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	body[data-action=nologin] .qrcode-container .qrcode-title {
		display: block;
		position: absolute;
		top: -40%;
	}
	/* Login Version */
	body[data-action=login] .qrcode-container {
		top: 20%;
		left: 5%;
		right: 80%;
		height: 160px;
		flex-direction: column;
	}
	body[data-action=login] .qrcode-container .qrcode-desc {
		position: absolute;
		bottom: -300px;
		width: 90%;
	}
	body[data-action=login] .qrcode-container .qrcode-item:not(:last-child) {
		margin-right: 0px;
		margin-bottom: 10px;
	}
	.theme-container {
		display: none;
	}
	.container {
		transform: translateX(-50%);
	}
	
	.container {
		padding: 0px;
		margin: 0px;
		box-shadow: none;
		background-color: white;
		position: fixed;
		width: 512px;
		left: 50%;
		height: 100%;
		border-left: solid 1px #e1e1e1;
		border-right: solid 1px #e1e1e1;
	}
}

/* Mobile */
@media (max-width: 600px){
	body[data-action=login] .qrcode-container  {
		display: none;
	}
	body[data-action=nologin] .qrcode-container {
		height: 190px;
	}
	body[data-action=nologin] .qrcode-container .qrcode-item {
		width: 150px;
	}
	body[data-action=nologin] .qrcode-container .qrcode-item .qrcode > img, canvas {
		width: 130px;
	}
	body[data-action=nologin] .qrcode-container > .qrcode-title {
		top: -50%;
	}
	body[data-action=nologin] .qrcode-container > .qrcode-desc {
		bottom: -50%;
	}
	.container {
		padding: 0px;
		margin: 0px;
		box-shadow: none;
		position: fixed;
		width: 100%;
		height: 100%;
	}
}