:root {
    --bg: #f8f9fa;
    --panel: #e8eaed;
    --card: #ffffff;
    --card2: #f5f7fa;
    --text: #212529;
    --text-dim: #6b7280;
    --accent: #007bff;
    --border: #dee2e6;
    --border-bright: #c8cdd8;
    --row-even: #ffffff;
    --row-odd: #f1f3f5;
    --glow-blue: 0 0 12px rgba(0,123,255,0.25);
  }

  [data-theme="dark"] {
    --bg: #0a0c10;
    --panel: #0f1218;
    --card: #13171f;
    --card2: #1a1f2b;
    --text: #e8eaf0;
    --text-dim: #6b7280;
    --accent: #4a9eff;
    --border: #1e2433;
    --border-bright: #2a3045;
    --row-even: #13171f;
    --row-odd: #1a1f2b;
    --glow-blue: 0 0 20px rgba(74,158,255,0.3);
  }

   
   
  @keyframes tab-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tab-fade-in { animation: tab-fade-in 0.22s cubic-bezier(0.4, 0, 0.2, 1); }

   
  @keyframes raid-slide-in-right {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes raid-slide-in-left {
    from { opacity: 0; transform: translateX(-36px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .raid-slide-in-right { animation: raid-slide-in-right 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
  .raid-slide-in-left  { animation: raid-slide-in-left  0.18s cubic-bezier(0.4, 0, 0.2, 1); }

   
  @keyframes raid-slide-in-up {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes raid-slide-in-down {
    from { opacity: 0; transform: translateY(-36px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .raid-slide-in-up   { animation: raid-slide-in-up   0.18s cubic-bezier(0.4, 0, 0.2, 1); }
  .raid-slide-in-down { animation: raid-slide-in-down 0.18s cubic-bezier(0.4, 0, 0.2, 1); }

   
  @media (max-width: 768px) {
    .tab-fade-in,
    .raid-slide-in-left, .raid-slide-in-right,
    .popup-open-anim,
    .member-modal-content.slide-in-left,
    .member-modal-content.slide-in-right,
    .member-modal-content.slide-out-left,
    .member-modal-content.slide-out-right,
    #nikke-squad-overlay.show,
    #nikke-squad-overlay.show .nikke-squad-modal {
      animation: none !important;
    }
  }

  @keyframes popup-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
   
  #nikke-squad-overlay.show { animation: overlay-fade 0.18s ease both; }
  #nikke-squad-overlay.show .nikke-squad-modal {
    animation: popup-pop 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
   
  .member-modal-content.popup-open-anim {
    animation: popup-pop 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

   
  html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
  }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 20px;
    transition: 0.3s;
  }

   
   
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--border-bright);
    border: 2px solid var(--bg);
    border-radius: 0;
    transition: background 0.15s;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }
  ::-webkit-scrollbar-corner {
    background: var(--bg);
  }
   
  * {
    scrollbar-color: var(--border-bright) var(--bg);
    scrollbar-width: thin;
  }

  [data-theme="dark"] body {
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74,158,255,0.06) 0%, transparent 70%),
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px);
  }

  .container {
    max-width: 1400px;
    margin: auto;
  }

   
  .header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-bright);
    position: relative;
    padding-top: 8px;
  }

  .header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--accent), transparent 60%);
  }

  .tabs {
    display: flex;
    gap: 0;
  }

  .tab-btn {
    position: relative;
    padding: 10px 28px;
    border: none;
    background: transparent;
    color: var(--text-dim, #6b7280);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.15s;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    z-index: 0;
  }

  .tab-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--border);
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    opacity: 0;
    transition: opacity 0.15s;
    z-index: -1;
  }

  .tab-btn:hover { color: var(--text); }
  .tab-btn:hover::before { opacity: 1; }

  .tab-btn.active { color: #fff; }
  .tab-btn.active::before {
    background: var(--accent);
    opacity: 1;
  }

  .tab-btn.active::after {
    content: '';
    position: absolute;
    top: 0; left: 10px; right: 10px;
    height: 2px;
    background: #fff;
    opacity: 0.4;
  }

   
  .header .btn-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: 0.2s;
    font-size: 16px;
  }

  .btn-sort,
  #raid-detail-content .btn-toggle,
  #personal-detail-view .btn-toggle {
    position: relative;
    width: auto;
    height: auto;
    padding: 7px 16px;
    border: 1px solid var(--border-bright, #2a3045);
    background: var(--card);
    color: var(--text-dim, #6b7280);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: 0.15s;
    display: inline-block;
    line-height: 1.2;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  }

  .btn-sort:hover,
  #raid-detail-content .btn-toggle:hover,
  #personal-detail-view .btn-toggle:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--card2, #1a1f2b);
  }

  .btn-sort.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .btn-sort.active::after {
    content: '';
    position: absolute;
    top: 0; left: 6px; right: 6px;
    height: 1px;
    background: rgba(255,255,255,0.35);
  }

  .header .btn-toggle:hover {
    background: var(--accent);
    color: white;
  }

   
  .card {
    background: var(--card);
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border-bright, #2a3045);
    border-top: 2px solid var(--accent);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    position: relative;
  }

  .card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 14px; height: 14px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    opacity: 0.5;
  }

  .table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border-bright, #2a3045);
  }

  table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 14px; 
  }

  th {
    background: var(--card2, #1a1f2b);
    color: var(--text-dim, #6b7280);
    padding: 10px 8px;
    position: sticky;
    top: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent);
  }

  td { 
    padding: 11px 8px; 
    border-bottom: 1px solid var(--border, #1e2433); 
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  tbody tr:nth-child(even) { background-color: var(--row-even); }
  tbody tr:nth-child(odd)  { background-color: var(--row-odd); }

  tbody tr:hover {
    background-color: rgba(74,158,255,0.08) !important;
    cursor: pointer;
  }

   
  #raid-specific-content {
    position: relative;
  }

  .raid-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
  }

  .raid-num-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .raid-num-btn {
    position: relative;
    padding: 7px 20px;
    border: 1px solid var(--border-bright, #2a3045);
    background: var(--card);
    color: var(--text-dim, #6b7280);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  }

  .raid-num-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--card2, #1a1f2b);
  }

  .raid-num-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .raid-num-btn.active::after {
    content: '';
    position: absolute;
    top: 0; left: 8px; right: 8px;
    height: 1px;
    background: rgba(255,255,255,0.35);
  }

  .boss-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin: 15px 0;
  }
   
  .boss-card {
    background: var(--card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
    overflow: hidden;
  }
  .boss-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--attr-color, var(--accent));
    box-shadow: 0 0 12px var(--attr-color, var(--accent));
    z-index: 2;
  }
  .boss-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 14px; height: 14px;
    border-bottom: 2px solid var(--attr-color, var(--accent));
    border-right: 2px solid var(--attr-color, var(--accent));
    opacity: 0.6;
  }
  .boss-card:hover {
    transform: translateY(-4px);
    border-color: var(--attr-color, var(--accent));
    box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px var(--attr-color, var(--accent));
  }

   
  .hp-bar-bg {
    height: 4px;
    background: var(--border-bright);
    overflow: hidden;
    margin-top: 10px;
  }
  .hp-bar-fill {
    height: 100%;
    background: var(--attr-color, var(--accent));
    box-shadow: 0 0 8px var(--attr-color, var(--accent));
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
  }
  .hp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    animation: hpScan 2.5s ease-in-out infinite;
  }
  @keyframes hpScan {
    0%   { left: -60%; }
    100% { left: 110%; }
  }

   
  .boss-section-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-dim, #6b7280);
    text-transform: uppercase;
  }
  .boss-section-divider::before {
    content: '';
    width: 3px; height: 12px;
    background: var(--accent);
    display: inline-block;
  }
  .boss-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-bright);
  }

  #raid-ranking-table th:nth-child(1), #raid-ranking-table td:nth-child(1) { width: 20px; }   
  #raid-ranking-table th:nth-child(2), #raid-ranking-table td:nth-child(2) { width: 50px; }   
  #raid-ranking-table th:nth-child(3), #raid-ranking-table td:nth-child(3) { width: 30px; }   
  #raid-ranking-table th:nth-child(4), #raid-ranking-table td:nth-child(4) { width: 10px; }   
  #raid-ranking-table th:nth-child(5), #raid-ranking-table td:nth-child(5) { width: 10px; }   
  #raid-ranking-table th:nth-child(6), #raid-ranking-table td:nth-child(6) { width: 20px; }   
  #raid-ranking-table th:nth-child(7), #raid-ranking-table td:nth-child(7) { width: 20px; }   
  #raid-ranking-table th:nth-child(8), #raid-ranking-table td:nth-child(8) { width: 50px; }   
  #raid-ranking-table th:nth-child(9), #raid-ranking-table td:nth-child(10) { width: 240px; }   

   
  #boss_scatter_chart {
    width: 100% !important;
    height: 400px;
    margin-top: 15px;
    overflow: visible;
  }

  #boss_scatter_chart div[dir="ltr"],
  #boss_scatter_chart div[dir="ltr"] > div {
    width: 100% !important;
  }

  #boss_scatter_chart svg {
    width: 100% !important;
  }

  #boss_scatter_chart text {
    font-family: 'Noto Sans KR', sans-serif !important;
  }

   
 .kill-badge {
    display: inline-block;
    margin-left: 5px;
    color: #ff4d4d;
    border: 1px solid #ff4d4d;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: bold;
    background: rgba(255, 77, 77, 0.1);
    vertical-align: middle;
  }
  
  .name-col {
    font-weight: bold;
    color: var(--accent);
    text-align: left;
  }

  .target-col {
    text-align: left;
    min-width: 250px;
    padding-left: 15px !important;
  }

  .google-visualization-tooltip {
    border: none !important;
    border-radius: 8px !important;
    background-color: var(--card) !important;
    color: var(--text) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    padding: 12px !important;
    pointer-events: none;
    white-space: nowrap !important;
  }
   
  .google-visualization-tooltip:has(> .google-visualization-tooltip) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .nikke-img {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    border: 1px solid var(--border);
  }

   
  .union-info-container {
    position: relative;
    padding: 48px 0 36px;
    margin-bottom: 0;
    overflow: hidden;
  }

  .union-info-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 40px,
      rgba(74,158,255,0.03) 40px,
      rgba(74,158,255,0.03) 41px
    );
    pointer-events: none;
  }

  .header-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-left: 20px;
    border-left: 3px solid var(--accent);
  }

  .sub-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0.85;
  }

  .union-name-display {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    letter-spacing: 4px;
    color: var(--text);
    line-height: 1;
    margin: 0;
  }

  .union-name-display::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    margin-top: 10px;
  }

  [data-theme='dark'] .union-name-display {
    text-shadow: 0 0 40px rgba(74,158,255,0.15);
  }

  .header-deco {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    opacity: 0.15;
    pointer-events: none;
  }

  .header-deco span {
    display: block;
    height: 2px;
    background: var(--accent);
  }

  @media (max-width: 768px) {
    .union-info-container { padding: 30px 0 20px; }
    .union-name-display { font-size: 36px; }
    .sub-title { font-size: 10px; letter-spacing: 3px; }
     
    #raid-ranking-table th.th-hits { width: 320px; }
    .hit-col { min-width: 100px !important; flex: 1 1 100px !important; }
  }

   
  .timeline-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0;
  }
  .rank-badge-card {
    background: var(--card);
    border: 1px solid var(--border-bright, #2a3045);
    border-top: 2px solid var(--accent);
    padding: 12px 10px;
    min-width: 90px;
    max-width: 130px;
    text-align: center;
    transition: transform 0.15s, border-color 0.15s;
    flex: 1 1 90px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    position: relative;
  }
  .rank-badge-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
  }
   
  .rank-badge-card.no-data {
    border-top-color: var(--text-dim);
    background: repeating-linear-gradient(
      135deg,
      var(--card),
      var(--card) 8px,
      var(--card2) 8px,
      var(--card2) 14px
    );
    opacity: 0.55;
  }
  .rank-badge-card.no-data .rank-value {
    color: var(--text-dim) !important;
  }
  .rank-badge-card.no-data:hover {
    opacity: 0.85;
    border-color: var(--text-dim);
  }
  .badge-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }
  .rank-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-dim, #6b7280);
    margin-bottom: 3px;
    text-transform: uppercase;
  }
  .rank-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--accent);
    line-height: 1;
  }

   
  .member-chip {
    padding: 4px 12px;
    border: 1px solid var(--border-bright, #2a3045);
    background: var(--card);
    color: var(--text-dim, #6b7280);
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.15s;
    clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  }
  .member-chip:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--card2, #1a1f2b);
  }
  .member-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
  }

   
  #member-detail-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
    overflow-y: auto;
    backdrop-filter: blur(6px);
  }

  .popup-header-container {
    text-align: center !important;
    margin-bottom: 30px !important;
    width: 100%;
  }

  .popup-raid-badge {
    display: inline-block;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 3px 16px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  }

  .popup-member-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    letter-spacing: 4px;
    margin: 8px 0;
    color: var(--text);
    line-height: 1;
  }

  .popup-info-bar {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .member-modal-content {
    background: var(--bg);
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    position: relative;
    border: 1px solid var(--border-bright);
    border-top: 2px solid var(--accent);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
   
  .member-nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 96px;
    border: 1px solid var(--border-bright);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    line-height: 1;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  .member-nav-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-50%) scale(1.05);
  }
  .member-nav-btn.left  { left: 16px;  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%); }
  .member-nav-btn.right { right: 16px; clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }

   
  .member-modal-content.slide-out-left  { opacity: 0; transform: translateX(-30px); }
  .member-modal-content.slide-out-right { opacity: 0; transform: translateX(30px);  }
  .member-modal-content.slide-in-left   { animation: slideInL 0.25s ease both; }
  .member-modal-content.slide-in-right  { animation: slideInR 0.25s ease both; }
  @keyframes slideInL { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes slideInR { from { opacity: 0; transform: translateX(30px);  } to { opacity: 1; transform: translateX(0); } }

  .strike-log-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 25px 0;
  }
  .strike-card {
    background: var(--card);
    border: 1px solid var(--border-bright);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 380px;
    flex-shrink: 0;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    position: relative;
  }
  .strike-boss-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: #111;
    filter: brightness(0.8) saturate(1.1);
  }

  .boss-name-lg {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 2px;
    margin: 6px 0;
    display: block;
  }

  .strike-info {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border-bright);
  }

  .strike-deck-w {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--card2);
  }

  .deck-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex: 1;
  }

  .nikke-icon-w {
    width: 62px;
    height: 62px;
    border: 1px solid var(--border-bright);
    overflow: hidden;
    background: #333;
    flex-shrink: 0;
    clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  }

  .slot-0 { left: 8%;  top: 10px; }
  .slot-1 { left: 28%; top: 65px; }
  .slot-2 { left: 50%; top: 10px; transform: translateX(-50%); }
  .slot-3 { right: 28%; top: 65px; }
  .slot-4 { right: 8%;  top: 10px; }

  .kill-badge-l {
    background: transparent;
    color: #ff4d4d;
    border: 1px solid #ff4d4d;
    padding: 1px 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    vertical-align: middle;
    clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  }

   
  #loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg, #0a0c10);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  #loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .loading-spinner {
    position: relative;
    width: 64px;
    height: 64px;
  }

  .loading-spinner::before,
  .loading-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-top-color: var(--accent, #4a9eff);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  .loading-spinner::after {
    inset: 10px;
    border-top-color: rgba(74,158,255,0.35);
    animation-duration: 0.7s;
    animation-direction: reverse;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .loading-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--accent, #4a9eff);
    text-transform: uppercase;
    animation: pulse 1.5s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1;   }
  }

   
  #tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  #tour-overlay.active {
    pointer-events: none;
  }

  #tour-cutout {
    position: fixed;
    inset: 0;
    z-index: 99991;
    pointer-events: none;
  }

  #tour-bubble {
    position: fixed;
    z-index: 99993;
    background: var(--card);
    border: 1px solid var(--border-bright);
    border-top: 2px solid var(--accent);
    padding: 20px 22px;
    width: 300px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    pointer-events: all;
    transition: opacity 0.25s ease;
  }

  .tour-step-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .tour-bubble-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1;
  }
  .tour-bubble-desc {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.75;
    word-break: keep-all;
  }
  .tour-bubble-desc b { color: var(--text); }

  .tour-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 8px;
  }
  .tour-dots {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .tour-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-bright);
    transition: background 0.2s, transform 0.2s;
  }
  .tour-dot.active {
    background: var(--accent);
    transform: scale(1.3);
  }
  .tour-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-bright);
    background: var(--card2);
    color: var(--text-dim);
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    clip-path: polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
    transition: 0.15s;
    white-space: nowrap;
  }
  .tour-btn:hover { border-color: var(--accent); color: var(--text); }
  .tour-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .tour-btn.primary:hover { opacity: 0.85; }

  .tour-skip {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-dim);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
  }
  .tour-skip:hover { color: var(--text); }

   
  .tour-pulse-ring {
    position: fixed;
    border-radius: 6px;
    border: 2px solid var(--accent);
    z-index: 99992;
    pointer-events: none;
    animation: tourPulse 1.6s ease-out infinite;
  }
  @keyframes tourPulse {
    0%   { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.06); }
  }

   
  .scroll-buttons {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 9999;
  }

  .scroll-buttons button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-bright, #2a3045);
    background: var(--card);
    color: var(--text-dim, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.7;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  }

  .scroll-buttons button:hover {
    opacity: 1;
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateX(-2px);
  }

  .scroll-buttons-left {
    position: fixed;
    left: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 9999;
  }

  .scroll-buttons-left button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-bright, #2a3045);
    background: var(--card);
    color: var(--text-dim, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.7;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  }

  .scroll-buttons-left button:hover {
    opacity: 1;
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateX(2px);
  }

  .capturing {
    pointer-events: none;
    opacity: 0.5;
  }

   
  .scroll-buttons-left .btn-guide {
    color: #a78bfa;
    border-color: #a78bfa;
    opacity: 0.75;
  }
  .scroll-buttons-left .btn-guide:hover {
    background: #a78bfa;
    color: white;
    border-color: #a78bfa;
  }
  [data-theme='dark'] .scroll-buttons-left .btn-guide {
    color: #c4b5fd;
    border-color: #c4b5fd;
  }

   
  .scroll-buttons-left .btn-capture {
    color: #ff9800;
    border-color: #ff9800;
    opacity: 0.75;
  }
  .scroll-buttons-left .btn-capture:hover {
    background: #ff9800;
    color: white;
    border-color: #ff9800;
    transform: translateX(2px);
  }
  [data-theme='dark'] .scroll-buttons-left .btn-capture {
    color: #ffb74d;
    border-color: #ffb74d;
  }

  .title-break { display: none; }

   
  @media (max-width: 600px) {
    body { padding: 10px; }
    .title-break { display: block; }
    .container { padding-bottom: 40px; }

     
    .scroll-buttons {
      flex-direction: row !important;
      bottom: 10px !important;
      right: 10px !important;
    }
    .scroll-buttons button { width: 34px; height: 34px; font-size: 13px; }
    .scroll-buttons-left {
      flex-direction: row !important;
      bottom: 10px !important;
      left: 10px !important;
    }
    .scroll-buttons-left button { width: 34px; height: 34px; font-size: 13px; }

     
     
    .tab-btn { padding: 8px 14px; font-size: 12px; letter-spacing: 1px; }

     
    .raid-selector { flex-direction: column; align-items: flex-start; }
    .raid-num-wrapper { gap: 6px; }
    .raid-num-btn { padding: 5px 12px; font-size: 13px; }

     
    #boss-container { grid-template-columns: 1fr !important; }

     
    .boss-card[style*="flex-direction: row"] {
      flex-direction: column !important;
      height: auto !important;
    }
     
    .boss-card[style*="flex-direction: row"] > div:first-child {
      width: 100% !important;
      height: 200px !important;
    }
     
    .boss-card[style*="flex-direction: row"] > div:last-child {
      flex-direction: column !important;
      align-items: flex-start !important;
      padding: 20px !important;
      gap: 12px !important;
      min-height: 160px !important;
    }
     
    .boss-card[style*="flex-direction: row"] > div:last-child > div[style*="margin-left:auto"] {
      margin-left: 0 !important;
      text-align: left !important;
    }
     
    .boss-card[style*="flex-direction: row"] > div:last-child > div[style*="margin-left:auto"] > div:last-child {
      font-size: 52px !important;
    }
     
    .infinity-dmg-full {
      font-size: 36px !important;
    }

     
    div[style*="grid-column: 1 / -1"][style*="display: flex"] {
      flex-direction: column !important;
    }
    div[style*="min-width:200px"] {
      min-width: unset !important;
      border-right: none !important;
      border-bottom: 1px solid var(--border-bright) !important;
      padding: 16px !important;
    }

     
    .union-dmg-box { flex-direction: column !important; }

     
    .union-dmg-box > div:first-child {
      border-right: none !important;
      border-bottom: 1px solid var(--border-bright, #2a3045) !important;
      padding: 20px 20px 16px !important;
    }
    .union-dmg-box > div:first-child > div:last-child {
      font-size: 44px !important;
    }

     
    .union-dmg-box > div:last-child {
      min-width: unset !important;
      width: 100% !important;
    }

     
    .table-wrapper { overflow-x: auto !important; }
    #raid-ranking-table { table-layout: auto !important; min-width: 750px; }
    #raid-ranking-table th:nth-child(7), #raid-ranking-table td:nth-child(8) { width: 360px !important; }

     
    .card > div[style*="justify-content: space-between"] { flex-direction: column; align-items: flex-start !important; }
    #raidSearchInput, #searchInput { width: 100% !important; box-sizing: border-box; }
     
    #member_growth_chart { height: 250px !important; }

     
    .member-modal-content { margin: 10px; padding: 16px; }
     
    .member-nav-btn { width: 36px; height: 72px; font-size: 28px; }
    .member-nav-btn.left  { left: 4px; }
    .member-nav-btn.right { right: 4px; }
    .popup-member-name { font-size: 36px; }
    .strike-log-container { flex-direction: column; }
    .strike-card { width: 100%; box-sizing: border-box; }

     
    .rank-badge-card { flex: 0 1 calc(33% - 10px); min-width: 80px; }
    .timeline-container { gap: 10px; }

     
     
    #detail-summary-area .detail-charts-grid { grid-template-columns: 1fr !important; }

     
    .boss-detail-header {
      overflow: hidden !important;
      height: auto !important;
      min-height: 350px !important;
      display: flex !important;
      flex-direction: column !important;
    }
    .boss-header-title {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      max-width: 100% !important;
      padding: 16px !important;
      z-index: 1;
    }
    .boss-header-stats {
      position: relative !important;
      right: auto !important;
      top: auto !important;
      transform: none !important;
      align-items: flex-end !important;
      justify-content: flex-end !important;
      flex-direction: column !important;
      flex-wrap: wrap !important;
      gap: 16px !important;
      padding: 0 16px !important;
      z-index: 1;
      order: 2;
    }
    .boss-header-hp {
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      width: 100% !important;
      height: auto !important;
      padding: 16px !important;
      box-sizing: border-box !important;
      margin-top: auto !important;
      z-index: 1;
      order: 3;
    }

     
    .top5-wrapper > .top5-item > div:nth-child(2) {
      font-size: 11px !important;
      height: auto !important;
    }

     
    #boss_scatter_chart { height: 300px !important; }
    #boss_scatter_chart > div,
    #boss_scatter_chart > div > div {
      height: 300px !important;
    }

     
    #detail-summary-area > div:first-child { height: 450px !important; }

     
    #raid-detail-content .table-wrapper { overflow-x: auto !important; }
    #raid-detail-content .table-wrapper table { min-width: 800px; }

     
    #raid-detail-content div[style*="display:flex; gap:6px"] {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
    }
    #raid-detail-content div[style*="width:78px"] {
      width: 60px !important;
      height: 60px !important;
      flex-shrink: 0 !important;
    }
  }

   
  #metrics-info-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 2100;
    overflow-y: auto;
    backdrop-filter: blur(6px);
  }
  .metrics-modal-content {
    background: var(--bg);
    max-width: 820px;
    margin: 40px auto;
    padding: 30px;
    position: relative;
    border: 1px solid var(--border-bright);
    border-top: 2px solid var(--accent);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  }
  .metrics-close-btn {
    position: absolute; top: 20px; right: 20px;
    background: none; border: none;
    color: var(--text); font-size: 24px; cursor: pointer;
  }
   
  .scroll-buttons-left .btn-metrics {
    color: #4ade80;
    border-color: #4ade80;
    opacity: 0.75;
  }
  .scroll-buttons-left .btn-metrics:hover {
    background: #4ade80;
    color: white;
    border-color: #4ade80;
  }
  [data-theme='dark'] .scroll-buttons-left .btn-metrics {
    color: #86efac;
    border-color: #86efac;
  }

  .metrics-tabs {
    display: flex; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px; margin-bottom: 20px;
  }
  .metrics-tab {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border-bright);
    padding: 8px 16px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 14px; letter-spacing: 1px;
    cursor: pointer;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    transition: all 0.15s;
  }
  .metrics-tab:hover { color: var(--text); border-color: var(--accent); }
  .metrics-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .metrics-panel .metrics-headline {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 18px;
    line-height: 1.5;
  }
  .metrics-panel .metrics-headline b { color: var(--accent); }

  .metrics-formula {
    background: var(--card);
    border-left: 3px solid var(--accent);
    padding: 14px 18px;
    margin: 12px 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
  }
  .metrics-formula .frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 4px;
  }
  .metrics-formula .frac .num,
  .metrics-formula .frac .den {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
    color: var(--text-dim);
  }
  .metrics-formula .frac .num {
    border-bottom: 1px solid var(--text-dim);
  }

  .metrics-list {
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--text);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    line-height: 1.8;
  }
  .metrics-list li { margin-bottom: 4px; }
  .metrics-list b { color: var(--accent); }

  .metrics-legend {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 16px;
  }
  .metrics-legend .chip {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
    padding: 4px 10px;
    border: 1px solid;
  }
  .metrics-legend .chip.red    { color: #ff4d4d; border-color: #ff4d4d66; background: #ff4d4d1a; }
  .metrics-legend .chip.yellow { color: #f7c864; border-color: #f7c86466; background: #f7c8641a; }
  .metrics-legend .chip.green  { color: #60cf58; border-color: #60cf5866; background: #60cf581a; }

  @media (max-width: 768px) {
    .metrics-modal-content { margin: 10px; padding: 18px; }
    .metrics-formula { font-size: 15px; padding: 12px 14px; }
  }

   
  .card.growth-section {
    margin-bottom: 16px;
  }

  .growth-section {
    padding: 20px;
    margin-bottom: 0;
  }
  .growth-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .growth-head .accent-bar {
    width: 3px; height: 14px; background: var(--accent);
  }
  .growth-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 3px;
    color: var(--text); text-transform: uppercase;
  }
  .growth-sub {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 12px; letter-spacing: 2px;
    color: var(--text-dim);
    padding-left: 8px;
    border-left: 1px solid var(--border-bright);
  }
  .growth-sub.none { color: #9ca3af; }
  .growth-sub.count { border: none; }

   
  .growth-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
  }
  .gstat {
    padding: 10px 14px;
    background: var(--card2);
    border-left: 2px solid var(--accent);
    display: flex; flex-direction: column; gap: 4px;
  }
  .gstat-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    color: var(--text-dim); text-transform: uppercase;
  }
  .gstat-current {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px;
    color: var(--text); line-height: 1;
  }
  .gstat-meta {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    font-family: 'Rajdhani', sans-serif;
  }
  .gstat-prev {
    font-size: 12px; font-weight: 600;
    color: var(--text-dim);
  }
  .gstat-pct {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 1px; font-weight: 700;
  }
  .gstat-pct.up   { color: #ff4d4d; }
  .gstat-pct.down { color: #4284ff; }
  .gstat-pct.flat { color: var(--text-dim); }

   
  .growth-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
  }
  .gtile {
    padding: 8px 12px;
    background: var(--card2);
    border-left: 2px solid var(--border-bright);
    display: flex; flex-direction: column; gap: 3px;
    transition: border-color 0.15s, background 0.15s;
  }
  .gtile:hover { background: var(--card); }
  .gtile.up   { border-left-color: #ff4d4d; }
  .gtile.down { border-left-color: #4284ff; }
  .gtile.flat { border-left-color: var(--text-dim); }

  .gtile-top {
    display: flex; align-items: baseline; gap: 8px;
  }
  .gtile-rank {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 1px;
    color: var(--text-dim);
    min-width: 28px;
  }
  .gtile-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700; font-size: 14px;
    color: var(--text);
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gtile-pct {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px; letter-spacing: 1px; font-weight: 700;
  }
  .gtile.up   .gtile-pct { color: #ff4d4d; }
  .gtile.down .gtile-pct { color: #4284ff; }
  .gtile.flat .gtile-pct { color: var(--text-dim); }

  .gtile-bottom {
    display: flex; align-items: baseline; gap: 6px;
    padding-left: 36px;
    font-family: 'Rajdhani', sans-serif;
  }
  .gtile-cur {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 1px;
    color: var(--text);
  }
  .gtile-sep {
    color: var(--text-dim); font-size: 12px;
  }
  .gtile-prev {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px; letter-spacing: 1px;
    color: var(--text-dim);
  }

   
  .btn-boss-filter {
    display: inline-flex; align-items: center; gap: 8px;
    position: relative;
    white-space: nowrap;
    padding-left: 18px;
    padding-right: 18px;
  }
  .btn-boss-filter.active {
    border-color: var(--accent);
    color: var(--text);
    background: var(--card2);
  }
  .boss-filter-count {
    display: none;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px; font-weight: 800; letter-spacing: 0;
    align-items: center; justify-content: center;
    line-height: 1;
  }

  .boss-filter-panel {
     
    position: fixed;
    z-index: 2200;  
    width: min(520px, calc(100vw - 32px));
    background: var(--card);
    border: 1px solid var(--border-bright, #2a3045);
    border-top: 2px solid var(--accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 14px 16px 12px;
    box-sizing: border-box;
  }
  .boss-filter-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .boss-filter-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 3px;
    color: var(--text); text-transform: uppercase;
    margin-right: auto;
  }

  .boss-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .boss-filter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 8px;
    background: var(--card2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
    min-height: 92px;
    text-align: center;
    box-sizing: border-box;
  }
  .boss-filter-item:hover {
    border-color: var(--accent);
    background: var(--card);
  }
  .boss-filter-item.checked {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .boss-filter-item.disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .boss-filter-item.disabled:hover {
    border-color: var(--border);
    background: var(--card2);
  }
  .boss-filter-item .bf-attr {
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  .boss-filter-item .bf-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700; font-size: 14px;
    color: var(--text);
    line-height: 1.25;
    word-break: keep-all;
  }
  .boss-filter-item .bf-mark {
    display: flex; align-items: center; justify-content: center;
  }
  .bf-check, .bf-check-empty {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border-bright, #2a3045);
    background: var(--card);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 800;
    line-height: 1;
  }
  .boss-filter-item.checked .bf-check {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .boss-filter-reset {
    padding: 5px 12px;
    border: 1px solid var(--border-bright, #2a3045);
    background: var(--card2);
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px;
    transition: 0.15s;
  }
  .boss-filter-reset:hover {
    color: var(--text);
    border-color: var(--accent);
    background: var(--card);
  }

   
  @media (max-width: 768px) {
    .boss-filter-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .boss-filter-panel { width: min(360px, calc(100vw - 16px)); padding: 12px 12px 10px; }
    .boss-filter-item { min-height: 84px; padding: 8px 6px; }
    .boss-filter-item .bf-name { font-size: 13px; }
  }

   
  .dev-histogram { transition: gap 0.2s ease; }

   
  .m-bottom-grid > * { min-width: 0; }

   
  body.member-modal-open .scroll-buttons,
  body.popup-open .scroll-buttons { display: none !important; }
  .msh-clickable { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
  .msh-clickable:hover { border-color: var(--accent); transform: translateY(-1px); }

   
  #nikke-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nikke-stat-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 0 16px;
    background: var(--card2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    transition: border-color 0.15s, transform 0.15s;
  }
  .nikke-stat-card > .nikke-rank,
  .nikke-stat-card > .nikke-portrait,
  .nikke-stat-card > .nikke-icons,
  .nikke-stat-card > .nikke-info,
  .nikke-stat-card > .nikke-count { align-self: center; }
  .nikke-stat-card:hover {
    border-color: var(--accent);
    transform: translateX(2px);
  }
   
  .nikke-stat-card { position: relative; }
  .nikke-stat-card.rank-cont {
    margin-top: -8px;
    border-top-color: transparent;
  }
  .nikke-stat-card.rank-cont::before {
    content: '';
    position: absolute;
    top: 0;
    left: 80px;   
    right: 0;
    border-top: 1px dashed var(--border);
    pointer-events: none;
  }
  .nikke-stat-card.rank-cont .nikke-rank { color: transparent; }

   
  .nikke-filter-panel {
    margin-bottom: 12px;
    padding: 14px 0 12px;
    background: var(--card);
    border: 1px solid var(--border-bright);
    border-top: 2px solid var(--accent);
    box-sizing: border-box;
  }
  .nikke-filter-head {
    display: flex; align-items: center; gap: 12px;
    margin: 0 16px 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .nikke-filter-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 3px;
    color: var(--text); text-transform: uppercase;
    margin-right: auto;
  }
   
  .nikke-filter-sections {
    display: flex;
    gap: 16px;
    align-items: stretch;
  }
  .nf-left {
    flex: 1; min-width: 0;
    padding-left: 16px;
    display: flex; flex-direction: column;
    gap: 8px;
  }
  .nf-row {
    display: flex; align-items: stretch;
    gap: 12px;
  }
  .nf-row-label {
    width: 60px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    border-right: 1px solid var(--border);
  }
  .nf-row-options {
    display: flex; gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
  }
   
  .nf-attr-cell {
    width: 284px; flex-shrink: 0;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
    box-sizing: border-box;
  }
  .nf-attr-title {
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 12px; letter-spacing: 2px;
    color: var(--text-dim);
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 2px;
  }
  .nf-attr-cell-row {
    display: grid;
    grid-template-columns: repeat(5, 52px);
    gap: 6px;
  }
   
  .nf-count-spacer {
    width: 80px; flex-shrink: 0;
    margin-right: 16px;   
  }
  .nikke-filter-option {
    padding: 6px 10px;
    background: var(--card);
    border: 1px solid var(--border-bright);
    color: var(--text-dim);
    cursor: pointer;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px; font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: 0.15s;
    line-height: 1.2;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 6px;
  }
  .nf-opt-icon {
    width: 20px; height: 20px;
    object-fit: contain;
    background: transparent;
    border: none;
    flex-shrink: 0;
  }
   
  .nf-opt-icon.nf-opt-icon-invert { filter: invert(1); }
  [data-theme='dark'] .nf-opt-icon.nf-opt-icon-invert { filter: none; }
  .nikke-filter-option:hover {
    color: var(--text);
    border-color: var(--accent);
  }
  .nikke-filter-option.checked {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
   
  .nikke-filter-option.overspec {
    background: #b8860b;
    border-color: #ffd700;
    color: #fff;
    box-shadow: 0 0 0 1px #ffd700 inset;
  }
  .nf-attr-sort {
    padding: 8px 6px;
    background: var(--card);
    border: 1px solid var(--border-bright);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 1px;
    text-align: center;
    transition: 0.15s;
  }
  .nf-attr-sort:hover { border-color: var(--accent); }
  .nf-attr-sort.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
  }

   
  .nsh-attr { user-select: none; }

   
  #nikke-squad-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 2100;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 16px;
    box-sizing: border-box;
  }
  #nikke-squad-overlay.show { display: flex; }
  .nikke-squad-modal {
    position: relative;
    width: min(820px, 100%);
    background: var(--card);
    border: 1px solid var(--border-bright);
    border-top: 3px solid var(--accent);
    padding: 24px 28px 28px;
    box-sizing: border-box;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
  .nikke-squad-close {
    position: absolute; top: 8px; right: 12px;
    background: transparent; border: none;
    color: var(--text-dim); font-size: 28px; line-height: 1;
    cursor: pointer; padding: 4px 8px;
  }
  .nikke-squad-close:hover { color: var(--text); }
  .nikke-squad-head {
    display: flex; align-items: baseline; gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
  }
  .nikke-squad-raid {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 3px;
    color: var(--text-dim); text-transform: uppercase;
  }
  .nikke-squad-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 22px; font-weight: 700; color: var(--text);
  }
  .nikke-squad-count {
    margin-left: auto;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--text-dim);
  }
  .nikke-squad-list {
    display: flex; flex-direction: column; gap: 18px;
  }
  .nikke-squad-section {
    display: flex; flex-direction: column;
    background: var(--card2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);   
  }
  .nsq-section-head {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
  }
  .nsq-boss-attr {
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  .nsq-row-count {
    margin-left: auto;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px;
    color: var(--accent); line-height: 1;
    min-width: 50px; text-align: right;
  }
  .nsq-row-count-unit {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px; font-weight: 600;
    color: var(--text-dim);
    margin-left: 3px;
  }
  .nsq-boss-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700; font-size: 16px;
    color: var(--text);
  }
  .nsq-boss-count {
    margin-left: auto;
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--text-dim);
  }
  .nsq-section-rows {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 12px;
  }
  .nikke-squad-row {
    display: flex; align-items: center; gap: 14px;
    padding: 6px 8px;
    background: var(--card);
    border: 1px solid var(--border);
  }
  .nsq-boss {
    width: 64px; height: 64px;
    background-size: cover; background-position: center;
    background-color: var(--bg);
    border: 1px solid var(--border-bright);
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .nsq-divider {
    width: 1px; align-self: stretch;
    background: var(--border);
    margin: 0 4px;
  }
  .nsq-units {
    display: flex; gap: 8px;
    flex-wrap: wrap;
  }
  .nsq-unit {
    width: 56px; height: 56px;
    background-size: cover; background-position: center 25%;
    background-color: var(--bg);
    border: 1px solid var(--border-bright);
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .nsq-unit.focused {
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }

   
  .nikke-stat-card.clickable { cursor: pointer; }

   
  .nikke-icon-tooltip {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 9999;
    background: var(--card2);
    color: var(--text);
    border: 1px solid var(--border-bright);
    padding: 8px 14px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    white-space: nowrap;
  }
   
  .nikke-rank {
    width: 64px;
    flex-shrink: 0;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px; letter-spacing: 1px;
    color: var(--text-dim);
    line-height: 1;
  }
  .nikke-rank.top-1 { color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,0.4); }
  .nikke-rank.top-2 { color: #C0C0C0; }
  .nikke-rank.top-3 { color: #CD7F32; }

  .nikke-portrait {
    width: 84px; height: 84px;
    background-color: var(--bg);
    background-size: cover;
    background-position: center 25%;
     
    flex-shrink: 0;
    border: 2px solid var(--border-bright);
    box-sizing: border-box;
  }
  [data-theme='dark'] .nikke-portrait { border-color: rgba(255,255,255,0.35); }
   
  .nikke-icons {
    display: grid;
    grid-template-columns: repeat(5, 56px);
    gap: 6px;
    flex-shrink: 0;
  }
  .nikke-icon {
    width: 56px; height: 56px;
    object-fit: contain;
    background: #fff;   
    border: 1px solid #000;   
    border-radius: 4px;
    padding: 2px;
    box-sizing: border-box;
  }
  .nikke-icon-empty {
    width: 56px; height: 56px;
    background: #fff;
    border: 1px dashed var(--border-bright);
    border-radius: 4px;
    opacity: 0.3;
  }
   
  .nikke-icon.nikke-icon-invert {
    background: #000;
    border-color: #fff;
    filter: invert(1);
  }

   
  .nikke-icon.nikke-icon-dual {
    position: relative;
    padding: 0;   
  }
  .nikke-icon-dual .ni-primary,
  .nikke-icon-dual .ni-secondary {
    position: absolute;
    object-fit: contain;
    background: transparent;
    border: none;
    padding: 0;
  }
  .nikke-icon-dual .ni-primary   { width: 72%; height: 72%; }
  .nikke-icon-dual .ni-secondary { width: 54%; height: 54%; z-index: 2; }

   
  .nikke-icon-dual.dual-attr .ni-primary        { bottom: 0; left: 0; }
  .nikke-icon-dual.dual-attr .ni-secondary      { top: 0; right: 0; }
  .nikke-icon-dual.dual-burst-left  .ni-primary   { bottom: 0; right: 0; }
  .nikke-icon-dual.dual-burst-left  .ni-secondary { top: 0; left: 0; }
  .nikke-icon-dual.dual-burst-right .ni-primary   { bottom: 0; right: 0; }
  .nikke-icon-dual.dual-burst-right .ni-secondary { top: 0; right: 0; }
   
  [data-theme='dark'] .nikke-icon { background: #000; border-color: rgba(255,255,255,0.35); }
  [data-theme='dark'] .nikke-icon-empty { background: #000; border-color: rgba(255,255,255,0.35); }
  [data-theme='dark'] .nikke-icon.nikke-icon-invert { filter: none; border-color: rgba(255,255,255,0.35); }

   
  .nikke-stat-header {
    display: flex;
    align-items: end;
    gap: 16px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .nikke-stat-header > div { text-align: center; }
   
  .nikke-stat-header > div:not(:last-child) {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .nikke-stat-header > div:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15%; bottom: 15%;
    right: -8px;
    width: 1px;
    background: var(--border-bright);
  }
  .nsh-rank { width: 64px; flex-shrink: 0; }
  .nsh-portrait { width: 84px; flex-shrink: 0; }
  .nsh-name { flex: 1; min-width: 0; text-align: left !important; padding-left: 2px; }
  .nsh-count { min-width: 80px; flex-shrink: 0; text-align: right !important; }

   
   
  .nsh-icons-block {
    flex-shrink: 0;
    width: 304px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .nsh-icons-super {
    width: 100%;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    border-bottom: 1px dashed var(--border);
    padding-bottom: 2px;
    box-sizing: border-box;
  }
  .nsh-icons-group {
    display: grid;
    grid-template-columns: repeat(5, 56px);
    gap: 6px;
    width: 100%;
  }
  .nsh-icon-label {
    width: 56px;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    line-height: 1.1;
  }

   
   
  .nsh-attr-block {
    flex-shrink: 0;
    width: 284px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .nsh-attr-super {
    width: 100%;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    border-bottom: 1px dashed var(--border);
    padding-bottom: 2px;
    box-sizing: border-box;
  }
  .nsh-attr-group { display: flex; gap: 6px; width: 100%; }
  .nsh-attr { width: 52px; flex-shrink: 0; font-size: 16px; text-align: center; }

  .nikke-info { flex: 1; min-width: 0; }
  .nikke-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700; font-size: 22px;
    color: var(--text);
    letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
   
  .nikke-attr-cols {
    display: flex; gap: 6px;
    flex-shrink: 0;
    align-self: stretch;
    align-items: stretch;
  }
  .nikke-attr-cell {
    display: flex;
    align-items: center; justify-content: center;
    width: 52px;
    box-sizing: border-box;
    background: var(--card);
    border: 1px solid var(--border);
    border-left-width: 3px;
  }
  .nikke-attr-cell.nikke-attr-zero { opacity: 0.04; }
  .naa-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px;
    color: var(--text); line-height: 1;
  }
   
  .nikke-count {
    flex-shrink: 0;
    min-width: 80px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px; letter-spacing: 1px;
    color: var(--accent); line-height: 1;
    text-align: right;
  }
  .nikke-count-unit {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--text-dim);
    margin-left: 4px;
    letter-spacing: 0.5px;
  }
   
  @media (max-width: 768px) {
     
    #ns-search { width: 130px !important; font-size: 12px; padding: 6px 10px; }

     
    .nikke-filter-panel { padding: 12px 0 10px; }
    .nikke-filter-head { margin: 0 12px 10px; }
    .nikke-filter-sections { flex-direction: column; gap: 10px; }
    .nf-left { padding: 0 12px; gap: 6px; }
    .nf-row { gap: 8px; }
    .nf-row-label {
      width: 48px; font-size: 11px;
      padding-right: 6px; letter-spacing: 1px;
    }
    .nf-row-options { gap: 4px; }
    .nf-attr-cell {
      width: auto; padding: 10px 12px 0;
      border-left: none; border-top: 1px solid var(--border);
    }
    .nf-attr-cell-row {
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
    }
    .nf-count-spacer { display: none; }
    .nikke-filter-option { padding: 5px 8px; font-size: 12px; gap: 4px; }
    .nf-opt-icon { width: 18px; height: 18px; }
    .nf-attr-sort { padding: 6px 4px; font-size: 12px; letter-spacing: 0.5px; }
    .nf-attr-title { font-size: 11px; }

     
    .nikke-stat-header { display: none; }

     
    .nikke-stat-card {
      flex-wrap: wrap;
      gap: 8px;
      padding: 6px 10px;
      align-items: center;
    }
    .nikke-rank { width: 32px; font-size: 22px; }
    .nikke-portrait { width: 56px; height: 56px; border-width: 1.5px; }
    .nikke-icons {
      grid-template-columns: repeat(5, 32px);
      gap: 4px;
      order: 2;
    }
    .nikke-icon, .nikke-icon-empty {
      width: 32px; height: 32px;
      padding: 1px;
    }
    .nikke-info { flex: 1; min-width: 90px; }
    .nikke-name { font-size: 16px; }
    .nikke-count {
      font-size: 22px; min-width: 50px;
    }
    .nikke-count-unit { font-size: 11px; }
    .nikke-attr-cols {
      order: 3; width: 100%;
      justify-content: space-between;
      gap: 4px;
      align-self: auto;
    }
    .nikke-attr-cell { width: auto; flex: 1; height: 32px; }
    .naa-val { font-size: 17px; }

     
    .nikke-stat-card.rank-cont::before { left: 40px; }

     
    #nikke-squad-overlay { padding: 16px 8px; }
    .nikke-squad-modal { padding: 20px 14px 22px; }
    .nikke-squad-name { font-size: 18px; }
    .nikke-squad-head { gap: 8px; flex-wrap: wrap; }
    .nsq-section-head { padding: 6px 10px; gap: 8px; }
    .nsq-section-rows { padding: 6px 10px; }
    .nsq-boss { width: 48px; height: 48px; }
    .nsq-boss-name { font-size: 14px; }
    .nsq-boss-count { font-size: 11px; letter-spacing: 1px; }
    .nikke-squad-row { gap: 8px; padding: 6px; }
    .nsq-units { gap: 4px; }
    .nsq-unit { width: 40px; height: 40px; }
    .nsq-row-count { font-size: 18px; min-width: 36px; }

     
    .nikke-icon-tooltip { display: none !important; }
  }

  @media (max-width: 480px) {
    .nikke-portrait { width: 48px; height: 48px; }
    .nikke-icons { grid-template-columns: repeat(5, 28px); gap: 3px; }
    .nikke-icon, .nikke-icon-empty { width: 28px; height: 28px; }
    .nikke-rank { width: 28px; font-size: 20px; }
    .nikke-name { font-size: 15px; }
    .nikke-count { font-size: 20px; min-width: 44px; }
    .naa-val { font-size: 15px; }
    .nikke-attr-cell { height: 28px; }
    .nikke-stat-card.rank-cont::before { left: 36px; }

    .nsq-boss { width: 40px; height: 40px; }
    .nsq-unit { width: 34px; height: 34px; }
    .nsq-units { gap: 3px; }
  }

   
  .raid-num-btn.raid-num-all {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
  }
  .raid-num-btn.raid-num-all.active {
    background: var(--accent);
    color: #fff;
  }

   
  #growth-detail-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 2100;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 16px;
    box-sizing: border-box;
  }
  #growth-detail-overlay.show { display: flex; animation: overlay-fade 0.18s ease both; }
  .growth-detail-modal {
    position: relative;
    width: min(1100px, 100%);
    background: var(--card);
    border: 1px solid var(--border-bright);
    border-top: 3px solid var(--accent);
    padding: 32px 36px 36px;
    box-sizing: border-box;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
  .growth-detail-modal.popup-open-anim {
    animation: popup-pop 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .growth-detail-close {
    position: absolute; top: 14px; right: 18px;
    background: transparent; border: none;
    color: var(--text-dim); font-size: 32px; line-height: 1;
    cursor: pointer; padding: 4px 10px;
    z-index: 2;
  }
  .growth-detail-close:hover { color: var(--text); }

   
  .gd-hero {
    display: flex;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 26px;
    min-height: 260px;
  }
  .gd-hero-imgwrap {
    position: relative;
    width: 480px;
    flex-shrink: 0;
    background: #111;
    overflow: hidden;
    border: 1px solid var(--border-bright);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  }
  .gd-hero-img {
    width: 100%; height: 100%;
    background-color: var(--bg);
    background-size: cover;
    background-position: center;
    filter: brightness(0.85) saturate(1.1);
  }
  .gd-hero-attr-badge {
    position: absolute; top: 14px; left: 14px;
    padding: 5px 16px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border-left: 2px solid #fff;
  }
  .gd-hero-tier-badge {
    position: absolute; top: 14px; right: 14px;
    padding: 5px 16px;
    background: rgba(0,0,0,0.75);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.35);
  }
  .gd-hero-info {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 16px;
    padding: 6px 0;
    min-width: 0;
  }
  .gd-hero-boss {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 44px; letter-spacing: 2px;
    color: var(--text); line-height: 1;
    word-break: keep-all;
  }
  .gd-hero-member {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .gd-hero-member-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 36px; font-weight: 700;
    color: var(--text);
  }

   
  .gd-diff-bar {
    display: flex; align-items: baseline; justify-content: center;
    gap: 36px;
    padding: 26px 28px;
    margin-bottom: 26px;
    background: var(--card2);
    border: 1px solid var(--border-bright);
    border-top: 2px solid var(--accent);
  }
  .gd-diff-pct {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 88px; letter-spacing: 3px; line-height: 1;
  }
  .gd-diff-abs {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 44px; letter-spacing: 1.5px; line-height: 1;
  }
  .gd-diff-pct.up,   .gd-diff-abs.up   { color: #ff4d4d; text-shadow: 0 0 24px rgba(255,77,77,0.35); }
  .gd-diff-pct.down, .gd-diff-abs.down { color: #4284ff; text-shadow: 0 0 24px rgba(66,132,255,0.35); }
  .gd-diff-pct.flat, .gd-diff-abs.flat { color: var(--text-dim); }

   
  .gd-chart {
    padding: 18px 22px 22px;
    background: var(--card2);
    border: 1px solid var(--border-bright);
    margin-bottom: 26px;
  }
  .gd-chart-row {
    display: flex; align-items: center; gap: 14px;
    padding: 7px 0;
  }
  .gd-chart-label {
    min-width: 96px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--text);
  }
  .gd-chart-bar-wrap {
    flex: 1; height: 28px;
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
  }
  .gd-chart-bar {
    height: 100%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .gd-chart-bar.current { background: linear-gradient(90deg, var(--accent), rgba(74,158,255,0.55)); }
  .gd-chart-bar.prev    { background: linear-gradient(90deg, var(--text-dim), rgba(107,114,128,0.4)); }
  .gd-chart-value {
    min-width: 118px;
    text-align: right;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px; letter-spacing: 1px;
    color: var(--text);
    line-height: 1;
  }
  .gd-chart-row.current .gd-chart-value { color: var(--accent); }

   
  .gd-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .gd-col {
    background: var(--card2);
    border: 1px solid var(--border);
    padding: 18px 18px 20px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .gd-col-current { border-left: 4px solid var(--accent); }
  .gd-col-prev    { border-left: 4px solid var(--text-dim); }
  .gd-col-head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .gd-col-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 3px;
    color: var(--accent); text-transform: uppercase;
  }
  .gd-col-prev .gd-col-label { color: var(--text-dim); }
  .gd-col-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px; letter-spacing: 2px;
    color: var(--text);
  }
  .gd-col-lv {
    margin-left: auto;
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--text);
    display: inline-flex; align-items: baseline; gap: 6px;
  }
  .gd-col-lv-diff {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--text-dim);
  }
  .gd-col-lv-diff.up   { color: #ff4d4d; }
  .gd-col-lv-diff.down { color: #4284ff; }

   
  .gd-strikes { display: flex; flex-direction: column; gap: 14px; }
  .gd-strike-item {
    display: flex; flex-direction: column; gap: 8px;
  }
  .gd-strike-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--card2);
    border: 1px solid var(--border-bright);
    border-left: 3px solid var(--accent);
  }
  .gd-col-prev .gd-strike-header { border-left-color: var(--text-dim); }
  .gd-strike-phase {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 17px; letter-spacing: 2px;
    color: var(--text);
  }
  .gd-strike-dmgwrap {
    display: inline-flex; align-items: baseline; gap: 8px;
  }
  .gd-strike-dmg {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px; letter-spacing: 1.5px;
    color: var(--accent); line-height: 1;
    text-shadow: 0 0 20px rgba(74,158,255,0.3);
  }
  .gd-col-prev .gd-strike-dmg { color: var(--text); text-shadow: none; }
  .gd-strike-kill {
    display: inline-block;
    padding: 2px 8px;
    background: transparent;
    color: #ff4d4d;
    border: 1px solid #ff4d4d;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  }

   
  .gd-strike {
    padding: 10px 14px 12px;
    background: var(--card);
    border: 1px solid var(--border);
  }

   
  .gd-squad-w {
    position: relative;
    height: 200px;
    width: 100%;
    min-width: 380px;
  }
  .gd-squad-slot {
    position: absolute;
    width: 96px; height: 96px;
    background-color: var(--bg);
    background-size: cover;
    background-position: center 25%;
    border: 2px solid var(--border-bright);
    box-sizing: border-box;
    transform: translateX(-50%);
  }
   
  .gd-squad-slot.slot-0 { left: 15%;   top: 0;     }
  .gd-squad-slot.slot-1 { left: 32.5%; top: 104px; }
  .gd-squad-slot.slot-2 { left: 50%;   top: 0;     }
  .gd-squad-slot.slot-3 { left: 67.5%; top: 104px; }
  .gd-squad-slot.slot-4 { left: 85%;   top: 0;     }

  .gd-strikes-empty {
    padding: 32px 12px;
    color: var(--text-dim);
    text-align: center;
    font-size: 14px;
    background: var(--card);
    border: 1px dashed var(--border);
  }

  .gtile.clickable { cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
  .gtile.clickable:hover { transform: translateY(-2px); border-color: var(--accent); }

  @media (max-width: 900px) {
    #growth-detail-overlay { padding: 20px 10px; }
    .growth-detail-modal { padding: 20px 16px 22px; }
    .growth-detail-close { top: 8px; right: 10px; font-size: 26px; }
    .gd-hero { flex-direction: column; gap: 14px; margin-bottom: 18px; min-height: 0; }
    .gd-hero-imgwrap { width: 100%; height: 220px; }
    .gd-hero-attr-badge, .gd-hero-tier-badge { font-size: 12px; padding: 3px 10px; letter-spacing: 2px; }
    .gd-hero-boss { font-size: 28px; }
    .gd-hero-member-name { font-size: 24px; }
    .gd-diff-bar { padding: 18px 16px; gap: 20px; }
    .gd-diff-pct { font-size: 54px; }
    .gd-diff-abs { font-size: 30px; }
    .gd-chart { padding: 14px 14px 16px; }
    .gd-chart-value { font-size: 20px; min-width: 84px; }
    .gd-chart-label { min-width: 72px; font-size: 13px; }
    .gd-compare-grid { grid-template-columns: 1fr; gap: 14px; }
    .gd-col-title { font-size: 24px; }
    .gd-col-lv    { font-size: 18px; }
    .gd-strike-phase { font-size: 15px; }
    .gd-strike-dmg   { font-size: 28px; }
    .gd-squad-w { height: 142px; min-width: 260px; }
    .gd-squad-slot { width: 68px; height: 68px; border-width: 1.5px; }
    .gd-squad-slot.slot-1 { top: 74px; }
    .gd-squad-slot.slot-3 { top: 74px; }
  }

  @media (max-width: 480px) {
    #growth-detail-overlay { padding: 12px 6px; }
    .growth-detail-modal { padding: 16px 12px 18px; }
    .gd-hero { gap: 12px; margin-bottom: 14px; }
    .gd-hero-imgwrap { height: 170px; }
    .gd-hero-boss { font-size: 24px; letter-spacing: 1.5px; }
    .gd-hero-member-name { font-size: 20px; }
    .gd-hero-attr-badge, .gd-hero-tier-badge { font-size: 11px; padding: 2px 8px; letter-spacing: 1.5px; }
    .gd-diff-bar { flex-direction: column; gap: 4px; padding: 14px 12px; }
    .gd-diff-pct { font-size: 44px; }
    .gd-diff-abs { font-size: 24px; }
    .gd-chart { padding: 10px 10px 12px; margin-bottom: 18px; }
    .gd-chart-row { gap: 8px; padding: 4px 0; }
    .gd-chart-label { min-width: 56px; font-size: 12px; letter-spacing: 1px; }
    .gd-chart-bar-wrap { height: 20px; }
    .gd-chart-value { font-size: 16px; min-width: 64px; }
    .gd-col { padding: 12px 12px 14px; }
    .gd-col-head { gap: 8px; padding-bottom: 8px; }
    .gd-col-label { font-size: 11px; letter-spacing: 2px; }
    .gd-col-title { font-size: 20px; }
    .gd-col-lv    { font-size: 15px; }
    .gd-col-lv-diff { font-size: 12px; }
    .gd-strike { padding: 8px 10px 10px; }
    .gd-strike-header { padding: 6px 10px; }
    .gd-strike-phase { font-size: 13px; }
    .gd-strike-dmg   { font-size: 22px; }
    .gd-strike-kill  { font-size: 10px; padding: 1px 6px; }
    .gd-squad-w { height: 116px; min-width: 220px; }
    .gd-squad-slot { width: 54px; height: 54px; border-width: 1.5px; }
    .gd-squad-slot.slot-1 { top: 62px; }
    .gd-squad-slot.slot-3 { top: 62px; }
  }

   
  .personal-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
  }
  .personal-choice-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    padding: 40px 32px;
    background: var(--card);
    border: 1px solid var(--border-bright);
    border-left: 3px solid var(--accent);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  }
  .personal-choice-btn:hover {
    background: var(--card2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }
  .personal-choice-btn .pcb-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 4px;
    color: var(--accent); text-transform: uppercase;
  }
  .personal-choice-btn .pcb-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 26px; font-weight: 700;
    color: var(--text);
    letter-spacing: 1px;
  }
  .personal-choice-btn .pcb-desc {
    font-size: 13px; color: var(--text-dim);
    line-height: 1.5;
  }
  @media (max-width: 768px) {
    .personal-choice-grid { grid-template-columns: 1fr; gap: 12px; }
    .personal-choice-btn  { min-height: 140px; padding: 24px 20px; }
    .personal-choice-btn .pcb-title { font-size: 20px; }
  }

   
  #personal-member-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .personal-card {
    background: var(--card2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }
  .personal-card:hover {
    border-color: var(--accent);
    background: var(--card);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }
  .personal-card-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700; font-size: 16px;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .personal-card-lv {
    font-family: 'JetBrains Mono', 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--accent);
    letter-spacing: 1.5px;
  }
  @media (max-width: 900px) {
    #personal-member-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px) {
    #personal-member-grid { grid-template-columns: repeat(2, 1fr); }
    .personal-card { padding: 12px 14px; }
    .personal-card-name { font-size: 14px; }
    .personal-card-lv { font-size: 12px; }
  }

   
   
  .m-strike-history-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .m-raid-row {
    background: var(--card2);
    border: 1px solid var(--border);
    padding: 14px 16px;
    transition: border-color 0.15s;
    display: grid;
    grid-template-columns: minmax(130px, 160px) 1fr;
    gap: 18px;
    align-items: stretch;
  }
  .m-raid-row:hover { border-color: var(--accent); }

   
  .m-raid-head {
    display: flex; flex-direction: column;
    gap: 4px;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .m-raid-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 21px; letter-spacing: 2.5px;
    color: var(--accent); line-height: 1.1;
  }
  .m-raid-lv {
    font-family: 'Rajdhani', sans-serif;
    font-size: 21px; font-weight: 700;
    color: var(--text); letter-spacing: 1.5px; line-height: 1.1;
  }
  .m-raid-total {
    margin-left: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    align-self: stretch;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px; letter-spacing: 1px;
    color: var(--text); line-height: 1;
  }

   
  .m-strikes-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: stretch;
  }
  .msh-strike {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px;
    background: var(--card);
    min-width: 0;
  }
  .msh-img {
    grid-column: 1; grid-row: 1;
    width: 100px; height: 100px;
    background-color: var(--bg);
    filter: brightness(0.85);
    flex-shrink: 0;
  }
   
  .msh-phase {
    grid-column: 2; grid-row: 1;
    justify-self: end; align-self: start;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--text-dim);
    padding: 3px 8px; border: 1px solid var(--border);
  }
   
  .msh-bottom-left {
    grid-column: 1; grid-row: 2;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; align-self: end;
  }
   
  .msh-bottom-right {
    grid-column: 2; grid-row: 2;
    display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
    align-self: end;
  }
  .msh-boss {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700; font-size: 17px;
    color: var(--text); letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .msh-attr {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 14px; letter-spacing: 2px;
    text-transform: uppercase;
  }
  .msh-dmg {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px; letter-spacing: 1px;
    color: var(--text); line-height: 1;
  }

   
  .msh-strike.msh-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 12px; background: var(--card);
    border-left: 3px solid var(--border) !important;
    min-height: 140px;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .msh-empty-dash {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px; line-height: 1;
    color: var(--text-dim); opacity: 0.4;
  }
  .msh-empty-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px; letter-spacing: 1.5px;
    color: var(--text-dim);
    margin-top: 4px;
  }

   
  @media (max-width: 800px) {
    .m-raid-row { grid-template-columns: 1fr; gap: 12px; }
    .m-raid-head {
      flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .m-raid-total {
      margin-top: 0; padding-top: 0; border-top: none;
      margin-left: auto;
    }
    .m-strikes-3col { grid-template-columns: 1fr; gap: 6px; }
    .msh-img { width: 80px; height: 80px; }
  }
  @media (max-width: 600px) {
    .m-raid-row { padding: 10px 12px; }
    .m-raid-title { font-size: 17px; }
    .m-raid-lv { font-size: 17px; }
    .m-raid-total { font-size: 22px; }
    .msh-strike { padding: 10px; column-gap: 10px; }
    .msh-img { width: 72px; height: 72px; }
    .msh-boss { font-size: 15px; }
    .msh-attr { font-size: 13px; }
    .msh-dmg { font-size: 24px; }
    .msh-lv-big { font-size: 20px; }
  }

   
  .btn-sort.btn-sort-sm {
    padding: 4px 10px;
    font-size: 12px;
    letter-spacing: 1px;
  }

   
  .m-strikes-3col-flat {
    background: var(--card2);
    padding: 12px;
    border: 1px solid var(--border);
  }
  .msh-strike-with-raid {
     
  }
   
  .msh-strike.msh-strike-with-raid {
    grid-template-rows: 1fr;
    column-gap: 14px;
    padding: 12px 14px;
  }
  .msh-strike-with-raid > .msh-left {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 4px;
  }
  .msh-strike-with-raid > .msh-right {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
  }
   
  .msh-raid-line {
    display: flex; align-items: baseline; gap: 6px;
    margin-top: 4px;
  }
  .msh-raid-tag {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 16px; letter-spacing: 1.5px;
    color: var(--accent);
  }
  .msh-phase-inline {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--text-dim); letter-spacing: 1.5px;
  }
   
  .msh-lv-big {
    font-family: 'Rajdhani', sans-serif;
    font-size: 24px; font-weight: 700;
    color: var(--text); letter-spacing: 1.5px;
    line-height: 1;
  }
  .msh-dmg-block {
    display: flex; align-items: baseline; gap: 8px;
  }
   
  @media (max-width: 900px) {
    .m-bottom-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  }

   
  .ps-block { margin-bottom: 16px; }
  .ps-section-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  }
  .ps-section-bar { display: inline-block; width: 3px; height: 18px; background: var(--accent); }
  .ps-section-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px; font-weight: 700; letter-spacing: 3px;
    color: var(--text-dim); text-transform: uppercase;
  }
  .ps-section-meta {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px; color: var(--text-dim); letter-spacing: 1px;
    margin-left: auto;
  }

   
  .ps-top-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .ps-top-grid > .card { margin-bottom: 0; }

   
  .ps-kpi-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .ps-kpi-group { display: flex; flex-direction: column; gap: 8px; }
  .ps-kpi-group-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px; font-weight: 700;
    color: var(--text); letter-spacing: 1px;
    padding-left: 8px; border-left: 2px solid var(--accent);
  }
  .ps-kpi-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ps-kpi {
    background: var(--card2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 14px 16px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  }
  .ps-kpi-accent { border-left-color: #ffb300; }
  .ps-kpi-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 6px;
  }
  .ps-kpi-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px; letter-spacing: 1px; color: var(--text);
    line-height: 1;
    display: flex; align-items: baseline; gap: 4px;
  }
  .ps-kpi-unit {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 1px;
    color: var(--text-dim);
    margin-left: 2px;
  }

   
  .ps-highlight-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ps-highlight {
    background: var(--card2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(160px, auto) 1fr;
    align-items: center; gap: 18px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    min-height: 92px;
  }
  .ps-hl-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .ps-hl-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .ps-hl-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 1px;
    color: var(--text-dim);
  }
  .ps-hl-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 44px; letter-spacing: 1px; color: var(--text);
    line-height: 1;
    display: flex; align-items: baseline;
  }
  .ps-hl-thumb-row {
    display: flex; align-items: center; gap: 10px;
  }
  .ps-hl-thumb {
    width: 52px; height: 52px;
    background-size: cover; background-position: center;
    border: 1px solid var(--border-bright);
    flex-shrink: 0;
  }
  .ps-hl-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .ps-hl-boss {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 17px; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ps-hl-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px; color: var(--text-dim); letter-spacing: 0.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

   
  .ps-attr-triple {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: stretch;
  }
  .ps-attr-triple-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .ps-attr-triple-cell {
    display: flex; flex-direction: column;
    gap: 8px;
    position: relative;
  }
   
  .ps-attr-triple-cell:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 4px; bottom: 4px;
    right: -14px;
    width: 1px;
    background: var(--border);
  }
  .ps-attr-triple-title {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 1px;
    color: var(--text-dim);
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .ps-attr-dmg-single { padding: 0; }
  .ps-attr-single {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    align-items: end;
  }
  .ps-attr-slot {
    display: flex; flex-direction: column;
    gap: 6px;
    align-items: center;
  }
  .ps-attr-bar-col {
    position: relative;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    width: 32px;
    height: 200px;
    border-bottom: 1px solid var(--border);
  }
  .ps-attr-bar-fill {
    width: 100%;
    background: var(--c, var(--accent));
    transition: height 0.4s ease;
  }
  .ps-attr-slot-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px; letter-spacing: 0.5px;
    color: var(--text);
    text-align: center;
    line-height: 1;
  }
   
  .ps-attr-triple-legend {
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
  }
  .ps-attr-legend-row {
    display: flex; align-items: center; gap: 8px;
  }
  .ps-attr-legend-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    background: var(--c, var(--accent));
    border: 1px solid var(--border-bright);
    flex-shrink: 0;
  }
  .ps-attr-legend-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px; font-weight: 700; letter-spacing: 2px;
    line-height: 1;
  }
  @media (max-width: 900px) {
     
    .ps-attr-triple {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .ps-attr-triple-charts {
      grid-template-columns: 1fr;
      gap: 20px;
    }
     
    .ps-attr-triple-cell:not(:last-child)::after {
      top: auto;
      bottom: -10px;
      left: 4px;
      right: 4px;
      width: auto;
      height: 1px;
    }
    .ps-attr-triple-legend {
      flex-direction: row; flex-wrap: wrap; justify-content: center;
      padding-left: 0; padding-top: 12px;
      border-left: none;
      border-top: 1px solid var(--border);
      gap: 16px;
    }
    .ps-attr-bar-col { width: 32px; height: 180px; }
    .ps-attr-slot-value { font-size: 17px; }
  }
  @media (max-width: 600px) {
    .ps-attr-triple-charts { gap: 16px; }
    .ps-attr-bar-col { width: 26px; height: 150px; }
    .ps-attr-slot-value { font-size: 15px; }
    .ps-attr-triple-title { font-size: 15px; letter-spacing: 0.5px; }
    .ps-attr-legend-name { font-size: 16px; letter-spacing: 1px; }
    .ps-attr-triple-legend { gap: 12px; }
    .ps-attr-legend-swatch { width: 12px; height: 12px; }
  }

   
  .ps-charts-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    margin-bottom: 16px;
  }
  .ps-charts-grid > .card { min-width: 0; }
  #ps-attr-bar { height: 240px; }

  .ps-hl-clickable { cursor: pointer; transition: 0.15s; }
  .ps-hl-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  }

   
  .ps-boss-list { display: flex; flex-direction: column; gap: 10px; }
  .ps-boss-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center; gap: 16px;
    background: var(--card2);
    border: 1px solid var(--border);
    padding: 14px 18px;
  }
  .ps-boss-thumb {
    width: 72px; height: 72px;
    background-size: cover; background-position: center;
    border: 1px solid var(--border-bright);
  }
  .ps-boss-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .ps-boss-top { display: flex; align-items: baseline; gap: 10px; }
  .ps-boss-name {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 20px; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ps-boss-attr {
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px; font-weight: 700; letter-spacing: 1px;
  }
  .ps-boss-bar { height: 8px; background: var(--border); overflow: hidden; }
  .ps-boss-fill {
    height: 100%; background: var(--bar-c, var(--accent));
    transition: width 0.4s ease;
  }
  .ps-boss-stats {
    display: flex; gap: 18px; align-items: baseline;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px; color: var(--text-dim); letter-spacing: 0.5px;
    white-space: nowrap;
  }
  .ps-boss-stats b {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; color: var(--text);
    font-weight: normal; margin-right: 2px;
  }

   
  .ps-nikke-top {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .ps-nikke-col {
    display: flex; flex-direction: column;
    gap: 8px;
    background: var(--card2);
    border: 1px solid var(--border);
    padding: 10px;
  }
  .ps-nikke-col-head {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 17px; font-weight: 700;
    color: var(--text); letter-spacing: 1px;
    text-align: center;
    padding-bottom: 6px; margin-bottom: 2px;
    border-bottom: 1px solid var(--border);
  }
  .ps-nikke-row {
    display: grid;
    grid-template-columns: 76px 76px auto;
    align-items: center; gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 8px;
    position: relative;
  }
  .ps-nikke-rank {
    position: absolute; top: 4px; left: 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px; color: var(--text-dim); letter-spacing: 0.5px;
    line-height: 1;
    z-index: 1;
    text-shadow: 0 0 4px var(--card);
  }
  .ps-nikke-portrait {
    width: 76px; height: 76px;
    background-size: cover; background-position: center 25%;
    background-color: var(--border);
    border: 1px solid var(--border-bright);
  }
  .ps-nikke-icons-2x2 {
    width: 76px; height: 76px;
    display: grid;
    grid-template-columns: 35px 35px;
    grid-template-rows: 35px 35px;
    gap: 6px;
  }
  .ps-nikke-icons-2x2 > .nikke-icon,
  .ps-nikke-icons-2x2 > .nikke-icon-dual,
  .ps-nikke-icons-2x2 > .nikke-icon-empty {
    width: 35px !important;
    height: 35px !important;
    flex-shrink: 0;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    border-radius: 0 !important;
    box-sizing: border-box;
  }
   
  .ps-nikke-icons-2x2 > img.nikke-icon:first-child {
    padding: 3px;
    object-fit: contain;
  }
  .ps-nikke-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; color: var(--text); line-height: 1;
    display: flex; align-items: baseline;
    white-space: nowrap;
  }
  .ps-nikke-empty {
    color: var(--text-dim);
    text-align: center;
    padding: 12px 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
  }

   
  @media (max-width: 900px) {
    .ps-top-grid { grid-template-columns: 1fr; gap: 12px; }
    .ps-charts-grid { grid-template-columns: 1fr; gap: 12px; }
    .ps-nikke-top { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ps-hl-value { font-size: 36px; }
    .ps-highlight {
      grid-template-columns: 1fr;
      gap: 8px;
      min-height: 0;
      padding: 12px 14px;
    }
    .ps-hl-right { align-items: flex-start; }
    .ps-section-label { font-size: 17px; letter-spacing: 2px; }
    .ps-boss-row {
      grid-template-columns: 60px 1fr;
      gap: 12px;
      padding: 12px 14px;
    }
    .ps-boss-thumb { width: 60px; height: 60px; }
    .ps-boss-stats {
      grid-column: 1/-1;
      justify-content: space-between;
      padding-top: 8px;
      border-top: 1px dashed var(--border);
      gap: 10px;
      font-size: 16px;
    }
    .ps-boss-stats b { font-size: 20px; }
  }
   
  #easter-egg {
    position: fixed;
    width: 96px;
    height: 96px;
    background-size: cover;
    background-position: center 25%;
    background-repeat: no-repeat;
    background-color: var(--card);
    border: 2px solid #000;
    box-shadow:
      0 0 12px rgba(0, 0, 0, 0.55),
      0 0 28px rgba(0, 0, 0, 0.35),
      0 6px 20px rgba(0, 0, 0, 0.4);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    cursor: pointer;
    z-index: 9999;
    transform-origin: center;
    animation: easter-egg-float 3.2s ease-in-out infinite, easter-egg-in 0.45s ease-out;
    transition: opacity 0.3s, transform 0.3s;
  }
  #easter-egg:hover {
    box-shadow:
      0 0 18px rgba(0, 0, 0, 0.7),
      0 0 40px rgba(0, 0, 0, 0.5),
      0 8px 24px rgba(0, 0, 0, 0.55);
  }
  [data-theme='dark'] #easter-egg {
    border-color: #000;
    box-shadow:
      0 0 14px rgba(255, 255, 255, 0.35),
      0 0 30px rgba(255, 255, 255, 0.2),
      0 6px 20px rgba(0, 0, 0, 0.5);
  }
  @keyframes easter-egg-float {
    0%   { transform: translateY(0)    rotate(-2deg); }
    50%  { transform: translateY(-6px) rotate(2deg); }
    100% { transform: translateY(0)    rotate(-2deg); }
  }
  @keyframes easter-egg-in {
    from { transform: scale(0.4) rotate(-20deg); opacity: 0; }
    to   { transform: scale(1)   rotate(-2deg);  opacity: 1; }
  }
  .easter-egg-pop {
    animation: easter-egg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    pointer-events: none;
  }
  @keyframes easter-egg-pop {
    0%   { transform: scale(1)   rotate(0deg);   opacity: 1; }
    35%  { transform: scale(1.5) rotate(-8deg);  opacity: 1;
           filter: brightness(1.6) drop-shadow(0 0 18px rgba(255,220,120,0.9)); }
    100% { transform: scale(0)   rotate(45deg);  opacity: 0;
           filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
  }
   
  .easter-egg-ring {
    position: fixed;
    width: 16px; height: 16px;
    border: 3px solid rgba(255, 220, 120, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 200, 80, 0.7);
    pointer-events: none;
    z-index: 10000;
    animation: easter-egg-ring 0.7s ease-out forwards;
  }
  @keyframes easter-egg-ring {
    0%   { transform: scale(1);  opacity: 1; border-width: 3px; }
    100% { transform: scale(12); opacity: 0; border-width: 1px; }
  }
   
  .easter-egg-spark {
    position: fixed;
    width: 8px; height: 8px;
    background: radial-gradient(circle, #fff8c8 0%, #ffb84d 60%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 200, 80, 0.9);
    pointer-events: none;
    z-index: 10000;
    animation: easter-egg-spark 0.65s ease-out forwards;
  }
  @keyframes easter-egg-spark {
    0%   { transform: translate(0, 0) scale(1);   opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
  }
  [data-theme='dark'] .easter-egg-ring   { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 22px rgba(255, 255, 255, 0.55); }
  [data-theme='dark'] .easter-egg-spark  { background: radial-gradient(circle, #ffffff 0%, #b0dfff 60%, transparent 100%); box-shadow: 0 0 10px rgba(180, 220, 255, 0.9); }
  @media (max-width: 600px) {
    #easter-egg { width: 72px; height: 72px; }
  }

  @media (max-width: 600px) {
    .ps-kpi-groups { grid-template-columns: 1fr; gap: 10px; }
    .ps-kpi { padding: 12px 14px; }
    .ps-kpi-value { font-size: 28px; }
    .ps-nikke-top { grid-template-columns: 1fr; }
    .ps-nikke-col { padding: 10px; }
    .ps-nikke-row {
      grid-template-columns: 72px 72px 1fr;
      gap: 10px;
      padding: 8px;
    }
    .ps-nikke-portrait { width: 72px; height: 72px; }
    .ps-nikke-icons-2x2 { width: 72px; height: 72px; gap: 5px; }
    .ps-nikke-count { font-size: 20px; }
    .ps-hl-value { font-size: 32px; }
    .ps-hl-boss { font-size: 16px; }
    .ps-hl-sub { font-size: 15px; }
    .ps-hl-thumb { width: 44px; height: 44px; }
    .ps-section-meta { font-size: 15px; letter-spacing: 0.5px; }
    #ps-dmg-trend, #ps-attr-bar { height: 240px !important; }
  }