@extends('layouts.app')

@section('title', '연차휴가/근태관리')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
    .att-body { font-family: 'Noto Sans KR', sans-serif; color: #1e293b; }

    /* 히어로 */
    .att-hero { background: linear-gradient(135deg, #1a3c34 0%, #065f46 40%, #047857 70%, #10b981 100%); }
    .att-hero-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: blur(80px); opacity: 0.12; }

    /* 탭 */
    .att-tab { padding: 0.5rem 1.25rem; border-radius: 2rem; font-weight: 600; font-size: 0.8rem; transition: all 0.2s; border: 2px solid transparent; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); cursor: pointer; }
    .att-tab:hover { color: white; background: rgba(255,255,255,0.1); }
    .att-tab.active { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.3); }
    .att-section { display: none; }
    .att-section.active { display: block; }

    /* 플로우 카드 */
    .flow-card { background: white; border-radius: 1rem; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s; }
    .flow-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
    .flow-head { padding: 1rem 1.25rem; color: white; font-weight: 700; font-size: 0.85rem; }
    .flow-body { padding: 1.25rem; }

    /* 스텝 */
    .step-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; position: relative; }
    .step-row:last-child { margin-bottom: 0; }
    .step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; color: white; flex-shrink: 0; }
    .step-content { flex: 1; }
    .step-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; }
    .step-desc { font-size: 0.75rem; color: #64748b; line-height: 1.6; }
    .step-menu { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; margin-top: 4px; }

    /* 연결 화살표 */
    .flow-arrow { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; color: #94a3b8; font-size: 1.5rem; }

    /* 주의사항 박스 */
    .notice-box { border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 0.8rem; line-height: 1.7; }
    .notice-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
    .notice-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
    .notice-tip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
    .notice-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

    /* 메뉴 맵 */
    .menu-map { background: #f8fafc; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1.5rem; }
    .menu-group { margin-bottom: 1.25rem; }
    .menu-group:last-child { margin-bottom: 0; }
    .menu-group-title { font-weight: 800; font-size: 0.85rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
    .menu-item { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 500; background: white; border: 1px solid #e2e8f0; margin: 2px; transition: all 0.2s; }
    .menu-item:hover { border-color: #10b981; background: #f0fdf4; }
    .menu-item-num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 800; color: white; }

    /* 타임라인 */
    .timeline { position: relative; padding-left: 2rem; }
    .timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: #d1d5db; }
    .timeline-item { position: relative; margin-bottom: 1.5rem; }
    .timeline-item:last-child { margin-bottom: 0; }
    .timeline-dot { position: absolute; left: -2rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #d1d5db; }

    /* 비교 테이블 */
    .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.75rem; }
    .cmp-table th { background: #f1f5f9; padding: 0.6rem 0.75rem; font-weight: 700; text-align: left; border-bottom: 2px solid #e2e8f0; }
    .cmp-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
    .cmp-table tr:hover td { background: #f8fafc; }

    /* 프로세스 흐름 */
    .process-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
    .process-step { flex: 1; min-width: 100px; max-width: 160px; text-align: center; padding: 1rem 0.5rem; position: relative; }
    .process-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-size: 1.25rem; }
    .process-name { font-weight: 700; font-size: 0.8rem; }
    .process-sub { font-size: 0.65rem; color: #64748b; margin-top: 2px; }
    .process-arrow { display: flex; align-items: center; color: #cbd5e1; font-size: 1.2rem; padding: 0 2px; }

    /* 배지 */
    .badge-green { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #dcfce7; color: #166534; }
    .badge-blue { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #dbeafe; color: #1e40af; }
    .badge-amber { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #fef3c7; color: #92400e; }
    .badge-red { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #fee2e2; color: #991b1b; }
    .badge-purple { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #f3e8ff; color: #6b21a8; }

    /* 카운트 카드 */
    .count-card { background: white; border-radius: 0.75rem; border: 1px solid #e2e8f0; padding: 1.25rem; text-align: center; transition: all 0.3s; }
    .count-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
    .count-num { font-size: 2rem; font-weight: 900; line-height: 1; }
    .count-label { font-size: 0.7rem; font-weight: 600; margin-top: 0.25rem; }
    .count-desc { font-size: 0.65rem; color: #64748b; margin-top: 0.5rem; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
    .anim-in { animation: fadeIn 0.5s ease-out forwards; }
</style>
@endpush

@section('content')
<div class="att-body">

    {{-- ===== 히어로 ===== --}}
    <div class="att-hero text-white px-6 py-10 rounded-b-3xl mb-8 relative overflow-hidden">
        <div class="att-hero-glow" style="top: -40px; right: -40px; background: #34d399;"></div>
        <div class="att-hero-glow" style="bottom: -60px; left: 15%; background: #60a5fa;"></div>

        <div style="max-width: 1400px; margin: 0 auto; position: relative; z-index: 1;">
            <div class="flex items-center gap-3 mb-3">
                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #059669, #10b981); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 1.5rem;">📅</span>
                </div>
                <div>
                    <p class="text-emerald-300 text-xs font-bold tracking-wider uppercase">SAM 도움말</p>
                    <h1 class="text-3xl font-black">연차휴가/근태관리</h1>
                </div>
            </div>
            <p class="text-emerald-100 text-sm mb-6" style="max-width: 700px;">
                연차 발생부터 사용, 촉진제도, 결재 처리, 급여 연동까지.
                SAM 시스템의 근태관리 전체 프로세스를 한 눈에 이해할 수 있는 가이드입니다.
            </p>

            <div class="flex flex-wrap gap-2">
                <button class="att-tab active" onclick="switchAttTab(0)">전체 흐름도</button>
                <button class="att-tab" onclick="switchAttTab(1)">연차 발생/계산</button>
                <button class="att-tab" onclick="switchAttTab(2)">휴가 신청/결재</button>
                <button class="att-tab" onclick="switchAttTab(3)">근태 기록</button>
                <button class="att-tab" onclick="switchAttTab(4)">연차촉진제도</button>
                <button class="att-tab" onclick="switchAttTab(5)">급여 연동</button>
                <button class="att-tab" onclick="switchAttTab(6)">메뉴 맵</button>
            </div>
        </div>
    </div>

    <div style="max-width: 1400px; margin: 0 auto;" class="px-4">

        {{-- ===== 탭 0: 전체 흐름도 ===== --}}
        <div class="att-section active" id="attTab0">
            <h2 class="text-xl font-bold mb-2 text-gray-800">SAM 근태관리 전체 흐름</h2>
            <p class="text-sm text-gray-500 mb-6">입사부터 급여 정산까지, SAM에서 처리하는 근태/연차의 전체 라이프사이클을 보여줍니다.</p>

            {{-- 큰 흐름도 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">근태관리 순환 과정</h3>

                <div class="process-flow mb-6">
                    <div class="process-step">
                        <div class="process-icon" style="background: #dcfce7; color: #16a34a;">👤</div>
                        <div class="process-name">입사 등록</div>
                        <div class="process-sub">직원정보/입사일</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #dbeafe; color: #2563eb;">📊</div>
                        <div class="process-name">연차 발생</div>
                        <div class="process-sub">근속연수 기준</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #fef3c7; color: #d97706;">📝</div>
                        <div class="process-name">휴가 신청</div>
                        <div class="process-sub">연차/반차/특별휴가</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">✅</div>
                        <div class="process-name">결재 승인</div>
                        <div class="process-sub">상위 결재권자</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #fce7f3; color: #db2777;">📅</div>
                        <div class="process-name">근태 기록</div>
                        <div class="process-sub">출퇴근/지각/조퇴</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #ecfdf5; color: #059669;">💰</div>
                        <div class="process-name">급여 연동</div>
                        <div class="process-sub">연차수당/차감</div>
                    </div>
                </div>

                <div class="notice-info notice-box">
                    <strong>핵심 원리:</strong> SAM에서는 모든 근태 기록이 <strong>결재 승인</strong>을 기반으로 처리됩니다. 휴가는 반드시 신청 → 결재 → 승인의 과정을 거치며, 승인된 기록만 <strong>잔여 연차에 반영</strong>되고 <strong>급여 정산 시 자동 연동</strong>됩니다.
                </div>
            </div>

            {{-- 5대 영역 --}}
            <h3 class="font-bold text-sm text-gray-700 mb-3">SAM 근태관리 5대 영역</h3>
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
                        <span style="margin-right: 4px;">📅</span> 연차/휴가관리
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3"><strong>연차 발생과 사용</strong>을 관리합니다. "올해 연차 몇 개?", "남은 연차는?"</p>
                        <div class="space-y-1">
                            <div class="step-menu">휴가관리 — 휴가 신청/승인/이력</div>
                            <div class="step-menu">연차잔여현황 — 개인별 연차 현황</div>
                            <div class="step-menu">연차촉진관리 — 미사용 연차 촉진</div>
                            <div class="step-menu">연차발생기준 — 근속연수별 자동계산</div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
                        <span style="margin-right: 4px;">⏰</span> 출퇴근/근태기록
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3">일일 <strong>출퇴근 시간과 근태 상태</strong>를 기록합니다. 지각, 조퇴, 결근 자동 판별.</p>
                        <div class="space-y-1">
                            <div class="step-menu">근태현황 — 월별 출퇴근 기록 조회</div>
                            <div class="step-menu">근태관리 통합 — 전 직원 근태 대시보드</div>
                            <div class="step-menu">출퇴근 기록 — 일일 근무시간 체크</div>
                            <div class="step-menu">근무유형 — 정상/지각/조퇴/결근/외근</div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
                        <span style="margin-right: 4px;">📋</span> 결재 처리
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3">휴가 신청, 근태 변경에 대한 <strong>결재 승인 프로세스</strong>를 관리합니다.</p>
                        <div class="space-y-1">
                            <div class="step-menu">결재관리 — 휴가/근태 결재 목록</div>
                            <div class="step-menu">결재선 설정 — 부서별 결재 경로</div>
                            <div class="step-menu">대결 설정 — 부재 시 대리 결재</div>
                            <div class="step-menu">결재 이력 — 승인/반려 히스토리</div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #d97706, #fbbf24);">
                        <span style="margin-right: 4px;">👥</span> 인사 기초정보
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3">근태관리의 기반이 되는 <strong>직원/부서/입퇴사 정보</strong>를 관리합니다.</p>
                        <div class="space-y-1">
                            <div class="step-menu">입퇴사자현황 — 입사일/퇴사일 관리</div>
                            <div class="step-menu">직원관리 — 인적사항/소속 부서</div>
                            <div class="step-menu">부서관리 — 조직 구조 설정</div>
                            <div class="step-menu">직위/직급 — 결재 권한 기준</div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #db2777, #f472b6);">
                        <span style="margin-right: 4px;">💰</span> 급여/정산 연동
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3">근태 결과가 <strong>급여에 자동 반영</strong>됩니다. 연차수당, 결근 차감, 초과근무 수당.</p>
                        <div class="space-y-1">
                            <div class="step-menu">급여관리 — 월별 급여 산정</div>
                            <div class="step-menu">연차수당 — 미사용 연차 보상</div>
                            <div class="step-menu">사업소득자관리 — 프리랜서/계약직</div>
                            <div class="step-menu">임금대장 — 사업소득자 급여 관리</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 연차 요약 카드 --}}
            <h3 class="font-bold text-sm text-gray-700 mb-3">연차 핵심 정보 한눈에</h3>
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
                <div class="count-card">
                    <div class="count-num" style="color: #059669;">15</div>
                    <div class="count-label" style="color: #059669;">기본 연차</div>
                    <div class="count-desc">1년 이상 근무자<br>기본 부여일수</div>
                </div>
                <div class="count-card">
                    <div class="count-num" style="color: #2563eb;">25</div>
                    <div class="count-label" style="color: #2563eb;">최대 연차</div>
                    <div class="count-desc">근속 21년 이상<br>법정 최대 한도</div>
                </div>
                <div class="count-card">
                    <div class="count-num" style="color: #d97706;">11</div>
                    <div class="count-label" style="color: #d97706;">신입 연차</div>
                    <div class="count-desc">1년 미만 근무자<br>월 1개씩 발생</div>
                </div>
                <div class="count-card">
                    <div class="count-num" style="color: #7c3aed;">2회</div>
                    <div class="count-label" style="color: #7c3aed;">촉진 통보</div>
                    <div class="count-desc">연차촉진제도<br>의무 통보 횟수</div>
                </div>
                <div class="count-card">
                    <div class="count-num" style="color: #db2777;">0.5</div>
                    <div class="count-label" style="color: #db2777;">반차 단위</div>
                    <div class="count-desc">오전/오후 반차<br>0.5일 차감</div>
                </div>
            </div>
        </div>

        {{-- ===== 탭 1: 연차 발생/계산 ===== --}}
        <div class="att-section" id="attTab1">
            <h2 class="text-xl font-bold mb-2 text-gray-800">연차 발생 기준 및 계산</h2>
            <p class="text-sm text-gray-500 mb-6">근로기준법에 따른 연차유급휴가 발생 기준과 SAM에서의 자동 계산 방식을 설명합니다.</p>

            {{-- 1년 미만 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">
                    <span class="badge-amber">신입사원</span> 1년 미만 근무자의 연차
                </h3>
                <div class="grid gap-4 mb-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                    <div>
                        <p class="text-xs text-gray-600 mb-3 leading-relaxed">
                            입사 후 1년이 되지 않은 직원은 <strong>1개월 개근 시 1일의 유급휴가</strong>가 발생합니다.
                            최대 <strong>11일</strong>까지 발생하며, 12개월째는 이미 1년 근속으로 전환되므로 별도 발생하지 않습니다.
                        </p>
                        <div class="notice-tip notice-box">
                            <strong>SAM 자동 계산:</strong> 입사일 기준으로 매월 개근 여부를 체크하여 자동으로 연차가 발생합니다. 결근이 있는 달은 연차가 발생하지 않습니다.
                        </div>
                    </div>
                    <div>
                        <table class="cmp-table">
                            <thead>
                                <tr>
                                    <th>근무 개월</th>
                                    <th>발생 연차</th>
                                    <th>누적 합계</th>
                                    <th>조건</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>1개월</td><td>1일</td><td>1일</td><td>개근</td></tr>
                                <tr><td>2개월</td><td>1일</td><td>2일</td><td>개근</td></tr>
                                <tr><td>3개월</td><td>1일</td><td>3일</td><td>개근</td></tr>
                                <tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>
                                <tr style="font-weight: 700;"><td>11개월</td><td>1일</td><td style="color: #059669;">최대 11일</td><td>개근</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- 1년 이상 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">
                    <span class="badge-green">정규 연차</span> 1년 이상 근무자의 연차
                </h3>
                <div class="grid gap-4 mb-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                    <div>
                        <p class="text-xs text-gray-600 mb-3 leading-relaxed">
                            1년간 80% 이상 출근한 직원에게는 <strong>15일의 유급휴가</strong>가 부여됩니다.
                            이후 <strong>2년마다 1일씩 가산</strong>되어 최대 <strong>25일</strong>까지 늘어납니다.
                        </p>
                        <div class="notice-info notice-box mb-3">
                            <strong>계산 공식:</strong> 연차일수 = 15일 + (근속연수 - 1년) ÷ 2 (소수점 버림, 최대 25일)
                        </div>
                        <div class="notice-warn notice-box">
                            <strong>80% 미만 출근 시:</strong> 해당 연도의 연차가 발생하지 않습니다. 출근율 = (출근일수 ÷ 소정근로일수) × 100
                        </div>
                    </div>
                    <div>
                        <table class="cmp-table">
                            <thead>
                                <tr>
                                    <th>근속연수</th>
                                    <th>연차 일수</th>
                                    <th>가산일</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>1년</td><td style="font-weight: 700;">15일</td><td>기본</td></tr>
                                <tr><td>2년</td><td>15일</td><td>-</td></tr>
                                <tr><td>3년</td><td style="font-weight: 700;">16일</td><td>+1</td></tr>
                                <tr><td>4~5년</td><td>16~17일</td><td>+1~2</td></tr>
                                <tr><td>6~7년</td><td>17~18일</td><td>+2~3</td></tr>
                                <tr><td>8~9년</td><td>18~19일</td><td>+3~4</td></tr>
                                <tr><td>10~11년</td><td>19~20일</td><td>+4~5</td></tr>
                                <tr><td>...</td><td>...</td><td>...</td></tr>
                                <tr style="font-weight: 700; background: #f0fdf4;"><td>21년 이상</td><td style="color: #059669;">25일 (최대)</td><td>+10</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- 휴가 종류 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">SAM에서 관리하는 휴가 종류</h3>
                <div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
                    <div style="background: #f0fdf4; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bbf7d0;">
                        <div class="font-bold text-sm text-emerald-700 mb-2">연차유급휴가</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            근로기준법에 따른 유급 연차.<br>
                            <strong>차감:</strong> 연차 잔여일수에서 차감<br>
                            <strong>단위:</strong> 1일 / 0.5일(반차)
                        </div>
                    </div>
                    <div style="background: #eff6ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bfdbfe;">
                        <div class="font-bold text-sm text-blue-700 mb-2">반차 (오전/오후)</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            연차를 0.5일 단위로 사용.<br>
                            <strong>오전반차:</strong> 오후 출근 (13:00~)<br>
                            <strong>오후반차:</strong> 오전 근무 (~12:00)
                        </div>
                    </div>
                    <div style="background: #fef3c7; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fde68a;">
                        <div class="font-bold text-sm text-amber-700 mb-2">경조휴가</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            결혼, 출산, 사망 등 경조사 시.<br>
                            <strong>차감:</strong> 연차에서 차감 안 됨<br>
                            <strong>기간:</strong> 사유별 1~7일
                        </div>
                    </div>
                    <div style="background: #f3e8ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #e9d5ff;">
                        <div class="font-bold text-sm text-purple-700 mb-2">병가</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            질병/부상으로 인한 휴무.<br>
                            <strong>유/무급:</strong> 회사 규정에 따름<br>
                            <strong>증빙:</strong> 진단서 필요 (3일 이상)
                        </div>
                    </div>
                    <div style="background: #fce7f3; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fbcfe8;">
                        <div class="font-bold text-sm text-pink-700 mb-2">출산/육아휴직</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            출산 전후 휴가 및 육아휴직.<br>
                            <strong>출산휴가:</strong> 90일 (유급 60일)<br>
                            <strong>육아휴직:</strong> 최대 1년
                        </div>
                    </div>
                    <div style="background: #f8fafc; border-radius: 0.75rem; padding: 1rem; border: 1px solid #e2e8f0;">
                        <div class="font-bold text-sm text-gray-700 mb-2">공가/교육</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            법정 의무 교육, 예비군 등.<br>
                            <strong>차감:</strong> 연차에서 차감 안 됨<br>
                            <strong>증빙:</strong> 소집통지서/수료증
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== 탭 2: 휴가 신청/결재 ===== --}}
        <div class="att-section" id="attTab2">
            <h2 class="text-xl font-bold mb-2 text-gray-800">휴가 신청 및 결재 프로세스</h2>
            <p class="text-sm text-gray-500 mb-6">SAM에서 휴가를 신청하고 결재받는 전체 과정을 단계별로 설명합니다.</p>

            {{-- 결재 흐름 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">휴가 신청 → 승인 전체 프로세스</h3>

                <div class="process-flow mb-6">
                    <div class="process-step">
                        <div class="process-icon" style="background: #dbeafe; color: #2563eb;">📝</div>
                        <div class="process-name">휴가 신청</div>
                        <div class="process-sub">직원이 직접 작성</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #fef3c7; color: #d97706;">👁</div>
                        <div class="process-name">팀장 검토</div>
                        <div class="process-sub">1차 결재</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">✍</div>
                        <div class="process-name">부서장 승인</div>
                        <div class="process-sub">최종 결재</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #dcfce7; color: #16a34a;">✅</div>
                        <div class="process-name">연차 차감</div>
                        <div class="process-sub">잔여일수 반영</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #fce7f3; color: #db2777;">📊</div>
                        <div class="process-name">근태 반영</div>
                        <div class="process-sub">월간 근태표 기록</div>
                    </div>
                </div>
            </div>

            {{-- 상세 단계 --}}
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
                        STEP 1. 휴가 신청서 작성
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">1</div>
                            <div class="step-content">
                                <div class="step-title">SAM 메뉴 접근</div>
                                <div class="step-desc">인사관리 > 휴가관리에서 '신규 신청' 버튼 클릭</div>
                                <div class="step-menu">SAM > 인사관리 > 휴가관리</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">2</div>
                            <div class="step-content">
                                <div class="step-title">휴가 유형 선택</div>
                                <div class="step-desc">연차/반차(오전·오후)/경조/병가/공가 중 선택</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">3</div>
                            <div class="step-content">
                                <div class="step-title">기간 및 사유 입력</div>
                                <div class="step-desc">시작일~종료일 선택, 사유 작성. 반차는 오전/오후 구분.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">4</div>
                            <div class="step-content">
                                <div class="step-title">잔여 연차 확인</div>
                                <div class="step-desc">신청 시 현재 잔여 연차가 표시됩니다. 잔여일수 부족 시 신청 불가.</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
                        STEP 2. 결재 처리
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">1</div>
                            <div class="step-content">
                                <div class="step-title">결재선 자동 설정</div>
                                <div class="step-desc">소속 부서의 결재선에 따라 자동으로 결재권자가 지정됩니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">2</div>
                            <div class="step-content">
                                <div class="step-title">알림 발송</div>
                                <div class="step-desc">결재권자에게 알림톡/푸시 알림이 전송됩니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">3</div>
                            <div class="step-content">
                                <div class="step-title">승인 또는 반려</div>
                                <div class="step-desc">결재권자가 승인하면 연차 차감, 반려 시 사유와 함께 반려됩니다.</div>
                                <div class="step-menu">SAM > 결재관리 > 결재 대기함</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">4</div>
                            <div class="step-content">
                                <div class="step-title">결재 완료 통보</div>
                                <div class="step-desc">승인/반려 결과가 신청자에게 알림으로 전달됩니다.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 결재 상태 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">결재 상태별 의미</h3>
                <table class="cmp-table">
                    <thead>
                        <tr>
                            <th style="width: 120px;">상태</th>
                            <th>의미</th>
                            <th>연차 차감</th>
                            <th>근태 반영</th>
                            <th>수정 가능</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="badge-blue">대기</span></td>
                            <td>결재권자의 승인을 기다리는 상태</td>
                            <td style="color: #64748b;">미차감</td>
                            <td style="color: #64748b;">미반영</td>
                            <td style="color: #059669; font-weight: 700;">수정/취소 가능</td>
                        </tr>
                        <tr>
                            <td><span class="badge-amber">진행중</span></td>
                            <td>다단계 결재 시 일부 승인 완료</td>
                            <td style="color: #64748b;">미차감</td>
                            <td style="color: #64748b;">미반영</td>
                            <td style="color: #d97706; font-weight: 700;">취소만 가능</td>
                        </tr>
                        <tr>
                            <td><span class="badge-green">승인</span></td>
                            <td>최종 결재 완료, 휴가 확정</td>
                            <td style="color: #059669; font-weight: 700;">차감 완료</td>
                            <td style="color: #059669; font-weight: 700;">반영 완료</td>
                            <td style="color: #991b1b;">수정 불가</td>
                        </tr>
                        <tr>
                            <td><span class="badge-red">반려</span></td>
                            <td>결재권자가 거부, 사유 첨부</td>
                            <td style="color: #64748b;">미차감</td>
                            <td style="color: #64748b;">미반영</td>
                            <td style="color: #059669; font-weight: 700;">재신청 가능</td>
                        </tr>
                        <tr>
                            <td><span class="badge-purple">취소</span></td>
                            <td>신청자가 직접 취소</td>
                            <td style="color: #059669; font-weight: 700;">복원</td>
                            <td style="color: #64748b;">미반영</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- 주의사항 --}}
            <div class="notice-warn notice-box mb-6">
                <strong>결재 관련 주의사항:</strong>
                <ul style="margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc;">
                    <li>승인 완료된 휴가를 취소하려면 <strong>관리자(인사팀)</strong>에게 요청해야 합니다.</li>
                    <li>결재선이 설정되지 않은 부서는 휴가 신청이 불가하므로, 먼저 <strong>결재선 설정</strong>이 필요합니다.</li>
                    <li>대결 설정이 되어 있으면 부재 중인 결재권자 대신 대리 결재가 가능합니다.</li>
                </ul>
            </div>
        </div>

        {{-- ===== 탭 3: 근태 기록 ===== --}}
        <div class="att-section" id="attTab3">
            <h2 class="text-xl font-bold mb-2 text-gray-800">근태 기록 및 관리</h2>
            <p class="text-sm text-gray-500 mb-6">출퇴근 기록, 근태 유형, 근무시간 계산 방식을 설명합니다.</p>

            {{-- 근태 유형 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">근태 유형 분류</h3>
                <table class="cmp-table">
                    <thead>
                        <tr>
                            <th style="width: 100px;">유형</th>
                            <th>기준</th>
                            <th>표시</th>
                            <th>급여 영향</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="badge-green">정상 출근</span></td>
                            <td>정시 이전 출근 + 정시 이후 퇴근</td>
                            <td style="color: #059669; font-weight: 700;">O</td>
                            <td>정상 지급</td>
                        </tr>
                        <tr>
                            <td><span class="badge-amber">지각</span></td>
                            <td>출근 시간이 정시를 초과</td>
                            <td style="color: #d97706; font-weight: 700;">△</td>
                            <td>회사 규정에 따름</td>
                        </tr>
                        <tr>
                            <td><span class="badge-amber">조퇴</span></td>
                            <td>퇴근 시간이 정시 이전</td>
                            <td style="color: #d97706; font-weight: 700;">▽</td>
                            <td>회사 규정에 따름</td>
                        </tr>
                        <tr>
                            <td><span class="badge-red">결근</span></td>
                            <td>무단으로 출근하지 않음</td>
                            <td style="color: #991b1b; font-weight: 700;">X</td>
                            <td>일급 차감</td>
                        </tr>
                        <tr>
                            <td><span class="badge-blue">연차</span></td>
                            <td>승인된 연차유급휴가</td>
                            <td style="color: #2563eb; font-weight: 700;">연</td>
                            <td>유급 (정상 지급)</td>
                        </tr>
                        <tr>
                            <td><span class="badge-blue">반차</span></td>
                            <td>오전 또는 오후 반일 휴가</td>
                            <td style="color: #2563eb; font-weight: 700;">반</td>
                            <td>유급 (정상 지급)</td>
                        </tr>
                        <tr>
                            <td><span class="badge-purple">외근</span></td>
                            <td>외부 업무 수행</td>
                            <td style="color: #7c3aed; font-weight: 700;">외</td>
                            <td>정상 지급</td>
                        </tr>
                        <tr>
                            <td><span class="badge-purple">출장</span></td>
                            <td>출장 명령에 의한 근무</td>
                            <td style="color: #7c3aed; font-weight: 700;">출</td>
                            <td>정상 지급 + 출장비</td>
                        </tr>
                        <tr>
                            <td><span style="display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #f8fafc; color: #475569; border: 1px solid #e2e8f0;">휴일</span></td>
                            <td>주말/공휴일</td>
                            <td style="color: #94a3b8;">-</td>
                            <td>해당 없음</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- 근태 관리 업무 --}}
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
                        일일 근태 관리
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">1</div>
                            <div class="step-content">
                                <div class="step-title">출근 기록 확인</div>
                                <div class="step-desc">근태현황에서 당일 출근자/미출근자 목록을 확인합니다.</div>
                                <div class="step-menu">SAM > 인사관리 > 근태현황</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">2</div>
                            <div class="step-content">
                                <div class="step-title">지각/조퇴 체크</div>
                                <div class="step-desc">출퇴근 시간을 기준으로 지각/조퇴가 자동 판별됩니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">3</div>
                            <div class="step-content">
                                <div class="step-title">결근자 파악</div>
                                <div class="step-desc">휴가 미신청 + 미출근인 직원은 결근으로 처리됩니다.</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
                        월간 근태 정리
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">1</div>
                            <div class="step-content">
                                <div class="step-title">월간 근태표 확인</div>
                                <div class="step-desc">근태관리 통합에서 전 직원의 월간 근태를 한눈에 조회합니다.</div>
                                <div class="step-menu">SAM > 인사관리 > 근태관리</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">2</div>
                            <div class="step-content">
                                <div class="step-title">이상 근태 처리</div>
                                <div class="step-desc">지각/조퇴/결근 사유를 확인하고, 필요 시 사유서를 접수합니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">3</div>
                            <div class="step-content">
                                <div class="step-title">근태 마감 → 급여 연동</div>
                                <div class="step-desc">월말 근태를 마감하면 급여 산정 시 자동으로 반영됩니다.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 근무시간 계산 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">근무시간 계산 기준</h3>
                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
                    <div>
                        <table class="cmp-table">
                            <thead>
                                <tr>
                                    <th>항목</th>
                                    <th>기준</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>정규 근무시간</td><td><strong>09:00 ~ 18:00</strong> (8시간)</td></tr>
                                <tr><td>점심시간</td><td>12:00 ~ 13:00 (1시간, 근무 제외)</td></tr>
                                <tr><td>주간 법정 근무</td><td>40시간 (주 5일 × 8시간)</td></tr>
                                <tr><td>연장근무</td><td>18:00 이후 근무 (주 12시간 한도)</td></tr>
                                <tr><td>야간근무</td><td>22:00 ~ 06:00 (50% 가산)</td></tr>
                                <tr><td>휴일근무</td><td>주말/공휴일 근무 (50% 가산)</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <div>
                        <div class="notice-tip notice-box mb-3">
                            <strong>SAM 자동 계산:</strong> 출퇴근 기록을 기반으로 일일 근무시간, 연장근무시간, 야간근무시간을 자동 산출합니다. 점심시간(1시간)은 자동 제외됩니다.
                        </div>
                        <div class="notice-info notice-box">
                            <strong>소정근로일수:</strong> 월의 총 일수에서 주말/공휴일을 제외한 일수. 출근율 계산과 일급 환산의 기준이 됩니다.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== 탭 4: 연차촉진제도 ===== --}}
        <div class="att-section" id="attTab4">
            <h2 class="text-xl font-bold mb-2 text-gray-800">연차촉진제도</h2>
            <p class="text-sm text-gray-500 mb-6">근로기준법 제61조에 따른 연차 사용 촉진 제도와 SAM에서의 관리 방법을 설명합니다.</p>

            {{-- 촉진제도 개요 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">연차촉진제도란?</h3>
                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                    <div>
                        <p class="text-xs text-gray-600 mb-3 leading-relaxed">
                            사용자가 법에서 정한 절차에 따라 <strong>연차 사용을 촉진</strong>했음에도 근로자가 사용하지 않은 경우,
                            <strong>미사용 연차에 대한 보상 의무가 면제</strong>되는 제도입니다.
                        </p>
                        <p class="text-xs text-gray-600 mb-3 leading-relaxed">
                            즉, 회사가 정해진 시기에 연차 사용을 촉진(통보)했는데도 직원이 쓰지 않으면,
                            <strong>연차수당을 지급하지 않아도 됩니다.</strong> 반대로, 촉진 절차를 밟지 않으면
                            미사용 연차에 대해 반드시 수당을 지급해야 합니다.
                        </p>
                        <div class="notice-danger notice-box">
                            <strong>핵심 포인트:</strong> 촉진 절차를 1회라도 누락하면, 해당 직원의 미사용 연차 전체에 대해 연차수당 지급 의무가 발생합니다. SAM의 연차촉진관리 기능으로 빠짐없이 관리하세요.
                        </div>
                    </div>
                    <div>
                        <div style="background: #f0fdf4; border: 2px solid #86efac; border-radius: 1rem; padding: 1.5rem;">
                            <div class="font-bold text-sm text-emerald-800 mb-3 text-center">촉진 절차를 밟으면</div>
                            <div style="text-align: center; margin-bottom: 0.75rem;">
                                <span style="font-size: 2rem;">✅</span>
                            </div>
                            <div class="text-xs text-emerald-700 text-center leading-relaxed">
                                미사용 연차 → <strong>수당 지급 면제</strong><br>
                                연차 소멸 (이월 없음)
                            </div>
                        </div>
                        <div style="height: 0.75rem;"></div>
                        <div style="background: #fef2f2; border: 2px solid #fca5a5; border-radius: 1rem; padding: 1.5rem;">
                            <div class="font-bold text-sm text-red-800 mb-3 text-center">촉진 절차를 안 밟으면</div>
                            <div style="text-align: center; margin-bottom: 0.75rem;">
                                <span style="font-size: 2rem;">💸</span>
                            </div>
                            <div class="text-xs text-red-700 text-center leading-relaxed">
                                미사용 연차 × 일급 = <strong>연차수당 지급 의무</strong><br>
                                (통상임금 기준)
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 촉진 타임라인 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">연차촉진 필수 타임라인</h3>
                <p class="text-xs text-gray-500 mb-4">연차 사용 기간 만료 전, 아래 시점에 맞춰 반드시 통보해야 합니다.</p>

                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                    <div class="flow-card">
                        <div class="flow-head" style="background: linear-gradient(135deg, #d97706, #fbbf24);">
                            1차 통보 (6개월 전)
                        </div>
                        <div class="flow-body">
                            <div class="step-row">
                                <div class="step-num" style="background: #d97706;">1</div>
                                <div class="step-content">
                                    <div class="step-title">시기: 만료 6개월 전 ~ 만료 5개월 전</div>
                                    <div class="step-desc">예) 연차 기간이 1/1~12/31인 경우, <strong>7월 1일 ~ 7월 31일</strong> 사이에 통보</div>
                                </div>
                            </div>
                            <div class="step-row">
                                <div class="step-num" style="background: #d97706;">2</div>
                                <div class="step-content">
                                    <div class="step-title">통보 내용</div>
                                    <div class="step-desc">미사용 연차 일수를 알리고, <strong>사용 시기를 지정하여 서면 제출</strong>할 것을 촉구합니다.</div>
                                </div>
                            </div>
                            <div class="step-row">
                                <div class="step-num" style="background: #d97706;">3</div>
                                <div class="step-content">
                                    <div class="step-title">SAM 처리</div>
                                    <div class="step-desc">연차촉진관리 메뉴에서 대상자 선택 → 1차 촉진 발송</div>
                                    <div class="step-menu">SAM > 인사관리 > 연차촉진관리</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flow-card">
                        <div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">
                            2차 통보 (2개월 전)
                        </div>
                        <div class="flow-body">
                            <div class="step-row">
                                <div class="step-num" style="background: #dc2626;">1</div>
                                <div class="step-content">
                                    <div class="step-title">시기: 만료 2개월 전 ~ 만료 1개월 전</div>
                                    <div class="step-desc">예) 연차 기간이 1/1~12/31인 경우, <strong>11월 1일 ~ 11월 30일</strong> 사이에 통보</div>
                                </div>
                            </div>
                            <div class="step-row">
                                <div class="step-num" style="background: #dc2626;">2</div>
                                <div class="step-content">
                                    <div class="step-title">통보 내용</div>
                                    <div class="step-desc">1차 통보 후에도 사용 시기를 정하지 않은 경우, 회사가 <strong>사용 시기를 지정</strong>하여 서면 통보합니다.</div>
                                </div>
                            </div>
                            <div class="step-row">
                                <div class="step-num" style="background: #dc2626;">3</div>
                                <div class="step-content">
                                    <div class="step-title">SAM 처리</div>
                                    <div class="step-desc">연차촉진관리에서 미응답자 확인 → 2차 촉진 발송</div>
                                    <div class="step-menu">SAM > 인사관리 > 연차촉진관리</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 연차촉진 연간 캘린더 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">연차촉진 연간 캘린더 (1월~12월 기준)</h3>
                <div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));">
                    <div class="count-card"><div class="count-num" style="color: #94a3b8; font-size: 1.5rem;">1~6월</div><div class="count-label" style="color: #94a3b8;">연차 사용 기간</div><div class="count-desc">정상 연차 사용</div></div>
                    <div class="count-card" style="border-color: #fbbf24; background: #fffbeb;"><div class="count-num" style="color: #d97706; font-size: 1.5rem;">7월</div><div class="count-label" style="color: #d97706;">1차 촉진 통보</div><div class="count-desc">미사용 연차 알림<br>사용 시기 요청</div></div>
                    <div class="count-card"><div class="count-num" style="color: #94a3b8; font-size: 1.5rem;">8~10월</div><div class="count-label" style="color: #94a3b8;">사용 독려 기간</div><div class="count-desc">연차 사용 유도</div></div>
                    <div class="count-card" style="border-color: #f87171; background: #fef2f2;"><div class="count-num" style="color: #dc2626; font-size: 1.5rem;">11월</div><div class="count-label" style="color: #dc2626;">2차 촉진 통보</div><div class="count-desc">회사가 시기 지정<br>서면 통보</div></div>
                    <div class="count-card" style="border-color: #a78bfa; background: #f5f3ff;"><div class="count-num" style="color: #7c3aed; font-size: 1.5rem;">12월</div><div class="count-label" style="color: #7c3aed;">마감 및 정산</div><div class="count-desc">미사용 연차 소멸<br>(촉진 완료 시)</div></div>
                </div>
            </div>

            {{-- 1년 미만 근로자 촉진 --}}
            <div class="notice-info notice-box mb-6">
                <strong>1년 미만 근로자 촉진 (월차):</strong>
                월차 발생 후 만료 1개월 전까지 촉진 통보가 필요합니다.
                예) 3월 발생 월차 → <strong>3월 말까지</strong> 사용 촉구 → 4월 말까지 미사용 시 시기 지정 통보.
                SAM에서는 1년 미만자의 촉진도 별도로 관리할 수 있습니다.
            </div>
        </div>

        {{-- ===== 탭 5: 급여 연동 ===== --}}
        <div class="att-section" id="attTab5">
            <h2 class="text-xl font-bold mb-2 text-gray-800">근태 ↔ 급여 연동</h2>
            <p class="text-sm text-gray-500 mb-6">근태 기록이 급여에 어떻게 반영되는지, 연차수당 계산 방식을 설명합니다.</p>

            {{-- 연동 흐름도 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">근태 → 급여 반영 흐름</h3>
                <div class="process-flow mb-4">
                    <div class="process-step">
                        <div class="process-icon" style="background: #dcfce7; color: #16a34a;">📅</div>
                        <div class="process-name">근태 마감</div>
                        <div class="process-sub">월말 근태 확정</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #dbeafe; color: #2563eb;">📊</div>
                        <div class="process-name">근태 집계</div>
                        <div class="process-sub">출근/결근/연차 합산</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #fef3c7; color: #d97706;">🧮</div>
                        <div class="process-name">급여 산정</div>
                        <div class="process-sub">기본급±가감</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">📋</div>
                        <div class="process-name">명세서 생성</div>
                        <div class="process-sub">급여명세서 발급</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #ecfdf5; color: #059669;">💰</div>
                        <div class="process-name">급여 지급</div>
                        <div class="process-sub">계좌 이체</div>
                    </div>
                </div>
            </div>

            {{-- 급여 반영 항목 --}}
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
                        가산 항목 (급여 +)
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">+</div>
                            <div class="step-content">
                                <div class="step-title">연차수당</div>
                                <div class="step-desc">미사용 연차 × 1일 통상임금. 연차촉진 미실시 시 지급 의무 발생.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">+</div>
                            <div class="step-content">
                                <div class="step-title">연장근무수당</div>
                                <div class="step-desc">법정 근로시간(주 40시간) 초과 시 통상임금의 <strong>50% 가산</strong>.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">+</div>
                            <div class="step-content">
                                <div class="step-title">야간/휴일근무수당</div>
                                <div class="step-desc">22:00~06:00 야간 또는 휴일 근무 시 통상임금의 50% 가산.</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">
                        차감 항목 (급여 -)
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #dc2626;">-</div>
                            <div class="step-content">
                                <div class="step-title">결근 차감</div>
                                <div class="step-desc">무단결근 일수 × 1일 통상임금 차감. (유급휴가 사용 시 차감 없음)</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #dc2626;">-</div>
                            <div class="step-content">
                                <div class="step-title">지각/조퇴 차감</div>
                                <div class="step-desc">회사 내규에 따라 차감 여부와 금액이 결정됩니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #dc2626;">-</div>
                            <div class="step-content">
                                <div class="step-title">무급휴가 차감</div>
                                <div class="step-desc">연차 소진 후 추가 휴가 사용 시 무급 처리.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 연차수당 계산 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">연차수당 계산 방법</h3>
                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                    <div>
                        <div style="background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-radius: 1rem; padding: 1.5rem; border: 1px solid #bbf7d0;">
                            <div class="font-bold text-emerald-800 mb-2">연차수당 공식</div>
                            <div style="background: white; border-radius: 0.5rem; padding: 1rem; text-align: center; font-size: 0.9rem; font-weight: 700; color: #1e293b;">
                                미사용 연차일수 × 1일 통상임금
                            </div>
                            <div style="height: 0.75rem;"></div>
                            <div class="text-xs text-emerald-700">
                                <strong>1일 통상임금</strong> = 월 통상임금 ÷ 월 소정근로시간 × 8시간
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="notice-warn notice-box mb-3">
                            <strong>계산 예시:</strong><br>
                            월급 300만원, 미사용 연차 5일인 경우<br>
                            • 1일 통상임금 = 3,000,000 ÷ 209시간 × 8 = <strong>약 114,832원</strong><br>
                            • 연차수당 = 114,832 × 5일 = <strong>약 574,160원</strong>
                        </div>
                        <div class="notice-tip notice-box">
                            <strong>SAM 자동 계산:</strong> 급여관리 메뉴에서 미사용 연차를 기반으로 연차수당이 자동 산출됩니다.
                            <div class="step-menu" style="margin-top: 4px;">SAM > 인사관리 > 급여관리</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 4대보험 --}}
            <div class="notice-info notice-box mb-6">
                <strong>4대보험 관련:</strong> 연차수당은 통상임금에 포함되며, 4대보험(국민연금, 건강보험, 고용보험, 산재보험)과 소득세 계산의 기초가 됩니다. SAM의 급여관리에서 4대보험료를 자동 계산하여 급여명세서에 반영합니다.
            </div>
        </div>

        {{-- ===== 탭 6: 메뉴 맵 ===== --}}
        <div class="att-section" id="attTab6">
            <h2 class="text-xl font-bold mb-2 text-gray-800">SAM 근태/인사 메뉴 맵</h2>
            <p class="text-sm text-gray-500 mb-6">SAM에서 근태/인사 관련 기능이 위치한 메뉴 구조를 보여줍니다.</p>

            <div class="menu-map mb-6">
                {{-- 인사관리 --}}
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: #059669;"></span>
                        인사관리
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">1</span> 입퇴사자현황</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">2</span> 직원관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">3</span> 근태현황</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">4</span> 근태관리 통합</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">5</span> 휴가관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">6</span> 연차촉진관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">7</span> 급여관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">8</span> 사업소득자관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">9</span> 사업소득자 임금대장</div>
                    </div>
                </div>

                {{-- 결재관리 --}}
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: #7c3aed;"></span>
                        결재관리
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">1</span> 결재 대기함</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">2</span> 결재 진행함</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">3</span> 결재 완료함</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">4</span> 내 신청함</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">5</span> 결재선 설정</div>
                    </div>
                </div>

                {{-- 기준정보 --}}
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: #d97706;"></span>
                        기준정보 관리
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">1</span> 부서관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">2</span> 직위/직급</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">3</span> 근무형태 설정</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">4</span> 휴일/공휴일 관리</div>
                    </div>
                </div>

                {{-- 관련 연동 메뉴 --}}
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: #2563eb;"></span>
                        관련 연동 메뉴
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">1</span> 재무 대시보드 (급여 통계)</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">2</span> 일반전표 (급여 분개)</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">3</span> 경조사비관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #2563eb;">4</span> 리포트 > 인사 보고서</div>
                    </div>
                </div>
            </div>

            {{-- 메뉴별 주요 기능 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">주요 메뉴별 기능 요약</h3>
                <table class="cmp-table">
                    <thead>
                        <tr>
                            <th style="width: 150px;">메뉴</th>
                            <th>주요 기능</th>
                            <th style="width: 100px;">사용자</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="font-bold">입퇴사자현황</td>
                            <td>입사일/퇴사일 관리, 재직/퇴직 상태, 연차 기산일 기준</td>
                            <td><span class="badge-amber">인사팀</span></td>
                        </tr>
                        <tr>
                            <td class="font-bold">근태현황</td>
                            <td>월별 출퇴근 기록 조회, 지각/조퇴/결근 현황, 개인별 근태 이력</td>
                            <td><span class="badge-blue">전 직원</span></td>
                        </tr>
                        <tr>
                            <td class="font-bold">근태관리 통합</td>
                            <td>전 직원 근태 대시보드, 부서별 근태 통계, 이상 근태 알림</td>
                            <td><span class="badge-amber">관리자</span></td>
                        </tr>
                        <tr>
                            <td class="font-bold">휴가관리</td>
                            <td>휴가 신청/승인/반려, 잔여 연차 조회, 휴가 이력</td>
                            <td><span class="badge-blue">전 직원</span></td>
                        </tr>
                        <tr>
                            <td class="font-bold">연차촉진관리</td>
                            <td>촉진 대상자 선별, 1차/2차 통보 발송, 촉진 이력 관리</td>
                            <td><span class="badge-amber">인사팀</span></td>
                        </tr>
                        <tr>
                            <td class="font-bold">급여관리</td>
                            <td>월별 급여 산정, 연차수당 계산, 4대보험, 급여명세서</td>
                            <td><span class="badge-amber">인사/경리</span></td>
                        </tr>
                        <tr>
                            <td class="font-bold">결재 대기함</td>
                            <td>휴가/근태 변경 결재 처리, 승인/반려</td>
                            <td><span class="badge-purple">결재권자</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- 사용 시나리오 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">자주 사용하는 시나리오</h3>
                <div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                    <div style="background: #f0fdf4; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bbf7d0;">
                        <div class="font-bold text-sm text-emerald-700 mb-2">"내일 연차 쓰고 싶어요"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            1. 인사관리 > <strong>휴가관리</strong> > 신규 신청<br>
                            2. 연차 선택 > 내일 날짜 > 사유 입력<br>
                            3. 결재 상신 > 상사 승인 대기<br>
                            4. 승인 완료 시 잔여 연차 -1
                        </div>
                    </div>
                    <div style="background: #eff6ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bfdbfe;">
                        <div class="font-bold text-sm text-blue-700 mb-2">"이번 달 우리 팀 근태 확인"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            1. 인사관리 > <strong>근태관리 통합</strong> 접속<br>
                            2. 부서 필터 > 해당 월 선택<br>
                            3. 지각/조퇴/결근 현황 확인<br>
                            4. 이상 근태 사유 확인
                        </div>
                    </div>
                    <div style="background: #fef3c7; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fde68a;">
                        <div class="font-bold text-sm text-amber-700 mb-2">"연차촉진 대상자 통보"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            1. 인사관리 > <strong>연차촉진관리</strong> 접속<br>
                            2. 미사용 연차 보유자 목록 확인<br>
                            3. 대상자 선택 > 촉진 발송<br>
                            4. 발송 이력 기록 확인
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>{{-- max-width wrapper --}}
</div>{{-- att-body --}}
@endsection

@push('scripts')
<script>
function switchAttTab(idx) {
    document.querySelectorAll('.att-tab').forEach(function(t, i) {
        t.classList.toggle('active', i === idx);
    });
    document.querySelectorAll('.att-section').forEach(function(s, i) {
        s.classList.toggle('active', i === idx);
        if (i === idx) {
            s.querySelectorAll('.flow-card, .count-card, .notice-box').forEach(function(el, j) {
                el.style.opacity = '0';
                el.classList.remove('anim-in');
                setTimeout(function() { el.classList.add('anim-in'); }, j * 60);
            });
        }
    });
}
</script>
@endpush
