@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
  --font-base: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --primary: #3d5a73;
  --primary-dark: #2f4659;
  --primary-soft: #5a7a94;
  --text-dark: #1f2933;
  --text-main: #1f2933;
  --text-gray: #6b7280;
  --text-light: #94a3b8;
  --border: rgba(31, 41, 51, 0.1);
  --bg-white: rgba(255, 255, 255, 0.78);
  --bg-gray: #eef1f4;
  --bg-body: #eef1f4;
  --db-bg-1: #f4f6f8;
  --db-bg-2: #e7ebf0;
  --db-surface: rgba(255, 255, 255, 0.68);
  --db-surface-strong: rgba(255, 255, 255, 0.86);
  --db-border: rgba(255, 255, 255, 0.62);
  --db-line: rgba(31, 41, 51, 0.08);
  --db-text: #1f2933;
  --db-muted: #6b7280;
  --db-accent: #f5d76e;
  --db-mint: #9fe0d8;
  --db-coral: #e8a090;
  --db-radius: 16px;
  --db-radius-sm: 12px;
  --db-shadow: 0 10px 30px rgba(31, 41, 51, 0.07);
  --db-shadow-soft: 0 4px 14px rgba(31, 41, 51, 0.05);
  --db-blur: 18px;
}

html,
body.dongnebak-app {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(159, 224, 216, 0.28), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(245, 215, 110, 0.22), transparent 50%),
    linear-gradient(165deg, var(--db-bg-1) 0%, var(--db-bg-2) 48%, #f7f8fa 100%) !important;
  background-attachment: fixed !important;
  color: var(--db-text) !important;
  font-family: var(--font-base) !important;
  letter-spacing: -0.02em;
}

body.dongnebak-app .app-layout,
body.dongnebak-app .main-content,
body.dongnebak-app .content-container,
body.dongnebak-app .page-wrapper,
body.dongnebak-app .hero-section,
body.dongnebak-app .xq-hero,
body.dongnebak-app .diagonal-marquee-container {
  background: transparent !important;
  color: var(--db-text) !important;
}

body.dongnebak-app .hero-section h1,
body.dongnebak-app .hero-section p,
body.dongnebak-app .hero-section .hero-title,
body.dongnebak-app .hero-section .hero-subtitle {
  color: var(--db-text) !important;
  text-shadow: none !important;
}

body.dongnebak-app .ticker-wrap {
  background: rgba(61, 90, 115, 0.08) !important;
  color: var(--db-text) !important;
  border-radius: 12px;
}

body.dongnebak-app .s1i2d3e4b5,
body.dongnebak-app nav.s1i2d3e4b5,
body.dongnebak-app .admin-sidebar {
  background: var(--db-surface) !important;
  backdrop-filter: blur(var(--db-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--db-blur)) saturate(1.2);
  border-right: 1px solid var(--db-line) !important;
  box-shadow: 8px 0 32px rgba(31, 41, 51, 0.04) !important;
}

body.dongnebak-app .s1i2d3e4b5 .logo,
body.dongnebak-app .sidebar-header .logo,
body.dongnebak-app .s1i2d3e4b5 .logo span {
  color: var(--db-text) !important;
  font-weight: 800 !important;
}

body.dongnebak-app .s1i2d3e4b5 .nav-list a {
  border-radius: var(--db-radius-sm) !important;
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  color: var(--db-text) !important;
  font-weight: 560;
}

