/* =========================================
   Blog Detail Style (Dark Mode)
   ========================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 기본 배경 및 폰트 설정 */
body {
  background-color: #111; /* 배경 검은색 */
  color: #fff;
  font-family: 'Pretendard', sans-serif;
}

/* 전체 컨테이너: 읽기 편하게 너비 제한 */
.blog-article {
  max-width: 800px; /* 본문 최대 너비 */
  margin: 0 auto;
  padding: 14rem 20px 8rem; /* 상단 여백(헤더 고려), 좌우, 하단 */
}

/* 1. 글 헤더 (제목 영역) */
.article-header {
  margin-bottom: 3rem;
  text-align: left;
}

.article-meta {
  display: flex;
  gap: 1rem;
  font-size: 1rem;
  color: #888;
  margin-bottom: 1.5rem;
  font-weight: 500;
  align-items: center;
}

.article-meta .category {
  color: #fff;
  padding: 0.2rem 0.8rem;
  border: 1px solid #fff;
  border-radius: 20px;
  font-size: 0.85rem;
}

.article-title {
  font-size: 3rem; /* PC 폰트 크기 */
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* 2. 메인 히어로 이미지 & 본문 이미지 공통 */
.article-hero, 
.article-content img {
  width: 100%;
  height: auto;
  
  /* [수정됨] 이미지 아래 여백을 줄여서 캡션과 자연스럽게 연결되도록 변경 */
  margin: 0 0 1rem 0; 
  
  border-radius: 1rem;
  overflow: hidden;
  display: block;
  
  /* [이미지 엑박 방지] 회색 박스 처리 */
  background-color: #333; 
  min-height: 300px; /* 이미지가 없어도 최소 높이 확보 */
  position: relative;
}

/* 썸네일/본문 이미지가 깨졌을 때 숨김 처리 (선택사항) */
.article-hero img,
.article-content img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 3. 본문 콘텐츠 스타일 */
.article-content {
  font-size: 1.15rem; /* 가독성 좋은 크기 */
  line-height: 1.8;   /* 줄간격 넉넉하게 */
  color: #ddd;        /* 완전 흰색보다 눈이 편한 색 */
}

/* 소제목 (H2) */
.article-content h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-top: 5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #333; /* 하단 구분선 */
  padding-bottom: 1rem;
}

/* 소제목 (H3) */
.article-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* 본문 문단 */
.article-content p {
  margin-bottom: 1.5rem;
  word-break: break-all;
}

/* 강조 문구 (Intro) - 왼쪽에 흰색 선 있는 스타일 */
.article-content .intro-text {
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 4rem;
  border-left: 4px solid #fff;
  padding-left: 1.5rem;
}

/* 강조(Bold) 텍스트 색상 */
.article-content strong {
  color: #fff;
  font-weight: 700;
}

/* 이탤릭(기울임) 텍스트 - 인용구처럼 보이게 */
.article-content em {
  display: block;
  font-style: normal;
  color: #aaa;
  background: #222;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

/* [수정됨] 이미지 캡션 (설명) - 겹침 오류 해결 */
.caption {
  font-size: 0.95rem;
  color: #777;
  text-align: center;
  
  /* 마이너스 마진 제거 -> 글자 겹침 해결 */
  margin-top: 0; 
  
  margin-bottom: 4rem;
  display: block;
  line-height: 1.6;
}

/* 리스트 스타일 (점) */
.article-content ul {
  margin-bottom: 2rem;
  padding-left: 1.5rem;
  color: #ccc;
  list-style-type: disc;
}
.article-content li {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

/* 4. 하단 네비게이션 (버튼) */
.article-footer {
  margin-top: 8rem;
  padding-top: 3rem;
  border-top: 1px solid #333;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn-back {
  display: inline-block;
  padding: 1rem 3rem;
  background-color: transparent;
  border: 1px solid #555;
  border-radius: 50px;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-back:hover {
  background-color: #fff;
  color: #111;
  border-color: #fff;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .blog-article {
    padding: 10rem 20px 6rem; /* 모바일 상단 여백 조정 */
  }
  
  .article-title {
    font-size: 1.8rem; /* 제목 크기 줄임 */
  }
  
  .article-content {
    font-size: 1.05rem; /* 본문 크기 조정 */
  }
  
  .article-content .intro-text {
    font-size: 1.15rem;
  }

  .article-content h2 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  
  .article-footer {
    flex-direction: column; /* 버튼 세로 정렬 */
  }
  
  .btn-back {
    width: 100%;
    text-align: center;
  }
}