{% extends "base.html" %}

{% block title %}전표비교{% endblock %}

{% block head_extra %}
<style>
    .voucher-page {
        display: grid;
        gap: 14px;
    }

    .voucher-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding-bottom: 14px;
        border-bottom: 0;
    }

    .voucher-title-wrap h2 {
        margin: 0;
    }

    .voucher-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .voucher-toolbar form,
    .filter-form {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        margin: 0;
        overflow: visible;
    }

    .voucher-toolbar label,
    .filter-form label {
        font-size: 13px;
        color: var(--muted);
        white-space: nowrap;
    }

    .voucher-toolbar select,
    .voucher-toolbar button,
    .filter-form input,
    .filter-form button,
    .upload-picker {
        height: 38px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .voucher-toolbar select,
    .filter-form input {
        min-width: 104px;
        padding: 0 30px 0 10px;
        font-size: 14px;
        line-height: 38px;
    }

    .filter-form input {
        min-width: 120px;
        padding-right: 10px;
    }

    .detail-head .filter-form {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        row-gap: 0;
    }

    .detail-head .filter-form input {
        min-width: 98px;
    }

    .detail-panel[data-status-panel="amount_mismatch"] .detail-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        row-gap: 6px;
        overflow: visible;
    }

    .detail-panel[data-status-panel="amount_mismatch"] .detail-head > strong {
        grid-column: 1 / -1;
        grid-row: 1;
        white-space: nowrap;
    }

    .detail-panel[data-status-panel="amount_mismatch"] .detail-head > .filter-form {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        padding-bottom: 2px;
    }

    .detail-panel[data-status-panel="amount_mismatch"] .detail-head > .result-meta {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .active-filter-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 8px;
        margin-top: 8px;
    }

    .active-filter-card {
        min-width: 0;
        border: 1px solid #d3dee8;
        border-radius: 10px;
        padding: 6px 8px;
        background: #f8fafc;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
    }

    .active-filter-card .value {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #0f172a;
        font-weight: 700;
    }

    .active-filter-card .remove {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 0;
        background: rgba(15, 23, 42, 0.08);
        color: #111827;
        box-shadow: none;
        transform: none;
        padding: 0;
        cursor: pointer;
        line-height: 1;
        font-size: 13px;
        font-weight: 800;
    }

    .active-filter-card .remove:hover {
        background: rgba(15, 23, 42, 0.14);
    }

    .panel-shell {
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        overflow: hidden;
        box-shadow: none;
    }

    .voucher-page > .panel-shell:first-of-type {
        border-top: 0;
    }

    .voucher-page > .panel-shell:first-of-type > .panel-header {
        padding-top: 0;
    }

    .panel-header {
        padding: 14px 0 10px;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .panel-header h2,
    .summary-copy h2 {
        margin: 0;
        font-size: 18px;
    }

    .panel-meta,
    .empty-note,
    .result-meta {
        color: var(--muted);
        line-height: 1.5;
        font-size: 13px;
    }

    .system-job-meta {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        max-width: 360px;
        padding: 0 10px;
        border: 1px solid #d8e2ec;
        border-radius: 999px;
        background: #f8fafc;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .system-job-meta[data-state="running"],
    .system-job-meta[data-state="queued"] {
        color: #075985;
        border-color: #bae6fd;
        background: #f0f9ff;
    }

    .system-job-meta[data-state="done"] {
        color: #166534;
        border-color: #bbf7d0;
        background: #f0fdf4;
    }

    .system-job-meta[data-state="failed"] {
        color: #991b1b;
        border-color: #fecaca;
        background: #fef2f2;
    }

    .panel-body {
        padding: 0 0 16px;
        min-width: 0;
    }

    .status-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(132px, 1fr));
        gap: 4px;
        align-items: stretch;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .snapshot-panel {
        margin-top: 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 10px 12px;
        display: grid;
        gap: 10px;
    }

    .snapshot-panel[hidden] {
        display: none !important;
    }

    .snapshot-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }

    .snapshot-panel-title {
        display: grid;
        gap: 3px;
    }

    .snapshot-panel-title strong {
        font-size: 14px;
    }

    .snapshot-policy {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
    }

    .snapshot-summary-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .snapshot-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 8px;
        border-radius: 999px;
        border: 1px solid #dbe3eb;
        background: #f8fafc;
        font-size: 12px;
        color: #334155;
    }

    .snapshot-badge strong {
        color: #0f172a;
    }

    .snapshot-years {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        gap: 8px;
    }

    .snapshot-year-card {
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        padding: 8px 9px;
        display: grid;
        gap: 5px;
    }

    .snapshot-year-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .snapshot-year-head strong {
        font-size: 13px;
    }

    .snapshot-state-pill {
        display: inline-flex;
        align-items: center;
        padding: 2px 7px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .snapshot-state-pill.ready { background: #ecfdf5; border-color: #bbf7d0; color: #166534; }
    .snapshot-state-pill.queued { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .snapshot-state-pill.running { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
    .snapshot-state-pill.stale { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
    .snapshot-state-pill.failed { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
    .snapshot-state-pill.missing { background: #f8fafc; border-color: #cbd5e1; color: #475569; }

    .snapshot-year-meta,
    .snapshot-job-meta {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
    }

    .snapshot-jobs {
        display: grid;
        gap: 6px;
    }

    .snapshot-job-row {
        border-top: 1px solid #eef2f7;
        padding-top: 6px;
        display: grid;
        gap: 2px;
    }

    .snapshot-job-row:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .snapshot-job-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
    }

    .icon-button-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .icon-button-label svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .status-card {
        min-width: 0;
        width: 100%;
        border: 1px solid rgba(217, 221, 227, 0.92);
        border-radius: 12px;
        background: #fbfcfd;
        padding: 7px 10px 8px 10px;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
        display: grid;
        gap: 4px;
        align-content: start;
        justify-items: start;
        box-shadow: none !important;
    }

    .status-card:hover,
    .status-card[aria-expanded="true"] {
        background: #111827;
        border-color: #111827;
        color: #fff;
        box-shadow: none !important;
    }

    .status-label {
        display: block;
        width: 100%;
        font-size: 9px;
        font-weight: 700;
        color: #475569;
        margin-bottom: 0;
        text-transform: none;
        letter-spacing: 0;
        text-align: left;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 0;
        margin-left: 0;
    }

    .status-card:hover .status-label,
    .status-card[aria-expanded="true"] .status-label {
        color: rgba(255, 255, 255, 0.82);
    }

    .status-value {
        display: block;
        width: 100%;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.05;
        color: #111;
        text-align: left;
        padding-left: 0;
        margin-left: 0;
    }

    .status-card[data-status="matched"] {
        background: #f7faf8;
        border-color: #d2ddd6;
    }

    .status-card[data-status="bridge_expense_review"] {
        background: #f2faf7;
        border-color: #b9d8cb;
    }

    .status-card[data-status="ledger_only"],
    .status-card[data-status="voucher_only"],
    .status-card[data-status="amount_mismatch"] {
        background: #f7faf8;
        border-color: #d2ddd6;
    }

    .status-card[data-status="voucher_matched"],
    .status-card[data-status="voucher_unmatched"],
    .status-card[data-status="voucher_recheck"],
    .status-card[data-status="voucher_excepted"],
    .status-card[data-status="hanmac_unconnected"] {
        background: #eff6ff;
        border-color: #bfdbfe;
    }

    .status-card[data-status="voucher_matched"] .status-label,
    .status-card[data-status="voucher_unmatched"] .status-label,
    .status-card[data-status="voucher_recheck"] .status-label,
    .status-card[data-status="voucher_excepted"] .status-label,
    .status-card[data-status="hanmac_unconnected"] .status-label {
        color: #1d4ed8;
    }

    .status-card[data-status="erp_voucher_matched"],
    .status-card[data-status="erp_voucher_unmatched"] {
        background: #ecfdf5;
        border-color: #bbf7d0;
    }

    .status-card[data-status="erp_voucher_matched"] .status-label,
    .status-card[data-status="erp_voucher_unmatched"] .status-label {
        color: #166534;
    }

    .status-card[data-status="matched"]:hover,
    .status-card[data-status="matched"][aria-expanded="true"],
    .status-card[data-status="bridge_expense_review"]:hover,
    .status-card[data-status="bridge_expense_review"][aria-expanded="true"],
    .status-card[data-status="ledger_only"]:hover,
    .status-card[data-status="ledger_only"][aria-expanded="true"],
    .status-card[data-status="voucher_only"]:hover,
    .status-card[data-status="voucher_only"][aria-expanded="true"],
    .status-card[data-status="amount_mismatch"]:hover,
    .status-card[data-status="amount_mismatch"][aria-expanded="true"],
    .status-card[data-status="voucher_matched"]:hover,
    .status-card[data-status="voucher_matched"][aria-expanded="true"],
    .status-card[data-status="erp_voucher_matched"]:hover,
    .status-card[data-status="erp_voucher_matched"][aria-expanded="true"],
    .status-card[data-status="voucher_unmatched"]:hover,
    .status-card[data-status="voucher_unmatched"][aria-expanded="true"],
    .status-card[data-status="voucher_excepted"]:hover,
    .status-card[data-status="voucher_excepted"][aria-expanded="true"],
    .status-card[data-status="hanmac_unconnected"]:hover,
    .status-card[data-status="hanmac_unconnected"][aria-expanded="true"],
    .status-card[data-status="erp_voucher_unmatched"]:hover,
    .status-card[data-status="erp_voucher_unmatched"][aria-expanded="true"],
    .status-card[data-status="voucher_recheck"]:hover,
    .status-card[data-status="voucher_recheck"][aria-expanded="true"] {
        background: #111827;
        border-color: #111827;
        color: #fff;
    }

    .status-card:hover .status-value,
    .status-card[aria-expanded="true"] .status-value {
        color: #fff;
    }

    .detail-stack {
        display: grid;
        gap: 10px;
        margin-top: 10px;
        min-width: 0;
    }

    .detail-panel {
        display: none;
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        overflow: visible;
        min-width: 0;
    }

    .detail-panel.active {
        display: block;
    }

    .detail-head {
        padding: 14px 0 10px;
        border-bottom: 1px solid rgba(217, 221, 227, 0.9);
        background: transparent;
        display: grid;
        gap: 10px;
        position: relative;
        z-index: 6;
        overflow: visible;
    }

    .detail-heading-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }

    .detail-heading-tools {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .inline-note {
        font-size: 12px;
        color: var(--muted);
        white-space: nowrap;
    }

    .data-panel summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
    }

    .data-panel summary::-webkit-details-marker {
        display: none;
    }

    .summary-badges {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .summary-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 5px 9px;
        background: #f3f4f6;
        color: #111827;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .summary-toggle {
        font-size: 12px;
        color: var(--muted);
    }

    .data-panel[open] .summary-toggle::after {
        content: "접기";
    }

    .data-panel:not([open]) .summary-toggle::after {
        content: "펼치기";
    }

    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        border-top: 1px solid rgba(217, 221, 227, 0.9);
        background: transparent;
        max-height: 460px;
        box-sizing: border-box;
    }

    .detail-panel .table-wrap {
        max-height: 360px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .table-footer {
        display: flex;
        justify-content: center;
        padding: 10px 0 14px;
        border-top: 1px solid rgba(217, 221, 227, 0.9);
        background: transparent;
    }

    .load-more-button {
        min-width: 120px;
    }

    .table-wrap table {
        width: 100%;
        min-width: 0;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .table-wrap th,
    .table-wrap td {
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        padding: 7px 8px;
        vertical-align: middle;
        text-align: left;
        font-size: 13px;
        line-height: 1.35;
    }

    .table-wrap td {
        background: #fff;
    }

    .table-wrap th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f8fafc;
        font-size: 13px;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .table-wrap tr.bank-payable-case td,
    .table-wrap tr.bank-payable-case:hover td,
    .table-wrap tr.boundary-excluded-row td,
    .table-wrap tr.boundary-excluded-row:hover td {
        background: #fff;
        color: #111827;
    }

    .voucher-group-list {
        display: grid;
        gap: 12px;
    }

    .voucher-group {
        border: 1px solid rgba(217, 221, 227, 0.92);
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.86);
    }

    .voucher-group-head {
        display: grid;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(217, 221, 227, 0.92);
        background: #f8fafc;
    }

    .voucher-group-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .voucher-group-title strong {
        font-size: 18px;
        color: #111827;
    }

    .voucher-group-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .voucher-group-meta span {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid #d7e0ea;
        background: #fff;
        font-size: 12px;
        color: #334155;
    }

    .voucher-group-summary {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 8px;
        font-size: 12px;
        color: #475569;
    }

    .voucher-group-summary strong {
        display: block;
        margin-bottom: 4px;
        color: #111827;
        font-size: 12px;
    }

    .voucher-group-lines {
        overflow: visible;
        max-height: none;
    }

    .voucher-group-lines table {
        width: 100%;
        min-width: 0;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .voucher-group-lines th,
    .voucher-group-lines td {
        padding: 7px 8px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        font-size: 13px;
        vertical-align: middle;
        text-align: left;
        line-height: 1.35;
    }

    .voucher-group-lines th.selection-col,
    .voucher-group-lines td.selection-col {
        width: 44px;
        min-width: 44px;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .voucher-group-lines td.selection-col input[type="checkbox"],
    .voucher-group-lines th.selection-col input[type="checkbox"] {
        margin: 0;
        display: inline-block;
        vertical-align: middle;
    }

    /* Voucher body rows stay white; voucher grouping is expressed only by borders. */
    .voucher-group-lines td {
        background: #fff !important;
    }

    .voucher-group-lines th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f8fafc;
        color: inherit;
        font-size: 13px;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .voucher-group-lines tr:last-child td {
        border-bottom: 0;
    }

    .voucher-group-lines tr.bank-payable-case td,
    .voucher-group-lines tr.bank-payable-case:hover td,
    .voucher-group-lines tr.boundary-excluded-row td,
    .voucher-group-lines tr.boundary-excluded-row:hover td {
        background: #fff !important;
    }

    .voucher-table-group-start td {
        border-top: 2px solid rgba(148, 163, 184, 0.62);
    }

    .case-stat {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 2px 8px;
        border: 1px solid #bfd7c8;
        border-radius: 999px;
        background: #edf6f0;
        color: #173522;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: none;
        transform: none;
    }

    .case-stat:hover {
        background: #dfeee4;
        border-color: #9fc4ad;
    }

    .cell-ellipsis {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
    }

    .cell-tight {
        max-width: clamp(56px, 5vw, 86px);
    }

    .cell-code {
        max-width: clamp(72px, 7vw, 108px);
    }

    .cell-equal {
        max-width: clamp(88px, 9vw, 148px);
    }

    .cell-desc {
        max-width: clamp(116px, 14vw, 220px);
    }

    .col-fiscal_year {
        width: 4.5%;
    }

    .col-ledger_date,
    .col-proof_date {
        width: 6%;
    }

    .col-voucher_no,
    .col-confirmed_no {
        width: 5.5%;
    }

    .col-draft_no,
    .col-account_code {
        width: 7%;
    }

    .col-ledger_account_name,
    .col-voucher_account_name {
        width: 8%;
    }

    .col-ledger_vendor,
    .col-voucher_vendor {
        width: 10%;
    }

    .col-ledger_debit,
    .col-ledger_credit,
    .col-voucher_debit,
    .col-voucher_credit,
    .col-amount {
        width: 7%;
    }

    .col-ledger_desc,
    .col-voucher_desc,
    .col-desc1,
    .col-desc2,
    .col-description,
    .col-notes,
    .col-review_memo,
    .col-review_reason {
        width: 12%;
    }

    .mono {
        font-family: "Consolas", "Courier New", monospace;
        font-size: 13px;
    }

    .bridge-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 42, 0.38);
        z-index: 80;
        padding: 24px;
    }

    .bridge-modal.active {
        display: flex;
    }

    .bridge-modal-dialog {
        width: min(1120px, calc(100vw - 32px));
        max-height: calc(100vh - 48px);
        overflow: auto;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 18px 18px 16px;
        display: grid;
        gap: 14px;
    }

    .bridge-modal-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .bridge-modal-title {
        display: grid;
        gap: 4px;
    }

    .bridge-modal-title strong {
        font-size: 18px;
        color: var(--text);
    }

    .bridge-modal-title p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
    }

    .bridge-modal-grid {
        display: grid;
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .voucher-detail-wrap {
        max-height: 65vh;
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
    }

    .voucher-detail-wrap table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .voucher-detail-wrap th,
    .voucher-detail-wrap td {
        padding: 10px 12px;
        border-bottom: 1px solid #eef2f7;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
    }

    .voucher-detail-wrap td.cell-desc,
    .voucher-detail-wrap th.cell-desc {
        white-space: normal;
    }

    .voucher-summary-action {
        min-width: 64px;
    }

    .offset-review-dialog {
        width: min(1460px, calc(100vw - 32px));
        height: min(88vh, calc(100vh - 48px));
        grid-template-rows: auto auto minmax(0, 1fr);
        overflow: hidden;
    }

    .offset-review-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .offset-review-wrap {
        min-height: 0;
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 10px;
    }

    .offset-review-wrap table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .offset-review-wrap th,
    .offset-review-wrap td {
        padding: 9px 10px;
        border-bottom: 1px solid #eef2f7;
        vertical-align: top;
        text-align: left;
    }

    .offset-review-wrap thead th {
        position: sticky;
        top: 0;
        background: #f8fafc;
        z-index: 1;
        color: var(--muted);
        font-weight: 600;
        white-space: nowrap;
    }

    .offset-review-wrap .choice-cell {
        width: 48px;
        text-align: center;
    }

    .offset-review-wrap .voucher-cell {
        white-space: nowrap;
    }

    .offset-review-wrap .long-cell {
        min-width: 180px;
        line-height: 1.45;
    }

    .offset-review-wrap .status-cell {
        white-space: nowrap;
        color: var(--muted);
    }

    .offset-review-wrap .offset-source-row td {
        background: #f8fafc;
        border-top: 2px solid #d8dee7;
    }

    .offset-review-wrap .offset-source-label {
        width: 88px;
        text-align: center;
        font-weight: 800;
        color: #111827;
        white-space: nowrap;
    }

    .offset-review-wrap .offset-source-detail {
        line-height: 1.5;
    }

    .offset-review-wrap .offset-source-line {
        display: block;
        margin: 1px 0;
    }

    .offset-review-wrap .offset-source-line strong {
        display: inline-block;
        min-width: 92px;
        color: #475569;
        font-weight: 800;
    }

    .offset-review-wrap tr.offset-group-start td {
        border-top: 2px solid #d8dee7;
    }

    .bridge-card {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 14px;
        background: #fff;
        display: grid;
        gap: 12px;
    }

    .bridge-card h3 {
        margin: 0;
        font-size: 14px;
        color: var(--text);
    }

    .bridge-guide-list,
    .bridge-setting-list {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 6px;
        color: var(--text);
        font-size: 13px;
        line-height: 1.5;
    }

    .bridge-setting-fields {
        display: grid;
        gap: 10px;
    }

    .bridge-setting-fields label {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        color: var(--text);
        line-height: 1.45;
    }

    .bridge-setting-fields input[type="checkbox"] {
        margin-top: 2px;
        accent-color: #111827;
    }

    .bridge-setting-fields select,
    .bridge-setting-fields input[type="number"] {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 13px;
        color: var(--text);
        background: #fff;
    }

    .bridge-setting-fields .field-block {
        display: grid;
        gap: 6px;
    }

    .bridge-setting-fields .field-block span {
        font-size: 12px;
        color: var(--muted);
    }

    .bridge-modal-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .bridge-modal-meta {
        font-size: 12px;
        color: var(--muted);
    }

    .bridge-preview-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .bridge-preview-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .bridge-preview-wrap .table-wrap {
        max-height: clamp(300px, 46vh, 540px);
    }

    @media (max-width: 960px) {
        .bridge-modal-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .upload-form {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .upload-picker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: #fff;
        cursor: pointer;
        font-weight: 700;
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .upload-picker:hover {
        border-color: #9ca3af;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .upload-picker::before {
        content: "";
        width: 15px;
        height: 11px;
        border: 2px solid currentColor;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        transform: translateY(1px);
        clip-path: polygon(0 28%, 22% 28%, 30% 0, 100% 0, 100% 100%, 0 100%);
    }

    .hidden-input {
        display: none;
    }

    .table-placeholder {
        padding: 16px;
        color: var(--muted);
    }

    .recommend-panel {
        display: none;
    }

    .recommend-panel.active {
        display: block;
    }

    .recommend-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .recommend-sort {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .recommend-sort button.active {
        background: #111827;
        border-color: #111827;
        color: #fff;
    }

    .recommend-summary {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .recommend-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 700;
        background: #f3f4f6;
        color: #111827;
    }

    .recommend-badge.good {
        background: #ecfdf3;
        color: #166534;
    }

    .recommend-badge.warn {
        background: #fff7ed;
        color: #9a3412;
    }

    .recommend-panel .panel-header h2 {
        margin: 0;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .suggest-field {
        position: relative;
        width: 132px;
        min-width: 132px;
    }

    .suggest-field > input[type="text"] {
        width: 100%;
        min-width: 0;
    }

    .detail-panel[data-status-panel="matched"] .filter-form input[name="wehago_amount"],
    .detail-panel[data-status-panel="matched"] .filter-form input[name="erp_amount"],
    .detail-panel[data-status-panel="amount_mismatch"] .filter-form input[name="wehago_amount"],
    .detail-panel[data-status-panel="amount_mismatch"] .filter-form input[name="erp_amount"] {
        width: 106px;
        min-width: 106px;
    }

    .detail-panel[data-status-panel="matched"] .filter-form .suggest-field-wide,
    .detail-panel[data-status-panel="amount_mismatch"] .filter-form .suggest-field-wide {
        flex: 1 1 220px;
        width: auto;
        min-width: 220px;
    }

    .detail-panel[data-status-panel="ledger_only"] .filter-form .suggest-field,
    .detail-panel[data-status-panel="voucher_only"] .filter-form .suggest-field,
    .detail-panel[data-status-panel="ledger_only"] .filter-form input[name="amount_keyword"],
    .detail-panel[data-status-panel="voucher_only"] .filter-form input[name="amount_keyword"] {
        width: 140px;
        min-width: 140px;
    }

    .detail-panel[data-status-panel="voucher_recheck"] .filter-form input[name="amount_keyword"] {
        width: 94px;
        min-width: 94px;
    }

    .suggest-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: auto;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
        max-height: 260px;
        overflow: auto;
        z-index: 50;
        display: none;
    }

    .suggest-dropdown.open {
        display: block;
    }

    .suggest-item {
        width: 100%;
        text-align: left;
        padding: 3px 4px;
        margin: 0;
        border: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
        background: #fff;
        color: #111827;
        box-shadow: none;
        border-radius: 0;
        min-height: 28px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        line-height: 1.2;
    }

    .suggest-item:last-child {
        border-bottom: 0;
    }

    .suggest-item:hover {
        background: #f3f4f6;
        transform: none;
    }

    .suggest-item input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        max-width: 12px !important;
        max-height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        line-height: 1 !important;
        flex: 0 0 12px !important;
        accent-color: #111827;
        pointer-events: none;
    }

    .suggest-item .text {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .suggest-empty {
        padding: 10px 12px;
        color: var(--muted);
        font-size: 13px;
    }

    body[data-view-mode="dual"] .voucher-page.has-recommend-panel-open {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
    }

    body[data-view-mode="dual"] .voucher-page.has-recommend-panel-open > .voucher-topbar {
        grid-column: 1 / -1;
    }

    body[data-view-mode="dual"] .voucher-page.has-recommend-panel-open > .panel-shell:not(#pairRecommendPanel) {
        grid-column: 1;
        min-width: 0;
    }

    body[data-view-mode="dual"] .voucher-page.has-recommend-panel-open > #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);
    }

    body[data-view-mode="dual"] .cell-code {
        max-width: clamp(90px, 8vw, 132px);
    }

    body[data-view-mode="dual"] .cell-equal {
        max-width: clamp(110px, 11vw, 180px);
    }

    body[data-view-mode="dual"] .cell-desc {
        max-width: clamp(150px, 15vw, 280px);
    }

    body[data-view-mode="dual"] .col-ledger_vendor,
    body[data-view-mode="dual"] .col-voucher_vendor {
        width: 11%;
    }

    body[data-view-mode="dual"] .col-ledger_desc,
    body[data-view-mode="dual"] .col-voucher_desc,
    body[data-view-mode="dual"] .col-desc1,
    body[data-view-mode="dual"] .col-desc2,
    body[data-view-mode="dual"] .col-description,
    body[data-view-mode="dual"] .col-notes,
    body[data-view-mode="dual"] .col-review_memo,
    body[data-view-mode="dual"] .col-review_reason {
        width: 13%;
    }

    @media (max-width: 720px) {
        .voucher-topbar,
        .panel-header,
        .data-panel summary {
            align-items: flex-start;
        }

        .status-card[data-status="voucher_matched"],
        .status-card[data-status="erp_voucher_matched"] {
            margin-left: 0;
        }

        .cell-ellipsis {
            max-width: 180px;
        }
    }
</style>
{% endblock %}

{% block content %}
<section
    class="voucher-page"
    data-start-year="{{ wehago_compare.selected_start_year or '' }}"
    data-end-year="{{ wehago_compare.selected_end_year or '' }}"
>
    <datalist id="wehagoAccountOptions">
        {% for item in wehago_compare.wehago_account_options %}
        <option value="{{ item }}"></option>
        {% endfor %}
    </datalist>
    <datalist id="erpAccountOptions">
        {% for item in wehago_compare.erp_account_options %}
        <option value="{{ item }}"></option>
        {% endfor %}
    </datalist>
    <div class="voucher-topbar">
        <div class="voucher-title-wrap">
            <div class="section-title" style="margin-bottom: 0;">
                <h2>{{ wehago_compare.page_title }}</h2>
            </div>
        </div>
        <div class="voucher-toolbar">
            <form method="get" action="/wehago-compare">
                <label for="start_year">기간</label>
                <select id="start_year" name="start_year">
                    {% for year in wehago_compare.available_years %}
                    <option
                        value="{{ year }}"
                        {% if wehago_compare.selected_start_year == year %}selected{% endif %}
                        {% if wehago_compare.selected_end_year and year > wehago_compare.selected_end_year %}disabled{% endif %}
                    >{{ year }}</option>
                    {% endfor %}
                </select>
                <span>~</span>
                <select id="end_year" name="end_year">
                    {% for year in wehago_compare.available_years %}
                    <option
                        value="{{ year }}"
                        {% if wehago_compare.selected_end_year == year %}selected{% endif %}
                        {% if wehago_compare.selected_start_year and year < wehago_compare.selected_start_year %}disabled{% endif %}
                    >{{ year }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="button-secondary">적용</button>
            </form>
            <button type="button" class="button-secondary" id="snapshotToggleBtn" aria-expanded="false" aria-controls="snapshotPanel">스냅샷 상태</button>
            <button type="button" class="button-secondary" id="queryCacheRebuildBtn">조회 캐시 재생성</button>
            <span class="system-job-meta" id="systemJobMeta" data-state="">작업 상태 확인 전</span>
            <button type="button" class="button-secondary button-icon" id="undoLastActionBtn" aria-label="직전 작업 취소" title="직전 작업 취소">
                <span class="icon-button-label" aria-hidden="true">
                    <svg viewBox="0 0 24 24">
                        <path d="M15 18l-6-6 6-6"></path>
                    </svg>
                </span>
            </button>
            <span class="panel-meta" id="lastActionMeta">
                {% if wehago_compare.last_action %}
                최근 작업: {{ wehago_compare.last_action.action_type }} / {{ "{:,}".format(wehago_compare.last_action.count or 0) }}건
                {% else %}
                최근 작업: 없음
                {% endif %}
            </span>
        </div>
    </div>

    <section class="panel-shell">
        <div class="panel-header">
            <div><h2>기간 {{ wehago_compare.selected_start_year or '-' }} ~ {{ wehago_compare.selected_end_year or '-' }}</h2></div>
        </div>
        <div class="panel-body">
            <div class="status-grid">
                {% for section in wehago_compare.metric_sections %}
                {% if section.key in ['voucher_matched', 'voucher_unmatched', 'voucher_recheck', 'voucher_excepted', 'hanmac_unconnected', 'erp_voucher_matched', 'erp_voucher_unmatched'] %}
                <button
                    type="button"
                    class="status-card"
                    data-target="detail-{{ section.key }}"
                    data-status="{{ section.key }}"
                    aria-expanded="false"
                >
                    <span class="status-label">{{ section.label }}</span>
                    <span class="status-value">{{ "{:,}".format(section.count) }}</span>
                </button>
                {% endif %}
                {% endfor %}
            </div>

            <div class="detail-stack">
                {% for section in wehago_compare.metric_sections %}
                {% if section.key in ['voucher_matched', 'voucher_unmatched', 'voucher_recheck', 'voucher_excepted', 'hanmac_unconnected', 'erp_voucher_matched', 'erp_voucher_unmatched'] %}
                <section class="detail-panel" id="detail-{{ section.key }}" data-status-panel="{{ section.key }}">
                    <div class="detail-head">
                        {% set show_export_button = section.key in ['voucher_matched', 'voucher_unmatched', 'voucher_recheck', 'voucher_excepted', 'hanmac_unconnected', 'erp_voucher_matched', 'erp_voucher_unmatched'] %}
                        {% if section.key == 'matched' or show_export_button %}
                        <div class="detail-heading-row">
                            <strong>{{ section.label }}</strong>
                            <div class="detail-heading-tools">
                                {% if section.key == 'matched' %}
                                <button type="button" class="button-secondary" id="bridgeReviewOpenBtn">2단계 비교 설정</button>
                                {% endif %}
                                {% if show_export_button %}
                                <button type="button" class="button-secondary button-icon" data-export-status="{{ section.key }}" aria-label="엑셀 다운로드" title="엑셀 다운로드">
                                    <span class="icon-button-label" aria-hidden="true">
                                        <svg viewBox="0 0 64 64" aria-hidden="true">
                                            <rect x="19" y="4" width="41" height="56" rx="6" fill="#21A366"></rect>
                                            <rect x="40" y="4" width="20" height="56" rx="6" fill="#33C481"></rect>
                                            <rect x="0" y="17" width="34" height="30" rx="4" fill="#185C37"></rect>
                                            <path d="M8 24h6.2l4.1 7.1 4.1-7.1h5.8l-6.4 10 6.6 10h-6.1l-4.3-7.5-4.4 7.5H7.9l6.8-10.1L8 24z" fill="#FFFFFF"></path>
                                        </svg>
                                    </span>
                                </button>
                                {% endif %}
                            </div>
                        </div>
                        {% else %}
                        <strong>{{ section.label }}</strong>
                        {% endif %}
                        {% if section.key in ['matched', 'amount_mismatch'] %}
                        <form class="filter-form" data-filter-kind="status" data-status="{{ section.key }}">
                            <div class="suggest-field">
                                <input type="text" name="wehago_account" placeholder="WEHAGO 계정코드" autocomplete="off">
                                <div class="suggest-dropdown" data-wehago-account-suggest="{{ section.key }}"></div>
                            </div>
                            <div class="suggest-field">
                                <input type="text" name="erp_account" placeholder="Hanmac 계정코드" autocomplete="off">
                                <div class="suggest-dropdown" data-erp-account-suggest="{{ section.key }}"></div>
                            </div>
                            <div class="suggest-field">
                                <input type="text" name="voucher_no" placeholder="전표번호" autocomplete="off">
                                <div class="suggest-dropdown" data-voucher-suggest="{{ section.key }}"></div>
                            </div>
                            <div class="suggest-field">
                                <input type="text" name="draft_no" placeholder="가전표번호" autocomplete="off">
                                <div class="suggest-dropdown" data-draft-suggest="{{ section.key }}"></div>
                            </div>
                            <input type="text" name="wehago_amount" placeholder="WEHAGO 금액">
                            <input type="text" name="erp_amount" placeholder="Hanmac 금액">
                            <div class="suggest-field suggest-field-wide">
                                <input type="text" name="wehago_vendor" placeholder="WEHAGO 거래처" autocomplete="off">
                                <div class="suggest-dropdown" data-wehago-vendor-suggest="{{ section.key }}"></div>
                            </div>
                            <div class="suggest-field suggest-field-wide">
                                <input type="text" name="erp_vendor" placeholder="Hanmac 거래처" autocomplete="off">
                                <div class="suggest-dropdown" data-erp-vendor-suggest="{{ section.key }}"></div>
                            </div>
                            <button type="submit">조회</button>
                            {% if section.key == 'amount_mismatch' %}
                            <button type="button" class="button-secondary" data-review-save>매칭</button>
                            {% endif %}
                        </form>
                        {% else %}
                        <form class="filter-form" data-filter-kind="status" data-status="{{ section.key }}">
                            <div class="suggest-field">
                                <input type="text" name="voucher_no" placeholder="전표번호" autocomplete="off">
                                <div class="suggest-dropdown" data-voucher-suggest="{{ section.key }}"></div>
                            </div>
                            <div class="suggest-field">
                                <input type="text" name="account_keyword" placeholder="계정" autocomplete="off">
                                <div class="suggest-dropdown" data-account-suggest="{{ section.key }}"></div>
                            </div>
                            <div class="suggest-field">
                            <input type="text" name="vendor_keyword" placeholder="거래처" autocomplete="off">
                                <div class="suggest-dropdown" data-vendor-suggest="{{ section.key }}"></div>
                            </div>
                            <input type="text" name="amount_keyword" placeholder="금액">
                            <input type="text" name="desc_keyword" placeholder="적요">
                            <button type="submit">조회</button>
                            {% if section.key == 'voucher_recheck' %}
                            <button type="button" class="button-secondary" id="offsetReviewOpenBtn">상계</button>
                            <button type="button" class="button-secondary" data-review-save>변경</button>
                            {% endif %}
                            {% if section.key in ['ledger_only', 'voucher_only'] %}
                            <button type="button" class="button-secondary" data-pair-recommend>정확도 추천</button>
                            <button type="button" class="button-secondary" data-pair-save>개별 추천</button>
                            {% endif %}
                        </form>
                        {% endif %}
                        <div class="active-filter-cards" data-active-filters="{{ section.key }}"></div>
                        <div class="result-meta" data-result-meta="{{ section.key }}"></div>
                    </div>
                    <div class="table-wrap" data-table-wrap="{{ section.key }}">
                        <div class="table-placeholder">상태를 클릭하거나 조회를 실행하면 결과를 불러옵니다.</div>
                    </div>
                    <div class="table-footer" data-table-footer="{{ section.key }}" hidden>
                        <button type="button" class="button-secondary load-more-button" data-load-more="{{ section.key }}">더 보기</button>
                    </div>
                </section>
                {% endif %}
                {% endfor %}
            </div>

            <section class="snapshot-panel" id="snapshotPanel" hidden>
                <div class="snapshot-panel-head">
                    <div class="snapshot-panel-title">
                        <strong>스냅샷 상태</strong>
                        <div class="snapshot-policy" id="snapshotPolicyText">전표 스냅샷 상태를 불러오는 중입니다.</div>
                    </div>
                    <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                        <div class="panel-meta" id="snapshotSummaryMeta"></div>
                        <button type="button" class="button-secondary" id="snapshotRebuildBtn">현재 기간 다시 준비</button>
                    </div>
                </div>
                <div class="snapshot-summary-badges" id="snapshotSummaryBadges"></div>
                <div class="snapshot-years" id="snapshotYears"></div>
                <div class="snapshot-jobs" id="snapshotJobs"></div>
            </section>
        </div>
    </section>

    <section class="panel-shell recommend-panel" id="pairRecommendPanel">
        <div class="panel-header">
            <div>
                <h2 id="recommendPanelTitle">정확도 추천 워크벤치</h2>
                <div class="panel-meta" id="recommendModeMeta"></div>
            </div>
            <div class="recommend-actions">
                <div class="recommend-sort" id="recommendSortTools">
                    <button type="button" class="button-secondary active" data-recommend-sort="score">점수순</button>
                    <button type="button" class="button-secondary" data-recommend-sort="amount_gap">금액차이순</button>
                    <button type="button" class="button-secondary" data-recommend-sort="account_similarity">계정유사도순</button>
                    <button type="button" class="button-secondary" data-recommend-sort="vendor_similarity">거래처유사도순</button>
                </div>
                <label id="recommendHighOnlyWrap" style="display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted);">
                    <input type="checkbox" id="recommendHighOnly">
                    고신뢰만 보기
                </label>
                <button type="button" class="button-secondary" id="recommendApplySelected">선택 저장</button>
                <button type="button" class="button-secondary" id="recommendApplyIndividual" hidden>선택 매칭 저장</button>
                <button type="button" class="button-secondary" id="recommendClose">닫기</button>
            </div>
        </div>
        <div class="panel-body">
            <div class="recommend-summary" id="recommendSummary"></div>
        </div>
        <div class="table-wrap" id="recommendTableWrap">
            <div class="table-placeholder">정확도 추천 버튼을 누르면 결과가 표시됩니다.</div>
        </div>
    </section>

    <div class="bridge-modal" id="voucherDetailModal" aria-hidden="true">
        <div class="bridge-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="voucherDetailModalTitle">
            <div class="bridge-modal-head">
                <div class="bridge-modal-title">
                    <strong id="voucherDetailModalTitle">전표 상세</strong>
                    <p id="voucherDetailModalMeta">선택한 전표의 세부 행입니다.</p>
                </div>
                <button type="button" class="button-secondary" id="voucherDetailCloseBtn">닫기</button>
            </div>
            <div class="voucher-detail-wrap" id="voucherDetailTableWrap">
                <div class="table-placeholder">상세 데이터를 불러오지 않았습니다.</div>
            </div>
        </div>
    </div>

    <div class="bridge-modal" id="offsetReviewModal" aria-hidden="true">
        <div class="bridge-modal-dialog offset-review-dialog" role="dialog" aria-modal="true" aria-labelledby="offsetReviewModalTitle">
            <div class="bridge-modal-head">
                <div class="bridge-modal-title">
                    <strong id="offsetReviewModalTitle">상계 취소 후보</strong>
                </div>
                <div class="offset-review-actions">
                    <button type="button" id="offsetReviewMoveBtn" disabled>이동</button>
                    <button type="button" class="button-secondary" id="offsetReviewCloseBtn">닫기</button>
                </div>
            </div>
            <div class="bridge-modal-meta" id="offsetReviewMeta">후보를 불러오지 않았습니다.</div>
            <div class="offset-review-wrap" id="offsetReviewTableWrap">
                <div class="table-placeholder">상계 버튼을 누르면 검토 대상이 표시됩니다.</div>
            </div>
        </div>
    </div>

    <div class="bridge-modal" id="bridgeReviewModal" aria-hidden="true">
        <div class="bridge-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="bridgeReviewModalTitle">
            <div class="bridge-modal-head">
                <div class="bridge-modal-title">
                    <strong id="bridgeReviewModalTitle">2단계 비교 설정</strong>
                    <p>보통예금 출금, 지급전표, 원가/판관비 전표를 연결해 WEHAGO 카드에 반영할 수 있는 후보를 다루는 설정입니다.</p>
                </div>
                <button type="button" class="button-secondary" id="bridgeReviewCloseBtn">닫기</button>
            </div>

            <div class="bridge-modal-grid">
                <section class="bridge-card">
                    <div>
                        <h3>반영 기준</h3>
                    </div>
                    <ol class="bridge-guide-list">
                        <li>WEHAGO 보통예금 출금과 ERP 지급전표의 금액이 먼저 일치해야 합니다.</li>
                        <li>ERP 원 전표는 원가/판관비 성격이어야 하며, 자산·부채·부가세 계정은 자동 반영 대상에서 제외합니다.</li>
                        <li>적요와 거래처의 핵심 단어가 강하게 일치할수록 우선합니다.</li>
                        <li>같은 지급전표를 설명하는 원 비용 후보가 여러 개면 자동 매칭하지 않고 검토 대상으로 남깁니다.</li>
                    </ol>
                    <div class="bridge-modal-meta" id="bridgeReviewSettingsMeta">설정은 서버에 저장되며 WEHAGO 카드 계산에 반영됩니다.</div>
                </section>

                <section class="bridge-card">
                    <div>
                        <h3>설정</h3>
                    </div>
                    <form class="bridge-setting-fields" id="bridgeReviewSettingsForm">
                        <label>
                            <input type="checkbox" name="enable_promotion">
                            <span>2단계 비교에서 충분히 강한 후보는 WEHAGO 카드에 반영 후보로 표시</span>
                        </label>
                        <label>
                            <input type="checkbox" name="require_exact_amount" checked>
                            <span>WEHAGO 출금액, ERP 지급액, 원 비용 금액이 모두 같을 때만 자동 반영 검토</span>
                        </label>
                        <label>
                            <input type="checkbox" name="require_expense_nature" checked>
                            <span>원 비용 전표는 원가/판관비 계정만 허용하고, 자산/부채/VAT 계정은 제외</span>
                        </label>
                        <label>
                            <input type="checkbox" name="require_strong_text" checked>
                            <span>적요 또는 거래처 핵심어가 강하게 일치할 때만 자동 반영 검토</span>
                        </label>
                        <div class="field-block">
                            <label for="bridgeAmbiguousHandling">복수 후보 처리</label>
                            <select id="bridgeAmbiguousHandling" name="ambiguous_handling">
                                <option value="recheck">WEHAGO Recheck로 보냄</option>
                                <option value="review_only">2단계 비교 미리보기만 유지</option>
                            </select>
                            <span>지급전표 하나에 원 비용 후보가 둘 이상이면 자동 승격하지 않습니다.</span>
                        </div>
                        <div class="field-block">
                            <label for="bridgePreviewLimit">미리보기 개수</label>
                            <input type="number" id="bridgePreviewLimit" name="preview_limit" min="20" max="500" step="10" value="100">
                            <span>모달에서 불러올 2단계 비교 후보 건수입니다.</span>
                        </div>
                    </form>
                    <div class="bridge-modal-actions">
                        <div class="bridge-modal-meta">설정 저장 후 아래 미리보기를 다시 불러오면 같은 조건으로 검토할 수 있습니다.</div>
                        <button type="button" class="button-secondary" id="bridgeReviewSaveBtn">설정 저장</button>
                    </div>
                </section>
            </div>

            <section class="bridge-card bridge-preview-wrap">
                <div class="bridge-preview-head">
                    <div>
                        <h3>2단계 비교 미리보기</h3>
                        <div class="bridge-modal-meta" id="bridgeReviewPreviewMeta">아직 불러오지 않았습니다.</div>
                    </div>
                    <div class="bridge-preview-actions">
                        <button type="button" class="button-secondary" id="bridgeReviewLoadBtn">후보 불러오기</button>
                    </div>
                </div>
                <div class="table-wrap" id="bridgeReviewPreviewWrap">
                    <div class="table-placeholder">2단계 비교 후보를 모달에서 확인할 수 있습니다.</div>
                </div>
            </section>
        </div>
    </div>

</section>

<script>
    (() => {
        const page = document.querySelector('.voucher-page');
        const initialStartYearValue = page?.dataset.startYear || '';
        const initialEndYearValue = page?.dataset.endYear || '';
        const getSelectedYearRange = () => {
            const startSelect = document.getElementById('start_year');
            const endSelect = document.getElementById('end_year');
            return {
                startYear: startSelect?.value || initialStartYearValue || '',
                endYear: endSelect?.value || initialEndYearValue || '',
            };
        };
        const appendSelectedYearRange = (params) => {
            const { startYear, endYear } = getSelectedYearRange();
            if (startYear) params.set('start_year', startYear);
            if (endYear) params.set('end_year', endYear);
            return params;
        };
        const selectedYearRangePayload = () => {
            const { startYear, endYear } = getSelectedYearRange();
            return {
                start_year: startYear || null,
                end_year: endYear || null,
            };
        };
        const navigateToCompareRange = (startYear, endYear) => {
            const params = new URLSearchParams(window.location.search);
            if (startYear) params.set('start_year', startYear);
            if (endYear) params.set('end_year', endYear);
            const query = params.toString();
            window.location.href = `${window.location.pathname}${query ? `?${query}` : ''}`;
        };

        const escapeHtml = (value) => String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');

        const escapeSelectorValue = (value) => String(value ?? '').replace(/["\\]/g, '\\$&');

        const detailState = new Map();
        const recheckSelections = new Map();
        const recheckRowStore = new Map();
        const voucherRecheckSelections = new Map();
        const voucherRecheckSplitSelections = new Map();
        const voucherRecheckRowStore = new Map();
        const voucherGroupDetailStore = new Map();
        const summaryRefreshState = { timerId: null, pending: false };
        const detailRetryTimers = new Map();
        const detailRequestControllers = new Map();
        const queryCacheRebuildBtn = document.getElementById('queryCacheRebuildBtn');
        const systemJobMeta = document.getElementById('systemJobMeta');
        let systemJobPollTimer = null;
        const voucherDetailModal = document.getElementById('voucherDetailModal');
        const voucherDetailCloseBtn = document.getElementById('voucherDetailCloseBtn');
        const voucherDetailTableWrap = document.getElementById('voucherDetailTableWrap');
        const voucherDetailModalTitle = document.getElementById('voucherDetailModalTitle');
        const voucherDetailModalMeta = document.getElementById('voucherDetailModalMeta');
        const offsetReviewOpenBtn = document.getElementById('offsetReviewOpenBtn');
        const offsetReviewModal = document.getElementById('offsetReviewModal');
        const offsetReviewCloseBtn = document.getElementById('offsetReviewCloseBtn');
        const offsetReviewMoveBtn = document.getElementById('offsetReviewMoveBtn');
        const offsetReviewMeta = document.getElementById('offsetReviewMeta');
        const offsetReviewTableWrap = document.getElementById('offsetReviewTableWrap');
        const offsetReviewSelections = new Map();
        let offsetReviewGroups = [];
        const pairSelections = new Map();
        const pairLedgerStore = new Map();
        const pairVoucherStore = new Map();
        const cumulativeFiltersByStatus = new Map();
        let latestPairRecommendation = null;

        const getCellClass = (field, monoFields = []) => {
            const classes = ['cell-ellipsis'];
            if (monoFields.includes(field)) {
                classes.push('mono');
            }
            if (['fiscal_year'].includes(field)) {
                classes.push('cell-tight');
            } else if (['voucher_no', 'draft_no', 'ledger_date', 'proof_date', 'confirmed_no', 'account_code'].includes(field)) {
                classes.push('cell-code');
            } else if (
                [
                    'ledger_account_name',
                    'voucher_account_name',
                    'ledger_vendor',
                    'voucher_vendor',
                    'ledger_debit',
                    'ledger_credit',
                    'voucher_debit',
                    'voucher_credit',
                ].includes(field)
            ) {
                classes.push('cell-equal');
            } else if (['ledger_desc', 'voucher_desc', 'desc1', 'desc2', 'description', 'review_reason', 'review_memo', 'notes'].includes(field)) {
                classes.push('cell-desc');
            }
            return classes.join(' ');
        };

        const getColumnClass = (field) => `col-${String(field || '').replace(/[^a-zA-Z0-9_]/g, '_')}`;

        const renderVoucherDetailTable = (group) => {
            if (!voucherDetailTableWrap) return;
            const rows = Array.isArray(group?.rows) ? group.rows : [];
            const lineColumns = [
                ['fiscal_year', '연도'],
                ['status_label', '구분'],
                ['ledger_date', 'WEHAGO 일자'],
                ['voucher_no', '전표번호'],
                ['draft_no', '가전표번호'],
                ['ledger_account_name', 'WEHAGO 계정'],
                ['voucher_account_name', 'ERP 계정'],
                ['ledger_vendor', 'WEHAGO 거래처'],
                ['voucher_vendor', 'ERP 거래처'],
                ['ledger_debit', 'WEHAGO 차변'],
                ['ledger_credit', 'WEHAGO 대변'],
                ['voucher_debit', 'ERP 차변'],
                ['voucher_credit', 'ERP 대변'],
                ['ledger_desc', 'WEHAGO 적요'],
                ['voucher_desc', 'ERP 적요'],
            ];
            if (!rows.length) {
                voucherDetailTableWrap.innerHTML = '<div class="table-placeholder">표시할 상세 행이 없습니다.</div>';
                return;
            }
            const head = lineColumns.map(([field, label]) => `<th class="${getColumnClass(field)} ${getCellClass(field, ['voucher_no'])}">${escapeHtml(label)}</th>`).join('');
            const body = rows.map((row) => {
                const cells = lineColumns.map(([field]) => {
                    const raw = row[field];
                    const display = typeof raw === 'number'
                        ? (Number.isInteger(raw) ? raw.toLocaleString() : raw.toLocaleString(undefined, { maximumFractionDigits: 2 }))
                        : String(raw ?? '');
                    return `<td class="${getColumnClass(field)} ${getCellClass(field, ['voucher_no'])}" title="${escapeHtml(display)}">${escapeHtml(display)}</td>`;
                }).join('');
                return `<tr>${cells}</tr>`;
            }).join('');
            voucherDetailTableWrap.innerHTML = `<table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
        };

        const openVoucherDetailModal = (groupKey) => {
            const group = voucherGroupDetailStore.get(groupKey);
            if (!group || !voucherDetailModal) return;
            const summary = group.summary || {};
            if (voucherDetailModalTitle) {
                voucherDetailModalTitle.textContent = `${summary.voucher_no || '전표'} 상세`;
            }
            if (voucherDetailModalMeta) {
                const bits = [
                    summary.ledger_date || '',
                    summary.draft_no || '',
                    `WEHAGO ${Number(summary.ledger_row_count || 0).toLocaleString()}행`,
                    `ERP ${Number(summary.voucher_row_count || 0).toLocaleString()}행`,
                ].filter(Boolean);
                voucherDetailModalMeta.textContent = bits.join(' / ');
            }
            renderVoucherDetailTable(group);
            voucherDetailModal.classList.add('active');
            voucherDetailModal.setAttribute('aria-hidden', 'false');
        };

        const closeVoucherDetailModal = () => {
            if (!voucherDetailModal) return;
            voucherDetailModal.classList.remove('active');
            voucherDetailModal.setAttribute('aria-hidden', 'true');
        };

        voucherDetailCloseBtn?.addEventListener('click', closeVoucherDetailModal);
        voucherDetailModal?.addEventListener('click', (event) => {
            if (event.target === voucherDetailModal) {
                closeVoucherDetailModal();
            }
        });

        const formatOffsetAmount = (value) => Number(value || 0).toLocaleString(undefined, { maximumFractionDigits: 0 });

        const setOffsetReviewModalOpen = (open) => {
            if (!offsetReviewModal) return;
            offsetReviewModal.classList.toggle('active', open);
            offsetReviewModal.setAttribute('aria-hidden', open ? 'false' : 'true');
        };

        const updateOffsetMoveState = () => {
            if (offsetReviewMoveBtn) {
                offsetReviewMoveBtn.disabled = offsetReviewSelections.size === 0;
                offsetReviewMoveBtn.textContent = offsetReviewSelections.size
                    ? `이동 (${offsetReviewSelections.size.toLocaleString()})`
                    : '이동';
            }
        };

        const renderOffsetReviewGroups = (payload) => {
            if (!offsetReviewTableWrap) return;
            offsetReviewGroups = Array.isArray(payload?.groups) ? payload.groups : [];
            offsetReviewSelections.clear();
            updateOffsetMoveState();
            if (offsetReviewMeta) {
                const missingYears = Array.isArray(payload?.missing_context_years) ? payload.missing_context_years : [];
                offsetReviewMeta.textContent = missingYears.length
                    ? `${missingYears.join(', ')}년 projection은 준비되지 않아 연도 경계 후보에서 제외됩니다.`
                    : '';
            }
            if (!offsetReviewGroups.length) {
                offsetReviewTableWrap.innerHTML = '<div class="table-placeholder">현재 확인할 상계 취소 후보가 없습니다.</div>';
                return;
            }
            const rows = offsetReviewGroups.map((group, sourceIndex) => {
                const source = group.source || {};
                const sourceRow = `
                    <tr class="offset-source-row">
                        <td class="choice-cell offset-source-label">취소 전표</td>
                        <td class="status-cell">${escapeHtml(source.status_key || 'voucher_recheck')}</td>
                        <td class="voucher-cell mono">${escapeHtml(source.ledger_date)}<br>${escapeHtml(source.voucher_no)}</td>
                        <td class="long-cell" title="${escapeHtml(source.ledger_accounts)}">${escapeHtml(source.ledger_vendors || '-')}<br>${escapeHtml(source.ledger_accounts || '-')}<br>${escapeHtml(formatOffsetAmount(source.ledger_debit))} / ${escapeHtml(formatOffsetAmount(source.ledger_credit))}</td>
                        <td class="long-cell" title="${escapeHtml(source.voucher_accounts || '')}">${escapeHtml(source.draft_no || '-')}<br>${escapeHtml(source.voucher_vendors || '-')}<br>${escapeHtml(source.voucher_accounts || '-')}</td>
                        <td class="long-cell" title="${escapeHtml(source.erp_management_items || '')}">${escapeHtml(source.erp_management_items || '-')}</td>
                        <td class="long-cell"></td>
                    </tr>
                `;
                const partnerRows = (group.partners || []).map((partner, partnerIndex) => {
                    const key = `${sourceIndex}:${partnerIndex}`;
                    return `
                        <tr class="${partnerIndex === 0 ? 'offset-group-start' : ''}">
                            <td class="choice-cell"><input type="checkbox" data-offset-choice="${escapeHtml(key)}" data-offset-source="${sourceIndex}"></td>
                            <td class="status-cell">${escapeHtml(partner.status_key)}</td>
                            <td class="voucher-cell mono">${escapeHtml(partner.ledger_date)}<br>${escapeHtml(partner.voucher_no)}</td>
                            <td class="long-cell" title="${escapeHtml(partner.ledger_accounts)}">${escapeHtml(partner.ledger_vendors)}<br>${escapeHtml(partner.ledger_accounts)}<br>${escapeHtml(formatOffsetAmount(partner.ledger_debit))} / ${escapeHtml(formatOffsetAmount(partner.ledger_credit))}</td>
                            <td class="long-cell" title="${escapeHtml(partner.voucher_accounts)}">${escapeHtml(partner.draft_no || '-')}<br>${escapeHtml(partner.voucher_vendors || '')}<br>${escapeHtml(partner.voucher_accounts || '')}</td>
                            <td class="long-cell" title="${escapeHtml(partner.erp_management_items || '')}">${escapeHtml(partner.erp_management_items || '-')}</td>
                            <td class="long-cell">${escapeHtml(partner.status_key === 'voucher_matched' ? 'Matched 원 전표 취소 여부 확인 후 함께 이동' : (group.recommendation || ''))}</td>
                        </tr>
                    `;
                }).join('');
                return sourceRow + partnerRows;
            }).join('');
            offsetReviewTableWrap.innerHTML = `
                <table>
                    <thead>
                        <tr>
                            <th class="choice-cell">선택</th>
                            <th>상태</th>
                            <th>전표번호</th>
                            <th>반전 후보 정보</th>
                            <th>Hanmac ERP 연결</th>
                            <th>ERP 관리항목</th>
                            <th>판단</th>
                        </tr>
                    </thead>
                    <tbody>${rows}</tbody>
                </table>
            `;
        };

        const loadOffsetReviewGroups = async () => {
            if (!offsetReviewTableWrap) return;
            offsetReviewTableWrap.innerHTML = '<div class="table-placeholder">상계 취소 후보를 불러오는 중입니다.</div>';
            if (offsetReviewMeta) offsetReviewMeta.textContent = '현재 projection의 Recheck와 반전 후보를 비교하고 있습니다.';
            const params = appendSelectedYearRange(new URLSearchParams());
            const response = await fetch(`/wehago-compare/api/offset-candidates?${params.toString()}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
            });
            const payload = await response.json();
            if (!response.ok) {
                throw new Error(payload.error || '상계 후보를 불러오지 못했습니다.');
            }
            renderOffsetReviewGroups(payload);
        };

        offsetReviewTableWrap?.addEventListener('change', (event) => {
            const checkbox = event.target.closest('input[data-offset-choice]');
            if (!checkbox) return;
            const key = checkbox.dataset.offsetChoice || '';
            const [sourceIndexText, partnerIndexText] = key.split(':');
            const sourceIndex = Number(sourceIndexText);
            const partnerIndex = Number(partnerIndexText);
            const group = offsetReviewGroups[sourceIndex];
            const partner = group?.partners?.[partnerIndex];
            if (!group || !partner) return;
            if (checkbox.checked) {
                offsetReviewTableWrap.querySelectorAll(`input[data-offset-source="${sourceIndex}"]`).forEach((other) => {
                    if (other !== checkbox) {
                        other.checked = false;
                        offsetReviewSelections.delete(other.dataset.offsetChoice || '');
                    }
                });
                for (const [selectedKey, selectedPair] of offsetReviewSelections.entries()) {
                    if (selectedPair.partner_identity !== partner.identity) continue;
                    const selectedCheckbox = offsetReviewTableWrap.querySelector(`input[data-offset-choice="${selectedKey}"]`);
                    if (selectedCheckbox) selectedCheckbox.checked = false;
                    offsetReviewSelections.delete(selectedKey);
                }
                offsetReviewSelections.set(key, {
                    source_identity: group.source.identity,
                    partner_identity: partner.identity,
                });
            } else {
                offsetReviewSelections.delete(key);
            }
            updateOffsetMoveState();
        });

        offsetReviewOpenBtn?.addEventListener('click', async () => {
            setOffsetReviewModalOpen(true);
            try {
                await loadOffsetReviewGroups();
            } catch (error) {
                if (offsetReviewTableWrap) {
                    offsetReviewTableWrap.innerHTML = '<div class="table-placeholder">후보 조회에 실패했습니다.</div>';
                }
                if (offsetReviewMeta) offsetReviewMeta.textContent = error.message;
            }
        });

        offsetReviewCloseBtn?.addEventListener('click', () => setOffsetReviewModalOpen(false));
        offsetReviewModal?.addEventListener('click', (event) => {
            if (event.target === offsetReviewModal) setOffsetReviewModalOpen(false);
        });
        offsetReviewMoveBtn?.addEventListener('click', async () => {
            if (!offsetReviewSelections.size) {
                alert('Excepted로 이동할 상계쌍을 선택해주세요.');
                return;
            }
            const confirmed = window.confirm(`선택한 ${offsetReviewSelections.size.toLocaleString()}개 상계쌍의 양 전표를 Excepted로 이동할까요?`);
            if (!confirmed) return;
            offsetReviewMoveBtn.disabled = true;
            offsetReviewMoveBtn.textContent = '이동 중...';
            try {
                const response = await fetch('/wehago-compare/api/offset-except-save', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ ...selectedYearRangePayload(), pairs: Array.from(offsetReviewSelections.values()) }),
                });
                const payload = await response.json();
                if (!response.ok) {
                    throw new Error(payload.error || '상계 전표 이동 중 오류가 발생했습니다.');
                }
                alert(`Excepted 이동 완료: ${Number(payload.saved_count || 0).toLocaleString()}개 상계쌍`);
                window.location.reload();
            } catch (error) {
                alert(error.message);
                updateOffsetMoveState();
            }
        });

        const renderVoucherGroups = (container, payload, append = false, statusKey = '') => {
            if (!container) return;
            const groups = payload.groups || [];
            const includeReviewCheckbox = statusKey === 'voucher_recheck';
            const pendingPlaceholder = String(payload?.notice || '').trim() || '조건에 맞는 항목이 없습니다.';
            if (includeReviewCheckbox && !append) {
                voucherRecheckSelections.clear();
                voucherRecheckSplitSelections.clear();
                voucherRecheckRowStore.clear();
            }
            const buildVoucherRecheckGroupKey = (group, fallbackIndex = 0) => {
                const summary = group?.summary || {};
                return [
                    summary.fiscal_year || '',
                    summary.voucher_no || '',
                    summary.draft_no || '',
                    summary.ledger_date || '',
                    summary.proof_date || '',
                    fallbackIndex,
                ].join('|');
            };
            const buildVoucherRecheckRowKey = (row, groupKey = '', rowIndex = 0) => {
                const reviewKey = String(row?.review_key || '').trim();
                if (reviewKey) return reviewKey;
                return [
                    groupKey,
                    rowIndex,
                    row?.ledger_row_key || '',
                    row?.voucher_row_key || '',
                    row?.ledger_account_name || '',
                    row?.voucher_account_name || '',
                    row?.ledger_desc || '',
                    row?.voucher_desc || '',
                ].join('|');
            };
            const bindVoucherRecheckCheckboxes = () => {
                if (!includeReviewCheckbox) return;
                container.querySelectorAll('input[data-voucher-recheck-row]').forEach((checkbox) => {
                    if (checkbox.dataset.bound === 'y') return;
                    checkbox.dataset.bound = 'y';
                    checkbox.addEventListener('change', () => {
                        const key = checkbox.dataset.voucherRecheckRow || '';
                        if (!key) return;
                        voucherRecheckSelections.set(key, checkbox.checked);
                        if (checkbox.checked) {
                            voucherRecheckSplitSelections.set(key, false);
                            const splitBox = container.querySelector(`input[data-voucher-recheck-split="${escapeSelectorValue(key)}"]`);
                            if (splitBox) splitBox.checked = false;
                        }
                    });
                });
                container.querySelectorAll('input[data-voucher-recheck-split]').forEach((checkbox) => {
                    if (checkbox.dataset.bound === 'y') return;
                    checkbox.dataset.bound = 'y';
                    checkbox.addEventListener('change', () => {
                        const key = checkbox.dataset.voucherRecheckSplit || '';
                        if (!key) return;
                        voucherRecheckSplitSelections.set(key, checkbox.checked);
                        if (checkbox.checked) {
                            voucherRecheckSelections.set(key, false);
                            const matchBox = container.querySelector(`input[data-voucher-recheck-row="${escapeSelectorValue(key)}"]`);
                            if (matchBox) matchBox.checked = false;
                        }
                    });
                });
            };
            const lineColumns = [
                ['fiscal_year', '연도'],
                ['ledger_date', 'WEHAGO 일자'],
                ['voucher_no', '전표번호'],
                ['draft_no', '가전표번호'],
                ['ledger_account_name', 'WEHAGO 계정'],
                ['voucher_account_name', 'ERP 계정'],
                ['ledger_vendor', 'WEHAGO 거래처'],
                ['voucher_vendor', 'ERP 거래처'],
                ['ledger_debit', 'WEHAGO 차변'],
                ['ledger_credit', 'WEHAGO 대변'],
                ['voucher_debit', 'ERP 차변'],
                ['voucher_credit', 'ERP 대변'],
                ['ledger_desc', 'WEHAGO 적요'],
                ['voucher_desc', 'ERP 적요'],
            ];
            const stripAccountCodePrefix = (value) => {
                const text = String(value ?? '');
                return text
                    .split(',')
                    .map((part) => part.trim().replace(/^\d+\s+/, ''))
                    .join(', ');
            };
            const formatValue = (field, raw) => {
                if (field === 'fiscal_year') return String(raw ?? '');
                if (['ledger_account_name', 'voucher_account_name', 'ledger_accounts', 'voucher_accounts'].includes(field)) {
                    return stripAccountCodePrefix(raw);
                }
                if (typeof raw === 'number') {
                    return Number.isInteger(raw)
                        ? raw.toLocaleString()
                        : raw.toLocaleString(undefined, { maximumFractionDigits: 2 });
                }
                return String(raw ?? '');
            };
            if (!groups.length) {
                const fallbackRows = Array.isArray(payload.rows) ? payload.rows : [];
                if (!fallbackRows.length && !append) {
                    container.innerHTML = `<div class="table-placeholder">${escapeHtml(pendingPlaceholder)}</div>`;
                    return;
                }
                const lineHead = [
                    includeReviewCheckbox ? '<th class="selection-col">매칭</th><th class="selection-col">분리</th>' : '',
                    ...lineColumns.map(([field, label]) => `<th class="${getColumnClass(field)}">${escapeHtml(label)}</th>`),
                ].join('');
                const fallbackBody = fallbackRows.map((row, summaryIndex) => {
                    const groupKey = `${row.fiscal_year || ''}|${row.voucher_no || ''}|${row.draft_no || ''}|${row.ledger_date || ''}|${row.proof_date || ''}|${summaryIndex}`;
                    const cells = lineColumns.map(([field]) => {
                        const display = formatValue(field, row[field]);
                        return `<td class="${getColumnClass(field)}" title="${escapeHtml(display)}"><span class="${getCellClass(field, ['voucher_no'])}">${escapeHtml(display)}</span></td>`;
                    }).join('');
                    let checkboxCell = '';
                    if (includeReviewCheckbox) {
                        const rowKey = buildVoucherRecheckRowKey(row, groupKey, summaryIndex);
                        voucherRecheckRowStore.set(rowKey, { ...row, _recheck_group_key: groupKey, _recheck_group_rows: [row] });
                        checkboxCell = `<td class="selection-col"><input type="checkbox" data-voucher-recheck-row="${escapeHtml(rowKey)}" ${voucherRecheckSelections.get(rowKey) ? 'checked' : ''}></td><td class="selection-col"><input type="checkbox" data-voucher-recheck-split="${escapeHtml(rowKey)}" ${voucherRecheckSplitSelections.get(rowKey) ? 'checked' : ''}></td>`;
                    }
                    return `<tr>${checkboxCell}${cells}</tr>`;
                }).join('');
                const fallbackTable = `
                    <table>
                        <thead><tr>${lineHead}</tr></thead>
                        <tbody>${fallbackBody}</tbody>
                    </table>
                `;
                if (!append || !container.querySelector('.voucher-group-lines')) {
                    container.innerHTML = `<div class="voucher-group-lines">${fallbackTable}</div>`;
                } else {
                    const tbody = container.querySelector('.voucher-group-lines tbody');
                    if (tbody) {
                        tbody.insertAdjacentHTML('beforeend', fallbackBody);
                    } else {
                        container.innerHTML = `<div class="voucher-group-lines">${fallbackTable}</div>`;
                    }
                }
                bindVoucherRecheckCheckboxes();
                return;
            }
            const lineHead = [
                includeReviewCheckbox ? '<th class="selection-col">매칭</th><th class="selection-col">분리</th>' : '',
                ...lineColumns.map(([field, label]) => `<th class="${getColumnClass(field)}">${escapeHtml(label)}</th>`),
            ].join('');
            const lineBody = groups.map((group, groupIndex) => {
                const rows = Array.isArray(group.rows) ? group.rows : [];
                const groupKey = buildVoucherRecheckGroupKey(group, groupIndex);
                return rows.map((row, rowIndex) => {
                    const rowClasses = [];
                    if (rowIndex === 0) {
                        rowClasses.push('voucher-table-group-start');
                    }
                    if (row.matched_case === 'boundary_excluded' || row.boundary_excluded === '1') {
                        rowClasses.push('boundary-excluded-row');
                    } else if (row.matched_case === 'bank_payable' || row.review_reason === 'BANK_PAYABLE_MATCH') {
                        rowClasses.push('bank-payable-case');
                    }
                    const cells = lineColumns.map(([field]) => {
                        const display = formatValue(field, row[field]);
                        return `<td class="${getColumnClass(field)}" title="${escapeHtml(display)}"><span class="${getCellClass(field, ['voucher_no'])}">${escapeHtml(display)}</span></td>`;
                    }).join('');
                    let checkboxCell = '';
                    if (includeReviewCheckbox) {
                        const rowKey = buildVoucherRecheckRowKey(row, groupKey, rowIndex);
                        voucherRecheckRowStore.set(rowKey, { ...row, _recheck_group_key: groupKey, _recheck_group_summary: group.summary || {}, _recheck_group_rows: rows });
                        checkboxCell = `<td class="selection-col"><input type="checkbox" data-voucher-recheck-row="${escapeHtml(rowKey)}" ${voucherRecheckSelections.get(rowKey) ? 'checked' : ''}></td><td class="selection-col"><input type="checkbox" data-voucher-recheck-split="${escapeHtml(rowKey)}" ${voucherRecheckSplitSelections.get(rowKey) ? 'checked' : ''}></td>`;
                    }
                    return `<tr class="${rowClasses.join(' ')}">${checkboxCell}${cells}</tr>`;
                }).join('');
            }).join('');
            const tableHtml = `
                <table>
                    <thead><tr>${lineHead}</tr></thead>
                    <tbody>${lineBody}</tbody>
                </table>
            `;
            if (!append || !container.querySelector('.voucher-group-lines')) {
                container.innerHTML = `<div class="voucher-group-lines">${tableHtml}</div>`;
            } else {
                const tbody = container.querySelector('.voucher-group-lines tbody');
                const temp = document.createElement('tbody');
                temp.innerHTML = lineBody;
                if (tbody) {
                    tbody.insertAdjacentHTML('beforeend', temp.innerHTML);
                } else {
                    container.innerHTML = `<div class="voucher-group-lines">${tableHtml}</div>`;
                }
            }
            bindVoucherRecheckCheckboxes();
        };

        const renderTable = (container, payload, monoFields = [], append = false, statusKey = '') => {
            if (!container) {
                return;
            }
            if (statusKey === 'voucher_matched' || statusKey === 'voucher_unmatched' || statusKey === 'voucher_recheck' || statusKey === 'voucher_excepted' || statusKey === 'hanmac_unconnected' || statusKey === 'erp_voucher_matched' || statusKey === 'erp_voucher_unmatched') {
                renderVoucherGroups(container, payload, append, statusKey);
                return;
            }
            const columns = payload.columns || [];
            const rows = payload.rows || [];
            if (!rows.length && !append) {
                container.innerHTML = `<div class="table-placeholder">${escapeHtml(String(payload?.notice || '').trim() || '조건에 맞는 항목이 없습니다.')}</div>`;
                return;
            }
            const includeReviewCheckbox = statusKey === 'amount_mismatch';
            const includePairCheckbox = statusKey === 'ledger_only' || statusKey === 'voucher_only';
            const head = [
                (includeReviewCheckbox || includePairCheckbox) ? '<th></th>' : '',
                ...columns.map(([field, label]) => `<th class="${getColumnClass(field)}">${escapeHtml(label)}</th>`),
            ].join('');
            const body = rows.map((row) => {
                const reviewKey = row.review_key || '';
                if (includeReviewCheckbox && reviewKey) {
                    recheckRowStore.set(reviewKey, row);
                }
                const pairKey = statusKey === 'ledger_only'
                    ? (row.ledger_row_key || '')
                    : statusKey === 'voucher_only'
                        ? (row.voucher_row_key || '')
                        : '';
                if (includePairCheckbox && pairKey) {
                    if (statusKey === 'ledger_only') {
                        pairLedgerStore.set(pairKey, row);
                    } else {
                        pairVoucherStore.set(pairKey, row);
                    }
                }
                const cells = columns.map(([field]) => {
                    const raw = row[field] ?? '';
                    let display = '';
                    if (field === 'fiscal_year') {
                        display = String(raw ?? '');
                    } else if (typeof raw === 'number') {
                        display = Number.isInteger(raw)
                            ? raw.toLocaleString()
                            : raw.toLocaleString(undefined, { maximumFractionDigits: 2 });
                    } else {
                        display = String(raw);
                    }
                    const className = getCellClass(field, monoFields);
                    return `<td class="${getColumnClass(field)}" title="${escapeHtml(display)}"><span class="${className}">${escapeHtml(display)}</span></td>`;
                }).join('');
                    const checkboxCell = includeReviewCheckbox
                        ? `<td><input type="checkbox" data-review-key="${escapeHtml(reviewKey)}" ${recheckSelections.get(reviewKey) ? 'checked' : ''}></td>`
                        : includePairCheckbox
                            ? `<td><input type="checkbox" data-pair-key="${escapeHtml(pairKey)}" data-pair-status="${escapeHtml(statusKey)}" ${pairSelections.get(pairKey) ? 'checked' : ''}></td>`
                            : '';
                    const rowClasses = [];
                    if (row.matched_case === 'bank_payable' || row.review_reason === 'BANK_PAYABLE_MATCH') {
                        rowClasses.push('bank-payable-case');
                    }
                    if (row.matched_case === 'boundary_excluded' || row.boundary_excluded === '1') {
                        rowClasses.push('boundary-excluded-row');
                    }
                    const rowClass = rowClasses.length ? ` class="${rowClasses.join(' ')}"` : '';
                    return `<tr${rowClass}>${checkboxCell}${cells}</tr>`;
                }).join('');
            if (!append || !container.querySelector('table')) {
                container.innerHTML = `<table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
            } else {
                const tbody = container.querySelector('tbody');
                if (tbody && body) {
                    tbody.insertAdjacentHTML('beforeend', body);
                }
            }
            if (includeReviewCheckbox) {
                container.querySelectorAll('input[data-review-key]').forEach((checkbox) => {
                    checkbox.addEventListener('change', () => {
                        const key = checkbox.dataset.reviewKey || '';
                        if (!key) return;
                        recheckSelections.set(key, checkbox.checked);
                    });
                });
            }
            if (includePairCheckbox) {
                container.querySelectorAll('input[data-pair-key]').forEach((checkbox) => {
                    checkbox.addEventListener('change', () => {
                        const key = checkbox.dataset.pairKey || '';
                        if (!key) return;
                        pairSelections.set(key, checkbox.checked);
                    });
                });
            }
        };

        const setMeta = (key, totalCount, shownCount, notice = '', stats = {}) => {
            const target = document.querySelector(`[data-result-meta="${key}"]`);
            if (target) {
                const countText = `조회 결과 ${Number(totalCount || 0).toLocaleString()}건`;
                const shownText = shownCount
                    ? ` / 현재 ${Number(shownCount || 0).toLocaleString()}건`
                    : '';
                const readyYears = Array.isArray(stats.ready_years) ? stats.ready_years : [];
                const pendingYears = Array.isArray(stats.pending_years) ? stats.pending_years : [];
                const readyText = readyYears.length
                    ? ` / 준비 연도 ${readyYears.join(', ')}`
                    : '';
                const pendingText = pendingYears.length
                    ? ` / 갱신 중 ${pendingYears.join(', ')}`
                    : '';
                const noticeText = notice ? ` / ${notice}` : '';
                const bankPayableCount = Number(stats.bank_payable_case_count || 0);
                const bankPayableText = key === 'matched' && bankPayableCount
                    ? ` <button type="button" class="case-stat" data-case-filter="bank_payable">보통예금/미지급금 case : ${bankPayableCount.toLocaleString()}</button>`
                    : '';
                const boundaryCount = Number(stats.boundary_excluded_count || 0);
                const boundaryText = key === 'ledger_only' && boundaryCount
                    ? ` <button type="button" class="case-stat" data-case-filter="boundary_excluded">연초/연말 대체·이월 : ${boundaryCount.toLocaleString()}</button>`
                    : '';
                target.innerHTML = `${escapeHtml(`${countText}${shownText}${readyText}${pendingText}${noticeText}`)}${bankPayableText}${boundaryText}`;
            }
        };

        const fetchJson = async (url, options = {}) => {
            const timeoutMs = Number(options.timeoutMs || 30000);
            const controller = options.signal ? null : new AbortController();
            let timeoutId = null;
            if (controller && timeoutMs > 0) {
                timeoutId = window.setTimeout(() => controller.abort(), timeoutMs);
            }
            try {
                const response = await fetch(url, {
                    cache: 'no-store',
                    headers: {
                        'Cache-Control': 'no-cache',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    signal: options.signal || controller?.signal,
                });
                const payload = await response.json();
                if (!response.ok) {
                    throw new Error(payload.error || '조회 중 오류가 발생했습니다.');
                }
                return payload;
            } finally {
                if (timeoutId) window.clearTimeout(timeoutId);
            }
        };

        const loadBridgeReviewSettings = async () => {
            try {
                const payload = await fetchJson('/wehago-compare/api/bridge-review-settings');
                return { ...defaultBridgeReviewSettings, ...(payload && typeof payload === 'object' ? payload : {}) };
            } catch (_error) {
                return { ...defaultBridgeReviewSettings };
            }
        };

        const getBridgeReviewSettingsFromForm = () => {
            if (!bridgeReviewSettingsForm) return { ...defaultBridgeReviewSettings };
            const formData = new FormData(bridgeReviewSettingsForm);
            return {
                enable_promotion: formData.get('enable_promotion') === 'on',
                require_exact_amount: formData.get('require_exact_amount') === 'on',
                require_expense_nature: formData.get('require_expense_nature') === 'on',
                require_strong_text: formData.get('require_strong_text') === 'on',
                ambiguous_handling: String(formData.get('ambiguous_handling') || defaultBridgeReviewSettings.ambiguous_handling),
                preview_limit: Math.max(20, Math.min(500, Number(formData.get('preview_limit') || defaultBridgeReviewSettings.preview_limit))),
            };
        };

        const applyBridgeReviewSettingsToForm = (settings) => {
            if (!bridgeReviewSettingsForm) return;
            const merged = { ...defaultBridgeReviewSettings, ...(settings || {}) };
            const assignCheckbox = (name, checked) => {
                const input = bridgeReviewSettingsForm.querySelector(`input[name="${name}"]`);
                if (input) input.checked = Boolean(checked);
            };
            const assignValue = (name, value) => {
                const input = bridgeReviewSettingsForm.querySelector(`[name="${name}"]`);
                if (input) input.value = String(value ?? '');
            };
            assignCheckbox('enable_promotion', merged.enable_promotion);
            assignCheckbox('require_exact_amount', merged.require_exact_amount);
            assignCheckbox('require_expense_nature', merged.require_expense_nature);
            assignCheckbox('require_strong_text', merged.require_strong_text);
            assignValue('ambiguous_handling', merged.ambiguous_handling);
            assignValue('preview_limit', merged.preview_limit);
        };

        const updateBridgeReviewSettingsMeta = (settings) => {
            if (!bridgeReviewSettingsMeta) return;
            const merged = { ...defaultBridgeReviewSettings, ...(settings || {}) };
            const promotionText = merged.enable_promotion ? 'WEHAGO 반영 후보 사용' : 'WEHAGO 자동 반영 후보 미사용';
            const handlingText = merged.ambiguous_handling === 'recheck' ? '복수 후보는 WEHAGO Recheck' : '복수 후보는 2단계 비교에만 유지';
            bridgeReviewSettingsMeta.textContent = `${promotionText} / ${handlingText}`;
        };

        const refreshBridgeAffectedPanels = async () => {
            const refreshStatuses = ['voucher_matched', 'voucher_recheck'];
            for (const statusKey of refreshStatuses) {
                const panel = document.getElementById(`detail-${statusKey}`);
                if (!panel || !panel.classList.contains('active')) continue;
                const state = detailState.get(statusKey);
                const form = state?.form || panel.querySelector('form[data-filter-kind="status"]');
                await loadStatusRows(statusKey, form, false);
            }
        };

        const saveBridgeReviewSettings = async () => {
            const settings = getBridgeReviewSettingsFromForm();
            const response = await fetch('/wehago-compare/api/bridge-review-settings', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(settings),
            });
            const payload = await response.json();
            if (!response.ok) {
                throw new Error(payload.error || '2단계 비교 설정 저장 중 오류가 발생했습니다.');
            }
            const saved = { ...defaultBridgeReviewSettings, ...((payload && payload.settings) || {}) };
            applyBridgeReviewSettingsToForm(saved);
            updateBridgeReviewSettingsMeta(saved);
            if (bridgeReviewPreviewMeta) {
                bridgeReviewPreviewMeta.textContent = '설정을 저장했습니다. 미리보기를 다시 불러오면 같은 기준으로 검토할 수 있습니다.';
            }
            return saved;
        };

        const setBridgeReviewModalOpen = async (open) => {
            if (!bridgeReviewModal) return;
            bridgeReviewModal.classList.toggle('active', open);
            bridgeReviewModal.setAttribute('aria-hidden', open ? 'false' : 'true');
            if (open) {
                const settings = await loadBridgeReviewSettings();
                applyBridgeReviewSettingsToForm(settings);
                updateBridgeReviewSettingsMeta(settings);
            }
        };

        const loadBridgeReviewPreview = async () => {
            if (!bridgeReviewPreviewWrap) return;
            const settings = getBridgeReviewSettingsFromForm();
            if (bridgeReviewPreviewMeta) {
                bridgeReviewPreviewMeta.textContent = '2단계 비교 후보를 불러오는 중입니다...';
            }
            bridgeReviewPreviewWrap.innerHTML = '<div class="table-placeholder">2단계 비교 후보를 불러오는 중입니다...</div>';
            try {
                const params = appendSelectedYearRange(new URLSearchParams());
                params.set('status', 'bridge_expense_review');
                params.set('limit', String(settings.preview_limit || defaultBridgeReviewSettings.preview_limit));
                params.set('offset', '0');
                const payload = await fetchJson(`/wehago-compare/api/status-rows?${params.toString()}`);
                renderTable(bridgeReviewPreviewWrap, payload, ['voucher_no'], false, 'bridge_expense_review');
                if (bridgeReviewPreviewMeta) {
                    bridgeReviewPreviewMeta.textContent = `후보 ${Number(payload.total_count || 0).toLocaleString()}건 / 현재 ${Number(payload.shown_count || 0).toLocaleString()}건`;
                }
            } catch (error) {
                bridgeReviewPreviewWrap.innerHTML = `<div class="table-placeholder">${escapeHtml(error.message)}</div>`;
                if (bridgeReviewPreviewMeta) {
                    bridgeReviewPreviewMeta.textContent = '후보를 불러오지 못했습니다.';
                }
            }
        };

        const stateLabelMap = {
            ready: '준비됨',
            queued: '대기중',
            running: '생성중',
            stale: '구버전',
            failed: '실패',
            missing: '없음',
        };

        const applySummaryPayload = (payload) => {
            const sections = Array.isArray(payload?.metric_sections) ? payload.metric_sections : [];
            sections.forEach((section) => {
                const card = document.querySelector(`.status-card[data-status="${escapeSelectorValue(section.key || '')}"]`);
                const valueNode = card?.querySelector('.status-value');
                if (valueNode) {
                    valueNode.textContent = Number(section.count || 0).toLocaleString();
                }
            });
            const lastAction = payload?.last_action;
            if (lastActionMeta) {
                if (lastAction && lastAction.id) {
                    lastActionMeta.textContent = `최근 작업: ${lastAction.action_type} / ${Number(lastAction.count || 0).toLocaleString()}건`;
                } else {
                    lastActionMeta.textContent = '최근 작업: 없음';
                }
            }
            if (undoLastActionBtn) {
                undoLastActionBtn.disabled = !(lastAction && lastAction.id);
            }
            const pending = Boolean(payload?.pending);
            summaryRefreshState.pending = pending;
            if (summaryRefreshState.timerId) {
                clearTimeout(summaryRefreshState.timerId);
                summaryRefreshState.timerId = null;
            }
            if (pending) {
                summaryRefreshState.timerId = window.setTimeout(() => {
                    loadDashboardSummary();
                }, 4000);
            }
        };

        const renderSnapshotStatus = (payload) => {
            const snapshotPolicyText = document.getElementById('snapshotPolicyText');
            const snapshotSummaryMeta = document.getElementById('snapshotSummaryMeta');
            const snapshotSummaryBadges = document.getElementById('snapshotSummaryBadges');
            const snapshotYears = document.getElementById('snapshotYears');
            const snapshotJobs = document.getElementById('snapshotJobs');
            if (!snapshotPolicyText || !snapshotSummaryMeta || !snapshotSummaryBadges || !snapshotYears || !snapshotJobs) {
                return;
            }
            const aggregate = payload?.aggregate || payload?.snapshot_aggregate || {};
            const policy = payload?.snapshot_policy || {};
            const years = Array.isArray(payload?.years || payload?.snapshot_years) ? (payload.years || payload.snapshot_years) : [];
            const recentJobs = Array.isArray(payload?.recent_jobs) ? payload.recent_jobs : [];
            const modeSummary = Array.isArray(policy.year_modes)
                ? policy.year_modes.map((item) => `${item.year}:${item.mode}`).join(', ')
                : '';
            snapshotPolicyText.textContent = `백필 시작 ${policy.backfill_hint_start_year || '-'} / 운영 연도 ${policy.rolling_update_start_year || '-'}+ / 월별 반영 기준 익월 ${policy.monthly_expected_ready_day || '-'}일 이후`;
            snapshotSummaryMeta.textContent = modeSummary || '연도별 스냅샷 정책 정보가 없습니다.';
            const badgeOrder = ['ready', 'queued', 'running', 'stale', 'failed', 'missing'];
            snapshotSummaryBadges.innerHTML = badgeOrder.map((key) => {
                const label = stateLabelMap[key] || key;
                const value = Number(aggregate[key] || 0).toLocaleString();
                return `<span class="snapshot-badge"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></span>`;
            }).join('');
            snapshotYears.innerHTML = years.length
                ? years.map((item) => {
                    const stateKey = String(item.state || 'missing');
                    const counts = item.row_counts || {};
                    const summaryBits = [
                        `M ${Number(counts.matched || 0).toLocaleString()}`,
                        `U ${Number(counts.ledger_only || 0).toLocaleString()}`,
                        `R ${Number(counts.amount_mismatch || 0).toLocaleString()}`,
                        `E ${Number(counts.voucher_only || 0).toLocaleString()}`,
                    ].join(' / ');
                    const metaBits = [
                        item.mode ? `mode ${item.mode}` : '',
                        item.last_built_at ? `built ${item.last_built_at}` : '',
                        item.last_requested_at ? `req ${item.last_requested_at}` : '',
                        item.cache_state ? `cache ${item.cache_state}` : '',
                    ].filter(Boolean).join(' / ');
                    return `
                        <article class="snapshot-year-card">
                            <div class="snapshot-year-head">
                                <strong>${escapeHtml(item.fiscal_year)}</strong>
                                <span class="snapshot-state-pill ${escapeHtml(stateKey)}">${escapeHtml(stateLabelMap[stateKey] || stateKey)}</span>
                            </div>
                            <div class="snapshot-year-meta">${escapeHtml(summaryBits)}</div>
                            <div class="snapshot-year-meta">${escapeHtml(metaBits)}</div>
                            ${item.error_message ? `<div class="snapshot-year-meta" style="color:#b91c1c;">${escapeHtml(item.error_message)}</div>` : ''}
                        </article>
                    `;
                }).join('')
                : '<div class="panel-meta">표시할 연도 상태가 없습니다.</div>';
            snapshotJobs.innerHTML = recentJobs.length
                ? recentJobs.slice(0, 8).map((job) => {
                    const bits = [];
                    if (job.job_type === 'year_snapshot_rebuild' && job.payload?.fiscal_year) {
                        bits.push(`연도 ${job.payload.fiscal_year}`);
                    }
                    if (job.job_type === 'metric_counts_rebuild') {
                        bits.push(`범위 ${job.payload?.start_year ?? '-'}~${job.payload?.end_year ?? '-'}`);
                    }
                    bits.push(`우선순위 ${job.priority ?? 0}`);
                    return `
                        <div class="snapshot-job-row">
                            <div class="snapshot-job-head">
                                <strong>${escapeHtml(job.job_type)}</strong>
                                <span class="snapshot-state-pill ${escapeHtml(job.state || 'missing')}">${escapeHtml(stateLabelMap[job.state] || job.state || '')}</span>
                            </div>
                            <div class="snapshot-job-meta">${escapeHtml(bits.join(' / '))}</div>
                            <div class="snapshot-job-meta">${escapeHtml([job.created_at, job.started_at, job.finished_at].filter(Boolean).join(' / '))}</div>
                            ${job.error_message ? `<div class="snapshot-job-meta" style="color:#b91c1c;">${escapeHtml(job.error_message)}</div>` : ''}
                        </div>
                    `;
                }).join('')
                : '<div class="panel-meta">최근 재생성 이력이 없습니다.</div>';
        };

        const loadDashboardSummary = async () => {
            const params = appendSelectedYearRange(new URLSearchParams());
            try {
                const payload = await fetchJson(`/wehago-compare/api/summary?${params.toString()}`);
                applySummaryPayload(payload);
                if (snapshotStatusLoaded && !snapshotPanel?.hidden) {
                    renderSnapshotStatus(payload?.snapshot_status_payload || null);
                }
            } catch (_error) {
                // Keep the page usable even if the summary loads later or fails once.
            }
        };

        const loadSnapshotStatus = async (force = false) => {
            const params = appendSelectedYearRange(new URLSearchParams());
            if (force) params.set('force', '1');
            try {
                const payload = await fetchJson(`/wehago-compare/api/snapshot-status?${params.toString()}`);
                renderSnapshotStatus(payload);
                snapshotStatusLoaded = true;
                return payload;
            } catch (_error) {
                return null;
            }
        };

        const describeSystemJob = (job) => {
            if (!job) return { text: '최근 작업 없음', state: '' };
            const status = String(job.status || '');
            const range = job.start_year && job.end_year ? `${job.start_year}~${job.end_year}` : '';
            const message = job.error_message || job.message || '';
            if (status === 'queued') return { text: `${range} 작업 대기 중`, state: status };
            if (status === 'running') return { text: `${range} 계산 중... ${message}`.trim(), state: status };
            if (status === 'done') return { text: `${range} 계산 완료`, state: status };
            if (status === 'failed') return { text: `${range} 실패: ${message || '오류'}`, state: status };
            return { text: `${range} ${message || status || '작업 상태 확인 전'}`.trim(), state: status };
        };

        const renderSystemJob = (job) => {
            if (!systemJobMeta) return;
            const view = describeSystemJob(job);
            systemJobMeta.textContent = view.text;
            systemJobMeta.dataset.state = view.state || '';
            if (queryCacheRebuildBtn) {
                queryCacheRebuildBtn.disabled = view.state === 'queued' || view.state === 'running';
            }
            if (view.state === 'done') {
                window.setTimeout(() => {
                    loadDashboardSummary();
                }, 400);
            }
        };

        const loadLatestSystemJob = async () => {
            const params = new URLSearchParams({
                page_key: 'wehago_compare',
                job_type: 'wehago_compare_project_range',
            });
            appendSelectedYearRange(params);
            const payload = await fetchJson(`/api/system-jobs/latest?${params.toString()}`, { timeoutMs: 10000 });
            renderSystemJob(payload.job || null);
            return payload.job || null;
        };

        const pollSystemJob = (jobId) => {
            if (!jobId) return;
            if (systemJobPollTimer) window.clearInterval(systemJobPollTimer);
            systemJobPollTimer = window.setInterval(async () => {
                try {
                    const payload = await fetchJson(`/api/system-jobs/${encodeURIComponent(jobId)}`, { timeoutMs: 10000 });
                    const job = payload.job || null;
                    renderSystemJob(job);
                    if (!job || ['done', 'failed', 'cancelled'].includes(String(job.status || ''))) {
                        window.clearInterval(systemJobPollTimer);
                        systemJobPollTimer = null;
                        if (job && job.status === 'done') {
                            window.setTimeout(() => {
                                const result = job.result && typeof job.result === 'object' ? job.result : {};
                                const fallback = getSelectedYearRange();
                                const targetStart = job.start_year || result.start_year || fallback.startYear;
                                const targetEnd = job.end_year || result.end_year || fallback.endYear;
                                if (targetStart && targetEnd) {
                                    navigateToCompareRange(targetStart, targetEnd);
                                } else {
                                    window.location.reload();
                                }
                            }, 600);
                        }
                    }
                } catch (_error) {
                    // Keep polling; transient server/database locks should not freeze the screen.
                }
            }, 2500);
        };

        const requestQueryCacheRebuild = async () => {
            if (!queryCacheRebuildBtn) return;
            queryCacheRebuildBtn.disabled = true;
            if (systemJobMeta) {
                systemJobMeta.textContent = '작업 등록 중...';
                systemJobMeta.dataset.state = 'queued';
            }
            try {
                const response = await fetch('/wehago-compare/api/rebuild-query-cache', {
                    method: 'POST',
                    cache: 'no-store',
                    headers: {
                        'Content-Type': 'application/json',
                        'Cache-Control': 'no-cache',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({
                        ...selectedYearRangePayload(),
                    }),
                });
                const payload = await response.json();
                if (!response.ok || !payload.ok) {
                    throw new Error(payload.error || '작업 등록 중 오류가 발생했습니다.');
                }
                renderSystemJob(payload.job || null);
                pollSystemJob(payload.job?.id);
            } catch (error) {
                if (systemJobMeta) {
                    systemJobMeta.textContent = error.message || '작업 등록 실패';
                    systemJobMeta.dataset.state = 'failed';
                }
                queryCacheRebuildBtn.disabled = false;
            }
        };

        const setSnapshotPanelOpen = async (open) => {
            if (!snapshotPanel || !snapshotToggleBtn) return;
            snapshotPanel.hidden = !open;
            snapshotToggleBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
            snapshotToggleBtn.textContent = open ? '스냅샷 상태 숨기기' : '스냅샷 상태';
            if (open && !snapshotStatusLoaded) {
                await loadSnapshotStatus();
            }
        };

        const buildQuery = (form, extra = {}) => {
            const params = appendSelectedYearRange(new URLSearchParams());
            if (form) {
                const data = new FormData(form);
                for (const [key, value] of data.entries()) {
                    if (String(value).trim()) {
                        params.set(key, String(value).trim());
                    }
                }
            }
            Object.entries(extra).forEach(([key, value]) => {
                if (value) params.set(key, value);
            });
            return params.toString();
        };

        const getStatusForm = (statusKey) => document.querySelector(`form[data-filter-kind="status"][data-status="${statusKey}"]`);
        const suggestState = new Map();
        const recommendPanel = document.getElementById('pairRecommendPanel');
        const recommendPanelTitle = document.getElementById('recommendPanelTitle');
        const recommendModeMeta = document.getElementById('recommendModeMeta');
        const recommendSummary = document.getElementById('recommendSummary');
        const recommendTableWrap = document.getElementById('recommendTableWrap');
        const recommendHighOnly = document.getElementById('recommendHighOnly');
        const recommendHighOnlyWrap = document.getElementById('recommendHighOnlyWrap');
        const recommendApplySelected = document.getElementById('recommendApplySelected');
        const recommendApplyIndividual = document.getElementById('recommendApplyIndividual');
        const recommendClose = document.getElementById('recommendClose');
        const recommendSortTools = document.getElementById('recommendSortTools');
        const recommendSortButtons = Array.from(document.querySelectorAll('[data-recommend-sort]'));
        const snapshotToggleBtn = document.getElementById('snapshotToggleBtn');
        const snapshotPanel = document.getElementById('snapshotPanel');
        const undoLastActionBtn = document.getElementById('undoLastActionBtn');
        const lastActionMeta = document.getElementById('lastActionMeta');
        const snapshotRebuildBtn = document.getElementById('snapshotRebuildBtn');
        const bridgeReviewOpenBtn = document.getElementById('bridgeReviewOpenBtn');
        const bridgeReviewModal = document.getElementById('bridgeReviewModal');
        const bridgeReviewCloseBtn = document.getElementById('bridgeReviewCloseBtn');
        const bridgeReviewSaveBtn = document.getElementById('bridgeReviewSaveBtn');
        const bridgeReviewLoadBtn = document.getElementById('bridgeReviewLoadBtn');
        const bridgeReviewSettingsForm = document.getElementById('bridgeReviewSettingsForm');
        const bridgeReviewPreviewWrap = document.getElementById('bridgeReviewPreviewWrap');
        const bridgeReviewPreviewMeta = document.getElementById('bridgeReviewPreviewMeta');
        const bridgeReviewSettingsMeta = document.getElementById('bridgeReviewSettingsMeta');
        const recommendSelections = new Map();
        let recommendSortKey = 'score';
        let recommendMode = 'batch';
        let snapshotStatusLoaded = false;
                const defaultBridgeReviewSettings = {
            enable_promotion: false,
            require_exact_amount: true,
            require_expense_nature: true,
            require_strong_text: true,
            ambiguous_handling: 'recheck',
            preview_limit: 100,
        };
        const individualState = {
            sourceStatus: '',
            sourceRow: null,
            sourceRowKey: '',
            rows: [],
            totalCount: 0,
            nextOffset: 0,
            hasMore: false,
            loading: false,
            selectedPairKey: '',
        };

        const syncRecommendationPanelState = () => {
            if (!page || !recommendPanel) return;
            page.classList.toggle('has-recommend-panel-open', recommendPanel.classList.contains('active'));
        };

        const refreshLastActionMeta = async () => {
            if (!lastActionMeta || !undoLastActionBtn) return;
            try {
                const payload = await fetchJson('/wehago-compare/api/last-action');
                const hasAction = Boolean(payload && payload.id);
                undoLastActionBtn.disabled = !hasAction;
                if (!hasAction) {
                    lastActionMeta.textContent = '최근 작업: 없음';
                    return;
                }
                const actionTypeMap = {
                    recheck_save: 'recheck 저장',
                    pair_save: '쌍매칭 저장',
                };
                const actionLabel = actionTypeMap[payload.action_type] || payload.action_type || '작업';
                lastActionMeta.textContent = `최근 작업: ${actionLabel} / ${formatNumber(payload.count || 0)}건`;
            } catch (_error) {
                undoLastActionBtn.disabled = true;
                lastActionMeta.textContent = '최근 작업: 조회 실패';
            }
        };

        const buildPairQuery = (extra = {}) => {
            const ledgerForm = getStatusForm('ledger_only');
            const voucherForm = getStatusForm('voucher_only');
            const params = appendSelectedYearRange(new URLSearchParams());
            if (ledgerForm) {
                const data = new FormData(ledgerForm);
                params.set('ledger_voucher_no', String(data.get('voucher_no') || '').trim());
                params.set('ledger_review_reason', String(data.get('desc_keyword') || '').trim());
            }
            if (voucherForm) {
                const data = new FormData(voucherForm);
                params.set('voucher_voucher_no', String(data.get('voucher_no') || '').trim());
                params.set('voucher_review_reason', String(data.get('desc_keyword') || '').trim());
            }
            Object.entries(extra).forEach(([key, value]) => {
                if (value !== undefined && value !== null && String(value).trim() !== '') {
                    params.set(key, String(value).trim());
                }
            });
            return params;
        };

        const initStatusSuggest = (form, type) => {
            if (!form) return;
            const status = form.dataset.status || '';
            if (!['matched', 'amount_mismatch', 'ledger_only', 'voucher_only', 'voucher_matched', 'voucher_unmatched', 'voucher_recheck', 'voucher_excepted', 'hanmac_unconnected', 'erp_voucher_matched', 'erp_voucher_unmatched'].includes(status)) return;
            const inputName = type === 'account'
                ? 'account_keyword'
                : type === 'wehago_account'
                    ? 'wehago_account'
                    : type === 'erp_account'
                        ? 'erp_account'
                        : type === 'draft'
                            ? 'draft_no'
                : type === 'vendor'
                    ? 'vendor_keyword'
                    : type === 'wehago_vendor'
                        ? 'wehago_vendor'
                        : type === 'erp_vendor'
                            ? 'erp_vendor'
                    : 'voucher_no';
            const fieldName = type === 'account'
                ? 'account'
                : type === 'wehago_account'
                    ? 'wehago_account'
                    : type === 'erp_account'
                        ? 'erp_account'
                        : type === 'draft'
                            ? 'draft_no'
                : type === 'vendor'
                    ? 'vendor'
                    : type === 'wehago_vendor'
                        ? 'wehago_vendor'
                        : type === 'erp_vendor'
                            ? 'erp_vendor'
                    : 'voucher_no';
            const dropdownSelector = type === 'account'
                ? `[data-account-suggest="${status}"]`
                : type === 'wehago_account'
                    ? `[data-wehago-account-suggest="${status}"]`
                    : type === 'erp_account'
                        ? `[data-erp-account-suggest="${status}"]`
                        : type === 'draft'
                            ? `[data-draft-suggest="${status}"]`
                : type === 'vendor'
                    ? `[data-vendor-suggest="${status}"]`
                    : type === 'wehago_vendor'
                        ? `[data-wehago-vendor-suggest="${status}"]`
                        : type === 'erp_vendor'
                            ? `[data-erp-vendor-suggest="${status}"]`
                    : `[data-voucher-suggest="${status}"]`;
            const input = form.querySelector(`input[name="${inputName}"]`);
            const dropdown = form.querySelector(dropdownSelector);
            if (!input || !dropdown) return;
            const stateKey = `${status}:${type}`;
            suggestState.set(stateKey, { offset: 0, hasMore: false, loading: false, keyword: '' });

            const renderSuggest = (rows, append = false) => {
                if (!append) {
                    dropdown.innerHTML = '';
                }
                if (!rows.length && !append) {
                    dropdown.innerHTML = '<div class="suggest-empty">검색 결과가 없습니다.</div>';
                    dropdown.classList.add('open');
                    return;
                }
                const active = cumulativeFiltersByStatus.get(status) || {};
                const html = rows.map((row) => {
                    const value = type === 'voucher' ? (row.voucher_no || '') : (row.label || '');
                    const checked = String(active[inputName] || '') === String(value || '');
                    return `
                        <label class="suggest-item" title="${escapeHtml(row.label || '')}">
                            <input type="checkbox" data-suggest-check="${escapeHtml(inputName)}" data-suggest-value="${escapeHtml(value)}" ${checked ? 'checked' : ''}>
                            <span class="text">${escapeHtml(row.label || '')}</span>
                        </label>
                    `;
                }).join('');
                if (!append) {
                    dropdown.innerHTML = html;
                } else {
                    dropdown.insertAdjacentHTML('beforeend', html);
                }
                dropdown.classList.add('open');
                dropdown.querySelectorAll('input[type="checkbox"][data-suggest-check]').forEach((checkbox) => {
                    if (checkbox.dataset.bound === 'y') return;
                    checkbox.dataset.bound = 'y';
                    checkbox.addEventListener('change', () => {
                        const value = checkbox.dataset.suggestValue || '';
                        if (checkbox.checked) {
                            dropdown.querySelectorAll(`input[type="checkbox"][data-suggest-check="${escapeSelectorValue(inputName)}"]`).forEach((other) => {
                                if (other !== checkbox) other.checked = false;
                            });
                            input.value = value;
                            updateCumulativeFilter(status, inputName, value, true);
                        } else {
                            if (String(input.value || '').trim() === value) {
                                input.value = '';
                            }
                            updateCumulativeFilter(status, inputName, '', false);
                        }
                    });
                });
            };

            const loadSuggest = async (append = false) => {
                const state = suggestState.get(stateKey) || { offset: 0, hasMore: false, loading: false, keyword: '' };
                if (state.loading) return;
                const keyword = String(input.value || '').trim();
                if (!keyword) {
                    dropdown.classList.remove('open');
                    dropdown.innerHTML = '';
                    suggestState.set(stateKey, { ...state, offset: 0, hasMore: false, keyword: '' });
                    return;
                }
                const nextOffset = append ? (state.offset || 0) : 0;
                suggestState.set(stateKey, { ...state, loading: true, keyword });
                try {
                    const params = appendSelectedYearRange(new URLSearchParams());
                    params.set('status', status);
                    params.set('field', fieldName);
                    params.set('keyword', keyword);
                    params.set('offset', String(nextOffset));
                    params.set('limit', '10');
                    let payload = await fetchJson(`/wehago-compare/api/status-suggestions?${params.toString()}`);
                    let rows = payload.rows || [];
                    if (!append && rows.length === 0) {
                        const fallbackParams = appendSelectedYearRange(new URLSearchParams());
                        fallbackParams.set('status', status);
                        fallbackParams.set('field', fieldName);
                        fallbackParams.set('keyword', '');
                        fallbackParams.set('offset', '0');
                        fallbackParams.set('limit', '10');
                        const fallback = await fetchJson(`/wehago-compare/api/status-suggestions?${fallbackParams.toString()}`);
                        rows = fallback.rows || [];
                        payload = rows.length ? fallback : payload;
                    }
                    renderSuggest(rows, append);
                    suggestState.set(stateKey, {
                        ...state,
                        loading: false,
                        offset: Number(payload.next_offset || 0),
                        hasMore: Boolean(payload.has_more),
                        keyword,
                    });
                } catch (_error) {
                    suggestState.set(stateKey, { ...state, loading: false });
                }
            };

            let debounceTimer = null;
            input.addEventListener('input', () => {
                if (debounceTimer) {
                    window.clearTimeout(debounceTimer);
                }
                debounceTimer = window.setTimeout(() => {
                    loadSuggest(false);
                }, 180);
            });
            input.addEventListener('focus', () => {
                if (String(input.value || '').trim()) {
                    loadSuggest(false);
                }
            });
            dropdown.addEventListener('scroll', () => {
                const state = suggestState.get(stateKey);
                if (!state || !state.hasMore || state.loading) return;
                const remain = dropdown.scrollHeight - dropdown.scrollTop - dropdown.clientHeight;
                if (remain <= 40) {
                    loadSuggest(true);
                }
            });
            document.addEventListener('mousedown', (event) => {
                if (!form.contains(event.target)) {
                    dropdown.classList.remove('open');
                }
            });
        };

        const formatNumber = (value) => {
            const numberValue = Number(value || 0);
            return Number.isInteger(numberValue)
                ? numberValue.toLocaleString()
                : numberValue.toLocaleString(undefined, { maximumFractionDigits: 2 });
        };

        const prettyFilterLabels = {
            voucher_no: '전표번호',
            draft_no: '가전표번호',
            wehago_account: 'WEHAGO 계정',
            erp_account: 'Hanmac 계정',
            wehago_amount: 'WEHAGO 금액',
            erp_amount: 'Hanmac 금액',
            wehago_vendor: 'WEHAGO 거래처',
            erp_vendor: 'Hanmac 거래처',
            account_keyword: '계정',
            vendor_keyword: '거래처',
            amount_keyword: '금액',
            desc_keyword: '적요',
            review_reason: '검증근거',
            boundary_excluded: '연초/연말 대체·이월',
        };

        const getFormFieldValues = (form) => {
            const values = {};
            form.querySelectorAll('input[name]').forEach((input) => {
                const name = input.name;
                if (!name) return;
                const value = String(input.value || '').trim();
                if (!value) return;
                values[name] = value;
            });
            return values;
        };

        const syncFormWithActiveFilters = (statusKey, form) => {
            if (!form) return;
            const active = cumulativeFiltersByStatus.get(statusKey) || {};
            form.querySelectorAll('input[name]').forEach((input) => {
                input.value = active[input.name] || '';
            });
        };

        const updateCumulativeFilter = (statusKey, fieldName, value, checked = true) => {
            const current = { ...(cumulativeFiltersByStatus.get(statusKey) || {}) };
            if (checked && String(value || '').trim()) {
                current[fieldName] = String(value).trim();
            } else {
                delete current[fieldName];
            }
            cumulativeFiltersByStatus.set(statusKey, current);
            renderActiveFilterCards(statusKey);
        };

        const renderActiveFilterCards = (statusKey) => {
            const box = document.querySelector(`[data-active-filters="${statusKey}"]`);
            if (!box) return;
            const active = cumulativeFiltersByStatus.get(statusKey) || {};
            const entries = Object.entries(active).filter(([, value]) => String(value || '').trim() !== '');
            if (!entries.length) {
                box.innerHTML = '';
                return;
            }
            box.innerHTML = entries.map(([name, value]) => `
                <div class="active-filter-card">
                    <div class="value" title="${escapeHtml(`${prettyFilterLabels[name] || name}: ${value}`)}">${escapeHtml(`${prettyFilterLabels[name] || name}: ${value}`)}</div>
                    <button type="button" class="remove" data-remove-active-filter="${escapeHtml(statusKey)}" data-filter-name="${escapeHtml(name)}" aria-label="조건 제거">×</button>
                </div>
            `).join('');
        };

        const getFilteredRecommendations = () => {
            if (!latestPairRecommendation || !Array.isArray(latestPairRecommendation.pairs)) {
                return [];
            }
            const onlyHigh = Boolean(recommendHighOnly?.checked);
            const filtered = latestPairRecommendation.pairs.filter((pair) => !onlyHigh || pair.confidence_level === 'high');
            filtered.sort((a, b) => {
                if (recommendSortKey === 'amount_gap') {
                    const left = Number(a.amount_gap || 0);
                    const right = Number(b.amount_gap || 0);
                    return left - right;
                }
                if (recommendSortKey === 'account_similarity') {
                    const left = Number(a.account_similarity || 0);
                    const right = Number(b.account_similarity || 0);
                    return right - left;
                }
                if (recommendSortKey === 'vendor_similarity') {
                    const left = Number(a.vendor_similarity || 0);
                    const right = Number(b.vendor_similarity || 0);
                    return right - left;
                }
                return Number(b.score || 0) - Number(a.score || 0);
            });
            return filtered;
        };

        const renderRecommendationSummary = (stats = {}) => {
            if (!recommendSummary) {
                return;
            }
            recommendSummary.innerHTML = `
                <span class="recommend-badge">추천 ${formatNumber(stats.recommended || 0)}건</span>
                <span class="recommend-badge good">고신뢰 ${formatNumber(stats.high_confidence || 0)}건</span>
                <span class="recommend-badge">WEHAGO 풀 ${formatNumber(stats.ledger_rows || 0)}건</span>
                <span class="recommend-badge">ERP 풀 ${formatNumber(stats.voucher_rows || 0)}건</span>
            `;
        };

        const renderRecommendationTable = () => {
            if (!recommendTableWrap) {
                return;
            }
            const pairs = getFilteredRecommendations();
            if (!pairs.length) {
                recommendTableWrap.innerHTML = '<div class="table-placeholder">표시할 추천 결과가 없습니다.</div>';
                return;
            }
            const head = `
                <tr>
                    <th><input type="checkbox" id="recommendSelectAll"></th>
                    <th>점수</th>
                    <th>금액차이</th>
                    <th>계정유사도</th>
                    <th>거래처유사도</th>
                    <th>신뢰도</th>
                    <th>검토</th>
                    <th>연도</th>
                    <th>전표번호</th>
                    <th>일자</th>
                    <th>가전표번호</th>
                    <th>WEHAGO 계정</th>
                    <th>ERP 계정</th>
                    <th>WEHAGO 거래처</th>
                    <th>ERP 거래처</th>
                    <th>WEHAGO 금액</th>
                    <th>ERP 금액</th>
                    <th>WEHAGO 적요</th>
                    <th>ERP 적요</th>
                </tr>
            `;
            const body = pairs.map((pair) => {
                const key = pair.pair_key || '';
                const ledger = pair.ledger_row || {};
                const voucher = pair.voucher_row || {};
                const ledgerAmount = Math.max(Number(ledger.ledger_debit || 0), Number(ledger.ledger_credit || 0));
                const voucherAmount = Math.max(Number(voucher.voucher_debit || 0), Number(voucher.voucher_credit || 0));
                if (!recommendSelections.has(key) && pair.auto_eligible) {
                    recommendSelections.set(key, true);
                }
                const checked = recommendSelections.get(key) ? 'checked' : '';
                return `
                    <tr>
                        <td><input type="checkbox" data-recommend-key="${escapeHtml(key)}" ${checked}></td>
                        <td title="${escapeHtml(pair.score)}"><span class="cell-ellipsis cell-tight">${escapeHtml(pair.score)}</span></td>
                        <td title="${escapeHtml(formatNumber(pair.amount_gap || 0))}"><span class="cell-ellipsis cell-tight">${escapeHtml(formatNumber(pair.amount_gap || 0))}</span></td>
                        <td title="${escapeHtml((Number(pair.account_similarity || 0) * 100).toFixed(1) + '%')}"><span class="cell-ellipsis cell-tight">${escapeHtml((Number(pair.account_similarity || 0) * 100).toFixed(1) + '%')}</span></td>
                        <td title="${escapeHtml((Number(pair.vendor_similarity || 0) * 100).toFixed(1) + '%')}"><span class="cell-ellipsis cell-tight">${escapeHtml((Number(pair.vendor_similarity || 0) * 100).toFixed(1) + '%')}</span></td>
                        <td title="${escapeHtml(pair.confidence_level)}"><span class="cell-ellipsis cell-tight">${escapeHtml(pair.confidence_level)}</span></td>
                        <td title="${escapeHtml(pair.substitution_hint || pair.reason || '')}"><span class="cell-ellipsis cell-desc">${escapeHtml(pair.substitution_hint || pair.reason || '')}</span></td>
                        <td title="${escapeHtml(ledger.fiscal_year || voucher.fiscal_year || '')}"><span class="cell-ellipsis cell-tight">${escapeHtml(ledger.fiscal_year || voucher.fiscal_year || '')}</span></td>
                        <td title="${escapeHtml(ledger.voucher_no || '')}"><span class="cell-ellipsis cell-code">${escapeHtml(ledger.voucher_no || '')}</span></td>
                        <td title="${escapeHtml(ledger.ledger_date || '')}"><span class="cell-ellipsis cell-code">${escapeHtml(ledger.ledger_date || '')}</span></td>
                        <td title="${escapeHtml(voucher.draft_no || '')}"><span class="cell-ellipsis cell-code">${escapeHtml(voucher.draft_no || '')}</span></td>
                        <td title="${escapeHtml(ledger.ledger_account_name || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(ledger.ledger_account_name || '')}</span></td>
                        <td title="${escapeHtml(voucher.voucher_account_name || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(voucher.voucher_account_name || '')}</span></td>
                        <td title="${escapeHtml(ledger.ledger_vendor || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(ledger.ledger_vendor || '')}</span></td>
                        <td title="${escapeHtml(voucher.voucher_vendor || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(voucher.voucher_vendor || '')}</span></td>
                        <td title="${escapeHtml(formatNumber(ledgerAmount))}"><span class="cell-ellipsis cell-equal">${escapeHtml(formatNumber(ledgerAmount))}</span></td>
                        <td title="${escapeHtml(formatNumber(voucherAmount))}"><span class="cell-ellipsis cell-equal">${escapeHtml(formatNumber(voucherAmount))}</span></td>
                        <td title="${escapeHtml(ledger.ledger_desc || '')}"><span class="cell-ellipsis cell-desc">${escapeHtml(ledger.ledger_desc || '')}</span></td>
                        <td title="${escapeHtml(voucher.voucher_desc || '')}"><span class="cell-ellipsis cell-desc">${escapeHtml(voucher.voucher_desc || '')}</span></td>
                    </tr>
                `;
            }).join('');
            recommendTableWrap.innerHTML = `<table><thead>${head}</thead><tbody>${body}</tbody></table>`;

            const selectAll = document.getElementById('recommendSelectAll');
            const rowChecks = Array.from(recommendTableWrap.querySelectorAll('input[data-recommend-key]'));
            const syncHeader = () => {
                if (!selectAll) return;
                const checkedCount = rowChecks.filter((el) => el.checked).length;
                selectAll.checked = rowChecks.length > 0 && checkedCount === rowChecks.length;
                selectAll.indeterminate = checkedCount > 0 && checkedCount < rowChecks.length;
            };
            rowChecks.forEach((checkbox) => {
                checkbox.addEventListener('change', () => {
                    const key = checkbox.dataset.recommendKey || '';
                    if (!key) return;
                    recommendSelections.set(key, checkbox.checked);
                    syncHeader();
                });
            });
            if (selectAll) {
                selectAll.addEventListener('change', () => {
                    rowChecks.forEach((checkbox) => {
                        checkbox.checked = selectAll.checked;
                        const key = checkbox.dataset.recommendKey || '';
                        if (key) {
                            recommendSelections.set(key, selectAll.checked);
                        }
                    });
                    syncHeader();
                });
            }
            syncHeader();
        };

        const setRecommendMode = (mode) => {
            recommendMode = mode === 'individual' ? 'individual' : 'batch';
            if (recommendPanelTitle) {
                recommendPanelTitle.textContent = recommendMode === 'individual' ? '개별 추천' : '정확도 추천 워크벤치';
            }
            if (recommendModeMeta && recommendMode === 'batch') {
                recommendModeMeta.textContent = '';
            }
            if (recommendSortTools) {
                recommendSortTools.hidden = recommendMode === 'individual';
            }
            if (recommendHighOnlyWrap) {
                recommendHighOnlyWrap.hidden = recommendMode === 'individual';
            }
            if (recommendApplySelected) {
                recommendApplySelected.hidden = recommendMode === 'individual';
            }
            if (recommendApplyIndividual) {
                recommendApplyIndividual.hidden = recommendMode !== 'individual';
            }
            if (recommendSummary) {
                recommendSummary.style.display = recommendMode === 'individual' ? 'none' : 'flex';
            }
        };

        const openRecommendationPanel = (mode = 'batch') => {
            if (!recommendPanel) return;
            setRecommendMode(mode);
            recommendPanel.classList.add('active');
            syncRecommendationPanelState();
            recommendPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
        };

        const closeRecommendationPanel = () => {
            if (!recommendPanel) return;
            recommendPanel.classList.remove('active');
            syncRecommendationPanelState();
        };

        const getSelectedSourceForIndividual = (sourceStatus) => {
            if (sourceStatus === 'ledger_only') {
                return Array.from(pairSelections.entries())
                    .filter(([key, checked]) => checked && pairLedgerStore.has(key))
                    .map(([key]) => pairLedgerStore.get(key))
                    .filter(Boolean);
            }
            return Array.from(pairSelections.entries())
                .filter(([key, checked]) => checked && pairVoucherStore.has(key))
                .map(([key]) => pairVoucherStore.get(key))
                .filter(Boolean);
        };

        const renderIndividualRows = (append = false) => {
            if (!recommendTableWrap) return;
            const rows = individualState.rows || [];
            if (!rows.length && !append) {
                recommendTableWrap.innerHTML = '<div class="table-placeholder">추천 항목이 없습니다.</div>';
                return;
            }
            const head = `
                <tr>
                    <th></th>
                    <th>점수</th>
                    <th>금액차이</th>
                    <th>계정유사도</th>
                    <th>거래처유사도</th>
                    <th>연도</th>
                    <th>전표번호</th>
                    <th>일자</th>
                    <th>가전표번호</th>
                    <th>WEHAGO 계정</th>
                    <th>ERP 계정</th>
                    <th>WEHAGO 거래처</th>
                    <th>ERP 거래처</th>
                    <th>WEHAGO 적요</th>
                    <th>ERP 적요</th>
                </tr>
            `;
            const body = rows.map((item) => {
                const target = item.target_row || {};
                const isLedgerSource = individualState.sourceStatus === 'ledger_only';
                const ledger = isLedgerSource ? (individualState.sourceRow || {}) : target;
                const voucher = isLedgerSource ? target : (individualState.sourceRow || {});
                const checked = individualState.selectedPairKey === item.pair_key ? 'checked' : '';
                return `
                    <tr>
                        <td><input type="radio" name="individualPairRadio" value="${escapeHtml(item.pair_key || '')}" ${checked}></td>
                        <td title="${escapeHtml(item.score)}"><span class="cell-ellipsis cell-tight">${escapeHtml(item.score)}</span></td>
                        <td title="${escapeHtml(formatNumber(item.amount_gap || 0))}"><span class="cell-ellipsis cell-tight">${escapeHtml(formatNumber(item.amount_gap || 0))}</span></td>
                        <td title="${escapeHtml((Number(item.account_similarity || 0) * 100).toFixed(1) + '%')}"><span class="cell-ellipsis cell-tight">${escapeHtml((Number(item.account_similarity || 0) * 100).toFixed(1) + '%')}</span></td>
                        <td title="${escapeHtml((Number(item.vendor_similarity || 0) * 100).toFixed(1) + '%')}"><span class="cell-ellipsis cell-tight">${escapeHtml((Number(item.vendor_similarity || 0) * 100).toFixed(1) + '%')}</span></td>
                        <td title="${escapeHtml(ledger.fiscal_year || voucher.fiscal_year || '')}"><span class="cell-ellipsis cell-tight">${escapeHtml(ledger.fiscal_year || voucher.fiscal_year || '')}</span></td>
                        <td title="${escapeHtml(ledger.voucher_no || '')}"><span class="cell-ellipsis cell-code">${escapeHtml(ledger.voucher_no || '')}</span></td>
                        <td title="${escapeHtml(ledger.ledger_date || '')}"><span class="cell-ellipsis cell-code">${escapeHtml(ledger.ledger_date || '')}</span></td>
                        <td title="${escapeHtml(voucher.draft_no || '')}"><span class="cell-ellipsis cell-code">${escapeHtml(voucher.draft_no || '')}</span></td>
                        <td title="${escapeHtml(ledger.ledger_account_name || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(ledger.ledger_account_name || '')}</span></td>
                        <td title="${escapeHtml(voucher.voucher_account_name || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(voucher.voucher_account_name || '')}</span></td>
                        <td title="${escapeHtml(ledger.ledger_vendor || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(ledger.ledger_vendor || '')}</span></td>
                        <td title="${escapeHtml(voucher.voucher_vendor || '')}"><span class="cell-ellipsis cell-equal">${escapeHtml(voucher.voucher_vendor || '')}</span></td>
                        <td title="${escapeHtml(ledger.ledger_desc || '')}"><span class="cell-ellipsis cell-desc">${escapeHtml(ledger.ledger_desc || '')}</span></td>
                        <td title="${escapeHtml(voucher.voucher_desc || '')}"><span class="cell-ellipsis cell-desc">${escapeHtml(voucher.voucher_desc || '')}</span></td>
                    </tr>
                `;
            }).join('');
            recommendTableWrap.innerHTML = `<table><thead>${head}</thead><tbody>${body}</tbody></table>`;
            recommendTableWrap.querySelectorAll('input[name="individualPairRadio"]').forEach((radio) => {
                radio.addEventListener('change', () => {
                    individualState.selectedPairKey = radio.value || '';
                });
            });
        };

        const loadIndividualRecommendations = async (append = false) => {
            if (!individualState.sourceStatus || !individualState.sourceRowKey || individualState.loading) return;
            individualState.loading = true;
            if (!append && recommendTableWrap) {
                recommendTableWrap.innerHTML = '<div class="table-placeholder">개별 추천 불러오는 중...</div>';
            }
            try {
                const params = appendSelectedYearRange(new URLSearchParams());
                params.set('source_status', individualState.sourceStatus);
                params.set('source_row_key', individualState.sourceRowKey);
                params.set('offset', append ? String(individualState.nextOffset || 0) : '0');
                params.set('limit', '10');
                const payload = await fetchJson(`/wehago-compare/api/pair-individual-recommendations?${params.toString()}`);
                if (!append) {
                    individualState.rows = payload.rows || [];
                    individualState.sourceRow = payload.source_row || null;
                    individualState.totalCount = Number(payload.total_count || 0);
                } else {
                    individualState.rows = [...(individualState.rows || []), ...(payload.rows || [])];
                }
                individualState.nextOffset = Number(payload.next_offset || 0);
                individualState.hasMore = Boolean(payload.has_more);
                if (recommendModeMeta) {
                    const source = individualState.sourceRow || {};
                    const label = individualState.sourceStatus === 'ledger_only' ? 'Unmatched 기준' : 'ERP Unmatched 기준';
                    recommendModeMeta.textContent = `${label} / 전표번호 ${source.voucher_no || '-'} / 계정 ${source.ledger_account_name || source.voucher_account_name || '-'}`;
                }
                if (!individualState.selectedPairKey && individualState.rows.length) {
                    individualState.selectedPairKey = individualState.rows[0].pair_key || '';
                }
                renderIndividualRows(append);
            } catch (error) {
                if (recommendTableWrap) {
                    recommendTableWrap.innerHTML = `<div class="table-placeholder">${escapeHtml(error.message)}</div>`;
                }
            } finally {
                individualState.loading = false;
            }
        };

        const setLoadMoreState = (statusKey, hasMore, loading = false) => {
            const footer = document.querySelector(`[data-table-footer="${statusKey}"]`);
            const button = document.querySelector(`[data-load-more="${statusKey}"]`);
            if (!footer || !button) return;
            footer.hidden = !hasMore && !loading;
            button.disabled = loading;
            button.textContent = loading ? '불러오는 중...' : '더 보기';
        };

        const buildStatusQuery = (form, statusKey, extra = {}) => {
            const selected = cumulativeFiltersByStatus.get(statusKey) || {};
            const mapped = appendSelectedYearRange(new URLSearchParams());
            mapped.set('status', statusKey);
            const rawVoucher = String(selected.voucher_no || '').trim();
            const rawDesc = String(selected.desc_keyword || '').trim();
            if (rawVoucher) mapped.set('voucher_no', rawVoucher);
            if (rawDesc) mapped.set('desc_keyword', rawDesc);
            if (statusKey === 'ledger_only') {
                const account = String(selected.account_keyword || '').trim();
                const vendor = String(selected.vendor_keyword || '').trim();
                const amount = String(selected.amount_keyword || '').trim();
                const boundaryExcluded = String(selected.boundary_excluded || '').trim();
                if (account) mapped.set('wehago_account', account);
                if (vendor) mapped.set('wehago_vendor', vendor);
                if (amount) mapped.set('wehago_amount', amount);
                if (boundaryExcluded) mapped.set('boundary_excluded', boundaryExcluded);
            } else if (statusKey === 'bridge_expense_review') {
                const wehagoAccount = String(selected.wehago_account || '').trim();
                const erpAccount = String(selected.erp_account || '').trim();
                const draftNo = String(selected.draft_no || '').trim();
                const wehagoAmount = String(selected.wehago_amount || '').trim();
                const erpAmount = String(selected.erp_amount || '').trim();
                const wehagoVendor = String(selected.wehago_vendor || '').trim();
                const erpVendor = String(selected.erp_vendor || '').trim();
                if (wehagoAccount) mapped.set('wehago_account', wehagoAccount);
                if (erpAccount) mapped.set('erp_account', erpAccount);
                if (draftNo) mapped.set('draft_no', draftNo);
                if (wehagoAmount) mapped.set('wehago_amount', wehagoAmount);
                if (erpAmount) mapped.set('erp_amount', erpAmount);
                if (wehagoVendor) mapped.set('wehago_vendor', wehagoVendor);
                if (erpVendor) mapped.set('erp_vendor', erpVendor);
            } else if (statusKey === 'voucher_only') {
                const account = String(selected.account_keyword || '').trim();
                const vendor = String(selected.vendor_keyword || '').trim();
                const amount = String(selected.amount_keyword || '').trim();
                if (account) mapped.set('erp_account', account);
                if (vendor) mapped.set('erp_vendor', vendor);
                if (amount) mapped.set('erp_amount', amount);
            } else if (statusKey === 'voucher_matched' || statusKey === 'voucher_recheck' || statusKey === 'voucher_excepted' || statusKey === 'erp_voucher_matched') {
                const account = String(selected.account_keyword || '').trim();
                const vendor = String(selected.vendor_keyword || '').trim();
                const amount = String(selected.amount_keyword || '').trim();
                if (account) {
                    mapped.set('wehago_account', account);
                    mapped.set('erp_account', account);
                }
                if (vendor) {
                    mapped.set('wehago_vendor', vendor);
                    mapped.set('erp_vendor', vendor);
                }
                if (amount) {
                    mapped.set('wehago_amount', amount);
                    mapped.set('erp_amount', amount);
                }
            } else if (statusKey === 'voucher_unmatched') {
                const account = String(selected.account_keyword || '').trim();
                const vendor = String(selected.vendor_keyword || '').trim();
                const amount = String(selected.amount_keyword || '').trim();
                if (account) mapped.set('wehago_account', account);
                if (vendor) mapped.set('wehago_vendor', vendor);
                if (amount) mapped.set('wehago_amount', amount);
            } else if (statusKey === 'erp_voucher_unmatched' || statusKey === 'hanmac_unconnected') {
                const account = String(selected.account_keyword || '').trim();
                const vendor = String(selected.vendor_keyword || '').trim();
                const amount = String(selected.amount_keyword || '').trim();
                if (account) mapped.set('erp_account', account);
                if (vendor) mapped.set('erp_vendor', vendor);
                if (amount) mapped.set('erp_amount', amount);
            } else {
                for (const [key, value] of Object.entries(selected)) {
                    if (String(value).trim()) {
                        mapped.set(key, String(value).trim());
                    }
                }
            }
            Object.entries(extra).forEach(([key, value]) => {
                if (value !== undefined && value !== null && String(value) !== '') {
                    mapped.set(key, String(value));
                }
            });
            return mapped.toString();
        };

        const exportPollingByStatus = new Map();

        const setExportButtonBusy = (statusKey, busy) => {
            const button = document.querySelector(`[data-export-status="${statusKey}"]`);
            if (!button) return;
            button.disabled = busy;
            button.dataset.loading = busy ? 'true' : 'false';
            button.title = busy ? '엑셀 준비 중입니다...' : '엑셀 다운로드';
            button.setAttribute('aria-label', busy ? '엑셀 준비 중' : '엑셀 다운로드');
        };

        const pollVoucherExportJob = async (statusKey, jobKey) => {
            if (!statusKey || !jobKey) return;
            exportPollingByStatus.set(statusKey, jobKey);
            const maxAttempts = 360;
            let transientErrors = 0;
            for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
                try {
                    const payload = await fetchJson(`/wehago-compare/api/status-export-jobs/${encodeURIComponent(jobKey)}`);
                    transientErrors = 0;
                    if (payload.state === 'ready' && payload.download_url) {
                        setExportButtonBusy(statusKey, false);
                        exportPollingByStatus.delete(statusKey);
                        window.location.assign(payload.download_url);
                        return;
                    }
                    if (payload.state === 'failed') {
                        setExportButtonBusy(statusKey, false);
                        exportPollingByStatus.delete(statusKey);
                        throw new Error(payload.error_message || '엑셀 준비 중 오류가 발생했습니다.');
                    }
                } catch (error) {
                    transientErrors += 1;
                    if (transientErrors >= 8) {
                        setExportButtonBusy(statusKey, false);
                        exportPollingByStatus.delete(statusKey);
                        throw error;
                    }
                }
                await new Promise((resolve) => window.setTimeout(resolve, 1500));
            }
            setExportButtonBusy(statusKey, false);
            exportPollingByStatus.delete(statusKey);
            throw new Error('엑셀 준비 시간이 길어지고 있습니다. 잠시 후 다시 시도해주세요.');
        };

        const triggerVoucherExport = async (statusKey) => {
            if (!statusKey) return;
            const current = detailState.get(statusKey) || {};
            const form = current.form || document.querySelector(`.filter-form[data-status="${statusKey}"]`);
            const query = buildStatusQuery(form, statusKey);
            const payload = Object.fromEntries(new URLSearchParams(query).entries());
            setExportButtonBusy(statusKey, true);
            try {
                const response = await fetch('/wehago-compare/api/status-export-jobs', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify(payload),
                });
                const result = await response.json();
                if (!response.ok) {
                    throw new Error(result.error || '엑셀 준비 요청 중 오류가 발생했습니다.');
                }
                if (result.state === 'ready' && result.download_url) {
                    setExportButtonBusy(statusKey, false);
                    window.location.assign(result.download_url);
                    return;
                }
                await pollVoucherExportJob(statusKey, result.job_key || '');
            } catch (error) {
                setExportButtonBusy(statusKey, false);
                alert(error.message || '엑셀 다운로드 준비 중 오류가 발생했습니다.');
            }
        };

        const loadStatusRows = async (statusKey, form = null, append = false) => {
            const wrap = document.querySelector(`[data-table-wrap="${statusKey}"]`);
            if (!wrap) return;
            if (detailRetryTimers.has(statusKey)) {
                clearTimeout(detailRetryTimers.get(statusKey));
                detailRetryTimers.delete(statusKey);
            }
            const current = detailState.get(statusKey) || { offset: 0, totalCount: 0, loading: false };
            if (current.loading) {
                const activeController = detailRequestControllers.get(statusKey);
                if (activeController) activeController.abort();
            }
            if (!append && form) {
                const selected = getFormFieldValues(form);
                cumulativeFiltersByStatus.set(statusKey, selected);
                renderActiveFilterCards(statusKey);
            }
            const usesCursorPaging = ['voucher_matched', 'voucher_unmatched', 'voucher_recheck', 'voucher_excepted', 'hanmac_unconnected', 'erp_voucher_matched', 'erp_voucher_unmatched'].includes(statusKey);
            const nextOffset = append ? (current.nextOffset || 0) : 0;
            const nextCursor = append ? String(current.nextCursor || '') : '';
            detailState.set(statusKey, { ...current, loading: true, form });
            setLoadMoreState(statusKey, true, true);
            if (!append) {
                wrap.innerHTML = '<div class="table-placeholder">조회 중입니다...</div>';
                setMeta(statusKey, current.totalCount || 0, 0, '조회 중입니다...');
            }
            const requestController = new AbortController();
            const requestTimeoutId = window.setTimeout(() => requestController.abort(), 20000);
            detailRequestControllers.set(statusKey, requestController);
            try {
                const pageLimit = usesCursorPaging ? 24 : 60;
                const extra = usesCursorPaging
                    ? { offset: append ? nextOffset : 0, cursor: nextCursor, limit: pageLimit }
                    : { offset: nextOffset, limit: pageLimit };
                const payload = await fetchJson(
                    `/wehago-compare/api/status-rows?${buildStatusQuery(form, statusKey, extra)}`,
                    { signal: requestController.signal, timeoutMs: 20000 },
                );
                if (detailRequestControllers.get(statusKey) !== requestController) return;
                renderTable(wrap, payload, ['voucher_no'], append, statusKey);
                const shownCount = append ? nextOffset + payload.shown_count : payload.shown_count;
                detailState.set(statusKey, {
                    offset: payload.offset,
                    nextOffset: payload.next_offset,
                    nextCursor: payload.next_cursor || '',
                    totalCount: payload.total_count,
                    hasMore: payload.has_more,
                    loading: false,
                    form,
                    shownCount,
                });
                setMeta(statusKey, payload.total_count, shownCount, payload.notice, payload);
                setLoadMoreState(statusKey, payload.has_more, false);
                const rebuildingNotice = Boolean(payload?.pending) || String(payload.notice || '').includes('최신 전표 스냅샷을 갱신 중');
                if (!append && rebuildingNotice) {
                    detailRetryTimers.set(statusKey, window.setTimeout(() => {
                        detailRetryTimers.delete(statusKey);
                        loadStatusRows(statusKey, form, false);
                    }, 4000));
                }
            } catch (error) {
                if (error.name === 'AbortError') {
                    if (detailRequestControllers.get(statusKey) === requestController) {
                        if (!append) {
                            wrap.innerHTML = '<div class="table-placeholder">조회 시간이 길어져 중단했습니다. 조건을 줄여 다시 조회해주세요.</div>';
                            setMeta(statusKey, current.totalCount || 0, 0, '조회 시간이 길어져 중단했습니다.');
                        }
                        detailState.set(statusKey, { ...current, loading: false, form });
                        setLoadMoreState(statusKey, current.hasMore, false);
                    }
                    return;
                }
                if (!append) {
                    wrap.innerHTML = `<div class="table-placeholder">${escapeHtml(error.message)}</div>`;
                }
                detailState.set(statusKey, { ...current, loading: false, form });
                setLoadMoreState(statusKey, current.hasMore, false);
            } finally {
                window.clearTimeout(requestTimeoutId);
                if (detailRequestControllers.get(statusKey) === requestController) {
                    detailRequestControllers.delete(statusKey);
                }
            }
        };

        document.querySelectorAll('[data-export-status]').forEach((button) => {
            button.addEventListener('click', async () => {
                const statusKey = button.dataset.exportStatus || '';
                if (!statusKey || exportPollingByStatus.has(statusKey)) {
                    return;
                }
                await triggerVoucherExport(statusKey);
            });
        });

        const cards = Array.from(document.querySelectorAll('.status-card'));
        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;
                const isActive = panel ? panel.classList.contains('active') : false;

                cards.forEach((item) => item.setAttribute('aria-expanded', 'false'));
                panels.forEach((item) => item.classList.remove('active'));

                if (panel && !isActive) {
                    panel.classList.add('active');
                    card.setAttribute('aria-expanded', 'true');
                    const form = panel.querySelector('form[data-filter-kind="status"]');
                    syncFormWithActiveFilters(statusKey, form);
                    loadStatusRows(statusKey, form, false);
                }
            });
        });

        document.querySelectorAll('form[data-filter-kind="status"]').forEach((form) => {
            initStatusSuggest(form, 'voucher');
            initStatusSuggest(form, 'draft');
            initStatusSuggest(form, 'account');
            initStatusSuggest(form, 'vendor');
            initStatusSuggest(form, 'wehago_account');
            initStatusSuggest(form, 'erp_account');
            initStatusSuggest(form, 'wehago_vendor');
            initStatusSuggest(form, 'erp_vendor');
            form.addEventListener('submit', (event) => {
                event.preventDefault();
                const statusKey = form.dataset.status;
                loadStatusRows(statusKey, form, false);
            });
        });

        document.addEventListener('click', (event) => {
            const caseButton = event.target.closest('[data-case-filter="bank_payable"], [data-case-filter="boundary_excluded"]');
            if (caseButton) {
                const caseFilter = caseButton.dataset.caseFilter || '';
                const statusKey = caseFilter === 'boundary_excluded' ? 'ledger_only' : 'matched';
                const current = { ...(cumulativeFiltersByStatus.get(statusKey) || {}) };
                if (caseFilter === 'boundary_excluded') {
                    current.boundary_excluded = '1';
                } else {
                    current.review_reason = 'BANK_PAYABLE_MATCH';
                }
                cumulativeFiltersByStatus.set(statusKey, current);
                renderActiveFilterCards(statusKey);
                const form = document.querySelector(`form[data-filter-kind="status"][data-status="${statusKey}"]`);
                syncFormWithActiveFilters(statusKey, form);
                loadStatusRows(statusKey, null, false);
                return;
            }
            const removeButton = event.target.closest('[data-remove-active-filter]');
            if (!removeButton) return;
            const statusKey = removeButton.dataset.removeActiveFilter || '';
            const filterName = removeButton.dataset.filterName || '';
            if (!statusKey || !filterName) return;
            const current = { ...(cumulativeFiltersByStatus.get(statusKey) || {}) };
            delete current[filterName];
            cumulativeFiltersByStatus.set(statusKey, current);
            renderActiveFilterCards(statusKey);
            const form = document.querySelector(`form[data-filter-kind="status"][data-status="${statusKey}"]`);
            if (form) {
                const safeName = escapeSelectorValue(filterName);
                const input = form.querySelector(`input[name="${safeName}"]`);
                if (input) input.value = '';
            }
            loadStatusRows(statusKey, form, false);
        });

        document.querySelectorAll('[data-load-more]').forEach((button) => {
            button.addEventListener('click', () => {
                const statusKey = button.dataset.loadMore;
                const state = detailState.get(statusKey);
                const form = state?.form || document.querySelector(`form[data-filter-kind="status"][data-status="${statusKey}"]`);
                loadStatusRows(statusKey, form, true);
            });
        });

        document.querySelectorAll('[data-review-save]').forEach((button) => {
            button.addEventListener('click', async () => {
                const panel = button.closest('.detail-panel');
                const statusKey = panel?.dataset.statusPanel || '';
                let selectedRows = [];
                let splitRows = [];
                if (statusKey === 'voucher_recheck') {
                    panel?.querySelectorAll('input[data-voucher-recheck-row]:checked').forEach((checkbox) => {
                        const key = checkbox.dataset.voucherRecheckRow || '';
                        if (key) {
                            voucherRecheckSelections.set(key, true);
                        }
                    });
                    panel?.querySelectorAll('input[data-voucher-recheck-split]:checked').forEach((checkbox) => {
                        const key = checkbox.dataset.voucherRecheckSplit || '';
                        if (key) {
                            voucherRecheckSplitSelections.set(key, true);
                        }
                    });
                    selectedRows = Array.from(voucherRecheckSelections.entries())
                        .filter(([, checked]) => checked)
                        .map(([key]) => voucherRecheckRowStore.get(key))
                        .filter(Boolean);
                    splitRows = Array.from(voucherRecheckSplitSelections.entries())
                        .filter(([, checked]) => checked)
                        .map(([key]) => voucherRecheckRowStore.get(key))
                        .filter(Boolean);
                } else {
                    panel?.querySelectorAll('input[data-review-key]:checked').forEach((checkbox) => {
                        const key = checkbox.dataset.reviewKey || '';
                        if (key) {
                            recheckSelections.set(key, true);
                        }
                    });
                    selectedRows = Array.from(recheckSelections.entries())
                        .filter(([, checked]) => checked)
                        .map(([key]) => recheckRowStore.get(key))
                        .filter(Boolean);
                }
                if (!selectedRows.length && !splitRows.length) {
                    alert('변경할 WEHAGO Recheck 항목을 선택해주세요.');
                    return;
                }
                button.disabled = true;
                const originalText = button.textContent;
                button.textContent = '변경 중...';
                try {
                    const response = await fetch('/wehago-compare/api/recheck-review-save', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({ rows: selectedRows, match_rows: selectedRows, split_rows: splitRows }),
                    });
                    const payload = await response.json();
                    if (!response.ok) {
                        throw new Error(payload.error || '매칭 처리 중 오류가 발생했습니다.');
                    }
                    if (!Number(payload.saved_count || 0)) {
                        alert('선택 항목을 저장하지 못했습니다. 목록을 새로 조회한 뒤 다시 선택해주세요.');
                        return;
                    }
                    if (statusKey === 'voucher_recheck') {
                        panel?.querySelectorAll('input[data-voucher-recheck-row]:checked').forEach((checkbox) => {
                            const key = checkbox.dataset.voucherRecheckRow || '';
                            if (key) {
                                voucherRecheckSelections.delete(key);
                                voucherRecheckRowStore.delete(key);
                            }
                            checkbox.closest('tr')?.remove();
                        });
                        panel?.querySelectorAll('input[data-voucher-recheck-split]:checked').forEach((checkbox) => {
                            const key = checkbox.dataset.voucherRecheckSplit || '';
                            if (key) {
                                voucherRecheckSplitSelections.delete(key);
                            }
                            checkbox.checked = false;
                        });
                        alert(`변경 완료: ${Number(payload.saved_count || 0).toLocaleString()}건`);
                        window.location.reload();
                        return;
                    }
                    window.location.reload();
                } catch (error) {
                    alert(error.message);
                } finally {
                    button.disabled = false;
                    button.textContent = originalText;
                }
            });
        });

        document.querySelectorAll('[data-pair-save]').forEach((button) => {
            button.addEventListener('click', async () => {
                const form = button.closest('form[data-status]');
                const sourceStatus = form?.dataset.status || '';
                if (!['ledger_only', 'voucher_only'].includes(sourceStatus)) {
                    alert('개별 추천은 Unmatched 또는 ERP Unmatched에서만 사용할 수 있습니다.');
                    return;
                }
                const selectedRows = getSelectedSourceForIndividual(sourceStatus);
                if (!selectedRows.length) {
                    alert(sourceStatus === 'ledger_only' ? 'Unmatched에서 항목 1건을 체크해주세요.' : 'ERP Unmatched에서 항목 1건을 체크해주세요.');
                    return;
                }
                if (selectedRows.length > 1) {
                    alert('개별 추천은 한 번에 1건만 선택해서 실행해주세요.');
                    return;
                }
                const sourceRow = selectedRows[0];
                individualState.sourceStatus = sourceStatus;
                individualState.sourceRow = sourceRow;
                individualState.sourceRowKey = sourceStatus === 'ledger_only'
                    ? (sourceRow.ledger_row_key || '')
                    : (sourceRow.voucher_row_key || '');
                individualState.rows = [];
                individualState.nextOffset = 0;
                individualState.hasMore = false;
                individualState.selectedPairKey = '';
                button.disabled = true;
                try {
                    openRecommendationPanel('individual');
                    await loadIndividualRecommendations(false);
                } catch (error) {
                    alert(error.message);
                } finally {
                    button.disabled = false;
                }
            });
        });

        document.querySelectorAll('[data-pair-recommend]').forEach((button) => {
            button.addEventListener('click', async () => {
                button.disabled = true;
                try {
                    const params = buildPairQuery({ limit: 300 });
                    const payload = await fetchJson(`/wehago-compare/api/pair-recommendations?${params.toString()}`);
                    recommendSelections.clear();
                    latestPairRecommendation = payload;
                    openRecommendationPanel('batch');
                    renderRecommendationSummary(payload.stats || {});
                    renderRecommendationTable();
                    const stats = payload.stats || {};
                    const pairs = payload.pairs || [];
                    if (!pairs.length) {
                        recommendTableWrap.innerHTML = '<div class="table-placeholder">추천 가능한 쌍이 없습니다. 조회 조건을 조금 더 좁혀주세요.</div>';
                    }
                    if (stats.recommended) {
                        setMeta('ledger_only', stats.ledger_rows, undefined, `추천 ${Number(stats.recommended).toLocaleString()}건 준비됨`);
                        setMeta('voucher_only', stats.voucher_rows, undefined, `추천 ${Number(stats.recommended).toLocaleString()}건 준비됨`);
                    }
                } catch (error) {
                    alert(error.message);
                } finally {
                    button.disabled = false;
                }
            });
        });

        if (recommendHighOnly) {
            recommendHighOnly.addEventListener('change', () => {
                renderRecommendationTable();
            });
        }

        recommendSortButtons.forEach((button) => {
            button.addEventListener('click', () => {
                const key = button.dataset.recommendSort || 'score';
                recommendSortKey = key;
                recommendSortButtons.forEach((item) => {
                    item.classList.toggle('active', item === button);
                });
                renderRecommendationTable();
            });
        });

        if (recommendApplySelected) {
            recommendApplySelected.addEventListener('click', async () => {
                const keys = Array.from(recommendSelections.entries())
                    .filter(([, checked]) => checked)
                    .map(([key]) => key);
                if (!keys.length) {
                    alert('저장할 추천 항목을 선택해주세요.');
                    return;
                }
                recommendApplySelected.disabled = true;
                try {
                    const params = buildPairQuery();
                    const response = await fetch('/wehago-compare/api/pair-recommendations/apply', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            ...selectedYearRangePayload(),
                            pair_keys: keys,
                            auto_only: false,
                            ledger_voucher_no: params.get('ledger_voucher_no') || '',
                            ledger_review_reason: params.get('ledger_review_reason') || '',
                            voucher_voucher_no: params.get('voucher_voucher_no') || '',
                            voucher_review_reason: params.get('voucher_review_reason') || '',
                        }),
                    });
                    const payload = await response.json();
                    if (!response.ok) {
                        throw new Error(payload.error || '추천 선택 저장 중 오류가 발생했습니다.');
                    }
                    alert(`추천 선택 저장 완료: ${Number(payload.saved_count || 0).toLocaleString()}건`);
                    window.location.reload();
                } catch (error) {
                    alert(error.message);
                } finally {
                    recommendApplySelected.disabled = false;
                }
            });
        }

        if (recommendClose) {
            recommendClose.addEventListener('click', () => {
                closeRecommendationPanel();
            });
        }

        if (recommendApplyIndividual) {
            recommendApplyIndividual.addEventListener('click', async () => {
                const picked = (individualState.rows || []).find((row) => row.pair_key === individualState.selectedPairKey);
                if (!picked) {
                    alert('매칭할 추천 항목 1건을 선택해주세요.');
                    return;
                }
                recommendApplyIndividual.disabled = true;
                try {
                    const isLedgerSource = individualState.sourceStatus === 'ledger_only';
                    const ledgerRows = isLedgerSource ? [individualState.sourceRow] : [picked.target_row];
                    const voucherRows = isLedgerSource ? [picked.target_row] : [individualState.sourceRow];
                    const response = await fetch('/wehago-compare/api/pair-match-save', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({ ledger_rows: ledgerRows, voucher_rows: voucherRows }),
                    });
                    const payload = await response.json();
                    if (!response.ok) {
                        throw new Error(payload.error || '개별 매칭 저장 중 오류가 발생했습니다.');
                    }
                    alert(`개별 매칭 저장 완료: ${Number(payload.saved_count || 0).toLocaleString()}건`);
                    window.location.reload();
                } catch (error) {
                    alert(error.message);
                } finally {
                    recommendApplyIndividual.disabled = false;
                }
            });
        }

        if (recommendTableWrap) {
            recommendTableWrap.addEventListener('scroll', () => {
                if (recommendMode !== 'individual') return;
                if (!individualState.hasMore || individualState.loading) return;
                const remain = recommendTableWrap.scrollHeight - recommendTableWrap.scrollTop - recommendTableWrap.clientHeight;
                if (remain <= 100) {
                    loadIndividualRecommendations(true);
                }
            });
        }

        if (undoLastActionBtn) {
            undoLastActionBtn.addEventListener('click', async () => {
                const confirmed = window.confirm('직전 작업을 취소할까요? 최근 저장 작업 1건만 되돌립니다.');
                if (!confirmed) return;
                undoLastActionBtn.disabled = true;
                try {
                    const response = await fetch('/wehago-compare/api/undo-last-action', {
                        method: 'POST',
                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    });
                    const payload = await response.json();
                    if (!response.ok) {
                        throw new Error(payload.error || '되돌리기 중 오류가 발생했습니다.');
                    }
                    if (!payload.undone) {
                        alert(payload.message || '되돌릴 작업이 없습니다.');
                    } else {
                        alert(`되돌리기 완료: ${formatNumber(payload.affected || 0)}건`);
                        window.location.reload();
                    }
                } catch (error) {
                    alert(error.message);
                } finally {
                    undoLastActionBtn.disabled = false;
                }
            });
        }

        if (snapshotRebuildBtn) {
            snapshotRebuildBtn.addEventListener('click', async () => {
                const confirmed = window.confirm('현재 기간의 전표 스냅샷과 현황 캐시를 다시 준비할까요?');
                if (!confirmed) return;
                snapshotRebuildBtn.disabled = true;
                try {
                    const response = await fetch('/wehago-compare/api/snapshot-rebuild', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            ...selectedYearRangePayload(),
                            include_metric_counts: true,
                        }),
                    });
                    const payload = await response.json();
                    if (!response.ok) {
                        throw new Error(payload.error || '스냅샷 재생성 요청 중 오류가 발생했습니다.');
                    }
                    await loadSnapshotStatus();
                    window.setTimeout(() => loadDashboardSummary(), 1200);
                } catch (error) {
                    alert(error.message);
                } finally {
                    snapshotRebuildBtn.disabled = false;
                }
            });
        }

        if (snapshotToggleBtn) {
            snapshotToggleBtn.addEventListener('click', async () => {
                const nextOpen = snapshotPanel ? snapshotPanel.hidden : true;
                await setSnapshotPanelOpen(nextOpen);
            });
        }

        if (queryCacheRebuildBtn) {
            queryCacheRebuildBtn.addEventListener('click', async () => {
                const confirmed = window.confirm('현재 기간의 전표비교 조회 캐시를 서버에서 다시 계산할까요? 계산 중에도 다른 화면을 사용할 수 있습니다.');
                if (!confirmed) return;
                await requestQueryCacheRebuild();
            });
        }

        if (bridgeReviewOpenBtn) {
            bridgeReviewOpenBtn.addEventListener('click', async () => {
                await setBridgeReviewModalOpen(true);
            });
        }

        if (bridgeReviewCloseBtn) {
            bridgeReviewCloseBtn.addEventListener('click', () => {
                setBridgeReviewModalOpen(false);
            });
        }

        if (bridgeReviewModal) {
            bridgeReviewModal.addEventListener('click', (event) => {
                if (event.target === bridgeReviewModal) {
                    setBridgeReviewModalOpen(false);
                }
            });
        }

        if (bridgeReviewSaveBtn) {
            bridgeReviewSaveBtn.addEventListener('click', async () => {
                try {
                    await saveBridgeReviewSettings();
                    await loadDashboardSummary();
                    await refreshBridgeAffectedPanels();
                } catch (error) {
                    alert(error.message);
                }
            });
        }

        if (bridgeReviewLoadBtn) {
            bridgeReviewLoadBtn.addEventListener('click', async () => {
                await loadBridgeReviewPreview();
            });
        }

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && offsetReviewModal?.classList.contains('active')) {
                setOffsetReviewModalOpen(false);
            }
            if (event.key === 'Escape' && bridgeReviewModal?.classList.contains('active')) {
                setBridgeReviewModalOpen(false);
            }
        });

        document.querySelectorAll('[data-table-wrap]').forEach((wrap) => {
            const statusKey = wrap.dataset.tableWrap;
            if (!statusKey) {
                return;
            }
            wrap.addEventListener('scroll', () => {
                const state = detailState.get(statusKey);
                if (!state || state.loading || !state.hasMore) {
                    return;
                }
                const threshold = 120;
                const remain = wrap.scrollHeight - wrap.scrollTop - wrap.clientHeight;
                if (remain <= threshold) {
                    const form = state.form || document.querySelector(`form[data-filter-kind="status"][data-status="${statusKey}"]`);
                    loadStatusRows(statusKey, form, true);
                }
            });
        });

        const startYear = document.getElementById('start_year');
        const endYear = document.getElementById('end_year');
        syncRecommendationPanelState();
        const syncYearOptions = () => {
            if (!startYear || !endYear) {
                return;
            }
            const startValue = Number(startYear.value || 0);
            const endValue = Number(endYear.value || 0);
            Array.from(startYear.options).forEach((option) => {
                option.disabled = Boolean(endValue) && Number(option.value) > endValue;
            });
            Array.from(endYear.options).forEach((option) => {
                option.disabled = Boolean(startValue) && Number(option.value) < startValue;
            });
            if (startValue && endValue && startValue > endValue) {
                endYear.value = startYear.value;
            }
        };
        if (startYear && endYear) {
            startYear.addEventListener('change', syncYearOptions);
            endYear.addEventListener('change', syncYearOptions);
            syncYearOptions();
        }
        updateBridgeReviewSettingsMeta(defaultBridgeReviewSettings);
        window.setTimeout(() => {
            loadDashboardSummary();
        }, 400);
        loadLatestSystemJob()
            .then((job) => {
                if (job && ['queued', 'running'].includes(String(job.status || ''))) {
                    pollSystemJob(job.id);
                }
            })
            .catch(() => {
                if (systemJobMeta) {
                    systemJobMeta.textContent = '작업 상태 조회 실패';
                    systemJobMeta.dataset.state = 'failed';
                }
            });
        refreshLastActionMeta();
    })();
</script>
{% endblock %}