/* 카페24 상품관리 — 옵션/품목 모달 (products.html 에서 window.cf24SetupOptions 로 호출).

   통합 목록: 옵션이 1개(옵션명 하나)인 상품은 옵션값과 품목이 1:1 이므로 한 행에
     썸네일 · 옵션값 이름 · 품목코드 · 자체 품목코드 · 추가금액 · 진열 · 판매 를 놓고
     「저장」 한 번으로 옵션(PUT options) → 품목(PUT variants) 순서로 반영한다.
   행 순서는 품목 목록 순서(카페24가 진열순서대로 돌려준다 = 쇼핑몰 순서)를 따른다.
   옵션이 없는 상품: 행을 자유롭게 추가/삭제해 두고 저장하면 옵션 생성(POST options,
     카페24가 품목을 자동 생성) → 부여된 품목코드를 받아 → 자체코드/추가금액을 품목에
     PUT → 썸네일이 있으면 옵션 PUT. 저장 뒤 다시 읽어 품목코드가 바로 보인다.
   품목 추가: 「+ 행 추가」로 넣은 행은 저장 시 옵션값을 **뒤에 덧붙여** PUT 한다
     (앞쪽 위치는 그대로라 기존 이름이 밀리지 않는다). 카페24가 품목을 자동 생성하면
     그 코드로 자체코드/추가금액을 이어서 PUT 한다. 거부하면 오류를 그대로 보여준다.
   품목 삭제: 행의 ✕ → DELETE /variants/{code} (문서에 있는 유일한 제거 수단). 옵션값
     자체는 남을 수 있어(품목 없는 옵션값) 하단에 따로 보여주고, 정리는 「옵션 재생성」
     (전체 삭제 → 현재 행으로 다시 생성 → 코드/금액/썸네일 재반영, 품목코드가 바뀜)으로.
   옵션이 2개 이상(조합)인 상품: 옵션값과 품목이 1:1 이 아니므로 2열 화면
     (왼쪽 옵션 정의 / 오른쪽 품목 표)을 그대로 쓴다.
   순서 드래그: 품목의 display_order(카페24 문서 — 조합형 품목 진열순서)로 저장한다.
     옵션값 배열 자체를 재배열해 PUT 하지 않는다 — 카페24는 original_options 와
     options 를 **위치**로 짝지어 이름을 바꾸므로, 재배열하면 품목코드와 이름이
     뒤바뀔 위험이 있다(품목코드는 주문 이력이 참조한다).
   옵션값 불러오기: 탭/공백으로 나뉜 텍스트(이름 · 가격 · 추가금액 · 자체코드)를
     붙여넣으면 행에 채운다. 가격 열은 무시한다.
   화면은 언제나 **응답값**으로 다시 그린다(카페24 GET 은 쓰기 직후 예전 값을 돌려줄
     수 있어, 서버가 스냅샷으로 보정한다). */
