@charset "UTF-8";

/* ==================================================== */
/* 아이백의원 - 전후사진(Real Review) 페이지 전용          */
/* hero / 잠금 뷰(비로그인) / 사례 그리드(로그인)          */
/* cta / cta-notice / btn-pill 은 sub.css 재사용          */
/* 그리드·잠금 영역은 KBoard 스킨(thumbnail_before_after)이 */
/* 동일 클래스로 렌더 → 이 파일 하나로 스타일 공유          */
/* ==================================================== */

.ibaek-review {
	overflow-x: hidden;
}

/* Figma leading-trim 재현 — 단일 라인 요소에만 적용 */
.ibaek-review .ba-hero-en,
.ibaek-review .ba-hero-title,
.ibaek-review .ba-hero-sub,
.ibaek-review .ba-label,
.ibaek-review .ba-heading,
.ibaek-review .ba-lock-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* ==================== */
/* section_hero          */
/* ==================== */
.ba-hero {
	position: relative;
	min-height: 688px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 220px 260px;
	overflow: hidden;
}

.ba-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.ba-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px;
	color: var(--brown-02, #443a35);
}

.ba-hero-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.ba-hero-en {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
}

.ba-hero-title {
	font-family: 'Pretendard', sans-serif;
	font-weight: 700;
	font-size: 80px;
	line-height: 1;
}

.ba-hero-sub {
	font-family: 'Pretendard', sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1;
}

