/* AI.PLAYLAB Landing Page Styles */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', 'Inter', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 호버 효과 */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: scale(1.02);
}

/* AI 배우기 섹션 카드 스타일 */
.learn-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.learn-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* ===== 메인 메뉴 스타일 ===== */

/* 데스크톱 메뉴 링크 - Expanding Underline */
.nav-link {
    position: relative;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: #4A4A68;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #4B4CED, #00E5BC);
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-link:hover {
    color: #1A1A2E;
}

.nav-link:hover::after {
    width: 100%;
}

/* 활성 메뉴 링크 */
.nav-link-active {
    color: #4B4CED;
    font-weight: 700;
}

.nav-link-active::after {
    width: 100%;
}

/* ===== 모바일 메뉴 - Slide-in Panel ===== */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 55;
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: #FAFBFC;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 60;
    padding: 24px;
    overflow-y: auto;
}

.mobile-menu-panel.open {
    right: 0;
}

/* 메뉴 아이템 스태거 애니메이션 */
.mobile-nav-item {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.35s ease;
}

.mobile-menu-panel.open .mobile-nav-item {
    opacity: 1;
    transform: translateX(0);
}

.mobile-nav-item:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-nav-item:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-nav-item:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-nav-item:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-nav-item:nth-child(5) {
    transition-delay: 0.3s;
}

.mobile-nav-item:nth-child(6) {
    transition-delay: 0.35s;
}

.mobile-nav-item:nth-child(7) {
    transition-delay: 0.4s;
}

.mobile-nav-item:nth-child(8) {
    transition-delay: 0.45s;
}

.mobile-nav-item:nth-child(9) {
    transition-delay: 0.5s;
}

/* 모바일 메뉴 링크 */
.mobile-nav-link {
    display: block;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 500;
    color: #4A4A68;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: color 0.2s ease;
}

.mobile-nav-link:hover {
    color: #1A1A2E;
}

/* ===== 직군별 탭 네비게이션 스타일 ===== */

/* 탭 버튼 기본 스타일 */
.job-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    font-weight: 700;
    font-size: 14px;
    color: #374151;
    white-space: nowrap;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.job-tab:hover {
    transform: translateY(-2px);
}

.job-tab:hover .job-tab-icon {
    animation: icon-bounce 0.5s ease;
}

/* 활성 탭 스타일 - 각 직군별 컬러로 오버라이드 */
.job-tab[data-active="true"] {
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
}

/* 도구 개수 뱃지 */
.job-tab-badge {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    transition: all 0.3s ease;
}

/* 아이콘 바운스 애니메이션 */
@keyframes icon-bounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-3px) rotate(-5deg);
    }

    50% {
        transform: translateY(-5px) rotate(5deg);
    }

    75% {
        transform: translateY(-2px) rotate(-3deg);
    }
}

/* 활성 탭 펄스 글로우 */
@keyframes tab-pulse {

    0%,
    100% {
        box-shadow: 0 4px 20px var(--glow-color, rgba(99, 102, 241, 0.4));
    }

    50% {
        box-shadow: 0 6px 30px var(--glow-color, rgba(99, 102, 241, 0.6));
    }
}

.job-tab[data-active="true"] {
    animation: tab-pulse 2.5s ease-in-out infinite;
}

/* 직군별 컬러 시스템 (8개 직군) */
/* 마케팅 - Rose */
.job-tab[data-job="marketing"]:hover {
    border-color: #fecdd3;
    background: rgba(255, 228, 230, 0.5);
}

.job-tab[data-job="marketing"][data-active="true"] {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    --glow-color: rgba(244, 63, 94, 0.5);
}

.job-tab[data-job="marketing"] .job-tab-icon {
    color: #f43f5e;
}

.job-tab[data-job="marketing"] .job-tab-badge {
    background: #ffe4e6;
    color: #e11d48;
}

