/* =========================================================
   USOMAP / mobile — 900px 以下ではパネルをボトムシートにする
   ========================================================= */
.sheet-handle{display:none}

@media (max-width:900px){
  body{overflow:auto}
  /* ヘッダーと設定バーのあいだを main が埋め、中身を縦中央に置く */
  .wrap{flex-direction:column;min-height:calc(100vh - 116px)}
  @supports (height:100dvh){ .wrap{min-height:calc(100dvh - 116px)} }
  main{order:1;padding:10px 10px 8px;min-height:0;flex:1;justify-content:center}
  /* 幅で決まる高さを先に確定させる（4:3）。上下の無駄な余白が出ない */
  .stagewrap{flex:none;aspect-ratio:4/3;height:auto;max-height:62vh}

  aside{
    order:2;position:fixed;left:0;right:0;bottom:0;width:100%;flex:none;
    max-height:52vh;border-right:none;border-top:none;
    border-radius:14px 14px 0 0;z-index:40;box-shadow:0 -12px 40px rgba(0,0,0,.5);
    transform:translateY(calc(100% - 58px - env(safe-area-inset-bottom)));
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    /* 上の余白は 0。残すと帯の上に暗い隙間が見え、帯の下端も画面外へはみ出す */
    padding-top:0;
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  aside.open{transform:translateY(0)}

  /* 閉じているときは「押せる帯」だと分かるように、真鍮色で持ち上げる */
  .sheet-handle{
    display:flex;align-items:center;justify-content:center;gap:10px;
    height:58px;cursor:pointer;position:sticky;top:0;z-index:5;
    padding-bottom:env(safe-area-inset-bottom);
    background:linear-gradient(180deg,#3a2d17,#2b2216);
    border-top:1px solid var(--brass-d);
    border-bottom:1px solid var(--brass-d);
    border-radius:14px 14px 0 0;
    font-family:var(--jp);font-size:13.5px;font-weight:600;
    letter-spacing:.1em;color:var(--brass);
    box-shadow:inset 0 1px 0 rgba(203,162,90,.35);
  }
  .sheet-handle .bar{
    width:32px;height:3px;border-radius:2px;background:var(--brass);opacity:.55;
  }
  .sheet-handle .chev{
    width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .26s;flex:none;
  }
  aside.open .sheet-handle{
    background:linear-gradient(180deg,var(--bg2),var(--bg1));
    border-top-color:var(--line);
    border-bottom-color:var(--line-2);
    box-shadow:none;
  }
  aside.open .sheet-handle .chev{transform:rotate(180deg)}

  /* 閉じている間だけ、そこにあることを知らせる */
  aside:not(.open) .sheet-handle{animation:sheetHint 2.6s ease-in-out 1.2s 3}
  @keyframes sheetHint{
    0%,100%{box-shadow:inset 0 1px 0 rgba(203,162,90,.35)}
    50%    {box-shadow:inset 0 1px 0 rgba(203,162,90,.35),0 -6px 22px rgba(203,162,90,.30)}
  }
  @media (prefers-reduced-motion:reduce){
    aside:not(.open) .sheet-handle{animation:none}
  }

  /* 設定を開いているあいだも地図が見えるようにする。
     中央寄せをやめて上へ詰め、ツールバーは畳んで地図の場所を空ける */
  aside.open ~ main{justify-content:flex-start}
  aside.open ~ main .stagewrap{max-height:36vh}
  aside.open ~ main .stagebar{display:none}

  .brand .sub{display:none}
  .seal{display:none}
  .hdr-acts .lbl{display:none}
  .ibtn{padding:0 9px}
  .stagebar{margin-bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  header{padding:9px 11px;gap:9px}
  .brand h1{letter-spacing:.18em}
}