@charset "utf-8";

/* -------------------------------------------------
   50mm Tab Latest (오전 작업 톤 맞춤)
   - .lat 기반 최신글 카드
   - .tablatest-* : 탭형 최신글 네비/콘텐츠
   - 더보기 버튼 정렬 & 모바일 겹침/스크롤 해결
-------------------------------------------------- */

/* 색상 토큰 */
:root{
  --brand:#2563eb;        /* 메인 블루 */
  --brand-600:#1e4fd6;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --chip-new:#16a34a;
  --chip-hot:#ef4444;
  --chip-dl:#d97706;
  --chip-link:#7c3aed;
}

/* 공통 리셋(해당 블록은 테마 전역 리셋과 충돌 없도록 최소화) */
.lat, .tablatest-nav, .tablatest-content { box-sizing:border-box; }

/* -------------------------
   카드(최신글) 기본 프레임
-------------------------- */
.lat{
  position:relative;
  margin:0 0 20px 0;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}

/* 헤더: 제목 + 더보기 */
.lat .lat_head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  gap:10px;
}

.lat .lat_title{
  display:flex;
  align-items:center;
  gap:.5rem;
  line-height:1.2;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin:0;
}
.lat .lat_title a{
  color:inherit;
  text-decoration:none;
}
.lat .lat_title a:hover{ color:var(--brand); }

/* 더보기: 겹침/줄바꿈 방지 & 반응형 정렬 */
.lat .lt_more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  line-height:1;
  height:auto;
  min-width:44px;
  font-size:.875rem;
  font-weight:600;
  color:var(--brand);
  background:#eff6ff;
  border:1px solid #dbeafe;
  border-radius:9px;
  text-decoration:none;
  position:static;             /* 오전 이슈: absolute로 내려앉던 문제 제거 */
  white-space:nowrap;
}
.lat .lt_more:hover{
  color:#fff;
  background:var(--brand);
  border-color:var(--brand);
}

/* 본문 리스트 */
.lat ul{
  margin:0;
  padding:10px 16px 14px 16px;
  list-style:none;
}
.lat li{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.lat li:last-child{ border-bottom:0; }

/* 말줄임 & 두 줄 클램프 */
.lat li a{
  flex:1 1 auto;
  font-weight:600;
  font-size:1rem;
  line-height:1.45;
  color:var(--text);
  text-decoration:none;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lat li a:hover{ color:var(--brand); }

/* 보조정보(닉/날짜 등) */
.lt_info{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:.875rem;
  color:var(--muted);
}
.lt_info .lt_date{ color:var(--muted); }

/* 빈 목록 상태 */
.lat .empty_li{
  padding:36px 16px;
  text-align:center;
  color:#6b7280;
  line-height:1.6;
  background:#fafafa;
  border-radius:10px;
  margin:12px;
}

/* 아이콘/칩 (색상만 오전 톤으로 조정) */
.lat li .fa-heart{ color:#ef4444; }
.lat li .fa-lock{
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  font-size:12px; color:#0f172a; background:#e2e8f0; text-align:center;
  border-radius:4px; border:1px solid #e2e8f0; vertical-align:middle;
}
.lat li .new_icon{
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  font-size:12px; font-weight:700; color:#fff; background:var(--chip-new);
  text-align:center; border-radius:4px; margin-left:2px; vertical-align:middle;
}
.lat li .hot_icon{
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  font-size:12px; font-weight:700; color:#fff; background:var(--chip-hot);
  text-align:center; border-radius:4px; margin-left:2px; vertical-align:middle;
}
.lat li .fa-download{
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  font-size:12px; color:#fff; background:var(--chip-dl);
  text-align:center; border-radius:4px; vertical-align:middle;
}
.lat li .fa-link{
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  font-size:12px; color:#fff; background:var(--chip-link);
  text-align:center; border-radius:4px; vertical-align:middle;
}

/* 프로필 이미지(있을 때) */
.lat .profile_img img{
  width:28px; height:28px; border-radius:50%; object-fit:cover;
}

/* -------------------------
   탭 네비게이션
-------------------------- */
.tablatest-nav{
  display:flex;
  flex-wrap:wrap;             /* 오전 이슈: 모바일 겹침 방지 (nowrap → wrap) */
  gap:8px;
  margin:0 0 12px 0;
  padding:0;
  list-style:none;
  border-bottom:1px solid var(--line);
}
.tablatest-nav .tab{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 14px;
  border-radius:9px;
  font-size:.9375rem;
  font-weight:700;
  color:var(--text);
  background:#f8fafc;
  text-decoration:none;
  border:1px solid #e2e8f0;
}
.tablatest-nav .tab[aria-selected="true"],
.tablatest-nav .tab.active{
  color:#fff;
  background:var(--brand);
  border-color:var(--brand);
}
.tablatest-nav .tab:hover{
  border-color:var(--brand);
}

/* 탭 콘텐츠 패널 */
.tablatest-content{
  padding:0; /* lat 카드가 자체 패딩을 가짐 */
}

/* -------------------------
   반응형
-------------------------- */
@media (max-width: 576px){
  /* 폰트 & 간격 살짝 키움 (오전 지적사항) */
  .lat .lat_title{ font-size:1.05rem; }
  .lat li a{ font-size:1rem; -webkit-line-clamp:2; }
  .lt_info{ font-size:.8125rem; }

  /* 더보기 버튼이 제목 아래로 밀리지 않게 (한 줄에 유지) */
  .lat .lat_head{ flex-wrap:wrap; }
  .lat .lt_more{ margin-left:auto; }

  /* 탭 네비: 가로 스크롤 대신 줄바꿈 */
  .tablatest-nav{
    gap:6px;
    border-bottom:1px solid var(--line);
  }
}

@media (min-width: 577px) and (max-width: 991.98px){
  .lat .lat_title{ font-size:1.05rem; }
  .lat li a{ font-size:1rem; }
}

@media (min-width: 992px){
  .lat .lat_title{ font-size:1.0625rem; }
  .lat li a{ font-size:1rem; }
}

/* 미세효과 */
.lat li:hover a{ text-decoration:underline; text-underline-offset:3px; }

/* 최신글 리스트의 링크 요소에 적용 */
.latest li a,
.tablatest-content .lat li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* 한국어 가독성 보정 */
  word-break: keep-all;     /* 단어 단위 유지 */
  overflow-wrap: anywhere;  /* 너무 긴 URL 등 강제 줄바꿈 */
}

/* 크롤링 스킨을 .lat 바깥 <ul class="latest">로 쓸 때도 자동 말줄임 */
.latest li a{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;   /* 보이는 줄 수: 1~n로 조절 */
  overflow:hidden;
  text-overflow: ellipsis;

  /* 가독성/깨짐 방지 */
  line-height:1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
  width:100%;
}
/* 크롤링 라인 스킨: 항목 마커 */
.cl-marker{
  display:inline-block;
  margin-right:6px;
  font-weight:700;
  opacity:.8;
  /* 원하면 크기 살짝 키우기 */
  /* font-size: 1.05em; */
}

/* 줄 간격을 조금 타이트하게 쓰고 싶다면(선택) */
ul .cl-marker + a { line-height:1.35; }