/* =========================================================
   V201 ACTIVITY CENTER
   ========================================================= */

.v201-button{
  position:relative;

  display:inline-flex;

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

  gap:7px;

  min-width:78px;
  min-height:42px;

  padding:
    0 12px;

  border:
    1px solid #3c5b7c;

  border-radius:9px;

  outline:none;

  background:#10243c;
  color:#eaf3ff;

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

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

  white-space:nowrap;

  cursor:pointer;
}


.v201-button:hover,
.v201-button.open{
  border-color:#668fba;

  background:#183454;
}


.v201-button.has-unread{
  border-color:#557fae;
}


.v201-bell{
  font-size:15px;
}


.v201-button-text{
  font-size:12px;
}


.v201-badge{
  position:absolute;

  top:-7px;
  right:-7px;

  display:none;

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

  min-width:21px;
  height:21px;

  padding:
    0 5px;

  border:
    2px solid #081322;

  border-radius:999px;

  background:#dc5f6a;
  color:#fff;

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


.v201-fixed-button{
  position:fixed;

  top:16px;
  right:18px;

  z-index:99990;
}


/* =========================================================
   PANEL
   ========================================================= */

.v201-panel{
  position:fixed;

  z-index:99999;

  display:none;

  overflow:hidden;

  max-height:
    min(
      720px,
      calc(100vh - 100px)
    );

  border:
    1px solid #395979;

  border-radius:15px;

  background:#081524;

  color:#edf5ff;

  box-shadow:
    0 22px 60px
    rgba(0,0,0,.55);

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


.v201-panel.open{
  display:flex;

  flex-direction:column;
}


/* HEAD */

.v201-head{
  display:flex;

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

  gap:15px;

  flex-shrink:0;

  min-height:79px;

  padding:
    17px 19px;

  border-bottom:
    1px solid #29445f;

  background:
    linear-gradient(
      135deg,
      #112b48,
      #0a192b
    );
}


.v201-head span{
  display:block;

  color:#7c9ec6;

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

  letter-spacing:.14em;
}


.v201-head h2{
  margin:
    4px 0 0;

  font-size:21px;
}


.v201-head button{
  width:40px;
  height:40px;

  min-height:40px;

  border:
    1px solid #3e5f80;

  border-radius:8px;

  background:#102640;
  color:#edf5ff;

  font-size:18px;

  cursor:pointer;
}


/* SUMMARY */

.v201-summary{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  flex-shrink:0;

  border-bottom:
    1px solid #29445f;
}


.v201-summary > div{
  padding:
    12px 18px;

  background:#0b1b2f;
}


.v201-summary > div + div{
  border-left:
    1px solid #29445f;
}


.v201-summary strong{
  display:inline-block;

  margin-right:6px;

  font-size:17px;
}


.v201-summary span{
  color:#7e96b4;

  font-size:11px;
}


/* =========================================================
   LIST
   ========================================================= */

.v201-list{
  overflow-y:auto;

  overscroll-behavior:contain;
}


.v201-item{
  position:relative;

  display:grid;

  grid-template-columns:
    47px
    minmax(0,1fr)
    10px;

  align-items:center;

  gap:11px;

  min-height:88px;

  padding:
    12px 15px;

  border-bottom:
    1px solid #203951;

  color:#edf5ff;

  text-decoration:none;
}


.v201-item:hover{
  background:#10243b;
}


.v201-item.unread{
  background:
    linear-gradient(
      90deg,
      rgba(42,90,137,.18),
      rgba(8,21,36,0)
    );
}


.v201-icon{
  display:flex;

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

  width:45px;
  height:45px;

  border:
    1px solid #304e6c;

  border-radius:10px;

  background:#122a45;

  font-size:19px;
}


.v201-item-main{
  min-width:0;
}


.v201-item-top{
  display:flex;

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

  gap:10px;

  margin-bottom:5px;
}


.v201-item-top span{
  color:#7399c4;

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


.v201-item-top small{
  flex-shrink:0;

  color:#687f9b;

  font-size:9px;
}


.v201-item-main > strong{
  display:block;

  overflow:hidden;

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

  font-size:13px;
}


.v201-item-main > p{
  margin:
    5px 0 0;

  overflow:hidden;

  color:#7d94af;

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

  font-size:10px;
}


.v201-unread-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#69a8ea;

  box-shadow:
    0 0 8px
    rgba(105,168,234,.65);
}


/* =========================================================
   FOOT / EMPTY
   ========================================================= */

.v201-foot{
  flex-shrink:0;

  padding:
    11px 16px;

  border-top:
    1px solid #29445f;

  background:#091727;

  color:#637e9d;

  text-align:center;

  font-size:9px;
}


.v201-empty{
  padding:
    50px 25px;

  text-align:center;
}


.v201-empty > span{
  display:block;

  font-size:30px;
}


.v201-empty > strong{
  display:block;

  margin-top:10px;

  font-size:14px;
}


.v201-empty > p{
  margin:
    7px 0 0;

  color:#718aa8;

  font-size:10px;
}


.v201-loading,
.v201-error{
  padding:
    45px 20px;

  color:#7891af;

  text-align:center;

  font-size:12px;
}


.v201-error strong,
.v201-error span{
  display:block;
}


.v201-error strong{
  color:#e98791;

  font-size:13px;
}


.v201-error span{
  margin-top:6px;

  font-size:10px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  .v201-button{
    min-width:43px;

    padding:
      0 9px;
  }


  .v201-button-text{
    display:none;
  }


  .v201-panel{
    max-height:
      calc(100vh - 85px);
  }


  .v201-item{
    min-height:82px;

    padding:
      10px 12px;
  }

}


/* =========================================================
   V202 ACTIVITY LINK
   ========================================================= */

.v201-all-link{
  color:#83afe1;

  text-decoration:none;

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

.v201-all-link:hover{
  text-decoration:underline;
}


/* =========================================================
   V202 ACTIVITY LINK
   ========================================================= */

.v201-all-link{
  color:#83afe1;

  text-decoration:none;

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

.v201-all-link:hover{
  text-decoration:underline;
}