/* ===============================
   section-title 전용 커스텀 스타일
   =============================== */

/* 1) 풀블리드 + 섹션 간 여백 제거 */
.container.section-title{
  max-width:none !important;
  padding:0 !important;
  width:100vw;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  /* 그라데이션 높이 (필요시 조절) */
  --fade-h:160px;
}
.hero{ margin-bottom:0 !important; }
.container.section-title{ margin-top:0 !important; margin-bottom:0 !important; }
.footer{ margin-top:0 !important; }

/* 2) 내부 변수 */
.container.section-title{
  --rail-w: 120px;   /* 왼쪽 기둥(버튼 레일) 너비 */
  --btn: 96px;
  --gap: 50px;
  --shadow: 0 10px 26px rgba(0,0,0,.35);
}
.container.section-title *{ box-sizing:border-box; }

/* 레이아웃: 왼쪽 레일 + 오른쪽 스테이지 */
/* ↑ 이미지가 위아래로 덜 잘리도록 전체 높이를 '약간' 키움 */
.container.section-title .app{
  position:relative;
  width:100vw;
  min-height:75vh;                 /* ← 기존 60vh → 75vh로 살짝 확대 */
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  overflow:hidden;
}

/* 왼쪽 기둥(레일): 반투명 검정 기둥 + 버튼은 그 위 */
.container.section-title .rail{
  position:relative;
  z-index:3;                     /* 이미지 위 */
  height:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:var(--gap);
  padding-top:80px;              /* 필요 시 조절 */
  background:rgba(0,0,0,0.55);
  border-right:1px solid rgba(255,255,255,0.06);
}

.container.section-title .btn{
  position:relative;
  z-index:4;                     /* 레일 배경보다 위 */
  width:var(--btn); height:var(--btn);
  border-radius:9999px; overflow:hidden;
  padding:0; border:0; background:transparent;
  display:grid; place-items:center; cursor:pointer; user-select:none;
  box-shadow:var(--shadow);
  outline:2px solid transparent; transition:transform .16s ease, outline-color .16s ease;
 top: 80px;
}
.container.section-title .btn:focus-visible{ outline-color:#5cc06f }
.container.section-title .btn:hover{ transform:translateY(-2px) }

.container.section-title .btn img{
  width:100%; height:100%; display:block;
  object-fit:contain; object-position:center; image-rendering:auto; transform:none;
}

/* Stage: 배경 이미지를 양옆으로 꽉 차게 + 위아래 약간 여유 */
/* 여유를 주되 레이아웃 안 흐트러지도록 패딩으로 살짝만 확보 */
.container.section-title .stage{
  position:relative;
  height:100%;
  background:transparent;
  overflow:hidden;
  padding-block:3vh;             /* ← 위아래 '약간' 넓힘 (2~4vh 선호) */
}

/* 배경 이미지: 좌우 꽉 채움 (상하 일부 크롭 가능) */
.container.section-title .page{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;              /* ← 양옆 꽉 차게 */
  object-position:center;
  display:block;
  filter:none;                   /* 그림자 제거 */
  z-index:1;                     /* 레일(3), 버튼(4) 아래 */
}

/* 상단 흰색 → 아래로 투명 그라데이션 오버레이 */
.container.section-title .stage::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:var(--fade-h);
  background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  z-index:2;
  pointer-events:none;
}

/* Fallback */
.container.section-title .fallback{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.08), rgba(0,0,0,.55)), #1a1a1a;
  color:#e5e5e5; font-weight:600; letter-spacing:.4px;
}
.container.section-title .fallback .box{
  padding:22px 28px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.28);
  backdrop-filter:blur(6px); box-shadow:var(--shadow);
}

/* 반응형 */
@media (max-width:900px){ .container.section-title{ --rail-w:100px; --btn:88px } }
@media (max-width:640px){
  .container.section-title{ --rail-w:84px;  --btn:80px }
  .container.section-title .app{ min-height:80vh; } /* 모바일에선 조금 더 여유 */
}