body.dongnebak-app .s1i2d3e4b5 .nav-list a:hover,
body.dongnebak-app .s1i2d3e4b5 .nav-list a.active {
  background: linear-gradient(135deg, rgba(245, 215, 110, 0.42), rgba(159, 224, 216, 0.35)) !important;
  color: var(--db-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

body.dongnebak-app .s1i2d3e4b5 .nav-list a i {
  color: var(--primary) !important;
}

body.dongnebak-app .h1e2a3d4e5,
body.dongnebak-app header,
body.dongnebak-app .top-header,
body.dongnebak-app .main-header,
body.dongnebak-app .header {
  background: var(--db-surface) !important;
  backdrop-filter: blur(var(--db-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--db-blur)) saturate(1.15);
  border-bottom: 1px solid var(--db-line) !important;
  box-shadow: var(--db-shadow-soft) !important;
}

body.dongnebak-app .card,
body.dongnebak-app .search-box,
body.dongnebak-app .db-main-hero,
body.dongnebak-app .intro-section,
body.dongnebak-app .search-section,
body.dongnebak-app .content-card,
body.dongnebak-app .panel,
body.dongnebak-app .stat-card,
body.dongnebak-app .plan-card,
body.dongnebak-app .hero-search-area,
body.dongnebak-app .l9o8g7i6n5-box,
body.dongnebak-app .r1e2g3i4s5-box,
body.dongnebak-app .auth-box,
body.dongnebak-app .login-box,
body.dongnebak-app .register-box,
body.dongnebak-app .mypage-section,
body.dongnebak-app .billing-pane,
body.dongnebak-app .filter-panel,
body.dongnebak-app [class*="card"]:not(.bi):not([class*="icon"]):not([class*="mp-dash-card-"]):not([class*="mp-home-metric"]):not([class*="result-card"]):not([class*="product-card"]):not([class*="live-preview-card"]):not([class*="db-plan-card"]):not(.guide-card):not(.stat-card) {
  background: var(--db-surface-strong) !important;
  backdrop-filter: blur(var(--db-blur));
  -webkit-backdrop-filter: blur(var(--db-blur));
  border: 1px solid var(--db-border) !important;
  border-radius: var(--db-radius) !important;
  box-shadow: var(--db-shadow) !important;
}

body.dongnebak-app .modal-content,
body.dongnebak-app .m-modal,
body.dongnebak-app .modal-dialog > div,
body.dongnebak-app [class*="modal-box"],
body.dongnebak-app [class*="Modal"] {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(31, 41, 51, 0.18) !important;
}

body.dongnebak-app .btn-primary,
body.dongnebak-app button.btn-primary,
body.dongnebak-app .btn.btn-primary,
body.dongnebak-app button[type="submit"],
body.dongnebak-app .search-btn,
body.dongnebak-app #compareBtn,
body.dongnebak-app .cta-btn,
body.dongnebak-app .primary-btn {
  background: linear-gradient(135deg, #3d5a73 0%, #5a7a94 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--db-radius-sm) !important;
  box-shadow: 0 8px 20px rgba(61, 90, 115, 0.28) !important;
  font-weight: 700 !important;
  padding: 11px 18px !important;
}

body.dongnebak-app .btn-primary:hover,
body.dongnebak-app button.btn-primary:hover {
  filter: brightness(1.05);
}

body.dongnebak-app .btn-accent,
body.dongnebak-app .chip-active,
body.dongnebak-app .badge-primary,
body.dongnebak-app .tag-primary {
  background: linear-gradient(135deg, var(--db-accent), #f0c94a) !important;
  color: #1f2933 !important;
  border-radius: 999px !important;
}

body.dongnebak-app .btn-outline,
body.dongnebak-app .btn-secondary {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--db-line) !important;
  color: var(--db-text) !important;
  border-radius: var(--db-radius-sm) !important;
  backdrop-filter: blur(8px);
}

body.dongnebak-app .form-control,
body.dongnebak-app input[type="text"],
body.dongnebak-app input[type="email"],
body.dongnebak-app input[type="password"],
body.dongnebak-app input[type="number"],
body.dongnebak-app input[type="tel"],
body.dongnebak-app select,
body.dongnebak-app textarea {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid var(--db-line) !important;
  border-radius: var(--db-radius-sm) !important;
  color: var(--db-text) !important;
  box-shadow: inset 0 1px 2px rgba(31, 41, 51, 0.03);
}

body.dongnebak-app .form-control:focus,
body.dongnebak-app input:focus,
body.dongnebak-app select:focus,
body.dongnebak-app textarea:focus {
  border-color: rgba(61, 90, 115, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(159, 224, 216, 0.35) !important;
  outline: none !important;
}

body.dongnebak-app a {
  color: var(--primary);
}

body.dongnebak-app a:hover {
  color: var(--primary-dark);
}

body.dongnebak-app .intro-title,
body.dongnebak-app h1,
body.dongnebak-app .page-title,
body.dongnebak-app .hero-title {
  color: var(--db-text) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

body.dongnebak-app .intro-description,
body.dongnebak-app .page-desc,
body.dongnebak-app .muted,
body.dongnebak-app .text-muted {
  color: var(--db-muted) !important;
}

body.dongnebak-app .progress-bar,
body.dongnebak-app .progress > div,
body.dongnebak-app [class*="progress"] > span {
  background: linear-gradient(90deg, var(--primary), var(--db-mint)) !important;
}

body.dongnebak-app .badge,
body.dongnebak-app .status-badge,
body.dongnebak-app .chip {
  border-radius: 999px !important;
  background: rgba(61, 90, 115, 0.1) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(61, 90, 115, 0.12);
}

body.dongnebak-app .table,
body.dongnebak-app table {
  background: transparent !important;
}

body.dongnebak-app table th {
  background: rgba(61, 90, 115, 0.06) !important;
  color: var(--db-text) !important;
  font-weight: 700;
}

body.dongnebak-app table td {
  border-color: var(--db-line) !important;
}

body.dongnebak-app .toast,
body.dongnebak-app [class*="toast"] {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--db-border) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px);
  box-shadow: var(--db-shadow);
  color: var(--db-text) !important;
}

body.dongnebak-app .modal-overlay,
body.dongnebak-app .sidebar-overlay,
body.dongnebak-app .overlay {
  background: rgba(31, 41, 51, 0.32) !important;
  backdrop-filter: blur(3px);
}

body.dongnebak-app .dongnebak-auth-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 18px;
  text-decoration: none;
}

body.dongnebak-app .dongnebak-auth-logo .db-logo-mark {
  width: 44px;
  height: 44px;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(31, 41, 51, 0.12));
}

body.dongnebak-app .dongnebak-auth-logo .db-brand-text {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1f2933;
  line-height: 1;
}

body.dongnebak-app .l9o8g7i6n5-box,
body.dongnebak-app .r1e2g3i4s5-box,
body.dongnebak-app .auth-box {
  padding: 28px 24px !important;
  max-width: 420px;
}

body.dongnebak-app .form-group {
  margin-bottom: 12px !important;
}

body.dongnebak-app .content-container,
body.dongnebak-app .main-content {
  padding-top: 12px;
}


body.dongnebak-app .tab,
body.dongnebak-app .nav-tabs a,
body.dongnebak-app .mypage-tab {
  border-radius: 999px !important;
  padding: 8px 14px !important;
}

body.dongnebak-app .tab.active,
body.dongnebak-app .mypage-tab.active {
  background: linear-gradient(135deg, rgba(245, 215, 110, 0.55), rgba(159, 224, 216, 0.45)) !important;
  color: var(--db-text) !important;
  font-weight: 700;
}

body.dongnebak-app .diagonal-track,
body.dongnebak-app .marquee-row {
  opacity: 0.22 !important;
  filter: grayscale(0.35) saturate(0.7);
}

@media (max-width: 768px) {
  body.dongnebak-app .l9o8g7i6n5-box,
  body.dongnebak-app .r1e2g3i4s5-box {
    padding: 20px 16px !important;
  }

  body.dongnebak-app .dongnebak-auth-logo .db-logo-mark {
    width: 38px;
    height: 38px;
  }

  body.dongnebak-app .dongnebak-auth-logo .db-brand-text {
    font-size: 24px;
  }

  body.dongnebak-app .s1i2d3e4b5 .nav-list a {
    padding: 9px 10px !important;
  }
}