/* ==================== */
/* 잠금 뷰 (비로그인)     */
/* ==================== */
.ba-lock {
	background: var(--white, #fff);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 120px 260px;
}

.ba-lock-icon {
	width: 100px;
	height: 100px;
	border: 2px solid var(--brown-01, #aa9371);
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ba-lock-icon svg {
	width: 48px;
	height: 60px;
	display: block;
}

.ba-lock-title {
	margin-top: 60px;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	color: var(--black-02, #252525);
	word-break: keep-all;
}

.ba-lock-desc {
	margin-top: 40px;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.6;
	color: var(--black-02, #252525);
	word-break: keep-all;
}

.ba-lock-desc .brown {
	font-weight: 700;
	color: var(--brown-01, #aa9371);
}

.ba-lock-btns {
	margin-top: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ba-lock-btns .btn-pill {
	width: 282px;
	padding: 20px 40px;
}

.ba-lock-caption {
	margin-top: 40px;
	font-size: 16px;
	line-height: 1;
	color: var(--gray-01, #7c7c7c);
}

/* ==================== */
/* 사례 그리드 (로그인)   */
/* ==================== */
.ba-section {
	background: var(--white, #fff);
	padding: 120px 260px;
}

.ba-section-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ba-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 52px;
	width: 100%;
}

.ba-head-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
}

.ba-label {
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--brown-01, #aa9371);
}

.ba-heading {
	font-family: 'Pretendard', sans-serif;
	font-weight: 500;
	font-size: 56px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.ba-desc {
	font-size: 20px;
	line-height: 1.6;
	color: var(--black-02, #252525);
	word-break: keep-all;
}

/* 카테고리 상단 구분선: 베이지→브라운→베이지 그라데이션 */
.ba-topline {
	width: 100%;
	height: 1px;
	margin-top: 60px;
	background: linear-gradient(90deg,
		rgba(255, 250, 245, 0.8) 0%,
		rgba(170, 147, 113, 0.8) 50%,
		rgba(255, 250, 245, 0.8) 100%);
}

/* 카테고리 탭 */
.ba-tabs {
	margin-top: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 100%;
}

.ba-tab {
	width: 155px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 10px;
	border-radius: 50px;
	background: var(--white, #fff);
	border: 1px solid #c7c7c7;
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	white-space: nowrap;
	color: var(--gray-01, #7c7c7c);
	cursor: pointer;
	transition: all var(--transition-normal, 0.3s ease);
}

.ba-tab:hover {
	border-color: var(--brown-01, #aa9371);
	color: var(--brown-02, #443a35);
}

.ba-tab.is-active {
	background: var(--brown-01, #aa9371);
	border-color: var(--brown-01, #aa9371);
	font-weight: 700;
	color: var(--beige-01, #fffaf5);
}

/* 카드 그리드 */
.ba-grid {
	margin-top: 120px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.ba-card {
	border: 1px solid var(--beige-02, #e3dbcc);
	background: var(--white, #fff);
	display: flex;
	flex-direction: column;
}

.ba-card-imgs {
	position: relative;
	display: flex;
	width: 100%;
}

.ba-card-img {
	position: relative;
	width: 50%;
	aspect-ratio: 220 / 260;
	background-size: cover;
	background-position: center top;
}

.ba-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border-radius: 100px;
	background: var(--brown-02, #443a35);
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	color: var(--white, #fff);
}

/* 가운데 순환 화살표 아이콘 */
.ba-cycle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	pointer-events: none;
}

.ba-cycle svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ba-card-body {
	padding: 32px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ba-card-title {
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.ba-card-sub {
	margin-top: 20px;
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.ba-card-line {
	width: 100%;
	height: 1px;
	margin: 20px 0;
	background-image: repeating-linear-gradient(90deg,
		#d5c7ae 0, #d5c7ae 2px, transparent 2px, transparent 6px);
}

.ba-card-note {
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	color: var(--gray-01, #7c7c7c);
}

/* 페이지네이션 */
.ba-paging {
	margin-top: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.ba-page-arrow {
	display: flex;
	align-items: center;
}

.ba-page-arrow svg {
	display: block;
	width: 46px;
	height: 16px;
}

.ba-page-nums {
	display: flex;
	align-items: center;
	gap: 20px;
	font-family: 'Montserrat', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
}

.ba-page-nums a,
.ba-page-nums span {
	color: var(--gray-01, #7c7c7c);
	line-height: 1;
}

.ba-page-nums .is-active {
	color: var(--brown-01, #aa9371);
}

/* 빈 목록 (등록된 사례 없음) */
.ba-empty {
	margin-top: 100px;
	padding: 80px 40px;
	width: 100%;
	text-align: center;
	border: 1px solid var(--beige-02, #e3dbcc);
	font-size: 20px;
	line-height: 1.6;
	color: var(--gray-01, #7c7c7c);
	word-break: keep-all;
}

/* 의료광고 사전심의 안내 박스 */
.ba-noticebox {
	margin-top: 100px;
	width: 100%;
	padding: 40px;
	background: #f3f0e9;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ba-noticebox-title {
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--black-02, #252525);
}

.ba-noticebox-desc {
	font-weight: 400;
	font-size: 20px;
	line-height: 1.6;
	color: var(--gray-01, #7c7c7c);
	word-break: keep-all;
}

.ba-noticebox-desc b {
	font-weight: 700;
}

/* ==================== */
/* Responsive            */
/* ==================== */
@media (max-width: 1440px) {
	.ba-hero { padding: 200px 60px; }
	.ba-lock { padding: 120px 60px; }
	.ba-section { padding: 120px 60px; }
}

@media (max-width: 1024px) {
	.ba-hero { padding: 160px 40px; min-height: 520px; }
	.ba-hero-title { font-size: 56px; }
	.ba-hero-sub { font-size: 20px; }

	.ba-lock { padding: 80px 40px; }
	.ba-lock-title { font-size: 32px; }
	.ba-lock-desc { font-size: 18px; }

	.ba-section { padding: 80px 40px; }
	.ba-heading { font-size: 40px; }
	.ba-desc { font-size: 18px; }
	.ba-tabs { flex-wrap: wrap; }
	.ba-grid { margin-top: 80px; grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.ba-card-title { font-size: 24px; }
	.ba-card-sub, .ba-card-note { font-size: 17px; }
	.ba-paging { margin-top: 80px; }
	.ba-noticebox { margin-top: 80px; }
	.ba-noticebox-desc { font-size: 17px; }
}

@media (max-width: 767px) {
	/* hero: 시안(22-12443) — 텍스트 상단, 모바일 전용 세로 크롭 배경 */
	.ba-hero { padding: 110px 40px 48px; min-height: 557px; align-items: flex-start; }
	.ba-hero-bg { background-image: url('/assets/imgs/sub/review/hero_mo.webp') !important; }
	.ba-hero-inner { gap: 24px; }
	.ba-hero-main { gap: 16px; }
	.ba-hero-en { font-size: 14px; }
	.ba-hero-title { font-size: 40px; line-height: 1.3; text-wrap: balance; }
	.ba-hero-sub { font-size: 15px; line-height: 1.7; }

	/* 잠금 뷰 */
	.ba-lock { padding: 64px 40px; }
	.ba-lock-icon { width: 72px; height: 72px; border-radius: 72px; }
	.ba-lock-icon svg { width: 34px; height: 43px; }
	.ba-lock-title { margin-top: 40px; font-size: 24px; line-height: 1.4; text-wrap: balance; }
	.ba-lock-desc { margin-top: 24px; font-size: 15px; line-height: 1.7; }
	.ba-lock-btns { margin-top: 48px; width: 100%; }
	.ba-lock-btns .btn-pill { width: 100%; max-width: 310px; padding: 16px 24px; font-size: 16px; }
	.ba-lock-caption { margin-top: 24px; font-size: 13px; line-height: 1.6; }

	/* 사례 그리드 */
	.ba-section { padding: 64px 40px; }
	.ba-head { gap: 32px; }
	.ba-head-title { gap: 20px; }
	.ba-label { font-size: 14px; }
	.ba-heading { font-size: 28px; }
	.ba-desc { font-size: 15px; line-height: 1.7; }

	.ba-topline { margin-top: 40px; }

	/* 탭: 좌우 스크롤 (풀블리드) */
	.ba-tabs {
		margin-top: 40px;
		flex-wrap: nowrap;
		width: calc(100% + 80px);
		margin-left: -40px;
		margin-right: -40px;
		padding: 0 40px;
		justify-content: flex-start;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ba-tabs::-webkit-scrollbar { display: none; }
	.ba-tab { width: auto; padding: 14px 24px; font-size: 15px; }

	.ba-grid { margin-top: 64px; grid-template-columns: 1fr; gap: 56px; }
	.ba-badge { top: 8px; left: 8px; padding: 6px 12px; font-size: 12px; }
	.ba-cycle { width: 32px; height: 32px; }
	.ba-card-body { padding: 24px 16px; }
	.ba-card-title { font-size: 20px; }
	.ba-card-sub { margin-top: 12px; font-size: 15px; }
	.ba-card-line { margin: 16px 0; }
	.ba-card-note { font-size: 14px; line-height: 1.5; }

	.ba-paging { margin-top: 64px; gap: 24px; }
	.ba-page-arrow svg { width: 38px; height: 14px; }
	.ba-page-nums { gap: 16px; font-size: 20px; }

	.ba-empty { margin-top: 64px; padding: 56px 24px; font-size: 15px; }

	.ba-noticebox { margin-top: 64px; padding: 24px; gap: 12px; }
	.ba-noticebox-title { font-size: 16px; }
	.ba-noticebox-desc { font-size: 14px; line-height: 1.7; }
}