/* ───────────────────────────────────────────────────────────
   grain.css — 재사용 가능한 필름 그레인 텍스처
   사용법:
     <link rel="stylesheet" href="grain.css">   (경로는 grain.png 위치에 맞게)
   ─────────────────────────────────────────────────────────── */

/* 1) 어디든 덮는 오버레이 — 가장 간편. <div class="grain"></div> 하나만 추가 */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none; /* 클릭 통과 */
  background-image: url("grain.png");
  background-repeat: repeat;
  background-size: 30px; /* 그레인 입자 크기 (작을수록 촘촘) */
  mix-blend-mode: overlay; /* 페이지 전체 콘텐츠에 그레인 합성 */
  opacity: 0.6; /* 강도 조절 */
}

/* 2) 단색 배경에 직접 블렌드 — body 등 요소에 .grain-bg 추가 */
.grain-bg {
  background-color: #1c1c1e; /* 원하는 배경색으로 교체 */
  background-image: url("grain.png");
  background-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 30px;
  background-attachment: fixed;
}

/* 4) 어두운 배경용 — overlay는 어두운 바닥에서 거의 안 보이므로 plain opacity 사용.
   콘텐츠 뒤(z-index:0)에 깔리며 텍스트는 안 가림. <div class="grain-soft"></div> */
.grain-soft {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("grain.png");
  background-repeat: repeat;
  background-size: 30px; /* 그레인 입자 크기 */
  opacity: 0.5;
}

/* 3) 그라디언트 위에 그레인 — 변수로 그라디언트만 바꿔 쓰기 */
.grain-gradient {
  --grain-gradient: linear-gradient(0deg, #8c8681, #01506c, #1c1c1e);
  background:
    url("grain.png"),
    var(--grain-gradient);
  background-blend-mode: overlay, normal;
  background-repeat: repeat, no-repeat;
  background-size: 30px, cover;
}