/* ============================================
   notice.css
   공지사항 목록/상세 페이지 스타일
   ============================================ */

/* --- 목록: 카드를 링크로 사용 --- */
.notice-list-item {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 18px 22px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.notice-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.notice-list-item h2 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
}
.notice-list-item .muted {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notice-list-item .notice-list-date {
  font-size: 12px;
  margin-top: 8px;
}

/* --- 상세: 카드 + 본문 --- */
.notice-detail-card {
  margin-top: 18px;
  padding: 28px;
}

.notice-detail-body {
  line-height: 1.85;
  color: rgba(23, 22, 20, .82);
  font-size: 15.5px;
  word-break: break-word;
}
.notice-detail-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
  border-radius: 6px;
}
/* 기존 CKEditor image2 figure 래퍼 (마이그레이션 콘텐츠 호환) */
.notice-detail-body figure.image { margin: 12px 0; }
.notice-detail-body figure.image img { display: block; max-width: 100%; height: auto; margin: 0; border-radius: 6px; }
.notice-detail-body figure.image figcaption {
  font-size: .92em;
  color: rgba(23, 22, 20, .6);
  text-align: center;
  padding: 6px 0 0;
}
.notice-detail-body figure.image.image-align-left  { float: left;  margin: 0 16px 12px 0; }
.notice-detail-body figure.image.image-align-right { float: right; margin: 0 0 12px 16px; }
.notice-detail-body figure.image.image-align-center { margin-left: auto; margin-right: auto; }
.notice-detail-body figure.image.image-align-center img { margin-left: auto; margin-right: auto; }
/* 기존 CKEditor Table 플러그인 출력 (마이그레이션 콘텐츠 호환) */
.notice-detail-body table {
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
  margin: 12px 0;
}
.notice-detail-body table td,
.notice-detail-body table th {
  border: 1px solid #ddd;
  padding: 6px 8px;
}
.notice-detail-body table th {
  background: var(--bg2, #f3eee6);
  font-weight: 600;
}
.notice-detail-body h1,
.notice-detail-body h2,
.notice-detail-body h3,
.notice-detail-body h4 {
  margin: 1.4em 0 .6em;
  line-height: 1.35;
}
.notice-detail-body h1 { font-size: 24px; }
.notice-detail-body h2 { font-size: 20px; }
.notice-detail-body h3 { font-size: 18px; }
.notice-detail-body h4 { font-size: 16px; }
.notice-detail-body p { margin: 0.7em 0; }
.notice-detail-body ul,
.notice-detail-body ol {
  padding-left: 1.5em;
  margin: 0.7em 0;
}
.notice-detail-body li { margin: 0.3em 0; }
/* Quill 2.x 리스트: 불릿/번호를 모두 <ol><li data-list="..."> 로 출력하므로 li 단위로 마커 지정 */
.notice-detail-body li[data-list="bullet"] { list-style-type: disc; }
.notice-detail-body li[data-list="ordered"] { list-style-type: decimal; }
.notice-detail-body blockquote {
  border-left: 3px solid var(--accent, #c7a36a);
  padding: 4px 14px;
  margin: 1em 0;
  color: rgba(23, 22, 20, .65);
  background: rgba(199, 163, 106, .06);
}
.notice-detail-body a {
  color: var(--accent2, #b08a52);
  text-decoration: underline;
}

/* --- 첨부 다운로드 (본문 카드 하단) --- */
.notice-detail-attach {
  margin-top: 18px;
}
.notice-attach-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
  color: var(--fg, #171614);
  font-size: 14px;
  max-width: 100%;
  word-break: break-all;
}
.notice-attach-link:hover { text-decoration: underline; }
.notice-attach-icon { font-size: 18px; flex-shrink: 0; line-height: 1.2; }
.notice-attach-name { line-height: 1.5; }

/* --- 본문 Quill 포맷 보강 (정렬/들여쓰기) — sanitize_notice_html이 ql-* 네임스페이스 보존 --- */
.notice-detail-body .ql-align-center { text-align: center; }
.notice-detail-body .ql-align-right  { text-align: right; }
.notice-detail-body .ql-align-justify { text-align: justify; }
.notice-detail-body .ql-align-center img { margin-left: auto; margin-right: auto; }
.notice-detail-body .ql-align-right img  { margin-left: auto; margin-right: 0; }
.notice-detail-body .ql-indent-1 { padding-left: 3em; }
.notice-detail-body .ql-indent-2 { padding-left: 6em; }
.notice-detail-body .ql-indent-3 { padding-left: 9em; }
.notice-detail-body .ql-indent-4 { padding-left: 12em; }

/* --- 본문 코드 블록 (Quill: .ql-code-block-container / 기존 CKEditor: <pre><code>) --- */
.notice-detail-body pre,
.notice-detail-body .ql-code-block-container,
.notice-detail-body .ql-code-block {
  background: var(--bg2, #f3eee6);
  padding: 12px 14px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 12px 0;
}
.notice-detail-body .ql-code-block-container .ql-code-block {
  background: transparent;
  padding: 0;
  margin: 0;
}
.notice-detail-body code {
  background: var(--bg2, #f3eee6);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
}
.notice-detail-body hr {
  border: 0;
  border-top: 1px solid var(--line, rgba(23, 22, 20, .12));
  margin: 18px 0;
}
.notice-detail-body sub { vertical-align: sub; font-size: .8em; }
.notice-detail-body sup { vertical-align: super; font-size: .8em; }

/* --- 상세 액션 영역 --- */
.notice-detail-actions {
  margin-top: 24px;
  text-align: center;
}
.notice-detail-actions .btn {
  min-width: 160px;
}

/* --- 이전/다음 페이저 --- */
.notice-detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 8px;
}
.notice-nav-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line, rgba(23, 22, 20, .12));
  border-radius: 14px;
  background: var(--card, rgba(255, 255, 255, .65));
  text-decoration: none;
  color: var(--fg, #171614);
  transition: background .12s ease, transform .12s ease;
  min-height: 64px;
}
.notice-nav-item:hover:not(.is-disabled) {
  background: var(--bg2, #f3eee6);
  transform: translateY(-1px);
}
.notice-nav-prev { text-align: left; }
.notice-nav-next { text-align: right; align-items: flex-end; }
.notice-nav-label {
  font-size: 12px;
  color: rgba(23, 22, 20, .55);
  letter-spacing: .04em;
}
.notice-nav-title {
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.notice-nav-item.is-disabled {
  cursor: default;
  opacity: .55;
}

/* --- 반응형 --- */
@media (max-width: 720px) {
  .notice-detail-card { padding: 20px; }
  .notice-detail-body { font-size: 15px; }
  .notice-detail-body h1 { font-size: 20px; }
  .notice-detail-body h2 { font-size: 18px; }
  .notice-detail-body h3 { font-size: 16px; }
  .notice-list-item { padding: 16px 18px; }
}

@media (max-width: 680px) {
  .notice-detail-nav { grid-template-columns: 1fr; }
  .notice-nav-next { text-align: left; align-items: flex-start; }
}

@media (max-width: 520px) {
  /* CKE image2: 모바일에서는 float 해제하여 가독성 확보 */
  .notice-detail-body figure.image.image-align-left,
  .notice-detail-body figure.image.image-align-right {
    float: none;
    margin: 12px auto;
  }
  /* 좁은 화면에서 넓은 table 가로 스크롤 */
  .notice-detail-body table { display: block; overflow-x: auto; }
}