/* ==============================================================================
* app/assets/stylesheets/shared_sidebar.css
*
* 概要: 全画面共通のサイドバーコンポーネントのスタイル定義。
* ラグジュアリーデザイン・レスポンシブ・アクセシビリティ・テーマ対応を含む。
*
* 更新日: 2026-05-31（Phase F-4 Light 入力補強 / 行数・基準コメント更新）
* リファクタリング基準（CSS / コメント行は行数カウントから除外）:
* 1. 500行未満 → 完璧
* 2. 800行未満 → 問題なし
* 3. 1200行未満 → 注意喚起・リファクタリング要検討
* 4. 1200行以上 → リファクタリング必須
* 現在の実コード行数: 約857行 (2026-05-31 計測) → ⚠️ 注意喚起（要検討レンジ）
*
* 【リファクタリング改善方針案（2026-05-31 追記）】
* 実コードが 800 行を超え「要検討」レンジに入った。責務別の分割を推奨:
* - shared_sidebar_base.css : .sidebar / レイアウト・スクロール
* - shared_sidebar_nav.css : .sidebar-item / ナビゲーション項目
* - shared_sidebar_user.css : .sidebar-user-section / アバター・ランク
* - shared_sidebar_theme.css : [data-theme="light"] / [data-theme="wood"] 上書き
* 注意: テーマ上書きは基底ルールが load された後に読み込む順序を守る（カスケード崩れ防止）。
*
* 【変更履歴（直近2世代）】
* 2026-05-31: Phase F-4 — .luxury-search の Light テーマ白背景 override を追記（入力欄視認性補強）
* 2026-04-18: モバイル viewport 対応
* - @media (max-height: 600px) の .sidebar の min-height: 100vh → 100dvh
* - @media (max-width: 768px) のモバイルドロワー:
* top: 56px → calc(56px + var(--safe-area-top))
* padding-bottom: var(--safe-area-bottom) 追加
* → ログアウト等の最下部メニューが iOS ホームインジケータに
* 被らないようにするため
*
* 【ジュニアエンジニア向け補足（2026-04-18 時点）】
* モバイルドロワー（768px以下のサイドバー）は position: fixed で
* 画面左から slide-in する。top/bottom の基準に safe-area-inset を
* 加えることで、iOS ノッチ・Android ジェスチャーバーと重ならない。
* ============================================================================== */
/* 🌟 ラグジュアリーサイドバー（統一デザイン） */
.sidebar {
width: 280px;
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
backdrop-filter: blur(25px);
border-right: 1px solid var(--border-primary);
display: flex;
flex-direction: column;
flex-shrink: 0;
position: relative;
overflow: hidden;
z-index: 10;
min-height: 0;
box-shadow:
inset 0 1px 0 rgba(255, 215, 0, 0.1),
0 0 50px rgba(255, 215, 0, 0.05);
}
/* サイドバーのシマーエフェクト */
.sidebar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
animation: luxurySidebarShimmer 3s ease-in-out infinite;
z-index: 1;
}
@keyframes luxurySidebarShimmer {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
/* サイドバー右側の装飾ライン */
.sidebar::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%);
z-index: 1;
}
/* サイドバーナビゲーションのスクロールバースタイル */
.sidebar nav::-webkit-scrollbar {
width: 6px;
}
.sidebar nav::-webkit-scrollbar-track {
background: var(--bg-surface);
border-radius: 3px;
}
.sidebar nav::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.3);
border-radius: 3px;
transition: background 0.3s ease;
}
.sidebar nav::-webkit-scrollbar-thumb:hover {
background: rgba(255, 215, 0, 0.5);
}
/* Firefox用のスクロールバースタイル */
.sidebar nav {
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.3) rgba(255, 255, 255, 0.05);
}
/* ロゴセクション */
.luxury-logo {
background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 15px 30px rgba(255, 215, 0, 0.3),
0 0 0 1px rgba(255, 215, 0, 0.2);
position: relative;
}
/* 検索バー */
.luxury-search {
background: var(--border-secondary);
border: 1px solid var(--border-primary);
border-radius: 12px;
padding: 12px 16px 12px 44px;
color: var(--text-primary);
font-size: 14px;
width: 100%;
transition: all 0.3s ease;
}
.luxury-search:focus {
outline: none;
border-color: rgba(255, 215, 0, 0.5);
background: var(--border-secondary);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}
.luxury-search::placeholder {
color: var(--text-tertiary);
}
/* サイドバーナビゲーション項目 */
.sidebar-item {
display: flex !important;
align-items: center !important;
padding: 12px 20px !important;
margin: 4px 16px !important;
border-radius: 12px !important;
color: var(--text-secondary) !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
}
.sidebar-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.sidebar-item:hover::before {
transform: translateX(100%);
}
.sidebar-item:hover {
background: var(--border-primary) !important;
color: var(--lx-gold-text) !important;
text-decoration: none !important;
transform: translateX(4px) !important;
}
.sidebar-item.active {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%) !important;
color: var(--lx-gold-text) !important;
border: 1px solid rgba(255, 215, 0, 0.3) !important;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2) !important;
}
.sidebar-item svg {
width: 18px !important;
height: 18px !important;
margin-right: 14px;
flex-shrink: 0;
}
/* 🎯 ワークスペースセクションタイトル: 添付画像仕様準拠（大きい文字） */
.luxury-section-title {
font-size: 16px !important; /* 添付画像の仕様に合わせて大きく */
font-weight: 700 !important; /* より太いフォントウェイト */
color: var(--text-primary) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
margin-bottom: 16px !important; /* マージンも調整 */
margin-top: 32px !important;
position: relative !important;
}
/* ワークスペースタイトルの装飾効果 */
.luxury-section-title::after {
content: '' !important;
position: absolute !important;
bottom: -4px !important;
left: 0 !important;
width: 40px !important;
height: 2px !important;
background: linear-gradient(90deg, var(--gold-primary) 0%, transparent 100%) !important;
border-radius: 1px !important;
display: block !important;
z-index: 10 !important;
}
/* ユーザー情報セクション */
.luxury-user-section {
padding: 20px;
border-top: 1px solid var(--border-primary);
background: linear-gradient(135deg, var(--border-secondary) 0%, transparent 100%);
position: relative;
}
.luxury-user-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.3) 50%, transparent 100%);
}
.luxury-user-info {
display: flex;
align-items: center;
gap: 12px;
}
.luxury-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 215, 0, 0.3);
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.luxury-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.luxury-avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-weight: 600;
font-size: 16px;
}
/* ユーザーメニュー */
.luxury-user-menu {
position: absolute;
bottom: 100%;
left: 20px;
right: 20px;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
backdrop-filter: blur(20px);
border: 1px solid var(--border-primary);
border-radius: 16px;
padding: 8px;
box-shadow: var(--shadow-elevated);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 9999;
}
.luxury-user-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.luxury-user-menu-item {
display: flex;
align-items: center;
padding: 12px 16px;
color: var(--text-secondary);
text-decoration: none;
border-radius: 12px;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
width: 100%;
border: none;
background: none;
cursor: pointer;
text-align: left;
}
.luxury-user-menu-item:hover {
background: var(--border-primary);
color: var(--lx-gold-text);
transform: translateX(4px);
}
/* 認証ボタン */
.luxury-auth-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.luxury-auth-btn {
padding: 12px 20px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.luxury-auth-btn-primary {
background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
color: #000;
border: none;
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}
.luxury-auth-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
color: #000;
}
.luxury-auth-btn-secondary {
background: var(--border-secondary);
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
.luxury-auth-btn-secondary:hover {
background: var(--border-primary);
color: var(--text-primary);
transform: translateY(-2px);
}
/* ============================================================================
PC 表示 (>=769px): ホバー展開モード（2026-05-14 実装）
============================================================================
通常時はアイコンのみ 64px のレールとして表示し、ホバーで 280px に拡張。
ピン留めボタン押下で .is-pinned が付き、サイドバーが常時 280px に固定される。
.main-container / .board-container の padding-left は :has() で連動。
モバイル(<=768px)では別途 @media でドロワー方式に上書きされる。
【折りたたみ時のテキスト処理 (E案: ライン残し)】
- セクションタイトル（.luxury-section-title）: 高さ 1px のゴールドグラデ細線に変身。
展開時に元のタイトルテキストに復帰する。レイアウトに「ガタつき」が出ない。
- 他のテキスト（logo-text / nav-label / user-text 等）: opacity 0 + visibility hidden
で透明化。展開時は width 展開がほぼ終わった頃に delay 付きで fade-in。
【!important の必要性】
- shared_sidebar.css 内に .luxury-section-title { opacity: 1 !important } などが
後段で書かれている（アカウント設定画面用）ため、上書きには !important 必須。
- application_layout.css が当ファイルより後にロードされ
.main-container { padding: 0 } を含むため、padding-left も !important。
============================================================================ */
@media (min-width: 769px) {
.sidebar {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
width: 64px !important;
z-index: 50;
transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.45s ease;
}
.sidebar:hover,
.sidebar.is-pinned {
width: 280px !important;
}
.sidebar:hover:not(.is-pinned) {
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}
/* 折りたたみ時: テキスト類を display:none で完全に消す。
opacity:0 だと文字が縦折り返しして見える問題があるため display 制御を選択。 */
.sidebar:not(:hover):not(.is-pinned) .sidebar-item-label,
.sidebar:not(:hover):not(.is-pinned) .sidebar-logo-text,
.sidebar:not(:hover):not(.is-pinned) .sidebar-user-text,
.sidebar:not(:hover):not(.is-pinned) #toggleUserMenuBtn,
.sidebar:not(:hover):not(.is-pinned) .luxury-auth-buttons {
display: none !important;
}
/* 展開時: width 展開（450ms）が完全に終わってから fade-in する。
開きながら文字が見えると「ガチャガチャ」した印象になるため、
animation-delay を 0.48s に設定して width transition の終了を待つ。
forwards でアニメ後の値を保持。
【ピン留め中は animation を発火させない】(.sidebar:hover:not(.is-pinned))
- ピン状態のままホバーすると text/icon が再アニメして blink する違和感を回避
- 初回ロードでピン状態が復元されたときも、要素が即時に出ているのを維持 */
@keyframes sidebarFadeIn {
from { opacity: 0; transform: translateX(-4px); }
to { opacity: 1; transform: translateX(0); }
}
.sidebar:hover:not(.is-pinned) .sidebar-item-label,
.sidebar:hover:not(.is-pinned) .sidebar-logo-text,
.sidebar:hover:not(.is-pinned) .sidebar-user-text,
.sidebar:hover:not(.is-pinned) #toggleUserMenuBtn,
.sidebar:hover:not(.is-pinned) .luxury-auth-buttons,
.sidebar:hover:not(.is-pinned) .sidebar-pin-btn {
animation: sidebarFadeIn 0.30s ease 0.48s both;
}
/* アイコン類: ホバー開始で一度フェードアウトし、サイドバーが広がりきってから
ヌルッとフェードインで戻ってくる。collapsed→expanded で「アイコン位置がジャンプする」
ような視覚的不連続を、不可視のうちに位置遷移させて隠す効果も兼ねる。
【タイムライン (animation duration = 0.78s)】
0% (0ms) : opacity 1（折りたたみ時の状態のまま見えている）
13% (100ms) : opacity 0（素早く fade-out）
60% (468ms) : opacity 0（width 展開中はずっと不可視）
100%(780ms) : opacity 1（width 展開完了後にゆっくり fade-in） */
@keyframes sidebarIconReveal {
0% { opacity: 1; }
13% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.sidebar:hover:not(.is-pinned) .sidebar-item svg,
.sidebar:hover:not(.is-pinned) .luxury-logo,
.sidebar:hover:not(.is-pinned) .luxury-avatar {
animation: sidebarIconReveal 0.78s ease forwards;
}
/* セクションタイトル: 折りたたみ時はゴールドの細線（1px）に変身。
高さ・余白・色をトランジションさせることで滑らかに線→タイトルに復帰する。 */
.sidebar:not(:hover):not(.is-pinned) .luxury-section-title {
height: 1px !important;
padding: 0 !important;
margin: 16px 14px 8px !important;
background: linear-gradient(90deg, rgba(255, 215, 0, 0.45), rgba(255, 215, 0, 0)) !important;
color: transparent !important;
opacity: 0.7 !important;
overflow: hidden !important;
border-radius: 1px;
transition: height 0.45s ease, margin 0.45s ease,
padding 0.45s ease, background 0.30s ease,
color 0.30s ease, opacity 0.30s ease !important;
}
.sidebar:hover .luxury-section-title,
.sidebar.is-pinned .luxury-section-title {
height: auto !important;
margin-top: 32px !important;
margin-bottom: 16px !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
background: transparent !important;
color: var(--text-primary) !important;
opacity: 1 !important;
/* width 展開完了（0.45s）後にタイトル文字を出すため、color/opacity の遅延を 0.48s に揃える */
transition: color 0.30s ease 0.48s, background 0.30s ease 0.48s,
opacity 0.30s ease 0.48s, height 0.45s ease,
margin 0.45s ease, padding 0.45s ease !important;
}
/* 折りたたみ時、ロゴ・nav・ユーザーセクションのレイアウトを中央寄せに整える */
.sidebar:not(:hover):not(.is-pinned) .sidebar-logo-section {
padding: 12px 8px !important;
}
.sidebar:not(:hover):not(.is-pinned) .sidebar-logo-section a {
justify-content: center !important;
}
.sidebar:not(:hover):not(.is-pinned) .sidebar-logo-section .luxury-logo {
width: 40px !important;
height: 40px !important;
margin-right: 0 !important;
}
/* セクションコンテナのインライン padding を打ち消す */
.sidebar:not(:hover):not(.is-pinned) nav > div,
.sidebar:not(:hover):not(.is-pinned) nav > div > div[style*="padding"] {
padding: 0 !important;
}
.sidebar:not(:hover):not(.is-pinned) .sidebar-item {
margin: 4px 8px !important;
padding: 12px 0 !important;
justify-content: center !important;
}
.sidebar:not(:hover):not(.is-pinned) .sidebar-item svg {
margin-right: 0 !important;
}
.sidebar:not(:hover):not(.is-pinned) .luxury-user-section {
justify-content: center !important;
padding: 12px 8px !important;
}
.sidebar:not(:hover):not(.is-pinned) .luxury-user-info {
justify-content: center !important;
}
/* ピン留めボタン: ホバー中・ピン中のみ表示。サイドバー右上に絶対配置 */
.sidebar-pin-btn {
position: absolute;
top: 14px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 6px;
background: transparent;
border: 1px solid rgba(255, 215, 0, 0.3);
color: var(--lx-gold-text);
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
padding: 0;
opacity: 0;
}
.sidebar:hover .sidebar-pin-btn,
.sidebar.is-pinned .sidebar-pin-btn {
display: flex;
opacity: 1;
}
.sidebar-pin-btn:hover {
background: rgba(255, 215, 0, 0.15);
border-color: rgba(255, 215, 0, 0.6);
}
.sidebar.is-pinned .sidebar-pin-btn {
background: rgba(255, 215, 0, 0.22);
border-color: rgba(255, 215, 0, 0.7);
}
/* レール領域確保: コンテナのパディングで left:0 のサイドバー分を空ける
!important は application_layout.css の .main-container{padding:0} を上書きするため必須 */
.main-container,
.board-container {
padding-left: 64px !important;
transition: padding-left 0.25s ease;
}
.main-container:has(.sidebar.is-pinned),
.board-container:has(.sidebar.is-pinned) {
padding-left: 280px !important;
}
}
/* モバイルではピン留めボタンを非表示（ドロワー方式のため不要） */
@media (max-width: 768px) {
.sidebar-pin-btn { display: none !important; }
}
/* 【2026-05-15 追加】タブレット幅 (769-1024px) ではピン留めボタンは表示するが、
タッチデバイス考慮で 44x44px のターゲットサイズを確保。
pointer-events: coarse は荒いポインター（指タッチ）のみマッチ。 */
@media (min-width: 769px) and (pointer: coarse) {
.sidebar-pin-btn {
width: 44px !important;
height: 44px !important;
padding: 10px !important;
}
}
/* レスポンシブ対応: 小さい画面でのサイドバー調整 */
@media (max-height: 600px) {
.sidebar {
min-height: 100dvh;
}
.sidebar nav {
padding: 10px 0;
}
.sidebar-item {
padding: 8px 16px;
margin: 2px 12px;
font-size: 13px;
}
.sidebar-item svg {
width: 16px !important;
height: 16px !important;
margin-right: 10px;
}
.luxury-section-title {
font-size: 14px;
padding: 8px 20px 4px;
margin-bottom: 8px;
}
}
/* モバイル: サイドバーをドロワー化（768px以下）
サイドバーを画面外（左方向）に隠し、ハンバーガーメニュータップで
.is-open クラスを付与してスライドインさせるドロワーパターン。
top: 56px はモバイルヘッダーの高さ分を空けるため。
iOS safe-area 考慮（2026-04-18）: ノッチ・ジェスチャーバーを避ける。 */
@media (max-width: 768px) {
/* 初期状態: 画面左外に配置（translateX(-100%)で完全に隠す） */
.sidebar {
position: fixed;
top: calc(56px + var(--safe-area-top));
left: 0;
bottom: 0;
width: 280px;
z-index: 1000;
/* 最下部メニュー（ログアウト等）がジェスチャーバーに隠れないよう padding 追加 */
padding-bottom: var(--safe-area-bottom);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
/* 開いた状態: JSで .is-open を付与→スライドインで表示 */
.sidebar.is-open {
transform: translateX(0);
}
}
/* アクセシビリティ対応 */
.sidebar-item:focus {
outline: 2px solid rgba(255, 215, 0, 0.5);
outline-offset: 2px;
}
/* アカウント設定画面での強制スタイル適用 - 最高優先度 */
/* 🎯 添付画像の文字色差異修正: アカウント設定画面でもmind_maps画面と同じ明度を実現 */
.luxury-account-container .sidebar-item,
.luxury-account-container aside .sidebar-item,
.luxury-account-container .sidebar .sidebar-item,
.luxury-account-container nav .sidebar-item,
.luxury-account-container div .sidebar-item,
body .sidebar-item,
html .sidebar-item,
a.sidebar-item {
color: var(--text-secondary) !important;
font-weight: 500 !important;
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
}
.luxury-account-container .sidebar-item:hover,
.luxury-account-container aside .sidebar-item:hover,
.luxury-account-container .sidebar .sidebar-item:hover,
.luxury-account-container nav .sidebar-item:hover,
.luxury-account-container div .sidebar-item:hover,
body .sidebar-item:hover,
html .sidebar-item:hover,
a.sidebar-item:hover {
color: var(--lx-gold-text) !important;
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
}
.luxury-account-container .sidebar-item.active,
.luxury-account-container aside .sidebar-item.active,
.luxury-account-container .sidebar .sidebar-item.active,
.luxury-account-container nav .sidebar-item.active,
.luxury-account-container div .sidebar-item.active,
body .sidebar-item.active,
html .sidebar-item.active,
a.sidebar-item.active {
color: var(--lx-gold-text) !important;
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
}
.luxury-account-container .luxury-section-title,
.luxury-account-container aside .luxury-section-title,
.luxury-account-container .sidebar .luxury-section-title,
.luxury-account-container nav .luxury-section-title,
.luxury-account-container div .luxury-section-title,
body .luxury-section-title,
html .luxury-section-title,
.luxury-section-title {
color: var(--text-primary) !important;
font-size: 16px !important;
font-weight: 700 !important;
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
position: relative !important;
}
/* アカウント設定画面のメインコンテンツ内セクションタイトル - 大きく表示 */
/* 詳細度を上げて .luxury-account-container div .luxury-section-title (0,2,1) に勝つ */
.luxury-account-container .luxury-settings-main .luxury-section-title {
font-size: 24pt !important;
margin: 0 0 16px 0 !important;
padding-bottom: 8px !important;
}
/* =====================================================================
アカウント設定画面: セクションタイトル〜コンテンツ間の余白を全タブ統一
チェーン: h2.luxury-section-title → .luxury-grid-row → .luxury-grid-item → .luxury-card
各要素のmargin/paddingを明示的にリセットし、ばらつきを防止
===================================================================== */
/* カード: 上部余白・アニメーション無効化 */
.luxury-account-container .luxury-settings-main .luxury-card {
padding-top: 16px !important;
margin-top: 0 !important;
animation: none !important;
}
/* カードヘッダー: 上下余白リセット */
.luxury-account-container .luxury-settings-main .luxury-card-header {
margin-top: 0 !important;
margin-bottom: 12px !important;
padding-top: 0 !important;
}
/* カードタイトル(h3): ブラウザデフォルトmargin-topをリセット */
.luxury-account-container .luxury-settings-main .luxury-card-title {
margin-top: 0 !important;
}
/* グリッド行・グリッドアイテム: 余白リセット */
.luxury-account-container .luxury-settings-main .luxury-grid-row {
margin-top: 0 !important;
}
.luxury-account-container .luxury-settings-main .luxury-grid-item {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ステータスセクション: .luxury-card と異なり背景/境界線がないため padding-top は 0 */
.luxury-account-container .luxury-settings-main .luxury-status-container {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* AIエージェントセクション: 余白を統一 */
.luxury-account-container .luxury-settings-main .luxury-ai-section {
margin-top: 0 !important;
}
.luxury-account-container .luxury-settings-main .luxury-ai-header {
margin-bottom: 12px !important;
}
/* アカウント設定画面セクションタイトル - モバイルレスポンシブ */
@media (max-width: 640px) {
.luxury-account-container .luxury-settings-main .luxury-section-title {
font-size: 18pt !important;
margin-bottom: 10px !important;
padding-bottom: 6px !important;
}
}
/* アカウント設定画面での装飾線強制表示 - 最高優先度 */
.luxury-account-container .luxury-section-title::after,
.luxury-account-container aside .luxury-section-title::after,
.luxury-account-container .sidebar .luxury-section-title::after,
.luxury-account-container nav .luxury-section-title::after,
.luxury-account-container div .luxury-section-title::after,
.content-area .luxury-section-title::after,
body .luxury-section-title::after,
html .luxury-section-title::after,
.luxury-section-title::after {
content: '' !important;
position: absolute !important;
bottom: -4px !important;
left: 0 !important;
width: 40px !important;
height: 2px !important;
background: linear-gradient(90deg, var(--gold-primary) 0%, transparent 100%) !important;
border-radius: 1px !important;
display: block !important;
z-index: 9999 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none !important;
transform: none !important;
clip: none !important;
overflow: visible !important;
}
.luxury-user-menu-item:focus {
outline: 2px solid rgba(255, 215, 0, 0.5);
outline-offset: 2px;
}
/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
.sidebar {
border-right: 2px solid var(--border-primary);
}
.sidebar-item {
color: var(--text-primary);
}
.luxury-section-title {
color: var(--text-primary);
}
}
/* モーション軽減設定対応 */
@media (prefers-reduced-motion: reduce) {
.sidebar::before,
.sidebar-item::before,
.sidebar-item,
.luxury-user-menu {
animation: none;
transition: none;
}
}
/* ========================================
* 【2026-02-23追加】Premium Edition テキスト（サイドバーロゴ横）
* ========================================
* 未ログインユーザー向けに表示される「Premium Edition」テキストの色。
* ログイン済みユーザーにはプランバッジまたはプラン名が表示される
* （_sidebar.html.erb の条件分岐を参照）。
*
* 【テーマ別カラー設計】
* ダーク（ベース）: rgba(255, 215, 0, 0.8) - 金色（CSS標準 Gold #FFD700 の80%透明度）
* ライト: rgba(180, 83, 9, 0.85) - アンバー系（サイドバー全体で使用中の暖色系に統一）
* ウッド: var(--gold-primary) - コッパートーン（theme_variables.css で #c8956a に定義）
*
* 【移行前】インラインスタイルで色指定していた（テーマ非対応）
*
* 【移行後】CSSクラスに切り出し、テーマ別オーバーライドを追加
*