/* BondCare Phase 1-A — Responsive
   主基準 390px。375px と 430px でも崩れないこと。
   PC はスマホ画面を引き伸ばさず中央配置。 */

/* 375px 以下: 余白と一部フォントを微調整（横スクロールを出さない） */
@media (max-width: 375px) {
  .app-main {
    padding-left: 16px;
    padding-right: 16px;
  }
  .login-title {
    font-size: 30px;
  }
  .greeting {
    font-size: 21px;
  }
  .metric__value {
    font-size: 18px;
  }
  .pd-action {
    font-size: 11px;
  }
  .tabs__item {
    font-size: 12px;
  }
}

/* 430px 付近: 余白をやや広げて間延びを防ぐ */
@media (min-width: 411px) and (max-width: 599px) {
  .app-main {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* PC / タブレット: 中央配置。背景に静かな余白 */
@media (min-width: 600px) {
  body {
    padding: 24px 0;
  }
  .app-shell {
    border-radius: 22px;
    overflow: hidden;
    min-height: calc(100dvh - 48px);
  }
  .app-nav {
    border-radius: 0 0 22px 22px;
  }
}

/* 画面が非常に高い環境でナビが中央シェルに追従するよう保険 */
@media (min-width: 600px) and (min-height: 900px) {
  .app-shell {
    min-height: 860px;
  }
}