/* 넘버원맛집 PWA 설치·독립 스크롤 컨테이너 v2.9.1 */

/* Android PWA/웹뷰에서 html 또는 body에 남은 스크롤 잠금의 영향을 받지 않도록
   평상시 문서의 세로 스크롤 컨테이너를 명확하게 지정합니다. */
html{
  min-height:100%;
  height:auto;
  overflow-y:auto;
  overscroll-behavior-y:auto;
}
body.food-site{
  min-height:100%;
  height:auto;
  max-height:none;
  overflow-y:visible;
  overscroll-behavior-y:auto;
  touch-action:auto;
  -webkit-overflow-scrolling:touch;
}
@supports (overflow:clip){
  html,body.food-site{overflow-x:clip}
}
body.food-site.menu-open,body.food-site.pwa-modal-open{overflow:hidden;touch-action:none}
.food-store-grid.is-list-page,.food-store-grid.is-list-page .food-store-card{
  touch-action:pan-y;
}
.food-filter-bar,.food-quick-scroll{
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
}

/* 설치 앱에서는 설치 모달이 다시 나타날 이유가 없으므로 보이지 않는 오버레이와
   pwa-modal-open 잔여 상태가 화면 스크롤을 막지 못하게 합니다. */
@media (display-mode:standalone){
  html{height:auto!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior-y:auto!important}
  body.food-site:not(.menu-open){
    position:static!important;
    inset:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:visible!important;
    overscroll-behavior-y:auto!important;
    touch-action:auto!important;
  }
  body.food-site.menu-open{overflow:hidden!important;touch-action:none!important}
  .food-pwa-modal,.food-pwa-banner{display:none!important}
}
html.pwa-installed{height:auto!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior-y:auto!important}
html.pwa-installed body.food-site:not(.menu-open){
  position:static!important;
  inset:auto!important;
  top:auto!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  touch-action:auto!important;
}
html.pwa-installed .food-pwa-modal,html.pwa-installed .food-pwa-banner{display:none!important}

