/* ============================================
   Rooms Page - 객실 관리 페이지 전용
   순수 CSS (Tailwind @apply 사용하지 않음)
   네이밍: room_element.is_state (언더스코어)
   ============================================ */

/* ── Room Page Layout ──────────────────────── */

.room_page {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ── Aside 확장 (공통 oa_aside 위에 객실 전용 추가) ── */

/* 상품 하위 리스트 */
.room_aside_sub_list {
  padding: 0.125rem 0.375rem 0.25rem;
  padding-left: calc(0.375rem + 0.625rem + 0.5rem);
}

.room_aside_sub_item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0;
}

.room_aside_sub_dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-full);
  background-color: var(--c-gray-300);
  flex-shrink: 0;
}

.room_aside_sub_dot.is_active {
  background-color: var(--c-primary-400);
}

.room_aside_sub_dot.is_inactive {
  background-color: var(--c-gray-300);
}

.room_aside_sub_name {
  font-size: 0.75rem;
  color: var(--c-text-2);
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room_aside_sub_price {
  font-size: 0.6875rem;
  color: var(--c-gray-500);
  white-space: nowrap;
}

/* ── Empty States ────────────────────────────── */

.room_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem 1rem 2rem;
  text-align: center;
}

.room_empty_icon {
  width: 3rem;
  height: 3rem;
  color: var(--c-border-strong);
  margin-bottom: 0.75rem;
}

.room_empty_icon.is_lg {
  width: 5rem;
  height: 5rem;
  margin-bottom: 1rem;
}

.room_empty_title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-2);
  margin-bottom: 0.25rem;
}

.room_empty_title.is_lg {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.room_empty_desc {
  font-size: 0.75rem;
  color: var(--c-text-3);
  margin-bottom: 1rem;
}

.room_empty_desc.is_lg {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* ── Hotel Not Selected ──────────────────────── */

.room_no_hotel {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.room_no_hotel_inner {
  text-align: center;
}

.room_no_hotel_title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--c-text-1);
  margin-bottom: 0.5rem;
}

.room_no_hotel_desc {
  font-size: 0.875rem;
  color: var(--c-text-3);
}

/* ── Detail 확장 (공통 oa_detail 위에 객실 전용 추가) ── */

.room_detail_title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.room_detail_code {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-gray-100);
  color: var(--c-gray-500);
}

.dark .room_detail_code {
  background-color: var(--c-gray-300);
}

/* ── Card (섹션 카드) ────────────────────────── */

.room_card {
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.dark .room_card {
  background-color: var(--c-gray-100);
  border-color: var(--c-gray-300);
}

.room_card_header {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--c-border);
}

.room_card_header.has_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark .room_card_header {
  border-bottom-color: var(--c-gray-300);
}

.room_card_title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.room_card_desc {
  font-size: 0.75rem;
  color: var(--c-text-3);
  margin-top: 0.125rem;
}

.room_card_body {
  padding: 1.125rem;
}

/* ── field 내 addon / textarea 확장 ────────────── */

.field .room_addon_group {
  flex: 1;
  min-width: 0;
}

.field .field_textarea {
  flex: 1;
  min-width: 0;
}

/* ── Addon Group (접두어 + 입력) ─────────────── */

.room_addon_group {
  display: flex;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-default);
}

.room_addon_group:focus-within {
  border-color: var(--c-navy-mid);
  box-shadow: 0 0 0 2px rgba(27, 58, 107, 0.1);
}

.dark .room_addon_group {
  border-color: var(--c-gray-400);
}

.room_addon_prefix {
  padding: 0.5rem 0.75rem;
  background-color: var(--c-surface);
  border-right: 1px solid var(--c-border);
  font-size: 0.875rem;
  color: var(--c-text-3);
  white-space: nowrap;
}

.dark .room_addon_prefix {
  background-color: var(--c-gray-300);
  border-right-color: var(--c-gray-400);
  color: var(--c-gray-700);
}

.room_addon_input {
  flex: 1 1 0%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  border: none;
  background: transparent;
}

.dark .room_addon_input {
  color: var(--c-text-2);
}

/* ── Setting Row (토글 행) ───────────────────── */

.room_settings {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.room_setting_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.875rem;
  background-color: var(--c-surface);
  border-radius: var(--radius-lg);
}

.dark .room_setting_row {
  background-color: var(--c-gray-200);
}

.room_setting_label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-1);
}

.room_setting_desc {
  font-size: 0.75rem;
  color: var(--c-text-3);
  margin-top: 0.125rem;
}

