// ==========================================================
// _docs/yy_alarm_ds2gt_final_fulld.js.php (RUNNER FIXED)
// - Runner window: only one UI (no duplicate texts)
// - When parent closes, runner keeps polling localStorage (timers/settings) every 1s
// - name 유지 + runner-status: "다음 알람: {name} · {remain} 남음"
// - Modal overlay center (no layout shift) + dim background
// - Icon toggle + X(danger) close + overlay click close
// - Style included (Bootstrap theme friendly: uses CSS variables)
//
// yyDrag yyResize 기능추가. 연동조건  script src=yy_drag_resize.js 
/// 사용예
//script src="_docs/yy_alarm_ds2gt_final_fulld.js.php 
//div class="icon-btn"  id="yy-alarm-icon-here">⏰ 
//div id="yy-alarm-timer-here" 
// ==========================================================
//<script>
(function () {
  "use strict";

  const SELF_SRC =
    (document.currentScript && document.currentScript.src) ||
    (function () {
      const scripts = Array.from(document.getElementsByTagName("script"));
      return scripts.map((s) => s.src).filter(Boolean).pop() || "/y/_docs/yy_alarm_ds2gt_final_fulld.js.php";
    })();

  const TTSManager = {
    defaults: {
      enabled: true,
      voice: "female",
      volume: 1,
      rate: 1,
      pitch: 1,
      lastNotified: 0, 
  	  keepRunner: false,
    },

    settings: null,

    voices: [],
    femaleVoices: [],
    maleVoices: [],
    preferredFemaleVoice: null,
    preferredMaleVoice: null,

    lastMessage: null,
    timers: [],

    timerInterval: null,
    uiUpdateInterval: null,

    mountEl: null,
    mounted: false,

    overlayVisible: false,

    instanceId: null,
    isRunnerMode: false,
    runnerWindowRef: null,
    runnerHeartbeatInterval: null,
    selfScriptSrc: SELF_SRC,

    // shared state polling
    _lastTimersRaw: null,
    _lastSettingsRaw: null,

    LOCK_KEY: "tts_runner_lock_v1",
    LOCK_TTL_MS: 130000,   // ✅ 2분 10초 (1분에 1번만 써도 안 죽게)
    HEARTBEAT_MS: 10000,    // ✅ 체크는 1초마다
    runnerLastWriteBucket: null, // ✅ 마지막으로 write한 "분" 버킷

    init() {
      this.instanceId = `${Date.now()}_${Math.random().toString(16).slice(2)}`;
      this.isRunnerMode = !!window.__TTS_RUNNER_MODE__;

      // ✅ 반드시 먼저 로드 (undefined 방지)
      this.settings = this.loadSettings();
      this.loadTimers();

      // polling baseline
      this._lastTimersRaw = localStorage.getItem("tts_timers") || "";
      this._lastSettingsRaw = localStorage.getItem("tts_settings") || "";

      this.initVoiceList();
      this.injectStyles();

      if (this.isRunnerMode) {
        this.claimRunnerLock(true);
        this.startRunnerHeartbeat();
      }

      this.startTimerInterval();

      if (window.speechSynthesis) {
        try {
          window.speechSynthesis.addEventListener("voiceschanged", () => this.initVoiceList());
        } catch {
          window.speechSynthesis.onvoiceschanged = () => this.initVoiceList();
        }
      }

      // storage 이벤트는 참고용(부모창 닫히면 안 올 수도 있어서 polling도 같이)
      window.addEventListener("storage", (e) => {
        if (e.key === "tts_timers") {
          this.loadTimers();
          this.updateAllTimerDisplays();
          this.updateRunnerStatus();
        }
        if (e.key === "tts_settings") {
          this.settings = this.loadSettings();
          this.refreshSettingsUI();
        }
      });

      document.addEventListener("DOMContentLoaded", () => {
        const host = document.getElementById("yy-alarm-timer-here");
        if (host) {
          this.mount(host);

          const iconEl = document.getElementById("yy-alarm-icon-here");
          if (iconEl && !this.isRunnerMode) {
            this.setupIconToggle(iconEl);
          }

          // ✅ 초기에는 무조건 숨김 (외부 CSS 없어도)
          if (!this.isRunnerMode) this.setOverlayVisible(false);
        }

        this.updateRunnerStatus();
      });
    },

    // =========================
    // shared state polling
    // =========================
    reloadSharedStateIfChanged() {
      try {
        const tRaw = localStorage.getItem("tts_timers") || "";
        if (tRaw !== this._lastTimersRaw) {
          this._lastTimersRaw = tRaw;
          this.loadTimers();
        }

        const sRaw = localStorage.getItem("tts_settings") || "";
        if (sRaw !== this._lastSettingsRaw) {
          this._lastSettingsRaw = sRaw;
          this.settings = this.loadSettings();
        }
      } catch {}
    },

    // =========================
    // settings
    // =========================
    loadSettings() {
      try {
        const saved = localStorage.getItem("tts_settings");
        if (!saved) return { ...this.defaults };
        const parsed = JSON.parse(saved);
        return { ...this.defaults, ...(parsed && typeof parsed === "object" ? parsed : {}) };
      } catch {
        return { ...this.defaults };
      }
    },
    saveSettings() {
      localStorage.setItem("tts_settings", JSON.stringify(this.settings || { ...this.defaults }));
    },

    // =========================
    // voices
    // =========================
    initVoiceList() {
      if (!window.speechSynthesis) return;

      this.voices = window.speechSynthesis.getVoices() || [];
      const koVoices = this.voices.filter((v) => (v.lang || "").toLowerCase().includes("ko"));

      this.femaleVoices = koVoices.filter((v) => /female|woman|여성/i.test(v.name));
      this.maleVoices = koVoices.filter((v) => /male|man|남성/i.test(v.name));

      const koFallback = koVoices[0] || this.voices[0] || null;
      this.preferredFemaleVoice = this.femaleVoices[0] || koFallback;
      this.preferredMaleVoice = this.maleVoices[0] || koFallback;
    },

    // =========================
    // runner lock
    // =========================
    getRunnerLock() {
      try {
        const raw = localStorage.getItem(this.LOCK_KEY);
        return raw ? JSON.parse(raw) : null;
      } catch {
        return null;
      }
    },
    setRunnerLock(lockObj) {
      localStorage.setItem(this.LOCK_KEY, JSON.stringify(lockObj));
    },
    isLockAlive(lockObj) {
      if (!lockObj || !lockObj.ts) return false;
      return Date.now() - lockObj.ts < this.LOCK_TTL_MS;
    },
    claimRunnerLock(force = false) {
      const now = Date.now();
      const lock = this.getRunnerLock();

      if (force) {
        this.setRunnerLock({ id: this.instanceId, ts: now });
        return true;
      }

      if (!this.isLockAlive(lock)) {
        this.setRunnerLock({ id: this.instanceId, ts: now });
        return true;
      }

      if (lock && lock.id === this.instanceId) {
        this.setRunnerLock({ id: this.instanceId, ts: now });
        return true;
      }

      return false;
    },
    /*startRunnerHeartbeat() {
      if (this.runnerHeartbeatInterval) clearInterval(this.runnerHeartbeatInterval);
      this.runnerHeartbeatInterval = setInterval(() => {
        this.claimRunnerLock(true);
        this.updateRunnerStatus();
      }, this.HEARTBEAT_MS);
    },*/
	startRunnerHeartbeat() {
      if (!this.isRunnerMode) return;

      if (this.runnerHeartbeatInterval) clearInterval(this.runnerHeartbeatInterval);

      const bucketNow = () => Math.floor(Date.now() / 60000); // ✅ 분 단위 버킷

      this.runnerHeartbeatInterval = setInterval(() => {
        const now = Date.now();
        const b = bucketNow();

        const lock = this.getRunnerLock();
        const alive = this.isLockAlive(lock);
        const iAmLeader = alive && lock && lock.id === this.instanceId;

        // ✅ 1) 리더가 아니면(또는 락 죽었으면) 즉시 한 번 write로 리더 획득
        if (!iAmLeader) {
          this.setRunnerLock({ id: this.instanceId, ts: now });   // write
          this.runnerLastWriteBucket = b;
          this.updateRunnerStatus();
          return;
        }

        // ✅ 2) 리더면 "분이 바뀐 경우에만" ts 갱신(write)
        if (this.runnerLastWriteBucket === null) {
          this.runnerLastWriteBucket = b; // 초기화 (write 안 함)
        } else if (b !== this.runnerLastWriteBucket) {
          this.setRunnerLock({ id: this.instanceId, ts: now });   // write (1분 1회)
          this.runnerLastWriteBucket = b;
        }

        this.updateRunnerStatus();
      }, this.HEARTBEAT_MS);
    },

    canTriggerHere() {
      const lock = this.getRunnerLock();
      if (this.isLockAlive(lock)) {
        return lock.id === this.instanceId;
      }
      this.claimRunnerLock(false);
      const newLock = this.getRunnerLock();
      return !this.isLockAlive(newLock) || newLock.id === this.instanceId;
    },

    // =========================
    // util
    // =========================
    sanitizeForTTS(text) {
      try {
        return String(text)
          .replace(/\p{Extended_Pictographic}+/gu, " ")
          .replace(/\s+/g, " ")
          .trim();
      } catch {
        return String(text)
          .replace(
            /[⏰⏳⌛✅❌⚠️🔊📌🟢🟡🔴⭐️✨🔥🚨🕒🕐🕑🕒🕓🕔🕕🕖🕗🕘🕙🕚🕛]+/g,
            " "
          )
          .replace(/\s+/g, " ")
          .trim();
      }
    },
    escapeHtml(s) {
      return String(s)
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#039;");
    },

    // =========================
    // notify / popup / tts
    // =========================
    notify(message, type = "info", duration = 5000) {
      if (!this.settings || !this.settings.enabled) return;

      const now = Date.now();
      if (now - (this.settings.lastNotified || 0) < 3000 && this.lastMessage === message) return;

      this.lastMessage = message;
      this.settings.lastNotified = now;
 
      this.showPopup(message,  type, duration);
      this.speak(this.sanitizeForTTS(message));

      if (navigator.vibrate) navigator.vibrate(200);
      this.saveSettings();
    },

    showPopup(message, type, duration) { 
    // 한국 시간으로 변환
    const now1= Date.now();
    const koreaTime = new Date(now1).toLocaleString('ko-KR', { 
      timeZone: 'Asia/Seoul',
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    }); 
      const popup = document.createElement("div");
      popup.className = `tts-popup ${type}`;
      popup.innerHTML = `
        <div class="tts-popup-card">
          <div class="tts-popup-msg">${this.escapeHtml(message)}</div>
          <div class="tts-popup-msg-dt">${koreaTime}</div>
          <div class="tts-popup-actions">
            <button type="button" class="btn btn-sm btn-primary" data-tts-close>확인</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" data-tts-close>닫기</button>
          </div>
          <div class="tts-popup-bar"></div>
        </div>
      `;
      document.body.appendChild(popup);

      popup.addEventListener("click", (e) => {
        const btn = e.target.closest("[data-tts-close]");
        if (btn) this.closePopup(popup);
      });

      if (duration > 0) {
        const bar = popup.querySelector(".tts-popup-bar");
        let width = 100;
        const interval = setInterval(() => {
          width -= 100 / (duration / 100);
          if (bar) bar.style.width = width + "%";
          if (width <= 0) {
            clearInterval(interval);
            this.closePopup(popup);
          }
        }, 100);
      }
    },

    closePopup(popupEl) {
      if (!popupEl) return;
      popupEl.classList.add("out");
      setTimeout(() => {
        try {
          popupEl.remove();
        } catch {}
      }, 200);
    },

    speak(text) {
      if (!this.settings || !this.settings.enabled) return;
      if (!window.speechSynthesis) return;

      try {
        window.speechSynthesis.cancel();
      } catch {}

      const u = new SpeechSynthesisUtterance(String(text));
      u.lang = "ko-KR";
      u.volume = Number(this.settings.volume);
      u.rate = Number(this.settings.rate);
      u.pitch = Number(this.settings.pitch);

      if (this.settings.voice === "male") {
        if (this.preferredMaleVoice) u.voice = this.preferredMaleVoice;
      } else {
        if (this.preferredFemaleVoice) u.voice = this.preferredFemaleVoice;
      }

      window.speechSynthesis.speak(u);
    },

    // =========================
    // timers store
    // =========================
    loadTimers() {
      try {
        const saved = localStorage.getItem("tts_timers");
        this.timers = saved ? JSON.parse(saved) : [];
        if (!Array.isArray(this.timers)) this.timers = [];
      } catch {
        this.timers = [];
      }
    },
    saveTimers() {
      localStorage.setItem("tts_timers", JSON.stringify(this.timers || []));
      try {
        this._lastTimersRaw = localStorage.getItem("tts_timers") || "";
      } catch {}
    },

    // =========================
    // timer engine
    // =========================
    startTimerInterval() {
      if (this.timerInterval) clearInterval(this.timerInterval);

      this.timerInterval = setInterval(() => {
        // ✅ 부모창 닫혀도 계속 갱신
        this.reloadSharedStateIfChanged();

        if (!this.canTriggerHere()) return;

        const now = Date.now();
        let updated = false;

        for (const t of this.timers) {
          if (!t.triggered && t.targetTime <= now) {
            t.triggered = true;
            updated = true;
            this.notify(`⏰ ${t.name} 완료! `, "success", 0);
          }
        }

        if (updated) {
          this.saveTimers();
          this.updateAllTimerDisplays();
        }

        this.updateRunnerStatus();
      }, 1000);

      if (this.uiUpdateInterval) clearInterval(this.uiUpdateInterval);
      this.uiUpdateInterval = setInterval(() => {
        this.reloadSharedStateIfChanged();
        this.updateAllTimerDisplays();
        this.updateRunnerStatus();
      }, 1000);
    },

    addDurationTimer(hours, minutes, name = "타이머") {
      const h = Number(hours) || 0;
      const m = Number(minutes) || 0;
      const totalMin = h * 60 + m;

      if (totalMin <= 0) {
        this.notify("시간/분을 1분 이상으로 설정해 주세요.", "warning", 2500);
        return null;
      }

      const now = Date.now();
      const targetTime = now + totalMin * 60 * 1000;

      const timer = {
        id: now + Math.random(),
        name: name || "타이머",
        targetTime,
        created: now,
        triggered: false,
        kind: "duration",
        hours: h,
        minutes: m,
      };

      this.timers.push(timer);
      this.saveTimers();
      this.updateAllTimerDisplays();
      this.updateRunnerStatus();

      this.notify(`⏳ ${timer.name} 시작`, "info", 2000);
      return timer;
    },

    addCountdown(minutes, name = "카운트다운") {
      const m = Number(minutes) || 0;
      if (m <= 0) {
        this.notify("카운트다운 분을 1분 이상으로 설정해 주세요.", "warning", 2500);
        return null;
      }

      const now = Date.now();
      const targetTime = now + m * 60 * 1000;

      const timer = {
        id: now + Math.random(),
        name: name || "카운트다운",
        targetTime,
        created: now,
        triggered: false,
        kind: "countdown",
        minutes: m,
      };

      this.timers.push(timer);
      this.saveTimers();
      this.updateAllTimerDisplays();
      this.updateRunnerStatus();

      this.notify(`⏳ ${timer.name} 시작`, "info", 2000);
      return timer;
    },

    removeTimer(id) {
      this.timers = (this.timers || []).filter((t) => t.id !== id);
      this.saveTimers();
      this.updateAllTimerDisplays();
      this.updateRunnerStatus();
    },

    clearTriggered() {
      this.timers = (this.timers || []).filter((t) => !t.triggered);
      this.saveTimers();
      this.updateAllTimerDisplays();
      this.updateRunnerStatus();
    },

    clearAllTimers() {
      this.timers = [];
      this.saveTimers();
      this.updateAllTimerDisplays();
      this.updateRunnerStatus();
    },

    formatTimeRemaining(ms) {
      if (ms <= 0) return "0초";
      const sec = Math.floor(ms / 1000);
      const h = Math.floor(sec / 3600);
      const m = Math.floor((sec % 3600) / 60);
      const s = sec % 60;

      const out = [];
      if (h > 0) out.push(`${h}시간`);
      if (m > 0) out.push(`${m}분`);
      if (s > 0 || out.length === 0) out.push(`${s}초`);
      return out.join(" ");
    },

    // =========================
    // runner window (✅ 중복 UI 제거)
    // =========================
    getNextActiveTimer() {
      const active = (this.timers || []).filter((t) => !t.triggered);
      if (active.length === 0) return null;
      active.sort((a, b) => a.targetTime - b.targetTime);
      return active[0];
    },

    updateRunnerStatus() {
      const els = document.querySelectorAll("[data-tts-runner-status]");
      if (!els || els.length === 0) return;

      const next = this.getNextActiveTimer();
      let text = "";

      if (!next) {
          text = '대기중 (설정된 알람 없음)  <button type="button" class="btn ml-2 btn-sm btn-outline-primary" data-self-close="">닫기</button>'; 
      } else {
        const remain = Math.max(0, next.targetTime - Date.now());
        const s = this.formatTimeRemaining(remain);
        text = `다음 알람: ${next.name} · ${s} 남음`;
      }

      //els.forEach((el) => (el.textContent = text));
        els.forEach((el) => (el.innerHTML  = text));
    },

    ensureRunnerWindow(alarmName) {
      if (this.runnerWindowRef && !this.runnerWindowRef.closed) {
        try { this.runnerWindowRef.focus(); } catch {}
        return this.runnerWindowRef;
      }

      const w = window.open(
        "",
        "TTS_ALARM_RUNNER",
        "width=420,height=320,left=90,top=90,resizable=yes,scrollbars=no"
      );

      if (!w) {
        this.notify("팝업이 차단되었습니다. 브라우저에서 이 사이트 팝업 허용 후 다시 시도해 주세요.", "warning", 5000);
        return null;
      }

      const safeName = String(alarmName ?? "알람").replace(/[<>]/g, "");
      const src = this.selfScriptSrc;

      const html = `<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
    <link rel="icon" type="image/svg+xml"
      href="data:image/svg+xml,
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <text y='0.9em' font-size='90'>⏰</text>
      </svg>">    
    
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${safeName} 알람 실행중</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
(function(){
  function getCookie(n){
    const v=('; '+document.cookie).split('; '+n+'=');
    return v.length===2? decodeURIComponent(v.pop().split(';').shift()): null;
  }
  var theme=null;
  try{
    if (window.opener && window.opener.document) {
      theme = window.opener.document.documentElement.getAttribute('data-bs-theme');
    }
  }catch(e){}
  if (!theme){
    var c=getCookie('theme');
    theme = (c==='light')?'light':'dark';
  }
  document.documentElement.setAttribute('data-bs-theme', theme==='light'?'light':'dark');
  document.addEventListener('DOMContentLoaded', function(){
    document.body.classList.toggle('dark-mode', theme!=='light');
  });
})();
</script>

<style>
  body{padding:12px;}
</style>
</head>
<body>
  <!-- ✅ 오직 mount 영역만 (중복 UI 제거) -->
  <div id="yy-alarm-timer-here"></div>

  <script>window.__TTS_RUNNER_MODE__=true;</script>
  <script src="${src}"></script>
</body>
</html>`;
//<script>
      w.document.open();
      w.document.write(html);
      w.document.close();

      this.runnerWindowRef = w;
      return w;
    },

    // =========================
    // overlay show/hide + icon toggle
    // =========================
    setupIconToggle(iconEl) {
      iconEl.style.cursor = "pointer";
      iconEl.addEventListener("click", () => this.toggleOverlay());
    },

    toggleOverlay() {
      this.setOverlayVisible(!this.overlayVisible);
    },

    setOverlayVisible(show) {
      this.overlayVisible = !!show;
      if (!this.mountEl) return;
      const overlay = this.mountEl.querySelector("[data-tts-overlay]");
      if (!overlay) return;
      overlay.style.display = this.overlayVisible ? "flex" : "none";
    },

    // =========================
    // mount UI
    // =========================
    mount(hostEl) {
      this.mountEl = hostEl;

      if (this.isRunnerMode) {
        hostEl.innerHTML = `
          <div class="card shadow-sm" style="border-radius:14px;">
            <div class="card-header d-flex justify-content-between align-items-center">
              <div class="fw-bold text-success">
                <i class="bi bi-circle-fill me-1"></i> 알람 러너 실행중
              </div>
              <button class="btn btn-outline-secondary btn-sm" data-tts-test>테스트</button>
            </div>
            <div class="card-body">
              <div class="fw-bold mb-1" data-tts-runner-status>대기중…</div>
              <div class="small text-body-secondary mb-2">
                이 창은 <b>세션 유지용</b> 입니다. 닫으면 알람이 멈출 수 있어요.
              </div>

              <div data-tts-timer-display></div>

              <div class="mt-2 small text-body-secondary">※ 이 창을 닫지 마세요.</div>
            </div>
          </div>
        `;

        this.bindMountedEvents(hostEl);
        this.updateAllTimerDisplays();
        this.updateRunnerStatus();
        this.mounted = true;
        return;
      }

//<!-- div class="modal-dialog modal-dialog-scrollable modal-lg yyDrag yyResize" data-yy-key="func_modal_dialog" data-yyDragHandle=".modal-header" data-yyMinW="520" data-yyMinH="260" --> 
    
      hostEl.innerHTML = `
        <div class="tts-overlay" data-tts-overlay style="display:none;"> 
          <div class="card shadow-lg yyDrag yyResize"  data-yyMinW="520" data-yy-key="func_card_dialog" data-yyDragHandle=".card-header"  data-yyMinH="95%"   style="width:520px; max-width:95%; border-radius:14px;">
            <div class="card-header d-flex justify-content-between align-items-center">
              <div class="fw-bold">⏰ 알람 타이머</div>
              <div class="d-flex gap-2 align-items-center">
                <button type="button" class="btn btn-outline-secondary btn-sm yyNoDrag" data-tts-test>테스트</button>
                <button type="button" class="btn btn-outline-secondary btn-sm yyNoDrag" data-tts-settings>설정</button>
                <button type="button" class="btn btn-danger btn-sm yyNoDrag" data-tts-close title="닫기">
                  <i class="bi bi-x-lg"></i>
                </button>
              </div>
            </div>

            <div class="card-body">

              <div class="mb-2 small text-body-secondary">
                ※ PC는 탭/창이 죽으면 JS가 멈출 수 있어요. “새창 유지” 체크 후 시작하면 더 안정적입니다.
              </div>
                
                
              <div class="row g-2 align-items-center mb-2">
                <div class="col-4">
                  <select class="form-select form-select-sm" data-tts-hours>
                    ${Array.from({ length: 24 }, (_, i) => `<option value="${i}">${String(i).padStart(2, "0")}시간</option>`).join("")}
                  </select>
                </div>
                <div class="col-4">
                  <select class="form-select form-select-sm" data-tts-minutes>
                    ${Array.from({ length: 60 }, (_, i) => `<option value="${i}">${String(i).padStart(2, "0")}분</option>`).join("")}
                  </select>
                </div>
                <div class="col-4 d-grid">
                  <button class="btn btn-primary btn-sm" data-tts-start="">시작</button>
                </div>
              </div>

              <div class="row g-2 align-items-center mb-2">
                <div class="col-8">
                  <input class="form-control form-control-sm" type="text" data-tts-name value="타이머" placeholder="알람 이름(내용)">
                </div>
                <div class="col-4"> 
                    
                    
                <label class="form-check form-check-inline m-0" title="체크 후 시작하면 작은 러너 창을 띄워서 알람을 유지합니다.">
                  <input class="form-check-input" type="checkbox" data-tts-runner
                    ${this.settings.keepRunner ? "checked" : ""}>
                  <span class="form-check-label">새창 유지</span>
                </label>
 
                </div>
              </div>

              <div class="d-flex flex-wrap gap-2 mb-3">
                <button class="btn btn-outline-secondary btn-sm" data-tts-preset="1">1분</button>
                <button class="btn btn-outline-secondary btn-sm" data-tts-preset="5">5분</button>
                <button class="btn btn-outline-secondary btn-sm" data-tts-preset="10">10분</button>
                <button class="btn btn-outline-secondary btn-sm" data-tts-preset="30">30분</button>
              </div>

              <div class="border rounded p-2 mb-3" data-tts-settings-box style="display:none;">
                <div class="fw-bold mb-2">🔊 TTS 설정</div>

                <div class="form-check mb-2">
                  <input class="form-check-input" type="checkbox" data-tts-enabled ${this.settings.enabled ? "checked" : ""} id="ttsEnabled">
                  <label class="form-check-label" for="ttsEnabled">알림 사용</label>
                </div>

                <div class="row g-2 align-items-center mb-2">
                  <div class="col-4 small">목소리</div>
                  <div class="col-8">
                    <select class="form-select form-select-sm" data-tts-voice>
                      <option value="female" ${this.settings.voice === "female" ? "selected" : ""}>여성</option>
                      <option value="male" ${this.settings.voice === "male" ? "selected" : ""}>남성</option>
                    </select>
                  </div>
                </div>

                <div class="row g-2 align-items-center mb-2">
                  <div class="col-4 small">속도</div>
                  <div class="col-8">
                    <input class="form-range" type="range" min="0.5" max="2" step="0.1" data-tts-rate value="${this.settings.rate}">
                  </div>
                </div>

                <div class="row g-2 align-items-center mb-2">
                  <div class="col-4 small">음량</div>
                  <div class="col-8">
                    <input class="form-range" type="range" min="0" max="1" step="0.1" data-tts-volume value="${this.settings.volume}">
                  </div>
                </div>

                <div class="row g-2 align-items-center">
                  <div class="col-4 small">피치</div>
                  <div class="col-8">
                    <input class="form-range" type="range" min="0" max="2" step="0.1" data-tts-pitch value="${this.settings.pitch}">
                  </div>
                </div>
              </div>

              <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="fw-bold">📌 활성 타이머</div>
                <div class="d-flex gap-2">
                  <button class="btn btn-outline-danger btn-sm" data-tts-clear-triggered>완료 삭제</button>
                  <button class="btn btn-outline-danger btn-sm" data-tts-clear-all>전체 삭제</button>
                </div>
              </div>

              <div data-tts-timer-display></div>

            </div>
          </div>
        </div>
      `;

      this.bindMountedEvents(hostEl);
      this.updateAllTimerDisplays();
      this.updateRunnerStatus();
      this.mounted = true;
    }, 
     
	// =========================
    // events + UI update
    // =========================
    bindMountedEvents(root) {
      root.addEventListener("click", (e) => {
        const t = e.target;

        const overlay = root.querySelector("[data-tts-overlay]");
        if (overlay && t === overlay) {
          this.setOverlayVisible(false);
          return;
        }

        if (t.closest("[data-tts-close]")) {
          this.setOverlayVisible(false);
          return;
        }

        if (t.closest("[data-self-close]")) { 
           window.close();  
          return;
        }
        if (t.closest("[data-tts-settings]")) {
          const box = root.querySelector("[data-tts-settings-box]");
          if (box) box.style.display = box.style.display === "none" ? "block" : "none";
          return;
        }

        if (t.closest("[data-tts-test]")) {
          this.notify("안녕하세요. 알람 타이머 TTS가 정상 작동합니다.", "info", 2500);
          return;
        }

		if (t.matches("[data-tts-start]")) {
		  const name = root.querySelector("[data-tts-name]")?.value || "타이머";

		  const runnerWanted =
			root.querySelector("[data-tts-runner]")?.checked ?? !!this.settings.keepRunner;

		  // ✅ 저장
		  this.settings.keepRunner = !!runnerWanted;
		  this.saveSettings();

		  if (runnerWanted) this.ensureRunnerWindow(name);

		  const hours = root.querySelector("[data-tts-hours]")?.value;
		  const minutes = root.querySelector("[data-tts-minutes]")?.value;
		  this.addDurationTimer(hours, minutes, name);
		  return;
		}

		if (t.matches("[data-tts-preset]")) {
		  const m = Number(t.getAttribute("data-tts-preset"));
		  const name = root.querySelector("[data-tts-name]")?.value || `${m}분 타이머`;

		  const runnerWanted =
			root.querySelector("[data-tts-runner]")?.checked ?? !!this.settings.keepRunner;

		  // ✅ 저장
		  this.settings.keepRunner = !!runnerWanted;
		  this.saveSettings();

		  if (runnerWanted) this.ensureRunnerWindow(name);

		  this.addCountdown(m, name);
		  return;
		}

 

        const delBtn = t.closest("[data-tts-del]");
        if (delBtn) {
          const id = Number(delBtn.getAttribute("data-tts-del"));
          if (!Number.isNaN(id)) this.removeTimer(id);
          return;
        }

        if (t.closest("[data-tts-clear-triggered]")) {
          this.clearTriggered();
          this.notify("완료된 타이머를 삭제했습니다.", "success", 1800);
          return;
        }
        if (t.closest("[data-tts-clear-all]")) {
          this.clearAllTimers();
          this.notify("모든 타이머를 삭제했습니다.", "success", 1800);
          return;
        }
      });

      root.addEventListener("change", (e) => {
        const t = e.target;

          // ✅ 새창 유지 체크 상태 저장
          if (t.matches("[data-tts-runner]")) {
            this.settings.keepRunner = !!t.checked;
            this.saveSettings();
            return;
          }

        if (t.matches("[data-tts-enabled]")) {
          this.settings.enabled = !!t.checked;
          this.saveSettings();
          return;
        }
          
        if (t.matches("[data-tts-voice]")) {
          this.settings.voice = t.value;

          // ✅ 남/여 선택 시 실제 voiceURI도 같이 고정해둠
          this.initVoiceList();

          if (this.settings.voice === "male") {
            const v = this.preferredMaleVoice;
            this.settings.voiceURI = v && v.voiceURI ? v.voiceURI : "";
            // 남성 음성이 실제로 없으면(=fallback) 경고 한 번 띄움(선택)
            if (!v || v === this.preferredFemaleVoice) {
              this.showPopup("이 환경엔 남성 한국어 음성이 없어 기본 음성으로 재생됩니다. (OS 음성 추가 필요)", "warning", 4500);
            }
          } else {
            const v = this.preferredFemaleVoice;
            this.settings.voiceURI = v && v.voiceURI ? v.voiceURI : "";
          }

          this.saveSettings();
          return;
        }


      });

      root.addEventListener("input", (e) => {
        const t = e.target;
        if (t.matches("[data-tts-rate]")) {
          this.settings.rate = t.value;
          this.saveSettings();
          return;
        }
        if (t.matches("[data-tts-volume]")) {
          this.settings.volume = t.value;
          this.saveSettings();
          return;
        }
        if (t.matches("[data-tts-pitch]")) {
          this.settings.pitch = t.value;
          this.saveSettings();
          return;
        }
      });
    },

    refreshSettingsUI() {
      if (!this.mountEl) return;
      const root = this.mountEl;

      const enabled = root.querySelector("[data-tts-enabled]");
      if (enabled) enabled.checked = !!this.settings.enabled;

      const voice = root.querySelector("[data-tts-voice]");
      if (voice) voice.value = this.settings.voice;

      const rate = root.querySelector("[data-tts-rate]");
      if (rate) rate.value = this.settings.rate;

      const volume = root.querySelector("[data-tts-volume]");
      if (volume) volume.value = this.settings.volume;

      const pitch = root.querySelector("[data-tts-pitch]");
      if (pitch) pitch.value = this.settings.pitch;
    },

    setupIconToggle(iconEl) {
      iconEl.style.cursor = "pointer";
      iconEl.addEventListener("click", () => this.toggleOverlay());
    },

    toggleOverlay() {
      this.setOverlayVisible(!this.overlayVisible);
    },

    setOverlayVisible(show) {
      this.overlayVisible = !!show;
      if (!this.mountEl) return;
      const overlay = this.mountEl.querySelector("[data-tts-overlay]");
      if (!overlay) return;
      overlay.style.display = this.overlayVisible ? "flex" : "none";
    },

    updateAllTimerDisplays() {
      if (!this.mountEl) return;
      const display = this.mountEl.querySelector("[data-tts-timer-display]");
      if (display) display.innerHTML = this.renderTimerListHTML();
    },

    renderTimerListHTML() {
      const now = Date.now();
      const active = (this.timers || []).filter((t) => !t.triggered);

      if (active.length === 0) {
        return `<div class="text-body-secondary small">설정된 타이머가 없습니다</div>`;
      }

      active.sort((a, b) => a.targetTime - b.targetTime);

      const items = active
        .map((timer) => {
          const remaining = timer.targetTime - now;
          const timeStr = this.formatTimeRemaining(remaining);

          const urgent = remaining < 60000;
          const itemClass = urgent ? "list-group-item list-group-item-danger" : "list-group-item";

          return `
            <div class="${itemClass} d-flex justify-content-between align-items-center">
              <div class="me-2">
                <div class="fw-bold">${this.escapeHtml(timer.name)}</div>
                <div class="small text-body-secondary">${timeStr}</div>
              </div>
              <button type="button" class="btn btn-sm btn-outline-danger" data-tts-del="${timer.id}" title="삭제">
                <i class="bi bi-x-lg"></i>
              </button>
            </div>
          `;
        })
        .join("");

      return `<div class="list-group">${items}</div>`;
    },

    // =========================
    // styles
    // =========================
    injectStyles() {
      if (document.getElementById("tts-styles")) return;

      const style = document.createElement("style");
      style.id = "tts-styles";
      style.textContent = `
/* Overlay modal */
.tts-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  background: rgba(0,0,0,.45);
}

/* Popup */
.tts-popup{
  position:fixed;
  top:16px;
  right:16px;
  z-index:10000;
  min-width:280px;
  max-width:420px;
  animation: ttsPopIn .2s ease;
}
.tts-popup.out{ animation: ttsPopOut .2s ease forwards; }

.tts-popup-card{
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-left-width: 6px;
  border-radius: 12px;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.25);
  overflow:hidden;
}
.tts-popup.info .tts-popup-card{ border-left-color: var(--bs-primary); }
.tts-popup.success .tts-popup-card{ border-left-color: var(--bs-success); }
.tts-popup.warning .tts-popup-card{ border-left-color: var(--bs-warning); }
.tts-popup.error .tts-popup-card{ border-left-color: var(--bs-danger); }

.tts-popup-msg{ padding: 12px 12px 3px; font-size: 0.9rem; line-height: 1.4; }
.tts-popup-msg-dt{ padding: 0px 12px 8px; font-size: 0.8rem; line-height: 1.4; }
.tts-popup-actions{ display:flex; gap:8px; padding: 0 12px 12px; }
.tts-popup-bar{ height: 3px; width: 100%; background: var(--bs-primary); }

@keyframes ttsPopIn { from{ transform:translateX(20px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes ttsPopOut { from{ transform:translateX(0); opacity:1; } to{ transform:translateX(20px); opacity:0; } }

@media (max-width:768px){
  .tts-popup{ top:auto; bottom:16px; left:16px; right:16px; max-width:none; }
}
      `;
      document.head.appendChild(style);
    },
  };

  TTSManager.init();
})();