/* v2.4.1 인앱 브라우저 설치 안내 디자인 유지 */
.food-pwa-modal-description{max-width:350px;margin:9px auto 0;color:#6b756e;font-size:11px;line-height:1.65;word-break:keep-all}
.food-pwa-browser-alert{margin-top:18px;padding:15px 14px;border:1px solid #ffd1c2;border-radius:16px;background:#fff6f2;text-align:left}
.food-pwa-browser-alert strong{display:block;color:#bc4327;font-size:13px;letter-spacing:-.035em}
.food-pwa-browser-alert p{margin:6px 0 0;color:#6d625d;font-size:11px;line-height:1.65}
.food-pwa-browser-actions{display:grid;gap:9px;margin-top:13px}
.food-pwa-browser-action{display:flex;align-items:center;justify-content:center;gap:9px;min-height:49px;padding:0 15px;border:1px solid #dfe5df;border-radius:14px;background:#fff;color:#2d3831!important;font-size:12px;font-weight:950;text-decoration:none;cursor:pointer}
.food-pwa-browser-action:active{transform:translateY(1px)}
.food-pwa-browser-action.is-chrome{border-color:#ff8b67;background:linear-gradient(135deg,#ff5a36,#ff7f4e);color:#fff!important;box-shadow:0 10px 24px rgba(255,90,54,.2)}
.food-pwa-browser-action.is-samsung{border-color:#cfd8ff;background:#f4f6ff;color:#2744a7!important}
.food-pwa-browser-action.is-copy{border:0;background:#f1f4f1;color:#5b665f!important}
.food-pwa-browser-badge{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.92);color:#e14e2e;font-size:12px;font-weight:950;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.food-pwa-browser-action.is-samsung .food-pwa-browser-badge{background:#fff;color:#2949b8}
.food-pwa-inapp-tip{margin:12px 0 0;color:#7b857e;font-size:10px;line-height:1.65;text-align:left}
.food-pwa-inline-inapp{width:min(100%,520px);margin:16px auto 0;padding:15px;border:1px solid #ffd0c0;border-radius:17px;background:#fff7f3;text-align:left}
.food-pwa-inline-inapp strong{display:block;color:#b9442a;font-size:13px}
.food-pwa-inline-inapp p{margin:5px 0 12px;color:#6d756f;font-size:11px;line-height:1.6}
.food-pwa-inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.food-pwa-inline-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;background:#ff5a36;color:#fff!important;font-size:11px;font-weight:900;text-decoration:none}
.food-pwa-inline-actions a+ a{background:#eef1ff;color:#2e49ac!important}
[data-pwa-install][aria-busy="true"]{pointer-events:none;opacity:.7}
html.pwa-inapp-browser .food-pwa-banner-install{min-width:108px}
@media(max-width:380px){.food-pwa-inline-actions{grid-template-columns:1fr}.food-pwa-modal-card{padding-inline:17px}}

/* 회원 메뉴가 추가된 v2.5.0 하단 메뉴는 설치 상태와 관계없이 5칸을 유지합니다. */
.food-mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(display-mode:standalone){.food-mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
html.pwa-installed .food-mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important}


/* --------------------------------------------------------------------------
   v2.9.1 설치 앱 스크롤 구조
   Android PWA에서 html/body 잠금 상태가 남아도 전체 콘텐츠를 별도 컨테이너가
   직접 스크롤하도록 구성합니다. 일반 브라우저에서는 기존 body 스크롤을 유지합니다.
   -------------------------------------------------------------------------- */
:root{
  --food-app-viewport-height:100dvh;
  --food-app-bottom-space:calc(72px + env(safe-area-inset-bottom));
}
.food-app-scroll{
  display:block;
  width:100%;
  min-height:100%;
  outline:0;
}
.food-pwa-modal[hidden],
.food-pwa-banner[hidden],
.food-pwa-update[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media (display-mode:standalone){
  html,
  body.food-site{
    width:100%!important;
    min-height:0!important;
    height:100%!important;
    max-height:100%!important;
    margin:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  body.food-site,
  body.food-site.menu-open,
  body.food-site.pwa-modal-open{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    padding-bottom:0!important;
    touch-action:auto!important;
  }
  .food-app-scroll{
    position:fixed!important;
    z-index:0;
    left:0!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    height:var(--food-app-viewport-height,100dvh)!important;
    max-height:var(--food-app-viewport-height,100dvh)!important;
    padding:0 0 var(--food-app-bottom-space)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-x:none!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-behavior:smooth;
    scrollbar-gutter:stable;
  }
  .food-app-scroll>*{
    touch-action:pan-y pinch-zoom;
  }
  .food-app-scroll input,
  .food-app-scroll textarea,
  .food-app-scroll select,
  .food-app-scroll button,
  .food-app-scroll a{
    touch-action:manipulation;
  }
  .food-nav{
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .food-pwa-modal,.food-pwa-banner{display:none!important}
}

/* JS 감지 클래스는 display-mode 미지원 브라우저에서도 같은 구조를 적용합니다. */
html.pwa-installed,
html.pwa-installed body.food-site{
  width:100%!important;
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  margin:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
html.pwa-installed body.food-site,
html.pwa-installed body.food-site.menu-open,
html.pwa-installed body.food-site.pwa-modal-open{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  padding-bottom:0!important;
  touch-action:auto!important;
}
html.pwa-installed .food-app-scroll{
  position:fixed!important;
  z-index:0;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  width:100%!important;
  height:var(--food-app-viewport-height,100dvh)!important;
  max-height:var(--food-app-viewport-height,100dvh)!important;
  padding:0 0 var(--food-app-bottom-space)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-x:none!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y pinch-zoom!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}
html.pwa-installed .food-app-scroll>*{touch-action:pan-y pinch-zoom}
html.pwa-installed .food-app-scroll input,
html.pwa-installed .food-app-scroll textarea,
html.pwa-installed .food-app-scroll select,
html.pwa-installed .food-app-scroll button,
html.pwa-installed .food-app-scroll a{touch-action:manipulation}
html.pwa-installed .food-nav{touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important}

/* 오래된 잠금 클래스가 남더라도 설치 앱의 세로 스크롤은 유지합니다. */
html.pwa-installed body.food-site.menu-open .food-app-scroll,
html.pwa-installed body.food-site.pwa-modal-open .food-app-scroll{
  overflow-y:auto!important;
  touch-action:pan-y pinch-zoom!important;
}

@supports not (height:100dvh){
  :root{--food-app-viewport-height:100vh}
}


/* v2.9.1 설치 준비·설치됨 상태 안내 */
.food-pwa-install-status{
  width:min(100%,540px);margin:12px 0 0;padding:11px 14px;border:1px solid #e2e7e2;border-radius:13px;
  background:#f7f9f7;color:#657068;font-size:12px;font-weight:800;line-height:1.55;word-break:keep-all
}
.food-pwa-install-status[data-state="ready"]{border-color:#a9dec5;background:#eefaf4;color:#147a4d}
.food-pwa-install-status[data-state="preparing"]{border-color:#ffd0c1;background:#fff6f2;color:#b84a2d}
.food-pwa-install-status[data-state="installed"]{border-color:#cbd6ff;background:#f3f5ff;color:#324ca6}
.food-pwa-install-status[data-state="manual"]{border-color:#e3dfc1;background:#fffdf0;color:#746822}
.food-pwa-retry{width:100%;margin-top:12px;border:0!important}
html.pwa-installable [data-pwa-install]{box-shadow:0 12px 26px rgba(255,90,54,.2)}
@media(max-width:759px){.food-pwa-install-status{margin-left:auto;margin-right:auto;text-align:center}}