/* RcmsIcon — 스프라이트 아이콘 래퍼. */
.rcms-icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

/* RcmsAvatar — 이니셜 원형 아바타(sm/md). */
.rcms-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--rcms-primary-600);
  color: var(--rcms-white);
  font-weight: 700;
  flex: none;
}
.rcms-avatar--md {
  width: 32px;
  height: 32px;
  font-size: var(--rcms-font-size-sm);
}
.rcms-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--rcms-font-size-xs);
}

/* RcmsButton (C-01) — 공통 버튼. variant(primary/ghost)·size(sm)·icon·block. */
.rcms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rcms-space-2);
  height: 40px;
  padding: 0 var(--rcms-space-4);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-white);
  color: var(--rcms-gray-700);
  font-size: var(--rcms-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.rcms-btn:hover {
  background: var(--rcms-gray-50);
  border-color: var(--rcms-gray-300);
}
.rcms-btn:active {
  transform: translateY(1px);
}
.rcms-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcms-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* variant: primary (단일 블루 강조 — 희소 사용) */
.rcms-btn--primary {
  background: var(--rcms-blue-interactive);
  border-color: var(--rcms-blue-interactive);
  color: var(--rcms-white);
  box-shadow: var(--rcms-shadow-sm);
}
.rcms-btn--primary:hover {
  background: var(--rcms-primary-600);
  border-color: var(--rcms-primary-600);
}

/* variant: danger (파괴적 주 액션 — 삭제·파기·반려. C-01 §4 variant 매트릭스) */
.rcms-btn--danger {
  background: var(--rcms-error);
  border-color: var(--rcms-error);
  color: var(--rcms-white);
  box-shadow: var(--rcms-shadow-sm);
}
.rcms-btn--danger:hover {
  background: var(--rcms-error-text);
  border-color: var(--rcms-error-text);
}
.rcms-btn--danger:focus-visible {
  box-shadow: 0 0 0 3px var(--rcms-error-bg);
}

/* variant: text (테두리/배경 없는 링크형 액션) */
.rcms-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--rcms-blue-interactive);
}
.rcms-btn--text:hover {
  background: var(--rcms-gray-100);
  color: var(--rcms-primary-600);
}

/* variant: ghost */
.rcms-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rcms-gray-500);
}
.rcms-btn--ghost:hover {
  background: var(--rcms-gray-100);
  color: var(--rcms-gray-700);
}

/* size: sm */
.rcms-btn--sm {
  height: 32px;
  padding: 0 var(--rcms-space-3);
  font-size: var(--rcms-font-size-xs);
}

/* 아이콘 전용 (정사각, 행 액션 등) */
.rcms-btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--rcms-gray-400);
}
.rcms-btn--icon:hover {
  background: var(--rcms-gray-100);
  color: var(--rcms-gray-700);
}
.rcms-btn--block {
  width: 100%;
}

/* RcmsModal (C-08) — 공통 모달(오버레이·다이얼로그 sm/md/lg·헤더/본문/푸터·페이드). */
.rcms-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--rcms-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rcms-space-4);
  background: var(--rcms-overlay-bg);
}
.rcms-modal__dialog {
  width: 100%;
  background: var(--rcms-white);
  border-radius: var(--rcms-radius-lg);
  box-shadow: var(--rcms-shadow-md-admin);
  max-height: calc(100vh - var(--rcms-space-8));
  overflow: auto;
}
.rcms-modal__dialog--sm {
  max-width: 380px;
}
.rcms-modal__dialog--md {
  max-width: 480px;
}
.rcms-modal__dialog--lg {
  max-width: 720px;
}
.rcms-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-4) var(--rcms-space-6);
  border-bottom: 1px solid var(--rcms-border-color);
}
.rcms-modal__title {
  font-size: var(--rcms-font-size-lg);
  font-weight: 700;
  color: var(--rcms-gray-900);
}
.rcms-modal__body {
  padding: var(--rcms-space-6);
  color: var(--rcms-text-default);
  font-size: var(--rcms-font-size-base);
  line-height: var(--rcms-line-height-base);
}
.rcms-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--rcms-space-2);
  padding: var(--rcms-space-4) var(--rcms-space-6);
  border-top: 1px solid var(--rcms-border-color);
}
.rcms-modal-fade-enter-active,
.rcms-modal-fade-leave-active {
  transition: opacity 0.15s ease;
}
.rcms-modal-fade-enter,
.rcms-modal-fade-leave-to {
  opacity: 0;
}

/* 관리자 통합검색 커맨드 팔레트 (AdminSearchPalette.vue) — non-scoped, 토큰만. [[css-js-separation]]
 * 공개 search-overlay 의 Cmd+K 카드 UX 를 관리자 셸에 맞춰 .adcmdk 네임스페이스로 이식(공개/관리자 분리).
 * 상단바 트리거(검색창 모양) → 중앙 팔레트. 입력 시 콘텐츠/메뉴/사용자 라이브 결과 그룹 + 최근검색어. */

/* ===== 상단바 트리거 ===== */
.adcmdk {
  flex: 0 1 360px;
  display: flex;
  min-width: 0;
}
.adcmdk__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--rcms-space-2);
  width: 100%;
  height: 38px;
  padding: 0 var(--rcms-space-3);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-admin-bg);
  cursor: text;
  text-align: left;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.adcmdk__trigger:hover {
  border-color: var(--rcms-gray-300);
  background: var(--rcms-white);
}
.adcmdk__trigger-icon {
  flex-shrink: 0;
  color: var(--rcms-gray-400);
}
.adcmdk__trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--rcms-font-size-sm);
  color: var(--rcms-gray-500);
}

/* ===== 오버레이 ===== */
.adcmdk__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--rcms-z-modal);
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
  animation: adcmdk-fade 0.14s ease;
}
.adcmdk__card {
  position: fixed;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  z-index: calc(var(--rcms-z-modal) + 1);
  display: flex;
  flex-direction: column;
  width: min(640px, 92vw);
  max-height: 76vh;
  background: var(--rcms-white);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: adcmdk-pop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== 입력 ===== */
.adcmdk__head {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-4) var(--rcms-space-6);
  border-bottom: 1px solid var(--rcms-gray-100);
}
.adcmdk__head-icon {
  flex-shrink: 0;
  color: var(--rcms-primary-500);
}
.adcmdk__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--rcms-gray-900);
  font-size: var(--rcms-font-size-xl);
  font-weight: 600;
}
.adcmdk__input::-moz-placeholder {
  color: var(--rcms-gray-300);
  font-weight: 500;
}
.adcmdk__input::placeholder {
  color: var(--rcms-gray-300);
  font-weight: 500;
}
.adcmdk__esc {
  flex-shrink: 0;
  padding: 3px var(--rcms-space-2);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-sm);
  background: var(--rcms-gray-50);
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  cursor: pointer;
}
.adcmdk__esc:hover {
  background: var(--rcms-gray-100);
  color: var(--rcms-gray-700);
}

/* ===== 본문 ===== */
.adcmdk__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--rcms-space-2);
  min-height: 180px;
}
.adcmdk__sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rcms-space-2) var(--rcms-space-3) var(--rcms-space-1);
}
.adcmdk__seclabel {
  display: block;
  padding: var(--rcms-space-2) var(--rcms-space-3) var(--rcms-space-1);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rcms-gray-400);
}
.adcmdk__sechead .adcmdk__seclabel {
  padding: 0;
}
.adcmdk__seccount {
  margin-left: var(--rcms-space-2);
  color: var(--rcms-gray-300);
  font-weight: 600;
}
.adcmdk__clear {
  border: 0;
  background: transparent;
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-xs);
  cursor: pointer;
}
.adcmdk__clear:hover {
  color: var(--rcms-gray-700);
}

/* 행 */
.adcmdk__row {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
  width: 100%;
  padding: var(--rcms-space-3);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rcms-gray-800);
  font-size: var(--rcms-font-size-sm);
  text-align: left;
  cursor: pointer;
}
.adcmdk__row--on {
  background: var(--rcms-primary-50);
  color: var(--rcms-primary-700);
  box-shadow: inset 3px 0 0 var(--rcms-primary-500);
}
.adcmdk__row--go {
  background: var(--rcms-gray-50);
  font-weight: 600;
}
.adcmdk__row--go.adcmdk__row--on {
  background: var(--rcms-primary-50);
}
.adcmdk__row-icon {
  flex-shrink: 0;
  color: var(--rcms-primary-500);
}
.adcmdk__row-icon--muted {
  color: var(--rcms-gray-400);
}
.adcmdk__row-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adcmdk__row-sub {
  flex-shrink: 0;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-400);
}
.adcmdk__badge {
  flex-shrink: 0;
  padding: 1px var(--rcms-space-2);
  border-radius: var(--rcms-radius-sm);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
}
.adcmdk__badge--on {
  background: var(--rcms-success-bg);
  color: var(--rcms-success-text);
}
.adcmdk__badge--muted {
  background: var(--rcms-gray-100);
  color: var(--rcms-gray-600);
}
.adcmdk__enter {
  flex-shrink: 0;
  font-size: var(--rcms-font-size-base);
  color: var(--rcms-gray-300);
}

/* 최근검색어 칩 */
.adcmdk__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rcms-space-2);
  padding: var(--rcms-space-1) var(--rcms-space-3) var(--rcms-space-2);
}
.adcmdk__chip {
  display: inline-flex;
  align-items: center;
  padding-left: var(--rcms-space-3);
  border-radius: 999px;
  background: var(--rcms-gray-100);
  transition: background-color 0.12s ease;
}
.adcmdk__chip:hover {
  background: var(--rcms-gray-200);
}
.adcmdk__chip-term {
  border: 0;
  background: transparent;
  padding: var(--rcms-space-2) 0;
  color: var(--rcms-gray-700);
  font-size: var(--rcms-font-size-sm);
  cursor: pointer;
}
.adcmdk__chip-del {
  display: inline-flex;
  border: 0;
  background: transparent;
  padding: 0 var(--rcms-space-2);
  color: var(--rcms-gray-400);
  cursor: pointer;
}
.adcmdk__chip-del:hover {
  color: var(--rcms-gray-700);
}
.adcmdk__hintline {
  padding: var(--rcms-space-4) var(--rcms-space-3);
  text-align: center;
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-sm);
}

/* ===== 푸터 ===== */
.adcmdk__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-2) var(--rcms-space-4);
  border-top: 1px solid var(--rcms-gray-100);
  background: var(--rcms-gray-50);
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-400);
}
.adcmdk__keys,
.adcmdk__tip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.adcmdk__foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  margin: 0 1px;
  padding: 1px 5px;
  border: 1px solid var(--rcms-gray-200);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--rcms-white);
  color: var(--rcms-gray-500);
  font-size: 11px;
  font-family: inherit;
}
.adcmdk__sep {
  margin: 0 var(--rcms-space-2);
  color: var(--rcms-gray-300);
}

/* ===== 애니메이션 ===== */
@keyframes adcmdk-fade {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes adcmdk-pop {
from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98);
}
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}
}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
.adcmdk__card {
    top: 7vh;
    width: 94vw;
    max-height: 84vh;
}
}

/* SessionCountdown — 자동 로그아웃 잔여 시간 칩(5분 이하 경고 톤). */
.rcms-countdown {
  display: inline-flex;
  align-items: center;
  gap: var(--rcms-space-2);
  height: 34px;
  padding: 0 var(--rcms-space-3);
  border-radius: 999px;
  background: var(--rcms-primary-50);
  color: var(--rcms-blue-interactive);
  font-size: var(--rcms-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}
.rcms-countdown__label {
  color: var(--rcms-gray-500);
  font-weight: 500;
}
.rcms-countdown__time {
  color: var(--rcms-blue-interactive);
}
/* 5분 이하 — 경고 톤 */
.rcms-countdown--urgent {
  background: var(--rcms-warning-bg);
  color: var(--rcms-warning-text);
}
.rcms-countdown--urgent .rcms-countdown__time {
  color: var(--rcms-warning-text);
}

/* AdminLayout — 관리자 셸(다크 LNB 사이드바 + 상단바/사용자 메뉴 + 콘텐츠). */
.rcms-admin {
  display: flex;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.rcms-side {
  flex: 0 0 252px;
  width: 252px;
  background: var(--rcms-side-bg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.rcms-side__brand {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2-5);
  height: 60px;
  padding: 0 22px;
  border-bottom: 1px solid var(--rcms-side-bg-raise);
}
.rcms-side__logo {
  width: 30px;
  height: 30px;
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-blue-interactive);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rcms-white);
  font-weight: 800;
  font-size: var(--rcms-font-size-lg);
  box-shadow: var(--rcms-shadow-sm);
}
.rcms-side__logo-img {
  width: 30px;
  height: 30px;
  border-radius: var(--rcms-radius-md);
  -o-object-fit: contain;
     object-fit: contain;
  flex: none;
  background: var(--rcms-white);
}
.rcms-side__name {
  color: var(--rcms-white);
  font-weight: 700;
  font-size: var(--rcms-font-size-lg);
  letter-spacing: -0.01em;
}
.rcms-side__name small {
  display: block;
  color: var(--rcms-side-dim);
  font-weight: 600;
  font-size: var(--rcms-font-size-xs);
  letter-spacing: 0.02em;
}
.rcms-side__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--rcms-space-4-5) var(--rcms-space-3-5);
}
.rcms-side__group {
  margin-bottom: 22px;
}
.rcms-side__label {
  margin: 0 0 var(--rcms-space-1-5);
  padding: 0 var(--rcms-space-3);
  color: var(--rcms-side-dim);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rcms-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px var(--rcms-space-3);
  border-radius: var(--rcms-radius-md);
  color: var(--rcms-side-text);
  font-weight: 500;
  margin-bottom: var(--rcms-space-0-5);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rcms-nav-item .rcms-icon {
  color: var(--rcms-side-dim);
  transition: color 0.15s ease;
}
.rcms-nav-item:hover {
  background: var(--rcms-side-bg-raise);
  color: var(--rcms-white);
}
.rcms-nav-item:hover .rcms-icon {
  color: var(--rcms-side-text);
}
.rcms-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--rcms-space-0-5) var(--rcms-side-active-icon);
}
/* 활성 = 배경 채움 (border-left 스트라이프 금지) */
.rcms-nav-item.is-active {
  background: var(--rcms-side-active-bg);
  color: var(--rcms-white);
  font-weight: 600;
}
.rcms-nav-item.is-active .rcms-icon {
  color: var(--rcms-side-active-icon);
}
.rcms-nav-item__label {
  flex: 1;
}
.rcms-nav-item__count {
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-side-dim);
  background: var(--rcms-side-bg-raise);
  border-radius: 999px;
  padding: 1px 7px;
}
.rcms-nav-item.is-active .rcms-nav-item__count {
  background: var(--rcms-side-active-bg);
  color: var(--rcms-side-text);
}
.rcms-side__foot {
  padding: var(--rcms-space-3-5) var(--rcms-space-4-5);
  border-top: 1px solid var(--rcms-side-bg-raise);
  color: var(--rcms-side-dim);
  font-size: var(--rcms-font-size-xs);
}

