@charset "utf-8";

#sny-default-editor { display: inline-block; *display: inline; zoom: 1; margin: 0; width: 100%; }
#sny-default-editor select { display: inline; margin: 0; padding: 5px 2px; font-size: 12px; width: 30%; height: 28px; line-height: 28px; color: #666666; border-radius: 0; border: 0; border: 1px solid #ffffff; box-shadow: none; background-color: rgba(0, 0, 0, 0.03); }
#sny-default-editor input[type=text],
#sny-default-editor input[type=email],
#sny-default-editor input[type=number],
#sny-default-editor input[type=data],

#sny-default-editor input[type=password] { display: inline; margin: 0; padding: 6px 2px; width: 87%; height: 35px; line-height: 28px; font-size: 12px; color: #666666; border-radius: 0; border: 0; border: 1px solid #cccccc; box-shadow: none; background-color: rgba(0, 0, 0, 0); border-radius:8px; }
#sny-default-editor input[type=file] { display: inline; margin: 0; padding: 0; width: 30%; font-size: 12px; color: #666666; border-radius: 0; border: 0; box-shadow: none; background-color: rgba(0, 0, 0, 0.03); }
#sny-default-editor .sny-attr-title input { width: 80%; }
#sny-default-editor .sny-attr-row { float: left; padding: 5px 0; width: 100%; }
#sny-default-editor .sny-attr-row1 { float: left; padding: 5px 0px 10px 0px; width: 100%; }

#sny-default-editor .sny-attr-row .attr-name { display: inline; float: left; margin: 0; padding: 0 10px 0 0px; width: 150px; line-height: 30px; color: #545861; font-size: 13px; font-weight: bold; }
#sny-default-editor .sny-attr-row .attr-value { display: inline;font-size: 12px; line-height: 20px;word-spacing:2px; vertical-align: middle; font-size: 13px;}
#sny-default-editor .sny-attr-row .attr-value .attr-value-option { padding-right: 20px; cursor: pointer;}

#sny-default-editor .sny-attr-row1 .attr-name { display: inline; float: left; margin: 0; padding: 0 10px 0 10px; width: 140px; line-height: 20px; color: #545861; font-size: 14px; font-weight: bold; }
#sny-default-editor .sny-attr-row1 .attr-value { display: inline;font-size: 12px; line-height: 40px;word-spacing:2px; font-size: 14px;}
#sny-default-editor .sny-attr-row1 .attr-value .attr-value-option { padding-right: 20px; cursor: pointer;}

#sny-default-editor .sny-content { float: left; padding: 9px 0; width: 100%; text-align: center; background-color: white; }
#sny-default-editor .sny-content textarea { display: inline; margin: 0; padding: 0; width: 98%; height: 250px; font-size: 12px; }
#sny-default-editor .sny-control { float: left; padding: 15px 0; width: 100%; }
#sny-default-editor .sny-control .left { position: static; float: left; }
#sny-default-editor .sny-control .right { position: static; float: right; width: 50%; text-align: right; }

label {
  font-size: 13px;
}
.view-table td {
  font-size: 13px;
}
#song-default-editor .song-attr-row .attr-name { display: inline; float: left; margin: 0; padding: 0 10px 0 0px; width: 150px; line-height: 0px; color: #545861; font-size: 14px; font-weight: bold; }

@media screen and (max-width: 1200px) {
	#sny-default-editor select,
	#sny-default-editor input[type=text],
	#sny-default-editor input[type=email],
	#sny-default-editor input[type=number],
	#sny-default-editor input[type=data],
	#sny-default-editor input[type=password],
	#sny-default-editor input[type=file] { width: 100%; }
	#sny-default-editor .sny-attr-row { padding: 3px 0; }
	#sny-default-editor .sny-attr-row .attr-name { padding: 0; width: 100%; font-size: 12px; }
	#sny-default-editor .sny-attr-row1 { padding: 10px 0; }
	#sny-default-editor .sny-attr-row1 .attr-name { padding: 0; width: 100%; font-size: 12px; }
	#sny-default-editor .sny-attr-row .attr-value { padding: 0; width: 100%; font-size: 12px; }

  label {
    font-size: 12px;
  }
  .view-table td {
    font-size: 12px;
  }
	#song-default-editor .song-attr-row .attr-name { padding: 0; width: 100%; font-size: 12px; }
}

