/* ──────────────────────────────────────────────
 * 블로그 본문 스타일 — 공개 페이지 (blog-content.css)
 * 로드: BlogDetail.js useEffect → /blog-content.css
 * 관리자 동기화: Nametec_Server/api/static/css/blog-content.css
 * ────────────────────────────────────────────── */

/* ===== 기본 컨테이너 ===== */
.blog-detail-content {
  all: initial;
  display: block;
  box-sizing: border-box;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #222 !important;
  text-align: left !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  padding: 28px 24px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (min-width: 820px) {
  .blog-detail-content { padding: 36px 32px !important; }
}

/* 하위 요소: 인라인 font-size/font-family 초기화 */
.blog-detail-content * {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  box-sizing: border-box;
}

/* ===== 인라인 텍스트 ===== */
.blog-detail-content b,
.blog-detail-content strong { font-weight: 700 !important; }
.blog-detail-content i,
.blog-detail-content em { font-style: italic !important; }
.blog-detail-content u { text-decoration: underline !important; }
.blog-detail-content s,
.blog-detail-content strike { text-decoration: line-through !important; }
.blog-detail-content .pw-light { font-weight: 300 !important; }
.blog-detail-content .pw-regular { font-weight: 400 !important; }
.blog-detail-content .pw-medium { font-weight: 500 !important; }
.blog-detail-content .pw-semibold { font-weight: 600 !important; }
.blog-detail-content .pw-bold { font-weight: 700 !important; }

/* ===== 문단 ===== */
.blog-detail-content p {
  margin: 0 0 1.1em !important;
  font-size: 16px !important;
  color: #333 !important;
}

/* ===== 제목 ===== */
.blog-detail-content h1 { font-size: 1.8em !important; font-weight: 700 !important; margin: 1.6em 0 0.6em !important; line-height: 1.35 !important; color: #111 !important; }
.blog-detail-content h2 { font-size: 1.4em !important; font-weight: 700 !important; margin: 1.5em 0 0.6em !important; line-height: 1.35 !important; color: #111 !important; }
.blog-detail-content h3 { font-size: 1.15em !important; font-weight: 700 !important; margin: 1.4em 0 0.5em !important; line-height: 1.4 !important; color: #111 !important; }

/* ===== 목록 ===== */
.blog-detail-content ul,
.blog-detail-content ol { padding-left: 1.5em !important; margin: 0.5em 0 1.2em !important; }
.blog-detail-content li { margin-bottom: 0.4em !important; font-size: 16px !important; color: #333 !important; }

/* ===== 인용(blockquote) — 소제목 스타일 ===== */
.blog-detail-content blockquote {
  border-left: 4px solid #4a64f5 !important;
  margin: 2em 0 1em !important;
  padding: 14px 20px !important;
  background: linear-gradient(135deg, #f0f3ff 0%, #f8f9ff 100%) !important;
  color: #222 !important;
  border-radius: 0 12px 12px 0 !important;
  font-size: 16px !important;
  font-style: normal !important;
}
.blog-detail-content blockquote strong {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  letter-spacing: -0.02em;
}

/* ===== 이미지 ===== */
.blog-detail-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  margin: 1.2em 0 !important;
  display: block !important;
}

/* ===== 링크 ===== */
.blog-detail-content a {
  color: #4a64f5 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(74, 100, 245, 0.3) !important;
  transition: border-color 0.2s !important;
}

/* ===== 테이블 — 카드형 디자인 ===== */
.blog-detail-content table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 1.8em 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #e2e5f0 !important;
  box-shadow: 0 2px 8px rgba(74, 100, 245, 0.06) !important;
  table-layout: auto !important;
}
.blog-detail-content thead tr {
  background: linear-gradient(135deg, #4a64f5 0%, #5b7cfa 100%) !important;
}
.blog-detail-content th {
  background: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  border: none !important;
  border-bottom: 2px solid #3d56d4 !important;
  text-align: left !important;
  letter-spacing: -0.01em;
}
.blog-detail-content td {
  padding: 13px 18px !important;
  font-size: 14px !important;
  color: #444 !important;
  border: none !important;
  border-bottom: 1px solid #eef0f6 !important;
}
.blog-detail-content tbody tr:last-child td {
  border-bottom: none !important;
}
/* 짝수 행 배경 */
.blog-detail-content tbody tr:nth-child(even) {
  background-color: #f8f9ff !important;
}
.blog-detail-content tbody tr:nth-child(odd) {
  background-color: #fff !important;
}
/* 모바일: 테이블 가로 스크롤 */
@media (max-width: 600px) {
  .blog-detail-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .blog-detail-content th,
  .blog-detail-content td {
    padding: 11px 14px !important;
    white-space: nowrap !important;
  }
}

/* ===== 코드/임베드 ===== */
.blog-detail-content pre,
.blog-detail-content code { overflow-x: auto !important; max-width: 100% !important; font-size: 14px !important; }
.blog-detail-content iframe,
.blog-detail-content video,
.blog-detail-content embed { max-width: 100% !important; }

/* ===== 모바일 반응형 ===== */
@media (max-width: 600px) {
  .blog-detail-content {
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 20px !important;
  }
  .blog-detail-content p { font-size: 15px !important; }
  .blog-detail-content li { font-size: 15px !important; }
  .blog-detail-content h1 { font-size: 1.5em !important; }
  .blog-detail-content h2 { font-size: 1.25em !important; }
  .blog-detail-content h3 { font-size: 1.1em !important; }
  .blog-detail-content blockquote {
    padding: 12px 16px !important;
    margin: 1.5em 0 0.8em !important;
  }
  .blog-detail-content blockquote strong {
    font-size: 15px !important;
  }
}