/* 토글 스위치 */
.room_toggle {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.room_toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.room_toggle_track {
  position: absolute;
  inset: 0;
  background-color: var(--c-border-strong);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-default);
}

.room_toggle input:checked+.room_toggle_track {
  background-color: var(--c-navy);
}

.room_toggle_thumb {
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--c-white);
  border-radius: var(--radius-full);
  top: 0.1875rem;
  left: 0.1875rem;
  transition: all var(--duration-fast) var(--ease-default);
}

.room_toggle input:checked~.room_toggle_thumb {
  left: 1.1875rem;
}

/* ── PMS Mapping ─────────────────────────────── */

.room_pms_warning {
  padding: 0.625rem 0.75rem;
  background-color: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  color: #92400E;
}

.dark .room_pms_warning {
  background-color: rgba(146, 64, 14, 0.1);
  border-color: rgba(253, 230, 138, 0.3);
}

.room_pms_empty {
  padding: 0.625rem 0.75rem;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  color: var(--c-text-3);
}

.room_pms_hint {
  font-size: 0.75rem;
  color: var(--c-text-3);
}

.room_pms_fields {
  flex: 1;
}

/* 사이드바 하단 고정 버튼 */
.room_aside_add_btn {
  width: 100%;
  margin-top: auto;
}

/* 코드 입력 대문자 변환 */
.room_code_input {
  text-transform: uppercase;
}

/* ── Skeleton / Loading ──────────────────────── */

.room_skeleton {
  background-color: var(--c-surface);
  border-radius: var(--radius-sm);
  animation: room_pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.room_skeleton.is_field {
  height: 2.5rem;
  flex: 1;
}

@keyframes room_pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ── Spinner ─────────────────────────────────── */

.room_spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
}

.room_spinner_icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--c-navy);
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: room_spin 0.75s linear infinite;
}

@keyframes room_spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Calendar (재고 현황) ────────────────────── */

.room_cal_toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
}

.room_cal_month_wrap {
  position: relative;
}

.room_cal_month {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text-1);
  margin-right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.room_cal_month_chevron {
  opacity: 0.5;
  transition: transform 0.2s;
}

.room_cal_month_chevron.is_open {
  transform: rotate(180deg);
}

/* Month Picker 드롭다운 */
.room_cal_month_picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--c-white);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.75rem;
  min-width: 220px;
}

.room_cal_month_picker_year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

.room_cal_month_picker_year span {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.room_cal_month_picker_year button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--c-gray-500);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.room_cal_month_picker_year button:hover {
  background: var(--c-gray-100);
  color: var(--c-text-1);
}

.room_cal_month_picker_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.room_cal_month_picker_item {
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--c-gray-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.room_cal_month_picker_item:hover {
  background: var(--c-gray-100);
  color: var(--c-text-1);
}

.room_cal_month_picker_item.is_active {
  background: var(--c-primary);
  font-weight: 500;
  color: var(--c-primary-400);
}

/* Today 버튼 */
.room_cal_today_btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-gray-600);
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-md);
  background-color: var(--c-white);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.room_cal_today_btn:hover {
  background-color: var(--c-gray-50);
}

.dark .room_cal_today_btn {
  background-color: var(--c-gray-200);
  border-color: var(--c-gray-400);
  color: var(--c-gray-700);
}

.room_cal_today_icon {
  width: 1rem;
  height: 1rem;
}

