/* =====================================================
   AI Designer 홈 (aichatHome)
   Figma: 2026_망고보드 홈페이지
     FHD  : node-id=7901:1474  → sidebar 244px
     1000px: node-id=7914:5922 → sidebar 170px
     390px : node-id=7932:6306 → bottom nav 54px
   ===================================================== */

/* ── 토큰 ───────────────────────────────────────────── */
:root {
	--ai-sb-width: 244px;
	--ai-sb-bg:    #282828;
	--ai-main-bg:  #141414;
	--ai-hover-bg: #363537;
	--ai-noti-bg:  #2B2B2B;
	--ai-border:   #767676;
	--ai-accent:   #6E26EE;
	--ai-nav-h: 58px;
	--ai-nav-h-mo: 54px;
	--ai-topbar-h: 68px;
	--ai-light-color:#FFFFFF;
	
	--service-color-proPlus: #F63587;
	--service-color-pro: #4e2bf4;
	--service-color-normal: #006dfe;
	--service-color-student: #26bcb7;
	--service-color-free: #1b222f;
}

html, body{
	margin:0;
	padding:0;
	
	font-family: 'Pretendard', sans-serif;
}

*{
	box-sizing: border-box;
}

.service4{background: var(--service-color-proPlus);}
.service3{background: var(--service-color-pro);}
.service2{background: var(--service-color-normal);}
.service1{background: var(--service-color-student);}
.service0{background: var(--service-color-free);}

/* ── 전체 레이아웃 ──────────────────────────────────── */
.ai-home {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: var(--ai-main-bg);
}

/* =====================================================
   사이드바 (desktop / tablet)
   ===================================================== */
.ai-home__sidebar {
	position: relative;
	width: var(--ai-sb-width);
	min-width: var(--ai-sb-width);
	height: 100%;
	background: var(--ai-sb-bg);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	z-index: 20;
}

/* 로고 */
.ai-home__logo {
	height:64px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
	padding-left:24px;
}

.ai-home__logo-text{
	display:flex;
	align-items:center;
	padding:51px 0 31px 0;
	color:#fff;
	font-size:17px;
	font-weight:600;
	letter-spacing:-0.17px;
	margin-left:44.5px;
}

.ai-home__logo a {
	display: block;
	width:118px;
	height:16px;
	background: url('/common/responsive/images/aichat/logo_white.svg') no-repeat center / contain;
	overflow: hidden;
	text-indent: -9999px;
	opacity:.3;
}

/* 모바일 로고 아이콘 (≤768px) - 기본 숨김 */
.ai-home__logo-icon {
	display: none;
}

/* ── 내비게이션 ─────────────────────────────────────── */
.ai-home__nav {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

.ai-home__nav::-webkit-scrollbar {
	display: none;
}

.ai-home__nav-item {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	height: var(--ai-nav-h);
	padding-left: 40px;
	border: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.60);
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.14px;
	white-space: nowrap;
	transition: color 0.2s;
	background:initial;
	
	&:hover:disabled, &:disabled{
		cursor:not-allowed;
		color: rgba(255, 255, 255, 0.30);
	}
}

/* 활성 상태 (데스크탑) */
.ai-home__nav-item.is-active, .ai-home__nav-item:hover {
	color: #fff;
	border-bottom: none;
	position: relative;
}

.ai-home__nav-item.is-active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, #fff 20%, rgba(255, 255, 255, 0) 90%);
}

.ai-home__nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	overflow: hidden;
}

.ai-home__nav-icon svg,
.ai-home__nav-icon img {
	width: 22px;
	height: 22px;
}

/* 활성/비활성 아이콘 토글: 기본은 inactive 아이콘만 표시 */
.ai-home__nav-icon-active {
	display: none;
}

.ai-home__nav-item:not([disabled]):is(:hover, .is-active){
	& .ai-home__nav-icon-inactive{
		display: none;
	}
	
	& .ai-home__nav-icon-active{
		display: block;
	}
}

/* 모바일용 짧은 라벨 (기본 숨김) */
.ai-home__nav-label-short {
	display: none;
}

.ai-home__nav-tooltip{
	display:none;
	position:absolute;
	padding:7px 9px;
	border-radius:6px;
	background-color:rgba(46, 122, 124, 0.90);
	right:4px;
	font-size:13px;
	font-weight:500;
	letter-spacing:-0.39px;
	color:#fff;
	
	&::before{
		content:"";
		width:5px;
		height:5px;
		border-left:solid 10px rgba(46, 122, 124, 0.90);
		border-bottom:solid 10px rgba(46, 122, 124, 0.90);
		rotate:45deg;
		position:absolute;
		left:-4px;
		top:7px;
	}
}

