/* AI 디자이너 탭 쇼케이스 (aichat.jsp #aichatShowcase)

   마크업은 AIDesigner 랜딩과 같은 detail-* 클래스를 쓰지만, aichat 은
   AIDesignerDetail.css 를 링크하지 않는다. 쓰는 규칙만 그 파일에서 옮겨 적었다.
   디자이너 탭을 한 화면보다 길게 만들어 캐러셀을 스크롤 아래에 둔다. */

/* 디자이너 탭만 뷰포트보다 길어진다. .ai-tab-pane 의 height:100% 를 ID 우선순위로 덮으며,
   스크롤은 이미 overflow:auto 인 .ai-home__content 가 받는다. React 탭은 그대로 둔다. */
#aiContent-designer{
	height:auto;
	min-height:100%;
}

#aichatRoot{
	height:fit-content;
	/* AIChatRoot 가 붙기 전부터 붙은 뒤까지 항상 건다. 쇼케이스가 처음부터 보이므로 자리를
	   미리 잡아 두지 않으면 마운트 시점에 높이가 바뀌며 밀린다. 값은 구간별 실측 중앙값
	   (2026-09-17, 반응형 경계는 aichatHome.css 1000/768px, showcase.css 480px 을 그대로 따름).
	   MFV3 첫 화면 레이아웃이 바뀌면 다시 재야 한다. */
	min-height:713px;
}

/* 채팅에 들어가면 대화가 전체 높이를 쓴다. #aichatShowcase.is-chatting 은 aichat.jsp 가
   aichat:chatStart/chatEnd 로 토글한다. AIChatRoot(MFV3) 는 이 클래스가 아니라 자기 InitialScreen 이
   감춰졌는지로 채팅 상태를 따로 판단한다.
   min-height:0 이 없으면 1000x800 처럼 최소 높이가 뷰포트보다 큰 폭에서 채팅 화면이
   100dvh 를 넘어 늘어난다. */
#aiContent-designer:has(#aichatShowcase.is-chatting) #aichatRoot{
	height:100dvh;
	min-height:0;
}

/* 디자이너 탭 스크롤바를 image-maker 와 같은 모양으로 맞춘다. 값 출처는
   MangoReact global-spa.css:94-106(운영 image-maker CSS와 동일 확인).
   MFV3 aichat.css 의 *::-webkit-scrollbar* 규칙(14px, thumb 테두리 4px,
   모서리 9999px, hover #222 !important)이 전역에 걸려 있어 디자이너 탭
   스크롤러(#aiContent[data-current-menu="designer"])로 선택자를 좁혀 덮는다.
   React 탭 다섯은 이 선택자에 걸리지 않는다. */
#aiContent[data-current-menu="designer"]::-webkit-scrollbar{
	width:6px;
}

#aiContent[data-current-menu="designer"]::-webkit-scrollbar-track{
	background-color:transparent;
}

#aiContent[data-current-menu="designer"]::-webkit-scrollbar-thumb{
	border:0;
	background-clip:border-box;
	background-color:#4A4A4A;
	border-radius:3px;
}

/* image-maker 는 호버해도 색이 그대로다. MFV3 의 #222 !important 를 이기려면
   이쪽도 !important 가 필요하다(선택자 자체는 ID+속성이라 더 구체적이지만,
   hover 규칙끼리는 양쪽 다 !important 가 있을 때 specificity 로 갈린다). */
#aiContent[data-current-menu="designer"]::-webkit-scrollbar-thumb:hover{
	background-color:#4A4A4A !important;
}

.aichat-showcase{
	position:relative;
	z-index:1;
	padding:80px 20px 0;
}

/* 채팅에 들어가면 대화가 전체 높이를 쓴다. aichat.jsp 가 aichat:chatStart/chatEnd 로 토글한다. */
.aichat-showcase.is-chatting{
	display:none;
}

.aichat-showcase__set{
	display:flex;
	flex-direction:column;
	align-items:center;
}

.aichat-showcase__set[hidden]{
	display:none;
}

.aichat-showcase__head{
	align-self:stretch;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	margin:0 -20px;
	padding:60px 20px;
	background:linear-gradient(73.63deg, rgba(20, 20, 20, 0.25) 24.324%, rgba(84, 58, 133, 0.25) 68.119%);
	word-break:keep-all;
}

.aichat-showcase__title{
	color:#FFF;
	text-align:center;
	font-size:38px;
	font-weight:600;
	line-height:60px;
	letter-spacing:-0.38px;
}

