:root {
  --matrix-ink: #20242b;
  --matrix-muted: #626b78;
  --matrix-paper: #ffffff;
  --matrix-ground: #f5f7fa;
  --matrix-rule: #dce2ea;
  --matrix-blue: #11468c;
  --matrix-blue-soft: #eaf1fa;
  --matrix-green: #2f6d50;
  --matrix-pink: #a64b6e;
}

body {
  min-height: 100vh;
  padding: clamp(20px, 4vw, 56px) !important;
  color: var(--matrix-ink) !important;
  background: var(--matrix-ground) !important;
  font-family: "Noto Sans KR", Pretendard, system-ui, sans-serif !important;
}

.max-w-7xl { max-width: 1120px !important; }
.text-white, .text-gray-400, .text-gray-300 { color: var(--matrix-ink) !important; }
.text-gray-400 { color: var(--matrix-muted) !important; }

header { margin-bottom: clamp(28px, 5vw, 52px) !important; }
header h1 {
  font-family: "Noto Serif KR", "Noto Sans KR", serif !important;
  font-size: clamp(2rem, 5vw, 3.4rem) !important;
  letter-spacing: -.045em;
  word-break: keep-all;
  overflow-wrap: normal;
}

#tab-container {
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow-x: auto;
  margin: 0 0 20px !important;
  padding: 4px 0 8px;
}
.tab-button {
  flex: 0 0 auto;
  padding: 10px 14px;
  color: var(--matrix-muted);
  background: transparent;
  border: 1px solid var(--matrix-rule);
  border-radius: 999px;
}
.tab-button:hover,
.tab-button.active {
  color: #fff;
  background: var(--matrix-blue);
  border-color: var(--matrix-blue);
}

.bg-gray-800 {
  padding: clamp(20px, 4vw, 40px) !important;
  background: var(--matrix-paper) !important;
  border: 1px solid var(--matrix-rule);
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(15, 35, 60, .06) !important;
}
.bg-gray-900 {
  min-height: auto !important;
  color: var(--matrix-muted);
  background: #f7f9fc !important;
  border: 1px solid var(--matrix-rule);
  border-radius: 12px !important;
}
.bg-gray-700 { background: var(--matrix-paper) !important; }
.border-gray-600 { border-color: var(--matrix-rule) !important; }

.matrix-grid {
  width: min(100%, 204px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.matrix-input,
.matrix-cell {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-height: 52px;
  color: var(--matrix-ink);
  background: #f8fafc;
  border: 1px solid var(--matrix-rule);
  border-radius: 8px;
}
.matrix-input:focus {
  outline: 3px solid #c9d9ed;
  border-color: var(--matrix-blue);
}
.highlight-row { background: var(--matrix-blue) !important; }
.highlight-col { background: var(--matrix-pink) !important; }
.highlight-result { background: var(--matrix-green) !important; }

.bg-indigo-600,
.bg-gray-600 {
  color: #fff !important;
  background: var(--matrix-blue) !important;
  border: 1px solid var(--matrix-blue);
  border-radius: 8px !important;
  box-shadow: none !important;
}
.bg-gray-600 { color: var(--matrix-blue) !important; background: var(--matrix-paper) !important; }
.hover\:bg-indigo-700:hover { background: #0c386f !important; }
.hover\:bg-gray-700:hover { background: var(--matrix-blue-soft) !important; }

#properties .flex.items-center.justify-center.gap-8 { flex-wrap: wrap; }
#prop-arrow { width: auto !important; min-width: 2rem; }
select { max-width: 100%; color: var(--matrix-ink) !important; }

@media (max-width: 640px) {
  body { padding: 16px !important; }
  .bg-gray-800 { padding: 20px !important; }
  .matrix-grid { width: 174px; }
  .matrix-input, .matrix-cell { min-height: 44px; }
  #properties .flex.items-center.justify-center.gap-8 { gap: 20px !important; }
  #properties .flex.items-center.justify-center.gap-8 > div { max-width: 100%; }
  #prop-arrow { transform: rotate(90deg); }
}