From 1d8d46eb4a0e72104e0a1d5911000ad20129b49e Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 30 Sep 2024 13:29:22 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_modal.scss |   84 ++-
 src/styles/_reset.scss | 1262 ++++++++++++++++++++++------------------
 2 files changed, 777 insertions(+), 569 deletions(-)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 0ad517a3..28456176 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -45,6 +45,10 @@ $alert-color: #101010;
     width: 400px;
   }
 
+  &.lr {
+    width: 440px;
+  }
+
   &.sm {
     width: 580px;
   }
@@ -138,6 +142,13 @@ $alert-color: #101010;
     button {
       flex: 1;
     }
+
+    &.sub {
+      button {
+        flex: 1 1 auto;
+        padding: 0;
+      }
+    }
   }
 
   .modal-check-btn-wrap {
@@ -491,6 +502,7 @@ $alert-color: #101010;
 // 외벽선 그리기
 .outline-wrap {
   padding: 24px 0;
+  border-top: 1px solid #424242;
   border-bottom: 1px solid #424242;
 
   .outline-inner {
@@ -501,11 +513,14 @@ $alert-color: #101010;
     &:last-child {
       margin-bottom: 0;
     }
+
+    .outline-form {
+      width: 50%;
+    }
   }
 }
 
 .outline-form {
-  width: 50%;
   display: flex;
   align-items: center;
   margin-right: 15px;
@@ -517,6 +532,10 @@ $alert-color: #101010;
     font-weight: $pop-bold-weight;
     color: $pop-color;
     margin-right: 10px;
+
+    &.thin {
+      font-weight: & $pop-normal-weight;
+    }
   }
 
   .reset-btn {
@@ -566,6 +585,7 @@ $alert-color: #101010;
   }
 }
 
+// 외벽선 속성 설정
 .properties-guide {
   font-size: $pop-normal-size;
   color: #AAA;
@@ -574,6 +594,10 @@ $alert-color: #101010;
 }
 
 .properties-setting-wrap {
+  &.outer {
+    margin-top: 24px;
+  }
+
   .setting-tit {
     font-size: 13px;
     color: $pop-color;
@@ -617,4 +641,62 @@ $alert-color: #101010;
       }
     }
   }
+}
+
+// 지붕형상 설정
+.roof-shape-menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 24px 10px;
+  margin-bottom: 24px;
+
+  .shape-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 13px;
+    background-color: #3D3D3D;
+    transition: background .15s ease-in-out;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  .shape-title {
+    font-size: $pop-normal-size;
+    font-weight: $pop-bold-weight;
+    color: $pop-color;
+    margin-top: 10px;
+    text-align: center;
+    transition: color .15s ease-in-out;
+  }
+
+  .shape-menu-box {
+    &.act,
+    &:hover {
+      .shape-box {
+        background-color: #008BFF;
+      }
+
+      .shape-title {
+        color: #008BFF;
+      }
+    }
+  }
+}
+
+.setting-box {
+  padding: 14px 0;
+  border-top: 1px solid #424242;
+  border-bottom: 1px solid #424242;
+}
+
+.discrimination-box {
+  padding: 16px 12px;
+  border: 1px solid #3D3D3D;
+  border-radius: 2px;
+  margin-top: 14px;
 }
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 2c5b1e22..dcf0c0d2 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,18 +1,21 @@
 * {
-    -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;
+  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,
@@ -22,654 +25,777 @@ 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, 
+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;
+  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, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
+  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;
-}
-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;
-    border:0;
+  list-style: none;
 }
 
-a { 
-    cursor:pointer;
-    color:#000;
+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;
+  border: 0;
+}
+
+a {
+  cursor: pointer;
+  color: #000;
+}
+
 a, a:hover, a:active {
-    text-decoration:none;
-    -webkit-tap-highlight-color: transparent;
+  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);
+  -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;
+  box-sizing: border-box;
+  padding: 0;
 }
