realreport-designer 1.10.6 → 1.10.8

package/dist/styles/realreport-designer.css

@@ -1,5 +1,5 @@
 /* 
-RealReport Designer v1.10.6
+RealReport Designer v1.10.8
 Copyright (C) 2013-2025 WooriTech Inc.
 All Rights Reserved.
 */
@@ -91,6 +91,7 @@ All Rights Reserved.
   box-sizing: border-box;
   border-top: 1px dashed #aaaaff80;
 }
+
 .rr-page-border-vert {
   pointer-events: none;
   position: absolute;
@@ -103,13 +104,16 @@ All Rights Reserved.
   border: 1px solid #555;
   border-radius: 0;
 }
+
 .rr-text-edit:focus {
   border: 1px solid #555;
   border-radius: 0;
 }
+
 .rr-text-edit:focus-visible {
   outline: none;
 }
+
 .rr-text-edit::selection {
   background-color: #0078D7;
   color: white;
@@ -118,9 +122,11 @@ All Rights Reserved.
 .rr-text-area-editor::-webkit-scrollbar {
   width: 2px;
 }
+
 .rr-text-area-editor::-webkit-scrollbar-track {
   background-color: transparent;
 }
+
 .rr-text-area-editor::-webkit-scrollbar-thumb {
   background: #d2d2d2;
 }
@@ -130,6 +136,7 @@ All Rights Reserved.
   font-style: italic;
   font-size: 8pt;
 }
+
 .rr-design-box[data-vis="false"] {
   border: 1px solid #eee;
   background: none;
@@ -151,6 +158,7 @@ All Rights Reserved.
   font-style: italic;
   font-size: 8pt;
 }
+
 .rr-design-back[data-folded] {
   background-color: #00880010;
   border: 1px dashed #00880080;
@@ -167,24 +175,21 @@ All Rights Reserved.
 }
 
 .rr-bind-marker[data-sys] {
-  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0NENENkIiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==")
-    no-repeat center/contain;
+  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0NENENkIiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center/contain;
 }
 
 .rr-bind-marker[data-vis] {
   display: flex;
   z-index: 5;
-  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0RUFBRkYiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==")
-    no-repeat center center;
+  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0RUFBRkYiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center center;
 }
 
 .rr-bind-marker[data-vis][data-sys] {
-  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0NENENkIiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==")
-    no-repeat center center;
+  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiM0NENENkIiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center center;
 }
+
 .rr-bind-marker[data-vis][data-language] {
-  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiNGRkU2MDAiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==")
-    no-repeat center center;
+  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgNSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8Y2lyY2xlIGN4PSIyLjUiIGN5PSIyLjUiIHI9IjIuMjUiIGZpbGw9IiNGRkU2MDAiIHN0cm9rZT0iIzNBM0EzQSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") no-repeat center center;
 }
 
 .rr-group-element[data-empty] {
@@ -241,6 +246,7 @@ All Rights Reserved.
   border: 2px solid rgba(33, 33, 127, 0.7);
   pointer-events: none;
 }
+
 .rr-focus-view[data-ghost] {
   border-style: dashed;
 }
@@ -278,7 +284,7 @@ All Rights Reserved.
   background-color: rgba(188, 188, 188);
 }
 
-.rr-focus-handle[data-hidden] { 
+.rr-focus-handle[data-hidden] {
   visibility: hidden;
 }
 
@@ -305,9 +311,8 @@ All Rights Reserved.
 }
 
 /** 
-  1. line-height를 절대 설정하지 말 것!
+1. line-height를 절대 설정하지 말 것!
 */
-
 .rr-table tr td {
   position: relative;
   margin: 0 !important;
@@ -336,13 +341,12 @@ All Rights Reserved.
 }
 
 /* .rr-table-cell[data-design]:hover {
-    background-color: rgba(0, 127, 255, 0.05);
+background-color: rgba(0, 127, 255, 0.05);
 } */
-
 .rr-table-focus {
   pointer-events: none;
   /* background-color: #00000010;
-    border: 1px dotted #00000020; */
+border: 1px dotted #00000020; */
 }
 
 .rr-table-focus[data-focused] {
@@ -380,14 +384,12 @@ All Rights Reserved.
   background-color: rgba(0, 0, 0, 0.2);
   background-clip: padding-box;
   min-height: 28px;
-  box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px inset,
-    rgba(0, 0, 0, 0.07) 0px -1px 0px inset;
+  box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px inset, rgba(0, 0, 0, 0.07) 0px -1px 0px inset;
   border-style: solid;
   border-color: transparent;
   border-image: initial;
   border-width: 1px 1px 1px 6px;
   padding: 100px 0px 0px;
-
   background-color: rgb(218, 220, 224);
   background-color: rgb(200, 201, 204);
   box-shadow: none;
@@ -403,7 +405,6 @@ All Rights Reserved.
   border-color: transparent;
   border-image: initial;
   border-width: 0px 0px 0px 4px;
-
   box-shadow: none;
   margin: 0px 4px;
 }
