.duplicate_compare_view { height:100%; min-height:0; padding:18px 24px 20px; display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain; box-sizing:border-box; background:#f7f9fc; color:#1f2e45; }
.dcv_header { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:center; gap:12px; padding:12px 16px; background:#fff; border:1px solid #dce5f2; border-radius:14px; box-shadow:0 6px 18px rgba(32,62,103,.05); }
.dcv_header_title { min-width:0; }
.dcv_eyebrow { margin:0 0 3px; color:#5576a6; font-size:10px; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.dcv_header h1 { margin:0; font-size:21px; line-height:1.25; }
.dcv_header_title > small { display:block; max-width:100%; margin-top:4px; color:#6e8098; font-size:11px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dcv_header_tools { display:flex; align-items:center; gap:10px; margin-top:5px; }
.dcv_header_tool { appearance:none; border:0; padding:0; background:transparent; color:#456b9d; cursor:pointer; font-size:11px; line-height:1.3; font-weight:700; }
.dcv_header_tool + .dcv_header_tool { padding-left:10px; border-left:1px solid #d5dfec; }
.dcv_header_tool:hover { color:#1759c7; }
.dcv_header_tool:disabled { cursor:not-allowed; opacity:.5; }
.dcv_header_controls { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.dcv_btn { border:1px solid #b8c8df; border-radius:8px; padding:7px 11px; background:#fff; color:#29466c; cursor:pointer; font-size:13px; line-height:1.25; font-weight:700; }
.dcv_header_controls .dcv_btn { flex:0 0 auto; white-space:nowrap; }
.dcv_btn_primary { background:#1f63d7; color:#fff; border-color:#1f63d7; }
.dcv_btn_danger { background:#b42318; color:#fff; border-color:#b42318; }
.dcv_notice { margin:16px 0; padding:13px 16px; border-radius:10px; background:#eaf2ff; color:#315b94; }
.dcv_notice.is-warning { background:#fff1e8; color:#9a4316; }
.duplicate_compare_view > main[data-dcv-main] { flex:1 1 auto; min-height:0; display:flex; }
.dcv_loading,.dcv_empty { width:100%; padding:60px 20px; text-align:center; color:#74849a; }
.dcv_compare_grid { min-height:0; flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:12px; }
.dcv_file_card { min-width:0; min-height:0; display:flex; flex-direction:column; background:#fff; border:1px solid #dce5f2; border-radius:16px; overflow:hidden; }
.dcv_file_head { padding:10px 14px; border-bottom:1px solid #e8edf4; }
.dcv_file_head strong { display:block; font-size:15px; line-height:1.3; }
.dcv_file_head small { display:block; margin-top:2px; color:#71829a; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.dcv_preview { min-height:0; flex:1 1 auto; height:auto; background:#eef2f7; }
.dcv_system_preview_module { width:100%; height:100%; border:0; border-radius:0; }
.dcv_preview_empty { display:grid; place-items:center; height:100%; color:#73839a; padding:20px; text-align:center; }
.dcv_btn:disabled,.dcv_reason:disabled { cursor:not-allowed; opacity:.58; }
.dcv_reason { width:clamp(190px,22vw,300px); height:34px; min-width:0; flex:0 1 auto; border:1px solid #becce0; border-radius:8px; padding:0 10px; font-size:13px; line-height:1.25; box-sizing:border-box; }
.dcv_detail_modal { position:fixed; inset:0; z-index:2100; display:grid; place-items:center; padding:24px; }
.dcv_detail_modal[hidden] { display:none; }
.dcv_detail_backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(19,31,51,.58); cursor:pointer; }
.dcv_detail_dialog { position:relative; width:min(1120px,calc(100vw - 48px)); max-height:calc(100vh - 48px); display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid #d7e1ef; border-radius:18px; box-shadow:0 24px 70px rgba(15,31,55,.28); }
.dcv_detail_head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid #e5ebf4; }
.dcv_detail_head h2 { margin:0; font-size:22px; }
.dcv_detail_body { overflow:auto; padding:20px 24px 26px; }
.dcv_detail_intro { margin:0 0 14px; color:#667891; }
.dcv_detail_table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; border:1px solid #dce5f2; border-radius:12px; overflow:hidden; }
.dcv_detail_table th,.dcv_detail_table td { padding:12px 14px; border-right:1px solid #e3eaf3; border-bottom:1px solid #e3eaf3; text-align:left; vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
.dcv_detail_table th:last-child,.dcv_detail_table td:last-child { border-right:0; }
.dcv_detail_table tr:last-child td { border-bottom:0; }
.dcv_detail_table thead th { position:sticky; top:0; z-index:1; background:#f3f7fc; color:#344b6c; }
.dcv_detail_table th:first-child { width:120px; }
.dcv_detail_table th:last-child { width:80px; text-align:center; }
.dcv_detail_table td:last-child { text-align:center; }
.dcv_compare_badge { display:inline-block; min-width:46px; padding:4px 8px; border-radius:999px; background:#edf7f1; color:#187344; font-size:12px; font-weight:700; }
.dcv_compare_badge.is-different { background:#fff2e8; color:#a04b19; }
.dcv_compare_badge.is-neutral { background:#f1f4f8; color:#667891; }
@media (max-width: 1100px) { .dcv_header { grid-template-columns:minmax(190px,1fr) auto; } .dcv_header_controls { gap:6px; } .dcv_reason { width:clamp(170px,20vw,240px); } .dcv_header_controls .dcv_btn { padding-left:9px; padding-right:9px; font-size:12px; } }
@media (max-width: 900px) { .duplicate_compare_view { padding:14px 12px 28px; overflow-y:auto; } .duplicate_compare_view > main[data-dcv-main] { display:block; flex:none; } .dcv_compare_grid { display:grid; grid-template-columns:1fr; gap:12px; } .dcv_file_card { height:auto; } .dcv_preview { height:min(62vh,520px); min-height:360px; flex:none; } .dcv_header { grid-template-columns:1fr; align-items:stretch; padding:10px 12px; } .dcv_header h1 { font-size:19px; } .dcv_header_controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; } .dcv_reason { width:100%; } .dcv_detail_modal { padding:12px; } .dcv_detail_dialog { width:calc(100vw - 24px); max-height:calc(100vh - 24px); } .dcv_detail_head,.dcv_detail_body { padding-left:16px; padding-right:16px; } .dcv_detail_table { min-width:760px; } }
@media (max-width: 620px) { .dcv_header_controls { grid-template-columns:1fr 1fr; } .dcv_reason { grid-column:1 / -1; } .dcv_header_controls .dcv_btn { width:100%; white-space:normal; } }