diff --git a/src/components/common/spinner/PopSpinner.jsx b/src/components/common/spinner/PopSpinner.jsx
new file mode 100644
index 00000000..56b54b76
--- /dev/null
+++ b/src/components/common/spinner/PopSpinner.jsx
@@ -0,0 +1,7 @@
+export default function PopSpinner() {
+  return (
+    <div className="pop-spinner">
+      <span className="loader"></span>
+    </div>
+  )
+}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 9ec806ef..35c843e7 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,531 +4,550 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop{
-    from{opacity: 0; scale: 0.95;}
-    to{opacity: 1; scale: 1;}
+@keyframes mountpop {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
-@keyframes unmountpop{
-    from{opacity: 1; scale: 1;}
-    to{opacity: 0; scale: 0.95;}
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
-.normal-font{
-    font-size: 12px;
-    font-weight: 400;
-    color: #fff;
+.normal-font {
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
 }
-.bold-font{
-    font-size: 12px;
-    font-weight: 500;
-    color: #fff;
+.bold-font {
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
 }
 
-.modal-pop-wrap{
-    position: fixed;
+.modal-pop-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid #000;
+  border-radius: 4px;
+  background-color: #272727;
+  z-index: 100000;
+  &.xsm {
+    width: 200px;
+  }
+  &.xxxm {
+    width: 240px;
+  }
+  &.xxm {
+    width: 270px;
+  }
+  &.xm {
+    width: 300px;
+  }
+  &.ssm {
+    width: 380px;
+  }
+  &.sm {
+    width: 580px;
+  }
+  &.r {
+    width: 400px;
+  }
+  &.lr {
+    width: 440px;
+  }
+  &.lr-2 {
+    width: 450px;
+  }
+  &.lrr {
+    width: 480px;
+  }
+  &.ml {
+    width: 530px;
+  }
+  &.l-2 {
+    width: 640px;
+  }
+  &.lx-2 {
+    width: 740px;
+  }
+  &.lx {
+    width: 770px;
+  }
+  &.l {
+    width: 800px;
+  }
+  &.ll {
+    width: 900px;
+  }
+  &.mount {
+    animation: mountpop 0.17s ease-in-out forwards;
+  }
+  &.unmount {
+    animation: unmountpop 0.17s ease-in-out forwards;
+  }
+  &.alert {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: transparent;
+    border: none;
+    .modal-head {
+      background-color: transparent;
+      padding: 0 0 8px;
+      .modal-close {
+        width: 20px;
+        height: 20px;
+        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
+      }
+    }
+    .modal-body {
+      background-color: #fff;
+      padding: 22px;
+      border-radius: 4px;
+      border: 1px solid #101010;
+      color: $alert-color;
+      .alert-title {
+        font-size: 13px;
+        font-weight: 700;
+        color: $alert-color;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  background-color: #000;
+  // overflow: hidden;
+  cursor: pointer;
+  h1.title {
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: 700;
+  }
+  .modal-close {
+    margin-left: auto;
+    color: transparent;
+    font-size: 0;
+    width: 10px;
+    height: 10px;
+    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+  }
+}
+
+.modal-body {
+  position: relative;
+  padding: 24px;
+  .left-bar {
+    position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
-    height: fit-content;
-    border: 1px solid #000;
-    border-radius: 4px;
-    background-color: #272727;
-    z-index: 100000;
-    &.xsm{
-        width: 200px;
-    }
-    &.xxxm{
-        width: 240px;
-    }
-    &.xxm{
-        width: 270px;
-    }
-    &.xm{
-        width: 300px;
-    }
-    &.ssm{
-        width: 380px;
-    }
-    &.sm{
-        width: 580px;
-    }
-    &.r{
-        width: 400px;
-    }
-    &.lr{
-        width: 440px;
-    }
-    &.lr-2{
-        width: 450px;
-    }
-    &.lrr{
-        width: 480px;
-    }
-    &.ml{
-        width: 530px;
-    }
-    &.l-2{
-        width: 640px;
-    }
-    &.lx-2{
-        width: 740px;
-    }
-    &.lx{
-        width: 770px;
-    }
-    &.l{
-        width: 800px;
-    }
-    &.ll{
-        width: 900px;
-    }
-    &.mount{
-        animation: mountpop .17s ease-in-out forwards;
-    }
-    &.unmount{
-        animation: unmountpop .17s ease-in-out forwards;
-    }
-    &.alert{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: transparent;
-        border: none;
-        .modal-head{
-            background-color: transparent;
-            padding: 0 0 8px;
-            .modal-close{
-                width: 20px;
-                height: 20px;
-                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
-            }
-        }
-        .modal-body{
-            background-color: #fff;
-            padding: 22px;
-            border-radius: 4px;
-            border: 1px solid #101010;
-            color: $alert-color;
-            .alert-title{
-                font-size: 13px;
-                font-weight: 700;
-                color: $alert-color;
-                margin-bottom: 15px;
-            }
-        }
-    }
-}
-.modal-head{
+    width: 5px;
+    height: 100%;
+    background-color: #000;
+    cursor: pointer;
+  }
+  .right-bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 5px;
+    height: 100%;
+    background-color: #000;
+    cursor: pointer;
+  }
+  .modal-btn-wrap {
     display: flex;
     align-items: center;
-    padding: 10px 24px;
-    background-color: #000;
-    // overflow: hidden;
-    cursor: pointer;
-    h1.title{
-        font-size: 13px;
-        color: $pop-color;
-        font-weight: 700;
+    gap: 5px;
+    button {
+      flex: 1;
     }
-    .modal-close{
-        margin-left: auto;
-        color: transparent;
-        font-size: 0;
-        width: 10px;
-        height: 10px;
-        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+    &.sub {
+      button {
+        flex: 1 1 auto;
+        padding: 0;
+      }
+      margin-bottom: 14px;
     }
-}
-
-.modal-body{
-    position: relative;
-    padding: 24px;
-    .left-bar{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 5px;
-        height: 100%;
-        background-color: #000;
-        cursor: pointer;
-    }
-    .right-bar{
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 5px;
-        height: 100%;
-        background-color: #000;
-        cursor: pointer;
-    }
-    .modal-btn-wrap{
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button{
-            flex: 1;
-        }
-        &.sub{
-            button{
-                flex: 1 1 auto;
-                padding: 0;
-            }
-            margin-bottom: 14px;
-        }
-    }
-    .modal-check-btn-wrap{
-        margin-top: 15px;
-        .check-wrap-title{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: 600;
-            &.light{
-                font-weight: $pop-normal-weight;
-            }
-        }
-        .flex-check-box{
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 15px;
-            &.for2{
-                justify-content: flex-end;
-                button{
-                    width: calc(50% - 5px);
-                }
-                &.btn{
-                    gap: 5px;
-                    button{
-                        width: calc(50% - 2.5px);
-                    }
-                }
-            }
-            &.for-line{
-                button{
-                    flex: 1;
-                }
-            }
-        }
-    }
-    .outer-line-wrap{
-        border-top: 1px solid #3C3C3C;
-        margin-top: 10px;
-        padding-top: 15px;
-        margin-bottom: 15px;
-        > div{
-            margin-bottom: 15px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .modal-guide{
-        display: block;
-        font-size: $pop-normal-size;
-        color: $alert-color;
+  }
+  .modal-check-btn-wrap {
+    margin-top: 15px;
+    .check-wrap-title {
+      font-size: $pop-normal-size;
+      color: $pop-color;
+      font-weight: 600;
+      &.light {
         font-weight: $pop-normal-weight;
+      }
     }
-}
-.modal-foot{
+    .flex-check-box {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 15px;
+      &.for2 {
+        justify-content: flex-end;
+        button {
+          width: calc(50% - 5px);
+        }
+        &.btn {
+          gap: 5px;
+          button {
+            width: calc(50% - 2.5px);
+          }
+        }
+      }
+      &.for-line {
+        button {
+          flex: 1;
+        }
+      }
+    }
+  }
+  .outer-line-wrap {
+    border-top: 1px solid #3c3c3c;
+    margin-top: 10px;
+    padding-top: 15px;
+    margin-bottom: 15px;
+    > div {
+      margin-bottom: 15px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .modal-guide {
     display: block;
-    width: 100%;
-    padding: 5px 0;
-    background-color: #000;
-    cursor: pointer;
+    font-size: $pop-normal-size;
+    color: $alert-color;
+    font-weight: $pop-normal-weight;
+  }
+}
+.modal-foot {
+  display: block;
+  width: 100%;
+  padding: 5px 0;
+  background-color: #000;
+  cursor: pointer;
 }
 
-.adsorption-point{
+.adsorption-point {
+  display: flex;
+  align-items: center;
+  background-color: #3a3a3a;
+  border-radius: 3px;
+  padding-left: 11px;
+  overflow: hidden;
+  transition: all 0.17s ease-in-out;
+  span {
+    font-size: $pop-normal-size;
+    color: #898989;
+  }
+  i {
     display: flex;
     align-items: center;
-    background-color: #3A3A3A;
-    border-radius: 3px;
-    padding-left: 11px;
-    overflow: hidden;
-    transition: all 0.17s ease-in-out;
-    span{
-        font-size: $pop-normal-size;
-        color: #898989;
-    }
-    i{
-        display: flex;
-        align-items: center;
-        padding: 0 7px;
-        margin-left: auto;
-        height: 100%;
-        font-size: 13px;
-        color: #898989;
-    }
-    &.act{
-        i{
-            color: $pop-color;
-            background-color: #1083E3;
-        }
+    padding: 0 7px;
+    margin-left: auto;
+    height: 100%;
+    font-size: 13px;
+    color: #898989;
+  }
+  &.act {
+    i {
+      color: $pop-color;
+      background-color: #1083e3;
     }
+  }
 }
 
 // grid-option
-.grid-check-form{
+.grid-check-form {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 15px;
+  &.border {
+    border-bottom: 1px solid #424242;
+  }
+}
+.grid-check-form-block {
+  display: block;
+  > div {
+    margin-bottom: 10px;
+  }
+}
+.grid-option-overflow {
+  max-height: 350px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+.grid-option-wrap {
+  .grid-option-box {
     display: flex;
     align-items: center;
-    gap: 15px;
-    padding-bottom: 15px;
-    &.border{
-        border-bottom: 1px solid #424242;
-    }
-}
-.grid-check-form-block{
-    display: block;
-    > div{
-        margin-bottom: 10px;
-    }
-}
-.grid-option-overflow{
-    max-height: 350px;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-.grid-option-wrap{
-    .grid-option-box{
-        display: flex;
-        align-items: center;
-        background-color: transparent;
-        border: 1px solid #3D3D3D;
-        border-radius: 2px;
-        padding: 15px 10px;
-        gap: 20px;
-        margin-bottom: 10px;
-        .grid-input-form{
-            display: flex;
-            align-items: center;
-            span{
-                flex: none;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-            }
-            .input-grid{
-                width: 54px;
-                input{
-                    width: 100%;
-                }
-            }
-        }
-        &:last-child{
-            margin-bottom: 0;
-        }
-    }
-    .grid-option-block-form{
-        flex: 1;
-        .flex-ment{
-            position: relative;
-            padding-right: 70px;
-            flex: 1 1 auto;
-            span{
-                width: 70px;
-                &.absol{
-                    width: fit-content;
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    
-                }
-            }
-            .input-grid{
-                flex: 1;
-            }
-        }
-    }
-}
-.select-form{
-    .sort-select{width: 100%;}
-}
-.grid-select{
-    flex: 1;
-    height: 30px;
-    &.no-flx{
-        flex: unset;
-    }
-    .sort-select{
-        width: 100%;
-        background-color: #313131;
-        min-width: auto;
-        font-size: 12px;
-        border: none;
-        p{
-            font-size: 12px;
-        }
-        > ul{
-            border: none;
-        }
-    }
-    &.right{
-        p{
-            text-align: right;
-        }
-        ul{
-            li{
-                justify-content: flex-end;
-            }
-        }
-    }
-}
-.grid-btn-wrap{
-    padding-top: 15px;
-    text-align: right;
-    button{
-        padding: 0 10px;
-    }
-}
-
-// grid copy
-.grid-option-tit{
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-    padding-bottom: 15px;
-
-}
-.grid-direction{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    flex: 1;
-}
-.direction{
-    width: 22px;
-    height: 22px;
-    background-color: #757575;
-    background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 16px 15px;
-    border-radius: 50%;
-    transition: all .15s ease-in-out;
-    opacity: 0.6;
-    &.down{transform: rotate(180deg);}
-    &.left{transform: rotate(-90deg);}
-    &.right{transform: rotate(90deg);}
-    &:hover,
-    &.act{
-        opacity: 1;
-    }
-}
-
-// grid-move
-.move-form{
-    width: 100%;
-    p{
+    background-color: transparent;
+    border: 1px solid #3d3d3d;
+    border-radius: 2px;
+    padding: 15px 10px;
+    gap: 20px;
+    margin-bottom: 10px;
+    .grid-input-form {
+      display: flex;
+      align-items: center;
+      span {
+        flex: none;
         font-size: $pop-normal-size;
         color: $pop-color;
         font-weight: $pop-bold-weight;
-    }
-}
-.input-move-wrap{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    span{
-        color: $pop-color;
-        font-size: $pop-normal-size;
-    }
-    .input-move{
-        width: 130px;
-        input{
-            width: 100%;
+      }
+      .input-grid {
+        width: 54px;
+        input {
+          width: 100%;
         }
+      }
     }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .grid-option-block-form {
+    flex: 1;
+    .flex-ment {
+      position: relative;
+      padding-right: 70px;
+      flex: 1 1 auto;
+      span {
+        width: 70px;
+        &.absol {
+          width: fit-content;
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+        }
+      }
+      .input-grid {
+        flex: 1;
+      }
+    }
+  }
 }
-.direction-move-wrap{
-    flex: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 5px;
-    margin-left: auto;
+.select-form {
+  .sort-select {
+    width: 100%;
+  }
+}
+.grid-select {
+  flex: 1;
+  height: 30px;
+  &.no-flx {
+    flex: unset;
+  }
+  .sort-select {
+    width: 100%;
+    background-color: #313131;
+    min-width: auto;
+    font-size: 12px;
+    border: none;
+    p {
+      font-size: 12px;
+    }
+    > ul {
+      border: none;
+    }
+  }
+  &.right {
+    p {
+      text-align: right;
+    }
+    ul {
+      li {
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+.grid-btn-wrap {
+  padding-top: 15px;
+  text-align: right;
+  button {
+    padding: 0 10px;
+  }
+}
+
+// grid copy
+.grid-option-tit {
+  font-size: $pop-normal-size;
+  color: $pop-color;
+  font-weight: $pop-normal-weight;
+  padding-bottom: 15px;
+}
+.grid-direction {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+}
+.direction {
+  width: 22px;
+  height: 22px;
+  background-color: #757575;
+  background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 15px;
+  border-radius: 50%;
+  transition: all 0.15s ease-in-out;
+  opacity: 0.6;
+  &.down {
+    transform: rotate(180deg);
+  }
+  &.left {
+    transform: rotate(-90deg);
+  }
+  &.right {
+    transform: rotate(90deg);
+  }
+  &:hover,
+  &.act {
+    opacity: 1;
+  }
+}
+
+// grid-move
+.move-form {
+  width: 100%;
+  p {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+  }
+}
+.input-move-wrap {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  span {
+    color: $pop-color;
+    font-size: $pop-normal-size;
+  }
+  .input-move {
+    width: 130px;
+    input {
+      width: 100%;
+    }
+  }
+}
+.direction-move-wrap {
+  flex: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 5px;
+  margin-left: auto;
 }
 
 // 배치면 초기 설정
-.placement-table{
-    table{
-        table-layout: fixed;
-        tr{
-            th{
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-                padding: 18px 0;
-                border-bottom: 1px solid #424242;
-                vertical-align: middle;
-                .tip-wrap{
-                    display: flex;
-                    align-items: center;
-                }
-            }
-            td{
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                border-bottom: 1px solid #424242;
-                padding: 18px 0 18px 20px;
-                vertical-align: middle;
-                .flex-box{
-                    display: flex;
-                    align-items: center;
-                }
-            }
-            &:first-child{
-                td,
-                th{
-                    padding-top: 0;
-                }
-            }
+.placement-table {
+  table {
+    table-layout: fixed;
+    tr {
+      th {
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+        padding: 18px 0;
+        border-bottom: 1px solid #424242;
+        vertical-align: middle;
+        .tip-wrap {
+          display: flex;
+          align-items: center;
         }
+      }
+      td {
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        border-bottom: 1px solid #424242;
+        padding: 18px 0 18px 20px;
+        vertical-align: middle;
+        .flex-box {
+          display: flex;
+          align-items: center;
+        }
+      }
+      &:first-child {
+        td,
+        th {
+          padding-top: 0;
+        }
+      }
     }
-    .tooltip{
-        position: relative;
-        display: block;
-        width: 15px;
-        height: 15px;
-        margin-left: 5px;
-        background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
-        background-size: cover;
+  }
+  .tooltip {
+    position: relative;
+    display: block;
+    width: 15px;
+    height: 15px;
+    margin-left: 5px;
+    background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
+    background-size: cover;
+  }
+  &.light {
+    padding: 0;
+    th,
+    td {
+      color: $alert-color;
+      border-bottom: none;
+      border-top: 1px solid #efefef;
     }
-    &.light{
-        padding: 0;
-        th,td{
-            color: $alert-color;
-            border-bottom: none;
-            border-top: 1px solid #EFEFEF;
-        }
-        th{
-            padding: 14px 0;
-        }
-        tr{
-            &:first-child{
-                td,
-                th{
-                    padding-top: 14px;
-                }
-            }
-            &:last-child{
-                td,
-                th{
-                    padding-bottom: 0px;
-                }
-            }
-        }
+    th {
+      padding: 14px 0;
     }
+    tr {
+      &:first-child {
+        td,
+        th {
+          padding-top: 14px;
+        }
+      }
+      &:last-child {
+        td,
+        th {
+          padding-bottom: 0px;
+        }
+      }
+    }
+  }
 }
 
 // 2024-12-11
@@ -539,1688 +558,1982 @@ $alert-color: #101010;
 //     max-width: 250px;
 // }
 
-.pop-form-radio{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    &.place{
-        gap: 33px;
-        .outline-form{
-            span{
-                width: fit-content;
-            }
-            .input-grid{
-                width: 80px;
-            }
-        }
+.pop-form-radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  &.place {
+    gap: 33px;
+    .outline-form {
+      span {
+        width: fit-content;
+      }
+      .input-grid {
+        width: 80px;
+      }
     }
+  }
 }
-.placement-option{
-    display: flex;
-    align-items: center;
-    gap: 20px;
+.placement-option {
+  display: flex;
+  align-items: center;
+  gap: 20px;
 }
-.select-wrap{
-    .sort-select{
-        width: 100%;
-    }
-}
-.flex-ment{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    span{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-normal-weight;
-    }
-
-}
-
-.img-edit-wrap{
-    flex: none;
-    .img-edit-btn{
-        display: flex;
-        align-items: center;
-        height: 30px;
-        padding: 0 10px;
-        font-size: 12px;
-        font-weight: 400;
-        color: #101010;
-        background-color: #fff;
-        border-radius: 2px;
-        cursor: pointer;
-        transition: all .15s ease-in-out;
-        .img-edit{
-            width: 16px;
-            height: 16px;
-            background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
-            background-size: cover;
-            margin-right: 5px;
-        }
-        &:hover{
-            background-color: #ebebeb;
-        }
-    }
-}
-.img-name-wrap{
-    display: flex;
-    align-items: center;
+.select-wrap {
+  .sort-select {
     width: 100%;
-    margin-left: 10px;
-    input{
-        flex: 1;
-
-    }
-    .img-check{
-        flex: none;
-        width: 18px;
-        height: 18px;
-        margin-left: 5px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-image: url(../../public/static/images/canvas/img_check_fail.svg);
-    }
+  }
+}
+.flex-ment {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+  }
 }
 
-.for-address{
-    input{
-        flex: 1;
+.img-edit-wrap {
+  flex: none;
+  .img-edit-btn {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #101010;
+    background-color: #fff;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+    .img-edit {
+      width: 16px;
+      height: 16px;
+      background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center;
+      background-size: cover;
+      margin-right: 5px;
     }
-    .check-address{
-        flex: none;
-        width: 18px;
-        height: 18px;
-        margin-left: 5px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
-        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
+    &:hover {
+      background-color: #ebebeb;
     }
+  }
+}
+.img-name-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-left: 10px;
+  input {
+    flex: 1;
+  }
+  .img-check {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    margin-left: 5px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+  }
+}
+
+.for-address {
+  input {
+    flex: 1;
+  }
+  .check-address {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    margin-left: 5px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    &.fail {
+      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
+    &.success {
+      background-image: url(../../public/static/images/canvas/img_check_success.svg);
+    }
+  }
 }
 
 // 외벽선 그리기
-.outline-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
-    
-    .outline-inner{
-        display: flex;
-        align-items: center;
-        margin-bottom: 14px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-        .outline-form{
-            // width: 50%;
-            margin-right: 15px;
-        }
-    }
-    &:last-child{
-        border-bottom: 1px solid #424242;
-    }
-}
-.outline-form{
+.outline-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+
+  .outline-inner {
     display: flex;
     align-items: center;
-    
-    span{
-        width: 60px;
-        flex: none;
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-right: 10px;
-        &.thin{
-            width: auto;
-            font-weight: $pop-normal-weight;
-            margin-right: 0;
-        }
+    margin-bottom: 14px;
+    &:last-child {
+      margin-bottom: 0;
     }
+    .outline-form {
+      // width: 50%;
+      margin-right: 15px;
+    }
+  }
+  &:last-child {
+    border-bottom: 1px solid #424242;
+  }
+}
+.outline-form {
+  display: flex;
+  align-items: center;
 
-    .reset-btn{
-        flex: none;
-        width: 30px;
-        height: 30px;
-        background: transparent;
-        border: 1px solid #484848;
-        border-radius: 2px;
-        margin-left: 5px;
-        background-image: url(../../public/static/images/canvas/reset_ico.svg);
-        background-repeat: no-repeat;
-        background-size: 12px 12px;
-        background-position: center;
-    }
-    &:last-child{
-        margin-right: 0;
+  span {
+    width: 60px;
+    flex: none;
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-right: 10px;
+    &.thin {
+      width: auto;
+      font-weight: $pop-normal-weight;
+      margin-right: 0;
     }
+  }
+
+  .reset-btn {
+    flex: none;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    margin-left: 5px;
+    background-image: url(../../public/static/images/canvas/reset_ico.svg);
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    background-position: center;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
 }
 
-.cul-wrap{
+.cul-wrap {
+  display: flex;
+  .outline-box {
+    width: 50%;
+    margin-right: 15px;
+    .outline-form {
+      width: 100%;
+      margin-bottom: 14px;
+      margin-right: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .cul-box {
     display: flex;
-    .outline-box{
-        width: 50%;
-        margin-right: 15px;
-        .outline-form{
-            width: 100%;
-            margin-bottom: 14px;
-            margin-right: 0;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .cul-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-        background-color: #3D3D3D;
-        border-radius: 2px ;
-    }
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    background-color: #3d3d3d;
+    border-radius: 2px;
+  }
 }
 
 // 외벽선 속성 설정
-.properties-guide{
-    font-size: $pop-normal-size;
-    color: #AAA;
-    font-weight: $pop-normal-weight;
-    margin-bottom: 14px;
+.properties-guide {
+  font-size: $pop-normal-size;
+  color: #aaa;
+  font-weight: $pop-normal-weight;
+  margin-bottom: 14px;
 }
 
-.setting-tit{
-    font-size: 13px;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-    margin-bottom: 10px;
+.setting-tit {
+  font-size: 13px;
+  color: $pop-color;
+  font-weight: $pop-bold-weight;
+  margin-bottom: 10px;
 }
-.properties-setting-wrap{
-    &.outer{
-        margin-top: 24px;
-    }
-    .setting-btn-wrap{
-        display: flex;
-        align-items: center;
-        padding: 14px 0;
-        border-top: 1px solid #424242;
-        border-bottom: 1px solid #424242;
-        .setting-btn{
-            display: block;
-            width: 100%;
-            height: 40px;
-            font-size: 13px;
-            color: #fff;
-            font-weight: 700;
-            border-radius: 2px;
-            transition: all .15s ease-in-out;
-            &.green{
-                background-color: #305941;
-                border: 1px solid #45CD7D;
-                &:hover{
-                    background-color: #3a6b4e;
-                }
-            }
-            &.blue{
-                background-color: #2E5360;
-                border: 1px solid #3FBAE6;
-                &:hover{
-                    background-color: #365f6e;
-                }
-            }
-            &.gray{
-                background-color: #535353;
-                border: 1px solid #9e9e9e;
-                &:hover{
-                    background-color: #6b6b6b;
-                }
-            }
-        }
-    }
-}
-
-// 지붕형상 설정
-.roof-shape-menu{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 24px 10px;
-    margin-bottom: 24px;
-    .shape-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        padding: 13px;
-        background-color: #3D3D3D;
-        transition: background .15s ease-in-out;
-        img{
-            max-width: 100%;
-        }
-    }
-    .shape-title{
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-top: 10px;
-        text-align: center;
-        transition: color .15s ease-in-out;
-    }
-    .shape-menu-box{
-        &.act,
-        &:hover{
-            .shape-box{background-color: #008BFF;}
-            .shape-title{color: #008BFF;}
-        }
-    }
-}
-
-.setting-box{
+.properties-setting-wrap {
+  &.outer {
+    margin-top: 24px;
+  }
+  .setting-btn-wrap {
+    display: flex;
+    align-items: center;
     padding: 14px 0;
     border-top: 1px solid #424242;
     border-bottom: 1px solid #424242;
-}
-.padding-form{
-    padding-left: 23px;
-}
-.discrimination-box{
-    padding: 16px 12px;
-    border: 1px solid #3D3D3D;
-    border-radius: 2px;
+    .setting-btn {
+      display: block;
+      width: 100%;
+      height: 40px;
+      font-size: 13px;
+      color: #fff;
+      font-weight: 700;
+      border-radius: 2px;
+      transition: all 0.15s ease-in-out;
+      &.green {
+        background-color: #305941;
+        border: 1px solid #45cd7d;
+        &:hover {
+          background-color: #3a6b4e;
+        }
+      }
+      &.blue {
+        background-color: #2e5360;
+        border: 1px solid #3fbae6;
+        &:hover {
+          background-color: #365f6e;
+        }
+      }
+      &.gray {
+        background-color: #535353;
+        border: 1px solid #9e9e9e;
+        &:hover {
+          background-color: #6b6b6b;
+        }
+      }
+    }
+  }
 }
 
-.modal-bottom-border-bx{
-    margin-top: 24px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
+// 지붕형상 설정
+.roof-shape-menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 24px 10px;
+  margin-bottom: 24px;
+  .shape-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 13px;
+    background-color: #3d3d3d;
+    transition: background 0.15s ease-in-out;
+    img {
+      max-width: 100%;
+    }
+  }
+  .shape-title {
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-top: 10px;
+    text-align: center;
+    transition: color 0.15s ease-in-out;
+  }
+  .shape-menu-box {
+    &.act,
+    &:hover {
+      .shape-box {
+        background-color: #008bff;
+      }
+      .shape-title {
+        color: #008bff;
+      }
+    }
+  }
+}
+
+.setting-box {
+  padding: 14px 0;
+  border-top: 1px solid #424242;
+  border-bottom: 1px solid #424242;
+}
+.padding-form {
+  padding-left: 23px;
+}
+.discrimination-box {
+  padding: 16px 12px;
+  border: 1px solid #3d3d3d;
+  border-radius: 2px;
+}
+
+.modal-bottom-border-bx {
+  margin-top: 24px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
 }
 
 // 처마∙케라바 변경
-.eaves-keraba-table{
-    display: table;
-    border-collapse: collapse;
-    .eaves-keraba-item{
-        display: table-row;
-        .eaves-keraba-th,
-        .eaves-keraba-td{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: $pop-normal-weight;
-            display: table-cell;
-            vertical-align: middle;
-            padding-bottom: 14px;
-        }
-        .eaves-keraba-td{
-            padding-left: 10px;
-        }
-        .eaves-keraba-ico{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 5px;
-            background-color: #3D3D3D;
-            border: 1px solid #3D3D3D;
-            border-radius: 2px;
-            cursor: pointer;
-            &.act{
-                border: 1px solid #ED0004;
-            }
-        }
-        &:last-child{
-            .eaves-keraba-th,
-            .eaves-keraba-td{
-                padding-bottom: 0;
-            }
-        }
+.eaves-keraba-table {
+  display: table;
+  border-collapse: collapse;
+  .eaves-keraba-item {
+    display: table-row;
+    .eaves-keraba-th,
+    .eaves-keraba-td {
+      font-size: $pop-normal-size;
+      color: $pop-color;
+      font-weight: $pop-normal-weight;
+      display: table-cell;
+      vertical-align: middle;
+      padding-bottom: 14px;
     }
+    .eaves-keraba-td {
+      padding-left: 10px;
+    }
+    .eaves-keraba-ico {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 5px;
+      background-color: #3d3d3d;
+      border: 1px solid #3d3d3d;
+      border-radius: 2px;
+      cursor: pointer;
+      &.act {
+        border: 1px solid #ed0004;
+      }
+    }
+    &:last-child {
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 0;
+      }
+    }
+  }
 }
-.guide{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: $pop-color;
-    margin-bottom: 24px;
-    &.sm{
-        margin-bottom: 15px;
-    }
-    span{
-        display: block;
-    }
+.guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-bottom: 24px;
+  &.sm {
+    margin-bottom: 15px;
+  }
+  span {
+    display: block;
+  }
 }
 
 // 지붕면 할당
-.allocation-select-wrap{
+.allocation-select-wrap {
+  display: flex;
+  align-items: center;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
+  margin-bottom: 14px;
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-right: 10px;
+  }
+  .allocation-edit {
     display: flex;
     align-items: center;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
-    margin-bottom: 14px;
-    span{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-        margin-right: 10px;
-    }
-    .allocation-edit{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 30px;
-        padding: 0 10px;
-        margin-left: 5px;
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-normal-weight;
-        border: 1px solid #484848;
-        background-color: #323234;
-        transition: background-color .13s ease-in-out;
-        i{
-            display: block;
-            width: 12px;
-            height: 12px;
-            margin-right: 5px;
-            background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
-            background-size: cover;
-        }
-        &:hover{
-            background-color: #464545;
-        }
-    }
-}
-
-.block-box{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
-    .flex-ment{
-        gap: 10px;
-        .dec{
-            text-decoration: underline;
-        }
-        .delete{
-            display: block;
-            width: 15px;
-            height: 15px;
-            background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
-            background-size: cover;
-        }
-    }
-    &:last-child{
-        margin-bottom: 0;
-    }
-}
-
-.icon-btn-wrap{
-    flex: 1;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    button{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 30px;
-        font-size: $pop-normal-size;
-        font-weight: $pop-normal-weight;
-        color: $pop-color;
-        border: 1px solid #646464;
-        border-radius: 2px;
-        padding: 0 10px;
-        transition: all .15s ease-in-out;
-        i{
-            height: 15px;
-            display: block;
-            margin-left: 10px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            transition: all .15s ease-in-out;
-            &.allocation01{
-                background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-                width: 15px;
-            }
-            &.allocation02{
-                background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
-                width: 18px;
-            }
-        }
-        &.act,
-        &:hover{
-            color: #101010;
-            border: 1px solid #101010;
-            background-color: #fff;
-            i{
-                &.allocation01{
-                    background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
-                }
-                &.allocation02{
-                    background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
-                }
-            }
-        }
-        &:disabled{
-            color: $pop-color;
-            border: 1px solid #646464;
-            background-color: transparent;
-            opacity: 0.5;
-            &.act,
-            &:hover{
-                color: $pop-color;
-                border: 1px solid #646464;
-                background-color: transparent;
-                i{
-                    &.allocation01{
-                        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-                    }
-                    &.allocation02{
-                        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
-                    }
-                }
-            }
-        }
-    }
-}
-
-// 경사설정
-.slope-wrap{
-    padding-bottom: 24px;
-    border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-frame-wrap{
-    display: flex;
-    gap: 10px;
-    .plane-shape-wrap{
-        flex: none;
-        width: 73px;
-    }
-}
-
-.plane-shape-menu{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 5px;
-    .shape-menu-box{
-        border-radius: 2px;
-        width: 34px;
-        height: 34px;
-        background-color: #373737;
-        border: 1px solid #676767;
-        transition: background .15s ease-in-out, border .15s ease-in-out;
-        .shape-box{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            border-radius: 2px;
-        }
-        &.act,
-        &:hover{
-            border-color: #008BFF;
-            background-color: #008BFF;
-        }
-    }
-}
-
-.shape-library{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     justify-content: center;
-    gap: 5px;
-    padding-top: 5px;
-    .library-btn{
-        width: 100%;
-        height: 34px;
-        border: 1px solid #6C6C6C;
-        border-radius: 2px;
-        background-color: #373737;
-        background-repeat: no-repeat;
-        background-position: center;
-        transition: all .15s ease-in-out;
-        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
-        &:hover{
-            border-color: #1083E3;
-            background-color: #1083E3;
-        }
+    width: 100%;
+    height: 30px;
+    padding: 0 10px;
+    margin-left: 5px;
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+    border: 1px solid #484848;
+    background-color: #323234;
+    transition: background-color 0.13s ease-in-out;
+    i {
+      display: block;
+      width: 12px;
+      height: 12px;
+      margin-right: 5px;
+      background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
+      background-size: cover;
     }
+    &:hover {
+      background-color: #464545;
+    }
+  }
 }
 
-.plane-detail-wrap{
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-.plane-shape-wrapper{
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+.block-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  .flex-ment {
     gap: 10px;
-    .plane-box{
-        width: 100%;
-        padding: 10px 18px;
-        border-radius: 2px;
-        background-color: #313131;
-        border: 1px solid #484848;
-        .plane-box-tit{
-            font-size: $pop-normal-size;
-            font-weight: 600;
-            color: $pop-color;
-            margin-bottom: 10px;
-        }
-        &.shape-box{
-            .shape-box-inner{
-                display: flex;
-                gap:15px;
-                min-height: 140px;
-                .shape-img{
-                    position: relative;
-                    flex: none;
-                    width: 150px;
-                    background-color: #fff;
-                    border-radius: 2px;
-                    img{
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                    }
-                }
-                .shape-data{
-                    flex: 1;
-                    .eaves-keraba-table{
-                        .eaves-keraba-item{
-                            .eaves-keraba-th,
-                            .eaves-keraba-td{
-                                padding-bottom: 10px;
-                            }
-                            &:last-child{
-                                .eaves-keraba-th,
-                                .eaves-keraba-td{
-                                    padding-bottom: 0px;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        &.direction-box{
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            .plane-direction-box{
-                flex: 1;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-            }
-        }
+    .dec {
+      text-decoration: underline;
     }
-}
-.plane-direction{
-    width: 150px;
-    position: relative;
-    height: 120px;
-    span{
-        position: absolute;
-        font-size: 12px;
-        font-weight: 500;
-        color: #B1B1B1;
-        &.top{top: 0; left: 50%; transform: translateX(-50%);}
-        &.right{top: 50%; right: 0; transform: translateY(-50%);}
-        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
-        &.left{top: 50%; left: 0; transform: translateY(-50%);}
-    }
-    .plane-btn{
-        position: absolute;
-        width: 28px;
-        height: 28px;
-        background-color: #777777;
-        background-image: url(../../public/static/images/canvas/plane_arr.svg);
-        background-size: 12px 13px;
-        background-repeat: no-repeat;
-        background-position: center;
-        border-radius: 50%;
-        transition: all .15s ease-in-out;
-        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
-        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
-        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
-        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
-        &:hover,
-        &.act{
-            background-color: #fff;
-            background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
-        }
+    .delete {
+      display: block;
+      width: 15px;
+      height: 15px;
+      background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center;
+      background-size: cover;
     }
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.plane-tab-guide{
+.icon-btn-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 30px;
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
     color: $pop-color;
-    margin-top: 10px;
-}
-.plane-shape-btn{
-    padding-top: 10px;
-    margin-top: auto;
-    button{
-        display: block;
-        width: 100%;
+    border: 1px solid #646464;
+    border-radius: 2px;
+    padding: 0 10px;
+    transition: all 0.15s ease-in-out;
+    i {
+      height: 15px;
+      display: block;
+      margin-left: 10px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      transition: all 0.15s ease-in-out;
+      &.allocation01 {
+        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+        width: 15px;
+      }
+      &.allocation02 {
+        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+        width: 18px;
+      }
     }
+    &.act,
+    &:hover {
+      color: #101010;
+      border: 1px solid #101010;
+      background-color: #fff;
+      i {
+        &.allocation01 {
+          background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+        }
+        &.allocation02 {
+          background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+        }
+      }
+    }
+    &:disabled {
+      color: $pop-color;
+      border: 1px solid #646464;
+      background-color: transparent;
+      opacity: 0.5;
+      &.act,
+      &:hover {
+        color: $pop-color;
+        border: 1px solid #646464;
+        background-color: transparent;
+        i {
+          &.allocation01 {
+            background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+          }
+          &.allocation02 {
+            background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+          }
+        }
+      }
+    }
+  }
 }
 
-// 오브젝트 배치
-.mb-box{
-    margin-bottom: 24px;
+// 경사설정
+.slope-wrap {
+  padding-bottom: 24px;
+  border-bottom: 1px solid #424242;
 }
 
-.object-direction-wrap{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.discrimination-tit{
-    font-size: 13px;
-    color: #fff;
-    font-weight: 500;
+// 면형상 배치
+.plane-frame-wrap {
+  display: flex;
+  gap: 10px;
+  .plane-shape-wrap {
+    flex: none;
+    width: 73px;
+  }
 }
 
-.object-size-wrap{
-    display: flex;
-    min-height: 206px;
-    margin-top: 14px;
-    .object-size-img{
-        position: relative;
-        flex: none;
-        width: 200px;
-        background-color: #fff;
-        img{
+.plane-shape-menu {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 5px;
+  .shape-menu-box {
+    border-radius: 2px;
+    width: 34px;
+    height: 34px;
+    background-color: #373737;
+    border: 1px solid #676767;
+    transition:
+      background 0.15s ease-in-out,
+      border 0.15s ease-in-out;
+    .shape-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+    }
+    &.act,
+    &:hover {
+      border-color: #008bff;
+      background-color: #008bff;
+    }
+  }
+}
+
+.shape-library {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding-top: 5px;
+  .library-btn {
+    width: 100%;
+    height: 34px;
+    border: 1px solid #6c6c6c;
+    border-radius: 2px;
+    background-color: #373737;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all 0.15s ease-in-out;
+    &.ico01 {
+      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
+      background-size: 19px 18px;
+    }
+    &.ico02 {
+      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
+      background-size: 15px 20px;
+    }
+    &.ico03 {
+      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
+      background-size: 19px 16px;
+    }
+    &:hover {
+      border-color: #1083e3;
+      background-color: #1083e3;
+    }
+  }
+}
+
+.plane-detail-wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.plane-shape-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  .plane-box {
+    width: 100%;
+    padding: 10px 18px;
+    border-radius: 2px;
+    background-color: #313131;
+    border: 1px solid #484848;
+    .plane-box-tit {
+      font-size: $pop-normal-size;
+      font-weight: 600;
+      color: $pop-color;
+      margin-bottom: 10px;
+    }
+    &.shape-box {
+      .shape-box-inner {
+        display: flex;
+        gap: 15px;
+        min-height: 140px;
+        .shape-img {
+          position: relative;
+          flex: none;
+          width: 150px;
+          background-color: #fff;
+          border-radius: 2px;
+          img {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+          }
         }
-    }
-    .object-size-input{
-        margin-left: auto;
-        .eaves-keraba-th{
-            position: relative;
-            .object-input-num{
-                position: absolute;
-                top: 7px;
-                left: -20px;
-                font-size: 13px;
-            }
-        }
-    }
-}
-
-// 표시변경
-.display-change-wrap{
-    margin: 24px 0;
-}
-.warning{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: #FFAFAF;
-}
-
-// 각 변 속성 변경
-.radio-grid-wrap{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px 15px;
-}
-
-// 면 흐름 설정
-.drawing-flow-wrap{
-    display: flex;
-    gap: 10px;
-    .discrimination-box{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        .object-direction-wrap{
-            flex: 1;
-        }
-        &:first-child{
-            flex: none;
-            width: 195px;
-        }
-    }
-}
-
-.compas-box{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.compas-box-inner {
-    position: relative;
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    
-    .circle {
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        top: 95%;
-        left: 50%;
-        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
-        cursor:pointer;
-        z-index: 3;
-        /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
-        i{
-            position: absolute;
-            top: 12.5px;
-            left: 50%;
-            font-size: 11px;
-            color: #8B8B8B;
-            font-weight: 500;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-use-select: none;
-            user-select: none;
-        }
-        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
-        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
-        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
-        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
-        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
-        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
-        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
-        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
-        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
-        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
-        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
-        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
-        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
-        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
-        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
-        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
-        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
-        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
-        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
-        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
-        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
-        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
-        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
-        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
-        &.act{
-            &::after{
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 5px;
-                height: 5px;
-                background-color: #fff;
-                border-radius: 50%;
-            }
-            i{
-                color: #fff;
-            }
-        }
-    }
-    .compas{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 148px;
-        height: 148px;
-        border: 4px solid #fff;
-        border-radius: 50%;
-        .compas-arr{
-            width: 100%;
-            height: 100%;
-            background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
-            background-size: 122px 122px;
-        }
-    }
-}
-
-.draw-flow-wrap{
-    margin: 10px 0;
-}
-
-// 지붕모듈선택
-.roof-module-tab{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 14px;
-    .module-tab-bx{
-        flex: 1;
-        height: 34px;
-        line-height: 31px;
-        border: 1px solid #484848;
-        border-radius: 2px;
-        background-color: transparent;
-        font-size: 12px;
-        color: #AAA;
-        text-align: center;
-        cursor: default;
-        transition: all .15s ease-in-out;
-        &.act{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    .tab-arr{
-        display: block;
-        width: 9px;
-        height: 14px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-        transition: all .15s ease-in-out;
-        &.act{
-            background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
-        }
-    }
-}
-
-.roof-module-compas{
-    margin-bottom: 24px;
-    .compas-box-inner{
-        width: 280px;
-        height: 253px;
-        .circle{
-            top: 86%;
-            // &:nth-child(1),
-            // &:nth-child(7),
-            // &:nth-child(13),
-            // &:nth-child(19){
-            //     &::before{
-            //         content: '';
-            //         position: absolute;
-            //         top: 20px;
-            //         left: 50%;
-            //         transform: translateX(-50%);
-            //         width: 1px;
-            //         height: 6px;
-            //         background-color: #8B8B8B;
-            //     }
-            // }
-            i{
-                top: 22px;
-            }
-            &.act{
-                i{color: #8B8B8B;}
-            }
-        }
-    }
-}
-.center-wrap{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-}
-
-.module-table-flex-wrap{
-    display: flex;
-    gap: 10px;
-    .outline-form{
-        flex: 1;
-    }
-}
-
-.module-box-tab{
-    display: flex;
-    .module-btn{
-        flex: 1;
-        border-top: 1px solid #505050;
-        border-bottom: 1px solid #505050;
-        border-right: 1px solid #505050;
-        background-color: #454545;
-        color: #fff;
-        height: 30px;
-        font-size: 12px;
-        font-weight: 400;
-        transition: all .15s ease-in-out;
-        &:first-child{
-            border-left: 1px solid #505050;
-        }
-        &.act{
-            border-color: #fff;
-            background-color: #fff;
-            color: #101010;
-        }
-    }
-}
-
-.module-table-box{
-    flex: 1;
-    background-color: #3D3D3D;
-    border-radius: 2px;
-    .module-table-inner{
-        padding: 10px;
-        .outline-form{
-            span{
-                width: auto;
-            }
-        }
-        .module-table-tit{
-            padding: 10px 0;
-            font-size: 12px;
-            color: #fff;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .eaves-keraba-table{
-            width: 100%;
-            margin-top: 15px;
-            .eaves-keraba-th{
-                width: 72px;
-            }
-            .eaves-keraba-th,
-            .eaves-keraba-td{
-                padding-bottom: 5px;
-            }
-        }
-        .self-table-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            padding-bottom: 15px;
-        }
-    }
-    .warning-guide{
-        padding: 20px;
-        .warning{
-            color: #FFCACA;
-            max-height: 55px;
-            overflow-y: auto;
-            padding-right: 30px;
-            &::-webkit-scrollbar {
-                width: 4px;
-                background-color: transparent;
-            }
-            &::-webkit-scrollbar-thumb {
-                background-color: #D9D9D9;
-            }
-            &::-webkit-scrollbar-track {
-                background-color: transparent;
-            }
-        }
-    }
-}
-
-.module-self-table{
-    display: table;
-    border-top: 1px solid #4D4D4D;
-    border-collapse: collapse;
-    width: 100%;
-    .self-table-item{
-        display: table-row;
-        .self-item-td,
-        .self-item-th{
-            display: table-cell;
-            vertical-align: middle;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .self-item-th{
-            width: 60px;
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-        }
-        .self-item-td{
-            font-size: 12px;
-            font-weight: 400;
-            color: #fff;
-            padding: 15px 20px;
-        }
-    }
-}
-
-.self-table-flx{
-    display: flex;
-    align-items: center;
-    margin-top: 15px;
-    button{
-        margin-left: auto;
-    }
-}
-.hexagonal-wrap{
-    .hexagonal-item{
-        padding: 15px 0;
-        border-bottom: 1px solid #4D4D4D;
-        &:first-child{
-            padding-top: 0;
-        }
-        &:last-child{
-            padding-bottom: 0;
-            border: none;
-        }
-        .hexagonal-flx-auto{
-            display: flex;
-            justify-content: space-between;
-        }
-        .hexagonal-flx{
-            display: flex;
-            align-items: center;
-            button{
-                margin-left: auto;
-            }
-        }
-    }
-}
-
-// 회로 및 가대설정
-.circuit-check-inner{
-    padding: 5px 0;
-    &.overflow{
-        overflow-y: auto;
-        max-height: 100px;
-        min-height: 60px;
-        &::-webkit-scrollbar {
-            width: 4px;
-            background-color: transparent;
-        }
-        &::-webkit-scrollbar-thumb {
-            background-color: #D9D9D9;
-        }
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
-        }
-    }
-    .d-check-box{
-        margin-bottom: 15px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-    }
-}
-
-.x-scroll-table{
-    overflow: auto;
-    padding-bottom: 5px;
-    background-color: transparent;
-    max-height: 170px;
-    .roof-module-table{
-        min-width: 1200px;
-    }
-    &::-webkit-scrollbar {
-        width: 4px;
-        height: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #b4b4b4;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-corner{
-        background-color: transparent;
-    }
-}
-
-.circuit-right-wrap{
-    display: flex;
-    justify-content: flex-end;
-}
-
-.circuit-data-form{
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    min-height: 60px;
-    padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.20);
-    span{
-        display: inline-flex;
-        align-items: center;
-        .del{
-            display: block;
-            margin-left: 10px;
-            width: 15px;
-            height: 15px;
-            background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
-            background-size: cover;
-        }
-    }
-}
-.circuit-table-tit{
-    color: #fff;
-    font-size: 12px;
-    font-weight: 600;
-    padding: 11px 10px;
-    background-color: #474747;
-    border: 1px solid #505050;
-    border-bottom: none;
-}
-
-.circuit-overflow{
-    overflow-x: auto;
-    &::-webkit-scrollbar {
-        height: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-    .module-table-box{
-        display: flex;
-        &.by-max{
-            min-width: 886px;
-        }
-    }
-}
-.circuit-title-sel{
-    padding-bottom: 14px;
-    .outline-form{
-        span{
-            color: #62C207;
-        }
-        .grid-select{
-            .sort-select{
-                border: 1px solid #4E9E04;
-                background-color: #1A3104;
-                p{
-                    line-height: 27px;
-                }
-                .select-item-wrap{
-                    background-color: #1A3104;
-                    border: 1px solid #4E9E04;
-                    .select-item:hover{
-                        background-color: #294e07;
-                    }
-                    &::-webkit-scrollbar {
-                        width: 2px;
-                        background-color: transparent;
-                        
-                    }
-                    &::-webkit-scrollbar-thumb {
-                        background-color: #fff;
-                        border-radius: 10px;
-                    }
-                    &::-webkit-scrollbar-track {
-                        background-color: transparent;
-                    }
+        .shape-data {
+          flex: 1;
+          .eaves-keraba-table {
+            .eaves-keraba-item {
+              .eaves-keraba-th,
+              .eaves-keraba-td {
+                padding-bottom: 10px;
+              }
+              &:last-child {
+                .eaves-keraba-th,
+                .eaves-keraba-td {
+                  padding-bottom: 0px;
                 }
+              }
             }
-        } 
+          }
+        }
+      }
     }
-}
-
-.circuit-table-flx-wrap{
-    display: flex;
-    gap: 10px;
-    margin-bottom: 10px;
-    .circuit-table-flx-box{
+    &.direction-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      .plane-direction-box {
         flex: 1;
-        display: flex;
-        flex-direction: column;
-        .bottom-wrap{
-            margin-top: auto;
-        }
-        .roof-module-table{
-            table{
-                table-layout: fixed;
-            }
-        }
-    }
-}
-
-.circuit-count-input{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-// 모듈부가기능
-.additional-radio-wrap{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 0;
-    margin-bottom: 24px;
-}
-.additional-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
-}
-
-.additional-color-wrap{
-    display: flex;
-    align-items: center;
-    padding: 5px 0;
-    gap: 15px;
-    .additional-color-box{
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        .additional-color{
-            display: block;
-            width: 16px;
-            height: 16px;
-            &.pink{
-                border: 2px solid #ce1c9c;
-                background-color: #16417D;
-            }
-            &.white{
-                border: 2px solid #FFF;
-                background-color: #001027;
-            }
-        }
-    }
-}
-
-// color setting
-.color-setting-wrap{
-    padding-bottom: 15px;
-    border-bottom: 1px solid #424242;
-    .color-tit{
-        font-size: 13px;
-        font-weight: 500;
-        color: #ffffff;
-        margin-bottom: 10px;
-    }
-    .color-picker{
-        .react-colorful{
-            width: 100%;
-            height: auto;
-            gap: 20px;
-            .react-colorful__pointer{
-                width: 15px;
-                height: 15px;
-                border: 4px solid #Fff;
-            }
-            .react-colorful__saturation{
-                border-radius: 2px;
-                height: 200px;
-                border-bottom: 5px solid #000;
-            }
-            .react-colorful__last-control{
-                border-radius: 2px;
-                height: 10px;
-            }
-        }
-        .hex-color-box{
-            display: flex;
-            align-items: center;
-            margin-top: 15px;
-            .color-box-tit{
-                font-size: 12px;
-                color: #fff;
-                font-weight: 500;
-                margin-right: 10px;
-            }
-            .color-hex-input{
-                width: 150px;
-                margin-right: 5px;
-                input{
-                    width: 100%;
-                }
-            }
-            .color-box{
-                display: block;
-                width: 30px;
-                height: 30px;
-                border-radius: 4px;
-            }
-        }
-        .default-color-wrap{
-            margin-top: 25px;
-            .default-tit{
-                font-size: 12px;
-                font-weight: 500;
-                color: #fff;
-                margin-bottom: 10px;
-            }
-            .color-button-wrap{
-                display: grid;
-                grid-template-columns: repeat(8, 1fr);
-                gap: 21px;
-                .default-color{
-                    display: block;
-                    width: 100%;
-                    height: 30px;
-                    border-radius: 4px;
-                }
-            }
-        }
-    }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 5px;
-    margin-bottom: 15px;
-    .font-option-item{
-        .option-item-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            margin-bottom: 10px;
-        }
-    }
-}
-.font-ex-wrap{
-    margin-bottom: 15px;
-    .font-ex-tit{
-        font-size: 12px;
-        font-weight: 500;
-        color: #fff;
-        margin-bottom: 10px;
-    }
-    .font-ex-box{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-        min-height: 80px;
-        background-color: #fff;
+      }
     }
-    
+  }
 }
-
-// 치수선 설정
-.font-btn-wrap{
-    margin-bottom: 15px;
-    button{
-        width: 100%;
-        height: 30px;
-        line-height: 28px;
+.plane-direction {
+  width: 150px;
+  position: relative;
+  height: 120px;
+  span {
+    position: absolute;
+    font-size: 12px;
+    font-weight: 500;
+    color: #b1b1b1;
+    &.top {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
     }
-}
-
-.line-color-wrap{
-    margin-bottom: 15px;
-    .color-btn{
-        display: block;
-        width: 100%;
-        height: 30px;
-        border-radius: 2px;
+    &.right {
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
     }
-}
-
-.form-box{
-    width: 100%;
-    background-color: #fff;
-    padding: 10px 15px 20px;
-    .line-form{
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        min-width: 102px;
-        min-height: 40px;
-        margin: 0 auto;
-
-        &::before{
-            content: '';
-            position: absolute;
-            bottom: 0px;
-            left: 0;
-            width: 100%;
-            height: 40px;
-            border-left: 1px dashed #101010;
-            border-right: 1px dashed #101010;
-        }
-        .line-font-box{
-            .font{
-                display: block;
-                padding-bottom: 15px;
-                color: #101010;
-                text-align: center;
-                line-height: 1;
-            }
-            .line{
-                position: relative;
-                display: block;
-                width: 100%;
-                height: 1px;
-                border-radius: 30px;
-                &::before{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%) rotate(45deg);
-                    left: 1px;
-                    width: 9px;
-                    height:+ 9px;
-                    border: 1px solid;
-                    border-color: inherit;
-                    border-top: none;
-                    border-right: none;
-                }
-                &::after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%) rotate(45deg);
-                    right: 1px;
-                    width: 9px;
-                    height: 9px;
-                    border: 1px solid;
-                    border-color: inherit;
-                    border-bottom: none;
-                    border-left: none;
-                }
-            }
-        }
+    &.bottom {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
     }
+    &.left {
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
+  }
+  .plane-btn {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    background-color: #777777;
+    background-image: url(../../public/static/images/canvas/plane_arr.svg);
+    background-size: 12px 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 50%;
+    transition: all 0.15s ease-in-out;
+    &.up {
+      top: 22px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &.right {
+      top: 50%;
+      right: 32px;
+      transform: translateY(-50%) rotate(90deg);
+    }
+    &.down {
+      bottom: 22px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+    &.left {
+      top: 50%;
+      left: 32px;
+      transform: translateY(-50%) rotate(270deg);
+    }
+    &:hover,
+    &.act {
+      background-color: #fff;
+      background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+    }
+  }
 }
 
-// 사이즈 변경
-.size-inner-warp{
-    position: relative;
+.plane-tab-guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-top: 10px;
 }
-.size-check-wrap{
-    position: relative;
+.plane-shape-btn {
+  padding-top: 10px;
+  margin-top: auto;
+  button {
     display: block;
-    width: 132px;
-    height: 132px;
-    margin: 0 auto;
-    .size-btn{
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        &.act{
-            &::after{
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 8px;
-                height: 8px;
-                background-color: #fff;
-                border-radius: 50%;
-            }
-        }
-        &:nth-child(1){ top: 0; left: 0; }
-        &:nth-child(2){ top: 0; right: 0; }
-        &:nth-child(3){ bottom: 0; left: 0; }
-        &:nth-child(4){ bottom: 0; right: 0; }
+    width: 100%;
+  }
+}
+
+// 오브젝트 배치
+.mb-box {
+  margin-bottom: 24px;
+}
+
+.object-direction-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.discrimination-tit {
+  font-size: 13px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.object-size-wrap {
+  display: flex;
+  min-height: 206px;
+  margin-top: 14px;
+  .object-size-img {
+    position: relative;
+    flex: none;
+    width: 200px;
+    background-color: #fff;
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
-    .size-box{
+  }
+  .object-size-input {
+    margin-left: auto;
+    .eaves-keraba-th {
+      position: relative;
+      .object-input-num {
+        position: absolute;
+        top: 7px;
+        left: -20px;
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+// 표시변경
+.display-change-wrap {
+  margin: 24px 0;
+}
+.warning {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: #ffafaf;
+}
+
+// 각 변 속성 변경
+.radio-grid-wrap {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px 15px;
+}
+
+// 면 흐름 설정
+.drawing-flow-wrap {
+  display: flex;
+  gap: 10px;
+  .discrimination-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .object-direction-wrap {
+      flex: 1;
+    }
+    &:first-child {
+      flex: none;
+      width: 195px;
+    }
+  }
+}
+
+.compas-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.compas-box-inner {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+
+  .circle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    top: 95%;
+    left: 50%;
+    transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+    cursor: pointer;
+    z-index: 3;
+    /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+    i {
+      position: absolute;
+      top: 12.5px;
+      left: 50%;
+      font-size: 11px;
+      color: #8b8b8b;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-use-select: none;
+      user-select: none;
+    }
+    &:nth-child(1) {
+      transform: rotate(180deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+    &:nth-child(2) {
+      transform: rotate(195deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(165deg);
+      }
+    }
+    &:nth-child(3) {
+      transform: rotate(210deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(150deg);
+      }
+    }
+    &:nth-child(4) {
+      transform: rotate(225deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(135deg);
+      }
+    }
+    &:nth-child(5) {
+      transform: rotate(240deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(120deg);
+      }
+    }
+    &:nth-child(6) {
+      transform: rotate(255deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(105deg);
+      }
+    }
+    &:nth-child(7) {
+      transform: rotate(270deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(90deg);
+      }
+    }
+    &:nth-child(8) {
+      transform: rotate(285deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(75deg);
+      }
+    }
+    &:nth-child(9) {
+      transform: rotate(300deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(60deg);
+      }
+    }
+    &:nth-child(10) {
+      transform: rotate(315deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+    &:nth-child(11) {
+      transform: rotate(330deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(30deg);
+      }
+    }
+    &:nth-child(12) {
+      transform: rotate(345deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(15deg);
+      }
+    }
+    &:nth-child(13) {
+      transform: rotate(0deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(0deg);
+      }
+    }
+    &:nth-child(14) {
+      transform: rotate(15deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-15deg);
+      }
+    }
+    &:nth-child(15) {
+      transform: rotate(30deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-30deg);
+      }
+    }
+    &:nth-child(16) {
+      transform: rotate(45deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-45deg);
+      }
+    }
+    &:nth-child(17) {
+      transform: rotate(60deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-60deg);
+      }
+    }
+    &:nth-child(18) {
+      transform: rotate(75deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-75deg);
+      }
+    }
+    &:nth-child(19) {
+      transform: rotate(90deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-90deg);
+      }
+    }
+    &:nth-child(20) {
+      transform: rotate(105deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-105deg);
+      }
+    }
+    &:nth-child(21) {
+      transform: rotate(120deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-120deg);
+      }
+    }
+    &:nth-child(22) {
+      transform: rotate(135deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-135deg);
+      }
+    }
+    &:nth-child(23) {
+      transform: rotate(150deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-150deg);
+      }
+    }
+    &:nth-child(24) {
+      transform: rotate(165deg) translate(-50%, -50%);
+      i {
+        transform: translateX(-50%) rotate(-165deg);
+      }
+    }
+    &.act {
+      &::after {
+        content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 100px;
-        height: 100px;
+        width: 5px;
+        height: 5px;
         background-color: #fff;
+        border-radius: 50%;
+      }
+      i {
+        color: #fff;
+      }
     }
-}
-
-.size-option-top{
-    margin-bottom: 15px;
-}
-.size-option-side{
+  }
+  .compas {
     position: absolute;
     top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-}
-.size-option-wrap{
-    width: 88px;
-    margin: 0 auto;
-    .size-option{
-        display: flex;
-        align-items: center;
-        input{
-            width: 100%;
-            flex: 1;
-        }
-        span{
-            flex: none;
-        }
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 148px;
+    height: 148px;
+    border: 4px solid #fff;
+    border-radius: 50%;
+    .compas-arr {
+      width: 100%;
+      height: 100%;
+      background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
+      background-size: 122px 122px;
     }
+  }
+}
+
+.draw-flow-wrap {
+  margin: 10px 0;
+}
+
+// 지붕모듈선택
+.roof-module-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  .module-tab-bx {
+    flex: 1;
+    height: 34px;
+    line-height: 31px;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    background-color: transparent;
+    font-size: 12px;
+    color: #aaa;
+    text-align: center;
+    cursor: default;
+    transition: all 0.15s ease-in-out;
+    &.act {
+      background-color: #1083e3;
+      border: 1px solid #1083e3;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+  .tab-arr {
+    display: block;
+    width: 9px;
+    height: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+    transition: all 0.15s ease-in-out;
+    &.act {
+      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+    }
+  }
+}
+
+.roof-module-compas {
+  margin-bottom: 24px;
+  .compas-box-inner {
+    width: 280px;
+    height: 253px;
+    .circle {
+      top: 86%;
+      // &:nth-child(1),
+      // &:nth-child(7),
+      // &:nth-child(13),
+      // &:nth-child(19){
+      //     &::before{
+      //         content: '';
+      //         position: absolute;
+      //         top: 20px;
+      //         left: 50%;
+      //         transform: translateX(-50%);
+      //         width: 1px;
+      //         height: 6px;
+      //         background-color: #8B8B8B;
+      //     }
+      // }
+      i {
+        top: 22px;
+      }
+      &.act {
+        i {
+          color: #8b8b8b;
+        }
+      }
+    }
+  }
+}
+.center-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.module-table-flex-wrap {
+  display: flex;
+  gap: 10px;
+  .outline-form {
+    flex: 1;
+  }
+}
+
+.module-box-tab {
+  display: flex;
+  .module-btn {
+    flex: 1;
+    border-top: 1px solid #505050;
+    border-bottom: 1px solid #505050;
+    border-right: 1px solid #505050;
+    background-color: #454545;
+    color: #fff;
+    height: 30px;
+    font-size: 12px;
+    font-weight: 400;
+    transition: all 0.15s ease-in-out;
+    &:first-child {
+      border-left: 1px solid #505050;
+    }
+    &.act {
+      border-color: #fff;
+      background-color: #fff;
+      color: #101010;
+    }
+  }
+}
+
+.module-table-box {
+  flex: 1;
+  background-color: #3d3d3d;
+  border-radius: 2px;
+  .module-table-inner {
+    padding: 10px;
+    .outline-form {
+      span {
+        width: auto;
+      }
+    }
+    .module-table-tit {
+      padding: 10px 0;
+      font-size: 12px;
+      color: #fff;
+      border-bottom: 1px solid #4d4d4d;
+    }
+    .eaves-keraba-table {
+      width: 100%;
+      margin-top: 15px;
+      .eaves-keraba-th {
+        width: 72px;
+      }
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 5px;
+      }
+    }
+    .self-table-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      padding-bottom: 15px;
+    }
+  }
+  .warning-guide {
+    padding: 20px;
+    .warning {
+      color: #ffcaca;
+      max-height: 55px;
+      overflow-y: auto;
+      padding-right: 30px;
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #d9d9d9;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.module-self-table {
+  display: table;
+  border-top: 1px solid #4d4d4d;
+  border-collapse: collapse;
+  width: 100%;
+  .self-table-item {
+    display: table-row;
+    .self-item-td,
+    .self-item-th {
+      display: table-cell;
+      vertical-align: middle;
+      border-bottom: 1px solid #4d4d4d;
+    }
+    .self-item-th {
+      width: 60px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+    }
+    .self-item-td {
+      font-size: 12px;
+      font-weight: 400;
+      color: #fff;
+      padding: 15px 20px;
+    }
+  }
+}
+
+.self-table-flx {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+  button {
+    margin-left: auto;
+  }
+}
+.hexagonal-wrap {
+  .hexagonal-item {
+    padding: 15px 0;
+    border-bottom: 1px solid #4d4d4d;
+    &:first-child {
+      padding-top: 0;
+    }
+    &:last-child {
+      padding-bottom: 0;
+      border: none;
+    }
+    .hexagonal-flx-auto {
+      display: flex;
+      justify-content: space-between;
+    }
+    .hexagonal-flx {
+      display: flex;
+      align-items: center;
+      button {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
+// 회로 및 가대설정
+.circuit-check-inner {
+  padding: 5px 0;
+  &.overflow {
+    overflow-y: auto;
+    max-height: 100px;
+    min-height: 60px;
+    &::-webkit-scrollbar {
+      width: 4px;
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #d9d9d9;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  }
+  .d-check-box {
+    margin-bottom: 15px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.x-scroll-table {
+  overflow: auto;
+  padding-bottom: 5px;
+  background-color: transparent;
+  max-height: 170px;
+  .roof-module-table {
+    min-width: 1200px;
+  }
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #b4b4b4;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+.circuit-right-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.circuit-data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  span {
+    display: inline-flex;
+    align-items: center;
+    .del {
+      display: block;
+      margin-left: 10px;
+      width: 15px;
+      height: 15px;
+      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+.circuit-table-tit {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 11px 10px;
+  background-color: #474747;
+  border: 1px solid #505050;
+  border-bottom: none;
+}
+
+.circuit-overflow {
+  overflow-x: auto;
+  &::-webkit-scrollbar {
+    height: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  .module-table-box {
+    display: flex;
+    &.by-max {
+      min-width: 886px;
+    }
+  }
+}
+.circuit-title-sel {
+  padding-bottom: 14px;
+  .outline-form {
+    span {
+      color: #62c207;
+    }
+    .grid-select {
+      .sort-select {
+        border: 1px solid #4e9e04;
+        background-color: #1a3104;
+        p {
+          line-height: 27px;
+        }
+        .select-item-wrap {
+          background-color: #1a3104;
+          border: 1px solid #4e9e04;
+          .select-item:hover {
+            background-color: #294e07;
+          }
+          &::-webkit-scrollbar {
+            width: 2px;
+            background-color: transparent;
+          }
+          &::-webkit-scrollbar-thumb {
+            background-color: #fff;
+            border-radius: 10px;
+          }
+          &::-webkit-scrollbar-track {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+}
+
+.circuit-table-flx-wrap {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  .circuit-table-flx-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .bottom-wrap {
+      margin-top: auto;
+    }
+    .roof-module-table {
+      table {
+        table-layout: fixed;
+      }
+    }
+  }
+}
+
+.circuit-count-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// 모듈부가기능
+.additional-radio-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 0;
+  margin-bottom: 24px;
+}
+.additional-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+}
+
+.additional-color-wrap {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  gap: 15px;
+  .additional-color-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .additional-color {
+      display: block;
+      width: 16px;
+      height: 16px;
+      &.pink {
+        border: 2px solid #ce1c9c;
+        background-color: #16417d;
+      }
+      &.white {
+        border: 2px solid #fff;
+        background-color: #001027;
+      }
+    }
+  }
+}
+
+// color setting
+.color-setting-wrap {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #424242;
+  .color-tit {
+    font-size: 13px;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 10px;
+  }
+  .color-picker {
+    .react-colorful {
+      width: 100%;
+      height: auto;
+      gap: 20px;
+      .react-colorful__pointer {
+        width: 15px;
+        height: 15px;
+        border: 4px solid #fff;
+      }
+      .react-colorful__saturation {
+        border-radius: 2px;
+        height: 200px;
+        border-bottom: 5px solid #000;
+      }
+      .react-colorful__last-control {
+        border-radius: 2px;
+        height: 10px;
+      }
+    }
+    .hex-color-box {
+      display: flex;
+      align-items: center;
+      margin-top: 15px;
+      .color-box-tit {
+        font-size: 12px;
+        color: #fff;
+        font-weight: 500;
+        margin-right: 10px;
+      }
+      .color-hex-input {
+        width: 150px;
+        margin-right: 5px;
+        input {
+          width: 100%;
+        }
+      }
+      .color-box {
+        display: block;
+        width: 30px;
+        height: 30px;
+        border-radius: 4px;
+      }
+    }
+    .default-color-wrap {
+      margin-top: 25px;
+      .default-tit {
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+      .color-button-wrap {
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        gap: 21px;
+        .default-color {
+          display: block;
+          width: 100%;
+          height: 30px;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 5px;
+  margin-bottom: 15px;
+  .font-option-item {
+    .option-item-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      margin-bottom: 10px;
+    }
+  }
+}
+.font-ex-wrap {
+  margin-bottom: 15px;
+  .font-ex-tit {
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
+    margin-bottom: 10px;
+  }
+  .font-ex-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 80px;
+    background-color: #fff;
+  }
+}
+
+// 치수선 설정
+.font-btn-wrap {
+  margin-bottom: 15px;
+  button {
+    width: 100%;
+    height: 30px;
+    line-height: 28px;
+  }
+}
+
+.line-color-wrap {
+  margin-bottom: 15px;
+  .color-btn {
+    display: block;
+    width: 100%;
+    height: 30px;
+    border-radius: 2px;
+  }
+}
+
+.form-box {
+  width: 100%;
+  background-color: #fff;
+  padding: 10px 15px 20px;
+  .line-form {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-width: 102px;
+    min-height: 40px;
+    margin: 0 auto;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0px;
+      left: 0;
+      width: 100%;
+      height: 40px;
+      border-left: 1px dashed #101010;
+      border-right: 1px dashed #101010;
+    }
+    .line-font-box {
+      .font {
+        display: block;
+        padding-bottom: 15px;
+        color: #101010;
+        text-align: center;
+        line-height: 1;
+      }
+      .line {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 1px;
+        border-radius: 30px;
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%) rotate(45deg);
+          left: 1px;
+          width: 9px;
+          height: +9px;
+          border: 1px solid;
+          border-color: inherit;
+          border-top: none;
+          border-right: none;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%) rotate(45deg);
+          right: 1px;
+          width: 9px;
+          height: 9px;
+          border: 1px solid;
+          border-color: inherit;
+          border-bottom: none;
+          border-left: none;
+        }
+      }
+    }
+  }
+}
+
+// 사이즈 변경
+.size-inner-warp {
+  position: relative;
+}
+.size-check-wrap {
+  position: relative;
+  display: block;
+  width: 132px;
+  height: 132px;
+  margin: 0 auto;
+  .size-btn {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    &.act {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border-radius: 50%;
+      }
+    }
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+    &:nth-child(4) {
+      bottom: 0;
+      right: 0;
+    }
+  }
+  .size-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    background-color: #fff;
+  }
+}
+
+.size-option-top {
+  margin-bottom: 15px;
+}
+.size-option-side {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.size-option-wrap {
+  width: 88px;
+  margin: 0 auto;
+  .size-option {
+    display: flex;
+    align-items: center;
+    input {
+      width: 100%;
+      flex: 1;
+    }
+    span {
+      flex: none;
+    }
+  }
 }
 
 //이미지 크기 설정
-.range-wrap{
-    display: flex;
-    align-items: center;
-    input{
-        flex: 1;
-        margin-right: 10px;
-    }
-    label{
-        flex: none;
-        text-align: right;
-        width: 38px;
-        font-size: 13px;
-        color: #fff;
-        font-weight: 500;
-    }
+.range-wrap {
+  display: flex;
+  align-items: center;
+  input {
+    flex: 1;
+    margin-right: 10px;
+  }
+  label {
+    flex: none;
+    text-align: right;
+    width: 38px;
+    font-size: 13px;
+    color: #fff;
+    font-weight: 500;
+  }
 }
 
 // 이미지 불러오기
-.img-flex-box{
-    display: flex;
-    align-items: center;
+.img-flex-box {
+  display: flex;
+  align-items: center;
 }
-.img-load-from{
-    margin-top: 20px;
-    .img-load-item{
-        border-top: 1px solid #424242;
-        padding: 18px 0;
-        .d-check-radio{
-            margin-bottom: 20px;
-        }
+.img-load-from {
+  margin-top: 20px;
+  .img-load-item {
+    border-top: 1px solid #424242;
+    padding: 18px 0;
+    .d-check-radio {
+      margin-bottom: 20px;
     }
-    border-bottom: 1px solid #424242;
+  }
+  border-bottom: 1px solid #424242;
 }
 
 // 지붕모듈선택 변경
-.module-table-box{
-    &.none-flex{
+.module-table-box {
+  &.none-flex {
+    flex: none;
+    width: 230px;
+    .outline-form {
+      .grid-select {
         flex: none;
-        width: 230px;
-        .outline-form{
-            .grid-select{
-                flex: none;
-                width: 95.77px;
-            }
-            .thin{
-                margin-left: 0;
-            }
-        }
+        width: 95.77px;
+      }
+      .thin {
+        margin-left: 0;
+      }
     }
+  }
 }
-.roof-module-tab2-overflow{
-    max-height: 650px;
-    overflow-y: auto;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #4D4D4D;
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
+.roof-module-tab2-overflow {
+  max-height: 650px;
+  overflow-y: auto;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #4d4d4d;
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
 }
-.module-table-flex-wrap{
-    &.tab2{
-        margin-top: 10px;
-        gap: 15px;
-        
+.module-table-flex-wrap {
+  &.tab2 {
+    margin-top: 10px;
+    gap: 15px;
+  }
+  .module-flex-item {
+    flex: 1;
+    .module-flex-item-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #4d4d4d;
     }
-    .module-flex-item{
-        flex: 1;
-        .module-flex-item-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .flex-item-btn-wrap{
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 8px;
-            margin-bottom: 24px;
-        }
-        &.non-flex{
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            flex: none;
-            padding-top: 27.5px;
-            width: 260px;
-        }
+    .flex-item-btn-wrap {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 8px;
+      margin-bottom: 24px;
     }
+    &.non-flex {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      flex: none;
+      padding-top: 27.5px;
+      width: 260px;
+    }
+  }
 }
 
-.module-table-box{
-    .module-table-inner{
-        .module-table-flex-wrap{
-            &.tab2{
-                .eaves-keraba-table{
-                    .eaves-keraba-th{
-                        width: 90px;
-                    }
-                    .eaves-keraba-td{
-                        padding-left: 0;
-                        padding-bottom: 5px;
-                    }
-                } 
-            }
-        } 
-    } 
-} 
-.keraba-flex{
-    display: flex;
-    align-items: center;
-    .grid-select{
-        flex: none;
-        width: 110px;
-    }
-    .outline-form{
-        justify-content: flex-end;
+.module-table-box {
+  .module-table-inner {
+    .module-table-flex-wrap {
+      &.tab2 {
+        .eaves-keraba-table {
+          .eaves-keraba-th {
+            width: 90px;
+          }
+          .eaves-keraba-td {
+            padding-left: 0;
+            padding-bottom: 5px;
+          }
+        }
+      }
     }
+  }
+}
+.keraba-flex {
+  display: flex;
+  align-items: center;
+  .grid-select {
+    flex: none;
+    width: 110px;
+  }
+  .outline-form {
+    justify-content: flex-end;
+  }
+}
+
+.pop-spinner {
+  position: absolute;
+  bottom: 10px;
+  left: 5px;
+  width: calc(100% - 10px);
+  height: calc(100% - 49px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($color: #101010, $alpha: 0.5);
+  z-index: 2000000;
+  .loader {
+    font-size: 10px;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    animation: mulShdSpin 1.1s infinite ease;
+    transform: translateZ(0);
+  }
+  @keyframes mulShdSpin {
+    0%,
+    100% {
+      box-shadow:
+        0em -2.6em 0em 0em #fff,
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+    }
+    12.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+        1.8em -1.8em 0 0em #fff,
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+    }
+    25% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
+        2.5em 0em 0 0em #fff,
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    37.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
+        1.75em 1.75em 0 0em #fff,
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    50% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
+        0em 2.5em 0 0em #fff,
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    62.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
+        -1.8em 1.8em 0 0em #fff,
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    75% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
+        -2.6em 0em 0 0em #fff,
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    87.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
+        -1.8em -1.8em 0 0em #fff;
+    }
+  }
 }