From ec483a8bb8705bd364d1124efe4f03e016d71934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:11:19 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_modal.scss | 4305 +++++++++++++++++++---------------------
 1 file changed, 1998 insertions(+), 2307 deletions(-)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 58c6bc87..65b104b7 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,550 +4,531 @@ $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;
-  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;
+.modal-pop-wrap{
+    position: fixed;
     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 {
+    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{
     display: flex;
     align-items: center;
-    gap: 5px;
-    button {
-      flex: 1;
+    padding: 10px 24px;
+    background-color: #000;
+    // overflow: hidden;
+    cursor: pointer;
+    h1.title{
+        font-size: 13px;
+        color: $pop-color;
+        font-weight: 700;
     }
-    &.sub {
-      button {
-        flex: 1 1 auto;
-        padding: 0;
-      }
-      margin-bottom: 14px;
+    .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-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;
-    font-weight: $pop-normal-weight;
-  }
-}
-.modal-foot {
-  display: block;
-  width: 100%;
-  padding: 5px 0;
-  background-color: #000;
-  cursor: pointer;
 }
 
-.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 {
+.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;
+        font-weight: $pop-normal-weight;
+    }
+}
+.modal-foot{
+    display: block;
+    width: 100%;
+    padding: 5px 0;
+    background-color: #000;
+    cursor: pointer;
+}
+
+.adsorption-point{
     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;
+    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;
+        }
     }
-  }
 }
 
 // grid-option
-.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 {
+.grid-check-form{
     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%;
-        }
-      }
+    gap: 15px;
+    padding-bottom: 15px;
+    &.border{
+        border-bottom: 1px solid #424242;
     }
-    &:last-child {
-      margin-bottom: 0;
+}
+.grid-check-form-block{
+    display: block;
+    > div{
+        margin-bottom: 10px;
     }
-  }
-  .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%);
+}
+.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%;
+                }
+            }
         }
-      }
-      .input-grid {
+        &: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%;
-  }
+.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;
+.grid-select{
+    flex: 1;
+    height: 30px;
+    &.no-flx{
+        flex: unset;
     }
-    > ul {
-      border: none;
+    .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;
+    &.right{
+        p{
+            text-align: right;
+        }
+        ul{
+            li{
+                justify-content: flex-end;
+            }
+        }
     }
-    ul {
-      li {
-        justify-content: flex-end;
-      }
-    }
-  }
 }
-.grid-btn-wrap {
-  padding-top: 15px;
-  text-align: right;
-  button {
-    padding: 0 10px;
-  }
+.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-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;
+.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;
-  }
+.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 {
-    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 {
+.move-form{
+    width: 100%;
+    p{
         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;
+    }
+}
+.input-move-wrap{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    span{
         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;
-        }
-      }
+        font-size: $pop-normal-size;
     }
-  }
-  .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;
-    }
-    th {
-      padding: 14px 0;
-    }
-    tr {
-      &:first-child {
-        td,
-        th {
-          padding-top: 14px;
+    .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;
+                }
+            }
+        }
+    }
+    .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;
+        }
+        th{
+            padding: 14px 0;
+        }
+        tr{
+            &:first-child{
+                td,
+                th{
+                    padding-top: 14px;
+                }
+            }
+            &:last-child{
+                td,
+                th{
+                    padding-bottom: 0px;
+                }
+            }
         }
-      }
-      &:last-child {
-        td,
-        th {
-          padding-bottom: 0px;
-        }
-      }
     }
-  }
 }
 
 // 2024-12-11
@@ -558,1984 +539,1694 @@ $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;
-      }
-    }
-  }
-}
-.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 {
+.pop-form-radio{
     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;
+    gap: 10px;
+    &.place{
+        gap: 33px;
+        .outline-form{
+            span{
+                width: fit-content;
+            }
+            .input-grid{
+                width: 80px;
+            }
+        }
     }
-    &: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);
-  }
+.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;
+    }
+
 }
 
-.for-address {
-  input {
-    flex: 1;
-  }
-  .check-address {
+.img-edit-wrap{
     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);
+    .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;
+        }
     }
