* { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", "Malgun Gothic", sans-serif;
      background:
        radial-gradient(circle at top, rgba(120,170,255,0.08), transparent 28%),
        linear-gradient(135deg, #0b1018 0%, #0d1320 45%, #121927 100%);
      color: #f3ead6;
     scrollbar-gutter: stable;
    
    }

    .app {
      width: min(1440px, calc(100% - 20px));
      margin: 20px auto;
      border-radius: 30px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.07);
      background: linear-gradient(135deg, #111723 0%, #0b0f18 45%, #0d1320 100%);
      box-shadow: 0 24px 60px rgba(0,0,0,0.38);
    }

    .workspace {
      display: grid;
      grid-template-columns: 320px 1fr;
      min-height: 980px;
    }

    .sidebar {
      padding: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
      border-right: 1px solid rgba(255,255,255,0.06);
    }

   
.switch-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    background: #1a1c24;
    border: 1px solid #252836;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 20px;
}

.switch-wrap a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    text-decoration: none;
    text-align: center;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    color: #5a6178;
    transition: .2s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.switch-wrap a:not(.active):hover {
    color: #c6d4e8;
    background: rgba(255,255,255,0.06);
}

.switch-wrap a.active {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    box-shadow: 0 2px 12px rgba(99,102,241,.30);
    animation: switchActiveAura 5s ease-in-out infinite;
}






    .mini-label {
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #7fc6ff;
      opacity: 0.9;
      margin-bottom: 8px;
    }

    .hero {
      font-size: 34px;
      font-weight: 900;
      line-height: 1.12;
      color: #ffffff;
      margin-bottom: 12px;
      word-break: keep-all;
    }

    .muted {
      font-size: 14px;
      line-height: 1.65;
      color: #b8c1d2;
      margin-bottom: 18px;
    }

    .sidebar-divider {
      width: 100%;
      height: 1px;
      margin: 14px 0 18px;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0));
    }

    .guide-trigger {
      width: 100%;
      border: none;
      cursor: pointer;
      padding: 16px 18px;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 900;
      color: #f2ede2;
      text-align: left;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.08);
      transition: 0.2s ease;
      margin-bottom: 10px;
      position: relative;
      overflow: visible;
    }

    .guide-trigger:hover {
      transform: translateY(-1px);
      border-color: rgba(122,140,255,0.28);
    }

    .guide-small {
      display: block;
      font-size: 11px;
      letter-spacing: 1.8px;
      color: #8ec7ff;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .guide-accent { color: #ffd48a; }


    .new-badge {
      position: absolute;
      top: -8px; right: -8px;
      padding: 4px 10px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1.5px;
      color: #1a1000;
      background: linear-gradient(90deg, #ffd700, #fff8dc, #ffd700, #ffb700, #ffd700);
      background-size: 250% auto;
      animation: newShimmer 2.5s linear infinite, newPulse 2s ease-in-out infinite alternate;
      box-shadow: 0 2px 10px rgba(255,215,0,0.35);
      border: 1px solid rgba(255,215,0,0.50);
    }

    .oprate-btn-wrap {
  position: relative;
  margin-bottom: 10px;
}

.new-badge-rate {
  top: -10px;
  right: -10px;
  z-index: 8;
}

.tier-btn-op-rate .tier-btn-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}
.oprate-main-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(130,100,255,0.30), rgba(80,180,255,0.26));
  border: 1px solid rgba(180,220,255,0.28);
  box-shadow:
    0 0 10px rgba(100,200,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
  flex-shrink: 0;
}

