/* 컨테이너: 좌/우 10% 마진 */
.content{
  box-sizing:border-box;
  margin-top: 40px;
  margin-left:10%;
  margin-right:10%;
  line-height:1.6;
  color:#222;
  font-size:16px;
}

/* 리스트: 그리드 레이아웃 */
.content ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:20px;                    /* 카드 간격 */
  grid-template-columns:1fr;   /* 기본 1열(모바일) */
}
@media (min-width:600px){ .content ul{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .content ul{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .content ul{ grid-template-columns:repeat(4,1fr); } }

/* 카드: 세로형(이미지 → 제목 → 내용 → 태그) */
.content ul>li{
  display:grid;
  grid-template-areas:
    "thumb"
    "title"
    "body"
    "tags";
  grid-template-columns:1fr;
  gap:8px;
  padding:12px 0;
  background:#fff;
  border:none;
  box-shadow:none;
}

/* 제목 = 첫 번째 a */
.content ul>li>a{
  grid-area:title;
  display:block;
  font-weight:700;
  font-size:clamp(16px,2vw,18px);
  color:#0d6efd;                 /* 링크 블루 */
  text-decoration:none;          /* 기본은 밑줄 없음 */
  cursor:pointer;
  margin-top:4px;
  transition:color .15s ease, text-underline-offset .15s ease;
  text-underline-offset:2px;     /* 밑줄 간격(호버 때 살짝 키움) */
  text-decoration-thickness:.1em;
  text-decoration-skip-ink:auto;
}

/* 호버/포커스: 밑줄 + 색 살짝 진하게 */
.content ul>li>a:hover,
.content ul>li>a:focus{
  color:#0a58ca;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* 클릭 순간 색 살짝 더 진하게 */
.content ul>li>a:active{ color:#0948a8; }

/* 방문한 링크: 전통적인 퍼플 톤 */
.content ul>li>a:visited{ color:#6f42c1; }

/* 내용 = 네 번째 div */
.content ul>li>div:nth-of-type(4){
  grid-area:body;
  color:#333;
  font-size:14px;
}

/* 태그 = 다섯 번째 div (링크 금지) */
.content ul>li>div:nth-of-type(5){
  grid-area:tags;
  color:#666;
  font-size:13px;
}

/* 카테고리(1번째 div), 소제목(3번째 div) 숨김 */
.content ul>li>div:nth-of-type(1),
.content ul>li>div:nth-of-type(3){ display:none; }

/* 줄바꿈 보조 */
.content a,
.content div{ overflow-wrap:anywhere; }

/* 매우 작은 화면 보정 */
@media (max-width:400px){
  .content ul{ gap:12px; }
  .content ul>li{ padding:10px 0; }
}


/* 이미지 박스: 영역 유지 */
.content ul>li>div:nth-of-type(2){
  position: relative;
  aspect-ratio: 16 / 9;   /* 카드 폭 기준으로 높이 확보 */
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
}

/* 이미지 자체 */
.content ul>li>div:nth-of-type(2) img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* 로드 실패 시(클래스 부여됨): 안내 레이어만 보이게 */
.content ul>li>div:nth-of-type(2).img-broken::after{
  content: "이미지 없음";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #999;
}

/* 혹시 이전에 넣었던 숨김 규칙 무력화 */
.content ul>li>div:nth-of-type(2),
.content ul>li>div:nth-of-type(2):has(img),
.content ul>li>div:nth-of-type(2):empty{
  display: block !important;
}