.aichat-showcase__desc{
	max-width:891px;
	color:#FFF;
	text-align:center;
	font-size:19px;
	font-weight:300;
	line-height:30px;
	letter-spacing:-0.19px;
}

.detail-showcase{
	width:100%;
	max-width:1492px;
	margin-top:80px;
	overflow:hidden;
	position:relative;
	display:flex;
	gap:37px;
	justify-content:center;
}

.detail-showcase::before,
.detail-showcase::after{
	content:'';
	position:absolute;
	left:0;
	width:100%;
	height:48px;
	z-index:1;
	pointer-events:none;
}

.detail-showcase::before{
	top:0;
	background:linear-gradient(to bottom, var(--ai-main-bg), transparent);
}

.detail-showcase::after{
	bottom:0;
	background:linear-gradient(to top, var(--ai-main-bg), transparent);
}

/* 세로 롤링 아이템, 상세페이지 */
.detail-showcase__item{
	width:259px;
	height:476px;
	overflow:hidden;
	flex-shrink:0;
}

.detail-showcase__scroll{
	display:flex;
	flex-direction:column;
}

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

.detail-showcase__item--down .detail-showcase__scroll{
	animation:showcaseScrollDown 20s linear infinite;
}

.detail-showcase__item--up .detail-showcase__scroll{
	animation:showcaseScrollUp 20s linear infinite;
}

@keyframes showcaseScrollDown{
	0%{
		transform:translateY(0);
	}
	100%{
		transform:translateY(-50%);
	}
}

@keyframes showcaseScrollUp{
	0%{
		transform:translateY(-50%);
	}
	100%{
		transform:translateY(0);
	}
}

/* 가로 롤링, 카드뉴스/PPT/웹이미지: AIDesignerDetail.css 384~456 이식 */
.detail-showcase--horizontal{
	flex-direction:column;
	gap:24px;
	padding:40px 0 0;
}

.detail-showcase--horizontal::before,
.detail-showcase--horizontal::after{
	display:none;
}

.detail-showcase__row{
	width:100%;
	overflow:hidden;
	position:relative;
}

.detail-showcase__row::before,
.detail-showcase__row::after{
	content:'';
	position:absolute;
	top:0;
	width:120px;
	height:100%;
	z-index:1;
	pointer-events:none;
}

.detail-showcase__row::before{
	left:0;
	background:linear-gradient(to right, var(--ai-main-bg) 0%, transparent 100%);
}

.detail-showcase__row::after{
	right:0;
	background:linear-gradient(to left, var(--ai-main-bg) 0%, transparent 100%);
}

.detail-showcase__track{
	display:flex;
	gap:24px;
	width:max-content;
}

.detail-showcase__track img{
	height:240px;
	width:auto;
	display:block;
}

.detail-showcase__track.onePage img{
	height:410px;
}

.detail-showcase__row--right .detail-showcase__track{
	animation:showcaseScrollRight 30s linear infinite;
}

.detail-showcase__row--left .detail-showcase__track{
	animation:showcaseScrollLeft 30s linear infinite;
}

@keyframes showcaseScrollRight{
	0%{
		transform:translateX(0);
	}
	100%{
		transform:translateX(-50%);
	}
}

@keyframes showcaseScrollLeft{
	0%{
		transform:translateX(-50%);
	}
	100%{
		transform:translateX(0);
	}
}

/* FAQ, 카테고리 불문 공통. 랜딩은 이 구역에 자체 배경(#151515)을 깔았지만
   aichat 은 페이지 배경이 그대로 비치게 지웠다. */
.detail-faq{
	padding:80px 20px 165px;
	word-break:keep-all;
}

.detail-faq__inner{
	max-width:1200px;
	margin:0 auto;
}

.detail-faq__title{
	font-size:33px;
	font-weight:600;
	line-height:46px;
	letter-spacing:-0.33px;
	text-align:center;
	color:#ffffff;
	margin-bottom:40px;
}

.detail-faq__item{
	background:#f9f9fc;
	border-radius:14px;
	margin-bottom:15px;
	overflow:hidden;
	cursor:pointer;
	transition:all 0.3s ease;
}

.detail-faq__question{
	display:flex;
	align-items:center;
	padding:28.3px 60px 28.3px 95px;
	position:relative;
	font-size:19px;
	font-weight:600;
	color:#2f2f2f;
	line-height:1.61;
	letter-spacing:-0.57px;
}

