From 1dbf277cf534227f351d2a94c58e9da6140f66d1 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 31 Oct 2024 10:09:45 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=A1=B0=EC=84=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99,=20=EB=B3=B5=EC=82=AC=20=EA=B7=B8=EB=A6=AC=EB=93=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=8F=99=20=EB=8F=84=EB=A8=B8=20=EC=98=A4=ED=94=84?=
 =?UTF-8?q?=EC=85=8B=20UI=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=8B=A4?=
 =?UTF-8?q?=EA=B5=AD=EC=96=B4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/auxiliary/AuxiliaryCopy.jsx         |   49 +-
 .../modal/auxiliary/AuxiliaryMove.jsx         |   63 +-
 .../floor-plan/modal/grid/GridMove.jsx        |   14 +-
 .../floor-plan/modal/object/DormerOffset.jsx  |   41 +-
 src/locales/ja.json                           |    4 +-
 src/styles/_modal.scss                        | 3980 ++++++++++-------
 6 files changed, 2374 insertions(+), 1777 deletions(-)

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
index b88d7a3b..e4654e4a 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
@@ -3,50 +3,79 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
+import { useState } from 'react'
 
 export default function AuxiliaryCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
         <div className="modal-head">
-          <h1 className="title">補助線のコピー </h1>
+          <h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="grid-option-tit">コピーする方向を入力してください</div>
+          <div className="grid-option-tit">{getMessage('modal.auxiliary.copy.info')}</div>
           <div className="grid-option-wrap">
             <div className="grid-option-box">
               <div className="move-form">
-                <p className="mb5">長さ</p>
+                <p className="mb5">{getMessage('length')}</p>
                 <div className="input-move-wrap mb5">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
-              </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
index db4ad159..c6918d9c 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
@@ -13,6 +13,7 @@ export default function AuxiliaryMove(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -33,44 +34,46 @@ export default function AuxiliaryMove(props) {
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button
-                  className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('↑')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
-                  }}
-                ></button>
-                <button
-                  className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('↓')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-                  }}
-                ></button>
-                <button
-                  className={`direction left ${arrow1 === '←' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('←')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
-                  }}
-                ></button>
-                <button
-                  className={`direction right ${arrow1 === '→' ? 'act' : ''}`}
-                  onClick={() => {
-                    setArrow1('→')
-                    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
-                  }}
-                ></button>
-              </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx
index 6d901fe3..7b39c3f6 100644
--- a/src/components/floor-plan/modal/grid/GridMove.jsx
+++ b/src/components/floor-plan/modal/grid/GridMove.jsx
@@ -34,20 +34,22 @@ export default function GridMove(props) {
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button className="direction up"></button>
+                    <button className="direction down act"></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={910} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button className="direction left"></button>
+                    <button className="direction right"></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
-              </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx
index b4292821..0045a469 100644
--- a/src/components/floor-plan/modal/object/DormerOffset.jsx
+++ b/src/components/floor-plan/modal/object/DormerOffset.jsx
@@ -3,12 +3,15 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { useState } from 'react'
 
 export default function DormerOffset(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const [arrow1, setArrow1] = useState(null)
+  const [arrow2, setArrow2] = useState(null)
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm`}>
@@ -29,20 +32,46 @@ export default function DormerOffset(props) {
                     <input type="text" className="input-origin" defaultValue={0} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↑')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow1('↓')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
                     <input type="text" className="input-origin" defaultValue={0} />
                   </div>
                   <span>mm</span>
+                  <div className="direction-move-wrap">
+                    <button
+                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('←')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
+                      }}
+                    ></button>
+                    <button
+                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      onClick={() => {
+                        setArrow2('→')
+                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
+                      }}
+                    ></button>
+                  </div>
                 </div>
               </div>
-              <div className="direction-move-wrap">
-                <button className="direction up"></button>
-                <button className="direction down act"></button>
-                <button className="direction left"></button>
-                <button className="direction right"></button>
-              </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
diff --git a/src/locales/ja.json b/src/locales/ja.json
index ffdcb110..6838dc58 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -296,7 +296,9 @@
   "contextmenu.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move": "補助線の移動",
   "modal.auxiliary.move.info": "移動する方向を入力してください",
-  "contextmenu.auxiliary.copy": "보조선 복사(JA)",
+  "contextmenu.auxiliary.copy": "コピーする方向を入力してください",
+  "modal.auxiliary.copy": "補助線のコピー",
+  "modal.auxiliary.copy.info": "コピーする方向を入力してください",
   "contextmenu.auxiliary.remove": "보조선 삭제(JA)",
   "contextmenu.auxiliary.vertical.bisector": "보조선 수직이등분선(JA)",
   "contextmenu.auxiliary.cut": "보조선 절삭(JA)",
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 7fc9c095..ec3883d7 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,1879 +4,2411 @@ $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 unmountpop{
-    from{opacity: 1; scale: 1;}
-    to{opacity: 0; scale: 0.95;}
+@keyframes mountpop {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
 
-.normal-font{
-    font-size: 12px;
-    font-weight: 400;
-    color: #fff;
-}
-.bold-font{
-    font-size: 12px;
-    font-weight: 500;
-    color: #fff;
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
-.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: 9999999;
-    &.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;
-    }
-    &.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;
-            }
-        }
-    }
+.normal-font {
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
 }
-.modal-head{
-    display: flex;
-    align-items: center;
-    padding: 10px 24px;
-    background-color: #000;
-    // overflow: hidden;
-    h1.title{
+
+.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: 9999999;
+
+  &.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;
+  }
+
+  &.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;
-        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{
-    padding: 24px;
-    .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;
+        margin-bottom: 15px;
+      }
     }
+  }
 }
 
