/* ============================================================
   메뉴 페이지 공통 배경 — 홈 첫 화면(HeroAlive.module.css .hero · .aurora · .blob · .grain · .fade)과 같은 값.
   그리는 곳: components/site/SiteBackdrop.tsx (홈 · 모두의 창업 · 사업계획서 도우미 제외).
   머리말은 맨 위에서 투명하므로 이 배경이 머리말 뒤로도 비친다 → 머리말 색도 홈과 같아진다.
   단위는 px · vw(rem 아님) — default.css 가 모바일에서 html font-size 를 줄여도 홈과 같은 크기로.
   ============================================================ */
/* 짜임까지 홈과 같게: 바탕(.hero) > 화면보다 큰 틀(.aurora, inset -20% -10%) > 덩어리 4개, 그리고 아래 흰 페이드.
   덩어리의 left/top/bottom % 는 이 큰 틀 기준이라, 틀을 빼면 자리와 크기 비율이 홈과 달라진다. */
.site-backdrop {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: 100svh; min-height: 700px; overflow: hidden; isolation: isolate; pointer-events: none;
  background: linear-gradient(180deg, #f4f8ff 0%, #fafcff 50%, #fff 100%);
}
.site-backdrop .sb-aurora { position: absolute; inset: -20% -10%; z-index: -1; }
.site-backdrop .sb-blob { position: absolute; border-radius: 50%; opacity: 0.6; will-change: transform; } /* blur 를 쓰지 않는다 — 홈과 같은 이유(모바일 성능) */
.site-backdrop .sb-b1 { width: 62vw; height: 62vw; max-width: 920px; max-height: 920px; left: -8%; top: -6%; background: radial-gradient(circle at 35% 35%, #bfdbfe 0%, transparent 66%); animation: sb-drift1 14s ease-in-out infinite alternate; }
.site-backdrop .sb-b2 { width: 56vw; height: 56vw; max-width: 840px; max-height: 840px; right: -14%; top: 4%; background: radial-gradient(circle at 60% 40%, #93c5fd 0%, transparent 66%); animation: sb-drift2 17s ease-in-out infinite alternate; }
.site-backdrop .sb-b3 { width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; left: 32%; bottom: -28%; background: radial-gradient(circle at 50% 50%, #dbeafe 0%, transparent 66%); animation: sb-drift3 20s ease-in-out infinite alternate; }
.site-backdrop .sb-b4 { width: 44vw; height: 44vw; max-width: 680px; max-height: 680px; left: 38%; top: -18%; background: radial-gradient(circle at 50% 50%, #e0f2fe 0%, transparent 66%); animation: sb-drift4 16s ease-in-out infinite alternate; opacity: 0.5; }
/* 그레인: 홈 히어로(.hero .grain)와 같은 정지 잡음 한 장 — 2026-10-19 히어로 W1 에 맞춤 */
.site-backdrop .sb-grain { position: absolute; inset: 0; z-index: -1; opacity: 0.16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.site-backdrop .sb-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%); }
@keyframes sb-drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, 10%) scale(1.1); } }
@keyframes sb-drift2 { from { transform: translate(0, 0) scale(1.06); } to { transform: translate(-14%, 8%) scale(0.94); } }
@keyframes sb-drift3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-10%, -12%) scale(1.1); } }
@keyframes sb-drift4 { from { transform: translate(0, 0) scale(0.95); } to { transform: translate(-18%, 14%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .site-backdrop .sb-blob { animation: none; } }

/* ── 각 페이지 맨 위에 깔린 자기 칠을 걷어 공통 배경이 보이게(공통 배경이 있을 때만) ──
   body:has(.site-backdrop) 를 붙여 특이도를 높인다 — 페이지 전용 CSS(gallery.css 등)가 이 파일보다 뒤에 와도 이긴다. */
/* 갤러리 · 템플릿: 위 연파랑 → 흰 그라데이션 */
body:has(.site-backdrop) .gallery-hero,
body:has(.site-backdrop) .project-gallery .gallery-hero { background: transparent; }
/* 템플릿 분류 탭(위에 붙는 막대): 흰 띠 대신 반투명 + 흐림 — 배경 위에서도, 붙었을 때도 읽히게 */
body:has(.site-backdrop) .template-category-tabs {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* 요금제: 페이지 전체 흰 바탕 + 위 그라데이션 */
body:has(.site-backdrop) .pv6,
body:has(.site-backdrop) .pv6 .hero { background: transparent; }
/* 공지: 위 회청 그라데이션 + 목록 흰 바탕 */
body:has(.site-backdrop) .page-hero,
body:has(.site-backdrop) .notice-section { background: transparent; }
/* 블로그: 연파랑 단색(#eef4ff) 대신 홈처럼 공통 배경 → 흰 바탕 — 팀장님 「홈 배경색이랑 같이」 */
body:has(.site-backdrop) .blog-page { background: transparent; }
/* 포트폴리오: 페이지 흰 바탕 + 위 연파랑 그라데이션 → 공통 배경. 상세의 붙는 탭은 템플릿 분류 탭처럼 반투명 + 흐림 */
body:has(.site-backdrop) .portfolio-page,
body:has(.site-backdrop) .portfolio-page .pf-hero { background: transparent; }
body:has(.site-backdrop) .portfolio-page .pf-tabs {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}