/* 헤더 네비게이션 호버 컬러 및 스무스 트랜지션 */
:root {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --border-color: #e5e7eb;
    --slate-800: #1e293b;
    --slate-600: #475569;
}


html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh; /* 화면 전체 높이를 최소 기반으로 잡음 */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column; /* 자식 요소들을 위에서 아래로 배치 */
    overflow-x: hidden !important;
}

#Main_Content {
    flex: 1 0 auto;         /* 푸터를 아래로 밀어내는 역할 */
    display: flex;          /* [추가] 자식(.hero-section)을 늘려주기 위함 */
    flex-direction: column; /* [추가] 세로 방향으로 정렬 */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#Main_Footer {
    flex-shrink: 0;
    width: 100% !important;
    max-width: 100% !important;
}

/* 1번 페이지 상단 바 영역 수정 */
#headerOutDiv {
    /* 기존 100vw를 100%로 변경 (스크롤바 두께만큼 오른쪽 여백 생기는 현상 방지) */
    width: 100% !important; 
}

/* 부트스트랩 row 음수 마진으로 인한 넘침 방어 */
.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100%;
}

.navbar-nav .nav-link {
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}
.navbar-nav .nav-link:hover {
    color: #4f46e5 !important; /* var(--primary-color) 대신 확실한 포인트 매칭 */
    transform: translateY(-1px);
}
.dropdown-item {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-item:hover {
    background-color: #f5f3ff !important;
    color: #4f46e5 !important;
    padding-left: 1rem !important; /* 마우스 올렸을 때 슬라이딩 효과 디테일 */
}

/* 헤더 자체에 미세한 입체감을 주는 애니메이션 클래스 */
#header {
    transition: all 0.3s ease-in-out;
}

.hero-section {
    position: relative;
    /* min-height: calc(100vh - 160px); <- [삭제] 수동 계산은 오차를 만듭니다. */
    flex-grow: 1;           /* [변경] 상단 헤더와 하단 푸터를 제외한 '남은 화면 전체'를 알아서 꽉 채웁니다. */
    
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100% !important;
    background-color: #f6f8fc !important; 
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 85% 15%, rgba(165, 180, 252, 0.45) 0%, transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(224, 242, 254, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 50% 110%, rgba(254, 226, 226, 0.5) 0%, transparent 45%),
        radial-gradient(circle at 75% 65%, rgba(243, 232, 255, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(244, 247, 251, 1) 100%) !important;
    background-size: 40px 40px, 40px 40px, auto, auto, auto, auto, auto !important;
}

/* 기존에 문제를 일으키던 자식 .hero-bg 코드는 완전히 비워두거나 삭제하세요! */
.hero-bg {
	display: none !important;
}

/* 유리의 맑고 깨끗한 굴절 효과를 더해주는 보정 오버레이 */
.hero-overlay {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
	backdrop-filter: saturate(120%);
	-webkit-backdrop-filter: saturate(120%);
	z-index: -1;
}

.hero-content {
	z-index: 1;
	color: #0f172a;
	width: 100%;
	overflow: hidden;
}

/* 화려한 배경 위에서 명확한 덩어리감과 고급스러운 유리 질감을 뿜어내는 피처 카드 */
.feature-card {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 1.5rem;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
	/* 조명 효과와 매칭되는 엠비언트 라이트 섀도우 처리 */
	box-shadow: 0 10px 40px rgba(99, 102, 241, 0.04), 0 1px 3px rgba(0, 0, 0, 0.01);
}

.feature-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 20px 50px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(99, 102, 241, 0.04);
	border-color: rgba(165, 180, 252, 0.6);
}

/* 테크니컬 무드의 스무스 아이콘 박스 */
.feature-icon-wrapper {
	width: 56px;
	height: 56px;
	background: white;
	color: #4f46e5;
	border-radius: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.06);
}

/* 미래지향적 그라데이션 솔리드 버튼 */
.btn-primary-custom {
	background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
	border: none;
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-custom:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4);
	opacity: 0.95;
}

/* ── [기본 상태] 마우스 올리기 전 ── */

