/* ==========================================================================================
 * 배너 배치·등장효과			[2026-09-04 신설]
 * ==========================================================================================
 * ⚠ 이 파일은 **쇼핑몰 화면과 관리자 미리보기가 같이 씁니다.**
 *   그래서 관리자에서 본 미리보기가 실제 화면과 어긋나지 않습니다.
 *   한쪽만 고치는 일이 없도록, 배너 모양에 관한 CSS 는 전부 여기에 모읍니다.
 *     쇼핑몰  : theme/shop/dreamup/layout/header.php 에서 link
 *     관리자  : theme/admin/shop/banner/{lists,write,edit}.php 에서 link
 *
 * 구조 (theme/common/banner_item.php 가 그리는 모양)
 *
 *   .bnl                      배너 한 장. 이 상자의 **폭**이 모든 크기의 기준입니다
 *    ├ .bnl__bg               배경 그림. 이 그림이 배너 높이를 만듭니다(크기 '배경 그대로'일 때)
 *    ├ .bnl__scrim            글자 뒤 어둡게 (클래스 설정)
 *    ├ .bnl__cover            배너 전체를 누르는 투명 링크
 *    └ .bnl__layer--{자리}     조각 하나마다 한 겹. 9칸 중 한 곳에 붙습니다
 *        └ .bnl__item         실제 이미지/문구. 여기에 크기·미세조정·등장효과가 걸립니다
 *
 * ⚠ 크기 단위는 **cqw** (배너 상자 폭의 1%) 입니다. vw(화면 폭)가 아닙니다.
 *   최상단배너는 화면 폭 전체지만 중간배너는 컨테이너 안(약 60%)이라, vw 로 잡으면
 *   같은 값이 두 자리에서 다르게 보입니다. cqw 로 잡으면 **배너 대비** 비율이 같습니다.
 *   cqw 를 모르는 옛 브라우저를 위해 바로 앞줄에 vw 를 함께 적어 둡니다(폭 전체 배너 기준).
 * ======================================================================================== */

.bnl {
	position: relative;
	container-type: inline-size;	/* 아래 cqw 의 기준이 됩니다 */
	overflow: hidden;
	line-height: 0;					/* 인라인 이미지 아래 빈 줄 제거 */

	/**
	 * 조각 크기 곱셈값			[2026-09-04 휴대폰 대응]
	 * 조각의 크기는 인라인 style 로 들어오는데, 미디어쿼리로는 그걸 못 이깁니다.
	 * 그래서 인라인 쪽을 calc(var(--bnl-tscale) * 2cqw) 처럼 적고, 여기서 곱셈값만 바꿉니다.
	 * PC 는 1 (원래 크기). 휴대폰에서 .bnl--mbig 가 이 값을 키웁니다.
	 */
	--bnl-tscale: 1;				/* 글자 */
	--bnl-iscale: 1;				/* 이미지 */
}

/* 배경 그림. width:100% + height:auto 라 **그림의 원래 비율이 배너 높이를 정합니다** */
.bnl__bg {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;
}

/* 크기를 '직접 지정'했을 때 : 높이를 인라인 style 로 받고 배경은 잘라 채웁니다 */
.bnl--fix {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.bnl--fix .bnl__bg {
	display: none;					/* 높이를 배경 그림이 아니라 설정값이 정합니다 */
}

/* ------------------------------------------------------------------------------------------
 * 글자 뒤 어둡게 (클래스 설정 bc_scrim)
 * -------------------------------------------------------------------------------------------
 * 밝은 배경에 흰 글씨를 올리면 안 보입니다. 글자가 놓인 쪽만 남색으로 눌러 줍니다.
 * 테마의 .page-header:before 가 쓰는 것과 같은 방식입니다.
 * ---------------------------------------------------------------------------------------- */
.bnl__scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.bnl__scrim--left {
	background: linear-gradient(90deg,
				rgba(4, 24, 63, 0.88) 0%,
				rgba(4, 24, 63, 0.80) 40%,
				rgba(4, 24, 63, 0) 62%);
}

.bnl__scrim--right {
	background: linear-gradient(270deg,
				rgba(4, 24, 63, 0.88) 0%,
				rgba(4, 24, 63, 0.80) 40%,
				rgba(4, 24, 63, 0) 62%);
}

.bnl__scrim--full {
	background: rgba(4, 24, 63, 0.55);
}

/* 배너 전체를 누를 수 있게 하는 투명 링크. 조각(z-index 3)보다 아래에 깔립니다 */
.bnl__cover {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: block;
}

/* ------------------------------------------------------------------------------------------
 * 조각 한 겹 = 9칸 중 한 자리
 * -------------------------------------------------------------------------------------------
 * 겹 자체는 배너를 꽉 덮고, flex 정렬로 조각을 9칸 중 한 곳에 붙입니다.
 * 안쪽 여백(4% 5%)은 조각이 배너 가장자리에 딱 붙지 않게 하는 안전선입니다.
 * → 조각의 크기(%)·미세조정(%)은 이 **안쪽 자리** 기준입니다.
 *
 * pointer-events:none 이라 조각 위를 눌러도 배너 링크(.bnl__cover)가 눌립니다.
 * 조각에 자기 링크가 있으면 그 <a> 만 다시 클릭을 켭니다.
 * ---------------------------------------------------------------------------------------- */
.bnl__layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	padding: 4% 5%;
	pointer-events: none;
}

