/* --------------------------------
 * ヘッダー
 * -------------------------------- */
.global-header {
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* ヘッダーの高さ */
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    z-index: 1000; /* 他の要素より手前に表示 */
}
.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
}
.header-center {
    flex-grow: 1; /* 中央が残りのスペースを埋める */
    justify-content: center; /* 検索バーなどを中央に */
}
.header-right {
    justify-content: flex-end; /* 右寄せ */
}

/* --------------------------------
 * ユーザーガジェット (新規追加)
 * -------------------------------- */
.user-gadget {
    position: relative; /* ドロップダウンの基準位置になります */
    margin-left: 16px; /* 他の要素との間隔 */
}

.user-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%; /* アイコンを円形に */
    overflow: hidden; /* 画像のはみだし防止 */
    width: 32px;  /* アイコンサイズ指定 */
    height: 32px; /* アイコンサイズ指定 */
    display: flex; /* 画像を中央揃え */
    align-items: center;
    justify-content: center;
}

.user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像がコンテナに収まるように */
}

/* 画像がない場合のイニシャルアイコン */
.user-initial-icon {
    /* アイコンのサイズ (user-icon-btn と同じサイズにする) */
    width: 32px;  
    height: 32px; 
    border-radius: 50%; /* 円形にする */
    
    /* 背景色と文字色 */
    background-color: #607d8b; /* 例: Blue Grey (お好みの色に変更してください) */
    color: #ffffff;
    
    /* 文字を上下左右中央に配置 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 文字のスタイル */
    font-size: 16px; /* アイコンサイズに合わせて調整 */
    font-weight: bold;
    line-height: 1; /* 必須 (flex中央揃えのため) */
    
    /* (お好みで) 文字が選択されないようにする */
    user-select: none; 
}

/* ドロップダウンメニュー本体 */
.user-menu-dropdown {
    display: none; /* ★ 初期状態は非表示 */
    position: absolute;
    top: calc(100% + 10px); /* アイコンの真下（ヘッダー下部から10px） */
    right: 0; /* ガジェットの右端に合わせる */
    width: 200px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 1100; /* ヘッダー(1000)より手前 */
    overflow: hidden; /* 角丸を効かせるため */
}

/* ★ JSでこのクラスをトグルして表示/非表示を切り替える */
.user-menu-dropdown.show {
    display: block;
}

/* メニューのリストスタイル */
.user-menu-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 8px 0; /* メニュー上下の余白 */
}

.user-menu-dropdown li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    white-space: nowrap; /* 折り返さない */
}

.user-menu-dropdown li a:hover {
    background-color: #f5f5f5;
}

/* 区切り線 */
.user-menu-dropdown hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 8px 0;
}
/* ハンバーガーボタンの簡易サンプル */
#menu-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}
#menu-toggle-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #333;
    margin: 4px 0;
}

/* --------------------------------
 * ヘッダーボタン (未ログイン時)
 * -------------------------------- */
.header-btn {
    display: inline-block;
    padding: 6px 16px; /* ボタンの余白 (上下 小 / 左右 大) */
    border: 1px solid #ccc; /* デフォルトの枠線 */
    border-radius: 4px; /* 角丸 */
    text-decoration: none;
    color: #333; /* 文字色 */
    font-size: 14px;
    font-weight: 500; /* やや太め */
    margin-left: 8px; /* ボタン同士の間隔 */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 通常ボタン (ログイン) のホバー時 */
.header-btn:hover {
    background-color: #f5f5f5; /* 背景をうっすらグレーに */
}

/* 目立たせるプライマリボタン (新規登録) */
.header-btn-primary {
    background-color: #007bff; /* 例: 青 (サービスカラーに合わせて変更してください) */
    color: #ffffff; /* 白文字 */
    border-color: #007bff;
}

/* プライマリボタンのホバー時 */
.header-btn-primary:hover {
    background-color: #0056b3; /* 少し濃い青 */
    border-color: #0056b3;
}

.logo {
    text-decoration: none; /* リンクの下線を削除 */
    color: #333; /* ロゴの色 (お好みで変更してください) */
    font-size: 20px; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    margin-left: 16px; /* 左側のハンバーガーボタンとの余白 */
    
    /* 垂直方向の中央揃えを確実にするため */
    display: flex;
    align-items: center;
}

/* ロゴに画像を使う場合は、こちらのコメントアウトを解除 */
.logo img {
    height: 30px; 
    width: auto; 
}


/* --------------------------------
 * サイドバー
 * -------------------------------- */
.sidebar {
    position: fixed; /* 画面左側に固定 */
    top: 60px; /* ヘッダーの高さ分だけ下げる */
    left: 0;
    width: 240px; /* サイドバーの幅 */
    height: calc(100vh - 60px); /* 画面の高さ - ヘッダーの高さ */
    background-color: #f9f9f9;
    border-right: 1px solid #e0e0e0;
    overflow-y: auto; /* メニューが多い場合にスクロール */
    z-index: 900;
    
    /* 初期状態では、自身の幅だけ左側に隠しておく */
    transform: translateX(-240px);
    transition: transform 0.3s ease; /* アニメーション */
}

/* ul (リスト全体) のデフォルトスタイルをリセット */
.sidebar nav ul {
    list-style: none; /* ← これで行頭の黒丸が消えます */
    margin: 0;        /* デフォルトのマージンを削除 */
    padding: 0;       /* デフォルトのパディングを削除 */
}

/* li (リスト項目) のスタイル */
.sidebar nav li {
    margin: 0; /* 余白をリセット */
}

/* a (リンク) のスタイル */
.sidebar nav li a {
    display: block; /* リンク領域をクリック可能なブロックに */
    padding: 12px 20px; /* 余白 */
    text-decoration: none; /* 下線を削除 */
    color: #333; /* 文字色 */
    font-size: 14px;
}

/* リンクにマウスが乗った時のスタイル */
.sidebar nav li a:hover {
    background-color: #e0e0e0; /* 背景色を変更 */
}

/* 区切り線 (もし _header.php で <hr> を使っている場合) */
.sidebar nav hr {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin: 8px 0;
}

/* body.sidebar-open クラスがついたら、スライドイン */
body.sidebar-open .sidebar {
    transform: translateX(0);
}


/* --------------------------------
 * メインコンテンツ
 * -------------------------------- */
.main-content {
    /* サイドバーの開閉に合わせてマージンを動かす */
    margin-left: 0; /* 初期状態 */
    transition: margin-left 0.3s ease; /* アニメーション */
    
    /* * 既存の .container のスタイルと競合する場合は */
    /* padding: 20px; などを調整してください */
    
}

/* body.sidebar-open クラスがついたら、コンテンツを右に押す */
body.sidebar-open .main-content {
    margin-left: 240px; /* サイドバーの幅と同じだけずらす */
}