+
 input, select, button {
-    border:0 none;
-    outline:none;
-    margin:0;
+  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;}
-.mb5{margin-bottom: 5px !important;}
-.mb10{margin-bottom: 10px !important;}
-.mr5{margin-right: 5px !important;}
-.mr10{margin-right: 10px !important;}
-.ml5{margin-left: 5px !important;}
-.ml10{margin-left: 10px !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;
-        }
-    }
-    &: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;
 }
 
-.btn-origin{
-    display: inline-block;
+.mt10 {
+  margin-top: 10px !important;
+}
+
+.mb5 {
+  margin-bottom: 5px !important;
+}
+
+.mb10 {
+  margin-bottom: 10px !important;
+}
+
+.mr5 {
+  margin-right: 5px !important;
+}
+
+.mr10 {
+  margin-right: 10px !important;
+}
+
+.ml5 {
+  margin-left: 5px !important;
+}
+
+.ml10 {
+  margin-left: 10px !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;
-    padding: 0 14px;
-    border-radius: 2px;
-    background-color: #101010;
-    color: #fff;
+    line-height: 30px;
     font-size: 13px;
-    font-weight: 400;
-    transition: all .15s ease-in-out;
-    &.navy{
-        background-color: #304961;
-        &:hover{
-            background-color: #1083E3;
-        }
+  }
+
+  &.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;
     }
-    &.grey{
-        background-color: #94A0AD;
-        &:hover{
-            background-color: #607F9A;
-        }
+  }
+
+  &.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;
     }
+  }
+
+  &: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 14px;
+  border-radius: 2px;
+  background-color: #101010;
+  color: #fff;
+  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;
+    }
+  }
 }
 
 // select
-.sort-select{
-    position: relative;
-    display: inline-block;
-    min-width: 100px;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
+.sort-select {
+  position: relative;
+  display: inline-block;
+  min-width: 100px;
+  height: 30px;
+  line-height: 30px;
+  padding: 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;
+    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;
     background-color: #373737;
     border: 1px solid #3F3F3F;
     border-radius: 2px;
-    border-top-left-radius: 2px;
-    color: #fff;
-    cursor: pointer;
-    p{
-        font-size: 13px;
+    transition: all 0.17s ease-in-out;
+    visibility: hidden;
+
+    .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;
-        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;
-        background-color: #373737;
-        border: 1px solid #3F3F3F;
-        border-radius: 2px;
-        transition: all 0.17s ease-in-out;
-        visibility: hidden;
-        .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;
-            }
-        }
+  }
+
+  &::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;
+  }
+
+  &.active {
+    .select-item-wrap {
+      clip-path: inset(0 0 0 0);
+      visibility: visible;
     }
-    &::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;
-    }
-    &.active{
-        .select-item-wrap{
-            clip-path: inset(0 0 0 0);
-            visibility: visible;
-        }
-        &:after{
-            transform: translateY(-50%) rotate(-180deg);
-        }
+
+    &:after {
+      transform: translateY(-50%) rotate(-180deg);
     }
+  }
 }
 
-.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;
-    }
+.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=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%;
-        }
-    }
-    &.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;
-        }
-    }
+.form-input {
+  label {
+    display: block;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
 }
 
+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%;
+    }
+  }
+
+  &.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 .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 .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{
-            &: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 {
+      &:before {
+        width: 16px;
+        height: 16px;
+        border-color: #fff;
+      }
+
+      &:after {
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+      }
     }
+  }
 }
 
 // check-box
-.d-check-box{
-    label{
-        &::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: transparent;
-            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 {
+    &::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: transparent;
+      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     }
-    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);
+
+    &: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;
     }
-    &.pop{
-        input[type=checkbox]:checked + label::after{
-            border-color: #fff;
-        }
+  }
+
+  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 {
+    input[type=checkbox]:checked + label::after {
+      border-color: #fff;
     }
+  }
 }
 
 // date-picker
-.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;
-    }
+.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;
+  }
 }
\ No newline at end of file