/**
 * スライド式メニューのスタイル
 */

/* メニュー表示用のボタン - 右上にシンプルな直角三角形 */
.slide-menu-toggle {
  position: fixed;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  border-right: 60px solid #666666;
  border-bottom: 60px solid transparent;
  cursor: pointer;
  z-index: 999;
  transition: border-color 0.3s ease;
  user-select: none;
}

.slide-menu-toggle:hover {
  border-right-color: #555555;
}

.slide-menu-toggle:active {
  border-right-color: #444444;
}

/* メニューの背景オーバーレイ */
.slide-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 997;
  pointer-events: none;
  transition: background 0.3s ease;
}

.slide-menu-overlay.visible {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* メニューパネル */
.slide-menu-panel {
  position: fixed;
  right: -320px;
  top: 0;
  width: 300px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  z-index: 998;
  overflow-y: auto;
  transition: right 0.3s ease;
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
  text-align: left;
}

.slide-menu-panel.open {
  right: 0;
}

/* メニューコンテンツ */
.slide-menu-content {
  padding: 20px 16px;
}

.slide-menu-content h2 {
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.slide-menu-content h3 {
  margin: 20px 0 12px 0;
  padding: 0;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* メニューリスト */
.slide-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.slide-menu-list li {
  margin: 0;
  padding: 0;
}

/* メニュー項目 */
.slide-menu-item {
  display: block;
  padding: 12px 12px;
  margin: 4px 0;
  text-decoration: none;
  color: #333;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 15px;
  line-height: 1.4;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide-menu-item:hover {
  background: #f0f0f0;
  color: #667eea;
}

.slide-menu-item:active {
  background: #e8e8f5;
}

/* プロジェクトリンクの特別スタイル */
.project-link {
  font-weight: 500;
}

/* 準備中のプロジェクト */
.slide-menu-item.preparing {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 11px;
  background: #ffa500;
  color: white;
  border-radius: 4px;
  font-weight: normal;
}

/* タブレット・大画面対応 */
@media (max-width: 768px) {
  .slide-menu-panel {
    width: 280px;
    right: -280px;
  }
}

/* より大きな画面では少し異なるレイアウト */
@media (min-width: 1200px) {
  .slide-menu-toggle {
    border-right: 70px solid #666666;
    border-bottom: 70px solid transparent;
  }
  
  .slide-menu-toggle:hover {
    border-right-color: #555555;
  }
  
  .slide-menu-panel {
    width: 320px;
    right: -320px;
  }
}

/* ダークモード対応（将来の拡張用） */
@media (prefers-color-scheme: dark) {
  .slide-menu-toggle {
    background: linear-gradient(135deg, #555555 0%, #666666 100%);
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.5);
  }
  
  .slide-menu-toggle:hover {
    background: linear-gradient(135deg, #666666 0%, #777777 100%);
    box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.7);
  }
  
  .slide-menu-panel {
    background: #1e1e1e;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
  }
  
  .slide-menu-content h2 {
    color: #f0f0f0;
  }
  
  .slide-menu-content h3 {
    color: #999;
  }
  
  .slide-menu-item {
    color: #e0e0e0;
  }
  
  .slide-menu-item:hover {
    background: #2e2e2e;
    color: #9eb3ff;
  }
  
  .slide-menu-item:active {
    background: #3e3e46;
  }
}

/* iPhoneノッチ対応 */
@supports (padding: max(0px)) {
  .slide-menu-panel {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}