<script setup>
import { ANNOUNCEMENT_BACKGROUND_PRESETS } from '~/lib/announcement-bar.js'
import {
  normalizeSignupBlockedUsernames,
  parseSignupBlockedUsernamesFromText
} from '~/lib/signup-blocked-usernames.js'

definePageMeta({
  layout: 'admin'
})

const router = useRouter()

const savingTitleDesc = ref(false)
const savingMisc = ref(false)
const savingPost = ref(false)
const savingHomeCover = ref(false)
const savingAnnouncement = ref(false)
const savingSpam = ref(false)
const uploadingLogo = ref(false)
const uploadingHomeCover = ref(false)
const uploadingHomeCoverDark = ref(false)
const requestingPostExport = ref(false)
const deletingPostExportJobIds = ref([])
const downloadingPostExportJobIds = ref([])
const retryingPostExportJobIds = ref([])
const importingPosts = ref(false)
const postImportFileName = ref('')
const postImportResult = ref(null)
const postExportDateRangeMode = ref('all')
const postExportYear = ref(new Date().getFullYear())
const postExportMonth = ref(new Date().getMonth() + 1)
const postExportDateFrom = ref('')
const postExportDateTo = ref('')
const postExportChunkSize = ref(500)
const postExportMaxFileSizeMb = ref(500)
const postImportExportPanel = ref('')
const errorMessage = ref('')
const toast = ref(null)
const logoInputRef = ref(null)
const homeCoverInputRef = ref(null)
const homeCoverDarkInputRef = ref(null)
const postImportInputRef = ref(null)
const mainScrollRef = ref(null)
const navSearchQuery = ref('')
const activeSectionId = ref('admin-settings-section-title')
const scrollSpySuspended = ref(false)
/** 블로그 제목·설명 카드 편집 모드 여부 */
const editTitleDesc = ref(false)
/** 사이트 정보 카드 편집 모드 여부 */
const editMisc = ref(false)
/** POST 설정 카드 편집 모드 여부 */
const editPost = ref(false)
/** 메인 화면 커버 카드 편집 모드 여부 */
const editHomeCover = ref(false)
/** 어나운스 바 맞춤 설정 패널 열림 여부 */
const customizeAnnouncement = ref(false)
/** 스팸 필터 카드 편집 모드 여부 */
const editSpam = ref(false)
/** 편집 시작 시점의 제목·설명(취소 시 복원용) */
const titleDescSnapshot = reactive({
  title: '',
  description: ''
})
/** 편집 시작 시점의 사이트 정보(취소 시 복원용) */
const miscSnapshot = reactive({
  siteUrl: '',
  logoText: '',
  logoUrl: '',
  faviconUrl: '',
  copyrightText: ''
})
/** 편집 시작 시점의 POST 설정(취소 시 복원용) */
const postSnapshot = reactive({
  showPostUpdatedAt: false
})
/** 편집 시작 시점의 메인 화면 커버(취소 시 복원용) */
const homeCoverSnapshot = reactive({
  homeCoverImageUrl: '',
  homeCoverDarkImageUrl: '',
  homeCoverTitle: '',
  homeCoverText: ''
})
/** 맞춤 설정 시작 시점의 어나운스 바(취소 시 복원용) */
const announcementSnapshot = reactive({
  announcementEnabled: false,
  announcementText: '',
  announcementUrl: '',
  announcementBackgroundColor: '#15171a'
})
/** 편집 시작 시점의 스팸 필터(취소 시 복원용) */
const spamSnapshot = reactive({
  signupBlockedUsernames: []
})
let toastTimer = null
let scrollSpyFrame = null
let postExportRefreshTimer = null

const { data: settings } = await useFetch('/admin/api/settings')
const {
  data: postExportJobs,
  refresh: refreshPostExportJobs
} = await useFetch('/admin/api/posts/export-jobs', {
  default: () => []
})

const form = reactive({
  title: settings.value?.title || 'sori.studio',
  description: settings.value?.description || '',
  siteUrl: settings.value?.siteUrl || 'https://sori.studio',
  logoText: settings.value?.logoText || '井',
  logoUrl: settings.value?.logoUrl || '',
  faviconUrl: settings.value?.faviconUrl || '',
  copyrightText: settings.value?.copyrightText || '©2026 sori.studio',
  showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt),
  homeCoverImageUrl: settings.value?.homeCoverImageUrl || '',
  homeCoverDarkImageUrl: settings.value?.homeCoverDarkImageUrl || '',
  homeCoverTitle: settings.value?.homeCoverTitle || '',
  homeCoverText: settings.value?.homeCoverText || '',
  announcementEnabled: Boolean(settings.value?.announcementEnabled),
  announcementText: settings.value?.announcementText || '',
  announcementUrl: settings.value?.announcementUrl || '',
  announcementBackgroundColor: settings.value?.announcementBackgroundColor || '#15171a',
  signupBlockedUsernames: normalizeSignupBlockedUsernames(settings.value?.signupBlockedUsernames)
})

/**
 * 블로그 제목·설명 변경 여부
 * @returns {boolean} 변경 여부
 */
const hasTitleDescChanges = computed(() => editTitleDesc.value && (
  form.title !== titleDescSnapshot.title
  || form.description !== titleDescSnapshot.description
))

/**
 * 사이트 정보 변경 여부
 * @returns {boolean} 변경 여부
 */
const hasMiscChanges = computed(() => editMisc.value && (
  form.siteUrl !== miscSnapshot.siteUrl
  || form.logoText !== miscSnapshot.logoText
  || form.logoUrl !== miscSnapshot.logoUrl
  || form.faviconUrl !== miscSnapshot.faviconUrl
  || form.copyrightText !== miscSnapshot.copyrightText
))

/**
 * POST 설정 변경 여부
 * @returns {boolean} 변경 여부
 */
const hasPostChanges = computed(() => editPost.value
  && form.showPostUpdatedAt !== postSnapshot.showPostUpdatedAt)

/**
 * 메인 화면 커버 변경 여부
 * @returns {boolean} 변경 여부
 */
const hasHomeCoverChanges = computed(() => editHomeCover.value && (
  form.homeCoverImageUrl !== homeCoverSnapshot.homeCoverImageUrl
  || form.homeCoverDarkImageUrl !== homeCoverSnapshot.homeCoverDarkImageUrl
  || form.homeCoverTitle !== homeCoverSnapshot.homeCoverTitle
  || form.homeCoverText !== homeCoverSnapshot.homeCoverText
))

/**
 * 어나운스 바 변경 여부
 * @returns {boolean} 변경 여부
 */
const hasAnnouncementChanges = computed(() => customizeAnnouncement.value && (
  form.announcementEnabled !== announcementSnapshot.announcementEnabled
  || form.announcementText !== announcementSnapshot.announcementText
  || form.announcementUrl !== announcementSnapshot.announcementUrl
  || form.announcementBackgroundColor !== announcementSnapshot.announcementBackgroundColor
))

/**
 * 스팸 필터 변경 여부
 * @returns {boolean} 변경 여부
 */
const hasSpamChanges = computed(() => editSpam.value
  && JSON.stringify(form.signupBlockedUsernames) !== JSON.stringify(spamSnapshot.signupBlockedUsernames))

/**
 * 최신 게시물 export 작업 목록
 * @returns {Array} export 작업 목록
 */
const normalizedPostExportJobs = computed(() => Array.isArray(postExportJobs.value) ? postExportJobs.value : [])

/**
 * 진행 중인 게시물 export 작업이 있는지 확인한다.
 * @returns {boolean} 진행 중 작업 여부
 */
const hasActivePostExportJobs = computed(() => normalizedPostExportJobs.value.some((job) => (
  job.status === 'queued' || job.status === 'processing'
)))

/**
 * Export 연도 선택지
 * @returns {Array<number>} 연도 목록
 */
const postExportYearOptions = computed(() => {
  const currentYear = new Date().getFullYear()
  return Array.from({ length: 10 }, (_, index) => currentYear - index)
})

/**
 * Export 월 선택지
 * @type {ReadonlyArray<number>}
 */
const postExportMonthOptions = Array.from({ length: 12 }, (_, index) => index + 1)

/**
 * 게시물 export 요청 버튼 활성 가능 여부
 * @returns {boolean} 활성 가능 여부
 */
const canRequestPostExport = computed(() => {
  if (requestingPostExport.value || hasActivePostExportJobs.value) {
    return false
  }

  const hasValidSplitOptions = postExportChunkSize.value >= 1
    && postExportChunkSize.value <= 500
    && postExportMaxFileSizeMb.value >= 10
    && postExportMaxFileSizeMb.value <= 2048

  if (!hasValidSplitOptions) {
    return false
  }

  if (postExportDateRangeMode.value === 'custom') {
    return Boolean(
      postExportDateFrom.value
      && postExportDateTo.value
      && postExportDateFrom.value <= postExportDateTo.value
    )
  }

  return true
})

/**
 * 게시물 export 요청 버튼 안내 문구
 * @returns {string} 안내 문구
 */
const postExportRequestTitle = computed(() => {
  if (hasActivePostExportJobs.value) {
    return '진행 중인 Export 작업이 끝난 뒤 새 요청을 만들 수 있습니다.'
  }

  if (postExportDateRangeMode.value === 'custom' && !canRequestPostExport.value) {
    return '올바른 시작일과 종료일을 선택해 주세요.'
  }

  if (!canRequestPostExport.value) {
    return 'ZIP당 최대 게시물 수와 목표 용량을 확인해 주세요.'
  }

  return '게시물 Export 작업을 요청합니다.'
})

/**
 * Import/Export 상세 패널을 전환한다.
 * @param {'import'|'export'} panelName - 열 패널 이름
 * @returns {void}
 */
const togglePostImportExportPanel = (panelName) => {
  postImportExportPanel.value = postImportExportPanel.value === panelName ? '' : panelName
}

/**
 * Export 요청 범위 입력을 만든다.
 * @returns {Object} Export 범위 입력
 */
const createPostExportRequestBody = () => {
  const base = {
    chunkSize: Number(postExportChunkSize.value),
    maxFileSizeBytes: Number(postExportMaxFileSizeMb.value) * 1024 * 1024,
    retentionDays: 100,
    dateRangeMode: postExportDateRangeMode.value
  }

  if (postExportDateRangeMode.value === 'year') {
    return {
      ...base,
      year: Number(postExportYear.value)
    }
  }

  if (postExportDateRangeMode.value === 'month') {
    return {
      ...base,
      year: Number(postExportYear.value),
      month: Number(postExportMonth.value)
    }
  }

  if (postExportDateRangeMode.value === 'custom') {
    return {
      ...base,
      dateFrom: postExportDateFrom.value,
      dateTo: postExportDateTo.value
    }
  }

  return base
}

