*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
  background:#fff;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Pretendard",
    sans-serif;
}

body{
  overflow-y:scroll;
  scrollbar-width:none;
  -ms-overflow-style:none;
}


html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display:none;
}

/* ---------- 상단 ---------- */

.top-bar{

  position:fixed;

  top:0;
  left:0;
  right:0;

  height:60px;

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

  background:#fff;

  z-index:1000;

}

.top-tabs{

  display:flex;
  align-items:center;
  gap:18px;

}

.top-tab{

  border:none;
  background:none;

  width:24px;
  height:24px;

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

  color:#999;

  cursor:pointer;

  transition:.15s;

}

.top-tab:hover{

  color:#111;

  transform:scale(1.08);

}

.search-wrap{

  display:flex;
  align-items:center;
  gap:8px;

}

.search-divider{

  color:#d0d0d0;

  font-size:12px;

}

#searchInput{

  border:none;

  outline:none;

  font-size:12px;

  background:transparent;

  width:150px;

}

#searchInput::placeholder{

  color:#999;

}

/* ---------- 메인 ---------- */

.main-screen{
  
  padding:10px;
  padding-top:75px;
  padding-bottom:70px;

  display:flex;
  justify-content:center;

}

.main-content{

  width:calc(100% - 1px);

  max-width:820px;

  padding:0 23px;

}

.memo-container{

  width:100%;

}

/* ---------- 입력 ---------- */

.memo-input-row{

  display:grid;

  grid-template-columns:
    1fr
    1fr
    auto;

  gap:12px;

  margin-bottom:10px;

}

.memo-input-row input{

  border:none;

  border-bottom:
    1px solid #efefef;

  padding:8px 4px;

  outline:none;

  font-size:12px;

}

.memo-input-row input:focus::placeholder{

  opacity:0;

}

#addLinkBtn{

  border:none;

  background:none;

  cursor:pointer;

  font-size:20px;

  color:#666;

}

/* ---------- 목록 ---------- */

.memo-item{

  padding:8px 0;

  border-bottom:
    1px solid #f2f2f2;

  cursor:grab;

  transition:
    background .15s,
    opacity .15s;

}

.memo-item:hover{

  background:#f7f7f7;

}

.memo-item.dragging{

  opacity:.5;

}

.link-line{

  display:flex;

  align-items:center;

  gap:8px;

}

.memo-main{

  flex:1;

  overflow:hidden;

  white-space:nowrap;

}

.memo-title{

  font-size:12px;

  cursor:pointer;

}

.memo-dot{

  color:#999;

  margin:0 4px;

}

.memo-content{

  font-size:12px;

  color:#555;

  overflow:hidden;

  text-overflow:ellipsis;

}

.link-copy{

  cursor:pointer;

}

.link-copy:hover{

  color:#111;

}

.memo-meta{

  display:flex;

  align-items:center;

  gap:8px;

  flex-shrink:0;

}

/* ---------- 즐겨찾기 ---------- */

.memo-favorite{

  border:none;

  background:none;

  cursor:pointer;

  color:#d0d0d0;

  padding:0;

}

.memo-favorite.active{

  color:#ffd43b;

}

/* ---------- 아이콘 ---------- */

.icon-btn{

  border:none;

  background:none;

  cursor:pointer;

  color:#888;

  padding:0;

  display:flex;

  align-items:center;

  justify-content:center;

}

.icon-btn:hover{

  color:#2563eb;

}

/* ---------- Toast ---------- */

#toast{

  position:fixed;

  left:50%;
  bottom:80px;

  transform:
    translateX(-50%)
    translateY(20px);

  background:#111;

  color:#fff;

  padding:8px 14px;

  border-radius:999px;

  font-size:12px;

  opacity:0;

  transition:.2s;

  pointer-events:none;

}

#toast.show{

  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);

}

/* ---------- Footer ---------- */

.bottom-text{

  position:fixed;

  left:0;
  right:0;
  bottom:0;

  height:45px;

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

  background:#fff;

}

.bottom-text span{

  font-size:10px;

  color:#aaaaaa;

  letter-spacing:0.3px;

}

.link-title-input{

  border:none;

  outline:none;

  background:transparent;

  font:inherit;

  color:inherit;

  padding:0;

  width:170px;

}

/* 즐겨찾기 버튼 숨김 */

.memo-favorite{
  display:none !important;
}

.memo-meta{
  gap:0;
}