/**
 * JIVESTAR — Membership badges v3
 * 단일 팔레트(확정). Icons: Lucide-compatible 24×24 in PHP.
 */

/* ------------------------------------------------------------------------- */
/* Shell — 수직·수평 정중앙 (compact / profile / DB 행 공통)                               */
/* ------------------------------------------------------------------------- */

.jivestar-mship {
  --mship-bg: #323232;
  --mship-bg2: #323232;
  --mship-border: #525252;
  --mship-text: #f5f5f5;
  --mship-shadow: rgba(0, 0, 0, 0.22);

  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  max-width: 100%;
  vertical-align: middle;
  font-family: inherit;
  font-weight: 625;
  letter-spacing: 0.028em;
  line-height: 1;
  white-space: nowrap;
  color: var(--mship-text);
  border: 1px solid var(--mship-border);
  border-radius: 999px;
  background: linear-gradient(165deg, var(--mship-bg2) 0%, var(--mship-bg) 50%, var(--mship-bg) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 1px 2px var(--mship-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  -webkit-font-smoothing: antialiased;
}

.jivestar-mship--compact {
  min-height: 1.3125rem;
  height: 1.3125rem;
  padding: 0 0.44rem;
  font-size: 0.625rem;
}

.jivestar-mship--profile {
  min-height: 1.5625rem;
  height: 1.5625rem;
  padding: 0 0.58rem;
  font-size: 0.6875rem;
}

.jivestar-mship__icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  line-height: 0;
}

.jivestar-mship--profile .jivestar-mship__icon-slot {
  width: 13px;
  height: 13px;
}

.jivestar-mship__glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.jivestar-mship__glyph--infinity > g {
  stroke-width: 1.75;
}

.jivestar-mship__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.jivestar-mship--no-icon {
  gap: 0;
  padding-left: 0.44rem;
  padding-right: 0.44rem;
}

.jivestar-mship--no-icon.jivestar-mship--profile {
  padding-left: 0.58rem;
  padding-right: 0.58rem;
}

.jivestar-mship--lock .jivestar-mship__icon-slot {
  opacity: 0.78;
}

[data-bs-theme="light"] .jivestar-mship {
  --mship-shadow: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 1px 3px var(--mship-shadow);
}

.jivestar-mship--profile:focus-visible {
  outline: 2px solid var(--mship-border);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------- */
/* 티어 팔레트                                                                            */
/* ------------------------------------------------------------------------- */

.jivestar-mship--lock {
  --mship-bg: #333336;
  --mship-bg2: #2e2e31;
  --mship-border: #48484e;
  --mship-text: #c9c9cf;
  --mship-shadow: rgba(0, 0, 0, 0.12);
}

[data-bs-theme="light"] .jivestar-mship--lock {
  --mship-bg: #f2f2f4;
  --mship-bg2: #ebebef;
  --mship-border: #d0d0d8;
  --mship-text: #45454b;
}

.jivestar-mship--star {
  --mship-bg: #45423f;
  --mship-bg2: #504c48;
  --mship-border: #a8988a;
  --mship-text: #ffffff;
  --mship-shadow: rgba(0, 0, 0, 0.22);
}

.jivestar-mship--pro {
  --mship-bg: #0f0f12;
  --mship-bg2: #16161c;
  --mship-border: #8b95a8;
  --mship-text: #ffffff;
  --mship-shadow: rgba(0, 0, 0, 0.38);
}

.jivestar-mship--ultra {
  --mship-bg: #181b28;
  --mship-bg2: #242838;
  --mship-border: #949dff;
  --mship-text: #fafbff;
  --mship-shadow: rgba(72, 78, 220, 0.25);
  box-shadow:
    0 1px 0 rgba(180, 188, 255, 0.12) inset,
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(100, 110, 255, 0.22);
}

.jivestar-mship--lifetime {
  --mship-bg: #3d3028;
  --mship-bg2: #4a3a31;
  --mship-border: #e88a4a;
  --mship-text: #ffffff;
  --mship-shadow: rgba(232, 138, 74, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 213, 179, 0.14) inset,
    0 1px 3px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(252, 187, 148, 0.14);
}

.jivestar-mship--infinity {
  --mship-bg: #0c0c0f;
  --mship-bg2: #181410;
  --mship-border: #ffd5b3;
  --mship-text: #ffffff;
  --mship-shadow: rgba(255, 213, 179, 0.12);
  box-shadow:
    0 1px 0 rgba(253, 237, 224, 0.12) inset,
    0 1px 4px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(230, 122, 59, 0.25);
}

/* ------------------------------------------------------------------------- */
/* Hover — Lock·Trial 과 동일 계열, 프리미엄 티어는 각자 --mship-border 톤으로 링·글로우        */
/* ------------------------------------------------------------------------- */

@media (hover: hover) {
  .jivestar-mship--lock:hover {
    border-color: color-mix(in srgb, var(--mship-border) 64%, #ffffff 36%);
    filter: brightness(1.05);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.1) inset,
      0 1px 2px var(--mship-shadow),
      0 0 0 1px color-mix(in srgb, var(--mship-border) 40%, transparent),
      0 0 14px color-mix(in srgb, var(--mship-border) 32%, transparent),
      0 5px 22px color-mix(in srgb, var(--mship-border) 24%, transparent);
  }

  [data-bs-theme="light"] .jivestar-mship--lock:hover {
    border-color: color-mix(in srgb, var(--mship-border) 58%, #000000 42%);
    filter: brightness(0.985);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.42) inset,
      0 1px 3px var(--mship-shadow),
      0 0 0 1px color-mix(in srgb, var(--mship-border) 48%, transparent),
      0 0 11px color-mix(in srgb, var(--mship-border) 22%, transparent);
  }

  .jivestar-mship--star:hover,
  .jivestar-mship--pro:hover {
    border-color: color-mix(in srgb, var(--mship-border) 64%, #ffffff 36%);
    filter: brightness(1.05);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.1) inset,
      0 1px 2px var(--mship-shadow),
      0 0 0 1px color-mix(in srgb, var(--mship-border) 40%, transparent),
      0 0 15px color-mix(in srgb, var(--mship-border) 33%, transparent),
      0 5px 24px color-mix(in srgb, var(--mship-border) 26%, transparent);
  }

  .jivestar-mship--ultra:hover {
    border-color: color-mix(in srgb, var(--mship-border) 52%, #ffffff 48%);
    filter: brightness(1.04);
    box-shadow:
      0 1px 0 rgba(210, 218, 255, 0.18) inset,
      0 1px 3px rgba(0, 0, 0, 0.35),
      0 0 0 1px color-mix(in srgb, var(--mship-border) 44%, transparent),
      0 0 20px rgba(130, 140, 255, 0.42),
      0 0 32px rgba(100, 110, 255, 0.29),
      0 6px 28px rgba(80, 90, 220, 0.21);
  }

  .jivestar-mship--lifetime:hover {
    border-color: color-mix(in srgb, var(--mship-border) 56%, #ffffff 44%);
    filter: brightness(1.04);
    box-shadow:
      0 1px 0 rgba(255, 213, 179, 0.22) inset,
      0 1px 3px rgba(0, 0, 0, 0.36),
      0 0 0 1px rgba(252, 187, 148, 0.36),
      0 0 17px color-mix(in srgb, var(--mship-border) 36%, transparent),
      0 5px 26px color-mix(in srgb, var(--mship-border) 29%, transparent);
  }

  .jivestar-mship--infinity:hover {
    border-color: color-mix(in srgb, var(--mship-border) 62%, #ffffff 38%);
    filter: brightness(1.04);
    box-shadow:
      0 1px 0 rgba(253, 237, 224, 0.18) inset,
      0 1px 4px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(230, 122, 59, 0.38),
      0 0 18px color-mix(in srgb, var(--mship-border) 32%, transparent),
      0 0 30px rgba(255, 213, 179, 0.17),
      0 6px 29px color-mix(in srgb, var(--mship-border) 24%, transparent);
  }
}

/* ------------------------------------------------------------------------- */
/* Admin preview row                                                                      */
/* ------------------------------------------------------------------------- */

.jivestar-mship-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.75rem;
}

.jivestar-forum-post-card .jivestar-mship--compact {
  margin-top: 0;
}

.jivestar-forum-comment .jivestar-mship--compact {
  margin-top: 0;
}