.oprate-main-icon {
  display: inline-block;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: initial !important;
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(120,210,255,0.35));
}
    
    @keyframes newShimmer {
      0%   { background-position: 250% center; }
      100% { background-position: 0% center; }
    }

    @keyframes newPulse {
      0% {
        box-shadow: 0 2px 10px rgba(255,215,0,0.30);
        transform: scale(1);
      }
      100% {
        box-shadow: 0 4px 18px rgba(255,215,0,0.55), 0 0 22px rgba(255,180,0,0.25);
        transform: scale(1.04);
      }
    }


    .tier-btn {
      width: 100%;
      border: none;
      cursor: pointer;
      padding: 16px 18px;
      border-radius: 18px;
      font-size: 15px;
      font-weight: 900;
      text-align: left;
      transition: 0.2s ease;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }

   .tier-btn-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

    .tier-btn-small {
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      opacity: 0.85;
    }

    .tier-btn-main {
      font-size: 15px;
      font-weight: 900;
    }

    .tier-btn-tiny {
      font-size: 11px;
      opacity: 0.65;
    }

   .tier-lock-icon {
  font-size: 36px;
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
}

    .tier-btn-op {
      background: linear-gradient(135deg, rgba(62,220,125,0.18), rgba(30,80,50,0.6));
      border: 1px solid rgba(62,220,125,0.35);
      color: #8ef0c9;
    }

    .tier-btn-class-win {
      background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(120,30,30,0.40));
      border: 1px solid rgba(239,68,68,0.30);
      border-top:2px solid #ef4444 !important;
      color: #ffb4b4;
    }

    .tier-btn-class-win:hover {
      transform: translateY(-1px);
      border-color: rgba(255,120,120,0.46);
      box-shadow: 0 0 18px rgba(239,68,68,0.14);
    }

    .tier-btn-class-win .tier-btn-small {
      color: #ffb4b4;
    }

    .tier-btn-class-win .tier-btn-main {
      color: #fff0f0;
    }

    .badge-classwin-solid {
      color: #2a0808 !important;
      background: linear-gradient(135deg, #ff8a8a, #ffb3b3) !important;
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow:
        0 4px 10px rgba(239,68,68,0.20),
        inset 0 1px 0 rgba(255,255,255,0.18);
    }



    .tier-btn-op:hover {
      transform: translateY(-1px);
      border-color: rgba(62,220,125,0.6);
      box-shadow: 0 0 18px rgba(62,220,125,0.15);
    }

    .tier-btn-favor {
      background: linear-gradient(135deg, rgba(255,196,90,0.18), rgba(80,50,20,0.6));
      border: 1px solid rgba(255,196,90,0.35);
      color: #ffd48a;
    }

    .tier-btn-favor:hover {
      transform: translateY(-1px);
      border-color: rgba(255,196,90,0.6);
      box-shadow: 0 0 18px rgba(255,196,90,0.15);
    }

        .tier-btn-op-rate {
      background: linear-gradient(135deg, rgba(120,100,255,0.16), rgba(80,180,255,0.12), rgba(60,220,180,0.08));
      border: 1px solid rgba(140,160,255,0.40);
      color: #c8d8ff;
      animation: opRateGlow 2.4s ease-in-out infinite alternate, opRateAura 6s ease-in-out infinite;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .tier-btn-op-rate:hover {
      transform: translateY(-2px);
    }

    .tier-btn-op-rate::before {
      content: ""; position: absolute; inset: 0; border-radius: 18px;
      background: radial-gradient(ellipse at 50% 0%, rgba(130,140,255,0.20) 0%, rgba(80,200,255,0.08) 50%, transparent 100%);
      animation: opRateInner 2.4s ease-in-out infinite alternate; z-index: 0;
    }

    .tier-btn-op-rate::after {
      content: ""; position: absolute; inset: -1px; border-radius: 19px;
      background: conic-gradient(from var(--angle,0deg), rgba(130,100,255,0.70) 0deg, rgba(100,200,255,0.90) 90deg, rgba(80,220,180,0.65) 180deg, rgba(160,120,255,0.75) 270deg, rgba(130,100,255,0.70) 360deg);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      padding: 1.5px; animation: borderRotate 5s linear infinite; z-index: 0;
    }

    .tier-btn-op-rate .tier-btn-small { color: #a8b8ff; }

    .tier-btn-op-rate .tier-btn-main {
      background: linear-gradient(90deg, #7a7aff, #a8deff, #ffffff, #c8a8ff, #a8ffdd, #a8deff, #7a7aff);
      background-size: 250% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      animation: textShimmer 3s linear infinite;
      filter: drop-shadow(0 0 5px rgba(130,140,255,0.50));
    }

.tier-btn-op-rate .oprate-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  border-radius: 999px;
  vertical-align: middle;
  background: linear-gradient(135deg, rgba(130,100,255,0.30), rgba(80,180,255,0.26));
  border: 1px solid rgba(180,220,255,0.28);
  box-shadow:
    0 0 10px rgba(100,200,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

.tier-btn-op-rate .oprate-icon {
  display: inline-block;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: initial !important;
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(120,210,255,0.35));
  animation: opRateIconPulse 2.2s ease-in-out infinite alternate;
}

@keyframes opRateIconPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(120,210,255,0.22));
  }
  100% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px rgba(120,210,255,0.45));
  }
}
    
    @keyframes opRateGlow {
      0%   { box-shadow: 0 0 10px rgba(100,200,255,0.25), 0 0 24px rgba(122,140,255,0.12); }
      100% { box-shadow: 0 0 18px rgba(100,220,255,0.45), 0 0 38px rgba(122,140,255,0.22); }
    }

    @keyframes opRateInner {
      0%   { opacity: 0.55; }
      100% { opacity: 1.0; }
    }

    @keyframes opRateAura {
      0%, 80%, 100% {
        box-shadow: 0 0 10px rgba(100,200,255,0.25), 0 0 24px rgba(122,140,255,0.12);
      }
      88% {
        box-shadow: 0 0 18px rgba(130,180,255,0.50), 0 0 36px rgba(100,200,255,0.30), 0 0 56px rgba(160,120,255,0.20);
      }
      94% {
        box-shadow: 0 0 12px rgba(130,180,255,0.30), 0 0 24px rgba(100,200,255,0.16), 0 0 36px rgba(160,120,255,0.10);
      }
    }

    .oprate-spark-glow {
      position: absolute; inset: -45%; border-radius: 18px; pointer-events: none;
      background: radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 18%, rgba(130,160,255,0.16) 34%, transparent 62%);
      opacity: 0; transform: scale(0.55);
      animation: opRateSparkGlow 6s ease-in-out infinite; z-index: 3;
    }

    .oprate-spark-sweep {
      position: absolute; top: -35%; left: -130%; width: 72%; height: 190%;
      border-radius: 18px; pointer-events: none;
      background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.38) 48%, rgba(255,255,255,0.08) 68%, rgba(255,255,255,0) 100%);
      transform: rotate(18deg); opacity: 0;
      animation: opRateSparkSweep 6s linear infinite; z-index: 4;
    }

    @keyframes opRateSparkGlow {
      0%, 80%, 100% { opacity: 0; transform: scale(0.55); }
      86% { opacity: 0.55; transform: scale(1.05); }
      92% { opacity: 0.18; transform: scale(1.42); }
    }

    @keyframes opRateSparkSweep {
      0%, 80% { left: -130%; opacity: 0; }
      84% { opacity: 1; }
      96% { left: 145%; opacity: 0.65; }
      100% { left: 145%; opacity: 0; }
    }

    /* ===== 미니 팝업 ===== */
    .mini-popup {
      position: fixed;
      z-index: 9999;
      background: linear-gradient(180deg, rgba(20,26,40,0.99), rgba(13,18,30,0.99));
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 16px;
      padding: 14px 16px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
      min-width: 200px;
      max-width: 240px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .mini-popup.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .mini-popup-label {
      font-size: 10px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: #7fc6ff;
      margin-bottom: 6px;
      font-weight: 900;
    }

    .mini-popup-title {
      font-size: 13px;
      font-weight: 900;
      color: #ffffff;
      margin-bottom: 5px;
    }

    .mini-popup-desc {
      font-size: 12px;
      color: #b8c4d6;
      line-height: 1.6;
    }

    .mini-popup-desc .cond {
      color: #ffd48a;
      font-weight: 900;
    }

    /* ===== 달력 ===== */
    .sidebar-calendar {
      border-radius: 20px;
      padding: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.07);
    }

    .cal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .cal-month {
      font-size: 14px;
      font-weight: 900;
      color: #c6d4e8;
      letter-spacing: 0.5px;
    }

    .cal-nav {
      background: none;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: #7a8da8;
      cursor: pointer;
      font-size: 13px;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.18s ease;
    }

    .cal-nav:hover {
      background: rgba(255,255,255,0.07);
      color: #c6d4e8;
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }

    .cal-dow {
      text-align: center;
      font-size: 10px;
      font-weight: 900;
      color: #5a6a82;
      padding: 4px 0;
      letter-spacing: 0.5px;
    }

    .cal-dow.sun { color: rgba(255,100,100,0.55); }
    .cal-dow.sat { color: rgba(100,160,255,0.55); }

    .cal-day {
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #8a9ab5;
      padding: 5px 0;
      border-radius: 8px;
      cursor: default;
      transition: 0.15s ease;
      line-height: 1;
    }

    .cal-day.other-month { color: rgba(255,255,255,0.12); }

    .cal-day.today {
      background: linear-gradient(135deg, #7a8cff, #4bd3ff);
      color: #08111e;
      font-weight: 900;
    }

    .cal-day.sun { color: rgba(255,120,120,0.75); }
    .cal-day.sat { color: rgba(120,180,255,0.75); }
    .cal-day.today.sun, .cal-day.today.sat { color: #08111e; }

    .main {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
    }

    .panel {
      border-radius: 24px;
      padding: 22px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
      position: relative;
      z-index: 1;
    }

   .intro-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  text-align: center;
  position: relative;
}

    .intro-title {
      margin: 0;
      font-size: 30px;
      font-weight: 900;
      color: #ffffff;
      line-height: 1.25;
      word-break: keep-all;
    }

    .intro-logo-wrap {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .intro-logo-sub {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.40);
      font-weight: 800;
    }

    .intro-logo-title {
      margin: 0;
      font-size: 34px;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 30%, #7fc6ff 60%, #8ef0c9 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: textShimmer 4s linear infinite;
      filter: drop-shadow(0 0 12px rgba(122,140,255,0.15));
    }

    .intro-logo-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(122,140,255,0.10);
      border: 1px solid rgba(122,140,255,0.18);
      font-size: 11px;
      font-weight: 900;
      color: #7fc6ff;
      letter-spacing: 1px;
    }
    

    .intro-desc {
      margin-top: 14px;
      color: #c6d1e0;
      font-size: 15px;
      line-height: 1.9;
      word-break: keep-all;
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }

    .intro-desc .accent-red   { color: #ff8f8f; font-weight: 900; }
    .intro-desc .accent-green { color: #8ef0c9; font-weight: 900; }
    .intro-desc .accent-op      { color: #8ef0c9; font-weight: 900; }
.intro-desc .accent-favor   { color: #ffd48a; font-weight: 900; }
.intro-desc .accent-blue    { color: #7fc6ff; font-weight: 900; }
.intro-desc .accent-purple  { color: #c4b5fd; font-weight: 900; }
.intro-desc .accent-pink    { color: #ff8fc8; font-weight: 900; }

    .status-line {
      margin-top: 14px;
      color: #9ecdf7;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.8;
    }

    .intro-actions {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 2;
    }

    .intro-inquiry-btn {
      border: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
        linear-gradient(135deg, rgba(160,120,255,0.10), rgba(124,58,237,0.06));
      color: #f3ead6;
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: 0.18s ease;
      box-shadow: 0 6px 16px rgba(0,0,0,0.16);
    }

    .intro-inquiry-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(160,120,255,0.24);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)),
        linear-gradient(135deg, rgba(160,120,255,0.14), rgba(124,58,237,0.08));
    }

    .intro-inquiry-icon {
      font-size: 14px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    
    .section-divider {
      width: 100%;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, #2cc0ff, #4caeff, #2cc0ff);
      opacity: 0.85;
      position: relative;
      z-index: 1;
    }

    .duo-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      position: relative;
      z-index: 2;
    }

    .tournament-card {
      border-radius: 24px;
      padding: 24px;
      background: linear-gradient(180deg, rgba(30,37,55,0.96), rgba(18,23,37,0.98));
      border: 1px solid rgba(255,255,255,0.08);
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: 250px;
      position: relative;
      overflow: hidden;
      z-index: 2;
    }

    .tournament-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0) 34%);
      pointer-events: none;
    }

    .op-card {
      border-color: rgba(62,220,125,0.42);
      box-shadow: 0 18px 36px rgba(0,0,0,0.22), 0 0 18px rgba(62,220,125,0.10), 0 0 48px rgba(62,220,125,0.08);
    }

    .favor-card {
      border-color: rgba(255,196,90,0.44);
      box-shadow: 0 18px 36px rgba(0,0,0,0.22), 0 0 18px rgba(255,196,90,0.10), 0 0 48px rgba(255,196,90,0.08);
    }

    .card-label {
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 900;
      position: relative;
      z-index: 1;
    }

    .op-card .card-label   { color: #8ef0c9; }
    .favor-card .card-label{ color: #ffd48a; }

    .card-title {
      font-size: 28px;
      font-weight: 900;
      line-height: 1.25;
      position: relative;
      z-index: 1;
    }

    .op-card .card-title   { color: #8ef0c9; }
    .favor-card .card-title{ color: #ffd48a; }

    .card-desc {
      color: #b8c4d6;
      line-height: 1.8;
      font-size: 14px;
      position: relative;
      z-index: 1;
      min-height: 78px;
      max-width: 82%;
    }

    .card-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      position: relative;
      z-index: 3;
      margin-top: auto;
    }

    .primary-btn, .ghost-btn, .secondary-btn {
      border: none;
      cursor: pointer;
      border-radius: 16px;
      padding: 13px 16px;
      font-size: 15px;
      font-weight: 900;
      transition: 0.18s ease;
      position: relative;
      z-index: 3;
    }

    .primary-btn {
      color: #09111c;
      background: linear-gradient(135deg, #7a8cff, #4bd3ff);
      box-shadow: 0 12px 24px rgba(78,168,255,0.18);
    }

    .ghost-btn, .secondary-btn {
      color: #f2f5ff;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .primary-btn:hover, .ghost-btn:hover, .secondary-btn:hover { transform: translateY(-1px); }
    .primary-btn:disabled, .ghost-btn:disabled, .secondary-btn:disabled {
      opacity: 0.5; cursor: not-allowed; transform: none !important;
    }

    .stamp {
      position: absolute;
      right: 18px; bottom: 18px;
      width: 132px; height: 132px;
      border-radius: 50%;
      border: 5px solid rgba(255,88,88,0.95);
      color: rgba(255,118,118,0.95);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: rotate(-12deg);
      text-align: center;
      font-weight: 900;
      z-index: 4;
      box-shadow: 0 0 18px rgba(255,80,80,0.22), 0 0 34px rgba(255,80,80,0.16), inset 0 0 0 2px rgba(255,255,255,0.03);
      background: radial-gradient(circle at center, rgba(255,70,70,0.05), rgba(255,70,70,0.01));
      opacity: 0.92;
      filter: saturate(1.05);
      pointer-events: none;
    }

    .stamp.show { display: flex; }

 .stamp::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px dashed rgba(255,92,92,0.40);
  pointer-events: none;
}

.stamp.stamp-ss::before,.grade-stamp.stamp-ss::before {
  border-color: rgba(255,210,60,0.60);
}
.stamp.stamp-s::before,.grade-stamp.stamp-s::before {
  border-color: rgba(100,200,255,0.60);
}
.stamp.stamp-a::before,.grade-stamp.stamp-a::before {
  border-color: rgba(255,90,60,0.60);
}
.stamp.stamp-b::before,.grade-stamp.stamp-b::before {
  border-color: rgba(255,160,60,0.60);
}
.stamp.stamp-c::before,.grade-stamp.stamp-c::before {
  border-color: rgba(180,120,255,0.55);
}
.stamp.stamp-d::before,.grade-stamp.stamp-d::before {
  border-color: rgba(90,180,255,0.55);
}
.stamp.stamp-e::before,.grade-stamp.stamp-e::before {
  border-color: rgba(90,230,140,0.55);
}
.stamp.stamp-f::before,.grade-stamp.stamp-f::before {
  border-color: rgba(160,160,160,0.45);
}

    .stamp .date       { font-size: 12px; letter-spacing: 1px; margin-bottom: 2px; }
    .stamp .grade-text { font-size: 20px; font-weight: 900; line-height: 1.1; }
    .stamp .done       { font-size: 13px; line-height: 1.2; word-break: keep-all; }

    .ranking-board {
      position: relative;
      overflow: hidden;
      z-index: 1;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .ranking-board.locked .board-inner {
      filter: blur(7px);
      opacity: 0.55;
      transform: scale(0.995);
      pointer-events: none;
      user-select: none;
    }

    .ranking-board.board-op {
      border-color: rgba(62,220,125,0.42);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015), 0 0 18px rgba(62,220,125,0.12), 0 0 44px rgba(62,220,125,0.08);
    }

    .ranking-board.board-favor {
      border-color: rgba(255,196,90,0.44);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015), 0 0 18px rgba(255,196,90,0.12), 0 0 44px rgba(255,196,90,0.08);
    }

    .glass-lock {
      position: absolute; inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), rgba(10,14,22,0.28);
      backdrop-filter: blur(8px) saturate(0.9);
      pointer-events: auto;
    }

    .ranking-board.locked .glass-lock { display: flex; }

    .glass-lock-card {
      text-align: center;
      padding: 22px 24px;
      border-radius: 22px;
      background: rgba(12,17,28,0.46);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 12px 30px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.02) inset;
      max-width: 420px;
      pointer-events: none;
    }

    .glass-lock-icon  { font-size: 34px; margin-bottom: 10px; }
    .glass-lock-title { font-size: 22px; font-weight: 900; color: #ffffff; line-height: 1.3; margin-bottom: 10px; word-break: keep-all; }
    .glass-lock-desc  { font-size: 14px; line-height: 1.8; color: #c6d0df; word-break: keep-all; }

    .ranking-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .ranking-title-wrap { min-width: 0; }
    .ranking-title       { font-size: 28px; font-weight: 900; color: #ffffff; line-height: 1.25; word-break: keep-all; }
    .ranking-title-op    { color: #86f0b8 !important; }
    .ranking-title-favor { color: #ffd48a !important; }
    .ranking-sub         { margin-top: 8px; color: #aeb9cb; font-size: 13px; line-height: 1.75; }


    .mode-tabs, .period-tabs { display: flex; gap: 10px; flex-wrap: wrap; }

    .mini-tab {
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: #dce5f4;
      border-radius: 14px;
      padding: 11px 14px;
      min-width: 118px; min-height: 64px;
      font-size: 14px; font-weight: 900;
      cursor: pointer;
      transition: 0.18s ease;
      text-align: center;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
    }

    .mini-tab.active-op     { background: linear-gradient(135deg, #6ff0b7, #35c77c); color: #0c1a13; border-color: transparent; }
    .mini-tab.active-favor  { background: linear-gradient(135deg, #ffd48a, #ffac55); color: #2a1400; border-color: transparent; }
    .mini-tab.disabled      { opacity: 0.36; filter: grayscale(0.3); cursor: not-allowed; }
    .mini-tab .tab-date     { font-size: 12px; font-weight: 800; line-height: 1.2; opacity: 0.95; }

    /* ===== 기간 탭 D안 (세그먼트형) ===== */
    .period-tabs {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border-radius: 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      flex-wrap: nowrap;
    }

    .period-tabs .mini-tab {
      min-width: 92px;
      min-height: auto;
      padding: 8px 14px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #7a8da8;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
      cursor: pointer;
      transition: 0.16s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .period-tabs .mini-tab:hover {
      color: #c6d4e8;
      background: rgba(255,255,255,0.04);
    }

    .period-tabs .mini-tab.active-period {
      background: rgba(255,255,255,0.08);
      color: #ffffff;
      box-shadow: 0 0 8px rgba(127,198,255,0.08);
    }

           .period-tabs .mini-tab.active-period::after {
      content: "✔️";
      position: absolute;
      top: -4px;
      right: -4px;
      font-size: 14px;
      pointer-events: none;
      filter: drop-shadow(0 0 4px rgba(62,220,125,0.35));
    }

    .period-tabs .mini-tab {
      position: relative;
    }

    .period-tabs .mini-tab.disabled {
      opacity: 0.35;
      cursor: not-allowed;
      background: transparent;
    }

    .period-tabs .mini-tab .tab-date {
      font-size: 10px;
      font-weight: 800;
      opacity: 0.65;
    }

    .period-tabs .mini-tab.active-period .tab-date {
      opacity: 0.90;
    }

    
    .summary-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }

     /* ===== TOP3 포디움 요약 ===== */
    .podium-section {
      border-radius: 16px;
      padding: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
      border: 1px solid rgba(255,255,255,0.07);
    }

    .podium-section-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 900;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .ps-champ .podium-section-title { color: #ff8ca5; }
    .ps-rate  .podium-section-title { color: #6bc3ff; }

    .podium-trio {
      display: grid;
      grid-template-columns: 1fr 1.08fr 1fr;
      gap: 6px;
      align-items: end;
    }

    .pod-card {
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
      transition: 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    .pod-card:hover {
      transform: translateY(-2px);
    }

    /* ===== 왼쪽 위 모서리 박지 ===== */
    .pod-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 28px;
      height: 28px;
      pointer-events: none;
      z-index: 5;
    }

    .pod-1st::before {
      background: linear-gradient(135deg,
        rgba(255,225,100,0.65) 0%,
        rgba(255,200,60,0.40) 30%,
        rgba(255,215,0,0.18) 50%,
        transparent 50%);
      border-radius: 12px 0 0 0;
    }

    .pod-2nd::before {
      background: linear-gradient(135deg,
        rgba(220,225,235,0.55) 0%,
        rgba(192,200,215,0.32) 30%,
        rgba(192,192,192,0.14) 50%,
        transparent 50%);
      border-radius: 12px 0 0 0;
    }

    .pod-3rd::before {
      background: linear-gradient(135deg,
        rgba(220,160,80,0.55) 0%,
        rgba(205,140,60,0.32) 30%,
        rgba(205,127,50,0.14) 50%,
        transparent 50%);
      border-radius: 12px 0 0 0;
    }

    /* ===== 박지 빛반사 ===== */
    .pod-card::after {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 22px;
      height: 22px;
      pointer-events: none;
      z-index: 6;
    }

    .pod-1st::after {
      background: linear-gradient(135deg,
        rgba(255,255,255,0.35) 0%,
        rgba(255,255,255,0.12) 20%,
        transparent 42%);
      border-radius: 12px 0 0 0;
    }

    .pod-2nd::after {
      background: linear-gradient(135deg,
        rgba(255,255,255,0.28) 0%,
        rgba(255,255,255,0.10) 20%,
        transparent 42%);
      border-radius: 12px 0 0 0;
    }

    .pod-3rd::after {
      background: linear-gradient(135deg,
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.08) 20%,
        transparent 42%);
      border-radius: 12px 0 0 0;
    }

    /* ===== 1등 ===== */
    .pod-1st {
      order: 2;
      min-height: 112px;
      background:
        radial-gradient(circle at 50% 20%, rgba(255,220,100,0.10), transparent 55%),
        linear-gradient(180deg, rgba(40,35,18,0.96), rgba(22,20,12,0.98));
      border: 1.5px solid rgba(255,215,0,0.26);
      animation: goldPulse 3s ease-in-out infinite;
    }

    /* ===== 2등 ===== */
    .pod-2nd {
      order: 1;
      min-height: 96px;
      background:
        radial-gradient(circle at 50% 20%, rgba(192,200,220,0.08), transparent 55%),
        linear-gradient(180deg, rgba(32,34,42,0.96), rgba(18,20,28,0.98));
      border: 1.5px solid rgba(192,192,192,0.20);
      animation: silverPulse 3.2s ease-in-out infinite;
    }

    /* ===== 3등 ===== */
    .pod-3rd {
      order: 3;
      min-height: 96px;
      background:
        radial-gradient(circle at 50% 20%, rgba(205,140,60,0.08), transparent 55%),
        linear-gradient(180deg, rgba(36,28,18,0.96), rgba(20,16,12,0.98));
      border: 1.5px solid rgba(205,127,50,0.20);
      animation: bronzePulse 3.4s ease-in-out infinite;
    }

    .pod-rank {
      font-weight: 900;
      line-height: 1;
      position: relative;
      z-index: 2;
    }

    .pod-1st .pod-rank { font-size: 15px; color: #ffd700; }
    .pod-2nd .pod-rank { font-size: 13px; color: #dcdcdc; }
    .pod-3rd .pod-rank { font-size: 13px; color: #e8a860; }

    .pod-icon {
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .pod-icon img {
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.30));
    }

    .pod-1st .pod-icon {
      width: 46px;
      height: 46px;
      border: 2px solid rgba(255,215,0,0.45);
      background:
        radial-gradient(circle at 30% 30%, rgba(255,215,0,0.10), transparent 50%),
        linear-gradient(180deg, rgba(50,44,20,0.95), rgba(24,22,10,0.98));
    }
    .pod-1st .pod-icon img { width: 36px; height: 36px; }

    .pod-2nd .pod-icon,
    .pod-3rd .pod-icon {
      width: 40px;
      height: 40px;
    }

    .pod-2nd .pod-icon {
      border: 1.5px solid rgba(192,192,192,0.38);
      background:
        radial-gradient(circle at 30% 30%, rgba(192,192,192,0.08), transparent 50%),
        linear-gradient(180deg, rgba(36,38,46,0.95), rgba(20,22,28,0.98));
    }
    .pod-2nd .pod-icon img { width: 30px; height: 30px; }

    .pod-3rd .pod-icon {
      border: 1.5px solid rgba(205,127,50,0.38);
      background:
        radial-gradient(circle at 30% 30%, rgba(205,127,50,0.08), transparent 50%),
        linear-gradient(180deg, rgba(40,30,18,0.95), rgba(22,18,12,0.98));
    }
    .pod-3rd .pod-icon img { width: 30px; height: 30px; }

    .pod-name {
      font-weight: 900;
      line-height: 1.15;
      word-break: keep-all;
      position: relative;
      z-index: 2;
    }

    .pod-1st .pod-name {
      font-size: 14px;
      color: #fff8e0;
      text-shadow: 0 0 4px rgba(255,215,0,0.12);
    }

    .pod-2nd .pod-name {
      font-size: 12px;
      color: #f0f0f8;
    }

    .pod-3rd .pod-name {
      font-size: 12px;
      color: #ffe8d0;
    }

    .pod-val {
      font-weight: 900;
      line-height: 1;
      position: relative;
      z-index: 2;
    }

    .ps-champ .pod-1st .pod-val { font-size: 16px; color: #ff8ca5; }
    .ps-champ .pod-2nd .pod-val,
    .ps-champ .pod-3rd .pod-val { font-size: 14px; color: #ffb8c8; }

    .ps-rate .pod-1st .pod-val { font-size: 16px; color: #6bc3ff; }
    .ps-rate .pod-2nd .pod-val,
    .ps-rate .pod-3rd .pod-val { font-size: 14px; color: #a8d8ff; }

    @keyframes goldPulse {
      0%,100% { box-shadow: 0 0 8px rgba(255,215,0,0.16), 0 0 16px rgba(255,200,60,0.06); }
      50% { box-shadow: 0 0 14px rgba(255,215,0,0.26), 0 0 28px rgba(255,200,60,0.12); }
    }

    @keyframes silverPulse {
      0%,100% { box-shadow: 0 0 6px rgba(192,192,192,0.12), 0 0 12px rgba(180,200,220,0.05); }
      50% { box-shadow: 0 0 10px rgba(192,192,192,0.22), 0 0 20px rgba(180,200,220,0.08); }
    }

    @keyframes bronzePulse {
      0%,100% { box-shadow: 0 0 6px rgba(205,127,50,0.12), 0 0 12px rgba(220,160,80,0.05); }
      50% { box-shadow: 0 0 10px rgba(205,127,50,0.22), 0 0 20px rgba(220,160,80,0.08); }
    }
    

    .summary-card {
      position: relative; overflow: hidden;
      border-radius: 22px; padding: 22px 20px 20px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, rgba(35,38,50,0.96), rgba(24,27,38,0.98));
      box-shadow: 0 22px 42px rgba(0,0,0,0.28), 0 0 38px rgba(255,80,80,0.18), 0 0 86px rgba(255,80,80,0.14);
    }

    .summary-card::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at top right, rgba(255,110,110,0.18), transparent 34%), radial-gradient(circle at bottom left, rgba(255,70,70,0.10), transparent 36%);
      pointer-events: none; z-index: 0;
    }

    .summary-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; }

    .summary-icon {
      width: 88px; height: 88px; border-radius: 22px;
      display: flex; align-items: center; justify-content: center;
      font-size: 50px; font-weight: 900;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 45%), linear-gradient(180deg, rgba(255,120,120,0.18), rgba(255,60,60,0.10));
      border: 1px solid rgba(255,130,130,0.24);
      box-shadow: 0 0 34px rgba(255,90,90,0.24), inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    .summary-label { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: #ffb1b1; margin-bottom: 8px; font-weight: 900; }
    .summary-main  { font-size: 34px; font-weight: 900; color: #ffffff; line-height: 1.2; word-break: keep-all; }
    .summary-rank  { margin-top: 6px; font-size: 18px; font-weight: 900; color: #ffd5d5; }
    .summary-meta  { margin-top: 8px; color: #e3c9c9; font-size: 13px; line-height: 1.7; }

    .ranking-list { display: grid; gap: 12px; }


    .rank-row {
      display: grid;
      grid-template-columns: 50px 44px minmax(0, 1.4fr) 110px 130px 130px;
      gap: 10px;
      align-items: center;
      border-radius: 16px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.06);
      transition: 0.12s ease;
    }

    .rank-row:hover {
      background: rgba(255,255,255,0.055);
      border-color: rgba(255,255,255,0.10);
    }

    .rank-row.row-1st {
      background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,180,60,0.03));
      border-color: rgba(255,215,0,0.18);
    }

    .rank-row.row-2nd {
      background: linear-gradient(135deg, rgba(192,192,192,0.05), rgba(160,170,190,0.02));
      border-color: rgba(192,192,192,0.14);
    }

    .rank-row.row-3rd {
      background: linear-gradient(135deg, rgba(205,127,50,0.06), rgba(180,120,60,0.02));
      border-color: rgba(205,127,50,0.14);
    }
    
       .rank-row.dimmed {
      opacity: 0.18;
      filter: blur(5px);
      user-select: none;
      pointer-events: none;
    }
    .rank-col { min-width: 0; }

    .rank-num {
      font-size: 18px;
      font-weight: 900;
      color: #7fd2ff;
      text-align: center;
    }

    .rank-num.top1 { color: #ffd700; }
    .rank-num.top2 { color: #c0c0c0; }
    .rank-num.top3 { color: #cd7f32; }
    
    .rank-name {
      font-size: 17px;
      font-weight: 900;
      color: #ffffff;
      line-height: 1.2;
      word-break: keep-all;
    }

    .rank-job {
      margin-top: 2px;
      font-size: 11px;
      color: #aeb8cb;
    }

    .metric-title {
      font-size: 10px;
      color: #98a9c5;
      margin-bottom: 4px;
      font-weight: 800;
    }

    .metric-main {
      font-size: 16px;
      font-weight: 900;
      color: #ffffff;
    }

    .metric-sub {
      margin-top: 3px;
      font-size: 10px;
      color: #b6c2d6;
      line-height: 1.4;
    }

    .meter {
      margin-top: 4px;
      width: 100%;
      height: 9px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.05);
    }

    .meter-fill {
      height: 100%;
      border-radius: 999px;
    }

    .rank-icon-wrap {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      overflow: hidden;
      border: 1.5px solid rgba(217,181,111,0.32);
      background: linear-gradient(180deg, rgba(30,35,50,0.94), rgba(15,20,35,0.98));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .rank-icon-wrap img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.30));
    }

    .rank-icon-wrap.icon-1st {
      border-color: rgba(255,215,0,0.50);
      box-shadow: 0 0 6px rgba(255,215,0,0.12);
    }

    .rank-icon-wrap.icon-2nd {
      border-color: rgba(192,192,192,0.42);
    }

    .rank-icon-wrap.icon-3rd {
      border-color: rgba(205,127,50,0.42);
    }

    
    .meter-fill.win  { background: linear-gradient(90deg, #ff8ca5, #ff5f8f); }
    .meter-fill.rate { background: linear-gradient(90deg, #6bc3ff, #3fa6ff); }

    .footer-note  { margin-top: 14px; font-size: 13px; color: #98a7bd; text-align: right; line-height: 1.7; }

        .hidden-note {
      margin-top: 12px; padding: 12px 14px; border-radius: 16px;
      background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.08);
      color: #c7d1df; font-size: 13px; line-height: 1.7;
    }

        .locked-notice {
      margin-top: 14px;
      padding: 18px 20px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      border: 1px solid rgba(122,140,255,0.18);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      box-shadow: 0 0 18px rgba(122,140,255,0.06);
    }

    .locked-notice-icon {
      font-size: 28px;
      flex-shrink: 0;
    }

        .locked-notice-text {
      font-size: 14px;
      font-weight: 800;
      color: #c6d4e8;
      line-height: 1.6;
      text-align: center;
    }

    .locked-notice-text strong {
      color: #7fc6ff;
    }

    .flow-modal {
      position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
      background: rgba(4,8,16,0.72); backdrop-filter: blur(5px); z-index: 1000; padding: 20px;
    }
    .flow-modal.show { display: flex; }

    .flow-card {
      width: min(860px, 100%);
      border-radius: 26px; padding: 24px;
      background: linear-gradient(180deg, rgba(19,25,39,0.98), rgba(12,17,28,0.98));
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 30px 80px rgba(0,0,0,0.42);
      text-align: left; position: relative;
    }

    .flow-label  { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8dc9ff; margin-bottom: 10px; font-weight: 900; text-align: center; }
    .flow-title  { font-size: 30px; font-weight: 900; color: #ffffff; line-height: 1.3; word-break: keep-all; text-align: center; }
    .flow-desc   { margin-top: 12px; color: #b9c4d6; line-height: 1.8; font-size: 14px; text-align: center; }
    .flow-actions{ display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

    .class-row {
      display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center;
      border-radius: 16px; padding: 12px 14px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); margin-top: 10px;
    }
    .class-group   { font-size: 18px; font-weight: 900; color: #dff3ff; }
    .class-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

    .battle-top-title    { font-size: 38px; font-weight: 900; color: #ffffff; line-height: 1.25; margin-top: 6px; word-break: keep-all; }


    .battle-sound-wrap {
      position: absolute;
      top: 14px;
      left: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 5;
    }

    .battle-sound-icon {
      font-size: 16px;
      width: 20px;
      text-align: center;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
      filter: drop-shadow(0 0 4px rgba(99,102,241,0.14));
      transition: 0.15s ease;
    }

    .battle-sound-icon:hover {
      transform: scale(1.08);
    }

    .battle-sound-slider {
      width: 84px;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: rgba(255,255,255,0.12);
      border-radius: 999px;
      outline: none;
      cursor: pointer;
    }

    .battle-sound-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #6366f1);
      border: 2px solid #0d0e13;
      box-shadow: 0 2px 6px rgba(99,102,241,0.22);
      cursor: pointer;
    }

    .battle-sound-slider::-moz-range-thumb {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #6366f1);
      border: 2px solid #0d0e13;
      box-shadow: 0 2px 6px rgba(99,102,241,0.22);
      cursor: pointer;
    }

    .battle-sound-value {
      font-size: 10px;
      font-weight: 900;
      color: #9ca3af;
      min-width: 30px;
      text-align: right;
      flex-shrink: 0;
    }



    .battle-progress-wrap{ margin: 18px auto 12px; width: min(760px,100%); }
    .battle-progress-top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: #9ecdf7; font-weight: 800; }
    .battle-progress-bar { width: 100%; height: 18px; padding: 2px; background: #06284a; border: 2px solid #25a0ff; }
    .battle-progress-fill{ height: 100%; width: 0%; background: linear-gradient(90deg,#00d9ff 0%,#25b4ff 55%,#4fe3ff 100%); transition: width 0.18s ease; }

    .battle-vs { margin: 24px 0 18px; font-size: 42px; font-weight: 900; color: #ffd68c; letter-spacing: 6px; text-shadow: 0 0 8px rgba(255,214,140,0.20); }

    .battle-choice-grid {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
      justify-items: center; align-items: start; margin-top: 14px;
    }

    .battle-choice {
      position: relative;
      width: 280px; height: 420px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(180deg, #23283b 0%, #171c2e 52%, #111728 100%);
      color: #ffffff; cursor: pointer; text-align: center;
      transition: transform 0.22s ease, box-shadow 0.26s ease, border-color 0.20s ease, filter 0.18s ease;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      overflow: hidden; padding: 26px 18px;
      box-shadow: 0 18px 38px rgba(0,0,0,0.26), 0 0 34px rgba(90,150,255,0.12), 0 0 78px rgba(90,190,255,0.08);
    }

    .battle-choice:hover { transform: translateY(-6px) scale(1.03) rotateX(2deg) rotateY(-2deg); filter: brightness(1.07); }
    .battle-choice:disabled { cursor: default; }

    .choice-gloss {
      position: absolute; top: -25%; left: -90%; width: 280%; height: 58%;
      opacity: 0; z-index: 2; pointer-events: none;
      background: linear-gradient(115deg, rgba(255,255,255,0) 22%, rgba(255,255,255,0.08) 34%, rgba(140,220,255,0.24) 48%, rgba(255,255,255,0.08) 62%, rgba(255,255,255,0) 78%);
      transform: rotate(-14deg);
    }

    .battle-choice:hover .choice-gloss { opacity: 1; animation: waveFlow 1.6s linear infinite; }

    .battle-choice .card-frame-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

    .gold      { stroke: #d9b56f; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.96; }
    .gold-thin { stroke: rgba(217,181,111,0.88); stroke-width: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .gold-fill { fill: #d9b56f; opacity: 0.95; }

    @keyframes waveFlow {
      0%   { transform: translateX(-10%) rotate(-14deg); }
      100% { transform: translateX(45%)  rotate(-14deg); }
    }

    .battle-choice.stage-green  { box-shadow: 0 18px 38px rgba(0,0,0,0.26), 0 0 42px rgba(80,255,120,0.26),  0 0 100px rgba(80,255,120,0.14);  border-color: rgba(120,255,150,0.22); }
    .battle-choice.stage-blue   { box-shadow: 0 20px 42px rgba(0,0,0,0.28), 0 0 56px rgba(80,170,255,0.38),  0 0 126px rgba(60,210,255,0.22);  border-color: rgba(110,190,255,0.30); }
    .battle-choice.stage-purple { box-shadow: 0 22px 46px rgba(0,0,0,0.28), 0 0 64px rgba(180,100,255,0.44), 0 0 146px rgba(120,110,255,0.28); border-color: rgba(210,150,255,0.34); }
    .battle-choice.stage-yellow { box-shadow: 0 24px 50px rgba(0,0,0,0.30), 0 0 74px rgba(255,220,100,0.52), 0 0 166px rgba(255,170,60,0.30),  0 0 210px rgba(90,230,255,0.14);  border-color: rgba(255,225,140,0.40); }
    .battle-choice.stage-red    { box-shadow: 0 28px 58px rgba(0,0,0,0.34), 0 0 92px rgba(255,70,70,0.68),   0 0 190px rgba(255,70,70,0.34),   0 0 250px rgba(255,180,60,0.28),  0 0 320px rgba(90,230,255,0.16); border-color: rgba(255,120,120,0.50); }

        .battle-choice-content {
      position: relative; z-index: 3;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      width: 100%; padding: 20px 16px;
    }

    .battle-choice-name {
      font-size: 34px;
      font-weight: 900;
      line-height: 1.18;
      word-break: keep-all;
      color: #ffffff;
      text-shadow: 0 0 10px rgba(255,255,255,0.10);
      margin-top: 14px;
    }

    .battle-choice-class {
      font-size: 14px;
      color: rgba(255,255,255,0.50);
      font-weight: 800;
      margin-top: 6px;
      letter-spacing: 0.4px;
      line-height: 1.3;
      word-break: keep-all;
    }

    /* ===== 배틀 카드 아이콘 + 오오라 공통 ===== */
    .battle-aura-outer {
      position: relative;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .battle-aura-glow {
      position: absolute;
      inset: -14px;
      border-radius: 16px;
      pointer-events: none;
      z-index: -1;
      animation: battleAuraBreathe 2.8s ease-in-out infinite;
    }

    .battle-aura-box {
      width: 96px;
      height: 96px;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid rgba(217,181,111,0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      animation: battleAuraGlowShift 3s ease-in-out infinite;
    }

    .battle-aura-box::before {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px solid rgba(217,181,111,0.25);
      border-radius: 5px;
      pointer-events: none;
    }

    .battle-inner-plate {
      width: 76px;
      height: 76px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .battle-engr-icon {
      width: 72px;
      height: 72px;
      object-fit: contain;
      display: block;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
    }

    @keyframes battleAuraBreathe {
      0%,100% { opacity: .6; transform: scale(1); }
      50%     { opacity: 1; transform: scale(1.06); }
    }

    @keyframes battleAuraGlowShift {
      0% {
        box-shadow: 0 0 12px rgba(255,255,255,0.16);
      }
      50% {
        box-shadow: 0 0 22px rgba(255,255,255,0.24), 0 0 40px rgba(255,255,255,0.10);
      }
      100% {
        box-shadow: 0 0 12px rgba(255,255,255,0.16);
      }
    }

    /* ===== 분위기별 오오라 ===== */
    .aura-power .battle-aura-glow {
      background:
        radial-gradient(circle at 50% 60%, rgba(255,100,40,.28), transparent 58%),
        radial-gradient(circle at 30% 30%, rgba(255,180,70,.12), transparent 48%),
        radial-gradient(circle at 70% 25%, rgba(255,140,50,.14), transparent 46%);
    }
    .aura-power .battle-aura-box {
      border-color: rgba(255,160,80,.55);
      background:
        linear-gradient(135deg, rgba(255,120,50,.08), transparent 40%),
        linear-gradient(225deg, rgba(255,120,50,.06), transparent 40%),
        linear-gradient(180deg, rgba(42,28,20,.96), rgba(24,18,15,.98));
      box-shadow: 0 0 14px rgba(255,120,50,.25), 0 0 28px rgba(255,180,70,.12);
    }
    .aura-power .battle-inner-plate {
      background: linear-gradient(180deg, rgba(72,34,24,.94), rgba(38,20,14,.98));
      border: 1px solid rgba(255,180,90,.14);
    }

    .aura-ki .battle-aura-glow {
      background:
        radial-gradient(circle at 50% 55%, rgba(60,255,180,.22), transparent 52%),
        radial-gradient(circle at 35% 30%, rgba(80,220,255,.14), transparent 42%),
        radial-gradient(circle at 65% 70%, rgba(100,255,200,.12), transparent 44%);
    }
    .aura-ki .battle-aura-box {
      border-color: rgba(80,240,190,.48);
      background:
        linear-gradient(135deg, rgba(60,220,160,.06), transparent 40%),
        linear-gradient(225deg, rgba(80,200,255,.05), transparent 40%),
        linear-gradient(180deg, rgba(18,42,34,.96), rgba(14,26,24,.98));
      box-shadow: 0 0 14px rgba(80,240,190,.22), 0 0 28px rgba(80,220,255,.10);
    }
    .aura-ki .battle-inner-plate {
      background: linear-gradient(180deg, rgba(18,56,44,.94), rgba(10,28,22,.98));
      border: 1px solid rgba(110,255,210,.12);
    }

    .aura-gun .battle-aura-glow {
      background:
        radial-gradient(circle at 40% 50%, rgba(120,190,255,.18), transparent 48%),
        radial-gradient(circle at 60% 50%, rgba(255,150,60,.14), transparent 44%),
        radial-gradient(circle at 50% 50%, rgba(200,210,240,.08), transparent 55%);
    }
    .aura-gun .battle-aura-box {
      border-color: rgba(160,200,255,.42);
      background:
        linear-gradient(135deg, rgba(120,180,255,.06), transparent 38%),
        linear-gradient(225deg, rgba(255,150,60,.05), transparent 38%),
        linear-gradient(180deg, rgba(28,34,50,.96), rgba(16,20,32,.98));
      box-shadow: 0 0 12px rgba(120,180,255,.20), 0 0 24px rgba(255,150,60,.08);
    }
    .aura-gun .battle-inner-plate {
      background: linear-gradient(180deg, rgba(38,44,62,.96), rgba(20,24,38,.98));
      border: 1px solid rgba(180,210,255,.10);
    }

    .aura-dark .battle-aura-glow {
      background:
        radial-gradient(circle at 50% 55%, rgba(160,70,255,.20), transparent 50%),
        radial-gradient(circle at 35% 35%, rgba(255,80,180,.12), transparent 40%),
        radial-gradient(circle at 65% 70%, rgba(120,40,200,.14), transparent 42%);
    }
    .aura-dark .battle-aura-box {
      border-color: rgba(170,90,255,.42);
      background:
        linear-gradient(135deg, rgba(160,60,255,.06), transparent 38%),
        linear-gradient(225deg, rgba(255,80,180,.04), transparent 38%),
        linear-gradient(180deg, rgba(26,14,40,.96), rgba(14,8,24,.98));
      box-shadow: 0 0 14px rgba(150,70,255,.22), 0 0 28px rgba(255,80,180,.08);
    }
    .aura-dark .battle-inner-plate {
      background: linear-gradient(180deg, rgba(42,18,58,.94), rgba(18,10,28,.98));
      border: 1px solid rgba(200,110,255,.10);
    }

    .aura-element .battle-aura-glow {
      background:
        radial-gradient(circle at 35% 40%, rgba(255,120,50,.16), transparent 40%),
        radial-gradient(circle at 65% 40%, rgba(80,200,255,.16), transparent 40%),
        radial-gradient(circle at 50% 65%, rgba(170,120,255,.12), transparent 42%);
    }
    .aura-element .battle-aura-box {
      border-color: rgba(180,170,255,.40);
      background:
        linear-gradient(135deg, rgba(255,120,50,.05), transparent 35%),
        linear-gradient(225deg, rgba(80,200,255,.05), transparent 35%),
        linear-gradient(180deg, rgba(28,24,48,.96), rgba(14,12,28,.98));
      box-shadow: 0 0 12px rgba(255,120,50,.14), 0 0 20px rgba(80,200,255,.12), 0 0 28px rgba(170,120,255,.08);
    }
    .aura-element .battle-inner-plate {
      background: linear-gradient(180deg, rgba(36,32,58,.94), rgba(16,14,32,.98));
      border: 1px solid rgba(200,200,255,.10);
    }

    .aura-flower .battle-aura-glow {
      background:
        radial-gradient(circle at 30% 40%, rgba(255,180,220,.18), transparent 38%),
        radial-gradient(circle at 70% 38%, rgba(190,255,220,.16), transparent 38%),
        radial-gradient(circle at 50% 65%, rgba(180,220,255,.12), transparent 40%);
    }
    .aura-flower .battle-aura-box {
      border-color: rgba(255,200,228,.42);
      background:
        linear-gradient(135deg, rgba(255,180,220,.05), transparent 35%),
        linear-gradient(225deg, rgba(190,255,220,.04), transparent 35%),
        linear-gradient(180deg, rgba(36,28,48,.96), rgba(18,16,28,.98));
      box-shadow: 0 0 12px rgba(255,180,220,.16), 0 0 24px rgba(190,255,220,.08);
    }
    .aura-flower .battle-inner-plate {
      background: linear-gradient(180deg, rgba(52,40,64,.94), rgba(22,18,32,.98));
      border: 1px solid rgba(255,220,240,.10);
    }

    .aura-holy .battle-aura-glow {
      background:
        radial-gradient(circle at 50% 45%, rgba(255,220,120,.24), transparent 52%),
        radial-gradient(circle at 35% 30%, rgba(255,240,180,.12), transparent 40%),
        radial-gradient(circle at 65% 65%, rgba(255,200,100,.14), transparent 42%);
    }
    .aura-holy .battle-aura-box {
      border-color: rgba(255,220,120,.52);
      background:
        linear-gradient(135deg, rgba(255,220,120,.08), transparent 38%),
        linear-gradient(225deg, rgba(255,200,80,.06), transparent 38%),
        linear-gradient(180deg, rgba(50,42,18,.96), rgba(24,20,10,.98));
      box-shadow: 0 0 14px rgba(255,220,120,.25), 0 0 28px rgba(255,200,80,.12);
    }
    .aura-holy .battle-inner-plate {
      background: linear-gradient(180deg, rgba(72,60,18,.94), rgba(28,22,8,.98));
      border: 1px solid rgba(255,235,170,.12);
    }

    .engr-warrior    { color: #ffd77e; }
    .engr-fighter    { color: #ff9f7a; }
    .engr-hunter     { color: #7bd6ff; }
    .engr-mage       { color: #c79cff; }
    .engr-assassin   { color: #ff8fc8; }
    .engr-specialist { color: #9df0c8; }
    .engr-guardian   { color: #ff8b6a; }

    @keyframes winBoom {
      0%   { transform: scale(1); filter: brightness(1); }
      25%  { transform: scale(1.13) translateY(-8px); filter: brightness(1.25); }
      55%  { transform: scale(1.08) translateY(-5px); filter: brightness(1.15); }
      100% { transform: scale(1.05) translateY(-4px); filter: brightness(1.1); }
    }
    @keyframes winGlow {
      0%   { box-shadow: 0 0 0px rgba(80,255,120,0); }
      35%  { box-shadow: 0 0 80px rgba(80,255,180,0.95), 0 0 150px rgba(80,255,120,0.60); }
      100% { box-shadow: 0 0 30px rgba(80,255,120,0.45), 0 0 80px rgba(80,255,120,0.22); }
    }
    @keyframes loseSlideRight {
      0%   { transform: translateX(0) scale(1); opacity: 1; }
      100% { transform: translateX(140%) rotate(12deg) scale(0.85); opacity: 0; }
    }
    @keyframes loseSlideLeft {
      0%   { transform: translateX(0) scale(1); opacity: 1; }
      100% { transform: translateX(-140%) rotate(-12deg) scale(0.85); opacity: 0; }
    }

    .anim-win        { animation: winBoom 0.5s ease forwards, winGlow 0.5s ease forwards; border-color: rgba(100,255,120,0.65) !important; pointer-events: none; }
    .anim-lose-right { animation: loseSlideRight 0.45s ease forwards; pointer-events: none; }
    .anim-lose-left  { animation: loseSlideLeft  0.45s ease forwards; pointer-events: none; }

    .winner-modal {
      position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
      background: rgba(4,8,16,0.72); backdrop-filter: blur(6px); z-index: 1200; padding: 20px; overflow: hidden;
    }
    .winner-modal.show { display: flex; }

    .winner-card {
      position: relative; width: min(640px, 100%);
      border-radius: 28px; padding: 28px 24px 24px;
      background: linear-gradient(180deg, rgba(30,20,24,0.98), rgba(18,14,20,0.98));
      border: 1px solid rgba(255,120,120,0.18);
      box-shadow: 0 30px 90px rgba(0,0,0,0.44), 0 0 52px rgba(255,80,80,0.22), 0 0 120px rgba(255,140,80,0.12);
      text-align: center; overflow: hidden;
    }

    .winner-card::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at top center, rgba(255,120,120,0.18), transparent 36%), radial-gradient(circle at bottom center, rgba(255,180,90,0.10), transparent 36%);
      pointer-events: none;
    }

    .winner-label   { position: relative; z-index: 1; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #ffb9b9; margin-bottom: 10px; font-weight: 900; }
    .winner-title   { position: relative; z-index: 1; font-size: 42px; font-weight: 900; color: #ffffff; line-height: 1.18; word-break: keep-all; }
    .winner-sub     { position: relative; z-index: 1; margin-top: 10px; color: #ffd3d3; font-size: 16px; line-height: 1.8; }
    .winner-desc    { position: relative; z-index: 1; margin-top: 16px; color: #f1dede; font-size: 14px; line-height: 1.8; }
    .winner-actions { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 20px; }

    .grade-stamp-wrap { position: relative; z-index: 1; display: flex; justify-content: center; margin: 18px 0 10px; }

    .grade-stamp {
      width: 140px; height: 140px; border-radius: 50%;
      border: 5px solid rgba(255,88,88,0.95);
      color: rgba(255,118,118,0.95);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      transform: rotate(-12deg); text-align: center; font-weight: 900;
      box-shadow: 0 0 22px rgba(255,80,80,0.30), 0 0 44px rgba(255,80,80,0.18), inset 0 0 0 2px rgba(255,255,255,0.03);
      background: radial-gradient(circle at center, rgba(255,70,70,0.06), rgba(255,70,70,0.01));
      opacity: 0.95; animation: stampAppear 0.4s ease 0.2s both;
    }

    .grade-stamp::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(255,92,92,0.40); }

    .grade-stamp .gs-date  { font-size: 13px; letter-spacing: 1px; position: relative; z-index: 1; }
    .grade-stamp .gs-grade { font-size: 26px; font-weight: 900; line-height: 1.1; position: relative; z-index: 1; }
    .grade-stamp .gs-done  { font-size: 14px; position: relative; z-index: 1; }

    @keyframes stampAppear {
      0%   { transform: rotate(-12deg) scale(0.5); opacity: 0; }
      70%  { transform: rotate(-12deg) scale(1.1); opacity: 1; }
      100% { transform: rotate(-12deg) scale(1);   opacity: 0.95; }
    }

    .grade-comment { position: relative; z-index: 1; margin-top: 6px; font-size: 14px; color: #ffd3d3; line-height: 1.7; font-style: italic; }

    .confetti { position: absolute; width: 10px; height: 18px; top: -40px; opacity: 0.9; animation: fall 2.8s linear forwards; }

    @keyframes fall {
      0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
      10%  { opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }

    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(4,8,16,0.75); backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center;
      z-index: 1100; padding: 20px;
    }
    .modal-backdrop.show { display: flex; }

    .modal-card {
      width: min(680px, 100%);
      border-radius: 26px; padding: 26px 24px 22px;
      background: linear-gradient(180deg, rgba(20,26,40,0.98), rgba(13,18,30,0.98));
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 30px 80px rgba(0,0,0,0.45);
      position: relative; max-height: 92vh; overflow-y: auto;
    }

    .modal-close {
      position: absolute; top: 14px; right: 14px;
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: #fff; font-size: 18px; font-weight: 900;
      cursor: pointer; transition: 0.18s ease;
    }
    .modal-close:hover { transform: rotate(90deg); background: rgba(255,255,255,0.12); }

    .modal-top-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #86c9ff; margin-bottom: 8px; text-align: center; }
    .modal-title     { font-size: 26px; font-weight: 900; color: #ffffff; text-align: center; margin-bottom: 6px; }
    .modal-sub       { font-size: 13px; color: #aeb9cb; text-align: center; margin-bottom: 18px; }
    .modal-divider   { width: 100%; height: 1px; margin: 14px 0 18px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.20), rgba(255,255,255,0)); }

    .tier-block      { margin-bottom: 16px; border-radius: 16px; overflow: hidden; position: relative; isolation: isolate; }
    .tier-header     { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 900; font-size: 14px; }
    .tier-badge      { font-size: 13px; font-weight: 900; padding: 3px 10px; border-radius: 999px; }
    .tier-count      { font-size: 12px; opacity: 0.7; margin-left: auto; }
    .tier-engravings { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; }
    .engraving-chip  { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 1px solid rgba(255,255,255,0.12); }

    .tier-1 { background: linear-gradient(180deg, rgba(255,60,60,0.20), rgba(120,10,20,0.24)); border: 1px solid rgba(255,120,120,0.35); }
    .tier-1::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 180deg,#ff3b3b,#ff7a00,#ffe600,#45ff8a,#00d7ff,#7b61ff,#ff4fd8,#ff3b3b); opacity: 0.18; filter: blur(24px); animation: rainbowSpin 8s linear infinite; z-index: 0; pointer-events: none; }
    .tier-1 > * { position: relative; z-index: 1; }
    .tier-1 .tier-header    { color: #ffd1d1; }
    .tier-1 .tier-badge     { background: rgba(255,90,90,0.24); color: #fff1f1; }
    .tier-1 .engraving-chip { background: rgba(255,255,255,0.06); color: #ffe2e2; border-color: rgba(255,150,150,0.24); }

    .tier-2 { background: linear-gradient(180deg, rgba(255,220,90,0.18), rgba(120,95,10,0.20)); border: 1px solid rgba(255,220,90,0.30); }
    .tier-2::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 180deg,#ff3b3b,#ff7a00,#ffe600,#45ff8a,#00d7ff,#7b61ff,#ff4fd8,#ff3b3b); opacity: 0.09; filter: blur(24px); animation: rainbowSpin 12s linear infinite reverse; z-index: 0; pointer-events: none; }
    .tier-2 > * { position: relative; z-index: 1; }
    .tier-2 .tier-header    { color: #ffe58a; }
    .tier-2 .tier-badge     { background: rgba(255,220,90,0.20); color: #ffe58a; }
    .tier-2 .engraving-chip { background: rgba(255,220,90,0.10); color: #ffe58a; border-color: rgba(255,220,90,0.22); }

    .tier-3 { background: linear-gradient(180deg, rgba(170,120,255,0.18), rgba(70,30,120,0.20)); border: 1px solid rgba(170,120,255,0.30); }
    .tier-3 .tier-header    { color: #d1b3ff; }
    .tier-3 .tier-badge     { background: rgba(170,120,255,0.20); color: #d1b3ff; }
    .tier-3 .engraving-chip { background: rgba(170,120,255,0.10); color: #d1b3ff; border-color: rgba(170,120,255,0.22); }

    .tier-4 { background: linear-gradient(180deg, rgba(90,180,255,0.18), rgba(20,60,120,0.20)); border: 1px solid rgba(90,180,255,0.30); }
    .tier-4 .tier-header    { color: #a9dfff; }
    .tier-4 .tier-badge     { background: rgba(90,180,255,0.20); color: #a9dfff; }
    .tier-4 .engraving-chip { background: rgba(90,180,255,0.10); color: #a9dfff; border-color: rgba(90,180,255,0.22); }

    .tier-5 { background: linear-gradient(180deg, rgba(90,230,140,0.18), rgba(20,90,50,0.20)); border: 1px solid rgba(90,230,140,0.30); }
    .tier-5 .tier-header    { color: #bff7d0; }
    .tier-5 .tier-badge     { background: rgba(90,230,140,0.20); color: #bff7d0; }
    .tier-5 .engraving-chip { background: rgba(90,230,140,0.10); color: #bff7d0; border-color: rgba(90,230,140,0.22); }

    .tier-6 { background: linear-gradient(180deg, rgba(180,180,180,0.16), rgba(50,50,50,0.22)); border: 1px solid rgba(220,220,220,0.18); }
    .tier-6 .tier-header    { color: #d0d0d0; }
    .tier-6 .tier-badge     { background: rgba(180,180,180,0.16); color: #efefef; }
    .tier-6 .engraving-chip { background: rgba(255,255,255,0.06); color: #d9d9d9; border-color: rgba(220,220,220,0.16); }

    .loading-text { text-align: center; color: #aeb9cb; font-size: 14px; padding: 30px 0; }

    .grade-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
    .grade-item  { border-radius: 12px; padding: 10px 8px; text-align: center; border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; }
    .grade-item > * { position: relative; z-index: 1; }
    .grade-name  { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
    .grade-range { font-size: 11px; opacity: 0.75; color: #aeb9cb; }

    @property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes borderRotate { to { --angle: 360deg; } }
@keyframes glowPulse {
  0%   { box-shadow: 0 0 var(--glow-a) var(--glow-c1), 0 0 var(--glow-b) var(--glow-c2); }
  100% { box-shadow: 0 0 var(--glow-a2) var(--glow-c1), 0 0 var(--glow-b2) var(--glow-c2); }
}
@keyframes innerPulse {
  0%   { opacity: var(--pulse-min); transform: scaleY(var(--scale-min, 1)); }
  100% { opacity: var(--pulse-max); transform: scaleY(var(--scale-max, 1)); }
}
@keyframes textShimmer {
  0%   { background-position: 250% center; }
  100% { background-position: 0%   center; }
}
.grade-ss-plus {
  --glow-a:18px; --glow-a2:28px; --glow-b:40px; --glow-b2:55px;
  --glow-c1:rgba(255,210,60,0.50); --glow-c2:rgba(255,180,20,0.28);
  --border-speed:2.5s; --pulse-speed:1.8s;
  --pulse-min:0.70; --pulse-max:1.00; --scale-min:0.96; --scale-max:1.04;
}
.grade-ss {
  --glow-a:14px; --glow-a2:22px; --glow-b:30px; --glow-b2:44px;
  --glow-c1:rgba(255,200,50,0.42); --glow-c2:rgba(255,170,20,0.22);
  --border-speed:2.5s; --pulse-speed:2.2s;
  --pulse-min:0.65; --pulse-max:1.00; --scale-min:0.97; --scale-max:1.03;
}
.grade-ss-minus {
  --glow-a:10px; --glow-a2:18px; --glow-b:22px; --glow-b2:34px;
  --glow-c1:rgba(255,190,40,0.32); --glow-c2:rgba(255,160,10,0.16);
  --border-speed:2.5s; --pulse-speed:2.6s;
  --pulse-min:0.60; --pulse-max:0.95; --scale-min:0.97; --scale-max:1.03;
}
.grade-ss-plus,.grade-ss,.grade-ss-minus {
  background:linear-gradient(135deg,rgba(255,60,60,0.12),rgba(255,200,60,0.18),rgba(80,220,140,0.10),rgba(90,160,255,0.10),rgba(255,200,80,0.16));
  border-color:rgba(255,210,80,0.55);
  animation:glowPulse var(--pulse-speed) ease-in-out infinite alternate;
}
.grade-ss-plus::before,.grade-ss::before,.grade-ss-minus::before {
  content:""; position:absolute; inset:0; border-radius:12px;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,220,100,0.38) 0%,rgba(255,180,40,0.12) 50%,transparent 80%),linear-gradient(135deg,rgba(255,80,80,0.08),rgba(255,200,60,0.10),rgba(80,200,140,0.07),rgba(100,160,255,0.07),rgba(180,80,255,0.06));
  animation:innerPulse var(--pulse-speed) ease-in-out infinite alternate; z-index:0;
}
.grade-ss-plus::after,.grade-ss::after,.grade-ss-minus::after {
  content:""; position:absolute; inset:-1px; border-radius:13px;
  background:conic-gradient(from var(--angle,0deg),rgba(255,60,60,0.85) 0deg,rgba(255,180,30,1) 60deg,rgba(255,240,80,1) 90deg,rgba(80,220,140,0.85) 140deg,rgba(90,160,255,0.85) 200deg,rgba(200,100,255,0.85) 260deg,rgba(255,80,180,0.85) 310deg,rgba(255,60,60,0.85) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1.5px; animation:borderRotate var(--border-speed) linear infinite; z-index:0;
}
.grade-ss-plus .grade-name,.grade-ss .grade-name,.grade-ss-minus .grade-name {
  background:linear-gradient(90deg,#ff6b6b 0%,#ffd700 15%,#fffacd 30%,#6bcb77 45%,#ffd700 60%,#fffacd 75%,#ff9ff3 90%,#ffd700 100%);
  background-size:250% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 2s linear infinite;
  filter:drop-shadow(0 0 7px rgba(255,215,0,0.85));
}
.grade-s-plus {
  --glow-a:14px; --glow-a2:22px; --glow-b:30px; --glow-b2:44px;
  --glow-c1:rgba(100,200,255,0.40); --glow-c2:rgba(60,160,240,0.20);
  --border-speed:4.5s; --pulse-speed:2.2s;
  --pulse-min:0.60; --pulse-max:1.00;
}
.grade-s {
  --glow-a:10px; --glow-a2:16px; --glow-b:22px; --glow-b2:34px;
  --glow-c1:rgba(90,190,255,0.32); --glow-c2:rgba(50,150,230,0.16);
  --border-speed:4.5s; --pulse-speed:2.8s;
  --pulse-min:0.55; --pulse-max:0.95;
}
.grade-s-minus {
  --glow-a:8px; --glow-a2:14px; --glow-b:16px; --glow-b2:26px;
  --glow-c1:rgba(80,180,255,0.25); --glow-c2:rgba(40,140,220,0.12);
  --border-speed:4.5s; --pulse-speed:3.2s;
  --pulse-min:0.50; --pulse-max:0.90;
}
.grade-s-plus,.grade-s,.grade-s-minus {
  background:linear-gradient(135deg,rgba(100,200,255,0.14),rgba(60,160,240,0.10),rgba(130,80,255,0.06),rgba(80,220,160,0.05),rgba(100,180,255,0.10));
  border-color:rgba(120,210,255,0.40);
  animation:glowPulse var(--pulse-speed) ease-in-out infinite alternate;
}
.grade-s-plus::before,.grade-s::before,.grade-s-minus::before {
  content:""; position:absolute; inset:0; border-radius:12px;
  background:radial-gradient(ellipse at 50% 0%,rgba(140,220,255,0.26) 0%,rgba(80,170,255,0.08) 60%,transparent 100%),linear-gradient(135deg,rgba(255,100,100,0.04),rgba(100,200,255,0.06),rgba(150,80,255,0.04),rgba(80,220,150,0.04));
  animation:innerPulse var(--pulse-speed) ease-in-out infinite alternate; z-index:0;
}
.grade-s-plus::after,.grade-s::after,.grade-s-minus::after {
  content:""; position:absolute; inset:-1px; border-radius:13px;
  background:conic-gradient(from var(--angle,0deg),rgba(100,200,255,0.75) 0deg,rgba(200,240,255,0.95) 60deg,rgba(160,120,255,0.60) 120deg,rgba(80,220,180,0.55) 180deg,rgba(100,180,255,0.70) 240deg,rgba(200,240,255,0.90) 300deg,rgba(100,200,255,0.75) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1.5px; animation:borderRotate var(--border-speed) linear infinite; z-index:0;
}
.grade-s-plus .grade-name,.grade-s .grade-name,.grade-s-minus .grade-name {
  background:linear-gradient(90deg,#4a9edd 0%,#a8deff 20%,#ffffff 35%,#c8a8ff 50%,#a8ffdd 65%,#a8deff 80%,#4a9edd 100%);
  background-size:250% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 3s linear infinite;
  filter:drop-shadow(0 0 5px rgba(100,200,255,0.70));
}
.grade-a-plus {
  --glow-a:10px; --glow-a2:16px; --glow-b:22px; --glow-b2:32px;
  --glow-c1:rgba(255,90,60,0.32); --glow-c2:rgba(220,60,30,0.16);
  --border-speed:5s; --pulse-speed:2.4s;
  --pulse-min:0.50; --pulse-max:0.90; --scale-min:0.97; --scale-max:1.03;
}
.grade-a {
  --glow-a:7px; --glow-a2:12px; --glow-b:16px; --glow-b2:24px;
  --glow-c1:rgba(240,80,50,0.25); --glow-c2:rgba(210,50,25,0.12);
  --border-speed:5s; --pulse-speed:2.8s;
  --pulse-min:0.45; --pulse-max:0.85; --scale-min:0.97; --scale-max:1.03;
}
.grade-a-minus {
  --glow-a:5px; --glow-a2:9px; --glow-b:12px; --glow-b2:18px;
  --glow-c1:rgba(220,70,40,0.20); --glow-c2:rgba(190,40,20,0.10);
  --border-speed:5s; --pulse-speed:3.2s;
  --pulse-min:0.40; --pulse-max:0.80; --scale-min:0.97; --scale-max:1.03;
}
.grade-a-plus,.grade-a,.grade-a-minus {
  background:linear-gradient(135deg,rgba(255,80,60,0.14),rgba(220,50,40,0.10),rgba(180,30,30,0.10));
  border-color:rgba(255,110,90,0.35);
  animation:glowPulse var(--pulse-speed) ease-in-out infinite alternate;
}
.grade-a-plus::before,.grade-a::before,.grade-a-minus::before {
  content:""; position:absolute; inset:0; border-radius:12px;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,100,60,0.22) 0%,rgba(220,60,30,0.06) 60%,transparent 100%);
  animation:innerPulse var(--pulse-speed) ease-in-out infinite alternate; z-index:0;
}
.grade-a-plus::after,.grade-a::after,.grade-a-minus::after {
  content:""; position:absolute; inset:-1px; border-radius:13px;
  background:conic-gradient(from var(--angle,0deg),transparent 0deg,rgba(255,90,60,0.55) 60deg,rgba(255,180,120,0.80) 90deg,rgba(255,90,60,0.55) 120deg,transparent 180deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1.5px; animation:borderRotate var(--border-speed) linear infinite; z-index:0;
}
.grade-a-plus .grade-name,.grade-a .grade-name,.grade-a-minus .grade-name {
  background:linear-gradient(90deg,#cc3322 0%,#ff7755 30%,#ffbb99 50%,#ff7755 70%,#cc3322 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 3s linear infinite;
  filter:drop-shadow(0 0 4px rgba(255,80,50,0.60));
}
.grade-b-plus {
  --glow-a:6px; --glow-a2:10px; --glow-b:14px; --glow-b2:20px;
  --glow-c1:rgba(255,160,60,0.28); --glow-c2:rgba(220,120,30,0.14);
  --border-speed:8s; --pulse-speed:3.0s;
  --pulse-min:0.50; --pulse-max:0.90;
}
.grade-b {
  --glow-a:5px; --glow-a2:8px; --glow-b:11px; --glow-b2:16px;
  --glow-c1:rgba(240,140,50,0.22); --glow-c2:rgba(210,110,25,0.11);
  --border-speed:8s; --pulse-speed:3.4s;
  --pulse-min:0.45; --pulse-max:0.85;
}
.grade-b-minus {
  --glow-a:4px; --glow-a2:7px; --glow-b:9px; --glow-b2:13px;
  --glow-c1:rgba(220,120,40,0.18); --glow-c2:rgba(190,90,20,0.09);
  --border-speed:8s; --pulse-speed:3.8s;
  --pulse-min:0.40; --pulse-max:0.80;
}
.grade-b-plus,.grade-b,.grade-b-minus {
  background:linear-gradient(135deg,rgba(255,160,60,0.14),rgba(220,120,30,0.10),rgba(190,90,10,0.08));
  border-color:rgba(255,160,60,0.30);
  animation:glowPulse var(--pulse-speed) ease-in-out infinite alternate;
}
.grade-b-plus::before,.grade-b::before,.grade-b-minus::before {
  content:""; position:absolute; inset:0; border-radius:12px;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,160,60,0.14) 0%,rgba(220,110,20,0.05) 60%,transparent 100%);
  animation:innerPulse var(--pulse-speed) ease-in-out infinite alternate; z-index:0;
}
.grade-b-plus::after,.grade-b::after,.grade-b-minus::after {
  content:""; position:absolute; inset:-1px; border-radius:13px;
  background:conic-gradient(from var(--angle,0deg),transparent 0deg,rgba(255,150,50,0.40) 60deg,rgba(255,200,100,0.65) 90deg,rgba(255,150,50,0.40) 120deg,transparent 200deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:1.5px; animation:borderRotate var(--border-speed) linear infinite; z-index:0;
}
.grade-b-plus .grade-name,.grade-b .grade-name,.grade-b-minus .grade-name {
  background:linear-gradient(90deg,#cc7722 0%,#ffb060 30%,#ffe0a0 50%,#ffb060 70%,#cc7722 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 4s linear infinite;
  filter:drop-shadow(0 0 3px rgba(255,160,60,0.45));
}
.grade-c-plus  { background:rgba(180,120,255,0.14); border-color:rgba(180,120,255,0.28); } .grade-c-plus .grade-name  { color:#c79cff; }
.grade-c       { background:rgba(150,100,220,0.12); border-color:rgba(150,100,220,0.24); } .grade-c .grade-name       { color:#aa88ee; }
.grade-c-minus { background:rgba(120,80,190,0.12);  border-color:rgba(120,80,190,0.22);  } .grade-c-minus .grade-name { color:#9977dd; }
.grade-d-plus  { background:rgba(90,180,255,0.14);  border-color:rgba(90,180,255,0.28);  } .grade-d-plus .grade-name  { color:#a9dfff; }
.grade-d       { background:rgba(60,150,220,0.12);  border-color:rgba(60,150,220,0.24);  } .grade-d .grade-name       { color:#7bc8ee; }
.grade-d-minus { background:rgba(30,120,190,0.12);  border-color:rgba(30,120,190,0.22);  } .grade-d-minus .grade-name { color:#55aadd; }
.grade-e-plus  { background:rgba(90,230,140,0.14);  border-color:rgba(90,230,140,0.28);  } .grade-e-plus .grade-name  { color:#bff7d0; }
.grade-e       { background:rgba(60,190,100,0.12);  border-color:rgba(60,190,100,0.24);  } .grade-e .grade-name       { color:#8ee8b0; }
.grade-e-minus { background:rgba(30,150,70,0.12);   border-color:rgba(30,150,70,0.22);   } .grade-e-minus .grade-name { color:#66cc88; }
.grade-f-plus  { background:rgba(180,180,180,0.14); border-color:rgba(200,200,200,0.22); } .grade-f-plus .grade-name  { color:#d9d9d9; }
.grade-f       { background:rgba(140,140,140,0.12); border-color:rgba(170,170,170,0.18); } .grade-f .grade-name       { color:#bbbbbb; }
.grade-f-minus { background:rgba(100,100,100,0.12); border-color:rgba(140,140,140,0.16); } .grade-f-minus .grade-name { color:#999999; }

    .grade-note { font-size:13px; color:#9ecdf7; text-align:center; padding:12px 16px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); line-height:1.7; }
/* 🏅 도장 등급별 색상 + 효과 */
.stamp.stamp-ss,.grade-stamp.stamp-ss {
  border-color:transparent; color:rgba(255,220,80,0.95);
  box-shadow:0 0 22px rgba(255,210,60,0.40),0 0 44px rgba(255,180,20,0.22),inset 0 0 0 2px rgba(255,255,255,0.05);
  background:radial-gradient(circle at center,rgba(255,210,60,0.08),rgba(255,180,20,0.02));
  animation:stampGlowSS 1.8s ease-in-out infinite alternate;
}
@keyframes stampGlowSS {
  0%   { box-shadow:0 0 18px rgba(255,210,60,0.50),0 0 40px rgba(255,180,20,0.28),0 0 70px rgba(255,100,100,0.12); }
  33%  { box-shadow:0 0 24px rgba(100,220,140,0.40),0 0 48px rgba(80,180,255,0.25),0 0 80px rgba(180,80,255,0.12); }
  66%  { box-shadow:0 0 22px rgba(255,100,180,0.40),0 0 44px rgba(255,200,60,0.28),0 0 75px rgba(80,200,255,0.12); }
  100% { box-shadow:0 0 28px rgba(255,220,80,0.65),0 0 55px rgba(255,200,40,0.40),0 0 90px rgba(255,150,50,0.18); }
}
.stamp.stamp-ss::after,.grade-stamp.stamp-ss::after {
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from var(--angle,0deg),rgba(255,60,60,0.85) 0deg,rgba(255,180,30,1) 60deg,rgba(255,240,80,1) 90deg,rgba(80,220,140,0.85) 140deg,rgba(90,160,255,0.85) 200deg,rgba(200,100,255,0.85) 260deg,rgba(255,80,180,0.85) 310deg,rgba(255,60,60,0.85) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:5px; animation:borderRotate 2.5s linear infinite; z-index:-1; pointer-events:none;
}
.stamp.stamp-ss .grade-text,.grade-stamp.stamp-ss .gs-grade,
.stamp.stamp-ss .date,.stamp.stamp-ss .done,
.grade-stamp.stamp-ss .gs-date,.grade-stamp.stamp-ss .gs-done {
  background:linear-gradient(90deg,#ff6b6b 0%,#ffd700 15%,#fffacd 30%,#6bcb77 45%,#ffd700 60%,#fffacd 75%,#ff9ff3 90%,#ffd700 100%);
  background-size:250% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 2s linear infinite;
}

.stamp.stamp-s,.grade-stamp.stamp-s {
  border-color:transparent; color:rgba(160,180,255,0.95);
  background:
    radial-gradient(circle at 40% 30%, rgba(130,100,255,0.12), transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(80,200,255,0.10), transparent 50%),
    radial-gradient(circle at center, rgba(100,160,255,0.06), rgba(80,120,255,0.02));
  box-shadow:0 0 22px rgba(130,100,255,0.40),0 0 44px rgba(80,180,255,0.22),inset 0 0 0 2px rgba(255,255,255,0.05);
  animation:stampGlowS 2.2s ease-in-out infinite alternate;
}
@keyframes stampGlowS {
  0%   { box-shadow:0 0 18px rgba(130,100,255,0.40),0 0 40px rgba(80,180,255,0.24),0 0 70px rgba(160,120,255,0.12); }
  33%  { box-shadow:0 0 24px rgba(80,200,255,0.48),0 0 50px rgba(130,100,255,0.32),0 0 85px rgba(80,220,180,0.16); }
  66%  { box-shadow:0 0 22px rgba(160,120,255,0.44),0 0 46px rgba(100,200,255,0.28),0 0 78px rgba(130,100,255,0.14); }
  100% { box-shadow:0 0 28px rgba(140,120,255,0.58),0 0 55px rgba(100,200,255,0.38),0 0 90px rgba(160,100,255,0.18); }
}
.stamp.stamp-s::after,.grade-stamp.stamp-s::after {
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from var(--angle,0deg),rgba(130,100,255,0.85) 0deg,rgba(100,200,255,1) 90deg,rgba(80,220,180,0.85) 180deg,rgba(160,120,255,0.90) 270deg,rgba(130,100,255,0.85) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:5px; animation:borderRotate 4.5s linear infinite; z-index:-1; pointer-events:none;
}
.stamp.stamp-s .grade-text,.grade-stamp.stamp-s .gs-grade,
.stamp.stamp-s .date,.stamp.stamp-s .done,
.grade-stamp.stamp-s .gs-date,.grade-stamp.stamp-s .gs-done {
  background:linear-gradient(90deg,#7a7aff,#a8deff,#ffffff,#c8a8ff,#a8ffdd,#a8deff,#7a7aff);
  background-size:250% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 3s linear infinite;
  filter:drop-shadow(0 0 4px rgba(130,140,255,0.45));
}

.stamp.stamp-a,.grade-stamp.stamp-a {
  border-color:transparent; color:rgba(255,150,110,0.95);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,100,50,0.10), transparent 50%),
    radial-gradient(circle at 65% 65%, rgba(120,220,120,0.06), transparent 50%),
    radial-gradient(circle at center, rgba(255,80,60,0.06), rgba(200,50,30,0.02));
  box-shadow:0 0 22px rgba(255,90,60,0.35),0 0 44px rgba(255,150,60,0.18),inset 0 0 0 2px rgba(255,255,255,0.05);
  animation:stampGlowA 2.6s ease-in-out infinite alternate;
}
@keyframes stampGlowA {
  0%   { box-shadow:0 0 14px rgba(255,90,60,0.32),0 0 28px rgba(255,150,60,0.16),0 0 46px rgba(120,200,100,0.06); }
  50%  { box-shadow:0 0 16px rgba(140,210,120,0.24),0 0 34px rgba(255,130,60,0.20),0 0 52px rgba(255,180,80,0.08); }
  100% { box-shadow:0 0 20px rgba(255,120,70,0.44),0 0 40px rgba(255,170,70,0.26),0 0 60px rgba(140,220,120,0.10); }
}
.stamp.stamp-a::after,.grade-stamp.stamp-a::after {
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from var(--angle,0deg),
    rgba(255,80,50,0.65) 0deg,
    rgba(255,170,70,0.80) 60deg,
    rgba(180,230,120,0.55) 120deg,
    rgba(255,200,90,0.75) 180deg,
    rgba(255,90,55,0.65) 240deg,
    rgba(255,160,70,0.78) 300deg,
    rgba(255,80,50,0.65) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:5px; animation:borderRotate 5s linear infinite; z-index:-1; pointer-events:none;
}
.stamp.stamp-a .grade-text,.grade-stamp.stamp-a .gs-grade,
.stamp.stamp-a .date,.stamp.stamp-a .done,
.grade-stamp.stamp-a .gs-date,.grade-stamp.stamp-a .gs-done {
  background:linear-gradient(90deg,#cc3322,#ff7755,#ffcc77,#88dd88,#ffbb99,#ff7755,#cc3322);
  background-size:250% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 3s linear infinite;
  filter:drop-shadow(0 0 3px rgba(255,110,55,0.40));
}

.stamp.stamp-b,.grade-stamp.stamp-b {
  border-color:transparent; color:rgba(255,175,80,0.95);
  box-shadow:0 0 18px rgba(255,160,60,0.30),0 0 36px rgba(220,120,30,0.15),inset 0 0 0 2px rgba(255,255,255,0.04);
  background:radial-gradient(circle at center,rgba(255,160,60,0.06),rgba(220,120,30,0.02));
  animation:stampGlowB 3.0s ease-in-out infinite alternate;
}
@keyframes stampGlowB {
  0%   { box-shadow:0 0 6px rgba(255,160,60,0.28),0 0 14px rgba(220,120,30,0.14); }
  100% { box-shadow:0 0 10px rgba(255,175,80,0.38),0 0 20px rgba(235,135,45,0.20); }
}
.stamp.stamp-b::after,.grade-stamp.stamp-b::after {
  content:""; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from var(--angle,0deg),
    rgba(255,150,50,0.85) 0deg,rgba(255,200,100,1) 60deg,
    rgba(255,230,150,1) 90deg,rgba(255,200,100,0.85) 140deg,
    rgba(255,150,50,0.85) 200deg,rgba(255,180,80,0.85) 260deg,
    rgba(255,150,50,0.85) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:5px; animation:borderRotate 8s linear infinite; z-index:-1; pointer-events:none;
}
.stamp.stamp-b .grade-text,.grade-stamp.stamp-b .gs-grade,
.stamp.stamp-b .date,.stamp.stamp-b .done,
.grade-stamp.stamp-b .gs-date,.grade-stamp.stamp-b .gs-done {
  background:linear-gradient(90deg,#cc7722 0%,#ffb060 30%,#ffe0a0 50%,#ffb060 70%,#cc7722 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:textShimmer 4s linear infinite;
}

.stamp.stamp-c,.grade-stamp.stamp-c {
  border-color:rgba(180,120,255,0.90); color:rgba(190,140,255,0.90);
  box-shadow:0 0 14px rgba(180,120,255,0.22),0 0 28px rgba(140,80,220,0.12),inset 0 0 0 2px rgba(255,255,255,0.03);
  background:radial-gradient(circle at center,rgba(180,120,255,0.05),rgba(140,80,220,0.01));
}
.stamp.stamp-c::before,.grade-stamp.stamp-c::before { border-color:rgba(180,120,255,0.30); }
.stamp.stamp-d,.grade-stamp.stamp-d {
  border-color:rgba(90,180,255,0.85); color:rgba(110,190,255,0.85);
  box-shadow:0 0 12px rgba(90,180,255,0.18),0 0 24px rgba(60,140,220,0.10),inset 0 0 0 2px rgba(255,255,255,0.03);
  background:radial-gradient(circle at center,rgba(90,180,255,0.04),rgba(60,140,220,0.01));
}
.stamp.stamp-d::before,.grade-stamp.stamp-d::before { border-color:rgba(90,180,255,0.25); }
.stamp.stamp-e,.grade-stamp.stamp-e {
  border-color:rgba(90,230,140,0.80); color:rgba(110,235,160,0.80);
  box-shadow:0 0 10px rgba(90,230,140,0.15),0 0 20px rgba(60,190,100,0.08),inset 0 0 0 2px rgba(255,255,255,0.02);
  background:radial-gradient(circle at center,rgba(90,230,140,0.04),rgba(60,190,100,0.01));
}
.stamp.stamp-e::before,.grade-stamp.stamp-e::before { border-color:rgba(90,230,140,0.22); }
.stamp.stamp-f,.grade-stamp.stamp-f {
  border-color:rgba(160,160,160,0.75); color:rgba(180,180,180,0.75);
  box-shadow:0 0 8px rgba(160,160,160,0.12),0 0 16px rgba(120,120,120,0.06),inset 0 0 0 2px rgba(255,255,255,0.02);
  background:radial-gradient(circle at center,rgba(160,160,160,0.03),rgba(120,120,120,0.01));
}
.stamp.stamp-f::before,.grade-stamp.stamp-f::before { border-color:rgba(160,160,160,0.20); }
    @keyframes rainbowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    @media (max-width: 1180px) {
      .workspace { grid-template-columns: 280px 1fr; }
      .rank-row { grid-template-columns: 72px minmax(0,1fr); gap: 10px; }
      .rank-row .metric-block { grid-column: 2 / -1; }
    }
    @media (max-width: 1024px) {
      .workspace { grid-template-columns: 1fr; }
      .sidebar { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .duo-grid, .summary-cards { grid-template-columns: 1fr; }
      .battle-choice-grid { grid-template-columns: 1fr; }
      .sidebar-calendar { display: none; }
    }
    @media (max-width: 768px) {
      body { padding: 8px; }
      .app { width: 100%; margin: 0 auto; border-radius: 20px; }
      .sidebar { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 16px; }
      .main { padding: 14px; gap: 14px; }
      .panel { padding: 16px; border-radius: 20px; }
      .hero { font-size: 26px; margin-bottom: 10px; }
      .muted { font-size: 13px; }
      .intro-title { font-size: 24px; }
            .intro-logo-title { font-size: 26px; }
      .intro-logo-sub { font-size: 10px; letter-spacing: 2px; }
      .intro-logo-badge { font-size: 10px; padding: 4px 10px; }
      
      .intro-desc { font-size: 13px; max-width: 100%; margin-top: 12px; }
      .duo-grid { grid-template-columns: 1fr; gap: 14px; }
      .tournament-card { min-height: 208px; padding: 18px; gap: 14px; border-radius: 20px; }
      .card-title { font-size: 22px; }
      .card-desc { font-size: 13px; min-height: auto; max-width: 100%; }
      .stamp { width: 92px; height: 92px; right: 12px; bottom: 12px; border-width: 4px; }
      .stamp .date { font-size: 10px; } .stamp .grade-text { font-size: 16px; } .stamp .done { font-size: 11px; }
      .ranking-title { font-size: 22px; }
      .mini-tab { min-width: 96px; min-height: 56px; font-size: 13px; padding: 10px 12px; border-radius: 12px; }
       .period-tabs .mini-tab {
        min-width: 80px;
        padding: 7px 10px;
        font-size: 12px;
      }
      .summary-cards { grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
      .summary-card { padding: 16px; border-radius: 18px; }
      .summary-inner { grid-template-columns: 60px 1fr; gap: 12px; }
      .summary-icon { width: 60px; height: 60px; font-size: 34px; border-radius: 16px; }
      .summary-main { font-size: 26px; }

            .rank-row { grid-template-columns: 40px 36px 1fr; gap: 8px; padding: 12px; border-radius: 16px; }
      .rank-row .metric-block { grid-column: 2 / -1; }
      .rank-icon-wrap { width: 36px; height: 36px; border-radius: 7px; }
      .rank-icon-wrap img { width: 28px; height: 28px; }
      .rank-num { font-size: 16px; }
      .rank-name { font-size: 16px; }
      .rank-job { font-size: 10px; }
      .metric-main { font-size: 15px; }
      .metric-title { font-size: 9px; }
      .metric-sub { font-size: 9px; }
      .meter { height: 8px; }


      

      .pod-1st { min-height: 104px; }
      .pod-2nd, .pod-3rd { min-height: 90px; }
      .pod-1st .pod-icon { width: 42px; height: 42px; }
      .pod-1st .pod-icon img { width: 32px; height: 32px; }
      .pod-2nd .pod-icon, .pod-3rd .pod-icon { width: 36px; height: 36px; }
      .pod-2nd .pod-icon img, .pod-3rd .pod-icon img { width: 28px; height: 28px; }
      .pod-1st .pod-name { font-size: 13px; }
      .pod-2nd .pod-name, .pod-3rd .pod-name { font-size: 11px; }
      .pod-card::before { width: 24px; height: 24px; }
      .pod-card::after { width: 18px; height: 18px; }
      .ps-rate { display: none; }
      .summary-cards { grid-template-columns: 1fr; }

           .rate-row-item {
  grid-template-columns: 28px 40px 1fr 92px;
}

.rate-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}

.rate-icon img {
  width: 28px;
  height: 28px;
}
      
      .flow-card { width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 14px; border-radius: 20px; }
      .flow-title { font-size: 22px; }
      .class-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
      .battle-top-title { font-size: 22px; margin-top: 2px; }
      .battle-vs { margin: 12px 0 10px; font-size: 26px; letter-spacing: 3px; }
      .battle-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
      .battle-choice { width: 100%; max-width: 170px; height: 250px; padding: 12px 8px; border-radius: 18px; }

            .battle-choice-content { padding: 12px 8px; }
      .battle-aura-outer { width: 78px; height: 78px; }
      .battle-aura-glow { inset: -10px; }
      .battle-aura-box { width: 74px; height: 74px; border-radius: 7px; }
      .battle-aura-box::before { inset: 3px; border-radius: 4px; }
      .battle-inner-plate { width: 58px; height: 58px; border-radius: 4px; }
      .battle-engr-icon { width: 54px; height: 54px; }
      .battle-choice-name { font-size: 24px; padding: 0 4px; margin-top: 10px; }
      .battle-choice-class { font-size: 12px; margin-top: 4px; }
      .winner-card { width: 100%; padding: 22px 16px 20px; border-radius: 22px; }
      .winner-title { font-size: 28px; }
      .grade-stamp { width: 110px; height: 110px; }
      .grade-stamp .gs-grade { font-size: 22px; }
      .sidebar-calendar { display: none; }
     
      .intro-actions {
        display: none;
      }

      
      /* ===== 모바일 배틀 카드 경량화 ===== */
      .battle-choice {
        transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
        will-change: auto;
      }

      .battle-choice:hover {
        transform: none;
        filter: none;
      }

      .choice-gloss {
        display: none;
      }

      .battle-aura-glow {
        animation: none !important;
        opacity: 0.78;
      }

      .battle-aura-box {
        animation: none !important;
        box-shadow: none !important;
      }

                 .battle-choice,
      .battle-choice * {
        transition: none !important;
        animation: none !important;
        backface-visibility: visible !important;
      }

      .anim-win {
        border-color: rgba(100,255,120,0.65) !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
      }

      .anim-lose-right,
      .anim-lose-left {
        opacity: 0 !important;
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
      }

     .battle-choice.stage-green {
    box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 0 18px rgba(52,211,153,.18) !important;
    border-color: rgba(52,211,153,.24) !important;
}

.battle-choice.stage-blue {
    box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 0 18px rgba(59,130,246,.18) !important;
    border-color: rgba(59,130,246,.24) !important;
}

.battle-choice.stage-purple {
    box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 0 18px rgba(167,139,250,.18) !important;
    border-color: rgba(167,139,250,.24) !important;
}

.battle-choice.stage-yellow {
    box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 0 18px rgba(247,202,84,.18) !important;
    border-color: rgba(247,202,84,.24) !important;
}

.battle-choice.stage-red {
    box-shadow: 0 12px 24px rgba(0,0,0,.24), 0 0 18px rgba(239,68,68,.18) !important;
    border-color: rgba(239,68,68,.24) !important;
}
      
    }
    @media (max-width: 480px) {
      body { padding: 0; }
      .app { width: 100%; margin: 0; border-radius: 0; border-left: none; border-right: none; }
      .sidebar, .main { padding: 12px; }
      .hero { font-size: 24px; }
      .intro-title { font-size: 22px; }
            .intro-logo-title { font-size: 23px; }
      .intro-logo-badge { font-size: 9px; }
      .tournament-card { padding: 16px; min-height: 196px; }
      .card-title { font-size: 21px; }
      .stamp { width: 84px; height: 84px; }
      .battle-top-title { font-size: 20px; }
      .battle-vs { font-size: 22px; margin: 10px 0 8px; }
      .battle-choice { max-width: 148px; height: 220px; padding: 10px 6px; }
      .battle-choice-name { font-size: 21px; }
      .sidebar-calendar { display: none; }
    }
    .auction-calc {
      border-radius: 18px;
      padding: 16px;
      background: linear-gradient(180deg, rgba(20,26,38,0.98), rgba(13,18,28,0.98));
      border: 1px solid rgba(200,165,90,0.30);
      box-shadow: 0 0 24px rgba(200,165,90,0.07), 0 0 0 1px rgba(255,255,255,0.02) inset, 0 14px 32px rgba(0,0,0,0.36);
      position: relative;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .auction-calc::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top right, rgba(200,165,90,0.06), transparent 55%), radial-gradient(circle at bottom left, rgba(122,140,255,0.04), transparent 50%);
      pointer-events: none;
    }
    .ac-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; position: relative; z-index: 1; }
    .ac-label { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: #c8a55a; font-weight: 900; margin-bottom: 2px; }
    .ac-title { font-size: 14px; font-weight: 900; color: #ffffff; }
    .ac-toggle { display: flex; background: rgba(255,255,255,0.04); border: 1px solid rgba(200,165,90,0.16); border-radius: 8px; padding: 2px; gap: 2px; }
    .ac-toggle-btn { padding: 4px 9px; border-radius: 6px; border: none; background: none; color: #5a6a82; font-size: 11px; font-weight: 900; cursor: pointer; transition: 0.15s ease; }
    .ac-toggle-btn:hover { color: #c6d4e8; }
    .ac-toggle-btn.active { background: linear-gradient(135deg, #c8a55a, #a8843a); color: #1a1000; box-shadow: 0 0 10px rgba(200,165,90,0.22); }
    .ac-input-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #7fc6ff; font-weight: 900; margin-bottom: 5px; position: relative; z-index: 1; }
    .ac-input-wrap { position: relative; z-index: 1; margin-bottom: 12px; }
    .ac-input { width: 100%; padding: 9px 36px 9px 12px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(122,140,255,0.30); color: #ffffff; font-size: 16px; font-weight: 900; text-align: right; outline: none; transition: 0.15s ease; }
    .ac-input:focus { border-color: rgba(122,140,255,0.60); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 2px rgba(122,140,255,0.12); }
    .ac-input::placeholder { color: rgba(255,255,255,0.22); font-size: 13px; }
    .ac-input-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 900; color: #7a8da8; pointer-events: none; }
    .ac-breakeven { position: relative; z-index: 1; border-radius: 10px; padding: 10px 12px; background: linear-gradient(135deg, rgba(200,165,90,0.10), rgba(160,125,60,0.06)); border: 1px solid rgba(200,165,90,0.20); margin-bottom: 10px; }
    .ac-breakeven-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
    .ac-breakeven-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #c8a55a; font-weight: 900; }
    .ac-breakeven-sub   { font-size: 10px; color: #5a6a82; }
    .ac-breakeven-value { font-size: 20px; font-weight: 900; color: #fff6e4; }
    .ac-breakeven-desc  { font-size: 10px; color: #7a8da8; margin-top: 2px; }
    .ac-sep { display: flex; align-items: center; gap: 8px; margin: 8px 0; position: relative; z-index: 1; }
    .ac-sep-line { flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
    .ac-sep-text { font-size: 10px; color: #5a6a82; font-weight: 900; letter-spacing: 1px; white-space: nowrap; }
    .ac-rates { position: relative; z-index: 1; display: grid; gap: 5px; }
    .ac-rate-row { border-radius: 9px; padding: 8px 10px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); transition: 0.15s ease; }
    .ac-rate-row:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.09); }
    .ac-rate-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
    .ac-rate-left { display: flex; flex-direction: column; gap: 1px; }
    .ac-rate-pct  { font-size: 11px; font-weight: 900; }
    .ac-rate-desc { font-size: 10px; color: #5a6a82; }
    .ac-rate-val  { font-size: 15px; font-weight: 900; color: #ffffff; }
    .ac-bar-wrap { height: 3px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; }
    .ac-bar { height: 100%; border-radius: 999px; transition: width 0.35s ease; }
    .rate-5  { color: #8ef0c9; }
    .bar-5   { background: linear-gradient(90deg, #4bd3ff, #8ef0c9); }
    .rate-10 { color: #7fc6ff; }
    .bar-10  { background: linear-gradient(90deg, #7a8cff, #4bd3ff); }
    @media (max-width: 1024px) { .auction-calc { display: none; } }
 
  .footer-loiter {
  text-align: center;
  padding: 12px 0 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  user-select: none;
}

.footer-loiter p {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  line-height: 1.9;
  margin: 0;
  letter-spacing: 0.3px;
}

    /* ===== 티어표 한눈에 보기 (압축 모드) ===== */
#opTierModal .modal-card,
#favorTierModal .modal-card {
  padding: 20px 20px 14px !important;
}
#opTierModal .modal-title,
#favorTierModal .modal-title {
  font-size: 22px !important;
  margin-bottom: 4px !important;
}
#opTierModal .modal-sub,
#favorTierModal .modal-sub {
  margin-bottom: 10px !important;
}
#opTierModal .modal-divider,
#favorTierModal .modal-divider {
  margin: 10px 0 12px !important;
}
#opTierModal .tier-block,
#favorTierModal .tier-block {
  margin-bottom: 8px !important;
}
#opTierModal .tier-header,
#favorTierModal .tier-header {
  padding: 8px 14px !important;
}
#opTierModal .tier-engravings,
#favorTierModal .tier-engravings {
  padding: 6px 12px 10px !important;
  gap: 6px !important;
}
#opTierModal .engraving-chip,
#favorTierModal .engraving-chip {
  padding: 4px 10px !important;
  font-size: 12px !important;
}
  /* ===== 티어표 열람 조건 솔리드 뱃지 ===== */
.tier-badge-solid {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-top: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* OP 뱃지 (초록) */
.badge-op-solid {
  color: #0c1a13 !important;
  background: linear-gradient(135deg, #3edc7d, #6ff0b7) !important;
}

/* 호감 뱃지 (주황) */
.badge-favor-solid {
  color: #2a1400 !important;
  background: linear-gradient(135deg, #ffac55, #ffd48a) !important;
}

.badge-s-solid {
  color: #08111e !important;
  background: linear-gradient(135deg, #7fc6ff, #4bd3ff) !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 4px 12px rgba(75,211,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22);
  animation: badgeSGlow 2.2s ease-in-out infinite alternate;
}

@keyframes badgeSGlow {
  0% {
    box-shadow:
      0 4px 12px rgba(75,211,255,0.18),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }
  100% {
    box-shadow:
      0 6px 18px rgba(75,211,255,0.32),
      0 0 18px rgba(122,140,255,0.18),
      inset 0 1px 0 rgba(255,255,255,0.28);
  }
}

/* ===== 상단 토글 active 버튼 유리빛 강조 ===== */
.switch-wrap a.active::before {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.14) 18%,
      rgba(75,211,255,0.16) 34%,
      transparent 62%);
  opacity: 0;
  transform: scale(0.55);
  animation: switchGlowPulse 5s ease-in-out infinite;
}

.switch-wrap a.active::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -130%;
  width: 72%;
  height: 190%;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.42) 48%,
    rgba(255,255,255,0.10) 68%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  opacity: 0;
  animation: switchGlassSweep 5s linear infinite;
}

@keyframes switchGlowPulse {
  0%, 80%, 100% {
    opacity: 0;
    transform: scale(0.55);
  }
  86% {
    opacity: 0.55;
    transform: scale(1.05);
  }
  92% {
    opacity: 0.18;
    transform: scale(1.42);
  }
}

@keyframes switchGlassSweep {
  0%, 80% {
    left: -130%;
    opacity: 0;
  }
  84% {
    opacity: 1;
  }
  96% {
    left: 145%;
    opacity: 0.65;
  }
  100% {
    left: 145%;
    opacity: 0;
  }
}

@keyframes switchActiveAura {
  0%, 80%, 100% {
    box-shadow: 0 4px 14px rgba(78,168,255,0.28);
  }
  88% {
    box-shadow:
      0 4px 14px rgba(78,168,255,0.34),
      0 0 18px rgba(120,210,255,0.30),
      0 0 32px rgba(120,210,255,0.18);
  }
  94% {
    box-shadow:
      0 4px 14px rgba(78,168,255,0.30),
      0 0 10px rgba(120,210,255,0.18),
      0 0 22px rgba(120,210,255,0.10);
  }
}

/* ===== OP 승률표 모달 전용 ===== */
.oprate-modal-card {
  width: min(680px, 100%);
  border-radius: 26px;
  padding: 26px 24px 22px;
  background: linear-gradient(180deg, rgba(20,26,40,0.98), rgba(13,18,30,0.98));
  border: 1px solid rgba(140,160,255,0.22);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.50),
    0 0 50px rgba(100,140,255,0.08),
    0 0 100px rgba(80,120,255,0.04);
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.oprate-modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(130,160,255,0.06), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(160,120,255,0.05), transparent 40%),
    radial-gradient(circle at 50% 5%, rgba(255,220,100,0.04), transparent 30%);
}

.oprate-royal-ornament {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  border-radius: 26px;
  overflow: hidden;
}

.oprate-royal-ornament svg {
  width: 100%;
  height: 100%;
  opacity: 0.035;
}

.oprate-crown-line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.oprate-crown-bar {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,180,120,0.30), rgba(200,180,120,0.08));
}

.oprate-crown-bar.right {
  background: linear-gradient(90deg, rgba(200,180,120,0.08), rgba(200,180,120,0.30), transparent);
}

.oprate-crown-icon {
  font-size: 20px;
  animation: crownPulse 3s ease-in-out infinite;
}

.oprate-bottom-ornament {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
}

.oprate-bottom-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,180,120,0.18), rgba(200,180,120,0.05));
}

.oprate-bottom-line.right {
  background: linear-gradient(90deg, rgba(200,180,120,0.05), rgba(200,180,120,0.18), transparent);
}

.oprate-bottom-diamond {
  font-size: 10px;
  color: rgba(200,180,120,0.35);
}

    .oprate-compare-wrap {
      position: relative;
      z-index: 1;
      margin-top: 4px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .oprate-compare-base {
      font-size: 11px;
      font-weight: 900;
      color: #d7c7a6;
      letter-spacing: 0.6px;
    }

    .oprate-compare-vs {
      font-size: 14px;
      font-weight: 900;
      color: #ffd48a;
      letter-spacing: 2px;
      line-height: 1;
    }

    .oprate-compare-tabs {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border-radius: 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      flex-wrap: wrap;
      justify-content: center;
    }

    .oprate-compare-btn {
      min-width: 110px;
      padding: 8px 12px;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: #7a8da8;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      cursor: pointer;
      transition: 0.16s ease;
    }

    .oprate-compare-btn:hover {
      color: #c6d4e8;
      background: rgba(255,255,255,0.04);
    }

    .oprate-compare-btn.active {
      background: rgba(255,255,255,0.08);
      color: #ffffff;
      box-shadow: 0 0 8px rgba(127,198,255,0.08);
    }

        .oprate-compare-btn {
      position: relative;
    }

    .oprate-compare-btn.active::after {
      content: "✔️";
      position: absolute;
      top: -4px;
      right: -4px;
      font-size: 14px;
      pointer-events: none;
      filter: drop-shadow(0 0 4px rgba(62,220,125,0.35));
    }

    @media (max-width: 768px) {
      .oprate-compare-tabs {
        width: 100%;
      }

      .oprate-compare-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding: 8px 10px;
        font-size: 11px;
      }

      .oprate-compare-base {
        font-size: 10px;
      }

           #battleModal .flow-card {
        padding-top: 52px;
      }

      .battle-sound-wrap {
        top: 10px;
        left: 12px;
        gap: 4px;
      }

      .battle-sound-slider {
        width: 56px;
      }

      .battle-sound-value {
        min-width: 24px;
        font-size: 9px;
      }



    }
    
/* ===== OP 승률표 리스트 ===== */
.rate-list-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rate-row-item {
  display: grid;
  grid-template-columns: 32px 46px 1fr 116px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  transition: 0.15s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: none !important;
}

.rate-row-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
}

.rate-rank {
  font-size: 13px;
  font-weight: 900;
  color: #5a6a82;
  text-align: center;
}

    .rate-icon {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid rgba(217,181,111,0.28);
      background: linear-gradient(180deg, rgba(30,35,50,0.94), rgba(15,20,35,0.98));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .rate-icon img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
    }

    .row-top1 .rate-icon {
      border-color: rgba(255,215,0,0.50);
      box-shadow: 0 0 6px rgba(255,215,0,0.15);
    }

    .row-top2 .rate-icon {
      border-color: rgba(140,180,255,0.45);
    }

    .row-top3 .rate-icon {
      border-color: rgba(255,130,80,0.40);
    }
    
.rate-info {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.rate-name {
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1;
}

.rate-class {
  font-size: 11px;
  color: #5a6a82;
  margin-bottom: 4px;
}

.rate-bar-bg {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.rate-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.bar-fill-op {
  background: linear-gradient(90deg, #7a8cff, #4bd3ff);
}

.rate-right {
  position: relative;
  z-index: 1;
  text-align: right;
  min-width: 116px;
}

.rate-value {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

.rate-record {
  font-size: 10px;
  color: #5a6a82;
  font-weight: 800;
  margin-top: 3px;
  line-height: 1;
  white-space: nowrap;
}

   
    .delta-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
      font-size: 11px;
      font-weight: 900;
    }

    .delta-up {
      color: #3edc7d;
      text-shadow: 0 0 4px rgba(62,220,125,0.30);
    }

    .delta-down {
      color: #ff5252;
      text-shadow: 0 0 4px rgba(255,82,82,0.30);
    }

    .delta-same {
      color: #5a6a82;
    }

    .delta-rate-up {
      color: #3edc7d;
      font-size: 10px;
    }

    .delta-rate-down {
      color: #ff5252;
      font-size: 10px;
    }

    .delta-new {
      color: #ffd700;
      font-size: 11px;
      font-weight: 900;
      text-shadow: 0 0 4px rgba(255,215,0,0.30);
    }


    
/* ===== 1등 ===== */
.rate-row-item.row-top1 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,235,140,0.24) 0%, transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(255,90,90,0.12) 0%, transparent 52%),
    linear-gradient(135deg, rgba(255,70,70,0.16), rgba(255,210,70,0.18), rgba(90,230,150,0.12), rgba(100,170,255,0.12), rgba(255,210,90,0.15));
  border-color: rgba(255,255,255,0.05);
  box-shadow:
    0 0 20px rgba(255,210,60,0.34),
    0 0 42px rgba(255,180,20,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.rate-row-item.row-top1::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: conic-gradient(
    from var(--angle,0deg),
    rgba(255,60,60,0.75) 0deg,
    rgba(255,180,30,0.90) 60deg,
    rgba(255,240,80,0.90) 90deg,
    rgba(80,220,140,0.75) 140deg,
    rgba(90,160,255,0.75) 200deg,
    rgba(200,100,255,0.75) 260deg,
    rgba(255,80,180,0.75) 310deg,
    rgba(255,60,60,0.75) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  animation: borderRotate 2.5s linear infinite;
  z-index: 0;
}

.row-top1 .rate-rank {
  font-size: 15px;
  background: linear-gradient(90deg,#ff6b6b,#ffd700,#fffacd,#6bcb77,#ffd700,#ff9ff3,#ffd700);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.60));
}

.row-top1 .rate-name {
  background: linear-gradient(90deg,#ff6b6b,#ffd700,#fffacd,#6bcb77,#ffd700,#fffacd,#ff9ff3,#ffd700);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.55));
}

.row-top1 .rate-value {
  background: linear-gradient(90deg,#ffd700,#fffacd,#ffd700);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 2.5s linear infinite;
  filter: drop-shadow(0 0 3px rgba(255,215,0,0.50));
}

/* ===== 2등 ===== */
.rate-row-item.row-top2 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(150,225,255,0.18) 0%, transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(140,110,255,0.08) 0%, transparent 46%),
    linear-gradient(135deg, rgba(125,105,255,0.15), rgba(85,185,255,0.13), rgba(65,225,185,0.09));
  border-color: rgba(255,255,255,0.05);
  box-shadow:
    0 0 16px rgba(100,200,255,0.28),
    0 0 34px rgba(122,140,255,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.02);
}

.rate-row-item.row-top2::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: conic-gradient(
    from var(--angle,0deg),
    rgba(130,100,255,0.60) 0deg,
    rgba(100,200,255,0.80) 90deg,
    rgba(80,220,180,0.55) 180deg,
    rgba(160,120,255,0.65) 270deg,
    rgba(130,100,255,0.60) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  animation: borderRotate 4.5s linear infinite;
  z-index: 0;
}

.row-top2 .rate-rank {
  font-size: 14px;
  background: linear-gradient(90deg,#4a9edd,#a8deff,#ffffff,#c8a8ff,#a8deff,#4a9edd);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s linear infinite;
  filter: drop-shadow(0 0 3px rgba(100,200,255,0.50));
}

.row-top2 .rate-name {
  background: linear-gradient(90deg,#4a9edd,#a8deff,#ffffff,#c8a8ff,#a8ffdd,#a8deff,#4a9edd);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s linear infinite;
  filter: drop-shadow(0 0 3px rgba(100,200,255,0.45));
}

.row-top2 .rate-value {
  background: linear-gradient(90deg,#a8deff,#ffffff,#a8deff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s linear infinite;
}

/* ===== 3등 ===== */
.rate-row-item.row-top3 {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,120,80,0.16) 0%, transparent 58%),
    linear-gradient(135deg, rgba(255,90,70,0.13), rgba(225,60,45,0.09), rgba(185,35,35,0.07));
  border-color: rgba(255,255,255,0.05);
  box-shadow:
    0 0 10px rgba(255,95,65,0.22),
    0 0 22px rgba(220,60,30,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.02);
}

.rate-row-item.row-top3::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: conic-gradient(
    from var(--angle,0deg),
    rgba(255,90,60,0.45) 0deg,
    rgba(255,180,120,0.65) 60deg,
    rgba(255,220,160,0.70) 90deg,
    rgba(255,180,120,0.65) 140deg,
    rgba(255,90,60,0.45) 200deg,
    rgba(255,140,80,0.50) 260deg,
    rgba(255,90,60,0.45) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  animation: borderRotate 6s linear infinite;
  z-index: 0;
}

.row-top3 .rate-rank {
  font-size: 14px;
  background: linear-gradient(90deg,#cc3322,#ff7755,#ffbb99,#ff7755,#cc3322);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3.5s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255,80,50,0.40));
}

.row-top3 .rate-name {
  background: linear-gradient(90deg,#cc3322,#ff7755,#ffbb99,#ff7755,#cc3322);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3.5s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255,80,50,0.35));
}

.row-top3 .rate-value {
  color: #ff9977;
}

.oprate-modal-card .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}
    
.oprate-modal-card::-webkit-scrollbar {
  width: 5px;
}

.oprate-modal-card::-webkit-scrollbar-track {
  background: transparent;
}

.oprate-modal-card::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}



    /* ===== 문의 게시판 모달 ===== */
    .inquiry-modal-card {
      width: min(560px, 100%);
      max-height: 88vh;
      overflow-y: auto;
      overflow-x: hidden;
      background: linear-gradient(180deg, rgba(24,20,36,0.98), rgba(14,12,24,0.98));
      border: 1px solid rgba(160,120,255,0.18);
      box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 40px rgba(160,120,255,0.06);
    }

    .inquiry-modal-card .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 5;
    }

    /* ===== 탭 ===== */
    .inquiry-tabs {
      display: inline-flex;
      gap: 4px;
      padding: 4px;
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 16px;
      width: 100%;
    }

    .inquiry-tab {
      flex: 1;
      padding: 9px 14px;
      border-radius: 9px;
      border: none;
      background: transparent;
      color: #7a8da8;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.16s ease;
      text-align: center;
    }

    .inquiry-tab:hover {
      color: #c6d4e8;
      background: rgba(255,255,255,0.04);
    }

    .inquiry-tab.active {
      background: rgba(160,120,255,0.15);
      color: #ffffff;
      box-shadow: 0 0 8px rgba(160,120,255,0.10);
    }

    /* ===== 비밀번호 확인 영역 ===== */
    .inquiry-pw-check {
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(160,120,255,0.06);
      border: 1px solid rgba(160,120,255,0.14);
      margin-bottom: 14px;
    }

    .inquiry-pw-label {
      font-size: 12px;
      font-weight: 900;
      color: #c4b5fd;
      margin-bottom: 8px;
    }

    .inquiry-pw-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .inquiry-pw-input {
      flex: 1;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid rgba(160,120,255,0.18);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      outline: none;
      transition: 0.15s ease;
    }

    .inquiry-pw-input:focus {
      border-color: rgba(160,120,255,0.45);
      background: rgba(255,255,255,0.09);
    }

    .inquiry-pw-btn {
      padding: 8px 14px;
      border-radius: 8px;
      border: none;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.15s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .inquiry-pw-btn:hover {
      transform: translateY(-1px);
    }

    .inquiry-list-divider {
      width: 100%;
      height: 1px;
      margin: 0 0 14px;
      background: linear-gradient(90deg, transparent, rgba(160,120,255,0.18), transparent);
    }

    /* ===== 문의 목록 ===== */
    .inquiry-list {
      display: grid;
      gap: 6px;
    }

    .inquiry-item {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.05);
      transition: 0.12s ease;
    }

    .inquiry-item:hover {
      background: rgba(255,255,255,0.045);
      border-color: rgba(255,255,255,0.08);
    }

    .inq-no {
      font-size: 12px;
      font-weight: 900;
      color: #5a6a82;
      text-align: center;
    }

    .inq-info {
      min-width: 0;
    }

    .inq-title-text {
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .inq-meta {
      margin-top: 3px;
      font-size: 10px;
      color: #5a6a82;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .inq-type-badge {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
      background: rgba(160,120,255,0.12);
      color: #c4b5fd;
    }

    .inq-status {
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .inq-status-waiting {
      background: rgba(255,196,90,0.12);
      color: #ffd48a;
      border: 1px solid rgba(255,196,90,0.22);
    }

    .inq-status-replied {
      background: rgba(62,220,125,0.12);
      color: #8ef0c9;
      border: 1px solid rgba(62,220,125,0.22);
    }

    /* ===== 본인 글 확인 결과 ===== */
    .inquiry-read-card {
      margin-top: 14px;
      padding: 16px;
      border-radius: 14px;
      background: rgba(160,120,255,0.06);
      border: 1px solid rgba(160,120,255,0.18);
    }

    .inq-read-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .inq-read-title {
      font-size: 16px;
      font-weight: 900;
      color: #fff;
    }

    .inq-read-date {
      font-size: 10px;
      color: #5a6a82;
    }

    .inq-read-content {
      font-size: 13px;
      color: #d7cfee;
      line-height: 1.7;
      margin-bottom: 12px;
      padding: 12px;
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
    }

    .inq-reply-section {
      padding: 12px;
      border-radius: 10px;
      background: rgba(62,220,125,0.06);
      border: 1px solid rgba(62,220,125,0.16);
    }

    .inq-reply-label {
      font-size: 11px;
      font-weight: 900;
      color: #8ef0c9;
      margin-bottom: 6px;
      letter-spacing: 1px;
    }

    .inq-reply-text {
      font-size: 13px;
      color: #d0f0e0;
      line-height: 1.7;
    }

    .inq-reply-date {
      margin-top: 6px;
      font-size: 10px;
      color: #5a8a6a;
    }

    .inq-no-reply {
      padding: 12px;
      border-radius: 10px;
      background: rgba(255,196,90,0.06);
      border: 1px solid rgba(255,196,90,0.14);
      font-size: 12px;
      color: #ffd48a;
      text-align: center;
      font-weight: 800;
    }

    .inq-read-close-btn {
      width: 100%;
      margin-top: 12px;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.55);
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .inq-read-close-btn:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }

    /* ===== 작성 폼 ===== */
    .inq-form-group {
      margin-bottom: 14px;
    }

    .inq-form-label {
      display: block;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #c4b5fd;
      margin-bottom: 6px;
    }

    .inq-form-input,
    .inq-form-textarea,
    .inq-form-select {
      width: 100%;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(160,120,255,0.15);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      outline: none;
      transition: 0.15s ease;
    }

    .inq-form-input:focus,
    .inq-form-textarea:focus,
    .inq-form-select:focus {
      border-color: rgba(160,120,255,0.45);
      background: rgba(255,255,255,0.09);
    }

    .inq-form-textarea {
      min-height: 100px;
      resize: vertical;
      line-height: 1.6;
    }

    .inq-form-select option {
      background: #141a28;
      color: #fff;
    }

    .inq-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .inq-form-hint {
      font-size: 10px;
      color: #5a6a82;
      margin-top: 4px;
    }

    .inq-submit-btn {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      border: none;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.18s ease;
      margin-top: 6px;
      box-shadow: 0 6px 18px rgba(168,85,247,0.20);
    }

    .inq-submit-btn:hover {
      transform: translateY(-1px);
    }

    .inq-submit-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .inq-pw-notice {
      margin-top: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      background: rgba(160,120,255,0.08);
      border: 1px solid rgba(160,120,255,0.16);
      font-size: 11px;
      color: #c4b5fd;
      line-height: 1.6;
      text-align: center;
    }

    .inq-empty {
      text-align: center;
      padding: 20px;
      font-size: 13px;
      color: #5a6a82;
    }

    /* ===== 문의 비밀번호 팝업 ===== */
    #inqPwPopup {
      z-index: 1200;
    }

    .inq-pw-popup-card {
      width: min(340px, 90%);
      border-radius: 20px;
      padding: 24px 22px 20px;
      background: linear-gradient(180deg, rgba(24,20,36,0.99), rgba(14,12,24,0.99));
      border: 1px solid rgba(160,120,255,0.22);
      box-shadow: 0 20px 60px rgba(0,0,0,0.50), 0 0 30px rgba(160,120,255,0.08);
      text-align: center;
    }

    .inq-pw-popup-title {
      font-size: 18px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 6px;
    }

    .inq-pw-popup-sub {
      font-size: 12px;
      color: #8a7fae;
      margin-bottom: 16px;
    }

    .inq-pw-popup-input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(160,120,255,0.20);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-size: 16px;
      font-weight: 900;
      text-align: center;
      letter-spacing: 2px;
      outline: none;
      transition: 0.15s ease;
      margin-bottom: 14px;
    }

    .inq-pw-popup-input:focus {
      border-color: rgba(160,120,255,0.50);
      background: rgba(255,255,255,0.09);
    }

    .inq-pw-popup-actions {
      display: flex;
      gap: 8px;
    }

    .inq-pw-popup-cancel {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.50);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .inq-pw-popup-cancel:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }

    .inq-pw-popup-confirm {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      border: none;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.15s ease;
      box-shadow: 0 4px 14px rgba(168,85,247,0.20);
    }

    .inq-pw-popup-confirm:hover {
      transform: translateY(-1px);
    }

    /* 클릭 가능 커서 */
    .inquiry-item {
      cursor: pointer;
    }

    .inq-read-field {
      margin-bottom: 10px;
    }

    .inq-read-field-label {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #c4b5fd;
      margin-bottom: 4px;
    }

    .inq-read-field-value {
      font-size: 14px;
      font-weight: 800;
      color: #fff;
    }

    .inq-read-content {
      font-size: 14px;
      color: #d7cfee;
      line-height: 1.7;
      padding: 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      min-height: 80px;
      white-space: pre-wrap;
      word-break: break-all;
    }

    .inq-edit-section {
      margin-top: 12px;
    }

    .inq-edit-label {
      font-size: 11px;
      font-weight: 900;
      color: #c4b5fd;
      margin-bottom: 6px;
      letter-spacing: 1px;
    }

    .inq-edit-textarea {
      width: 100%;
      min-height: 160px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(160,120,255,0.18);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.6;
      resize: vertical;
      outline: none;
      transition: 0.15s ease;
      margin-bottom: 8px;
    }

    .inq-edit-textarea:focus {
      border-color: rgba(160,120,255,0.45);
      background: rgba(255,255,255,0.09);
    }

    .inq-edit-save-btn {
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      border: none;
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .inq-edit-save-btn:hover {
      transform: translateY(-1px);
    }

    .inq-edit-save-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

        .inq-bottom-actions {
      display: flex;
      gap: 8px;
      margin-top: 8px;
      align-items: stretch;
    }

    .inq-bottom-actions .inq-read-close-btn {
      flex: 1;
      margin-top: 0;
    }

    .inq-delete-btn {
      flex: 1;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,80,80,0.25);
      background: rgba(255,80,80,0.08);
      color: #ff8888;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: 0.15s ease;
    }

    .inq-delete-btn:hover {
      background: rgba(255,80,80,0.15);
      border-color: rgba(255,80,80,0.40);
      color: #ff6666;
    }

    .inq-delete-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .inq-secret-notice {
      margin-bottom: 14px;
      padding: 10px 14px;
      border-radius: 10px;
      background: rgba(160,120,255,0.08);
      border: 1px solid rgba(160,120,255,0.16);
      font-size: 12px;
      font-weight: 800;
      color: #c4b5fd;
      text-align: center;
      line-height: 1.5;
    }

    .inq-read-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .inq-read-id {
      font-size: 14px;
      font-weight: 900;
      color: #c4b5fd;
    }

    .inq-read-title-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .inq-read-title-text {
      font-size: 20px;
      font-weight: 900;
      color: #fff;
      line-height: 1.3;
      word-break: keep-all;
    }

    .inq-edit-title-inline {
      flex: 1;
      font-size: 20px;
      font-weight: 900;
      color: #fff;
      line-height: 1.3;
      padding: 6px 12px;
      border-radius: 10px;
      border: 1px solid rgba(160,120,255,0.25);
      background: rgba(255,255,255,0.06);
      outline: none;
      transition: 0.15s ease;
    }

    .inq-edit-title-inline:focus {
      border-color: rgba(160,120,255,0.50);
      background: rgba(255,255,255,0.09);
    }

    .inq-read-id {
      font-size: 16px;
      font-weight: 900;
      color: #c4b5fd;
      flex-shrink: 0;
    }

    
    .inq-read-badges {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .inq-badge-secret {
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 900;
      background: rgba(160,120,255,0.15);
      color: #d8b4fe;
      border: 1px solid rgba(160,120,255,0.25);
    }

    .inq-badge-type {
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 900;
      background: rgba(255,196,90,0.12);
      color: #ffd48a;
      border: 1px solid rgba(255,196,90,0.22);
    }

    .inq-edit-field {
      margin-bottom: 12px;
    }

    .inq-edit-field-label {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #c4b5fd;
      margin-bottom: 5px;
    }

    .inq-edit-input {
      width: 100%;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(160,120,255,0.18);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      outline: none;
      transition: 0.15s ease;
    }

    .inq-edit-input:focus {
      border-color: rgba(160,120,255,0.45);
      background: rgba(255,255,255,0.09);
    }

    .inq-edit-select {
      width: 100%;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(160,120,255,0.18);
      background: rgba(255,255,255,0.06);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      outline: none;
      transition: 0.15s ease;
    }

    .inq-edit-select:focus {
      border-color: rgba(160,120,255,0.45);
      background: rgba(255,255,255,0.09);
    }

    .inq-edit-select option {
      background: #141a28;
      color: #fff;
    }

    .inq-edit-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }

    @media (max-width: 768px) {
      .inq-edit-row {
        grid-template-columns: 1fr;
      }
    }

    
    @media (max-width: 768px) {
      .inquiry-modal-card {
        max-height: 85vh;
      }

      .inq-form-row {
        grid-template-columns: 1fr;
      }

      .inquiry-pw-row {
        flex-wrap: wrap;
      }

      .inquiry-pw-input {
        min-width: 0;
      }

      .inquiry-item {
        grid-template-columns: 30px 1fr auto;
        gap: 8px;
        padding: 9px 10px;
      }
    }
.historyrate-btn-wrap {
  position: relative;
}

.historyrate-btn-wrap::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14px;
  height: 30px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(132, 102, 214, 0.30) 0%,
    rgba(132, 102, 214, 0.14) 42%,
    rgba(132, 102, 214, 0.00) 72%
  );
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}



.tier-btn-history-rate {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(70, 54, 114, 0.96) 0%, rgba(50, 39, 86, 0.98) 50%, rgba(34, 27, 62, 0.99) 100%);
  box-shadow: 0 12px 24px rgba(33, 22, 62, 0.30), 0 0 22px rgba(106, 82, 174, 0.14), 0 0 0 1px rgba(255,255,255,0.02) inset, inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

.tier-btn-history-rate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 중간 세미콜론을 쉼표로 고쳤습니다 */
  background: 
    radial-gradient(circle at 18% 100%, rgba(122, 94, 196, 0.10), transparent 34%),
    radial-gradient(circle at 84% 100%, rgba(96, 134, 225, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%);
}

.tier-btn-history-rate::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(from var(--angle, 0deg), rgba(190, 170, 242, 0.85) 0deg, rgba(160, 132, 229, 0.92) 70deg, rgba(118, 162, 236, 0.88) 140deg, rgba(178, 150, 242, 0.90) 220deg, rgba(126, 104, 214, 0.86) 290deg, rgba(190, 170, 242, 0.85) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
  animation: borderRotate 5.8s linear infinite;
}

.tier-btn-history-rate:hover {
  /* 압축기가 0을 지워도 인식되도록 수치 유지 */
  box-shadow: 0 16px 30px rgba(40, 26, 74, 0.34), 0 0 26px rgba(126, 104, 214, 0.18), 0 0 54px rgba(116, 146, 226, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transform: translateY(-2px);
  filter: brightness(1.03);
}




.tier-btn-history-rate .tier-btn-content {
  position: relative;
  z-index: 2;
}

.tier-btn-history-rate .tier-btn-small {
  color: rgba(226, 218, 245, 0.74);
}

.tier-btn-history-rate .tier-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.historyrate-main-text {
  display: inline-block;
  background: linear-gradient(90deg, #f8f4ff 0%, #ded3fb 34%, #b8c9f2 68%, #f8f4ff 100%);
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: historyRateTextShift 6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(178,150,242,0.14));
}
    
.historyrate-main-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(161,132,229,0.24), rgba(102,150,228,0.18));
  border: 1px solid rgba(210, 200, 245, 0.18);
  box-shadow:
    0 0 10px rgba(161,132,229,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10);
  flex-shrink: 0;
  margin: -4px 0; /* 아이콘이 버튼 위아래 높이를 늘리지 않게 상쇄 */
}

.historyrate-main-icon {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  filter:
    drop-shadow(0 0 5px rgba(161,132,229,0.18))
    drop-shadow(0 0 10px rgba(102,150,228,0.10));
  transform: translateY(0.5px);
}

.tier-btn-history-rate .oprate-spark-glow {
  position: absolute;
  top: -18px;
  right: -10px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(196, 176, 244, 0.20) 0%, rgba(196, 176, 244, 0.08) 42%, rgba(196, 176, 244, 0) 72%);
  filter: blur(8px);
}

.tier-btn-history-rate .oprate-spark-sweep {
  position: absolute;
  top: -35%;
  left: -130%;
  width: 72%;
  height: 190%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.42) 48%,
    rgba(255,255,255,0.10) 68%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(18deg);
  opacity: 0;
  animation: historyRateSweep 5.8s linear infinite;
  mix-blend-mode: screen;
}

.badge-history-solid {
  background: linear-gradient(180deg, rgba(166, 132, 234, 0.98), rgba(126, 96, 204, 0.98));
  color: #111111 !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 4px 10px rgba(91, 63, 158, 0.24),
    0 0 10px rgba(126,96,204,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
    
@keyframes historyRateSweep {
  0%, 80% {
    left: -130%;
    opacity: 0;
  }
  84% {
    opacity: 1;
  }
  96% {
    left: 145%;
    opacity: 0.65;
  }
  100% {
    left: 145%;
    opacity: 0;
  }
}

@keyframes historyRateTextShift {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}


#historyRateModal {
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1600;
}

.history-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(96vw, 1640px);
  height: min(94vh, 1100px);
  background: rgba(17, 22, 34, 0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
    
.history-modal-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  width: 100%;
  flex: 1;
  min-height: 0;
}
    
.history-left-panel {
  border-right: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.history-left-head {
  padding: 16px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.history-left-head h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: #f3f7ff;
}

.history-left-head p {
  margin: 0;
  color: #93a0b6;
  font-size: 13px;
  line-height: 1.5;
}

.history-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-height: 34px;
}

.history-selected-tags .tag,
.history-selected-tag {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #eef5ff;
}

.history-search-box {
  position: relative;
  padding: 8px 10px 0;
  flex-shrink: 0;
}

.history-search-box input {
  width: 100%;
  padding: 10px 42px 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0f1520;
  color: #eef4ff;
  font-size: 13px;
  outline: none;
}

.history-search-box input:focus {
  border-color: rgba(156, 132, 214, 0.52);
  box-shadow: 0 0 0 3px rgba(156, 132, 214, 0.10);
}

.history-reset-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #a9b4c8;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .16s ease;
}

.history-reset-btn:hover {
  background: rgba(156, 132, 214, 0.12);
  color: #f2f5ff;
}

.history-reset-btn:active {
  transform: scale(0.96);
}
    
.history-engraving-list {
  padding: 10px 10px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.history-engraving-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  cursor: pointer;
  transition: .18s ease;
}

.history-engraving-item:hover {
  background: rgba(126,255,174,0.06);
  border-color: rgba(126,255,174,0.14);
}

.history-engraving-item.checked {
  background: rgba(126,255,174,0.10);
  border-color: rgba(126,255,174,0.22);
}

.history-engraving-item input {
  width: 17px;
  height: 17px;
  accent-color: #8d6cff;
  flex: 0 0 auto;
  cursor: pointer;
}

.history-engraving-short {
  min-width: 36px;
  font-size: 14px;
  font-weight: 900;
  color: #eef4ff;
}

.history-engraving-class {
  margin-left: auto;
  font-size: 11px;
  color: #79869c;
}

.history-main-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(123, 88, 214, 0.05), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}

.history-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

.history-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-field label {
  font-size: 12px;
  font-weight: 800;
  color: #9eabc0;
}

.history-field input,
.history-field select {
  min-width: 150px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #101723;
  color: #eef4ff;
  outline: none;
}

.history-field input:focus,
.history-field select:focus {
  border-color: rgba(156, 132, 214, 0.52);
  box-shadow: 0 0 0 3px rgba(156, 132, 214, 0.10);
}

.history-confirm-btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  font-weight: 900;
  color: #f7f1ff;
  background: linear-gradient(135deg, rgba(131, 97, 207, 0.98), rgba(97, 129, 220, 0.96));
  box-shadow:
    0 10px 22px rgba(74, 61, 140, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.10);
  cursor: pointer;
  transition: .18s ease;
}

.history-confirm-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 14px 26px rgba(74, 61, 140, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.history-notice {
  padding: 12px 20px 4px;
  color: #94a4bc;
  font-size: 13px;
}

.history-content-area {
  padding: 14px 18px 18px;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.history-chart-card,
.history-table-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 16px;
}

.history-table-card {
  border-color: rgba(156, 132, 214, 0.14);
  box-shadow:
    0 4px 16px rgba(56, 38, 98, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.history-table-card h3 {
  background: linear-gradient(90deg, #e0d4f8, #c4b8ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

   .history-chart-card h3,
.history-table-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 900;
}

.history-chart-card h3 {
  color: #f4f8ff;
}


.history-chart-card p,
.history-table-card p {
  margin: 0 0 14px;
  color: #99a6bc;
  font-size: 13px;
}

.history-chart-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)),
    #0f1520;
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
}

#historyChartSvg {
  width: 100%;
  height: 380px;
  display: block;
}

.history-tooltip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: rgba(10, 14, 22, 0.96);
  border: 1px solid rgba(156, 132, 214, 0.22);
  color: #eef5ff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.history-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #dce9ff;
  font-size: 12px;
  font-weight: 800;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 7px 10px;
  border-radius: 999px;
}

.history-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.history-mini-table-wrap {
  overflow-x: auto;
}

.history-table-card table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.history-table-card thead th {
  text-align: left;
  font-size: 12px;
  color: #c8d0e0;
  padding: 12px 14px;
  border-bottom: 2px solid rgba(156, 132, 214, 0.28);
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(156, 132, 214, 0.08), rgba(156, 132, 214, 0.03));
  letter-spacing: 0.02em;
}

.history-table-card tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  color: #edf3ff;
  white-space: nowrap;
}

.history-table-card tbody tr {
  transition: background .15s ease;
}

.history-table-card tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

.history-table-card tbody tr:hover {
  background: rgba(156, 132, 214, 0.08);
}

@media (max-width: 1100px) {
  #historyRateModal {
    padding: 12px;
  }

  .history-modal-card {
    width: 100%;
    height: min(92vh, 980px);
  }

  .history-modal-inner {
    grid-template-columns: 1fr;
  }

  .history-left-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .history-engraving-list {
    max-height: 260px;
  }

  #historyChartSvg {
    height: 300px;
  }
}
    body.history-modal-open {
  overflow: hidden;
}

.history-modal-header {
  display: flex;
  align-items: center;
  padding: 14px 64px 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  flex-shrink: 0;
}

.history-modal-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.history-modal-header-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(156,132,214,0.2));
  flex-shrink: 0;
}

.history-modal-header-title {
  font-size: 17px;
  font-weight: 900;
  color: #f4f8ff;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.history-modal-header-sep {
  color: rgba(255,255,255,0.2);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.history-modal-header-desc {
  font-size: 12px;
  color: #8a97ae;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-unit-tabs {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(156, 132, 214, 0.28);
}

.history-unit-btn {
  border: 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 800;
  color: #9ba5bc;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: .18s ease;
  white-space: nowrap;
}

.history-unit-btn:not(:last-child) {
  border-right: 1px solid rgba(156, 132, 214, 0.18);
}

.history-unit-btn:hover {
  color: #ddd8f0;
  background: rgba(156, 132, 214, 0.10);
}

.history-unit-btn.active {
  color: #f7f1ff;
  background: linear-gradient(135deg, rgba(131, 97, 207, 0.92), rgba(97, 129, 220, 0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}


    .history-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) brightness(1.2);
  cursor: pointer;
}

.history-table-card .color-chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px currentColor;
}
    

@media (max-width: 768px) {
  .historyrate-btn-wrap {
    display: none !important;
  }

  #historyRateModal {
    display: none !important;
  }
}

#gradeDistModal {
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1550;
}

.grade-dist-modal-card {
  position: relative;
  width: min(92vw, 470px);
  max-height: min(78vh, 760px);
  background: rgba(18, 23, 36, 0.97);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}

.grade-dist-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(circle at top, rgba(110, 160, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.grade-dist-title {
  font-size: 20px;
  font-weight: 900;
  color: #f5f8ff;
  letter-spacing: -0.02em;
}

.grade-dist-sub {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #8ea0bb;
}

.grade-dist-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
  max-height: calc(min(78vh, 760px) - 86px);
}

.grade-dist-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.grade-dist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: .16s ease;
}

.grade-dist-row:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

.grade-dist-grade {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.grade-dist-percent {
  font-size: 13px;
  font-weight: 900;
  color: #f3f7ff;
}

.grade-dist-empty {
  text-align: center;
  color: #6e809b;
  font-size: 13px;
  padding: 24px 0;
}

#closeHistoryRateBtn {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 20;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ===================== TOURNAMENT UI OVERRIDE ===================== */

/* 1) 전체 배경 */
body {
    background:
        radial-gradient(circle at top center, rgba(59,130,246,.05), transparent 40%),
        #0d0e13 !important;
    color: #e0e0e0 !important;
    font-family: "Segoe UI", "Malgun Gothic", sans-serif !important;
}

/* 2) 전체 프레임 */
.app {
    background: transparent !important;
}

.workspace {
    background: transparent !important;
}

.sidebar {
    background: #111318 !important;
    border-right: 1px solid #1e2030 !important;
}

.main {
    background: #0d0e13 !important;
}



/* 4) 좌측 상단 텍스트 */
.mini-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #4a7cff !important;
}

.hero {
    color: #fff !important;
}

.muted {
    color: #6b7280 !important;
}

/* 5) 안내 버튼 */
.guide-trigger {
    background: #1a1c24 !important;
    border: 1px solid #252836 !important;
    border-radius: 12px !important;
    color: #e0e0e0 !important;
    box-shadow: none !important;
}

.guide-trigger:hover {
    background: #1e2030 !important;
    border-color: #3b4563 !important;
}

/* 6) 구분선 */
.sidebar-divider {
    background: #1e2030 !important;
    height: 1px !important;
    opacity: 1 !important;
}

/* 7) 왼쪽 사이드 카드들 톤 통일 */
.tier-btn {
    border: 1px solid #252836 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.historyrate-btn-wrap,
.oprate-btn-wrap {
    border-radius: 14px !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* 버튼별 내부 배경 다시 살리기 */
.tier-btn-op {
    background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.03)) !important;
    border: 1px solid rgba(34,197,94,0.22) !important;
    border-top: 2px solid #22c55e !important;
    color: #86efac !important;
}

.tier-btn-favor {
    background: linear-gradient(135deg, rgba(247,202,84,0.10), rgba(247,202,84,0.03)) !important;
    border: 1px solid rgba(247,202,84,0.22) !important;
    border-top: 2px solid #f7ca54 !important;
    color: #fcd34d !important;
}

.tier-btn-op-rate {
    background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(99,102,241,0.05)) !important;
    border: 1px solid rgba(99,102,241,0.22) !important;
    border-top: 2px solid #3b82f6 !important;
}


.tier-btn-history-rate {
    background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(139,92,246,0.04)) !important;
    border: 1px solid rgba(167,139,250,0.22) !important;
    border-top: 2px solid #a78bfa !important;
}


.tier-btn-class-win{
  background:linear-gradient(135deg,rgba(239,68,68,.10),rgba(127,29,29,.04))!important;
  border:1px solid rgba(239,68,68,.22)!important;
  border-top:2px solid #ef4444!important;
  color:#ffb4b4!important;
}

.tier-btn-class-win:hover{
  background:#1a1c24!important;
  border-color:#ef4444!important;
  border-top:2px solid #ef4444!important;
  transform:translateY(-1px)!important;
}

.tier-btn-class-win .tier-btn-small{
  color:#ffb4b4!important;
}

.tier-btn-class-win .tier-btn-main{
  color:#fff0f0!important;
}


    
/* 내부 버튼/링크가 있을 경우 */
.tier-btn *,
.historyrate-btn-wrap *,
.oprate-btn-wrap * {
    color: inherit;
}

/* 카드별 상단 포인트 컬러 */
.tier-btn-op {
    border-top: 2px solid #22c55e !important;
}

.tier-btn-favor {
    border-top: 2px solid #f7ca54 !important;
}

/* history / op rate 래퍼 안쪽도 카드처럼 */
.historyrate-btn-wrap {
    border-top: none !important;
}

.oprate-btn-wrap {
    border-top: none !important;
}

.tier-btn-history-rate {
    border-top: 2px solid #a78bfa !important;
}

.tier-btn-op-rate {
    border-top: 2px solid #3b82f6 !important;
}

.tier-btn-history-rate,
.tier-btn-op-rate {
    border-radius: 14px !important;
    overflow: hidden !important;
}

.tier-btn-history-rate::after,
.tier-btn-op-rate::after {
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: 0.42 !important;
    padding: 1px !important;
}

.tier-btn-history-rate::after,
.tier-btn-op-rate::after {
    clip-path: inset(0 round 14px);
}

/* hover */
.tier-btn:hover,
.tier-btn-history-rate:hover,
.tier-btn-op-rate:hover {
    background: #1a1c24 !important;
    border-color: #3b4563 !important;
    transform: translateY(-1px) !important;
}

/* 8) 상단 소개/메인 박스 계열
   class명을 몰라서 main 안의 첫 카드성 박스를 약하게 맞추는 보조 규칙 */
.main > div,
.main section {
    color: inherit;
}

/* 9) 경매 계산기 / 캘린더도 통일 */
.auction-calc {
    background: #1a1c24 !important;
    border: 1px solid rgba(200,165,90,.25) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.sidebar-calendar {
    background: #1a1c24 !important;
    border: 1px solid #252836 !important;
    border-radius: 14px !important;
}

/* 10) 모달 계열 */
.modal-backdrop,
.flow-modal,
.winner-modal,
.mini-popup {
    color: #e0e0e0 !important;
}

.modal-card,
.flow-modal .modal-card,
.winner-modal .modal-card {
    background: #13151c !important;
    border: 1px solid #252836 !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.45) !important;
}

/* 11) 푸터 */
.footer-loiter {
    border-top: 1px solid #1e2030 !important;
    background: #0d0e13 !important;
}

.footer-loiter p {
    color: #3b4563 !important;
}

/* 12) 반응형 */
@media (max-width: 1024px) {
    .sidebar {
        border-right: none !important;
        border-bottom: 1px solid #1e2030 !important;
    }
}



/* 13) 메인 토너먼트 카드 다크 대시보드 톤 */
.tournament-card {
    background: #13151c !important;
    border: 1px solid #252836 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.tournament-card::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 42%) !important;
}

/* OP 카드 */
.op-card {
    background:
        linear-gradient(180deg, rgba(59,130,246,0.10), rgba(19,21,28,0.96) 42%),
        #13151c !important;
    border: 1px solid rgba(99,102,241,0.28) !important;
    box-shadow: 0 0 0 1px rgba(99,102,241,0.04) inset !important;
}

/* 호감 카드 */
.favor-card {
    background:
        linear-gradient(180deg, rgba(247,202,84,0.08), rgba(19,21,28,0.96) 42%),
        #13151c !important;
    border: 1px solid rgba(247,202,84,0.24) !important;
    box-shadow: 0 0 0 1px rgba(247,202,84,0.03) inset !important;
}

/* 카드 텍스트 */
.card-label {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    font-weight: 900 !important;
}

.op-card .card-label {
    color: #93c5fd !important;
}

.favor-card .card-label {
    color: #f7ca54 !important;
}

.card-title {
    color: #ffffff !important;
}

.card-desc {
    color: #6b7280 !important;
}

/* 메인 카드 버튼도 다크톤에 맞게 정리 */
.primary-btn {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(99,102,241,.18) !important;
}

.ghost-btn {
    background: #1a1c24 !important;
    border: 1px solid #252836 !important;
    color: #6b7280 !important;
    box-shadow: none !important;
}

.ghost-btn:hover {
    background: #1e2030 !important;
    border-color: #3b4563 !important;
    color: #d1d5db !important;
}


/* 14) 직업 선택 / 배틀 모달 다크 대시보드 톤 */
#classModal,
#battleModal {
    background: rgba(4, 8, 16, 0.72) !important;
    backdrop-filter: blur(6px) !important;
}

#classModal .flow-card,
#battleModal .flow-card {
    background: #13151c !important;
    border: 1px solid #252836 !important;
    border-radius: 20px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.45) !important;
}

/* 상단 라벨/제목/설명 */
#classModal .flow-label,
#battleModal .flow-label {
    color: #a78bfa !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    font-weight: 900 !important;
}

#classModal .flow-title,
#battleModal .flow-title,
#battleModal .battle-top-title,
#battleModal .battleRoundTitle {
    color: #ffffff !important;
}

#classModal .flow-desc,
#battleModal .flow-desc,
#battleModal #battleSubText {
    color: #6b7280 !important;
}

/* 직업 선택 줄 */
.class-row {
    background: #15171f !important;
    border: 1px solid #252836 !important;
    border-radius: 14px !important;
}

.class-group {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

/* 직업 선택 버튼 */
.class-select-btn {
    background: #1a1c24 !important;
    border: 1px solid #252836 !important;
    color: #e5e7eb !important;
    box-shadow: none !important;
}

.class-select-btn:hover {
    background: #1e2030 !important;
    border-color: #3b4563 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* 배틀 진행바 */
.battle-progress-top {
    color: #9ca3af !important;
}

.battle-progress-bar {
    background: #15171f !important;
    border: 1px solid #252836 !important;
    border-radius: 999px !important;
    padding: 3px !important;
    height: 14px !important;
}

.battle-progress-fill {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 12px rgba(99,102,241,.18) !important;
}

/* VS 텍스트 */
.battle-vs {
    color: #f7ca54 !important;
    text-shadow: 0 0 10px rgba(247,202,84,.16) !important;
}

/* 배틀 카드 기본 */
.battle-choice {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        #15171f !important;
    border: 1px solid #252836 !important;
    box-shadow:
        0 16px 32px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,255,255,.02) inset !important;
}

/* 카드 hover */
.battle-choice:hover {
    filter: brightness(1.03) !important;
}

/* 단계별 글로우를 다크톤에 맞게 다운 */
.battle-choice.stage-green {
    box-shadow:
        0 16px 34px rgba(0,0,0,.28),
        0 0 28px rgba(52,211,153,.12) !important;
    border-color: rgba(52,211,153,.22) !important;
}

.battle-choice.stage-blue {
    box-shadow:
        0 16px 34px rgba(0,0,0,.28),
        0 0 30px rgba(59,130,246,.14) !important;
    border-color: rgba(59,130,246,.24) !important;
}

.battle-choice.stage-purple {
    box-shadow:
        0 16px 34px rgba(0,0,0,.28),
        0 0 30px rgba(167,139,250,.14) !important;
    border-color: rgba(167,139,250,.24) !important;
}

.battle-choice.stage-yellow {
    box-shadow:
        0 18px 36px rgba(0,0,0,.30),
        0 0 32px rgba(247,202,84,.14) !important;
    border-color: rgba(247,202,84,.24) !important;
}

.battle-choice.stage-red {
    box-shadow:
        0 18px 36px rgba(0,0,0,.32),
        0 0 34px rgba(239,68,68,.16) !important;
    border-color: rgba(239,68,68,.24) !important;
}

/* 카드 내부 텍스트 */
.battle-choice-class {
    color: #6b7280 !important;
}

.battle-choice-name {
    text-shadow: 0 0 10px rgba(255,255,255,.08) !important;
}

/* 카드 프레임 금선은 조금 톤다운 */
.gold {
    stroke: rgba(247,202,84,0.78) !important;
}

.gold-thin {
    stroke: rgba(247,202,84,0.48) !important;
}

.gold-fill {
    fill: rgba(247,202,84,0.82) !important;
}

/* 글로스도 너무 튀지 않게 */
.choice-gloss {
    background: linear-gradient(
      115deg,
      rgba(255,255,255,0) 22%,
      rgba(255,255,255,0.04) 34%,
      rgba(147,197,253,0.16) 48%,
      rgba(255,255,255,0.04) 62%,
      rgba(255,255,255,0) 78%
    ) !important;
}

/* 그만두기 버튼 */
#quitBattleBtn,
#closeClassModalBtn {
    background: #1a1c24 !important;
    border: 1px solid #252836 !important;
    color: #9ca3af !important;
}

#quitBattleBtn:hover,
#closeClassModalBtn:hover {
    background: #1e2030 !important;
    border-color: #3b4563 !important;
    color: #ffffff !important;
}


/* 15) 우승 모달 / 가이드 모달 / 티어 모달 / 승률표 모달 다크 대시보드 톤 통일 */

/* ===== 모달 배경 ===== */
#winnerModal,
#guideModal,
#opTierModal,
#favorTierModal,
#opRateModal {
    background: rgba(4, 8, 16, 0.76) !important;
    backdrop-filter: blur(6px) !important;
}

/* ===== 우승 모달 카드 ===== */
#winnerModal .winner-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        #13151c !important;
    border: 1px solid #252836 !important;
    border-radius: 24px !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.02) inset !important;
}

#winnerModal .winner-card::before {
    background:
        radial-gradient(circle at top center, rgba(99,102,241,.06), transparent 34%),
        radial-gradient(circle at bottom center, rgba(247,202,84,.05), transparent 34%) !important;
}

#winnerModal .winner-label {
    color: #a78bfa !important;
}

#winnerModal .winner-title {
    color: #ffffff !important;
    text-shadow: none !important;
}

#winnerModal .winner-sub {
    color: #d1d5db !important;
}

#winnerModal .winner-desc {
    color: #6b7280 !important;
}

#winnerModal .winner-actions .primary-btn {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(99,102,241,.18) !important;
}

/* ===== 우승 모달 안 등급 도장 랩 ===== */
#winnerModal .grade-stamp-wrap {
    margin: 18px 0 12px !important;
}

#winnerModal .grade-comment {
    color: #c4b5fd !important;
    font-style: normal !important;
}

/* ===== 공통 modal-card 톤 (가이드 / 티어 / 승률표) ===== */
#guideModal .modal-card,
#opTierModal .modal-card,
#favorTierModal .modal-card,
#opRateModal .modal-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        #13151c !important;
    border: 1px solid #252836 !important;
    border-radius: 22px !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.02) inset !important;
}

/* ===== 모달 닫기 버튼 ===== */
#guideModal .modal-close,
#opTierModal .modal-close,
#favorTierModal .modal-close,
#opRateModal .modal-close {
    background: #1a1c24 !important;
    border: 1px solid #252836 !important;
    color: #9ca3af !important;
}

#guideModal .modal-close:hover,
#opTierModal .modal-close:hover,
#favorTierModal .modal-close:hover,
#opRateModal .modal-close:hover {
    background: #1e2030 !important;
    border-color: #3b4563 !important;
    color: #ffffff !important;
}

/* ===== 가이드 모달 ===== */
#guideModal .modal-top-label {
    color: #a78bfa !important;
}

#guideModal .modal-title {
    color: #ffffff !important;
}

#guideModal .modal-sub {
    color: #6b7280 !important;
}

#guideModal .modal-divider {
    background: linear-gradient(90deg, transparent, #252836, transparent) !important;
}

#guideModal .grade-note {
    background: #1a1c24 !important;
    border: 1px solid #252836 !important;
    color: #9ca3af !important;
}

/* 등급표 셀은 기존 색상 유지하면서 배경만 대시보드화 */
#guideModal .grade-item {
    background: rgba(255,255,255,0.03) !important;
    box-shadow: none !important;
}

/* ===== OP / 호감 티어 모달 ===== */
#opTierModal .modal-top-label,
#favorTierModal .modal-top-label {
    color: #a78bfa !important;
}

#opTierModal .modal-sub,
#favorTierModal .modal-sub {
    color: #6b7280 !important;
}

#opTierModal .modal-divider,
#favorTierModal .modal-divider {
    background: linear-gradient(90deg, transparent, #252836, transparent) !important;
}

/* 티어 박스들도 대시보드 톤 위에 자연스럽게 */
#opTierModal .tier-block,
#favorTierModal .tier-block {
    box-shadow: none !important;
}

/* ===== 승률표 모달 상단 ===== */
#opRateModal .modal-top-label {
    color: #a78bfa !important;
}

#opRateModal .modal-title {
    color: #ffffff !important;
}

#opRateModal .modal-sub {
    color: #6b7280 !important;
}

#opRateModal .modal-divider {
    background: linear-gradient(90deg, transparent, #252836, transparent) !important;
}

/* 비교 기준 영역도 다크 톤에 맞게 */
.oprate-compare-wrap {
    background: rgba(255,255,255,0.02) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.oprate-compare-base {
    color: #9ca3af !important;
}

.oprate-compare-vs {
    color: #f7ca54 !important;
}

/* 모바일 */
@media (max-width: 768px) {
    #winnerModal .winner-card,
    #guideModal .modal-card,
    #opTierModal .modal-card,
    #favorTierModal .modal-card,
    #opRateModal .modal-card {
        border-radius: 18px !important;
    }
}



/* ===================== 1번 사이트(DPS)와 상단 픽셀 완벽 동기화 (규격서 반영) ===================== */

/* 1. 사이드바 (내부 간격 조절을 위한 gap 사용 차단) */
.sidebar {
    gap: 0 !important;
}


/* 3. 미니 라벨 */
.mini-label {
    font-size: 12px !important;
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
}


/* 5. 설명 텍스트 (하단 여백 0으로 통제) */
.muted {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important; 
}

/* 6 & 7. 안내 버튼 
   (직각 토너먼트에는 래퍼가 없으므로 래퍼의 여백(18px)을 버튼 본체에 부여하여 픽셀을 완벽히 맞춤) */
.guide-trigger,
.guide-btn {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    padding: 20px 18px 18px !important;
    border-radius: 20px !important;
    font-size: 17px !important;
}

/* 버튼 내 메인 텍스트 폰트 크기 동기화 */
.guide-trigger .guide-main {
    font-size: 17px !important;
}

/* 8. 안내 버튼 내 작은 텍스트 */
.guide-trigger .guide-small,
.guide-btn .guide-small {
    font-size: 12px !important;
    margin-bottom: 8px !important;
}

/* 9. 가로 구분선 */
.sidebar-divider {
    margin: 14px 0 18px !important;
}



/* ===== 클래스별 우승 분석 모달 ===== */
#classWinModal .modal-card{
  width:min(1100px,100%);
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:24px 24px 20px;
  background:#13151c!important;
  border:1px solid #252836!important;
  border-radius:24px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.45)!important;
  position:relative;
}

#classWinModal #classWinContent{
  padding-top:4px;
}

.cw-chart-header{
  text-align:center;
  margin-bottom:10px;
}

.cw-chart-class-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(167,139,250,.12);
  border:1px solid rgba(167,139,250,.22);
  font-size:13px;
  font-weight:900;
  color:#c4b5fd;
  margin-bottom:10px;
}

.cw-chart-title{
  font-size:24px;
  font-weight:900;
  color:#fff;
  line-height:1.35;
  margin-bottom:6px;
}

.cw-hl-op{color:#34d399}
.cw-hl-favor{color:#f7ca54}

.cw-chart-sub{
  font-size:12px;
  color:#6b7280;
}

.cw-body{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:28px;
  align-items:start;
  margin-top:18px;
}

.cw-pie-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.cw-pie-container{
  position:relative;
  width:500px;
  height:500px;
  overflow:visible;
  transition:opacity .25s ease,transform .25s ease;
}

.cw-pie-container.fading{
  opacity:.35;
  transform:scale(.97);
}

.cw-pie-container canvas{
  width:100%;
  height:100%;
  display:block;
  cursor:pointer;
}

.cw-legend-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  justify-content:center;
  max-width:700px;
}

.cw-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  color:#e5e7eb;
}

.cw-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.cw-pie-note{
  font-size:11px;
  color:#4b5563;
  text-align:center;
}

.cw-pie-note strong{
  color:#6b7280;
}

.cw-control-panel{
  border-radius:16px;
  background:#15171f;
  border:1px solid #252836;
  overflow:visible;
  position:relative;
  z-index:10;
}

.cw-control-panel-head{
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid #252836;
  font-size:11px;
  font-weight:900;
  color:#a78bfa;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.cw-control-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:visible;
}

.cw-type-toggle{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:10px;
  background:#1a1c24;
  border:1px solid #252836;
}

.cw-type-btn{
  flex:1;
  padding:9px 12px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:#6b7280;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}

.cw-type-btn.cw-active-op{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}

.cw-type-btn.cw-active-favor{
  background:linear-gradient(135deg,#f7ca54,#f59e0b);
  color:#1a1000;
}

.cw-select-wrap{
  position:relative;
  z-index:20;
}

.cw-select-btn{
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid #252836;
  background:#1a1c24;
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:.15s ease;
}

.cw-select-btn:hover{
  border-color:#3b4563;
  background:#1e2030;
}

.cw-arrow{
  font-size:12px;
  color:#6b7280;
  transition:.2s ease;
}

.cw-arrow.open{
  transform:rotate(180deg);
}

.cw-select-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  border-radius:12px;
  border:1px solid #252836;
  background:#1a1c24;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  z-index:30;
  display:none;
  max-height:360px;
  overflow-y:auto;
}

.cw-select-dropdown.show{
  display:block;
}

.cw-select-dropdown::-webkit-scrollbar{
  width:4px;
}

.cw-select-dropdown::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.08);
  border-radius:999px;
}


.cw-select-option{
  padding:9px 14px;
  font-size:13px;
  font-weight:800;
  color:#9ca3af;
  cursor:pointer;
  transition:.12s ease;
}

.cw-select-option:hover{
  background:#1e2030;
  color:#fff;
}

.cw-select-option.cw-active{
  color:#3b82f6;
  background:rgba(59,130,246,.08);
}

.cw-control-help{
  margin-top:4px;
  font-size:11px;
  line-height:1.6;
  color:#6b7280;
}

@media (max-width:980px){
  #classWinModal .modal-card{
    width:min(96vw,100%);
    padding:20px 16px 16px;
  }

  .cw-body{
    grid-template-columns:1fr;
  }

  .cw-pie-container{
    width:360px;
    height:360px;
  }
}

@media (max-width:520px){
  .cw-pie-container{
    width:300px;
    height:300px;
  }

  .cw-chart-title{
    font-size:20px;
  }

  #classWinModal .modal-card{
    border-radius:18px!important;
  }
}
    
  



body.class-win-modal-open{
  overflow:hidden !important;
}



  #classWinModal{
  overflow-y:auto;
  overflow-x:visible;
  align-items:center;
  justify-content:center;
}


#classWinModal #classWinContent,
#classWinModal .cw-body,
#classWinModal .cw-pie-area,
#classWinModal .cw-control-panel,
#classWinModal .cw-control-body,
#classWinModal .cw-select-wrap{
  overflow:visible !important;
}
  
  
#classWinModal .modal-top-label,
#classWinModal .modal-title,
#classWinModal .modal-sub,
#classWinModal .modal-divider{
  display:none!important;
}

#classWinModal #classWinContent{
  padding-top:4px;
}

.cw-chart-header{
  text-align:center;
  margin-bottom:10px;
}

.cw-chart-class-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(167,139,250,.12);
  border:1px solid rgba(167,139,250,.22);
  font-size:13px;
  font-weight:900;
  color:#c4b5fd;
  margin-bottom:10px;
}

.cw-chart-title{
  font-size:24px;
  font-weight:900;
  color:#fff;
  line-height:1.35;
  margin-bottom:6px;
}

.cw-hl-op{color:#34d399}
.cw-hl-favor{color:#f7ca54}

.cw-chart-sub{
  font-size:12px;
  color:#6b7280;
}

.cw-body{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:28px;
  align-items:start;
  margin-top:18px;
}

.cw-pie-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  min-width:0;
}

.cw-pie-container{
  position:relative;
  width:500px;
  height:500px;
  overflow:visible;
  transition:opacity .25s ease,transform .25s ease;
}

.cw-pie-container.fading{
  opacity:.35;
  transform:scale(.97);
}

.cw-pie-container canvas{
  width:100%;
  height:100%;
  display:block;
  cursor:pointer;
}

.cw-legend-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  justify-content:center;
  max-width:700px;
  min-height:28px;
}

.cw-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  color:#e5e7eb;
}

.cw-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.cw-pie-note{
  font-size:11px;
  color:#4b5563;
  text-align:center;
}

.cw-pie-note strong{
  color:#6b7280;
}

.cw-control-panel{
  border-radius:16px;
  background:#15171f;
  border:1px solid #252836;
  overflow:visible;
  position:relative;
  z-index:10;
}

.cw-control-panel-head{
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid #252836;
  font-size:11px;
  font-weight:900;
  color:#a78bfa;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.cw-control-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:visible;
}

.cw-type-toggle{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:10px;
  background:#1a1c24;
  border:1px solid #252836;
}

.cw-type-btn{
  flex:1;
  padding:9px 12px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:#6b7280;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}

.cw-type-btn.cw-active-op{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}

.cw-type-btn.cw-active-favor{
  background:linear-gradient(135deg,#f7ca54,#f59e0b);
  color:#1a1000;
}

.cw-select-wrap{
  position:relative;
  z-index:20;
}

.cw-select-btn{
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid #252836;
  background:#1a1c24;
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:.15s ease;
}

.cw-select-btn:hover{
  border-color:#3b4563;
  background:#1e2030;
}

.cw-arrow{
  font-size:12px;
  color:#6b7280;
  transition:.2s ease;
}

.cw-arrow.open{
  transform:rotate(180deg);
}

.cw-select-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  border-radius:12px;
  border:1px solid #252836;
  background:#1a1c24;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  z-index:30;
  display:none;
  max-height:360px;
  overflow-y:auto;
}

.cw-select-dropdown.show{
  display:block;
}

.cw-select-dropdown::-webkit-scrollbar{
  width:4px;
}

.cw-select-dropdown::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.08);
  border-radius:999px;
}

.cw-select-group-label{
  padding:8px 14px 4px;
  font-size:10px;
  font-weight:900;
  color:#4b5563;
  letter-spacing:1px;
  text-transform:uppercase;
}

.cw-select-option{
  padding:9px 14px;
  font-size:13px;
  font-weight:800;
  color:#9ca3af;
  cursor:pointer;
  transition:.12s ease;
}

.cw-select-option:hover{
  background:#1e2030;
  color:#fff;
}

.cw-select-option.cw-active{
  color:#3b82f6;
  background:rgba(59,130,246,.08);
}

.cw-control-help{
  margin-top:4px;
  font-size:11px;
  line-height:1.6;
  color:#6b7280;
}

@media (max-width:980px){
  #classWinModal .modal-card{
    width:min(96vw,100%);
    padding:20px 16px 16px;
  }

  .cw-body{
    grid-template-columns:1fr;
  }

  .cw-pie-container{
    width:360px;
    height:360px;
  }
}

@media (max-width:520px){
  .cw-pie-container{
    width:300px;
    height:300px;
  }

  .cw-chart-title{
    font-size:20px;
  }

  #classWinModal .modal-card{
    border-radius:18px!important;
  }
}


    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }