feat: GUI 칼럼 설정 저장, 010 전화번호 UX 개선, 품목 상세 조회

- GUI: SALES_COLUMNS 상수 정의, 칼럼 폭/윈도우 위치 gui_settings.json에 저장
- 전화번호 입력: 적립페이지/마이페이지에서 010 고정 + 뒷번호만 입력
- 적립페이지: MSSQL SALE_SUB에서 구매 품목 조회 및 토글 표시
- 마이페이지: 적립 내역 탭 시 품목 상세 AJAX 조회 (캐시 적용)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

backend/templates/my_page.html

@@ -194,6 +194,64 @@
             letter-spacing: -0.2px;
         }
 
+        /* 품목 상세 */
+        .transaction-item.clickable {
+            cursor: pointer;
+        }
+
+        .item-detail {
+            display: none;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid #f1f3f5;
+        }
+
+        .item-detail.open {
+            display: block;
+        }
+
+        .item-detail-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 6px 0;
+            font-size: 13px;
+        }
+
+        .item-detail-name {
+            color: #495057;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+        }
+
+        .item-detail-qty {
+            color: #868e96;
+            margin-right: 10px;
+            white-space: nowrap;
+        }
+
+        .item-detail-price {
+            color: #212529;
+            font-weight: 600;
+            white-space: nowrap;
+        }
+
+        .item-detail-loading {
+            text-align: center;
+            color: #adb5bd;
+            font-size: 13px;
+            padding: 8px 0;
+        }
+
+        .item-detail-hint {
+            color: #adb5bd;
+            font-size: 11px;
+            margin-top: 4px;
+        }
+
         /* 모바일 최적화 */
         @media (max-width: 480px) {
             .header {
@@ -228,7 +286,8 @@
             {% if transactions %}
             <ul class="transaction-list">
                 {% for tx in transactions %}
-                <li class="transaction-item">
+                <li class="transaction-item {% if tx.transaction_id %}clickable{% endif %}"
+                    {% if tx.transaction_id %}onclick="toggleDetail(this, '{{ tx.transaction_id }}')"{% endif %}>
                     <div class="transaction-header">
                         <div class="transaction-reason">
                             {% if tx.reason == 'CLAIM' %}
@@ -246,7 +305,13 @@
                     {% if tx.description %}
                     <div class="transaction-desc">{{ tx.description }}</div>
                     {% endif %}
-                    <div class="transaction-date">{{ tx.created_at }}</div>
+                    <div class="transaction-date">
+                        {{ tx.created_at }}
+                        {% if tx.transaction_id %}
+                        <span class="item-detail-hint">탭하여 품목 보기</span>
+                        {% endif %}
+                    </div>
+                    <div class="item-detail" id="detail-{{ tx.transaction_id }}"></div>
                 </li>
                 {% endfor %}
             </ul>
@@ -258,5 +323,53 @@
             {% endif %}
         </div>
     </div>
+
+    <script>
+    const detailCache = {};
+
+    async function toggleDetail(el, txId) {
+        const detail = document.getElementById('detail-' + txId);
+        if (!detail) return;
+
+        // 이미 열려있으면 닫기
+        if (detail.classList.contains('open')) {
+            detail.classList.remove('open');
+            return;
+        }
+
+        // 캐시에 있으면 바로 표시
+        if (detailCache[txId]) {
+            detail.innerHTML = detailCache[txId];
+            detail.classList.add('open');
+            return;
+        }
+
+        // 로딩 표시
+        detail.innerHTML = '<div class="item-detail-loading">품목 조회 중...</div>';
+        detail.classList.add('open');
+
+        try {
+            const res = await fetch('/admin/transaction/' + txId);
+            const data = await res.json();
+
+            if (data.success && data.items && data.items.length > 0) {
+                let html = '';
+                data.items.forEach(item => {
+                    html += `<div class="item-detail-row">
+                        <span class="item-detail-name">${item.name}</span>
+                        <span class="item-detail-qty">${item.qty}개</span>
+                        <span class="item-detail-price">${item.total.toLocaleString()}원</span>
+                    </div>`;
+                });
+                detailCache[txId] = html;
+                detail.innerHTML = html;
+            } else {
+                detail.innerHTML = '<div class="item-detail-loading">품목 정보를 불러올 수 없습니다</div>';
+            }
+        } catch (e) {
+            detail.innerHTML = '<div class="item-detail-loading">조회 실패</div>';
+        }
+    }
+    </script>
 </body>
 </html>