.ai-home__nav-item:hover .ai-home__nav-tooltip{
	display:block;
}

/* ── 프로필 팝업 (클릭 트리거 하단 — top/right 는 JS 에서 동적 계산) ── */
.ai-home__profile-popup {
	position: fixed;
	top: 68px;
	right: 30px;
	width: 270px;
	background: var(--ai-sb-bg);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	padding: 20px 16px;
	box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.55);
	z-index: 200;
	display: none;
}

.ai-home__profile-popup.is-open {
	display: block;
}

/* ── 팝업 헤더 (닉네임 + 배지 + 이메일) ──────────────────────── */
.ai-home__popup-header {
	padding: 0px 6px 7px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ai-home__popup-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.ai-home__popup-nick {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.ai-home__popup-email {
	font-size: 14px;
	font-weight:400;
	color: #fff;
	letter-spacing: -0.13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── 팝업 구분선 ──────────────────────────────────────────────── */
.ai-home__popup-divider {
	margin: 13px 0px;
	border: none;
	border-top: 1px solid rgba(255,255,255,0.10);
}

/* ── 팝업 메뉴 목록 ────────────────────────────────────────────── */
.ai-home__popup-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* ── 팝업 메뉴 항목 ────────────────────────────────────────────── */
.ai-home__popup-item {
	display: flex;
	align-items: center;
	width: 100%;
	height: 38px;
	padding: 10px 12px;
	gap: 10px;
	border-radius: 8px;
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	letter-spacing: -0.14px;
	cursor: pointer;
	background: none;
	border: none;
	text-align: left;
	text-decoration: none;
	transition: background 0.12s;
	box-sizing: border-box;
	
	&::before{
		content:"";
		width:18px;
		height:18px;
	}
}

.ai-home__popup-item:hover {
	background: var(--ai-hover-bg);
	color: #fff;
	text-decoration: none;
}

.iconBilling::before{
	background-image:url(/common/responsive/images/aichat/popup/icon_billing.svg);
}

.iconPlan::before{
	background-image:url(/common/responsive/images/aichat/popup/icon_plan.svg);
}

.iconHome::before{
	background-image:url(/common/responsive/images/aichat/icon_mango.svg);
}

.iconLogout::before{
	background-image:url(/common/responsive/images/aichat/popup/icon_logout.svg);
}

/* =====================================================
   메인 영역 (우측 / 전체)
   ===================================================== */
.ai-home__main {
	position: relative;
	width:100%;
	height: 100%;
	min-width: 0;
	overflow: hidden;
	background: var(--ai-main-bg);
	display: flex;
	flex-direction: column;
}

/* ── 보라색 배경 — bg_gradient.svg + chatStarted 트랜지션 ─── */
.ai-home__bg {
	position: absolute;
	inset: 0;
	/* background: radial-gradient(ellipse 90% 70% at 50% 0%, #CDBCFF 0, rgba(110, 38, 238, 1) 40%, transparent 60%); */
	background-image:url('/common/responsive/images/aichat/bg_gradient.svg');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	pointer-events: none;
	z-index: 0;
	transition: transform 0.5s ease, opacity 0.5s ease;
}

/* 채팅 시작 시: 위로 슬라이드 + 페이드아웃. AIChat 측 dispatchEvent("aichat:chatStart") → aichatHome.jsp 가 토글 */
.ai-home__bg.chatStarted {
	transform: translateY(-100%);
	opacity: 0;
}

/* ── 탑바 (로그인 버튼 + 모바일 로고) ──────────────────── */
.ai-home__topbar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20px;
	z-index: 10;
	pointer-events: none;
}

.ai-home__topbar > * {
	pointer-events: auto;
}

/* 모바일 전용 로고 (기본 숨김) */
.ai-home__logo-mobile {
	display: none;
	margin-right: auto;
	width:48px;
	height:48px;
	padding:8px;
	border-radius:100%;
	background-color:rgba(20, 20, 20, 0.30);
	align-items:center;
	justify-content:center;
}

.ai-home__logo-mobile img {
	width:24px;
	height:24px;
}

/* 탑바 인증 영역 — 로그인 시 user-info + point 버튼을 나란히 배치 */
#aiHomeTopbarAuth {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ai 디자이너 외에 특정 메뉴에서 다음 단계로 진입시 아이디 및 포인트 부분 보이지 않게 처리 */
#aiHomeSidebar[style*="display: none;"] ~ #aiHomeMain{
	& .ai-home__topbar{
		display:none;
	}
}

/* 로그인 상태: 요금제 배지 + 닉네임 묶음 (클릭 가능 — 팝업 트리거) */
.ai-home__user-info {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 8px;
	transition: background 0.12s;
	user-select: none;
}

/* 요금제 배지 (프로 등) */
.ai-home__plan-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.14px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* 닉네임 텍스트 */
.ai-home__nick-name {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.14px;
	white-space: nowrap;
	max-width:193px;
	overflow:hidden;
	text-overflow:ellipsis;
	
	& > span{
		font-weight:400;
	}
}

/* 닉네임 옆 chevron */
.ai-home__user-chevron {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* 인증 버튼 묶음 (비로그인) */
.ai-home__auth-btns {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ai-home__btn-login, .ai-home__btn-join {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ai-main-bg);
	letter-spacing: -0.42px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.15s;
}

.ai-home__btn-login:hover {
	background: #e8e8e8;
	border-color: #e8e8e8;
	color: var(--ai-main-bg);
	text-decoration: none;
}

.ai-home__btn-join {
	color:#fff;
	background: var(--ai-main-bg);
	border: 1px solid var(--ai-border);
}

.ai-home__btn-join:hover {
	background: var(--ai-hover-bg);
	color: #fff;
	text-decoration: none;
}

/* AI 포인트 버튼 (로그인 시 노출). 0P 시 [data-zero="true"] 토글로 충전 모드 전환 */
.ai-home__point-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content:center;
	width:128px;
	gap: 4px;
	padding: 9px 16px;
	background:linear-gradient(90deg, rgba(133, 102, 189, 0.20) 0%, rgba(82, 71, 103, 0.20) 100%);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 140%;
	letter-spacing: -0.14px;
	cursor:default;
	color:var(--ai-light-color);
	white-space: nowrap;

}

.ai-home__point-icon {
	order:1;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-image:url(/common/responsive/images/aichat/icon_ai_point.svg);
	background-repeat:no-repeat;
	background-position:-20px 0;
}

.ai-home__point-num {
	order: 2;
}

.ai-home__point-num::before {
	content: attr(data-point);
}

.ai-home__point-num::after {
	content: "P";
	margin-left: 2px;
}

.ai-home__point-charge {
	order: 3;
	display: none;
	color: rgba(20, 20, 20, 0.6);
}

.ai-home__point-btn:has(.ai-home__point-num[data-point="0"]) {
	cursor: pointer;
	background:#FFF;
	color:var(--ai-main-bg);
}

.ai-home__point-btn:has(.ai-home__point-num[data-point="0"]):not(:hover) .ai-home__point-icon{
	background-position:-60px 0;
}

.ai-home__point-btn:has(.ai-home__point-num[data-point="0"]) .ai-home__point-charge {
	display: inline-block;
}

.ai-home__point-btn:has(.ai-home__point-num[data-point="0"]):hover {
	background:radial-gradient(ellipse 115px 80px at 50% 241%, rgba(72, 249, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

/* 로딩 상태: pointInfo.do 응답 전 초기 data-point="0"으로 인한 충전모드 깜빡임 방지. JS가 fetch 완료 후 클래스 제거 */
.ai-home__point-btn.is-loading > * {
	visibility: hidden;
}

.ai-home__point-btn.is-loading::before,
.ai-home__point-btn.is-loading::after {
	display: none;
}

.ai-home__point-btn::after {
	content: "잔여 AI 포인트";
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 9px;
	background: rgba(46, 122, 124, 0.9);
	color: #fff;
	font-family: Pretendard, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: -0.39px;
	text-align: center;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 100;
}

/* 툴팁 화살표 (figma Polygon 1: 11x5, 박스 위쪽에 붙어 위를 가리킴) */
.ai-home__point-btn::before {
	content: "";
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 5.5px solid transparent;
	border-right: 5.5px solid transparent;
	border-bottom: 5px solid rgba(46, 122, 124, 0.9);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 100;
}

/* 포인터 디바이스(마우스)에서만 hover 발현 — 터치 환경에서는 :hover sticky 방지 + 툴팁 미노출 */
@media (hover: hover) and (pointer: fine) {
	.ai-home__point-btn:hover::after,
	.ai-home__point-btn:hover::before {
		opacity: 1;
	}
}

/* 0포인트 상태(data-point="0")에서는 문구를 충전 안내로 교체 */
.ai-home__point-btn:has(.ai-home__point-num[data-point="0"])::after {
	content: "포인트를 충전할 수 있습니다.";
}

/* ── 동적 컨텐츠 영역 ──────────────────────────────────
   우측 영역 내부 디자인은 각 기능별 JS 프레임워크가 담당.
   이 컨테이너는 크기·위치 레이아웃만 정의함.
   ───────────────────────────────────────────────────── */
.ai-home__content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}

/* 탭별 독립 컨테이너 — 활성 탭만 visible, 나머지는 [hidden] 으로 display:none.
   각 React 번들이 자기 DOM tree에서만 React 인스턴스를 다루도록 분리하기 위한 구조. */
.ai-tab-pane {
	width: 100%;
	height: 100%;
}

.ai-tab-pane[hidden]{
	display:none;
}

/* =====================================================
   반응형 : 1000px (사이드바 170px으로 축소)
   ===================================================== */
@media (max-width: 1000px) {
	:root {
		--ai-sb-width: 170px;
	}

	.ai-home__logo-text{
		margin-left:25.5px;
	}

	/*.ai-home__logo a {
		width: 123px;
		height: 16.5px;
	}*/

	.ai-home__nav-item {
		padding-left: 20px;
	}
	
	/* bg gradient: Figma 1000px/768px 디자인 좌표 — wrapper 1665×1326으로 stretch + vertical -782 (가운데 정렬) */
	.ai-home__bg{
		background-size:140%;
		background-position:center top;
	}
}

/* =====================================================
   반응형 : 600px 이하 (사이드바 → 하단 탭바)
   ===================================================== */
@media (max-width: 768px) {

	/* 사이드바가 하단 탭바로 변경되므로 폭 보정 무효화 */
	:root {
		--ai-sb-width: 0px;
	}
	
	.ai-home__logo-text{
		display:none;
	}

	.ai-home {
		flex-direction: column;
	}

	/* 사이드바: 구조 해제 (자식 요소들이 직접 배치됨) */
	.ai-home__sidebar {
		display: contents;
	}

	/* 로고 (데스크탑 워드마크): 숨김 */
	.ai-home__logo {
		display: none;
	}

	/* 내비게이션 → 하단 고정 탭바 */
	.ai-home__nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		height: var(--ai-nav-h-mo);
		background: var(--ai-main-bg);
		z-index: 1000;
		flex: none;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-bottom: 0;
		box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, 0.50);
	}

	.ai-home__nav::-webkit-scrollbar {
		display: none;
	}

	.ai-home__nav-item {
		width: auto;
		flex-direction: row;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		height: var(--ai-nav-h-mo);
		padding: 0 20px;
		gap:5px;
		font-size: 13px;
		font-weight: 600;
		opacity: 0.5;
		background: none;
		border: none;
		white-space: nowrap;
	}

	.ai-home__nav-item.is-active {
		opacity: 1;
		/*border-top: 2px solid #fff;*/
		border-bottom: none;
	}
	
	.ai-home__nav-item.is-active::before{
		content:"";
		width:100%;
		height:2px;
		position:absolute;
		top:0;
		background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, #fff 20%, rgba(255, 255, 255, 0) 100%);
	}

	.ai-home__nav-item.is-active::after {
		display: none;
	}

	/* 모바일: 축약 라벨 표시, 전체 라벨 숨김 */
	.ai-home__nav-label {
		display: none;
	}

	.ai-home__nav-label-short {
		display: inline;
	}

	/* 아이콘 크기 동일 유지 */
	.ai-home__nav-icon {
		width: 28px;
		height: 28px;
	}

	/* 메인: 전체 화면 활용. overflow는 base의 hidden 유지 — 스크롤은 .ai-home__content가 담당 (topbar absolute가 함께 스크롤되는 것 방지) */
	.ai-home__main {
		/*flex: 1;
		height: calc(100vh - var(--ai-nav-h-mo));*/
	}

	/* 탑바: 로고 + 인증버튼 (tablet: Figma 기준 padding 20px) */
	.ai-home__topbar {
		/*position: relative;*/
		width: 100%;
		top: auto;
		right: auto;
		left: auto;
		padding:10px;
		height: var(--ai-topbar-h);
		flex-shrink: 0;
		z-index: 10;
	}

	/* 모바일 로고 아이콘 표시 */
	.ai-home__logo-mobile {
		display:flex;
	}

	/* 인증 버튼 소형화 */
	.ai-home__btn-login,
	.ai-home__btn-join {
		letter-spacing: -0.39px;
	}
	
	/* 특정 메뉴의 홈 화면일 경우에 */
	.ai-home__main .ai-tab-pane > div[data-page="/"]{
		height:calc(100dvh - var(--ai-nav-h-mo));
	}
	
	.ai-home__topbar{
		padding:10px 10px;
	}
	
	/* bg gradient: Figma 390px 디자인 좌표 — wrapper 578×460으로 축소 + vertical -208 (가운데 정렬) */
	.ai-home__bg{
		background-size:180%;
	}
}