-    &.success {
-      background-image: url(../../public/static/images/canvas/img_check_success.svg);
+}
+.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 {
+.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{
     display: flex;
     align-items: center;
-    margin-bottom: 14px;
-    &:last-child {
-      margin-bottom: 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;
+        }
     }
-    .outline-form {
-      // width: 50%;
-      margin-right: 15px;
-    }
-  }
-  &:last-child {
-    border-bottom: 1px solid #424242;
-  }
-}
-.outline-form {
-  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;
+    .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;
     }
-  }
-
-  .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 {
-  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 {
+.cul-wrap{
     display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    background-color: #3d3d3d;
-    border-radius: 2px;
-  }
+    .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 ;
+    }
 }
 
 // 외벽선 속성 설정
-.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 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;
-        }
-      }
+.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 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;
-      }
-    }
-  }
-}
-.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 {
-  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 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;
-    }
-  }
-}
-
-.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 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);
-          }
-        }
-      }
-    }
-  }
-}
-
-// 경사설정
-.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 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%);
-          }
-        }
-        .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;
+.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%;
+        }
     }
-  }
-}
-.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%);
+    .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;
     }
-    &.right {
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
+    .shape-menu-box{
+        &.act,
+        &:hover{
+            .shape-box{background-color: #008BFF;}
+            .shape-title{color: #008BFF;}
+        }
     }
-    &.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);
-    }
-  }
 }
 
-.plane-tab-guide {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: $pop-color;
-  margin-top: 10px;
+.setting-box{
+    padding: 14px 0;
+    border-top: 1px solid #424242;
+    border-bottom: 1px solid #424242;
 }
-.plane-shape-btn {
-  padding-top: 10px;
-  margin-top: auto;
-  button {
-    display: block;
-    width: 100%;
-  }
+.padding-form{
+    padding-left: 23px;
+}
+.discrimination-box{
+    padding: 16px 12px;
+    border: 1px solid #3D3D3D;
+    border-radius: 2px;
 }
 
-// 오브젝트 배치
-.mb-box {
-  margin-bottom: 24px;
+.modal-bottom-border-bx{
+    margin-top: 24px;
+    padding-bottom: 14px;
+    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;
-}
-
-.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%);
+// 처마∙케라바 변경
+.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;
+            }
+        }
     }
-  }
-  .object-size-input {
-    margin-left: auto;
-    .eaves-keraba-th {
-      position: relative;
-      .object-input-num {
-        position: absolute;
-        top: 7px;
-        left: -20px;
-        font-size: 13px;
-      }
+}
+.guide{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: $pop-color;
+    margin-bottom: 24px;
+    &.sm{
+        margin-bottom: 15px;
+    }
+    span{
+        display: block;
     }
-  }
 }
 
-// 표시변경
-.display-change-wrap {
-  margin: 24px 0;
-}
-.warning {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: #ffafaf;
+// 지붕면 할당
+.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;
+        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;
+        }
+    }
 }
 
-// 각 변 속성 변경
-.radio-grid-wrap {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px 15px;
+.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;
+    }
 }
 
-// 면 흐름 설정
-.drawing-flow-wrap {
-  display: flex;
-  gap: 10px;
-  .discrimination-box {
+.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;
+        }
+    }
+}
+
+.plane-detail-wrap{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.plane-shape-wrapper{
     flex: 1;
     display: flex;
     flex-direction: column;
-    .object-direction-wrap {
-      flex: 1;
+    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%;
+            }
+        }
     }
-    &:first-child {
-      flex: none;
-      width: 195px;
+}
+.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);
+        }
     }
-  }
 }
 
-.compas-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.plane-tab-guide{
+    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%;
+    }
+}
+
+// 오브젝트 배치
+.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%);
+        }
+    }
+    .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;
+    position: relative;
+    width: 200px;
+    height: 200px;
     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;
+    
+    .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;
+            }
+        }
     }
