:root{
  --scale: 1.15;

  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;

  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,0.12);

  --accent:#2563eb;
  --accent-2:#1d4ed8;

  --add-bg:#ecfdf5;
  --add-bd:#22c55e;
  --del-bg:#fef2f2;
  --del-bd:#ef4444;

  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.08);
  --radius: 16px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 520px at 10% 0%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(1000px 520px at 90% 10%, rgba(16,185,129,0.10), transparent 55%),
    var(--bg);
}

/* ===== Header ===== */
.header{ padding: calc(22px * var(--scale)) 0 calc(10px * var(--scale)); }
.header-row{
  max-width: 1400px;
  margin: 0 auto;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(18px * var(--scale));
  gap: calc(14px * var(--scale));
}
.brand-title{
  font-size: calc(44px * var(--scale));
  font-weight: 1000;
  letter-spacing: 1px;
  line-height: 1;
}
.brand-sub{
  margin-top: calc(8px * var(--scale));
  color: var(--muted);
  font-weight: 750;
  font-size: calc(13px * var(--scale));
}

.container{
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(12px * var(--scale)) calc(18px * var(--scale)) calc(22px * var(--scale));
}

/* ===== Cards ===== */
.panel, .actions, .result, .merged{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(14px * var(--scale));
}
@media (min-width: 980px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

.panel{ overflow:hidden; }
.panel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: calc(12px * var(--scale)) calc(14px * var(--scale));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.panel-head h2{
  margin:0;
  font-size: calc(16px * var(--scale));
  font-weight: 1000;
  letter-spacing: 0.8px;
  color: var(--text);
}

/* ===== Textareas ===== */
textarea{
  width:100%;
  border:0;
  outline:none;
  resize: vertical;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: calc(14px * var(--scale));
  line-height: 1.55;
  padding: calc(14px * var(--scale));
}
.big-inputs textarea{ min-height: 48vh; }
#mergedText{ min-height: 22vh; }
textarea::placeholder{ color: rgba(100,116,139,0.75); }

/* ===== Buttons ===== */
.btn{
  appearance:none;
  border: 1px solid rgba(15,23,42,0.16);
  background: #fff;
  color: var(--text);
  padding: calc(10px * var(--scale)) calc(14px * var(--scale));
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
  font-size: calc(13px * var(--scale));
  box-shadow: 0 1px 0 rgba(2,6,23,0.03);
}
.btn:hover{
  border-color: rgba(15,23,42,0.28);
  box-shadow: 0 12px 26px rgba(2,6,23,0.10);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

.btn.primary{
  border-color: rgba(37,99,235,0.35);
  background: linear-gradient(180deg, rgba(37,99,235,0.96), rgba(29,78,216,0.96));
  color:#fff;
}

.btn.secondary{
  background: #eef2f7;
  border-color: rgba(15,23,42,0.24);
}
.btn.secondary:hover{
  background:#e2e8f0;
  border-color: rgba(15,23,42,0.34);
}

/* ===== Theme button: light mode shows DARK button as dark ===== */
.btn.theme-btn{
  background: #0f172a;
  color: #ffffff;
  border-color: rgba(15,23,42,0.60);
}
.btn.theme-btn:hover{
  background: #0b1224;
  border-color: rgba(15,23,42,0.75);
}

/* ===== Actions ===== */
.actions{ margin-top: calc(14px * var(--scale)); padding: calc(14px * var(--scale)); }
.action-buttons{
  display:flex;
  justify-content: center; /* Compare centered */
  gap: calc(10px * var(--scale));
  margin-bottom: calc(14px * var(--scale));
}
.options-box{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(12px * var(--scale));
  background: var(--surface-2);
}
.options-title{
  font-size: calc(12px * var(--scale));
  font-weight: 1000;
  color: var(--muted);
  letter-spacing: 0.6px;
  margin-bottom: calc(8px * var(--scale));
  text-transform: uppercase;
}
.option-item{
  display:flex;
  gap: calc(12px * var(--scale));
  align-items:flex-start;
  padding: calc(10px * var(--scale)) calc(6px * var(--scale));
  border-radius: 12px;
  cursor:pointer;
}
.option-item:hover{ background: rgba(37,99,235,0.06); }
.option-item input{
  margin-top: calc(4px * var(--scale));
  transform: scale(1.2);
  accent-color: var(--accent);
}
.option-label{ font-size: calc(13px * var(--scale)); font-weight: 1000; }
.option-desc{ font-size: calc(12px * var(--scale)); color: var(--muted); margin-top: calc(2px * var(--scale)); }

/* ===== Result / Diff ===== */
.result{ margin-top: calc(14px * var(--scale)); overflow:hidden; }
.result-head, .merged-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: calc(12px * var(--scale)) calc(14px * var(--scale));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.result-head h2, .merged-head h2{
  margin:0;
  font-size: calc(14px * var(--scale));
  color: var(--muted);
  font-weight: 1000;
}
.stats{
  color: var(--muted);
  font-size: calc(12px * var(--scale));
  font-weight: 900;
}

.result-controls{
  padding: calc(12px * var(--scale));
  display:flex;
  justify-content:center;
}

.diff-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(12px * var(--scale));
  padding: calc(12px * var(--scale));
}
@media (min-width: 980px){
  .diff-grid{ grid-template-columns: 1fr 1fr; }
}

.diff-col{
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: #fff;
}
.diff-col-head{
  padding: calc(10px * var(--scale)) calc(12px * var(--scale));
  border-bottom: 1px solid var(--line);
  font-size: calc(13px * var(--scale));
  font-weight: 1000;
  letter-spacing: 0.8px;
  background: var(--surface-2);
  color: var(--text);
}
.diff-out{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: calc(12.8px * var(--scale));
  line-height: 1.65;
}

/* block controls */
.blockCtl{
  display:flex;
  gap: calc(10px * var(--scale));
  align-items:center;
  padding: calc(9px * var(--scale)) calc(10px * var(--scale));
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: rgba(2,6,23,0.02);
  color: var(--muted);
  font-size: calc(12px * var(--scale));
}
.blockCtl label{ display:flex; gap: calc(6px * var(--scale)); align-items:center; cursor:pointer; }

.badge{
  padding: calc(2px * var(--scale)) calc(9px * var(--scale));
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.14);
  background: #fff;
  color: var(--muted);
  font-weight: 1000;
  font-size: calc(11px * var(--scale));
}

