/* 맨 위로.
 *
 * 연표가 길고 기록도 길다. 아래까지 내려간 사람이 돌아오려면
 * 지금은 같은 거리를 손으로 다시 올려야 한다.
 *
 * 한 화면 넘게 내려갔을 때만 조용히 나타난다. 처음부터 떠 있으면
 * 읽는 동안 내내 눈에 걸린다.
 */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper, #FBF8F2); border:1px solid var(--line, #D8CDB6);
  color:var(--ink-mute, #6B6254); font-size:15px; line-height:1;
  box-shadow:0 4px 16px rgba(42,37,32,.13);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, background .25s, color .25s, border-color .25s;
}
.totop.on{opacity:1; transform:translateY(0); pointer-events:auto;}
.totop:hover{background:var(--ink, #2A2520); border-color:var(--ink, #2A2520); color:var(--paper, #FBF8F2);}
.totop:focus-visible{outline:1px solid var(--ink-faint, #9A8F7C); outline-offset:3px;}

/* 모바일에서는 화면이 좁아 조금 물러나 앉는다 */
@media(max-width:760px){
  .totop{right:14px; bottom:14px; width:40px; height:40px; font-size:14px;}
}

@media(prefers-reduced-motion:reduce){
  .totop{transition:opacity .2s;}
}