<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <meta name="robots" content="noindex, nofollow" />
  <title>QYNZ</title>
  <link rel="stylesheet" href="style.css?v=20260901q" />
  <link rel="stylesheet" href="assets/fan-corner.css?v=20260901i" />
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
  <script src="config.js?v=20260831e"></script>
  <script src="assets/fan-entry.js?v=20260831e"></script>
</head>
<body class="app-on">

  <div class="app-shell">
    <div class="app-phone">

  <div id="view-pc" class="view hidden">
    <div class="brand-splash brand-splash--solo">
      <img class="brand-logo" alt="DIARY" decoding="async" />
    </div>
    <p class="empty">📱<br><br>PC 텔레그램에서는<br>이용할 수 없어요<br><small style="color:var(--muted);font-size:12px;margin-top:8px;display:block">모바일 텔레그램 앱에서 열어주세요</small></p>
  </div>

  <!-- ①-a 구독 안내 (멀티링크 진입 · Tribute 결제 유도) -->
  <div id="view-subscribe" class="view hidden">
    <div class="brand-splash brand-splash--solo">
      <img class="brand-logo" alt="DIARY" decoding="async" />
    </div>
    <div class="subscribe-panel">
      <div class="avatar subscribe-avatar" id="sub-creator-avatar">Y</div>
      <h2 class="subscribe-name" id="sub-creator-name">Yuki</h2>
      <p class="subscribe-sub" id="sub-creator-sub">프라이빗 Vol · PPV</p>
      <p class="subscribe-lead">비공개 채널 구독 후<br>프라이빗 룸 · 컨텐츠를 이용할 수 있어요.</p>
      <button type="button" class="send-btn subscribe-pay-btn" id="btn-subscribe-pay">구독하기</button>
      <button type="button" class="subscribe-enter-btn" id="btn-subscribe-enter">결제 완료 · 입장하기</button>
      <p class="subscribe-hint">결제 후 텔레그램 채널에 자동 초대됩니다.<br>채널 입장 후 「입장하기」를 눌러 주세요.</p>
    </div>
  </div>

  <!-- ① 관문: 챗봇 응모 -->
  <div id="view-gate" class="view hidden">
    <div class="brand-splash">
      <img class="brand-logo" alt="DIARY" decoding="async" />
    </div>
    <div id="gate-log" class="chat-log"></div>
    <div id="gate-form" class="chat-compose chat-compose--stack hidden">
      <div class="form-bubble">
        <input id="in-name" placeholder="이름" maxlength="30" />
        <input id="in-phone" type="tel" placeholder="휴대폰 번호" maxlength="20" />
        <label class="agree">
          <input type="checkbox" id="in-agree-event" />
          <span>[필수] 이벤트 응모 및 개인정보 수집·이용에 동의합니다.</span>
        </label>
        <label class="agree">
          <input type="checkbox" id="in-agree-wm" />
          <span>[필수] 유출 방지 목적의 동적 워터마크 표시에 동의합니다.</span>
        </label>
        <label class="agree">
          <input type="checkbox" id="in-agree-adult" />
          <span>[필수] 만 19세 이상 성인임을 확인합니다. 허위 입력·미성년자 이용 시 모든 법적 책임은 본인(및 법정대리인)에게 있습니다.</span>
        </label>
        <button type="button" class="send-btn" id="btn-gate">응모 완료</button>
      </div>
    </div>
  </div>

  <!-- ② 메인 채팅방 -->
  <div id="view-room" class="view hidden">
    <header class="chat-header">
      <div class="avatar" id="creator-avatar">Y</div>
      <div class="hdr-info">
        <strong id="creator-name">Yuki</strong>
        <span class="online"><span class="online-dot" aria-hidden="true"></span>online</span>
        <span class="chat-header-kicker">1:1 Private Room</span>
      </div>
    </header>
    <div id="room-log" class="chat-log"></div>
    <form id="form-chat" class="chat-compose">
      <input id="in-chat" placeholder="메시지 입력…" autocomplete="off" maxlength="1000" />
      <button type="submit" class="send-btn round">➤</button>
    </form>
  </div>

  <!-- LOCKED: fan-preview-chrome.js 와 동기 — view-videos--nf + fan-corner (채팅방 컨텐츠 진입) -->
  <div id="view-videos" class="view hidden view-videos--nf">
    <div id="fan-corner" class="fan-corner"></div>
  </div>

  <!-- LOCKED: fan-preview-chrome.js — 라이브 (서비스 준비중) -->
  <div id="view-live" class="view view-live hidden"></div>

  <div id="view-photo" class="view hidden">
    <div class="photo-top">
      <button id="btn-photo-back" class="icon-btn" type="button" aria-label="뒤로">←</button>
      <span id="photo-title"></span>
      <span class="icon-btn"></span>
    </div>
    <div class="photo-stage">
      <img id="photo-img" alt="" />
      <div id="photo-wm" class="wm"></div>
    </div>
    <p id="photo-caption" class="photo-caption hidden"></p>
  </div>

  <div id="view-play" class="view hidden">
    <div class="play-top">
      <button id="btn-back" class="icon-btn" type="button" aria-label="뒤로">←</button>
      <span id="play-title"></span>
      <span class="icon-btn"></span>
    </div>
    <p id="play-caption" class="play-caption hidden"></p>
    <div class="play-frame">
      <iframe id="player" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
      <div id="wm" class="wm"></div>
    </div>
  </div>

  <!-- LOCKED: fan-preview-chrome.js NAV_ITEMS 와 동기 -->
  <nav id="preview-nav" class="preview-nav hidden" aria-label="화면 이동">
    <button type="button" class="preview-nav-btn" data-nav="gate">응모</button>
    <button type="button" class="preview-nav-btn" data-nav="room">채팅방</button>
    <button type="button" class="preview-nav-btn" data-nav="live">라이브</button>
    <button type="button" class="preview-nav-btn nav-reset" data-nav="reset" aria-label="처음부터">↺</button>
  </nav>

  <div id="gate-modal" class="gate-modal hidden" role="dialog" aria-modal="true" aria-labelledby="gate-modal-title">
    <div class="gate-modal-box">
      <div class="gate-modal-icon">📋</div>
      <strong id="gate-modal-title">이벤트 응모 필요</strong>
      <p>채팅방·라이브는<br>이벤트 응모 후 이용할 수 있어요.</p>
      <button type="button" class="gate-modal-close" id="gate-modal-close">닫기</button>
    </div>
  </div>

    </div><!-- /.app-phone -->
  </div><!-- /.app-shell -->

  <script src="assets/logo.js"></script>
  <script src="assets/fan-analytics.js"></script>
  <script src="assets/fan-miniapp-shared.js?v=20260901u"></script>
  <script src="assets/fan-corner-data.js?v=20260831l"></script>
  <script src="assets/fan-corner.js?v=20260901n"></script>
  <script src="assets/fan-preview-chrome.js?v=20260901u"></script>
  <script src="app.js?v=20260831e"></script>
</body>
</html>