-.adsorption-point{
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  background-color: #000;
+  // overflow: hidden;
+  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 {
+  padding: 24px;
+
+  .modal-btn-wrap {
     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;
+    gap: 5px;
+
+    button {
+      flex: 1;
     }
-    i{
-        display: flex;
-        align-items: center;
-        padding: 0 7px;
-        margin-left: auto;
-        height: 100%;
-        font-size: 13px;
-        color: #898989;
+
+    &.sub {
+      button {
+        flex: 1 1 auto;
+        padding: 0;
+      }
+
+      margin-bottom: 14px;
     }
-    &.act{
-        i{
-            color: $pop-color;
-            background-color: #1083E3;
+  }
+
+  .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;
+  }
+}
+
+.adsorption-point {
+  display: flex;
+  align-items: center;
+  background-color: #3A3A3A;
+  border-radius: 3px;
+  padding-left: 11px;
+  overflow: hidden;
+  transition: all 0.17s ease-in-out;
+
+  span {
+    font-size: $pop-normal-size;
+    color: #898989;
+  }
+
+  i {
+    display: flex;
+    align-items: center;
+    padding: 0 7px;
+    margin-left: auto;
+    height: 100%;
+    font-size: 13px;
+    color: #898989;
+  }
+
+  &.act {
+    i {
+      color: $pop-color;
+      background-color: #1083E3;
+    }
+  }
 }
 
 // grid-option
-.grid-check-form{
+.grid-check-form {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 15px;
+
+  &.border {
+    border-bottom: 1px solid #424242;
+  }
+}
+
+.grid-option-wrap {
+  .grid-option-box {
     display: flex;
     align-items: center;
-    gap: 15px;
-    padding-bottom: 15px;
-    &.border{
-        border-bottom: 1px solid #424242;
+    background-color: transparent;
+    border: 1px solid #3D3D3D;
+    border-radius: 2px;
+    padding: 15px 10px;
+    gap: 20px;
+    margin-bottom: 10px;
+
+    .grid-input-form {
+      display: flex;
+      align-items: center;
+
+      span {
+        flex: none;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+      }
+
+      .input-grid {
+        width: 54px;
+
+        input {
+          width: 100%;
+        }
+      }
     }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
-.grid-option-wrap{
-    .grid-option-box{
-        display: flex;
-        align-items: center;
-        background-color: transparent;
-        border: 1px solid #3D3D3D;
-        border-radius: 2px;
-        padding: 15px 10px;
-        gap: 20px;
-        margin-bottom: 10px;
-        .grid-input-form{
-            display: flex;
-            align-items: center;
-            span{
-                flex: none;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-            }
-            .input-grid{
-                width: 54px;
-                input{
-                    width: 100%;
-                }
-            }
-        }
-        &:last-child{
-            margin-bottom: 0;
-        }
-    }
+
+.select-form {
+  .sort-select {
+    width: 100%;
+  }
 }
-.select-form{
-    .sort-select{width: 100%;}
+
+.grid-select {
+  flex: 1;
+
+  &.no-flx {
+    flex: unset;
+  }
+
+  .sort-select {
+    width: 100%;
+    background-color: #313131;
+    min-width: auto;
+    font-size: 12px;
+    border: none;
+
+    p {
+      font-size: 12px;
+    }
+
+    > ul {
+      border: none;
+    }
+  }
+
+  &.right {
+    p {
+      text-align: right;
+    }
+
+    ul {
+      li {
+        justify-content: flex-end;
+      }
+    }
+  }
 }
-.grid-select{
-    flex: 1;
-    &.no-flx{
-        flex: unset;
-    }
-    .sort-select{
-        width: 100%;
-        background-color: #313131;
-        min-width: auto;
-        font-size: 12px;
-        border: none;
-        p{
-            font-size: 12px;
-        }
-        > ul{
-            border: none;
-        }
-    }
-    &.right{
-        p{
-            text-align: right;
-        }
-        ul{
-            li{
-                justify-content: flex-end;
-            }
-        }
-    }
-}
-.grid-btn-wrap{
-    padding-top: 15px;
-    text-align: right;
-    button{
-        padding: 0 10px;
-    }
+
+.grid-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 .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{
-    p{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-    }
+.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%;
-        }
+
+.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: 10px;
+
+.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{
-                display: flex;
-                align-items: center;
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                font-weight: $pop-bold-weight;
-                padding: 18px 0;
-                border-bottom: 1px solid #424242;
-            }
-            td{
-                font-size: $pop-normal-size;
-                color: $pop-color;
-                border-bottom: 1px solid #424242;
-                padding-left: 20px;
-                vertical-align: middle;
-                .flex-box{
-                    display: flex;
-                    align-items: center;
-                    height: 100%;
-                }
-            }
-            &: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;
-                }
-            }
-        }
-    }
-}
+.placement-table {
+  table {
+    table-layout: fixed;
 
-.pop-form-radio{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-.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{
+    tr {
+      th {
         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;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+        padding: 18px 0;
+        border-bottom: 1px solid #424242;
+      }
+
+      td {
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        border-bottom: 1px solid #424242;
+        padding-left: 20px;
+        vertical-align: middle;
+
+        .flex-box {
+          display: flex;
+          align-items: center;
+          height: 100%;
         }
-        &:hover{
-            background-color: #ebebeb;
+      }
+
+      &: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;
+        }
+      }
+    }
+  }
 }
-.img-name-wrap{
+
+.pop-form-radio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.placement-option {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.select-wrap {
+  .sort-select {
+    width: 100%;
+  }
+}
+
+.flex-ment {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+  }
+}
+
+.img-edit-wrap {
+  flex: none;
+
+  .img-edit-btn {
     display: flex;
     align-items: center;
-    width: 100%;
-    margin-left: 10px;
-    input{
-        flex: 1;
+    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;
     }
-    .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);
+
+    &: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);
+  }
 }
 
 // 외벽선 그리기
-.outline-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
-    
-    .outline-inner{
-        display: flex;
-        align-items: center;
-        margin-bottom: 14px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-        .outline-form{
-            // width: 50%;
-            margin-right: 15px;
-        }
-    }
-    &:last-child{
-        border-bottom: 1px solid #424242;
-    }
-}
-.outline-form{
+.outline-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+
+  .outline-inner {
     display: flex;
     align-items: center;
-    
-    span{
-        width: 60px;
-        flex: none;
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-right: 10px;
-        &.thin{
-            width: auto;
-            font-weight: $pop-normal-weight;
-            margin-right: 0;
-        }
+    margin-bottom: 14px;
+
+    &:last-child {
+      margin-bottom: 0;
     }
 
-    .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;
+    .outline-form {
+      // width: 50%;
+      margin-right: 15px;
     }
+  }
+
+  &:last-child {
+    border-bottom: 1px solid #424242;
+  }
 }
 
-.cul-wrap{
+.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;
+  }
+}
+
+.cul-wrap {
+  display: flex;
+
+  .outline-box {
+    width: 50%;
+    margin-right: 15px;
+
+    .outline-form {
+      width: 100%;
+      margin-bottom: 14px;
+      margin-right: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .cul-box {
     display: flex;
-    .outline-box{
-        width: 50%;
-        margin-right: 15px;
-        .outline-form{
-            width: 100%;
-            margin-bottom: 14px;
-            margin-right: 0;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .cul-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-        background-color: #3D3D3D;
-        border-radius: 2px ;
-    }
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    background-color: #3D3D3D;
+    border-radius: 2px;
+  }
 }
 
 // 외벽선 속성 설정
-.properties-guide{
-    font-size: $pop-normal-size;
-    color: #AAA;
-    font-weight: $pop-normal-weight;
-    margin-bottom: 14px;
+.properties-guide {
+  font-size: $pop-normal-size;
+  color: #AAA;
+  font-weight: $pop-normal-weight;
+  margin-bottom: 14px;
 }
 
-.setting-tit{
-    font-size: 13px;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-    margin-bottom: 10px;
-}
-.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;
-                }
-            }
-        }
-    }
+.setting-tit {
+  font-size: 13px;
+  color: $pop-color;
+  font-weight: $pop-bold-weight;
+  margin-bottom: 10px;
 }
 
-// 지붕형상 설정
-.roof-shape-menu{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 24px 10px;
-    margin-bottom: 24px;
-    .shape-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        padding: 13px;
-        background-color: #3D3D3D;
-        transition: background .15s ease-in-out;
-        img{
-            max-width: 100%;
-        }
-    }
-    .shape-title{
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-top: 10px;
-        text-align: center;
-        transition: color .15s ease-in-out;
-    }
-    .shape-menu-box{
-        &.act,
-        &:hover{
-            .shape-box{background-color: #008BFF;}
-            .shape-title{color: #008BFF;}
-        }
-    }
-}
+.properties-setting-wrap {
+  &.outer {
+    margin-top: 24px;
+  }
 
-.setting-box{
+  .setting-btn-wrap {
+    display: flex;
+    align-items: center;
     padding: 14px 0;
     border-top: 1px solid #424242;
     border-bottom: 1px solid #424242;
-}
-.padding-form{
-    padding-left: 23px;
-}
-.discrimination-box{
-    padding: 16px 12px;
-    border: 1px solid #3D3D3D;
-    border-radius: 2px;
+
+    .setting-btn {
+      display: block;
+      width: 100%;
+      height: 40px;
+      font-size: 13px;
+      color: #fff;
+      font-weight: 700;
+      border-radius: 2px;
+      transition: all .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;
+        }
+      }
+    }
+  }
 }
 
-.modal-bottom-border-bx{
-    margin-top: 24px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
+// 지붕형상 설정
+.roof-shape-menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 24px 10px;
+  margin-bottom: 24px;
+
+  .shape-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 13px;
+    background-color: #3D3D3D;
+    transition: background .15s ease-in-out;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  .shape-title {
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-top: 10px;
+    text-align: center;
+    transition: color .15s ease-in-out;
+  }
+
+  .shape-menu-box {
+    &.act,
+    &:hover {
+      .shape-box {
+        background-color: #008BFF;
+      }
+
+      .shape-title {
+        color: #008BFF;
+      }
+    }
+  }
+}
+
+.setting-box {
+  padding: 14px 0;
+  border-top: 1px solid #424242;
+  border-bottom: 1px solid #424242;
+}
+
+.padding-form {
+  padding-left: 23px;
+}
+
+.discrimination-box {
+  padding: 16px 12px;
+  border: 1px solid #3D3D3D;
+  border-radius: 2px;
+}
+
+.modal-bottom-border-bx {
+  margin-top: 24px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
 }
 
 // 처마∙케라바 변경
-.eaves-keraba-table{
-    display: table;
-    border-collapse: collapse;
-    .eaves-keraba-item{
-        display: table-row;
-        .eaves-keraba-th,
-        .eaves-keraba-td{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: $pop-normal-weight;
-            display: table-cell;
-            vertical-align: middle;
-            padding-bottom: 14px;
-        }
-        .eaves-keraba-td{
-            padding-left: 10px;
-        }
-        .eaves-keraba-ico{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 5px;
-            background-color: #3D3D3D;
-            border: 1px solid #3D3D3D;
-            border-radius: 2px;
-            cursor: pointer;
-            &.act{
-                border: 1px solid #ED0004;
-            }
-        }
-        &:last-child{
-            .eaves-keraba-th,
-            .eaves-keraba-td{
-                padding-bottom: 0;
-            }
-        }
+.eaves-keraba-table {
+  display: table;
+  border-collapse: collapse;
+
+  .eaves-keraba-item {
+    display: table-row;
+
+    .eaves-keraba-th,
+    .eaves-keraba-td {
+      font-size: $pop-normal-size;
+      color: $pop-color;
+      font-weight: $pop-normal-weight;
+      display: table-cell;
+      vertical-align: middle;
+      padding-bottom: 14px;
     }
+
+    .eaves-keraba-td {
+      padding-left: 10px;
+    }
+
+    .eaves-keraba-ico {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 5px;
+      background-color: #3D3D3D;
+      border: 1px solid #3D3D3D;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &.act {
+        border: 1px solid #ED0004;
+      }
+    }
+
+    &:last-child {
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 0;
+      }
+    }
+  }
 }
-.guide{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: $pop-color;
-    margin-bottom: 24px;
-    &.sm{
-        margin-bottom: 15px;
-    }
-    span{
-        display: block;
-    }
+
+.guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-bottom: 24px;
+
+  &.sm {
+    margin-bottom: 15px;
+  }
+
+  span {
+    display: block;
+  }
 }
 
 // 지붕면 할당
-.allocation-select-wrap{
+.allocation-select-wrap {
+  display: flex;
+  align-items: center;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
+  margin-bottom: 14px;
+
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-right: 10px;
+  }
+
+  .allocation-edit {
     display: flex;
     align-items: center;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
-    margin-bottom: 14px;
-    span{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-        margin-right: 10px;
-    }
-    .allocation-edit{
-        display: flex;
-        align-items: center;
-        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;
-        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;
-        }
+    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;
+
+    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;
     }
+  }
 }
 
-.block-box{
-    display: flex;
-    align-items: center;
+.block-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+
+  .flex-ment {
     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;
-        }
+
+    .dec {
+      text-decoration: underline;
     }
-    &:last-child{
-        margin-bottom: 0;
+
+    .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;
+.icon-btn-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  button {
     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);
-                }
-            }
-        }
-    }
-}
-
-// 경사설정
-.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;
-    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%;
-            }
-        }
-    }
-}
-.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);
-        }
-    }
-}
-
-.plane-tab-guide{
+    width: 100%;
+    height: 30px;
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
     color: $pop-color;
-    margin-top: 10px;
-}
-.plane-shape-btn{
-    padding-top: 10px;
-    margin-top: auto;
-    button{
-        display: block;
-        width: 100%;
+    border: 1px solid #646464;
+    border-radius: 2px;
+    padding: 0 10px;
+    transition: all .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);
+        }
+      }
+    }
+  }
 }
 
