/*
 * zz_mobile.css — 게시판 목록의 화면 폭과 휴대폰 공통 보정
 *
 * 글 목록이 고정 너비 없이 화면 안에 맞도록 하고, 제목·작성 정보 배치를 정합니다.
 * .board-page·.board-list: 목록 너비 / .board-post-title: 목록 제목 / .board-post-meta: 작성 정보
 * @media (max-width: 600px) 안쪽: 휴대폰 본문 여백·앱바·글씨·입력창·편집기 도구 배치
 * @media 바깥의 목록 규칙은 PC에서도 적용됩니다. 안드로이드·아이폰 공통 파일입니다.
 * 파일 이름상 마지막에 읽히므로, 앞 파일을 바꿔도 모바일에서 안 달라지면 여기를 확인하세요.
 */

/* 고정 너비 없이 본문 안에 맞추기 */
.board-page,
.board-list {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.board-heading > div {
  min-width: 0;
}

.board-heading .button {
  flex-shrink: 0;
}

.board-list .board-post-title {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.board-list .board-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  line-height: 1.6;
}

.board-post-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 안드로이드·아이폰 공통 */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  body > main {
    padding: 18px 12px 40px;
  }

  .app-bar-inner {
    min-height: 56px;
    padding: 0 12px;
  }

  .app-brand {
    font-size: 23px;
  }

  .board-heading {
    gap: 12px;
    padding-bottom: 14px;
  }

  .board-heading h1 {
    font-size: 24px;
  }

  .board-heading .muted {
    font-size: 13px;
  }

  .board-heading .button {
    min-height: 44px;
    box-sizing: border-box;
    padding: 9px 14px;
    font-size: 14px;
  }

  .board-list .row {
    padding: 14px 0;
  }

  /* 입력할 때도 읽기 편한 크기 유지 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  #editor .ql-editor {
    font-size: 16px;
  }

  .comment-author,
  .post-detail-author,
  .public-profile-info {
    min-width: 0;
  }

  /* 편집기 도구가 좁은 화면에서 줄바꿈되도록 */
  .ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
  }
}