@@ -436,58 +437,55 @@ All Rights Reserved.
 
 @media print {
   .rr-print-page-portrait {
-    width: var(--rr-print-height) !important;
-    height: var(--rr-print-height) !important;
-    transform-origin: top left;
-    transform: translateX(var(--rr-print-portrait-x))
-      scale(var(--rr-print-scale));
+      width: var(--rr-print-height) !important;
+      height: var(--rr-print-height) !important;
+      transform-origin: top left;
+      transform: translateX(var(--rr-print-portrait-x)) scale(var(--rr-print-scale));
   }
 
   .rr-print-page-landscape {
-    width: var(--rr-print-width) !important;
-    height: var(--rr-print-width) !important;
-    transform-origin: top left;
-    transform: translateX(var(--rr-print-size)) rotate(90deg);
+      width: var(--rr-print-width) !important;
+      height: var(--rr-print-width) !important;
+      transform-origin: top left;
+      transform: translateX(var(--rr-print-size)) rotate(90deg);
   }
 
   .rr-print-page-landscape-start {
-    margin: 0 !important;
-    border: none !important;
-    box-shadow: none !important;
-    overflow: hidden;
-    transform-origin: top left;
-    transform: translateX(calc(var(--rr-print-size) * var(--rr-print-scale)))
-      translateY(var(--rr-print-portrait-x)) rotate(90deg)
-      scale(var(--rr-print-scale));
+      margin: 0 !important;
+      border: none !important;
+      box-shadow: none !important;
+      overflow: hidden;
+      transform-origin: top left;
+      transform: translateX(calc(var(--rr-print-size) * var(--rr-print-scale))) translateY(var(--rr-print-portrait-x)) rotate(90deg) scale(var(--rr-print-scale));
   }
 
   .rr-report-preview {
-    position: relative !important;
-    border: none !important;
-    margin: 0 !important;
-    padding: 0 !important;
+      position: relative !important;
+      border: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
   }
 
   .rr-page-break {
-    position: relative !important;
-    page-break-after: always;
-    page-break-inside: avoid;
-    break-after: always;
-    break-inside: avoid;
-    -webkit-break-inside: avoid;
-    -webkit-region-break-inside: avoid;
-    margin: 0 !important;
-    padding: 0 !important;
-    border: none !important;
-    box-shadow: none !important;
+      position: relative !important;
+      page-break-after: always;
+      page-break-inside: avoid;
+      break-after: always;
+      break-inside: avoid;
+      -webkit-break-inside: avoid;
+      -webkit-region-break-inside: avoid;
+      margin: 0 !important;
+      padding: 0 !important;
+      border: none !important;
+      box-shadow: none !important;
   }
 
   .rr-editable-marker {
-    display: none;
+      display: none;
   }
 
   .rr-text[data-editable] span {
-    min-width: none;
+      min-width: none;
   }
 }
 
@@ -515,9 +513,11 @@ All Rights Reserved.
   text-align: center;
   line-height: normal;
 }
+
 .rr-text[data-design]:hover {
   background-color: rgba(111, 111, 0, 0.1);
 }
+
 .rr-text[data-empty]:before {
   color: #999;
   text-align: center;
@@ -525,6 +525,7 @@ All Rights Reserved.
   display: table;
   width: 100%;
 }
+
 .rr-text[data-editable] span {
   min-width: 20px;
 }
@@ -534,13 +535,16 @@ All Rights Reserved.
   margin: 0;
   padding: 0;
 }
+
 .rr-summary[data-design]:hover {
   background-color: rgba(111, 111, 0, 0.1);
 }
+
 .rr-summary[data-error="1"] {
   color: red;
   font-weight: bold;
 }
+
 .rr-summary[data-empty]:before {
   color: #999;
   text-align: center;
@@ -571,6 +575,7 @@ All Rights Reserved.
   content: "[IMAGE]";
   white-space: nowrap;
 }
+
 .rr-image[data-design]:hover {
   background-color: rgba(111, 111, 0, 0.1);
 }
@@ -584,10 +589,12 @@ All Rights Reserved.
   color: #777;
   border: 1px solid #aaa;
 }
+
 .rr-svg[data-empty] span:before {
   content: "[ SVG ]";
   white-space: nowrap;
 }
+
 .rr-svg[data-design]:hover {
   background-color: rgba(111, 111, 0, 0.1);
 }
@@ -595,9 +602,11 @@ All Rights Reserved.
 .rr-sign:not([data-design]) {
   cursor: pointer;
 }
+
 .rr-sign[data-design] {
   background-color: #f0f0f0;
 }
+
 .rr-sign[data-empty]:before {
   content: "[서 명]";
   white-space: nowrap;
@@ -608,9 +617,11 @@ All Rights Reserved.
   transform: translate(-50%, -50%);
   font-size: 15px;
 }
+
 .rr-sign[data-design]:hover {
   background-color: rgba(111, 111, 0, 0.1);
 }
