From be866218fae9ab5801850dc64904de812ba57a68 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Fri, 18 Oct 2024 08:51:23 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=ED=98=84=ED=99=A9=20react-se?=
 =?UTF-8?q?lect=20=EC=9A=A9=20=ED=8D=BC=EB=B8=94=20scss=20=EB=A8=B8?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/management/StuffDetail.jsx     |   10 +-
 .../management/StuffSearchCondition.jsx       |   29 +-
 .../management/popup/PlanRequestPop.jsx       |    6 +-
 src/styles/_modal.scss                        | 3154 ++++++++++-------
 src/styles/_reset.scss                        | 1638 +++++----
 5 files changed, 2764 insertions(+), 2073 deletions(-)

diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 7167fc63..75cadeae 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -536,8 +536,11 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div style={{ width: '567px', marginRight: '5px' }}>
+                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                           <Select
+                            className="react-select-custom"
+                            classNamePrefix="custom"
+                            placeholder="Select"
                             options={saleStoreList}
                             onChange={onSelectionChange}
                             getOptionLabel={(x) => x.saleStoreName}
@@ -562,8 +565,11 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div style={{ width: '567px', marginRight: '5px' }}>
+                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                           <Select
+                            className="react-select-custom"
+                            classNamePrefix="custom"
+                            placeholder="Select"
                             ref={ref}
                             options={otherSaleStoreList}
                             onChange={onSelectionChange2}
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
index 7401863c..e3375258 100644
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/src/components/management/StuffSearchCondition.jsx
@@ -257,18 +257,23 @@ export default function StuffSearchCondition() {
                 </td>
                 <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
                 <td>
-                  {schSelSaleStoreList?.length > 0 && (
-                    <Select
-                      ref={ref}
-                      options={schSelSaleStoreList}
-                      onChange={onSelectionChange}
-                      getOptionLabel={(x) => x.saleStoreName}
-                      getOptionValue={(x) => x.saleStoreId}
-                      defaultValue={stuffSearch?.selObject?.value ? stuffSearch?.selObject : null}
-                      isDisabled={sessionState?.storeLvl === '1' ? false : true}
-                      isClearable={true}
-                    />
-                  )}
+                  <div className="select-wrap">
+                    {schSelSaleStoreList?.length > 0 && (
+                      <Select
+                        className="react-select-custom"
+                        classNamePrefix="custom"
+                        placeholder="Select"
+                        ref={ref}
+                        options={schSelSaleStoreList}
+                        onChange={onSelectionChange}
+                        getOptionLabel={(x) => x.saleStoreName}
+                        getOptionValue={(x) => x.saleStoreId}
+                        defaultValue={stuffSearch?.selObject?.value ? stuffSearch?.selObject : null}
+                        isDisabled={sessionState?.storeLvl === '1' ? false : true}
+                        isClearable={true}
+                      />
+                    )}
+                  </div>
                 </td>
               </tr>
               <tr>
diff --git a/src/components/management/popup/PlanRequestPop.jsx b/src/components/management/popup/PlanRequestPop.jsx
index dbd979eb..5a6fb9d8 100644
--- a/src/components/management/popup/PlanRequestPop.jsx
+++ b/src/components/management/popup/PlanRequestPop.jsx
@@ -339,13 +339,15 @@ export default function PlanRequestPop(props) {
                         </td>
                         <th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
                         <td>
-                          <div className="">
+                          <div className="select-wrap">
                             <Select
+                              className="react-select-custom"
+                              classNamePrefix="custom"
                               ref={ref}
                               options={tempList}
                               onChange={onSelectionChange}
                               isSearchable={false}
-                              placeholder="선택하세요."
+                              placeholder="Select"
                               isClearable={true}
                             />
                           </div>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 9bd59e3d..b82d434c 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,1514 +4,1974 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop{
-    from{opacity: 0; scale: 0.95;}
-    to{opacity: 1; scale: 1;}
+@keyframes mountpop {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
-@keyframes unmountpop{
-    from{opacity: 1; scale: 1;}
-    to{opacity: 0; scale: 0.95;}
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
 
-.normal-font{
-    font-size: 12px;
-    font-weight: 400;
-    color: #fff;
+.normal-font {
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
 }
-.bold-font{
-    font-size: 12px;
-    font-weight: 500;
-    color: #fff;
+.bold-font {
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
 }
 
-.modal-pop-wrap{
-    position: fixed;
-    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;
-    &.xxxm{
-        width: 240px;
+.modal-pop-wrap {
+  position: fixed;
+  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;
+  }
+  &.lrr {
+    width: 480px;
+  }
+  &.ml {
+    width: 530px;
+  }
+  &.l-2 {
+    width: 640px;
+  }
+  &.lx-2 {
+    width: 740px;
+  }
+  &.lx {
+    width: 770px;
+  }
+  &.l {
+    width: 800px;
+  }
+  &.mount {
+    animation: mountpop 0.17s ease-in-out forwards;
+  }
+  &.unmount {
+    animation: unmountpop 0.17s ease-in-out forwards;
+  }
+  &.alert {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: transparent;
+    border: none;
+    .modal-head {
+      background-color: transparent;
+      padding: 0 0 8px;
+      .modal-close {
+        width: 20px;
+        height: 20px;
+        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
+      }
     }
-    &.xxm{
-        width: 270px;
-    }
-    &.xm{
-        width: 300px;
-    }
-    &.ssm{
-        width: 380px;
-    }
-    &.sm{
-        width: 580px;
-    }
-    &.r{
-        width: 400px;
-    }
-    &.lr{
-        width: 440px;
-    }
-    &.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;
-            }
-        }
-    }
-}
-.modal-head{
-    display: flex;
-    align-items: center;
-    padding: 10px 24px;
-    background-color: #000;
-    // overflow: hidden;
-    h1.title{
+    .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 0.15s ease-in-out;
+  opacity: 0.6;
+  &.down {
+    transform: rotate(180deg);
+  }
+  &.left {
+    transform: rotate(-90deg);
+  }
+  &.right {
+    transform: rotate(90deg);
+  }
+  &:hover,
+  &.act {
+    opacity: 1;
+  }
 }
 
 // grid-move
-.move-form{
-    p{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-    }
+.move-form {
+  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: 10px;
 }
 
 // 배치면 초기 설정
-.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;
-            }
-            &: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;
-                }
-            }
-        }
-    }
-}
-
-.pop-form-radio{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-.placement-option{
-    display: flex;
-    align-items: center;
-    gap: 20px;
-}
-.select-wrap{
-    div{
-        width: 100%;
-    }
-}
-.flex-ment{
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    span{
+.placement-table {
+  table {
+    table-layout: fixed;
+    tr {
+      th {
+        display: flex;
+        align-items: center;
         font-size: $pop-normal-size;
         color: $pop-color;
-        font-weight: $pop-normal-weight;
+        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;
+      }
+      &: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;
+        }
+      }
+    }
+  }
+}
+
+.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;
+  }
 }
 
 // 외벽선 그리기
-.outline-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
-    
-    .outline-inner{
-        display: flex;
-        align-items: center;
-        margin-bottom: 14px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-        .outline-form{
-            // width: 50%;
-            margin-right: 15px;
-        }
-    }
-    &:last-child{
-        border-bottom: 1px solid #424242;
-    }
-}
-.outline-form{
+.outline-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+
+  .outline-inner {
     display: flex;
     align-items: center;
-    
-    span{
-        width: 60px;
-        flex: none;
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-right: 10px;
-        &.thin{
-            width: auto;
-            font-weight: $pop-normal-weight;
-            margin-right: 0;
-        }
+    margin-bottom: 14px;
+    &:last-child {
+      margin-bottom: 0;
     }
+    .outline-form {
+      // width: 50%;
+      margin-right: 15px;
+    }
+  }
+  &:last-child {
+    border-bottom: 1px solid #424242;
+  }
+}
+.outline-form {
+  display: flex;
+  align-items: center;
 
-    .reset-btn{
-        flex: none;
-        width: 30px;
-        height: 30px;
-        background: transparent;
-        border: 1px solid #484848;
-        border-radius: 2px;
-        margin-left: 5px;
-        background-image: url(../../public/static/images/canvas/reset_ico.svg);
-        background-repeat: no-repeat;
-        background-size: 12px 12px;
-        background-position: center;
-    }
-    &:last-child{
-        margin-right: 0;
+  span {
+    width: 60px;
+    flex: none;
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-right: 10px;
+    &.thin {
+      width: auto;
+      font-weight: $pop-normal-weight;
+      margin-right: 0;
     }
+  }
+
+  .reset-btn {
+    flex: none;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    margin-left: 5px;
+    background-image: url(../../public/static/images/canvas/reset_ico.svg);
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    background-position: center;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
 }
 
-.cul-wrap{
+.cul-wrap {
+  display: flex;
+  .outline-box {
+    width: 50%;
+    margin-right: 15px;
+    .outline-form {
+      width: 100%;
+      margin-bottom: 14px;
+      margin-right: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .cul-box {
     display: flex;
-    .outline-box{
-        width: 50%;
-        margin-right: 15px;
-        .outline-form{
-            width: 100%;
-            margin-bottom: 14px;
-            margin-right: 0;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .cul-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50%;
-        background-color: #3D3D3D;
-        border-radius: 2px ;
-    }
+    align-items: center;
+    justify-content: center;
+    width: 50%;
+    background-color: #3d3d3d;
+    border-radius: 2px;
+  }
 }
 
 // 외벽선 속성 설정
-.properties-guide{
-    font-size: $pop-normal-size;
-    color: #AAA;
-    font-weight: $pop-normal-weight;
-    margin-bottom: 14px;
+.properties-guide {
+  font-size: $pop-normal-size;
+  color: #aaa;
+  font-weight: $pop-normal-weight;
+  margin-bottom: 14px;
 }
 
-.setting-tit{
-    font-size: 13px;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-    margin-bottom: 10px;
+.setting-tit {
+  font-size: 13px;
+  color: $pop-color;
+  font-weight: $pop-bold-weight;
+  margin-bottom: 10px;
 }
-.properties-setting-wrap{
-    &.outer{
-        margin-top: 24px;
-    }
-    .setting-btn-wrap{
-        display: flex;
-        align-items: center;
-        padding: 14px 0;
-        border-top: 1px solid #424242;
-        border-bottom: 1px solid #424242;
-        .setting-btn{
-            display: block;
-            width: 100%;
-            height: 40px;
-            font-size: 13px;
-            color: #fff;
-            font-weight: 700;
-            border-radius: 2px;
-            transition: all .15s ease-in-out;
-            &.green{
-                background-color: #305941;
-                border: 1px solid #45CD7D;
-                &:hover{
-                    background-color: #3a6b4e;
-                }
-            }
-            &.blue{
-                background-color: #2E5360;
-                border: 1px solid #3FBAE6;
-                &:hover{
-                    background-color: #365f6e;
-                }
-            }
-        }
-    }
-}
-
-// 지붕형상 설정
-.roof-shape-menu{
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 24px 10px;
-    margin-bottom: 24px;
-    .shape-box{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        padding: 13px;
-        background-color: #3D3D3D;
-        transition: background .15s ease-in-out;
-        img{
-            max-width: 100%;
-        }
-    }
-    .shape-title{
-        font-size: $pop-normal-size;
-        font-weight: $pop-bold-weight;
-        color: $pop-color;
-        margin-top: 10px;
-        text-align: center;
-        transition: color .15s ease-in-out;
-    }
-    .shape-menu-box{
-        &.act,
-        &:hover{
-            .shape-box{background-color: #008BFF;}
-            .shape-title{color: #008BFF;}
-        }
-    }
-}
-
-.setting-box{
+.properties-setting-wrap {
+  &.outer {
+    margin-top: 24px;
+  }
+  .setting-btn-wrap {
+    display: flex;
+    align-items: center;
     padding: 14px 0;
     border-top: 1px solid #424242;
     border-bottom: 1px solid #424242;
-}
-.padding-form{
-    padding-left: 23px;
-}
-.discrimination-box{
-    padding: 16px 12px;
-    border: 1px solid #3D3D3D;
-    border-radius: 2px;
+    .setting-btn {
+      display: block;
+      width: 100%;
+      height: 40px;
+      font-size: 13px;
+      color: #fff;
+      font-weight: 700;
+      border-radius: 2px;
+      transition: all 0.15s ease-in-out;
+      &.green {
+        background-color: #305941;
+        border: 1px solid #45cd7d;
+        &:hover {
+          background-color: #3a6b4e;
+        }
+      }
+      &.blue {
+        background-color: #2e5360;
+        border: 1px solid #3fbae6;
+        &:hover {
+          background-color: #365f6e;
+        }
+      }
+    }
+  }
 }
 
-.modal-bottom-border-bx{
-    margin-top: 24px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
+// 지붕형상 설정
+.roof-shape-menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 24px 10px;
+  margin-bottom: 24px;
+  .shape-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 13px;
+    background-color: #3d3d3d;
+    transition: background 0.15s ease-in-out;
+    img {
+      max-width: 100%;
+    }
+  }
+  .shape-title {
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-top: 10px;
+    text-align: center;
+    transition: color 0.15s ease-in-out;
+  }
+  .shape-menu-box {
+    &.act,
+    &:hover {
+      .shape-box {
+        background-color: #008bff;
+      }
+      .shape-title {
+        color: #008bff;
+      }
+    }
+  }
+}
+
+.setting-box {
+  padding: 14px 0;
+  border-top: 1px solid #424242;
+  border-bottom: 1px solid #424242;
+}
+.padding-form {
+  padding-left: 23px;
+}
+.discrimination-box {
+  padding: 16px 12px;
+  border: 1px solid #3d3d3d;
+  border-radius: 2px;
+}
+
+.modal-bottom-border-bx {
+  margin-top: 24px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
 }
 
 // 처마∙케라바 변경
-.eaves-keraba-table{
-    display: table;
-    border-collapse: collapse;
-    .eaves-keraba-item{
-        display: table-row;
-        .eaves-keraba-th,
-        .eaves-keraba-td{
-            font-size: $pop-normal-size;
-            color: $pop-color;
-            font-weight: $pop-normal-weight;
-            display: table-cell;
-            vertical-align: middle;
-            padding-bottom: 14px;
-        }
-        .eaves-keraba-td{
-            padding-left: 10px;
-        }
-        .eaves-keraba-ico{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 5px;
-            background-color: #3D3D3D;
-            border: 1px solid #3D3D3D;
-            border-radius: 2px;
-            cursor: pointer;
-            &.act{
-                border: 1px solid #ED0004;
-            }
-        }
-        &:last-child{
-            .eaves-keraba-th,
-            .eaves-keraba-td{
-                padding-bottom: 0;
-            }
-        }
+.eaves-keraba-table {
+  display: table;
+  border-collapse: collapse;
+  .eaves-keraba-item {
+    display: table-row;
+    .eaves-keraba-th,
+    .eaves-keraba-td {
+      font-size: $pop-normal-size;
+      color: $pop-color;
+      font-weight: $pop-normal-weight;
+      display: table-cell;
+      vertical-align: middle;
+      padding-bottom: 14px;
     }
+    .eaves-keraba-td {
+      padding-left: 10px;
+    }
+    .eaves-keraba-ico {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 5px;
+      background-color: #3d3d3d;
+      border: 1px solid #3d3d3d;
+      border-radius: 2px;
+      cursor: pointer;
+      &.act {
+        border: 1px solid #ed0004;
+      }
+    }
+    &:last-child {
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 0;
+      }
+    }
+  }
 }
-.guide{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: $pop-color;
-    margin-bottom: 24px;
-    &.sm{
-        margin-bottom: 15px;
-    }
-    span{
-        display: block;
-    }
+.guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-bottom: 24px;
+  &.sm {
+    margin-bottom: 15px;
+  }
+  span {
+    display: block;
+  }
 }
 
 // 지붕면 할당
-.allocation-select-wrap{
+.allocation-select-wrap {
+  display: flex;
+  align-items: center;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
+  margin-bottom: 14px;
+  span {
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-right: 10px;
+  }
+  .allocation-edit {
     display: flex;
     align-items: center;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
-    margin-bottom: 14px;
-    span{
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-        margin-right: 10px;
-    }
-    .allocation-edit{
-        display: flex;
-        align-items: center;
-        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;
-    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-shape-menu{
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: repeat(3, 90px);
-    gap: 10px;
-    margin-bottom: 10px;
-    .shape-menu-box{
-        border-radius: 2px;
-        background-color: #3D3D3D;
-        padding: 8px;
-        transition: all .15s ease-in-out;
-        .shape-box{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            background-color: #313131;
-            border-radius: 2px;
-        }
-        &.act,
-        &:hover{
-            background-color: #008BFF;
-        }
-    }
-}
-
-.shape-library{
+.icon-btn-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  button {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 5px;
-    padding: 5px;
-    background-color: #3D3D3D;
-    margin-bottom: 24px;
-    .library-btn{
-        width: 30px;
-        height: 30px;
-        border: 1px solid #6C6C6C;
-        border-radius: 2px;
-        background-color: transparent;
-        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: 14px 14px;}
-        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;}
-        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;}
-        &:hover{
-            border-color: #1083E3;
-            background-color: #1083E3;
-        }
-    }
-}
-
-.plane-shape-wrapper{
-    display: flex;
-    gap: 10px;
-    .plane-box{
-        padding: 10px;
-        border-radius: 2px;
-        background-color: #3D3D3D;
-        .plane-box-tit{
-            font-size: $pop-normal-size;
-            font-weight: 600;
-            color: $pop-color;
-            margin-bottom: 10px;
-        }
-        &.shape-box{
-            flex: 1;
-            .shape-box-inner{
-                display: flex;
-                gap:10px;
-                min-height: 140px;
-                .shape-img{
-                    position: relative;
-                    flex: 1;
-                    background-color: #fff;
-                    border-radius: 2px;
-                    img{
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                    }
-                }
-                .shape-data{
-                    flex: none;
-                    width: 190px;
-                    background-color: #313131;
-                    border-radius: 2px;
-                    padding: 15px;
-                    .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{
-            display: flex;
-            flex-direction: column;
-            flex: none;
-            width: 180px;
-            .plane-direction-box{
-                flex: 1;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                padding: 10px 5px;
-            }
-        }
-    }
-}
-.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: 24px;
-    padding-bottom: 14px;
-    border-bottom: 1px solid #424242;
+    border: 1px solid #646464;
+    border-radius: 2px;
+    padding: 0 10px;
+    transition: all 0.15s ease-in-out;
+    i {
+      height: 15px;
+      display: block;
+      margin-left: 10px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      transition: all 0.15s ease-in-out;
+      &.allocation01 {
+        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+        width: 15px;
+      }
+      &.allocation02 {
+        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+        width: 18px;
+      }
+    }
+    &.act,
+    &:hover {
+      color: #101010;
+      border: 1px solid #101010;
+      background-color: #fff;
+      i {
+        &.allocation01 {
+          background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+        }
+        &.allocation02 {
+          background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+        }
+      }
+    }
+  }
 }
 
-// 오브젝트 배치
-.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-shape-menu {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(3, 90px);
+  gap: 10px;
+  margin-bottom: 10px;
+  .shape-menu-box {
+    border-radius: 2px;
+    background-color: #3d3d3d;
+    padding: 8px;
+    transition: all 0.15s ease-in-out;
+    .shape-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background-color: #313131;
+      border-radius: 2px;
+    }
+    &.act,
+    &:hover {
+      background-color: #008bff;
+    }
+  }
 }
 
-.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{
+.shape-library {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 5px;
+  background-color: #3d3d3d;
+  margin-bottom: 24px;
+  .library-btn {
+    width: 30px;
+    height: 30px;
+    border: 1px solid #6c6c6c;
+    border-radius: 2px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: all 0.15s ease-in-out;
+    &.ico01 {
+      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
+      background-size: 14px 14px;
+    }
+    &.ico02 {
+      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
+      background-size: 13px 17px;
+    }
+    &.ico03 {
+      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
+      background-size: 17px 13px;
+    }
+    &:hover {
+      border-color: #1083e3;
+      background-color: #1083e3;
+    }
+  }
+}
+
+.plane-shape-wrapper {
+  display: flex;
+  gap: 10px;
+  .plane-box {
+    padding: 10px;
+    border-radius: 2px;
+    background-color: #3d3d3d;
+    .plane-box-tit {
+      font-size: $pop-normal-size;
+      font-weight: 600;
+      color: $pop-color;
+      margin-bottom: 10px;
+    }
+    &.shape-box {
+      flex: 1;
+      .shape-box-inner {
+        display: flex;
+        gap: 10px;
+        min-height: 140px;
+        .shape-img {
+          position: relative;
+          flex: 1;
+          background-color: #fff;
+          border-radius: 2px;
+          img {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+          }
         }
+        .shape-data {
+          flex: none;
+          width: 190px;
+          background-color: #313131;
+          border-radius: 2px;
+          padding: 15px;
+          .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 {
+      display: flex;
+      flex-direction: column;
+      flex: none;
+      width: 180px;
+      .plane-direction-box {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 10px 5px;
+      }
+    }
+  }
+}
+.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 0.15s ease-in-out;
+    &.up {
+      top: 22px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &.right {
+      top: 50%;
+      right: 32px;
+      transform: translateY(-50%) rotate(90deg);
+    }
+    &.down {
+      bottom: 22px;
+      left: 50%;
+      transform: translateX(-50%) rotate(180deg);
+    }
+    &.left {
+      top: 50%;
+      left: 32px;
+      transform: translateY(-50%) rotate(270deg);
+    }
+    &:hover,
+    &.act {
+      background-color: #fff;
+      background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+    }
+  }
+}
+
+.plane-tab-guide {
+  font-size: $pop-normal-size;
+  font-weight: $pop-normal-weight;
+  color: $pop-color;
+  margin-top: 24px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #424242;
+}
+
+// 오브젝트 배치
+.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%);
+    }
+  }
 }
 
 // 표시변경
-.display-change-wrap{
-    margin: 24px 0;
+.display-change-wrap {
+  margin: 24px 0;
 }
-.warning{
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: #FFAFAF;
+.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;
+.radio-grid-wrap {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px 15px;
 }
 
 // 면 흐름 설정
-.drawing-flow-wrap{
+.drawing-flow-wrap {
+  display: flex;
+  gap: 10px;
+  .discrimination-box {
+    flex: 1;
     display: flex;
-    gap: 10px;
-    .discrimination-box{
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        .object-direction-wrap{
-            flex: 1;
-        }
+    flex-direction: column;
+    .object-direction-wrap {
+      flex: 1;
     }
+  }
 }
 
-.compas-box{
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.compas-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .compas-box-inner {
-    position: relative;
-    width: 200px;
-    height: 200px;
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+
+  .circle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border: 1px solid #fff;
     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;
-            }
-        }
+    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;
     }
-    .compas{
+    &: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: 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;
-        }
+        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;
-                }
-            }
-            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{
+.roof-module-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  .module-tab-bx {
     flex: 1;
-    background-color: #3D3D3D;
+    height: 34px;
+    line-height: 31px;
+    border: 1px solid #484848;
     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;
-        }
+    background-color: transparent;
+    font-size: 12px;
+    color: #aaa;
+    text-align: center;
+    cursor: default;
+    transition: all 0.15s ease-in-out;
+    &.act {
+      background-color: #1083e3;
+      border: 1px solid #1083e3;
+      color: #fff;
+      font-weight: 500;
     }
-    .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;
-            }
-        }
+  }
+  .tab-arr {
+    display: block;
+    width: 9px;
+    height: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+    transition: all 0.15s ease-in-out;
+    &.act {
+      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
     }
+  }
 }
 
-.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;
+.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;
         }
-        .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;
+      }
+      i {
+        top: 32px;
+      }
+      &.act {
+        i {
+          color: #8b8b8b;
         }
+      }
     }
+  }
+}
+.center-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 }
 
-.self-table-flx{
-    display: flex;
-    align-items: center;
-    margin-top: 15px;
-    button{
+.module-table-flex-wrap {
+  display: flex;
+  gap: 10px;
+  .outline-form {
+    flex: 1;
+  }
+}
+
+.module-box-tab {
+  display: flex;
+  .module-btn {
+    flex: 1;
+    border-top: 1px solid #505050;
+    border-bottom: 1px solid #505050;
+    border-right: 1px solid #505050;
+    background-color: #454545;
+    color: #fff;
+    height: 30px;
+    font-size: 12px;
+    font-weight: 400;
+    transition: all 0.15s ease-in-out;
+    &:first-child {
+      border-left: 1px solid #505050;
+    }
+    &.act {
+      border-color: #fff;
+      background-color: #fff;
+      color: #101010;
+    }
+  }
+}
+
+.module-table-box {
+  flex: 1;
+  background-color: #3d3d3d;
+  border-radius: 2px;
+  .module-table-inner {
+    padding: 10px;
+    .outline-form {
+      span {
+        width: auto;
+      }
+    }
+    .module-table-tit {
+      padding: 10px 0;
+      font-size: 12px;
+      color: #fff;
+      border-bottom: 1px solid #4d4d4d;
+    }
+    .eaves-keraba-table {
+      width: 100%;
+      margin-top: 15px;
+      .eaves-keraba-th {
+        width: 72px;
+      }
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 5px;
+      }
+    }
+    .self-table-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      padding-bottom: 15px;
+    }
+  }
+  .warning-guide {
+    padding: 20px;
+    .warning {
+      color: #ffcaca;
+      max-height: 55px;
+      overflow-y: auto;
+      padding-right: 30px;
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #d9d9d9;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.module-self-table {
+  display: table;
+  border-top: 1px solid #4d4d4d;
+  border-collapse: collapse;
+  width: 100%;
+  .self-table-item {
+    display: table-row;
+    .self-item-td,
+    .self-item-th {
+      display: table-cell;
+      vertical-align: middle;
+      border-bottom: 1px solid #4d4d4d;
+    }
+    .self-item-th {
+      width: 60px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+    }
+    .self-item-td {
+      font-size: 12px;
+      font-weight: 400;
+      color: #fff;
+      padding: 15px 20px;
+    }
+  }
+}
+
+.self-table-flx {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+  button {
+    margin-left: auto;
+  }
+}
+.hexagonal-wrap {
+  .hexagonal-item {
+    padding: 15px 0;
+    border-bottom: 1px solid #4d4d4d;
+    &:first-child {
+      padding-top: 0;
+    }
+    &:last-child {
+      padding-bottom: 0;
+      border: none;
+    }
+    .hexagonal-flx-auto {
+      display: flex;
+      justify-content: space-between;
+    }
+    .hexagonal-flx {
+      display: flex;
+      align-items: center;
+      button {
         margin-left: auto;
+      }
     }
-}
-.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;
+.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;
-    }
+.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-right-wrap {
+  display: flex;
+  justify-content: flex-end;
 }
 
-.circuit-data-form{
+.circuit-data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  span {
+    display: inline-flex;
+    align-items: center;
+    .del {
+      display: block;
+      margin-left: 10px;
+      width: 15px;
+      height: 15px;
+      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+.circuit-table-tit {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 11px 10px;
+  background-color: #474747;
+  border: 1px solid #505050;
+  border-bottom: none;
+}
+
+.circuit-overflow {
+  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;
-    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;
-        }
+    .bottom-wrap {
+      margin-top: auto;
     }
-}
-.circuit-table-tit{
-    color: #fff;
-    font-size: 12px;
-    font-weight: 600;
-    padding: 11px 10px;
-    background-color: #474747;
-    border: 1px solid #505050;
-    border-bottom: none;
+    .roof-module-table {
+      table {
+        table-layout: fixed;
+      }
+    }
+  }
 }
 
-.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;
+.circuit-count-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 // 모듈부가기능
-.additional-radio-wrap{
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px 0;
-    margin-bottom: 24px;
+.additional-radio-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 0;
+  margin-bottom: 24px;
 }
-.additional-wrap{
-    padding: 24px 0;
-    border-top: 1px solid #424242;
+.additional-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
 }
 
-.additional-color-wrap{
+.additional-color-wrap {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  gap: 15px;
+  .additional-color-box {
     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 #EA10AC;
-                background-color: #16417D;
-            }
-            &.white{
-                border: 2px solid #FFF;
-                background-color: #001027;
-            }
-        }
+    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;
+      }
     }
-}
\ No newline at end of file
+  }
+}
+
+// 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%;
+    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 0 20px;
+  .line-form {
+    position: relative;
+    width: 102px;
+    height: 40px;
+    margin: 0 auto;
+    border-left: 1px dashed #101010;
+    border-right: 1px dashed #101010;
+    .line-font-box {
+      position: absolute;
+      bottom: -3px;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      .font {
+        display: block;
+        padding-bottom: 6px;
+        color: #101010;
+      }
+      .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;
+    }
+  }
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index d345f643..47cb3efa 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,807 +1,1025 @@
 * {
-    -webkit-text-size-adjust:none;
-    -moz-text-size-adjust:none;
-    -ms-text-size-adjust:none;
-    text-size-adjust: none;
-    box-sizing: content-box
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+  box-sizing: content-box;
 }
-*, ::after, ::before {
-    box-sizing: border-box;
+*,
+::after,
+::before {
+  box-sizing: border-box;
 }
-html, body{
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
 }
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font: inherit;
-	vertical-align: baseline;
-    font-family: 'Noto Sans JP', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smooth: never;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+  font-family: 'Noto Sans JP', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-smooth: never;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1.4;
+  line-height: 1.4;
+}
+body:first-of-type caption {
+  display: none;
 }
-body:first-of-type caption { display:none;}
 
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
 }
 table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing:0;
-    border:0 none;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 0 none;
 }
-caption, th, td {
-    text-align:left;
-    font-weight: normal;
-    border:0;
+caption,
+th,
+td {
+  text-align: left;
+  font-weight: normal;
+  border: 0;
 }
 
-a { 
-    cursor:pointer;
-    color:#000;
+a {
+  cursor: pointer;
+  color: #000;
 }
-a, a:hover, a:active {
-    text-decoration:none;
-    -webkit-tap-highlight-color: transparent;
+a,
+a:hover,
+a:active {
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
 }
 /*form_style*/
-input, select, textarea, button, a, label {
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
+input,
+select,
+textarea,
+button,
+a,
+label {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-button,input[type=text], input[type=button] {
-    -webkit-appearance: none;
-    -webkit-border-radius: 0;
-    -webkit-appearance:none;
-    appearance: none;
-    border-radius: 0
+button,
+input[type='text'],
+input[type='button'] {
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0;
 }
-input[type=checkbox], input[type=radio] {
-    box-sizing: border-box;
-    padding: 0;
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
 }
-input, select, button {
-    border:0 none;
-    outline:none;
-    margin:0;
+input,
+select,
+button {
+  border: 0 none;
+  outline: none;
+  margin: 0;
 }
 select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 select::-ms-expand {
-    display: none;
+  display: none;
 }
 ::-webkit-input-placeholder {
-    line-height:1;
-    font-weight:300;
-    font-size:0.938rem;
-    letter-spacing:-0.6px;
-    color:#8b8b8b;
+  line-height: 1;
+  font-weight: 300;
+  font-size: 0.938rem;
+  letter-spacing: -0.6px;
+  color: #8b8b8b;
 }
-.log-box ::-webkit-input-placeholder{
-    color:#8b8b8b;
+.log-box ::-webkit-input-placeholder {
+  color: #8b8b8b;
 }
-button{
-    background: transparent;
-    font-family: 'Noto Sans JP', sans-serif;
-    border: none;
-    padding: 0;
-    margin: 0;
-    line-height: 1.4;
-    color: inherit;
-    outline: none;
-    cursor: pointer;
+button {
+  background: transparent;
+  font-family: 'Noto Sans JP', sans-serif;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1.4;
+  color: inherit;
+  outline: none;
+  cursor: pointer;
 }
-.pre{
-    font-family: 'Pretendard', sans-serif !important;
+.pre {
+  font-family: 'Pretendard', sans-serif !important;
 }
 
 // margin
-.mt5{margin-top: 5px !important;}
-.mt10{margin-top: 10px !important;}
-.mt15{margin-top: 15px !important;}
-.mb5{margin-bottom: 5px !important;}
-.mb10{margin-bottom: 10px !important;}
-.mb15{margin-bottom: 15px !important;}
-.mr5{margin-right: 5px !important;}
-.mr10{margin-right: 10px !important;}
-.mr15{margin-right: 15px !important;}
-.ml5{margin-left: 5px !important;}
-.ml10{margin-left: 10px !important;}
-.ml15{margin-left: 15px !important;}
-
-// align
-.al-l{text-align: left !important;}
-.al-r{text-align: right !important;}
-.al-c{text-align: center !important;}
-
-
-// button
-.btn-frame{
-    display: inline-block;
-    padding: 0 7px;
-    height: 34px;
-    line-height: 34px;
-    border-radius: 2px;
-    color: #fff;
-    font-size: 12px;
-    font-weight: 400;
-    border: 1px solid #000;
-    text-align: center;
-    font-family: 'Pretendard', sans-serif;
-    transition: all .17s ease-in-out;
-    cursor: pointer;
-    &.block{
-        width: 100%;
-    }
-    &.small{
-        font-family: 'Noto Sans JP', sans-serif;
-        height: 30px;
-        line-height: 30px;
-        font-size: 13px;
-    }
-
-    &.deepgray{
-        background-color: #2C2C2C;
-        border: 1px solid #484848;
-    }
-    &.gray{
-        background-color: #3C3C3C;
-        border: 1px solid #545454;
-    }
-    &.dark{
-        background-color: #1C1C1C;
-        border: 1px solid #484848;
-    }
-    &.modal{
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: #272727;
-        border: 1px solid #484848;
-        color: #aaa;
-        &:hover{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    &.sub-tab{
-        height: 30px;
-        padding: 0 10px;
-        line-height: 28px;
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: #2D2D2D;
-        border: 1px solid #393939;
-        color: #aaa;
-        &.act,
-        &:hover{
-            background-color: #414E6C;
-            border: 1px solid #414E6C;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    &.roof{
-        height: 30px;
-        padding: 0 10px;
-        line-height: 28px;
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: transparent;
-        border: 1px solid #484848;
-        color: #fff;
-        &.blue{
-            background-color: #414E6C;
-            border: 1px solid #414E6C;
-            &:hover{
-                background-color: #414E6C;
-                border: 1px solid #414E6C;
-            }
-        }
-        &.white{
-            background-color: #fff;
-            border: 1px solid #fff;
-            color: #101010;
-            &:hover{
-                background-color: #fff;
-                border: 1px solid #fff;
-                color: #101010;
-            }
-        }
-        &:hover{
-            font-weight: 400;
-            background-color: transparent;
-            border: 1px solid #484848;
-            color: #fff;
-        }
-    }
-    &.self{
-        height: 30px;
-        padding: 0 10px;
-        line-height: 28px;
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: transparent;
-        border: 1px solid #676767;
-        color: #AAAAAA;
-        &:hover{
-            background-color: #272727;
-            border-color: #676767;
-            font-weight: 400;
-        }
-    }
-    &:hover,
-    &.act{
-        background-color: #1083E3;
-        border: 1px solid #1083E3;
-        color: #fff;
-        font-weight: 500;
-    }
-    &.block{
-        display: block;
-        width: 100%;
-    }
-    &.ico-flx{
-        display: flex;
-        align-items: center;
-        .ico{
-            margin-right: 10px;
-        }
-        &:hover,
-        &.act{
-            font-weight: 400;
-        }
-    }    
+.mt5 {
+  margin-top: 5px !important;
+}
+.mt10 {
+  margin-top: 10px !important;
+}
+.mt15 {
+  margin-top: 15px !important;
+}
+.mb5 {
+  margin-bottom: 5px !important;
+}
+.mb10 {
+  margin-bottom: 10px !important;
+}
+.mb15 {
+  margin-bottom: 15px !important;
+}
+.mr5 {
+  margin-right: 5px !important;
+}
+.mr10 {
+  margin-right: 10px !important;
+}
+.mr15 {
+  margin-right: 15px !important;
+}
+.ml5 {
+  margin-left: 5px !important;
+}
+.ml10 {
+  margin-left: 10px !important;
+}
+.ml15 {
+  margin-left: 15px !important;
 }
 
-.btn-origin{
-    display: inline-block;
+// align
+.al-l {
+  text-align: left !important;
+}
+.al-r {
+  text-align: right !important;
+}
+.al-c {
+  text-align: center !important;
+}
+
+// button
+.btn-frame {
+  display: inline-block;
+  padding: 0 7px;
+  height: 34px;
+  line-height: 34px;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 400;
+  border: 1px solid #000;
+  text-align: center;
+  font-family: 'Pretendard', sans-serif;
+  transition: all 0.17s ease-in-out;
+  cursor: pointer;
+  &.block {
+    width: 100%;
+  }
+  &.small {
+    font-family: 'Noto Sans JP', sans-serif;
+    height: 30px;
+    line-height: 30px;
+    font-size: 13px;
+  }
+
+  &.deepgray {
+    background-color: #2c2c2c;
+    border: 1px solid #484848;
+  }
+  &.gray {
+    background-color: #3c3c3c;
+    border: 1px solid #545454;
+  }
+  &.dark {
+    background-color: #1c1c1c;
+    border: 1px solid #484848;
+  }
+  &.modal {
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: #272727;
+    border: 1px solid #484848;
+    color: #aaa;
+    &:hover {
+      background-color: #1083e3;
+      border: 1px solid #1083e3;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+  &.sub-tab {
     height: 30px;
     padding: 0 10px;
-    border-radius: 2px;
-    background-color: #101010;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: #2d2d2d;
+    border: 1px solid #393939;
+    color: #aaa;
+    &.act,
+    &:hover {
+      background-color: #414e6c;
+      border: 1px solid #414e6c;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+  &.roof {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #484848;
     color: #fff;
-    font-size: 13px;
-    font-weight: 400;
-    transition: all .15s ease-in-out;
-    &.navy{
-        background-color: #304961;
-        &:hover{
-            background-color: #233546;
-        }
+    &.blue {
+      background-color: #414e6c;
+      border: 1px solid #414e6c;
+      &:hover {
+        background-color: #414e6c;
+        border: 1px solid #414e6c;
+      }
     }
-    &.grey{
-        background-color: #94A0AD;
-        &:hover{
-            background-color: #607F9A;
-        }
-    }
-    &.green{
-        background-color: #A6BBA8;
-        &:hover{
-            background-color: #98af9b;
-        }
-    }
-    &.white{
-        border: 1px solid #94A0AD;
+    &.white {
+      background-color: #fff;
+      border: 1px solid #fff;
+      color: #101010;
+      &:hover {
         background-color: #fff;
-        color: #94A0AD;
-        &:hover{
-            background-color: #fff;
-        }
+        border: 1px solid #fff;
+        color: #101010;
+      }
     }
+    &:hover {
+      font-weight: 400;
+      background-color: transparent;
+      border: 1px solid #484848;
+      color: #fff;
+    }
+  }
+  &.self {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #676767;
+    color: #aaaaaa;
+    &:hover {
+      background-color: #272727;
+      border-color: #676767;
+      font-weight: 400;
+    }
+  }
+  &:hover,
+  &.act {
+    background-color: #1083e3;
+    border: 1px solid #1083e3;
+    color: #fff;
+    font-weight: 500;
+  }
+  &.block {
+    display: block;
+    width: 100%;
+  }
+  &.ico-flx {
+    display: flex;
+    align-items: center;
+    .ico {
+      margin-right: 10px;
+    }
+    &:hover,
+    &.act {
+      font-weight: 400;
+    }
+  }
+}
+
+.btn-origin {
+  display: inline-block;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 2px;
+  background-color: #101010;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 400;
+  transition: all 0.15s ease-in-out;
+  &.navy {
+    background-color: #304961;
+    &:hover {
+      background-color: #233546;
+    }
+  }
+  &.grey {
+    background-color: #94a0ad;
+    &:hover {
+      background-color: #607f9a;
+    }
+  }
+  &.green {
+    background-color: #a6bba8;
+    &:hover {
+      background-color: #98af9b;
+    }
+  }
+  &.white {
+    border: 1px solid #94a0ad;
+    background-color: #fff;
+    color: #94a0ad;
+    &:hover {
+      background-color: #fff;
+    }
+  }
 }
 
 // select
-.sort-select{
-    position: relative;
-    display: inline-block;
-    min-width: 100px;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 25px 0 10px;
-    background-color: #373737;
-    border: 1px solid #3F3F3F;
-    border-radius: 2px;
-    border-top-left-radius: 2px;
+.sort-select {
+  position: relative;
+  display: inline-block;
+  min-width: 100px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 25px 0 10px;
+  background-color: #373737;
+  border: 1px solid #3f3f3f;
+  border-radius: 2px;
+  border-top-left-radius: 2px;
+  color: #fff;
+  cursor: pointer;
+  p {
+    font-size: 13px;
     color: #fff;
-    cursor: pointer;
-    p{
-        font-size: 13px;
+    height: 100%;
+  }
+  .select-item-wrap {
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    clip-path: inset(0 0 100% 0);
+    width: calc(100% + 2px);
+    padding: 8px 0;
+    max-height: 100px;
+    overflow-y: auto;
+    background-color: #373737;
+    border: 1px solid #3f3f3f;
+    border-radius: 2px;
+    transition: all 0.17s ease-in-out;
+    visibility: hidden;
+    z-index: 999;
+    .select-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 20px;
+      line-height: 1.4;
+      transition: all 0.17s ease-in-out;
+      button {
+        font-size: 12px;
         color: #fff;
-        height: 100%;
+        line-height: 1.4;
+      }
+      &:hover {
+        background-color: #2c2c2c;
+      }
     }
-    .select-item-wrap{
-        position: absolute;
-        top: 100%;
-        left: -1px;
-        clip-path:inset(0 0 100% 0);
-        width: calc(100% + 2px);
-        padding: 8px 0;
-        max-height: 100px;
-        overflow-y: auto;
-        background-color: #373737;
-        border: 1px solid #3F3F3F;
-        border-radius: 2px;
-        transition: all 0.17s ease-in-out;
-        visibility: hidden;
-        z-index: 999;
-        .select-item{
-            display: flex;
-            align-items: center;
-            padding: 8px 20px;
-            line-height: 1.4;
-            transition: all .17s ease-in-out;
-            button{
-                font-size: 12px;
-                color: #fff;
-                line-height: 1.4;
-            }
-            &:hover{
-                background-color: #2C2C2C;
-            }
-        }
-        &::-webkit-scrollbar {
-            width: 2px;
-            background-color: transparent;
-            
-        }
-        &::-webkit-scrollbar-thumb {
-            background-color: #5a5a5a;
-            border-radius: 10px;
-        }
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
-        }
+    &::-webkit-scrollbar {
+      width: 2px;
+      background-color: transparent;
     }
-    &::after{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 7px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
-        background: url(/static/images/common/select-arr.svg) no-repeat center;
-        background-size: cover;
-        transition: all .17s ease-in-out;
+    &::-webkit-scrollbar-thumb {
+      background-color: #5a5a5a;
+      border-radius: 10px;
     }
-    &.active{
-        .select-item-wrap{
-            clip-path: inset(0 0 0 0);
-            visibility: visible;
-        }
-        &:after{
-            transform: translateY(-50%) rotate(-180deg);
-        }
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
     }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 7px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(/static/images/common/select-arr.svg) no-repeat center;
+    background-size: cover;
+    transition: all 0.17s ease-in-out;
+  }
+  &.active {
+    .select-item-wrap {
+      clip-path: inset(0 0 0 0);
+      visibility: visible;
+    }
+    &:after {
+      transform: translateY(-50%) rotate(-180deg);
+    }
+  }
 }
 
-.select-light{
-    position: relative;
+.select-light {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 30px;
+  background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+  background-size: 10px 6px;
+  border: 1px solid #eee;
+  padding: 0 30px 0 10px;
+  font-size: 13px;
+  color: #45576f;
+  font-family: 'Noto Sans JP', sans-serif;
+  cursor: pointer;
+  &:disabled {
+    opacity: 1;
+    background-color: #fafafa;
+    color: #999;
+    cursor: default;
+  }
+  &.black {
+    color: #101010;
+  }
+  &.dark {
+    background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+    color: #898989;
+    font-size: 12px;
+    border-radius: 2px;
+    border: none;
+  }
+}
+
+// input
+.form-input {
+  label {
+    display: block;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+}
+input[type='password'],
+input[type='number'],
+input[type='text'] {
+  &.input-origin {
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 2px;
+    background-color: #323234;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: 'Pretendard', sans-serif;
+    padding: 0 10px;
+    letter-spacing: 0px;
+    text-align: right;
+    &::placeholder {
+      opacity: 1;
+      font-size: 12px;
+      letter-spacing: 0px;
+    }
+    &.block {
+      width: 100%;
+    }
+    &:read-only {
+      color: #aaa;
+    }
+    &.plane {
+      font-family: 'Noto Sans JP', sans-serif;
+      border: 1px solid #525252;
+      background-color: transparent;
+    }
+  }
+  &.input-light {
     display: block;
     width: 100%;
     height: 30px;
-    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
-    background-size: 10px 6px;
+    padding: 0 10px;
     border: 1px solid #eee;
-    padding: 0 30px 0 10px;
-    font-size: 13px;
-    color: #45576F;
+    border-radius: 2px;
+    background-color: #fff;
     font-family: 'Noto Sans JP', sans-serif;
-    cursor: pointer;
-    &:disabled{
-        opacity: 1;
-        background-color: #FAFAFA;
-        color: #999;
-        cursor: default;
-    }
-    &.black{
-        color: #101010;
-    }
-    &.dark{
-        background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
-        color: #898989;
-        font-size: 12px;
-        border-radius: 2px;
-        border: none;
+    font-size: 13px;
+    color: #45576f;
+    font-weight: normal;
+    transition: border-color 0.17s ease-in-out;
+    text-align: left;
+    &:read-only {
+      background-color: #fafafa;
+      color: #999999;
     }
+  }
 }
 
-
-// input
-.form-input{
-    label{
-        display: block;
-        color: #aaa;
-        font-size: 12px;
-        font-weight: 500;
-        margin-bottom: 10px;
-    }
-}
-input[type=password],
-input[type=number],
-input[type=text]{
-    &.input-origin{
-        display: inline-block;
-        height: 30px;
-        line-height: 30px;
-        border-radius: 2px;
-        background-color: #323234;
-        color: #fff;
-        font-size: 12px;
-        font-weight: 500;
-        font-family: 'Pretendard', sans-serif;
-        padding: 0 10px;
-        letter-spacing: 0px;
-        text-align: right;
-        &::placeholder{
-            opacity: 1;
-            font-size: 12px;
-            letter-spacing: 0px;
-        }
-        &.block{
-            width: 100%;
-        }
-        &:read-only{
-            color: #AAA;
-        }
-        &.plane{
-            font-family: 'Noto Sans JP', sans-serif;
-            border: 1px solid #525252;
-            background-color: transparent;
-        }
-    }
-    &.input-light{
-        display: block;
-        width: 100%;
-        height: 30px;
-        padding: 0 10px;
-        border: 1px solid #eee;
-        border-radius: 2px;
-        background-color: #fff;
-        font-family: 'Noto Sans JP', sans-serif;
-        font-size: 13px;
-        color: #45576F;
-        font-weight: normal;
-        transition: border-color .17s ease-in-out;
-        text-align: left;
-        &:read-only{
-            background-color: #FAFAFA;
-            color: #999999;
-        }
-    }
-}
-
-
-
 // check-btn
-.check-btn{
-    display: flex;
-    align-items: center;
-    height: 30px;
-    background-color: #3A3A3A;
-    border-radius: 3px;
-    transition: all .17s ease-in-out;
-    .check-area{
-        flex: none;
-        width: 30px;
-        height: 100%;
-        border-right: 1px solid #272727;
-        background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
-        background-size: 11px 9px;
+.check-btn {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  background-color: #3a3a3a;
+  border-radius: 3px;
+  transition: all 0.17s ease-in-out;
+  .check-area {
+    flex: none;
+    width: 30px;
+    height: 100%;
+    border-right: 1px solid #272727;
+    background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
+    background-size: 11px 9px;
+  }
+  .title-area {
+    padding: 0 10px;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+  }
+  &.block {
+    width: 100%;
+  }
+  &:hover,
+  &.act {
+    background-color: #fff;
+    .check-area {
+      border-right: 1px solid #101010;
+      background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
     }
-    .title-area{
-        padding: 0 10px;
-        font-size: 12px;
-        color: #898989;
-        font-weight: 400;
-    }
-    &.block{
-        width: 100%;
-    }
-    &:hover,
-    &.act{
-        background-color: #fff;
-        .check-area{
-            border-right: 1px solid #101010;
-            background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
-        }
-        .title-area{
-            color: #101010;
-            font-weight: 600;
-        }
+    .title-area {
+      color: #101010;
+      font-weight: 600;
     }
+  }
 }
 
 // arr-btn
-.arr-btn{
-    display: block;
-    height: 30px;
-    border-radius: 3px;
-    background-color: #3A3A3A;
-    padding: 0 11px;
-    text-align: left;
-    transition: all .17s ease-in-out;
-    span{
-        position: relative;
-        font-size: 12px;
-        color: #898989;
-        font-weight: 400;
-        padding-right: 15px;
-        &:after{
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-            width: 5px;
-            height: 8px;
-            background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
-        }
+.arr-btn {
+  display: block;
+  height: 30px;
+  border-radius: 3px;
+  background-color: #3a3a3a;
+  padding: 0 11px;
+  text-align: left;
+  transition: all 0.17s ease-in-out;
+  span {
+    position: relative;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+    padding-right: 15px;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 5px;
+      height: 8px;
+      background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
+    }
+  }
+  &:hover,
+  &.act {
+    background-color: #fff;
+    span {
+      color: #101010;
+      font-weight: 500;
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
+      }
+    }
+  }
+  &.dark {
+    text-align: center;
+    background-color: #272727;
+    border: 1px solid #484848;
+    span {
+      color: #fff;
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
+      }
     }
     &:hover,
-    &.act{
-        background-color: #fff;
-        span{
-            color: #101010;
-            font-weight: 500;
-            &:after{
-                background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
-            }
-        }
-    }
-    &.dark{
-        text-align: center;
-        background-color: #272727;
-        border: 1px solid #484848;
-        span{
-            color: #Fff;
-            &:after{
-                background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
-            }
-        }
-        &:hover,
-        &.act{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-        }
+    &.act {
+      background-color: #1083e3;
+      border: 1px solid #1083e3;
     }
+  }
 }
 
 // radio
 .d-check-radio,
-.d-check-box{
-    line-height: 1.1;
+.d-check-box {
+  line-height: 1.1;
+  cursor: pointer;
+  input[type='checkbox'],
+  input[type='radio'] {
+    position: static;
+    margin-left: 0;
     cursor: pointer;
-    input[type=checkbox],
-    input[type=radio]{
-        position: static;
-        margin-left: 0;
-        cursor: pointer;
-        opacity: 0;
-        z-index: 1;
-        flex: 0 0 auto;
+    opacity: 0;
+    z-index: 1;
+    flex: 0 0 auto;
+  }
+  label {
+    position: relative;
+    padding-left: 10px;
+    margin-bottom: 0;
+    word-break: break-all;
+    line-height: 1.2;
+    display: inline;
+    vertical-align: top;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 400;
+    cursor: pointer;
+  }
+  &.light {
+    label {
+      color: #45576f;
     }
-    label{
-        position: relative;
-        padding-left: 10px;
-        margin-bottom: 0;
-        word-break: break-all;
-        line-height: 1.2;
-        display: inline;
-        vertical-align: top;
-        color: #fff;
-        font-size: 13px;
-        font-weight: 400;
-        cursor: pointer;
-    }
-    &.light{
-        label{
-            color: #45576F;
-        }
-    }
-    &.no-text{
-        label{
-            padding-left: 0;
-        }
+  }
+  &.no-text {
+    label {
+      padding-left: 0;
     }
+  }
 }
 
 .d-check-radio {
-    label{
-        &::before{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 17px;
-            height: 17px;
-            top:2px;
-            left: 0;
-            margin-left: -12px;
-            border: 1px solid #999999;
-            border-radius: 100%;
-            background-color: transparent;
-            text-align:center;
-            font-size:13px;
-            line-height:1.4;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
-        &::after{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 9px;
-            height: 9px;
-            top:6px;
-            left: 4px;
-            margin-left: -12px;
-            border: none;
-            border-radius: 100%;
-            background-color: #fff;
-            text-align:center;
-            font-size:13px;
-            line-height:1.4;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
+  label {
+    &::before {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #999999;
+      border-radius: 100%;
+      background-color: transparent;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
-    &.light{
-        label{
-            &:before{
-                border-color: #D6D6D7;
-            }
-            &:after{
-                background-color: #697C8F;
-            }
-        }
+    &::after {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      top: 6px;
+      left: 4px;
+      margin-left: -12px;
+      border: none;
+      border-radius: 100%;
+      background-color: #fff;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
-    input[type=radio]:checked + label::after{
-        opacity: 1;
-        visibility: visible;
+  }
+  &.light {
+    label {
+      &:before {
+        border-color: #d6d6d7;
+      }
+      &:after {
+        background-color: #697c8f;
+      }
     }
-    &.pop{
-        label{
-            font-size: 12px;
-            &:before{
-                width: 16px;
-                height: 16px;
-                border-color: #fff;
-            }
-            &:after{
-                width: 8px;
-                height: 8px;
-                background-color: #fff;
-            }
-        }
+  }
+  input[type='radio']:checked + label::after {
+    opacity: 1;
+    visibility: visible;
+  }
+  &.pop {
+    label {
+      font-size: 12px;
+      &:before {
+        width: 16px;
+        height: 16px;
+        border-color: #fff;
+      }
+      &:after {
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+      }
     }
+  }
 }
 
 // check-box
-.d-check-box{
-    label{
-        &.red{color: #FFCACA;}
-        &::before{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 17px;
-            height: 17px;
-            top: 2px;
-            left: 0;
-            margin-left: -12px;
-            border: 1px solid #D6D6D7;
-            background-color: #fff;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
-        &:after{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 16px;
-            height: 16px;
-            top:0;
-            left: 0;
-            margin-left: -.8rem;
-            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
-        }
+.d-check-box {
+  label {
+    &.red {
+      color: #ffcaca;
     }
-    input[type=checkbox]:checked + label::after{
-        content: "";
-        display: inline-block;
-        position: absolute;
-        top: 1px;
-        left: -1px;
-        width: 5px;
-        height: 8px;
-        border: 2px solid #697C8F;
-        border-left: none;
-        border-top: none;
-        transform: translate(7.75px,4.5px) rotate(45deg);
-        -ms-transform: translate(7.75px,4.5px) rotate(45deg);
+    &::before {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #d6d6d7;
+      background-color: #fff;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
-    &.pop{
-        label{
-            &:before{
-                background-color: transparent;
-            }
-        }
-        input[type=checkbox]:checked + label::after{
-            border-color: #fff;
-        }
-        &.no-text{
-            label{
-                padding-left: 0;
-            }
-        }
+    &:after {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      top: 0;
+      left: 0;
+      margin-left: -0.8rem;
+      transition:
+        border 0.05s ease-in-out,
+        color 0.05s ease-in-out;
     }
-    &.sel{
-        input[type=checkbox]:checked + label{
-            color: #D7C863;
-        }
-        input[type=checkbox]:checked + label::before,
-        input[type=checkbox]:checked + label::after{
-            border-color: #D7C863;
-        }
+  }
+  input[type='checkbox']:checked + label::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 1px;
+    left: -1px;
+    width: 5px;
+    height: 8px;
+    border: 2px solid #697c8f;
+    border-left: none;
+    border-top: none;
+    transform: translate(7.75px, 4.5px) rotate(45deg);
+    -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
+  }
+  &.pop {
+    label {
+      &:before {
+        background-color: transparent;
+      }
     }
+    input[type='checkbox']:checked + label::after {
+      border-color: #fff;
+    }
+    &.no-text {
+      label {
+        padding-left: 0;
+      }
+    }
+  }
+  &.sel {
+    input[type='checkbox']:checked + label {
+      color: #d7c863;
+    }
+    input[type='checkbox']:checked + label::before,
+    input[type='checkbox']:checked + label::after {
+      border-color: #d7c863;
+    }
+  }
 }
 
 // date-picker
-.date-picker{
-    svg{display: none;}
-    .react-datepicker-wrapper{
-        width: 100%;
+.date-picker {
+  svg {
+    display: none;
+  }
+  .react-datepicker-wrapper {
+    width: 100%;
+  }
+  input[type='text'] {
+    display: block;
+    width: 100%;
+    height: 30px;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    border: 1px solid #eee;
+    font-size: 13px;
+    color: #45576f;
+    font-weight: normal;
+    font-family: 'Noto Sans JP', sans-serif;
+    background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+    background-size: 14px 15px;
+    cursor: pointer;
+  }
+}
+
+// react select
+.react-select-custom {
+  width: 100%;
+  .custom__control {
+    height: 30px;
+    min-height: unset;
+    border-radius: 2px;
+    border-color: #eee;
+    background-color: #fff;
+    &:hover {
+      border-color: #eee;
     }
-    input[type=text]{
-        display: block;
-        width: 100%;
-        height: 30px;
-        padding: 0 34px 0 10px;
-        border-radius: 2px;
-        border: 1px solid #eee;
-        font-size: 13px;
-        color: #45576F;
-        font-weight: normal;
-        font-family: 'Noto Sans JP', sans-serif;
-        background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
-        background-size: 14px 15px;
-        cursor: pointer;
+  }
+  .custom__control--is-focused {
+    border-color: #eee;
+    box-shadow: unset;
+    &:hover {
+      border-color: #eee;
     }
-}
\ No newline at end of file
+  }
+  .custom__value-container {
+    height: 100%;
+    padding: 0 10px;
+  }
+  .custom__placeholder,
+  .custom__single-value {
+    margin: 0;
+  }
+  .custom__single-value {
+    font-size: 13px;
+    color: #45576f;
+    font-weight: 400;
+  }
+  .custom__placeholder {
+    font-size: 13px;
+    color: #bbbbbb;
+    font-weight: 400;
+  }
+  .custom__clear-indicator,
+  .custom__indicator-separator {
+    display: none;
+  }
+  .custom__indicator {
+    padding: 0;
+    svg {
+      display: none;
+    }
+  }
+  .custom__dropdown-indicator {
+    width: 30px;
+    height: 100%;
+    background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
+  }
+
+  .custom__menu {
+    margin: 1px 0;
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .custom__menu-list {
+    padding: 0;
+  }
+  .custom__option {
+    font-size: 13px;
+    padding: 7px 10px;
+    color: #45576f;
+  }
+  .custom__option--is-selected {
+    color: #fff;
+  }
+  // disable
+  &.custom--is-disabled {
+    .custom__control {
+      background-color: #fafafa;
+    }
+    .custom__single-value {
+      color: #999999;
+    }
+  }
+}