:root {
  --dangol-font-sans: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
  font-family: var(--dangol-font-sans);
}

body {
  letter-spacing: 0;
  word-break: keep-all;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  line-height: 1.2;
}

input,
select,
textarea {
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
}

table {
  font-variant-numeric: tabular-nums;
}

.role-card,
.menu-btn,
[data-account-management] button,
[data-account-management] input,
[data-account-management] select {
  letter-spacing: 0;
}

.dangol-dashboard-shell {
  position: relative;
  background: #030712 !important;
  color: #f8fafc;
}

.dangol-dashboard-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.dangol-dashboard-shell::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(70vw, 800px);
  height: min(70vw, 800px);
  pointer-events: none;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.12);
  filter: blur(150px);
  transform: translate(-50%, -50%);
}

.dangol-dashboard-shell > aside,
.dangol-dashboard-shell #mobile-menu-drawer,
.dangol-dashboard-shell #notification-drawer,
.dangol-dashboard-shell #support-drawer {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dangol-dashboard-shell > main,
.dangol-dashboard-shell .bg-bgDark,
.dangol-dashboard-shell .bg-bgBase,
.dangol-dashboard-shell [class*="bg-[#050505]"],
.dangol-dashboard-shell [class*="bg-[#030303]"] {
  background: transparent !important;
}

.dangol-dashboard-shell header,
.dangol-dashboard-shell .topbar,
.dangol-dashboard-shell [class*="bg-bgBase/90"] {
  background: rgba(3, 7, 18, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dangol-dashboard-shell .bg-cardBg,
.dangol-dashboard-shell .bg-surfaceCard,
.dangol-dashboard-shell [class*="bg-[#111111]"] {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.90) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.50);
}

.dangol-dashboard-shell .bg-panelBg,
.dangol-dashboard-shell .bg-surface,
.dangol-dashboard-shell [class*="bg-[#0a0a0a]"] {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.dangol-dashboard-shell input,
.dangol-dashboard-shell select,
.dangol-dashboard-shell textarea {
  background-color: #030712 !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff;
}

.dangol-dashboard-shell input:focus,
.dangol-dashboard-shell select:focus,
.dangol-dashboard-shell textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
}

.dangol-dashboard-shell .menu-btn {
  border: 1px solid transparent;
}

.dangol-dashboard-shell .menu-btn:hover {
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(96, 165, 250, 0.28);
}

.dangol-dashboard-shell .menu-btn.bg-primary\/10,
.dangol-dashboard-shell .menu-btn.bg-blue-600\/10,
.dangol-dashboard-shell .menu-btn.text-primary,
.dangol-dashboard-shell .menu-btn.text-blue-500 {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.14);
}

.dangol-dashboard-shell .shadow-soft,
.dangol-dashboard-shell .shadow-float,
.dangol-dashboard-shell .shadow-2xl {
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.50) !important;
}

.dangol-dashboard-shell table,
.dangol-dashboard-shell th,
.dangol-dashboard-shell td {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.dangol-dashboard-shell [class*="border-[#1f1f1f]"],
.dangol-dashboard-shell [class*="border-[#2a2a2a]"],
.dangol-dashboard-shell .border-borderSubtle,
.dangol-dashboard-shell .border-white\/5 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.dangol-dashboard-shell > main,
.dangol-dashboard-shell .view-section,
.dangol-dashboard-shell .sub-tab-content {
  position: relative;
  z-index: 1;
}

.dangol-dashboard-shell > aside {
  position: relative;
  z-index: 20;
}

.dangol-dashboard-shell header {
  position: relative;
  z-index: 30;
}