/* assets/css/overlay.css の末尾に追加 */

/* --- ヘッダーナビゲーション調整 --- */

/* マイページ・新規登録ボタンを目立たせる */
.nav-btn {
  padding: 0.6rem 1.2rem !important;
  font-weight: bold;
  border-radius: 20px !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* PC表示時の調整 */
@media (min-width: 901px) {
  .site-header .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-left: 2rem;
  }
  .nav-spacer {
    /* PCでは右寄せ用スペーサーを有効化 */
    display: block;
    flex-grow: 1; 
  }
  .hamburger {
    display: none;
  }
}

/* スマホ表示時の調整 (900px以下) */
@media (max-width: 900px) {
  .nav-spacer {
    display: none; /* スマホではスペーサー不要 */
  }
  
  /* メニュー展開時のスタイル上書き */
  .nav {
    gap: 12px;
    align-items: stretch; /* ボタンを横幅いっぱいに */
  }
  
  .nav-btn {
    justify-content: center; /* ボタン内の文字を中央寄せ */
    background: var(--accent); /* overlay.cssのアクセントカラーを使用 */
    color: #fff !important;
    border: none;
    margin-top: 8px;
  }
  
  /* 通常のリンクも押しやすく */
  .nav-item {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
  }
}