﻿/* =========================================================================
   eSysVision · 통합 가이드 플로팅 독
   원본 페이지의 디자인을 건드리지 않도록 독립적으로 동작합니다.
   ========================================================================= */
.gdock, .gdock *, .gdock *::before, .gdock *::after { box-sizing: border-box; }

.gdock {
  position: fixed;
  left: 18px;
  bottom: 20px;
  z-index: 95;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.4;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

/* 열기 버튼 */
.gdock-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  height: 60px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 17px;
  background: rgba(8, 13, 26, .9);
  color: #EAF0FF;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.gdock-btn:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, .55); background: rgba(10, 17, 34, .96); }
.gdock-btn:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; }
.gdock-btn svg {
  width: 21px; height: 21px; fill: none; stroke: #7DE7F7; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gdock-btn > span:last-child {
  font-size: 9px; font-weight: 800; letter-spacing: .12em; color: #A9B8D6;
}
.gdock-ring {
  position: absolute; inset: -5px; border-radius: 22px;
  border: 1px solid rgba(34, 211, 238, .55);
  animation: gdockPulse 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes gdockPulse {
  0% { opacity: .7; transform: scale(.96); }
  70% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* 패널 */
.gdock-panel {
  position: absolute;
  left: 68px;
  bottom: 0;
  width: 256px;
  max-height: 78vh;
  overflow-y: auto;
  padding: 15px 14px 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 19px;
  background: rgba(7, 11, 23, .95);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px) scale(.985);
  transform-origin: left bottom;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .7, .3, 1), visibility .22s;
}
.gdock.is-open .gdock-panel {
  opacity: 1; visibility: visible;
  transform: translateX(0) scale(1);
}
.gdock-kicker {
  margin: 0 0 2px; font-size: 8.5px; font-weight: 900;
  letter-spacing: .2em; color: #4ED8EA;
}
.gdock-title {
  margin: 0 0 10px; font-size: 17px; font-weight: 900;
  color: #F4F7FF; letter-spacing: -.02em;
}
.gdock-panel nav { display: flex; flex-direction: column; gap: 4px; }
.gdock-link {
  display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 10px;
  padding: 8px 9px; border: 1px solid transparent; border-radius: 11px;
  color: #C6D0E8; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.gdock-link:hover { background: rgba(255, 255, 255, .07); color: #fff; transform: translateX(2px); }
.gdock-link:focus-visible { outline: 2px solid #22D3EE; outline-offset: 2px; }
.gdock-link i {
  display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 8px; background: rgba(255, 255, 255, .07);
  color: #9FB3D6; font-style: normal; font-size: 13px;
}
.gdock-link b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: -.02em; }
.gdock-link small { display: block; font-size: 10px; color: #7C8AA8; margin-top: 1px; }
.gdock-link.is-current {
  background: linear-gradient(100deg, rgba(34, 211, 238, .16), rgba(79, 125, 255, .08));
  border-color: rgba(34, 211, 238, .34);
  color: #fff;
}
.gdock-link.is-current i { background: rgba(34, 211, 238, .18); color: #7DE7F7; }
.gdock-link.is-current small { color: #9FD9E6; }
.gdock-home {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; padding: 10px 9px 2px; border-top: 1px solid rgba(255, 255, 255, .1);
  color: #93A2C2; font-size: 10.5px; font-weight: 700; text-decoration: none;
}
.gdock-home:hover { color: #fff; }
.gdock-home span { color: #4ED8EA; }

/* 상단바 '통합 가이드' 링크 */
.topbar .hub-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; white-space: nowrap;
}
.topbar .hub-link .hub-ic { color: #4A5BE8; font-size: 12px; line-height: 1; }
.topbar .hub-link .hub-tx-s { display: none; }
@media (max-width: 640px) {
  .topbar .hub-link { padding-left: 10px; padding-right: 10px; }
  .topbar .hub-link .hub-tx { display: none; }
  .topbar .hub-link .hub-tx-s { display: inline; }
}

/* 모바일 */
@media (max-width: 720px) {
  .gdock { left: 10px; bottom: 86px; }
  .gdock-btn { width: 48px; height: 52px; border-radius: 14px; gap: 2px; }
  .gdock-btn svg { width: 18px; height: 18px; }
  .gdock-btn > span:last-child { font-size: 8px; }
  .gdock-panel { left: 58px; width: 232px; padding: 13px 12px 11px; }
  .gdock-title { font-size: 15px; }
  .gdock-link b { font-size: 12px; }
  .gdock-link small { font-size: 9.5px; }
}

@media (max-height: 520px) {
  .gdock-panel { max-height: 76vh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gdock-ring { animation: none; opacity: 0; }
  .gdock-btn, .gdock-panel, .gdock-link { transition: none; }
}
