.ndc-dashboard {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 30px;
  font-family: Pretendard, 'Noto Sans KR', Arial, sans-serif;
}

.ndc-growth-card,
.ndc-quick {
  min-width: 0;
  min-height: 150px;
  padding: 20px;
  border-radius: 26px;
  text-decoration: none;
  box-shadow: 0 15px 38px #3f246d20;
}

.ndc-growth-card {
  color: #fff;
  background: radial-gradient(circle at 95% 0%, #ffe86f7d, transparent 31%), linear-gradient(145deg, #351477, #7442d9 58%, #ce398e);
}

.ndc-rank {
  display: flex;
  align-items: center;
  gap: 13px;
}

.ndc-rank i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 18px;
  background: #ffffff22;
  border: 1px solid #ffffff4d;
  font-size: 28px;
  font-style: normal;
}

.ndc-rank span,
.ndc-rank small,
.ndc-rank b,
.ndc-rank em {
  display: block;
}

.ndc-rank small {
  color: #ffed83;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 1.5px;
}

.ndc-rank b {
  margin: 4px 0;
  font-size: 20px;
}

.ndc-rank em {
  color: #dfd3f8;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.ndc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 17px;
}

.ndc-metrics span {
  padding: 9px 5px;
  border-radius: 13px;
  text-align: center;
  background: #ffffff12;
}

.ndc-metrics b,
.ndc-metrics small {
  display: block;
}

.ndc-metrics b {
  font-size: 15px;
}

.ndc-metrics small {
  margin-top: 4px;
  color: #ded4f2;
  font-size: 8px;
  font-weight: 850;
}

.ndc-quick {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 13px;
  position: relative;
  overflow: hidden;
  border: 1px solid #ece4f6;
  color: #31204f;
  background: #fff;
  transition: transform .18s, box-shadow .18s;
}

.ndc-quick:hover {
  transform: translateY(-4px);
  box-shadow: 0 21px 45px #3f246d31;
}

.ndc-quick > span {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #7650e5, #ef4892);
  font-size: 21px;
}

.ndc-review > span {
  background: linear-gradient(135deg, #ff9a46, #ff4f79);
}

.ndc-quick small,
.ndc-quick b,
.ndc-quick em {
  display: block;
}

.ndc-quick small {
  color: #8b50d4;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .6px;
}

.ndc-quick b {
  margin: 5px 0;
  font-size: 17px;
}

.ndc-quick em {
  color: #7c708c;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.ndc-quick strong {
  grid-column: 1 / -1;
  justify-self: end;
  color: #6d3acb;
  font-size: 11px;
}

.ndc-dashboard.compact {
  margin: 0 0 28px;
}

.ndc-dashboard.compact .ndc-growth-card,
.ndc-dashboard.compact .ndc-quick {
  min-height: 140px;
}

.ndc-overview {
  margin: 12px 0 55px;
}

.ndc-mission-board {
  margin: 0 0 65px;
}

.ndc-section-title > p {
  margin: 0;
  color: #796d8b;
  font-weight: 750;
}

.ndc-mission-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.ndc-mission-group {
  padding: 22px;
  border: 1px solid #e9e1f3;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 13px 35px #50307814;
}

.ndc-mission-group h3 {
  margin: 0 0 13px;
  font-size: 20px;
}

.ndc-missions {
  display: grid;
  gap: 8px;
}

.ndc-mission {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid #eee7f5;
  border-radius: 17px;
  background: #fbf9fe;
}

.ndc-mission > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: #8a6cc5;
  font-weight: 1000;
}

.ndc-mission b,
.ndc-mission p {
  display: block;
  margin: 0;
}

.ndc-mission b {
  font-size: 13px;
}

.ndc-mission p {
  margin-top: 3px;
  color: #857992;
  font-size: 9px;
  font-weight: 750;
}

.ndc-mission strong {
  color: #6940bb;
  font-size: 12px;
}

.ndc-mission em {
  grid-column: 2 / -1;
  color: #9a8aa9;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.ndc-mission.complete {
  border-color: #70dcb9;
  background: #edfff8;
}

.ndc-mission.complete > span {
  color: #164d3d;
  background: #75ebc3;
}

.ndc-mission.complete em {
  color: #12805d;
}

.ndc-jtop {
  position: relative;
}

.ndc-badge {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--route);
  background: color-mix(in srgb, var(--route) 10%, white);
  font-size: 10px;
  white-space: nowrap;
}

.ndc-journey-next {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 8px 13px;
  border-radius: 14px;
  color: #fff;
  background: var(--route);
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 950;
}

.ndc-steps a {
  position: relative;
}

.ndc-steps a > span {
  min-width: 0;
  flex: 1;
}

.ndc-steps a > em {
  color: #a295b2;
  font-size: 8px;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .7px;
}

.ndc-steps a.visited > em {
  color: var(--route);
}

.nd-floating-growth {
  position: fixed;
  z-index: 2147482990;
  left: 14px;
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 68px));
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid #ffffff82;
  border-radius: 16px;
  color: #4d285b;
  background: linear-gradient(135deg, #fff48aee, #ffbd69ee);
  box-shadow: 0 12px 30px #34154d4d;
  backdrop-filter: blur(12px);
  font-family: Pretendard, 'Noto Sans KR', Arial, sans-serif;
  text-decoration: none;
}

.nd-floating-growth b {
  font-size: 13px;
}

.nd-floating-growth span {
  font-size: 10px;
  font-weight: 950;
}

@media (max-width: 1000px) {
  .ndc-dashboard {
    grid-template-columns: 1fr 1fr;
  }

  .ndc-growth-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .ndc-dashboard,
  .ndc-mission-columns {
    grid-template-columns: 1fr;
  }

  .ndc-growth-card {
    grid-column: auto;
  }

  .ndc-growth-card,
  .ndc-quick {
    min-height: 0;
  }

  .ndc-mission-group {
    padding: 17px;
  }

  .ndc-badge {
    position: absolute;
    right: 0;
    top: 0;
  }

  .nd-floating-growth {
    left: 9px;
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 64px));
  }
}