/**
 * export 상태 라벨 조회
 * @param {string} status - export 상태
 * @returns {string} 상태 라벨
 */
const getPostExportStatusLabel = (status) => ({
  queued: '대기 중',
  processing: '생성 중',
  ready: '준비 완료',
  failed: '실패',
  expired: '만료'
}[status] || '알 수 없음')

/**
 * export 상태 배지 클래스 조회
 * @param {string} status - export 상태
 * @returns {string} Tailwind 클래스
 */
const getPostExportStatusClass = (status) => ({
  queued: 'bg-[#eef4ff] text-[#2f5fbb] ring-[#c9dafd]',
  processing: 'bg-[#fff7e8] text-[#9a6200] ring-[#f3d39b]',
  ready: 'bg-[#eaf8f0] text-[#147a45] ring-[#b9e7cd]',
  failed: 'bg-[#fff0f0] text-[#c53232] ring-[#f3c2c2]',
  expired: 'bg-[#f1f3f5] text-[#657080] ring-[#dce0e5]'
}[status] || 'bg-[#f1f3f5] text-[#657080] ring-[#dce0e5]')

/**
 * 바이트 값을 읽기 쉬운 용량으로 변환한다.
 * @param {number} value - 바이트 값
 * @returns {string} 용량 라벨
 */
const formatExportFileSize = (value) => {
  const bytes = Number(value || 0)

  if (!bytes) {
    return '생성 대기'
  }

  const units = ['B', 'KB', 'MB', 'GB']
  let size = bytes
  let unitIndex = 0

  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex += 1
  }

  return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
}

/**
 * export 작업 진행률을 계산한다.
 * @param {Object} job - export 작업
 * @returns {number} 진행률
 */
const getPostExportProgressPercent = (job) => {
  const total = Number(job?.postCount || 0)
  const processed = Number(job?.processedCount || 0)

  if (!total) {
    return job?.status === 'ready' ? 100 : 0
  }

  return Math.min(Math.max(Math.round((processed / total) * 100), 0), 100)
}

/**
 * export 작업 진행 숫자 라벨을 만든다.
 * @param {Object} job - export 작업
 * @returns {string} 진행 숫자 라벨
 */
const getPostExportProgressLabel = (job) => {
  const total = Number(job?.postCount || 0)
  const processed = Math.min(Number(job?.processedCount || 0), total)

  if (!total) {
    return '0 / 0'
  }

  return `${processed.toLocaleString()} / ${total.toLocaleString()}`
}

/**
 * export 작업 진행 보조 설명을 만든다.
 * @param {Object} job - export 작업
 * @returns {string} 진행 보조 설명
 */
const getPostExportProgressDescription = (job) => {
  if (job.progressMessage) {
    return job.progressMessage
  }

  if (job.status === 'queued') {
    return '작업 대기열에 등록되었습니다. 곧 파일 생성이 시작됩니다.'
  }

  if (job.status === 'processing') {
    return job.currentPartIndex
      ? `${job.currentPartIndex}번째 분할 파일을 생성하는 중입니다.`
      : '분할 파일을 생성하는 중입니다.'
  }

  if (job.status === 'ready') {
    return '생성이 완료되었습니다.'
  }

  return job.message || ''
}

/**
 * 가입 금지 닉네임 textarea 바인딩
 */
const signupBlockedUsernamesText = computed({
  get: () => form.signupBlockedUsernames.join('\n'),
  set: (value) => {
    form.signupBlockedUsernames = parseSignupBlockedUsernamesFromText(value)
  }
})

/**
 * 설정 화면 좌측 내비 구역 정의
 * @type {ReadonlyArray<{ heading: string, items: ReadonlyArray<{ id: string, label: string, keywords: string, iconId?: string }> }>}
 */
const settingsNavGroups = [
  {
    heading: '일반',
    items: [
      { id: 'admin-settings-section-title', label: '블로그 제목·설명', keywords: 'title description site name', iconId: 'title-desc' },
      { id: 'admin-settings-section-misc', label: '사이트 정보', keywords: 'logo url copyright favicon site info' }
    ]
  },
  {
    heading: '게시물',
    items: [
      { id: 'admin-settings-section-post', label: 'POST 설정', keywords: 'post updated date display 수정일' }
    ]
  },
  {
    heading: '사이트',
    items: [
      { id: 'admin-settings-section-home-cover', label: '메인 화면', keywords: 'home cover hero banner image', iconId: 'home-cover' },
      { id: 'admin-settings-section-announcement', label: '어나운스 바', keywords: 'announcement banner notice', iconId: 'announcement' }
    ]
  },
  {
    heading: '콘텐츠·안전',
    items: [
      { id: 'admin-settings-section-import-export', label: '게시물 Import/Export', keywords: 'import export backup', iconId: 'import-export' },
      { id: 'admin-settings-section-spam', label: '스팸 필터', keywords: 'spam moderation comments', iconId: 'spam' }
    ]
  }
]

/**
 * 검색어에 맞춰 내비 그룹을 필터링한다.
 * @returns {typeof settingsNavGroups} 표시할 그룹 목록
 */
const filteredSettingsNavGroups = computed(() => {
  const q = navSearchQuery.value.trim().toLowerCase()
  if (!q) {
    return settingsNavGroups
  }

  return settingsNavGroups
    .map((group) => {
      const items = group.items.filter((item) => {
        const hay = `${item.label} ${item.keywords}`.toLowerCase()
        return hay.includes(q)
      })
      return { ...group, items }
    })
    .filter((group) => group.items.length > 0)
})

/**
 * 스크롤 스파이: 본문 스크롤 위치에 맞춰 활성 섹션 id를 갱신한다.
 * @returns {void}
 */
const updateActiveSectionFromScroll = () => {
  const root = mainScrollRef.value
  if (!root || scrollSpySuspended.value) {
    return
  }

  const marker = root.getBoundingClientRect().top + 56
  let nextId = settingsNavGroups[0].items[0].id
  const flatIds = settingsNavGroups.flatMap((g) => g.items.map((i) => i.id))

  for (const id of flatIds) {
    const el = document.getElementById(id)
    if (!el) {
      continue
    }
    const top = el.getBoundingClientRect().top
    if (top <= marker) {
      nextId = id
    }
  }

  activeSectionId.value = nextId
}

/**
 * 스크롤 스파이 핸들러 (rAF 디바운스)
 * @returns {void}
 */
const onMainScroll = () => {
  if (scrollSpyFrame) {
    cancelAnimationFrame(scrollSpyFrame)
  }
  scrollSpyFrame = requestAnimationFrame(() => {
    scrollSpyFrame = null
    updateActiveSectionFromScroll()
  })
}

/**
 * 해당 섹션으로 부드럽게 스크롤한다.
 * @param {string} sectionId - 섹션 요소 id
 * @returns {void}
 */
const scrollToSection = (sectionId) => {
  const el = document.getElementById(sectionId)
  if (!el) {
    return
  }

  scrollSpySuspended.value = true
  activeSectionId.value = sectionId
  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
  window.setTimeout(() => {
    scrollSpySuspended.value = false
    updateActiveSectionFromScroll()
  }, 520)
}

/**
 * 모바일 구역 선택 변경
 * @param {Event} event - change 이벤트
 * @returns {void}
 */
const onMobileNavChange = (event) => {
  const target = event.target
  if (!(target instanceof HTMLSelectElement) || !target.value) {
    return
  }
  scrollToSection(target.value)
}

/**
 * 설정 화면을 닫고 이전 관리 화면으로 돌아간다.
 * @returns {Promise<void>}
 */
const closeSettings = async () => {
  if (import.meta.client && window.history.length > 1) {
    await router.back()
    return
  }
  await navigateTo('/admin')
}

/**
 * 저장 상태 토스트 표시
 * @param {'success'|'error'|'info'} type - 토스트 타입
 * @param {string} message - 표시 메시지
 * @returns {void}
 */
const showToast = (type, message) => {
  window.clearTimeout(toastTimer)
  toast.value = { type, message }
  toastTimer = window.setTimeout(() => {
    toast.value = null
  }, 3200)
}

/**
 * 게시물 export 작업을 요청한다.
 * @returns {Promise<void>}
 */
const requestPostExport = async () => {
  if (!canRequestPostExport.value) {
    return
  }

  requestingPostExport.value = true
  errorMessage.value = ''
  showToast('info', '게시물 Export 작업을 등록하는 중입니다.')

  try {
    await $fetch('/admin/api/posts/export-jobs', {
      method: 'POST',
      body: createPostExportRequestBody()
    })
    await refreshPostExportJobs()
    showToast('success', '게시물 Export 작업이 등록되었습니다.')
  } catch (error) {
    errorMessage.value = error?.data?.message || '게시물 Export 작업을 등록하지 못했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    requestingPostExport.value = false
  }
}

/**
 * 게시물 Import 파일 선택창을 연다.
 * @returns {void}
 */
const openPostImportFilePicker = () => {
  postImportInputRef.value?.click()
}

/**
 * 게시물 Import 파일을 업로드한다.
 * @param {Event} event - 파일 선택 이벤트
 * @returns {Promise<void>}
 */
const importPostsFromFile = async (event) => {
  const target = event.target
  const file = target instanceof HTMLInputElement ? target.files?.[0] : null

  if (!file) {
    return
  }

  if (!file.name.toLowerCase().endsWith('.zip')) {
    showToast('error', 'ZIP 파일만 Import할 수 있습니다.')
    target.value = ''
    return
  }

  importingPosts.value = true
  postImportFileName.value = file.name
  postImportResult.value = null
  showToast('info', '게시물 Import를 시작합니다.')

  try {
    const formData = new FormData()
    formData.append('file', file)

    const result = await $fetch('/admin/api/posts/import', {
      method: 'POST',
      body: formData
    })

    postImportResult.value = result
    showToast('success', `게시물 ${result.importedCount}개를 Import했습니다.`)
  } catch (error) {
    const message = error?.data?.message || '게시물 Import를 완료하지 못했습니다.'
    showToast('error', message)
  } finally {
    importingPosts.value = false
    target.value = ''
  }
}

/**
 * Export 파일 다운로드 URL을 만든다.
 * @param {Object} file - Export 파일
 * @returns {string} 다운로드 URL
 */
