/* 첫 화면 배너 한 장(banner-view.js): 그림을 칸에 꽉 채우고, 문구는 9칸 중 한 곳에. 글자 크기는 배너 폭의 %(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; inset: 0; display: flex; padding: 5cqw 6cqw; pointer-events: none; font-size: calc(var(--cs, 4) * 1cqw); }
.bv-copy p { margin: 0; max-width: 88%; line-height: 1.22; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.bv-tl, .bv-tc, .bv-tr { align-items: flex-start; }
.bv-ml, .bv-mc, .bv-mr { align-items: center; }
.bv-bl, .bv-bc, .bv-br { align-items: flex-end; }
.bv-tl, .bv-ml, .bv-bl { justify-content: flex-start; text-align: left; }
.bv-tc, .bv-mc, .bv-bc { justify-content: center; text-align: center; }
.bv-tr, .bv-mr, .bv-br { justify-content: flex-end; text-align: right; }
.bv-light { color: #fff; text-shadow: 0 1px 0.6em rgba(0, 0, 0, .28); }
.bv-dark { color: #1b1b19; }
.bv-sans p { font-family: var(--sans); letter-spacing: -.01em; }
.bv-serif p { font-family: var(--serif); }
.bv.is-narrow .bv-copy { font-size: calc(var(--cs, 4) * 1.5cqw); }

/* 위에 얹는 얇은 점선 바둑판: 한 칸은 늘 정사각(가로·세로 모두 배너 폭의 5% = 2400px 배너에서 120px), 가운데 기준.
   세로줄(::before)·가로줄(::after)을 따로 그리고 줄 방향으로 점 무늬 가림막(mask)을 씌워 점선으로. 휴대폰은 그림이 1.5배라 칸도 1.5배 */
.bv-grid { --step: 5cqw; --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: 7.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);
}