/* MOVETIME PWA 설치 안내 - PC 앱창/모바일 하단겹침 수정 버전 */
.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{
    bottom:26px;
    width:min(92vw,680px);
  }
}

@media (max-width:860px){
  .mv-pwa-install{
    /* 모바일 하단 고정 카테고리/브라우저 UI에 가리지 않도록 위로 올림 */
    bottom:calc(var(--mv-pwa-mobile-offset, 94px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width:520px){
  .mv-pwa-install{
    bottom:calc(var(--mv-pwa-mobile-offset, 94px) + env(safe-area-inset-bottom, 0px));
    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;
  }
}


/* PC에서 설치한 PWA 앱창이 좁게 열릴 때 레이아웃이 무너지는 것을 방지 */
html.mv-pwa-standalone-desktop,
html.mv-pwa-standalone-desktop body{
  min-width:1180px;
  overflow-x:auto;
}

html.mv-pwa-standalone-desktop .mv-pwa-install{
  display:none !important;
}

.mv-pwa-pc-tip{
  position:fixed;
  left:50%;
  top:14px;
  z-index:100001;
  transform:translateX(-50%);
  max-width:calc(100vw - 28px);
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(230,190,90,.55);
  background:rgba(7,17,31,.94);
  color:#fff3bf;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  white-space:nowrap;
}

.mv-pwa-pc-tip[hidden]{
  display:none !important;
}

@media (max-width:860px){
  .mv-pwa-pc-tip{ display:none !important; }
}

@media (max-width:860px){
  .mv-pwa-install{
    bottom:calc(var(--mv-pwa-mobile-offset, 104px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width:520px){
  .mv-pwa-install{
    bottom:calc(var(--mv-pwa-mobile-offset, 104px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* MOVETIME PC 오른쪽 Today 하단 앱설치 고정 버튼 */
#mvPwaTodayInstall,
.mv-pwa-today-box,
.mv-pwa-today-box *{
  box-sizing:border-box;
}

#mvPwaTodayInstall{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.mv-pwa-today-box{
  width:104px;
  margin:10px auto 0;
  padding:8px 5px 8px;
  border-radius:12px;
  border:1px solid rgba(216,184,106,.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,224,136,.24), transparent 42%),
    linear-gradient(180deg,#121b2a 0%,#060a12 62%,#1b1207 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.09);
  text-align:center;
  overflow:hidden;
  z-index:9990;
  clear:both;
}

.mv-pwa-today-logo{
  width:60px;
  height:42px;
  margin:0 auto 7px;
  padding:4px;
  border-radius:12px;
  background:#000;
  border:1px solid rgba(255,224,130,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

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

.mv-pwa-today-kicker{
  color:#f7d878;
  font-size:10px;
  font-weight:900;
  letter-spacing:.55px;
  line-height:1.1;
  margin-bottom:4px;
}

.mv-pwa-today-box strong{
  display:block;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.3px;
  margin-bottom:8px;
}

.mv-pwa-today-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:78px;
  height:27px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ffe18a 0%,#d8a532 54%,#9d6817 100%);
  color:#050505;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(205,151,38,.28), inset 0 1px 0 rgba(255,255,255,.45);
}

.mv-pwa-today-btn:hover{
  transform:translateY(-1px);
}

.mv-pwa-today-box.mv-pwa-fixed-fallback{
  display:none !important;
}
.mv-pwa-today-box.mv-pwa-inside-today{
  margin-top:0;
}

@media (max-width:1500px){
  .mv-pwa-today-box.mv-pwa-fixed-fallback{
    right:8px;
  }
}

@media (max-width:1240px){
  .mv-pwa-today-box,
  .mv-pwa-today-box.mv-pwa-fixed-fallback{
    display:none !important;
  }
}

@media (max-width:860px){
  #mvPwaInstall,
  .mv-pwa-install{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  #mvPwaTodayInstall,
  .mv-pwa-today-box{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}