/* ===== Main ===== */
.rcms-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rcms-top {
  height: 60px;
  background: var(--rcms-white);
  border-bottom: 1px solid var(--rcms-border-color);
  display: flex;
  align-items: center;
  gap: var(--rcms-space-4);
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: var(--rcms-z-dropdown);
}
.rcms-top__search {
  flex: 0 1 360px;
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  height: 38px;
  padding: 0 var(--rcms-space-3);
  background: var(--rcms-admin-bg);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  color: var(--rcms-gray-500);
}
.rcms-top__search input {
  border: 0;
  background: transparent;
  outline: none;
  font-size: var(--rcms-font-size-sm);
  color: var(--rcms-gray-700);
  width: 100%;
}
.rcms-top__search input::-moz-placeholder {
  color: var(--rcms-gray-400);
}
.rcms-top__search input::placeholder {
  color: var(--rcms-gray-400);
}
.rcms-top__spacer {
  flex: 1;
}

/* 사용자 메뉴 */
.rcms-top__user {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: var(--rcms-space-3);
  margin-left: var(--rcms-space-1);
  border-left: 1px solid var(--rcms-border-color);
}
.rcms-user-trigger {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2-5);
  padding: 5px var(--rcms-space-2) 5px var(--rcms-space-1-5);
  border: 1px solid transparent;
  border-radius: var(--rcms-space-2-5);
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rcms-user-trigger:hover {
  background: var(--rcms-admin-bg);
  border-color: var(--rcms-border-color);
}
.rcms-user-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcms-user-trigger__who {
  font-size: var(--rcms-font-size-sm);
  text-align: left;
}
.rcms-user-trigger__who b {
  display: block;
  color: var(--rcms-gray-900);
  font-weight: 600;
  line-height: 1.2;
}
.rcms-user-trigger__who span {
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-xs);
}
.rcms-user-trigger__caret {
  color: var(--rcms-gray-400);
  transition: transform 0.15s ease;
}
.rcms-user-trigger[aria-expanded='true'] .rcms-user-trigger__caret {
  transform: rotate(180deg);
}
.rcms-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 226px;
  background: var(--rcms-white);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-lg);
  box-shadow: var(--rcms-shadow-md-admin);
  padding: var(--rcms-space-1-5);
  z-index: var(--rcms-z-dropdown);
}
.rcms-user-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px var(--rcms-space-2-5);
  border-radius: var(--rcms-radius-md);
  color: var(--rcms-gray-700);
  font-size: var(--rcms-font-size-sm);
  font-weight: 500;
  text-align: left;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.rcms-user-menu__item .rcms-icon {
  color: var(--rcms-gray-400);
}
.rcms-user-menu__item:hover {
  background: var(--rcms-admin-bg);
  color: var(--rcms-gray-900);
}
.rcms-user-menu__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcms-user-menu__sep {
  height: 1px;
  background: var(--rcms-border-color);
  margin: var(--rcms-space-1-5) var(--rcms-space-1);
}
.rcms-user-menu__item--danger {
  color: var(--rcms-error-text);
}
.rcms-user-menu__item--danger .rcms-icon {
  color: var(--rcms-error);
}
.rcms-user-menu__item--danger:hover {
  background: var(--rcms-error-bg);
  color: var(--rcms-error-text);
}

/* 콘텐츠 영역 — 밝은 배경 */
.rcms-admin__content {
  flex: 1;
  background: var(--rcms-admin-bg);
  padding: 28px var(--rcms-space-8) var(--rcms-space-16);
  outline: none;
}
@media (min-width: 1536px) {
.rcms-admin__content {
    padding: 28px 56px var(--rcms-space-16);
}
}
.rcms-admin__footer {
  background: var(--rcms-admin-bg);
  border-top: 1px solid var(--rcms-border-color);
  padding: var(--rcms-space-4) var(--rcms-space-8);
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-xs);
}


/* 사용자 메뉴 모달(내 정보 수정·비밀번호 변경) 폼 — 필드 세로 리듬만 보강.
 * 컨트롤 외형은 전역 .rcms-ff-* (styles/common/forms.css, main.css 에서 전역 로드) 를 그대로 사용. */
.rcms-user-form[data-v-e52ce6f4] {
  display: flex;
  flex-direction: column;
  gap: var(--rcms-space-4);
}
.rcms-user-form__state[data-v-e52ce6f4] {
  padding: var(--rcms-space-4) 0;
  color: var(--rcms-gray-500);
  font-size: var(--rcms-font-size-sm);
  text-align: center;
}

/* 공개 사이트 데스크톱 GNB — 전폭 메가메뉴 (리브랜드 2026-07-02).
 * PublicGNB.vue 전용(non-scoped). 브랜드-우측 사이 신축 배치, hover/focus-within 로 메가 패널 노출.
 * 메가 패널은 sticky 래퍼(.rcms-public__stick)를 기준으로 전체 폭에 드롭된다. */
.rcms-gnb {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
.rcms-gnb__list {
  display: flex;
  align-items: stretch;
  gap: var(--rcms-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 메가 패널을 전체 폭으로 띄우기 위해 item 은 static(오프셋 부모 = sticky 래퍼) */
.rcms-gnb__item {
  position: static;
  display: flex;
  align-items: center;
}
.rcms-gnb__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--rcms-brand-h);
  padding: 0 var(--rcms-space-4);
  color: var(--rcms-gray-800);
  font-weight: 700;
  font-size: var(--rcms-font-size-base);
  white-space: nowrap;
  position: relative;
  transition: color var(--rcms-dur-fast) var(--rcms-ease-out);
}
/* 코랄 언더라인(호버/활성) */
.rcms-gnb__link::after {
  content: "";
  position: absolute;
  left: var(--rcms-space-4);
  right: var(--rcms-space-4);
  bottom: 14px;
  height: 3px;
  border-radius: 3px;
  background: var(--rcms-warm-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--rcms-dur) var(--rcms-ease-out);
}
.rcms-gnb__item:hover .rcms-gnb__link,
.rcms-gnb__item:focus-within .rcms-gnb__link,
.rcms-gnb__link.router-link-active {
  color: var(--rcms-primary-700);
}
.rcms-gnb__item:hover .rcms-gnb__link::after,
.rcms-gnb__item:focus-within .rcms-gnb__link::after,
.rcms-gnb__link.router-link-active::after {
  transform: scaleX(1);
}
.rcms-gnb__caret {
  color: var(--rcms-gray-400);
  transition: transform var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-gnb__item:hover .rcms-gnb__caret,
.rcms-gnb__item:focus-within .rcms-gnb__caret { transform: rotate(180deg);
}
.rcms-gnb__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--rcms-primary-300);
  border-radius: var(--rcms-radius-sm);
}
.rcms-gnb__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rcms-warm-500);
  color: var(--rcms-white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* ===== 메가 패널 ===== */
.rcms-gnb__mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--rcms-surface);
  border-top: 1px solid var(--rcms-gray-100);
  border-bottom: 1px solid var(--rcms-gray-200);
  box-shadow: var(--rcms-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--rcms-dur) var(--rcms-ease-out), transform var(--rcms-dur) var(--rcms-ease-out), visibility var(--rcms-dur);
  z-index: var(--rcms-z-dropdown);
}
.rcms-gnb__item:hover .rcms-gnb__mega,
.rcms-gnb__item:focus-within .rcms-gnb__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rcms-gnb__mega-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--rcms-space-8);
  padding-top: var(--rcms-space-8);
  padding-bottom: var(--rcms-space-8);
}
.rcms-gnb__mega-aside {
  padding-right: var(--rcms-space-6);
  border-right: 1px solid var(--rcms-gray-100);
}
.rcms-gnb__mega-eyebrow {
  font-size: var(--rcms-font-size-lg);
  font-weight: 800;
  color: var(--rcms-gray-900);
  letter-spacing: -0.01em;
}
.rcms-gnb__mega-tip {
  margin: var(--rcms-space-2) 0 var(--rcms-space-4);
  font-size: var(--rcms-font-size-sm);
  color: var(--rcms-gray-500);
  line-height: 1.6;
}
.rcms-gnb__mega-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rcms-warm-700);
  font-weight: 700;
  font-size: var(--rcms-font-size-sm);
}
.rcms-gnb__mega-all:hover { gap: 10px;
}
.rcms-gnb__mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px var(--rcms-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rcms-gnb__mega-cell.is-child .rcms-gnb__mega-link { color: var(--rcms-gray-500); font-weight: 600;
}
.rcms-gnb__mega-link {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  padding: var(--rcms-space-3) var(--rcms-space-3);
  border-radius: var(--rcms-radius-md);
  color: var(--rcms-gray-800);
  font-size: var(--rcms-font-size-sm);
  font-weight: 700;
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out), color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-gnb__mega-link:hover {
  background: var(--rcms-primary-50);
  color: var(--rcms-primary-700);
}
.rcms-gnb__mega-ic { color: var(--rcms-primary-400); flex: none;
}
.rcms-gnb__mega-link:hover .rcms-gnb__mega-ic { color: var(--rcms-primary-600);
}
.rcms-gnb__mega-ext { color: var(--rcms-gray-300); margin-left: auto;
}
@media (prefers-reduced-motion: reduce) {
.rcms-gnb__link::after,
  .rcms-gnb__caret,
  .rcms-gnb__mega { transition: none;
}
}

/* 공개 사이트 모바일 내비게이션 — 햄버거 + 슬라이드 드로어 (리브랜드 2026-07-02). */
.rcms-mnav { display: inline-flex;
}
.rcms-mnav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-surface);
  color: var(--rcms-gray-800);
  cursor: pointer;
}
.rcms-mnav__toggle:hover { background: var(--rcms-gray-50);
}
.rcms-mnav__scrim {
  position: fixed;
  inset: 0;
  background: var(--rcms-overlay-bg);
  z-index: var(--rcms-z-modal);
}
.rcms-mnav__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 360px);
  z-index: calc(var(--rcms-z-modal) + 1);
  display: flex;
  flex-direction: column;
  background: var(--rcms-surface);
  box-shadow: var(--rcms-shadow-xl);
  overflow-y: auto;
}
.rcms-mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--rcms-brand-h);
  padding: 0 var(--rcms-space-4);
  border-bottom: 1px solid var(--rcms-gray-100);
}
.rcms-mnav__title { font-weight: 800; font-size: var(--rcms-font-size-lg); color: var(--rcms-gray-900);
}
.rcms-mnav__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 0; background: transparent; border-radius: var(--rcms-radius-md);
  color: var(--rcms-gray-600); cursor: pointer;
}
.rcms-mnav__close:hover { background: var(--rcms-gray-100);
}

/* 사용자 요약 */
.rcms-mnav__user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-4);
  margin: var(--rcms-space-4);
  background: var(--rcms-primary-50);
  border-radius: var(--rcms-radius-lg);
}
.rcms-mnav__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rcms-gradient-brand);
  color: var(--rcms-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--rcms-font-size-lg);
  flex: none;
}
.rcms-mnav__user-meta { flex: 1 1 auto; min-width: 0;
}
.rcms-mnav__user-name { display: block; color: var(--rcms-gray-900); font-weight: 800;
}
.rcms-mnav__user-points {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--rcms-warm-700); font-size: var(--rcms-font-size-sm); font-weight: 700;
}
.rcms-mnav__user .rcms-pub-btn { flex: 1 1 auto;
}

/* 메뉴 아코디언 */
.rcms-mnav__nav { flex: 1 1 auto; padding: 0 var(--rcms-space-2) var(--rcms-space-4);
}
.rcms-mnav__list { list-style: none; margin: 0; padding: 0;
}
.rcms-mnav__group { border-bottom: 1px solid var(--rcms-gray-100);
}
.rcms-mnav__grp-btn,
.rcms-mnav__grp-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--rcms-space-4) var(--rcms-space-3);
  border: 0;
  background: transparent;
  color: var(--rcms-gray-900);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.rcms-mnav__grp-btn:hover,
.rcms-mnav__grp-link:hover { color: var(--rcms-primary-700);
}
.rcms-mnav__chev { color: var(--rcms-gray-400); transition: transform var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-mnav__grp-btn.is-open .rcms-mnav__chev { transform: rotate(180deg); color: var(--rcms-primary-600);
}
.rcms-mnav__sub { list-style: none; margin: 0 0 var(--rcms-space-2); padding: 0;
}
.rcms-mnav__sublink {
  display: block;
  padding: var(--rcms-space-3) var(--rcms-space-3);
  color: var(--rcms-gray-600);
  font-size: var(--rcms-font-size-sm);
  border-radius: var(--rcms-radius-md);
}
.rcms-mnav__sublink:hover { background: var(--rcms-primary-50); color: var(--rcms-primary-700);
}
.rcms-mnav__foot { padding: var(--rcms-space-4); border-top: 1px solid var(--rcms-gray-100);
}
.rcms-mnav__logout {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; justify-content: center;
  height: 44px;
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-surface);
  color: var(--rcms-gray-600);
  font: inherit; font-weight: 700; cursor: pointer;
}
.rcms-mnav__logout:hover { background: var(--rcms-error-bg); color: var(--rcms-error-text); border-color: var(--rcms-error-bg);
}

/* 트랜지션 */
.rcms-mnav-fade-enter-active, .rcms-mnav-fade-leave-active { transition: opacity var(--rcms-dur) var(--rcms-ease-out);
}
.rcms-mnav-fade-enter, .rcms-mnav-fade-leave-to { opacity: 0;
}
.rcms-mnav-slide-enter-active, .rcms-mnav-slide-leave-active { transition: transform var(--rcms-dur) var(--rcms-ease-out);
}
.rcms-mnav-slide-enter, .rcms-mnav-slide-leave-to { transform: translateX(100%);
}
@media (prefers-reduced-motion: reduce) {
.rcms-mnav__chev { transition: none;
}
.rcms-mnav-fade-enter-active, .rcms-mnav-fade-leave-active,
  .rcms-mnav-slide-enter-active, .rcms-mnav-slide-leave-active { transition: none;
}
}

/* 공개 헤더 유틸바 사용자 위젯 (리브랜드 2026-07-02). 어두운 유틸바 위에 표시. */
.rcms-uw {
  display: inline-flex;
  align-items: center;
  gap: var(--rcms-space-2);
  height: var(--rcms-util-h);
}
.rcms-uw__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rcms-primary-100);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  transition: color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-uw__link:hover { color: var(--rcms-white);
}
.rcms-uw__link--accent { color: var(--rcms-white);
}
.rcms-uw__link--accent:hover { color: var(--rcms-warm-300);
}
.rcms-uw__div { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.2);
}
.rcms-uw__link:focus-visible { outline: 2px solid var(--rcms-white); outline-offset: 2px; border-radius: var(--rcms-radius-sm);
}

/* 마일리지 칩 */
.rcms-uw__points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--rcms-radius-pill);
  background: rgba(249, 115, 22, 0.16);
  color: var(--rcms-warm-200);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-uw__points:hover { background: rgba(249, 115, 22, 0.26); color: var(--rcms-white);
}
.rcms-uw__points-num { color: var(--rcms-white);
}
.rcms-uw__points-unit { opacity: 0.8;
}

