@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

.section input,
.section select,
#rowEditor input,
#rowEditor textarea {

    font-family:"Pretendard", sans-serif;
    font-size:11px;

}

#sidebar{

    width:360px;

    background:white;

    border-right:1px solid #ddd;

    padding:25px;

    overflow-y:auto;

    font-family:"Isamanru", normal;

}

.section{

    margin-top:20px;

}

.section label{

    display:block;

    margin-bottom:8px;

    font-size: 14px;

}

.section label.checkLabel{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

    cursor:pointer;

}

.section label.checkLabel input{

    width:auto;

    height:auto;

    margin:0;

    padding:0;

}

.section label-a{

    display:block;

    margin-bottom:8px;

    font-weight: 300;

    font-size: 14px;

}

.section select{

    width:100%;

    height:40px;

    padding:6px;

}

.section input,
.section select{

    width:100%;
    height:40px;

    margin-bottom:12px;

    padding:8px;

}

.section p{
    margin-bottom: 40px;
}

.section hr{

    margin:20px 0;

}

input[type="range"]{

    width:100%;

    margin-bottom:18px;

}

#rowEditor{

    display:flex;

    flex-direction:column;

    gap:12px;

}

#rowEditor>div{

    padding:10px;

    border:1px solid #ddd;

    border-radius:6px;

    background:#fafafa;

}

#rowEditor input{

    width:100%;

    box-sizing:border-box;

    margin-bottom:6px;

}

#rowEditor textarea{

    width:100%;

    height:58px;

    resize:none;

    box-sizing:border-box;

    margin-bottom:6px;

}

.cardSelect{

    display:flex;

    gap:24px;

    margin:12px 0 18px;

    font-size: 13px;

}

.cardSelect label{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

    font-weight:normal;

    cursor:pointer;

}

.cardSelect input{

    width:auto;

    height:auto;

    margin:0;

}

.imageEditor{

    margin-top:10px;

    padding:18px;

    border:1px solid #dddddd;

    border-radius:12px;

    background:#f7f7f7;

}

.imageEditor label{

    margin-top:12px;

    margin-bottom:6px;

}

.imageEditor label:first-child{

    margin-top:0;

}

.imageEditor input[type="file"]{

    margin-bottom:14px;

}

.imageEditor input[type="range"]{

    margin-bottom:16px;

}

#saveImage{

    width:100%;

    height:40px;

    margin-bottom:20px;

    border:1px solid #ccc;

    border-radius:4px;

    background:#fff;

    color:#333;

    font-family:"Isamanru", sans-serif;

    font-size:14px;

    cursor:pointer;

    transition:.2s;

}

.optionSection{
    margin-bottom:20px;
}

.checkLabel{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    margin-bottom:8px;
}

#creditText:disabled{
    background:#efefef;
    color:#999;
}

.section label.smallCheck{

    font-size:10px;

}

.section label.smallCheck input[type="checkbox"]{

    width:10px;
    height:10px;

    margin:0;

}

#saveImage:hover{

    background:#f5f5f5;

}

#sidebarToggle{

    display:none;

}

@media (max-width:768px){

    /*===== Bottom Sheet ===== */

    #sidebar{

        position:fixed;

        left:0;
        bottom:0;

        width:100%;

        height:70vh;

        border-right:none;
        border-top:1px solid #ddd;

        border-radius:18px 18px 0 0;

        z-index:9998;

        transform:translateY(calc(100% - 28px));

        transition: transform .35s cubic-bezier(.22,1,.36,1);

        padding-top:0;

    }

    #sidebar.open{

        transform:translateY(0);

    }

    /* ===== 손잡이 ===== */

    #sidebarHandle{

        display:flex;

        justify-content:center;

        align-items:center;

        height:36px;

        cursor:pointer;

        position:sticky;

        top:0;

        background:white;

        z-index:10;

    }

    .handleBar{

        width:54px;

        height:6px;

        border-radius:999px;

        background:#bcbcbc;

    }

    #sidebarToggle{

        display:none;

    }

}