/* 두 목록 비교 */

.lc { margin-top: 0.4rem; }

.lc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.lc-col { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.lc-label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.88rem; font-weight: 700; color: var(--text); }
.lc-label span { font-weight: 500; font-size: 0.78rem; color: var(--text-sub); }
.lc-count { margin-left: auto; font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--primary); }
.lc textarea {
  width: 100%;
  min-height: 220px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
}
.lc textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint), var(--shadow); }

.lc-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin-top: 0.75rem; }
.lc-options label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.lc-options input { width: 18px; height: 18px; accent-color: var(--primary); }
.lc-spacer { flex: 1; }
.lc-note { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--text-sub); word-break: keep-all; }

.lc-btn {
  position: relative;
  min-height: 36px;
  padding: 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lc-btn::after { content: ''; position: absolute; inset: -4px; }
.lc-btn:hover { border-color: var(--primary); color: var(--primary); }

.lc-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.lc-results[hidden] { display: none; }
.lc-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.lc-card[hidden] { display: none; }
.lc-card header { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem 0.6rem 0.85rem; border-bottom: 1px solid var(--border); }
.lc-card h2 { font-size: 0.9rem; margin: 0; flex: 1; }
.lc-card h2 small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-sub); }
.lc-card header b { font-family: var(--font-mono); font-size: 1.35rem; }
.lc-only-a header { border-top: 4px solid var(--error); }
.lc-only-b header { border-top: 4px solid var(--success); }
.lc-both header { border-top: 4px solid var(--primary); }
.lc-card ol, .lc-card ul { margin: 0; padding: 0.5rem 0.85rem 0.6rem 2.2rem; max-height: 320px; overflow: auto; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.7; word-break: break-all; }
.lc-card li.lc-none { list-style: none; margin-left: -1.35rem; color: var(--text-sub); font-family: inherit; }
.lc-dup { grid-column: 1 / -1; }
.lc-dup header { border-top: 4px solid var(--warning); }
.lc-dup ul { font-family: inherit; }
.lc-dup li span { font-family: var(--font-mono); font-weight: 600; }
#lc-csv { grid-column: 1 / -1; justify-self: start; margin-top: 0; min-height: 44px; }

@media (max-width: 640px) {
  .lc-inputs, .lc-results { grid-template-columns: 1fr; }
  .lc textarea { min-height: 160px; }
  .lc-spacer { display: none; }
}