/* writeDetail.css */

body {
  font-family: "Noto Sans KR", sans-serif;
  line-height: 1.8;
  color: #333;
  background-color: #f5f5f5;
}

.post-detail {
  padding-bottom: 60px;
  width: 100%;
  padding-right: 4%;
  padding-left: 4%;
}

/* 헤더 스타일링 */
.blog-header {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("/images/travel.jpg") center/cover;
  padding: 1rem 0 3rem 0;
  margin-bottom: 2.5rem;
  color: #fff;
  max-width: 880px;
  margin: 0 auto;
}

.blog-header img {
  padding-left: 1rem;
  margin-bottom: 2.5rem;
}

.blog-title {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.lead {
  font-size: 1.1rem;
  font-weight: 400;
  opacity: 0.95;
}

.container {
  --bs-gutter-x: 0;
  padding-right: 0;
  padding-left: 0;
  max-width: 880px;
  margin: 0 auto;
}

#posts-container {
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.post-header {
  text-align: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

.post-title {
  font-size: 2rem;
  color: #1a1a1a;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
  word-break: keep-all;
  padding-top: 2rem;
}

.post-meta {
  color: #666;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.post-meta i {
  color: #666;
  font-size: 0.9rem;
}

/* 게시글 내용 */
.post-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #333;
  word-break: keep-all;
}

.post-content img {
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 12px;
  display: block;
}

/* CKEditor 이미지 정렬 스타일 */
.post-content figure {
  margin: 2rem 0;
  display: block;
  clear: both;
}

.post-content figure img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}

.post-content figure figcaption {
  display: block;
  background-color: #f8f9fa;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 0.9em;
  color: #6c757d;
  border-left: 3px solid #007bff;
  font-style: italic;
  text-align: center;
}

/* 이미지 컨테이너 스타일 */
.post-content .image {
  margin: 2rem 0;
  clear: both;
}

.post-content .image > img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 이미지 정렬 클래스 */
.post-content .image.image-style-align-left {
  float: left;
  margin: 0 2rem 2rem 0;
}

.post-content .image.image-style-align-right {
  float: right;
  margin: 0 0 2rem 2rem;
}

.post-content .image.image-style-align-center {
  display: block;
  margin: 2rem auto;
  text-align: center;
}

.post-content .image.image-style-side {
  float: right;
  margin: 0 0 2rem 2rem;
  max-width: 50%;
}

.post-content .image.image-style-inline {
  display: inline-block;
  margin: 0 0.5rem;
  vertical-align: middle;
}

.post-content .image.image-style-block {
  display: block;
  margin: 2rem auto;
  clear: both;
}

/* 이미지 크기 스타일 */
.post-content .image.image_resized {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;

  position: relative;
  transform: translateX(50%);
}

.post-content .image.image_resized img {
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0 auto;
}

/* 이미지 백업 스타일 (클래스명 변형 대응) */
.post-content .image-style-alignLeft {
  float: left;
  margin: 0 2rem 2rem 0;
}

.post-content .image-style-alignRight {
  float: right;
  margin: 0 0 2rem 2rem;
}

.post-content .image-style-alignCenter {
  display: block;
  margin: 2rem auto;
  text-align: center;
}

/* 리스트 정렬 스타일 */
.post-content ul.align-center,
.post-content ol.align-center {
  text-align: center;
  list-style-position: inside;
}

.post-content ul.align-left,
.post-content ol.align-left {
  text-align: left;
}

.post-content ul.align-right,
.post-content ol.align-right {
  text-align: right;
  list-style-position: inside;
}

/* CKEditor 리스트 중앙 정렬 */
.post-content[style*="text-align:center"] ol,
.post-content[style*="text-align:center"] ul {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}

.post-content .align-center ol,
.post-content .align-center ul {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}

/* 테이블 스타일 */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
}

.post-content table th,
.post-content table td {
  padding: 0.75rem;
  border: none !important;
  text-align: left;
  min-width: 50px;
}

.post-content table th {
  background-color: transparent;
  font-weight: 600;
  color: #333;
}

.post-content table tr:nth-child(even) {
  background-color: transparent;
}

.post-content table tr:hover {
  background-color: transparent !important;
}

/* CKEditor 테이블 반응형 */
.post-content .table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  margin: 2rem 0;
}

.post-content .table table {
  width: 100%;
  border-collapse: collapse;
}

.post-content .table td,
.post-content .table th {
  border: none !important;
  padding: 8px 12px;
  min-width: 50px;
}

/* 텍스트 정렬 클래스 */
.post-content .text-align-left {
  text-align: left;
}

