/*
 * Notice rich-text rendering.
 * Detail content is rendered inside `.ql-snow > .ql-editor.notice-content` so the
 * Quill 2 content rules from quill.snow.css (alignment, indent, size, font, list
 * markers via li[data-list], checklists, code blocks, blockquote) apply exactly as
 * in the editor. This file must load AFTER quill.snow.css.
 */

.notice-content.ql-editor {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 0;
  line-height: 1.7;
  font-size: 1.0625rem;
  color: #333;
  cursor: auto;
  outline: none;
  word-break: break-word;
}

.notice-content.ql-editor img {
  max-width: 100%;
  height: auto;
}

/* 본문 그림: 누르면 크게 보기 (notice-detail.js). 링크로 감싼 그림은 링크대로 */
.notice-content.ql-editor img:not(a img) {
  cursor: zoom-in;
}

/* Quill 2 renders list markers via .ql-ui; li itself must not show a native marker */
.notice-content.ql-editor li[data-list] {
  list-style-type: none;
}

/* Legacy notices saved before data-list was preserved (plain <ul>/<ol><li>) */
.notice-content.ql-editor ul > li:not([data-list]) {
  list-style-type: disc;
  padding-left: 0;
}

.notice-content.ql-editor ol > li:not([data-list]) {
  list-style-type: decimal;
  padding-left: 0;
}

.notice-content.ql-editor ul:has(> li:not([data-list])),
.notice-content.ql-editor ol:has(> li:not([data-list])) {
  padding-left: 1.5em;
}

.notice-content.ql-editor li:not([data-list]) > .ql-ui:empty {
  display: none;
}

.notice-content.ql-editor a {
  color: #06c;
  text-decoration: underline;
}

.notice-content.ql-editor hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 1em 0;
}

/* Keep the site's notice h2 accent from overriding editor-chosen headings */
.notice-content.ql-editor h2 {
  border-bottom: 0;
  padding-bottom: 0;
}

/* 코드 블록/pre: 본문 폭 안에서 줄바꿈 (넓은 화면에서도 잘리지 않게, 그래도 넘치면 가로 스크롤) */
.notice-content.ql-editor pre,
.notice-content.ql-editor .ql-code-block-container {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
}

/* 읽기 좋은 줄 길이: 텍스트 블록만 약 75자 제한 (이미지·코드·표·정렬 지정 문단은 전체 폭) */
.notice-content.ql-editor > :where(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6):not([class*="ql-align-"]) {
  max-width: 75ch;
}

.notice-content.ql-editor > p:has(> img, > iframe, > video) {
  max-width: none;
}

/* ---------- Notice list: mobile touch targets & tabs ---------- */
@media (max-width: 600px) {
  /* 탭 5개가 폭을 넘으면 2줄로 (가로 스크롤 시 '기타/Other' 가 화면 밖에 숨던 문제) */
  .notice-tabs {
    flex-wrap: wrap;
  }

  .notice-tabs__btn {
    flex: none;
    white-space: nowrap;
    min-height: 44px;
  }

  /* 44px 버튼 7개(이전/1~5/다음)가 360px 폭에서 한 줄에 들어가도록 간격 축소 */
  #noticePagination {
    flex-wrap: wrap;
    gap: 0.125rem;
  }

  #noticePagination .pagination__pages {
    gap: 0.125rem;
  }
}

/* ---------- 터치 기기(폰·태블릿·가로 모드): 44px 터치 영역 ---------- */
@media (pointer: coarse) {
  #noticePagination .pagination__btn,
  #noticePagination .pagination__page,
  #noticePagination button {
    min-width: 44px;
    min-height: 44px;
  }

  .notice-detail__back {
    min-height: 44px;
  }

  .notice-detail__file {
    min-height: 44px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* 작성/수정 모달: 파일 추가 버튼, 상단 고정 체크박스(라벨 전체가 터치 영역) */
  #addFileBtn,
  #editAddFileBtn {
    min-height: 44px;
  }

  #noticePinnedField .form-field__label,
  #editNoticePinnedField .form-field__label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    cursor: pointer;
  }

  #noticePinned,
  #editNoticePinned {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
  }

  /* 에디터 툴바: 40px 버튼 */
  #noticeWriteModal .ql-snow.ql-toolbar button,
  #noticeEditModal .ql-snow.ql-toolbar button {
    width: 40px;
    height: 40px;
    padding: 9px;
  }

  #noticeWriteModal .ql-snow.ql-toolbar .ql-picker,
  #noticeEditModal .ql-snow.ql-toolbar .ql-picker {
    height: 40px;
  }

  #noticeWriteModal .ql-snow.ql-toolbar .ql-picker-label,
  #noticeEditModal .ql-snow.ql-toolbar .ql-picker-label {
    display: flex;
    align-items: center;
  }

  /* iOS 확대 방지: 에디터 본문 16px */
  #noticeWriteModal .ql-editor,
  #noticeEditModal .ql-editor {
    font-size: 1rem;
  }
}

