@media(max-width:700px){
  body:has(.modal-back){overflow:hidden}
  .modal-back{
    z-index:100;
    padding:max(8px,env(safe-area-inset-top)) 0 0;
    place-items:end center;
  }
  .modal{
    display:flex;
    flex-direction:column;
    width:100%;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)));
    overflow:hidden;
    border-radius:20px 20px 0 0;
  }
  .modal-head{position:relative;top:auto;flex:0 0 auto;z-index:2}
  .modal>.form{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .modal>.mobile-modal-foot{
    position:relative;
    inset:auto;
    flex:0 0 auto;
    width:100%;
    margin:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -8px 22px rgba(20,39,82,.08);
    z-index:3;
  }
  .modal>.mobile-modal-foot .btn{flex:1;min-height:46px}
}