/* ============================================================
   BT Popup — Frontend Styles (v1.4)
   Reference: studio-jt.co.kr / JT BAD UX POPUP
   ============================================================ */

#bt-popup-wrap,
#bt-popup-wrap * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── 오버레이 (팝업 뒤 배경 딤) ── */
.bt-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .65);
	z-index: -1;
}

/* ── 팝업 래퍼 ── */
#bt-popup-wrap {
	position: fixed;
	z-index: 99999;
	width: 100%;
	max-width: var(--bt-max-width, 900px);
}
#bt-popup-wrap[hidden] {
	display: none !important;
}

/* 위치 프리셋 */
#bt-popup-wrap.bt-pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#bt-popup-wrap.bt-pos-top-left     { top: 20px;    left: 20px;  }
#bt-popup-wrap.bt-pos-top-right    { top: 20px;    right: 20px; }
#bt-popup-wrap.bt-pos-bottom-left  { bottom: 20px; left: 20px;  }
#bt-popup-wrap.bt-pos-bottom-right { bottom: 20px; right: 20px; }

/* ── 팝업 박스 — 레퍼런스: 모서리 없음(sharp) ── */
.bt-box {
	position: relative;
	z-index: 1;
	background: #000;
	overflow: hidden;
	border-radius: 0;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .8);
	animation: btBoxIn .28s cubic-bezier(.22, .68, 0, 1.15) both;
}
#bt-popup-wrap.bt-pos-center .bt-box {
	animation: btBoxInCenter .28s cubic-bezier(.22, .68, 0, 1.15) both;
}

/* ── 슬라이드 이미지 영역 ── */
.bt-slide-area {
	position: relative;
	background: #000;
	line-height: 0;
	overflow: hidden;
}

/* 가로 트랙 — 슬라이드를 한 줄로 늘어놓고 translateX 로 이동 */
.bt-slides {
	display: flex;
	align-items: stretch;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
.bt-slides.is-animating {
	transition: transform var(--bt-slide-speed, .5s) cubic-bezier(.4, 0, .2, 1);
}
/* JS 미실행(노스크립트) 시 첫 슬라이드만 노출 */
.bt-slides:not(.is-track) .bt-slide         { display: none; }
.bt-slides:not(.is-track) .bt-slide.is-active { display: block; }

.bt-slide {
	flex: 0 0 100%;
	width: 100%;
	line-height: 0;
}
.bt-slide img { width: 100%; height: auto; display: block; }
.bt-slide a   { display: block; line-height: 0; }

/* ── 화살표 — 반투명 원형 ── */
.bt-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	background: rgba(0, 0, 0, .4);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s;
	-webkit-appearance: none;
	line-height: 1;
}
.bt-arrow:hover { background: rgba(0, 0, 0, .72); }
.bt-prev { left: 16px; }
.bt-next { right: 16px; }

/* ══════════════════════════════════════
   하단 푸터 — 레퍼런스 디자인
   [탭 탭 탭 탭 탭 탭]   ← 균등 분배, 구분선
   [오늘하루보지않기   닫기]  ← 더 어두운 바
══════════════════════════════════════ */
.bt-footer {
	background: var(--bt-tab-bg, #1c1c1c);
}

/* ── 탭 영역 ── */
.bt-tabs {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.bt-tabs::-webkit-scrollbar { display: none; }

.bt-tab,
#bt-popup-wrap .bt-tab {
	flex: 1 1 0;           /* 균등 분배 */
	min-width: 80px;
	min-height: 46px;
	height: auto;
	padding: 8px 10px;
	background: transparent;
	border: none;
	border-right: 1px solid rgba(128, 128, 128, .3); /* 탭 세로 구분선 (밝은/어두운 배경 모두 대응) */
	color: var(--bt-tab-color, rgba(255, 255, 255, .38));
	font-size: 15px;
	font-family: inherit;
	letter-spacing: -.025em;
	/* 타이틀이 길면 말줄임 대신 자연스럽게 줄바꿈 */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal;
	word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
	overflow-wrap: break-word; /* 어절 자체가 길면 강제 분리 */
	line-height: 1.3;
	cursor: pointer;
	position: relative;
	transition: color .18s, background .18s, filter .18s;
	-webkit-appearance: none;
}
.bt-tab:last-child {
	border-right: none; /* 마지막 탭 구분선 제거 */
}
/* 활성 탭 — 배경/글자 색상은 설정값(CSS 변수)으로 제어 */
.bt-tab.is-active,
#bt-popup-wrap .bt-tab.is-active {
	color: var(--bt-tab-active-color, #fff);
	background: var(--bt-tab-active-bg, #c9a227);
	font-weight: 700;
	border-right-color: transparent;
	z-index: 1;
}
/* 활성 탭 상단 강조선 */
.bt-tab.is-active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--bt-tab-active-color, #fff);
	opacity: .85;
}
.bt-tab:hover:not(.is-active) {
	filter: brightness(1.35); /* 배경색이 밝든 어둡든 자연스럽게 강조 */
}

/* ── 액션 바 — 탭보다 어두운 배경 ── */
.bt-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	padding: 0 16px;
	background: #111;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

/* 오늘하루 / 닫기 — 글자 색상만 인라인 스타일(설정값)로 적용 */
.bt-no-today,
.bt-close {
	background: transparent !important;
	border: none !important;
	outline: none;
	box-shadow: none;
	font-size: 13px;
	font-family: inherit;
	letter-spacing: -.025em;
	cursor: pointer;
	padding: 4px 0;
	-webkit-appearance: none;
	transition: opacity .15s;
}
.bt-no-today { margin-left: 10px !important; }
.bt-close    { margin-right: 10px !important; }
.bt-no-today:hover,
.bt-close:hover { opacity: .6; }

/* ── 애니메이션 ── */
@keyframes btBoxIn {
	from { opacity: 0; transform: scale(.97); }
	to   { opacity: 1; transform: scale(1);   }
}
@keyframes btBoxInCenter {
	from { opacity: 0; transform: translateY(8px) scale(.97); }
	to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* ── 반응형 ── */
@media (max-width: 768px) {

	#bt-popup-wrap {
		width: 100% !important;
		max-width: 100% !important;
	}

	#bt-popup-wrap.bt-pos-center {
		left: 0 !important;
		transform: translateY(-50%) !important;
	}
	#bt-popup-wrap.bt-pos-top-left,
	#bt-popup-wrap.bt-pos-top-right {
		top: 0 !important; left: 0 !important; right: 0 !important;
	}
	#bt-popup-wrap.bt-pos-bottom-left,
	#bt-popup-wrap.bt-pos-bottom-right {
		bottom: 0 !important; left: 0 !important; right: 0 !important;
	}
	#bt-popup-wrap.bt-pos-custom {
		left: 0 !important; right: 0 !important; transform: none !important;
	}

	.bt-arrow     { width: 36px; height: 36px; font-size: 15px; }
	.bt-prev      { left: 10px; }
	.bt-next      { right: 10px; }
	.bt-tab,
	#bt-popup-wrap .bt-tab { min-height: 42px; height: auto; min-width: 70px; font-size: 12px; padding: 7px 6px; }
	.bt-actions   { height: 38px; padding: 0 12px; }
	.bt-no-today,
	.bt-close     { font-size: 11px; }
}