.room_cal_nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.room_cal_nav_btn {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-md);
  background-color: var(--c-white);
  color: var(--c-gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.room_cal_nav_btn:hover {
  background-color: var(--c-gray-50);
}

.dark .room_cal_nav_btn {
  background-color: var(--c-gray-200);
  border-color: var(--c-gray-400);
  color: var(--c-gray-700);
}

.room_cal_nav_btn svg {
  width: 0.6875rem;
  height: 0.6875rem;
}

.room_cal_spacer {
  flex: 1 1 0%;
}

/* 캘린더 테이블 래퍼 */
.room_cal_table {
  border-top: 1px solid var(--c-input-border);
  border-left: 1px solid var(--c-input-border);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.dark .room_cal_table {
  border-color: var(--c-gray-400);
}

/* 요일 헤더 */
.room_cal_weekday_row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dark .room_cal_weekday_row {
  background-color: var(--c-gray-200);
}

.room_cal_weekday {
  padding: 0.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-gray-500);
  border-right: 1px solid var(--c-input-border);
  border-bottom: 1px solid var(--c-input-border);
}

.room_cal_weekday.is_sun {
  color: var(--c-red-400);
}

.room_cal_weekday.is_sat {
  color: var(--c-success);
}

.dark .room_cal_weekday {
  border-color: var(--c-gray-400);
}

/* 캘린더 그리드 */
.room_cal_grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* 빈 셀 */
.room_cal_empty {
  min-height: 5.875rem;
  border-right: 1px solid var(--c-input-border);
  border-bottom: 1px solid var(--c-input-border);
  background-color: var(--c-white);
}

.dark .room_cal_empty {
  background-color: var(--c-gray-100);
  border-color: var(--c-gray-400);
}

/* 날짜 셀 */
.room_cal_cell {
  min-height: 5.875rem;
  padding: 0.625rem 0.5rem;
  border-right: 1px solid var(--c-input-border);
  border-bottom: 1px solid var(--c-input-border);
  background-color: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dark .room_cal_cell {
  background-color: var(--c-gray-100);
  border-color: var(--c-gray-400);
}

.room_cal_cell.is_past {
  background-color: var(--c-gray-50);
}

.room_cal_cell.is_past .room_cal_date,
.room_cal_cell.is_past .room_cal_stock {
  opacity: 0.4;
}

.dark .room_cal_cell.is_past {
  background-color: var(--c-gray-200);
}

.room_cal_cell.is_modified {
  background-color: var(--c-red-50);
}

/* 날짜 텍스트 */
.room_cal_date {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-gray-700);
  display: flex;
  align-items: center;
  height: 1.5rem;
}

.room_cal_date.is_today {
  font-weight: 700;
}

/* 오늘 날짜 원형 뱃지 */
.room_cal_cell.is_today .room_cal_date {
  position: relative;
  isolation: isolate;
  min-width: 2.2rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
}

.room_cal_cell.is_today .room_cal_date::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1.5rem;
  background-color: var(--c-primary-400);
  border-radius: var(--radius-full);
  z-index: -1;
}

.room_cal_date.is_sun {
  color: var(--c-red-400);
}

.room_cal_date.is_sat {
  color: var(--c-success);
}

.room_cal_date.is_modified {
  color: var(--c-red-400);
  font-weight: 600;
}

.room_cal_modified_mark {
  margin-left: 0.125rem;
  color: var(--c-red-400);
}

.room_cal_cell.is_today .room_cal_modified_mark {
  position: absolute;
  left: 100%;
  margin-left: 0.125rem;
  color: var(--c-red-400);
}

/* 재고 숫자 */
.room_cal_stock {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-gray-900);
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 인라인 편집 입력 */
.room_cal_edit_input {
  width: 3.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-navy-mid);
  outline: none;
}

/* 셀 상단 (날짜 + 재고) */
.room_cal_top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* 상품별 가격 영역 */
.room_cal_prices {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  margin-top: auto;
}

/* 가격 행 (뱃지 좌측, 상품가 우측) */
.room_cal_price_row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.25rem 0.125rem 0.125rem;
  border-radius: var(--radius-sm);
}

/* 가격 input (우측 정렬) */
.room_cal_price_input {
  flex: 1;
  min-width: 0;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  text-align: right;
  background: transparent;
  border: none;
  outline: none;
  color: var(--c-text-1);
  font-family: 'Inter', sans-serif;
}

.room_cal_price_input.is_modified {
  color: var(--c-red-400);
  font-weight: 600;
}

.room_cal_price_input:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 상품 이니셜 뱃지 */
.room_cal_price_badge {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--c-white);
  border-radius: var(--radius-sm);
}

/* 상품 색상 (보라 → 옐로우 → 레드 → 블루 → 오렌지) */
.room_cal_price_row.is_purple {
  background-color: #e5ddf5;
}

.room_cal_price_badge.is_purple {
  background-color: #bba6e5;
}

.room_cal_price_row.is_yellow {
  background-color: #fff1a3;
}

.room_cal_price_badge.is_yellow {
  background-color: #fdc65e;
}

.room_cal_price_row.is_red {
  background-color: #ffe0e0;
}

.room_cal_price_badge.is_red {
  background-color: #ffabab;
}

.room_cal_price_row.is_blue {
  background-color: #d1ebff;
}

.room_cal_price_badge.is_blue {
  background-color: #9bd2fb;
}

.room_cal_price_row.is_orange {
  background-color: #ffe1cd;
}

.room_cal_price_badge.is_orange {
  background-color: #f7b990;
}

