.langrisser-sheets{
    margin: 0;
    font-family: var(--vz-body-font-family);
    font-size: var(--vz-body-font-size);
    font-weight: var(--vz-body-font-weight);
    line-height: var(--vz-body-line-height);
    color: var(--vz-body-color);
    text-align: var(--vz-body-text-align);
    background-color: var(--vz-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .game-bg {
    background: rgba(255,255,255,0.9527)!important;
    box-sizing: content-box; 
    padding: 0 60px 100px;
    margin-bottom: 200px; 
    /* box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3); */
  }
  .sheets-bg {
    background: rgba(255,255,255,0.9527)!important;
  }
  .mw-body {
    color: #202122;
    direction: ltr;
  }
  .mw-body-content:after {
    clear: both;
    content: '';
    display: block;
  }
  
  .herolistTable {
    background-color: #f8f9fa;
    color: #202122;
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
  }
  table.herolistTable > tr > th, table.herolistTable > * > tr > th {
    background-color: #F9ECE2;
    color: #6E4135;
  }
  .herolistTable > tr > th, .herolistTable > * > tr > th {
    background-color: #eaecf0;
    text-align: center;
  }
  
  .herolistTable > tr > th, .herolistTable > tr > td, .herolistTable > * > tr > th, .herolistTable > * > tr > td {
    border: 1px solid #a2a9b1;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(162, 169, 177);
    border-right-color: rgb(162, 169, 177);
    border-bottom-color: rgb(162, 169, 177);
    border-left-color: rgb(162, 169, 177);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    padding: 0.2em 0.4em;
  }
  .herolistTable > tr > th,.herolistTable > tr > td,.herolistTable > * > tr > th,.herolistTable > * > tr > td {
    border: 1px solid #a2a9b1;
    padding: 0.2em 0.4em
  }
  
  .herolistTable > tr > th,.herolistTable > * > tr > th {
    background-color: #eaecf0;
    text-align: center
  }
  
  .herolistTable > caption {
    font-weight: bold
  }
  
  .map-dh {
    width: 100%;
    overflow: hidden;
    margin: 10px 0px;
    background: #f8f9fa;
    display: table;
    border: 1px solid #a2a9b1;
  }
  .text-center {
    text-align: center;
  }
  .mw-body-content:after {
    clear: both;
    content: '';
    display: block;
  }
  .li {
      background-color: #4CAF50;
      color: white;
      padding: 16px 20px;
      border: none;
      cursor: pointer;
      width: 100%;
      vertical-align:middle;
      opacity: 0.8;
    }
  
  th {
      display: table-cell;
      vertical-align: inherit;
      font-weight: bold;
      text-align: -internal-center;
  }
    .hero_head_name a {
      color: #fff;
      width: 100%;
      height: 100%;
      display: grid;
      justify-content: center;
      align-items: end;
  }
  .hero_head_img {
    position: absolute;
  }
  .hero_head_name a {
    text-decoration: none;
  }
  /* 카드를 덮는 투명한 클릭 판. 이름은 이 안의 .hn-label 로만 나온다 —
     이름을 꺼도 판은 남아 있어야 카드 어디를 눌러도 상세로 간다. */
  .hero_head_name {
    float:left;
    position: absolute;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: end;
    font-weight: bolder;
    text-shadow: #000 -1px 0 0, #763c12 0 -1px 0, #5d2b08 1px 0 0, #1d1515 0 1px 0;
    line-height: 14px;
    padding: 2px 4px;
    border-radius: 0 0 8px 8px;
    z-index: 3;
    width:82px;
    height:82px;
  }
  /* 평소엔 이름을 감춘다 (그림을 가리므로). 스위치를 켜면 아래 띠와 함께 나온다 */
  .hn-label { display: none; }
  .names-on .hn-label {
    display: block;
    max-width: 74px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .names-on .hero_head_name {
    background: linear-gradient(to top,rgba(0, 0, 0, 0.31) 0, rgba(0, 0, 0, 0.31) 18px, transparent 18px);
  }
  /* 이름 표기 스위치 + 언어 드롭다운 */
  .hero-name-ctl {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .15rem 0;
  }
  .hero-name-ctl .hn-lang { width: 5.5rem; }
  .hero_head {
    display: inline-block;
    position: relative;
    width:82px;
    height:82px;
    margin: 2px;
  }
  .filter-container{
    display: flex; 
    flex-wrap: wrap; 
    position: relative; 
    overflow: hidden;  
    transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
  }
  .shuffle-item {
    float:left; 
    position: relative;
    visibility : visible;
    will-change: transform;  
    opacity: 1; 
    transition-duration: 250ms; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-property: transform, opacity;
    display: none;
  }
  .show {
    display : block;
  }