-    &: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: '';
+    .compas{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 5px;
-        height: 5px;
-        background-color: #fff;
+        width: 148px;
+        height: 148px;
+        border: 4px solid #fff;
         border-radius: 50%;
-      }
-      i {
-        color: #fff;
-      }
+        .compas-arr{
+            width: 100%;
+            height: 100%;
+            background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
+            background-size: 122px 122px;
+        }
     }
-  }
-  .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;
+.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;
+.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);
         }
-      }
     }
-  }
-}
-.center-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
 }
 
-.module-table-flex-wrap {
-  display: flex;
-  gap: 10px;
-  .outline-form {
+.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-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;
+.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;
+        }
     }
-    &.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 {
+.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;
+.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;
-      background-color: transparent;
+        width: 4px;
+        height: 4px;
+        background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-      background-color: #d9d9d9;
+        background-color: #b4b4b4;
     }
     &::-webkit-scrollbar-track {
-      background-color: transparent;
+        background-color: transparent;
     }
-  }
-  .d-check-box {
-    margin-bottom: 15px;
-    &:last-child {
-      margin-bottom: 0;
+    &::-webkit-scrollbar-corner{
+        background-color: transparent;
     }
-  }
 }
 
-.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 {
+.circuit-right-wrap{
     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;
-          }
-        }
-      }
-    }
-  }
+    justify-content: flex-end;
 }
 
-.circuit-table-flx-wrap {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 10px;
-  .circuit-table-flx-box {
-    flex: 1;
+.circuit-data-form{
     display: flex;
     flex-direction: column;
-    .bottom-wrap {
-      margin-top: auto;
+    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;
+        }
     }
-    .roof-module-table {
-      table {
-        table-layout: fixed;
-      }
-    }
-  }
+}
+.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-count-input {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.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;
+    .circuit-title{
+        font-size: 12px;
+        color: #62C207;
+        margin-bottom: 5px;
+    }
+    .circuit-sel-wrap{
+        display: flex;
+        align-items: center;
+        .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-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-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 {
+.additional-color-wrap{
     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;
-      }
+    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;
+.color-setting-wrap{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #424242;
+    .color-tit{
+        font-size: 13px;
         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;
-      }
+        color: #ffffff;
+        margin-bottom: 10px;
     }
-    .default-color-wrap {
-      margin-top: 25px;
-      .default-tit {
+    .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;
-      }
-      .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-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 80px;
+        background-color: #fff;
     }
-  }
-}
-.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;
+.font-btn-wrap{
+    margin-bottom: 15px;
+    button{
+        width: 100%;
+        height: 30px;
+        line-height: 28px;
     }
-    .line-font-box {
-      .font {
-        display: block;
-        padding-bottom: 15px;
-        color: #101010;
-        text-align: center;
-        line-height: 1;
-      }
-      .line {
-        position: relative;
+}
+
+.line-color-wrap{
+    margin-bottom: 15px;
+    .color-btn{
         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;
-        }
-      }
+        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-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: '';
+.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: 8px;
-        height: 8px;
+        width: 100px;
+        height: 100px;
         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-top{
+    margin-bottom: 15px;
 }
-.size-option-side {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
+.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;
+.size-option-wrap{
+    width: 88px;
+    margin: 0 auto;
+    .size-option{
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            flex: 1;
+        }
+        span{
+            flex: none;
+        }
     }
-    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 {
-    flex: none;
-    width: 230px;
-    .outline-form {
-      .grid-select {
+.module-table-box{
+    &.none-flex{
         flex: none;
-        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;
-  }
-}
-.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;
-    }
-    .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;
-          }
+        width: 230px;
+        .outline-form{
+            .grid-select{
+                flex: none;
+                width: 95.77px;
+            }
+            .thin{
+                margin-left: 0;
+            }
         }
-      }
     }
-  }
 }
-.keraba-flex {
-  display: flex;
-  align-items: center;
-  .grid-select {
-    flex: none;
-    width: 110px;
-  }
-  .outline-form {
-    justify-content: flex-end;
-  }
+.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-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;
+        }
+    }
 }
 
-.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);
+.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;
     }
-    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);
+    .outline-form{
+        justify-content: flex-end;
     }
-    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;
-    }
-  }
 }
 
 .pop-spinner{