/* ¿¹¾à½Ã°£ ¼±Åà ¹Ú½º ÃÖÁ¾ ½ºÅ¸ÀÏ */
#sny-default-editor select#wr_5_select {
    width: 250px; /* PC ȯ°æ °¡·Î 250px °íÁ¤ */
    height: 40px; /* ±âÁ¸ input ³ôÀÌ¿Í ÅëÀÏ */
    line-height: 35px;
    padding: 0 10px;
    border: 1px solid #cccccc;
    border-radius: 8px; /* º¸µå ½ºÅ¸ÀÏÀÇ µÕ±Ù ¸ð¼­¸® Àû¿ë */
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    /* Ä¿½ºÅÒ È­»ìÇ¥ µðÀÚÀÎ */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center;
}

/* ¹ÝÀÀÇü: 1200px ÀÌÇÏ ¸ð¹ÙÀÏ È¯°æ */
@media screen and (max-width: 1200px) {
    #sny-default-editor select#wr_5_select {
        width: 100%; /* ¸ð¹ÙÀÏ¿¡¼­´Â °¡·Î ²Ë Â÷°Ô */
        display: block;
        margin-top: 5px;
        font-size: 12px;
    }
}

.line_sny {
  border-top: 1px solid #f1f1f1  ;
  margin: 0px 0px;
}


/* 1. ¸ðµç input ¹× select ¹Ú½º °øÅë ¼³Á¤ */
#sny-default-editor input[type=text],
#sny-default-editor input[type=email],
#sny-default-editor input[type=number],
#sny-default-editor input[type=password],
#sny-default-editor select {
    font-size: 14px !important; /* PC ±ÛÀÚ Å©±â */
    padding-left: 10px !important; /* ¿ÞÂÊ ¿©¹é Ãß°¡ (±ÛÀÚ ¾È ºÙ°Ô) */
    padding-right: 10px; /* ¿À¸¥ÂÊ ¿©¹éµµ Ãß°¡ */
    color: #333;
    height: 38px; /* ¿©¹é°ú ÆùÆ® Å©±â¿¡ ¸ÂÃç ³ôÀÌ ¼ÒÆø Á¶Á¤ */
    line-height: 38px;
    box-sizing: border-box; /* ÆеùÀÌ ¹Ú½º Å©±â¿¡ ¿µÇâÀ» ÁÖÁö ¾Êµµ·Ï ¼³Á¤ */
}

/* 2. Placeholder(¾È³» ¹®±¸) ¿©¹é ¹× Å©±â ¼³Á¤ */
#sny-default-editor input::placeholder { font-size: 14px; padding-left: 2px; }
#sny-default-editor input::-webkit-input-placeholder { font-size: 14px; padding-left: 2px; }

/* 3. ¸ð¹ÙÀÏ È¯°æ (1200px ÀÌÇÏ) ¼³Á¤ */
@media screen and (max-width: 1200px) {
    #sny-default-editor input[type=text],
    #sny-default-editor input[type=email],
    #sny-default-editor input[type=number],
    #sny-default-editor input[type=password],
    #sny-default-editor select {
        font-size: 12px !important; /* ¸ð¹ÙÀÏ ±ÛÀÚ Å©±â */
        padding-left: 8px !important; /* ¸ð¹ÙÀÏÀº ¿©¹éÀ» »ì¦ ÁÙÀÓ */
        height: 40px; /* ÅÍÄ¡Çϱâ ÆíÇϵµ·Ï ³ôÀÌ À¯Áö */
    }
    
    #sny-default-editor input::placeholder { font-size: 12px; }
    #sny-default-editor input::-webkit-input-placeholder { font-size: 12px; }
}

/* 4. ¿¹¾à½Ã°£ ¼±Åà ¹Ú½º Àü¿ë µðÀÚÀÎ (°¡·Î 250px) */
#sny-default-editor select#wr_5_select {
    width: 250px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center;
    background-color: #fff;
}

