hr {
  border: none;
  border-top: 3px double #747474;
  text-align:center;
  width : 90%;
}
  :root{
    --bg:#0b0d12; --fg:#e9edf1; --muted:#9aa4af; --accent:#5aa9ff; --card:#151a22; --overlay:rgba(0,0,0,.6);
    --bg-image:url('img/BG_default.jpg'); --bg-opacity:0.5; --bg-size:cover;
    --gap:12px;                 /* 타일 간 간격 */
    --hpad:3px;                 /* 그리드 좌/우 여백 */
    --tile:110px;               /* 타일 크기 */
    --maxw:calc(100% - 50px);;
    --radius:10px;
    --glow-sky:  93,188,255;
    --glow-red: 255, 7, 7;
    }
  @font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @media (max-width:768px){
    :root{ --tile:90px; }
  }
    body{margin:0;background:var(--bg);background-size:var(--bg-size);background-position:center;background-repeat:no-repeat;color:var(--fg);font:14px/1.5 'Pretendard',system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;}
    body::before{content:"";position:fixed;inset:0;background-image:var(--bg-image);background-size:var(--bg-size);background-position:center;background-repeat:no-repeat;opacity:var(--bg-opacity);pointer-events:none;z-index:-1;}
    .update-info{text-align:center;font-size:10px;color:var(--muted);opacity:0.5;letter-spacing:0.02em;}
    .update-info a,
    .update-info a:visited,
    .update-info a:hover,
    .update-info a:active{
      color: inherit;         
      text-decoration: none;   
      font-weight: 700;
    }
    body.light-mode{
      --bg:#f6f7fb;
      --fg:#1b232d;
      --muted:#5a6674;
      --card:#fff8f6;
      --overlay:rgba(0,0,0,.35);
      --bg-image:url('img/bg_light.jpg');
      --bg-opacity:0;
    }
    body.light-mode input[type=text],
    body.light-mode input[type=number],
    body.light-mode textarea{
      background:#ffffff;
      border:1px solid #cbd5e1;
      color:var(--fg);
    }
    body.light-mode select,
    body.light-mode .toolbar select,
    body.light-mode #songSort,
    body.light-mode #tag-weight,
    body.light-mode #tag-difficulty,
    body.light-mode #abilityChartTypeSelect,
    body.light-mode #abilityChartBigTypeSelect{
      background:#fff;
      border:1px solid #cbd5e1;
      color:var(--fg);
    }
    body.light-mode button:not(.close):not(.report-guide-v2-button):not(.menu-list):not(.gra-border):not(.b30b),
    body.light-mode .tab:not(.close){
      background:#e9eef5;
      color:var(--fg);
    }
    body.light-mode .report-guide-v2-button{
      filter: brightness(1.1) saturate(1.1);
    }
    body.light-mode .gra-border{
      background-image: linear-gradient(#e9eef5, #e9eef5), linear-gradient(to bottom right, #0060fd, #03e6c8, #df30e2);
      color:var(--fg);
    }
    body.light-mode .tag-chip{
      background:#dfdfdf;
      color:var(--fg);
    }
    body.light-mode .owned-dlc-toggle{
      background:#edf1f7;
      border-color:#cbd5e1;
      color:var(--fg);
    }
    body.light-mode .owned-dlc-table th,
    body.light-mode .owned-dlc-table td{
      border-bottom-color:#d6dee8;
    }
    body.light-mode .owned-dlc-table thead th{
      border-bottom-color:#cbd5e1;
    }
    body.light-mode .subrow-djpower-new{
      text-shadow: 0 0 0.7px #8d3c00;
      color: #ff5500 !important;
    }
    body.light-mode #ranking-image-top, body.light-mode #ranking-image-tiles.ranking-image-djclass .djclass-target-header{
      background-color: #7b7b7b4f;
    }
    body.light-mode #ranking-image-tiles.ranking-image-djclass .djclass-target-sum{
      text-shadow: 1px 1px 2px #0000008a;
    }
    body.light-mode #floorChartCanvasWrap{
      background:rgba(255, 255, 255, 0.85);
      box-shadow:0 12px 32px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(30, 41, 59, 0.12);
    }
    body.light-mode .modal{
      background:#f8fafc;
      border-color:#cbd5e1;
    }
    body.light-mode #rankingImageSort,
    body.light-mode #ranking-image-meta .tier-point, body.light-mode #ranking-image-meta .djclass-score{
      color: #313131 !important;
    }
    body.light-mode .modal header{
      background:#eef2f7;
      border-bottom-color:#cbd5e1;
    }
    body.light-mode #modal header{
      border-color:#cbd5e1;
    }
    body.light-mode #modal .content{
      background:#f8fafc;
      border-color:#cbd5e1;
    }
    body.light-mode #modal .modal-actions{
      background:#eef2f7;
      border-color:#cbd5e1;
    }
    body.light-mode .alert{
      background:#fbe7e7;
      color:#8b2a2a;
    }
    body.light-mode .tile{
      background:var(--card);
      border-color: #00000070;
    }
    body.light-mode .tile .title{
      color:var(--fg);
    }
    body.light-mode .tile .artist{
      color:var(--muted);
    }
    body.light-mode .tile .subrow{
      color:#14005f;
    }
    body.light-mode .tier-info-meta{
      color:var(--muted);
    }
    body.light-mode #rankingImageNickname{
      color:#fff;
    }
    body.light-mode #ranking-image-timestamp{
      color:#0000003b;
    }
    body.light-mode #report-modal .report-ability-card,
    body.light-mode #report-modal .report-stat,
    body.light-mode .djclass-test-section{
      background:#ffffff;
    }
    body.light-mode .profile-image-section{background: #dfdfdf5c;}
    body.light-mode #profile-image-top {
          -webkit-text-stroke: 1px #1b488f;
          background: #dfdfdf5c;
    }
    body.light-mode #report-modal .report-djclass-gauge-track{
      background: linear-gradient(90deg, rgb(180 186 197 / 75%), rgb(182 202 237 / 40%), rgb(217 230 255 / 75%));
    }
    img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;}
    .container{max-width:var(--maxw);width:100%;margin:40px auto;padding:0 16px;overflow-x:visible} /*; 좌우 짤림 문제 hidden -> visible*/


  header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
  header h1{font-size:18px;margin:0 12px 0 0;font-weight:700}
  .home-title{position:relative;display:inline-flex;align-items:center;gap:8px;}
  .home-profile-button{margin-left:4px;}
  .home-announcement{
    position:absolute;
    top:-10px;
    left:0;
    max-width:100%;
    font-size:11px;
    line-height:1.1;
    text-align:center;
    color:#ffd84d;
    word-break:keep-all;
  }
  input[type=text], input[type=number], textarea{background:#0f131a;border:1px solid #263042;color:var(--fg);padding:8px 10px;border-radius:10px;}
  .input{
    padding:10px;
    width:120px;
    border:none;
    outline:none;
    border-radius:5px;
    box-shadow:0 1px gray;
    font-size:14px;
    transition:width 0.3s;
  }
  .input:focus{
    outline:1px solid green;
    box-shadow:none;
    width:200px;
  }
  .input::placeholder{
    color:#7d8995;
  }
  input[type=text], textarea{min-width:80px}
  input::placeholder, textarea::placeholder{color:var(--muted)}
  button,.tab{font-family:'Pretendard';cursor:pointer;border:0;background:#1a2230;color:var(--fg);padding:8px 12px;border-radius:15px;height:2.6em;}
  button:disabled{opacity:0.55;cursor:not-allowed;filter:saturate(0.75);}
  .toggle-button.active{background:var(--accent);color:#04111f;font-weight:700;box-shadow:0 0 0 2px rgba(90,169,255,.25);}
  body.nickname-required > :not(#nickname-entry-overlay){
    filter: blur(6px);
    pointer-events: none;
  }
  .nickname-entry-overlay{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
  }
  .nickname-entry{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 36px 28px;
    background: rgba(10, 12, 16, 0.9);
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    text-align: center;
  }
  .nickname-entry-description{
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
  }
  .nickname-entry-description a{
    color: #7ab4ff;
  }
  .nickname-entry .group{
    position: relative;
  }
  .nickname-entry .input{
    font-size: 16px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 200px;
    border: none;
    border-bottom: 1px solid #515151;
    background: transparent;
    color: var(--fg);
    border-radius: 0;
    box-shadow: none;
  }
  .nickname-entry .input:focus{
    outline: none;
  }
  .nickname-entry label{
    color: #999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
  }
  .nickname-entry .input:focus ~ label,
  .nickname-entry .input:valid ~ label{
    top: -20px;
    font-size: 14px;
    color: #5264ae;
  }
  .nickname-entry .bar{
    position: relative;
    display: block;
    width: 200px;
  }
  .nickname-entry .bar:before,
  .nickname-entry .bar:after{
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #5264ae;
    transition: 0.2s ease all;
  }
  .nickname-entry .bar:before{
    left: 50%;
  }
  .nickname-entry .bar:after{
    right: 50%;
  }
  .nickname-entry .input:focus ~ .bar:before,
  .nickname-entry .input:focus ~ .bar:after{
    width: 50%;
  }
  .nickname-entry .highlight{
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
  }
  .nickname-entry .input:focus ~ .highlight{
    animation: inputHighlighter 0.3s ease;
  }
  @keyframes inputHighlighter{
    from{
      background: #5264ae;
    }
    to{
      width: 0;
      background: transparent;
    }
  }
  .theme-toggle{
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    cursor:pointer;
    line-height:1;
    background:transparent;
  }
  .theme-toggle__input{display:none;}
  .theme-toggle__icon{
    grid-column:1/1;
    grid-row:1/1;
    transition:transform 500ms;
    line-height:0.1;
  }
  .theme-toggle__icon--moon{
    transition-delay:200ms;
    color:#b4b4b4;
  }
  .theme-toggle__icon--sun{
    transform:scale(0);
    color:#ffa500;
  }
  #lightModeToggle:checked + .theme-toggle__icon--moon{
    transform:rotate(360deg) scale(0);
  }
  #lightModeToggle:checked ~ .theme-toggle__icon--sun{
    transition-delay:200ms;
    transform:scale(1) rotate(360deg);
  }
  .gra-border{
  line-height: 1.2em;
  border:2px solid transparent ;
  background-image:linear-gradient(#1a2230, #1a2230), linear-gradient(to  bottom right ,#0060fd ,#03e6c8, #df30e2);
  background-origin:border-box;
  background-clip:padding-box, border-box;}
  .report-guide-v2-button:not(.menu-list){
  width:fit-content;
  display:flex;
  align-items:center;
  padding:1.2em 1rem;
  cursor:pointer;
  gap:0.4rem;
  font-weight:bold;
  border-radius:30px;
  text-shadow:2px 2px 3px rgb(136 0 136 / 50%);
  background:linear-gradient(15deg,#880088,#aa2068,#cc3f47,#de6f3d,#f09f33,#de6f3d,#cc3f47,#aa2068,#880088) no-repeat;
  background-size:300%;
  color:#fff;
  border:none;
  background-position:left center;
  box-shadow:0 30px 10px -20px rgba(0,0,0,.2);
  transition:background .3s ease;
  }
  .report-guide-v2-button:hover{
  background-size:320%;
  background-position:right center;
  }
  .report-guide-v2-button:hover svg{
  fill:#fff;
  }
  .report-guide-v2-button svg{
  width:23px;
  fill:#f09f33;
  transition:.3s ease;
  }
  #openReportGuide:disabled{
  display:none;
  }
  .tab{opacity:.75}
  .tab.active{background:var(--accent);color:#04111f;opacity:1;font-weight:700}
  .alert{margin:8px 0;padding:8px 12px;border-radius:6px;background:#3a1f1f;color:#ffd5d5;display:none}
  .alert.show{display:block}
  .update-toast{
    position:fixed;
    left:50%;
    bottom:20px;
    transform:translate(-50%, 10px);
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.2);
    background:rgba(20, 24, 32, 0.95);
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:-0.2px;
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:9999;
  }
  .update-toast.show{
    opacity:1;
    transform:translate(-50%, 0);
    pointer-events:auto;
  }
  body.light-mode .update-toast{
    background:rgba(255,255,255,0.95);
    color:#1c2230;
    border-color:rgba(28,34,48,0.15);
  }
  .djclass-focus-floating{
    position:fixed;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    padding:10px 18px;
    border-radius:999px;
    border:0;
    background:linear-gradient(270deg, #003295, #0073ed);
    color:#fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:-0.2px;
    cursor:pointer;
    box-shadow:0 12px 24px rgba(0,0,0,0.35);
    z-index:9999;
  }
  .djclass-focus-floating:hover{filter:brightness(1.05);}
  .djclass-focus-floating:active{transform:translateX(-50%) scale(0.98);}
  body.light-mode .djclass-focus-floating{
    background:linear-gradient(270deg, #2853c8, #35a5ff);
    color:#fff;
  }
  .owned-dlc-table{width:100%;border-collapse:collapse;font-size:13px;}
  .owned-dlc-table th,.owned-dlc-table td{padding:6px 8px;text-align:left;border-bottom:1px solid #263042;white-space: nowrap;}
  .owned-dlc-table thead th{border-bottom:2px solid #263042;}
  .owned-dlc-actions{display:flex;gap:6px;flex-wrap:nowrap;}
  .owned-dlc-toggle{padding:6px 10px;border:1px solid #263042;background:#1a2230;color:var(--fg);border-radius:6px;cursor:pointer;white-space: nowrap;}
  .owned-dlc-toggle.active{background:var(--accent);color:#04111f;border-color:var(--accent);}
  #tierChartWrap{
      margin:8px 0;
      padding-left: var(--hpad);
      padding-right: var(--hpad);
      display:flex;
      align-items:center;
  }
  #floorChartSection{
      margin:12px 0 20px;
      padding-left:var(--hpad);
      padding-right:var(--hpad);
      display:flex;
      flex-direction:column;
      gap:8px;
  }
  #floorChartSection.hidden{display:none;}
  .floor-chart-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .floor-chart-controls label{display:flex;align-items:center;gap:6px;}
  .floor-chart-controls input[type=number]{width:5.5em;}
  .floor-chart-controls input[type=text]{width:6.5em;text-transform:uppercase;}
  .difficulty-range-windows{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;margin-inline: var(--hpad);}
  .difficulty-range-windows button{
      padding:6px 10px;
      border-radius:8px;
      border:1px solid rgba(90, 169, 255, 0.3);
      background:rgba(26, 32, 41, 0.8);
      color:var(--fg);
      font-size:14px;
      cursor:pointer;
  }
  .difficulty-range-windows button.active{
      background:rgba(90, 169, 255, 0.2);
      border-color:rgba(90, 169, 255, 0.75);
  }
  #floorChartCanvasWrap{
      position:relative;
      width:700px;
      max-width:100%;
      height:300px;
      padding:16px;
      border-radius:12px;
      background:rgba(26, 32, 41, 0.8);
      box-shadow:0 12px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(90, 169, 255, 0.25);
      box-sizing:border-box;
      resize:both;
      overflow:hidden;
  }
  #floorChartCanvasWrap.hidden{display:none;}
  #floorScoreChart{width:100%;height:100%;}
  .floor-chart-message{color:var(--muted);font-size:12px;}
  .floor-chart-empty{color:var(--muted);font-size:12px;}
  #abilityChartWrap{
      position:relative;
      margin-left:auto;
  }
  .slider-label{
      font-size:10px;
      color:#666;
      display:block;
  }
  #abilityBtnWrap{
      display:none;
      gap:8px;
      margin-bottom:8px;
  }
  .tabs{
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .tier-info{
      min-width:0;
  }
  .tier-info-wrap{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
  }
  .tier-info-meta{
      font-size:12px;
      font-weight:600;
      color:#d9d9d9;
      min-height:16px;
      white-space:nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
  }
  .tier-info-meta.hidden{
      display:none;
  }
  .tier-info .tier-name{
    font-family:'PyeongChangPeace';
    font-size:19px;
    text-shadow:0.5px 0.5px 3px gray;
  }
  .tier-info-text{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
  }
  .tier-info-text--inline{
    flex-direction:row;
    align-items:baseline;
    gap:6px;
    white-space:nowrap;
  }
  .tier-info .tier-label{
    font-size:13px;
    font-weight:600;
    opacity:0.85;
  }
  .tier-info .tier-point{
    font-weight:700;
    font-size:16px;
  }
  .tier-score-stack{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .tier-score-line{
    display:inline-flex;
    align-items:baseline;
    gap:4px;
  }
  .tier-score-gauge-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .tier-score-gauge{
    width:clamp(80px, 12vw, 140px);
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,0.25);
    overflow:hidden;
  }
  .tier-score-gauge-fill{
    display:block;
    height:100%;
    width:0;
    min-width:1px;
    background:linear-gradient(90deg,#5ee7a1,#2ecc71);
  }
  .tier-score-gauge-labels{
    display:flex;
    justify-content:space-between;
    font-size:9px;
    position: relative;
    top: -3px;
    margin-bottom: -10px;
    color:var(--muted);
    font-weight:500;
  }
  .tier-score-stack--compact .tier-score-gauge{
    width:250px;
  }
  .tier-badge{
    display:inline-block;
    vertical-align:middle;
    height:3em;
    width:auto;
    margin-right:6px;
    object-fit:contain;
  }
  #tierChartWrap .tier-badge{
    height:4em;
  }
  .djclass-badge{
    display:inline-block;
    vertical-align:middle;
    height:3em;
    width:auto;
    margin-right:6px;
    object-fit:contain;
  }
  #reportDjClass .djclass-badge {
    height:2.2em;
  }
  .djclass-info-text{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:0;
  }
  .djclass-info-text--inline{
    flex-direction:row;
    align-items:baseline;
    gap:6px;
    white-space:nowrap;
  }
  .djclass-score-stack{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .djclass-score-line{
    display:inline-flex;
    align-items:baseline;
    gap:4px;
  }
  .djclass-score-gauge-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .djclass-score-gauge{
    width:250px;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,0.25);
    overflow:hidden;
  }
  .djclass-score-gauge-fill{
    display:block;
    height:100%;
    width:0;
    min-width:1px;
    background:linear-gradient(90deg,#ffd54f,#ff9800);
  }
  .djclass-score-gauge-labels{
    display:flex;
    justify-content:space-between;
    font-size:9px;
    position: relative;
    top: -3px;
    color:var(--muted);
    font-weight:500;
  }
  #abilityInfo, #abilityBigInfo{display:flex;align-items:baseline;gap:8px;}
  #abilityMode, #abilityBigMode{
    background:none;
    border:0;
    padding:0;
    font-family:'PyeongChangPeace';
    font-size:19px;
    font-weight:700;
    cursor:default;
  }
  #abilityChart{display:block;width:300px;height:120px;border-radius:15px;background-color: #00000036}
#abilityLegend{
  font-size:12px;
  display:none;
  margin-bottom:8px;
}
#abilityLegend .legend-item{
  display:flex; align-items:center; gap:4px; margin-bottom:4px;
  min-width:0;            /* <- 중요 */
}
#abilityLegend .legend-item > *{ min-width:0; }  /* <- 중요 */
#abilityLegend .legend-color{ width:12px; height:12px; border-radius:2px; }
#abilityLegend .legend-label{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
  #abilityChartBigModal{max-width:95vw;max-height:95vh;overflow:hidden;box-sizing:border-box;}
  #abilityChartBigWrap{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;flex:0 0 auto;}
  #abilityChartBig{display:block;width:200px;height:200px;flex-shrink:0;}
  #abilityBigControls{margin-left:auto;display:flex;align-items:center;gap:8px;}
  #abilityBigControls .slider-label{display:inline-block;}
  #abilityBigControls input{width:80px;}
  /* keep top songs beside chart without overlap */
  .modal .content.ability-big-content{display:flex;gap:16px;grid-template-columns:unset;overflow:hidden;}
  #abilityTopList{display:flex;gap:16px;flex-shrink:0;padding-bottom:2vh;overflow:hidden;}
  .ability-top-col{--tile: 80px;display:flex;flex-direction:column;gap:12px;width:calc(var(--tile)*3 + var(--gap)*2 + 24px);flex:0 0 auto;padding-inline:12px;box-sizing:border-box;}
  .ability-top-col + .ability-top-col{border-left:1px solid #263042;}
  .ability-top-group h3{margin:0 0 4px 0;font-size:16px;}
  .ability-top-songs{display:grid;grid-template-columns:repeat(3,var(--tile));gap:var(--gap);width:calc(var(--tile)*3 + var(--gap)*2);}

  @media (max-width:768px){
    #abilityChartBigModal{overflow:auto;}
    .modal .content.ability-big-content{flex-direction:column;align-items:center;overflow:visible;}
    .ability-top-col{padding-bottom:2vh;}
    #abilityTopList{width:auto;height:auto;overflow-y:visible;overflow-x:visible;}
  }

  .toolbar{display:flex;gap:6px;padding-bottom:10px;align-items:center;margin-left:auto;flex-wrap:wrap}
.toolbar2{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap}
.toolbar-menu.main > .inp{display:none}
.toolbar-menu.main{
    font-weight: 800;
    color: #fff;
    background: linear-gradient(270deg, #003295, #0073ed);
    padding: 1px 6px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    height: 33px;
    width: 7rem;
    position: relative;
    cursor: pointer;
    gap: 3px;
    justify-content: space-around;
}
.toolbar-menu__label{white-space:nowrap}
.toolbar-menu .menu-container{
  background-color:#1a2230;
  color:#f2f4f7;
  border-radius:10px;
  position:absolute;
  width:100%;
  left:0;
  top:130%;
  overflow:hidden;
  clip-path:inset(0% 0% 0% 0% round 10px);
  transition:all 0.4s;
  z-index:10;
}
.toolbar-menu .menu-list{
  --delay:0.05s;
  --trdelay:0.05s;
  padding:8px 10px;
  border-radius:inherit;
  transition:background-color 0.2s 0s;
  position:relative;
  transform:translateY(30px);
  opacity:0;
  width:100%;
  border:0;
  background:none;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.toolbar-menu .menu-list::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  height:1px;
  background-color:rgba(0, 0, 0, 0.3);
  width:95%;
}
.toolbar-menu .menu-list:hover{background-color:#2a3446}
.toolbar-menu .menu-list:disabled{
  opacity:0.6;
  cursor:not-allowed;
  display:none;
}
.toolbar-menu .menu-list:disabled:hover{background:none}
.toolbar-menu .menu-list:focus-visible{
  outline:2px solid rgba(255, 255, 255, 0.6);
  outline-offset:-2px;
}
body.light-mode .toolbar-menu .menu-container{
  background-color:#fff;
  color:#1b232d;
}
body.light-mode .toolbar-menu .menu-list:hover{background-color:#e9eef5}
body.light-mode .toolbar-menu .menu-list:focus-visible{
  outline:2px solid rgba(0, 0, 0, 0.4);
}
.toolbar-menu .inp:checked ~ .menu-container{
  clip-path:inset(10% 50% 90% 50% round 10px);
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list{
  transform:translateY(0);
  opacity:1;
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(1){
  transition:transform 0.4s var(--delay), opacity 0.4s var(--delay);
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(2){
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 1)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 1));
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(3){
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 2)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 2));
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(4){
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 3)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 3));
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(5){
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 3.5)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 3.5));
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(6){
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 4)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 4));
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(7){
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 4)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 4));
}
.toolbar-menu .inp:not(:checked) ~ .menu-container .menu-list:nth-child(8){
  transition:
    transform 0.4s calc(var(--delay) + (var(--trdelay) * 4)),
    opacity 0.4s calc(var(--delay) + (var(--trdelay) * 4));
}
.toolbar-menu .bar{
  display:flex;
  height:50%;
  width:20px;
  flex-direction:column;
  gap:3px;
  flex-shrink:0;
  transform: scale(0.7);
}
.toolbar-menu .bar-list{
  --transform:-25%;
  display:block;
  width:100%;
  height:3px;
  border-radius:50px;
  background-color:#fff;
  transition:all 0.3s;
  position:relative;
}
.toolbar-menu .inp:not(:checked) ~ .bar > .top{
  transform-origin:top right;
  transform:translateY(var(--transform)) rotate(-45deg);
}
.toolbar-menu .inp:not(:checked) ~ .bar > .middle{
  transform:translateX(-50%);
  opacity:0;
}
.toolbar-menu .inp:not(:checked) ~ .bar > .bottom{
  transform-origin:bottom right;
  transform:translateY(calc(var(--transform) * -1)) rotate(45deg);
}
  .toolbar select,
  select,
  #songSort,
  #tag-weight,
  #tag-difficulty,
  #abilityChartTypeSelect,
  #abilityChartBigTypeSelect{
    font-family: 'Pretendard';
    background:#0f131a;
    border:1px solid #263042;
    color:var(--fg);
    padding:8px 28px 8px 10px;
    border-radius:15px;
    appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23e9edf1' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 8px center;
    background-size:12px;
  }
  .toolbar select:focus,
  #songSort:focus,
  #tag-weight:focus,
  #tag-difficulty:focus,
  #abilityChartTypeSelect:focus,
  #abilityChartBigTypeSelect:focus{
    border-color:var(--accent);
    outline:none;
    box-shadow:0 0 0 2px rgba(90,169,255,.4);
  }
  a.btn{display:inline-block;text-decoration:none;background:#1a2230;color:var(--fg);padding:8px 12px;border-radius:6px}
  a.btn:hover{filter:brightness(1.05)}
  .hidden{display:none !important}
  #modeButtons,
  #tileModeButtons{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;justify-content:center;}
  #modeButtons .mode-button,
  #tileModeButtons .mode-button{border:2px solid transparent;border-radius:10px;padding:4px;height: auto;background:#0f131a;cursor:pointer;transition:border-color .2s,box-shadow .2s;}
  #modeButtons .mode-button:hover,
  #tileModeButtons .mode-button:hover{filter:brightness(1.05);}
  #modeButtons .mode-button:focus,
  #tileModeButtons .mode-button:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(90,169,255,.4);}
  #modeButtons .mode-button.selected,
  #tileModeButtons .mode-button.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(90,169,255,.2);}
  #modeButtons .mode-button img,
  #tileModeButtons .mode-button img{display:block;width:120px;height:auto;border-radius:6px;}
  #tile-mode-modal{width:min(420px, 92vw);z-index:3;}
  #tile-mode-modal .content{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;}
  #tile-mode-modal .tile-mode-actions{display:flex;justify-content:center;width:100%;}
  #abilityChartWrap.ready{
    display:block;
  }
  #abilityLegend.ready{
    display:flex;
    justify-content:center;
    gap:8px;
  }
  @media(max-width:480px){
    #abilityLegend.ready{
      flex-wrap:wrap;
    }
    #abilityLegend .legend-item{
      width:25%;
      margin-bottom:4px;
    }
  }

  .tag-chip{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    margin:4px;
    background:#1a2230;
    color:var(--fg);
    border-radius:6px;
    cursor:pointer;
    user-select:none;
    box-shadow:0 0 0 0 transparent;
    position:relative;
  }
  .diff-label{
    position:absolute;
    top:1px;
    left:3px;
    font-size:8px;
    font-weight:bold;
    text-transform:uppercase;
    pointer-events:none;
  }
  .diff-label.diff-nm{color:#fefe75;}
  .diff-label.diff-hd{color:#fea55c;}
  .diff-label.diff-mx{color:#e74c3c;}
  .tag-chip input{
    background:#0f131a;
    border:1px solid #263042;
    color:var(--fg);
    padding:2px 4px;
    border-radius:4px;
    width:100%;
  }
  .tag-prefix-btn{
    margin:2px;
    padding:4px 8px;
    border:0;
    border-radius:6px;
    cursor:pointer;
  }
  .tag-prefix-btn.active{
    box-shadow:0 0 0 2px var(--accent);
    font-weight:700;
  }

  .tag-chip.tag-bpm,
  .tag-prefix-btn.tag-bpm,
  .tag-chip.tag-genre,
  .tag-prefix-btn.tag-genre{
    background:gray;
    color:#e9edf1;
  }
  .tag-chip.tag-4b,
  .tag-prefix-btn.tag-4b{
    background:#2ecc71;
    color:#04111f;
  }
  .tag-chip.tag-5b,
  .tag-prefix-btn.tag-5b{
    background:#5aa9ff;
    color:#04111f;
  }
  .tag-chip.tag-6b,
  .tag-prefix-btn.tag-6b{
    background:#ff9800;
    color:#04111f;
  }
  .tag-chip.tag-8b,
  .tag-prefix-btn.tag-8b{
    background:#7918fd;
    color:#e9edf1;
  }

  #djclassTest-modal .content{
    gap:16px;
  }
  .djclass-test-section{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px;
    background:#101924;
    border-radius:12px;
    border:1px solid #1f2b3f;
    box-shadow:0 10px 24px rgba(0,0,0,0.25);
  }
  .djclass-test-section h3{
    font-size:15px;
    letter-spacing:-0.2px;
  }
  .djclass-test-form{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:10px 12px;
    align-items:stretch;
  }
  .djclass-test-form label,
  .djclass-test-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-weight:600;
    font-size:12px;
    color:#d8e1f2;
  }
  .djclass-test-form input,
  .djclass-test-form select{
    background:#0e151f;
    border:1px solid #2a3a52;
    border-radius:8px;
    color:#eef2ff;
    padding:6px 8px;
    font-size:12px;
  }
  .djclass-test-form input:focus,
  .djclass-test-form select:focus{
    outline:2px solid rgba(90,169,255,0.6);
    border-color:#5aa9ff;
  }
  .djclass-test-button-group{
    display:flex;
    flex-wrap:nowrap;
    gap:1px;
    justify-content: space-evenly;
  }
  .djclass-test-button-group > label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 2px 7px;
    font-weight:500;
    font-size:11px;
    color:#e2e8f6;
  }
  .djclass-test-form button{
    height:2.6em;
    border-radius:10px;
    margin-top: 11px;
    grid-column: 1 / -1;
  }
  .djclass-test-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:12px;
    background:#0b1119;
    border-radius:10px;
    overflow:hidden;
  }
  .djclass-test-table th,
  .djclass-test-table td{
    padding:8px 10px;
    text-align:left;
    border-bottom:1px solid #263042;
  }
  .djclass-test-table th{
    font-weight:600;
    color:#dbe4f4;
    background:#121a26;
  }
  .djclass-test-table tbody tr:last-child td{border-bottom:0;}
  .djclass-test-table tbody tr:hover td{
    background:#141d2b;
  }
  .djclass-test-table button{
    padding:5px 10px;
    height:auto;
    border-radius:8px;
  }
  body.light-mode .djclass-test-section{
    background:#ffffff;
    border-color:#d4deee;
    box-shadow:0 8px 20px rgba(15,23,42,0.08);
  }
  body.light-mode .djclass-test-form label,
  body.light-mode .djclass-test-field{
    color:#1f2a3d;
  }
  body.light-mode .djclass-test-form input,
  body.light-mode .djclass-test-form select{
    background:#f8fafc;
    border-color:#cbd5e1;
    color:#0f172a;
  }
  body.light-mode .djclass-test-button-group > label{
    background:#f1f5f9;
    border-color:#cbd5e1;
    color:#1f2937;
  }
  body.light-mode .djclass-test-table{
    background:#ffffff;
  }
  body.light-mode .djclass-test-table th{
    background:#f1f5f9;
    color:#1f2937;
  }
  body.light-mode .djclass-test-table tbody tr:hover td{
    background:#f8fafc;
  }
  .djclass-test-preset-hint{
    position:absolute;
    inset:0;
    z-index:25;
    display:none;
    pointer-events:auto;
  }
  .djclass-test-preset-hint.show{
    display:block;
  }
  .djclass-test-preset-spotlight{
    position:absolute;
    border-radius:10px;
    box-shadow:0 0 0 9999px rgba(0,0,0,0.65);
    border:2px solid rgba(255,255,255,0.65);
    pointer-events:none;
    background:transparent;
  }
  .djclass-test-preset-tooltip{
    position:absolute;
    max-width:280px;
    background:#1b2230;
    border:1px solid #39465e;
    color:#f2f5ff;
    padding:10px 12px;
    border-radius:10px;
    font-size:12px;
    line-height:1.45;
    box-shadow:0 10px 24px rgba(0,0,0,0.45);
    pointer-events:none;
  }
  .djclass-add-form{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .djclass-add-form label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-weight:500;
  }
  .djclass-add-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
  }
  .djclass-add-error{
    min-height:1.2em;
    color:#ff8ba7;
  }
  .djclass-summary-content{
    flex-direction:column;
    gap:12px;
  }
  .djclass-summary-meta{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:8px;
    background:#0f131a;
    padding:10px;
    border-radius:8px;
    border:1px solid #263042;
  }
  .djclass-summary-table{
    width:100%;
    border-collapse:collapse;
  }
  .djclass-summary-table th,
  .djclass-summary-table td{
    text-align:left;
    padding:6px 8px;
    border-bottom:1px solid #263042;
  }
  .djclass-summary-table tr:last-child td{border-bottom:0;}
  .djclass-add-tile{
    border:1px dashed #8094b0;
    color:#e9edf1;
    background:#0f131a;
    border-radius:12px;
    width:100%;
    min-height:140px;
    font-size:32px;
    cursor:pointer;
    transition:background .15s ease,transform .15s ease;
  }
  .djclass-add-tile:hover{
    background:#162032;
    transform:translateY(-2px);
  }
  .djclass-add-tile:active{
    transform:translateY(0);
  }
  .djclass-test-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }
  #djclassTestPreset{
    background:#1f2f3a;
    color:#d7ffe7;
  }
  #djclassTestPreset:not(:disabled):hover{
    filter:brightness(1.05);
  }
  #djclassTestReset{
    background:#3a1f1f;
    color:#ffd5d5;
  }
  #djclassTestReset:not(:disabled):hover{
    filter:brightness(1.05);
  }


  #tag-weight{
    background:#0f131a;
    border:1px solid #263042;
    color:var(--fg);
    padding:8px 28px 8px 10px;
    border-radius:6px;
    appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='%23e9edf1' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 8px center;
    background-size:12px;
  }
  #tag-weight:focus{
    border-color:var(--accent);
    outline:none;
    box-shadow:0 0 0 2px rgba(90,169,255,.4);
  }


  .tag-chip.weight-1{ box-shadow:0 0 0 1.5px #2ecc71; }
  .tag-chip.weight-2{ box-shadow:0 0 0 1.5px #e7ac50; }
  .tag-chip.weight-3{ box-shadow:0 0 0 1.5px #e74c3c; }

  .tile.weight-1{
    border-color: rgba(46,204,113,.95);
    box-shadow: 0 0 0 2px rgba(46,204,113,.9), 0 0 12px rgba(46,204,113,.6), 0 0 24px rgba(46,204,113,.35);
  }
  .tile.weight-2{
    border-color: rgba(231,172,80,.95);
    box-shadow: 0 0 0 2px rgba(231,172,80,.9), 0 0 12px rgba(231,172,80,.6), 0 0 24px rgba(231,172,80,.35);
  }
  .tile.weight-3{
    border-color: rgba(231,76,60,.95);
    box-shadow: 0 0 0 2px rgba(231,76,60,.9), 0 0 12px rgba(231,76,60,.6), 0 0 24px rgba(231,76,60,.35);
  }

@font-face{
font-family: 'PyeongChangPeace';
src: url('/subset-PyeongChangPeace-BoldA1.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.gradient-outline {
font-family: 'PyeongChangPeace';
  font-size: 3em;
  font-style: normal;
  color: white; /* 텍스트 본색 */
  position: relative;
  -webkit-text-stroke: 0.1px pink;
  -webkit-text-stroke: 2px #e17560;
  cursor: pointer;

}
  /* PC-전용/모바일 전용 표시 도우미 (User-Agent 기준) */
  .pc-only{display:flex}
  .mobile-only{display:none;justify-content:center;align-items:center;text-align:center;}
  .is-mobile .pc-only{ display:none !important; }
  .is-mobile .mobile-only{ display:flex !important; }

  /* 링크 스타일 제거(타일이 <a>) */
  .tile,.tile:link,.tile:visited,.tile:hover,.tile:active{ text-decoration:none; color:inherit; }
  .tile .title,.tile .artist,.tile .subrow,.tile .subrow span{ text-decoration:none; }

  /* 기본: 가변(1~N열) */
  .grid.pattern-list{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
    gap: var(--gap);
    justify-content:center;
    padding-left: var(--hpad);
    padding-right: var(--hpad);
    box-sizing: border-box;
    overflow: hidden; /* 버그제보 부분 수정? */
    padding-block: var(--gap); /* 위아래 짤리는 부분 */
  }
  .horizontal-mode #grid.grid.pattern-list{
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--tile) * 2.2), 1fr));
  }
  .horizontal-mode #grid.floor-sort .floor-grid{
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--tile) * 2.2), 1fr));
  }

  #grid.djclass-target{
    display:block;
    padding: var(--gap) var(--hpad);
    box-sizing: border-box;
  }
  #grid.djclass-target .djclass-target-container{
    position:relative;
    display:flex;
    gap: clamp(16px, 3vw, 32px);
  }
  #grid.djclass-target .djclass-target-container::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:2px;
    background:rgba(155,195,255,0.5);
    transform:translateX(-0.5px);
  }
  #grid.djclass-target .djclass-target-column{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    gap: clamp(12px, 2vw, 18px);
    min-width:0;
  }
  #grid.djclass-target .djclass-target-header{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-weight:700;
    text-shadow: 1px 1px 2px #00000063;
  }
  #grid.djclass-target .djclass-target-title{
    font-size:18px;
  }
  #grid.djclass-target .djclass-target-sum{
    display:inline-flex;
    align-items:baseline;
    gap:4px;
    font-size:13px;
    font-weight:500;
    color:#d9d9d9;
  }
  #grid.djclass-target .djclass-target-ratio{
    margin-left:6px;
    font-size:12px;
    font-weight:600;
    color:#ffd4e1;
  }
  #grid.djclass-target .djclass-target-theoretical{
    font-size:13px;
    font-weight:500;
    opacity:0.9;
  }
  #grid.djclass-target .djclass-target-current{
    font-size:15px;
    font-weight:700;
    color:#ffd54f;
  }
  #grid.djclass-target .djclass-target-list{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
    gap: var(--gap);
  }
  .horizontal-mode #grid.djclass-target .djclass-target-list{
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--tile) * 2.2), 1fr));
  }
  .layout-fixed #grid.djclass-target .djclass-target-list{
    grid-template-columns: repeat(var(--djclass-layout-cols, var(--layout-cols)), 1fr) !important;
  }
  .horizontal-mode.layout-fixed #grid.djclass-target .djclass-target-list{
    grid-template-columns: repeat(var(--djclass-layout-cols, var(--layout-cols)), 1fr) !important;
  }
  #grid.djclass-target .djclass-target-empty{
    padding: 24px;
    text-align:center;
    color:#d9d9d9;
    background: var(--card);
    border-radius: var(--radius);
  }
  @media (max-width: 960px){
    #grid.djclass-target .djclass-target-container{
      flex-direction:column;
    }
    #grid.djclass-target .djclass-target-container::before{
      display:none;
    }
  }

  #grid.new-category-sort{
    display:block;
    padding-left: var(--hpad);
    padding-right: var(--hpad);
    padding-block: var(--gap);
    box-sizing: border-box;
  }
  #grid.new-category-sort .new-category-group{
    margin-bottom: clamp(20px, 4vw, 36px);
  }
  #grid.new-category-sort .new-category-group:last-child{
    margin-bottom: 0;
  }
  #grid.new-category-sort .new-category-title{
    margin: clamp(16px, 3vw, 28px) 0 clamp(10px, 2vw, 18px);
    font-size: 18px;
    font-weight: 700;
  }
  #grid.new-category-sort .new-category-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
    gap: var(--gap);
    justify-content:center;
  }
  .layout-fixed #grid.new-category-sort .new-category-grid{
    grid-template-columns: repeat(var(--layout-cols), 1fr) !important;
  }
  #grid.new-category-sort .new-category-empty{
    padding: 24px;
    text-align:center;
    color:#d9d9d9;
    background: var(--card);
    border-radius: var(--radius);
  }

  #grid.floor-sort{
    display:block;
    padding-left: var(--hpad);
    padding-right: var(--hpad);
    padding-block: 0;
    box-sizing: border-box;
  }
  #grid.floor-sort .floor-group{
    margin-bottom: clamp(20px, 4vw, 36px);
  }
  #grid.floor-sort .floor-group:last-child{
    margin-bottom: 0;
  }
  #grid.floor-sort .floor-title{
    margin: clamp(16px, 3vw, 28px) 0 clamp(10px, 2vw, 18px);
    font-size: 18px;
    font-weight: 700;
  }
  #grid.floor-sort .floor-title .floor-average{
    margin-left: 10px;
    font-size: 12px;
    font-weight: 200;
    color: #d9d9d9;
  }
  #grid.floor-sort .floor-group:first-child .floor-title{
    margin-top: 0;
  }
  #grid.floor-sort .floor-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
    gap: var(--gap);
    justify-content:center;
  }
  #grid.floor-sort .floor-grid.floor-grid-misc{
    padding-top: 0;
  }
  .layout-fixed #grid.floor-sort .floor-grid{
    grid-template-columns: repeat(var(--layout-cols), 1fr) !important;
  }
  .horizontal-mode.layout-fixed #grid.floor-sort .floor-grid{
    grid-template-columns: repeat(var(--layout-cols), minmax(calc(var(--tile) * 2.2), 1fr)) !important;
  }

  /* 고정배열 */
  .layout-fixed .grid.pattern-list{ grid-template-columns: repeat(var(--layout-cols), 1fr) !important; }
  .horizontal-mode.layout-fixed .grid.pattern-list{
    grid-template-columns: repeat(var(--layout-cols), minmax(calc(var(--tile) * 2.2), 1fr)) !important;
  }

  /* 타일 */
  .tile{
    position:relative;background:var(--card);border-radius:var(--radius);overflow:hidden;
    display:flex;flex-direction:column;width:auto;
    border:1px solid #ffffff33;;
    transition:box-shadow .25s ease, border-color .25s ease, transform .2s ease;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  .tile:hover{ transform: scale(1.04); }

  /* 글로우(타일 테두리) */
  .glow-maxcombo{
    outline: 2.5px solid #00d9ffd6;
    box-shadow: 0 0 6px rgba(var(--glow-sky), 0.6), 0 0 12px rgba(var(--glow-sky), 0.35);
    z-index:2;
  }
  .glow-perfect{
    outline: 2.5px solid #ff0021d6;
    box-shadow: 0 0 6px rgba(var(--glow-red), 0.6), 0 0 12px rgba(var(--glow-red), 0.35);
    z-index:2;
  }

  .tile .cover{ width:100%; aspect-ratio:1/1; overflow:hidden; position:relative; }
  .tile .cover img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;}
  .tile:not(.micro) .cover{ padding:6px; box-sizing:border-box; }
  .tile:not(.micro) .cover img{ border-radius:10px; }
  .tile .cover .favorite-heart{
    position:absolute;
    top:10px;
    right:10px;
    font-size:1em;
    line-height:1;
    pointer-events:none;
    z-index:1;
  }
  .context-icon{position:absolute;right:10px;bottom:10px;width:clamp(14px, calc(var(--tile) * 0.16), 20px);height:clamp(14px, calc(var(--tile) * 0.16), 20px);background:url('img/mouse-right-button.svg') center/contain no-repeat;opacity:0.8;pointer-events:none;}
  .context-icon-flip{transform:scaleX(-1);transform-origin:center;}
  .context-icon-stat{position:absolute;top:8px;right:8px;width:16px;height:16px;}
  .tile .cover .new-icon{
    position:absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height:15%;
    margin: 6px auto;
    padding-inline: 6px;
    box-sizing: border-box;
    pointer-events:none;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
  }
  .tile .cover .ranking-cover-mark{
    position:absolute;
    right:0;
    bottom:0;
    width:28px;
    height:28px;
    object-fit:contain;
    pointer-events:none;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75)) contrast(1.3);
    z-index:2;
  }
  .tile .cover .djclass-test-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:clamp(18px, calc(var(--tile) * 0.48), 40px);
    font-weight:800;
    letter-spacing:0.12em;
    color:rgba(160,160,160,0.5);
    text-transform:uppercase;
    pointer-events:none;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
  }
  .tile .cover .djclass-need-label{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:clamp(18px, calc(var(--tile) * 0.48), 40px);
    font-weight:800;
    letter-spacing:0.08em;
    color:rgba(240,240,240,0.85);
    text-transform:uppercase;
    pointer-events:none;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,0.6);
  }

  /* 오버레이(층/점수) */
  .tile .overlay-info{
    position:absolute; inset:0; display:none;
    flex-direction:column; justify-content:flex-end; align-items:flex-start;
    padding:4px 5px; gap:2px;
    color:#fff; font-weight:800; line-height:1.05; text-align:left; pointer-events:none;
    text-shadow:
      0 0 2px rgba(0,0,0,.9),
      0 0 4px rgba(0,0,0,.9),
      1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
      1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000;
  }
  .tile .overlay-info .ov-floor{ font-size: clamp(8px, calc(var(--tile) * 0.25), 16px); }
  .tile .overlay-info .ov-rec  { font-size: clamp(8px, calc(var(--tile) * 0.24), 15px); }

  /* 모드 규칙 */
  .tile .meta-wrap{ padding:8px 8px 10px; display:flex;flex-direction:column;gap:3px; position:relative;justify-content: space-between;}
  .tile .meta-header{ display:flex; align-items:center; gap:6px; min-width:0; }
  .tile .meta-favorite{
    position:absolute;
    top:6px;
    right:6px;
    display:flex;
    pointer-events:none;
  }
  .tile .meta-favorite .favorite-heart{
    font-size:1.1em;
    line-height:1;
  }
  .djclass-focus .tile.djclass-focus-dim{
    opacity:0.35;
    filter:brightness(0.6) saturate(0.7);
  }
  .tile.micro .meta-wrap{ display:none; }
  .tile.micro .overlay-info{ display:none !important; }
  .tile.micro .badge{ display:none !important; }

  /* 가로 타일 */
  .tile.horizontal{
    flex-direction:row;
    align-items:stretch;
  }
  .tile.horizontal .cover{
    width:30%;
    flex:0 0 auto;
    border-bottom:none;
  }
  .tile.horizontal .meta-wrap{
    flex:1;
    min-width:0;
    padding:10px 12px;
  }
  .tile.horizontal .meta-header{ padding-right:26px; }
  .tile .dlc-info{ display:none; font-size:11px; color:#9aa4af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tile.horizontal .dlc-info{ display:block; }

  /* Micro: 점수 오버레이 */
  .micro-score-on .tile.micro .overlay-info{
    display:flex !important;
    justify-content:flex-end;
    align-items:center;
    padding:3px 4px;
  }
  .micro-score-on .tile.micro .overlay-info .ov-floor{ display:none !important; }
  .micro-score-on .tile.micro .overlay-info .ov-rec{
    font-size: 10px;
    line-height:1;
    background: rgba(0,0,0,.35);
    padding:2px 4px;
    border-radius:4px;
  }

  /* Micro */
  .micro-rank-on .tile.micro .badge{
    display:inline-block !important;
    top:4px; left:4px;
    right:auto; bottom:auto;
    padding: 1px 4px;
    font-size: 9px;
    background: rgba(0,0,0,.55);
  }

  /* Micro(난이도/층) */
  .tile .micro-badge{
    display:inline-block;
    position:absolute;
    right:4px; top:4px;
    left: auto; bottom: auto;
    display:none;
    padding:1px 4px;
    border-radius:99px;
    font-size: 9px;
    background: rgba(0,0,0,.55);
    color:#fff;
    text-shadow:
      0 0 2px rgba(0,0,0,.9),
      0 0 4px rgba(0,0,0,.9);
    pointer-events:none;
  }
  .micro-label-on .tile.micro .micro-badge{ display:inline-flex; }

  /* 난이도 색상 */
  .tile .micro-badge.diff-NM,
  .tile .badge.diff-NM{ color:#ffd95e; }
  .tile .micro-badge.diff-HD,
  .tile .badge.diff-HD{ color:#ff9f43; }
  .tile .micro-badge.diff-MX,
  .tile .badge.diff-MX{ color:#ff5252; }
  .tile .micro-badge.diff-SC,
  .tile .badge.diff-SC{ color:#b678ff; }

  /* 보고서 타일에서는 난이도 마이크로 배지를 숨깁니다. */
  #report-modal .tile .micro-badge[class*="diff-"],
  #report-guide-modal .tile .micro-badge[class*="diff-"]{ display:none !important; }

  /* 기본 순위 배지(좌상단) */
  .badge{
    position:absolute;top:9px;left:9px;background:rgba(0,0,0,.5);color:#fff;
    outline: 1px solid #000;
    padding: 0 4px;border-radius:999px;
    font-size: clamp(6px, calc(var(--tile) * 0.18), 9px);
    font-weight: 800;
    min-width: 7px;
    text-align: center;
  }
  .badge .new-label{ color:#ffd95e; }

  .tile .title{ color:#fff; font-size:13px; font-weight:800; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tile .artist{font-size:11px;color:#9aa4af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* 점수 잘림 방지용 그리드 */
  .tile .subrow{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    font-size: clamp(9px, calc(var(--tile) * 0.105), 11px);
    column-gap: clamp(4px, calc(var(--tile) * 0.06), 10px);
    min-width:0;
    color:#cfe3ff;
  }
  .tile .subrow .subrow-djpower-new{
    color:#ffd95e;
  }
  .tile .subrow span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .tile .subrow span:last-child{ white-space:nowrap; }

  .skeleton{background:linear-gradient(90deg,#1b2230,#222c3d 50%,#1b2230);background-size:200% 100%;animation:sh 1.1s linear infinite;border-radius:var(--radius);width:100%;aspect-ratio:1/1}
  @keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

  /* 모달 */
  .overlay{position:fixed;inset:0;background:var(--overlay);display:none;opacity:0;transition:opacity .2s ease}
  .overlay.show{display:block;z-index:2;opacity:1}
  .modal{position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);max-height:85vh;overflow:auto;background:#10151d;border:1px solid #273349;border-radius:12px;z-index:2;display:none}
  .modal[aria-labelledby="modal-title"]{min-width:35vw;}
  .modal.show{display:block}
  .modal header{position:sticky;top:0;z-index:10;background:#0f141c;border-bottom:1px solid #273349;padding:12px 16px;display:flex;gap:8px;align-items:center;flex-direction:row;margin-bottom:0;flex-wrap:nowrap}
  .modal .content{padding:16px;display:grid;grid-template-columns:240px 1fr;gap:16px}
  .modal .content.settings-content{display:flex;flex-direction:column;gap:12px;}
  .modal .content.settings-content .settings-button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .modal .content.settings-content .settings-button-grid>button{width:100%;}
  #djclassNeed-modal{width:min(1200px, 94vw);}
  #djclassNeed-modal .djclass-need-content{display:flex;flex-direction:column;gap:12px;}
  #djclassNeed-modal .djclass-need-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  #djclassNeed-modal .djclass-need-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:var(--gap);}
  #djclassNeed-modal .djclass-need-empty{padding:16px;border:1px dashed #3a4b66;border-radius:10px;text-align:center;color:var(--muted);}
  .loading-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,14,20,0.6);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:9999;}
  .loading-overlay.show{opacity:1;pointer-events:auto;}
  .loading-overlay .loader{
    width:4rem;
    height:4rem;
    border-radius:50%;
    box-sizing:border-box;
    border-top:8px solid #fff;
    border-left:8px solid #fff;
    border-right:8px solid #ff00;
    animation:loader .7s infinite linear;
  }
  @keyframes loader{
    to{transform:rotate(360deg);}
  }
  body.loading-active #appRoot{filter:blur(6px);}
  .djclass-test-startup-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
  #gameModal{width:min(420px,94vw);}
  .modal .content.game-modal-content{display:flex;flex-direction:column;gap:12px;}
  .game-modal-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .game-modal-actions>button{flex:1 1 140px;}
  #report-modal{--tile:110px;width:min(820px,94vw);}
  #report-modal .content{display:flex;flex-direction:column;gap:20px;}
  #report-modal .content.report-capture-bg{background:#0f141c;}
  #report-guide-modal .content.report-capture-bg{background:#0f141c;}
  #report-modal .report-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;}
  #report-modal .report-top-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-weight:700;font-size:clamp(24px,3.2vw,36px);}
  #report-modal .report-top-left .report-button{font-size:0.5em;opacity:0.8;letter-spacing:0.08em;text-transform:uppercase;}
  #report-modal .report-top-right{margin-left:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end;--report-info-size:clamp(12px,1.5vw,18px);font-size:var(--report-info-size);flex-wrap: wrap;}
  #report-modal .report-top-right .tier-info{font-size:inherit;}
  #report-modal .report-tier{display: block;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
  #report-modal .report-tier,
  #report-modal .report-djclass{font-size:inherit;}
  #report-modal .report-djclass{text-align:right;}
  #report-modal .report-djclass .djclass-score-stack{align-items:flex-end;}
  #report-modal .report-djclass .djclass-name{font-size:1em;font-family: 'PyeongChangPeace';text-shadow: 0.5px 0.5px 3px gray;}
  #report-modal .report-djclass .djclass-score{font-weight:400;font-size:1em;}
  #report-modal .report-djclass-group{display:flex;flex-direction:column;gap:4px;align-items:flex-end;}
  #report-modal .report-djclass-meta{font-size:12px;color:var(--muted);text-align:right;}
  #report-modal .report-djclass-container{display:flex;flex-direction:column;gap:20px;}
  #report-modal .report-djclass-body{display:flex;flex-direction:column;gap:24px;}
  #report-modal .report-djclass-gauge{display:flex;flex-direction:column;gap:12px;}
  #report-modal .report-djclass-gauge-track{position:relative;display:flex;align-items:stretch;height:64px;border-radius:22px;overflow:hidden;background:linear-gradient(90deg, rgba(39, 51, 73, 0.75), rgba(39, 51, 73, 0.4), rgba(39, 51, 73, 0.75));}
  #report-modal .report-djclass-gauge-track::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(111,111,111,0.5);transform:translateX(-50%);}
  #report-modal .report-djclass-gauge-half{position:relative;flex:1;display:flex;align-items:center;}
  #report-modal .report-djclass-gauge-half.basic{justify-content:flex-end;padding-right:18px;}
  #report-modal .report-djclass-gauge-half.new{justify-content:flex-start;padding-left:18px;}
  #report-modal .report-djclass-gauge-fill{position:absolute;top:0;bottom:0;width:0;background:linear-gradient(90deg,#3d8bfd,#1e5fbf);transition:width 0.3s ease;}
  #report-modal .report-djclass-gauge-half.basic .report-djclass-gauge-fill{left:0;border-top-right-radius:0;border-bottom-right-radius:0;}
  #report-modal .report-djclass-gauge-half.new .report-djclass-gauge-fill{right:0;border-top-left-radius:0;border-bottom-left-radius:0;background:linear-gradient(270deg,#ff8ba7,#d94f70);}
  #report-modal .report-djclass-gauge-fill[data-overflow="1"]{box-shadow:0 0 14px rgba(255,255,255,0.35);}
  #report-modal .report-djclass-gauge-label{position:relative;color:#fff;font-size:20px;margin-inline: auto;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,0.4);}
  #report-modal .report-djclass-gauge-sums{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);font-weight:500;}
  #report-modal .report-djclass-tiles{display:grid;grid-template-columns: auto auto;gap:20px;justify-content: space-around;}
  #report-modal .report-djclass-category{flex:1 1 240px;display:flex;flex-direction:column;gap:12px;}
  #report-modal .report-djclass-category-title{font-size:16px;font-weight:700;}
  #report-modal .report-djclass-category .report-tile-list{gap:12px;}
  #report-modal .report-djclass-category .tile{width:var(--tile);}
  #report-modal .report-djclass-gauge-sum .djclass-target-current{font-size:15px;font-weight:700;color:#ffd54f;}
  #report-modal .report-djclass-gauge-sum{text-transform:uppercase;letter-spacing:0.04em;}
  #report-modal .report-djclass-container .report-empty{margin-top:8px;}
  #report-modal .report-djclass-empty-list{color:var(--muted);font-size:12px;padding:8px 0;}
  #report-modal .report-djclass-chart-section{display:flex;flex-direction:column;gap:12px;}
  #report-modal .report-djclass-chart-title{font-size:16px;font-weight:700;}
  #report-modal .report-djclass-chart-wrap{height:220px;padding:2px;box-sizing:border-box;}
  @media (max-width:640px){
    #report-modal .report-djclass-gauge-track{height:56px;}
    #report-modal .report-djclass-gauge-label{font-size:1em;}
    #report-modal .report-djclass-gauge-half.basic{padding-right:12px;}
    #report-modal .report-djclass-gauge-half.new{padding-left:12px;}
  }
  #report-modal .report-top-right .tier-name{font-family: 'PyeongChangPeace';text-shadow: 0.5px 0.5px 3px gray;}
  #report-modal .report-top-right .tier-point,
  #report-modal .report-top-right .tier-label{font-size:inherit !important;}
  #report-modal .report-divider{border-color:#273349;opacity:0.75;margin:4px 0;width: 100%;}
  #report-modal .report-section h3{margin:0 0 8px 0;font-size:18px;}
  #report-modal .report-chart-wrap{position:relative;width:100%;height:260px;}
  #report-modal #reportFloorChart{width:100%;height:100%;}
  #report-modal .report-empty{display:flex;align-items:center;justify-content:center;padding:24px;border:1px dashed #273349;border-radius:8px;color:var(--muted);font-size:14px;}
  #report-modal .report-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
  #report-modal .report-stat{background:#151a22;border:1px solid #273349;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px;position:relative;}
  #report-modal .report-stat .label{font-size:10px;color:var(--muted);letter-spacing:0.02em;}
  #report-modal .report-stat .value{font-size:18px;font-weight:700;}
  #report-modal .report-highlights{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;}
  #report-modal .report-tile-list{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
  #report-modal .report-tile-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--tile);}
  #report-modal .report-tile-wrap .tile{width:var(--tile);}
  #report-modal .report-tile-label{font-weight:500;font-size:12px;text-align:center;line-height:1;inline-size:130px;}
  #report-modal.report-horizontal-tiles .report-tile-list{align-items:stretch;}
  #report-modal.report-horizontal-tiles .report-tile-wrap{width:min(360px, 100%);align-items:stretch;}
  #report-modal.report-horizontal-tiles .tile.horizontal{width:100%;}
  #report-modal.report-horizontal-tiles .report-tile-label{inline-size:auto;width:100%;text-align:left;line-height:1.2;font-size:11px;color:var(--muted);margin-top:auto;}
  #report-modal.report-horizontal-tiles .report-djclass-tiles{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
  #report-modal.report-horizontal-tiles .report-djclass-category .tile{width:100%;}
  #report-modal .report-history-section{display:flex;flex-direction:column;gap:16px;}
  #report-modal .report-delta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
  #report-modal .report-delta-card{background:var(--bg);border:1px solid #273349;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px;}
  #report-modal .report-delta-card .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
  #report-modal .report-delta-card .value{font-size:24px;font-weight:700;}
  #report-modal .report-delta-card .value.trend-up{color:#5ee7a1;}
  #report-modal .report-delta-card .value.trend-down{color:#ff8ba7;}
  #report-modal .report-history-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
  #report-modal .report-history-chart-block{display:flex;flex-direction:column;gap:8px;}
  #report-modal .report-history-chart-title{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
  #report-modal .report-history-chart{position:relative;height:220px;padding:12px;border-radius:10px;border:1px solid #273349;background:var(--bg);}
  #report-modal .report-history-chart canvas{width:100%;height:100%;}
  #report-modal .report-today-section{display:flex;flex-direction:column;gap:12px;}
  #report-modal .report-today-section h3{margin:0;font-size:18px;}
  #report-modal #reportTodayList{display:flex;flex-wrap:wrap;gap:12px;}
  #report-modal #reportTodayList .tile{width:var(--tile);}
  #report-modal .report-history-empty{font-size:12px;color:var(--muted);}
  #report-modal .report-ability-column{display:flex;flex-direction:column;gap:12px;min-width:180px;flex:1 1 180px;}
  #report-modal .report-ability-card{background:#151a22;border:1px solid #273349;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;}
  #report-modal .report-ability-card .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
  #report-modal .report-ability-card .value{font-size:18px;font-weight:700;}
  #report-modal .report-guide{display:flex;flex-direction:column;gap:20px;}
  #report-modal .report-guide-groups{display:flex;flex-direction:column;gap:20px;align-self:center;}
  #report-modal .report-guide-group{display:flex;flex-direction:column;gap:8px;}
  #report-modal .report-guide-group h3{margin:0;font-size:18px;}
  #report-modal .report-guide-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  #report-modal .report-guide-include-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  #report-modal .report-guide-checkbox{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
  #report-modal .report-guide-checkbox input{accent-color:#5ee7a1;}
  #report-modal .report-guide-dj-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;}
  #report-modal .report-guide-dj-controls input{width:6em;}
  #report-modal .report-guide-dj-controls button{height:2.4em;}
  #report-modal .report-guide-description{font-size:12px;color:var(--muted);}
  #report-modal .report-guide-status{font-size:12px;min-height:1.5em;}
  #report-modal .report-guide-empty{padding:12px 0;color:var(--muted);font-size:12px;}
  #report-guide-modal{--tile:110px;width:min(900px,96vw);}
  #report-guide-modal .content{display:flex;flex-direction:column;gap:20px;}
  #report-guide-modal .report-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;}
  #report-guide-modal .report-top-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-weight:700;font-size:clamp(24px,3.2vw,36px);}
  #report-guide-modal .report-top-left .report-button{font-size:0.5em;opacity:0.8;letter-spacing:0.08em;text-transform:uppercase;}
  #report-guide-modal .report-top-right{margin-left:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-end;--report-info-size:clamp(12px,1.5vw,18px);font-size:var(--report-info-size);flex-wrap:wrap;}
  #report-guide-modal .report-top-right .tier-info{font-size:inherit;}
  #report-guide-modal .report-tier{display:block;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
  #report-guide-modal .report-tier,
  #report-guide-modal .report-djclass{font-size:inherit;}
  #report-guide-modal .report-djclass{text-align:right;}
  #report-guide-modal .report-djclass .djclass-score-stack{align-items:flex-end;}
  #report-guide-modal .report-djclass .djclass-name{font-size:1em;font-family:'PyeongChangPeace';text-shadow:0.5px 0.5px 3px gray;}
  #report-guide-modal .report-djclass .djclass-score{font-weight:400;font-size:1em;}
  #report-guide-modal .report-djclass-group{display:flex;flex-direction:column;gap:4px;align-items:flex-end;}
  #report-guide-modal .report-djclass-meta{font-size:12px;color:var(--muted);text-align:right;}
  #report-guide-modal .report-top-right .tier-name{font-family:'PyeongChangPeace';text-shadow:0.5px 0.5px 3px gray;}
  #report-guide-modal .report-top-right .tier-point,
  #report-guide-modal .report-top-right .tier-label{font-size:inherit !important;}
  #report-guide-modal .report-guide{display:flex;flex-direction:column;gap:20px;}
  #report-guide-modal .report-guide-groups{display:flex;flex-direction:column;gap:20px;align-self:center;}
  #report-guide-modal .report-guide-group{display:flex;flex-direction:column;gap:8px;width:100%;}
  #report-guide-modal .report-guide-group h3{margin:0;font-size:18px;}
  #report-guide-modal .report-guide-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  #report-guide-modal .report-guide-include-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  #report-guide-modal .report-guide-checkbox{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
  #report-guide-modal .report-guide-checkbox input{accent-color:#5ee7a1;}
  #report-guide-modal .report-guide-dj-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;}
  #report-guide-modal .report-guide-dj-controls input{width:6em;}
  #report-guide-modal .report-guide-dj-controls button{height:2.4em;}
  #report-guide-modal .report-guide-description{font-size:12px;color:var(--muted);}
  #report-guide-modal .report-guide-status{font-size:12px;min-height:1.5em;}
  #report-guide-modal .report-guide-empty{padding:12px 0;color:var(--muted);font-size:12px;}
  #report-guide-modal .report-guide-goal{display:flex;flex-direction:column;gap:16px;}
  #report-guide-modal .report-guide-goal-summary{display:flex;flex-direction:column;gap:12px;}
  #report-guide-modal .report-guide-goal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
  #report-guide-modal .report-guide-goal-header-main{display:flex;flex-direction:column;gap:4px;}
  #report-guide-modal .report-guide-goal-sort{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-left:auto;flex-wrap:wrap;}
  #report-guide-modal .report-guide-goal-sort-label{font-size:12px;color:var(--muted);white-space:nowrap;}
  #report-guide-modal .report-guide-goal-sort-button{height:2.2em;padding:4px 10px;font-size:12px;border-radius:999px;white-space:nowrap;}
  #report-guide-modal .report-guide-goal-meta{font-size:12px;color:var(--muted);}
  #report-guide-modal .report-guide-goal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
  #report-guide-modal .report-guide-goal-djpower{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid #273349;border-radius:10px;padding:10px 12px;}
  #report-guide-modal .report-guide-goal-djpower-header{display:flex;align-items:center;gap:10px;}
  #report-guide-modal .report-guide-goal-djpower-actions{margin-left:auto;display:flex;align-items:center;gap:10px;}
  #report-guide-modal .report-guide-goal-djpower-category{font-size:12px;color:var(--muted);}
  #report-guide-modal .report-guide-goal-djpower-content{display:flex;flex-direction:column;gap:8px;}
  #report-guide-modal .report-guide-goal-djpower-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;}
  #report-guide-modal .report-guide-goal-djpower-title{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;}
  #report-guide-modal .report-guide-goal-djpower-title strong{color:var(--fg);}
  #report-guide-modal .report-guide-goal-djpower-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;padding-inline: 5px;border-radius:10px;box-shadow: 0 0 3px #7c89b7;}
  #report-guide-modal .report-guide-goal-djpower-table th,
  #report-guide-modal .report-guide-goal-djpower-table td{padding:4px 6px;text-align:left;}
  #report-guide-modal .report-guide-goal-djpower-table th{color:var(--muted);font-weight:600;}
  #report-guide-modal .report-guide-goal-djpower-table .muted{color:var(--muted);}
  .btn-class-name {
    --primary: 255, 90, 120;
    --secondary: 150, 50, 60;
    width: 24px;
    height: 20px;
    border: none;
    outline: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    outline: 5px solid rgb(var(--primary), .5);
    border-radius: 100%;
    position: relative;
    transition: .3s;
  }

  .btn-class-name.is-new {
    --primary: 255, 210, 0;
    --secondary: 179, 123, 0;
  }

  .btn-class-name .back {
    background: rgb(var(--secondary));
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .btn-class-name .front {
    background: linear-gradient(0deg, rgba(var(--primary), .6) 20%, rgba(var(--primary)) 50%);
    box-shadow: 0 .5em 1em -0.2em rgba(var(--secondary), .5);
    border-radius: 100%;
    position: absolute;
    border: 1px solid rgb(var(--secondary));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: inherit;
    transform: translateY(-15%);
    transition: .15s;
    color: rgb(var(--secondary));
  }

  .btn-class-name:active .front {
    transform: translateY(0%);
    box-shadow: 0 0;
  }
  #report-guide-modal .report-guide-goal-stat{background:var(--card);border:1px solid #273349;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
  #report-guide-modal .report-guide-goal-stat .label{font-size:12px;color:var(--muted);}
  #report-guide-modal .report-guide-goal-stat .value{font-weight:700;font-size:16px;}
  @media (max-width:679px){
    #report-guide-modal .report-guide-goal-stat--result{grid-column:1 / -1;}
  }
  #report-guide-modal.goal-mode .report-guide-include-row,
  #report-guide-modal.goal-mode .report-guide-groups{display:none;}
  #report-guide-modal.goal-mode #reportGuideGoalMode{display:flex;}
  #reportGuideGoalMode.hidden{display:none;}
  #report-guide-modal .report-tile-list{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
  #report-guide-modal .report-tile-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--tile);}
  #report-guide-modal .report-tile-wrap .tile{width:var(--tile);}
  #report-guide-modal .report-tile-label{font-weight:500;font-size:12px;text-align:center;line-height:1;inline-size:130px;color:var(--muted);}
  #report-guide-modal .report-tile-label .report-guide-emphasis{font-weight:700;color:var(--fg);}
  #report-guide-modal.report-horizontal-tiles .report-tile-list{align-items:stretch;}
  #report-guide-modal.report-horizontal-tiles .report-tile-wrap{width:min(360px, 100%);align-items:stretch;}
  #report-guide-modal.report-horizontal-tiles .tile.horizontal{width:100%;}
  #report-guide-modal.report-horizontal-tiles .report-tile-label{inline-size:auto;width:100%;text-align:left;line-height:1.2;font-size:11px;color:var(--muted);margin-top:auto;}
  #report-guide-include-toggle,
  #lowScoreZeroToggle{
    border: 1px solid #599795;
    color: #b3ffe7;
    background: #163b2d;
    border-radius: 99px;
  }
  #report-guide-include-toggle:not(.active),
  #lowScoreZeroToggle:not(.active){
    border: 1px solid #975959;
    color: #ffb3b3;
    background: #3b2716;
    border-radius: 99px;
  }
  .grid-top-controls{
    display:flex;
    align-items:center;
    gap:8px;
    margin:12px var(--hpad) 0;
  }
  @media (min-width:900px){
    #report-modal .report-guide-groups{flex-direction:column;align-items:flex-start;}
    #report-modal .report-guide-group{flex:1 1 0;}
    #report-guide-modal .report-guide-groups{flex-direction:column;align-items:flex-start;}
    #report-guide-modal .report-guide-group{flex:1 1 0;}
  }
  .muted{color:#9aa4af}
  .cover-lg{border-radius:8px;overflow:hidden;}
  .cover-lg img{width:100%;height:auto;display:block}
  #modal .content{grid-template-columns:1fr;}
  #modal{background:transparent;border:0;}
  #modal header{
    border:1px solid #273349;
    border-bottom:1px solid #273349;
    border-radius: 12px 0 0 0;
  }
  #modal .content{
    background:#10151d;
    border:1px solid #273349;
    border-top:0;
    border-radius:0 0 12px 12px;
  }
  #modal-sub{white-space:normal;word-break:keep-all;overflow-wrap:break-word;}
  .modal header .cover-sm{width:48px;height:48px;border-radius:6px;overflow:hidden;flex:0 0 auto;background:#1c2432;}
  .modal header .cover-sm img{width:100%;height:100%;object-fit:cover;display:block;}

  table{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
  th,td{padding:8px;border-bottom:1px solid #273349;text-align:center}
  #modal-table th,#modal-table td{white-space:nowrap}
  #modal-table .modal-diff-link{color:inherit;text-decoration:none;}
  #modal-table .modal-diff-link:hover{text-decoration:underline;}
  .close{
    margin-left:auto;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    background-color:transparent;
    background-image:url('img/close-button.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    cursor:pointer;
    text-indent:-9999px;
    overflow:hidden;
    white-space:nowrap;
  }
  .modal-actions{margin-left:auto;display:flex;align-items:center;gap:15px;}
  #modal .modal-actions{
    justify-content:center;
    width:240px;
    padding:3px 10px 0;
    background:#0f141c;
    border:1px solid #273349;
    border-bottom:0;
    border-radius:12px 12px 0 0;
    box-sizing:border-box;
  }
  .modal-actions .close{margin-left:0;}
  .copy{
    --button-text-color:#CCCCCC;
    --button-hover-text-color:#8bb9fe;
    --button-border-radius:5px;
    --button-diameter:26px;
    --button-outline-width:1px;
    --button-outline-color:rgb(141, 141, 141);
  }

  .copy{
    box-sizing:border-box;
    width:var(--button-diameter);
    height:var(--button-diameter);
    border-radius:var(--button-border-radius);
    background-color:transparent;
    color:var(--button-text-color);
    border:none;
    cursor:pointer;
    position:relative;
    outline:none;
    padding:0;
  }

  .copy svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }

  .checkmark{
    display:none;
  }

  /* actions */
  .copy:focus:not(:focus-visible) .clipboard{
    display:none;
  }

  .copy:focus:not(:focus-visible) .checkmark{
    display:block;
  }

  .copy:hover,
  .copy:focus{
    background-color:transparent;
  }

  .copy:active{
    outline:var(--button-outline-width) solid var(--button-outline-color);
  }

  .copy:hover svg{
    color:var(--button-hover-text-color);
  }
  #ranking-image-modal{--tile:110px;--ranking-gap:12px;width:min(900px,95vw);}
  #ranking-image-modal .content{display:flex;flex-direction:column;gap:16px;}
  #ranking-image-modal .tile .meta-wrap{min-width:0;}
  #ranking-image-modal .tile .title{display:block;min-width:0;}
  #ranking-image-content{position:relative;overflow:hidden;background:var(--bg);border:1px solid #273349;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;}
  #ranking-image-content::before{content:"";position:absolute;inset:0;background-image:var(--bg-image);background-size:var(--bg-size);background-position:center;background-repeat:no-repeat;opacity:var(--bg-opacity);pointer-events:none;z-index:0;}
  #ranking-image-content > *{position:relative;z-index:1;}
  #ranking-image-top{
    display:flex;
    align-items:flex-end;
    gap:16px;
    flex-wrap: wrap;
    justify-content:space-between;
    width:calc((var(--tile) * 6) + (var(--ranking-gap) * 5));
    max-width:100%;
    margin:0 auto;
    background-color: #0000004f;
    padding: 7px 15px;
    border-radius: 10px;
  }
  #ranking-image-stats{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    width: calc((var(--tile) * 6) + (var(--ranking-gap) * 5));
    max-width: 100%;
    margin: 0 auto;
  }
  #ranking-image-stats .report-stat{
    background:var(--card);
    border:1px solid #273349;
    border-radius:8px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:4px;
    position:relative;
  }
  #ranking-image-stats .report-stat .label{
    font-size:10px;
    color:var(--muted);
    letter-spacing:0.02em;
  }
  #ranking-image-stats .report-stat .value{
    font-size:18px;
    font-weight:700;
  }
  #reportGuideTier .tier-badge{height: 2.5em;}
  #reportGuideDjClass .djclass-badge{height: 2em;}
  #ranking-image-title{display:flex;flex-direction:column;align-items:flex-start;font-weight:700;}
  #ranking-image-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
  #rankingImageNickname{font-size:28px;text-shadow: 0.5px 0.5px 3px gray;}
  .capture-nickname-blur{
    color:transparent;
    text-shadow:0 0 10px rgba(255,255,255,0.8);
  }
  #ranking-image-sort{font-size:10px;font-weight:400;letter-spacing:0.02em;white-space:nowrap;color:#DEDEDE;}
  #rankingImageButton{font-size:20px;opacity:0.8;letter-spacing:0.08em;text-transform:uppercase;}
  #ranking-image-meta{display:flex;flex-direction:column;align-items:flex-end;font-size:clamp(16px,2vw,24px);}
  #ranking-image-meta .tier-info{font-size:inherit;font-family:'Pretendard',system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;}
  #ranking-image-meta .report-djclass{font-size:inherit;text-align:right;font-family:'Pretendard',system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;}
  #ranking-image-meta .tier-name,
  #ranking-image-meta .djclass-name{font-size:20px;font-weight:800;font-family:'Pretendard',system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;text-shadow: 0.5px 0.5px 3px gray;}
  #ranking-image-meta .tier-score,
  #ranking-image-meta .tier-point,
  #ranking-image-meta .report-djclass .djclass-score{color:white; font-weight:400;font-size:16px;}
  #ranking-image-meta .tier-badge{width:38px;height:38px;vertical-align:middle;margin-right:8px;}
  #ranking-image-meta .djclass-badge{width:30px;height:30px;vertical-align:middle;margin-right:8px;}
  .profile-image-meta .report-djclass .djclass-info-text,
  .profile-image-meta .report-djclass .djclass-score-stack{
    align-items:flex-start;
  }
  #ranking-image-timestamp{
    position:absolute;
    right:6px;
    bottom:1px;
    font-size:10px;
    font-weight:600;
    letter-spacing:0.1em;
    color:#ffffff3b;
    z-index:2;
    pointer-events:none;
  }
  #ranking-image-tiles{display:grid;grid-template-columns:repeat(6,var(--tile));gap:var(--ranking-gap);justify-content:center;}
  #ranking-image-tiles .tile{width:var(--tile);pointer-events:none;}
  #ranking-image-tiles .tile.micro .meta-wrap{display:flex !important;}
  #ranking-image-tiles .tile.micro .overlay-info{display:flex !important;}
  #ranking-image-tiles .tile.micro .badge{display:flex !important;}
  #ranking-image-tiles .tile.micro .micro-badge{display:none !important;}
  #ranking-image-tiles .ranking-cover-mark{
    position:absolute;
    right:0;
    bottom:0;
    width:26px;
    height:26px;
    object-fit:contain;
    pointer-events:none;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75)) contrast(1.3);
  }
  #ranking-image-tiles .ranking-image-empty{background:#121923;border:1px dashed #273349;border-radius:10px;height:calc(var(--tile) + 80px);}
  #ranking-image-modal.djclass{width:min(calc((var(--tile) * 10) + (var(--ranking-gap) * 9) + 180px), 98vw);}
  #ranking-image-modal.djclass #ranking-image-top{
    width:calc((var(--tile) * 10) + (var(--ranking-gap) * 9));
  }
  #profile-image-modal{--tile:110px;width:960px;max-width:95vw;}
  #profile-image-modal .content{display:flex;flex-direction:column;gap:16px;}
  #profile-image-content{position:relative;overflow:hidden;background:var(--bg);border:1px solid #273349;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;}
  #profile-image-content::before{content:"";position:absolute;inset:0;background-image:var(--bg-image);background-size:var(--bg-size);background-position:center;background-repeat:no-repeat;opacity:var(--bg-opacity);pointer-events:none;z-index:0;}
  #profile-image-content > *{position:relative;z-index:1;}
  #profile-image-top{
    border-radius: 10px;
    border: 1px solid #273349;
    background: #0000003b;
    display:flex;
    align-items:end;
    flex-wrap:wrap;
    gap:12px;
    padding:10px 15px;
    color: #f3f3f3;
  }
  #profile-total-score{
    margin-left:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
    text-align:right;
  }
  .profile-total-score-label{
    font-size:11px;
    color:var(--muted);
    letter-spacing:0.02em;
  }
  .profile-total-score-value{
    display:flex;
    align-items:flex-end;
    gap:4px;
    font-weight:700;
  }
  .profile-total-score-current{
    color: #ffb300;
    text-shadow: 0 0 3px #c77000cf;
    font-size:26px;
    line-height:1;
  }
  .profile-total-score-divider,
  .profile-total-score-max{
    font-size:12px;
    color:var(--muted);
    font-weight:500;
  }
  #profileImageNickname{position:relative;top:4px;font-size:28px;font-family:'PyeongChangPeace','Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;text-shadow: 0.5px 0.5px 3px gray;}
  #profile-image-sections{display:flex;flex-direction:column;gap:16px;}
  .profile-image-section{
    position:relative;
    display:grid;
    grid-template-columns:minmax(380px, 1fr) minmax(240px, 2fr) minmax(180px, 1fr);
    gap:12px;
    align-items:center;
    padding:18px 12px 12px;
    border-radius:12px;
    border:1px solid #273349;
    background:#0000006e;
  }
  .profile-button-info{display:flex;gap:12px;align-items:flex-start;}
  .profile-button-label{
    position:absolute;
    top:6px;
    left:12px;
    font-size:22px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .profile-image-meta{display:flex;flex-direction:column;gap:6px;font-size:16px;white-space:nowrap;}
  .profile-image-meta .tier-info{font-size:inherit;font-family:'Pretendard',system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;}
  .profile-image-meta .report-djclass{font-size:inherit;font-family:'Pretendard',system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,sans-serif;}
  .profile-image-meta .tier-name,
  .profile-image-meta .djclass-name{font-size:18px;font-weight:800;font-family:'PyeongChangPeace';text-shadow: 0.5px 0.5px 3px #000000;position:relative;top:5px;}
  .profile-image-meta .tier-score,
  .profile-image-meta .tier-point,
  .profile-image-meta .report-djclass .djclass-score{color:var(--fg);font-weight:400;font-size:14px;}
  .profile-image-meta .tier-badge{width:60px;height:60px;position:relative;top:20px;vertical-align:middle;margin-right:6px;object-fit: contain;}
  .profile-image-meta .djclass-badge{width:45px;height:45px;position:relative;top:20px;vertical-align:middle;margin-right:6px;padding-inline: 7.5px;object-fit: contain;}
  .profile-top-tiles{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
  #profile-image-modal .report-tile-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:var(--tile);}
  #profile-image-modal .report-tile-wrap .tile{width:var(--tile);pointer-events:none;}
  #profile-image-modal .report-tile-label{font-weight:500;font-size:12px;text-align:center;line-height:1;inline-size:130px;color:var(--muted);}
  #profile-image-modal .report-stat{
    background:var(--card);
    border:1px solid #273349;
    border-radius:8px;
    padding: 16px;
    top: -10px;
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative;
  }
  #profile-image-modal .report-stat .label{font-size:10px;color:var(--muted);letter-spacing:0.02em;}
  #profile-image-modal .report-stat .value{font-size:18px;font-weight:700;}
  .profile-section-stats{display:flex;flex-direction:column;gap:10px;}
  .profile-empty-tile{
    width:var(--tile);
    height:calc(var(--tile) + 80px);
    border-radius:10px;
    border:1px dashed #273349;
    background:#121923;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-size:12px;
  }
  #profile-image-timestamp{
    position:absolute;
    right:6px;
    bottom:1px;
    font-size:10px;
    font-weight:600;
    letter-spacing:0.1em;
    color:#ffffff3b;
    z-index:2;
    pointer-events:none;
  }
  #ranking-image-tiles.ranking-image-djclass{
    position:relative;
    display:flex;
    gap: clamp(16px, 3vw, 32px);
    justify-content:center;
    width:calc((var(--tile) * 10) + (var(--ranking-gap) * 9));
    max-width:100%;
    margin:0 auto;
  }
  #ranking-image-tiles.ranking-image-djclass::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:70%;
    width:3px;
    background:rgb(255,208,157,0.8);
    transform:translateX(-0.5px);
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-column{
    display:flex;
    flex-direction:column;
    gap: clamp(12px, 2vw, 18px);
    min-width:0;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-column[data-category="NEW"]{
    margin-left:60px;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-column[data-category="BASIC"]{
    margin-left:12px;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-header{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-weight:700;
    align-items: center;
    background-color: #0000004f;
    border-radius: 10px;
    padding: 5px;
  }
  .djclass-target-column[data-category="BASIC"] .djclass-target-header {
  margin-left: 12px;
}
  #ranking-image-tiles.ranking-image-djclass .djclass-target-title{font-size:18px;}
  #ranking-image-tiles.ranking-image-djclass .djclass-target-sum{
    display:inline-flex;
    align-items:baseline;
    gap:4px;
    font-size:13px;
    font-weight:500;
    color:#d9d9d9;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-ratio{
    margin-left:6px;
    font-size:12px;
    font-weight:600;
    color:#ffd4e1;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-theoretical{
    font-size:13px;
    font-weight:500;
    opacity:0.9;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-current{
    font-size:15px;
    font-weight:700;
    color:#ffd54f;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-list{
    display:grid;
    gap:var(--ranking-gap);
    justify-content:center;
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-column[data-category="BASIC"] .djclass-target-list{
    grid-template-columns:repeat(7,var(--tile));
  }
  #ranking-image-tiles.ranking-image-djclass .djclass-target-column[data-category="NEW"] .djclass-target-list{
    grid-template-columns:repeat(3,var(--tile));
  }
  .djclass-target-list a[data-category="NEW"] .badge,
  #ranking-image-modal.djclass #ranking-image-tiles.ranking-image-djclass .djclass-target-column[data-category="NEW"] .djclass-target-list .badge{
    background:rgba(189,150,0,0.5);
    outline: 1px solid #998800;
  }
  @media (max-width:1400px){
    #ranking-image-modal{width:100vw;}
    #ranking-image-modal .content{align-items:center;}
    #ranking-image-content{transform:scale(0.85);transform-origin:top center;}
    #profile-image-modal{width:100vw;}
    #profile-image-modal .content{align-items:center;}
    #profile-image-content{transform:scale(0.85);transform-origin:top center;}
  }
  .yt-link{display:inline-flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:50%;background:transparent;color:transparent;text-decoration:none;line-height:1;flex-shrink:0;border:0;padding:0;cursor:pointer;font-family:inherit;transition:filter 0.2s ease;}
  .yt-link .yt-icon{display:block;width:100%;height:100%;background:url('img/icon-youtube-w3c.svg') no-repeat center/contain;}
  .yt-link:hover{filter:brightness(1.08);}
  .yt-link:disabled{opacity:0.6;cursor:not-allowed;filter:none;}
  .favorite-playlist-buttons{display:inline-flex;align-items:center;gap:6px;}
  .favorite-playlist-button{width:auto;min-width:2.6em;padding:0 0.65em;border-radius:999px;color:#fff;background:rgba(0,0,0,0.25);gap:0.4em;}
  .favorite-playlist-button .yt-icon{width:1.6em;height:1.6em;}
  .favorite-playlist-button .yt-label{font-size:0.9em;font-weight:600;color:inherit;}
  .favorite-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:2em;align-items:center;background:transparent;cursor:pointer;font-size:1.5em;line-height:1;transition:transform 0.2s ease, box-shadow 0.2s ease;}
  .favorite-toggle:hover{transform:scale(1.05);}
  .favorite-toggle:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
  .b30b{
    padding:12px 19px;
    border:none;
    color:rgb(16, 52, 170);
    cursor:pointer;
    background-color:rgb(190, 219, 253);
    border-radius:20px;
    font-weight:bold;
    transition:0.5s;
    display:flex;
    gap:4px;
    align-items:center;
    font-size:13px;
    box-shadow:rgba(150, 143, 143, 0.2) 0px 2px 8px 0px;
  }

  .b30b:hover{
    background-color:rgb(164, 206, 253);
    box-shadow:rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  }

  .saveicon{
    width:17px;
  }
  #abilityBigButtons{margin-left:auto;display:flex;align-items:center;gap:8px;}
  #abilityBigButtons .close{margin-left:0;}
  #abilityChartBigHelp{width:24px;height:24px;padding:0;border-radius:50%;background:#2b3647;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;}

  /* SC Lv 빨간색 (모달) */
  .sc-lv{ color:#ff4d4d; font-weight:700; }

  /* 15.1/15.2/15.3층 텍스트 글로우 */
  .txt-glow-red{
    color:#e66536;
    -webkit-text-stroke: 0.1px rgba(43, 0, 0. 0.5);
    text-shadow:
    0 0 2px rgba(var(--glow-red), 0.4),
    0 0 4px rgba(var(--glow-red), 0.2);
  }

  /* 반응형 + 모바일 상세(무스크롤) */
  @media (max-width: 1024px){ :root{ --gap: 14px; } }
  @media (max-width: 768px), (orientation: portrait){
    header{ flex-direction: column; align-items: stretch; gap: 10px; }
    .toolbar{ margin-left: 0; }
    .toolbar2{ margin-left: 0; }
    :root{ --gap: 14px; }

    #tierChartWrap{
      flex-direction:column;
      align-items:flex-start;
    }
    #abilityInfo{margin: 8px auto 0;}
    #abilityChartWrap{
      margin:8px auto 0;
      display:flex;
      align-items:center;
      align-self:center;
    }
    #abilityLegend{
      display:block;
      margin-left:8px;
    }
    #report-modal .report-tile-list{justify-content: center;}
    .modal{ 
      width: 96vw;
      max-height: 90vh;
      overflow: auto;
    }
    .modal .content{ grid-template-columns: 1fr; padding:14px; gap:12px; }
    .modal .content.settings-content .settings-button-grid{grid-template-columns:1fr;}


    .cover-lg{ max-width:72%; margin:8px auto 14px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.25); }
    .cover-lg img{ width:100%; height:auto; }
  }
  @media (max-width: 520px){
    :root{ --gap: 12px; }
    .tile .title{ font-size: 12px; }
    .tile .artist{ display:block; font-size:10px; }
    .tile .subrow{ font-size: 10px; }
    .tile.horizontal .meta-wrap .title{ font-size: 14px; }
    .tile.horizontal .meta-wrap .artist{ font-size: 12px; }
    .tile.horizontal .meta-wrap .subrow{ font-size: 12px; }
    .tile.horizontal .meta-wrap .dlc-info{ font-size: 12px; }
  }

  .tile.playlist-selectable{cursor:pointer;}
  .tile.playlist-selected{position:relative;}
  .tile.playlist-selected .song-playlist-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.65);border-radius:inherit;font-weight:700;color:#fff;font-size:clamp(20px, calc(var(--tile) * 0.6), 60px);pointer-events:none;}
  .tile.playlist-selected .song-playlist-overlay span{display:block;line-height:1;}

  /* Songs analysis */
  .songs-analysis-content{display:flex !important;flex-wrap:wrap;gap:16px;align-items:flex-start;max-width:800px;}
  .songs-analysis-grid{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 100%;}
  .songs-analysis-card{flex:1 1 420px;min-width:340px;background:rgba(15,23,42,0);border:1px solid #263042;border-radius:12px;padding:14px;box-shadow:0 6px 14px rgba(0,0,0,0.25);}
  .songs-analysis-card h3{margin:0 0 8px;font-size:16px;}
  .songs-analysis-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
  .songs-analysis-title h3{margin:0;}
  .songs-analysis-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .songs-analysis-toggle{display:flex;gap:6px;flex-wrap:wrap;}
  .songs-analysis-toggle button{padding:4px 10px;border-radius:999px;border:1px solid #2b3545;background:#111827;color:var(--fg);cursor:pointer;font-weight:700;}
  .songs-analysis-toggle button.active{background:var(--accent);color:#04111f;border-color:var(--accent);}
  .songs-analysis-chart{position:relative;height:260px;}
  .songs-analysis-expand-grid{display:grid;gap:10px;}
  .songs-analysis-subcard{background:rgba(15,23,42,0.35);border:1px solid #263042;border-radius:10px;padding:10px;}
  .songs-analysis-subtitle{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
  .songs-analysis-subtitle h4{margin:0;font-size:14px;}
  .songs-analysis-subtitle button{padding:4px 10px;border-radius:8px;border:1px solid #2b3545;background:#111827;color:var(--fg);cursor:pointer;font-weight:700;}
  .songs-analysis-cloud{display:flex;flex-direction:column;gap:6px;}
  .songs-analysis-chip{display:inline-block;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);}
  .songs-analysis-chip--gold{background:linear-gradient(135deg, #f7d774, #ffffff14);color:#111827;border-color:#e2c86b;}
  .songs-analysis-chip--silver{background:linear-gradient(135deg, #e5e7eb, #ffffff14);color:#111827;border-color:#d1d5db;}
  .songs-analysis-chip--bronze{background:linear-gradient(135deg, #f0c7a0, #ffffff14);color:#111827;border-color:#e7b88c;}
  .songs-analysis-empty{color:var(--muted,#7a8595);font-size:14px;}

  /* Playlist */
  #playlistFilters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px;}
  #playlistButtons{display:flex;gap:4px;}
  .songs-playlist-button-wrap{position:relative;display:inline-flex;}
  #songsPlaylistYoutube.active{background:var(--accent);color:#04111f;font-weight:700;}
  .songs-playlist-tooltip{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1a2230;color:var(--fg);padding:8px 12px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.4);white-space:nowrap;font-size:12px;z-index:50;}
  .songs-playlist-tooltip.hidden{display:none;}
  .songs-playlist-tooltip::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-width:0 6px 6px 6px;border-style:solid;border-color:transparent transparent #1a2230 transparent;}
  #playlistExtra{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  #playlistExtra label{display:flex;align-items:center;gap:4px;}
  #playlistSection{padding-left:var(--hpad);padding-right:var(--hpad);}
  #playlistGrid{position:relative;}
  #playlistBack.close{margin-left: 0;}
  .playlist-tile{transform-style:preserve-3d;backface-visibility:hidden;}
  .dlc-badge{position:absolute;top:4px;left:4px;padding:2px 6px;border-radius:4px;font-size:clamp(8px, calc(var(--tile) * 0.085), 10px);color:#fff;}
  .diff-badge{position:absolute;top:4px;right:4px;padding:2px 6px;border-radius:4px;font-size:clamp(8px, calc(var(--tile) * 0.085), 10px);background:rgba(0,0,0,0.6);color:#fff;text-transform:uppercase;}
  .flip{animation:flip .6s forwards;}
  @keyframes flip{0%{transform:perspective(800px) rotateY(0deg);}50%{transform:perspective(800px) rotateY(90deg);}100%{transform:perspective(800px) rotateY(0deg);}}
  .fadeInDown{animation:fadeInDown .25s forwards;}
  @keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}
  .fadeOutDown{animation:fadeOutDown .25s forwards;}
  @keyframes fadeOutDown{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(20px);}}