/* ========== 공통 ========== */
.sec-latest__body{position:relative}

.sec-latest__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap-sm);
}
.sec-latest__headtext{min-width:0}

.sec-latest__more{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding-bottom:6px;
  font-size:var(--fs-sm);color:var(--c-text-sub);
  text-decoration:none;transition:var(--tr);
}
.sec-latest__more svg{width:15px;height:15px;transition:var(--tr)}
.sec-latest__more:hover{color:var(--c-primary)}
.sec-latest__more:hover svg{transform:translateX(3px)}

.sec-latest__grid{display:grid;gap:var(--gap-sm)}

.sec-latest__card{
  display:block;
  text-decoration:none;color:inherit;
  transition:var(--tr);
}

.sec-latest__thumb{
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  background:var(--c-bg-alt);
}
.sec-latest__thumb img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s ease;
}
.sec-latest__card:hover .sec-latest__thumb img{transform:scale(1.06)}

.sec-latest__title{
  margin:0;
  font-size:var(--fs-h3);font-weight:var(--fw-head);
  line-height:1.4;letter-spacing:-.02em;color:var(--c-text);
  transition:color var(--tr);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:600;
}
.sec-latest__card:hover .sec-latest__title{color:var(--c-primary)}

.sec-latest__excerpt{
  margin:8px 0 0;
  font-size:var(--fs-sm);color:var(--c-text-sub);line-height:var(--lh-body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.sec-latest__date{
  display:block;margin-top:12px;
  font-size:13px;color:var(--c-text-mute);
}

/* ========== A — 카드 3열 ========== */
.sec-latest--a .sec-latest__grid{grid-template-columns:repeat(3,1fr)}
.sec-latest--a .sec-latest__info{padding-top:18px}

/* ========== B — 이미지 오버레이 ========== */
.sec-latest--b .sec-latest__grid{grid-template-columns:repeat(3,1fr)}

.sec-latest--b .sec-latest__card{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
}
.sec-latest--b .sec-latest__thumb{border-radius:0}
.sec-latest--b .sec-latest__thumb img{aspect-ratio:3/4}

.sec-latest--b .sec-latest__thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}

.sec-latest--b .sec-latest__info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:24px;
}
.sec-latest--b .sec-latest__title,
.sec-latest--b .sec-latest__excerpt{color:#fff}
.sec-latest--b .sec-latest__card:hover .sec-latest__title{color:#fff}
.sec-latest--b .sec-latest__date{color:rgba(255,255,255,.7)}

/* ========== C — 좌우 슬라이드 ========== */

/* ========== C — 좌우 슬라이드 ========== */
/*
 * 한 화면에 --cols 장, 트랙을 밀어서 1장씩 이동한다.
 * ⚠️ 열 수는 CSS 변수 하나로만 정한다. JS 가 이 값을 읽어 이동폭을 계산한다.
 */
.sec-latest--c{--cols:3}

.sec-latest--c .sec-latest__viewport{position:relative;overflow:hidden}

.sec-latest--c .sec-latest__track{
  display:flex;
  gap:var(--gap-sm);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.sec-latest--c .sec-latest__cell{
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap-sm)) / var(--cols));
  min-width:0;
}

.sec-latest--c .sec-latest__info{padding-top:18px}

/* 슬라이드가 아닐 때(글이 적을 때)는 기존 그리드 그대로 */
.sec-latest--c .sec-latest__grid{grid-template-columns:repeat(var(--cols),1fr)}

