Keep view mode across tabs and speed up recommendation pipeline

templates/wehago_compare.html

@@ -648,6 +648,40 @@
         font-size: 13px;
     }
 
+    body[data-view-mode="dual"] .voucher-page:has(#pairRecommendPanel.active) {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        align-items: start;
+        column-gap: 12px;
+    }
+
+    body[data-view-mode="dual"] .voucher-page:has(#pairRecommendPanel.active) > .voucher-topbar {
+        grid-column: 1 / -1;
+    }
+
+    body[data-view-mode="dual"] .voucher-page:has(#pairRecommendPanel.active) > .panel-shell:not(#pairRecommendPanel) {
+        grid-column: 1;
+        min-width: 0;
+    }
+
+    body[data-view-mode="dual"] .voucher-page:has(#pairRecommendPanel.active) > #pairRecommendPanel.active {
+        grid-column: 2;
+        grid-row: 2;
+        display: grid;
+        grid-template-rows: auto auto minmax(0, 1fr);
+        position: sticky;
+        top: 10px;
+        max-height: calc(100vh - 90px);
+        min-width: 0;
+    }
+
+    body[data-view-mode="dual"] #pairRecommendPanel.active .table-wrap {
+        max-height: calc(100vh - 230px);
+    }
+
+    body[data-view-mode="dual"] .detail-panel .table-wrap {
+        max-height: clamp(300px, 44vh, 520px);
+    }
+
     @media (max-width: 720px) {
         .voucher-topbar,
         .panel-header,
@@ -1736,6 +1770,8 @@
         const panels = Array.from(document.querySelectorAll('.detail-panel'));
         cards.forEach((card) => {
             card.addEventListener('click', () => {
+                // 상태 탭 전환 시 추천/개별 추천 패널은 즉시 닫는다.
+                closeRecommendationPanel();
                 const targetId = card.dataset.target;
                 const statusKey = card.dataset.status;
                 const panel = targetId ? document.getElementById(targetId) : null;