<footer class="oopy-my-footer">
    <div class="oopy-my-footer-mobile-toggle" id="footer-toggle">
        <h3> 주식회사 플레이스앤</h3>
        <span class="oopy-my-footer-mobile-toggle-button">▼</span>
    </div>
    
    <div class="oopy-my-footer-container" id="footer-content">
        <div class="oopy-my-footer-column">
            <h3> 주식회사 플레이스앤</h3>
            <p>대표이사: 김재헌</p>
            <p>사업자등록번호: 220-88-90365</p>
            <p>주소: 서울특별시 강남구 테헤란로20길 20, 8층</p>
        </div>
        
        <div class="oopy-my-footer-column">
            <h3>바로가기</h3>
            <ul>
                <a href="https://www.placen.kr/">회사소개</a>  <a href="https://terms.dodopoint.com/ko/terms-ko.html">이용약관</a>
                 <a href="https://terms.dodopoint.com/ko/privacy-ko/">개인정보처리방침</a>
                <br><a href="https://help-placen.oopy.io/notice-policy-01">전화권유판매원 명부</a><br>
<a href="https://help-placen.oopy.io/notice-policy-02">방문판매원 명부</a>
            </ul>
        </div>
        
        <div class="oopy-my-footer-column">
  <h3>고객센터</h3>
  <p class="nowrap">도도포인트 : 1670-6463</p>
  <p class="nowrap">나우웨이팅 : 1522-5954</p>
</div>
        </div>
    
    <div class="oopy-my-footer-copyright">
        <p>&copy; 2025 Oopy Inc. All Rights Reserved.</p>
    </div>
</footer>

<script>
    // 모바일 푸터 토글 기능을 위한 스크립트
    // 데스크톱에서는 이 스크립트가 영향을 주지 않습니다.
    const footerToggle = document.getElementById('footer-toggle');
    const footerContent = document.getElementById('footer-content');

    if (footerToggle && footerContent) {
        footerToggle.addEventListener('click', () => {
            // is-open 클래스를 컨테이너와 버튼 자체에 토글합니다.
            footerContent.classList.toggle('is-open');
            footerToggle.classList.toggle('is-open');
        });

        // 초기 상태 설정 (데스크톱에서는 항상 열려 있도록)
        function checkFooterView() {
            if (window.innerWidth > 768) {
                footerContent.classList.add('is-open');
                // 데스크톱 뷰에서는 토글 버튼에 is-open 클래스를 제거하여 화살표 방향을 초기화합니다.
                footerToggle.classList.remove('is-open');
            } else {
                 // 모바일 뷰로 전환될 때 기본적으로 닫힌 상태로 만듭니다.
                 footerContent.classList.remove('is-open');
                 footerToggle.classList.remove('is-open');
            }
        }
        
        // 페이지 로드 시 및 창 크기 변경 시 뷰 체크
        checkFooterView();
        window.addEventListener('resize', checkFooterView);
    }
</script>

<script>
(function(){
  function waitForChart(){
    return new Promise(res=>{
      if (window.Chart) return res();
      const t = setInterval(()=>{ if(window.Chart){ clearInterval(t); res(); } }, 100);
      setTimeout(()=>{ clearInterval(t); res(); }, 10000); // 안전망
    });
  }

  function drawPie(){
    const el = document.getElementById('pieChart');
    if (!el) return;

    const ctx = el.getContext('2d');
    new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['퍼센트 적립', '스탬프 적립'],
        datasets: [{
          data: [87.76, 12.24],
          backgroundColor: ['#5B8BF3', '#95A5A6'],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,  // ✅ CSS 래퍼 높이에 맞춰 크게
        plugins: {
          legend: {
            position: 'bottom',
            labels: { font: { size: 14, weight: 'bold' }, padding: 20 }
          },
          title: {
            display: true,
            text: '전체 포인트 제도 비율',
            font: { size: 18, weight: 'bold' },
            padding: { top: 10, bottom: 20 }
          },
          tooltip: {
            callbacks: {
              label: (ctx)=> `${ctx.label}: ${ctx.parsed}%`
            }
          }
        }
      }
    });
  }

  function init(){
    waitForChart().then(drawPie);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>


기본 사용방법