.soc-chart-page{
  --soc-bg:#efefef;
  --soc-text:#050505;
  --soc-muted:#333;
  --soc-line:#d7d7d7;
  --soc-black:#000;
  --soc-gray:#e7e7e7;
  --soc-red:#ec2525;
  --soc-green:#39ad34;
  --soc-yellow:#f0c900;
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:54px 16px 48px;
  background:var(--soc-bg);
  color:var(--soc-text);
  font-family:Arial,Helvetica,sans-serif;
}
.soc-chart-page *{box-sizing:border-box}
.soc-chart-intro{
  padding:0 0 34px;
}
.soc-chart-intro h1{
  margin:0 0 22px;
  font-size:76px;
  line-height:.9;
  letter-spacing:-.075em;
  font-weight:950;
  color:#000;
}
.soc-chart-intro p{
  max-width:870px;
  margin:0 0 34px;
  font-size:24px;
  line-height:1.45;
  font-weight:500;
  color:#111;
}
.soc-chart-intro h2{
  margin:0 0 14px;
  font-size:50px;
  line-height:1;
  letter-spacing:-.055em;
  font-weight:950;
  color:#000;
}
.soc-chart-credit{
  max-width:850px;
  color:#666;
  font-size:15px;
  line-height:1.5;
}
.soc-chart-table{
  width:100%;
  background:#fff;
  border:1px solid var(--soc-line);
}
.soc-chart-row{
  display:grid;
  grid-template-columns:92px minmax(0,1.8fr) 128px 142px 128px;
  min-height:78px;
  border-top:1px solid var(--soc-line);
}
.soc-chart-row:first-child{border-top:0}
.soc-chart-row--head{
  min-height:88px;
  background:#000;
  color:#fff;
}
.soc-chart-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-right:1px solid var(--soc-line);
  background:#e8e8e8;
  color:#050505;
  text-align:center;
  font-size:22px;
  line-height:1;
  font-weight:900;
}
.soc-chart-cell:last-child{border-right:0}
.soc-chart-row--head .soc-chart-cell{
  background:#000;
  color:#fff;
  border-right:1px solid #222;
  font-size:15px;
  line-height:1.1;
  font-weight:950;
  text-transform:uppercase;
}
.soc-chart-cell--rank{
  background:#000;
  color:#fff;
  font-size:38px;
  letter-spacing:-.06em;
  font-weight:950;
}
.soc-chart-row--head .soc-chart-cell--rank{
  justify-content:flex-start;
  padding-left:22px;
  letter-spacing:0;
}
.soc-chart-cell--song{
  justify-content:flex-start;
  background:#f4f4f4;
  text-align:left;
}
.soc-chart-song{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.soc-chart-cover{
  display:none;
}
.soc-chart-song-text{
  min-width:0;
}
.soc-chart-song h3{
  margin:0;
  font-size:26px;
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:950;
  color:#000;
  word-break:break-word;
}
.soc-chart-song p{
  margin:7px 0 0;
  color:#111;
  font-size:18px;
  line-height:1.15;
  font-weight:500;
}
.soc-chart-move{
  flex:0 0 auto;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  color:#fff;
  font-size:22px;
  line-height:1;
  font-weight:950;
}
.soc-chart-move--up{background:var(--soc-green)}
.soc-chart-move--down{background:var(--soc-red)}
.soc-chart-move--same{background:#9b9b9b}
.soc-chart-move--new{
  width:auto;
  height:auto;
  border-radius:999px;
  background:var(--soc-yellow);
  color:#111;
  padding:6px 8px;
  font-size:10px;
  letter-spacing:.02em;
}
.soc-chart-source{
  margin:16px 0 0;
  color:#777;
  font-size:12px;
  line-height:1.5;
}

/* Mobile layout sengaja beda dari desktop: rank bar + card detail */
@media(max-width:1024px){
  .soc-chart-page{
    padding:36px 15px 42px;
    max-width:100%;
  }
  .soc-chart-intro{
    padding-bottom:30px;
  }
  .soc-chart-intro h1{
    font-size:54px;
    line-height:.92;
    margin-bottom:22px;
  }
  .soc-chart-intro p{
    font-size:20px;
    line-height:1.42;
    margin-bottom:32px;
  }
  .soc-chart-intro h2{
    font-size:34px;
    margin-bottom:0;
  }
  .soc-chart-credit{
    display:none;
  }
  .soc-chart-table{
    border:0;
    background:transparent;
  }
  .soc-chart-row--head{
    display:none;
  }
  .soc-chart-row{
    display:block;
    min-height:0;
    border:0;
    background:transparent;
    margin:0 0 16px;
  }
  .soc-chart-cell{
    border:0;
    background:transparent;
    padding:0;
  }
  .soc-chart-cell--rank{
    width:100%;
    height:50px;
    background:#000;
    color:#fff;
    font-size:28px;
    font-weight:950;
    display:flex;
    justify-content:center;
    align-items:center;
    letter-spacing:0;
    border-top:6px solid #111;
  }
  .soc-chart-cell--song{
    display:block;
    padding:12px 0 8px;
    background:transparent;
    text-align:center;
  }
  .soc-chart-song{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
  }
  .soc-chart-cover{
    display:flex;
    width:min(230px,70vw);
    aspect-ratio:1/1;
    background:#ddd;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .soc-chart-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .soc-chart-cover--placeholder{
    background:linear-gradient(135deg,#111,#555);
    color:#fff;
  }
  .soc-chart-cover--placeholder span{
    font-size:72px;
    font-weight:950;
    line-height:1;
  }
  .soc-chart-move{
    width:36px;
    height:36px;
    font-size:23px;
  }
  .soc-chart-move--new{
    width:auto;
    height:auto;
    padding:7px 9px;
    font-size:11px;
  }
  .soc-chart-song h3{
    font-size:34px;
    line-height:1;
    letter-spacing:-.06em;
    text-align:center;
    max-width:720px;
  }
  .soc-chart-song p{
    font-size:22px;
    margin-top:7px;
    text-align:center;
  }
  .soc-chart-cell--stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    min-height:48px;
    padding:0 12px;
    background:#dedede;
    color:#000;
    text-align:left;
    font-size:21px;
    font-weight:900;
  }
  .soc-chart-cell--stat:nth-of-type(4){
    background:#efefef;
  }
  .soc-chart-cell--stat::before{
    content:attr(data-label);
    font-weight:500;
  }
}

@media(max-width:480px){
  .soc-chart-page{
    padding-left:15px;
    padding-right:15px;
  }
  .soc-chart-intro h1{
    font-size:42px;
  }
  .soc-chart-intro p{
    font-size:17px;
  }
  .soc-chart-intro h2{
    font-size:28px;
  }
  .soc-chart-song h3{
    font-size:28px;
  }
  .soc-chart-song p{
    font-size:18px;
  }
  .soc-chart-cell--stat{
    font-size:17px;
    min-height:43px;
  }
  .soc-chart-cover{
    width:min(205px,72vw);
  }
}


/* v5 fixes */
.soc-chart-page--no-intro{padding-top:0}
.soc-chart-page--no-intro .soc-chart-table{margin-top:0}

@media(max-width:1024px){
  .soc-chart-row--head{display:none !important}
  .soc-chart-table{border:0 !important;background:transparent !important}
  .soc-chart-row:not(.soc-chart-row--head){
    display:block !important;
    border:0 !important;
    background:transparent !important;
    margin:0 0 18px !important;
  }
  .soc-chart-cell--song{
    background:transparent !important;
  }
}