@uniai-fe/uds-primitives 0.3.16 → 0.3.18

package/src/components/table/styles/foundation.scss

@@ -1,263 +1,313 @@
-.table.table-container {
+.table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-}
-
-.table.table-container .table-native-cell.table-th,
-.table.table-container .table-native-cell.table-td {
-  vertical-align: middle;
-  background-color: var(--table-cell-background-color);
-  text-align: left;
-}
-
-// 변경: line 타입은 상/하 border 중심과 헤더/바디 높이 축을 고정한다.
-.table.table-container[data-layout="line"] .table-native-cell.table-th,
-.table.table-container[data-layout="line"] .table-native-cell.table-td {
-  // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
-  --table-cell-padding-inline: var(--table-line-cell-padding-inline);
-  --table-cell-padding-block: var(--table-line-cell-padding-block);
-  border-bottom: 1px solid var(--table-border-color);
-}
-
-.table.table-container[data-layout="line"]
-  .table-head
-  .table-native-cell.table-th {
-  height: var(--table-line-cell-height-head);
-  border-top: 1px solid var(--table-border-color);
-  background-color: var(--table-line-head-background-color);
-}
-
-.table.table-container[data-layout="line"]
-  .table-body
-  .table-native-cell.table-td,
-.table.table-container[data-layout="line"]
-  .table-foot
-  .table-native-cell.table-td {
-  height: var(--table-line-cell-height-body);
-}
-
-// 변경: line(list) 타입에서 tbody th 셀 텍스트를 600으로 고정한다.
-.table.table-container[data-layout="line"]
-  .table-body
-  .table-native-cell.table-th
-  .table-native-cell-text,
-.table.table-container[data-layout="line"]
-  .table-body
-  .table-native-cell.table-th
-  .table-cell-text {
-  font-weight: 600;
-}
-
-// 변경: line(list) 타입에서 rowspan 셀은 기본적으로 우측 경계선을 표시한다.
-.table.table-container[data-layout="line"] .table-native-cell[rowspan] {
-  border-right: 1px solid var(--table-border-color);
-}
-
-// 변경: grid 타입은 모든 셀 border와 헤더 배경을 기본 제공한다.
-.table.table-container[data-layout="grid"] .table-native-cell.table-th,
-.table.table-container[data-layout="grid"] .table-native-cell.table-td {
-  // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
-  --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
-  --table-cell-padding-block: var(--table-grid-cell-padding-block);
-  height: var(--table-grid-cell-height);
-}
-
-.table.table-container[data-layout="grid"] {
-  border-radius: var(--table-grid-border-radius);
-  // 변경: Tooltip/Popover/Dropdown clipping을 막기 위해 grid container overflow를 제거한다.
-  overflow: visible;
-  // 변경: sticky cell layering 기준점을 분리해 z-index 충돌을 줄인다.
-  isolation: isolate;
-}
-
-.table.table-container[data-layout="grid"]
-  .table-head
-  .table-native-cell.table-th {
-  background-color: var(--table-grid-head-background-color);
-}
-
-// 변경: grid 타입의 row-header(th, tbody)는 항상 전용 배경색을 유지한다.
-.table.table-container[data-layout="grid"]
-  .table-body
-  .table-native-cell.table-th {
-  background-color: var(--table-grid-row-header-background-color);
-}
-
-// 변경: grid foot의 th도 body row-header와 동일한 배경으로 유지해 sticky 겹침 시 시각 이탈을 방지한다.
-.table.table-container[data-layout="grid"]
-  .table-foot
-  .table-native-cell.table-th {
-  background-color: var(--table-grid-row-header-background-color);
-}
-
-// 변경: grid 타입 highlighted row는 row-header(th)보다 우선해 th/td 모두 blue tint를 적용한다.
-.table.table-container[data-layout="grid"]
-  .table-row[data-highlighted="true"]
-  .table-native-cell.table-th,
-.table.table-container[data-layout="grid"]
-  .table-row[data-highlighted="true"]
-  .table-native-cell.table-td {
-  background-color: var(--table-grid-row-highlight-background-color);
-}
-
-// 변경: 인라인 스타일 대신 각 row의 첫 번째 th만 sticky로 고정한다.
-.table.table-container .table-row > .table-native-cell.table-th:first-child {
-  position: sticky;
-  left: 0;
-}
-
-// 변경: sticky된 첫 번째 th가 td 위에서 안정적으로 보이도록 섹션별 z-index를 50단위로 분리한다.
-.table.table-container
-  .table-head
-  .table-row
-  > .table-native-cell.table-th:first-child {
-  z-index: 150;
-}
-
-.table.table-container
-  .table-body
-  .table-row
-  > .table-native-cell.table-th:first-child {
-  z-index: 100;
-}
-
-.table.table-container
-  .table-foot
-  .table-row
-  > .table-native-cell.table-th:first-child {
-  z-index: 50;
-}
-
-// 변경: scroll 시 index 0 컬럼의 첫 header th가 항상 최상단에 보이도록 z-index를 상향한다.
-.table.table-container
-  .table-head
-  .table-row:first-child
-  > .table-native-cell.table-th:first-child {
-  z-index: 200;
-}
-
-// 변경: sticky th와 겹치는 td 텍스트가 앞서 보이지 않도록 td를 기본 레이어로 고정한다.
-.table.table-container .table-native-cell.table-td {
-  position: relative;
-  z-index: 0;
-}
-
-// 변경: grid 코너 라운드는 cell(th/td) 자체에 직접 적용해 sticky/scroll 상황에서도 모서리 형상을 유지한다.
-.table.table-container[data-layout="grid"]
-  .table-head
-  .table-row:first-child
-  > .table-native-cell:first-child {
-  border-top-left-radius: var(--table-grid-border-radius);
-}
 
