🚨chore: Sync Sass

src/styles/_contents.scss

@@ -3,19 +3,24 @@
   height: calc(100vh - 47px);
   display: flex;
   flex-direction: column;
+
   .canvas-content {
     flex: 1 1 auto;
+
     .canvas-layout {
       height: 100%;
     }
   }
+
   &.sub-wrap {
     overflow: hidden;
+
     .canvas-content {
       height: calc(100% - 47px);
     }
   }
 }
+
 // CanvasMenu
 .canvas-menu-wrap {
   position: relative;
@@ -24,6 +29,7 @@
   padding-bottom: 0;
   background-color: #383838;
   transition: padding .17s ease-in-out;
+
   .canvas-menu-inner {
     position: relative;
     display: flex;
@@ -31,14 +37,17 @@
     padding: 0 40px 0 20px;
     background-color: #2C2C2C;
     z-index: 999;
+
     .canvas-menu-list {
       display: flex;
       align-items: center;
       height: 100%;
+
       .canvas-menu-item {
         display: flex;
         align-items: center;
         height: 100%;
+
         button {
           display: flex;
           align-items: center;
@@ -49,6 +58,7 @@
           padding: 15px 20px;
           opacity: 0.55;
           transition: all .17s ease-in-out;
+
           .menu-icon {
             display: block;
             width: 16px;
@@ -57,38 +67,66 @@
             background-position: center;
             background-size: cover;
             margin-right: 10px;
-                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+
-                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+            &.con00 {
-                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+              background-image: url(/static/images/canvas/menu_icon00.svg);
-                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+            }
-                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+
-                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+            &.con01 {
-                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+              background-image: url(/static/images/canvas/menu_icon01.svg);
+            }
+
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
             }
           }
+        }
+
         &.active {
           background-color: #383838;
+
           button {
             opacity: 1;
           }
         }
       }
     }
+
     .canvas-side-btn-wrap {
       display: flex;
       align-items: center;
       margin-left: auto;
+
       .select-box {
         width: 124px;
         margin-right: 5px;
+
         > div {
           width: 100%;
         }
       }
+
       .btn-from {
         display: flex;
         align-items: center;
         gap: 5px;
+
         button {
           display: block;
           width: 30px;
@@ -99,27 +137,58 @@
           background-repeat: no-repeat;
           background-size: 15px 15px;
           transition: all .17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+
-                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+          &.btn01 {
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
-                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+          }
-                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+
-                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+          &.btn02 {
-                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
-                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+          }
-                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+
+          &.btn03 {
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+          }
+
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
+
           &:hover {
             background-color: #1083E3;
           }
+
           &.active {
             background-color: #1083E3;
           }
         }
       }
+
       .ico-btn-from {
         display: flex;
         align-items: center;
         gap: 5px;
+
         button {
           .ico {
             display: block;
@@ -128,22 +197,37 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: contain;
-                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
+
-                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
+            &.ico01 {
-                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
-                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
             }
+
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
+          }
+
           .name {
             font-size: 12px;
             color: #fff;
           }
         }
+
         &.form06 {
           .name {
             font-size: 13px;
           }
         }
       }
+
       .vertical-horizontal {
         display: flex;
         min-width: 170px;
@@ -153,11 +237,13 @@
         background: #373737;
         line-height: 28px;
         overflow: hidden;
+
         span {
           padding: 0 10px;
           font-size: 13px;
           color: #fff;
         }
+
         button {
           margin-left: auto;
           height: 100%;
@@ -168,12 +254,14 @@
           padding: 0 7.5px;
           transition: all .17s ease-in-out;
         }
+
         &.on {
           button {
             background-color: #1083E3;
           }
         }
       }
+
       .size-control {
         display: flex;
         align-items: center;
@@ -184,10 +272,12 @@
         width: 100px;
         height: 30px;
         margin: 0 5px;
+
         span {
           font-size: 13px;
           color: #fff;
         }
+
         .control-btn {
           display: block;
           width: 12px;
@@ -195,9 +285,11 @@
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center;
+
           &.minus {
             background-image: url(../../public/static/images/canvas/minus.svg);
           }
+
           &.plus {
             background-image: url(../../public/static/images/canvas/plus.svg);
           }
@@ -205,6 +297,7 @@
       }
     }
   }
+
   .canvas-depth2-wrap {
     position: absolute;
     top: -100%;
@@ -213,20 +306,24 @@
     width: 100%;
     height: 50px;
     transition: all .17s ease-in-out;
+
     .canvas-depth2-inner {
       display: flex;
       align-items: center;
       padding: 0 40px;
       height: 100%;
+
       .canvas-depth2-list {
         display: flex;
         align-items: center;
         height: 100%;
+
         .canvas-depth2-item {
           display: flex;
           align-items: center;
           margin-right: 26px;
           height: 100%;
+
           button {
             position: relative;
             opacity: 0.55;
@@ -236,10 +333,12 @@
             height: 100%;
             padding-right: 12px;
           }
+
           &.active {
             button {
               opacity: 1;
               font-weight: 600;
+
               &:after {
                 content: '';
                 position: absolute;
@@ -254,17 +353,20 @@
           }
         }
       }
+
       .canvas-depth2-btn-list {
         display: flex;
         align-items: center;
         margin-left: auto;
         height: 100%;
+
         .depth2-btn-box {
           display: flex;
           align-items: center;
           margin-right: 34px;
           height: 100%;
           transition: all .17s ease-in-out;
+
           button {
             position: relative;
             font-size: 12px;
@@ -272,6 +374,7 @@
             height: 100%;
             color: #fff;
             padding-right: 12px;
+
             &:after {
               content: '';
               position: absolute;
@@ -283,19 +386,23 @@
               background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
             }
           }
+
           &:last-child {
             margin-right: 0;
           }
+
           &.mouse {
             opacity: 0.55;
           }
         }
       }
     }
+
     &.active {
       top: 47px;
     }
   }
+
   &.active {
     padding-bottom: 50px;
   }
@@ -308,10 +415,12 @@
     background-color: #1C1C1C;
     border-top: 1px solid #000;
     width: 100%;
+
     .canvas-plane-wrap {
       display: flex;
       align-items: center;
       max-width: calc(100% - 45px);
+
       .canvas-page-box {
         display: flex;
         align-items: center;
@@ -320,6 +429,7 @@
         border-right: 1px solid #000;
         min-width: 0;
         transition: all .17s ease-in-out;
+
         span {
           display: flex;
           align-items: center;
@@ -331,6 +441,7 @@
           text-overflow: ellipsis;
           overflow: hidden;
         }
+
         .close {
           flex: none;
           display: block;
@@ -340,24 +451,30 @@
           background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
           background-size: cover;
         }
+
         &.on {
           background-color: #fff;
+
           span {
             font-weight: 600;
             color: #101010;
           }
+
           .close {
             background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
           }
+
           &:hover {
             background-color: #fff;
           }
         }
+
         &:hover {
           background-color: #000;
         }
       }
     }
+
     .plane-add {
       display: flex;
       align-items: center;
@@ -367,6 +484,7 @@
       background-color: #1C1C1C;
       border-right: 1px solid #000;
       transition: all .17s ease-in-out;
+
       span {
         display: block;
         width: 9px;
@@ -374,6 +492,7 @@
         background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
         background-size: cover;
       }
+
       &:hover {
         background-color: #000;
       }
@@ -385,6 +504,7 @@
   position: relative;
   height: calc(100% - 36.5px);
   background-color: #fff;
+
   canvas {
     position: absolute;
     top: 0;
@@ -404,20 +524,25 @@
   border-bottom: 1px solid #000;
   background: #2C2C2C;
   z-index: 999;
+
   .sub-header-inner {
     display: flex;
     align-items: center;
     height: 100%;
     padding: 0 100px;
+
     .sub-header-title-wrap {
       display: flex;
       align-items: center;
+
       .title-item {
         position: relative;
         padding: 0 24px;
+
         a {
           display: flex;
           align-items: center;
+
           .icon {
             width: 22px;
             height: 22px;
@@ -425,9 +550,13 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
-                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
             }
           }
+        }
+
         &:after {
           content: '';
           position: absolute;
@@ -438,31 +567,38 @@
           height: 16px;
           background-color: #D9D9D9;
         }
+
         &:first-child {
           padding-left: 0;
         }
+
         &:last-child {
           padding-right: 0;
+
           &:after {
             display: none;
           }
         }
       }
     }
+
     .sub-header-title {
       font-size: 16px;
       color: #fff;
       font-weight: 600;
     }
+
     .sub-header-location {
       margin-left: auto;
       display: flex;
       align-items: center;
+
       .location-item {
         position: relative;
         display: flex;
         align-items: center;
         padding: 0 10px;
+
         span {
           display: flex;
           font-size: 12px;
@@ -470,6 +606,7 @@
           font-weight: normal;
           cursor: default;
         }
+
         &:after {
           content: '';
           position: absolute;
@@ -480,14 +617,18 @@
           height: 6px;
           background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
         }
+
         &:first-child {
           padding-left: 0;
         }
+
         &:last-child {
           padding-right: 0;
+
           span {
             color: #fff;
           }
+
           &:after {
             display: none;
           }
@@ -500,42 +641,51 @@
 // sub content
 .sub-content {
   padding-top: 46px;
+
   .sub-content-inner {
     max-width: 1720px;
     margin: 0 auto;
     padding-top: 20px;
+
     .sub-content-box {
       margin-bottom: 20px;
+
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
+
   &.estimate {
     display: flex;
     flex-direction: column;
     height: calc(100% - 36.5px);
     overflow-y: auto;
     padding-top: 0;
+
     .sub-content-inner {
       flex: 1;
       width: 100%;
     }
   }
 }
+
 .sub-table-box {
   padding: 20px;
   border-radius: 6px;
   border: 1px solid #E9EAED;
   background: #FFF;
   box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+
   .table-box-title-wrap {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
+
     .title-wrap {
       display: flex;
       align-items: center;
+
       h3 {
         display: block;
         font-size: 15px;
@@ -543,21 +693,26 @@
         font-weight: 600;
         margin-right: 14px;
       }
+
       .info-wrap {
         display: flex;
         align-items: center;
+
         li {
           position: relative;
           padding: 0 6px;
           font-size: 12px;
           color: #101010;
           font-weight: normal;
+
           span {
             font-weight: 600;
+
             &.red {
               color: #E23D70;
             }
           }
+
           &:after {
             content: '';
             position: absolute;
@@ -568,17 +723,29 @@
             height: 11px;
             background-color: #D9D9D9;
           }
-                    &:first-child{padding-left: 0;}
+
-                    &:last-child{padding-right: 0;&::after{display: none;}}
+          &:first-child {
+            padding-left: 0;
+          }
+
+          &:last-child {
+            padding-right: 0;
+
+            &::after {
+              display: none;
             }
           }
         }
       }
+    }
+  }
+
   .left-unit-box {
     margin-left: auto;
     display: flex;
     align-items: center;
   }
+
   .promise-gudie {
     display: block;
     font-size: 13px;
@@ -586,15 +753,18 @@
     color: #101010;
     margin-bottom: 20px;
   }
+
   .important {
     color: #f00;
   }
+
   .sub-table-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
   }
+
   .pagination-wrap {
     margin-top: 24px;
   }
@@ -604,19 +774,23 @@
   display: flex;
   align-items: center;
   gap: 10px;
+
   .sub-table-box {
     flex: 1;
   }
+
   .info-title {
     font-size: 14px;
     font-weight: 500;
     color: #344356;
     margin-bottom: 10px;
   }
+
   .info-inner {
     position: relative;
     font-size: 13px;
     color: #344356;
+
     .copy-ico {
       position: absolute;
       bottom: 0;
@@ -634,14 +808,17 @@
   display: flex;
   align-items: center;
   margin-bottom: 10px;
+
   .estimate-box {
     flex: 1;
     display: flex;
     align-items: center;
+
     &:last-child {
       flex: none;
       min-width: 220px;
     }
+
     .estimate-tit {
       width: 105px;
       height: 30px;
@@ -653,6 +830,7 @@
       font-weight: 500;
       color: #344356;
     }
+
     .estimate-name {
       font-size: 13px;
       color: #344356;
@@ -660,6 +838,7 @@
       font-weight: 400;
     }
   }
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -668,13 +847,16 @@
 // file drag box
 .drag-file-box {
   padding: 10px;
+
   .btn-area {
     padding-bottom: 15px;
     border-bottom: 1px solid #ECF0F4;
   }
+
   .drag-file-area {
     position: relative;
     margin-top: 15px;
+
     p {
       position: absolute;
       top: 50%;
@@ -686,9 +868,11 @@
       cursor: default;
     }
   }
+
   .file-list {
     .file-item {
       margin-bottom: 15px;
+
       span {
         position: relative;
         font-size: 13px;
@@ -696,6 +880,7 @@
         font-weight: 400;
         white-space: nowrap;
         padding-right: 55px;
+
         button {
           position: absolute;
           top: 50%;
@@ -707,6 +892,7 @@
           background-size: cover;
         }
       }
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -719,22 +905,28 @@
   display: flex;
   gap: 20px;
   width: 100%;
+
   .sub-table-box {
     height: 100%;
   }
+
   .chart-inner {
     flex: 1;
+
     .chart-box {
       margin-bottom: 30px;
     }
   }
+
   .chart-table-wrap {
     display: flex;
     flex-direction: column;
     flex: none;
     width: 650px;
+
     .sub-table-box {
       flex: 1;
+
       &:first-child {
         margin-bottom: 20px;
       }
@@ -748,6 +940,7 @@
     border-collapse: collapse;
     border: 1px solid #ECF0F4;
     border-radius: 4px;
+
     thead {
       th {
         padding: 4.5px 0;
@@ -759,6 +952,7 @@
         background-color: #F8F9FA;
       }
     }
+
     tbody {
       td {
         font-size: 13px;
@@ -773,9 +967,11 @@
 .simulation-guide-wrap {
   display: flex;
   padding: 20px;
+
   .simulation-tit-wrap {
     padding-right: 40px;
     border-right: 1px solid #EEEEEE;
+
     span {
       display: block;
       position: relative;
@@ -783,6 +979,7 @@
       font-size: 15px;
       color: #14324F;
       font-weight: 600;
+
       &::before {
         content: '';
         position: absolute;
@@ -796,22 +993,27 @@
       }
     }
   }
+
   .simulation-guide-box {
     padding-left: 40px;
+
     dl {
       margin-bottom: 25px;
+
       dt {
         font-size: 13px;
         color: #101010;
         font-weight: 600;
         margin-bottom: 5px;
       }
+
       dd {
         font-size: 12px;
         color: #45576F;
         font-weight: 400;
         line-height: 24px;
       }
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -827,6 +1029,7 @@
   margin-right: 4px;
   border: 1px solid #ECF0F4;
   border-top: none;
+
   .total-title {
     flex: 1;
     text-align: center;
@@ -834,6 +1037,7 @@
     color: #344356;
     font-weight: 500;
   }
+
   .total-num {
     flex: none;
     width: 121px;
@@ -843,3 +1047,94 @@
     font-weight: 500;
   }
 }
+
+// 패널 배치 집계
+
+.penal-wrap {
+  position: fixed;
+  top: 200px;
+  left: 50px;
+  z-index: 999999;
+  width: 237px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  border: 1px solid #DFDFDF;
+  padding: 0 34px 0 10px;
+  border-radius: 2px;
+  box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
+    background-size: cover;
+  }
+
+  h2 {
+    font-size: 12px;
+    font-weight: 500;
+    color: #3D3D3D;
+  }
+
+  .penal-table-wrap {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    min-width: calc(100% + 2px);
+    background-color: #3D3D3D;
+    border: 1px solid #3D3D3D;
+    padding: 20px;
+
+    .penal-table {
+      table-layout: fixed;
+      border-collapse: collapse;
+
+      thead {
+        th {
+          text-align: center;
+          background-color: rgba(255, 255, 255, 0.05);
+          font-size: 12px;
+          font-weight: 500;
+          color: #fff;
+          border: 1px solid #505050;
+        }
+      }
+
+      tbody {
+        td {
+          font-size: 12px;
+          color: #fff;
+          font-weight: 400;
+          text-align: center;
+          padding: 0 10px;
+          border: 1px solid #505050;
+        }
+      }
+    }
+  }
+
+  &.act {
+    border: 1px solid #3D3D3D;
+    background-color: #3D3D3D;
+
+    h2 {
+      color: #fff;
+    }
+
+    &::before {
+      background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
+    }
+
+    .penal-table-wrap {
+      display: block;
+    }
+  }
+}

src/styles/_modal.scss

@@ -77,6 +77,10 @@ $alert-color: #101010;
     width: 640px;
   }
 
+  &.lx-2 {
+    width: 740px;
+  }
+
   &.lx {
     width: 770px;
   }
@@ -783,6 +787,7 @@ $alert-color: #101010;
       display: table-cell;
       vertical-align: middle;
       padding-bottom: 14px;
+      text-align: left;
     }
 
     .eaves-keraba-td {
@@ -1543,3 +1548,115 @@ $alert-color: #101010;
     }
   }
 }
+
+
+// 지붕모듈선택
+.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;
+}
+
+.module-table-box {
+  flex: 1;
+  background-color: #3D3D3D;
+  border-radius: 2px;
+
+  .module-table-inneer {
+    padding: 10px;
+
+    .outline-form {
+      span {
+        width: auto;
+      }
+    }
+  }
+}

src/styles/_reset.scss

@@ -5,14 +5,17 @@
   text-size-adjust: none;
   box-sizing: content-box
 }
+
 *, ::after, ::before {
   box-sizing: border-box;
 }
+
 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,
@@ -36,33 +39,42 @@ time, mark, audio, video {
   -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;
 }
+
 body {
   line-height: 1.4;
 }
-body:first-of-type caption { display:none;}
+
+body:first-of-type caption {
+  display: none;
+}
 
 ol, ul {
   list-style: none;
 }
+
 blockquote, q {
   quotes: none;
 }
+
 blockquote:before, blockquote:after,
 q:before, q:after {
   content: '';
   content: none;
 }
+
 table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   border: 0 none;
 }
+
 caption, th, td {
   text-align: left;
   font-weight: normal;
@@ -73,14 +85,17 @@ a {
   cursor: pointer;
   color: #000;
 }
+
 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);
 }
+
 button, input[type=text], input[type=button] {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
@@ -88,23 +103,28 @@ button,input[type=text], input[type=button] {
   appearance: none;
   border-radius: 0
 }
+
 input[type=checkbox], input[type=radio] {
   box-sizing: border-box;
   padding: 0;
 }
+
 input, select, button {
   border: 0 none;
   outline: none;
   margin: 0;
 }
+
 select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
+
 select::-ms-expand {
   display: none;
 }
+
 ::-webkit-input-placeholder {
   line-height: 1;
   font-weight: 300;
@@ -112,9 +132,11 @@ select::-ms-expand {
   letter-spacing: -0.6px;
   color: #8b8b8b;
 }
+
 .log-box ::-webkit-input-placeholder {
   color: #8b8b8b;
 }
+
 button {
   background: transparent;
   font-family: 'Noto Sans JP', sans-serif;
@@ -126,23 +148,73 @@ button{
   outline: none;
   cursor: pointer;
 }
+
 .pre {
   font-family: 'Pretendard', sans-serif !important;
 }
 
 // margin
-.mt5{margin-top: 5px !important;}
+.mt5 {
-.mt10{margin-top: 10px !important;}
+  margin-top: 5px !important;
-.mt15{margin-top: 15px !important;}
+}
-.mb5{margin-bottom: 5px !important;}
+
-.mb10{margin-bottom: 10px !important;}
+.mt10 {
-.mb15{margin-bottom: 15px !important;}
+  margin-top: 10px !important;
-.mr5{margin-right: 5px !important;}
+}
-.mr10{margin-right: 10px !important;}
+
-.mr15{margin-right: 15px !important;}
+.mt15 {
-.ml5{margin-left: 5px !important;}
+  margin-top: 15px !important;
-.ml10{margin-left: 10px !important;}
+}
-.ml15{margin-left: 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
+.l {
+  text-align: left !important;
+}
+
+.r {
+  text-align: right !important;
+}
+
+.c {
+  text-align: center !important;
+}
+
 
 // button
 .btn-frame {
@@ -159,9 +231,11 @@ button{
   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;
@@ -173,19 +247,23 @@ button{
     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;
@@ -193,6 +271,7 @@ button{
       font-weight: 500;
     }
   }
+
   &.sub-tab {
     height: 30px;
     padding: 0 10px;
@@ -201,6 +280,7 @@ button{
     background-color: #2D2D2D;
     border: 1px solid #393939;
     color: #aaa;
+
     &.act,
     &:hover {
       background-color: #414E6C;
@@ -209,6 +289,7 @@ button{
       font-weight: 500;
     }
   }
+
   &:hover,
   &.act {
     background-color: #1083E3;
@@ -216,16 +297,20 @@ button{
     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;
@@ -243,14 +328,18 @@ button{
   font-size: 13px;
   font-weight: 400;
   transition: all .15s ease-in-out;
+
   &.navy {
     background-color: #304961;
+
     &:hover {
       background-color: #1083E3;
     }
   }
+
   &.grey {
     background-color: #94A0AD;
+
     &:hover {
       background-color: #607F9A;
     }
@@ -271,11 +360,13 @@ button{
   border-top-left-radius: 2px;
   color: #fff;
   cursor: pointer;
+
   p {
     font-size: 13px;
     color: #fff;
     height: 100%;
   }
+
   .select-item-wrap {
     position: absolute;
     top: 100%;
@@ -291,34 +382,41 @@ button{
     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;
     }
   }
+
   &::after {
     content: '';
     position: absolute;
@@ -331,11 +429,13 @@ button{
     background-size: cover;
     transition: all .17s ease-in-out;
   }
+
   &.active {
     .select-item-wrap {
       clip-path: inset(0 0 0 0);
       visibility: visible;
     }
+
     &:after {
       transform: translateY(-50%) rotate(-180deg);
     }
@@ -355,15 +455,18 @@ button{
   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;
@@ -384,6 +487,7 @@ button{
     margin-bottom: 10px;
   }
 }
+
 input[type=number],
 input[type=text] {
   &.input-origin {
@@ -399,18 +503,28 @@ input[type=text]{
     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%;
@@ -425,6 +539,7 @@ input[type=text]{
     font-weight: normal;
     transition: border-color .17s ease-in-out;
     text-align: left;
+
     &:read-only {
       background-color: #FAFAFA;
       color: #999999;
@@ -433,7 +548,6 @@ input[type=text]{
 }
 
 
-
 // check-btn
 .check-btn {
   display: flex;
@@ -442,6 +556,7 @@ input[type=text]{
   background-color: #3A3A3A;
   border-radius: 3px;
   transition: all .17s ease-in-out;
+
   .check-area {
     flex: none;
     width: 30px;
@@ -450,22 +565,27 @@ input[type=text]{
     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 {
       color: #101010;
       font-weight: 600;
@@ -482,12 +602,14 @@ input[type=text]{
   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;
@@ -499,27 +621,34 @@ input[type=text]{
       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: #1083E3;
@@ -533,6 +662,7 @@ input[type=text]{
 .d-check-box {
   line-height: 1.1;
   cursor: pointer;
+
   input[type=checkbox],
   input[type=radio] {
     position: static;
@@ -542,6 +672,7 @@ input[type=text]{
     z-index: 1;
     flex: 0 0 auto;
   }
+
   label {
     position: relative;
     padding-left: 10px;
@@ -555,11 +686,13 @@ input[type=text]{
     font-weight: 400;
     cursor: pointer;
   }
+
   &.light {
     label {
       color: #45576F;
     }
   }
+
   &.no-text {
     label {
       padding-left: 0;
@@ -587,6 +720,7 @@ input[type=text]{
       line-height: 1.4;
       transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     }
+
     &::after {
       cursor: pointer;
       content: "";
@@ -608,28 +742,34 @@ input[type=text]{
       transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
     }
   }
+
   &.light {
     label {
       &:before {
         border-color: #D6D6D7;
       }
+
       &:after {
         background-color: #697C8F;
       }
     }
   }
+
   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;
@@ -656,6 +796,7 @@ input[type=text]{
       background-color: transparent;
       transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     }
+
     &:after {
       cursor: pointer;
       content: "";
@@ -669,6 +810,7 @@ input[type=text]{
       transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
     }
   }
+
   input[type=checkbox]:checked + label::after {
     content: "";
     display: inline-block;
@@ -683,6 +825,7 @@ input[type=text]{
     transform: translate(7.75px, 4.5px) rotate(45deg);
     -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
   }
+
   &.pop {
     input[type=checkbox]:checked + label::after {
       border-color: #fff;
@@ -692,10 +835,14 @@ input[type=text]{
 
 // date-picker
 .date-picker {
-    svg{display: none;}
+  svg {
+    display: none;
+  }
+
   .react-datepicker-wrapper {
     width: 100%;
   }
+
   input[type=text] {
     display: block;
     width: 100%;

src/styles/_table.scss

@@ -9,6 +9,7 @@ table{
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
   .al-l {
     text-align: left !important;
   }
@@ -20,6 +21,7 @@ table{
     border: 1px solid #ECF0F4;
     border-radius: 3px;
     border-collapse: collapse;
+
     tbody {
       th {
         font-size: 13px;
@@ -30,6 +32,7 @@ table{
         background-color: #F7F9FA;
         vertical-align: middle;
       }
+
       td {
         padding: 9px;
         border: 1px solid #ECF0F4;
@@ -37,16 +40,20 @@ table{
         font-weight: 400;
         color: #45576F;
         vertical-align: middle;
+
         .radio-wrap {
           flex: none;
           @include flexbox;
         }
+
         .form-flex-wrap {
           @include flexbox;
         }
+
         .date-picker-wrap {
           width: 100%;
           @include flexbox;
+
           span {
             margin: 0 4px;
           }
@@ -54,6 +61,7 @@ table{
       }
     }
   }
+
   &.bt-able {
     margin-bottom: 30px;
   }
@@ -64,6 +72,7 @@ table{
     border-top: 1px solid #DEE3EA;
     border-bottom: 1px solid #DEE3EA;
     border-collapse: collapse;
+
     tbody {
       tr {
         th {
@@ -72,10 +81,12 @@ table{
           font-weight: 500;
           padding: 18px 0;
           border-bottom: 1px solid #F4F4F7;
+
           .title {
             margin-right: 8px;
           }
         }
+
         td {
           padding: 0 0 0 15px;
           border-bottom: 1px solid #F4F4F7;
@@ -86,21 +97,27 @@ table{
             font-weight: normal;
             margin-left: 15px;
           }
+
           span {
             font-size: 13px;
             color: #697C8F;
             font-weight: normal;
           }
         }
+
         &:last-child {
-                    th,td{border-bottom: none;}
+          th, td {
+            border-bottom: none;
           }
         }
       }
+    }
+
     .flx-box {
       @include flexbox;
     }
   }
+
   .tooltips {
     display: block;
     width: 14px;
@@ -116,10 +133,12 @@ table{
   table {
     table-layout: fixed;
     border-collapse: collapse;
+
     thead {
       display: table;
       table-layout: fixed;
       width: 100%;
+
       th {
         padding: 13px 0;
         font-size: 13px;
@@ -129,14 +148,17 @@ table{
         text-align: center;
       }
     }
+
     tbody {
       display: block;
       overflow-y: auto;
+
       tr {
         display: table;
         table-layout: fixed;
         width: 100%;
         border: 1px solid #ECF0F4;
+
         td {
           padding: 10px 0px;
           font-size: 13px;
@@ -145,20 +167,27 @@ table{
           text-align: center;
         }
       }
+
       &::-webkit-scrollbar {
         width: 4px;
         background-color: transparent;
       }
+
       &::-webkit-scrollbar-thumb {
         background-color: #C1CCD7;
       }
+
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
     }
+
     &.small {
-            tbody{height: 120px;}
+      tbody {
+        height: 120px;
       }
+    }
+
     &.big {
       td,
       th {
@@ -166,8 +195,10 @@ table{
           width: 121px;
         }
       }
+
       tbody {
         height: 160px;
+
         td {
           padding: 10px 20px;
         }
@@ -175,3 +206,10 @@ table{
     }
   }
 }
+
+.roof-module-table {
+  table {
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+}