/* =====================================================================
   복구천사 — 가이드 플로팅 퀵 네비게이션 (제안 B)
   기존 레이아웃을 건드리지 않는 순수 추가형(position:fixed) 오버레이.
   ※ 각 페이지의 전역 리셋( .{prefix}-root button{background:transparent},
     .{prefix}-root a{color:inherit} )이 우선순위가 높아 덮어쓰므로,
     색/배경 등 시각 속성은 !important 로 고정한다.
   ===================================================================== */

.qn-root, .qn-root *{ box-sizing: border-box; }
.qn-root{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}

/* ---------- 플로팅 버튼 (FAB) ---------- */
.qn-root .qn-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9991;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: #6C3FC5 !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(108,63,197,.45);
  animation: qn-pulse 2.6s ease-in-out infinite;
  transition: transform .18s ease, background .18s ease;
}
.qn-root .qn-fab:hover{ background: #5a30ad !important; transform: translateY(-2px); }
.qn-root .qn-fab i{ font-size: 15px; color: #fff !important; }
.qn-root .qn-fab .qn-fab-label{ color: #fff !important; }
.qn-root .qn-fab .qn-fab-x{ display: none; }
.qn-root.qn-open .qn-fab{ animation: none; background: #0a0a0a !important; }
.qn-root.qn-open .qn-fab .qn-fab-bars{ display: none; }
.qn-root.qn-open .qn-fab .qn-fab-x{ display: inline-block; }

@keyframes qn-pulse{
  0%,100%{ box-shadow: 0 8px 22px rgba(108,63,197,.45); }
  50%{ box-shadow: 0 8px 30px rgba(108,63,197,.78); }
}

/* ---------- 백드롭 ---------- */
.qn-root .qn-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(10,10,14,.40);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.qn-root.qn-open .qn-backdrop{ opacity: 1; visibility: visible; }

/* ---------- 패널 (데스크톱 = 팝오버) ---------- */
.qn-root .qn-panel{
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 9992;
  width: 372px;
  max-width: calc(100vw - 40px);
  background: #fff !important;
  border: 1px solid #e6e6ec;
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(0,0,0,.24);
  padding: 16px;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s ease;
}
.qn-root.qn-open .qn-panel{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.qn-root .qn-handle{ display: none; }

.qn-root .qn-head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0a0a0a !important;
  letter-spacing: -.01em;
  margin: 2px 2px 13px;
}
.qn-root .qn-head i{ color: #6C3FC5 !important; font-size: 14px; }
.qn-root .qn-head .qn-count{
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: #6C3FC5 !important;
  background: #efeaf7 !important;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

.qn-root .qn-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qn-root .qn-item{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 11px;
  background: #f6f6f9 !important;
  color: #3a3a3a !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.qn-root .qn-item:hover{ background: #efeaf7 !important; border-color: #d9ccf2; transform: translateY(-1px); }
.qn-root .qn-item i{ font-size: 12px; color: #9a9aa6 !important; width: 15px; text-align: center; flex-shrink: 0; }
.qn-root .qn-item span{ color: inherit !important; }
.qn-root .qn-item.qn-active{ background: #6C3FC5 !important; color: #fff !important; border-color: #6C3FC5; cursor: default; }
.qn-root .qn-item.qn-active:hover{ transform: none; }
.qn-root .qn-item.qn-active i{ color: #fff !important; }

/* ---------- 모바일 (바텀시트) ---------- */
@media (max-width: 768px){
  .qn-root .qn-fab{
    right: 16px;
    bottom: 16px;
    padding: 0;
    width: 54px;
    height: 54px;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(108,63,197,.5);
  }
  .qn-root .qn-fab .qn-fab-label{ display: none; }
  .qn-root .qn-fab i{ font-size: 18px; }

  .qn-root .qn-panel{
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    border-radius: 20px 20px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    transform-origin: bottom center;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .2s ease, visibility .28s ease;
  }
  .qn-root.qn-open .qn-panel{ transform: translateY(0); }

  .qn-root .qn-handle{
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: #dcdce2;
    margin: 2px auto 12px;
  }
  .qn-root .qn-head{ margin-bottom: 12px; }
  .qn-root .qn-item{ padding: 12px 12px; font-size: 13px; }
}

@media (max-width: 360px){
  .qn-root .qn-grid{ grid-template-columns: 1fr; }
}