:root {
  --madicut-ink: #f7f5fb;
  --madicut-muted: #aaa5b2;
  --madicut-graphite: #09090c;
  --madicut-panel: #111117;
  --madicut-panel-raised: #181820;
  --madicut-line: rgba(255, 255, 255, 0.11);
  --madicut-violet: #7c63ff;
  --madicut-violet-bright: #9a87ff;
  --madicut-violet-deep: #5636ed;
  --madicut-lime: #b8ff28;
  --pf-v5-global--primary-color--100: var(--madicut-violet);
  --pf-v5-global--primary-color--200: var(--madicut-violet-deep);
  --pf-v5-global--BackgroundColor--100: var(--madicut-graphite);
  --pf-v5-global--BackgroundColor--200: var(--madicut-panel);
  --pf-v5-global--Color--100: var(--madicut-ink);
  --pf-v6-global--primary-color--100: var(--madicut-violet);
  --pf-v6-global--primary-color--200: var(--madicut-violet-deep);
}

body {
  background:
    radial-gradient(circle at 86% 8%, rgba(124, 99, 255, 0.14), transparent 28rem),
    var(--madicut-graphite) !important;
  color: var(--madicut-ink);
  font-family:
    "Pretendard Variable", Pretendard, "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pf-v5-c-page__header,
.pf-v6-c-page__header {
  border-bottom: 1px solid var(--madicut-line);
  background: rgba(17, 17, 23, 0.96) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.pf-v5-c-brand,
.pf-v6-c-brand {
  display: inline-flex;
  align-items: center;
  min-width: 150px;
  min-height: 36px;
  padding-left: 46px;
  background: url("../img/madicut-mark.png") left center / 34px 34px no-repeat;
  color: var(--madicut-ink) !important;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.pf-v5-c-brand::after,
.pf-v6-c-brand::after {
  content: "MADI CUT";
}

.pf-v5-c-brand img,
.pf-v6-c-brand img {
  display: none;
}

.pf-v5-c-page__sidebar,
.pf-v6-c-page__sidebar {
  border-right: 1px solid var(--madicut-line);
  background: var(--madicut-panel) !important;
}

.pf-v5-c-page__main,
.pf-v6-c-page__main {
  background: transparent !important;
}

.pf-v5-c-card,
.pf-v6-c-card,
.pf-v5-c-data-list,
.pf-v6-c-data-list {
  border: 1px solid var(--madicut-line);
  border-radius: 12px;
  background: rgba(24, 24, 32, 0.94) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.pf-v5-c-button.pf-m-primary,
.pf-v6-c-button.pf-m-primary {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--madicut-violet), var(--madicut-violet-deep)) !important;
  color: #fff !important;
  font-weight: 700;
}

.pf-v5-c-form-control,
.pf-v6-c-form-control {
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px;
  background: var(--madicut-panel-raised) !important;
  color: var(--madicut-ink) !important;
}

a,
.pf-v5-c-nav__link.pf-m-current,
.pf-v6-c-nav__link.pf-m-current {
  color: var(--madicut-violet-bright);
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v6-c-nav__link.pf-m-current {
  border-left-color: var(--madicut-lime) !important;
  background: rgba(124, 99, 255, 0.11) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--madicut-lime);
  outline-offset: 3px;
}
