/* ==========================================================================
   member.css — 会員向け案内ページ固有スタイル
   ==========================================================================
   責務:
   - html/brand/member/ 向けのレイアウト・余白
   - .button-grid は汎用化未定のため本ファイルに集約
   ========================================================================== */

/* --------------------------------------------------------------------------
   会員ページ main 内の余白（本ファイルは member のみで読み込み）
   -------------------------------------------------------------------------- */
/* お知らせ（HTML は notice-list 構造のまま。Figma: 16/28・Regular・0.32px・Black） */
.member-news {
   margin-block-start: 20px;
}

.member-news {
   .notice-list {
      color: var(--color-black);
   }

   .notice-list__item {
      flex-direction: column;
   }

   .notice-list__item+.notice-list__item {
      margin-top: 12px;
   }

   .notice-list__date,
   .notice-list__text {
      font-size: 1rem
   }

   .notice-list__text {
      margin-left: 0;
   }

   html[data-viewport="tablet"] &,
   html[data-viewport="desktop"] & {
      .notice-list__item {
         flex-direction: row;
      }

      .notice-list__item+.notice-list__item {
         margin-top: 0;
      }

      .notice-list__text {
         margin-left: 8px;
      }
   }
}

/* --------------------------------------------------------------------------
   Block: member-page（会員向け案内メインコピー領域）
   -------------------------------------------------------------------------- */
.member-page-subhead {
   margin: 0;
   margin-block-start: 20px;
}

.member-page-subhead+.button-grid {
   margin-block-start: 12px;
}

.button-grid {
   margin-block-start: 20px;
}

/* --------------------------------------------------------------------------
   button-grid（会員ページ専用・汎用化時は components へ移動を検討）
   -------------------------------------------------------------------------- */
.button-grid {
   display: flex;
   flex-direction: column;
   gap: 12px;

   .button {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
   }

   html[data-viewport="tablet"] &,
   html[data-viewport="desktop"] & {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 24px;
      row-gap: 16px;
   }
}