/* 움직이는 배경 시안 (2026-09-29) — 캔버스는 콘텐츠 뒤(z-index:-1), 섹션은 반투명으로 비침 */
#bgfx{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block; }
body.bgfx{ background: var(--bg); }
body.bgfx .hero{ background-image:none !important; }
body.bgfx .hero::after{ background: linear-gradient(90deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.3) 45%, rgba(11,12,14,0) 68%), linear-gradient(180deg, rgba(11,12,14,0) 70%, rgba(11,12,14,.55) 100%); }
body.bgfx .page-hero{ background-image:none !important; }
body.bgfx .page-hero::after{ background: linear-gradient(90deg, rgba(11,12,14,.7), rgba(11,12,14,.1)); }
body.bgfx section.alt{ background: rgba(17,19,24,.62); }
body.bgfx .card, body.bgfx .nr-empty, body.bgfx .org-box{ background: rgba(22,24,29,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.bgfx footer{ background: rgba(17,19,24,.82); }
body.bgfx header.site-header{ background: rgba(11,12,14,.7); }
@media (max-width: 860px){
  body.bgfx .hero::after{ background: linear-gradient(90deg, rgba(11,12,14,.62) 0%, rgba(11,12,14,.28) 70%, rgba(11,12,14,.1) 100%); }
}
/* 시안 표시 (미리보기 전용) */
.draft-badge{ position:fixed; left:12px; bottom:12px; z-index:2000; display:flex; flex-wrap:wrap; gap:6px; font:600 12px/1 Inter,'Noto Sans KR',sans-serif; }
.draft-badge a{ white-space:nowrap; }
.draft-badge a{ padding:9px 12px; border-radius:999px; border:1px solid rgba(201,162,75,.5); background:rgba(11,12,14,.85); color:#e4c581; }
.draft-badge a.on{ background:#c9a24b; color:#111; }

/* ---------- 시안 C: 기존 배경(사진) 그대로 + 위에 움직이는 요소 ---------- */
body.bgfx-c #bgfx{ z-index:1; }                     /* 사진 위, 글자 아래 */
body.bgfx-c section > .container, body.bgfx-c footer > .container{ position:relative; z-index:2; }
body.bgfx-c .hero{ background-size: 112% auto; animation: yyKen 28s ease-in-out infinite alternate; }
@keyframes yyKen{ from{ background-position: 50% 42%; } to{ background-position: 56% 58%; } }
@media (max-width: 860px){ body.bgfx-c .hero{ background-size: cover; animation: none; } }
/* 스크롤하면 카드·제목이 살짝 떠오르며 나타남 */
body.bgfx-c .reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
body.bgfx-c .reveal.in{ opacity:1; transform:none; }
/* 금색 테두리 빛이 카드 가장자리를 도는 효과 (마우스 올릴 때) */
body.bgfx-c .card{ position:relative; }
body.bgfx-c .card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(228,197,129,.9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .3s; }
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@media (hover:hover){ body.bgfx-c .card:hover::before{ opacity:1; animation: yySpin 2.4s linear infinite; } }
@keyframes yySpin{ to{ --ang: 360deg; } }
@media (prefers-reduced-motion: reduce){ body.bgfx-c .hero{ animation:none; } body.bgfx-c .reveal{ opacity:1; transform:none; } }

/* 휴대폰(9/29 "깔끔하게"): 첫 화면 글자는 위로, 아래쪽에 지도 전용 띠(여백)를 둔다 — 지도는 이 띠 안에만 그려짐 */
@media (max-width: 860px){
  body.bgfx .hero{ min-height:0; align-items:flex-start; padding-bottom: 440px; }
  body.bgfx .page-hero{ padding-bottom: 200px; }
}