@rchemist/listgrid 0.2.6

package/dist/styles/components.css

@@ -0,0 +1,1404 @@
+/*
+ * @rchemist/listgrid components stylesheet (Phase 7 split).
+ *
+ * Component-specific styles that don't fit the structural `layouts.css`
+ * bucket — buttons, modals, dropdowns, specialty cell renderers, tabs,
+ * spinners/skeletons, and legacy component chrome. Loaded AFTER layouts.css
+ * and BEFORE base.css so global resets/utilities still win by cascade order.
+ */
+
+/* BEGIN — unlayered (see top comment for rationale) */
+/* ------------------------------------------------------------------ *
+     * Button icon helper (sits inside rcm-button primitive — defined in
+     * primitives.css alongside all other rcm-button variant rules).
+     * ------------------------------------------------------------------ */
+/* Small icon used inside rcm-button (download/upload/trash/plus icons) */
+.rcm-btn-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-right: var(--rcm-space-xs);
+  margin-bottom: 2px;
+}
+
+/* Inline SubCollection row의 action 버튼 그룹 (센터 정렬) */
+.rcm-inline-action-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rcm-space-xs);
+}
+
+.rcm-is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Inline SubCollection의 tooltip 설명 영역 */
+.rcm-inline-subcollection-tooltip {
+  margin-bottom: var(--rcm-space-sm);
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text-muted);
+}
+
+/* ------------------------------------------------------------------ *
+     * ManyToOne / Link addon buttons (input group 우측 관리 / 찾기 / 외부 링크)
+     * ------------------------------------------------------------------ */
+.rcm-m2o-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rcm-space-xs);
+  height: 100%;
+  min-width: 80px;
+  padding: 0 var(--rcm-space-md);
+  font-size: var(--rcm-font-size-sm);
+  font-weight: var(--rcm-font-weight-semibold);
+  white-space: nowrap;
+  color: var(--rcm-color-secondary-text);
+  background: var(--rcm-color-secondary);
+  border: var(--rcm-border-width) solid var(--rcm-color-secondary);
+  border-left: 0;
+  border-top-right-radius: var(--rcm-radius-md);
+  border-bottom-right-radius: var(--rcm-radius-md);
+  cursor: pointer;
+  transition: background var(--rcm-transition-fast);
+}
+
+.rcm-m2o-action-btn:hover {
+  background: var(--rcm-color-secondary-hover);
+  border-color: var(--rcm-color-secondary-hover);
+}
+
+.rcm-m2o-addon {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: var(--rcm-color-surface-muted);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-left: 0;
+  color: var(--rcm-color-secondary);
+}
+
+/* ManyToOne / Link input wrapper (container around input within input-group-full-relative) */
+.rcm-m2o-input-wrap {
+  display: flex;
+  width: 100%;
+}
+
+/* ManyToOne input — left side of input+addon group (flat right, padding-right for icon space) */
+.rcm-m2o-input {
+  width: 100%;
+  min-width: 100%;
+  font-weight: var(--rcm-font-weight-normal);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+  padding-right: 2.5rem;
+  cursor: pointer;
+}
+
+.rcm-m2o-input:disabled,
+.rcm-m2o-input[readonly] {
+  cursor: pointer;
+}
+
+/* LinkField input — same grouped shape (flat right, no right border) when paired with addon */
+.rcm-link-input-grouped {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+.rcm-m2o-addon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2rem;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+}
+
+.rcm-m2o-addon-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.rcm-m2o-action-btn:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+.rcm-m2o-action-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.rcm-m2o-dropdown-list {
+  min-width: 120px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.rcm-m2o-dropdown-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--rcm-space-sm);
+  padding: var(--rcm-space-sm) var(--rcm-space-lg);
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: background var(--rcm-transition-fast);
+}
+
+.rcm-m2o-dropdown-item:hover {
+  background: var(--rcm-color-surface-hover);
+}
+
+/* Link field 우측 외부 이동 버튼 (smaller than m2o action) */
+.rcm-link-button {
+  min-width: 40px;
+  padding: 0 var(--rcm-space-sm);
+}
+
+/* ManyToOne 값 우측 외부 링크 아이콘 (getManyToOneLink — FieldRendererHelper.tsx)
+     * Replaces Tailwind `mb-2` + icon `text-secondary h-4 w-4 ml-1`.
+     * Icon itself uses rcm-icon primitive (size/tone via data-attr). */
+.rcm-m2o-external-link {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--rcm-space-xs);
+  margin-bottom: var(--rcm-space-sm);
+}
+
+/* input group 우측 addon 버튼 공통 shape */
+.rcm-input-addon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rcm-space-xs);
+  height: 100%;
+  white-space: nowrap;
+  color: var(--rcm-color-primary-text);
+  background: var(--rcm-color-text-muted);
+  border: var(--rcm-border-width) solid var(--rcm-color-text-muted);
+  border-left: 0;
+  border-top-right-radius: var(--rcm-radius-md);
+  border-bottom-right-radius: var(--rcm-radius-md);
+  cursor: pointer;
+  transition: background var(--rcm-transition-fast);
+}
+
+.rcm-input-addon-btn:hover {
+  background: color-mix(in srgb, var(--rcm-color-text-muted) 85%, black);
+}
+
+.rcm-input-addon-btn:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+/* ------------------------------------------------------------------ *
+     * Select / ManyToOne loading placeholder
+     * ------------------------------------------------------------------ */
+.rcm-select-loading-wrapper {
+  white-space: nowrap;
+}
+
+.rcm-select-loading {
+  display: flex;
+  align-items: center;
+  gap: var(--rcm-space-sm);
+  height: var(--rcm-size-input-height);
+  padding: 0 var(--rcm-space-md);
+  background: var(--rcm-color-surface-muted);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-radius: var(--rcm-radius-md);
+}
+
+.rcm-select-loading-spinner {
+  width: 1rem;
+  height: 1rem;
+  color: var(--rcm-color-text-disabled);
+  animation: rcm-spin 1s linear infinite;
+}
+
+@keyframes rcm-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rcm-spinner-track {
+  opacity: 0.25;
+}
+.rcm-spinner-head {
+  opacity: 0.75;
+}
+
+.rcm-select-loading-text {
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text-disabled);
+}
+
+/* Inline expanded row 의 확장 셀 (리스트에서 row 클릭시 펼쳐지는 패널) */
+.rcm-row-expansion-cell {
+  padding: var(--rcm-space-sm);
+  background: var(--rcm-color-surface-muted);
+  overflow: hidden;
+}
+
+/* ------------------------------------------------------------------ *
+     * Boolean field value (예/아니오 + 아이콘 프레임)
+     * ------------------------------------------------------------------ */
+.rcm-bool-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rcm-space-sm);
+  color: var(--rcm-color-text);
+}
+
+/* bool/num/date icon-frame + icon + label classes removed in Phase 6 — JSX now uses
+     * rcm-icon-frame / rcm-icon / rcm-text primitives with data-attr variants. */
+
+.rcm-num-value {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--rcm-font-weight-medium);
+}
+
+.rcm-num-value-emphasis {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--rcm-font-weight-semibold);
+}
+
+/* ------------------------------------------------------------------ *
+     * ManyToOne Multi-select (filter chips + add button)
+     * ------------------------------------------------------------------ */
+.rcm-m2o-multi-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-sm);
+  width: 100%;
+}
+
+.rcm-m2o-multi-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  min-height: 2rem;
+}
+
+.rcm-m2o-multi-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rcm-space-xs);
+  padding: 0.25rem 0.625rem;
+  background: color-mix(in srgb, var(--rcm-color-primary) 10%, transparent);
+  color: var(--rcm-color-primary);
+  border: var(--rcm-border-width) solid
+    color-mix(in srgb, var(--rcm-color-primary) 20%, transparent);
+  border-radius: 9999px;
+  font-size: var(--rcm-font-size-sm);
+}
+
+.rcm-m2o-multi-chip-label {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rcm-m2o-multi-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 9999px;
+  color: inherit;
+  cursor: pointer;
+  transition: background var(--rcm-transition-fast);
+}
+
+.rcm-m2o-multi-chip-remove:hover {
+  background: color-mix(in srgb, var(--rcm-color-primary) 20%, transparent);
+}
+
+.rcm-m2o-multi-chip-remove-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.rcm-m2o-multi-add {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rcm-space-xs);
+  padding: 0.25rem 0.625rem;
+  background: transparent;
+  border: var(--rcm-border-width) dashed var(--rcm-color-border-hover);
+  border-radius: 9999px;
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text-muted);
+  cursor: pointer;
+  transition:
+    color var(--rcm-transition-fast),
+    border-color var(--rcm-transition-fast);
+}
+
+.rcm-m2o-multi-add:hover {
+  color: var(--rcm-color-primary);
+  border-color: var(--rcm-color-primary);
+}
+
+.rcm-m2o-multi-add-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.rcm-m2o-multi-helper {
+  font-size: var(--rcm-font-size-xs);
+  color: var(--rcm-color-text-disabled);
+}
+
+/* ------------------------------------------------------------------ *
+     * Modal (generic form modal — used by SmsModal, etc.)
+     * ------------------------------------------------------------------ */
+.rcm-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-lg);
+  padding: var(--rcm-space-lg);
+}
+
+.rcm-modal-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-sm);
+}
+
+.rcm-modal-label {
+  font-size: var(--rcm-font-size-sm);
+  font-weight: var(--rcm-font-weight-medium);
+  color: var(--rcm-color-text);
+}
+
+.rcm-modal-warning {
+  margin-top: var(--rcm-space-xs);
+  font-size: var(--rcm-font-size-xs);
+  color: var(--rcm-color-error);
+}
+
+.rcm-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rcm-space-sm);
+  margin-top: var(--rcm-space-lg);
+}
+
+/* ------------------------------------------------------------------ *
+     * SMS modal specific
+     * ------------------------------------------------------------------ */
+.rcm-sms-textarea {
+  min-height: 150px;
+}
+
+.rcm-sms-meta {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--rcm-font-size-xs);
+  color: var(--rcm-color-text-muted);
+}
+
+.rcm-sms-lms-notice {
+  color: var(--rcm-color-warning);
+}
+
+/* 공통 필드 입력/텍스트/셀렉트 (hardcoded form-input/form-select/form-textarea 대체) */
+.rcm-field-input,
+.rcm-field-select,
+.rcm-field-textarea {
+  width: 100%;
+  padding: 0 var(--rcm-space-md);
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text);
+  background: var(--rcm-color-surface);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-radius: var(--rcm-radius-md);
+}
+
+.rcm-field-input,
+.rcm-field-select {
+  height: var(--rcm-size-input-height);
+}
+
+.rcm-field-textarea {
+  padding: var(--rcm-space-sm) var(--rcm-space-md);
+}
+
+.rcm-field-input:focus,
+.rcm-field-select:focus,
+.rcm-field-textarea:focus {
+  outline: none;
+  border-color: var(--rcm-color-primary);
+}
+
+.rcm-field-input-disabled {
+  background: var(--rcm-color-surface-disabled);
+  cursor: not-allowed;
+}
+
+/* ------------------------------------------------------------------ *
+     * Filter dropdown (column header filter popover)
+     * ------------------------------------------------------------------ */
+.rcm-filter-dropdown {
+  margin-top: var(--rcm-space-sm);
+  background: var(--rcm-color-surface);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-radius: var(--rcm-radius-md);
+  box-shadow: var(--rcm-shadow-lg);
+}
+
+.rcm-filter-dropdown-floating {
+  position: absolute;
+}
+
+.rcm-filter-dropdown-sm {
+  width: 260px;
+}
+.rcm-filter-dropdown-md {
+  width: 360px;
+}
+.rcm-filter-dropdown-lg {
+  width: 420px;
+}
+
+.rcm-filter-dropdown-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-md);
+  padding: var(--rcm-space-lg);
+}
+
+.rcm-filter-dropdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--rcm-space-sm);
+  border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
+}
+
+/* .rcm-filter-dropdown-title / -close removed — JSX uses rcm-text / rcm-icon-btn. */
+
+.rcm-filter-dropdown-body {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.rcm-filter-dropdown-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--rcm-space-sm);
+  padding-top: var(--rcm-space-md);
+  border-top: var(--rcm-border-width) solid var(--rcm-color-border);
+}
+
+/* ------------------------------------------------------------------ *
+     * DataImportSample (샘플 데이터 프리뷰 테이블)
+     * ------------------------------------------------------------------ */
+.rcm-import-sample {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-lg);
+}
+
+.rcm-import-sample-guide {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--rcm-color-surface-muted);
+  border-radius: var(--rcm-radius-lg);
+  padding: var(--rcm-space-lg) var(--rcm-space-lg);
+}
+
+/* .rcm-import-sample-guide-text removed — JSX uses rcm-text data-size="sm" data-tone="muted". */
+
+.rcm-import-sample-required-notice {
+  display: flex;
+  align-items: center;
+  gap: var(--rcm-space-sm);
+  background: var(--rcm-color-warning-surface);
+  border: var(--rcm-border-width) solid
+    color-mix(in srgb, var(--rcm-color-warning) 30%, transparent);
+  border-radius: var(--rcm-radius-lg);
+  padding: 0.75rem;
+}
+
+.rcm-import-sample-required-star {
+  color: var(--rcm-color-error);
+  font-weight: bold;
+}
+
+.rcm-import-sample-required-text {
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-warning);
+}
+
+.rcm-import-sample-table-wrap {
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-radius: var(--rcm-radius-lg);
+  overflow: hidden;
+}
+
+.rcm-import-sample-th {
+  background: var(--rcm-color-accent);
+  color: var(--rcm-color-accent-text);
+  text-align: center;
+  padding: 0.75rem 1rem;
+  font-size: var(--rcm-font-size-sm);
+  font-weight: var(--rcm-font-weight-medium);
+  white-space: nowrap;
+  border: var(--rcm-border-width) solid var(--rcm-color-accent-border);
+}
+
+.rcm-import-sample-th-required {
+  font-weight: bold;
+}
+
+.rcm-import-sample-th-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.rcm-import-sample-th-label-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.rcm-import-sample-th-star {
+  color: var(--rcm-color-accent-star);
+}
+
+.rcm-import-sample-th-label {
+  white-space: nowrap;
+}
+
+.rcm-import-sample-th-name {
+  font-size: var(--rcm-font-size-xs);
+  color: var(--rcm-color-accent-subtext);
+  margin-top: 0.25rem;
+  white-space: nowrap;
+}
+
+.rcm-import-sample-td {
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  padding: 0.75rem 1rem;
+  white-space: nowrap;
+}
+
+.rcm-import-sample-td-value {
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text);
+}
+
+.rcm-import-sample-td-id {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+/* .rcm-import-sample-td-id-label removed — JSX uses rcm-text data-size="sm" data-tone="muted" + inline nowrap. */
+
+.rcm-import-sample-td-id-help {
+  width: 1rem;
+  height: 1rem;
+  color: var(--rcm-color-text-disabled);
+  cursor: help;
+  transition: color var(--rcm-transition-fast);
+}
+
+.rcm-import-sample-td-id-help:hover {
+  color: var(--rcm-color-text-muted);
+}
+
+.rcm-import-sample-download-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* ------------------------------------------------------------------ *
+     * DataImporter section
+     * ------------------------------------------------------------------ */
+.rcm-importer-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.rcm-importer-section {
+  border-top: var(--rcm-border-width) solid var(--rcm-color-border);
+  padding-top: 1.5rem;
+}
+
+/* .rcm-importer-section-title removed — JSX uses rcm-text data-weight="semibold". */
+
+.rcm-importer-description {
+  padding: 1rem;
+  background: var(--rcm-color-info-surface);
+  border: var(--rcm-border-width) solid color-mix(in srgb, var(--rcm-color-info) 30%, transparent);
+  border-radius: var(--rcm-radius-lg);
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-info);
+}
+
+/* ------------------------------------------------------------------ *
+     * PhoneNumberListView dropdown
+     * ------------------------------------------------------------------ */
+.rcm-phone-list-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.rcm-phone-list-menu-btn {
+  height: 1.5rem;
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--rcm-radius-md);
+  cursor: pointer;
+  transition: background var(--rcm-transition-fast);
+}
+
+.rcm-phone-list-menu-btn:hover {
+  background: var(--rcm-color-surface-muted);
+}
+
+.rcm-phone-list-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.rcm-phone-list-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--rcm-space-sm);
+  padding: var(--rcm-space-sm) 0.75rem;
+  font-size: var(--rcm-font-size-sm);
+  background: transparent;
+  border: 0;
+  border-radius: var(--rcm-radius-md);
+  cursor: pointer;
+  transition: background var(--rcm-transition-fast);
+}
+
+.rcm-phone-list-dropdown-item:hover {
+  background: var(--rcm-color-surface-hover);
+}
+
+/* ------------------------------------------------------------------ *
+     * PostCodeSelector (주소 선택기)
+     * ------------------------------------------------------------------ */
+.rcm-postcode-input-row {
+  display: flex;
+  gap: var(--rcm-space-sm);
+}
+
+/* ------------------------------------------------------------------ *
+     * StatusChangeReasonModal (상태 변경 모달)
+     * ------------------------------------------------------------------ */
+.rcm-status-change-modal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-lg);
+}
+
+.rcm-status-change-box {
+  background: var(--rcm-color-surface-muted);
+  padding: var(--rcm-space-lg);
+  border-radius: var(--rcm-radius-lg);
+}
+
+.rcm-status-change-caption {
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text-muted);
+  margin-bottom: var(--rcm-space-sm);
+}
+
+.rcm-status-change-row {
+  display: flex;
+  align-items: center;
+  gap: var(--rcm-space-sm);
+}
+
+.rcm-status-change-from {
+  font-weight: var(--rcm-font-weight-medium);
+}
+.rcm-status-change-arrow {
+  color: var(--rcm-color-text-disabled);
+}
+.rcm-status-change-to {
+  font-weight: var(--rcm-font-weight-medium);
+  color: var(--rcm-color-primary);
+}
+
+.rcm-status-change-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rcm-space-sm);
+  padding-top: var(--rcm-space-lg);
+  border-top: var(--rcm-border-width) solid var(--rcm-color-border);
+}
+
+/* ------------------------------------------------------------------ *
+     * Permission denied (ViewListGridWrapper)
+     * ------------------------------------------------------------------ */
+.rcm-permission-denied {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+}
+
+.rcm-permission-denied-inner {
+  text-align: center;
+  padding: 2rem;
+}
+
+.rcm-permission-denied-icon-wrap {
+  margin-bottom: var(--rcm-space-lg);
+}
+
+.rcm-permission-denied-icon {
+  width: 4rem;
+  height: 4rem;
+  margin: 0 auto;
+  color: var(--rcm-color-text-disabled);
+}
+
+.rcm-permission-denied-title {
+  font-size: 1.125rem;
+  font-weight: var(--rcm-font-weight-medium);
+  color: var(--rcm-color-text);
+  margin: 0 0 var(--rcm-space-sm) 0;
+}
+
+.rcm-permission-denied-desc {
+  font-size: var(--rcm-font-size-sm);
+  color: var(--rcm-color-text-muted);
+  margin: 0 0 var(--rcm-space-lg) 0;
+}
+
+/* ------------------------------------------------------------------ *
+     * Copyable text view (복사 버튼 addon)
+     * ------------------------------------------------------------------ */
+.rcm-copy-addon-wrap {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  background: var(--rcm-color-surface-muted);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-left: 0;
+  border-top-right-radius: var(--rcm-radius-md);
+  border-bottom-right-radius: var(--rcm-radius-md);
+  color: var(--rcm-color-text-muted);
+  font-weight: var(--rcm-font-weight-semibold);
+}
+
+/* .rcm-copy-addon-btn / .rcm-copy-text-btn removed — JSX uses rcm-icon-btn. */
+.rcm-copy-text-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* ------------------------------------------------------------------ *
+     * ImageField cell (이미지 필드 썸네일 + hover 프리뷰)
+     * ------------------------------------------------------------------ */
+.rcm-image-field-cell {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.rcm-image-field-hover-group {
+  position: relative;
+  text-align: center;
+}
+
+.rcm-image-field-thumb {
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: var(--rcm-radius-md);
+  object-fit: cover;
+  filter: saturate(0.5);
+  transition: transform 300ms;
+}
+
+.rcm-image-field-hover-group:hover .rcm-image-field-thumb {
+  transform: scale(1.1);
+}
+
+.rcm-image-field-thumb-placeholder {
+  transition: filter 300ms;
+}
+
+.rcm-image-field-hover-group:hover .rcm-image-field-thumb-placeholder {
+  filter: saturate(1);
+}
+
+.rcm-image-field-preview-wrap {
+  position: absolute;
+  min-width: 12rem;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -3rem);
+  margin-top: var(--rcm-space-sm);
+  z-index: 50;
+  background: var(--rcm-color-surface);
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+.rcm-image-field-hover-group:hover .rcm-image-field-preview-wrap {
+  display: flex;
+}
+
+.rcm-image-field-preview {
+  height: 12rem;
+  width: 12rem;
+  max-width: 12rem;
+  border-radius: var(--rcm-radius-md);
+  object-fit: cover;
+  box-shadow: var(--rcm-shadow-lg);
+}
+
+/* ------------------------------------------------------------------ *
+     * ViewApiSpecification (API 응답 뷰어)
+     * ------------------------------------------------------------------ */
+.rcm-api-spec {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.rcm-api-spec-url-row {
+  display: flex;
+}
+
+.rcm-api-spec-method {
+  background: var(--rcm-color-surface-muted);
+  font-size: var(--rcm-font-size-sm);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: var(--rcm-radius-md);
+  border-bottom-left-radius: var(--rcm-radius-md);
+  padding: 0 0.75rem;
+  font-weight: var(--rcm-font-weight-semibold);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-right: 0;
+}
+
+.rcm-api-spec-url {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-top-right-radius: var(--rcm-radius-md);
+  border-bottom-right-radius: var(--rcm-radius-md);
+  background: var(--rcm-color-surface);
+  font-size: var(--rcm-font-size-sm);
+  word-break: break-all;
+}
+
+.rcm-api-spec-block {
+  padding: 0.75rem;
+  background: var(--rcm-color-surface-muted);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-radius: var(--rcm-radius-md);
+  font-size: var(--rcm-font-size-sm);
+  font-weight: normal;
+}
+
+/* ------------------------------------------------------------------ *
+     * LinkField cell (리스트에서 링크 값 표시)
+     * ------------------------------------------------------------------ */
+.rcm-link-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.rcm-link-cell-btn {
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background var(--rcm-transition-fast);
+}
+
+.rcm-link-cell-btn:hover {
+  background: var(--rcm-color-surface-muted);
+}
+
+.rcm-link-cell-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--rcm-color-text-muted);
+}
+
+.rcm-link-cell-btn:hover .rcm-link-cell-icon {
+  color: var(--rcm-color-text);
+}
+
+/* ------------------------------------------------------------------ *
+     * File field cell
+     * ------------------------------------------------------------------ */
+.rcm-file-field-cell {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.rcm-file-field-inner {
+  position: relative;
+  text-align: center;
+}
+
+.rcm-file-field-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.rcm-file-field-icon {
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: var(--rcm-radius-md);
+  object-fit: cover;
+  filter: saturate(0.5);
+  transition: filter var(--rcm-transition-fast);
+}
+
+.rcm-file-field-link:hover .rcm-file-field-icon {
+  filter: saturate(1);
+}
+
+.rcm-file-field-name {
+  font-size: var(--rcm-font-size-xs);
+}
+
+/* ------------------------------------------------------------------ *
+     * Rule-based field view + condition card
+     * ------------------------------------------------------------------ */
+.rcm-rule-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+}
+
+.rcm-rule-inner {
+  width: 100%;
+  position: relative;
+}
+
+.rcm-rule-inner-button {
+  padding: 1.5rem 1.5rem 1.5rem;
+  padding-top: 3rem;
+  border: var(--rcm-border-width) solid
+    color-mix(in srgb, var(--rcm-color-text-muted) 20%, transparent);
+  border-radius: var(--rcm-radius-md);
+}
+
+.rcm-rule-inner-plain {
+  padding: var(--rcm-space-sm);
+}
+
+.rcm-rule-icon-badge {
+  background: var(--rcm-color-primary);
+  color: var(--rcm-color-primary-text);
+  position: absolute;
+  left: 1.5rem;
+  top: -2rem;
+  width: 4rem;
+  height: 4rem;
+  border-radius: var(--rcm-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+}
+
+.rcm-rule-icon-badge-icon {
+  height: 3rem;
+  width: 3rem;
+}
+
+.rcm-rule-title {
+  color: var(--rcm-color-text);
+  font-size: 1.125rem;
+  font-weight: var(--rcm-font-weight-semibold);
+  margin: 0 0 0.875rem 0;
+}
+
+.rcm-rule-condition-box {
+  width: 100%;
+  border: var(--rcm-border-width) solid
+    color-mix(in srgb, var(--rcm-color-text-muted) 20%, transparent);
+  border-radius: var(--rcm-radius-md);
+  padding: 1.5rem 1.5rem 0.5rem;
+  position: relative;
+}
+
+/* Datetime filter show-hide helpers */
+.rcm-show-below-md {
+  display: block;
+}
+.rcm-show-from-md {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .rcm-show-below-md {
+    display: none;
+  }
+  .rcm-show-from-md {
+    display: block;
+  }
+}
+
+/* AdvancedSearchForm (legacy) */
+.rcm-adv-search-legacy-outer {
+  padding-top: var(--rcm-space-sm);
+}
+
+@media (min-width: 1280px) {
+  .rcm-adv-search-legacy-outer {
+    margin-right: 0.75rem;
+  }
+}
+
+.rcm-adv-search-legacy-inner {
+  width: 100%;
+  padding: 1rem 2rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.rcm-adv-search-legacy-inner-sub {
+  padding: 1rem 0 0.5rem;
+}
+
+.rcm-adv-search-legacy-title {
+  font-size: 1.125rem;
+  font-weight: var(--rcm-font-weight-semibold);
+  color: var(--rcm-color-text);
+  margin: 0 0 var(--rcm-space-sm) 0;
+}
+
+/* ListGrid topContent wrapper */
+.rcm-listgrid-top-content {
+  padding: 0 var(--rcm-space-sm);
+  margin-bottom: var(--rcm-space-sm);
+}
+
+@media (min-width: 768px) {
+  .rcm-listgrid-top-content {
+    padding: 0 var(--rcm-space-lg);
+  }
+}
+
+/* SelectFieldRenderer wrap */
+.rcm-select-renderer-wrap {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+/* Notification body */
+.rcm-notification-body {
+  position: relative;
+  flex: 1;
+}
+
+/* Modal content scroll wrapper (사이즈 제한된 modal 내부) */
+.rcm-modal-content-scroll {
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: hidden;
+}
+
+/* ------------------------------------------------------------------ *
+     * Loading / spinner / skeleton
+     * ------------------------------------------------------------------ */
+.rcm-spinner {
+  display: inline-block;
+  width: var(--rcm-size-icon-md);
+  height: var(--rcm-size-icon-md);
+  border: 2px solid var(--rcm-color-border);
+  border-top-color: var(--rcm-color-primary);
+  border-radius: var(--rcm-radius-full);
+  animation: rcm-spin 0.8s linear infinite;
+}
+
+@keyframes rcm-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rcm-loading-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--rcm-space-2xl);
+}
+
+.rcm-skeleton-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--rcm-space-2xl);
+}
+
+/* Skeleton variants — base .rcm-skeleton + .rcm-pulse keyframes live in
+     * primitives.css. These are color variants used by ViewListGridSkeleton
+     * and ViewEntityFormSkeleton to accent specific regions. */
+.rcm-skeleton-accent {
+  background: color-mix(in srgb, var(--rcm-color-primary) 30%, transparent);
+}
+
+.rcm-skeleton-danger {
+  background: color-mix(in srgb, var(--rcm-color-error) 30%, transparent);
+}
+
+.rcm-pulse {
+  animation: rcm-pulse 1.5s ease-in-out infinite;
+}
+
+.rcm-skeleton-row {
+  margin-bottom: var(--rcm-space-lg);
+}
+
+.rcm-skeleton-tab-bar {
+  gap: var(--rcm-space-sm);
+  padding-bottom: var(--rcm-space-sm);
+  margin-bottom: var(--rcm-space-lg);
+  border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
+}
+
+.rcm-skeleton-tab-active {
+  border-bottom: 2px solid var(--rcm-color-primary);
+}
+
+.rcm-skeleton-panel {
+  width: 100%;
+  padding: var(--rcm-space-sm) 0 0;
+}
+
+.rcm-skeleton-inner {
+  width: 100%;
+  padding-left: var(--rcm-space-md);
+  padding-right: var(--rcm-space-md);
+}
+
+.rcm-panel-compact {
+  padding: var(--rcm-space-md);
+}
+
+.rcm-flex-1 {
+  flex: 1 1 auto;
+  display: flex;
+  gap: var(--rcm-space-sm);
+}
+
+.rcm-gap-xs {
+  gap: var(--rcm-space-xs);
+}
+.rcm-gap-sm {
+  gap: var(--rcm-space-sm);
+}
+.rcm-gap-md {
+  gap: var(--rcm-space-md);
+}
+
+.rcm-ml-auto {
+  margin-left: auto;
+}
+.rcm-radius-full {
+  border-radius: var(--rcm-radius-full);
+}
+.rcm-bg-info-surface {
+  background: var(--rcm-color-info-surface);
+}
+
+.rcm-skeleton-search-input {
+  flex: 1 1 auto;
+  max-width: 28rem;
+}
+
+.rcm-skeleton-subcollection-bar {
+  margin-bottom: var(--rcm-space-md);
+  padding: 0 var(--rcm-space-sm);
+}
+
+.rcm-skeleton-popup-container {
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.rcm-skeleton-thead {
+  border-top: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
+}
+
+.rcm-skeleton-th-checkbox {
+  width: 50px;
+  padding: var(--rcm-space-sm);
+}
+.rcm-skeleton-th {
+  padding: var(--rcm-space-sm);
+  text-align: left;
+}
+.rcm-skeleton-tr {
+  border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
+}
+.rcm-skeleton-td-checkbox {
+  width: 50px;
+  padding: var(--rcm-space-sm);
+}
+.rcm-skeleton-td {
+  padding: var(--rcm-space-sm);
+}
+
+.rcm-skeleton-pagination {
+  display: flex;
+  justify-content: center;
+  padding: var(--rcm-space-xl) 0;
+}
+
+/* ------------------------------------------------------------------ *
+     * Tabs (EntityForm + ListGrid)
+     * ------------------------------------------------------------------ */
+.rcm-tab-list {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+  border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
+  margin-top: var(--rcm-space-md);
+  margin-bottom: var(--rcm-space-sm);
+}
+
+/* .rcm-tab base + :hover + [data-state="selected"|"disabled"] live in
+     * primitives.css. JSX uses data-state attr for selection/disabled. */
+
+/* ------------------------------------------------------------------ *
+     * PhoneNumberField — input + copy/sms button group (addon suffix)
+     * ------------------------------------------------------------------ */
+.rcm-input-group {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.rcm-input-group-input {
+  flex: 1;
+}
+
+.rcm-input-group-input-with-addon {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: 0;
+}
+
+.rcm-input-addon {
+  display: flex;
+  align-items: center;
+  height: var(--rcm-size-input-height);
+  background: var(--rcm-color-surface-muted);
+  border: var(--rcm-border-width) solid var(--rcm-color-border);
+  border-left: 0;
+  border-top-right-radius: var(--rcm-radius-md);
+  border-bottom-right-radius: var(--rcm-radius-md);
+}
+
+/* .rcm-input-addon-button / .rcm-icon-sm removed — JSX uses rcm-icon-btn + rcm-icon. */
+
+/* ------------------------------------------------------------------ *
+     * Table (base reset; rich table UI comes from host via UIProvider.Table)
+     * ------------------------------------------------------------------ */
+.rcm-table {
+  width: 100%;
+  min-width: 48rem;
+  border-collapse: collapse;
+  font-size: var(--rcm-font-size-sm);
+}
+
+.rcm-table th,
+.rcm-table td {
+  padding: var(--rcm-space-sm) var(--rcm-space-md);
+  border-bottom: var(--rcm-border-width) solid var(--rcm-color-border);
+  text-align: left;
+}
+
+.rcm-table th {
+  background: var(--rcm-color-surface-muted);
+  font-weight: var(--rcm-font-weight-semibold);
+  color: var(--rcm-color-text);
+  white-space: nowrap;
+}
+
+/* Responsive wrapper — keep min-width on the table inside an overflow-x
+     * container so narrow viewports scroll horizontally instead of wrapping. */
+.rcm-skeleton-table-wrapper {
+  width: 100%;
+  min-height: 400px;
+  overflow-x: auto;
+}
+
+/* .rcm-notice base + [data-tone="info|success|warning|error"] live in
+     * primitives.css. Legacy class-variant aliases (-info/-warning/-error/
+     * -success) are also in primitives.css for host themes that emit them
+     * as className strings rather than data-tone attrs. */
+
+/* END — unlayered */