(function () {
  "use strict";

  var DEFAULT_TYPE = "S";

  window.cf24SetupOptions = function (ctx) {
    var root = ctx.root, no = ctx.productNo, modal = ctx.modal;
    var apiJson = ctx.apiJson, esc = ctx.escHtml, setMsg = ctx.setMsg;
    var trackDirty = ctx.trackDirty, commitValues = ctx.commitValues;

    var openBtn = root.querySelector("#cf24-options-open");
    var body = modal.body;
    var count = root.querySelector("#cf24-options-count");
    if (!openBtn || !body) return;

    var state = { option: null, variants: [], displayTypes: {}, orphans: [] };

    openBtn.addEventListener("click", function () {
      var nameEl = document.getElementById("cf24-name-text");
      modal.open((nameEl ? nameEl.textContent : "") + " (상품번호 " + no + ")");
      load();
    });

    function load() {
      body.innerHTML = '<p class="cf24-muted">카페24에서 불러오는 중…</p>';
      return apiJson("GET", "/cafe24/products/" + no + "/options")
        .then(function (data) {
          state.option = data.option;
          state.variants = data.variants || [];
          state.displayTypes = data.display_types || {};
          render();
        })
        .catch(function (err) {
          body.innerHTML = '<p class="cf24-err">옵션을 불러오지 못했습니다: ' + esc(err.message) +
            '</p><button type="button" class="erp-btn erp-btn-outline" id="cf24-opt-retry">다시 시도</button>';
          body.querySelector("#cf24-opt-retry").addEventListener("click", load);
        });
    }

    /* ── 공통 조각 ── */
    function typeSelect(current, name) {
      var out = '<select name="' + name + '">';
      Object.keys(state.displayTypes).forEach(function (k) {
        out += '<option value="' + k + '"' + (k === current ? " selected" : "") + ">" + esc(state.displayTypes[k]) + "</option>";
      });
      return out + "</select>";
    }

    function toggleBtn(flag, on) {
      var label = flag === "display" ? (on ? "진열" : "미진열") : (on ? "판매" : "중지");
      return '<button type="button" class="cf24-v-toggle' + (on ? " is-on" : "") + '" data-flag="' + flag +
        '" data-on="' + (on ? 1 : 0) + '" data-initial="' + (on ? 1 : 0) + '">' + label + "</button>";
    }

    function paintToggle(btn, on, resetInitial) {
      btn.dataset.on = on ? "1" : "0";
      if (resetInitial) btn.dataset.initial = btn.dataset.on;
      btn.classList.toggle("is-on", on);
      btn.classList.toggle("is-dirty", btn.dataset.on !== btn.dataset.initial);
      btn.textContent = btn.dataset.flag === "display" ? (on ? "진열" : "미진열") : (on ? "판매" : "중지");
    }

    function bindToggles(container) {
      container.querySelectorAll(".cf24-v-toggle").forEach(function (btn) {
        if (btn.dataset.bound) return;
        btn.dataset.bound = "1";
        btn.addEventListener("click", function () { paintToggle(btn, btn.dataset.on !== "1", false); });
      });
    }

    function copyText(text, done) {
      function fallback() {
        var ta = document.createElement("textarea");
        ta.value = text;
        ta.setAttribute("readonly", "");
        ta.style.position = "fixed";
        ta.style.opacity = "0";
        document.body.appendChild(ta);
        ta.select();
        try { if (document.execCommand("copy")) done(); } catch (e) { /* 복사 불가 */ }
        document.body.removeChild(ta);
      }
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(done, fallback);
      } else {
        fallback();
      }
    }

    function bindCopy(container) {
      container.querySelectorAll(".cf24-v-copy").forEach(function (btn) {
        if (btn.dataset.bound) return;
        btn.dataset.bound = "1";
        btn.addEventListener("click", function () {
          copyText(btn.dataset.copyText || btn.textContent, function () {
            var old = btn.textContent;
            btn.textContent = "복사됨";
            btn.classList.add("is-copied");
            setTimeout(function () { btn.textContent = old; btn.classList.remove("is-copied"); }, 1200);
          });
        });
      });
    }

    // 옵션값 썸네일 — 버튼 이미지 → 연결 이미지 → 그 옵션값을 가진 품목 image
    function variantImageFor(name, value) {
      for (var i = 0; i < state.variants.length; i++) {
        var v = state.variants[i];
        if (!v.image) continue;
        for (var j = 0; j < v.options.length; j++) {
          if (v.options[j].name === name && v.options[j].value === value) return v.image;
        }
      }
      return "";
    }

    // 카페24가 경로는 주지만 파일이 없는 경우가 있다(깨진 그림) — 실패하면 "없음"으로 바꾼다.
    var THUMB_EMPTY = '<div class="cf24-opt-thumb-empty">없음</div>';
    function thumbHtml(src, title) {
      return src
        ? '<img class="cf24-opt-thumb" src="' + esc(src) + '" alt="" title="' + esc(title || "") +
          '" onerror="this.outerHTML=\'' + THUMB_EMPTY.replace(/"/g, "&quot;") + '\'" />'
        : THUMB_EMPTY;
    }

    // 썸네일 파일 선택 → 업로드 → hidden 두 개(option_image_file, option_link_image)에 경로
    function bindThumbUploads(container, msgEl) {
      container.querySelectorAll(".cf24-opt-value, .cf24-u-row").forEach(function (row) {
        var fileEl = row.querySelector('input[type="file"]');
        if (!fileEl || fileEl.dataset.bound) return;
        fileEl.dataset.bound = "1";
        fileEl.addEventListener("change", function () {
          var f = fileEl.files && fileEl.files[0];
          if (!f) return;
          var slot = row.querySelector(".cf24-opt-thumb-slot");
          setMsg(msgEl, "썸네일 업로드 중…", "");
          var fd = new FormData();
          fd.append("file", f);
          apiJson("POST", "/cafe24/products/" + no + "/options/image", fd)
            .then(function (data) {
              row.querySelector('[name="option_image_file"]').value = data.path;
              row.querySelector('[name="option_link_image"]').value = data.path;
              slot.innerHTML = '<img class="cf24-opt-thumb is-dirty" src="' + esc(data.path) + '" alt="" />';
              row.classList.add("is-image-dirty");
              setMsg(msgEl, "썸네일을 올렸습니다. 「저장」을 눌러야 카페24에 반영됩니다.", "is-ok");
            })
            .catch(function (err) { setMsg(msgEl, "썸네일 업로드 실패: " + err.message, "is-err"); })
            .then(function () { fileEl.value = ""; });
        });
      });
    }

    function amountPlain(v) { return String(parseInt(String(v || "0").replace(/,/g, ""), 10) || 0); }
    function norm(s) { return String(s || "").replace(/\s+/g, "").toLowerCase(); }

    /* ═══════════════════════════════════════════════════════════
       화면 분기
       ═══════════════════════════════════════════════════════════ */
    function render() {
      var opt = state.option || { has_option: false, options: [] };
      if (count) count.textContent = opt.has_option ? "(" + state.variants.length + "품목)" : "(옵션 없음)";
      if (!opt.has_option) return renderUnified(true);
      if (opt.options.length === 1) return renderUnified(false);
      return renderMulti();
    }

    /* ═══════════════════════════════════════════════════════════
       통합 목록 — 옵션값 1 : 품목 1
       ═══════════════════════════════════════════════════════════ */
    // 행 = 품목 목록 순서. index 는 options 응답 안 위치(옵션 PUT 짝맞춤용).
    // 품목이 없는 옵션값은 state.orphans 로 따로 모은다(행으로 그리지 않는다).
    function unifiedRows() {
      var opt = state.option;
      state.orphans = [];
      if (!opt || !opt.has_option) return [];
      var group = opt.options[0];
      var byText = {};
      group.option_value.forEach(function (v, vi) { byText[v.option_text] = { index: vi, value: v, variant: null }; });
      var rows = [];
      state.variants.forEach(function (variant) {
        if (!variant.options.length) return;
        var r = byText[variant.options[0].value];
        if (!r || r.variant) return;
        r.variant = variant;
        rows.push(r);
      });
      group.option_value.forEach(function (v) {
        var r = byText[v.option_text];
        if (rows.indexOf(r) < 0) state.orphans.push(r);
      });
      return rows;
    }

    function rowHtml(r, canDrag, position) {
      var v = r.value || { option_text: "", option_image_file: "", option_link_image: "", option_color: "" };
      var variant = r.variant;
      var isNewRow = r.index == null;
      var thumbSrc = v.option_image_file || v.option_link_image ||
        (state.option && state.option.has_option ? variantImageFor(state.option.options[0].option_name, v.option_text) : "");
      var code = variant ? variant.variant_code : "";
      // data-index: options 응답 안 위치(옵션 PUT 짝맞춤용, 새 행은 빈 값) / data-pos: 처음 그린 순서(순서 변경 판정용)
      return '<tr class="cf24-u-row' + (isNewRow ? " is-new" : "") + '" data-index="' + (isNewRow ? "" : r.index) + '" data-pos="' + (position == null ? "" : position) + '" data-code="' + esc(code) + '">' +
        '<td class="cf24-u-drag">' + (canDrag ? '<span class="cf24-drag-handle" draggable="true" title="드래그하여 순서 변경">⋮⋮</span>' : "") + "</td>" +
        '<td class="cf24-u-thumb"><span class="cf24-opt-thumb-slot">' + thumbHtml(thumbSrc, v.option_image_file ? "옵션 버튼 이미지" : v.option_link_image ? "옵션 연결 이미지" : "품목 이미지") + "</span>" +
        '<input type="hidden" name="option_image_file" value="' + esc(v.option_image_file || "") + '" />' +
        '<input type="hidden" name="option_link_image" value="' + esc(v.option_link_image || "") + '" />' +
        '<label class="cf24-file-pick cf24-u-pick" title="썸네일 업로드"><input type="file" accept="image/jpeg,image/png,image/gif,image/webp" /><span class="erp-btn erp-btn-outline">썸네일</span></label></td>' +
        '<td class="cf24-u-name"><input type="text" name="option_text" value="' + esc(v.option_text) + '" placeholder="옵션값 이름" /></td>' +
        '<td class="cf24-v-syscode">' + (code
          ? '<button type="button" class="cf24-v-copy" data-copy-text="' + esc(code) + '" title="클릭하면 품목코드를 복사합니다">' + esc(code) + "</button>"
          : '<span class="cf24-muted">저장 시 부여</span>') + "</td>" +
        '<td class="cf24-v-code"><input type="text" name="custom_variant_code" maxlength="40" value="' + esc(variant ? variant.custom_variant_code : "") + '" /></td>' +
        '<td class="cf24-v-amount"><input type="text" name="additional_amount" inputmode="numeric" value="' + esc(amountPlain(variant ? variant.additional_amount : "0")) + '" /></td>' +
        '<td class="cf24-v-flag">' + toggleBtn("display", variant ? !!variant.display : true) + "</td>" +
        '<td class="cf24-v-flag">' + toggleBtn("selling", variant ? !!variant.selling : true) + "</td>" +
        '<td class="cf24-u-del"><button type="button" class="cf24-u-remove" title="' + (isNewRow ? "행 삭제" : "품목 삭제 (카페24에 바로 반영)") + '">✕</button></td>' +
        "</tr>";
    }

    function renderUnified(isNew) {
      var opt = state.option;
      var group = isNew ? { option_name: "", option_display_type: DEFAULT_TYPE } : opt.options[0];
      var rows = isNew ? [] : unifiedRows();
      // 순서 변경은 조합형(T) 품목의 display_order 로만 저장할 수 있다.
      var canDrag = isNew || opt.option_type === "T";

      var html = '<div class="cf24-u-wrap">' +
        '<div class="cf24-u-head">' +
        '  <label class="cf24-side-field cf24-u-optname"><span>옵션명</span><input type="text" name="option_name" value="' + esc(group.option_name) + '" placeholder="예: 구성" /></label>' +
        '  <label class="cf24-side-field cf24-side-field-type"><span>표시방식</span>' + typeSelect(group.option_display_type || DEFAULT_TYPE, "option_display_type") + "</label>" +
        '  <span class="cf24-u-head-actions">' +
        '    <button type="button" class="erp-btn erp-btn-outline" id="cf24-u-import">옵션값 불러오기</button>' +
        '    <button type="button" class="erp-btn erp-btn-outline" id="cf24-u-add">+ 행 추가</button>' +
        "  </span>" +
        "</div>" +
        '<div class="cf24-u-tablewrap"><table class="cf24-variants cf24-u-table"><thead><tr>' +
        '<th class="cf24-u-drag"></th><th class="cf24-u-thumb">썸네일</th><th>옵션값 이름</th><th class="cf24-v-syscode">품목코드</th>' +
        '<th class="cf24-v-code">자체 품목코드</th><th class="cf24-v-amount">추가금액</th><th class="cf24-v-flag">진열</th><th class="cf24-v-flag">판매</th><th class="cf24-u-del"></th>' +
        "</tr></thead><tbody id=\"cf24-u-body\">";
      rows.forEach(function (r, i) { html += rowHtml(r, canDrag, i); });
      if (isNew) html += rowHtml({ index: null, value: null, variant: null }, true, null);
      html += "</tbody></table></div>";

      if (!isNew && state.orphans.length) {
        html += '<p class="cf24-side-note cf24-u-orphans"><strong>품목이 없는 옵션값 ' + state.orphans.length + '개</strong>: ' +
          esc(state.orphans.map(function (r) { return r.value.option_text; }).join(", ")) +
          ' — 쇼핑몰에서 살 수 없는 값입니다. 카페24 API 로는 지울 수 없어 「옵션 재생성」으로 정리합니다(위 행만 다시 만들어집니다).</p>';
      }
      html += '<p class="cf24-side-note cf24-u-note">' +
        (isNew
          ? "저장하면 옵션(조합형)을 만들고 카페24가 품목을 자동 생성합니다. 부여된 품목코드를 받아 자체 품목코드·추가금액·썸네일까지 함께 반영합니다."
          : "「+ 행 추가」한 값은 저장 시 옵션값 끝에 덧붙여 품목을 만듭니다. ✕ 는 품목을 바로 삭제합니다. " +
            (canDrag ? "행을 드래그하면 품목 진열순서로 저장됩니다. " : "") +
            "썸네일은 표시방식이 「미리보기(이미지)」일 때 쇼핑몰에 보입니다.") +
        "</p>" +
        '<div class="cf24-side-actions cf24-u-actions"><span class="cf24-muted" id="cf24-u-msg"></span>' +
        '  <span>' + (isNew ? "" :
          '<button type="button" class="erp-btn erp-btn-outline cf24-btn-danger" id="cf24-opt-delete">옵션 전체 삭제</button> ' +
          '<button type="button" class="erp-btn erp-btn-outline" id="cf24-u-rebuild" title="옵션을 지우고 현재 행으로 다시 만듭니다. 품목코드가 새로 부여됩니다.">옵션 재생성</button> ') +
        '  <button type="button" class="erp-btn erp-btn-primary" id="cf24-u-save">저장</button></span></div>' +
        "</div>";
      body.innerHTML = html;

      var wrap = body.querySelector(".cf24-u-wrap");
      var tbody = body.querySelector("#cf24-u-body");
      var msg = body.querySelector("#cf24-u-msg");
      trackDirty(wrap);
      bindToggles(tbody);
      bindCopy(tbody);
      bindThumbUploads(tbody, msg);
      if (canDrag) bindDrag(tbody);
      tbody.querySelectorAll("tr").forEach(function (tr) { bindRow(tr, tbody, msg); });
      body.querySelector("#cf24-u-add").addEventListener("click", function () {
        tbody.insertAdjacentHTML("beforeend", rowHtml({ index: null, value: null, variant: null }, canDrag, null));
        var tr = tbody.lastElementChild;
        bindRow(tr, tbody, msg);
        if (canDrag) bindDragRow(tr, tbody);
        tr.querySelector('[name="option_text"]').focus();
      });
      body.querySelector("#cf24-u-import").addEventListener("click", function () { openImport(isNew, tbody, msg); });
      body.querySelector("#cf24-u-save").addEventListener("click", function () { saveUnified(isNew, tbody, msg); });
      var del = body.querySelector("#cf24-opt-delete");
      if (del) del.addEventListener("click", deleteOptions);
      var rebuild = body.querySelector("#cf24-u-rebuild");
      if (rebuild) rebuild.addEventListener("click", function () { rebuildFlow(tbody, msg); });
    }

    // 행 하나 연결 — ✕(새 행은 화면에서만 제거, 기존 행은 품목 삭제), 변경 표시, 토글, 썸네일
    function bindRow(tr, tbody, msg) {
      var rm = tr.querySelector(".cf24-u-remove");
      if (rm && !rm.dataset.bound) {
        rm.dataset.bound = "1";
        rm.addEventListener("click", function () {
          if (tr.classList.contains("is-new")) {
            if (tbody.children.length <= 1 && !state.option.has_option) {
              tr.querySelector('[name="option_text"]').value = "";
              return;
            }
            tr.remove();
            return;
          }
          deleteVariantRow(tr, msg);
        });
      }
      trackDirty(tr);
      bindToggles(tr);
      bindCopy(tr);
      bindThumbUploads(tr, msg);
    }

    function deleteVariantRow(tr, msg) {
      var code = tr.dataset.code;
      var name = tr.querySelector('[name="option_text"]').value.trim();
      if (!code) { tr.remove(); return; }
      window.erpConfirm("품목 「" + name + "」(" + code + ")을 카페24에서 삭제합니다. 되돌릴 수 없습니다.\n(옵션값 이름은 남을 수 있으며 「옵션 재생성」으로 정리합니다.) 계속할까요?")
        .then(function (ok) {
          if (!ok) return;
          setMsg(msg, "품목 삭제 중…", "");
          apiJson("DELETE", "/cafe24/products/" + no + "/variants/" + encodeURIComponent(code))
            .then(function () {
              state.variants = state.variants.filter(function (v) { return v.variant_code !== code; });
              tr.remove();
              // 옵션값은 남으므로 '품목 없는 옵션값' 안내를 갱신하려면 다시 그린다.
              var keep = snapshotDom();
              render();
              restoreDom(keep);
              setMsg(body.querySelector("#cf24-u-msg"), "품목 " + code + " 을 삭제했습니다.", "is-ok");
              if (count) count.textContent = "(" + state.variants.length + "품목)";
            })
            .catch(function (err) { setMsg(msg, "삭제 실패: " + err.message, "is-err"); });
        });
    }

    // 다시 그리기 전 편집 중인 값(이름·코드·금액·토글·새 행)을 보관했다가 복원한다.
    function snapshotDom() {
      var tbody = body.querySelector("#cf24-u-body");
      if (!tbody) return null;
      return Array.prototype.map.call(tbody.children, function (tr) {
        return {
          code: tr.dataset.code, isNew: tr.classList.contains("is-new"),
          text: tr.querySelector('[name="option_text"]').value,
          image: tr.querySelector('[name="option_image_file"]').value,
          link: tr.querySelector('[name="option_link_image"]').value,
          custom: tr.querySelector('[name="custom_variant_code"]').value,
          amount: tr.querySelector('[name="additional_amount"]').value,
          display: tr.querySelector('.cf24-v-toggle[data-flag="display"]').dataset.on,
          selling: tr.querySelector('.cf24-v-toggle[data-flag="selling"]').dataset.on
        };
      });
    }

    function restoreDom(keep) {
      if (!keep) return;
      var tbody = body.querySelector("#cf24-u-body");
      var msg = body.querySelector("#cf24-u-msg");
      if (!tbody) return;
      var byCode = {};
      Array.prototype.forEach.call(tbody.children, function (tr) { if (tr.dataset.code) byCode[tr.dataset.code] = tr; });
      keep.forEach(function (k) {
        var tr = k.isNew ? null : byCode[k.code];
        if (k.isNew) {
          tbody.insertAdjacentHTML("beforeend", rowHtml({ index: null, value: null, variant: null }, true, null));
          tr = tbody.lastElementChild;
          bindRow(tr, tbody, msg);
          bindDragRow(tr, tbody);
        }
        if (!tr) return;
        var set = function (sel, val) {
          var el = tr.querySelector(sel);
          if (el && el.value !== val) { el.value = val; el.dispatchEvent(new Event("input")); }
        };
        set('[name="option_text"]', k.text);
        set('[name="custom_variant_code"]', k.custom);
        set('[name="additional_amount"]', k.amount);
        if (k.image) { tr.querySelector('[name="option_image_file"]').value = k.image; }
        if (k.link) { tr.querySelector('[name="option_link_image"]').value = k.link; }
        ["display", "selling"].forEach(function (flag) {
          var btn = tr.querySelector('.cf24-v-toggle[data-flag="' + flag + '"]');
          if (btn && btn.dataset.on !== k[flag]) paintToggle(btn, k[flag] === "1", false);
        });
      });
    }

    /* ── 드래그 정렬 (HTML5 DnD, 핸들에서만 시작) ── */
    var dragging = null;
    function bindDragRow(tr, tbody) {
      var h = tr.querySelector(".cf24-drag-handle");
      if (!h || h.dataset.bound) return;
      h.dataset.bound = "1";
      h.addEventListener("dragstart", function (e) {
        dragging = tr;
        tr.classList.add("is-dragging");
        e.dataTransfer.effectAllowed = "move";
        try { e.dataTransfer.setData("text/plain", tr.dataset.code || "row"); } catch (err) { /* IE */ }
      });
      h.addEventListener("dragend", function () {
        if (dragging) dragging.classList.remove("is-dragging");
        dragging = null;
        markOrder(tbody);
      });
    }

    function bindDrag(tbody) {
      tbody.querySelectorAll("tr").forEach(function (tr) { bindDragRow(tr, tbody); });
      tbody.addEventListener("dragover", function (e) {
        if (!dragging) return;
        e.preventDefault();
        var over = e.target.closest("tr");
        if (!over || over === dragging) return;
        var rect = over.getBoundingClientRect();
        var after = (e.clientY - rect.top) > rect.height / 2;
        tbody.insertBefore(dragging, after ? over.nextSibling : over);
      });
      tbody.addEventListener("drop", function (e) { e.preventDefault(); });
    }

    // 순서가 처음과 달라졌는지 표시(저장 시 display_order 전송 여부)
    function markOrder(tbody) {
      var changed = false;
      Array.prototype.forEach.call(tbody.children, function (tr, i) {
        var orig = tr.dataset.pos === "" || tr.dataset.pos == null ? null : parseInt(tr.dataset.pos, 10);
        if (orig !== null && orig !== i) changed = true;
      });
      tbody.classList.toggle("is-order-dirty", changed);
      Array.prototype.forEach.call(tbody.children, function (tr) {
        var h = tr.querySelector(".cf24-drag-handle");
        if (h) h.classList.toggle("is-dirty", changed);
      });
    }

    /* ── 옵션값 불러오기 (텍스트 붙여넣기) ── */
    function parseImport(text) {
      var out = [];
      String(text || "").split(/\r?\n/).forEach(function (line) {
        if (!line.trim()) return;
        var cols = line.indexOf("\t") >= 0 ? line.split("\t") : line.split(/\s{2,}/);
        cols = cols.map(function (c) { return c.trim(); });
        while (cols.length && !cols[cols.length - 1]) cols.pop();
        if (!cols.length) return;
        var name = cols.shift();
        if (!name) return;
        var code = "";
        if (cols.length && /[A-Za-z가-힣]/.test(cols[cols.length - 1])) code = cols.pop();
        var nums = cols.map(function (c) {
          var t = c.replace(/[,\s원]/g, "");
          if (t === "-" || t === "") return 0;
          var n = parseInt(t, 10);
          return isNaN(n) ? null : n;
        }).filter(function (n) { return n !== null; });
        // 열이 2개 이상이면 첫 번째는 판매가(무시), 마지막이 추가금액
        var amount = nums.length >= 2 ? nums[nums.length - 1] : (nums.length === 1 ? nums[0] : null);
        out.push({ name: name, amount: amount, code: code });
      });
      return out;
    }

    function openImport(isNew, tbody, msg) {
      var dlg = document.createElement("div");
      dlg.className = "cf24-modal cf24-import";
      dlg.innerHTML = '<div class="cf24-modal-box cf24-import-box" role="dialog" aria-modal="true">' +
        '<div class="cf24-modal-head"><h3 class="cf24-modal-title">옵션값 불러오기</h3>' +
        '<button type="button" class="cf24-modal-close" aria-label="닫기">✕</button></div>' +
        '<div class="cf24-modal-body">' +
        '<p class="cf24-side-note">한 줄에 하나씩, 탭(엑셀 복사) 또는 두 칸 이상 공백으로 구분: <code>이름 · 판매가 · 추가금액 · 자체 품목코드</code>. 판매가는 무시합니다. 추가금액 「-」는 0.' +
        (isNew ? "" : " 이름이 같은 행은 자체코드·추가금액을 채우고, 없는 이름은 새 행으로 추가합니다.") + "</p>" +
        '<textarea class="cf24-import-text" placeholder="미라클통 퓨어 스타터 SET\t9,900\t-\tPE-0002\n미라클통 퓨어 스몰 SET\t29,900\t20,000\tPE-0003"></textarea>' +
        '<p class="cf24-muted cf24-import-preview"></p>' +
        '<div class="cf24-side-actions"><span class="cf24-muted"></span><span>' +
        '<button type="button" class="erp-btn erp-btn-outline cf24-import-cancel">취소</button> ' +
        '<button type="button" class="erp-btn erp-btn-primary cf24-import-apply">적용</button></span></div>' +
        "</div></div>";
      document.body.appendChild(dlg);
      var ta = dlg.querySelector("textarea");
      var preview = dlg.querySelector(".cf24-import-preview");
      function close() { dlg.remove(); }
      dlg.querySelector(".cf24-modal-close").addEventListener("click", close);
      dlg.querySelector(".cf24-import-cancel").addEventListener("click", close);
      dlg.addEventListener("click", function (e) { if (e.target === dlg) close(); });
      ta.addEventListener("input", function () {
        var parsed = parseImport(ta.value);
        preview.textContent = parsed.length
          ? parsed.length + "행 인식 — 예: " + parsed[0].name + " / 추가금액 " + (parsed[0].amount == null ? "(없음)" : parsed[0].amount.toLocaleString("ko-KR")) + " / 코드 " + (parsed[0].code || "(없음)")
          : "";
      });
      dlg.querySelector(".cf24-import-apply").addEventListener("click", function () {
        var parsed = parseImport(ta.value);
        if (!parsed.length) { window.erpAlert("인식된 줄이 없습니다."); return; }
        applyImport(parsed, isNew, tbody, msg);
        close();
      });
      ta.focus();
    }

    function setRowValues(tr, item) {
      var nameEl = tr.querySelector('[name="option_text"]');
      var codeEl = tr.querySelector('[name="custom_variant_code"]');
      var amtEl = tr.querySelector('[name="additional_amount"]');
      if (item.name != null && nameEl) { nameEl.value = item.name; nameEl.dispatchEvent(new Event("input")); }
      if (item.code && codeEl) { codeEl.value = item.code; codeEl.dispatchEvent(new Event("input")); }
      if (item.amount != null && amtEl) { amtEl.value = String(item.amount); amtEl.dispatchEvent(new Event("input")); }
    }

    function addNewRow(tbody, msg) {
      var canDrag = tbody.querySelector(".cf24-drag-handle") !== null || !state.option || !state.option.has_option;
      tbody.insertAdjacentHTML("beforeend", rowHtml({ index: null, value: null, variant: null }, canDrag, null));
      var tr = tbody.lastElementChild;
      bindRow(tr, tbody, msg);
      if (canDrag) bindDragRow(tr, tbody);
      return tr;
    }

    function applyImport(parsed, isNew, tbody, msg) {
      if (isNew) {
        // 비어 있는 행만 있으면 교체, 내용이 있으면 뒤에 덧붙인다
        var blank = Array.prototype.every.call(tbody.children, function (tr) {
          return !tr.querySelector('[name="option_text"]').value.trim();
        });
        if (blank) tbody.innerHTML = "";
        parsed.forEach(function (item) { setRowValues(addNewRow(tbody, msg), item); });
        setMsg(msg, parsed.length + "행을 채웠습니다. 「저장」을 누르면 카페24에 반영됩니다.", "is-ok");
        return;
      }
      var rows = Array.prototype.slice.call(tbody.children);
      var matched = 0, added = 0, orphan = [];
      parsed.forEach(function (item) {
        var tr = null;
        for (var i = 0; i < rows.length; i++) {
          if (norm(rows[i].querySelector('[name="option_text"]').value) === norm(item.name)) { tr = rows[i]; break; }
        }
        if (tr) { setRowValues(tr, { code: item.code, amount: item.amount }); matched++; return; }
        if (state.orphans.some(function (r) { return norm(r.value.option_text) === norm(item.name); })) { orphan.push(item.name); return; }
        setRowValues(addNewRow(tbody, msg), item);
        added++;
      });
      var text = matched + "행을 채우고 " + added + "행을 새로 추가했습니다. 「저장」을 누르면 카페24에 반영됩니다.";
      if (orphan.length) text += " 품목 없는 옵션값과 이름이 같아 건너뜀(옵션 재생성으로 정리): " + orphan.join(", ");
      setMsg(msg, text, orphan.length ? "is-err" : "is-ok");
    }

    /* ── 저장 (통합) ── */
    function collectUnified(tbody) {
      return Array.prototype.map.call(tbody.children, function (tr, i) {
        return {
          tr: tr,
          position: i,
          isNew: tr.classList.contains("is-new"),
          index: tr.dataset.index === "" ? null : parseInt(tr.dataset.index, 10),
          code: tr.dataset.code || "",
          text: tr.querySelector('[name="option_text"]').value.trim(),
          image: tr.querySelector('[name="option_image_file"]').value,
          link: tr.querySelector('[name="option_link_image"]').value,
          custom: tr.querySelector('[name="custom_variant_code"]'),
          amount: tr.querySelector('[name="additional_amount"]'),
          display: tr.querySelector('.cf24-v-toggle[data-flag="display"]'),
          selling: tr.querySelector('.cf24-v-toggle[data-flag="selling"]')
        };
      });
    }

    function validateNames(rows) {
      var seen = {};
      for (var i = 0; i < rows.length; i++) {
        if (!rows[i].text) return "옵션값 이름이 비어 있는 행이 있습니다.";
        if (seen[norm(rows[i].text)]) return "옵션값 이름이 중복됩니다: " + rows[i].text;
        seen[norm(rows[i].text)] = true;
        if (rows[i].isNew && state.orphans.some(function (r) { return norm(r.value.option_text) === norm(rows[i].text); })) {
          return "「" + rows[i].text + "」은 품목 없는 옵션값으로 이미 있습니다. 「옵션 재생성」으로 정리한 뒤 추가하세요.";
        }
      }
      return "";
    }

    function variantPatch(r, withOrder) {
      var patch = { variant_code: r.code };
      var any = false;
      if (r.custom.value !== r.custom.defaultValue) { patch.custom_variant_code = r.custom.value.trim(); any = true; }
      if (r.amount.value !== r.amount.defaultValue) { patch.additional_amount = r.amount.value.trim() || "0"; any = true; }
      if (r.display.dataset.on !== r.display.dataset.initial) { patch.display = r.display.dataset.on === "1" ? "on" : "off"; any = true; }
      if (r.selling.dataset.on !== r.selling.dataset.initial) { patch.selling = r.selling.dataset.on === "1" ? "on" : "off"; any = true; }
      if (withOrder) { patch.display_order = r.position + 1; any = true; }
      return any ? patch : null;
    }

    // 새 행(아직 품목 없음)의 초기 패치 — 기본값(빈 코드·0원·진열·판매)과 다른 것만
    function newRowPatch(r, code) {
      var p = { variant_code: code };
      var any = false;
      if (r.custom.value.trim()) { p.custom_variant_code = r.custom.value.trim(); any = true; }
      if (amountPlain(r.amount.value) !== "0") { p.additional_amount = r.amount.value.trim(); any = true; }
      if (r.display.dataset.on !== "1") { p.display = "off"; any = true; }
      if (r.selling.dataset.on !== "1") { p.selling = "off"; any = true; }
      return any ? p : null;
    }

    function codesByValue(variants) {
      var map = {};
      (variants || []).forEach(function (v) { if (v.options.length) map[norm(v.options[0].value)] = v.variant_code; });
      return map;
    }

    function saveUnified(isNew, tbody, msg) {
      var rows = collectUnified(tbody);
      var problem = validateNames(rows);
      if (problem) { window.erpAlert(problem); return; }
      var optName = body.querySelector('[name="option_name"]').value.trim();
      var optType = body.querySelector('[name="option_display_type"]').value;
      if (!optName) { window.erpAlert("옵션명을 입력하세요."); return; }
      var saveBtn = body.querySelector("#cf24-u-save");

      if (isNew) {
        window.erpConfirm("옵션 「" + optName + "」과 옵션값 " + rows.length + "개를 만들고 품목을 생성합니다.\n카페24에 바로 반영됩니다. 계속할까요?")
          .then(function (ok) { if (ok) createFromRows(rows, optName, optType, saveBtn, msg, false); });
        return;
      }

      // 기존 옵션 — 옵션(PUT) 은 **원래 순서**로 짝을 맞추고, 새 행은 끝에 덧붙인다.
      var group = state.option.options[0];
      var optionsChanged = optName !== group.option_name || optType !== (group.option_display_type || DEFAULT_TYPE);
      var edited = group.option_value.map(function (ov, vi) {
        var r = null;
        for (var i = 0; i < rows.length; i++) if (rows[i].index === vi) { r = rows[i]; break; }
        if (!r) return { option_text: ov.option_text, option_image_file: ov.option_image_file, option_link_image: ov.option_link_image, option_color: ov.option_color };
        if (r.text !== ov.option_text || r.image !== (ov.option_image_file || "") || r.link !== (ov.option_link_image || "")) optionsChanged = true;
        return { option_text: r.text, option_image_file: r.image, option_link_image: r.link, option_color: ov.option_color || "" };
      });
      var newRows = rows.filter(function (r) { return r.isNew; });
      newRows.forEach(function (r) {
        edited.push({ option_text: r.text, option_image_file: r.image, option_link_image: r.link, option_color: "" });
        optionsChanged = true;
      });
      var orderChanged = tbody.classList.contains("is-order-dirty");
      var patches = [];
      rows.forEach(function (r) {
        if (!r.code) return;
        var p = variantPatch(r, orderChanged);
        if (p) patches.push(p);
      });
      if (!optionsChanged && !patches.length) { setMsg(msg, "바뀐 값이 없습니다.", ""); return; }

      var lines = [];
      if (optionsChanged) lines.push("옵션명·옵션값 이름/썸네일/표시방식" + (newRows.length ? " (+ 옵션값 " + newRows.length + "개 추가 → 품목 생성)" : ""));
      if (patches.length) lines.push("품목 " + patches.length + "건 (자체코드·추가금액·진열/판매" + (orderChanged ? "·순서" : "") + ")");
      window.erpConfirm("카페24에 바로 반영합니다. 계속할까요?\n\n- " + lines.join("\n- ")).then(function (ok) {
        if (!ok) return;
        saveBtn.disabled = true;
        setMsg(msg, "저장 중…", "");
        var chain = Promise.resolve();
        if (optionsChanged) {
          chain = chain.then(function () {
            return apiJson("PUT", "/cafe24/products/" + no + "/options", {
              options: [{ option_name: optName, option_display_type: optType, option_value: edited }],
              option_list_type: state.option.option_list_type
            }).then(function (data) {
              state.option = data.option;
              if (data.variants) state.variants = data.variants;
              if (newRows.length) {
                // 새 품목코드를 이름으로 짝지어 자체코드·추가금액·진열/판매 패치를 만든다
                var map = codesByValue(state.variants);
                var missing = 0;
                newRows.forEach(function (r) {
                  var code = map[norm(r.text)];
                  if (!code) { missing++; return; }
                  var p = newRowPatch(r, code);
                  if (p) patches.push(p);
                });
                if (missing) setMsg(msg, "옵션값은 추가됐지만 품목 " + missing + "건은 카페24 품목 조회가 늦어 자체코드/추가금액을 넣지 못했습니다 — 저장 후 다시 시도하세요.", "is-err");
              }
            });
          });
        }
        chain = chain.then(function () {
          if (!patches.length) return null;
          setMsg(msg, "품목 " + patches.length + "건 반영 중…", "");
          return apiJson("PUT", "/cafe24/products/" + no + "/variants", { rows: patches });
        });
        chain
          .then(function () { return load(); })
          .then(function () {
            setMsg(body.querySelector("#cf24-u-msg"), "카페24에 반영했습니다.", "is-ok");
          })
          .catch(function (err) {
            setMsg(msg, "실패: " + err.message + " — 화면을 다시 불러옵니다.", "is-err");
            setTimeout(load, 2000);
          })
          .then(function () { saveBtn.disabled = false; });
      });
    }

    // 옵션 없는 상태에서 행들로 옵션을 만든다(재생성 시에는 먼저 DELETE 를 거친다).
    function createFromRows(rows, optName, optType, saveBtn, msg, isRebuild) {
      saveBtn.disabled = true;
      var chain = Promise.resolve();
      if (isRebuild) {
        setMsg(msg, "기존 옵션·품목 삭제 중…", "");
        chain = chain.then(function () { return apiJson("DELETE", "/cafe24/products/" + no + "/options"); });
      }
      chain
        .then(function () {
          setMsg(msg, "옵션 생성 중… (카페24가 품목을 만들고 코드를 부여합니다)", "");
          return apiJson("POST", "/cafe24/products/" + no + "/options", {
            option_name: optName, values: rows.map(function (r) { return r.text; }), display_type: optType
          });
        })
        .then(function (data) {
          state.option = data.option;
          state.variants = data.variants || [];
          var map = codesByValue(state.variants);
          var patches = [];
          var unmatched = 0;
          rows.forEach(function (r) {
            var code = map[norm(r.text)];
            if (!code) { unmatched++; return; }
            var p = newRowPatch(r, code);
            if (p) patches.push(p);
          });
          var inner = Promise.resolve();
          if (patches.length) {
            setMsg(msg, "품목 " + patches.length + "건에 자체코드·추가금액 반영 중…", "");
            inner = inner.then(function () { return apiJson("PUT", "/cafe24/products/" + no + "/variants", { rows: patches }); });
          }
          if (rows.some(function (r) { return r.image || r.link; })) {
            inner = inner.then(function () {
              setMsg(msg, "썸네일 반영 중…", "");
              var edited = state.option.options[0].option_value.map(function (ov) {
                var r = null;
                for (var i = 0; i < rows.length; i++) if (rows[i].text === ov.option_text) { r = rows[i]; break; }
                return { option_text: ov.option_text, option_image_file: r ? r.image : "", option_link_image: r ? r.link : "", option_color: "" };
              });
              return apiJson("PUT", "/cafe24/products/" + no + "/options", {
                options: [{ option_name: optName, option_display_type: optType, option_value: edited }],
                option_list_type: state.option.option_list_type
              });
            });
          }
          return inner.then(function () { return unmatched; });
        })
        .then(function (unmatched) {
          return load().then(function () {
            var m = body.querySelector("#cf24-u-msg");
            setMsg(m, unmatched
              ? "옵션을 만들었습니다. 품목 " + unmatched + "건은 카페24 품목 조회가 늦어 자체코드/추가금액을 넣지 못했습니다 — 다시 저장하세요."
              : (isRebuild ? "옵션·품목을 다시 만들고 카페24에 반영했습니다. 품목코드가 새로 부여되었습니다." : "옵션·품목을 만들고 카페24에 반영했습니다."),
              unmatched ? "is-err" : "is-ok");
          });
        })
        .catch(function (err) {
          setMsg(msg, "실패: " + err.message + (isRebuild ? " — 옵션 상태를 확인하려면 창을 닫았다 다시 여세요." : ""), "is-err");
          saveBtn.disabled = false;
        });
    }

    // 옵션 재생성 — 전체 삭제 후 현재 행(이름·코드·금액·진열/판매·썸네일)으로 다시 만든다.
    function rebuildFlow(tbody, msg) {
      var rows = collectUnified(tbody);
      var problem = validateNames(rows.map(function (r) { return { text: r.text, isNew: false }; }));
      if (problem) { window.erpAlert(problem); return; }
      var optName = body.querySelector('[name="option_name"]').value.trim();
      var optType = body.querySelector('[name="option_display_type"]').value;
      if (!optName) { window.erpAlert("옵션명을 입력하세요."); return; }
      var saveBtn = body.querySelector("#cf24-u-save");
      var orphanNote = state.orphans.length ? "\n- 품목 없는 옵션값 " + state.orphans.length + "개는 사라집니다." : "";
      window.erpConfirm("옵션을 전부 지우고 현재 " + rows.length + "행으로 다시 만듭니다.\n\n- 모든 품목코드가 새로 부여됩니다(주문 이력·외부 연동이 품목코드를 참조하면 영향).\n- 재고 수량은 초기화될 수 있습니다." + orphanNote + "\n\n되돌릴 수 없습니다. 계속할까요?")
        .then(function (ok) { if (ok) createFromRows(rows, optName, optType, saveBtn, msg, true); });
    }

    /* ═══════════════════════════════════════════════════════════
       옵션 2개 이상(조합) — 예전 2열 화면
       ═══════════════════════════════════════════════════════════ */
    function renderMulti() {
      var opt = state.option;
      var variants = state.variants;
      var html = '<div class="cf24-modal-grid"><section class="cf24-modal-col cf24-modal-col-options">' +
        '<h4 class="cf24-side-title">옵션 정의</h4><form class="cf24-side-form" id="cf24-opt-form">';
      opt.options.forEach(function (o, gi) {
        html += '<div class="cf24-opt-group" data-group="' + gi + '"><div class="cf24-opt-head">' +
          '<label class="cf24-side-field"><span>옵션명</span><input type="text" name="option_name" value="' + esc(o.option_name) + '" /></label>' +
          '<label class="cf24-side-field cf24-side-field-type"><span>표시방식</span>' + typeSelect(o.option_display_type || DEFAULT_TYPE, "option_display_type") + "</label></div>";
        o.option_value.forEach(function (v, vi) {
          var src = v.option_image_file || v.option_link_image || variantImageFor(o.option_name, v.option_text);
          html += '<div class="cf24-opt-value" data-value="' + vi + '"><span class="cf24-opt-thumb-slot">' + thumbHtml(src) + "</span>" +
            '<input type="text" name="option_text" value="' + esc(v.option_text) + '" placeholder="옵션값 이름" />' +
            '<input type="hidden" name="option_image_file" value="' + esc(v.option_image_file) + '" />' +
            '<input type="hidden" name="option_link_image" value="' + esc(v.option_link_image) + '" />' +
            '<label class="cf24-file-pick"><input type="file" accept="image/jpeg,image/png,image/gif,image/webp" /><span class="erp-btn erp-btn-outline">썸네일</span></label></div>';
        });
        html += "</div>";
      });
      html += '<p class="cf24-side-note">옵션이 2개 이상인 조합 상품입니다. 옵션값 추가·삭제는 카페24 API 가 지원하지 않습니다.</p>' +
        '<div class="cf24-side-actions"><span class="cf24-muted" id="cf24-opt-msg"></span><button class="erp-btn erp-btn-primary" type="submit">옵션 저장</button></div></form>' +
        '<div class="cf24-opt-danger"><button type="button" class="erp-btn erp-btn-outline" id="cf24-opt-delete">옵션 전체 삭제</button></div></section>';
      html += '<section class="cf24-modal-col cf24-modal-col-variants"><h4 class="cf24-side-title">품목 (' + variants.length + ')</h4>';
      if (!variants.length) {
        html += '<p class="cf24-muted">품목이 아직 조회되지 않았습니다. 잠시 뒤 창을 닫았다 다시 여세요.</p>';
      } else {
        html += '<div class="cf24-variants-wrap"><table class="cf24-variants"><thead><tr><th class="cf24-v-imgcol"></th><th>옵션</th><th class="cf24-v-syscode">품목코드</th>' +
          '<th class="cf24-v-code">자체 품목코드</th><th class="cf24-v-amount">추가금액</th><th class="cf24-v-flag">진열</th><th class="cf24-v-flag">판매</th><th class="cf24-u-del"></th></tr></thead><tbody>';
        variants.forEach(function (v) {
          var label = v.options.map(function (o) { return o.value; }).join(" / ") || v.variant_code;
          html += '<tr class="cf24-v-item" data-code="' + esc(v.variant_code) + '">' +
            '<td class="cf24-v-imgcol">' + (v.image ? '<img class="cf24-v-img" src="' + esc(v.image) + '" alt="" />' : '<span class="cf24-v-img cf24-v-img-empty"></span>') + "</td>" +
            '<td class="cf24-v-name" title="' + esc(label) + '">' + esc(label) + "</td>" +
            '<td class="cf24-v-syscode"><button type="button" class="cf24-v-copy" data-copy-text="' + esc(v.variant_code) + '">' + esc(v.variant_code) + "</button></td>" +
            '<td class="cf24-v-code"><input type="text" name="custom_variant_code" maxlength="40" value="' + esc(v.custom_variant_code) + '" /></td>' +
            '<td class="cf24-v-amount"><input type="text" name="additional_amount" inputmode="numeric" value="' + esc(amountPlain(v.additional_amount)) + '" /></td>' +
            '<td class="cf24-v-flag">' + toggleBtn("display", !!v.display) + "</td><td class=\"cf24-v-flag\">" + toggleBtn("selling", !!v.selling) + "</td>" +
            '<td class="cf24-u-del"><button type="button" class="cf24-u-remove" data-code="' + esc(v.variant_code) + '" title="품목 삭제 (카페24에 바로 반영)">✕</button></td></tr>';
        });
        html += "</tbody></table></div><div class=\"cf24-side-actions\" style=\"margin-top:8px;\"><span class=\"cf24-muted\" id=\"cf24-var-msg\"></span>" +
          '<button type="button" class="erp-btn erp-btn-primary" id="cf24-var-save">품목 저장</button></div>';
      }
      html += "</section></div>";
      body.innerHTML = html;

      var optForm = body.querySelector("#cf24-opt-form");
      trackDirty(optForm);
      bindThumbUploads(optForm, optForm.querySelector("#cf24-opt-msg"));
      optForm.addEventListener("submit", function (e) { e.preventDefault(); saveMultiOptions(optForm); });
      body.querySelector("#cf24-opt-delete").addEventListener("click", deleteOptions);
      var wrap = body.querySelector(".cf24-variants-wrap");
      if (wrap) {
        trackDirty(wrap);
        bindToggles(wrap);
        bindCopy(wrap);
        body.querySelector("#cf24-var-save").addEventListener("click", function () { saveMultiVariants(wrap); });
        wrap.querySelectorAll(".cf24-u-remove").forEach(function (btn) {
          btn.addEventListener("click", function () {
            var tr = btn.closest("tr");
            var msg = body.querySelector("#cf24-var-msg");
            window.erpConfirm("품목 「" + tr.querySelector(".cf24-v-name").textContent + "」(" + btn.dataset.code + ")을 카페24에서 삭제합니다. 되돌릴 수 없습니다. 계속할까요?")
              .then(function (ok) {
                if (!ok) return;
                setMsg(msg, "품목 삭제 중…", "");
                apiJson("DELETE", "/cafe24/products/" + no + "/variants/" + encodeURIComponent(btn.dataset.code))
                  .then(function () {
                    state.variants = state.variants.filter(function (v) { return v.variant_code !== btn.dataset.code; });
                    tr.remove();
                    setMsg(msg, "품목 " + btn.dataset.code + " 을 삭제했습니다.", "is-ok");
                    if (count) count.textContent = "(" + state.variants.length + "품목)";
                  })
                  .catch(function (err) { setMsg(msg, "삭제 실패: " + err.message, "is-err"); });
              });
          });
        });
      }
    }

    function saveMultiOptions(optForm) {
      var msg = optForm.querySelector("#cf24-opt-msg");
      var edited = [];
      var changed = false;
      optForm.querySelectorAll(".cf24-opt-group[data-group]").forEach(function (g, gi) {
        var orig = state.option.options[gi];
        var entry = { option_name: g.querySelector('[name="option_name"]').value.trim(),
                      option_display_type: g.querySelector('[name="option_display_type"]').value, option_value: [] };
        if (entry.option_name !== orig.option_name || entry.option_display_type !== (orig.option_display_type || DEFAULT_TYPE)) changed = true;
        g.querySelectorAll(".cf24-opt-value").forEach(function (row, vi) {
          var ov = orig.option_value[vi] || {};
          var item = { option_text: row.querySelector('[name="option_text"]').value.trim(),
                       option_image_file: row.querySelector('[name="option_image_file"]').value,
                       option_link_image: row.querySelector('[name="option_link_image"]').value,
                       option_color: ov.option_color || "" };
          if (item.option_text !== ov.option_text || item.option_image_file !== (ov.option_image_file || "") || item.option_link_image !== (ov.option_link_image || "")) changed = true;
          entry.option_value.push(item);
        });
        edited.push(entry);
      });
      if (!changed) { setMsg(msg, "바뀐 값이 없습니다.", ""); return; }
      window.erpConfirm("옵션명·옵션값을 카페24에 바로 반영합니다. 계속할까요?").then(function (ok) {
        if (!ok) return;
        setMsg(msg, "저장 중…", "");
        apiJson("PUT", "/cafe24/products/" + no + "/options", { options: edited, option_list_type: state.option.option_list_type })
          .then(function (data) {
            state.option = data.option;
            state.variants = data.variants || state.variants;
            render();
            setMsg(body.querySelector("#cf24-opt-msg"), "카페24에 반영했습니다.", "is-ok");
          })
          .catch(function (err) { setMsg(msg, "실패: " + err.message, "is-err"); });
      });
    }

    function saveMultiVariants(wrap) {
      var msg = body.querySelector("#cf24-var-msg");
      var saveBtn = body.querySelector("#cf24-var-save");
      var rows = [];
      wrap.querySelectorAll("tr[data-code]").forEach(function (tr) {
        var r = { code: tr.dataset.code, custom: tr.querySelector('[name="custom_variant_code"]'), amount: tr.querySelector('[name="additional_amount"]'),
                  display: tr.querySelector('.cf24-v-toggle[data-flag="display"]'), selling: tr.querySelector('.cf24-v-toggle[data-flag="selling"]') };
        var p = variantPatch(r, false);
        if (p) rows.push(p);
      });
      if (!rows.length) { setMsg(msg, "바뀐 품목이 없습니다.", ""); return; }
      window.erpConfirm("품목 " + rows.length + "건을 카페24에 바로 반영합니다. 계속할까요?").then(function (ok) {
        if (!ok) return;
        saveBtn.disabled = true;
        setMsg(msg, "저장 중…", "");
        apiJson("PUT", "/cafe24/products/" + no + "/variants", { rows: rows })
          .then(function (data) {
            var updated = data.updated || {};
            Object.keys(updated).forEach(function (code) {
              var u = updated[code];
              var tr = wrap.querySelector('tr[data-code="' + code + '"]');
              if (!tr) return;
              if (u.custom_variant_code !== undefined) tr.querySelector('[name="custom_variant_code"]').value = u.custom_variant_code;
              if (u.additional_amount !== undefined) tr.querySelector('[name="additional_amount"]').value = amountPlain(u.additional_amount);
              tr.querySelectorAll(".cf24-v-toggle").forEach(function (btn) {
                if (u[btn.dataset.flag] !== undefined) paintToggle(btn, !!u[btn.dataset.flag], true);
              });
              state.variants.forEach(function (v) {
                if (v.variant_code !== code) return;
                if (u.custom_variant_code !== undefined) v.custom_variant_code = u.custom_variant_code;
                if (u.additional_amount !== undefined) v.additional_amount = u.additional_amount;
                if (u.display !== undefined) v.display = !!u.display;
                if (u.selling !== undefined) v.selling = !!u.selling;
              });
            });
            commitValues(wrap);
            setMsg(msg, "카페24에 반영했습니다.", "is-ok");
          })
          .catch(function (err) { setMsg(msg, "실패: " + err.message, "is-err"); })
          .then(function () { saveBtn.disabled = false; });
      });
    }

    function deleteOptions() {
      window.erpConfirm("옵션을 전부 삭제합니다. 카페24가 이 상품의 **품목도 모두 삭제**하며 되돌릴 수 없습니다.\n정말 삭제할까요?")
        .then(function (ok) {
          if (!ok) return;
          body.innerHTML = '<p class="cf24-muted">삭제 중…</p>';
          apiJson("DELETE", "/cafe24/products/" + no + "/options")
            .then(function (data) { state.option = data.option; state.variants = []; render(); })
            .catch(function (err) { body.innerHTML = '<p class="cf24-err">삭제 실패: ' + esc(err.message) + "</p>"; });
        });
    }
  };
})();