const getPostExportDownloadUrl = (file) => `/admin/api/posts/export-jobs/${file.id}/download`

/**
 * Export 작업의 다운로드 가능한 파일만 추린다.
 * @param {Object} job - Export 작업
 * @returns {Array} 다운로드 가능한 파일 목록
 */
const getReadyPostExportFiles = (job) => Array.isArray(job?.files)
  ? job.files.filter((file) => file.status === 'ready' && file.filePath)
  : []

/**
 * Export 일괄 다운로드 중 여부
 * @param {string} jobId - 작업 ID
 * @returns {boolean} 다운로드 중 여부
 */
const isDownloadingPostExportJob = (jobId) => downloadingPostExportJobIds.value.includes(jobId)

/**
 * Export 작업 재시도 중 여부
 * @param {string} jobId - 작업 ID
 * @returns {boolean} 재시도 중 여부
 */
const isRetryingPostExportJob = (jobId) => retryingPostExportJobIds.value.includes(jobId)

/**
 * Export 분할 파일을 브라우저에서 순차 다운로드한다.
 * @param {Object} job - Export 작업
 * @returns {Promise<void>}
 */
const downloadPostExportJobFiles = async (job) => {
  const readyFiles = getReadyPostExportFiles(job)

  if (!job?.id || readyFiles.length === 0 || isDownloadingPostExportJob(job.id)) {
    return
  }

  downloadingPostExportJobIds.value = [...downloadingPostExportJobIds.value, job.id]
  showToast('info', `${readyFiles.length}개 파일을 순차 다운로드합니다.`)

  try {
    for (const file of readyFiles) {
      const link = document.createElement('a')
      link.href = getPostExportDownloadUrl(file)
      link.download = file.fileName || ''
      link.rel = 'noopener'
      document.body.append(link)
      link.click()
      link.remove()
      await new Promise((resolve) => window.setTimeout(resolve, 700))
    }
    showToast('success', '일괄 다운로드 요청을 보냈습니다.')
  } finally {
    downloadingPostExportJobIds.value = downloadingPostExportJobIds.value.filter((id) => id !== job.id)
  }
}

/**
 * 실패한 Export 작업을 재시도한다.
 * @param {Object} job - Export 작업
 * @returns {Promise<void>}
 */
const retryPostExportJob = async (job) => {
  if (!job?.id || job.status !== 'failed' || isRetryingPostExportJob(job.id)) {
    return
  }

  retryingPostExportJobIds.value = [...retryingPostExportJobIds.value, job.id]
  showToast('info', '실패한 Export 작업을 다시 대기열에 등록하는 중입니다.')

  try {
    await $fetch(`/admin/api/posts/export-jobs/${job.id}/retry`, {
      method: 'POST'
    })
    await refreshPostExportJobs()
    showToast('success', 'Export 작업을 다시 시작했습니다.')
  } catch (error) {
    errorMessage.value = error?.data?.message || 'Export 작업을 다시 시작하지 못했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    retryingPostExportJobIds.value = retryingPostExportJobIds.value.filter((id) => id !== job.id)
  }
}

/**
 * Export 작업 삭제 중 여부
 * @param {string} jobId - 작업 ID
 * @returns {boolean} 삭제 중 여부
 */
const isDeletingPostExportJob = (jobId) => deletingPostExportJobIds.value.includes(jobId)

/**
 * Export 작업을 삭제한다.
 * @param {Object} job - Export 작업
 * @returns {Promise<void>}
 */
const deletePostExportJob = async (job) => {
  if (!job?.id || isDeletingPostExportJob(job.id)) {
    return
  }

  deletingPostExportJobIds.value = [...deletingPostExportJobIds.value, job.id]
  showToast('info', 'Export 백업 파일을 삭제하는 중입니다.')

  try {
    await $fetch(`/admin/api/posts/export-jobs/${job.id}`, {
      method: 'DELETE'
    })
    await refreshPostExportJobs()
    showToast('success', 'Export 백업 파일을 삭제했습니다.')
  } catch (error) {
    errorMessage.value = error?.data?.message || 'Export 백업 파일을 삭제하지 못했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    deletingPostExportJobIds.value = deletingPostExportJobIds.value.filter((id) => id !== job.id)
  }
}

/**
 * 로고 파일 선택창을 연다.
 * @returns {void}
 */
const openLogoFilePicker = () => {
  if (!editMisc.value) {
    beginEditMisc()
  }

  logoInputRef.value?.click()
}

/**
 * 사이트 로고를 업로드한다.
 * @param {Event} event - 파일 선택 이벤트
 * @returns {Promise<void>}
 */
const uploadLogo = async (event) => {
  const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
  const file = target?.files?.[0]

  if (!file || uploadingLogo.value) {
    return
  }

  uploadingLogo.value = true
  errorMessage.value = ''
  showToast('info', '로고를 업로드하는 중입니다.')

  try {
    const formData = new FormData()
    formData.append('file', file)
    const uploadedLogo = await $fetch('/admin/api/settings/logo', {
      method: 'POST',
      body: formData
    })
    form.logoUrl = uploadedLogo.logoUrl || ''
    form.faviconUrl = uploadedLogo.faviconUrl || ''
    showToast('success', '로고를 불러왔습니다. 저장 버튼을 눌러 적용하세요.')
  } catch (error) {
    errorMessage.value = error?.data?.message || '로고 업로드에 실패했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    uploadingLogo.value = false
    if (target) {
      target.value = ''
    }
  }
}

/**
 * 사이트 설정 PUT 요청 본문을 구성한다.
 * @returns {Object} API 본문
 */
const buildSiteSettingsPayload = () => ({
  title: form.title,
  description: form.description,
  siteUrl: form.siteUrl,
  logoText: form.logoText || '井',
  logoUrl: form.logoUrl,
  faviconUrl: form.faviconUrl,
  copyrightText: form.copyrightText,
  showPostUpdatedAt: Boolean(form.showPostUpdatedAt),
  homeCoverImageUrl: form.homeCoverImageUrl || '',
  homeCoverDarkImageUrl: form.homeCoverDarkImageUrl || '',
  homeCoverTitle: form.homeCoverTitle || '',
  homeCoverText: form.homeCoverText || '',
  announcementEnabled: Boolean(form.announcementEnabled),
  announcementText: form.announcementText || '',
  announcementUrl: form.announcementUrl || '',
  announcementBackgroundColor: form.announcementBackgroundColor || '#15171a',
  signupBlockedUsernames: normalizeSignupBlockedUsernames(form.signupBlockedUsernames)
})

/**
 * 현재 폼 값으로 사이트 설정을 서버에 저장한다.
 * @param {{ successToast?: string, savingFlag: import('vue').Ref<boolean> }} options - 저장 옵션
 * @returns {Promise<boolean>} 성공 여부
 */
const persistSiteSettings = async (options) => {
  const successToast = options.successToast || '사이트 설정이 저장되었습니다.'
  options.savingFlag.value = true
  errorMessage.value = ''
  showToast('info', '설정을 저장하는 중입니다.')

  try {
    const updatedSettings = await $fetch('/admin/api/settings', {
      method: 'PUT',
      body: buildSiteSettingsPayload()
    })
    Object.assign(form, updatedSettings)
    showToast('success', successToast)
    return true
  } catch (error) {
    errorMessage.value = error?.data?.message || '사이트 설정을 저장하지 못했습니다.'
    showToast('error', errorMessage.value)
    return false
  } finally {
    options.savingFlag.value = false
  }
}

/**
 * 블로그 제목·설명 편집 모드 진입
 * @returns {void}
 */
const beginEditTitleDesc = () => {
  titleDescSnapshot.title = form.title
  titleDescSnapshot.description = form.description
  editTitleDesc.value = true
}

/**
 * 블로그 제목·설명 편집 취소
 * @returns {void}
 */
const cancelEditTitleDesc = () => {
  form.title = titleDescSnapshot.title
  form.description = titleDescSnapshot.description
  editTitleDesc.value = false
}

/**
 * 블로그 제목·설명만 저장하고 읽기 모드로 돌아간다.
 * @returns {Promise<void>}
 */
const saveTitleDescSection = async () => {
  if (!hasTitleDescChanges.value) {
    return
  }

  const ok = await persistSiteSettings({
    successToast: '블로그 제목·설명이 저장되었습니다.',
    savingFlag: savingTitleDesc
  })

  if (ok) {
    editTitleDesc.value = false
  }
}

/**
 * 사이트 정보 편집 모드 진입
 * @returns {void}
 */
const beginEditMisc = () => {
  miscSnapshot.siteUrl = form.siteUrl
  miscSnapshot.logoText = form.logoText
  miscSnapshot.logoUrl = form.logoUrl
  miscSnapshot.faviconUrl = form.faviconUrl
  miscSnapshot.copyrightText = form.copyrightText
  editMisc.value = true
}

/**
 * 사이트 정보 편집 취소
 * @returns {void}
 */
const cancelEditMisc = () => {
  form.siteUrl = miscSnapshot.siteUrl
  form.logoText = miscSnapshot.logoText
  form.logoUrl = miscSnapshot.logoUrl
  form.faviconUrl = miscSnapshot.faviconUrl
  form.copyrightText = miscSnapshot.copyrightText
  editMisc.value = false
}

/**
 * 사이트 정보 저장
 * @returns {Promise<void>}
 */
const saveMiscSection = async () => {
  if (!hasMiscChanges.value) {
    return
  }

  const ok = await persistSiteSettings({
    successToast: '사이트 정보가 저장되었습니다.',
    savingFlag: savingMisc
  })

  if (ok) {
    miscSnapshot.siteUrl = form.siteUrl
    miscSnapshot.logoText = form.logoText
    miscSnapshot.logoUrl = form.logoUrl
    miscSnapshot.faviconUrl = form.faviconUrl
    miscSnapshot.copyrightText = form.copyrightText
    editMisc.value = false
  }
}

/**
 * POST 설정 편집 모드 진입
 * @returns {void}
 */
const beginEditPost = () => {
  postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
  editPost.value = true
}

/**
 * POST 설정 편집 취소
 * @returns {void}
 */
const cancelEditPost = () => {
  form.showPostUpdatedAt = postSnapshot.showPostUpdatedAt
  editPost.value = false
}

/**
 * POST 설정 저장
 * @returns {Promise<void>}
 */
const savePostSection = async () => {
  if (!hasPostChanges.value) {
    return
  }

  const ok = await persistSiteSettings({
    successToast: 'POST 설정이 저장되었습니다.',
    savingFlag: savingPost
  })

  if (ok) {
    postSnapshot.showPostUpdatedAt = form.showPostUpdatedAt
    editPost.value = false
  }
}