/* 기존 부트스트랩 card 디자인에 맞춰 하위 오버레이 영역을 제어하기 위함 */
.card-ready-yet {
    overflow: hidden;
}

/* 마우스 올리기 전: 내부 콘텐츠를 미리 살짝 흐리고 투명하게 */
.card-ready-yet .blur-target {
    filter: blur(1.5px);
    opacity: 0.55; /* 부트스트랩 opacity-55 수준 */
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* 마우스 올리기 전: '준비중' 레이어는 숨겨둠 */
.card-ready-yet .ready-overlay {
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* '준비중' 뱃지 텍스트 스타일 (부트스트랩 디자인 무드 반영) */
.card-ready-yet .ready-text {
    background: #0f172a; /* 부트스트랩 slate-900 계열 색상 직접 지정 */
    color: #ffffff;
    padding: 0.5rem 1.2rem;
    border-radius: 50rem; /* 부트스트랩 rounded-pill 역할 */
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── [호버 상태] 마우스 올렸을 때 ── */

/* 1. 마우스 호버 시 내부 콘텐츠를 '더 많이' 흐리게 처리 */
.card-ready-yet:hover .blur-target {
    filter: blur(4px);
    opacity: 0.25;
}

/* 2. 마우스 호버 시 오버레이 투명도 복원 */
.card-ready-yet:hover .ready-overlay {
    opacity: 1;
}

/* 3. 마우스 호버 시 '준비중' 텍스트가 아래에서 위로 살짝 올라오며 등장 */
.card-ready-yet:hover .ready-text {
    transform: translateY(0);
}

/*///////////////////////////////////////////////////////////////////////*/

/* 요금제 베이스 스타일 */
.pricing-specs li {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
}
.text-muted-50 { opacity: 0.5; }

/* 툴팁 트리거 스타일 지정 */
.border-bottom-dashed {
    border-bottom: 1px dashed #64748b;
    cursor: help;
    position: relative;
    display: inline-block;
}

/* 툴팁을 감싸는 부모: 기준점 역할을 합니다 */
.css-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

/* 점선 언더라인 스타일 유지 */
.css-tooltip-wrapper .border-bottom-dashed {
    border-bottom: 1px dashed #64748b;
    cursor: help;
}

/* ── [핵심] CSS로 제어하는 새 툴팁 박스 디자인 ── */
.css-tooltip-box {
    position: absolute;
    /* 부모 글자의 정중앙 상단에 배치 */
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -8px); 
    
    background: #0f172a;
    color: #ffffff;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    
    /* 평소에는 투명하게 숨김 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 말풍선 아래쪽 삼각형 꼬리표 */
.css-tooltip-box::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #0f172a transparent transparent;
}

/* ── 마우스 올렸을 때(Hover) 액션 ── */
.css-tooltip-wrapper:hover .css-tooltip-box {
    opacity: 1;
    /* 살짝 위로 부드럽게 떠오르는 효과 추가 */
    transform: translate(-50%, -14px); 
}

/* 중앙 Pro Business 카드 스케일링 */
.featured-pricing-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 2px solid rgba(99, 102, 241, 0.4) !important;
    transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.15) !important;
}
@media (min-width: 1200px) {
    .featured-pricing-card { transform: scale(1.04); }
    .featured-pricing-card:hover { transform: scale(1.06) translateY(-4px) !important; }
}

.text-indigo { color: #4f46e5; }
.text-indigo-highlight { color: #2563eb; font-weight: 700; }

/* 버튼 디자인 */
.btn-outline-custom {
    background: #ffffff; color: #4f46e5; border: 2px solid #e5e7eb; border-radius: 0.75rem; transition: all 0.25s ease;
}
.btn-outline-custom:hover {
    border-color: #4f46e5; background: rgba(79, 70, 229, 0.04); color: #4338ca; transform: translateY(-2px);
}
.btn-dark-custom {
    background: #0f172a; color: #ffffff; border: none; border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); transition: all 0.25s ease;
}
.btn-dark-custom:hover {
    background: #1e293b; color: #ffffff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3); transform: translateY(-2px);
}