@charset "utf-8";
/* 새글 스킨 (latest) */

/* 페이지 중앙 정렬 및 폭 제한 */
.lat-wrapper {
  width: 90%;
  margin: 20px auto;
  box-sizing: border-box;
}

/* 리스트 스타일 */
.lat {
  position: relative;
  max-width: 100%;
}
.lat ul {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border: 0px solid #e5e5e5;
  width: 100%;
  box-sizing: border-box;
}
.lat li {
  border-top: 0px solid #f3f3f3;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.lat li:first-child { border-top: 0; }

/* 항목 구조 */
.lat-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hover 및 Active */
.lat li:hover,
.lat li.active {
  background: #2f9389;
  color: #fff;
}
.lat li:hover .lat-subject,
.lat li.active .lat-subject,
.lat li:hover .new_icon,
.lat li.active .new_icon {
  color: #fff;
}

/* + / - 아이콘 */
.toggle-sign {
  font-weight: bold;
  font-size: 1.5em;
  margin-left: 10px;
  margin-top:7px; 
  color: #333;
  flex-shrink: 0;
}
.lat li.active .toggle-sign,
.lat li:hover .toggle-sign {
  color: #fff;
}

/* 제목 텍스트 */
.lat-subject {
  display: inline-block;
  font-size: 1.5em;
  color: #333;
  font-weight:600;
  margin-left: 20px;
  margin-top:10px; 
  flex: 1;
  word-break: keep-all;
}

/* 아이콘, 제목 스타일 */
.lat li i { color: #9da4bc; }
.lat li .fa-heart { color: #ff0000; }
.lat li .new_icon {
  display: inline-block;
  padding: 0 3px;
  line-height: 1px;
  font-size: 0.833em;
  color: #fff;
  background: #c56bed;
}
.lat li .cnt_cmt { color: #ff3970; }
.lat_title { display: block; padding: 10px 0 8px; font-size: 1.167em; text-align: center; }
.lat_more { position: absolute; top: 10px; right: 0; }

.lat-content {
  border-top: 1px solid #ddd;
  background: #f9f9f9;
  margin-top: 12px;
  font-size: 0.95em;
  line-height: 1.6;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0; /* 닫힐 때 패딩 제거 */
  transition: max-height 0.6s ease, opacity 0.4s ease, padding 0.4s ease;
}

/* 열렸을 때 */
.lat-item.active .lat-content {
  max-height: 2000px; /* 충분히 큰 값 */
  opacity: 1;
  padding: 12px; /* 열릴 때 패딩 적용 */
}


  /* 슬라이드 애니메이션 */
  max-height: 0;
  opacity: 0;
  transition: max-height 0.6s ease, opacity 0.4s ease;
}

/* 본문 내 이미지 처리 */
.lat-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 반응형 */
@media (max-width: 768px) {
  .lat-wrapper { width: 98%; margin: 30px auto; }
  .toggle-sign { font-size: 1.2em; }
/* 제목 텍스트 */
.lat-subject {
  font-size: 1.0em;
  margin-left: 10px;
  margin-top:2px; 
  margin-bottom: -10px; 
}
.lat li {
  padding: 0px;
}
}