/* 광주버블여지도 · 화면 가장자리의 슬림 3D 프레임 (2026-11-01)
   기존 원본 사이트의 레이아웃, 링크, 글꼴, 지도, 로그인 및 스크립트는 변경하지 않습니다.
   position:fixed + pointer-events:none: 프레임은 공간을 차지하거나 터치를 막지 않습니다. */
#bubble-viewport-frame {
  position:fixed;
  inset:0;
  z-index:2147483630;
  pointer-events:none !important;
  border:0;
  border-radius:0;
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.98),
    inset 0 0 0 3px rgba(255,236,245,.96),
    inset 0 0 0 5px rgba(232,151,185,.73),
    inset 0 0 0 7px rgba(255,255,255,.64),
    inset 0 0 9px 7px rgba(125,63,98,.23),
    inset 0 0 21px 10px rgba(186,85,130,.14);
  background:transparent !important;
}
#bubble-viewport-frame::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.91),rgba(255,255,255,0)) top / 100% 8px no-repeat,
    linear-gradient(0deg,rgba(135,62,96,.2),rgba(255,255,255,.92)) bottom / 100% 8px no-repeat,
    linear-gradient(90deg,rgba(255,255,255,.98),rgba(248,203,223,.24),transparent) left / 8px 100% no-repeat,
    linear-gradient(270deg,rgba(255,255,255,.93),rgba(245,194,218,.16),transparent) right / 8px 100% no-repeat;
  opacity:.87;
}
#bubble-viewport-frame::after {
  content:'';
  position:absolute;
  inset:7px 6px 8px;
  border:1px solid rgba(255,255,255,.41);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.48);
}
#bubble-viewport-frame .bubble-gloss-top {
  position:absolute;
  top:1px;left:12%;width:76%;height:4px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92) 20%,white 50%,rgba(255,255,255,.88) 82%,transparent);
  filter:blur(.6px);
}
#bubble-viewport-frame .bubble-gloss-left {
  position:absolute;
  top:12%;bottom:18%;left:1px;width:4px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.96) 26%,white 54%,transparent);
  filter:blur(1px);
}
#bubble-viewport-frame .bubble-frame-corner {
  position:absolute;width:52px;height:52px;
  border:0 solid rgba(255,255,255,.94);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.5));
}
#bubble-viewport-frame .bubble-frame-corner.tl{top:0;left:0;border-width:2px 0 0 2px;border-top-left-radius:13px}
#bubble-viewport-frame .bubble-frame-corner.tr{top:0;right:0;border-width:2px 2px 0 0;border-top-right-radius:13px}
#bubble-viewport-frame .bubble-frame-corner.bl{bottom:0;left:0;border-width:0 0 2px 2px;border-bottom-left-radius:13px}
#bubble-viewport-frame .bubble-frame-corner.br{bottom:0;right:0;border-width:0 2px 2px 0;border-bottom-right-radius:13px}
@media (max-width:600px) {
  #bubble-viewport-frame {
    box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 2px rgba(245,209,224,.95),
    inset 0 0 0 3px rgba(223,140,176,.65),inset 0 0 0 4px rgba(255,255,255,.55),
    inset 0 0 9px 5px rgba(118,53,91,.17);
  }
  #bubble-viewport-frame::before {
    background:linear-gradient(180deg,rgba(255,255,255,.9),transparent) top / 100% 5px no-repeat,
      linear-gradient(0deg,rgba(131,63,98,.16),rgba(255,255,255,.8)) bottom / 100% 5px no-repeat;
  }
  #bubble-viewport-frame::after {inset:4px;border-color:rgba(255,255,255,.25)}
  #bubble-viewport-frame .bubble-frame-corner{width:27px;height:27px}
  #bubble-viewport-frame .bubble-gloss-top{height:3px}
}
@media print {#bubble-viewport-frame{display:none!important}}