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

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

.sec-gallery__item{
  display:block;width:100%;padding:0;
  border:0;background:none;
  text-align:left;text-decoration:none;color:inherit;
  cursor:default;
}
a.sec-gallery__item,
button.sec-gallery__item{cursor:pointer}

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

/* 확대 아이콘 — 라이트박스일 때만 */
button.sec-gallery__item .sec-gallery__thumb::after{
  content:'';
  position:absolute;top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%) scale(.85);
  border-radius:50%;
  background:rgba(255,255,255,.92) center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16 16 5 5M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transition:var(--tr);
}
button.sec-gallery__item:hover .sec-gallery__thumb::after{opacity:1;transform:translate(-50%,-50%) scale(1)}

.sec-gallery__caption{
  display:block;margin-top:12px;
  font-size:var(--fs-sm);color:var(--c-text-sub);line-height:1.5;
  text-align:center;
}

/* ========== A — 격자 3열 ========== */
.sec-gallery--a .sec-gallery__grid{grid-template-columns:repeat(3,1fr)}

/* ========== B — 격자 4열 ========== */
.sec-gallery--b .sec-gallery__grid{grid-template-columns:repeat(4,1fr)}
.sec-gallery--b .sec-gallery__thumb img{aspect-ratio:1/1}

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

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

.sec-gallery--c .sec-gallery__viewport{position:relative;overflow:hidden}

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

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

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

.sec-gallery__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-gallery__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-gallery__arrow--prev{left:-58px}
.sec-gallery__arrow--prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.sec-gallery__arrow--next{right:-58px}
.sec-gallery__arrow--next::after{transform:translate(-70%,-50%) rotate(45deg)}
.sec-gallery__arrow:hover{border-color:var(--c-primary);background:var(--c-primary)}
.sec-gallery__arrow:hover::after{border-color:#fff}

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

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

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


/* ========== D — 벽돌형 ========== */
.sec-gallery--d .sec-gallery__grid{
  display:block;
  column-count:3;column-gap:var(--gap-sm);
}
.sec-gallery--d .sec-gallery__item{
  break-inside:avoid;
  margin-bottom:var(--gap-sm);
}
.sec-gallery--d .sec-gallery__thumb img{aspect-ratio:auto}

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

  .sec-gallery--c{--cols:3}

  .sec-gallery--d .sec-gallery__grid{column-count:2}

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

@media (max-width:768px){
  .sec-gallery--a .sec-gallery__grid{grid-template-columns:1fr}
  .sec-gallery--b .sec-gallery__grid{grid-template-columns:repeat(2,1fr)}
  .sec-gallery--d .sec-gallery__grid{column-count:1}

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

  .sec-gallery--c .sec-gallery__arrow{display:none}
}