@charset "utf-8";

/* 새글 스킨 (latest) - 테이블 형식 */
.lat {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: var(--gap-5);
  flex: 1;
}
.lat .lat_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--gap-2-5);
  border-bottom: 1px solid var(--gray-color);
}
.lat .lat_title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xl);
  font-weight: 300;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: var(--navy-color);
}

.lat .lt_more {
  white-space: nowrap;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: var(--navy-color);
}

/* 테이블 스타일 */
.lat_table {
  width: 100%;
  border-collapse: collapse;
}

.lat_table thead {
  background: #000;
}

.lat_table thead th {
  padding: var(--gap-2-5) var(--gap-6);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.lat_table tbody tr {
  border-bottom: 1px solid var(--gray-color);
  transition: background 0.2s;
}

.lat_table tbody tr.notice {
  background: var(--dim-gray-color);
}

.lat_table tbody tr:hover {
  background: var(--dim-gray-color);
}

.lat_table tbody td {
  padding: var(--gap-2-5) 0;
  font-size: var(--font-size-xs);
  line-height: 100%;
  vertical-align: middle;
}

/* 컬럼별 스타일 */
.lat_num {
  text-align: center;
  width: 70px;
}

.lat_table tbody .lat_subject {
  text-align: left;
  display: flex;
}

.lat_writer {
  width: 100px;
  text-align: center;
}
.lat_writer span {
  color: #888;
}

.lat_date {
  width: 100px;
  text-align: center;
  color: #888;
}

/* 제목 링크 */
.lat_subject a strong {
  font-weight: 700;
}

/* 아이콘 스타일 */
.notice_badge {
  display: inline-block;
  padding: 2px 8px;
  background: #273555;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
}

.reply_icon {
  display: inline-block;
  color: #000;
  margin-right: 5px;
  font-size: 6px;
  font-weight: 700;
}

.new_icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  color: #23db79;
  background: #b9ffda;
  text-align: center;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: bold;
  vertical-align: middle;
}

.hot_icon {
  display: flex;
  padding: 3px 6px;
  line-height: 100%;
  font-size: var(--font-size-2xs);
  color: #fff;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  background: var(--navy-color);
  margin-right: var(--gap-2-5);
}

.hot_icon i {
  color: #ff0000;
}

.fa-lock {
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 10px;
  font-size: 8px;
  color: var(--navy-color);
  text-align: center;
  vertical-align: middle;
  margin-left: var(--gap-1);
}

.fa-download {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  color: #daae37;
  background: #ffefb9;
  text-align: center;
  border-radius: 3px;
  vertical-align: middle;
}

.fa-link {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  color: #b451fd;
  background: #edd3fd;
  text-align: center;
  border-radius: 3px;
  vertical-align: middle;
}

.lt_cmt {
  display: inline-block;
  background: #e9eff5;
  color: #3a8afd;
  font-size: 11px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
  font-weight: 600;
}

/* 빈 목록 */
.empty_td {
  padding: 60px 20px !important;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* 반응형 */
@media (max-width: 768px) {
  .lat {
    gap: var(--gap-2-5);
  }
  .lat .lat_header {
    padding: 0 var(--gap-5);
    padding-bottom: var(--gap-2-5);
  }
  .lat .lat_title {
    gap: var(--gap-2-5);
    font-size: var(--font-size-base);
  }
  
  .lat .lat_title>img{
    width: var(--gap-3);
    height: auto;
  }
  .lat .lt_more {
    font-size: var(--font-size-2xs);
  }

  .lat_table thead th {
    padding: var(--gap-2-5) 0;
    font-size: var(--font-size-2xs);
  }
  
  .lat_table tbody td {
    padding: var(--gap-2-5) 0;
    font-size: var(--font-size-2xs);
  }
  
  /* 컬럼별 스타일 */
  .lat_num {
    text-align: center;
    width: 11.2vw;
  }
  
  .lat_subject {
    text-align: left;
    font-size: var(--font-size-xs) !important;
  }
  
  .lat_writer {
    width: 15vw;
  }
  
  .lat_date {
    width: 14.67vw;
  }

  .hot_icon {
    padding: 0.53vw var(--gap-1);
    font-size: var(--gap-1-5);
  }
  
}