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

/* ── Hotel Page Layout ──────────────────────── */

.hotel_page {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}

/* ── Hotel Aside (좌측 호텔 목록) ──────────── */

.hotel_aside {
  border-radius: var(--radius-2xl);
  width: 18rem;
  /* 288px */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--c-line);
}

.dark .hotel_aside {
  background-color: var(--c-gray-100);
}

.hotel_aside_header {

  /* py-3.5 px-4 */
}

.hotel_aside_title {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--c-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

/* 검색 */
.hotel_aside_search {
  position: relative;
  margin-bottom: 0.75rem;
}

.hotel_aside_search_input {
  width: 100%;
  height: 2.7rem;
  /* 36px = h-9 */
  padding-left: 2.25rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  outline: none;
}

.hotel_aside_search_input::placeholder {
  color: var(--c-gray-500);
  font-size: 0.875rem;
}

.dark .hotel_aside_search_input {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.hotel_aside_search_input:focus {
  border: 1px solid var(--c-primary-400);
}

.hotel_aside_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  color: var(--c-gray-500);
}

/* 필터 */
.hotel_aside_filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* 리스트 */
.hotel_aside_list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  margin: 1rem 0;
  scrollbar-width: none;
}

.hotel_aside_list::-webkit-scrollbar {
  display: none;
}

.hotel_aside_item {
  padding: 0.625rem 0.875rem;
  /* py-2.5 px-3.5 */
  cursor: pointer;
  position: relative;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.hotel_aside_item:hover {
  background-color: var(--c-gray-50);
  border-radius: var(--radius-lg);
}

.dark .hotel_aside_item:hover {
  background-color: var(--c-gray-200);
  border-radius: var(--radius-lg);
}

.hotel_aside_item.is_active {
  background-color: var(--c-primary-50);
  border-radius: var(--radius-lg);
}

.hotel_aside_item_bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.25rem;
  /* 4px */
  background-color: var(--c-primary-600);
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.hotel_aside_item_row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* 활성/비활성 상태 dot */
.status_dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
  /* (name line-height 20px - dot 10px) / 2 */
  background-color: var(--c-gray-300);
}

.status_dot.is_active {
  background-color: var(--c-primary-500);
}

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

.dark .status_dot.is_inactive {
  background-color: var(--c-gray-700);
}

.hotel_aside_item_info {
  flex: 1 1 0%;
  min-width: 0;
}

.hotel_aside_item_name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--c-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .hotel_aside_item_name {
  color: var(--c-gray-900);
}

.hotel_aside_item_meta {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--c-gray-500);
  margin-top: 0.125rem;
}

.dark .hotel_aside_item_meta {
  color: var(--c-gray-700);
}

/* 하단 호텔 추가 */
.hotel_aside_footer {}

/* ── Hotel Detail (우측 상세) ──────────────── */

.hotel_detail {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.hotel_detail_header {
  CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
  padding-left: 1.5rem;
  /* pt-3.5 px-6 pb-0 */
  flex-shrink: 0;
}

.dark .hotel_detail_header {
  background-color: transparent;
  border-bottom-color: var(--c-border);
}

.hotel_detail_top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

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

.hotel_detail_body {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 0 1.5rem 1.5rem 1.5rem;
  /* p-6 */
  margin-top: 1.5rem;
}

.hotel_detail_footer {
  background-color: var(--c-white);
  border-top: 1px solid var(--c-line);
  padding: 1rem 1.5rem;
  /* py-4 px-6 */
  flex-shrink: 0;
}

.hotel_detail_footer_inner {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ── Image Tab (이미지 관리) ──────────────── */

/* 업로드 영역 */
.img_upload_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem;
  border: 1.5px dashed var(--c-input-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  margin-bottom: 1rem;
}

.img_upload_area:hover {
  border-color: var(--c-primary-400);
  background-color: var(--c-primary-50);
}

.img_upload_area.is_uploading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.img_upload_input {
  display: none;
}

.img_upload_icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-gray-500);
  margin-bottom: 0.25rem;
}

.img_upload_text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-700);
  margin-bottom: 1rem;
}

.img_upload_hint {
  font-size: 0.875rem;
  color: var(--c-gray-400);
  line-height: 1.4;
}

/* 이미지 그리드 */
.img_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

