.content-section {
  padding: var(--common-section-padding);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-section h1 {
  text-align: center;
  font-family: "GMarketSans-Light";
  font-size: var(--common-section-h1-font-size);
  color: #ffffff;
}

.row {
  display: flex;
}

.col {
  flex: 1;
}

.row-spacebetween {
  display: flex;
  justify-content: space-between; /* 양 끝으로 */
  align-items: center;
}

.fade-top {
  display: block;
  width: 100%;
  height: auto;

  /* 조절 변수 */
  --cut: 0px; /* 완전 투명 구간 높이 */
  --fade: var(
    --header-banner-image-fade
  ); /* 투명→불투명 전환을 끝내는 총 길이 (짧게!) */

  /* Safari와 표준 둘 다 */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #0000 0,
    #0000 calc(var(--cut)),
    rgba(0, 0, 0, 0.2) calc(var(--cut) + var(--fade) * 0.25),
    rgba(0, 0, 0, 0.55) calc(var(--cut) + var(--fade) * 0.55),
    rgba(0, 0, 0, 0.85) calc(var(--cut) + var(--fade) * 0.85),
    #fff calc(var(--cut) + var(--fade))
  );
  mask-image: linear-gradient(
    to bottom,
    #0000 0,
    #0000 calc(var(--cut)),
    rgba(0, 0, 0, 0.2) calc(var(--cut) + var(--fade) * 0.25),
    rgba(0, 0, 0, 0.55) calc(var(--cut) + var(--fade) * 0.55),
    rgba(0, 0, 0, 0.85) calc(var(--cut) + var(--fade) * 0.85),
    #fff calc(var(--cut) + var(--fade))
  );
}