/*
  side-dock.css
  ------------------------------------------------------------
  화면 오른쪽에 스크롤 시 나타나는 세로 아이콘 도크
  (예약, Instagram, WhatsApp, 맨 위로).
*/

.side-dock{
  position:fixed; right:22px; top:50%; transform:translateY(-50%) translateX(90px);
  z-index:90; display:flex; flex-direction:column; gap:10px;
  opacity:0; transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.side-dock.show{ opacity:1; transform:translateY(-50%) translateX(0); pointer-events:auto; }
.side-dock a, .side-dock button{
  width:46px; height:46px; border-radius:50%; background:var(--foam);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -10px rgba(57,49,32,.25);
  position:relative; transition:all .3s var(--ease);
}
.side-dock a:hover, .side-dock button:hover{ background:var(--brass); }
.side-dock a:hover svg, .side-dock button:hover svg{ stroke:var(--ink); }
.side-dock svg{width:18px; height:18px; stroke:var(--ink); transition:stroke .3s;}
.side-dock .tip{
  position:absolute; right:56px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--foam); font-family:var(--font-en-main); font-size:11px; letter-spacing:.05em;
  padding:6px 12px; border-radius:3px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.side-dock a:hover .tip, .side-dock button:hover .tip{opacity:1;}
.side-dock .book-dock{ background:var(--brass); border-color:var(--brass); }
.side-dock .book-dock svg{ stroke:var(--ink); }

@media (max-width:920px){
  .side-dock{right:14px;}
  .side-dock a, .side-dock button{width:42px; height:42px;}
  .side-dock .tip{display:none;}
}