/* ============================================================
   BT Popup — Frontend Styles (v1.2)
   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;
}
.bt-slide         { display: none; line-height: 0; }
.bt-slide.is-active {
	display: block;
	animation: btFadeIn .2s ease both;
}
.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: #1c1c1c;
}

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

.bt-tab {
	flex: 1 1 0;           /* 균등 분배 */
	min-width: 80px;
	height: 46px;
	padding: 0 10px;
	background: transparent;
	border: none;
	border-right: 1px solid rgba(255, 255, 255, .1); /* 탭 세로 구분선 */
	color: rgba(255, 255, 255, .38);
	font-size: 15px;
	font-family: inherit;
	letter-spacing: -.025em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: color .18s, background .18s;
	-webkit-appearance: none;
}
.bt-tab:last-child {
	border-right: none; /* 마지막 탭 구분선 제거 */
}
.bt-tab.is-active {
	color: #fff;
	background: rgba(255, 255, 255, .08); /* 활성 탭: 미세 밝은 배경 */
}
.bt-tab:hover:not(.is-active) {
	color: rgba(255, 255, 255, .65);
	background: rgba(255, 255, 255, .04);
}

/* ── 액션 바 — 탭보다 어두운 배경 ── */
.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: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);   }
}
@keyframes btFadeIn {
	from { opacity: 0; }
	to   { opacity: 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       { height: 42px; min-width: 70px; font-size: 11px; }
	.bt-actions   { height: 38px; padding: 0 12px; }
	.bt-no-today,
	.bt-close     { font-size: 11px; }
}