/* 9칸 : l/m/r = 왼쪽·가운데·오른쪽,  t/c/b = 위·가운데·아래 */
.bnl__layer--lt { justify-content: flex-start;  align-items: flex-start; }
.bnl__layer--mt { justify-content: center;      align-items: flex-start; }
.bnl__layer--rt { justify-content: flex-end;    align-items: flex-start; }
.bnl__layer--lc { justify-content: flex-start;  align-items: center; }
.bnl__layer--mc { justify-content: center;      align-items: center; }
.bnl__layer--rc { justify-content: flex-end;    align-items: center; }
.bnl__layer--lb { justify-content: flex-start;  align-items: flex-end; }
.bnl__layer--mb { justify-content: center;      align-items: flex-end; }
.bnl__layer--rb { justify-content: flex-end;    align-items: flex-end; }

/**
 * 조각 본체
 * left/top 으로 미세조정합니다. position:relative 라 **자리만 밀고 배치는 안 흔듭니다.**
 * (margin 으로 밀면 flex 정렬과 싸워서 아래·오른쪽 붙임일 때 방향이 뒤집힙니다)
 */
.bnl__item {
	position: relative;
	max-width: 100%;
	line-height: 1.2;
}

.bnl__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* 조각에 자기 링크가 걸린 경우에만 클릭을 되살립니다 */
a.bnl__item,
.bnl__item a {
	pointer-events: auto;
}

/* ------------------------------------------------------------------------------------------
 * 문구 조각
 * -------------------------------------------------------------------------------------------
 * 글자크기는 인라인 style 로 들어옵니다(조각마다 다르므로).
 * 줄바꿈을 막는 이유 : 크기가 배너 대비 비율이라 한 번 들어가면 어느 화면에서도 들어갑니다.
 * 반대로 줄바꿈을 허용하면 좁은 화면에서만 두 줄이 되어 배너 밖으로 넘칩니다.
 * ---------------------------------------------------------------------------------------- */