-// 오브젝트 배치
-.mb-box{
-    margin-bottom: 24px;
+// 경사설정
+.slope-wrap {
+  padding-bottom: 24px;
+  border-bottom: 1px solid #424242;
 }
 
-.object-direction-wrap{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.discrimination-tit{
-    font-size: 13px;
-    color: #fff;
-    font-weight: 500;
+// 면형상 배치
+.plane-frame-wrap {
+  display: flex;
+  gap: 10px;
+
+  .plane-shape-wrap {
+    flex: none;
+    width: 73px;
+  }
 }
 
-.object-size-wrap{
-    display: flex;
-    min-height: 206px;
-    gap: 24px;
-    margin-top: 14px;
-    .object-size-img{
-        position: relative;
-        flex: none;
-        width: 200px;
-        background-color: #fff;
-        img{
+.plane-shape-menu {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 5px;
+
+  .shape-menu-box {
+    border-radius: 2px;
+    width: 34px;
+    height: 34px;
+    background-color: #373737;
+    border: 1px solid #676767;
+    transition: background .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;
+  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%);
+          }
         }
-    }
-}
 
-// 표시변경
-.display-change-wrap{
-    margin: 24px 0;
-}
-.warning{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: #FFAFAF;
-}
+        .shape-data {
+          flex: 1;
 
-// 각 변 속성 변경
-.radio-grid-wrap{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px 15px;
-}
+          .eaves-keraba-table {
+            .eaves-keraba-item {
+              .eaves-keraba-th,
+              .eaves-keraba-td {
+                padding-bottom: 10px;
+              }
 
-// 면 흐름 설정
-.drawing-flow-wrap{
-    display: flex;
-    gap: 10px;
-    .discrimination-box{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        .object-direction-wrap{
-            flex: 1;
-        }
-    }
-}
-
-.compas-box{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.compas-box-inner {
-    position: relative;
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    
-    .circle {
-        position: absolute;
-        width: 12px;
-        height: 12px;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        top: 95%;
-        left: 50%;
-        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
-        cursor:pointer;
-        z-index: 3;
-        /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
-        i{
-            position: absolute;
-            top: 12.5px;
-            left: 50%;
-            font-size: 11px;
-            color: #8B8B8B;
-            font-weight: 500;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-use-select: none;
-            user-select: none;
-        }
-        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
-        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
-        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
-        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
-        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
-        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
-        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
-        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
-        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
-        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
-        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
-        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
-        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
-        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
-        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
-        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
-        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
-        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
-        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
-        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
-        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
-        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
-        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
-        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
-        &.act{
-            &::after{
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 5px;
-                height: 5px;
-                background-color: #fff;
-            }
-            i{
-                color: #fff;
-            }
-        }
-    }
-    .compas{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 148px;
-        height: 148px;
-        border: 4px solid #fff;
-        border-radius: 50%;
-        .compas-arr{
-            width: 100%;
-            height: 100%;
-            background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
-            background-size: 122px 122px;
-        }
-    }
-}
-
-
-// 지붕모듈선택
-.roof-module-tab{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 14px;
-    .module-tab-bx{
-        flex: 1;
-        height: 34px;
-        line-height: 31px;
-        border: 1px solid #484848;
-        border-radius: 2px;
-        background-color: transparent;
-        font-size: 12px;
-        color: #AAA;
-        text-align: center;
-        cursor: default;
-        transition: all .15s ease-in-out;
-        &.act{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    .tab-arr{
-        display: block;
-        width: 9px;
-        height: 14px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-        background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-        transition: all .15s ease-in-out;
-        &.act{
-            background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
-        }
-    }
-}
-
-.roof-module-compas{
-    margin-bottom: 24px;
-    .compas-box-inner{
-        width: 280px;
-        height: 253px;
-        .circle{
-            top: 86%;
-            &:nth-child(1),
-            &:nth-child(7),
-            &:nth-child(13),
-            &:nth-child(19){
-                &::before{
-                    content: '';
-                    position: absolute;
-                    top: 20px;
-                    left: 50%;
-                    transform: translateX(-50%);
-                    width: 1px;
-                    height: 6px;
-                    background-color: #8B8B8B;
+              &:last-child {
+                .eaves-keraba-th,
+                .eaves-keraba-td {
+                  padding-bottom: 0px;
                 }
+              }
             }
-            i{
-                top: 32px;
-            }
-            &.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{
+    &.direction-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .plane-direction-box {
         flex: 1;
-    }
-}
-
-.module-box-tab{
-    display: flex;
-    .module-btn{
-        flex: 1;
-        border-top: 1px solid #505050;
-        border-bottom: 1px solid #505050;
-        border-right: 1px solid #505050;
-        background-color: #454545;
-        color: #fff;
-        height: 30px;
-        font-size: 12px;
-        font-weight: 400;
-        transition: all .15s ease-in-out;
-        &:first-child{
-            border-left: 1px solid #505050;
-        }
-        &.act{
-            border-color: #fff;
-            background-color: #fff;
-            color: #101010;
-        }
-    }
-}
-
-.module-table-box{
-    flex: 1;
-    background-color: #3D3D3D;
-    border-radius: 2px;
-    .module-table-inner{
-        padding: 10px;
-        .outline-form{
-            span{
-                width: auto;
-            }
-        }
-        .module-table-tit{
-            padding: 10px 0;
-            font-size: 12px;
-            color: #fff;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .eaves-keraba-table{
-            width: 100%;
-            margin-top: 15px;
-            .eaves-keraba-th{
-                width: 72px;
-            }
-            .eaves-keraba-th,
-            .eaves-keraba-td{
-                padding-bottom: 5px;
-            }
-        }
-        .self-table-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            padding-bottom: 15px;
-        }
-    }
-    .warning-guide{
-        padding: 20px;
-        .warning{
-            color: #FFCACA;
-            max-height: 55px;
-            overflow-y: auto;
-            padding-right: 30px;
-            &::-webkit-scrollbar {
-                width: 4px;
-                background-color: transparent;
-            }
-            &::-webkit-scrollbar-thumb {
-                background-color: #D9D9D9;
-            }
-            &::-webkit-scrollbar-track {
-                background-color: transparent;
-            }
-        }
-    }
-}
-
-.module-self-table{
-    display: table;
-    border-top: 1px solid #4D4D4D;
-    border-collapse: collapse;
-    width: 100%;
-    .self-table-item{
-        display: table-row;
-        .self-item-td,
-        .self-item-th{
-            display: table-cell;
-            vertical-align: middle;
-            border-bottom: 1px solid #4D4D4D;
-        }
-        .self-item-th{
-            width: 60px;
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-        }
-        .self-item-td{
-            font-size: 12px;
-            font-weight: 400;
-            color: #fff;
-            padding: 15px 20px;
-        }
-    }
-}
-
-.self-table-flx{
-    display: flex;
-    align-items: center;
-    margin-top: 15px;
-    button{
-        margin-left: auto;
-    }
-}
-.hexagonal-wrap{
-    .hexagonal-item{
-        padding: 15px 0;
-        border-bottom: 1px solid #4D4D4D;
-        &:first-child{
-            padding-top: 0;
-        }
-        &:last-child{
-            padding-bottom: 0;
-            border: none;
-        }
-        .hexagonal-flx-auto{
-            display: flex;
-            justify-content: space-between;
-        }
-        .hexagonal-flx{
-            display: flex;
-            align-items: center;
-            button{
-                margin-left: auto;
-            }
-        }
-    }
-}
-
-// 회로 및 가대설정
-.circuit-check-inner{
-    padding: 5px 0;
-}
-
-.x-scroll-table{
-    overflow-x: auto;
-    padding-bottom: 5px;
-    .roof-module-table{
-        min-width: 1200px;
-    }
-    &::-webkit-scrollbar {
-        height: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-
-.circuit-right-wrap{
-    display: flex;
-    justify-content: flex-end;
-}
-
-.circuit-data-form{
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    min-height: 60px;
-    padding: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.20);
-    span{
-        display: inline-flex;
-        align-items: center;
-        .del{
-            display: block;
-            margin-left: 10px;
-            width: 15px;
-            height: 15px;
-            background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
-            background-size: cover;
-        }
-    }
-}
-.circuit-table-tit{
-    color: #fff;
-    font-size: 12px;
-    font-weight: 600;
-    padding: 11px 10px;
-    background-color: #474747;
-    border: 1px solid #505050;
-    border-bottom: none;
-}
-
-.circuit-overflow{
-    max-height: 400px;
-    overflow-y: auto;
-    margin-bottom: 15px;
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-
-.circuit-table-flx-wrap{
-    display: flex;
-    gap: 10px;
-    margin-bottom: 10px;
-    .circuit-table-flx-box{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        .bottom-wrap{
-            margin-top: auto;
-        }
-        .roof-module-table{
-            table{
-                table-layout: fixed;
-            }
-        }
-    }
-}
-
-.circuit-count-input{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-// 모듈부가기능
-.additional-radio-wrap{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 0;
-    margin-bottom: 24px;
-}
-.additional-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
-}
-
-.additional-color-wrap{
-    display: flex;
-    align-items: center;
-    padding: 5px 0;
-    gap: 15px;
-    .additional-color-box{
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        .additional-color{
-            display: block;
-            width: 16px;
-            height: 16px;
-            &.pink{
-                border: 2px solid #ce1c9c;
-                background-color: #16417D;
-            }
-            &.white{
-                border: 2px solid #FFF;
-                background-color: #001027;
-            }
-        }
-    }
-}
-
-// color setting
-.color-setting-wrap{
-    padding-bottom: 15px;
-    border-bottom: 1px solid #424242;
-    .color-tit{
-        font-size: 13px;
-        font-weight: 500;
-        color: #ffffff;
-        margin-bottom: 10px;
-    }
-    .color-picker{
-        .react-colorful{
-            width: 100%;
-            height: auto;
-            gap: 20px;
-            .react-colorful__pointer{
-                width: 15px;
-                height: 15px;
-                border: 4px solid #Fff;
-            }
-            .react-colorful__saturation{
-                border-radius: 2px;
-                height: 200px;
-                border-bottom: 5px solid #000;
-            }
-            .react-colorful__last-control{
-                border-radius: 2px;
-                height: 10px;
-            }
-        }
-        .hex-color-box{
-            display: flex;
-            align-items: center;
-            margin-top: 15px;
-            .color-box-tit{
-                font-size: 12px;
-                color: #fff;
-                font-weight: 500;
-                margin-right: 10px;
-            }
-            .color-hex-input{
-                width: 150px;
-                margin-right: 5px;
-                input{
-                    width: 100%;
-                }
-            }
-            .color-box{
-                display: block;
-                width: 30px;
-                height: 30px;
-                border-radius: 4px;
-            }
-        }
-        .default-color-wrap{
-            margin-top: 25px;
-            .default-tit{
-                font-size: 12px;
-                font-weight: 500;
-                color: #fff;
-                margin-bottom: 10px;
-            }
-            .color-button-wrap{
-                display: grid;
-                grid-template-columns: repeat(8, 1fr);
-                gap: 21px;
-                .default-color{
-                    display: block;
-                    width: 100%;
-                    height: 30px;
-                    border-radius: 4px;
-                }
-            }
-        }
-    }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 5px;
-    margin-bottom: 15px;
-    .font-option-item{
-        .option-item-tit{
-            font-size: 12px;
-            font-weight: 500;
-            color: #fff;
-            margin-bottom: 10px;
-        }
-    }
-}
-.font-ex-wrap{
-    margin-bottom: 15px;
-    .font-ex-tit{
-        font-size: 12px;
-        font-weight: 500;
-        color: #fff;
-        margin-bottom: 10px;
-    }
-    .font-ex-box{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-        min-height: 80px;
-        background-color: #fff;
+      }
     }
-    
+  }
 }
 
-// 치수선 설정
-.font-btn-wrap{
-    margin-bottom: 15px;
-    button{
-        width: 100%;
-        height: 30px;
-        line-height: 28px;
+.plane-direction {
+  width: 150px;
+  position: relative;
+  height: 120px;
+
+  span {
+    position: absolute;
+    font-size: 12px;
+    font-weight: 500;
+    color: #B1B1B1;
+
+    &.top {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
     }
-}
 
-.line-color-wrap{
-    margin-bottom: 15px;
-    .color-btn{
-        display: block;
-        width: 100%;
-        height: 30px;
-        border-radius: 2px;
+    &.right {
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
     }
-}
 
-.form-box{
-    width: 100%;
-    background-color: #fff;
-    padding: 10px 15px 20px;
-    .line-form{
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        min-width: 102px;
-        min-height: 40px;
-        margin: 0 auto;
-
-        &::before{
-            content: '';
-            position: absolute;
-            bottom: 0px;
-            left: 0;
-            width: 100%;
-            height: 40px;
-            border-left: 1px dashed #101010;
-            border-right: 1px dashed #101010;
-        }
-        .line-font-box{
-            .font{
-                display: block;
-                padding-bottom: 15px;
-                color: #101010;
-                text-align: center;
-                line-height: 1;
-            }
-            .line{
-                position: relative;
-                display: block;
-                width: 100%;
-                height: 1px;
-                border-radius: 30px;
-                &::before{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%) rotate(45deg);
-                    left: 1px;
-                    width: 9px;
-                    height:+ 9px;
-                    border: 1px solid;
-                    border-color: inherit;
-                    border-top: none;
-                    border-right: none;
-                }
-                &::after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%) rotate(45deg);
-                    right: 1px;
-                    width: 9px;
-                    height: 9px;
-                    border: 1px solid;
-                    border-color: inherit;
-                    border-bottom: none;
-                    border-left: none;
-                }
-            }
-        }
+    &.bottom {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
     }
+
+    &.left {
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
+  }
+
+  .plane-btn {
+    position: absolute;
+    width: 28px;
+    height: 28px;
+    background-color: #777777;
+    background-image: url(../../public/static/images/canvas/plane_arr.svg);
+    background-size: 12px 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 50%;
+    transition: all .15s ease-in-out;
+
+    &.up {
+      top: 22px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.right {
+      top: 50%;
+      right: 32px;
+      transform: translateY(-50%) rotate(90deg);
+    }
+
+    &.down {
+      bottom: 22px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+
+    &.left {
+      top: 50%;
+      left: 32px;
+      transform: translateY(-50%) rotate(270deg);
+    }
+
+    &:hover,
+    &.act {
+      background-color: #fff;
+      background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+    }
+  }
 }
 
-// 사이즈 변경
-.size-inner-warp{
-    position: relative;
+.plane-tab-guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-top: 10px;
 }
-.size-check-wrap{
-    position: relative;
+
+.plane-shape-btn {
+  padding-top: 10px;
+  margin-top: auto;
+
+  button {
     display: block;
-    width: 132px;
-    height: 132px;
-    margin: 0 auto;
-    .size-btn{
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        border: 1px solid #fff;
-        border-radius: 50%;
-        &.act{
-            &::after{
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 8px;
-                height: 8px;
-                background-color: #fff;
-                border-radius: 50%;
-            }
-        }
-        &:nth-child(1){ top: 0; left: 0; }
-        &:nth-child(2){ top: 0; right: 0; }
-        &:nth-child(3){ bottom: 0; left: 0; }
-        &:nth-child(4){ bottom: 0; right: 0; }
+    width: 100%;
+  }
+}
+
+// 오브젝트 배치
+.mb-box {
+  margin-bottom: 24px;
+}
+
+.object-direction-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.discrimination-tit {
+  font-size: 13px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.object-size-wrap {
+  display: flex;
+  min-height: 206px;
+  gap: 24px;
+  margin-top: 14px;
+
+  .object-size-img {
+    position: relative;
+    flex: none;
+    width: 200px;
+    background-color: #fff;
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
-    .size-box{
+  }
+}
+
+// 표시변경
+.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;
+    }
+  }
+}
+
+.compas-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.compas-box-inner {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+
+  .circle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    top: 95%;
+    left: 50%;
+    transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+    cursor: pointer;
+    z-index: 3;
+    /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+    i {
+      position: absolute;
+      top: 12.5px;
+      left: 50%;
+      font-size: 11px;
+      color: #8B8B8B;
+      font-weight: 500;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-use-select: none;
+      user-select: none;
+    }
+
+    &:nth-child(1) {
+      transform: rotate(180deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+
+    &:nth-child(2) {
+      transform: rotate(195deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(165deg);
+      }
+    }
+
+    &:nth-child(3) {
+      transform: rotate(210deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(150deg);
+      }
+    }
+
+    &:nth-child(4) {
+      transform: rotate(225deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(135deg);
+      }
+    }
+
+    &:nth-child(5) {
+      transform: rotate(240deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(120deg);
+      }
+    }
+
+    &:nth-child(6) {
+      transform: rotate(255deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(105deg);
+      }
+    }
+
+    &:nth-child(7) {
+      transform: rotate(270deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(90deg);
+      }
+    }
+
+    &:nth-child(8) {
+      transform: rotate(285deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(75deg);
+      }
+    }
+
+    &:nth-child(9) {
+      transform: rotate(300deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(60deg);
+      }
+    }
+
+    &:nth-child(10) {
+      transform: rotate(315deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(45deg);
+      }
+    }
+
+    &:nth-child(11) {
+      transform: rotate(330deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(30deg);
+      }
+    }
+
+    &:nth-child(12) {
+      transform: rotate(345deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(15deg);
+      }
+    }
+
+    &:nth-child(13) {
+      transform: rotate(0deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(0deg);
+      }
+    }
+
+    &:nth-child(14) {
+      transform: rotate(15deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-15deg);
+      }
+    }
+
+    &:nth-child(15) {
+      transform: rotate(30deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-30deg);
+      }
+    }
+
+    &:nth-child(16) {
+      transform: rotate(45deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-45deg);
+      }
+    }
+
+    &:nth-child(17) {
+      transform: rotate(60deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-60deg);
+      }
+    }
+
+    &:nth-child(18) {
+      transform: rotate(75deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-75deg);
+      }
+    }
+
+    &:nth-child(19) {
+      transform: rotate(90deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-90deg);
+      }
+    }
+
+    &:nth-child(20) {
+      transform: rotate(105deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-105deg);
+      }
+    }
+
+    &:nth-child(21) {
+      transform: rotate(120deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-120deg);
+      }
+    }
+
+    &:nth-child(22) {
+      transform: rotate(135deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-135deg);
+      }
+    }
+
+    &:nth-child(23) {
+      transform: rotate(150deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-150deg);
+      }
+    }
+
+    &:nth-child(24) {
+      transform: rotate(165deg) translate(-50%, -50%);
+
+      i {
+        transform: translateX(-50%) rotate(-165deg);
+      }
+    }
+
+    &.act {
+      &::after {
+        content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 100px;
-        height: 100px;
+        width: 5px;
+        height: 5px;
         background-color: #fff;
-    }
-}
+      }
 
-.size-option-top{
-    margin-bottom: 15px;
-}
-.size-option-side{
+      i {
+        color: #fff;
+      }
+    }
+  }
+
+  .compas {
     position: absolute;
     top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-}
-.size-option-wrap{
-    width: 88px;
-    margin: 0 auto;
-    .size-option{
-        display: flex;
-        align-items: center;
-        input{
-            width: 100%;
-            flex: 1;
-        }
-        span{
-            flex: none;
-        }
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 148px;
+    height: 148px;
+    border: 4px solid #fff;
+    border-radius: 50%;
+
+    .compas-arr {
+      width: 100%;
+      height: 100%;
+      background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
+      background-size: 122px 122px;
     }
+  }
+}
+
+
+// 지붕모듈선택
+.roof-module-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+
+  .module-tab-bx {
+    flex: 1;
+    height: 34px;
+    line-height: 31px;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    background-color: transparent;
+    font-size: 12px;
+    color: #AAA;
+    text-align: center;
+    cursor: default;
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+
+  .tab-arr {
+    display: block;
+    width: 9px;
+    height: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+    }
+  }
+}
+
+.roof-module-compas {
+  margin-bottom: 24px;
+
+  .compas-box-inner {
+    width: 280px;
+    height: 253px;
+
+    .circle {
+      top: 86%;
+
+      &:nth-child(1),
+      &:nth-child(7),
+      &:nth-child(13),
+      &:nth-child(19) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 1px;
+          height: 6px;
+          background-color: #8B8B8B;
+        }
+      }
+
+      i {
+        top: 32px;
+      }
+
+      &.act {
+        i {
+          color: #8B8B8B;
+        }
+      }
+    }
+  }
+}
+
+.center-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.module-table-flex-wrap {
+  display: flex;
+  gap: 10px;
+
+  .outline-form {
+    flex: 1;
+  }
+}
+
+.module-box-tab {
+  display: flex;
+
+  .module-btn {
+    flex: 1;
+    border-top: 1px solid #505050;
+    border-bottom: 1px solid #505050;
+    border-right: 1px solid #505050;
+    background-color: #454545;
+    color: #fff;
+    height: 30px;
+    font-size: 12px;
+    font-weight: 400;
+    transition: all .15s ease-in-out;
+
+    &:first-child {
+      border-left: 1px solid #505050;
+    }
+
+    &.act {
+      border-color: #fff;
+      background-color: #fff;
+      color: #101010;
+    }
+  }
+}
+
+.module-table-box {
+  flex: 1;
+  background-color: #3D3D3D;
+  border-radius: 2px;
+
+  .module-table-inner {
+    padding: 10px;
+
+    .outline-form {
+      span {
+        width: auto;
+      }
+    }
+
+    .module-table-tit {
+      padding: 10px 0;
+      font-size: 12px;
+      color: #fff;
+      border-bottom: 1px solid #4D4D4D;
+    }
+
+    .eaves-keraba-table {
+      width: 100%;
+      margin-top: 15px;
+
+      .eaves-keraba-th {
+        width: 72px;
+      }
+
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 5px;
+      }
+    }
+
+    .self-table-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      padding-bottom: 15px;
+    }
+  }
+
+  .warning-guide {
+    padding: 20px;
+
+    .warning {
+      color: #FFCACA;
+      max-height: 55px;
+      overflow-y: auto;
+      padding-right: 30px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.module-self-table {
+  display: table;
+  border-top: 1px solid #4D4D4D;
+  border-collapse: collapse;
+  width: 100%;
+
+  .self-table-item {
+    display: table-row;
+
+    .self-item-td,
+    .self-item-th {
+      display: table-cell;
+      vertical-align: middle;
+      border-bottom: 1px solid #4D4D4D;
+    }
+
+    .self-item-th {
+      width: 60px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+    }
+
+    .self-item-td {
+      font-size: 12px;
+      font-weight: 400;
+      color: #fff;
+      padding: 15px 20px;
+    }
+  }
+}
+
+.self-table-flx {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+
+  button {
+    margin-left: auto;
+  }
+}
+
+.hexagonal-wrap {
+  .hexagonal-item {
+    padding: 15px 0;
+    border-bottom: 1px solid #4D4D4D;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border: none;
+    }
+
+    .hexagonal-flx-auto {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .hexagonal-flx {
+      display: flex;
+      align-items: center;
+
+      button {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
+// 회로 및 가대설정
+.circuit-check-inner {
+  padding: 5px 0;
+}
+
+.x-scroll-table {
+  overflow-x: auto;
+  padding-bottom: 5px;
+
+  .roof-module-table {
+    min-width: 1200px;
+  }
+
+  &::-webkit-scrollbar {
+    height: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #D9D9D9;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-right-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.circuit-data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.20);
+
+  span {
+    display: inline-flex;
+    align-items: center;
+
+    .del {
+      display: block;
+      margin-left: 10px;
+      width: 15px;
+      height: 15px;
+      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+.circuit-table-tit {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 11px 10px;
+  background-color: #474747;
+  border: 1px solid #505050;
+  border-bottom: none;
+}
+
+.circuit-overflow {
+  max-height: 400px;
+  overflow-y: auto;
+  margin-bottom: 15px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #D9D9D9;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-table-flx-wrap {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+
+  .circuit-table-flx-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .bottom-wrap {
+      margin-top: auto;
+    }
+
+    .roof-module-table {
+      table {
+        table-layout: fixed;
+      }
+    }
+  }
+}
+
+.circuit-count-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// 모듈부가기능
+.additional-radio-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 0;
+  margin-bottom: 24px;
+}
+
+.additional-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+}
+
+.additional-color-wrap {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  gap: 15px;
+
+  .additional-color-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .additional-color {
+      display: block;
+      width: 16px;
+      height: 16px;
+
+      &.pink {
+        border: 2px solid #ce1c9c;
+        background-color: #16417D;
+      }
+
+      &.white {
+        border: 2px solid #FFF;
+        background-color: #001027;
+      }
+    }
+  }
+}
+
+// color setting
+.color-setting-wrap {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #424242;
+
+  .color-tit {
+    font-size: 13px;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 10px;
+  }
+
+  .color-picker {
+    .react-colorful {
+      width: 100%;
+      height: auto;
+      gap: 20px;
+
+      .react-colorful__pointer {
+        width: 15px;
+        height: 15px;
+        border: 4px solid #Fff;
+      }
+
+      .react-colorful__saturation {
+        border-radius: 2px;
+        height: 200px;
+        border-bottom: 5px solid #000;
+      }
+
+      .react-colorful__last-control {
+        border-radius: 2px;
+        height: 10px;
+      }
+    }
+
+    .hex-color-box {
+      display: flex;
+      align-items: center;
+      margin-top: 15px;
+
+      .color-box-tit {
+        font-size: 12px;
+        color: #fff;
+        font-weight: 500;
+        margin-right: 10px;
+      }
+
+      .color-hex-input {
+        width: 150px;
+        margin-right: 5px;
+
+        input {
+          width: 100%;
+        }
+      }
+
+      .color-box {
+        display: block;
+        width: 30px;
+        height: 30px;
+        border-radius: 4px;
+      }
+    }
+
+    .default-color-wrap {
+      margin-top: 25px;
+
+      .default-tit {
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+        margin-bottom: 10px;
+      }
+
+      .color-button-wrap {
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        gap: 21px;
+
+        .default-color {
+          display: block;
+          width: 100%;
+          height: 30px;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 5px;
+  margin-bottom: 15px;
+
+  .font-option-item {
+    .option-item-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.font-ex-wrap {
+  margin-bottom: 15px;
+
+  .font-ex-tit {
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
+    margin-bottom: 10px;
+  }
+
+  .font-ex-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 80px;
+    background-color: #fff;
+  }
+
+}
+
+// 치수선 설정
+.font-btn-wrap {
+  margin-bottom: 15px;
+
+  button {
+    width: 100%;
+    height: 30px;
+    line-height: 28px;
+  }
+}
+
+.line-color-wrap {
+  margin-bottom: 15px;
+
+  .color-btn {
+    display: block;
+    width: 100%;
+    height: 30px;
+    border-radius: 2px;
+  }
+}
+
+.form-box {
+  width: 100%;
+  background-color: #fff;
+  padding: 10px 15px 20px;
+
+  .line-form {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    min-width: 102px;
+    min-height: 40px;
+    margin: 0 auto;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0px;
+      left: 0;
+      width: 100%;
+      height: 40px;
+      border-left: 1px dashed #101010;
+      border-right: 1px dashed #101010;
+    }
+
+    .line-font-box {
+      .font {
+        display: block;
+        padding-bottom: 15px;
+        color: #101010;
+        text-align: center;
+        line-height: 1;
+      }
+
+      .line {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 1px;
+        border-radius: 30px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%) rotate(45deg);
+          left: 1px;
+          width: 9px;
+          height: +9px;
+          border: 1px solid;
+          border-color: inherit;
+          border-top: none;
+          border-right: none;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%) rotate(45deg);
+          right: 1px;
+          width: 9px;
+          height: 9px;
+          border: 1px solid;
+          border-color: inherit;
+          border-bottom: none;
+          border-left: none;
+        }
+      }
+    }
+  }
+}
+
+// 사이즈 변경
+.size-inner-warp {
+  position: relative;
+}
+
+.size-check-wrap {
+  position: relative;
+  display: block;
+  width: 132px;
+  height: 132px;
+  margin: 0 auto;
+
+  .size-btn {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+
+    &.act {
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border-radius: 50%;
+      }
+    }
+
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+
+    &:nth-child(4) {
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  .size-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    background-color: #fff;
+  }
+}
+
+.size-option-top {
+  margin-bottom: 15px;
+}
+
+.size-option-side {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.size-option-wrap {
+  width: 88px;
+  margin: 0 auto;
+
+  .size-option {
+    display: flex;
+    align-items: center;
+
+    input {
+      width: 100%;
+      flex: 1;
+    }
+
+    span {
+      flex: none;
+    }
+  }
 }
 
 //이미지 크기 설정
-.range-wrap{
-    display: flex;
-    align-items: center;
-    input{
-        flex: 1;
-        margin-right: 10px;
-    }
-    label{
-        flex: none;
-        text-align: right;
-        width: 38px;
-        font-size: 13px;
-        color: #fff;
-        font-weight: 500;
-    }
+.range-wrap {
+  display: flex;
+  align-items: center;
+
+  input {
+    flex: 1;
+    margin-right: 10px;
+  }
+
+  label {
+    flex: none;
+    text-align: right;
+    width: 38px;
+    font-size: 13px;
+    color: #fff;
+    font-weight: 500;
+  }
 }
\ No newline at end of file