.detail-faq__question::before{
	content:'Q';
	position:absolute;
	left:30px;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:41.22px;
	line-height:41.22px;
	background:#141414;
	border-radius:50%;
	color:#ffffff;
	font-size:20px;
	font-weight:800;
	text-align:center;
	font-family:'SUIT', 'Pretendard', sans-serif;
}

.detail-faq__question::after{
	content:'';
	position:absolute;
	right:29.5px;
	top:50%;
	transform:translateY(-50%) rotate(0deg);
	transition:transform 0.3s ease;
	width:26.89px;
	height:15.14px;
	background:url(/common/responsive/images/aichat/icon_faq_arrow.svg) no-repeat center/contain;
}

.detail-faq__item.expand .detail-faq__question::after{
	transform:translateY(-50%) rotate(180deg);
}

.detail-faq__answer{
	display:none;
	margin-top:-5px;
	padding:0 60px 23px 95px;
	font-size:19px;
	font-weight:600;
	color:#2f2f2f;
	line-height:1.61;
	letter-spacing:-0.57px;
	position:relative;
}

.detail-faq__item.expand .detail-faq__answer{
	display:block;
}

.detail-faq__answer::before{
	content:'A';
	position:absolute;
	left:30px;
	top:0;
	width:40px;
	height:41.22px;
	line-height:41.22px;
	background:#6e26ee;
	border-radius:50%;
	color:#ffffff;
	font-size:20px;
	font-weight:800;
	text-align:center;
	font-family:'SUIT', 'Pretendard', sans-serif;
}

.detail-faq__answer a{
	color:#6e26ee;
	text-decoration:underline;
}

@media (max-width:1000px){
	#aichatRoot{
		min-height:852px;
	}
}

/* 반응형: 랜딩 섹션 제목 단계 + aichat 자체 여백 */
@media (max-width:768px){
	#aichatRoot{
		min-height:726px;
	}

	#aiContent-designer:has(#aichatShowcase.is-chatting) #aichatRoot{
		height:calc(100dvh - var(--ai-nav-h-mo));
		min-height:0;
	}

	.aichat-showcase{
		padding:0 16px 40px;
	}

	.aichat-showcase__head{
		margin:0 -16px;
		padding:60px 16px 20px;
	}

	.detail-showcase{
		margin-top:20px;
	}

	.aichat-showcase__title{
		font-size:28px;
		line-height:38px;
	}

	.aichat-showcase__desc{
		font-size:16px;
		line-height:24px;
	}

	.aichat-showcase__desc br{
		display:none;
	}

	.detail-faq{
		padding:60px 16px;
	}

	.detail-faq__title{
		font-size:24px;
		line-height:29px;
	}

	.detail-faq__question{
		font-size:16px;
		padding:24px 50px 24px 68px;
	}

	.detail-faq__question::before{
		left:20px;
		width:38px;
		height:38px;
		line-height:38px;
		font-size:17px;
	}

	.detail-faq__answer{
		margin-top:0;
		font-size:16px;
		padding:0 50px 24px 68px;
	}

	.detail-faq__answer::before{
		left:20px;
		width:38px;
		height:38px;
		line-height:38px;
		font-size:17px;
	}

	.detail-faq__question::after{
		right:20px;
		width:20.36px;
		height:11.46px;
	}
}

@media (max-width:480px){
	#aichatRoot{
		min-height:751px;
	}

	.aichat-showcase__title{
		font-size:22px;
		line-height:32px;
	}

	.aichat-showcase__desc{
		font-size:14px;
		line-height:22px;
	}

	.detail-faq{
		padding:40px 16px;
	}

	.detail-faq__title{
		font-size:19px;
		line-height:25px;
	}

	.detail-faq__question{
		font-size:14px;
		padding:18px 40px 18px 54px;
		line-height:1.5;
	}

	.detail-faq__question::before{
		left:14px;
		width:30px;
		height:30px;
		line-height:30px;
		font-size:15px;
	}

	.detail-faq__answer{
		font-size:14px;
		padding:0 16px 18px 54px;
		line-height:1.5;
	}

	.detail-faq__answer::before{
		left:14px;
		width:30px;
		height:30px;
		line-height:30px;
		font-size:15px;
	}

	.detail-faq__question::after{
		right:12px;
		width:14.53px;
		height:8.18px;
	}

	.detail-showcase{
		padding:20px 0;
	}

	.detail-showcase__item{
		width:180px;
		height:260px;
	}
}