.bnl__text {
	margin: 0;
	white-space: nowrap;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/**
 * 붓글씨체
 * layout/header.php 의 구글폰트 링크로 이미 받아오는 폰트입니다(Nanum Brush Script).
 * ⚠ 굵기가 400 하나뿐이라 굵게 주면 브라우저가 가짜 볼드를 그려 획이 뭉개집니다.
 */
.bnl__text--script {
	font-family: 'Nanum Brush Script', cursive;
	font-weight: 400;
	line-height: 1.35;			/* 붓글씨는 위아래로 획이 뻗어서 여유를 줍니다 */
}

/* ------------------------------------------------------------------------------------------
 * 조각을 아직 안 만든 배너 (예전 방식)
 * -------------------------------------------------------------------------------------------
 * 배너관리의 '배너 텍스트삽입'(에디터, bn_meno) 글과 '이미지' 한 장을 그립니다.
 * 2026-09-04 오전에 손으로 만들었던 최상단배너 모양을 그대로 옮긴 것입니다.
 *   문단 하나 = 한 줄. 마지막 줄만 금색 붓글씨, 그 위는 흰색 큰 글씨.
 * 조각을 하나라도 만들면 이 블록은 안 쓰입니다.
 *
 * ⚠ 태그를 p 로 못 박지 않은 이유 - 에디터에서 'Heading' 을 고르면 <h2>/<h3> 로 저장됩니다.
 * ---------------------------------------------------------------------------------------- */
.bnl__legacy-text {
	max-width: 58%;
	line-height: 1.18;
}

.bnl__legacy-text > * {
	margin: 0;
	color: #FFFFFF;
	font-size: 2.8vw;
	font-size: calc(var(--bnl-tscale, 1) * 2.8cqw);
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	/* 제자리에서 천천히 떠오르기. 줄마다 조금씩 늦게 시작합니다 */
	animation: bnlInplace 1.4s ease-out both;
}

.bnl__legacy-text > *:nth-child(1)   { animation-delay: 0.10s; }
.bnl__legacy-text > *:nth-child(2)   { animation-delay: 0.40s; }
.bnl__legacy-text > *:nth-child(3)   { animation-delay: 0.70s; }
.bnl__legacy-text > *:nth-child(n+4) { animation-delay: 1.00s; }

/* 마지막 줄 = 부제. 한 줄만 있으면 그건 제목이므로 흰 큰 글씨 그대로 둡니다 */
.bnl__legacy-text > *:not(:only-child):last-child {
	margin-top: 0.35em;
	color: #E0A830;
	font-family: 'Nanum Brush Script', cursive;
	font-size: 2.3vw;
	font-size: calc(var(--bnl-tscale, 1) * 2.3cqw);
	font-weight: 400;
	line-height: 1.35;
}

/**
 * 오른쪽 그림
 * ⚠ 너비가 아니라 **높이**로 크기를 잡습니다. 배너 높이의 92% 에 맞추고 너비는 따라옵니다.
 *   그래야 배경 그림을 다른 비율로 바꿔도 그림이 배너 밖으로 넘치지 않습니다.
 */
.bnl__legacy-img {
	width: auto;
	height: 100%;			/* 겹의 안쪽 자리(위아래 4% 여백을 뺀 만큼) 를 꽉 채웁니다 */
}

.bnl__legacy-img img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

/* ==========================================================================================
 * 등장효과			운영자가 고른 6가지
 * ==========================================================================================
 * wow.js(animate.css)를 쓰지 않는 이유 - 같은 이유가 shop.css 의 .dug-hero-appear 주석에도
 * 적혀 있습니다.
 *   1) wow 는 스크립트가 늦거나 막히면 visibility:hidden 이 남아 **아예 안 보입니다.**
 *      배너는 화면 맨 위라 그 위험을 질 수 없습니다.
 *   2) 0.5~1초로 짧아 "천천히"가 표현되지 않습니다.
 * 그래서 순수 CSS keyframes 로 만듭니다. 지연(초)은 인라인 style 로 조각마다 들어옵니다.
 * ======================================================================================== */
.bnl-anim {
	animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	animation-fill-mode: both;		/* 끝난 뒤 보이는 상태로 남습니다 */
}

/* 제자리에서 슬라이드 - 자리를 안 옮기고 서서히 나타납니다 */
.bnl-anim--inplace { animation-name: bnlInplace; }

/* 위에서 아래로 나타나기 */
.bnl-anim--down    { animation-name: bnlDown; }

/* 아래에서 위로 나타나기 */
.bnl-anim--up      { animation-name: bnlUp; }

/* 오른쪽에서 왼쪽으로 나타나기 */
.bnl-anim--left    { animation-name: bnlLeft; }

/* 왼쪽에서 오른쪽으로 나타나기 */
.bnl-anim--right   { animation-name: bnlRight; }

/* '바로 보여주기'는 애니메이션 자체를 안 붙입니다(클래스가 안 나갑니다) */

/**
 * 무한반복			[2026-09-04 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 한 번 나타나고 마는 대신 계속 되풀이합니다.
 *   alternate : 갔다가 **온 길로 되돌아옵니다**. 이게 없으면 끝나는 순간 처음 자리로
 *               탁 튀어서 끊겨 보입니다(투명도도 1 → 0 으로 뚝 떨어집니다).
 *   2.4s      : 한 번짜리(1.2s)보다 느리게 둡니다. 계속 도는 것이라 빠르면 산만합니다.
 * 되풀이 속도를 바꾸려면 아래 duration 만 고치면 됩니다.
 */
.bnl-anim--loop {
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 2.4s;
}

@keyframes bnlInplace { from { opacity: 0; }                             to { opacity: 1; } }
@keyframes bnlDown    { from { opacity: 0; transform: translateY(-14%); } to { opacity: 1; transform: none; } }
@keyframes bnlUp      { from { opacity: 0; transform: translateY(14%); }  to { opacity: 1; transform: none; } }
@keyframes bnlLeft    { from { opacity: 0; transform: translateX(14%); }  to { opacity: 1; transform: none; } }
@keyframes bnlRight   { from { opacity: 0; transform: translateX(-14%); } to { opacity: 1; transform: none; } }

/* 움직임을 줄이도록 설정한 기기에서는 그냥 바로 보여줍니다 */
@media (prefers-reduced-motion: reduce) {
	.bnl-anim { animation: none; }
}

/* ------------------------------------------------------------------------------------------
 * 휴대폰에서 크게 보이기			[2026-09-04 운영자 요청]
 * -------------------------------------------------------------------------------------------
 * 문제 : 2400x320 처럼 납작한 배너는 휴대폰(폭 390px)에서 높이가 52px 밖에 안 됩니다.
 *        크기를 배너 비율로 잡아 두었으니 글자도 같이 줄어 7~8px 이 되어 안 읽힙니다.
 *
 * 고침 : 클래스 설정에서 '크게 보이기'를 고르면 휴대폰에서만
 *        ① 배너를 3:1 로 **높게 잘라** 자리를 벌리고(배경은 가운데 기준 crop)
 *        ② 글자 2.6배 · 이미지 1.6배로 키웁니다.
 *
 * ⚠ 3:1 로 정한 이유 - 자를수록 배경 그림의 **좌우가 많이 잘려 나갑니다.**
 *   7.5:1 배경을 2.2:1 로 자르면 가운데 29% 만 남아 왼쪽 로고·오른쪽 제품이 다 잘립니다.
 *   3:1 이면 40% 가 남고, 원본이 5:1 이면 60% 가 남습니다.
 *   **원본 비율이 4~5:1 에 가까울수록 덜 잘립니다.** 배너를 새로 만들 때 참고하세요.
 *
 * '그대로'로 두면 PC 와 똑같은 비율을 유지합니다(예전 동작).
 * ------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {

	.bnl--mbig {
		aspect-ratio: 3 / 1;
		--bnl-tscale: 2.6;
		--bnl-iscale: 1.6;
	}

	/* 배경을 칸에 꽉 채우고 넘치는 부분은 잘라냅니다 */
	.bnl--mbig .bnl__bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

/* ==========================================================================================
 * 특수효과			[2026-09-04 운영자 요청]
 * ==========================================================================================
 * '등장방식'과 **따로** 겁니다. 둘을 같이 쓸 수 있습니다.
 *   등장방식 → 바깥칸(.bnl__item) : 자리로 들어오는 움직임 (한 번)
 *   특수효과 → 안쪽칸(.bnl__fx)   : 그 자리에서 부리는 재주
 *
 * ⚠ 왜 칸을 두 겹으로 나눴는가
 *   둘 다 transform 을 씁니다. 한 칸에 애니메이션 두 개를 걸면 나중 것이 앞 것을 덮어써서
 *   "아래에서 올라오면서 커졌다 작아졌다" 같은 조합이 안 됩니다. 겹을 나누면 곱해집니다.
 * ------------------------------------------------------------------------------------------
 * 글자   blink 깜빡임 · typing 타이핑 · wave 물결모양 · pulse 커졌다 작아졌다
 * 이미지 zoomout 커진 상태에서 작아지기 · zoomin 작아진 상태에서 커지기
 * ======================================================================================== */
.bnl__fx {
	display: inline-block;
}

/* 이미지용 - 칸을 꽉 채워야 하므로 블록으로 */
.bnl__fx--img {
	display: block;
}

.bnl__fx--img img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── 글자 ────────────────────────────────────────────────────────────────────────────── */

/* 깜빡임 : 켜졌다 꺼졌다. steps(1) 이라 서서히가 아니라 딱딱 끊깁니다 */
.bnl__fx--blink {
	animation: bnlFxBlink 1.2s steps(1, end) both;
}

@keyframes bnlFxBlink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* 커졌다 작아졌다 */
.bnl__fx--pulse {
	animation: bnlFxPulse 1.8s ease-in-out both;
}

@keyframes bnlFxPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

/**
 * 타이핑 : 글자가 한 자씩 찍히는 것처럼 왼쪽부터 드러납니다.
 * ⚠ width 를 늘리는 흔한 방법을 안 쓴 이유 - 한글은 글자 폭이 제각각이라 ch 단위가 안 맞습니다.
 *   clip-path 로 가림막을 걷어내면 글꼴·언어와 상관없이 정확합니다.
 *   글자 수(--fx-chars)만큼 계단을 나눠서 한 자씩 나오게 합니다.
 */
.bnl__fx--typing {
	animation: bnlFxType 2.6s steps(var(--fx-chars, 12), end) both;
}

/**
 * ⚠ 70% 에서 이미 다 찍히고 나머지 30% 는 그대로 머무릅니다.
 *   무한반복으로 두었을 때 마지막 글자가 나오자마자 처음으로 되감겨
 *   "끝까지 안 보인다"는 말을 듣지 않으려는 것입니다.
 */
@keyframes bnlFxType {
	0%        { clip-path: inset(0 100% 0 0); }
	70%, 100% { clip-path: inset(0 0 0 0); }
}

/**
 * 물결모양 : 글자 하나하나가 차례로 오르내립니다.
 * 뷰(banner_item.php)가 글자마다 <span> 으로 쪼개고 시작 시각을 조금씩 늦춰 줍니다.
 */
.bnl__fx--wave > span {
	display: inline-block;
	animation: bnlFxWave 1.4s ease-in-out both;
}

@keyframes bnlFxWave {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-22%); }
}

