/* ============================================
   Content Page - 콘텐츠 관리 페이지 (/service/management)
   순수 CSS (Tailwind @apply 사용하지 않음)
   네이밍: content_element.is_state (언더스코어)

   탭: 기본 정보/정책 · 공지사항 · FAQ · 메인배너

   구조(셸):
     ModernLayout
       └ layout_page_header        (layouts.css, ModernLayout 자동 렌더)
       └ hotel_detail_header        (hotels.css 재사용)
            └ tab_nav / tab_item    (components.css 재사용)
       └ hotel_detail_body          (hotels.css 재사용 — 탭 콘텐츠 영역)

   섹션/필드는 공용 section_* / field_* (components.css) 재사용
   ============================================ */

/* ── 기본 정보/정책 탭 ──────────────────────── */

/* 브랜딩 - 사이트명: 행 전체를 차지(이미지 카드가 옆에 끼지 않도록)하되
   필드 폭은 첫 번째 열(2열 그리드, 열 간격 2rem) 너비까지만 */
.content_field_full {
  grid-column: 1 / -1;
  max-width: calc(50% - 1rem);
}

/* 브랜딩 - 이미지 카드 (로고/모바일로고/파비콘) — grid_2col 셀 내 세로 배치 */
.content_image_card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.content_image_label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-600);
}

/* 미리보기(좌) + 입력·업로드(우, 세로) 가로 배치 */
.content_image_body {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.content_image_controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 업로드/제거 버튼 행 (기본 크기, 좌측 정렬) */
.content_image_buttons {
  display: flex;
  gap: 0.5rem;
}

.content_image_preview {
  width: 10rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background-color: var(--c-white);
  overflow: hidden;
}

.content_image_preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.content_image_placeholder {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-gray-400);
}

.content_upload_input {
  display: none;
}

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

.dark .content_image_placeholder {
  color: var(--c-text-3);
}

/* 사이트 정책 - 미니카드 (4개 한 줄, 섹션 폭 꽉차게) */
.content_policy_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.content_policy_card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  transition: border-color 150ms;
}

.content_policy_card:hover {
  border-color: var(--c-gray-300);
}

.content_policy_card_title {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text-1);
}

/* 제목 옆 배지 (배정/미배정과 동일한 공용 dtable_badge 사용) */
.content_policy_card .dtable_badge {
  flex-shrink: 0;
}

/* 편집 버튼은 우측 끝 */
.content_policy_card .dtable_action_btn {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .content_policy_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .content_policy_grid {
    grid-template-columns: 1fr;
  }
}

/* 사이트 정책 편집 모달 (modal_overlay/modal_container 패턴 + 에디터용 폭 확장) */
.content_policy_modal {
  max-width: 48rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.content_policy_modal .modal_title,
.content_policy_modal .modal_footer {
  flex-shrink: 0;
}

.content_policy_modal_body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex; /* 에디터가 본문 높이를 가득 채우도록 */
  overflow: hidden; /* 본문 자체는 스크롤하지 않음 */
}

/* 에디터: 모달 본문 높이를 채우는 flex 컬럼 */
.content_policy_modal_body .tiptap_editor {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 툴바: 상단 고정 (스크롤되지 않음) */
.content_policy_modal_body .tiptap_toolbar {
  flex-shrink: 0;
}

/* 텍스트 영역만 스크롤 */
.content_policy_modal_body .tiptap-content {
  flex: 1 1 0%;
  min-height: 0; /* min-h-[300px] 무력화 → 스크롤 가능 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 편집 영역이 빈 공간까지 채워 어디를 눌러도 포커스되도록 */
.content_policy_modal_body .tiptap-content .tiptap {
  flex: 1 1 auto;
}

/* ── 공지사항·배너 테이블 가로 스크롤바 ────────── */

/* dtable_scroll은 스크롤바를 숨기지만, min-width가 있는 테이블은
   예약조회(rsv_table_scroll)처럼 가로 스크롤바를 노출해야 함 */
.dtable_scroll:has(.notice_dtable) {
  scrollbar-width: auto; /* Firefox */
  -ms-overflow-style: auto; /* IE/Edge */
}

.dtable_scroll:has(.notice_dtable)::-webkit-scrollbar {
  display: block;
  width: 0; /* 세로 스크롤바 숨김 */
  height: 9px; /* 가로 스크롤바 높이 (rsv_table_scroll과 동일) */
}

.dtable_scroll:has(.notice_dtable)::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── 공지사항 탭 ────────────────────────────── */

/* 테이블: 컬럼 폭 고정(table-layout fixed) → 제목이 한 줄 말줄임(…) 처리됨
   고정 폭 컬럼 합계를 컨테이너 안에 맞추고, 제목은 auto(남은 공간)로 자연 말줄임 */
.notice_dtable {
  table-layout: fixed;
  min-width: 1100px;
}

.notice_title_cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 필터 바 (or_filter 동일 디자인) */
.notice_filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.notice_filter_search {
  position: relative;
  flex: 0 1 auto;
  width: 16rem;
}

.notice_filter_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--c-gray-400);
  pointer-events: none;
}

