/* =========================================================
   board.css (게시판/블로그형 전용 스타일)

   초보자 팁)
   - base.css / subpage.css : 사이트 공통 디자인
   - board.css             : "monthly-board.html"에서만 쓰는 스타일

   이번 버전은 "블로그형 게시판"을 목표로 합니다.
   - 글 목록: 카드(card) 형태
   - 글 읽기: 본문(HTML) 그대로 보여주기
   - 글 쓰기: WYSIWYG 편집기(Quill)
========================================================= */

/* ---------------------------------------------------------
   공통 버튼 보강(없을 때 대비)
--------------------------------------------------------- */
.btn{
  appearance:none;
  border:1px solid rgba(9,18,37,.20);
  border-radius:10px;
  padding:10px 18px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
}
.btn:hover{ filter: brightness(0.98); }

.btn--primary{
  border-color: rgba(42,111,232,.30);
  background: linear-gradient(135deg, var(--topbar-a), var(--topbar-b));
  color:#fff;
}

.btn--danger{
  border-color: rgba(214,36,61,.28);
  background: rgba(214,36,61,.08);
  color: #d6243d;
}

/* ---------------------------------------------------------
   상단 도구(목록/새글 + 검색/정렬)
--------------------------------------------------------- */
.boardTopBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin: 6px 0 14px;
}

.boardTopBar__left,
.boardTopBar__right{
  display:flex;
  gap:10px;
  align-items:center;
}

.boardSearch{
  width: 260px;
  border:1px solid rgba(9,18,37,.18);
  border-radius:12px;
  padding:10px 12px;
  font: inherit;
  background:#fff;
}

.boardSort{
  border:1px solid rgba(9,18,37,.18);
  border-radius:12px;
  padding:10px 10px;
  background:#fff;
  font: inherit;
}

@media (max-width: 720px){
  .boardTopBar{ flex-direction:column; align-items:stretch; }
  .boardTopBar__left{ justify-content:flex-start; }
  .boardTopBar__right{ width:100%; }
  .boardSearch{ width:100%; }
}

/* ---------------------------------------------------------
   (A) 글 목록: 블로그 카드 그리드
--------------------------------------------------------- */
.blogList__meta{
  color: rgba(9,18,37,.6);
  font-size:12px;
  margin: 6px 2px 10px;
}

.blogGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.blogCard{
  border:1px solid rgba(9,18,37,.14);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}

.blogCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(9,18,37,.10);
}

