@charset "UTF-8";

#site-memo{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 99999;
  padding: 0 1rem;
}

#site-memo.open-memo-pop { opacity:1; visibility:visible;}

.togglepop-wrap{
  width: 380px;
  border-radius: var(--radius);
  transform: translateY(-100%) translateX(-50%);
  transition: .35s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
  left: 50%;
  top: 0;
  background: #fff;
}

#site-memo.open-memo-pop .togglepop-wrap{ transform: translateY(10%) translateX(-50%);}

.togglepop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.5rem 1rem;
  border-bottom:1px solid #f1f3f6;
}

.togglepop-head h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:20px;
  font-weight:500;
  color:#222;
}

.togglepop-head h3::before{
  content:"🔔";
  font-size:22px;
}

.togglepop-head .togglepop-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:50px;
  background:#ff4d6d;
  color:#fff !important;
  font-size:12px;
  font-weight:500;
}

.site-memo-close{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#f5f6f8;
  color:#666;
  cursor:pointer;
  transition:.2s;
}

.site-memo-close:hover{
  background:#ff4d6d;
  color:#fff;
  transform:rotate(90deg);
}

/* =========================
리스트
========================= */

#site-memo ul{
  padding: 1.5rem 1rem;
  max-height: 65vh;
  overflow-y: auto;
}

#site-memo li{
  margin-bottom:12px;
}

#site-memo li:last-child{
  margin-bottom:0;
}

#site-memo li a{
  display:block;
  padding: 1.5rem;
  border:1px solid #edf0f5;
  border-radius:14px;
  background:#fff;
  color:#444;
  text-decoration:none;
  transition:.2s;
}

#site-memo li a:hover{
  background:#f8fbff;
  border-color:#7bc6ff;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

/* 쪽지 */
#site-memo li.memo a{
  display:flex;
  align-items:center;
  gap: 7px;
  background:#fff8ea;
  border-color:#ffe2a7;
}

#site-memo li.memo i{
  width: 35px;
  height: 35px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffb300;
  color:#fff;
  font-size:18px;
}

/* 시간 */

.na-bar{
  display:inline-block;
  width:4px;
  height:4px;
  margin:0 3px;
  border-radius:50%;
  background:#b7c0ca;
  vertical-align:middle;
}

.text-muted{
  display:block;
  margin-top:6px;
  color:#888;
  font-size:13px;
}

/* 빨간 숫자 */

#site-memo .togglepop-count{
  color:#ff4d6d;
  font-weight:700;
}

@media (max-width:767px) {
  .togglepop-wrap {
    width: 100%;
  }
}