<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="한국어 웹 TRPG 플랫폼">
  <title>TRPG 테이블</title>

  <!-- Pretendard 폰트 -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">

  <!-- 디자인 토큰 → 컴포넌트 스타일 순서 중요 -->
  <link rel="stylesheet" href="./css/tokens.css">
  <link rel="stylesheet" href="./css/style.css">

  <!-- 파비콘 -->
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='15' fill='none' stroke='%235b9cf6' stroke-width='2'/><path d='M8 16L16 8L24 16L16 24Z' fill='none' stroke='%235b9cf6' stroke-width='1.5'/><circle cx='16' cy='16' r='3' fill='%235b9cf6'/></svg>">
</head>
<body>

  <!-- 앱 루트 -->
  <div id="app"></div>

  <!-- 토스트 컨테이너 -->
  <div id="toast-container" aria-live="polite" aria-atomic="false"></div>

  <!-- 확인 모달 (전역) -->
  <div class="modal-overlay" id="confirm-overlay" hidden>
    <div class="modal" role="alertdialog" aria-modal="true" aria-describedby="confirm-message">
      <div class="modal__header">
        <h2 class="modal__title">확인</h2>
      </div>
      <div class="modal__body">
        <p id="confirm-message" style="margin:0;font-size:14px;color:var(--tx-primary)"></p>
      </div>
      <div class="modal__footer">
        <button class="btn btn--ghost" id="confirm-cancel" type="button">취소</button>
        <button class="btn btn--danger" id="confirm-ok" type="button">확인</button>
      </div>
    </div>
  </div>

  <!-- Supabase 설정 -->
  <script>
    window.__VTT_CONFIG = {
      supabaseUrl:  'https://dmavcnpbxsixqpkecxmw.supabase.co',
      supabaseAnon: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRtYXZjbnBieHNpeHFwa2VjeG13Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODEyNTUyODksImV4cCI6MjA5NjgzMTI4OX0.Yyuqqo405ccybczMhC-GQf7ysGa6coYjHvfNusumHJk',
    };
  </script>

  <!-- 앱 진입점 -->
  <script type="module" src="./js/index.js"></script>

</body>
</html>
