/* ==========================================================================
   Common Header Add-on Styles
   既存の .header / .header-inner / .logo / .nav / .btn は触らず、
   ログイン状態表示まわりだけここに追加
   ========================================================================== */

/* ヘッダー右側のボタン群 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ナビのアクティブ状態 */
.nav a.is-current {
  color: var(--primary, #06c755);
  font-weight: 700;
}

/* ログイン中のユーザー表示 */
.header-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(6, 199, 85, 0.06);
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s, transform .1s;
  white-space: nowrap;
}
.header-user:hover {
  background: rgba(6, 199, 85, 0.12);
}
.header-user:active {
  transform: scale(0.98);
}

/* アバター画像 */
.header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f0f0;
}

/* アバター画像がない時のイニシャル表示 */
.header-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary, #06c755);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.header-username {
  font-family: 'LINE Seed JP', sans-serif;
}

/* ログアウトボタン（小さく） */
.btn-logout {
  font-size: 12px !important;
  padding: 8px 12px !important;
  color: #999 !important;
}
.btn-logout:hover {
  color: var(--primary, #06c755) !important;
}

/* ==========================================================================
   モバイル対応
   ========================================================================== */
@media (max-width: 768px) {
  /* ユーザー名は隠す（アイコンだけ） */
  .header-username {
    display: none;
  }
  .header-user {
    padding: 6px;
    border-radius: 50%;
  }
  /* ログアウトボタンも隠す（マイページ内に置く） */
  .btn-logout {
    display: none;
  }
}