@charset "utf-8";
/* ============================================================
 * feature_tips.css v1.1 - 새 기능 안내 코치마크(말풍선) 공용 스타일
 *   스니펫 = js/comm/feature_tips.js (commScripts.jsp에서 로드)
 *   2026-07-24 창B(v1.0). 2026-07-25 v1.1: 중앙 하단 코치마크(.ft-center) + 좌우 화살(←→) 애니메이션.
 *   이모지 0 / 정적 스타일 전부 여기(좌표만 JS 동적 = 코치마크 위치추종, gnbSwipe 전례와 동일 원칙).
 *   톤 = 딥그린 pill 일치 + 화살촉(대상 지목형) / 중앙형은 화살촉 없이 하단 중앙.
 * ============================================================ */
.ftip{
	position:fixed;
	z-index:9200;
	max-width:260px;
	padding:9px 14px;
	border-radius:10px;
	background:#3D6041;
	color:#fff;
	font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
	font-size:13px;
	font-weight:600;
	letter-spacing:-.01em;
	line-height:1.45;
	box-shadow:0 6px 20px rgba(0,0,0,.26);
	opacity:0;
	visibility:hidden;
	transform:translateY(6px);
	transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
	pointer-events:auto;
	cursor:pointer;
}
.ftip.show{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
/* 화살촉 = 8px 삼각형(회전 사각형) */
.ftip::after{
	content:"";
	position:absolute;
	width:12px;
	height:12px;
	background:#3D6041;
	transform:rotate(45deg);
	box-shadow:0 6px 20px rgba(0,0,0,.10);
}
/* 대상 아래에 뜸 = 화살촉이 위를 가리킴 */
.ftip.ft-below::after{
	top:-5px;
	left:var(--ft-arrow, 24px);
}
/* 대상 위에 뜸 = 화살촉이 아래를 가리킴 */
.ftip.ft-above::after{
	bottom:-5px;
	left:var(--ft-arrow, 24px);
}
@media (prefers-reduced-motion: reduce){
	.ftip{ transition:opacity .01s linear; transform:none; }
	.ftip.show{ transform:none; }
}

/* ============================================================
 * v1.1 중앙 하단 코치마크(.ft-center) — 대상 없이 화면 하단 중앙(테마 스와이프 학습 힌트)
 *   고정 하단메뉴 위에 배치, 화살촉 없음. 좌우 화살(←→) 1회 애니메이션으로 제스처 암시.
 * ============================================================ */
.ftip.ft-center{
	left:50%;
	top:auto;
	bottom:84px;
	max-width:88%;
	white-space:nowrap;
	text-align:center;
	transform:translateX(-50%) translateY(6px);
}
.ftip.ft-center.show{
	transform:translateX(-50%) translateY(0);
}
.ftip.ft-center::after{ display:none; }   /* 중앙형 = 화살촉 없음 */

/* 좌우 화살(←→) 가벼운 1회 애니메이션 */
.ftip .fta-gap{ display:inline-block; width:6px; }
.ftip .fta{
	display:inline-block;
	font-weight:700;
	font-family:Arial, sans-serif;
}
.ftip .fta-l{ animation:ftaL .9s ease-in-out 1 both; }
.ftip .fta-r{ animation:ftaR .9s ease-in-out 1 both; }
@keyframes ftaL{ 0%,100%{ transform:translateX(0); } 45%{ transform:translateX(-4px); } }
@keyframes ftaR{ 0%,100%{ transform:translateX(0); } 45%{ transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce){
	.ftip .fta-l, .ftip .fta-r{ animation:none; }
}