.blogCard__cover{
  height: 140px;
  background: rgba(9,18,37,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.blogCard__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.blogCard__body{ padding: 12px 12px 14px; }

.blogCard__title{
  font-weight:900;
  font-size:16px;
  line-height:1.25;
  margin: 0 0 8px;
  color: rgba(9,18,37,.92);
}

.blogCard__excerpt{
  font-size:13px;
  line-height:1.6;
  color: rgba(9,18,37,.76);
  min-height: 62px;
}

.blogCard__meta{
  margin-top:10px;
  font-size:12px;
  color: rgba(9,18,37,.55);
  display:flex;
  justify-content:space-between;
  gap:10px;
}

@media (max-width: 980px){
  .blogGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .blogGrid{ grid-template-columns: 1fr; }
  .blogCard__cover{ height: 160px; }
}

/* ---------------------------------------------------------
   (B) 글 상세(읽기)
--------------------------------------------------------- */
.blogView{
  border:1px solid rgba(9,18,37,.14);
  border-radius:14px;
  background:#fff;
  padding: 14px;
}

.blogView__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  border-bottom:1px solid rgba(9,18,37,.10);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.blogView__title{
  margin:0;
  font-weight:900;
  font-size:22px;
  line-height:1.25;
}

.blogView__meta{
  margin-top:6px;
  color: rgba(9,18,37,.6);
  font-size:12px;
}

.blogView__actions{ display:flex; gap:8px; }

.blogView__content{
  line-height: 1.8;
  color: rgba(9,18,37,.86);
}

/* Quill에서 생성되는 HTML(h1/h2/p/ul/img 등)을 예쁘게 보이게 약간 보강 */
.blogView__content h1,
.blogView__content h2,
.blogView__content h3{ margin: 18px 0 10px; line-height:1.25; }
.blogView__content p{ margin: 10px 0; }
.blogView__content img{ max-width:100%; border-radius:12px; margin: 12px 0; }
.blogView__content blockquote{
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 4px solid rgba(42,111,232,.45);
  background: rgba(42,111,232,.06);
  border-radius:10px;
}

.blogView__bottom{ margin-top:14px; display:flex; justify-content:center; }

@media (max-width: 720px){
  .blogView__head{ flex-direction:column; align-items:stretch; }
  .blogView__actions{ justify-content:flex-end; }
}

/* ---------------------------------------------------------
   (C) 글 작성/수정 폼(제목/글쓴이 + Quill 편집기)
--------------------------------------------------------- */
.boardForm{
  border:1px solid rgba(9,18,37,.14);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.boardRow{
  display:grid;
  grid-template-columns: 120px 1fr;
  border-top:1px solid rgba(9,18,37,.12);
}
.boardRow:first-child{ border-top:none; }

.boardLabel{
  padding:12px 12px;
  background: rgba(42,111,232,.06);
  font-weight:900;
  color: rgba(9,18,37,.82);
  border-right:1px solid rgba(9,18,37,.12);
}

.boardField{ padding:10px 12px; }

.boardInput{
  width:100%;
  border:1px solid rgba(9,18,37,.18);
  border-radius:12px;
  padding:10px 10px;
  font: inherit;
  background:#fff;
}

.boardHint{
  margin-top:8px;
  font-size:12px;
  color: rgba(9,18,37,.62);
}

/* ---------------------------------------------------------
   ✅ (추가) 글쓰기 하단 안내 문구(겹침 방지용)

   왜 추가했나요?
   - 일부 브라우저/해상도에서 Quill 내부 레이아웃(툴바/컨테이너) 영향으로
     아래 버튼 영역(.boardActions)이 위로 "겹쳐" 올라오는 현상이 발생했습니다.
   - 안내 문구를 form의 별도 블록(.boardNote)으로 분리하고,
     버튼 영역은 항상 그 아래에 오도록 "흐름"을 강제합니다.
--------------------------------------------------------- */
.boardNote{
  padding: 12px 14px 6px;
  font-size: 12px;
  color: rgba(9,18,37,.62);
  background:#fff;
}

.boardActions{
  display:flex;
  gap:10px;
  justify-content:center;
  padding:14px;
  border-top:1px solid rgba(9,18,37,.12);
  background: rgba(9,18,37,.02);

  /* ✅ (수정) 겹침 원천 차단
     - 혹시 다른 CSS가 position을 건드리더라도 항상 정상 흐름에 있도록 고정합니다. */
  position: static;
  clear: both;
}

@media (max-width: 720px){
  .boardRow{ grid-template-columns: 90px 1fr; }
  .boardActions{ flex-wrap:wrap; }
}

/* ---------------------------------------------------------
   Quill 편집기 스타일(툴바/에디터 영역)
--------------------------------------------------------- */
.editorToolbar{
  border:1px solid rgba(9,18,37,.18);
  border-radius:12px 12px 0 0;
}

/* Quill이 내부적으로 만드는 .ql-container, .ql-editor에 맞춰서 외곽을 정리합니다. */
.postEditor .ql-container{
  border:1px solid rgba(9,18,37,.18);
  border-top:none;
  border-radius: 0 0 12px 12px;
}

.postEditor .ql-editor{
  min-height: 320px;
  font-size: 15px;
  line-height: 1.7;
}

/* 글쓰기 섹션 전체 박스 */
.blogEditor{
  border:1px solid rgba(9,18,37,.14);
  border-radius:14px;
  background:#fff;
  padding: 14px;
}