/* 사용자 드롭다운 */
.rcms-uw__menu { position: relative;
}
.rcms-uw__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 6px 0 4px;
  border: 0;
  background: transparent;
  color: var(--rcms-white);
  font: inherit;
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--rcms-radius-pill);
}
.rcms-uw__trigger:hover { background: rgba(255, 255, 255, 0.1);
}
.rcms-uw__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--rcms-gradient-warm);
  color: var(--rcms-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex: none;
}
.rcms-uw__avatar--lg { width: 40px; height: 40px; font-size: var(--rcms-font-size-lg);
}
.rcms-uw__caret { color: var(--rcms-primary-200); transition: transform var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-uw__caret.is-open { transform: rotate(180deg);
}
.rcms-uw__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: var(--rcms-space-2);
  background: var(--rcms-surface);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-lg);
  box-shadow: var(--rcms-shadow-lg);
  z-index: var(--rcms-z-dropdown);
}
.rcms-uw__pop-head {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-3);
  margin-bottom: var(--rcms-space-1);
  border-bottom: 1px solid var(--rcms-gray-100);
}
.rcms-uw__pop-name { display: block; color: var(--rcms-gray-900); font-weight: 800; font-size: var(--rcms-font-size-base);
}
.rcms-uw__pop-grade { color: var(--rcms-warm-700); font-size: var(--rcms-font-size-xs); font-weight: 700;
}
.rcms-uw__pop-item {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  width: 100%;
  padding: var(--rcms-space-2) var(--rcms-space-3);
  border: 0;
  background: transparent;
  color: var(--rcms-gray-700);
  font: inherit;
  font-size: var(--rcms-font-size-sm);
  font-weight: 600;
  text-align: left;
  border-radius: var(--rcms-radius-md);
  cursor: pointer;
}
.rcms-uw__pop-item:hover { background: var(--rcms-primary-50); color: var(--rcms-primary-700);
}
.rcms-uw__pop-item .rcms-icon { color: var(--rcms-gray-400);
}
.rcms-uw__pop-item:hover .rcms-icon { color: var(--rcms-primary-600);
}
.rcms-uw__pop-item--danger:hover { background: var(--rcms-error-bg); color: var(--rcms-error-text);
}
.rcms-uw__pop-item--danger:hover .rcms-icon { color: var(--rcms-error-text);
}
.rcms-uw__pop-div { height: 1px; margin: var(--rcms-space-1) 0; background: var(--rcms-gray-100);
}
.rcms-uw-pop-enter-active, .rcms-uw-pop-leave-active { transition: opacity var(--rcms-dur-fast) var(--rcms-ease-out), transform var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-uw-pop-enter, .rcms-uw-pop-leave-to { opacity: 0; transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
.rcms-uw__caret { transition: none;
}
.rcms-uw-pop-enter-active, .rcms-uw-pop-leave-active { transition: none;
}
.rcms-uw-pop-enter, .rcms-uw-pop-leave-to { transform: none;
}
}

/* 공개 통합검색 헤더 트리거 버튼 (PublicSearchBox.vue) — non-scoped, 토큰만. [[css-js-separation]]
 * 커맨드 팔레트(펼침 카드)는 search-overlay.css. 본 파일은 헤더 버튼만. */
.rcms-srchbox {
  display: inline-flex;
  align-items: center;
}
.rcms-srchbox__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--rcms-space-2);
  height: 38px;
  padding: 0 var(--rcms-space-4);
  border: 1px solid var(--rcms-border-color);
  border-radius: 999px;
  background: var(--rcms-white);
  color: var(--rcms-gray-700);
  font-size: var(--rcms-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.rcms-srchbox__trigger:hover {
  border-color: var(--rcms-primary-400);
  background: var(--rcms-gray-50);
  color: var(--rcms-gray-900);
}
.rcms-srchbox__trigger:focus-visible {
  outline: none;
  border-color: var(--rcms-primary-500);
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcms-srchbox__trigger-icon {
  color: var(--rcms-gray-500);
}

/* 모바일 — 아이콘만 원형 버튼 */
@media (max-width: 768px) {
.rcms-srchbox__trigger {
    width: 38px;
    padding: 0;
    justify-content: center;
}
.rcms-srchbox__trigger-text {
    display: none;
}
}

/* 통합검색 커맨드 팔레트 (PublicSearchBox.vue) — non-scoped, 토큰만. [[css-js-separation]]
 * 정부포털식 전체폭 대신 중앙 집중형 카드(Cmd+K 류). 입력 시 입력창 아래에 "전체 검색 + 제안" 별도 뷰. */
.rcms-cmdk__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
  animation: rcms-cmdk-fade 0.14s ease;
}
.rcms-cmdk__card {
  position: fixed;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(640px, 92vw);
  max-height: 76vh;
  background: var(--rcms-white);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: rcms-cmdk-pop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== 입력 ===== */
.rcms-cmdk__head {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-4) var(--rcms-space-6);
  border-bottom: 1px solid var(--rcms-gray-100);
}
.rcms-cmdk__head-icon {
  flex-shrink: 0;
  color: var(--rcms-primary-500);
}
.rcms-cmdk__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--rcms-gray-900);
  font-size: var(--rcms-font-size-xl);
  font-weight: 600;
}
.rcms-cmdk__input::-moz-placeholder {
  color: var(--rcms-gray-300);
  font-weight: 500;
}
.rcms-cmdk__input::placeholder {
  color: var(--rcms-gray-300);
  font-weight: 500;
}
.rcms-cmdk__esc {
  flex-shrink: 0;
  padding: 3px var(--rcms-space-2);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-sm);
  background: var(--rcms-gray-50);
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  cursor: pointer;
}
.rcms-cmdk__esc:hover {
  background: var(--rcms-gray-100);
  color: var(--rcms-gray-700);
}

/* ===== 검색 방식 세그먼트 ===== */
.rcms-cmdk__modes {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-3) var(--rcms-space-6);
  border-bottom: 1px solid var(--rcms-gray-100);
}
.rcms-cmdk__modes-label {
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  color: var(--rcms-gray-500);
}
.rcms-cmdk__seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rcms-gray-200);
  border-radius: 999px;
  background: var(--rcms-gray-50);
}
.rcms-cmdk__segbtn {
  border: 0;
  border-radius: 999px;
  padding: 4px var(--rcms-space-3);
  background: transparent;
  color: var(--rcms-gray-600);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.rcms-cmdk__segbtn:hover {
  color: var(--rcms-gray-900);
}
.rcms-cmdk__segbtn--on {
  background: var(--rcms-primary-600);
  color: var(--rcms-white);
}
.rcms-cmdk__modes-hint {
  margin-left: auto;
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-400);
}

/* ===== 본문 ===== */
.rcms-cmdk__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--rcms-space-2);
  min-height: 180px;
}
.rcms-cmdk__sec + .rcms-cmdk__sec {
  margin-top: var(--rcms-space-2);
}
.rcms-cmdk__sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--rcms-space-2) var(--rcms-space-3) var(--rcms-space-1);
}
.rcms-cmdk__seclabel {
  display: block;
  padding: var(--rcms-space-2) var(--rcms-space-3) var(--rcms-space-1);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rcms-gray-400);
}
.rcms-cmdk__sechead .rcms-cmdk__seclabel {
  padding: 0;
}
.rcms-cmdk__clear {
  border: 0;
  background: transparent;
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-xs);
  cursor: pointer;
}
.rcms-cmdk__clear:hover {
  color: var(--rcms-gray-700);
}
.rcms-cmdk__live {
  display: inline-flex;
  align-items: center;
  gap: var(--rcms-space-1);
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-400);
}
.rcms-cmdk__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rcms-success);
  animation: rcms-cmdk-pulse 1.6s ease infinite;
}

/* 행(제안/인기/전체검색) */
.rcms-cmdk__row {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
  width: 100%;
  padding: var(--rcms-space-3);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--rcms-gray-800);
  font-size: var(--rcms-font-size-sm);
  text-align: left;
  cursor: pointer;
}
.rcms-cmdk__row--on {
  background: var(--rcms-primary-50);
  color: var(--rcms-primary-700);
  box-shadow: inset 3px 0 0 var(--rcms-primary-500);
}
.rcms-cmdk__row--go {
  background: var(--rcms-gray-50);
  font-weight: 600;
}
.rcms-cmdk__row--go.rcms-cmdk__row--on {
  background: var(--rcms-primary-50);
}
.rcms-cmdk__row-icon {
  flex-shrink: 0;
  color: var(--rcms-primary-500);
}
.rcms-cmdk__row-icon--muted {
  color: var(--rcms-gray-400);
}
.rcms-cmdk__row-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rcms-cmdk__enter {
  flex-shrink: 0;
  font-size: var(--rcms-font-size-base);
  color: var(--rcms-gray-300);
}
.rcms-cmdk__poprow {
  padding-top: var(--rcms-space-2);
  padding-bottom: var(--rcms-space-2);
}
.rcms-cmdk__rank {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  font-weight: 800;
  font-size: var(--rcms-font-size-sm);
  color: var(--rcms-gray-300);
}
.rcms-cmdk__rank--top {
  color: var(--rcms-primary-600);
}

/* 최근검색어 칩 */
.rcms-cmdk__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rcms-space-2);
  padding: var(--rcms-space-1) var(--rcms-space-3) var(--rcms-space-2);
}
.rcms-cmdk__chip {
  display: inline-flex;
  align-items: center;
  padding-left: var(--rcms-space-3);
  border-radius: 999px;
  background: var(--rcms-gray-100);
  transition: background-color 0.12s ease;
}
.rcms-cmdk__chip:hover {
  background: var(--rcms-gray-200);
}
.rcms-cmdk__chip-term {
  border: 0;
  background: transparent;
  padding: var(--rcms-space-2) 0;
  color: var(--rcms-gray-700);
  font-size: var(--rcms-font-size-sm);
  cursor: pointer;
}
.rcms-cmdk__chip-del {
  display: inline-flex;
  border: 0;
  background: transparent;
  padding: 0 var(--rcms-space-2);
  color: var(--rcms-gray-400);
  cursor: pointer;
}
.rcms-cmdk__chip-del:hover {
  color: var(--rcms-gray-700);
}
.rcms-cmdk__hintline {
  padding: var(--rcms-space-4) var(--rcms-space-3);
  text-align: center;
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-sm);
}

/* ===== 푸터 ===== */
.rcms-cmdk__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-2) var(--rcms-space-4);
  border-top: 1px solid var(--rcms-gray-100);
  background: var(--rcms-gray-50);
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-400);
}
.rcms-cmdk__keys,
.rcms-cmdk__tip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.rcms-cmdk__foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  margin: 0 1px;
  padding: 1px 5px;
  border: 1px solid var(--rcms-gray-200);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--rcms-white);
  color: var(--rcms-gray-500);
  font-size: 11px;
  font-family: inherit;
}
.rcms-cmdk__foot code {
  margin: 0 2px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--rcms-gray-100);
  color: var(--rcms-gray-600);
  font-size: 11px;
}
.rcms-cmdk__sep {
  margin: 0 var(--rcms-space-2);
  color: var(--rcms-gray-300);
}

/* ===== 애니메이션 ===== */
@keyframes rcms-cmdk-fade {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes rcms-cmdk-pop {
from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98);
}
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}
}
@keyframes rcms-cmdk-pulse {
0%, 100% { opacity: 1;
}
50% { opacity: 0.3;
}
}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
.rcms-cmdk__card {
    top: 7vh;
    width: 94vw;
    max-height: 84vh;
}
.rcms-cmdk__modes {
    flex-wrap: wrap;
    gap: var(--rcms-space-2);
}
.rcms-cmdk__modes-hint {
    width: 100%;
    margin-left: 0;
}
}

/* 공개 사이트 전역 팝업 (M4-Day3) — non-scoped, 토큰만. [[css-js-separation]]
 * rcpop__ = 위치별 팝업(상단 바 / 하단 토스트 / 플로팅 버튼 / 중앙 모달 본문). 중앙 모달은 RcmsModal 재사용. */

/* 위치 고정 요소는 중앙 모달(--rcms-z-modal) 바로 아래 — 모달 오픈 시 배경 딤에 가려진다. */
.rcpop__top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--rcms-z-modal) - 1);
  display: flex;
  flex-direction: column;
}
.rcpop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-4);
  padding: var(--rcms-space-3) var(--rcms-space-6);
  background: var(--rcms-primary-700);
  color: var(--rcms-white);
  box-shadow: var(--rcms-shadow-md);
}
.rcpop__bar-body {
  flex: 1;
  min-width: 0;
  font-size: var(--rcms-font-size-sm);
}
.rcpop__bar-body :deep(p),
.rcpop__bar-body p {
  margin: 0;
}
.rcpop__bar-actions {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
  flex: none;
}

/* 하단 토스트 — 좌하단 스택 */
.rcpop__bottom {
  position: fixed;
  left: var(--rcms-space-6);
  bottom: var(--rcms-space-6);
  z-index: calc(var(--rcms-z-modal) - 1);
  display: flex;
  flex-direction: column;
  gap: var(--rcms-space-3);
  width: 360px;
  max-width: calc(100vw - 2 * var(--rcms-space-6));
}
.rcpop__toast {
  display: flex;
  flex-direction: column;
  gap: var(--rcms-space-2);
  padding: var(--rcms-space-4);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-lg);
  background: var(--rcms-white);
  box-shadow: var(--rcms-shadow-md);
}
.rcpop__toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-2);
}
.rcpop__toast-title {
  font-size: var(--rcms-font-size-base);
  font-weight: 700;
  color: var(--rcms-gray-900);
}
.rcpop__toast-body {
  font-size: var(--rcms-font-size-sm);
  color: var(--rcms-gray-700);
}
.rcpop__toast-body :deep(p),
.rcpop__toast-body p {
  margin: 0 0 var(--rcms-space-2);
}
.rcpop__toast-body :deep(img),
.rcpop__toast-body img {
  max-width: 100%;
  height: auto;
}
.rcpop__toast-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-3);
}

/* 플로팅 버튼 — 우하단 스택 */
.rcpop__fabs {
  position: fixed;
  right: var(--rcms-space-6);
  bottom: var(--rcms-space-6);
  z-index: calc(var(--rcms-z-modal) - 1);
  display: flex;
  flex-direction: column;
  gap: var(--rcms-space-3);
}
.rcpop__fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--rcms-primary-600);
  color: var(--rcms-white);
  box-shadow: var(--rcms-shadow-md);
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.rcpop__fab:hover {
  background: var(--rcms-primary-700);
  transform: translateY(-1px);
}

/* 중앙 모달 본문 */
.rcpop__modal-body {
  font-size: var(--rcms-font-size-base);
  color: var(--rcms-gray-800);
  line-height: var(--rcms-line-height-base);
}
.rcpop__modal-body :deep(img),
.rcpop__modal-body img {
  max-width: 100%;
  height: auto;
}
.rcpop__modal-body :deep(p),
.rcpop__modal-body p {
  margin: 0 0 var(--rcms-space-3);
}

/* 공통 — 링크/닫기/오늘 그만 보기 */
.rcpop__link {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--rcms-font-size-sm);
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.rcpop__toast .rcpop__link,
.rcpop__toast-foot .rcpop__link {
  color: var(--rcms-primary-600);
}
.rcpop__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--rcms-radius-sm);
  color: inherit;
  cursor: pointer;
}
.rcpop__toast .rcpop__x {
  color: var(--rcms-gray-500);
}
.rcpop__x:hover {
  opacity: 0.8;
}
.rcpop__dismiss {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--rcms-font-size-xs);
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.rcpop__dismiss--modal {
  margin-right: auto;
  color: var(--rcms-gray-500);
}
@media (max-width: 560px) {
.rcpop__bottom {
    left: var(--rcms-space-3);
    right: var(--rcms-space-3);
    width: auto;
}
.rcpop__fabs {
    right: var(--rcms-space-3);
    bottom: var(--rcms-space-3);
}
}

