@charset "utf-8";

#pettag{display:flex;flex-wrap:wrap;gap:30px;margin-bottom:70px;}
#pettag .bo_w_preview{position:relative;width:calc(50% - 15px);display:flex;flex-direction:column;overflow:hidden;}
#pettag .bo_w_preview .image{position:absolute;top:0;left:0;width:100%;height: 100%;aspect-ratio: 600 / 1000;display:flex;}
#pettag .bo_w_preview .image img{display:block;width:100%;height: 100%;object-fit:cover;aspect-ratio: 600 / 1000;object-position:top center;}
#pettag .bo_w_preview .title{position:relative;z-index:2;margin-top:20%;display:flex;align-items:center;justify-content:center;}
#pettag .bo_w_preview .title input{width:60%;height:40px;background:transparent;font-size:24px;font-weight:bold;text-align:center;pointer-events:none;color:#00487f;}
#pettag .bo_w_preview .text{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
#pettag .bo_w_preview .text input#wr_1_result{color:#0079d6}
#pettag .bo_w_preview .text.text1 input{margin-top:10px;height:60px;font-size:50px;font-weight:bold;}
#pettag .bo_w_preview .text.text2 input{margin-top:5px;height:40px;font-size:40px;font-weight:bold;}
#pettag .bo_w_preview .text.text3 input{margin-top:25px;width:100%;height:30px;font-size:24px;font-weight:bold;}
#pettag .bo_w_preview .text.text4 textarea{margin-top:10px;height:250px;font-size:14px;font-weight:500;text-align:center;}
#pettag .bo_w_preview .text input{width:70%;height:40px;background:transparent;text-align:center;pointer-events:none;color:#00487f;}
#pettag .bo_w_preview .text textarea{width:60%;height:250px;background:transparent;color:#00487f;}
#pettag .bo_w_preview .sticker{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}
#pettag .bo_w_preview .sticker img{position:absolute;max-width:120px;height:auto;pointer-events: auto !important;user-select: none;cursor: move;}
#pettag .bo_w_form{width:calc(50% - 15px);display:flex;flex-direction:column;}
#pettag .bo_w_form .image{margin-bottom:15px;}
#pettag .bo_w_form .image ul{display:flex;flex-wrap:wrap;gap:10px;}
#pettag .bo_w_form .image li{width:calc(20% - 8px);}
#pettag .bo_w_form .image li a{display:block;}
#pettag .bo_w_form .image li img{width:100%;height:auto;}
#pettag .bo_w_form .input{margin-bottom:15px;}
#pettag .bo_w_form .input text{}
#pettag .bo_w_sticker{width:100%;}
#pettag .bo_w_sticker ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;}
#pettag .bo_w_sticker li{width:auto;}
#pettag .bo_w_sticker li label{position:relative;display:flex;align-items:center;border-radius:8px;background:#ffffff;overflow:hidden;gap:12px;}
#pettag .bo_w_sticker li .chk{position:absolute;top:5px;left:5px;display:flex;align-items:center;cursor:pointer;white-space:nowrap;gap:10px;}
#pettag .bo_w_sticker li .chk input{display:none;}
#pettag .bo_w_sticker li .chk input ~ i{width:24px;height:24px;flex:0 0 auto;background:url("../img/common/circle-unchecked.svg") no-repeat 50% 50% / contain;border-radius:50%;background-color:#ffffff;}
#pettag .bo_w_sticker li .chk input ~ span{}
#pettag .bo_w_sticker li .chk input:checked ~ i{width:24px;height:24px;flex:0 0 auto;background:url("../img/common/circle-checked.svg") no-repeat 50% 50% / contain;}
#pettag .bo_w_sticker li .img{width:100px;height:80px;border-radius:8px;border:1px solid #e0e0e0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:5px;}
#pettag .bo_w_sticker li .img img{width:100%;height:100%;object-fit:contain;}

@media (max-width: 769px) {
    #pettag{flex-direction:column;padding:0 16px;}
    #pettag .bo_w_preview{width:100%;}
    #pettag .bo_w_form{width:100%;}
}