/**
 * 메인 화면 커버 파일 선택 창을 연다.
 * @returns {void}
 */
const openHomeCoverFilePicker = () => {
  if (uploadingHomeCover.value) {
    return
  }

  homeCoverInputRef.value?.click()
}

/**
 * 메인 화면 다크 커버 파일 선택 창을 연다.
 * @returns {void}
 */
const openHomeCoverDarkFilePicker = () => {
  if (uploadingHomeCoverDark.value) {
    return
  }

  homeCoverDarkInputRef.value?.click()
}

/**
 * 메인 화면 커버 이미지 파일을 업로드한다.
 * @param {File} file - 업로드 파일
 * @param {'light'|'dark'} variant - 커버 이미지 종류
 * @returns {Promise<void>}
 */
const uploadHomeCoverFile = async (file, variant = 'light') => {
  const uploadingFlag = variant === 'dark' ? uploadingHomeCoverDark : uploadingHomeCover

  if (!file || uploadingFlag.value) {
    return
  }

  uploadingFlag.value = true
  errorMessage.value = ''
  showToast('info', '커버 이미지를 업로드하는 중입니다.')

  try {
    const formData = new FormData()
    formData.append('file', file)
    const { homeCoverImageUrl } = await $fetch('/admin/api/settings/home-cover', {
      method: 'POST',
      body: formData
    })
    if (variant === 'dark') {
      form.homeCoverDarkImageUrl = homeCoverImageUrl || ''
    } else {
      form.homeCoverImageUrl = homeCoverImageUrl || ''
    }
    showToast('success', '커버 이미지를 불러왔습니다. 저장 버튼을 눌러 적용하세요.')
  } catch (error) {
    errorMessage.value = error?.data?.message || '커버 이미지 업로드에 실패했습니다.'
    showToast('error', errorMessage.value)
  } finally {
    uploadingFlag.value = false
  }
}

/**
 * 메인 화면 커버 이미지를 업로드한다.
 * @param {Event} event - 파일 선택 이벤트
 * @param {'light'|'dark'} variant - 커버 이미지 종류
 * @returns {Promise<void>}
 */
const uploadHomeCover = async (event, variant = 'light') => {
  const target = /** @type {HTMLInputElement | null} */ (event.target instanceof HTMLInputElement ? event.target : null)
  const file = target?.files?.[0]

  if (!file) {
    return
  }

  try {
    await uploadHomeCoverFile(file, variant)
  } finally {
    if (target) {
      target.value = ''
    }
  }
}

/**
 * 드롭된 메인 화면 커버 이미지를 업로드한다.
 * @param {DragEvent} event - 드롭 이벤트
 * @param {'light'|'dark'} variant - 커버 이미지 종류
 * @returns {Promise<void>}
 */
const dropHomeCover = async (event, variant = 'light') => {
  const file = event.dataTransfer?.files?.[0]

  if (!file) {
    return
  }

  await uploadHomeCoverFile(file, variant)
}

/**
 * 메인 화면 커버 이미지를 제거한다.
 * @param {'light'|'dark'} variant - 커버 이미지 종류
 * @returns {void}
 */
const clearHomeCoverImage = (variant = 'light') => {
  if (variant === 'dark') {
    form.homeCoverDarkImageUrl = ''
    return
  }

  form.homeCoverImageUrl = ''
}

/**
 * 메인 화면 커버 편집 모드 진입
 * @returns {void}
 */
const beginEditHomeCover = () => {
  homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
  homeCoverSnapshot.homeCoverDarkImageUrl = form.homeCoverDarkImageUrl
  homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
  homeCoverSnapshot.homeCoverText = form.homeCoverText
  editHomeCover.value = true
}

/**
 * 메인 화면 커버 편집 취소
 * @returns {void}
 */
const cancelEditHomeCover = () => {
  form.homeCoverImageUrl = homeCoverSnapshot.homeCoverImageUrl
  form.homeCoverDarkImageUrl = homeCoverSnapshot.homeCoverDarkImageUrl
  form.homeCoverTitle = homeCoverSnapshot.homeCoverTitle
  form.homeCoverText = homeCoverSnapshot.homeCoverText
  editHomeCover.value = false
}

/**
 * 메인 화면 커버 저장
 * @returns {Promise<void>}
 */
const saveHomeCoverSection = async () => {
  if (!hasHomeCoverChanges.value) {
    return
  }

  const ok = await persistSiteSettings({
    successToast: '메인 화면 설정이 저장되었습니다.',
    savingFlag: savingHomeCover
  })

  if (ok) {
    homeCoverSnapshot.homeCoverImageUrl = form.homeCoverImageUrl
    homeCoverSnapshot.homeCoverDarkImageUrl = form.homeCoverDarkImageUrl
    homeCoverSnapshot.homeCoverTitle = form.homeCoverTitle
    homeCoverSnapshot.homeCoverText = form.homeCoverText
    editHomeCover.value = false
  }
}

/**
 * 어나운스 바 맞춤 설정 패널을 연다.
 * @returns {void}
 */
const beginCustomizeAnnouncement = () => {
  announcementSnapshot.announcementEnabled = form.announcementEnabled
  announcementSnapshot.announcementText = form.announcementText
  announcementSnapshot.announcementUrl = form.announcementUrl
  announcementSnapshot.announcementBackgroundColor = form.announcementBackgroundColor
  customizeAnnouncement.value = true
}

/**
 * 어나운스 바 맞춤 설정을 취소한다.
 * @returns {void}
 */
const cancelCustomizeAnnouncement = () => {
  form.announcementEnabled = announcementSnapshot.announcementEnabled
  form.announcementText = announcementSnapshot.announcementText
  form.announcementUrl = announcementSnapshot.announcementUrl
  form.announcementBackgroundColor = announcementSnapshot.announcementBackgroundColor
  customizeAnnouncement.value = false
}

/**
 * 어나운스 바 설정을 저장한다.
 * @returns {Promise<void>}
 */
const saveAnnouncementSection = async () => {
  if (!hasAnnouncementChanges.value) {
    return
  }

  const ok = await persistSiteSettings({
    successToast: '어나운스 바 설정이 저장되었습니다.',
    savingFlag: savingAnnouncement
  })

  if (ok) {
    announcementSnapshot.announcementEnabled = form.announcementEnabled
    announcementSnapshot.announcementText = form.announcementText
    announcementSnapshot.announcementUrl = form.announcementUrl
    announcementSnapshot.announcementBackgroundColor = form.announcementBackgroundColor
    customizeAnnouncement.value = false
  }
}

/**
 * 스팸 필터 편집 모드 진입
 * @returns {void}
 */
const beginEditSpam = () => {
  spamSnapshot.signupBlockedUsernames = [...form.signupBlockedUsernames]
  editSpam.value = true
}

/**
 * 스팸 필터 편집 취소
 * @returns {void}
 */
const cancelEditSpam = () => {
  form.signupBlockedUsernames = [...spamSnapshot.signupBlockedUsernames]
  editSpam.value = false
}

/**
 * 스팸 필터 저장
 * @returns {Promise<void>}
 */
const saveSpamSection = async () => {
  if (!hasSpamChanges.value) {
    return
  }

  const ok = await persistSiteSettings({
    successToast: '스팸 필터 설정이 저장되었습니다.',
    savingFlag: savingSpam
  })

  if (ok) {
    spamSnapshot.signupBlockedUsernames = [...form.signupBlockedUsernames]
    editSpam.value = false
  }
}

/**
 * Escape 키: 제목·설명 편집 중이면 취소, 아니면 설정 화면 닫기
 * @param {KeyboardEvent} event - 키보드 이벤트
 * @returns {void}
 */
const onGlobalKeydown = (event) => {
  if (event.key !== 'Escape') {
    return
  }
  if (editTitleDesc.value) {
    event.preventDefault()
    cancelEditTitleDesc()
    return
  }
  if (editMisc.value) {
    event.preventDefault()
    cancelEditMisc()
    return
  }
  if (editPost.value) {
    event.preventDefault()
    cancelEditPost()
    return
  }
  if (editHomeCover.value) {
    event.preventDefault()
    cancelEditHomeCover()
    return
  }
  if (customizeAnnouncement.value) {
    event.preventDefault()
    cancelCustomizeAnnouncement()
    return
  }
  if (editSpam.value) {
    event.preventDefault()
    cancelEditSpam()
    return
  }
  closeSettings()
}

onMounted(() => {
  if (import.meta.client) {
    window.addEventListener('keydown', onGlobalKeydown)
    postExportRefreshTimer = window.setInterval(() => {
      if (hasActivePostExportJobs.value) {
        refreshPostExportJobs()
      }
    }, 5000)
    nextTick(() => {
      updateActiveSectionFromScroll()
    })
  }
})

onBeforeUnmount(() => {
  window.clearTimeout(toastTimer)
  window.clearInterval(postExportRefreshTimer)
  if (scrollSpyFrame) {
    cancelAnimationFrame(scrollSpyFrame)
  }
  if (import.meta.client) {
    window.removeEventListener('keydown', onGlobalKeydown)
  }
})
</script>