/* ── 이미지 ──────────────────────────────────────────────────────────────────────────── */

/* 커진 상태에서 작아지기 : 배너 밖에서 점점 줄어 제 크기로 들어옵니다 */
.bnl__fx--zoomout {
	animation: bnlFxZoomOut 1.8s ease-out both;
}

@keyframes bnlFxZoomOut {
	from { transform: scale(2.4); opacity: 0; }
	40%  { opacity: 1; }
	to   { transform: scale(1);   opacity: 1; }
}

/* 작아진 상태에서 커지기 : 작게 나타나 점점 커지며 배너 밖으로 넘어갑니다 */
.bnl__fx--zoomin {
	animation: bnlFxZoomIn 1.8s ease-in both;
}

@keyframes bnlFxZoomIn {
	from { transform: scale(0.2); opacity: 0; }
	30%  { opacity: 1; }
	to   { transform: scale(2.4); opacity: 1; }
}

/**
 * 무한반복			[2026-09-04 운영자가 정한 규칙]
 * ------------------------------------------------------------------------------
 * 특수효과는 **여섯 가지 모두** 이 클래스가 붙었을 때만 계속 돕니다.
 * '한번만 실행'이면 깜빡임·물결·커졌다작아졌다도 딱 한 번만 하고 멈춥니다.
 *
 * 효과(등장방식)와 함께 골랐을 때 - **언제나 차례로** 돕니다
 *   무한반복 → 등장방식 한 번 → 그 뒤로 특수효과만 계속
 *   한번만   → 등장방식 한 번 → 그 뒤로 특수효과 한 번, 끝
 *   (뷰 banner_item.php 가 특수효과의 지연에 등장방식 시간 1.2초를 더해 줍니다)
 */