.notice_filter_input {
  width: 100%;
  height: 2.375rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--c-text-1);
  outline: none;
}

.notice_filter_input:focus {
  border-color: var(--c-primary-500);
}

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

.notice_filter_right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notice_filter .cselect {
  width: auto;
  min-width: 8rem;
}

/* 셀렉트 높이를 검색박스(2.375rem)와 맞춤 */
.notice_filter .cselect_trigger {
  height: 2.375rem;
}

/* 테이블 탭(공지사항 등): 본문을 flex 컬럼으로 → 내부 page_body가
   헤더(thead)·푸터 고정 + 목록만 스크롤 + dtable_card border 제거까지 처리 */
.hotel_detail_body.is_fill {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* 카테고리 배지 (중립 회색) */
.notice_cat_badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--c-gray-100);
  color: var(--c-gray-600);
}

/* 예약 상태 배지 (red-400, 흰 글씨) — 공용 dtable_badge 확장 */
.dtable_badge.is_scheduled {
  background-color: var(--c-red-400);
  color: #fff;
}

/* 종료 상태 배지 (gray-500, 흰 글씨) — 공용 dtable_badge 확장 */
.dtable_badge.is_ended {
  background-color: var(--c-gray-400);
  color: #fff;
}

/* 게시기간 셀 — 제목 셀과 동일한 폰트 스타일 */
.notice_period {
  font-size: 0.875rem;
  color: var(--c-text-1);
  line-height: 1.5;
  white-space: nowrap;
}

/* 기간 미설정 = 상시 게시 */
.notice_period_always {
  font-size: 0.875rem;
  color: var(--c-text-1);
}

/* 고정 컬럼 핀 아이콘 (관리 컬럼 아이콘과 동일 크기 1rem, 가운데 정렬) */
.notice_pin_icon {
  display: block;
  margin: 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--c-primary-500);
}

/* 공지 등록/수정 모달 */
.notice_modal {
  max-width: 56rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.notice_modal .modal_title,
.notice_modal .modal_footer {
  flex-shrink: 0;
}

.notice_modal_body {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden; /* 본문 자체는 스크롤하지 않음 (내용 에디터만 스크롤) */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.notice_modal .cselect {
  width: 100%;
}

/* 카테고리·제목 행: 열 간격 1rem (grid_2col 기본 2rem 축소) */
.notice_titlerow {
  column-gap: 1rem;
}

/* 게시일 = 날짜(daterange) + 시간(cselect) 1:1 가로 배치, 간격 1rem */
.notice_datetime {
  display: flex;
  gap: 1rem;
}

/* 날짜·시간 인풋: 1:1 비율로 필드 폭을 채움 */
.notice_datetime .daterange_wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex; /* 내부 .daterange_input(flex:1)이 칸을 꽉 채우도록 */
}

.notice_modal .notice_datetime .cselect {
  flex: 1 1 0;
  min-width: 0;
}

/* 내용 필드: 모달 본문에서 남은 높이를 채우고, 에디터 텍스트 영역만 스크롤 */
.notice_content_field {
  flex: 1 1 0%;
  min-height: 0;
}

.notice_content_field .tiptap_editor {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.notice_content_field .tiptap_toolbar {
  flex-shrink: 0; /* 툴바 상단 고정 */
}

.notice_content_field .tiptap-content {
  flex: 1 1 0%;
  min-height: 0; /* min-h-[300px] 무력화 → 스크롤 가능 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.notice_content_field .tiptap-content .tiptap {
  flex: 1 1 auto;
}

/* ── FAQ 탭 (공지사항과 동일 구조) ──────────────── */

/* 필터 바 (notice_filter와 동일 디자인) */
.faq_filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.faq_filter_search {
  position: relative;
  flex: 0 1 auto;
  width: 16rem;
}

.faq_filter_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--c-gray-400);
  pointer-events: none;
}

.faq_filter_input {
  width: 100%;
  height: 2.375rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--c-text-1);
  outline: none;
}

.faq_filter_input:focus {
  border-color: var(--c-primary-500);
}

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

.faq_filter_right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.faq_filter .cselect {
  width: auto;
  min-width: 8rem;
}

.faq_filter .cselect_trigger {
  height: 2.375rem;
}

