@charset "UTF-8";

:root {
  --ops-ink: #17221c;
  --ops-muted: #66736b;
  --ops-paper: #fffdf6;
  --ops-surface: rgba(255, 253, 246, 0.88);
  --ops-line: rgba(35, 63, 48, 0.14);
  --ops-green: #176b4a;
  --ops-green-deep: #0e4a34;
  --ops-coral: #e76f51;
  --ops-gold: #e7b54a;
  --ops-shadow: 0 22px 60px rgba(31, 51, 40, 0.12);
  --ops-radius: 18px;
  --ops-font: "SUIT", "Pretendard Variable", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

html {
  background: #edf3e8;
  color-scheme: light;
}

body {
  min-height: 100vh;
  color: var(--ops-ink);
  font-family: var(--ops-font);
  background:
    radial-gradient(circle at 8% 4%, rgba(231, 181, 74, 0.2), transparent 27rem),
    radial-gradient(circle at 94% 12%, rgba(23, 107, 74, 0.17), transparent 32rem),
    linear-gradient(145deg, #f8f4e9 0%, #edf4ea 48%, #f7efe7 100%);
  background-attachment: fixed;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.28;
  background-image: linear-gradient(rgba(23, 107, 74, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 74, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}

::selection {
  color: #fff;
  background: var(--ops-green);
}

:where(.sidebar, .topbar, .header, .panel, .card, .modal-content, .login-card, .auth-card) {
  border-color: var(--ops-line) !important;
  box-shadow: var(--ops-shadow);
  backdrop-filter: blur(16px);
}

:where(.panel, .card, .modal-content, .login-card, .auth-card) {
  border-radius: var(--ops-radius) !important;
  background: var(--ops-surface) !important;
}

:where(h1, h2, h3, .brand, .logo) {
  color: var(--ops-ink);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

:where(input, select, textarea) {
  border: 1px solid var(--ops-line) !important;
  border-radius: 12px !important;
  color: var(--ops-ink) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

:where(input, select, textarea):focus {
  outline: none !important;
  border-color: rgba(23, 107, 74, 0.68) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(23, 107, 74, 0.12) !important;
}

:where(button, .button, .btn, [role="button"]) {
  border-radius: 999px !important;
  font-family: var(--ops-font);
  font-weight: 750;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

:where(button, .button, .btn, [role="button"]):hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

:where(.btn-primary, .primary, button[type="submit"]) {
  border-color: var(--ops-green) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--ops-green), var(--ops-green-deep)) !important;
  box-shadow: 0 10px 24px rgba(23, 107, 74, 0.22) !important;
}

:where(table) {
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
}

:where(th) {
  color: var(--ops-green-deep);
  background: rgba(23, 107, 74, 0.08) !important;
}

:where(td, th) {
  border-color: var(--ops-line) !important;
}

:where(tbody tr) {
  transition: background 140ms ease;
}

:where(tbody tr):hover {
  background: rgba(231, 181, 74, 0.08) !important;
}

:where(.badge, .status, .chip, .tag) {
  border-radius: 999px !important;
  font-weight: 700;
}

main, .main, .content, .login-card, .auth-card {
  animation: ops-rise 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ops-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  :root { --ops-radius: 15px; }

  body {
    background-attachment: scroll;
  }

  :where(.panel, .card, .modal-content, .login-card, .auth-card) {
    box-shadow: 0 14px 34px rgba(31, 51, 40, 0.1);
  }

  :where(button, .button, .btn) {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}