-.table.table-container[data-layout="grid"]
-  .table-head
-  .table-row:first-child
-  > .table-native-cell:last-child {
-  border-top-right-radius: var(--table-grid-border-radius);
-}
-
-.table.table-container[data-layout="grid"]
-  .table-foot
-  .table-row:last-child
-  > .table-native-cell:first-child,
-.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
-  .table-body:last-of-type
-  .table-row:last-child
-  > .table-native-cell:first-child {
-  border-bottom-left-radius: var(--table-grid-border-radius);
-}
-
-.table.table-container[data-layout="grid"]
-  .table-foot
-  .table-row:last-child
-  > .table-native-cell:last-child,
-.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
-  .table-body:last-of-type
-  .table-row:last-child
-  > .table-native-cell:last-child {
-  border-bottom-right-radius: var(--table-grid-border-radius);
-}
-
-// 변경: grid border를 native cell이 아닌 cell-content에 그려 sticky 겹침/코너 clipping을 안정화한다.
-.table.table-container[data-layout="grid"] .table-cell-content {
-  border-right: 1px solid var(--table-border-color);
-  border-bottom: 1px solid var(--table-border-color);
-}
-
-// 변경: border-top은 thead 내부 첫 row의 cell에만 적용한다.
-.table.table-container[data-layout="grid"]
-  .table-head
-  .table-row:first-child
-  > .table-native-cell
-  > .table-cell-content {
-  border-top: 1px solid var(--table-border-color);
-}
-
-.table.table-container[data-layout="grid"]
-  .table-row
-  > .table-native-cell:first-child
-  > .table-cell-content {
-  border-left: 1px solid var(--table-border-color);
-}
-
-// 변경: grid 병합(rowspan) 셀은 우측 border를 제거하고, 인접 다음 셀의 좌측 border로 경계를 표현한다.
-.table.table-container[data-layout="grid"]
-  .table-row
-  > .table-native-cell[rowspan]
-  > .table-cell-content {
-  border-right: 0;
-}
-
-.table.table-container[data-layout="grid"]
-  .table-row
-  > .table-native-cell[rowspan]
-  + .table-native-cell
-  > .table-cell-content {
-  border-left: 1px solid var(--table-border-color);
-}
-
-// 변경: 요청사항(and)에 맞춰 코너 셀의 th/td와 내부 cell-content 모두 동일 반경을 공유한다.
-
-.table.table-container[data-layout="grid"]
-  .table-row:first-child
-  > .table-native-cell:first-child
-  .table-cell-content {
-  border-top-left-radius: inherit;
-}
-
-.table.table-container[data-layout="grid"]
-  .table-row:first-child
-  > .table-native-cell:last-child
-  .table-cell-content {
-  border-top-right-radius: inherit;
-}
-
-.table.table-container[data-layout="grid"]
-  .table-foot
-  .table-row:last-child
-  > .table-native-cell:first-child
-  .table-cell-content,
-.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
-  .table-body:last-of-type
-  .table-row:last-child
-  > .table-native-cell:first-child
-  .table-cell-content {
-  border-bottom-left-radius: inherit;
-}
-
-.table.table-container[data-layout="grid"]
-  .table-foot
-  .table-row:last-child
-  > .table-native-cell:last-child
-  .table-cell-content,
-.table.table-container[data-layout="grid"]:not([data-has-footer="true"])
-  .table-body:last-of-type
-  .table-row:last-child
-  > .table-native-cell:last-child
-  .table-cell-content {
-  border-bottom-right-radius: inherit;
+  // 변경: root anchor(.table)는 고정하고, 하위 구조 selector는 :where로 specificity를 낮춘다.
+  :where(.table-native-cell) {
+    &:where(.table-th) {
+      vertical-align: middle;
+      background-color: var(--table-cell-background-color);
+      text-align: left;
+    }
+
+    &:where(.table-td) {
+      vertical-align: middle;
+      background-color: var(--table-cell-background-color);
+      text-align: left;
+      // 변경: sticky th와 겹치는 td 텍스트가 앞서 보이지 않도록 td를 기본 레이어로 고정한다.
+      position: relative;
+      z-index: 0;
+    }
+  }
+
+  &[data-layout="line"] {
+    // 변경: line 타입은 상/하 border 중심과 헤더/바디 높이 축을 고정한다.
+    :where(.table-native-cell) {
+      &:where(.table-th) {
+        // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
+        --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+        --table-cell-padding-block: var(--table-line-cell-padding-block);
+        border-bottom: 1px solid var(--table-border-color);
+      }
+
+      &:where(.table-td) {
+        --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+        --table-cell-padding-block: var(--table-line-cell-padding-block);
+        border-bottom: 1px solid var(--table-border-color);
+      }
+    }
+
+    :where(.table-head) {
+      :where(.table-native-cell) {
+        &:where(.table-th) {
+          height: var(--table-line-cell-height-head);
+          border-top: 1px solid var(--table-border-color);
+          background-color: var(--table-line-head-background-color);
+        }
+      }
+    }
+
+    :where(.table-body) {
+      :where(.table-native-cell) {
+        &:where(.table-td) {
+          height: var(--table-line-cell-height-body);
+        }
+      }
+
+      // 변경: line(list) 타입에서 tbody th 셀 텍스트를 600으로 고정한다.
+      :where(.table-native-cell) {
+        &:where(.table-th) {
+          :where(.table-native-cell-text) {
+            font-weight: 600;
+          }
+
+          :where(.table-cell-text) {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
+    :where(.table-foot) {
+      :where(.table-native-cell) {
+        &:where(.table-td) {
+          height: var(--table-line-cell-height-body);
+        }
+      }
+    }
+
+    // 변경: line(list) 타입에서 rowspan 셀은 기본적으로 우측 경계선을 표시한다.
+    :where(.table-native-cell[rowspan]) {
+      border-right: 1px solid var(--table-border-color);
+    }
+  }
+
+  &[data-layout="grid"] {
+    border-radius: var(--table-grid-border-radius);
+    // 변경: Tooltip/Popover/Dropdown clipping을 막기 위해 grid container overflow를 제거한다.
+    overflow: visible;
+    // 변경: sticky cell layering 기준점을 분리해 z-index 충돌을 줄인다.
+    isolation: isolate;
+
+    // 변경: grid 타입은 모든 셀 border와 헤더 배경을 기본 제공한다.
+    :where(.table-native-cell) {
+      &:where(.table-th) {
+        --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+        --table-cell-padding-block: var(--table-grid-cell-padding-block);
+        height: var(--table-grid-cell-height);
+      }
+
+      &:where(.table-td) {
+        --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+        --table-cell-padding-block: var(--table-grid-cell-padding-block);
+        height: var(--table-grid-cell-height);
+      }
+    }
+
+    :where(.table-head) {
+      :where(.table-native-cell) {
+        &:where(.table-th) {
+          background-color: var(--table-grid-head-background-color);
+        }
+      }
+
+      :where(.table-row:first-child) {
+        > :where(.table-native-cell:first-child) {
+          border-top-left-radius: var(--table-grid-border-radius);
+        }
+
+        > :where(.table-native-cell:last-child) {
+          border-top-right-radius: var(--table-grid-border-radius);
+        }
+      }
+    }
+
+    // 변경: grid 타입의 row-header(th, tbody)는 항상 전용 배경색을 유지한다.
+    :where(.table-body) {
+      :where(.table-native-cell) {
+        &:where(.table-th) {
+          background-color: var(--table-grid-row-header-background-color);
+        }
+      }
+    }
+
+    // 변경: grid foot의 th도 body row-header와 동일한 배경으로 유지해 sticky 겹침 시 시각 이탈을 방지한다.
+    :where(.table-foot) {
+      :where(.table-native-cell) {
+        &:where(.table-th) {
+          background-color: var(--table-grid-row-header-background-color);
+        }
+      }
+    }
+
+    // 변경: grid 타입 highlighted row는 row-header(th)보다 우선해 th/td 모두 blue tint를 적용한다.
+    :where(.table-row[data-highlighted="true"]) {
+      :where(.table-native-cell) {
+        &:where(.table-th) {
+          background-color: var(--table-grid-row-highlight-background-color);
+        }
+
+        &:where(.table-td) {
+          background-color: var(--table-grid-row-highlight-background-color);
+        }
+      }
+    }
+
+    // 변경: grid border를 native cell이 아닌 cell-content에 그려 sticky 겹침/코너 clipping을 안정화한다.
+    :where(.table-cell-content) {
+      border-right: 1px solid var(--table-border-color);
+      border-bottom: 1px solid var(--table-border-color);
+    }
+
+    // 변경: border-top은 thead 내부 첫 row의 cell에만 적용한다.
+    :where(.table-head) {
+      :where(.table-row:first-child) {
+        > :where(.table-native-cell) {
+          > :where(.table-cell-content) {
+            border-top: 1px solid var(--table-border-color);
+          }
+        }
+      }
+    }
+
+    :where(.table-row) {
+      > :where(.table-native-cell:first-child) {
+        > :where(.table-cell-content) {
+          border-left: 1px solid var(--table-border-color);
+        }
+      }
+    }
+
+    // 변경: grid 병합(rowspan) 셀은 우측 border를 제거하고, 인접 다음 셀의 좌측 border로 경계를 표현한다.
+    :where(.table-row) {
+      > :where(.table-native-cell[rowspan]) {
+        > :where(.table-cell-content) {
+          border-right: 0;
+        }
+      }
+
+      > :where(.table-native-cell[rowspan] + .table-native-cell) {
+        > :where(.table-cell-content) {
+          border-left: 1px solid var(--table-border-color);
+        }
+      }
+    }
+
+    // 변경: 요청사항(and)에 맞춰 코너 셀의 th/td와 내부 cell-content 모두 동일 반경을 공유한다.
+    :where(.table-row:first-child) {
+      > :where(.table-native-cell:first-child) {
+        :where(.table-cell-content) {
+          border-top-left-radius: inherit;
+        }
+      }
+
+      > :where(.table-native-cell:last-child) {
+        :where(.table-cell-content) {
+          border-top-right-radius: inherit;
+        }
+      }
+    }
+
+    :where(.table-foot) {
+      :where(.table-row:last-child) {
+        > :where(.table-native-cell:first-child) {
+          border-bottom-left-radius: var(--table-grid-border-radius);
+
+          :where(.table-cell-content) {
+            border-bottom-left-radius: inherit;
+          }
+        }
+
+        > :where(.table-native-cell:last-child) {
+          border-bottom-right-radius: var(--table-grid-border-radius);
+
+          :where(.table-cell-content) {
+            border-bottom-right-radius: inherit;
+          }
+        }
+      }
+    }
+  }
+
+  &[data-layout="grid"]:not([data-has-footer="true"]) {
+    :where(.table-body:last-of-type) {
+      :where(.table-row:last-child) {
+        > :where(.table-native-cell:first-child) {
+          border-bottom-left-radius: var(--table-grid-border-radius);
+
+          :where(.table-cell-content) {
+            border-bottom-left-radius: inherit;
+          }
+        }
+
+        > :where(.table-native-cell:last-child) {
+          border-bottom-right-radius: var(--table-grid-border-radius);
+
+          :where(.table-cell-content) {
+            border-bottom-right-radius: inherit;
+          }
+        }
+      }
+    }
+  }
+
+  // 변경: 인라인 스타일 대신 각 row의 첫 번째 th만 sticky로 고정한다.
+  :where(.table-row) {
+    > :where(.table-native-cell:first-child):where(.table-th) {
+      position: sticky;
+      left: 0;
+    }
+  }
+
+  // 변경: sticky된 첫 번째 th가 td 위에서 안정적으로 보이도록 섹션별 z-index를 50단위로 분리한다.
+  :where(.table-head) {
+    :where(.table-row) {
+      > :where(.table-native-cell:first-child):where(.table-th) {
+        z-index: 150;
+      }
+    }
+  }
+
+  :where(.table-body) {
+    :where(.table-row) {
+      > :where(.table-native-cell:first-child):where(.table-th) {
+        z-index: 100;
+      }
+    }
+  }
+
+  :where(.table-foot) {
+    :where(.table-row) {
+      > :where(.table-native-cell:first-child):where(.table-th) {
+        z-index: 50;
+      }
+    }
+  }
+
+  // 변경: scroll 시 index 0 컬럼의 첫 header th가 항상 최상단에 보이도록 z-index를 상향한다.
+  :where(.table-head) {
+    :where(.table-row:first-child) {
+      > :where(.table-native-cell:first-child):where(.table-th) {
+        z-index: 200;
+      }
+    }
+  }
+
+  // 변경: footer(table-foot) 내부 셀 콘텐츠 타이포를 body와 동일한 td 스케일로 고정한다.
+  :where(.table-foot .table-cell-content) {
+    color: var(--table-td-text-color);
+    font-size: var(--table-td-text-size);
+    font-weight: var(--table-td-text-weight);
+    line-height: var(--table-td-text-line-height);
+  }
+
+  :where(.table-foot .table-cell-text) {
+    color: var(--table-td-text-color);
+    font-size: var(--table-td-text-size);
+    font-weight: var(--table-td-text-weight);
+    line-height: var(--table-td-text-line-height);
+  }
 }
 
 // 변경: optional scroll 래퍼를 통해 필요한 화면에서만 스크롤 레이어를 분리한다.
@@ -281,18 +331,24 @@
 }
 
 // 변경: tag selector 대신 className selector로 텍스트 스타일 적용 범위를 고정한다.
-.table-native-cell.table-th .table-native-cell-text {
-  color: var(--table-th-text-color);
-  font-size: var(--table-th-text-size);
-  font-weight: var(--table-th-text-weight);
-  line-height: var(--table-th-text-line-height);
-}
-
-.table-native-cell.table-td .table-native-cell-text {
-  color: var(--table-td-text-color);
-  font-size: var(--table-td-text-size);
-  font-weight: var(--table-td-text-weight);
-  line-height: var(--table-td-text-line-height);
+:where(.table-native-cell) {
+  &:where(.table-th) {
+    .table-native-cell-text {
+      color: var(--table-th-text-color);
+      font-size: var(--table-th-text-size);
+      font-weight: var(--table-th-text-weight);
+      line-height: var(--table-th-text-line-height);
+    }
+  }
+
+  &:where(.table-td) {
+    .table-native-cell-text {
+      color: var(--table-td-text-color);
+      font-size: var(--table-td-text-size);
+      font-weight: var(--table-td-text-weight);
+      line-height: var(--table-td-text-line-height);
+    }
+  }
 }
 
 // Cell 콘텐츠 래퍼는 다양한 입력 컴포넌트 정렬을 위한 공통 슬롯이다.
@@ -381,12 +437,14 @@
   margin: 0;
 }
 
-// 변경: Cell 슬롯 텍스트도 className selector로 기본 타이포를 동일하게 맞춘다.
-.table-cell-content .table-cell-text {
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
+// 변경: Cell 슬롯 기본 텍스트 inherit는 저특이성(:where)으로 두어 section 토큰 규칙이 우선되게 한다.
+:where(.table-cell-content) {
+  :where(.table-cell-text) {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
 }
 
 // 변경: Cell.alignX/alignY로 콘텐츠 정렬을 제어한다.
@@ -487,11 +545,15 @@
 }
 
 // 변경: section 기반 Cell 텍스트는 native cell 토큰과 동일한 스케일을 따르게 한다.
-.table-cell.table-head-cell .table-cell-text {
-  color: var(--table-th-text-color);
-  font-size: var(--table-th-text-size);
-  font-weight: var(--table-th-text-weight);
-  line-height: var(--table-th-text-line-height);
+:where(.table-cell) {
+  &:where(.table-head-cell) {
+    .table-cell-text {
+      color: var(--table-th-text-color);
+      font-size: var(--table-th-text-size);
+      font-weight: var(--table-th-text-weight);
+      line-height: var(--table-th-text-line-height);
+    }
+  }
 }
 
 // 변경: table priority input/select는 size와 무관하게 table body 텍스트 스케일(15px)을 사용한다.
@@ -511,35 +573,47 @@
 }
 
 // 변경: radio 라벨은 section 타이포를 따른다(head 13px / body-foot 15px).
-.table-cell.table-head-cell .radio-label-text {
-  color: var(--table-th-text-color);
-  font-size: var(--table-th-text-size);
-  font-weight: var(--table-th-text-weight);
-  line-height: var(--table-th-text-line-height);
-}
-
-.table-cell.table-body-cell .table-cell-text,
-.table-cell.table-foot-cell .table-cell-text {
-  color: var(--table-td-text-color);
-  font-size: var(--table-td-text-size);
-  font-weight: var(--table-td-text-weight);
-  line-height: var(--table-td-text-line-height);
-}
-
-// 변경: footer(table-foot) 내부 셀 콘텐츠 타이포를 body와 동일한 td 스케일로 고정한다.
-.table.table-container .table-foot .table-cell-content,
-.table.table-container .table-foot .table-cell-text {
-  color: var(--table-td-text-color);
-  font-size: var(--table-td-text-size);
-  font-weight: var(--table-td-text-weight);
-  line-height: var(--table-td-text-line-height);
-}
-
-// 변경: Cell(body/foot) 컨텍스트에서는 table priority input/select 텍스트를 15px 축으로 강제한다.
-.table-cell.table-body-cell .radio-label-text,
-.table-cell.table-foot-cell .radio-label-text {
-  color: var(--table-td-text-color);
-  font-size: var(--table-td-text-size);
-  font-weight: var(--table-td-text-weight);
-  line-height: var(--table-td-text-line-height);
+:where(.table-cell) {
+  &:where(.table-head-cell) {
+    .radio-label-text {
+      color: var(--table-th-text-color);
+      font-size: var(--table-th-text-size);
+      font-weight: var(--table-th-text-weight);
+      line-height: var(--table-th-text-line-height);
+    }
+  }
+
+  &:where(.table-body-cell) {
+    .table-cell-text {
+      color: var(--table-td-text-color);
+      font-size: var(--table-td-text-size);
+      font-weight: var(--table-td-text-weight);
+      line-height: var(--table-td-text-line-height);
+    }
+
+    // 변경: Cell(body/foot) 컨텍스트에서는 table priority input/select 텍스트를 15px 축으로 강제한다.
+    .radio-label-text {
+      color: var(--table-td-text-color);
+      font-size: var(--table-td-text-size);
+      font-weight: var(--table-td-text-weight);
+      line-height: var(--table-td-text-line-height);
+    }
+  }
+
+  &:where(.table-foot-cell) {
+    .table-cell-text {
+      color: var(--table-td-text-color);
+      font-size: var(--table-td-text-size);
+      font-weight: var(--table-td-text-weight);
+      line-height: var(--table-td-text-line-height);
+    }
+
+    // 변경: Cell(body/foot) 컨텍스트에서는 table priority input/select 텍스트를 15px 축으로 강제한다.
+    .radio-label-text {
+      color: var(--table-td-text-color);
+      font-size: var(--table-td-text-size);
+      font-weight: var(--table-td-text-weight);
+      line-height: var(--table-td-text-line-height);
+    }
+  }
 }