/* =========================================================
   Notice 페이지/작성·수정 모달: 세로 가운데 정렬 해제 → 위에 붙게
   (.page 는 로그인 화면용으로 align-items:center 가 걸려 있음)
========================================================= */
.page:has(> .notice-page),
.page:has(> .notice-detail),
.page.page--top {
  align-items: flex-start;
}

/* 모달 셸 배치(위쪽 정렬·폭 880px·최대 높이)는 styles.css 공통 .modal/.modal__panel 이 처리 */

/* 머리글: 다른 모달용 .modal__head{padding:24px 24px 0} 이 걸리지 않게 → 제목이 입력 칸과 같은 시작선.
   패널 padding(위/아래 22px)은 그대로이므로 --modal-pad 기본값(22px) 유지 */
#noticeWriteModal .modal__head,
#noticeEditModal .modal__head {
  padding: 0 0 12px;
}

/* 작성/수정 폼 칸이 내용(가로 스크롤 툴바 등) 때문에 패널 밖으로 늘어나지 않게 */
#noticeWriteModal .form-field,
#noticeEditModal .form-field {
  min-width: 0;
}

/* 좁은 폰: 패널 안쪽 여백 축소 → 입력 폭 확보 */
@media (max-width: 480px) {
  #noticeWriteModal .modal__panel,
  #noticeEditModal .modal__panel {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------- 기타 카테고리 (사용자 지정 이름) ---------- */
/* 목록/상세 태그: 다른 카테고리(파랑/초록/보라)와 구분되는 중립 회색 */
.notice-item__tag--other,
.notice-detail__tag--other {
  color: #666;
  background: #f0f0f0;
}

/* 상세 태그: 목록(.notice-item__tag--recruit / --seminar, styles.css)과 같은 색 */
.notice-detail__tag--recruit {
  color: #1a8754;
  background: rgba(26, 135, 84, 0.1);
}

.notice-detail__tag--seminar {
  color: #6f42c1;
  background: rgba(111, 66, 193, 0.1);
}

/* 작성/수정 모달의 "카테고리 이름" 입력 */
.other-category-field .form-field__input {
  width: 100%;
  max-width: 360px;
  min-width: 0;
  box-sizing: border-box;
}

.other-category-field__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: #888;
}

/* 상세 첨부파일: 한 줄 전체가 버튼(넓은 클릭/호버 영역), 긴 파일명은 줄바꿈 */
.notice-detail__file-list {
  display: grid;
  gap: 0.5rem;
}

.notice-detail__file {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e3e6eb;
  border-radius: 0.5rem;
  background: #fff;
  overflow-wrap: anywhere;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .notice-detail__file:hover {
    opacity: 1;
    background: #eef3fb;
    border-color: #26549c;
  }
}

.notice-detail__file:focus-visible {
  outline: 2px solid #26549c;
  outline-offset: 2px;
}

/* 작성/수정 모달 첨부칸: 넓은 드롭 영역 */
.file-drop {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  border: 1.5px dashed #c9d2df;
  border-radius: 0.625rem;
  background: #fafbfd;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.file-drop.is-dragover {
  border-color: #26549c;
  background: #eef3fb;
}

.file-drop .file-list:empty {
  display: none;
}

.file-drop .file-item {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 0.375rem;
}

.file-drop .file-item__name {
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* 수정 모달의 기존 파일: 이름 + 연필(이름 바꾸기) + ×, 연필을 누르면 입력칸 + 확장자(고정) + ✓ + × */
#editExistingFiles .file-item {
  gap: 0.5rem;
  min-height: 3.125rem; /* 입력칸을 열고 닫아도 줄 높이가 같게 (버튼이 움직이지 않게) */
}

.file-item__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  border: none;
  border-radius: 4px;
  background: none;
  color: #26549c;
  cursor: pointer;
}

