<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>[No.1 King] CS 통합 관리앱 (미라클주방)</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ root_path }}/static/css/styles.css?v=5">
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script>
        // 서브경로 호스팅 정보 — JS 가 fetch 시 prefix 로 사용한다.
        window.APP_BASE_PATH = "{{ root_path }}";
    </script>
    <style>
        .hover-row:hover {
            background-color: #a8e0ff !important;
            transition: background-color 0.1s;
        }

        button,
        input,
        select,
        textarea,
        table,
        th,
        td,
        span,
        div,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: inherit;
        }
    </style>
</head>

<body>
    <div class="app-container">
        <!-- Sidebar Navigation -->
        <nav class="sidebar">
            <div class="logo">
                <h1>No.1 King</h1>
                <p>CS 통합 관리</p>
                <div id="app-version-text" style="color: #a0aec0; font-size: 0.95rem; margin-top: 4px; font-weight: normal;">
                    Ver 8.58
                </div>
                <div style="color: #a0aec0; font-size: 0.75rem; margin-top: 4px; font-weight: normal;">
                    (2026.06.01)
                </div>
            </div>
            <ul class="nav-links">
                <li class="active" data-tab="order-tab">CS 작업</li>
                <li data-tab="manual-tab">수동발주</li>
                <li data-tab="product-tab">상품 설정</li>
                <li data-tab="auto-order-tab"
                    style="pointer-events: none; opacity: 0.5; display: inline-flex; align-items: center; justify-content: center;"
                    title="서버 DB 점검으로 인해 잠시 비활성화되었습니다.">
                    자동발주
                    <span
                        style="font-size: 0.6rem; background: #e53e3e; color: #fff; padding: 2px 4px; border-radius: 4px; margin-left: 6px;">준비중</span>
                </li>
                <li data-tab="code-tab">코드표</li>
                <li data-tab="return-tab">반품관리</li>
                <li data-tab="gift-tab">설정</li>
                <li data-tab="version-history-tab">Ver History</li>
            </ul>
        </nav>
        <!-- Main Content Area -->
        <main class="content">
            <!-- =========================
                 INTEGRATED TAB (ORDER + SMS)
            ========================== -->
            <section id="order-tab" class="tab-content active">
                <div class="main-grid">
                    <div class="left-col" id="order-items-container">
                        <!-- Dynamic Checkboxes injected here by JS -->
                    </div>
                    <div class="right-col">
                        <!-- Left Panel inside right-col -->
                        <div class="right-panel-col1">
                            <!-- Customer Info -->
                            <div class="glass-card customer-info">
                                <h3
                                    style="border-bottom: 2px solid #3182ce; padding-bottom: 4px; margin-bottom: 12px; width: 100%; color: #2d3748; font-size: 1.1rem; background: transparent; box-shadow: none;">
                                    📝수동 일반 발주</h3>
                                <div class="form-group">
                                    <label>이름</label>
                                    <input type="text" id="cust-name" placeholder="고객명">
                                </div>
                                <div class="form-group">
                                    <label>연락처</label>
                                    <input type="text" id="cust-phone" placeholder="010-0000-0000">
                                </div>
                                <div class="form-group">
                                    <label>주소</label>
                                    <textarea id="cust-address" rows="2" placeholder="주소 입력"></textarea>
                                </div>
                                <div class="radio-group mt-1">
                                    <label><input type="radio" name="order-type" value="normal" checked> 일반</label>
                                    <label><input type="radio" name="order-type" value="noolak"> 누락</label>
                                    <label><input type="radio" name="order-type" value="pason"> 파손</label>
                                    <label><input type="radio" name="order-type" value="bullyang"> 불량</label>
                                    <label class="checkbox-label no-lid" style="width: 100%; margin-top: 4px;"><input
                                            type="checkbox" id="chk-no-lid" disabled> 뚜껑 없이 통만</label>
                                </div>
                                <div class="action-buttons mt-1">
                                    <button id="btn-submit-normal" class="btn btn-primary btn-large"
                                        style="background:#3182ce;">발주 입력</button>
                                    <button id="btn-submit-ellen" class="btn btn-accent btn-large"
                                        style="background:#ed8936;">엘렌 입력</button>
                                    <button id="btn-download-sheet" class="btn btn-secondary btn-large"
                                        style="grid-column: 1 / -1; background:#1D6F42; color:white; border-color:#175C36;">엑셀
                                        시트 다운로드</button>
                                    <div id="download-progress-container"
                                        style="display: none; grid-column: 1 / -1; margin-top: 4px;">
                                        <div
                                            style="font-size: 0.75rem; margin-bottom: 4px; display: flex; justify-content: space-between; font-weight: 600; color: #1D6F42;">
                                            <span>엑셀 다운로드 및 시트 비우기 진행 중...</span>
                                            <span id="download-progress-text">0%</span>
                                        </div>
                                        <div
                                            style="width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden;">
                                            <div id="download-progress-bar"
                                                style="width: 0%; height: 100%; background: #1D6F42; transition: width 0.4s ease;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="glass-card history-box"
                                style="display: flex; flex-direction: column; overflow: hidden; height: 260px; margin-bottom: 10px;">
                                <h3
                                    style="display:flex; justify-content:space-between; width:100%; margin-bottom:4px; font-size: 1.1rem; align-items:flex-end;">
                                    💬최근 전송 메시지 <span class="action-text" id="btn-sms-clear-all"
                                        style="color: red; font-size: 0.75rem;">전체 삭제</span></h3>
                                <ul id="sms-history-list" style="flex: 1; overflow-y: auto; padding-right: 4px;"></ul>
                            </div>

                            <!-- Manual Order History -->
                            <div class="glass-card manual-history-box"
                                style="display: flex; flex-direction: column; overflow: hidden; height: 260px;">
                                <h3
                                    style="border-bottom: 2px solid #3182ce; padding-bottom: 4px; margin-bottom: 8px; width: 100%; color: #2d3748; font-size: 1.1rem; background: transparent; box-shadow: none;">
                                    📝오늘 수동발주 내역
                                </h3>
                                <div
                                    style="margin-bottom: 8px; display: flex; justify-content: space-between; align-items: flex-end;">
                                    <div
                                        style="font-size: 0.95rem; color: #4a5568; border-bottom: 2px solid #ed8936; padding-bottom: 2px; display: inline-block;">
                                        <span id="manual-total-count" style="color:#ed8936;font-weight:bold;">0</span>건
                                        /
                                        <span id="manual-total-amount" style="color:#ed8936;font-weight:bold;">0</span>원
                                    </div>
                                    <button class="btn btn-secondary btn-sm" id="btn-copy-manual-total"
                                        style="font-size: 0.75rem; padding: 2px 6px;">복사</button>
                                </div>
                                <ul id="manual-history-list" style="flex: 1; overflow-y: auto; padding-right: 4px;">
                                </ul>
                            </div>
                        </div>
                        <div class="right-panel-col2">
                            <div class="glass-card preview-box" style="padding: 5px; height: 700px; flex-shrink: 0;">
                                <div id="sms-preview"
                                    style="font-size: 0.75rem; height: 100%; font-family: 'Malgun Gothic', sans-serif; overflow-y: auto; background: #fff; padding: 5px; border: 1px solid #ccc; border-radius: 4px; white-space: pre-wrap;">
                                </div>
                            </div>
                            <!-- SMS Options Group -->
                            <div class="glass-card sms-options">
                                <h3
                                    style="border-bottom: 2px solid #3182ce; padding-bottom: 4px; margin-bottom: 12px; width: 100%; color: #2d3748; font-size: 1.1rem; background: transparent; box-shadow: none;">
                                    📋알림 문자 계산 및 복사</h3>
                                <div class="chk-grid"
                                    style="grid-template-columns: max-content max-content; justify-content: start; gap: 4px 15px; align-items: center;">
                                    <label><input type="checkbox" id="sms-discount"> 5% 할인</label>
                                    <label><input type="checkbox" id="sms-june-promo"> 금액별 추가상품</label>
                                    <label><input type="checkbox" id="sms-ship-extra"> <span id="lbl-ship-extra">추가배송비
                                            3,000원</span></label>
                                    <label><input type="checkbox" id="sms-ship-free"> 무료배송</label>
                                    <label><input type="checkbox" id="sms-coupon"> 6종 할인 쿠폰 적용</label>
                                    <label style="display:flex; align-items:center;">적립금 <input type="text"
                                            id="sms-point-deduction"
                                            style="width: 70px; margin: 0 5px; text-align:right; font-size: 0.85rem;"
                                            placeholder="0"> 차감</label>
                                </div>
                                <div class="action-buttons horizontal mt-1"
                                    style="margin-top: 8px; display: flex; gap: 8px;">
                                    <button id="btn-sms-calc" class="btn btn-primary block" style="flex: 1;">계산 & 내용
                                        복사</button>
                                    <button id="btn-reset" class="btn btn-danger"
                                        style="flex: 0 0 auto; padding-left: 5px; padding-right: 5px; background:#e53e3e; white-space: nowrap;">초기화</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- =========================
                 AUTO ORDER TAB
            ========================== -->
            <section id="auto-order-tab" class="tab-content flex-layout"
                style="padding: 20px; overflow-y: hidden; height: 100%; flex-direction: column;">
                <header style="margin-bottom: 1.5rem; text-align: center; flex-shrink: 0;">
                    <h1 style="color: #fff; margin-bottom: 5px;">🔥 통합 자동발주 시스템</h1>
                    <p style="color: #e2e8f0; font-size: 1rem; margin: 0;">카페24 및 스마트스토어의 주문 내역을 한 곳에서 관리하세요.</p>
                </header>

                <div
                    style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; flex: 1; overflow: hidden;">
                    <!-- 좌측: 카페24 패널 -->
                    <div
                        style="flex: 1; display: flex; flex-direction: column; overflow-y: auto; background: rgba(30, 30, 30, 0.4); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
                        <h2
                            style="color: #fff; text-align: center; margin-bottom: 20px; border-bottom: 2px solid #555; padding-bottom: 10px;">
                            🛒 카페24 (자사몰)</h2>

                        <div class="glass-card download-section"
                            style="margin-bottom: 1rem; padding: 20px; background: rgba(30, 30, 30, 0.8) !important;">
                            <!-- 카페24 전용 기능(oauth 로그인 등 필요시 추가 가능) -->
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #a0aec0; padding-bottom: 10px; margin-bottom: 15px;">
                                <h2 style="font-size: 1.1rem; margin: 0; color: #fff; white-space: nowrap;">1. 신규 주문 내역
                                    다운로드</h2>
                                <button id="cafe24AuthBtn" class="btn btn-secondary"
                                    style="padding: 2px 6px; font-size: 0.7rem; background-color: #4a5568; color: white; border-radius: 4px; border: none; cursor: pointer; white-space: nowrap; margin-left: 5px;">
                                    연동 (최초 1회)
                                </button>
                            </div>
                            <p style="margin-bottom: 15px; color: #cbd5e0;">배송준비중(N20) 상태인 자사몰 주문 내역을 다운로드합니다.</p>

                            <!-- 스마트스토어 토글 스위치 영역과 높이를 일치시키기 위한 투명 스페이서 -->
                            <div style="margin-bottom: 1rem; height: 26px; display: flex;"></div>

                            <button id="cafe24DownloadBtn" class="btn btn-primary btn-large"
                                style="width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; background-color: #2d3748;">
                                <span class="icon">⬇️</span> 카페24 주문 내역 다운로드 (Excel)
                            </button>


                            <div id="cafe24ProgressWrapper" class="hidden" style="margin-top: 15px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span id="cafe24ProgressText" style="color: #cbd5e0; font-size: 0.9rem;">수집 준비
                                        중...</span>
                                    <span id="cafe24ProgressPercent"
                                        style="color: #fff; font-weight: bold; font-size: 0.9rem;">0%</span>
                                </div>
                                <div
                                    style="width: 100%; height: 10px; background-color: #4a5568; border-radius: 5px; overflow: hidden;">
                                    <div id="cafe24ProgressBar"
                                        style="width: 0%; height: 100%; background-color: #4299e1; transition: width 0.3s ease;">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div style="text-align: center; color: #fff; font-size: 2rem; margin: 0.5rem 0;">⬇</div>

                        <div class="glass-card upload-section"
                            style="margin-top: 0.5rem; padding: 20px; background: rgba(30, 30, 30, 0.8) !important;">
                            <div style="border-bottom: 2px solid #a0aec0; padding-bottom: 10px; margin-bottom: 15px;">
                                <h2 style="font-size: 1.2rem; margin: 0; color: #fff;">2. 송장 일괄 등록</h2>
                            </div>
                            <p style="margin-bottom: 15px; color: #cbd5e0;">송장번호가 입력된 엑셀 파일을 업로드합니다.</p>

                            <form id="cafe24UploadForm">
                                <div style="margin-bottom: 15px;">
                                    <label for="cafe24DeliveryCompany"
                                        style="display: block; font-weight: bold; margin-bottom: 5px; color: #fff;">택배사
                                        선택</label>
                                    <select id="cafe24DeliveryCompany" name="deliveryCompanyCode"
                                        style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #718096; background: #2d3748; color: white;">
                                        <option value="0004" selected>CJ대한통운</option>
                                        <option value="0005">한진택배</option>
                                        <option value="0002">우체국택배</option>
                                        <option value="0001">롯데택배</option>
                                        <option value="0010">로젠택배</option>
                                        <option value="0023">경동택배</option>
                                        <option value="0003">대신택배</option>
                                        <option value="0039">우체국EMS</option>
                                    </select>
                                </div>

                                <div class="file-drop-area" id="cafe24FileDropArea"
                                    style="background: rgba(255,255,255,0.05); border-color: #718096;">
                                    <span class="file-msg" id="cafe24FileMsg" style="color:#cbd5e0;">엑셀 파일을 이곳에 드래그하거나
                                        클릭하여 업로드하세요. (.xls, .xlsx)</span>
                                    <input type="file" id="cafe24InvoiceFile" name="file" accept=".xls,.xlsx" required
                                        style="display:none;">
                                </div>

                                <button type="submit" id="cafe24UploadBtn" class="btn btn-secondary btn-large"
                                    style="width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; background-color: #4a5568; margin-top: 15px; color: white;"
                                    disabled>
                                    <span class="icon">🚀</span> 송장 일괄 발송처리
                                </button>
                                <div id="cafe24UploadSpinner" class="spinner hidden"
                                    style="border-color: #cbd5e0; border-top-color: transparent;"></div>
                            </form>
                        </div>

                        <div id="cafe24ResultBox" class="result-box hidden"
                            style="margin-top: 15px; padding: 15px; border-radius: 4px;">
                            <h3 id="cafe24ResultTitle" style="margin-top: 0; color: #fff;">결과</h3>
                            <p id="cafe24ResultText" style="margin-bottom: 0; color: #fff;"></p>
                        </div>
                    </div>

                    <!-- 우측: 스마트스토어 패널 -->
                    <div
                        style="flex: 1; display: flex; flex-direction: column; overflow-y: auto; background: rgba(3, 199, 90, 0.1); padding: 15px; border-radius: 12px; border: 1px solid rgba(3, 199, 90, 0.3);">
                        <h2
                            style="color: #fff; text-align: center; margin-bottom: 20px; border-bottom: 2px solid #03c75a; padding-bottom: 10px;">
                            🟩 스마트스토어</h2>

                        <div class="glass-card download-section" style="margin-bottom: 1rem; padding: 20px;">
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #3182ce; padding-bottom: 10px; margin-bottom: 15px;">
                                <h2 style="font-size: 1.2rem; margin: 0; color: #000;">1. 신규 주문 내역 다운로드</h2>
                                <div
                                    style="background-color: #e53e3e; color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold;">
                                    발주확인 요망</div>
                            </div>
                            <p style="margin-bottom: 15px; color: #4a5568;">결제완료 상태인 주문 내역을 다운로드합니다.</p>

                            <div
                                style="margin-bottom: 1rem; display: flex; align-items: center; justify-content: flex-end;">
                                <label for="confirmToggle"
                                    style="margin-right: 0.5rem; font-weight: 500; font-size: 0.95rem; color: #555;">다운로드
                                    시 발주확인(배송준비중) 처리</label>
                                <div class="toggle-switch">
                                    <input type="checkbox" id="confirmToggle">
                                    <label for="confirmToggle" class="switch-label"></label>
                                </div>
                            </div>

                            <button id="downloadBtn" class="btn btn-primary btn-large"
                                style="width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; background-color: #03c75a;">
                                <span class="icon">⬇️</span> 스마트스토어 주문 내역 다운로드 (Excel)
                            </button>

                            <div id="smartstoreProgressWrapper" class="hidden" style="margin-top: 15px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span id="smartstoreProgressText" style="color: #4a5568; font-size: 0.9rem;">수집 준비
                                        중...</span>
                                    <span id="smartstoreProgressPercent"
                                        style="color: #000; font-weight: bold; font-size: 0.9rem;">0%</span>
                                </div>
                                <div
                                    style="width: 100%; height: 10px; background-color: #cbd5e0; border-radius: 5px; overflow: hidden;">
                                    <div id="smartstoreProgressBar"
                                        style="width: 0%; height: 100%; background-color: #03c75a; transition: width 0.3s ease;">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div style="text-align: center; color: #fff; font-size: 2rem; margin: 0.5rem 0;">⬇</div>

                        <div class="glass-card upload-section" style="margin-top: 0.5rem; padding: 20px;">
                            <div style="border-bottom: 2px solid #3182ce; padding-bottom: 10px; margin-bottom: 15px;">
                                <h2 style="font-size: 1.2rem; margin: 0; color: #000;">2. 송장 일괄 등록</h2>
                            </div>
                            <p style="margin-bottom: 15px; color: #4a5568;">송장번호가 입력된 엑셀 파일을 업로드합니다.</p>

                            <form id="uploadForm">
                                <div style="margin-bottom: 15px;">
                                    <label for="deliveryCompany"
                                        style="display: block; font-weight: bold; margin-bottom: 5px; color: #000;">택배사
                                        선택</label>
                                    <select id="deliveryCompany" name="deliveryCompanyCode"
                                        style="width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #cbd5e0;">
                                        <option value="CJGLS" selected>CJ대한통운</option>
                                        <option value="HANJIN">한진택배</option>
                                        <option value="LOTTE">롯데택배</option>
                                        <option value="EPOST">우체국택배</option>
                                        <option value="KGB">로젠택배</option>
                                        <option value="CVSNET">편의점택배</option>
                                        <option value="KDEX">경동택배</option>
                                        <option value="DAESIN">대신택배</option>
                                        <option value="ILYANGLOGIS">일양로지스</option>
                                    </select>
                                </div>

                                <div class="file-drop-area" id="fileDropArea">
                                    <span class="file-msg">엑셀 파일을 이곳에 드래그하거나 클릭하여 업로드하세요. (.xls, .xlsx)</span>
                                    <input type="file" id="invoiceFile" name="file" accept=".xls,.xlsx" required
                                        style="display:none;">
                                </div>

                                <button type="submit" id="uploadBtn" class="btn btn-secondary btn-large"
                                    style="width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; background-color: #3182ce; margin-top: 15px; color: white;"
                                    disabled>
                                    <span class="icon">🚀</span> 송장 일괄 발송처리
                                </button>
                                <div id="uploadSpinner" class="spinner hidden"></div>
                            </form>
                        </div>

                        <div id="resultBox" class="result-box hidden"
                            style="margin-top: 15px; padding: 15px; border-radius: 4px;">
                            <h3 id="resultTitle" style="margin-top: 0;">결과</h3>
                            <p id="resultText" style="margin-bottom: 0;"></p>
                        </div>
                    </div>

                    <!-- 3번째 패널 (준비 중) -->
                    <div
                        style="display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.02); border-radius: 12px; border: 2px dashed rgba(255, 255, 255, 0.15);">
                        <span
                            style="font-size: 18rem; color: rgba(255, 255, 255, 0.2); font-weight: bold; user-select: none; cursor: default; line-height: 1;">?</span>
                        <span
                            style="color: rgba(255, 255, 255, 0.5); font-size: 1.5rem; font-weight: 600; margin-top: 20px;">준비
                            중...</span>
                    </div>

                    <!-- 4번째 패널 (준비 중) -->
                    <div
                        style="display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.02); border-radius: 12px; border: 2px dashed rgba(255, 255, 255, 0.15);">
                        <span
                            style="font-size: 18rem; color: rgba(255, 255, 255, 0.2); font-weight: bold; user-select: none; cursor: default; line-height: 1;">?</span>
                        <span
                            style="color: rgba(255, 255, 255, 0.5); font-size: 1.5rem; font-weight: 600; margin-top: 20px;">준비
                            중...</span>
                    </div>
                </div>
            </section>

            <!-- =========================
                 MANUAL ORDER TAB
            ========================== -->
            <section id="manual-tab" class="tab-content" style="padding: 0;">
                <div style="padding: 10px 10px 0 10px; display: flex; justify-content: flex-end;">
                    <a href="https://docs.google.com/spreadsheets/d/1QxFtjDurPPZd8NmtXBy4XEUIzkf93aXD5Mlx5kB33xw/edit?gid=0#gid=0"
                        target="_blank" class="btn btn-secondary"
                        style="font-size: 0.8rem; background: #38a169; color: white; text-decoration: none; padding: 6px 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);">
                        새 창에서 구글 시트 직접 열기 (로그인 오류 시 클릭)
                    </a>
                </div>
                <div style="flex: 1; padding: 10px; padding-bottom: 0; position: relative;"
                    id="manual-iframe-container">
                    <div id="sheet-loader" class="sheet-loader-overlay" style="display: none;">
                        <div class="spinner"></div>
                        <p style="margin-top: 15px; font-weight: 600; color: #2b6cb0; font-size: 1.1rem;">구글 시트 아랫줄에 기록
                            중입니다...</p>
                    </div>
                    <iframe
                        src="https://docs.google.com/spreadsheets/d/1QxFtjDurPPZd8NmtXBy4XEUIzkf93aXD5Mlx5kB33xw/edit?gid=0#gid=0"
                        width="100%" height="100%"
                        style="border: none; border-radius: 8px; box-shadow: var(--card-shadow);"></iframe>
                </div>
            </section>
            <!-- =========================
                 GIFT SETTINGS TAB
            ========================== -->
            <section id="gift-tab" class="tab-content"
                style="flex-wrap: wrap; flex-direction: row; padding: 15px; gap: 20px; position: relative;">
                <div class="left-settings"
                    style="flex: 1; min-width: 400px; display: flex; flex-direction: column; height: 100%;">
                    <header>
                        <h1 style="color: #fff;">금액별 추가상품 설정</h1>
                    </header>
                    <div class="gift-settings-container scroll-area" id="gift-rules-container"
                        style="flex: 1; margin-top: 10px; gap: 10px;">
                        <!-- Rule cards injected via JS -->
                    </div>
                </div>
                <div class="right-settings"
                    style="display: flex; flex-direction: column; position: relative; height: 100%;">
                    <header>
                        <h1 style="color: #fff;">문자 메시지 설정</h1>
                    </header>
                    <div
                        style="background: rgba(255,255,255,0.85); border-radius: 8px; padding: 15px; width: 370px; height: 490px; max-width: 370px; max-height: 490px; box-sizing: border-box; flex-shrink: 0; margin-top: 10px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 10px;">
                        <h3 style="color: #000; border-bottom: none; margin-bottom: 0;">머리말</h3>
                        <textarea id="sms-header-text"
                            style="width: 100%; height: 150px; border: 2px solid #e2e8f0; border-radius: 4px; resize: none; padding: 10px; font-size: 0.8rem;"></textarea>
                        <h3 style="color: #000; border-bottom: none; margin-bottom: 0;">꼬리말(입금 금액은 {최종금액} 으로 입력)</h3>
                        <textarea id="sms-footer-text"
                            style="width: 100%; flex: 1; border: 2px solid #e2e8f0; border-radius: 4px; resize: none; padding: 10px; font-size: 0.8rem;"></textarea>
                    </div>
                </div>
                <div class="third-settings"
                    style="display: flex; flex-direction: column; position: relative; height: 100%;">
                    <header>
                        <h1 style="color: #fff;">화면 폰트 및 배송비 설정</h1>
                    </header>
                    <div
                        style="background: rgba(255,255,255,0.85); border-radius: 8px; padding: 15px; width: 380px; box-sizing: border-box; flex-shrink: 0; margin-top: 10px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 10px;">
                        <h3 style="color: #000; border-bottom: none; margin-bottom: 0;">폰트 선택</h3>
                        <div style="display: flex; gap: 5px;">
                            <select id="app-font-select"
                                style="width: 300px; max-width: 300px; border: 2px solid #e2e8f0; border-radius: 4px; padding: 6px; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap;">
                                <option value="">로딩 중...</option>
                            </select>
                            <button id="btn-font-default" class="btn btn-secondary"
                                style="white-space: nowrap; padding: 6px 10px; border-radius: 4px;">기본값</button>
                        </div>

                        <h3 style="color: #000; border-bottom: none; margin-top: 15px; margin-bottom: 0;">배송비 설정</h3>
                        <div
                            style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; font-size: 0.95rem;">
                            <label
                                style="display: flex; justify-content: space-between; align-items: center; width: 230px;">
                                기본 배송비:
                                <div><input type="text" id="setting-ship-base"
                                        style="width:100px; text-align:right; font-size: 0.85rem; padding: 4px;"
                                        placeholder="3,500"> 원</div>
                            </label>
                            <label
                                style="display: flex; justify-content: space-between; align-items: center; width: 230px;">
                                추가 배송비:
                                <div><input type="text" id="setting-ship-extra"
                                        style="width:100px; text-align:right; font-size: 0.85rem; padding: 4px;"
                                        placeholder="3,000"> 원</div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="settings-action-container" style="position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px;">
                    <button id="btn-gift-save" class="btn btn-primary"
                        style="padding: 10px 20px; font-size: 0.95rem; font-weight: bold; background: #3182ce; transition: background 0.3s ease;">설정
                        저장</button>
                </div>
            </section>
            <!-- =========================
                 PRODUCT SETTINGS TAB
            ========================== -->
            <section id="product-tab" class="tab-content flex-layout"
                style="padding: 15px; height: 100%; position: relative;">
                <header>
                    <h1 style="color: #fff;">상품 설정</h1>
                </header>
                <div id="product-groups-container"
                    style="flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; margin-top: 10px; padding-bottom: 60px;">
                    <!-- Groups injected via JS -->
                </div>
                <div style="position: absolute; bottom: 20px; right: 20px; z-index: 10; display: flex; gap: 10px;">
                    <button id="btn-product-save" class="btn btn-primary"
                        style="padding: 10px 20px; font-size: 0.95rem; font-weight: bold; background: #3182ce; transition: background 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">상품
                        설정 저장</button>
                </div>
            </section>
            <!-- =========================
                 CODE SETTINGS TAB
            ========================== -->
            <section id="code-tab" class="tab-content flex-layout"
                style="padding: 15px; height: 100%; position: relative;">
                <header>
                    <h1 style="color: #fff;">코드표 관리</h1>
                </header>
                <div class="code-split-container" style="display: flex; gap: 20px; flex: 1; overflow: hidden; margin-top: 10px;">
                    <!-- 단품 관리 영역 -->
                    <div class="glass-card"
                        style="flex: 0 0 560px; width: 560px; max-width: 560px; display: flex; flex-direction: column; overflow: hidden; padding: 15px;">
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <h2 style="font-size: 1.2rem; color: #000000; margin: 0;">단품 코드</h2>
                            <button id="btn-add-single" class="btn btn-primary btn-sm"
                                style="background:#3182ce; padding: 5px 10px;">+ 새 단품 추가</button>
                        </div>
                        <div
                            style="flex: 1; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 4px; background: white;">
                            <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;">
                                <thead
                                    style="position: sticky; top: 0; background: #ebf8ff; box-shadow: 0 1px 0 #e2e8f0; z-index: 10;">
                                    <tr>
                                        <th class="th-sortable" data-list="single" data-key="item_code"
                                            style="padding: 10px; font-weight: 600; cursor:pointer; width: 100px; white-space: nowrap;">
                                            아이템코드 <span class="sort-icon"
                                                style="color:#3182ce; font-size:0.8rem;">▲</span></th>
                                        <th class="th-sortable" data-list="single" data-key="sabangnet_code"
                                            style="padding: 10px; font-weight: 600; cursor:pointer; width: 105px; white-space: nowrap;">
                                            사방넷 코드 <span class="sort-icon"
                                                style="color:#e2e8f0; font-size:0.8rem;">↕</span></th>
                                        <th class="th-sortable" data-list="single" data-key="name"
                                            style="padding: 10px; font-weight: 600; cursor:pointer; white-space: nowrap;">
                                            이름 <span class="sort-icon" style="color:#e2e8f0; font-size:0.8rem;">↕</span>
                                        </th>
                                        <th style="padding: 10px; text-align: right; width: 60px;">관리</th>
                                    </tr>
                                </thead>
                                <tbody id="single-items-tbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- 세트 관리 영역 -->
                    <div class="glass-card"
                        style="flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 15px;">
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <h2 style="font-size: 1.2rem; color: #000000; margin: 0;">세트 코드</h2>
                            <button id="btn-add-set" class="btn btn-accent btn-sm"
                                style="background:#ed8936; padding: 5px 10px;">+ 새 세트 추가</button>
                        </div>
                        <div
                            style="flex: 1; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 4px; background: white;">
                            <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;">
                                <thead
                                    style="position: sticky; top: 0; background: #fffaf0; box-shadow: 0 1px 0 #e2e8f0; z-index: 10;">
                                    <tr>
                                        <th class="th-sortable" data-list="set" data-key="item_code"
                                            style="padding: 10px; font-weight: 600; cursor:pointer; width: 100px; white-space: nowrap;">
                                            아이템코드 <span class="sort-icon"
                                                style="color:#3182ce; font-size:0.8rem;">▲</span></th>
                                        <th class="th-sortable" data-list="set" data-key="name"
                                            style="padding: 10px; font-weight: 600; cursor:pointer; white-space: nowrap;">
                                            세트 이름 <span class="sort-icon"
                                                style="color:#e2e8f0; font-size:0.8rem;">↕</span></th>
                                        <th style="padding: 10px; font-weight: 600;">
                                            구성 단품 목록</th>
                                        <th style="padding: 10px; text-align: right; width: 60px;">관리</th>
                                    </tr>
                                </thead>
                                <tbody id="set-items-tbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>

            <!-- =========================
                 RETURN MANAGEMENT TAB
            ========================== -->
            <section id="return-tab" class="tab-content flex-layout"
                style="padding: 15px; height: 100%; position: relative;">
                <header>
                    <h1 style="color: #fff;">반품관리 (반품 신청 및 입고 처리)</h1>
                </header>
                <div class="return-split-container" style="display: flex; gap: 20px; flex: 1; overflow: hidden; margin-top: 10px;">
                    <!-- 반품 신청 (좌측 50%) -->
                    <div class="glass-card"
                        style="flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 15px;">
                        <!-- 반품 신청 폼 -->
                        <form id="form-return-request"
                            style="margin-bottom: 15px; display: flex; flex-direction: column;">
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #3182ce; padding-bottom: 5px; margin-bottom: 15px;">
                                <h2 style="font-size: 1.2rem; color: #000000; margin: 0; display: flex; align-items: center; gap: 8px;">
                                    📋 반품 신청
                                    <button type="button" class="btn-detail-toggle" onclick="this.closest('form').classList.toggle('show-details'); this.textContent = this.closest('form').classList.contains('show-details') ? '접기 ▲' : '상세 ▼';">상세 ▼</button>
                                </h2>
                                <div style="display: flex; gap: 5px;">
                                    <button type="button" id="btn-email-req" class="btn btn-secondary"
                                        style="height: 40px; background: #ed8936; color: white; font-size: 0.8rem; padding: 0 10px; border:none; border-radius:4px; cursor:pointer; display: flex; align-items: center; justify-content: center; gap: 4px;">
                                        <span style="font-size: 1.4rem;">📧</span> 반품 신청하기
                                    </button>
                                    <button type="submit" class="btn btn-primary"
                                        style="width: 110px; height: 40px; background: #3182ce; font-size: 0.8rem; padding: 0;">반품
                                        신청 등록</button>
                                </div>
                            </div>
                            <input type="hidden" id="req-id">
                            <div style="display: flex; flex-direction: column; gap: 10px;">
                                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                                    <div class="form-group" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">송장번호 <span
                                                style="color:#e53e3e">*</span></label>
                                        <input type="text" id="req-tracking-no" placeholder="입력 후 Enter" required
                                            style="border: 2px solid #3182ce; width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box;">
                                    </div>
                                    <div class="form-group mobile-hide" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">신청날짜</label>
                                        <input type="date" id="req-date" required
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box;">
                                    </div>
                                    <div class="form-group mobile-hide" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">쇼핑몰</label>
                                        <input type="text" id="req-mall" readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                    <div class="form-group" style="margin-bottom: 0; width: 100px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">신청구분</label>
                                        <select id="req-type" required
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; border: 1px solid #cbd5e0; border-radius: 4px;">
                                            <option value="단순변심">단순변심</option>
                                            <option value="상품불량">상품불량</option>
                                            <option value="오배송">오배송</option>
                                            <option value="파손">파손</option>
                                            <option value="맞교환">맞교환</option>
                                            <option value="기타">기타</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mobile-hide" style="display: flex; gap: 10px; flex-wrap: wrap;">
                                    <div class="form-group" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">수령인명</label>
                                        <input type="text" id="req-name" required readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                    <div class="form-group" style="margin-bottom: 0; width: 145px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">휴대폰번호</label>
                                        <input type="text" id="req-phone" readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                    <div class="form-group" style="margin-bottom: 0; flex: 1;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">주소</label>
                                        <input type="text" id="req-address" readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                </div>
                                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                                    <div class="form-group" style="margin-bottom: 0; flex: 1;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">비고</label>
                                        <input type="text" id="req-remarks" placeholder="참고사항 입력"
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box;">
                                    </div>
                                </div>
                            </div>
                        </form>

                        <!-- 반품 신청 리스트 표기 -->
                        <h3
                            style="font-size: 0.75rem; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center;">
                            <span>신청 목록</span><label
                                style="cursor: pointer; font-weight: normal; margin: 0; display:flex; align-items:center; gap:4px;"><input
                                    type="checkbox" id="chk-exclude-received"> 입고완료 제외</label>
                        </h3>
                        <div
                            style="flex: 1; overflow: auto; border: 1px solid #e2e8f0; border-radius: 4px; background: white;">
                            <table
                                style="width: 100%; min-width: 780px; table-layout: fixed; border-collapse: collapse; text-align: left; font-size: 0.75rem;">
                                <thead
                                    style="position: sticky; top: 0; background: #ebf8ff; box-shadow: 0 1px 0 #e2e8f0; z-index: 10;">
                                    <tr>
                                        <th style="padding: 8px; width: 30px; text-align: center;"><input
                                                type="checkbox" id="chk-all-req"></th>
                                        <th style="padding: 8px; width: 100px; text-align: center; white-space: nowrap;">날짜</th>
                                        <th style="padding: 8px; width: 90px; text-align: center; white-space: nowrap;">수령인</th>
                                        <th style="padding: 8px; width: 130px; text-align: center; white-space: nowrap;">휴대폰번호</th>
                                        <th style="padding: 8px; width: 110px; text-align: center; white-space: nowrap;">송장번호</th>
                                        <th style="padding: 8px; width: 65px; text-align: center; white-space: nowrap;">상태</th>
                                        <th style="padding: 8px; width: 215px; text-align: center; white-space: nowrap;">비고</th>
                                        <th style="padding: 8px; width: 40px; text-align: center; white-space: nowrap;">관리</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-return-requests">
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 반품 입고 (우측 50%) -->
                    <div class="glass-card"
                        style="flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 15px;">
                        <!-- 반품 입고 폼 -->
                        <form id="form-return-receive" data-edit="true" style="margin-bottom: 15px;">
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #38a169; padding-bottom: 5px; margin-bottom: 15px;">
                                <h2 style="font-size: 1.2rem; color: #000000; margin: 0; display: flex; align-items: center; gap: 8px;">
                                    📦 반품 입고
                                    <button type="button" class="btn-detail-toggle" onclick="this.closest('form').classList.toggle('show-details'); this.textContent = this.closest('form').classList.contains('show-details') ? '접기 ▲' : '상세 ▼';">상세 ▼</button>
                                </h2>
                                <div style="display: flex; gap: 5px;">
                                    <button type="button" id="btn-bulk-receive" class="btn btn-secondary"
                                        style="width: 110px; height: 40px; background: #4a5568; color: white; font-size: 0.8rem; padding: 0;">송장일괄
                                        입고</button>
                                    <button type="submit" class="btn btn-primary"
                                        style="width: 110px; height: 40px; background: #38a169; font-size: 0.8rem; padding: 0;">반품
                                        입고 등록</button>
                                </div>
                            </div>
                            <input type="hidden" id="rec-id">
                            <div style="display: flex; flex-direction: column; gap: 10px;">
                                <!-- Line 1 -->
                                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                                    <div class="form-group" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">송장번호 <span
                                                style="color:#e53e3e">*</span></label>
                                        <input type="text" id="rec-tracking-no" placeholder="입력 후 Enter" required
                                            style="border: 2px solid #38a169; width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box;">
                                    </div>
                                    <div class="form-group mobile-hide" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">입고날짜</label>
                                        <input type="date" id="rec-date" required
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box;">
                                    </div>
                                    <div class="form-group mobile-hide" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">쇼핑몰</label>
                                        <input type="text" id="rec-mall" readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                    <div class="form-group" style="margin-bottom: 0; width: 120px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">입고상태</label>
                                        <select id="rec-status" required
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; border: 1px solid #cbd5e0; border-radius: 4px;">
                                            <option value="대기" selected>대기</option>
                                            <option value="환불대기">환불대기</option>
                                            <option value="환불완료">환불완료</option>
                                            <option value="교환완료">교환완료</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- Line 2 -->
                                <div class="mobile-hide" style="display: flex; gap: 10px; flex-wrap: wrap;">
                                    <div class="form-group" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">이름</label>
                                        <input type="text" id="rec-name" required readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                    <div class="form-group" style="margin-bottom: 0; width: 135px;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">휴대폰번호</label>
                                        <input type="text" id="rec-phone" readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                    <div class="form-group" style="margin-bottom: 0; flex: 1;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">주소</label>
                                        <input type="text" id="rec-address" readonly
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box; border: 1px solid #cbd5e0; border-radius: 4px; background-color: #edf2f7; cursor: not-allowed; color: #4a5568;">
                                    </div>
                                </div>
                                <!-- Line 3 -->
                                <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;">
                                    <div class="form-group" style="margin-bottom: 0; flex: 1;">
                                        <label style="font-weight: 600; font-size: 0.8rem;">비고</label>
                                        <input type="text" id="rec-remarks" placeholder="환불 처리 여부 등"
                                            style="width: 100%; height: 26px; padding: 2px 5px; font-size: 0.85rem; box-sizing: border-box;">
                                    </div>
                                </div>
                            </div>
                        </form>

                        <!-- 송장일괄 입고 모달 -->
                        <div id="bulk-receive-modal"
                            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
                            <div
                                style="background: white; padding: 20px; border-radius: 8px; width: 325px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
                                <h3 style="margin: 0; font-size: 1.2rem; color: #2d3748;">송장일괄 입고</h3>
                                <div style="display: flex; align-items: center; justify-content: space-between;">
                                    <span style="font-size: 0.9rem; font-weight: bold; color: #2d3748; line-height: 1.4;">
                                        송장 앞 숫자 4자리 <input type="text" id="bulk-prefix-input" style="width: 45px; text-align: center; border: 1px solid #cbd5e0; border-radius: 4px; padding: 2px; font-size: 0.9rem; margin: 0 4px;" maxlength="4">를<br>제외하고 입력 하세요.
                                    </span>
                                    <button type="button" id="btn-bulk-prefix-save" class="btn btn-secondary" style="padding: 4px 12px; font-size: 0.9rem; background: #4a5568; color: white; white-space: nowrap; border: none;">설정</button>
                                </div>
                                <textarea id="bulk-tracking-numbers"
                                    style="width: 100%; height: 200px; padding: 10px; border: 1px solid #cbd5e0; border-radius: 4px; resize: vertical; font-family: monospace;"
                                    placeholder="56789012&#10;54321098"></textarea>
                                <div style="display: flex; justify-content: flex-end; gap: 10px;">
                                    <button type="button" id="btn-bulk-cancel" class="btn btn-secondary"
                                        style="padding: 8px 16px;">취소</button>
                                    <button type="button" id="btn-bulk-submit" class="btn btn-primary"
                                        style="padding: 8px 16px; background: #3182ce;">일괄 등록</button>
                                </div>
                            </div>
                        </div>

                        <!-- 반품 입고 리스트 표기 -->
                        <h3
                            style="font-size: 0.75rem; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center;">
                            <span>입고 목록</span><label
                                style="cursor: pointer; font-weight: normal; margin: 0; display:flex; align-items:center; gap:4px;"><input
                                    type="checkbox" id="chk-exclude-completed"> 환불/교환완료 제외</label>
                        </h3>
                        <div
                            style="flex: 1; overflow: auto; border: 1px solid #e2e8f0; border-radius: 4px; background: white;">
                            <table
                                style="width: 100%; min-width: 780px; table-layout: fixed; border-collapse: collapse; text-align: left; font-size: 0.75rem;">
                                <thead
                                    style="position: sticky; top: 0; background: #f0fff4; box-shadow: 0 1px 0 #e2e8f0; z-index: 10;">
                                    <tr>
                                        <th
                                            style="padding: 8px; width: 100px; text-align: center; white-space: nowrap;">
                                            입고날짜</th>
                                        <th style="padding: 8px; width: 90px; text-align: center; white-space: nowrap;">
                                            수령인</th>
                                        <th
                                            style="padding: 8px; width: 130px; text-align: center; white-space: nowrap;">
                                            휴대폰번호</th>
                                        <th
                                            style="padding: 8px; width: 110px; text-align: center; white-space: nowrap;">
                                            송장번호</th>
                                        <th style="padding: 8px; width: 85px; text-align: center; white-space: nowrap;">
                                            쇼핑몰</th>
                                        <th style="padding: 8px; width: 65px; text-align: center; white-space: nowrap;">
                                            입고상태</th>
                                        <th style="padding: 8px; width: 160px; text-align: center; white-space: nowrap;">비고</th>
                                        <th style="padding: 8px; width: 40px; text-align: center; white-space: nowrap;">
                                            관리</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-return-receivings">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
            <!-- =========================
                 VERSION HISTORY TAB
            ========================== -->
            {% include 'version_history.html' %}
        </main>
    </div>
    <script src="{{ root_path }}/static/js/app.js?v=30"></script>

    <!-- Toast Notification -->
    <div id="toast-notification"
        style="position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; padding: 10px 20px; border-radius: 5px; font-size: 0.9rem; z-index: 1000; opacity: 0; transition: opacity 0.3s; pointer-events: none;">
        클립보드로 주문 내용이 복사되었습니다.
    </div>

    <!-- Exclusion Modal -->
    <div id="exclude-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;">
        <div class="glass-card"
            style="background: #fff; width: 450px; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); max-width: 90%;">
            <h3
                style="margin-top: 0; color: #2b6cb0; border-bottom: 2px solid #3182ce; padding-bottom: 8px; margin-bottom: 15px;">
                🛒 발주 입력 확인</h3>
            <p style="font-size: 0.95rem; color: #4a5568; line-height: 1.4;">아래 상품 중에서 총 금액 계산에서 <br><strong
                    style="color:#e53e3e;">제외할 상품을 선택</strong> 하고 [입력] 버튼을 눌러주세요.</p>
            <div id="exclude-items-list"
                style="max-height: 300px; overflow-y: auto; margin: 15px 0; border: 1px solid #e2e8f0; border-radius: 4px; padding: 10px; background: #f7fafc; display: flex; flex-direction: column; gap: 8px;">
                <!-- checkboxes injected here -->
            </div>
            <div
                style="font-size: 1.1rem; font-weight: bold; text-align: right; color: #2d3748; padding-bottom: 15px; border-bottom: 1px dashed #cbd5e0; margin-bottom: 10px;">
                최종 금액: <span id="exclude-modal-totalAmount" style="color: #e53e3e;">0</span>원
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
                <label
                    style="font-weight: bold; color: #3182ce; display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.95rem;">
                    <input type="checkbox" id="chk-sample-send" style="transform: scale(1.2); cursor: pointer;"> 샘플 발송
                </label>
                <div style="display: flex; justify-content: flex-end; gap: 10px;">
                    <button id="btn-exclude-cancel" class="btn btn-secondary" style="padding: 8px 16px;">취소</button>
                    <button id="btn-exclude-submit" class="btn btn-primary"
                        style="padding: 8px 16px; background: #3182ce;">입력</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Code Single Item Modal -->
    <div id="single-item-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;">
        <div class="glass-card"
            style="background: #fff; width: 400px; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); max-width: 90%;">
            <h3 id="modal-single-title"
                style="margin-top: 0; color: #2b6cb0; border-bottom: 2px solid #3182ce; padding-bottom: 8px; margin-bottom: 15px;">
                📦 단품 추가</h3>
            <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;">
                <label style="display: flex; flex-direction: column; font-size: 0.9rem; font-weight: bold;">
                    단품 아이템 코드
                    <input type="text" id="sin-item-code"
                        style="padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; margin-top: 4px;"
                        placeholder="예: ITEM_001">
                    <span id="sin-item-warn"
                        style="color: #e53e3e; font-size: 0.8rem; margin-top: 4px; display: none;">⚠️ 이미 존재하는 단품
                        코드입니다!</span>
                </label>
                <label style="display: flex; flex-direction: column; font-size: 0.9rem; font-weight: bold;">
                    사방넷 코드 (형식: XXXXXX-0001)
                    <input type="text" id="sin-sabangnet-code"
                        style="padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; margin-top: 4px;"
                        placeholder="102845-0001">
                </label>
                <label style="display: flex; flex-direction: column; font-size: 0.9rem; font-weight: bold;">
                    단품 이름
                    <input type="text" id="sin-name"
                        style="padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; margin-top: 4px;"
                        placeholder="상품 이름">
                </label>
            </div>
            <div style="display: flex; justify-content: flex-end; gap: 10px;">
                <button id="btn-sin-cancel" class="btn btn-secondary" style="padding: 8px 16px;">취소</button>
                <button id="btn-sin-save" class="btn btn-primary"
                    style="padding: 8px 16px; background: #3182ce;">저장</button>
            </div>
        </div>
    </div>

    <!-- Code Set Item Modal -->
    <div id="set-item-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;">
        <div class="glass-card"
            style="background: #fff; width: 550px; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); max-width: 90%;">
            <h3 id="modal-set-title"
                style="margin-top: 0; color: #dd6b20; border-bottom: 2px solid #ed8936; padding-bottom: 8px; margin-bottom: 15px;">
                🍱 세트 추가</h3>
            <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;">
                <div style="display: flex; gap: 10px;">
                    <label
                        style="display: flex; flex-direction: column; font-size: 0.9rem; font-weight: bold; flex: 1;">
                        세트 아이템 코드
                        <input type="text" id="set-item-code"
                            style="padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; margin-top: 4px;"
                            placeholder="예: SET_001">
                        <span id="set-item-warn"
                            style="color: #e53e3e; font-size: 0.8rem; margin-top: 4px; display: none;">⚠️ 이미 존재하는 세트
                            코드입니다!</span>
                    </label>
                    <label
                        style="display: flex; flex-direction: column; font-size: 0.9rem; font-weight: bold; flex: 1;">
                        세트 이름
                        <input type="text" id="set-name"
                            style="padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; margin-top: 4px;"
                            placeholder="세트 이름">
                    </label>
                </div>

                <hr style="border: 0; border-top: 1px dashed #cbd5e0;">
                <div style="margin-top: 5px;">
                    <h4 style="margin:0 0 10px 0; color:#4a5568; font-size: 0.95rem;">세트 구성품 등록</h4>
                    <div id="set-components-wrapper"
                        style="display:flex; flex-direction:column; gap:8px; max-height: 200px; overflow-y:auto; padding:5px; border:1px solid #e2e8f0; border-radius:4px; background:#f7fafc;">
                        <!-- components rows go here -->
                    </div>
                    <button id="btn-add-set-component" class="btn btn-secondary btn-sm"
                        style="margin-top: 8px; width: 100%; border: 1px dashed #a0aec0; background: transparent; color: #4a5568;">+단품
                        추가</button>
                </div>

            </div>
            <div style="display: flex; justify-content: flex-end; gap: 10px;">
                <button id="btn-set-cancel" class="btn btn-secondary" style="padding: 8px 16px;">취소</button>
                <button id="btn-set-save" class="btn btn-accent"
                    style="padding: 8px 16px; background: #ed8936;">저장</button>
            </div>
        </div>
    </div>

    <!-- 업데이트 알림 모달 -->
    <div id="update-notice-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center;">
        <div
            style="background: white; padding: 30px; border-radius: 12px; width: 450px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
            <div
                style="display: flex; align-items: center; gap: 10px; border-bottom: 2px solid #3182ce; padding-bottom: 10px;">
                <span style="font-size: 1.8rem;">🎉</span>
                <h3 style="margin: 0; font-size: 1.4rem; color: #2b6cb0;">업데이트 안내</h3>
            </div>

            <p style="font-size: 1.1rem; margin: 0; color: #2d3748; line-height: 1.6;">
                프로그램이 <strong style="color: #e53e3e; font-size: 1.2rem;" id="update-notice-version"></strong> 버전으로 업데이트
                되었습니다.<br><br>
                <strong>Ver History</strong>에서 내용을 확인 해주세요!!
            </p>

            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
                <label
                    style="display: flex; align-items: center; gap: 8px; cursor: pointer; color: #4a5568; font-size: 0.95rem;">
                    <input type="checkbox" id="chk-hide-update-notice" style="width: 16px; height: 16px;">
                    다시는 메시지 보지 않기
                </label>
                <button type="button" id="btn-close-update-notice" class="btn btn-primary"
                    style="padding: 10px 24px; background: #3182ce; font-size: 1rem; border-radius: 6px; cursor: pointer; color: white; border: none;">확인</button>
            </div>
        </div>
    </div>
</body>

</html>