<div class="guide-wrap">
  <svg class="guide-svg" width="100%" height="100%">
    <defs>
      <mask id="guide-mask">
        <rect x="0" y="0" width="100%" height="100%" fill="white" />
        <path id="guide-cutout-path" fill="black" />
        <path id="guide-arc-stroke-mask-path" fill="black" />
      </mask>
    </defs>
    <rect
      x="0"
      y="0"
      width="100%"
      height="100%"
      fill="rgba(0, 0, 0, 0.5)"
      mask="url(#guide-mask)"
    />
    <path
      id="guide-stroke-path"
      fill="none"
      stroke="#FFF"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-dasharray="4"
    />
    <path
      id="guide-arc-ellipse-stroke-path"
      fill="none"
      stroke="#FFF"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-dasharray="4"
    />
    <!-- 요소 간 연결 라인 -->
    <g id="guide-element-connection-lines" stroke="#FFF" stroke-width="1" stroke-dasharray="0" fill="none" />
  </svg>

  <div class="guide-mask nav"></div>
</div>

<!-- JS 파일 import -->
<script src="/js/main/MultiGuide.js"></script>
<script>
// 전역 변수로 선언하여 다른 스크립트에서도 사용 가능하도록 함
window.guideTargets = window.guideTargets || [
  {
    selector: ".guide-mask.nav",
    label: "메뉴",
    description: "마이클래스 : 분기별 업데이트 되는 권장 학습\n온보딩/법정교육 : 정해진 기간 내 이수해야 하는 필수 교육\n리더십/인사이트/비즈트렌드 : 지속적으로 업데이트 되는 자율 학습",
    position: "left bottom",
    class:"menu"
  },
  {
    selector: ".input-group",
    label: "검색",
    description: "2개 단어 이상 검색 시 띄어쓰기로 구분해 검색",
    position: "left bottom",
    class:"search"
  },
  {
    selector: ".alerts",
    label: "공지사항",
    description: "중요한 \n공지·알림 확인",
    position: "right bottom",
    class:"notice"
  },
  {
    selector: ".mypage",
    label: "마이페이지",
    description: "나의 학습현황·최근 시청·저장한 콘텐츠·한줄소감을 한눈에 확인",
    position: "left bottom",
    class:"mypage"
  },
  {
    selector: "#gauge",
    useGaugeArc: true,
    gaugeSize: 832,
    gaugeStrokeWidth: 31,
    gaugePadding: 20,
    padding: 0,
    startAngle: 180,
    endAngle: 360,
    label: "내 학습 vs 회사 평균",
    description: "내 학습 정도를 회사 평균과 한눈에 비교",
    position: "top center",
    class:"learning"
  },
  {
    selector: ".keyword-area",
    label: "나의 관심 키워드 + 회사추천 키워드",
    description: "키워드 버튼으로 ON/OFF, 나의 관심 키워드 편집가능",
    position: "left bottom",
    class:"interest"
  },
  {
    selector: "#nextBtn",
    label: "컨텐츠 변경",
    description: "버튼을 클릭하여 다음 컨텐츠 확인",
    position: "right bottom",
    class:"change"
  },
  // 🔥 키워드 요소 - 마스크만 (label 없음)
  {
    selector: ".video-card:nth-child(3) .key-badge:first-child",
    padding: 4,
    borderRadius: 4,
  },
  {
    selector: ".video-card:nth-child(5) .key-badge:first-child",
    padding: 4,
    borderRadius: 4,
  },
];
  // 가이드 초기화
  if (window.initMultiGuide) {
    window.initMultiGuide(window.guideTargets);
  }
</script>