/* [v2402] 데모 식별 — 4px 테두리 + 세로 라벨. 롤백: nginx sub_filter 에서 이 CSS 링크만 제거 */
html::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000;
  border:4px solid rgba(240,185,11,.85);
}
html::after{
  content:"DEMO MODE";position:fixed;left:0;top:50%;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  pointer-events:none;z-index:2147483001;
  background:rgba(240,185,11,.92);color:#0B0E11;
  font:700 11px/1 "Inter",system-ui,sans-serif;letter-spacing:.18em;
  padding:12px 4px;border-radius:0 4px 4px 0;
}
@media (max-width:900px){ html::after{ display:none } html::before{ border-width:3px } }

/* [v2623] 전 페이지 중앙 DEMO 워터마크 — 연하게, 조작 무간섭 */
body::after {
  content: "DEMO";
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17vw;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, currentColor 5%, transparent);
  pointer-events: none;
  z-index: 5;
  user-select: none;
  white-space: nowrap;
}


/* [v2907] 모바일 하단 맞춤(html.bc-fit)이 body::after를 숨겨 가운데 DEMO가 사라지던 것 복구 — 워터마크는 fixed라 하단 여백과 무관 */
html.bc-fit body::after { display: block !important; }

/* [v2908] 폰 폭에서 가운데 DEMO 한 단계 진하게(5% -> 8%, 다크·라이트 공통) — PC는 그대로 */
@media (max-width: 900px) { body::after { color: color-mix(in srgb, currentColor 8%, transparent) !important; } }

/* [v2909] 가운데 DEMO 10% — PC·폰, 다크·라이트 공통(PC 홈 포함) */
html body::after, html body[class]::after { color: color-mix(in srgb, currentColor 10%, transparent) !important; }

/* [v2910] PC 하단 포지션 칸 D E M O (스크린샷 악용 방지) — 칸 위에 연하게, 클릭 무간섭 */
.positions-section { position: relative; }
.positions-section::after { content: "DEMO"; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; text-indent: 1.6em; font-size: clamp(56px, 5.5vw, 110px); font-weight: 800; letter-spacing: 1.6em; line-height: 1; white-space: nowrap; color: color-mix(in srgb, currentColor 10%, transparent); pointer-events: none; user-select: none; z-index: 6; }

/* [v2916] 모바일 — 스팟 주문창(.bc-op)이 열리면 가운데 DEMO를 주문창 위로, 퓨처 포지션 목록·스팟 주문창 하단 목록에 D E M O 반복 띠 (스크린샷 악용 방지, 클릭 무간섭) */
body:has(.bc-op.on)::after { z-index: 101 !important; pointer-events: none !important; }
@media (max-width: 900px) {
  #posList, .bc-pos-body { position: relative; }
  #posList::after, .bc-pos-body::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background-color: color-mix(in srgb, currentColor 10%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260' viewBox='0 0 400 260'%3E%3Ctext x='219' y='152' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='64' font-weight='800' letter-spacing='38'%3EDEMO%3C/text%3E%3C/svg%3E") center / 100% 260px repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='260' viewBox='0 0 400 260'%3E%3Ctext x='219' y='152' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='64' font-weight='800' letter-spacing='38'%3EDEMO%3C/text%3E%3C/svg%3E") center / 100% 260px repeat-y; }
}