/* TinyMCE 7 에디터 전체 스타일 */
.tox-tinymce {
  border: 1px solid #ddd !important;
  border-radius: 0.5rem !important;
  position: relative !important;
}

/* 에디터 헤더와 툴바를 강제로 표시 */
.tox .tox-editor-header {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: relative !important;
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #ddd !important;
  min-height: 44px !important;
}

/* 기본 툴바 스타일 */
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  display: flex !important;
  flex-wrap: wrap !important;  /* wrap 모드를 위해 wrap으로 변경 */
  background-color: #f8f9fa !important;
  padding: 4px !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;  /* 오버플로우 표시 */
  max-width: 100% !important;
}

/* Floating 툴바를 위한 스타일 */
.tox .tox-toolbar__overflow {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: absolute !important;
  z-index: 2001 !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  padding: 4px !important;
}

/* 툴바 더보기 버튼 스타일 - sliding 모드 */
.tox .tox-tbtn[aria-label*="More"],
.tox .tox-tbtn[title*="More"],
.tox .tox-toolbar__more-button,
.tox .tox-tbtn--more,
.tox .tox-tbtn[aria-label="Reveal or hide additional toolbar items"] {
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background-color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
}

/* 더보기 버튼 아이콘 (...) */
.tox .tox-tbtn--more .tox-icon svg,
.tox .tox-tbtn[aria-label="Reveal or hide additional toolbar items"] .tox-icon svg {
  fill: #374151 !important;
}

.tox .tox-tbtn[aria-label*="More"]:hover,
.tox .tox-tbtn[title*="More"]:hover,
.tox .tox-toolbar__more-button:hover,
.tox .tox-tbtn--more:hover,
.tox .tox-tbtn[aria-label="Reveal or hide additional toolbar items"]:hover {
  background-color: #e5e7eb !important;
}

/* 툴바 그룹 */
.tox .tox-toolbar__group {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-right: 4px !important;
  border: none !important;
}

/* 툴바 그룹 구분선 */
.tox .tox-toolbar__group:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 24px;
  background-color: #ddd;
  margin: 0 4px;
  vertical-align: middle;
}

/* 툴바 버튼 */
.tox .tox-tbtn,
.tox .tox-split-button,
.tox .tox-tbtn--select {
  visibility: visible !important;
  opacity: 1 !important;
  color: #374151 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border: none !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease !important;
}

.tox .tox-tbtn:hover,
.tox .tox-split-button:hover {
  background-color: #e5e7eb !important;
}

/* 툴바 버튼 아이콘 */
.tox .tox-icon svg {
  fill: #374151 !important;
  width: 20px !important;
  height: 20px !important;
}

/* 포맷 선택 드롭다운 */
.tox .tox-tbtn--select {
  min-width: 90px !important;
}

/* 툴바가 숨겨지는 것을 방지 */
.tox .tox-toolbar[style*="visibility: hidden"],
.tox .tox-toolbar__primary[style*="visibility: hidden"],
.tox .tox-toolbar__overflow[style*="visibility: hidden"] {
  visibility: visible !important;
}

/* 에디터 편집 영역 */
.tox .tox-edit-area {
  min-height: 500px !important;
}

/* 텍스트에어리어 초기 높이 */
[data-controller="editor"] textarea {
  min-height: 600px;
}

/* 메뉴와 다이얼로그 z-index */
.tox.tox-tinymce-aux,
.tox-tinymce-aux {
  z-index: 2000 !important;
}

/* Floating 툴바 팝업 */
.tox .tox-pop {
  z-index: 2002 !important;
}

.tox .tox-pop__dialog {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  /* 에디터 전체 높이 조정 */
  .tox-tinymce {
    height: auto !important;
  }
  
  .tox .tox-edit-area {
    min-height: 250px !important;
    max-height: 400px !important;
  }
  
  /* 툴바 반응형 */
  .tox .tox-toolbar__primary {
    flex-wrap: wrap !important;
    padding: 2px !important;
  }
  
  .tox .tox-toolbar__group {
    margin: 2px !important;
  }
  
  /* 버튼 크기 모바일 최적화 */
  .tox .tox-tbtn,
  .tox .tox-split-button,
  .tox .tox-tbtn--select {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 6px !important;
  }
  
  /* 모바일에서 툴바 버튼 텍스트 숨기기 */
  .tox .tox-tbtn__select-label {
    display: none !important;
  }
  
  /* 아이콘 크기 조정 */
  .tox .tox-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* 상태바 숨기기 */
  .tox .tox-statusbar {
    display: none !important;
  }
}

/* 로딩 표시 스타일 */
#editor-loading {
  padding: 1rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  color: #1e40af;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* TinyMCE 초기화 문제 해결을 위한 추가 스타일 */
.tox-tinymce {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 툴바 컨테이너 표시 강제 */
.tox .tox-editor-container {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 모든 툴바 요소 표시 */
.tox .tox-toolbar * {
  visibility: inherit !important;
  opacity: inherit !important;
}

/* Sticky 툴바 스타일 */
.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1999 !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 툴바 애니메이션 제거 (즉시 표시) */
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar__overflow {
  transition: none !important;
  animation: none !important;
}

/* Sliding 툴바 더보기 버튼 표시 강제 */
.tox .tox-toolbar__overflow--open {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Sliding 툴바 오버플로우 처리 */
.tox-toolbar__overflow--sliding {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 툴바 컨테이너 최대 너비 설정 */
.tox .tox-toolbar-overlord {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* 툴바 스크롤 제거 */
.tox .tox-editor-header {
  overflow: visible !important;
}

.tox .tox-toolbar-overlord {
  overflow: visible !important;
}

/* 툴바 그룹 간격 조정 */
.tox .tox-toolbar__group {
  margin-bottom: 4px !important;
}

/* 반응형 툴바 - 화면이 작을 때 자동 줄바꿈 */
@media (max-width: 768px) {
  .tox .tox-toolbar__primary {
    flex-wrap: wrap !important;
  }
  
  .tox .tox-toolbar__group {
    margin-bottom: 4px !important;
  }
}