:root{
  --stage-w: 1920px;
  --stage-h: 1046px;
  --label-color: #111;
  --content-shift: -20px;

  --grid-size: 30px;
  --grid-weight: 1px;
  --grid-color: #ccc;
}

/* 컨테이너가 주는 좌우 패딩/최대폭을 제거 */
.container.section-title {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  max-width: none;   /* 필요 시 */
  width: 100%;
}

.section-title {
  margin-top: 0;
  padding-top: 0;
  margin: 0;
  padding-bottom: 0;
}

.stage {
  height: 400px;

  /* 풀블리드 핵심 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* 정렬/여백 관련 */
  position: relative;
  overflow: hidden;

  /* 배경 */
  background-color: #fff;
  background-image:
    repeating-linear-gradient(0deg,
      var(--grid-color) 0 var(--grid-weight),
      transparent var(--grid-weight) var(--grid-size)),
    repeating-linear-gradient(90deg,
      var(--grid-color) 0 var(--grid-weight),
      transparent var(--grid-weight) var(--grid-size));
  background-repeat: repeat;
  background-attachment: local;
  /* background-position: -10px 0;  ← 이제 불필요 */
}


html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.section-title { margin: 0; padding: 0; }



.row {
  display: grid;
  grid-template-columns: repeat(3, auto);  /* 캐릭터 크기에 딱 맞게 */
  justify-content: center;                 /* 가운데 정렬 */
  align-content: center;
  gap: 200px;                               /* 간격 최소화 */
  padding: 0;
  transform: translateY(var(--content-shift));
}



.character{
  position: relative;
  width: 320px;
  height: 420px;
  display: grid;
  grid-template-rows: 1fr auto;
  text-decoration: none;
  user-select: none;

  --char-scale: 1;
  --char-shift: 0px;
}

.spriteWrap{
  position: relative;
  width: 100%;
  height: 360px;
  display: grid;
  place-items: end center;
  transform-origin: bottom center;
  transition: transform .25s ease;
  transform: translateY(var(--char-shift)) scale(var(--char-scale));
}

.sprite{ width:100%; height:100%; object-fit: contain; }

.character:hover .spriteWrap{
  transform: translateY(var(--char-shift)) scale(calc(var(--char-scale) * 1.06));
}

.label{
  text-align: center;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--label-color);
  margin-top: 6px;
  font-size: 16px;
}

.fx-pop .spriteWrap{
  transition: transform .25s ease, filter .25s ease;
}
.fx-pop:hover .spriteWrap{
  filter: saturate(1.15) brightness(1.05);
}

/* 캐릭터별 위치 */
.character {
  width: 250px;
  height: 320px;
}

.c1{ --char-scale: 0.6; --char-shift: -70px; }
.c2{ --char-scale: 0.8; --char-shift: -20px; }
.c3{ --char-scale: 0.8; --char-shift: -20px; }