/* 공개 챗봇 위젯 (W-8 · M8-Day5) — 채널톡 스타일 플로팅 FAB + 대화 패널.
   디자인 토큰(--rcms-*)만 사용 · 색상 하드코딩 금지 · IE 11 호환(flex/transition, grid 미사용). */
.rcbot {
  position: fixed;
  right: var(--rcms-space-6);
  bottom: var(--rcms-space-6);
  z-index: var(--rcms-z-chatbot);
  font-family: var(--rcms-font-family);
}

/* ── 플로팅 버튼(FAB) ─────────────────────────────────────────────── */
.rcbot__fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rcms-accent-600);
  color: var(--rcms-white);
  cursor: pointer;
  box-shadow: 0 var(--rcms-space-1-5) var(--rcms-space-5) rgba(15, 118, 110, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.rcbot__fab:hover {
  background: var(--rcms-accent-900);
  transform: translateY(-var(--rcms-space-0-5));
  box-shadow: 0 var(--rcms-space-2-5) 26px rgba(15, 118, 110, 0.42);
}
.rcbot__fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--rcms-focus-ring-primary), 0 var(--rcms-space-1-5) var(--rcms-space-5) rgba(15, 118, 110, 0.35);
}
.rcbot__fab.is-open {
  background: var(--rcms-gray-700);
  box-shadow: var(--rcms-shadow-md);
}

/* ── 대화 패널 ───────────────────────────────────────────────────── */
.rcbot__panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - var(--rcms-space-6) * 2);
  height: 600px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  background: var(--rcms-gray-50);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-lg);
  box-shadow: 0 var(--rcms-space-4-5) 48px rgba(15, 23, 42, 0.18);
}

/* 전체화면 토글 */
.rcbot--full .rcbot__panel {
  position: fixed;
  right: var(--rcms-space-4);
  bottom: var(--rcms-space-4);
  top: var(--rcms-space-4);
  left: auto;
  width: min(560px, calc(100vw - var(--rcms-space-4) * 2));
  height: auto;
  max-height: none;
}

/* 패널 등장/퇴장 */
.rcbot-pop-enter-active,
.rcbot-pop-leave-active {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.rcbot-pop-enter,
.rcbot-pop-leave-to {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

/* ── 헤더 ────────────────────────────────────────────────────────── */
.rcbot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: var(--rcms-space-3) var(--rcms-space-4);
  background: var(--rcms-accent-600);
  color: var(--rcms-white);
}
.rcbot__id {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-3);
}
.rcbot__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.rcbot__title {
  margin: 0;
  font-size: var(--rcms-font-size-lg);
  font-weight: 700;
  line-height: 1.2;
}
.rcbot__status {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-1-5);
  margin: var(--rcms-space-0-5) 0 0;
  font-size: var(--rcms-font-size-xs);
  color: rgba(255, 255, 255, 0.85);
}
.rcbot__pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rcms-accent-300);
}
.rcbot__pulse.is-busy {
  animation: rcbot-blink 1s infinite;
}
.rcbot__head-actions {
  display: flex;
  gap: var(--rcms-space-0-5);
}
.rcbot__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--rcms-radius-sm);
  background: transparent;
  color: var(--rcms-white);
  cursor: pointer;
  transition: background 0.15s ease;
}
.rcbot__icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.rcbot__icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* ── 본문(메시지 영역) ───────────────────────────────────────────── */
.rcbot__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--rcms-space-4);
  background: var(--rcms-gray-50);
}
.rcbot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcbot__row {
  display: flex;
  align-items: flex-end;
  gap: var(--rcms-space-2);
  margin-bottom: var(--rcms-space-3);
}
.rcbot__row--user {
  justify-content: flex-end;
}
.rcbot__row-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rcms-accent-100);
  color: var(--rcms-accent-600);
}
.rcbot__bubble {
  max-width: 78%;
  padding: var(--rcms-space-3) var(--rcms-space-4);
  border-radius: var(--rcms-radius-lg);
  background: var(--rcms-white);
  border: 1px solid var(--rcms-border-color);
  box-shadow: var(--rcms-shadow-sm);
}
.rcbot__bubble--user {
  background: var(--rcms-accent-600);
  border-color: var(--rcms-accent-600);
  color: var(--rcms-white);
}
.rcbot__bubble--error {
  background: var(--rcms-error-bg);
  border-color: var(--rcms-error);
  color: var(--rcms-error);
}
.rcbot__text {
  margin: 0;
  font-size: var(--rcms-font-size-base);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 타이핑 인디케이터 */
.rcbot__bubble--typing {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-1);
  padding: var(--rcms-space-3) var(--rcms-space-4);
}
.rcbot__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rcms-gray-400);
  animation: rcbot-bounce 1.2s infinite ease-in-out;
}
.rcbot__dot:nth-child(2) { animation-delay: 0.15s;
}
.rcbot__dot:nth-child(3) { animation-delay: 0.3s;
}

/* 출처(인용) — RAG 증강 응답의 참고 자료(M8-Day8) */
.rcbot__sources {
  margin-top: var(--rcms-space-2);
  padding-top: var(--rcms-space-2);
  border-top: 1px dashed var(--rcms-gray-200);
}
.rcbot__sources-label {
  margin: 0 0 var(--rcms-space-1);
  font-size: var(--rcms-font-size-xs);
  font-weight: 600;
  color: var(--rcms-gray-500);
}
.rcbot__sources-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcbot__source {
  margin-top: var(--rcms-space-0-5);
  font-size: var(--rcms-font-size-xs);
  line-height: 1.5;
}
.rcbot__source-idx {
  color: var(--rcms-accent-600);
  font-weight: 600;
}
.rcbot__source-link {
  color: var(--rcms-accent-700);
  text-decoration: none;
}
.rcbot__source-link:hover {
  text-decoration: underline;
}
.rcbot__source-text {
  color: var(--rcms-gray-600);
}

/* 피드백(좋아요/싫어요) */
.rcbot__fb {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  margin-top: var(--rcms-space-2);
  padding-top: var(--rcms-space-2);
  border-top: 1px solid var(--rcms-gray-100);
}
.rcbot__fb-label {
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-500);
}
.rcbot__fb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-sm);
  background: var(--rcms-white);
  color: var(--rcms-gray-500);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.rcbot__fb-btn:hover:not(:disabled) {
  color: var(--rcms-accent-600);
  border-color: var(--rcms-accent-300);
}
.rcbot__fb-btn.is-on {
  color: var(--rcms-white);
  background: var(--rcms-accent-600);
  border-color: var(--rcms-accent-600);
}
.rcbot__fb-btn:disabled {
  cursor: default;
  opacity: 0.85;
}
.rcbot__fb-thanks {
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-accent-600);
}

/* 빠른 답변 칩 */
.rcbot__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rcms-space-2);
  margin-top: var(--rcms-space-2);
}
.rcbot__chip {
  padding: var(--rcms-space-2) var(--rcms-space-3);
  border: 1px solid var(--rcms-accent-300);
  border-radius: 999px;
  background: var(--rcms-white);
  color: var(--rcms-accent-600);
  font-size: var(--rcms-font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rcbot__chip:hover {
  background: var(--rcms-accent-50);
}
.rcbot__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}

/* ── 오류/안내 ───────────────────────────────────────────────────── */
.rcbot__alert {
  flex-shrink: 0;
  padding: var(--rcms-space-2) var(--rcms-space-4);
  background: var(--rcms-error-bg);
  color: var(--rcms-error);
  font-size: var(--rcms-font-size-sm);
}

/* ── 입력 영역 ───────────────────────────────────────────────────── */
.rcbot__composer {
  display: flex;
  align-items: flex-end;
  gap: var(--rcms-space-2);
  flex-shrink: 0;
  padding: var(--rcms-space-3) var(--rcms-space-4) 0;
  background: var(--rcms-white);
  border-top: 1px solid var(--rcms-border-color);
}
.rcbot__input {
  flex: 1 1 auto;
  max-height: 96px;
  min-height: 40px;
  padding: var(--rcms-space-2) var(--rcms-space-3);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  font-family: inherit;
  font-size: var(--rcms-font-size-base);
  line-height: 1.5;
  resize: none;
  color: var(--rcms-gray-900);
}
.rcbot__input:focus {
  outline: none;
  border-color: var(--rcms-accent-600);
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcbot__input:disabled {
  background: var(--rcms-gray-100);
}
.rcbot__send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-accent-600);
  color: var(--rcms-white);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.rcbot__send:hover:not(:disabled) {
  background: var(--rcms-accent-900);
}
.rcbot__send:disabled {
  opacity: 0.45;
  cursor: default;
}
.rcbot__reset {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rcms-space-2);
  height: 40px;
  border: 1px solid var(--rcms-accent-600);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-white);
  color: var(--rcms-accent-600);
  font-size: var(--rcms-font-size-base);
  font-weight: 600;
  cursor: pointer;
}
.rcbot__reset:hover {
  background: var(--rcms-accent-50);
}
.rcbot__hint {
  flex-shrink: 0;
  margin: 0;
  padding: var(--rcms-space-1-5) var(--rcms-space-4) var(--rcms-space-3);
  background: var(--rcms-white);
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-400);
  text-align: right;
}

/* ── 모바일 ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.rcbot {
    right: var(--rcms-space-4);
    bottom: var(--rcms-space-4);
}
.rcbot__panel {
    width: calc(100vw - var(--rcms-space-4) * 2);
    height: calc(100vh - 110px);
}
.rcbot--full .rcbot__panel {
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100vw;
    border-radius: 0;
}
}

/* ── 애니메이션 ──────────────────────────────────────────────────── */
@keyframes rcbot-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5;
}
30% { transform: translateY(-5px); opacity: 1;
}
}
@keyframes rcbot-blink {
0%, 100% { opacity: 1;
}
50% { opacity: 0.3;
}
}

/* 모션 최소화 선호 — 애니메이션 비활성 */
@media (prefers-reduced-motion: reduce) {
.rcbot__fab,
  .rcbot-pop-enter-active,
  .rcbot-pop-leave-active,
  .rcbot__dot,
  .rcbot__pulse.is-busy {
    transition: none;
    animation: none;
}
}


/* 챗봇 이전 대화 이력 패널(rcbot__history*) · 전역 유일 BEM 클래스 — 토큰만 사용. */
.rcbot__icon-btn.is-active { color: var(--rcms-primary-600);
}
.rcbot__history { display: flex; flex-direction: column; gap: var(--rcms-space-2); flex: 1; min-height: 0; padding: var(--rcms-space-3); overflow-y: auto;
}
.rcbot__history-head { display: flex; align-items: center; justify-content: space-between;
}
.rcbot__history-title { margin: 0; font-size: var(--rcms-font-size-sm); font-weight: 700; color: var(--rcms-gray-700);
}
.rcbot__history-new { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rcms-primary-500); background: var(--rcms-white); color: var(--rcms-primary-600); border-radius: var(--rcms-radius-pill); padding: var(--rcms-space-1) var(--rcms-space-2-5); font: inherit; font-size: var(--rcms-font-size-xs); font-weight: 600; cursor: pointer;
}
.rcbot__history-new:hover { background: var(--rcms-primary-50);
}
.rcbot__history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rcms-space-1);
}
.rcbot__history-item { display: flex; align-items: stretch; gap: var(--rcms-space-1);
}
.rcbot__history-open { flex: 1; min-width: 0; text-align: left; border: 1px solid var(--rcms-border-color); background: var(--rcms-white); border-radius: var(--rcms-radius-md); padding: var(--rcms-space-2) var(--rcms-space-3); cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.rcbot__history-open:hover { border-color: var(--rcms-primary-300); background: var(--rcms-gray-50);
}
.rcbot__history-item-title { font-size: var(--rcms-font-size-sm); color: var(--rcms-gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcbot__history-item-meta { font-size: var(--rcms-font-size-xs); color: var(--rcms-gray-500);
}
.rcbot__history-del { flex: none; width: 32px; border: 1px solid var(--rcms-border-color); background: var(--rcms-white); border-radius: var(--rcms-radius-md); color: var(--rcms-gray-400); cursor: pointer;
}
.rcbot__history-del:hover { color: var(--rcms-error-text); border-color: var(--rcms-error);
}
.rcbot__history-empty { text-align: center; color: var(--rcms-gray-400); font-size: var(--rcms-font-size-sm); padding: var(--rcms-space-6) 0;
}

/* PublicLayout — 공개 사이트 셸 (리브랜드 2026-07-02).
 * 3단 헤더: 유틸바(고객센터+로그인) → 브랜드+메가메뉴(sticky) → 모바일 드로어.
 * 멀티컬럼 푸터. 전부 rcms-* 토큰. */
.rcms-public {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--rcms-public-bg);
}

/* ===== 헤더 ===== */
.rcms-public__header {
  position: relative;
  z-index: 300;
}

/* 1) 유틸바 — 스크롤 시 함께 밀려 올라감(비sticky). 모바일 숨김. */
.rcms-public__util {
  background: var(--rcms-primary-900);
  color: var(--rcms-primary-100);
}
.rcms-public__util-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--rcms-util-h);
  gap: var(--rcms-space-4);
}
.rcms-public__util-left {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-4);
  font-size: var(--rcms-font-size-xs);
}
.rcms-public__util-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rcms-primary-100);
  font-weight: 600;
}
.rcms-public__util-tel b { color: var(--rcms-white);
}
.rcms-public__util-tel:hover { color: var(--rcms-white);
}
.rcms-public__util-hours { color: var(--rcms-primary-300);
}
.rcms-public__util-right { display: flex; align-items: center;
}
@media (max-width: 767px) {
.rcms-public__util { display: none;
}
}

