*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#fff;
  color:#111;
  font-family: 'Noto Sans KR', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 28px;
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(10px);
  z-index:100;
}

.topbar .left{
  font-size:13px;
  letter-spacing:.2px;
}

.topbar .right{
  display:flex;
  gap:28px;
  font-size:13px;
}

:root{ --header-h: 100px; }

/* ===== Main grid ===== */
#stage{
  width: 100%;
  padding-top: 80px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 20px;

  justify-content: center;
  align-content: start;

  /* ✅ 겹침/빈칸 완화 */
  grid-auto-flow: dense;
}

/* ✅ 핵심: thumb는 “그리드 칸”을 100%로 먹는다 (고정폭 금지) */
.thumb{
  width: 100%;
  display: block;
  position: relative;
  text-decoration: none;
  justify-self: start;
}

/* ✅ 가로형: 폭을 500px로 키우지 말고 2칸(span2) */
.thumb.ratio-landscape{
  grid-column: span 2;
}

/* ===============================
   Thumbnail wrapper
   - row 고정 제거: height 없음!
   - 메인 이미지가 높이를 결정(원본비율 유지)
   =============================== */
.thumb-img{
  position: relative;
  overflow: hidden; /* 삐져나옴 방지 */
  width: 100%;
  /* height: 없음 (✅ 원본 비율 유지) */
  box-shadow: 0 3px 15px rgba(0,0,0,.2);
}

/* 메인/alt 공통 */
.thumb-img img{
  width: 100%;
  height: auto;     /* ✅ 원본 비율 */
  display: block;
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: opacity, transform;

}

/* alt 이미지는 위에 겹쳐두고 숨김
   ✅ 높이는 “메인 이미지 렌더 후” wrapper 높이를 따라감 */
.thumb-img .thumb-alt{
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 크롭 싫으면 contain으로 바꿔 */
}

/* hover */
.thumb:hover img{
  opacity: 0.8;
}

/* 메인에서는 제목/날짜 안 보이게 */
.thumb .meta,
.thumb h3,
.thumb .title,
.thumb .year{
  display: none !important;
}

/* ===============================
   Thumbnail auto swap (2s)
   =============================== */
.thumb-img[data-has-alt="true"] .thumb-main{
  animation: swapMain 4s infinite;
}
.thumb-img[data-has-alt="true"] .thumb-alt{
  animation: swapAlt 4s infinite;
}

@keyframes swapMain{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes swapAlt{
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* ✅ 모바일: 1열 */
@media (max-width: 768px){
  #stage{
    grid-template-columns: 1fr;
  }
  .thumb.ratio-landscape{
    grid-column: span 1;
  }
}