:root{
  --muted: #525252;

  /* spacing */
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 70px;

  /* image spacing (요구사항: 별도 변수) */
  --img-gap: 28px;
}

/* HERO */
.cs-hero{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
}
.cs-hero img{ width: 100%; display: block; }

.cs-title{
  margin: 0 0 var(--space-2);
  margin-bottom: 16px;
  font-size: 64px;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.cs-sub{
  font-size: 18px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}

/* SECTION padding */
.cs-section{ padding: var(--space-5) 0; }

/* Split grid: left title / right content */
.cs-split{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-5);
  align-items: start;
}

/* left column */
.cs-split h2{
  margin: 0;
  font-size: 48px;
}

/* right column text rhythm */
.cs-right p{
  margin: 0 0 var(--space-2);
  line-height: 1.7;
}

/* 이미지 full width (container 기준 가득) */
.cs-image-full{
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--img-gap);
}

.cs-image-full img{
  width: 100%;
  display: block;
}

.cs-pager{
    position:fixed;
    left:40px;
    right:40px;
    bottom:30px;

    display:flex;
    align-items:center;
    justify-content: space-between;
    padding-bottom:var(--space-4);
    font-size: 32px;

}
/* Responsive: stack title over content */
@media (max-width: 1100px){
  .cs-hero{ grid-template-columns: 1fr; gap: var(--space-3); }
  .cs-split{ grid-template-columns: 1fr; gap: var(--space-3); }
  .cs-left-empty{ display: none; }
  .cs-split h2{ font-size: 28px; }
  .cs-title{ font-size: 34px; }
}