/**
 * @file
 * Subtheme specific CSS.
 */

/* ==========================================================================
   최종본: 자동 입력 필드 숨김 및 X.com 스타일 글쓰기 폼
   ========================================================================== */

/* 1. 전체 외곽 컨테이너 트위터 박스화 */
#block-bootstrap-barrio-subtheme-entityform {
  max-width: 600px !important;
  margin: 2rem auto !important;
  padding: 20px !important;
  border: 1px solid #eff3f4 !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

/* 2. 레이아웃 강제 단일화 및 관리자 영역(우측 세로글씨) 박멸 */
#node-article-form .layout-region-node-main,
#node-article-form .layout-region-node-secondary,
#node-article-form .layout-region-node-footer {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
#node-article-form .layout-region-node-secondary {
  display: none !important; 
}

/* 3. 🚫 [핵심] 자동 입력 필드 완전 숨김 (UI에서 제외) */
#edit-title-wrapper,
#edit-field-administrative-districts-wrapper,
#node-article-form .form-required::after,
#edit-field-image-0--description,
#edit-field-tags-target-id--description {
  display: none !important;
}

/* 4. 영역 정렬 (본문이 무조건 맨 위로) */
#node-article-form .layout-region-node-main {
  display: flex !important;
  flex-direction: column !important;
}
#edit-body-wrapper { order: 1 !important; }
#edit-field-image-wrapper { order: 2 !important; }
#edit-field-tags-wrapper { order: 3 !important; }

/* 5. ✍️ 본문 CKEditor 5 트위터 글쓰기창 스타일로 변신 */
#edit-body-wrapper .ck-editor__editable {
  min-height: 140px !important; /* 드루팔 342px 인라인 높이 강제 파괴 */
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 16px 0 !important;
  font-size: 1.25rem !important; /* 트위터처럼 글씨 크고 시원하게 */
  color: #0f1419 !important;
}
#edit-body-wrapper .ck-editor__top {
  display: none !important; /* 상단 툴바 숨겨서 평문 입력창 느낌 구현 */
}

/* 6. 🖼️ 이미지 업로드 영역 미니멀화 */
#edit-field-image-wrapper {
  background-color: #f7f9f9 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  border: 1px dashed #cfd9de !important;
  margin: 10px 0 !important;
}
#edit-field-image-wrapper label {
  font-size: 0.85rem !important;
  color: #536471 !important;
  font-weight: bold !important;
  margin-bottom: 6px !important;
}
#edit-field-image-0-upload {
  font-size: 0.85rem !important;
  border: none !important;
  background: transparent !important;
}

/* 7. 🏷️ 태그 입력창 튜닝 */
#edit-field-tags-target-id {
  border: none !important;
  border-bottom: 1px solid #eff3f4 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1d9bf0 !important; /* 트위터 블루 색상 */
  font-weight: 500 !important;
  padding: 8px 0 !important;
}
#edit-field-tags-target-id:focus {
  border-bottom: 1px solid #1d9bf0 !important;
}

/* 8. 🚀 우하단 알약형 [게시하기] 버튼 정렬 */
#node-article-form .layout-region-node-footer, 
#edit-actions--3 {
  display: flex !important;
  justify-content: flex-end !important;
  border-top: 1px solid #eff3f4 !important;
  padding-top: 14px !important;
  margin-top: 15px !important;
}
#edit-submit--2 {
  background-color: #1d9bf0 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 8px 24px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  transition: background-color 0.2s;
}
#edit-submit--2:hover {
  background-color: #1a8cd8 !important;
}


/* ==========================================================================
   5. ✍️ 본문 CKEditor 5 영역 개선 (테두리 복구 및 2줄 -> 5줄 확장 애니메이션)
   ========================================================================== */

/* 상단 툴바를 숨겨 일반 텍스트창처럼 심플하게 유지 */
#edit-body-wrapper .ck-editor__top {
  display: none !important; 
}

/* [기본 상태] 확연히 인지되는 테두리와 약 2줄 크기의 높이 지정 */
#edit-body-wrapper .ck-editor__editable_inline {
  min-height: 70px !important;          /* 기본 약 2줄 높이 */
  border: 1px solid #ced4da !important;  /* 눈에 잘 띄는 표준 회색 테두리 */
  border-radius: 8px !important;         /* 부드러운 라운드 처리 */
  padding: 12px 16px !important;         /* 내부 여백 확보 */
  font-size: 1.1rem !important;
  color: #0f1419 !important;
  background-color: #ffffff !important;
  
  /* 부드럽게 창이 늘어나도록 애니메이션 효과 부여 */
  transition: min-height 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

/* [클릭 / 글 작성 상태] 마우스를 클릭하면 내장 클래스(.ck-focused)가 작동하며 5줄로 확장 */
#edit-body-wrapper .ck-editor__editable_inline.ck-focused {
  min-height: 160px !important;          /* 클릭 시 약 5줄 높이로 자동 확장 */
  border-color: #1d9bf0 !important;      /* 포커스 시 트위터 블루 색상 강조 */
  box-shadow: 0 0 0 1px #1d9bf0 !important; /* 테두리 라인 가시성 극대화 */
  background-color: #ffffff !important;
  outline: none !important;
}