html, body {
      /* overflow: hidden; */
      font-size: clamp(14px, 2vw, 18px);
      /* padding: 5px 5px 0px 5px; */
    }
    body {
      font-family: 'Segoe UI', sans-serif;
      color: #f0f0f0;
      background-color: #000;
    }

    /* header part*/
    .header {
      background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('../static/YIY6xVgh.jpg');
      background-color:#243163 ;
      border-radius: 20px 20px 0px 0px;
      padding-top: 10px;
      justify-content: center;
      padding: 30px 0px 30px 10px;
      margin: 1px;
    }
    #main-title{
      font-size: 1.5rem;
      font-weight: bold;
      color: #fff;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
      background-color: #7c0101;
      display: inline-block;
      border-radius: 20px;
      padding: 5px 20px;      
    }
    #last-updated {
      font-size: 14px;
    }
    .terror-zone {
      max-width: 100%;
      height: auto;
      display: block;
      /* margin-top: 10px; */
      border-radius: 20px;
    }
    .menubar {
      background-color: #703030;
      top: env(safe-area-inset-top, 20px);
    }
    .menubar button {
      background: none;
      border: none;
      padding: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }
    .menubar button:active {
      transform: scale(0.98); /* 살짝 눌리는 느낌 */
      background: rgba(0, 0, 0, 0.1); /* 클릭 시 살짝 어두워짐 */
    }

    #sitename {
      font-weight: bolder;
      font-size: 1.2rem;
    }
    a {
      text-decoration: none;
      color: inherit;
    }

    /* left box */
    /* 실시간 방송 파트 */
    .chart-box {
      font-size: 12px;
      width: 100%; /* 기본 너비 */
      background-color: #191919;
      /* border:1px solid rgb(0, 204, 255); */
      border-radius: 0 0 10px 10px;
      padding: 20px 30px 0px 30px;
      margin-right: 20px;
    }
    @media (min-width: 1080px) {
      .chart-box {width: 320px;}
    }
    .livech-box {
      background-color:#242424;
      padding: 15px 0 10px 0;
      border-radius: 10px;
    }
    .livech-bar {
      margin-bottom: 0.3em;
    }
    /* .livech-bar:hover {
      transform: scale(1.2);
      box-shadow: 0 6px 16px rgba(241, 241, 241, 0.6);
    } */
    .rank {
      border-radius: 0px 20px 20px 0px;
    }
    .card-title {
      font-size: 1em;
      font-weight: normal;
      color:#ffffff;
    }
    .badge, .badge-c {
      font-size: 1em;
      padding: 2px 6px;
      border-radius: 8px;
      color:cadetblue;
      background-color:#3f3e3e;
    }
    .badge-c {
      border-radius: 999px;
      font-weight:600;
      color: rgb(233, 84, 84);
    }
    .avatar {
      border-radius: 50%;     /* 둥글게 */
      object-fit: cover;      /* 이미지 비율 유지하면서 잘라내기 */
      display: block;
      height: 30px;
    }
    .rank{background:rgb(131, 128, 124);}
    .rank1{background:rgb(184, 111, 2);}
    .rank2{background:rgb(121, 87, 36);}
    .rank3{background:rgb(140, 120, 83);}

    /* 시청자 수, 방송 시간  랭킹 파트 */
    .viewersRanking, .totalLiveHours {
      padding: 5px;
      color: #fff;
      font-family: 'Noto Sans KR', sans-serif;
      border-radius: 10px;
      margin-top: 10px;
    }
    .viewersRanking {
      background-color: #122147;
      margin-top: 30px;
    }
    .totalLiveHours {
      background-color: #07250e;
    }
    .viewersRanking .subject {
      background-color: #182675;
    }
    .totalLiveHours .subject {
      background-color: #1b3a03;
    }
    #viewers-top10, #hours-top10, #last-viewers-top10, #last-hours-top10{
      display: none;
    }
    .subject {
      height: 100%;
      border-radius: 12px;
      font-weight: bold;
      display: inline-block;
      padding: 5px 20px;
    }
    .ch-box {
      align-items: center;
      margin-bottom: 3px;
    }
    .ch-name {
      width: 30%;
      color: #ddd;
      padding-right: 5px;
      white-space: nowrap;
      overflow: hidden;
    }
    .indicator-bar {
      height: 20px;
      padding-left: 5px;
      transition: width 0.5s ease;
      display: flex;
      align-items: center;
    }
    .indicator-label { 
      font-weight: bold;
      margin-left: 5px;
      color: #aaa;
    }

    /* video box */
    .gallery {
      display: flex;
      gap: 0px 5px;
      flex-wrap: wrap;
      align-items: stretch;      
      margin-top: 20px;
    }
    .gallery-tip {
      width: 100%;
      padding: 20px 0 20px;
      text-align: center;
      text-decoration: underline;
      font-weight: bold;
      color: blanchedalmond;
    }
    .live-box {
      width: 100%;
      margin-bottom: 20px;
    }
    @media (min-width:1332px) {
      .live-box, .video-box, .comment-box {width: 480px;}
    }
    .video-box {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      cursor: pointer;
      background-color: #000;
    }
    .thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* display: block; */
    }
    .video-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      border: none;
    }
    .comment-box, .comment {
      width: 100%;
      font-size: clamp(14px, 14px, 14px);
      color: #fff;
      background-color: #191919;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .comment {
      height: 42px;
      padding: 0px 5px;
      overflow: hidden;
    }
    .metadata {
      padding: 0px 5px;
    }