.dline{
  display:flex;
  align-items:flex-start;
  gap: calc(10px * var(--scale));
  padding: calc(3px * var(--scale)) calc(10px * var(--scale));
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.ln{
  width: calc(52px * var(--scale));
  text-align:right;
  color: rgba(100,116,139,0.70);
  user-select:none;
  flex: 0 0 auto;
}
.code{
  flex: 1 1 auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.dline.add{ background: var(--add-bg); border-left: 3px solid var(--add-bd); }
.dline.del{ background: var(--del-bg); border-left: 3px solid var(--del-bd); }
.dline.blank .code{ color: rgba(100,116,139,0.55); }

/* merged */
.merged{ margin-top: calc(14px * var(--scale)); overflow:hidden; }
.merged-controls{
  padding: calc(12px * var(--scale)) calc(14px * var(--scale));
  display:flex;
  justify-content:flex-end;
  gap: calc(10px * var(--scale));
}

/* footer */
.footer{
  text-align:center;
  padding: calc(18px * var(--scale)) calc(12px * var(--scale)) calc(26px * var(--scale));
  color: var(--muted);
  font-size: calc(12px * var(--scale));
}

/* ===== Dark Theme ===== */
body[data-theme="dark"]{
  --bg:#0b1020;
  --surface:#111935;
  --surface-2:#0f1730;

  --text:#e9ecf5;
  --muted:#a7b0d1;
  --line: rgba(255,255,255,0.14);

  --accent:#6aa7ff;
  --accent-2:#3b82f6;

  --add-bg: rgba(53,215,138,0.16);
  --add-bd: rgba(53,215,138,0.60);
  --del-bg: rgba(255,99,132,0.18);
  --del-bd: rgba(255,99,132,0.65);
}

body[data-theme="dark"] .btn.secondary{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}

/* dark mode shows LIGHT button as bright */
body[data-theme="dark"] .btn.theme-btn{
  background: #ffffff;
  color: #0b1224;
  border-color: rgba(255,255,255,0.60);
}
body[data-theme="dark"] .btn.theme-btn:hover{
  background: #f1f5f9;
  border-color: rgba(255,255,255,0.75);
}

body[data-theme="dark"] .diff-col{ background: rgba(0,0,0,0.15); }
body[data-theme="dark"] .blockCtl{
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.10);
}
body[data-theme="dark"] .badge{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
}
body[data-theme="dark"] .dline{
  border-bottom-color: rgba(255,255,255,0.06);
}