/* ==========================================================================
   gradient-mesh.css — 브랜드의 시그니처 배경.
   페이지 상단 1/3 을 크림 → 셔벗오렌지 → 라벤더 → 인디고 → 루비핑크로 가로 워시.
   플랫 CSS 그라디언트가 아니라 유기적인 블롭 SVG 를 겹쳐 만든다(= 깊이 시스템).
   ========================================================================== */

.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-canvas);
}

/* 상단 1/3 을 덮는 메시 레이어 */
.mesh__canvas {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(420px, 46vh, 640px);
  z-index: -1;
  pointer-events: none;
}

.mesh__canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 메시 하단을 화이트 캔버스로 자연스럽게 녹인다 */
.mesh__canvas::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--c-canvas) 92%);
}

/* 메시 위에 올라가는 콘텐츠 */
.mesh__content {
  position: relative;
  z-index: 1;
}

/* 딥네이비 밴드 위에 쓰는 축소판 메시 (섹션 액센트) */
.mesh--inset .mesh__canvas {
  height: 100%;
  opacity: 0.35;
}

.mesh--inset .mesh__canvas::after {
  display: none;
}

/* 모바일에서는 메시를 없애지 않고 높이만 줄여 워시를 유지한다 */
@media (max-width: 767px) {
  .mesh__canvas {
    height: clamp(320px, 42vh, 420px);
  }
}