.bnl__fx--loop {
	animation-iteration-count: infinite;
}

/* 물결은 글자마다 따로 도므로 안쪽 span 에도 걸어 줍니다 */
.bnl__fx--wave.bnl__fx--loop > span {
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.bnl__fx,
	.bnl__fx > span { animation: none; }
}

/* ------------------------------------------------------------------------------------------
 * 슬라이드 안에서는 **자기 차례가 됐을 때** 움직입니다		[2026-09-04 고침]
 * -------------------------------------------------------------------------------------------
 * 문제였던 것 : Swiper 는 안 보이는 장도 미리 다 그려 둡니다. 그래서 2번 배너의
 *   등장효과·타이핑이 **화면에 나오기도 전에** 이미 다 돌아 버렸습니다.
 *   운영자가 "타이핑이 끝까지 안 보이고 전체 사라졌다 반복한다"고 한 증상의 원인입니다.
 *
 * 고친 방법 : 자기 차례가 아닌 장은 애니메이션을 아예 끄고(animation:none) 숨겨 둡니다.
 *   차례가 오면 banner_class.php 의 JS 가 .bnl-play 를 붙여 주고, 그때 규칙이 다시 살아나
 *   **처음부터** 재생됩니다. (play-state 로 멈추기만 하면 되감기지 않아 중간부터 이어집니다)
 *
 * 효과가 없는 조각(.bnl-anim 도 .bnl__fx 도 없는 것)은 이 규칙과 무관하게 늘 보입니다.
 * ------------------------------------------------------------------------------------------ */