/* 2) sticky 래퍼 — 브랜드 + 메가메뉴 */
.rcms-public__stick {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--rcms-surface);
  border-bottom: 1px solid var(--rcms-gray-200);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
}
/* 관리자 옵션: 상단바 비고정(스크롤 시 함께 올라감) */
.rcms-public__stick--static {
  position: static;
}
.rcms-public__bar {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-6);
  height: var(--rcms-brand-h);
}
.rcms-public__brand {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  flex: none;
  font-weight: 800;
  color: var(--rcms-gray-900);
}
.rcms-public__logo {
  width: 36px;
  height: 36px;
  border-radius: var(--rcms-radius-lg);
  background: var(--rcms-gradient-brand);
  color: var(--rcms-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  box-shadow: var(--rcms-shadow-brand);
}
.rcms-public__logo-img { height: 34px; max-width: 170px; -o-object-fit: contain; object-fit: contain; display: inline-block;
}
.rcms-public__name { font-size: var(--rcms-font-size-lg); letter-spacing: -0.02em;
}

/* 데스크톱 메가메뉴 자리 — 브랜드와 우측 사이 신축 */
.rcms-public__nav { flex: 1 1 auto; min-width: 0; display: flex;
}
.rcms-public__right {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  flex: none;
  margin-left: auto;
}
/* 데스크톱: 메가메뉴 노출 · 모바일 햄버거 숨김 */
.rcms-public__mobilenav { display: none;
}
@media (max-width: 1023px) {
.rcms-public__nav { display: none;
}
.rcms-public__mobilenav { display: inline-flex;
}
}

/* ===== 콘텐츠 ===== */
.rcms-public__content { flex: 1 1 0%; width: 100%; outline: none;
}
.rcms-public__content--boxed {
  padding-top: var(--rcms-space-8);
  padding-bottom: var(--rcms-space-16);
}
.rcms-public__content--bleed {
  padding-top: 0;
  padding-bottom: var(--rcms-space-16);
}

/* ===== 푸터 ===== */
.rcms-public__footer {
  margin-top: var(--rcms-space-16);
  background: var(--rcms-gray-900);
  color: var(--rcms-gray-400);
}
.rcms-public__footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rcms-space-8);
  padding-top: var(--rcms-space-12);
  padding-bottom: var(--rcms-space-8);
}
.rcms-public__footer-brand { display: flex; align-items: center; gap: var(--rcms-space-3);
}
.rcms-public__footer-logo {
  width: 44px; height: 44px;
  border-radius: var(--rcms-radius-lg);
  background: var(--rcms-gradient-brand);
  color: var(--rcms-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--rcms-font-size-lg);
}
.rcms-public__footer-name { color: var(--rcms-white); font-size: var(--rcms-font-size-lg); font-weight: 800;
}
.rcms-public__footer-tag { margin: 4px 0 0; font-size: var(--rcms-font-size-sm); color: var(--rcms-gray-500);
}
.rcms-public__footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--rcms-space-6);
}
.rcms-public__footer-col { display: flex; flex-direction: column; gap: var(--rcms-space-3);
}
.rcms-public__footer-h {
  margin: 0 0 var(--rcms-space-1);
  color: var(--rcms-gray-200);
  font-size: var(--rcms-font-size-sm);
  font-weight: 800;
}
.rcms-public__footer-link {
  color: var(--rcms-gray-400);
  font-size: var(--rcms-font-size-sm);
  transition: color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-public__footer-link:hover { color: var(--rcms-white);
}
.rcms-public__footer-link--strong { color: var(--rcms-gray-200); font-weight: 700;
}
.rcms-public__footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-4);
  padding-top: var(--rcms-space-6);
  padding-bottom: var(--rcms-space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rcms-public__footer-addr {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 4px; font-size: var(--rcms-font-size-sm); color: var(--rcms-gray-400);
}
.rcms-public__footer-copy { margin: 0; font-size: var(--rcms-font-size-xs); color: var(--rcms-gray-500);
}
.rcms-public__footer-sns { display: inline-flex; gap: var(--rcms-space-2);
}
.rcms-public__footer-sns-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rcms-gray-300);
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out), color var(--rcms-dur-fast) var(--rcms-ease-out), transform var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-public__footer-sns-btn:hover { background: var(--rcms-warm-500); color: var(--rcms-white); transform: translateY(-2px);
}
@media (min-width: 768px) {
.rcms-public__footer-top {
    grid-template-columns: 1.4fr 2fr;
    align-items: start;
}
.rcms-public__footer-cols { grid-template-columns: repeat(3, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.rcms-public__footer-sns-btn:hover { transform: none;
}
}

/* BlankLayout — 헤더/푸터 없는 단독 화면(미리보기 창 등). */
.rcms-blank {
  min-height: 100vh;
  background: var(--rcms-admin-bg);
}

/* RcmsToast — 전역 토스트 알림(info/success/warning/error). */
.rcms-toast-region {
  position: fixed;
  top: var(--rcms-space-4);
  right: var(--rcms-space-4);
  z-index: var(--rcms-z-toast);
  pointer-events: none;
}
.rcms-toast-region__list {
  display: flex;
  flex-direction: column;
  gap: var(--rcms-space-2);
  align-items: flex-end;
}
.rcms-toast {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  min-width: 280px;
  max-width: 420px;
  padding: var(--rcms-space-3) var(--rcms-space-4);
  background: var(--rcms-white);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  box-shadow: var(--rcms-shadow-md);
  color: var(--rcms-text-default);
  font-size: var(--rcms-font-size-sm);
  pointer-events: auto;
}
.rcms-toast__msg {
  flex: 1;
}
.rcms-toast__close {
  color: var(--rcms-gray-400);
  display: inline-flex;
}
.rcms-toast__close:hover {
  color: var(--rcms-gray-700);
}
.rcms-toast__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
  border-radius: var(--rcms-radius-sm);
}

/* 타입별 아이콘 색 (System 6역할) */
.rcms-toast--info .rcms-toast__icon {
  color: var(--rcms-info);
}
.rcms-toast--success .rcms-toast__icon {
  color: var(--rcms-success);
}
.rcms-toast--warning .rcms-toast__icon {
  color: var(--rcms-warning);
}
.rcms-toast--error .rcms-toast__icon {
  color: var(--rcms-error);
}
.rcms-toast-enter-active,
.rcms-toast-leave-active {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.rcms-toast-enter,
.rcms-toast-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}

/* RcmsConfirmDialog — 전역 확인 다이얼로그 본문. */
.rcms-confirm__msg {
  margin: 0;
  white-space: pre-line;
}

/* SessionExpiryDialog — 세션 만료 임박 안내 다이얼로그. */
.rcms-sx__time {
  margin-top: var(--rcms-space-2);
  font-size: var(--rcms-font-size-lg);
}
.rcms-sx__hint {
  margin-top: var(--rcms-space-2);
  color: var(--rcms-gray-500);
  font-size: var(--rcms-font-size-sm);
}

/* REINNO CMS Design Tokens — SSOT
 * 원본: .claude/context/design-system.md 의 :root 블록을 그대로 이식.
 * ★ 이 파일이 모든 색/간격/보더/라운드/그림자/z-index 토큰의 단일 진실 원천(SSOT).
 *   컴포넌트 CSS 에 hex 직접 작성 0건 — 전부 var(--rcms-*) 참조.
 * font-family 선언은 여기 변수 정의만, 실제 적용은 _typography.css 단 1곳.
 */

:root {
  /* ===== Typography (단일 폰트 원칙 — _typography.css 에서만 사용) ===== */
  --rcms-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  /* Font sizes (M-8 — SESSION-1-1-P 회차 2 보강) */
  --rcms-font-size-xs:   12px;
  --rcms-font-size-sm:   13px;
  --rcms-font-size-base: 14px;
  --rcms-font-size-lg:   16px;
  --rcms-font-size-xl:   18px;
  --rcms-font-size-2xl:  24px;
  --rcms-font-size-3xl:  30px;
  --rcms-line-height-base: 1.5;

  /* IE 11 fallback: Pretendard Variable 미지원 시 Pretendard static fontface 자동 fallback (assets/fonts/ 로컬 번들) */

  /* ===== Primary (브랜드 / 주 액션) — 차분한 블루, 정부24 톤 (10단계) ===== */
  --rcms-primary-50:  #EFF6FF;
  --rcms-primary-100: #DBEAFE;
  --rcms-primary-200: #BFDBFE;
  --rcms-primary-300: #93C5FD;
  --rcms-primary-400: #60A5FA;
  --rcms-primary-500: #3B82F6;
  --rcms-primary-600: #1E40AF;  /* 기본 브랜드색 (PROJECT_BRIEF §5 명시) — 흰색 대비 8.55:1 (AAA) */
  --rcms-primary-700: #1E3A8A;
  --rcms-primary-800: #1E306C;
  --rcms-primary-900: #172554;

  /* ===== Accent (보조 강조 / AI / RAG / 챗봇 표시) — 차분한 Teal (AI 기능 마크업) ===== */
  --rcms-accent-50:  #F0FDFA;
  --rcms-accent-100: #CCFBF1;
  --rcms-accent-300: #5EEAD4;
  --rcms-accent-600: #0F766E;   /* AI/RAG/챗봇 활성 표시. 흰색 대비 5.34:1 (AA) */
  --rcms-accent-900: #134E4A;

  /* ===== Gray (Cool, 11단계 강제) ===== */
  --rcms-gray-50:  #F9FAFB;
  --rcms-gray-100: #F3F4F6;
  --rcms-gray-200: #E5E7EB;
  --rcms-gray-300: #D1D5DB;
  --rcms-gray-400: #9CA3AF;
  --rcms-gray-500: #6B7280;
  --rcms-gray-600: #4B5563;
  --rcms-gray-700: #374151;
  --rcms-gray-800: #1F2937;
  --rcms-gray-900: #111827;
  --rcms-gray-950: #030712;

  /* ===== System Colors (4역할 × 3단계: main / text / bg) =====
   * 모든 -text vs -bg 조합 WCAG 4.5:1 이상 검증 통과
   */
  --rcms-success:      #16A34A;  /* 성공/긍정/신뢰 높음 */
  --rcms-success-text: #15803D;  /* on bg 컬러: 7.21:1 */
  --rcms-success-bg:   #DCFCE7;

  --rcms-warning:      #D97706;  /* 경고/주의/신뢰 보통 */
  --rcms-warning-text: #B45309;  /* on bg: 7.04:1 */
  --rcms-warning-bg:   #FEF3C7;

  --rcms-error:        #DC2626;  /* 오류/실패/신뢰 낮음 */
  --rcms-error-text:   #B91C1C;  /* on bg: 7.43:1 */
  --rcms-error-bg:     #FEE2E2;

  --rcms-info:         #0284C7;  /* 안내/중립 */
  --rcms-info-text:    #075985;  /* on bg: 7.59:1 */
  --rcms-info-bg:      #E0F2FE;

  /* ===== Extended states — 브랜드 팔레트 외 특수 상태(정규화 잔여, 현재 값 보존) =====
   * indigo = '결재중/결정' · violet = 'AI/특수'. 화면별 하드코딩을 이 토큰으로 통일.
   */
  --rcms-indigo-bg:     #EEF2FF;
  --rcms-indigo-text:   #4338CA;
  --rcms-indigo-border: #C7D2FE;
  --rcms-violet-bg:     #EDE9FE;
  --rcms-violet-text:   #5B21B6;

  /* ===== Compat aliases — 화면 CSS 가 참조하던 미정의 토큰을 정식 토큰에 매핑(값 동일 · SSOT 일원화) ===== */
  --rcms-danger:       var(--rcms-error);
  --rcms-danger-text:  var(--rcms-error-text);
  --rcms-danger-bg:    var(--rcms-error-bg);
  --rcms-danger-50:    var(--rcms-error-bg);
  --rcms-danger-700:   var(--rcms-error-text);
  --rcms-success-50:   var(--rcms-success-bg);
  --rcms-success-200:  var(--rcms-success);
  --rcms-success-700:  var(--rcms-success-text);
  --rcms-warning-50:   var(--rcms-warning-bg);
  --rcms-warning-700:  var(--rcms-warning-text);
  --rcms-text-strong:  var(--rcms-gray-900);
  --rcms-font-size-md: var(--rcms-font-size-lg);
  --rcms-radius-full:  var(--rcms-radius-pill);
  --rcms-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ===== Surface — neutral background (C-3 — SESSION-1-1-P 회차 2) ===== */
  --rcms-white: #FFFFFF;          /* gray-50 위 카드 분리용 흰색 단일 토큰 */

  /* ===== Text — semantic aliases (SESSION-1-7-FU vue Dialog 정합) =====
   * gray-800 / gray-500 의 의미적 별칭. Vue Dialog 4종(common 번들) 의 본문/부가 텍스트 일관성용.
   */
  --rcms-text-default:           var(--rcms-gray-800);    /* #1F2937 */
  --rcms-text-muted:             var(--rcms-gray-500);    /* #6B7280 */

  /* ===== SNS provider hover variants (C-3 — catalog C-22 §provider 매핑) =====
   * 카카오 / 네이버 / 페이스북 brand main hex 는 외부 약관 정합 — 본 토큰 카탈로그에서 관리.
   * hover 변형은 brand main 의 -3% 톤다운 (`docs/00_sns_integration_catalog.md` C-22 등재).
   */
  --rcms-sns-kakao-bg:           #FEE500;
  --rcms-sns-kakao-bg-hover:     #EAD400;
  --rcms-sns-kakao-text:         #191919;
  --rcms-sns-naver-bg:           #03C75A;
  --rcms-sns-naver-bg-hover:     #02A94A;
  --rcms-sns-naver-text:         #FFFFFF;
  --rcms-sns-facebook-bg:        #1877F2;
  --rcms-sns-facebook-bg-hover:  #1567D5;
  --rcms-sns-facebook-text:      #FFFFFF;

  /* ===== Focus ring (C-4 — primary-600 + error 알파 변형) ===== */
  --rcms-focus-ring-primary:    rgba(30, 64, 175, 0.15);
  --rcms-focus-ring-error:      rgba(220, 38, 38, 0.15);

  /* ===== Overlay — modal/dialog backdrop (SESSION-1-7-FU vue Dialog 정합) =====
   * gray-900(#111827) base + alpha. SessionWarningDialog(.5) / SessionExpiredDialog(.6 — 강조).
   */
  --rcms-overlay-bg:            rgba(17, 24, 39, 0.5);
  --rcms-overlay-bg-strong:     rgba(17, 24, 39, 0.6);

  /* ===== Scrollbar (전역 chrome — core/_scrollbar.css) ===== */
  --rcms-scrollbar-size:             10px;
  --rcms-scrollbar-track:            transparent;
  --rcms-scrollbar-thumb:            var(--rcms-gray-300);
  --rcms-scrollbar-thumb-hover:      var(--rcms-gray-400);
  --rcms-scrollbar-thumb-dark:       rgba(174, 186, 203, 0.30);   /* 다크 LNB(#0E1626) 위 밝은 반투명 thumb */
  --rcms-scrollbar-thumb-dark-hover: rgba(174, 186, 203, 0.50);

  /* ===== Shadow (C-4 — admin variant 강조용 알파) ===== */
  --rcms-shadow-md-admin:       0 8px 24px rgba(0, 0, 0, 0.08);

  /* ===== Admin shell — L-ADMIN 다크 네이비 사이드바 (2026-05-26 리프레시 · 사용자 승인) ===== */
  --rcms-side-bg:          #0E1626;                 /* 좌측 LNB 배경 (deep navy) */
  --rcms-side-bg-raise:    #1B2942;                 /* LNB hover/raise */
  --rcms-side-text:        #AEBACB;                 /* LNB 기본 텍스트 */
  --rcms-side-dim:         #8290A6;                 /* LNB 그룹 라벨·아이콘 dim — 네이비(#0E1626) 대비 5.59:1 (KWCAG 2.2 AA 텍스트 4.5:1↑, M9-Day3 보정: 4.15→5.59) */
  --rcms-side-active-bg:   rgba(37, 99, 235, 0.16); /* LNB 활성 항목 배경 (채움 — border-left 스트라이프 금지) */
  --rcms-side-active-icon: #7AA2F7;                 /* LNB 활성 항목 아이콘 */
  --rcms-admin-bg:         #F6F8FB;                 /* 관리자 콘텐츠 영역 배경 */
  --rcms-blue-interactive: #1D4ED8;                 /* 인터랙티브 primary (blue-700 — brand #1E40AF 의 밝은 변형) */

  /* ===== Spinner track (C-4 — 일반 + prefers-reduced-motion 변형) ===== */
  --rcms-spinner-track:         rgba(255, 255, 255, 0.3);
  --rcms-spinner-track-reduced: rgba(255, 255, 255, 0.5);

  /* ===== Spacing scale (토큰 번호 = px ÷ 4) ===== */
  --rcms-space-0-5: 2px;    /* 최소 스케일 확장 — 미세 간격 */
  --rcms-space-1: 4px;
  --rcms-space-1-5: 6px;    /* 최소 스케일 확장 — 칩/뱃지 gap */
  --rcms-space-2: 8px;
  --rcms-space-2-5: 10px;   /* 최소 스케일 확장 */
  --rcms-space-3: 12px;
  --rcms-space-3-5: 14px;   /* 빈번 off-scale — 확장 */
  --rcms-space-4: 16px;
  --rcms-space-4-5: 18px;   /* 빈번 off-scale — 확장 */
  --rcms-space-5: 20px;     /* 빈번 off-scale — 확장 */
  --rcms-space-6: 24px;
  --rcms-space-8: 32px;
  --rcms-space-12: 48px;
  --rcms-space-16: 64px;

  /* ===== Semantic control sizing (의미 토큰 — '왜 이 값'을 드러냄) ===== */
  --rcms-control-height:        40px;   /* 관리자 폼 컨트롤(입력/버튼) 표준 높이 */
  --rcms-public-control-height: 46px;   /* 공개 사이트 폼 컨트롤 높이(터치 타깃) */
  --rcms-toolbar-button-size:   28px;   /* 리치텍스트/툴바 정사각 버튼 */

  /* ===== Radius / Border / Shadow (그라데이션·글로우·네온 0건) ===== */
  --rcms-radius-sm: 4px;
  --rcms-radius-md: 6px;
  --rcms-radius-lg: 12px;
  --rcms-border-color: var(--rcms-gray-200);
  --rcms-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --rcms-shadow-md: 0 4px 12px rgba(0,0,0,.06);

  /* ===== z-index scale ===== */
  --rcms-z-dropdown: 1000;
  --rcms-z-modal: 2000;
  --rcms-z-toast: 3000;
  --rcms-z-chatbot: 2500;  /* 챗봇 FAB · 패널은 모달과 토스트 사이 */

  /* ===== Breakpoints (5단계 강제, 모바일 퍼스트) — design-system.md 주석값 토큰화 =====
   * CSS 변수는 @media 조건에 직접 못 쓰므로, 미디어 쿼리는 동일 px 리터럴(min-width)을 사용.
   */
  --rcms-bp-mobile:  360px;   /* 공공 모바일 최소 */
  --rcms-bp-tablet:  768px;
  --rcms-bp-desktop: 1024px;  /* 관리자 콘솔 최소 — 모던 브라우저 권장 시작 */
  --rcms-bp-wide:    1280px;
  --rcms-bp-ultra:   1536px;

  /* ============================================================
   * 공개 사이트 리브랜드 2026-07-02 (사용자 승인 — jhhyun@reinno.com)
   * "과감한 리브랜드 · 네이비 + 따뜻한 코랄 포인트 · 역동적 시빅 포털".
   * 아래 토큰은 **공개(public) 화면 전용** 확장이다. 관리자 콘솔/다이얼로그/토스트는
   * 기존 플랫 원칙(그림자 sm/md · 단색)을 그대로 유지한다.
   * AI 클리셰 금지(보라·네온·무지개·형광·글로우)는 계속 준수 —
   * 여기의 그라데이션은 전부 "단일 색상 톤(navy 또는 coral)" 이며 알파 그림자는 < 0.5.
   * ============================================================ */

  /* ===== Warm accent — 코랄/앰버 (참여·에너지 포인트) ===== */
  --rcms-warm-50:  #FFF7ED;
  --rcms-warm-100: #FFEDD5;
  --rcms-warm-200: #FED7AA;
  --rcms-warm-300: #FDBA74;
  --rcms-warm-400: #FB923C;
  --rcms-warm-500: #F97316;   /* 메인 코랄 — 채움/장식/아이콘 */
  --rcms-warm-600: #EA580C;   /* 큰 텍스트·아이콘 (흰색 대비 3.6:1 — 18px+/굵게 한정) */
  --rcms-warm-700: #C2410C;   /* 본문 강조 텍스트 (흰색 대비 4.9:1 AA) */
  --rcms-warm-800: #9A3412;
  --rcms-warm-900: #7C2D12;
  --rcms-warm-text: #C2410C;  /* 흰 배경 위 코랄 텍스트(AA) */
  --rcms-warm-bg:   #FFF7ED;  /* 코랄 소프트 틴트 배경 */
  --rcms-warm-border: #FED7AA;

  /* ===== 공개 표면/배경 ===== */
  --rcms-public-bg:      #F4F6FB;   /* 공개 페이지 바탕 — 살짝 쿨한 오프화이트 */
  --rcms-surface:        #FFFFFF;
  --rcms-surface-muted:  #F8FAFC;
  --rcms-hairline:       rgba(17, 24, 39, 0.06);  /* 초박 구분선 */

  /* ===== 톤 그라데이션 (단일 색상 계열 — 보라/무지개 아님) ===== */
  --rcms-gradient-hero:  linear-gradient(135deg, #172554 0%, #1E3A8A 42%, #1E40AF 100%);
  --rcms-gradient-brand: linear-gradient(135deg, var(--rcms-primary-700) 0%, var(--rcms-primary-500) 100%);
  --rcms-gradient-warm:  linear-gradient(135deg, #FB923C 0%, #F97316 55%, #EA580C 100%);
  --rcms-gradient-sky:   linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
  --rcms-gradient-veil:  linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(17,24,39,0.55) 100%); /* 이미지 위 가독성 베일 */

  /* ===== 확장 라운드 (공개 카드/히어로) ===== */
  --rcms-radius-xl:   16px;
  --rcms-radius-2xl:  24px;
  --rcms-radius-3xl:  32px;
  --rcms-radius-pill: 999px;

  /* ===== 확장 엘리베이션 (모두 알파 < 0.5 · "glow" 아님) ===== */
  --rcms-shadow-lg:    0 12px 32px rgba(17, 24, 39, 0.10);
  --rcms-shadow-xl:    0 24px 48px rgba(17, 24, 39, 0.14);
  --rcms-shadow-brand: 0 14px 30px rgba(30, 64, 175, 0.20);   /* 네이비 컬러 섀도 */
  --rcms-shadow-warm:  0 12px 26px rgba(234, 88, 12, 0.24);   /* 코랄 컬러 섀도 */
  --rcms-shadow-focus-warm: rgba(234, 88, 12, 0.18);

  /* ===== 모션 토큰 (전부 prefers-reduced-motion 에서 무력화) ===== */
  --rcms-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --rcms-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rcms-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rcms-dur-fast: 0.18s;
  --rcms-dur:      0.28s;
  --rcms-dur-slow: 0.5s;

  /* ===== 공개 헤더 높이(유틸바 + 브랜드 + 메가메뉴) ===== */
  --rcms-util-h:   36px;
  --rcms-brand-h:  64px;
  --rcms-mega-h:   52px;
}

/* ★ font-family 선언은 이 파일 단 1곳 (design-system-framework §1).
 *   다른 어떤 CSS/.vue 파일도 font-family 를 재선언하지 않는다 (폼 컨트롤은 _reset.css 의 `font: inherit`).
 *
 * Pretendard 는 로컬 번들 (external-assets.md — Google Fonts/CDN 금지).
 * woff2 미프로비저닝 상태 → 현재는 local() 만 사용(설치된 OS 폰트 활용).
 *   미설치 시 fallback 체인(Apple SD Gothic Neo / Malgun Gothic)으로 한글이 정상 렌더된다.
 * 배포 시 woff2 를 /fonts/ 로 서빙하고 아래 각 @font-face 에 url(...) src 를 추가(프로비저닝 — README 참조).
 */

/* 가변폰트 (모던 브라우저 — 관리자 콘솔) */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Variable");
}

/* IE 11 fallback — 가변폰트 미지원 → static 400 / 700 (공개 사이트) */
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Regular");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Bold");
}

