/* ベースとなるフォント設定 */
:root {
  /* フォントファミリーを変数として定義 */
  --font-family-base: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    
/* CSS Variables */
  /* Colors */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #60a5fa;
  --color-secondary: #6b7280;
  --color-success: #22c55e;
  --color-success-dark: #16a34a;
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-info: #3b82f6;
  --color-tertiary: #6b7280;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-header: #f8f9fa;
  --bg-hover: #f7fafc;
  --bg-active: #e5e7eb;
  --bg-disabled: #e5e7eb;
  --bg-black-gray: #818181;
  --bg-white: #ffffff;
  --bg-black: #000000;
  --bg-function-button: #f8fafc;
  --bg-function-ai-button: #3b82f6;
  
  /* Border Colors */
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e0;
  --border-header: #dee2e6;
  --border-function-button: #6c757d;
  --border-ai: #2563eb;

  /* Text Colors */
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-disabled: #9ca3af;
  --text-white: #fff;
  --text-success: var(--color-success);
  --text-danger: var(--color-danger);
  --text-warning: var(--color-warning);
  
  /* Spacing */
  --spacing-xx: -0.1rem;
  --spacing-xs: 0.15rem;
  --spacing-sm: 0.25rem;
  --spacing-md: 0.35rem;
  --spacing-msm: 0.45rem;
  --spacing-lg: 0.5rem;
  --spacing-xl: 0.65rem;
  --spacing-xxl: 1rem;
  --spacing-xxxl: 1.2rem;
  --spacing-xlxl: 1.2rem;
  
  /* Margin */
  --margin-mxx: -0.40rem;
  --margin-mx: -0.25rem;
  --margin-xs: 0.15rem;
  --margin-sm: 0.25rem;
  --margin-md: 0.35rem;
  --margin-lg: 0.5rem;
  --margin-xl: 0.65rem;

  /* Border Radius */
  --radius-xs: 0.15rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  
  /* Font Sizes */
  --font-xxxs: 0.5rem;
  --font-xxs: 0.6rem;
  --font-xs: 0.7rem;
  --font-sm: 0.8rem;
  --font-msm: 0.9rem;
  --font-md: 1rem;
  --font-lg: 1.1rem;
  --font-xl: 1.2rem;
  --font-xxl: 1.35rem;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Transitions */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Column Widths */
  --col-delete: 40px;
  --col-symbol: 140px;
  --col-price: 200px;
  --col-action: 120px;
  --col-status: 200px;
  --col-wacps: 100px;
  --col-market: 145px;
  --col-gain-loss: 145px;
  --col-volume: 180px;
  --col-sector: 150px;
  --col-ranking: 50px;
  --col-pl: 250px;
  --col-info:250px;
  --col-delete-mini: 20px;
  --col-symbol-mini: 40px;
  --col-price-mini: 60px;
  --col-action-mini: 80px;
  --col-pl: 250px;

}
body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 基本スタイル */
.App {
  text-align: center;
  font-family: Lato, Arial, sans-serif;
  /* max-width: 1200px; */
}

.App-header {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #282c34;
  padding: 20px;
  color: white;
}

.app-container {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

.main-content {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* max-width: 1200px; */
  margin: 0 auto;
  width: 95%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  overflow-x: hidden; /* 横スクロール防止 */
  max-width: 100vw;
  flex: 1 0 auto; /* コンテンツを伸ばしてフッターを下に押し出す */
  padding: 2rem;
}

main {
  padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-family: var(--font-family-base);
  font-weight: 600;  /* semibold */
}

.light-text {
  font-weight: 300;  /* light */
}

.normal-text {
  font-weight: 400;  /* regular */
}

.medium-text {
  font-weight: 500;  /* medium */
}

.bold-text {
  font-weight: 700;  /* bold */
}

/* フォームとボタンのスタイル */
form {
  margin-bottom: 20px;
}

input {
  padding: 10px;
  font-size: 1em;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #61dafb;
  border: none;
  cursor: pointer;
}

/* 株式分析コンテナ */
.stock-analysis-container {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  padding-top: -1rem;
}

/* 株式リストコンテナ */
.stock-list-container {
  display: none;
  width: 100%;
  /* margin-left: -15px; */
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100vw;
  padding: 0; /* 左右の余白を均等に */

}

.stock-list-container.active {
  display: block;
}

.analysis-container {
  display: none;
  width: 100%;
  /* margin-left: -15px; */
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100vw;
}

.stock-list-container.active,
.analysis-container.active {
  display: block;
}

.stock-list {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}

/* 入力フォーム */
.stock-form {
  margin-bottom: 12px;
}

.input-container {
  display: flex;
  position: relative;
}

.stock-input {
  flex-grow: 1;
  padding: 10px;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

/* サジェスションリスト */
.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
}

.suggestion-item {
  padding: 10px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

/* 株式リスト */
.stock-list-header {
  display: grid;
  /* 比率ベースのグリッドレイアウトに変更 */
  grid-template-columns: minmax(38px, 2%) minmax(192px, 29%) minmax(369px, 48%) minmax(169px,21%);
  align-items: center;
  background-color: #f5f5f5;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 0.9em;
  border-bottom: 1px solid #ddd;
}

.stock-item {
  display: grid;
  /* 比率ベースのグリッドレイアウトに変更 */
  grid-template-columns: minmax(38px, 5%) minmax(192px, 25%) minmax(369px, 48%) minmax(169px,22%);
  align-items: center;
  padding: 8px 2px;
  grid-gap: 10px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 5px;
  text-align: center
}

.price-headers {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.price-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 5px;
}

.price-change-headers {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.change-header,
.percent-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px;
}

.sortable {
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 4px;
}

.sortable:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sort-button {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 1px;
  border-radius: 4px;
  transition: background-color 0.2s;
  font-size: 0.9rem;
  white-space: nowrap;
}

.sort-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 既存のカラム幅の調整 */
.column {
  display: flex;
}

.column.symbol-header {
  width: 160px;
  flex-shrink: 0;
}

.column.price-header {
  flex: 1 1;
  min-width: 300px;
}

.column.action-header {
  width: 80px;
  flex-shrink: 0;
  text-align: center;
}

.price-header-container {
  display: flex;
  align-items: center;
  gap: 24px; /* ソートボタン間の間隔 */
  white-space: nowrap;
}

.column.delete-space {
  width: 40px;
  flex-shrink: 0;
}

.column.symbol {
  min-width: 120px;
  flex-shrink: 0;
}

.column.price {
  flex: 1 1;
  min-width: 200px;
}

.column.action {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
  gap: 0.5rem;
}

.stock-item {
  border-bottom: 1px solid #ddd;
}

.stock-item.even {
  background-color: #fff;
}

.stock-item.odd {
  background-color: #f9f9f9;
}

/* カラムスタイル */
.column {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1px;
}

.column.delete-space { 
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.column.symbol {
  min-width: 80px;
  max-width: 120px;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.column symbol sortable {
  margin-left: -5rem;
}


.column.price {
  min-width: 160px;
  flex: 1 1;
  padding: 0 4px;
}
.column.action {
  min-width: 80px;
  max-width: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.change.positive { color: green; }
.change.negative { color: red; }


/* ボタンスタイル */
.delete-button {
  padding: 1px 3px;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #666;
  border-radius: 3px;
  cursor: pointer;
}

.delete-button:hover {
  background-color: #f0f0f0;
}

.button-delete-icon {
  font-size: 1rem;
}

.tab-icon {
  padding-right: 0.3rem;
}

.sortable:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sortable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  transition: background-color 0.2s;
}

/* タブボタン */
.tab-buttons {
  display: flex; /* 常に表示するように変更 */
  justify-content: space-around;
  background-color: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  overflow: hidden;
  width: 100%; /* 親要素の幅いっぱいに広げる */
  margin: -20px 0 12px 0; /* 中央揃えのためのマージン設定 */
}

.tab-buttons .tab-button {
  flex: 1 1;
  padding: 10px;
  border-right: 1px solid #e2e8f0;
  background-color: transparent;
  color: #495057;
  font-weight: 500;
  transition: background-color 0.2s;
}

.tab-buttons .tab-button-right {
  flex: 1 1;
  padding: 10px;
  background-color: transparent;
  color: #495057;
  font-weight: 500;
  transition: background-color 0.2s;
}

.tab-buttons .tab-button.active,
.tab-buttons .tab-button-right.active {
  background-color: #007bff;
  color: white;
}

/* 分析タブ */
.analysis-tabs {
  display: flex;
  overflow-x: auto;
  background-color: #f0f0f0;
  border-radius: 8px 8px 0 0;
  padding: 10px 15px 0;
  margin-bottom: 0;
  border-bottom: none;
  scroll-behavior: smooth; /* スムーズスクロール */
  -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */
}

.analysis-tabs .tab-button {
  background-color: #e0e0e0;
  border: none;
  padding: 6px 12px;
  margin-right: 7px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  position: relative; /* 上部のバーのために必要 */
  white-space: nowrap; /* 改行を防ぐ */
  min-width: -webkit-fit-content;
  min-width: fit-content; /* コンテンツに合わせた幅 */
}

.analysis-tabs .tab-button.active {
  background-color: #ffffff;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

/* アクティブタブの上部バー */
/* .analysis-tabs .tab-button.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 6px;
  background-color: #636363;
  border-radius: 6px 6px 0 0;
} */

.tab-text{
  font-size: 0.9rem;
  margin: 0 0.3rem 0 0.3rem;
}

.analysis-tabs .tab-button:hover {
  background-color: #d0d0d0;
}

.analysis-tabs .tab-button button {
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
  color: #333;
  cursor: pointer;
  white-space: nowrap; /* 改行を防ぐ */
}

.analysis-tabs::-webkit-scrollbar {
  height: 4px;
}

.analysis-tabs::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.analysis-tabs::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.analysis-tabs .tab-button .delete-button {
  padding: 1px 4px;
  font-size: 0.625em;
  margin-left: 8px;
}

/* 分析コンテンツ */
.analysis-content {
  padding: 20px 2px 20px 2px;
  background-color: #ffffff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  height: calc(100vh - 200px);
  overflow-y: auto;
  /* max-width: 800px; */
  margin: 0 auto;
}

.analysis-details h2 {
  color: #333;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
}

/* チャート */
.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.chart-title {
  font-size: 1em;
  margin-bottom: 10px;
  text-align: left;
}

.chart-image-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.chart-item {
  margin-bottom: 5px;
  width: 100%;
}

.chart-item h3 {
  margin-bottom: 5px;
}

.chart-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.chart-item img:hover {
  transform: scale(1.02);
}

.clickable-image {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* モーダル改善 */
.responsive-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.responsive-modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  position: relative;
}

.modal-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-image-container img {
  max-width: 100%;
  height: auto;
}

/* ニュース記事のスタイル */
.news-articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-article-item {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.news-article-item:last-child {
  border-bottom: none;
}

.news-link {
  color: #2c5282;
  text-decoration: none;
  font-size: 0.95em;
  line-height: 1.2;
  display: block;
  text-align: left;
  margin-left: 10px;
}

.news-link:hover {
  text-decoration: underline;
}

/* 共通テキストスタイル */
.loading-text,
.error-text,
.no-news-text,
.caution-text {
  margin: 0;
  padding: 10px;
  line-height: 1.2;
  text-align: center;
  font-size: 0.95em;
}

.error-text {
  color: #e53e3e;
}

/* レポートとアドバイス */
.report-container,
.advice-container {
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}

.advice-container {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

.report-container h3, 
.advice-container h3 {
  color: #666;
  margin-top: 0;
}

.report-content, 
.advice-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}

.summary-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.summary-item {
  flex: 1 1;
  padding: 15px;
  text-align: center;
  border-right: 1px solid #ddd;
}

.summary-item:last-child {
  border-right: none;
}

.summary-item h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 0.875em;
}

.summary-item p {
  margin: 0;
  font-size: 1.125em;
  font-weight: bold;
}

.summary-item .score {
  font-size: 1.5em;
  color: #2980b9;
}

.summary-item .recommendation {
  font-size: 0.875em;
  color: #7f8c8d;
}

.info-box {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
}

.info-box p {
  margin: 0;
}

.advice-content .info-box {
  background-color: #e8f5e9;
  border-color: #c8e6c9;
}

.advice-content .warning {
  background-color: #ffebee;
  border-color: #ffcdd2;
}

.advice-content .conclusion {
  background-color: #e3f2fd;
  border-color: #bbdefb;
  font-weight: bold;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.report-header h2 {
  margin: 0;
}

.report-header h3 {
  margin: 5px 0 5px 15px;
  font-size: 1rem;
  font-size: var(--font-md);
}

.download-csv-button,
.download-pdf-button {
  border: none;
  color: white;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1em;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.download-csv-button {
  background-color: #4CAF50;
  margin-right: 0.5rem;
}

.download-csv-button:hover {
  background-color: #45a049;
}

.download-csv-button:active {
  background-color: #3e8e41;
}

.download-csv-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
}

.download-pdf-button {
  background-color: #dc3545;
}

.download-pdf-button:hover {
  background-color: #c82333;
}

.download-pdf-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.download-buttons {
  gap: 10px;
  white-space: nowrap;
  padding: 0.5rem;
  font-size: 0.8rem;
}

.download-pdf-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.button-icon {
  font-size: 1em;
}

.button-icon-dl {
  display: none;  
}

/* モーダル */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

.modal-content img {
  max-width: 100%;
  height: auto;
}

.modal-close {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.modal-close:hover {
  background-color: #b1b1b1;
}

.price-info, .investment-opportunity, .market-overview, .caution-points {
  margin-bottom: 10px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.price-info table, .investment-opportunity table {
  width: 100%;
  border-collapse: collapse;
}

.price-info th, .price-info td, .investment-opportunity th, .investment-opportunity td {
  padding: 10px;
  border: 1px solid #dee2e6;
  text-align: left;
}

.price-info th, .investment-opportunity th {
  background-color: #e9ecef;
}

.toggle-view-button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #17a2b8;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.markdown-report {
  white-space: pre-wrap;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #dee2e6;
}

/* テーブルを含むコンテナのスタイル */
.analysis-section {
  width: 95%;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* スクロール時のパフォーマンス向上 */
.analysis-section::-webkit-scrollbar {
  height: 6px;
}

.analysis-section::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.analysis-section::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
.analysis-table {
  width: 100%;
  min-width: 650px; /* テーブルの最小幅を設定 */
  border-collapse: collapse;
  white-space: nowrap;
  margin: 0 auto;
}

.analysis-table th,
.analysis-table td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #ddd;
}

.analysis-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Buy Zone Analysis Styles */
.buy-zone-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}

.buy-zone {
  border: 1px solid #e5e7eb;
  padding: 1rem;
  border-radius: 0.5rem;
  background: white;
}

.buy-zone h4 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.buy-zone.strong h4 {
  color: #15803d;
}

.buy-zone.moderate h4 {
  color: #b45309;
}

.zone-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.risk-alert {
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.risk-alert.high {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.risk-alert.moderate {
  background-color: rgba(234, 179, 8, 0.1);
  color: #d97706;
}

.risk-alert.low {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.risk-alert.strong_buy {
  background-color: #16a34a;
  color: white;
}

.risk-alert.buy {
  background-color: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.risk-alert.monitor {
  background-color: #ffebc8;
  color: #f59e0b;
}

.risk-alert.wait {
  background-color: #dcdcdc;
  color: #6b7280;
}

.trend-strength-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  font-weight: 500;
}

.trend-direction {
  font-size: 1.25rem;
}

.trend-direction.up {
  color: #16a34a;
}

.trend-direction.down {
  color: #dc2626;
}

.recommendation-box {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: 0.375rem;
  margin: 1rem 0;
}

.recommendation-box .action {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.recommendation-box .reason {
  color: #6b7280;
  font-size: 0.875rem;
}

.entry-points {
  margin-top: 1rem;
}

.entry-point {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.entry-point .price {
  font-weight: 500;
}

.entry-point .strength.strong {
  color: #15803d;
}

.entry-point .strength.moderate {
  color: #b45309;
}

.split-investment-advice {
  margin-top: 0.75rem;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.split-icon {
  color: #666;
  font-size: 1rem;
}

.split-text {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.4;
}

.strength.moderate .split-investment-advice {
  border-left: 3px solid #3498db;
}

.cell-content {
  font-size: 1.0rem;
}

.cell-content-description {
  font-size: 0.9rem;
}

.description-text {
  font-size: 0.8rem;
}

.price-range,
.price-value {
  font-size: 1.0rem;
  font-weight:600;
}

.trading-strategy,
.price-info,
.investment-opportunity,
.market-overview,
.caution-points,
.technical-analysis,
.fundamental-analysis,
.news-analysis,
.additional-analysis,
.central-bank-analysis,
.economic-indicator-analysis,
.vix-analysis,
.news-article,
.cross-analysis,
.trend-analysis,
.oscillator-analysis,
.divergence-analysis,
.conclusion {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.technical-analysis .cross-analysis,
.technical-analysis .breakout-analysis,
.technical-analysis .divergence-analysis {
  margin-top: 10px;
}

.analysis-section h4 {
  font-size: 1em;
  margin-bottom: 5px;
}

.analysis-section h3 {
  text-align: center;
  font-size: 1em;
  margin-top: 5px;
  margin-bottom: 15px;
}

.analysis-section p {
  font-size: 1em;
  margin-bottom: 5px;
}

.technical-analysis .analysis-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.technical-analysis .analysis-table td,
.technical-analysis .analysis-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.technical-analysis .analysis-table th {
  background-color: #f2f2f2;
}

.technical-analysis .charts-container {
  margin-top: 5px;
}

.news-articles {
  margin-bottom: 10px;
  padding: 15px;
  font-size: 1em;
  text-align: left;
}
.caution-text,
.trading-strategy,
.market-overview-text,
.news-sentiment-text,
.conclusion-text {
  font-size: 1em;
  text-align: left;
  margin-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  line-height: 1.2;
}


.market-overview {
  margin-bottom: 10px;
}

.market-overview h3 {
  margin-bottom: 15px;
}

.volatility-analysis {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.volatility-table,
.vix-table {
  margin-bottom: 1rem;
}

.sector-category-analysis {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.sector-category-analysis .analysis-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.sector-category-analysis .analysis-table th,
.sector-category-analysis .analysis-table td {
  border: 1px solid #dee2e6;
  padding: 0.5rem;
  text-align: left;
}

.sector-category-analysis .analysis-table th {
  background-color: #e9ecef;
  width: 30%;
}

.sector-category-analysis .investment-perspective {
  background-color: #e9ecef;
}

.sector-category-analysis .analysis-explanation {
  font-style: italic;
  margin-top: 1rem;
}

.analysis-table {
  width: 100%;
  border-collapse: collapse;
}

.analysis-table th,
.analysis-table td {
  border: 1px solid #dee2e6;
  padding: 0.5rem;
  text-align: left;
}

.analysis-table th {
  background-color: #e9ecef;
}

.vix-table .analysis-table {
  table-layout: fixed;
}

.vix-table .analysis-table th,
.vix-table .analysis-table td {
  width: 33.33%;
  vertical-align: top;
}

.vix-table .analysis-table td:last-child {
  white-space: normal;
  word-wrap: break-word;
}

.charts-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 2px;
}

.chart-item {
  width: 100%;
  margin-bottom: 10px;
}

.chart-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  cursor: pointer;
}

.score-explanation {
  padding: 16px;
  white-space: normal; /* 説明文は折り返し可能に */
}

.score-explanation h5 {
  font-size: 0.9em;
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: left;
}

.score-explanation p {
  font-size: 0.9em;
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: left;
}

.score-explanation2 p {
  font-size: 0.9em;
  text-align: left;
}

.score-explanation2 strong {
  font-weight: 600;
  font-size: 0.9em;
  text-align: left;
  line-height: 1.2;
}

.score-explanation ul {
  margin-bottom: 2px;
  font-size: 0.9em;
  text-align: left;
}

.score-explanation li {
  margin-bottom: 3px;
  padding-right: 20px;
  font-size: 0.9em;
  text-align: left;
}

.score-explanation strong {
  font-weight: 600;
  font-size: 0.9em;
  text-align: left;
}

.score-explanation p:last-child {
  margin-top: 15px;
  font-size: 0.9em;
  text-align: left;
}

.subsection-title {
  font-size: 0.95em;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: left;
  color: #495057;
  border-bottom: 1px solid #ced4da;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: bold;
}

.trading-strategy {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.strategy-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.strategy-section {
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  text-align: left;
}

.strategy-title {
  background-color: #e9ecef;
  color: #495057;
  padding: 10px;
  margin: -15px -15px 15px -15px;
  border-radius: 6px 6px 0 0;
  text-align: center;
}

.strategy-subsection {
  margin-top: 15px;
}

.highlighted-info {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
}

.trading-strategy ul {
  padding-left: 20px;
  margin-bottom: 10px;
}

.trading-strategy li {
  margin-bottom: 5px;
}

.trading-strategy p {
  margin-bottom: 10px;
}

.conclusion-box {
  border: 2px solid #007bff;
  border-radius: 4px;
  padding: 10px;
  margin-top: 15px;
  background-color: #f0f8ff;
}

.trading-strategy h3,
.trading-strategy h4,
.trading-strategy p,
.trading-strategy li,
.trading-strategy .highlighted-info,
.trading-strategy .conclusion-box {
  text-align: left;
}

/* StockAnalysisForm.cssに追加 */
.stock-item .column.price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px; /* 価格情報が2行になっても綺麗に表示されるように */
}

.regular-price,
.after-hours-price {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.regular-price {
  font-size: 1em;
  font-weight: 500;
}

.after-hours-price {
  font-size: 0.9em;
  color: #666;
  padding-top: 4px;
  border-top: 1px solid #eee;
}

.after-hours-label {
  font-size: 0.7em;
  color: #888;
  margin-right: 0px;
}

.current-price {
  font-weight: 500;
  white-space: nowrap;
  color: #2d3748;
}

.price-change {
  font-size: 1em;
  font-weight: normal;
  white-space: nowrap;
  max-width: 100%;
}

.price-change.positive {
  color: #22c55e;
}

.price-change.negative {
  color: #ef4444;
}

.symbol-4digits {
  font-size: 1em;
}

.responsive-table-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* レスポンシブテーブル */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.responsive-table th,
.responsive-table td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #ddd;
}

.responsive-table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

/* テーブル説明文エリア */
.responsive-table-explanation {
  padding: 15px;
  font-size: 0.9em;
  line-height: 1.3;
  text-align: left; /* 左寄せに変更 */
}

.responsive-table-explanation li{
  margin-left: -15px;
}

.responsive-table-explanation p {
  margin: 0;
  text-align: left; /* 念のため p タグにも左寄せを指定 */
}

.responsive-table-insights,
.responsive-table-insights p {
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1em;
  line-height: 1.4;
  text-align: left; /* 左寄せに変更 */
}

.responsive-table-insights li {
  font-size: 0.9em;
  line-height: 1.2;
  margin-bottom: 5px;
  text-align: left; /* 左寄せに変更 */
}

.responsive-charts-container {
  width: 100%;
  display: grid;
  grid-gap: 20px;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* マーケット概要のレイアウト */
.market-overview-content {
  display: flex;
  align-items: flex-start;
}

.trend-indicators {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* マーケット概要のレイアウト */
.market-overview-content.horizontal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.indicators-container {
  display: flex;
  gap: 10px;
  margin-left: 16px;
  flex-shrink: 0;
}

.overview-text-container {
  flex: 1 1;
  min-width: 0; /* テキストの折り返しを適切に行うため */
}

.market-overview-text {
  margin: 0;
  line-height: 1.4;
  text-align: left;
}

.trend-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.indicator-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.direction-arrow {
  font-size: 24px;
}

.strength-gauge {
  margin-bottom: 8px;
}

.indicator-label {
  text-align: center;
  font-size: 0.8em;
  color: #424242;
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.add-button {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  min-width: 40px;
  height: 100%;
}

.watchlist-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background-color: white;
  color: #4a5568;
  transition: all 0.2s;
}

.watchlist-button:hover {
  background-color: #f7fafc;
  color: #2b6cb0;
  border-color: #bee3f8;
}

.button-content.loading {
  color: #fff;
  opacity: 0.8;
}

.arrow-icon {
  padding-right: 0.3rem;
  padding-left: 0.3rem
 }

/* ボタンアイコンのアニメーション */
/* 点滅アニメーションに変更 */
.button-content.loading .button-icon {
  animation: pulse 1.5s ease-in-out infinite;
}

.button-icon {
  font-size: 1em;
  padding-right: 0.1rem;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

.caution-area {
  background-color: rgba(239, 68, 68, 0.1);
  padding: 0.7rem;
  border-radius: 4px;
}

.caution-title {
  font-size: 0.9rem;
  font-weight:600;
  color: #dc2626;
  margin-left: 0.5rem;
}

.caution-text {
  font-size: 0.85rem;
  color: #dc2626;
}

.indicator-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.price-indicator {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.indicator-background {
  fill: #f0f0f0;
}

.indicator-position {
  fill: #4da6ff;
}

.support-line, .resistance-line {
  stroke: #666;
  stroke-width: 2;
  stroke-dasharray: 2,2;
}

.price-marker {
  fill: #333;
}

.indicator-label {
  font-size: 12px;
  fill: #666;
}

.indicator-label.start {
  text-anchor: start;
}

.indicator-label.end {
  text-anchor: end;
}

.indicator-label.current {
  text-anchor: middle;
  font-weight: 600;
  fill: #333;
}

.analysis-content.mobile-scrollable {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ウォッチリストのフラッシュメッセージ */
.watchlist-flash-message,
.trial-info-message {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.5rem;
  margin-bottom: 0.7rem;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 0.375rem;
  color: #856404;
}

.watchlist-flash-message .flash-icon,
.trial-info-message .info-icon {
  font-size: 1.1rem;
  color: #856404;
  margin: 0rem 0.3rem;
}

.list-dropdown {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  /* line-height: 1.5; */
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


.list-actions {
  display: flex;
  gap: 0.5rem;
}

.list-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  background-color: white;
  color: #4a5568;
  transition: all 0.2s;
}

.list-action-button:hover:not(:disabled) {
  background-color: #f7fafc;
  color: #2b6cb0;
  border-color: #bee3f8;
}

.list-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* リスト編集モーダル */
.list-edit-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  width: 90%;
  max-width: 400px;
}

.list-edit-modal h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
}

.list-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.list-edit-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  font-size: 0.95rem;
}

.list-edit-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.list-edit-save {
  padding: 0.5rem 1rem;
  background-color: #3182ce;
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.list-edit-save:hover {
  background-color: #2c5282;
}

.list-edit-cancel {
  padding: 0.5rem 1rem;
  background-color: #e2e8f0;
  color: #4a5568;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.list-edit-cancel:hover {
  background-color: #cbd5e0;
}

/* マーケティングコンテナ */
.mktg-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.mktg-header {
  text-align: center;
  margin-bottom: 48px;
}

.mktg-header-inner {
  margin-bottom: 48px;
}

.mktg-header-content h1 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 16px;
}

.mktg-header-content p {
  font-size: 1.25rem;
  color: #4a5568;
}

/* 機能紹介グリッド */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 48px;
}

.feature-card {
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.feature-icon {
  font-size: 1.5rem;
  color: #3b82f6;
}

.feature-card-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.feature-list {
  color: #4a5568;
  line-height: 1.6;
}

.feature-list p {
  margin-bottom: 8px;
}

/* お試し済みカード */
.try-header {
  color: #059669;
}

.try-label {
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 8px;
}

.try-text {
  font-size: 1.125rem;
}

.try-list {
  color: #6b7280;
}

/* CTAボタン */
.mktg-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-button {
  display: flex;
  align-items: center;
  padding: 1.2rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
  gap: 0.5rem;
}

.cta-button.primary {
  background-color: #3b82f6;
  color: white;
}

.cta-button.primary:hover {
  background-color: #2563eb;
}

.cta-button.secondary {
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #ddd;
}

.cta-button.secondary:hover {
  background-color: #e5e7eb;
}

.price-spacer {
  font-size: 0.75rem;
}

.symbol-left-spacer {
 margin-left: 0rem;
}

.spacer {
  font-size: 0.5rem;
}


.fontawesome-icon {
  font-size: 1.2em;
  /* font-weight: bold; */
  padding: 3px
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
 }

 .custom-checkbox input[type="checkbox"] {
  display: none;
}

/* 見た目用のカスタムスタイル */
.custom-checkbox .checkmark {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 2px;
  position: relative;
  margin-right:5px;
  margin-bottom: -2px;
}

/* チェック時のスタイル */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #666;;
  border-color: #666;;
}

/* チェックマークの追加 */
.custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 1px 1px 0;
  transform: rotate(40deg);
}

.auto-refresh-area {
  align-items: center;
  font-size: 0.7em;
  color: #666;
  text-align: right;
  padding: 10px
}

.rank-number {
  width: 40px;
  text-align: center;
  font-weight: bold;
  padding: 0 10px;
}

.buy-zone {
  text-align: right;
  padding-right: 20px;
}

/* Buy Zone 価格表示のスタイル */
.buy-zone-price {
  font-size: 0.9em;
  color: #2c5282;
  font-weight: 500;
}

/* AlphaFinder固有のスタイル */
.alpha-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.alpha-selector {
  display: block;
  width: 25%;
  padding: 0.375rem 2.25rem 0.2rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  /* line-height: 1.5; */
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.volume-rank {
  font-size: 0.8rem;
  color: #666;
  margin-left: 0.5rem;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.pagination-button {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-button:hover:not(:disabled) {
  background-color: #f0f0f0;
}

.pagination-button.active {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}

.pagination-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.no-data-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  color: #666;
}

.warning-icon {
  color: #ffc107;
  font-size: 1.5rem;
}

.price-info-card {
  transition: all 0.3s ease;
}

.price-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.alpha-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.market-cap-selector {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  min-width: 180px;
  background-color: white;
}

.last-update {
  margin-bottom: 1rem;
  color: #666;
  font-size: 0.9rem;
}

/* アクションボタン */
.action {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.alpha-stock-list-header,
.alpha-stock-item {
  display: grid;
  grid-template-columns: minmax(150px, 20%) minmax(120px, 15%) minmax(120px, 15%) minmax(120px, 15%) minmax(100px, 15%) minmax(160px, 20%);
  align-items: center;
  padding: 8px 12px;
  grid-gap: 8px;
  gap: 8px;
}

.alpha-stock-list-header {
  background-color: #f5f5f5;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.alpha-header-content {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TechnicalAnalysis用の修正スタイル */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 1rem;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.time-range-select {
  display: block;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  /* line-height: 1.5; */
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.time-range-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
  padding: 0 1.5rem 1.5rem 1.5rem;
  max-width: 100%;
  box-sizing: border-box;
}

.chart-wrapper {
  width: 100%;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}

.chart-header {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.7rem;
  margin-top: 1rem;

}

/* Portfolio関連ページ */
/* ベースレイアウト */
.portfolio-body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* 概要セクション */
.portfolio-overview {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric-card {
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.metric-title {
  color: #4a5568;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
}

.metric-value.positive {
  color: #48bb78;
}

.metric-value.negative {
  color: #f56565;
}

.metric-change {
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

/* 期間パフォーマンス */
.period-performance {
  background-color: #f8fafc;
  border-radius: 6px;
  padding: 1rem;
  margin-top: 1rem;
  border: 1px solid #e2e8f0;
}

.period-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1rem;
}

.period-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.period-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Portfolio Pie Chart スタイル */

.chart-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.chart-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.chart-content {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.pie-chart-container {
  flex: 1 1;
  min-width: 0;
}

.legend-container {
  flex: 1 1;
  min-width: 200px;
  margin-right: 0rem;
  margin-top: 2rem;
  padding-top: 0.65rem
}

.allocation-legend {
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 1rem;
}

.legend-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #2d3748;
  margin-top: 0
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-symbol {
  min-width: 60px;
  font-weight: 500;
}

.legend-value {
  min-width: 80px;
  text-align: right;
}

.legend-percentage {
  min-width: 70px;
  text-align: right;
  color: #666;
}

.pie-chart-tooltip {
  background-color: white;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
}

/* 保有内訳 */
.holdings-breakdown {
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.breakdown-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 1rem 0;
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

/* 取引モーダル */
.transaction-modal,
.history-modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #4a5568;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 1rem;
}

/* ツールチップ */
.custom-tooltip,
.pie-custom-tooltip {
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* モーダル関連 */
.portfolio-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.portfolio-modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.portfolio-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.portfolio-modal-content {
  padding: 1rem;
}

/* 取引履歴関連 */
.transaction-list {
  margin-top: 1rem;
}

.transaction-list-header {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 0.5rem;
  background-color: #f8fafc;
  font-weight: 500;
  border-bottom: 1px solid #e2e8f0;
}

.transaction-item {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.table-header-row {
  background-color: #f8fafc;
}

.header-cell {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.table-cell {
  padding: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.row-even {
  background-color: #ffffff;
}

.row-odd {
  background-color: #f8fafc;
}


.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

.gain-loss {
  display: flex;
  flex-direction: column;
}

.gain-loss.positive {
  color: #48bb78;
}

.gain-loss.negative {
  color: #f56565;
}

.percentage {
  font-size: 0.875rem;
}

.actions-cell {
  display: flex;
  gap: 0.5rem;
}

.action-button {
  padding: 0.5rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.view-button {
  background-color: #3498db;
  color: white;
}

.sell-button {
  background-color: #4CAF50;
  color: white;
}

/* ヘッダー部分 */
.portfolio-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Symbol/Price コンテナ */

.symbol-price-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 0.2rem;
  max-width: 70%;  /* コンテナの最大幅を設定 */
}

.symbol-price-container .symbol {
  font-weight: 600;
  color: #1f2937;
}

.symbol-price-container .latest-price {
  font-size: 0.85em;
  color: #666;
}

.symbol-price-container .market-price {
  font-size: 0.85rem;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 4px;
}

.symbol-price-container .after-hours-price {
  font-size: 0.85rem;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 4px;
}

.price-label {
  font-size: 0.7rem;
  color: #6b7280;
}

/* Status/Quantity コンテナ */
.status-qty-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.status-qty-container .quantity {
  font-size: 1em;
  color: #374151;
  font-weight: 500;
}

/* 価格表示コンテナ */
.price-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-container .wacps {
  font-weight: 500;
}

.price-container .sold-price {
  color: #666;
}

/* データ行 */
.portfolio-row {
  border-bottom: 1px solid #e2e8f0;
}

/* 同じ銘柄の上下行の区切り（HOLD/SOLD） */
.portfolio-row + .portfolio-row {
  border-top: 1px dashed #e5e7eb;  /* 点線で区切り */
}

.portfolio-row-even { background-color: white; }
.portfolio-row-odd { background-color: #f8fafc; }

/* セル共通スタイル */
.portfolio-cell {
  padding: 12px 8px;
  vertical-align: middle;
  border-right: 1px solid #e5e7eb;  /* 縦の区切り線 */
}

/* 数値セル */
.portfolio-quantity-cell,
.portfolio-wacps-cell,
.portfolio-price-cell,
.portfolio-price-change-cell,
.portfolio-market-value-cell,
.portfolio-gain-loss-cell,
.portfolio-gain-loss-percent-cell {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.portfolio-daily-gain-loss {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.portfolio-daily-gain-loss .gain-loss-value {
  font-weight: 600;
}

.portfolio-daily-gain-loss .gain-loss-percent {
  font-size: 0.85em;
  color: #666;
}

/* After Market表示 */
.portfolio-after-market-price {
  font-size: 0.7rem;
  color: #6b7280;
  margin-top: 0.25rem;
}





/* 価格情報 */
.portfolio-price-cell {
  position: relative;
}

.portfolio-after-hours-price {
  font-size: 0.65rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* 損益表示 */
.portfolio-gain-loss {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.portfolio-gain-loss-positive {
  color: #16a34a;
}

.portfolio-gain-loss-negative {
  color: #dc2626;
}

.portfolio-gain-loss-percent {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* アクションボタン */
.portfolio-actions-cell {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
}

.portfolio-actions-container {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.portfolio-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    width: 80px;
    height: 30px;
    border: 0.3px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 1rem;
  }
  

.portfolio-history-button {
  background-color: #3b82f6;
}

.portfolio-history-button-txt {
   font-size: 0.9rem;
   align-items: center;
   margin-left: 0.2rem;
   margin-right: 0.3rem;
   font-weight: 700;
}

.portfolio-sell-button {
  background-color: #22c55e;
}

.portfolio-sell-button-txt {
  font-size: 0.9rem;
  align-items: center;
  margin-left: 0.2rem;
  margin-right: 0.3rem;
  font-weight: 700;
}

.portfolio-delete-button {
  color: #ef4444;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  transition: color 0.2s;
}

.portfolio-button-fw {
  margin-left: 0.3rem;
}

.portfolio-delete-button:hover {
  color: #b91c1c;
}

/* インライン編集フォーム共通スタイル */
.inline-form-row {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* 取引履歴テーブルスタイル */
.transaction-history-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background-color: white;
  border-radius: 0.5rem;
  overflow: hidden;
}

.transaction-history-table th,
.transaction-history-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.transaction-history-table th {
  background-color: #f1f5f9;
  font-weight: 500;
  color: #475569;
}

/* フォーム要素の共通スタイル */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a5568;
}

.form-group input,
.form-group select {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

/* アニメーション */
.inline-form-cell {
  padding: 0 !important;
  background-color: #f8f9fa;
}

.inline-form-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.inline-form-container.open {
  max-height: 800px; /* 適切な値に調整してください */
  width: 100%;
  transition: max-height 0.5s ease-in;
}

/* TransactionHistoryModal用のスタイル調整 */
.history-modal {
  background: white;
  width: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.history-modal .modal-header {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-modal .modal-content {
  padding: 1rem;
}

.portfolio-header-cell-company {
  font-size: 0.75rem;
  font-weight: 400;
}

.portfolio-header-cell-price {
  font-size: 0.85rem;
  font-weight: 400;
}

.portfolio-gain-loss-note {
  display: block;
  font-size: 0.75rem;  /* 12px */
  color: #666;
  font-style: italic;
  margin-top: 2px;
}

/* Portfolio Graph Styles */
.portfolio-graph-container {
  height: 400px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 300px;
}

.profit-loss-tooltip {
  background-color: white;
  border: 1px solid #ccc;
  padding: 8px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
}

.profit-loss-tooltip .tooltip-title {
  font-weight: bold;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  font-size: 0.75rem;
}

.profit-loss-tooltip .tooltip-item {
  margin: 3px 0;
  font-size: 0.75rem;
}

.profit-loss-tooltip .tooltip-item.positive {
  color: #4caf50;
}

.profit-loss-tooltip .tooltip-item.negative {
  color: #f44336;
}

.profit-loss-tooltip .tooltip-total {
  margin-top: 5px;
  border-top: 1px solid #eee;
  padding-top: 5px;
  font-weight: bold;
  font-size: 0.75rem;
}

/* Adjust axis labels */
.recharts-cartesian-axis-tick-value {
  font-size: 0.75rem;
}

/* Portfolio Graph Controls */
.portfolio-graph-controls {
  margin: 1rem 0;
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem;
}

.graph-mode-selector {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-size: 0.875rem;
  cursor: pointer;
}

.graph-mode-selector:hover {
  border-color: #666;
}

.graph-mode-selector:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.loading-bar {
  animation: loading-bar 1s ease-in-out infinite;
}

@keyframes loading-bar {
  0%, 100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}

/* レスポンシブ対応 */
@media screen and (max-width: 1200px) {
  /* Tabletや幅を狭めたブラウザで表示の際にテーブルがはみ出さないように */
  .stock-list-header {
    display: grid;
    /* 比率ベースのグリッドレイアウトに変更 */
    grid-template-columns: minmax(0px, 0%) minmax(110px, 25%) minmax(205px, 70%) minmax(70px,20%);
    align-items: center;
    background-color: #f5f5f5;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 0.9em;
    border-bottom: 1px solid #ddd;
  }
  
  .stock-item {
    display: grid;
    /* 比率ベースのグリッドレイアウトに変更 */
    grid-template-columns: minmax(30px, 5%) minmax(70px, 15%) minmax(170px, 60%) minmax(80px,21%);
    align-items: center;
    padding: 8px 2px;
    grid-gap: 10px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .responsive-table-container {
    margin: 0 -8px;
    border-radius: 0;
    padding: 8px;
  }
  
  .responsive-table {
    font-size: 0.9em;
  }
  
  .responsive-table th,
  .responsive-table td {
    padding: 8px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 2列テーブル用 */
  .responsive-table.two-column th,
  .responsive-table.two-column td {
    max-width: 50%;
  }
  
  /* 3列テーブル用 */
  .responsive-table.three-column th,
  .responsive-table.three-column td {
    max-width: 33%;
  }
  
  /* 4列以上のテーブル用 */
  .responsive-table.multi-column {
    display: block;
  }
  
  .responsive-table.multi-column thead,
  .responsive-table.multi-column tbody,
  .responsive-table.multi-column tr,
  .responsive-table.multi-column th,
  .responsive-table.multi-column td {
    display: block;
  }
  
  .responsive-table.multi-column tr {
    margin-bottom: 1em;
    border: 1px solid #ddd;
  }
  
  .responsive-table.multi-column th {
    display: none;
  }
  
  .responsive-table.multi-column td {
    display: flex;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #eee;
  }
  
  .responsive-table.multi-column td:before {
    content: attr(data-label);
    font-weight: 600;
    flex: 1 1;
    padding-right: 8px;
  }
  
  .responsive-table.multi-column td .cell-content {
    flex: 2 1;
    text-align: right;
  }
  
  /* 説明文 */
  .responsive-table-explanation {
    font-size: 0.85em;
    padding: 12px;
    line-height: 1.3; /* モバイル時は少し行間を広げる */
  }
  
  .responsive-table-insights,
  .responsive-table-insights p {
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1em;
    line-height: 1.2;
    text-align: left; /* 左寄せに変更 */
  }

  .stock-list-container,
  .analysis-container {
    display: none;
    width: 100%;
    margin-left: -15px;
    box-sizing: border-box;
    overflow-x: hidden;
    max-width: 100vw;
    padding: 0 10px; /* 左右の余白を均等に */
  }
  
  .stock-list-container.active,
  .analysis-container.active {
    display: block;
  }

  .tab-buttons {
    display: flex; /* 常に表示するように変更 */
    justify-content: space-around;
    background-color: #f8f9fa;
    border-radius: 5px;
    overflow: hidden;
    width: 100%; /* 親要素の幅いっぱいに広げる */
    margin-left: -0.6rem;
  }

  .tab-button,
  .tab-button-right {
    font-size: 0.9rem;
  }

  .portfolio-sell-button {
    margin-bottom: 0.2rem;
  }

  .chart-section {
    width: 100%;           /* セクションの幅を100%に */
  }

  .chart-header {
    margin-bottom: 0.5rem;
  }

  .chart-header h3 {
    font-size: 1rem;
  }

  .chart-content {
    flex-direction: row;   /* 円グラフとレジェンドは横並びを維持 */
    gap: 0.5rem;
  }

  .pie-chart-container {
    width: 45%;           /* 円グラフの幅 */
    min-width: 120px;     /* 最小幅を設定 */
  }

  .legend-title {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    margin-top: -0.25rem
  }

  .legend-items {
    gap: 0.2rem;
    font-size: 0.55rem;
  }

  .legend-item {
    font-size: 0.75rem;
    gap: 0.2rem;
  }

  .legend-color {
    width: 8px;
    height: 8px;
    min-width: 8px;
  }

  .legend-symbol {
    min-width: 40px;
  }

  .legend-value {
    min-width: 55px;
  }

  .legend-percentage {
    min-width: 42px;
  }

  .legend-container {
    flex: 1 1;
    min-width: 200px;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem
  }
  
  .inline-form-content {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
  }

  .portfolio-header-text-desktop {
    display: none
  }

  .alpha-stock-list-header,
  .alpha-stock-item {
    grid-template-columns: minmax(100px, 25%) minmax(90px, 20%) minmax(80px, 15%) minmax(80px, 15%) minmax(70px, 10%) minmax(120px, 15%);
    padding: 8px 4px;
    gap: 4px;
    /* font-size: 0.9rem; */
  }

  .alpha-controls {
    flex-wrap: wrap;
  }
  
  .market-cap-selector,
  .period-selector,
  .market-selector {
    width: 50%;
  }
}
  
/* レスポンシブデザイン - レイアウト全体 */
@media (min-width: 768px) {
  .stock-analysis-container {
    height: 100%;
    display: flex;
    flex-direction: column; /* 縦方向のレイアウトを維持 */
    padding: 0;
    max-width: 100%;
    overflow-anchor: none;
  }

  .analysis-container {
    padding-left: 0; /* 左パディングを削除 */
  }

  .chart-item {
    width: 90%;
  }
}

/* スマートフォン向けのレスポンシブ対応 */
@media screen and (max-width: 768px) {
  .main-content  {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      width: 100%;
    font-family: Lato, Arial, sans-serif;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .app-container  {
    width: 100%;
    font-family: Lato, Arial, sans-serif;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .analysis-content.mobile-scrollable {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    height: calc(100vh - 120px); /* Adjust based on your header/tabs height */
    overflow-y: auto;
    overflow-anchor: none;
  }

  .analysis-container.active {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    width: 101%;
    margin-left: -2.2rem;
  }

  .stock-item .column.price {
    min-width: 200px;
  }

  .regular-price,
  .after-hours-price {
    font-size: 1rem;
  } 

  /* .alpha-regular-price {
    font-size: 0.9rem
  }

  .market-cap {
    font-size: 0.9rem;
  }

  .change {
    font-size: 0.9rem;
  } */

  .price-change {
    margin-left: 3px;
    font-weight: normal;
    max-width: 100%;
  }

  .after-hours-price {
    font-size: 11px;
  }

  /* ウォッチリストのフラッシュメッセージ */
.watchlist-flash-message,
.trial-info-message {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.35rem;
  margin-bottom: 0.5rem;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 0.375rem;
  color: #856404;
}

.watchlist-flash-message .flash-icon,
.trial-info-message .info-icon {
  font-size: 0.9rem;
  color: #856404;
  margin: 0rem 0.3rem;
}

.list-actions {
  display: flex;
  gap: 0.5rem;
}
  
  .list-actions {
    justify-content: flex-end;
  }

  .list-edit-modal {
    width: 95%;
    padding: 1rem;
  }

  .chart-item {
    width: 100%;
  }
  .chart-title {
    font-size: 0.9em;
  }

  .responsive-modal-content {
    padding: 15px;
  }

  .news-link {
    font-size: 0.9em;
  }

  .loading-text,
  .error-text,
  .no-news-text,
  .caution-text {
    font-size: 0.9em;
    padding: 8px;
  }
    .market-overview > div {
    flex-direction: column;
  }
  .market-overview-text {
    margin-top: 10px;
  }
  .price-info table, .investment-opportunity table {
    font-size: 0.875em;
  }
  .price-info th, .price-info td, .investment-opportunity th, .investment-opportunity td {
    padding: 5px;
  }
  
  .tab-buttons {
    display: flex; /* 常に表示するように変更 */
    justify-content: space-around;
    background-color: #f8f9fa;
    border-radius: 5px;
    overflow: hidden;
    width: 97%; /* 親要素の幅いっぱいに広げる */
    margin-left: -1.6rem;
  }
  
  .tab-button {
    font-size: 0.9rem;
  }

  .stock-list-container,
  .analysis-container {
    display: none;
    width: 100%;
    margin-left: -18px;
    box-sizing: border-box;
    overflow-x: hidden;
    max-width: 100vw;
    padding: 0 10px; /* 左右の余白を均等に */
  }
  
  .stock-list-container.active,
  .analysis-container.active {
    display: block;
  }

  .csv-download-text {
    display: none;  
   }
  
  .column {
    min-width: auto;
  }

  .column.delete-space { width: 10%; }
  .column.symbol { width: 15%; }
  .column.price { width: 20%; }
  .column.change { width: 30%; }
  .column.action { width: 25%; }
  .responsive-table-container {
    margin: 0 -8px;
    border-radius: 0;
    padding: 8px;
  }

  .market-overview-content.horizontal {
    flex-direction: row; /* 水平方向を維持 */
    align-items: center;
    gap: 0px; /* スマホではギャップを少し縮小 */
  }

  .indicators-container {
    gap: 8px; /* スマホではインジケータ間のギャップを少し縮小 */
    margin-left: 16px;
  }

  .overview-text-container {
    font-size: 0.9em; /* スマホでは少し文字サイズを小さく */
  }

  .trend-indicators {
    margin-bottom: 10px;
  }

  .market-overview-text,
  .news-sentiment-text {
    margin: 0;
    line-height: 1.2;
    text-align: left;
  }

  .button-content.loading .button-icon {
    font-size: 1em;
  }

  /* マーケティングコンテナ */

  .mktg-container {
    padding: 24px 16px;
  }

  .mktg-header-content h1 {
    font-size: 2rem;
  }

  .mktg-header-content p {
    font-size: 1.125rem;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cta-button {
    width: 100%;
    justify-content: center;
  }
  
  .button-icon {
    font-size: 0.9em;
  }

  .technical-analysis.analysis-section {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }

  .charts-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.5rem 1rem 0.5rem;
    margin: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .chart-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    /* チャートの右端が見切れないように調整 */
    max-width: calc(100vw - 1rem);
  }

  .section-header {
    padding: 0 0.5rem;
    margin-bottom: 0.75rem;
  }

  .header-content {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0 0.25rem;
  }

  .time-range-select {
    font-size: 0.8rem;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    max-width: 40%;
  }

  /* チャートのサイズ調整 */
  .portfolio-status-badge {
    min-width: 50px;
    min-height: 20px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
  }


  .status-text {
    display: none;
  }

  .status-icon {
    display: inline-block;
    align-items: center;
    margin-bottom: 0.1rem
  }

  /* スマホ表示時のセルパディング調整 */

  .portfolio-table {
    font-size: 0.95rem;
  }

  /* ヘッダーセルの調整 */
  .portfolio-header-cell {
    padding: 10px 4px;
    font-size: 0.85rem;
  }
  
  /* ヘッダー部分 */
  .portfolio-list-header {
    width: 93.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;  /* 左右のパディングを削除 */
    margin-bottom: 0;
  }

  .delete-button-ddesktop {
    display: none;
  }

  .delete-button-mobile {
    display: block;  /* モバイルではモバイル用ボタンを表示 */
    margin-bottom: 4px;  /* シンボル情報との間隔 */
  }

  .delete-button-desktop {
    display: none;  /* モバイルではデスクトップ用ボタンを非表示 */
  }

  .portfolio-action-button {
    width: 65px;
    height: 30px;
    border-radius: 0.2rem;
    font-size: 1rem;
  }

  .portfolio-history-button-txt {
    font-size: 0.7rem;
    align-items: center;
    margin-left: 0.2rem;
    margin-right: 0.3rem;
    font-weight: 700;
 }
 
 .portfolio-sell-button {
   background-color: #22c55e;
 }
 
 .portfolio-sell-button-txt {
   font-size: 0.7rem;
   align-items: center;
   margin-left: 0.2rem;
   margin-right: 0.3rem;
   font-weight: 700;
 }

 .portfolio-header-text-desktop {
  display: none
  }
}

@supports (padding: max(0px)) {
  .analysis-section {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
}

@supports (-webkit-touch-callout: none) {
  .portfolio-container,
  .portfolio-list-container,
  .portfolio-table-container {
    -webkit-overflow-scrolling: touch;
  }

  .portfolio-header-text-desktop {
    display: none
  }

  .portfolio-header-cell-company {
    font-size: 0.6rem;
    font-weight: 400;
  }

  .portfolio-header-cell-price {
    font-size: 0.65rem;
    font-weight: 400;
  }

  .alpha-stock-list-header {
    grid-template-columns: minmax(90px, 15%) minmax(55px, 10%) minmax(85px, 15%) minmax(100px, 45%) minmax(60px, 10%) minmax(120px, 15%);
    padding: 12px 5px;
    /* margin-left: -0.2rem; */
    gap: 4px;
    font-size: 0.9rem;
  }

  .alpha-stock-item {
    grid-template-columns: minmax(85px, 15%) minmax(70px, 10%) minmax(70px, 15%) minmax(220px, 45%) minmax(40px, 10%) minmax(80px, 15%);
    padding: 5px 5px;
    gap: 4px;
    font-size: 0.9rem;
  }

  .alpha-controls {
    flex-wrap: wrap;
  }
}

@media (min-width: 1200px) {
  .portfolio-table colgroup {
    col.portfolio-col-symbol { width: 135px; }    /* Symbol/Price列 */
    col.portfolio-col-status { width: 200px; }     /* Status/Q'ty列 */
    col.portfolio-col-wacps { width: 100px; }     /* WACPS/Sold @列 */
    col.portfolio-col-market { width: 145px; }    /* Market Value列 */
    col.portfolio-col-gain-loss { width: 145px; } /* G/L列 */
  }

  .status-qty-container {
    flex-direction: row;  /* 横並びに変更 */
    justify-content: space-between;  /* 要素を均等に配置 */
    align-items: center;
    gap: 8px;  /* 要素間の間隔 */
  }

  .portfolio-status-badge {
    min-width: 60px;
    min-height: 30px;
    text-align: center;
    font-size: 0.9rem;
  }

  .quantity {
    min-width: 60px;  /* 数量の最小幅 */
    text-align: center
  }

  /* ボタングループのスタイル */
  .portfolio-action-buttons {
    display: flex;
    gap: 8px;
  }

  .portfolio-action-button {
    padding: 4px 8px;
    font-size: 1.3rem;
    min-width: 65px;
    min-height: 40px;
  }

  .delete-button-mobile {
    display: none;  /* デスクトップではモバイル用ボタンを非表示 */
  }

  .delete-button-desktop {
    display: block;  /* デスクトップではデスクトップ用ボタンを表示 */
  }

}

/* 取引フォーム固有のスタイル */
.sell-type-radio {
  display: flex;
  gap: 1rem;
}

.sell-type-radio label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* 取引プレビューエリア */
.transaction-preview {
  background-color: #f7fafc;
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

/* 価格入力コンテナ */
.price-input-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

/* 情報ツールチップ */
.info-tooltip {
  font-size: 0.75rem;
  color: #718096;
  margin-top: 0.25rem;
  background-color: #f7fafc;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #e2e8f0;
}

/* 警告アイコン */
.warning-icon {
  width: 48px;
  color: #ed8936;
  text-align: center;
}

/* メッセージテキスト */
.confirm-message {
  font-size: 0.875rem;
  color: #4a5568;
  padding-left: 1rem;
}

/* モーダルインライン表示アニメーション */
.inline-form-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.inline-form-container.open {
  max-height: 2000px;
  transition: max-height 0.5s ease-in;
}

/* インラインフォームのレイアウト */
.inline-form-content {
  padding: 0.3rem;
  background-color: white;
  border-radius: 0.5rem;
  overflow: auto;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.form-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.transaction-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.transaction-table td {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: middle;
}

.transaction-table th {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  text-align: center;
  vertical-align: middle;
  background-color: #f8f9fa;
  font-weight: 500;
  color: #4a5568;
  white-space: nowrap;
}


.table-input {
  padding: 0.375rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  font-size: 0.9rem;
}

.table-input-number {
  padding: 0.375rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  font-size: 0.9rem;
}

.amount-cell {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ボタンスタイル */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.edit-button,
.cancel-button,
.submit-button,
.page-button {
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.edit-button {
  background-color: white;
  border-color: #e2e8f0;
  color: #4a5568;
}

.cancel-button {
  background-color: white;
  border-color: #e2e8f0;
  color: #4a5568;
}

.submit-button {
  background-color: #4299e1;
  color: white;
}

.page-button {
  background-color: white;
  border-color: #e2e8f0;
  color: #4a5568;
  padding: 0.25rem 0.5rem;
}

.page-button.active {
  background-color: #4299e1;
  color: white;
  border-color: #4299e1;
}

/* ボタングループ内の配置 */
.table-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1rem;
}

/* エラーメッセージ */
.error-message {
  color: #e53e3e;
  font-size: 0.875rem;
  background-color: #fff5f5;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
}

/* 確認ダイアログ */
.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirm-content {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 400px;
  width: 90%;
}

.confirm-content p {
  margin: 0 0 1rem 0;
  text-align: center;
}

/* 取引履歴テーブル固有のスタイル */
.transaction-history-table td[data-label]::before {
  content: attr(data-label);
  font-weight: 500;
  margin-right: 0.5rem;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .sell-type-radio {
    flex-direction: column;
    gap: 0.5rem;
  }

  .price-input-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .transaction-preview {
    margin-top: 1rem;
  }
}

/* DefaultAnalysisTab スタイル */
.default-analysis-content {
  padding: 2rem;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
}

.default-analysis-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 1rem;
}

.default-icon {
  font-size: 2rem;
  margin-right: 1rem;
  color: #4a6eb5;
}

.default-analysis-message {
  background-color: #f8f9fa;
  border-left: 4px solid #4a6eb5;
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 0 4px 4px 0;
}

.info-icon {
  color: #4a6eb5;
  margin-right: 0.5rem;
}

.default-analysis-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
  gap: 1rem;
}

.action-button {
  padding: 0.75rem 1.5rem;
  background-color: #4a6eb5;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #3a5795;
}

.action-icon {
  font-size: 1.25rem;
}

.or-divider {
  margin: 1rem 0;
  color: #666;
  position: relative;
  text-align: center;
  width: 100%;
}

.or-divider::before,
.or-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: #ddd;
}

.or-divider::before {
  left: 0;
}

.or-divider::after {
  right: 0;
}

.search-suggestion {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-icon {
  font-size: 1.25rem;
  margin-right: 1rem;
  color: #666;
}

.default-analysis-features {
  margin-top: 2rem;
}

.default-analysis-features h3 {
  margin-bottom: 1.5rem;
  color: #333;
  font-size: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.default-analysis-features h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #4a6eb5;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.feature-card {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 4px;
  border-left: 3px solid #4a6eb5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.feature-card h4 {
  color: #4a6eb5;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.feature-card p {
  margin: 0;
  color: #555;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .default-analysis-content {
    padding: 1rem;
  }
}

@supports (-webkit-overflow-scrolling: touch) {
  .member-content {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
  }
}
/* =============================================================================
   admin.css - roboticker.ai Admin/Support Styles
   Phase 2: ユーザー向けサポート機能スタイル
   プレフィックス: admin-
   member.css のトーンマナーに準拠
============================================================================= */

/* -----------------------------------------------------------------------------
   サポートコンテナ
----------------------------------------------------------------------------- */
.admin-support-container {
  display: flex;
  flex-direction: column;
  width: 99%;
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  min-height: calc(100vh - 120px);
}

.admin-support-content {
  background-color: var(--bg-primary);
  /* border-radius: var(--radius-md); */
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

/* -----------------------------------------------------------------------------
   サポートホーム
----------------------------------------------------------------------------- */
.admin-support-header {
  padding: var(--spacing-xxl);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-tertiary);
  text-align: center;
}

.admin-support-title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.admin-title-icon {
  color: var(--color-primary);
}

.admin-support-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* 戻るリンク */
.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--font-sm);
  transition: all var(--transition-fast);
  margin-bottom: var(--spacing-lg);
}

.admin-back-link:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* メニューカード */
.admin-support-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-xxl);
}

.admin-support-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-xxl);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.admin-support-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.admin-support-card-primary {
  background-color: rgba(59, 130, 246, 0.05);
  border-color: var(--color-primary-light);
}

.admin-card-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  flex-shrink: 0;
}

.admin-icon-primary {
  background-color: var(--color-primary);
  color: var(--text-white);
}

.admin-icon-secondary {
  background-color: var(--bg-tertiary);
  color: var(--color-secondary);
}

.admin-icon-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
}

.admin-card-content h3 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.admin-card-content p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* お問い合わせ案内 */
.admin-support-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin: var(--spacing-xxl);
  padding: var(--spacing-xl);
  background-color: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md);
}

.admin-info-icon {
  font-size: var(--font-xl);
  color: var(--color-primary);
  flex-shrink: 0;
}

.admin-info-content h4 {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.admin-info-content p {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   フォームスタイル
----------------------------------------------------------------------------- */
.admin-form-header {
  padding: var(--spacing-xxl);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-tertiary);
}

.admin-form-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;
}

.admin-form-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

.admin-ticket-form {
  padding: var(--spacing-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-label {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-label-icon {
  color: var(--color-primary);
  font-size: var(--font-sm);
}

.admin-required {
  color: var(--color-danger);
}

.admin-input,
.admin-select,
.admin-textarea {
  width: 100%;
  padding: var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  transition: all var(--transition-fast);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  box-sizing: border-box;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-input:disabled,
.admin-select:disabled,
.admin-textarea:disabled {
  background-color: var(--bg-disabled);
  cursor: not-allowed;
}

.admin-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-lg) center;
  background-size: 16px 12px;
  padding-right: calc(var(--spacing-lg) + 20px);
  -webkit-appearance: none;
          appearance: none;
}

.admin-textarea {
  min-height: 120px;
  resize: vertical;
}

.admin-char-count {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  text-align: right;
}

.admin-form-actions {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-lg);
}

/* -----------------------------------------------------------------------------
   ボタンスタイル
----------------------------------------------------------------------------- */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xxl);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--border-primary);
  text-decoration: none;
}

.admin-btn-primary {
  background-color: var(--color-primary);
  color: var(--text-white);
  border-color: var(--color-primary);
}

.admin-btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.admin-btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-primary);
}

.admin-btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.admin-btn-lg {
  padding: var(--spacing-xl) var(--spacing-xxxl);
  font-size: var(--font-md);
  min-width: 200px;
}

.admin-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   メッセージ・アラート
----------------------------------------------------------------------------- */
.admin-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-sm);
  margin: var(--spacing-xl);
  font-size: var(--font-sm);
}

.admin-message-success {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success-dark);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.admin-message-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger-dark);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.admin-message-icon {
  font-size: var(--font-lg);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   成功画面
----------------------------------------------------------------------------- */
.admin-success-container {
  padding: var(--spacing-xxxl);
  text-align: center;
}

.admin-success-icon {
  font-size: 4rem;
  color: var(--color-success);
  margin-bottom: var(--spacing-xl);
}

.admin-success-title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
}

.admin-success-message {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-lg) 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.admin-ticket-number {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xl);
}

.admin-ticket-number strong {
  color: var(--color-primary);
  font-family: monospace;
}

.admin-success-actions {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   チケット一覧
----------------------------------------------------------------------------- */
.admin-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  padding: var(--spacing-xxl);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-tertiary);
}

.admin-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-list-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* フィルター */
.admin-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-xxl);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.admin-filter-icon {
  color: var(--text-tertiary);
}

.admin-filter-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

.admin-filter-btn {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: transparent;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-filter-btn:hover {
  background-color: var(--bg-hover);
}

.admin-filter-btn.active {
  background-color: var(--color-primary);
  color: var(--text-white);
  border-color: var(--color-primary);
}

/* チケットリスト */
.admin-ticket-list {
  display: flex;
  flex-direction: column;
}

.admin-ticket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xl) var(--spacing-xxl);
  border-bottom: 1px solid var(--border-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.admin-ticket-item:hover {
  background-color: var(--bg-hover);
}

.admin-ticket-item:last-child {
  border-bottom: none;
}

.admin-ticket-main {
  flex: 1 1;
  min-width: 0;
}

.admin-ticket-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.admin-ticket-number {
  font-size: var(--font-xs);
  font-family: monospace;
  color: var(--text-tertiary);
  background-color: var(--bg-tertiary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-xs);
}

.admin-ticket-subject {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-ticket-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-ticket-category {
  background-color: var(--bg-tertiary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-xs);
}

.admin-ticket-date {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-ticket-arrow {
  color: var(--text-tertiary);
  margin-left: var(--spacing-lg);
}

/* ステータスバッジ */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-status-open {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
}

.admin-status-pending {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning-dark);
}

.admin-status-resolved {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success-dark);
}

.admin-status-closed {
  background-color: rgba(107, 114, 128, 0.1);
  color: var(--color-secondary);
}

/* 空状態 */
.admin-empty-state {
  padding: var(--spacing-xxxl);
  text-align: center;
}

.admin-empty-icon {
  font-size: 3rem;
  color: var(--text-disabled);
  margin-bottom: var(--spacing-xl);
}

.admin-empty-state h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.admin-empty-state p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-xl) 0;
}

/* ローディング */
.admin-loading {
  padding: var(--spacing-xxxl);
  text-align: center;
  color: var(--text-secondary);
}

.admin-loading p {
  margin-top: var(--spacing-lg);
  font-size: var(--font-sm);
}

/* エラー状態 */
.admin-error-state {
  padding: var(--spacing-xxxl);
  text-align: center;
  color: var(--color-danger);
}

.admin-error-state h3 {
  margin: var(--spacing-xl) 0;
  font-size: var(--font-lg);
  color: var(--text-primary);
}

/* -----------------------------------------------------------------------------
   チケット詳細
----------------------------------------------------------------------------- */
.admin-ticket-detail {
  max-width: 900px;
}

.admin-detail-header {
  padding: var(--spacing-xxl);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-tertiary);
}

.admin-detail-info {
  margin-top: var(--spacing-lg);
}

.admin-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.admin-detail-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: var(--spacing-sm) 0;
}

.admin-detail-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-detail-category {
  background-color: var(--bg-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-primary);
}

.admin-detail-date {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* メッセージコンテナ */
.admin-messages-container {
  padding: var(--spacing-xxl);
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  background-color: var(--bg-secondary);
}

.admin-message-bubble {
  max-width: 80%;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
}

.admin-message-user {
  align-self: flex-end;
  background-color: var(--color-primary);
  color: var(--text-white);
}

.admin-message-support {
  align-self: flex-start;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
}

.admin-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-xs);
  opacity: 0.8;
}

.admin-message-sender {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: var(--font-medium);
}

.admin-message-time {
  font-size: var(--font-xxs);
}

.admin-message-content {
  font-size: var(--font-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 返信セクション */
.admin-reply-section {
  padding: var(--spacing-xxl);
  border-top: 1px solid var(--border-primary);
  background-color: var(--bg-primary);
}

.admin-reply-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-reply-textarea {
  width: 100%;
  padding: var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}

.admin-reply-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-lg);
}

/* クローズ済み通知 */
.admin-ticket-closed-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  border-top: 1px solid var(--border-primary);
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-support-container {
    padding: var(--spacing-sm);
  }

  .admin-support-content {
    border-radius: var(--radius-sm);
  }

  .admin-support-header,
  .admin-form-header,
  .admin-list-header,
  .admin-detail-header {
    padding: var(--spacing-lg);
  }

  .admin-support-menu,
  .admin-ticket-form {
    padding: var(--spacing-lg);
  }

  .admin-support-card {
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
  }

  .admin-card-icon-wrapper {
    width: 40px;
    height: 40px;
    font-size: var(--font-lg);
  }

  .admin-list-header {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-header-left {
    order: 1;
  }

  .admin-list-header .admin-btn {
    order: 2;
    width: 100%;
  }

  .admin-filter-bar {
    padding: var(--spacing-md) var(--spacing-lg);
    overflow-x: auto;
  }

  .admin-ticket-item {
    padding: var(--spacing-lg);
  }

  .admin-ticket-meta {
    flex-wrap: wrap;
  }

  .admin-messages-container {
    padding: var(--spacing-lg);
    max-height: 300px;
  }

  .admin-message-bubble {
    max-width: 90%;
  }

  .admin-reply-section {
    padding: var(--spacing-lg);
  }

  .admin-reply-actions {
    flex-direction: column-reverse;
  }

  .admin-reply-actions .admin-btn {
    width: 100%;
  }

  .admin-success-actions {
    flex-direction: column;
  }

  .admin-success-actions .admin-btn {
    width: 100%;
  }

  .admin-btn-lg {
    min-width: auto;
    width: 100%;
  }
}

/* --- ログイン必須メッセージ --- */
.admin-login-required {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px dashed #cbd5e1;
  border: 2px dashed var(--color-border, #cbd5e1);
  border-radius: 12px;
  padding: 40px;
  padding: var(--spacing-xxl, 40px);
  text-align: center;
  margin-bottom: 32px;
  margin-bottom: var(--spacing-xl, 32px);
}

.admin-login-required-icon {
  font-size: 3rem;
  color: #3b82f6;
  color: var(--color-primary, #3b82f6);
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md, 16px);
}

.admin-login-required-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  color: var(--color-text, #1e293b);
  margin-bottom: 8px;
  margin-bottom: var(--spacing-sm, 8px);
}

.admin-login-required-message {
  color: #64748b;
  color: var(--color-text-secondary, #64748b);
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg, 24px);
}

/* --- フォーム非活性状態 --- */
.admin-form-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.admin-form-disabled .admin-select,
.admin-form-disabled .admin-input,
.admin-form-disabled .admin-textarea,
.admin-form-disabled .admin-btn {
  cursor: not-allowed;
  background-color: #f1f5f9;
}

/* --- チケットリストアイテムラッパー --- */
.admin-ticket-item-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md, 16px);
}

.admin-ticket-item-wrapper .admin-ticket-item {
  flex: 1 1;
  margin-bottom: 0;
  border-radius: 8px 0 0 8px;
}

/* --- アクションボタン --- */
.admin-ticket-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--color-border, #e2e8f0);
  border-left: none;
  /* border-radius: 0 8px 8px 0; */
  padding: 8px;
  padding: var(--spacing-sm, 8px);
  justify-content: center;
}

.admin-action-btn {
  padding: 8px 12px !important;
  min-width: 40px;
  font-size: 0.875rem;
}

.admin-action-btn.memberNEW_btn_secondary {
  background: #fff;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--color-border, #e2e8f0);
  color: #64748b;
  color: var(--color-text-secondary, #64748b);
}

.admin-action-btn.memberNEW_btn_secondary:hover {
  background: #3b82f6;
  background: var(--color-primary, #3b82f6);
  color: #fff;
  border-color: #3b82f6;
  border-color: var(--color-primary, #3b82f6);
}

.admin-action-btn.memberNEW_btn_danger {
  background: #fff;
  border: 1px solid #fecaca;
  color: #ef4444;
}

.admin-action-btn.memberNEW_btn_danger:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

/* --- 待機中メッセージ --- */
.admin-waiting-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  gap: var(--spacing-md, 16px);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 24px;
  padding: var(--spacing-lg, 24px);
  color: #1e40af;
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg, 24px);
}

.admin-waiting-notice svg {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* --- クローズセクション（返信フォームなしの場合） --- */
.admin-close-section {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
  padding: var(--spacing-md, 16px) 0;
}

/* --- 埋め込みモード用スタイル --- */
.admin-embedded-container {
  background: #fff;
  border: 1px solid #e2e8f0;
  border: 1px solid var(--color-border, #e2e8f0);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl);
}

.admin-embedded-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md, 16px);
  padding-bottom: 8px;
  padding-bottom: var(--spacing-sm, 8px);
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.admin-embedded-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
  color: var(--color-text, #1e293b);
  margin: 0;
}

.admin-embedded-link {
  color: #3b82f6;
  color: var(--color-primary, #3b82f6);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.admin-embedded-link:hover {
  text-decoration: underline;
}

.admin-embedded-loading {
  padding: 24px;
  padding: var(--spacing-lg, 24px);
  text-align: center;
}

/* --- 埋め込みモードではアクションボタン非表示 --- */
.admin-embedded-container .admin-ticket-actions {
  display: none;
}

/* .admin-embedded-container .admin-ticket-item {
  border-radius: 8px;
}

.admin-embedded-container .admin-ticket-item-wrapper .admin-ticket-item {
  border-radius: 8px;
} */

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .admin-ticket-item-wrapper {
    flex-direction: column;
  }
  
  /* .admin-ticket-item-wrapper .admin-ticket-item {
    border-radius: 8px 8px 0 0;
  }
   */
  .admin-ticket-actions {
    flex-direction: row;
    justify-content: flex-end;
    /* border-radius: 0 0 8px 8px; */
    border-left: 1px solid #e2e8f0;
    border-left: 1px solid var(--color-border, #e2e8f0);
    border-top: none;
  }
  
  .admin-login-required {
    padding: 24px;
    padding: var(--spacing-lg, 24px);
  }
  
  .MemberFeatures-hero-actions {
    flex-direction: column;
    gap: 8px;
    gap: var(--spacing-sm, 8px);
  }
}


/* =============================================================================
   admin-phase3.css - roboticker.ai Admin Panel Styles (Phase 3)
   管理者画面用スタイル追加分
   admin.css に追記してください
============================================================================= */

/* -----------------------------------------------------------------------------
   管理者ログイン画面
----------------------------------------------------------------------------- */
.admin-login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: var(--spacing-lg);
}

.admin-login-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.admin-login-header {
  padding: var(--spacing-xxxl) var(--spacing-xxl);
  text-align: center;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.admin-login-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  font-size: 28px;
}

.admin-login-title {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--spacing-sm) 0;
}

.admin-login-subtitle {
  font-size: var(--font-sm);
  opacity: 0.9;
  margin: 0;
}

.admin-login-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) var(--spacing-xxl) 0;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #dc2626;
  font-size: var(--font-sm);
}

.admin-login-form {
  padding: var(--spacing-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.admin-login-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-login-label {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-login-input {
  padding: var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  transition: all var(--transition-fast);
}

.admin-login-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.admin-login-2fa-input {
  text-align: center;
  font-size: var(--font-xl);
  letter-spacing: 0.5em;
  font-family: monospace;
}

.admin-login-2fa-notice {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  color: #1e40af;
  font-size: var(--font-sm);
}

.admin-login-back-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-sm);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.admin-login-submit {
  padding: var(--spacing-lg) var(--spacing-xxl);
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.admin-login-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.admin-login-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-login-footer {
  padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-xxl);
  text-align: center;
}

.admin-login-footer p {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin: 0;
}

.admin-login-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* -----------------------------------------------------------------------------
   管理画面レイアウト
----------------------------------------------------------------------------- */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-secondary);
}

/* サイドバー */
.admin-sidebar {
  width: 260px;
  background: #1e293b;
  color: white;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-normal);
  position: fixed;
  height: 95vh;
  z-index: 100;
  overflow: hidden;
}

.admin-sidebar.collapsed {
  width: 70px;
}

.admin-sidebar-header {
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-weight: var(--font-bold);
  font-size: var(--font-lg);
}

.admin-sidebar-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.admin-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-sidebar-close {
  display: none;
}

/* ナビゲーション */
.admin-sidebar-nav {
  flex: 1 1;
  padding: var(--spacing-lg) 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-nav-item {
  margin: var(--spacing-xs) var(--spacing-sm);
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-size: var(--font-sm);
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.admin-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.admin-nav-link.active {
  background: var(--color-primary);
  color: white;
}

.admin-nav-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.admin-nav-arrow {
  margin-left: auto;
  font-size: var(--font-xs);
}

.admin-nav-sublist {
  list-style: none;
  padding: var(--spacing-sm) 0 0 calc(var(--spacing-lg) + 28px);
  margin: 0;
}

.admin-nav-sublink {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: var(--font-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.admin-nav-sublink:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}

.admin-nav-sublink.active {
  color: var(--color-primary-light);
}

/* サイドバーフッター */
.admin-sidebar-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  margin-top: auto;
}


.admin-user-avatar {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-user-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-user-name {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.6);
}

.admin-user-role {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.6);
}

.admin-sidebar-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.admin-sidebar-action {
  flex: 1 1;
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.admin-sidebar-action:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.admin-sidebar-action.logout:hover {
  background: #dc2626;
}

/* メインコンテンツ */
.admin-main {
  flex: 1 1;
  margin-left: 260px;
  transition: margin-left var(--transition-normal);
  min-height: 100vh;
}

.admin-sidebar.collapsed + .admin-main,
.admin-main.expanded {
  margin-left: 70px;
}

.admin-content {
  padding: var(--spacing-xxl);
}

/* モバイルヘッダー */
.admin-mobile-header {
  display: none;
}

.admin-mobile-overlay {
  display: none;
}

/* デスクトップ/モバイル表示制御 */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* -----------------------------------------------------------------------------
   ページ共通スタイル
----------------------------------------------------------------------------- */
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-xxl);
  gap: var(--spacing-lg);
}

.admin-page-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-page-title {
  font-size: var(--font-xxl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.admin-page-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

.admin-page-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* ローディング */
.admin-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxxl);
  color: var(--text-secondary);
  gap: var(--spacing-md);
}

/* 空状態 */
.admin-empty-state {
  text-align: center;
  padding: var(--spacing-xxxl);
  color: var(--text-secondary);
}

.admin-empty-state .admin-empty-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}

.admin-empty-state h3 {
  font-size: var(--font-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.admin-empty-state p {
  margin: 0;
}

.admin-empty-state-small {
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--text-tertiary);
}

.admin-empty-state-small.admin-success-state {
  color: var(--color-success);
}

.admin-empty-state-small svg {
  font-size: 24px;
  margin-bottom: var(--spacing-sm);
}

/* エラー状態 */
.admin-error-state {
  text-align: center;
  padding: var(--spacing-xxxl);
  color: var(--color-danger);
}

.admin-error-state svg {
  margin-bottom: var(--spacing-lg);
}

.admin-error-state h3 {
  margin: 0 0 var(--spacing-lg) 0;
}

/* -----------------------------------------------------------------------------
   ダッシュボード
----------------------------------------------------------------------------- */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
}

.admin-stat-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.admin-stat-icon-primary {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.admin-stat-icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.admin-stat-icon-info {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.admin-stat-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.admin-stat-content {
  display: flex;
  flex-direction: column;
}

.admin-stat-value {
  font-size: var(--font-xxl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.admin-stat-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* ダッシュボードグリッド */
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

.admin-dashboard-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
}

.admin-card-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-card-link {
  font-size: var(--font-sm);
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-card-link:hover {
  text-decoration: underline;
}

.admin-card-content {
  padding: var(--spacing-lg);
}

/* チケットリスト（コンパクト） */
.admin-ticket-list-compact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-ticket-item-compact {
  border-bottom: 1px solid var(--border-primary);
}

.admin-ticket-item-compact:last-child {
  border-bottom: none;
}

.admin-ticket-item-compact a {
  display: block;
  padding: var(--spacing-md);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.admin-ticket-item-compact a:hover {
  background: var(--bg-hover);
}

.admin-ticket-compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.admin-ticket-number-small {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-family: monospace;
}

.admin-ticket-compact-subject {
  font-size: var(--font-sm);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-ticket-compact-meta {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* アラートリスト */
.admin-alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-alert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-primary);
}

.admin-alert-item:last-child {
  border-bottom: none;
}

.admin-alert-item.admin-alert-warning {
  color: #f59e0b;
}

.admin-alert-item.admin-alert-error {
  color: #dc2626;
}

.admin-alert-content {
  flex: 1 1;
  min-width: 0;
}

.admin-alert-message {
  font-size: var(--font-sm);
  color: var(--text-primary);
  display: block;
}

.admin-alert-time {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

/* エラーリスト */
.admin-error-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-error-item {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-primary);
}

.admin-error-item:last-child {
  border-bottom: none;
}

.admin-error-message {
  font-size: var(--font-sm);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.admin-error-meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-error-category {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* クイック統計 */
.admin-quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
}

.admin-quick-stat-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.admin-quick-stat-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-quick-stat-value {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* 最終更新時刻 */
.admin-last-updated {
  text-align: right;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-top: var(--spacing-lg);
}

/* -----------------------------------------------------------------------------
   チケット一覧ページ
----------------------------------------------------------------------------- */
.admin-filter-section {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.admin-search-form {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.admin-search-input-wrapper {
  flex: 1 1;
  position: relative;
}

.admin-search-icon {
  position: absolute;
  left: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

.admin-search-input {
  width: 90%;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) calc(var(--spacing-lg) + 24px);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
}

.admin-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.admin-filter-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.admin-filter-icon {
  color: var(--text-tertiary);
}

.admin-filter-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-primary);
  min-width: 140px;
}

/* チケットテーブル */
.admin-ticket-table-container {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.admin-ticket-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-ticket-table th {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-ticket-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--border-primary);
  vertical-align: middle;
}

.admin-ticket-table tr:hover {
  background: var(--bg-hover);
}

.admin-ticket-table tr.admin-row-urgent {
  background: rgba(239, 68, 68, 0.05);
}

.admin-ticket-table tr.admin-row-urgent:hover {
  background: rgba(239, 68, 68, 0.1);
}

.admin-ticket-number {
  font-family: monospace;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-ticket-number-large {
  font-family: monospace;
  font-size: var(--font-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.admin-ticket-subject-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.admin-ticket-subject-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.admin-category-badge {
  font-size: var(--font-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
}

.admin-priority-badge {
  font-size: var(--font-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-priority-urgent {
  background: #fef2f2;
  color: #dc2626;
}

.admin-priority-high {
  background: #fff7ed;
  color: #ea580c;
}

.admin-priority-normal {
  background: #fefce8;
  color: #ca8a04;
}

.admin-priority-low {
  background: #f0fdf4;
  color: #16a34a;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
}

.admin-assign-select {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  background: var(--bg-primary);
  max-width: 150px;
}

.admin-assignee-name {
  font-size: var(--font-sm);
}

.admin-unassigned {
  color: var(--text-tertiary);
  font-style: italic;
}

.admin-date-cell {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.admin-table-action {
  color: var(--text-tertiary);
  padding: var(--spacing-sm);
  display: inline-flex;
}

.admin-table-action:hover {
  color: var(--color-primary);
}

/* ページネーション */
.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.admin-pagination-info {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   チケット詳細ページ
----------------------------------------------------------------------------- */
.admin-detail-header-section {
  margin-bottom: var(--spacing-xxl);
}

.admin-detail-title-section {
  margin-top: var(--spacing-lg);
}

.admin-detail-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.admin-detail-title {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.admin-detail-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: var(--spacing-xl);
  gap: var(--spacing-xl);
}

.admin-detail-main {
  min-width: 0;
}

.admin-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* メッセージセクション */
.admin-messages-section {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.admin-section-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  padding: var(--spacing-lg);
  margin: 0;
  border-bottom: 1px solid var(--border-primary);
}

/* 内部メモバッジ */
.admin-internal-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: #7c3aed;
  background: #ede9fe;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
  margin-bottom: var(--spacing-sm);
  border: 1px solid #c4b5fd;
}

.admin-internal-badge svg {
  font-size: 10px;
}

.admin-message-internal {
  background: #faf5ff !important;
  border-left: 4px solid #7c3aed !important;
  position: relative;
}

.admin-message-internal::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent #7c3aed transparent transparent;
}

/* 返信ツール */
.admin-reply-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.admin-template-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-primary);
  min-width: 200px;
}

.admin-internal-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.admin-internal-checkbox input {
  margin: 0;
}

.admin-internal-textarea {
  background: #faf5ff !important;
  border-color: #c4b5fd !important;
}

/* サイドバーカード */
.admin-sidebar-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
}

.admin-sidebar-title {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-primary);
}

.admin-info-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-info-label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-info-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ユーザー情報カード */

.admin-user-avatar-large {
  width: 48px;
  height: 48px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-tertiary);
}

/* アクショングループ */
.admin-action-group {
  margin-bottom: var(--spacing-md);
}

.admin-action-group:last-child {
  margin-bottom: 0;
}

.admin-action-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xs);
}

.admin-action-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-primary);
}

/* 操作ログ */
.admin-logs-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}

.admin-logs-toggle:hover {
  color: var(--text-primary);
}

.admin-logs-count {
  margin-left: auto;
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
}

.admin-logs-list {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-primary);
  max-height: 200px;
  overflow-y: auto;
}

.admin-log-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-xs);
}

.admin-log-action {
  color: var(--text-primary);
}

.admin-log-time {
  color: var(--text-tertiary);
}

.admin-no-logs {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
----------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-detail-content {
    grid-template-columns: 1fr;
  }
  
  .admin-detail-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
  
  .admin-sidebar {
    position: fixed;
    left: -260px;
    transition: left var(--transition-normal);
  }
  
  .admin-sidebar.mobile-open {
    left: 0;
  }
  
  .admin-sidebar-close {
    display: flex !important;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .admin-main {
    margin-left: 0;
  }
  
  .admin-mobile-header {
    display: flex !important;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: #1e293b;
    color: white;
  }
  
  .admin-mobile-menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: var(--spacing-sm);
  }
  
  .admin-mobile-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: var(--font-bold);
  }
  
  .admin-mobile-overlay {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }
  
  .admin-content {
    padding: var(--spacing-lg);
  }
  
  .admin-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-page-actions {
    justify-content: stretch;
  }
  
  .admin-page-actions .admin-btn {
    flex: 1 1;
  }
  
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-filter-section {
    padding: var(--spacing-md);
  }
  
  .admin-search-form {
    flex-direction: column;
  }
  
  .admin-filter-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-filter-select {
    width: 100%;
  }
  
  .admin-ticket-table-container {
    overflow-x: auto;
  }
  
  .admin-ticket-table {
    min-width: 800px;
  }
  
  .admin-detail-sidebar {
    grid-template-columns: 1fr;
  }
  
  .admin-reply-tools {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-template-select {
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   追加スタイル（バグ修正 + 改善）
----------------------------------------------------------------------------- */

/* クリッカブル統計カード */
.admin-stat-card-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.admin-stat-card-clickable:active {
  transform: translateY(0);
}

.admin-stat-icon-danger {
  background: #fef2f2;
  color: #dc2626;
}

/* ステータスバッジ */
.admin-status-badge {
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-status-open {
  background: #fef3c7;
  color: #d97706;
}

.admin-status-progress {
  background: #dbeafe;
  color: #2563eb;
}

.admin-status-waiting {
  background: #f3e8ff;
  color: #7c3aed;
}

.admin-status-resolved {
  background: #d1fae5;
  color: #059669;
}

.admin-status-closed {
  background: #f3f4f6;
  color: #6b7280;
}

/* チケットバッジコンテナ */
.admin-ticket-badges {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

/* 緊急チケット行のハイライト */
.admin-ticket-urgent {
  border-left: 3px solid #dc2626;
  background: rgba(220, 38, 38, 0.03);
}

/* 小さいセレクト（表示件数用） */
.admin-select-small {
  padding: 4px 8px;
  font-size: var(--font-xs);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  min-width: 60px;
}

/* カードコントロール */
.admin-card-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* カードフッター */
.admin-card-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-primary);
  text-align: center;
}

.admin-showing-info {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

/* ワイドカード */
.admin-dashboard-card-wide {
  grid-column: span 2;
}

@media (max-width: 1200px) {
  .admin-dashboard-card-wide {
    grid-column: span 1;
  }
}

/* チケットユーザー情報 */
.admin-ticket-user {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.admin-ticket-date {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-left: auto;
}

.admin-ticket-compact-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

/* サブスクリプション情報 */
.admin-subscription-info {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-subscription-badge {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
}

.admin-subscription-free {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-subscription-ticket {
  background: #dbeafe;
  color: #1d4ed8;
}

.admin-subscription-premium_monthly {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #f59e0b;
}

.admin-subscription-unknown {
  background: #f3f4f6;
  color: #9ca3af;
}

/* 操作ログの改善 */
.admin-log-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-primary);
}

.admin-log-item:last-child {
  border-bottom: none;
}

.admin-log-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.admin-log-action {
  font-size: var(--font-xs);
  color: var(--text-primary);
}

.admin-log-actor {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-style: italic;
}

.admin-log-time {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* =============================================================================
   admin-logs.css - roboticker.ai Admin Log Viewer Styles
   Phase 4: ログ機能実装
   admin.css に追加するスタイル
============================================================================= */

/* -----------------------------------------------------------------------------
   ログビューア共通スタイル
----------------------------------------------------------------------------- */

.admin-log-viewer {
  width: 100%;
}

/* ログ統計カード */
.admin-log-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-log-stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
}

.admin-log-stat-value {
  font-size: var(--font-xxl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.admin-log-stat-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   ログテーブル
----------------------------------------------------------------------------- */

.admin-log-table-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--spacing-xl);
}

.admin-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
}

.admin-log-table th {
  background: var(--bg-tertiary);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-primary);
  white-space: nowrap;
}

.admin-log-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
  vertical-align: middle;
}

.admin-log-table tbody tr:hover {
  background: var(--bg-hover);
}

.admin-log-row-error {
  background: rgba(239, 68, 68, 0.03);
}

.admin-log-row-error:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

.admin-log-row-critical {
  background: rgba(220, 38, 38, 0.05);
  border-left: 3px solid #dc2626;
}

/* タイムスタンプ */
.admin-log-timestamp {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  white-space: nowrap;
}

.admin-log-timestamp-icon {
  color: var(--text-tertiary);
  font-size: 10px;
}

/* 重要度バッジ */
.admin-log-severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-severity-debug {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-severity-info {
  background: #dbeafe;
  color: #1d4ed8;
}

.admin-severity-warning {
  background: #fef3c7;
  color: #d97706;
}

.admin-severity-error {
  background: #fee2e2;
  color: #dc2626;
}

.admin-severity-critical {
  background: #dc2626;
  color: white;
}

/* カテゴリバッジ */
.admin-log-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-category-auth {
  background: #e0e7ff;
  color: #4338ca;
}

.admin-category-security {
  background: #fce7f3;
  color: #be185d;
}

.admin-category-billing {
  background: #d1fae5;
  color: #059669;
}

.admin-category-usage {
  background: #e0f2fe;
  color: #0369a1;
}

.admin-category-error {
  background: #fee2e2;
  color: #dc2626;
}

.admin-category-performance {
  background: #fef3c7;
  color: #d97706;
}

.admin-category-system {
  background: #f3f4f6;
  color: #4b5563;
}

.admin-category-default {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* イベントタイプ */
.admin-log-event-type {
  font-family: monospace;
  font-size: var(--font-xs);
  color: var(--text-primary);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ユーザー/IP表示 */
.admin-log-user,
.admin-log-ip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.admin-log-user-none,
.admin-log-ip-none {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}

.admin-log-message {
  font-size: var(--font-xs);
  color: var(--text-primary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 展開ボタン */
.admin-log-expand-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

.admin-log-expand-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* 詳細行 */
.admin-log-detail-row {
  background: var(--bg-secondary) !important;
}

.admin-log-detail-row:hover {
  background: var(--bg-secondary) !important;
}

.admin-log-detail {
  padding: var(--spacing-lg);
}

.admin-log-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.admin-log-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-log-detail-label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
}

.admin-log-detail-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.admin-log-mono {
  font-family: monospace;
  font-size: var(--font-xs);
}

/* JSONプレビュー */
.admin-log-detail-metadata {
  margin-top: var(--spacing-md);
}

.admin-log-json {
  background: #1e293b;
  color: #e2e8f0;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: var(--font-xs);
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* User Agent */
.admin-log-detail-ua {
  margin-top: var(--spacing-md);
}

.admin-log-ua-text {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  word-break: break-all;
}

/* フィルター入力 */
.admin-filter-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-width: 100px;
}

.admin-filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* ページネーション改善 */
.admin-pagination-total {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-left: var(--spacing-sm);
}

/* -----------------------------------------------------------------------------
   セキュリティログ固有スタイル
----------------------------------------------------------------------------- */

/* セキュリティアラートカード */
.admin-security-alerts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-security-alert-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
}

.admin-security-alert-card.admin-alert-danger {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.03);
}

.admin-security-alert-card.admin-alert-warning {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.03);
}

.admin-alert-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-lg);
}

.admin-alert-danger .admin-alert-icon {
  background: #fee2e2;
  color: #dc2626;
}

.admin-alert-warning .admin-alert-icon {
  background: #fef3c7;
  color: #d97706;
}

.admin-alert-content {
  flex: 1 1;
}

.admin-alert-value {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.admin-alert-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* タブナビゲーション */
.admin-tab-nav {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: var(--spacing-md);
}

.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.admin-tab-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.admin-tab-btn.active {
  background: var(--color-primary);
  color: white;
}

.admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
}

.admin-tab-badge-danger {
  background: #dc2626;
  color: white;
}

/* イベントタイプバッジ */
.admin-log-event-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  color: var(--text-primary);
  text-transform: capitalize;
}

/* ブロック/アクティブバッジ */
.admin-blocked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fee2e2;
  color: #dc2626;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #d1fae5;
  color: #059669;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

/* 詳細プレビュー */
.admin-log-details-preview {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-family: monospace;
}

/* IPリスト */
.admin-ip-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-ip-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.admin-ip-card.admin-ip-warning {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.03);
}

.admin-ip-card.admin-ip-danger {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.03);
}

.admin-ip-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.admin-ip-warning .admin-ip-icon {
  background: #fef3c7;
  color: #d97706;
}

.admin-ip-danger .admin-ip-icon {
  background: #fee2e2;
  color: #dc2626;
}

.admin-ip-info {
  flex: 1 1;
}

.admin-ip-address {
  font-family: monospace;
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.admin-ip-attempts,
.admin-ip-until {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.admin-btn-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-xs);
}

.admin-btn-danger {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

.admin-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* 空状態成功アイコン */
.admin-empty-icon-success {
  color: #059669 !important;
}

.admin-empty-icon-success svg {
  color: #059669;
}

/* -----------------------------------------------------------------------------
   監査ログ固有スタイル
----------------------------------------------------------------------------- */

/* アクションバッジ */
.admin-audit-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

.admin-action-create {
  background: #d1fae5;
  color: #059669;
}

.admin-action-update {
  background: #dbeafe;
  color: #2563eb;
}

.admin-action-delete {
  background: #fee2e2;
  color: #dc2626;
}

.admin-action-auth {
  background: #e0e7ff;
  color: #4338ca;
}

.admin-action-change {
  background: #fef3c7;
  color: #d97706;
}

.admin-action-permission {
  background: #fce7f3;
  color: #be185d;
}

.admin-action-default {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* リソース表示 */
.admin-audit-resource {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  text-transform: capitalize;
}

.admin-audit-resource-id {
  font-family: monospace;
  font-size: var(--font-xs);
  color: var(--text-primary);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* アクター表示 */
.admin-audit-actor {
  font-size: var(--font-xs);
}

.admin-actor-admin {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7c3aed;
}

.admin-actor-user {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
}

.admin-actor-system {
  color: var(--text-tertiary);
  font-style: italic;
}

/* 変更あり表示 */
.admin-audit-has-changes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--color-primary);
  cursor: pointer;
}

.admin-audit-no-changes {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}

/* 監査詳細 */
.admin-audit-detail {
  padding: var(--spacing-lg);
}

.admin-audit-detail-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

/* 差分表示 */
.admin-diff-container {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.admin-diff-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-xs);
  border-bottom: 1px solid var(--border-primary);
}

.admin-diff-row:last-child {
  border-bottom: none;
}

.admin-diff-key {
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  min-width: 100px;
}

.admin-diff-old {
  color: #dc2626;
  text-decoration: line-through;
  background: rgba(220, 38, 38, 0.1);
  padding: 1px 4px;
  border-radius: 2px;
}

.admin-diff-arrow {
  color: var(--text-tertiary);
}

.admin-diff-new {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  padding: 1px 4px;
  border-radius: 2px;
}

/* 監査JSON表示 */
.admin-audit-json-section {
  margin-top: var(--spacing-md);
}

.admin-audit-json-label {
  display: block;
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xs);
}

.admin-log-json-old {
  border-left: 3px solid #dc2626;
}

.admin-log-json-new {
  border-left: 3px solid #059669;
}

/* 権限拒否画面 */
.admin-permission-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxxl);
  text-align: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-xl);
}

.admin-permission-icon {
  font-size: 48px;
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-lg);
}

.admin-permission-denied h3 {
  font-size: var(--font-lg);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.admin-permission-denied p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
----------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .admin-log-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .admin-security-alerts {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .admin-log-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .admin-log-stats {
    grid-template-columns: 1fr;
  }
  
  .admin-security-alerts {
    grid-template-columns: 1fr;
  }
  
  .admin-log-table-container {
    overflow-x: auto;
  }
  
  .admin-log-table {
    min-width: 900px;
  }
  
  .admin-log-detail-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-tab-nav {
    flex-wrap: wrap;
  }
  
  .admin-tab-btn {
    flex: 1 1;
    justify-content: center;
  }
}

/* =============================================================================
   admin.css に追加 - Member Management スタイル
   Phase 5: 会員管理機能
   プレフィックス: admin-member-
============================================================================= */

/* -----------------------------------------------------------------------------
   Member コンテナ
----------------------------------------------------------------------------- */
.admin-member-container {
  padding: var(--spacing-lg);
}

.admin-member-header {
  margin-bottom: var(--spacing-xl);
}

.admin-member-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.admin-member-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.admin-member-title-icon {
  color: var(--color-primary);
}

.admin-member-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Member 統計カード
----------------------------------------------------------------------------- */
.admin-member-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-member-stat-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}

.admin-member-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
}

.admin-member-stat-total {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.admin-member-stat-premium {
  background: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
}

.admin-member-stat-ticket {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.admin-member-stat-new {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.admin-member-stat-info {
  display: flex;
  flex-direction: column;
}

.admin-member-stat-value {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.admin-member-stat-label {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Member フィルター
----------------------------------------------------------------------------- */
.admin-member-filters {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-member-search-form {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.admin-member-search-input-wrapper {
  flex: 1 1;
  position: relative;
}

.admin-member-search-icon {
  position: absolute;
  left: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

.admin-member-search-input {
  width: 90%;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-left: 40px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.admin-member-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-member-filter-row {
  display: flex;
  gap: var(--spacing-md);
}

.admin-member-filter-select {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  min-width: 150px;
}

/* -----------------------------------------------------------------------------
   Member テーブル
----------------------------------------------------------------------------- */
.admin-member-table-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-member-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-member-table thead {
  background: var(--bg-tertiary);
}

.admin-member-table th {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-primary);
}

.admin-member-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
}

.admin-member-row:hover {
  background: var(--bg-hover);
}

.admin-member-id {
  font-family: monospace;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-member-user-link {
  text-decoration: none;
  color: inherit;
}

.admin-member-user-link:hover .admin-member-username {
  color: var(--color-primary);
}

.admin-member-user-info {
  display: flex;
  flex-direction: column;
}

.admin-member-username {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.admin-member-email {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.admin-member-credits {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.admin-member-date {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.admin-member-2fa-enabled {
  color: #059669;
}

.admin-member-2fa-disabled {
  color: var(--text-tertiary);
}

/* -----------------------------------------------------------------------------
   Member ステータスバッジ
----------------------------------------------------------------------------- */
.admin-member-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-member-status-active {
  background: #d1fae5;
  color: #059669;
}

.admin-member-status-suspended {
  background: #fee2e2;
  color: #dc2626;
}

.admin-member-status-pending {
  background: #fef3c7;
  color: #d97706;
}

.admin-member-status-banned {
  background: #fecaca;
  color: #991b1b;
}

.admin-member-status-unknown {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.admin-member-status-lg {
  padding: 4px 12px;
  font-size: var(--font-sm);
}

/* -----------------------------------------------------------------------------
   Member サブスクリプションバッジ
----------------------------------------------------------------------------- */
.admin-member-sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-member-sub-premium {
  background: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
}

.admin-member-sub-ticket {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.admin-member-sub-free {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Member 詳細ページ
----------------------------------------------------------------------------- */
.admin-member-detail-header {
  margin-bottom: var(--spacing-xl);
}

.admin-member-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-sm);
  margin-bottom: var(--spacing-lg);
  transition: color var(--transition-fast);
}

.admin-member-back-link:hover {
  color: var(--color-primary);
}

.admin-member-detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-member-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-member-detail-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.admin-member-detail-id {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  font-family: monospace;
}

/* -----------------------------------------------------------------------------
   Member 詳細グリッド
----------------------------------------------------------------------------- */
.admin-member-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-member-detail-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-member-card-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  margin: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.admin-member-card-title svg {
  color: var(--color-primary);
}

.admin-member-card-content {
  padding: var(--spacing-lg);
}

.admin-member-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-secondary);
}

.admin-member-info-row:last-child {
  border-bottom: none;
}

.admin-member-info-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-member-info-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-member-info-icon {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}

.admin-member-verified-badge {
  color: #059669;
  font-size: var(--font-xs);
}

.admin-member-mono {
  font-family: monospace;
  font-size: var(--font-xs);
}

.admin-member-credit-balance {
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.admin-member-toggle-on {
  color: #059669;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-member-toggle-off {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-member-action-inline {
  margin-left: var(--spacing-sm);
  padding: 2px 8px;
  font-size: var(--font-xs);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-member-action-inline:hover {
  background: var(--color-primary);
  color: white;
}

.admin-member-warning {
  color: #dc2626;
}

/* -----------------------------------------------------------------------------
   Member アクション
----------------------------------------------------------------------------- */
.admin-member-actions {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-member-actions-title {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
}

.admin-member-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.admin-member-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-member-action-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.admin-member-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-member-action-success {
  border-color: #059669;
  color: #059669;
}

.admin-member-action-success:hover:not(:disabled) {
  background: #059669;
  color: white;
}

.admin-member-action-warning {
  border-color: #d97706;
  color: #d97706;
}

.admin-member-action-warning:hover:not(:disabled) {
  background: #d97706;
  color: white;
}

.admin-member-action-danger {
  border-color: #dc2626;
  color: #dc2626;
}

.admin-member-action-danger:hover:not(:disabled) {
  background: #dc2626;
  color: white;
}

/* -----------------------------------------------------------------------------
   Member アクティビティ
----------------------------------------------------------------------------- */
.admin-member-activity {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-member-activity-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  margin: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.admin-member-activity-title svg {
  color: var(--color-primary);
}

.admin-member-activity-list {
  max-height: 400px;
  overflow-y: auto;
}

.admin-member-activity-item {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-sm);
}

.admin-member-activity-item:last-child {
  border-bottom: none;
}

.admin-member-activity-action {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.admin-member-activity-detail {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-member-activity-date {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  text-align: right;
}

/* -----------------------------------------------------------------------------
   モーダル追加スタイル
----------------------------------------------------------------------------- */
.admin-modal-title-warning {
  color: #d97706;
}

.admin-modal-title-warning svg {
  margin-right: var(--spacing-sm);
}

.admin-modal-title-danger {
  color: #dc2626;
}

.admin-modal-title-danger svg {
  margin-right: var(--spacing-sm);
}

.admin-modal-danger {
  border-top: 4px solid #dc2626;
}

.admin-btn-warning {
  background: #d97706;
  color: white;
  border-color: #d97706;
}

.admin-btn-warning:hover:not(:disabled) {
  background: #b45309;
  border-color: #b45309;
}

.admin-btn-success {
  background: #059669;
  color: white;
  border-color: #059669;
}

.admin-btn-success:hover:not(:disabled) {
  background: #047857;
  border-color: #047857;
}

.admin-input-hint {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-top: var(--spacing-xs);
}

.admin-message-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: var(--font-lg);
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}

.admin-message-close:hover {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
----------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .admin-member-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .admin-member-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-member-stats {
    grid-template-columns: 1fr;
  }
  
  .admin-member-table-container {
    overflow-x: auto;
  }
  
  .admin-member-table {
    min-width: 800px;
  }
  
  .admin-member-search-form {
    flex-direction: column;
  }
  
  .admin-member-filter-row {
    flex-direction: column;
  }
  
  .admin-member-filter-select {
    width: 100%;
  }
  
  .admin-member-action-grid {
    flex-direction: column;
  }
  
  .admin-member-action-btn {
    width: 100%;
    justify-content: center;
  }
  
  .admin-member-activity-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
  
  .admin-member-activity-date {
    text-align: left;
  }
}

/* =============================================================================
   Phase 5-2: Admin User Management Styles
   プレフィックス: admin-user-xxx
   admin.css に追加
============================================================================= */

/* -----------------------------------------------------------------------------
   Admin User コンテナ
----------------------------------------------------------------------------- */
.admin-user-container {
  padding: var(--spacing-xl);
  background-color: var(--bg-secondary);
  min-height: 100%;
}

.admin-user-header {
  margin-bottom: var(--spacing-xl);
}

.admin-user-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.admin-user-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.admin-user-title-icon {
  color: var(--color-primary);
}

.admin-user-header-actions {
  display: flex;
  gap: var(--spacing-md);
}

.admin-user-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Admin User 統計カード
----------------------------------------------------------------------------- */
.admin-user-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-user-stat-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}

.admin-user-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  flex-shrink: 0;
}

.admin-user-stat-total {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.admin-user-stat-super {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.admin-user-stat-active {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.admin-user-stat-2fa {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.admin-user-stat-info {
  display: flex;
  flex-direction: column;
}

.admin-user-stat-value {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.admin-user-stat-label {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Admin User フィルター
----------------------------------------------------------------------------- */
.admin-user-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}

.admin-user-search-form {
  display: flex;
  gap: var(--spacing-md);
}

.admin-user-search-input-wrapper {
  position: relative;
  flex: 1 1;
}

.admin-user-search-icon {
  position: absolute;
  left: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

.admin-user-search-input {
  width: 90%;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-left: calc(var(--spacing-xxl) + var(--spacing-sm));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.admin-user-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-user-filter-row {
  display: flex;
  gap: var(--spacing-md);
}

.admin-user-filter-select {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  min-width: 150px;
}


/* -----------------------------------------------------------------------------
   Admin User ステータスバッジ
----------------------------------------------------------------------------- */
.admin-user-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-user-status-active {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.admin-user-status-inactive {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.admin-user-status-locked {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* -----------------------------------------------------------------------------
   Admin User ロールバッジ
----------------------------------------------------------------------------- */
.admin-user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-user-role-badge-lg {
  padding: 6px 14px;
  font-size: var(--font-sm);
}

.admin-user-role-super-admin {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.15));
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.admin-user-role-admin {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.admin-user-role-support-lead {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.admin-user-role-support {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.2);
}

/* -----------------------------------------------------------------------------
   Admin User 詳細ページ
----------------------------------------------------------------------------- */
.admin-user-detail-header {
  margin-bottom: var(--spacing-xl);
}

.admin-user-detail-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.admin-user-detail-title-info {
  flex: 1 1;
}

.admin-user-detail-title {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-user-self-tag {
  font-size: var(--font-sm);
  font-weight: var(--font-normal);
  color: var(--color-primary);
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.admin-user-detail-email {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Admin User カード
----------------------------------------------------------------------------- */
.admin-user-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--spacing-xl);
  gap: var(--spacing-xl);
}

.admin-user-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-user-card-full {
  grid-column: 1 / -1;
}

.admin-user-card-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.admin-user-card-title svg {
  color: var(--color-primary);
}

.admin-user-card-action {
  margin-left: auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-user-card-action:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.admin-user-card-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-user-card-content {
  padding: var(--spacing-lg);
}


.admin-user-action-inline {
  margin-left: var(--spacing-sm);
  padding: 2px 8px;
  font-size: var(--font-xs);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-user-action-inline:hover {
  background: var(--color-primary);
  color: white;
}

.admin-user-toggle-on {
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-user-toggle-off {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-user-warning {
  color: #ef4444;
}

.admin-user-warning-icon {
  margin-left: var(--spacing-xs);
}

/* -----------------------------------------------------------------------------
   Admin User アクション
----------------------------------------------------------------------------- */
.admin-user-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.admin-user-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-user-action-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.admin-user-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-user-action-success {
  border-color: #22c55e;
  color: #22c55e;
}

.admin-user-action-success:hover:not(:disabled) {
  background: #22c55e;
  color: white;
}

.admin-user-action-warning {
  border-color: #f59e0b;
  color: #f59e0b;
}

.admin-user-action-warning:hover:not(:disabled) {
  background: #f59e0b;
  color: white;
}

.admin-user-action-danger {
  border-color: #ef4444;
  color: #ef4444;
}

.admin-user-action-danger:hover:not(:disabled) {
  background: #ef4444;
  color: white;
}

/* -----------------------------------------------------------------------------
   Admin User 編集フォーム
----------------------------------------------------------------------------- */
.admin-user-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-user-edit-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* -----------------------------------------------------------------------------
   Admin User 作成フォーム
----------------------------------------------------------------------------- */
.admin-user-form-header {
  margin-bottom: var(--spacing-xl);
}

.admin-user-form-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.admin-user-form-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

.admin-user-form {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-user-form-content {
  padding: var(--spacing-xl);
}

.admin-user-form-section {
  margin-bottom: var(--spacing-xl);
}

.admin-user-form-section:last-child {
  margin-bottom: 0;
}

.admin-user-form-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-secondary);
}

.admin-user-form-section-title svg {
  color: var(--color-primary);
}

.admin-user-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-primary);
}

/* -----------------------------------------------------------------------------
   Admin User ロール選択
----------------------------------------------------------------------------- */
.admin-user-role-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-user-role-option {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-user-role-option:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary-light);
}

.admin-user-role-option-selected {
  background: rgba(59, 130, 246, 0.05);
  border-color: var(--color-primary);
}

.admin-user-role-option input[type="radio"] {
  margin-top: 2px;
}

.admin-user-role-option-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-user-role-option-label {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.admin-user-role-option-desc {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Admin User チェックボックス
----------------------------------------------------------------------------- */
.admin-user-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.admin-user-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* -----------------------------------------------------------------------------
   Admin User パスワード入力
----------------------------------------------------------------------------- */
.admin-input-wrapper {
  position: relative;
}

.admin-input-toggle {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--spacing-xs);
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
}

.admin-input-toggle:hover {
  color: var(--text-secondary);
}

.admin-input-error {
  border-color: #ef4444;
}

.admin-input-error-text {
  font-size: var(--font-xs);
  color: #ef4444;
  margin-top: var(--spacing-xs);
}

/* -----------------------------------------------------------------------------
   Admin User 作成成功
----------------------------------------------------------------------------- */
.admin-user-form-success {
  text-align: center;
  padding: var(--spacing-xxxl);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}

.admin-user-success-icon {
  font-size: 64px;
  color: #22c55e;
  margin-bottom: var(--spacing-xl);
}

.admin-user-form-success h2 {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-xl);
  color: var(--text-primary);
}

.admin-user-success-info {
  background: var(--bg-tertiary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-xl);
  text-align: left;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.admin-user-success-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-secondary);
}

.admin-user-success-row:last-child {
  border-bottom: none;
}

.admin-user-success-label {
  color: var(--text-secondary);
}

.admin-user-success-value {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.admin-user-password-section {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.admin-user-password-section h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: #ca8a04;
  margin: 0 0 var(--spacing-lg) 0;
}

.admin-user-password-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--bg-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.admin-user-password-box code {
  flex: 1 1;
  font-family: monospace;
  font-size: var(--font-md);
  color: var(--text-primary);
  word-break: break-all;
}

.admin-user-copy-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  font-size: var(--font-xs);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.admin-user-copy-btn:hover {
  background: var(--color-primary-dark);
}

.admin-user-password-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-xs);
  color: #ca8a04;
  margin: 0;
  text-align: left;
}

.admin-user-success-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Admin User パスワードモーダル
----------------------------------------------------------------------------- */
.admin-user-password-result {
  text-align: center;
}

.admin-user-password-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: #22c55e;
  margin-bottom: var(--spacing-md);
}

.admin-user-password-display {
  background: var(--bg-tertiary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.admin-user-password-display code {
  font-family: monospace;
  font-size: var(--font-lg);
  color: var(--text-primary);
  word-break: break-all;
}

/* -----------------------------------------------------------------------------
   Admin User 削除モーダル
----------------------------------------------------------------------------- */
.admin-user-delete-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  color: #ef4444;
  margin-bottom: var(--spacing-lg);
}

.admin-user-delete-info {
  background: var(--bg-tertiary);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   レスポンシブ対応
----------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .admin-user-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .admin-user-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-user-stats {
    grid-template-columns: 1fr;
  }
  
  .admin-user-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .admin-user-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .admin-user-table-container {
    overflow-x: auto;
  }
  
  .admin-user-table {
    min-width: 700px;
  }
  
  .admin-user-search-form {
    flex-direction: column;
  }
  
  .admin-user-filter-row {
    flex-direction: column;
  }
  
  .admin-user-filter-select {
    width: 100%;
  }
  
  .admin-user-action-grid {
    flex-direction: column;
  }
  
  .admin-user-action-btn {
    width: 100%;
    justify-content: center;
  }
  
  .admin-user-form-actions {
    flex-direction: column;
  }
  
  .admin-user-form-actions .admin-btn {
    width: 100%;
  }
  
  .admin-user-success-actions {
    flex-direction: column;
  }
  
  .admin-user-success-actions .admin-btn {
    width: 100%;
  }
}

/* =============================================================================
   Admin Settings Styles - Phase 5-3
   admin.css に追加するスタイル
   プレフィックス: admin-settings-
============================================================================= */

/* -----------------------------------------------------------------------------
   Settings Container
----------------------------------------------------------------------------- */
.admin-settings-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.admin-settings-header {
  margin-bottom: var(--spacing-xl);
}

.admin-settings-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
  margin-bottom: var(--spacing-md);
}

.admin-settings-back-btn:hover {
  color: var(--color-primary);
}

.admin-settings-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.admin-settings-title-icon {
  color: var(--color-primary);
}

.admin-settings-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.admin-settings-subtitle {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  margin: var(--spacing-sm) 0 0 0;
}

/* -----------------------------------------------------------------------------
   Settings Sections
----------------------------------------------------------------------------- */
.admin-settings-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxl);
}

.admin-settings-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
}

.admin-settings-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-secondary);
}

.admin-settings-section-icon {
  color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   Settings Cards
----------------------------------------------------------------------------- */
.admin-settings-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-settings-info-card {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.admin-settings-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-secondary);
}

.admin-settings-info-row:last-child {
  border-bottom: none;
}

.admin-settings-info-label {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.admin-settings-info-value {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.admin-settings-role-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

/* -----------------------------------------------------------------------------
   Action Cards
----------------------------------------------------------------------------- */
.admin-settings-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.admin-settings-action-card:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary-light);
  transform: translateY(-1px);
}

.admin-settings-action-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.admin-settings-action-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
}

.admin-settings-icon-shield {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.admin-settings-action-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-settings-action-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.admin-settings-action-desc {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.admin-settings-action-arrow {
  color: var(--text-tertiary);
}

.admin-settings-badge-enabled {
  display: inline-block;
  padding: 2px var(--spacing-sm);
  background: #22c55e;
  color: white;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

/* -----------------------------------------------------------------------------
   Form Container
----------------------------------------------------------------------------- */
.admin-settings-form-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xxl);
}

.admin-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.admin-settings-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-secondary);
  margin-top: var(--spacing-lg);
}

/* -----------------------------------------------------------------------------
   Password Strength
----------------------------------------------------------------------------- */
.admin-settings-password-strength {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

.admin-settings-strength-title {
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.admin-settings-strength-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--spacing-xs);
  gap: var(--spacing-xs);
}

.admin-settings-strength-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-settings-strength-list li svg {
  color: var(--text-tertiary);
}

.admin-settings-strength-list li.met {
  color: #22c55e;
}

.admin-settings-strength-list li.met svg {
  color: #22c55e;
}

.admin-settings-strength-recommended {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-secondary);
}

.admin-settings-strength-recommended span {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-xs);
  color: #ca8a04;
}

.admin-settings-strength-recommended span svg {
  color: #ca8a04;
}

.admin-settings-strength-recommended span.met {
  color: #22c55e;
}

.admin-settings-strength-recommended span.met svg {
  color: #22c55e;
}

/* -----------------------------------------------------------------------------
   2FA Setup
----------------------------------------------------------------------------- */
.admin-settings-2fa-setup,
.admin-settings-2fa-verify,
.admin-settings-2fa-manage,
.admin-settings-2fa-disable {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.admin-settings-2fa-intro {
  text-align: center;
  padding: var(--spacing-xl);
}

.admin-settings-2fa-intro-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-radius: 50%;
  font-size: 24px;
}

.admin-settings-2fa-intro h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-lg);
  color: var(--text-primary);
}

.admin-settings-2fa-intro p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.admin-settings-2fa-steps {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
}

.admin-settings-2fa-steps h4 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.admin-settings-2fa-steps ol {
  margin: 0;
  padding-left: var(--spacing-xl);
}

.admin-settings-2fa-steps li {
  margin-bottom: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

.admin-settings-2fa-steps li:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   QR Code Section
----------------------------------------------------------------------------- */
.admin-settings-qr-section {
  text-align: center;
}

.admin-settings-qr-section h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-md);
  color: var(--text-primary);
}

.admin-settings-qr-instruction {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  margin: 0 0 var(--spacing-lg) 0;
}

.admin-settings-qr-container {
  display: inline-block;
  padding: var(--spacing-md);
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.admin-settings-qr-image {
  display: block;
  max-width: 200px;
  height: auto;
}

.admin-settings-secret-section {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
}

.admin-settings-secret-label {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
}

.admin-settings-secret-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--bg-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
}

.admin-settings-secret-code {
  flex: 1 1;
  font-family: monospace;
  font-size: var(--font-sm);
  color: var(--text-primary);
  word-break: break-all;
}

.admin-settings-copy-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.admin-settings-copy-btn:hover {
  background: var(--color-primary-dark);
}

/* -----------------------------------------------------------------------------
   Verification Form
----------------------------------------------------------------------------- */
.admin-settings-verify-form {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-secondary);
}

.admin-settings-code-input {
  text-align: center;
  font-size: var(--font-xl) !important;
  font-family: monospace;
  letter-spacing: 0.5em;
  max-width: 200px;
  margin: 0 auto;
}

.admin-settings-code-hint {
  text-align: center;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-sm);
}

/* -----------------------------------------------------------------------------
   2FA Status (Enabled)
----------------------------------------------------------------------------- */
.admin-settings-2fa-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-md);
}

.admin-settings-2fa-status-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
}

.admin-settings-2fa-status-icon.enabled {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.admin-settings-2fa-status-text h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-md);
  color: var(--text-primary);
}

.admin-settings-2fa-status-text p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-settings-2fa-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: rgba(234, 179, 8, 0.05);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: var(--radius-sm);
  color: #ca8a04;
}

.admin-settings-2fa-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-settings-2fa-warning p {
  margin: 0;
  font-size: var(--font-sm);
}

/* -----------------------------------------------------------------------------
   2FA Disable
----------------------------------------------------------------------------- */
.admin-settings-2fa-disable-warning {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  color: #ef4444;
}

.admin-settings-2fa-disable-warning svg {
  font-size: 32px;
  margin-bottom: var(--spacing-md);
}

.admin-settings-2fa-disable-warning h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-md);
  color: var(--text-primary);
}

.admin-settings-2fa-disable-warning p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-settings-disable-form {
  margin-top: var(--spacing-xl);
}

/* -----------------------------------------------------------------------------
   Read-only Info
----------------------------------------------------------------------------- */
.admin-settings-readonly-info {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.admin-label-readonly {
  color: var(--text-tertiary) !important;
}

.admin-settings-readonly-value {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.admin-settings-readonly-note {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-style: italic;
}

/* -----------------------------------------------------------------------------
   Danger Button
----------------------------------------------------------------------------- */
.admin-btn-danger {
  background-color: #ef4444;
  color: white;
  border-color: #ef4444;
}

.admin-btn-danger:hover:not(:disabled) {
  background-color: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* -----------------------------------------------------------------------------
   Warning Message
----------------------------------------------------------------------------- */
.admin-message-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: var(--radius-sm);
  color: #ca8a04;
}

.admin-message-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-message-warning p {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Success Message
----------------------------------------------------------------------------- */
.admin-message-success {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-sm);
  color: #22c55e;
  margin-bottom: var(--spacing-lg);
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-settings-container {
    padding: var(--spacing-md);
  }

  .admin-settings-form-container {
    padding: var(--spacing-lg);
  }

  .admin-settings-form-actions {
    flex-direction: column;
  }

  .admin-settings-form-actions .admin-btn {
    width: 100%;
  }

  .admin-settings-strength-list {
    grid-template-columns: 1fr;
  }

  .admin-settings-action-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .admin-settings-action-arrow {
    display: none;
  }

  .admin-settings-2fa-status {
    flex-direction: column;
    text-align: center;
  }
}

/* =============================================================================
 * frontend/src/styles/admin.css に追加するスタイル
 * メッセージ削除ボタン、確認モーダル用
 * ============================================================================= */

/* --------------------------------------------------------------------------
 * メッセージ削除ボタン
 * -------------------------------------------------------------------------- */
.admin-message-delete-btn {
  background: none;
  border: none;
  color: #6c757d;
  color: var(--admin-text-muted, #6c757d);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0;
  font-size: 0.8rem;
}

.admin-message-item:hover .admin-message-delete-btn {
  opacity: 1;
}

.admin-message-delete-btn:hover {
  color: #dc3545;
  color: var(--admin-danger, #dc3545);
  background: rgba(220, 53, 69, 0.1);
}

/* 削除済みメッセージ */
.admin-message-deleted {
  opacity: 0.6;
}

.admin-message-deleted .admin-message-body {
  background: #f8f9fa;
  background: var(--admin-bg-muted, #f8f9fa);
  border-left: 3px solid #6c757d;
  border-left: 3px solid var(--admin-text-muted, #6c757d);
}

.admin-message-deleted-text {
  color: #6c757d;
  color: var(--admin-text-muted, #6c757d);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-message-deleted-text svg {
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
 * 確認モーダル
 * -------------------------------------------------------------------------- */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.admin-modal {
  background: #ffffff;
  background: var(--admin-bg, #ffffff);
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.admin-modal-danger {
  border-top: 4px solid #dc3545;
  border-top: 4px solid var(--admin-danger, #dc3545);
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
  border-bottom: 1px solid var(--admin-border, #e9ecef);
}

.admin-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #6c757d;
  color: var(--admin-text-muted, #6c757d);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.admin-modal-close:hover {
  background: #f8f9fa;
  background: var(--admin-bg-muted, #f8f9fa);
  color: #212529;
  color: var(--admin-text, #212529);
}

.admin-modal-body {
  padding: 20px;
  overflow-y: auto;
}

.admin-modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  margin-bottom: 16px;
  color: #856404;
}

.admin-modal-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-modal-warning-danger {
  background: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3);
  color: #dc3545;
  color: var(--admin-danger, #dc3545);
}

.admin-modal-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(13, 110, 253, 0.1);
  border: 1px solid rgba(13, 110, 253, 0.3);
  border-radius: 8px;
  margin-bottom: 16px;
  color: #0d6efd;
}

.admin-modal-info svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.admin-modal-preview {
  margin-top: 8px;
}

.admin-modal-preview label {
  display: block;
  font-size: 0.85rem;
  color: #6c757d;
  color: var(--admin-text-muted, #6c757d);
  margin-bottom: 8px;
}

.admin-modal-preview-content {
  background: #f8f9fa;
  background: var(--admin-bg-muted, #f8f9fa);
  border: 1px solid #e9ecef;
  border: 1px solid var(--admin-border, #e9ecef);
  border-radius: 8px;
  padding: 12px 16px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.5;
}

.admin-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e9ecef;
  border-top: 1px solid var(--admin-border, #e9ecef);
  background: #f8f9fa;
  background: var(--admin-bg-muted, #f8f9fa);
}

/* ボタンスタイル追加 */
.admin-btn-danger {
  background: #dc3545;
  background: var(--admin-danger, #dc3545);
  color: #ffffff;
  border: none;
}

.admin-btn-danger:hover {
  background: #c82333;
}

.admin-btn-warning {
  background: #ffc107;
  color: #212529;
  border: none;
}

.admin-btn-warning:hover {
  background: #e0a800;
}

/* メッセージヘッダーのmetaエリア調整 */
.admin-message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* エラーメッセージの閉じるボタン */
.admin-message-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  opacity: 0.7;
}

.admin-message-close:hover {
  opacity: 1;
}

.communication-page {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Page Header */
.communication-page .page-header {
  margin-bottom: 30px;
}

.communication-page .page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.communication-page .page-header h1 svg {
  color: #667eea;
}

.communication-page .page-description {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

/* Tabs */
.comm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 24px;
}

.comm-tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
}

.comm-tab:hover {
  color: #667eea;
  background: #f9fafb;
}

.comm-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.comm-tab svg {
  font-size: 16px;
}

/* Content Area */
.comm-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

/* ================== Compose Section ================== */
.compose-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.compose-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.compose-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-card {
  background: #f9fafb;
  border-radius: 8px;
  padding: 20px;
}

.filter-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
}

.filter-card h3 svg {
  color: #667eea;
}

.filter-group {
  margin-bottom: 16px;
}

.filter-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.filter-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}

.filter-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.recipient-count {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  margin-top: 8px;
}

.recipient-count svg {
  font-size: 20px;
  opacity: 0.9;
}

.recipient-count strong {
  font-size: 20px;
}

/* Compose Main */
.compose-main {
  flex: 1 1;
}

.compose-card {
  background: #fff;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 200px;
  line-height: 1.6;
}

.form-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

.form-hint code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 11px;
}

.compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background: #e5e7eb;
}

.btn-danger {
  background: #fee2e2;
  color: #dc2626;
}

.btn-danger:hover {
  background: #fecaca;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Alert Messages */
.alert {
  padding: 16px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.alert-success {
  background: #d1fae5;
  color: #065f46;
}

.alert-error {
  background: #fee2e2;
  color: #dc2626;
}

/* ================== Templates Section ================== */
.templates-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.templates-section .section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.template-card {
  background: #f9fafb;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.template-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.template-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.template-category {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.template-category.general {
  background: #e0e7ff;
  color: #3730a3;
}

.template-category.marketing {
  background: #fef3c7;
  color: #92400e;
}

.template-category.notification {
  background: #d1fae5;
  color: #065f46;
}

.template-category.support {
  background: #fee2e2;
  color: #991b1b;
}

.template-subject {
  font-size: 13px;
  color: #374151;
  margin-bottom: 8px;
}

.template-body {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.template-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

/* ================== History Section ================== */
.history-section h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 20px 0;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
}

.history-table th,
.history-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.history-table th {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f9fafb;
}

.history-table td {
  font-size: 14px;
  color: #374151;
}

.history-table .subject-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #e0e7ff;
  color: #3730a3;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.completed {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.failed {
  background: #fee2e2;
  color: #dc2626;
}

.status-badge.processing {
  background: #fef3c7;
  color: #92400e;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.pagination button {
  padding: 8px 12px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination button:hover:not(:disabled) {
  background: #e5e7eb;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  font-size: 14px;
  color: #6b7280;
}

/* ================== Empty State ================== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-state svg {
  font-size: 48px;
  color: #d1d5db;
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 15px;
  margin-bottom: 20px;
}

/* Loading Spinner */
.loading-spinner {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
  color: #667eea;
}

/* ================== Modal ================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-content.preview-modal {
  max-width: 700px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f3f4f6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #e5e7eb;
  color: #1a1a2e;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

/* Preview Modal */
.preview-subject {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.preview-subject strong {
  color: #374151;
}

.preview-body {
  margin-bottom: 16px;
}

.preview-body strong {
  display: block;
  margin-bottom: 8px;
  color: #374151;
}

.preview-content {
  background: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  line-height: 1.6;
}

.preview-content p {
  margin: 0 0 8px 0;
}

.preview-content p:last-child {
  margin-bottom: 0;
}

.preview-note {
  background: #fef3c7;
  color: #92400e;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ================== Responsive ================== */
@media (max-width: 900px) {
  .compose-layout {
    grid-template-columns: 1fr;
  }
  
  .compose-sidebar {
    order: 2;
  }
  
  .compose-main {
    order: 1;
  }
}

@media (max-width: 768px) {
  .communication-page {
    padding: 16px;
  }
  
  .comm-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .comm-tab {
    white-space: nowrap;
  }
  
  .templates-grid {
    grid-template-columns: 1fr;
  }
  
  .history-table {
    font-size: 13px;
  }
  
  .history-table th,
  .history-table td {
    padding: 10px 12px;
  }
}

/* =============================================================================
   admin.css - Phase 6-3: Communication追加スタイル
   プレフィックス: admin-comm-
============================================================================= */

/* -----------------------------------------------------------------------------
   Communication コンテナ
----------------------------------------------------------------------------- */
.admin-comm-container {
  padding: var(--spacing-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.admin-comm-header {
  margin-bottom: var(--spacing-xl);
}

.admin-comm-title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.admin-comm-title-icon {
  color: var(--color-primary);
}

.admin-comm-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   タブナビゲーション
----------------------------------------------------------------------------- */
.admin-comm-tabs {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 2px solid var(--border-primary);
  margin-bottom: var(--spacing-lg);
}

.admin-comm-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  position: relative;
}

.admin-comm-tab:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.admin-comm-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.admin-comm-tab-badge {
  background: var(--color-primary);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Compose レイアウト
----------------------------------------------------------------------------- */
.admin-comm-compose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-comm-compose-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: var(--spacing-xl);
  gap: var(--spacing-xl);
}

@media (max-width: 1024px) {
  .admin-comm-compose-layout {
    grid-template-columns: 1fr;
  }
}

/* サイドバー */
.admin-comm-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-comm-new-btn {
  width: 100%;
  margin-bottom: var(--spacing-sm);
}

.admin-comm-filter-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.admin-comm-filter-card h3 {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-comm-type-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

.admin-comm-type-btn {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-comm-type-btn:hover {
  border-color: var(--color-primary-light);
  color: var(--text-primary);
}

.admin-comm-type-btn.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.admin-comm-filter-group {
  margin-bottom: var(--spacing-md);
}

.admin-comm-filter-group:last-child {
  margin-bottom: 0;
}

.admin-comm-filter-group label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.admin-comm-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.admin-comm-checkbox-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.admin-comm-checkbox-wrapper span {
  font-size: var(--font-sm);
  color: var(--text-primary);
}

/* 受信者数表示 */
.admin-comm-recipient-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

/* メイン領域 */
.admin-comm-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-comm-draft-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  color: var(--color-warning);
}

.admin-comm-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-comm-form-group label {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.admin-comm-input,
.admin-comm-select {
  padding: var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color var(--transition-fast);
}

.admin-comm-input:focus,
.admin-comm-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-comm-textarea {
  padding: var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
  resize: vertical;
  min-height: 200px;
  line-height: 1.6;
}

.admin-comm-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-comm-textarea-small {
  padding: var(--spacing-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
  resize: vertical;
  min-height: 60px;
}

.admin-comm-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-primary);
}

/* -----------------------------------------------------------------------------
   Drafts セクション
----------------------------------------------------------------------------- */
.admin-comm-drafts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-comm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.admin-comm-section-header h2 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.admin-comm-section-actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.admin-comm-drafts-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-comm-draft-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  gap: var(--spacing-lg);
}

.admin-comm-draft-info {
  flex: 1 1;
  min-width: 0;
}

.admin-comm-draft-info h4 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-comm-draft-preview {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.4;
}

.admin-comm-draft-meta {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.admin-comm-draft-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Templates セクション
----------------------------------------------------------------------------- */
.admin-comm-templates {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-comm-templates-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-comm-template-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  gap: var(--spacing-lg);
}

.admin-comm-template-info {
  flex: 1 1;
  min-width: 0;
}

.admin-comm-template-info h4 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.admin-comm-template-subject {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
}

.admin-comm-template-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* カテゴリバッジ */
.admin-comm-category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

.admin-comm-category-general {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

.admin-comm-category-marketing {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.admin-comm-category-notification {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.admin-comm-category-support {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

/* -----------------------------------------------------------------------------
   History セクション
----------------------------------------------------------------------------- */
.admin-comm-history {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.admin-comm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-comm-table th,
.admin-comm-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
}

.admin-comm-table th {
  background: var(--bg-secondary);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-comm-table td {
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.admin-comm-table tbody tr:hover {
  background: var(--bg-hover);
}

.admin-comm-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-comm-subject-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-comm-badge {
  display: inline-block;
  padding: 2px 10px;
  background: var(--bg-tertiary);
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-comm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 10px;
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-comm-status-completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.admin-comm-status-failed {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.admin-comm-status-partial {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.admin-comm-status-processing {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* -----------------------------------------------------------------------------
   プレビューモーダル
----------------------------------------------------------------------------- */
.admin-comm-preview-modal {
  max-width: 700px;
}

.admin-comm-preview-subject {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.admin-comm-preview-body {
  padding: var(--spacing-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.admin-comm-preview-content {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  max-height: 300px;
  overflow-y: auto;
}

.admin-comm-preview-content p {
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.6;
}

.admin-comm-preview-note {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  color: var(--color-warning);
}

/* -----------------------------------------------------------------------------
   レスポンシブ調整
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-comm-tabs {
    flex-wrap: wrap;
  }
  
  .admin-comm-tab {
    flex: 1 1;
    min-width: 80px;
    justify-content: center;
  }
  
  .admin-comm-section-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-comm-section-actions {
    justify-content: flex-end;
  }
  
  .admin-comm-table {
    display: block;
    overflow-x: auto;
  }
  
  .admin-comm-actions {
    flex-direction: column;
  }
  
  .admin-comm-actions .admin-btn {
    width: 100%;
  }
}

/* =============================================================================
   Phase 7-1: Admin Dashboard Enhancement Styles
   admin.cssに追加してください
   ============================================================================= */

/* -----------------------------------------------------------------------------
   リアルタイム統計バー
   ----------------------------------------------------------------------------- */
.admin-realtime-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid #475569;
}

.admin-realtime-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex: 1 1;
  min-width: 150px;
}

.admin-realtime-icon {
  color: #60a5fa;
  font-size: 1rem;
}

.admin-realtime-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
}

.admin-realtime-label {
  font-size: 0.75rem;
  color: #94a3b8;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   ダッシュボードタブ
   ----------------------------------------------------------------------------- */
.admin-dashboard-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
  background: #1e293b;
  border-radius: 8px;
  width: -webkit-fit-content;
  width: fit-content;
}

.admin-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-tab-btn:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
}

.admin-tab-btn.active {
  color: #fff;
  background: #6366f1;
}

.admin-tab-btn svg {
  font-size: 0.875rem;
}

/* -----------------------------------------------------------------------------
   KPIカード
   ----------------------------------------------------------------------------- */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-kpi-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #334155;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.admin-kpi-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.admin-kpi-icon {
  font-size: 1rem;
  color: #6366f1;
}

.admin-kpi-icon.admin-kpi-icon-warning {
  color: #f59e0b;
}

.admin-kpi-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-kpi-body {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.admin-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1;
}

.admin-kpi-change {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.admin-kpi-change svg {
  font-size: 0.75rem;
}

.admin-change-positive {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.admin-change-negative {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.admin-change-neutral {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}

.admin-kpi-footer {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

/* -----------------------------------------------------------------------------
   Analytics セクション
   ----------------------------------------------------------------------------- */
.admin-analytics-section {
  margin-top: 1rem;
}

.admin-analytics-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.admin-analytics-controls label {
  font-size: 0.875rem;
  color: #94a3b8;
}

.admin-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .admin-analytics-grid {
    grid-template-columns: 1fr;
  }
}

/* チャートコンテナ */
.admin-chart-container {
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.admin-empty-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #64748b;
  font-size: 0.875rem;
}

/* サブスクリプションサマリー */
.admin-subscription-summary {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #334155;
}

.admin-subscription-rate {
  text-align: center;
}

.admin-rate-label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.admin-rate-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #6366f1;
}

/* 人気銘柄リスト */
.admin-top-symbols-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-top-symbol-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  transition: background 0.2s ease;
}

.admin-top-symbol-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.admin-symbol-rank {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6366f1;
  min-width: 24px;
}

.admin-symbol-name {
  flex: 1 1;
  font-weight: 600;
  color: #e2e8f0;
}

.admin-symbol-count {
  font-size: 0.875rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   Revenue セクション
   ----------------------------------------------------------------------------- */
.admin-revenue-section {
  margin-top: 1rem;
}

.admin-revenue-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-revenue-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #334155;
}

.admin-revenue-card.admin-revenue-card-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
  border: none;
}

.admin-revenue-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
}

.admin-revenue-card-primary .admin-revenue-card-header {
  color: rgba(255, 255, 255, 0.8);
}

.admin-revenue-card-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 0.75rem;
}

.admin-revenue-card-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #94a3b8;
}

.admin-revenue-card-primary .admin-revenue-card-detail {
  color: rgba(255, 255, 255, 0.8);
}

.admin-revenue-change {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.admin-revenue-change.positive {
  color: #86efac;
}

.admin-revenue-change.negative {
  color: #fca5a5;
}

.admin-revenue-card-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #334155;
}

.admin-breakdown-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.admin-breakdown-item span:first-child {
  color: #64748b;
}

.admin-breakdown-item span:last-child {
  color: #e2e8f0;
  font-weight: 500;
}

/* 課金イベントリスト */
.admin-revenue-events {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.admin-event-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  padding: 0.375rem 0;
}

.admin-event-row span:first-child {
  color: #94a3b8;
}

.admin-event-value {
  font-weight: 600;
  color: #e2e8f0;
}

.admin-event-positive {
  color: #22c55e !important;
}

.admin-event-negative {
  color: #ef4444 !important;
}

.admin-event-total {
  border-top: 1px solid #334155;
  padding-top: 0.75rem;
  margin-top: 0.375rem;
}

.admin-event-total span:first-child {
  font-weight: 600;
  color: #e2e8f0;
}

/* フル幅カード */
.admin-dashboard-card-full {
  grid-column: 1 / -1;
}

/* -----------------------------------------------------------------------------
   レスポンシブ調整
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-realtime-bar {
    flex-direction: column;
    gap: 0.75rem;
  }

  .admin-realtime-item {
    min-width: 100%;
  }

  .admin-dashboard-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .admin-tab-btn {
    flex: 1 1;
    justify-content: center;
    white-space: nowrap;
  }

  .admin-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-kpi-value {
    font-size: 1.5rem;
  }

  .admin-revenue-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   Rechartsツールチップカスタマイズ
   ----------------------------------------------------------------------------- */
.recharts-tooltip-wrapper {
  outline: none;
}

.recharts-default-tooltip {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
}

.recharts-tooltip-label {
  color: #e2e8f0 !important;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.recharts-tooltip-item {
  color: #94a3b8 !important;
}

.recharts-tooltip-item-value {
  color: #f1f5f9 !important;
  font-weight: 600;
}

/* =============================================================================
   Phase 7-1 Stripe版: 追加スタイル
   admin.cssに追記してください
   ============================================================================= */

/* Stripe関連アイコン色 */
.admin-icon-success {
  color: #22c55e;
  margin-right: 0.5rem;
}

.admin-icon-danger {
  color: #ef4444;
  margin-right: 0.5rem;
}

.admin-icon-warning {
  color: #f59e0b;
  margin-right: 0.5rem;
}

.admin-icon-info {
  color: #3b82f6;
  margin-right: 0.5rem;
}

/* Revenue カード追加スタイル */
.admin-revenue-card-value .admin-revenue-card-unit {
  font-size: 0.875rem;
  font-weight: 400;
  color: #94a3b8;
  margin-left: 0.5rem;
}

.admin-revenue-refund {
  color: #f59e0b;
}

.admin-text-danger {
  color: #ef4444 !important;
}

/* Stripe警告メッセージ */
.admin-message-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

/* =============================================================================
   Phase 7-2: Security Monitoring Styles
   プレフィックス: admin-log-sec-
============================================================================= */

/* -----------------------------------------------------------------------------
   Security Dashboard Tab
----------------------------------------------------------------------------- */
.admin-log-sec-dashboard {
  padding: var(--spacing-lg);
}

.admin-log-sec-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.admin-log-sec-metric-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.admin-log-sec-metric-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

.admin-log-sec-metric-card-warning {
  border-left: 3px solid var(--color-warning);
}

.admin-log-sec-metric-card-danger {
  border-left: 3px solid var(--color-danger);
}

.admin-log-sec-metric-card-success {
  border-left: 3px solid var(--color-success);
}

.admin-log-sec-metric-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-log-sec-metric-header svg {
  font-size: var(--font-md);
}

.admin-log-sec-metric-value {
  font-size: var(--font-xxl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.admin-log-sec-metric-value-warning {
  color: var(--color-warning);
}

.admin-log-sec-metric-value-danger {
  color: var(--color-danger);
}

/* -----------------------------------------------------------------------------
   Suspicious IPs Section
----------------------------------------------------------------------------- */
.admin-log-sec-suspicious-section {
  margin-top: var(--spacing-xl);
}

.admin-log-sec-section-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-log-sec-section-title svg {
  color: var(--color-warning);
}

.admin-log-sec-ip-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-log-sec-ip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-lg);
}

.admin-log-sec-ip-item-warning {
  border-left: 3px solid var(--color-warning);
  background-color: rgba(245, 158, 11, 0.05);
}

.admin-log-sec-ip-item-danger {
  border-left: 3px solid var(--color-danger);
  background-color: rgba(239, 68, 68, 0.05);
}

.admin-log-sec-ip-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.admin-log-sec-ip-address {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.admin-log-sec-ip-count {
  font-size: var(--font-sm);
  color: var(--color-warning);
  font-weight: var(--font-medium);
}

.admin-log-sec-ip-count-danger {
  color: var(--color-danger);
}

.admin-log-sec-ip-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* -----------------------------------------------------------------------------
   Block IP Modal / Form
----------------------------------------------------------------------------- */
.admin-log-sec-block-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-log-sec-block-modal-content {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
}

.admin-log-sec-block-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.admin-log-sec-block-modal-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-log-sec-block-modal-title svg {
  color: var(--color-danger);
}

.admin-log-sec-block-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-log-sec-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-log-sec-form-label {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.admin-log-sec-form-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.admin-log-sec-form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-log-sec-form-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.admin-log-sec-form-checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-log-sec-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* -----------------------------------------------------------------------------
   Blocked IPs List
----------------------------------------------------------------------------- */
.admin-log-sec-blocked-list {
  margin-top: var(--spacing-xl);
}

.admin-log-sec-blocked-table-container {
  overflow-x: auto;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}

.admin-log-sec-blocked-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-log-sec-blocked-table th {
  background-color: var(--bg-tertiary);
  padding: var(--spacing-md);
  text-align: left;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.admin-log-sec-blocked-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.admin-log-sec-blocked-table tbody tr:hover {
  background-color: var(--bg-hover);
}

.admin-log-sec-blocked-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-log-sec-blocked-status-active {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.admin-log-sec-blocked-status-expired {
  background-color: rgba(107, 114, 128, 0.1);
  color: var(--text-secondary);
}

.admin-log-sec-blocked-status-permanent {
  background-color: rgba(139, 92, 246, 0.1);
  color: var(--color-purple);
}

/* -----------------------------------------------------------------------------
   Security Alerts Section
----------------------------------------------------------------------------- */
.admin-log-sec-alerts-section {
  margin-top: var(--spacing-xl);
}

.admin-log-sec-alert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.admin-log-sec-alert-item-unacknowledged {
  border-left: 3px solid var(--color-warning);
  background-color: rgba(245, 158, 11, 0.03);
}

.admin-log-sec-alert-item-critical {
  border-left: 3px solid var(--color-danger);
  background-color: rgba(239, 68, 68, 0.03);
}

.admin-log-sec-alert-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-log-sec-alert-icon-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.admin-log-sec-alert-icon-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.admin-log-sec-alert-icon-critical {
  background-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

.admin-log-sec-alert-content {
  flex: 1 1;
  min-width: 0;
}

.admin-log-sec-alert-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.admin-log-sec-alert-message {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.admin-log-sec-alert-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-log-sec-alert-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Security Chart
----------------------------------------------------------------------------- */
.admin-log-sec-chart-container {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.admin-log-sec-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.admin-log-sec-chart-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* -----------------------------------------------------------------------------
   Empty States
----------------------------------------------------------------------------- */
.admin-log-sec-empty {
  text-align: center;
  padding: var(--spacing-xxl);
  color: var(--text-secondary);
}

.admin-log-sec-empty-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
  color: var(--color-success);
}

.admin-log-sec-empty h3 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.admin-log-sec-empty p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-log-sec-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .admin-log-sec-ip-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  
  .admin-log-sec-ip-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .admin-log-sec-alert-item {
    flex-direction: column;
  }
  
  .admin-log-sec-alert-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .admin-log-sec-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Section header with button */
.admin-log-sec-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.admin-log-sec-section-desc {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.admin-log-sec-metric-period {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

/* Events section */
.admin-log-sec-events-section {
  margin-top: var(--spacing-xl);
}

.admin-log-sec-events-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-log-sec-event-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-primary);
}

.admin-log-sec-event-warning {
  border-left-color: var(--color-warning);
}

.admin-log-sec-event-error {
  border-left-color: var(--color-danger);
}

.admin-log-sec-event-critical {
  border-left-color: #dc2626;
  background-color: rgba(220, 38, 38, 0.05);
}

.admin-log-sec-event-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.admin-log-sec-event-warning .admin-log-sec-event-icon {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.admin-log-sec-event-error .admin-log-sec-event-icon {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.admin-log-sec-event-critical .admin-log-sec-event-icon {
  background-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}

.admin-log-sec-event-content {
  flex: 1 1;
}

.admin-log-sec-event-type {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.admin-log-sec-event-meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-log-sec-event-meta span {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Actions section */
.admin-log-sec-actions {
  margin-top: var(--spacing-xl);
  display: flex;
  justify-content: flex-end;
}

/* IP icon */
.admin-log-sec-ip-icon {
  color: var(--text-tertiary);
  margin-right: var(--spacing-sm);
}

/* Modal close button */
.admin-log-sec-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--spacing-sm);
  font-size: var(--font-lg);
}

.admin-log-sec-modal-close:hover {
  color: var(--text-primary);
}

/* Textarea */
.admin-log-sec-form-input textarea,
textarea.admin-log-sec-form-input {
  resize: vertical;
  min-height: 80px;
}

/* =============================================================================
   Phase 7-3: Alert Settings & Login History Styles
   プレフィックス: admin-sec-
============================================================================= */

/* -----------------------------------------------------------------------------
   Alert Settings Section
----------------------------------------------------------------------------- */
.admin-sec-alert-settings {
  margin-top: var(--spacing-xl);
}

.admin-sec-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

.admin-sec-setting-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.admin-sec-setting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-secondary);
}

.admin-sec-setting-title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-sec-setting-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-sec-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
}

.admin-sec-setting-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-sec-setting-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.admin-sec-setting-input {
  width: 120px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.admin-sec-setting-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   Threat Response Section
----------------------------------------------------------------------------- */
.admin-sec-threat-response {
  margin-top: var(--spacing-xl);
}

.admin-sec-threat-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.admin-sec-threat-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.admin-sec-threat-btn-danger {
  background: var(--color-danger);
  color: white;
}

.admin-sec-threat-btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.admin-sec-threat-btn-warning {
  background: var(--color-warning);
  color: #1f2937;
}

.admin-sec-threat-btn-warning:hover {
  background: #d97706;
  transform: translateY(-1px);
}

.admin-sec-response-log {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-sec-response-log-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-secondary);
}

.admin-sec-response-log-item:last-child {
  border-bottom: none;
}

.admin-sec-response-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-sec-response-icon-suspend {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.admin-sec-response-icon-logout {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.admin-sec-response-icon-block {
  background: rgba(139, 92, 246, 0.1);
  color: var(--color-purple);
}

.admin-sec-response-content {
  flex: 1 1;
}

.admin-sec-response-action {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.admin-sec-response-meta {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

.admin-sec-response-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
}

.admin-sec-response-badge-auto {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
}

.admin-sec-response-badge-manual {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   Login History (User-facing)
----------------------------------------------------------------------------- */
.admin-sec-login-history {
  margin-top: var(--spacing-xl);
}

.admin-sec-login-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-sec-login-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

.admin-sec-login-item-current {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.05);
}

.admin-sec-login-item-failed {
  border-color: var(--color-danger);
  background: rgba(239, 68, 68, 0.05);
}

.admin-sec-login-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.admin-sec-login-icon-desktop {
  color: var(--color-primary);
}

.admin-sec-login-icon-mobile {
  color: var(--color-success);
}

.admin-sec-login-icon-tablet {
  color: var(--color-warning);
}

.admin-sec-login-content {
  flex: 1 1;
}

.admin-sec-login-device {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-sec-login-current-badge {
  background: var(--color-success);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
}

.admin-sec-login-details {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.admin-sec-login-meta {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

.admin-sec-login-meta span {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.admin-sec-login-actions {
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Session Management
----------------------------------------------------------------------------- */
.admin-sec-session-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-sec-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

.admin-sec-session-current {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.05);
}

.admin-sec-terminate-btn {
  padding: var(--spacing-xs) var(--spacing-md);
  background: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-sec-terminate-btn:hover {
  background: var(--color-danger);
  color: white;
}

.admin-sec-terminate-all-btn {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-danger);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
}

.admin-sec-terminate-all-btn:hover {
  background: #dc2626;
}

/* -----------------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .admin-sec-settings-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-sec-threat-actions {
    flex-direction: column;
  }
  
  .admin-sec-login-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  
  .admin-sec-login-actions {
    width: 100%;
  }
  
  .admin-sec-login-actions button {
    width: 100%;
  }
}

/* frontend/src/styles/admin-aicontent.css */
/* Phase 8-4: AI Content Management Styles */
/* 命名規則: admin-aicontent-xxx */

/* ================================================================================
   Page Layout
   ================================================================================ */

.admin-aicontent-page {
  padding: 20px;
}

.admin-aicontent-page .admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.admin-aicontent-page .admin-page-header h1 {
  font-size: 1.5rem;
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* ================================================================================
   Stats Summary
   ================================================================================ */

.admin-aicontent-stats-summary {
  display: flex;
  gap: 20px;
}

.admin-aicontent-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  background: #f8f9fa;
  background: var(--admin-bg-secondary, #f8f9fa);
  border-radius: 8px;
}

.admin-aicontent-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4a6cf7;
  color: var(--admin-primary, #4a6cf7);
}

.admin-aicontent-stat-label {
  font-size: 0.75rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  text-transform: uppercase;
}

/* ================================================================================
   Tabs
   ================================================================================ */

.admin-aicontent-tabs {
  display: flex;
  gap: 5px;
  border-bottom: 2px solid #e0e0e0;
  border-bottom: 2px solid var(--admin-border, #e0e0e0);
  margin-bottom: 20px;
}

.admin-aicontent-tab {
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.admin-aicontent-tab:hover {
  color: #4a6cf7;
  color: var(--admin-primary, #4a6cf7);
  background: #f8f9fa;
  background: var(--admin-bg-secondary, #f8f9fa);
}

.admin-aicontent-tab.active {
  color: #4a6cf7;
  color: var(--admin-primary, #4a6cf7);
  border-bottom-color: #4a6cf7;
  border-bottom-color: var(--admin-primary, #4a6cf7);
  font-weight: 600;
}

/* ================================================================================
   Filters
   ================================================================================ */

.admin-aicontent-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-aicontent-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-aicontent-filter-group label {
  font-size: 0.85rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-search {
  flex: 1 1;
  min-width: 200px;
  max-width: 400px;
  position: relative;
}

.admin-aicontent-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-search input {
  padding-left: 38px;
  width: 100%;
}

/* ================================================================================
   Form Elements
   ================================================================================ */

.admin-aicontent-input,
.admin-aicontent-select,
.admin-aicontent-textarea {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--admin-border, #e0e0e0);
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-aicontent-input:focus,
.admin-aicontent-select:focus,
.admin-aicontent-textarea:focus {
  outline: none;
  border-color: #4a6cf7;
  border-color: var(--admin-primary, #4a6cf7);
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
}

.admin-aicontent-textarea {
  resize: vertical;
  min-height: 100px;
}

/* ================================================================================
   Article Cards
   ================================================================================ */

.admin-aicontent-list {
  display: grid;
  grid-gap: 15px;
  gap: 15px;
}

.admin-aicontent-card {
  background: white;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--admin-border, #e0e0e0);
  border-radius: 10px;
  padding: 16px;
  transition: box-shadow 0.2s;
}

.admin-aicontent-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.admin-aicontent-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.admin-aicontent-card-date {
  font-size: 0.8rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
  line-height: 1.4;
}

.admin-aicontent-card-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.admin-aicontent-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-aicontent-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ================================================================================
   Status Badges
   ================================================================================ */

.admin-aicontent-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-aicontent-status-gray {
  background: #e9ecef;
  color: #495057;
}

.admin-aicontent-status-blue {
  background: #e7f1ff;
  color: #0d6efd;
}

.admin-aicontent-status-green {
  background: #d1e7dd;
  color: #198754;
}

.admin-aicontent-status-purple {
  background: #e2d9f3;
  color: #6f42c1;
}

.admin-aicontent-status-dark {
  background: #dee2e6;
  color: #343a40;
}

.admin-aicontent-status-red {
  background: #f8d7da;
  color: #dc3545;
}

/* ================================================================================
   Sentiment Badges
   ================================================================================ */

.admin-aicontent-sentiment-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.admin-aicontent-sentiment-green {
  background: #d1e7dd;
  color: #198754;
}

.admin-aicontent-sentiment-red {
  background: #f8d7da;
  color: #dc3545;
}

.admin-aicontent-sentiment-gray {
  background: #e9ecef;
  color: #495057;
}

.admin-aicontent-sentiment-light-green {
  background: #e8f5e9;
  color: #2e7d32;
}

.admin-aicontent-sentiment-light-red {
  background: #ffebee;
  color: #c62828;
}

/* ================================================================================
   Tags & Tickers
   ================================================================================ */

.admin-aicontent-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #e7f1ff;
  color: #0d6efd;
  border-radius: 4px;
  font-size: 0.75rem;
}

.admin-aicontent-ticker {
  display: inline-block;
  padding: 2px 8px;
  background: #fff3cd;
  color: #856404;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.admin-aicontent-tags-display {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ================================================================================
   Confidence
   ================================================================================ */

.admin-aicontent-confidence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

/* ================================================================================
   Detail View
   ================================================================================ */

.admin-aicontent-detail {
  background: white;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--admin-border, #e0e0e0);
}

.admin-aicontent-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--admin-border, #e0e0e0);
  flex-wrap: wrap;
  gap: 10px;
}

.admin-aicontent-detail-status {
  flex: 1 1;
  text-align: center;
}

.admin-aicontent-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-aicontent-detail-body {
  padding: 20px;
}

.admin-aicontent-form-section {
  margin-bottom: 30px;
}

.admin-aicontent-form-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--admin-border, #e0e0e0);
}

.admin-aicontent-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 15px;
}

.admin-aicontent-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-aicontent-form-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-display {
  margin: 0;
  padding: 8px 0;
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
}

/* ================================================================================
   Metadata
   ================================================================================ */

.admin-aicontent-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  background: #f8f9fa;
  background: var(--admin-bg-secondary, #f8f9fa);
  padding: 15px;
  border-radius: 8px;
}

.admin-aicontent-metadata div {
  font-size: 0.85rem;
}

.admin-aicontent-metadata strong {
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  margin-right: 5px;
}

/* ================================================================================
   Revisions
   ================================================================================ */

.admin-aicontent-revisions {
  max-height: 200px;
  overflow-y: auto;
}

.admin-aicontent-revision {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--admin-border, #e0e0e0);
  font-size: 0.85rem;
}

.admin-aicontent-revision:last-child {
  border-bottom: none;
}

.admin-aicontent-revision-date {
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  white-space: nowrap;
}

.admin-aicontent-revision-type {
  color: #4a6cf7;
  color: var(--admin-primary, #4a6cf7);
  font-weight: 500;
}

.admin-aicontent-revision-summary {
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
}

/* ================================================================================
   Generate Tab
   ================================================================================ */

.admin-aicontent-generate {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.admin-aicontent-generate-card {
  background: white;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--admin-border, #e0e0e0);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.admin-aicontent-generate-card h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
}

.admin-aicontent-generate-desc {
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  margin-bottom: 30px;
  line-height: 1.6;
}

.admin-aicontent-generate-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.admin-btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}

/* ================================================================================
   Results
   ================================================================================ */

.admin-aicontent-result {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  text-align: left;
}

.admin-aicontent-result.success {
  background: #d1e7dd;
  color: #0f5132;
}

.admin-aicontent-result.error {
  background: #f8d7da;
  color: #842029;
}

.admin-aicontent-result svg {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.admin-aicontent-result strong {
  display: block;
  margin-bottom: 5px;
}

.admin-aicontent-result p {
  margin: 5px 0;
}

/* ================================================================================
   Collection Test Results
   ================================================================================ */

.admin-aicontent-collection-result {
  margin-top: 30px;
  text-align: left;
}

.admin-aicontent-collection-result h3 {
  margin-bottom: 15px;
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
}

.admin-aicontent-collection-summary {
  background: #f8f9fa;
  background: var(--admin-bg-secondary, #f8f9fa);
  padding: 15px;
  border-radius: 8px;
}

.admin-aicontent-collection-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--admin-border, #e0e0e0);
}

.admin-aicontent-collection-item:last-child {
  border-bottom: none;
}

.admin-aicontent-collection-key {
  font-weight: 500;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-collection-value.ok {
  color: #198754;
}

.admin-aicontent-collection-value.error {
  color: #dc3545;
}

/* ================================================================================
   Settings Tab
   ================================================================================ */

.admin-aicontent-settings {
  background: white;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--admin-border, #e0e0e0);
  border-radius: 10px;
  padding: 20px;
}

.admin-aicontent-settings-section {
  margin-bottom: 30px;
}

.admin-aicontent-settings-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--admin-border, #e0e0e0);
}

.admin-aicontent-setting-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}

.admin-aicontent-setting-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.admin-aicontent-setting-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.admin-aicontent-setting-row input[type="text"],
.admin-aicontent-setting-row input[type="time"],
.admin-aicontent-setting-row input[type="number"],
.admin-aicontent-setting-row select {
  max-width: 300px;
}

.admin-aicontent-setting-desc {
  font-size: 0.8rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  margin-left: 26px;
}

.admin-aicontent-settings-actions {
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--admin-border, #e0e0e0);
}

/* ================================================================================
   Logs Tab
   ================================================================================ */

.admin-aicontent-logs-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--admin-border, #e0e0e0);
}

.admin-aicontent-logs-table th,
.admin-aicontent-logs-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--admin-border, #e0e0e0);
}

.admin-aicontent-logs-table th {
  background: #f8f9fa;
  background: var(--admin-bg-secondary, #f8f9fa);
  font-weight: 600;
  font-size: 0.85rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-logs-table td {
  font-size: 0.9rem;
}

.admin-aicontent-logs-table tr:last-child td {
  border-bottom: none;
}

.admin-aicontent-log-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-aicontent-log-status-success {
  background: #d1e7dd;
  color: #198754;
}

.admin-aicontent-log-status-failed {
  background: #f8d7da;
  color: #dc3545;
}

.admin-aicontent-log-status-partial {
  background: #fff3cd;
  color: #856404;
}

.admin-aicontent-log-error {
  color: #dc3545;
  font-size: 0.85rem;
}

/* ================================================================================
   Loading & Empty States
   ================================================================================ */

.admin-aicontent-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-loading p {
  margin-top: 15px;
}

.admin-aicontent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  background: #f8f9fa;
  background: var(--admin-bg-secondary, #f8f9fa);
  border-radius: 10px;
}

.admin-aicontent-empty svg {
  opacity: 0.5;
  margin-bottom: 15px;
}

.admin-aicontent-empty p {
  margin-bottom: 20px;
}

/* ================================================================================
   Preview Modal
   ================================================================================ */

.admin-aicontent-preview-modal {
  max-width: 800px;
}

.admin-aicontent-preview {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
}

.admin-aicontent-preview h1 {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.admin-aicontent-preview-ja {
  font-size: 1.1rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  margin-bottom: 15px;
}

.admin-aicontent-preview-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.admin-aicontent-preview-summary {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--admin-border, #e0e0e0);
}

.admin-aicontent-preview-section {
  margin-bottom: 25px;
}

.admin-aicontent-preview-section h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #4a6cf7;
  color: var(--admin-primary, #4a6cf7);
}

.admin-aicontent-preview-development {
  background: #f8f9fa;
  background: var(--admin-bg-secondary, #f8f9fa);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.admin-aicontent-preview-development h4 {
  margin: 0 0 10px 0;
}

.admin-aicontent-preview-dev-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.admin-aicontent-preview-dev-meta .impact-high {
  color: #dc3545;
  font-weight: 600;
}

.admin-aicontent-preview-dev-meta .impact-medium {
  color: #fd7e14;
  font-weight: 600;
}

.admin-aicontent-preview-dev-meta .impact-low {
  color: #198754;
  font-weight: 600;
}

/* ================================================================================
   Responsive
   ================================================================================ */

@media (max-width: 768px) {
  .admin-aicontent-stats-summary {
    flex-wrap: wrap;
  }
  
  .admin-aicontent-stat {
    flex: 1 1;
    min-width: 80px;
  }
  
  .admin-aicontent-tabs {
    overflow-x: auto;
  }
  
  .admin-aicontent-tab {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
  
  .admin-aicontent-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .admin-aicontent-search {
    max-width: none;
  }
  
  .admin-aicontent-detail-header {
    flex-direction: column;
  }
  
  .admin-aicontent-form-row {
    grid-template-columns: 1fr;
  }
  
  .admin-aicontent-generate-card {
    padding: 20px;
  }
  
  .admin-aicontent-generate-actions {
    flex-direction: column;
  }
  
  .admin-aicontent-logs-table {
    display: block;
    overflow-x: auto;
  }
}

/* ================================================================================
   Light Mode Support (if needed)
   ================================================================================ */

.light-mode .mj-container,
[data-theme="light"] .mj-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #1e293b;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.light-mode .mj-label,
[data-theme="light"] .mj-label {
  color: #64748b;
}

.light-mode .mj-title,
[data-theme="light"] .mj-title {
  color: #0f172a;
}

.light-mode .mj-summary,
[data-theme="light"] .mj-summary {
  color: #475569;
}

.light-mode .mj-development,
.light-mode .mj-stock-card,
[data-theme="light"] .mj-development,
[data-theme="light"] .mj-stock-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Admin Language Buttons */
.admin-language-buttons {
  display: flex;
  gap: 4px;
  margin-right: 8px;
}

.admin-lang-btn {
  padding: 6px 10px;
  border: 1px solid #4a5568;
  background: transparent;
  color: #a0aec0;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-lang-btn:hover {
  background: #4a5568;
  color: #fff;
}

.admin-lang-btn.active {
  background: #4a6cf7;
  border-color: #4a6cf7;
  color: #fff;
}

/* ================================================================================
   Modal Overlay Fix - 背景を不透明に
   ================================================================================ */

.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85) !important;  /* 背景を濃く */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

.admin-modal-content {
  background: #ffffff !important;  /* 白背景を確保 */
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.admin-modal-body {
  overflow-y: auto;
  flex: 1 1;
}

/* Summary - 全文表示を確保 */
.admin-aicontent-display {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: none;
  overflow: visible;
}

.admin-aicontent-preview-summary {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.admin-user-link {
  text-decoration: none;
  color: inherit;
}

.admin-user-link:hover .admin-user-name {
  color: var(--color-primary);
}

/* admin-user-info - 重複を統合 */
.admin-user-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.admin-user-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-secondary);
}

.admin-user-info-row:last-child {
  border-bottom: none;
}

.admin-user-info-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-user-info-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-user-info-icon {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}

.admin-user-info-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* admin-user-email - 重複を削除して1つに */
.admin-user-email {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-user-self-badge {
  margin-left: var(--spacing-sm);
  font-size: var(--font-xs);
  color: var(--color-primary);
  font-weight: var(--font-normal);
}

/* -----------------------------------------------------------------------------
   Admin User テーブル
----------------------------------------------------------------------------- */
.admin-user-table-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-user-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-user-table th {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-user-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-sm);
  text-align: left;  /* 左寄せ追加 */
}

.admin-user-row {
  transition: background-color var(--transition-fast);
}

.admin-user-row:hover {
  background-color: var(--bg-hover);
}

.admin-user-row-self {
  background-color: rgba(59, 130, 246, 0.05);
}

.admin-user-row-self:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.admin-user-id {
  font-family: monospace;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

/* 修正: 白背景で見えるように色を変更 */
.admin-user-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.admin-user-date {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.admin-user-2fa-enabled {
  color: #22c55e;
}

.admin-user-2fa-disabled {
  color: var(--text-tertiary);
}

/* =============================================================
   Phase 8-12: AI Provider Selection Styles（簡素化版）
   admin-aicontent.css に追記する内容
   ============================================================= */


/* AI Provider切り替えボタン群 */
.admin-aicontent-provider-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-aicontent-provider-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-aicontent-provider-button:hover:not(:disabled) {
  border-color: #6b7280;
  border-color: var(--provider-color, #6b7280);
  color: #6b7280;
  color: var(--provider-color, #6b7280);
  background: #f9fafb;
}

.admin-aicontent-provider-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* アクティブ状態 - Claude (オレンジ) */
.admin-aicontent-provider-button.active.claude {
  border-color: #d97706;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}

/* アクティブ状態 - Gemini (ブルー) */
.admin-aicontent-provider-button.active.gemini {
  border-color: #4285f4;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.25);
}

/* アクティブ状態 - ChatGPT (グリーン) */
.admin-aicontent-provider-button.active.chatgpt {
  border-color: #10a37f;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
  box-shadow: 0 2px 8px rgba(16, 163, 127, 0.25);
}

.admin-aicontent-provider-icon {
  font-size: 16px;
}

/* API Status Grid */
.admin-aicontent-api-status-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-aicontent-api-status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 14px;
}

.admin-aicontent-api-status-item svg:first-child {
  font-size: 16px;
  width: 20px;
}

.admin-aicontent-api-status-item span:first-of-type {
  flex: 1 1;
  color: #374151;
  font-weight: 500;
}

.admin-aicontent-api-status-ok {
  color: #10b981;
  font-size: 16px;
}

.admin-aicontent-api-status-error {
  color: #ef4444;
  font-size: 16px;
}

.admin-aicontent-api-status-hint {
  font-size: 12px;
  color: #9ca3af;
}

/* 生成ボタンのカラー動的設定 */
.admin-aicontent-generate-actions .admin-btn-primary {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-aicontent-generate-actions .admin-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* Preview Modal - AI Provider表示 */
.admin-aicontent-preview-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 20px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.admin-aicontent-preview-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .admin-aicontent-provider-switch {
    flex-direction: column;
  }
  
  .admin-aicontent-provider-button {
    width: 100%;
    justify-content: center;
  }
  
  .admin-aicontent-api-status-item {
    flex-wrap: wrap;
  }
}

/* ================================================================================
   Phase 8-10: CRM-CSM Newsletter Integration Styles
   ================================================================================
   Prefix: admin-crm-csm-
   このファイルの内容を admin.css または CommunicationPage.css に追加してください
   ================================================================================ */

/* ================================================================================
   Newsletter Tab Content
   ================================================================================ */

.admin-crm-csm-newsletter-content {
  padding: var(--spacing-lg);
}

.admin-crm-csm-newsletter-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-gap: var(--spacing-xxl);
  gap: var(--spacing-xxl);
}

@media (max-width: 1024px) {
  .admin-crm-csm-newsletter-layout {
    grid-template-columns: 1fr;
  }
}

/* ================================================================================
   Section Titles
   ================================================================================ */

.admin-crm-csm-section-title {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--border-primary);
}

.admin-crm-csm-section-title svg {
  color: var(--color-primary);
}

/* ================================================================================
   Article Cards
   ================================================================================ */

.admin-crm-csm-articles-section {
  min-width: 0; /* Prevent grid blowout */
}

.admin-crm-csm-article-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-crm-csm-article-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: all var(--transition-fast);
}

.admin-crm-csm-article-featured {
  border-left: 4px solid var(--color-primary);
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.admin-crm-csm-article-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.admin-crm-csm-article-date {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.admin-crm-csm-article-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.4;
}

.admin-crm-csm-article-summary {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ================================================================================
   Sentiment Badge
   ================================================================================ */

.admin-crm-csm-sentiment-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

.admin-crm-csm-sentiment-small {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 10px;
}

/* ================================================================================
   Ticker Tags
   ================================================================================ */

.admin-crm-csm-tickers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.admin-crm-csm-ticker-tag {
  display: inline-block;
  background-color: #dbeafe;
  background-color: var(--color-primary-light, #dbeafe);
  color: var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
}

/* ================================================================================
   Archive Articles
   ================================================================================ */

.admin-crm-csm-archive-articles {
  margin-top: var(--spacing-xxl);
}

.admin-crm-csm-article-archive {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  cursor: pointer;
  border: 1px solid var(--border-primary);
}

.admin-crm-csm-article-archive:hover {
  background-color: var(--bg-secondary);
  border-color: #93c5fd;
  border-color: var(--color-primary-light, #93c5fd);
}

.admin-crm-csm-article-selected {
  background-color: #dbeafe;
  background-color: var(--color-primary-light, #dbeafe);
  border-color: var(--color-primary);
}

.admin-crm-csm-article-checkbox {
  flex-shrink: 0;
  padding-top: 2px;
}

.admin-crm-csm-article-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.admin-crm-csm-article-content {
  flex: 1 1;
  min-width: 0;
}

.admin-crm-csm-archive-title {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: var(--spacing-xs) 0 0 0;
  line-height: 1.4;
}

/* ================================================================================
   Settings Section
   ================================================================================ */

.admin-crm-csm-settings-section {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border: 1px solid var(--border-primary);
  height: -webkit-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: var(--spacing-lg);
}

.admin-crm-csm-setting-group {
  margin-bottom: var(--spacing-xl);
}

.admin-crm-csm-setting-group label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.admin-crm-csm-select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.admin-crm-csm-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ================================================================================
   Language Buttons
   ================================================================================ */

.admin-crm-csm-language-buttons {
  display: flex;
  gap: var(--spacing-sm);
}

.admin-crm-csm-lang-btn {
  flex: 1 1;
  padding: var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.admin-crm-csm-lang-btn:hover {
  border-color: #93c5fd;
  border-color: var(--color-primary-light, #93c5fd);
}

.admin-crm-csm-lang-btn.active {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ================================================================================
   Recipient Count
   ================================================================================ */

.admin-crm-csm-recipient-count {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
}

.admin-crm-csm-recipient-count svg {
  color: var(--color-primary);
}

/* ================================================================================
   Action Buttons
   ================================================================================ */

.admin-crm-csm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xxl);
}

.admin-crm-csm-btn {
  width: 100%;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
}

.admin-crm-csm-btn svg {
  margin-right: var(--spacing-sm);
}

/* ================================================================================
   Recent History
   ================================================================================ */

.admin-crm-csm-recent-history {
  border-top: 1px solid var(--border-primary);
  padding-top: var(--spacing-lg);
}

.admin-crm-csm-recent-history h4 {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.admin-crm-csm-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-crm-csm-history-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-primary);
  font-size: var(--font-xs);
}

.admin-crm-csm-history-list li:last-child {
  border-bottom: none;
}

.admin-crm-csm-history-date {
  flex: 1 1;
  color: var(--text-secondary);
}

.admin-crm-csm-history-count {
  color: var(--text-tertiary);
}

.admin-crm-csm-history-status {
  font-size: var(--font-sm);
}

.admin-crm-csm-status-completed {
  color: #10b981;
  color: var(--color-success, #10b981);
}

.admin-crm-csm-status-partial {
  color: #f59e0b;
  color: var(--color-warning, #f59e0b);
}

.admin-crm-csm-no-history {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--spacing-md);
}

/* ================================================================================
   No Articles State
   ================================================================================ */

.admin-crm-csm-no-articles {
  text-align: center;
  padding: var(--spacing-xxl);
  color: var(--text-tertiary);
}

.admin-crm-csm-no-articles svg {
  font-size: var(--font-xxl);
  margin-bottom: var(--spacing-md);
  color: #f59e0b;
  color: var(--color-warning, #f59e0b);
}

.admin-crm-csm-no-articles p {
  margin: 0;
  font-size: var(--font-sm);
}

/* ================================================================================
   Preview Modal
   ================================================================================ */

.admin-crm-csm-preview-modal {
  max-width: 700px;
  width: 95%;
  max-height: 90vh;
}

.admin-crm-csm-preview-body {
  padding: 0;
  overflow: hidden;
}

.admin-crm-csm-preview-iframe {
  width: 100%;
  height: 600px;
  border: none;
  background-color: #f4f4f4;
}

/* ================================================================================
   Loading States
   ================================================================================ */

.admin-comm-loading-small {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-tertiary);
}

/* ================================================================================
   Responsive Adjustments
   ================================================================================ */

@media (max-width: 768px) {
  .admin-crm-csm-newsletter-content {
    padding: var(--spacing-md);
  }

  .admin-crm-csm-settings-section {
    position: static;
  }

  .admin-crm-csm-preview-iframe {
    height: 400px;
  }

  .admin-crm-csm-language-buttons {
    flex-direction: column;
  }
}

/* ===================================================================
   Phase 9: System Operations Styles
   admin.css への追加分
   =================================================================== */

/* =============================================
   環境情報バー
   ============================================= */
.admin-env-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  margin-bottom: 24px;
  border-radius: 8px;
  background-color: #f3f4f6;
}

.admin-env-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 20px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.admin-env-info {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #4b5563;
}

.admin-env-info span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =============================================
   ステータスカード
   ============================================= */
.admin-status-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px;
  margin-bottom: 24px;
  border-radius: 12px;
  background-color: #f9fafb;
  border: 2px solid #e5e7eb;
}

.admin-status-card.enabled {
  background-color: #fef2f2;
  border-color: #fecaca;
}

.admin-status-card.disabled {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.admin-status-icon {
  color: #9ca3af;
}

.admin-status-card.enabled .admin-status-icon {
  color: #dc2626;
}

.admin-status-card.disabled .admin-status-icon {
  color: #16a34a;
}

.admin-status-text h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.admin-status-text p {
  margin: 4px 0;
  font-size: 14px;
  color: #6b7280;
}

.admin-status-text p svg {
  margin-right: 8px;
}

/* =============================================
   フォームカード
   ============================================= */
.admin-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.admin-form-card h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.admin-form-group {
  margin-bottom: 16px;
}

.admin-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.admin-form-group label svg {
  margin-right: 6px;
  color: #6b7280;
}

.admin-form-group input,
.admin-form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #111827;
  background-color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-form-group input:focus,
.admin-form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.admin-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.admin-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.admin-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* =============================================
   現在の設定表示
   ============================================= */
.admin-current-settings {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.admin-current-settings p {
  margin: 8px 0;
  font-size: 14px;
  color: #4b5563;
}

.admin-current-settings p strong {
  color: #111827;
}

/* =============================================
   設定リスト
   ============================================= */
.admin-settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: box-shadow 0.2s;
}

.admin-setting-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-setting-info {
  flex: 1 1;
}

.admin-setting-category {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  background-color: #f3f4f6;
  border-radius: 4px;
  margin-bottom: 4px;
}

.admin-setting-info h4 {
  margin: 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.admin-setting-info p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.admin-setting-value {
  display: flex;
  align-items: center;
}

.admin-setting-value code {
  padding: 4px 8px;
  font-size: 13px;
  font-family: 'SF Mono', Monaco, monospace;
  background-color: #f3f4f6;
  border-radius: 4px;
  color: #374151;
}

/* =============================================
   タブスタイル（Phase 9用の追加調整）
   ============================================= */
.admin-system-operations .admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  background-color: #f3f4f6;
  border-radius: 10px;
}

.admin-system-operations .admin-tab {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.admin-system-operations .admin-tab:hover {
  color: #374151;
  background-color: rgba(255, 255, 255, 0.5);
}

.admin-system-operations .admin-tab.active {
  color: #111827;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.admin-tab-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   ログテーブル
   ============================================= */
.admin-logs-list .admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-logs-list .admin-table th,
.admin-logs-list .admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.admin-logs-list .admin-table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  background-color: #f9fafb;
}

.admin-logs-list .admin-table td {
  font-size: 14px;
  color: #374151;
}

/* =============================================
   バッジ追加スタイル
   ============================================= */
.admin-badge.warning {
  background-color: #fef3c7;
  color: #92400e;
}

.admin-badge.success {
  background-color: #d1fae5;
  color: #065f46;
}

.admin-badge.secondary {
  background-color: #f3f4f6;
  color: #4b5563;
}

/* =============================================
   ボタン追加スタイル
   ============================================= */
.admin-btn-danger {
  background-color: #dc2626;
  color: #ffffff;
  border: none;
}

.admin-btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.admin-btn-success {
  background-color: #16a34a;
  color: #ffffff;
  border: none;
}

.admin-btn-success:hover:not(:disabled) {
  background-color: #15803d;
}

/* =============================================
   アラート
   ============================================= */
.admin-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 8px;
  font-size: 14px;
}

.admin-alert-success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.admin-alert-error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.admin-alert svg {
  flex-shrink: 0;
}

/* =============================================
   データなし表示
   ============================================= */
.admin-no-data {
  padding: 40px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

/* =============================================
   レスポンシブ対応
   ============================================= */
@media (max-width: 768px) {
  .admin-env-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .admin-env-info {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .admin-status-card {
    flex-direction: column;
    text-align: center;
  }
  
  .admin-form-row {
    grid-template-columns: 1fr;
  }
  
  .admin-setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .admin-system-operations .admin-tabs {
    flex-direction: column;
  }
  
  .admin-system-operations .admin-tab {
    justify-content: flex-start;
  }
}

/* frontend/src/components/MaintenancePage.css */
/* Phase 9: メンテナンスページスタイル */

.maintenance-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 20px;
}

.maintenance-container {
  max-width: 600px;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.maintenance-loading {
  color: #ffffff;
}

.maintenance-icon {
  color: #e94560;
  margin-bottom: 24px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.maintenance-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.maintenance-message {
  font-size: 1.125rem;
  color: #4a5568;
  line-height: 1.7;
  margin: 0 0 24px 0;
}

.maintenance-description {
  font-size: 0.95rem;
  color: #718096;
  line-height: 1.6;
  margin: 0 0 24px 0;
  padding: 16px;
  background: #f7fafc;
  border-radius: 8px;
  border-left: 4px solid #e94560;
}

.maintenance-end-time {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #e94560 0%, #c23a51 100%);
  color: white;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 24px;
}

.maintenance-end-time svg {
  font-size: 1rem;
}

.maintenance-contact {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

.maintenance-contact-label {
  font-size: 0.875rem;
  color: #718096;
  margin: 0 0 8px 0;
}

.maintenance-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e94560;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.maintenance-contact-link:hover {
  color: #c23a51;
  text-decoration: underline;
}

.maintenance-language-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.lang-btn {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 20px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #4a5568;
}

.lang-btn:hover {
  border-color: #e94560;
  color: #e94560;
}

.lang-btn.active {
  background: #e94560;
  border-color: #e94560;
  color: white;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .maintenance-container {
    padding: 32px 24px;
    margin: 16px;
  }

  .maintenance-title {
    font-size: 1.5rem;
  }

  .maintenance-message {
    font-size: 1rem;
  }

  .maintenance-end-time {
    padding: 10px 20px;
    font-size: 0.875rem;
  }
}

/* ダークモード対応（オプション） */
@media (prefers-color-scheme: dark) {
  .maintenance-page {
    background: linear-gradient(135deg, #0d0d1a 0%, #111827 50%, #1f2937 100%);
  }
}

/* frontend/src/components/admin/system/SystemOperations.css */
/* Phase 9: System Operations追加スタイル */

/* =============================================================================
   System Settings 編集機能用スタイル
   ============================================================================= */

/* 設定変更警告 */
.admin-settings-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  margin-bottom: 20px;
  color: #856404;
  font-size: 0.9rem;
}

.admin-settings-notice svg {
  flex-shrink: 0;
  color: #ffc107;
}

/* 設定リストのレイアウト調整 */
.admin-settings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.admin-setting-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-setting-info {
  flex: 1 1;
  min-width: 0;
}

.admin-setting-info h4 {
  margin: 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a202c;
  font-family: 'Monaco', 'Consolas', monospace;
}

.admin-setting-info p {
  margin: 0;
  font-size: 0.85rem;
  color: #718096;
}

.admin-setting-category {
  display: inline-block;
  padding: 2px 8px;
  background: #edf2f7;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #4a5568;
}

.admin-setting-value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}

/* トグルボタン */
.admin-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #f7fafc;
  color: #718096;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  justify-content: center;
}

.admin-toggle-btn:hover {
  border-color: #cbd5e0;
}

.admin-toggle-btn.active {
  background: #48bb78;
  border-color: #48bb78;
  color: white;
}

.admin-toggle-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 編集モード */
.admin-setting-edit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-setting-input {
  padding: 6px 12px;
  border: 1px solid #4299e1;
  border-radius: 6px;
  font-size: 0.9rem;
  width: 150px;
  font-family: 'Monaco', 'Consolas', monospace;
}

.admin-setting-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
}

/* 表示モード */
.admin-setting-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-setting-display code {
  padding: 4px 12px;
  background: #edf2f7;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: 'Monaco', 'Consolas', monospace;
  color: #2d3748;
}

.admin-setting-display code.sensitive {
  color: #a0aec0;
}

/* 小サイズボタン */
.admin-btn-sm {
  padding: 6px 10px !important;
  font-size: 0.85rem !important;
}

.admin-btn-ghost {
  background: transparent;
  border: none;
  color: #a0aec0;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.admin-btn-ghost:hover {
  background: #edf2f7;
  color: #4a5568;
}

/* バッジ */
.admin-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.admin-badge.success {
  background: #c6f6d5;
  color: #22543d;
}

.admin-badge.secondary {
  background: #e2e8f0;
  color: #4a5568;
}

.admin-badge.warning {
  background: #fefcbf;
  color: #744210;
}

/* =============================================================================
   Coming Soon / 未実装設定スタイル
   ============================================================================= */

.admin-setting-item.not-implemented {
  background: #f7fafc;
  border-color: #e2e8f0;
  opacity: 0.85;
}

.admin-setting-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.admin-badge.coming-soon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.admin-setting-tba-note {
  font-size: 0.75rem;
  color: #a0aec0;
  font-style: italic;
  margin-top: 4px;
}

.admin-toggle-btn.disabled-tba {
  background: #edf2f7;
  border-color: #e2e8f0;
  color: #a0aec0;
  cursor: not-allowed;
  opacity: 0.6;
}

.admin-toggle-btn.disabled-tba:hover {
  background: #edf2f7;
  border-color: #e2e8f0;
}

/* =============================================================================
   メンテナンス設定グリッド
   ============================================================================= */

.admin-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.admin-settings-grid .setting-item {
  padding: 12px;
  background: #f7fafc;
  border-radius: 6px;
}

.admin-settings-grid .setting-item.full-width {
  grid-column: 1 / -1;
}

.admin-settings-grid .setting-item strong {
  display: block;
  font-size: 0.75rem;
  color: #718096;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* =============================================================================
   フォームスタイル補足
   ============================================================================= */

.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.admin-form-group .optional {
  font-size: 0.8rem;
  color: #a0aec0;
  font-weight: normal;
}

.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #a0aec0;
}

/* =============================================================================
   レスポンシブ対応
   ============================================================================= */

@media (max-width: 768px) {
  .admin-setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .admin-setting-value {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .admin-toggle-btn {
    width: 100%;
  }

  .admin-form-row {
    grid-template-columns: 1fr;
  }

  .admin-settings-grid {
    grid-template-columns: 1fr;
  }

  .admin-setting-edit {
    flex-wrap: wrap;
  }

  .admin-setting-input {
    width: 100%;
  }
}

/* frontend/src/styles/maintenance.css */
/**
 * ================================================================================
 * Phase 9: メンテナンスページスタイル
 * ================================================================================
 * 
 * クラス命名規則: admin-maintenance- プレフィックス
 * サイトのデザイン（青系クリーンUI）に合わせたスタイル
 * 
 * ================================================================================
 */

/* ============================================
   コンテナ
   ============================================ */
.admin-maintenance-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.admin-maintenance-content {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 48px 40px;
  max-width: 520px;
  width: 100%;
  text-align: center;
}

/* ============================================
   ロゴ
   ============================================ */
.admin-maintenance-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.admin-maintenance-logo-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.admin-maintenance-logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #1a73e8;
  letter-spacing: -0.5px;
}

/* ============================================
   アイコン
   ============================================ */
.admin-maintenance-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.admin-maintenance-icon svg {
  font-size: 36px;
  color: #1a73e8;
}

/* ============================================
   テキスト
   ============================================ */
.admin-maintenance-title {
  font-size: 28px;
  font-weight: 700;
  color: #202124;
  margin: 0 0 16px;
  line-height: 1.3;
}

.admin-maintenance-message {
  font-size: 16px;
  color: #5f6368;
  line-height: 1.6;
  margin: 0 0 24px;
}

.admin-maintenance-description {
  font-size: 14px;
  color: #80868b;
  line-height: 1.6;
  margin: 0 0 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* ============================================
   情報アイテム（予定終了時刻、連絡先）
   ============================================ */
.admin-maintenance-info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: #5f6368;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.admin-maintenance-info-icon {
  color: #1a73e8;
  font-size: 16px;
}

/* ============================================
   リフレッシュボタン
   ============================================ */
.admin-maintenance-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  background: #1a73e8;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.admin-maintenance-refresh-btn:hover {
  background: #1557b0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.admin-maintenance-refresh-btn:active {
  transform: translateY(0);
}

.admin-maintenance-refresh-btn svg {
  font-size: 14px;
}

/* ============================================
   フッター
   ============================================ */
.admin-maintenance-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e8eaed;
}

.admin-maintenance-footer p {
  font-size: 13px;
  color: #80868b;
  margin: 0;
}

/* ============================================
   レスポンシブ対応
   ============================================ */
@media (max-width: 576px) {
  .admin-maintenance-content {
    padding: 32px 24px;
    margin: 16px;
  }

  .admin-maintenance-title {
    font-size: 24px;
  }

  .admin-maintenance-message {
    font-size: 15px;
  }

  .admin-maintenance-icon {
    width: 64px;
    height: 64px;
  }

  .admin-maintenance-icon svg {
    font-size: 28px;
  }

  .admin-maintenance-logo-text {
    font-size: 20px;
  }

  .admin-maintenance-refresh-btn {
    width: 100%;
    padding: 14px 24px;
  }
}

/* ============================================
   アニメーション（オプション）
   ============================================ */
@keyframes admin-maintenance-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.admin-maintenance-icon svg {
  animation: admin-maintenance-pulse 2s ease-in-out infinite;
}

/* ダークモード対応（将来用） */
@media (prefers-color-scheme: dark) {
  /* 
   * 現時点ではライトモードのみ
   * 将来的にダークモード対応する場合はここに追加
   */
}

/* =============================================================================
   チケット詳細画面用 追加CSS
   
   ファイル: Frontend/src/styles/admin.css または適切なCSSファイルに追加
   ============================================================================= */

/* リフレッシュボタンのスタイル */
.admin-refresh-btn {
  margin-left: 10px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.admin-refresh-btn:hover:not(:disabled) {
  background: #f0f0f0;
  border-color: #ccc;
}

.admin-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-refresh-btn svg {
  font-size: 14px;
}

/* 最終更新時刻の表示スタイル */
.admin-detail-last-updated {
  font-size: 0.85em;
  color: #666;
  margin-left: 15px;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

/* ステータスバッジの追加スタイル */
.admin-status-in-progress {
  background-color: #2196F3;
  color: white;
}

.admin-status-waiting {
  background-color: #FF9800;
  color: white;
}

.admin-status-open {
  background-color: #4CAF50;
  color: white;
}

.admin-status-resolved {
  background-color: #9E9E9E;
  color: white;
}

.admin-status-closed {
  background-color: #607D8B;
  color: white;
}

/* タイトル行のflexbox調整 */
.admin-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* メタ情報の調整 */
.admin-detail-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* アイコンボタンの共通スタイル */
.admin-btn-icon {
  padding: 8px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-btn-icon:hover:not(:disabled) {
  background: #f0f0f0;
}

/* 自動更新インジケーター（オプション） */
.admin-auto-refresh-indicator {
  font-size: 0.75em;
  color: #888;
  margin-left: 8px;
}

.admin-auto-refresh-indicator::before {
  content: "●";
  color: #4CAF50;
  margin-right: 4px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


.admin-maintenance-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* Partial status */
.admin-comm-status-partial {
  background-color: #fef3c7;
  color: #d97706;
}

.admin-crm-csm-status-partial {
  color: #d97706;
}

/* Failed count in recipients column */
.admin-comm-failed-count {
  color: #ef4444;
  font-size: 0.85em;
  margin-left: 4px;
}

/* =============================================================
 * Phase 8-15: Perspective選択UI用スタイル
 * admin-content.css に追加してください
 * ============================================================= */

/* Perspective Section */
.admin-aicontent-perspective-section {
  margin-top: 24px;
  padding: 20px;
  background: #1e293b;
  border-radius: 12px;
  border: 1px solid #334155;
}

.admin-aicontent-perspective-section h3 {
  display: flex;
  align-items: center;
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
}

.admin-aicontent-perspective-desc {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #94a3b8;
}

/* Perspective Grid */
.admin-aicontent-perspective-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

/* Perspective Card */
.admin-aicontent-perspective-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.admin-aicontent-perspective-card:hover:not(:disabled) {
  border-color: #475569;
  background: #1e293b;
  transform: translateY(-2px);
}

.admin-aicontent-perspective-card.active {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.admin-aicontent-perspective-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Perspective Icon */
.admin-aicontent-perspective-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

/* Perspective Info */
.admin-aicontent-perspective-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-aicontent-perspective-name {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
}

.admin-aicontent-perspective-name-ja {
  font-size: 12px;
  color: #94a3b8;
}

.admin-aicontent-perspective-desc-text {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Generate Button with Perspective Badge */
.admin-aicontent-generate-perspective-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* Result with Perspective */
.admin-aicontent-result p {
  margin: 4px 0;
  font-size: 14px;
  color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
  .admin-aicontent-perspective-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-aicontent-perspective-card {
    padding: 12px;
  }
  
  .admin-aicontent-perspective-icon {
    font-size: 24px;
  }
}

/* ================================================================================
   Phase 8-15: Perspective Selection Styles
   既存のAI Provider選択と統一したスタイル
   ================================================================================ */

/* セクション共通 */
.admin-aicontent-provider-section,
.admin-aicontent-perspective-section {
  margin: 24px 0;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.admin-aicontent-provider-section h3,
.admin-aicontent-perspective-section h3 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Provider Switch - 横並びボタン */
.admin-aicontent-provider-switch {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.admin-aicontent-provider-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
  border: 2px solid var(--admin-border, #e0e0e0);
  border-radius: 8px;
  background: white;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-aicontent-provider-button:hover:not(:disabled) {
  border-color: #4a6cf7;
  border-color: var(--provider-color, var(--admin-primary, #4a6cf7));
  color: #4a6cf7;
  color: var(--provider-color, var(--admin-primary, #4a6cf7));
  background: rgba(74, 108, 247, 0.05);
}

.admin-aicontent-provider-button.active {
  border-color: #4a6cf7;
  border-color: var(--provider-color, var(--admin-primary, #4a6cf7));
  background: #4a6cf7;
  background: var(--provider-color, var(--admin-primary, #4a6cf7));
  color: white;
}

.admin-aicontent-provider-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-aicontent-provider-icon {
  font-size: 1.1rem;
}



/* ================================================================================
   Perspective Selection - Provider選択と同じスタイル
   ================================================================================ */

.admin-aicontent-perspective-desc {
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  font-size: 0.9rem;
  margin-bottom: 15px;
  text-align: center;
}

/* Perspective Grid - 2列グリッド */
.admin-aicontent-perspective-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}

/* Perspective Card - シンプルなボタンスタイル */
.admin-aicontent-perspective-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border: 2px solid var(--admin-border, #e0e0e0);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.admin-aicontent-perspective-card:hover:not(:disabled) {
  border-color: #4a6cf7;
  border-color: var(--admin-primary, #4a6cf7);
  background: rgba(74, 108, 247, 0.03);
}

.admin-aicontent-perspective-card.active {
  border-color: #4a6cf7;
  border-color: var(--admin-primary, #4a6cf7);
  background: rgba(74, 108, 247, 0.08);
}

.admin-aicontent-perspective-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Perspective Icon */
.admin-aicontent-perspective-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Perspective Info */
.admin-aicontent-perspective-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-aicontent-perspective-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a2e;
  color: var(--admin-text-primary, #1a1a2e);
}

.admin-aicontent-perspective-name-ja {
  font-size: 0.8rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
}

.admin-aicontent-perspective-desc-text {
  font-size: 0.75rem;
  color: #6c757d;
  color: var(--admin-text-secondary, #6c757d);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Active状態のテキスト色 */
.admin-aicontent-perspective-card.active .admin-aicontent-perspective-name {
  color: #4a6cf7;
  color: var(--admin-primary, #4a6cf7);
}

/* ================================================================================
   Generate Button - Perspective Badge
   ================================================================================ */

.admin-aicontent-generate-perspective-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 0.8rem;
}

/* ================================================================================
   Responsive
   ================================================================================ */

@media (max-width: 600px) {
  .admin-aicontent-perspective-grid {
    grid-template-columns: 1fr;
  }
  
  .admin-aicontent-provider-switch {
    flex-direction: column;
  }
  
  .admin-aicontent-provider-button {
    width: 100%;
    justify-content: center;
  }
}
/* GeneralInfo.css - 既存のdefault.cssスタイルに合わせて修正 */

.general-info-container {
  padding: 2rem;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
}

.general-info-wrapper {
  width: 100%;
}

.general-info-header {
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 1rem;
}

.general-info-title {
  font-size: 1.8rem;
  color: #2d3748;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.general-info-title-icon {
  font-size: 1.5rem;
  color: #4a6eb5;
}

.general-info-subtitle {
  color: #6b7280;
  font-size: 1rem;
  margin-bottom: 0;
}

.general-info-service-description {
  background-color: #f8f9fa;
  border-left: 4px solid #4a6eb5;
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 0 4px 4px 0;
  text-align: center;
}

.general-info-service-description p {
  margin: 0;
  line-height: 1.6;
  color: #4a5568;
}

.general-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.general-info-card {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 6px;
  border-left: 3px solid #4a6eb5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.general-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.general-info-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.general-info-card-icon {
  font-size: 1.5rem;
  color: #4a6eb5;
  min-width: 1.5rem;
  margin-top: 0.125rem;
}

.general-info-card-title-group {
  flex: 1 1;
}

.general-info-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 0.5rem 0;
}

.general-info-card-description {
  color: #4a5568;
  line-height: 1.5;
  margin: 0;
  font-size: 0.95rem;
}

/* Pricing Plans特有のスタイル */
.general-info-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.general-info-pricing-card {
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #4a6eb5;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.general-info-pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.general-info-pricing-header {
  padding: 1.5rem;
  text-align: center;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
}

.general-info-pricing-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #4a6eb5;
}

.general-info-pricing-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #2d3748;
}

.general-info-pricing-price {
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #4a6eb5;
}

.general-info-pricing-description {
  font-size: 0.9rem;
  color: #6b7280;
}

.general-info-pricing-features {
  padding: 1.5rem;
  background-color: white;
}

.general-info-pricing-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f3f4;
}

.general-info-pricing-feature:last-child {
  border-bottom: none;
}

.general-info-pricing-check {
  color: #10b981;
  font-size: 0.875rem;
}

/* FAQ特有のスタイル */
.general-info-faq-list {
  margin-bottom: 2rem;
}

.general-info-faq-item {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.general-info-faq-question {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  width: 100%;
  text-align: left;
}

.general-info-faq-question:hover {
  background-color: #e9ecef;
}

.general-info-faq-icon {
  color: #4a6eb5;
  font-size: 1rem;
}

.general-info-faq-question-text {
  flex: 1 1;
  font-weight: 500;
  color: #2d3748;
}

.general-info-faq-toggle {
  color: #6b7280;
  transition: transform 0.2s;
}

.general-info-faq-answer {
  padding: 1rem;
  background: white;
  border-top: 1px solid #e5e7eb;
  animation: fadeIn 0.2s ease;
}

.general-info-faq-answer p {
  margin: 0;
  color: #4a5568;
  line-height: 1.6;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Feedback特有のスタイル */
.general-info-feedback-form {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-left: 3px solid #4a6eb5;
}

.general-info-feedback-form-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #2d3748;
  text-align: center;
}

.general-info-rating {
  margin-bottom: 1.5rem;
  text-align: center;
}

.general-info-rating label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #2d3748;
}

.general-info-stars {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.general-info-star {
  font-size: 1.5rem;
  color: #d1d5db;
  cursor: pointer;
  transition: color 0.2s;
}

.general-info-star:hover,
.general-info-star--active {
  color: #fbbf24;
}

.general-info-textarea-group {
  margin-bottom: 1.5rem;
}

.general-info-textarea-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #2d3748;
}

.general-info-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 0.875rem;
  resize: vertical;
  transition: border-color 0.2s;
  font-family: inherit;
}

.general-info-textarea:focus {
  outline: none;
  border-color: #4a6eb5;
  box-shadow: 0 0 0 3px rgba(74, 110, 181, 0.1);
}

/* Policy特有のスタイル */
.general-info-policy-content {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  background-color: white;
}

/* Actions */
.general-info-actions {
  text-align: center;
  margin-top: 2rem;
}

.general-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.general-info-btn--primary {
  background-color: #4a6eb5;
  color: white;
}

.general-info-btn--primary:hover {
  background-color: #3a5795;
  transform: translateY(-1px);
}

.general-info-btn--secondary {
  background-color: #6b7280;
  color: white;
}

.general-info-btn--secondary:hover {
  background-color: #4b5563;
  transform: translateY(-1px);
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .general-info-container {
    padding: 1rem;
  }
  
  .general-info-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .general-info-grid,
  .general-info-pricing-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .general-info-card {
    padding: 1rem;
  }
  
  .general-info-card-header {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .general-info-faq-question {
    padding: 0.75rem;
  }
  
  .general-info-feedback-form {
    padding: 1rem;
  }
  
  .general-info-stars {
    flex-wrap: wrap;
  }
  
  .general-info-star {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .general-info-title {
    font-size: 1.25rem;
  }
  
  .general-info-subtitle {
    font-size: 0.875rem;
  }
  
  .general-info-pricing-price {
    font-size: 1.5rem;
  }
  
  .general-info-card-title {
    font-size: 1rem;
  }
  
  .general-info-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* ================================================================================
 * Error Pages CSS (404, 500, etc.)
 * ================================================================================
 * 
 * MaintenancePageと同じデザインを踏襲
 * .admin-maintenance-* クラスと共通のスタイルを使用
 * 
 * ================================================================================
 */

/* コンテナ */
.error-page-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  padding: var(--spacing-xl);
}

.error-page-content {
  max-width: 500px;
  width: 90%;
  text-align: center;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xxl);
  box-shadow: var(--shadow-lg);
}

/* ロゴ */
.error-page-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* エラーアイコン */
.error-page-icon {
  font-size: 36px;
  color: #f59e0b;
  color: var(--warning-color, #f59e0b);
  margin-bottom: var(--spacing-md);
}

/* エラーコード（大きな数字） */
.error-page-code {
  font-size: 70px;
  font-weight: 700;
  color: var(--text-tertiary);
  line-height: 1;
  margin-bottom: var(--spacing-md);
  opacity: 0.3;
}

/* タイトル */
.error-page-title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

/* メッセージ */
.error-page-message {
  font-size: var(--font-msm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.6;
}

.error-page-suggestion {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--spacing-xl) 0;
}

/* エラー詳細（開発モード用） */
.error-page-details {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  text-align: left;
}

.error-page-details-title {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
}

.error-page-details-content {
  font-size: var(--font-xs);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  color: #ef4444;
  color: var(--error-color, #ef4444);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
}

/* ボタンコンテナ */
.error-page-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
}

/* ボタン共通スタイル */
.error-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.error-page-btn:hover {
  transform: translateY(-1px);
}

/* プライマリボタン */
.error-page-btn-primary {
  background: #3b82f6;
  background: var(--accent-primary, #3b82f6);
  color: var(--text-white);
}

.error-page-btn-primary:hover {
  background: #2563eb;
  background: var(--accent-primary-hover, #2563eb);
  box-shadow: var(--shadow-md);
}

/* セカンダリボタン */
.error-page-btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.error-page-btn-secondary:hover {
  background: var(--bg-tertiary);
}

/* フッター */
.error-page-footer {
  border-top: 1px solid var(--border-primary);
  padding-top: var(--spacing-lg);
}

.error-page-footer p {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  .error-page-container {
    padding: var(--spacing-md);
  }

  .error-page-content {
    padding: var(--spacing-xl);
  }

  .error-page-code {
    font-size: 64px;
  }

  .error-page-title {
    font-size: var(--font-xl);
  }

  .error-page-buttons {
    flex-direction: column;
  }
}

/* ================================================================================
 * Cookie Consent Banner CSS
 * ================================================================================
 */

/* オーバーレイ */
.cookie-consent-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* バナー本体 */
.cookie-consent-banner {
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
}

/* ヘッダー */
.cookie-consent-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cookie-consent-icon {
  font-size: 24px;
  color: #3b82f6;
}

.cookie-consent-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

/* 説明文 */
.cookie-consent-description {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.cookie-consent-link {
  color: #3b82f6;
  text-decoration: underline;
}

.cookie-consent-link:hover {
  color: #2563eb;
}

/* ボタンコンテナ */
.cookie-consent-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ボタン共通 */
.cookie-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}

/* プライマリボタン（Accept All） */
.cookie-consent-btn-primary {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
}

.cookie-consent-btn-primary:hover {
  background: #2563eb !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* セカンダリボタン（Necessary Only） */
.cookie-consent-btn-secondary {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

.cookie-consent-btn-secondary:hover {
  background: #e2e8f0 !important;
}

/* テキストボタン（Settings） */
.cookie-consent-btn-text {
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
}

.cookie-consent-btn-text:hover {
  color: #334155 !important;
  background: #f1f5f9 !important;
}

/* ================================================================================
 * 詳細設定ビュー
 * ================================================================================
 */

.cookie-consent-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

/* オプション項目 */
.cookie-consent-option {
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.cookie-consent-option-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.cookie-consent-option-info {
  flex: 1 1;
}

.cookie-consent-option-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 4px 0;
}

.cookie-consent-option-info p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* 常にオン表示 */
.cookie-consent-always-on {
  font-size: 12px;
  color: #22c55e;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 4px;
  white-space: nowrap;
}

/* トグルスイッチ */
.cookie-consent-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.cookie-consent-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-consent-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 26px;
}

.cookie-consent-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cookie-consent-toggle input:checked + .cookie-consent-toggle-slider {
  background-color: #3b82f6;
}

.cookie-consent-toggle input:checked + .cookie-consent-toggle-slider:before {
  transform: translateX(22px);
}

.cookie-consent-toggle.disabled {
  pointer-events: none;
}

/* 詳細設定のボタン */
.cookie-consent-details .cookie-consent-buttons {
  margin-top: 16px;
  justify-content: center;
}

/* ================================================================================
 * レスポンシブ
 * ================================================================================
 */

@media (max-width: 600px) {
  .cookie-consent-overlay {
    padding: 12px;
  }

  .cookie-consent-banner {
    padding: 20px;
  }

  .cookie-consent-buttons {
    flex-direction: column;
  }

  .cookie-consent-btn {
    width: 100%;
    justify-content: center;
  }

  .cookie-consent-option-header {
    flex-direction: column;
    gap: 12px;
  }

  .cookie-consent-toggle {
    align-self: flex-end;
  }
}

/* ===== COMMON BUTTON STYLES ===== */
.refresh-button,
.alpha-button-common-style {
  background-color: var(--bg-function-button);
  color: #495057;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  width: auto;
  flex: 1 1;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
  padding: var(--spacing-xx);
  overflow: hidden; /* はみ出し防止 */
}

/* Button Hover States */
.refresh-button:hover:not(.loading),
.alpha-button-common-style:hover:not(.loading) {
  background-color: #e9ecef;
  color: #212529;
  border-color: #495057;
}

/* Button Loading States */
.refresh-button.loading,
.alpha-button-common-style.loading {
  background-color: #6c757d;
  color: white;
  cursor: not-allowed;
}

/* Loading Spinner in Buttons */
.refresh-button .loading-spinner,
.refresh-button .loading-spinner *,
.alpha-button-common-style .loading-spinner,
.alpha-button-common-style .loading-spinner * {
  width: 14px !important;
  height: 10px !important;
  max-width: 14px;
  max-height: 10px;
}

/* ===== REFRESH BUTTON ZONES ===== */
.refresh-button-zone,
.portfolio-refresh-button-zone {
  display: flex;
  align-items: center;
  padding: var(--spacing-msm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

/* Specific positioning for different zones */
.refresh-button-zone {
  margin-top: -0.5rem;
  margin-bottom: 0.8rem;
  width: 97%;
}

.portfolio-refresh-button-zone {
  margin-top: 0.5rem;
}

/* ===== LABELS ===== */
.refresh-button-zone-label,
.alpha-filter-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 var(--spacing-msm);
  display: block;
}

/* ===== OTHER COMPONENTS ===== */
.filter-group-toggle-mobile {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

/* ===== RESPONSIVE DESIGN ===== */
@media screen and (max-width: 768px) {
  .portfolio-refresh-button-zone {
    width: 96%;
    margin: 0.5rem -1.1rem 0 -1.1rem;
  }
}

/* ===== CONTROL BOX SEARCH FORM ===== */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: var(--spacing-sm);
}

.add-button {
  position: absolute;
  right: var(--spacing-lg);
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.add-button:hover {
  color: var(--color-primary-dark);
}

.search-input::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: var(--font-medium);
  opacity: 0.7; 
  font-size: var(--font-msm);
}

/* Caution Message Styles */
.caution-message-container {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 16px;
}

.caution-message-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.caution-icon {
  width: 20px;
  height: 20px;
  color: #dc2626;
  margin-right: 8px;
  flex-shrink: 0;
}

.caution-title {
  font-weight: 600;
  color: #dc2626;
  font-size: var(--font-msm);
}

.caution-message-content {
  color: #374151;
  font-size: var(--font-sm);
  line-height: 1.5;
  text-align: left;
}

.caution-message-content p {
  margin-bottom: 8px;
}

.caution-message-content p:last-child {
  margin-bottom: 0;
}
/* Member NEW Unified Styles - Based on home.css */

/* Container Styles */
.memberNEW_container {
  display: flex;
  flex-direction: column;
  width: 99%;
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
}

.memberNEW_content {
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

.memberNEW_header {
  padding: var(--spacing-xxl);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-tertiary);
}

.memberNEW_title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  text-align: center;
}

.memberNEW_subtitle {
  font-size: var(--font-lg);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin: var(--spacing-sm) 0 0 0;
  text-align: center;
}

.memberNEW_followtext {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin: var(--spacing-sm) 0 0 0;
  text-align: center;
}

.memberNEW_body {
  padding: var(--spacing-xxl);
}

/* Form Styles */
.memberNEW_form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxl);
}

.memberNEW_form_section {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xxl);
  border: 1px solid var(--border-primary);
}

.memberNEW_section_title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xl) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.memberNEW_section_icon {
  color: var(--color-primary);
  font-size: var(--font-lg);
}

.memberNEW_form_group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.memberNEW_form_row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--spacing-xl);
  gap: var(--spacing-xl);
}

.memberNEW_label {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.memberNEW_field_icon {
  color: var(--color-primary);
  font-size: var(--font-sm);
}

.memberNEW_input,
.memberNEW_select,
.memberNEW_textarea {
  width: 95%;
  padding: var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  transition: all var(--transition-fast);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.memberNEW_input:focus,
.memberNEW_select:focus,
.memberNEW_textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.memberNEW_select {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-lg) center;
  background-size: 16px 12px;
  padding-right: calc(var(--spacing-lg) + 20px);
  -webkit-appearance: none;
          appearance: none;
}

.memberNEW_textarea {
  min-height: 120px;
  resize: vertical;
}

.memberNEW_help_text {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-top: var(--spacing-xs);
}

/* Checkbox Styles */
.memberNEW_checkbox_group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.memberNEW_checkbox_label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  margin: 0;
}

.memberNEW_checkbox {
  width: auto;
  margin: 0;
}

/* Button Styles */
.memberNEW_btn_group {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
  padding-top: var(--spacing-xxl);
}

.memberNEW_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xxl);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--border-primary);
  text-decoration: none;
  min-width: 120px;
}

.memberNEW_btn_primary {
  background-color: var(--color-primary);
  color: var(--text-white);
  border-color: var(--color-primary);
}

.memberNEW_btn_primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.memberNEW_btn_secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-primary);
}

.memberNEW_btn_secondary:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.memberNEW_btn_danger {
  background-color: var(--color-danger);
  color: var(--text-white);
  border-color: var(--color-danger);
}

.memberNEW_btn_danger:hover {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.memberNEW_btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.memberNEW_btn_icon {
  font-size: var(--font-lg);
}

/* Navigation Styles */
.memberNEW_nav_header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
}

.memberNEW_back_btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--font-sm);
  transition: all var(--transition-fast);
}

.memberNEW_back_btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* Message Styles */
.memberNEW_message {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-sm);
}

.memberNEW_message_success {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success-dark);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.memberNEW_message_error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger-dark);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.memberNEW_message_warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning-dark);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.memberNEW_message_icon {
  font-size: var(--font-lg);
}

/* Profile Styles */
.memberNEW_profile_header {
  background-color: var(--bg-primary);
  padding: var(--spacing-xxl);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--spacing-xxl);
}

.memberNEW_profile_info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxl);
}

.memberNEW_avatar_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.memberNEW_avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--border-primary);
  box-shadow: var(--shadow-sm);
}

.memberNEW_avatar_upload {
  position: relative;
  display: inline-block;
}

.memberNEW_avatar_btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--color-primary);
  color: var(--text-white);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.memberNEW_avatar_btn:hover {
  background-color: var(--color-primary-dark);
}

.memberNEW_hidden_input {
  display: none;
}

.memberNEW_user_details {
  flex: 1 1;
}

.memberNEW_username {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.memberNEW_member_type {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-lg) 0;
}

.memberNEW_join_date {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* Stats Grid */
.memberNEW_stats_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: var(--spacing-xl);
  gap: var(--spacing-xl);
  margin: var(--spacing-xxl) 0;
}

.memberNEW_stat_card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.memberNEW_stat_card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.memberNEW_stat_icon {
  font-size: var(--font-xxl);
  color: var(--color-primary);
}

.memberNEW_stat_content {
  display: flex;
  flex-direction: column;
}

.memberNEW_stat_label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xs);
}

.memberNEW_stat_value {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Info Sections */
.memberNEW_info_section {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xxl);
  margin-bottom: var(--spacing-xxl);
  border: 1px solid var(--border-primary);
}

.memberNEW_info_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.memberNEW_info_title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.memberNEW_edit_link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.memberNEW_edit_link:hover {
  color: var(--color-primary-dark);
}

.memberNEW_info_grid {
  display: grid;
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

.memberNEW_info_item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-primary);
}

.memberNEW_info_item:last-child {
  border-bottom: none;
}

.memberNEW_info_label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  flex: 0 0 120px;
}

.memberNEW_info_value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  text-align: right;
  flex: 1 1;
}

.memberNEW_security_status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.memberNEW_security_icon {
  font-size: var(--font-md);
}

.memberNEW_security_enabled {
  color: var(--color-success);
}

.memberNEW_security_disabled {
  color: var(--color-danger);
}

/* Link Styles */
.memberNEW_link_section {
  margin-top: var(--spacing-xxl);
  text-align: center;
}

.memberNEW_link_grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
}

.memberNEW_link_item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.memberNEW_link_item:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Warning Section */
.memberNEW_warning_section {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  margin-top: var(--spacing-xxl);
}

.memberNEW_warning_text {
  color: var(--color-danger-dark);
  font-size: var(--font-sm);
  margin: 0 0 var(--spacing-lg) 0;
  line-height: 1.5;
}

/* Policy Styles */
.memberNEW_policy_link {
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.memberNEW_policy_link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.memberNEW_unread_notice {
  color: var(--color-danger);
  font-size: var(--font-xs);
  font-weight: var(--font-normal);
  white-space: nowrap;
}

/* Status Message Styles */
.memberNEW_status_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxl);
  min-height: 100px;
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.memberNEW_status_icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
}

.memberNEW_status_success {
  color: var(--color-success);
}

.memberNEW_status_error {
  color: var(--color-danger);
}

.memberNEW_status_loading {
  color: var(--color-primary);
}

.memberNEW_status_title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
}

.memberNEW_status_message {
  font-size: var(--font-md);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--spacing-xxl) 0;
}

.memberNEW_action_links {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
}

/* Security Settings Specific Styles */
.memberNEW_two_factor_content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.memberNEW_qr_section {
  text-align: center;
}

.memberNEW_qr_container {
  display: flex;
  justify-content: center;
  margin: var(--spacing-xl) 0;
}

.memberNEW_qr_image {
  width: 200px;
  height: 200px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

.memberNEW_toggle_section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  background-color: var(--bg-primary);
  border-radius: var(--radius-sm);
}

.memberNEW_toggle_container {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.memberNEW_toggle_switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.memberNEW_toggle_input {
  opacity: 0;
  width: 0;
  height: 0;
}

.memberNEW_toggle_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.memberNEW_toggle_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.memberNEW_toggle_input:checked + .memberNEW_toggle_slider {
  background-color: var(--color-primary);
}

.memberNEW_toggle_input:checked + .memberNEW_toggle_slider:before {
  transform: translateX(26px);
}

.memberNEW_toggle_label {
  font-size: var(--font-md);
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .memberNEW_container {
    padding: var(--spacing-sm);
    width: 98%;
  }

  .memberNEW_content {
    max-width: none;
  }

  .memberNEW_header,
  .memberNEW_body {
    padding: var(--spacing-lg);
  }

  .memberNEW_form_row {
    grid-template-columns: 1fr;
  }

  .memberNEW_profile_info {
    flex-direction: column;
    gap: var(--spacing-lg);
    text-align: center;
  }

  .memberNEW_avatar {
    width: 80px;
    height: 80px;
  }

  .memberNEW_stats_grid {
    grid-template-columns: 1fr;
  }

  .memberNEW_info_item {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: start;
  }

  .memberNEW_info_label {
    flex: none;
  }

  .memberNEW_info_value {
    text-align: left;
  }

  .memberNEW_btn_group {
    flex-direction: column;
  }

  .memberNEW_nav_header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .memberNEW_action_links {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .memberNEW_container {
    width: 96%;
    margin-left: -1rem;
  }

  .memberNEW_title {
    font-size: var(--font-md);
  }

  .memberNEW_username {
    font-size: var(--font-xl);
  }

  .memberNEW_stat_card {
    padding: var(--spacing-lg);
  }

  .memberNEW_btn {
    padding: var(--spacing-md) var(--spacing-lg);
    min-width: 100px;
  }
}


.member-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header-top-bar {
  background-color: var(--bg-black);
  color: var(--text-white);
  padding: var(--spacing-lg) var(--spacing-xxl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow: var(--shadow-md);
}

.header-top-bar > * {
  position: relative;
  top: 0;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.logo {
  color: var(--text-white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.logo-icon {
  font-size: var(--font-md);
  font-weight: var(--font-bold);
}

.logo-icon-middle {
  padding-right: var(--spacing-xs);
  padding-left: var(--spacing-xs);
}

.logo-text {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
}

.headerlogo_image_landscape {
  padding-right: var(--spacing-xs);
  padding-left: var(--spacing-xs);
  height: 40px;
}

.headerlogo_url_landscape {
  padding-right: var(--spacing-xs);
  height: 40px;
}

.header-right-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.language-section {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-dropdown {
  display: block;
  padding: 0.3rem 1.85rem 0.3rem 0.3rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  font-size: var(--font-sm);
  font-weight: 400;
  cursor: pointer;
}

.language-dropdown:hover {
  border-color: #999;
}

.language-dropdown:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.auth-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.login-button,
.register-button {
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-white);
  background: none;
  border: 1px solid var(--text-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-sm);
  white-space: nowrap;
}

.login-button:hover {
  background-color: var(--color-primary-dark);
}

.register-button {
  background-color: var(--color-primary);
  border: 1px solid var(--text-white);
  color: var(--text-white);
  text-decoration: none;
}

.register-button:hover {
  background-color: var(--text-white);
  color: var(--bg-black);
}

.user-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.user-profile-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-white);
  transition: opacity 0.2s;
}

.user-profile-link:hover {
  opacity: 0.8;
}

.user-avatar-container {
  position: relative; /* 子要素の絶対配置の基準にする */
  display: inline-block;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--text-white);

}

.username {
  margin: 0 0.25rem;
  font-size: var(--font-msm);
  font-weight: var(--font-semibold);
  color: var(--text-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-button {
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-white);
  background: none;
  border: 1px solid var(--text-white);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-sm);
}

.logout-button:hover {
  background-color: var(--text-white);
  color: var(--bg-black);
}

.language-buttons {
  display: flex;
  gap: var(--spacing-md);
}
/* MemberFooter.js で使用されるスタイル */
.member-footer {
  background-color: var(--bg-black);
  color: var(--text-white);
  padding: var(--spacing-xxl);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.hamburger-menu-wrapper {
  position: relative;
}

.hamburger-button {
  background: none;
  border: none;
  color: var(--text-white);
  font-size: var(--font-lg);
  cursor: pointer;
  padding: var(--spacing-md);
  transition: color var(--transition-fast);
}

.hamburger-button:hover {
  color: var(--color-primary-light);
}

.hamburger-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: 1000;
  margin-bottom: var(--spacing-sm);
}

.hamburger-nav {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md);
}

.hamburger-item {
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-sm);
  transition: background-color var(--transition-fast);
  border-radius: var(--radius-sm);
}

.hamburger-item:hover {
  background-color: var(--bg-hover);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.footer-icon {
  font-size: var(--font-lg);
}

.footer-copyright {
  font-size: var(--font-sm);
  font-weight: var(--font-normal);
  color: var(--text-white);
}

.footer-right {
  display: flex;
}

.social-links {
  display: flex;
  gap: var(--spacing-lg);
}

.social-links a {
  color: var(--text-white);
  font-size: var(--font-lg);
  transition: color var(--transition-fast);
}

.social-links a:hover {
  color: var(--color-primary-light);
}

/* MemberLayoutWrapper.js で使用されるスタイル */
.member-layout-wrapper {
  width: 100%;
}

.member-page-container {
  min-height: auto; /* 固定高さを無効化 */
  width: 100%;
}

.member-content {
  width: 100%;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .headerlogo_url_landscape {
    padding-right: var(--spacing-xs);
    height: 30px;
  }


  .username {
    font-size: var(--font-sm);
    font-weight: var(--font-normal);
    color: var(--text-white);
  }

  .language-section {
    margin-right: 10px;
  }
  
  .language-dropdown {
    font-size: 0.8rem;
  }

  .header-right-section {
    gap: 0.5rem;
  }
  
  .auth-section {
    gap: 0.5rem;
  }
  
  .user-profile-link .username {
    display: none;
  }

  .member-layout-wrapper {
    width: 106%;
    padding: var(--spacing-xxl);
    margin-top: -0.25rem;
    margin-left: -0.1rem;
  }

  .member-content {
    width: 100%;
    position: relative !important; /* absolute位置指定を無効化 */
  }
}

@media (max-width: 592px) {
  .member-layout-wrapper {
    width: 108%;
    padding: var(--spacing-xxl);
    margin-top: -0.25rem;
    margin-left: -0.1rem;
  }

  .member-content {
    margin-left: -1.5rem;
    width: 97%;
  }
}

@media (min-width: 769px) {
  .member-layout-wrapper {
    width: 98%;
    padding: var(--spacing-xxl);
    margin-top: -0.25rem;
  }

}

@supports (-webkit-overflow-scrolling: touch) {
  .headerlogo_url_landscape {
    padding-right: var(--spacing-xs);
    height: 30px;
  }

  .username {
    font-size: var(--font-sm);
    font-weight: var(--font-normal);
    color: var(--text-white);
  }

  .member-content {
  margin: 0 auto;       /* 左右の自動マージンで中央揃え */
  width: 98%;           /* 必要なら幅95%を維持 */
  max-width: 1200px;    /* 必要なら最大幅を制限して崩れ防止 */
  position: absolute;
  transform: translateX(-3%);
  }
}

/* 組み込み型登録フォーム用追加CSS */

/* プログレスインジケーター */
.memberNEW_form_progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-primary);
}

.memberNEW_form_progress_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1 1;
  position: relative;
}

.memberNEW_form_progress_step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 60%;
  width: 80%;
  height: 2px;
  background-color: var(--border-primary);
  z-index: 1;
}

.memberNEW_form_progress_step.completed:not(:last-child)::after {
  background-color: var(--color-success);
}

.memberNEW_form_progress_circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
  transition: all var(--transition-fast);
}

.memberNEW_form_progress_step.active .memberNEW_form_progress_circle {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-white);
}

.memberNEW_form_progress_step.completed .memberNEW_form_progress_circle {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--text-white);
}

.memberNEW_form_progress_step span {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  text-align: center;
  white-space: nowrap;
}

.memberNEW_form_progress_step.active span {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* ポリシー表示コンテナ */
.memberNEW_form_policy_container {
  display: flex;
  flex-direction: column;
  height: 70vh;
  min-height: 500px;
}

.memberNEW_form_policy_content {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  background-color: var(--bg-primary);
}

.memberNEW_form_policy_text {
  line-height: 1.6;
  color: var(--text-primary);
}

.memberNEW_form_policy_text h1 {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--text-primary);
}

.memberNEW_form_policy_text h2 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin: var(--spacing-xxl) 0 var(--spacing-lg) 0;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: var(--spacing-sm);
}

.memberNEW_form_policy_text h3 {
  font-size: var(--font-md);
  font-weight: var(--font-medium);
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;
  color: var(--text-primary);
}

.memberNEW_form_policy_text p {
  margin: var(--spacing-md) 0;
  color: var(--text-secondary);
}

.memberNEW_form_policy_text ul,
.memberNEW_form_policy_text ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

.memberNEW_form_policy_text li {
  margin: var(--spacing-sm) 0;
  color: var(--text-secondary);
}

.memberNEW_form_policy_text strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.memberNEW_form_policy_important {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.memberNEW_form_policy_important h2 {
  color: var(--color-danger-dark);
  margin-top: 0;
}

.memberNEW_form_policy_important ul {
  margin: var(--spacing-lg) 0;
}

.memberNEW_form_policy_important li {
  color: var(--color-danger-dark);
  font-weight: var(--font-medium);
}

.memberNEW_form_policy_important p {
  color: var(--color-danger-dark);
  font-weight: var(--font-semibold);
  margin: var(--spacing-lg) 0 0 0;
}

.memberNEW_form_policy_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-primary);
}

.memberNEW_form_policy_notice {
  font-size: var(--font-sm);
  color: var(--color-warning-dark);
  margin: var(--spacing-md) 0 0 0;
  text-align: center;
  width: 100%;
}

.memberNEW_btn_disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* 最終確認画面 */
.memberNEW_form_final_summary h4,
.memberNEW_form_final_agreements h4 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: var(--spacing-sm);
}

.memberNEW_form_final_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-secondary);
}

.memberNEW_form_final_item:last-child {
  border-bottom: none;
}

.memberNEW_form_final_label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  flex: 0 0 140px;
}

.memberNEW_form_final_value {
  font-size: var(--font-sm);
  color: var(--text-primary);
  text-align: right;
  flex: 1 1;
  word-break: break-all;
}

.memberNEW_form_final_agreement {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  color: var(--text-primary);
}

.memberNEW_form_final_check {
  color: var(--color-success);
  font-size: var(--font-lg);
}

.memberNEW_form_final_notice {
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.memberNEW_form_final_notice p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .memberNEW_form_progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* 改行を防ぐ */
    gap: 4px; /* より小さな間隔 */
    padding: 8px 0;
  }

  .memberNEW_form_progress_step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* 要素の縮小を防ぐ */
    min-width: 50px; /* より小さな最小幅 */
    text-align: center;
  }

  .memberNEW_form_progress_step span {
    font-size: 12px; /* スマホでのフォントサイズを調整 */
    white-space: nowrap; /* テキストの改行を防ぐ */
    margin-top: 4px;
  }

  .memberNEW_form_policy_container {
    height: 60vh;
    min-height: 400px;
  }

  .memberNEW_form_policy_content {
    padding: var(--spacing-lg);
  }

  .memberNEW_form_policy_footer {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .memberNEW_form_policy_footer .memberNEW_btn {
    width: 100%;
  }

  .memberNEW_form_final_item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .memberNEW_form_final_label {
    flex: none;
  }

  .memberNEW_form_final_value {
    text-align: left;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .memberNEW_form_progress_step span {
    font-size: var(--font-xxs);
  }

  .memberNEW_form_progress_circle {
    width: 32px;
    height: 32px;
    font-size: var(--font-xs);
  }

  .memberNEW_form_policy_text h1 {
    font-size: var(--font-lg);
  }

  .memberNEW_form_policy_text h2 {
    font-size: var(--font-md);
  }

  .memberNEW_form_policy_text h3 {
    font-size: var(--font-sm);
  }

  .memberNEW_form_policy_container {
    height: 50vh;
    min-height: 350px;
  }

  .memberNEW_btn_group {
    flex-direction: column;
  }

  .memberNEW_btn_group .memberNEW_btn {
    width: 100%;
  }
}

/* スクロールバーのカスタマイズ */
.memberNEW_form_policy_content::-webkit-scrollbar {
  width: 8px;
}

.memberNEW_form_policy_content::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.memberNEW_form_policy_content::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

.memberNEW_form_policy_content::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}

/* Firefox用スクロールバー */
.memberNEW_form_policy_content {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--bg-secondary);
}

/* 追加のアニメーション効果 */
.memberNEW_form_progress_step {
  transition: all var(--transition-fast);
}

.memberNEW_form_progress_step.active {
  transform: scale(1.05);
}

.memberNEW_form_progress_step.completed {
  animation: pulse-success 0.6s ease-in-out;
}

@keyframes pulse-success {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* ローディング状態のスタイル */
.memberNEW_btn.loading {
  position: relative;
  pointer-events: none;
}

.memberNEW_btn.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* フォーカス状態の改善 */
.memberNEW_btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.memberNEW_form_policy_content:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  .memberNEW_form_progress_step,
  .memberNEW_btn,
  .memberNEW_form_progress_circle {
    transition: none;
  }
  
  .memberNEW_form_progress_step.completed {
    animation: none;
  }
  
  .memberNEW_btn.loading::before {
    animation: none;
  }
}

/* PolicyReconfirmation用スタイル */

.memberNEW_policy_reconfirmation {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.memberNEW_policy_notification {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.memberNEW_notification_header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.memberNEW_notification_icon {
  font-size: 3rem;
  color: #f39c12;
  margin-bottom: 1rem;
}

.memberNEW_notification_header h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.memberNEW_notification_content {
  color: #555;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.memberNEW_notification_content p {
  margin-bottom: 1rem;
}

/* ポリシー承認状況の表示スタイル */
.memberNEW_policy_status {
  display: flex;
  align-items: center;
}

.memberNEW_policy_icon {
  margin-right: 0.5rem;
  font-size: 1.1rem;
}

.memberNEW_policy_accepted {
  color: #27ae60;
}

.memberNEW_policy_pending {
  color: #e74c3c;
}

/* 警告メッセージのスタイル */
.memberNEW_message_warning {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 1px solid #ffc107;
  color: #856404;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

.memberNEW_message_warning .memberNEW_message_icon {
  color: #f39c12;
  margin-right: 0.75rem;
  font-size: 1.2rem;
}

.memberNEW_message_warning strong {
  font-weight: 600;
}

/* 小さなボタンスタイル */
.memberNEW_btn_small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 6px;
}

/* ポリシー承認完了後の成功メッセージ */
.memberNEW_message_success {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  border: 1px solid #28a745;
  color: #155724;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

.memberNEW_message_success .memberNEW_message_icon {
  color: #28a745;
  margin-right: 0.75rem;
  font-size: 1.2rem;
}

/* ポリシー表示エリアのスクロール改善 */
.memberNEW_form_policy_content {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background: #fafafa;
  margin-bottom: 1rem;
}

.memberNEW_form_policy_content::-webkit-scrollbar {
  width: 8px;
}

.memberNEW_form_policy_content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.memberNEW_form_policy_content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.memberNEW_form_policy_content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* フィールドアイコンのスタイル改善 */
.memberNEW_field_icon {
  margin-right: 0.5rem;
  color: #6c757d;
  width: 16px;
  text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .memberNEW_policy_notification {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  .memberNEW_notification_icon {
    font-size: 2.5rem;
  }
  
  .memberNEW_notification_header h2 {
    font-size: 1.3rem;
  }
  
  .memberNEW_message_warning,
  .memberNEW_message_success {
    flex-direction: column;
    text-align: center;
  }
  
  .memberNEW_message_warning .memberNEW_message_icon,
  .memberNEW_message_success .memberNEW_message_icon {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .memberNEW_btn_small {
    margin-top: 0.5rem;
    width: 100%;
  }
}

/* 2段目のグレー帯 */
.header-billing-bar {
  background-color: #f8f9fa;
  /* border-top: 1px solid #dee2e6; */
  border-bottom: 1px solid #dee2e6;
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 課金セクション */
.billing-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* 課金ボタンコンテナ */
.billing-buttons-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ローディング表示 */
.billing-loading {
  color: #6b7280;
  font-size: 12px;
  padding: 8px 16px;
  font-style: italic;
}

/* 基本の課金ボタンスタイル */
.billing-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background-color: #ffffff;
  color: #495057;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  min-height: 36px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.billing-btn:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.billing-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* チケットボタン（ブルー系） */
.billing-btn-ticket {
  border-color: #0d6efd;
  color: #0d6efd;
  background-color: #ffffff;
}

.billing-btn-ticket:hover {
  background-color: #0d6efd;
  color: #ffffff;
  border-color: #0a58ca;
}

/* プレミアムボタン（ゴールド系） */
.billing-btn-premium {
  border-color: #f59e0b;
  color: #d97706;
  background-color: #fffbeb;
}

.billing-btn-premium:hover {
  background-color: #f59e0b;
  color: #ffffff;
  border-color: #d97706;
}

/* ボタン内アイコン */
.billing-btn-icon {
  font-size: 12px;
  flex-shrink: 0;
}

/* ボタンテキスト */
.billing-btn-text {
  margin-left: var(--spacing-sm);
  font-size: var(--font-md);
  font: var(--text-secondary);
  font-weight: 500;
  line-height: 1;
}

.user-badge {
  position: absolute;
  bottom: 0;   /* アバターの下部に */
  right: 0;    /* 右肩口（右下）に配置 */
  background: #f39c12; /* バッジの背景色 */
  color: white;
  font-size: 7px;
  font-weight: bold;
  padding: 2px 3px;
  border-radius: 2px;
  transform: translate(10%, 20%); /* 少し外側に出す */
  pointer-events: none; /* バッジでクリックを邪魔しない */
  white-space: nowrap;
}

.user-badge-big {
  position: absolute;
  bottom: 0;   /* アバターの下部に */
  background: #f39c12; /* バッジの背景色 */
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 3px;
  transform: translate(0%, 10%); /* 少し外側に出す */
  pointer-events: none; /* バッジでクリックを邪魔しない */
  white-space: nowrap;
}

.user-badge-premium {
  background: #f39c12; /* バッジの背景色 */
}
.user-badge-free {
  background: gray;
}
.user-badge-ticket {
  background: dodgerblue;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .header-billing-bar {
    padding: 8px 16px;
  }
  
  .billing-btn {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 32px;
  }
  
  .billing-btn-text {
    margin-left: var(--spacing-xs);
    font-size: var(--font-msm);
    font: var(--text-secondary);
  }
  
  .billing-btn-icon {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .header-billing-bar {
    padding: 6px 12px;
  }
  
  .billing-buttons-container {
    gap: 8px;
  }
  
  .billing-btn {
    padding: 5px 10px;
    gap: 4px;
    min-height: 30px;
  }
  
  .billing-btn-text {
    margin-left: var(--spacing-xs);
    font-size: var(--font-msm);
    font: var(--text-secondary);
  }
}

@media (max-width: 480px) {
  .billing-btn-text {
    display: flex; /* テキストを非表示にしてアイコンのみ */
    margin-left: var(--spacing-xs);
    font-size: var(--font-sm);
    font: var(--text-secondary);
  }
  
  .billing-btn {
    padding: 6px 8px;
    gap: 0;
    min-width: 36px;
    justify-content: center;
  }
  
  .billing-btn-icon {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .header-billing-bar {
    display: none; /* 極小画面では完全に非表示 */
  }
}

/* アクセシビリティ対応 */
.billing-btn:focus {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.billing-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.alpha-ai-plan-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.plan-badge-container {
  position: relative;
  display: inline-block;
  margin-right: var(--spacing-md);
}

.plan-badge-main {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 6px;
  border: 1.5px solid;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-badge-main.premium {
  background-color: #f39c12;
  border-color: #f59e0b;
  color: #fff;
}

.plan-badge-main.ticket {
  background-color: #dbeafe;
  border-color: #3b82f6;
  color: #1e40af;
}

.plan-badge-main.free-plan {
  background-color: #f3f4f6;
  border-color: #6b7280;
  color: #374151;
}

.plan-badge-indicator {
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 8px;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 10px;
  transform: translate(20%, -20%);
  pointer-events: none;
  white-space: nowrap;
  min-width: 16px;
  text-align: center;
}

.plan-badge-indicator.unlimited {
  background-color: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--text-secondary);
  border-radius: 3px;
  padding: 1px 4px;
}

.plan-badge-indicator.count {
  background-color: #ef4444;
  color: white;
  border: 1px solid #dc2626;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.plan-badge-indicator.count::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid #dc2626;
  border-radius: 50%;
  background-color: #ef4444;
  z-index: -1;
}

/* 狭いコンテナ */
.memberNEW_content_narrow {
  max-width: 400px;
  margin: 0 auto;
}

/* ヘッダーアイコン */
.memberNEW_header_icon {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

/* 認証コード入力フィールド */
.memberNEW_input_code {
  font-size: var(--font-xl);
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  padding: 0.4rem;
}

/* 入力ヒント */
.memberNEW_input_hint {
  display: block;
  font-size: var(--font-sm);
  color: #666;
  margin-top: 0.5rem;
  text-align: center;
}

/* センター配置のフォームグループ */
.memberNEW_form_group_centered {
  text-align: center;
}

/* ラベルアイコン */
.memberNEW_label_icon {
  margin-right: 0.5rem;
}

/* ヘルプセクション */
.memberNEW_help_section {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.memberNEW_avatar_section {
  position: relative;
}

.memberNEW_avatar_section .user-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
}

/* 警告テキスト用スタイル追加 */
.memberNEW_member_warning {
  color: #dc3545 !important;
  font-weight: 600;
}

/* プロフィールヘッダー内のボタンコンテナ */
.memberNEW_profile_header .billing-buttons-container {
  margin-top: 20px;
  width: 100%;
}

.user-badge-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #dc3545;
  color: #ffffff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* バッジコンテナを相対位置に */
.memberNEW_avatar_section .user-badge {
  position: relative;
}

.memberNEW_member_auto_renewal_on {
  color: #2e7d32; /* Green */
  font-weight: 500;
}

.memberNEW_member_auto_renewal_off {
  color: #d32f2f; /* Red */
  font-weight: 500;
}

.memberNEW_member_warning {
  color: #ed6c02; /* Orange */
  font-weight: 500;
}

/* frontend/src/styles/coupon.css */

.coupon-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.coupon-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.coupon-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  text-align: center;
}

.coupon-header h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
}

.coupon-description {
  margin: 0;
  font-size: 14px;
  opacity: 0.95;
  line-height: 1.6;
}

/* ステータス表示 */
.coupon-status {
  margin: 20px;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid;
}

.coupon-status.valid {
  background-color: #f0fdf4;
  border-color: #22c55e;
}

.coupon-status.invalid {
  background-color: #fef2f2;
  border-color: #ef4444;
}

.coupon-status h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 600;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-weight: 500;
  color: #64748b;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.badge-success {
  background-color: #22c55e;
  color: white;
}

.badge-expired {
  background-color: #ef4444;
  color: white;
}

.time-remaining {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  font-family: 'Courier New', monospace;
}

.ticket-amount {
  font-size: 18px;
  font-weight: 700;
  color: #764ba2;
}

/* メッセージ */
.coupon-message {
  margin: 20px;
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.coupon-message.success {
  background-color: #f0fdf4;
  color: #166534;
  border: 1px solid #22c55e;
}

.coupon-message.error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

/* セクション */
.coupon-section {
  margin: 20px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #f8fafc;
}

.coupon-section h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.section-description {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* ボタン */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 300px;
  display: inline-block;
  text-align: center;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-success {
  background-color: #22c55e;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* クーポンコード表示 */
.coupon-display {
  margin-top: 15px;
}

.coupon-code-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  background-color: #ffffff;
  border: 2px dashed #667eea;
  border-radius: 8px;
  margin-bottom: 10px;
}

.coupon-code {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: #667eea;
  letter-spacing: 2px;
}

.btn-copy {
  padding: 8px 12px;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
}

.btn-copy:hover {
  background-color: #e2e8f0;
  transform: scale(1.1);
}

.coupon-hint {
  font-size: 13px;
  color: #64748b;
  text-align: center;
  margin: 0;
}

/* 入力グループ */
.coupon-input-group {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.coupon-input {
  flex: 1 1;
  padding: 12px 16px;
  font-size: 16px;
  font-family: 'Courier New', monospace;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  transition: border-color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.coupon-input:focus {
  outline: none;
  border-color: #667eea;
}

.coupon-input-group .btn {
  width: auto;
  min-width: 100px;
}

/* 注意事項 */
.coupon-notes {
  margin: 20px;
  padding: 20px;
  background-color: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
}

.coupon-notes h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #92400e;
}

.coupon-notes ul {
  margin: 0;
  padding-left: 20px;
}

.coupon-notes li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #78350f;
  line-height: 1.6;
}

.coupon-notes li:last-child {
  margin-bottom: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .coupon-page {
    padding: 10px;
  }

  .coupon-header {
    padding: 20px;
  }

  .coupon-header h1 {
    font-size: 24px;
  }

  .coupon-section {
    margin: 15px;
    padding: 15px;
  }

  .coupon-input-group {
    flex-direction: column;
  }

  .coupon-input-group .btn {
    width: 100%;
  }

  .btn {
    max-width: 100%;
  }

  .status-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

/* ===========================================
 * roboticker.AI 法務ページ用CSS追加分
 * Phase 1 法務対応用
 * 追加日: 2025年1月
 * =========================================== */

/* -------------------------------------------
 * 特定商取引法ページ用スタイル
 * ------------------------------------------- */
.tokushoho-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.tokushoho-table th,
.tokushoho-table td {
  border: 1px solid #ddd;
  border: 1px solid var(--border-color, #ddd);
  padding: 0.75rem 1rem;
  text-align: left;
}

.tokushoho-table th {
  background-color: #f5f5f5;
  background-color: var(--bg-secondary, #f5f5f5);
  font-weight: 600;
  width: 30%;
}

.tokushoho-table td {
  background-color: #fff;
  background-color: var(--bg-primary, #fff);
}

.tokushoho-note {
  font-size: 0.875rem;
  color: #666;
  color: var(--text-secondary, #666);
  margin-top: 0.5rem;
}

/* -------------------------------------------
 * フッター免責事項バナー
 * ------------------------------------------- */
.footer-disclaimer-banner {
  /* background-color: var(--bg-warning, #fff3cd);
  border-top: 1px solid var(--border-warning, #ffc107);
  padding: 0.5rem 1rem;
  margin-bottom: var(--spacing-sm); */
  text-align: center;
}

.footer-disclaimer-text {
  font-size: 0.75rem;
  color: #856404;
  color: var(--text-warning, #856404);
  margin: 0;
  line-height: 1.4;
}

/* -------------------------------------------
 * フッター中央の法務リンク
 * ------------------------------------------- */
.footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.footer-legal-link {
  color: #666;
  color: var(--text-secondary, #666);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.2s ease;
}

.footer-legal-link:hover {
  color: #333;
  color: var(--text-primary, #333);
  text-decoration: underline;
}

.footer-legal-separator {
  color: #999;
  color: var(--text-tertiary, #999);
  font-size: 0.75rem;
}

/* モバイル表示では中央リンクを非表示 */
@media (max-width: 768px) {
  .footer-center {
    display: none;
  }
}

/* -------------------------------------------
 * ハンバーガーメニュー内の区切り線
 * ------------------------------------------- */
.hamburger-divider {
  height: 1px;
  background-color: #ddd;
  background-color: var(--border-color, #ddd);
  margin: 0.5rem 0;
}

/* -------------------------------------------
 * ポリシーページの重要事項ボックス
 * ------------------------------------------- */
.memberNEW_form_policy_important {
  background-color: #fff5f5;
  background-color: var(--bg-danger-light, #fff5f5);
  border: 1px solid #f5c6cb;
  border: 1px solid var(--border-danger, #f5c6cb);
  border-left: 4px solid #dc3545;
  border-left: 4px solid var(--danger, #dc3545);
  border-radius: 4px;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.memberNEW_form_policy_important h2 {
  color: #dc3545;
  color: var(--danger, #dc3545);
  margin-top: 0;
  font-size: 1.1rem;
}

.memberNEW_form_policy_important ul {
  margin-bottom: 0.5rem;
}

.memberNEW_form_policy_important li {
  margin-bottom: 0.5rem;
}

.memberNEW_form_policy_important p:last-child {
  margin-bottom: 0;
}

/* ダークモード対応 */
.dark-mode .memberNEW_form_policy_important {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3);
}

/* -------------------------------------------
 * レスポンシブ対応
 * ------------------------------------------- */
@media (max-width: 768px) {
  .tokushoho-table th {
    width: 40%;
  }
  
  .tokushoho-table th,
  .tokushoho-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .footer-disclaimer-text {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .tokushoho-table {
    display: block;
  }
  
  .tokushoho-table tbody,
  .tokushoho-table tr {
    display: block;
  }
  
  .tokushoho-table th,
  .tokushoho-table td {
    display: block;
    width: 100%;
  }
  
  .tokushoho-table th {
    border-bottom: none;
    padding-bottom: 0.25rem;
  }
  
  .tokushoho-table td {
    border-top: none;
    padding-top: 0.25rem;
    margin-bottom: 0.5rem;
  }
}
/* MemberFeatures Component Styles */
.MemberFeatures-container,
.MemberFeatures-container-watchlist,
.MemberFeatures-container-portfolio {
  background-color: #f8f9fa;
  padding: 1rem 0;
}

.MemberFeatures-container.MemberFeatures-in-app,
.MemberFeatures-container-watchlist.MemberFeatures-in-app,
.MemberFeatures-container-portfolio.MemberFeatures-in-app {
  padding: 1.5rem 0;
}

.MemberFeatures-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.MemberFeatures-header {
  text-align: center;
  margin-bottom: 2rem;
}

.MemberFeatures-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
}

.MemberFeatures-subtitle {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Service Description for individual service pages */
.MemberFeatures-service-description {
  text-align: center;
  margin-bottom: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.MemberFeatures-service-description p {
  font-size: 0.95rem;
  color: #495057;
  line-height: 1.6;
}

.MemberFeatures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.MemberFeatures-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1.2rem 1rem 1.2rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}

.MemberFeatures-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.MemberFeatures-card--trial {
  border: 2px solid #007bff;
  position: relative;
}

.MemberFeatures-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.MemberFeatures-card-icon {
  font-size: 1.2rem;
  color: #007bff;
  flex-shrink: 0;
}

.MemberFeatures-card-title-group {
  flex: 1 1;
}

.MemberFeatures-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: -0.1rem 0.5rem;
}

.MemberFeatures-card-subtitle {
  font-size: 0.8rem;
  color: #6c757d;
  margin: -0.1rem 0.5rem;
}

.MemberFeatures-card-description {
  font-size: 0.85rem;
  color: #495057;
  line-height: 1.4;
}

.MemberFeatures-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.MemberFeatures-card-item {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.3rem;
  padding-left: 0.75rem;
  position: relative;
}

.MemberFeatures-card-item:before {
  content: "•";
  color: #007bff;
  position: absolute;
  left: 0;
  top: 0;
}

.MemberFeatures-card-item:last-child {
  margin-bottom: 0;
}

.MemberFeatures-trial-badge {
  background-color: #007bff;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  align-self: center;
}

.MemberFeatures-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-left: 1rem;
}

.MemberFeatures-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  justify-content: center;
}

.MemberFeatures-btn--primary {
  background-color: #007bff;
  color: #ffffff;
}

.MemberFeatures-btn--primary:hover {
  background-color: #0056b3;
  color: #ffffff;
  text-decoration: none;
}

.MemberFeatures-btn--secondary {
  background-color: #ffffff;
  color: #007bff;
  border: 1px solid #007bff;
}

.MemberFeatures-btn--secondary:hover {
  background-color: #007bff;
  color: #ffffff;
  text-decoration: none;
}

/* Trial Info Section (for Watchlist) */
.MemberFeatures-trial-info-container {
  margin-bottom: 2rem;
}

.MemberFeatures-trial-info {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.MemberFeatures-info-icon {
  font-size: 1.2rem;
  color: #007bff;
  flex-shrink: 0;
}

.MemberFeatures-trial-text {
  flex: 1 1;
}

.MemberFeatures-trial-text p {
  margin: 0;
  font-size: 0.9rem;
  color: #495057;
  line-height: 1.4;
}

.MemberFeatures-trial-text p:first-child {
  margin-bottom: 0.3rem;
}

.MemberFeatures-trial-count {
  font-weight: 600;
  color: #007bff;
}

.MemberFeatures-auth-buttons {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.MemberFeatures-auth-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.MemberFeatures-button-icon {
  font-size: 0.8rem;
}

.MemberFeatures-login-button {
  background-color: #ffffff;
  color: #007bff;
  border: 1px solid #007bff;
}

.MemberFeatures-login-button:hover {
  background-color: #007bff;
  color: #ffffff;
}

.MemberFeatures-signup-button {
  background-color: #007bff;
  color: #ffffff;
}

.MemberFeatures-signup-button:hover {
  background-color: #0056b3;
}

@supports (-webkit-overflow-scrolling: touch) {
  .MemberFeatures-container {
    position: relative !important; /* absolute位置指定を無効化 */
  }

  .MemberFeatures-container-watchlist {
    width: 96%;
    margin-left: -1.5rem;
  }

  .MemberFeatures-container-portfolio {
    width: 96%;
    margin-left: -1.2rem;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .MemberFeatures-container {
    padding: 1.2rem 0;
  }
  
  .MemberFeatures-container {
    position: relative !important; /* absolute位置指定を無効化 */
  }

  .MemberFeatures-container-watchlist {
    width: 96%;
    margin-left: -1.5rem;
  }

  .MemberFeatures-container-portfolio {
    width: 96%;
    margin-left: -1.2rem;
  }

  .MemberFeatures-wrapper {
    padding: 0 0.75rem;
  }
  
  .MemberFeatures-title {
    font-size: 1.2rem;
  }
  
  .MemberFeatures-subtitle {
    font-size: 0.85rem;
  }
  
  .MemberFeatures-service-description p {
    font-size: 0.9rem;
  }
  
  .MemberFeatures-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
  }
  
  .MemberFeatures-card {
    padding: 1.2rem 1rem 1.2rem 2rem;
  }
  
  .MemberFeatures-card-header {
    gap: 0.6rem;
  }
  
  .MemberFeatures-card-icon {
    font-size: 1.1rem;
  }
  
  .MemberFeatures-card-title {
    font-size: 0.9rem;
  }
  
  .MemberFeatures-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .MemberFeatures-btn {
    width: 100%;
  }

  .MemberFeatures-actions {
    width: 90%;
  }
  
  .MemberFeatures-trial-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  
  .MemberFeatures-auth-buttons {
    width: 100%;
  }
  
  .MemberFeatures-auth-button {
    flex: 1 1;
  }
}

@media (max-width: 480px) {
  .MemberFeatures-wrapper {
    padding: 0 0.5rem;
  }
  
  .MemberFeatures-title {
    font-size: 1.1rem;
  }
  
  .MemberFeatures-card {
    padding: 1.2rem 1rem 1.2rem 2rem;
  }
  
  .MemberFeatures-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  
  .MemberFeatures-trial-badge {
    align-self: flex-start;
  }
  
  .MemberFeatures-auth-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .MemberFeatures-auth-button {
    width: 100%;
  }
}

/* 新しく追加されたヒーローセクションのみのスタイル */
/* 既存のスタイルには一切影響しません */

.MemberFeatures-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 10px 0;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.MemberFeatures-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.MemberFeatures-hero-content {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.MemberFeatures-hero-text {
  flex: 1 1;
  max-width: 600px;
}

.MemberFeatures-hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  line-height: 1.2;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.MemberFeatures-hero-subtitle {
  font-size: var(--font-xl);
  font-weight: 500;
  color: #64748b;
  margin-bottom: 24px;
  line-height: 1.4;
}

.MemberFeatures-hero-description {
  font-size: var(--font-md);
  color: #475569;
  margin-bottom: 40px;
  line-height: 1.6;
}

.MemberFeatures-hero-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.MemberFeatures-hero-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-msm);
  color: #475569;
}

.MemberFeatures-hero-feature-icon {
  color: #3b82f6;
  font-size: 1.2rem;
  width: 20px;
  flex-shrink: 0;
}

.MemberFeatures-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.MemberFeatures-hero-image {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  margin-bottom: var(--spacing-xl);
}

.MemberFeatures-hero-img {
  width: 100%;
  height: auto;
  max-width: 500px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}

.MemberFeatures-features-section {
  padding: 0 10px;
}

/* ヒーローセクションのレスポンシブデザイン */
@media (max-width: 768px) {
  .MemberFeatures-hero {
    padding: 5px 0;
  }

  .MemberFeatures-hero-content {
    flex-direction: column;
    gap: 20px;
  }

  .MemberFeatures-hero-title {
    font-size: var(--font-xxl);
  }

  .MemberFeatures-hero-subtitle {
    font-size: var(--font-md);
    padding: var(--spacing-xxs);
  }

  .MemberFeatures-hero-description {
    font-size: var(--font-sm);
    margin-top: -0.8rem;
  }

  .MemberFeatures-hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .MemberFeatures-hero-features {
    margin-top: -0.5rem;
  }

  .MemberFeatures-hero-feature {
    font-size: var(--font-msm);
    padding: 0;
    margin-top: -0.8rem;
  }

  .MemberFeatures-hero-actions .MemberFeatures-btn--primary {
    max-width: 180px;
    padding: var(--spacing-md);
    justify-content: center;
    gap: var(--spacing-md);
  }

  .MemberFeatures-hero-actions .MemberFeatures-btn--secondary {
    max-width: 180px;
    padding: var(--spacing-md);
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .MemberFeatures-hero-title {
    font-size: var(--font-xl);
  }

  .MemberFeatures-hero-subtitle {
    font-size: var(--font-msm);
  }

  .MemberFeatures-hero-description {
    font-size: var(--font-sm);
  }
}

/* In-app表示用のヒーローセクション調整 */
.MemberFeatures-in-app .MemberFeatures-hero {
  padding: 40px 0;
  margin-bottom: 40px;
}

.MemberFeatures-in-app .MemberFeatures-hero-title {
  font-size: 2.5rem;
}

.MemberFeatures-analyst-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #ccc;        /* 枠線 */
  border-radius: 8px;            /* 角丸 */
  background-color: #fff;        /* 背景（必要なら透明も可） */
}

.MemberFeatures-analyst {
  display: flex;
  align-items: center;
  gap: 8px;
}

.MemberFeatures-analyst-img {
  width: 85px;
  height: 85px;
  border-radius: 15%;
  border: 1px solid #ccc;
  object-fit: cover;
}

.MemberFeatures-analyst-text {
  font-size: 0.85rem;
  line-height: 1.2;
}

/* Modal専用のスタイル - 接頭辞modal-をつけて名前空間を分離 */
  /* インラインフォームのコンテナ */
  .modal-inline-form-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    width: 100%;
  }
  
  .modal-inline-form-container.open {
    max-height: 800px; /* 高さを増やして複雑なモーダルも対応 */
    transition: max-height 0.5s ease-in;
  }
  
  .modal-inline-form-content {
    padding: 5px 0px 0px 5px;
    width: 98%;
    border-radius: var(--radius-md);
  }
  
  .modal-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 12px;
    padding: 0 4px;
  }
  
  .modal-form-header h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    line-height: 1.4;
  }
  
  .error-message {
    color: var(--color-danger);
    font-size: var(--font-xs);
    margin-left: 8px;
  }
  
  /* フォームグリッドレイアウト - 共通 */
  .modal-form-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  
  /* フォーム要素のベーススタイル */
  .modal-form-select,
  .modal-form-input,
  .modal-amount-display {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    height: 32px;
    box-sizing: border-box;
  }
  
  /* ラベルとフィールドのレイアウト */
  .modal-form-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 0.75rem;
    color: #4a5568;
    white-space: nowrap;
  }
  
  .modal-symbol-price-box {
    background-color: #ffffff;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-right: var(--spacing-md);
    margin-left: var(--spacing-md);
  }
  
  /* 表示のみの値 */
  .modal-info-value {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    height: 32px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
  }
  
  /* セレクトボックス専用スタイル */
  .modal-form-select {
    background-color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    -webkit-appearance: none;
            appearance: none;
    padding-right: 25px;
  }
  
  /* 数値入力フィールド */
  .modal-form-input {
    background-color: white;
  }
  
  /* 日付入力フィールド - 矢印アイコンなし */
  input[type="date"].modal-form-input {
    background-image: none;
  }
  
  /* 金額表示 */
  .modal-amount-display {
    background-color: #f0f0f0;
    font-weight: 500;
    display: flex;
    align-items: center;
  }
  
  /* ラジオボタンスタイル */
  .modal-sell-type-radio {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
  }
  
  .modal-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85rem;
  }
  
  .modal-radio-input {
    margin-right: 4px;
  }
  
  /* トランザクション履歴スタイル */
  .modal-transaction-table-container {
    width: 100%;
    overflow-x: auto;
  }
  
  .modal-transaction-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
  }
  
  .modal-thead-cell {
    background-color: var(--bg-header);
    padding: 8px;
    text-align: left;
    border: 1px solid var(--border-header);
    font-weight: var(--font-medium);
    font-size: var(--font-xs);
  }
  
  .modal-tcell {
    padding: 8px;
    border: 1px solid var(--border-primary);
    font-size: var(--font-xs);
  }
  
  .modal-amount-cell {
    text-align: right;
    font-weight: var(--font-medium);
  }
  
  .modal-table-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
  }
  
  /* モバイル用トランザクション表示 */
  .modal-transaction-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .modal-transaction-card {
    padding: 10px;
    background-color: white;
  }
  
  .modal-transaction-header {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
  }
  
  .modal-transaction-date,
  .modal-transaction-type {
    flex: 1 1;
  }
  
  .modal-transaction-details {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
  }
  
  .modal-transaction-item {
    flex: 1 1;
  }
  
  /* ボタンスタイル */
  .modal-submit-button,
  .modal-cancel-button,
  .modal-edit-button,
  .modal-delete-button,
  .modal-page-button {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    min-width: 80px;
    text-align: center;
    height: 32px;
  }
  
  .modal-submit-button {
    background-color: #4CAF50;
    color: white;
  }
  
  .modal-submit-button:hover {
    background-color: #45a049;
  }
  
  .modal-cancel-button {
    background-color: #e2e8f0;
    color: #4a5568;
  }
  
  .modal-cancel-button:hover {
    background-color: #cbd5e0;
  }
  
  .modal-edit-button {
    background-color: var(--color-info);
    color: white;
  }
  
  .modal-edit-button:hover {
    background-color: var(--color-primary-dark);
  }
  
  .modal-delete-button {
    background-color: var(--color-danger);
    color: white;
  }
  
  .modal-delete-button:hover {
    background-color: var(--color-danger-dark);
  }
  
  /* ページネーションスタイル */
  .modal-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
  }
  
  .modal-page-button {
    min-width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: #4a5568;
  }
  
  .modal-page-button.active {
    background-color: var(--color-primary);
    color: white;
  }
  
  /* 確認ダイアログ */
  .modal-confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .modal-confirm-content {
    background-color: white;
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-md);
    max-width: 90%;
    width: 400px;
  }
  
  .modal-confirm-message {
    margin-bottom: 16px;
    text-align: center;
    font-size: var(--font-sm);
  }
  
  .modal-confirm-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .modal-confirm-row {
    display: flex;
    gap: 10px;
  }
  
  .modal-confirm-item {
    flex: 1 1;
  }
  
  .modal-confirm-value {
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background-color: #f5f5f5;
    height: 32px;
    display: flex;
    align-items: center;
  }
  
  .profit-positive {
    color: var(--color-success);
  }
  
  .profit-negative {
    color: var(--color-danger);
  }
  
  /* モバイル表示用のスタイル */
  .modal-mobile-row {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .modal-inputs-second-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
    gap: 8px;
  }
  
  .modal-inputs-second-row > div {
    flex: 1 1;
  }
  
  .modal-buttons-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    margin-top: 12px;
  }
  
  .modal-buttons-row button {
    flex: 1 1;
  }
  
  .modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 8px;
    gap: 8px;
    width: 100%;
  }
  
  .modal-info-grid-two {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 8px;
    gap: 8px;
    width: 100%;
  }
  
  /* デスクトップ表示用のスタイル */
  .modal-desktop-inputs-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    align-items: flex-end;
  }
  
  .modal-desktop-cell {
    flex: 1 1;
    min-width: 0;
  }
  
  .modal-desktop-total-row {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    width: 100%;
    margin-top: 12px;
  }
  
  .modal-desktop-total-cell {
    flex: 1 1;
  }
  
  .modal-desktop-buttons-cell {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  
  /* 時間外取引の価格表示 */
  .modal-after-hours-price {
    font-size: var(--font-xxxs);
    color: var(--text-tertiary);
    margin-left: 4px;
  }


/* Base Styles */
.stock-list-container {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.portfolio-overview-container {
  width: 97.5%;
  padding: 0;
  margin-left: 0.1rem;
}

/* Table Containers */
.watchlist-table-container {
  width: 99%;
  overflow-x: auto;
  margin-top: var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  margin-left: 0.5rem;
}

.portfolio-table-container {
  width: 100%;
  overflow-x: auto;
  margin-top: var(--spacing-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
}

/* Tables */
.watchlist-table,
.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-primary);
}

/* Column Groups */
.watchlist-table colgroup {
  col.watchlist-col-delete { width: var(--col-delete); }
  col.watchlist-col-symbol { width: var(--col-symbol); }
  col.watchlist-col-price { width: var(--col-price); }
  col.watchlist-col-action { width: var(--col-action); }
}

.portfolio-table colgroup {
  col.portfolio-col-delete { width: var(--col-delete); }
  col.portfolio-col-symbol { width: var(--col-symbol); }
  col.portfolio-col-info { width: var(--col-info); }
  col.portfolio-col-pl { width: var(--col-pl); }
  col.portfolio-col-action { width: var(--col-action); }
}

.watchlist-header-row {
  background-color: var(--bg-header);
  border-bottom: 2px solid var(--border-header);
}

/* Header Cells */
.watchlist-header-cell,
.portfolio-header-cell {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 2px solid var(--border-header);
  /* border-right: 1px solid var(--border-header); */
  font-weight: var(--font-semibold);
  font-size: var(--font-msm);
  background-color: var(--bg-header);
  white-space: nowrap;
  color: var(--text-primary);
}

/* Sortable Headers */
.watchlist-header-cell.sortable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.watchlist-header-cell.sortable:hover {
  background-color: var(--bg-hover);
}

.watchlist-header-pl .header-labels {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

.watchlist-header-pl {
  text-align: center;
}

.watchlist-header-pl .header-labels {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

/* Table Rows */
.watchlist-row,
.portfolio-row {
  border-bottom: 1px solid var(--border-primary);
  transition: background-color var(--transition-fast);
}

.watchlist-row-even,
.portfolio-row-even {
  background-color: var(--bg-primary);
}

.watchlist-row-odd,
.portfolio-row-odd {
  background-color: var(--bg-secondary);
}

/* Table Cells */
.watchlist-cell {
  padding: var(--spacing-md);
  /* border-right: 1px solid var(--border-primary); */
  vertical-align: middle;
  text-align: center;
}

.portfolio-cell {
  border-right: 1px solid var(--border-primary);
  vertical-align: middle;
  text-align: center;
}

.portfolio-cell-info {
  border-right: 1px solid var(--border-primary);
  vertical-align: middle;
  text-align: center;
  padding-right: 0.9rem;
}

/* Symbol Cell */
.symbol-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え */
  min-width: 0;  /* Flexbox内でのtext-overflowを機能させるために必要 */
  overflow: hidden;
  padding: var(--spacing-md);
}

.portfolio-list-title {
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  color: #2d3748;
  margin-left: -1rem;
  margin-top: var(--margin-xxs);
  margin-bottom: var(--margin-xxs);
  padding-right: 10rem;
  padding-left: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--border-primary);
}

/* シンボル自体も長い場合に備えて */
.symbol {
  font-weight: var(--font-semibold);
  font-size: var(--font-msm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;  /* シンボルの最大幅 */
}

.company-name {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;  /* 会社名の最大幅 */
}

.watchlist-company-name {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95px;  /* 会社名の最大幅 */
}

/* ソートボタンのコンテナ全体 */
.sort-buttons-container {
  display: flex;
  flex-direction: row;  /* columnからrowに変更 */
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--spacing-sm);  /* ボタン間の間隔を調整 */
  white-space: nowrap;  /* 改行を防ぐ */
}

/* 個々のソートボタン */
.sort-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem;
  white-space: nowrap;  /* 改行を防ぐ */
  border-radius: var(--radius-sm);
  font-size: var(--font-msm);  /* または具体的な値: 0.875rem など */
}

/* Price Cell */
.price-container {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 中央揃え */
  gap: var(--spacing-sm);
}

.after-hour-price {
  font-weight: var(--font-semibold);
  font-size: var(--font-sm);
  white-space: nowrap;
}

.after-hour-price-change {
  font-size: var(--font-xs);
  white-space: nowrap;
}

.after-hour-price-change.positive {
  color: var(--text-success);
}

.after-hour-price-change.negative {
  color: var(--text-danger);
}

.current-price {
  font-weight: var(--font-semibold);
  font-size: var(--font-msm);
  white-space: nowrap;
}

.price-change {
  font-size: var(--font-sm);
  white-space: nowrap;
}

.price-change.positive {
  color: var(--text-success);
}

.price-change.negative {
  color: var(--text-danger);
}

.regular-price {
  display: flex;
  align-items: center;
  justify-content: center;  /* 中央揃え */
  gap: var(--spacing-sm);
  white-space: nowrap;
}

.portfolio-regular-price {
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;  /* 中央揃え */
  gap: var(--spacing-sm);
}

.after-hours-price {
  display: flex;
  align-items: center;
  justify-content: center;  /* 中央揃え */
  gap: var(--spacing-sm);
}

.portfolio-current-price {
  display: block;
  font-weight: var(--font-semibold);
  font-size: var(--font-sm);
  white-space: nowrap;
  padding-top: var(--spacing-lg);
}

.portfolio-price-change {
  display: block;
  font-size: var(--font-sm);
  white-space: nowrap;
  margin-bottom: var(--margin-md);
}

/* Action Buttons */
.action-buttons {
  display: flex;
  flex-direction: column;  /* 横並びから縦並びに変更 */
  justify-content: flex-start;
  gap: var(--spacing-sm);
  justify-content: center;  /* 縦方向の中央揃え */
  align-items: center;     /* 横方向の中央揃え */
  height: 100%;           /* 親要素の高さいっぱいに */
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs)
}

.delete-button {
  padding: var(--spacing-sm);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;  /* 水平方向のセンタリング */
}

.button-icon {
  font-size: var(--font-md);
  margin-left: var(--margin-md);
  margin-right: 0;
}

.portfolio-button-text,
.analysis-button-text {
  font-size: var(--font-sm);
  align-items: center;
  margin-left: 0.2rem;
  margin-right: 0.3rem;
  font-weight: var(--font-semibold);
}

.analysis-button,
.portfolio-button {
  width: 80%;
  min-width: 105px;
  height: 30px;
  margin: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-function-button);
  color: var(--text-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.portfolio-button.loading,
.analysis-button.loading {
  padding: 0;
  background-color: var(--color-secondary); /* セカンダリカラーに変更 */
  cursor: not-allowed; /* ローディング中はカーソルも変更 */
}

/* ホバー時のスタイルも追加 */
.portfolio-button:hover:not(loading),
.analysis-button:hover:not(.loading) {
  background-color: #e9ecef;
  color: #212529;
  border-color: #495057;
}

.portfolio-symbol-cell {
  text-align: left;
  padding: var(--spacing-xxs);
}

/* Status Badge */
/* ステータスバッジ */
.portfolio-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 5px;
  border: 1px solid var(--border-primary);
  font-size: var(--font-msm);
  font-weight: var(--font-semibold);
  min-width: 100px;
  min-height: 25px;
}

.portfolio-status-active {
  background-color: #dcfce7;
  color: #166534;
}

.portfolio-status-sold {
  background-color: #f1f5f9;
  color: #475569;
}

.status-icon {
  display: none;
  font-size: var(--font-lg);
}

.portfolio-info-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xxl);
  padding: var(--spacing-lg);
  width: 100%;
  gap: var(--spacing-md);
}

.portfolio-quantity,
.portfolio-wacps,
.portfolio-market-value {
  display: block;
  width: 100%;
  text-align: center;
  margin: var(--spacing-xs) 0;
  white-space: pre-wrap;
}

/* P/L Container */
.pl-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.pl-value {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
}

/* P/L Container */
.pl-value.positive {
  color: var(--color-success);
}

.pl-value.negative {
  color: var(--color-danger);
}

/* Action Buttons */
.portfolio-action-cell .action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
}

.portfolio-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100px;
}

.portfolio-action-button:hover {
  background-color: var(--bg-hover);
}

.portfolio-action-button .button-icon {
  font-size: var(--font-md);
}

/* マーケット情報セル */
.market-stats-cell {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-primary);
}

.market-stats-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
}

.market-cap,
.market-cap-label,
.market-cap-label2 {
  font-size: var(--font-sm);
  font-weight: var(--font-size-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}

.year-range {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.range-label,
.market-cap-label {
  font-weight: var(--font-medium);
}

.range-values {
  white-space: nowrap;
}

.subheader-content {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-xs);
}

/* AlphaFinder用のテーブルスタイル */
.alpha-table-container {
  width: 99.5%;
  overflow-x: auto;
  margin-top: var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
}

.alpha-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--bg-primary);
}

/* Column Groups */
.alpha-table colgroup {
  col.alpha-col-ranking { width: var(--col-ranking); }
  col.alpha-col-symbol { width: var(--col-symbol); }
  col.alpha-col-price { width: var(--col-price); }
  col.alpha-col-volume { width: var(--col-volume); }
  col.alpha-col-market { width: var(--col-market); }
  col.alpha-col-action { width: 280px; }
}

/* Alpha Finder Header */
.alpha-controls {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.alpha-selector {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  min-width: 120px;
}

.last-update {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  text-align: right;
}

.alpha-header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.watchlist-button {
  width: 80%;
  min-width: 105px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-success);
  color: white;
  border: 0.3px solid #e2e8f0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.watchlist-button:hover {
  background-color: var(--color-success-dark);
}

.watchlist-button-text {
  font-size: var(--font-sm);
  align-items: center;
  margin-left: 0.2rem;
  margin-right: 0.3rem;
  font-weight: var(--font-semibold);
}

/* ページネーション */
.pagination-container {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.pagination-button,
.pagination-number {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-number.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.pagination-button:hover,
.pagination-number:hover:not(.active) {
  background: var(--bg-hover);
}

.pagination-button:disabled {
  background: var(--bg-disabled);
  cursor: not-allowed;
}

/* 取引高表示用のコンテナ */
.volume-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.current-volume {
  font-weight: var(--font-semibold);
  font-size: var(--font-md);
  white-space: nowrap;
}

.volume-change {
  font-size: var(--font-xs);
  white-space: nowrap;
}

.volume-change.positive {
  color: var(--text-success);
}

.volume-change.negative {
  color: var(--text-danger);
}

/* セクター情報 */
.sector-cell {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.cell-separator {
  width: 100%;
  height: 1px;
  background-color: var(--border-primary);
  margin: var(--spacing-sm) 0;
}

.alpha-header-symol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.header-market-cap {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.alpha-header-line {
  width: 100%;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.alpha-header-line:last-child {
  margin-bottom: 0;
}

.alpha-header-line span {
  margin-right: var(--spacing-xs);
}

.market-cap-label2 {
  display: none;
}

/* Today's Performance Card */
.performance-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  width: 98.5%;
  margin-left: -0.3rem;
}

.today-performance-card {
  background: var(--bg-tertiary);
  border: 3px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
  width: 98%;
  margin-left: -0.2rem;
}

.today-main-metrics-today {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--spacing-lg);
  text-align:center;
  align-items: center;
  justify-content: center;
}

.today-main-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  text-align:center;
  align-items: center;
  justify-content: center;
}

.gain-loss-positive {
  color: #16a34a;
}

.gain-loss-negative {
  color: #dc2626;
}

.today-metric-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}

.today-metric-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.today-metric-value {
  font-size: var(--font-xxl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.today-metric-gain-loss {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

/* 損益値のスタイル */
.today-metric-gain-loss .today-metric-value {
  font-size: var(--font-xxl);
  font-weight: var(--font-bold);
}

.today-metric-gain-loss .today-metric-value.portfolio-gain-loss-positive {
  color: var(--color-success);
}

.today-metric-gain-loss .today-metric-value.portfolio-gain-loss-negative {
  color: var(--color-danger);
}

.today-metric-percentage {
  font-size: var(--font-xxl);
  font-weight: var(--font-semibold);
}

.today-metric-percentage.portfolio-gain-loss-positive {
  color: var(--color-success);
}

.today-metric-percentage.portfolio-gain-loss-negative {
  color: var(--color-danger);
}

.today-sub-metrics {
  grid-template-columns: 2fr 1fr 1fr;
  display: grid;
  justify-content: space-between;
}

.today-sub-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.today-sub-label {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xx);
  margin-right: var(--spacing-md);
  margin-left: var(--spacing-md);
}

.today-sub-value {
  font-size: var(--font-md);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  margin-right: var(--spacing-xl);
  margin-left: var(--spacing-xl);
}

/* Section Headers */
.portfolio-section-header {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin: var(--margin-lg) 0 var(--margin-sm) var(--margin-mx);
  padding-left: var(--spacing-sm);
}

/* Portfolio Selector & Refresh Button Area */

/* ウォッチリストヘッダー */
.watchlist-header {
  margin-bottom: 1rem;
}

.list-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxl);
}

.list-selector-portfolio {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxl);
}


.info-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.info-group-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border-radius: 5px;
  border: 1px solid var(--border-primary);
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  font-weight: var(--font-semibold);
}

.info-label,
.pl-label {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: var(--font-medium);
  border-bottom: 1px solid var(--border-primary);
}

.info-value {
  font-size: var(--font-md);
  font-weight: var(--font-medium);
}

.info-market-value {
  font-size: var(--font-md);
  font-weight: var(--font-medium);
}


.header-label-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-header);
  margin: 0.25rem 0;
  vertical-align: middle;
  text-align: center;
  align-items: center;
}

.symbol-label-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-header);
  text-align: center;
  margin-bottom: -0.4rem;
}

.portfolio-after-hours-label {
  display: block;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-primary);
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-md);
}

.portfolio-after-hour-price {
  display: block;
  font-weight: var(--font-medium);
  font-size: var(--font-md);
}

.portfolio-after-hour-price-change {
  display: block;
  font-size: var(--font-sm);
}

.portfolio-price-change.negative,
.portfolio-after-hour-price-change.negative {
  color: var(--text-danger);
}

.portfolio-price-change.positive,
.portfolio-after-hour-price-change.positive {
  color: var(--text-success);
}

.watchlist-control-content {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-xxl);
  width: 100%;
  margin-left: 0.6rem
}

.section-label {
  font-size: var(--font-msm);
  font-weight: var(--font-bold);
}

.watchlist-control-content .control-row {
  padding: var(--spacing-sm);
  margin-bottom: -0.8rem;
}

.portfolio-control-content .control-row {
  padding: var(--spacing-sm);
  margin-bottom: -0.8rem;
}

.portfolio-control-content {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-xxs);
  width: 100%;
}

.search-form .search-input-wrapper,
.list-selector {
  font-size: var(--font-md);
  margin-top: var(--margin-sm);
  margin-bottom: var(--margin-md);
}

.search-input::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
  font-weight: var(--font-medium);
  opacity: 0.7; 
  font-size: var(--font-msm);
}

/* サジェストリスト */
.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background-color: var(--bg-white);
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  margin-top: 0.25rem;
  z-index: 9999;
  list-style: none;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover, .suggestion-item.selected {
  background-color: var(--bg-header);
}

.suggestion-details {
  display: flex;
  flex-direction: column;
}

.exchange-label {
  font-size: var(--font-sm);
  color: #6c757d;
  white-space: nowrap;
}

  .sort-icon {
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;  /* 改行を防ぐ */
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);  /* または具体的な値: 0.875rem など */
  }
  
  .alpha-stacked-header .watchlist-sort-icon {
    position: absolute;
    right: 75px;
    top: 30%;
    transform: translateY(-50%);
  }

.alpha-header-change {
  font-weight: var(--font-normal);
}

/* Responsive Design */
@media screen and (max-width: 768px) {

  .watchlist-table colgroup {
    col.watchlist-col-delete { width: var(--col-delete-mini); }
    col.watchlist-col-symbol { width: var(--col-symbol-mini); }
    col.watchlist-col-price { width: var(--col-price-mini); }
    col.watchlist-col-action { width: var(--col-action-mini); }
  }

  .stock-list-container {
    width: 98%;
    margin-left: -1.5rem;
    padding: 0;
    box-sizing: border-box;
  }

  .portfolio-container {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-left: -0.45rem;
  }

  .portfolio-info-container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .sort-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem;
    white-space: nowrap;  /* 改行を防ぐ */
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);  /* または具体的な値: 0.875rem など */
  }
  
  .sort-icon {
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;  /* 改行を防ぐ */
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);  /* または具体的な値: 0.875rem など */
  }
  
  .alpha-stacked-header .watchlist-sort-icon {
    position: absolute;
    right: 15px;
    top: 30%;
    transform: translateY(-50%);
  }

  .list-selector {
    width: 99%;
    padding: 0;
    box-sizing: border-box;
  }

  .list-selector-portfolio {
    width: 97%;
    padding: 0;
    box-sizing: border-box;
    margin-left: -0.7rem;
  }

  .symbol {
    max-width: 100px;  /* シンボルの最大幅 */
    font-size: var(--font-msm);
  }

  .watchlist-header-cell,
  .portfolio-header-cell {
    padding: var(--spacing-sm);
    font-size: var(--font-sm);
  }

  .watchlist-header-pl .header-labels {
    font-size: var(--font-sm);
  }

  .current-price {
    font-size: var(--font-msm);
  }  
  
  .price-change {
    font-size: var(--font-xs);
  }

  .portfolio-action-button {
    width: 65px;
    height: 28px;
    font-size: var(--font-xs);
  }

  .portfolio-status-badge {
    font-size: var(--font-sm);
    min-width: 50px;
    align-items: center;
  }

  .range-label,
  .market-cap-label {
    display: none;
  }

  .market-cap-label2 {
    display:contents;
  }

  .analysis-button,
  .portfolio-button {
    width: 95%;
  }

  .portfolio-button-text,
  .analysis-button-text {
    font-size: var(--font-xs);
    align-items: center;
    margin-left: 0.2rem;
    margin-right: 0.3rem;
    font-weight: var(--font-semibold);
  }

  .button-icon-plus {
    font-size: var(--font-sm);
    margin-left: var(--margin-md);
    margin-right: var(--spacing-xx);
  }

  .alpha-table colgroup {
    col.alpha-col-ranking { width: 30px; }
    col.alpha-col-symbol { width: 150px; }
    col.alpha-col-price { width: 120px; }
    col.alpha-col-volume { width: 120px; }
    col.alpha-col-market { width: 100px; }
    col.alpha-col-action { width: 200px; }
  }

  .alpha-controls {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .alpha-selector {
    width: 100%;
  }

  .watchlist-button {
    min-width: 85px;
  }

  .watchlist-button-text {
    font-size: var(--font-xs);
  }

  .volume-container {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .current-volume {
    font-size: var(--font-sm);
  }

  .volume-change {
    font-size: var(--font-xxs);
  }

  .pagination-button,
  .pagination-number {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-sm);
  }

  .after-hour-price {
    font-weight: var(--font-semibold);
    font-size: var(--font-sm);
    white-space: nowrap;
  }
  
  .after-hour-price-change {
    font-size: var(--font-xs);
    white-space: nowrap;
  }

  .pl-combined-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .pl-section {
    gap: 0.125rem;
  }

  .pl-value {
    font-size: var(--font-msm);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
  }
  
  .pl-percentage {
    font-size: var(--font-xs);
    display: block;
    margin-left: 0;
  }

  .info-group {
    width: 100%;
    text-align: center;
    margin-bottom: 0.25rem;
  }

  .info-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-primary);
  }
  
  .info-value {
    font-size: var(--font-msm);
  }

  .info-market-value {
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
  }

}

@supports (-webkit-touch-callout: none) {
  .watchlist-table colgroup {
    col.watchlist-col-delete { width: var(--col-delete-mini); }
    col.watchlist-col-symbol { width: var(--col-symbol-mini); }
    col.watchlist-col-price { width: var(--col-price-mini); }
    col.watchlist-col-action { width: var(--col-action-mini); }
  }

  /* Table Cells */
  .watchlist-cell {
    padding: var(--spacing-sm);
    /* border-right: 1px solid var(--border-primary); */
    vertical-align: middle;
    text-align: center;
  }

  .portfolio-cell {
    border-right: 1px solid var(--border-primary);
    vertical-align: middle;
    text-align: center;
  }

  .stock-list-container {
    width: 96.5%;
    padding: 0;
    box-sizing: border-box;
  }

  .portfolio-container {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-left: -0.5rem;
  }

  .list-selector {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  .portfolio-list-title {
    font-size: var(--font-md);
    font-weight: var(--font-semibold);
    color: #2d3748;
    }

  .watchlist-header-cell,
  .portfolio-header-cell {
    padding: var(--spacing-sm);
    font-size: var(--font-sm);
  }

  .subheader-content {
    font-size: var(--font-xxs);
  }

  .delete-button {
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;  /* 水平方向のセンタリング */
  }

  .action-buttons {
    padding: var(--spacing-xx);
  }

  .analysis-button,
  .portfolio-button {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxs);
    margin: 0.2rem 0;
  }

  .watchlist-company-name {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;  /* 会社名の最大幅 */
  }

  .range-label,
  .market-cap-label {
    display: none;
  }

  .market-cap-label2 {
    display:contents;
  }

  .portfolio-button-text,
  .analysis-button-text {
    font-size: var(--font-xs);
    align-items: center;
    margin-right: var(--spacing-sm);
    margin-left: var(--spacing-xs);
    font-weight: var(--font-semibold);

  }

  .button-icon-plus {
    font-size: var(--font-sm);
    margin-left: 0;
    margin-right: var(--spacing-xx);
  }

  .watchlist-company-name {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75px;  /* 会社名の最大幅 */
  }

  .alpha-header-companyname {
    font-weight: var(--font-normal);
    font-size: var(--font-xs);
  }

  .alpha-table colgroup {
    col.alpha-col-ranking { width: 15px; }
    col.alpha-col-symbol { width: 120px; }
    col.alpha-col-price { width: 100px; }
    col.alpha-col-volume { width: 100px; }
    col.alpha-col-market { width: 80px; }
    col.alpha-col-action { width: 180px; }
  }
  .volume-container {
    gap: var(--spacing-xx);
  }

  .current-volume {
    font-size: var(--font-xs);
  }

  .volume-change {
    font-size: var(--font-xxs);
  }

  .after-hour-price {
    font-weight: var(--font-semibold);
    font-size: var(--font-sm);
    white-space: nowrap;
  }
  
  .after-hour-price-change {
    font-size: var(--font-xxs);
    white-space: nowrap;
  }

  .watchlist-control-content {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xxl);
    width: 100%;
    margin-left: 0.2rem
  }
  
  .section-label {
    font-size: var(--font-msm);
    font-weight: var(--font-bold);
  }
  
  .watchlist-control-content .control-row {
    padding: var(--spacing-sm);
    margin-bottom: -0.8rem;
  }

  .portfolio-section-header {
    font-size: var(--font-md);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin: var(--margin-lg) 0 var(--margin-sm) var(--margin-mx);
    padding-left: var(--spacing-sm);
  }
  
}



/* グラフとチャート関連のスタイル */
.portfolio-list-dropdown-graph {
  display: block;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: var(--font-msm);
  font-weight: var(--font-normal);
  /* line-height: 1.5; */
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.portfolio-add-to-list-dropdown {
  width: 100%;
  display: block;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: var(--font-msm);
  font-weight: var(--font-normal);
  /* line-height: 1.5; */
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.portfolio-graph-container {
  height: 400px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 300px;
  padding-top: var(--spacing-md);
}

.profit-loss-tooltip {
  background-color: white;
  border: 1px solid #ccc;
  padding: 8px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  font-size: var(--font-sm);
}

.profit-loss-tooltip .tooltip-title {
  font-weight: var(--font-semibold);
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  font-size: var(--font-sm);
}

.profit-loss-tooltip .tooltip-item {
  margin: 3px 0;
  font-size: var(--font-sm);
}

.profit-loss-tooltip .tooltip-item.positive {
  color: #4caf50;
}

.profit-loss-tooltip .tooltip-item.negative {
  color: #f44336;
}

/* Portfolio Pie Chart Styles */
.pie-chart-tooltip {
  background-color: white;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: var(--font-sm);
}

.tooltip-symbol {
  font-weight: var(--font-semibold);
  margin-bottom: 4px;
}

.tooltip-company {
  color: #666;
  font-size: var(--font-xs);
  margin-bottom: 4px;
}

.tooltip-value,
.tooltip-percentage {
  font-size: var(--font-sm);
}

/* Chart Sections Layout */
.chart-sections-container {
  display: flex;
  flex-direction: column; /* 常に縦方向に配置 */
  gap: 1rem; /* 間隔を少し縮める */
  padding: var(--spacing-md); /* パディングも調整 */
}

.chart-section {
  width: 100%; /* 幅を100%に設定 */
  display: flex;
  flex-direction: column;
}

.chart-content {
  display: flex;
  flex-direction: column; /* 内部も縦方向に配置 */
  gap: var(--spacing-md);
  width: 100%;
}

.pie-chart-container {
  width: 100%; /* 幅を100%に設定 */
  display: flex;
  justify-content: center;
}

.legend-container {
  width: 100%; /* 幅を100%に設定 */
  margin: 0 auto; /* 中央揃え */
  padding-top: 0.5rem;
}

/* Legend Styles */
.allocation-legend {
  background-color: var(--bg-header);
  border-radius: 4px;
  padding: var(--spacing-xxl);
}

.legend-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  margin-bottom: 0.75rem;
  color: #2d3748;
  margin-top: 0;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--font-sm);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-msm);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-symbol {
  min-width: 60px;
  font-weight: var(--font-normal);
}

.legend-value {
  min-width: 80px;
  text-align: right;
}

.legend-percentage {
  min-width: 70px;
  text-align: right;
  color: #666;
}

/* モバイル対応 */
@media screen and (max-width: 1200px) {
  .chart-sections-container {
    flex-direction: column;
    gap: 2rem;
    padding: 0.75rem;
  }

  .chart-section {
    width: 100%;
  }

  .chart-content {
    flex-direction: row;
    gap: 0.5rem;
  }

  .pie-chart-container {
    width: 45%;
    min-width: 120px;
  }

  .legend-title {
    font-size: var(--font-msm);
    margin-bottom: 0.25rem;
    margin-top: -0.25rem;
  }

  .legend-items {
    gap: 0.2rem;
    font-size: var(--font-xxs);
  }

  .legend-item {
    font-size: var(--font-sm);
    gap: 0.2rem;
  }

  .legend-color {
    width: 8px;
    height: 8px;
    min-width: 8px;
  }

  .legend-symbol {
    min-width: 40px;
  }

  .legend-value {
    min-width: 55px;
  }

  .legend-percentage {
    min-width: 42px;
  }

  .legend-container {
    flex: 1 1;
    min-width: 200px;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .portfolio-graph-container {
    height: 300px;
  }

  .pl-value {
    font-size: var(--font-msm);
    font-weight: var(--font-semibold);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
  }

  .regular-price {
    display: flex;
    gap: 0.25rem;
  }
  
  .portfolio-regular-price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .portfolio-current-price {
    display: block;
    font-weight: var(--font-semibold);
    font-size: var(--font-msm);
    line-height: 1.2;
  }
  
  .portfolio-price-change,
  .portfolio-price-percentage {
    display: block;
    font-size: var(--font-xs);
    line-height: 1.2;
  }
  
  .portfolio-after-hours-price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }
  
  .portfolio-after-hours-label {
    display: block;
    text-align: center;
  }

  .portfolio-after-hours-label {
    display: block;
    border-top: 1px solid var(--border-primary);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-md);
  }
  
  .portfolio-after-hour-price {
    display: block;
    font-weight: var(--font-medium);
    font-size: var(--font-xs);
  }
  
  .portfolio-after-hour-price-change {
    display: block;
    font-size: var(--font-xs);
  }
  
  .price-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .company-name {
    font-size: var(--font-xxs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 
  .section-label {
    font-size: var(--font-sm);
    font-weight: var(--font-bold);
  }

  .portfolio-section-header {
    font-size: var(--font-md);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin: var(--margin-lg) 0 var(--margin-sm) var(--margin-mx);
    padding-left: var(--spacing-sm);
  }
}

@media screen and (min-width: 769px) {

  .portfolio-container {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-left: -0.5rem;
  }

  .portfolio-table-container {
    width: 99.5%;
    overflow-x: auto;
    margin-top: var(--spacing-sm);
    margin-left: 0.5rem;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
  }

  .performance-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    width: 98%;
    margin-left: 0.8rem;
  }
  
  .today-performance-card {
    background: var(--bg-tertiary);
    border: 3px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
    margin-left: 0.8rem;
    width: 98%;
  }
  
  .portfolio-section-header {
    font-size: var(--font-md);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin: var(--margin-lg) 0 var(--margin-sm) var(--margin-mx);
    margin-left: 1rem;
  }

  .portfolio-list-title {
    padding-right: 10rem;
    margin-left: -0.2rem
  }

  .list-selector-portfolio {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-left:0.9rem;
  }

  .list-selector {
    width: 99%;
  }

  .watchlist-control-content {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xxl);
    width: 96.5%;
  }

  .portfolio-control-content {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xxs);
    width: 98.5%;
    margin-left: 0.3rem;
  }
  
  .watchlist-table-container {
    margin-left: 1rem;
    width: 97%;
  }
  
  .portfolio-info-container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%
  }

  .section-label {
    font-size: var(--font-sm);
    font-weight: var(--font-bold);
  }

}

@media screen and (max-width: 768px) {

  .portfolio-overview-container {
    width: 97%;
    padding: 0;
    margin-left: 0.5rem;
  }

  
  .performance-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    width: 92.5%;
    margin-left: -0.7rem;
  }
  
  .today-performance-card {
    background: var(--bg-tertiary);
    border: 3px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
    width: 92.5%;
    margin-left: -0.7rem;
  }

  .portfolio-list-title {
      font-size: var(--font-md);
      font-weight: var(--font-semibold);
      color: #2d3748;
      margin-left: var(--margin-mx);
      padding-right: 10rem
  }

  .watchlist-table-container {
    margin-left: 0rem;
  }

  .watchlist-control-content {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xxl);
    width: 96.2%;
    margin-left: 0rem;
  }

  .portfolio-control-content {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xxs);
    width: 93%;
    margin-left: -0.5rem
  }

  .section-label {
    font-size: var(--font-sm);
    font-weight: var(--font-bold);
  }

  .year-range {
    font-size: var(--font-xs);
  }

  .market-cap,
  .market-cap-label,
  .market-cap-label2 {
    font-size: var(--font-xs);
    font-weight: var(--font-size-medium);
    color: var(--text-secondary);
    white-space: nowrap;
  }

}  


/* ソートセレクタのスタイル */
.list-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
}

.sort-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1.5rem;
}

.sort-container label {
  font-size: 0.85rem;
  color: #64748b;
}

.watchlist-sort-container {
  display: flex;
  align-items:center;
  gap: 0.5rem;
}

.watchlist-sort-container label {
  font-size: 0.85rem;
  color: #64748b;
}

.sort-select {
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-msm);
  font-weight: var(--font-normal);
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  margin-right: -1.5rem;
}

.watchlist-sort-select {
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-msm);
  font-weight: var(--font-normal);
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* レスポンシブレイアウト用のコンテナ */
.portfolio-responsive-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 左カラム（チャートとグラフ） */
.portfolio-left-column {
  width: 98%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-left: 1rem;

}

/* 右カラム（ポジションリスト） */
.portfolio-right-column {
  width: 98%;
  display: flex;
  flex-direction: column;
  margin-right: 1.5rem;
}

/* 大画面の場合のレイアウト変更 */
@media screen and (min-width: 1200px) {
  .portfolio-responsive-layout {
    flex-direction: row;
    gap: var(--spacing-xxl);
  }
  
  .portfolio-left-column {
    width: 40%; /* 左カラムの幅 */
    min-width: 400px; /* 最小幅を設定 */
  }
  
  .portfolio-right-column {
    width: 60%; /* 右カラムの幅 */
    flex-grow: 1;
    margin-left: 2rem
  }
  
  /* ソートセレクタの位置調整 */
  .list-header-container {
    width: 100%;
  }
  
  /* テーブルコンテナの調整 */
  .portfolio-table-container {
    width: 100%;
    margin-left: 0;
  }
  
  /* OverviewとPieChartの間隔調整 */
  .portfolio-left-column > * {
    margin-bottom: var(--spacing-xxl);
  }
  
  /* Position Listのタイトル調整 */
  .portfolio-list-title {
    margin-left: 0;
    padding-left: 0;
  }
}


/* モバイル画面の調整（既存の動作を維持） */
@media screen and (max-width: 768px) {
  .portfolio-responsive-layout {
    flex-direction: column;
  }
  
  .portfolio-left-column,
  .portfolio-right-column {
    width: 97%;
    margin-left: -0.5rem;
  }
  
  /* 他のモバイル向けスタイルはそのまま */
}
/* AlphaFinder Styles */
/* Base container */
.alpha-finder-container {
  display: flex;
  flex-direction: column;
  width: 99%;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg);
  background-color: var(--bg-primary);
}

/* Search Controls */
.search-control-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xl);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 2px solid var(--border-primary);
  margin-top: -0.5rem;
  width: 98%;
}

.search-form {
  width: 100%;
}

.alpha-search-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: -0.5rem;
  margin-top: -0.4rem;
}

.fa-icon {
  position: absolute;
  left: var(--spacing-lg);
  color: var(--text-tertiary);
  font-size: var(--font-md);
}

.search-input {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-lg) * 3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-secondary);
  font-size: var(--font-msm);
  color: var(--text-primary);
  background-color: var(--bg-white);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.add-button {
  font-size: var(--font-msm);
}

/* 検索フォーム全体の文字サイズ */
.search-form-filter {
  font-size: var(--font-msm);
}

.search-button {
  position: absolute;
  right: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin-right: var(--spacing-xl);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: var(--text-white);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.search-button:hover {
  background-color: var(--color-primary-dark);
}

.search-button:disabled {
  background-color: var(--bg-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Suggestions List */
.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: var(--spacing-xs);
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-secondary);
  box-shadow: var(--shadow-md);
  max-height: 300px;
  overflow-y: auto;
  padding: var(--spacing-sm);
  list-style: none;
}

.suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.suggestion-item:hover, .suggestion-item.selected {
  background-color: var(--bg-hover);
}

.suggestion-details {
  display: flex;
  flex-direction: column;
}

.alpha-company-name {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin-top: var(--spacing-xx);
}

.exchange-label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  background-color: var(--bg-tertiary);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
}

.alpha-stacked-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.alpha-stacked-header span {
  display: block;
  line-height: 1.2;
}

.alpha-stacked-header .alpha-sort-icon {
  position: absolute;
  right: 8px;
  top: 85%;
  transform: translateY(-50%);
}

/* ソート不可のヘッダー */
.non-sortable-header {
  cursor: default;
}

.non-sortable-header:hover {
  background-color: inherit;
}

/* Company Profile */
.alpha-finder-profile-section {
  width: 100%;
}

.alpha-finder-profile-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: var(--spacing-lg);
}

.alpha-company-name {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0;
}

.alpha-company-name-small {
  font-size: var(--font-sm);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
  margin: 0;
}

.company-badges {
  display: flex;
  gap: var(--spacing-md);
}

.company-badge {
  font-size: var(--font-xxs);
  font-weight: var(--font-medium);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  color: var(--text-white);
}

.company-badge.sp500 {
  background-color: var(--color-primary);
}

.company-badge.nasdaq {
  background-color: var(--color-success);
}

.company-badge.dow {
  background-color: var(--color-warning);
}

.profile-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.profile-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

.profile-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.profile-icon {
  color: var(--color-primary);
  font-size: var(--font-lg);
  margin-top: var(--spacing-xs);
}

.profile-content {
  display: flex;
  flex-direction: column;
}

.profile-label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--spacing-xs);
}

.profile-value {
  font-size: var(--font-sm);
  color: var(--text-primary);
}

.profile-link {
  font-size: var(--font-sm);
  color: var(--color-primary);
  text-decoration: none;
}

.profile-link:hover {
  text-decoration: underline;
}

.profile-description {
  margin-top: var(--spacing-lg);
}

.profile-description h3 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.profile-description p {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.profile-error-message {
  color: var(--color-danger);
  font-size: var(--font-xs);
  margin-top: var(--spacing-md);
}

.company-profile-loading,
.company-profile-not-found,
.stocks-loading,
.no-stocks-found {
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
}

/* Filter and Stock List Section */
.alpha-finder-content-container {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 3fr;
  grid-gap: var(--spacing-xl);
  gap: var(--spacing-xl);
}

.filter-container {
  height: -webkit-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: var(--spacing-xl);
}

.filter-section {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  overflow: hidden;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
}

.filter-header h3 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.filter-options {
  display: flex;
  flex-direction: column;
}

.af-filter-group {
  border-bottom: 1px solid var(--border-primary);
}

.af-filter-group:last-child {
  border-bottom: none;
}

.alpha-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.alpha-search-header:hover {
  background-color: var(--bg-hover);
}

.alpha-search-header span {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.filter-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.filter-group-header:hover {
  background-color: var(--bg-hover);
}

.filter-group-header span {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.toggle-filter-box {
  margin-top: -1rem;
}

.chevron {
  transition: transform var(--transition-fast);
}

.chevron.open {
  transform: rotate(180deg);
}

.filter-group-content {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.period-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.period-option {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-xs);
  background-color: var(--bg-white);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.period-option:hover {
  background-color: var(--bg-hover);
}

.period-option.active {
  background-color: var(--color-primary);
  color: var(--text-white);
  border-color: var(--color-primary);
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.filter-checkbox input {
  display: none;
}

.checkbox-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xs);
  background-color: var(--bg-white);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.filter-checkbox input:checked + .checkbox-label {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-icon {
  color: var(--text-white);
  font-size: var(--font-xxs);
}

/* Stock List */
.alpha-stock-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.stock-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
}

.stock-list-header h3 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.stock-count {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}

.stock-table-container {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  overflow: hidden;
  overflow-x: auto;
}

.stock-table {
  width: 100%;
  border-collapse: collapse;
}

.stock-table colgroup .col-symbol {
  width: var(--col-symbol);
}

.stock-table colgroup .col-market {
  width: var(--col-market);
}

.stock-table colgroup .col-sector {
  width: var(--col-sector);
}

.stock-table colgroup .col-industry {
  width: var(--col-market);
}

.stock-table colgroup .col-index {
  width: var(--col-market);
}

.stock-table thead th {
  padding: var(--spacing-lg);
  text-align: left;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-header);
}

.stock-table .sortable-header {
  cursor: pointer;
}

.header-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.alpha-sort-icon {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}


.stock-table tbody tr {
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.stock-table tbody tr:hover {
  background-color: var(--bg-hover);
}

.stock-row-even {
  background-color: var(--bg-white);
}

.stock-row-odd {
  background-color: var(--bg-tertiary);
}

.stock-table td {
  padding: var(--spacing-lg);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.alpha-symbol-cell {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.alpha-symbol-container {
  display: flex;
  flex-direction: column;
}

.alpha-symbol {
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.index-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.index-badge {
  font-size: var(--font-xxs);
  font-weight: var(--font-medium);
  padding: var(--spacing-sm) var(--spacing-msm);
  border-radius: var(--radius-xs);
  color: var(--text-white);
}

.index-badge.sp500 {
  background-color: var(--color-success);
}

.index-badge.nasdaq {
  background-color: var(--color-primary);
}

.index-badge.dow {
  background-color: var(--bg-black);
}

.index-badge.reit {
  background-color: #ff914c;
}
.advanced-metrics-group {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px dashed var(--border-primary);
}

.advanced-metrics-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.metrics-group-label {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  margin-top: 0;
}

.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  padding: 10px;
  gap: 10px;
}

.pagination-button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background-color: #f8f9fa;
  cursor: pointer;
  border-radius: 4px;
}

.pagination-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-button:hover:not(:disabled) {
  background-color: #e9ecef;
}

.pagination-info {
  padding: 5px 10px;
  font-weight: bold;
}


.metrics-category {
  font-size: var(--font-sm);
}

.company-description-header {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold)
}

/* テーブルヘッダーの中央揃え */
.stock-table thead th {
  text-align: center;
}

/* ヘッダー内の内容も中央揃え */
.stock-table .header-content {
  justify-content: center;
}

/* テーブル本体の各セルも中央揃え */
.stock-table tbody td {
  text-align: center;
}

/* symbolセルは特別な構造になっているため個別に対応 */
.symbol-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 特定のセルのデータも中央揃え */
.alpha-market-cap-cell,
.alpha-sector-cell,
.alpha-industry-cell {
  text-align: center;
}

/* インデックスバッジのコンテナも中央揃え */
.index-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* AlphaFinderProfileModal スタイル追加 */

/* モーダル全体のスタイル */
.company-profile-modal {
  padding: var(--spacing-md);
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: var(--spacing-md) 0;
  width: 100%;
}

/* グリッドレイアウト */
.profile-tables-grid {
  display: grid;
  grid-template-columns: 3fr 2fr; /* 左側を3、右側を2の比率に */
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

/* 左側の指標テーブルコンテナ */
.metrics-tables {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 指標テーブルの共通スタイル */
.profile-metric-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-primary);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-sm);
}

.profile-metric-table th {
  background-color: var(--bg-header);
  padding: var(--spacing-msm);
  text-align: center;
  font-weight: var(--font-semibold);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
}

.profile-metric-table th[colspan] {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.profile-metric-table td {
  padding: var(--spacing-sm);
  text-align: center;
  border: 1px solid var(--border-primary);
}

/* 右側の会社情報セクション */
.company-info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.company-description {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
}

.company-description h4 {
  font-size: var(--font-md);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.company-description p {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  text-align: left;
}

.company-website a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--text-white);
  text-decoration: none;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  transition: background-color var(--transition-fast);
}

.company-website a:hover {
  background-color: var(--color-primary-dark);
}

/* ローディング表示 */
.company-profile-modal.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* モーダル専用のスタイル強制 */
.company-profile-modal {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: visible !important;
}

/* モーダルコンテンツの幅を強制 */
.modal-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  margin-top: 0 !important;
}

.modal-content-analytics {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 2px !important;
  margin-top: -0.5rem !important;
}

/* テーブルグリッドのフルワイドス化 */
.profile-tables-grid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ブラウザの互換性問題に対処するスタイル */
html body .company-profile-modal {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

html body .profile-modal-cell {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* テーブルセルの幅を上書き */
html body .stock-table colgroup col {
  width: auto !important;
}

/* プロファイルメトリクステーブルの幅を調整 */
.profile-metric-table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 8px;
  box-sizing: border-box;
  table-layout: fixed;
}

/* 会社情報セクションも幅を最大化 */
.company-info-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

}
/* テーブルセルとモーダルの幅を最大化 */
.profile-modal-cell {
  width: 100% !important;
  max-width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* モーダルラッパーの幅を最大化 */
.profile-modal-wrapper {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* モーダル自体の幅を最大化 */
.company-profile-modal {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* テーブル行とセルの幅を調整 */
.profile-modal-row {
  width: 100% !important;
  display: table-row !important;
}

/* テーブルのレイアウト設定 */
.stock-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* テーブルのコンテナも幅を最大化 */
.stock-table-container,
.mobile-table-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}/* Mobile table styles */
.mobile-table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  box-sizing: border-box;
  padding: 0;
}

.mobile-stock-table {
  table-layout: fixed; /* Fixed table layout for better control */
  width: 100%;
  font-size: var(--font-sm);
}

/* Column width distribution for mobile */
.mobile-stock-table colgroup .mobile-col-symbol {
  width: 25%; /* Symbol + index badges */
}

.mobile-stock-table colgroup .mobile-col-info {
  width: 40%; /* Company name + market cap */
}

.mobile-stock-table colgroup .mobile-col-sector {
  width: 35%; /* Sector + industry */
}

/* Mobile cell and content styling */
.mobile-symbol-container,
.mobile-info-container,
.mobile-sector-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}

.mobile-symbol {
  font-size: var(--font-msm);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.mobile-company-name {
  font-size: var(--font-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-market-cap {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.mobile-sector,
.mobile-industry {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-index-badges {
  /* display: flex; */
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xxs);
}

/* Smaller index badges for mobile */
.mobile-index-badges .index-badge {
  font-size: var(--font-xxxs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
  color: var(--text-white);
  display: inline-block;
  text-align: center;
  min-width: 30px; /* Standardize width */
  height: auto; /* Allow height to adjust for word wrap */
  line-height: 12px; /* Vertically center text */
  white-space: normal; /* Allow text to wrap */
  margin: 2px;
  word-break: break-word;
}

/* クリアボタンのスタイル */
.clear-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* アイコンとテキストの間隔 */
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  background-color: var(--bg-white);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-filter-button:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* アイコンのスタイル */
.clear-filter-button .fa-icon {
  font-size: var(--font-sm); /* アイコンサイズ */
  color: inherit; /* ボタンのカラーを継承 */
}

/* テーブルヘッダーの中央揃え */
.stock-table thead th {
  text-align: center;
}

/* ヘッダー内の内容も中央揃え */
.stock-table .header-content {
  justify-content: center;
}

/* テーブル本体の各セルも中央揃え */
.stock-table tbody td {
  text-align: center;
}

/* symbolセルは特別な構造になっているため個別に対応 */
.symbol-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 特定のセルのデータも中央揃え */
.alpha-market-cap-cell,
.alpha-sector-cell,
.alpha-industry-cell {
  text-align: center;
}

/* インデックスバッジのコンテナも中央揃え */
.index-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* TECHNICAL CHART用のスタイル - 枠を簡素化 */
.compact-chart-container {
  width: 100%;
  max-width: 100%;
  background-color: var(--bg-white);
  /* 外枠を削除してスペースを節約 */
}

/* チャートヘッダー（期間選択とチャートタイプを横並び） - パディングを削減 */
.alpha-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) 0; /* 上下パディングを削減 */
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--bg-secondary);
  gap: var(--spacing-md);
}

/* 期間選択エリア（枠付き） - パディングを削減 */
.chart-period-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* ギャップを削減 */
  padding: var(--spacing-xs) var(--spacing-sm); /* パディングを削減 */
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-white);
}

.chart-period-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs); /* ギャップを削減 */
  font-size: var(--font-xs); /* フォントサイズを小さく */
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.chart-period-selector {
  display: flex;
  gap: 2px; /* ボタン間のギャップを最小化 */
}

/* 期間選択ボタン - サイズを削減 */
.chart-period-button {
  padding: 2px 6px; /* パディングを削減 */
  border: 1px solid var(--border-secondary);
  background-color: var(--bg-white);
  color: var(--text-secondary);
  font-size: var(--font-xs); /* フォントサイズを小さく */
  font-weight: var(--font-medium);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 24px; /* 最小幅を削減 */
  text-align: center;
}

.chart-period-button:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.chart-period-button.active {
  background-color: var(--color-primary);
  color: var(--text-white);
  border-color: var(--color-primary);
}

/* チャートタイプ選択ボタン - サイズを削減 */
.chart-type-selector {
  display: flex;
  gap: 2px; /* ギャップを最小化 */
}

.chart-type-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs); /* ギャップを削減 */
  padding: 2px 6px; /* パディングを削減 */
  border: 1px solid var(--border-secondary);
  background-color: var(--bg-white);
  color: var(--text-secondary);
  font-size: var(--font-xs); /* フォントサイズを小さく */
  font-weight: var(--font-medium);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chart-type-button:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.chart-type-button.active {
  background-color: var(--color-primary);
  color: var(--text-white);
  border-color: var(--color-primary);
}

/* チャート統計テーブル（profile-metric-tableスタイルに合わせる） - パディングを削減 */
.chart-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-sm);
  margin-top: var(--spacing-xs); /* マージンを削減 */
}

.chart-stats-table th {
  background-color: var(--bg-header);
  padding: var(--spacing-xs); /* パディングを削減 */
  text-align: center;
  font-weight: var(--font-semibold);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
  font-size: var(--font-sm);
}

.chart-stats-table th[colspan] {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.chart-stats-table td {
  padding: var(--spacing-xs); /* パディングを削減 */
  text-align: center;
  border: 1px solid var(--border-primary);
  font-size: var(--font-sm);
}

/* チャートコンテナ - パディングを削減 */
.chart-content {
  padding: var(--spacing-xs); /* パディングを削減 */
  background-color: var(--bg-white);
}

/* エラー・ローディング表示 */
.chart-loading, .chart-error, .chart-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  text-align: center;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
}

.chart-error {
  color: var(--color-danger);
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}

.selected-filters-container {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--spacing-xxl);
  padding: 0;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
}

.selected-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--bg-secondary);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-primary);
}

.selected-filters-header h4 {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-white);
}

/* チャートの期間選択ボタンと同じスタイルのクリアボタン */
.clear-all-filters-button {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  margin-left: var(--spacing-md);
  border: 1px solid var(--border-secondary);
  background-color: var(--bg-white);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 24px;
  text-align: center;
}

.clear-all-filters-button:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.selected-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  padding: var(--spacing-xs);
  background-color: var(--bg-white);
  align-items: center;
}

/* チャートの期間選択ボタンと全く同じスタイルのフィルタータグ */
.selected-filter-tag {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-xs);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
  /* 重要: テキスト省略を無効化 */
  white-space: nowrap;
  overflow: visible;
  text-overflow: initial;
  max-width: none;
  width: auto;
  /* フレックスレイアウトでのサイズ調整 */
  flex-shrink: 0;
  min-width: 0;
}

.selected-filter-tag:hover {
  box-shadow: var(--shadow-md);
}

.filter-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: initial;
  max-width: none;
  width: auto;
  flex-shrink: 0;
  display: inline-block;
  font-weight: var(--font-medium);
}

/* チャートボタンと同じスタイルの削除ボタン（角丸正方形） */
.remove-filter-button {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  cursor: pointer;
  padding: 0;
  margin-left: var(--spacing-lg);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.remove-filter-button:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  transform: scale(1.1);
}


/* Suggestions リストのオーバーレイスタイル */
.filter-suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Suggestion アイテムのスタイル */
.filter-suggestions-list .suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
  font-size: var(--font-sm); /* Suggestion全体の基本文字サイズ */
}

/* Suggestion内のシンボル（太字部分）のスタイル */
.filter-suggestions-list .suggestion-item strong {
  font-size: var(--font-sm); /* シンボルもSuggestionエリア基準 */
  font-weight: bold;
}

/* 最後のアイテムのボーダー除去 */
.filter-suggestions-list .suggestion-item:last-child {
  border-bottom: none;
}

/* ホバー時とselected時のスタイル */
.filter-suggestions-list .suggestion-item:hover,
.filter-suggestions-list .suggestion-item.selected {
  background-color: #f0f0f0;
}

/* Exchange label のスタイル */
.filter-suggestions-list .suggestion-item .exchange-label {
  color: #999;
  font-size: var(--font-xxs); /* 取引所ラベル */
}

.alpha-search-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-left: var(--spacing-xs);
}

.logic-explanation {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-bottom: 0;
  margin-left: var(--spacing-md);
  font-weight: var(--font-medium);
}

.logic-operator {
  background: var(--color-primary);
  color: var(--text-white);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-xs);
  font-size: var(--font-xxs);
  font-weight: var(--font-bold);
  margin-right: var(--spacing-lg);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.selected-filter-tag.or {
  border-left: 3px solid var(--color-success);
}

.selected-filter-tag.and {
  border-left: 3px solid var(--color-danger);
}

.selected-filter-tag.mixed {
  border-left: 3px solid var(--color-warning);
}

.selected-filter-tag.single {
  border-left: 3px solid var(--color-tertiary);
}

/* FILTERボタン */
.alpha-filter-button-common-style {
  background-color: var(--bg-function-button);
  color: #495057;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  width: auto;
  flex: 1 1;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
  padding: var(--spacing-xx);
}

.alpha-filter-button-common-style:hover:not(.loading) {
  background-color: #e9ecef;
  color: #212529;
  border-color: #495057;
}

.alpha-filter-button-common-style.loading {
  background-color: #6c757d;
  color: white;
  cursor: not-allowed;
}

/* モーダルオーバーレイ */
.alpha-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.alpha-modal-content {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* 投資判断シグナルのスタイル */
.signal-strong-buy {
  background-color: #065f46;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.signal-buy {
  background-color: #10b981;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.signal-hold {
  background-color: #6b7280;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.signal-sell {
  background-color: #ef4444;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.signal-strong-sell {
  background-color: #7f1d1d;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.signal-na {
  background-color: #f3f4f6;
  color: #6b7280;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* AlphaFinderAnalysisResults CSS styles */

.analysis-results-container {
  margin-top: 20px;
  width: 100%;
}

/* 投資カテゴリースコア */
.category-scores-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 15px;
}

.category-score-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.score-value {
  color: #6b7280;
  font-weight: 500;
}

.score-bar-track {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-in-out;
}

/* カテゴリーバッジ */
.category-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.value-badge {
  background-color: #d1fae5;
  color: #059669;
}

.growth-badge {
  background-color: #dbeafe;
  color: #2563eb;
}

.income-badge {
  background-color: #fef3c7;
  color: #d97706;
}

.quality-badge {
  background-color: #e9d5ff;
  color: #7c3aed;
}

.momentum-badge {
  background-color: #fee2e2;
  color: #dc2626;
}

/* 総合カテゴリースコア */
.overall-category-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.overall-score-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.overall-score-value {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

/* トレンド分析 */
.trend-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.trend-text {
  font-size: 12px;
  font-weight: 600;
}

.trend-strength {
  text-align: center;
  font-weight: 600;
  color: #374151;
}

/* オシレーター分析 */
.signal-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
}

.composite-score {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

/* 投資機会分析 */
.opportunity-scores {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  gap: 10px;
  flex-wrap: wrap;
}

.opportunity-scores > * {
  flex: 1 1; /* 等しい幅で伸縮 */
  min-width: 80px; /* 最小幅を設定 */
  max-width: 120px; /* 最大幅を制限 */
}

.opportunity-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  min-width: 80px;
  width: 100%; /* 親の幅に合わせる */
  box-sizing: border-box;
  text-align: center;
}

/* テキスト部分のスタイル統一 */
.opportunity-indicator .timeframe-text {
  white-space: pre-line; /* 改行対応 */
  text-align: center;
  line-height: 1.2;
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  min-height: 2em; /* 最小高さを設定して揃える */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スコア表示部分のスタイル統一 */
.opportunity-indicator .score-display {
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  min-height: 1.5em; /* 高さを統一 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* EMA/SMA Divergence */
.divergence-value {
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
}

.divergence-value.positive {
  color: #059669;
  background-color: #d1fae5;
}

.divergence-value.negative {
  color: #dc2626;
  background-color: #fee2e2;
}

/* ボラティリティ・リスク */
.volatility-trend {
  text-align: center;
  font-weight: 600;
  color: #374151;
}

.risk-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.risk-score {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.8;
}

/* サポート・レジスタンス */
.support-level {
  color: #059669;
  font-weight: 600;
  text-align: center;
}

.resistance-level {
  color: #dc2626;
  font-weight: 600;
  text-align: center;
}

/* ダイバージェンス分析 */
.divergence-status {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: #6b7280;
}

/* アニメーション */
@keyframes scoreBarFill {
  from {
    width: 0%;
  }
  to {
    width: var(--final-width);
  }
}

.score-bar-fill {
  animation: scoreBarFill 1s ease-out;
}

/* ホバー効果 */
.category-score-item:hover .score-bar-fill {
  opacity: 0.8;
  transform: scaleY(1.1);
}

.opportunity-indicator:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.signal-badge:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* メトリクスカテゴリーアイコンのスタイル調整 */
.metrics-category {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alpha-search-box-area {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding-top: var(--spacing-sm);
  width: 97%;
  padding-right: var(--spacing-md);
}

.horizontal-divider {
  border: 0.005rem solid var(--border-header);
  width: 100%;
  margin-top: -0.2rem;
  margin-bottom: 1rem;
}

.fa-faSliders {
  margin-right: 0.5rem;
}

/* Price Position Visualization Styles */
.alpha-price-position-container {
  padding: var(--spacing-xxxl) var(--spacing-lg);
}

.alpha-price-position-svg {
  width: 100%;
  height: 80px;
}

.alpha-price-position-background {
  fill: var(--bg-active);
  rx: var(--radius-xs);
}

.alpha-price-position-bar {
  fill: var(--color-primary);
  rx: var(--radius-xs);
}

.alpha-price-position-middle-line {
  stroke: var(--color-warning);
  stroke-width: 2;
  stroke-dasharray: 2 2;
}

.alpha-price-position-support-line {
  stroke: var(--color-success);
  stroke-width: 2;
}

.alpha-price-position-resistance-line {
  stroke: var(--color-danger);
  stroke-width: 2;
}

.alpha-price-position-current-marker {
  fill: var(--text-primary);
}

.alpha-price-position-support-label {
  font-size: var(--font-xs);
  fill: var(--color-success);
  font-weight: var(--font-semibold);
}

.alpha-price-position-resistance-label {
  font-size: var(--font-xs);
  fill: var(--color-danger);
  font-weight: var(--font-semibold);
  text-anchor: end;
}

.alpha-price-position-current-label {
  font-size: var(--font-sm);
  fill: var(--text-primary);
  font-weight: var(--font-bold);
  text-anchor: middle;
}

.alpha-price-position-legend {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-xxs);
  color: var(--text-tertiary);
  margin-top: var(--margin-lg);
  padding: 0 var(--spacing-md);
}

.alpha-price-position-legend-support {
  color: var(--color-success);
}

.alpha-price-position-legend-middle {
  color: var(--color-warning);
}

.alpha-price-position-legend-current {
  color: var(--text-primary);
}

.alpha-price-position-legend-resistance {
  color: var(--color-danger);
}

.alpha-price-position-backend-info {
  margin-top: var(--margin-lg);
  font-size: var(--font-xxxs);
  color: var(--text-tertiary);
  font-style: italic;
  text-align: center;
}

/* No Data Message Styles */
.alpha-no-support-resistance-container {
  padding: var(--spacing-xxxl);
  text-align: center;
  color: var(--text-tertiary);
}

/* AlphaFinder TechMetrics Explanation */
.alpha-explanation-area h4 {
  text-align: left !important;
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
}

.alpha-explanation-title-underline {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0.2rem;
}

/* 分析説明エリアのスタイル */
.alpha-explanation-area {
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  font-size: 12px;
  line-height: 1.5;
  text-align: left !important;
  padding: var(--spacing-xl);
}

.alpha-explanation-title {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.alpha-explanation-text {
  color: #4b5563;
  font-size: var(--font-xs);
  padding: 0 0 var(--spacing-md) var(--spacing-md);
  line-height: 1.5;
  text-align: justify;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* カテゴリースコア関連のスタイル */
.category-scores-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.category-score-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.score-value {
  font-weight: 600;
  color: #1f2937;
}

.score-bar-track {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* カテゴリーバッジのスタイル */
.category-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}

.value-badge {
  background-color: #d1fae5;
  color: #065f46;
}

.growth-badge {
  background-color: #dbeafe;
  color: #1e40af;
}

.income-badge {
  background-color: #fef3c7;
  color: #92400e;
}

.quality-badge {
  background-color: #e9d5ff;
  color: #6b21a8;
}

.momentum-badge {
  background-color: #fee2e2;
  color: #991b1b;
}

/* 総合カテゴリースコア */
.overall-category-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f1f5f9;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

.overall-score-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.overall-score-value {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}

/* トレンド分析のスタイル */
.trend-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.trend-text {
  font-size: 12px;
  font-weight: 500;
}

.trend-strength {
  text-align: center;
  font-weight: 600;
  color: #374151;
}

/* シグナルバッジのスタイル */
.signal-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  background-color: #f3f4f6;
}

/* 投資機会指標のスタイル */
.opportunity-scores {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 16px;
  gap: 16px;
}

.opportunity-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

/* ダイバージェンス値のスタイル */
.divergence-value {
  text-align: center;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

.divergence-value.positive {
  color: #059669;
  background-color: #d1fae5;
}

.divergence-value.negative {
  color: #dc2626;
  background-color: #fee2e2;
}

/* ダイバージェンスステータス */
.divergence-status {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  padding: 4px 8px;
  background-color: #f3f4f6;
  border-radius: 4px;
}

/* コンポジットスコア */
.composite-score {
  text-align: center;
  font-weight: 600;
  color: #374151;
}

/* ボラティリティトレンド */
.volatility-trend {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #f3f4f6;
  color: #374151;
}

/* リスクレベル表示 */
.risk-level {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  justify-content: center;
}

.risk-score {
  font-size: 10px;
  opacity: 0.8;
}

/* メトリクスカテゴリーヘッダー */
.alpha-metrics-category {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  justify-content: center;
}

.support-color { color: #10b981; }
.resistance-color { color: #ef4444; }
.current-price-color { color: #1f2937; font-weight: bold; }
.current-price-bg { background-color: rgba(59, 130, 246, 0.1); }

.support-value { color: #10b981; }
.resistance-value { color: #ef4444; }
.current-price-value { color: #1f2937; font-weight: bold; }

.performance-metrics-table .price-row td {
  padding: var(--spacing-sm); /* ヘッダーと同じパディング */
  text-align: center; /* 中央揃え */
  font-size: var(--font-sm); /* ヘッダーと同じフォントサイズ */
  font-weight: var(--font-semibold); /* ヘッダーと同じフォントウェイト */
  color: var(--text-primary); /* ヘッダーと同じテキストカラー */
  background-color: var(--bg-header); /* ヘッダーと同じ背景色 */
  border-bottom: 1px solid var(--border-header); /* ヘッダーと同じボーダー */
}

/* メトリクス行（from 52W Low, Position in Range, from 52W High）のスタイル */
.performance-metrics-table .metrics-row td {
  padding: var(--spacing-sm); /* ヘッダーと同じパディング */
  text-align: center; /* 中央揃え */
  font-size: var(--font-sm); /* ヘッダーと同じフォントサイズ */
  font-weight: var(--font-semibold); /* ヘッダーと同じフォントウェイト */
  color: var(--text-primary); /* ヘッダーと同じテキストカラー */
  background-color: var(--bg-header); /* ヘッダーと同じ背景色 */
  border-bottom: 1px solid var(--border-header); /* ヘッダーと同じボーダー */
}
.performance-metrics-table .price-value-row td { font-weight: var(--font-semibold); font-size: 1.1em; padding: 0.5rem;  }
.performance-metrics-table .metrics-value-row td { font-weight: var(--font-semibold); font-size: 1.1em; color: #6b7280; padding: 0.5rem;  }

.performance-metrics-table .price-values-row td,
.performance-metrics-table .metrics-values-row td {
  padding: var(--spacing-sm);
  text-align: center;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.mobile-score {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: #6b7280;
}

.rank-score {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: #6b7280;
}

/* Investment Category Scores Styles */

/* Container */
.alpha-investment-scores-container {
  padding: 0;
  border: none;
}

/* Category Score Row */
.alpha-category-score-row {
  display: flex;
  align-items: stretch;
  gap: 0px;
  margin-bottom: 0px;
  border-bottom: 1px solid #e5e7eb;
  background-color: white;
  min-height: 80px;
}

/* Label Column */
.alpha-category-label-column {
  width: 25%;
  flex-shrink: 0;
  border-right: 1px solid #e5e7eb;
  padding: 12px 12px 12px 8px;
  background-color: #fafbfc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
}

.alpha-category-label-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.alpha-category-label-text {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: help;
}

.alpha-qualified-badge {
  background-color: #d1fae5;
  color: #059669;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 12px;
  white-space: nowrap;
  display: inline-block;
}

/* Bar Column */
.alpha-category-bar-column {
  width: 75%;
  flex: 1 1;
  padding: 12px 8px 12px 12px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
}

/* Score and Ranking Info */
.alpha-score-ranking-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.alpha-score-value {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.alpha-score-value.qualified {
  color: #059669;
}

.alpha-ranking-details {
  font-size: 11px;
  color: #6b7280;
  text-align: right;
  line-height: 1.2;
}

/* Progress Bar */
.alpha-progress-bar-container {
  position: relative;
  height: 20px;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  overflow: hidden;
}

.alpha-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #f3f4f6;
  z-index: 1;
}

.alpha-grid-line[data-mark="20"] { left: 20%; }
.alpha-grid-line[data-mark="40"] { left: 40%; }
.alpha-grid-line[data-mark="60"] { left: 60%; }
.alpha-grid-line[data-mark="80"] { left: 80%; }

.alpha-threshold-marker {
  position: absolute;
  left: 60%;
  top: -6px;
  transform: translateX(-50%);
  color: #6b7280;
  font-size: 10px;
  line-height: 1;
  z-index: 3;
}

.alpha-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #e5e7eb;
  border-radius: 3px;
  transition: width 0.3s ease;
  z-index: 2;
}

.alpha-progress-fill.qualified {
  background-color: #d1fae5;
}

/* Dynamic width using CSS custom properties */
.alpha-progress-fill[data-width="0"] { width: 0%; }
.alpha-progress-fill[data-width="10"] { width: 10%; }
.alpha-progress-fill[data-width="20"] { width: 20%; }
.alpha-progress-fill[data-width="30"] { width: 30%; }
.alpha-progress-fill[data-width="40"] { width: 40%; }
.alpha-progress-fill[data-width="50"] { width: 50%; }
.alpha-progress-fill[data-width="60"] { width: 60%; }
.alpha-progress-fill[data-width="70"] { width: 70%; }
.alpha-progress-fill[data-width="80"] { width: 80%; }
.alpha-progress-fill[data-width="90"] { width: 90%; }
.alpha-progress-fill[data-width="100"] { width: 100%; }

.alpha-score-overlay {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  z-index: 4;
}

.alpha-score-overlay.qualified {
  color: grey;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* Position classes for score overlay */
.alpha-score-overlay[data-position="8"] { left: 8%; }
.alpha-score-overlay[data-position="10"] { left: 10%; }
.alpha-score-overlay[data-position="20"] { left: 20%; }
.alpha-score-overlay[data-position="30"] { left: 30%; }
.alpha-score-overlay[data-position="40"] { left: 40%; }
.alpha-score-overlay[data-position="50"] { left: 50%; }
.alpha-score-overlay[data-position="60"] { left: 60%; }
.alpha-score-overlay[data-position="70"] { left: 70%; }
.alpha-score-overlay[data-position="80"] { left: 80%; }
.alpha-score-overlay[data-position="90"] { left: 90%; }
.alpha-score-overlay[data-position="92"] { left: 92%; }

/* Scale Reference */
.alpha-scale-reference {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 8px;
  color: #9ca3af;
}

.alpha-threshold-mark {
  font-weight: 600;
}

/* Category Explanation */
.alpha-category-explanation {
  padding: var(--spacing-lg);
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 10px;
  color: #6b7280;
  line-height: 1.4;
}

.alpha-category-explanation.last {
  border-bottom: none;
}

.alpha-explanation-title {
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.alpha-explanation-content {
  text-align: left; /* 左寄せ */
}

.alpha-comprehensive-explanation {
  border-right: 2px solid #d1d5db !important;
  border-left: 2px solid #d1d5db !important;
  border-bottom: 2px solid #d1d5db !important;
  margin-bottom: 0;
}

.alpha-comprehensive-score-row {
  display: flex;
  align-items: stretch;
  gap: 0px;
  min-height: 90px;
  border-bottom: 1px solid #e5e7eb; /* この行を追加 */
}

/* Comprehensive Score Section */
.alpha-comprehensive-score-section {
  border-right: 2px solid #d1d5db;
  border-left: 2px solid #d1d5db;
  border-top: 2px solid #d1d5db;
  margin-top: 8px; /* 上の要素との間隔 */
  background-color: white;
  overflow: hidden; /* 内部要素の境界線がはみ出ないように */
}

.alpha-comprehensive-score-row {
  display: flex;
  align-items: stretch;
  gap: 0px;
  min-height: 90px;
  border-bottom: 1px solid #e5e7eb; /* 説明との境界線 */
}


.alpha-comprehensive-label-column {
  width: 25%;
  flex-shrink: 0;
  border-right: 1px solid #e5e7eb;
  padding: 16px 12px 16px 8px;
  background-color: #fafbfc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90px;
}

.alpha-comprehensive-label-text {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  cursor: help;
}

.alpha-comprehensive-bar-column {
  width: 75%;
  flex: 1 1;
  padding: 16px 8px 16px 12px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90px;
}

.alpha-comprehensive-score-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.alpha-comprehensive-score-value {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
}

.alpha-comprehensive-score-value.qualified {
  color: #059669;
}

.alpha-comprehensive-ranking-details {
  font-size: 11px;
  color: #6b7280;
  text-align: right;
  line-height: 1.2;
}

.alpha-comprehensive-ranking-text {
  font-weight: 600;
}

/* Comprehensive Progress Bar */
.alpha-comprehensive-progress-container {
  position: relative;
  height: 24px;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  overflow: hidden;
}

.alpha-comprehensive-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #f3f4f6;
  z-index: 1;
}

.alpha-comprehensive-grid-line[data-mark="20"] { left: 20%; }
.alpha-comprehensive-grid-line[data-mark="40"] { left: 40%; }
.alpha-comprehensive-grid-line[data-mark="60"] { left: 60%; }
.alpha-comprehensive-grid-line[data-mark="80"] { left: 80%; }

.alpha-comprehensive-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #e5e7eb;
  border-radius: 3px;
  z-index: 2;
}

.alpha-comprehensive-progress-fill.qualified {
  background: linear-gradient(90deg, #d1fae5 0%, #059669 100%);
}

/* Width classes for comprehensive progress */
.alpha-comprehensive-progress-fill[data-width="0"] { width: 0%; }
.alpha-comprehensive-progress-fill[data-width="10"] { width: 10%; }
.alpha-comprehensive-progress-fill[data-width="20"] { width: 20%; }
.alpha-comprehensive-progress-fill[data-width="30"] { width: 30%; }
.alpha-comprehensive-progress-fill[data-width="40"] { width: 40%; }
.alpha-comprehensive-progress-fill[data-width="50"] { width: 50%; }
.alpha-comprehensive-progress-fill[data-width="60"] { width: 60%; }
.alpha-comprehensive-progress-fill[data-width="70"] { width: 70%; }
.alpha-comprehensive-progress-fill[data-width="80"] { width: 80%; }
.alpha-comprehensive-progress-fill[data-width="90"] { width: 90%; }
.alpha-comprehensive-progress-fill[data-width="100"] { width: 100%; }

.alpha-comprehensive-score-overlay {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  z-index: 4;
}

.alpha-comprehensive-score-overlay.qualified {
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* Position classes for comprehensive score overlay */
.alpha-comprehensive-score-overlay[data-position="8"] { left: 8%; }
.alpha-comprehensive-score-overlay[data-position="10"] { left: 10%; }
.alpha-comprehensive-score-overlay[data-position="20"] { left: 20%; }
.alpha-comprehensive-score-overlay[data-position="30"] { left: 30%; }
.alpha-comprehensive-score-overlay[data-position="40"] { left: 40%; }
.alpha-comprehensive-score-overlay[data-position="50"] { left: 50%; }
.alpha-comprehensive-score-overlay[data-position="60"] { left: 60%; }
.alpha-comprehensive-score-overlay[data-position="70"] { left: 70%; }
.alpha-comprehensive-score-overlay[data-position="80"] { left: 80%; }
.alpha-comprehensive-score-overlay[data-position="90"] { left: 90%; }
.alpha-comprehensive-score-overlay[data-position="92"] { left: 92%; }

.alpha-comprehensive-scale-reference {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 8px;
  color: #9ca3af;
}

.alpha-comprehensive-threshold-mark {
  font-weight: 600;
}

/* Legend */
.alpha-priceposition-legend {
  padding: 6px;
  background-color: #f9fafb;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.alpha-scoring-legend {
  margin-top: 20px;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.alpha-legend-title {
  margin-bottom: 4px;
  font-weight: 600;
  color: #374151;
  font-size: 11px;
}

.alpha-legend-content {
  font-size: 10px;
  color: #6b7280;
  line-height: 1.4;
}

.alpha-legend-content div {
  margin-bottom: 2px;
}

.alpha-legend-content div:last-child {
  margin-bottom: 0;
}

.alpha-legend-content {
  display: flex;
  text-align: center;
}

.alpha-price-position-wrapper{
  display: row;
  text-align: center;
}

/* AlphaFinderAnalysisView用のスタイル調整 */
.alphafinder-analysis-view {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* 分析タブ内でのモーダル風レイアウトを無効化 */
.alphafinder-analysis-view .alpha-compact-chart-container {
  box-shadow: none;
  border: none;
  background: transparent;
}

/* Opportunity Score Labels */
.alpha-opportunity-score-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}

.alpha-opportunity-strong-buy {
  background-color: #065f46;
  color: white;
}

.alpha-opportunity-buy {
  background-color: #10b981;
  color: white;
}

.alpha-opportunity-weak-buy {
  background-color: #d1fae5;
  color: #059669;
}

.alpha-opportunity-neutral {
  background-color: #f3f4f6;
  color: #6b7280;
}

.alpha-opportunity-weak-sell {
  background-color: #fef3c7;
  color: #d97706;
}

.alpha-opportunity-sell {
  background-color: #ef4444;
  color: white;
}

.alpha-opportunity-strong-sell {
  background-color: #7f1d1d;
  color: white;
}

/* Divergence Labels */
.alpha-divergence-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}

.alpha-divergence-strong-uptrend {
  background-color: #065f46;
  color: white;
}

.alpha-divergence-uptrend {
  background-color: #10b981;
  color: white;
}

.alpha-divergence-sideways {
  background-color: #f3f4f6;
  color: #6b7280;
}

.alpha-divergence-downtrend {
  background-color: #ef4444;
  color: white;
}

.alpha-divergence-strong-downtrend {
  background-color: #7f1d1d;
  color: white;
}

/* Volatility Score Labels */
.alpha-volatility-score-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}

.alpha-volatility-very-high {
  background-color: #7c2d12;
  color: white;
}

.alpha-volatility-high {
  background-color: #ea580c;
  color: white;
}

.alpha-volatility-medium {
  background-color: #fbbf24;
  color: #92400e;
}

.alpha-volatility-low {
  background-color: #d1fae5;
  color: #059669;
}

.alpha-volatility-very-low {
  background-color: #ecfdf5;
  color: #065f46;
}

/* Risk Score Labels */
.alpha-risk-score-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}

.alpha-risk-very-high {
  background-color: #7f1d1d;
  color: white;
}

.alpha-risk-high {
  background-color: #dc2626;
  color: white;
}

.alpha-risk-medium {
  background-color: #fbbf24;
  color: #92400e;
}

.alpha-risk-low {
  background-color: #10b981;
  color: white;
}

.alpha-risk-very-low {
  background-color: #065f46;
  color: white;
}

/* Percentage Display for Divergence */
.alpha-divergence-percentage {
  font-weight: 600;
  font-size: 12px;
}

.alpha-divergence-percentage.positive {
  color: #059669;
}

.alpha-divergence-percentage.negative {
  color: #dc2626;
}

/* Score Container with Range Display */
.alpha-score-with-range {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.alpha-score-main-value {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.alpha-score-range-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
}

/* Enhanced Table Cells for Better Label Display */
.alpha-enhanced-cell {
  text-align: center;
  padding: 8px 4px;
  vertical-align: middle;
}

.alpha-enhanced-cell .alpha-main-value {
  display: block;
  margin-bottom: 2px;
}

.alpha-enhanced-cell .alpha-label-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

/* Technical Indicator Value Display */
.alpha-technical-value {
  font-weight: 600;
  color: #374151;
}

.alpha-technical-value.overbought {
  color: #dc2626;
}

.alpha-technical-value.oversold {
  color: #059669;
}

.alpha-technical-value.neutral {
  color: #6b7280;
}

.alpha-opp-followtext {
  font-size:var(--font-xxs);
}

.alpha-action-buttons-container {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 10px;
}

/* ボタンコンテナ */
.alpha-action-buttons {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.alpha-button-common-style {
  background-color: var(--bg-function-button);
  color: #495057;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  width: auto;
  flex: 1 1;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
  padding: var(--spacing-xx);
}

.alpha-button-common-style:hover:not(.loading) {
  background-color: #e9ecef;
  color: #212529;
  border-color: #495057;
}

.alpha-button-common-style.loading {
  background-color: #6c757d;
  color: white;
  cursor: not-allowed;
}

.alpha-ai-button-common-style {
  background-color: var(--bg-function-button);
  color: #495057;
  border: 3px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-msm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
  padding: var(--spacing-xxl) 3rem;
  margin: var(--spacing-xxl);
}

.alpha-ai-button-common-style:hover:not(.loading) {
  background-color: #e9ecef;
  color: #212529;
  border-color: #495057;
}

.alpha-ai-button-common-style.loading {
  background-color: #6c757d;
  color: white;
  cursor: not-allowed;
}

.alpha-ai-button-done-common-style {
  background-color: var(--bg-function-button);
  color: #495057;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  width: -webkit-fit-content;
  width: fit-content;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
  padding: var(--spacing-xxl);
  margin: var(--spacing-xl) 0 0 var(--spacing-xl);
}

.alpha-ai-button-done-common-style:hover:not(.loading) {
  background-color: #e9ecef;
  color: #212529;
  border-color: #495057;
}

.alpha-ai-button-done-common-style.loading {
  background-color: #6c757d;
  color: white;
  cursor: not-allowed;
}

/* ボタンアイコン */
.alpha-action-icon {
  font-size: 13px;
  margin-right: 8px;
}

/* ボタンテキスト */
.alpha-action-text {
  font-size: var(--font-msm);
  font-weight: 600;
}

/* フォーカス時のスタイル */
.alpha-action-button:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* 無効化時のスタイル */
.alpha-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.alpha-nodataavailable {
  margin-right: var(--spacing-xs);
}

@media screen and (max-width: 1200px) {
  .alpha-search-box-area {
   width: 99%;
   margin-left: -0.3rem;
   margin-top: -0.5rem;
  }
}

@media (max-width: 992px) {
  .alpha-finder-content-container {
    grid-template-columns: 1fr;
  }
}

/* デスクトップ（769px以上）では強制的に横並び */
@media screen and (min-width: 769px) {
  .alpha-chart-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  
  .chart-period-section,
  .chart-type-selector {
    flex-shrink: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .alpha-search-box-area {
   width: 100%;
   margin-left: -0.3rem;
   margin-top: -1.3rem;
  }

  html body .company-profile-modal,
  html body .profile-modal-cell,
  html body .profile-modal-wrapper,
  html body .modal-content {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .company-profile-modal,
  .modal-content,
  .profile-tables-grid,
  .mobile-info-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  .mobile-profile-modal {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .modal-content {
    padding: 4px !important;
  }
  
  /* テーブルの配置を調整 */
  .mobile-metrics-table {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
  }
  
  /* テーブルセルのパディング調整 */
  .mobile-metrics-table th,
  .mobile-metrics-table td {
    padding: 2px !important;
    font-size: var(--font-xs) !important;
  }

  .selected-filters-container {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }
  
  .selected-filters-header {
    /* flex-direction: column; */
    /* align-items: flex-start;
    align-items: stretch; */
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    padding: var(--spacing-xs) var(--spacing-msm);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
      
  .remove-filter-button {
    width: 14px;
    height: 14px;
    font-size: var(--font-sm);
  }

  .profile-tables-grid {
    grid-template-columns: 1fr; /* モバイルでは縦並びに */
  }
  
  .profile-metric-table {
    font-size: var(--font-sm);
  }
  
  .profile-metric-table th, 
  .profile-metric-table td {
    padding: var(--spacing-sm);
  }

  .stock-table-container,
  .mobile-table-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .stock-table,
  .mobile-stock-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .profile-modal-cell {
    padding: 0 !important;
    width: 100% !important;
  }

  .profile-modal-wrapper {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .modal-content {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .profile-tables-grid {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
  }
  
  /* テーブルの内側余白も調整 */
  .company-profile-modal {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  
  /* Adjust grid layout for mobile */
  .profile-tables-grid {
    grid-template-columns: 1fr; /* Stack them vertically on mobile */
    gap: var(--spacing-md);
    width: 100%;
  }
  
  .mobile-metrics-tables {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .mobile-metrics-table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    table-layout: fixed !important;
  }

  .mobile-metrics-table th, 
  .mobile-metrics-table td {
    padding: 3px 2px !important;
    font-size: var(--font-sm) !important; /* フォントサイズを元に戻す */
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-metrics-table-HQ {
    padding: 3px 2px !important;
    font-size: var(--font-sm) !important; /* フォントサイズを元に戻す */
    font-weight: var(--font-semibold);
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--bg-header);
  }

  /* テーブルヘッダーのサイズも調整 */
  .mobile-metrics-table th {
    font-size: var(--font-sm) !important;
  }

  /* Make column widths even */
  .mobile-metrics-table th,
  .mobile-metrics-table td {
    width: 16.66% !important; /* For 6 columns */
  }

  /* For 4 column tables */
  .mobile-metrics-table th[colSpan="4"] + tr th,
  .mobile-metrics-table th[colSpan="4"] + tr + tr td {
    width: 25% !important;
  }
    
  /* Fix modal cell to take full width but no extra */
  .profile-modal-cell {
    padding: 0 !important;
    width: 100%;
  }
  
  /* Remove excessive padding from modal content */
  .modal-content {
    padding: 0;
    width: 100%;
  }
  
  /* Make header spans take less space */
  .metrics-category {
    font-size: var(--font-sm) !important;
  }
  
  /* Company description better spacing */
  .company-description {
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }
  
  .company-description p {
    font-size: var(--font-sm);
    padding: var(--spacing-md);
  }

    .clear-filter-button {
    padding: 4px 8px;
    font-size: var(--font-xs);
  }
  
  .clear-filter-button .fa-icon {
    font-size: var(--font-xs);
  }

    .alpha-chart-header {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: stretch;
    flex-wrap: wrap; /* モバイルでは折り返しを許可 */
  }
  
  .chart-period-section {
    justify-content: center;
  }
  
  .chart-period-selector,
  .chart-type-selector {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .chart-period-button,
  .chart-type-button {
    min-width: 40px;
    padding: 6px 8px;
  }
  
  .chart-stats-table th,
  .chart-stats-table td {
    padding: 2px 4px;
    font-size: var(--font-sm);
  }
  
  .logic-explanation {
    flex: 1 1; /* 残りのスペースを使用 */
    min-width: 0; /* flexアイテムの最小幅をリセット */
  }

  .logic-note {
    font-size: var(--font-sm); /* 必要に応じてフォントサイズを調整 */
    white-space: nowrap; /* テキストの改行を防ぐ */
    overflow: hidden;
    text-overflow: ellipsis; /* 長すぎる場合は省略記号 */
  }

  .clear-all-filters-button {
    flex-shrink: 0; /* ボタンのサイズを維持 */
    white-space: nowrap; /* ボタンテキストの改行を防ぐ */
    align-self: flex-end;
    font-size: var(--font-sm);
    padding: 4px 10px;
    margin: var(--spacing-sm);
  }
  
  .selected-filters-list {
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--spacing-xs);
  }
  
  .selected-filter-tag {
    min-width: 40px;
    padding: 6px 8px;
    max-width: none;
  }
  

  .remove-filter-button {
    width: 14px;
    height: 14px;
  }
  
  /* Search Controls */
  .search-control-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-primary);
    margin-top: -0.5rem;
    margin-left: -0.6rem;
    width: 97%;
  }

  /* Company Profile */
  .alpha-finder-profile-section {
    width: 102%;
    margin-left: -0.5rem;
  }

    /* Stock List */
  .alpha-finder-content-container,
  .alpha-stock-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: -0.1rem;
    margin-top: 0.28rem;
  }

  .alpha-company-name-small {
    font-size: var(--font-xs);
    font-weight: var(--font-normal);
    color: var(--text-secondary);
    margin: 0;
  }

  .alpha-sector-cell,
  .alpha-industry-cell {
    font-size: var(--font-sm);
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .alpha-market-cap-cell{
    font-size: var(--font-sm);
    max-width: 55px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .alpha-symbol-container {
    font-size: var(--font-sm);
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis; 
  }

  .alpha-index-cell {
    max-width: 35px;
  }

  .category-scores-grid {
    gap: 8px;
    padding: 10px;
  }
  
  .score-bar-label {
    font-size: 11px;
  }
  
  .overall-category-score {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .opportunity-scores {
    flex-direction: row; /* デスクトップと同じ横並びに */
    gap: 8px;
    justify-content: space-around; /* デスクトップと同じ配置に */
  }
  
  .opportunity-indicator {
    min-width: 60px; /* 最小幅を設定 */
    width: auto; /* 自動幅に変更 */
    flex: 1 1; /* 均等配置 */
  }
  
  .signal-badge {
    font-size: var(--font-xs);
    padding: 3px 6px;
  }

  .alpha-explanation-area {
    padding: 12px;
    font-size: var(--font-xs);
  }
  
  .alpha-explanation-title {
    font-size: 12px;
  }
  
  .category-scores-grid {
    gap: 8px;
  }
  
  .opportunity-scores {
    flex-direction: flex;
    gap: 12px;
  }
  
  .opportunity-indicator {
    width: 100%;
    flex-direction: column; /* デスクトップと同じ縦並びに */
    align-items: center; /* 中央揃え */
    gap: 4px; /* 要素間の間隔 */
  }

  .alpha-opportunity-score-label,
  .alpha-divergence-label,
  .alpha-volatility-score-label,
  .alpha-risk-score-label {
    font-size: var(--font-xs);
    padding: 1px 4px;
  }
  
  .alpha-score-main-value {
    font-size: 12px;
  }
  
  .alpha-score-range-label {
    font-size: 10px;
  }
  
  .alpha-enhanced-cell {
    padding: 4px 2px;
  }

  .reit-notice {
    padding: 12px;
    font-size: 0.8rem;
  }
  
  .reit-notice-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .reit-formula {
    font-size: 0.75rem;
    padding: 6px 8px;
  }
  
  .index-badge.reit {
    font-size: 0.6rem;
    padding: 1px 4px;
  }

}




  /* iOSデバイス向けの特別な処理 */
@supports (-webkit-touch-callout: none) {
  html body .company-profile-modal,
  html body .profile-modal-cell {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@supports (-webkit-overflow-scrolling: touch) {

  .stock-count {
    font-size: var(--font-xs);
  }

  /* Search Controls */
  .search-control-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-primary);
    margin-top: -0.5rem;
    margin-left: -0.6rem;
    width: 97%;
  }

  /* Company Profile */
  .alpha-finder-profile-section {
    width: 102%;
    margin-left: -0.5rem;
  }

    /* Stock List */
  .alpha-finder-content-container,
  .alpha-stock-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: -0.05rem;
    margin-top: 0.3rem;
  }

  .alpha-company-name-small {
    font-size: var(--font-xxs);
    font-weight: var(--font-normal);
    color: var(--text-secondary);
    margin: 0;
  }

  .alpha-sector-cell,
  .alpha-industry-cell {
    font-size: var(--font-sm);
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .alpha-market-cap-cell{
    font-size: var(--font-sm);
    max-width: 55px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .alpha-symbol-container {
    font-size: var(--font-sm);
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis; 
  }

  .alpha-index-cell {
    max-width: 35px;
  }
}

.index-badge.reit:focus {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* AI Stock Analysis Styles - 添付画像に忠実な統一デザイン */

.alpha-ai-analysis-container {
  margin-top: 1rem;
}

.alpha-ai-narrative-text {
  color: #4b5563;
  font-size: var(--font-msm);
  padding: 0 0 var(--spacing-md) var(--spacing-md);
  line-height: 1.4;
  text-align: justify;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.alpha-ai-narrative-area h4 {
  text-align: left !important;
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
}

.alpha-ai-narrative-area h5 {
  text-align: left !important;
  font-size: var(--font-msm);
  font-weight: var(--font-semibold);
  padding: var(--spacing-md) var(--spacing-md) 0 0;
}

.alpha-ai-narrative-area {
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  font-size: var(--font-msm);
  line-height: 1.2;
  text-align: left !important;
  padding: var(--spacing-xl);
}

.alpha-ai-narrative-title-underline {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0.2rem;
}

.alpha-ai-narrative-title {
  color: #374151;
  font-size: var(--font-msm);
  font-weight: var(--font-semibold);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.alpha-ai-provider-icon {
  width: 16px;
  height: 16px;
}

.alpha-ai-provider-badge-icon {
  width: 16px;
  height: 16px;
}

.alpha-ai-provider-button-icon {
  width: 16px;
  height: 16px;
}

.alpha-ai-loading-icon {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   AlphaFinder AI Stock Analysis Component Styles
   ========================================================================== */

/* Header and Badge Styles */
.alpha-ai-header-badge {
  font-size: 0.6rem;
  font-weight: normal;
  color: #6b7280;
  margin-top: 2px;
}

/* Control Panel Styles */
.alpha-ai-control-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 12px;
}

.alpha-ai-control-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.alpha-ai-control-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Provider Badge Styles */
.alpha-ai-provider-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
}

.alpha-ai-provider-badge.claude {
  background-color: #dbeafe;
  color: #0369a1;
  border-color: #bae6fd;
}

.alpha-ai-provider-badge.gemini {
  background-color: #f3e8ff;
  color: #7c3aed;
  border-color: #d8b4fe;
}

.alpha-ai-provider-badge.chatgpt {
  background-color: #d1fae5;
  color: #047857;
  border-color: #a7f3d0;
}

.alpha-ai-provider-badge.fallback {
  background-color: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

/* Last Updated Text */
.alpha-ai-last-updated {
  font-size: 0.7rem;
  color: #6b7280;
  white-space: nowrap;
}

/* Provider Switch Container */
.alpha-ai-provider-switch {
  display: flex;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 2px;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Provider Switch Buttons */
.alpha-ai-provider-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: transparent;
  color: #64748b;
}

.alpha-ai-provider-button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.alpha-ai-provider-button.active.gemini {
  background-color: #8b5cf6;
  color: white;
}

.alpha-ai-provider-button.active.claude {
  background-color: #3b82f6;
  color: white;
}

.alpha-ai-provider-button.active.chatgpt {
  background-color: #10b981;
  color: white;
}

/* Generate Button */
.alpha-ai-generate-container {
  display: flex;
  justify-content: center;
}

.alpha-ai-generate-button-icon,
.alpha-ai-print-button-icon {
  padding: 4px 6px 4px 0;
  font-size: 0.75rem;
  font-weight: 500;
}

.alpha-ai-generate-button {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.alpha-ai-generate-button:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
}

/* Loading State Styles */
.alpha-ai-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 24px;
  background-color: #fafbfc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.alpha-ai-loading-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alpha-ai-loading-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.alpha-ai-loading-icon.claude {
  background-color: #dbeafe;
  border-color: #bae6fd;
}

.alpha-ai-loading-icon.gemini {
  background-color: #f3e8ff;
  border-color: #d8b4fe;
}

.alpha-ai-loading-icon.chatgpt {
  background-color: #d1fae5;
  border-color: #a7f3d0;
}

.alpha-ai-loading-icon-inner {
  animation: bounce 1s infinite;
}

.alpha-ai-loading-icon-inner.claude {
  color: #0369a1;
}

.alpha-ai-loading-icon-inner.gemini {
  color: #7c3aed;
}

.alpha-ai-loading-icon-inner.chatgpt {
  color: #047857;
}

.alpha-ai-loading-icon-inner .spinning {
  animation: spin 3s linear infinite;
}

.alpha-ai-loading-ring {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid;
  opacity: 0.3;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.alpha-ai-loading-ring.claude {
  border-color: #bae6fd;
}

.alpha-ai-loading-ring.gemini {
  border-color: #d8b4fe;
}

.alpha-ai-loading-ring.chatgpt {
  border-color: #a7f3d0;
}

/* Progress Bar */
.alpha-ai-progress-container {
  width: 100%;
  max-width: 300px;
}

.alpha-ai-progress-bar {
  width: 100%;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.alpha-ai-progress-fill {
  height: 100%;
  border-radius: 3px;
  animation: progress 2s ease-in-out infinite;
}

.alpha-ai-progress-fill.claude {
  background: linear-gradient(90deg, #0369a1, #bae6fd);
}

.alpha-ai-progress-fill.gemini {
  background: linear-gradient(90deg, #7c3aed, #d8b4fe);
}

.alpha-ai-progress-fill.chatgpt {
  background: linear-gradient(90deg, #047857, #a7f3d0);
}

/* Loading Text */
.alpha-ai-loading-text-container {
  text-align: center;
}

.alpha-ai-loading-title {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.alpha-ai-loading-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.alpha-ai-loading-dots {
  display: flex;
  gap: 2px;
}

.alpha-ai-loading-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #9ca3af;
  animation: bounce 1.4s ease-in-out infinite both;
}

.alpha-ai-loading-dot:nth-child(1) {
  animation-delay: 0s;
}

.alpha-ai-loading-dot:nth-child(2) {
  animation-delay: 0.16s;
}

.alpha-ai-loading-dot:nth-child(3) {
  animation-delay: 0.32s;
}

/* Error State */
.alpha-ai-error-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-top: var(--spacing-xl);
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
}

.alpha-ai-error-content {
  flex: 1 1;
}

.alpha-ai-retry-button {
  margin-top: 8px;
  background-color: #dc2626;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.alpha-ai-retry-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* Action Buttons Container */
.alpha-ai-actions-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  flex-wrap: wrap;
}

.alpha-ai-collapse-button {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.alpha-ai-print-button {
  background-color: #8b5cf6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.alpha-ai-preview-text {
  max-height: 120px;
  overflow: hidden;
  position: relative;
  padding-right: 1em;
}

.alpha-ai-expand-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.alpha-ai-expand-button {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Narrative Content Styles */
.alpha-ai-narrative-title-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.alpha-ai-narrative-title {
  margin: 0;
}

/* Table Styles */
.alpha-ai-table-container {
  margin: 16px 0;
}

/* Subsection Styles */
.alpha-ai-subsection-title {
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Text Content Styles */
.alpha-ai-text-paragraph {
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Print Styles - Add to existing print media queries */
@media print {
  .alpha-ai-print-title {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .alpha-ai-print-subtitle {
    text-align: center;
    margin-bottom: 30px;
    color: #666;
  }
  
  .alpha-ai-print-caution {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
  }
  
  .alpha-ai-print-caution-title {
    color: #dc2626;
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: bold;
  }
  
  .alpha-ai-print-caution-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #374151;
  }
}

/* Animations */
@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% { 
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes spin {
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes progress {
  0% { 
    transform: translateX(-100%); 
  }
  50% { 
    transform: translateX(0%); 
  }
  100% { 
    transform: translateX(100%); 
  }
}

.alpha-header-industry {
  font-weight: var(--font-normal);
}
/* Action cell - 最小限の追加スタイル */
.alpha-action-cell .alpha-action-buttons {
  flex-direction: column;
  gap: 4px;
}

.alpha-action-cell .alpha-button-common-style {
  font-size: 14px;
  padding: 4px 8px;
  min-height: 28px;
}

.alpha-action-cell .alpha-action-text {
  font-size: var(--font-msm);
}

.alpha-action-cell .alpha-action-icon {
  font-size: 11px;
}

/* Industry display - 既存のindustry表示用 */
.alpha-industry {
  font-size: 12px;
  color: #7f8c8d;
}

.alpha-action-buttons-vertical {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
  padding: 0;
}

/* 既存のボタンスタイルを維持し、幅とセンタリングを統一 */
.alpha-action-buttons-vertical .alpha-button-common-style {
  width: 200px; /* デスクトップ用固定幅 */
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

/* アイコンとテキストの配置調整 */
.alpha-action-buttons-vertical .alpha-action-icon {
  margin-right: 4px;
  flex-shrink: 0;
}

.alpha-action-buttons-vertical .alpha-action-text {
  flex: 0 0 auto;
  text-overflow: ellipsis;
  overflow: hidden;
}

.symbol-container .company-name {
  font-size: 12px;
  color: #666;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.symbol-container .market-cap-value {
  font-size: 13px;
  color: #28a745;
  font-weight: 600;
  margin-top: 0.3rem;
}

.sector-container .sector-name {
  font-weight: 600;
  font-size: 13px;
}

.sector-container .alpha-industry {
  font-size: 12px;
  color: #666;
  text-align: center;
  max-width: 580px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alpha-header-companyname {
  font-weight: var(--font-normal);
  font-size: var(--font-sm);
}

/* モバイル対応（768px以下） */
@media (max-width: 768px) {
  .alpha-action-buttons-vertical .alpha-button-common-style {
    width: 125px; /* モバイル用固定幅 */
    font-size: 12px;
    padding: 3px 4px;
    min-height: 30px;
  }
  
  .alpha-action-buttons-vertical .alpha-action-text {
    font-size: var(--font-sm);
  }
  
  .alpha-action-buttons-vertical .alpha-action-icon {
    font-size: var(--font-sm);
    margin-right: 2px;
  }
}

/* 音声再生コントロール用CSS */

.alpha-ai-speech-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.alpha-ai-speech-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: white;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.alpha-ai-speech-button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alpha-ai-speech-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.alpha-ai-speech-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
}

.alpha-ai-speech-button:disabled:hover {
  transform: none;
  border-color: transparent;
}

/* 個別の音声ボタンスタイル */
.alpha-ai-speech-play {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-color: #059669;
}

.alpha-ai-speech-play:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  border-color: #047857;
}

.alpha-ai-speech-pause {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-color: #d97706;
}

.alpha-ai-speech-pause:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border-color: #b45309;
}

.alpha-ai-speech-resume {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border-color: #2563eb;
}

.alpha-ai-speech-resume:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #1d4ed8;
}

.alpha-ai-speech-stop {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border-color: #dc2626;
}

.alpha-ai-speech-stop:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border-color: #b91c1c;
}

.alpha-ai-speech-error {
  margin-left: 8px;
  padding: 4px 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
}

/* 音声非対応の場合 */
.speech-not-supported {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #64748b;
  font-size: 14px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .alpha-ai-speech-controls {
    flex-wrap: wrap;
    gap: 6px;
  }

  .alpha-ai-speech-button {
    flex: 1 1;
    min-width: 80px;
    justify-content: center;
    padding: 6px 8px;
    font-size: 13px;
  }

  .alpha-ai-speech-button span {
    display: none;
  }
}

/* 再生中のアニメーション効果 */
.alpha-ai-speech-play.playing {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
}

.print-confirm-modal {
  max-width: 600px;
  width: 90%;
}

.print-terms-message {
  text-align: left;
  margin: 20px 0;
}

.print-terms-content {
  padding: 0;
}

.print-terms-content h4 {
  color: #d32f2f;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 16px;
}

.print-terms-list {
  margin: 15px 0;
  padding-left: 20px;
}

.print-terms-list li {
  margin: 8px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.print-warning-box {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 12px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-warning-icon {
  color: #ff6f00;
  font-size: 16px;
  flex-shrink: 0;
}

.print-warning-box span {
  color: #856404;
  font-size: 13px;
  font-weight: 500;
}

.print-agreement-text {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-top: 15px;
  font-weight: 500;
}

.print-modal-buttons {
  margin-top: 25px;
  gap: 15px;
}

.print-agree-button {
  background-color: #1976d2 !important;
  color: white !important;
  padding: 12px 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.print-agree-button:hover {
  background-color: #1565c0 !important;
}

.button-icon {
  font-size: 14px;
}

/* ウォーターマーク用スタイル（印刷時のみ適用） */
@media print {
  .watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 48px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.1);
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    font-family: Arial, sans-serif;
  }
  
  .watermark-repeat {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 150px,
        rgba(0, 0, 0, 0.03) 150px,
        rgba(0, 0, 0, 0.03) 160px
      );
    z-index: 9998;
    pointer-events: none;
  }
}

/* ============================================
   AlphaFinderFilters.js 専用チェックボックススタイル
   ============================================ */

/* より詳細度を上げたバージョン */
.af-filter-checkbox.af-filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  flex-wrap: nowrap !important;
}

.af-filter-checkbox.af-filter-checkbox input {
  display: none;
}

.af-checkbox-label.af-checkbox-label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xs);
  background-color: var(--bg-white);
  flex-shrink: 0 !important;
}

/* ================================================================================
   Phase 8-13: Alpha Finder Market Journal - 追加スタイル
   ※ MarketJournalの既存スタイルを再利用、説明文のみ追加
   ================================================================================ */

/* Heads Up! 説明文（AlphaFinderMarketJournal専用） */
.home-journal-description {
  padding: var(--spacing-sm) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-warning);
  text-align: left;
}

.home-journal-description p {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
}

.home-journal-ContextArticleCard {
  text-align: left;
}

/* ================================================================================
   AI Analysis Results - MarketJournal Style Enhancement
   Phase: AI分析結果のスタイル改善
   ※ 既存スタイルとの衝突を避けるため、新しいクラス名を使用
   Add this to the end of alpha.css
   ================================================================================ */

/* ================================================================================
   Full Report Print Button (in ProfileModal)
   ================================================================================ */

.profile-print-button-container {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: #f8fafc;
  background-color: var(--bg-secondary, #f8fafc);
  border-bottom: 1px solid #e2e8f0;
  border-bottom: 1px solid var(--border-primary, #e2e8f0);
  margin-bottom: var(--spacing-md);
}

.profile-print-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: #3b82f6;
  background-color: var(--color-primary, #3b82f6);
  color: white;
  border: none;
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-print-button:hover:not(:disabled) {
  background-color: #2563eb;
  background-color: var(--color-primary-dark, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.profile-print-button:disabled {
  background-color: #9ca3af;
  background-color: var(--bg-tertiary, #9ca3af);
  cursor: not-allowed;
  opacity: 0.7;
}

.profile-print-button .print-icon {
  font-size: 1rem;
  margin-right: var(--spacing-xs);
}

.profile-print-button .print-lock-icon {
  font-size: 0.875rem;
  margin-right: var(--spacing-xs);
}

.alpha-print-button-text {
  margin-left: var(--spacing-sm);
}
/* ================================================================================
   AI Analysis Results Container - New Layout
   ★ 左寄せ（センタリング解除）
   ================================================================================ */

.alpha-ai-results-container {
  background-color: #ffffff;
  background-color: var(--bg-primary, #ffffff);
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-msm);
  line-height: 1.6;
  text-align: left !important;  /* ★ 左寄せ強制 */
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.alpha-ai-results-container * {
  text-align: left !important;  /* ★ 全子要素も左寄せ */
}

/* テーブルのみセンタリング許可 */
.alpha-ai-results-container table,
.alpha-ai-results-container th,
.alpha-ai-results-container td {
  text-align: center !important;
}

/* ================================================================================
   Card-based Section Layout (MarketJournal Style)
   ================================================================================ */

.alpha-ai-card {
  background-color: #f8fafc;
  background-color: var(--bg-secondary, #f8fafc);
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  border: 1px solid #e2e8f0;
  border: 1px solid var(--border-primary, #e2e8f0);
}

.alpha-ai-card:last-child {
  margin-bottom: 0;
}

/* ================================================================================
   Card Title - 大タイトル（H4相当）
   ★ MarketJournalの .home-journal-section-title を参考
   ================================================================================ */

.alpha-ai-card-title {
  font-size: 18px;
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  font-weight: var(--font-bold, 700);
  color: #1f2937;
  color: var(--text-primary, #1f2937);
  margin: 0 0 var(--spacing-lg) 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid #3b82f6;
  border-bottom: 2px solid var(--color-primary, #3b82f6);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: left !important;
}

.alpha-ai-card-title svg {
  color: #3b82f6;
  color: var(--color-primary, #3b82f6);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ================================================================================
   Card Content - 本文エリア
   ================================================================================ */

.alpha-ai-card-content {
  color: #4b5563;
  color: var(--text-secondary, #4b5563);
  font-size: var(--font-msm);
  line-height: 1.4;
  text-align: left !important;
}

/* ================================================================================
   Subsection - 中タイトル（H5相当）
   ================================================================================ */

.alpha-ai-card-subsection {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid #e2e8f0;
  border-top: 1px solid var(--border-primary, #e2e8f0);
}

.alpha-ai-card-subsection-title {
  font-size: 16px;
  font-size: var(--font-md, 16px);
  font-weight: 600;
  font-weight: var(--font-semibold, 600);
  color: #374151;
  color: var(--text-primary, #374151);
  margin: 0 0 var(--spacing-md) 0;
  padding-left: var(--spacing-sm);
  border-left: 3px solid #3b82f6;
  border-left: 3px solid var(--color-primary, #3b82f6);
  text-align: left !important;
}

.alpha-ai-card-subsection-content {
  color: #4b5563;
  color: var(--text-secondary, #4b5563);
  line-height: 1.4;
  padding-left: var(--spacing-sm);
}

/* ================================================================================
   List Styles - 箇条書き
   ★ MarketJournalの .home-journal-risks-list を参考
   ================================================================================ */

.alpha-ai-card-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.alpha-ai-card-list-item {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background-color: #ffffff;
  background-color: var(--bg-primary, #ffffff);
  border-radius: 6px;
  border-radius: var(--radius-sm, 6px);
  border-left: 4px solid #3b82f6;
  border-left: 4px solid var(--color-primary, #3b82f6);
  line-height: 1.4;
  text-align: left !important;
}

.alpha-ai-card-list-item:last-child {
  margin-bottom: 0;
}

.alpha-ai-list-label {
  color: #1f2937;
  color: var(--text-primary, #1f2937);
  font-weight: 600;
  font-weight: var(--font-semibold, 600);
}

.alpha-ai-list-desc {
  color: #4b5563;
  color: var(--text-secondary, #4b5563);
}

/* ================================================================================
   Text Paragraph Styles - 本文
   ================================================================================ */

.alpha-ai-text-paragraph {
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
  color: #4b5563;
  color: var(--text-secondary, #4b5563);
  text-align: left !important;
}

.alpha-ai-text-paragraph:last-child {
  margin-bottom: 0;
}

.alpha-ai-text-paragraph strong {
  color: #1f2937;
  color: var(--text-primary, #1f2937);
  font-weight: 600;
  font-weight: var(--font-semibold, 600);
}

.alpha-ai-text-paragraph code {
  background-color: #e9ecef;
  background-color: var(--bg-tertiary, #e9ecef);
  padding: 2px 6px;
  border-radius: 4px;
  border-radius: var(--radius-xs, 4px);
  font-family: monospace;
  font-size: var(--font-sm);
}

/* ================================================================================
   Risk Section (Warning Style)
   ★ MarketJournalの警告スタイルを参考
   ================================================================================ */

.alpha-ai-card-risk {
  background-color: #fffbeb;
  background-color: var(--color-warning-bg, #fffbeb);
  border: 1px solid #f59e0b;
  border: 1px solid var(--color-warning, #f59e0b);
  border-left: 4px solid #f59e0b;
  border-left: 4px solid var(--color-warning, #f59e0b);
}

.alpha-ai-card-risk .alpha-ai-card-title {
  border-bottom-color: #f59e0b;
  border-bottom-color: var(--color-warning, #f59e0b);
  color: #92400e;
  color: var(--color-warning-dark, #92400e);
}

.alpha-ai-card-risk .alpha-ai-card-title svg {
  color: #92400e;
  color: var(--color-warning-dark, #92400e);
}

.alpha-ai-card-risk .alpha-ai-card-list-item {
  border-left-color: #f59e0b;
  border-left-color: var(--color-warning, #f59e0b);
}

/* ================================================================================
   Conclusion Section (Highlight Style)
   ================================================================================ */

.alpha-ai-card-conclusion {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  background: linear-gradient(135deg, var(--color-primary-light, #eff6ff) 0%, var(--bg-secondary, #f8fafc) 100%);
  border: 1px solid #bfdbfe;
  border: 1px solid var(--color-primary-light, #bfdbfe);
  border-left: 4px solid #3b82f6;
  border-left: 4px solid var(--color-primary, #3b82f6);
}

.alpha-ai-card-conclusion-title {
  font-size: 18px;
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  font-weight: var(--font-bold, 700);
  color: #2563eb;
  color: var(--color-primary, #2563eb);
  margin: 0 0 var(--spacing-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: left !important;
}

.alpha-ai-card-conclusion-title svg {
  color: #2563eb;
  color: var(--color-primary, #2563eb);
  width: 20px;
  height: 20px;
}

.alpha-ai-card-conclusion-text {
  color: #1f2937;
  color: var(--text-primary, #1f2937);
  line-height: 1.7;
  font-size: 14px;
  font-size: var(--font-msm, 14px);
}

/* ================================================================================
   Enhanced Table Styles within Cards
   ================================================================================ */

.alpha-ai-results-container .alpha-ai-table-container {
  margin: var(--spacing-lg) 0;
  overflow-x: auto;
}

.alpha-ai-results-container .profile-metric-table {
  background-color: #ffffff;
  background-color: var(--bg-primary, #ffffff);
  border-radius: 8px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}

.alpha-ai-results-container .profile-metric-table th {
  background-color: #f3f4f6;
  background-color: var(--bg-tertiary, #f3f4f6);
  color: #374151;
  color: var(--text-primary, #374151);
  font-weight: 600;
  font-weight: var(--font-semibold, 600);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center !important;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-primary, #e5e7eb);
  font-size: 13px;
  font-size: var(--font-sm, 13px);
}

.alpha-ai-results-container .profile-metric-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-primary, #e5e7eb);
  vertical-align: middle;
  text-align: center !important;
  font-size: 13px;
  font-size: var(--font-sm, 13px);
}

.alpha-ai-results-container .profile-metric-table tr:nth-child(even) {
  background-color: #f9fafb;
  background-color: var(--bg-secondary, #f9fafb);
}

.alpha-ai-results-container .profile-metric-table tr:hover {
  background-color: #f1f5f9;
  background-color: var(--bg-hover, #f1f5f9);
}

/* ================================================================================
   Responsive Adjustments
   ================================================================================ */

@media (max-width: 768px) {
  .alpha-ai-results-container {
    padding: var(--spacing-md);
  }

  .alpha-ai-card {
    padding: var(--spacing-md);
  }

  .alpha-ai-card-title {
    font-size: 16px;
    font-size: var(--font-md, 16px);
  }

  .alpha-ai-card-subsection-title {
    font-size: 14px;
    font-size: var(--font-msm, 14px);
  }

  .alpha-ai-card-list-item {
    padding: var(--spacing-sm);
  }

  .profile-print-button-container {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .profile-print-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-xs);
  }
}

/* ================================================================================
   Print Styles for Full Report
   ★ FontAwesomeアイコン問題の修正
   ================================================================================ */

@media print {
  .alpha-ai-results-container {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .alpha-ai-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    background-color: #f8fafc !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .alpha-ai-card-list-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .alpha-ai-card-risk {
    background-color: #fffbeb !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .alpha-ai-card-conclusion {
    background: #eff6ff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .profile-print-button-container {
    display: none !important;
  }

  /* ★ アイコンを印刷時に非表示 */
  .alpha-ai-card-title svg,
  .alpha-ai-card-conclusion-title svg,
  .fa, .fas, .far, .fal, .fab,
  [class^="fa-"],
  [class*=" fa-"],
  svg.lucide {
    display: none !important;
  }

  /* テーブルの印刷対応 */
  .alpha-ai-results-container .profile-metric-table {
    page-break-inside: avoid;
  }
}


/* チェックされた時の背景色 */
.af-filter-checkbox input:checked + .af-checkbox-label {
  background-color: #007bff;
  background-color: var(--accent-primary, #007bff);
  border-color: #007bff;
  border-color: var(--accent-primary, #007bff);
}

/* チェックアイコンを確実に表示 */
.af-checkbox-label .checkbox-icon {
  display: block;
  color: #fff;
  color: var(--text-white, #fff);
  font-size: 10px;
}
/* Home Container Styles */
.home-container {
    display: flex;
    flex-direction: column;
    width: 99%;
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
  }
  
  .home-title {
    font-size: var(--font-xxl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xxl);
    margin-left: var(--spacing-md);
  }
  
  .home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--spacing-xxl);
    width: 100%;
  }
  
  .home-grid-item {
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  
  .home-grid-item-full {
    grid-column: 1 / -1;
  }
  
  .home-section-title {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    margin: 0;
    color: var(--text-primary);
  }
  
  .home-loading, .home-error, .home-no-events, .home-no-chart {
    padding: var(--spacing-xxl);
    text-align: center;
    color: var(--text-tertiary);
  }
  
  .home-error {
    color: var(--text-danger);
  }
  
  .home-btn {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  
  .home-btn:hover {
    background-color: var(--bg-hover);
  }
    
  .home-tab,
  .home-tab-unemployment {
    padding: var(--spacing-md) var(--spacing-xl);
    border: 1px solid var(--border-primary);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-sm);
    transition: all var(--transition-fast);
    margin-bottom: var(--spacing-sm); /* ボタン間の下側マージン */
    white-space: nowrap; /* テキストを折り返さない */
  }
  
  .home-tab-active {
    background-color: var(--color-primary);
    color: var(--text-white);
    border-color: var(--color-primary);
  }
    
  /* フィルター関連のスタイル */
  .home-calendar-filters {
    display: flex;
    align-items: center;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-xxl);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
  }

  .home-filter-label {
    margin-right: var(--spacing-xxl);
    font-weight: var(--font-medium);
  }

  .home-filter-option {
    display: flex;
    align-items: center;
    margin-right: var(--spacing-xl);
    cursor: pointer;
  }

  .home-filter-option input[type="checkbox"] {
    margin-right: var(--spacing-sm);
  }

  /* ページネーション関連のスタイル */
  .home-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--margin-lg);
  }

  .home-page-btn {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  
  .home-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-disabled);
  }
  
  .home-page-btn:hover {
    background-color: var(--color-primary-dark);
  }

  .home-page-info {
    font-size: var(--font-sm);
    color: var(--text-tertiary);
  }

  /* イベント結果表示用のスタイル */
  .home-event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  
  .home-event-result {
    margin-top: var(--spacing-sm);
  }

  .home-event-result span {
    font-weight: var(--font-medium);
    margin-right: var(--spacing-sm);
  }

  .home-event-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .home-event-table th,
  .home-event-table td {
    padding: var(--spacing-lg) var(--spacing-xxl);
    border-bottom: 1px solid var(--border-primary);
  }
  
  .home-event-table tr:last-child td {
    border-bottom: none;
  }
  
  .home-event-table th {
    background-color: var(--bg-secondary);
    font-weight: var(--font-medium);
    text-align: left;
    font-size: var(--font-sm);
    color: var(--text-secondary);
  }
 
  .home-event-row:hover {
    background-color: var(--bg-hover);
  }
  
  /* Calendar Styles */
  .home-calendar-container {
    padding: var(--spacing-xxl);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--margin-xl);
  }
  
  .home-event-group {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--margin-lg);
    overflow: hidden;
  }
  
  .home-event-date-header {
    background-color: var(--bg-tertiary);
    padding: var(--spacing-lg) var(--spacing-xxl);
    font-weight: var(--font-medium);
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
  }
  
  .home-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--margin-lg);
  }
  
  .home-calendar-navigation {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
  }
  
  .home-calendar-month {
    font-weight: var(--font-medium);
    color: var(--text-primary);
  }
  
  .home-calendar-events {
    margin-top: var(--spacing-xxl);
  }
  
  .home-calendar-footer {
    margin-top: var(--margin-lg);
    text-align: right;
    color: var(--text-tertiary);
    font-size: var(--font-xs);
  }

  .home-no-events {
    color: var(--text-secondary);
    text-align: center;
    padding: var(--spacing-xxl);
  }
  
  .home-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
    
  .home-event-item {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
  }

  .home-event-item:last-child {
    border-bottom: none;
  }
  
  .home-event-item:hover {
    background-color: var(--bg-hover);
  }
  
  .home-event-date {
    font-weight: var(--font-medium);
    color: var(--text-primary);
  }
  
  .home-event-time {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
  }
  
  .home-event-name {
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  .home-event-details {
    font-size: var(--font-sm);
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    grid-column: 1 / -1;
  }
    
  .home-event-impact {
    text-transform: uppercase;
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-xs);
    text-align: center;
  }
  
  .home-impact-high {
    color: var(--color-danger);
    font-weight: var(--font-semibold);
  }
  
  .home-impact-medium {
    color: var(--color-warning);
    font-weight: var(--font-semibold);
  }
  
  .home-impact-low {
    color: var(--color-info);
  }
  
  .home-event-forecast span,
  .home-event-previous span {
    font-weight: var(--font-medium);
  }

  /* データなし表示用のスタイル */
  .home-no-data {
    padding: var(--spacing-xxl);
    text-align: center;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-xl);
    color: var(--text-tertiary);
  }

  
  /* Economic Indicators Styles */
  .home-indicators-container {
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xxl);
  }
  
  .home-indicators-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
  }
  
  .home-indicators-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    flex-wrap: wrap; /* 折り返しを有効にする */
    justify-content: flex-start; /* 左揃え */
    max-width: 100%; /* コンテナの最大幅を設定 */
  }
    
  .home-indicator-.home-indicator-details {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
  }
  
  .home-indicator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
  }
  
  .home-indicator-name {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
  }
  
  .home-indicator-date {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
  }
  
  .home-indicator-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: var(--spacing-xl);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
  }
  
  .home-indicator-value-container {
    background-color: var(--bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }
  
  .home-indicator-label {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-xs);
  }
  
  .home-indicator-value {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
  }
  
  
  .home-value-positive {
    color: var(--color-success);
    font-weight: var(--font-medium);
  }
  
  .home-value-negative {
    color: var(--color-danger);
    font-weight: var(--font-medium);
  }
  
  .home-indicator-alert {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-xxl);
    border-radius: var(--radius-md);
  }
    
  .home-indicator-description {
    margin-bottom: var(--spacing-xl);
    color: var(--text-secondary);
    line-height: 1.5;
  }
  
  .home-indicator-source {
    margin-top: var(--spacing-lg);
    text-align: right;
    color: var(--text-tertiary);
    font-size: var(--font-xs);
  }

  .home-alert-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
  }
    
  .home-alert-positive {
    background-color: rgba(var(--color-success), 0.1);
    border-left: 4px solid var(--color-success);
  }
  
  .home-alert-negative {
    background-color: rgba(var(--color-danger), 0.1);
    border-left: 4px solid var(--color-danger);
  }
    
  .home-indicator-chart {
    margin-top: var(--spacing-xxl);
  }
  
  .home-chart-title {
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
  }
  
  .home-chart-container {
    position: relative;
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xxl);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
  }
  
  .home-chart {
    width: 100%;
    height: auto;
    min-height: 150px;
  }
    
  .home-chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    font-size: var(--font-xs);
    color: var(--text-tertiary);
  }
  
  .home-chart-label {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: var(--font-xxs);
  }
  
    
  .home-no-chart {
    color: var(--text-secondary);
    text-align: center;
    padding: var(--spacing-xl);
  }
  
  /* News Styles */
  .home-news-container {
    padding: var(--spacing-xxl);
  }
  
  .home-news-header {
    margin-bottom: var(--spacing-xxl);
  }
  
  .home-news-tabs {
    display: flex;
    margin-top: var(--spacing-lg);
    border-bottom: 1px solid var(--border-primary);
  }
  
  .home-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: var(--spacing-xxl);
  }
  
  .home-news-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  
  .home-news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
  
  .home-news-date {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
  }
  
  .home-news-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: 1.3;
  }
  
  .home-news-source {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-lg);
  }
  
  .home-news-summary {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
  }
  
  .home-news-tickers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    align-items: center;
  }
  
  .home-tickers-label {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
  }
  
  .home-ticker-tag {
    font-size: var(--font-xs);
    border: 1px solid var(--bg-tertiary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-weight: var(--font-medium);
  }
  
  .home-news-link {
    align-self: flex-start;
    text-decoration: none;
    color: var(--color-primary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
  }
  
  .home-news-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
  }
  
  .text-left {
    text-align: left;
  }
  
  .text-right {
    text-align: right;
  }
  
  .text-center {
    text-align: center;
  }
  
  /* Responsive Styles */
  
  @media (max-width: 1200px) {
    .home-calendar-header,
    .home-indicators-header,
    .home-news-header {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .home-calendar-navigation,
    .home-indicators-tabs,
    .home-news-tabs {
      margin-top: var(--spacing-lg);
    }
    
    .home-event-item {
      grid-template-columns: 1fr;
      grid-gap: var(--spacing-sm);
    }
    
    .home-indicator-values {
      flex-direction: column;
      gap: var(--spacing-lg);
    }
    
    .home-news-grid {
      grid-template-columns: 1fr;
    }

    .home-grid {
      grid-template-columns: 1fr;
      width: 100%;
    }
    
    .home-event-item {
      grid-template-columns: 70px 70px 1fr 70px;
    }

    .home-container {
      margin-left: -0.3rem;
      width: 98%;      
    }
  }

  @media (max-width: 768px) {
    .home-calendar-header,
    .home-indicators-header,
    .home-news-header {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .home-calendar-navigation,
    .home-indicators-tabs,
    .home-news-tabs {
      margin-top: var(--spacing-lg);
    }
  
    .home-indicators-tabs {
      display: grid; /* グリッドレイアウトに変更 */
      grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
      grid-gap: var(--spacing-xs);
      gap: var(--spacing-xs); /* 間隔を少し狭く */
      width: 100%;
    }
    
    .home-tab {
      padding: var(--spacing-sm) var(--spacing-md); /* パディングを小さく */
      text-align: center; /* テキストを中央揃え */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .home-event-item {
      grid-template-columns: 1fr;
      grid-gap: var(--spacing-sm);
    }
    
    .home-indicator-values {
      flex-direction: column;
      gap: var(--spacing-lg);
    }
    
    .home-news-grid {
      grid-template-columns: 1fr;
    }

    .home-grid {
      grid-template-columns: 1fr;
      width: 100%;
    }
    
    .home-event-item {
      grid-template-columns: 70px 70px 1fr 70px;
    }

    .home-container {
      margin-left: -1.5rem;
      width: 94%;      
    }
  
    .home-indicator-values {
      display: flex !important; /* 強制的にフレックスに */
      flex-direction: row !important; /* 強制的に横並びに */
      flex-wrap: nowrap !important; /* 折り返し禁止 */
      overflow-x: auto; /* 横スクロール可能に */
      gap: var(--spacing-sm); /* 間隔を縮める */
      padding-bottom: var(--spacing-sm);
      margin-bottom: var(--spacing-lg);
      width: 100%;
    }
    
    .home-indicator-value-container {
      flex: 1 0 auto; /* 伸縮しない、自然サイズを維持 */
      min-width: 90px; /* 最小幅を設定 */
      width: 30%; /* およそ3等分 */
    }
    
    /* Yield Curveの追加データなど */
    .home-indicator-value-container:nth-child(n+4) {
      flex: 1 0 100%; /* 4つ目以降は幅100% */
    }
  }

  @media (max-width: 375px) {
    .home-indicators-tabs {
      grid-template-columns: repeat(2, 1fr); /* 2列のグリッドに変更 */
    }
    
    .home-indicator-value-container {
      min-width: 80px;
      padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .home-indicator-label {
      font-size: 0.7rem;
    }
    
    .home-indicator-value {
      font-size: 0.9rem;
    }
  }
  
  @supports (-webkit-touch-callout: none) {
    .home-calendar-header,
    .home-indicators-header,
    .home-news-header {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .home-calendar-navigation,
    .home-indicators-tabs,
    .home-news-tabs {
      margin-top: var(--spacing-lg);
    }
    
    .home-event-item {
      grid-template-columns: 1fr;
      grid-gap: var(--spacing-sm);
    }
    
    .home-indicator-values {
      flex-direction: column;
      gap: var(--spacing-lg);
    }
    
    .home-news-grid {
      grid-template-columns: 1fr;
    }

    .home-grid {
      grid-template-columns: 1fr;
      width: 100%;
    }
    
    .home-event-item {
      grid-template-columns: 70px 70px 1fr 70px;
    }

    .home-container {
      margin-left: -1.6rem;
      width: 94%;      
    }

    .home-tab-unemployment {
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 80px;
    }
      
  .home-event-group {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--margin-lg);
    overflow: hidden;
  }

  .text-right,
  .text-left,
  .home-event-date-header {
    padding-right: 1rem;
    font-size: var(--font-sm);
  }

  .home-event-date-header {
    font-weight: var(--font-semibold);
  }
}

/* ================================================================================
   Market Journal Styles (Phase 8-5)
   Add this to the end of home.css
   ================================================================================ */

.home-journal-container {
  padding: var(--spacing-xxl);
  margin-bottom: var(--margin-lg);
}

.home-journal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.home-journal-icon {
  margin-right: var(--spacing-sm);
  color: var(--color-primary);
}

.home-journal-date {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.home-journal-card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
}

.home-journal-meta {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: center;
}

.home-journal-sentiment {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

.home-journal-sentiment-success {
  background-color: #d4edda;
  background-color: var(--color-success-bg, #d4edda);
  color: #28a745;
  color: var(--color-success, #28a745);
}

.home-journal-sentiment-danger {
  background-color: #f8d7da;
  background-color: var(--color-danger-bg, #f8d7da);
  color: #dc3545;
  color: var(--color-danger, #dc3545);
}

.home-journal-sentiment-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.home-journal-sentiment-info {
  background-color: #d1ecf1;
  background-color: var(--color-info-bg, #d1ecf1);
  color: #17a2b8;
  color: var(--color-info, #17a2b8);
}

.home-journal-sentiment-warning {
  background-color: #fff3cd;
  background-color: var(--color-warning-bg, #fff3cd);
  color: #ffc107;
  color: var(--color-warning, #ffc107);
}

.home-journal-confidence {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.home-ticker-featured {
  background-color: #e7f1ff;
  background-color: var(--color-primary-light, #e7f1ff);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

/* Expanded Content */
.home-journal-expanded {
  margin-top: var(--spacing-xxl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-primary);
}

.home-journal-section {
  margin-bottom: var(--spacing-xxl);
  font-size: var(--font-msm);
}

.home-journal-section-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-primary);
}

/* Development Items */
.home-journal-development {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.home-journal-dev-headline {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.home-journal-dev-text {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--spacing-md) 0;
}

.home-journal-dev-meta {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

.home-journal-impact {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
}

.home-impact-high {
  background-color: #f8d7da;
  background-color: var(--color-danger-bg, #f8d7da);
  color: #dc3545;
  color: var(--color-danger, #dc3545);
}

.home-impact-medium {
  background-color: #fff3cd;
  background-color: var(--color-warning-bg, #fff3cd);
  color: #856404;
  color: var(--color-warning-dark, #856404);
}

.home-impact-low {
  background-color: #d1ecf1;
  background-color: var(--color-info-bg, #d1ecf1);
  color: #17a2b8;
  color: var(--color-info, #17a2b8);
}

/* Sector Analysis Grid */
.home-journal-sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

.home-journal-sector-group {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.home-journal-sector-label {
  display: block;
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-sm);
}

.home-journal-bullish {
  color: #28a745;
  color: var(--color-success, #28a745);
}

.home-journal-bearish {
  color: #dc3545;
  color: var(--color-danger, #dc3545);
}

.home-journal-sector-item {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-primary);
}

.home-journal-sector-item:last-child {
  border-bottom: none;
}

.home-journal-sector-item strong {
  display: block;
  margin-bottom: var(--spacing-xs);
}

.home-journal-sector-item span {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.home-journal-neutral-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Stocks Grid */
.home-journal-stocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

.home-journal-stock-card {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border: 1px solid var(--border-primary);
}

.home-journal-stock-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.home-journal-stock-ticker {
  font-weight: var(--font-bold);
  font-size: var(--font-lg);
  color: var(--color-primary);
}

.home-journal-stock-name {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.home-journal-outlook {
  font-size: var(--font-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

.home-journal-outlook-bullish {
  background-color: #d4edda;
  background-color: var(--color-success-bg, #d4edda);
  color: #28a745;
  color: var(--color-success, #28a745);
}

.home-journal-outlook-bearish {
  background-color: #f8d7da;
  background-color: var(--color-danger-bg, #f8d7da);
  color: #dc3545;
  color: var(--color-danger, #dc3545);
}

.home-journal-outlook-neutral {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.home-journal-stock-reason {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--spacing-sm) 0;
}

.home-journal-stock-catalyst {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin: 0;
}

/* Geopolitical Section */
.home-journal-geo {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.home-journal-geo-risk {
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-medium);
}

.home-journal-risk-level {
  margin-left: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
  font-weight: var(--font-semibold);
}

.home-journal-risk-high {
  background-color: #f8d7da;
  background-color: var(--color-danger-bg, #f8d7da);
  color: #dc3545;
  color: var(--color-danger, #dc3545);
}

.home-journal-risk-moderate {
  background-color: #fff3cd;
  background-color: var(--color-warning-bg, #fff3cd);
  color: #856404;
  color: var(--color-warning-dark, #856404);
}

.home-journal-risk-low {
  background-color: #d4edda;
  background-color: var(--color-success-bg, #d4edda);
  color: #28a745;
  color: var(--color-success, #28a745);
}

.home-journal-risks-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0 0 0;
}

.home-journal-risks-list li {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-primary);
}

.home-journal-risks-list li:last-child {
  border-bottom: none;
}

.home-journal-risks-list li p {
  margin: var(--spacing-xs) 0 0 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* Risk Factors */
.home-journal-risk-item {
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  border-left: 3px solid #ffc107;
  border-left: 3px solid var(--color-warning, #ffc107);
}

.home-journal-risk-item strong {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.home-journal-risk-item p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0;
}

.home-journal-risk-meta {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-sm);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

/* Sources */
.home-journal-sources {
  padding: var(--spacing-md);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-xl);
  font-size: var(--font-xs);
}

/* Sources */
.home-journal-attribution {
  padding: var(--spacing-md);
  font-size: var(--font-xs);
}

.home-journal-sources-text,
.home-journal-attribution-text {
  color: var(--text-tertiary);
  margin-left: var(--spacing-sm);
}

/* Disclaimer */
.home-journal-disclaimer {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  line-height: 1.5;
}

.home-journal-disclaimer svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Toggle Button */
.home-journal-toggle {
  width: 100%;
  margin-top: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  color: var(--color-primary);
  font-weight: var(--font-medium);
  font-size: var(--font-sm);
}

.home-journal-toggle:hover {
  background-color: #e7f1ff;
  background-color: var(--color-primary-light, #e7f1ff);
}

/* Responsive */
@media (max-width: 768px) {
  .home-journal-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-journal-sector-grid,
  .home-journal-stocks-grid {
    grid-template-columns: 1fr;
  }

  .home-journal-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================================================================================
   Phase 8-8 & 8-9: Market Journal Additional Styles
   アーカイブ表示とインタラクティブリンク用の追加スタイル
   home.cssの末尾に追加してください
   ================================================================================ */

/* ================================================================================
   Phase 8-8: Archive Section Styles
   ================================================================================ */

.home-journal-archive-count {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.home-journal-archive-section {
  margin-top: var(--spacing-xxl);
}

.home-journal-archive-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.home-journal-archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Archive Card (smaller than main) */
.home-journal-card-archive {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.home-journal-card-archive:hover {
  border-color: #a0c4ff;
  border-color: var(--color-primary-light, #a0c4ff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.home-journal-card-main {
  margin-bottom: var(--spacing-lg);
}

.home-journal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.home-journal-archive-article-title {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.4;
}

.home-journal-archive-summary {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--spacing-md) 0;
}

/* Compact sentiment badge for archive */
.home-journal-sentiment-compact {
  font-size: var(--font-md);
  line-height: 1;
}

/* ================================================================================
   Phase 8-9: Interactive Links Styles
   ================================================================================ */

/* Clickable tags */
.home-ticker-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.home-ticker-clickable:hover {
  background-color: var(--color-primary);
  color: #fff;
  color: var(--color-white, #fff);
  transform: translateY(-1px);
}

.home-ticker-clickable:active {
  transform: translateY(0);
}

/* Link icon inside tags */
.home-ticker-link-icon {
  font-size: 0.7em;
  margin-left: var(--spacing-xs);
  opacity: 0.6;
}

.home-ticker-clickable:hover .home-ticker-link-icon {
  opacity: 1;
}

/* Icon in label */
.home-journal-link-icon {
  margin-right: var(--spacing-xs);
  color: var(--text-tertiary);
}

/* Clickable sector items */
.home-journal-sector-clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.home-journal-sector-clickable:hover {
  background-color: var(--bg-tertiary);
}

.home-journal-sector-clickable strong {
  color: var(--color-primary);
}

/* Clickable stock cards */
.home-journal-stock-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-journal-stock-clickable:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.home-journal-stock-clickable:active {
  transform: translateY(0);
}

/* Visual hint for clickable elements */
.home-ticker-tag[title]::after,
.home-journal-sector-clickable::after,
.home-journal-stock-clickable::after {
  content: '';
}

/* ================================================================================
   Responsive adjustments for archive
   ================================================================================ */

@media (max-width: 768px) {
  .home-journal-archive-section {
    margin-top: var(--spacing-xl);
  }

  .home-journal-card-archive {
    padding: var(--spacing-md);
  }

  .home-journal-archive-article-title {
    font-size: var(--font-sm);
  }

  .home-journal-archive-summary {
    font-size: var(--font-xs);
  }
  
  .home-ticker-link-icon {
    display: none; /* Hide link icons on mobile to save space */
  }
}

/* ================================================================================
   Animation for expand/collapse
   ================================================================================ */

.home-journal-expanded {
  animation: journalExpandIn 0.3s ease-out;
}

@keyframes journalExpandIn {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 5000px;
  }
}
/* DefaultPages.css - すべてのクラスにdefault-プレフィックスを追加 */
.default-analysis-content {
    padding: 2rem;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .default-analysis-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 1rem;
  }
  
  .default-analysis-header h2 {
    font-size: 1.8rem;
    color: #2d3748;
    font-weight: 600;
  }
  
  .default-analysis-message {
    background-color: #f8f9fa;
    border-left: 4px solid #4a6eb5;
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: 0 4px 4px 0;
  }
  
  .default-analysis-message p {
    margin: 0;
    line-height: 1.6;
    color: #4a5568;
  }
  
  .default-analysis-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
    gap: 1rem;
  }
  
  .default-action-button {
    padding: 0.875rem 1.5rem;
    background-color: #4a6eb5;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: background-color 0.3s, transform 0.2s;
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
  
  .default-action-button:hover {
    background-color: #3a5795;
    transform: translateY(-2px);
  }
  
  .default-action-icon {
    font-size: 1.25rem;
  }
  
  .default-or-divider {
    margin: 1rem 0;
    color: #666;
    position: relative;
    text-align: center;
    width: 100%;
    font-size: 0.875rem;
  }
  
  .default-or-divider::before,
  .default-or-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: #ddd;
  }
  
  .default-or-divider::before {
    left: 0;
  }
  
  .default-or-divider::after {
    right: 0;
  }
  
  .default-analysis-features {
    margin-top: 2rem;
    margin-bottom: 3rem;
  }
  
  .default-analysis-features h3 {
    margin-bottom: 1.5rem;
    color: #2d3748;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
    font-weight: 600;
  }
  
  .default-analysis-features h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #4a6eb5;
  }
  
  .default-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
  }
  
  .default-feature-card {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 6px;
    border-left: 3px solid #4a6eb5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .default-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .default-feature-card h4 {
    color: #4a6eb5;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .default-feature-icon {
    color: #4a6eb5;
  }
  
  .default-feature-card p {
    margin: 0;
    color: #4a5568;
    line-height: 1.5;
    font-size: 0.95rem;
  }
  
  .default-membership-promotion {
    background-color: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 2rem;
    text-align: center;
    margin-top: 2rem;
  }
  
  .default-membership-promotion h3 {
    color: #2563eb;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
  }
  
  .default-membership-promotion p {
    color: #4b5563;
    margin-bottom: 1.5rem;
    line-height: 1.6;
  }
  
  .default-promotion-button {
    padding: 0.75rem 1.5rem;
    background-color: #2563eb;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .default-promotion-button:hover {
    background-color: #1d4ed8;
  }
  
  .default-search-suggestion {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
  }
  
  .default-search-suggestion p {
    margin: 0;
    color: #4a5568;
  }
  
  @media (max-width: 768px) {
    .default-analysis-content {
      padding: 1rem;
    }
    
    .default-features-grid {
      grid-template-columns: 1fr;
    }
    
    .default-analysis-header h2 {
      font-size: 1.5rem;
    }
    
    .default-membership-promotion {
      padding: 1.5rem;
    }
  }

/* Authentication Buttons CSS - DefaultPages.cssに追加 */

.default-auth-buttons {
  display: flex;
  gap: 0.75rem;
  margin-left: auto;
}

.default-auth-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.default-login-button {
  background-color: #3b82f6;
  color: white;
}

.default-login-button:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
}

.default-signup-button {
  background-color: #10b981;
  color: white;
}

.default-signup-button:hover {
  background-color: #059669;
  transform: translateY(-1px);
}

.default-button-icon {
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .default-trial-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .default-auth-buttons {
    margin-left: 0;
    margin-top: 1rem;
    width: 100%;
  }
  
  .default-auth-button {
    flex: 1 1;
    justify-content: center;
  }
}

/* SimpleDefaultWatchListHeader用のスタイル - DefaultPages.cssに追加 */

.default-trial-info-container {
  margin: 1rem 0 2rem;
  padding: 0 1rem;
}

.default-trial-info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: #f0f9ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 1.25rem;
  color: #1e40af;
}

.default-info-icon {
  color: #3b82f6;
  font-size: 1.25rem;
  margin-top: 0.125rem;
}

.default-trial-text {
  flex: 1 1;
}

.default-trial-text p {
  margin: 0;
  line-height: 1.6;
}

.default-trial-text p:first-child {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.default-trial-count {
  font-weight: 600;
}
.positive {
  color: var(--color-success);
}

.negative {
  color: var(--color-danger);
}

/* 既存のexchange-infoスタイルを修正 */
.portfolio-exchange-info {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-left: var(--spacing-sm);
  padding: var(--spacing-xx) var(--spacing-xs);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-xs);
}

/* ==== PORTFOLIO LIST REFORMED STYLES ==== */

/* ポジション一覧コンテナ（AlphaFinderProfileModalのprofile-tables-gridスタイルを流用） */
.portfolio-positions-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}

/* 個別ポジションアイテム（AlphaFinderProfileModalのcompany-profile-modalスタイルを流用） */
.portfolio-position-item {
  padding: var(--spacing-md);
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: var(--spacing-md) 0;
  width: 100%;
  border: 1px solid var(--border-primary);
}

/* ポジションセクション（AlphaFinderProfileModalのmetrics-tablesスタイルを流用） */
.portfolio-position-symbol-section,
.portfolio-position-price-section,
.portfolio-position-holding-section,
.portfolio-position-sold-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.portfolio-position-symbol-section:last-child,
.portfolio-position-price-section:last-child,
.portfolio-position-holding-section:last-child,
.portfolio-position-sold-section:last-child {
  margin-bottom: 0;
}

/* アクションボタン（既存のaction-buttonsスタイルを修正してインライン版に流用） */
.action-buttons-inline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  height: 100%;
}

/* ポートフォリオアクションボタン（既存のportfolio-action-buttonスタイルを修正） */
.portfolio-action-button-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) var(--spacing-lg);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 90px;
  width: 100%;
}

.portfolio-action-button-inline:hover {
  background-color: var(--bg-hover);
}

/* 削除ボタン（既存のdelete-buttonスタイルを修正してインライン版に流用） */
.delete-button-inline {
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--text-secondary);
}

.delete-button-inline:hover {
  background-color: var(--bg-hover);
  color: var(--text-danger);
}

/* 新しいインラインフォームコンテナ */
.inline-form-container-new {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
}

/* ==== PORTFOLIO OVERVIEW REFORMED STYLES ==== */

/* オーバービューセクション */
.portfolio-overview-section {
  margin-bottom: var(--spacing-md);
}

/* オーバービュー専用のメトリクス値スタイル */
.overview-metric-value {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.2;
}

.overview-metric-percentage {
  font-size: var(--font-sm);
  margin-top: var(--spacing-xs);
  line-height: 1.2;
}

.overview-range-value {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* オーバービューでの損益色分け（既存のpositiveクラス・negativeクラスを流用） */
.portfolio-overview-section .positive .overview-metric-value,
.portfolio-overview-section .positive .overview-metric-percentage {
  color: var(--color-success);
}

.portfolio-overview-section .negative .overview-metric-value,
.portfolio-overview-section .negative .overview-metric-percentage {
  color: var(--color-danger);
}

/* ローディング表示（既存スタイルを流用） */
.portfolio-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-lg);
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

/* ==== SHARED STYLES (AlphaFinderProfileModalから流用) ==== */

/* テーブルスタイル（AlphaFinderProfileModalのprofile-metric-tableを完全流用） */
.portfolio-profile-metric-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-primary);
  margin-bottom: var(--spacing-md);
}

.portfolio-profile-metric-table th {
  background-color: var(--bg-header);
  padding: var(--spacing-sm);
  text-align: center;
  font-weight: var(--font-semibold);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
  font-size: var(--font-sm);
}

.portfolio-profile-metric-table th[colspan] {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.portfolio-profile-metric-table td {
  padding: var(--spacing-sm);
  text-align: center;
  border: 1px solid var(--border-primary);
  font-size: var(--font-md);
}

/* 3列のテーブルの場合、各列を33.33%に設定 */
.portfolio-profile-metric-table th:not([colspan]),
.portfolio-profile-metric-table td {
  width: 33.33%;
}

/* colspanがある場合は幅を100%に */
.portfolio-profile-metric-table th[colspan] {
  width: 100%;
}

/* メトリクスカテゴリヘッダー（AlphaFinderProfileModalのmetrics-categoryを流用） */
.portfolio-metrics-category {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.portfolio-symbol-company {
  font-size: var(--font-msm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.portfolio-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: var(--spacing-lg);
}

/* ==== RESPONSIVE DESIGN ==== */

/* モバイル対応（768px以下） */
@media screen and (max-width: 768px) {
  /* ポートフォリオリスト */
  .portfolio-position-item {
    padding: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
  }
  
  .portfolio-action-button-inline {
    min-width: 80px;
    padding: var(--spacing-lg) var(--spacing-md);
    font-size: var(--font-xs);
  }
  
  .action-buttons-inline {
    gap: var(--spacing-md);
    margin: var(--spacing-md);
    padding: var(--spacing-md);  
  }
  
  /* モバイルでテーブルのパディングを調整 */
  .portfolio-position-item .portfolio-profile-metric-table th {
    padding: var(--spacing-xs);
    font-size: var(--font-sm);
  }

  .portfolio-position-item .portfolio-profile-metric-table td {
    padding: var(--spacing-xs);
    font-size: var(--font-msm);
  }

  .exchange-info {
    display: block;
    margin-left: 0;
    margin-top: var(--spacing-xs);
  }
  
  /* ポートフォリオオーバービュー */
  .overview-metric-value {
    font-size: var(--font-md);
  }
  
  .overview-metric-percentage {
    font-size: var(--font-sm);
  }
  
  .overview-range-value {
    font-size: var(--font-sm);
  }
  
  /* モバイルでオーバービューテーブルのパディングを調整 */
  .portfolio-overview-section .portfolio-profile-metric-table th,
  .portfolio-overview-section .portfolio-profile-metric-table td {
    padding: var(--spacing-xs);
    font-size: var(--font-sm);
  }

  .portfolio-positions-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 97%;
}
}

/* タブレット対応（769px-1199px） */
@media screen and (min-width: 769px) and (max-width: 1199px) {
  /* ポートフォリオリスト */
  .portfolio-position-item {
    padding: var(--spacing-md);
  }
  
  .portfolio-action-button-inline {
    min-width: 85px;
    padding: var(--spacing-md) var(--spacing-md);
  }
  
  .action-buttons-inline {
    gap: var(--spacing-sm);
    margin: var(--spacing-md);
    padding: var(--spacing-md);
  }
  
  /* ポートフォリオオーバービュー */
  .overview-metric-value {
    font-size: var(--font-md);
  }
  
  .overview-metric-percentage {
    font-size: var(--font-sm);
  }
}

/* デスクトップ対応（1200px以上） */
@media screen and (min-width: 1200px) {
  /* ポートフォリオリスト */
  .portfolio-positions-container {
    gap: var(--spacing-lg);
  }
  
  .portfolio-position-item {
    padding: var(--spacing-lg);
  }
  
  /* ポートフォリオオーバービュー */
  .portfolio-overview-section {
    margin-bottom: var(--spacing-lg);
  }
  
  .overview-metric-value {
    font-size: var(--font-lg);
  }
  
  .overview-metric-percentage {
    font-size: var(--font-md);
  }


.portfolio-legend-container {
  width: 100%; /* 幅を100%に設定 */
  margin: 0 auto; /* 中央揃え */
  padding-top: 0.5rem;
}

}

@media screen and (max-width: 768px) {

.portfolio-header-title-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
 }
}

.portfolio-header-title-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin: 0.8rem 0 0.8rem 0;
  width: 100%;
}

  .portfolio-chart-header {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.portfolio-chart-header h3 {
  font-size: var(--font-msm);
  font-weight: var(--font-semibold);
  gap: var(--spacing-sm);
  margin: 0;
}

.portfolio-legend-container {
    flex: 1 1;
    min-width: 200px;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.portfolio-profile-overview-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-primary);
  margin-bottom: var(--spacing-md);
  table-layout: fixed;
}

.portfolio-profile-overview-table th {
  background-color: var(--bg-header);
  padding: var(--spacing-sm);
  text-align: center;
  font-weight: var(--font-semibold);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
  font-size: var(--font-sm);
}

.portfolio-profile-overview-table th[colspan] {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-sm);
}

.portfolio-profile-overview-table td {
  padding: var(--spacing-sm);
  text-align: center;
  border: 1px solid var(--border-primary);
  font-size: var(--font-md);
}

/* 3列のテーブルの場合、各列を33.33%に設定 */
.portfolio-profile-overview-table th:not([colspan]),
.portfolio-profile-overview-table td {
  width: 33.33%;
}

/* colspanがある場合は幅を100%に */
.portfolio-profile-overview-table th[colspan] {
  width: 100%;
}

/* ==== PORTFOLIO TABLE FIXED LAYOUT STYLES ==== */

/* 固定レイアウトテーブル */
.portfolio-fixed-layout {
  table-layout: fixed;
}

/* 4列テーブルの列幅設定 */
.portfolio-fixed-layout th:not([colspan]):not([rowspan]),
.portfolio-fixed-layout td:not([colspan]):not([rowspan]) {
  width: 25%;
}

/* colspanがある場合は幅を100%に */
.portfolio-fixed-layout th[colspan],
.portfolio-fixed-layout td[colspan] {
  width: 100%;
}

/* rowspanがあるセルの縦方向中央揃え */
.portfolio-fixed-layout td[rowspan] {
  vertical-align: middle;
}

@media screen and (min-width: 1200px) {
  .portfolio-action-button-inline {
    min-width: 120px;
    padding: var(--spacing-md) var(--spacing-md);
  }

  
  .action-buttons-inline {
    gap: var(--spacing-sm);
    margin: var(--spacing-md);
    padding: var(--spacing-md);
  }
}

/* レジェンド */
.heatmap-legend {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.legend-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.legend-label {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  min-width: 60px;
  text-align: center;
}

.gradient-bar {
  width: 100%;
  height: 100%;
}

.legend-info {
  text-align: center;
  font-style: italic;
}
.heatmap-container {
  padding: 20px;
  background: white;
}

/* ヒートマップグリッド */
.heatmap-grid {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 24px;
  max-width: 100%;
  aspect-ratio: 1;
  min-height: 400px;
  max-height: 600px;
}

/* ヒートマップセル */
.heatmap-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px 4px;
  min-height: 60px;
  position: relative;
  overflow: hidden;
}

.heatmap-cell:hover {
  border-color: #333;
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* ヒートマップセクション */
.portfolio-heatmap-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* Treemapコンテナ */
.treemap-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.treemap-chart {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.treemap-cell {
  transition: all 0.2s ease;
  border-radius: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.treemap-cell:hover {
  border: 2px solid #333 !important;
  z-index: 10;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


/* セル内のテキスト */
.cell-symbol {
  font-weight: bold;
  font-size: 0.9em;
  text-align: center;
  margin-bottom: 4px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cell-value {
  font-size: 0.8em;
  text-align: center;
  color: #555;
  font-weight: 500;
  white-space: nowrap;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .heatmap-grid {
    gap: 4px;
    min-height: 300px;
    max-height: 500px;
  }
  
  .heatmap-cell {
    min-height: 50px;
    padding: 4px 2px;
  }
  
  .cell-symbol {
    font-size: 0.8em;
  }
  
  .cell-value {
    font-size: 0.7em;
  }
}

@media (max-width: 480px) {
  .heatmap-grid {
    gap: 2px;
    min-height: 250px;
    max-height: 400px;
  }
  
  .heatmap-cell {
    min-height: 40px;
    padding: 2px 1px;
  }
  
  .cell-symbol {
    font-size: 0.7em;
    margin-bottom: 2px;
  }
  
  .cell-value {
    font-size: 0.6em;
  }
}

/* ヒートマップ凡例 */
.heatmap-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.legend-scale {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 400px;
  width: 100%;
}

.legend-label {
  font-size: 0.85em;
  color: #666;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
}

.legend-gradient {
  flex: 1 1;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.gradient-bar {
  width: 100%;
  height: 100%;
}

/* 大きなグリッド（25個以上）の場合の調整 */
.heatmap-grid[style*="repeat(6"] .heatmap-cell {
  min-height: 50px;
}

.heatmap-grid[style*="repeat(6"] .cell-symbol {
  font-size: 0.8em;
}

.heatmap-grid[style*="repeat(6"] .cell-value {
  font-size: 0.7em;
}

/* 空のメッセージ */
.empty-chart-message {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-size: 1.1em;
}

/* ホバー時のツールチップ風エフェクト */
.heatmap-cell::after {
  content: attr(title);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.heatmap-cell:hover::after {
  opacity: 1;
}

/* 既存のスタイルとの統合 */
.portfolio-overview-container .heatmap-container {
  border-radius: 8px;
}

.portfolio-header-title-container .sort-container label {
  margin-right: 8px;
  color: #666;
  font-size: 0.9em;
}

.portfolio-header-title-container .sort-select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  font-size: 0.9em;
  color: #333;
}

.portfolio-header-title-container .sort-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Portfolio Square Grid Styles */

/* Square Grid Container */
.square-grid-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.proportional-square-chart {
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}

/* Square Cell Styles - Updated for better containment */
.square-cell {
  position: absolute;
  border: 1px solid #fff;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-user-select: none;
          user-select: none;
  padding: 2px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  min-width: 20px;
  min-height: 20px;
  max-width: 100%;
  max-height: 100%;
}

.square-cell:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-color: #333;
  border-width: 2px;
}

/* Square Cell Text Elements */
.square-cell-symbol {
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
  margin-bottom: 2px;
  color: #333;
}

.square-cell-percentage {
  text-align: center;
  line-height: 1.0;
  color: #666;
  margin-top: 1px;
}

.square-cell-value {
  text-align: center;
  line-height: 1.0;
  font-weight: bold;
  margin-top: 1px;
}

.square-cell-value.positive {
  color: #2e7d32;
}

.square-cell-value.negative {
  color: #d32f2f;
}

/* Font Sizes for Square Cells */
.square-cell-font-xs {
  font-size: 8px;
}

.square-cell-font-sm {
  font-size: 10px;
}

.square-cell-font-md {
  font-size: 12px;
}

.square-cell-font-lg {
  font-size: 14px;
}

.square-cell-font-xl {
  font-size: 16px;
}

.square-cell-value-xs {
  font-size: 8px;
}

.square-cell-value-sm {
  font-size: 9px;
}

.square-cell-value-md {
  font-size: 10px;
}

.square-cell-value-lg {
  font-size: 11px;
}

.square-cell-company-name {
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  opacity: 0.9;
  line-height: 1.1;
  margin-bottom: 2px;
  padding: 0 2px;
  word-break: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

/* Heatmap Legend Styles */
.heatmap-legend {
  width: 100%;
  max-width: 400px;
  margin-top: 10px;
}

.legend-scale {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.legend-label {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  min-width: 60px;
  text-align: center;
}

.legend-gradient {
  flex: 1 1;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.gradient-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, 
    rgba(244, 67, 54, 0.8), 
    rgba(244, 67, 54, 0.4), 
    #f5f5f5, 
    rgba(76, 175, 80, 0.4), 
    rgba(76, 175, 80, 0.8));
}

.legend-info {
  text-align: center;
  font-style: italic;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
  .square-grid-container {
    padding: 15px;
    gap: 15px;
  }
  
  .proportional-square-chart {
    width: 350px;
    height: 350px;
  }
  
  .legend-scale {
    gap: 8px;
  }
  
  .legend-label {
    font-size: 11px;
    min-width: 50px;
  }
  
  .legend-info {
    font-size: 11px;
  }

  .alpha-action-buttons-container {
    padding: 5px;
  }

}

/* Animation for smooth transitions */
@keyframes cellHover {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.square-cell:hover {
  animation: cellHover 0.2s ease-out;
}

/* Accessibility improvements */
.square-cell:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.square-cell:focus:not(:hover) {
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ツールチップトリガー - 控えめなスタイル */
.glossary-tooltip-trigger {
  position: relative;
  cursor: help;
  color: inherit;
  border-bottom: 1px dotted rgba(0, 123, 255, 0.4);
  transition: all 0.2s ease;
  display: inline;
}

.glossary-tooltip-trigger:hover {
  border-bottom-color: rgba(0, 123, 255, 0.8);
  color: #007bff;
}

/* ツールチップ本体 - 控えめな吹き出し */
.glossary-tooltip {
  position: absolute;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 8px 40px rgba(0, 0, 0, 0.06);
  max-width: 320px;
  min-width: 280px;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  animation: tooltipFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ツールチップコンテンツ */
.glossary-tooltip-content {
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #2c3e50;
}

/* ヘッダー部分 */
.glossary-header {
  padding: 16px 16px 8px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.glossary-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a202c;
  letter-spacing: -0.01em;
}

/* ボディ部分 */
.glossary-body {
  padding: 12px 16px 16px 16px;
}

.glossary-description {
  margin: 0 0 12px 0;
  color: #4a5568;
  font-size: 13px;
  line-height: 1.5;
}

/* セクション */
.glossary-section {
  margin: 8px 0;
  font-size: 12px;
}

.glossary-section:last-child {
  margin-bottom: 0;
}

.glossary-label {
  display: inline-block;
  font-weight: 500;
  color: #2d3748;
  margin-right: 6px;
  min-width: 50px;
}

.glossary-text {
  color: #4a5568;
}

.glossary-list {
  margin: 4px 0 0 0;
  padding-left: 16px;
  color: #4a5568;
}

.glossary-list li {
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.4;
}

.glossary-more {
  color: #718096;
  font-style: italic;
}

.glossary-formula {
  display: inline-block;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  background: rgba(0, 123, 255, 0.08);
  color: #0066cc;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  margin-left: 4px;
}

/* 矢印スタイル */
.glossary-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.glossary-tooltip-arrow-top {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.glossary-tooltip-arrow-bottom {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.08));
}

.glossary-tooltip-arrow-left {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(255, 255, 255, 0.98);
  filter: drop-shadow(2px 0 4px rgba(0, 0, 0, 0.08));
}

.glossary-tooltip-arrow-right {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid rgba(255, 255, 255, 0.98);
  filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.08));
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .glossary-tooltip {
    max-width: 280px;
    min-width: 240px;
  }
  
  .glossary-header {
    padding: 12px 12px 6px 12px;
  }
  
  .glossary-body {
    padding: 8px 12px 12px 12px;
  }
  
  .glossary-title {
    font-size: 14px;
  }
  
  .glossary-description {
    font-size: 12px;
  }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .glossary-tooltip {
    background: rgba(26, 32, 44, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.3),
      0 8px 40px rgba(0, 0, 0, 0.2);
  }
  
  .glossary-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  
  .glossary-title {
    color: #f7fafc;
  }
  
  .glossary-description {
    color: #cbd5e0;
  }
  
  .glossary-label {
    color: #e2e8f0;
  }
  
  .glossary-text,
  .glossary-list {
    color: #a0aec0;
  }
  
  .glossary-formula {
    background: rgba(66, 153, 225, 0.2);
    color: #90cdf4;
  }
  
  .glossary-tooltip-trigger {
    border-bottom-color: rgba(66, 153, 225, 0.4);
  }
  
  .glossary-tooltip-trigger:hover {
    border-bottom-color: rgba(66, 153, 225, 0.8);
    color: #90cdf4;
  }
  
  .glossary-tooltip-arrow-top {
    border-top-color: rgba(26, 32, 44, 0.98);
  }
  
  .glossary-tooltip-arrow-bottom {
    border-bottom-color: rgba(26, 32, 44, 0.98);
  }
  
  .glossary-tooltip-arrow-left {
    border-left-color: rgba(26, 32, 44, 0.98);
  }
  
  .glossary-tooltip-arrow-right {
    border-right-color: rgba(26, 32, 44, 0.98);
  }
}

/* アクセシビリティ：アニメーションを無効にする設定 */
@media (prefers-reduced-motion: reduce) {
  .glossary-tooltip {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .glossary-tooltip-trigger {
    transition: none;
  }
}
/* frontend/src/styles/ads.css */

/* 汎用広告コンテナスタイル */
.AD-market-top-container,
.AD-analysis-top-container,
.AD-watchlist-top-container,
.AD-portfolio-top-container,
.AD-alphafinder-top-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  position: relative;
  text-align: center;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Market（Home）上部の広告 */
.AD-market-top-container {
  margin: 15px 0 25px 0;
  background: linear-gradient(135deg, #f1f3f4 0%, #e8eaf6 100%);
  border-color: #c5cae9;
}

/* 分析画面上部の広告 */
.AD-analysis-top-container {
  margin: 10px 0 20px 0;
  background: linear-gradient(135deg, #f1f3f4 0%, #e8eaf6 100%);
  border-color: #c5cae9;
}

/* Watchlist上部の広告 */
.AD-watchlist-top-container {
  margin: 15px 0 25px 0;
  background: linear-gradient(135deg, #f1f3f4 0%, #e8eaf6 100%);
  border-color: #c5cae9;
}

/* Portfolio上部の広告 */
.AD-portfolio-top-container {
  margin: 15px 0 25px 0;
  background: linear-gradient(135deg, #f1f3f4 0%, #e8eaf6 100%);
  border-color: #c5cae9;
}

/* AlphaFinder上部の広告 */
.AD-alphafinder-top-container {
  margin: 15px 0 25px 0;
  background: linear-gradient(135deg, #f1f3f4 0%, #e8eaf6 100%);
  border-color: #c5cae9;
}

/* 免責事項スタイル */
.AD-market-top-disclaimer,
.AD-analysis-top-disclaimer,
.AD-watchlist-top-disclaimer,
.AD-portfolio-top-disclaimer,
.AD-alphafinder-top-disclaimer {
  margin-bottom: 10px;
  color: #6c757d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* 広告コンテンツ */
.AD-market-top-content,
.AD-analysis-top-content,
.AD-watchlist-top-content,
.AD-portfolio-top-content,
.AD-alphafinder-top-content {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* 警告スタイル */
.AD-market-top-warning,
.AD-analysis-top-warning,
.AD-watchlist-top-warning,
.AD-portfolio-top-warning,
.AD-alphafinder-top-warning {
  margin-top: 8px;
  color: #6c757d;
  font-size: 10px;
  text-align: center;
  line-height: 1.3;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .AD-market-top-container,
  .AD-analysis-top-container,
  .AD-watchlist-top-container,
  .AD-portfolio-top-container,
  .AD-alphafinder-top-container {
    margin: 15px 0;
    padding: 12px;
    min-height: 70px;
  }

  .AD-market-top-disclaimer,
  .AD-analysis-top-disclaimer,
  .AD-watchlist-top-disclaimer,
  .AD-portfolio-top-disclaimer,
  .AD-alphafinder-top-disclaimer {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .AD-market-top-warning,
  .AD-analysis-top-warning,
  .AD-watchlist-top-warning,
  .AD-portfolio-top-warning,
  .AD-alphafinder-top-warning {
    font-size: 9px;
    margin-top: 6px;
  }

  .view-top-ad {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .view-top-list-ad {
    width: 88%;
    margin-left: -0.75rem;
    margin-right: auto;
  }

  .view-top-portfolio-ad {
    width: 88%;
    margin-left: -0.6rem;
    margin-right: auto;
  }
}

@supports (-webkit-overflow-scrolling: touch) {
  .view-top-ad {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
  }

  .view-top-list-ad {
    width: 83%;
    margin-left: -0.85rem;
    margin-right: auto;
  }

  .view-top-portfolio-ad {
    width: 85%;
    margin-left: -0.6rem;
    margin-right: auto;
  }


}

/* 広告読み込み中のスタイル */
.AD-market-top-container.loading,
.AD-analysis-top-container.loading,
.AD-watchlist-top-container.loading,
.AD-portfolio-top-container.loading,
.AD-alphafinder-top-container.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/*# sourceMappingURL=main.d8b31342.css.map*/