.sec-latest__arrow{
  position:absolute;top:50%;z-index:3;
  width:44px;height:44px;
  transform:translateY(-50%);
  border:1px solid var(--c-line);border-radius:50%;
  background:var(--c-bg);
  cursor:pointer;transition:var(--tr);
}
.sec-latest__arrow::after{
  content:'';position:absolute;top:50%;left:50%;
  width:9px;height:9px;
  border-top:2px solid var(--c-text-sub);
  border-right:2px solid var(--c-text-sub);
}
.sec-latest__arrow--prev{left:-58px}
.sec-latest__arrow--prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.sec-latest__arrow--next{right:-58px}
.sec-latest__arrow--next::after{transform:translate(-70%,-50%) rotate(45deg)}
.sec-latest__arrow:hover{border-color:var(--c-primary);background:var(--c-primary)}
.sec-latest__arrow:hover::after{border-color:#fff}

/* 끝에 도달하면 흐리게. 누를 게 없다는 걸 보여준다 */
.sec-latest__arrow[disabled]{opacity:.3;pointer-events:none}

.sec-latest__dots{
  display:flex;justify-content:center;gap:8px;
  margin-top:28px;
}
.sec-latest__dots:empty{display:none}

.sec-latest__dot{
  width:8px;height:8px;padding:0;
  border:0;border-radius:50%;
  background:var(--c-line);
  cursor:pointer;transition:var(--tr);
}
.sec-latest__dot.is-active{width:24px;border-radius:100px;background:var(--c-primary)}


/* ========== D — 텍스트 리스트 ========== */
.sec-latest--d .sec-latest__grid{
  grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--c-line);
}
.sec-latest--d .sec-latest__thumb{display:none}

.sec-latest--d .sec-latest__card{
  display:flex;align-items:baseline;gap:var(--gap-sm);
  padding:20px 4px;
  border-bottom:1px solid var(--c-line);
}
.sec-latest--d .sec-latest__info{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--gap-sm);width:100%;
}
.sec-latest--d .sec-latest__title{font-size:var(--fs-body);font-weight:600;-webkit-line-clamp:1}
.sec-latest--d .sec-latest__excerpt{display:none}
.sec-latest--d .sec-latest__date{margin-top:0;flex-shrink:0}

/* ========== 반응형 ========== */
@media (max-width:1024px){
  .sec-latest--a .sec-latest__grid,
  .sec-latest--b .sec-latest__grid{grid-template-columns:repeat(2,1fr)}

  .sec-latest--c{--cols:2}

  .sec-latest__arrow--prev{left:-6px}
  .sec-latest__arrow--next{right:-6px}
  .sec-latest__arrow{width:38px;height:38px;background:rgba(255,255,255,.9)}
}

@media (max-width:768px){
  .sec-latest__head{flex-direction:column;align-items:flex-start;gap:12px}
  .sec-latest__more{padding-bottom:0}

  .sec-latest--a .sec-latest__grid,
  .sec-latest--b .sec-latest__grid{grid-template-columns:1fr}

  /* 모바일 — 1.15장. 옆이 살짝 보여야 밀 수 있다는 걸 안다 */
  .sec-latest--c{--cols:1.15}

  .sec-latest--c .sec-latest__arrow{display:none}

  .sec-latest--b .sec-latest__thumb img{aspect-ratio:4/3}

  .sec-latest--d .sec-latest__info{flex-direction:column;gap:6px}
  .sec-latest__title{font-size:var(--fs-h3)}
}
/* ========== 사진 비율 (data.ratio) — 비우면 위의 변형 기본 그대로 ========== */
.sec-latest.sec-latest--ratio-34 .sec-latest__thumb img{aspect-ratio:3/4;object-position:center 20%}
.sec-latest.sec-latest--ratio-11 .sec-latest__thumb img{aspect-ratio:1/1;object-position:center 25%}
.sec-latest.sec-latest--ratio-43 .sec-latest__thumb img{aspect-ratio:4/3}
/* 세로 사진은 한 화면에 한 장 더 — 3장이면 카드가 너무 길어진다 */
.sec-latest--c.sec-latest--ratio-34{--cols:4}
.sec-latest--c.sec-latest--ratio-34 .sec-latest__grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
@media (max-width:1024px){
  .sec-latest--c.sec-latest--ratio-34{--cols:3}
}
@media (max-width:768px){
  .sec-latest--c.sec-latest--ratio-34{--cols:2.15}
}

