/* レスポンシブ調整。モバイルファースト。iPhone幅390pxで崩れないこと。 */

/* 幅が狭い端末 (iPhone SE等) */
@media (max-width: 360px) {
  .topbar-location {
    font-size: 1rem;
  }

  .main-level-symbol {
    font-size: 2.6rem;
  }

  .main-meta {
    grid-template-columns: 1fr;
  }
}

/* ランドスケープでも破綻しないよう、ナビ高さ分の余白を確保 */
@media (orientation: landscape) and (max-height: 500px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .nav-btn {
    min-height: 44px;
    flex-direction: row;
    gap: 6px;
  }

  .main-level-symbol {
    font-size: 2.4rem;
  }
}

/* タブレット以上 */
@media (min-width: 700px) {
  .main-meta {
    grid-template-columns: repeat(4, 1fr);
  }

  .tl-card {
    width: 104px;
  }
}