.post-content .text-align-center {
  text-align: center;
}

.post-content .text-align-right {
  text-align: right;
}

.post-content .text-align-justify {
  text-align: justify;
}

/* 폰트 스타일 */
.post-content .text-big {
  font-size: 1.2em;
}

.post-content .text-small {
  font-size: 0.9em;
}

.post-content .text-tiny {
  font-size: 0.8em;
}

.post-content .text-huge {
  font-size: 1.4em;
}

/* 컬러 스타일 */
.post-content .marker-yellow {
  background-color: #ffeb3b;
  padding: 0.1em 0.2em;
}

.post-content .marker-green {
  background-color: #4caf50;
  color: white;
  padding: 0.1em 0.2em;
}

.post-content .marker-pink {
  background-color: #e91e63;
  color: white;
  padding: 0.1em 0.2em;
}

.post-content .marker-blue {
  background-color: #2196f3;
  color: white;
  padding: 0.1em 0.2em;
}

/* CKEditor 스타일 적용을 위한 추가 클래스 */
.post-content.ck-content {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* figure.table 내 모든 요소의 border와 hover 제거 */
figure.table {
  border: none !important;
}

figure.table table {
  border: none !important;
}

figure.table table td,
figure.table table th {
  border: none !important;
  padding: 8px 12px;
}

figure.table tbody tr td {
  border: none !important;
}

figure.table tr:hover {
  background-color: transparent !important;
}

.ck-content .table table {
  border: none !important;
}

.ck-content .table table td {
  border: none !important;
  padding: 0 !important;
}

.ck-content .table table tr {
  border: none !important;
}

.ck-content .table tbody tr td {
  border: none !important;
}

.ck-content .table tbody {
  border: none !important;
}

.ck-content table tbody tr {
  border: none !important;
}

.ck-content .table table tr:hover {
  background-color: transparent !important;
}

/* 이미지 정렬 강제 적용 */
.post-content figure.image.image-style-align-center,
.post-content .image.image-style-align-center {
  display: block !important;
  margin: 2rem auto !important;
  text-align: center !important;
  float: none !important;
}

.post-content figure.image.image-style-align-left,
.post-content .image.image-style-align-left {
  float: left !important;
  margin: 0 2rem 2rem 0 !important;
  text-align: left !important;
}

.post-content figure.image.image-style-align-right,
.post-content .image.image-style-align-right {
  float: right !important;
  margin: 0 0 2rem 2rem !important;
  text-align: right !important;
}

/* 플로팅 이미지 후 요소 정리 */
.post-content p:after {
  content: "";
  display: table;
  clear: both;
}

/* 네비게이션 버튼 */
.navigation-buttons {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.btn-primary {
  background-color: #2c5282;
  border: none;
  padding: 0.7rem 1.8rem;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: #2b4c7e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.15);
}

.btn-primary i {
  margin-right: 0.5rem;
}

/* 스크롤 투 탑 버튼 */
.back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 42px;
  height: 42px;
  background-color: rgba(44, 82, 130, 0.9);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: rgba(44, 82, 130, 1);
  transform: translateY(-2px);
  color: white;
}

/* 추가 콘텐츠 스타일 */
.post-content blockquote {
  background: #f8f9fa;
  border-left: 4px solid #007bff;

  padding: 1rem 1.5rem;
  font-style: italic;
  position: relative;
  border-radius: 4px;
  color: #444;
}

.post-content blockquote::before {
  content: "\201C";
  font-size: 4em;
  color: #007bff;
  position: absolute;
  left: 10px;
  top: -10px;
  opacity: 0.3;
}

.post-content blockquote p {
  margin: 0;
  font-size: 1.1em;
  line-height: 1.6;
}

.post-content h2 {
  font-size: 1.6rem;
  color: #1a1a1a;
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.post-content h3 {
  font-size: 1.3rem;
  color: #2c3e50;
  margin: 2rem 0 1rem;
  font-weight: 600;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .blog-header {
    padding: 1rem 0 2rem 0;
  }

  .blog-title {
    font-size: 1.8rem;
  }

  .lead {
    font-size: 1rem;
  }

  .container {
    padding: 0;
  }

  article {
    padding: 2rem 1.2rem;
  }

  .post-title {
    font-size: 1.6rem;
    padding-top: 1.2rem;
  }

  .post-meta {
    font-size: 0.85rem;
    flex-direction: column;
    gap: 0.3rem;
    line-height: 1.4;
  }

  .post-meta .view-count {
    margin-left: 0 !important;
  }

  .post-content {
    font-size: 1rem;
  }

  .back-to-top {
    width: 38px;
    height: 38px;
  }
}