/* 상품 테이블 색상 dot */
.room_product_color_dot {
  display: inline-block;
  vertical-align: middle;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
}

.room_product_color_dot.is_purple {
  background-color: #bba6e5;
}

.room_product_color_dot.is_yellow {
  background-color: #fdc65e;
}

.room_product_color_dot.is_red {
  background-color: #ffabab;
}

.room_product_color_dot.is_blue {
  background-color: #9bd2fb;
}

.room_product_color_dot.is_orange {
  background-color: #f7b990;
}

/* 색상 선택 Picker (상품 추가/편집 드로어) */
.room_color_picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.room_color_swatch {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-default);
  background: none;
  padding: 0;
}

.room_color_swatch:hover {
  border-color: var(--c-input-border);
}

.room_color_swatch.is_selected {
  border-color: var(--c-navy);
}

.room_color_swatch.is_purple {
  background-color: #e5ddf5;
}

.room_color_swatch.is_yellow {
  background-color: #fff1a3;
}

.room_color_swatch.is_red {
  background-color: #ffe0e0;
}

.room_color_swatch.is_blue {
  background-color: #d1ebff;
}

.room_color_swatch.is_orange {
  background-color: #ffe1cd;
}

.room_color_swatch_dot {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  display: inline-block;
}

.room_color_swatch_dot.is_purple {
  background-color: #bba6e5;
}

.room_color_swatch_dot.is_yellow {
  background-color: #fdc65e;
}

.room_color_swatch_dot.is_red {
  background-color: #ffabab;
}

.room_color_swatch_dot.is_blue {
  background-color: #9bd2fb;
}

.room_color_swatch_dot.is_orange {
  background-color: #f7b990;
}

.room_color_swatch_check {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--c-white);
  border-radius: var(--radius-full);
  color: var(--c-navy);
  stroke: var(--c-white);
}

.room_color_swatch_check circle {
  fill: var(--c-navy);
}

/* 과거 날짜 가격 행 */
.room_cal_cell.is_past .room_cal_prices {
  opacity: 0.4;
}


/* 재고 섹션 → 상품 목록 사이 여백 */
.hotel_detail_body>.section+.section_title {
  margin-top: 1.5rem;
}

/* ── Products Tab ────────────────────────────── */

.room_product_actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.room_product_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.875rem;
}

/* 상품 카드 */
.room_product_card {
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.room_product_card:hover {
  border-color: var(--c-border-strong);
}

.dark .room_product_card {
  background-color: var(--c-gray-100);
  border-color: var(--c-gray-300);
}

.room_product_card_header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.dark .room_product_card_header {
  border-bottom-color: var(--c-gray-300);
}

.room_product_card_info {
  flex: 1 1 0%;
}

.room_product_card_name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.room_product_card_price {
  font-size: 0.75rem;
  color: var(--c-text-3);
  margin-top: 0.125rem;
}

.room_product_card_policy {
  font-size: 0.6875rem;
  color: var(--c-text-3);
  margin-top: 0.125rem;
  padding: 0.125rem 0.375rem;
  background: var(--c-bg-2, #F5F3F0);
  border-radius: 0.25rem;
  display: inline-block;
}

.dark .room_product_card_policy {
  background: var(--dark-bg-2, #2A2A2A);
}

.room_product_card_status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.room_product_card_status_dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: #0E7A52;
}

.room_product_card_status_text {
  color: #0E7A52;
}

.room_product_card_status.is_off .room_product_card_status_dot {
  background-color: #9B958F;
}

.room_product_card_status.is_off .room_product_card_status_text {
  color: #9B958F;
}

.room_product_card_actions {
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.dark .room_product_card_actions {
  border-top-color: var(--c-gray-300);
}

.room_product_card_price_area {
  border-top: 1px solid var(--c-border);
  padding-top: 1rem;
}

.dark .room_product_card_price_area {
  border-top-color: var(--c-gray-300);
}

/* 상품 추가 카드 */
/* ── Buttons (페이지 전용) ───────────────────── */

.room_btn_danger {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #B91C1C;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.room_btn_danger:hover {
  background-color: var(--c-red-50);
  border-color: #FECACA;
}

.room_btn_sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.room_btn_sm:hover {
  background-color: var(--c-surface);
}

.room_btn_sm.is_danger {
  color: #B91C1C;
}

.room_btn_sm.is_danger:hover {
  background-color: var(--c-red-50);
}

/* ── Utility (간격 등) ───────────────────────── */

.room_section_gap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}