:root{
	--layout-padding:2rem;
	--site-width:1280px;
}

/*
	Customize Layout
*/
#layout-customize{
	/*background:url('https://m-cdn.phonearena.com/images/articles/359946-image/zazzle-custom-phone-cases.jpg') no-repeat center center;
	background-size:cover;*/
	height:100vh;
	background-color:#F0F1F5;
	background-color:#fff;
}
/*
#layout-customize::before{
	content:'';
	background-color:rgba(0,0,0,.7);
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}*/
#layout-customize .container{
	
}
#layout-customize header{
	background-image: linear-gradient(-60deg,transparent,#0ab9cf 14%,#7535e7 28%,#f9132f 42%,#ffbd00 56%,#72a043 70%,#0ab9cf 84%,rgba(0,196,204,0));
}
#layout-customize .card{
	border-radius:1rem;
	box-shadow: 2px 5px 15px rgba(90,90,90,0.1);
	border:0;
}
#layout-customize #canvas-container{
	padding:0rem;
}
#layout-customize canvas{
	/*box-shadow: 2px 5px 15px rgba(90,90,90,0.1);*/
	overflow:visible
}
#layout-customize .canvas-container{
	margin:0 auto;
}
#layout-customize .btn-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:0;
	font-size:1rem;
	background-color:transparent;
}
#layout-customize .btn-icon span{
	padding-right:.5rem;
}
#layout-customize .btn-icon label{
	font-size:1rem;
	white-space:nowrap;
	margin:0;
	display:flex;
	align-items:center;
}
#layout-customize .btn-icon input[type="file"]{
	display:none;
}
#layout-customize .btn-icon + .btn-icon{
	margin-left:1.5rem;
	padding:.5rem;
	transition:.3s;
	border-radius:var(--element-radius);
}
#layout-customize .btn-icon + .btn-icon:hover{
	background-color:var(--color-muted-bg);
	color:#121212;
}

#layout-customize .page{
	position:fixed;
	left:0;
	top:0;
	width:100%;
}
#layout-customize .page .page__head{
	height:auto;
	background-color:#121212!important;
	color:#fff;
	padding:.5rem 0;
}
#layout-customize .page__head .btn-icon{
	color:#fff;
}
#layout-customize .page .page__head #controller{
	
	
	
}
#exit{
	color:#fff;
	font-size:2rem;
}

/*
	Text Option
*/
#textOptions{
	display:none;
	background-color:#fff;
}
#textOptions input{
	border-radius:8px;
}
#textOptions .col{
	padding-right:1rem;
}
#textOptions label{
	font-size:.8rem;
	margin-bottom:.25rem;
}
#textOptions.active{
	display:flex;
}
#textOptions .back{
	border:0;
	padding:.5rem;
	margin-left:-1rem;
	background-color:#fff;
}
#textOptions .row{
	margin-bottom:1rem;
}
#textOptions label{
	display:block;
}
#textOptions .row:last-child{
	margin-bottom:0;
}
	#fontColor{
		border:1px solid #121212;
		display:inline-block;
	}

#textOptions .cols{
	display:flex;
}
	#textOptions .cols .col{
		width:50%;
	}

#totalPrice{
	padding:.5rem 0;
	padding-bottom:0;
	border-top:1px dashed #dfdfdf;
	margin-top:2rem;
}

/* Layer */
#layers{
	max-width:185px;
}
#layout-customize #elementButtons button,
#layout-customize #elementButtons .preview-item{
	display:block;
	border:0;
	border-bottom:1px solid #efefef;
	width:100%;
	text-align:left;
	font-size:1rem;
	padding:1rem;
}
#layout-customize #elementButtons button.active,
#layout-customize #elementButtons .preview-item.active{
	background-color:#f4f4f4;
}
#layout-customize #elementButtons .preview-item{
	padding:1rem;
	line-height:1;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#layout-customize #elementButtons .preview-item .preview-controls{
	display:flex;
}
#layout-customize #elementButtons .preview-item .preview-controls button{
	border:0;
	font-size:.8rem;
	padding:0;
	background-color:transparent;
}
	#layout-customize #elementButtons .preview-item .preview-controls button + button{
		margin-left:.5rem;
	}
#layout-customize #elementButtons .preview-item.txt img{
	max-width:70%;
	height:30px!important;
}
#layout-customize #elementButtons .preview-item.img img{
	width:50px!important;
}
#emptyText{
	padding:2rem 0;
	display:block;
}
#layout-customize header .container{
	
}
#layout-customize header .container .header__col:last-child{
	
}
#layout-customize header .container .header__col:last-child .btn{
	
}

#layout-customize .page .page__body{
	padding:3rem 0;
}

/*
	Right Area
*/
#customInfoArea h2{
	margin-bottom:0rem;
}
#customInfoArea .step{
	white-space:nowrap;
}
#customInfoArea .step::before {
    content: "check";
    font-family: 'Material Symbols Outlined'; /* Google Fonts에서 제공하는 Material Icons */
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    font-size: 16px; /* 크기 조절 */
    line-height: 1;
    vertical-align: middle;
    margin-right: .5rem;
    font-variation-settings: 'FILL' 0; /* 비어있는 아이콘 */
    font-feature-settings: 'FILL' 0;
    transition:.3s;
}

#customInfoArea .step.active::before {
    content: "check_circle";
    font-family: 'Material Symbols Outlined';
    color: var(--color-success); /* 성공 상태 색상 */
    font-variation-settings: 'FILL' 1; /* 채워진 아이콘 */
    font-feature-settings: 'FILL' 1;
    background:#53AB83;
    border-radius:50%;
    color:#fff;
}
.only-apple{
	
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1; /* 채워진 상태 */
    color: gold; /* 채워진 상태에서 색상 변경 */
}

#controls{
	display:none;
}
#controls.active{
	display:block;
}
#welcomeMessage{
	display:block;
}
#welcomeMessage.active{
	display:none;
}




#saveCanvas{
	position:fixed;
	right:1rem;
	bottom:1rem;
}


#cart_count{
	display:inline-block;
	margin-left:.5rem;
}