/* 등록/수정 모달 (notice_modal과 동일 구조) */
.faq_modal {
  max-width: 56rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.faq_modal .modal_title,
.faq_modal .modal_footer {
  flex-shrink: 0;
}

.faq_modal_body {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden; /* 본문 자체는 스크롤하지 않음 (답변 에디터만 스크롤) */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq_modal .cselect {
  width: 100%;
}

/* 카테고리·질문 행: 열 간격 1rem */
.faq_titlerow {
  column-gap: 1rem;
}

/* 답변 필드: 모달 본문에서 남은 높이를 채우고, 에디터 텍스트 영역만 스크롤 */
.faq_content_field {
  flex: 1 1 0%;
  min-height: 0;
}

.faq_content_field .tiptap_editor {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.faq_content_field .tiptap_toolbar {
  flex-shrink: 0;
}

.faq_content_field .tiptap-content {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.faq_content_field .tiptap-content .tiptap {
  flex: 1 1 auto;
}

/* ── 메인배너 탭 (공지사항/FAQ와 동일 구조) ──────── */

/* 필터 바 (notice_filter/faq_filter와 동일 디자인) */
.banner_filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.banner_filter_search {
  position: relative;
  flex: 0 1 auto;
  width: 16rem;
}

.banner_filter_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--c-gray-400);
  pointer-events: none;
}

.banner_filter_input {
  width: 100%;
  height: 2.375rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--c-text-1);
  outline: none;
}

.banner_filter_input:focus {
  border-color: var(--c-primary-500);
}

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

.banner_filter_right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.banner_filter .cselect {
  width: auto;
  min-width: 8rem;
}

.banner_filter .cselect_trigger {
  height: 2.375rem;
}

/* 테이블: 컬럼 폭 고정(table-layout fixed) → 제목·링크가 넘치면 말줄임(…)
   고정 폭 컬럼 합계를 컨테이너 안에 맞추고, 제목·링크는 auto(남은 공간)로 자연 말줄임 */
.banner_dtable {
  table-layout: fixed;
}

.banner_title_cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 썸네일 (16:8 비율) */
.banner_thumb {
  display: inline-block;
  width: 4.5rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--c-gray-100);
}

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

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

/* 링크 셀 — 다른 컬럼과 동일한 폰트(0.875rem, text-1), 길면 말줄임 */
.banner_link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-size: 0.875rem;
  color: var(--c-text-1);
}

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

/* 게시기간 셀 (notice_period와 동일) */
.banner_period {
  font-size: 0.875rem;
  color: var(--c-text-1);
  line-height: 1.5;
  white-space: nowrap;
}

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

/* 등록/수정 모달 (notice_modal과 동일 구조) */
.banner_modal {
  max-width: 40rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.banner_modal .modal_title,
.banner_modal .modal_footer {
  flex-shrink: 0;
}

.banner_modal_body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scrollbar-width: none; /* Firefox — 스크롤바 숨김(스크롤은 가능) */
  -ms-overflow-style: none; /* IE/Edge */
}

.banner_modal_body::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.banner_modal .cselect {
  width: 100%;
}

/* 클릭 이동 URL 행: 입력칸 + '새창 열기' 체크박스 가로 배치 */
.banner_link_row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.banner_link_row .field_input {
  flex: 1;
  min-width: 0;
}

.banner_link_row .field_checkbox_label {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 이미지 업로드 영역 */
.banner_upload {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 객실관리와 공용인 .img_upload_area의 margin-bottom을 이 팝업에서만 제거 */
.banner_upload .img_upload_area {
  margin-bottom: 0;
}

.banner_upload_preview {
  position: relative;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.banner_upload_preview img {
  display: block;
  width: 100%;
  height: 7rem;
  object-fit: cover;
}

.banner_upload_remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.banner_upload_remove:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

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

/* 게시기간 행: 열 간격 1rem (grid_2col 기본 2rem 축소) */
.banner_titlerow {
  column-gap: 1rem;
}

/* 게시일 = 날짜(daterange) + 시간(cselect) 1:1 가로 배치.
   날짜↔시간은 0.5rem로 좁혀(근접성) 한 쌍으로 묶고, 시작일↔종료일 그룹 간격(grid 1rem)과 대비 */
.banner_datetime {
  display: flex;
  gap: 0.5rem;
}

.banner_datetime .daterange_wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.banner_modal .banner_datetime .cselect {
  flex: 1 1 0;
  min-width: 0;
}

/* 등록 팝업은 스크롤이 없어 달력이 아래로 열리면 잘리므로 위로 열기 */
.banner_modal .daterange_dropdown {
  top: auto;
  bottom: calc(100% + 6px);
}