.bnc__swiper .swiper-slide:not(.bnl-play) .bnl-anim,
.bnc__swiper .swiper-slide:not(.bnl-play) .bnl__fx {
	animation: none;
	visibility: hidden;
}

/* ------------------------------------------------------------------------------------------
 * 자리 여백			banner_slot() 이 두르는 상자
 * -------------------------------------------------------------------------------------------
 * 화면마다 붙는 자리라 위아래 숨 쉴 틈만 줍니다.
 * 특정 화면에서 여백을 달리하고 싶으면 banner_slot('코드', '내가만든클래스') 로 넘기세요.
 * ------------------------------------------------------------------------------------------ */
.bnl-slot {
	margin: 40px 0;
}

/* 화면 맨 위(제목띠 바로 아래)에 붙는 자리는 위 여백을 없앱니다 */
.bnl-slot--top {
	margin-top: 0;
}

@media only screen and (max-width: 767px) {
	.bnl-slot { margin: 26px 0; }
}

/* ==========================================================================================
 * 클래스(묶음) 배치			theme/common/banner_class.php 가 그리는 모양
 * ==========================================================================================
 * 클래스가 배너들을 어떻게 늘어놓을지입니다. 배너 한 장 안의 조각 배치와는 다른 층입니다.
 * ======================================================================================== */
.bnc {
	position: relative;
}

/* 상하배치 : 한 줄에 하나씩 위에서 아래로 */
.bnc--topdown > .bnc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

/* 좌우 2개씩 배치 : PC 한 줄에 두 개 */
.bnc--sidebyside > .bnc__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

/* 한 장뿐이면 반쪽만 차지하지 않고 폭 전체로 */
.bnc__grid > .bnc__cell:only-child {
	grid-column: 1 / -1;
}

/* 슬라이더일 때는 Swiper 가 배치하므로 격자를 끄고, 좌우 화살표의 기준만 잡습니다 */
.bnc--slider {
	position: relative;
}

.bnc__swiper {
	padding-bottom: 30px;			/* 아래 점(pagination) 자리 */
}

.bnc__dots {
	bottom: 0;
}

/* 좌우 화살표 - 아이콘 폰트 없이 테두리 두 변으로 꺾쇠를 그립니다 */
.bnc__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 44px;
	height: 44px;
	margin-top: -37px;				/* 점 자리(30px)의 절반 + 자기 높이의 절반 */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(4, 24, 63, 0.55);
	cursor: pointer;
	transition: background 0.25s ease;
}

.bnc__nav:hover {
	background: #04183F;
}

.bnc__nav::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}

.bnc__nav--prev { left: 12px; }
.bnc__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }

.bnc__nav--next { right: 12px; }
.bnc__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }

/* ------------------------------------------------------------------------------------------
 * 휴대폰
 * -------------------------------------------------------------------------------------------
 * '두 개씩'은 좁은 화면에서 나란히 두면 배너 속 글자가 안 보여 한 줄에 하나씩 쌓습니다.
 * ---------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	.bnc--topdown > .bnc__grid,
	.bnc--sidebyside > .bnc__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.bnc__nav {
		width: 34px;
		height: 34px;
		margin-top: -32px;
	}

	.bnc__nav--prev { left: 6px; }
	.bnc__nav--next { right: 6px; }
}