/* MF_INYEON_VIRAL_V18_1
   One DOM / one renderer for desktop + mobile.
   Enhances the existing V8 constellation UI without changing DB/API logic.
*/

#inyeonConstellationV8Panel.mf-v18-viral {
  --mf-v18-ink:#3f3157;
  --mf-v18-muted:#766b82;
  --mf-v18-purple:#8f62d2;
  --mf-v18-purple-2:#a778e6;
  --mf-v18-line:rgba(143,98,210,.18);
  --mf-v18-soft:#faf6ff;
  --mf-v18-warm:#fffaf0;
  width:min(100%,920px);
  margin-inline:auto;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__head {
  margin-bottom:14px;
  text-align:center;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__head h2 {
  letter-spacing:-.03em;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__progress,
#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__rank,
#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4,
#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__complete {
  border:1px solid var(--mf-v18-line);
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#fbf7ff 62%,#fffaf2);
  box-shadow:0 12px 34px rgba(80,57,111,.08);
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__progress {
  padding:18px 20px;
  text-align:center;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-progress-kicker,
#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-rank-kicker {
  margin-bottom:8px;
  color:var(--mf-v18-purple);
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__stars {
  justify-content:center;
  gap:10px;
  margin:8px 0 6px;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__stars .on {
  filter:drop-shadow(0 0 10px rgba(151,101,219,.48));
  animation:mfV18StarPulse 2.2s ease-in-out infinite;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__stars .off {
  opacity:.32;
}

#inyeonConstellationV8Panel.mf-v18-viral.mf-v18-shared .mf-inyeon-v8__rank {
  position:relative;
  overflow:hidden;
  padding:22px 20px;
  text-align:center;
  border-color:rgba(143,98,210,.30);
  background:
    radial-gradient(circle at 50% 0,rgba(174,125,234,.16),transparent 42%),
    linear-gradient(145deg,#fff,#faf5ff 60%,#fffaf2);
}

#inyeonConstellationV8Panel.mf-v18-viral.mf-v18-shared .mf-inyeon-v8__rank-number {
  margin:4px auto 8px;
  color:#5b36a0;
  font-size:clamp(42px,7vw,72px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
  text-shadow:0 8px 28px rgba(114,71,174,.14);
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-rank-change {
  margin:12px 0 0;
  color:#785f88;
  font-size:13px;
  font-weight:800;
  line-height:1.55;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__map-wrap {
  margin:18px auto;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__map {
  width:min(100%,620px);
  min-height:360px;
  margin-inline:auto;
  border-radius:24px;
  box-shadow:
    0 20px 50px rgba(38,24,65,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__member.current span {
  transform:scale(1.08);
  filter:drop-shadow(0 0 12px rgba(255,221,104,.45));
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__empty {
  opacity:.62;
  transition:opacity .2s ease,transform .2s ease;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__empty:hover {
  opacity:.9;
  transform:translateY(-2px);
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4 {
  padding:18px;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4 h3 {
  margin-bottom:12px;
  color:var(--mf-v18-ink);
  font-size:18px;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4-row {
  min-height:52px;
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(248,244,252,.78);
  border:1px solid rgba(143,98,210,.10);
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4-row.current {
  background:linear-gradient(135deg,rgba(159,111,221,.15),rgba(255,246,210,.28));
  border-color:rgba(143,98,210,.28);
  box-shadow:0 8px 20px rgba(91,54,160,.08);
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note {
  margin:16px 0;
  padding:16px 18px;
  border:1px dashed rgba(143,98,210,.30);
  border-radius:18px;
  background:linear-gradient(135deg,#fbf7ff,#fffaf2);
  text-align:center;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note b,
#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note span {
  display:block;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note b {
  color:#5f447e;
  font-size:15px;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note span {
  margin-top:6px;
  color:var(--mf-v18-muted);
  font-size:12px;
  line-height:1.6;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note strong {
  color:#6e48a3;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note.is-complete {
  border-style:solid;
  border-color:rgba(197,153,54,.28);
  background:linear-gradient(135deg,#fff9e9,#fbf6ff);
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__actions {
  gap:10px;
  margin-top:16px;
}

#inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__action.main {
  min-height:52px;
  border-radius:15px;
  box-shadow:0 12px 26px rgba(121,80,189,.20);
}

html[data-mf-inyeon-viral-v18="shared"] #mfV15AfterActions {
  width:min(100%,920px);
}

html[data-mf-inyeon-viral-v18="shared"] #mfV15AfterKakao,
html[data-mf-inyeon-viral-v18="shared"] #mfV15AfterFresh {
  min-height:52px;
  border-radius:15px;
}

@keyframes mfV18StarPulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.10); }
}

@media (min-width:760px) {
  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__progress {
    max-width:620px;
    margin-inline:auto;
  }

  #inyeonConstellationV8Panel.mf-v18-viral.mf-v18-shared .mf-inyeon-v8__rank {
    max-width:620px;
    margin-inline:auto;
  }

  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4,
  #inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note {
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:759px) {
  #inyeonConstellationV8Panel.mf-v18-viral {
    width:100%;
  }

  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__progress,
  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__rank,
  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4,
  #inyeonConstellationV8Panel.mf-v18-viral .mf-v18-unlock-note {
    border-radius:16px;
  }

  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__map {
    min-height:300px;
    border-radius:20px;
  }

  #inyeonConstellationV8Panel.mf-v18-viral.mf-v18-shared .mf-inyeon-v8__rank-number {
    font-size:52px;
  }

  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__top4-row {
    min-height:48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #inyeonConstellationV8Panel.mf-v18-viral .mf-inyeon-v8__stars .on {
    animation:none;
  }
}