/* MOVETIME PWA 설치 안내 - 로고 적용 버전 */
.mv-pwa-install,
.mv-pwa-install *{
  box-sizing:border-box;
}

/* hidden 속성이 CSS display:flex보다 우선 적용되도록 강제 */
.mv-pwa-install[hidden],
.mv-pwa-ios-guide[hidden]{
  display:none !important;
}

.mv-pwa-install{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:99999;
  width:min(94vw,720px);
  min-height:84px;
  padding:13px 16px 13px 14px;
  border:1px solid rgba(230,190,90,.62);
  border-radius:22px;
  background:
    radial-gradient(circle at left top, rgba(255,219,120,.20), transparent 38%),
    linear-gradient(135deg, rgba(9,18,32,.98), rgba(4,9,18,.98) 52%, rgba(36,25,8,.98));
  box-shadow:0 20px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1);
  transform:translate(-50%, 130%);
  opacity:0;
  display:flex;
  align-items:center;
  gap:13px;
  transition:transform .42s ease, opacity .42s ease;
  overflow:hidden;
}

.mv-pwa-install:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform:translateX(-110%) skewX(-18deg);
  animation:mvPwaShine 5.4s infinite;
  pointer-events:none;
}

.mv-pwa-install.is-show{
  transform:translate(-50%, 0);
  opacity:1;
}

.mv-pwa-close{
  position:absolute;
  right:10px;
  top:8px;
  width:24px;
  height:24px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#f5e7b5;
  font-size:18px;
  line-height:20px;
  cursor:pointer;
}

.mv-pwa-logo{
  position:relative;
  z-index:1;
  flex:0 0 76px;
  width:76px;
  height:60px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 7px;
  background:#000;
  border:1px solid rgba(255,224,130,.34);
  box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 0 4px rgba(255,216,107,.06);
  overflow:hidden;
}

.mv-pwa-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.mv-pwa-copy{
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  padding-right:4px;
}

.mv-pwa-kicker{
  display:inline-flex;
  margin-bottom:3px;
  color:#f8d978;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
}

.mv-pwa-copy strong{
  display:block;
  color:#fff;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.25;
}

.mv-pwa-copy p{
  margin:4px 0 0;
  color:#d9e4f3;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
}

.mv-pwa-btn{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  min-width:118px;
  height:42px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ffe28a 0%,#d4a23a 48%,#9b6615 100%);
  color:#080808;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(204,151,38,.36), inset 0 1px 0 rgba(255,255,255,.55);
  white-space:nowrap;
}

.mv-pwa-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(224,171,47,.46), 0 0 0 4px rgba(255,216,107,.12);
}

.mv-pwa-ios-guide{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(0,0,0,.58);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.mv-pwa-ios-box{
  position:relative;
  width:min(100%,420px);
  padding:24px 20px 22px;
  border-radius:24px;
  border:1px solid rgba(230,190,90,.55);
  background:linear-gradient(135deg,#101928,#060b12 60%,#241908);
  box-shadow:0 28px 70px rgba(0,0,0,.45);
  text-align:center;
}

.mv-pwa-ios-box strong{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1.45;
}

.mv-pwa-ios-box p{
  margin:10px 0 0;
  color:#dfe8f4;
  font-size:14px;
  line-height:1.55;
}

.mv-pwa-ios-close{
  position:absolute;
  right:12px;
  top:10px;
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

@keyframes mvPwaShine{
  0%{transform:translateX(-120%) skewX(-18deg);}
  42%{transform:translateX(120%) skewX(-18deg);}
  100%{transform:translateX(120%) skewX(-18deg);}
}

@media (min-width:861px){
  .mv-pwa-install{
    display:none !important;
  }
}

@media (max-width:520px){
  .mv-pwa-install{
    bottom:12px;
    width:calc(100vw - 20px);
    min-height:76px;
    padding:12px 12px;
    border-radius:19px;
    gap:10px;
  }
  .mv-pwa-logo{
    flex-basis:62px;
    width:62px;
    height:50px;
    border-radius:14px;
    padding:5px 6px;
  }
  .mv-pwa-copy strong{
    font-size:15px;
  }
  .mv-pwa-copy p{
    display:none;
  }
  .mv-pwa-btn{
    min-width:92px;
    height:38px;
    padding:0 12px;
    font-size:13px;
  }
}

@media (max-width:380px){
  .mv-pwa-logo{
    flex-basis:52px;
    width:52px;
    height:44px;
  }
  .mv-pwa-kicker{
    font-size:10px;
  }
  .mv-pwa-copy strong{
    font-size:14px;
  }
  .mv-pwa-btn{
    min-width:82px;
    padding:0 10px;
    font-size:12px;
  }
}