+
 .rr-sign img {
   box-sizing: border-box;
   object-fit: contain;
@@ -620,9 +631,11 @@ All Rights Reserved.
 .rr-stamp:not([data-design]) {
   cursor: pointer;
 }
+
 .rr-stamp[data-design] {
   background-color: #f0f0f0;
 }
+
 .rr-stamp[data-empty]:before {
   content: "[도 장]";
   white-space: nowrap;
@@ -633,9 +646,11 @@ All Rights Reserved.
   transform: translate(-50%, -50%);
   font-size: 15px;
 }
+
 .rr-stamp[data-design]:hover {
   background-color: rgba(111, 111, 0, 0.1);
 }
+
 .rr-stamp img {
   box-sizing: border-box;
   object-fit: contain;
@@ -645,9 +660,11 @@ All Rights Reserved.
 .rr-bar {
   overflow: hidden;
 }
+
 .rr-bar-bar {
   background-color: green;
 }
+
 .rr-bar-bar[data-design] {
   background-color: transparent;
 }
@@ -678,32 +695,11 @@ All Rights Reserved.
   height: 100%;
 }
 
-.rr-check {
-  display: table;
-  margin: 0;
-  padding: 1px;
-  text-align: center;
-  /** 상위에서 지정할 수 있도록 여기에 font-size를 지정하지 말 것. */
-}
-
-.rr-check-check {
-  min-width: 16px;
-  min-height: 16px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAuBJREFUeF7tmz1PIkEYx1lAqIxcdXY2JlrSWFxCArbX3AdAEvgkhx+EQAO1jcVVSsxdbWlxhSbXiyVE4P6TzCYb2J3ZedFndndISIg7uzz/3/M2Mw5BqeCvoOD6Sx6Aj4CCE/ApUPAASFcEx+NxJwiCn4DVxLvhOLQF7HvcbrfXg8HgXmarNAUgfsjFy57l3HUOYSgyTAiAe/7OOWUKBgHCpSgSZADu4f22wvc5NxQA5gDQSTJMCGAymbxmIOdl0Bf9fv+LLoCt7OlZuA4AiY6WRUAsANEDKYEgYpXt9QBEHtMh6iOAkICOw3wK+BQQENAJKcIMKOnY61MgSykwm82+rtfrw16v9zfO7lxHABO/XC7nWJvU+QLneRdCbgFExJ9x0c9xEHIJIEZ86Pg9CLkDIBAfCyFXAKbT6clqtfqFnA/DPrZeR9f7uQHAxbOCdyLqUhD/UqvV2t1u94WNIweALbRjtoGCHZgn3QmRrnhyAEw8PMb2DxvwzDdA2GtTMigm4kkBRMSfi9qUCICpeDIAMeIT21QSABviSQAIxKeGYEs8FYAb5P0PWaXG9U5cTbApngpAWPjC3E9isTdrsy2eBAD70hRpsJcOHyGeDIAqBIy/Qpucqk5yZC2UFIAihHeMr8rqRnSGl0Y8OQBFCImadqe3acU7AcAUgol4ZwDoQjAV7xSAEEK5XH6AsFNZGG82m3/1er0Vrupk45Ouk68Gdw1Di7xAtf+Nvx8IRLGi2ME/XNk4o5dzAHgkiCBYE+9cCkRdySIB6fAH6RBtf1bFOw2AGTcajVrVavWOQ7Au3nkAIYRKpXKLz99t5PxuwXCyBhhVNcWbPQB/RMafEfqcQ1KKqUk+XPuYHPr3AjO5I3IFBgag7b5hOy7xgLc/KiuCW/jD0nwuX9zj8mF0sEjA5yHeTddrAst52PnI7LXygwmD+pOJW6W/GMmECgMjPQADeLm41UdALtxoIKLwEfAfzoHaXxKUUZEAAAAASUVORK5CYII=");
-}
-
-/* .rr-check-check:before {
-    content: "\feff";
-} */
-.rr-check-check[data-checked="0"] {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAYtJREFUeF7tm+1NwzAQhuMJgE26AWWTZBLCJMkmlA26CWGC8EYK/7BNTlR3lZ9KkSqltc/PfbwX6ZK6xj+p8fN3ACACGidACjQeAH8rgtM0nVNKr4J10vUYHNoi+67rur4Nw3Cp2VpNAR1+3A9fWyvc/R3CWDKsCGD3/Hu4kx0wSBBeSpFQA3CR958P7BfupwLwIQDnnGFFAPM8f95BztegL33fP1kBrLXV7+G+AGQdXYuAXwGUFvQEoog9bC8ASh6zECUCHAlYHEYKkAIFApaQcsyAzmIvKUAKkAJ5ApacogY4ErA4jCJIEaQIUgSzBCxFxbEG0glaHIYKoAKoACqACuQIWKoqMuhIwOIwZBAZRAaRQWQQGcwQsMiKowryOGxxGH0AfQB9AH0AfcDRPsBT6ix7m8fkNCq7aFL0wbJplP9oUvRLk6LZAW9GZUuean5YeoPT9Lj8T3RskaDvo65T9Jqw5bzsvG72/ssLE1GK2a3sqL4xcquNo6wLgCie8LKDCPAiH2Xf5iPgG+zmiVBeDNNjAAAAAElFTkSuQmCC");
-}
-
-.rr-check-check[data-checked="-1"] {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAvtJREFUeF7tm7tuE0EUhrO+dLZkdzQolNRQIUWKI0RNXgCJN+AVwhvwBrxAJKCkikNDQ0kRJArTQeOLZMmWY8n8E81Ey2Z2zl4OnpPZceV4L3P+b/5zZiY7mxw0/JM0XP9BBBAd0HACMQUaboBiRXA2m50mSfIGsEb3BNh4t9u9HQ6HYypeMgUWi8V73Ow1dSOJxzWEM1dsTgC65z9IFFc0JkA4cTmBAjCG9Y+LNibxPAC4BIDc1HUCmM/nO4miysY0GAxydUYALpp5DnARLds7nOdXibeSAyIAR05x9mjZe0UH5BRt9iIYUyCmQP64WjZvOc+PNSD0GoC1ySPlGExtJzbnBO2A1Wp1uF6vL7E2wfT+ZoFzB0KwAFLiD3XPTzqdzrNer/c77YQgAVjEG81XgHCShhAcAId4K4SgAOiCp/4fYWxvHTFRDz6hHpyqg8EAKNDzBsYPpMEx0uCPCADUMFVk0lNVvHcASjzseqECyRumKAB1xHsFkBJ/M1HBZ1IWQl3x3gBYxJuOLgyBQ7wXAMvl8sF2u/2Kxk3PZ11OQuAS7wUAev8j8v6lK7eRCr9wfGSbunKK9wJAO0AVvsdEgbszdeUW7wWAarQEhNup6/8Q7w1ACoKrFhiDXHW73VebzeacmuHhgn8mOdQQ6hWAatwxGmRjv8YPXUJQafHeAZSE4NJfSbwIAAwQKosXA6AGhFriRQEwEFqt1hfMAx4WKGA/sao7Mqu6AudbTxG3HJ5Op0ftdvsCEDoOURuc87Tf73+vKtxcJw6ACkxBgBPG+Nq2CGQTLy4F0mLRM8/x9+cMBFbxogHo4NIQrmH7Jxy2z4C27mgR83BUO+EcQb9AUN/q5nz2epE1gFuk634RQOjPBik3RQfsywFUT0g7zj4KSBNIxVMZANb4IWyVvX10ZgNF7RVW2+Sbu1lar+re6XcFKKeJO157u7xRhFQY4fvZfdk5rnaIq3hZXpgQ163MAZFvjDC3J+52EYC4LtlzQNEBewYurrnGO+Avtc+eX2pOKEYAAAAASUVORK5CYII=");
+/* Check Item 스타일 */
+.rr-check-checked {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .rr-datalist[data-empty] {
@@ -737,17 +733,21 @@ All Rights Reserved.
 .rr-sign-layer {
   background-color: #00008810;
 }
+
 .rr-sign-panel {
   padding: 10px;
   border: 1px solid gray;
   background: #f8f8ff;
 }
+
 .rr-sign-panel-title {
   font-size: 1.2em;
 }
+
 .rr-sign-panel-body {
   border: 1px solid #999;
 }
+
 .rr-sign-panel button {
   padding: 4px 8px;
 }
@@ -757,12 +757,15 @@ All Rights Reserved.
   border: 1px solid gray;
   background: #f8f8ff;
 }
+
 .rr-stamp-panel-title {
   font-size: 1.2em;
 }
+
 .rr-stamp-panel-body {
   border: 1px solid #999;
 }
+
 .rr-stamp-panel button {
   padding: 4px 8px;
 }
@@ -776,7 +779,7 @@ All Rights Reserved.
 .rr-section-guard-item {
   background-color: #f5deb3;
   /* border-top: 1px solid #f0f0f0;
-    border-bottom: 1px solid #ccc; */
+border-bottom: 1px solid #ccc; */
   color: #666;
   display: flex;
   justify-content: center;
@@ -787,7 +790,7 @@ All Rights Reserved.
 .rr-section-guard-item-odd {
   background-color: #f0e6bc;
   /* border-top: 1px solid #f0f0f0;
-    border-bottom: 1px solid #ccc; */
+border-bottom: 1px solid #ccc; */
   color: #666;
   display: flex;
   justify-content: center;
@@ -804,8 +807,7 @@ All Rights Reserved.
 .rr-section-guard-item-expander {
   width: 9px;
   height: 9px;
-  background: no-repeat center/9px
-    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAYlJREFUWEftV0tugzAQjUFI7MoR4ATlBm1P0B6FLvjsQnZ8FuEo6QmSnKAcgdyALGEBfYNsiVYKkAqHDZYAC8P4zRv7jYdteAuC4LVt2y0umzFmiPdzPmG7hO0c1y6KohPZZnTzPC/Ey+2ck43ZAphdkiQh454fx36QMQ6n3xi8P6Hzwif4apomTNM0lzEhnDXheQbb72Qf/TPzfb9E/6mLB2MWYlPImFzYdF3XVhTlmwMoCUArBuM47taE7Naf898AOJ1H0GjUdW1lWUZMTmpzAaBt2y1eWkxiW01BsAJYGVgZmMSA4ziGpmnPA9uKFI1kdQP5dvC4Kd+qql76CjsJQF+ip+ztkW8KqKwlvnk4AAjWBanXvAsAhUDXdfuWZ6CdDi57nlQ+EY6hDFrcHYIx2vvniFWKVwZWBpZiwIQW0InaqKrKfPiRbEwnhsb/SvFix3KAvP4qTKDZByqZZBYmCNseYfvgEn5evjQjJIsWp2KxUHKhuhD0UAbsSjUJ7YoQ58icoagjfgCFmq0CC+pnpgAAAABJRU5ErkJggg==");
+  background: no-repeat center/9px url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAYlJREFUWEftV0tugzAQjUFI7MoR4ATlBm1P0B6FLvjsQnZ8FuEo6QmSnKAcgdyALGEBfYNsiVYKkAqHDZYAC8P4zRv7jYdteAuC4LVt2y0umzFmiPdzPmG7hO0c1y6KohPZZnTzPC/Ey+2ck43ZAphdkiQh454fx36QMQ6n3xi8P6Hzwif4apomTNM0lzEhnDXheQbb72Qf/TPzfb9E/6mLB2MWYlPImFzYdF3XVhTlmwMoCUArBuM47taE7Naf898AOJ1H0GjUdW1lWUZMTmpzAaBt2y1eWkxiW01BsAJYGVgZmMSA4ziGpmnPA9uKFI1kdQP5dvC4Kd+qql76CjsJQF+ip+ztkW8KqKwlvnk4AAjWBanXvAsAhUDXdfuWZ6CdDi57nlQ+EY6hDFrcHYIx2vvniFWKVwZWBpZiwIQW0InaqKrKfPiRbEwnhsb/SvFix3KAvP4qTKDZByqZZBYmCNseYfvgEn5evjQjJIsWp2KxUHKhuhD0UAbsSjUJ7YoQ58icoagjfgCFmq0CC+pnpgAAAABJRU5ErkJggg==");
 }
 
 .rr-section-guard-item-expander[data-folded] {
@@ -865,25 +867,22 @@ All Rights Reserved.
   background-color: #b6b6b6;
   color: #292929;
 }
-.rr-section-head.rr-band-header-head[data-design],
-.rr-section-head.rr-band-footer-head[data-design],
-.rr-section-head.rr-band-datarow-head[data-design] {
+
+.rr-section-head.rr-band-header-head[data-design], .rr-section-head.rr-band-footer-head[data-design], .rr-section-head.rr-band-datarow-head[data-design] {
   background-color: #dedede;
   color: #515151;
 }
 
-.rr-section-head[data-design][data-selected],
-.rr-section-head.rr-detailband-head[data-selected],
-.rr-section-head.rr-band-header-head[data-selected],
-.rr-section-head.rr-band-footer-head[data-selected],
-.rr-section-head.rr-band-datarow-head[data-selected] {
+.rr-section-head[data-design][data-selected], .rr-section-head.rr-detailband-head[data-selected], .rr-section-head.rr-band-header-head[data-selected], .rr-section-head.rr-band-footer-head[data-selected], .rr-section-head.rr-band-datarow-head[data-selected] {
   background-color: #3596f0;
   color: #fff;
 }
+
 .rr-section-head.rr-band-detail-head[data-design] {
   background-color: #05c88838;
   color: #4f4f4f;
 }
+
 .rr-section-head.rr-band-detail-head[data-selected] {
   background-color: #08ac80cc;
   color: #4f4f4f;
@@ -895,11 +894,12 @@ All Rights Reserved.
   color: #3a3a3a;
   border: 1px solid #3596f0;
 }
-.rr-section-head.rr-back-head,
-.rr-section-head.rr-front-head {
+
+.rr-section-head.rr-back-head, .rr-section-head.rr-front-head {
   background-color: #828282;
   color: #ffffff;
 }
+
 .rr-section-head.rr-sheet-head {
   background-color: #a2d2ff;
   color: #008;
@@ -940,10 +940,12 @@ All Rights Reserved.
 .rr-crosstab-field-cell {
   text-align: center;
 }
+
 .rr-crosstab-head {
   text-align: center;
   background-color: #f0f0f0;
 }
+
 .rr-crosstab-section-table tr td {
   position: relative;
   margin: 0 !important;
@@ -956,10 +958,12 @@ All Rights Reserved.
   color: gray;
   white-space: nowrap;
 }
+
 .rr-crosstab-field-container {
   background-color: #efefef;
   border: 1px solid lightgray;
 }
+
 .rr-crosstab-field-container[data-empty="1"]::before {
   content: "[Fields]";
   color: #040;
@@ -968,12 +972,15 @@ All Rights Reserved.
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .rr-crosstab-field {
   padding: 2px 2px;
 }
+
 .rr-crosstab-field:hover {
   background-color: #ddd;
 }
+
 .rr-crosstab-field-arrow {
   box-sizing: border-box;
   margin-left: 4px;
@@ -983,24 +990,29 @@ All Rights Reserved.
   color: #555;
   border: 1px solid transparent;
 }
+
 .rr-crosstab-field-arrow:hover {
   color: black;
   border: 1px solid #555;
   border-radius: 3px;
 }
+
 .rr-crosstab {
   font-size: 10px;
 }
+
 .rr-crosstab-head {
   padding: 2px 1px !important;
   font-size: 10px;
   text-align: center;
   background-color: "#f0f0f0";
 }
+
 .rr-crosstab-value {
   padding: 1px 1px !important;
   text-align: right;
 }
+
 .rr-crosstab-null {
   background-color: #efefef;
 }
@@ -1089,8 +1101,7 @@ All Rights Reserved.
 }
 
 /* tableband designer */
-.rr-band-designer,
-.rr-table-designer {
+.rr-band-designer, .rr-table-designer {
   padding: 0;
   border: none;
   background: white;
@@ -1098,8 +1109,7 @@ All Rights Reserved.
   overflow: hidden;
 }
 
-.rr-band-designer-title,
-.rr-table-designer-title {
+.rr-band-designer-title, .rr-table-designer-title {
   padding: 10px !important;
 }
 
@@ -1146,15 +1156,19 @@ All Rights Reserved.
   white-space: nowrap;
   cursor: pointer;
 }
+
 .rr-edit-marquee-item:hover {
   background-color: #555566ff;
 }
+
 .rr-edit-marquee-item[data-select] {
   background-color: #0088ddb0;
 }
+
 .rr-edit-marquee-item[data-focus] {
   background-color: #0044eeb0;
 }
+
 .rr-edit-marquee-item[data-cellselect] {
   background-color: #000000b0;
 }
@@ -1163,6 +1177,7 @@ All Rights Reserved.
   position: absolute;
   border-left: 1px dashed #777;
 }
+
 .rr-edit-marquee-arrow {
   position: absolute;
   width: 0;
@@ -1171,6 +1186,7 @@ All Rights Reserved.
   border-right: 4px solid transparent;
   border-bottom: 8px solid #999;
 }
+
 .rr-edit-marquee-label {
   position: absolute;
   color: #555;
@@ -1249,6 +1265,7 @@ All Rights Reserved.
   font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
   font-size: 15px;
 }
+
 .rr-excel-report-view {
   background-color: white;
   box-shadow: rgba(60, 64, 67, 0.05) 4px 4px 6px 1px;
@@ -1263,14 +1280,17 @@ All Rights Reserved.
   /* text-align: right; */
   transition: all 0.3s ease;
 }
+
 .rr-excel-item-halo-tag span {
   color: #ffbbbb80;
 }
+
 .rr-excel-item-halo:hover {
   border-color: #0088ff80;
   border-style: solid;
   color: #0088ff80;
 }
+
 .rr-excel-item-halo:hover .rr-excel-item-halo-tag span {
   color: #ffbbbb;
 }
@@ -1290,10 +1310,12 @@ All Rights Reserved.
   margin: 0 !important;
   padding: 0 !important;
 }
+
 .rr-sheet-design-table tr td {
   border: 1px solid #ddd;
   overflow: hidden;
 }
+
 .rr-sheet-design-table tr td:hover {
   background-color: rgba(0, 127, 255, 0.1);
 }
@@ -1306,15 +1328,19 @@ All Rights Reserved.
   vertical-align: top !important;
   background: #aabbff10;
 }
+
 .rr-sheet-design-table tr td[data-elock="1"], td[data-elock="1"]:hover {
   background: #aabbff20;
 }
+
 .rr-sheet-design-table tr td[data-elock="2"], td[data-elock="2"]:hover {
   background: #aabbff30;
 }
+
 .rr-sheet-design-table tr td[data-elock="3"], td[data-elock="3"]:hover {
   background: #aabbff40;
 }
+
 .rr-sheet-design-table tr td[data-elock="4"], td[data-elock="4"]:hover {
   background: #aabbff50;
 }
@@ -1367,6 +1393,7 @@ All Rights Reserved.
   padding: 0;
   background: #f8f8f8;
 }
+
 .rr-sheet-design-table tr td[data-type="image"][data-empty]:before {
   display: table;
   content: "[IMAGE]";
@@ -1379,6 +1406,7 @@ All Rights Reserved.
   top: 50%;
   transform: translateY(-50%);
 }
+
 .rr-sheet-design-table tr td[data-type="image"][data-empty] div {
   display: none;
 }
@@ -1388,6 +1416,7 @@ All Rights Reserved.
   padding: 0;
   background: #f8f8f8;
 }
+
 .rr-sheet-design-table tr td[data-type="sign"][data-empty]:before {
   display: table;
   content: "[서 명]";
@@ -1400,6 +1429,7 @@ All Rights Reserved.
   top: 50%;
   transform: translateY(-50%);
 }
+
 .rr-sheet-design-table tr td[data-type="sign"][data-empty] div {
   display: none;
 }
@@ -1409,6 +1439,7 @@ All Rights Reserved.
   padding: 0;
   background: #f8f8f8;
 }
+
 .rr-sheet-design-table tr td[data-type="stamp"][data-empty]:before {
   display: table;
   content: "[도 장]";
@@ -1421,24 +1452,24 @@ All Rights Reserved.
   top: 50%;
   transform: translateY(-50%);
 }
+
 .rr-sheet-design-table tr td[data-type="stamp"][data-empty] div {
   display: none;
 }
 
-.rr-sheet-top-header,
-.rr-sheet-corner-header,
-.rr-sheet-col-header, 
-.rr-sheet-row-header {
+.rr-sheet-top-header, .rr-sheet-corner-header, .rr-sheet-col-header, .rr-sheet-row-header {
   background: #e5e7eb;
 }
 
 .rr-sheet-header {
   border: none;
 }
+
 .rr-sheet-header tr {
   margin: 0 !important;
   padding: 0 !important;
 }
+
 .rr-sheet-header tr td:hover {
   background-color: #74aee5a8;
   color: black;
@@ -1451,6 +1482,7 @@ All Rights Reserved.
 .rr-sheet-header tr td[data-hselect] {
   background-color: #74aee5a8;
 }
+
 .rr-sheet-header tr td[data-hselect]:hover {
   background-color: #74aee5a8;
 }
@@ -1458,8 +1490,9 @@ All Rights Reserved.
 .rr-sheet-row-header {
   border-right: 1px solid #ccc;
 }
+
 .rr-sheet-rowheader tr td {
-  box-sizing: border-box; 
+  box-sizing: border-box;
   border: 1px solid #ccc;
   border-left: none;
   background-color: white;
@@ -1485,11 +1518,13 @@ All Rights Reserved.
   border-color: rgba(33, 33, 127, 0.6);
   background-color: rgba(33, 33, 127, 0.1);
 }
+
 .rr-sheet-header-select[data-row] {
   border-left-style: solid;
   border-top-style: solid;
   border-bottom-style: solid;
 }
+
 .rr-sheet-header-select[data-col] {
   border-left-style: solid;
   border-right-style: solid;
@@ -1499,63 +1534,78 @@ All Rights Reserved.
 .rr-sheet-editor-header {
   border: none;
 }
+
 .rr-sheet-editor-header tr td {
   background-color: #f0f0f0;
   border: 1px solid #aaa;
   padding: 0;
 }
+
 .rr-sheet-editor-title {
   background-color: #dde;
   box-sizing: border-box;
   border-right: 1px solid #aaa;
   border-bottom: 1px solid #aaa;
 }
+
 .rr-sheet-editor-header tr td {
   background-color: #eee;
   border-color: #aaa;
 }
+
 .rr-sheet-editor-header tr td[data-selected] {
   background-color: #77ccff40;
 }
+
 .rr-sheet-editor-colheader tr td {
   border-top: none !important;
   color: #555;
   font-size: 12px;
   text-align: center;
 }
+
 .rr-sheet-editor-colheader tr td:first-child {
-    border-left: none !important;
+  border-left: none !important;
 }
+
 .rr-sheet-editor-rowheader tr td {
   border-left: none !important;
   color: #555;
   text-align: center;
   font-size: 13px;
 }
+
 .rr-sheet-editor-rowheader tr td:first-child {
-    border-top: none;
+  border-top: none;
 }
+
 .rr-sheet-editor-header tr td:hover {
-    background-color: #0088ff40;
-    color: black;
+  background-color: #0088ff40;
+  color: black;
 }
+
 .rr-sheet-editor-table tr td {
   background-color: white;
 }
+
 .rr-sheet-editor-table tr:first-child td {
   border-top: none !important;
 }
+
 .rr-sheet-editor-table tr td:first-child {
   border-left: none !important;
 }
+
 .rr-sheet-editor-select {
   border: 2px solid #0088ff;
   background-color: #0088ff10;
 }
+
 .rr-sheet-editor-select[data-type="col"] {
   border-top: none;
   border-bottom: none;
 }
+
 .rr-sheet-editor-select[data-type="row"] {
   border-left: none;
   border-right: none;
@@ -1566,6 +1616,7 @@ All Rights Reserved.
   padding: 0;
   cursor: pointer;
 }
+
 .rr-sheet-editor-table tr td[data-type="sign"][data-empty]:before {
   display: table;
   content: "서 명";
@@ -1574,14 +1625,17 @@ All Rights Reserved.
   color: #777;
   width: 100%;
 }
+
 .rr-sheet-editor-table tr td[data-type="sign"][data-empty] div {
   display: none;
 }
+
 .rr-sheet-editor-table tr td[data-type="stamp"][data-empty] {
   margin: 0;
   padding: 0;
   cursor: pointer;
 }
+
 .rr-sheet-editor-table tr td[data-type="stamp"][data-empty]:before {
   display: table;
   content: "도 장";
@@ -1590,6 +1644,7 @@ All Rights Reserved.
   color: #777;
   width: 100%;
 }
+
 .rr-sheet-editor-table tr td[data-type="stamp"][data-empty] div {
   display: none;
 }
@@ -1619,8 +1674,9 @@ All Rights Reserved.
   border-radius : 2px;
   cursor : pointer;
 }
+
 .rr-border-svg-container:hover {
-  background: var(--rrd-light-theme-primary-color-3); 
+  background: var(--rrd-light-theme-primary-color-3);
 }
 
 .rr-border-direction-icons-container {
@@ -1638,10 +1694,11 @@ All Rights Reserved.
 
 @keyframes fade-out {
   from {
-    opacity: 1;
+      opacity: 1;
   }
+
   to {
-    opacity: 0;
+      opacity: 0;
   }
 }
 
@@ -1668,22 +1725,23 @@ All Rights Reserved.
 }
 
 .rr-confirm-dlg {
-    border: 2px solid black;
-    padding: 1rem;
+  border: 2px solid black;
+  padding: 1rem;
 }
 
 .rr-confirm-dlg p {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 .rr-confirm-dlg button {
-    padding: 1px 6px;
-    background: rgb(239, 239, 239);
-    border: 1px solid black;
-    font-size: 13px;
+  padding: 1px 6px;
+  background: rgb(239, 239, 239);
+  border: 1px solid black;
+  font-size: 13px;
 }
 
+
 /* RealChart Style */
 
 .rct-root {
@@ -3316,128 +3374,422 @@ input[data-rrproperty]::-webkit-inner-spin-button {
     outline: none;
 }
 /** hsl slider와 editor 사이에 줄이 나눠지도록 */
-.rr-color-picker::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 0;
-    order: 1;
+
+.rr-color-picker.rr-color-picker-root {
+	--color-picker-width: 240px;
+    display: flex;
+    width: var(--color-picker-width);
+    padding: 0;
+    justify-content: flex-start;
+    background-color: #fff;
+    border-radius: 10px;
 }
-.rr-color-picker-slider {
-	position: relative;
-    width: 100%;
-    margin: .5em;
-    padding: 1em;
-	background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
-    box-shadow: 0 0 0 1px silver;
-    background-color: yellow;
+
+.rr-color-picker.rr-color-picker-root::before {
+    display: none;
 }
-.rr-color-picker-slider-selector {
-	position: absolute;
-	z-index: 1;
-	display: block;
-	transform: translate(-50%, -50%);
-	border: 2px solid white;
-	border-radius: 100%;
-	box-shadow: 0 0 3px 1px #67b9ff;
-	background-color: currentColor;
+
+.rr-color-picker-header {
+	height: 40px;
+	width: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	padding-inline: 10px;
+	cursor: move;
+}
+
+.rr-color-picker-header-close {
+	width: 25px;
+	height: 25px;
+	align-items: center;
+	display: flex;
+	justify-content: center;
 	cursor: pointer;
-	padding: 1em;
-	border-radius: 2px;
+	border-radius: 3px;
+	transition: background 0.3s ease;
+	margin-top: -4px;
 }
-.rr-color-picker-hsl {
-    position: relative;
-    background-color: red;
-    /* background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), linear-gradient(to top, black, rgba(0, 0, 0, 0)); */
-    background-image: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	box-shadow: 0 0 0 1px silver;
-    margin: .5em;
-    flex: 1 1 auto;
-}
-.rr-color-picker-hsl::before {
-    content: '';
-    display: block;
-    padding-bottom: 100%;
+
+.rr-color-picker-header-close:hover {
+	background: #e6e6e6;
 }
-.rr-color-picker-hsl-selector {
-	position: absolute;
-	z-index: 1;
+
+.rr-color-picker-header-close:hover span {
+	background: #393939;
+}
+
+.rr-color-picker-header-close span {
+	width: 16px;
+	height: 1px;
+	background: #757575;
 	display: block;
-	padding: 1em;
-	transform: translate(-50%, -50%);
-	border: 2px solid white;
-	border-radius: 100%;
-	box-shadow: 0 0 3px 1px #67b9ff;
-	background-color: currentColor;
-	cursor: pointer;
+	transform-origin: center;
+	position: absolute;
 }
-.rr-color-picker-alpha-slider {
-	position: relative;
-	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgray'/%3E%3C/svg%3E") left top / contain white;
-	box-shadow: 0 0 0 1px silver;
-    margin: .5em;
-    padding: .7em;
+
+.rr-color-picker-header-close span:first-child {
+	transform: rotate(45deg);
 }
-.rr-color-picker-alpha-selector {
+
+.rr-color-picker-header-close span:last-child {
+	transform: rotate(135deg);
+}
+
+.rr-color-picker-saturation-container {
+    width: 100%;
+}
+
+.rr-color-picker-saturation-picker {
+    position: relative;
+    height: 200px;
+    background-color: red;
+}
+
+.rr-color-picker-saturation-picker-overlay {
+	width: 100%;
+	height: 100%;
 	position: absolute;
-	z-index: 1;
-	display: block;
-	transform: translate(-50%, -50%);
-	border: 2px solid white;
-	border-radius: 100%;
-	box-shadow: 0 0 3px 1px #67b9ff;
-	background-color: transparent;
-	cursor: pointer;
-	padding: 1em;
-	border-radius: 2px;
 }
-.rr-color-picker-editor {
-    order: 1;
-    width: 6.5rem;
-    margin: .5em;
+
+.rr-color-picker-saturation-picker-saturation-overlay {
+    background: linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0));
+}
+
+.rr-color-picker-saturation-picker-value-overlay {
+    background: linear-gradient(180deg,transparent 0,#000);
 }
-.rr-color-picker-editor input {
+
+.rr-color-picker-saturation-picker-color {
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
+}
+
+.rr-color-picker-dragger {
+    position: absolute;
+    z-index: 5;
+    border-radius: 100%;
+    border: 3px solid #fff;
+    background-color: currentColor;
+    box-shadow: 0 0 3px 2px rgb(99 99 99 / 20%);
+    cursor: pointer;
+    width: 15px;
+    height: 15px;
     box-sizing: border-box;
-    border: none;
-    box-shadow: 0 0 0 1px silver;
-    outline: none;
-    font-size: 1rem;
-    font-family: monospace;
-    padding: .2em .4em;
 }
-.rr-color-picker-result {
+
+.rr-color-picker-saturation-picker-dragger {
+    width: 22px;
+    height: 22px;
+    transform: translate(-50%, -50%);
+}
+
+.rr-color-picker-alpha-picker-dragger {
+    background-color: transparent;
+    transform: translateY(-1px);
+}
+
+.rr-color-picker-hsv-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 15px;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 0 0 30px 30px;
+}
+
+.rr-color-picker-hue-picker, .rr-color-picker-alpha-picker {
+    position: relative;
+    height: 15px;
+    border-radius: 10px;
+}
+
+.rr-color-picker-hue-picker {
+    background: linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);
+}
+
+.rr-color-picker-alpha-picker {
+    border: 1px solid #dadce0;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgray'/%3E%3C/svg%3E") left top / contain white;
+}
+
+.rr-color-picker-hue-container {
+    display: flex;
+    align-items: center;
+}
+
+.rr-color-picker-hue-color-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    justify-content: space-between;
+}
+
+.rr-color-picker-color-result {
     position: relative;
-    order: 1;
-    flex: 1 1 auto;
-    margin: .5em;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/contain white;
-    box-shadow: 0 0 0 1px silver;
-}
-.rr-color-picker-result::before {
-    content: '';
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    overflow: hidden;
+    border: 1px solid #e9e9e9;
+    margin-right: 9px;
+    margin-left: 3px;
+}
+
+.rr-color-picker-color-result-background {
+    width: 100%;
+    height: 100%;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgray'/%3E%3C/svg%3E");
+    background-size: 10px;
+}
+
+.rr-color-picker-color-result-color {
     position: absolute;
-    display: block;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    background: currentColor;
 }
-.rr-color-picker-ok {
-    order: 1;
-    margin: .5em;
+
+.rr-color-picker-hue-container-eye-dropper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	width: 30px;
+	height: 30px;
+	border-radius: 4px;
 }
-.rr-color-picker button {
-    box-sizing: border-box;
+
+.rr-color-picker-hue-container-eye-dropper svg {
+	color: #6b6b6b;
+}
+
+.rr-color-picker-pallete-palletes,
+.rr-color-picker-pallete-custom-colors {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    position: relative;
+    gap: 5px;
+}
+
+.rr-color-picker-pallete-palletes div,
+.rr-color-picker-pallete-custom-colors div {
+    aspect-ratio: 1 / 1;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.rr-color-picker-pallete-custom-colors div {
+	border: 1px solid #dadce0;
+}
+
+.rr-color-picker-pallete-custom-label {
+	padding-top: 13px;
+	font-size: 12px;
+	display: flex;
+	align-items: center;
+	font-weight: 600;
+	color: #717171;
+}
+
+.rr-color-picker-pallete-custom-colors {
+	padding-top: 5px;
+}
+
+.rr-color-picker-color-info {
+    display: flex;
+    height: 23px;
+    gap: 8px;
+}
+
+.rr-color-picker-color-info-inputbox {
+    display: flex;
+    border-radius: 4px;
+    background: #f5f5f5;
+    padding-inline: 4px; flex-wrap: wrap;
+}
+
+.rr-color-picker-color-info-inputbox label {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.rr-color-picker-color-info-inputbox label:not(:last-child) {
+    border-right: 1px solid #fff;
+}
+
+.rr-color-picker-color-info-inputbox label:last-child {
+    width: 50px;
+    flex: none;
+}
+
+.rr-color-picker-color-info-inputbox.none {
+    display: none;
+}
+
+.rr-color-picker-color-info-inputbox input {
+    width: 100%;
+    appearance: none;
     border: none;
-    box-shadow: 0 0 0 1px silver;
-    outline: none;
-    padding: .4em .6em;
+    background: transparent;
+    outline: none !important;
+    font-size: 11.5px;
+    padding-inline: 4px;
+    text-transform: uppercase;
+    }
+
+.rr-color-picker-color-info-select {
+    position: relative;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.rr-color-picker-color-info-select span {
+    font-size: 12px;
+    display: block;
+    width: 41px;
+    text-align: center;
+    margin-top: 2px;
+}
+
+.rr-color-picker-color-info-modal {
+    position: absolute;
+    color: #fff;
+    z-index: 1;
+    top: -7px;
+}
+
+.rr-color-picker-color-info-modal.none {
+    display: none;
+}
+
+.rr-color-picker-color-info-modal ul {
+    margin: 0;
+    width: 80px;
+    padding: 10px;
+    border-radius: 10px;
+    background: #000;
+}
+
+.rr-color-picker-color-info-modal li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    height: 24px;
+    align-items: center;
     cursor: pointer;
-    font-size: 1rem;
-    background-color: whitesmoke;
-    background-image: linear-gradient(0deg, gainsboro, transparent);
-    color: #333;
+    font-size: 13px;
+    display: flex;
+    padding-inline: 7px;
+}
+
+.rr-color-picker-color-info-modal li:not(.selected) svg {
+	visibility: hidden;
+}
+
+.rr-color-picker-color-info-modal li:hover {
+    background: var(--rrd-focus-bg-color);
+    border-radius: 5px;
+}
+
+.rr-color-picker-color-info-percent {
+    font-size: 12px;
+    padding-right: 1px;
+}
+
+.rr-color-picker-color-info-modal li svg {
+    font-size: 12px;
+    width: 22px;
+    height: 15px;
+    stroke: #fff;
+    stroke-width: 27;
+    transform: translateX(-6px);
+}
+
+.rr-color-picker-hsv-container-buttons {
+	position: relative;
+	display: flex;
+	justify-content: flex-end;
+	gap: 5px;
+	padding-top: 15px;
+}
+
+.rr-color-picker-hsv-container-buttons::before {
+	content: '';
+	position: absolute;
+	width: var(--color-picker-width);
+	height: 1px;
+	background: #ebebeb;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.rr-color-picker-hsv-container-buttons button {
+    height: 23px;
+    min-width: 64px;
+    padding: 4px 10px;
+    appearance: none;
+    background: #111;
+    color: #000;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.3;
+    border-radius: 3px;
+    background: none;
+    border: 1px solid #dadce0;
+    transition: border 0.3s ease;
+}
+
+.rr-color-picker-hsv-container-buttons button:last-child:hover {
+	border-color: #878787;
+}
+
+.rr-color-picker-hsv-container-buttons button:first-child {
+	background: var(--rrd-primary-btn-bg-hover);
+	color: #fff;
+	border: none;
+	transition: background 0.3s ease;
+}
+
+.rr-color-picker-hsv-container-buttons button:first-child:hover {
+	background: #6a6a6a
+}
+
+.rr-color-picker-pallete-eye-dropper {
+	display: flex;
+	align-items: center;
+	transition: background 0.3s ease;
+}
+
+.rr-color-picker-pallete-eye-dropper:hover {
+	background: #e7e7e7;
+}
+
+.rr-color-picker-pallete-eye-dropper svg {
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	height: auto;
+}
+
+.rr-color-picker-color-info input::-webkit-outer-spin-button,
+.rr-color-picker-color-info input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.rr-color-picker-color-info input[type='number'] {
+  -moz-appearance: textfield;
 }
 
 /* Designer Style */
@@ -4108,6 +4460,8 @@ input[data-rrproperty]::-webkit-inner-spin-button {
 .rrd-actionbar #item_bar_design_group {
   background-color: var(--rrd-light-theme-primary-color-9);
 }
+
+/* Report Type Action Item SVG 기본 스타일 */
 .rrd-actionbar .rrd-tool-button {
   width: 30px;
   height: 30px;
@@ -6803,7 +7157,7 @@ input[data-rrproperty]::-webkit-inner-spin-button {
   background: var(--rrd-light-theme-primary-color-1);
   border: none;
   border-radius: 3px;
-  box-shadow: 1px 1px 20px 2px rgb(89 89 89 / 60%);
+  box-shadow: 1px 1px 10px 3px rgb(202 202 202 / 60%);
 }
 .rr-color-picker-slider,
 .rr-color-picker-alpha-slider {