/* 첫 화면 배너 한 장(banner-view.js): 그림을 칸에 꽉 채우고, 문구 글상자는 왼쪽 위 자리(left·top %)에. 글자 크기는 배너 폭의 %(cqw)라
   관리자 조정 창의 작은 미리보기와 실제 화면이 같은 비율로 보인다. 휴대폰(좁은 칸)은 1.5배 */
.bv { position: relative; overflow: hidden; container-type: inline-size; }
.bv > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bv-copy { position: absolute; pointer-events: none; font-size: calc(var(--cs, 4) * 1cqw); }
.bv-copy p { margin: 0; line-height: 1.22; font-weight: var(--cw, 500); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.bv-light { color: #fff; text-shadow: 0 1px 0.6em rgba(0, 0, 0, .28); }
.bv-dark { color: #1b1b19; }
/* 글꼴 셋(2026-10-08 사용자 지정): 본명조(Noto Serif KR, 구글 글꼴) · 프리텐다드 · 페이퍼로지(vendor) */
.bv-f-myeongjo p { font-family: 'Noto Serif KR', var(--serif); }
.bv-f-pretendard p { font-family: 'Pretendard Variable', Pretendard, var(--sans); letter-spacing: -.01em; }
.bv-f-paperlogy p { font-family: 'Paperlogy', var(--sans); letter-spacing: -.01em; }
.bv.is-narrow .bv-copy { font-size: calc(var(--cs, 4) * 1.5cqw); }

/* 위에 얹는 얇은 점선 바둑판: 한 칸은 늘 정사각(가로·세로 모두 배너 폭의 --gs %, 기본 1.1 = 컴퓨터 화면에서 약 15px), 가운데 기준.
   세로줄(::before)·가로줄(::after)을 따로 그리고 줄 방향으로 점 무늬 가림막(mask)을 씌워 점선으로. 휴대폰은 그림이 1.5배라 칸도 1.5배 */
.bv-grid { --step: calc(var(--gs, 1.1) * 1cqw); --w: 1px; --gc: #fff; position: absolute; inset: 0; pointer-events: none; opacity: .45; }
.bv-grid-dark { --gc: #000; opacity: .28; }
.bv.is-narrow .bv-grid { --step: calc(var(--gs, 1.1) * 1.5cqw); }
.bv-grid::before, .bv-grid::after { content: ''; position: absolute; inset: 0; background-position: center; }
.bv-grid::before {
  background-image: linear-gradient(to right, var(--gc) var(--w), transparent var(--w)); background-size: var(--step) 100%;
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 var(--w), transparent var(--w) 3px); mask: repeating-linear-gradient(to bottom, #000 0 var(--w), transparent var(--w) 3px);
}
.bv-grid::after {
  background-image: linear-gradient(to bottom, var(--gc) var(--w), transparent var(--w)); background-size: 100% var(--step);
  -webkit-mask: repeating-linear-gradient(to right, #000 0 var(--w), transparent var(--w) 3px); mask: repeating-linear-gradient(to right, #000 0 var(--w), transparent var(--w) 3px);
}