html {
  font-family: var(--rcms-font-family);
  font-size: var(--rcms-font-size-base);
  line-height: var(--rcms-line-height-base);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 최소 리셋 — 박스모델 통일 + UA 기본값 정리. 색/폰트 토큰은 _variables/_typography 가 담당. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--rcms-text-default);
  background: var(--rcms-admin-bg);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

/* 폼 컨트롤 폰트 상속 — `font: inherit` 로 font-family 재선언 회피(§1 단일 폰트 규칙 준수) */
button,
input,
select,
textarea,
optgroup {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* 모션 최소화 선호 사용자 — 트랜지션/애니메이션 억제 (ux-principles 깜빡임 방지) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
 * REINNO CMS · 전역 커스텀 스크롤바 (라이브러리 없이 CSS-only)
 *  - 기본 브라우저 스크롤바 대신 얇고 둥근 토큰 기반 스크롤바(공개·관리자 공통).
 *  - WebKit(Chrome/Edge/Safari) + Firefox 커버. 값은 전부 var(--rcms-scrollbar-*) SSOT.
 *  - 다크 컨텍스트(관리자 LNB .rcms-side)는 밝은 반투명 thumb 로 자동 전환.
 *  - 컴포넌트별 커스텀(.rcms-pub-scroller 등)은 특이도가 높아 그대로 유지된다.
 * ============================================================================= */

/* ── Firefox ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rcms-scrollbar-thumb) var(--rcms-scrollbar-track);
}

/* ── WebKit (Chrome/Edge/Safari) ── */
::-webkit-scrollbar {
  width: var(--rcms-scrollbar-size);
  height: var(--rcms-scrollbar-size);
}
::-webkit-scrollbar-track {
  background: var(--rcms-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--rcms-scrollbar-thumb);
  border: var(--rcms-space-0-5) solid transparent;   /* 2px 투명 테두리 → 떠 있는 pill 느낌(오버레이) */
  border-radius: var(--rcms-radius-pill);
  background-clip: padding-box;
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rcms-scrollbar-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── 다크 컨텍스트 — 관리자 LNB 사이드바 ── */
.rcms-side,
.rcms-side__nav {
  scrollbar-color: var(--rcms-scrollbar-thumb-dark) transparent;
}
.rcms-side ::-webkit-scrollbar-thumb,
.rcms-side__nav::-webkit-scrollbar-thumb {
  background: var(--rcms-scrollbar-thumb-dark);
  background-clip: padding-box;
}
.rcms-side ::-webkit-scrollbar-thumb:hover,
.rcms-side__nav::-webkit-scrollbar-thumb:hover {
  background: var(--rcms-scrollbar-thumb-dark-hover);
  background-clip: padding-box;
}

/* prefers-reduced-motion: thumb 색 전환 제거 */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb { transition: none; }
}

/* 레이아웃 프리미티브 + 5단계 브레이크포인트(모바일 퍼스트, min-width). */

/* SVG 스프라이트 루트 — 레이아웃에서 제거하되 display:none 금지(<use> 참조 깨짐 방지). */
.rcms-svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 모달 열림 시 배경 스크롤 잠금 */
body.rcms-modal-open {
  overflow: hidden;
}

/* 스킵 링크 — 첫 번째 포커스 가능 요소로 "본문 바로가기" 제공 (framework §8 WCAG) */
.rcms-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--rcms-z-toast);
  padding: var(--rcms-space-2) var(--rcms-space-4);
  background: var(--rcms-primary-600);
  color: var(--rcms-white);
  border-radius: 0 0 var(--rcms-radius-md) 0;
}
.rcms-skip-link:focus {
  left: 0;
}

/* 전역 키보드 포커스 표시 — KWCAG 2.2 / WCAG 2.4.7 (M9-Day3)
 * 일부 컴포넌트(검색 입력 등 다수)가 `outline: none` 으로 네이티브 포커스 링을 제거하고
 * 컨테이너 :focus-within 링을 누락한 경우가 있어, 키보드 포커스 시 표시가 사라지는 결함이 있었다.
 * 아래 safety-net 은 키보드 포커스(:focus-visible)에만 적용되며(마우스 클릭에는 미적용),
 * outline:none 을 확실히 이기도록 !important 로 가시적 포커스 링을 항상 보장한다.
 * tabindex="-1"(프로그램적 포커스 대상: main/모달)은 제외해 불필요한 외곽선을 피한다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[contenteditable]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--rcms-primary-600) !important;
  outline-offset: 2px;
}

/* 컨테이너 — 모바일 퍼스트로 BP 5단계 전부 사용 */
.rcms-container {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--rcms-space-4);
  padding-right: var(--rcms-space-4);
}

/* 1 모바일 360 */
@media (min-width: 360px) {
  .rcms-container { max-width: 100%; }
}
/* 2 태블릿 768 */
@media (min-width: 768px) {
  .rcms-container {
    max-width: 720px;
    padding-left: var(--rcms-space-6);
    padding-right: var(--rcms-space-6);
  }
}
/* 3 데스크탑 1024 (관리자 콘솔 최소) */
@media (min-width: 1024px) {
  .rcms-container { max-width: 960px; }
}
/* 4 와이드 1280 */
@media (min-width: 1280px) {
  .rcms-container { max-width: 1200px; }
}
/* 5 울트라 1536 */
@media (min-width: 1536px) {
  .rcms-container {
    max-width: 1440px;
    padding-left: var(--rcms-space-8);
    padding-right: var(--rcms-space-8);
  }
}

/* 토큰화된 유틸리티 — Bootstrap/Tailwind 클래스 직접 사용 금지(framework §5). 전부 rcms- 접두사. */

/* 스크린리더 전용 (시각적 숨김, 접근성 텍스트 유지) */
.rcms-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 숫자 정렬 — 데이터 테이블/통계 (impeccable 원칙3 tabular-nums) */
.rcms-tnum {
  font-variant-numeric: tabular-nums;
}

/* 말줄임 */
.rcms-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 텍스트 톤 헬퍼 (토큰 기반) */
.rcms-text-muted { color: var(--rcms-text-muted); }
.rcms-text-default { color: var(--rcms-text-default); }

/* 정렬 — 테이블 우측 정렬 등(슬롯 셀이 부모 스코프라 전역 필요) */
.rcms-text-right { text-align: right; }
.rcms-text-center { text-align: center; }

/* REINNO CMS 공개 사이트 모션 레이어 (리브랜드 2026-07-02).
 * 스크롤 진입 리빌 + 키프레임 + 데코 애니메이션. 전부 토큰 기반.
 * ★ 접근성: prefers-reduced-motion: reduce 사용자는 모든 모션이 즉시 무력화(최종 상태로 표시)된다.
 *   리빌 대상은 v-reveal 디렉티브(utils/directives.js)가 IntersectionObserver 로 .is-in 을 부여한다.
 *   JS 미실행/관찰 실패 시에도 콘텐츠가 사라지지 않도록 .no-js / .is-in 폴백을 둔다. */

/* ===== 스크롤 진입 리빌 ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--rcms-dur-slow) var(--rcms-ease-out),
    transform var(--rcms-dur-slow) var(--rcms-ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* 방향 변형 */
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="left"].is-in,
[data-reveal="right"].is-in,
[data-reveal="scale"].is-in { transform: none; }