.file-item__edit:hover {
  background: #eef3fb;
}

.file-item__input {
  flex: 1 1 0;
  width: 0; /* 입력칸 기본 너비가 좁은 화면에서 줄을 넓히지 않게 */
  min-width: 0;
  box-sizing: border-box;
  height: 2rem; /* 줄 최소 높이 안에 들어가게 고정 */
  padding: 0 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font: inherit;
  color: #333;
  background: #fff;
}

.file-item__input:focus {
  outline: none;
  border-color: #26549c;
  box-shadow: 0 0 0 2px rgba(38, 84, 156, 0.15);
}

.file-item__ext {
  flex-shrink: 0;
  color: #6b7280;
}

.file-drop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
}

.file-drop__hint {
  font-size: 0.875rem;
  color: #6b7280;
}

@media (hover: none) {
  /* 터치 기기는 드래그 앤 드롭 안내 숨김 */
  .file-drop__hint {
    display: none;
  }
}

/* 상세: 그림 첨부파일 미리보기 (본문 아래, 원본 비율 유지) */
.notice-detail__images {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.notice-detail__image {
  display: block;
  max-width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fafafa;
}

.notice-detail__image img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
}

.notice-detail__image:focus-visible {
  outline: 2px solid #26549c;
  outline-offset: 2px;
}

/* 상세 화면 폭을 목록(.notice-page.container)과 동일하게 → 좌측 시작선 일치 */
.notice-detail {
  max-width: var(--container);
}

/* 공지 목록/상세: 좌우 여백은 .container 하나만 (main 의 16px 과 이중 여백 방지) */
.page:has(> .notice-page),
.page:has(> .notice-detail) {
  padding-left: 0;
  padding-right: 0;
}

/* 폰용 간단 툴바(notice.js / notice-detail.js 가 ql-toolbar--compact 추가): 한 줄, 넘치면 가로 스크롤.
   드롭다운(picker)이 없는 버튼만 있으므로 overflow 로 잘릴 메뉴가 없음 */
.ql-snow.ql-toolbar.ql-toolbar--compact {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 4px;
}

.ql-snow.ql-toolbar.ql-toolbar--compact .ql-formats {
  display: flex;
  flex: none;
  margin-right: 6px;
}

.ql-snow.ql-toolbar.ql-toolbar--compact button {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 9px;
}

/* ---------- 상세 첨부파일: 회원 전용 (js/notice-detail.js) ---------- */
/* 회원: 행 전체가 <button> → 링크와 같은 모양으로 */
button.notice-detail__file {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.notice-detail__file-name {
  min-width: 0;
}

.notice-detail__file-status {
  margin-left: auto;
  padding-left: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #5b6472;
  white-space: nowrap;
}

.notice-detail__file-status:empty {
  display: none;
}

button.notice-detail__file.is-loading,
button.notice-detail__file:disabled {
  cursor: progress;
  opacity: 0.75;
}

/* 비회원: 이름만 흐리게 + 자물쇠, 누를 수 없음 */
.notice-detail__file--locked,
.notice-detail__file--locked:hover {
  color: #6b7280;
  background: #f6f7f9;
  border-color: #e3e6eb;
  cursor: not-allowed;
  opacity: 1;
}

/* 스크린리더 전용 "(회원 전용)" */
.notice-detail__file-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.notice-detail__files-login,
.notice-detail__files-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.notice-detail__files-login {
  color: #4b5563;
}

.notice-detail__files-login .notice-detail__file-icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: #6b7280;
}

.notice-detail__files-login-link {
  display: inline-block;
  margin-left: 0.25rem;
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notice-detail__files-login-link:focus-visible {
  outline: 2px solid #26549c;
  outline-offset: 2px;
}

.notice-detail__files-error {
  color: #b42318;
}

/* 그림 미리보기: <button> 초기화 + 불러오는 동안 자리 표시 */
button.notice-detail__image {
  padding: 0;
  font: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}

.notice-detail__image.is-loading {
  min-width: min(240px, 100%);
  min-height: 160px;
  background: linear-gradient(90deg, #f1f3f6 0%, #e7eaef 50%, #f1f3f6 100%);
}

.notice-detail__image.is-loading img {
  visibility: hidden;
}

@media (pointer: coarse) {
  .notice-detail__files-login-link {
    min-height: 44px;
    line-height: 44px;
  }
}