/* =========================================================
   V200 HOME DASHBOARD
   ========================================================= */

#homeDashboardV200{
  width:min(
    1280px,
    calc(100% - 30px)
  );

  margin:
    22px auto 40px;

  color:#edf5ff;

  font-family:
    Arial,
    "Noto Sans KR",
    sans-serif;
}


#homeDashboardV200 *{
  box-sizing:border-box;
}


/* HERO */

.v200-hero{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:25px;

  min-height:155px;

  padding:
    26px 28px;

  border:
    1px solid #3b5b7a;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #122e4e,
      #0a182b
    );
}


.v200-label{
  color:#82a5ce;

  font-size:12px;
  font-weight:1000;

  letter-spacing:.15em;
}


.v200-hero h2{
  margin:
    7px 0 5px;

  color:#f1f6ff;

  font-size:30px;
}


.v200-hero p{
  margin:0;

  color:#8da4c0;

  font-size:14px;
}


.v200-hero-actions{
  display:flex;

  gap:8px;
}


.v200-hero-actions a,
.v200-hero-actions button{
  display:flex;

  align-items:center;
  justify-content:center;

  min-height:44px;

  padding:
    0 15px;

  border:
    1px solid #50769e;

  border-radius:9px;

  background:#153657;
  color:#edf5ff;

  font-family:inherit;

  font-size:13px;
  font-weight:900;

  text-decoration:none;

  cursor:pointer;
}


.v200-hero-actions button{
  background:#0c1e33;
}


/* =========================================================
   STATS
   ========================================================= */

.v200-stats{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:10px;

  margin-top:11px;
}


.v200-stat{
  display:flex;

  align-items:center;

  gap:13px;

  min-height:105px;

  padding:17px;

  border:
    1px solid #304c68;

  border-radius:12px;

  background:#0b192c;

  color:#edf5ff;

  text-decoration:none;
}


.v200-stat:hover{
  border-color:#557da7;

  background:#10223a;
}


.v200-stat-icon{
  display:flex;

  align-items:center;
  justify-content:center;

  width:51px;
  height:51px;

  flex-shrink:0;

  border-radius:10px;

  background:#172e49;

  font-size:22px;
}


.v200-stat span{
  display:block;

  color:#7e96b4;

  font-size:12px;
}


.v200-stat strong{
  display:block;

  margin-top:5px;

  overflow:hidden;

  color:#f0f6ff;

  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:21px;
}