/* 스태거 — 부모에 data-reveal-stagger, 자식 순서대로 지연 */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--rcms-dur-slow) var(--rcms-ease-out),
    transform var(--rcms-dur-slow) var(--rcms-ease-out);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0.04s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 0.10s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 0.22s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 0.28s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 0.34s; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: 0.40s; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: 0.46s; }

/* ===== 키프레임 ===== */
@keyframes rcms-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rcms-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rcms-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes rcms-float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(10px) rotate(6deg); }
}
@keyframes rcms-spin {
  to { transform: rotate(360deg); }
}
@keyframes rcms-shimmer {
  0%   { background-position: -450px 0; }
  100% { background-position: 450px 0; }
}
@keyframes rcms-pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}
@keyframes rcms-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== 유틸 헬퍼 ===== */
.rcms-anim-fade-up { animation: rcms-fade-up var(--rcms-dur-slow) var(--rcms-ease-out) both; }
.rcms-anim-fade-in { animation: rcms-fade-in var(--rcms-dur) var(--rcms-ease-out) both; }
.rcms-float { animation: rcms-float 7s ease-in-out infinite; }
.rcms-float-slow { animation: rcms-float-slow 11s ease-in-out infinite; }

/* 스켈레톤 로딩 — shimmer */
.rcms-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--rcms-gray-100);
  border-radius: var(--rcms-radius-md);
}
.rcms-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  background-size: 450px 100%;
  background-repeat: no-repeat;
  animation: rcms-shimmer 1.3s ease-in-out infinite;
}

/* 실시간 표시용 코랄 펄스 도트 */
.rcms-livedot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rcms-warm-500);
  animation: rcms-pulse-dot 1.8s ease-out infinite;
}

/* ===== 광과민성/모션 최소화 — 전면 무력화 ===== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rcms-anim-fade-up,
  .rcms-anim-fade-in,
  .rcms-float,
  .rcms-float-slow,
  .rcms-livedot,
  .rcms-skeleton::after {
    animation: none !important;
  }
}

/* 공통 폼 컨트롤 — 여러 기능에서 재사용(설문 등록·속성 패널·분기·쿼터 · 공개 신청/문의 등).
 * non-scoped 전역 클래스(rcms-ff- 프리픽스), 토큰만 사용. [[css-js-separation]]
 *
 * ★ 광범위 공유 파일 — 관리자 콘솔(dense flat)과 공개 폼(elevated)이 같은 셀렉터를 공유한다.
 *   따라서 이 파일은 두 계층으로 구성한다:
 *     1) BASE  — 모든 소비처(관리자 포함)가 의존하는 기본 컨트롤. 차분·플랫 유지(높이 40, radius-md).
 *     2) PUBLIC ELEVATION — 오직 공개 인증/신청 카드(.rcms-auth, AuthCard 전용 래퍼) 하위에서만
 *        리브랜드 언어(네이비+코랄·깊은 카드·부드러운 모션)를 덧입힌다. 관리자 화면에는 새지 않는다.
 *   셀렉터/구조는 절대 변경하지 않는다(소비 .vue 가 클래스에 의존). 색상 hex 직접값 0건 — var(--rcms-*) 만.
 *   리브랜드 2026-07-02 (사용자 승인 · jhhyun@reinno.com). */

/* ============================================================================
 * 1) BASE — 공용 폼 컨트롤 (관리자·공개 공통 기본형)
 * ========================================================================== */

.rcms-ff {
  display: flex;
  flex-direction: column;
  gap: var(--rcms-space-1);
}
.rcms-ff__label {
  font-size: var(--rcms-font-size-sm);
  font-weight: 600;
  color: var(--rcms-gray-700);
}
.rcms-ff__req {
  margin-left: var(--rcms-space-0-5);
  color: var(--rcms-error);
  font-style: normal;
}
.rcms-ff__hint {
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-gray-400);
}
.rcms-ff__error {
  font-size: var(--rcms-font-size-xs);
  color: var(--rcms-error-text);
}

/* 텍스트/숫자/날짜 단일 입력 */
.rcms-ff-input,
.rcms-ff-textarea {
  width: 100%;
  padding: var(--rcms-space-2) var(--rcms-space-3);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  font-size: var(--rcms-font-size-sm);
  font-family: inherit;
  color: var(--rcms-gray-800);
  background: var(--rcms-white);
  transition:
    border-color var(--rcms-dur-fast) var(--rcms-ease-out),
    box-shadow var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-ff-input {
  height: var(--rcms-control-height);
}
.rcms-ff-textarea {
  resize: vertical;
  min-height: 76px;
}
.rcms-ff-input:hover,
.rcms-ff-textarea:hover {
  border-color: var(--rcms-gray-300);
}
.rcms-ff-input:focus,
.rcms-ff-textarea:focus {
  outline: none;
  border-color: var(--rcms-primary-500);
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcms-ff-input::placeholder,
.rcms-ff-textarea::placeholder {
  color: var(--rcms-gray-400);
}
.rcms-ff-input:disabled,
.rcms-ff-textarea:disabled {
  background: var(--rcms-gray-50);
  color: var(--rcms-gray-400);
  cursor: not-allowed;
}

/* 네이티브 select + 커스텀 캐럿 */
.rcms-ff-select {
  position: relative;
  display: block;
}
.rcms-ff-select select {
  width: 100%;
  height: var(--rcms-control-height);
  padding: 0 34px 0 var(--rcms-space-3);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-white);
  color: var(--rcms-gray-800);
  font-size: var(--rcms-font-size-sm);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition:
    border-color var(--rcms-dur-fast) var(--rcms-ease-out),
    box-shadow var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-ff-select select:hover {
  border-color: var(--rcms-gray-300);
}
.rcms-ff-select select:focus {
  outline: none;
  border-color: var(--rcms-primary-500);
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcms-ff-select select:disabled {
  background: var(--rcms-gray-50);
  color: var(--rcms-gray-400);
  cursor: not-allowed;
}
.rcms-ff-select__caret {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--rcms-gray-400);
}

/* 2열 그리드(성명/연락처 등) — 공개 본인인증 폼(.rcms-ff-grid)이 소비 */
.rcms-ff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rcms-space-3);
}
/* 2열 그리드(기간 등) — 관리자 폼(.rcms-ff-grid2)이 소비 */
.rcms-ff-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rcms-space-3);
}
@media (max-width: 560px) {
  .rcms-ff-grid,
  .rcms-ff-grid2 {
    grid-template-columns: 1fr;
  }
}

/* 필드형 선택 버튼 — 클릭 시 모달 등으로 선택(부서 트리 선택 등). */
.rcms-ff-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rcms-space-2);
  width: 100%;
  height: var(--rcms-control-height);
  padding: 0 var(--rcms-space-3);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-white);
  color: var(--rcms-gray-800);
  font-size: var(--rcms-font-size-sm);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--rcms-dur-fast) var(--rcms-ease-out),
    box-shadow var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-ff-picker:hover {
  border-color: var(--rcms-gray-300);
}
.rcms-ff-picker:focus-visible {
  outline: none;
  border-color: var(--rcms-primary-500);
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
.rcms-ff-picker.is-placeholder {
  color: var(--rcms-gray-400);
}
.rcms-ff-picker :deep(.rcms-icon),
.rcms-ff-picker .rcms-icon {
  color: var(--rcms-gray-400);
  flex: none;
}
.rcms-ff-picker__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 세그먼트 컨트롤 — 옵션 수가 적을 때 드롭다운 대신(1클릭 선택). 재사용. */
.rcms-seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-white);
  overflow: hidden;
}
.rcms-seg--block {
  display: flex;
  width: 100%;
}
.rcms-seg__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rcms-space-1-5);
  height: 38px;
  padding: 0 var(--rcms-space-4);
  border: 0;
  border-right: 1px solid var(--rcms-border-color);
  background: transparent;
  color: var(--rcms-gray-600);
  font-size: var(--rcms-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--rcms-dur-fast) var(--rcms-ease-out),
    color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-seg--block .rcms-seg__opt {
  flex: 1;
}
.rcms-seg__opt:last-child {
  border-right: 0;
}
.rcms-seg__opt:hover {
  background: var(--rcms-gray-50);
}
.rcms-seg__opt.is-on {
  background: var(--rcms-primary-600);
  color: var(--rcms-white);
}
.rcms-seg__opt.is-on:hover {
  background: var(--rcms-primary-600);
}
.rcms-seg__opt:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--rcms-space-0-5) var(--rcms-focus-ring-primary);
}

/* ===== 기본 폼 컨트롤(클래스 누락 방지) =====
 * 명시 클래스(rcms-ff-input / .rcms-ff-select select 등)가 없는 raw 컨트롤도 일관된 외형을 갖도록 보강.
 * 명시 클래스가 있으면 그 규칙이 우선한다(:not([class]) 로 한정). 체크박스/라디오/버튼/파일은 제외. */
input:not([type]):not([class]),
input[type="text"]:not([class]),
input[type="search"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
input[type="url"]:not([class]),
input[type="tel"]:not([class]),
input[type="number"]:not([class]),
input[type="date"]:not([class]),
input[type="datetime-local"]:not([class]),
input[type="month"]:not([class]),
input[type="time"]:not([class]),
select:not([class]),
textarea:not([class]) {
  width: 100%;
  height: var(--rcms-control-height);
  padding: var(--rcms-space-2) var(--rcms-space-3);
  border: 1px solid var(--rcms-border-color);
  border-radius: var(--rcms-radius-md);
  font-size: var(--rcms-font-size-sm);
  font-family: inherit;
  color: var(--rcms-gray-800);
  background: var(--rcms-white);
}
textarea:not([class]) {
  height: auto;
  min-height: 76px;
  resize: vertical;
}
input:not([type]):not([class]):focus,
input[type="text"]:not([class]):focus,
input[type="search"]:not([class]):focus,
input[type="email"]:not([class]):focus,
input[type="password"]:not([class]):focus,
input[type="url"]:not([class]):focus,
input[type="tel"]:not([class]):focus,
input[type="number"]:not([class]):focus,
input[type="date"]:not([class]):focus,
input[type="datetime-local"]:not([class]):focus,
input[type="month"]:not([class]):focus,
input[type="time"]:not([class]):focus,
select:not([class]):focus,
textarea:not([class]):focus {
  outline: none;
  border-color: var(--rcms-primary-500);
  box-shadow: 0 0 0 3px var(--rcms-focus-ring-primary);
}
input:not([class])::placeholder,
textarea:not([class])::placeholder {
  color: var(--rcms-gray-400);
}

/* 체크박스·라디오 — 네이티브 컨트롤을 브랜드색으로 통일(전 화면 공통).
 * accent-color 만 지정하므로 커스텀 토글(appearance:none) 에는 영향이 없고, 네이티브 체크/라디오만 브랜드색이 된다. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--rcms-primary-600);
  cursor: pointer;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
}

/* ============================================================================
 * 2) PUBLIC ELEVATION — 공개 인증/신청 카드 전용 (.rcms-auth 하위에서만 적용)
 * 리브랜드 언어: 넉넉한 여백 · 46px 컨트롤 · 코랄 필수표시 · 부드러운 네이비 포커스 링 ·
 * 깊이감 hover. 관리자 콘솔(.rcms-auth 미사용)에는 전혀 새지 않는다.
 * AuthCard(.rcms-auth) 는 배정 4개 폼(문의·Q&A·정보공개·민원)의 공통 래퍼.
 * ========================================================================== */

/* 필드 간 리듬 — 라벨↔컨트롤 간격을 살짝 키워 위계를 분명히 */
.rcms-auth .rcms-ff {
  gap: 7px;
}
.rcms-auth .rcms-ff__label {
  font-size: var(--rcms-font-size-sm);
  font-weight: 700;
  color: var(--rcms-gray-800);
  letter-spacing: -0.005em;
}
/* 필수(*) — 리브랜드 코랄 포인트 (warm-500: 채움/장식/아이콘·큰텍스트 허용 · 본문 텍스트 아님) */
.rcms-auth .rcms-ff__req {
  color: var(--rcms-warm-500);
  font-weight: 800;
}
.rcms-auth .rcms-ff__hint {
  color: var(--rcms-gray-500);
  line-height: 1.55;
}

/* 입력/텍스트영역 — 46px · radius-md · 또렷한 보더 · 부드러운 전이 */
.rcms-auth .rcms-ff-input,
.rcms-auth .rcms-ff-textarea,
.rcms-auth .rcms-ff-select select {
  border-color: var(--rcms-gray-300);
  font-size: var(--rcms-font-size-base);
  color: var(--rcms-gray-900);
  background: var(--rcms-surface);
  transition:
    border-color var(--rcms-dur-fast) var(--rcms-ease-out),
    box-shadow var(--rcms-dur-fast) var(--rcms-ease-out),
    background-color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-auth .rcms-ff-input,
.rcms-auth .rcms-ff-select select {
  height: var(--rcms-public-control-height);
}
.rcms-auth .rcms-ff-input {
  padding: 0 var(--rcms-space-4);
}
.rcms-auth .rcms-ff-select select {
  padding: 0 38px 0 var(--rcms-space-4);
}
.rcms-auth .rcms-ff-textarea {
  padding: var(--rcms-space-3) var(--rcms-space-4);
  min-height: 132px;
  line-height: 1.7;
}
.rcms-auth .rcms-ff-input:hover,
.rcms-auth .rcms-ff-textarea:hover,
.rcms-auth .rcms-ff-select select:hover {
  border-color: var(--rcms-primary-300);
}
.rcms-auth .rcms-ff-input:focus,
.rcms-auth .rcms-ff-textarea:focus,
.rcms-auth .rcms-ff-select select:focus {
  border-color: var(--rcms-primary-500);
  box-shadow: 0 0 0 4px var(--rcms-focus-ring-primary);
}
.rcms-auth .rcms-ff-input::placeholder,
.rcms-auth .rcms-ff-textarea::placeholder {
  color: var(--rcms-gray-400);
}
.rcms-auth .rcms-ff-input:disabled,
.rcms-auth .rcms-ff-textarea:disabled,
.rcms-auth .rcms-ff-select select:disabled {
  background: var(--rcms-surface-muted);
  color: var(--rcms-gray-400);
  border-color: var(--rcms-gray-200);
  cursor: not-allowed;
}
/* 캐럿 — 컨트롤이 커진 만큼 소폭 우측 정렬 보정 + 포커스 톤 */
.rcms-auth .rcms-ff-select__caret {
  right: var(--rcms-space-3-5);
  color: var(--rcms-gray-500);
}
.rcms-auth .rcms-ff-select select:focus + .rcms-ff-select__caret {
  color: var(--rcms-primary-600);
}

/* 그리드 리듬 — 성명/연락처 2열 간격을 카드 톤에 맞게 */
.rcms-auth .rcms-ff-grid {
  gap: var(--rcms-space-4);
}

/* ============================================================================
 * 3) prefers-reduced-motion — 모든 전이/변형 무력화 (접근성)
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rcms-ff-input,
  .rcms-ff-textarea,
  .rcms-ff-select select,
  .rcms-ff-picker,
  .rcms-seg__opt,
  .rcms-auth .rcms-ff-input,
  .rcms-auth .rcms-ff-textarea,
  .rcms-auth .rcms-ff-select select {
    transition: none;
  }
}

/* ============================================================================
 * REINNO CMS · 공개 사이트 공용 디자인 킷 (리브랜드 2026-07-02, 사용자 승인)
 * "역동적 시빅 포털 · 네이비 + 코랄 · 깊이감 있는 카드 · 부드러운 모션"
 *
 * 네임스페이스: .rcms-pub-*  (기존 페이지별 클래스와 충돌 없음)
 * 모든 값은 var(--rcms-*) 토큰만 사용. hex 직접값 0건.
 * 이 파일이 랜딩/서브페이지 전 화면의 "디자인 계약(contract)" 이다.
 * ========================================================================== */

/* ===== 넓은 컨테이너 변형 — 랜딩/카드 그리드용(기본 rcms-container 보다 여유) ===== */
.rcms-pub-wide { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* ===== 섹션 ===== */
.rcms-pub-section { margin-top: var(--rcms-space-16); }
.rcms-pub-section--tight { margin-top: var(--rcms-space-12); }

.rcms-pub-shead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rcms-space-4);
  margin-bottom: var(--rcms-space-6);
}
.rcms-pub-shead__main { min-width: 0; }
.rcms-pub-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--rcms-space-2);
  color: var(--rcms-warm-700);
  font-size: var(--rcms-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rcms-pub-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--rcms-warm-500);
}
.rcms-pub-h2 {
  margin: 0;
  font-size: var(--rcms-font-size-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rcms-gray-900);
  line-height: 1.2;
}
.rcms-pub-h2__accent { color: var(--rcms-primary-600); }
.rcms-pub-sub {
  margin: var(--rcms-space-2) 0 0;
  color: var(--rcms-gray-500);
  font-size: var(--rcms-font-size-base);
  line-height: 1.6;
}
.rcms-pub-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 8px var(--rcms-space-3);
  border-radius: var(--rcms-radius-pill);
  color: var(--rcms-primary-600);
  font-weight: 700;
  font-size: var(--rcms-font-size-sm);
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out), gap var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-pub-more:hover { background: var(--rcms-primary-50); gap: 8px; }
@media (min-width: 768px) {
  .rcms-pub-h2 { font-size: var(--rcms-font-size-3xl); }
}

