@charset "UTF-8";

::placeholder{
	color:var(--color-gray-50);
}

input{
	width: 100%;
	height: 56px;
	padding:0 16px;
	box-sizing : border-box;
	box-shadow: inset 0 0 0 1px var(--color-gray-10);
	border-radius: 4px;
	cursor: pointer;
	transition: 0.3s
}

textarea{
	width: 100%;
	padding:20px 16px;
	box-sizing : border-box;
	box-shadow: inset 0 0 0 1px var(--color-gray-10);
	border-radius: 4px;
	cursor: pointer;
	transition: 0.3s
}

select{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 200px;
	height: 56px;
	padding:0 16px;
	box-sizing : border-box;
	box-shadow: inset 0 0 0 1px var(--color-gray-10);
	border-radius: 4px;
	cursor: pointer;
	transition: 0.3s
}

:where(input, textarea, select):focus{
	box-shadow: inset 0 0 0 2px var(--color-primary-70)
}

:where(input, textarea, select):disabled{
	background-color: var(--color-gray-05)
}

input:where(input[type="checkbox"], input[type="hidden"], input[type="image"], input[type="radio"], input[type="range"], input[type="reset"], input[type="submit"]){
	all: unset
}

input:where(input[type="checkbox"], input[type="hidden"], input[type="image"], input[type="radio"], input[type="range"], input[type="reset"], input[type="submit"]):focus{
	all: unset
}

input[type="radio"]{
	appearance: none;
	border-radius: 50%;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	box-shadow: inset 0 0 0 1px var(--color-gray-30);
	cursor: pointer;
}

input[type="radio"]:checked{
	position: relative;
	box-shadow: inset 0 0 0 1px var(--color-primary-70);
}

input[type="radio"]:checked::before{
	content: '';
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--color-primary-70)
}

input[type="checkbox"]{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	margin: -1px;
	clip-path: inset(50%);
}

input[type="checkbox"] + label{
	display: block;
	height: 24px;
	background:url(../img/ico-check-off.svg) no-repeat left center
}

input[type="checkbox"]:checked + label{
	display: block;
	height: 24px;
	background:url(../img/ico-check-on.svg) no-repeat left center
}

input[type="number"]::-webkit-inner-spin-button{
	appearance: none
}

input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0
}

input[type="number"]{
	-moz-appearance: textfield
}

input[type="file"]::file-selector-button{
	display: flex;
	align-content: center;
	flex-wrap: wrap
}

.primary-fill__btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-primary-70);
	color: var(--color-gray-00);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	box-sizing: border-box;
	user-select: none
}

.primary-fill__btn:hover{
	background-color: var(--color-primary-80);
	color: var(--color-gray-00)
}

.primary-line__btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-shadow: inset 0 0 0 1px var(--color-primary-70);
	color: var(--color-primary-70);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	box-sizing: border-box;
	user-select: none
}

.primary-line__btn:hover{
	color: var(--color-primary-80);
}

.gray-fill__btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-gray-50);
	color: var(--color-gray-00);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	box-sizing: border-box;
	user-select: none
}

.gray-fill__btn:hover{
	background-color: var(--color-gray-60)
}

.gray-line__btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-gray-00);
	box-shadow: inset 0 0 0 1px var(--color-gray-10);
	color: var(--color-gray-80);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	box-sizing: border-box;
	user-select: none
}

.gray-line__btn:hover{
	background-color: var(--color-gray-05)
}

.black-fill__btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-gray-80);
	color: var(--color-gray-00);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	box-sizing: border-box;
	user-select: none
}

.black-fill__btn:hover{
	background-color: var(--color-gray-90)
}


.black-line__btn{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-shadow: inset 0 0 0 1px var(--color-gray-90);
	color: var(--color-gray-80);
	border-radius: 4px;
	transition: 0.3s;
	text-align: center;
	box-sizing: border-box;
	user-select: none
}

.black-line__btn:hover{
	background-color: var(--color-gray-05)
}

.btn-round{
	border-radius: 100px
}

.btn-24{
	height: 24px;
	padding:0 8px;
	font-size: 1.4rem;
	line-height: 1
}

.btn-32{
	height: 32px
}

.btn-36{
	height: 36px
}

.btn-32, .btn-36{
	padding:0 20px;
	font-size: 1.5rem;
	line-height: 1
}

.btn-40{
	height: 40px;
}

.btn-44{
	height: 44px;
}

.btn-40, .btn-44{
	padding:0 24px;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1
}

.btn-48{
	height: 48px;
	padding:0 28px
}

.btn-52{
	height: 52px
}

.btn-56{
	height: 56px
}

.btn-48, .btn-52, .btn-56{
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1
}

.btn-52, .btn-56{
	padding:0 28px
}