@media screen and (max-width: 1200px) {
    #sny-default-editor select#wr_5_select {
        width: 100%;
    }
}


/* [PC Àü¿ë] ¸Þ´º ¿¹¾à Çà ÄÁÅ×ÀÌ³Ê ¹× ¿ä¼Ò Á¤·Ä */
#sny-default-editor .menu-item-row {
    margin-bottom: 10px;
    display: flex;
    align-items: center; /* ¼öÁ÷ °¡¿îµ¥ Á¤·Ä */
    gap: 8px;
}

/* ¸Þ´º ¼±Åà ¹Ú½º & Àοø ÀÔ·Â ¹Ú½º µðÀÚÀÎ º¸Á¤ */
#sny-default-editor select.menu-select,
#sny-default-editor input[type=number].menu-count {
    height: 40px !important;
    line-height: normal !important; /* ±ÛÀÚ ½ò¸² ¹æÁö: normal ¼³Á¤ ÈÄ paddingÀ¸·Î Á¶Àý */
    padding: 8px 10px !important; /* »óÇÏ ¿©¹éÀ» ÅëÇØ ¼öÁ÷ Áß¾Ó È®º¸ */
    border: 1px solid #cccccc;
    border-radius: 8px;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
}

/* ¸Þ´º ¼±Åà ¹Ú½º (È­»ìÇ¥ Æ÷ÇÔ) */
#sny-default-editor select.menu-select {
    width: 250px !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 30px !important;
}

/* Àοø¼ö ÀÔ·Â ¹Ú½º */
#sny-default-editor input[type=number].menu-count {
    width: 80px !important;
}

/* »èÁ¦ ¹öÆ° */
#sny-default-editor .menu-del-btn {
    height: 38px;
    padding: 0 12px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    color: #666;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    vertical-align: middle;
}

/* Ãß°¡ ¹öÆ° */
#sny-default-editor .menu-add-btn {
    padding: 10px 20px;
    background-color: #fff;
    border: 1px solid #333;
    color: #333;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 5px;
}

/* [¸ð¹ÙÀÏ ¹ÝÀÀÇü] ¿äûÇϽŠÀÌÀü µðÀÚÀÎ ÄÚµå Àû¿ë */
@media screen and (max-width: 1200px) {
    #sny-default-editor .attr-value {
        width: 100% !important;
    }
    
    #sny-default-editor .menu-item-row {
        flex-wrap: wrap; /* ¸ð¹ÙÀÏ¿¡¼­´Â ÁÙ¹Ù²Þ Çã¿ë */
        border-bottom: 1px dashed #eaeaea;
        padding-bottom: 10px;
        margin-bottom: 10px;
        gap: 0; /* ¸ð¹ÙÀÏÀº °¸ Á¦°Å ÈÄ ¿©¹éÀ¸·Î Á¶Àý */
    }

    #sny-default-editor select.menu-select {
        width: 100% !important; /* ²Ë Â÷°Ô */
        margin-bottom: 5px;
        font-size: 12px !important; /* ¿äûÇϽŠ¸ð¹ÙÀÏ ÆùÆ® Å©±â */
    }

    #sny-default-editor input[type=number].menu-count {
        width: 100px !important; /* ¸ð¹ÙÀÏ¿¡¼­µµ ÅÍÄ¡Çϱâ ÁÁ°Ô */
        font-size: 12px !important;
    }

    #sny-default-editor .menu-unit {
        font-size: 12px;
        margin: 0 10px 0 5px;
        line-height: 38px;
    }

    #sny-default-editor .menu-del-btn {
        height: 38px;
        flex-grow: 1;
        margin-left: 5px;
    }

    .add-menu-btn-wrap {
        text-align: center;
    }
}


input[type="radio"] {width:13px; height:13px; margin:0 0 2px; padding:0; border: 1px solid #FFF; vertical-align:middle;}
input[type="checkbox"] {width:13px; height:13px; margin:0 0 2px; padding:0; border: 1px solid #FFF; vertical-align:middle;}