/* 대표이미지 슬롯 (그리드 첫 번째 칸, 다른 카드와 동일 크기) */
.img_hero {
  border: 1px solid var(--c-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.img_hero.drag_over {
  border-color: var(--c-primary-500);
  box-shadow: 0 0 0 3px var(--c-primary-200);
}

.img_hero.is_empty_hero {
  border-style: dashed;
  border-color: var(--c-line);
}

/* 대표 오버레이 (정중앙, hover 시 어두운 배경 + 흰 글씨) */
.img_hero_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  z-index: 1;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.45);
  transition: opacity var(--duration-fast) var(--ease-default);
  pointer-events: none;
}

.img_hero:hover .img_hero_overlay {
  opacity: 1;
}

.img_hero_overlay .img_hero_text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-white);
  text-align: center;
  line-height: 1.4;
}

/* 빈 대표 슬롯 (이미지 없을 때 — 항상 표시, 회색 글씨) */
.img_hero_empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background-color: var(--c-gray-50);
}

.img_hero_empty .img_hero_text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-600);
  text-align: center;
  line-height: 1.4;
}

/* 이미지 카드 */
.img_card {
  border: 1px solid var(--c-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: grab;
}

.img_card.is_dragging {
  opacity: 0.4;
}

.img_card.drag_over {
  border-color: var(--c-primary-400);
  box-shadow: 0 0 0 2px var(--c-primary-200);
}

.img_card.is_empty {
  border-style: dashed;
  border-color: var(--c-input-border);
}

/* 전체 삭제 버튼 영역 */
.img_actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

/* 썸네일 영역 */
.img_thumb {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--c-gray-50);
}

.img_thumb_src {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 대표 뱃지 */
.img_badge {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  padding: 0.125rem 0.5rem;
  background-color: var(--c-primary-500);
  color: var(--c-white);
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* 삭제 버튼 */
.img_delete_btn {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background-color: var(--c-red-500);
  color: var(--c-white);
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.img_card:hover .img_delete_btn,
.img_hero:hover .img_delete_btn {
  opacity: 1;
}


/* 다크모드 */
.dark .img_upload_area {
  border-color: var(--c-gray-600);
}

.dark .img_upload_text {
  color: var(--c-gray-900);
}

.dark .img_upload_hint {
  color: var(--c-gray-500);
}

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

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

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

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

/* ── Cancel Policy - 도메인 전용 스타일 ──── */
/* 테이블 구조는 공통 dtable_* (components.css) 사용 */

.cpolicy_name {
  color: var(--c-text-1);
}

/* 북마크 (기본정책) */
.cpolicy_bookmark {
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-gray-400);
  transform: translateY(2px);
  transition: color var(--duration-fast) var(--ease-default);
}

.cpolicy_bookmark:disabled {
  cursor: default;
}

.cpolicy_bookmark:not(:disabled):hover {
  color: var(--c-text-3);
}

.cpolicy_bookmark.is_default {
  color: #f59e0b;
}

.cpolicy_bookmark_icon {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

/* 부분환불 비율 단계 (테이블형) */
.cpolicy_refund_table {
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-xl);
  padding: 0.625rem;
}

.cpolicy_refund_thead {
  display: grid;
  grid-template-columns: 1fr 1fr 2rem;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

/* 액션(삭제) 컬럼이 없는 2컬럼 변형 */
.cpolicy_refund_table.is_no_action .cpolicy_refund_thead,
.cpolicy_refund_table.is_no_action .cpolicy_refund_row {
  grid-template-columns: 1fr 1fr;
}

.cpolicy_refund_th {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-gray-500);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cpolicy_refund_th.is_action {
  min-width: 2rem;
}

.cpolicy_refund_row {
  display: grid;
  grid-template-columns: 1fr 1fr 2rem;
  gap: 0.5rem;
  padding: 0.375rem 0;
  align-items: center;
}

.cpolicy_refund_row .field_input {
  width: 100%;
  height: 2.25rem;
  font-size: 0.8125rem;
}

.cpolicy_refund_empty {
  padding: 1.25rem 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--c-text-3);
  border-top: 1px solid var(--c-line);
}

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

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

.cpolicy_refund_delete {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-gray-400);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-default);
}

.cpolicy_refund_delete.is_hidden {
  visibility: hidden;
}

.cpolicy_refund_delete:hover {
  color: var(--c-red-500);
}