/* ---------------------------------------------------
   ✒️ editor.css v10 — ※ post.html에서 사용됨
   Ha-Bin Studio • Excel-based UI Model
   ※ 구조 / 색상 / 역할 정리 완료    2026. 5. 27
---------------------------------------------------- */
/* ============================
   전체 컨테이너
============================ */
.hb-editor-container {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 20px 40px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #2B2B2B;
}
/* ============================
   상단 영역
============================ */
.hb-top-line {
  display: flex;
  align-items: center;
  justify-content: space-between;  
  margin-bottom: 6px;
}
/* ============================
   상단 버튼 그룹
============================ */
.hb-top-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin-left: 20px; 
}
.hb-top-btn {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  font-size: 15px;
  background: #3558A8;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
/* 버튼 색상 역할 */
#hb-btn-cancel { background: #8A8A8A; }
#hb-btn-save   { background: #264789; }
#hb-btn-update { background: #2E8B57; }
#hb-btn-delete { background: #D9534F; }
/* ============================
   제목 입력
============================ */
#hb-title {
  width: 100%;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
  border: 2px solid #3558A8;
  box-shadow: 0 0 0 3px rgba(91,182,200,0.3);
  border-radius: 8px;
}
#hb-title:focus {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(91,182,200,0.3),
    0 0 10px rgba(180,120,255,0.6),
    0 0 20px rgba(200,150,255,0.4);
  transition: box-shadow 0.25s ease-out;
}
/* ============================
   본문 에디터
============================ */
#hb-editor {
  width: 100%;
  min-height: 650px;
  height: auto;
  padding: 20px;
  background: #FFFFFF;
  border: 2px solid #3558A8;
  box-shadow: 0 0 0 3px rgba(91,182,200,0.3);
  border-radius: 10px;
  font-size: 17px;
  line-height: 1.6;
  overflow-y: visible;
  overflow-x: hidden;
  scroll-behavior: auto;
}
#hb-editor:focus {
  outline: none;
}
/* =========================
   Editor Scrollbar (Lavender)
   ※ 에디터 전용
========================= */
/* Chrome / Edge */
#hb-editor::-webkit-scrollbar {
  width: 6px;
}
#hb-editor::-webkit-scrollbar-track {
  background: #EEEAF6;   /* 연보라 트랙 */
}
#hb-editor::-webkit-scrollbar-thumb {
  background: #C9C5DE;   /* 연보라 손잡이 */
  border-radius: 6px;
}
#hb-editor::-webkit-scrollbar-thumb:hover {
  background: #8F88B8;   /* 살짝 진해짐 */
}
/* Firefox */
#hb-editor {
  scrollbar-width: thin;
  scrollbar-color: #A6A0C8 #EEEAF6;
}
/* ============================
   줄간격 프리셋
============================ */
.lh-tight  { line-height: 1.2; }
.lh-normal { line-height: 2.0; }
.lh-wide   { line-height: 3.0; }
/* ============================
   하단 버튼
============================ */
.hb-bottom-buttons {
  display: flex;
  gap: 10px;
  opacity: 0.9; 
  }
.hb-btn-bottom {
  height: 28px;
  line-height: 28px;
  padding: 0 15px; 
  background: #636300;
  color: #FFFFFF;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
}
.hb-btn-bottom:hover {
  background: #264789;
}
/* ============================
   팝업 영역 (색상 / 이미지)
============================ */
#hb-popup-color-basic,
#hb-popup-color-advanced,
#hb-popup-image {
  position: absolute;
  display: none;
  z-index: 1000;
  background: #FFFFFF;
}
/* ============================
   이미지 input 숨김
============================ */
#hb-image-input {
  position: fixed;
  left: -9999px;
  top: 0;
}
/* ============================
   QNA 게시판 예외 규정
   - board=qna 일 때만 적용
============================ */
body.board-qna #hb-editor {
  min-height: 0;
  height: auto;
  overflow-y: visible;
}
/* ============================
   MOBILE MAIN
============================ */
.mo-main{
  display:none;
}
/* ============================
   모바일 전용
============================ */
@media (max-width: 480px){
  #hb-editor{
    min-height: 400px;
  }
}