.v200-stat small{
  display:block;

  margin-top:4px;

  color:#6e88a7;

  font-size:11px;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.v200-grid-main{
  display:grid;

  grid-template-columns:
    minmax(0,1.6fr)
    minmax(340px,1fr);

  gap:11px;

  margin-top:11px;
}


.v200-card{
  min-width:0;

  overflow:hidden;

  border:
    1px solid #2e4a67;

  border-radius:13px;

  background:#0b192c;
}


.v200-head{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:15px;

  min-height:76px;

  padding:
    17px 19px;

  border-bottom:
    1px solid #243d57;
}


.v200-head span{
  display:block;

  color:#7a9abf;

  font-size:11px;
  font-weight:1000;

  letter-spacing:.13em;
}


.v200-head h3{
  margin:
    5px 0 0;

  color:#eef5ff;

  font-size:20px;
}


.v200-head > a{
  color:#82afe1;

  text-decoration:none;

  white-space:nowrap;

  font-size:12px;
  font-weight:900;
}


/* =========================================================
   PLAYER
   ========================================================= */

.v200-player-list{
  padding:8px;
}


.v200-player{
  display:grid;

  grid-template-columns:
    43px
    minmax(150px,1fr)
    75px
    90px
    75px;

  align-items:center;

  gap:8px;

  min-height:67px;

  padding:
    8px 10px;

  border-radius:8px;

  color:#edf5ff;

  text-decoration:none;
}


.v200-player:hover{
  background:#10233b;
}


.v200-player-rank{
  color:#7892b0;

  text-align:center;

  font-size:16px;
  font-weight:1000;
}


.v200-player-main{
  min-width:0;
}


.v200-player-main strong{
  display:block;

  overflow:hidden;

  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:14px;
}


.v200-player-main small{
  display:block;

  margin-top:4px;

  overflow:hidden;

  color:#728baa;

  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:10px;
}


.v200-player-games,
.v200-player-win,
.v200-player-kda{
  text-align:right;
}


.v200-player-games strong,
.v200-player-win strong,
.v200-player-kda strong{
  display:block;

  font-size:14px;
}


.v200-player-win strong{
  color:#6cd9a3;
}


.v200-player-games small,
.v200-player-win small,
.v200-player-kda small{
  display:block;

  margin-top:3px;

  color:#6f88a5;

  font-size:9px;
}


/* =========================================================
   CHAMPION
   ========================================================= */

.v200-champions{
  padding:8px;
}


.v200-champion{
  display:grid;

  grid-template-columns:
    40px
    1fr
    75px;

  align-items:center;

  min-height:67px;

  padding:
    7px 10px;

  border-radius:8px;

  color:#edf5ff;

  text-decoration:none;
}


.v200-champion:hover{
  background:#10233b;
}


.v200-champ-rank{
  color:#7791b0;

  text-align:center;

  font-size:14px;
  font-weight:1000;
}


.v200-champ-main strong{
  display:block;

  font-size:14px;
}


.v200-champ-main small,
.v200-champ-win small{
  display:block;

  margin-top:4px;

  color:#7089a7;

  font-size:10px;
}


.v200-champ-win{
  text-align:right;
}


.v200-champ-win strong{
  color:#72dba6;

  font-size:14px;
}


/* =========================================================
   MATCH
   ========================================================= */

.v200-match-list,
.v200-recruit-list{
  padding:8px;
}


.v200-match{
  display:grid;

  grid-template-columns:
    110px
    minmax(100px,1fr)
    70px
    75px;

  align-items:center;

  gap:10px;

  min-height:68px;

  padding:
    8px 10px;

  border-radius:8px;

  color:#edf5ff;

  text-decoration:none;
}


.v200-match:hover{
  background:#10233b;
}


.v200-match strong{
  display:block;

  font-size:13px;
}


.v200-match small{
  display:block;

  margin-top:4px;

  color:#718aa8;

  font-size:10px;
}


.v200-match-players,
.v200-match-winner{
  text-align:right;
}


.v200-match-winner strong{
  color:#6bd9a2;
}


/* =========================================================
   RECRUIT
   ========================================================= */

.v200-recruit{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  min-height:68px;

  padding:
    9px 10px;

  border-radius:8px;

  color:#edf5ff;

  text-decoration:none;
}


.v200-recruit:hover{
  background:#10233b;
}


.v200-recruit > div:first-child{
  min-width:0;
}


.v200-recruit strong{
  display:block;

  overflow:hidden;

  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:13px;
}


.v200-recruit small{
  display:block;

  margin-top:4px;

  overflow:hidden;

  color:#718ba9;

  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:10px;
}


.v200-recruit-count{
  flex-shrink:0;

  text-align:right;
}


.v200-recruit-count strong{
  color:#8eb5df;

  font-size:15px;
}


/* =========================================================
   SHORTCUT
   ========================================================= */

.v200-shortcuts{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:9px;

  margin-top:11px;
}


.v200-shortcuts > a{
  display:flex;

  align-items:center;

  gap:12px;

  min-height:84px;

  padding:
    14px;

  border:
    1px solid #304c68;

  border-radius:11px;

  background:#0b192c;

  color:#edf5ff;

  text-decoration:none;
}


.v200-shortcuts > a:hover{
  border-color:#547ca6;

  background:#10233b;
}


.v200-shortcuts b{
  flex-shrink:0;

  font-size:23px;
}


.v200-shortcuts strong{
  display:block;

  font-size:13px;
}


.v200-shortcuts small{
  display:block;

  margin-top:4px;

  color:#7089a8;

  font-size:10px;
}


.v200-empty,
.v200-loading{
  padding:42px;

  color:#7890ad;

  text-align:center;

  font-size:13px;
}


.v200-loading{
  border:
    1px solid #2e4a67;

  border-radius:13px;

  background:#0b192c;
}


.v200-loading.error{
  color:#e9858f;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

  .v200-stats{
    grid-template-columns:
      1fr 1fr;
  }


  .v200-grid-main{
    grid-template-columns:1fr;
  }


  .v200-shortcuts{
    grid-template-columns:
      repeat(3,1fr);
  }

}


@media(max-width:700px){

  .v200-hero{
    align-items:flex-start;

    flex-direction:column;
  }


  .v200-stats{
    grid-template-columns:1fr;
  }


  .v200-player{
    grid-template-columns:
      36px
      1fr
      80px;
  }


  .v200-player-games,
  .v200-player-kda{
    display:none;
  }


  .v200-match{
    grid-template-columns:
      95px
      1fr
      65px;
  }


  .v200-match-players{
    display:none;
  }


  .v200-shortcuts{
    grid-template-columns:1fr;
  }

}