/* ============================================================
   앱으로 추가 안내 — 왼쪽에 떠 있는 네모 칸
   ------------------------------------------------------------
   예전엔 화면 아래 가로로 긴 띠였는데, 눈이 아파서 작은 네모로 바꿨습니다.
   (shared/pwa.js 가 필요할 때만 만들어 붙입니다)
   ============================================================ */
.luv-inst{
  position:fixed; left:18px; bottom:18px; z-index:9000;
  width:196px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:18px 15px 15px;
  text-align:center;
  font-family:'Pretendard','Malgun Gothic',sans-serif;
  background:rgba(255,255,255,.94);
  border:1.5px solid #f6dde6; border-radius:22px;
  box-shadow:0 16px 40px rgba(255,111,168,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:translateY(18px) scale(.94); opacity:0;
  transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .34s;
  animation:luvInstFloat 5.5s ease-in-out infinite 1s;
}
.luv-inst.on{ transform:none; opacity:1; }
@keyframes luvInstFloat{
  0%,100%{ margin-bottom:0; }
  50%    { margin-bottom:7px; }
}

.luv-inst img{ width:54px; height:54px; border-radius:16px; flex:0 0 auto;
  box-shadow:0 6px 14px rgba(255,111,168,.24); }
.luv-inst .tx{ width:100%; }
.luv-inst .t1{ font-family:'Jua',sans-serif; font-weight:400;
  font-size:15px; letter-spacing:-.2px; color:#3f3833; line-height:1.35; }
.luv-inst .t2{ margin-top:5px; font-size:11.5px; line-height:1.55; color:#8b8078; }

.luv-inst .go{
  width:100%; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:800; color:#fff;
  padding:11px 10px; border:none; border-radius:999px;
  background:linear-gradient(135deg,#ff6fa8,#ff96c0);
  box-shadow:0 7px 16px rgba(255,111,168,.3);
  transition:transform .16s;
}
.luv-inst .go:hover{ transform:translateY(-1px); }

/* 닫기 — 오른쪽 위 모서리 */
.luv-inst .no{
  position:absolute; top:7px; right:8px;
  width:26px; height:26px; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1; color:#c0b6ae;
  border:none; border-radius:50%; background:transparent;
  transition:.16s;
}
.luv-inst .no:hover{ color:#3f3833; background:#fdf3f7; }

/* 아이폰 안내는 설치 단추 없이 방법만 */
.luv-inst.ios .t2 b{ color:#d43c7d; }

/* 폰에서는 아래쪽 가운데 (왼쪽에 두면 손가락에 걸림) */
@media (max-width:520px){
  .luv-inst{ left:12px; right:12px; bottom:12px; width:auto;
    flex-direction:row; text-align:left; gap:11px; padding:12px 13px;
    animation:none; }
  .luv-inst img{ width:42px; height:42px; border-radius:13px; }
  .luv-inst .tx{ flex:1; min-width:0; }
  .luv-inst .t1{ font-size:14px; }
  .luv-inst .t2{ font-size:11.5px; }
  .luv-inst .go{ width:auto; flex:0 0 auto; padding:10px 15px; font-size:12.5px; }
  .luv-inst .no{ position:static; width:22px; height:22px; }
}

html[data-theme="dark"] .luv-inst{
  background:rgba(28,26,48,.94); border-color:#332e57;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
html[data-theme="dark"] .luv-inst .t1{ color:#efeaff; }
html[data-theme="dark"] .luv-inst .t2{ color:#a79fc4; }
html[data-theme="dark"] .luv-inst .no:hover{ color:#efeaff; background:#2b2745; }

@media (prefers-reduced-motion:reduce){
  .luv-inst{ animation:none; transition:none; }
}