.job-tab[data-job="marketing"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="marketing"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* 기획/전략 - Amber */
.job-tab[data-job="planning"]:hover {
    border-color: #fde68a;
    background: rgba(254, 243, 199, 0.5);
}

.job-tab[data-job="planning"][data-active="true"] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    --glow-color: rgba(245, 158, 11, 0.5);
}

.job-tab[data-job="planning"] .job-tab-icon {
    color: #f59e0b;
}

.job-tab[data-job="planning"] .job-tab-badge {
    background: #fef3c7;
    color: #d97706;
}

.job-tab[data-job="planning"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="planning"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* 영업 - Orange */
.job-tab[data-job="sales"]:hover {
    border-color: #fed7aa;
    background: rgba(255, 237, 213, 0.5);
}

.job-tab[data-job="sales"][data-active="true"] {
    background: linear-gradient(135deg, #f97316, #ea580c);
    --glow-color: rgba(249, 115, 22, 0.5);
}

.job-tab[data-job="sales"] .job-tab-icon {
    color: #f97316;
}

.job-tab[data-job="sales"] .job-tab-badge {
    background: #ffedd5;
    color: #ea580c;
}

.job-tab[data-job="sales"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="sales"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* 재무/회계 - Blue */
.job-tab[data-job="finance"]:hover {
    border-color: #bfdbfe;
    background: rgba(219, 234, 254, 0.5);
}

.job-tab[data-job="finance"][data-active="true"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    --glow-color: rgba(59, 130, 246, 0.5);
}

.job-tab[data-job="finance"] .job-tab-icon {
    color: #3b82f6;
}

.job-tab[data-job="finance"] .job-tab-badge {
    background: #dbeafe;
    color: #2563eb;
}

.job-tab[data-job="finance"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="finance"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* HR/인사 - Teal */
.job-tab[data-job="hr"]:hover {
    border-color: #99f6e4;
    background: rgba(204, 251, 241, 0.5);
}

.job-tab[data-job="hr"][data-active="true"] {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    --glow-color: rgba(20, 184, 166, 0.5);
}

.job-tab[data-job="hr"] .job-tab-icon {
    color: #14b8a6;
}

.job-tab[data-job="hr"] .job-tab-badge {
    background: #ccfbf1;
    color: #0d9488;
}

.job-tab[data-job="hr"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="hr"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* 디자인 - Purple */
.job-tab[data-job="design"]:hover {
    border-color: #ddd6fe;
    background: rgba(237, 233, 254, 0.5);
}

.job-tab[data-job="design"][data-active="true"] {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    --glow-color: rgba(168, 85, 247, 0.5);
}

.job-tab[data-job="design"] .job-tab-icon {
    color: #a855f7;
}

.job-tab[data-job="design"] .job-tab-badge {
    background: #ede9fe;
    color: #9333ea;
}

.job-tab[data-job="design"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="design"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* 개발 - Emerald */
.job-tab[data-job="dev"]:hover {
    border-color: #a7f3d0;
    background: rgba(209, 250, 229, 0.5);
}

.job-tab[data-job="dev"][data-active="true"] {
    background: linear-gradient(135deg, #10b981, #059669);
    --glow-color: rgba(16, 185, 129, 0.5);
}

.job-tab[data-job="dev"] .job-tab-icon {
    color: #10b981;
}

.job-tab[data-job="dev"] .job-tab-badge {
    background: #d1fae5;
    color: #059669;
}

.job-tab[data-job="dev"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="dev"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* 기타 - Gray */
.job-tab[data-job="other"]:hover {
    border-color: #d1d5db;
    background: rgba(229, 231, 235, 0.5);
}

.job-tab[data-job="other"][data-active="true"] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    --glow-color: rgba(107, 114, 128, 0.5);
}

.job-tab[data-job="other"] .job-tab-icon {
    color: #6b7280;
}

.job-tab[data-job="other"] .job-tab-badge {
    background: #e5e7eb;
    color: #4b5563;
}

.job-tab[data-job="other"][data-active="true"] .job-tab-icon {
    color: white;
    background: transparent;
}

.job-tab[data-job="other"][data-active="true"] .job-tab-badge {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* 탭 컨테이너 스크롤 페이드 */
.job-tab-container {
    position: relative;
}

.job-tab-container::before,
.job-tab-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 10;
}

.job-tab-container::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
    border-radius: 16px 0 0 16px;
}

.job-tab-container::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
    border-radius: 0 16px 16px 0;
}

/* ===== 워크플로우 섹션 스타일 ===== */

/* 워크플로우 카드 - 라이트 모드 */
.workflow-card {
    background: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.workflow-card:hover {
    border-color: rgba(75, 76, 237, 0.5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
}

/* 필터 탭 스타일 - 라이트 모드 */
.workflow-filter-tab {
    background: white;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}

.workflow-filter-tab:hover {
    background: #f9fafb;
    color: #374151;
}

.workflow-filter-tab.active {
    background: #4B4CED;
    border-color: #4B4CED;
    color: white;
}

/* 워크플로우 카드 진입 애니메이션 */
@keyframes workflowFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.workflow-card {
    animation: workflowFadeInUp 0.5s ease-out forwards;
}

.workflow-card:nth-child(1) {
    animation-delay: 0ms;
}

.workflow-card:nth-child(2) {
    animation-delay: 80ms;
}

.workflow-card:nth-child(3) {
    animation-delay: 160ms;
}

.workflow-card:nth-child(4) {
    animation-delay: 240ms;
}

.workflow-card:nth-child(5) {
    animation-delay: 320ms;
}

.workflow-card:nth-child(6) {
    animation-delay: 400ms;
}

.workflow-card:nth-child(7) {
    animation-delay: 480ms;
}

.workflow-card:nth-child(8) {
    animation-delay: 560ms;
}

/* 필터 전환 애니메이션 */
.workflow-card.hidden {
    display: none;
}

.workflow-card.fade-out {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease-out;
}

.workflow-card.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

/* ===== 직군별 추천 AI 페이지 스타일 ===== */

/* 직군 카테고리 카드 */
.job-category-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-category-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.job-category-card:hover .job-icon {
    animation: icon-bounce 0.5s ease;
}

/* 통계 카운트업 애니메이션 */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-number {
    animation: countUp 0.6s ease-out forwards;
}

/* ===== 워크플로우 페이지 스타일 ===== */

/* 플로팅 작성 버튼 */
.floating-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-btn.collapsed .btn-text {
    width: 0;
    opacity: 0;
    margin-left: 0;
}

.floating-btn .btn-text {
    width: auto;
    opacity: 1;
    margin-left: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* 워크플로우 카드 확장형 */
.workflow-card-extended {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow-card-extended:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* 직군별 뱃지 색상 */
.badge-marketing { background: #ffe4e6; color: #e11d48; }
.badge-planning { background: #fef3c7; color: #d97706; }
.badge-sales { background: #ffedd5; color: #ea580c; }
.badge-finance { background: #dbeafe; color: #2563eb; }
.badge-hr { background: #ccfbf1; color: #0d9488; }
.badge-design { background: #ede9fe; color: #9333ea; }
.badge-dev { background: #d1fae5; color: #059669; }
.badge-other { background: #e5e7eb; color: #4b5563; }

/* ===== AI 배우기 페이지 스타일 ===== */

/* 난이도 뱃지 */
.badge-beginner { background: #d1fae5; color: #059669; }
.badge-basic { background: #dbeafe; color: #2563eb; }
.badge-intermediate { background: #fef3c7; color: #d97706; }
.badge-advanced { background: #fee2e2; color: #dc2626; }

/* 가격 뱃지 */
.badge-free { background: #d1fae5; color: #059669; }
.badge-paid { background: #dbeafe; color: #2563eb; }

/* 대상자 뱃지 */
.badge-non-dev { background: #fef3c7; color: #d97706; }

/* 컨텐츠 유형 뱃지 */
.badge-text { background: #e5e7eb; color: #4b5563; }
.badge-video { background: #fee2e2; color: #dc2626; }
.badge-youtube { background: #fee2e2; color: #dc2626; }
.badge-class101 { background: #fef3c7; color: #d97706; }

/* 학습 카드 호버 */
.learning-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.learning-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* 목차 사이드바 */
.curriculum-chapter {
    cursor: pointer;
}
.curriculum-chapter:hover {
    background: rgba(75, 76, 237, 0.05);
}
.curriculum-lesson {
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
}
.curriculum-lesson:hover {
    background: rgba(75, 76, 237, 0.05);
}
.curriculum-lesson.active {
    border-left-color: #4B4CED;
    background: rgba(75, 76, 237, 0.1);
}
.curriculum-lesson.completed {
    opacity: 0.7;
}
.curriculum-lesson.locked {
    opacity: 0.5;
}

/* ===== 워크플로우 상세 페이지 스타일 ===== */

/* 읽기 진행률 바 */
.reading-progress-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.reading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4B4CED, #00E5BC);
    transition: width 0.3s ease;
}

/* 목차 링크 */
.toc-link {
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.toc-link:hover {
    color: #4B4CED;
    background: rgba(75, 76, 237, 0.05);
}

.toc-link.active {
    color: #4B4CED;
    border-left-color: #4B4CED;
    background: rgba(75, 76, 237, 0.1);
    font-weight: 600;
}

/* 좋아요 버튼 */
.like-btn.liked {
    background: #ffe4e6;
    color: #e11d48;
    border-color: #fecdd3;
}

.like-btn.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* ===== 커뮤니티 페이지 스타일 ===== */

/* 커뮤니티 필터 탭 */
.community-filter-tab {
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    background: white;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    transition: all 0.2s ease;
    cursor: pointer;
}

.community-filter-tab:hover {
    background: #f9fafb;
    color: #374151;
    border-color: #d1d5db;
}

.community-filter-tab.active {
    background: #4B4CED;
    border-color: #4B4CED;
    color: white;
}

/* 커뮤니티 카드 */
.community-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.community-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

/* 커뮤니티 카드 진입 애니메이션 */
@keyframes communityCardIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.community-card {
    animation: communityCardIn 0.4s ease-out forwards;
}

/* 스태거 애니메이션 딜레이 */
.community-card:nth-child(3n+1) { animation-delay: 0ms; }
.community-card:nth-child(3n+2) { animation-delay: 60ms; }
.community-card:nth-child(3n) { animation-delay: 120ms; }

/* 커뮤니티 카테고리 뱃지 색상 */
.badge-qna { background: #dbeafe; color: #2563eb; }
.badge-mention { background: #fef3c7; color: #d97706; }
.badge-tips { background: #d1fae5; color: #059669; }
.badge-community-free { background: #ede9fe; color: #9333ea; }

/* 댓글 입력창 */
.comment-input:focus {
    border-color: #4B4CED;
    box-shadow: 0 0 0 3px rgba(75, 76, 237, 0.1);
}

/* 댓글 좋아요 버튼 */
.like-comment-btn {
    transition: all 0.2s ease;
}

.like-comment-btn.liked {
    color: #e11d48;
}

.like-comment-btn.liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* 사이드바 추천글 순위 */
.recommend-rank {
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.recommend-rank.top-3 {
    background: linear-gradient(135deg, #4B4CED, #818CF8);
    color: white;
}

.recommend-rank.normal {
    background: #f3f4f6;
    color: #6b7280;
}

/* 광고 배너 플레이스홀더 */
.ad-banner-placeholder {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border: 2px dashed #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
}

/* ===== 벤치마크 섹션 스타일 ===== */

/* 모델 점수 영역 - 5개 모델 기준 고정 높이로 통일 */
.score-area {
    height: 120px;
}