/* ========== E — 엇갈린 4열 갤러리 (브라우저 틀) ==========
 * 짝수 열을 아래로 내려 리듬을 만든다. 마우스를 올리면 카드가 떠오르고 화면이 살짝 위로 흐른다.
 */
.sec-latest--e .sec__head{text-align:center;display:block}
.sec-latest--e .sec-latest__more{display:none}   /* 위쪽 「더 보기」 대신 아래 버튼 */
.sec-latest__gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px 24px;
  padding-bottom:48px;
}
.sec-latest__gallery .sec-latest__shot:nth-child(4n+2),
.sec-latest__gallery .sec-latest__shot:nth-child(4n+4){transform:translateY(48px)}
.sec-latest__shot{display:flex;flex-direction:column;gap:14px;color:inherit;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sec-latest__frame{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3.3;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--c-line);
  box-shadow:0 18px 40px rgba(15,23,42,.10);
  transition:box-shadow .45s ease;
}
.sec-latest__bar{
  position:absolute;top:0;left:0;right:0;z-index:1;
  display:flex;align-items:center;gap:5px;
  height:24px;padding:0 12px;
  background:rgba(243,244,246,.95);
  border-bottom:1px solid var(--c-line);
}
.sec-latest__bar i{width:7px;height:7px;border-radius:50%;background:#d1d5db}
.sec-latest__bar i:nth-child(1){background:#ff5f57}
.sec-latest__bar i:nth-child(2){background:#febc2e}
.sec-latest__bar i:nth-child(3){background:#28c840}
.sec-latest__frame img{
  position:absolute;top:24px;left:0;
  width:100%;height:auto;min-height:calc(100% - 24px);
  object-fit:cover;object-position:top;
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.sec-latest__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px}
.sec-latest__meta strong{font-size:16px;font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-latest__meta em{
  flex:none;
  padding:4px 10px;
  font-size:12px;font-style:normal;font-weight:600;
  color:var(--c-text-sub);
  background:var(--c-bg-alt);
  border-radius:999px;
}
@media (hover:hover){
  .sec-latest__shot:hover .sec-latest__frame{box-shadow:0 28px 60px rgba(15,23,42,.18)}
  .sec-latest__shot:hover .sec-latest__frame img{transform:translateY(-12%)}
  .sec-latest__shot:hover .sec-latest__meta strong{color:var(--c-primary)}
  .sec-latest__gallery .sec-latest__shot:hover{transform:translateY(-8px)}
  .sec-latest__gallery .sec-latest__shot:nth-child(4n+2):hover,
  .sec-latest__gallery .sec-latest__shot:nth-child(4n+4):hover{transform:translateY(40px)}
}
.sec-latest__more-wrap{text-align:center;margin-top:32px}
.sec-latest__more-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 30px;
  font-weight:700;
  color:#fff;
  background:var(--c-text);
  border-radius:var(--btn-radius);
  transition:var(--tr);
}
.sec-latest__more-btn:hover{background:var(--c-primary)}

@media (max-width:1024px){
  .sec-latest__gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding-bottom:32px}
  .sec-latest__gallery .sec-latest__shot:nth-child(4n+2),
  .sec-latest__gallery .sec-latest__shot:nth-child(4n+4){transform:none}
  .sec-latest__gallery .sec-latest__shot:nth-child(2n){transform:translateY(32px)}
}
@media (max-width:640px){
  .sec-latest__gallery{gap:16px 12px}
  .sec-latest__frame{border-radius:12px}
  .sec-latest__bar{height:18px;padding:0 8px}
  .sec-latest__bar i{width:5px;height:5px}
  .sec-latest__frame img{top:18px;min-height:calc(100% - 18px)}
  .sec-latest__meta{flex-direction:column;align-items:flex-start;gap:4px}
  .sec-latest__meta strong{font-size:14px;max-width:100%}
  .sec-latest__meta em{font-size:11px;padding:3px 8px}
  .sec-latest__gallery .sec-latest__shot:nth-child(2n){transform:translateY(24px)}
}