<template>
  <div class="admin-settings-screen flex h-full min-h-0 flex-col bg-[#f7f8fa] text-[#15171a]">
    <div
      id="admin-settings-done-button-container"
      class="pointer-events-none fixed right-0 top-2 z-50 flex justify-end bg-transparent p-8 md:top-0 md:px-8"
    >
      <button
        id="admin-settings-done-button"
        class="pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:text-[#15171a]"
        type="button"
        title="닫기 (ESC)"
        aria-label="설정 닫기"
        @click="closeSettings"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pointer-events-none size-5" fill="none" aria-hidden="true">
          <line x1="0.75" y1="23.249" x2="23.25" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
          <line x1="23.25" y1="23.249" x2="0.75" y2="0.749" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
        </svg>
      </button>
    </div>

    <div class="admin-settings-screen__shell flex min-h-0 flex-1 justify-center overflow-hidden px-0 sm:px-4 lg:px-6">
      <div class="admin-settings-screen__body flex min-h-0 w-full max-w-[1120px] flex-1 flex-col lg:flex-row">
        <aside class="admin-settings-screen__nav-column w-full shrink-0 border-b border-[#e6e8eb] bg-[#f7f8fa] lg:w-72 lg:max-w-[320px] lg:flex-none lg:border-b-0 lg:border-r lg:border-[#e6e8eb]">
          <div class="admin-settings-screen__nav-inner max-h-[40vh] overflow-y-auto p-4 lg:max-h-none lg:h-full lg:overflow-y-auto lg:p-5">
          <label class="admin-settings-screen__search relative mb-4 block">
            <span class="sr-only">설정 검색</span>
            <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9aa3ad]" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5" />
              <path d="M16 16l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
            </svg>
            <input
              v-model="navSearchQuery"
              class="admin-settings-screen__search-input w-full rounded-md border border-[#dce0e5] bg-white py-2 pr-3 pl-9 text-sm text-[#15171a] placeholder:text-[#9aa3ad] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
              type="search"
              autocomplete="off"
              placeholder="설정 검색"
            >
          </label>

          <p
            v-if="filteredSettingsNavGroups.length === 0"
            class="admin-settings-screen__nav-empty rounded-md border border-dashed border-[#dce0e5] px-3 py-4 text-center text-xs text-[#657080]"
          >
            검색과 일치하는 설정 항목이 없습니다.
          </p>
          <nav v-else class="admin-settings-screen__nav grid gap-5 text-sm" aria-label="설정 구역">
            <template v-for="(group, gi) in filteredSettingsNavGroups" :key="group.heading">
              <div v-if="gi > 0" class="admin-settings-screen__nav-separator h-px bg-[#dce0e5]" aria-hidden="true" />
              <div class="admin-settings-screen__nav-group">
                <p class="admin-settings-screen__nav-heading mb-2 px-2 text-xs font-semibold tracking-wide text-[#9aa3ad] uppercase">
                  {{ group.heading }}
                </p>
                <ul class="admin-settings-screen__nav-list grid gap-0.5">
                  <li v-for="item in group.items" :key="item.id">
                    <button
                      class="admin-settings-screen__nav-item flex w-full items-center gap-2 rounded-md px-2 py-2 text-left font-medium text-[#5d6673] transition-colors hover:bg-[#eceff2] hover:text-[#15171a]"
                      :class="activeSectionId === item.id ? 'bg-[#e9ecef] text-[#15171a]' : ''"
                      type="button"
                      @click="scrollToSection(item.id)"
                    >
                      <AdminSettingsNavIcon :icon-id="item.iconId" />
                      <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
                    </button>
                  </li>
                </ul>
              </div>
            </template>
          </nav>

          <label class="admin-settings-screen__nav-jump mt-4 grid gap-1 lg:hidden">
            <span class="mb-1 block text-xs font-medium text-[#657080]">구역 이동</span>
            <span class="relative">
              <select
                class="w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-2 py-2 pr-10 text-sm"
                :value="activeSectionId"
                @change="onMobileNavChange"
              >
                <optgroup v-for="group in settingsNavGroups" :key="group.heading" :label="group.heading">
                  <option v-for="item in group.items" :key="item.id" :value="item.id">
                    {{ item.label }}
                  </option>
                </optgroup>
              </select>
              <svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
            </span>
          </label>
        </div>
      </aside>

      <main
        ref="mainScrollRef"
        class="admin-settings-screen__content min-h-0 min-w-0 flex-1 overflow-y-auto bg-white lg:border-l lg:border-[#e6e8eb]"
        @scroll.passive="onMainScroll"
      >
        <div class="admin-settings-screen__content-inner mx-auto mb-[60vh] w-full max-w-[760px] px-8 pt-16 pb-24 md:px-14 md:pt-10">
          <p v-if="errorMessage" class="admin-settings-screen__error mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
            {{ errorMessage }}
          </p>

          <form class="admin-settings-screen__form w-full space-y-8" @submit.prevent>
            <h2 class="admin-settings-screen__section-heading z-20 -mt-[5px] mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
              일반 설정
            </h2>
          <section
            id="admin-settings-section-title"
            data-testid="title-and-description"
            class="admin-settings-screen__card admin-settings-screen__card--title-desc relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="min-w-0 flex-1">
                <h5 class="text-base font-semibold text-[#15171a] md:text-lg">
                  블로그 제목·설명
                </h5>
                <p
                  v-if="!editTitleDesc"
                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
                >
                  공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
                </p>
              </div>
              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
                <template v-if="!editTitleDesc">
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
                    type="button"
                    @click="beginEditTitleDesc"
                  >
                    편집
                  </button>
                </template>
                <template v-else>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
                    type="button"
                    :disabled="savingTitleDesc"
                    @click="cancelEditTitleDesc"
                  >
                    취소
                  </button>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
                    type="button"
                    :disabled="savingTitleDesc || !hasTitleDescChanges"
                    @click="saveTitleDescSection"
                  >
                    {{ savingTitleDesc ? '저장 중' : '저장' }}
                  </button>
                </template>
              </div>
            </div>

            <div
              v-if="!editTitleDesc"
              class="grid grid-cols-1 gap-x-8 gap-y-6 md:grid-cols-2 md:gap-y-7"
            >
              <div class="flex flex-col">
                <h6 class="block text-sm font-medium tracking-normal text-[#3f4650]">
                  사이트 이름
                </h6>
                <div class="mt-1 flex min-h-[1.5rem] items-center text-[#15171a]">
                  {{ form.title?.trim() ? form.title : '—' }}
                </div>
              </div>
              <div class="flex flex-col">
                <h6 class="block text-sm font-medium tracking-normal text-[#3f4650]">
                  사이트 설명
                </h6>
                <div class="mt-1 flex min-h-[1.5rem] items-start whitespace-pre-wrap text-[#15171a]">
                  {{ form.description?.trim() ? form.description : '—' }}
                </div>
              </div>
            </div>

            <div v-else class="admin-settings-screen__card-body grid gap-5">
              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">사이트 이름</span>
                <input
                  v-model="form.title"
                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  type="text"
                  required
                >
              </label>
              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">사이트 설명</span>
                <textarea
                  v-model="form.description"
                  class="min-h-28 resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  required
                />
              </label>
              <div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
                <p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
                  공개 화면 미리보기
                </p>
                <div class="mt-3 flex items-center gap-3">
                  <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg font-bold text-white">
                    <img
                      v-if="form.logoUrl"
                      class="h-full w-full object-cover"
                      :src="form.logoUrl"
                      alt=""
                    >
                    <span v-else>{{ form.logoText || '井' }}</span>
                  </div>
                  <div class="min-w-0">
                    <p class="truncate font-semibold text-[#15171a]">
                      {{ form.title || 'sori.studio' }}
                    </p>
                    <p class="truncate text-sm text-[#657080]">
                      {{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <section
            id="admin-settings-section-misc"
            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="min-w-0 flex-1">
                <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
                  사이트 정보
                </h2>
                <p
                  v-if="!editMisc"
                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
                >
                  로고, 공개 URL, 푸터 저작권 문구를 관리합니다.
                </p>
              </div>
              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
                <template v-if="!editMisc">
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
                    type="button"
                    @click="beginEditMisc"
                  >
                    편집
                  </button>
                </template>
                <template v-else>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
                    type="button"
                    :disabled="savingMisc"
                    @click="cancelEditMisc"
                  >
                    취소
                  </button>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
                    type="button"
                    :disabled="savingMisc || !hasMiscChanges"
                    @click="saveMiscSection"
                  >
                    {{ savingMisc ? '저장 중' : '저장' }}
                  </button>
                </template>
              </div>
            </div>

            <div
              v-if="!editMisc"
              class="admin-settings-screen__misc-readonly grid gap-6"
            >
              <div class="flex items-center gap-4 mt-4">
                <div class="grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-[#e6e8eb] bg-[#f7f8fa]">
                  <img
                    v-if="form.logoUrl"
                    class="h-full w-full object-cover"
                    :src="form.logoUrl"
                    alt="사이트 로고"
                  >
                  <span v-else class="text-2xl font-semibold text-[#9aa3ad]">
                    {{ form.logoText || '井' }}
                  </span>
                </div>
                <div>
                  <h3 class="text-sm font-medium text-[#3f4650]">
                    로고
                  </h3>
                  <p class="mt-1 text-sm text-[#15171a]">
                    {{ form.logoUrl ? '등록됨' : '미등록' }}
                  </p>
                </div>
              </div>
              <div class="grid gap-6 md:grid-cols-2">
                <div>
                  <h3 class="text-sm font-medium text-[#3f4650]">
                    사이트 URL
                  </h3>
                  <p class="mt-1 break-all text-sm text-[#15171a]">
                    {{ form.siteUrl || '—' }}
                  </p>
                </div>
                <div>
                  <h3 class="text-sm font-medium text-[#3f4650]">
                    저작권 문구
                  </h3>
                  <p class="mt-1 text-sm text-[#15171a]">
                    {{ form.copyrightText || '—' }}
                  </p>
                </div>
              </div>
            </div>

            <div v-else class="admin-settings-screen__card-body grid gap-6">
              <div class="flex flex-col gap-5 md:flex-row md:items-center md:justify-between">
                <div class="flex items-center gap-4">
                  <div class="grid h-20 w-20 shrink-0 place-items-center overflow-hidden rounded-2xl border border-[#e6e8eb] bg-[#f7f8fa]">
                    <img
                      v-if="form.logoUrl"
                      class="h-full w-full object-cover"
                      :src="form.logoUrl"
                      alt="사이트 로고"
                    >
                    <span v-else class="text-2xl font-semibold text-[#9aa3ad]">
                      {{ form.logoText || '井' }}
                    </span>
                  </div>
                  <div>
                    <h3 class="text-base font-semibold text-[#15171a]">
                      로고
                    </h3>
                    <p class="mt-1 max-w-md text-sm leading-relaxed text-[#657080]">
                      1:1 비율 이미지로 등록합니다. 같은 이미지가 공개 로고와 파비콘으로 함께 사용됩니다.
                    </p>
                  </div>
                </div>
                <button
                  class="h-10 shrink-0 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
                  type="button"
                  :disabled="uploadingLogo"
                  @click="openLogoFilePicker"
                >
                  {{ uploadingLogo ? '업로드 중' : form.logoUrl ? '로고 변경' : '로고 등록' }}
                </button>
                <input
                  ref="logoInputRef"
                  class="hidden"
                  type="file"
                  accept="image/jpeg,image/png,image/webp"
                  :disabled="uploadingLogo"
                  @change="uploadLogo"
                >
              </div>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">사이트 URL</span>
                <input
                  v-model="form.siteUrl"
                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  type="url"
                  required
                >
              </label>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">저작권 문구</span>
                <input
                  v-model="form.copyrightText"
                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  type="text"
                  required
                >
              </label>
            </div>

          </section>

          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
            게시물
          </h2>
          <section
            id="admin-settings-section-post"
            class="admin-settings-screen__card admin-settings-screen__card--post relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="min-w-0 flex-1">
                <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
                  POST 설정
                </h2>
                <p
                  v-if="!editPost"
                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
                >
                  공개 글 상세·관리자 글 목록에서 발행 후 수정이 있었을 때 수정일을 함께 표시합니다.
                </p>
              </div>
              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
                <template v-if="!editPost">
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
                    type="button"
                    @click="beginEditPost"
                  >
                    편집
                  </button>
                </template>
                <template v-else>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
                    type="button"
                    :disabled="savingPost"
                    @click="cancelEditPost"
                  >
                    취소
                  </button>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
                    type="button"
                    :disabled="savingPost || !hasPostChanges"
                    @click="savePostSection"
                  >
                    {{ savingPost ? '저장 중' : '저장' }}
                  </button>
                </template>
              </div>
            </div>

            <div
              v-if="!editPost"
              class="admin-settings-screen__post-readonly border-t border-[#eceff2] pt-5 text-sm"
            >
              <div class="admin-settings-screen__post-toggle flex items-center justify-between gap-4">
                <span class="font-bold text-[#15171a]">수정일 표시</span>
                <span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 cursor-not-allowed items-center opacity-55 grayscale" aria-disabled="true">
                  <input
                    :checked="form.showPostUpdatedAt"
                    class="peer sr-only"
                    type="checkbox"
                    disabled
                    aria-label="수정일 표시"
                  >
                  <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#6d747d]" aria-hidden="true" />
                  <span class="relative ml-1 size-5 rounded-full bg-[#f4f6f8] shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
                </span>
              </div>
            </div>

            <label
              v-else
              class="admin-settings-screen__post-toggle flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5 text-sm"
            >
              <span class="font-bold text-[#15171a]">수정일 표시</span>
              <span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
                <input
                  v-model="form.showPostUpdatedAt"
                  class="peer sr-only"
                  type="checkbox"
                  aria-label="수정일 표시"
                >
                <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
                <span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
              </span>
            </label>
          </section>

          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
            사이트
          </h2>
          <section
            id="admin-settings-section-home-cover"
            class="admin-settings-screen__card admin-settings-screen__card--home-cover relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="min-w-0 flex-1">
                <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
                  메인 화면
                </h2>
                <p
                  v-if="!editHomeCover"
                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
                >
                  홈 상단에 720px 너비 커버 이미지를 표시합니다. 라이트·다크 이미지를 각각 등록할 수 있고, 이미지·텍스트는 저장 버튼으로 함께 반영합니다.
                </p>
              </div>
              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
                <template v-if="!editHomeCover">
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
                    type="button"
                    @click="beginEditHomeCover"
                  >
                    편집
                  </button>
                </template>
                <template v-else>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
                    type="button"
                    :disabled="savingHomeCover"
                    @click="cancelEditHomeCover"
                  >
                    취소
                  </button>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
                    type="button"
                    :disabled="savingHomeCover || !hasHomeCoverChanges"
                    @click="saveHomeCoverSection"
                  >
                    {{ savingHomeCover ? '저장 중' : '저장' }}
                  </button>
                </template>
              </div>
            </div>

            <div
              v-if="!editHomeCover"
              class="admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
            >
              <div class="grid gap-6">
                <div class="admin-settings-screen__home-cover-mode grid gap-2">
                  <div class="flex items-center justify-between gap-3">
                    <h3 class="text-sm font-bold text-[#15171a]">
                      라이트모드
                    </h3>
                  </div>
                  <div
                    v-if="form.homeCoverImageUrl"
                    class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
                  >
                    <HomeHero
                      :image-url="form.homeCoverImageUrl"
                      :dark-image-url="''"
                      :title="form.homeCoverTitle"
                      :text="form.homeCoverText"
                    />
                  </div>
                  <div
                    v-else
                    class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-[720px] place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
                  >
                    라이트모드 이미지가 없습니다.
                  </div>
                </div>

                <div class="admin-settings-screen__home-cover-mode grid gap-2">
                  <div class="flex items-center justify-between gap-3">
                    <h3 class="text-sm font-bold text-[#15171a]">
                      다크모드
                    </h3>
                  </div>
                  <div
                    v-if="form.homeCoverDarkImageUrl"
                    class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
                  >
                    <HomeHero
                      :image-url="form.homeCoverDarkImageUrl"
                      :dark-image-url="''"
                      :title="form.homeCoverTitle"
                      :text="form.homeCoverText"
                    />
                  </div>
                  <div
                    v-else
                    class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-[720px] place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
                  >
                    다크모드 전용 이미지가 없습니다. 공개 화면에서는 라이트모드 이미지를 대신 사용합니다.
                  </div>
                </div>
              </div>
            </div>

            <div v-else class="admin-settings-screen__home-cover-edit grid gap-6 border-t border-[#eceff2] pt-5">
              <div class="grid gap-6">
                <div class="admin-settings-screen__home-cover-mode grid gap-2">
                  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div class="min-w-0">
                      <h3 class="text-sm font-bold text-[#15171a]">
                        라이트모드
                      </h3>
                      <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                        기본 헤더 이미지입니다.
                      </p>
                    </div>
                    <div class="flex shrink-0 flex-wrap gap-2">
                      <button
                        class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
                        type="button"
                        :disabled="uploadingHomeCover"
                        @click="openHomeCoverFilePicker"
                      >
                        {{ uploadingHomeCover ? '업로드 중' : '이미지 변경' }}
                      </button>
                      <button
                        v-if="form.homeCoverImageUrl"
                        class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
                        type="button"
                        :disabled="uploadingHomeCover"
                        @click="clearHomeCoverImage('light')"
                      >
                        삭제
                      </button>
                    </div>
                  </div>
                  <div
                    v-if="form.homeCoverImageUrl"
                    class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
                  >
                    <HomeHero
                      :image-url="form.homeCoverImageUrl"
                      :dark-image-url="''"
                      :title="form.homeCoverTitle"
                      :text="form.homeCoverText"
                    />
                  </div>
                  <button
                    v-else
                    class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-[720px] cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
                    type="button"
                    :disabled="uploadingHomeCover"
                    @click="openHomeCoverFilePicker"
                    @dragover.prevent
                    @drop.prevent="dropHomeCover($event, 'light')"
                  >
                    <span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
                      <svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 16V4" />
                        <path d="m7 9 5-5 5 5" />
                        <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
                      </svg>
                      <span>라이트모드 이미지를 드롭하거나 선택하세요.</span>
                    </span>
                  </button>
                  <input
                    ref="homeCoverInputRef"
                    class="hidden"
                    type="file"
                    accept="image/jpeg,image/png,image/webp"
                    :disabled="uploadingHomeCover"
                    @change="uploadHomeCover($event, 'light')"
                  >
                </div>

                <div class="admin-settings-screen__home-cover-mode grid gap-2">
                  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div class="min-w-0">
                      <h3 class="text-sm font-bold text-[#15171a]">
                        다크모드
                      </h3>
                      <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                        다크모드에서 교체되는 이미지입니다.
                      </p>
                    </div>
                    <div class="flex shrink-0 flex-wrap gap-2">
                      <button
                        class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
                        type="button"
                        :disabled="uploadingHomeCoverDark"
                        @click="openHomeCoverDarkFilePicker"
                      >
                        {{ uploadingHomeCoverDark ? '업로드 중' : '이미지 변경' }}
                      </button>
                      <button
                        v-if="form.homeCoverDarkImageUrl"
                        class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
                        type="button"
                        :disabled="uploadingHomeCoverDark"
                        @click="clearHomeCoverImage('dark')"
                      >
                        삭제
                      </button>
                    </div>
                  </div>
                  <div
                    v-if="form.homeCoverDarkImageUrl"
                    class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
                  >
                    <HomeHero
                      :image-url="form.homeCoverDarkImageUrl"
                      :dark-image-url="''"
                      :title="form.homeCoverTitle"
                      :text="form.homeCoverText"
                    />
                  </div>
                  <button
                    v-else
                    class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-[720px] cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
                    type="button"
                    :disabled="uploadingHomeCoverDark"
                    @click="openHomeCoverDarkFilePicker"
                    @dragover.prevent
                    @drop.prevent="dropHomeCover($event, 'dark')"
                  >
                    <span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
                      <svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 16V4" />
                        <path d="m7 9 5-5 5 5" />
                        <path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
                      </svg>
                      <span>다크모드 이미지를 드롭하거나 선택하세요.</span>
                    </span>
                  </button>
                  <input
                    ref="homeCoverDarkInputRef"
                    class="hidden"
                    type="file"
                    accept="image/jpeg,image/png,image/webp"
                    :disabled="uploadingHomeCoverDark"
                    @change="uploadHomeCover($event, 'dark')"
                  >
                </div>
              </div>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">오버레이 제목</span>
                <input
                  v-model="form.homeCoverTitle"
                  class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  type="text"
                  maxlength="120"
                  placeholder="선택 사항"
                >
              </label>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">오버레이 본문</span>
                <textarea
                  v-model="form.homeCoverText"
                  class="min-h-[4.5rem] resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  maxlength="280"
                  rows="3"
                  placeholder="짧은 소개 문구 (선택 사항)"
                />
              </label>
            </div>
          </section>

          <section
            id="admin-settings-section-announcement"
            class="admin-settings-screen__card admin-settings-screen__card--announcement relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="min-w-0 flex-1">
                <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
                  어나운스 바
                </h2>
                <p
                  v-if="!customizeAnnouncement"
                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
                >
                  홈페이지 상단에 중요한 공지나 링크를 표시합니다. 방문자는 X로 이번 방문만 닫거나, 7일간 보지 않기를 선택할 수 있습니다. 공지를 수정·저장하면 다시 노출됩니다.
                </p>
              </div>
              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
                <template v-if="!customizeAnnouncement">
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
                    type="button"
                    @click="beginCustomizeAnnouncement"
                  >
                    맞춤 설정
                  </button>
                </template>
                <template v-else>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
                    type="button"
                    :disabled="savingAnnouncement"
                    @click="cancelCustomizeAnnouncement"
                  >
                    취소
                  </button>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
                    type="button"
                    :disabled="savingAnnouncement || !hasAnnouncementChanges"
                    @click="saveAnnouncementSection"
                  >
                    {{ savingAnnouncement ? '저장 중' : '저장' }}
                  </button>
                </template>
              </div>
            </div>

            <label
              v-if="!customizeAnnouncement"
              class="admin-settings-screen__announcement-toggle flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5 text-sm"
            >
              <span class="font-bold text-[#15171a]">사용</span>
              <span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 cursor-not-allowed items-center opacity-55 grayscale" aria-disabled="true">
                <input
                  :checked="form.announcementEnabled"
                  class="peer sr-only"
                  type="checkbox"
                  disabled
                  aria-label="어나운스 바 사용"
                >
                <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#6d747d]" aria-hidden="true" />
                <span class="relative ml-1 size-5 rounded-full bg-[#f4f6f8] shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
              </span>
            </label>

            <div
              v-else
              class="admin-settings-screen__announcement-edit grid gap-6 border-t border-[#eceff2] pt-5"
            >
              <label class="admin-settings-screen__announcement-toggle flex items-center justify-between gap-4 text-sm">
                <span class="font-bold text-[#15171a]">사용</span>
                <span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
                  <input
                    v-model="form.announcementEnabled"
                    class="peer sr-only"
                    type="checkbox"
                    aria-label="어나운스 바 사용"
                  >
                  <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
                  <span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
                </span>
              </label>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">어나운스</span>
                <input
                  v-model="form.announcementText"
                  class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  maxlength="200"
                  placeholder="공지 문구"
                >
              </label>

              <label class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">링크 (선택)</span>
                <input
                  v-model="form.announcementUrl"
                  class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  maxlength="500"
                  placeholder="https://… 또는 /경로 (비우면 링크 없음)"
                >
              </label>

              <div class="admin-settings-screen__field grid gap-2 text-sm">
                <span class="font-medium text-[#3f4650]">배경색</span>
                <div class="admin-settings-screen__announcement-colors flex flex-wrap items-center gap-3">
                  <button
                    v-for="preset in ANNOUNCEMENT_BACKGROUND_PRESETS"
                    :key="preset.id"
                    class="admin-settings-screen__announcement-color relative inline-flex size-9 items-center justify-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15171a]"
                    :class="form.announcementBackgroundColor === preset.value ? 'border-[#22a06b] ring-2 ring-[#22a06b] ring-offset-2' : 'border-[#dce0e5]'"
                    type="button"
                    :style="{ backgroundColor: preset.value }"
                    :title="preset.label"
                    :aria-label="`${preset.label} 배경`"
                    :aria-pressed="form.announcementBackgroundColor === preset.value"
                    @click="form.announcementBackgroundColor = preset.value"
                  >
                    <span class="sr-only">{{ preset.label }}</span>
                  </button>
                </div>
              </div>
            </div>
          </section>

          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
            콘텐츠·안전
          </h2>
          <section
            id="admin-settings-section-import-export"
            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
          >
            <div class="admin-settings-screen__card-head mb-2">
              <h2 class="text-lg font-semibold text-[#15171a]">
                게시물 Import/Export
              </h2>
              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                게시물 백업을 서버 작업으로 등록하고, 준비된 분할 파일을 내려받습니다.
              </p>
            </div>

            <div class="admin-settings-screen__import-export-actions mt-5 grid gap-3 md:grid-cols-2">
              <button
                class="admin-settings-screen__import-export-action flex min-h-20 cursor-pointer items-center justify-between gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4 text-left transition hover:border-[#c5cbd3] hover:bg-white"
                type="button"
                :aria-expanded="postImportExportPanel === 'export'"
                aria-controls="admin-settings-export-panel"
                @click="togglePostImportExportPanel('export')"
              >
                <span class="min-w-0">
                  <span class="block text-sm font-semibold text-[#15171a]">Export 요청</span>
                  <span class="mt-1 block text-sm leading-relaxed text-[#657080]">
                    기간과 분할 기준을 정해 백업을 만듭니다.
                  </span>
                </span>
                <span
                  class="grid size-8 shrink-0 place-items-center rounded-full border border-[#dce0e5] text-[#394047] transition"
                  :class="postImportExportPanel === 'export' ? 'rotate-180 bg-white' : 'bg-[#f4f6f8]'"
                  aria-hidden="true"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
                </span>
              </button>

              <button
                class="admin-settings-screen__import-export-action flex min-h-20 cursor-pointer items-center justify-between gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4 text-left transition hover:border-[#c5cbd3] hover:bg-white"
                type="button"
                :aria-expanded="postImportExportPanel === 'import'"
                aria-controls="admin-settings-import-panel"
                @click="togglePostImportExportPanel('import')"
              >
                <span class="min-w-0">
                  <span class="block text-sm font-semibold text-[#15171a]">Import 하기</span>
                  <span class="mt-1 block text-sm leading-relaxed text-[#657080]">
                    백업 ZIP 가져오기 영역을 엽니다.
                  </span>
                </span>
                <span
                  class="grid size-8 shrink-0 place-items-center rounded-full border border-[#dce0e5] text-[#394047] transition"
                  :class="postImportExportPanel === 'import' ? 'rotate-180 bg-white' : 'bg-[#f4f6f8]'"
                  aria-hidden="true"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="size-4" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
                </span>
              </button>
            </div>

            <div
              v-if="postImportExportPanel === 'export'"
              id="admin-settings-export-panel"
              class="admin-settings-screen__export-actions mt-4 grid gap-4 rounded-lg border border-[#e6e8eb] bg-[#fbfcfd] p-4"
            >
              <div class="min-w-0">
                <p class="text-sm font-semibold text-[#15171a]">
                  Obsidian 호환 백업 준비
                </p>
                <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                  전체·연도·월·직접 범위로 게시물을 골라 목표 용량 기준 ZIP 백업을 만듭니다.
                </p>
              </div>
              <div class="grid gap-3">
                <div class="admin-settings-screen__export-range grid gap-2 md:grid-cols-4">
                  <label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
                    범위
                    <span class="relative">
                      <select
                        v-model="postExportDateRangeMode"
                        class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                      >
                        <option value="all">전체</option>
                        <option value="year">특정년</option>
                        <option value="month">특정월</option>
                        <option value="custom">직접 지정</option>
                      </select>
                      <svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
                    </span>
                  </label>
                  <label
                    v-if="postExportDateRangeMode === 'year' || postExportDateRangeMode === 'month'"
                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
                  >
                    연도
                    <span class="relative">
                      <select
                        v-model.number="postExportYear"
                        class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                      >
                        <option
                          v-for="year in postExportYearOptions"
                          :key="year"
                          :value="year"
                        >
                          {{ year }}
                        </option>
                      </select>
                      <svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
                    </span>
                  </label>
                  <label
                    v-if="postExportDateRangeMode === 'month'"
                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
                  >
                    월
                    <span class="relative">
                      <select
                        v-model.number="postExportMonth"
                        class="h-10 w-full appearance-none rounded-md border border-[#dce0e5] bg-white px-3 pr-10 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                      >
                        <option
                          v-for="month in postExportMonthOptions"
                          :key="month"
                          :value="month"
                        >
                          {{ month }}월
                        </option>
                      </select>
                      <svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
                    </span>
                  </label>
                  <label
                    v-if="postExportDateRangeMode === 'custom'"
                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
                  >
                    시작일
                    <input
                      v-model="postExportDateFrom"
                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                      type="date"
                    >
                  </label>
                  <label
                    v-if="postExportDateRangeMode === 'custom'"
                    class="grid gap-1 text-xs font-semibold text-[#5d6673]"
                  >
                    종료일
                    <input
                      v-model="postExportDateTo"
                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                      type="date"
                    >
                  </label>
                </div>
                <div class="admin-settings-screen__export-split grid gap-2 md:grid-cols-2">
                  <label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
                    목표 ZIP 용량 (MB)
                    <input
                      v-model.number="postExportMaxFileSizeMb"
                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                      type="number"
                      min="10"
                      max="2048"
                      step="10"
                    >
                  </label>
                  <label class="grid gap-1 text-xs font-semibold text-[#5d6673]">
                    ZIP당 최대 게시물 수
                    <input
                      v-model.number="postExportChunkSize"
                      class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-sm font-semibold text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                      type="number"
                      min="1"
                      max="500"
                      step="1"
                    >
                  </label>
                </div>
                <div class="flex items-center justify-end">
                  <button
                    class="admin-settings-screen__export-request inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-sm font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:bg-[#c7cdd4]"
                    type="button"
                    :disabled="!canRequestPostExport"
                    :title="postExportRequestTitle"
                    @click="requestPostExport"
                  >
                    {{ requestingPostExport ? '요청 중...' : hasActivePostExportJobs ? 'Export 진행 중' : 'Export 요청' }}
                  </button>
                </div>
              </div>
            </div>

            <div
              v-if="postImportExportPanel === 'import'"
              id="admin-settings-import-panel"
              class="admin-settings-screen__import-actions mt-4 grid gap-4 rounded-lg border border-dashed border-[#dce0e5] bg-[#fbfcfd] p-4"
            >
              <div class="min-w-0">
                <p class="text-sm font-semibold text-[#15171a]">
                  백업 ZIP 가져오기
                </p>
                <p class="mt-1 text-sm leading-relaxed text-[#657080]">
                  Export로 만든 Obsidian 호환 ZIP을 게시물과 미디어 파일로 다시 가져옵니다.
                </p>
              </div>
              <div class="grid gap-3 rounded-md border border-[#e6e8eb] bg-white p-4">
                <input
                  ref="postImportInputRef"
                  class="sr-only"
                  type="file"
                  accept=".zip,application/zip"
                  @change="importPostsFromFile"
                >
                <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                  <div class="min-w-0">
                    <p class="text-sm font-semibold text-[#15171a]">
                      {{ postImportFileName || 'ZIP 파일을 선택해 주세요.' }}
                    </p>
                    <p class="mt-1 text-xs leading-relaxed text-[#657080]">
                      같은 슬러그가 있으면 덮어쓰지 않고 새 슬러그로 Import합니다.
                    </p>
                  </div>
                  <button
                    class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md bg-[#15171a] px-4 text-sm font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:bg-[#c7cdd4]"
                    type="button"
                    :disabled="importingPosts"
                    @click="openPostImportFilePicker"
                  >
                    {{ importingPosts ? 'Import 중...' : 'ZIP 선택' }}
                  </button>
                </div>
                <div
                  v-if="postImportResult"
                  class="rounded-md bg-[#f4fbf7] px-3 py-2 text-sm text-[#147a45] ring-1 ring-inset ring-[#b9e7cd]"
                >
                  게시물 {{ postImportResult.importedCount }}개, 자산 {{ postImportResult.assetCount }}개를 가져왔습니다.
                </div>
                <div
                  v-if="postImportResult?.warningCount"
                  class="rounded-md bg-[#fff8e8] px-3 py-2 text-sm text-[#8a5a00] ring-1 ring-inset ring-[#f0d28a]"
                >
                  <p class="font-semibold">
                    경고 {{ postImportResult.warningCount }}개가 있습니다.
                  </p>
                  <ul class="mt-2 grid gap-1 text-xs leading-relaxed">
                    <li
                      v-for="warning in postImportResult.warnings"
                      :key="warning"
                    >
                      {{ warning }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="admin-settings-screen__export-list mt-5">
              <div class="mb-3 flex items-center justify-between gap-3">
                <h3 class="text-sm font-semibold text-[#15171a]">
                  최근 Export 작업
                </h3>
                <button
                  class="inline-flex h-8 cursor-pointer items-center justify-center rounded px-3 text-xs font-semibold text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
                  type="button"
                  @click="refreshPostExportJobs"
                >
                  새로고침
                </button>
              </div>
              <div
                v-if="normalizedPostExportJobs.length === 0"
                class="admin-settings-screen__export-empty rounded-lg border border-dashed border-[#dce0e5] bg-[#f7f8fa] px-4 py-8 text-center text-sm text-[#657080]"
              >
                아직 등록된 Export 작업이 없습니다.
              </div>
              <div v-else class="admin-settings-screen__export-items grid gap-3">
                <article
                  v-for="job in normalizedPostExportJobs"
                  :key="job.id"
                  class="admin-settings-screen__export-item rounded-lg border border-[#e6e8eb] bg-white p-4"
                >
                  <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                    <div class="min-w-0">
                      <div class="flex flex-wrap items-center gap-2">
                        <span
                          class="inline-flex rounded-full px-2 py-1 text-xs font-semibold ring-1 ring-inset"
                          :class="getPostExportStatusClass(job.status)"
                        >
                          {{ getPostExportStatusLabel(job.status) }}
                        </span>
                        <span class="text-sm font-semibold text-[#15171a]">
                          게시물 {{ job.postCount }}개
                        </span>
                        <span class="text-sm text-[#9aa3ad]">
                          {{ job.files.length }}개 파일
                        </span>
                        <span class="text-sm text-[#657080]">
                          {{ job.rangeLabel || '전체' }}
                        </span>
                      </div>
                      <p class="mt-2 text-xs text-[#657080]">
                        요청: {{ formatPostDateTime(job.createdAt) }} · 만료: {{ formatPostDateTime(job.expiresAt) }}
                      </p>
                      <p class="mt-1 text-xs text-[#9aa3ad]">
                        목표 용량 {{ formatExportFileSize(job.maxFileSizeBytes) }} · 최대 {{ job.chunkSize }}개/ZIP
                      </p>
                    </div>
                    <div class="flex shrink-0 items-center gap-2">
                      <button
                        class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#15171a] bg-[#15171a] px-3 text-xs font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:border-[#dce0e5] disabled:bg-white disabled:text-[#9aa3ad]"
                        type="button"
                        :disabled="getReadyPostExportFiles(job).length === 0 || isDownloadingPostExportJob(job.id)"
                        @click="downloadPostExportJobFiles(job)"
                      >
                        {{ isDownloadingPostExportJob(job.id) ? '다운로드 중' : `일괄 다운로드 ${getReadyPostExportFiles(job).length || ''}` }}
                      </button>
                      <button
                        v-if="job.status === 'failed'"
                        class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] px-3 text-xs font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-not-allowed disabled:text-[#a6b0bb]"
                        type="button"
                        :disabled="isRetryingPostExportJob(job.id)"
                        @click="retryPostExportJob(job)"
                      >
                        {{ isRetryingPostExportJob(job.id) ? '재시도 중' : '재시도' }}
                      </button>
                      <button
                        class="inline-flex h-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#ffd5d5] px-3 text-xs font-semibold text-[#d64545] transition hover:bg-[#fff3f3] disabled:cursor-not-allowed disabled:border-[#e1e5ea] disabled:text-[#a6b0bb]"
                        type="button"
                        :disabled="job.status === 'queued' || job.status === 'processing' || isDeletingPostExportJob(job.id)"
                        @click="deletePostExportJob(job)"
                      >
                        {{ isDeletingPostExportJob(job.id) ? '삭제 중' : '삭제' }}
                      </button>
                    </div>
                  </div>

                  <div class="admin-settings-screen__export-progress mt-4 rounded-lg border border-[#edf0f3] bg-[#fbfcfd] p-3">
                    <div class="mb-2 flex items-center justify-between gap-3 text-xs">
                      <span class="font-semibold text-[#15171a]">
                        진행도 {{ getPostExportProgressLabel(job) }}
                      </span>
                      <span class="text-[#657080]">
                        {{ getPostExportProgressPercent(job) }}%
                      </span>
                    </div>
                    <div class="h-2 overflow-hidden rounded-full bg-[#e8edf2]">
                      <div
                        class="h-full rounded-full bg-[#15171a] transition-[width] duration-500"
                        :style="{ width: `${getPostExportProgressPercent(job)}%` }"
                      />
                    </div>
                    <div class="mt-2 flex flex-col gap-1 text-xs text-[#657080] md:flex-row md:items-center md:justify-between">
                      <span>{{ getPostExportProgressDescription(job) }}</span>
                      <span>마지막 갱신: {{ formatPostDateTime(job.updatedAt) }}</span>
                    </div>
                  </div>

                  <details
                    v-if="job.status === 'failed' && job.errorDetail"
                    class="admin-settings-screen__export-error mt-4 rounded-lg border border-[#ffd5d5] bg-[#fff7f7] p-3 text-xs text-[#8f2d2d]"
                  >
                    <summary class="cursor-pointer font-semibold">
                      실패 원인 보기
                    </summary>
                    <pre class="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">{{ job.errorDetail }}</pre>
                  </details>

                  <div v-if="job.files.length > 0" class="admin-settings-screen__export-files mt-4 overflow-hidden rounded-md border border-[#edf0f3]">
                    <div
                      v-for="file in job.files"
                      :key="file.id"
                      class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b border-[#edf0f3] px-3 py-2 last:border-b-0"
                    >
                      <div class="min-w-0">
                        <p class="truncate text-sm font-medium text-[#15171a]">
                          {{ file.fileName }}
                        </p>
                        <p class="mt-0.5 text-xs text-[#9aa3ad]">
                          {{ file.postStart }}-{{ file.postEnd }} · {{ formatExportFileSize(file.fileSizeBytes) }}
                        </p>
                      </div>
                      <a
                        v-if="file.status === 'ready' && file.filePath"
                        class="inline-flex h-8 cursor-pointer items-center justify-center rounded border border-[#15171a] bg-[#15171a] px-3 text-xs font-semibold text-white transition hover:bg-black"
                        :href="getPostExportDownloadUrl(file)"
                      >
                        다운로드
                      </a>
                      <button
                        v-else
                        class="inline-flex h-8 cursor-not-allowed items-center justify-center rounded border border-[#e1e5ea] px-3 text-xs font-semibold text-[#a6b0bb]"
                        type="button"
                        disabled
                      >
                        {{ file.status === 'processing' ? '생성 중' : file.status === 'failed' ? '실패' : '다운로드 대기' }}
                      </button>
                    </div>
                  </div>
                </article>
              </div>
            </div>
          </section>

          <section
            id="admin-settings-section-spam"
            class="admin-settings-screen__card admin-settings-screen__card--spam relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
          >
            <div class="flex items-start justify-between gap-4">
              <div class="min-w-0 flex-1">
                <h2 class="text-base font-semibold text-[#15171a] md:text-lg">
                  스팸 필터
                </h2>
                <p
                  v-if="!editSpam"
                  class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
                >
                  회원가입 시 사용할 수 없는 닉네임을 지정합니다. 닉네임에 해당 단어가 포함되면 가입이 거부됩니다.
                </p>
              </div>
              <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
                <template v-if="!editSpam">
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
                    type="button"
                    @click="beginEditSpam"
                  >
                    편집
                  </button>
                </template>
                <template v-else>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
                    type="button"
                    :disabled="savingSpam"
                    @click="cancelEditSpam"
                  >
                    취소
                  </button>
                  <button
                    class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
                    type="button"
                    :disabled="savingSpam || !hasSpamChanges"
                    @click="saveSpamSection"
                  >
                    {{ savingSpam ? '저장 중' : '저장' }}
                  </button>
                </template>
              </div>
            </div>
            <div
              v-if="!editSpam"
              class="admin-settings-screen__spam-readonly border-t border-[#eceff2] pt-5 text-sm"
            >
              <p class="font-medium text-[#3f4650]">
                가입 금지 닉네임
              </p>
              <ul class="mt-3 grid gap-1.5 text-[#657080]">
                <li
                  v-for="term in form.signupBlockedUsernames"
                  :key="term"
                  class="font-mono text-[13px] text-[#15171a]"
                >
                  {{ term }}
                </li>
              </ul>
            </div>
            <div
              v-else
              class="admin-settings-screen__spam-edit grid gap-2 border-t border-[#eceff2] pt-5 text-sm"
            >
              <label class="admin-settings-screen__field grid gap-2">
                <span class="font-medium text-[#3f4650]">가입 금지 닉네임</span>
                <p class="text-xs leading-relaxed text-[#657080]">
                  한 줄에 하나씩 입력합니다. 대소문자는 구분하지 않으며, 닉네임에 해당 단어가 포함되면 사용할 수 없습니다.
                </p>
                <textarea
                  v-model="signupBlockedUsernamesText"
                  class="min-h-[10rem] resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 font-mono text-[13px] text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
                  rows="8"
                  placeholder="admin&#10;master&#10;zenn"
                />
              </label>
            </div>
          </section>
        </form>
        </div>
      </main>
    </div>
    </div>

    <div
      v-if="toast"
      class="admin-settings-screen__toast fixed right-5 top-24 z-[60] rounded-md border px-4 py-3 text-sm font-semibold shadow-lg md:top-28"
      :class="{
        'border-green-200 bg-green-50 text-green-800': toast.type === 'success',
        'border-red-200 bg-red-50 text-red-800': toast.type === 'error',
        'border-[#e6e8eb] bg-white text-[#15171a]': toast.type === 'info'
      }"
      role="status"
    >
      {{ toast.message }}
    </div>
  </div>
</template>