/* ===== 카드 (기본 표면 + 호버 리프트) ===== */
.rcms-pub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--rcms-surface);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-xl);
  box-shadow: var(--rcms-shadow-sm);
  transition:
    transform var(--rcms-dur) var(--rcms-ease-out),
    box-shadow var(--rcms-dur) var(--rcms-ease-out),
    border-color var(--rcms-dur) var(--rcms-ease-out);
}
.rcms-pub-card--pad { padding: var(--rcms-space-6); }
.rcms-pub-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--rcms-shadow-lg);
  border-color: var(--rcms-primary-200);
}
.rcms-pub-card--link { cursor: pointer; }
/* 카드 상단 강조 바(호버 시 코랄로) */
.rcms-pub-card--rail::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: var(--rcms-radius-xl) var(--rcms-radius-xl) 0 0;
  background: var(--rcms-primary-500);
  opacity: 0;
  transition: opacity var(--rcms-dur) var(--rcms-ease-out);
}
.rcms-pub-card--rail:hover::before { opacity: 1; }

/* ===== 칩 / 배지 ===== */
.rcms-pub-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--rcms-radius-pill);
  background: var(--rcms-primary-50);
  color: var(--rcms-primary-700);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}
.rcms-pub-chip--warm  { background: var(--rcms-warm-bg); color: var(--rcms-warm-700); }
.rcms-pub-chip--teal  { background: var(--rcms-accent-100); color: var(--rcms-accent-900); }
.rcms-pub-chip--gray  { background: var(--rcms-gray-100); color: var(--rcms-gray-600); }
.rcms-pub-chip--success { background: var(--rcms-success-bg); color: var(--rcms-success-text); }
.rcms-pub-chip--warning { background: var(--rcms-warning-bg); color: var(--rcms-warning-text); }
.rcms-pub-chip--error   { background: var(--rcms-error-bg);   color: var(--rcms-error-text); }
.rcms-pub-chip--info    { background: var(--rcms-info-bg);    color: var(--rcms-info-text); }
.rcms-pub-chip--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* 실시간 배지 */
.rcms-pub-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rcms-warm-700);
  font-size: var(--rcms-font-size-xs);
  font-weight: 700;
}

/* ===== 버튼(링크/앵커용 공개 CTA) ===== */
.rcms-pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 var(--rcms-space-6);
  border: 1px solid transparent;
  border-radius: var(--rcms-radius-pill);
  font-size: var(--rcms-font-size-base);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--rcms-dur-fast) var(--rcms-ease-out),
    box-shadow var(--rcms-dur-fast) var(--rcms-ease-out),
    background-color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-pub-btn:active { transform: translateY(1px); }
.rcms-pub-btn--primary {
  background: var(--rcms-primary-600);
  color: var(--rcms-white);
  box-shadow: var(--rcms-shadow-brand);
}
.rcms-pub-btn--primary:hover { background: var(--rcms-primary-700); box-shadow: var(--rcms-shadow-lg); transform: translateY(-2px); }
.rcms-pub-btn--warm {
  background: var(--rcms-warm-500);
  color: var(--rcms-white);
  box-shadow: var(--rcms-shadow-warm);
}
.rcms-pub-btn--warm:hover { background: var(--rcms-warm-600); transform: translateY(-2px); }
.rcms-pub-btn--outline {
  background: var(--rcms-surface);
  border-color: var(--rcms-gray-300);
  color: var(--rcms-gray-800);
}
.rcms-pub-btn--outline:hover { border-color: var(--rcms-primary-400); color: var(--rcms-primary-700); background: var(--rcms-primary-50); }
.rcms-pub-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--rcms-white);
}
.rcms-pub-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); }
.rcms-pub-btn--sm { height: 36px; padding: 0 var(--rcms-space-4); font-size: var(--rcms-font-size-sm); }
.rcms-pub-btn--block { width: 100%; }

/* ===== 상태 박스(빈/로딩/오류) ===== */
.rcms-pub-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rcms-space-3);
  padding: var(--rcms-space-16) var(--rcms-space-6);
  text-align: center;
  color: var(--rcms-gray-500);
  background: var(--rcms-surface);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-xl);
}
.rcms-pub-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--rcms-primary-50);
  color: var(--rcms-primary-400);
}
.rcms-pub-state--error .rcms-pub-state__icon { background: var(--rcms-error-bg); color: var(--rcms-error); }
.rcms-pub-state__title { font-size: var(--rcms-font-size-lg); font-weight: 700; color: var(--rcms-gray-800); }
.rcms-pub-state__desc { font-size: var(--rcms-font-size-sm); }

/* ===== 필터 바 + 검색 필드 ===== */
.rcms-pub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rcms-space-3);
  margin-bottom: var(--rcms-space-6);
}
.rcms-pub-toolbar__spacer { flex: 1 1 auto; }
.rcms-pub-search {
  display: flex;
  align-items: center;
  gap: var(--rcms-space-2);
  min-width: 220px;
  height: 44px;
  padding: 0 var(--rcms-space-4);
  background: var(--rcms-surface);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-pill);
  transition: border-color var(--rcms-dur-fast) var(--rcms-ease-out), box-shadow var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-pub-search:focus-within {
  border-color: var(--rcms-primary-400);
  box-shadow: 0 0 0 4px var(--rcms-focus-ring-primary);
}
.rcms-pub-search > .rcms-icon { color: var(--rcms-gray-400); flex: none; }
.rcms-pub-search input {
  flex: 1 1 0%;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--rcms-font-size-sm);
  color: var(--rcms-gray-900);
}
.rcms-pub-search input:focus { outline: none; }

/* ===== 세그먼트/탭 (필터 정렬 등) ===== */
.rcms-pub-seg {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: var(--rcms-gray-100);
  border-radius: var(--rcms-radius-pill);
}
.rcms-pub-seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 7px var(--rcms-space-4);
  border-radius: var(--rcms-radius-pill);
  color: var(--rcms-gray-600);
  font: inherit;
  font-size: var(--rcms-font-size-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out), color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-pub-seg__btn:hover { color: var(--rcms-gray-900); }
.rcms-pub-seg__btn--on {
  background: var(--rcms-surface);
  color: var(--rcms-primary-700);
  box-shadow: var(--rcms-shadow-sm);
}

/* 하부 탭(언더라인형) */
.rcms-pub-tabs {
  display: flex;
  gap: var(--rcms-space-2);
  border-bottom: 1px solid var(--rcms-gray-200);
  margin-bottom: var(--rcms-space-6);
}
.rcms-pub-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--rcms-space-3) var(--rcms-space-4);
  color: var(--rcms-gray-500);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--rcms-dur-fast) var(--rcms-ease-out), border-color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-pub-tab:hover { color: var(--rcms-gray-800); }
.rcms-pub-tab--on { color: var(--rcms-primary-700); border-bottom-color: var(--rcms-primary-600); }

/* ===== 리스트 테이블(공개 게시판) ===== */
.rcms-pub-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--rcms-surface);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-xl);
  overflow: hidden;
}
.rcms-pub-table thead th {
  background: var(--rcms-surface-muted);
  padding: var(--rcms-space-3) var(--rcms-space-4);
  font-size: var(--rcms-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rcms-gray-500);
  text-align: left;
  border-bottom: 1px solid var(--rcms-gray-200);
}
.rcms-pub-table tbody td {
  padding: var(--rcms-space-4);
  border-top: 1px solid var(--rcms-gray-100);
  font-size: var(--rcms-font-size-sm);
  color: var(--rcms-gray-700);
  vertical-align: middle;
}
.rcms-pub-table tbody tr {
  cursor: pointer;
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-pub-table tbody tr:hover { background: var(--rcms-primary-50); }

/* ===== 첨부/메타 인라인 ===== */
.rcms-pub-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--rcms-space-4);
  color: var(--rcms-gray-500);
  font-size: var(--rcms-font-size-sm);
}
.rcms-pub-meta__item { display: inline-flex; align-items: center; gap: 5px; }

/* ===== 가로 스크롤 슬라이더(스냅) ===== */
.rcms-pub-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: var(--rcms-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--rcms-space-2);
}
.rcms-pub-scroller > * { scroll-snap-align: start; }
.rcms-pub-scroller::-webkit-scrollbar { height: 6px; }
.rcms-pub-scroller::-webkit-scrollbar-thumb { background: var(--rcms-gray-300); border-radius: 999px; }
@media (min-width: 768px) { .rcms-pub-scroller { grid-auto-columns: 42%; } }
@media (min-width: 1024px) { .rcms-pub-scroller { grid-auto-columns: 31%; } }

/* 슬라이더 화살표 컨트롤 */
.rcms-pub-arrows { display: inline-flex; gap: var(--rcms-space-2); }
.rcms-pub-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rcms-gray-200);
  background: var(--rcms-surface);
  color: var(--rcms-gray-700);
  cursor: pointer;
  transition: background-color var(--rcms-dur-fast) var(--rcms-ease-out), color var(--rcms-dur-fast) var(--rcms-ease-out), border-color var(--rcms-dur-fast) var(--rcms-ease-out);
}
.rcms-pub-arrow:hover { background: var(--rcms-primary-600); border-color: var(--rcms-primary-600); color: var(--rcms-white); }
.rcms-pub-arrow:disabled { opacity: 0.4; cursor: default; }
.rcms-pub-arrow:disabled:hover { background: var(--rcms-surface); color: var(--rcms-gray-700); border-color: var(--rcms-gray-200); }

/* ===== 폼(공개 신청/문의/제안) ===== */
.rcms-pub-form {
  background: var(--rcms-surface);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-2xl);
  box-shadow: var(--rcms-shadow-md);
  padding: var(--rcms-space-8);
}
.rcms-pub-field { margin-bottom: var(--rcms-space-6); }
.rcms-pub-field:last-child { margin-bottom: 0; }
.rcms-pub-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--rcms-space-2);
  font-size: var(--rcms-font-size-sm);
  font-weight: 700;
  color: var(--rcms-gray-800);
}
.rcms-pub-label--req::after { content: "*"; color: var(--rcms-error); font-weight: 800; }
.rcms-pub-control {
  width: 100%;
  height: 46px;
  padding: 0 var(--rcms-space-4);
  border: 1px solid var(--rcms-gray-300);
  border-radius: var(--rcms-radius-md);
  background: var(--rcms-surface);
  font: inherit;
  font-size: var(--rcms-font-size-base);
  color: var(--rcms-gray-900);
  transition: border-color var(--rcms-dur-fast) var(--rcms-ease-out), box-shadow var(--rcms-dur-fast) var(--rcms-ease-out);
}
textarea.rcms-pub-control { height: auto; min-height: 140px; padding: var(--rcms-space-3) var(--rcms-space-4); resize: vertical; }
.rcms-pub-control:focus {
  outline: none;
  border-color: var(--rcms-primary-500);
  box-shadow: 0 0 0 4px var(--rcms-focus-ring-primary);
}
.rcms-pub-hint { margin-top: 6px; font-size: var(--rcms-font-size-xs); color: var(--rcms-gray-500); }

/* ===== 상세 아티클(게시글 본문) ===== */
.rcms-pub-article {
  background: var(--rcms-surface);
  border: 1px solid var(--rcms-gray-200);
  border-radius: var(--rcms-radius-2xl);
  box-shadow: var(--rcms-shadow-sm);
  overflow: hidden;
}
.rcms-pub-article__head {
  padding: var(--rcms-space-8);
  border-bottom: 1px solid var(--rcms-gray-100);
}
.rcms-pub-article__title {
  margin: var(--rcms-space-3) 0 0;
  font-size: var(--rcms-font-size-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rcms-gray-900);
  line-height: 1.3;
}
.rcms-pub-article__body { padding: var(--rcms-space-8); line-height: 1.75; color: var(--rcms-gray-800); }

/* ===== 데코 블롭(히어로/헤더 배경 장식) ===== */
.rcms-pub-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.5;
}

/* REINNO CMS 전역 스타일 진입점 — @import 순서 고정.
 * 1) 토큰(SSOT) → 2) 타이포(단일 폰트) → 3) 리셋 → 4) 레이아웃 → 5) 유틸리티.
 * 컴포넌트별 스타일은 각 .vue 의 <style scoped> 가 담당 (전부 var(--rcms-*) 참조).
 */
/* 공통 폼 컨트롤 디자인 시스템(.rcms-ff-*, 체크박스·라디오 등 네이티브 컨트롤 통일) — 전역 적용.
 * 과거엔 소비 .vue 마다 개별 import 라 미import 화면(예: 메인페이지 관리)에서 폼이 네이티브로 보였다.
 * 여기서 한 번 전역 로드해 모든 관리자/공개 화면의 입력·드롭다운·라디오·체크박스 외형을 일관화한다. */
/* 공개 사이트 공용 디자인 프리미티브(리브랜드 2026-07-02) — 섹션 헤더/카드/칩/버튼/상태.
 * 관리자 콘솔은 rcms-pub-* 클래스를 사용하지 않으므로 영향 없음. */


/*# sourceMappingURL=app.css.map*/