gnui 1.2.20 → 1.2.21

package/styleguide/assets/styles/nac.css

@@ -560,6 +560,14 @@ table th{
   justify-content:space-between !important;
 }
 
+.is-text-link{
+  color:#00327b !important;
+}
+.is-text-link:hover{
+  text-decoration:underline;
+  cursor:pointer;
+}
+
 .has-text-ellipsis{
   white-space:nowrap;
   overflow:hidden;
@@ -4309,6 +4317,9 @@ span.gn-highlight{
 .gn-checks.is-no-padding{
   padding:0;
 }
+.gn-checks.is-no-padding > input[type=checkbox] + label{
+  padding:0;
+}
 .gn-checks.is-disabled{
   cursor:not-allowed;
 }
@@ -5634,6 +5645,54 @@ span.gn-highlight{
   flex-shrink:0;
   text-align:right;
 }
+.gn-field > .gn-label.is-1{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-1 + .gn-control{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-2{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-2 + .gn-control{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-3{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-3 + .gn-control{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-4{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-4 + .gn-control{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-5{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-5 + .gn-control{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-6{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-6 + .gn-control{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-7{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-7 + .gn-control{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-8{
+  flex-grow:8;
+}
+.gn-field > .gn-label.is-8 + .gn-control{
+  flex-grow:0;
+}
 .gn-field > .gn-control{
   flex:5 1 0px;
   flex-basis:0;
@@ -9474,6 +9533,91 @@ span.gn-highlight{
 .gn-datagrid.is-headless .gn-datagrid-body-row:first-child{
   border-top:0;
 }
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row{
+  border-top:0;
+  border-bottom:1px solid #bebebe;
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:1px solid #bebebe;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-row.is-horizontal{
+  grid-template-columns:1fr !important;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell.is-horizontal{
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+  min-height:2.5rem;
+  border-right:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .gn-datagrid-cell,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-sortDir,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-handle{
+  display:none;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body{
+  display:grid;
+  gap:0;
+  align-items:start;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row{
+  display:block;
+  box-sizing:border-box;
+  border-top:0;
+  border-right:1px solid #bebebe;
+  border-bottom:1px solid #bebebe;
+  border-left:0;
+  overflow:hidden;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-col{
+  border-left:1px solid #bebebe;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  min-height:calc(20px + 1.1rem);
+  padding:0.55rem;
+  border-bottom:1px solid rgba(190, 190, 190, 0.45);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-left,
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-right{
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-nodata{
+  grid-column:1/-1;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-cell{
+  display:flex;
+  flex-direction:column;
+  gap:0.25rem;
+  padding:0.55rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-cell-label{
+  color:#535353;
+  font-size:0.875em;
+  font-weight:600;
+}
+.gn-datagrid.is-horizontal .btn-container{
+  min-height:3rem;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-body-row{
+  border:1px solid #bebebe;
+}
 .gn-datagrid .gn-datagrid-header-cell{
   border-right:1px solid #bebebe;
   padding:0.55rem;

package/styleguide/assets/styles/ztnac.css

@@ -586,6 +586,14 @@ table th{
   justify-content:space-between !important;
 }
 
+.is-text-link{
+  color:hsl(217, 71%, 53%) !important;
+}
+.is-text-link:hover{
+  text-decoration:underline;
+  cursor:pointer;
+}
+
 .has-text-ellipsis{
   white-space:nowrap;
   overflow:hidden;
@@ -4565,6 +4573,9 @@ span.gn-highlight{
 .gn-checks.is-no-padding{
   padding:0;
 }
+.gn-checks.is-no-padding > input[type=checkbox] + label{
+  padding:0;
+}
 .gn-checks.is-disabled{
   cursor:not-allowed;
 }
@@ -5970,6 +5981,54 @@ span.gn-highlight{
   flex-shrink:0;
   text-align:right;
 }
+.gn-field > .gn-label.is-1{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-1 + .gn-control{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-2{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-2 + .gn-control{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-3{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-3 + .gn-control{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-4{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-4 + .gn-control{
+  flex-grow:4;
+}
+.gn-field > .gn-label.is-5{
+  flex-grow:5;
+}
+.gn-field > .gn-label.is-5 + .gn-control{
+  flex-grow:3;
+}
+.gn-field > .gn-label.is-6{
+  flex-grow:6;
+}
+.gn-field > .gn-label.is-6 + .gn-control{
+  flex-grow:2;
+}
+.gn-field > .gn-label.is-7{
+  flex-grow:7;
+}
+.gn-field > .gn-label.is-7 + .gn-control{
+  flex-grow:1;
+}
+.gn-field > .gn-label.is-8{
+  flex-grow:8;
+}
+.gn-field > .gn-label.is-8 + .gn-control{
+  flex-grow:0;
+}
 .gn-field > .gn-control{
   flex:5 1 0px;
   flex-basis:0;
@@ -7229,7 +7288,7 @@ span.gn-highlight{
   box-shadow:0 0 0 0.1em rgba(241.077, 70.023, 104.2338, 0.7);
 }
 .gn-multitext .gn-tab{
-  margin-bottom:2px;
+  margin-bottom:0;
 }
 .gn-multitext .gn-tab a{
   padding:calc(0.5em - 1px) calc(0.75em - 1px);
@@ -10058,6 +10117,91 @@ span.gn-highlight{
 .gn-datagrid.is-headless .gn-datagrid-body-row:first-child{
   border-top:0;
 }
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row{
+  border-top:0;
+  border-bottom:1px solid hsl(0, 0%, 86%);
+}
+.gn-datagrid.is-horizontal.is-headless .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:1px solid hsl(0, 0%, 86%);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-row.is-horizontal{
+  grid-template-columns:1fr !important;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell.is-horizontal{
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+  min-height:2.5rem;
+  border-right:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .gn-datagrid-cell,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-sortDir,
+.gn-datagrid.is-horizontal .gn-datagrid-header-cell .is-handle{
+  display:none;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body{
+  display:grid;
+  gap:0;
+  align-items:start;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row{
+  display:block;
+  box-sizing:border-box;
+  border-top:0;
+  border-right:1px solid hsl(0, 0%, 86%);
+  border-bottom:1px solid hsl(0, 0%, 86%);
+  border-left:0;
+  overflow:hidden;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-col{
+  border-left:1px solid hsl(0, 0%, 86%);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-horizontal-first-row{
+  border-top:0;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  min-height:calc(20px + 1.1rem);
+  padding:0.55rem;
+  border-bottom:1px solid rgba(219.3, 219.3, 219.3, 0.45);
+}
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-left,
+.gn-datagrid.is-horizontal .gn-datagrid-card-header-right{
+  display:flex;
+  align-items:center;
+  gap:0.5rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-row.is-nodata{
+  grid-column:1/-1;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-body-cell{
+  display:flex;
+  flex-direction:column;
+  gap:0.25rem;
+  padding:0.55rem;
+}
+.gn-datagrid.is-horizontal .gn-datagrid-cell-label{
+  color:hsl(0, 0%, 21%);
+  font-size:0.875em;
+  font-weight:600;
+}
+.gn-datagrid.is-horizontal .btn-container{
+  min-height:3rem;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-contents{
+  border:0;
+}
+.gn-datagrid.is-horizontal.has-horizontal-gap .gn-datagrid-body-row{
+  border:1px solid hsl(0, 0%, 86%);
+}
 .gn-datagrid .gn-datagrid-header-cell{
   border-right:1px solid hsl(0, 0%, 86%);
   padding:0.55rem;

package/styleguide/category/COLOR/index.html

@@ -148,7 +148,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Alert(js)/index.html

@@ -410,7 +410,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Bignumber/index.html

@@ -261,7 +261,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Breadcrumb/index.html

@@ -316,7 +316,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Calendar(js)/index.html

@@ -234,7 +234,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Card/index.html

@@ -176,7 +176,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Chart(js)/index.html

@@ -547,7 +547,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Datagrid(js)/index.html

@@ -152,9 +152,13 @@
   <div class="new-grid2"></div>
 </div>
 
-<div style="width: 100%; height: 350px; overflow-x: auto; margin-top: 20px;">
+<div style="width: 100%; overflow-x: auto; margin-top: 20px;">
   <div class="new-grid3"></div>
 </div>
+
+<div style="width: 100%; margin-top: 20px;">
+  <div class="new-grid4"></div>
+</div>
 </div>
 
 <pre><code class="language-ejs"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
@@ -163,9 +167,13 @@
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >350</span>px<span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >overflow-x</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
   <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span><span class="token style-attr language-css" ><span class="token attr-name" > <span class="token attr-name" >style</span></span><span class="token punctuation" >="</span><span class="token attr-value" ><span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span> <span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span></span><span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
+  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>new-grid4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
+<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
 </code></pre>
 <pre><code>Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
   target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid'</span><span class="token punctuation" >,</span>
@@ -459,8 +467,73 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
     console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation" >(</span>updatedData<span class="token punctuation" >)</span>
   }
 }<span class="token punctuation" >)</span>
+Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'datagrid'</span><span class="token punctuation" >,</span> {
+  target<span class="token punctuation" >:</span> <span class="token string" >'.new-grid4'</span><span class="token punctuation" >,</span>
+  orientation<span class="token punctuation" >:</span> <span class="token string" >'horizontal'</span><span class="token punctuation" >,</span>
+  orientationOptions<span class="token punctuation" >:</span> {
+    columns<span class="token punctuation" >:</span> <span class="token string" >'auto-fit'</span><span class="token punctuation" >,</span>
+    minWidth<span class="token punctuation" >:</span> <span class="token string" >'240px'</span>
+  }<span class="token punctuation" >,</span>
+  hasHeader<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasCheck<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  hasDelete<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
+  headers<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'이름'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'name'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'부서'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'team'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      label<span class="token punctuation" >:</span> <span class="token string" >'상태'</span><span class="token punctuation" >,</span>
+      key<span class="token punctuation" >:</span> <span class="token string" >'status'</span><span class="token punctuation" >,</span>
+      template<span class="token punctuation" >:</span> function <span class="token punctuation" >(</span>k<span class="token punctuation" >,</span> d<span class="token punctuation" >)</span> {
+        return <span class="token string" >'&lt;span class="tag is-info">'</span> <span class="token operator" >+</span> d<span class="token punctuation" >[</span>k<span class="token punctuation" >]</span> <span class="token operator" >+</span> <span class="token string" >'&lt;/span>'</span><span class="token comment" spellcheck="true">;</span>
+      }
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  data<span class="token punctuation" >:</span> <span class="token punctuation" >[</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'홍길동'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'플랫폼개발'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'ACTIVE'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'김철수'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'디자인시스템'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'PENDING'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'이영희'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'QA'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'DONE'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'박민수'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'프론트엔드'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'ACTIVE'</span>
+    }<span class="token punctuation" >,</span>
+    {
+      name<span class="token punctuation" >:</span> <span class="token string" >'최지우'</span><span class="token punctuation" >,</span>
+      team<span class="token punctuation" >:</span> <span class="token string" >'서비스기획'</span><span class="token punctuation" >,</span>
+      status<span class="token punctuation" >:</span> <span class="token string" >'REVIEW'</span>
+    }
+  <span class="token punctuation" >]</span><span class="token punctuation" >,</span>
+  textSets<span class="token punctuation" >:</span> {
+    deleteConfirmMessage<span class="token punctuation" >:</span> <span class="token string" >'카드를 삭제하시겠습니까?'</span>
+  }
+}<span class="token punctuation" >)</span>
 
-</code></pre><table class="gn-table is-full is-border">
+</code></pre><h3 id="-">가로 모드 동작</h3>
+<ul>
+<li><code>orientation: &#39;horizontal&#39;</code>은 최상위 row만 카드형으로 렌더링한다.</li>
+<li><code>childField</code> 기반 하위 데이터는 가로 모드에서 렌더링하지 않는다.</li>
+<li><code>orientationOptions.columns: &#39;auto-fit&#39;</code>이고 <code>gap</code>이 <code>0</code>, <code>&#39;0&#39;</code>, <code>&#39;0px&#39;</code>, <code>&#39;&#39;</code> 또는 미지정이면 내부적으로 <code>5px</code> gap을 적용한다.</li>
+<li>카드 경계 연결 규칙은 <code>gap: 0</code>일 때만 적용되며, <code>gap &gt; 0</code>이면 각 카드가 독립 border를 가진다.</li>
+</ul>
+<table class="gn-table is-full is-border">
   <thead>
     <th colspan="2">name</th>
     <th>type</th>
@@ -594,7 +667,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td colspan="2">childField</td>
       <td>string</td>
       <td>child</td>
-      <td>자식 데이터를 가지고 있는 항목 키값</td>
+      <td>자식 데이터를 가지고 있는 항목 키값. 세로 모드에서만 트리형 하위 row 렌더링에 사용된다.</td>
     </tr>
     <tr>
       <td colspan="2">hasCheck</td>
@@ -620,6 +693,31 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>true</td>
       <td>헤더 생성 여부</td>
     </tr>
+    <tr>
+      <td colspan="2">orientation</td>
+      <td>&#39;vertical&#39; | &#39;horizontal&#39;</td>
+      <td>&#39;vertical&#39;</td>
+      <td>그리드 출력 방향. <code>horizontal</code>이면 최상위 row만 카드형으로 출력하며 <code>childField</code> 기반 하위 데이터는 렌더링하지 않는다.</td>
+    </tr>
+    <tr>
+      <td rowspan="3">orientationOptions</td>
+      <td>columns</td>
+      <td>number | &#39;auto-fit&#39;</td>
+      <td>1</td>
+      <td>가로 모드 카드 열 수 또는 자동 배치 방식. <code>orientation: &#39;horizontal&#39;</code>일 때 적용된다. <code>auto-fit</code>은 실제 줄 배치를 브라우저가 결정한다.</td>
+    </tr>
+    <tr>
+      <td>gap</td>
+      <td>number | string</td>
+      <td>0</td>
+      <td>가로 모드 카드 간격. CSS grid <code>gap</code> 값으로 적용된다. <code>columns: &#39;auto-fit&#39;</code>일 때는 0 계열 값 또는 미지정이면 내부적으로 <code>5px</code>를 적용한다. <code>gap: 0</code>일 때만 카드 경계 연결 규칙을 사용한다.</td>
+    </tr>
+    <tr>
+      <td>minWidth</td>
+      <td>number | string</td>
+      <td>240</td>
+      <td><code>columns: &#39;auto-fit&#39;</code>일 때 사용할 최소 카드 폭.</td>
+    </tr>
     <tr>
       <td colspan="2">readonly</td>
       <td>boolean</td>
@@ -748,22 +846,22 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
     <tr>
       <td>addChild(index: number, data: Array<any>)</td>
       <td>void</td>
-      <td>index번째 row의 child로 data를 추가한다.</td>
+      <td>index번째 row의 child로 data를 추가한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>addRow(data: Array<any>)</td>
       <td>void</td>
-      <td>마지막 데이터 하단에 data를 추가한다.</td>
+      <td>마지막 데이터 하단에 data를 추가한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>expand(index: number)</td>
       <td>void</td>
-      <td>index번째  row의 child를 확장한다. </td>
+      <td>index번째 row의 child를 확장한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>collapse(index: number)</td>
       <td>void</td>
-      <td>index번째 row의 child 데이터를 축소한다. </td>
+      <td>index번째 row의 child 데이터를 축소한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>getChecked()</td>
@@ -781,9 +879,9 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
       <td>파라메터 배열에 전달된 key에 해당하는 컬럼만 보여준다</td>
     </tr>
     <tr>
-      <td>showDetail(index: number, headerKeys?: string[])</td>
+      <td>showDetail(index: number, headerKeys?: string[], rawDataKeys?: string[])</td>
       <td>void</td>
-      <td>headerKeys로 넘겨진 항목들의 상세정보를 하단에 표시한다. headerKeys가 없는 경우 전체 항목 표시한다.</td>
+      <td>headerKeys로 넘겨진 항목들의 상세정보를 하단에 표시한다. rawDataKeys를 넘기면 원본 데이터도 함께 표시한다. 세로 모드에서만 지원한다.</td>
     </tr>
     <tr>
       <td>showAll()</td>
@@ -803,7 +901,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Datalist(js)/index.html

@@ -463,7 +463,7 @@ Gn<span class="token punctuation" >.</span><span class="token function" >create<
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/Growl(js)/index.html

@@ -343,7 +343,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>

package/styleguide/category/COMPONENT/JsonView(js)/index.html

@@ -1126,7 +1126,7 @@
 </div>
 
  
-          <footer class="aigis-footer">Last update at 2026/02/04 13:16</footer>
+          <footer class="aigis-footer">Last update at 2026/04/23 04:53</footer>
         </div>
       </div>
     </div>