@charset "utf-8";

body{background:#fff; color:var(--color-text) !important}
label { display:block; margin-bottom:8px; font-weight:600; }
button,select { padding:8px 12px; font-size:15px; cursor:pointer; }
@media screen and (max-width:1280px){
	section.sect {padding: 4rem 3vw;}
}
@media screen and (min-width:1281px){
	section.sect {padding: 7.5rem 0;}
}
h2.qr-title{text-align: center}
p.qr-title{text-align: center; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px}

.qr-step{display:flex; flex-direction:column}
.qr-step-item-format{margin:0}
li.qr-step-item span{display: flex; color: var(--color-primary); text-align: center; justify-content: center; align-items: center; font-weight: 700; border-radius: 50%; background: var(--color-background-keyword)}



.qr-load{display: flex; justify-content: center}
.qr-load .qr-step-item{display: flex; flex-direction: column; align-items: center}
.qr-load .qr-step-item h2{text-align: center}
select#qr-format{width: 100%; border-radius: 0;  border: 1px solid var(--color-border); background: url(https://www.picosoft.kr/image/qr/arrow.png) calc(100% - 15px) center no-repeat #f5f5f5; background-size: 12px}
select#qr-format::-ms-expand{display: none}
select#qr-format{-o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none}
select#qr-format option{background: #fff; color: var(--color-text); padding: 5px 0}
select#qr-size{width: 100%; border-radius: 0; border: 1px solid var(--color-border); background: url(https://www.picosoft.kr/image/qr/arrow.png) calc(100% - 15px) center no-repeat #f5f5f5; background-size: 12px}
select#qr-size::-ms-expand{display: none}
select#qr-size{-o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none}
select#qr-size option{background: #fff; color: var(--color-text); padding: 5px 0}
button#qr-generate{background-color: var(--color-button-background); color: #fff; font-weight: 700; border-radius: 10px}
#qr-preview{width: 100%; white-space: pre-line; text-align: center; box-sizing: border-box; border: 1px dashed var(--color-border); display: flex; justify-content: center; align-items: center; background-color: #fff}
button#qr-download{display: flex; justify-content: center; align-items: center; background-color: var(--color-secondary); color: #fff; font-weight: 700; border-radius: 10px}
button#qr-download svg {fill: #fff}
.qr-down .qr-step-item-download h3{white-space: pre-line; text-align: center; line-height: 160%}
.qr-down{display: flex; justify-content: center}
.qr-down .qr-step-item-download{border-radius: 30px; display: flex; flex-direction: column; align-items: center}
@media screen and (min-width:768px) and (max-width:1280px){
	.qr-step{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); grid-auto-flow: column}

}
@media screen and (max-width:1280px){
	h2.qr-title{font-size: 2rem; margin-bottom: 10px}
	p.qr-title{font-size: 1rem}
	.qr-generator{margin-top: 2.67rem}

	.qr-step{gap: 1rem 1.33rem}
	li.qr-step-item span{margin: 0 auto 10px; font-size: 17px; width: 2rem; height: 2rem}
	li.qr-step-item h3{text-align: center; font-size: 1.2rem; margin-bottom: 1rem}
	select#qr-size{height: 40px}
	
	.qr-load{margin-top: 1.33rem}
	select#qr-format{height: 40px}
	button#qr-generate{width: 8rem; padding: 10px; font-size: 1.07rem}
	#qr-preview{max-width: 13.33rem; aspect-ratio: 1 / 1; margin-top: 1.33rem; padding: 12px}
	button#qr-download{height: 40px; width: 13.33rem; margin-top: 10px; padding:8px 12px}
	button#qr-download svg {width: 13px; margin-right: 8px}
	
	.qr-down{margin-top: 50px}
}
@media screen and (min-width:1281px){
	h2.qr-title{font-size: 2.5rem; margin-bottom: 0.94rem}
	p.qr-title{font-size: 1.13rem}
	.qr-generator{margin-top: 5rem}

	.qr-step{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); grid-auto-flow: column; gap: 1.25rem 6.25rem}
	li.qr-step-item span{margin: 0 auto 1.25rem; font-size: 1.25rem; width: 2.5rem; height: 2.5rem}
	li.qr-step-item h3{text-align: center; font-size: 1.37rem; margin-bottom: 1.25rem}
	select#qr-size{height: 46px}
	
	.qr-load{margin-top: 3.125rem}
	select#qr-format{height: 2.87rem}
	button#qr-generate{width:12.5rem; padding: 0.94rem; font-size: 1.13rem}
	#qr-preview{width: 18.75rem; height: 18.75rem; margin-top: 1.25rem; padding: 12px}
	button#qr-download{height: 2.87rem; width: 18.75rem; margin-top: 10px; padding:8px 12px}
	button#qr-download svg {width: 15px; margin-right: 10px}
	.qr-down{margin-top: 5rem}
}